@charset "UTF-8";

/* ==========================================================================
   マンションガイド説明ページ (guide.php) — リニューアルデザイン用CSS
   デザインシステムは新TOP / About と共通：Zen Maru Gothic / 同一パレット
   ========================================================================== */

/* フッターの常時表示バナーは本ページでは非表示 */

.header {
    position: absolute;
    top: 0px;
}



.guide-page {
    --c-text: #3C3C43;
    --c-cream: #FCFAF3;
    --c-yellow: #FBEE9B;
    --c-yellow-soft: #FAF3CB;
    --c-orange: #EB8A44;
    --c-orange-deep: #D9802F;
    --c-orange-bar: #FFCF82;
    --c-brown: #7A5C3E;
    --c-blue: #00AAD4;
    --c-blue-light: #CFE9F5;
    --c-blue-deep: #68ACD4;
    --c-teal: #2EAE8C;
    --c-pink: #F24E86;
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    color: var(--c-text);
    /* Safari 15 以下向けフォールバック */
    overflow-x: hidden;
    /* hidden は overflow-y を auto に計算させて要素をスクロールコンテナ化し、
       WebKit で横方向のはみ出しが切れ残る。clip は visible と併用できる */
    overflow-x: clip;
    line-height: 1.9;
}


/* ==========================================================================
   ヒーロー（about.php のヒーローを踏襲）
   ========================================================================== */
/* 高さは aspect-ratio ではなく padding-bottom(%) で決める（Safari と Chrome で
   算出高さが食い違い、中を top:% で絶対配置している子要素がずれるため）。
   値は従来の aspect-ratio と同値：1690 / 2880 = 58.6806% */
.guide-hero {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 58.6806%;
    margin-top: 10%;
    background: var(--c-blue-light) url(../asset/guide/hero_bg.png) center top / 100% 100% no-repeat;
}

.guide-hero__clouds {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    height: 25%;
    transform: translateX(-50%);
    display: flex;
}

.guide-hero__clouds::after {
    content: "";
    background: url(../asset/guide/cloud_right.png) center top / 100% 100% no-repeat;
    height: 100%;
    aspect-ratio: 890 / 375;
    display: block;
    margin-right: 0;
    margin-left: auto;
}

.guide-hero__clouds::before {
    content: "";
    background: url(../asset/guide/cloud_left.png) center top / 100% 100% no-repeat;
    height: 100%;
    aspect-ratio: 890 / 375;
    display: block;
    margin-right: auto;
    margin-left: 0;
}

.guide-hero__badge {
    position: absolute;
    top: 3.5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-orange);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 28px;
    border-radius: 999px;
    white-space: nowrap;
}

.guide-hero__badge::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FCEF7E;
}

.guide-hero__badge::after {
    content: "";
    position: absolute;
    top: -5.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background-color: var(--c-orange-deep);
    z-index: -1;
}

.guide-hero__title {
    position: absolute;
    top: 13%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    font-size: 38px;
    color: var(--c-text);
    margin: 0;
}

