/*
SP ～519px
tab 520px～959px
PC 960px～
*/
html {
    scroll-behavior: smooth;
}

/*================
mv
================*/
.mv_wrap {
    background-color: #E7F5FD;

}

.mv {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 767px) {
    .nav-menu a {
        color: #275A9B;
    }

    /* 体験予約ボタンだけ色を戻す or別スタイルに */
    .nav-menu a.header-cta-button {
        color: #fff;
        /* または他の色（オレンジなど） */
    }
}

html {
    scroll-behavior: smooth;
}

/* 余計な影響出ないように、全部 succy- でプレフィックス */
.succy-hero-wrapper {
    position: relative;
}

/* 下のメッセージブロックのベース */
.succy-hero-message-block {
    position: relative;
    overflow: hidden;
}

/* 写真＋色の重なりをスマホでだけ発動 */
@media screen and (max-width: 767px) {

    .succy-hero-message-block {
        padding: 45px 20px;
        text-align: center;
        color: #65747C;
        font-family: var(--font-serif);
        /* 文字色：好みで変えてOK */
        /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.15);

        /* 背景写真（ボカし・薄め表示） */
        .succy-hero-message-block::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("img/mv_02.jpg");
            /* 好きな写真に変更してOK */
            background-size: cover;
            background-position: center;
            transform: scale(1.05);
            /* 端が切れないように少し拡大 */
            filter: blur(3px);
            opacity: 0.55;
            /* ここで“すかし具合”調整 */
            z-index: 0;
        }

        /* カラーフィルター（ピンクベールみたいな層） */
        .succy-hero-message-block__overlay {
            position: absolute;
            inset: 0;
            background: rgba(187, 221, 239, 0.6);
            /* 色＆透け具合は好みで */
            z-index: 1;
        }

        /* 実際のテキスト部分 */
        .succy-hero-message-block__content {
            position: relative;
            z-index: 2;
            max-width: 320px;
            margin: 0 auto;
            line-height: 1.8;
        }

        .succy-hero-message-block__lead {
            font-size: 23px;
            margin-bottom: 1.5rem;
            letter-spacing: 0.06em;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .succy-hero-message-block__text {
            font-size: 15px;
            line-height: 1.5;
        }
    }

}


/*================
about
================*/

.succy-about {
    padding: var(--section-padding) 0;

}

.center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    font-family: var(--font-serif);
}

/* メインタイトル部分 */
.about_lead {
    text-align: center;
    margin-bottom: var(--section-gap);
    font-family: var(--font-serif);
}

.mv_text_top {
    font-size: var(--size-lg);
    color: var(--text-color);
    margin-bottom: var(--contents-gutter);
    font-weight: 400;
}

.mv_text_01 {
    font-size: 26px;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.mv_text_01 span {
    color: var(--trust-navy);
    /* font-weight: 600; */
}

.mv_text_02 {
    font-size: var(--size-lg-sp);
    color: var(--text-color);
}

/* スマホ表示時のみの白い帯 */
.mv_text_top {
    position: relative;
    z-index: 1;
    color: var(--text-color);
    /* テキスト自体にz-indexを設定 */
}

/* 白い帯の実装（スマホのみ） - パターン1: z-index調整版 */
@media screen and (max-width: 767px) {
    .mv_text_top::after {
        content: '';
        position: absolute;
        bottom: -15px;
        /* テキストから適度な距離 */
        left: 50%;
        transform: translateX(-50%);
        /* width: 100%; */
        height: 120px;
        background: rgba(255, 255, 255, 0.9);

        z-index: 0;
        /* -1ではなく0に変更 */

        /* Succyらしいやわらかな影とぼかし */
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.12);
        filter: blur(0.5px);

        /* さりげないアニメーション */
        animation: gentlePulse 4s ease-in-out infinite;
    }
}

@media screen and (min-width: 768px) {
    .succy-hero-message-block__content {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .about_lead {
        display: none;
    }
}

/* パターン2: ::beforeを使用（より確実） */
/*
@media screen and (max-width: 767px) {
    .mv_text_top::before {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        z-index: -1;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.12);
        filter: blur(0.5px);
        animation: gentlePulse 4s ease-in-out infinite;
    }
}
*/

/* パターン3: 別要素として追加する場合 */
/*
HTML側で <span class="white-band"></span> を .mv_text_top の直後に追加

.white-band {
    display: none;
}

@media screen and (max-width: 767px) {
    .white-band {
        display: block;
        position: relative;
        width: 80%;
        height: 20px;
        margin: 15px auto 0;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.12);
        filter: blur(0.5px);
        animation: gentlePulse 4s ease-in-out infinite;
    }
}
*/





/* セクションヘディング */
.section-heading {
    text-align: center;
    font-size: var(--size-xl);
    font-weight: 500;
    margin-bottom: var(--section-gutter);
    color: var(--trust-navy);
    letter-spacing: 0.02em;
}

.break {
    display: block;
}

/* アバウトブロック */
.about-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap);
    align-items: center;
    margin-bottom: var(--section-gap);
}

.about-block.mt0 {
    margin-top: 0;
}



/* 1番目と3番目：テキスト左、画像右 */
.about-block:nth-child(3) .about-text {
    order: 1;
}

.about-block:nth-child(3) .about-image {
    order: 2;
}

.about-block:nth-child(5) .about-text {
    order: 1;
}

.about-block:nth-child(5) .about-image {
    order: 2;
}

/* 2番目：画像左、テキスト右 */
.about-block:nth-child(4) .about-text {
    order: 2;
}

.about-block:nth-child(4) .about-image {
    order: 1;
}

/* テキスト部分 */
.about-text {
    padding: 1rem 0;
}

.leaf-wrapper {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.leaf-icon {
    width: 40px;
    height: 40px;
    opacity: 0.8;
}

.leaf-text {
    font-size: var(--size-lg);
    font-weight: 600;
    color: var(--trust-navy);
    letter-spacing: 0.01em;
}

.about-text p {
    font-size: var(--sp-text);
    line-height: 1.85;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.about-text strong {
    display: block;
    margin: 1.5rem 0;
    line-height: 1.8;
}

/* ハイライトスタイル */
.highlight {
    background: linear-gradient(transparent 60%, rgba(187, 221, 239, 0.4) 60%);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    color: var(--text-color);
    font-weight: 500;
}

.highlight_c {
    color: var(--trust-navy);
    font-weight: 500;
}

/* テキストリンク */
.text-link {
    margin-top: 1.5rem;
}

.text-link a {
    color: var(--trust-navy);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.text-link a:hover {
    border-bottom-color: var(--trust-navy);
}

/* 画像部分 */
.about-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 25px var(--shadow-light);
}

.about-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-image:hover img {
    transform: scale(1.02);
}

/* プレースホルダー画像 */
.image-placeholder {
    width: 100%;
    height: 320px;
    background: linear-gradient(135deg, var(--succy-blue), rgba(39, 90, 155, 0.1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--trust-navy);
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
}


/* 背景の淡い装飾 */


/* セクションタイトル */
.section-title-omoi {
    font-family: 'Noto Serif JP', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--trust-navy);
    margin-bottom: 50px;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 2;
    text-align: center;

}

/* メインテキスト */
.main-text {
    font-size: var(--size-md);
    line-height: 2;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
    letter-spacing: 0.02em;
    font-weight: 400;
    font-family: var(--font-serif);
}

/* キーワードコンテナ */
.keywords-container {
    margin: 80px 0;
    position: relative;
    z-index: 2;
}

.keywords-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    margin-bottom: 60px;

}

/* 各キーワード */
.keyword-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    font-family: var(--font-serif);
}

.keyword-initial {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 500;
    color: var(--primary-navy);
    line-height: 1;
    margin-bottom: 8px;
    position: relative;
    opacity: 0.9;
}

.keyword-initial::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
}

.keyword-en {
    font-family: 'Playfair Display', serif;
    font-size: var(--size-md);
    font-weight: 400;
    color: var(--primary-navy);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.keyword-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--size-m);
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* 成功メッセージ */
.success-message {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--primary-navy);
    letter-spacing: 0.08em;
    position: relative;
    margin-top: 60px;
    padding-top: 40px;
}


.success-en {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    opacity: 0.9;
    font-size: 24px;
}

.success-jp {
    margin-left: 8px;
    font-weight: 500;
    font-size: var(--sp-text);
}



