@charset "UTF-8";


/* =========================
   Common
========================= */

:root {
    /* Color */
    --color-text: #374151;
    --color-white: #FFFFFF;
    --color-green: #4E8F78;
    --color-banner-green: #42A683;
    --color-light-green: #99DFB2;
    --color-contact-green: #559984;
    --color-contact-hover: #4A8C78;
    --color-gold-light: #C7A24C;
    --color-gold-dark: #614F25;

    /* Font */
    --font-base: "M PLUS Rounded 1c", sans-serif;
    --font-button: "Noto Sans JP", sans-serif;
    --font-english: "Cormorant Garamond", serif;
    --font-profile: "Shippori Mincho", serif;
}


html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: var(--color-white);
}


/* 画面には表示しない見出し */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

/* =========================
   Loading
========================= */

.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    background-color: var(--color-white);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

/* ローディング終了 */

.loading.is-hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

.loading-inner {
    text-align: center;
}


/* 音符 */

.loading-notes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    height: 70px;
}

.loading-note {
    display: inline-block;

    font-family: var(--font-base);
    font-size: 42px;
    line-height: 1;

    color: var(--color-light-green);

    animation:
        loading-note 1.2s ease-in-out infinite;
}

/* ぽんぽん動くタイミングをずらす */

.loading-note01 {
    animation-delay: 0s;
}

.loading-note02 {
    animation-delay: 0.2s;
}

.loading-note03 {
    animation-delay: 0.4s;
}


/* 教室名 */

.loading-text {
    margin: 18px 0 0;

    font-family: var(--font-english);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.05em;

    color: var(--color-green);
}


/* 音符アニメーション */

@keyframes loading-note {

    0%,
    100% {
        color: var(--color-light-green);

        transform:
            translateY(0)
            scale(1);
    }

    50% {
        color: var(--color-green);

        transform:
            translateY(-10px)
            scale(1.18);
    }
}


/* =========================
   Loading - SP
========================= */

@media (max-width: 767px) {

    .loading-notes {
        gap: 16px;
        height: 60px;
    }

    .loading-note {
        font-size: 34px;
    }

    .loading-text {
        margin-top: 14px;

        font-size: 18px;
    }
}


/* 動きを減らす設定の方への配慮 */

@media (prefers-reduced-motion: reduce) {

    .loading-note {
        animation: none;
    }

    .loading {
        transition: none;
    }
}

/* =========================
   Page Fade In
========================= */