.guide-hero__bubble {
    position: absolute;
    font-size: 20px;
    /* 従来の aspect-ratio: 322/133 と同値。padding の % は含有ブロック(.guide-hero)の
       幅基準なので、自幅 28% × 133/322 = 11.5652% */
    height: 0;
    padding-bottom: 11.5652%;
    width: 28%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.guide-hero__bubble-text {
    position: absolute;
    width: max-content;
    left: 37%;
    transform: translate(-50%, -50%);
    text-align: start;
    line-height: 1.6;
}

.guide-hero__bubble-label {
    position: absolute;
    display: block;
    font-weight: 700;
    font-size: 23px;
    width: max-content;
    -webkit-text-stroke: 1px #FFFFFF;
    paint-order: stroke fill;
}

.guide-hero__bubble-label small {
    display: block;
    font-size: 16px;
    color: var(--c-text);
    -webkit-text-stroke: 0.5px #FFFFFF;
}

/* スタッフ（左側・吹き出しの尾は右上→人物へ） */
.guide-hero__bubble--staff {
    top: 57%;
    left: 13%;
    background-image: url(../asset/guide/bubble-right.svg);
}

.guide-hero__bubble--staff .guide-hero__bubble-text {
    top: 60%;
}

.guide-hero__bubble-label--staff {
    color: var(--c-blue);
    top: -4%;
    left: 2%;
}

/* マンションガイドさん（右側・吹き出しの尾は左下→人物へ） */
.guide-hero__bubble--user {
    top: 30%;
    right: 11%;
    background-image: url(../asset/guide/bubble-left.svg);
}

.guide-hero__bubble--user .guide-hero__bubble-text {
    top: 40%;
}

.guide-hero__bubble-label--user {
    color: var(--c-orange);
    top: -40%;
    left: 2%;
}

/* ==========================================================================
   スライド（スクロールで右から登場）
   ========================================================================== */
.guide-slides {
    overflow-x: clip;
}

.guide-slide {
    position: relative;
    padding: 70px 6% 80px 9%;
}

.guide-slide--ideal {
    background: var(--c-cream);
}

.guide-slide--asset {
    background: var(--c-yellow-soft);
}

.guide-slide--point {
    background: var(--c-yellow);
}

/* 左端の縦書きラベル */
.guide-slide__label {
    position: absolute;
    top: 60px;
    left: 2.5%;
    margin: 0;
    writing-mode: vertical-rl;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.18em;
    line-height: 1;
}

.guide-slide__label::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 auto 18px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: -3%;
}

.guide-slide--ideal .guide-slide__label,
.guide-slide--ideal .guide-slide__label::before {
    color: var(--c-brown);
}

.guide-slide--ideal .guide-slide__label::before {
    background-color: var(--c-brown);
}

.guide-slide--asset .guide-slide__label,
.guide-slide--asset .guide-slide__label::before,
.guide-slide--point .guide-slide__label,
.guide-slide--point .guide-slide__label::before {
    color: var(--c-orange);
}

.guide-slide--asset .guide-slide__label::before,
.guide-slide--point .guide-slide__label::before {
    background-color: var(--c-orange);
}

