@charset "UTF-8";
/**
*   update 2018.07.18 10:00
*/


/*--------------
    button
--------------*/
.btn{
    font-size:100%;
    background:#272986;
    display:inline-block;
    margin:0 auto;
    color:#fff;
    font-weight:normal;
    text-decoration: none;
    padding: 8px 20px;
    text-align:center;
    cursor:pointer;
    border:none;
    -webkit-transition: all .3s;
    transition: all .2s;
    border-radius: 4px;
    font-weight: bold;
}
.btn.current{
    background-color: #ffdf00;;
    color:#000;
}
.btn.current:before{
    border-left: 4px solid #000;
}
table .btn{
    padding: 6px 6px;
    white-space: nowrap;
}
.btn:before{
    content: '';
    border:4px solid transparent;
    border-left: 4px solid #fff;
    display: inline-block;
    line-height: 1;
    margin-right: 4px;
}
a.btn{
    color:#fff;
}
.btn:hover{
    opacity: 0.8;
}
.btn.normal{
    background-color: #999
}
button.btn,
input.btn{
    padding: 10px 20px;
}

.btn.important{
    background-color: #ec661a;
}
.pageAnchor{
    margin-bottom: 15px;
}
.pageAnchor:before{
    content: '';
    border:4px solid transparent;
    border-top: 4px solid #fff;
    display: inline-block;
    line-height: 1;
    margin-right: 4px;
}

div.pdfDl{
    text-align: right;
    margin-bottom:10px;
}