.hero,
.page-content {
    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.hero.is-show,
.page-content.is-show {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .hero,
    .page-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================
   SP Only
========================= */

.sp-only {
    display: none;
}

@media (max-width: 767px) {

    .sp-only {
        display: initial;
    }
}


/* =========================
   Header
========================= */

.header {
    width: 100%;
    background-color: var(--color-white);
}

.header-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 20px 40px;

    display: flex;
    align-items: center;
}

/* ロゴ */

.header-logo {
    width: 170px;
    flex-shrink: 0;
}

.header-logo img {
    display: block;
    width: 100%;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.header-logo a:hover img {
    opacity: 0.85;
    transform: scale(1.03);
}

/* ナビゲーション */

.header-nav {
    margin-left: auto;
}

.header-nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header-nav-list a {
    display: inline-block;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);

    white-space: nowrap;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.header-nav-list a:hover {
    opacity: 0.65;
    transform: translateY(-2px);
}

/* Instagram */

.header-instagram {
    width: 64px;
    margin-left: 36px;

    flex-shrink: 0;
}

.header-instagram a {
    display: block;
}

.header-instagram img {
    display: block;
    width: 100%;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.header-instagram a:hover img {
    opacity: 0.85;
    transform: scale(1.08);
}

/* 体験レッスンボタン */

.header-button {
    margin-left: 36px;
    flex-shrink: 0;
}

.header-button a {
    display: block;

    padding: 14px 28px;

    font-family: var(--font-button);
    font-size: 16px;
    font-weight: 500;

    color: var(--color-white);
    background-color: var(--color-green);

    white-space: nowrap;

    border-radius: 999px;

    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.18);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.header-button a:hover {
    background-color: var(--color-banner-green);
    transform: translateY(-2px);
}


/* =========================
   SP Menu - PCでは非表示
========================= */

.menu-button,
.sp-menu {
    display: none;
}

/* SPメニュー表示中は背景スクロールを止める */

body.menu-open {
    overflow: hidden;
}

/* =========================
   Header - Small PC
========================= */

@media (max-width: 1280px) {

    .header-inner {
        padding: 16px 24px;
    }

    .header-logo {
        width: 145px;
    }

    .header-nav-list {
        gap: 22px;
    }

    .header-nav-list a {
        font-size: 14px;
    }

    .header-instagram {
        width: 54px;
        margin-left: 24px;
    }

    .header-button {
        margin-left: 24px;
    }

    .header-button a {
        padding: 12px 22px;

        font-size: 14px;
    }
}


/* =========================
   Header - Tablet
   1100px以下
========================= */

@media (max-width: 1100px) {

    /* Header */

    .header-inner {
        padding: 14px 24px;
    }

    /* ロゴ */

    .header-logo {
        width: 120px;
    }

    /* PCナビ・体験レッスンボタンを非表示 */

    .header-nav,
    .header-button {
        display: none;
    }

    /* Instagram */

    .header-instagram {
        width: 46px;
        margin-left: auto;
    }


    /* ハンバーガーボタン */

    .menu-button {
        position: relative;
        z-index: 1000;

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

        gap: 6px;

        width: 42px;
        height: 42px;

        margin-left: 14px;
        padding: 0;

        background-color: transparent;
        border: 0;

        cursor: pointer;
    }

    .menu-button span {
        display: block;

        width: 30px;
        height: 3px;

        background-color: var(--color-green);

        border-radius: 999px;

        transition:
            transform 0.35s ease,
            opacity 0.25s ease,
            background-color 0.35s ease;
    }


    /* メニューを開いた時：三本線 → × */

    .menu-button.is-open span:nth-child(1) {
        transform:
            translateY(9px)
            rotate(45deg);
    }

    .menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-button.is-open span:nth-child(3) {
        transform:
            translateY(-9px)
            rotate(-45deg);
    }


    /* SP / Tablet Menu */

    .sp-menu {
        position: fixed;
        inset: 0;
        z-index: 999;

        display: block;

        padding: 80px 24px 36px;

        background-color: var(--color-light-green);

        overflow-y: auto;

        opacity: 0;
        visibility: hidden;

        /* 右上から丸く開く */
        clip-path: circle(0% at calc(100% - 36px) 36px);

        transition:
            clip-path 0.35s ease-in,
            opacity 0.25s ease,
            visibility 0s linear 0.35s;
    }


    /* メニューを開いた状態 */

    .sp-menu.is-open {
        opacity: 1;
        visibility: visible;

        clip-path: circle(150% at calc(100% - 36px) 36px);

        transition:
            clip-path 0.5s ease-out,
            opacity 0.3s ease,
            visibility 0s;
    }


    /* メニュー内ナビ */

    .sp-menu-nav {
        position: relative;
        z-index: 2;

        max-width: 300px;
        margin: 12px auto 0;
    }

    .sp-menu-nav ul {
        margin: 0;
        padding: 0;

        text-align: left;
    }

    .sp-menu-nav li + li {
        margin-top: 22px;
    }

    .sp-menu-nav a {
        display: block;
        width: 100%;
        padding: 8px 0;

        font-family: var(--font-base);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    /* PCナビと同じホバー */

    .sp-menu-nav a:hover {
        opacity: 0.65;
        transform: translateY(-2px);
    }

    /* タップ時 */

    .sp-menu-nav a:active {
        opacity: 0.65;
    }


    /* メニュー背景の音符 */

    .sp-menu-note {
        position: absolute;
        z-index: 1;

        pointer-events: none;

        opacity: 0;

        transform: scale(0.9);

        transition:
            opacity 0.5s ease,
            transform 0.5s ease;
    }

    .sp-menu.is-open .sp-menu-note {
        opacity: 1;

        transform: scale(1);
    }


    /* 大きい音符 */

    .sp-menu-note01 {
        top: 120px;
        right: 24px;

        width: 145px;
    }

    /* 左側 */

    .sp-menu-note02 {
        top: 390px;
        left: 20px;

        width: 80px;
    }

    /* 右下 */

    .sp-menu-note03 {
        right: 34px;
        bottom: 105px;

        width: 68px;
    }

    /* 左下 */

    .sp-menu-note04 {
        left: 42px;
        bottom: 32px;

        width: 95px;
    }
}

/* =========================
   Header - SP
   767px以下
========================= */

@media (max-width: 767px) {

    /* Header */

    .header-inner {
        padding: 10px 16px;
    }

    /* ロゴ */

    .header-logo {
        width: 78px;
    }

    /* Instagram */

    .header-instagram {
        width: 40px;
    }

    /* ハンバーガーボタン */

    .menu-button {
        margin-left: 12px;
    }

}


/* =========================
   Hero
========================= */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-background {
    display: block;
    width: 100%;
}

.hero-background img {
    width: 100%;
}

.hero-content {
    position: absolute;
    inset: 0;
}

/* ロゴ */

.hero-logo {
    position: absolute;
    top: 16%;
    left: 16%;

    width: 20%;
}

/* 月桂冠 */

.hero-laurel {
    position: absolute;
    top: 47%;
    left: 21%;

    width: 9%;

    margin: 0;
}

/* テキスト */

.hero-text {
    position: absolute;
    top: 63%;
    left: 13%;

    margin: 0;

    font-family: var(--font-base);

    /* 画面幅に合わせて文字も拡大・縮小 */
    font-size: clamp(16px, 1.4vw, 27px);

    font-weight: 400;
    line-height: 1.8;

    color: var(--color-text);
}

.hero-text p {
    margin: 0;
}

/* HeroのPC文章 */

.hero-text-pc {
    display: block;
}

.hero-text-pc span {
    display: block;
}

/* HeroのSP文章 */

.hero-text-sp {
    display: none;
}

/* 音符 */

.hero-note {
    position: absolute;
    display: block;

    animation: note-float 5s ease-in-out infinite;
}

.hero-note01 {
    top: 30%;
    left: 5%;
    width: 70px;

    --note-rotate: -8deg;

    animation-delay: 0s;
}

.hero-note02 {
    top: 50%;
    left: 12%;
    width: 50px;

    --note-rotate: 10deg;

    animation-delay: 0.4s;
}

.hero-note03 {
    top: 48%;
    left: 40%;
    width: 30px;

    --note-rotate: -12deg;

    animation-delay: 0.8s;
}

.hero-note04 {
    top: 55%;
    left: 48%;
    width: 32px;

    --note-rotate: 14deg;

    animation-delay: 1.2s;
}

.hero-note05 {
    top: 38%;
    left: 50%;
    width: 48px;

    --note-rotate: 12deg;

    animation-delay: 1.6s;
}

.hero-note06 {
    top: 28%;
    left: 62%;
    width: 34px;

    --note-rotate: 8deg;

    animation-delay: 2s;
}


/* =========================
   Hero - 音符アニメーション
========================= */

@keyframes note-float {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(var(--note-rotate));
    }

    50% {
        transform:
            translate(10px, -8px)
            rotate(var(--note-rotate));
    }
}


/* =========================
   Hero - SP / Tablet 共通
========================= */

@media (max-width: 767px) {

    /* ロゴ＋月桂冠 */

    .hero-brand {
        position: absolute;
        top: 13%;
        left: 50%;

        transform: translateX(-50%);
    }

    /* ロゴ */

    .hero-logo {
        position: static;
        display: block;
        width: 60%;
        margin: 0 auto;
        transform: none;
    }

    /* 月桂冠 */

    .hero-laurel {
        position: static;
        display: block;
        width: 20%;
        margin: 12px auto 0;
        transform: none;
    }

    /* HeroのPC文章 */

    .hero-text-pc {
        display: none;
    }

    /* HeroのSP文章 */

    .hero-text-sp {
        display: block;
        width: auto;
        transform: none;
        text-align: left;
    }

    .hero-text-sp p {
        margin: 0;
    }

    .hero-text-sp span {
        display: block;
    }

    /* 音符 */

    .hero-note01 {
        top: 30%;
        left: 7%;

        width: clamp(30px, 6.5vw, 50px);
    }

    .hero-note02 {
        top: 36%;
        left: 22%;

        width: clamp(18px, 5vw, 38px);
    }

    .hero-note03 {
        top: 42%;
        left: 30%;

        width: clamp(12px, 5.7vw, 44px);
    }

    .hero-note04 {
        top: 34%;
        left: 66%;

        width: clamp(23px, 3.9vw, 30px);
    }

    .hero-note05 {
        top: 38%;
        left: 80%;

        width: clamp(18px, 3.4vw, 26px);
    }

    .hero-note06 {
        top: 30%;
        left: 88%;

        width: clamp(12px, 3.7vw, 28px);
    }

}


/* =========================
   Hero - Tablet
========================= */

@media (min-width: 431px) and (max-width: 767px) {

    /* ロゴ＋月桂冠 */

    .hero-brand {
        top: 11%;
        width: 61%;
    }

    /* 月桂冠 */

    .hero-laurel {
        top: 90%;
        width: 31%;
    }

    /* テキスト */

    .hero-text-sp {
        top: 50%;
        left: 12%;

        font-size: clamp(14px, 2.8vw, 21px);
        line-height: 1.7;
    }

}


/* =========================
   Hero - SP
========================= */

@media (max-width: 430px) {

    /* ロゴ＋月桂冠 */

    .hero-brand {
        top: 11%;

        width: 64%;
    }

    /* 月桂冠 */

    .hero-laurel {
        top: 88%;

        width: 32%;
    }

    /* テキスト */

    .hero-text-sp {
        top: 50%;
        left: 7%;

        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================
   Greeting
========================= */

/* 基本設定 */

.greeting {
    padding: 90px 0 80px;
    background-color: var(--color-white);
}

.greeting-inner {
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto;
}

.greeting-title {
    width: 56%;
    margin-bottom: 55px;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 700;
    text-align: center;

    color: var(--color-green);
}

.greeting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.greeting-row-top {
    gap: 80px;
}

.greeting-text {
    width: 56%;

    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;

    color: var(--color-text);
}

.greeting-row-top .greeting-image {
    width: 320px;
    flex-shrink: 0;

    overflow: hidden;
    border-radius: 50%;
}

.greeting-row-top .greeting-image img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    margin: 0 auto;

    object-fit: cover;
    object-position: center 15%;

    border-radius: 50%;
}

.greeting-row-bottom {
    margin-top: 90px;
    gap: 80px;
}

.greeting-row-bottom .greeting-image {
    width: 320px;
    flex-shrink: 0;
}

.greeting-row-bottom .greeting-image img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 50%;
}

.greeting-message {
    width: 56%;

    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;

    color: var(--color-text);
}

.greeting-message h3 {
    margin-bottom: 35px;

    font-size: 36px;
    font-weight: 700;

    color: var(--color-green);
    text-align: center;
}

.greeting-button-area {
    margin-top: 100px;
    text-align: center;
}

.greeting-button {
    display: inline-block;

    min-width: 440px;
    padding: 14px 40px;

    font-family: var(--font-button);
    font-size: 28px;
    font-weight: 400;

    color: var(--color-white);
    background-color: var(--color-green);

    border-radius: 999px;

    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.18);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.greeting-button:hover {
    background-color: var(--color-banner-green);
    transform: translateY(-2px);
}


/* =========================
   Greeting - SP / Tablet 共通
========================= */

@media (max-width: 767px) {

    .greeting {
        padding: 60px 0 70px;
    }

    .greeting-inner {
        width: calc(100% - 48px);
        margin: 0 auto;
    }

    /* タイトル */

    .greeting-title {
        width: 100%;
        margin: 0 0 28px;

        font-size: 26px;
        text-align: center;
    }

    /* PCの横並びを縦並びへ */

    .greeting-row {
        display: flex;
        flex-direction: column;

        gap: 0;
    }

    /* 1段目 */

    .greeting-row-top {
        margin: 0;
    }

    /* ご挨拶文 */

    .greeting-text {
        font-size: 15px;
        line-height: 1.9;

        width: min(100%, 500px);
        margin: 0 auto;
    }

    /* 教室写真 */

    .greeting-row-top .greeting-image {
        width: 230px;

        margin-top: 24px;
    }

    .greeting-row-top .greeting-image img {
        width: 100%;
    }

    /* 2段目 */

    .greeting-row-bottom {
        margin-top: 90px;
    }

    .greeting-row-bottom .greeting-message {
        order: 1;
    }

    .greeting-row-bottom .greeting-image {
        order: 2;
    }

    /* 教室への思い */

    .greeting-message {
        font-size: 15px;
        line-height: 1.9;

        width: min(100%, 500px);
        margin: 0 auto;
    }

    .greeting-message h3 {
        margin: 0 0 16px;

        font-size: 24px;
        text-align: center;
    }

    /* ピアノ写真 */

    .greeting-row-bottom .greeting-image {
        width: 230px;

        margin-top: 24px;
    }

    /* プロフィールボタン */

    .greeting-button-area {
        margin-top: 40px;
    }

    .greeting-button {
        min-width: 0;
        width: 290px;

        padding: 12px 24px;

        font-size: 17px;
    }
}


/* =========================
   Trial Banner
========================= */

.trial-banner {
    padding: 80px 0;
}

.trial-banner-scale {
    width: 100%;
    margin: 0 auto;
}

.trial-banner-inner {
    position: relative;

    width: min(960px, calc(100% - 80px));
    margin: 0 auto;

    overflow: hidden;

    border-radius: 28px;
}

.trial-banner-bg {
    display: block;
}

.trial-banner-bg img {
    display: block;

    width: 100%;
    height: auto;
}

/* バナー内のコンテンツ */

.trial-banner-content {
    position: absolute;
    inset: 0;
}

/* タイトル */

.trial-banner-title {
    position: absolute;
    top: 5%;
    left: 50%;
    z-index: 10;

    width: 100%;
    margin: 0;

    transform: translateX(-50%);

    font-family: var(--font-base);
    font-size: 72px;
    font-weight: 700;
    text-align: center;

    color: var(--color-banner-green);

    -webkit-text-stroke: 9px var(--color-white);
    /* 白フチを文字の外側に見せるため */
    paint-order: stroke fill;

    text-shadow:
        0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 金額エリア */

.trial-banner-price {
    position: absolute;
    top: 33%;
    left: 5%;

    display: flex;
    align-items: center;

    width: 50%;
    height: 110px;
    padding: 10px 18px;

    background-color: var(--color-white);

    border: 2px dashed var(--color-banner-green);
    border-radius: 18px;
}

/* 体験レッスン1回 */

.trial-banner-once {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 96px;
    height: 96px;

    margin: 0 16px 0 0;
    padding: 0;

    color: var(--color-white);
    background-color: var(--color-banner-green);

    border-radius: 50%;
}

.trial-banner-once-label {
    font-family: var(--font-button);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.trial-banner-once-main {
    margin-top: 2px;

    font-family: var(--font-button);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}

/* 1,000円 */

.trial-banner-price-main {
    margin: 0;

    font-family: var(--font-base);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;

    color: var(--color-banner-green);

    white-space: nowrap;
}

.trial-banner-price-main span {
    display: inline-block;

    margin-left: 6px;

    font-size: 30px;
    font-weight: 700;
}

/* 約30分程度 */

.trial-banner-time {
    margin: 0 0 0 4px;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 700;

    color: var(--color-banner-green);

    white-space: nowrap;
}

/* 説明文 */

.trial-banner-text {
    position: absolute;
    top: 62%;
    left: 5%;

    width: 50%;
    margin: 0;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;

    color: var(--color-text);
}

/* 女の子の写真 */

.trial-banner-photo {
    position: absolute;
    top: 20%;
    right: 4%;

    width: 39%;
}

.trial-banner-photo img {
    display: block;

    width: 100%;

    border-radius: 28px;
}

/* 申込みボタン */

.trial-banner-button {
    position: absolute;
    left: 6%;
    bottom: 8%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: 460px;
    height: 72px;
    padding: 0 28px;

    font-family: var(--font-button);
    font-size: 26px;
    font-weight: 700;

    color: var(--color-white);
    background-color: var(--color-banner-green);

    border-radius: 999px;

    box-shadow:
        0 5px 7px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.trial-banner-button img {
    width: 60px;
    height: auto;

    flex-shrink: 0;
}

.trial-banner-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* 白丸メッセージ */

.trial-banner-note {
    position: absolute;
    right: 2%;
    bottom: 4%;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 190px;
    aspect-ratio: 1 / 1;

    background-color: var(--color-white);

    border: none;
    border-radius: 50%;

    box-shadow:
        0 5px 7px rgba(0, 0, 0, 0.2);
}

/* 白丸の内側ステッチ */

.trial-banner-note::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 3px dashed var(--color-banner-green);
    border-radius: 50%;

    pointer-events: none;
}

.trial-banner-note-icon {
    display: block;

    width: 38px;
    height: auto;

    flex-shrink: 0;
}

.trial-banner-note-text {
    margin: 0;

    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;

    color: var(--color-banner-green);
}


/* =========================
   Trial Banner - SP / Tablet
   631px〜1100px
========================= */

@media (min-width: 631px) and (max-width: 1100px) {

    .trial-banner {
        padding: 60px 0;
    }

    .trial-banner-scale {
        overflow: visible;
    }

    .trial-banner-inner {
        width: calc(100% - 40px);
        max-width: 720px;
        margin: 0 auto;

        border-radius: 24px;
    }

    /* タイトル */

    .trial-banner-title {
        top: 6%;
        left: 50%;

        width: 94%;

        transform: translateX(-50%);

        font-size: clamp(36px, 7vw, 56px);

        -webkit-text-stroke: 8px var(--color-white);

        text-shadow:
            0 3px 4px rgba(0, 0, 0, 0.18);
    }

    /* 金額エリア */

    .trial-banner-price {
        top: 18%;
        left: 50%;

        display: grid;
        grid-template-columns: 115px auto;
        grid-template-rows: auto auto;
        justify-content: center;
        align-items: center;

        column-gap: 16px;

        width: 72%;
        height: 150px;
        padding: 12px 18px;

        transform: translateX(-50%);

        background-color: var(--color-white);

        border: 4px dashed var(--color-banner-green);
        border-radius: 26px;
    }

    /* 体験レッスン1回 */

    .trial-banner-once {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 115px;
        height: 115px;

        margin: 0;
    }

    .trial-banner-once-label {
        font-size: 13px;
    }

    .trial-banner-once-main {
        font-size: 32px;
    }

    /* 1,000円 */

    .trial-banner-price-main {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        margin: 0;

        font-size: clamp(42px, 7vw, 58px);
        text-align: center;
    }

    .trial-banner-price-main span {
        margin-left: 4px;

        font-size: 25px;
    }

    /* 約30分程度 */

    .trial-banner-time {
        position: static;

        grid-column: 2;
        grid-row: 2;

        align-self: start;

        margin: 4px 0 0;

        font-size: 17px;
        text-align: center;
    }

    /* 説明文 */

    .trial-banner-text {
        top: 38%;
        left: 50%;

        width: 72%;

        transform: translateX(-50%);

        font-size: clamp(15px, 2.2vw, 20px);
        line-height: 1.7;
        text-align: center;
    }

    /* 写真 */

    .trial-banner-photo {
        top: 49%;
        left: 7%;
        right: auto;

        width: 60%;
    }

    .trial-banner-photo img {
        border-radius: 24px;
    }

    /* 白丸メッセージ */

    .trial-banner-note {
        top: 51%;
        right: 4%;
        bottom: auto;

        width: 36%;

        gap: 8px;
    }

    .trial-banner-note-icon {
        width: 36px;
    }

    .trial-banner-note-text {
        font-size: clamp(13px, 2vw, 17px);
        line-height: 1.7;
    }

    /* 申込みボタン */

    .trial-banner-button {
        left: 50%;
        bottom: 6%;

        width: 72%;
        height: 68px;
        padding: 0 20px;

        transform: translateX(-50%);

        gap: 12px;

        font-size: clamp(16px, 2.6vw, 22px);
    }

    .trial-banner-button img {
        width: 42px;
    }

    .trial-banner-button:hover {
        transform:
            translateX(-50%)
            translateY(-2px);
    }
}


/* =========================
   Trial Banner - Small SP
   630px以下
========================= */

@media (max-width: 630px) {

    .trial-banner {
        padding: 50px 0;
    }

    .trial-banner-scale {
        overflow: visible;
    }

    .trial-banner-inner {
        width: calc(100% - 32px);
        max-width: 390px;
        margin: 0 auto;

        border-radius: 24px;
    }

    /* タイトル */

    .trial-banner-title {
        top: 6%;
        left: 50%;

        width: 94%;

        transform: translateX(-50%);

        font-size: clamp(30px, 8.5vw, 36px);
        line-height: 1.2;

        white-space: nowrap;

        -webkit-text-stroke: 6px var(--color-white);

        text-shadow:
            0 3px 4px rgba(0, 0, 0, 0.18);
    }

    /* 金額エリア */

    .trial-banner-price {
        top: 16%;
        left: 50%;

        display: grid;
        grid-template-columns: 88px 1fr;
        grid-template-rows: 1fr auto;
        align-items: center;

        column-gap: 10px;

        width: 78%;
        height: 108px;
        padding: 8px 12px;

        transform: translateX(-50%);

        border: 3px dashed var(--color-banner-green);
        border-radius: 22px;
    }

    /* 体験レッスン1回 */

    .trial-banner-once {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 82px;
        height: 82px;

        margin: 0;
    }

    .trial-banner-once-label {
        font-size: 10px;
    }

    .trial-banner-once-main {
        margin-top: 3px;

        font-size: 26px;
    }

    /* 1,000円 */

    .trial-banner-price-main {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        margin: 0;

        font-size: clamp(36px, 10vw, 44px);
        line-height: 1;
        text-align: center;
    }

    .trial-banner-price-main span {
        margin-left: 3px;

        font-size: 19px;
    }

    /* 約30分程度 */

    .trial-banner-time {
        position: static;

        grid-column: 2;
        grid-row: 2;

        align-self: start;

        margin: 5px 0 0;

        font-size: 13px;
        text-align: center;
    }

    /* 説明文 */

    .trial-banner-text {
        top: 38%;
        left: 50%;

        width: 84%;

        transform: translateX(-50%);

        font-size: 13px;
        line-height: 1.8;
        text-align: center;
    }

    /* 写真 */

    .trial-banner-photo {
        top: 48%;
        left: 7%;
        right: auto;

        width: 62%;
    }

    /* 白丸メッセージ */

    .trial-banner-note {
        top: 50%;
        right: 3%;
        bottom: auto;

        width: 40%;

        gap: 5px;
    }

    .trial-banner-note-icon {
        width: 26px;
    }

    .trial-banner-note-text {
        font-size: clamp(10px, 3vw, 12px);
        line-height: 1.6;
    }

    /* 申込みボタン */

    .trial-banner-button {
        left: 50%;
        bottom: 7%;

        width: 74%;
        height: 56px;
        padding: 0 14px;

        transform: translateX(-50%);

        gap: 8px;

        font-size: clamp(13px, 3.8vw, 16px);

        white-space: nowrap;
    }

    .trial-banner-button img {
        width: 32px;
    }

    .trial-banner-button:hover {
        transform:
            translateX(-50%)
            translateY(-2px);
    }
}


/* =========================
   Feature
========================= */
/* 基本 */

.feature {
    padding: 90px 0 120px;

    background-image:
        url("../images/background/feature.png");

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

@media (min-width: 1600px) {
    .feature {
        background-size: 1600px auto;
    }
}

.feature-inner {
    width: min(1120px, calc(100% - 80px));
    margin: 0 auto;
}

/* 見出し */

.feature-heading {
    margin-bottom: 80px;
    text-align: center;
}

.feature-heading h2 {
    margin: 0;

    font-family: var(--font-base);
    font-size: 32px;
    font-weight: 700;

    color: var(--color-green);
}

.feature-heading p {
    margin: 32px 0 0;

    font-family: var(--font-base);
    font-size: 22px;
    font-weight: 500;

    color: var(--color-text);
}

/* 特徴カード全体 */

.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 90px 60px;
}

/* 特徴カード */

.feature-item {
    width: 300px;
    min-height: 260px;

    padding: 28px 32px 32px;

    text-align: center;

    background-color: var(--color-white);

    border-radius: 0 0 20px 20px;

    box-shadow:
        0 5px 8px rgba(0, 0, 0, 0.15);
}

/* 01〜05 */

.feature-number {
    display: block;

    margin-bottom: 24px;

    font-family: "Bodoni 72", "Didot", serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;

    color: var(--color-light-green);
}

/* カードタイトル */

.feature-item h3 {
    margin: 0 0 22px;

    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 700;

    color: var(--color-green);
}

/* カード本文 */

.feature-item p {
    margin: 0;

    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    text-align: left;

    color: var(--color-text);
}




/* =========================
   Feature - Tablet
========================= */

@media (min-width: 768px) and (max-width: 1055px) {

    .feature-list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;

        gap: 36px;
    }
}


/* =========================
   Feature - SP
========================= */

@media (max-width: 767px) {

    .feature {
        padding: 60px 0 80px;

        /* SP用背景：上＋下 */
        background-image:
            url("../images/background/feature-sp01.png"),
            url("../images/background/feature-sp02.png");

        background-repeat:
            no-repeat,
            no-repeat;

        background-position:
            center top,
            center bottom;

        background-size:
            100% auto,
            100% auto;
    }

    .feature-inner {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    /* 見出し */

    .feature-heading {
        margin-bottom: 42px;
        text-align: center;
    }

    .feature-heading h2 {
        margin: 0;
        font-size: 24px;
    }

    .feature-heading p {
        width: 90%;
        margin: 26px auto 0;

        font-size: 15px;
        line-height: 1.9;
    }

    /* カードを1列にする */

    .feature-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;

        gap: 30px;
    }

    /* カード */

    .feature-item {
        width: min(280px, calc(100% - 40px));
        min-height: 0;

        padding: 30px 24px 26px;

        border-radius: 20px;
    }

    /* 数字 */

    .feature-number {
        margin-bottom: 26px;

        font-size: 66px;
    }

    /* タイトル */

    .feature-item h3 {
        margin: 0 0 18px;

        font-size: 17px;
        line-height: 1.5;
    }

    /* 本文 */

    .feature-item p {
        font-size: 14px;
        line-height: 1.7;
    }
}


/* =========================
   MMG
   PC共通
========================= */

.mmg {
    padding: 100px 0;

    background-color: var(--color-white);
}

.mmg-inner {
    width: min(1080px, calc(100% - 80px));
    margin: 0 auto;
}


/* タイトル */

.mmg-heading {
    position: relative;

    height: 120px;

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

    background-color: var(--color-green);

    border-radius: 32px 32px 0 0;

    overflow: hidden;
}

.mmg-heading h2 {
    position: relative;
    z-index: 2;

    margin: 0;
    padding-bottom: 14px;

    font-family: var(--font-base);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;

    color: var(--color-white);

    white-space: nowrap;
}

/* タイトル下の点線 */

.mmg-heading h2::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 620px;

    transform: translateX(-50%);

    border-bottom: 2px dashed rgba(255, 255, 255, 0.65);
}

/* 左の音符 */

.mmg-heading::before {
    content: "♪";

    position: absolute;
    left: 55px;
    bottom: 20px;

    font-family: var(--font-base);
    font-size: 38px;
    font-weight: 400;

    color: rgba(255, 255, 255, 0.55);

    transform: rotate(-12deg);
}

/* 右の音符 */

.mmg-heading::after {
    content: "♫";

    position: absolute;
    right: 55px;
    top: 18px;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 400;

    color: rgba(255, 255, 255, 0.55);

    transform: rotate(10deg);
}


/* 本文エリア */

.mmg-content {
    position: relative;

    min-height: 520px;
    padding: 45px 60px 35px;

    border-right: 3px solid var(--color-green);
    border-bottom: 3px solid var(--color-green);
    border-left: 3px solid var(--color-green);

    border-radius: 0 0 32px 32px;

    overflow: hidden;
}


/* キャッチコピー */

.mmg-catch {
    position: relative;
    z-index: 3;

    margin: 0;

    font-family: var(--font-base);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;

    color: var(--color-green);

    white-space: nowrap;
}

.mmg-catch span {
    font-size: 1.35em;
    font-weight: 700;
}


/* 背景の Music Mind Games */

.mmg-background-text {
    position: absolute;
    top: 135px;
    left: 45px;
    z-index: 0;

    font-family: var(--font-button);
    font-size: 100px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0.03em;

    color: rgba(153, 223, 178, 0.38);

    pointer-events: none;
}


/* 説明文 */

.mmg-text {
    position: relative;
    z-index: 2;

    width: fit-content;
    margin: 50px auto 0;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;

    color: var(--color-text);
}

.mmg-text p {
    margin: 0;
}

.mmg-text p + p {
    margin-top: 10px;
}


/* 写真 */

.mmg-images {
    position: relative;
    z-index: 2;

    width: 58%;
    margin: 35px 0 0 auto;

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

    gap: 24px;
}

.mmg-images img {
    display: block;

    width: calc((100% - 48px) / 3);
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 6px solid var(--color-white);
    border-radius: 18px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.14);

    transition: transform 0.3s ease;
}

.mmg-images img:nth-child(1) {
    transform: rotate(-4deg) translateY(6px);
}

.mmg-images img:nth-child(2) {
    transform: rotate(2deg) translateY(-8px);
}

.mmg-images img:nth-child(3) {
    transform: rotate(-2deg) translateY(5px);
}


/* 詳しくはこちら */

.mmg-button-area {
    position: relative;
    z-index: 3;

    margin-top: 35px;

    text-align: center;
}

.mmg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 260px;
    height: 58px;
    padding: 0 35px;

    font-family: var(--font-button);
    font-size: 20px;
    font-weight: 500;

    color: var(--color-white);
    background-color: var(--color-green);

    border-radius: 999px;

    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.mmg-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}


/* =========================
   MMG - Tablet
   768px〜999px
========================= */

@media (min-width: 768px) and (max-width: 999px) {

    /* 全体 */

    .mmg {
        padding: 80px 0;
    }

    .mmg-inner {
        width: calc(100% - 60px);
    }


    /* タイトル */

    .mmg-heading {
        height: 100px;

        border-radius: 26px 26px 0 0;
    }

    .mmg-heading h2 {
        padding-bottom: 12px;

        font-size: 32px;
    }

    .mmg-heading h2::after {
        width: 75%;
    }

    .mmg-heading::before {
        left: 30px;
        bottom: 18px;

        font-size: 30px;
    }

    .mmg-heading::after {
        right: 30px;
        top: 16px;

        font-size: 28px;
    }


    /* 本文エリア */

    .mmg-content {
        min-height: 0;

        padding: 40px 40px 35px;

        border-radius: 0 0 26px 26px;
    }


    /* キャッチコピー */

    .mmg-catch {
        font-size: clamp(19px, 2.3vw, 23px);
    }

    .mmg-catch span {
        font-size: 1.3em;
    }


    /* 背景文字 */

    .mmg-background-text {
        top: 135px;
        left: 30px;

        font-size: 105px;
    }


    /* 説明文 */

    .mmg-text {
        margin-top: 45px;

        font-size: clamp(15px, 1.7vw, 16px);
    }


    /* 写真 */

    .mmg-images {
        width: 68%;
        margin: 40px 0 0 auto;

        gap: 16px;
    }

    .mmg-images img {
        width: calc((100% - 32px) / 3);

        border: 5px solid var(--color-white);
        border-radius: 16px;
    }


    /* ボタン */

    .mmg-button {
        min-width: 230px;
        height: 54px;
        padding: 0 30px;

        font-size: 18px;
    }
}


/* =========================
   MMG - SP
   548px〜767px
========================= */

@media (min-width: 548px) and (max-width: 767px) {

    /* 全体 */

    .mmg {
        padding: 60px 0;
    }

    .mmg-inner {
        width: calc(100% - 40px);
    }


    /* タイトル */

    .mmg-heading {
        height: 78px;

        border-radius: 20px 20px 0 0;
    }

    .mmg-heading h2 {
        padding-bottom: 10px;

        font-size: clamp(16px, 4.3vw, 22px);
    }

    .mmg-heading h2::after {
        width: 90%;

        border-bottom-width: 1.5px;
    }

    .mmg-heading::before {
        left: 14px;
        bottom: 12px;

        font-size: 24px;
    }

    .mmg-heading::after {
        right: 14px;
        top: 10px;

        font-size: 22px;
    }


    /* 本文エリア */

    .mmg-content {
        min-height: 0;

        padding: 38px 18px 32px;

        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;

        border-radius: 0 0 24px 24px;
    }


    /* キャッチコピー */

    .mmg-catch {
        width: 92%;
        margin: 0 auto;

        font-size: clamp(20px, 3.6vw, 24px);
        line-height: 1.6;

        white-space: normal;
    }

    .mmg-catch span {
        font-size: 1.3em;
    }


    /* 背景文字 */

    .mmg-background-text {
        top: 120px;
        left: 42px;

        font-size: 90px;
    }


    /* 説明文 */

    .mmg-text {
        width: 94%;
        margin: 42px auto 0;

        font-size: 18px;
        line-height: 2;

        text-align: center;
    }


    /* 写真 */

    .mmg-images {
        width: 100%;
        margin: 105px auto 0;

        gap: 8px;
    }

    .mmg-images img {
        width: calc((100% - 16px) / 3);

        border: 4px solid var(--color-white);
        border-radius: 12px;
    }


    /* ボタン */

    .mmg-button-area {
        margin-top: 32px;
    }

    .mmg-button {
        min-width: 190px;
        height: 48px;
        padding: 0 28px;

        font-size: 16px;
    }
}


/* =========================
   MMG - Small SP
   547px以下
========================= */

@media (max-width: 547px) {

    /* 全体 */

    .mmg {
        padding: 60px 0;
    }

    .mmg-inner {
        width: calc(100% - 40px);
    }


    /* タイトル */

    .mmg-heading {
        height: 72px;

        border-radius: 20px 20px 0 0;
    }

    .mmg-heading h2 {
        padding-bottom: 8px;

        font-size: clamp(15px, 4vw, 20px);
    }

    .mmg-heading h2::after {
        width: 88%;

        border-bottom-width: 1.5px;
    }

    .mmg-heading::before {
        left: 14px;
        bottom: 12px;

        font-size: 22px;
    }

    .mmg-heading::after {
        right: 14px;
        top: 10px;

        font-size: 20px;
    }


    /* 本文エリア */

    .mmg-content {
        min-height: 0;

        padding: 30px 14px 28px;

        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;

        border-radius: 0 0 24px 24px;
    }


    /* キャッチコピー */

    .mmg-catch {
        width: 100%;
        margin: 0 auto;

        font-size: clamp(17px, 4.3vw, 22px);
        line-height: 1.45;

        text-align: center;
        white-space: normal;
    }

    .mmg-catch span {
        font-size: 1.2em;
    }


    /* 背景文字 */

    .mmg-background-text {
        top: 115px;
        left: 24px;

        font-size: clamp(62px, 20vw, 78px);
        line-height: 0.9;

        color: rgba(153, 223, 178, 0.32);
    }


    /* 説明文 */

    .mmg-text {
        width: 100%;
        margin: 34px auto 0;

        font-size: clamp(13px, 3.8vw, 15px);
        line-height: 1.9;

        text-align: center;
    }

    .mmg-text p + p {
        margin-top: 8px;
    }


    /* 写真 */

    .mmg-images {
        width: 92%;
        margin: 70px auto 0;

        gap: 6px;
    }

    .mmg-images img {
        width: calc((100% - 12px) / 3);

        border: 3px solid var(--color-white);
        border-radius: 10px;
    }


    /* ボタン */

    .mmg-button-area {
        margin-top: 28px;
    }

    .mmg-button {
        min-width: 180px;
        height: 46px;
        padding: 0 24px;

        font-size: 15px;
    }
}


/* =========================
   Voice
========================= */

.voice {
    position: relative;

    padding: 180px 0 160px;

    overflow: hidden;

    background-color: var(--color-white);
}

/* 上下の背景 */

.voice::before,
.voice::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 0;

    width: 100%;

    background-repeat: no-repeat;
    background-size: 100% auto;

    pointer-events: none;
}

