@charset "UTF-8";

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

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

:root {
    /* ===== フォントファミリー ===== */
    --font-family--base: 'Zen Maru Gothic', sans-serif;
    --font-family--decoration: 'Kaisei HarunoUmi', sans-serif;
    --font-family--heading: 'Kaisei Opti', sans-serif;
    /*↑navとセクションタイトル用*/

    /* ===== ページタイトルの変数 SP===== */
    --font_page-title_font-weight: 700;
    --font_page-title_font-size: 3.2rem;
    --font_page-title_line-height: 1.2;


    /* ===== セクションタイトルの変数 SP===== */
    --font_section-title_font-weight: 700;
    --font_section-title_font-size: 2.9rem;
    --font_section-title_line-height: 1.5;


    /* ===== セクションサブタイトルの変数　SP ===== */
    --font_section-sub-title_font-weight: 700;
    --font_section-sub-title_font-size: 2.2rem;
    --font_section-sub-title_line-height: 1.8;


    /* ===== リードの変数 =SP==== */
    --font_lead_font-weight: 700;
    --font_lead_font-size: 1.7rem;
    --font_lead_line-height: 1.9;

    /* ===== 本文の変数 SP===== */
    --font_main_font-weight: 500;
    --font_main_font-size: 1.6rem;
    --font_main_line-height: 1.8;


    /* ===== キャプションの変数 ===== */
    --font_caption_font-weight: 400;
    --font_caption_font-size: 1.4rem;
    --font_caption_line-height: 1.7;

    /* ===== 補足文の変数 ===== */
    --font_xs_font-weight: 500;
    --font_xs_font-size: 1.2rem;
    --font_xs_line-height: 1.6;

    /* ===== ボタンの変数 ===== */
    --font_btn_font-weight: 700;
    --font_btn_font-size: 1.6rem;
    --font_btn_line-height: 1.9;



    /* ===== 基本余白スケール SP===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 56px;
    --space-8: 64px;

    /* ===== 基本余白スケールを使用した変数の設定 SP===== */

    /* ===== セクション周りの変数 ===== */
    --spacing_section-bottom: var(--space-8);

    /* ===== タイトル周りの変数 ===== */
    --spacing_title-to-caption: var(--space-2);
    /*--spacing-title-to-lead: var(--space-3);*/
    --spacing_title-to-lead: var(--space-5);
    /* ===== テキスト周りの変数 ===== */
    --spacing_lead-to-text: var(--space-4);
    --spacing_text-to-text: var(--space-3);
    /* ===== ボタン周りの変数 ===== */
    --spacing_button-top: var(--space-5);
    /* ===== img周りの変数 ===== */
    --spacing_img: var(--space-7);
}


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

    /*PC用変数の基本設定*/
    :root {
        /* ===== ページタイトルの変数 PC===== */
        --font_page-title_font-size: 4.8rem;
        --font_page-title_line-height: 1.3;

        /* ===== セクションタイトルの変数 PC===== */
        --font_section-title_font-size: 3.2rem;
        --font_section-title_line-height: 1.2;

        /* ===== セクションサブタイトルの変数 PC===== */
        --font_section-sub-title_font-size: 2.4rem;
        --font_section-sub-title_line-height: 1.5;

        /* ===== リードの変数 PC===== */
        --font_lead_font-size: 1.7rem;
        --font_lead_line-height: 1.9;

        /* ===== 本文の変数 PC===== */
        --font_main_font-weight: 700;
        --font_main_font-size: 1.6rem;
        --font_main_line-height: 1.8;

        /* ===== 基本余白スケールを使用した変数の設定 PC===== */
        /* ===== 基本余白スケール　PC===== */
        --space-1: 8px;
        --space-2: 16px;
        --space-3: 24px;
        --space-4: 32px;
        --space-5: 40px;
        --space-6: 56px;
        --space-7: 64px;
        --space-8: 80px;

        /* ===== セクション周りの変数　PC===== */
        --spacing_section-bottom: var(--space-8);

        /* ===== タイトル周りの変数　PC===== */
        --spacing_title-to-caption: var(--space-2);
        /*--spacing-title-to-lead: var(--space-3);*/
        --spacing_title-to-lead: var(--space-5);

        /* ===== テキスト周りの変数　PC===== */
        --spacing_lead-to-text: var(--space-4);
        --spacing_text-to-text: var(--space-3);

        /* ===== ボタン周りの変数　PC===== */
        --spacing_button-top: var(--space-5);

        /* ===== img周りの変数　PC===== */
        --spacing_img: var(--space-7);
    }

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


/*=========変数を使用したフォント設定==========*/
/* ===== ページタイトル ===== */
.page-title {
    font-size: var(--font_page-title_font-size);
    font-weight: var(--font_page-title_font-weight);
    line-height: var(--font_page-title_line-height);
}

/* ===== セクションタイトル ===== */
.section-title {
    font-family: var(--font-family--heading);
    font-size: var(--font_section-title_font-size);
    font-weight: var(--font_section-title_font-weight);
    line-height: var(--font_section-title_line-height);
    letter-spacing: 0.08em;
}

/* ===== セクションサブタイトル ===== */
.section-sub-title {
    font-size: var(--font_section-sub-title_font-size);
    font-weight: var(--font_section-sub-title_font-weight);
    line-height: var(--font_section-sub-title_line-height);

}


/* ===== 本文 ===== */
.main-text {
    font-size: var(--font_main_font-size);
    font-weight: var(--font_main_font-weight);
    line-height: var(--font_main_line-height);
}


/* ===== キャプション ===== */
.caption {
    font-size: var(--font_caption_font-size);
    font-weight: var(--font_caption_font-weight);
    line-height: var(--font_caption_line-height);
}

/* ===== 補足文 ===== */
.supplement {
    font-weight: var(--font_xs_font-weight);
    font-size: var(--font_xs_font-size);
    line-height: var(--font_xs_line-height);
}

/*=========変数を使用したスペーシング設定 ==========*/
/* ===== spacing＿section-padding-bottom_pc ===== */
.section {
    padding-bottom: var(--spacing_section-bottom);
}

/* ===== spacing＿title-to-caption_pc ===== */
.title--group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_title-to-caption);
}

/* ===== spacing＿title-to-lead(text)_pc ===== */
.title-text--group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_title-to-lead);
}

/* ===== spacing＿lead-to-text_pc ===== */
.text--group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_lead-to-text);
}

/* ===== spacing＿text-to-img_pc ===== */
.text--group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_lead-to-text);
}

/* ===== spacing＿button-margin-top_pc ===== */
.button {
    margin-top: var(--spacing_button-top);
}

/* ==== spacing＿img-padding-top/bottom_cp ===== */
.section-img {
    padding-top: var(--spacing_img);
    padding-bottom: var(--spacing_img);
}

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

body {
    margin: 0;
    color: #3F2121;
    background-color: #fffdf5;
    font-family: var(--font-family--base);
    font-size: var(--font_main_font-size);
    font-weight: var(--font_main_font-weight);
    line-height: var(--font_main_line-height);
}


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: flex-end;
    /*テキストとアイコンを下揃え*/
    justify-content: center;
    /*ボタン幅に対して中央寄せ*/
    gap: 16px;
    padding: 12px 34px;

    font-size: var(--font_btn-font-size);
    font-weight: var(--font_btn-font-weight);
    line-height: 28px;

    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;
    transform: translateY(-0.2em);
}

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

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

.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: flex-end;
    justify-content: center;
    gap: 16px;

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

    font-size: var(--font_btn-font-size);
    font-weight: var(--font_btn-font-weight);
    line-height: var(--font_btn-line-height);
    text-decoration: none;
    color: #2f6f4e;
    background: #fff3b5;
    border: 5px solid #24884f;
    outline: 4px solid #ffedb8;
    box-shadow: 5px 5px 5px rgba(42, 81, 63, 0.63);
    border-radius: 999px;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border .25s ease,
        outline .25s ease,
        box-shadow .25s ease,
        height 1.0s ease,
        color .3s ease;
}

.btn-detail-bright:hover {
    font-weight: var(--font_lead_font-weight);
    color: #ffe;
    background: #3d976c;
    border: 5px solid #ffedb8;
    outline: 4px solid #308a57;
    /*box-shadow: 5px 7px 5px rgba(18, 64, 41, 0.8);*/
    box-shadow: 0px 0px 22px rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);

}

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

/***************
base : フェードイン
****************/
/* -----フェードイン連続----- */
.fade-in-fast {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.6s ease;
}

