@charset "UTF-8";

/*主たるブレイクポイント
tab　768px
pc　1024px
*/

/***************
base : ルート
****************/

:root {
    /* ===== フォントファミリー ===== */
    --font-family-base: 'Zen Maru Gothic', sans-serif;

    /* ===== ページタイトル ===== */
    --text_heading_page-title_pc-font-weight: 700;
    /* Bold */
    --text_heading_page-title_pc-font-size: 48px;
    --text_heading_page-title_pc-line-height: 1.3;

    --text_heading_page-title_sp-font-weight: 700;
    --text_heading_page-title_sp-font-size: 32px;
    --text_heading_page-title_sp-line-height: 1.2;

    /* ===== セクションタイトル ===== */
    --text_heading_section-title_pc-font-weight: 700;
    --text_heading_section-title_pc-font-size: 32px;
    --text_heading_section-title_pc-line-height: 1.2;

    --text_heading_section-title_sp-font-weight: 700;
    --text_heading_section-title_sp-font-size: 24px;
    --text_heading_section-title_sp-line-height: 1.5;

    /* ===== サブタイトル ===== */
    --text_heading_section-sub-title_pc-font-weight: 700;
    --text_heading_section-sub-title_pc-font-size: 24px;
    --text_heading_section-sub-title_pc-line-height: 1.5;

    --text_heading_section-sub-title_sp-font-weight: 700;
    --text_heading_section-sub-title_sp-font-size: 18px;
    --text_heading_section-sub-title_sp-line-height: 1.8;

    /* ===== 本文・リード ===== */
    --text_body_lead_pc-font-weight: 700;
    --text_body_lead_pc-font-size: 18px;
    --text_body_lead_pc-line-height: 1.8;

    --text_body_bold-font-weight: 700;
    --text_body_bold-font-size: 16px;
    --text_body_bold-line-height: 1.9;

    --text_body_main_pc-font-weight: 500;
    --text_body_main_pc-font-size: 16px;
    --text_body_main_pc-line-height: 1.8;

    --text_body_main_sp-font-weight: 400;
    --text_body_main_sp-font-size: 16px;
    --text_body_main_sp-line-height: 1.8;

    --text_body_caption-font-weight: 400;
    --text_body_caption-font-size: 14px;
    --text_body_caption-line-height: 1.7;

    --text_body_xs-font-weight: 400;
    --text_body_xs-font-size: 12px;
    --text_body_xs-line-height: 1.5;

    /* ===== ボタン ===== */
    --text_btn-font-weight: 700;
    --text_btn-font-size: 18px;
    --text_btn-line-height: 1.4;
}


/***************
base : 基本設定
****************/
html {
    scroll-behavior: smooth;
    /*ぬるーんと移動*/
}

body {
    margin: 0;
    line-height: 1.7;
    color: #3F2121;
    background-color: #fffdf5;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* spだけ改行*/
.sp-only {
    display: inline;
}

/* pcだけ改行（spではbr非表示） */
.pc-only {
    display: none;
}

/*---min-width:768px---*/
@media (min-width:768px) {

    /* spだけ改行（pcではbr非表示）*/
    .sp-only {
        display: none
    }

    /* pcだけ改行（spではbr非表示）*/
    .pc-only {
        display: inline;
    }
}


/*数字フォントサイズ拡大*/
h3 .text-larger {
    font-size: var(--text_heading_section-title_pc-font-size);
    /**/
}


/***************
base : 共通ボタン
****************/
/* -----緑のボタン----- */
.btn_detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 12px 34px;
    margin-top: 40px;

    font-weight: bold;
    font-size: 16px;
    line-height: 1.9;
    text-decoration: none;
    color: #fff;

    background-color: #3BB273;
    border-radius: 100px;

    border: 1px solid rgb(59, 178, 115, 0);

    box-shadow: 0px 5px 0 #1f6440;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        height 1.0s ease,
        color .25s ease;
}

/*ホバーしたら「浮き上がる」*/
.btn_detail:hover {
    transform: translateY(-3px);
    background-color: #fcfaaf;
    box-shadow: 0px 5px 0 #0f7d02a0;
    color: #47A36F;
    border: 1px solid rgb(59, 178, 115, 1)
}

/*アイコン*/
.btn-icon {
    display: flex;
    flex-direction: column;
}

.btn-icon img {
    display: block;
    width: 30px;
    transition: height .25s ease;
}

.btn-icon img:nth-child(1) {
    height: 12px;
}

.btn-icon img:nth-child(2) {
    height: 8px;
}

/*のびるアイコン*/
.btn_detail:hover .btn-icon img:nth-child(2) {
    height: 12px;
    /* 8px → 12px（＋4pxのびる） */
}

/* -----黄色いボタン----- */
.btn-detail-bright {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 14px 40px;
    margin-top: 40px;

    font-weight: bold;
    font-size: 16px;
    line-height: 1.9;
    text-decoration: none;
    color: #2f6f4e;

    background: #fff48f;
    border-radius: 999px;

    border: 1.5px solid #47A36F;

    box-shadow: 0px 5px 0 rgba(221, 221, 0, 0.627);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        height 1.0s ease,
        color .25s ease;
}

.btn-detail-bright:hover {
    transform: translateY(-3px);
    border: 1.5px solid #47A36F;
    background-color: rgb(255, 240, 30);
    box-shadow: 0px 5px 0 rgba(205, 174, 1, 0.627);
    color: #0b3906;
}

/*のびるアイコン*/
.btn-detail-bright:hover .btn-icon img:nth-child(2) {
    height: 12px;
    /* 8px → 12px（＋4pxのびる） */
}

/*====================
section : ローディング
====================*/
/* 画面中央に固定 */
.loading-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* 縦並び */
    justify-content: center;
    /* 縦中央 */
    align-items: center;
    /* 横中央 */
    background: #fcfbd7;
    z-index: 9999;
}

/* ローディング全体 */
.loading-group {
    position: relative;
    width: 120px;
}

/* 共通 */
.loading-group img {
    display: block;
    width: 100%;
}

/* たね */
.seed {
    position: relative;
    z-index: 2;
}

/* 芽（下からにょき） */
.sprout {
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: bottom center;
    transform: translateY(50%);
    animation: grow 1.6s ease-out 0.6s forwards;
    z-index: 1;
    transform-origin: center bottom;
}

/* きらきら */
.sparkle {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    animation: sparkle 0.4s ease-out 1.8s forwards;
    z-index: 3;
}

/* アニメーション */
@keyframes grow {
    0% {
        transform: translateY(50%) rotate(0deg);
    }

    20% {
        transform: translateY(40%) rotate(-1deg);
    }

    30% {
        transform: translateY(30%) rotate(1deg);
    }

    50% {
        transform: translateY(20%) rotate(-1deg);
    }

    60% {
        transform: translateY(10%) rotate(1deg);
    }

    80% {
        transform: translateY(0%) rotate(-1deg);
    }

    100% {
        transform: translateY(0%) rotate(0deg);
    }
}

@keyframes sparkle {

    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }

    70% {
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

/* フェードアウト用 */
.loading-wrapper {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.loading-wrapper.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/*ローディングテキスト*/
.loading-text {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.2em;
}

.loading-text span {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.6s ease infinite;
}

/* 文字ごとに遅延をずらす */
.loading-text span:nth-child(1) {
    animation-delay: 0s;
}

.loading-text span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-text span:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-text span:nth-child(4) {
    animation-delay: 0.3s;
}

.loading-text span:nth-child(5) {
    animation-delay: 0.4s;
}

.loading-text span:nth-child(6) {
    animation-delay: 0.5s;
}

.loading-text span:nth-child(7) {
    animation-delay: 0.6s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/*///////////////////////////////
page : TOPページここから
///////////////////////////////*/

/*====================
section : FVセクションここから
====================*/

.fv {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 667;
    /* SP用FV画像の比率 */
    overflow: hidden;
    background-color: #fcfbd7;
}



/*背景画像だけフェードさせるため（タイトルは別のフェード）*/
.fv::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/top/fv/fv_bg_sp.png");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-out;
    pointer-events: none;
}

/* 表示後 */
.fv.is-show::before {
    opacity: 1;
}

/*fvの中身の基準*/
.fv_inner {
    position: relative;
    height: 100%;
    z-index: 1;
}

.fv_logo {
    display: none;
}

/*タイトル群*/
.fv_titles {
    position: absolute;
    top: 51%;
    right: 0;
    width: 70%;
    background-image: url("../images/top/fv/fv_title-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}

/*---min-width:768px---*/
@media (min-width:768px) {
    .fv {
        height: 100vh;
        aspect-ratio: auto;
        /* 念のため解除 */
    }

    .fv_inner {
        height: 100vh;
    }
}

/* -----フェード----- */
.fv_logo,
.fv_title,
.fv_copy {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.fv.is-show .fv_logo,
.fv.is-show .fv_title,
.fv.is-show .fv_copy {
    opacity: 1;
    transform: translateY(0);
}

.fv_logo {
    transition-delay: 0.3s;
}

.fv_title {
    transition-delay: 0.6s;
}

.fv_copy {
    transition-delay: 0.9s;
}


/* -----スクロール誘導----- */
.scroll-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.scroll-text {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-shadow: 0 2px 4px rgba(5, 85, 52, 0.8);
}

/* 基本のライン */
.scroll-line {
    position: relative;
    width: 1.5px;
    height: 40px;
    background: rgba(255, 255, 255, 0.5);
    /* うっすら表示させておく */
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(5, 85, 52, 0.5);
}

/* 動くライン */
.scroll-line::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: scrollTrace 1.8s ease infinite;
}

@keyframes scrollTrace {
    0% {
        top: -100%;
    }

    60% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}


/* FVが表示されたら出す */
.fv.is-show .scroll-indicator span {
    animation-play-state: running;
}

/*スクロースしたら消える*/
.scroll-indicator {
    transition: opacity .4s ease;
}

.scroll-indicator.is-hide {
    opacity: 0;
    pointer-events: none;
}

/*>>>>>>>>>>>>>>>　FVセクション PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .fv::before {

        margin: 0 auto;
        background-image: url("../images/top/fv/fv_bg.png");
    }

    /* ロゴ */
    .fv_logo {
        display: block;
        position: absolute;
        width: 204px;
    }

    /* タイトル群（PC） */
    .fv_titles {
        top: 0;
        right: 0;
        width: 38%;
        max-width: 753px;
    }
}

/*<<<<<<<<<<<<<<<min-width:768px<<<<<<<<<<<<<<<*/

/*---------------------
section : FVセクションここまで
---------------------*/

/*---------------------
section : ナビゲーションここまで
---------------------*/

/* ----- SPハンバーガーメニュー ----- */
/* ハンバーガー*/
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    width: 68px;
    height: 66px;
    background: #3BB273;
    border: none;
    border-radius: 0 0 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 1000;
}

.menu-btn span {
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}

body.on .menu-btn span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

body.on .menu-btn span:nth-child(2) {
    opacity: 0;
}

body.on .menu-btn span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/*>>>>>>>>>>>>>>> ハンバーガー PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .menu-btn {
        display: none;
    }

    /*<<<<<<<min-width:768px<<<<<<*/
}


/* ----- SPメニュー ----- */
.sp-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #3BB273;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 20;
}

