/* 横並び（1080pxの枠の中） */
.qualityflex {
    display: flex;
    /* 好きな余白に */
    align-items: flex-end;
    /* 必要なら center に */
    padding-top: 68px;
}

/* テキストは 450px で固定 */
.qualitytext {
    flex: 0 0 500px;
    /* ← 固定幅 */
    max-width: 500px;
}

/* 画像側は残りを全部使う */
.qualityimage {
    flex: 1 1 auto;
    /* ← 余ったぶん全部 */
    min-width: 0;
    /* ★ はみ出し防止（重要） */
}

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

.inner {
    margin: auto;
    max-width: 1920px;
    text-align: center;
}

.inner img {
    margin: auto;
    width: 100%;
    text-align: center;
}

/* ── タイトル（文字は常に最前面） ── */
.qualitytitle {
    font-size: 36px;
    text-align: left;
    font-family: "berthold-baskerville-pro", sans-serif;
    font-weight: 400;
    padding-top: 30px;
    padding-bottom: 32px;
    padding-left: 15px;
    letter-spacing: 6px;
    position: relative;
    /* 疑似要素の基準 */
    z-index: auto;
    /* 余計なスタックを作らない */
}

/* ▼ 三角：タイトルの“背面”に置く（背景よりは前） */
.qualitytitle::before {
    content: "";
    position: absolute;
    right: 202px;
    /* 位置は好みで微調整 */
    top: 18px;
    width: clamp(86px, 26vw, 101px);
    aspect-ratio: 100 / 86;
    background: url("../img/sp/trianglesp.svg") center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
    z-index: -1;
    /* 文字より後ろ、背景より前 */
    /* 必要なら映え用: mix-blend-mode: screen; */
}

/* ▼ 背景延長：タイトルの“下半分”から下へ広げる */
.qualitytitle::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* 画面幅いっぱい。コンテンツ幅に合わせるなら 100% に */
    top: 50%;
    /* ← 開始位置（下半分）。40〜60%で微調整可 */
    bottom: -217px;
    /* ← 下へ十分延長（必要なら数値変更） */
    /* background: #1B1D25; */
    pointer-events: none;
    z-index: -2;
    /* 三角のさらに背面（=最背面） */
}

/* ── タイトルの下に来るコンテンツは常に前面 ── */
.qualitymain,
.qualitysub,
.modelplanmap,
.modelplantab {
    position: relative;
    /* z-index を効かせるための最低限 */
    z-index: 0;
    /* 背景(z:-2)より前、三角(z:-1)よりも前にしたい場合は 1 に */
}

/* 既存の体裁そのまま（必要なら） */
.qualitymain {
    font-size: 25px;
    text-align: left;
    margin: auto;
    line-height: 1.3;
    padding-left: 30px;
    padding-bottom: 24px;
}

.qualitysub {
    font-size: 13px;
    text-align: left;
    margin: auto;
    line-height: 1.6;
    padding-left: 30px;
    padding-bottom: 6px;
}

/* ゴースト見出し（背景の上に大きく薄く） */
.qualitytext {
    position: relative;
    /* 擬似要素の基準にする */
    z-index: 0;
    /* スタッキングコンテキスト化 */
    /* 調整ノブ */
    --ghost-left: 114px;
    --ghost-top: 55px;
    /* 上オフセット（小見出しに少し被せる） */
    --ghost-size: clamp(62px, 7vw, 62px);
    /* 文字サイズ */
    --ghost-tracking: .25em;
    /* 文字間 */
    --ghost-alpha: .08;
    /* 透明度（0.05〜0.12あたり） */
}

.qualitytext::before {
    content: "QUALITY";
    position: absolute;
    left: var(--ghost-left);
    top: var(--ghost-top);
    font-family: "berthold-baskerville-pro", serif;
    font-weight: 400;
    font-size: var(--ghost-size);
    letter-spacing: var(--ghost-tracking);
    line-height: 1;
    color: rgba(255, 255, 255, var(--ghost-alpha));
    white-space: nowrap;
    pointer-events: none;
    z-index: -2;
    /* 背景よりは前/小見出しよりは後ろにしたい場合は -1〜0 で微調整 */
}

body {
    font-family: "yu-mincho-pr6n", sans-serif;
    margin: auto;
    padding: 0;
    scroll-behavior: smooth;
    color: white;
    overflow: hidden;
    background-color: #000;
}

/* 横並び（1080pxの枠の中） */
.modelflex2 {
    display: flex;
    /* 好きな余白に */
    align-items: flex-end;
    /* 必要なら center に */
    padding-top: 68px;
}

/* テキストは 450px で固定 */
.modeltext {
    flex: 0 0 450px;
    /* ← 固定幅 */
    max-width: 450px;
}

/* 画像側は残りを全部使う */
.modelimage {
    flex: 1 1 auto;
    /* ← 余ったぶん全部 */
    min-width: 0;
    /* ★ はみ出し防止（重要） */
}

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

/* ── タイトル（文字は常に最前面） ── */
.modelplantitle2 {
    font-size: 36px;
    text-align: left;
    font-family: "berthold-baskerville-pro", sans-serif;
    font-weight: 400;
    padding-top: 30px;
    padding-bottom: 32px;
    padding-left: 15px;
    letter-spacing: 6px;
    position: relative;
    /* 疑似要素の基準 */
    z-index: auto;
    /* 余計なスタックを作らない */
}

