@charset "UTF-8";

/* =========================================
   メインビジュアル (mv) - 動画埋め込み決定版
========================================= */
.mv {
    width: 100%;
    margin-top: 180px;
    position: relative;
}

.mv--video .mv__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1000;
    overflow: hidden;
    background-color: #e5e9eb;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 動画配置エリア */
.mv--video .mv__video-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
}

.mv--video .mv__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 左側のモヤ（PC版グラデーションオーバーレイ） */
.mv--video .mv__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            #e5e9eb 0%,
            #e5e9eb 5%,
            rgba(229, 233, 235, 0.85) 12%,
            rgba(229, 233, 235, 0.5) 22%,
            rgba(229, 233, 235, 0.15) 30%,
            rgba(229, 233, 235, 0) 35%);
    pointer-events: none;
}

/* コンテンツテキスト */
.mv--video .mv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 0 0;
    padding-left: 8%;
    padding-right: 20px;
    box-sizing: border-box;
}

.mv__title {
    font-size: 54px;
    line-height: 1.4;
    letter-spacing: 0.15em;
    margin-bottom: 50px;
    font-weight: 300;
}

.mv__text {
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 0.15em;
    margin-bottom: 100px;
}

/* PC版ボタン配置 */
@media screen and (min-width: 769px) {
    .mv .c-btn-wrap {
        position: absolute;
        top: 70%;
        left: 8%;
        z-index: 10;
        display: flex;
        justify-content: flex-start;
    }
}

.mv .c-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 60px;
    background-color: #A64A4A;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.mv .c-btn:hover {
    opacity: 0.85;
}

.mv .c-btn__arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    width: 5px;
    height: 8px;
    background-color: #ffffff;
    clip-path: polygon(0 0, 50% 25%, 100% 0, 50% 100%);
    transform: translateY(-50%) rotate(-90deg);
}

.mv__bar {
    width: 100%;
    height: 80px;
    background-color: rgba(166, 74, 74, 0.68);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv__bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mv__tags {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mv__tag {
    width: 140px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 9999px;
    color: #A64A4A;
    font-size: 15px;
    letter-spacing: 0.10em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv__price {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0.10em;
    margin-left: 10px;
}

@media screen and (max-width: 1500px) and (min-width: 769px) {
    .mv__title {
        font-size: 42px;
        margin-bottom: 30px;
    }

    .mv__text {
        font-size: 16px;
        margin-bottom: 50px;
    }

    .mv .c-btn-wrap {
        top: 70%;
    }
}
/* =========================================
   レスポンシブ（タブレット版：769px 〜 1024px）
========================================= */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .mv {
        margin-top: 120px;
    }

    .mv--video .mv__main {
        aspect-ratio: 1024 / 700;
    }

    .mv--video .mv__video-wrap {
        width: 60%;
    }

    .mv__title {
        font-size: 36px;
        margin-bottom: 25px;
    }

    .mv__text {
        font-size: 14px;
        line-height: 2.0;
        margin-bottom: 40px;
    }

    .mv .c-btn-wrap {
        top: 68%;
    }

    .mv .c-btn {
        width: 280px;
        height: 52px;
        font-size: 13px;
    }

    .mv__tag {
        width: 110px;
        height: 30px;
        font-size: 13px;
    }

    .mv__price {
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .mv {
        margin-top: 90px;
    }

    .mv--video .mv__main {
        position: relative;
        width: 100%;
        aspect-ratio: 750 / 1063;
        /* ★上揃え(flex-start)から下揃え(flex-end)へ変更 */
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        background-color: transparent;
        /* ★下からの位置調整（数字を小さくするとより下に落ちます） */
        padding-bottom: 30px;
        box-sizing: border-box;
    }

    /* 1. 動画枠 */
    .mv--video .mv__video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    /* 2. 動画本体 */
    .mv--video .mv__video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: none;
        display: block;
    }

    /* 3. オーバーレイ設定 */
    .mv--video .mv__overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background: rgba(255, 255, 255, 0.5);
    }

    /* テキストエリア */
    .mv--video .mv__inner {
        position: relative;
        z-index: 3;
        width: 100%;
        padding-left: 8%;
        padding-right: 8%;
        box-sizing: border-box;
    }

    .mv__title {
        font-size: 22px;
        line-height: 1.7;
        letter-spacing: 0.15em;
        margin-bottom: 15px;
        color: #fff;
        font-weight: 300;
    }

    .mv__text {
        font-size: 12px;
        line-height: 2.1;
        letter-spacing: 0.15em;
        margin-bottom: 0;
        color: #fff;
    }

    /* 4. ボタン配置 */
    .mv--video .c-btn-wrap {
        position: relative;
        top: auto;
        left: auto;
        z-index: 10;
        margin-top: -85px;
        margin-bottom: 25px;
        padding: 0 8%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

    .mv--video .c-btn {
        width: 100%;
        max-width: 320px;
    }

    /* 下部バー */
    .mv__bar {
        height: 86px;
        position: relative;
        z-index: 2;
    }

    .mv__bar-inner {
        flex-direction: column;
        gap: 8px;
    }

    .mv__tags {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mv__tag {
        width: 82px;
        height: 24px;
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    .mv__price {
        font-size: 19px;
        margin-left: 0;
    }
}
/* =========================================
   2. リニューアルキャンペーン (.campaign)
========================================= */
.campaign {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #BFA17A;
}

.campaign__title {
    font-size: 28px;
    color: #BFA17A;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-family: var(--font-en);
    font-weight: 300;
}

.campaign__divider {
    background-color: #BFA17A;
    flex-shrink: 0;
}

.campaign__offer-link {
    display: inline-block;
    color: var(--color-text-base);
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.campaign__offer-link:hover {
    opacity: 0.7;
}

.campaign__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-base);
    text-decoration: none;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
    white-space: nowrap;
    transition: opacity 0.3s;
    flex-shrink: 0;
}

.campaign__link:hover {
    opacity: 0.7;
}

.campaign__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-base);
}

.campaign__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--color-text-base);
}