/* スクロールインのパネル */
.guide-slide__panel {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   スタッキング演出（JS が .is-pinned を付与した時だけ作動）
   セクションを画面いっぱい（100vh）に係留し、JS がページスクロールをロック。
   1ノッチのスクロールで 2枚目以降が右からスライドインして前面に重なる。
   前面スライドは左端から --gap ぶん右に止まり、背面スライドの縦ラベルが隙間から覗く。
   JS無効・スマホ・低モーション時は .is-pinned が付かず、通常の縦並びで表示される。
   -------------------------------------------------------------------------- */
.guide-slides.is-pinned {
    --gap: 5vw;
    position: relative;
    height: 115vh;
    min-height: 720px;
}

.guide-slides.is-pinned .guide-slides__stage {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.guide-slides.is-pinned .guide-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5% 5% 36px var(--gap);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ピン留め中は画面に収まるよう各要素を少しコンパクトに */
.guide-slides.is-pinned .guide-slide__title {
    font-size: 3vw;
    margin-bottom: 16px;
    position: relative;
    z-index: 3;
}

.guide-slides.is-pinned .guide-slide__lead {
    font-size: 1.5vw;
    text-align: left;
    width: 70%;
    margin: 2% auto;
    font-weight: 500;
}

.guide-slides.is-pinned .guide-slide__desc {
    gap: 16px;
    font-size: 1.5vw;
    line-height: 1.7;
}

.guide-slides.is-pinned .guide-slide__footer {
    margin-top: 28px;
    font-size: 1.5vw;
}

/* 重なり順と左オフセット（前面ほど右へずらし、背面ラベルを覗かせる）。
   未表示のスライドは画面右外（translateX(100vw)）に待機し、右から登場する。 */
.guide-slides.is-pinned .guide-slide--ideal {
    z-index: 1;
}

.guide-slides.is-pinned .guide-slide--asset {
    z-index: 2;
    left: var(--gap);
    transform: translateX(100vw);
}

.guide-slides.is-pinned .guide-slide--point {
    z-index: 3;
    left: calc(var(--gap) * 2);
    transform: translateX(100vw);
}

/* ラベルは各スライドの左端（覗く位置）に固定 */
.guide-slides.is-pinned .guide-slide__label {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    height: 80%;
}

.guide-slides.is-pinned .guide-slide__panel {
    width: 100%;
}

.guide-slide__title {
    text-align: center;
    font-weight: 700;
    font-size: 34px;
    margin: 0 0 22px;
}

.guide-slide__em {
    color: var(--c-orange);
}

.guide-slide-dots {
    position: relative;
}

.guide-slide-dots::after {
    content: "";
    position: absolute;
    top: -1%;
    left: 50%;
    width: 100%;
    height: 1em;
    margin-left: 2px;
    background-image: radial-gradient(circle, var(--c-orange) 3px, transparent 3.5px);
    background-size: 1em 1em;
    background-repeat: repeat-x;
    background-position: left;
    transform: translate(-50%, -50%);
}

.guide-slide__lead {
    text-align: center;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 36px;
}

.guide-slide__portrait {
    position: absolute;
    top: 5%;
    right: -10%;
    margin: 0;
    width: 10%;
    z-index: 2;
}

.guide-slide__portrait img {
    width: 100%;
    height: auto;
}

.guide-slide__portrait--ideal {
    width: 27%;
    top: 0%;
    right: -10%;
}

.guide-slide__portrait--point {
    width: 16%;
    top: 10%;
    right: -10%;
}

guide-slide__portrait--asset {
    right: 0%;
}

.guide-slide__body {
    display: grid;
    grid-template-columns: 28% auto;
    align-items: center;
    gap: 12%;
}

.guide-slide__figure {
    margin: 0;
}

.guide-slide__figure img {
    width: 100%;
    height: auto;
}

.guide-slide__desc {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-size: 17px;
    line-height: 1.8;
}

.guide-slide__footer {
    margin-top: 42px;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.guide-cta {
    position: relative;
    background: #C3EAF6;
    padding: 5.5% 8% 0px;
    overflow: hidden;
}

/* 上部の白いアーチ装飾 */
.guide-cta::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    aspect-ratio: 1 / 1;
    background: #FFFFFF;
    border-radius: 999px 999px 0% 0%;
    opacity: 0.5;
    z-index: 0;
}

.guide-cta__side {
    position: absolute;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    font-weight: 700;
    font-size: 44px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    z-index: 1;
    height: max-content;
}

.guide-cta__side--left {
    left: 16%;
    top: 80%;
}

.guide-cta__side--right {
    right: 10%;
    top: 30%;
}

.guide-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.guide-cta__headline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 2vw;
    margin-bottom: 18px;
}

.guide-cta__headline-pre {
    align-self: flex-start;
}

.guide-cta__headline-post {
    align-self: flex-end;
}

.guide-cta__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFFFFF;
    font-size: 2.5vw;
    position: relative;
    margin-right: -1%;
}

.guide-cta__circle-dots-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFFFFF;
    font-size: 2.5vw;
    position: relative;
    margin-right: -1%;
}

.guide-cta__circle::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    width: 50%;
    height: 1em;
    margin-left: 2px;
    background-image: radial-gradient(circle, var(--c-orange) 3px, transparent 3.5px);
    background-size: 1em 1em;
    background-repeat: repeat-x;
    background-position: left;
    transform: translate(-50%, -50%);
}

.guide-cta__circle-dots-3::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    width: 70%;
    height: 1em;
    margin-left: 2px;
    background-image: radial-gradient(circle, var(--c-orange) 3px, transparent 3.5px);
    background-size: 1em 1em;
    background-repeat: repeat-x;
    background-position: left;
    transform: translate(-50%, -50%);
}

.guide-cta__lead {
    font-size: 1.5vw;
    font-weight: 500;
    line-height: 1.9;
    margin-top: 2%;
    margin-bottom: 3%;
}

.guide-cta__message {
    display: flex;
    justify-content: center;
    gap: 5%;
    height: 450px;
}

.guide-cta__building {
    margin: 0;
    width: 230px;
    align-self: end;
}

.guide-cta__building img {
    width: 100%;
    height: auto;
}