/* ▼ 三角：タイトルの“背面”に置く（背景よりは前） */
.modelplantitle2::before {
    content: "";
    position: absolute;
    right: 109px;
    /* 位置は好みで微調整 */
    top: 18px;
    width: clamp(86px, 26vw, 101px);
    aspect-ratio: 100 / 86;
    background: url("../img/sp/trianglesp.svg") center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
    z-index: -1;
    /* 文字より後ろ、背景より前 */
    /* 必要なら映え用: mix-blend-mode: screen; */
}

/* ▼ 背景延長：タイトルの“下半分”から下へ広げる */
.modelplantitle2::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* 画面幅いっぱい。コンテンツ幅に合わせるなら 100% に */
    top: 50%;
    /* ← 開始位置（下半分）。40〜60%で微調整可 */
    bottom: -217px;
    /* ← 下へ十分延長（必要なら数値変更） */
    background: #1B1D25;
    pointer-events: none;
    z-index: -2;
    /* 三角のさらに背面（=最背面） */
}

/* ── タイトルの下に来るコンテンツは常に前面 ── */
.modelplanmain2,
.modelplansub2,
.modelplanmap,
.modelplantab {
    position: relative;
    /* z-index を効かせるための最低限 */
    z-index: 0;
    /* 背景(z:-2)より前、三角(z:-1)よりも前にしたい場合は 1 に */
}

/* 既存の体裁そのまま（必要なら） */
.modelplanmain2 {
    font-size: 25px;
    text-align: left;
    margin: auto;
    line-height: 1.3;
    padding-left: 30px;
    padding-bottom: 24px;
}

.modelplansub2 {
    font-size: 13px;
    text-align: left;
    margin: auto;
    line-height: 1.6;
    padding-left: 30px;
    padding-bottom: 24px;
}

/* ゴースト見出し（背景の上に大きく薄く） */
.modeltext {
    position: relative;
    /* 擬似要素の基準にする */
    z-index: 0;
    /* スタッキングコンテキスト化 */
    /* 調整ノブ */
    --ghost-left: 17px;
    /* 左オフセット */
    --ghost-top: 3px;
    /* 上オフセット（小見出しに少し被せる） */
    --ghost-size: clamp(62px, 7vw, 62px);
    /* 文字サイズ */
    --ghost-tracking: .25em;
    /* 文字間 */
    --ghost-alpha: .08;
    /* 透明度（0.05〜0.12あたり） */
}

.modeltext::before {
    content: "MODEL PLAN";
    position: absolute;
    left: var(--ghost-left);
    top: var(--ghost-top);
    font-family: "berthold-baskerville-pro", serif;
    font-weight: 400;
    font-size: var(--ghost-size);
    letter-spacing: var(--ghost-tracking);
    line-height: 1;
    color: rgba(255, 255, 255, var(--ghost-alpha));
    white-space: nowrap;
    pointer-events: none;
    z-index: -2;
    /* 背景よりは前/小見出しよりは後ろにしたい場合は -1〜0 で微調整 */
}

/* 既存：三角は小見出しに付いているのでそのままでOK
   .modelplantitle2::before（z-index:-1）との前後関係が気になる場合は
   上の z-index を -2 にしておけば三角が手前に来る */

@media (min-width: 1025px) {
    .sp {
        display: none;
    }
}

@media (max-width: 1024px) {
    .pc {
        display: none;
    }
}

@media (max-width: 2000px) {
    ._4k {
        display: none;
    }
}

@media (min-width: 2001px) {
    ._4k {
        display: block;
    }
}

.padding-top {
    padding-top: 68px;
}

.ctabutton {
    position: fixed;
    /* 右2%・下2%（iOSのセーフエリアも考慮） */
    right: calc(2% + env(safe-area-inset-right));
    bottom: calc(2% + env(safe-area-inset-bottom));
    z-index: 1000;
    /* 常に最前面 */
    display: inline-block;
    /* 任意：影＆ホバー */
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
    cursor: pointer;
}

.ctabutton img {
    display: block;
    width: clamp(98px, 22vw, 98px);
    /* 画像サイズはお好みで */
    height: auto;
    pointer-events: auto;
}



.header {
    font-family: "kozuka-mincho-pro", serif;
    font-weight: 200;
    font-style: normal;
    position: fixed;
    /* 常にスクロールについてくる */
    top: 0;
    right: 0;
    width: 100%;
    /* 横幅いっぱいに広げる */
    background: rgba(255, 255, 255, 0);
    /* 半透明背景（色はお好みで変更可能） */
    /* backdrop-filter: blur(6px); */
    /* 背景をぼかす（モダンなブラウザ対応） */
    z-index: 10000;
    /* 他の要素より前面に表示 */
    letter-spacing: 0.14em;
    /* 36px時に約5px相当 */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 34px;
    max-width: 880px;
}

.header img {
    height: 30px;
    margin-right: 20px;
}

.header a {
    margin: 0 10px;
    text-decoration: none;
    color: white;
    /* リンクの色 */
    font-weight: bold;
    line-height: 1;
}

.logo {
    position: fixed;
    padding-top: 27px;
    padding-left: 6%;
    z-index: 10000;
}