/* レスポンシブ対応 */
@media (max-width: 767px) {
    .text-section {
        padding: 40px 30px;
        border-radius: 16px;
    }

    .section-title {
        font-size: var(--size-lg);
        margin-bottom: 40px;
        text-align: left;
    }

    .section-title::after {
        width: 30px;
        margin-top: 8px;
    }

    /* スマホでは左揃え */
    .main-text {
        text-align: left;
        font-size: 1rem;
        line-height: 1.9;
        margin-bottom: 60px;
    }

    .keywords-container {
        margin: 60px 0;
    }

    /* スマホでは縦一列 */
    .keywords-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .keyword-item {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 20px;
    }

    .keyword-content {
        display: flex;
        flex-direction: column;
    }

    .keyword-initial {
        font-size: 2.8rem;
        margin-bottom: 0;
    }

    .keyword-initial::after {
        display: none;
    }

    .keyword-en {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .keyword-jp {
        font-size: 0.85rem;
    }

    .success-message {
        text-align: left;
        font-size: 1.1rem;
        margin-top: 50px;
        padding-top: 30px;
    }

    .success-message::before {
        left: 0;
        transform: none;
        width: 40px;
    }
}

/* PC表示（768px以上）では中央揃え */
@media (min-width: 768px) {
    .section-title {
        text-align: center;
    }

    .section-title::after {
        margin: 12px auto 0;
    }

    .main-text {
        text-align: center;
    }

    .success-message {
        text-align: center;
    }

    /* PCでは横並び */
    .keywords-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 30px;
        max-width: 700px;
        margin: 0 auto 60px;
    }

    .keyword-item {
        align-items: center;
        text-align: center;
    }

    .keyword-initial {
        font-size: 5rem;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .text-section {
        padding: 30px 20px;
    }

    .main-text {
        font-size: var(--text-size);
        margin-bottom: 50px;
    }

    .keyword-initial {
        font-size: var(--size-lg);
    }

    .keyword-en {
        font-size: 0.85rem;
    }

    .keyword-jp {
        font-size: 0.8rem;
    }

    .success-message {
        font-size: 1rem;
    }
}


/* コンセプトメッセージ */
.concept-message {
    position: relative;
    background: linear-gradient(135deg, var(--succy-blue) 0%, rgba(187, 221, 239, 0.3) 100%);
    padding: 4rem 2rem;
    margin-top: var(--section-gap);
    border-radius: 15px;
    text-align: center;
}

.message-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
}

.message-box {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
}

.concept-title {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    color: var(--trust-navy);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.concept-lead {
    font-size: var(--text-size);
    color: var(--text-color);
    line-height: 1.9;
    margin-bottom: 2rem;
}

.concept-lead strong {
    /* color: var(--growth-coral); */
    font-weight: 600;
}

.fr-keywords {
    font-size: clamp(0.95rem, 2.3vw, 1.1rem);
    color: var(--trust-navy);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.closing {
    font-size: clamp(1.1rem, 2.8vw, 1.3rem);
    color: var(--trust-navy);
    font-weight: 600;
    font-style: italic;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    .center {
        padding: 0 1.5rem;
    }

    .about-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    /* PC時は非表示、スマホ時は表示 */
    .mobile-title {
        display: block;
        order: 1;
    }

    .about-image {
        order: 2;
    }

    .mobile-content {
        display: block;
        order: 3;
    }

    /* PC時のタイトルとコンテンツをスマホ時は非表示 */
    .about-text:not(.mobile-title):not(.mobile-content) h4 {
        display: none;
    }

    .about-text:first-child:not(.mobile-title) {
        display: contents;
    }

    .about-text:last-child:not(.mobile-content) {
        display: contents;
    }

    .about-image img,
    .image-placeholder {
        height: 240px;
    }

    .concept-message {
        padding: 3rem 1.5rem;
    }
}

/* PC時はモバイル専用要素を非表示 */
@media (min-width: 769px) {

    .mobile-title,
    .mobile-content {
        display: none;
    }
}

@media (max-width: 480px) {
    .center {
        padding: 0 1rem;
    }

    .about-image img,
    .image-placeholder {
        height: 200px;
    }

    .concept-message {
        padding: 2.5rem 1rem;
    }
}

@media screen and (max-width: 767px) {
    .mv_text_top {
        font-size: var(--size-md);
    }

    .mv_text_01 {
        font-size: var(--size-md);
    }

    .mv_text_02 {
        font-size: var(--size-md);
        padding-bottom: 35px;
    }

    .section-heading {
        font-size: var(--size-md);
        margin-bottom: var(--contents-gutter);
    }


}

.sp-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp-only {
        display: inline;
    }
}

/* アニメーション */
.about-block {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.about-block:nth-child(4) {
    animation-delay: 0.2s;
}

.about-block:nth-child(5) {
    animation-delay: 0.4s;
}

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

/* プレースホルダー画像 */
.image-placeholder {
    width: 100%;
    height: 320px;
    background: linear-gradient(135deg, var(--succy-blue), rgba(39, 90, 155, 0.1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--trust-navy);
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
}

/* メインコンテナ */
.text-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow:
        0 8px 30px rgba(39, 90, 155, 0.06),
        0 2px 8px rgba(255, 255, 255, 0.1) inset;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 背景の淡い装飾 */
.text-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 40%;
    height: 40%;
    background:
        radial-gradient(circle, rgba(187, 221, 239, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 50%;
    pointer-events: none;
}

.text-section::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 30%;
    height: 30%;
    background:
        radial-gradient(circle, rgba(39, 90, 155, 0.02) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

/* セクションタイトル */
.section-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--primary-navy);
    margin-bottom: 50px;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 2;
}



/* メインテキスト */
.main-text {
    font-size: var(--sp-text);
    line-height: 2;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* キーワードコンテナ */
.keywords-container {
    margin: 80px 0;
    position: relative;
    z-index: 2;
}

.keywords-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    margin-bottom: 60px;
}

/* 各キーワード */
.keyword-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.keyword-initial {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 600;
    color: var(--primary-navy);
    line-height: 1;
    margin-bottom: 12px;
    position: relative;
    opacity: 0.95;
    text-shadow: 0 2px 4px rgba(39, 90, 155, 0.1);
}

.keyword-initial::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 30%, var(--primary-navy) 70%, transparent 100%);
    border-radius: 1px;
}

.keyword-en {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-navy);
    margin-bottom: 8px;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.keyword-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.text-section {
    font-family: 'Noto Sans JP', sans-serif;
    background:
        /* radial-gradient(circle at 20% 80%, rgba(187, 221, 239, 0.1) 0%, transparent 50%), */
        /* radial-gradient(circle at 80% 20%, rgba(39, 90, 155, 0.05) 0%, transparent 50%), */
        radial-gradient(circle at 40% 40%, rgba(187, 221, 239, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, #fafbfc 0%, #f5f7fa 25%, #fafbfc 50%, #f8f9fb 75%, #fafbfc 100%);
    background-size: 800px 600px, 600px 800px, 400px 400px, 100% 100%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
    padding: 60px 20px;
    line-height: 1.8;
    color: var(--primary-navy);
    position: relative;
    margin-bottom: var(--section-gutter);
}

.text-section::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(187, 221, 239, 0.01) 50%, transparent 60%);
    background-size: 200px 200px, 150px 150px;
    pointer-events: none;
    z-index: 0;
}

/* 成功メッセージ */
.success-message {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--primary-navy);
    letter-spacing: 0.08em;
    position: relative;
    margin-top: 60px;
    padding-top: 40px;
}

.success-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
}

.success-en {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    opacity: 0.9;
}

.success-jp {
    margin-left: 8px;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .text-section {
        padding: 40px 30px;
        border-radius: 16px;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 40px;
        text-align: left;
    }

    .section-title::after {
        width: 30px;
        margin-top: 8px;
    }

    /* スマホでは左揃え */
    .main-text {
        text-align: left;
        font-size: 1rem;
        line-height: 1.9;
        margin-bottom: 60px;
    }

    .keywords-container {
        margin: 60px 0;
    }

    /* スマホでは縦一列 */
    .keywords-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 50px;
    }

    .keyword-item {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .keyword-content {
        display: flex;
        flex-direction: column;
    }

    .keyword-initial {
        font-size: 2.8rem;
        margin-bottom: 0;
    }

    .keyword-initial::after {
        display: none;
    }

    .keyword-en {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .keyword-jp {
        font-size: 0.85rem;
    }

    .success-message {
        text-align: left;
        font-size: 1.1rem;
        margin-top: 50px;
        padding-top: 30px;
    }

    .success-message::before {
        left: 0;
        transform: none;
        width: 40px;
    }
}

/* PC表示（768px以上）では中央揃え + 横並び */
@media (min-width: 768px) {
    .section-title {
        text-align: center;
    }

    .section-title::after {
        margin: 12px auto 0;
    }

    .main-text {
        text-align: center;
    }

    .success-message {
        text-align: center;
    }

    /* PCでは4つ横並び */
    .keywords-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin-bottom: 60px;
    }

    .keyword-item {
        padding: 40px 25px;
    }

    .keyword-initial {
        font-size: 4.5rem;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .text-section {
        padding: 30px 20px;
        margin: 20px;
        margin-bottom: var(--contents-gutter);
    }

    .main-text {
        font-size: var(--sp-text);
        margin-bottom: 50px;
    }

    .keyword-initial {
        font-size: 35px;
    }

    .keyword-en {
        font-size: var(--sp-text-ss);
    }

    .keyword-jp {
        font-size: var(--sp-text-ss);
    }

    .success-message {
        font-size: 1rem;
    }
}

/*================
スマホ
================*/

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--section-padding);
}

