/* top.css */

/* 公開前の一時的な非表示（リンク集ボタン、施設空き情報ボタン等）。
   機能・ページが準備でき次第、このクラスを外せば元に戻せる */
.is-hidden-pre-launch {
    display: none !important;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.7;
}

/* メインビジュアル：テーマ標準のブロック間余白(margin-block-start)を打ち消す。
   ヘッダーがposition:fixedになったため、通常フロー上は高さ0扱い。
   何もしなくても写真はヘッダーの裏側（y:0）から始まる。 */
.main-visual {
    margin: 0;
}

.main-visual__photo {
    position: relative;
    margin: 0;
}

.main-visual__photo picture img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center 90%;
}

.main-visual__cta-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 277px;
    height: 69px;
    padding-left: 50px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 999px;
    background: #d7322e;
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-visual__cta-button:hover {
    background: #fff;
    color: #d7322e;
}

/* 「施設利用申込について」はテキストが長くなり、幅固定・nowrapのボタンから
   はみ出してアイコンも潰れて見えていたため、この左側のボタンだけアイコン位置を
   少し左に寄せ、フォントサイズも少し下げて収まるようにする */
.main-visual__cta-button--apply {
    padding-left: 35px;
    font-size: 18px;
}

.main-visual__cta-button-icon {
    display: block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.main-visual__cta-button-icon--form {
    width: 22px;
    height: 27.5px;
    -webkit-mask-image: url('../../images/icon-form.svg');
    mask-image: url('../../images/icon-form.svg');
}

.main-visual__cta-button-icon--calendar {
    width: 22px;
    height: 24.4px;
    -webkit-mask-image: url('../../images/icon-calendar.svg');
    mask-image: url('../../images/icon-calendar.svg');
}

/* main-visual〜partnersセクション全体をラップし、floating-ctaのsticky基準にする。
   page-contentが.wp-site-blocksの直接の子になったことで、テーマ標準の
   margin-block-start(:where(.wp-site-blocks) > *)が乗ってしまうため打ち消す。
   これが無いとMV画像の天面がヘッダー天面(y:0)からずれてしまう */
.page-content {
    position: relative;
    margin-block-start: 0;
}

/* 600px以下：ヘッダーがposition:stickyになり、fixedと違って通常フロー上の
   高さを持ってしまう。そのままだとMV画像がヘッダーの底辺から始まってしまうため、
   ヘッダー分(51px+38px=89px)だけ引き上げ、PC/タブレットと同じく画像がヘッダーの
   裏側(y:0)から始まるようにする。.page-contentは全ページ共通のクラスなので、
   この引き上げはトップページに限定する（他ページはヘッダーの裏に潜り込ませたくない） */
@media (max-width: 600px) {
    body.home .page-content {
        margin-top: -23.733vw;
    }
}

/* 右下固定CTA。以前はメインビジュアルが画面外に出るまで非表示にしていたが、
   最初から表示させたい仕様に変更 */
/* positionはsticky：フッター手前でpage-contentが終わるため、スクロール量に関係なく必ずフッター直前で止まる */
.floating-cta {
    position: sticky;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    gap: 10px;
}

/* gap(10px)はボタン2つの間隔用。back-to-topとの間だけ18pxにしたいので、
   その差分(8px)をmargin-leftで追加する */
.floating-cta .back-to-top {
    margin-left: 8px;
}

/* スマホ用の固定CTA（PCの丸ボタン2つとは別デザイン：画面幅いっぱいの固定バー）。
   PC/タブレットでは非表示。position/表示切替の仕組みはfloating-ctaと同じ
   （page-content内でposition:stickyにし、フッター手前で必ず止まる） */
.mobile-fixed-cta-wrap {
    display: none;
}

.mobile-fixed-cta {
    display: none;
}

/* メインビジュアル：新着情報スライダー（矢印・ドットで手動操作） */
.main-visual__carousel {
    position: relative;
}

.main-visual__carousel:has(.main-visual__empty) {
    display: none;
}

.main-visual__track-viewport {
    position: relative;
    overflow: hidden;
}

.main-visual__track {
    transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .main-visual__track {
        transition: none;
    }
}

.wp-block-query.main-visual__set {
    flex-shrink: 0;
}

.main-visual__set .wp-block-post-template {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 矢印ボタン */
.main-visual__arrow {
    position: absolute;
    top: 175px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 61px;
    padding: 0;
    border: 1px solid #212121;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.main-visual__arrow--prev {
    left: 134px;
}

.main-visual__arrow--next {
    right: 134px;
}

.main-visual__arrow img {
    display: block;
    width: 22px;
    height: auto;
}

.main-visual__arrow--prev img {
    transform: rotate(180deg);
}

/* ドットインジケーター */
.main-visual__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.main-visual__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
}

/* アクティブなドットの色は、中央に来るカードの塗り色（5色巡回）と対応させる */
.main-visual__dot:nth-child(1).is-active {
    background: #f7d12c;
}

.main-visual__dot:nth-child(2).is-active {
    background: #ff8e00;
}

.main-visual__dot:nth-child(3).is-active {
    background: #00adae;
}

.main-visual__dot:nth-child(4).is-active {
    background: #fd7aae;
}

.main-visual__dot:nth-child(5).is-active {
    background: #0070bc;
}

/* ドット下の「新着情報一覧」ボタン */
.main-visual__news-link {
    margin: 21px auto 0;
}

.main-visual__empty {
    margin: 0;
    padding: 24px 32px;
}

/* 新着情報カードの基本スタイル(.news-card等)はcomponents/card.cssへ移動
   （home.htmlのカルーセルとarchive.htmlの一覧グリッドで共用するため）。
   ここには、このセクション固有の色巡回(nth-child)だけ残す */
/* 色巡回はnth-childではなくJS(main.js)側で付与するクラスを使う。
   このカルーセルは前後にカードを複製してループさせる仕組みのため、
   記事数が5の倍数でない場合にnth-childだと複製と元カードで色がズレてしまうため
   （複製はcloneNode(true)されるため、JS側で付けたクラスもそのままコピーされて揃う） */
.main-visual__set .news-card--color-1 .news-card__media {
    background: #f7d12c;
}

.main-visual__set .news-card--color-2 .news-card__media {
    background: #ff8e00;
}

.main-visual__set .news-card--color-3 .news-card__media {
    background: #00adae;
}

.main-visual__set .news-card--color-4 .news-card__media {
    background: #fd7aae;
}

.main-visual__set .news-card--color-5 .news-card__media {
    background: #0070bc;
}

/* コンセプトセクション（キャッチコピー＋Setagaya City背景ウォーターマーク） */
.concept {
    position: relative;
    margin: 0;
    padding: 114.52px 20px 0;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

.concept__watermark {
    display: block;
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    margin: 53.88px 0 0 -50vw;
    pointer-events: none;
}

.concept__heading {
    position: relative;
    z-index: 1;
    display: block;
    width: 848px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 28.38px;
}

/* PC/タブレットとスマホで改行位置が異なるため、テキストを出し分ける */
.concept__text--mobile {
    display: none;
}

.concept__text {
    position: relative;
    z-index: 1;
    max-width: 732px;
    margin: 0 auto;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 43px;
    letter-spacing: 0.8px;
}

/* クイックリンク（施設情報・利用協力金・コーディネーター・広報ツール・FAQ・お問合せ、3列×2段） */
.quick-links {
    position: relative;
    margin: -8px 0 0;
    padding: 50px 20px;
    background: #17bae5;
}

.quick-links__row {
    display: flex;
    justify-content: center;
    gap: 22.87px;
    max-width: 976px;
    margin: 0 auto;
}

.quick-links__row + .quick-links__row {
    margin-top: 24.945px;
}

.quick-links__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: 192.29px;
    padding-bottom: 15.59px;
    border: 1.039px solid #000;
    border-radius: 30.143px;
    background: #fff;
    color: #000;
    font-size: 19px;
    font-weight: 500;
    line-height: 36.379px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.quick-links__card:hover {
    opacity: 0.7;
}

.quick-links__card span.quick-links__card-label--multiline {
    line-height: 25px;
}

.quick-links__card img {
    display: block;
    height: auto;
}

img[src$="icon-facility-info.svg"] { width: 67.22px; }
img[src$="icon-fee.svg"] { width: 94px; }
img[src$="icon-coordinator.svg"] { width: 146px; }
img[src$="icon-pr-tool.svg"] { width: 71.75px; }
img[src$="icon-faq.svg"] { width: 94.88px; }
img[src$="icon-contact.svg"] { width: 94.06px; }

/* お問合せのアイコンは他より縦幅が小さく、Figmaではテキストとの間隔が広め(約28.74px)なので、
   共通gap(12px)に追加分を上乗せする */
.quick-links__icon--contact {
    margin-bottom: 16.74px;
}

/* Instagramセクション：白い角丸カード（黒枠線）で囲む */
.instagram-feed {
    max-width: 1128px;
    margin: 50px auto 0;
    padding: 59px 20px 70px;
    border: 1px solid #000;
    border-radius: 48px;
    background: #fff;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.instagram-feed__heading {
    margin: 0;
    color: #000;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 62px;
    font-weight: 500;
    line-height: 56.92px;
}

.instagram-feed__stripe {
    display: flex;
    justify-content: center;
    margin: 21px auto 0;
}

.instagram-feed__stripe span {
    display: block;
    width: 36.167px;
    height: 6px;
}

.instagram-feed__grid {
    display: grid;
    /* 投稿数がまだ少ないため、一旦3列にして間延びを防ぐ（投稿が増えたら4列・max-width:976pxに戻す）。
       1枚あたりのサイズは4列の時と同じ(976px/4=244px)のまま保つため、max-widthも3列分(244px×3)に縮める */
    grid-template-columns: repeat(3, 1fr);
    max-width: 732px;
    margin: 39px auto 0;
}

.instagram-feed__photo {
    position: relative;
}

.instagram-feed__photo img:not(.instagram-feed__multi-icon) {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #fff;
    box-sizing: border-box;
}

/* instagram-post-6(Follow Me!!の縦長画像)は文字が見切れないよう、
   トリミングせず画像全体を縮小して収める。上のcoverルールと詳細度が同じなので、
   後に書くことで上書きする */
.instagram-feed__photo--contain img:not(.instagram-feed__multi-icon) {
    object-fit: contain;
    background: #fff;
}

.instagram-feed__multi-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25.34px;
    height: 25.34px;
}

.instagram-feed__follow {
    margin: 60px 0 0;
    color: #fd7aae;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 54px;
    font-weight: 600;
    line-height: 56.92px;
    letter-spacing: 0.54px;
    -webkit-text-stroke: 3px #000;
    text-stroke: 3px #000;
    paint-order: stroke;
}

.instagram-feed__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 400px;
    max-width: 100%;
    height: 70px;
    margin: 20px auto 0;
    padding: 0 32px;
    border: 1px solid #000;
    border-radius: 81.49px;
    background: #fff;
    color: #000;
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.instagram-feed__handle:hover {
    opacity: 0.7;
}

.instagram-feed__handle img {
    display: block;
    width: 30px;
    height: 30px;
}

/* アクセスセクション */
.access {
    margin: 50px 0 0;
    padding: 74px 20px 65px;
    background: rgba(23, 186, 229, 0.15);
}

.access__inner {
    max-width: 976px;
    margin: 0 auto;
    color: #000;
    font-family: var(--font-base);
}

/* PC/タブレットとスマホで改行位置が異なるため、テキストを出し分ける */
.access__facility-name--mobile,
.access__info--mobile,
.access__transport--mobile {
    display: none;
}

.access__facility-name {
    margin: 0 0 22px;
}

.access__facility-name-sub {
    font-size: 23px;
    font-weight: 500;
}

.access__facility-name-sub--tight {
    letter-spacing: -7.36px;
}

.access__facility-name-main {
    font-size: 34px;
    font-weight: 500;
}

.access__facility-name-note {
    font-size: 18px;
    font-weight: 400;
}

.access__info {
    margin: 0 0 26px;
}

.access__info--desktop p:nth-child(2) {
    margin-bottom: 16px;
}

/* TEL・運営時間・休館日は、ラベル＋本文という形式。text-indentのぶら下げインデントも
   flexboxのflex:1も、Safariだと折り返し幅の計算がズレて早い段階で改行されてしまう癖があった。
   display:tableは古くからある枯れた仕組みで、この崩れが起きないため、こちらを使う。
   ラベル側は内容の幅だけ、本文側は残り幅いっぱいまで自動で使われる */
.access__info--desktop p:nth-child(2),
.access__info--desktop p:nth-child(3),
.access__info--desktop p:nth-child(4) {
    display: table;
    width: 100%;
}

.access__info-label {
    display: table-cell;
    white-space: nowrap;
    padding-right: 0.3em;
}

.access__info-value {
    display: table-cell;
    width: 100%;
    /* Safariは日本語の改行可能位置の判定が他ブラウザより保守的で、実際に入る幅より
       手前で折り返してしまうため、break-allで行末まで使うようにする */
    word-break: break-all;
}

/* 日本語は文字の間ならどこでも改行されうるため、電話番号とその直後の
   （）部分の間で改行されてしまうのを防ぐ */
.access__info-nowrap {
    white-space: nowrap;
}

.access__info p {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
}

.access__info-small {
    font-size: 16px;
}

.access__label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 500;
}