.logo img {
    width: 100px;
}




@media (min-width: 2001px) {
    .header {
        position: fixed;
        /* 常にスクロールについてくる */
        top: 0;
        right: 0;
        width: 100%;
        /* 横幅いっぱいに広げる */
        background: rgba(255, 255, 255, 0);
        /* 半透明背景（色はお好みで変更可能） */
        /* backdrop-filter: blur(6px); */
        /* 背景をぼかす（モダンなブラウザ対応） */
        z-index: 9999;
        /* 他の要素より前面に表示 */
        padding-right: 6%;
    }
}

/* ============ ハンバーガー（SPで表示） ============ */
.hamburger {
    position: fixed;
    top: 18px;
    right: calc(6% + env(safe-area-inset-right, 0px));
    z-index: 10003;
    /* ロゴ/ナビより上 */
    width: 42px;
    height: 42px;
    /* タップ領域は広め */
    display: none;
    /* PCでは非表示 */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hamburger__box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 15px;
    transform: translate(-50%, -50%);
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.hamburger__inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger__inner::before {
    top: -6.5px;
}

.hamburger__inner::after {
    top: 6.5px;
}

/* 開いた時の「×」アニメ */
.nav-open .hamburger__inner {
    transform: rotate(45deg);
}

.nav-open .hamburger__inner::before {
    opacity: 0;
}

.nav-open .hamburger__inner::after {
    transform: rotate(-90deg);
    top: 0;
}

/* ============ 背面スクリーン ============ */
.nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 10000;
    /* ナビの下、ロゴと同等なら 10000 でOK */
}

/* ============ SPレイアウト（縦メニュー） ============ */
@media (max-width: 1024px) {
    .hamburger {
        display: inline-block;
    }

    /* ←左から ではなく 右から出す */
    .header {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        /* ★ 右固定に変更 */
        height: 100dvh;
        width: min(100vw, );
        z-index: 10001;
        /* 色なし＋ブラーだけ */
        background: transparent;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.001);
        /* 透明度ほぼゼロでblur安定化 */
        pointer-events: none;
    }

    /* 縦並び＆右からスライドイン */
    .header {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* 右揃えにしたければ flex-end に */
        gap: 18px;
        padding: 82px 24px;
        transform: translateX(110%);
        /* ★ 右外へ退避（+方向） */
        transition: transform .30s ease;
        justify-content: flex-start;
        /* ← space-between を上書き */
        gap: 40px;
    }

    .nav-open .header {
        transform: translateX(0);
    }

    .header a {
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        text-decoration: none;
    }

    .nav-open .nav-scrim {
        display: block;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* PC側はこれまでのレイアウトをそのまま使用（必要なら明示） */
@media (min-width: 1025px) {
    .nav-scrim {
        display: none !important;
    }
}


.flex {
    display: flex;
}

@media (min-width: 1025px) {
    .fv {

        position: relative;
        /* height: calc((100vw - 16vw) / 1.94); */
        /* アスペクト比 1.94:1 を維持 */
        height: 100vh;
        overflow: hidden;
    }

    .fv img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        /* 画像を中央揃え */
        opacity: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* アスペクト比維持しつつFV全体にフィット */
        transition: opacity 2s ease;
        /* フェードイン・フェードアウト */
    }
}

@media (max-width: 1025px) {
    .fv {
        width: 100%;
        height: auto;
    }

    .fv img {
        width: 100%;
        height: auto;
    }

}

.max-width {
    max-width: 1080px;
    margin: auto;
}

@media (max-width: 1024px) {
    .max-width {
        max-width: 92%;
        margin: auto;
    }
}

.concept {
    background-image: url(../img/conceptback.png);
    background-size: cover;
    /* 画像を要素いっぱいに表示 */
    background-position: center;
    /* 中央寄せ */
    background-repeat: no-repeat;
    /* 繰り返し防止 */
}

@media (max-width: 1024px) {
    .concept {
        background-image: url(../img/sp/conceptbacksp.png);
        background-size: cover;
        /* 画像を要素いっぱいに表示 */
        background-position: center;
        /* 中央寄せ */
        background-repeat: no-repeat;
        /* 繰り返し防止 */
        padding-bottom: 100px;
    }
}

.conceptmain {
    padding-top: 16%;
    font-size: 36px;
}

.conceptsub {
    font-size: 16px;
    padding-bottom: 16%;
}