.campaign__note {
    text-align: left;
    margin-top: 8px;
    margin-bottom: 0;
    white-space: normal;
}

@media screen and (min-width: 769px) {
    .campaign {
        padding: 30px 0;
    }

    /* 全体を中央寄せ（タイトル・仕切り線・コンテンツ） */
    .campaign__inner {
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
        padding-left: 170px;
        padding-right: 50px;
        display: flex;
        align-items: center; /* 垂直中央に配置 */
        box-sizing: border-box;
    }

    .campaign__divider {
        width: 1px;
        height: 125px;
        margin-left: 170px;
    }

    .campaign__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin-left: 100px;
    }

    /* 左テキストと右リンクの文字の高さを垂直中央で揃える */
    .campaign__main-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 40px;
    }

    .campaign__offer-link {
        font-size: 18px;
        line-height: 1.4;
    }
}

@media screen and (max-width: 768px) {
    .campaign {
        position: static;
        padding: 23px 0 20px;
        text-align: center;
    }

    .campaign__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 5%;
    }

    .campaign__title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .campaign__divider {
        width: 80%;
        height: 1px;
        margin: 0 auto 20px;
    }

    .campaign__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    .campaign__main-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .campaign__offer-link {
        font-size: 15px;
        margin-bottom: 15px;
        text-align: center;
        line-height: 1.5;
    }

    .campaign__note {
        text-align: left;
        width: 100%;
        margin-top: 15px;
    }

    .campaign__link {
        font-size: 14px;
        margin-left: 0;
    }
}


/* =========================================
   3. メッセージエリア (.message)
========================================= */
.message {
    width: 100%;
    padding: 300px 0 200px;
    background-color: var(--color-bg-1);
}

.message__inner {
    width: 90%;
    max-width: 1575px;
    margin: 0 auto;
}

.message__heading {
    font-size: 58px;
    color: var(--color-main);
    letter-spacing: 0.03em;
    margin-bottom: 60px;
    font-family: var(--font-en);
    font-weight: 300;
}

.message__content {
    display: flex;
    align-items: center;
    gap: 125px;
}

.message__img {
    width: 50%;
    max-width: 760px;
    min-width: 0;
    flex-shrink: 1;
}

.message__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 760 / 700;
    object-fit: cover;
    display: block;
}

.message__body {
    width: 50%;
    min-width: 0;
}

.message__title {
    font-size: 32px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin-bottom: 35px;
}