body.on .sp-nav {
    opacity: 1;
    visibility: visible;
}

.sp-nav-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ロゴ */
.sp-nav-logo {
    /* width: 180px;*/
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

/* メニュー中央配置 */
.sp-nav-list {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}

.sp-nav a {
    display: block;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    padding: 16px 24px;
    border-radius: 999px;
    transition: background-color .2s ease;
}

.sp-nav a:hover,
.sp-nav a:active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* バツボタン */
body.on .menu-btn span {
    background: #fff;
}

body.on .menu-btn span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

body.on .menu-btn span:nth-child(2) {
    opacity: 0;
}

body.on .menu-btn span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* 表示切り替え */
.pc-nav {
    display: none
}

.sp-nav {
    display: block;
}

/*PCナビ非表示*/
.pc-global-nav {
    display: none;
}


/*>>>>>>>>>>>>>>> ナビゲーション・メニュー PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    /* SPメニュー非表示 */

    .sp-nav {
        display: none;
    }

    .pc-global-nav {
        display: block;
        width: 100%;
        height: 150px;
        padding: 34px 0;
        background-color: #33B074;
    }

    /* -----pcナビゲーション----- */
    .pc-nav {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        padding: 16px 0;
    }

    .pc-nav li {
        width: 25%;
        padding: 11px 0;
        text-align: center;
    }

    .pc-nav a {
        position: relative;
        display: inline-block;
        padding: 8px 0;
        color: #fff;
        text-decoration: none;
        transition: transform .2s ease;
    }

    /* 手書き風下線 */
    .pc-nav a::after {
        content: "";
        position: absolute;
        left: -4px;
        bottom: -6px;
        width: calc(100% + 8px);
        height: 3px;
        background: #fff;
        border-radius: 12px;
        opacity: 0;
        transform: rotate(-1deg);
        transition: opacity .2s ease;
    }

    .pc-nav a:hover {
        transform: translateY(-2px);
    }

    .pc-nav a:hover::after {
        opacity: 1;
    }

    /*<<<<<<<<<min-width:768px<<<<<<<<<*/
}

/*---min-width:1200px---*/
@media (min-width:1200px) {
    .pc-nav {
        width: 54%;
    }
}

/*====================
section : ナビゲーションセクションここまで
====================*/

/*　-----spロゴ-----　*/
.sp-top-logo {
    width: 100%;
    background-color: #3BB273;
}

.sp-top-logo_link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

.sp-top-logo_img {
    width: 160px;
    max-width: 80%;
}

/*---min-width:768px---*/
@media (min-width:768px) {
    .sp-top-logo {
        display: none;
    }
}

/*====================
section : Aboutセクションここから
====================*/

