@charset "utf-8";

html,body,*{
    box-sizing: border-box;
}

html,body{
    background-color: #fff;
    font-family: "noto-sans-cjk-jp", sans-serif;
    color: #391800;
}

*, *::before, *::after {
    box-sizing: inherit;
}

img{
    width: 100%;
}

body{
    max-width: 750px;
    margin: 0 auto;
}

header{
    padding: clamp(13.5px,3.6vw,27px) 0;
    background-color: #ddc210;
}

.header-copy{
    display: block;
    width: 80%;
    margin: 0 auto;
}

section{
    position: relative;
}

.bg{
    display: block;
    width: 100%;
    height: auto;
}

.content{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.fv-img{
    display: block;
    width: 90%;
    margin: 0 auto;
}

.fv-catch{
    display: block;
    position: absolute;
    width: 73%;
    top: 41%;
    left: 2.4%;
}

.fv-head{
    position: relative;
    margin: 0 auto;
    width: 90%;
}

.catch-engi-dance-tate{
    width: 50.6%;
    margin-bottom: clamp(-16px,-2.1vw,-8px);
}

h1{
    font-weight: 500;
    font-size: clamp(16px,4.2vw,32px);
    text-align: center;
    margin-top: clamp(10px,2.6vw,20px);
    line-height: 1.9em;
}

h1 .big{
    font-size: clamp(18px,4.8vw,36px);
}

.decor{
    position: absolute;
}

.fv-logo-decor{
    width: 68%;
    bottom: 50%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.cta{
    width: 94%;
    margin: clamp(7px,1.8vw,14px) auto clamp(13px,3.4vw,26px);
}

.cta img{
    animation: squash 1.2s ease-in-out infinite;
}

@keyframes squash {
    0% {transform: scale(0.95);}
    50% {transform: scale(1);}
    100% {transform: scale(0.95);}
}

.nayimi-bg{
    margin-top: clamp(-10px,-1.3vw,-5px);
}

.nayami .content{
    top: 14%;
}

.nayami-catch{
    position: relative;
    width: 76%;
    margin: 0 auto;
}

.nayami-catch p{
    font-size: clamp(19px,5vw,38px);
    font-weight: 500;

    position: absolute;
    top: 23%;
    left: 12%;

    z-index: 1;
}

.nayami-wrap{
    display: flex;
    flex-direction: column;
    margin-top: clamp(22px,6vw,45px);
}

.nayami-item{
    position: relative;
    width: 100%;
}

.nayami-txt{
    position: absolute;
}

.upper .nayami-txt{
    top: 36%;
    width: 60%;
}

.nayami-txt p{
    font-size: clamp(15px,4vw,30px);
    color: #f2f0be;
    font-weight: bold;
    line-height: clamp(27px,7.3vw,55px);

    position: absolute;

    z-index: 1;
}

.upper .nayami-txt p{
    top: 18%;
    left: 10%;
}

.nayami-img{
    width: 71%;
}

.upper .nayami-img{
    margin: 0 0 0 auto;
}

.lower .nayami-txt{
    top: 49%;
    right: 0;
    width: 67%;
    height: 100%;
}

.lower .nayami-txt p{
    top: 4%;
    right: 10%;
}


.demo{
    width: 17.3%;
    height: auto;

    bottom: -4%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.dounyu-catch{
    position: relative;
    margin: clamp(50px,13vw,100px) auto clamp(60px,16vw,120px);
}

.dounyu-catch p{
    font-size: clamp(38px,10.1vw,76px);
    font-weight: 500;
    text-align: center;
}

.dounyu-catch .kanji{
    font-size: clamp(40px,10.6vw,80px);
}

.dounyu-catch .small{
    font-size: clamp(32px,8.6vw,65px);
}

.orange{
    color: #ff7909;
}

.dounyu-catch-decor{
    width: 75%;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
}

.dounyu-head-content{
    position: relative;
}

.photo-lesson{
    display: block;
    width: 100%;
    height: auto;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.dounyu-head-icon{
    position: absolute;
    display: flex;
    justify-content: center;
    top: clamp(-50px,-6.6vw,-25px);
    right: 0;
    left: 0;
    margin: 0 auto;
    gap: clamp(3px,0.9vw,7px);
}

.icon{
    width: 30%;
    filter: drop-shadow(-4px 3px 18px rgba(0,0,0,0.23));
}

.dounyu-head-icon p{
    position: absolute;
    font-size: clamp(12px,3.3vw,25px);
    font-weight: 500;
    right: clamp(15px,4vw,30px);
    bottom: clamp(-14px,-1.8vw,-7px);
}

.dounyu-head-txt{
    width: 100%;
}

.dounyu-head-txt img{
    position: absolute;
    bottom: 22.3%;
}

.dounyu-middle{
    margin-top: clamp(-93px,-12.4vw,-46.5px);
    z-index: 1;
    position: relative;
}

.dounyu-edogawaku{
    position: absolute;
    top: clamp(51.5px,13.7vw,103px);
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
}

.edogawaku-lead{
    font-size: clamp(16.9px,4.5vw,33.8px);
    line-height: 1.5em;
    margin-bottom: 1.8em;
    font-weight: 500;
}

.marker{
    background: linear-gradient(transparent 60%, #fff 60%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
    padding-left: 4px; 
}

.edogawaku-lead .kanji{
    font-size: clamp(19.3px,5.1vw,38.6px);
}

.edogawaku-txt{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.7em;
}

.edogawaku-txt .highlight{
    font-weight: bold;
    font-size: clamp(16px,4.2vw,32px);
}

.school{
    position: absolute;
    top: 32.5%;
}

.school h2{
    font-size: clamp(16.5px,4.4vw,33px);
    font-weight: 500;
    text-align: center;
    line-height: 1.8em;
}

.underline{
    background: linear-gradient(transparent 60%, #fef7c5 60%);
    background-repeat: no-repeat;
    background-size: 92% 100%;
    background-position: center;
}

.school .orange{
    font-size: clamp(18.75px,5vw,37.5px);
    font-weight: bold;
}

.school-img{
    margin-top: clamp(35px,9.3vw,70px);
    width: 100%;
}

.negative{
    position: absolute;
    bottom: 2%;
}

.negative-txt{
    position: absolute;
    text-align: right;
    right: 0;
    top: 35%;
    letter-spacing: 0.03em;
}

.negative-txt-upper{
    font-size: clamp(16.5px,4.4vw,33px);
    font-weight: 500;
    line-height: clamp(25px,6.6vw,50px);
    margin-bottom: clamp(31.5px,4.8vw,63px);
}

.negative-txt-lower{
    font-size: clamp(15px,4vw,30px);
}

.vertical-line{
    content: "";
    width: 1px;
    height: clamp(47px,12.5vw,94px);
    background-color: #391800;

    position: absolute;
    bottom: 6%;
    left: 50%;
}

.dounyu-bottom{
    position: relative;
    margin-top: -4%;
    z-index: 1;
}

.dounyu-bottom p{
    font-size: clamp(17.5px,4.6vw,35px);
    text-align: center;
    font-weight: 500;
    line-height: 2em;
}

.dounyu-bottom .small{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
}

.dounyu-bottom .orange{
    font-size: clamp(23px,6.1vw,46px);
    background: linear-gradient(transparent 60%, #fff4aa 60%);
}

.syouninzu{
    display: block;
    margin: clamp(22.5px,6vw,45px) auto;
    width: 49%;
}

.syouninzu-decor{
    width: 88%;
    position: absolute;
    top: 24%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.dounyu-bottom .middle{
    font-size: clamp(16.5px,4.4vw,33px);
}

.dounyu-bottom-img{
    position: relative;
    z-index: -1;
    margin-top: clamp(-95px,-12.6vw,-47.5px);
}

.content-inner{
    width: 70%;
    margin: 0 auto;
}

.tsuyomi{
    width: 103%;
    margin: clamp(70px,18.6vw,140px) 0 clamp(45px,12vw,90px);
}

.benefit h2{
    text-align: center;
    font-size: clamp(27.5px,7.3vw,55px);
    line-height: 1.4em;
    font-weight: 500;
    margin-bottom: clamp(17.5px,4.6vw,35px);
}

.san{
    font-size: clamp(32px,8.5vw,64px);
    letter-spacing: -0.17em;
}

.size-m{
    font-size: clamp(23px,6.1vw,46px);
}

.size-s{
    font-size: clamp(20.5px,5.4vw,41px);
}

.three-skils p{
    font-size: clamp(14px,3.7vw,28px);
    font-weight: 500;
    line-height: 1.7em;
}

.three-skils .underline{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffdcbf 60%);
}

.speed{
    position: relative;
}

.speed .content{
    top: 4%;
}

.speed .obi{
    background-color: #fff;
    display: inline-block;
    box-shadow: 3px 3px 0 rgba(232, 229, 210, 1);
    margin-bottom: 7px;
    line-height: 1.2em;
    padding: 0 0.3em;
}

.speed p,.syoukai p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.5em;
}

.speed p{
    letter-spacing: 0.02em;
}

.speed .underline,.syoukai .underline{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffdcbf 60%);
    background-size: 96% 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.syoukai{
    position: relative;
}

.syoukai .content{
    top: 5%;
}

.syoukai .anken{
    margin-bottom: clamp(27.5px, 7.3vw, 55px);
}

.instructor{
    padding-bottom: clamp(41px,10.9vw,82px);
}

.section-heading{
    margin: clamp(35px,9.3vw,70px) auto 0;
    text-align: center;
}

h3{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
    margin-bottom: clamp(15px,4vw,30px);
}

.instructor-head,.info-head{
    width: 85%;
}

.instructor-message{
    position: relative;

    width: 92%;
    background-color: #fff7c6;
    border-radius: 26px;
    padding: 64px 20px 45px;
    margin: clamp(60px,16vw,120px) auto 0;
}

.photo-instructor{
    position: absolute;

    width: 42.7%;
    right: clamp(30px,8vw,60px);
    top: clamp(-88px,-11.7vw,-44px);
}

.name-block{
    margin-left: clamp(36px,9.6vw,72px);
}

.role{
    display: inline-block;
    margin-left: clamp(9px,2.4vw,18px);
    margin-bottom: clamp(11px,2.9vw,22px);
    font-size: clamp(15.5px,4.1vw,31px);
}

.name{
    font-size: clamp(24.5px,6.5vw,49px);
    font-weight: bold;
}

.message-txt{ 
    margin: clamp(45px,12vw,90px) 0 clamp(25px,6.6vw,50px);
    padding: 0 clamp(17px,4.5vw,34px);
    font-size: clamp(15px,4vw,30px);
    line-height: 1.7em;
}

.message-txt .highlight{
    font-weight: bold;
}

.profile-txt{
    background-color: #fffcea;
    margin: 0 auto;

    padding: clamp(17px,4.5vw,34px) clamp(19px,5vw,38px) clamp(14px,3.7vw,28px) clamp(11.5px,2.9vw,23px);
}

.profile-txt p{
    font-size: clamp(13px,3.4vw,26px);
    line-height: 1.7em;
}

.dot {
    position: relative;
    padding-top: clamp(35px, 9.3vw, 70px);

    background-color: #fffcea;
    background-image: radial-gradient(circle, #fff3d0 10px, transparent 10px), radial-gradient(circle, #fff3d0 10px, transparent 10px);
    background-position: 0 0, 27.5px 35px;
    background-size: 55px 70px;
}

.section-heading{
    margin-top: 0;
}

.flow-head{
    width: 43%;
}

.step{
    display: flex;
    flex-direction: column;
    gap: clamp(25px,6.6vw,50px);

    margin-top: clamp(30px,8vw,60px);
}

.step-item{
    position: relative;
    width: 92%;
    margin: 0 auto;
    border-radius: 26px;

    background-color: #fff;
    padding: clamp(11.5px,2.9vw,23px) 0 clamp(13px,3.4vw,26px);

    display: flex;
    gap: clamp(15px,4vw,30px);
}

.step-photo{
    width: 35.5%;
    height: auto;
    align-self: flex-start;
    object-fit: cover;
}

.step-label,.step-num{
    color: #ff7607;
    font-weight: bold;
}

.step-label{
    font-size: clamp(16.5px,4.4vw,33px);
}

.step-num{
    display: inline-block;
    font-size: clamp(22px,5.8vw,44px);
    margin-bottom: clamp(16px,4.2vw,32px);
}

.step-title{
    font-size: clamp(20px,5.3vw,40px);
    font-weight: 500;
}

.arrow {
    position: absolute;
    bottom: clamp(-38px, -5.07vw,-19px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 10.67vw, 80px);
    height: clamp(40px, 10.67vw, 80px);
    background: #ff7607;
    border-radius: 50%;
    border: clamp(7.5px, 2vw, 15px) solid #fff;
}

.arrow::after {
    content: '';
    position: absolute;
    top: 9%;
    bottom: 0;
    right: 26%;
    width: 0;
    height: 0;
    margin: auto;
    border-top: clamp(9.5px, 2.53vw, 19px) solid #fff;
    border-right: clamp(6.5px, 1.73vw, 13px) solid transparent;
    border-left: clamp(6.5px, 1.73vw, 13px) solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateY(1px);
    box-sizing: border-box;
}

.step3 .step-title,.step4 .step-title{
    font-size: clamp(17.5px,4.6vw,35px);
}

.flow-note{
    margin-left: clamp(26px,6.9vw,52px);
    margin-bottom: clamp(49px,13vw,98px);
}

.flow-note p{
    font-size: clamp(13px,3.4vw,26px);
    line-height: 1.7em;
    letter-spacing: 0.04em;
}

.hoshi-top-left{
    width: 13.4%;
    left: 7.7%;
    top: 6.2%;
}

.hoshi-top-right{
    width: 8.9%;
    right: 11.3%;
    top: 4.6%;
}

.hoshi-bottom-right{
    width: 15.4%;
    right: 8.8%;
    bottom: -2.2%;
}

.photo-koyaku{
    margin-top: clamp(45px,12vw,90px);
}

.photo-wrap{
    display: flex;
    flex-direction: column;
    gap: clamp(4.5px,1.2vw,9px);
}

.photo-upper{
    display: flex;
    justify-content: space-between;
}

.photo-upper img{
    width: 49.5%;
}

.photo-txt{
    position: absolute;
    bottom: 10%;
}

.photo-txt p{
    font-size: clamp(20.5px,5.4vw,41px);
    font-weight: 500;
}

.photo-txt .highlight{
    font-size: clamp(23.5px,6.2vw,47px);
    color: #ff7607;
}

.photo-txt .obi{
    background-color: #fff;
    display: inline-block;
    line-height: 1.9em;    
    margin-bottom: 0.42em;
}

.photo-txt .upper{
    padding: 0 0.75em;
    line-height: 2.18em;
}

.closing-message{
    margin: clamp(30px,8vw,60px) auto clamp(25px,6.6vw,50px);
    text-align: center;
}

.closing-message p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.7em;
}

.closing-message .highlight{
    font-size: clamp(16px,4.2vw,32px);
    font-weight: bold;
}

.machinami-wrap{
    position: relative;
    z-index: 1;
}

.closing-catch{
    position: absolute;
    right: 0;
    left: 0;
    top: 30%;
    font-size: clamp(26px,6.9vw,52px);
    text-align: center;
    font-weight: 500;
    line-height: 1.65em;
}

.closing-catch .underline{
    background: linear-gradient(transparent 60%, #fff 60%);
    background-repeat: no-repeat;
}

.closing-catch .upper-line{
    background-size: 91%;
    background-position: left;
}

.closing-catch .lower-line{
    background-size: 97%;
    padding-left: 0.25em;
}

.closing-catch .kanji{
    font-size: clamp(28px,7.4vw,56px);
}

.closing-catch .size-s{
    font-size: clamp(25.5px,6.8vw,51px);
}

.closing-bottom{
    background-color: #fff4aa;
    margin-top: -31.5%;
}

.closing-group-photo{
    margin-bottom: clamp(5px,1.3vw,10px);
}

.closing-cta{
    margin: clamp(23.5px, 6.2vw, 47px) auto clamp(30px, 8vw, 60px);
}

.information{
    position: relative;
}

.event-list{
    display: flex;
    flex-direction: column;
    gap: clamp(27.5px,7.3vw,55px);

    border: solid 2px #ff760b;
    border-radius: 26px;

    margin: clamp(36.5px,9.7vw,73px) clamp(16px,4.2vw,32px) clamp(49px,13vw,98px);
    padding: clamp(39.5px,1.05vw,79px) clamp(30px,8vw,60px) clamp(39px,10.4vw,78px);
}

.event-item{
    display: flex;
    gap: clamp(13.5px,3.6vw,27px);
    font-size: clamp(15px,4vw,30px);
}

.event-term{
    width: clamp(81px,21.6vw,162px);
    height: clamp(23px,6.1vw,46px);
    background-color: #ff760b;

    color: #fff;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
}

.event-desc{
    line-height: 1.5em;
}

.join{
    width: 32.4%;
    bottom:  2.5%;
    right: 7%;
}