@media (max-width: 1024px) {
    .conceptmain {
        font-size: 24px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .conceptsub {
        font-size: 14px;
        padding-bottom: 32px;
        line-height: 2.3;
    }
}

.price {
    background-color: #1B1D25;
    padding-top: 100px;
    padding-bottom: 46px;
}

.price .flex {
    justify-content: space-between;
    max-width: 1180px;
}

.price img {
    max-width: 50%;
    height: auto;
}

@media (max-width: 1280px) {
    .price .flex {
        justify-content: space-between;
        max-width: 1180px;
    }
}

@media (min-width: 1281px) {
    .price .flex {
        justify-content: space-between;
        max-width: 1080px;
        margin: auto;
    }

    .price img {
        max-width: 46%;
        height: auto;
    }
}

@media (min-width: 2001px) {
    .price .flex {
        justify-content: space-between;
        max-width: 1080px;
        margin: auto;
    }

    .price img {
        max-width: 46%;
        height: auto;
    }
}



.pricemain {
    font-size: 36px;
    text-align: right;
    font-family: "berthold-baskerville-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #C9CACA;
    letter-spacing: 5px;
    padding-bottom: 42px;
}

.pricesub {
    font-size: 13px;
    text-align: right;
}


@media (max-width: 1024px) {
    .pricemain {
        font-size: 28px;
        text-align: center;
        font-family: "berthold-baskerville-pro", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #C9CACA;
        padding-top: 30px;
        padding-bottom: 32px;
        letter-spacing: 5px;
    }

    .pricesub {
        font-size: 14px;
        text-align: left;
        max-width: 93%;
        margin: auto;
    }

    .priceback {
        background-color: rgba(0, 0, 0, 0.6);
        /* 0.0〜1.0：数値を小さくすると薄くなる */
    }
}

@media (max-width: 1024px) {

    /* ── タイトル（文字は常に最前面） ── */
    .modelplantitle {
        font-size: 36px;
        text-align: center;
        font-family: "berthold-baskerville-pro", sans-serif;
        font-weight: 400;
        padding-top: 30px;
        padding-bottom: 32px;
        letter-spacing: 6px;

        position: relative;
        /* 疑似要素の基準 */
        z-index: auto;
        /* 余計なスタックを作らない */
    }

    /* ▼ 三角：タイトルの“背面”に置く（背景よりは前） */
    .modelplantitle::before {
        content: "";
        position: absolute;
        right: 0;
        /* 位置は好みで微調整 */
        top: 18px;
        width: clamp(86px, 26vw, 160px);
        aspect-ratio: 100 / 86;
        background: url("../img/sp/trianglesp.svg") center / contain no-repeat;
        opacity: .9;
        pointer-events: none;
        z-index: -1;
        /* 文字より後ろ、背景より前 */
        /* 必要なら映え用: mix-blend-mode: screen; */
    }

    /* ▼ 背景延長：タイトルの“下半分”から下へ広げる */
    .modelplantitle::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        /* 画面幅いっぱい。コンテンツ幅に合わせるなら 100% に */
        top: 50%;
        /* ← 開始位置（下半分）。40〜60%で微調整可 */
        bottom: -312px;
        /* ← 下へ十分延長（必要なら数値変更） */
        background: #1B1D25;
        pointer-events: none;
        z-index: -2;
        /* 三角のさらに背面（=最背面） */
    }

    /* ── タイトルの下に来るコンテンツは常に前面 ── */
    .modelplanmain,
    .modelplansub,
    .modelplanmap,
    .modelplantab {
        position: relative;
        /* z-index を効かせるための最低限 */
        z-index: 0;
        /* 背景(z:-2)より前、三角(z:-1)よりも前にしたい場合は 1 に */
    }

    /* 既存の体裁そのまま（必要なら） */
    .modelplanmain {
        font-size: 22px;
        text-align: left;
        margin: auto;
        line-height: 2.2;
        padding-bottom: 44px;
    }

    .modelplansub {
        font-size: 13px;
        text-align: left;
        margin: auto;
        line-height: 2.4;
        padding-bottom: 44px;
    }

    .modelplanmap {
        width: 100%;
    }

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

    .modelplantab {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 30px;
        gap: 30px;
    }

    .modelplantab img {
        width: 100%;
    }
}


/* .modelplantextback {
    background-image: url(../img/modelplantextback.png);
    width: 42%;
}

.modelplantitle {
    padding-top: 30px;
    font-size: 36px;
}

.modelplansub {
    font-size: 25px;
}

.modelplanimage {
    max-width: 58%;
}

.modelplanimage img {
    width: 100%;
} */

.modelplan {
    padding-top: 68px;
    width: 100%;
    padding-bottom: 34px;
}

.modelplan img {
    width: 100%;
}

.modelmap {
    width: 36%;
}

.modelmap img {
    width: 100%;
}

.modeltab {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* サムネの見た目 */
.modeltab img {
    width: 100%;
    cursor: zoom-in;
}

/* ===== Lightbox ===== */
.lb-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
}

.lb-modal.is-open {
    display: block;
}

body.lb-open {
    overflow: hidden;
}

.lb-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.lb-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 94vw;
    max-height: 90dvh;
    display: grid;
    place-items: center;
    background: transparent;
    overflow: visible;
}

.lb-img {
    max-width: 185%;
    height: auto;
    display: block;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
    filter: brightness(1.15) contrast(1.05) saturate(1.05);
}

.lb-cap {
    margin-top: 10px;
    color: #eee;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* 閉じる × ボタン */
.lb-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    cursor: pointer;
}

.lb-close:hover {
    background: rgba(0, 0, 0, .8);
}

.modelflex {
    display: flex;
    justify-content: space-between;
}

.equipmentback {
    background-image: url(../img/equipmentback.png);
    background-size: cover;
    /* 画像を要素いっぱいに表示 */
    background-position: center;
    /* 中央寄せ */
    background-repeat: no-repeat;
    /* 繰り返し防止 */
}

