@charset "UTF-8";
/* ==========================================================
   YADOKARI LP デザインシステム（lp-ds.css）
   ・見本：claude.ai の「YADOKARI デザインエレメント」（2026-10-18 決定）
   ・各LPの style.css の「あと」に読み込み、LPごとにバラバラだった部品の見た目をそろえる
   ・ヒーロー（ページ最上部）は対象外。各LPのデザインのまま
   ・値は tokens.css の変数を使う
========================================================== */

/* ---------- セクションの余白と背景 ----------
   左右 SP20／768px〜40／960px〜40〜72px、上下 SP72／768px〜96／960px〜96〜128px
   背景は白が基本。区切る所だけ薄いグレー（--paper）。黒は申込の帯と最終CTAだけ */
:root { --gutter: 20px; --sec-y: 72px; }
@media (min-width: 768px) { :root { --gutter: 40px; --sec-y: 96px; } }
@media (min-width: 960px) { :root { --gutter: clamp(40px, 5vw, 72px); --sec-y: clamp(96px, 9vw, 128px); } }
.sec--gray { background: var(--paper); }

/* ---------- 見出しのサイズ（H2 24〜40px／H3 20〜28px）。セクションごとに小さくする指定もそろえる ---------- */
.h2, #flow .h2, #faq .h2, #info .h2, .closing__ttl { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.4; letter-spacing: var(--ls-head); }
.card__ttl, .case__ttl, .sub-cta__ttl { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; letter-spacing: var(--ls-head); }
/* 流れ（ステップ）の見出し：PCで4〜7つ横に並び1つの幅が狭いので、小見出しより小さい16〜20px */
.steps__ttl { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; letter-spacing: var(--ls-head); }
/* オーナー募集の施設紹介：「施設サイトを見る」の下を少しあける */
.fac .tlink { margin-bottom: 16px; }