.voice::before {
    top: 0;
    height: 34.25vw;

    background-image:
        url("../images/background/voice-bg-top.png");

    background-position: center top;
}

.voice::after {
    bottom: 0;
    height: 34.25vw;

    background-image:
        url("../images/background/voice-bg-bottom.png");

    background-position: center bottom;
}

@media (min-width: 1700px) {
    .voice::before,
    .voice::after {
        height: 582px;
        background-size: 1700px auto;
    }
}


.voice-inner {
    position: relative;
    z-index: 1;

    width: min(1120px, calc(100% - 80px));
    margin: 0 auto;
}

/* 見出し */

.voice-heading {
    position: relative;

    margin-top: 30px;

    text-align: center;
}

.voice-heading h2 {
    margin: 0;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 700;

    color: var(--color-green);
}

.voice-heading p {
    margin: 8px 0 0;

    font-family: var(--font-english);
    font-size: 24px;
    font-weight: 500;

    background:
        linear-gradient(
            90deg,
            var(--color-gold-light),
            var(--color-gold-dark)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

/* 見出し横の装飾 */

.voice-heading::before,
.voice-heading::after {
    content: "";

    position: absolute;
    top: 15px;

    width: 115px;
    height: 28px;

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

.voice-heading::before {
    left: calc(50% - 245px);

    background-image:
        url("../images/illustration/heading-line-left.png");

    background-position: right center;
}

.voice-heading::after {
    right: calc(50% - 245px);

    background-image:
        url("../images/illustration/heading-line-right.png");

    background-position: left center;
}

/* リード文 */

.voice-lead {
    margin: 48px 0 0;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
    text-align: center;

    color: var(--color-text);
}

/* カード全体 */

.voice-list,
.voice-more {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;

    margin-top: 64px;
}

/* カード */

.voice-card {
    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 28px 24px 22px;

    background-color: var(--color-white);

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 5px 9px rgba(0, 0, 0, 0.14);
}

/* カード上部 */

.voice-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.voice-card-heading img {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    object-fit: contain;
}

.voice-card-heading h3 {
    margin: 2px 0 0;

    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;

    color: var(--color-green);
}

/* カード本文 */

.voice-card-text {
    margin: 24px 0 22px;

    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;

    color: var(--color-text);
}

/* カード下の属性 */

.voice-card-info {
    margin: auto 0 0;
    padding: 7px 14px;

    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    text-align: center;

    color: var(--color-text);
    background-color: var(--color-light-green);

    border-radius: 999px;

    white-space: nowrap;
}

/* もっと見る・閉じるボタン */

.voice-more-button,
.voice-close-button {
    display: block;

    width: 230px;
    height: 56px;

    margin: 64px auto 0;
    padding: 0;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 500;

    color: var(--color-green);
    background-color: var(--color-white);

    border: 1.5px solid var(--color-green);
    border-radius: 999px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.voice-more-button:hover,
.voice-close-button:hover {
    color: var(--color-white);
    background-color: var(--color-green);

    transform: translateY(-2px);
}

.voice-lead-sp {
    display: none;
}


/* =========================
   Voice - もっと見る
========================= */

/* 追加の口コミ：閉じている状態 */

.voice-more {
    max-height: 0;
    margin-top: 0;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    transform: translateY(-10px);

    transition:
        max-height 0.6s ease,
        margin-top 0.6s ease,
        opacity 0.35s ease,
        transform 0.45s ease,
        visibility 0s linear 0.6s;
}


/* 追加の口コミ：開いた状態 */

.voice-more.is-open {
    max-height: 1500px;
    margin-top: 64px;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    transition:
        max-height 0.7s ease,
        margin-top 0.6s ease,
        opacity 0.45s ease 0.1s,
        transform 0.5s ease,
        visibility 0s;
}


/* 最初は閉じるボタンを非表示 */

.voice-close-button {
    display: none;
}


/* 口コミを開いたときだけ表示 */

.voice-close-button.is-open {
    display: block;
}

/* =========================
   Voice - Tablet
   768px〜1071px
========================= */

@media (max-width: 1071px) and (min-width: 768px) {

    /* リード文 */
    .voice-lead {
        font-size: clamp(15px, 1.7vw, 18px);
    }


    /* カード全体 */

    .voice-list,
    .voice-more {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }

    /* カード上部 */

    .voice-card-heading {
        align-items: center;
    }


    /* カードタイトル */

    .voice-card-heading h3 {
        font-size: 16px;
    }

    /* 3枚目を中央に配置 */

    .voice-list .voice-card:nth-child(3),
    .voice-more .voice-card:nth-child(3) {
        grid-column: 1 / 3;

        width: calc((100% - 36px) / 2);
        justify-self: center;
    }

}


/* =========================
   Voice - SP
========================= */

@media (max-width: 767px) {

    .voice {
        position: relative;
        padding: 150px 0 140px;
        overflow: hidden;
        background-color: var(--color-white);
    }

    /* 上下の背景 */

    .voice::before,
    .voice::after {
        content: "";

        position: absolute;
        left: 0;
        z-index: 0;

        width: 100%;

        background-repeat: no-repeat;
        background-size: 100% auto;

        pointer-events: none;
    }

    .voice::before {
        top: 0;

        height: 330px;

        background-image:
            url("../images/background/voice-bg-top-sp.png");

        background-position: center top;
    }

    .voice::after {
        bottom: 0;

        height: 420px;

        background-image:
            url("../images/background/voice-bg-bottom-sp.png");

        background-position: center bottom;
    }


    /* 内側 */

    .voice-inner {
        position: relative;
        z-index: 1;

        width: calc(100% - 48px);
        margin: 0 auto;
    }


    /* 見出し */

    .voice-heading {
        position: relative;
        margin-top: 40px;
        text-align: center;
    }

    .voice-heading h2 {
        margin: 0;

        font-size: 26px;
        font-weight: 700;

        color: var(--color-green);
    }

    .voice-heading p {
        margin: 6px 0 0;

        font-size: 18px;
    }


    /* 見出し横の装飾 */

    .voice-heading::before,
    .voice-heading::after {
        top: 12px;

        width: 70px;
        height: 20px;
    }

    .voice-heading::before {
        left: calc(50% - 170px);
    }

    .voice-heading::after {
        right: calc(50% - 170px);
    }


    /* リード文 */

    .voice-lead {
        width: 90%;
        margin: 38px auto 0;

        font-size: 15px;
        line-height: 2;

        text-align: center;
    }

    /* SPだけ改行を表示 */

    .voice-lead-sp {
        display: inline;
    }


    /* カード全体 */

    .voice-list,
    .voice-more {
        grid-template-columns: 1fr;
        gap: 48px;
        width: 100%;
    }

    .voice-list {
        margin-top: 55px;
    }

    /* カード */

    .voice-card {
        width: 100%;
        max-width: 470px;
        min-height: 0;

        margin: 0 auto;
        padding: 30px 20px 26px;

        background-color: var(--color-white);

        border-radius: 20px;

        box-shadow:
            0 5px 9px rgba(0, 0, 0, 0.14);
    }


    /* カード上部 */

    .voice-card-heading {
        align-items: center;

        width: 100%;

        gap: 16px;
    }

    .voice-card-heading img {
        width: 52px;
        height: 52px;
    }

    .voice-card-heading h3 {
        margin: 0;

        font-size: 18px;
        line-height: 1.7;
    }


    /* カード本文 */

    .voice-card-text {
        width: calc(100% - 24px);

        margin: 28px auto 0;

        font-size: 15px;
    }


    /* カード下の属性 */

    .voice-card-info {
        width: 88%;

        margin: 34px auto 0;
        padding: 8px 12px;

        font-size: 12px;
    }


    /* もっと見る・閉じるボタン */

    .voice-more-button,
    .voice-close-button {
        width: 200px;
        height: 50px;

        margin: 42px auto 0;

        font-size: 15px;
    }

    /* もっと見るボタン */

    .voice-more-button {
        display: block;
    }


    /* 閉じるボタン */

    .voice-close-button {
        display: none;
    }

    .voice-close-button.is-open {
        display: block;
    }


    /* 追加カード */

    .voice-more.is-open {
        margin-top: 42px;
    }


    /* 閉じるボタン */

    .voice-close-button {
        position: relative;
        z-index: 2;

        margin-top: 42px;
    }
}

/* =========================
   Course
========================= */

.course {
    padding: 100px 0 120px;

    background-color: var(--color-white);
}

.course-inner {
    width: min(1000px, calc(100% - 40px));
    margin: 0 auto;
}

/* 見出し */

.course-heading {
    margin-bottom: 70px;

    text-align: center;
}

.course-heading h2 {
    margin: 0;

    font-family: var(--font-base);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;

    color: var(--color-green);
}

.course-heading p {
    margin: 28px 0 0;

    font-family: var(--font-base);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 400;
    line-height: 2;

    color: var(--color-text);
}

/* コース一覧 */

.course-list {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/* 各コース */

.course-item {
    display: grid;

    grid-template-columns:
        clamp(190px, 24vw, 280px)
        minmax(0, 620px);

    grid-template-rows:
        auto
        auto;

    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 0 auto;

    transform: translateX(-80px);
}

/* コースアイコン */

.course-icon {
    grid-column: 1;
    grid-row: 1;

    width: clamp(130px, 15vw, 180px);

    margin: 0;

    justify-self: end;
    align-self: center;
}

.course-icon img {
    display: block;

    width: 100%;
    height: auto;
}

/* 右の本文 */

.course-content {
    display: grid;

    grid-column: 2;
    grid-row: 1 / 3;

    grid-template-rows:
        auto
        auto
        auto;

    width: 100%;
    min-width: 0;
}

/* コースタイトル */

.course-content h3 {
    grid-row: 1;

    margin: 0;

    font-family: var(--font-base);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;

    color: var(--color-green);
}

/* タイトル下のライン */

.course-line {
    grid-row: 2;

    display: block;

    width: 100%;
    max-width: 620px;
    height: auto;

    margin: 10px 0 14px;
}

/* 本文 */

.course-content p {
    grid-row: auto;

    width: 100%;
    max-width: 620px;
    margin: 0;

    font-family: var(--font-base);
    font-size: clamp(14px, 1.35vw, 16px);
    font-weight: 400;
    line-height: 1.9;

    color: var(--color-text);
}

.course-content p + p {
    margin-top: 8px;
}

/* 教材見出し */

.course-content h4 {
    margin: 20px 0 8px;

    font-family: var(--font-base);
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 700;

    color: var(--color-green);
}

/* =========================
   Course - SP
   767px以下
========================= */

@media (max-width: 767px) {

    /* SPでは教材の改行を解除 */
    .course-pc-br {
        display: none;
    }

    /* 601〜767pxで中央寄りに整える */
    .course-item {
        width: min(100%, 680px);

        grid-template-columns:
            150px
            minmax(0, 1fr);

        transform: translateX(-8px);
    }

    /* アイコン */
    .course-icon {
        width: 120px;

        justify-self: center;
    }
}


/* =========================
   Course - Small SP
   600px以下
========================= */

@media (max-width: 600px) {

    .course {
        padding: 70px 0 90px;
    }

    .course-inner {
        width: calc(100% - 40px);
    }

    /* 見出し */

    .course-heading {
        margin-bottom: 55px;
    }

    .course-heading h2 {
        font-size: 26px;
    }

    .course-heading p {
        font-size: 15px;
        line-height: 1.9;
    }

    /* 一覧 */

    .course-list {
        gap: 60px;
    }

    /* 1つのコース */
    .course-item {
        grid-template-columns: 64px 1fr;
        column-gap: 12px;
        align-items: center;
        transform: none;
    }

    /* アイコン */
    .course-icon {
        width: 64px;

        justify-self: center;
    }

    /* 右側をいったんcontents化 */
    .course-content {
        display: contents;
    }

    /* タイトル */
    .course-content h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: center;

        font-size: clamp(16px, 4.2vw, 18px);
        line-height: 1.5;
    }

    /* ライン */
    .course-line {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        width: 100%;
        margin: 0;

        transform: translateY(10px);
    }

    /* 本文 */
    .course-content p {
        grid-column: 1 / -1;

        width: 100%;
        max-width: none;

        margin-top: 24px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* 主な教材 */
    .course-content h4 {
        grid-column: 1 / -1;

        margin: 18px 0 0;

        font-size: 15px;
    }

}


/* =========================
   Gallery
========================= */

.gallery {
    padding: 100px 0 120px;

    background-color: var(--color-white);
}

.gallery-inner {
    width: min(1100px, calc(100% - 80px));
    margin: 0 auto;
}

/* 見出し */

.gallery-heading {
    position: relative;

    margin-bottom: 60px;

    text-align: center;
}

.gallery-heading h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 700;

    color: var(--color-green);
}

.gallery-decoration {
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 0;

    width: 250px;

    transform: translateX(-50%);

    pointer-events: none;
}

.gallery-heading p {
    position: relative;
    z-index: 2;

    margin: 48px 0 0;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 400;
    line-height: 2;

    color: var(--color-text);
}

/* メイン画像 */

.gallery-main {
    width: 600px;
    margin: 0 auto;
}

.gallery-main img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 6px;

    transition: opacity 0.3s ease;
}

/* サムネイル */

.gallery-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    width: 100%;
    margin-top: 30px;
}

.gallery-slide {
    width: 155px;
    flex-shrink: 0;
}

.gallery-slide img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 6px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-slide img:hover {
    transform: translateY(-6px) scale(1.03);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15);
}

.gallery-slide img.is-active {
    outline: 3px solid var(--color-light-green);
    outline-offset: 4px;
}

/* =========================
   Gallery - Tablet
   768px〜1100px
========================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .gallery-slider {
        gap: 12px;
    }

    .gallery-slide {
        width: calc((100% - 60px) / 6);
        min-width: 0;
    }
}


/* =========================
   Gallery - SP
========================= */

@media (max-width: 767px) {

    .gallery {
        padding: 70px 0 90px;
    }

    .gallery-inner {
        width: calc(100% - 40px);
    }

    /* 見出し */

    .gallery-heading {
        margin-bottom: 45px;
    }

    .gallery-heading h2 {
        font-size: 26px;
    }

    .gallery-decoration {
        top: -12px;
        width: 180px;
    }

    .gallery-heading p {
        width: min(100%, 280px);
        margin: 36px auto 0;

        font-size: 15px;
        line-height: 1.9;
    }

    /* メイン画像 */

    .gallery-main {
        width: 100%;
    }

    .gallery-main img {
        border-radius: 8px;
    }

    /* サムネイル */

    .gallery-slider {
        justify-content: flex-start;

        gap: 10px;

        margin-top: 18px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 6px 4px 12px;

        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;
    }

    .gallery-slide {
        width: 31%;
        min-width: 31%;

        scroll-snap-align: start;
    }

    .gallery-slide img {
        border-radius: 6px;
    }

    /* SPではhoverの浮き上がりを無効 */

    .gallery-slide img:hover {
        transform: none;
        box-shadow: none;
    }
}


/* =========================
   Competition
========================= */

.competition {
    padding: 110px 0 130px;

    background-color: var(--color-white);
}

.competition-inner {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}

/* 見出し */

.competition-heading {
    position: relative;

    text-align: center;
}

.competition-heading h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 700;

    color: var(--color-green);
}