.main-title {
    text-align: center;
    font-size: var(--title-size);
    font-weight: 500;
    margin-bottom: var(--section-gap);
    letter-spacing: 0.05em;
    color: var(--primary-blue);
}

/* .feature-section {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
    padding: var(--section-padding);
    margin-bottom: var(--section-gap);
    box-shadow: 0 15px 40px rgba(39, 90, 155, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(187, 221, 239, 0.3);
} */

.feature-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap);
    align-items: center;
}

/* セクション01 - テキスト左、画像右 */
.section-01 .text-content {
    order: 1;
    padding-right: 2rem;
}

.section-01 .image-content {
    order: 2;
}

/* セクション02 - 画像左、テキスト右 */
.section-02 .text-content {
    order: 2;
    padding-left: 2rem;
}

.section-02 .image-content {
    order: 1;
}

/* セクション03 - テキスト左、画像右 */
.section-03 .text-content {
    order: 1;
    padding-right: 2rem;
}

.section-03 .image-content {
    order: 2;
}

.subtitle-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.2rem;
}

.feature-number {
    font-size: var(--number-size);
    font-weight: 300;
    color: var(--light-blue);
    line-height: 1;
    opacity: 0.9;
}

.subtitle {
    font-size: var(--subtitle-size);
    font-weight: 500;
    color: var(--primary-blue);
    letter-spacing: 0.02em;
}

.description {
    font-size: var(--text-size);
    line-height: 1.85;
    text-align: left;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* 統一した下線スタイル */
.underline-highlight {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    font-weight: 500;
    color: var(--text-highlight);
}

/* セクション02の引用部分も下線スタイルに */
.quote-text {
    margin: 1.5rem 0;
    font-size: var(--quote-size);
    text-align: left;
}

/* セクション03の特別強調部分 */
.final-message {
    margin-top: 2rem;
}

.image-content {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(39, 90, 155, 0.15);
}

.feature-image {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.feature-image:hover {
    transform: scale(1.03);
}

.image-placeholder {
    width: 100%;
    height: 380px;
    background: linear-gradient(135deg, var(--light-blue), var(--primary-blue));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    text-align: center;
    opacity: 0.9;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    .feature-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-01 .text-content,
    .section-02 .text-content,
    .section-03 .text-content {
        order: 2;
        padding: 0;
    }

    .section-01 .image-content,
    .section-02 .image-content,
    .section-03 .image-content {
        order: 1;
    }

    .subtitle-wrapper {
        justify-content: flex-start;
        margin-bottom: 1.5rem;
    }

    .feature-image,
    .image-placeholder {
        height: 280px;
    }

    .final-message {
        margin-top: 1.5rem;
        padding: 1.5rem;
    }

    .quote-highlight {
        margin: 1rem 0;
        padding: 1rem;
    }


}

/* 極小デバイス対応 */
@media (max-width: 480px) {
    :root {
        --section-padding: 1.8rem;
        --content-gap: 1.5rem;
    }

    .feature-section {
        padding: 1.8rem;
        border-radius: 20px;
    }

    .subtitle-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .feature-image,
    .image-placeholder {
        height: 220px;
    }
}

/* アニメーション */
.feature-section {
    animation: fadeInUp 0.8s ease-out;
}

.feature-section:nth-child(3) {
    animation-delay: 0.2s;
}

.feature-section:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ホバーエフェクト */
.feature-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(39, 90, 155, 0.12);
    transition: all 0.3s ease;
}

/* SP ～519px：3つの特徴を非表示にする */
@media screen and (max-width: 519px) {
    .about-block {
        display: none !important;
    }
}

/* PC幅以上（960px～）では非表示 */
@media screen and (min-width: 960px) {
    .container {
        display: none !important;
    }
}

/*================
succyの想い 
================*/


.concept-title {
    text-align: center;
    font-size: var(--size-lg);
    margin-top: 14px;
    margin-bottom: 20px;
}

.concept-message {
    padding: 2rem 1rem;
    text-align: center;
    background-color: #f7fafd;
}

.message-box {
    max-width: 700px;
    margin: 0 auto;
    font-size: var(--size-md);
    line-height: 2.4;
    color: ver(--text-color);
    font-weight: 600;
}

.fr-keywords {
    margin-top: 1.5rem;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.closing {
    text-align: right;
    margin-top: 1.5rem;
    font-style: italic;
    margin-bottom: var(--contents-gutter);
}

/* .concept-message {
    position: relative;
    padding: 2.5rem 1.5rem;
    background-image: url("../../img/about_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: hidden;
    margin-top: calc(var(--contents-gutter)*2);
    margin-bottom: var(--contents-gutter);
    margin-left: calc(50% - 50vw);
    width: 100vw;
} */

.message-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    /* ←明るさ50%白フィルター */
    z-index: -1;

}

@media screen and (min-width:769px) {
    .concept-title {
        font-size: var(--size-xl);
    }

    .section-label {
        font-size: var(--size-xxl);
    }


    .succy-heading {
        margin-bottom: 6.4rem;
    }

    .about-block {
        flex-wrap: wrap;
    }

    .about-text {
        width: 460px;
    }

    .about-image {
        width: 500px;
    }

}

/*==========min-width:769px==========*/


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--section-padding);
}

.main-title {
    text-align: center;
    font-size: var(--title-size);
    font-weight: 500;
    margin-bottom: var(--section-gap);
    letter-spacing: 0.05em;
    color: var(--primary-blue);
}



.feature-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap);
    align-items: center;
}

/* セクション01 - テキスト左、画像右 */
.section-01 .text-content {
    order: 1;
    padding-right: 2rem;
}

.section-01 .image-content {
    order: 2;
}

/* セクション02 - 画像左、テキスト右 */
.section-02 .text-content {
    order: 2;
    padding-left: 2rem;
}

.section-02 .image-content {
    order: 1;
}

/* セクション03 - テキスト左、画像右 */
.section-03 .text-content {
    order: 1;
    padding-right: 2rem;
}

.section-03 .image-content {
    order: 2;
}

.subtitle-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.2rem;
}

.feature-number {
    font-size: var(--number-size);
    font-weight: 500;
    color: var(--navy);
    line-height: 1;
    opacity: 0.9;
    font-family: var(--font-serif);
}

.subtitle {
    font-size: var(--subtitle-size);
    font-weight: 500;
    color: var(--primary-blue);
    letter-spacing: 0.02em;
}

.description {
    font-size: var(--sp-text);
    line-height: 1.9;
    text-align: left;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: var(--font-serif);
    margin: 0 0.3rem;

}

/* 統一したハイライトスタイル（セクション01と同じ） */
.highlight {
    background: linear-gradient(transparent 65%, var(--accent-blue) 65%);
    font-weight: 500;
    color: var(--text-highlight);
    padding: 0.1em 0.3em;
    border-radius: 4px;
    position: relative;
}

/* セクション02の引用部分 */
.quote-text {
    font-size: var(--sp-text);
    font-family: var(--font-serif);
}

.quote-text-02 {
    font-size: var(--sp-text-s);
    font-family: var(--font-serif);
}


/* セクション03の特別強調部分 */
.final-message {
    margin-top: 2rem;
}

.image-content {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(39, 90, 155, 0.15);
}

