html{ background:#000; } body{ min-width:960px; font-size:62.5%; color:#efefef; } .inner{ width:960px; margin:0 auto; position:relative; } a{ text-decoration:none } .wrapper{ padding-top:100px; overflow:hidden; } .sp{ display:none } /* ------------------------------------------------------------ */ /* header /* ------------------------------------------------------------ */ header{ min-width:960px; background:#000; width:100%; position:absolute; z-index:10000; top:0; left:0; border-bottom:1px solid #cd0000; height:100px; box-sizing:border-box; -webkit-box-sizing:border-box; } header #btn-menu{ display:none } header .inner{ padding:30px 0 22px; } header .logo{ width:212px; margin: 8px 10px 0 0; float:left; } header .logo img{ width:100%; height:auto } header nav{ position:relative; float:left; padding-top:32px; line-height:1; display:inline-block; width:728px; } header nav .g-nav{ display:inline-block } header nav li{ float:left; font-size:13px; } header nav li+li{ margin-left:25px; } header nav li a{ color:#666; } header nav li.current a, body.product ul.g-nav li.product a, body.history ul.g-nav li.history a, body.original_equipment ul.g-nav li.original_equipment a{ color:#cd0000; } header nav li a:hover{ text-decoration:none; color:#cd0000 } header nav .sml{ position:absolute; right:-10px; top:26px; } header nav .btn-lang{ position:absolute; right:60px; top:28px; line-height:1; font-size:11px; display:block; padding:6px 10px; background:#333; color:#666; border-radius:30px; display:none; } header nav .btn-lang:hover{ text-decoration:none; background:#cd0000; color:#fff } header.fixed{ position:fixed; height:auto } /* header.fixed .inner{ padding:10px 0; } header.fixed nav{ padding-top:14px; } header.fixed nav .sml{ top:6px; } header.fixed nav .btn-lang{ top:8px; } */ header nav .line { background:#f00; height:2px; display:block; position:absolute; width:50px; top:67px; left:0; display:none } /* header.fixed nav .line{ top:46px; } */ /* header.fixed .logo{ width:100px; margin: 0 30px 0 0; float:left; } header.fixed .logo img{ width:100%; height:auto } header.fixed nav{ float:left; width:830px; } header.fixed nav .g-nav li{ padding-top:3px } header.fixed nav .g-nav li+li{ font-size:15px; margin-left:20px } */ #headerSearch{ position:absolute; top:-12px; right:0; } #headerSearch input[type=text] { width: 195px; padding: 4px; background: #808080; border-radius: 3px; box-shadow: 1px 1px 3px #646363 inset; border: none; color: #fff; margin-right: 5px; } #headerSearch input { float: left; } #headerSearch input[type=image] { margin-top: -2px; } #headerSearch input { float: left; } .column, article, aside, footer{ clear:both; position:relative; text-align:center } #overlay{ background:rgba(0,0,0,.8); -webkit-background:rgba(0,0,0,.8); position:fixed; width:100%; height:100%; top:0; left:0; z-index:50; display:none } /* ------------------------------------------------------------ */ /* footer /* ------------------------------------------------------------ */ footer{ padding:30px 0; } body#top footer{ border-top:1px solid #cd0000; } footer .sitemap{ margin-bottom:30px; float:left; } footer .sitemap li{ float:left; font-size:12px; line-height:1 } footer .sitemap li a{ color:#999; display:inline-block; padding:0 12px; } footer .sitemap li:before{ content:'/'; font-weight:bold; color:#cd0000; } footer #crumb{ font-size:10px; color:#666; margin:-30px 0 40px; } footer #crumb li{ float:left; margin-right:5px; } footer #crumb li a{ color:#666; text-decoration:none } footer #crumb li+li:before{ content:'>'; color:#666; font-size:10px; margin-right:5px; } .sml li{ float:left; line-height:1 } .sml li+li{ margin-left:3px; } .sml li a{ display:block; width:26px; height:26px; /* background:#999 */ background:url(/brand/tire/advan/common/img/btn_twitter.png) 50% 50% no-repeat; } .sml li+li a{ display:block; background:url(/brand/tire/advan/common/img/btn_facebook.png) 50% 50% no-repeat; } .sml li a img{ display:none } .sml li a:hover{ background-color:#cd0000 } footer .sml{ margin-bottom:50px; } footer small{ color:#333; font-size:10px; } #crumbOut { border-top:1px solid #cd0000; padding:10px 0 0; } #crumbOut #crumb{ font-size:10px; color:#666; margin: 0 auto; position: relative; width: 960px; } #crumbOut #crumb li{ float:left; margin-right:5px; } #crumbOut #crumb li a{ color:#666; text-decoration:none } #crumbOut #crumb li+li:before{ content:'>'; color:#666; font-size:10px; margin-right:5px; } /* #btn-pagetop /* ------------------------------------------------------------ */ #btn-pagetop{ display:block; width:36px; height:36px; position: absolute; left:50%; top:auto; bottom:30px; margin-left:400px; z-index:1000; } #btn-pagetop.fixed{ position:fixed; left:50%; top:auto; bottom:30px; margin-left:400px; z-index:1000; } /* ------------------------------------------------------------ */ /* 下層共通 /* ------------------------------------------------------------ */ .lower .wrapper{ width:960px; margin:0 auto; background:none; padding:160px 0 100px; } .lower .ttl-style{ display:inline-block; height:45px; position:relative; color:#999; font-size:30px; margin-bottom:60px; } .lower .ttl-style:after{ content:''; display:block; height:6px; width:60px; position: absolute; top:auto; bottom:0; left:0; background:#cd0000; } /* Smart Phone */ @media only screen and (max-width: 640px){ body.product ul.g-nav li.product a, body.original_equipment ul.g-nav li.original_equipment a{ color:#fff; } header nav .g-nav li:nth-of-type(2){ padding: 16px 3.125%; } .pc{ display:none !important } .sp{ display:inherit } body{ min-width:320px; font-size:62.5%; color:#efefef; } .inner{ width:100%; margin:0 auto; position:relative; } .wrapper{ padding-top:45px; overflow: inherit; } .sp{ display:block } .pc{ display:none } .lower .wrapper{ width:auto; margin:0 auto; background:none; padding:60px 0 45px; } .lower .wrapper .inner{ width:auto; padding:0; } .lower .ttl-style{ display:inline-block; position:relative; color:#999; font-size:22px; line-height:1.8; margin-bottom:30px; } .lower .ttl-style:after{ content:''; display:block; height:6px; width:40px; position: absolute; top:auto; bottom:0; left:0; background:#cd0000; } /* header ------------------------------------------------------------ */ header{ position:absolute; z-index:10000; padding:12px 0; top:0; left:0; border-bottom:1px solid #cd0000; box-sizing:border-box; -webkit-box-sizing:border-box; height:45px; min-width:inherit; } header #btn-menu{ background: url(/brand/tire/advan/common/img/ico_menu.png) 0 0 no-repeat; background-size: 44px auto; -webkit-background-size: 44px auto; width:44px; height:44px; position:absolute; top:-12px; right:0; display:block } header #btn-menu.opend{ background-position: 0 100%; background-color:#cd0000 } header .inner{ padding:0 } header .logo{ width:120px; margin: 0 0 0 3.125%; } header .logo img{ width:100%; height:auto } header nav{ background:#cd0000; width:100%; height:auto; top:8px; left:0; padding:0; display:none } header nav .g-nav{ display:block; font-size:16px; } header nav .g-nav li{ display:block; float:none; } header nav .g-nav li a{ display:block; padding:16px 3.125%; color:#fff; background: url(/brand/tire/advan/common/img/ico_arrow2_sp.png) 94% 50% no-repeat; background-size:8px 14px; -webkit-background-size:8px 14px; } header nav .line{ display:none !important } header nav .g-nav li+li{ margin:0; border-top:1px solid #9f1111 } header nav .btn-lang{ position:relative; float:right; padding:10px 22px; margin-top:5px; top:0; right:3.125%; background:#600; color:#fff; } header nav .btn-lang:hover{ background:#600; } header nav .sml{ position:relative; float:left; top:0; right:0; margin-left:3.125% } header nav .sml li a{ width:28px; height:28px; display:block; padding:6px; } header nav .sml li a img{ display:block; width:100%; height:auto; } header nav .sml li+li{ margin-left:10px; } header nav .sub-item{ padding:10px 3.125%; background:#920000; } /* fixed */ header.fixed{ /* position: absolute; */ } header.fixed .inner{ padding:0; } #headerSearch{ display:none; } /* footer ------------------------------------------------------------ */ footer{ padding:10px 0 20px; } body#top footer{ border-top:1px solid #cd0000; } footer .sitemap{ margin-bottom:20px; float:none; border-bottom:1px solid #333; } footer .sitemap li{ float:left; font-size:12px; line-height:1; width:50%; text-align:left; border-top:1px solid #333; box-sizing:border-box; } footer .sitemap li:nth-child(2n+1){ border-right:1px solid #333; } footer .sitemap li a{ color:#999; display:block; padding:10px 12px; } footer .sitemap li:before{ display:none } /* top's footer ----------------------- */ #top footer{ padding-top:0; } #top footer .sitemap li:first-child, #top footer .sitemap li:nth-child(2){ border-top:none } /* #crumb ----------------------------- */ #crumbOut { border-top:1px solid #cd0000; } #crumbOut #crumb{ font-size:10px; color:#666; margin:0 3.125% 0; width: auto; } #crumbOut #crumb li{ float:left; margin-right:5px; } #crumbOut #crumb li a{ color:#666; text-decoration:none } #crumbOut #crumb li+li:before{ content:'>'; color:#666; font-size:10px; margin-right:5px; } .sml li{ float:left; line-height:1 } .sml li+li{ margin-left:3px; } .sml li a{ display:block; width:26px; height:26px; /* background:#999 */ } .sml li{ float:left; line-height:1 } .sml li+li{ margin-left:3px; } .sml li a{ display:block; width:26px; height:26px; /* background:#999 */ background:url(/brand/tire/advan/common/img/btn_twitter.png) 50% 50% no-repeat; } .sml li a:hover{ background:#cd0000 } footer .sml{ margin-bottom:50px; } footer small{ color:#333; font-size:10px; clear:both; } #btn-pagetop{ display:block; width:36px; height:36px; position: absolute; right:3.215%; top:auto; bottom:30px; z-index:1000; margin:0; left:auto; } #btn-pagetop.fixed{ position:fixed; left:50%; top:auto; bottom:30px; margin-left:400px; z-index:1000; } }