/* タイトル後ろの装飾 */

.competition-decoration {
    position: absolute;
    top: -30px;
    left: 43%;
    z-index: 0;

    width: 500px;

    transform: translateX(-50%);

    pointer-events: none;
}

/* リード文 */

.competition-lead {
    position: relative;
    z-index: 2;

    margin: 55px 0 0;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
    text-align: center;

    color: var(--color-text);
}

/* 説明文 */

.competition-text {
    position: relative;
    z-index: 2;

    margin-top: 55px;

    text-align: center;
}

.competition-text p {
    margin: 0;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;

    color: var(--color-text);
}

/* 3つのポイント */

.competition-points {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 36px;
}

.competition-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 700;

    color: var(--color-green);
    background-color: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(201, 162, 73, 0.55);
    border-radius: 999px;

    box-shadow: none;
}

.competition-points span::before {
    content: "✦";
    margin-right: 7px;

    font-size: 12px;
    color: #D6B35A;
}

/* 写真 */

.competition-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 42px;

    margin-top: 75px;
}

.competition-gallery img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 14px;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* 写真の表示位置 */

.competition-gallery img:nth-child(1) {
    object-position: 3% center;
}

.competition-gallery img:nth-child(2) {
    object-position: center center;
}

.competition-gallery img:nth-child(3) {
    object-position: 10% center;
}