/*--------------
    remarks
--------------*/
.remarks{
    border: 1px solid rgba( 255, 255, 255, 0.1 );
    background-color: rgba( 255, 255, 255, 0.05 );
    padding:12px;
    font-size:90%
}
.remarks p:last-child{
    margin-bottom:0;
}
.remarks h3{
    margin-bottom:5px;
    color:#7b7de8;
}
/*--------------
    btnList
--------------*/
ul.btnList{
    text-align: center;
    padding: 20px 0 ;
}
ul.btnList li{
    display: inline-block;
    margin:0;
}
ul.btnList li span.label{
    padding: 10px 20px;
    min-width: 150px;
    margin: 0px 1px 0 0;
    display: block;
    text-align: center;
    font-weight: bold;
    background: #272986;
    cursor: pointer;
    color:#fff;
}
ul.btnList li span.label:hover{
    background: #5557c6;
}
ul.btnList li:first-child span.label{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
ul.btnList li:last-child span.label{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
ul.btnList li span.default{
    background-color: #999;
}
ul.btnList li span.default:hover{
    background-color: #aaa;
}
ul.disabled li span.label{
    cursor: default;
    opacity: 0.3;
}
ul.disabled li span.label:hover{
    background-color: #272986;
}
ul.disabled li span.default:hover{
    background-color: #999;
}
/*--------------
    a.pdf
--------------*/
a.pdf{
    background-image: url(/assets/images/pdf.svg);
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size:  auto 15px ;
    padding-left: 36px;
    padding-right: 12px;
}
a.pdf:before{
    content:none;
    border:none;
}

/*--------------
    caution
--------------*/
div.caution{
    border: 2px solid #ff0199;
    color:#ff0199;
    padding:5px 10px;
    margin: 10px 0;
}

/*--------------
    carName
--------------*/
figure.item{
    background: #fff;
    color:#000;
    display: table;
    padding:14px 10px;
    border-radius: 3px;
    font-size:90%;
    line-height: 150%;
}

figure.item.selected{
    box-shadow: 0 0 0 4px #ffdf00 inset;
}

figure.item div.thumb{
    display: table-cell;
    vertical-align: top;
    width: 50%;
    padding: 0px;
}
figure.item figcaption{
    display: table-cell;
    vertical-align: top;
    width:40%;
    padding: 5px;
}
figure.item .btn{
    display: block;
}
figure.item table th{
    width:40%;
}
figure.item table.line th,
figure.item table.line td{
    border-bottom-style: dotted;
}
/*--------------
    searchResult
--------------*/
.searchResult{
    margin:0 0 30px 0;
}
.searchResult ul{
    display: table-row;
    width:100%;
}

.searchResult ul li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding:5px 5px;
    border-right:1px solid #333;
    border-bottom:1px solid #ccc;
}
.searchResult ul li:first-child{

}
.searchResult ul li.img{
    max-width: 60px;
}
.searchResult ul li.img img{
    display: block;
    width:100%;
}
.searchResult ul li.price{
    padding:0;
}
.searchResult ul li.price table.line{
    border-bottom: none;
    border-top:none;
    height: 100%;
}
.searchResult ul li.price table.line tr:last-child td,
.searchResult ul li.price table.line tr:last-child th{
    border-color:#999;
    border-bottom: none;
    border-top:none;
}
.searchResult ul li.link{
    white-space: nowrap;
    width:5%;
}

#searchWord{
    overflow: hidden;
    padding: 8px 8px;
    background: #444;
    color:#fff;
}
#searchWord div.text{
   width:43%;
   text-align: center;
   float: left;
   font-weight:bold;
}
#searchWord div.searchField{
    overflow: hidden;
    margin:0 0 20px 0;
}
#searchWord  input{
    background: #f5f5f5;
    border:none;
    padding: 5px;
    float:right;
    width: 55%;
    margin-right:0;
}
/*--------------
    carName
--------------*/
.selectBox select{
    width: 100%;
    padding:0;
    /*
    height: 170px;
    */
    margin:0 0 20px 0;
    border-color: #666;
    border-radius: 0;
    background-color: #e6f1f6;
}
.selectBox select option{
    padding: 5px 5px;
}
.selectBox select option:nth-child(odd){

    background: rgba( 255, 255, 255, 0.8 );

}
.selectCar {
    display: table;
    width:100%;
}
.selectCar .selectBox {
    display: table-cell;
    width:20%;
    padding-right:2.5%;
    position: relative;
}
.selectCar .selectBox .selectTitle{
    background-color: transparent;
    color:#fff;
    text-align: center;
    padding: 8px 4px;
    font-size: 100%;
    line-height: 1;
    display: inline-block;
    background-color: #333;
    position: relative;
    margin-bottom:20px;
    text-align: center;
    min-width: 80px;
}
.selectCar .selectBox .selectTitle:after{
    border: 8px solid transparent;
    border-top: 12px solid #333;
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -18px;
    left: 12px;
}
.selectCar .selectBox:last-child {
    padding-right:0%;
}
.selectCar .selectBox:after{
    content: '';
    border:10px solid transparent;
    border-left:10px solid #252797;
    display: inline-block;
    line-height: 1;
    position: absolute;
    right: 3%;
    top:50%;
    margin: 0px -10px 0 0 ;
}
.selectCar .selectBox:last-child:after{
    content: none;
}
.selectBox select {
    background-image: none;
}
.selectBox select option.active{
    background-color: #ffdf00;
    /*
     box-shadow: inset 100px 100px #ffcc00;
     */
    background: linear-gradient(#ffdf00, #ffdf00);
    background-color: #ffdf00 !important; /* for IE */
    color:#000 !important;
}
.selectBox select option.default{
    display: none;
}


/*--------------
    domestic_car_sort
--------------*/
.keyButton button{
    border-radius: 4px ;
    background: #333;
    color:#fff;
    padding: 6px 12px;
    display: inline-block;
    cursor: pointer;
    margin:0 8px 8px 0;
}
.keyButton button:before{
    content: none;
}
.keyButton button.active{
    background: #ffdf00;
    color:#000;
}
/*--------------
    switch
--------------*/
label.switch {
    margin:0;
    background-color: #ddd;
    display: inline-block;
    border-radius: 6px;
    font-size: 95%;
    font-weight: bold;
    color:#999;
    overflow: hidden;
    vertical-align: middle;
    box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.2 ) inset;
    cursor: pointer;
}
label.switch span.on,
label.switch span.off{
    display: inline-block;
    padding: 6px 15px;
    min-width:60px;
    text-align: center;
    transition: all .2s;
}
label.switch span.on{
}
label.switch span.off{
    background-color: #a78877;
    color:#ccc;
    box-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.2 ) inset;
}

label.switch input{
    display: none;
}
label.switch.checkOn{
    cursor: default;
}
label.checkOn span.on{
    box-shadow: 2px 2px 3px rgba( 0, 0, 0, 0.2 ) inset;
    background-color: #ec661a;
    color:#fff;
}
label.checkOn span.off{
    background-color: transparent;
    color:#999;
}


/*--------------
    formNav
--------------*/
div.formNav{
    padding: 20px 0;
    text-align: center;
    overflow: hidden;
}
div.formNav .btn.right{
    float: right;
}