.fade-in-fast.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* -----通常フェードイン----- */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.0s ease-out, transform 0.8s ease-out;
}

.fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* -----フェードイン弾む----- */
.fade-in-bounce {
    opacity: 0;
    transform: translateY(60px);
}

.fade-in-bounce.is-show {
    animation-name: fadeUpBounce;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.84, 1);
    /*cubic-bezier：イージングの調整　ゆっくり→加速→ゆっくり*/
    animation-fill-mode: forwards;
    /* この後animation-delayを追加するので、のちのち-delayがリセットされないように念のため分けて書く*/
}


@keyframes fadeUpBounce {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    70% {
        opacity: 1;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*====================
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;
    animation: seedDrop 0.6s ease-out forwards;
}

/* 芽（下からにょき） */
.sprout {
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: bottom center;
    transform: translateY(50%);
    opacity: 0;
    z-index: 1;
    transform-origin: center 60%;
}

.loading-group.start .sprout {
    animation: sproutAppear 0s 0.4s forwards,
        grow 1.6s ease-out 0.8s forwards,
        shine 0.38s ease-out 1.95s forwards;
}

/* きらきら */
.sparkle {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    z-index: 3;

    filter: drop-shadow(0 0 20px #fbff00);
    transform-origin: center center;
}

.loading-group.start .sparkle {
    animation: sparkle 0.38s ease-out 1.95s forwards;
}

/* アニメーション */
@keyframes seedDrop {

    0% {
        transform: translateY(-60px);
        opacity: 0;
    }

    60% {
        transform: translateY(10px);
    }

    80% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }

}

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

@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 shine {


    0% {
        transform: translateY(0%) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    40% {
        transform: translateY(0%) rotate(0deg) scale(1.1);
        opacity: 1;
    }

    70% {
        transform: translateY(0%) rotate(0deg) scale(1);
        opacity: 0.8;
    }

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

@keyframes sparkle {

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

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

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

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

/* フェードアウト用 */
.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表示後 */
.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: 64px;
    left: 50.5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: 'Comic Sans MS', 'Comic Neue', cursive;
    /* 手書き風 */
}

.scroll__text {
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #f8de86;
    /* 明るい黄色 */
    text-shadow: -0.6px -0.6px 1px rgba(12, 131, 28, 1);
    margin-bottom: 4px;
    animation: textBounce 1.5s ease-in-out infinite;
}

/* テキストをゆらゆら跳ねる */
@keyframes textBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* 基本の丸いライン */
.scroll__line {
    position: relative;
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    /* 丸くする */
    overflow: hidden;
}

/* 動く丸いボール */
.scroll__line::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #ffd966;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: bounceBall 1.8s ease-in-out infinite;
}

@keyframes bounceBall {
    0% {
        top: -10px;
    }

    50% {
        top: 30px;
    }

    100% {
        top: -10px;
    }
}

/* 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;
    }

    /* タイトル　群ＰＣ */
    .fv__titles {
        top: 0;
        right: 0;
        width: 75%;
        max-width: 753px;
    }
}

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

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

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

/* ----- SPハンバーガーメニュー ----- */
/* ハンバーガー*/
.hamburger-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;
}

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

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

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

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

/*>>>>>>>>>>>>>>> ハンバーガー PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .hamburger-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: 32px;
}

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

.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__list {
    display: none
}

.sp-nav {
    display: block;
}

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


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

    /* SPメニュー非表示 */
    .sp-nav {
        display: none;

    }

    .pc-nav {
        display: flex;
        gap: 32px;
        justify-content: center;
        width: 100%;
        height: 180px;
        align-items: center;
        background-color: #33b074;
        border-top: 8px solid #fffdf5;
        padding: 0 16px;
    }

    /* -----pcナビゲーション----- */
    .pc-nav__list {
        width: 100%;
        max-width: 1020px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        gap: 16px;
        justify-content: space-between;

    }

    #top .pc-nav__list {
        max-width: 830px;
        margin-left: 0;
        margin-right: 0;
    }

    .pc-nav__list li {
        width: 25%;
        /* height: 134px;*/
        background-color: #fffdf5;
        /*border-radius: 180px 180px 8px 8px;*/
        border-radius: 60% 60% 8% 8% / 70% 70% 8% 8%;
        border: 2px solid #fff;
        box-shadow: inset 0 0 0 3px #acd4c2;
        overflow: hidden;
        /* padding-top: 80px;*/
        text-align: center;
        color: #2c9763;
        font-family: 'Kaisei Opti';
        font-weight: 700;
        font-size: clamp(15px, 1.5vw, 16px);

    }

    .pc-nav__list a {
        position: relative;
        display: block;
        /* padding: 8px 0;*/
        text-decoration: none;
        height: 134px;
        display: flex;
        justify-content: end;
        flex-direction: column;
        line-height: 3.2;
    }

    /*navアイコン*/
    .pc-nav__list a::before {
        position: absolute;
        content: "";
        width: 64px;
        height: 64px;
        top: 18px;
        /*top: -64px;*/
        left: 50%;
        transform: translateX(-50%);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }

    .pc-nav__item--home::before {
        background-image: url(../images/common/pc-nav--home.png);
    }

    .pc-nav__item--about::before {
        background-image: url(../images/common/pc-nav--about.png);
    }

    .pc-nav__item--course::before {
        background-image: url(../images/common/pc-nav--course.png);
    }

    .pc-nav__item--trial::before {
        background-image: url(../images/common/pc-nav--trial.png);
    }

    .pc-nav__item--fqa::before {
        background-image: url(../images/common/pc-nav--fqa.png);
    }



    .pc-nav__list li:hover {
        box-shadow: inset 0 0 0 3px #2c9763;
        transition: .2s ease-out;
    }


    .pc-nav__list li:hover a::before {
        transform: translateX(-50%) translateY(-2px) scale(1.05);
        transition: .2s ease-out;
    }

    .pc-nav__list .sp-only {
        display: inline;
    }


    /* あーとのたねについてボタンの改行時*/
    .pc-nav__text {
        line-height: 1.1;
        padding-bottom: 8px;
        /*改行したときの下の余白*/
    }

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


/*>>>>>>>>>>>>>>>  PC
min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .pc-nav__list .sp-only {
        display: none;
    }

    /* あーとのたねについてボタンの改行無し*/
    .pc-nav__text {
        line-height: 3.2;
        padding-bottom: 0;
    }

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

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


/*====================
section : ＳＰロゴセクションここから
====================*/
/*　-----spロゴ-----　*/
.sp-logo {
    width: 100%;
    background-color: #3BB273;
}

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

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

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

/*====================
section : ＳＰロゴセクションここまで
====================*/



/*main全体背景画像*/
#top main {
    background-image: url(../images/common/main-bgi.png);
}


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

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

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

/*背景画像*/
.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;
}

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

/*セクションタイトルロゴ　ＳＰ*/
.section-title-logo::before {
    position: absolute;
    content: "";
    width: 54px;
    height: auto;
    aspect-ratio: 1/1;
    top: -67px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../images/common/title-mark.png);
    background-repeat: no-repeat;
    background-position: center 8px;
    background-size: contain;
    /*border-radius: 999px 999px 0 0/500px 500px 0 0;
    border-top: 2px solid #027333;*/
}

/* タイトル　ＳＰ*/
.about-title-group .section-title {
    color: #32724E;
}


/* 本文*/
.about-title-group .main-text {
    letter-spacing: 0.1em;
}



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

    /*セクションタイトルロゴ　ＰＣ*/
    .section-title-logo::before {
        width: 62px;
    }

    /*背景画像*/
    .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;
    }

    /* タイトル　ＰＣ*/
    .about-title-group .section-title {
        line-height: 1.8;
        /*改行するので間隔広げる*/
    }

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




/*====================
section : 教室の特徴についてのエリアここから
====================*/

.about-features-section {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 64px;
    /* separatorと少し重なる */
    padding-bottom: 64px;
    background-color: #fffce3
        /*#fffeed;*/
}

