:root{ --kenchiku: #89e8d7; --kigyo:#ff9059; --shigoto:#46301c; --white:#fff; }

html{ overflow-x: hidden; font-size: 62.5%; }

main{ background: var(--white); }

body{ margin: 0; text-align: center; overflow-x: hidden; }

p,ul,li,h1,h2,h3,h4,h5{ margin: 0; padding: 0; }

p{ line-height: 1.8; }

span,strong{ line-height: inherit; }

li{ list-style: none; }

.pc{ display: none!important; }

.img img{ width: 100%; height: 100%; object-fit: cover; }

section{ position: relative; }

.vdl {
    font-family: 'vdl-penletter', sans-serif;
    font-style: normal;
    font-weight: 500;
}

.flex{ display: flex; }

header{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    width: 100%;
    height: 11.733vw;
    padding: 0 4.267vw;
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    transition: all .3s ease-in-out;
    box-shadow: 0 3px 11px #00000040!important;
    opacity: 0;
    box-sizing: border-box;
    z-index: 10000;
}

header.scrolled,header .menu-open{ opacity: 1; pointer-events: all; }

header .logo { display: flex; align-items: center; gap: 2.133vw; text-decoration: none; }

header .logo p{ margin-top: 0.533vw; font-size: 4.533vw; font-weight: 600; line-height: 1; color: var(--kenchiku); }

header .logo img{ width: 32vw; }
header .logo.top_logo img{ width: 23.467vw; }

header nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    background: var(--shigoto);
    transition: all 0.6s ease-in-out;
}

header nav.panelactive {
    right: 0;
}

header nav ul {
    width: 88.533vw;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
}

header nav li {
    list-style: none;
    text-align: center;
}

header nav li a {
    display: block;
    padding: 3.733vw;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--white);
    border-bottom: 1px solid var(--white);
    text-decoration: none;
}

header nav li.curriculum-menu{ border-bottom: 1px solid var(--white); }

header nav .cv a,
header nav li:nth-last-child(2) a ,
header nav li.curriculum-menu a{
    border-bottom: none;
}

header nav .cv {
    margin-top: 6.4vw;
}

header nav .cv a {
    background: var(--white);
    color: #000;
    border-radius: 16vw;
}

header nav .flex{ justify-content: center; gap: 5.333vw; margin-top: 10.667vw; }

header nav .flex div{ display: flex; align-items: center; gap: 2.133vw; }

header nav .flex a{ padding: 0; border: none; }

header nav .flex .line a:hover{ background: none; }

.openbtn {
    position: relative;
    z-index: 10001;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 6.4vw;
    height: 4.267vw;
}

.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 0.4vw;
    background-color: var(--shigoto);
    width: 100%;
}

.openbtn span:nth-of-type(1) {
    top: 0;
}

.openbtn span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.openbtn span:nth-of-type(3) {
    bottom: 0;
}

.openbtn.active span {
    background: var(--white);
}

.openbtn.active span:nth-of-type(1) {
    top: 0.667vw;
    transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
}

.key{ height: 66.667vw; margin-top: 0; border-bottom-left-radius: 1em; }

.key .image_carousel_tokyo_kv{ position: relative; z-index: 0; overflow: hidden; pointer-events: none; }

.key .image_carousel_tokyo_kv img{ border-bottom-left-radius: 1em; }

.image_carousel_tokyo_kv:not(.slick-initialized) .img:not(:first-child) { display: none !important; }

.image_carousel_tokyo_kv:not(.slick-initialized) .img:first-child { display: block; width: 100%; }

.image_carousel_tokyo_kv.slick-initialized .img { display: block; }

.key .sub{ width: fit-content; padding: 2.667vw 4.267vw 3.2vw 3.2vw; border-bottom-right-radius: 2em; background: var(--kenchiku); color: var(--shigoto); font-size: 3.733vw; font-weight: 600; line-height: 1.4; outline: 2px solid var(--kenchiku); outline-offset: 2px; position: absolute; top: 0; left: 0; }

.key .copy{ width: fit-content; font-size: 4.533vw; font-weight: 600; line-height: 1.8; text-align: right; color: var(--shigoto); position: absolute; bottom: 3.2vw; right: 4.267vw; }