.competition-gallery img:nth-child(4) {
    object-position: 5% center;
}

.competition-gallery img:nth-child(5) {
    object-position: center center;
}

.competition-gallery img:nth-child(6) {
    object-position: 5% center;
}

/* ホバー */

.competition-gallery img:hover {
    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.16);
}

/* =========================
   Competition - SP
========================= */

@media (max-width: 767px) {

    .competition {
        padding: 70px 0 90px;
    }

    .competition-inner {
        width: calc(100% - 40px);
    }


    /* 見出し */

    .competition-heading h2 {
        font-size: 26px;
    }

    .competition-decoration {
        top: -18px;
        left: 50%;

        width: 330px;

        transform: translateX(-50%);
    }


    /* リード文 */

    .competition-lead {
        width: min(100%, 480px);
        margin: 42px auto 0;

        font-size: 15px;
        line-height: 1.9;
        text-align: left;
    }


    /* 説明文 */

    .competition-text {
        width: fit-content;
        max-width: 100%;
        margin: 38px auto 0;

        text-align: left;
    }

    .competition-text p {
        font-size: 14px;
        line-height: 1.9;
    }


    /* 3つのポイント */

    .competition-points {
        gap: 8px;
        margin-top: 32px;
    }

    .competition-points span {
        flex: 1;
        padding: 8px 8px;
        font-size: 12px;
        white-space: nowrap;
    }


    /* 写真 */

    .competition-gallery {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        margin-top: 48px;
    }

    .competition-gallery img {
        border-radius: 10px;

        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.10);
    }


    /* SPではhoverの動きをなくす */

    .competition-gallery img:hover {
        transform: none;

        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.10);
    }
}