/* -----セパレーター　ＳＰ----- */
.about-features-section::before {
    position: absolute;
    content: "";
    inset: 0 auto;
    aspect-ratio: 1980/165;
    width: 100%;
    height: auto;
    background-image: url(../images/top/about/about-separator-bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/top/about/about-separator-mask.png);
    mask-image: url(../images/top/about/about-separator-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    filter: drop-shadow(3px 3px 2px #00000040);
    z-index: 2;

    pointer-events: none;
}


/* -----セパレーター影用　ＳＰ----- */
.about-features-section::after {
    position: absolute;
    content: "";
    inset: 0 auto;
    aspect-ratio: 1980/165;
    width: 100%;
    background: black;

    -webkit-mask-image: url(../images/top/about/about-separator-mask.png);
    mask-image: url(../images/top/about/about-separator-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;

    filter: blur(5px);
    opacity: 0.25;
    transform: translateY(3px);
}

.about-features-inner-bgi {
    width: 100%;
}

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

/*教室の特徴セクションinner　ＳＰ*/
.about-features-inner {
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1180px;
    padding: 40px 16px 24px;
}

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

/*セクションタイトルまとまり　ＳＰ*/
.about-features-title {
    width: 100%;
    position: relative;
    padding-top: 88px;
    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: 362px;
    height: 100px;
    background-image: url("../images/top/about/features-title-figure_sp.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/*セクションタイトル　ＳＰ*/
.about-features-title h2 {
    color: #32724E;
}

/*セクションタイトル下の本文　ＳＰ*/
.about-features-heading .main-text {
    letter-spacing: 0.1em;
    width: 100%;
    max-width: 529px;
    margin-left: auto;
    margin-right: auto;
}

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




/*カードのまとまり　ＳＰ*/
.features-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    gap: 64px;
    max-width: 480px;
    margin: 32px auto 0;
    padding-top: 40px;
}


/*各カード　ＳＰ*/
.features-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
    z-index: 0;
}

.features-card:nth-child(1) {
    background-image: url(../images/top/about/features-card-bgi1.png);
}

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

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

/*各カードimg画像　ＳＰ*/
.features-card-img {
    width: 100%;
    height: auto;
}

.features-card-title {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: -24px;
}



.features-card:nth-child(2) .features-card-title {
    margin-left: auto;
}


/*カードタイトル前の英語　ＳＰ*/
.features-card-title::after {
    position: absolute;
    content: "";
    top: 14px;
    left: 0;
    width: 38%;
    height: auto;
    aspect-ratio: 211/37;

    background-repeat: no-repeat;
    background-size: contain;
}

.features-card:nth-child(1) .features-card-title::after {
    background-image: url(../images/top/about/features-card-bgi-text1.png);

}

.features-card:nth-child(2) .features-card-title::after {
    background-image: url(../images/top/about/features-card-bgi-text2.png);

}

.features-card:nth-child(3) .features-card-title::after {
    background-image: url(../images/top/about/features-card-bgi-text3.png);

}




/*教室の特徴カードのフェードタイミング　ＳＰ*/
.features-card:nth-child(1) {
    transition-delay: 0s;
}

.features-card:nth-child(2) {
    transition-delay: 0.3s;
}

.features-card:nth-child(3) {
    transition-delay: 0.6s;
    z-index: -1;
}

/*各カードテキストエリアＳＰ*/
.features-card-text {
    position: relative;
    width: 100%;
    text-align: center;
    aspect-ratio: 343 / 156;
    /* SPデザイン基準：375px
   カード実幅：343px（左右16px padding除く）
   テキストエリア高さ：156px */
}


.features-card-text::before {
    position: absolute;
    content: "";
    left: calc(273 / 343 * 100%);
    top: calc(-27 / 156 * 100%);
    width: calc(68 / 343 * 100%);
    height: auto;
    aspect-ratio: 191/156;
    background-repeat: no-repeat;
    background-size: contain;
}

.features-card:nth-child(1) .features-card-text::before {
    background-image: url(../images/top/about/features-card-text1.png);
}

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

}

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

}



/*各カードリード文　ＳＰ*/
.features-card-text .text-lead {
    width: 100%;
    padding: 16px 0;
    font-size: 2rem;
}


/*各カード本文　ＳＰ*/
.features-card-text .main-text {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}


/*カードの間のオブジェクト　ＳＰ*/
.features-card-between-obj1,
.features-card-between-obj2 {
    position: absolute;
    aspect-ratio: 336/300;
    transform: scaleX(-1);
}

/*カードの間のオブジェクト上モチーフ　ＳＰ*/
.features-card-between-obj1 {
    width: calc(104 / 375 * 100%);
    left: calc(254 / 375 * 100%);
    /* 幅とx軸方向の配置はSPカンプ基準 （375px） に対する比率を計算して％で指定 */
    top: calc(50% - 57vw);
    /*親要素features-cardsの縦幅中心基準*/
}

/*カードの間のオブジェクト下モチーフ　ＳＰ*/
.features-card-between-obj2 {
    width: calc(114 / 375 *100%);
    left: calc(16 / 375 * 100%);
    top: calc(1605 / 2324 * 100%);

}


/* ボタン ＳＰ*/
.features-btn-wrapper {
    margin-top: 40px;
    z-index: -1;
}


/*>>>>>>>>>>>>>>>教室の特徴 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 center, right center;
        padding-top: 128px;
        padding-bottom: 180px;
    }

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

    .about-features-inner-bgi {
        /* background-image: url(../images/top/about/features-inner-bg-img1.png),
            url(../images/top/about/features-inner-bg-img2.png),
            url(../images/top/about/features-inner-bg-img3.png);
        background-repeat: no-repeat;
        background-position: 75% 30%, 27% 72%, 71% 98%;
        background-size: 20%;*/
    }

    /*教室の特徴中身　ＰＣ*/
    .about-features-inner {
        aspect-ratio: unset;
        background-image: url('../images/top/about/features-inner-bg-middle.png');
        background-repeat: repeat-y;
        background-size: 100%;
        padding: 80px 64px 40px;
    }

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

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



    /*カードのまとまり　ＰＣ*/
    .features-cards {
        position: relative;
        margin-top: 64px;
        max-width: none;
        width: 100%;
        aspect-ratio: unset;
        height: clamp(1231px, 2548.4757px + -111.6505vw, 1691px);
        margin: 32px auto 0;

    }

    /*各カード　ＰＣ*/
    .features-card {
        /*display: block;*/
        align-items: start;
        position: absolute;
        width: 526px;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        border-radius: 30px;
        background-repeat: no-repeat;
        background-size: 100% 80%;
        z-index: 0;
    }

    .features-card:nth-child(1) {
        top: 0px;
        left: 0;
        background-position: right 24px;
    }

    .features-card:nth-child(2) {
        align-items: end;
        left: clamp(114px, -654px + 100vw, 526px);
        top: clamp(233px, 1181.0097px + -80.3398vw, 564px);

    }


    .features-card:nth-child(3) {
        left: clamp(0px, -178.9515px + 23.301vw, 96px);
        top: clamp(656px, 2004.9806px + -114.3204vw, 1127px);

    }


    /*各カードimg画像　ＰＣ*/
    .features-card-img {
        width: 395px;
    }

    /*各カードタイトル画像　ＰＣ*/
    .features-card-title {
        width: 395px;
        margin-top: -24px;
    }

    /*各カードの写真 ＰＣ
    .features-card-title::before {
        width: 395px;
        top: -276px;
    }*/

    .features-card-title::after {
        top: -14px;
        width: 249px;
        z-index: -1;
    }

    .features-card:nth-child(1) .features-card-title::after {
        left: 300px;
    }

    .features-card:nth-child(2) .features-card-title::after {
        left: -156px;
    }

    .features-card:nth-child(3) .features-card-title::after {
        left: 300px;
    }

    .features-card:nth-child(2) .features-card-text {
        margin-left: auto;
    }


    /*各カードテキストエリアＰＣ*/
    .features-card-text {
        width: 378px;
    }

    .features-card-text::before {
        position: absolute;
        content: "";
        left: 0;
        top: -33%;
        height: auto;
        width: 20%;
        aspect-ratio: 191/156;

        background-repeat: no-repeat;
        background-size: contain;
    }

    .features-card:nth-child(1) .features-card-text::before {
        background-image: url(../images/top/about/features-card-text1.png);
        left: 292px;
        top: -23%;
    }

    .features-card:nth-child(2) .features-card-text::before {
        background-image: url(../images/top/about/features-card-text2.png);
        left: 265px;
        top: -22%;
    }

    .features-card:nth-child(3) .features-card-text::before {
        background-image: url(../images/top/about/features-card-text3.png);
        left: 278px;
        top: -22%;
    }

    /*各カード本文　ＰＣ*/
    .features-card-text .main-text {
        padding: 0 24px;
    }

    /*カードの間のオブジェクト上モチーフ　ＰＣ*/
    .features-card-between-obj1 {
        width: 132px;
        top: clamp(628px, 1295.3301px + -56.5534vw, 861px);
        left: clamp(525px, 349.7767px + 22.8155vw, 619px);
    }

    .features-card-between-obj2 {
        width: 156px;
        top: clamp(988px, 2291.1553px + -110.4369vw, 1443px);
        left: clamp(64px, -644.3495px + 92.233vw, 444px);
    }

    .features-card-between-obj1::before,
    .features-card-between-obj2::before {
        position: absolute;
        top: -136px;
        left: 12px;
        content: "";
        width: 123px;
        height: auto;
        aspect-ratio: 240/352;

        background-repeat: no-repeat;
        background-size: contain;

    }

    .features-card-between-obj1::before {
        background-image: url(../images/top/about/features-card-between-obj-before1.png);
        transform: rotate(-30deg);
    }

    .features-card-between-obj2::before {
        background-image: url(../images/top/about/features-card-between-obj-before2.png);
    }


    /*特徴エリアボタン　ＰＣ*/
    .features-btn-wrapper {
        position: relative;
        margin-left: auto;
        margin-right: clamp(0px, -149.1262px + 19.4175vw, 80px);
    }

    /*特徴エリアボタン上のオブジェクト　ＰＣ*/
    .features-btn-wrapper::before {
        position: absolute;
        content: "";
        top: -310px;
        left: 50%;
        transform: translateX(-50%);
        width: 260px;
        height: 300px;

        background-image: url(../images/top/about/features-btn-img1.png), url(../images/top/about/features-btn-img2.png);
        background-repeat: no-repeat, no-repeat;
        background-size: 156px 153px, 144px 210px;
        background-position: bottom right, top left;
        pointer-events: none;
    }

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