.key .copy::before,.key .copy::after{ content: ''; width: 72vw; height: 6.4vw; background: var(--white); position: absolute; top: 0.667vw; right: -1.067vw; }

.key .copy::after{ width: 46vw; height: 6.4vw; top: 8.533vw; }

.key .copy span{ position: relative; z-index: 10; }

.lead{ padding-top: 10.667vw; text-align: center; }

.lead p{ font-size: 4.533vw; font-weight: 500; line-height: 2.6; }

.lead p strong{ display: inline-block; margin-bottom: 3.2vw; font-size: 8.533vw; line-height: 1.6; text-decoration: underline; text-decoration-color: var(--kenchiku); text-decoration-thickness: 3.2vw; text-underline-offset: -1.6vw; }

section:not(.key,.lead,.footer-btn) { width: 92%; margin-left: 4%; margin-right: 4%; }

section:not(.key,.lead) .copy{ font-size: 5.333vw; font-weight: 600; line-height: 1.6; color: var(--shigoto); text-decoration: underline; text-decoration-color: var(--kenchiku); text-decoration-thickness: 1.6vw; text-underline-offset: -0.8vw; text-decoration-skip-ink: none; }

section:not(.key,.lead) h2{ margin: 3.2vw 0 0; font-size: 7.467vw; line-height: 1; color: var(--shigoto); }

.lead .flex{ justify-content: space-between; }

.lead li{ width: 33vw; margin-top: 3.733vw; }

.feature{ margin: 17.067vw 0 47.467vw; }

.feature ul{ flex-direction: column; gap: 10.667vw; margin-top: 13.867vw; }

.feature li{ width: fit-content; gap: 3.2vw; z-index: 10; }

.feature li:nth-child(2){ margin-left: 3.2vw; }
.feature li:nth-child(3){ margin-left: 10.667vw; }
.feature li:nth-child(4){ margin-left: 25.733vw; padding-bottom: 2.667vw; }
.feature li:nth-child(5){ margin-left: 40.667vw; }
.feature li:nth-child(5) .txt span{ display: block; margin-top: 1.6vw; margin-left: -1.067vw; font-size: 3.733vw; font-weight: 600; color: var(--shigoto); }

.feature li span{ font-size: 17.067vw; line-height: 1; color: var(--kenchiku); }

.feature li div{ padding-top: 3.2vw; text-align: left; }
.feature li,.feature li *{ background: var(--white); }
.feature li:nth-child(5),.feature li:nth-child(5) *{ background: none; }

.feature li div p,.feature li div h3{ color: var(--shigoto); }

.feature li div p{ font-size: 4vw; font-weight: 500; }

.feature li div h3{ font-size: 5.333vw; line-height: 1.4; }

.feature .img{ position: absolute; }
.feature .img.feature01{ width: 56.533vw; height: 40vw; top: 28.8vw; right: -17.067vw; }
.feature .img.feature02{ width: 52.4vw; height: 32.4vw; top: 156.867vw; left: -19.2vw; }
.feature .img.feature03{ width: 38.267vw; height: 22.8vw; bottom: -19.133vw; left: 6.667vw; }
.feature .img img{ position: relative; z-index: 5; }
.feature .img.feature01 img{ border-top-left-radius: 2em; object-position: top; }
.feature .img.feature02 img{ border-bottom-right-radius: 2em; }
.feature .img.feature03 img{ border-top-left-radius: 2em; border-bottom-right-radius: 2em; }

.movie p:not(.copy){ margin: 4.267vw auto 0; }

.movie iframe{ margin-top: 4.267vw; z-index: 10; }

.about{ margin: 37.333vw auto 29.867vw; }

.about .exp{ margin: 5.333vw auto 3.2vw; }

.about ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3.2vw; gap: 1%; }

.about li{ width: 49%; }

.about li p{ font-size: 2.667vw; }

.teacher > p{ margin: 6.4vw auto 9.6vw; }

.teacher .slick-dots{ display: flex; flex-direction: row; gap: 20%; }

.teacher .prev-arrow,.teacher .next-arrow{ position: absolute; display: block; top: 28.8vw; background: var(--kenchiku); border-radius: 50%; width: 32px; height: 32px;  font-size: 16px; line-height: 32px; border: none; color: var(--white); }