.feature-image {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.feature-image:hover {
    transform: scale(1.03);
}

.image-placeholder {
    width: 100%;
    height: 380px;
    background: linear-gradient(135deg, var(--light-blue), var(--primary-blue));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    text-align: center;
    opacity: 0.9;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    .feature-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-01 .text-content,
    .section-02 .text-content,
    .section-03 .text-content {
        order: 2;
        padding: 0;
    }

    .section-01 .image-content,
    .section-02 .image-content,
    .section-03 .image-content {
        order: 1;
    }

    .subtitle-wrapper {
        justify-content: flex-start;
        margin-bottom: 1.5rem;
    }

    .feature-image,
    .image-placeholder {
        height: 280px;
    }

    .final-message {
        margin-top: 1.5rem;
        padding: 1.5rem;
    }

    .quote-highlight {
        margin: 1rem 0;
        padding: 1rem;
    }

    .quote-text-sp {
        font-size: var(--sp-text-s);
        font-family: var(--font-serif);

    }

}

/* 極小デバイス対応 */
@media (max-width: 480px) {
    :root {
        --section-padding: 1.8rem;
        --content-gap: 1.5rem;
    }

    .feature-section {
        padding: 0 1rem 4.2rem;
        border-radius: 20px;
    }

    .subtitle-wrapper {
        display: flex !important;
        flex-direction: row !important;
        /* ← ココで横並びに */
        align-items: center !important;
        gap: 0.6rem !important;
        flex-wrap: nowrap;
        /* 折り返したいなら wrap に */
        margin: 0 0 2rem;
    }

    .feature-image,
    .image-placeholder {
        height: 220px;
    }
}

/* アニメーション */
.feature-section {
    animation: fadeInUp 0.8s ease-out;
}

.feature-section:nth-child(3) {
    animation-delay: 0.2s;
}

.feature-section:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ホバーエフェクト */
.feature-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(39, 90, 155, 0.12);
    transition: all 0.3s ease;
}






.bar {
    display: inline-block;
    width: 3px;
    /* 太さ調整 */
    height: 30px;
    /* 縦の長さ */
    background-color: var(--text-color);
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 1px;
    /* 角を少し丸めると優しい印象 */
}

/* レスポンシブ */
@media (max-width: 767px) {

    .succy-heading {
        font-size: var(--size-lg);
        line-height: calc(1em + 0.8rem);
    }




    .succy-words {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sp-only {
        display: inline;
    }

    .about-block,
    .about-block.reverse {
        flex-direction: column;
        padding: 15px 7px;
    }

    .about-block .about-text {
        order: 1;
    }

    .about-block .about-image {
        order: 2;
    }
}

/*================
メニュー
================*/
.trial-section {
    font-family: var(--font-serif);
}

.trial-section {
    text-align: center;
    padding: 0 1rem 2rem;
}

.trial-catch-area {
    /* border-radius: 12px; */
    /* padding-top: var(--contents-gutter); */
    margin-bottom: var(--contents-gutter);
}

.trial-catch {
    font-size: var(--size-lg);
    font-weight: 400;
    color: var(--trust-navy);
    margin-bottom: 0.5rem;
}


.included-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--trust-navy);
    margin: 1.5rem 0 0.5rem;
}

.trial-note {
    font-size: var(--size-lg);
    line-height: 1.8;
    color: var(--trust-navy);
    margin-bottom: 0.3rem;
    margin-top: 20px;
}


@media screen and (min-width:768px) {
    .trial-note {
        font-size: var(--size-xl);
        line-height: 1.1;
    }
}

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



.trial-note-sub {
    font-size: var(--size-lg-sp);
    font-weight: 500;
    color: var(--trust-navy);
    margin-top: var(--section-gutter);
    margin-bottom: 0;

}

.note-small {
    font-size: 20px;
}

.highlight-orange {
    color: var(--trust-navy);
    font-weight: 600;
}

.trial-price {
    display: inline-block;
    background-color: rgba(255, 134, 115, 0.1);
    padding: 0.5rem 2.1rem;
    border-radius: 999px;
    font-weight: bold;
    font-size: 25px;
    color: var(--trust-navy);
    margin: 1.5rem auto;
    margin-bottom: 25px;
}

.trial-price span {
    color: var(--growth-coral);
    font-size: var(--size-xl);
    margin-left: 5px;
}

.catch-bg-icon {
    position: absolute;
    bottom: -10px;
    /* ←文字のちょい下あたりにくるように */
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    /* サイズはお好みで */
    opacity: 0.2;
    /* 薄く重ねる感じに */
    z-index: 1;
    pointer-events: none;
    /* 画像の上でもクリックを妨げない */
}

.trial-message-lined {
    text-align: center;
    padding: 2rem 1rem;
    border-top: 2px solid var(--succy-blue);
    border-bottom: 2px solid var(--succy-blue);
    max-width: 800px;
    margin: 0 auto 2rem;
    margin-bottom: 40px;
}

.lined-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--trust-navy);
}

.lined-price {
    font-size: 25px;
    color: var(--calm-gray);
}

.trial-sub {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--trust-navy);
}


.lined-price span {
    color: var(--growth-coral);
    font-size: 30px;
    font-weight: bold;
}

.trial-section .bnr_area {
    margin-bottom: 50px;
}

.trial-section .bnr_area img {
    margin-inline: auto;
}

/* .white-overlay {
    display: none;
} */

.catch-img-wrapper img {
    display: none;
    height: auto;
    display: block;
    object-fit: cover;
}

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


    .catch-img-wrapper {
        position: relative;
        width: 100%;
        max-height: 320px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.3)
    }

    .catch-img-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        object-position: center 85%;
        max-height: 400px;
    }

    .white-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        /* 白の透過レイヤー */
        backdrop-filter: blur(3px);
        /* ←背景ぼかし効果で読みやすさUP */
        z-index: 1;
    }

    .catch-copy {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: var(--pure-white);
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        font-size: 40px;
        text-align: center;
        line-height: 1.6;
        font-family: var(--font-serif);
        padding: 1rem 1.5rem;
    }

    .trial-price span {
        color: var(--growth-coral);
        font-size: 30px;
        margin-left: 5px;
    }



}

@media screen and (max-width: 767px) {
    .trial-note-sub {
        font-size: 21px;
        /* 例: 読みやすく少し大きめ */
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    /* 行間も少し広めに */


    .trial-price {
        border-radius: 10px;
    }
}

/* SP ～519px */
@media (max-width: 519px) {
    .trial-section {
        padding: 0 !important;
    }

    .trial-catch-area .catch-img-wrapper {
        position: relative;
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .trial-catch-area .catch-img-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 1 !important;
        /* 画像は不透明のまま */
        background: rgba(255, 255, 255, 0.);
    }

    .trial-catch-area .catch-img-wrapper .white-overlay {
        position: absolute;
        inset: 0;

        pointer-events: none;
    }

    .catch-copy {
        margin: 3rem auto 8rem;
        color: var(--navy);
        font-size: var(--sp-title-s);

    }
}

/* PC保護（960px～） */
@media (min-width: 960px) {
    .trial-catch-area .catch-img-wrapper {
        margin-left: 0;
        transform: none;
        width: 100%;
    }

    .trial-catch-area .catch-img-wrapper .white-overlay {
        background: rgba(255, 255, 255, 0.12);
    }
}




/*==========min-width:768px==========*/
/* スマホ版のカード型デザイン */
.course-card-mobile {
    display: none;
    max-width: 100%;
    margin: 0 auto 30px;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(39, 90, 155, 0.08);
    position: relative;
    transition: all 0.3s ease;
}

.course-card-mobile:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(39, 90, 155, 0.12);
}

/* 人気ラベル（スマホ版） */
.course-card-mobile .label-mobile {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    color: var(--white);
    padding: 12px 20px 12px 30px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    z-index: 10;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 4px 12px rgba(39, 90, 155, 0.2);
}

/* 画像エリア */
.course-card-mobile .image-area {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-blue) 0%, rgba(187, 221, 239, 0.3) 100%);
}

.course-card-mobile .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-card-mobile:hover .image-area img {
    transform: scale(1.05);
}

/* グラデーションオーバーレイ */
.course-card-mobile .image-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
}

/* テキストエリア */
.course-card-mobile .text-area {
    padding: 30px 25px;
}

/* コースタイトル */
.course-card-mobile .course-title-mobile {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    text-align: center;
}

/* 区切り線 */
.course-card-mobile .divider {
    width: 60px;
    height: 2px;
    background: var(--primary-blue);
    margin: 0 auto 20px;
    border-radius: 2px;
}

/* コース説明 */
.course-card-mobile .course-content-mobile {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.9;
    text-align: center;
    letter-spacing: 0.02em;
}

/* アクセントドット */
.course-card-mobile .accent-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.course-card-mobile .dot {
    width: 6px;
    height: 6px;
    background: var(--primary-blue);
    border-radius: 50%;
    opacity: 0.6;
}

.course-card-mobile .dot:nth-child(2) {
    background: var(--accent-orange);
    opacity: 0.8;
}