.access__label::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #000;
}

.access__transport {
    margin: 0 0 23px;
}

.access__transport p {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
}

.access__transport p.access__transport-note {
    font-size: 16px;
}

.access__map {
    width: 100%;
    height: 438px;
    border-radius: 32px;
    overflow: hidden;
}

.access__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* リンク集ボタン＋パートナーロゴ枠（後で実際のロゴに差し替え予定） */
.partners {
    margin: 0;
    padding: 47px 20px 48px;
    text-align: center;
}

.partners__link-list-button {
    margin: 0 auto;
}

.partners__logos {
    display: flex;
    justify-content: center;
    gap: 22px;
    max-width: 976px;
    margin: 47px auto 0;
}

.partners__logo-placeholder {
    flex: 1;
    height: 90px;
    background: #d9d9d9;
}

/* 実際のバナー素材は元のプレースホルダー1枠分と同じ実寸(310×90px)のため、
   flex:1で引き延ばさず、そのままの大きさで中央に表示する */
.partners__logo {
    flex: none;
    display: block;
    transition: opacity 0.2s ease;
}

.partners__logo:hover {
    opacity: 0.7;
}

.partners__logo img {
    display: block;
    width: 310px;
    height: 90px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .main-visual__photo picture img {
        height: 35.139vw;
    }

    .main-visual__cta-button {
        width: 20.278vw;
        height: 5.051vw;
        padding-left: 3.66vw;
        font-size: 1.684vw;
    }

    .main-visual__cta-button--apply {
        padding-left: 2.562vw;
        font-size: 1.318vw;
    }

    .main-visual__cta-button-icon--form {
        width: 1.611vw;
        height: 2.014vw;
    }

    .main-visual__cta-button-icon--calendar {
        width: 1.611vw;
        height: 1.787vw;
    }

    .floating-cta .back-to-top {
        margin-left: 0.586vw;
    }

    .floating-cta {
        right: 1.757vw;
        bottom: 1.757vw;
        gap: 0.732vw;
    }

    .main-visual__arrow {
        top: 12.811vw;
        width: 4.466vw;
        height: 4.466vw;
    }

    .main-visual__arrow--prev {
        left: 9.81vw;
    }

    .main-visual__arrow--next {
        right: 9.81vw;
    }

    .main-visual__arrow img {
        width: 1.611vw;
    }

    .main-visual__dots {
        gap: 0.586vw;
        margin-top: 1.611vw;
    }

    .main-visual__dot {
        width: 0.879vw;
        height: 0.879vw;
    }

    .main-visual__news-link {
        margin-top: 1.537vw;
    }

    .main-visual__empty {
        padding: 1.757vw 2.343vw;
    }

    .concept {
        padding-top: 8.384vw;
    }

    .concept__watermark {
        margin-top: 3.944vw;
    }

    .concept__heading {
        width: 62.079vw;
        margin-bottom: 2.078vw;
    }

    .concept__text {
        font-size: 1.464vw;
        line-height: 3.148vw;
        letter-spacing: 0.059vw;
    }

    .quick-links {
        margin-top: -0.586vw;
        padding: 3.66vw 1.464vw;
    }

    .quick-links__row {
        gap: 1.674vw;
        max-width: 71.45vw;
    }

    .quick-links__row + .quick-links__row {
        margin-top: 1.826vw;
    }

    .quick-links__card {
        gap: 0.879vw;
        height: 14.077vw;
        padding-bottom: 1.141vw;
        border-radius: 2.207vw;
        font-size: 1.391vw;
        line-height: 2.663vw;
    }

    .quick-links__card span.quick-links__card-label--multiline {
        line-height: 1.83vw;
    }

    img[src$="icon-facility-info.svg"] { width: 4.921vw; }
    img[src$="icon-fee.svg"] { width: 6.881vw; }
    img[src$="icon-coordinator.svg"] { width: 10.688vw; }
    img[src$="icon-pr-tool.svg"] { width: 5.253vw; }
    img[src$="icon-faq.svg"] { width: 6.946vw; }
    img[src$="icon-contact.svg"] { width: 6.886vw; }

    .quick-links__icon--contact {
        margin-bottom: 1.226vw;
    }

    .instagram-feed {
        max-width: 82.577vw;
        margin-top: 3.66vw;
        padding: 4.319vw 1.464vw 5.125vw;
        border-radius: 3.514vw;
    }

    .instagram-feed__heading {
        font-size: 4.539vw;
        line-height: 4.167vw;
    }

    .instagram-feed__stripe {
        margin-top: 1.537vw;
    }

    .instagram-feed__stripe span {
        width: 2.648vw;
        height: 0.439vw;
    }

    .instagram-feed__grid {
        max-width: 53.587vw;
        margin-top: 2.855vw;
    }

    .instagram-feed__multi-icon {
        top: 0.732vw;
        right: 0.732vw;
        width: 1.855vw;
        height: 1.855vw;
    }

    .instagram-feed__follow {
        margin-top: 4.392vw;
        font-size: 3.953vw;
        line-height: 4.167vw;
        letter-spacing: 0.04vw;
        -webkit-text-stroke-width: 0.22vw;
        text-stroke-width: 0.22vw;
    }

    .instagram-feed__handle {
        width: 29.283vw;
        height: 5.125vw;
        margin-top: 1.464vw;
        padding: 0 2.343vw;
        border-radius: 5.966vw;
        font-size: 1.83vw;
    }

    .instagram-feed__handle img {
        width: 2.196vw;
        height: 2.196vw;
    }

    .access {
        margin-top: 3.66vw;
        padding: 5.417vw 1.464vw 4.758vw;
    }

    .access__inner {
        max-width: 71.45vw;
    }

    .access__facility-name {
        margin-bottom: 1.611vw;
    }

    .access__facility-name-sub {
        font-size: 1.684vw;
    }

    .access__facility-name-sub--tight {
        letter-spacing: -0.539vw;
    }

    .access__facility-name-main {
        font-size: 2.489vw;
    }

    .access__facility-name-note {
        font-size: 1.318vw;
    }

    .access__info {
        margin-bottom: 1.903vw;
    }

    .access__info p {
        font-size: 1.464vw;
        line-height: 2.416vw;
    }

    .access__info-small {
        font-size: 1.171vw;
    }

    .access__label {
        gap: 0.366vw;
        margin-bottom: 0.586vw;
        font-size: 1.757vw;
    }

    .access__label::before {
        width: 1.025vw;
        height: 1.025vw;
    }

    .access__transport {
        margin-bottom: 1.684vw;
    }

    .access__transport p {
        font-size: 1.464vw;
        line-height: 2.416vw;
    }

    .access__transport p.access__transport-note {
        font-size: 1.171vw;
    }

    .access__map {
        height: 32.064vw;
        border-radius: 2.343vw;
    }

    .partners {
        padding: 3.441vw 1.464vw 3.514vw;
    }

    .partners__logos {
        gap: 1.611vw;
        max-width: 71.45vw;
        margin-top: 3.441vw;
    }

    .partners__logo-placeholder {
        height: 6.589vw;
    }

    .partners__logo img {
        width: 22.694vw;
        height: 6.589vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782px以下はvw縮小をやめて実測pxで再定義する */
/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。
   border/border-*(線の太さ)は詳細度の都合上スケール対象外、それ以外の
   サイズ・間隔は全てvw化している */
@media (max-width: 782px) {
    .main-visual__photo picture img {
        height: 72vw;
    }

    /* スマホではPC/タブレットの丸ボタン2つ(floating-cta)ではなく、
       画面幅いっぱいの固定バー(mobile-fixed-cta)に切り替える */
    .floating-cta {
        display: none;
    }

    /* mobile-fixed-cta(赤い固定バー)とback-to-topを縦に並べつつ、
       sticky基準はwrap側に持たせる（floating-ctaと同じくpage-content内でフッター手前に必ず止まる）。
       transform:translateZ(0)でGPU描画に乗せることで、iOS Safariのツールバー可変
       (スクロールでコンパクト化)時にstickyの位置がズレて画面中央に取り残される
       不具合を回避している */
    .mobile-fixed-cta-wrap {
        position: sticky;
        bottom: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2.133vw;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .mobile-fixed-cta-wrap .back-to-top {
        margin-right: 2.133vw;
    }

    /* floating-ctaと違い、スクロール後のフェード表示ではなく最初から常時表示する */
    .mobile-fixed-cta {
        display: flex;
        width: 100%;
        height: 13.6vw;
        border: 1px solid #000;
        background: #d7322e;
        box-sizing: border-box;
    }

    .mobile-fixed-cta__button {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 2.133vw;
        color: #fff;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 4vw;
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-fixed-cta__button:first-child {
        border-right: 1px solid #000;
    }

    .mobile-fixed-cta__icon {
        display: block;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .mobile-fixed-cta__icon--form {
        width: 3.627vw;
        height: 4.52vw;
        -webkit-mask-image: url('../../images/icon-form.svg');
        mask-image: url('../../images/icon-form.svg');
    }

    .mobile-fixed-cta__icon--calendar {
        width: 3.627vw;
        height: 4.08vw;
        -webkit-mask-image: url('../../images/icon-calendar.svg');
        mask-image: url('../../images/icon-calendar.svg');
    }

    /* Figma実測：46.658px、カード縦中央、左右16px */
    .main-visual__arrow {
        top: 50%;
        width: 12.443vw;
        height: 12.443vw;
        transform: translateY(-50%);
    }

    .main-visual__arrow--prev {
        left: 4.267vw;
    }

    .main-visual__arrow--next {
        right: 4.267vw;
    }

    .main-visual__arrow img {
        width: 4.48vw;
    }

    .main-visual__dots {
        gap: 1.507vw;
        margin-top: 3.733vw;
    }

    .main-visual__dot {
        width: 2.261vw;
        height: 2.261vw;
    }

    .main-visual__news-link {
        margin-top: 4.133vw;
    }

    /* コンセプト（キャッチコピー＋Setagaya Cityウォーターマーク＋説明文） */
    .concept {
        padding: 9.6vw 4.267vw 0;
    }

    .concept__watermark {
        margin-top: 9.6vw;
    }

    .concept__heading {
        width: 95.733vw;
        margin-bottom: 5.067vw;
    }

    .concept__text--desktop {
        display: none;
    }

    .concept__text--mobile {
        display: block;
    }

    .concept__text {
        max-width: none;
        text-align: left;
        font-size: 4vw;
        line-height: 9.067vw;
        letter-spacing: 0;
    }

    /* クイックリンク：3列×2段→1列×6段に組み替え */
    .quick-links {
        margin-top: -0.267vw;
        padding: 10.667vw 4.267vw;
    }

    .quick-links__row {
        flex-direction: column;
        gap: 2.667vw;
        max-width: 82.667vw;
    }

    .quick-links__row + .quick-links__row {
        margin-top: 2.667vw;
    }

    /* タブレット用vw縮小ルールが下限なく効いてしまうため、PC実測値で明示的に上書きする
       （カードサイズ自体はFigma上PCと同じで、1列に組み替えているだけ） */
    .quick-links__card {
        flex: none;
        width: 100%;
        height: 51.277vw;
        gap: 3.2vw;
        padding-bottom: 4.157vw;
        border-radius: 8.038vw;
        font-size: 5.067vw;
        line-height: 9.701vw;
    }

    .quick-links__card span.quick-links__card-label--multiline {
        line-height: 6.667vw;
    }

    img[src$="icon-facility-info.svg"] { width: 17.925vw; }
    img[src$="icon-fee.svg"] { width: 25.067vw; }
    img[src$="icon-coordinator.svg"] { width: 38.933vw; }
    img[src$="icon-pr-tool.svg"] { width: 19.133vw; }
    img[src$="icon-faq.svg"] { width: 25.301vw; }
    img[src$="icon-contact.svg"] { width: 25.083vw; }

    .quick-links__icon--contact {
        margin-bottom: 4.464vw;
    }

    .instagram-feed {
        max-width: none;
        margin: 13.333vw 4.267vw 13.867vw;
        padding: 6.4vw 4.267vw 12.8vw;
        border-radius: 6.4vw;
    }

    .instagram-feed__heading {
        font-size: 9.333vw;
        line-height: 10.667vw;
    }

    .instagram-feed__stripe {
        margin-top: 2.133vw;
    }

    .instagram-feed__stripe span {
        width: 5.333vw;
        height: 0.8vw;
    }

    .instagram-feed__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 78.933vw;
        margin-top: 6.4vw;
    }

    .instagram-feed__multi-icon {
        top: 1.6vw;
        right: 1.6vw;
        width: 4.8vw;
        height: 4.8vw;
    }

    .instagram-feed__follow {
        margin-top: 7.733vw;
        font-size: 8vw;
        line-height: 11.2vw;
        letter-spacing: 0.08vw;
        -webkit-text-stroke: 0.712vw #000;
        text-stroke: 0.712vw #000;
    }

    .instagram-feed__handle {
        width: 70.4vw;
        height: 14.667vw;
        margin-top: 3.733vw;
        padding: 0 6.4vw;
        gap: 2.133vw;
        border-radius: 999px;
        font-size: 4.533vw;
    }

    .instagram-feed__handle img {
        width: 7.867vw;
        height: 7.867vw;
    }

    /* アクセス */
    .access {
        margin-top: 9.6vw;
        padding: 13.333vw 4.267vw 13.6vw;
    }

    .access__inner {
        max-width: none;
    }

    .access__facility-name--desktop,
    .access__info--desktop,
    .access__transport--desktop {
        display: none;
    }

    .access__facility-name--mobile,
    .access__info--mobile,
    .access__transport--mobile {
        display: block;
    }

    .access__facility-name {
        margin-left: -2.133vw;
        margin-bottom: 2.133vw;
    }

    .access__facility-name-sub {
        font-size: 4.8vw;
    }

    .access__facility-name-sub--tight {
        letter-spacing: -1.536vw;
    }

    .access__facility-name-main {
        font-size: 6.4vw;
    }

    .access__facility-name-note {
        font-size: 4vw;
    }

    .access__info {
        margin-bottom: 5.067vw;
    }

    .access__info p {
        font-size: 4vw;
        line-height: 7.467vw;
    }

    .access__info--mobile p {
        margin: 0 0 1.333vw;
    }

    .access__info--mobile p:first-child,
    .access__info--mobile p:last-child {
        margin-bottom: 0;
    }

    /* PC版と同じく、flexboxではなくdisplay:tableにする（Safariでの折り返し幅ズレを避けるため） */
    .access__info--mobile p:nth-child(2),
    .access__info--mobile p:nth-child(3),
    .access__info--mobile p:nth-child(4) {
        display: table;
        width: 100%;
    }

    /* PC/タブレットでは電話番号とその直後の（）が改行で分かれないようにしているが、
       スマホ幅ではそのまとまりが画面幅より長くなり、はみ出してしまうため解除する */
    .access__info-nowrap {
        white-space: normal;
    }

    .access__info-small {
        font-size: 3.467vw;
    }

    .access__label {
        margin-bottom: 2.133vw;
        font-size: 4.8vw;
    }

    .access__label::before {
        width: 2.933vw;
        height: 2.933vw;
    }

    .access__transport {
        margin-bottom: 5.6vw;
    }

    .access__transport p {
        font-size: 4vw;
        line-height: 7.467vw;
    }

    .access__transport--mobile p {
        margin: 0 0 1.333vw;
    }

    .access__transport--mobile p:last-child {
        margin-bottom: 0;
    }

    .access__transport p.access__transport-note {
        margin-top: 4.267vw;
        font-size: 3.467vw;
        line-height: 5.067vw;
    }

    .access__map {
        height: 57.867vw;
        border-radius: 4.267vw;
    }

    /* パートナー（リンク集ボタン＋ロゴ枠は縦積み） */
    .partners {
        padding: 13.333vw 4.267vw 16.267vw;
    }

    .partners__logos {
        flex-direction: column;
        gap: 5.067vw;
        max-width: 83.467vw;
        margin-top: 13.333vw;
    }

    .partners__logo-placeholder {
        flex: none;
        width: 100%;
        height: 24.267vw;
    }

    .partners__logo {
        width: 100%;
    }

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