/* =========================
   Competition - Small SP
   600px以下
========================= */

@media (max-width: 600px) {

    /* リード文 */

    .competition-lead {
        width: min(100%, 300px);
    }


    /* 説明文 */

    .competition-text {
        width: min(100%, 270px);
    }
}

/* =========================
   FAQ
========================= */

.faq {
    padding: 100px 20px;

    background-color: var(--color-white);
}

.faq-inner {
    position: relative;

    max-width: 1100px;
    margin: 0 auto;
    padding: 65px 80px 80px;

    background-color: var(--color-light-green);

    border-radius: 36px;

    overflow: hidden;
}

/* タイトル */

.faq-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 65px;

    text-align: center;
}

/* Q&A */

.faq-heading h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    margin: 0;

    font-family: var(--font-button);
    line-height: 1;

    color: var(--color-white);
}

.faq-qa {
    font-size: 88px;
    font-weight: 400;
}

.faq-and {
    font-size: 38px;
    font-weight: 500;

    transform: translateY(8px);
}

/* よくある質問 */

.faq-heading p {
    position: relative;

    width: 280px;
    margin: 30px auto 0;
    padding: 16px 0;

    font-family: var(--font-base);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;

    color: var(--color-text);
}

.faq-heading p::before,
.faq-heading p::after {
    content: "";

    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    background-color: rgba(255, 255, 255, 0.9);
}

