body.active{overflow:hidden}
header{background-color:var(--white900);padding:1.2rem 2.6rem}
header h1{line-height:1;width:17.9rem}
#intro{background:url(../img/intro_bg.webp) no-repeat center top;background-size:100% auto;z-index:2}
#intro .ttl{padding:7.5rem 0;height:45.1rem}
#intro h2{margin:0 auto;width:69.8rem}
#intro .tabs-container{margin-top:-14rem}
#intro .tabs-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;width:100%;padding:0}
#intro .tabs-nav button{border-radius:3.2rem 3.2rem 0 0;opacity:1;cursor:pointer;transition:opacity .3s}
#intro .tabs-item{color:var(--white900);display:inline-block;font-size:4rem;font-weight:400;line-height:1.2;width:calc(100%/2);text-align:center;transition:opacity .3s;padding:2.2rem 0}
#intro .tabs-item:nth-child(1){background-color:#5185c5}
#intro .tabs-item:nth-child(2){background-color:#808080}
#intro .tabs-body{background:linear-gradient(90deg,rgba(81,133,197,1) 0%,rgba(81,133,197,1) 50%,rgba(128,128,128,1) 50%,rgba(128,128,128,1) 100%);border-radius:0 0 3.2rem 3.2rem}
#intro .tabs-content{padding:3.2rem 3rem}
#intro .tabs-content .tabs-inner{background-color:var(--white900);border-radius:2.4rem}
#intro .tabs-content.active .tabs-inner{animation:fadeIn 1s ease 0s 1 normal}
#intro .tabs-content .title{line-height:1.4;margin-bottom:4rem;text-align:center}
#intro .tabs-content .title h3{font-size:4.8rem;font-weight:500;margin-bottom:3rem}
#intro .tabs-content .title p{color:#45270d;font-size:3.2rem}
#intro .tabs-content.content01{background-color:#5185c5;border-radius:0 3.2rem 3.2rem 3.2rem}
#intro .tabs-content.content02{background-color:#808080;border-radius:3.2rem 0 3.2rem 3.2rem}
#intro .tabs-content.content01 .tabs-inner{padding:3rem 0 5rem}
#intro .tabs-content.content02 .tabs-inner{padding:3rem 3rem 4.5rem}
#intro .tabs-content.content01 .title h3{color:#5185c5}
#intro .tabs-content.content02 .title h3{color:#45270d}
#intro .tabs-content .types{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;width:100%;row-gap:4rem}
#intro .tabs-content .types li{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:50%;cursor:pointer;transition:opacity .3s}
#intro .tabs-content .types li:hover{opacity:var(--opacity500)}
#intro .tabs-content .types li:nth-child(1){width:30rem;margin:0 1.5rem 0 3rem}
#intro .tabs-content .types li:nth-child(2){width:30rem;margin:0 3rem 0 1.5rem}
#intro .tabs-content .types li:nth-child(3){width:31rem;margin:0 .5rem 0 2.5rem}
#intro .tabs-content .types li:nth-child(4){width:31.9rem;margin:0 2.5rem 0 .6rem}
#intro .tabs-content .types li:nth-child(5){width:35.3rem;margin:0 0 0 .7rem}
#intro .tabs-content .types li:nth-child(6){width:31rem;margin:0 2.5rem 0 -.5rem}
#intro .tabs-content .types button{background:transparent}
#intro .tabs-content .caution{display:flex;flex-direction:column;}
#intro .tabs-content .caution:not(:last-child){margin-bottom:4rem}
#intro .tabs-content .caution dt{font-size:3.2rem;padding-bottom:3rem;text-align:center;text-decoration:underline;text-underline-offset:2rem;text-decoration-thickness:2px}
#intro .tabs-content .caution dd{display:flex}
#intro .tabs-content .caution .img{margin-right:3rem;width:30rem}
#intro .tabs-content .caution .txt{font-size:2.2rem;font-feature-settings:"palt";line-height:1.4;text-align:justify;width:calc(100% - 30rem - 3rem)}
#intro .modal-area.modal01 .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);justify-content:center;align-items:center}
#intro .modal-area.modal01 .modal.active{display:flex;animation:fadeIn 1s ease 0s 1 normal;z-index:100;overflow-x:auto}
#intro .modal-area.modal01 .modal-content{background-color:#fff5ef;display:flex;flex-direction:column;border-radius:3rem 3rem 2.4rem 2.4rem;width:69rem;box-shadow:1.2rem 1.6rem 1.6rem rgba(0,0,0,.7)}
#intro .modal-area.modal01 .modal-content h4{display:flex;justify-content:center;align-items:center;color:var(--white900);background-color:var(--blue500);border-radius:2.4rem 2.4rem 0 0;min-height:15.6rem;font-size:4.4rem;font-weight:600;line-height:1.3;padding:2.8rem 5.5rem 2.6rem;text-align:center}
#intro .modal-area.modal01 .modal .modal-img{margin:4rem auto}
#intro .modal-area.modal01 .modal:nth-child(1) .modal-img{width:30rem}
#intro .modal-area.modal01 .modal:nth-child(2) .modal-img{width:15.4rem}
#intro .modal-area.modal01 .modal:nth-child(3) .modal-img{width:29.2rem}
#intro .modal-area.modal01 .modal:nth-child(4) .modal-img{width:37.8rem}
#intro .modal-area.modal01 .modal:nth-child(5) .modal-img{width:42.8rem}
#intro .modal-area.modal01 .modal:nth-child(6) .modal-img{width:28.2rem}
#intro .modal-area.modal01 .modal-compare ul{display:flex;background-color:#f2f2f2}
#intro .modal-area.modal01 .modal-compare li{padding:3rem 0}
#intro .modal-area.modal01 .modal-compare li:nth-child(1){color:#3d170c;background-color:#f2f2f2;padding-left:3rem;width:47.5%}
#intro .modal-area.modal01 .modal-compare li:nth-child(2){color:var(--white900);background-color:var(--blue500);padding:3rem 3rem 3rem 6rem;clip-path:polygon(100% 0,100% 100%,0% 100%,10% 50%,0% 0%);width:52.5%}
#intro .modal-area.modal01 .modal-compare h5{font-size:3rem}
#intro .modal-area.modal01 .modal-compare li:nth-child(1) p{font-size:2rem;line-height:1.5}
#intro .modal-area.modal01 .modal-compare li:nth-child(2) p{font-size:2.4rem;line-height:1.6}
#intro .modal-area.modal01 .modal-close{border-radius:0 0 2.4rem 2.4rem;padding:3.5rem 0}
#intro .modal-area.modal01 .modal-close .btn{display:block;margin:0 auto;width:51.2rem;cursor:pointer}
[data-tab-content]{display: none}
[data-tab-content].active{display: block}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
#support .bg{background:linear-gradient(0deg,rgba(255,255,255,1) 23%,rgba(255,245,239,1) 100%);margin-top:-3.2rem;padding:10rem 0 0;position:relative}
#support h2{margin:0 auto 5rem;width:64rem}
#support .serif{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:5rem;padding:0 2.6rem}
#support .movie{background:url(../img/support_bottom_bg.webp) no-repeat center top;background-size:100% auto;padding:5rem 0 4.5rem}
#support .movie h3{margin:0 auto 3rem;width:63rem}
#support .youtube{aspect-ratio:16 / 9;margin:0 auto;width:63rem}
#support .youtube iframe{width:100%;height:100%}
#flow{background:url(../img/flow_bg.webp) no-repeat center top;background-size:100% auto;padding-top:7rem}
#flow h2{margin:0 auto 5rem;width:42.8rem}
#flow .flow-step{display:flex;flex-direction:column;gap:6rem;padding:0 3rem}
#flow .flow-step li{position:relative}
#flow .flow-step li:not(:last-child):after{position:absolute;content:"";left:50%;bottom:-4.2rem;transform:translateX(-50%);border-style:solid;border-width:2.6rem 3.6rem 0;border-color:#45270d transparent transparent}
#faq{padding-top:7rem}
#faq h2{margin:0 auto 5rem;width:36.4rem}
#faq .faq-content{display:flex;flex-direction:column;gap:2rem;margin-bottom:6.5rem;padding:0 .9rem}
#faq .faq-content dt{background:var(--white900);border-radius:10rem;font-size:3rem;padding:3rem 3rem 3rem 9rem;position:relative;z-index:1;cursor:pointer;transition:opacity .3s}
#faq .faq-content dt:before{color:#45270d;position:absolute;content:"Q";top:50%;left:3rem;font-size:5.6rem;font-weight:600;transform:translateY(-50%)}
#faq .faq-content dt:after{position:absolute;content:"";background:url(../img/faq_q_plus.webp) no-repeat center center/contain;top:50%;right:3rem;width:4.8rem;height:4.8rem;transform:translateY(-50%);transition:opacity .3s}
#faq .faq-content dt.active:after{background:url(../img/faq_q_minus.webp) no-repeat center center/contain}
#faq .faq-content dd{background:var(--white900);border-radius:0 0 5rem 5rem;font-size:2.6rem;margin-top:-6rem;padding:6rem 3rem 4rem;display:none;opacity:0;transition:opacity .3s}
#faq .faq-content dd.active{display:block;opacity:1;animation:fadeIn 1s ease 0s 1 normal}
#faq .faq-content dd .answer{border-top:2px solid #45270d;padding:3rem 5.2rem 0 6rem;position:relative}
#faq .faq-content dd .answer:before{color:#45270d;position:absolute;content:"A";top:0;left:0;font-size:5.6rem;font-weight:600}
#faq .faq-content a{color:#db6463;text-decoration:underline}
footer{text-align:center;background:var(--blue500);color:var(--white900);padding:4.5rem 0;font-size:2rem}
footer p.copy{margin-top:2rem;font-size:1.6rem}