div.formNav .btn{
    margin: 0 auto;
    display: block;
    width: 40%;
    max-width:350px;
    box-sizing: border-box;
}

/*--------------
    div tabNav
--------------*/
div.tabGroup{
    color:#000;
}
div.tabGroup ul.tabNav{
    overflow: hidden;
    display: table;
    width:100%;
    border-bottom: 7px solid #ffdf00;;
}
div.tabGroup ul.tabNav > li{
    display: table-cell;
    width:33.333%;
    box-sizing: border-box;
    padding:0px 2px 0 2px;
}
div.tabGroup ul.tabNav > li:first-child{
    padding-left:0;
}
div.tabGroup ul.tabNav > li:last-child{
    padding-right:0;
}
div.tabGroup ul.tabNav > li span.label{
    display: block;
    padding: 10px 5px;
    text-align: center;
    background: #666;
    color:#fff;
    font-weight: bold;
    cursor: pointer;
}
div.tabGroup ul.tabNav > li span.label:hover{
    background: #888;
}

div.tabGroup ul.tabNav  > li.current span.label{
    background: #fff;
    color:#000;
    background-color: #ffdf00;
}
div.tabGroup ul.tabTarget{
    background: #fff;
}
div.tabGroup ul.tabTarget > li{
    display: none;
}
div.tabGroup ul.tabTarget > li:first-child{
    display: block;
}
div.tabGroup ul.tabTarget > li div.inner{
    padding:20px;
    box-sizing: border-box;
}


/*--------------
    selectedCarList
--------------*/
#selectedCarList{
    background-color: #b0c1e7;
    box-sizing: border-box;
    padding:25px;
    position: relative;
}
#selectedCarList:after{
    content:'';
    position: absolute;
    border:15px solid transparent;
    border-bottom:15px solid #b0c1e7;
    left:50%;
    top:-30px;
    margin:0 0 0 -6px;
}
#selectedCarList p{
    margin-bottom: 8px;
}
/*--------------
    modaal
--------------*/

.modaal-content-container{
    padding: 5%;
}


/*--------------
    dl list
--------------*/
dl.list{
    display: table;
    border-top:1px solid #333;
    width:100%;
}
dl.list dt,
dl.list dd{
    display: table-cell;
    border-bottom:1px solid #ddd;
    padding: 5px 2px;
}

/*--------------
    table common
--------------*/
tr.subTitle th{
    background-color: #ddd;
    padding-left:10px;
    color:#000;
}
table.line tr.subTitle th,
table.grid tr.subTitle th{
    vertical-align: middle;
    font-size:110%;
}
tr.middle th,
tr.middle td
td.middle,
th.middle{
    vertical-align: middle !important;
}
tr.error th,
tr.error td{
    color:#ef3e81;
}

/*--------------
    table grid
--------------*/
table.grid{
    border-top:1px solid #666;
    border-left:1px solid #666;
    width: 100%;
    border-collapse: collapse;
    margin:0px 0 15px 0;
    line-height: 150%;
    font-size: 80%;
}
table.grid th,
table.grid td{
    border-bottom:1px solid #666;
    border-right:1px solid #666;
    padding: 4px 2px;
    vertical-align: top;
    text-align: left;
}
table.grid tr.center td,
table.grid tr.center th{
    text-align: center;
}
table.grid th{
    background-color: rgba( 255, 255, 255, 0.1 );
}

table.grid tr.separator{
    border-top:2px solid #000;
}
table.grid td.center{
    text-align: center;
}
table.grid td.middle{
    vertical-align: middle;
}

div.hasTable {
    overflow-x: auto;
    position: relative;
    width:100%;
    box-sizing: border-box;
}

div.leftSection table.grid,
div.rightSection table.grid{
    margin:0;
}

/*--------------
    selectedCarList
--------------*/
#selectedCarList table.grid{
    margin:0;
}
#selectedCarList table.grid th{
    background-color:#272986;
    color:#fff;
    padding: 8px 0;
}
#selectedCarList table.grid td{
    background-color:#fff;
    padding: 8px 5px;
}
#selectedCarList table.grid th.check{
    white-space: nowrap;
    width:5%;
    padding-left:2px;
    padding-right:2px;
}
#selectedCarList table.grid td.check{

    text-align: center;
    line-height: 1;
    padding:8px;
}
#selectedCarList table.grid td.check input{
    margin:0;
}