@media (max-width: 1024px) {

    /* ── タイトル（文字は常に最前面） ── */
    .qualitytitle {
        font-size: 36px;
        text-align: center;
        font-family: "berthold-baskerville-pro", sans-serif;
        font-weight: 400;
        padding-top: 30px;
        padding-bottom: 32px;
        padding-left: 0px;
        letter-spacing: 6px;

        position: relative;
        /* 疑似要素の基準 */
        z-index: auto;
        /* 余計なスタックを作らない */
    }

    /* ▼ 三角：タイトルの“背面”に置く（背景よりは前） */
    .qualitytitle::before {
        content: "";
        position: absolute;
        right: 72px;
        /* 位置は好みで微調整 */
        top: 18px;
        width: clamp(86px, 23vw, 160px);
        aspect-ratio: 100 / 86;
        background: url("../img/sp/trianglesp.svg") center / contain no-repeat;
        opacity: .9;
        pointer-events: none;
        z-index: -1;
        /* 文字より後ろ、背景より前 */
        /* 必要なら映え用: mix-blend-mode: screen; */
    }

    /* ▼ 背景延長：タイトルの“下半分”から下へ広げる */
    .qualitytitle::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        /* 画面幅いっぱい。コンテンツ幅に合わせるなら 100% に */
        top: 50%;
        /* ← 開始位置（下半分）。40〜60%で微調整可 */
        bottom: -1106px;
        /* ← 下へ十分延長（必要なら数値変更） */
        background: #1B1D25;
        pointer-events: none;
        z-index: -2;
        /* 三角のさらに背面（=最背面） */
    }

    /* ── タイトルの下に来るコンテンツは常に前面 ── */
    .qualitymain,
    .qualitysub,
    .qualitymap,
    .qualitytab {
        position: relative;
        /* z-index を効かせるための最低限 */
        z-index: 0;
        /* 背景(z:-2)より前、三角(z:-1)よりも前にしたい場合は 1 に */
    }

    /* 既存の体裁そのまま（必要なら） */
    .qualitymain {
        font-size: 25px;
        text-align: center;
        margin: auto;
        line-height: 2.2;
        padding-bottom: 30px;
        padding-left: 0px;
    }

    .qualitysub {
        font-size: 13px;
        text-align: center;
        margin: auto;
        line-height: 2.4;
        padding-bottom: 44px;
        padding-left: 0px;
    }

    .quality2title {
        font-size: 25px;
        padding-bottom: 44px;
        padding-left: 0px;
        line-height: 1;
    }

    .quality2text {
        font-family: "kozuka-gothic-pr6n", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 2.4;
        padding: 0px 0px 20px 9px;
        /* 右上に余白が必要ならここで調整 */
        background-image: url(../img/sp/hexagon.png);
        background-repeat: no-repeat;
        /* タイルを止める */
        background-size: clamp(144px, 28vw, 220px);
        /* ← 大きさ（px/%, clamp 推奨） */
        background-position: right clamp(18px, 4vw, 24px) top clamp(-0px, -0vw, 0px);
        /*             X方向の基準+オフセット         Y方向の基準+オフセット   */
        background-origin: content-box;
        /* 位置の基準を“パディング内側”にする */
    }

    /* ===== Modal base ===== */

    .readmore {
        text-align: center;
        font-size: 14px;
        background-color: #C9CACA;
        width: 72%;
        margin: auto;
        padding: 9px 0;
        color: black;
        margin-bottom: 28px;
    }

    .modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        /* 初期は非表示 */
    }

    .modal.is-open {
        display: block;
    }

    body.modal-open {
        overflow: hidden;
    }

    /* 背景スクロール防止 */

    /* 背面スクリーン */
    .modal__scrim {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    /* ダイアログ本体 */
    .modal__dialog {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 860px);
        max-height: min(86dvh, 720px);
        background: #fff;
        color: #111;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
        overflow: hidden;
        /* 見出しとボディを切り分け */
    }

    /* タイトル */
    .modal__title {
        margin: 0;
        padding: 18px 56px 14px 20px;
        font-size: 18px;
        letter-spacing: .08em;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    /* 本文（縦スクロールエリア） */
    .modal__body {
        padding: 18px 20px 24px 20px;
        max-height: calc(min(86dvh, 720px) - 56px);
        /* タイトル分を引く */
        overflow: auto;
        overscroll-behavior: contain;
        /* バウンド時に背面をスクロールさせない */
    }

    /* 閉じるボタン（右上） */
    .modal__close {
        position: absolute;
        top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px));
        right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px));
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 0;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        font-size: 20px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
    }

    .modal__close:hover {
        background: rgba(0, 0, 0, .75);
    }

}


.qualityback {
    background-color: #1B1D25;
}

.tab-1,
.tab-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 1250px;
    width: 90%;
    padding-top: 60px;
    margin: auto;
}

.tab-1>label,
.tab-2>label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 180px;
    max-width: 400px;
    margin: auto;
    background-color: #C9CACA;
    color: #1B1D25;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
}

.tab-1>label:hover,
.tab-2>label:hover {
    opacity: .8;
}

.tab-1 input,
.tab-2 input {
    display: none;
}

.tab-1>div,
.tab-2>div {
    display: none;
    width: 100%;
    padding-top: 60px;
}

.tab-1 label:has(:checked),
.tab-2 label:has(:checked) {
    opacity: 1;
}

