/* TITLE SECTION */
.title-section { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;}
.title-section .title-en { font-family: 'SandroAl', sans-serif; font-size: 80px; text-shadow: 3px 3px 0 #fff; margin-right: 1rem;}
.title-section .title-jp { font-family: 'LightNovelPOP', sans-serif; font-size: 28px; color: #000;}
.title-section .line { display: block; width: 130px; height: 5px; margin: 0 auto 2rem;}

.title-section.title-trait .title-en { color: #5bbbc3;}
.title-section.title-trait .line { background: url(../images/line-greenblue.jpg);}
.title-section.title-process .title-en { color: #5bbbc3;}
.title-section.title-process .title-jp { color: #4f4f4f;}
.title-section.title-process .line { background: url(../images/line-greenblue.jpg);}
.title-section.title-price .title-en { color: #fc8d74;}
.title-section.title-price .title-jp { color: #4f4f4f;}
.title-section.title-price .line { background: url(../images/line-pink.jpg);}
.title-section.title-other .title-en { color: #0091d4;}
.title-section.title-other .title-jp { color: #4f4f4f;}
.title-section.title-other .line { background: url(../images/line-blue.jpg);}
.title-section.title-contact .title-en { color: #a3d839;}
.title-section.title-contact .title-jp { color: #4f4f4f;}
.title-section.title-contact .line { background: url(../images/line-green.jpg);}


/* TOP BANNER */
.top-banner {background: url(../images/bg-dot-gray.jpg); position: relative;}
.top-banner::before { content: ''; background: url(../images/bg-bottom-banner.jpg) no-repeat bottom left; background-size: 100%; display: block; width: 100%; height: 82px; position: absolute; bottom: 0; left: 0;}
.top-banner .banner img { width: 100%;}

/* TRAIT */
.trait { background: #fffa7b; position: relative; padding: 3rem 0; z-index: 1;}
.trait::before { content: ''; background: url(../images/bg-yellow-top.jpg) no-repeat top left; background-size: 100%; width: 100%; height: 239px; position: absolute; top: 0; left: 0;}
.trait::after { content: ''; background: url(../images/bg-yellow-bottom.jpg) no-repeat top left; background-size: 100%; display: block; width: 100%; height: 370px; position: absolute; bottom: 0; left: 0;}
.item-trait { background: #ffb503; border-radius: 12px; padding: 3rem 1rem; text-align: center;}
.icon-star { position: absolute; left: 8px; top: 0px;}

/* PROCESS */
.process { padding: 3rem 0;}
.line-yellow { display: block; height: 3px; background: #ffdf00; position: absolute; bottom: 0; left: 15px; right: 15px;}

/* VDO */
.vdo { background: url(../images/bg-blue-top.png) no-repeat top center #fff; background-size: 100%; min-height: 308px; padding: 3rem 0;}
.vdo .wink1 { position: absolute; top: 0; right: 0;}
.vdo .wink2 { position: absolute; top: 7rem; left: 0;}
.vdo .title-vdo { color: #5bbbc3; text-align: center; padding: 1rem; display: inline-block; position: relative; background: #fff; border-radius: .4em; box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);}
.vdo .title-vdo::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 22px solid transparent; border-top-color: #fff; border-bottom: 0; margin-left: -22px; margin-bottom: -22px;}
.vdo .title-vdo::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 24px solid transparent; border-top-color: rgba(0, 0, 0, 0.2); border-bottom: 0; margin-left: -24px; margin-bottom: -24px;}
.vdo .bg-highleght { background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ffea03), color-stop(100, #01bbba));
    background: -moz-linear-gradient(top left, #ffea03 0%, #01bbba 100%);
    background: -ms-linear-gradient(top left, #ffea03 0%, #01bbba 100%);
    background: -o-linear-gradient(top left, #ffea03 0%, #01bbba 100%);
    background: linear-gradient(to bottom right, #ffea03 0%, #01bbba 100%);}
.vdo .icon-play { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: url(../images/img-vdo.jpg) no-repeat center center; background-size: cover;}
.vdo .icon-play img:hover  {opacity: 0.7; transition: all 0.3s; cursor: pointer;}

/* PRICE */
.price { background: url(../images/bg-dot-pink.jpg); padding: 3rem 0;}
.hero-accordion .btn-link { width: 100%; text-align: left; color: #000;}
.hero-accordion .btn-link::after { content: url(../images/icon-plus.png); position: absolute; right: 1rem; top: 0.3rem;}
.hero-accordion .btn-link[aria-expanded="true"]::after { content: url(../images/icon-minus.png);}
.hero-accordion .btn-link:hover { text-decoration: none; }
.hero-accordion .border-black { border: 3px solid #000 !important;}

.table-price table tr th { background: #f0f0f0; border-bottom: 3px solid #000;}
.table-price table tr td { vertical-align: middle;}
.table-price table tr td:first-child { position: relative;}
.table-price table tr td:first-child::after { content: ''; width: 3px; position: absolute; top: 0.5rem; bottom: 0.5rem; right: 0; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc8d74), color-stop(100, #ffb504));
    background: -moz-linear-gradient(Top, #fc8d74 0%, #ffb504 100%);
    background: -ms-linear-gradient(Top, #fc8d74 0%, #ffb504 100%);
    background: -o-linear-gradient(Top, #fc8d74 0%, #ffb504 100%);
    background: linear-gradient(to bottom, #fc8d74 0%, #ffb504 100%);}

/* OTHER */
.other { background: url(../images/stripe_gray.png); padding: 3rem 0;}
.other .border-black { border: 3px solid #000;}


.other .btn-email { display: inline-block; padding: 0.8rem 1.5rem; background: #ffb503; font-size: 15px; font-weight: 700; color: #fff; position: relative; z-index: 1; margin-right: 12px;}
.other .btn-email::after { content: ''; background: #ff7a03; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.other .btn-email:hover::after { height: 100%;}

.other .btn-tel { display: inline-block; padding: 0.8rem 1.5rem; background: #ff8b03; font-size: 15px; font-weight: 700; color: #fff; position: relative; z-index: 1;}
.other .btn-tel::after { content: ''; background: #e80000; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.other .btn-tel:hover::after { height: 100%;}

.other .btn-website { display: inline-block; padding: 0.8rem 1.5rem; background: #a3d839; font-size: 15px; font-weight: 700; color: #fff; position: relative; z-index: 1;}
.other .btn-website::after { content: ''; background: #1db000; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.other .btn-website:hover::after { height: 100%;}

/* CONTACT */
.contact { padding: 3rem 0;}
.form-contact-hero .form-control { border: 0; background: #f0f0f0; }
.form-contact-hero .form-control.zipcode { width:150px;display:inline-block; }
.form-contact-hero .required { font-size: 10px; background: #fc8d74; color: #fff; border-radius: 4px; padding: 2px 4px; position: absolute; right: 0; top: 4px;}
.btn-submit { max-width: 280px; display: inline-block; padding: 1rem 2rem; text-align: center; color: #fff; font-size: 19px; font-weight: 700; background: #ffb503; position: relative; z-index: 1; border: 0;}
.btn-submit::after { content: ''; background: #ff7a03; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.btn-submit:hover::after { height: 100%;}

.confirm.btn-submit{ width: 40%;}

.mobile_txt{ display: none;}

@media (max-width:992px) {
    /* PRICE */
    .price .w-75 { width: 90% !important;}

    /* OTHER */
    .other .w-75 { width: 90% !important;}
}

@media(max-width:768px) {
    .font-16 { font-size: 15px;}
    .font-20 {font-size: 16px;}
    .font-22 { font-size: 18px;}

    /* TITLE SECTION */
    .title-section .title-en { font-size: 65px;}

    /* TRAIT */
    .item-trait { padding: 1.5rem 0.5rem;}
    .item-trait br { display: none;}

    /* VDO */
    .vdo .wink2 { top: 2rem;}
    .vdo .w-65 { width: 80%;}

    /* PRICE */
    .price .w-75 { width: 100% !important;}
    .table-price { width: 100%; overflow-x: auto;}
    .table-price table{ min-width: 600px;}

    /* OTHER */
    .other .text-other br { display: none;}
    
}

@media(max-width:700px) {
    /* TRAIT */
    .item-trait .font-22 { font-size: 14px;}

    /* PROCESS */
    .text-process br { display: none;}
    .mobile_txt{ display: block;}

}

@media(max-width:575px) {
    .form-contact-hero .required { position: relative; top: 0; right: auto; margin-left: 4px;}

    .hero-accordion .btn-link {padding:0;}
    .hero-accordion .btn-link::after {right: 0rem;top: 0rem;}




}

@media(max-width:480px) {
    /* VDO */
    .vdo .w-65 { width: 95%;}
    .vdo .wink2 { top: -4rem;}
    .item-trait .d-block img.img-fluid{width:60px;}
    .vdo .title-vdo { padding: 1rem 0.5rem; }



}

@media(max-width:375px) {
    /* TITLE SECTION */
    .title-section .title-en {font-size: 41px;margin: 0 0.5rem;line-height: 1;}
    .title-section .title-jp {font-size: 18px;margin: 0 0 10px;}

    /* PROCESS */
    .process .w-75 { width: 100%!important;}

    /* CONTACT */
    .contact .w-75 { width: 100%!important;}
}