/*====================
section : 教室の特徴についてのエリアここまで
====================*/


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



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

.philosophy {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #fffeed;
    padding: 88px 0;
    background-image: url(../images/top/philosophy/philosophy_bg-image-left.png), url(../images/top/philosophy/philosophy_bg-image-right.png);
    background-repeat: repeat-y;
    background-position: 0 0, 100% 0;
    background-size: 23%;
}

/*セパレーター　ＳＰ*/
.philosophy::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(100% - 2px);
    width: 100%;
    height: 28px;
    background-image: url(../images/top/philosophy/philosophy-sepalator_bgi.png);
    background-repeat: repeat;
    -webkit-mask-image: url(../images/top/philosophy/philosophy-sepalator_mask.png);
    mask-image: url(../images/top/philosophy/philosophy-sepalator_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 2;
    pointer-events: none;
}

/*セパレーター影用　ＳＰ*/
.philosophy::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(100% - 0.8px);
    width: 100%;
    height: 28px;
    background: black;
    -webkit-mask-image: url(../images/top/philosophy/philosophy-sepalator_mask.png);
    mask-image: url(../images/top/philosophy/philosophy-sepalator_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    filter: blur(5px);
    opacity: 0.25;
    transform: translate(1px -3px);
}

/*理念セクションの中身　ＳＰ*/
.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__section-title {
    display: flex;
    align-items: end;
    /*画像をテキスト下揃え*/
    flex-wrap: wrap;
    /*改行用*/
    justify-content: center;
    text-align: center;
    gap: 8px;
    position: relative;
    font-family: var(--font-family--decoration);
    font-size: clamp(2rem, 5.33vw, 3.2rem);
    /*画像とテキストの比率を保つ*/
    color: #3e8c60;
    line-height: 1.1em;
    /*画像の高さをテキストよりやや大きくする*/
}

.philosophy__section-title.section-title-logo::before {
    top: -80px;
}


/*「アート」文字画像　ＳＰ*/
.philosophy__section-title img {
    display: inline;
    height: 1.1em;
    /*テキストの高さよりやや大きく*/
    width: auto;
    flex-shrink: 0;
    /*スペースが足りないと縮める*/
}

/*タイトル改行　ＳＰ*/
.philosophy__section-title .line-break {
    width: 100%;
    /*改行用*/
}

/*キャプション　ＳＰ*/
.philosophy__caption {
    text-align: center;
}

/*philosophy__visual内の画像は見出し防止用　ＳＰ*/
.philosophy__visual-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/*見出し内画像　ＳＰ*/
.philosophy__visual {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 300;
    max-width: 680px;
}

.philosophy__visual-img {
    position: absolute;
    animation-play-state: paused;
    /*画面上に現れて車で再生停止*/
}

.philosophy__visual-img.anime {
    animation-play-state: running;
    /*jsで位置を取得してちょうどいい位置でanimeクラスがついたら再生*/
}


.philosophy__visual-img--01 {
    width: 100%;
    top: 0%;
    left: 0%;
}

.philosophy__visual-img--02 {
    width: 15.5%;
    top: 58%;
    left: 26%;
}

.philosophy__visual-img--02.anime {
    animation: sun 0.4s ease-out 0s 5;
    /*animeクラスがついた.philosophy__visual-imgにanimationプロパティを設定*/
}



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

    33% {
        transform: rotate(-2deg);
    }

    66% {
        transform: rotate(2deg);
    }

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

.philosophy__visual-img--03 {
    width: 12.3%;
    top: 47%;
    left: 65%;
}

.philosophy__visual-img--03.anime {
    animation: cloud 1.0s ease-out 0s 2;
}

/* アニメーション */
@keyframes cloud {
    0% {
        transform: translateX(0px) scale(1);
    }

    40% {
        transform: translateX(-2px) scale(1.002);
    }

    100% {
        transform: translateX(0px) scale(1);
    }
}

.philosophy__visual-img--04 {
    width: 8.6%;
    top: 45%;
    left: 22%;
    opacity: 0;
}

.philosophy__visual-img--04.anime {
    animation: wind 2.5s ease-out 0s forwards;
}

/* アニメーション */
@keyframes wind {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1.0;
    }
}


.philosophy__visual-img--05 {
    width: 5.8%;
    top: 77%;
    left: 39%;
    opacity: 0;
}

.philosophy__visual-img--05.anime {
    animation: small-plants 0.4s ease-out 0s forwards;
}

/* アニメーション */
@keyframes small-plants {
    0% {
        transform: translateY(50%) scale(0);
        opacity: 0;
    }

    70% {
        transform: translateY(-10%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }
}

.philosophy__visual-img--06 {
    width: 5.5%;
    top: 71%;
    left: 43%;
    opacity: 0;
}

.philosophy__visual-img--06.anime {
    animation: small-plants 0.4s ease-out forwards;
    animation-delay: 0.3s;
    /*開始までの遅延時間。animationによって上書きされるのでanimation-delayは後に書く*/
}

.philosophy__visual-img--07 {
    width: 7.2%;
    top: 74%;
    left: 46%;
    opacity: 0;
}

.philosophy__visual-img--07.anime {
    animation: small-plants 0.4s ease-out forwards;
    animation-delay: 0.5s;
}

.philosophy__visual-img--08 {
    width: 5.8%;
    top: 77%;
    left: 55%;
    opacity: 0;
}

.philosophy__visual-img--08.anime {
    animation: small-plants 0.5s ease-out forwards;
    animation-delay: 0.7s;
}

.philosophy__visual-img--09 {
    width: 7.7%;
    top: 62%;
    left: 64%;
    opacity: 0;
}

.philosophy__visual-img--09.anime {
    animation: small-plants 0.5s ease-out forwards;
    animation-delay: 0.9s;
}

.philosophy__visual-img--10 {
    width: 17.7%;
    top: 43%;
    left: 41%;
    opacity: 0;
}

.philosophy__visual-img--10.anime {
    animation: big-plants 0.5s ease-out 1.1s forwards;
    /*animation-delayをまとめてショートハンドで描いた場合。--1.1ｓ--;*/
}

/* アニメーション */
@keyframes big-plants {
    0% {
        transform: translateY(50%) scale(0);
        opacity: 0;
    }

    40% {
        transform: translateY(-20%) scale(1.4);
        opacity: 1;
    }

    70% {
        transform: translateY(-10%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }
}

.philosophy__visual-img--11 {
    width: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
}

.philosophy__visual-img--11.anime {
    animation: pop 0.3s ease-out 1.2s forwards;
}


/* アニメーション */
@keyframes pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: .4;
    }

    100% {
        transform: scale(1);
        opacity: .8;
    }
}


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


/*サブタイトル　ＳＰ*/
.philosophy__section-sub-title {
    text-align: center;
}