.faq-heading p::before {
    top: 0;
}

.faq-heading p::after {
    bottom: 0;
}

/* Q&A一覧 */

.faq-list {
    position: relative;
    z-index: 2;

    max-width: 680px;
    margin: 0 auto;
}

.faq-item + .faq-item {
    margin-top: 42px;
}

/* 質問 */

.faq-question {
    margin: 0 0 8px;

    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;

    color: var(--color-text);
}

.faq-question span {
    font-size: 24px;
    font-weight: 500;
}

/* 回答 */

.faq-answer {
    margin: 0;
    padding: 20px 28px;

    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    color: var(--color-text);

    background-color: rgba(255, 255, 255, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0 14px 14px 14px;

    box-shadow:
        0 6px 16px rgba(70, 120, 100, 0.14);
}

.faq-answer span {
    margin-right: 6px;

    font-size: 20px;
}

/* 背景の音符 */

.faq-note {
    position: absolute;
    z-index: 1;

    pointer-events: none;
}

.faq-note01 {
    width: 220px;

    top: 90px;
    right: 20px;

    transform: rotate(18deg);
}

.faq-note02 {
    width: 150px;

    top: 480px;
    left: 40px;

    transform: rotate(-12deg);
}

.faq-note03 {
    width: 110px;

    right: 55px;
    bottom: 130px;

    transform: rotate(20deg);
}

.faq-note04 {
    width: 100px;

    left: 70px;
    bottom: 40px;
}

/* =========================
   FAQ - SP
========================= */

@media (max-width: 767px) {

    .faq {
        padding: 70px 16px;
    }

    .faq-inner {
        padding: 48px 20px 60px;

        border-radius: 26px;
    }


    /* タイトル */

    .faq-heading {
        margin-bottom: 50px;
    }

    .faq-qa {
        font-size: 64px;
    }

    .faq-and {
        font-size: 28px;

        transform: translateY(6px);
    }

    .faq-heading p {
        width: 220px;

        margin-top: 24px;
        padding: 12px 0;

        font-size: 20px;
    }


    /* Q&A一覧 */

    .faq-list {
        max-width: none;
        width: 100%;
    }

    .faq-item + .faq-item {
        margin-top: 34px;
    }


    /* 質問 */

    .faq-question {
        margin-bottom: 7px;

        font-size: 15px;
    }

    .faq-question span {
        font-size: 20px;
    }


    /* 回答 */

    .faq-answer {
        padding: 16px 18px;

        font-size: 14px;

        border-radius: 0 12px 12px 12px;
    }

    .faq-answer span {
        margin-right: 4px;

        font-size: 17px;
    }


    /* 背景音符 */

    .faq-note01 {
        width: 135px;

        top: 70px;
        right: -10px;
    }

    .faq-note02 {
        width: 90px;

        top: 430px;
        left: -10px;
    }

    .faq-note03 {
        width: 70px;

        right: 5px;
        bottom: 120px;
    }

    .faq-note04 {
        width: 65px;

        left: 10px;
        bottom: 35px;
    }
}


/* =========================
   Contact
========================= */

.contact {
    padding: 60px 20px 100px;

    background-color: var(--color-white);
}

.contact-inner {
    max-width: 880px;
    margin: 0 auto;
}

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    width: 100%;
    padding: 24px 45px;

    color: var(--color-white);
    background-color: var(--color-contact-green);

    border-radius: 60px;

    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;

    position: relative;
}

/* ボタン内側のステッチ */

.contact-button::before {
    content: "";

    position: absolute;
    inset: 8px;

    border: 2px dashed rgba(255, 255, 255, 0.8);
    border-radius: 52px;

    pointer-events: none;
}

/* メールアイコン */

.contact-icon {
    width: 90px;
    height: auto;

    flex-shrink: 0;
}

/* お問い合わせはこちら */

.contact-text {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.05em;

    color: var(--color-white);

    white-space: nowrap;
}

/* 24時間受付 */

.contact-reception {
    padding: 10px 22px;

    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;

    color: var(--color-contact-green);
    background-color: var(--color-white);

    border: none;
    border-radius: 30px;

    white-space: nowrap;
    flex-shrink: 0;
}

/* ホバー */

.contact-button:hover {
    transform: translateY(-3px);

    background-color: var(--color-contact-hover);

    box-shadow:
        0 11px 18px rgba(0, 0, 0, 0.2);
}

/* =========================
   Contact - Tablet
   768px〜1100px
========================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .contact-inner {
        width: calc(100% - 80px);
        max-width: 780px;
    }

    .contact-button {
        padding: 22px 30px;
    }

    .contact-icon {
        width: 70px;
    }

    .contact-text {
        font-size: clamp(24px, 3vw, 30px);
    }

    .contact-reception {
        padding: 9px 18px;

        font-size: 15px;
    }
}

/* =========================
   Contact - SP
========================= */

@media (max-width: 767px) {

    .contact {
        padding: 50px 20px 70px;
    }

    .contact-inner {
        width: 100%;
        max-width: 500px;
    }

    .contact-button {
        display: grid;

        grid-template-columns: auto auto;
        grid-template-areas:
            "icon text"
            "reception reception";

        justify-content: center;

        gap: 12px 14px;

        padding: 20px;

        border-radius: 28px;
    }

    .contact-button::before {
        inset: 7px;
        border-width: 1.5px;
        border-radius: 22px;
    }

    /* メールアイコン */

    .contact-icon {
        grid-area: icon;

        width: 48px;
    }


    /* お問い合わせはこちら */

    .contact-text {
        grid-area: text;

        font-size: 22px;
        letter-spacing: 0.03em;
    }


    /* 24時間受付 */

    .contact-reception {
        grid-area: reception;

        justify-self: center;

        padding: 7px 18px;

        font-size: 13px;

        border-width: 1.5px;
    }
}