/*--------------
    resultSection
--------------*/
.resultSection{
    margin:0 0 20px 0;
    padding:0;
}
.resultSection img{
    display: block;
    max-width: 100%;
}
.resultSection div.leftSection{
    width: 55%;
}
.resultSection div.rightSection{
    width: 42%;
}
.resultSection div.itemThumb{
    margin:0 0 20px 0;
}
.resultSection div.itemThumb img{
    display: block;
    width:100%;
    max-width: 500px;
    margin:0 auto;
}
.result{
    margin:0 0 30px 0;
}
.selectedCategory{
    border:1px solid #fff;
    padding: 0px;
    margin:0 0 30px 0;
    font-size:90%;
    line-height: 160%;
}
.selectedCategory h1,
.selectedCategory h2,
.selectedCategory h3{
    margin-bottom:5px;
    color:#fff;
}
.selectedCategory p:last-child{
    margin-bottom:0;
}
.selectedTitle{
    font-weight: bold;
    background-color: rgba( 255, 255, 255, 0.1 );
    padding: 6px 12px;
    font-size:110%;
    color:#f1d63a;
}
.selectedDetail{
    padding: 15px;
}
.selectedDetail table.grid{
    width:auto;
}
/*--------------
    pwd
--------------*/
div.meta{
    margin:0 0 30px 0;
}
div.pwd{
    font-size:90%;
    line-height: 1;
    background: rgba( 255, 255, 255, 0.1);
    padding: 6px 10px;
    margin:0 0 10px 0;
}
div.pwd li{
    display: inline-block;
}
div.pwd li:after{
    display: inline-block;
    margin:0 0 0 6px;
    content: '';
    line-height: 1;
    border:4px solid transparent;
    border-left: 4px solid rgba( 255, 255, 255, 0.7);
}
div.pwd li:last-child:after{
    content: none;
}


/*--------------
    table line
--------------*/
table.line{
    border-top: 1px solid #999;
    border-collapse: collapse;
    width:100%;
    margin: 0 0 10px 0;
    font-size: 90%;
    line-height: 150%;
}
table.line th,
table.line td{
    border-bottom:1px solid #999;
    padding: 4px 2px;
}
table.line th{
    text-align:left;
    vertical-align:top;
    width:30%;
}
table.line tr.center th,
table.line tr.center td,
table.line th.center,
table.line td.center{
    text-align: center;
}


table.line tr.subTitle th{
    background-color: #555;
    padding-left:10px;
    color:#fff;
}

/*--------------
    result
--------------*/
table.result{

}
table.result td{
    vertical-align: middle;
    word-break: break-word 
}
table.result td.img{
    padding:0px;
    width:10%;
}

table.result td.img img{
    display: block;
    width:100%;
    min-width:60px;
    max-width: 220px;
}
table.result td.categoryImg{
    width: 50%;
}
table.result td.categoryImg img{
    max-width: 100%
}
table.result td.price{
    text-align: center;
}
table.result td.link{
    text-align: center;
}
table.result span.tax{
    font-size: 85%;
    display: block;
    margin:0 0 0 5px;
}

span.unit{
    font-size:85%;
    font-weight: normal;
    display: inline-block;
    margin:0 0 0 8px;
}



/*--------------
    explain
--------------*/
div.explain{
    text-align: right;
    font-size:90%;
    padding: 10px 0;
}


/*--------------
    icon
--------------*/

a.newWindow{
    padding-left:32px;
    background-image:url(/assets/images/window.svg) ;
    background-size: 14px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
}
.btn.newWindow{
    background-image:url(/assets/images/window.svg) ;
    padding-left: 40px;
    background-position: 15px 50%;
}
.btn.newWindow:before{
    content: none;
    border:none;
}

/*--------------
    input
--------------*/
input.textfield{
    padding:7px 10px;
    border:none;
    color:#333;
    background: #eee;
    width: 100%;
    box-sizing: border-box;
}
input.textfield:focus{
    background-color: #f1d63a
}
input.textfield::placeholder {
    color: #999;
}
textarea.textarea{
    padding:10px;
    border:none;
    background: #efefef;
    width: 100%;
    box-sizing: border-box;
    height: 200px;
}

span.required{
    color:#ff5611;
    font-weight: bold;
    margin:0 0 0 10px;
}


/*--------------
    loading
--------------*/

