@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500,700,800,900&display=swap&subset=japanese');


/* fonts */
@font-face {
    font-family: 'Keifont';
    src: url('../fonts/Keifont.eot');
    src: url('../fonts/Keifont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Keifont.woff2') format('woff2'),
        url('../fonts/Keifont.woff') format('woff'),
        url('../fonts/Keifont.ttf') format('truetype'),
        url('../fonts/Keifont.svg#Keifont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Jiyucho';
    src: url('../fonts/Jiyucho.eot');
    src: url('../fonts/Jiyucho.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Jiyucho.woff2') format('woff2'),
        url('../fonts/Jiyucho.woff') format('woff'),
        url('../fonts/Jiyucho.ttf') format('truetype'),
        url('../fonts/Jiyucho.svg#Jiyucho') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Togalite-black';
    src: url('../fonts/Togalite-black.eot');
    src: url('../fonts/Togalite-black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Togalite-black.woff2') format('woff2'),
        url('../fonts/Togalite-black.woff') format('woff'),
        url('../fonts/Togalite-black.ttf') format('truetype'),
        url('../fonts/Togalite-black.svg#Togalite-black') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Memoir-Square';
    src: url('../fonts/Memoir-Square.eot');
    src: url('../fonts/Memoir-Square.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Memoir-Square.woff2') format('woff2'),
        url('../fonts/Memoir-Square.woff') format('woff'),
        url('../fonts/Memoir-Square.ttf') format('truetype'),
        url('../fonts/Memoir-Square.svg#Memoir-Square') format('svg');
    font-weight: normal;
    font-style: normal;
}





*{ box-sizing: border-box;}
img { vertical-align: middle; }
.img-fluid { max-width: 100%; height: auto; }
.img-fluid { max-width: 100%; height: auto; }

.wrapper { max-width: 980px; margin: 0 auto; font-family: 'M PLUS 1p', sans-serif; font-weight: 500; color: #3c3c3c; }

/* top banner */
.banner-top { margin: 1.5rem auto 0; }
.banner-top img { width: 100%;}
.banner-top .factory { background: #044ab1; color: #fff; display: block; text-align: center; padding: 10px; font-size: 20px; }
.banner-top .private { display: inline-block; vertical-align: middle; padding: 6px 28px; color: #3c3c3c; background: #fff; position: relative; font-size: 22px; }
.banner-top .private::before { content:''; position: absolute; top: 0; right: 0; 
    width:0; 
    height:0; 
    border-right:7px solid #044ab1;
    border-top:7px solid #044ab1;
    border-left:7px solid transparent;
    border-bottom:7px solid transparent; }
.banner-top .private::after { content:''; position: absolute; top: 0; right: 0; 
    width:0; 
    height:0; 
    border-right:7px solid transparent;
    border-top:7px solid transparent;
    border-left:7px solid #3c3c3c; 
    border-bottom:7px solid #3c3c3c; }
.banner-top .private2 { display: inline-block; vertical-align: middle; }


/* support */
.support { background: #ffe749; padding: 2rem 1.5rem; text-align: center; }
.support .title-support { background: #ff9c00; margin-top: 12px; padding: 8px; display: inline-block; font-family: 'Keifont'; font-size: 40px; color: #fff; 
    text-shadow: 
    #000 0px 4px 0px, 
    #000 1.75517px 0.958851px 0px, 
    #000 1.0806px 1.68294px 0px, 
    #000 0.141474px 1.99499px 0px, 
    #000 -0.832294px 1.81859px 0px, 
    #000 -1.60229px 1.19694px 0px, 
    #000 -1.97998px 0.28224px 0px, 
    #000 -1.87291px -0.701566px 0px, 
    #000 -1.30729px -1.5136px 0px, 
    #000 -0.421592px -1.95506px 0px, 
    #000 0.567324px -1.91785px 0px, 
    #000 1.41734px -1.41108px 0px, 
    #000 1.92034px -0.558831px 0px; }
.support .title-support small{ display: inline-block; font-size: 32px;}
.support .content-support { display: block; background: #fff; border-radius: 5rem; padding: 0.5rem 2rem; margin-top: 4rem;}
.support .content-support .title-ribbon-red { display: block; text-align: center; margin-top: -2rem;}
.support .benefit { display: flex; flex-wrap: wrap; width: 100%;}
.support .benefit .item-benefit { display: block; width: 25%; text-align: center; margin: 2rem auto; padding: 1rem;}
.support .benefit .item-benefit img { box-shadow: 0px 8px 18px 1px rgba(0, 0, 0, 0.4); border-radius: 0.9rem;}
.support .remark { display: block; font-size: 12px; font-weight: 600; text-align: center;}


/* point */
.title-point { background: url(../images/stripe_blue.png); padding: 1rem; display: block; text-align: center; }
.point { display: inline-block; border-bottom: 4px solid #044ab1; padding: 4px 0; color: #fff; text-shadow: 0; color: #fff; text-shadow: none; font-family: 'Togalite-black'; font-size: 18px; }
.point strong { font-size: 32px; }
.title-point p { display: block; line-height: 1.5; margin: 18px auto 0; font-family: 'Keifont'; font-size: 40px; color: #fff949;
    text-shadow: 
    #000 0px 4px 0px, 
    #000 1.75517px 0.958851px 0px, 
    #000 1.0806px 1.68294px 0px, 
    #000 0.141474px 1.99499px 0px, 
    #000 -0.832294px 1.81859px 0px, 
    #000 -1.60229px 1.19694px 0px, 
    #000 -1.97998px 0.28224px 0px, 
    #000 -1.87291px -0.701566px 0px, 
    #000 -1.30729px -1.5136px 0px, 
    #000 -0.421592px -1.95506px 0px, 
    #000 0.567324px -1.91785px 0px, 
    #000 1.41734px -1.41108px 0px, 
    #000 1.92034px -0.558831px 0px; }
.title-point p small { font-size: 32px;}
.content-point { background: #fff; padding: 2rem 0 2.5rem; position: relative; }

/* point 1 */
.bg-dot-orange { background: url(../images/bg-dot-orange.jpg); padding: 6px;}
.bg-dot-orange .car-pros { padding: 2rem 2rem 0 2rem; background: #fff; position: relative;}
.bg-dot-orange .car-pros::before { content: ''; background: url(../images/bg-color2.jpg); width: 100%; height: 43px; display: block; position: absolute; bottom: 0; left: 0; }

.car-pros { display: flex; flex-wrap: wrap; width: 100%;}
.car-pros .img-pros { display: block; width: 35%; position: relative; z-index: 1;}
.car-pros .text-pros { display: block; width: 65%; padding: 0 1rem 2rem 2rem; font-size: 18px; font-family: 'M PLUS 1p', sans-serif;}
.car-pros .text-pros h2 { font-size: 30px; font-weight: 800; color: #3c3c3c; margin: 0;}
.car-pros .text-pros h2 .line-dot { display: block; background: url(../images/bg-dot-orange.jpg); height: 4px; width: 100%; margin: 1rem auto;}

.certified-factory { padding: 2rem; background: #feffbc; font-size: 30px; font-weight: 800; color: #3c3c3c; text-align: center;}
.certified-factory .highlight { display: inline-block; padding: 0 6px; background: #3dffb4; font-size: 42px; color: #fcff00;
    text-shadow: #000 2px 0px 0px, 
    #000 0.540302px 0.841471px 0px, 
    #000 -0.416147px 0.909297px 0px, 
    #000 -0.989992px 0.14112px 0px, 
    #000 -0.653644px -0.756802px 0px, 
    #000 0.283662px -0.958924px 0px, 
    #000 0.96017px -0.279415px 0px;}
.certified-factory .indent { text-indent: 5rem; display: inline-block;}
.img-character { text-align: center; margin: 2rem auto; display: block; padding: 0 1rem;}


/* point 2 */
.higlight-yellow { display: block; color: #e6111a; font-size: 26px; font-weight: 700; text-align: center;}
.higlight-yellow span { display: inline-block; background: #fff949; margin: 4px auto; padding: 0 2px;}
.stripe_gray { background: url(../images/stripe_gray.png); padding: 1rem; text-align: center; margin: 2rem auto; font-size: 16px; font-weight: 700;}
.stripe_gray .title-factory { display: inline-block; padding: 2px 8px; font-size: 16px; background: #ff9c00; color: #fff; font-weight: 500; margin-bottom: 8px;}

.inspection-flow { background: #e1f3ff; border-radius: 40px; padding: 5.5rem 2rem 3rem; text-align: center; position: relative; margin-top: 4rem;}
.inspection-flow .img-title { position: absolute; top: -25px; left: 0; right: 0;}

.necessary-inspection { background: #fff949; padding: 5.5rem 3rem 3rem; text-align: center; position: relative; margin-top: 60px;}
.necessary-inspection .img-title-red { position: absolute; top: -25px; left: 0; right: 0;}
.items-necessary { display: flex; flex-wrap: wrap; justify-content: center;}
.items-necessary .item { display: block; width: 23%; margin: 8px 1%; background: #fff; padding: 4rem 1.2rem 1rem; text-align: center; font-weight: 500; font-size: 15px; box-shadow: 0px 4px 16px -8px rgba(0, 0, 0, 0.65); position: relative;}
.items-necessary .item .title-item { background: url(../images/stripe_orange.png); text-align: center; display: block; position: absolute; top: 8px; left: -1%; width: 102%; padding: 6px 12px; font-size: 18px; font-weight: 700; color: #fff;
    text-shadow:  #000 1px 0px 0px, 
    #000 0.540302px 0.841471px 0px, 
    #000 -0.416147px 0.909297px 0px, 
    #000 -0.989992px 0.14112px 0px, 
    #000 -0.653644px -0.756802px 0px, 
    #000 0.283662px -0.958924px 0px, 
    #000 0.96017px -0.279415px 0px;}
.img-table { display: block; width: 100%; margin-top: 60px; text-align: center;}
.img-table .text-table { font-size: 14px; padding: 1rem;}
.img-table .text-table p { margin: 0;}
.img-table .text-table .remark { background: url(../images/stripe_gray.png); padding: 4px 12px; text-align: center; font-size: 12px; display: inline-block; margin-top: 12px;}
.img-table .text-table .remark span { display: inline-block; margin: 2px 12px;}

.line-dashed::before { content: ''; display: block; width: 80%; margin: 0 auto; border-left: 5px dashed #e61018; border-right: 5px dashed #e61018; position: absolute; bottom: -80px; left: 0; right: 0; height: 80px;}


/* point 3 */
.bg-insurance { background: url(../images/bg-wood.jpg); text-align: center;}
.topic-insurance { background: #ff9c00; margin-top: 12px; padding: 8px; display: inline-block; font-family: 'Keifont'; font-size: 40px; color: #fff; 
    text-shadow: 
    #000 0px 4px 0px, 
    #000 1.75517px 0.958851px 0px, 
    #000 1.0806px 1.68294px 0px, 
    #000 0.141474px 1.99499px 0px, 
    #000 -0.832294px 1.81859px 0px, 
    #000 -1.60229px 1.19694px 0px, 
    #000 -1.97998px 0.28224px 0px, 
    #000 -1.87291px -0.701566px 0px, 
    #000 -1.30729px -1.5136px 0px, 
    #000 -0.421592px -1.95506px 0px, 
    #000 0.567324px -1.91785px 0px, 
    #000 1.41734px -1.41108px 0px, 
    #000 1.92034px -0.558831px 0px; }
.topic-insurance small { display: inline-block; font-size: 32px;}

.security { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 3rem auto 0; padding: 2rem;}
.content-security { position: relative; z-index: 1;}
.security .item-security { display: block; width: 31.33%; margin: 8px 1%; padding: 2rem 1rem; position: relative; box-shadow: 0px 8px 18px 1px rgba(0, 0, 0, 0.4);}
.security .item-security.item-4 { position: absolute; bottom: 288px; left: 12%; transform: rotate(-6deg); z-index: 2;}
.security .item-security .circle { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: -30px; left: 40%; z-index: 0;}
.security .item-security .content-security { font-weight: 900; font-size: 22px; color: #fff; 
    text-shadow:  #000 1px 0px 0px, 
    #000 0.540302px 0.841471px 0px, 
    #000 -0.416147px 0.909297px 0px, 
    #000 -0.989992px 0.14112px 0px, 
    #000 -0.653644px -0.756802px 0px, 
    #000 0.283662px -0.958924px 0px, 
    #000 0.96017px -0.279415px 0px;}
.security .item-security .content-security .text-yellow { color: #fffc00;}
.last-security{ width: 70%; background: url(../images/bg-dot-orange.jpg); padding: 6px; position: relative; margin: 2rem auto; z-index: 1;}
.bg-last { text-align: right; background: #fff;}

.security .item-security.pink,
.security .item-security.pink .circle { background: url(../images/bg-flower-pink.jpg);}
.security .item-security.blue,
.security .item-security.blue .circle { background: url(../images/bg-flower-blue.jpg);}
.security .item-security.green,
.security .item-security.green .circle { background: url(../images/bg-flower-green.jpg);}
.security .item-security.orange,
.security .item-security.orange .circle { background: url(../images/bg-flower-orange.jpg);}

.img-security { position: relative; width: 100%;}


.text-security { margin-bottom: 2rem;}
.highlightgray { background: #fff; font-weight: 500; font-size: 18px;padding: 5px; margin: 4px auto; line-height: 2.3;}


@media(max-width:980px) {
    .support .title-support { font-size: 34px;}

    .items-necessary .item { width: 46%; margin: 8px 2%; font-size: 14px;}
    .security .item-security { width: 46%; margin: 0 2% 3rem;}

    .topic-insurance { font-size: 34px;}
    .security { padding: 2rem 2rem 0;}
    .security .item-security.item-4 { position: relative; bottom: 0; left: auto; transform: rotate(0);}
    .last-security { display: none;}
}

@media(max-width:768px) {
    .content-point { padding: 2rem 1rem;}
    .support .title-support { font-size: 30px;}
    .support .title-support small { font-size: 22px;}

    .title-point p { font-size: 32px;}
    .title-point p small { font-size: 26px;}   
    
    .bg-dot-orange .car-pros::before { display: none;}
    .car-pros .text-pros h2 { font-size: 22px;}

    .certified-factory .highlight { font-size: 34px;}
    .certified-factory { font-size: 24px;}

    .topic-insurance { font-size: 30px;}
    .topic-insurance small{ font-size: 22px;}
    
}

@media(max-width:680px) {
    .support { padding: 2rem 1rem 2.5rem;}
    .support .title-support { font-size: 27px;}
    .support .title-support small { font-size: 20px;}
    .support .benefit .item-benefit { width: 50%; margin: 0;}

    
    .bg-dot-orange .car-pros { align-items: center; padding: 1rem 1rem 0;}
    .car-pros .img-pros { width: 50%; text-align: center; padding: 0 0 1rem;}
    .car-pros .text-pros { width: 50%; padding: 0 0 1rem; font-size: 15px;}
    .car-pros .text-pros h2 { font-size: 18px;}
    .certified-factory { font-size: 20px; padding: 2rem 1rem;}
    .certified-factory .highlight { font-size: 30px;}

    .necessary-inspection { padding: 4rem 1rem 1rem;}

    .security { padding: 2rem 0 0;}
    .security .item-security .content-security { font-size: 20px;}
    .highlightgray { font-size: 15px;}

}

@media(max-width:560px) {
    .support .title-support { font-size: 20px; line-height: 1.5;}
    
    .topic-insurance { font-size: 20px; line-height: 1.5;}

    .content-security br { display: none;}
    .highlightgray { font-size: 14px; display: block; padding: 1rem;} 
    .highlightgray br { display: none;}
}

@media(max-width:480px) {
    .support .content-support { border-radius: 2rem;padding: 0.5rem 1rem;}
    .support .content-support .title-ribbon-red { margin-top: -1rem;}
    .support .benefit .item-benefit img {
        box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.2);
    }
    .support .benefit .item-benefit {padding: 0.5rem;}    

    .title-point p { font-size: 23px;}
    .title-point p small { font-size: 20px;}

    .car-pros .img-pros { width: 100%;}
    .car-pros .text-pros { width: 100%;}

    .img-table .text-table { padding: 1rem 0; font-size: 13px; text-align: left;}
    

    .certified-factory { font-size: 16px;}
    .certified-factory .indent { text-indent: 0;}
    .certified-factory .highlight { font-size: 19px;}
    
    .higlight-yellow { font-size: 16px;}
    .inspection-flow { padding: 3rem 1rem 1.5rem;}

    .items-necessary .item { width: 100%; margin: 12px auto;}

    .price_list{
        overflow-x: scroll;
        width: 100%;
        position: relative;
    }
    .price_list img{
        width: 600px !important;
        max-width: auto;
        max-width: 600px !important;
    }
}
@media (max-width:420px) {
    .title-point p { font-size: 20px;}

    .security { padding: 0 1rem;}
    .security .item-security { width: 100%; margin: 9px auto 0;}

    .certified-factory { font-size: 14px;}

    .text-security { margin-top: 2rem;}
    .highlightgray { font-size: 13px;}

}