.tab-1 label:has(:checked)+div,
.tab-2 label:has(:checked)+div {
    display: block;
}

.tab-1 img,
.tab-2 img {
    width: 100%;
}

[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

[type="radio"] {
    -webkit-appearance: radio;
    appearance: radio;
}

/* ================== Support / Service ================== */

.supportflex {
    display: flex;
    justify-content: space-between;
    padding-bottom: 144px;
}

.supportmain {
    font-size: 25px;
}

.supporttext {
    font-size: 13px;
    width: 45%;
}

.supportimage {
    max-width: 55%;
}

.supportimage img {
    width: 600px
}

/* ===== リボン（PC） ===== */
/* 調整ノブ */
.svc-ribbon {
    --h: 36px;
    --cut: 46%;
    --skew: 26px;
    --left: #787878;
    --right: #343232;
    position: relative;
    height: var(--h);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
    overflow: hidden;
}

/* 右(濃)帯 */
.svc-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--right);
    clip-path: inherit;
    /* ★デフォは見える */
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
    z-index: 0;
}

/* 左(薄)帯 */
.svc-ribbon::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--cut);
    background: var(--left);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
    /* ★デフォは見える */
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1) .12s;
    z-index: 1;
}

/* アニメを有効化した要素だけ初期0にする */
.svc-ribbon.svc-animate::after,
.svc-ribbon.svc-animate::before {
    transform: scaleX(0);
}

/* 表示トリガーで 0→1 に */
.svc-ribbon.svc-animate.is-revealed::after,
.svc-ribbon.svc-animate.is-revealed::before {
    transform: scaleX(1);
}

/* タイトルは最前面 */
.svc-title {
    position: relative;
    z-index: 2;
}

/* タイトル文字は常に最前面 */
.svc-title {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-left: 16px;
    line-height: var(--h);
    font-size: 36px;
    letter-spacing: .28em;
    color: #eee;
    font-weight: 400;
    font-family: "yu-mincho-pr6n", "Noto Serif JP", serif;
    text-transform: uppercase;
}

/* ===== レール（PC） ===== */
.support-rail {
    --rail: 28px;
    --rail-color: #1B1D25;
    --gap: 16px;
    position: relative;
    padding-right: calc(var(--rail) + var(--gap));
    box-sizing: border-box;
    padding-bottom: 30px;
    margin-bottom: 115px;
}

.support-rail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail);
    background: var(--rail-color);
    pointer-events: none;

    /* ↑ アニメ初期状態（上→下に伸びる） */
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.support-rail.is-revealed::after {
    transform: scaleY(1);
}

/* ===== テキスト周り ===== */
.supportmain2 {
    font-size: 25px;
    padding-top: 20px;
    padding-left: 28px;
}

.supporttext2 {
    font-size: 13px;
    padding-top: 26px;
    padding-left: 28px;
}

.paddingleft {
    padding-left: 28px
}

/* ===== SP ===== */
@media (max-width:1024px) {

    .supporttitle {
        font-size: 36px;
        text-align: center;
        font-family: "berthold-baskerville-pro", sans-serif;
        font-weight: 400;
        padding-top: 30px;
        padding-bottom: 32px;
        letter-spacing: 6px;
        color: #9F7E00;
        position: relative;
        z-index: auto;
    }

    .supporttitle::before {
        content: "";
        position: absolute;
        right: 48px;
        top: 18px;
        width: clamp(86px, 23vw, 160px);
        aspect-ratio: 100/86;
        background: url("../img/sp/trianglesp.svg") center/contain no-repeat;
        opacity: .9;
        pointer-events: none;
        z-index: -1;
    }

    .supportflex {
        display: flex;
        flex-direction: column;
        padding-bottom: 40px;
        gap: 30px;
    }

    .supportmain {
        font-size: 25px;
    }

    .supporttext {
        font-size: 13px;
        width: 100%;
    }

    .supportimage {
        max-width: 100%;
        padding-bottom: 20px;
    }

    .supportimage img {
        width: 100%;
    }

    /* SPのリボンは見出し上半分だけ帯を敷く版（左→右に展開） */
    .svc-ribbon {
        --lh: 64px;
        /* 見出し行の高さ */
        --band: calc(var(--lh)*.50);
        --offset: 0px;
        --cut: 100%;
        --skew: 26px;
        --left: #787878;
        --right: #343232;

        position: relative;
        height: var(--lh);
        background: transparent;
        overflow: hidden;
    }

    .svc-ribbon::after {
        content: "";
        position: absolute;
        top: var(--offset);
        left: 0;
        right: 0;
        height: var(--band);
        background: var(--right);
        clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .9s cubic-bezier(.2, .8, .2, 1);
        z-index: 0;
    }

    .svc-ribbon::before {
        content: "";
        position: absolute;
        top: var(--offset);
        left: 0;
        width: var(--cut);
        height: var(--band);
        background: var(--left);
        clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .9s cubic-bezier(.2, .8, .2, 1) .12s;
        z-index: 1;
    }

    .svc-ribbon.is-revealed::after,
    .svc-ribbon.is-revealed::before {
        transform: scaleX(1);
    }

    .svc-title {
        position: relative;
        z-index: 2;
        line-height: var(--lh);
        font-size: 36px;
        letter-spacing: .28em;
        color: #eee;
        font-weight: 400;
        font-family: "yu-mincho-pr6n", "Noto Serif JP", serif;
        padding-left: 8px;
    }

    /* SPはレール非表示（幅0） */
    .support-rail {
        --rail: 0px;
        --rail-color: #1B1D25;
        --gap: 16px;
        position: relative;
        padding-right: 0;
        box-sizing: border-box;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .support-rail::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--rail);
        background: var(--rail-color);
        pointer-events: none;
        transform: none;
        transition: none;
    }

    .supportmain2 {
        font-size: 25px;
        padding-top: 0;
        padding-left: 4px;
    }

    .supporttext2 {
        font-size: 13px;
        padding-top: 0;
        padding-left: 6px;
        padding-bottom: 20px;
    }

    .paddingleft {
        padding-left: 0
    }
}