/* リンクエリア */
.course-card-mobile .card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    text-decoration: none;
}

/* メディアクエリ */
@media (max-width: 768px) {
    .course-card-pc {
        display: none;
    }

    .course-card-mobile {
        display: block;
    }
}

@media (max-width: 480px) {
    .course-card-mobile .text-area {
        padding: 25px 20px;
    }

    .course-card-mobile .course-title-mobile {
        font-size: 1.3rem;
    }

    .course-card-mobile .course-content-mobile {
        font-size: 0.95rem;
    }

    .course-card-mobile .label-mobile {
        padding: 10px 18px 10px 25px;
        font-size: 0.85rem;
    }
}


.included-label-text {
    background-color: rgba(255, 255, 255, 0.7);
    /* 白の透明度85% */
    padding: 2rem 1.5rem;
    /* 上下左右の余白をバランスよく */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    /* ふんわり影 */
    max-width: 640px;
    text-align: center;
    margin: 0 auto;
    /* 横方向の中央寄せ */
    margin-top: var(--contents-gutter);
    /* margin: 5.2rem 2rem 2rem; */
    /* ← 上方向へ重ねる！ */
    max-width: 1200px;
    /* 中央寄せで読みやすく */
    position: relative;
    z-index: 5;
    /* 重なりを画像上に */
}

.trial-section h2,
.trial-section p,
.trial-section h3 {
    text-align: center;
    color: var(--text-color);

}

.trial-section h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.trial-section h2 span.sp-block {
    display: block;
}

.center_text p {
    font-size: 16px;
}

.center_text h3 {
    font-size: 16px;
}

.center_text h3 span.sp-block {
    display: block;
}

.course-grid {
    display: grid;
    gap: 3.2rem;
    margin-top: 32px;
    max-width: 800px;
    margin-inline: auto;
}

.course-card {
    overflow: hidden;
    background: var(--pure-white);
    border: 2px solid var(--trust-navy);
    border-radius: 1.6rem;
    padding: 3.2rem 2.4rem;
    margin-bottom: 2.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease;
    position: relative;
}

.course-card a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    transition: 0.3s;
}


.course-card .label {
    font-size: var(--size-lg);
    position: absolute;
    top: 26px;
    right: 1px;
    background-color: var(--trust-navy);
    color: #fff;
    line-height: 50px;
    transform: rotate(45deg);
}

.course-card .label::before {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    left: -49px;
    background-color: transparent;
    border-top: 50px solid transparent;
    border-right: 50px solid var(--trust-navy);
}

.course-card .label::after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    right: -49px;
    background-color: transparent;
    border-bottom: 50px solid var(--trust-navy);
    border-right: 50px solid transparent;
}


.icon-circle {
    margin: 0 auto 1rem;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--succy-blue);
}

.icon-circle-f img {
    width: 110px;
    height: 110px;
    margin-left: -10px;
    margin-top: -10px;
}

.course-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--trust-navy);
    margin: 0.5rem 0 0.2rem;
}

.course-title span {
    display: block;
}

.course-subtitle {
    font-size: 0.95rem;
    color: var(--calm-gray);
    margin: 0;
}

.course-content {
    font-size: 16px;
    text-align: left;
}

.course-content dl {
    margin-bottom: 16px;
}

.course-content dl dt {
    font-size: 18px;
}

.course-content span {
    display: block;
}

.course-content em {
    color: var(--growth-coral);
    font-style: normal;
}

@media (min-width: 768px) {
    .course-card a:hover {
        background-color: rgba(255, 255, 255, 0.6);
    }

    .trial-section h2 {
        font-size: var(--size-xl);
        color: var(--navy);
    }

    .trial-section h2 span.sp-block {
        display: inline;
    }

    .center_text p {
        font-size: 1.6rem;
    }



    .center_text h3 {
        font-size: 1.872rem;
        font-size: var(--size-lg);
    }

    .center_text h3 span.sp-block {
        display: inline;
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }

    .course-card.no1 {
        grid-column: 1/3;
        background-image: url(../../img/about02.jpg);
        background-size: 450px auto;
        background-repeat: no-repeat;
        background-position: right center;
    }

    .course-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.6rem;
        text-align: left;
    }

    .course-card .course-title {
        justify-self: start;
        grid-column: 1/3;
    }

    .course-title span {
        display: inline;
    }

    .course-title span.break {
        display: block;
    }

    .icon-circle {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--succy-blue);
    }

    .course-content {
        width: 100%;
    }

    .course-content .break {
        display: block;
    }

    .course-content dl {
        display: flex;
        gap: 16px;
    }

    .course-content dl dt {
        width: 50px;
        font-size: 16px;
    }

    .course-content dl dd {
        width: calc(100% - 50px);
    }

    .course-content dl span {
        display: inline;
    }

    .course-text {
        flex: 1;
        margin-left: -10px;
    }

    .course-card-sub {
        padding: 1rem auto;
    }
}



@media (max-width: 767px) {
    .course-card {
        display: block;
        text-align: center;
        margin-bottom: 0;
    }

    .course-grid {
        gap: 1.6rem;
        /* ←0.1remでもOK！ */
        padding: 1.2rem;
    }



    .icon-circle {
        margin: 0 auto 1.6rem;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--succy-blue);
    }

    /*=========min-width:767px===========*/
}

@media screen and (max-width: 768px) {
    .icon-circle {
        height: 90px !important;
        /* ← 高さを下げる */
        width: 90px !important;
        /* ← 必要なら幅も */
        padding: 0 !important;
        /* ← paddingで高さが出てる場合 */
    }

    .icon-circle img {
        height: 100% !important;
        /* ← 画像も枠内にフィットさせる */
        width: auto !important;
        margin-top: 2rem;
        margin-bottom: 0;
    }
}

/* タイトル・サブタイトル */
.course-title {
    font-size: 1.76rem;
    font-weight: bold;
    color: var(--trust-navy);
    margin: 0.32rem 0;
}

.course-subtitle {
    font-size: 0.95rem;
    color: var(--calm-gray);
    margin: 0;
}

/* PC版は非表示（既存デザインがあるため） */
.succy-pilates-showcase-card-mobile-v2-premium {
    display: none;
}

@media screen and (max-width: 768px) {
    .course-grid {
        display: none;
    }
}

/* ===== スマホ版のみ表示 ===== */
@media (max-width: 768px) {
    .succy-pilates-showcase-card-mobile-v2-premium {
        display: block;
        max-width: 100%;
        margin: 0 15px 20px;
        padding: 0;
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 35px rgba(39, 90, 155, 0.08);
        position: relative;
        transition: all 0.3s ease;
        text-align: left;
        border: 1.5px solid var(--trust-navy);
    }

    .succy-pilates-showcase-card-mobile-v2-premium:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(39, 90, 155, 0.12);
    }

    /* ラベルを右上の斜めカット風に */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-popularity-label-ribbon-diagonal {
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
        color: var(--white);
        padding: 12px 20px 12px 30px;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        z-index: 10;
        clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
        box-shadow: 0 4px 12px rgba(39, 90, 155, 0.2);
        transform: none;
        border-radius: 0;
    }

    /* アイコンエリアを画像エリアに変更 */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-featured-image-container-fullwidth {
        width: 100%;
        height: 180px;
        background: linear-gradient(135deg, var(--primary-blue) 0%, rgba(187, 221, 239, 0.3) 100%);
        border-radius: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-featured-image-container-fullwidth img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .succy-pilates-showcase-card-mobile-v2-premium:hover .succy-featured-image-container-fullwidth img {
        transform: scale(1.05);
    }

    /* グラデーションオーバーレイ */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-featured-image-container-fullwidth::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
    }

    /* テキストエリアのスタイリング */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-content-text-wrapper-centered {
        padding: 30px 25px 0;
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-course-title-heading-primary {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--primary-navy);
        margin-bottom: 15px;
        letter-spacing: 0.05em;
        text-align: center;
        position: relative;
        margin-top: 0;
    }

    /* タイトル下に区切り線を追加 */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-course-title-heading-primary::after {
        content: '';
        display: block;
        width: 60px;
        height: 2px;
        background: var(--primary-blue);
        margin: 15px auto 0;
        border-radius: 2px;
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-course-description-text-block {
        font-size: 1rem;
        color: var(--text-dark);
        line-height: 1.9;
        text-align: center;
        letter-spacing: 0.02em;
        padding: 0 25px 30px;
        position: relative;
    }

    /* リンクエリア */
    .succy-pilates-showcase-card-mobile-v2-premium .succy-interactive-link-overlay-fullcard {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        text-decoration: none;
    }
}