.message__text {
    line-height: 2.0;
    letter-spacing: 0.08em;
}

@media screen and (max-width: 1400px) and (min-width: 769px) {
    .message__content {
        gap: 60px;
    }

    .message__title {
        font-size: 21px;
    }

    .message__text {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .message {
        padding: 120px 0;
    }

    .message__inner {
        width: 100%;
        padding: 0 8%;
    }

    .message__heading {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .message__content {
        flex-direction: column;
        gap: 0;
    }

    .message__img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 40px;
    }

    .message__body {
        width: 100%;
    }

    .message__title {
        font-size: 21px;
        margin-bottom: 40px;
    }

    .message__text {
        font-size: 14px;
    }
}


/* =========================================
   4. メッセージフォトエリア (.message-photo)
========================================= */
.message-photo {
    width: 100%;
    display: flex;
}

.message-photo__item {
    width: 50%;
    max-height: 800px;
    overflow: hidden;
}

.message-photo__item img {
    width: 100%;
    height: 100%;
    max-height: 800px;
    object-fit: cover;
    display: block;
}


/* =========================================
   5. ポイントエリア (.point)
========================================= */
.point {
    width: 100%;
}

.point__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid #CDCDCD;
}

.point__card {
    height: 740px;
    box-sizing: border-box;
    padding: 0 20% 60px;
    border-right: 1px solid #CDCDCD;
    border-bottom: 1px solid #CDCDCD;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.point__num {
    position: absolute;
    top: 40px;
    left: 50px;
    font-size: 24px;
    color: var(--color-main);
    line-height: 1;
    font-family: var(--font-en);
    font-weight: 300;
}

.point__icon {
    width: 166px;
    height: 166px;
    background-color: var(--color-bg-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 109px;
    margin-bottom: 55px;
    flex-shrink: 0;
}

.point__icon img {
    width: auto !important;
    height: auto !important;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

.point__title {
    font-size: 20px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 45px;
}

.point__text {
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: left;
    width: 100%;
}

.point__note {
    margin-top: 15px;
    text-align: left;
    width: 100%;
}

.point__card--main {
    height: 740px;
    box-sizing: border-box;
    background-color: var(--color-main);
    color: #ffffff;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 23%;
}

.point__main-title {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 45px;
}

.point__main-text {
    line-height: 2.0;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .point__grid {
        grid-template-columns: 1fr;
        border-left: none;
    }

    .point__card {
        height: auto;
        padding: 0 10% 100px;
        border-left: none;
        position: static;
    }

    .point__num {
        position: static;
        font-size: 19px;
        color: var(--color-main);
        line-height: 1;
        margin-top: 90px;
        align-self: flex-start;
    }

    .point__card--main {
        height: auto;
        aspect-ratio: 1 / 1; /* 正方形（1:1）に固定 */
        width: 100%;
        padding: 0 12%; /* 正方形枠内に収めるための余白調整 */
        justify-content: center; /* 上下中央配置 */
        align-items: flex-start; /* 左揃えを維持 */
        box-sizing: border-box;
    }

    .point__icon {
        width: 150px;
        height: 150px;
        margin-top: 0;
        margin-bottom: 25px;
        flex-shrink: 0;
    }
    .point__card:nth-of-type(1) .point__icon img {
        max-width: 45%;
        max-height: 45%;
    }    .point__card:nth-of-type(2) .point__icon img {
        max-width: 45%;
        max-height: 45%;
    }    .point__card:nth-of-type(3) .point__icon img {
        max-width: 45%;
        max-height: 45%;
    }    .point__card:nth-of-type(4) .point__icon img {
        max-width: 40%;
        max-height: 65%;
    }
    .point__card:nth-of-type(5) .point__icon img {
        max-width: 40%;
        max-height: 40%;
    }
    .point__icon img{
        max-width: 40%;
        max-height: 40%;
    }

    .point__main-title {
        font-size: 21px;
        margin-bottom: 30px;
    }

    .point__main-text {
        font-size: 14px;
    }

    .point__title {
        font-size: 17px;
        margin-bottom: 25px;
    }

    .point__text {
        font-size: 14px;
    }
}


/* =========================================
   6. レッスンエリア (.lesson)
========================================= */
.lesson {
    width: 100%;
    padding-bottom: 300px;
    overflow: hidden;
}

.lesson__carousel-wrapper {
    width: 100%;
    position: relative;
}

.lesson__nav {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding-right: 5%;
    margin-bottom: 30px;
}

.lesson__nav-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-base);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: opacity 0.3s;
}