.about-section {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

/* -----教室についてのエリア----- */
.about-class-section {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 68px;
}

/*背景画像*/
.about-class-bgi {
    display: none;
}

/*教室 についての中身*/
.about-class-inner {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/*教室について画像*/
.about-class-img {
    width: 640px;
    height: auto;
    filter: drop-shadow(2px 2px 2px rgba(110, 94, 3, 0.5));
}

/*テキストのまとまり*/
.about-section-text-group {
    display: flex;
    gap: 24px;
    flex-direction: column;
}

/*タイトルのまとまり*/
.about-class-title {
    display: flex;
    gap: 8px;
    flex-direction: column;
}


/* タイトル*/
.about-class-title .title {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
    color: #32724E;
}

/*タイトル改行*/
.about-class-title .title span {
    display: block;
}

/*タイトルキャプション*/
.about-class-title .caption {
    font-weight: normal;
    font-size: 14px;
    line-height: 1.7;
}

/*テキスト*/
.about-section-text-group .text {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.9;
}

/*>>>>>>>>>>>>>>>教室について PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    .about-class-section {
        padding-top: 56px;
    }

    .about-class-bgi {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('../images/top/about/about-class-background-img-right.png'), url('../images/top/about/about-class-background-img-left.png');
        background-repeat: no-repeat;
        background-size: 30% auto;
        background-position: left bottom, right bottom;
        z-index: 0;
        pointer-events: none;
    }

    /*<<<<<<<<<min-width:768px<<<<<<<<<*/
}

/* -----セパレーター----- */

.separator {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.separator img {
    width: 100%;
    display: block;
}


/* -----教室の特徴についてのエリア----- */
.about-features-section {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 16px;
    /* separatorと少し重なる */
    padding-bottom: 57px;
    background-color: #fffeed;

}

/*innerの背景画像top*/
.about-features-bg-top,
.about-features-bg-bottom {
    display: none;
}

/*教室の特徴中身*/
.about-features-inner {
    max-width: 1020px;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 40px 24px;
}

/*見出しのまとまり*/
.about-features-heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/*タイトルまとまり*/
.about-features-title {
    width: 100%;
    position: relative;
    padding-top: 75px;
    text-align: center;
    background-image: url(../images/top/about/features-title-img_sp.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

/*タイトル装飾*/
.about-features-title::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 90px;
    background-image: url("../images/top/about/features-title-figure_sp.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/*タイトル*/
.about-features-title h2 {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
    color: #32724E;
}

/*タイトルキャプション*/
.about-features-title .caption {
    font-weight: normal;
    font-size: 14px;
    line-height: 1.7;
}

/*リード文*/
.about-features-heading .text_lead {
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
}

/*---min-width:564px---*/
@media screen and (min-width:564px) {
    .about-features-heading .text_lead {
        text-align: center;
    }
}


/* -----特徴カードエリア-----*/
.features-img {
    width: 100%;
    display: block;
}

/*カードのまとまり*/
.features-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    max-width: 330px;
}

/*各カード*/
.features-card {
    flex: 1;
    /* 横幅均等 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*各カード画像*/
.features-card-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.25));
}

/*各カードリード文*/
.features-card-text .text-lead {
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
    margin-bottom: 16px;

    width: 100%;
    background-image: url(../images/top/about/features-label1.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px 0;

    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.features-card:nth-child(2) .text-lead {
    background-image: url(../images/top/about/features-label2.png);
}

.features-card:nth-child(3) .text-lead {
    background-image: url(../images/top/about/features-label3.png);
}

/*各カード本文*/
.features-card-text .text {
    font-size: var(--text_body_main_sp-font-size);
    font-weight: var(--text_body_main_sp-font-weight);
    line-height: var(--text_body_main_sp-line-height);
    text-align: left;
}

/* ボタン */
.about-features-inner .btn_detail {
    margin-top: 40px;
}


/*>>>>>>>>>>>>>>>教室の特徴 PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .about-features-section {
        background-image: url('../images/top/about/features-bg-img-left.png'), url('../images/top/about/features-bg-img-right.png');
        background-repeat: no-repeat;
        background-position: left top, right top;
    }

    /*innerの背景画像top*/
    .about-features-bg-top,
    .about-features-bg-bottom {
        display: block;
        width: 100%;
        height: auto;
        max-width: 1111px;
        margin: 0 auto;
    }

    /*教室の特徴中身*/
    .about-features-inner {
        background-image: url('../images/top/about/features-inner-bg-middle.png');
        background-repeat: repeat-y;
        background-size: 100%;
        max-width: 1111px;
        padding: 56px 80px 40px;
    }

    /*タイトルまとまり*/
    .about-features-title {
        background-image: url(../images/top/about/features-title-img_pc.png);
    }

    /*spタイトル装飾なし*/
    .about-features-title::before {
        display: none;
    }

    /*カードのまとまり*/
    .features-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 16px;
        margin-top: 40px;
        max-width: none;
    }

    /*<<<<<<<<<min-width:768px<<<<<<<<<*/
}

/*====================
section : Aboutセクションここまで
====================*/


/*====================
section : 理念セクションここから
====================*/

.philosophy-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #fffeed;
    padding: 32px 0;
}

/*理念セクションの中身*/
.philosophy-inner {
    width: 100%;
    max-width: 1339px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;

}

/*見出しのまとまり*/
.philosophy-heading {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/*タイトル*/
.philosophy-title {
    display: flex;
    align-items: end;
    gap: 8px;
    font-family: Kaisei HarunoUmi;
    font-weight: 500;
    line-height: 1.3;
    font-size: 20px;
    color: #3e8c60;
}

/*「アート」文字画像*/
.philosophy-title img {
    display: inline;
    width: 80px;
    height: auto;
}

/*見出し内画像*/
.philosophy_title-visual {
    width: 100%;
    max-width: 680px;
}

.philosophy_title-visual img {
    width: 100%;
}


/*説明と図解のまとまり*/
.philosophy_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/*説明のまとまり*/
.philosophy_text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/*説明リード文*/
.philosophy_lead {
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
}

/*説明本文*/
.philosophy_text {
    font-weight: var(--text_body_bold-font-weight);
    font-size: var(--text_body_bold-font-size);
    line-height: var(--text_body_bold-line-height);
    text-align: center;
}

/*図解*/
.philosophy_figure_sp {
    width: 100%;
    max-width: 539px;
    padding: 16px;
}

.philosophy_figure_pc {
    display: none;
}

.philosophy_figure_sp img {
    width: 100%;
}

/*>>>>>>>>>>>>>>>理念 PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .philosophy-section {
        padding: 132px 0;
    }

    /*「アート」文字画像*/
    .philosophy-title img {
        width: 124px;
    }

    /*見出しサイドの画像*/
    .philosophy-heading ::before,
    .philosophy-heading ::after {
        content: "";
        position: absolute;
        width: 169px;
        height: 151px;
        background-image: url(../images/top/philosophy/philosophy_title-side-img.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .philosophy-heading ::before {
        top: 30%;
        left: 0;
    }

    .philosophy-heading ::after {
        top: 30%;
        right: 0;
        transform: scaleX(-1);
        /* 左右反転 */
    }

    /*図解*/
    .philosophy_figure_sp {
        display: none;
    }

    .philosophy_figure_pc {
        display: block;
    }


    /*見出しのまとまり*/
    .philosophy-heading {
        gap: 32px;
    }

    /*タイトル*/
    .philosophy-title {
        font-size: 32px;
    }

    /*説明と図解のまとまり*/
    .philosophy_content {
        gap: 40px;
    }
}

/*<<<<<<<<<<<<<<<min-width:768px<<<<<<<<<<<<<<<*/

/*====================
section : 理念セクションここまで
====================*/


/*====================
section : クラス紹介セクションここから
====================*/

.classroom-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #3E7D59;
    padding-bottom: 40px;
}

.classroom-inner {
    width: 100%;
    max-width: 1339px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 8px;
}

/*セクション見出しエリア*/
/*セクションタイトルエリア*/
/*セクションタイトル内説明文*/
.classroom-heading,
.classroom-section-title-content,
.classroom-heading-description {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/*セクションタイトルエリア*/
.classroom-section-title-content {
    flex-direction: column-reverse;
}

/*セクションタイトル背景*/
.classroom-section-title {
    border-radius: 50%;
    background-color: #FDF8E2;
    padding: 36px;
}

/*セクションタイトル*/
.classroom-section-title h2 {
    font-weight: var(--text_heading_section-sub-title_sp-font-weight);
    font-size: var(--text_heading_section-sub-title_sp-font-size);
    line-height: var(--text_heading_section-sub-title_sp-line-height);
    text-align: center;
    color: #32724E;
}

/*セクションタイトル画像*/
.classroom-section-title-img {
    width: 30%;
    height: auto;
    margin: 0 auto;
}

.classroom-section-title-img--right {
    display: none;
}

/*セクションタイトル内説明*/
.classroom-heading-description {
    text-align: center;
    color: #fff;
}

/*セクションタイトル内説明のリード文*/
.classroom-lead {
    font-weight: var(--text_heading_section-sub-title_sp-font-weight);
    font-size: var(--text_heading_section-sub-title_sp-font-size);
    line-height: var(--text_heading_page-title_sp-line-height);
}

/*セクションタイトル内説明文*/
.classroom-text {
    font-weight: var(--text_body_main_sp-font-weight);
    font-size: var(--text_body_main_sp-font-size);
    line-height: var(--text_body_main_sp-line-height);
}

/*セクション見出しの下の図解*/
.classroom-figure {
    width: 310px;
    height: auto;
}

.classroom-figure img {
    width: 100%;
}

/*コース全体*/
.course-wrapper {
    width: 100%;
    max-width: 1146px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/*アートコース・イラストコース*/
.classroom-course {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}


/*コース見出しのエリア*/
.classroom-course-heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/*コースタイトル*/
.classroom-course-title {
    position: relative;
    width: 100%;
    max-width: 516px;
    margin: 0 auto;
    padding: 8px 0;
    color: #fff;
    text-align: center;
    border-top: 4px dashed rgba(255, 252, 164, 0.5);
    border-bottom: 4px dashed rgba(255, 252, 164, 0.5);
}

.classroom-course-title h3 {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

/*コースタイトル装飾*/
.classroom-course-title::before,
.classroom-course-title::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 48px;
    background-image: url(../images/top/classroom/classroom-subtitle-bg-img_sp.png);
    background-size: contain;
    background-repeat: repeat-x;
    top: 0;
    filter: drop-shadow(1px 1px 1px #FFFCA4);
}

.classroom-course-title::before {
    left: 0px;
}

.classroom-course-title::after {
    right: 0px;
}


/*コーステキスト*/
.classroom-course-text {
    color: #fff;
}

/*クラスカードレイアウト*/
.classroom-card-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

/*クラスカード*/
.classroom-card {
    width: 100%;
    max-width: 354px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 94px;
    padding-bottom: 50px;
    margin-top: 30px;
    border-radius: 180px;
}

.classroom-card--tane {
    background-color: #dcf1ca;
}

.classroom-card--mebae {
    background-color: #faf9c7;
}

.classroom-card--nobiru {
    background-color: #ffedd4;
}

.classroom-card--illust {
    background-color: #FFF3F9;
}

/*ホバー時クラスカード傾き*/
.classroom-card--tane:has(.btn_detail:hover) {
    transform: rotate(-0.8deg);
}

.classroom-card--mebae:has(.btn_detail:hover) {
    transform: rotate(0.8deg);
}

.classroom-card--nobiru:has(.btn_detail:hover) {
    transform: rotate(-0.8deg);
}

.classroom-card--illust:has(.btn_detail:hover) {
    transform: rotate(0.8deg);
}

/*クラスカードロゴ*/
.classroom-card::before {
    position: absolute;
    content: "";
    width: 124px;
    height: 124px;
    background-image: url(../images/top/classroom/classroom-sec-logo1.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.classroom-card--tane::before {
    background-image: url(../images/top/classroom/classroom-sec-logo1.png);
}

.classroom-card--mebae::before {
    background-image: url(../images/top/classroom/classroom-sec-logo2.png);
}

.classroom-card--nobiru::before {
    background-image: url(../images/top/classroom/classroom-sec-logo3.png);
}

.classroom-card--illust::before {
    background-image: url(../images/top/classroom/classroom-sec-logo4.png);
}


/* ホバー時クラスロゴを動かす */
.classroom-card::before {
    transform: translateX(-50%);
    transition: transform .3s ease;
}

.classroom-card:has(.btn_detail:hover)::before {
    transform: translateX(-50%) translateY(-3px);
}

/*クラスカードタイトル*/
.classroom-card-title {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

/*クラスカートサブタイトル*/
.classroom-card-lead {
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
    color: #32724E;
}

.classroom-card-text {
    min-height: calc(1.8em*3);
}

/*クラスカードテキスト*/
/*クラスカート年齢*/
.classroom-card-text,
.classroom-card-age {
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
}

/*クラスカードのボタン*/
.course-btn {
    margin-top: 0;
}

/*>>>>>>>>>>>>>>>クラス紹介 PC
min-width:1150px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1150px) {

    /*クラスセクションの中身*/
    .classroom-inner {
        gap: 80px;
    }

    /*セクション見出し*/
    .classroom-heading {
        gap: 0;
    }

    /*セクションタイトルまとまり*/
    .classroom-section-title-content {
        max-width: 1024px;
        flex-direction: row;
        padding: 24px;
    }

    /*セクションタイトル背景*/
    .classroom-section-title {
        padding: 50px;
    }

    /*セクションタイトル*/
    .classroom-section-title h2 {
        font-weight: var(--text_heading_section-sub-title_pc-font-weight);
        font-size: var(--text_heading_section-sub-title_pc-font-size);
        line-height: var(--text_heading_section-sub-title_pc-line-height);
    }

    /*セクションタイトル説明*/
    .classroom-lead {
        font-weight: var(--text_heading_section-sub-title_pc-font-weight);
        font-size: var(--text_heading_section-sub-title_pc-font-size);
        line-height: var(--text_heading_page-title_pc-line-height);
    }

    /*セクションタイトル説明文*/
    .classroom-text {
        font-weight: var(--text_body_main_pc-font-weight);
        font-size: var(--text_body_main_pc-font-size);
        line-height: var(--text_body_main_pc-line-height);
    }

    /*セクションタイトル*/
    .classroom-section-title {
        margin-bottom: 56px;
    }

    .classroom-section-title-img--right {
        display: block;
    }

    /*コース全体*/
    .course-wrapper {
        gap: 80px;
    }

    /*アートコースカードまとまり・
    　イラストコースカードまとまり*/
    .classroom-card-group {
        flex-direction: row;
        gap: 32px;
        justify-content: center;
    }

    /*コースタイトル*/
    .classroom-course-title {
        background-image: url(../images/top/classroom/classroom-subtitle-bg-img.png);
        background-size: contain;
        background-position: center center;
        background-repeat: repeat-x;
        padding: 20px 0;
        max-width: 966px;
        border: none;
    }

    /*コース紹介テキスト*/
    .classroom-course-text {

        color: #fff;
    }

    /*クラスカード*/
    .classroom-card {
        flex: 1;
    }
}


/*<<<<<<<<<min-width:1150px<<<<<<<<<*/

/*====================
section : クラス紹介セクションここまで
====================*/



/*====================
section : 料金セクションここから
====================*/

.price-section {
    max-width: 1920px;
    margin: 0 auto;
    padding: 80px 16px 32px 16px;
}

.price-inner {
    position: relative;
    padding-top: 98px;
    margin-top: 110px;
    max-width: 1194px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    padding: 104px 24px 64px 24px;
    text-align: center;
    border: 0.5px solid rgba(0, 0, 0, 0.25);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

/*セクションタイトル*/
.price-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ←ラインの上に乗る*/
    background: #2f6f4e;
    width: 50%;
    max-width: 214px;
    padding: 40px 0;
    border-radius: 50%;
}

/*セクションタイトル */
.price-title span {
    display: inline-block;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}

/*セクションリード文*/
.price-lead {
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
    margin-bottom: 48px;
}

/*  カードレイアウト  */
.price-list {
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.price-list {
    grid-template-columns: 1fr;
}


/*  カード  */
.price-card {
    position: relative;
    background: #fffef2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .08);
}

/* 影のにじみ */
.price-card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 22px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, .08);
    z-index: -1;
}

/* カード内ヘッダー*/
.price-card-heading {
    padding: 24px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
}

.simple .price-card-heading {
    background: #5BC6C1;
}

.option .price-card-heading {
    background: #59B946;
}

.illust .price-card-heading {
    background: #FB937B;
}

/*カードの中身 */
.price-card-body {
    display: flex;
    flex-direction: column;
}

/*ロゴグループ*/
.price-card-class-logo-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.price-card-class-logo {
    width: 30%;
    max-width: 98px;
}

/*カードタイトルキャプション*/
.heading-caption {
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
}

/*カードタイトル*/
.heading-title {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

/*項目*/
.price-card-body>p {
    padding: 12px 24px;
}

/*カードの中のpに下線*/
.simple .price-card-body>p {
    border-bottom: 1px solid #2EB8B1;
}

.option .price-card-body>p {
    border-bottom: 1px solid #2AAE0F;
}

.illust .price-card-body>p {
    border-bottom: 1px solid #F47505;
}

/*.price-card-body>p:nth-child(3) {
    padding-top: 0;
}*/

/* 料金項目 */
.price-fee {
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
}

/*数字だけスタイル変更*/
.price-fee span {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

.simple .price-fee span {
    color: #2EB8B1;
}

.option .price-fee span {
    color: #2AAE0F;
}

.illust .price-fee span {
    color: #F47505;
}

/*材料送付*/
.price-sending {
    min-height: 1.6em;
    font-weight: bold;
}

/*回数*/
.price-count {
    min-height: 1.6em;
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
}

/* ボタン */
.price-btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    margin: 12px auto;
}

.price-btn:hover {
    transform: translateY(-0.5px);
    opacity: .75;
    box-shadow: 1px 1px 0 rgba(1, 10, 0, 0.627);
}

.simple .price-btn {
    background: #2EB8B1;
}

.option .price-btn {
    background: #2AAE0F;
}

.illust .price-btn {
    background: #F47505;
}



/*ボタン*/
.price-main-btn {
    display: inline-block;
    padding: 14px 40px;
    background: #fff48f;
    border-radius: 999px;
    font-weight: bold;
    color: #2f6f4e;
    text-decoration: none;
}

/* 補足項目はTOPページでは非表示 */
.price-section--top .price-note {
    display: none;
}

/*詳細ボタンはTOPページでは非表示*/
.price-section--top .price-btn {
    display: none;
}


/*>>>>>>>>>>>>>>>料金 PC
min-width:959px>>>>>>>>>>>>>>>*/
@media screen and (min-width:959px) {

    /*料金セクション*/
    .price-section {
        padding: 110px 60px;
    }

    /*セクションタイトル*/
    .price-title {
        width: 297px;
        max-width: none;
        padding: 60px 0;
    }

    /*  カードレイアウト  */
    .price-list {
        max-width: none;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        margin-bottom: 48px;
    }

    /*材料送付注意書 3行分の高さ*/
    /*.price-note {
        min-height: calc(1.6em*3);
    }*/
}

/*<<<<<<<<<<min-width:959px<<<<<<<<<*/

/*====================
section : 料金セクションここまで
====================*/



/*====================
section : 体験レッスンセクションここから
====================*/

/*----- 体験レッスンセクション -----*/
.trial-section {
    max-width: 1920px;
    margin: 0 auto;
    padding: 24px 16px 88px 16px;
    background-color: #fff4ca;
}

.trial-inner {
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 88px;
}

/*体験ボタン・案内テキスト*/
.trial-cta {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/*体験ボタン*/
.trial-btn-sp,
.trial-btn-pc {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    padding: 0 16px;
}

.trial-btn-sp:hover,
.trial-btn-pc:hover {
    transform: translateY(-3px);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.35));
    opacity: .8;
}

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

/*案内テキスト*/
.trial-message p {
    text-align: center;
    font-weight: var(--text_body_bold-font-weight);
}

/*　----- 安心セクション-----　*/
.relief-sec {
    max-width: 1020px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 4px 4px 4px rgba(11, 57, 6, .25);
    padding: 40px 0 24px 0;
}

/*フレーム装飾下*/
.relief-sec::before,
.relief-sec::after {
    position: absolute;
    content: "";
    width: 172px;
    height: 160px;
    background-image: url(../images/top/trial/relief-flame-right.png);
    background-size: contain;
}

.relief-sec::before {

    transform: scaleX(-1);
    bottom: -0px;
    left: 0;
}

.relief-sec::after {
    bottom: 0px;
    right: 0;
}

/*テキスト・体験ボタン*/
.relief-content {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/*フレーム装飾上*/
.relief-content::before,
.relief-content::after {
    position: absolute;
    content: "";
    width: 172px;
    height: 160px;
    background-image: url(../images/top/trial/relief-flame-left.png);
    background-size: contain;
}

.relief-content::before {
    top: -38px;
    left: 0;
}

.relief-content::after {
    transform: scaleX(-1);
    top: -38px;
    right: 0;
}

/*ボタン*/
.relief-sec .btn-detail-bright {
    margin-top: 0;
}

/*タイトル*/
.relief-title {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
    color: #3e8c60;
}

/*テキスト*/
.relief-text {
    font-weight: var(--text_body_bold-font-weight);
    text-align: center;
}

/*安心セクション画像*/
.relief-img {
    width: 90%;
}

.relief-img img {
    width: 100%;
    border-radius: 10%;
}




/*>>>>>>>>>>>>>>>体験レッスン PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .relief-sec {
        flex-direction: row;
        gap: 0;
        padding: 32px;
    }

    .relief-content {
        flex: 1 1 0;
    }

    .relief-img {
        flex: 1.5 0 0;
    }

    .relief-sec::before {
        transform: scale(-1, -1);
        top: 0;
    }

    .relief-sec::after {
        bottom: 8px;
    }

    .relief-content::before {
        display: none;
    }

    .relief-content::after {
        display: none;
    }

    .relief-img {
        width: 100%;
        flex: 1;
    }


    .trial-btn-pc {
        display: block;
    }

    .trial-btn-sp {
        display: none;
    }

}

/*<<<<<<<<min-width:768px<<<<<<<<*/

/*====================
section : 体験セクションここまで
====================*/



/*====================
section : FQAセクション
====================*/
.fqa-section {
    max-width: 1920px;
    margin: 88px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fqa-section p {
    font-weight: var(--text_body_bold-font-weight);
}


/*====================
section : フッターここから
====================*/
footer {
    background-color: #33B074;
}

.footer-inner {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 88px;
    padding: 40px 0 80px 0;
}

.footer-logo p {
    color: #fcfef3;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
}

.footer-logo-pc {
    display: none;
}


.footer-logo-sp img {
    width: 128px;
}

.footer-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    color: #fcfef3;
    font-weight: var(--text_body_main_pc-font-weight);
}

footer a:hover {
    opacity: 0.8;
}

small {
    font-size: var(--text_body_xs-font-size);
    font-weight: var(--text_body_xs-font-weight);
    line-height: var(--text_body_xs-line-height);
    color: #fcfef3;
    padding-bottom: 8px;
    display: block;
    text-align: center;

}


/*>>>>>>>>>>>>>>>フッター PC
min-width:800px>>>>>>>>>>>>>>>*/
@media screen and (min-width:800px) {

    .footer-inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 40px 80px;
    }

    .footer-logo-pc {
        display: block;
    }

    .footer-logo-sp {
        display: none;
    }

    .footer-logo-pc img {
        width: 375px;
    }


    .footer-nav ul {
        align-items: flex-start;
    }
}

/*<<<<<<<min-width:800px<<<<<<<*/


/* TOPへ戻るボタン */
.page-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 65px;
    height: 65px;
    z-index: 10;
    /* 中央配置の基準 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 初期は非表示 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* 表示状態 */
.page-top.is-show {
    opacity: 1;
    pointer-events: auto;
}

/* 画像 */
.page-top img {
    width: 100%;
    height: auto;
    display: block;
    animation: spin 4s linear infinite;
    animation-play-state: paused;
    /*hoverはずしたとき一時停止（paused）*/
    opacity: .7;
    /*通常時薄め*/
}

/* ホバー時にアニメーションを再生 */
.page-top:hover img {
    animation-play-state: running;
    /* hoverしたとき再生（running）*/
    opacity: 1;
    /*hover時濃いめ*/
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* TOPテキスト */
.page-top__text {
    position: absolute;
    color: #32724E;
    text-shadow: 1px 1px 1px #ffffff;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.1em;
    pointer-events: none;
    /* クリック邪魔しない */
}



@media (min-width:1200px) {
    .page-top {
        right: 40px;
        bottom: 40px;
        width: 94px;
        height: 94px;
    }

    .page-top__text {
        font-size: 14px;
    }
}


/*====================
section : フッターここまで
====================*/

/*///////////////////////////////
page : TOPページここまで
///////////////////////////////*/





/***************
base : 下層ページヘッダー
****************/
.page-header {
    padding: 16px 16px 16px 16px;
}

.under_logo-pc {
    display: none;
}

.header-cat {
    padding-right: 56px;
}

.header-cat a {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 8px 16px 8px 16px;
    font-size: var(--text_body_main_pc-font-size);
    font-weight: var(--text_body_main_pc-font-weight);
}

/*>>>>>>>>>>>>>>> 下層ページヘッダーPC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .page-header-brand {
        display: block
    }

    .page-header {
        position: relative;
        padding: 16px 20px 60px;
        overflow: hidden;
    }

    .page-header-logo {
        display: flex;
        align-items: center;
    }

    /* ロゴ */
    .under_logo-pc {
        width: 25%;
        max-width: 375px;
        display: block;
    }

    .under_logo-pc img {
        width: 100%;
        height: auto;
    }

    /*ヘッダーCATボタン*/
    .header-cat {
        position: absolute;
        top: 50%;
        right: -60px;
        /* 右に30pxはみ出す */
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 10;
    }

    .header-cat a {
        display: block;
        padding: 12px 80px 12px 24px;
        background: #4aa46a;
        color: #fff;
        text-decoration: none;
        border-radius: 999px 0 0 999px;
        transform: translateX(30px);
        /* デフォルトでは右に隠す */
        transition: transform 0.3s ease;
        font-size: var(--text_body_bold-font-size);
        font-weight: var(--text_body_bold-font-weight);
    }

    .header-cat a:hover {
        transform: translateX(0);
    }

}

/*<<<<<<<<min-width:768px<<<<<<<<*/


/***************
base : 下層ページタイトル
****************/

.page-title-inner {
    max-width: 350px;
    margin: 40px auto 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
    background-image: url(../images/common/under-title-flame.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 68px;
}

.page-title-inner h2 {
    font-size: var(--text_heading_page-title_sp-font-size);
    font-weight: var(--text_heading_page-title_sp-font-weight);
    line-height: var(--text_heading_page-title_sp-line-height);
}

.page-title-en {
    font-size: var(--text_body_bold-font-size);
    font-weight: var(--text_body_bold-font-weight);
    line-height: var(--text_body_bold-line-height);
}

/***************
base : 下層ページナビゲーション
****************/
.pc-nav {
    width: 100%;
    max-width: 1020px;
}

.pc-nav li a {
    font-size: clamp(13px, 1.4vw, 16px);
}





/*///////////////////////////////
page : Aboutページここから
///////////////////////////////*/

#about .pc-nav li:nth-child(2) a::after {
    opacity: 1;
}

#about .pc-nav li:nth-child(2) a:hover {
    transform: none;
}

/*====================
section : コンセプトセクション
====================*/
.about-concept {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    align-items: center;
    background: #fffdf5;
    padding-top: 24px;
    padding-bottom: 40px;
}

.concept-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* 見出し（縦書き中央揃え） */
.concept-heading {
    writing-mode: vertical-rl;
    /* 縦書き */
    display: flex;
    justify-content: center;
    /* 縦方向中央 */
    align-items: center;
    /* 横方向中央 */
    height: 300px;
    /* 高さを固定、縦中央の基準にするため */
    text-align: center;
    /* 文字列の中央揃え */
}

.concept-heading h2 {
    margin: 0;
}

.concept-heading h2 img {
    display: inline-block;
    margin-bottom: 8px;
}

.concept-heading h2 span:first-of-type {
    font-family: Kaisei HarunoUmi;
    font-weight: 500;
    font-size: 18px;
    color: #4aa46a;
}

.concept-heading h2 span:last-of-type {
    display: block;
    font-family: Kaisei HarunoUmi;
    font-weight: 500;
    font-size: 24px;
    color: #4aa46a;
}

/*コンセプト内容*/
.concept-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.concept-text-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.concept-img--heading {
    display: block;
}

.concept-img--text {
    display: none;
}

/* コンセプトリード */
.concept-heading-lead {
    width: 100vw;
    padding: 16px 0;
    background-color: #FFF5D3;
    text-align: center;
}

.concept-heading-lead span {
    display: block;
    font-weight: var(--text_body_main_pc-font-weight);
    font-size: var(--text_body_main_pc-font-size);
    line-height: var(--text_body_main_pc-line-height);
    text-align: center;
}

/*コンセプトテキスト*/
.concept-text ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #1B8F4E;
    font-weight: var(--text_body_bold-font-weight);
    font-size: var(--text_body_bold-font-size);
    line-height: var(--text_body_bold-line-height);
}

/*コンセプトイメージ画像（テキスト横）*/
.concept-img--text {
    display: none;
}

/*コンセプト図解*/
.concept-illustration {
    max-width: 380px;
    margin: 0 auto;
    padding: 0 16px;
}

.concept-illustration-pc {
    display: none;
}

/*コンセプト説明*/
.concept-description {
    padding: 0 16px;
    font-weight: var(--text_body_main_pc-font-weight);
}




/* ===== PC表示（横並びに切り替え） ===== */
@media screen and (min-width: 768px) {

    /*コンセプト図解*/
    .concept-illustration {
        max-width: 932px;
    }

    .concept-illustration-sp {
        display: none;
    }

    .concept-illustration-pc {
        display: block;
    }
}

/*>>>>>>>>>>>>>>> コンセプトPC
min-width:985px>>>>>>>>>>>>>>>*/
@media screen and (min-width:985px) {

    .about-concept {
        padding-top: 80px;
        padding-bottom: 64px;
        gap: 40px;
    }

    .concept-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0;
        border: 8px solid #fff5d3;
        border-radius: 15px;
    }

    .concept-heading {
        width: auto;
        height: 421.433px;
        /* 見出しは縦書き中央揃えを維持 */
        background-color: #fff5d3;
        padding: 0 40px;
    }

    .concept-img--heading {
        display: none;
        /* SP画像非表示 */
    }

    .concept-text-group {
        padding: 24px 40px;
        align-items: center;
        flex-direction: row;
        /* 横並び */
        gap: 32px;
    }

    .concept-heading-lead {
        width: 100%;
    }

    .concept-img--text {
        display: block;
        /* PC画像表示 */
        max-width: 380px;
        flex-shrink: 0;
    }

    .concept-text {
        flex: 1;
    }

    /*<<<<<<<<min-width:985px<<<<<<<<*/
}

/*====================
section : valueセクション
====================*/
.about-value {
    max-width: 1920px;
    margin: 0 auto;
    background: #73c2af;
    padding: 40px 0;
}

.value-inner {
    width: 94%;
    max-width: 640px;
    margin: 0 auto;
    background-color: #FFFAEA;
    padding: 40px;
    border-radius: 30px;
}

.value-title {

    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);

    color: #724d32;
    padding-bottom: 16px;
    text-align: center;
    margin-bottom: 40px;
}

.value-title span {
    display: block;
}

.value-box {
    display: flex;
    flex-direction: column;
    gap: 40px;

    margin: auto;
    padding: 0 16px;
}

.value-text {
    font-weight: var(--text_body_bold-font-weight);
    font-size: var(--text_body_bold-font-size);
    line-height: var(--text_body_bold-line-height);
    color: #724d32;
}

/*---min-width:538px---*/
@media (min-width:538px) {
    .value-text {
        text-align: center;
    }

    .value-title span {
        display: inline;
    }
}

/*====================
section : 会社概要セクション
====================*/
.company {
    max-width: 748px;
    margin: 0 auto;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.company-inner {
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.company-img {
    width: 100%;
    max-width: 340px;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.company-table tr {
    display: block;
    /* SPでは縦並び */
    margin-bottom: 16px;
    /* 項目ごとの間隔 */
    border: 1px solid #cfe9d7;
    border-radius: 8px;
    padding: 8px;
}

.company-table th,
.company-table td {
    display: block;
    /* 上下に並べる */
    width: 100%;
    text-align: left;
    padding: 6px 12px;
}

.company-table th {
    font-weight: bold;
    background-color: #cfe9d7;
    margin-bottom: 4px;
}

/*>>>>>>>>>>>>>>> 会社概要 PC
min-width:640px>>>>>>>>>>>>>>>*/
@media screen and (min-width: 640px) {
    .company-table {
        max-width: 540px;
        margin: 0 auto;
    }

    .company-table tr {
        display: flex;
        /* 横並び */
        flex-direction: row;
        /* th と td 横並び */
        border: none;
        /* ブロック用の枠を解除 */
        margin-bottom: 0;
        border-bottom: 1px solid #cfe9d7;
        border-radius: 0;
        padding: 0;
    }

    .company-table th {
        width: 155px;
        /* 固定幅 */
        text-align: center;
        border-bottom: none;
        background-color: #cfe9d7;
        padding: 12px;
    }

    .company-table td {
        border: 1px solid #cfe9d7;
        padding: 12px;
        text-align: left;
    }
}

/*<<<<<<<<min-width:px<<<<<<<<*/


.about-page-btn {
    margin-bottom: 80px;
}

/*///////////////////////////////
page : Aboutページここまで
///////////////////////////////*/






/*///////////////////////////////
page : コース・料金ページここから
///////////////////////////////*/
#course .pc-nav li:nth-child(3) a::after {
    opacity: 1;
}

#course .pc-nav li:nth-child(3) a:hover {
    transform: none;
}

/* -----ページタイトル----- */
#course .page-title-inner {
    background-position: center 32px;
    /*背景画像の縦位置調整*/
}

/*====================
section : レッスンについてセクション
====================*/
.lesson-about {
    padding: 64px 16px 40px;
}

.lesson-about__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    max-width: 553px;
    margin-left: auto;
    margin-right: auto;
}

.lesson-about__title {
    text-align: center;
    font-size: var(--text_heading_section-title_pc-font-size);
}


/*---min-width:768px---*/
@media (min-width:768px) {

    .lesson-about__heading {
        max-width: none;
    }

    .lesson-about__lead {
        text-align: center;
    }
}

.lesson-about__list {
    max-width: 808px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* 各項目 */
.lesson-about__item {
    width: 370px;
}

/* 画像 */
.lesson-about__image {
    width: 100%;
    height: 171px;
    background-color: #3E8C60;
    border-radius: 999px 999px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

.lesson-about__image img {
    width: 160px;
    height: 100%;
    /* または165pxに合わせる */
    object-fit: contain;
}

/* 項目タイトル */
.lesson-about__item-title {
    background-color: #3E8C60;
    padding-bottom: 8px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    line-height: calc(32px * 1.2);
    /*数字の高さに合わせる*/
}

/* 内容テキスト */
.lesson-about__text {
    padding: 16px 24px;
    font-size: 14px;
    line-height: 1.7;
    border: 2px solid #1B8F4E;
    border-radius: 0 0 16px 16px;
}


/*>>>>>>>>>>>>>>> レッスンについて PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .lesson-about__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 48px 32px;
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
section : コース紹介セクション
====================*/
.course {
    padding: 80px 16px;
}

.course__inner {
    max-width: 881px;
    margin: 0 auto;
}

.course-intro {
    max-width: 576px;
    margin: 0 auto;
}

/*コース・クラス紹介タイトル*/
.course-intro__title {
    text-align: center;
    font-size: var(--text_heading_section-title_pc-font-size);
}

/*コース・クラス紹介説明文*/
.course-intro__description {
    margin-top: 24px;
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
}

/*コース・クラス紹介リード文*/
.course-intro__lead {
    margin-top: 32px;
    background-color: #3E8C60;
    color: #fff;
    text-align: center;
    padding: 12px 24px;
    border-radius: 30px;

}

/* -----コース共通----- */
/*コース紹介ボックス*/
.course-box {
    max-width: 514px;
    margin: 32px auto;
    border: 11px solid #3E8C60;
    border-radius: 60px;
}

/*コース紹介タイトル*/
.course-box__title {
    text-align: center;
    font-size: 24px;
    color: #32724E;
    padding: 16px 0;
}

/* 特徴・おすすめ　エリア*/
.course-box__feature-area {
    background-color: #3E8C60;
    color: #fff;
    padding-bottom: 16px;
}

/*コース特徴文*/
.course-box__feature {
    padding: 24px 16px;
    max-width: 431px;
    margin: 0 auto;
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
}


.course-box--illust .course-box__feature {
    max-width: 268px;
    margin: 0 auto;
}

/*こんな方におすすめ　タ
イトル*/
.course-box__recommend-title {
    width: 138px;
    display: block;
    margin: 16px auto 0;
    font-size: var(--text_heading_section-title_pc-font-size);
    font-weight: var(--text_heading_section-title_pc-font-weight);
    line-height: var(--text_heading_section-title_pc-line-height);

}

/*こんな方におすすめ　エリア*/
.course-box__recommend-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

/*おすすめ項目*/
.course-box__recommend-item {
    max-width: 234px;
    text-align: center;
}

.course-box__recommend-item p {
    font-size: var(--text_body_lead_pc-font-size);
    font-weight: var(--text_body_lead_pc-font-weight);
}

/**おすすめ項目イラスト*/
.course-box__recommend-item img {
    width: 60%;
    margin: 0 auto;
}

/* -----クラス紹介エリア----- */

.course-box__class-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*各クラス*/
.course-box__class-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
}

/*クラスロゴ*/
.course-box__class-item img {
    width: 174px;
    height: auto;
    margin: 0 auto;
}

/*クラスボタン*/
.course-box__class-btn {
    display: inline-block;
    margin-bottom: 16px;
    padding: 16px 56px;
    background-color: #3E8C60;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    color: #3F2121;
    font-weight: var(--text_body_bold-font-weight);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 25);
    transition: transform 0.25s;

}

/*ホバーしたら「浮き上がる」*/
.course-box__class-btn:hover {
    transform: translateY(-3px);
    opacity: .8;
    color: #000;
}

.class-btn-art1 {
    background-color: #B7D83F;
    border: 3px solid #84b401;
    box-shadow: 2px 2px 2px #799125;
}

.class-btn-art2 {
    background-color: #FFD736;
    border: 3px solid #ffbb00;
    box-shadow: 2px 2px 2px #ddb40d;
}

.class-btn-art3 {
    background-color: #FFA666;
    border: 3px solid #f37317;
    box-shadow: 2px 2px 2px #da8549;
}

.class-btn-illust1 {
    background-color: #FFB8B8;
    border: 3px solid #f58c8c;
    box-shadow: 2px 2px 2px #cf8383;
}

/*>>>>>>>>>>>>>>>  コース・クラス紹介PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    /*コース・クラス紹介説明文*/
    .course-intro__description {
        text-align: center;
    }

    /*コース紹介ボックス*/
    .course-box {
        max-width: none;
    }

    /*コース紹介ボックス内 クラスエリア*/
    .course-box__class-area .course-box__class-item:nth-child(2) {
        border-left: 11px solid #3e8c60;
        border-right: 11px solid #3e8c60;
    }

    /* 特徴・おすすめ　エリア*/
    .course-box__recommend {
        padding-top: 84px;
        border-radius: 50%;
        border-top: 3px solid #fff;
        /*曲線*/
    }

    .course-box__recommend__inner {
        margin-top: -84px;
        /*曲線との間隔を詰める*/
    }

    /*こんな方におすすめ　エリア*/
    .course-box__recommend-list {
        flex-direction: row;
        justify-content: center;
    }

    /*クラス　エリア*/
    .course-box__class-area {
        flex-direction: row;
        justify-content: center;
    }

    /**おすすめ項目イラスト*/
    .course-box__recommend-item img {
        width: 70%;
        margin: 0 auto;
    }

    /*各クラス*/
    .course-box__class-item {
        padding-top: 0px;
    }

    /*クラスロゴ*/
    .course-box__class-item img {
        width: 60%;
        max-width: none;
        transform: translateY(16px);
        z-index: -1;
    }

    /*イラストクラス*/
    .course-box__class-area--single {
        justify-content: center;
        /*1クラスなので中央寄せ*/
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
    section : クラス紹介セクション
    ====================*/

/*クラスの紹介　タイトル*/
.classroom__title {
    margin: 0 16px 32px;
    background-color: #3E8C60;
    color: #fff;
    text-align: center;
    padding: 12px 24px;
    border-radius: 30px;
}


/*クラス紹介エリア*/
.class-box {
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 0;
}

.class-box1 {
    background-color: #9dcf6b;
}

.class-box2 {
    background-color: #f7d875;
}

.class-box3 {
    background-color: #F1A96A;
}

.class-box4 {
    background-color: #F0CBCB;
}

.class-box-inner {
    max-width: 590px;
    margin: 0 auto;
    background-color: #fff;

}

/* 各クラスのボックス*/
.classroom-box {
    margin-bottom: 40px;
    padding: 32px 16px;
}

/*たねクラス　エリア*/
.classroom-box--tane {
    background-color: #FBFFEB;
}

.classroom-box__intro {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*各クラス　見出し*/
.classroom-box__heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 0;
}

.classroom-box__heading1 {
    border-top: 8px solid #90C55A;
    border-bottom: 8px solid #90C55A;
}

.classroom-box__heading2 {
    border-top: 8px solid #f7d875;
    border-bottom: 8px solid #f7d875;
}

.classroom-box__heading3 {
    border-top: 8px solid #F1A96A;
    border-bottom: 8px solid #F1A96A;
}

.classroom-box__heading4 {
    border-top: 8px solid #F0CBCB;
    border-bottom: 8px solid #F0CBCB;
}

/*各クラス　タイトル*/
.classroom-box__title-wrap {
    text-align: center;
}

.classroom-box__title {
    font-size: 24px;
    color: #47A36F;
}

.classroom-box__title-en {
    font-size: 14px;
}

/*各クラス　ロゴ*/
.classroom-box__logo {
    width: 120px;
}

.classroom-box__age-illust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 対象年齢 */
.classroom-box__age {
    display: flex;
    justify-content: center;
    font-weight: var(--text_body_bold-font-weight);
}

.classroom-box__age-label {
    background-color: #D7EE9A;
    padding: 8px 24px;
    border-radius: 15px 0 0 15px;
}

.classroom-box__age-value {
    padding: 8px 24px;
    border: 3px solid #D7EE9A;
    border-radius: 0 15px 15px 0;
}

.classroom-box__age-label1 {
    background-color: #D7EE9A;
}

.classroom-box__age-value1 {
    border: 3px solid #D7EE9A;
}

.classroom-box__age-label2 {
    background-color: #FFD446;
}

.classroom-box__age-value2 {
    border: 3px solid #FFD446;
}

.classroom-box__age-label3 {
    background-color: #F8A532;
}

.classroom-box__age-value3 {
    border: 3px solid #F8A532;
}

.classroom-box__age-label4 {
    background-color: #F4A2A2;
}

.classroom-box__age-value4 {
    border: 3px solid #F4A2A2;
}

/*クラス名・対象年齢・イラスト挿絵*/
.classroom-box__intro-flex-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}


/* 各クラス　挿絵イラスト */
.classroom-box__illust {
    width: 218px;
    display: block;
    margin: auto;
}

/* 各クラス　写真 */
.classroom-box__intro-right {
    width: 100%;
    max-width: 526px;
    margin: 0 auto;
}

.classroom-box__intro-right img {
    width: 100%;
    border-radius: 60px;
}

.classroom-box__intro-right1 img {
    border: 8px solid #90C55A;
}

.classroom-box__intro-right2 img {
    border: 8px solid #f7d875;
}

.classroom-box__intro-right3 img {
    border: 8px solid #F1A96A;
}

.classroom-box__intro-right4 img {
    border: 8px solid #F0CBCB;
}


/* 各クラス　説明テキスト*/

.classroom-box__content {
    margin-top: 24px;
    max-width: 356px;
    margin: 24px auto 0;
    padding: 0 16px;
}

.classroom-box__lead {
    color: #32724E;
    border-bottom: 2px solid #90C55A;
    text-align: center;
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

.classroom-box__text {
    margin-top: 16px;
}

button.classroom-box__more {
    display: block;
    margin: 32px auto 0;
    color: #32724E;
}

/* 特徴 */
.classroom-box__feature {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.feature-item__head-img {
    width: 83px;
    height: 43px;
}

/*特徴　各タイトル*/
.feature-item__title {
    position: relative;
    font-size: 18px;
    margin-top: 24px;
}

/*特徴　項目のタイトルアイコン*/
.feature-item__title::before {
    position: absolute;
    content: "";
    width: 112px;
    height: 63px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    top: -72px;
}

.feature-item__title1::before {
    background-image: url(../images/course/feature-item__head-img1.png);
}

.feature-item__title2::before {
    background-image: url(../images/course/feature-item__head-img2.png);
}

.feature-item__title3::before {
    background-image: url(../images/course/feature-item__head-img3.png);
}

/*特徴　内容テキスト*/
.feature-item__text {
    margin-top: 16px;
}

/*特徴　写真*/
.feature-item__image {
    max-width: 420px;
    display: block;
}

/* -----アコーディオン----- */
/* 初期状態：閉じている */
.classroom-box__feature {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding-top: 0;
    padding-bottom: 0;
}

/* 開いた状態 */
.classroom-box__feature.is-open {
    max-height: 3000px;
    /* 十分大きめでOK */
    padding-top: 40px;
    padding-bottom: 40px;
}

/*ボタン回転*/
.classroom-box__more i {
    transition: transform 0.3s ease;
}

.classroom-box__more.is-open i {
    transform: rotate(180deg);
}

/*閉じるボタン*/
.classroom-box__close {
    width: 100%;
    padding: 12px 0;
    background: #f5f5f5;
    font-size: 14px;
    cursor: pointer;
}

/* --　CAT　-- */
.classroom-box__cta {
    text-align: center;
}

.classroom-box__cta .btn_detail {
    margin-top: 0;
}

/*体験レッスンおすすめコメント*/
.classroom-box__cta-lead {
    margin-top: 48px;
}

/*体験レッスンボタン*/
.classroom-box__trial-btn {
    max-width: 400px;
    display: block;
    margin: 16px auto 0;
}

/*>>>>>>>>>>>>>>> クラス紹介エリア PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    /* -- クラスの紹介　セクション --*/

    /*クラスの紹介　タイトル*/
    .classroom__title {
        max-width: 881px;
        margin: 0 auto 32px;
    }

    /*各クラス紹介　エリア*/
    .class-box {

        padding: 88px 0;
    }

    .class-box-edge {
        position: relative;
        padding: 0 80px;
    }

    .class-box-edge::before {
        position: absolute;
        content: "";
        width: 235px;
        height: 162px;
        background-image: url(../images/course/classroom-box__title-wrapper_before_mark.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -80px;
        left: 32px;
        z-index: 1;
    }

    .class-box-edge1::before {
        background-image: url(../images/course/classroom-box__title-wrapper_before_mark1.png);
    }

    .class-box-edge2::before {
        background-image: url(../images/course/classroom-box__title-wrapper_before_mark2.png);
    }

    .class-box-inner {
        position: relative;
        max-width: 938px;
        background-color: #fff;
        border-radius: 60px;
    }


    .classroom-box__heading {
        padding: 4px;
    }

    /*コースの看板*/
    .classroom-box__heading::before {
        content: "";
        position: absolute;
        width: 235px;
        height: 162px;
        background: url(../images/course/classroom-box__heading_before_mark.png) no-repeat center / contain;
        top: -58px;
        left: -92px;
    }

    /*クラス名・対象年齢・イラスト挿絵及び写真のエリア*/
    .classroom-box__intro {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 auto;
        justify-content: space-around;
        align-items: center;
        gap: 24px;
        padding-left: 40px;
    }

    /*クラス名・対象年齢・挿絵*/
    .classroom-box__intro-flex-left {
        flex: 1;
    }

    /*クラス名とクラスロゴ*/
    .classroom-box__heading {
        min-width: 362px;
        /*flex-wrapのため*/
    }

    /*クラス名*/
    .classroom-box__title {
        font-size: var(--text_heading_section-title_pc-font-size);
        font-weight: var(--text_heading_section-title_pc-font-weight);
    }

    /*クラスロゴ*/
    .classroom-box__logo {
        width: 30%;
        max-width: 104px;
    }

    /*挿絵*/
    .classroom-box__illust {
        width: 70%;
        margin: 0 auto;
        max-width: 250px;
        /*flex-wrapのため*/
    }


    /*写真*/
    .classroom-box__intro-right {
        max-width: none;
        min-width: 367px;
        flex: 1.3;
    }

    .classroom-box__lead {
        font-weight: var(--text_heading_section-sub-title_pc-font-weight);
        font-size: var(--text_heading_section-sub-title_pc-font-size);
    }

    .classroom-box__text {
        font-size: var(--text_body_lead_pc-font-size);
        font-weight: var(--text_body_lead_pc-font-weight);
    }

    /*もっとみる*/
    .button.classroom-box__more {
        margin: 32px auto;
    }

    /* 特徴 */
    .classroom-box__feature {
        max-width: 797px;
        gap: 72px;
    }

    .feature-item {
        display: flex;
        flex-flow: row-reverse;
        gap: 24px;
        align-items: center;
    }


    .feature-item__image {
        width: 365px;
        flex-shrink: 0;
    }


    .feature-item__title {
        font-weight: var(--text_heading_section-sub-title_pc-font-weight);
        font-size: var(--text_heading_section-sub-title_pc-font-size);
    }

    .feature-item__text {
        font-weight: var(--text_body_lead_pc-font-weight);
        font-size: var(--text_body_lead_pc-font-size);
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*---min-width:1080px---*/
@media (min-width:1080px) {

    .class-box-edge::before {
        left: calc(50% - 540px);
        /*コースバッジの位置調整*/
    }
}


/*====================
section : レッスン基本情報セクション
====================*/
.lesson-info-inner {
    max-width: 1194px;
    margin: 0 auto;
    padding: 32px 24px 64px 24px;
    margin-top: 72px;
    border-top: 5px double #2f6f4e;
}

.lesson-info__title {
    margin-bottom: 24px;
    color: #2f6f4e;
    font-size: var(--text_heading_section-title_pc-font-size);
}

.title-bg-design {
    text-align: center;
    margin-bottom: 24px;
}

.title-bg-design span {
    display: inline-block;
}

.lesson-info__lead {
    text-align: center;
    margin-bottom: 48px;
    line-height: 1.8;
}

.lesson-info__table {
    max-width: 640px;
    margin: 0 auto;
    background-color: #FBFFEB;
    border-radius: 40px;
    padding: 24px;
    text-align: center;
}

.lesson-info__row {
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px dashed #90C55A;
    gap: 8px;
}

.lesson-info__row:last-child {
    border-bottom: none;
}

.lesson-info__label {
    width: 140px;
    font-weight: bold;
    color: #2f6f4e;
    flex-shrink: 0;
    width: auto;
}


.lesson-info__content {
    line-height: 1.8;
}

.lesson-info__content .note {
    font-size: 0.85em;
    color: #666;
}

/*>>>>>>>>>>>>>>> レッスン基本情報 PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .lesson-info__table {
        text-align: left;
        box-shadow: 4px 4px 4px #dcd7d7;
    }

    .lesson-info__row {
        flex-direction: row;
    }

    .lesson-info__label {
        width: 140px;
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
section : 料金セクションセクション
====================*/
.price-section--course-page {
    padding: 0;
}

.price-section--course-page .price-inner {
    border: none;
    /*topページスタイル打消し*/
    border-top: 5px double #2f6f4e;
    border-radius: 0;
    box-shadow: none;
    padding-top: 32px;
    background-color: #fffdf5;
}

.price-title--course-page {
    font-size: var(--text_heading_section-title_pc-font-size);
    margin-bottom: 24px;
    color: #2f6f4e;
}

/*リード文*/
.price-lead-mini {
    font-size: var(--text_body_lead_pc-font-weight);
}

.simple .price-lead-mini {
    color: #2EB8B1;
}

.option .price-lead-mini {
    color: #2AAE0F;
}

.illust .price-lead-mini {
    color: #F47505;
}

/*説明文*/
.price-explanation {
    font-size: 14px;
    text-align: left;
    min-height: 89.4px;
    display: flex;
    align-items: center;
}


/*補足説明*/
.price__caption-text {
    max-width: 540px;
    margin: 0 auto;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 24px;
}


/* 詳細エリア */
/*コース詳細*/
.price-btn-wrapper {
    background-color: #fff;
    padding-top: 24px;
}

/* 詳細リスト */
.price-detail {
    padding: 24px;
    background: #fff;
    border-top: 1px dashed #ccc;
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
}

.price-detail-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.price-detail-item dt {
    font-weight: bold;
    color: #2f6f4e;
    margin-bottom: 4px;
}

.price-detail-item dd {
    margin-left: 0;
}

/* 入会金・年会費 */
.other-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 32px;
}

.other-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid #D9F6F5;
    align-items: center;
    border-radius: 15px;
}

/*項目*/
.other-price-col1 {
    font-weight: var(--text_body_lead_pc-font-weight);
    font-size: var(--text_body_lead_pc-font-size);
    line-height: var(--text_body_lead_pc-line-height);
    background-color: #D9F6F5;
    border-radius: 15px 0 0 15px;
    padding: 10px 20px;
}

/*金額*/
.other-price-col2 {
    padding: 0 20px;
}

/*数字*/
.other-price-col2 span:first-child {
    font-weight: var(--text_heading_section-sub-title_pc-font-weight);
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    line-height: var(--text_heading_section-sub-title_pc-line-height);
}

.price-section--couse-page .other-price {
    margin-bottom: 0;
    margin-top: 32px;
}

.price-section--couse-page .price-btn {
    display: inline-block;
}

/*>>>>>>>>>>>>>>>  PC
min-width:900px>>>>>>>>>>>>>>>*/
@media screen and (min-width:900px) {

    /*topページのスタイル打消し*/
    .price-section--couse-page .price-list {
        grid-template-columns: 1fr;
        /*900pxでは縦積みのまま*/
        max-width: 400px;
    }

    /*<<<<<<<<min-width:900px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>> 料金セクション PC
min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {

    /*コース・料金ページのみ*/
    .price-section--couse-page .price-list {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        margin-bottom: 48px;
    }

    /*ボタン*/
    .price-section--course-page .price-btn:hover {
        opacity: 1;
        box-shadow: none;
        transform: none;
        /*共通スタイル打消*/
    }

    /* 詳細エリア */
    .price-detail {
        min-height: 263px;
    }

    .other-price {
        flex-direction: row;
        max-width: none;
    }

    /*<<<<<<<<min-width:1200px<<<<<<<<*/
}


/*///////////////////////////////
page : コース・料金ページここまで
///////////////////////////////*/





/*///////////////////////////////
page : 体験ページここから
///////////////////////////////*/
#trial .pc-nav li:nth-child(4) a::after {
    opacity: 1;
}

#trial .pc-nav li:nth-child(4) a:hover {
    transform: none;
}

/*CATボタン*/
#trial .header-cat {
    top: 10%;
}