@media (max-width: 480px) {
    .succy-pilates-showcase-card-mobile-v2-premium .succy-content-text-wrapper-centered {
        padding: 5px 20px 0;
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-course-title-heading-primary {
        font-size: var(--sp-title-s);
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-course-description-text-block {
        font-size: var(--sp-text-s);
        padding: 0 20px 25px;
    }

    .succy-pilates-showcase-card-mobile-v2-premium .succy-popularity-label-ribbon-diagonal {
        padding: 10px 18px 10px 25px;
        font-size: 1.5rem;
    }
}



/*================
こんな方におすすめ
================*/


/* Main Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 20px; */
    position: relative;
    z-index: 1;

}

/* Header */
.header {
    text-align: center;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    margin-bottom: 60px;
    position: relative;
    box-shadow: 0 20px 60px rgba(123, 168, 199, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.header-decoration {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #7ba8c7, #9bb5d1);
    border-radius: 2px;
}

.title {
    font-size: 3rem;
    font-weight: 400;
    color: #34495e;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    position: relative;
}

.subtitle {
    font-size: 1.1rem;
    color: #515062;
    font-weight: 300;
    letter-spacing: 0.05em;
}

/* Content Layout */
.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    font-family: var(--font-serif);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    /* スマホの時に左右の余白も確保 */
}


/* Section Titles */
.section-title {
    margin-bottom: 40px;
}

.section-title-text {
    font-size: var(--size-lg);
    font-weight: 400;
    color: #34495e;
    display: inline-block;
    position: relative;
}

.section-title-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #7ba8c7, #9bb5d1);
    border-radius: 1px;
    margin: 15px auto 0;
    position: relative;
}

.section-title-line::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #9bb5d1;
    border-radius: 50%;
}

/* Chart Section */
.chart-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(123, 168, 199, 0.08);
}

.chart-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin-bottom: 40px;
}

.chart-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(123, 168, 199, 0.15));
}

/* Legend */
.legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.legend-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(123, 168, 199, 0.12);
    background: rgba(255, 255, 255, 0.95);
}

.legend-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.legend-text {
    font-size: var(--size-m);
    font-weight: 400;
    color: #5a6c7d;
}

.legend-percentage {
    margin-left: auto;
    font-weight: 500;
    color: #34495e;
    font-size: var(--size-m);
}

/* Concerns Section */
.concerns-section {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(123, 168, 199, 0.08);
}

.concerns-grid {
    display: grid;
    gap: 20px;
}

.concern-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.concern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(123, 168, 199, 0.05), transparent);
    transition: left 0.6s ease;
}

.concern-card:hover {
    transform: translateY(-8px);
    border-color: rgba(123, 168, 199, 0.2);
    box-shadow: 0 25px 50px rgba(123, 168, 199, 0.15);
    background: rgba(255, 255, 255, 0.95);
}

.concern-card:hover::before {
    left: 100%;
}

.concern-icon {
    font-size: 2rem;
    flex-shrink: 0;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.concern-card:hover .concern-icon {
    transform: scale(1.1);
}

.concern-content {
    flex: 1;
}

.concern-title {
    font-size: var(--size-md);
    font-weight: 600;
    color: #34495e;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.concern-items {
    color: #7f8c8d;
    font-size: var(--size-md);
    line-height: 1.6;
    font-weight: 300;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .chart-section {
        order: 1;
    }

    .concerns-section {
        order: 2;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .header {
        padding: 40px 25px;
        margin-bottom: 40px;
    }

    .title {
        font-size: 2.2rem;
    }

    .subtitle {
        font-size: 2rem;
        font-family: var(--font-serif);
        margin-left: 4px;


    }

    .content {
        gap: 40px;
    }

    .chart-section,
    .concerns-section {
        padding: 30px 25px;
    }

    .section-title-text {
        font-size: var(--sp-title-s);
    }

    .section-title {
        text-align: center;
    }

    .chart-container {
        width: 250px;
        height: 250px;
    }

    .legend {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .legend-item {
        padding: 12px;
    }

    .concern-card {
        padding: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .concern-icon {
        font-size: 1.8rem;
    }

    .shape {
        opacity: 0.1;
    }

    .shape-1,
    .shape-2 {
        width: 100px;
        height: 100px;
    }

    .shape-3,
    .shape-4 {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .header {
        border-radius: 20px;
        padding: 30px 20px;
    }

    .title {
        font-size: 1.8rem;
    }

    .chart-section,
    .concerns-section {
        border-radius: 20px;
        padding: 25px 20px;
    }

    .chart-container {
        width: 200px;
        height: 200px;
    }

    .concern-card {
        border-radius: 15px;
        padding: 18px;
    }

    .floating-shapes {
        display: none;
    }
}

/*================
プログラムについて
================*/


.program-section {
    font-family: var(--font-serif);
}

.section-heading h2 {
    font-size: var(--size-xl);
}

.program-section ul {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 16px;
}

.program-section ul li {
    padding-left: 1.5em;
    text-indent: -0.5em;
}


.program-section h2 {
    font-size: var(--size-lg);
    margin-bottom: 24px;
    text-align: center;

}

.program-section h3 {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.program-section .program-item h3 {
    border-bottom: 1px solid var(--trust-navy);
    font-size: var(--size-lg);

}

.program-section .program-text span {
    display: inline-block;
}

.program-section .program_lead {
    margin-bottom: 16px;
    text-align: center;
}

.program-content {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin-bottom: 4.8rem;
    font-size: var(--size-md);
}

.program-content p {
    margin-bottom: 1.6rem;
}

.program-section .program-item {
    border: 1px solid var(--trust-navy);
    border-radius: 8px;
    padding: 16px;
}

.program-section .program-item dl {
    font-size: 12px;
}


.program-section .program-item dl:not(:last-child) {
    margin-bottom: 16px;
}

.program-section .cancel-title {
    margin-bottom: 1.6rem;
}

.program-section .cancel-text {
    text-align: center;
}

.program-section .cancel-content {
    display: flex;
    justify-content: center;
}

.program-section .cancel-content dl {
    display: flex;
}

.program-section .cancel-content dl dt {
    width: 7em;
}

.program-section .program-item.subscription dl dl {
    display: flex;
    gap: 16px;
}

.program-section .alert {
    margin-bottom: 0;
    font-size: var(--size-sm);
    line-height: 1.2;
}

.program-section .alert span {
    color: #f66;
}

.program-section .other_menu dl {
    margin-bottom: 32px;
}

.program-section .other_menu table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: var(--contents-gutter);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.program-section .other_menu th,
.program-section .other_menu td {
    border: 1px solid var(--text-color);
    font-weight: normal;
}

.program-section .other_menu th {
    width: 200px;
    padding: 20px;
}

.program-section .other_menu td {
    padding: 20px;

}

@media screen and (min-width:768px) {
    .program-section .program_lead {
        margin-bottom: var(--contents-gutter);
    }

    .program-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .program-section .program-item.subscription {
        width: 40%;
    }

    .program-section .program-item {
        width: 40%;
    }


    .program-section .program-item h3 {
        margin-bottom: 32px;
    }




}


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

/*================
インストラクター
================*/

.owner-message-section {
    color: var(--text-dark);
}

.owner-message-section {
    min-height: 100vh;
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-message-container {
    max-width: 900px;
    width: 100%;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(39, 90, 155, 0.08);
    overflow: hidden;
    position: relative;
}

.owner-message-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--primary-blue) 50%, var(--accent-orange) 100%);
}

.owner-image-wrapper {
    padding: 60px 40px 40px;
    text-align: center;
    background: var(--white);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owner-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--primary-blue);
}

.owner-image {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--white);
    transition: transform 0.3s ease;
}

.owner-image:hover {
    transform: scale(1.05);
}

.owner-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 3.2rem;
    font-weight: 500;
    color: var(--navy);
    margin-top: 30px;
    letter-spacing: 0.1em;
    text-align: center;
}

.owner-title {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-top: 8px;
    font-weight: 300;
    text-align: center;
}

.message-content {
    padding: 50px 60px;
    background: var(--white);
}

.message-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    line-height: 2;
    color: var(--text-dark);
    margin-bottom: 40px;
    position: relative;
}

.message-text::first-letter {
    font-size: 3.5rem;
    float: left;
    line-height: 1;
    margin: 8px 12px 0 0;
    color: var(--navy);
    font-weight: 600;
}

.message-text p {
    margin-bottom: 24px;
}

.message-text p:last-child {
    margin-bottom: 0;
}

.highlight {
    background: linear-gradient(transparent 60%, var(--primary-blue) 60%);
    padding: 2px 4px;
    font-weight: 500;
    color: var(--navy);
}