/*説明本文　ＳＰ*/
.philosophy__main-text {
    text-align: center;
    letter-spacing: 0.1em;
}

/*図解　ＳＰ*/
.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 {
        padding-top: 132px;
        padding-bottom: 178px;
    }

    /*セパレーター　ＰＣ*/
    .philosophy::before {
        height: 54px;
    }

    .philosophy::after {
        height: 54px;
    }

    /*セクションタイトル　ＰＣ*/
    .philosophy__section-title {
        flex-wrap: nowrap;
    }


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

    .philosophy__section-title .line-break {
        width: auto;
        /*改行解除*/
    }



    /*見出しサイドの画像　ＰＣ*/
    .philosophy__visual::before,
    .philosophy__visual::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;
        opacity: 0;
    }


    .philosophy__visual::before {
        top: 30%;
        left: -23%;
        transform: scale(0);
    }

    .philosophy__visual.anime::before {
        animation: star-before 0.2s ease-out 1.28s 2 forwards;
    }

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

    .philosophy__visual.anime::after {
        animation: star-after 0.2s ease-out 1.28s 2 forwards;
    }


    /* アニメーション */
    @keyframes star-before {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        50% {
            transform: scale(.5);
            opacity: .25;
        }

        100% {
            transform: scale(1);
            opacity: .5;
        }
    }

    @keyframes star-after {
        0% {
            transform: scale(0) scaleX(-1);
            opacity: 0;
        }

        50% {
            transform: scale(.5) scaleX(-1);
            opacity: .25;
        }

        100% {
            transform: scale(1) scaleX(-1);
            opacity: .5;
        }
    }


    /*図解　ＰＣ*/
    .philosophy__figure--sp {
        display: none;
    }

    .philosophy__figure--pc {
        display: block;
    }


    /*見出しのまとまり　ＰＣ*/
    .philosophy__heading {
        gap: 32px;
    }

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

    /*説明と図解のまとまり　ＰＣ*/
    .philosophy__content {
        gap: 80px;
    }
}

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

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


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

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

/* -----セパレーター　ＳＰ----- */
.classroom-section::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(100% - 2px);
    width: 100%;
    height: 56px;
    background-image: url(../images/top/classroom/classroom-sepalator-bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/top/classroom/classroom-sepalator_mask.png);
    mask-image: url(../images/top/classroom/classroom-sepalator_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 2;

    pointer-events: none;
}

.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: 48px 36px;
}

/*セクションタイトル　ＳＰ*/
.classroom-section-title h2 {
    text-align: center;
    color: #32724E;
}

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

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

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


/*セクションタイトル内説明文　ＳＰ*/
.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: 22%;
    height: 48px;
    background-image: url(../images/top/classroom/classroom-subtitle-bg-img_sp.png);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: center center;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(1px 1px 1px #FFFCA4);
}

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

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


/*コーステキスト　ＳＰ*/
.classroom-course-text {
    width: 90%;

    color: #fff;
    margin: 32px 0;
    font-size: 1.8rem;
}

.classroom-course-text.art {
    max-width: 468px;
}

.classroom-course-text.illust {
    max-width: 306px;
}

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

.class-room-card-wrapper {
    width: 100%;
    max-width: 354px;
}

/*クラスカード　ＳＰ*/
.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;
    box-shadow: 2px 2px 5px #1e4d2c
}

.classroom-card--mebae {
    background-color: #faf9c7;
    box-shadow: 2px 2px 5px #263516;
}

.classroom-card--nobiru {
    background-color: #ffedd4;
    box-shadow: 2px 2px 5px #462d1d;
}

.classroom-card--illust {
    background-color: #FFF3F9;
    box-shadow: 2px 2px 5px #602e2e;
}

/*ホバー時クラスカード傾き　ＳＰ*/
.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-lead {

    color: #32724E;
}

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


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

/*クラス紹介カードのフェードタイミング　ＳＰ*/

.classroom-card:nth-child(1).is-show {
    animation-delay: 0s;
}

.classroom-card:nth-child(2).is-show {
    animation-delay: 0.3s;
}

.classroom-card:nth-child(3).is-show {
    animation-delay: 0.6s;
}

.classroom-section .btn-detail-bright {
    margin-top: 0;
}

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

    /*セパレーター　ＰＣ*/
    .classroom-section::before {
        height: 80px;
    }

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

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

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

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

    /*コース見出しのエリア　ＰＣ*/
    .classroom-course-heading {
        justify-content: center;
        text-align: center;
    }


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

    /*セクションタイトル画像　ＳＰ*/
    .classroom-section-title-img {
        max-width: none;
    }

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

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

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

    /*コースタイトル装飾　ＰＣ*/
    .classroom-course-title::before,
    .classroom-course-title::after {
        display: none;
    }

    /*コースタイトル装飾　ＰＣ*/
    .classroom-course-title {
        background-image: url(../images/top/classroom/classroom-subtitle-bg-left.png), url(../images/top/classroom/classroom-subtitle-bg-right.png);
        background-size: contain;
        background-position: center left, center right;
        background-repeat: no-repeat;
        padding: 20px 0;
        max-width: 1020px;
        border: none;
    }


    /*コーステキスト　ＰＣ*/
    .classroom-course-text {
        width: 100%;

        color: #fff;
        margin: 32px 0 64px 0;
        font-size: 2rem;
    }

    .classroom-course-text.art {
        max-width: none;
    }

    .classroom-course-text.illust {
        max-width: none;
    }




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

}


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

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



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

.price-section {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: 80px 16px 32px 16px;
    background-image: url(../images/top/price/price-bg-img.png);

}

/* -----セパレーター　ＳＰ----- */
.price-section::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(100% - 1px);
    width: 100%;
    height: 56px;
    background-image: url(../images/top/price/price-bg-img.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/top/price/price-sepalator_mask.png);
    mask-image: url(../images/top/price/price-sepalator_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 2;

    pointer-events: none;
}

.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-inner::after {
    position: absolute;
    content: "";
    width: 25%;
    aspect-ratio: 1/1;
    max-width: 130px;
    background-image: url(../images/top/price/price-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -6%;
    right: 10%;
    z-index: 3;
}

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

/*セクションタイトル 　ＳＰ*/
.price-title span {
    display: inline-block;
    color: #fff;
}

/*セクションリード文　ＳＰ*/
.price-lead {
    width: 100%;
    max-width: 374px;
    margin: 24px auto 48px;
    text-align: left;
}

/*  カードレイアウト ＳＰ */
.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;
}



/*項目　ＳＰ*/
.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;
}*/


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

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

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

/*材料送付　ＳＰ*/
.price-sending {
    min-height: 1.6em;
}

/*回数　ＳＰ*/
.price-count {
    min-height: 1.6em;
}





/*ボタン　ＳＰ*/
.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;
}



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

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

    /*セパレーター　ＰＣ*/
    .price-section::before {
        height: 80px;
    }

    /*セクションオブジェクト　ＰＣ*/
    .price-inner::after {
        bottom: 2%;
        right: 10%;
    }

    /*セクションタイトル　ＰＣ*/
    .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 {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 111px;
    padding-bottom: 88px;
    background-color: #fffdf6;
    background-image: none;
    background-image: url(../images/top/fqa/fqa-separator_bgi.png);
    background-repeat: repeat;
}

