/**
* Form & Checkbox Styles
*/
h4{
font-weight: 700;
margin-bottom: .5em;
}
label{
font-weight: 300;
}
button{
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ",Meiryo,"","ＭＳ Pゴシック",sans-serif;
display: inline-block;
vertical-align: top;
padding: .4em .8em;
margin: 0;
border: 0;
color: #333;
font-size: 16px;
font-weight: 700;
border-radius: 4px;
cursor: pointer;
}
button:focus{
outline: 0 none;
}
.controls{
background: #ddd;
padding:5px 30px;
}
fieldset{
font-size:16px;
border:none;
padding:0;
margin:0 auto;
}
.checkbox{
display: block;
position: relative;
cursor: pointer;
float:left;
margin-right:25px;
}
.checkbox.mR20{
margin-right:20px;
}
.checkbox input[type="checkbox"]{
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.checkbox label{
display: inline-block;
vertical-align: top;
text-align: left;
padding-left: 1.5em;
line-height:20px;
}
.checkbox label:before,
.checkbox label:after{
content: '';
display: block;
position: absolute;
}
.checkbox label:before{
left: 0;
top: 0px;
width: 18px;
height: 18px;
margin-right: 10px;
background: #fff;
border-radius: 3px;
}
.checkbox label:after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 2px;
background: #f00;
opacity: 0;
pointer-events: none;
}
.checkbox input:checked ~ label:after{
opacity: 1;
}
.checkbox input:focus ~ label:before{
background: #eee;
}
/**
* Container/Target Styles
*/
.container{
text-align: justify;
position: relative;
}
.container .mix,
.container .gap{
/* display: inline-block; */
}
.container .mix{
display: none;
margin-top:50px;
}
.container .mix.green{
background: #a6e6a7;
}
.container .mix.blue{
background: #6bd2e8;
}
.container .mix.circle{
border-radius: 999px;
}
.container .mix.triangle{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #68b8c4;
border-left-color: #68b8c4;
}
.container .mix.sm{
width: 50px;
height: 50px;
}
/**
* Fail message styles
*/
.container .fail-message{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
opacity: 0;
pointer-events: none;
-webkit-transition: 150ms;
-moz-transition: 150ms;
transition: 150ms;
}
.container .fail-message:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.container .fail-message span{
display: inline-block;
vertical-align: middle;
font-size: 20px;
font-weight: 700;
margin-bottom:30px;
}
.container.fail .fail-message{
opacity: 1;
pointer-events: auto;
margin-top:20px;
}
/* searchbytirebrand
------------------------------------------------*/
table.FiltersList{
width:100%;
}
table.FiltersList tr th,
table.FiltersList tr td{
padding:15px;
border-top:#000 dotted 1px;
}
table.FiltersList tr:first-child th,
table.FiltersList tr:first-child td{
border-top:none;
}
table.FiltersList tr td.brand{
padding-left:0;
padding-right:0;
}
table.FiltersList tr th{
width:6em;
vertical-align:top;
}
#searchbytirebrand .container .mix,
#searchbycartype .container .mix{
width:980px;
}
#searchbytirebrand .controls{
padding: 5px 0px 5px 20px;
}
/* searchbycartype
------------------------------------------------*/
#searchbycartype .controls{
margin-top:20px;
padding:30px;
}
#searchbycartype fieldset{
background:#fff;
padding:30px 40px;
font-size:15px;
}
#searchbycartype fieldset div{
width:630px;
margin:0 auto;
}
#searchbycartype .controls .Description{
text-align:center;
font-size:15px;
font-weight:bold;
margin-bottom:15px;
}
#searchbycartype .checkbox label:before{
background:#eee;
}
#searchbycartype .checkbox label{
position:relative;
}
#searchbycartype .checkbox{
width:170px;
margin:15px 20px;
text-align:center;
}
#searchbycartype .checkbox img{
width:110px;
margin-bottom:10px;
}
#searchbycartype .controlsIn{
background:#fff;
padding: 30px 73px;
text-align: center;
}
#searchbycartype .controlsIn button{
font-size:14px;
font-weight: normal;
margin: 15px 10px;
text-align: center;
width: 170px;
padding:60px 0 7px;
}
#searchbycartype .controlsIn button img{
margin-bottom: 5px;
width: 110px;
}
#searchbycartype .controlsIn button.hybrid{
background:url(/product/tire/img/searchbycartype_icon_hybrid.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.hybrid.active{
background:url(/product/tire/img/searchbycartype_icon_hybrid_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.sports{
background:url(/product/tire/img/searchbycartype_icon_sports.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.sports.active{
background:url(/product/tire/img/searchbycartype_icon_sports_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.sedan{
background:url(/product/tire/img/searchbycartype_icon_sedan.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.sedan.active{
background:url(/product/tire/img/searchbycartype_icon_sedan_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.compact{
background:url(/product/tire/img/searchbycartype_icon_compact.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.compact.active{
background:url(/product/tire/img/searchbycartype_icon_compact_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.minivan{
background:url(/product/tire/img/searchbycartype_icon_minivan.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.minivan.active{
background:url(/product/tire/img/searchbycartype_icon_minivan_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.suv{
background:url(/product/tire/img/searchbycartype_icon_suv.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.suv.active{
background:url(/product/tire/img/searchbycartype_icon_suv_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.historic{
background:url(/product/tire/img/searchbycartype_icon_historic.png) #eee center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.historic.active{
background:url(/product/tire/img/searchbycartype_icon_historic_w.png) #f00 center 10px no-repeat;
background-size:110px;
}
#searchbycartype .controlsIn button.active{
color:#fff;
}
#searchbycartype .mix{
margin-top:0;
}