.teacher .image_carousel_tokyo{ width: 57.067vw; margin: 0 auto; }

.teacher .slick-slide img{ height: 60.8vw; border-top-right-radius: 2em; border-bottom-left-radius: 2em; }

.teacher .slick-slide h3{ margin: 3.2vw auto 2.133vw; }

.teacher .slick-slide p{ font-size: 3.467vw; }

.arrow_box{ display: block; position: relative; z-index: 1000; }

.prev-arrow{ left: 0%; }
.next-arrow{ right: 0%; }

.prev-arrow span{ padding-right: 5px; }

.curriculum{ margin-top: 23.467vw; }

.tab-wrap{ position: relative; }

.schedule h3{ padding: 0.8vw; margin-top: 6.4vw; background: var(--shigoto); color: var(--white); font-size: 3.2vw; }

.schedule table{
    margin: 0 auto;
    border: 2px solid var(--shigoto);
    border-collapse: collapse;
    background: var(--white);
}

.schedule tr,.schedule th,.schedule td{
    font-size: 3.2vw;
}

.schedule th,.schedule td{
    border: 1px solid var(--shigoto);
}

.schedule tr:first-child th,
.schedule tr:first-child td {
    padding: 1.067vw;
    text-align: center;
    font-weight: bold;
}

.schedule th{ padding: 4px 6px; }

.schedule th span,
.schedule th p{
    display: block;
    text-align: center;
}

.schedule td{
    padding: 3.2vw 2.133vw;
    line-height: 1;
    text-align: left;
}

.schedule td p {
    line-height: 1.8;
}

.schedule tr:first-child th p,
.schedule tr:first-child td p {
    color: var(--shigoto);
    margin: 0 auto;
}

.schedule td span {
    padding: 2px 8px;
    font-size: 2.667vw;
    margin-right: 4px;
}

.schedule td .plan {
    background: var(--shigoto);
    border: 2px solid var(--shigoto);
    color: #fff;
}

.schedule td .strc {
    border: 2px solid var(--shigoto);
    color: var(--shigoto);
}

.schedule td .arc {
    background: var(--kenchiku);
    border: 2px solid var(--kenchiku);
    color: #fff;
}

.schedule td .other {
    color: var(--kenchiku);
    border: 2px solid var(--kenchiku);
}

.schedule .attention{
    border: 2px solid var(--shigoto);
    background: var(--white);
    padding: 3.2vw;
    margin: 0 auto 29.867vw;
    z-index: 10;
    position: relative;
}

.schedule .attention li{
    font-size: 10px;
    line-height: 2;
    text-align: left;
}

.voice > div{ margin-top: 16vw; }

section.voice > div h2{ margin-top: 5.333vw; }

