@charset "UTF-8";

/* ==================================================================
 * oki-takken — 一般社団法人 沖縄県不動産流通機構
 *
 * 土台部分（リセット・変数・レイアウト基準）。
 * 各セクションのスタイルはこの下に追記していく。
 *
 * 【デザイン基準】Figma fileKey: TqYjbPQrD18ngj00ArGEpJ
 *   キャンバス 1440px / コンテンツ 1120px（左右余白160px対称）
 *   2カラム 539px(gap 42) / 3カラム 367px(gap 10) / 4カラム 265px(gap 20)
 *   → Figma の px 値を 1/10 して rem で書けば PC で一致する（下の html 参照）
 * ================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * カラー変数（Figma デザインから実測した値）
 * Figma 側で定義されていた変数は green / red の 2 つだけだったため、
 * 残りは各ノードの指定値を拾ってここに集約している。
 * セクションを実装するたびに追記する。
 * ------------------------------------------------------------------ */
:root {
    /* 主要カラー */
    --primary: #084f95;                    /* フッター・CTA・見出しの紺 */
    --primary-deep: #023c76;               /* ヘッダー背景のベース色 */
    --header-bg: rgba(2, 60, 118, 0.6);    /* ヘッダー（半透明） */
    --accent: #d93448;                     /* Figma変数 red：検索ボタン・会員ログイン */
    --green: #32a783;                      /* Figma変数 green */

    /* 補助カラー */
    --bnr-bg: #fffad4;                     /* 「バナー広告募集中」の帯 */
    --text-color: #333;
    --text-black: #000;
    --gray: #9b9b9b;                       /* 「広告募集中」プレースホルダ */
    --border: #b7b7b7;
    --border-light: #f9f9f9;
    --bg-light: #eee;

    /* レイアウト */
    --content-width: 116.8rem;             /* 内寸 1120px（padding 2.4rem×2 を含む） */
    --transition: 0.3s ease-in-out;
}

/* ------------------------------------------------------------------
 * リセット
 * ------------------------------------------------------------------ */
html,
body,
h1,
h2,
h3,
h4,
a,
table,
tr,
th,
td,
fieldset {
    border: 0;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

article,
header,
footer,
aside,
figure,
figcaption,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: 100%;
}

/* padding を消さないとブラウザ既定の padding-inline-start:40px が残り、
   リスト系がすべて 40px 右にずれる。 */
ol,
ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
}

a {
    color: inherit;
    display: block;
    text-decoration: none;
}

/* object-fit:contain は縦横比の保険。width と height を両方指定しても歪まない。
   写真を切り抜く箇所だけ個別に cover を指定する。 */
img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

input,
button,
select,
textarea {
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
}

textarea {
    resize: vertical;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
    cursor: pointer;
}

input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

select::-ms-expand {
    display: none;
}

pre {
    white-space: pre-wrap;
}

/* ------------------------------------------------------------------
 * フォントサイズの基準（1rem = 10px 相当）
 *
 * SP           : 62.5% = 10px 固定
 * 768〜1167px  : 0.85616vw ＝ ビューポート連動で可変
 *                （1168px のとき 10.0px になる係数）
 * 1168px 以上  : 10px 固定
 *
 * この機構のおかげで Figma（1440px 基準）の px 値を 1/10 して
 * rem で書くだけで PC 表示が一致し、タブレットでは自動縮小する。
 * ------------------------------------------------------------------ */
html {
    font-size: 62.5%;
}

@media screen and (min-width: 768px) {
    html {
        font-size: 0.85616vw;
    }
}

@media screen and (min-width: 1168px) {
    html {
        font-size: 10px;
    }
}

body {
    color: var(--text-color);
    font-family: 'IBM Plex Sans JP', 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
}

@media screen and (max-width: 767px) {
    body {
        font-size: 1.4rem;
    }
}

/* ------------------------------------------------------------------
 * レイアウト
 * ------------------------------------------------------------------ */
/* padding-top は position:fixed のヘッダーの高さ分。body.home で打ち消す。 */
.wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 11.4rem;
    position: relative;
}

@media screen and (max-width: 767px) {
    .wrap {
        padding-top: 15vw;
    }
}

.main {
    flex: 1;
}

.fixed {
    height: 100%;
    position: fixed;
    width: 100%;
}

/* コンテンツ幅。Figma のコンテンツ幅 1120px に合わせている。
   1440px 表示時: max-width 1168px を中央寄せ → 左右余白 136px、
   さらに内側 padding 24px で文字の左端が 160px = Figma と一致する。 */
.inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-width);
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    position: relative;
    width: 100%;
}