.lesson__nav-btn:hover {
    opacity: 0.5;
}

.lesson__swiper {
    width: 100%;
    padding-left: 5% !important;
    overflow: visible;
}

.lesson__swiper .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}

.lesson__swiper .swiper-slide.lesson__card {
    width: 440px;
    max-width: 440px;
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.lesson__img-box {
    position: relative;
    width: 100%;
}

.lesson__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lesson__step {
    position: absolute;
    top: 20px;
    left: 0;
    width: 81px;
    height: 24px;
    background-color: var(--color-main);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    font-family: var(--font-en);
    font-weight: 300;
}

.lesson__body {
    background-color: var(--color-bg-1);
    padding: 35px 5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lesson__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.lesson__title {
    font-size: 18px;
    letter-spacing: 0.05em;
}

.lesson__level {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-main);
}

.lesson__level-dots {
    display: flex;
    gap: 4px;
}

.lesson__level-dots i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-main);
    box-sizing: border-box;
}

.lesson__level-dots i.is-active {
    background-color: var(--color-main);
}

.lesson__target-wrapper {
    margin-bottom: 20px;
}

.lesson__target {
    display: inline-block;
    background-color: #ffffff;
    font-size: 13px;
    padding: 2px 10px;
    letter-spacing: 0.05em;
}

.lesson__desc {
    line-height: 1.8;
    letter-spacing: 0.05em;
    /* padding-bottom: 25px; */
    /* border-bottom: 1px solid #CDCDCD; */
    margin-bottom: 25px;
    flex: 1;
}