.guide-cta__bubble {
    position: relative;
    margin: 30px 0 0 auto;
    max-width: 360px;
    height: 30%;
    min-height: 250px;
    background: #FFFFFF;
    border-radius: 50% 50% 50% 0%;
    font-size: 1.5vw;
    text-align: left;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 2%;
}

.guide-cta__bubble p {
    font-weight: 500;
    white-space: nowrap;
}

.guide-cta__bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 28px;
    border-width: 20px 14px 0 0;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
}

.guide-cta__btn {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    padding: 10px 100px;
    background: linear-gradient(90deg, #FB3333 0%, #F93AA9 100%);
    border-radius: 999px;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    right: 25%;
    bottom: 5%;
}

.guide-cta__btn::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: url(../asset/guide/cta-btn_icon.svg) center top / 100% 100% no-repeat;
}

.guide-cta__btn-sub {
    font-size: 16px;
    font-weight: 500;
}

.guide-cta__btn-main {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   応募からご協力までの流れ（about.php の about-flow を踏襲）
   ========================================================================== */
.guide-flow {
    background: var(--c-cream);
    padding: 70px 24px 90px;
}

.guide-flow__badge {
    width: fit-content;
    margin: 0 auto 24px;
    background: #CE941D;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 0.08em;
    padding: 10px 44px;
    border-radius: 61px;
    position: relative;
    z-index: 0;
}

.guide-flow__badge::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    top: -5.5%;
    background: #F5A500;
    border-radius: 61px;
    z-index: -1;
}

.guide-flow__note {
    text-align: center;
    font-size: 1.4vw;
    line-height: 1.8;
    margin: 0 auto 50px;
}