/* 動きを控える設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {

    .svc-ribbon::before,
    .svc-ribbon::after,
    .support-rail::after {
        transition: none !important;
        transform: none !important;
    }
}


.ctaflex {
    display: flex;
    justify-content: space-between;
    /* 左右の間は従来どおり */
    align-items: stretch;
    /* ← 高さをそろえるために重要（center→stretch） */
    padding-bottom: 180px;
}

.ctaleft {
    width: 29%;
}

.ctaleft a,
.ctaleft img {
    display: block;
    width: 100%;
    /* 左は高さは画像の比率に任せる（height: auto のまま） */
}

.ctaright {
    width: 69%;
    display: flex;
    /* ← 右を縦並びに */
    flex-direction: column;
    gap: 16px;
    /* ← 右の2枚の“隙間” */
}

.ctaright a {
    display: block;
    flex: 1 1 0;
    /* ← 右の上下を等分にする肝 */
    min-height: 0;
    /* Safari 対策 */
}

.ctaright img {
    display: block;
    width: 100%;
    height: 100%;
    /* ← 親(a)の高さいっぱいに */
    object-fit: cover;
    /* ← はみ出しをトリミングして揃える */
}

/* ===== CTAレイアウト（既存をベースに上書き） ===== */

.ctaflex {
    display: flex;
    justify-content: space-between;
    /* 左右の間は従来どおり */
    align-items: stretch;
    /* 高さをそろえる */
    padding-bottom: 180px;
}

.ctaleft {
    width: 29%;
}

.ctaleft a,
.ctaleft img {
    display: block;
    width: 100%;
}

.ctaright {
    width: 69%;
    display: flex;
    /* 右を縦並びに */
    flex-direction: column;
    gap: 16px;
    /* 右の2枚の“隙間” */
}

.ctaright a {
    display: block;
    flex: 1 1 0;
    /* 右上下を等分 */
    min-height: 0;
    /* Safari対策 */
}

.ctaright img {
    display: block;
    width: 100%;
    height: 100%;
    /* 親(a)の高さいっぱい */
    object-fit: cover;
    /* トリミングして揃える */
}

/* ===== ここから “画像上にテキスト” を重ねる（HTML変更なし） ===== */

/* アンカーをオーバーレイの基準に */
.ctaleft a,
.ctaright a {
    position: relative;
    overflow: hidden;
    /* はみ出し防止（任意） */
}

/* 共通スタイル（読みやすさのための影など） */
.ctaleft a::before,
.ctaleft a::after,
.ctaright a::before,
.ctaright a::after {
    position: absolute;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    pointer-events: none;
    /* クリックの邪魔をしない */
    user-select: none;
    line-height: 1.1;
    white-space: nowrap;
    z-index: 2;
}

/* ---- 左：RESERVE（中央に2行） ---- */
.ctaleft a::before {
    content: "RESERVE";
    font-family: "berthold-baskerville-pro", serif;
    font-weight: 400;
    font-size: 36px;
    letter-spacing: .25em;
    left: 50%;
    top: 47%;
    transform: translate(-50%, calc(-50% - 10px));
    /* 上の行 */
    text-align: center;
}

.ctaleft a::after {
    content: "来場予約";
    font-size: 16px;
    left: 50%;
    top: 58%;
    transform: translate(-50%, calc(-50% + 16px));
    /* 下の行 */
    text-align: center;
}

/* ---- 右上：SHOWROOM（左寄せで縦中央） ---- */
.ctaright a:first-child::before {
    content: "SHOWROOM";
    font-family: "berthold-baskerville-pro", serif;
    font-weight: 400;
    font-size: 36px;
    letter-spacing: .25em;
    left: 5%;
    top: 22%;
    transform: translateY(calc(-50% - 10px));
    text-align: left;
}

.ctaright a:first-child::after {
    content: "ショールーム";
    font-size: 16px;
    left: 17%;
    top: 67%;
    transform: translateY(calc(-50% + 14px));
    text-align: left;
}

/* ---- 右下：MODELHOUSE（右寄せで縦中央） ---- */
.ctaright a:last-child::before {
    content: "MODELHOUSE";
    font-family: "berthold-baskerville-pro", serif;
    font-weight: 400;
    font-size: 36px;
    letter-spacing: .25em;
    right: 3%;
    top: 18%;
    transform: translateY(calc(-50% - 10px));
    text-align: right;
}

