@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; }

#about .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 .factory { background: #e61018; 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: 18px; }
.banner-top .private::before { content:''; position: absolute; top: 0; right: 0; 
    width:0; 
    height:0; 
    border-right:7px solid #e61018;
    border-top:7px solid #e61018;
    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; }


/* dealer */
.dealer {background: #ffe749;padding: 2rem 1rem 3rem;text-align: center;}
.dealer .title-dealer { background: #ff9c00; margin-top: 12px; padding: 0 12px; 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; }
.dealer .text-dealer {display: block;padding: 18px 0;font-size: 18px;line-height: 1.8;}
.dealer .highlight-white { display: inline-block; background: #fff; padding: 0 8px; font-weight: 700; }

/* community-based */
.community-based { width: 62%; margin: 2rem auto; color: #044ab1; 
    border-top: 6px solid #044ab1;
    border-bottom: 6px solid #044ab1;
    border-left: 12px solid #044ab1;
    border-right: 12px solid #044ab1;
 }
.title-based { display: block; text-align: center; margin-top: -18px; }
.title-based span { display: inline-block; line-height: 33px;width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid #044ab1; padding: 8px; font-family: 'Jiyucho'; font-size: 30px; text-align: center; }
.text-based { font-size: 16px; line-height: 1.6; padding: 6px 8px 12px;}

/* point */
.title-point { background: url(../images/stripe-blue.png); padding: 0.3rem 1rem 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.4; margin: 12px 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;
    letter-spacing: 3px;}
.title-point p small { font-size: 32px;}
.content-point { background: #fff; padding: 1.5rem; position: relative; }
/* point 1 */
.traders { display: block; text-align: center; position: relative; padding: 26px 0 14px; }
.traders p { display: inline-block; color: #e6111a; background: #fff949; margin: 4px 0; font-size: 26px; font-weight: 700; }
.traders .img-comment { position: absolute; top: -12px; left: 56px;  max-width: 177px;}
.car-factory { background: url(../images/stripe-gray.png); padding: 1rem; }
.car-factory .text-car-factory {
    color: #ff9c00;
    font-size: 20px;
    text-align: center;
    text-shadow: 
    #000 1px 0px 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;
    }
.car-factory .text-car-factory small{text-shadow: none;font-size: 12px;color: #3c3c3c;display: block;}
.flow-until { background: #feffbc; border-radius: 35px;  padding: 2rem 1.4rem 2.6rem; margin: 4rem auto 2rem; text-align: center; position: relative; }
.flow-until .title-ribbon { margin: -60px auto 24px; display: block; width: 70%; }

/* .flow-until .title-ribbon { position: relative; font-family: 'Memoir-Square'; font-size: 33px; color: #fff; width: 602px; height: 78px; margin: -60px auto 24px; background: url(../images/ribbon-blue.png) no-repeat; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } */


/* point 2 */
.option-point2 { text-align: right; padding: 2rem 0;}
.option-point2 img { display: inline-block;}
.box-option { background: #ff9c00; padding: 4px; text-align: center; display: inline-block; box-shadow: 0px 10px 25px 2px rgb1(0,0,0,0.3); position: absolute; top: 25%; left: 18px; width: 250px; }
.box-option .ribbonoption { background: url(../images/ribbon-yellow.png) no-repeat; width: 203px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #3c3c3c; margin: 8px auto 0; margin-bottom: 16px}
.box-option .text-option { border: 2px solid #fff; display: block; padding: 20px 14px 38px; font-size: 16px; color: #fff; line-height: 1.8}
/* point 3 */
.bg-point3 { background: #d4fdff; }
.link { background: #fff; text-align: center; padding: 18px 8px; }
.link .title-link { text-align: left; margin-left: -12px; margin-bottom: 18px; font-size: 18px; display: table; width: 100%;}
.link .title-link span:first-child { background: url(../images/ribbon-orange.png) no-repeat top left; text-align: center; width: 239px; height: 49px; font-size: 22px; font-weight: 700; text-shadow: 0px 1px 0px rgba(0,0,0,0.8); color: #fff; letter-spacing: 1px; }
.link .title-link span { display: table-cell; padding: 0 8px; vertical-align: middle;  }
.link .link-warranty { position: relative; display: inline-block; background: url(../images/orange-dot.jpg)repeat-x bottom center #fff; padding: 12px; max-width: 250px; width:100%; margin: 12px 1%; box-shadow: 0px 8px 12px 0px #d9d9d9; transition: all 0.3s; }
.link .link-warranty:hover { box-shadow: 0px 2px 9px 0px #fd9c00; }
.link .link-warranty::after { content: url(../images/icon-link.png); position: absolute; right: 8px; bottom: 6px; }
.further { padding: 2rem 0 4rem; text-align: center; }
/* point 4 */
.option-price .title-price-list { display: block; width: 100%; background: #e61018; padding: 8px; text-align: center; font-weight: 900; color: #fff; font-size: 22px;
    text-shadow: 
    #000 1px 0px 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; }
.option-price ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; border: 3px solid #e61018; }
.option-price ul li { display: flex; flex-wrap: wrap; width: 50%;  padding: 0; }
.option-price ul li .left { display: block; padding: 8px; width: 70%;}
.option-price ul li .right { display: block; padding: 8px; width: 30%; text-align: right; font-weight: 900; font-size: 18px;}
.option-price ul li .right small { font-size: 12px;}
.option-price ul li.price-recommend { color: #044ab1;}
.option-price ul li:nth-of-type(4n), .option-price ul li:nth-of-type(4n-1){background:#f1f1f1;}
.option-price ul li:nth-of-type(4n-2), .option-price ul li:nth-of-type(4n-3){background:#ffffff;}

.flow-until.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; }

@media(max-width:980px) {
    .traders .img-comment { left: 0;}
}

@media(max-width:768px) {
    .banner-top .private { font-size: 18px; }
    .banner-top .factory { font-size: 16px;}

    .dealer .title-dealer { font-size: 30px;}
    .dealer .text-dealer {font-size: 15px;}
    .dealer .text-dealer br {display:none;}

    .title-point p { font-size: 32px;}
    .title-point p small { font-size: 26px;}

    .text-option p br { display: none;}

    .traders { padding: 22px 0 22px 100px;}
    .traders p { font-size: 22px;}
    
    .car-factory .text-car-factory { font-size: 18px;}

    .link .title-link { font-size: 16px;}
    .link .title-link span:first-child { font-size: 20px; }
}

@media(max-width:680px){
    .title-point p { font-size: 30px;}
    .title-point p small { font-size: 24px;}

    .traders { padding: 22px 0;}
    .traders .img-comment { position: relative; display: block; text-align: left;}

    .option-point2 { text-align: center;}
    .box-option { position: relative; left: 0; right: 0; margin-top: 22px; width: 80%; }
    .text-option p br { display: none;}

    .flow-until { padding: 2rem 0.5rem;}

    .option-price ul li { width: 100%;}
    .option-price ul li:nth-child(even)  {background:#f1f1f1;}
    .option-price ul li:nth-child(odd)  {background:#ffffff;}
}

@media(max-width:530px) { 
    .link .title-link { display: block; }
    .link .title-link span { display: block; width: 100%; padding: 10px;}

    .box-option { width: 100%;}
}

@media(max-width:460px) {
    .dealer { padding: 2rem 1rem;}
    .dealer .title-dealer { font-size: 25px;}

    .community-based { width: 97%;}

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

    .content-point { padding: 1.5rem 1rem;}

    .traders p { font-size: 16px;}

    .option-price ul li .left { width: 100%; padding: 8px 8px 0; }
    .option-price ul li .right { width: 100%; padding: 0 8px 8px; }
}

@media(max-width:440px) {
    .title-point p { font-size: 22px;}
    .title-point p small { font-size: 16px;}
}