.cta-wrapper {
    text-align: center;
    margin-top: 50px;
}

.cta-button {

    font-family: var(--font-serif);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--navy));
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(39, 90, 155, 0.25);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--section-gutter);
    margin-top: calc(var(--gutter-base)*2);
    margin-right: auto;
    margin-left: auto;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(39, 90, 155, 0.35);
}

.cta-icon {
    margin-left: 10px;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-icon {
    transform: translateX(5px);
}

.cta-block {
    text-align: center;
    margin-bottom: 80px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--navy));
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 2rem auto;
    box-shadow: 0 8px 25px rgba(39, 90, 155, 0.25);
    position: relative;
    overflow: hidden;
    font-family: var(--font-serif);
    transition: all 0.3s ease;
}

.cta-button .icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.cta-button:hover .icon {
    transform: translateX(5px);
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .owner-message-section {
        padding: 40px 15px;
    }

    .owner-message-container {
        border-radius: 16px;
        margin: 20px 0;
    }

    .owner-image-wrapper {
        padding: 40px 30px 30px;
    }

    .owner-image {
        width: 140px;
        height: 140px;
    }

    .owner-name {
        font-size: var(--sp-text);
        margin-top: 20px;
    }

    .message-content {
        padding: 40px 30px;
    }

    .message-text {
        font-size: 1rem;
        line-height: 1.9;
    }

    .message-text::first-letter {
        font-size: 2.8rem;
        margin: 5px 8px 0 0;
    }

    .cta-button {
        padding: 16px 30px;
        font-size: 1rem;
    }

    .cta-wrapper {
        text-align: center;
        margin-top: 0px;
    }
}

@media (max-width: 480px) {
    .owner-image-wrapper {
        padding: 30px 20px 25px;
    }

    .owner-image {
        width: 120px;
        height: 120px;
    }

    .owner-name {
        font-size: var(--sp-title-s);
    }

    .message-content {
        padding: 30px 25px;
    }

    .message-text {
        font-size: var(--sp-text-s);
        line-height: 1.8;
    }

    .message-text::first-letter {
        font-size: 2.5rem;
        margin: 3px 6px 0 0;
    }

    .cta-button {
        padding: 14px 25px;
        font-size: var(--sp-text);
    }
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.owner-message-container {
    animation: fadeInUp 0.8s ease-out;
}




/*================
lesson
================*/

.lesson {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: var(--section-gutter);
}

.lesson h2 {
    text-align: center;
    /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: inline-block;
    font-size: 20px;
    padding-bottom: 5px;
    margin-top: var(--section-gutter);
    /* margin-bottom: var(--contents-gutter); */
    display: block;
}

.lesson h2::after {
    content: "";
    display: block;
    width: 50px;
    /* 下線の長さ */
    height: 2px;
    /* 下線の太さ */
    background-color: #4A90E2;
    /* 青の下線 */
    margin: 5px auto 0;
    /* 中央配置 */
}

.program-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 中央揃え */
    gap: 20px;
    /* カード間の余白 */
    padding: 40px 20px;
    /* 外側の余白 */
}

.program-card {
    flex: 1 1 calc(33.33% - 20px);
    /* 3列レイアウト */
    max-width: 350px;
    /* 最大幅 */
    background: #F8F9FC;
    /* カードの背景色 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* ふんわり影 */
    text-align: center;
    transition: transform 0.3s ease;
}

.program-card:hover {
    transform: translateY(-5px);
    /* ホバー時に浮く */
}

.lesson_Balance_text {
    margin-bottom: 24px;
}



/* 画像 */
.program-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* レッスンタグ */
.lesson-tag {
    display: inline-block;
    background: #CDE1FA;
    color: #3A4A5E;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* スマホ版：1列表示 */
@media (max-width: 768px) {
    .program-card {
        flex: 1 1 100%;
    }
}

/* ボタンのスタイル */
.program-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    color: var(--text-color);
    border: 1px solid #4A8DA5;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.program-button:hover {
    background: #4A8DA5;
    color: #fff;
}

/*===================
レビュー
===================*/
.review-heading {
    font-size: var(--size-xl);
    font-family: var(--font-serif);
    margin-bottom: 0.5rem;
    text-align: center;
}

.review-stars {
    font-size: var(--size-md);
    color: var(--calm-gray);
    margin-bottom: 2rem;
    text-align: center;
    margin-top: var(--contents-gutter);
}

.stars {
    color: #FFC107;
    font-size: 25px;
    margin: 0 0.25rem;
}


.review-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    /* max-width: 300px; */
    margin-bottom: 2rem;
    background: #f9fbfc;
    border: 1px solid #e0e6ea;
    border-radius: 8px;
    padding: 2.4rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-left: 1.6rem;
    margin-right: 1.6rem;
}

/* .review-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
} */
.review_wrap {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホは1列 */
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem 1.6rem;
}

.review-user {
    text-align: center;
}

.review-user img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.review-author {
    font-size: 1.376rem;
    color: var(--calm-gray);
    margin: 0;
}

.review-text {
    font-size: var(--size-md);
    line-height: 1.6;
    color: #333;
}

.before-after {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.ba-img {
    width: 120px;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}

.ba-label {
    font-size: 0.75rem;
    color: var(--calm-gray);
    margin-top: 0.5rem;
    text-align: center;
}

body .slick-track {
    display: flex;
    align-items: stretch;
}

body .slick-slide {
    height: auto !important;
}

.review-body .review-title {
    font-weight: bold;
    font-size: 2.1rem;
    color: #275A9B;
    /* trust-navy */

}

.review-body .review-text {
    line-height: 1.6;
    white-space: pre-line;
}

@media screen and (min-width:768px) {
    .review-cards {
        grid-template-columns: repeat(2, 1fr);
    }



}

@media screen and (max-width: 767px) {
    .review-stars {
        font-size: var(--sp-text-s);
    }


    .review-text {
        font-size: var(--sp-text-s);
    }

    .review-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        /* max-width: 300px; */
        margin-bottom: 2rem;
        background: #f9fbfc;
        border: 1px solid #e0e6ea;
        border-radius: 8px;
        padding: 2.4rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        margin-left: 1.6rem;
        margin-right: 1.6rem;
    }


}



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

/*===================
プラン
===================*/
.container {
    max-width: 1000px;
    margin: 0 auto;
}

.main-title {
    text-align: center;
    font-size: var(--size-xl);
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: var(--contents-gutter);
    margin-top: calc(var(--contents-gutter)*2);
    letter-spacing: 0.02em;
}

.comparison-wrapper {
    display: flex;
    gap: 40px;
    align-items: stretch;
}