/* =========================
   Access
========================= */

.access {
    padding: 110px 20px 120px;

    background-color: var(--color-white);

    background-image:
        url("../images/background/access-bg.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80% auto;
}

.access-inner {
    display: grid;
    grid-template-columns: 480px 600px;
    column-gap: 80px;
    align-items: start;

    max-width: 1160px;
    margin: 0 auto;
}

/* 左側 */

.access-info {
    padding-top: 40px;
}

/* 教室名 */

.access-info h2 {
    margin: 0 0 45px;

    font-family: var(--font-base);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.05em;

    color: var(--color-green);
}

/* 住所 */

.access-address {
    margin: 0 0 12px;

    font-family: var(--font-base);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.8;

    color: var(--color-text);
}

/* 補足 */

.access-note {
    margin: 0;

    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;

    color: var(--color-text);
}

/* 開催情報 */

.access-details {
    margin: 65px 0 8px;
}

.access-detail {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;

    margin-bottom: 35px;
}

.access-detail:last-child {
    margin-bottom: 10px;
}

.access-detail dt,
.access-detail dd {
    margin: 0;

    font-family: var(--font-base);
    font-size: 23px;
    line-height: 1.6;

    color: var(--color-text);
}

.access-detail dt {
    font-weight: 500;
}

.access-detail dd {
    font-weight: 400;
}

/* 右側 */

.access-visual {
    width: 100%;
}

/* 教室写真 */

.access-photo {
    display: block;

    width: 100%;
    height: 330px;

    object-fit: cover;
    object-position: center;

    border-radius: 24px;

    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.16);
}

/* 対応エリア */

.access-area {
    position: relative;

    width: min(100%, 350px);
    margin: 32px auto 0;
    padding-left: 18px;

    font-size: 15px;
    line-height: 1.9;
    text-align: left;

    border-left: 3px solid var(--color-light-green);
}

/* =========================
   Access - Tablet
   768px〜1200px
========================= */

@media (min-width: 768px) and (max-width: 1200px) {

    .access-inner {
        grid-template-columns:
            minmax(300px, 420px)
            minmax(400px, 1fr);

        column-gap: 40px;

        width: 100%;
        max-width: 1000px;
    }

    .access-info h2 {
        font-size: 30px;
    }

    .access-address {
        font-size: 20px;
    }

    .access-detail {
        grid-template-columns: 120px 1fr;
    }

    .access-detail dt,
    .access-detail dd {
        font-size: 19px;
    }
}


/* =========================
   Access - SP
========================= */

@media (max-width: 767px) {

    .access {
        padding: 70px 20px 90px;

        background-size: calc(100% - 10px) auto;
        background-position: center 100px;
    }

    .access-inner {
        display: block;

        max-width: 520px;
    }


    /* 教室情報 */

    .access-info {
        padding-top: 0;
    }

    .access-info h2 {
        margin-bottom: 28px;

        font-size: 26px;
        letter-spacing: 0.03em;
    }


    /* 住所 */

    .access-address {
        margin-bottom: 8px;

        font-size: 18px;
        line-height: 1.7;
    }


    /* 補足 */

    .access-note {
        font-size: 13px;
        line-height: 1.8;
    }


    /* 開催情報 */

    .access-details {
        margin: 42px 0 8px;
    }

    .access-detail {
        grid-template-columns: 100px 1fr;

        margin-bottom: 20px;
    }

    .access-detail:last-child {
        margin-bottom: 8px;
    }

    .access-detail dt,
    .access-detail dd {
        font-size: 17px;
    }


    /* 写真 */

    .access-visual {
        margin-top: 45px;
    }

    .access-photo {
        height: auto;

        aspect-ratio: 4 / 3;

        border-radius: 18px;
    }


    /* 対応エリア */

    .access-area {
        margin: 30px auto 0;
    }
}

/* =========================
   TOPへ戻るボタン
========================= */

.page-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 100;

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

    width: 64px;
    height: 64px;

    color: var(--color-white);
    background-color: var(--color-green);

    border-radius: 50%;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* ↑ */

.page-top-arrow {
    width: 16px;
    height: 16px;

    margin-bottom: 1px;

    border-top: 3px solid var(--color-white);
    border-left: 3px solid var(--color-white);

    transform: rotate(45deg);
}

/* TOP */

.page-top-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.page-top:hover {
    transform: translateY(-4px);
    opacity: 0.85;
}


/* =========================
   TOPへ戻るボタン - SP
========================= */

@media (max-width: 767px) {

    .page-top {
        right: 20px;
        bottom: 20px;

        width: 56px;
        height: 56px;
    }

    .page-top-arrow {
        width: 13px;
        height: 13px;

        border-top-width: 2px;
        border-left-width: 2px;
    }

    .page-top-text {
        font-size: 11px;
    }
}

/* =========================
   Footer
========================= */

.footer {
    padding: 55px 20px;

    background-color: var(--color-white);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    max-width: 1240px;
    margin: 0 auto;
}


/* ロゴ */

.footer-logo {
    flex-shrink: 0;
}

.footer-logo img {
    display: block;

    width: 180px;
    height: auto;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.footer-logo a:hover img {
    opacity: 0.85;
    transform: scale(1.03);
}


/* ナビゲーション */

.footer-nav {
    flex: 1;
}

.footer-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    margin: 0;
    padding: 0;
}

.footer-nav-list a {
    display: inline-block;

    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;

    color: var(--color-text);

    white-space: nowrap;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.footer-nav-list a:hover {
    opacity: 0.6;
    transform: translateY(-2px);
}


/* Instagram */

.footer-instagram {
    flex-shrink: 0;
}

.footer-instagram a {
    display: block;
}

.footer-instagram img {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.footer-instagram a:hover img {
    opacity: 0.85;
    transform: scale(1.08);
}


/* プライバシーポリシー・コピーライト */

.footer-info {
    flex-shrink: 0;

    min-width: 170px;

    color: var(--color-text);
}

.footer-info a {
    display: inline-block;

    font-family: var(--font-base);
    font-size: 13px;

    color: var(--color-text);

    transition: opacity 0.3s ease;
}

.footer-info a:hover {
    opacity: 0.6;
}

.footer-copyright {
    margin: 12px 0 0;
}

.footer-copyright small {
    font-family: var(--font-base);
    font-size: 12px;

    color: var(--color-text);
}


/* =========================
   Footer - Tablet
   1280px以下
========================= */

@media (max-width: 1280px) {

    .footer {
        padding: 55px 20px 45px;
    }

    .footer-inner {
        flex-direction: column;
        justify-content: center;

        gap: 34px;

        text-align: center;
    }


    /* ロゴ */

    .footer-logo img {
        width: 160px;
    }


    /* ナビ */

    .footer-nav {
        flex: none;

        width: 100%;
    }

    .footer-nav-list {
        flex-wrap: wrap;

        gap: 18px 30px;
    }

    .footer-nav-list a {
        font-size: 14px;
    }


    /* Instagram */

    .footer-instagram img {
        width: 58px;
        height: 58px;
    }


    /* 情報 */

    .footer-info {
        min-width: 0;

        text-align: center;
    }

    .footer-copyright {
        margin-top: 10px;
    }
}


/* =========================
   Footer - SP
   767px以下
========================= */

@media (max-width: 767px) {

    .footer {
        padding: 45px 20px 35px;
    }

    .footer-inner {
        gap: 24px;
    }


    /* ロゴ */

    .footer-logo img {
        width: 125px;
    }


    /* ナビ */

    .footer-nav-list {
        gap: 12px 20px;
    }

    .footer-nav-list a {
        font-size: 13px;
    }


    /* Instagram */

    .footer-instagram img {
        width: 50px;
        height: 50px;
    }


    /* 情報 */

    .footer-info a {
        font-size: 12px;
    }

    .footer-copyright {
        margin-top: 8px;
    }

    .footer-copyright small {
        font-size: 11px;
    }
}

/* =========================
   404
========================= */

.error-page {
    min-height: 650px;
    padding: 180px 20px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-page-inner {
    width: 100%;
    max-width: 700px;
}

.error-page-icon {
    width: 100px;
    height: auto;
    margin: 0 auto 15px;
}

.error-page-number {
    margin: 0;
    color: var(--color-green);
    font-family: var(--font-english);
    font-size: 80px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.error-page-title {
    margin-top: 20px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.error-page-text {
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
}

.error-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 58px;
    margin-top: 40px;
    padding: 12px 30px;
    border-radius: 50px;
    background-color: var(--color-green);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.error-page-button:hover {
    opacity: 0.75;
}

.error-page-notes {
    margin-top: 30px;
    color: var(--color-light-green);
    font-size: 22px;
    letter-spacing: 0.5em;
}


/* =========================
   404 SP
========================= */

@media (max-width: 767px) {

    .error-page {
        min-height: 560px;
        padding: 140px 20px 90px;
    }

    .error-page-icon {
        width: 80px;
    }

    .error-page-number {
        font-size: 64px;
    }

    .error-page-title {
        margin-top: 16px;
        font-size: 22px;
    }

    .error-page-text {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.9;
    }

    .error-page-button {
        min-width: 220px;
        min-height: 54px;
        margin-top: 32px;
        font-size: 14px;
    }

    .error-page-notes {
        margin-top: 25px;
        font-size: 18px;
    }
}