.img-pc{ display: block;}
.img-sp{ display: none;}

.single-item img{ width: 100%;}
.social-container .btn-more{ width: 200px;}
.btn-more span{ font-size: 20px; line-height: 1.5; padding-right: 4px;}

.head-title{font-size:30px; font-weight: 600; text-align: center; color: #3b1705; margin:0 0 20px;}
.head-title img{ max-width: 100%;}
.head-title span{display:block; font-size: 18px; color:#666; font-weight: 200; padding:10px 0;}

.keeper-title{font-size:25px; font-weight: 600; text-align: center; color: #5c2f0d; margin:0 0 10px;}
.keeper-title img{ max-width: 500px; margin-bottom: 8px;}

/* slide */
.slick-initialized .slick-slide{ position: relative;}
.text-top-slide{ position: absolute; bottom: 40px; left: 10%; width: 80%; text-align: center;}
.text-top-slide .fun{ background: #45cec1; color: #fff; padding: 2px 4px; border-radius: 2px;}
.text-top-slide h2{ font-size: 48px; color: #fff; font-weight: bold; text-shadow: 2px 1px 7px #000; line-height: 1.3;}
.text-top-slide span{ color: #342929; font-weight: bold; font-size: 18px; display: block; margin: 4px auto; padding-bottom: 6px; background: url(../images/line-yellow.png) repeat-x; background-position: bottom; width: fit-content; }
    /* text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: #fdf860; } */
.text-top-slide span strong{ font-size: 32px;}
.text-top-slide small{ background: #706666; color: #fff; font-size: 10px; padding: 2px 4px; border-radius: 2px; margin-top: 8px; display: inline-block;}
.text-top-slide2 {
    position: absolute;
    bottom: 120px;
    text-align: center;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
}
.text-top-slide2 h3 {
    background: #fff;
    color: #632c00;
    font-weight: bold;
    font-size: 26px;
    padding: 20px 40px;
    border: 4px solid #6bd8cd;
    box-shadow: 2px 1px 7px #000;
}

/* flyer */
.wrapper-flyer {
    background: #45cec1;
}
.wrapper-flyer >div{
    max-width: 980px;
    margin:0 auto;
    padding: 20px 10px;
}

.wrapper-flyer img{max-width:100%;}
.wrapper-flyer >div >h2{text-align:center;}
.flyer_disp {
    display: flex
}
.pop_up_bt_disp {
    position: relative;
}
.pop_up_bt {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin: 0 0 0 -80px;
}
.pop_up_bt>a{
    display: block;

}



/* about */
.wrapper-about{background: #45cec1;}
.wrapper-about >div{max-width: 980px; margin:0 auto; padding: 20px 10px;}
.wrapper-about img{max-width:100%;}
.wrapper-about >div >h2{text-align:center;}
.wrapper-about >div >h2 span{display: block; color: #FFF; font-size: 18px; color:#FFF; padding: 0 0 10px;}
.wrapper-about >div >p{color:#FFF; font-size: 18px; text-align: center; line-height: 18pt; padding: 40px 20px;}
.wrapper-about .btn-more { width: 200px; }

.about-chart{font-size: 0; text-align: center; }
.about-chart >div{display: inline-block; width: 25%;}
.about-chart >div div{background:#FFF; display:inline-block; border-radius: 50%; width: 220px; height: 220px; position: relative; z-index: 1; line-height: 16pt; text-align: center; font-size: 18px; color:#3b1705;}
.about-chart >div div strong{display: block; color: #45cec1; font-size: 22px; font-weight: 600; padding: 0 0 10px;}
.about-chart >div figure{display:inline-block; margin:-25% 0 0; width: 220px; position: relative;}
.about-chart span{display: inline-block; font-size: 100px; color:#FFF; position: relative; top: -40px;}

.about-equal{text-align: center; color:#FFF; padding: 30px 0;}
.about-equal p{font-size: 25px; line-height: 18pt; padding: 30px 0;}
.about-equal strong{font-size: 50px; font-weight: 600;}

.about-car-price{font-size: 0; text-align: center;}
.about-car-price a { color: #fff; text-decoration: none; }
.about-car-price >div{display: inline-block; width:31.33%; margin: 0 1% 20px; font-size: 20px; font-weight: 600; color:#FFF; text-align: center;}
.about-car-price >div span{font-size: 12px; vertical-align:bottom; display: inline-block; ; font-weight: 300; writing-mode: vertical-lr; text-orientation: upright; margin-bottom: 8px;}
.about-car-price >div small{writing-mode: vertical-lr; text-orientation: upright; display: inline-block; font-size: 11px; position: relative; top:10px; padding:0 5px;}
.about-car-price >div strong{font-size:35px;}
/* .about-car-price >div >div{display:inline; border-bottom: 3px solid #FFEE33; margin: 0 0 10px;} */
.about-car-price .text-price { display: block; padding:0 0 5px; background: url(../images/line-yellow2.png) repeat-x; background-position: bottom; margin-top: 4px; }
.about-car-price a:hover .text-price { opacity: 0.9;}




.btn-more:hover{background: #44B2A8;}

/* benefit */
.bg-benefit{ background: #fdfde7;}
.benefit-container{font-size: 0; padding: 30px 0;}
.benefit-container >div{width: 31.33%; margin:0 1% 20px; position: relative; vertical-align: top; font-size:18px; text-align: center; display: inline-block;}
.benefit-container >div span{display:block; line-height: 14pt; position: absolute; right:0; top:20px; width: 80px; height: 80px; font-size: 30px; font-weight: 600; border-radius: 50%; background: #ff8400; color:#FFF;}
.benefit-container >div span strong{display: block; padding:20px 0 0; font-size: 14px; position: relative; top: -5px; font-weight: normal;}
.benefit-container >div img{width: 100%;}
.benefit-container >div >strong{display: block; padding:20px 0; font-size: 25px; color:#ff8400; font-weight: 600;}

.btn-orange{background: #ff8400; color:#FFF; width: 220px;}
.btn-orange span{color: #FFF ;}
.btn-orange:hover{background: #ff6701;}

/* shijou */
#shijou .before {
    background-image: url(../images/shijou-back.gif);
    background-repeat: repeat;
    padding: 4vh 16vw 4vh 24vw;
    position: relative;
}
#shijou .before::after {
    background-image: url(../images/shijou-back-sankaku.png);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    width: 91px;
    height: 32px;
    top: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#shijou .before p {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8;
}
#shijou .before p span {
    background: #fff;
}
#shijou .before h2 {
    padding: 2vh 0 0;
}
#shijou .before #human {
display: inline-block;
position: absolute;
bottom: 0;
right: 20vw;
}
#shijou .after {
    background: #e5fdf9;
    text-align: center;
    padding: 4vh 2vw;
    display: inline-block;
    width: 100%;
    background-image: url(../images/shijou-back-left.png),
    url(../images/shijou-back-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 198px 106px;
    background-position: left 0% top 0%, right 0% top 0%;
    content: '';
}
#shijou .after h3 {
    color: #612c02;
    font-size: 20px;
    font-weight: bold;
}
#shijou .after h3 p::before,#shijou .after h3 p::after {
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    width: 22px;
    height: 29px;
    vertical-align: middle;
    padding: 0 18px;
}
#shijou .after h3 p::before {
    background-image: url(../images/fukidashi-left.png);
}
#shijou .after h3 p::after {
    background-image: url(../images/fukidashi-right.png);
}
#shijou .after h2 {
    padding: 1vh 2vw;
}
#shijou .after .flat {
    display: inline-block;
}
#shijou .after .flat img:nth-child(2){
    padding: 0 20px 0 10px;
}

/* feedback */
.wrapper-feedback{background: #d8d8d8;}
.wrapper-feedback >div{max-width: 980px; margin:0 auto; padding: 20px 10px;}

.feedback-list{overflow: hidden;}
.feedback-list a{display:block; float: right; width: 32%; position: relative; margin: 0 0 15px;}
.feedback-list a div{background:rgba(0, 0, 0, 0); transition: all 0.2s; height:0%; width: 100%; position: absolute; bottom:0; left:0;}
.feedback-list a img{width: 100%}
.feedback-list a:nth-of-type(1){width: 65.6%; float: left;}
.feedback-list a:hover div{height: 100%; background: rgba(0, 0, 0, 0.8);}
.feedback-list a span{display: block; position: absolute; color: #FFF; bottom: 0; width: 100%; padding:10px; box-sizing: border-box;}
.feedback-list a span small{display: block; text-align: right;}

/* news topic */
.wrapper-news{max-width: 980px; margin: 30px auto; padding: 20px 0;}
.wrapper-news >div a{display:block; font-size: 0; border-bottom: 1px solid #CCC; padding:10px 0;}
.wrapper-news >div a figure{width:10%;}
.wrapper-news >div a figure img{width: 100%;}
.wrapper-news >div a figure,.wrapper-news>div a span{display: inline-block;}
.wrapper-news >div a span{width: 88%; font-size: 16px; vertical-align: top; padding: 0 1%; color:#000;}
.wrapper-news >div a span small {background: #45cec1; display: inline-block; padding:3px 5px; color:#FFF;}
.wrapper-news >div a strong{display:block; font-weight: 600; padding: 15px 0;}
.wrapper-news >div a:hover strong{color:#45cec1;}

.btn-blue{background:#45cec1; color:#FFF; width: 180px;}
.btn-blue span{color: #FFF ;}
.btn-blue:hover{background: #44B2A8;}

/* vdo */
.vdo-wrapper{background:url(../images/vdo-pic.jpg?20181011); background-size: cover;padding: 100px 0;}
.vdo-wrapper .youtube-vdo { width: 100%; margin: auto; text-align: center; }
.vdo-wrapper .youtube-vdo iframe{margin:10px;}
.vdo-wrapper .youtube-vdo a{width:100%;max-width: 560px;display: inline-block;}
.vdo-wrapper .youtube-vdo a img{width:100%}
section.modal { display: none; position: fixed; top: 12%; bottom: 24px; left: 10%; right: 10%; z-index: 998;}
section.modal .pop-up{ width: 100%; margin: auto; position: relative; }
.pop-up iframe{width: 100%;}
section.modal .closeBtn { position: absolute; right: -20px; top: -20px; cursor: pointer; background:#45cec1; 
width: 40px; border-radius: 50%; height: 40px; text-align: center; color: #fff; line-height:27pt;}
section.modal.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; min-height: 100%; 
background: rgba(0, 0, 0, 0.7); z-index: 997; cursor: pointer; }

/* social */
.wrapper-social{background: #d7f1ee; padding:20px 0; font-size: 0;}
.social-container{max-width: 980px; margin:0 auto; padding: 20px 10px;}


.blog-container {width: 48%; margin: 0 1%;; display: inline-block;}
.blog-container >div{height: 300px; overflow-y: scroll;}
.blog-container >div a{display: block; font-size: 12px; background: #FFF; padding:15px 10px;}
/* .blog-container >div a:nth-of-type(2n){background:#f5f5f4;} */
.blog-container >div a small,.blog-container >div a span{display: inline-block;}
.blog-container >div a small{color: #45cec1; padding: 0 10px 0 0;}
.blog-container >div a span{color: #666;}
.blog-container >div a:hover span{color: #45cec1;}

.fb-container{width: 48%; margin:0 1%; display: inline-block; vertical-align: top;}
.fb-container >div{background: #FFF; text-align: center;}

.social-mobile{text-align: center; font-size: 14px; display: none;}
.social-mobile a{display: inline-block; text-decoration:none; margin: 0 5%;}
.social-mobile a span{display:block; color:#000; font-size: 18px; padding: 10px 0;}
.social-mobile a span strong{display: block; color: #45cec1; padding:15px 0;}

/* contact */
.contactus-wrapper{padding: 40px 0; font-size: 0;}
.contactus{width: 32%; margin: 0 4% 0 1%; display: inline-block;}
.contactus figure img{width:100px;}
.contactus >div{border-bottom:1px solid #CCC; padding:15px 0; font-size: 16px; line-height: 18pt;}
.contactus >div strong{font-weight: 600;}
.contactus >div span{font-size: 22px; font-weight:600;}

.btn-contact-blue{background: #4fbaeb; margin: 10px 0 0; color:#FFF; border-radius: 10px; padding: 5px 20px; display: inline-block; text-decoration: none; border-bottom: 3px solid #c7e8f6;}
.btn-contact-gray{background: #ededed; margin: 10px 0 0; color:#0c8bc6; border-radius: 10px; padding: 5px 20px; display: inline-block; text-decoration: none; box-shadow:2px 2px 1px 0px #c8c8c8;}
.btn-contact-blue:hover{background:#47a1cb;}
.btn-contact-gray:hover{background: #cecece;}
.map-container{display: inline-block; width: 63%; vertical-align: top;}
.map-container iframe{width: 100%; height: 490px;}

/* @media */
@media(min-width:2000px){
    #shijou .before {
        padding: 4vh 11vw 4vh 30vw;
    }
    #shijou .before #human {
        right: 30vw;
    }
}
@media(max-width:2000px){
    #shijou .before #human {
        right: 32vw;
    }
}
@media(max-width:1800px){
    #shijou .before #human {
        right: 26vw;
    }
}
@media(max-width:1600px){
    #shijou .before #human {
        right: 20vw;
    }
}
@media(max-width:1400px){
    #shijou .before #human {
        right: 10vw;
    }
}
@media(max-width:1200px){
    #shijou .before #human {
        right: 8vw;
    }
    #shijou .before {
        padding: 4vh 14vw 4vh 12vw;
    }
}
@media(max-width:1000px){
    .text-top-slide2 {
        bottom: 60px;
        width: 80%;
    }
    #shijou .before {
        padding: 4vh 6vw 4vh;
    }
    #shijou .before h2 img {
        width: 66vw;
    }
}
@media(max-width:780px){
.img-pc{ display: none;}
.img-sp{ display: block;}

.text-top-slide2 {
    bottom: 40px;
    width: 80%
}
.text-top-slide2 h3 {
    font-size: 18px;
}

.about-chart{max-width: 460px; margin: 0 auto; padding: 0 20px 0 0;}
.about-chart >div{display: inline-block; width: 100%;}
.about-chart >div div{float:right; width: 210px; height: 210px;}
.about-chart >div figure{margin: 0; width: 210px; float:right; margin:0 -20px 0 0;}
.about-chart span{font-size: 80px; top:0; margin:0 0 0 35px;}

.about-car-price >div{width: 100%; margin:0 0 50px;}

#shijou .before {
    padding: 4vh 16vw 4vh 20vw;
}
#shijou .before h2 img {
    width: auto;
}
#shijou .before #human {
    right: 22vw;
}
#shijou .after {
    padding: 6vh 2vw 4vh;
}
#shijou .after h3 {
    font-size: 26px;
}
#shijou .after h2 img {
    width: 80vw;
}
#shijou .after .flat img:nth-child(2) {
    padding: 14px 10px;
    width: 60vw;
}
#shijou .after .flat img:nth-child(3){
    padding: 20px 0 0 0;
}

.feedback-list a{float:none; width: 100%; overflow: hidden; background: #FFF;}
.feedback-list a:nth-of-type(1){width: 100%;}
.feedback-list a figure{display: inline-block; float: left; width: 30%;}
.feedback-list a span{display: inline-block; float: right; color: #000; width: 70% !important; font-size: 20px; position: relative; width: auto;}
.feedback-list a span small{color: #666; font-size: 16px; padding:10px 0 0;}
.feedback-list a div{display: none;}
.social-mobile{display: block;}

.wrapper-news{margin:30px  20px;}
.wrapper-news >div a figure{display: none;}
.wrapper-news >div a span{ width: 100%;}

.social-container{display: none;}
.contactus-wrapper{display:none;}


.app_sp{
    background-image: url(/index/images/app_bck.jpg);
    background-repeat: no-repeat;
    background-size: 100%;


}
.app_title{
    position: relative;
    top: -5px;
}
.app_link {
    display: flex;
    background: #FFF;
    margin: 0 5px 0px;
    position: relative;
    top: -4px;
    justify-content: space-evenly;
    padding: 10px 0;
    align-items: baseline;
}
.app_link a{
    width: 45%;
    border-bottom: none !important;
    max-width: 200px;
}
.app_link a img{
    width:100%;
}



}
@media(max-width:768px){
    .text-top-slide{ width: 90%; left: 5%;}
    .text-top-slide .fun{ font-size: 12px; padding: 0 4px;}
    .text-top-slide h2{ font-size:30px;}
    .text-top-slide span{ margin: 10px auto;  text-shadow: 2px 2px 2px #fff;}
    .text-top-slide span strong{ font-size: 24px;}

    .vdo-wrapper .youtube-vdo iframe { width: 80%; }
    .about-car-price .text-price { width: 300px; margin: auto;}
    .vdo-wrapper .youtube-vdo a{width:80%;max-width: 80%;}

    
}
.pc {display: block;}
.sp {display: none;}

@media(max-width:480px){
.sp {display: block;}
.pc {display: none;}

.text-top-slide2 {
    bottom: 10px;
    width: 70%;
}
.text-top-slide2 h3 {
    font-size: 10px;
    padding: 10px 20px;
}

.wrapper-flyer img{max-width:100%;}
.wrapper-flyer >div >h2{text-align:center;}
.flyer_disp {
    display: block;
 
}
.pop_up_bt_disp {
    position: relative;
    margin: -50px 0 0;
}
.pop_up_bt {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin: 0 0 0 -43px;
}
.pop_up_bt img {
	width: 85px
}


.text-top-slide{ bottom: 10px; width: 100%; left: 0;}
.text-top-slide h2{ font-size: 20px;}
.text-top-slide span{ font-size: 14px; margin: 0 auto;}

.about-chart{max-width: 274px; margin: 0 auto; padding:0;}
.about-chart >div{display: inline-block; width: 100%;}
.about-chart >div div{float:right; width: 145px; height: 145px; font-size: 12px;}
.about-chart >div div img{width: 70px;}
.about-chart >div div{font-size: 14px;}
.about-chart >div div strong{font-size: 14px; padding: 0;}
.about-chart span{font-size: 50px;}
.about-chart >div figure{margin: 0; width:145px; margin:0 -20px 0 0;}

.benefit-container >div{width:100%; margin: 0 0 20px;}
.benefit-container >div img{width: 70%;}
.benefit-container >div span{right: 30px;}

#shijou .before {
    padding: 4vh 10vw 4vh;
}
#shijou .before h2 img {
    width: 50vw;
}
#shijou .before #human {
    right: 2vw;
}
#shijou .before #human img {
    width: 30vw;
}
#shijou .after {
    padding: 10vh 2vw 3vh;
    background-size: 138px auto;
}
#shijou .after h3 {
    font-size: 100%;
}
#shijou .after h2 img {
    width: 90vw;
}
#shijou .after .flat img:nth-child(2) {
    width: 90vw;
}
#shijou .after .flat img:last-child{
    width: 60vw;
}

.social-mobile a{margin: 0 3%;}
.social-mobile a img{width: 80px;}
.social-mobile a span strong{padding: 5px 0 10px;}
}

@media(max-width:420px){
.text-top-slide h2{ font-size: 14px;}
.text-top-slide span{ font-size: 10px; margin: 0 auto;}
.text-top-slide span strong{ font-size: 14px;}
.text-top-slide .fun{ padding: 0 4px;}
}
.keeper-title{font-size:20px; font-weight: 600; text-align: center; color: #5c2f0d; margin:0 0 10px;}
.keeper-title img{ max-width: 100%; margin-bottom: 8px;}