/*>>>>>>>>>>>>>>>  PC
min-width:1377px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1377px) {
    .trial-section {
        background-image: url(../images/top/trial/top-trial-bgi-left.png), url(../images/top/trial/top-trial-bgi-right.png), url(../images/top/fqa/fqa-separator_bgi.png);
        background-repeat: no-repeat, no-repeat, repeat;
        background-size: auto;
        background-position: bottom left, bottom right, top left;
    }

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

/* -----セパレーター　ＳＰ----- */
.trial-section::before {
    position: absolute;
    content: "";
    left: 0;
    top: -1px;
    width: 100%;
    aspect-ratio: 1980/165;
    background-image: url(../images/top/trial/price-bg-img.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/top/trial/trial-separator-mask.png);
    mask-image: url(../images/top/trial/trial-separator-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 2;

    pointer-events: none;
}


/* -----セパレーター影用　ＳＰ----- */
.trial-section::after {
    position: absolute;
    content: "";
    left: 0;
    top: -1px;
    aspect-ratio: 1980/165;
    width: 100%;
    background: #ac903f;

    -webkit-mask-image: url(../images/top/trial/trial-separator-mask.png);
    mask-image: url(../images/top/trial/trial-separator-mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    filter: blur(5px);
    opacity: 0.25;
    transform: translateY(3px);
}


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

.trial-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trial-cta::before {
    position: absolute;
    content: "";
    width: 20%;
    max-width: 177px;
    aspect-ratio: 177/197;
    max-height: 197px;
    top: 40%;
    left: 0;
    background-image: url(../images/top/trial/trial-btn-decr-left.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.trial-cta::after {
    position: absolute;
    content: "";
    width: 20%;
    max-width: 177px;
    aspect-ratio: 177/197;
    max-height: 197px;
    top: 40%;
    right: 0;
    background-image: url(../images/top/trial/trial-btn-decr-right.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/*体験不安要素・体験案内テキスト・体験ボタン　ＳＰ*/
.trial-cta-inner {
    position: relative;
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: #fffefd;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    justify-content: center;
    border-left: 4px solid #e4f9ee;
    border-right: 4px solid #e8f9ee;
}


/*体験不安要素オブジェクト　ＳＰ*/
.trial-cta-inner::after {
    position: absolute;
    content: "";
    width: 20%;
    max-width: 120px;
    aspect-ratio: 166/234;
    top: 0%;
    right: 0%;
    background-image: url(../images/top/trial/trial-object.png);
    background-size: contain;
    background-repeat: no-repeat;

}

/*体験不安要素　ＳＰ*/
.trial-worry {
    padding: 18px 48px 24px;
    background-image: url(../images/top/trial/trialーbubble.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -180px;
    color: #1f6440;
    font-weight: var(--font_lead_font-weight);
}

/*体験案内テキスト　ＳＰ*/
.trial-message {
    color: #552800;

}

/*案内テキスト　ＳＰ*/
.trial-message p {
    text-align: center;
    margin-bottom: 32px;
}

/*サイト共通_体験レッスンCTA*/
/*体験ボタン　ＳＰ*/
.common__trial-btn {
    position: relative;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    padding: 0 16px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
}

.common__trial-btn::before {
    position: absolute;
    content: "";
    width: 177px;
    height: 179px;
    top: -120%;
}

.common__trial-btn:hover {
    transform: translateY(-3px);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.65));
    opacity: .8;
}

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


/*　----- 安心セクション　-----　*/
.relief-sec {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1020px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    position: relative;
    background-color: #fffdfb;
    border-radius: 30px;
    box-shadow: 4px 4px 4px rgba(11, 57, 6, .25);
    padding: 56px 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: -54px;
    left: 0;
}

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

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

/*タイトル　ＳＰ*/
.relief-title {
    color: #3e8c60;
}

/*テキスト　ＳＰ*/
.relief-text {
    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;
    }

    /*体験ボタン　ＰＣ*/
    .common__trial-btn--pc {
        display: block;
    }

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

    /*体験ボタン　ＰＣ*/
    .common__trial-btn--sp,
    .common__trial-btn--pc {
        max-width: none;
    }

}

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

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



/*====================
section : FQAセクションここから
====================*/
.fqa-section {
    position: relative;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
}

.fqa-inner {
    width: 95%;
    max-width: 680px;
    height: 248px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffffd;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    border: 2px solid #3bb273;
    box-shadow: 4px 4px 0px #1B8F4E;
    z-index: 2;
}

.fqa-inner::before {
    position: absolute;
    content: "";
    background-image: url(../images/top/fqa/fqa-object.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 110px;
    aspect-ratio: 164/211;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

/* -----セパレーター　ＳＰ----- */
.fqa-section::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1980/165;
    background-image: url(../images/top/fqa/fqa-separator_bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/top/fqa/fqa-separator_mask-img.png);
    mask-image: url(../images/top/fqa/fqa-separator_mask-img.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 2;

    pointer-events: none;
}


/* -----セパレーター影用　ＳＰ----- */
.fqa-section::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    aspect-ratio: 1980/165;
    width: 100%;
    background: #ceb54d;

    -webkit-mask-image: url(../images/top/fqa/fqa-separator_mask-img.png);
    mask-image: url(../images/top/fqa/fqa-separator_mask-img.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    filter: blur(5px);
    opacity: 0.35;
    transform: translateY(4px);
}


.fqa-btn {
    margin-top: 0;
}

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

/*====================
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;
    margin-bottom: 16px;
}

.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;
}

footer a:hover {
    opacity: 0.8;
}

small {
    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<<<<<<<*/
/*====================
section : フッターここまで
====================*/


/*====================
section : TOPへ戻るボタンここから
====================*/

/* 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 : TOPへ戻るボタンここまで
====================*/

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





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

.under-page__logo-pc {
    display: none;
}

.under-page-header__cta {
    padding-right: 56px;
}

.under-page-header__cta 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) {
    .under-page-header__brand {
        display: block
    }

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

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


    /* ロゴ 　ＰＣ*/
    .under-page__logo-pc {
        display: block;
        width: 25%;
        max-width: 375px;
    }

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

    .under-page__logo-pc:hover {
        opacity: 0.8;
    }

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

    .under-page-header__cta 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);
    }

    .under-page-header__cta a:hover {
        transform: translateX(0);
    }

}

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


/***************
base : 下層ページタイトル
****************/
/*下層ページタイトルとキャプション　ＳＰ*/
.under-page-header__title-group {
    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 49px;
}

/*下層ページタイトルキャプション　ＳＰ*/
.under-page-header__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);
}

/*>>>>>>>>>>>>>>>  PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    #about .under-page-header__title-group {
        background-position: center 111px;
    }

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





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

#about .pc-nav__list li:nth-child(2) {
    box-shadow: inset 0 0 0 4px #2c9763;
}

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

/*====================
section : Aboutページ＿コンセプトセクションここから
====================*/
.about-concept {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    align-items: center;
    background: #fffdf5;
    padding-top: 24px;
    padding-bottom: 156px;
}

.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: var(--font-family--decoration);
    font-weight: 500;
    font-size: 18px;
    color: #4aa46a;
}

.concept-heading h2 span:last-of-type {
    display: block;
    font-family: var(--font-family--decoration);
    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;
}

/*コンセプトイメージ画像（テキスト横）ＳＰ*/
.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;
    line-height: 2;
}




/* ===== 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: 247px;
        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 : Aboutページ＿コンセプトセクションここまで
====================*/

/*====================
section : Aboutページ＿valueセクションここから
====================*/
.about-value {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    background-image: url(../images/about/about-value-bgi.png);
    padding: 40px 0;
}

.about-value::before {
    position: absolute;
    content: "";
    aspect-ratio: 1980/223;
    left: 0;
    bottom: calc(100% - 1px);
    width: 100%;
    background-image: url(../images/about/about-value-bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/about/about-separator-mask_b.png);
    mask-image: url(../images/about/about-separator-mask_b.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;

    z-index: 2;
    pointer-events: none;
}

/*.about-value::after {
    position: absolute;
    content: "";
    aspect-ratio: 1980/223;
    left: 0;
    bottom: calc(-20%+ 1px);
    width: 100%;
    background-image: url(../images/about/about-value-bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/about/about-separator-mask_b_bottom.png);
    mask-image: url(../images/about/about-separator-mask_b_bottom.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;

    z-index: 2;
    pointer-events: none;
}*/

.value-separator {
    position: absolute;
    aspect-ratio: 1980/223;
    z-index: 3;
    left: 0;
    bottom: calc(100% - 1px);
}

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

.value-title {

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

.value-title span {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.2rem);
}

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

    margin: auto;
    padding: 0 16px;
}

.value-img {
    width: 100%;
    max-width: 411px;
    margin-left: auto;
    margin-right: auto;

}

.value-img img {
    width: 100%;
}


.value-text {
    line-height: 2;
    color: #724d32;
}

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

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

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



    .value-inner {
        padding: 54px 16px;
    }

    .value-img {

        max-width: 594px;
    }

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

/*====================
section : Aboutページ＿valueセクションここまで
====================*/
/*====================
section :  Aboutページ＿会社概要セクションここから
====================*/
.company {
    position: relative;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 120px;
}