.inner-wide {
    margin-left: auto;
    margin-right: auto;
    max-width: 192rem;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .inner {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

/* ------------------------------------------------------------------
 * 表示切替ユーティリティ
 * ------------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .sp-only {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .pc-only {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
 * WordPress 標準の配置クラス
 * ------------------------------------------------------------------ */
.aligncenter,
.aligncenter img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

.alignright,
.alignright img {
    height: auto;
    margin-left: auto;
    max-width: 100%;
}

.alignnone,
.alignnone img {
    height: auto;
    max-width: 100%;
}

/* ==================================================================
 * ヘッダー   Figma: 4061:3543（1440×114）
 * ================================================================== */
/* z-index は .nav-drawer(35) より必ず大きくする。小さいとドロワーに覆われて
   ハンバーガーが押せず、メニューを閉じられなくなる。 */
.header {
    transition: background-color 0.3s, box-shadow 0.3s;
    align-items: center;
    background-color: var(--header-bg);
    display: flex;
    height: 11.4rem;
    justify-content: space-between;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

/* スクロール後は青の半透明＋blur に切り替える（PC/SP共通）。
   下地（::before）を消さないと blur が効かないので合わせて消す。
   blur 非対応ブラウザでは背後の文字が透けて読みにくくなるため、
   @supports で切り分けて不透明度を上げている。 */
.header.scrolled {
    background-color: rgba(2, 60, 118, 0.85);
    box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.03);
}

.header.scrolled::before {
    display: none;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .header.scrolled {
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
        background-color: rgba(2, 60, 118, 0.55);
    }
}

/* 半透明ヘッダーの下地。FV がある TOP では body.home 側で消す。 */
.header::before {
    background-color: var(--primary-deep);
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.header__logoArea {
    align-self: stretch;
    background-color: #fff;
    border-bottom-right-radius: 2rem;
    flex-shrink: 0;
    position: relative;
    width: 24.5rem;
}

.header__logo {
    left: 2.8rem;
    position: absolute;
    top: 2.5rem;
    width: 19rem;
}

.header__utility {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-left: auto;
    padding: 1rem 1rem 1.4rem 3rem;
}

/* --- サイト内検索 --- */
.header__search {
    align-items: center;
    background-color: #fff;
    border-radius: 0.4rem;
    display: flex;
    gap: 1rem;
    padding: 0.4rem;
}

.header__searchField {
    align-items: center;
    background-color: #fff;
    border: 1px solid #cbcbcb;
    border-radius: 0.4rem;
    display: flex;
    gap: 0.4rem;
    height: 2.6rem;
    padding: 0 1rem;
    width: 21.4rem;
}

.header__searchIcon {
    flex-shrink: 0;
    height: 1.7rem;
    width: 1.7rem;
}

.header__searchField input {
    font-size: 1.3rem;
    letter-spacing: 0.056em;
    line-height: 1.8rem;
    width: 100%;
}

.header__searchField input::placeholder {
    color: #d6d6d6;
}

.header__searchBtn {
    background-color: var(--accent);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    height: 2.6rem;
    letter-spacing: 0.04em;
    line-height: 1.8rem;
    padding: 0 1.2rem;
}

/* --- グローバルナビ --- */
.header__navList {
    align-items: flex-end;
    display: flex;
}

/* デザイン値は 17px / padding 0 1.4rem。 */
.header__navItem a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.8rem;
    padding: 0 1.8rem;
    text-align: center;
    transition: opacity var(--transition);
}

.header__navItem a:hover {
    opacity: 0.7;
}

/* --- 会員ログイン --- */
.header__login {
    align-items: center;
    align-self: stretch;
    background-color: var(--accent);
    border-radius: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 700;
    gap: 0.8rem;
    justify-content: center;
    letter-spacing: 0.04em;
    line-height: 1.8rem;
    /* ナビとの間が 1rem しかなく詰まって見えたため左マージンを 2rem に */
    margin: 1rem 1rem 1rem 2rem;
    text-align: center;
    transition: opacity var(--transition);
    width: 11rem;
}

.header__login:hover {
    opacity: 0.85;
}

/* icon-lock.svg は 10.9325×20 の縦長。高さのみ指定して比率を保つ。 */
.header__login img {
    flex-shrink: 0;
    height: 2rem;
    width: auto;
}

/* ==================================================================
 * SP ハンバーガー／ドロワー（流用元テーマの構造を踏襲）
 * ================================================================== */
/* display:none は base に置く。SP のメディアクエリ内だけに書くと PC で
   .nav-drawer が表示されてしまう。 */
.hamburgerArea,
.nav-drawer {
    display: none;
}

.nav-drawer__btn img {
    flex-shrink: 0;
    width: auto;
}

@media screen and (max-width: 767px) {
    .header {
        height: 15vw;
        justify-content: flex-start;
    }

    .header__logoArea {
        border-bottom-right-radius: 0;
        margin-right: auto;
        width: 50vw;
    }

    .header__logo {
        left: 3vw;
        top: 50%;
        transform: translateY(-50%);
        width: 40vw;
    }

    .header__login {
        border-radius: 0;
        font-size: 2.6vw;
        gap: 0.4vw;
        line-height: 1.3;
        margin: 0;
        width: 15vw;
    }

    /* 鍵アイコンは 10.93×20 の縦長。高さのみ指定して比率を保つ。 */
    .header__login img {
        height: 3.6vw;
        width: auto;
    }

    .hamburgerArea {
        display: block;
    }

    .hamburger {
        background-color: var(--primary);
        border: none;
        cursor: pointer;
        height: 15vw;
        outline: none;
        padding: 0;
        position: relative;
        transition: background-color 0.5s ease-out;
        width: 15vw;
        z-index: 40;
    }

    .hamburger span {
        background-color: #fff;
        height: 0.35vw;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        transition: all 0.5s ease-out;
        width: 4.7vw;
    }

    .hamburger__lineTop {
        top: 5.1vw;
    }

    .hamburger__lineCenter {
        top: 6.4vw;
    }

    .hamburger__lineBottom {
        top: 7.7vw;
    }

    /* .open はボタン自身に付くので子孫セレクタ（.open .hamburger）にしない。 */
    .hamburger.open {
        background-color: var(--primary-deep);
    }

    .hamburger.open .hamburger__lineTop {
        top: 6.7vw;
        transform: rotate(45deg);
    }

    .hamburger.open .hamburger__lineCenter {
        display: none;
    }

    .hamburger.open .hamburger__lineBottom {
        top: 6.7vw;
        transform: rotate(-45deg);
    }

    .nav-drawer {
        align-items: center;
        background-color: #fff;
        display: none;
        height: 100vh;
        justify-content: center;
        overflow-y: scroll;
        padding-bottom: 20vw;
        padding-top: 20vw;
        position: fixed;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 35;
    }

    .nav-drawer__list {
        align-items: center;
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nav-drawer__item:not(:first-of-type) {
        margin-top: 6vw;
    }

    .nav-drawer__link {
        font-size: 4.2vw;
        font-weight: 700;
        text-align: center;
    }

    .nav-drawer__btn {
        align-items: center;
        background-color: var(--accent);
        color: #fff;
        display: flex;
        font-size: 4vw;
        font-weight: 700;
        gap: 2vw;
        justify-content: center;
        margin: 8vw auto 0;
        padding: 3vw;
        width: 80%;
    }

    /* 鍵アイコンは縦長（縦横比0.547）。高さのみ指定して比率を保つ。 */
    .nav-drawer__btn img {
        height: 5vw;
        width: auto;
    }
}

/* ==================================================================
 * フッター   Figma: 4022:788（1440×2157）
 * ================================================================== */

/* --- 広告掲載 --- */
.footerAd {
    padding-bottom: 4rem;
    padding-top: 0;
}

.footerAd__label {
    background-color: var(--bnr-bg);
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3rem;
    margin: 0 auto 4rem;
    padding: 1rem 4rem;
    text-align: center;
    width: fit-content;
}

.footerAd__list {
    display: flex;
    gap: 1.2rem;
}

.footerAd__item {
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--border-light);
    border-radius: 0.6rem;
    display: flex;
    justify-content: center;
    min-height: 8rem;
    padding: 0.8rem;
    width: 27.1rem;
}

.footerAd__item img {
    width: auto;
    max-height: 8rem;
}

.footerAd__item--vacant {
    background-color: var(--bg-light);
    color: var(--gray);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.footerAd__notice {
    align-items: center;
    background-color: var(--bnr-bg);
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
    padding: 1.6rem 1rem;
}

.footerAd__noticeMain {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 3rem;
}

.footerAd__noticeMain strong {
    font-size: 3.2rem;
    font-weight: 700;
}

.footerAd__noticeSub {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3rem;
}

/* --- 関連リンク --- */
.footerLink {
    padding-bottom: 6rem;
    padding-top: 6rem;
}

.footerLink__heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
}

.footerLink__deco {
    height: 6rem;
    width: auto;
}

.footerLink__heading span {
    color: var(--primary);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.footerLink__list {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.footerLink__item {
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    display: flex;
    height: 7.9rem;
    justify-content: center;
    padding: 1rem 1.6rem;
    transition: opacity var(--transition);
    width: 27.1rem;
}

.footerLink__item:hover {
    opacity: 0.7;
}

.footerLink__item img {
    max-height: 100%;
    width: auto;
}

/* --- お問い合わせ CTA --- */
.footerCta {
    background-color: var(--primary);
    padding-top: 7rem;
    position: relative;
}

.footerCta__heading {
    align-items: center;
    border-bottom: 2px solid #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto 4rem;
    padding-bottom: 2rem;
    width: fit-content;
}

.footerCta__en {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.8rem;
    text-transform: capitalize;
}

.footerCta__jp {
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.footerCta__text {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 3.2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.footerCta__box {
    background-color: #fff;
    border-radius: 14rem;
    margin: 0 auto;
    max-width: 109rem;
    padding: 4rem 2rem;
    text-align: center;
}

.footerCta__boxTitle {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.4rem;
}

.footerCta__tel {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.footerCta__tel img {
    height: 3.4rem;
    width: 3.4rem;
}

.footerCta__tel a {
    display: inline-block;
    font-size: 3.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.footerCta__time {
    font-size: 1.2rem;
    font-weight: 700;
}

/* CTA 下端の街並みイラスト */
.footerCta__town {
    display: flex;
    margin-top: 4rem;
    overflow: hidden;
}

.footerCta__town img {
    flex-shrink: 0;
    width: 50%;
}

/* --- フッターナビ＋地図＋住所 --- */
.footerNav {
    padding-bottom: 4rem;
    padding-top: 6rem;
}

.footerNav__inner {
    display: flex;
    gap: 4rem;
}

.footerNav__menu {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 56rem;
}

.footerNav__btnRow {
    display: flex;
    gap: 4rem;
}

.footerNav__btn {
    align-items: center;
    background-color: var(--primary);
    border-radius: 0.6rem;
    color: #fff;
    display: flex;
    flex-shrink: 0; /* 既定の 1 だと親に収めようとして文字が途中で折り返す */
    font-size: 1.6rem;
    font-weight: 700;
    gap: 2rem;
    justify-content: space-between;
    letter-spacing: 0.04em;
    line-height: 2.4rem;
    padding: 1.4rem 1.5rem;
    transition: opacity var(--transition);
    white-space: nowrap;
    width: fit-content;
}

/* 矢印はマスクで描く。ホバーで色を反転させるため。 */
.footerNav__btn::after {
    background-color: #fff;
    content: "";
    flex-shrink: 0;
    height: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 0.6rem;
    -webkit-mask-image: url(../img/common/icon-arrow-right.svg);
            mask-image: url(../img/common/icon-arrow-right.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* 白い面が左から右へスウィープして文字と矢印が紺に反転し、矢印が少し右へ寄る。
   もっとみるボタン（円が横に広がる）と動きの向きを揃えている。
   ※ background-position のパーセントは
        offset = (領域サイズ - 画像サイズ) × 割合
      で決まるため、グラデーションを領域の2倍幅にしないと動かない。 */
.footerNav__btn {
    background-image: linear-gradient(to right, #fff 50%, transparent 50%);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    transition: background-position 0.4s ease, color 0.3s ease;
}

.footerNav__btn:hover {
    background-position: 0 0;
    color: var(--primary);
}

.footerNav__btn:hover::after {
    background-color: var(--primary);
    transform: translateX(0.4rem);
}

.footerNav__cols {
    display: flex;
    gap: 3rem;
}

.footerNav__col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footerNav__group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footerNav__subList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footerNav__subList a {
    align-items: center;
    color: var(--text-black);
    display: flex;
    font-size: 1.5rem;
    gap: 1rem;
    transition: color var(--transition);
}

.footerNav__subList a::before {
    color: var(--primary);
    content: "●";
    font-size: 1.5rem;
    font-weight: 700;
}

.footerNav__subList a:hover {
    color: var(--primary);
}

/* 要認証カテゴリには鍵アイコンを添える */
.footerNav__subList a.is-locked::after {
    background-image: url(../img/common/icon-lock.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    filter: brightness(0) saturate(100%) invert(19%) sepia(63%) saturate(2044%) hue-rotate(191deg) brightness(94%) contrast(94%);
    flex-shrink: 0;
    height: 1.4rem;
    width: 0.77rem; /* icon-lock.svg の比 0.547 に合わせる */
}

.footerNav__info {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 52rem;
}

.footerNav__map {
    line-height: 0;
}

.footerNav__map iframe {
    height: 57.4rem;
    width: 100%;
}

.footerNav__address {
    align-items: flex-start;
    display: flex;
    gap: 2rem;
}

.footerNav__logo {
    flex-shrink: 0;
    width: 21.7rem;
}

.footerNav__addressText {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.4rem;
}

/* --- コピーライト --- */
.footerCopy {
    background-color: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 2rem 1rem;
    text-align: center;
    text-transform: capitalize;
}

/* --- フッター SP --- */
@media screen and (max-width: 767px) {
    .footerAd__list,
    .footerLink__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footerAd__item,
    .footerLink__item {
        width: calc(50% - 0.6rem);
    }

    .footerAd__notice {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    .footerAd__noticeMain {
        font-size: 1.6rem;
    }

    .footerAd__noticeMain strong {
        font-size: 2.2rem;
    }

    .footerAd__noticeSub {
        font-size: 1.4rem;
    }

    .footerLink__heading span,
    .footerCta__jp {
        font-size: 2.8rem;
    }

    .footerCta__box {
        border-radius: 2rem;
        padding: 3rem 1.5rem;
    }

    .footerCta__boxTitle {
        font-size: 1.8rem;
    }

    .footerCta__tel a {
        font-size: 2.8rem;
    }

    .footerCta__text {
        font-size: 1.4rem;
        line-height: 2.4rem;
        text-align: left;
    }

    .footerNav__inner {
        flex-direction: column;
    }

    .footerNav__menu,
    .footerNav__info {
        width: 100%;
    }

    .footerNav__btnRow {
        flex-wrap: wrap;
        gap: 1.2rem;
    }

    .footerNav__cols {
        flex-direction: column;
    }

    .footerNav__map iframe {
        height: 60vw;
    }

    .footerNav__address {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .footerNav {
        padding-bottom: 0;
        padding-top: 3rem;
    }

    .footerNav__btn {
        width: 100%; /* -webkit-fill-available 非対応ブラウザ用のフォールバック */
        width: -webkit-fill-available;
    }
}

/* ==================================================================
 * TOP: FV   Figma: fv=4001:20 / 組織名バー=4091:4892 / キャッチ=4069:6373
 *           白パネル=4070:6422 / ピル=4070:6423〜6425 / 沖縄地図=4070:6436
 * ================================================================== */

/* FV があるページ（TOP）はヘッダーを FV 画像に重ねる。
   ヘッダーは半透明 rgba(2,60,118,0.6) なので、下に写真が来ると
   デザインどおりの見え方になる。 */
body.home .wrap {
    padding-top: 0;
}

body.home .header::before {
    display: none;
}

.fv {
    border-bottom-left-radius: 7rem;
    border-top: 3px solid var(--primary);
    height: 64.2rem;
    overflow: hidden;
    position: relative;
}

.fv__bg {
    inset: 0;
    position: absolute;
}

.fv__bg img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.fv__body {
    height: 100%;
    position: relative;
}

/* 組織名バー（598×64・33px・padding 20px） */
.fv__org {
    align-items: center;
    background-color: var(--primary);
    color: #fff;
    display: flex;
    font-size: 3.3rem;
    font-weight: 700;
    height: 6.4rem;
    justify-content: center;
    left: 4rem;
    letter-spacing: 0.04em;
    position: absolute;
    top: 22.6rem;
    width: 59.8rem;
}

/* キャッチコピー。デザインは文字ごとにサイズが異なる（行高は78px共通）。 */
.fv__catch {
    color: #fff;
    font-weight: 700;
    left: 4rem;
    position: absolute;
    top: 31.5rem;
    white-space: nowrap;
}

/* 行高はデザインのテキストボックス（2行で126px）に合わせる。
   Figma の指定値 78px そのままだと下に伸びて白パネルに接触する。 */
.fv__catchRow {
    display: block;
    line-height: 6.3rem;
}

.fv__lg {
    font-size: 6.5rem;
    letter-spacing: 0.05em;
}

.fv__md {
    font-size: 5.9rem;
    letter-spacing: 0.05em;
}

.fv__sm {
    font-size: 4.9rem;
    letter-spacing: 0.05em;
}

.fv__ex {
    font-size: 6rem;
    letter-spacing: 0.05em;
}

/* 左の padding 7.1rem は沖縄地図の居場所。地図はパネル左端より外へはみ出す。 */
.fv__badge {
    align-items: center;
    background-color: #fff;
    border-radius: 1rem;
    display: flex;
    gap: 1.1rem;
    left: 9.53rem;
    padding: 1.7rem 1.8rem 1.4rem 7.1rem;
    position: absolute;
    top: 47.5rem;
}

.fv__map {
    left: -4.83rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12rem;
}

.fv__points {
    display: flex;
    gap: 1.1rem;
}

.fv__points li {
    background-color: var(--primary);
    border-radius: 1rem;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 3.1rem;
    padding: 1.45rem 1.6rem;
    text-align: center;
}

/* ==================================================================
 * 共通パーツ: ボタンのホバーアニメーション
 *
 * 上から色面がスライドインして色が反転する。
 * 擬似要素＋z-index:-1 ではなく background-position を動かす方式。
 * 理由: 親に background-color があると z-index:-1 の擬似要素はその背後に
 * 回り込んで見えなくなる。また矢印を描いている ::after と競合しない。
 *
 * ★グラデーションは領域の2倍の高さにして「上半分＝色／下半分＝透明」にする。
 *   background-position のパーセントは
 *     offset = (領域サイズ - 画像サイズ) × 割合
 *   で決まるため、background-size:100% 100%（＝同サイズ）では括弧内が0になり
 *   何%を指定しても動かない。2倍にして初めてスライドする。
 * ------------------------------------------------------------------ */

/* ==================================================================
 * 共通パーツ: もっとみるボタン
 *
 * 動きは弊社制作の ayumi0901.com の .button a を踏襲（複製可の確認済み）。
 *   ::after = 円。ホバーでボタン全幅まで横に広がる（0.5s）
 *   ::before = 矢印。ホバーで少し右へ寄る（0.3s・borderで描くので画像不要）
 *   .moreBtn__label = 文字。円に飲み込まれるので白へ反転（z-index で前面に置く）
 * ================================================================== */
.moreBtn {
    align-items: center;
    color: var(--text-black);
    display: flex;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    padding: 0.8rem 2.8rem 0.8rem 6.8rem;
    position: relative;
    transition: 0.3s ease-in-out;
    width: fit-content;
}

.moreBtn::after {
    background: var(--primary);
    border-radius: 4rem;
    content: "";
    display: block;
    height: 4.8rem;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s;
    width: 4.8rem;
    z-index: 1;
}

.moreBtn::before {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
    display: block;
    height: 0.8rem;
    left: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
    width: 0.8rem;
    z-index: 2;
}

.moreBtn__label {
    position: relative;
    transition: all 0.3s;
    z-index: 3;
}

.moreBtn:hover::after {
    width: 100%;
}

.moreBtn:hover::before {
    left: 2.6rem;
}

.moreBtn:hover .moreBtn__label {
    color: #fff;
}

/* 緑（私たちについて） */
.moreBtn--green::after {
    background: var(--green);
}

/* 白（紺地の上）。円が白なので矢印と反転後の文字は紺にする。 */
.moreBtn--white {
    color: #fff;
}

.moreBtn--white::after {
    background: #fff;
}

.moreBtn--white::before {
    border-right-color: var(--primary);
    border-top-color: var(--primary);
}

.moreBtn--white:hover .moreBtn__label {
    color: var(--primary);
}

@media screen and (max-width: 767px) {
    .moreBtn {
        font-size: 3.4vw;
        padding: 1.5vw 5vw 1.5vw 11vw;
    }

    .moreBtn::after {
        height: 8vw;
        width: 8vw;
    }

    .moreBtn::before {
        height: 1.6vw;
        left: 3.2vw;
        width: 1.6vw;
    }

    .moreBtn:hover::before {
        left: 4.2vw;
    }
}

/* ==================================================================
 * TOP: 会員向け情報の4タイル
 * Figma: 見出し=4008:3 / 円=4091:4877〜4880（白地・紺3px枠・radius170）
 *        街並み区切り=Group 371（y=1091・タイル下端に重なる）
 * ================================================================== */
.homeMember {
    padding-top: 6rem;
    position: relative;
}

.homeMember__heading {
    align-items: center;
    border-bottom: 2px solid var(--primary);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
    padding-bottom: 2rem;
    width: fit-content;
}

.homeMember__headingIcon {
    height: 3.2rem;
    width: auto;
}

.homeMember__heading span {
    color: var(--primary);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.homeMember__list {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 4rem;
}

.homeMember__item a {
    align-items: center;
    background-color: #fff;
    border: 3px solid var(--primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 26.5rem;
    justify-content: center;
    transition: background-color var(--transition), color var(--transition);
    width: 26.5rem;
}

.homeMember__item a:hover {
    background-color: var(--primary);
    color: #fff;
}

.homeMember__icon {
    align-items: center;
    display: flex;
    height: 9rem;
    justify-content: center;
}

.homeMember__icon img {
    max-height: 9rem;
    width: auto;
}

.homeMember__label {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

/* 街並みイラストはタイルの下端に重ねる（デザイン y=1091 / タイル下端 1108）。 */
.homeMember__town {
    line-height: 0;
    margin-top: -1.7rem;
}

.homeMember__town img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .homeMember {
        padding-top: 8vw;
    }

    .homeMember__headingIcon {
        height: 5vw;
    }

    .homeMember__heading span {
        font-size: 6.4vw;
        line-height: 1.2;
    }

    .homeMember__list {
        flex-wrap: wrap;
        gap: 4vw;
        margin-top: 6vw;
    }

    .homeMember__item {
        width: calc(50% - 2vw);
    }

    .homeMember__item a {
        gap: 2vw;
        height: auto;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .homeMember__icon {
        height: 16vw;
    }

    .homeMember__icon img {
        max-height: 16vw;
    }

    .homeMember__label {
        font-size: 3.4vw;
    }

    .homeMember__town {
        margin-top: -2vw;
    }
}

/* ==================================================================
 * TOP: お知らせ   Figma: 背景=4054:3458 / カード=4054:3459 / 中身=4008:130
 * ================================================================== */
/* 紺帯はデザイン実測で y=1209〜1745（536px）。カードは 1248〜1633。 */
.homeNews {
    background-color: var(--primary);
    padding-bottom: 11.2rem;
    padding-top: 3.9rem;
}

.homeNews__card {
    background-color: #fff;
    border-radius: 4rem;
    padding: 5rem 6rem 6.6rem;
}

.homeNews__head {
    float: left;
    width: 18.6rem;
}

.homeNews__heading {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
}

.homeNews__deco {
    height: 6rem;
    width: auto;
}

.homeNews__heading span {
    color: var(--primary);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.homeNews__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-left: 22.6rem;
}

.homeNews__meta {
    align-items: center;
    display: flex;
    gap: 1.2rem;
}

.homeNews__date {
    font-size: 1.4rem;
    font-weight: 700;
    min-width: 8rem;
}

.homeNews__cat {
    background-color: var(--primary);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.7rem 0.9rem;
}

.homeNews__title {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition);
    white-space: nowrap;
}

.homeNews__item a:hover .homeNews__title {
    color: var(--primary);
}

.homeNews__empty {
    margin-left: 22.6rem;
}

@media screen and (max-width: 767px) {
    .homeNews {
        padding-bottom: 6vw;
        padding-top: 6vw;
    }

    .homeNews__card {
        border-radius: 2rem;
        padding: 6vw 5vw;
    }

    .homeNews__head {
        align-items: center;
        display: flex;
        float: none;
        justify-content: space-between;
        margin-bottom: 5vw;
        width: 100%;
    }

    .homeNews__heading {
        gap: 1.5vw;
        padding-bottom: 0;
    }

    .homeNews__deco {
        height: 8vw;
    }

    .homeNews__heading span {
        font-size: 6.4vw;
        line-height: 1.2;
    }

    .homeNews__list,
    .homeNews__empty {
        margin-left: 0;
    }

    .homeNews__list {
        gap: 5vw;
    }

    .homeNews__date {
        font-size: 3.2vw;
        min-width: 0;
    }

    .homeNews__cat {
        font-size: 3.2vw;
        padding: 1vw 1.6vw;
    }

    .homeNews__title {
        font-size: 3.6vw;
        line-height: 1.6;
        white-space: normal;
    }
}

/* ==================================================================
 * TOP: 私たちについて
 * Figma: 見出し=4008:476（緑）/ リード=4008:502 / 本文=4008:501
 *        写真=4008:473(460×320) + 4008:474(312×217・右下に重なる)
 * 紺帯の上に、上端が角丸の白ブロックとして重なる。
 * ================================================================== */
.homeAbout {
    background-color: #fff;
    border-top-left-radius: 7rem;
    border-top-right-radius: 7rem;
    margin-top: -6rem;
    padding-bottom: 8rem;
    padding-top: 5.5rem;
    position: relative;
    z-index: 1;
}

.homeAbout__heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto 6rem;
    padding-bottom: 2rem;
    width: fit-content;
}

.homeAbout__deco {
    height: 6rem;
    width: auto;
}

.homeAbout__heading span {
    color: var(--green);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.homeAbout__body {
    display: flex;
    gap: 4rem;
}

/* 写真は大の右下に小が重なる（デザイン: 大 x=160,y=1944 / 小 x=408,y=2155）。 */
.homeAbout__photos {
    flex-shrink: 0;
    padding-bottom: 10.8rem;
    position: relative;
    width: 56rem;
}

.homeAbout__photo1 {
    border-radius: 1rem;
    width: 46rem;
}

.homeAbout__photo2 {
    border-radius: 1rem;
    bottom: 0;
    left: 24.8rem;
    position: absolute;
    width: 31.2rem;
}

.homeAbout__text {
    flex-shrink: 0;
    width: 52rem;
}

.homeAbout__lead {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 4.6rem;
    margin-bottom: 3rem;
}

.homeAbout__desc {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3.2rem;
    margin-bottom: 7rem;
}

/* --- 私たちについての子項目4つ（2×2グリッド） --- */
.homeAboutLinks {
    border-bottom: 1px solid var(--primary);
    border-top: 1px solid var(--green);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 5.5rem;
}

.homeAboutLinks__item:nth-child(odd) {
    border-right: 1px solid var(--green);
}

.homeAboutLinks__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--green);
}

.homeAboutLinks__item a {
    display: block;
    height: 28.4rem;
    overflow: hidden;
    padding: 2rem;
    position: relative;
}

/* 写真は通常 229×137 で右上に、ホバーでカード全面へ広がる。 */
.homeAboutLinks__photo {
    border-radius: 1rem;
    height: 13.7rem;
    overflow: hidden;
    position: absolute;
    right: 2rem;
    top: 3.1rem;
    transition: all 0.4s ease;
    width: 22.9rem;
}

.homeAboutLinks__item a:hover .homeAboutLinks__photo {
    border-radius: 0;
    height: 100%;
    right: 0;
    top: 0;
    width: 100%;
}

.homeAboutLinks__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.homeAboutLinks__no {
    color: var(--green);
    display: block;
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 3.2rem;
    position: relative;
    transition: color var(--transition);
}

/* アイコンは単色PNGをマスクとして使い、色はCSS側で決める。
   step-02.png はホバー用に白で書き出されているため、img で置くと
   白カード上で見えなくなる。 */
.homeAboutLinks__icon {
    background-color: var(--green);
    display: block;
    height: 10.8rem;
    margin-top: 1rem;
    position: relative;
    transition: background-color var(--transition);
    width: 10.8rem;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.homeAboutLinks__item--01 .homeAboutLinks__icon {
    -webkit-mask-image: url(../img/home/step-01.png);
            mask-image: url(../img/home/step-01.png);
}

.homeAboutLinks__item--02 .homeAboutLinks__icon {
    -webkit-mask-image: url(../img/home/step-02.png);
            mask-image: url(../img/home/step-02.png);
}

.homeAboutLinks__item--03 .homeAboutLinks__icon {
    -webkit-mask-image: url(../img/home/step-03.png);
            mask-image: url(../img/home/step-03.png);
}

.homeAboutLinks__item--04 .homeAboutLinks__icon {
    -webkit-mask-image: url(../img/home/step-04.png);
            mask-image: url(../img/home/step-04.png);
}

.homeAboutLinks__label {
    display: block;
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3rem;
    margin-top: 2rem;
    position: relative;
    transition: color var(--transition);
}

/* 矢印は緑円＋白矢印。ホバーで 84px の白円＋緑矢印に反転する。 */
.homeAboutLinks__arrow {
    background-color: var(--green);
    border-radius: 50%;
    bottom: 2rem;
    height: 4.8rem;
    position: absolute;
    right: 2rem;
    transition: all 0.4s ease;
    width: 4.8rem;
}

.homeAboutLinks__arrow::after {
    background-color: #fff;
    content: "";
    height: 1.2rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color var(--transition);
    width: 0.82rem;
    -webkit-mask-image: url(../img/common/icon-arrow-circle.svg);
            mask-image: url(../img/common/icon-arrow-circle.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.homeAboutLinks__item a:hover .homeAboutLinks__no,
.homeAboutLinks__item a:hover .homeAboutLinks__label {
    color: #fff;
}

.homeAboutLinks__item a:hover .homeAboutLinks__icon {
    background-color: #fff;
}

.homeAboutLinks__item a:hover .homeAboutLinks__arrow {
    background-color: #fff;
    height: 8.4rem;
    width: 8.4rem;
}

.homeAboutLinks__item a:hover .homeAboutLinks__arrow::after {
    background-color: var(--green);
    height: 2.1rem;
    width: 1.43rem;
}

@media screen and (max-width: 767px) {
    .homeAboutLinks {
        grid-template-columns: 1fr;
        margin-top: 8vw;
    }

    .homeAboutLinks__item:nth-child(odd) {
        border-right: 0;
    }

    .homeAboutLinks__item:not(:last-child) {
        border-bottom: 1px solid var(--green);
    }

    .homeAboutLinks__item a {
        height: auto;
        min-height: 34vw;
        padding: 4vw;
    }

    .homeAboutLinks__photo {
        height: 22vw;
        right: 4vw;
        top: 6vw;
        width: 36vw;
    }

    .homeAboutLinks__no {
        font-size: 5.6vw;
        line-height: 1;
    }

    .homeAboutLinks__icon {
        height: 12vw;
        margin-top: 2vw;
        width: 12vw;
    }

    .homeAboutLinks__label {
        font-size: 4.4vw;
        line-height: 1.4;
        margin-top: 2vw;
    }

    .homeAboutLinks__arrow {
        bottom: 4vw;
        height: 8vw;
        right: 4vw;
        width: 8vw;
    }

    .homeAboutLinks__arrow::after {
        height: 2.6vw;
        width: 1.8vw;
    }
}

@media screen and (max-width: 767px) {
    .homeAbout {
        border-top-left-radius: 4rem;
        border-top-right-radius: 4rem;
        margin-top: -4vw;
        padding-bottom: 10vw;
        padding-top: 8vw;
    }

    .homeAbout__deco {
        height: 8vw;
    }

    .homeAbout__heading {
        gap: 1.5vw;
        margin-bottom: 6vw;
    }

    .homeAbout__heading span {
        font-size: 6.4vw;
        line-height: 1.2;
    }

    .homeAbout__body {
        flex-direction: column;
        gap: 6vw;
    }

    .homeAbout__photos {
        padding-bottom: 22vw;
        width: 100%;
    }

    .homeAbout__photo1 {
        width: 82%;
    }

    .homeAbout__photo2 {
        left: auto;
        right: 0;
        width: 56%;
    }

    .homeAbout__text {
        width: 100%;
    }

    .homeAbout__lead {
        font-size: 5vw;
        line-height: 1.5;
        margin-bottom: 4vw;
    }

    .homeAbout__desc {
        font-size: 3.6vw;
        line-height: 1.9;
        margin-bottom: 8vw;
    }
}

/* ==================================================================
 * TOP: 入会のメリット
 * Figma: 見出し=Frame 31226 / 写真=4008:472 / 紺ブロック=4008:218
 *        帯=Union×3(#fff5ad) / カード=Rectangle 60×3 / 項目=Frame 31227〜31235
 * ================================================================== */
.homeMerit {
    position: relative;
}

/* 写真は白背景から紺ブロックへまたいで重なる（デザイン y=3067〜3600）。 */
.homeMerit__photo {
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 68rem;
    z-index: 2;
}

.homeMerit__upper {
    padding-bottom: 3rem;
    padding-top: 8rem;
}

.homeMerit__heading {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: fit-content;
}

.homeMerit__deco {
    height: 6rem;
    width: auto;
}

.homeMerit__heading span {
    color: var(--primary);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.homeMerit__panel {
    background-color: var(--primary);
    border-top-left-radius: 7rem;
    overflow: hidden;
    padding-bottom: 10rem;
    padding-top: 4rem;
    position: relative;
}

.homeMerit__panel > .inner {
    position: relative;
    z-index: 1;
}

/* 幅を制限しないと右上の写真に文字が潜り込む（デザインは 520/560px）。 */
.homeMerit__lead {
    color: #fff;
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 4.6rem;
    margin-bottom: 3rem;
    max-width: 52rem;
}

.homeMerit__desc {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3.2rem;
    margin-bottom: 4rem;
    max-width: 56rem;
}

/* --- 3カード（薄黄色の帯＋白カード） --- */
.homeMerit__cards {
    display: flex;
    gap: 1rem;
    padding-top: 6rem;
}

.homeMerit__card {
    flex: 1;
}

/* 帯は下端中央に吹き出しの尾がつく（Union 367×113）。CSSで再現している。 */
.homeMerit__cardTitle {
    background-color: #fff5ad;
    border-radius: 1rem;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3rem;
    padding: 1.6rem 1rem;
    position: relative;
    text-align: center;
}

.homeMerit__cardTitle::after {
    border-left: 1.2rem solid transparent;
    border-right: 1.2rem solid transparent;
    border-top: 1.2rem solid #fff5ad;
    bottom: -1.2rem;
    content: "";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.homeMerit__items {
    background-color: #fff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.4rem;
    padding: 3rem 2rem;
}

.homeMerit__items li {
    align-items: center;
    display: flex;
    font-size: 1.8rem;
    font-weight: 600;
    gap: 1.6rem;
    letter-spacing: 0.08em;
    line-height: 3rem;
}

/* チェックアイコンは1ファイルをマスクにして色をカードごとに変える。 */
.homeMerit__items li::before {
    content: "";
    flex-shrink: 0;
    height: 3.8rem;
    width: 4.6rem;
    -webkit-mask-image: url(../img/home/icon-check.png);
            mask-image: url(../img/home/icon-check.png);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.homeMerit__card--red .homeMerit__items li::before {
    background-color: var(--accent);
}

.homeMerit__card--green .homeMerit__items li::before {
    background-color: var(--green);
}

.homeMerit__card--navy .homeMerit__items li::before {
    background-color: var(--primary);
}

/* 街並みイラストは紺ブロックの下端に敷き、カードの背面に置く
   （デザイン y=3973 でカード 3823〜4041 に重なる）。 */
.homeMerit__town {
    bottom: 0;
    left: 0;
    line-height: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.homeMerit__town img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .homeMerit__photo {
        border-radius: 1rem 0 0 1rem;
        position: relative;
        width: 90%;
        margin-left: auto;
    }

    .homeMerit__upper {
        padding-bottom: 4vw;
        padding-top: 8vw;
    }

    .homeMerit__deco {
        height: 8vw;
    }

    .homeMerit__heading {
        align-items: center;
        gap: 1.5vw;
        margin: 0 auto;
    }

    .homeMerit__heading span {
        font-size: 6.4vw;
        line-height: 1.2;
    }

    .homeMerit__panel {
        border-top-left-radius: 4rem;
        padding-top: 8vw;
    }

    .homeMerit__lead {
        font-size: 5vw;
        line-height: 1.5;
        margin-bottom: 4vw;
    }

    .homeMerit__desc {
        font-size: 3.6vw;
        line-height: 1.9;
        margin-bottom: 6vw;
    }

    .homeMerit__cards {
        flex-direction: column;
        gap: 6vw;
        padding-top: 8vw;
    }

    .homeMerit__cardTitle {
        font-size: 4.4vw;
        line-height: 1.4;
        padding: 3vw 2vw;
    }

    .homeMerit__items {
        gap: 2vw;
        margin-top: 4vw;
        padding: 5vw 4vw;
    }

    .homeMerit__items li {
        font-size: 3.6vw;
        gap: 3vw;
        line-height: 1.5;
    }

    .homeMerit__items li::before {
        height: 6vw;
        width: 7.2vw;
    }
}

/* ==================================================================
 * TOP: 会員名簿 / 優良会員認定業者（2カラムカード）
 * Figma: 紺帯=4091:4889・4874(539×204) / 写真=540×297（上部204pxを除いた分）
 * ================================================================== */
.homeTwoCol {
    background-color: #fff;
    padding-bottom: 10rem;
    padding-top: 8rem;
}

.homeTwoCol__list {
    display: flex;
    gap: 4rem;
}

.homeTwoCol__item {
    flex: 1;
}

.homeTwoCol__item a {
    background-color: var(--primary);
    border-radius: 2rem;
    display: block;
    overflow: hidden;
    transition: opacity var(--transition);
}

.homeTwoCol__item a:hover {
    opacity: 0.85;
}

.homeTwoCol__head {
    display: block;
    min-height: 20.4rem;
    padding: 3rem 4rem;
    position: relative;
}

.homeTwoCol__title {
    color: #fff;
    display: block;
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 3.2rem;
}

.homeTwoCol__desc {
    color: #fff;
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 2.9rem;
    margin-top: 2rem;
    max-width: 34rem;
}

.homeTwoCol__arrow,
.homeInfo__bandArrow {
    background-color: #fff;
    border-radius: 50%;
    height: 4.8rem;
    position: absolute;
    width: 4.8rem;
}

.homeTwoCol__arrow {
    right: 4rem;
    top: 5rem;
}

.homeTwoCol__arrow::after,
.homeInfo__bandArrow::after {
    background-color: var(--primary);
    content: "";
    height: 1.2rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.82rem;
    -webkit-mask-image: url(../img/common/icon-arrow-circle.svg);
            mask-image: url(../img/common/icon-arrow-circle.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.homeTwoCol__photo {
    display: block;
    line-height: 0;
    position: relative;
}

.homeTwoCol__badge {
    bottom: 1.3rem;
    left: 2.1rem;
    position: absolute;
    width: 12.8rem;
}

/* ==================================================================
 * TOP: 公開情報・コンプライアンス
 * Figma: 背景写真=4008:637(1440×569) / 帯=4008:669(紺)・4055:3477(赤)
 * ================================================================== */
.homeInfo {
    background-image: url(../img/home/sec-bnr-bg.jpg);
    background-position: center;
    background-size: cover;
    padding-bottom: 9rem;
    padding-top: 7rem;
}

.homeInfo__inner {
    display: flex;
    gap: 4rem;
    justify-content: space-between;
}

.homeInfo__text {
    flex-shrink: 0;
    width: 46rem;
}

.homeInfo__heading {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* 花の装飾は既存SVGをマスクにして色を指定する（赤版の画像は不要）。 */
.homeInfo__deco {
    background-color: var(--accent);
    display: block;
    height: 6rem;
    width: 9.2rem;
    -webkit-mask-image: url(../img/common/deco-flower.svg);
            mask-image: url(../img/common/deco-flower.svg);
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.homeInfo__heading > span:last-child {
    color: var(--accent);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
}

.homeInfo__desc {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 3.2rem;
}

.homeInfo__bands {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.1rem;
    width: 63.1rem;
}

.homeInfo__band a {
    background-position: center;
    background-size: cover;
    border-radius: 1rem;
    display: block;
    height: 20rem;
    position: relative;
    transition: opacity var(--transition);
}

.homeInfo__band a:hover {
    opacity: 0.85;
}

.homeInfo__band:first-child a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.homeInfo__band:last-child a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.homeInfo__bandTitle {
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    left: 4rem;
    letter-spacing: 0.08em;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.homeInfo__bandArrow {
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
}

.homeInfo__band:last-child .homeInfo__bandArrow::after {
    background-color: var(--accent);
}

@media screen and (max-width: 767px) {
    .homeTwoCol {
        padding-bottom: 10vw;
        padding-top: 10vw;
    }

    .homeTwoCol__list {
        flex-direction: column;
        gap: 6vw;
    }

    .homeTwoCol__head {
        min-height: 0;
        padding: 5vw;
    }

    .homeTwoCol__title {
        font-size: 5.6vw;
        line-height: 1.2;
    }

    .homeTwoCol__desc {
        font-size: 3.6vw;
        line-height: 1.8;
        margin-top: 3vw;
        max-width: 70%;
    }

    .homeTwoCol__arrow {
        height: 8vw;
        right: 5vw;
        top: 6vw;
        width: 8vw;
    }

    .homeTwoCol__arrow::after,
    .homeInfo__bandArrow::after {
        height: 2.6vw;
        width: 1.8vw;
    }

    .homeInfo {
        padding-bottom: 10vw;
        padding-top: 10vw;
    }

    .homeInfo__inner {
        flex-direction: column;
        gap: 8vw;
    }

    .homeInfo__text,
    .homeInfo__bands {
        width: 100%;
    }

    .homeInfo__deco {
        height: 8vw;
        width: 12.3vw;
    }

    .homeInfo__heading {
        gap: 2vw;
        margin-bottom: 4vw;
    }

    .homeInfo__heading > span:last-child {
        font-size: 6.4vw;
        line-height: 1.3;
    }

    .homeInfo__desc {
        font-size: 3.6vw;
        line-height: 1.9;
    }

    .homeInfo__band a {
        height: 28vw;
    }

    .homeInfo__bandTitle {
        font-size: 5vw;
        left: 5vw;
    }

    .homeInfo__bandArrow {
        height: 8vw;
        right: 4vw;
        width: 8vw;
    }
}

/* --- FV: SP ---
   デザインは PC(1440px)のみのため、すべて vw で比例縮小させる。 */
@media screen and (max-width: 767px) {
    .fv {
        border-bottom-left-radius: 4rem;
        height: auto;
        min-height: 100vw;
    }

    /* 上の padding は固定ヘッダー（15vw）の分。TOPは body.home で .wrap の
       padding-top を打ち消しているため、ここで空けないと組織名バーが
       ヘッダーの下に潜り込む。 */
    .fv__body {
        min-height: 100vw;
        padding: 20vw 5vw 5vw;
    }

    .fv__org {
        font-size: 3.6vw;
        height: auto;
        left: auto;
        padding: 1.6vw 3vw;
        position: static;
        top: auto;
        width: fit-content;
    }

    .fv__catch {
        left: auto;
        margin-top: 3vw;
        position: static;
        top: auto;
    }

    .fv__catchRow {
        line-height: 1.35;
    }

    .fv__lg {
        font-size: 8.2vw;
    }

    .fv__md {
        font-size: 7.4vw;
    }

    .fv__sm {
        font-size: 6.2vw;
    }

    .fv__ex {
        font-size: 7.6vw;
    }

    .fv__badge {
        gap: 1.4vw;
        left: auto;
        margin-top: 5vw;
        padding: 2vw 2vw 2vw 15vw;
        position: relative;
        top: auto;
        width: fit-content;
    }

    .fv__map {
        left: -2vw;
        width: 16vw;
    }

    .fv__points {
        gap: 1.4vw;
    }

    .fv__points li {
        font-size: 3.2vw;
        line-height: 1.35;
        padding: 1.6vw 1.8vw;
    }
}

/* ==================================================================
 * 会員限定コンテンツのパスワード画面
 * ================================================================== */
.memberGate {
    padding: 8rem 2.4rem 12rem;
}

.memberGate__box {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 2rem;
    margin: 0 auto;
    max-width: 62rem;
    padding: 6rem 5rem;
    text-align: center;
}

.memberGate__icon {
    background-color: var(--primary);
    display: block;
    height: 5rem;
    margin: 0 auto 2.5rem;
    width: 2.74rem;
    -webkit-mask-image: url(../img/common/icon-lock.svg);
            mask-image: url(../img/common/icon-lock.svg);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.memberGate__title {
    color: var(--primary);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
}

.memberGate__lead {
    line-height: 2;
    margin-bottom: 3rem;
}

.memberGate__error {
    background-color: #fdecee;
    border-radius: 0.6rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 2rem;
    padding: 1.2rem;
}

.memberGate__form {
    margin: 0 auto 3rem;
    max-width: 36rem;
    text-align: left;
}

.memberGate__label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.memberGate__input {
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1.2rem;
    width: 100%;
}

.memberGate__input:focus {
    border-color: var(--primary);
}

.memberGate__submit {
    background-color: var(--primary);
    background-image: linear-gradient(to right, #fff 50%, transparent 50%);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    border: 2px solid var(--primary);
    border-radius: 0.6rem;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    margin-top: 2rem;
    padding: 1.2rem;
    transition: background-position 0.3s ease, color 0.3s ease;
    width: 100%;
}

.memberGate__submit:hover {
    background-position: 0 0;
    color: var(--primary);
}

.memberGate__note {
    font-size: 1.4rem;
    line-height: 1.9;
    margin-bottom: 3rem;
}

.memberGate__back {
    color: var(--primary);
    display: inline-block;
    font-weight: 700;
    text-decoration: underline;
}

.memberGate__links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0 auto 3rem;
    max-width: 36rem;
}

.memberGate__links a {
    background-color: var(--primary);
    border-radius: 0.6rem;
    color: #fff;
    font-weight: 700;
    padding: 1.4rem;
    transition: opacity var(--transition);
}

.memberGate__links a:hover {
    opacity: 0.85;
}

/* 固定ヘッダーの分だけアンカーの着地位置を下げる（フッターCTAへの #contact など）。 */
:target {
    scroll-margin-top: 13rem;
}

@media screen and (max-width: 767px) {
    :target {
        scroll-margin-top: 18vw;
    }
}

@media screen and (max-width: 767px) {
    .memberGate {
        padding: 8vw 5vw 14vw;
    }

    .memberGate__box {
        padding: 8vw 5vw;
    }

    .memberGate__title {
        font-size: 5vw;
    }
}

/* ==================================================================
 * 404 / 土台確認用
 * ================================================================== */
.error404 {
    padding: 8rem 2.4rem;
    text-align: center;
}

.error404__title {
    color: var(--primary);
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.error404__text {
    line-height: 2;
    margin-bottom: 4rem;
}

.error404__back {
    background-color: var(--primary);
    background-image: linear-gradient(to right, #fff 50%, transparent 50%);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    border: 2px solid var(--primary);
    border-radius: 0.6rem;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 1.2rem 3rem;
    transition: background-position 0.3s ease, color 0.3s ease;
}

.error404__back:hover {
    background-position: 0 0;
    color: var(--primary);
}

.memberGate__links a {
    background-image: linear-gradient(to right, #fff 50%, transparent 50%);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    border: 2px solid var(--primary);
    transition: background-position 0.3s ease, color 0.3s ease;
}

.memberGate__links a:hover {
    background-position: 0 0;
    color: var(--primary);
    opacity: 1;
}

.buildNote {
    background-color: var(--bnr-bg);
    border-radius: 0.6rem;
    line-height: 2;
    margin: 6rem 0;
    padding: 3rem;
}