@charset "UTF-8";
/*

project/public/vcsCss/stockDetail/item-detail-common.css
のチャンネル9版。ほとんど変わらないので差分確認してください。

ここはcarStockDetail2.js（ブレードから動的に読み込ませるもの。project/resources/views/virtual-car-shop/dynamic-js/car-stock-detail2test.blade.php。）で読み込ませている幅と一緒である必要あり。
./public/vcsJs/jsVariables.jsで固定値で設定してある。
また、project/resources/views/virtual-car-shop/dynamic-js/car-stock-detail2.blade.php
でも同じ値を固定値で使うので、変更がある場合は使用してください。

*/

.carStockDetail .content .sd6 .mainPhoto .commentDiv {
    top: unset;
    bottom: 0;
}

.sns_button{
    width: 216px !important;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 auto !important;
    float: none;
}

.shop-photo{
    border: none !important;
}

.shop-photo img{
    max-height: unset !important;
    height: auto !important;
}

@media(max-width:640px){

    html{
        width: 100% !important;
        box-sizing: border-box;
    }

    body{
        width: 100% !important;
        box-sizing: border-box;
    }

    body * {
        box-sizing: border-box;
    }

    .wrap{
        box-sizing: border-box;
    }
    body > div.wrap{
        width: 100% !important;
    }

    body > div.wrap > div{
        width: 100% !important;
    }

    body > div.wrap > div > div{
        width: 100% !important;
    }

    body > div.wrap > div > div > div{
        width: 100% !important;
    }

    body > div.wrap > div > div > div > div{
        width: 100% !important;
    }

    body > div.wrap > div > div > div > div > div{
        width: 100% !important;
    }

    body > div.wrap > div > div > div > div > div > div{
        width: 100% !important;
    }

    body > div.wrap > div > div > div > div > div > div > div{
        width: 100% !important;
    }

    .hcw_vcsContentsMenu, .hcw_vcsContentsMenu ul, .hcw_vcsContentsMenu ul li:nth-child(even){
        width: 100%;
    }

    .hcw_vcsContentsMenu{
        margin-bottom: 15px;
    }

    .hcw_vcsContentsMenu ul li:nth-child(even){
        width: 100%;
        border-left: 1px solid #666666;
        border-bottom: 1px solid #aad865;
    }

    .hcw_vcsContentsMenu ul li:nth-child(odd){
        display: none;
    }

    .hcw_vcsContentsMenu ul li a{
        width: 100% !important;
    }
    .sns_button > li.sns_facebook > iframe{
        width: 112px !important;
        height: 26px !important;
    }

    .sns_button > li.sns_twitter > iframe{
        width: 94px !important;
        height: 26px !important;
    }

    .mainPhoto, .commentDiv, .carStockDetail .content .sd6 .mainPhoto #flickscroll{
        width: 100% !important;
    }

    #commentArea{
        width: 100% !important;
    }

    #commentArea a{
        background-position: right 15px center !important;
    }

    .carStockDetail .content .sd6 .mainPhoto #flickscroll li{
        width: auto;
    }
    .carStockDetail .content .mainPhoto img{
        width: 100%;
    }
    .carStockDetail .content .thumbnailArea{
        margin: 15px auto 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .carStockDetail .content .spec{
        width: 100%;
        float: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    .car-spec{
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .car-spec, .car-spec .car, .car-spec .car2{
        width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .hc_snsButtons{
        text-align: center;
    }

    .carStockDetail .content .shop-info{
        width: 100% !important;
        box-sizing: border-box;
    }

    .carStockDetail .content .shop-info .shop-photo{
        width: 100%;
    }

    .carStockDetail .content .shop-detail{
        width: 100%;
    }

    .carStockDetail .content .shop-detail .cap{
        min-width: 95px;
        box-sizing: border-box;
        border: none;
    }
    .carStockDetail .content .shop-detail .contents{
        width: auto;
        box-sizing: border-box;
        margin-left: 0;
        border: none;
    }

    .carStockDetail .content .shop-detail{
        float: none;
    }

    .carStockDetail .content .shop-detail > div{

        height: auto !important;

    }

    .carStockDetail .content .carDetailWrapper{
        box-sizing: border-box;
    }

    .carStockDetail .content .shop-info .shop-photo {
        width: 100%;
        box-sizing: border-box;
    }

    .wrap{
        box-sizing: border-box;
        overflow: hidden;
    }

    .hcw_contentsMenu,.line-banner-header-sp{
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .hcw_vcsfooter1 .fot1ts, .hcw_vcsfooter1 .fot1cc {
        background-position: 5px 0px;
    }

    .carStockDetail .hcw_vcslogo h1 a{
        margin-left: 5px;
    }

    .carStockDetail .content .comment-area{
        box-sizing: border-box;
    }

    .carStockDetail .hc_topSection {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .line-banner-header-sp img{
        width: 100% !important;
    }

    .hcw_breadcrumbs{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hcw_breadcrumbs a {
        display: inline-block;
    }

    .carStockDetail .content .sobi-icon{
        width: 100%;
    }
    .carStockDetail .content .sobi-icon ul{
        width: 100%;
    }
    /*.carStockDetail .content .sobi-icon li {*/
    /*    padding-bottom: 5px;*/
    /*    width: 11%;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*}*/
    .carStockDetail .hcw_vcslogo h1 a{
        background-position: 0px 10px;
    }

    .carStockDetail .hcw_header .hr1{
        padding-left: 3px;
    }

    .thumbnailArea {
        width: 100% !important;
    }

    /*.thumbnail{*/
    /*    width: 100% !important;*/
    /*}*/

    /*.carStockDetail .content .thumsUl{*/
    /*    width: 100%;*/
    /*}*/

    .carStockDetail .content .thumsUl{
        height: auto;
    }
    .carStockDetail .content .thumsUl > li{
        background-size: cover;
        background-position: center center;
        border-left: 3px solid #FFF;
        border-right: 3px solid #FFF;
    }
    .carStockDetail .content .thumsUl > li::before{
        content: "";
        display: block;
        padding-top: 66.6%;
    }
    .carStockDetail .content .thumsUl li{
        width: auto;
        height: auto;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }
    .carStockDetail .content .thumsUl li a{
        width: auto;
        height: auto;
    }
    .carStockDetail .content .thumsUl li a img{
        display: none;
    }
    .carStockDetail .content #backBtn{
        height: 100%;
    }
    .carStockDetail .content #backBtn:hover{
        height: 100%;
    }
    .carStockDetail .content #nextBtn{
        height: 100%
    }
    .carStockDetail .content #nextBtn:hover{
        height: 100%
    }
    .carStockDetail .content .thumbnailArea{
        height: auto;
    }
    .carStockDetail .content .thumbnailArea::before{
        content: "";
        display: block;
        padding-top: 23.4%;
    }
    .carStockDetail .content .thumbnail{
        height: auto;
    }

    .carStockDetail .content .free-item1 > div{
        width: 100% !important;
    }

    .carStockDetail .content .free-item2 > div{
        width: 100% !important;
    }

    .hcw_footer3{
        clear: both;
    }

    .shop-photo img{
        max-width: unset !important;
        max-height: unset !important;
        width: 100% !important;
        height: auto !important;
    }

    .carStockDetail .content .shop-detail{
        max-width: unset;
    }

    .carStockDetail .content .spec{
        max-width: unset;
    }

    .carStockDetail .content .sd6 .mainPhoto .commentDiv {
        top: unset;
        bottom: 0;
    }

    .carStockDetail .content .sd6 .mainPhoto #flickscroll li{height:auto;}
    .carStockDetail .content .sd6 .mainPhoto #flickscroll{height:auto;}
    .carStockDetail .content .sd6 .mainPhoto{height:auto;}

    .shop-detail{
        overflow: hidden;
    }

    .shop-detail > div {
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        border-top: 1px dotted #ccc !important;
    }

    .shop-detail > div:last-child {
        border-bottom: 1px dotted #ccc !important;
    }

    .shop-detail > div  > div {
        display: flex !important;
        float:none !important;
        text-align: left !important;
        padding: 10px !important;
        height: auto !important;
        word-break: break-all;
    }
    .carStockDetail .content .shop-detail .contents{
        padding-left: 0 !important;
    }

}