.lesson__recommend-title {
    font-size: 15px;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.lesson__recommend-list {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lesson__recommend-list li {
    position: relative;
    padding-left: 1em;
}

.lesson__recommend-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

@media screen and (max-width: 768px) {
    .lesson {
        padding-bottom: 130px;
    }

    .lesson__title {
        font-size: 15px;
    }

    .lesson__level {
        font-size: 11px;
    }

    .lesson__level-dots i {
        width: 8px;
        height: 8px;
    }

    .lesson__target {
        font-size: 11px;
    }

    .lesson__swiper .swiper-slide.lesson__card {
        width: 300px;
        max-width: 300px;
    }

    .lesson__body {
        padding: 25px 10% 40px;
    }

    .lesson__desc {
        font-size: 14px;
    }

    .lesson__recommend-title,
    .lesson__recommend-list {
        font-size: 13px;
    }
}


/* =========================================
   7. ガイドエリア (.guide)
========================================= */
.guide {
    width: 100%;
    background-color: var(--color-bg-1);
    padding-top: 140px;
    padding-bottom: 180px;
}

.guide__inner {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}

.guide__title {
    font-size: 28px;
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 80px;
}

.guide__step-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.guide__step-item {
    display: flex;
    align-items: center;
    gap: 40px;
}

.guide__step-img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.guide__step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.guide__step-content {
    flex: 1;
}

.guide__step-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
}

.guide__step-num {
    font-size: 20px;
    color: var(--color-main);
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-family: var(--font-en);
}

.guide__step-title {
    font-size: 20px;
    color: var(--color-text-base);
    letter-spacing: 0.05em;
    margin-left: 15px;
}

.guide__step-text {
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.guide__info-box {
    margin-top: 100px;
    background-color: #ffffff;
    border: 1px solid #CDCDCD;
    padding: 40px 10%;
    box-sizing: border-box;
}

.guide__info-title {
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.guide__info-text {
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.guide__info-text + .guide__info-text {
    margin-top: 15px;
}

@media screen and (max-width: 768px) {
    .guide {
        padding-top: 115px;
        padding-bottom: 80px;
    }

    .guide__title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .guide__inner {
        width: 80%;
    }

    .guide__step-list {
        gap: 40px;
    }

    .guide__step-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .guide__step-img {
        width: 150px;
        height: 150px;
    }

    .guide__step-header {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .guide__step-title {
        margin-left: 0;
        font-size: 18px;
    }

    .guide__step-num {
        font-size: 18px;
    }

    .guide__step-text {
        font-size: 14px;
        text-align: left;
        line-height: 1.7;
    }

    .guide__info-box {
        margin-top: 60px;
        padding: 40px 5%;
    }

    .guide__info-title {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .guide__info-text {
        font-size: 14px;
    }
}


/* =========================================
   8. ボイスエリア (.voice)
========================================= */
.voice {
    width: 100%;
    padding-bottom: 200px;
}

.voice__inner {
    width: 90%;
    max-width: 1575px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.voice__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    margin-bottom: 30px;
}

.voice__item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.voice__img-box {
    position: relative;
    width: 100%;
    height: 280px;
    margin-bottom: 20px;
    overflow: hidden;
}

.voice__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voice__tag {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    background-color: var(--color-main);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
    letter-spacing: 0.05em;
    box-sizing: border-box;
}

.voice__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.voice__title {
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    line-height: 1.6;
}

.voice__desc {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    flex: 1;
}

.voice__meta {
    font-size: 13px;
    letter-spacing: 0.05em;
    margin-top: auto;
}

@media screen and (max-width: 1200px) {
    .voice__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }
}

@media screen and (max-width: 900px) {
    .voice__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media screen and (max-width: 576px) {
    .voice {
        padding-bottom: 80px;
    }

    .voice__list {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 15px;
    }

    .voice__img-box {
        height: 220px;
    }

    .voice__title {
        font-size: 16px;
    }

    .voice__desc {
        font-size: 13px;
    }
}

/* =========================================
   9. トップフルイメージ (.top-full-image)
========================================= */
.top-full-image {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.top-full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 768px) {
    .top-full-image {
        height: 300px;
    }
}


/* =========================================
   10. プライスエリア (.price)
========================================= */
.price {
    width: 100%;
    padding-top: 300px;
    padding-bottom: 300px;
    overflow: hidden;
}

.price__container {
    width: 90%;
    max-width: 1575px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

.price__left {
    width: 50%;
    padding-left: 0;
    padding-right: 60px;
    box-sizing: border-box;
}

.price__right {
    width: 50%;
    padding-right: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.price__cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 60px;
}

.price__card {
    background-color: var(--color-bg-1);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.price__card-body {
    padding-left: 7%;
}

.price__card-title {
    font-size: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.price__card-text {
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.price__card-img {
    padding: 40px 40px 40px 0;
    flex-shrink: 0;
}

.price__card-img img {
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: cover;
    display: block;
}

.price__desc {
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.price__campaign {
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.price__campaign .u-color-main {
    color: var(--color-main);
}

.price__info .c-note {
    margin-bottom: 75px;
}

.price__btn-group {
    display: flex;
    gap: 20px;
}

.price__inner {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}

.price__comparison-header {
    margin-top: 230px;
    text-align: center;
}

.price__comparison-title {
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 45px;
}

.price__comparison-subtitle {
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}
.price__table-wrapper {
    width: 100%;
}

.price__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
}

.price__table th,
.price__table td {
    border-bottom: 1px solid #D9D9D9;
}

.price__table th {
    text-align: center;
    font-weight: 300;
    padding: 15px 0;
    vertical-align: middle;
}

.price__table th:nth-child(1) {
    background-color: #4D4D4D;
    color: #ffffff;
    width: 25%;
}

.price__table th.is-anella {
    background-color: var(--color-main);
    color: #ffffff;
    font-size: 18px;
    width: 35%;
}

.price__table th:nth-child(3) {
    background-color: #D9D9D9;
    color: var(--color-text-base);
    width: 40%;
}

.price__table td {
    padding: 30px 0;
    color: var(--color-text-base);
    vertical-align: middle;
}

.price__table td.is-anella {
    font-size: 18px;
    color: var(--color-main);
}

.price__table-wrapper .c-note {
    margin-top: 25px;
}

.price__table-lead {
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top: 50px;
    margin-bottom: 110px;
}

.price__campaign-box {
    display: flex;
    align-items: stretch;
}

.price__campaign-img {
    width: 450px;
    flex-shrink: 0;
}

.price__campaign-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.price__campaign-content {
    flex: 1;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price__campaign-en {
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: 0.1em;
    color: var(--color-main);
    margin-bottom: 40px;
    padding-top: 45px;
    font-family: var(--font-en);
    font-weight: 300;
}

.price__campaign-title {
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}

.price__campaign-content .c-btn-wrap {
    justify-content: flex-start;
}

.price__campaign-content .c-note {
    margin-top: auto;
    margin-top: 20px;
}

@media screen and (max-width: 1024px) {
    .price__card-body {
        padding-left: 40px;
    }

    .price__card-img {
        padding: 20px 20px 20px 0;
    }

    .price__btn-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .price__campaign {
        font-size: 14px;
    }

    .price__campaign-box {
        flex-direction: column;
    }

    .price__campaign-img {
        width: 100%;
        margin-bottom: 30px;
    }

    .price__campaign-content {
        padding-left: 0;
    }
}

@media screen and (max-width: 768px) {
    .price {
        padding: 80px 0;
    }

    .price__inner {
        width: 85%;
    }

    .price__container {
        flex-direction: column;
        width: 100%;
    }

    .price__card-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .price__card-text {
        font-size: 14px;
    }

    .price__left,
    .price__right {
        width: 85%;
        margin: 0 auto;
    }

    .price__left {
        margin-bottom: 10px;
        padding: 0;
    }

    .price__cards {
        gap: 20px;
        margin-bottom: 35px;
    }

    .price__card {
        align-items: flex-start;
        gap: 0;
    }

    .price__card-body {
        padding: 20px 20px 0 20px;
    }

    .price__card-img {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    .price__desc {
        font-size: 14px;
    }

    .price__comparison-header {
        margin-top: 90px;
    }

    .price__comparison-title {
        font-size: 19px;
        margin-bottom: 30px;
    }

    .price__comparison-subtitle {
        font-size: 16px;
    }

    .price__table {
        text-align: left;
    }

    .price__table th:nth-child(1) {
        width: 30%;
    }

    .price__table th:nth-child(3) {
        padding: 15px 5%;
    }

    .price__table td {
        padding: 10px 2%;
    }

    .price__table th,
    .price__table td {
        font-size: 14px;
    }

    .price__table th.is-anella,
    .price__table td.is-anella {
        font-size: 15px;
    }

    .price__table-lead {
        font-size: 15px;
        margin-top: 30px;
        margin-bottom: 60px;
    }

    .price__campaign-body {
        margin-bottom: 20px;
    }

    .price__campaign-en {
        font-size: 30px;
        padding: 0;
        margin-bottom: 25px;
    }

    .price__campaign-title {
        font-size: 19px;
        margin-bottom: 30px;
    }

    .price__info .c-note {
        margin-bottom: 35px;
    }
}


/* =========================================
   11. スタジオエリア (.studio)
========================================= */
.studio {
    width: 100%;
    background-color: var(--color-bg-1);
    padding-top: 170px;
    padding-bottom: 170px;
}

.studio__inner {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}

.studio__list-box {
    margin-bottom: 75px;
}

.studio__list-title {
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.studio__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.studio__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}

.studio__pref {
    letter-spacing: 0.05em;
    white-space: nowrap;
    width: 4em;
}

.studio__shops {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.studio__shops li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.studio__shops li a {
    color: var(--color-text-base);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

.studio__shops li a:hover {
    opacity: 0.6;
}

.studio__shops li:not(:last-child)::after {
    content: "|";
    color: var(--color-text-base);
    font-size: 14px;
}

.studio__btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media screen and (max-width: 1024px) {
    .studio__btn-group {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .studio__btn-group .c-btn {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .studio {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .studio__inner {
        width: 85%;
    }

    .studio__list-box {
        margin-bottom: 50px;
    }

    .studio__row {
        gap: 8px;
        align-items: baseline;
    }

    .studio__pref {
        text-align-last: left;
        width: 80px;
    }
}


/* =========================================
   12. 体験エリア (.trial)
========================================= */
.trial {
    width: 100%;
    padding-top: 300px;
    overflow: hidden;
}

.trial__container {
    width: 90%;
    max-width: 1575px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.trial__img-box {
    width: 50%;
    max-width: 770px;
    height: 773px;
    flex-shrink: 0;
}

.trial__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trial__content {
    width: 50%;
    padding-left: 80px;
    padding-right: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.trial__title {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 55px;
}

.trial__desc {
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 50px;
}

.trial__circle-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
}

.trial__circle-item {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--color-main);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.trial__circle-item span {
    color: var(--color-main);
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.trial__campaign {
    font-size: 18px;
    color: var(--color-main);
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.trial__content .c-note {
    margin-bottom: 80px;
}

.trial__content .c-btn-wrap {
    justify-content: flex-start;
}

@media screen and (max-width: 1024px) {
    .trial__content {
        padding-left: 40px;
    }
}

@media screen and (max-width: 768px) {
    .trial {
        padding-top: 0;
        padding-bottom: 100px;
    }

    .trial__container {
        width: 100%;
        flex-direction: column;
    }

    .trial__img-box {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: 0;
        margin-bottom: 35px;
    }

    .trial__content {
        width: 85%;
        padding-left: 0;
        padding-right: 0;
    }

    .trial__title {
        font-size: 21px;
        margin-bottom: 25px;
    }

    .trial__desc {
        font-size: 14px;
        margin-bottom: 35px;
    }

    .trial__circle-list {
        display: grid;
        grid-template-columns: repeat(2, 103px);
        width: fit-content;
        gap: 6px;
        margin: 0 auto 30px;
    }

    .trial__circle-item {
        width: 103px;
        height: 103px;
    }

    .trial__circle-item span {
        font-size: 14px;
    }

    .trial__campaign {
        font-size: 15px;
        text-align: center;
    }

    .trial__content .c-note {
        margin-bottom: 40px;
        text-align: center;
    }

    .trial__content .c-btn-wrap {
        justify-content: center;
    }
}


/* =========================================
   13. FAQエリア (.faq)
========================================= */
.faq {
    width: 100%;
    padding-bottom: 300px;
}

.faq__inner {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}

.faq__tab-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 50px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.faq__tab-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    height: 40px;
    border-radius: 9999px;
    border: 1px solid #BFA17A;
    background-color: #ffffff;
    color: var(--color-text-base);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
    width: auto;
}

.faq__tab-btn.is-active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #ffffff;
}

.faq__contents {
    border-top: 1px solid #CDCDCD;
}

.faq__group {
    display: none;
    border-top: none;
}

.faq__group.is-active,
.faq__group.is-show {
    display: block;
}

.faq__item {
    border-bottom: 1px solid #CDCDCD;
}

.faq__question {
    width: 100%;
    padding: 50px 5%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.faq__label {
    font-size: 20px;
    color: var(--color-main);
    line-height: 1;
    margin-right: 30px;
    flex-shrink: 0;
    font-family: var(--font-en);
    font-weight: 300;
}

.faq__question .faq__text {
    font-size: 18px;
    color: var(--color-text-base);
    line-height: 1.5;
    letter-spacing: 0.05em;
    padding-right: 40px;
}

.faq__icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
}

.faq__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 8px;
    background-color: var(--color-text-base);
    clip-path: polygon(0 0, 50% 25%, 100% 0, 50% 100%);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq__item.is-open .faq__icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, padding 0.4s ease;
    padding-bottom: 0;
    overflow: hidden;
    margin: 0 5%;
}

.faq__item.is-open .faq__answer {
    grid-template-rows: 1fr;
    padding-bottom: 50px;
}

.faq__answer-inner {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.faq__item.is-open .faq__answer-inner {
    opacity: 1;
}

.faq__answer .faq__text {
    font-size: 18px;
    color: var(--color-text-base);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .faq {
        padding-top: 0;
        padding-bottom: 100px;
    }

    .faq__tab-nav {
        gap: 8px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .faq__tab-btn {
        padding: 0 16px;
        height: 34px;
        font-size: 12px;
    }

    .faq__question {
        padding: 20px;
        align-items: baseline;
    }

    .faq__label {
        font-size: 18px;
        margin-right: 15px;
    }

    .faq__question .faq__text {
        padding-right: 30px;
    }

    .faq__question .faq__text,
    .faq__answer .faq__text {
        font-size: 15px;
    }

    .faq__item.is-open .faq__answer {
        padding-bottom: 30px;
    }
}