/*------------------------------------------------
common.css
------------------------------------------------*/
/* general rules
================================================*/
/* html
------------------------------------------------*/
html {
overflow-y: scroll;
position:relative;
min-height:100%;
}
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
background:#fff;
}
/* body
------------------------------------------------*/
body {
color: #000;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ",Meiryo,"","ＭＳ Pゴシック",sans-serif;
font-size: 14px;
text-align: left;
line-height: 1.7em;
}
/* 99% for safari; 100% is too large */
select,
input,
textarea
{
font: 99%;
}
input.txt,
textarea{
border:#aaa solid 1px;
}
/* Bump up !IE to get to 13px equivalent */
pre,
code
{
font: 115% monospace;
*font-size: 100%;
}
/* link
------------------------------------------------*/
a{ font-size:100%; }
a:link { color: #000; text-decoration: underline; }
a:visited { color: #000; text-decoration: underline; }
a:hover, a:active { color: #000; text-decoration:none ; cursor:pointer; }
a.u_none { color: #000; text-decoration: none ; }
a.u_none:hover { color: #000; text-decoration:underline ; }
/* img
------------------------------------------------*/
img { border: 0; vertical-align:top; }
a:active img { text-decoration: none; }
a:hover img.hover{
opacity:0.8;
-moz-opacity: 0.8; /* Firefox */
filter:alpha(opacity=80); /* IE6/7 */
-ms-filter: "alpha( opacity=80 )"; /* IE8 */
}
/* text
------------------------------------------------*/
strong { font-weight: bold; line-height: 1.3; letter-spacing: 0em; }
em { font-weight: bold; font-style: normal; line-height: 1.2; }
address { font-style: normal; }
/* h1, h2, h3, h4, h5, h6
------------------------------------------------*/
h1, h2, h3, h4, h5, h6{
line-height: 1em;
letter-spacing: 0em;
margin:0;
}
h1{
width:236px;
padding:10px 0 0 20px;
float: left;
}
h2{
border-bottom:#dc0a0d solid 3px;
padding:50px 0;
font-size:26px;
margin-bottom:40px;
}
h3{
font-size:20px;
padding-bottom:25px;
border-bottom:#ccc solid 2px;
font-weight:normal;
margin-bottom:25px;
margin-top:60px;
}
h3.mT0{
margin-top:0;
}
/* paragraph
------------------------------------------------*/
div { margin: 0; line-height: 1.7em; }
p { margin: 0; line-height: 1.7em; }
/* list
------------------------------------------------*/
ul {
list-style-type: disc;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li ul {
list-style: disc;
margin: 0;
}
ol {
list-style: decimal;
margin: 0;
padding-left: 0;
}
dl {
margin: 0;
}
dl dt {
margin: 0;
padding: 0;
line-height: 1.2;
}
dl dd {
margin: 0;
line-height: 1.5;
}
/* form
--------------------------------------*/
input, textarea,select { font-family: Helvetica,"メイリオ",Meiryo,"","ＭＳ Pゴシック",sans-serif;
margin:0; font-size:12px; padding:5px;}
input[type=text],
select{
border:#b9b9c8 solid 1px;
}
input[type=checkbox]{
vertical-align:text-top;
margin-right:5px;
}
input.m0 {margin-right:0;}
input.border,
textarea.border,
select.border{
border:#a0bfdb solid 1px;
}
option { padding-left: 0px; }
.Eng{
ime-mode: disabled;
}
/* common rules
================================================*/
/* align
------------------------------------------------*/
.right { text-align: right; }
.center { text-align: center; }
.left { text-align: left; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.top { vertical-align: top; }
/* table
------------------------------------------------*/
table{
border-spacing: 0;
border-collapse: collapse;
width:100%;
}
/* text
------------------------------------------------*/
.f20 { font-size: 20px; }
.f18 { font-size: 18px; }
.f16 { font-size: 16px; }
.f14 { font-size: 14px; }
.f12 { font-size: 12px; line-height:1.3em; }
.f11 { font-size: 11px; }
.f10 { font-size: 10px; }
.f9 { font-size: 9px; }
.fwarning { color: #C00; }
.fred { color: #FF0000; }
.fpink { color: #dc4d70; }
.fbk { color: #000; }
.fgy { color: #666;}
.fwt { color: #FFF; }
.fbr { color: #b28146; }
.fplain { font-weight: normal; }
.fbold { font-weight: bold; }
.fnormal { font-weight: normal; }
.error { color: #FF0000; }
.submessage { font-size: 11px; }
/* margin
------------------------------------------------*/
.mAuto{
margin-left:auto;
margin-right:auto;
}
.m5 {
margin:5px;
}
.m10 {
margin:10px;
}
.mT2 {
margin-top:2px;
}
.mT5 {
margin-top:5px;
}
.mT10 {
margin-top:10px;
}
.mT15 {
margin-top:15px;
}
.mT20 {
margin-top:20px;
}
.mT-20 {
margin-top:-20px;
}
.mT30 {
margin-top:30px;
}
.mT35 {
margin-top:35px;
}
.mT40 {
margin-top:40px;
}
.mT50 {
margin-top:50px;
}
.mL5 {
margin-left:5px;
}
.mL10 {
margin-left:10px;
}
.mL15 {
margin-left:15px;
}
.mL18{
margin-left:18px;
}
.mL20 {
margin-left:20px;
}
.mL30 {
margin-left:30px;
}
.mL50 {
margin-left:50px;
}
.mL100 {
margin-left:100px;
}
.mL200 {
margin-left:200px;
}
.mL252 {
margin-left:252px;
}
.mR5 {
margin-right:5px;
}
.mR10 {
margin-right:10px;
}
.mR15 {
margin-right:15px;
}
.mR20 {
margin-right:20px;
}
.mR30 {
margin-right:30px;
}
.mLR10 {
margin-right:10px;
margin-left:10px;
}
.mLR20 {
margin-right:20px;
margin-left:20px;
}
.mB5 {
margin-bottom:5px;
}
.mB10 {
margin-bottom:10px;
}
.mB15 {
margin-bottom:15px;
}
.mB20 {
margin-bottom:20px;
}
.mB30 {
margin-bottom:30px;
}
.mB40 {
margin-bottom:40px;
}
.mTB10 {
margin-top:10px;
margin-bottom:10px;
}
/* float
------------------------------------------------*/
.Lfloat {
float:left;
}
.Rfloat {
float:right;
}
/* [hack] clear fix
--------------------------------------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
min-height: 1%; /* for IE 7*/
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/* show_sp
--------------------------------------*/
.show_sp{
display:none;
}
/* general layout
================================================*/
/* wrap
------------------------------------------------*/
#wrap{
min-width:980px;
margin:0 auto;
}
/* header
------------------------------------------------*/
#header{
background:url(/product/tire/img/header_bg.png) #000 center top no-repeat;
padding-bottom:5px;
}
#headerIn{
width:980px;
margin:0 auto;
}
#header a{
color: #fff;
text-decoration: none;
}
#header a:hover{
text-decoration: underline;
}
#headerR{
float:right;
}
#h_menu li {
background: url(/product/tire/img/h_arrow.gif) left center no-repeat;
float: left;
font-size: 10px;
line-height: 1.2em;
margin-left: 35px;
margin-top: 6px;
padding-left: 10px;
vertical-align: middle;
}
#headerSearch{
margin-top:20px;
float:right;
}
#headerSearch input{
float: left;
}
#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;
cursor: default;
}
#headerSearch input[type=image]{
margin-top:-2px;
}
#searchIcon {
border: 0;
width:19px;
height:20px;
background:url(/product/tire/img/search_icon.png) no-repeat;
cursor:hand;
}
/* gNavi
------------------------------------------------*/
ul#gNavi_sp{
display:none;
}
#gNavi{
border-right:#555 solid 1px;
height:25px;
margin:10px auto 0;
width:980px;
font-size: 14px;
}
#gNavi li{
float:left;
width:195px;
text-align:center;
}
#header #gNavi li.tileSearch,
#header #gNavi li.wheelSearch,
#header #gNavi li a{
/* display: inline-block; */
border-left:#555 solid 1px;
height: 25px;
width:195px;
text-align: center;
text-decoration: none;
line-height:25px;
outline: none;
position: relative;
z-index: 2;
color:#fff;
display: block;
}
#gNavi li:nth-of-type(1), #header #gNavi li:nth-of-type(1) a {
/* width: 163px; */
display: none;
}
#gNavi li:nth-of-type(4), #header #gNavi li:nth-of-type(4) a {
width: 391px;
}
#header #gNavi li.tileSearch:before,
#header #gNavi li.tileSearch:after,
#header #gNavi li.wheelSearch:before,
#header #gNavi li.wheelSearch:after,
#header #gNavi li a:before,
#header #gNavi li a:after {
position: absolute;
z-index: -1;
display: block;
content: '';
left: 0;
width: 100%;
height: 50%;
background-color: #000;
}
#header #gNavi li.tileSearch,
#header #gNavi li.tileSearch:before,
#header #gNavi li.tileSearch:after,
#header #gNavi li.wheelSearch,
#header #gNavi li.wheelSearch:before,
#header #gNavi li.wheelSearch:after,
#header #gNavi li a,
#header #gNavi li a:before,
#header #gNavi li a:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .15s;
transition: all .15s;
}
/* #header #gNavi li:first-child,
#header #gNavi li:first-child a{
width:174px;
} */
#header #gNavi li.tileSearch:hover,
#header #gNavi li.wheelSearch:hover,
#header #gNavi li a:hover{
text-decoration:none;
background-color: #a60510;
cursor: pointer;
}
#header #gNavi li.tileSearch:before,
#header #gNavi li.wheelSearch:before,
#header #gNavi li a:before {
top: 0;
}
#header #gNavi li.tileSearch:after,
#header #gNavi li.wheelSearch:after,
#header #gNavi li a:after {
bottom: 0;
}
#header #gNavi li.tileSearch:hover:before,
#header #gNavi li.tileSearch:hover:after,
#header #gNavi li.wheelSearch:hover:before,
#header #gNavi li.wheelSearch:hover:after,
#header #gNavi li a:hover:before,
#header #gNavi li a:hover:after {
height: 0;
background-color: #210103;
}
#header #gNavi li.tileSearch.open:before,
#header #gNavi li.tileSearch.open:after,
#header #gNavi li.wheelSearch.open:before,
#header #gNavi li.wheelSearch.open:after{
background: #333;
}
.is-fixed #gNavi li,
#header .is-fixed #gNavi li.tileSearch,
#header .is-fixed #gNavi li a{
width:170px;
}
.is-fixed #gNavi li:nth-of-type(1), #header .is-fixed #gNavi li:nth-of-type(1) a {
border-left: none !important;
display: block;
text-align: left;
width:175px;
}
.is-fixed #gNavi li:nth-of-type(1) img{
width: 150px;
margin: 10px 0 0;
}
#header .is-fixed #gNavi li:nth-of-type(1) a:hover{
background:#000;
}
#header .is-fixed #gNavi li:nth-of-type(1) a:before,
#header .is-fixed #gNavi li:nth-of-type(1) a:after{
display: none;
}
#header .is-fixed #gNavi li.wheelSearch{
width: 135px;
}
.is-fixed #gNavi li:nth-of-type(3), #header .is-fixed #gNavi li:nth-of-type(3) a {
width: 132px;
}
.is-fixed #gNavi li:nth-of-type(4), #header .is-fixed #gNavi li:nth-of-type(4) a {
width: 329px;
}
/* breadcrumb
------------------------------------------------*/
#breadcrumb{
border-bottom:#ddd solid 1px;
padding:15px 0 13px;
}
#breadcrumb ul{
width:980px;
margin:0 auto;
}
#breadcrumb ul li{
float:left;
font-size:12px;
margin-right:10px;
}
#breadcrumb ul li a.top{
display:block;
background:#f00;
padding:0 5px;
color:#fff;
}
#breadcrumb ul li a{
text-decoration:none;
}
#breadcrumb ul li a:hover{
text-decoration:underline;
}
/* footer
------------------------------------------------*/
#footer{
margin-top:85px;
overflow:hidden;
}
#footerMenu{
background:#333;
padding:30px 0 20px;
margin-top:10px;
}
#footerMenu ul{
width:980px;
margin:0 auto;
}
#footerMenu ul li{
float:left;
border-left:#fff solid 1px;
}
#footerMenu ul li:nth-of-type(6),
#footerMenu ul li:nth-of-type(7),
#footerMenu ul li:nth-of-type(8),
#footerMenu ul li:nth-of-type(9){
margin-top:30px;
}
#footerMenu ul li:nth-of-type(5),
#footerMenu ul li:last-child{
border-right:#fff solid 1px;
}
#footerMenu ul li a,
#footerMenu ul li span{
color:#fff;
text-decoration: none;
font-size:16px;
padding:5px 35px 5px 34px;
display: inline-block;
text-align: center;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
background-color: #333;
color: #fff;
}
#footerMenu ul li:nth-of-type(4) a{
padding:5px 36px;
}
#footerMenu ul li:nth-of-type(6) a,
#footerMenu ul li:nth-of-type(7) a,
#footerMenu ul li:nth-of-type(8) a,
#footerMenu ul li:nth-of-type(9) a{
padding:5px 61px;
}
#footerMenu ul li a:hover {
background-color: #a60510;
}
#footerMenu ul li a:before,
#footerMenu ul li a:after {
position: absolute;
z-index: -1;
display: block;
content: '';
left: 0;
width: 100%;
height: 50%;
background-color: #333;
}
#footerMenu ul li a,
#footerMenu ul li a:before,
#footerMenu ul li a:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .15s;
transition: all .15s;
}
#footerMenu ul li a:before {
top: 0;
}
#footerMenu ul li a:after {
bottom: 0;
}
#footerMenu ul li a:hover:before,
#footerMenu ul li a:hover:after {
height: 0;
background-color: #333;
}
#footerBOX{
background:#000;
padding-bottom: 10px;
}
#footer_in{
width:980px;
margin:0 auto;
}
#footer_in p.logo {
float: left;
line-height: 1em;
margin: 16px 20px 0 0;
}
#footer_in ul {
float: left;
margin-top: 14px;
}
#footer_in ul li {
background: url(/product/tire/img/h_arrow.gif) left center no-repeat;
float: left;
font-size: 10px;
margin-right: 20px;
padding-left: 10px;
}
#footer_in ul li a {
color: #fff;
text-decoration: none;
}
#footer_in p#copy {
float: right;
font-size: 9px;
margin: 18px 0 0;
color:#fff;
}
/* to_top
------------------------------------------------*/
#pageTop, #hide {
bottom: 50px;
height: 52px;
position: fixed;
right: 100px;
width: 52px;
z-index: 999;
}
/* 20180620 メニュー追従 */
#header .is-fixed {
position: fixed;
background: #000;
z-index: 10000;
top: 0;
width: 100%;
}
#header .is-fixed #gNavi{
height: 45px;
margin-top:0;
font-size: 14px;
}
#header .is-fixed #gNavi li.tileSearch,
#header .is-fixed #gNavi li.wheelSearch,
#header .is-fixed #gNavi li a{
height: 45px;
line-height:45px;
}
.OpenTileSearchBox .glass {
display: none;
}