.voice .sketch .img{ border: 1px solid #d8d8d8; }

.voice .img01{ width: 29.867vw; height: 23.467vw; position: relative; }
.voice .img02{ width: 52.267vw; height: 40.533vw; }

.voice .img01::before{ content: ''; width: 38.4vw; height: 10.667vw; background: url(../img/tokyo/arrow.svg) no-repeat; background-size: contain; position: absolute; top: -13.867vw; left: 7.467vw; }

.voice .flex{ margin: 7.467vw auto 3.2vw; align-items: baseline; justify-content: center; gap: 3.2vw; position: relative; }

.voice li{ display: flex; align-items: flex-start; justify-content: space-between; margin-top: 4.267vw; text-align: left; }

.voice li .img img{ object-fit: contain; transform: scaleX(-1); }

.voice li .img{ width: 28%; }
.voice li p{ width: 68%; padding-top: 2.133vw; font-size: 3.467vw; }

section.company h2{ margin: 20.267vw auto 8.533vw; line-height: 1.4; }

section.detail h2{ margin: 26.667vw auto 3.2vw; }

section.detail h2,section.faq h2{ margin-bottom: 5.333vw; } 

.detail div{ width: 92%; margin: 0 auto; padding: 1.067vw 0; position: relative; border-top-right-radius: 2em; border-bottom-left-radius: 2em; border: 2px solid var(--shigoto); background: #fff; }

.detail dl{ display: flex; align-items: center; width: 100%; padding: 3.2vw 0; margin: 0 auto; border-bottom: 1px solid var(--shigoto); }

.detail dt{ width: 25%; }

.detail dd{ width: 75%; padding-right: 2%; font-size: 14px; } 

.detail .attention{ font-size: 12px; margin: 16px 4%;  }

.detail .attention li{ list-style-type: "※"; text-align: left; }

.detail .cancel{ margin: 0 4%; width: 92%; }

.detail .cancel h3{ font-size: 3.733vw;}

.detail .cancel li{ font-size: 3.2vw; text-align: left; }

.detail dl:last-child{ border-bottom: none; }

.detail dt,.detail dd,.faq dt,.faq dd{ line-height: 1; margin: 0;}

.detail dt{ text-align: center; }

.detail dd p{ line-height: 1.5; text-align: left; }

.detail dd a{ color: #1774d1; }

.detail span{ font-size: 0.8em; }

.detail .attention{
    margin: 5.333vw 4% 5.333vw 6%;
    font-size: 3.2vw;
    line-height: 1.75;
}

.detail .cancel .ttl{
    font-size: 4.267vw;
    font-weight: 600;
    margin-bottom: 8px;
}

.detail .cancel li{
    font-size: 3.2vw;
    line-height: 1.75;
    list-style: disc;
}

.access,.faq{ margin-top: 21.333vw; }

section.access h2{ margin-bottom: 4.267vw; }

.access > p{ font-size: 3.733vw; }

.access iframe{ width: 92%; margin: 4.267vw auto; }

.access ul{ display: flex; flex-direction: column; justify-content: center; text-align: left; width: fit-content; margin: 0 auto; }

.access li{ font-size: 3.2vw; line-height: 1.6; margin-top: 1.067vw; }

.faq div{
    margin: 0 auto;
    border: 2px solid var(--shigoto);
    border-bottom-right-radius: 2em;
    background: #fff;
    position: relative;
}
.faq div{ border-bottom-right-radius: 2em; }

.faq dl{ padding: 0 9.6vw 4.267vw 4.267vw; border-top: 1px solid var(--shigoto); margin: 0; }

.faq dt, .faq dd{ margin: 4.267vw 0 0; text-align: left; }

.faq dt h3,.faq dd{ font-size: 3.733vw; line-height: 1.5; }

.faq dt{ position: relative; cursor: pointer; }

.faq dt span{ display: block; margin-bottom: 1.067vw; }

.faq dt::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6.4vw;
    display: block;
    width: 4.267vw;
    height: 2px;
    background: var(--shigoto);
    margin: auto 0;
    cursor: pointer;
}

.faq dt::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4.533vw;
    display: block;
    width: 2px;
    height: 4.267vw;
    background: var(--shigoto);
    margin: auto 0;
    cursor: pointer;
}

.faq .active::after{ content: none; }

.faq dd{ display: none; }

.aboutus{ margin-top: 10.667vw; }

.cta{ padding-bottom: 16vw; }

.cta::before,.cta::after{
    content: '';
    width: 96vw;
    height: 61.867vw;
    background: var(--shigoto);
    position: absolute;
}

.cta::before{ top: -6.933vw; left: 0; border-top-left-radius: 2em; }
.cta::after{ height: 80%; background: var(--kenchiku); top: 11.733vw; right: 0; border-bottom-right-radius: 2em; }

.cta *{ position: relative; z-index: 10; }

section.cta h2{ margin: 29.867vw auto 9.6vw; color: var(--white); }

.cta .flex{ justify-content: center; align-items: center; gap: 3.2vw; }

.cta .flex.btn{ flex-direction: column; }

.cta .flex p *{ display: block; }

.cta .flex p strong{ font-size: 5.333vw; }

.cta .flex p span{ font-size: 4.267vw; }

.cta a{ display: block; width: 82.4vw; padding: 3.2vw 0; margin: 5.333vw auto; background: var(--shigoto); border: 2px solid var(--shigoto); color: var(--white); font-size: 4.8vw; font-weight: 600; line-height: 1.6; letter-spacing: 0.05em; text-decoration: none; border-radius: 11.733vw; transition: all .3s ease-in-out; }

.cta a span{ font-size: 0.8em; } 

.cta a:hover{ background: var(--white); color: var(--shigoto); }

footer{ padding: 1.067vw 0; background: var(--shigoto); }

footer p,footer a{ font-size: 2.667vw; color: var(--white); text-align: center; }

.footer-btn{ padding: 4.267vw 0 2.133vw; background: var(--shigoto); }

.footer-btn > p{ margin-bottom: 3.2vw; font-size: 2.933vw; color: var(--white); }

.footer-btn ul{ justify-content: center; gap: 4.267vw; }

.footer-btn ul li{ display: flex; align-items: center; gap: 1.067vw; line-height: 1; }

.footer-btn ul li a{ color: var(--white); text-decoration: none; font-size: 4.267vw; font-weight: 600; }

/* あしらい */

.lead .flex,.feature01,.feature li:nth-child(3),.about .img,.schedule .tab-content{ position: relative; }

.key::before,.key::after,.lead::before,.lead::after,.lead .flex::after,.feature li:nth-child(3)::before,.feature li:nth-child(3)::after,.feature::before,.feature::after,.about::before,.about::after,.teacher::before,.teacher::after,.curriculum::before,.curriculum::after,.company::before,.company::after {
    content: '';
    position: absolute;
    background: transparent;
    border-width: 3px;
    border-style: solid;
}

/* orange */
.key::before,.lead .flex::before,.lead .flex::after,.feature::after,.about::before,.teacher::after,.company::before{ border-color: var(--kigyo); }
.feature li:nth-child(3)::after,.curriculum::after{ background-color: var(--kigyo); }
/* green */
.key::after,.lead::after,.feature li:nth-child(3)::before,.feature::before,.teacher::before,.curriculum::before{ border-color:var(--kenchiku); }
.lead::before,.about::after,.company::after{ background-color: var(--kenchiku); }
/* circle */
.key::before,.lead::after,.lead .flex::after,.feature::after,.about::before,.teacher::before,.curriculum::before{ border-radius: 50%; }
/* triangle */
.lead::before,.feature li:nth-child(3)::after,.about::after,.curriculum::after,.company::after { 
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,15 90,80 10,80" fill="none" stroke="black" stroke-width="5"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,15 90,80 10,80" fill="none" stroke="black" stroke-width="5"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.key::before{ width: 14.933vw; height: 14.933vw; bottom: -6.4vw; left: 6.4vw; z-index: 10; }
.key::after{ width: 7.467vw; height: 7.467vw; bottom: -9.867vw; left: 3.2vw; z-index: 10; }
.lead::before{ width: 12.4vw; height: 12.4vw; top: 24.8vw; right: -5.333vw; }
.lead::after{ width: 9.6vw; height: 9.6vw; bottom: 20.267vw; left: -6.4vw; }
.lead .flex::before{ width: 6vw; height: 6vw; bottom: 19.2vw; left: 1.333vw; }
.lead .flex::after{ width: 14.933vw; height: 14.933vw; bottom: -7.467vw; right: -5.333vw; }
.feature li:nth-child(3)::before{ width: 7.067vw; height: 7.067vw; bottom: 12.333vw; right: -16vw; }
.feature li:nth-child(3)::after{ width: 8.533vw; height: 8.533vw; bottom: 16.6vw; right: -11.733vw; }
.feature::before{ width: 10.133vw; height: 10.133vw; bottom: -35.733vw; right: 8.533vw; }
.feature::after{ width: 8.533vw; height: 8.533vw; bottom: -29.867vw; right: 14.4vw; }
.about::before{ width: 9.6vw; height: 9.6vw; top: -22.4vw; left: 11.733vw; }
.about::after{ width: 10.667vw; height: 10.667vw; top: -12.8vw; left: 3.2vw; }
.teacher::before{ width: 15.2vw; height: 15.2vw; top: -22.4vw; right: 8vw; }
.teacher::after{ width: 10.667vw; height: 10.667vw; top: -13.067vw; right: 0; }
.curriculum::before{ width: 11.333vw; height: 11.333vw; top: -19.2vw; left: -6.4vw; }
.curriculum::after{ width: 8.533vw; height: 8.533vw; top: -8.533vw; left: 4vw; }
.schedule .tab-content::before{ width: 47.067vw; height: 45.333vw; bottom: -12.8vw; right: -4vw; border-bottom-right-radius: 2em; }
.company::before{ width: 9.067vw; height: 9.067vw; top: -17.067vw; left: -4.8vw; }
.company::after{ width: 13.867vw; height: 13.867vw; top: -8vw; left: 1.067vw; }

/* background */
.feature01::before,.movie::before{ 
    content: '';
    position: absolute;
    background: repeating-linear-gradient(-90deg, var(--kenchiku), var(--kenchiku) 8px, var(--white) 8px, var(--white) 12px);
}
.feature02::before,.about .img::before,.about .img::after,.schedule .tab-content::before{ 
    content: '';
    position: absolute;
    background: var(--kenchiku);
}

/* stripe */
.feature01::before{ width: 42.667vw; height: 14.933vw; right: 0; bottom: -14.933vw; border-bottom-left-radius: 2em; }
.feature02::before{ width: 23.467vw; height: 74.667vw; border-top-right-radius: 2em; top: -8.733vw; left: 14.933vw; }
.movie::before{ width: 58.667vw; height: 42.133vw; top: 60.867vw; left: 37.333vw; border-bottom-left-radius: 2em; }
/* .about .img::before{ width: 36.8vw; height: 45.333vw; top: -4.267vw; left: -3.867vw; border-top-right-radius: 2em; }
.about .img::after{ width: 34.4vw; height: 52.667vw; bottom: -4.267vw; right: -4.533vw; border-bottom-left-radius: 2em; } */

@media (min-width: 979px) { 

    .tel a{ pointer-events: none; }

    .sp{ display: none!important; }
    .pc{ display: block!important; }

    .key{ height: calc(100vh - 72px); padding-top: 72px; }

    .key .image_carousel_tokyo_kv{ height: calc(100vh - 72px); }
    
    .key .sub{ padding: 1.867vw 3.2vw 1.867vw 2.667vw; background: var(--shigoto); color: var(--white); font-size: 2.4vw; outline: 4px solid var(--shigoto);
    outline-offset: 4px; top: 72px; }

    .key .copy{ font-size: 3.2vw; }

    .key .copy::before{ width: 50.5vw; height: 5vw; top: 0.3vw;}

    .key .copy::after{ width: 32.5vw; height: 5vw; top: 6vw; }

    header{ height: 72px; padding: 0 32px; opacity: 1; }

    header .logo{ gap: 12px; }
    header .logo:not(.top_logo){ margin-right: 112px; }
    
    header .logo p{ margin-top: 2px; font-size: 28px; }

    header .logo img{ width: 200px; }
    header .logo.top_logo img{ width: 144px; }

    .openbtn{ width: 40px; height: 32px; right: -10px; }

    .openbtn span{ height: 4px; }

    .openbtn.active span:nth-of-type(1){ top: 16px; }

    header nav{ width: 400px; }

    header nav ul{ width: 320px; top: 52%; }

    header nav li a{ padding: 16px; }

    header nav li a:hover{ background: var(--white); }

    header nav .cv{ margin-top: 40px; }
    
    header nav .cv a{ transition: all .2s ease-in-out; }

    header nav .cv a:hover{ background: var(--kenchiku); }

    header nav .flex{ gap: 40px; margin-top: 40px; }

    header nav .flex div{ gap: 8px; }

    .lead{ padding-top: 80px; }

    .lead p{ font-size: 24px; line-height: 3.6; }

    .lead p strong{ margin-bottom: 16px; font-size: 40px;
    text-decoration-thickness: 12px; text-underline-offset: -6px; }

    section:not(.key,.lead){ width: 1024px; margin: 0 auto; }

    section:not(.key,.lead) .copy { font-size: 24px;
    text-decoration-thickness: 12px; text-underline-offset: -4px; }

    section:not(.key,.lead) h2 { margin: 24px 0 0; font-size: 32px; letter-spacing: 0.02em; }

    section.feature{ margin: 120px auto 256px; }

    .feature ul{ gap: 80px; margin-top: 72px; }

    .feature li{ gap: 24px; }

    .feature li:nth-child(2){ margin-left: 112px; }
    .feature li:nth-child(3){ margin-left: 264px; }
    .feature li:nth-child(4){ margin-top: -20px; margin-left: 488px; padding-bottom: 20px; }
    .feature li:nth-child(5){ margin-left: auto; }

    .feature li span{ font-size: 104px; }

    .feature li div { padding-top: 19px; }

    .feature li div p{ font-size: 18px; letter-spacing: 0.02em; }

    .feature li div h3{ font-size: 28px; letter-spacing: 0.02em; }

    .feature li:nth-child(5) .txt span { margin-top: 8px; margin-left: 0; font-size: 14px; }

    .feature .img.feature01{ width: 480px; height: 300px; top: 176px; right: -120px; }

    .feature01::before { width: 386px; height: 280px;
    right: -80px; bottom: -80px; }

    .feature .img.feature02 { width: 440px; height: 280px;
    top: 730px; left: -96px; }

    .feature02::before { width: 50vw; height: 500px;
    top: -88px; left: -40vw; }

    .feature .img.feature03 { width: 298px; height: 176px; bottom: -80px; left: 288px; }

    .movie p:not(.copy){ margin-top: 32px; }

    .movie iframe{ margin-top: 40px; }

    .movie::before{ width: 500px; height: 480px; top: 380px;
    left: unset; right: -20%; }

    section.about{ margin: 280px auto 224px; }

    .about .exp{ margin: 40px auto; }

    .about h3{ margin: 72px auto 48px; font-size: 24px; }

    .about h4{ margin-bottom: 48px; font-size: 20px; }

    .about li p{ font-size: 12px; }

    .teacher > p{ margin: 32px auto 40px; }

    .teacher .image_carousel_tokyo{ width: 100%; }

    .teacher .slick-slide{ padding: 10px; }

    .teacher .slick-slide img{ height: 240px; }

    .teacher .slick-slide h3{ margin: 24px auto 16px; }

    .teacher .slick-slide p{ font-size: 14px; }

    .teacher .prev-arrow, .teacher .next-arrow{ top: 120px; cursor: pointer; }

    .teacher .prev-arrow{ left: -5%; }
    .teacher .next-arrow{ right: -5%; }

    section.curriculum{ margin-top: 200px; }

    .schedule h3{ padding: 6px 0; margin: 48px auto 0; font-size: 20px; }

    .schedule h3,.schedule table,.schedule .attention{ width: 880px; position: relative; z-index: 10; }

    .schedule tr, .schedule th, .schedule td{ padding: 16px; font-size: 16px; }

    .schedule tr:first-child th, .schedule tr:first-child td{ padding: 0; }
    .schedule tr:first-child th{ height: 46px; }
    .schedule tr:nth-child(2) td strong{ font-weight: 400; margin-right: 16px; }

    .schedule th{ display: flex; align-items: center; justify-content: center; gap: 4px; }

    .schedule td p{ display: inline-block; }

    .schedule td span{ margin-right: 8px; font-size: 12px; }

    .schedule .attention{ padding: 24px; margin-bottom: 216px; border-top: none; box-sizing: border-box; }

    section.company h2{ margin: 200px auto 64px; }

    section.detail h2, section.faq h2{ margin-top: 200px; }

    .voice{ display: grid; column-gap: 64px; }

    .voice .copy{ grid-area: 1/1/2/3; }
    .voice .sketch{ grid-area: 2/1/3/2; width: 448px; }
    .voice .students{ grid-area: 2/2/3/3; }

    .voice > div{ margin-top: 0; }

    section.voice > div h2{ margin-top: 96px; }

    .voice .flex{ margin: 48px auto; }

    .voice .img01 { width: 152px; height: 120px; }
    .voice .img02 { width: 240px; height: 192px; }
    .voice .img01::before { width: 144px; height: 40px;
    top: -56px; left: 96px; }

    .voice li{ align-items: center; margin-top: 40px; }

    .voice li .img{ width: 120px; }

    .voice li p{ width: calc(100% - 136px); padding-top: 0; font-size: 16px; }

    .detail * { box-sizing: border-box; }

    .detail div{ width: 600px; padding: 8px 0; margin-top: 32px; }

    .detail dl{ padding: 16px; }

    .detail .attention{ width: fit-content; padding-left: 16px; margin: 24px auto 64px; font-size: 10px; }

    .detail .cancel .ttl{ font-size: 18px; }

    .detail .cancel ul{ width: fit-content; margin: 0 auto; }

    .detail .cancel li{ font-size: 14px; }

    section.access, section.aboutus{ margin-top: 200px; }

    .access > p{ margin-top: 32px; font-size: 16px; }

    .access iframe{ height: 480px; margin: 40px auto; }

    .access li{ font-size: 16px; }

    .faq div{ width: 800px; margin: 32px auto; }

    .faq dl{ padding: 0 72px 24px 32px; }

    .faq dt h3, .faq dd{ font-size: 16px; }

    .faq dd{ font-size: 16px; }

    .faq dt, .faq dd{ margin-top: 24px; }

    .faq dt::before{ width: 20px; right: -41px; }
    .faq dt::after{ height: 20px;  right: -32px; }

    .cta::before{ top: -56px; }

    section.cta h2{ margin: 224px auto 64px; }

    .cta{ padding-bottom: 120px; }

    .cta .flex{ gap: 16px; }

    .cta .flex:not(.btn){ margin-right: -48px; } 

    .cta .flex.btn{ flex-direction: row; gap: 48px; }

    .cta a{ width: 384px; padding: 16px 0; margin: 24px 0; font-size: 20px; }

    .cta::before, .cta::after{ height: 360px; }

    .cta::after{ height: 304px; top: 64px; }

    footer{ padding: 8px; }

    footer p, footer a{ font-size: 10px; }

    .cta .flex p strong{ font-size: 28px; }

    .cta .flex p span{ font-size: 18px; }

    section.footer-btn{ width: 100vw; padding: 32px 0 16px; }

    .footer-btn > p { margin-bottom: 24px; font-size: 14px; }

    .footer-btn ul{ gap: 32px; }

    .footer-btn ul li{ gap: 8px; }

    .footer-btn ul li a{ font-size: 20px; }

    .key::before, .key::after, .lead::before, .lead::after, .lead .flex::after, .feature li:nth-child(3)::before, .feature li:nth-child(3)::after, .feature::before, .feature::after, .about::before, .about::after, .teacher::before, .teacher::after, .curriculum::before, .curriculum::after, .company::before, .company::after{ border-width: 4px; }

    .lead::before, .feature li:nth-child(3)::after, .about::after, .curriculum::after, .company::after{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,15 90,80 10,80" fill="none" stroke="black" stroke-width="5"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,15 90,80 10,80" fill="none" stroke="black" stroke-width="5"/></svg>');
    }

    .key::before{ width: 64px; height: 64px; bottom: -36px; left: 24px; }
    .key::after{ width: 28px; height: 28px; bottom: -52px; left: 12px; }
    .lead::before{ width: 64px; height: 64px; top: 96px;
    right: -16px; }
    .lead::after{ width: 56px; height: 56px; bottom: 72px; left: -24px; }
    .lead .flex::before{ width: 24px; height: 24px; bottom: 72px; left: 4px; }
    .lead .flex::after{ width: 64px; height: 64px; bottom: -28px; right: -24px; }
    .feature li:nth-child(3)::before{ width: 32px; height: 32px; bottom: -16px; right: -160px; }
    .feature li:nth-child(3)::after{ width: 50px; height: 48px; bottom: 0; right: -144px; }
    .feature::before{ width: 40px; height: 40px; bottom: -120px; right: 32px; }
    .feature::after{ width: 48px; height: 48px; bottom: -152px; right: 56px; }
    .about::before{ width: 48px; height: 48px; top: -104px; left: 56px; }
    .about::after{ width: 50px; height: 48px; top: -40px; left: -8px; }
    .teacher::before{ width: 56px; height: 56px; top: -80px; right: 32px; }
    .teacher::after{ width: 40px; height: 40px; top: -48px; right: 0; }
    .curriculum::before{ width: 40px; height: 40px; top: -72px; left: -24px; }
    .curriculum::after{ width: 50px; height: 48px; top: -32px; left: 24px; }
    .schedule .tab-content::before{ width: 448px; height: 560px; bottom: -48px; right: -16%; }
    .company::before{ width: 32px; height: 32px; top: -64px; left: -24px; }
    .company::after{ width: 56px; height: 56px; top: -32px; left: 4px; }

}