.ctaright a:last-child::after {
    content: "モデルハウス";
    font-size: 16px;
    right: 20%;
    top: 65%;
    transform: translateY(calc(-50% + 14px));
    text-align: right;
}

/* ==== 左 CTA：textanimation-reveal を擬似要素に適用 ==== */
/* 初期（見えない・少し下＆小さく＆軽くブラー） */
.ctaleft a.textanimation-reveal::before,
.ctaleft a.textanimation-reveal::after {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(.98);
    /* 位置は左用(中央配置) */
    filter: blur(4px);
    transition:
        opacity var(--reveal-duration, .9s) cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms),
        transform var(--reveal-duration, .9s) cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms),
        filter var(--reveal-duration, .9s) cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms);
}

/* 行ごとのディレイ（上→下で少し遅らせる） */
.ctaleft a.textanimation-reveal::before {
    --delay: 60ms;
}

.ctaleft a.textanimation-reveal::after {
    --delay: 60ms;
}

/* 発火後（見える・フラット） */
.ctaleft a.textanimation-reveal.is-inview::before {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 10px)) scale(1);
    filter: blur(0);
}

.ctaleft a.textanimation-reveal.is-inview::after {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 16px)) scale(1);
    filter: blur(0);
}

/* ==== 右 CTA：高級感のある右→左フェードスライド ==== */
/* 初期（右に少し寄せて・薄く・微ブラー） */
.ctaright a.cta-slide-rtl::before,
.ctaright a.cta-slide-rtl::after {
    opacity: 0;
    transform: translateX(14%) translateY(0);
    /* 右→左の滑り出し */
    filter: blur(3px);
    transition:
        opacity 2.35s cubic-bezier(.16, .84, .3, 1) var(--delay, 0ms),
        transform 2.35s cubic-bezier(.16, .84, .3, 1) var(--delay, 0ms),
        filter 2.35s cubic-bezier(.16, .84, .3, 1) var(--delay, 0ms);
}

/* 上行を先に、下行を少し遅らせて“重み”を出す */
.ctaright a.cta-slide-rtl::before {
    --delay: 40ms;
}

.ctaright a.cta-slide-rtl::after {
    --delay: 140ms;
}

/* 発火後（原位置へ・クリーンに） */
.ctaright a.cta-slide-rtl.is-inview::before,
.ctaright a.cta-slide-rtl.is-inview::after {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: blur(0);
}

/* （任意）SPで文字サイズを少し落とす */
@media (max-width: 640px) {

    .ctaleft a::before,
    .ctaright a::before {
        font-size: 20px;
    }

    .ctaleft a::after,
    .ctaright a::after {
        font-size: 14px;
    }
}


@media (max-width: 1024px) {
    .cta {
        width: 84%;
        margin: auto;
        padding-bottom: 20px;
    }

    .cta img {
        width: 100%;
    }

    .cta2 {
        position: relative;
        /* ← 楕円の基準にする */
        text-align: center;
        line-height: 1;
        padding: 10px 0 8px;
        /* 調整ノブ */
        --oval-w: clamp(280px, 70vw, 980px);
        /* 楕円の横幅 */
        --oval-h: clamp(26px, 7vw, 64px);
        /* 楕円の高さ（厚み） */
        --oval-top: 24px;
        /* 楕円の縦位置：ここで合わせる */
        padding-bottom: 20px;
    }

    .cta2 a {
        text-decoration: none;
    }

    /* 楕円（背面）。完全な楕円にするため clip-path を使用 */
    .cta2::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: var(--oval-top);
        width: var(--oval-w);
        height: var(--oval-h);
        background: #1B1D25;
        /* ご指定色 */
        clip-path: ellipse(50% 50% at 50% 50%);
        /* ← これで真の楕円 */
        z-index: 0;
        /* テキストの背面 */
        pointer-events: none;
    }

    /* テキストは前面に */
    .cta2>* {
        position: relative;
        z-index: 1;
        color: #fff;
    }

    /* 見出し&サブ */
    .cta2> :first-child {
        /* SHOWROOM */
        font-size: 30px;
        letter-spacing: .18em;
    }

    .ctatext {
        /* ショールーム */
        font-size: 19px;
        margin-top: 10px;
    }
}

.footerlogo img {
    padding-top: 48px;
    width: 98px;
}

.footertext {
    font-size: 13px;
    line-height: 1;
    padding-bottom: 15px;
}

.whitebar {
    width: 250px;
    height: 1.5px;
    /* ご指定 */
    background: #fff;
    margin: 13px 0;
    /* 余白はお好みで */
}

.padding-bottom {
    padding-bottom: 40px;
}

@media (max-width: 1024px) {
    .footerlogo {
        text-align: center;
        margin-bottom: 25px;
    }

    .footerlogo img {
        padding-top: 20px;
        width: 98px;
        text-align: center;
    }

    .footertext {
        font-size: 13px;
        line-height: 1;
        text-align: center;
        padding-bottom: 24px;
    }

    .footertext+.footertext {
        padding-bottom: 15px;
    }

    .whitebar {
        width: 250px;
        height: 1.5px;
        /* ご指定 */
        background: #fff;
        margin: auto;
        margin-bottom: 20px;
    }

    .padding-bottom {
        padding-bottom: 20px;
        margin: auto;
    }
}