.guide-flow__list {
    max-width: 1180px;
    margin: auto;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.guide-flow-card {
    position: relative;
    background: #FFFFFF;
    border: 12px solid var(--c-teal);
    border-radius: 18px;
    padding: 24px 22px 28px;
    text-align: center;
}

.guide-flow-card__num {
    font-weight: 900;
    font-size: 44px;
    line-height: 1.2;
    color: var(--c-teal);
}

.guide-flow-card__img {
    position: relative;
    width: 60%;
    margin: 0 auto 6px;
}

.guide-flow-card__img img {
    width: 100%;
    height: auto;
}

.guide-flow-card__stamp {
    position: absolute;
    top: 37%;
    right: 10%;
    width: 70px;
    height: auto;
    z-index: 2;
}

.guide-flow-card__title {
    font-weight: 700;
    font-size: 30px;
    color: var(--c-teal);
    margin: 0 0 16px;
}

.guide-flow-card__steps {
    margin: 0;
    padding-left: 1.4em;
    text-align: left;
    font-size: 1.5vw;
    line-height: 1.9;
    font-weight: 500;
}

.guide-flow-card__desc {
    text-align: left;
    font-size: 1.5vw;
    line-height: 1.8;
    font-weight: 500;
}

.guide-flow-card__memo {
    margin-top: 14px;
    text-align: left;
    font-size: 1.2vw;
    line-height: 1.7;
    font-weight: 500;
}

/* ==========================================================================
   レスポンシブ（〜900px）
   ========================================================================== */
@media (max-width: 900px) {

    .header {
        margin-top: 0;
    }

    .guide-page {
        line-height: 1.8;
    }

    /* ヒーロー */
    .guide-hero {
        /* 従来の aspect-ratio: 585/734 と同値：734 / 585 = 125.4701% */
        padding-bottom: 125.4701%;
        background-size: cover;
        margin-top: 20%;
        background: url(../asset/guide/hero_bg-sp.png) center center / 100% 100% no-repeat;
    }

    .guide-hero__clouds {
        height: 18%;
    }

    .guide-hero__clouds::before {
        margin-left: -10%;
    }

    .guide-hero__clouds::after {
        margin-right: -10%;
    }

    .guide-hero__badge {
        font-size: 3vw;
        padding: 1.4vw 4vw;
        gap: 1.4vw;
        top: 10%;
    }

    .guide-hero__badge::before {
        width: 3vw;
        height: 3vw;
    }

    .guide-hero__title {
        font-size: 3vw;
        top: 16%;
    }

    .guide-hero__bubble {
        font-size: 2.4vw;
        /* 従来の aspect-ratio: 322/133 と同値：自幅 50vw × 133/322 = 20.6522vw */
        padding-bottom: 20.6522vw;
        width: 50vw;
    }

    .guide-hero__bubble-label {
        font-size: 3vw;
        -webkit-text-stroke: 0.5px #FFFFFF;
        line-height: normal;
    }

    .guide-hero__bubble-label small {
        font-size: 2.2vw;
    }

    .guide-hero__bubble--staff {
        top: 80%;
        left: 4%;
        background-image: url(../asset/guide/bubble-right-sp.svg);
    }

    .guide-hero__bubble-label--staff {
        top: -15%;
        left: 5%;
    }

    .guide-hero__bubble--user {
        top: 28%;
        right: 4%;
        background-image: url(../asset/guide/bubble-left-sp.svg);
    }

    .guide-hero__bubble-label--user {
        top: -40%;
        left: 35%;
    }

    .guide-hero__bubble-text {
        top: 40%;
        left: 50%;
    }

    /* スライド */
    .guide-slide {
        padding: 50px 5% 56px 16%;
    }

    .guide-slide__label {
        top: 40px;
        left: 4%;
        font-size: 3.4vw;
    }

    .guide-slide__title {
        font-size: 4vw;
    }

    .guide-slide__lead {
        font-size: 3vw;
    }

    .guide-slide__portrait,
    .guide-slide__portrait--ideal,
    .guide-slide__portrait--point {
        max-height: 120px;
        width: 38%;
        position: absolute;
        left: 50%;
        top: -3%;
        transform: translateX(-50%);
    }

    .guide-slide__portrait img {
        height: 100%;
        max-height: 90px;
        object-fit: contain;
        width: 100%;
    }

    .guide-slide__body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .guide-slide__figure {
        width: 45%;
        margin: 0 auto;
    }

    .guide-slide3__figure {
        position: relative;
        width: 28%;
    }

    .guide-slide__desc {
        font-size: 3.6vw;
    }

    .guide-slide__desc-margin {
        height: 80px;
    }

    .guide-slide__footer {
        font-size: 4.2vw;
    }

    /* --------------------------------------------------------------------------
       スマホのスクロールジャック演出（JS が .is-pinned--sp を付与した時だけ作動）
       1ノッチのスクロール／スワイプで 2枚目以降が下からスライドインして前面に重なる。
       前面スライドは上端から --gap-y ぶん下に止まり、背面スライドの横ラベルが覗く。
       -------------------------------------------------------------------------- */
    .guide-slides.is-pinned--sp {
        --gap: 0;
        --gap-y: 10vw;
        /* 前面スライドを下へずらす量（背面ラベルの覗く幅） */
        height: 100vh;
        min-height: 560px;
    }

    .guide-slides.is-pinned--sp .guide-slide {
        padding: calc(var(--gap-y) + 14px) 6% 24px;
    }

    /* 前面スライドの中身を縦スクロールできるようにする。
       スライドは高さ固定（inset:0）で、内容が画面より長いものがある。
       overflow:hidden のままだとスクロール入力が全てスライド送りに変換されるため、
       はみ出した部分に到達する手段がなくなる。

       .is-engaged（＝係留中）が付いている間だけ有効にすること。係留前から
       スクロール可能にすると、ホイールがスライドに吸われてページが係留位置
       （セクション上端が画面トップ）まで進めず、演出が始まらなくなる。 */
    .guide-slides.is-pinned--sp.is-engaged .guide-slide {
        overflow-x: hidden;
        overflow-y: auto;
        /* 端に達したときページ側へスクロールが連鎖しないようにする。
           連鎖するとページが動き、onScroll の固定処理と競合してガタつく */
        overscroll-behavior: contain;
    }

    /* 重なり順と上オフセット（前面ほど下へずらし、背面の横ラベルを覗かせる）。
       未表示のスライドは画面下外（translateY(100vh)）に待機し、下から登場する。 */
    .guide-slides.is-pinned--sp .guide-slide--ideal {
        left: 0;
        top: 0;
    }

    .guide-slides.is-pinned--sp .guide-slide--asset {
        left: 0;
        top: var(--gap-y);
        transform: translateY(100vh);
    }

    .guide-slides.is-pinned--sp .guide-slide--point {
        left: 0;
        top: calc(var(--gap-y) * 2);
        transform: translateY(100vh);
    }

    /* ラベルは横書きにして各スライド上端（覗く位置）に固定 */
    .guide-slides.is-pinned--sp .guide-slide__label {
        writing-mode: horizontal-tb;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        font-size: 3.4vw;
        white-space: nowrap;
    }

    .guide-slides.is-pinned--sp .guide-slide__label::before {
        position: static;
        transform: none;
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        margin: 0 8px 2px 0;
    }

    /* 画面に収まるよう各要素をコンパクトに */
    .guide-slides.is-pinned--sp .guide-slide__title {
        font-size: 4vw;
        margin-bottom: 12px;
        margin-top: 25%;
    }

    .guide-slides.is-pinned--sp .guide-slide__lead {
        font-size: 3vw;
        width: 100%;
        margin: 0 auto 12px;
    }

    .guide-slides.is-pinned--sp .guide-slide__desc {
        font-size: 3.1vw;
        gap: 10px;
        line-height: 1.7;
    }

    .guide-slides.is-pinned--sp .guide-slide__footer {
        font-size: 3.6vw;
        margin-top: 16px;
        text-align: left;
    }

    /* CTA */
    .guide-cta {
        padding: 0;
    }

    .guide-cta::before {
        width: 100%;
        height: 100%;
        width: 130%;
    }

    .guide-cta__inner {
        padding: 20px 0px;
    }

    .guide-cta__side {
        font-size: 8vw;
    }

    .guide-cta__side--left {
        left: 7%;
        top: 50%;
    }

    .guide-cta__side--right {
        right: -5%;
    }

    .guide-cta__headline {
        margin-left: 15px;
        font-size: 4vw;
        justify-content: start;
    }

    .guide-cta__circle-dots-3 {
        width: 18vw;
        height: 18vw;
        font-size: 4vw;
    }

    .guide-cta__circle {
        width: 18vw;
        height: 18vw;
        font-size: 4.4vw;
    }

    .guide-cta__lead {
        font-size: 4vw;
        margin-bottom: 10%;
    }

    .guide-cta__building {
        float: none;
        width: 45%;
        margin: -20px auto;
        z-index: 99;
    }

    .guide-cta__bubble {
        display: block;
        margin: -30px 0px;
        font-size: 4vw;
        text-align: center;
        width: 100vw;
        border-radius: 50vw 50vw 0px 0px;
        height: 50vw;
        max-width: none;
        min-height: auto;
    }

    .guide-cta__message {
        gap: 0px;
        flex-direction: column;
        height: fit-content;
        margin-bottom: 5%;
    }

    .guide-cta__btn {
        padding: 4px 14vw;
        right: 50%;
        width: 80%;
        transform: translateX(50%);
        bottom: 3%;
    }

    .guide-cta__btn-sub {
        font-size: 3vw;
    }

    .guide-cta__btn-main {
        font-size: 4vw;
    }

    .guide-cta__btn::after {
        right: 4vw;
        width: 6vw;
        height: 6vw;
    }

    /* 流れ */
    .guide-flow {
        padding: 20px 18px 60px;
    }

    .guide-flow__badge {
        font-size: 5vw;
        text-align: center;
        padding: 0px 40px;
    }

    .guide-flow__note {
        font-size: 3vw;
        margin-bottom: 30px;
        text-align: left;
        width: 80%;
    }

    .guide-flow__list {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 420px;
    }

    .guide-flow-card__steps,
    .guide-flow-card__desc {
        font-size: 4vw;
    }

    .guide-flow-card__stamp {
        top: 35%;
    }

    .guide-flow-card__memo {
        font-size: 3.4vw;
    }

    .guide-cta__bubble p {
        line-height: 1rem;
    }
}