.company::before {
    position: absolute;
    content: "";
    aspect-ratio: 1980/223;
    left: 0;
    top: calc(0px - 1px);
    width: 100%;
    background-image: url(../images/about/about-value-bgi.png);
    background-repeat: repeat;

    -webkit-mask-image: url(../images/about/about-separator-mask_b_bottom.png);
    mask-image: url(../images/about/about-separator-mask_b_bottom.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;

    z-index: 2;
    pointer-events: none;
}

.company-separator {
    position: absolute;
    aspect-ratio: 1980/223;
    z-index: 3;
    left: 0;
    top: calc(0px - 1px);
}

.company-section-title span {
    display: none;
}

.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 {
        padding-top: 192px;
    }

    .company-inner {
        gap: 40px;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .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;
    }
}

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

    .company {
        padding-top: 276px;
    }

    .company-section-title span {
        display: inline;
    }

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

/*<<<<<<<<min-width:px<<<<<<<<*/
/*====================
section :  Aboutページー会社概要セクションここまで
====================*/

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






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

#course .pc-nav__list li:nth-child(3) {
    box-shadow: inset 0 0 0 4px #2c9763;
}

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

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

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

    /* -----ページタイトル　PC----- */
    #course .under-page-header__title-group {
        background-position: center 49px;
    }

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

/*====================
section : コース・料金ページ＿レッスンについてセクション
====================*/
.lesson-about {
    padding: 64px 16px 40px;
}

.lesson-about__heading {
    margin-bottom: 40px;
    max-width: 553px;
    margin-left: auto;
    margin-right: auto;
}

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


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

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

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

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

/* レッスン各項目 ＳＰ*/
.lesson-about__item {
    width: 95%;
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
}

/* レッスンアイコン ＳＰ*/
.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;
    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 : コース・料金ページ＿レッスンについてセクションここまで
====================*/

/*====================
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;
}

/*コース・クラス紹介リード文　ＳＰ*/
.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;
    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;
    line-height: 2.5;
}

.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 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 : コース・料金ページ＿コース紹介セクションここまで
====================*/

/*====================
    section : コース・料金ページ＿クラス紹介セクションここから
 ====================*/

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


/*クラス紹介ボックス*/
.classroom-box {
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 0;
}

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

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

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

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

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

}



.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 {
    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;
}

.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;
    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;
    /* 十分大きめで*/
    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;
    margin-bottom: 8px;
}

/*体験レッスンボタン*/
.classroom-box__trial-btn {
    width: 100%;
    max-width: 400px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    display: block;
    margin: 24px auto 0;
}

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

.classroom-box__trial-btn--pc {
    display: none;
}


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

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

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

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

        padding: 88px 0;
    }

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

    .classroom-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;
    }

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

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

    .classroom-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__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;
    }

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

    .classroom-box__trial-btn--sp {
        display: none;
    }

    .classroom-box__trial-btn--pc {
        display: block;
    }

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

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

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

    /* 特徴 */
    .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;
    }
}

/*====================
    section : コース・料金ページ＿クラス紹介セクションここまで
 ====================*/


/*====================
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;
}

.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;
}

.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 : コース・料金ページ＿レッスン基本情報セクションここまで
====================*/

/*====================
section : コース・料金ページ＿料金セクションここから
（topページ共通パーツ使用）
====================*/
#course .price-section {
    background-image: none;
}

/*topページのセパレーター無し*/
#course .price-section::before,
#course .price-section::after {
    display: none;
}

#course .price-inner {
    padding-bottom: 32px;
    margin-bottom: 64px;
}

#course .price-inner::after {
    display: none;
}

.price-section--course-page {
    padding: 0;
}

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

.price-title--course-page {
    margin-bottom: 24px;
    color: #2f6f4e;
}

/*リード文 ＳＰ*/
.price-lead-mini {
    font-size: var(--font_lead_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;
    min-height: 125.46px;
}


/*補足説明*/
.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-detail-title-box {

    background-color: #fff;
    padding-top: 24px;
}

.price-detail-title {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px 52px 999px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    margin: 12px auto;
}




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

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

.illust .price-detail-title {
    background: #F47505;
}



/* 詳細リスト */
.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 {
    background-color: #D9F6F5;
    border-radius: 15px 0 0 15px;
    padding: 10px 20px;
}

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


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



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

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

    /*リード文 ＰＣ*/
    .price-lead-mini {
        min-height: 82.26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /*説明文*/
    .price-explanation {
        min-height: 125.46px;
    }

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

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

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


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

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

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

/*====================
section : コース・料金ページ＿料金セクションここまで
====================*/


/*サイト共通＿体験レッスンCTA*/
#course .trial-cta::before,
#course .trial-cta::after {
    display: none;
}

#course .common__trial-btn {
    margin-top: 0;
}

/*お問い合わせ*/
/*fqaセクションtopページ用セパレータ無し*/
#course .fqa-section::before,
#course .fqa-section::after,
#course .fqa-inner::before {
    display: none;
}

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





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

#trial .pc-nav__list li:nth-child(4) {
    box-shadow: inset 0 0 0 4px #2c9763;
}

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

/*CATボタン*/
#trial .under-page-header__cta {
    top: 10%;
}

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

/*====================
section : 体験ページ＿タイトルセクションここから
====================*/

/* 写真カード */
.trial-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;
}

/* テキストブロック */
.trial-hero__title-group {
    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;
}

/* ラベル */
.trial-hero__title {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    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;
}

/* イラスト共通 */
.trial-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;
}

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

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

.trial-hero.is-show .trial-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);
    }
}


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

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

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

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

    .hero__lead {
        font-size: var(--font_section-sub-title_font-size);
        font-weight: var(--font_section-sub-title_font-weight);
        line-height: var(--font_section-sub-title_line-height);
    }

    .trial-hero__title-group {
        max-width: 50%;
        padding: 24px 32px;
    }

    .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;
    }



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

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

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

/*====================
section : 体験ページ＿タイトルセクションここまで
====================*/

/*====================
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 {
    padding: 80px 0;
    background-color: #fdfdfd;
    background: linear-gradient(to bottom, #fff 0%, #FFF2C9 50%, #fff 100%);
    padding: 72px 0;
}

/*導入文　ＳＰ*/
.intro-worry__message {
    background-color: #fff;
    padding-bottom: 80px;
}

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

}

/*導入文＿左イラスト　ＳＰ*/
.intro-worry__message--inner::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--inner::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;
}


/* 否定文 ＳＰ*/
.intro-worry__massage--title {
    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(--font_section-sub-title_font-size);
}

/*問いかけエリア　ＳＰ*/
.intro-worry__content {
    padding-bottom: 21vw;
    /*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);
    z-index: 1;
}

/*問いかけイラストＳＰ*/
.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(--font_xs_font-size);
}

/* 不安リスト ＳＰ*/
.intro-worry__list {
    max-width: 346px;
    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;
}

/*セパレーター　ＳＰ*/
.trial-page-separator {
    position: absolute;
    width: 100%;
    bottom: -0;
    z-index: 3;
}

/*>>>>>>>>>>>>>>> 体験ページー不安セクション PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .intro-worry__content {
        padding-bottom: 15vw;
    }

    /*導入文　ＰＣ*/
    .intro-worry__message {
        position: relative;
        /*pcでの基準*/
    }

    .intro-worry__message--inner {
        position: static;
    }

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

    /*導入文＿左イラスト　ＰＣ*/
    .intro-worry__message--inner::before {
        width: 25%;
        height: 129px;
        bottom: -24px;
        left: calc(50% - 275px);
        /**/
        transform: translateX(-50%);
    }

    /*導入文右イラスト　ＰＣ*/
    .intro-worry__message--inner::after {
        width: 30%;
        height: 154px;
        top: -50%;
        right: calc(50% - 284px);
        transform: translateX(50%);
    }

}

/*<<<<<<<<min-width:768px<<<<<<<<*/
/*>>>>>>>>>>>>>>>  PC
min-width:1980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1980px) {
    .intro-worry__content {
        padding-bottom: 289px;
    }

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

/*====================
section : 体験ページ＿導入セクションここまで
====================*/


/*====================
section : 体験ページ＿サポートセクションここから
====================*/
.trial-support {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    /*background-color: #fff0be;*/
    background-image: linear-gradient(90deg, rgba(255, 247, 225, 1), rgba(234, 249, 239, 1) 20% 50%, rgba(234, 249, 239, 1) 80%, rgba(255, 247, 225, 1));
}

.trial-support::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(100% - 2px);
    width: 100%;
    aspect-ratio: 1980/223;
    background-image: linear-gradient(90deg, rgba(255, 247, 225, 1), rgba(234, 249, 239, 1) 20% 50%, rgba(234, 249, 239, 1) 80%, rgba(255, 247, 225, 1));
    -webkit-mask-image: url(../images/trial/trial-page-separator_mask.png);
    mask-image: url(../images/trial/trial-page-separator_mask.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 0;
    pointer-events: none;
}

