@charset "utf-8";

/*共通設定*/
*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none !important;
    color: inherit;
    transition: 0.2s;
}

a:hover {
    opacity: 0.8;
}

body {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #FCFBF7;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}

img {
    max-width: 100%;
}

.wrap {
    position: relative;
    overflow: hidden;
}

.tb-br,
.sp-br {
    display: none;
}

.pc-br {
    display: block;
}

.parent {
    padding: 120px 5vw;
}

.child {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.btn-arrow {
    max-width: 16px;
    width: 100%;
}

.green {
    color: #00B4BD;
}

.orange {
    color: #FF9B04;
}

.grecaptcha-badge { 
    visibility: hidden;
}
/*終わり*/


/*<header class="header">*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 5vw;
    width: 100%;
    height: 80px;
    background-color: rgba(255,255,255,0.8);
    z-index: 100;
}

.header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.header-logo-wrap {
    width: 50%;
    display: flex;
    align-items: center;
}

.header-logo {
    display: inline-block;
}

.header-logo-img {
    display: block;
    max-width: 120px;
    width: 100%;
}

.header-site-menu {
    position: relative;
    width: 50%;
}

.contact-btn-pc {
    background-color: #FF9B04;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 64px 0 auto;
    max-width: 240px;
    width: 100%;
    text-align: center;
    padding: 4px;
    border-radius: 50vh;
    font-weight: 600;
}

    /*ハンバーガーボタン*/
.hamburger {
    display: block;
    z-index: 999;
    position: absolute;
    top: 40%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
}

.hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: #00B4BD;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.ham-txt {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    font-size: 12px;
    color: #00B4BD;
}

.hamburger span:nth-child(1) {
    top: 10px;
}

.hamburger span:nth-child(2) {
    top: 20px;
}

.hamburger span:nth-child(3) {
    top: 30px;
}

    /* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top: 20px;
    left: 6px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.header-nav-wrap {
    position: fixed;
    z-index: 50;
    top: 80px;
    right: 0;
    background-color: #00B4BD;
    text-align: center;
    transform: translateX(100%);
    transition: all 0.5s;
    width: 40%;
    height: calc(100vh - 80px);
    padding: 40px;
    opacity: 0;
}

.header-nav-in {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 24px;
    font-size: 18px;
}

.nav-logo {
    max-width: 120px;
    width: 100%;
}

.header-nav {
    width: 80%;
}

.header-ul-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.header-ul-01 li {
    margin-bottom: 16px;
    font-weight: 600;
    width: 50%;
}

.header-ul-02 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    font-weight: 600;
}

.header-ul-02 li {
    width: 100%;
}

.header-tel {
    background-color: #00B4BD;
    color: #fff;
    max-width: 320px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    padding: 8px 32px;
    border-radius: 50vh;
}

.header .tel-icon {
    max-width: 16px;
    width: 100%;
}

.contact-btn-sp {
    background-color: #FF9B04;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    padding: 8px 32px;
    border-radius: 50vh;
    font-weight: 600;
}

.instagram-btn {
    display: inline-block;
}

.instagram-icon {
    display: block;
    max-width: 32px;
    width: 100%;
}

    /* このクラスを、jQueryで付与・削除する */
.header-nav-wrap.active {
    transform: translateX(0%);
    opacity: 1;
}
/*終わり*/


/*<section class="fv">*/
.fv {
    padding: 0 5vw;
    position: relative;
    width: 100%;
    margin-top: 80px;
}

.fv-in {
    width: 100%;
}

.fv-txt-wrap {
    font-weight: 800;
    padding: 16px 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    line-height: 1;
}

.fv-txt-01 {
    background-color: #00B4BD;
    color: #fff;
    display: inline-block;
    font-size: 32px;
    padding: 8px 16px;
}

.fv-txt-02 {
    font-size: 32px;
}

.fv-txt-02 .orange {
    font-size: 40px;
}

.fv-txt-02 .green {
    font-size: 40px;
}

.fv-txt-02 small {
    font-size: 24px;
}

.fv-h1 {
    font-size: 56px;
}

.fv-h1 span {
    color: #00B4BD;
}

.fv-video {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    height: 100%;
    object-fit: cover;
}
/*終わり*/


/*<div class="sp-fix-btn-wrap">*/
.sp-fix-btn-wrap {
    display: none;
}
/*終わり*/


/*<section class="concept">*/
.concept-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.concept-l {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.concept-title {
    max-width: 160px;
    width: 100%;
}

.concept-h2 {
    font-size: 40px;
    line-height: 1.3;
}

.concept-h2 .green {
    font-size: 48px;
}

.concept-r {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.concept-img-02 {
    max-width: 320px;
    width: 100%;
}
/*終わり*/


/*<section class="reason">*/
.reason {
    background-color: #E0FBFC;
}

.reason-h2 {
    text-align: center;
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 80px;
}

.reason-h2 span {
    font-size: 40px;
    color: #00B4BD;
}

.reason-con {
    position: relative;
    border-radius: 16px;
    background-color: #fff;
    padding: 64px;
    margin-bottom: 64px;
}

.reason-num {
    position: absolute;
    top: -24px;
    left: 64px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-shadow: 1px 1px 0 #00B4BD, -1px -1px 0 #00B4BD,
              -1px 1px 0 #00B4BD, 1px -1px 0 #00B4BD,
              0px 1px 0 #00B4BD,  0-1px 0 #00B4BD,
              -1px 0 0 #00B4BD, 1px 0 0 #00B4BD;
}

.reason-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.reason-l {
    width: 50%;
}

.reason-h3 {
    font-size: clamp(calc(40px), calc(48 / 1200 * 100vw), 48px);
    color: #00B4BD;
    line-height: 0.8;
}

.reason-h3 span {
    font-size: clamp(calc(48px), calc(56 / 1200 * 100vw), 56px);
}

.reason-h3 small {
    font-weight: 400;
    font-size: 16px;
    color: #AFE1E3;
}

.reason-txt-01 {
    margin-top: 40px;
}

.reason-lesson {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    font-size: 14px;
}

.reason-lesson-01 .reason-lesson-title {
    background-color: #FF9B04;
    color: #fff;
    text-align: center;
    padding: 4px;
}

.reason-lesson-01 .reason-lesson-txt {
    background-color: #FFFEED;
    text-align: center;
    padding: 16px;
}

.reason-lesson-02 .reason-lesson-title {
    background-color: #00B4BD;
    color: #fff;
    text-align: center;
    padding: 4px;
}

.reason-lesson-02 .reason-lesson-txt {
    background-color: #EFFFFF;
    text-align: center;
    padding: 16px;
}

.reason-txt-02 {
    margin-top: 24px;
}

.reason-r {
    width: 50%;
    text-align: center;
}

.reason-img {
    width: 80%;
}

.accordion-flex {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.accordion-flex .accordion-con {
    width: 48%;
}

.accordion-con {
    margin-top: 40px;
}

.accordion-reason-title {
    position: relative;
    background-color: #FFF1BE;
    padding: 16px;
    font-size: clamp(calc(16px), calc(18 / 1200 * 100vw), 18px);
    border-radius: 8px;
    font-weight: 600;
}

.nav-open:hover {
    cursor: pointer;
}

.accordion-reason-title::after {/* 閉じている時 */
    content:"";
    display:block;
    width:8px;
    height:8px;
    border-top: #00B4BD 2px solid;
    border-right: #00B4BD 2px solid;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    position:absolute;
    right: 16px;
    top: calc(50% - 4px);
    transition: 0.2s;
}

.accordion-reason-title.active::after {/* 閉じている時 */
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.accordion-txt-wrap {
    display: none;
    padding: 24px 16px;
}

.accordion-reason-img {
    margin-top: 16px;
}

.accordion-con img {
    width: 60%;
}

    /*02*/
.accordion-con-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.accordion-con-flex-02 {
    margin-top: 40px;
}

.accordion-con-l {
    width: 48%;
}

.accordion-con-title {
    font-weight: 600;
    font-size: 20px;
}

.reason-02-01 {
    margin-top: 24px;
}

.accordion-con-txt {
    margin-top: 24px;
}

.accordion-con-r {
    width: 48%;
}

    /*03*/
.accordion-con-flex-03 {
    margin-top: 40px;
}

.reason-03-01,
.reason-03-02 {
    margin-top: 24px;
}

    /*04*/
.accordion-con-r-04 {
    text-align: center;
}

.accordion-con-flex-04 {
    margin-top: 40px;
}

.reason-04-02 {
    margin-top: 24px;
}

    /*05*/
.accordion-con-l-05 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/*終わり*/


/*<section class="voice">*/
.voice {
    padding: 120px 5vw;
    background-color: #FFFEED;
}

.voice-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.voice-title {
    max-width: 160px;
    width: 100%;
}

.voice-h2 {
    font-size: 32px;
    line-height: 1.3;
}

.voice-h2 span {
    font-size: 40px;
}

.voice-swiper {
    margin-top: 80px;
}

.swiper-slide {
    height: auto;
    background-color: #fff;
    border-radius: 16px;
}

.swiper-box {
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.voice-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    flex-grow: 1;
}

.voice-l {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.voice-icon {
    max-width: 120px;
    width: 100%;
}

.voice-name {
    color: #FF9B04;
    font-size: 14px;
    text-align: center;
}

.voice-r {
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.voice-txt-01 {
    color: #00B4BD;
    font-weight: 600;
    font-size: 24px;
}

.voice-parent {
    position: relative;
    background-color: #EFFFFF;
    border-radius: 16px;
    padding: 32px 16px 24px 16px;
}

.voice-parent-txt {
    position: absolute;
    top: -9px;
    left: 16px;
    color: #00B4BD;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
    height: 40px;
    width: 40px;
}

.swiper-button-prev {
    left: 15%;
}

.swiper-button-next {
    right: 15%;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 40px;
    width: 40px;
}

/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
    background-image: url(../img/primary/swiper_arrow-l.svg);
}

/* 次への矢印カスタマイズ */
.swiper-button-next::after {
    background-image: url(../img/primary/swiper_arrow-r.svg);
}

/* 画像サイズ調整 */
.swiper-slide img {
    height: auto;
    width: 100%;
}
/*終わり*/


/*<section class="change">*/
.change {
    padding: 120px 5vw 280px 5vw;
    background-color: #FEE58A;
}

.change-in {
    background-color: #fff;
    border-radius: 16px;
    padding: 40px 24px;
}

.change-title-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.change-title {
    max-width: 120px;
    width: 100%;
}

.change-h2 {
    font-size: 40px;
    line-height: 1.2;
}

.change-h2 span {
    font-size: 48px;
}

.change-img {
    max-width: 320px;
    width: 100%;
}

.change-wrap {
    margin-top: 40px;
    background-color: #FFFEED;
    border-radius: 8px;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.change-wrap-r {
    flex-direction: row-reverse;
}

.change-flex-l {
    width: 55%;
}

.change-num {
    line-height: 32px;
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #00B4BD;
    font-weight: 600;
    border-radius: 50vh;
}

.change-h3 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.1;
}

.change-h3 span {
    font-size: 32px;
}

.change-h3 small {
    font-weight: 400;
    font-size: 16px;
    color: #AFE1E3;
}

.accordion-change-title {
    position: relative;
    background-color: #FFF1BE;
    padding: 16px;
    font-size: 18px;
    border-radius: 8px;
    font-weight: 600;
}

.accordion-change-title::after {/* 閉じている時 */
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: #00B4BD 2px solid;
    border-right: #00B4BD 2px solid;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    position:absolute;
    right: 16px;
    top: calc(50% - 4px);
    transition: 0.2s;
}

.accordion-change-title.active::after {/* 閉じている時 */
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.accordion-txt-wrap-c {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-txt-bold {
    font-weight: 600;
    font-size: 20px;
    margin-top: 16px;
}

.change-flex-r {
    width: 40%;
    text-align: center;
}

.change-wrap-img {
    width: 100%;
}

.change-btn-wrap {
    text-align: left;
    margin-top: 24px;
}

.change-btn {
    background-color: #FF9B04;
    color: #fff;
    max-width: 260px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding: 8px 24px;
    border-radius: 50vh;
    display: none;
}
/*終わり*/


/*<section class="price">*/
.price {
    padding: 0 5vw;
    height: 320px;
}

.price-in {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    position: relative;
}

.price-txt-wrap {
    position: absolute;
    top: -16%;
    left: 0;
    background-color: #fff;
    max-width: 800px;
    width: 100%;
    padding: 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.price-h2 {
    color: #00B4BD;
    font-size: 40px;
}

.price-btn {
    background-color: #00B4BD;
    color: #fff;
    max-width: 240px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding: 8px 24px;
    border-radius: 50vh;
}

.price-img-wrap {
    position: absolute;
    top: -50%;
    right: 0;
    max-width: 400px;
    width: 100%;
}
/*終わり*/


/*<section class="teacher">*/
.teacher {
    background-color: #00B4BD;
}

.teacher-h2 {
    text-align: center;
}

.teacher-title {
    max-width: 200px;
    width: 100%;
}

.teacher-lead {
    text-align: center;
    margin-top: 24px;
    color: #fff;
}

.teacher-flex {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.teacher-con {
    width: 48%;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.teacher-h3 {
    font-size: 24px;
}

.teacher-h3 small {
    font-size: 18px;
}

.teacher-img {
    width: 100%;
}

.teacher-con-01 {
    background-color: #FFF1BE;
}

.teacher-con-02 {
    background-color: #EFFFFF;
}
/*終わり*/


/*<section class="instagram">*/
.instagram-h2 {
    text-align: center;
}

.instagram-title {
    max-width: 200px;
    width: 100%;
}

.instagram-lead {
    text-align: center;
    margin-top: 24px;
}

.instagram-area {
    margin-top: 80px;
}
/*終わり*/


/*<section class="faq">*/
.faq {
    background-color: #FEE58A;
}

.faq-h2 {
    text-align: center;
}

.faq-title {
    max-width: 120px;
    width: 100%;
}

.faq-wrap {
    margin-top: 64px;
}

.q-txt {
    position: relative;
    background-color: #fff;
    padding: 16px 16px 16px 40px;
    font-weight: 600;
    margin-top: 24px;
}

.nav-open-02:hover {
    cursor: pointer;
}

.q-txt::before {
    content: "Q";
    font-size: 18px;
    line-height: 24px;
    color: #00B4BD;
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.q-txt::after {/* 閉じている時 */
	content: "＋";
    font-size: 18px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #00B4BD;
}

.q-txt.active::after {/* 開いている時 */
	content: "－";
}

.faq-txt {
    position: relative;
    display: none;
    padding: 16px 40px 16px 40px;
    background-color: #fff;
}

.faq-txt::before {
    content: "A";
    font-size: 18px;
    color: #FF9B04;
    font-weight: 800;
    position: absolute;
    top: 14px;
    left: 16px;
}

.a-txt-02 {
    margin-top: 8px;
}

.a-li-title {
    font-weight: 600;
    margin-top: 16px;
}

.a-li-txt-02,
.a-li-txt-05,
.a-li-txt-08 {
    margin-top: 8px;
}
/*終わり*/


/*<section class="contact">*/
.contact-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-title {
    max-width: 160px;
    width: 100%;
}

.contact-h2 {
    font-size: 40px;
}

.contact-btn-flex {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.contact-btn {
    position: relative;
    padding: 16px;
    max-width: 340px;
    width: 100%;
    border-radius: 50vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn-01 {
    background-color: #FF9B04;
}

.contact-btn-02 {
    background-color: #00B4BD;
}

.contact-btn-txt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.mail-icon {
    max-width: 24px;
    width: 100%;
}

.tel-icon {
    max-width: 16px;
    width: 100%;
}

.contact-btn .btn-arrow {
    position: absolute;
    top: calc(50% - 6px);
    right: 16px;
}
/*終わり*/


/*<footer class="footer">*/
.footer {
    padding: 80px 5vw 40px 5vw;
    background-color: #00B4BD;
    color: #fff;
}

.footer-in {
    border-bottom: solid 1px #fff;
    padding-bottom: 80px;
}

.footer-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-l {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.footer-logo {
    max-width: 160px;
    width: 100%;
}

.footer-txt-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-instagram {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-r {
    width: 48%;
}

.footer-r iframe {
    width: 100%;
    height: 320px;
    border-radius: 16px;
}

.copyright {
    padding-top: 80px;
    text-align: center;
    font-size: 12px;
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {

/*共通設定*/
    .pc-br,
    .sp-br {
        display: none;
    }

    .tb-br {
        display: block;
    }
/*終わり*/


/*<header class="header">*/
    .header-logo-wrap {
        width: 40%;
    }

    .header-logo {
        max-width: 100px;
        width: 100%;
    }

    .header-site-menu {
        width: 60%;
    }

    .header-nav-wrap {
        width: 80%;
    }

    .header-nav {
        width: 100%;
    }
/*終わり*/


/*<section class="fv">*/
    .fv-h1 {
        font-size: clamp(calc(48px), calc(56 / 1024 * 100vw), 56px);
    }
/*終わり*/  


/*<section class="concept">*/
    .concept-flex {
        flex-direction: column;
    }

    .concept-l,
    .concept-r {
        width: 100%;
        display: contents;
    }

    .concept-title {
        order: 1;
    }

    .concept-h2 {
        order: 2;
        text-align: center;
        margin-top: 24px;
    }

    .concept-txt {
        order: 4;
        margin-top: 40px;
    }

    .concept-img-01 {
        order: 3;
        margin-top: 40px;
    }

    .concept-img-02 {
        order: 5;
    }
/*終わり*/  


/*<section class="reason">*/
    .reason-con {
        padding: 64px 40px;
    }

    .reason-num {
        left: 40px;
        top: clamp(calc(-24px), calc(-28 / 1024 * 100vw), -28px);
        font-size: clamp(calc(48px), calc(56 / 1024 * 100vw), 56px);
    }

    .reason-flex {
        flex-direction: column;
    }

    .reason-l,
    .reason-r {
        width: 100%;
        display: contents;
    }

    .reason-h3 {
        line-height: 1;
        order: 1;
    }

    .reason-txt-01 {
        order: 3;
    }

    .reason-lesson {
        order: 4;
    }

    .reason-txt-02 {
        order: 5;
    }

    .reason-img {
        margin-top: 48px;
        width: 80%;
        order: 2;
    }

    .accordion-flex .accordion-con {
        width: 100%;
    }

    .accordion-txt-wrap {
        padding: 24px 0;
    }

    /*02*/
    .accordion-con-flex {
        flex-direction: column;
        gap: 40px;
    }

    .accordion-con-l {
        width: 100%;
    }

    .accordion-con-r {
        width: 100%;
    }

    /*03*/
    .reason-03-01 {
        order: 4;
    }

/*終わり*/  


/*<section class="voice">*/
    .swiper-slide {
        height: 100%;
    }

    .voice-flex {
        flex-direction: column;
    }

    .voice-l {
        width: 100%;
        display: contents;
    }

    .voice-r {
        width: 100%;
        display: contents;
    }

    .voice-icon {
        order: 2;
        max-width: clamp(calc(120px), calc(160 / 1024 * 100vw), 160px);
        margin: 40px auto 0 auto;
    }

    .voice-name {
        order: 3;
    }

    .voice-txt-01 {
        order: 1;
    }

    .voice-txt-02 {
        order: 4;
        margin-top: 24px;
    }

    .swiper-button-prev {
        left: 0;
    }

    .swiper-button-next {
        right: 0;
    }
/*終わり*/  


/*<section class="change">*/
    .change {
        padding: 120px 5vw 120px 5vw;
    }

    .change-title-flex {
        flex-direction: column;
        gap: 32px;
    }

    .change-title-l {
        text-align: center;
    }

    .change-wrap {
        flex-direction: column;
    }

    .change-wrap-r {
        flex-direction: column;
    }

    .change-flex-l {
        width: 100%;
        display: contents;
    }

    .change-num {
        order: 1;
    }

    .change-h3 {
        font-size: clamp(calc(32px), calc(40 / 1024 * 100vw), 40px);
        order: 2;
    }

    .change-h3 span {
        font-size: clamp(calc(40px), calc(48 / 1024 * 100vw), 48px);
    }

    .accordion-con {
        order: 4;
    }

    .accordion-change-title {
        font-size: 16px;
    }

    .accordion-txt-bold {
        font-size: clamp(calc(18px), calc(20 / 599 * 100vw), 20px);
    }

    .change-flex-r {
        order: 3;
        width: 100%;
        margin-top: 48px;
    }
/*終わり*/  


/*<section class="price">*/
    .price {
        padding: 40px 5vw;
    }

    .price-txt-wrap {
        position: static;
    }

    .price-img-wrap {
        position: absolute;
        top: -50%;
        right: -5vw;
        width: 40%;
    }
/*終わり*/  


/*<section class="teacher">*/
    .teacher-flex {
        flex-direction: column;
        gap: 40px;
    }

    .teacher-con {
        width: 100%;
    }
/*終わり*/  


/*<section class="contact">*/
    .contact-h2 {
        font-size: clamp(calc(32px), calc(40 / 1024 * 100vw), 40px);
    }

    .contact-btn-flex {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        width: 100%;
    }

    .contact-btn {
        width: 49%;
        max-width: initial;
    }
/*終わり*/  


/*<footer class="footer">*/
    .footer-flex {
        flex-direction: column;
        gap: 48px;
    }

    .footer-l,
    .footer-r {
        width: 100%;
    }
/*終わり*/  
}


/*スマホ*/
@media (max-width: 599px) {

/*共通設定*/
    .pc-br,
    .tb-br {
        display: none;
    }

    .sp-br {
        display: block;
    }

    .parent {
        padding: 64px 5vw;
    }
/*終わり*/


/*<header class="header">*/
    .header {
        height: 64px;
    }

    .contact-btn-pc {
        display: none;
    }

    .ham-txt {
        top: 65%;
    }

    .hamburger span:nth-child(1) {
        top: 7px;
    }

    .hamburger span:nth-child(2) {
        top: 15px;
    }

    .hamburger span:nth-child(3) {
        top: 23px;
    }

        /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        top: 15px;
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 15px;
    }

    .header-nav-wrap {
        top: 64px;
        width: 100%;
        height: calc(100vh - 64px);
        padding: 24px;
    }

    .header-nav-in {
        gap: 40px;
        padding: 16px;
        font-size: 16px;
    }

    .nav-logo {
        max-width: 100px;
    }

    .header-ul-02 {
        gap: 16px;
    }

    .header-tel {
        font-size: 18px;
    }
/*終わり*/


/*<section class="fv">*/
    .fv {
        margin-top: 64px;
        padding: 0 5vw;
    }

    .fv-txt-01 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .fv-txt-02 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .fv-txt-02 .orange {
        font-size: clamp(calc(24px), calc(40 / 599 * 100vw), 40px);
    }

    .fv-txt-02 .green {
        font-size: clamp(calc(24px), calc(40 / 599 * 100vw), 40px);
    }

    .fv-txt-02 small {
        font-size: clamp(calc(20px), calc(24 / 599 * 100vw), 24px);
    }

    .fv-h1 {
        font-size: clamp(calc(32px), calc(56 / 599 * 100vw), 56px);
    }
/*終わり*/


/*<div class="sp-fix-btn-wrap">*/
    .sp-fix-btn-wrap {
        padding: 12px ;
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgba(255,255,255,0.8);
        z-index: 50;
    }

    .sp-fix-btn {
        background-color: #FF9B04;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 8px 32px;
        border-radius: 50vh;
        font-weight: 600;
    }
/*終わり*/


/*<section class="concept">*/
    .concept-title {
        max-width: 120px;
    }

    .concept-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .concept-h2 .green {
        font-size: clamp(calc(32px), calc(40 / 599 * 100vw), 40px);
    }

    .concept-img-01 {
        width: 80%;
    }

    .concept-img-02 {
        max-width: clamp(calc(240px), calc(320 / 599 * 100vw), 320px);
        width: 100%;
    }
/*終わり*/


/*<section class="reason">*/
    .reason-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .reason-h2 span {
        font-size: clamp(calc(32px), calc(40 / 599 * 100vw), 40px);
    }

    .reason-con {
        padding: 48px 16px;
    }

    .reason-num {
        left: 24px;
    }

    .reason-h3 {
        font-size: clamp(calc(30px), calc(32 / 599 * 100vw), 32px);
    }

    .reason-h3 span {
        font-size: clamp(calc(36px), calc(40 / 599 * 100vw), 40px);
    }

    .reason-h3 small {
        font-size: 12px;
    }

    .reason-lesson {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .reason-lesson-01,
    .reason-lesson-02 {
        width: 49%;
    }

    .reason-img {
        width: 100%;
    }

    .accordion-con {
        margin-top: 24px;
    }

    .accordion-con img {
        width: 100%;
    }

    .accordion-reason-title {
        padding: 12px 24px 12px 8px;
    }

    .accordion-reason-title::after {/* 閉じている時 */
        right: 8px;
    }

    .accordion-reason-img {
        width: 100%;
    }

    .accordion-con-title {
        font-size: clamp(calc(18px), calc(20 / 599 * 100vw), 20px);
    }

    /*03*/
    .reason-03-01 {
        margin: 24px auto 0 auto;
    }

    .reason-03-02 {
        width: 100%;
    }

    /*04*/
    .reason-04-02 {
        width: 100%;
    }

    /*05*/
    .reason-05-01,
    .reason-05-02 {
        width: 100%;
    }
/*終わり*/


/*<section class="voice">*/
    .voice-title {
        max-width: 100px;
    }

    .voice-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .voice-h2 span {
        font-size: clamp(calc(32px), calc(40 / 599 * 100vw), 40px);
    }

    .swiper-box {
        padding: 24px 16px;
    }

    .voice-txt-01 {
        font-size: clamp(calc(18px), calc(24 / 599 * 100vw), 24px);
    }

    .swiper-button-prev {
        top: 32%;
    }

    .swiper-button-next {
        top: 32%;
    }
/*終わり*/


/*<section class="change">*/
    .change-in {
        padding: 40px 16px;
    }

    .change-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .change-h2 span {
        font-size: clamp(calc(32px), calc(40 / 599 * 100vw), 40px);
    }

    .change-img {
        max-width: 200px;
    }

    .change-wrap {
        padding: 24px 16px;
    }

    .change-h3 {
        font-size: clamp(calc(30px), calc(32 / 599 * 100vw), 32px);
    }

    .change-h3 small {
        font-size: 12px;
    }

    .change-h3 span {
        font-size: clamp(calc(36px), calc(40 / 599 * 100vw), 40px);
    }

    .accordion-change-title {
        padding: 12px 24px 12px 8px;
    }

    .accordion-change-title::after {/* 閉じている時 */
        right: 8px;
    }
/*終わり*/


/*<section class="price">*/
    .price-txt-wrap {
        position: initial;
    }

    .price-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .price-img-wrap {
        top: -20%;
    }
/*終わり*/


/*<section class="teacher">*/
    .teacher-title {
        max-width: 160px;
    }

    .teacher-con {
        padding: 24px 16px;
    }
/*終わり*/


/*<section class="instagram">*/
    .instagram-title {
        max-width: 160px;
    }

    .instagram-area {
        margin-top: 40px;
    }
/*終わり*/


/*<section class="faq">*/
    .faq-title {
        max-width: 100px;
    }

    .q-txt {
        font-size: 14px;
        padding: 16px 32px;
    }

    .q-txt::before {
        left: 8px;
    }

    .q-txt::after {/* 閉じている時 */
        right: 8px;
    }

    .faq-txt {
        padding: 16px 16px 16px 32px;
    }

    .faq-txt::before {
        left: 8px;
    }
/*終わり*/


/*<section class="contact">*/
    .contact-title {
        max-width: 140px;
    }

    .contact-h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .contact-btn-flex {
        flex-direction: column;
        gap: 24px;
        margin-top: 64px;
    }

    .contact-btn {
        width: 100%;
    }
/*終わり*/


/*<footer class="footer">*/
    .footer {
        padding: 64px 5vw 80px 5vw;
    }

    .footer-in {
        padding-bottom: 40px;
    }

    .copyright {
        padding-top: 40px;
    }
/*終わり*/

}