.plan-card {
    flex: 1;
    background: white;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.plan-card.monthly::before {
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.plan-card.ticket::before {
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.plan-header {
    text-align: center;
    margin-bottom: 2px;
}

.plan-header-s {
    text-align: center;
    font-size: var(--size-md);
}

.plan-title {
    display: inline-block;
    background: linear-gradient(135deg, #77bde2, #a8d4ec);
    color: white;
    font-size: var(--size-md);
    font-weight: 600;
    padding: 20px 40px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(187, 221, 239, 0.3);
}

.plan-title.ticket-title {
    background: linear-gradient(135deg, #77bde2, #a8d4ec);
    box-shadow: 0 4px 16px rgba(187, 221, 239, 0.3);
}

.features-list {
    list-style: none;
    margin-bottom: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: #34495e;
    line-height: 1.6;
}

.feature-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(187, 221, 239, 0.2);
}

.ticket .feature-icon {
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
    box-shadow: 0 2px 8px rgba(187, 221, 239, 0.2);
}

.feature-icon::after {
    content: '✓';
    margin-left: 50px;
    color: white;
    font-size: 15px;
    font-weight: 700;
}

.target-audience {
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border: 2px solid #bbddef;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
}

.ticket .target-audience {
    border-color: #bbddef;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.target-label {
    font-size: var(--size-sm);
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 400;
}

.target-text {
    font-size: var(--size-md);
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.5;
}

.decorative-element {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.1;
    top: -20px;
    right: -20px;
}


@media (max-width: 768px) {
    .comparison-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .main-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .plan-card {
        padding: 32px 24px;
    }

    .plan-title {
        font-size: 1.5rem;
        padding: 16px 32px;
    }

    .feature-item {
        font-size: 1rem;
    }

    .target-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* body {
        padding: 20px 15px;
    } */

    .main-title {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    .plan-card {
        padding: 24px 20px;
    }

    .plan-title {
        font-size: 1.3rem;
        padding: 14px 28px;
    }

    .feature-item {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .feature-icon {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }

    .target-audience {
        padding: 20px 16px;
    }

    .target-text {
        font-size: 0.95rem;
    }
}

.succy-pricing-comparison-container {
    max-width: 1000px;
    margin: 0 auto;
}

.succy-comparison-main-heading {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 60px;
    letter-spacing: 0.02em;
}

.succy-plans-comparison-grid {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

.container-card {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;

}


.succy-subscription-plan-card {
    flex: 1;
    background: white;
    border-radius: 18px;
    padding: 1.5rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* margin: 2rem 7.2rem; */
    max-width: 480px;
    flex: 1 1 400px;
    /* 横幅の基準 */
    margin: 1.5rem 0;
}

.succy-subscription-plan-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    flex-wrap: wrap;
}

.succy-subscription-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.succy-subscription-plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.succy-monthly-subscription-card::before {
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.succy-ticket-bundle-card::before {
    background: linear-gradient(90deg, #bbddef, #a8d4ec);
}

.succy-plan-title-section {
    text-align: center;
    margin-bottom: 2px;
    margin-top: 12px;
}

.succy-plan-type-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgb(119, 189, 226), #a8d4ec);
    color: white;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 20px 40px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(187, 221, 239, 0.3);
}

.succy-ticket-bundle-badge {
    background: linear-gradient(135deg, rgb(119, 189, 226), #a8d4ec);
    box-shadow: 0 4px 16px rgba(187, 221, 239, 0.3);
}

.succy-plan-features-listing {
    list-style: none;
    margin-bottom: 32px;
}

.succy-individual-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: var(--size-md);
    color: #34495e;
    line-height: 1.6;
}

.succy-feature-checkmark-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(187, 221, 239, 0.2);
}

.succy-ticket-bundle-card .succy-feature-checkmark-icon {
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
    box-shadow: 0 2px 8px rgba(187, 221, 239, 0.2);
}

.succy-feature-checkmark-icon::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-right: -9px;
    font-family: var(--font-sans);
}

.succy-target-customer-section {
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border: 2px solid #bbddef;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
}

.succy-ticket-bundle-card .succy-target-customer-section {
    border-color: #bbddef;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.succy-recommendation-label {
    font-size: var(--size-sm);
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 400;
}

.succy-target-customer-description {
    font-size: var(--size-md);
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.5;
}

.succy-monthly-subscription-card .succy-background-decorative-circle {
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
}

.succy-ticket-bundle-card .succy-background-decorative-circle {
    background: linear-gradient(135deg, #bbddef, #a8d4ec);
}

@media (max-width: 768px) {
    .succy-plans-comparison-grid {
        flex-direction: column;
        gap: 24px;
    }

    .succy-comparison-main-heading {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .succy-subscription-plan-card {
        padding: 32px 24px;
    }

    .succy-plan-type-badge {
        font-size: 1.5rem;
        padding: 16px 32px;
    }

    .succy-individual-feature-item {
        font-size: 1rem;
    }

    .succy-target-customer-description {
        font-size: 1rem;
    }

    .succy-feature-checkmark-icon::after {
        margin-left: -9px;
        font-size: 12px;
    }

}

@media (max-width: 480px) {


    .succy-comparison-main-heading {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    .succy-subscription-plan-card {
        padding: 4px 24px 20px;
        margin: 0 2rem;
    }

    .succy-plan-type-badge {
        font-size: 1.3rem;
        padding: 14px 28px;
    }

    .succy-individual-feature-item {
        font-size: var(--sp-text);
        margin-bottom: 16px;
    }

    .succy-feature-checkmark-icon {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }

    .succy-target-customer-section {
        padding: 20px 16px;
    }

    .succy-target-customer-description {
        font-size: var(--sp-text);
    }

    .program-section ul li {
        text-indent: -0.1em;
    }

    .program-section h2 {
        font-size: 20px;
    }

    .menu-leads {
        font-size: 13px;
        padding: 30px 5px;

    }
}


/*===================
アクセス
===================*/
.access-heading {
    text-align: center;
    font-size: var(--size-xl);
    margin-top: var(--section-gutter);
    margin-bottom: calc(var(--contents-gutter)*2);
    font-family: var(--font-serif);
}

.access-heading::after {
    content: "";
    display: block;
    width: 50px;
    /* 下線の長さ */
    height: 2px;
    /* 下線の太さ */
    background-color: #4A90E2;
    /* 青の下線 */
    margin: 15px auto 0;
    /* 中央配置 */
}

.access_box_wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.studio-box {
    width: 100%;
    text-align: left;
    background: #f9fbfc;
    padding: 2.4rem;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    font-size: 1.6rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.studio-box h3 {
    font-size: 24px;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.map-box {
    margin: 1.6rem 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.map-box iframe {
    width: 100%;

    aspect-ratio: 4/3;
    border-radius: 8px;
}

.attention {
    background: #fff0f0;
    color: #c62828;
    border-left: 4px solid #c62828;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-radius: 4px;
}

.btn_area {
    text-align: center;
}

.btn_area button {
    box-sizing: border-box;
}

.coming-soon {
    font-style: italic;
    color: var(--calm-gray);
    margin-top: 1rem;
}

.access-divider {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 2.5rem auto;
    width: 80%;
}

@media (min-width: 1024px) {

    .access_box_wrap {
        flex-direction: row;
    }

    .access_box_wrap .studio-box {
        width: 50%;
    }
}

/*===================
TOPICS
===================*/
.topics-inner {
    max-width: 650px;
    /* 中央のコンテンツ幅 */
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: 25px;
}

.topics-heading {
    text-align: center;
    font-size: var(--size-xxl);
    margin-top: var(--section-gutter);
    margin-bottom: calc(var(--contents-gutter)*2);
    font-family: var(--font-serif);
}

.topics h2 {
    text-align: center;
    /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: inline-block;
    font-size: var(--size-xl);
    padding-bottom: 5px;
    margin-top: var(--section-gutter);
    margin-bottom: var(--contents-gutter);
    display: block;

}

.topics h2::after {
    content: "";
    display: block;
    width: 120px;
    /* 下線の長さ */
    height: 2px;
    /* 下線の太さ */
    background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 20%, var(--navy) 50%, var(--primary-blue) 80%, transparent 100%);
    /* 青の下線 */
    margin: 15px auto 0;
    /* 中央配置 */
}

.topic-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
}

.topic-toggle {
    max-width: 100%;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 10px;
    font-size: var(--size-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.topic-content {
    display: none;
    /* 最初は非表示 */
    padding: 10px;
    font-size: 17px;
}

.topic-item.active .topic-content {
    display: block;
    text-align: left;
}

.topic-item.active .arrow {
    transform: rotate(100deg);
}

.arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
    color: #3A4A5E;
    /* padding-right: 10px; */
    transform-origin: 50% 50%;
    transform: translateX(-10px);

}

.topic-toggle span {
    padding-right: calc(var(--gutter-base)*8);
}



/* 押したら矢印が回転する */
.topic-item.active .arrow {
    transform: translateX(-10px) rotate(180deg);
}

.topic-btn {
    display: flex;
    justify-content: center;
    /* 水平方向の中央揃え */
    margin-top: var(--contents-gutter);
    margin-bottom: var(--section-gutter);
}

.about h2 {
    text-align: center;
    /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: inline-block;
    font-size: 20px;
    padding-bottom: 5px;
    margin-top: var(--section-gutter);
    margin-bottom: var(--contents-gutter);
    display: block;

}

.about h2::after {
    content: "";
    display: block;
    width: 50px;
    /* 下線の長さ */
    height: 2px;
    /* 下線の太さ */
    background-color: #4A90E2;
    /* 青の下線 */
    margin: 5px auto 0;
    /* 中央配置 */
}

.check-item::before {
    content: "✔";
    color: #4A8DA5;
    font-weight: bold;
    margin-right: 8px;
}

/* スマホ版 */
@media (max-width: 768px) {
    .topic-toggle {
        font-size: 14px;
        padding: 10px 8px;
        /* 余白を調整 */
        overflow: hidden;
    }

    .arrow {

        border-width: 1.5px;
        /* 線を少し細く */
        transform-origin: 50% 50%;
        transform: translateX(-10px);
    }

    .topics ul {
        padding: 0 20px;
    }

    /* 押したら矢印が回転する */
    .topic-item.active .arrow {
        transform: translateX(-10px) rotate(180deg);
    }

    .topics h2 {
        font-size: var(--sp-title);
    }

    .topic-content {
        font-size: var(--sp-text-s);
    }
}