.trial-support::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: calc(0 + 2px);
    width: 100%;
    aspect-ratio: 1980/500;
    background-image: linear-gradient(90deg, rgba(255, 247, 225, 1), rgba(234, 249, 239, 1) 20% 50%, rgba(234, 249, 239, 1) 80%, rgba(255, 247, 225, 1));
    -webkit-mask-image: url(../images/trial/trial-page-separator_mask_bottom.png);
    mask-image: url(../images/trial/trial-page-separator_mask_bottom.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center top;
    mask-mode: alpha;
    z-index: 0;
    pointer-events: none;
}

.trial-support__inner--overflow {
    width: 100%;
    overflow-x: hidden;
}

.trial-support__inner {
    max-width: 354px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.trial-support___title {
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 16px rgba(255, 255, 255, 0.4);
    margin-bottom: 32px;
}

.trial-support__title--intro {
    color: #dda868;
}


.trial-support__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    gap: 40px;
}

.trial-support__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    z-index: 2;
}

.trial-support__text {
    text-align: left;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
}

.trial-support__text p {
    align-self: flex-start;
}

/*イラスト　ＳＰ*/
.trial-support__item:nth-child(1)::before {
    position: absolute;
    content: "";
    width: 89px;
    height: 89px;
    background-image: url(../images/trial/support-obj1.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -37px;
    right: -24px;
    z-index: 2;
}

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


/*写真ＳＰ*/
.trial-support__image img {
    width: 100%;
    border-radius: 30px;
}

/*写真背景模様*/
.trial-support__background-img {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;

}

.trial-support__background-img--1 {
    background-image: url(../images/trial/trial-support_background-img--1.png);
    width: 595px;
    height: 462px;
    top: 38px;
    left: 0;
}

.trial-support__background-img--2 {
    background-image: url(../images/trial/trial-support_background-img--2.png);
    width: 598px;
    height: 454px;
    top: 45px;
    right: 0;
}


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

    .trial-support__inner {
        max-width: 756px;
        margin: 0 auto;
    }


    .trial-support___title {
        margin-bottom: 40px;
    }

    .trial-support__list {
        max-width: none;
        padding: 0;
        gap: 80px;
    }

    .trial-support__item {
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .trial-support__item:nth-child(2) {
        padding-bottom: 77px;
    }



    .trial-support__text {
        background-color: rgba(255, 255, 255, .65);
        border-radius: 15px;
        padding: 80px 80px 60px 40px;
        flex: 1.1;
        align-items: center;
        margin-top: 97px;
        gap: 40px;
    }


    /*テキストＰＣ*/
    .trial-support__item:nth-child(1) .trial-support__text {
        transform: translateX(60px);
        padding: 80px 80px 60px 40px;
        margin-right: -30px;
        margin-left: 16px;
    }

    .trial-support__item:nth-child(2) .trial-support__text {
        transform: translateX(-60px);
        padding: 80px 40px 60px 80px;
        margin-left: -30px;
        margin-right: 16px;
    }

    .trial-support__item:nth-child(even) {
        flex-direction: row-reverse;
    }

    /*イラストＰＣ*/
    .trial-support__item:nth-child(1)::before {
        width: 115px;
        height: 115px;
        top: 58px;
        left: 53px;
        transform: scalex(-1);
    }

    .trial-support__item:nth-child(2)::before {
        width: 115px;
        height: 115px;
        top: 59px;
        right: 68px;
    }

    /*写真ＰＣ*/
    .trial-support__image {
        z-index: 1;
        flex: 1
    }


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

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

/*====================
section : 体験ページ＿サポートセクションここまで
====================*/

/*====================
section : 体験ページ＿保護者の声セクションここから
====================*/
.voice {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 88px;
    background-color: #FFF6F2;
    padding: 90px 16px 64px 16px;
}

.voice-inner {
    position: relative;
    width: 100%;
    max-width: 540px;
    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: -85px;
    /* 上に重ねる */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 45px;
    border-radius: 50%;
    background-color: #FDF6D8;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
    text-align: center;
    z-index: 10;
    width: 318px;
}

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

/* バブル */
.bubble {
    position: absolute;
    background-color: #FDF6D8;
    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-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* アイテム */
.voice-item {
    position: relative;
    max-width: 400px;
    background: #fff7f7;
    background-image: url(../images/trial/voice-bgi.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;

    border-radius: 50%;
    padding: 53px;
    margin-bottom: 80px;
    box-sizing: border-box;
}

.voice-item__human {
    color: #df987e;
    margin-bottom: 16px;
    margin-left: 80px;
}

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

.voice-item::before {
    position: absolute;
    content: "";
    width: 124px;
    height: 124px;
    top: -50%;
    left: -2%;
    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: 164px 16px 64px 16px;
        margin-top: 0;
    }

    .voice-inner {
        max-width: 888px;
        padding: 88px 48px 48px 48px;
    }

    .voice-title {
        width: 524px;
        height: 163px;
        font-size: 2.2rem;
    }

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

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

    /* アイテム */
    .voice-item {
        width: 100%;
        margin-bottom: 112px;
    }

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

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


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

/*====================
section : 体験ページ＿保護者の声セクションここまで
====================*/


/*====================
section : 体験ページ＿体験レッスン概要セクションここから
====================*/

.trial-lesson-info {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    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 {
    width: 100%;
    max-width: 341px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    text-align-last: left;
}

.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: -56px;
    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;
    margin-bottom: 24px;
}

/*>>>>>>>>>>>>>>> 体験レッスン概要 PC
min-width:768px>>>>>>>>>>>>>>>*/
@media screen and (min-width:768px) {
    .trial-lesson-info {
        padding: 80px 16px;
        text-align: center;
    }

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

    .trial-lesson-info__title {
        padding-top: 80px;
    }

    /*タイトルオブジェクト*/
    .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 : 体験ページ＿体験レッスン概要セクションここまで
====================*/
/*====================
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 {
    width: 100%;
    max-width: 394px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    text-align: left;
}

.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);
}

/*====================
section : 体験ページ＿体験応募フォームここまで
====================*/


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




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

/*====================
section : よくある質問ページ＿FAQセクションここから
====================*/
#faq .pc-nav li:nth-child(5) a::after {
    opacity: 1;
}

#faq .pc-nav__list li:nth-child(5) {
    box-shadow: inset 0 0 0 4px #2c9763;
}


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


#faq .under-page-header__title-group {
    gap: 38px;
    background-position: center 32px;
    /*背景画像の縦位置調整*/
}

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

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



.faq-section-lead {
    max-width: 617px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.faq-category {
    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 {
    position: relative;
    margin-top: 24px;
    margin-left: 48px;
}

.faq-item p:first-of-type::before {
    position: absolute;
    content: "A.";
    width: 1.6rem;
    height: 1.6rem;
    left: -2rem;

}

.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セクションここまで
====================*/

/*====================
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;
}

.faq-category {
    margin: 60px 0 16px;
}

.faq-contact {
    margin-top: 120px;
}

/*フォーム　ＳＰ*/
.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-weight: bold;
    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;
    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) {
    #faq .under-page-header__title-group {
        gap: 45px;
        background-position: center 66px;
        /*背景画像の縦位置調整*/
    }

    .faq-section-lead {
        text-align: center;
    }

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

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

/*====================
section : よくある質問ページ＿問い合わせフォームここまで
====================*/

/*///////////////////////////////
page : よくある質問ページここまで
///////////////////////////////*/


/*///////////////////////////////
page : 404ページここから
///////////////////////////////*/
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: #fffdf5;
}

.error-page__inner {
    text-align: center;
    max-width: 520px;
    animation: fadeIn 0.8s ease;
}

/* イラスト */
.error-page__visual {
    margin-bottom: 24px;
}

.error-page__seed {
    width: 120px;
    animation: float 3s ease-in-out infinite;
}

/* 404数字 */
.error-page__code {
    font-size: clamp(64px, 10vw, 96px);
    color: #33b074;
    font-family: 'Kaisei Opti', serif;
    margin-bottom: 16px;
}

/* タイトル */
.error-page__title {
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
    color: #2c9763;
    margin-bottom: 12px;
}

/* 説明文 */
.error-page__text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 32px;
}

/* ボタン */
.error-page__button {
    display: inline-block;
    padding: 14px 32px;
    background-color: #33b074;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    transition: 0.3s;
}

.error-page__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ========================================
アニメーション
======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}