/* ---------- 英字の飾りラベル：見出しと同じ字間・グレー ---------- */
.num, .cap, .card .cap, .hero__en { font-family: var(--en); font-size: 13px; letter-spacing: var(--ls-head); } /* 英字ラベルは SP13px／PC14px */
@media (min-width: 960px) { .num, .cap, .card .cap, .hero__en { font-size: 14px; } }
.num, .sec--dark .num, .cap { color: var(--mute, #A0A0A0); } /* 英字ラベル（番号・線・英字）はどの背景でも薄いグレー（本文の補足 --sub より一段薄く） */
.num i, .sec--dark .num i { background: currentColor; opacity: 1; }

/* ---------- ボタン ----------
   ・色のある背景の上は白（右に黒丸＋白矢印）、背景なしの上は黒（右に白丸＋黒矢印）、枠線は矢印だけ
   ・丸の直径＝ボタンの高さ×0.6（60px→36px、48px→28px）。矢印は16px、丸は右端から10px
   ・文字は幅240px以上で中央（左右の余白を同じに）、240px未満になる所（2つ並び・追従CTA）は左寄せ
   ・ホバーは色の変化だけ。影・浮き上がりは付けない */
.btn--light, .btn--dark, .btn--outline, .btn--outline-light, .btn--line { padding: 0 60px 0 32px; } /* 右の丸の分（右端15＋丸30＋すき間15）だけ右を広く。丸を除いた所の真ん中に文字が来て、右に寄って見えない */
.btn--light .arr, .btn--dark .arr, .btn--outline .arr, .btn--outline-light .arr, .btn--line .arr { right: 15px; width: 30px; height: 30px; margin-top: -15px; padding: 7px; border-radius: 50%; stroke-width: 2; } /* 丸の直径＝ボタンの高さ×0.5（60px→30px）。右端からのすき間＝上下のすき間（丸がボタンの丸い端の真ん中に来る）。矢印は16pxのまま */
.btn--light .arr { background: var(--ink); color: var(--white); }
.btn--dark .arr { background: var(--white); color: var(--ink); }
.btn--outline .arr, .btn--outline-light .arr, .btn--line .arr { border-radius: 0; stroke-width: 2.6; } /* 白地に黒い線は細く見えるので太く */
@media (hover: hover) {
  .btn:hover { transform: none; box-shadow: none; }
  .btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn--outline-light:hover { box-shadow: inset 0 0 0 1.5px var(--white); }
  .btn--light:hover { background: var(--surface); }
  .btn--dark:hover { background: var(--text); }
}
/* 幅240px未満になる所（SPの2つ並び・資料ページのポッドキャスト欄）：左寄せ */
.closing .btns--row .btn { justify-content: flex-start; padding: 0 56px 0 20px; }
.pod__btn { justify-content: center; padding: 0 24px; } /* 左にアイコン・右に矢印なしのボタンは中央 */
.closing .btns--row .arr { right: 15px; width: 30px; height: 30px; margin-top: -15px; }
@media (min-width: 960px) { .closing .btns--row .btn { justify-content: center; padding: 0 60px 0 32px; } .closing .btns--row .arr { right: 15px; } }
/* 星川のアクセス欄：SPは縦に並べる（幅が十分あるので中央・通常の文字の大きさ・通常の高さ） */
@media (max-width: 959px) { .access__btns { grid-template-columns: minmax(0, 1fr); } }
.access__btns .btn { justify-content: center; min-height: 58px; padding: 0 60px 0 32px; font-size: 15.5px; letter-spacing: .06em; }
.access__btns .arr { right: 15px; width: 30px; height: 30px; margin-top: -15px; }
@media (min-width: 960px) { .access__btns .btn { min-height: 60px; font-size: 16px; } }

/* ---------- テキストリンク：太字・下線2px・右に矢印（外部サイトは #i-ext） ---------- */
.tlink, .case__more { font-size: 16px; font-weight: 700; gap: 12px; line-height: 1.9; min-height: 0; padding: 8px 0 6px; }
.tlink::after, .case__more::after { height: 2px; bottom: 0; }
.tlink, .pod__all { text-decoration: none; } /* 下線は ::after の1本だけ（LP側の文字の下線と二重にしない） */
.tlink .ic, .case__more .ic { width: 16px; height: 16px; stroke-width: 2; }
/* 小さいテキストリンク（14px・下線2px）：カードや施設紹介など、見出しの付いたまとまりの中で使う。強くしすぎない
   資料ページのカードの「資料をダウンロード」（.rc__go）も同じ形にする（下線は矢印まで） */
.tlink.tlink--sm, .rc__go, .res__go { position: relative; align-self: flex-start; justify-self: start; width: fit-content; display: inline-flex; align-items: center; min-height: 0; font-size: 14px; font-weight: 700; gap: 8px; padding: 6px 0 4px; line-height: 1.9; letter-spacing: var(--ls-small); text-decoration: none; }
.tlink.tlink--sm::after, .rc__go::after, .res__go::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
.tlink.tlink--sm .ic, .rc__go .ic, .res__go .ic { width: 14px; height: 14px; stroke-width: 2; }
.rc__go { margin-top: auto; }
/* 矢印を文字の中央にそろえる：行の箱の中央だと日本語の字面より約2px下に出るので、最後の行のベースライン（文字の下の線）を基準に置く（.ic-lbl と同じ考え方）。折り返したリンクでは矢印は最後の行の横 */
.tlink, .tlink.tlink--sm, .case__more, .rc__go, .res__go { align-items: baseline; align-items: last baseline; }
.tlink .ic, .case__more .ic { position: relative; top: calc(8px - .38em); }
.tlink.tlink--sm .ic, .rc__go .ic, .res__go .ic { position: relative; top: calc(7px - .38em); }
.also__links { gap: 4px; }

/* ---------- 本文の中のリンク：下線1px・文字と同じ色。ホバーで2px（文章 p と説明 dd の中だけ。メニューや目次のリストには当てない） ---------- */
p a:not([class]), dd a:not([class]), .qa__a a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: text-decoration-thickness .2s var(--ease); }
@media (hover: hover) { p a:not([class]):hover, dd a:not([class]):hover, .qa__a a:hover { opacity: 1; text-decoration-thickness: 2px; } }

/* ---------- ラベル（バッジ）：1pxの枠線・角丸2px・14px太字。下線・点滅する点は使わない ---------- */
.badge, .lbl { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: var(--text); font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: .04em; font-feature-settings: "palt" 1; } /* ラベル：枠なし・頭に短い線（英字ラベル「01 ——」と同じ考え方。2026-10-19 ユーザー選択 B） */
.badge::before, .lbl::before { content: ""; flex-shrink: 0; display: block; width: 20px; height: 1px; background: currentColor; }
.hero__body .badge, .closing .badge, .closing .badge--plain { height: auto; font-size: 13px; } /* 各LPの大きさ指定よりこちらを優先 */
@media (min-width: 960px) { .badge, .lbl, .hero__body .badge, .closing .badge, .closing .badge--plain { font-size: 14px; } }
.closing .badge, .closing .lbl, .sec--dark .badge, .sec--dark .lbl, .ds-dark .lbl, .hero__main .badge { color: var(--white); } /* 暗い背景（最終CTA・黒いセクション・オーナー募集のヒーロー）では白 */
.badge__dot { display: none; }
/* 条件・日程の並び（.tags）：枠付きラベルと重ならないよう、枠なし＋チェックマークで並べる。
   チェックマークは文字のベースライン基準で置く（行の箱の上からの距離だと、英字の書体の寸法が違う iPhone で下にずれる。.ic-lbl と同じ考え方） */
.tags { gap: 4px 20px; }
.tags li { display: flex; align-items: baseline; gap: 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.7; letter-spacing: var(--ls-small); }
.tags li::before { content: ""; flex: none; position: relative; top: calc(8px - .34em); width: 16px; height: 16px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 12.5l3.2 3.2L17 9%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 12.5l3.2 3.2L17 9%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat exclude, linear-gradient(#000 0 0); } /* 黒い丸の中にチェックを白く抜く（ボタンの「黒い丸＋矢印」と同じ形）。チェックは線2.4・端と角を丸く */
.closing .badge { align-self: center; color: var(--white); }
.tags li { font-feature-settings: "palt" 1; }
/* 「本文へ移動」のリンク（全 LP 必須）：ふだんは画面の外、キーボードで選んだときだけ左上に出す */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--white); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }
iframe:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* 地図などの埋め込みも、キーボードで選んだときに枠を出す */

/* ---------- 追従CTA：ボタンは他と同じ黒・枠線（高さ48px・丸28px・左寄せ） ---------- */
.fbar .btn, .fixcta .btn { min-height: 48px; justify-content: flex-start; padding: 0 48px 0 20px; font-size: 14px; letter-spacing: var(--ls-small); }
.fbar .btn .arr, .fixcta .btn .arr { right: 12px; width: 24px; height: 24px; margin-top: -12px; padding: 4px; }
@media (min-width: 960px) { .fbar .btn, .fixcta .btn { font-size: 15px; } }
/* オーナー募集の .fixcta はリンクの見た目を直接決めているので、ボタンの見た目に戻す */
.fixcta a.btn { height: auto; border: 0; border-radius: 999px; font-weight: 700; }
.fixcta a.btn::after { content: none; }
.fixcta a.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fixcta a.btn--dark { background: var(--ink); color: var(--white); }
/* オーナー募集の2つ並びは文字が長く丸が入らないので、矢印なし・中央（show-2026 の3つ並びと同じ扱い） */
.fixcta .btn { justify-content: center; padding: 0 12px; }
.fixcta .btn .arr { display: none; }
/* show-2026 の3つ並び（.fbar__btn）は狭いので矢印なし。高さと枠線の太さだけほかのボタンにそろえる */
.fbar__btn { min-height: 48px; letter-spacing: var(--ls-small); }
.fbar__btn--line { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- 表・比較表 ---------- */
.table-wrap, .ctable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table, .ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.6; letter-spacing: var(--ls-small); }
.table th, .table td, .ctable th, .ctable td { padding: 16px 12px; vertical-align: middle; border-bottom: 1px solid var(--line); word-break: auto-phrase; }
.table thead th, .ctable thead th { padding-top: 0; padding-bottom: 12px; border-bottom-color: var(--ink); color: var(--sub); font-size: 13px; font-weight: 700; text-align: left; vertical-align: bottom; }
.table tbody th { font-weight: 700; text-align: left; color: var(--ink); }
.table th, .table td { white-space: nowrap; }
.table .is-text { white-space: normal; min-width: 12em; }
.table .num-r { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody:has(tr:nth-child(3)) tr:nth-child(even) > * { background: var(--paper); }
.table sup, .ctable sup { font-size: 12px; line-height: 0; vertical-align: .5em; margin-left: 1px; }
.ctable { table-layout: fixed; min-width: 560px; }
.ctable th:first-child { padding-left: 0; }
.ctable thead th:first-child, .ctable tbody th { width: 96px; position: sticky; left: 0; z-index: 1; background: var(--white); }
.ctable th[scope="row"]::after, .ctable thead th:first-child::after { display: none; }
.ctable tbody th { font-weight: 700; color: var(--ink); text-align: left; }
.ctable thead th:not(:first-child), .ctable td { text-align: center; }
.ctable thead th.is-own { padding-top: 12px; background: var(--ink); color: var(--white); border-radius: var(--r) var(--r) 0 0; }
.ctable td.is-own, .ctable tbody td.is-own { background: var(--paper); color: var(--ink); font-weight: 700; }
.ctable .mk { display: block; margin: 0 auto 4px; font-size: 20px; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
/* × はフォントで小さく太く見えるので、文字は透明にして細い線2本で描く */
.ctable .mk--x { position: relative; -webkit-text-fill-color: transparent; }
.ctable .mk--x::before, .ctable .mk--x::after { content: ""; position: absolute; left: 50%; top: 50%; width: .95em; height: max(1px, .055em); background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ctable .mk--x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ctable-hint { margin-top: 12px; font-size: 12px; color: var(--sub); text-align: right; }
/* オーナー募集の比較表はSPで画面の端まで広がるので、左端の項目名に左右の余白を足す */
@media (max-width: 767px) { .compare .ctable thead th:first-child, .compare .ctable tbody th { width: calc(96px + var(--gutter)); padding-left: var(--gutter); } .compare .ctable td:last-child, .compare .ctable th:last-child { padding-right: var(--gutter); } }
@media (min-width: 768px) {
  .table, .ctable { font-size: 16px; }
  .table th, .table td, .ctable th, .ctable td { padding: 20px 16px; }
  .table thead th, .ctable thead th { font-size: 14px; padding-bottom: 14px; }
  .ctable { min-width: 0; }
  .ctable thead th:first-child, .ctable tbody th { width: 22%; position: static; }
  .ctable thead th.is-own { padding-top: 14px; }
  .ctable .mk { font-size: 24px; }
  .ctable-hint { display: none; }
}

/* ---------- 注記・数字の強調 ---------- */
.notes { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.7; color: var(--sub); letter-spacing: var(--ls-small); }
/* 大きな数字は Inter（Helvetica Neue の数字は幅が固定で「7」の右が空くため）＋字形に合わせた幅＋自動カーニング */
.kpi dd:not(.kpi__sub), .hero__price-num, .hero__stat > dd:not(.hero__stat-sub):not(.hero__note) { font-family: "Inter", sans-serif; font-variant-numeric: proportional-nums; font-kerning: normal; font-feature-settings: "palt" 1, "kern" 1; letter-spacing: var(--ls-head); }
.hero__price-num em { font-family: var(--font); } /* 数字の横の日本語は日本語フォントのまま */
/* 項目番号（01・02…）：Inter 太字・SP28〜PC40px・字間は見出しと同じ。どのLPも同じ形（細字・小さい字・広い字間は使わない）
   オーナー募集 .col__no／show-2026 .why__num・.cycle__num。色は英字の飾りラベル（.num）と同じグレー --mute（#A0A0A0）にそろえる */
.col__no, .why__num, .cycle__num { font-family: "Inter", sans-serif; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1; letter-spacing: var(--ls-head); font-variant-numeric: proportional-nums; font-kerning: normal; }
.col__no, .why__num, .cycle__num { color: var(--mute); }

/* ---------- 事例カード：白地に細い線（グレー面の上では線なし） ---------- */
.case { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.sec--gray .case { box-shadow: none; }

/* ---------- パンくず：区切りは短い横線。リンクはグレー・下線なし、今いるページは黒の太字。1行のまま途中を縮める ---------- */
.crumb { display: flex; align-items: center; gap: 0 12px; margin-top: 0; padding: 0; list-style: none; white-space: nowrap; font-size: 12px; letter-spacing: var(--ls-small); color: var(--sub); }
.crumb li { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 0; }
.crumb li:last-child { flex-shrink: 0; }
.crumb li + li::before { content: ""; flex-shrink: 0; width: 16px; height: 1px; background: currentColor; opacity: .35; }
.crumb li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; transition: color .2s var(--ease); }
@media (hover: hover) { .crumb li a:hover { opacity: 1; color: var(--ink); } }
.crumb [aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- フッター（lp-footer.css の調整。仮設住宅LPはこのファイルを読まないので影響なし） ---------- */
.gf { letter-spacing: var(--ls-small); }
.gf__label { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-small); } /* 「トレーラーハウスのご案内」：10px 太字（2026-10-20） */
/* フッターの並べ方
   SP：線はロゴの下と最後の2本だけ。まとまり（住所・LPの案内・サイト内リンク）の間は32pxでそろえる
       住所は1行ずつ改行（行の間隔24px）、リンクは1行32px（押せる大きさの目安24px以上）
       LPの案内は名前が長いので1列、サイト内リンクは2列。今いるページは太字
   PC：横に並べる */
.gf__label { width: 100%; margin: 0 0 4px; }
.gf .gf__place a { text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }
@media (max-width: 959px) {
  .gf .gf__place { padding-top: 24px; font-size: 13px; line-height: 1.85; color: var(--sub); }
  .gf__place > * { display: block; }
  .gf__place > span:first-child { color: var(--text); }
  .gf__lps, .gf__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-top: 32px; }
  .gf__lps { grid-template-columns: minmax(0, 1fr); } /* LPの名前は長いので1列 */
  .gf__lps .gf__label { grid-column: 1 / -1; }
  .gf__label { margin-bottom: 4px; }
  .gf__lps a, .gf__nav a { min-height: 32px; font-size: 13px; line-height: 1.5; }
  .gf__lps a[aria-current] { text-decoration: none; }
  .gf__lps + .gf__nav { padding-top: 24px; } /* 行の中にも余白があるので、見た目で32px相当 */
}
@media (min-width: 960px) {
  .gf__lps, .gf__nav { gap: 0 32px; padding-top: 20px; }
  .gf__lps a, .gf__nav a { min-height: 36px; }
}
/* 取引先ロゴ（オーナー募集 .clients__logos）：細い線で区切った白いマス。高さはロゴごとに --hs（SP）／--h（PC）
   計算：高さ = 基準（SP26px／PC34px）×（4.44 ÷ そのロゴの横÷縦）^0.45 */
.clients__logos { gap: 1px; margin-top: 16px; background: var(--line); box-shadow: 0 0 0 1px var(--line); border-radius: var(--r); overflow: hidden; }
.clients__logos li { height: auto; min-height: 88px; padding: 16px; border: 0; border-radius: 0; background: var(--white); }
.clients__logos img { height: var(--hs); max-width: 100%; }
@media (min-width: 768px) { .clients__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .clients__logos img { height: var(--h); } }
@media (min-width: 768px) { .clients__logos { gap: 1px; } .clients__logos li { min-height: 112px; } }
.gf__bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.gf__bottom a, .gf__bottom p a:not([class]) { text-decoration: none; color: var(--sub); } /* 本文リンクの下線より優先 */
@media (hover: hover) { .gf__bottom a:hover, .gf__bottom p a:not([class]):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.gf__legal { gap: 0 24px; }
.gf__copy { font-family: inherit; letter-spacing: var(--ls-small); color: var(--sub); }
@media (min-width: 960px) { .gf__legal { gap: 0 32px; } .gf__place > span:nth-of-type(3)::before { content: "｜"; } } /* PC：アクセスと営業日を1行に */
@media (max-width: 959px) { .gf__bottom { margin-top: 32px; padding-top: 24px; } }

/* 見出しの横に並べるサブCTA（星川 .sub-cta）：ボタン3つが横に入りきらず段落ちするので、見出しを上・ボタンを下の1列に。左右の余白は丸の分だけ */
.sub-cta { flex-direction: column; align-items: flex-start; }
.sub-cta .btn { padding: 0 60px 0 32px; }
@media (max-width: 767px) { .sub-cta { align-items: stretch; } }
/* 中くらいのボタン（.btn--md・高さ48px。「詳細を見る」など短い文字・カードの中）：丸は直径24px（高さ×0.5）。大＝60px／丸30px、小＝.btn--sm 44px／丸22px */
.btn--md { min-height: 48px; height: auto; padding: 0 48px 0 24px; font-size: 15px; }
.btn--md .arr { position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; margin: -12px 0 0; padding: 4px; }
/* 小さいボタン（.btn--sm・高さ44px。show-2026 の上のバーなど）：丸は直径22px（高さ×0.5）で上下の真ん中に。左右の余白をそろえる */
.btn--sm { min-height: 44px; height: auto; padding: 0 44px 0 20px; font-size: 14px; }
.btn--sm .arr { position: absolute; top: 50%; right: 11px; width: 22px; height: 22px; margin: -11px 0 0; padding: 4px; }

/* 場所の札（.place）：左に英字の地名の小さな枠、名前、状態（グレー）。ヒーローと最終CTAに置く（2026-10-19 ユーザー指定）
   .badge の位置・余白の指定はそのまま使い、見た目だけ上書きする */
.badge.place { flex-wrap: wrap; gap: 6px 10px; color: var(--ink); font-size: inherit; letter-spacing: 0; }
.badge.place::before { content: none; }
.place__tag { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 4px; font-family: var(--en); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.place__name { font-size: 15px; line-height: 1.4; letter-spacing: var(--ls-head); }
.place__status { font-size: 13px; line-height: 1.4; color: var(--sub); letter-spacing: var(--ls-small); }
@media (min-width: 960px) { .place__name { font-size: 16px; } .place__status { font-size: 14px; } }
.closing .badge.place, .hero__main .badge.place { color: var(--white); }
.closing .place__tag, .hero__main .place__tag { border-color: rgba(255, 255, 255, .3); }
.closing .place__status, .hero__main .place__status { color: var(--mute, #A0A0A0); }
.closing .badge.place { justify-content: center; }

/* ヘッダーの高さとロゴの大きさを LP 4本でそろえる：SP 60px／ロゴ22px、PC 80px／ロゴ28px（星川に合わせる） */
.gh__logo img { height: 22px; }
@media (min-width: 960px) { .gh { height: 80px; box-sizing: border-box; } .gh__logo img { height: 28px; } }

/* 狭いスマホでボタンがはみ出さないように（2つ並び・追従CTA・Spotify）。これより広い画面は変えない */
@media (max-width: 389px) { .closing .btns--row { grid-template-columns: minmax(0, 1fr); } } /* 星川の最終CTA：縦に並べる */
@media (max-width: 374px) {
  .fixcta .btn { min-width: 0; white-space: normal; font-size: 13px; letter-spacing: 0; line-height: 1.3; } /* オーナー募集の追従CTA：入らなければ2行 */
  .pod__show { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } /* お役立ち資料：横の絵を少し小さく */
  .pod__btn { padding: 0 16px; }
}

/* 幅が短いボタン（.btn--fit：文字の長さに合わせ、横に伸ばさない）。大＝60px・丸30（今の大と同じ）／中 .btn--m＝40px・丸20（大の約2/3）／小 .btn--s＝32px・丸なし
   丸の決まりは大・中・小と同じ（直径＝高さ×0.5、右のすき間＝上下のすき間、右の余白＝高さ）。矢印は16px */
.btn--fit { align-self: flex-start; width: auto; max-width: 100%; }
.btn--fit.btn--m { min-height: 40px; height: auto; padding: 0 40px 0 20px; font-size: 14px; }
.btn--fit.btn--m .arr { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin: -10px 0 0; padding: 2px; }
.btn--fit.btn--s { min-height: 32px; height: auto; padding: 0 16px; font-size: 13px; }
.btn--fit.btn--s .arr { display: none; }

/* 2つ並び（.btns--2）：同じ重さの2択を同じ幅で横に並べる。高さはボタンの大きさのまま。狭いスマホ（〜389px）は縦に並べる */
.btns--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 389px) { .btns--2 { grid-template-columns: minmax(0, 1fr); } }
/* 安全策：幅374px以下では、入りきらないときだけボタンの文字を折り返す（入るボタンは1行のまま） */
@media (max-width: 374px) { .btn { white-space: normal; } }

/* カードの英字ラベル「01 / VIEWING」：番号と英字の間は斜線（見出しの英字ラベルの横線とは使い分ける） */
.cap__no::after { content: ""; display: inline-block; width: 1px; height: 1em; margin: 0 .75em; vertical-align: -.15em; background: currentColor; transform: rotate(20deg); } /* 斜線は文字ではなく 1px の線（見出しの横線と同じ細さ） */
/* 白いロゴ：反転だけだとロゴの焦げ茶 #231815 が青みのグレーになるので、いったん黒にしてから反転して純白に */
.inv { filter: brightness(0) invert(1); }

/* アイコン付きの項目名・見出し（.ic-lbl）：文字の頭に 18px の線のアイコンを添える（案内表の項目名・注意点の見出しなど）
   1行目のベースライン（文字の下の線）を基準に、日本語の字面の中央にアイコンの中央をそろえる。行の高さに頼らないので、ブラウザが変わってもずれない */
.ic-lbl { display: flex; align-items: baseline; gap: 8px; }
.ic-lbl > .ic { position: relative; top: calc(9px - .38em); width: 18px; height: 18px; stroke-width: 1.6; }
@media (max-width: 374px) { .ic-lbl { gap: 6px; } .spec dt.ic-lbl { padding-right: 16px; } } /* 狭いスマホでは右の値の幅を残す */