.hero {
    max-width: 864px;
    margin: 0 auto;
}

/*====================
section : タイトルセクション
====================*/

/* 写真カード */
.hero__inner {
    position: relative;
    background-image: url("../images/trial/trial-title-img1.png");
    background-size: cover;
    background-position: center;
    border-radius: 24px;

    /* 高さを安定させる */
    min-height: 220px;

    display: flex;
    align-items: center;
}

/* テキストブロック */
.hero__text {
    position: absolute;
    z-index: 2;
    background: rgba(255, 204, 102, 0.85);
    border-radius: 0 30px 30px 0;
    /* ← ここが配置の肝 */
    max-width: 70%;
    padding: 8px 16px 8px 8px;
    top: 16px;
    left: 0;
}

/* ラベル */
.hero__label {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    font-weight: var(--text_heading_section-title_sp-font-weight);
    font-size: var(--text_heading_section-title_sp-font-size);
    line-height: var(--text_heading_section-title_sp-line-height);

    text-shadow: 2px 2px 2px rgba(226, 105, 0, .8);
}

/* キャッチ */
.hero__catch {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
    font-weight: 700;
    /* 写真上でも読めるように */
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.8);
    color: #9b6b46;
}

.hero__catch span {
    display: block;
}

/* 下の白帯 */
.hero__lead {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    padding: 8px 14px;
    border-radius: 12px 0 0 12px;
    font-size: 14px;
    bottom: 16px;
    right: 0;
    text-align: left;
}