div.loadingBg{
    position: absolute;
    top:0;
    width:100%;
    height:100%;
    background: rgba( 0, 0, 0, 0.5 );
    background: #fff;
    z-index: 100000
}
div.loadingInner{
    background: #fff url(/img/common/loading_bg.gif) no-repeat 50% 50% ;
    background-size: 70px;
    width:70px;
    height: 70px;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 100001;
    margin:0px 0 0 -35px;
}
div.loadingBg div.logo{
    background: #fff url(/img/common/logo_o.png) no-repeat 50% 50% ;
    background-size: 100%;
    width:170px;
    height: 30px;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 100001;
    margin: -60px 0 0 -85px;
}

/*--------------
    grid
--------------*/
ul.grid {
    overflow: hidden;
    background-size: 96% auto ;
    box-sizing: border-box;
}
ul.grid > li{
    line-height:160%;
    box-sizing: border-box;
    float: left;
}
ul.grid > li a.link{
    color:#000;
}
ul.grid > li.hasLink{
    cursor: pointer;
}
ul.grid > li.hasLink:hover{
    opacity: 0.8
}
ul.grid > li img{
    display: block;
    width:100%;
}

ul.hasLine {
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
}
ul.hasLine li{
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    margin:0;
}
ul.cols_1 > li{
    width:auto;
    float:none;
}
ul.cols_2 {
    margin:-1%;
}
ul.cols_2 > li{
    width:48%;
    margin:1%;
}
ul.cols_3{
    margin:-0.5%;
}
ul.cols_3 > li{
    width:32.333%;
    margin:0.5%;
}
ul.cols_3.hasLine > li{
    width:33.333%;
    margin:0;
}
ul.cols_4 {
    margin:0%;
}
ul.cols_4 > li{
    width:25%;
}
ul.cols_5 {
    margin:0%;
}
ul.cols_5 > li{
    width:20%;
    margin:0%;
}
ul.cols_5.hasLine > li{
    width:20%;
    margin:0;
}
ul.cols_6 {
    margin:-0.7%;
}
ul.cols_6 > li{
    width:15.26%;
    margin:0.7% ;
}

ul.grid div.thumb{
    margin:0 0 10px 0;
}

ul.box > li{
    background-color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding:20px;
}
ul.hasScroll{
    overflow-y: auto;
    height:600px;
    padding: 0px 12px 12px 12px;
}

/*--------------
    grid
--------------*/
.chkGroup{
    text-align: center;
    background-color: rgba( 255,255,255, 0.2);
    padding: 10px 5px;
    margin:0 3px;
    vertical-align: middle;
    border-radius: 2px;
}
.chkGroup label{
    display: block;
}
/*--------------
    grid
--------------*/
ul.nav li span.label{
    padding: 12px 4px;
    margin:2px 2px;
    display: block;
    text-align: center;
    font-weight: bold;
    background: #272986;
    border-radius: 3px;
    cursor: pointer;
    font-size:90%;
}
ul.nav li:hover span.label{
    background-color: #5557c6;
}
ul.nav li img.thumb{
    display: block;
    width:100%;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
}
ul.nav li:hover img.thumb{
    opacity: 0.8;
}
ul.nav li.current span.label{
    background: #ffdf00;
    color:#000;
}

ul.table {
    display: table;
    width:100%;
}
ul.table li{
    display: table-cell;
    text-align: center;
    padding:0 0px;
}



/*--------------
    accrodion
--------------*/
dl.accordion{
    line-height: 180%;
}
dl.accordion dt{

}
dl.accordion dd{
    display: none;
}

/*--------------
    resizable & draggable
--------------*/
.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #000;
    position: relative;
    min-height: 100px;
    /*background-color: rgba( 255, 223, 0, 0.9 );*/
    width:100px;
    box-sizing: content-box;
    margin:0 auto;
    top:105px;
    background: url(/assets/images/forsize.png) no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: rgba( 255, 255, 255, 0.6 );
    border: 1px solid #000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    margin:0 0 0 -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
    margin:0 0 0 -5px;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}
.draggable .sizeUnit{
    position: absolute;
    font-size:14px;
    font-weight: bold;
    color:#ff6600;
    position: absolute;
}
.draggable .sizeUnit#unitW{
    top: -30px;
    left:50%;
    margin: -0.5em 0 0 -2em ;
}
.draggable .sizeUnit#unitH{
    left: -30px;
    transform:rotate(270deg);
    top:50%;
    margin:-1em 0 0 -1.7em ;
}
.draggable .sizeUnit span.unit{
    font-size:12px;
    margin:0 0 0 3px;
}
/*============================================
    section style
============================================*/

