body { min-height:1000px; } .fa-2x { font-size:1em; } nav.navbar-nav > li > a { padding:0px; } li.col-xs-3 a.btn { padding:0px; } #menu_header { position: relative; float: left; width: 100%; padding: 0 0px; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15); background: #ddd; display:none; margin-bottom:18px; } #menu_header, #menu_header ul { list-style: none; } #menu_header > li { float: left; position: relative; border-right: 1px solid rgba(0,0,0,.1); box-shadow: 1px 0 0 rgba(255,255,255,.25); perspective: 1000px; height:60px; } #menu_header > li.r { float: right; } #menu_header > li.c { float: center; } #menu_header > li:first-child { border-left: 1px solid rgba(255,255,255,.25); box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25); } #menu_header a, #menu_header span.text { display: block; position: relative; z-index: 10; /* padding: 20px 20px 13px 20px; */ padding:20px 5px 13px 5px; text-decoration: none; color: rgba(75,75,75,1); line-height: 1; background: transparent; transition: all .25s ease-in-out; height:100%; } #menu_header a img.siteicon, #menu_header span.text img.siteicon { padding:0; width:28px; margin-top:-9px; } #menu_header > li:hover > a { background: #333; color: rgba(0,223,252,1); text-shadow: none; } #menu_header li ul { position: absolute; left: 0; z-index: 1; width: 200px; padding: 0; opacity: 0; visibility: hidden; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: transparent; overflow: hidden; transform-origin: 50% 0%; } #menu_header li:hover ul { padding: 15px 0; background: #333; opacity: 1; visibility: visible; box-shadow: 1px 1px 7px rgba(0,0,0,.5); animation-name: swingdown; animation-duration: 1s; animation-timing-function: ease; } .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img { aspect-ratio: 4 / 3; object-fit: cover; } /* マイページ */ li.side_mypage_menu_li { margin:0px; padding:0px; border-bottom:1px dotted orange; } /* カテゴリ */ .cat_div { margin:0px; padding:4px; display:flex; justify-content:space-between; align-items:center; } .cat_li { margin:0px; padding:4px; } .cat_div .cat_arrow { font-size: 0.9em; color: #337ab7; text-decoration:underline; cursor: pointer; } .cat_li.level1 { margin:0px; border-left:1px solid orange; border-right:1px solid orange; border-bottom:1px solid orange; } .cat_li.level2 { margin-left:18px; border-top:1px solid orange; } .cat_li.level3 { margin-left:18px; border-top:1px dashed orange; } .cat_li.level4 { margin-left:18px; border-top:1px dashed orange; } /* メーカー */ .panel-makers { padding:0px; max-height: 250px; overflow-y: auto; } li.maker_list { margin:0px; padding:4px; } li.maker_list a { padding:0px; } /* 一覧 */ .list_area { position: relative; } .x_frm { position: absolute; right: 10px; bottom: 30px; z-index: 10; /* 必要に応じて調整 */ /* background: rgba(255, 255, 255, 0.9); */ /* 背景が透けて読みづらくならないように */ padding: 4px; border-radius: 4px; } .x_frm input { font-size: 70% !important; padding: 2px 4px; height: auto; } @media screen and (max-width: 767px) { .x_frm { bottom: 6px; } } /* カート */ #set2address { padding:6px; } /* ヘッダリンクアイコン画像化 */ #menu_header .l_mypage { background:lightseagreen; } #menu_header .l_mypage a { color:white; } #menu_header .l_logout { background:lightseagreen; } #menu_header .l_logout a { color:white; } #menu_header .l_air { background:url(/html/image/site_air.png); background-size: cover; background-position: center; background-repeat: no-repeat; } #menu_header .l_air span.text { opacity: 0; } #menu_header .l_air img { opacity: 0; } #menu_header .l_air a { opacity: 0; } #menu_header .l_car { background:url(/html/image/site_car.png); background-size: cover; background-position: center; background-repeat: no-repeat; } #menu_header .l_car span.text { opacity: 0; } #menu_header .l_car img { opacity: 0; } #menu_header .l_car a { opacity: 0; } #menu_header .l_contact { background:url(/html/image/site_mail.png); background-size: cover; background-position: center; background-repeat: no-repeat; } #menu_header .l_contact span.text { opacity: 0; } #menu_header .l_contact img { opacity: 0; } #menu_header .l_contact a { opacity: 0; } #menu_header .l_login { background:url(/html/image/site_login.png); background-size: cover; background-position: center; background-repeat: no-repeat; } #menu_header .l_login span.text { opacity: 0; } #menu_header .l_login img { opacity: 0; } #menu_header .l_login a { opacity: 0; } @media screen and (max-width: 480px) { #menu_header { background:lightseagreen; } #menu_header > li { height:50px; } #menu_header .l_air { background:url(/html/image/site_air_sp.png); background-size: 100% auto; /* 横幅をliの幅に合わせる、高さは自動 */ } #menu_header .l_car { background:url(/html/image/site_car_sp.png); background-size: 100% auto; /* 横幅をliの幅に合わせる、高さは自動 */ } #menu_header .l_contact { background:url(/html/image/site_mail_sp.png); background-size: 100% auto; /* 横幅をliの幅に合わせる、高さは自動 */ } #menu_header .l_login { background:url(/html/image/site_login_sp.png); background-size: 100% auto; /* 横幅をliの幅に合わせる、高さは自動 */ } }