.hero__lead p:first-child {
    margin-bottom: 8px;
}

.hero__lead p:last-child {
    font-weight: bold;
    color: #e68a00;
}

/* イラスト共通 */
.hero__illust {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(2px 2px 2px rgba(255, 251, 212, 0.8));
    transform-origin: 50% 100%;
    /* 下中央を軸*/
    opacity: 0;
    /* 初期は非表示 */
    transition: opacity 0.8s ease;
}

/*ロード後イラスト*/
.hero.is-show .hero__illust {
    opacity: 1;
    animation: swing 4s ease-in-out infinite;
    /*イラストアニメーション*/
}

.hero.is-show .hero__illust--top {
    animation-delay: 0.2s;
    /*topとbottomでテンポずらす*/
}

.hero.is-show .hero__illust--bottom {
    animation-delay: 0.6s;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/* 右上：少しはみ出す */
.hero__illust--top {
    width: 85px;
    top: -8px;
    right: -4px;
}

/* 左下：カード外にかかる */
.hero__illust--bottom {
    width: 88px;
    left: -12px;
    bottom: -12px;
}

/*>>>>>>>>>>>>>>> 体験ページータイトル PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .hero {
        padding: 40px 0;
    }

    .hero__inner {
        min-height: 360px;
        padding: 48px 64px;
        border-radius: 32px;
    }

    .hero__text {
        max-width: 50%;
        padding: 24px 32px;
    }

    .hero__label {
        font-weight: var(--text_heading_page-title_pc-font-weight);
        font-size: var(--text_heading_page-title_pc-font-size);
        line-height: var(--text_heading_page-title_pc-line-height);
    }

    .hero__catch span {
        display: inline;
    }

    .hero__catch {
        font-weight: var(--text_body_lead_pc-font-weight);
        font-size: var(--text_body_lead_pc-font-size);
        line-height: var(--text_body_lead_pc-line-height);
        text-align: center;
    }

    .hero__lead {
        font-weight: var(--text_heading_section-sub-title_pc-font-weight);
        font-size: var(--text_heading_section-sub-title_pc-font-size);
        line-height: var(--text_heading_section-sub-title_pc-line-height);
    }

    .hero__illust--top {
        width: 160px;
        top: -16px;
        right: 0px;
    }

    .hero__illust--bottom {
        width: 160px;
        left: -24px;
        bottom: -20px;
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
section : 不安ごとセクションここ
====================*/
.intro-worry {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    background: #fff7dd;
}

.intro-worry__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* 導入文 */
.intro-worry__opening {

    font-size: 14px;
    padding: 80px 0;
    background-color: #fdfdfd;
    background: linear-gradient(to bottom, #fff 0%, #FFF2C9 50%, #fff 100%);
    padding: 72px 0;
}

.intro-worry-message-bgc {
    background-color: #fff;
    padding-bottom: 80px;
}

.intro-worry-message {
    position: relative;
    /*spでの基準*/
    width: 97%;
    max-width: 560px;
    margin: 0 auto;
    margin: 0 auto;
    border: 2px solid #FFA433;
    border-radius: 15px;

}

.intro-worry-message::before {
    position: absolute;
    content: "";
    width: 130px;
    height: 130px;
    background-image: url(../images/trial/intro-worry-img-before.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -120px;
    left: 0;

}

.intro-worry-message::after {
    position: absolute;
    content: "";
    width: 130px;
    height: 130px;
    background-image: url(../images/trial/intro-worry-img-after.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -104px;
    right: 0;
    overflow: hidden;
}


/*>>>>>>>>>>>>>>> 体験ページ-イントロ　PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/* 否定文 */
.intro-worry-massage__title {
    font-weight: bold;
    padding: 16px 0;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
}

/* メッセージ */
.intro-worry-message__text {
    font-size: 15px;
    background-color: #FFA433;
    border-radius: 0 0 15px 15px;
    padding: 16px;
    color: #fff;
    text-shadow: 2px 2px 2px #d37f00;
}

.intro-worry-message__text span {
    font-size: var(--text_heading_section-sub-title_pc-font-size);
}

.intro-worry__content {
    padding-bottom: 14vw;
    /*contentとセパレータの距離維持*/
    background-color: #fff;
}

/*---min-width:1920px---*/
@media (min-width:1920px) {
    .intro-worry__content {
        padding-bottom: 224px;
    }
}

/* 問いかけ */
.intro-worry__question {
    position: relative;
    max-width: 522px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 32px 16px;
    background-image: url(../images/trial/intro-worry-question-bg.jpg);
    background-size: cover;

    color: #000;
    font-weight: var(--text_body_bold-font-weight);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, .9);
}

.intro-worry__question ::after {
    position: absolute;
    content: "";
    width: 95px;
    height: 85px;
    background-image: url(../images/trial/intro-worry-question-img.png);
    background-size: contain;
    right: 0;
    bottom: -70px;
    background-repeat: no-repeat;
}

.intro-worry__question p:first-child {
    font-size: var(--text_body_xs-font-size);
}

/* 不安リスト */

.intro-worry__list {
    max-width: 319px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.intro-worry__list li {
    background: #fffcef;
    padding: 12px 40px;
    border-radius: 16px;
    font-size: 14px;
}



.trial-page-separator {
    position: absolute;
    width: 100%;
    bottom: -0;
}

/*>>>>>>>>>>>>>>> 体験ページー不安セクション PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .intro-worry-message-bgc {
        position: relative;
        /*pcでの基準*/
    }

    .intro-worry__inner {
        max-width: 900px;
    }

    .intro-worry-message::before {
        width: 25%;
        height: 129px;
        bottom: -24px;
        left: calc(50% - 230px);
        /**/
        transform: translateX(-50%);
    }

    .intro-worry-message {
        position: static;
    }

    .intro-worry-message::after {
        width: 30%;
        height: 154px;
        top: -50%;
        right: calc(50% - 284px);
        transform: translateX(50%);
    }

    .intro-worry__message {
        font-size: var(--text_body_lead_pc-font-size);
    }

    .intro-worry__question {
        font-size: var(--text_body_lead_pc-font-size);
    }
}

/*<<<<<<<<min-width:768px<<<<<<<<*/


/*====================
section : サポートセクション
====================*/
.support {
    max-width: 1920px;
    margin: 0 auto;
    background-color: #fff0be;
}

.support-inner {
    max-width: 354px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.support-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
}

.support-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}

.support-text {
    text-align: left;
}

/*オブジェクト*/
.support-item:nth-child(1)::before {
    position: absolute;
    content: "";
    width: 115px;
    height: 115px;
    background-image: url(../images/trial/support-obj1.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 103px;
    right: -24px;
    z-index: 2;
}

.support-item:nth-child(2)::before {
    position: absolute;
    content: "";
    width: 115px;
    height: 115px;
    background-image: url(../images/trial/support-obj2.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 93px;
    right: -24px;
    z-index: 2;
}


/*写真*/
.support-img img {
    width: 100%;
    border-radius: 12px;
}


/*>>>>>>>>>>>>>>>  サポート　PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .support {
        padding-bottom: 40px;
    }

    .support-inner {
        max-width: 697px;
    }

    .support-item-wrapper {
        max-width: none;
        padding: 0;
    }

    .support-item {
        flex-direction: row;
        align-items: center;
        margin-bottom: 24px;
    }

    .support-text {
        background-color: rgba(255, 255, 255, .8);
        border-radius: 15px;
        padding: 24px;
        flex: 1.1
    }


    /*テキストsp*/
    .support-item:nth-child(1) .support-text {
        transform: translateX(60px);
        padding-right: 60px;
    }

    .support-item:nth-child(2) .support-text {
        transform: translateX(-60px);
        padding-left: 60px;
    }

    .support-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    /*オブジェクトsp*/
    .support-item:nth-child(1)::before {
        top: 182px;
        right: 216px;
    }

    .support-item:nth-child(2)::before {
        top: 186px;
        left: 210px;
    }

    /*画像sp*/
    .support-img {
        z-index: 1;
        flex: 1
    }

    /*写真*/
    .support-img img {
        margin-bottom: 8px;
    }

    .form {
        max-width: 600px;
        margin: 0 auto;
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
section : 保護者の声セクション
====================*/
.voice {
    background-color: #FFF6F2;
    padding: 90px 16px 64px 16px;
}

.voice-inner {
    position: relative;
    max-width: 757px;
    margin: 0 auto;
    padding: 64px 32px 64px 32px;
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトル丸枠 */
.voice-title {
    position: absolute;
    top: -50px;
    /* 上に重ねる */
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 32px 45px;
    border-radius: 50%;
    background-color: #FFBABA;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
    text-align: center;
    z-index: 10;
    width: 240px;
}

.voice-item h3 {
    font-size: var(--text_body_lead_pc-font-size);
}

/* バブル */
.bubble {
    position: absolute;
    background-color: #FFBABA;
    border-radius: 50%;
}

.bubble1 {
    width: 26px;
    height: 26px;
    bottom: -3px;
    left: -9px;
}

.bubble2 {
    width: 17px;
    height: 17px;
    bottom: -20px;
    left: -30px;
}

/* リスト全体 */
.voice-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    margin-top: 112px;
    /* タイトルとの間隔 */

}

/* アイテム */
.voice-item {
    background: #fff7f7;
    background-image: url(../images/trial/voice-bgi.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;

    border-radius: 50%;
    padding: 40px;
    margin-bottom: 80px;
    width: 333px;
    box-sizing: border-box;

    position: relative;
}

.voice-item4 {
    margin-bottom: 0;
}

.voice-item::before {
    position: absolute;
    content: "";
    width: 124px;
    height: 124px;
    top: -50%;
    left: 5%;
    background-size: contain;
    background-position: center center;
}

.voice-item1::before {
    background-image: url(../images/trial/voice-item-img1.png);
}

.voice-item2::before {
    background-image: url(../images/trial/voice-item-img2.png);
}

.voice-item3::before {
    background-image: url(../images/trial/voice-item-img3.png);
}

.voice-item4::before {
    background-image: url(../images/trial/voice-item-img4.png);
}

/*>>>>>>>>>>>>>>>  保護者の声　PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .voice {
        background-color: #FFF6F2;
        padding: 98px 16px 64px 16px;
    }

    .voice-inner {
        padding: 80px 48px 48px 48px;
    }

    .voice-title {
        width: 285px;
    }

    /* リスト全体pc */
    .voice-list {
        display: flex;
        flex-direction: row;

        justify-content: center;
        gap: 0px;
        margin-top: 64px;
        /* タイトルとの間隔 */
        width: 100%;
    }


    .voice-item {
        width: 100%;
    }

    .voice-content .voice-item:nth-child(2) {
        margin-bottom: 0;
    }

    .voice-content:nth-child(even) {
        margin-top: 110px;
    }


    /*<<<<<<<<min-width:768px<<<<<<<<*/
}


/*====================
section : 体験レッスン概要セクション
====================*/

.trial-lesson-info {
    max-width: 1920px;
    padding: 40px 16px;
    background: #fff7dd;
    text-align: center;
}

.trial-lesson-info__inner {
    max-width: 740px;
    margin: 0 auto;
}


.trial-lesson-info__title {
    background-image: url(../images/trial/trial-lesson-info-title-img.png);
    background-size: 30%;
    background-repeat: repeat-x;
    background-position: center top;
    padding-top: 60px;
    font-size: 20px;
    margin-bottom: 24px;
}

.trial-lesson-info__title h3 {
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 1.0);
}

.trial-lesson-info-message {
    margin-bottom: 40px;
}

.trial-lesson-info-list h4 {
    margin-bottom: 24px;
}

.trial-lesson-info-content {
    max-width: 440px;
    margin: 0 auto;
    padding: 40px;
    background-color: #FBE59D;
    border-radius: 15px;
}

.trial-lesson-info__title {
    position: relative;
}

/*タイトルオブジェクト*/
.trial-lesson-info__title::after {
    position: absolute;
    content: "";
    width: 115px;
    height: 115px;
    background-image: url(../images/trial/trial-title-obj2.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -115px;
    right: 50%;
    transform: translateX(50%);

}

.trial-lesson-info-content__title {
    margin-bottom: 24px;
}

.trial-lesson-info__list {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/*項目*/
.trial-lesson-info__item {
    background: #ffffff;
    border-radius: 16px;

    border: 1.5px solid #ffa433;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.trial-lesson-info__item dt,
.trial-lesson-info__item dd {
    padding: 8px 0;
}

.trial-lesson-info__item dt {
    font-weight: bold;
    color: #ffffff;
    border-radius: 16px 16px 0 0;
    background-color: #ffa433;
    width: 100%;
}

.trial-lesson-info__item dd {
    margin: 0;
    width: 250px;
}

.trial-lesson-info__supplement {
    margin-top: 24px;
}

/*>>>>>>>>>>>>>>> 体験レッスン概要 PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {

    .trial-lesson-info__item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /*タイトルオブジェクト*/
    .trial-lesson-info__title::before {
        position: absolute;
        content: "";
        width: 115px;
        height: 115px;
        background-image: url(../images/trial/trial-title-obj1.png);
        background-size: contain;
        background-repeat: no-repeat;
        bottom: 0;
        left: 0;
    }


    .trial-lesson-info__title::after {
        top: 0;
        right: 0;
        transform: none;
    }

    .trial-lesson-info__item dt,
    .trial-lesson-info__item dd {
        padding: 14px 16px;
    }

    .trial-lesson-info__item dt {
        border-radius: 16px 0 0 16px;
        width: 110px;
    }

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*====================
section : 体験応募フォーム
====================*/

.trial-form {
    text-align: center;
    background-color: #FFC491;
    padding: 48px 16px;
}

.trial-form-inner {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;

    text-align: left;

}

.trial-form__title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 32px;
}

.trial-form__lead {
    margin-top: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    text-align: center;
}

.trial-form__lead strong {
    color: #222;
    font-weight: 600;
}


.trial-form__body {
    max-width: 640px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
}

.form-item {
    margin-bottom: 20px;
}

label,
.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

.form-note {
    font-weight: normal;
    font-size: 13px;
    color: #666;
}

.required {
    color: #d9534f;
    font-size: 12px;
    margin-left: 6px;
}


input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* チェックボックス */
.check {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.check input {
    margin-right: 6px;
}

/* 送信ボタン */
.form-submit {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: #6fbf8a;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
}

.form-submit:hover {
    background: #33b074;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
}

/*///////////////////////////////
page : 体験レッスンページここまで
///////////////////////////////*/




/*///////////////////////////////
page : よくある質問ページここから
///////////////////////////////*/

/*====================
section : FAQセクション
====================*/
#faq .pc-nav li:nth-child(5) a::after {
    opacity: 1;
}

#faq .pc-nav li:nth-child(5) a:hover {
    transform: none;
}

#faq .page-title-inner {
    background-position: center 32px;
    /*背景画像の縦位置調整*/
}

.faq {
    background: #fffaf0;
    padding: 48px 16px;
}

.faq-inner {
    max-width: 720px;
    margin: 0 auto;
}

.section-title {
    font-size: var();
    text-align: center;
    margin-bottom: 16px;
}

.section-lead {
    max-width: 617px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.faq-category {
    font-size: var(--text_heading_section-sub-title_pc-font-size);
    margin: 40px 0 16px;
}

.faq-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.faq-item p {
    margin-top: 12px;
    line-height: 1.7;
    font-size: 0.95rem;
}

.faq-item summary {
    /*ブラウザ標準アコーディオン*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*--　＋マーク　--*/

.faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background-color: #333;
    border-radius: 1px;
}

/* 横線 */
.faq-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* 縦線 */
.faq-icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.faq-item[open] .faq-icon::after {
    opacity: 0;
}

/*====================
section : 問い合わせフォーム
====================*/

.faq-contact {
    margin-top: 64px;
    padding: 32px 24px;
    background: #fff0be;
    border-radius: 16px;
}

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

.faq-contact__lead {
    max-width: 600px;
    margin: 24px auto;
}

/*フォーム*/
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*フォームはデフォルトのフォント*/
.label-text,
.contact-form button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Meiryo", sans-serif;
}

.contact-form label {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/*必須項目*/
.required {
    margin-left: 6px;
    font-size: 0.7rem;
    color: #d64545;
    background: #fdecec;
    padding: 2px 6px;
    border-radius: 6px;
}

.contact-form button {
    margin-top: 16px;
    padding: 12px;
    border-radius: 999px;
    border: none;
    background: #fcd383;
    font-weight: bold;
    cursor: pointer;
}

.contact-form button:hover {
    background: #f6b73c;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 2px #c79530;
}

/*>>>>>>>>>>>>>>>  PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .section-lead {
        text-align: center;
    }

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

    /*<<<<<<<<min-width:768px<<<<<<<<*/
}

/*///////////////////////////////
page : よくある質問ページここまで
///////////////////////////////*/