/*--------------
    searchCat
--------------*/
#itemCategory li{
    padding: 4px;
    box-sizing: border-box;
}
#itemCategory li span.label{
    margin:0;
    border-radius: 0 0 3px 3px ;
    padding-top: 6px;
    padding-bottom: 6px;
}
/*--------------
    caliper_maker_section
--------------*/
#caliper_maker_section ul.nav li{
    width:20%;
}


/*--------------
    caliper_section
--------------*/
#caliper_search,
#caliper_piston,
#caliper_front_rear{
    margin:0 0 30px 0;
}
.cariper_type_selector{
    display: none;
}

/*--------------
    brakepad_section
--------------*/
#brakepad_section ul.nav li{
    width: 25%;
}

/*--------------
    size_section
--------------*/
#size_section{
}
#size_section #sizeResizer{
    width:300px;
    float: left;
    background-color: rgba( 255, 255, 255, 0.8 );
    min-height: 300px;
    box-sizing: border-box;
    border-radius: 3px ;
    border:1px solid #fff;
    position: relative;
}
#size_section #sizeResult{
    margin-left:315px;

}
#sizeList{
    overflow: hidden;
}


/*============================================
    media query
============================================*/

@media screen and (max-width: 1100px){

}


/*
TAB
*/
@media screen and (max-width: 768px){


    /*--------------
    grid
    --------------*/
    ul.cols_5{
        margin: -1%;
    }
    ul.cols_5 > li{
        width:31.333%
    }
    #itemCategory{
        display: block;
    }

    /*--------------
        #itemCategory
    --------------*/
    #itemCategory li{
        width: 33.3%;
        display: block;
        float: left;
        margin:0;
    }
    #itemCategory li span.label{
        padding: 5px 0;
    }
    /*--------------
    size_section
    --------------*/
    #size_section{
    }
    #size_section #sizeResizer{
        width:auto;
        float: none;
        margin:0 auto;
    }
    #size_section #sizeResult{
        margin:20px 0 0 0;

    }


    /*--------------
        carName
    --------------*/
    figure.item{
    }
    figure.item div.thumb{
        display: block;
        width:auto;
        padding: 5px;
    }
    figure.item figcaption{
        display: block;
        width:auto;
    }
    figure.item figure{
        display: block;
        width:auto;
    }
    figure.item .btn{
        display: block;
    }
    figure.item table th{
        width:40%;
    }
    figure.item figcaption{
        padding:15px;
    }
    figure.item figcaption th,
    figure.item figcaption td{
        text-align: center;
        padding:2px 2px;
    }
}

/* iphone landspcae */
@media only screen and (max-width: 736px) {

}

/*for header*/
@media only screen and (max-width: 680px) {

}

/*SP*/


@media screen and (max-width:479px) {


    /*--------------
    input
    --------------*/
    input.textfield{
        font-size:16px;
    }
    textarea.textarea{
        font-size:16px;
    }
    /*--------------
    btn
    --------------*/
    div.formNav .btn{
        width:90%;
        max-width: 90%;
    }


    /*--------------
        grid
    --------------*/
    ul.cols_4 {
        margin-right: 0;
    }
    ul.cols_4 > li{
        width:48%;
        margin: 1%;
    }
    ul.cols_3 {
        margin-right: 0;
    }
    ul.cols_3 > li{
        width: 48%;
        margin:1%;
    }
    ul.cols_6 li,
    ul.cols_5 li{
        width: 47%;
        margin:0 1.5% 3% 1.5%;
    }
    body.scroll section ul.pageNav{
        position: static !important;
        box-shadow: none !important;
        padding:0;
    }
    ul.hasScroll{
        height:auto;
        padding:20px 6px;
        white-space: nowrap;
        overflow-x: scroll;
        margin:0;
        -webkit-overflow-scrolling: touch;
    }
    ul.hasScroll li{
        display: inline-block;
        float: none;
    }
    /*--------------
        table grid
    --------------*/
    table.grid{
        font-size:85%;
    }
    table.grid th,
    table.grid td{
        padding: 4px;
    }
    table.grid .btn{
        /* padding-left:8px; */
        padding-right:8px;
        white-space: nowrap
    }

    /*--------------
        table line
    --------------*/
    table.line{
        font-size:90%;
    }

    /*--------------
        tabNav
    --------------*/
    div.tabNav {
        padding:0 12px;
    }
    div.tabNav ul li a{
        padding-right: 8px;
        padding-left: 8px;
    }

    ul.nav li span.label{
        padding: 10px 12px;
    }

    /*--------------
       resultSection
    --------------*/
    .resultSection div.leftSection,
    .resultSection div.rightSection{
        width: auto;
    }
    /*--------------
        ul.table
    --------------*/
    ul.table{
        display: block;
        overflow: hidden;
    }
    ul.table li{
        width:50%;
        float: left;
    }
    /*--------------
        figure.item
    --------------*/
    figure.item{
        padding:0 ;
    }

    /*--------------
        tabNav
    --------------*/
    dl.tabNav{
        padding: 0 15px;
    }
    ul.calendar#data, #myChart{
        height: 240px;
    }
    ul.calendar#data{
        height: 300px
    }
    dl.tabNav dt{
        font-size:80%;
    }
    dl.tabNav dt li{
        padding-left:1px;
        padding-right:1px;
    }
    dl.tabNav dd li{
        margin:0 1px;
    }

    /*--------------
        selectCar
    --------------*/
    .selectCar .selectBox{
        display: block;
        width:auto;
        padding:0;
    }
    .selectCar .selectBox::after{
        border:10px solid transparent;
        border-top:12px solid #000;
        left: 50%;
        top:auto;
        right:auto;
        bottom: 5px;
    }
    .selectBox select{
        margin-bottom: 40px;
    }
    .selectCar .selectBox:last-child select{
        margin-bottom:0;
    }
    .selectBox select {
        background-image: url(/assets/images/select.png) ;
    }
    /*--------------
        #itemCategory
    --------------*/
    #itemCategory li{
        width: 50%;
        display: block;
        float: left;
        margin:0;
    }
    #itemCategory li span.label{
        padding: 5px 0;
    }
    /*--------------
        tabGroup
    --------------*/
    div.tabGroup ul.tabTarget > li div.inner{
        padding:14px;
    }
    /*--------------
        carName
    --------------*/
    .selectBox select{
        padding:0px;
    }
    .selectBox select option{

    }
    .selectBox select option.default{
        display: block;
    }
    /*--------------
        btnList
    --------------*/
    ul.btnList{
        display: table;
        width:100%;
    }
    ul.btnList li{
        display: table-cell;
        width:50%;
    }
    ul.btnList li span.label{
        min-width: 0
    }
    /*--------------
        searchWord
    --------------*/
    #searchWord{
        background-color: transparent;
        color:#000;
        padding:0;
    }
    #searchWord div.text{
        display: block;
        width:auto;
        margin:0 0 10px 0;
    }
    #searchWord input{
        float: none;
        width:100%;
        box-sizing: border-box;
        border:1px solid #ddd;
    }

    .chkGroup{
        margin:0;
        padding: 10px 2px;
    }

    /*--------------
        brakepad_section
    --------------*/
    #brakepad_section ul.nav{
        display: block;
    }
    #brakepad_section ul.nav li{
        display: block;
        width:50%;
    }
    /*--------------
        caliper_maker
    --------------*/
    #caliper_maker_section ul.nav li{
        width:33.3%;
        display: block;
    }
    /*--------------
        caliper_maker
    --------------*/
    div.hasTable table{
        white-space: nowrap;
    }
    /*--------------
    selectedCarList
    --------------*/
    #selectedCarList{
        padding:12px;
    }
    #selectedCarList table.grid th.check span{
        display: none;
    }

    /*--------------
    pwd
    --------------*/
    div.pwd{
        font-size:80%;
        padding:0;
        margin-bottom:12px;
    }
    div.pwd li{
        display: inline-block;
    }
    div.pwd li:after{
        display: inline-block;
        margin:0 0 0 6px;
        content: '';
        line-height: 1;
        border:4px solid transparent;
        border-left: 4px solid rgba( 255, 255, 255, 0.5);
    }
    /*--------------
    button
    --------------*/
    .btn{
        padding: 10px 10px;
    }
}


/*
    SP
    */
    @media screen and (max-width: 320px){
        .btn:before{
            border:3px solid transparent;
            border-left: 3px solid #fff;
        }
    }