@charset "UTF-8";

/* =========================================================
   おせっかいメディア（media.osekkai-rooms.jp）

   **このサイトだけ、他の3サイト（home / gate / business）と骨格が違う。**
   読み物なので、業務システム的なきっちりしたUIではなく「雑誌の誌面」に寄せてある。
   具体的には、オフホワイトの紙・黒に近い文字・巨大な英字見出し・横スクロールの記事列。

   ただし **色はロゴの紺のまま**（--navy）。4サイトを並べたときに同じ会社のものだと
   分かるようにするためで、ここを変えると玄関ページからの並びが崩れる。
   紺は「使う面積をうんと減らす」方針で、静けさは色ではなく余白と書体で作る。

   書体は Figma に合わせて Gen Interface JP。TOPのキャッチなど一部だけ Zen Kaku Gothic New（--ff-zen）。
   ========================================================= */

/* =========================================================
   variables
   ========================================================= */
:root{
  /* 紙。真っ白ではなくわずかに沈ませる。写真と白いカードを浮かせるための下地 */
  --paper:#F6F6F6;
  --card:#FFFFFF;
  /* 文字。真っ黒（#000）は誌面で重すぎるので少し起こす */
  --ink:#151515;
  --ink-2:#3A3A3A;
  --gray:#767676;
  --gray-light:#A5A5A5;
  --line:#DEDEDE;
  --line-soft:#E7E7E4;
  /* ロゴの紺。居住用サイト（apps/home の --c-navy）と同じ色。使うのはごく狭い面積だけ */
  --navy:#2C537E;
  --navy-deep:#1F3C5C;
  --navy-tint:#EDF1F6;
  /* フッターの地色。黒ではなく温かみのある濃灰にして、紙の白とぶつけない */
  --dark:#2E2E2C;
  --ff-jp:"Gen Interface JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  /* 英字も Gen Interface JP（Figma のとおり）。英字だけ書体を変えたくなったらここを替える */
  --ff-en:var(--ff-jp);
  /* Figma で Zen Kaku Gothic New が指定されている所だけに使う（TOPのキャッチ・背景の英字） */
  --ff-zen:"Zen Kaku Gothic New",var(--ff-jp);
  /* 画面端の余白 */
  --gutter:32px;
  /* 左のサイドバーの幅（Figma の左メニューと同じ） */
  --sbar-w:253px;

  /* ---- ここから Figma「メディアサイト／TOP」で使っている色 ---- */
  /* 文字の黒。TOP・サイドバー・カード・フッターはこの色 */
  --ink-top:#27272A;
  /* キャッチの「おせっかい」と英字の頭文字の青 */
  --blue-catch:#27599A;
  /* 店舗・事務所の緑（見出し・ボタン） */
  --green:#176B5B;
  /* サイドバーの区切り線・本文との仕切り線 */
  --line-sbar:#D9DFE7;
  /* LINE の公式色 */
  --line-green:#06C755;
  /* タグの帯の枠線 */
  --tag-blue:#0061AA;
  /* フッター・タグの地色 */
  --beige:#F7F6F2;
  /* おせっかい度のメーター（住まい＝青、店舗・事務所＝緑） */
  --osk-living:#1049C7;
  --osk-living-bg:#D0DDFF;
  --osk-business:#25B06C;
  --osk-business-bg:#C0E5BB;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
/* 画面には出さず、読み上げにだけ伝える文字 */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-jp);color:var(--ink);background:var(--paper);
  font-size:15px;line-height:1.9;letter-spacing:.02em;font-weight:500;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.en{font-family:var(--ff-en)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 画面いっぱいは高さで指定しない（ブラウザのズーム設定で vh が狂うため min-h を使う方針） */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
@media(max-width:767px){
  :root{--gutter:20px}
}

/* =========================================================
   letter-spacing ルール（4段階。新規要素も必ずこれに従う）
   ① 2%  … 数字とその単位／記事本文
   ② 4%  … 補足テキスト（日付・注記など12〜15px程度）
   ③ 8%  … 基本UI・見出し（ナビ・ボタン・タグ・日本語見出し）※迷ったらこれ
   ④ 16〜20% … 強調ラベル（英字キャプション・巨大見出しの添え字）
   ========================================================= */


/* =========================================================
   ヘッダー
   紙と同じ地色にして罫線を引かない。読んでいる最中に視界へ入れない作り
   ========================================================= */
.header{
  position:sticky;top:0;z-index:50;background:rgba(246,246,246,.6);backdrop-filter:blur(10px);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 var(--gutter);height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
/* 狭い画面の上の帯に置くPCと同じロゴ。マークと英字の比率は .sbar-logo（56px：18px）のまま縮める */
.header .logo{gap:12px}
.header .tlogo-mark{width:44px;height:44px}
.header .tlogo-word{font-size:14px}

.h-nav{display:flex;align-items:center;gap:30px}
.h-nav a{
  font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.14em;
  color:var(--ink);text-transform:uppercase;position:relative;padding:4px 0;
  transition:color .2s ease;
}
/* ホバーは薄くせず、サイドバーと同じく紺（#2C537E）に変える */
.h-nav a:hover{color:var(--navy)}
/* 現在地は下の小さな点で示す。下線や色替えより誌面を騒がせない */
.h-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--navy);
}
/*
  ハンバーガー（767px以下）。3本線 → 開くと×に変わる。
  メニューはヘッダーの下から画面の下端まで広がり、ふわっと出る（0.3秒）。中身はサイドバーと同じ部品。
*/
.h-burger{
  display:none;position:relative;width:44px;height:44px;margin-right:-10px;flex-shrink:0;
  background:none;border:0;cursor:pointer;
}
.h-burger span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:1px;background:var(--navy);
  transition:transform .3s ease,opacity .2s ease;
}
.h-burger span:nth-child(1){top:15px}
.h-burger span:nth-child(2){top:21px}
.h-burger span:nth-child(3){top:27px}
.h-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.h-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.h-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.h-menu{
  position:fixed;left:0;right:0;top:62px;bottom:0;z-index:45;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:24px;padding:8px var(--gutter) 40px;background:#F6F6F6;
  opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease;
}
.h-menu.is-open{opacity:1;transform:translateY(0)}
.h-menu[hidden]{display:none}
html.is-menu-open{overflow:hidden}
@media(min-width:768px){.h-menu{display:none}}
@media(max-width:767px){
  .header-inner{height:62px}
  .h-nav{display:none}
  .h-burger{display:block}
  .header .tlogo-mark{width:36px;height:36px}
  .header .tlogo-word{font-size:12px}
}

/* =========================================================
   ページの骨格（左のサイドバー＋本文）とサイドバー
   Figma「メディアサイト／TOP」の左メニュー。

   991px 以上では .shell を2列（サイドバー｜本文）にし、サイドバーは position:sticky で
   画面の上端に貼り付ける。TOPではメインビジュアル（hero スロット）が .shell より上にあるので、
   サイドバーはメインビジュアルの下から始まる。
   ⚠ 縦の仕切り線は本文（main）の左に引く。sticky のサイドバー側に引くと、
   線が画面の高さぶんしか伸びない。
   ⚠ 990px 以下ではサイドバーを隠し、上の帯（.header）に切り替える。
   ========================================================= */
.sbar{display:none}
@media(min-width:991px){
  .shell{display:grid;grid-template-columns:var(--sbar-w) minmax(0,1fr)}
  .shell > main{border-left:1px solid var(--line-sbar)}
  /* 広い画面では上の帯は出さない（メニューが二重になる） */
  .header{display:none}
  .sbar{
    display:flex;flex-direction:column;align-items:stretch;gap:26px;
    position:sticky;top:0;align-self:start;max-height:100vh;
    padding:44px 18px 36px;overflow-y:auto;overscroll-behavior:contain;
  }
  .sbar .sbar-logo{margin:0 auto}
}

/* ロゴ（サイドバー・メインビジュアル・フッターで共用）。四角のマークの右に英字2行 */
.tlogo-mark{
  position:relative;flex-shrink:0;width:56px;height:56px;border-radius:4px;overflow:hidden;
}
/* マークの画像は四辺に余白を含むので、Figma と同じく 116% に広げて余白を切り落とす */
.tlogo-mark img{position:absolute;left:-8%;top:-8.35%;width:116%;height:116%;max-width:none}
.tlogo-word{
  font-family:var(--ff-en);font-size:18px;font-weight:600;line-height:1.2;letter-spacing:.18em;
  color:var(--navy);white-space:nowrap;
}
.sbar-logo{display:flex;align-items:center;gap:16px;width:172px;height:56px}

.sbar-body{display:flex;flex-direction:column;gap:22px;width:100%}

/*
  分類の棚（2026-10-29 見本3）。TOP の2つの区画と同じ並びで、区分の見出しの下に分類を件数つきで並べる。
  いま読んでいる区分の棚だけ白い板に載せて浮かせ（.is-current）、もう片方は紙の上に置いたまま控えめにする。
  区切りは点線ではなく、板の有無と余白で付ける。
*/
.sbar-shelves{display:flex;flex-direction:column;gap:22px}
.sbar-shelf{display:flex;flex-direction:column;border-radius:16px;padding:14px 8px 8px}
.sbar-shelf.is-current{background:var(--card);box-shadow:0 10px 26px rgba(25,45,80,.08),0 1px 3px rgba(25,45,80,.05)}
.sbar-shelf--business.is-current{box-shadow:0 10px 26px rgba(23,107,91,.09),0 1px 3px rgba(23,107,91,.05)}
.sbar-shelf-hd{display:block;padding:0 10px 8px}
.sbar-shelf-en{display:block;font-family:var(--ff-zen);font-size:10px;font-weight:900;line-height:1;letter-spacing:.24em;color:var(--navy)}
.sbar-shelf--business .sbar-shelf-en{color:var(--green)}
.sbar-shelf-ttl{
  display:block;margin-top:6px;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.08em;color:var(--ink-top);
  transition:color .2s ease;
}
.sbar-shelf:not(.is-current) .sbar-shelf-ttl{color:var(--ink-2)}
.sbar-shelf-hd:hover .sbar-shelf-ttl{color:var(--navy)}
.sbar-shelf--business .sbar-shelf-hd:hover .sbar-shelf-ttl{color:var(--green)}
.sbar-cat{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;
  font-size:13.5px;font-weight:500;line-height:1.6;letter-spacing:.06em;color:var(--ink-2);
  transition:background-color .2s ease,color .2s ease;
}
.sbar-shelf:not(.is-current) .sbar-cat{color:var(--gray)}
/* ⚠ 上の「控えめな棚」の指定（.sbar-shelf:not(.is-current) .sbar-cat）に負けないよう、.sbar-shelf を前に付ける */
.sbar-shelf .sbar-cat:hover{background:#F2F4F7;color:var(--navy)}
.sbar-shelf--business .sbar-cat:hover{background:#EFF5F3;color:var(--green)}
.sbar-cat-n{
  flex-shrink:0;min-width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:0;color:var(--gray-light);
}
/* いま読んでいる分類。区分の色の淡い面を敷き、件数を色の丸に抜く（ホバーしても変えない） */
.sbar-shelf .sbar-cat.is-current{background:var(--navy-tint);color:var(--navy);font-weight:700}
.sbar-cat.is-current .sbar-cat-n{border-radius:999px;background:var(--navy);color:#fff}
.sbar-shelf--business .sbar-cat.is-current{background:#EDF7F2;color:var(--green)}
.sbar-shelf--business .sbar-cat.is-current .sbar-cat-n{background:var(--green)}

/* 同じ分類の、ほかの記事（記事ページだけ）。表紙は右側の絵が見えるように寄せて正方形に切る */
.sbar-next{padding:0 10px}
.sbar-next-ttl{margin-bottom:6px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.08em;color:var(--gray)}
.sbar-next-ttl b{font-weight:700;color:var(--navy)}
.sbar-next-item{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.sbar-next-item img{
  flex-shrink:0;width:56px;height:56px;border-radius:12px;object-fit:cover;object-position:96% 70%;
  box-shadow:0 3px 8px rgba(25,45,80,.10);
}
/* 専用サムネイル（写真が無い記事）は大事なものが中央にあるので、真ん中で切る */
.sbar-next-item img.is-fallback{object-position:center}
.sbar-next-item span{
  font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--ink-top);word-break:auto-phrase;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s ease;
}
.sbar-next-item:hover span{color:var(--navy)}

.sbar .sbar-btns{padding:0 2px}
.sbar .sbar-btn{padding:12px 0;font-size:13px}
.sbar-about{
  display:flex;align-items:center;gap:6px;padding:0 10px;
  font-size:12.5px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:var(--gray);transition:color .2s ease;
}
.sbar-about::after{content:"→";font-size:12px}
.sbar-about:hover{color:var(--navy)}

/*
  記事ページで右の列（.arail・1280px以上）が出ているときは、さがす2つ＋LINE相談を左から外す
  （右の列のバナーと同じ行き先が二重になるため）。右の列が無いページ・幅ではそのまま出す。
*/
@media(min-width:1280px){
  body:has(.arail) .sbar .sbar-btns{display:none}
}
/*
  ほかの記事があるサイドバーが画面の高さに収まらない幅・高さでは、読んでいない区分の棚を見出しだけにし、
  ほかの記事を2本にする（1100px前後のPC・高さの低いノートPC）。
*/
@media(max-width:1279px),(max-height:879px){
  .sbar--has-next .sbar-shelf:not(.is-current) .sbar-cat{display:none}
  .sbar--has-next .sbar-shelf:not(.is-current){padding-bottom:6px}
  .sbar--has-next .sbar-next-item:nth-of-type(n+3){display:none}
}

/*
  スマホのグロナビ（2026-10-29 古舘さん「スマホのグロナビをもっとリッチに」→ 案A〜D・SiteHeader.astro）
  - 分類のタブ（.h-tabs）… 帯のすぐ下の横1列。指で横に送る。区分の頭に色の札、いま読んでいる分類に区分の色。
    帯と違って貼り付かない（読んでいる間ずっと画面を狭くしないため）。右端は薄く消して「まだ続く」と見せる
  - メニュー（.h-menu）… 分類の棚 → さがす2つ（小さい絵入りバナーを横に2枚）→ LINE → 新しい記事 → 会社
*/
.h-tabs{display:none}
@media(max-width:990px){
  .h-tabs{
    display:block;position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  }
  .h-tabs::-webkit-scrollbar{display:none}
  .h-tabs-track{display:flex;align-items:center;gap:8px;width:max-content;padding:6px 40px 14px var(--gutter)}
  .h-tab-head,.h-tab{
    display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
    font-size:13px;line-height:1.4;letter-spacing:.06em;white-space:nowrap;transition:background-color .2s ease,color .2s ease;
  }
  .h-tab-head{font-weight:700;color:#fff}
  .h-tab-head img{width:15px;height:15px;filter:brightness(0) invert(1)}
  .h-tab-head--living{background:var(--navy)}
  /* 区分の変わり目は少し空けて、どこからが店舗・事務所かを分かるようにする */
  .h-tab-head--business{margin-left:10px;background:var(--green)}
  .h-tab{
    background:var(--card);font-weight:500;color:var(--ink-2);
    box-shadow:0 1px 3px rgba(25,45,80,.06),0 0 0 1px rgba(25,45,80,.06);
  }
  .h-tab--living.is-current{background:var(--navy-tint);color:var(--navy);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--navy)}
  .h-tab--business.is-current{background:#EDF7F2;color:var(--green);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--green)}
}
/* 中身が画面より長いときも、縦に縮めずにメニューの中でスクロールさせる */
.h-menu > *{flex-shrink:0}
.h-menu .sbar-shelves{gap:16px}
.h-menu-bns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h-menu .sbar-next,.h-menu .sbar-about{padding:0 4px}

/* 物件さがし2つ＋LINE相談。面の色で行き先（住まい＝紺／店舗＝緑／LINE＝枠線）を分ける */
.sbar-btns{display:flex;flex-direction:column;gap:8px}
/*
  ホバーしたとき：住まい → #0061AA、店舗・事務所 → #2EA36A に面の色が変わる。
  LINE相談は反転する（緑の面に白い文字、ロゴは白い吹き出しに緑の文字）。
*/
.sbar-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0;border-radius:8px;
  font-size:14px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:#fff;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}
/* 矢印アイコンは 20px の枠の中に描かれている（Figma の arrow 2）。枠ごと再現する */
.sbar-btn img{width:20px;height:20px;padding:2.17px 2.43px 2.18px 2.41px}
.sbar-btn--living{background:var(--navy)}
.sbar-btn--living:hover{background:#0061AA}
.sbar-btn--business{background:var(--green)}
.sbar-btn--business:hover{background:#2EA36A}
/*
  LINE相談の反転。背景の緑だけを0.3秒かけてふわっと付け、文字とロゴの色は
  背景が半分ほど色づいたところ（0.15秒後）で一度に入れ替える。
  ⚠ 文字・ロゴの色まで時間をかけて変えないこと。緑と白を「お互いに入れ替える」ので、
  途中で背景・文字・ロゴが同じ淡い緑になり、中身が一瞬消えてチラついて見える（実際にそうなった）。
*/
.sbar-btn--line{
  border:1px solid var(--line-green);color:var(--line-green);
  transition:background-color .3s ease,color 0s linear .15s;
}
.sbar-btn--line:hover{background:var(--line-green);color:#fff}
.line-logo{display:block;width:20px;height:20px;flex-shrink:0}
.line-logo-bubble,.line-logo-letter{transition:fill 0s linear .15s}
.line-logo-bubble{fill:var(--line-green)}
.line-logo-letter{fill:#fff}
.sbar-btn--line:hover .line-logo-bubble{fill:#fff}
.sbar-btn--line:hover .line-logo-letter{fill:var(--line-green)}

/* =========================================================
   Figma から書き出した絵の部品を重ねるための枠
   部品ごとに inset（上 右 下 左）で位置と大きさを決め、画像は枠いっぱいに伸ばす。
   ⚠ img に直接 inset を付けても伸びない（画像は元の大きさのまま出る）ので、必ず枠に入れる
   ========================================================= */
.fpart{position:absolute;display:block}
.fpart > img{display:block;width:100%;height:100%;max-width:none}

/* =========================================================
   TOP（Figma「メディアサイト／TOP」）
   ========================================================= */
.page-top{background:#fff}

/*
  メインビジュアル。どの画面でも、最初の1画面にちょうど収まる高さにする（上下の余白 16px を除く）。
  部品の大きさは --u（＝Figma の 1px）で決める。--u は「Figma の 1408×856 が枠の幅と高さの
  どちらにも収まる大きさ」なので、縦が足りない画面では部品が縮み、横が余る画面では横に広がって並ぶ。
  横の位置は「部品の中心が枠の幅の何%か」（--cx）で持ち、縦の位置は枠の高さの % で持つ。
  ⚠ --u は cqw・cqh（.tvis の幅・高さ）を使うため、.tvis の子孫でしか正しい値にならない。
  ⚠ 高さは画面の高さから引き算しているので、ヘッダーの高さを変えたらここも直す。
*/
.tvis{
  --u:min(100cqw / 1408, 100cqh / 856);
  position:relative;container-type:size;overflow:hidden;
  width:calc(100% - 32px);height:calc(100svh - 32px);margin:16px auto 0;
  background:#F2F6FB;border-radius:16px;color:var(--ink-top);
}
.tvis-town{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1408/180}
.tvis-town-base{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* 埋め込んだ窓の SVG を部品の枠いっぱいに伸ばす（img と同じ扱い） */
.tvis-town .fpart > svg{display:block;width:100%;height:100%}
/* 窓。ふだんは Figma の薄い青で、ときどき黄色く灯る（TopHero.astro の script が is-lit を付け外しする） */
.tvis-win{fill:#98BCD9;transition:fill 1.2s ease}
.tvis-win.is-lit{fill:#F6D365}
/*
  背景の大きな英字。右から左へ流れ続ける（1秒に約37px。TopHero.astro の script が1周の時間を計算する）。
  同じ文字の列（.tvis-bg-unit）を3本並べ、1本ぶん（列全体の 1/3）左へ送るとちょうど継ぎ目なくつながる。
  ⚠ 3本にしているのは、文字の列1本が画面より短い幅でも、右端に隙間を出さないため。
*/
.tvis-bg{
  position:absolute;left:0;top:calc(50% - var(--u) * 60);
  font-family:var(--ff-zen);font-size:calc(var(--u) * 128);font-weight:700;line-height:1;letter-spacing:.24em;
  color:rgba(255,255,255,.8);white-space:nowrap;
}
.tvis-bg-track{display:flex;width:max-content;animation:tvis-bg var(--tvis-bg-duration,90s) linear infinite}
/* 列の最後の空白も字間ごと残して、次の列の「O」との間を空ける */
.tvis-bg-unit{flex-shrink:0;white-space:pre}
@keyframes tvis-bg{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% / 3))}
}
.tvis-logo{
  position:absolute;left:2.27%;top:3.74%;display:flex;align-items:center;gap:calc(var(--u) * 16);
}
.tvis-logo .tlogo-mark{width:calc(var(--u) * 56);height:calc(var(--u) * 56)}
.tvis-logo .tlogo-word{font-size:calc(var(--u) * 18)}

/* 人物（影・人物・縦書きの添え書き）。位置の数値は Figma の各フレームから。
   --cx は部品の中心の横位置（枠の幅の %）、--w は部品の幅（Figma の px） */
.tvis-fig,.tvis-sign{left:calc(var(--cx) - var(--u) * var(--w) / 2);width:calc(var(--u) * var(--w))}
.tvis-fig{position:absolute}
.tvis-fig--woman{
  --cx:14.99%;--w:262;top:15.89%;aspect-ratio:262/305;
  --sh-t:81.97%;--sh-w:85.5%;--sh-h:18.03%;--p-l:3.05%;--p-w:79.39%;--p-h:92.13%;--cap-l:94.66%;
}
.tvis-fig--couple{
  --cx:51.14%;--w:342;top:33.06%;aspect-ratio:342/307;
  --sh-t:71.99%;--sh-w:93.57%;--sh-h:28.01%;--p-l:2.34%;--p-w:88.89%;--p-h:92.18%;--cap-l:95.91%;
}
.tvis-fig--cyclist{
  --cx:85.30%;--w:254;top:14.95%;aspect-ratio:254/272;
  --sh-t:79.78%;--sh-w:88.19%;--sh-h:20.22%;--p-l:4.72%;--p-w:78.74%;--p-h:91.18%;--cap-l:94.49%;
}
.tvis-shadow{position:absolute;left:0;top:var(--sh-t);width:var(--sh-w);height:var(--sh-h);max-width:none}
.tvis-person{position:absolute;left:var(--p-l);top:0;width:var(--p-w);height:var(--p-h)}
/* 左の女性は、Figma で左右反転して置いてある */
.tvis-person--flip{transform:scaleX(-1)}
/* 人物が小さくなっても文字は 10px より小さくしないので、人物の高さを超えても2列に折り返さない */
.tvis-cap{
  position:absolute;left:var(--cap-l);top:0;writing-mode:vertical-rl;white-space:nowrap;
  font-size:max(10px,calc(var(--u) * 14));font-weight:700;line-height:1.2;letter-spacing:.08em;
}

/*
  道路標識は、柱を軸にときどき裏返る（風で看板がくるっと回るイメージ）。
  半回転して裏返し（is-back）→ しばらく止まる → もう半回転して表に戻る（is-front）。
  きっかけと止まる長さは TopHero.astro の script が不規則に決める。半回転は1秒。
  画像の中心で回すので、中心にある柱はほぼその場にとどまり、看板だけが回って見える。
*/
.tvis-sign{position:absolute;max-width:none;transform:perspective(600px) rotateY(0)}
.tvis-sign.is-back{transform:perspective(600px) rotateY(180deg);transition:transform 1s ease-in-out}
.tvis-sign.is-front{transform:perspective(600px) rotateY(360deg);transition:transform 1s ease-in-out}
.tvis-sign--stop{--cx:33.06%;--w:87;top:15.89%;height:calc(var(--u) * 228)}
.tvis-sign--oneway{--cx:73.58%;--w:90;top:55.26%;height:calc(var(--u) * 228)}
.tvis-copy{
  position:absolute;left:82.6%;top:64.37%;white-space:nowrap;
  font-size:max(10px,calc(var(--u) * 14));font-weight:700;line-height:1.2;letter-spacing:.08em;
}

.tvis-catch{position:absolute;left:7.39%;top:56.78%}
/*
  メインタイトルは、1行目 → 2行目の順に、下からふわっと現れる（表示されたときに1回だけ）。
  ⚠ 透明から始めるのは animation の中だけ（fill-mode:both）。動きを減らす設定で animation が
  止まっても、文字は最初から見えている。
*/
.tvis-ttl-line{display:inline-block;animation:tvis-ttl-in .8s cubic-bezier(.22,1,.36,1) .3s both}
.tvis-ttl-line + br + .tvis-ttl-line{animation-delay:.5s}
@keyframes tvis-ttl-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}


.tvis-ttl{
  font-family:var(--ff-zen);font-size:max(40px,calc(var(--u) * 40));font-weight:900;line-height:1.4;letter-spacing:.08em;white-space:nowrap;
}
.tvis-ttl em,.tsec-ttl em,.tsec-en em,.footer-catch em{font-style:normal}
.tvis-ttl em{color:var(--blue-catch)}
.tvis-sub{
  margin-top:calc(var(--u) * 8);font-family:var(--ff-en);font-size:max(12px,calc(var(--u) * 16));
  font-weight:300;line-height:1.6;letter-spacing:.24em;color:#ACABAF;
}

@media(max-width:990px){
  /* 上の帯にロゴが出ているので、メインビジュアルの中のロゴは出さない（2つ並んで見える） */
  .tvis-logo{display:none}
  /* 背景の英字は狭い画面だと小さく見えるので、PCの2倍の大きさにする。
     上の位置も大きくしたぶん引き上げ、文字の縦の中心をPCと同じ高さに保つ */
  .tvis-bg{top:calc(50% - var(--u) * 120);font-size:calc(var(--u) * 256)}
}

/*
  PCミニ〜タブレット（691〜1280px）は、タイトルが 40px より小さくならないぶん絵に対して文字が大きくなり、
  人物に重なる。そこで人物の下にタイトルの段（170px）を取り、タイトルを人物の下・街並みの上へ下げる。
  縦の内訳 ＝ 人物の部分（Figma の 620：人物の下端＋余白）＋ タイトルの段 170px ＋ 街並み。
  ⚠ 街並みは枠の幅いっぱいに置くので、高さは --u ではなく枠の幅で決まる（--town-h）。
    --u は、人物の部分がその残りに収まる大きさにする。
  --extra は、縦が余る画面（タブレットの縦向きなど）で余った高さ。人物・標識はその半分だけ下げ、
  タイトルは全部下げる（上の余白と、人物とタイトルの間に半分ずつ配る）。
  人物・標識・ロゴ・コピーの位置は、PCと同じ見た目になるよう「高さの%」ではなく
  「幅の割合（--u）」で指定し直している（値は Figma の % × 856 を --u に換算したもの）。
*/
@media(min-width:691px) and (max-width:1280px){
  .tvis{
    --town-h:calc(100cqw * 180 / 1408);
    --u:min(100cqw / 1408, (100cqh - 170px - var(--town-h)) / 620);
    --extra:calc(100cqh - 170px - var(--town-h) - var(--u) * 620);
  }
  .tvis-logo{top:calc(var(--u) * 32)}
  .tvis-fig--woman{top:calc(var(--u) * 136 + var(--extra) / 2)}
  .tvis-fig--couple{top:calc(var(--u) * 283 + var(--extra) / 2)}
  .tvis-fig--cyclist{top:calc(var(--u) * 128 + var(--extra) / 2)}
  .tvis-sign--stop{top:calc(var(--u) * 136 + var(--extra) / 2)}
  .tvis-sign--oneway{top:calc(var(--u) * 473 + var(--extra) / 2)}
  .tvis-copy{top:calc(var(--u) * 551 + var(--extra) / 2)}
  /* 2人組の影の下端（約590）より下から始める */
  .tvis-catch{top:calc(var(--u) * 620 + var(--extra))}
}

/*
  タブレット（691〜990px）は、タイトル（40px）に対して絵が小さく見えるので、人物・標識を 1.3 倍にする。
  PCと同じ並びのまま、各部品の中心の横位置（--cx）を保って大きくし、縦位置も 1.3 倍に広げる
  （値は PC の --u 換算値 × 1.3）。
  タイトルもそのぶん下へずらす（人物の部分は 800）。
  上にヘッダー（767px 以下は 62px、それより広いと 76px）が出るので、そのぶん低くする。
*/
@media(min-width:691px) and (max-width:990px){
  .tvis{
    height:calc(100svh - 76px - 32px);
    --u:min(100cqw / 1408, (100cqh - 170px - var(--town-h)) / 800);
    --extra:calc(100cqh - 170px - var(--town-h) - var(--u) * 800);
  }
  .tvis-fig--woman{--w:340.6;top:calc(var(--u) * 176.8 + var(--extra) / 2)}
  .tvis-fig--couple{--w:444.6;top:calc(var(--u) * 367.9 + var(--extra) / 2)}
  .tvis-fig--cyclist{--w:330.2;top:calc(var(--u) * 166.4 + var(--extra) / 2)}
  .tvis-sign--stop{--w:113.1;top:calc(var(--u) * 176.8 + var(--extra) / 2);height:calc(var(--u) * 296.4)}
  .tvis-sign--oneway{--w:117;top:calc(var(--u) * 614.9 + var(--extra) / 2);height:calc(var(--u) * 296.4)}
  .tvis-cap{font-size:max(10px,calc(var(--u) * 18.2))}
  .tvis-copy{top:calc(var(--u) * 716 + var(--extra) / 2)}
  /* 2人組の影の下端（約767）より下から始める */
  .tvis-catch{top:calc(var(--u) * 800 + var(--extra))}
}
@media(min-width:691px) and (max-width:767px){
  .tvis{height:calc(100svh - 62px - 32px)}
}

/*
  スマホ（〜690px）は縦長にして並べ替える。キャッチを上、人物をその下にまとめる。
  道路標識と「©️OSEKKAI MEDIA」は、人物と重なって読めなくなるので出さない。
  高さは「画面 − 上のヘッダー 62px − 上下の余白 12px」。
  --m は絵の基準の幅（もとの 1:2 のデザインでの枠の幅）。縦が足りないぶんだけ枠の幅より小さくなり、
  人物はまとまりのまま縮んで中央に寄る。
  縦の内訳（--m に対する比）＝ キャッチの上 0.12 ＋ キャッチ（--catch-h）＋ 人物の上の隙間 0.085
  ＋ 人物（2人組の下端まで）1.242 ＋ 街並み 0.23 ＝ 1.677 ＋ キャッチ。
  縦が余る画面では、余り（--extra）の半分を人物の上に足す。
*/
@media(max-width:690px){
  .tvis{
    --catch-h:115px;
    --m:min(100cqw, (100cqh - var(--catch-h)) / 1.677);
    --extra:calc(100cqh - var(--catch-h) - var(--m) * 1.677);
    /* 人物のまとまりの上端（もとのデザインの 26%） */
    --p:calc(var(--m) * 0.205 + var(--catch-h) + var(--extra) / 2);
    width:calc(100% - 24px);height:calc(100svh - 62px - 24px);margin-top:12px;
  }
  .tvis-town{width:max(100%, calc(var(--m) * 1.8))}
  /* 背景の英字はPCの2倍（もとの 7.5cqw の2倍）。人物のまとまりに対して、もとと同じ高さに置く */
  .tvis-bg{top:calc(var(--p) + var(--m) * 0.2025);font-size:calc(var(--m) * 0.15)}
  .tvis-catch{left:6%;top:calc(var(--m) * 0.12)}
  .tvis-ttl{font-size:32px}
  .tvis-sub{margin-top:6px;font-size:12px}
  /* 人物はタイトル（32px）との比がPCに近づくよう、以前（44%・42%・60%）より大きくしている。
     2人組だけは大きく見えすぎるので少し控えめにし、中心と足元の高さはそのまま保つ */
  .tvis-fig--woman{left:calc(50% - var(--m) * 0.48);top:var(--p);width:calc(var(--m) * 0.52)}
  .tvis-fig--cyclist{left:50%;top:calc(var(--p) + var(--m) * 0.08);width:calc(var(--m) * 0.48)}
  .tvis-fig--couple{left:calc(50% - var(--m) * 0.33);top:calc(var(--p) + var(--m) * 0.65);width:calc(var(--m) * 0.66)}
  .tvis-cap{font-size:10px}
  .tvis-sign,.tvis-copy{display:none}
}
/* ミニ（〜360px）は32pxだと2行目「おせっかいな読み物」が右端からはみ出すので、少し小さくする */
@media(max-width:360px){
  .tvis{--catch-h:103px}
  .tvis-ttl{font-size:28px}
}

/*
  タグの帯。右から左へ流れ続け、マウスを乗せると止まる（東急「縁線図鑑」の帯にならった）。
  同じ列（.tmq-list）を2本並べ、両方を「自分の幅ぶん」左へ送ると継ぎ目なくループする。
  ⚠ 列の最小幅は帯の幅いっぱい（min-width:100%）。タグが少なくても列の間に隙間が出ない。
  ⚠ タグの間隔は gap ではなく margin-right で取る。gap だと列の継ぎ目にだけ間隔が無くなる。
*/
.tmq{display:flex;overflow:hidden;padding-top:80px}
.tmq-list{
  flex-shrink:0;display:flex;min-width:100%;
  animation:tmq var(--tmq-duration,40s) linear infinite;
}
.tmq-item{flex-shrink:0;margin-right:16px}
.tmq-tag{
  display:block;padding:6px 16px;border:1px solid rgba(0,97,170,.4);border-radius:16px;
  background:var(--beige);font-size:14px;font-weight:400;line-height:1;letter-spacing:.01em;color:#666;white-space:nowrap;
}
@keyframes tmq{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
@media(any-hover:hover){
  .tmq:hover .tmq-list{animation-play-state:paused}
  .tmq-tag{
    transition:background-color .4s cubic-bezier(.33,1,.68,1),color .4s cubic-bezier(.33,1,.68,1),
      border-color .4s cubic-bezier(.33,1,.68,1);
  }
  /* ホバーの色は住まい／店舗・事務所で分けず、共通の黒（--ink-top） */
  .tmq-tag:hover{background:var(--ink-top);border-color:var(--ink-top);color:#fff}
}
/* キーボードでタグに来たときも止める（流れていると押せない） */
.tmq:focus-within .tmq-list{animation-play-state:paused}
/* 動きを減らす設定の人には流さず、指やトラックパッドで横に送れるようにする */
@media(prefers-reduced-motion:reduce){.tmq{overflow-x:auto}}
@media(max-width:990px){.tmq{padding-top:40px}}
@media(max-width:690px){.tmq{padding-top:32px}}

/* 記事の一覧（住まい／店舗・事務所）。中身の幅は Figma の 1026px（カード 310×3＋間 48×2） */
.tmain{max-width:calc(1026px + 160px);margin:0 auto;padding:0 80px}
.tsec{padding-top:80px}
.tsec + .tsec{padding-top:160px}
.tsec--living{--sec:var(--navy);--sec-en:var(--blue-catch)}
.tsec--business{--sec:var(--green);--sec-en:var(--green)}
.tsec-ttl{
  display:flex;align-items:center;gap:8px;
  font-size:32px;font-weight:700;line-height:1.6;letter-spacing:.08em;color:var(--ink-top);
}
.tsec-ttl em{color:var(--sec)}
/* 見出し横のアイコン。住まいの家は 40px の枠の中で少し内側に描かれている（Figma のとおり） */
.tsec-icon{position:relative;flex-shrink:0;width:40px;height:40px}
.tsec-icon img{position:absolute;max-width:none}
.tsec-icon--living img{left:3px;top:3px;width:35.33px;height:32px}
.tsec-icon--business img{inset:0;width:40px;height:40px}
.tsec-desc{
  margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;
  font-size:16px;line-height:1.6;letter-spacing:.08em;color:var(--ink-top);
}
.tsec-en{flex-shrink:0;font-family:var(--ff-jp)}
.tsec-en em{color:var(--sec-en)}
.tgrid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 48px}
.tmore{margin-top:80px;display:flex;justify-content:center}
.tmore-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 8px 10px 16px;border:0;border-radius:8px;
  background:var(--ink-top);color:#fff;cursor:pointer;
  font-family:var(--ff-en);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.16em;
  transition:opacity .2s ease;
}
.tmore-btn:hover{opacity:.8}
.tmore-btn img{width:24px;height:24px}
.tsec .empty{margin-top:40px}

/* 991〜1280px：サイドバーを残したまま、3列を少し詰めて収める */
@media(max-width:1280px){
  .tmain{padding:0 56px}
  .tgrid{gap:56px 32px}
}
/* タブレット：2列 */
@media(max-width:990px){
  .tmain{padding:0 40px}
  .tsec{padding-top:56px}
  .tsec + .tsec{padding-top:120px}
  /* 上に固定の帯（.header）があるので、#living / #business へ飛んだとき帯の高さぶん下で止める */
  .tsec{scroll-margin-top:76px}
  .tsec-ttl{font-size:28px}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tmore{margin-top:64px}
}
/* スマホ：1列 */
@media(max-width:690px){
  .tmain{padding:0 20px}
  .tsec{padding-top:48px}
  .tsec + .tsec{padding-top:96px}
  .tsec{scroll-margin-top:62px}
  .tsec-ttl{font-size:24px}
  .tsec-icon{width:32px;height:32px}
  .tsec-icon--living img{left:2.4px;top:2.4px;width:28.27px;height:25.6px}
  .tsec-icon--business img{width:32px;height:32px}
  .tsec-desc{font-size:14px}
  .tgrid{margin-top:32px;grid-template-columns:minmax(0,1fr);gap:48px}
  .tmore{margin-top:48px}
}


/* =========================================================
   記事カード（Figma「メディアサイト／TOP」の記事の一枚）
   写真 → タグと日付 → タイトル → おせっかい度 の縦の並び。
   色は読者区分で替える（.acard--living / .acard--business）。
   ========================================================= */
.acard{display:flex;flex-direction:column;gap:8px;height:100%;color:var(--ink-top)}
.acard--living{--osk:var(--osk-living);--osk-bg:var(--osk-living-bg)}
.acard--business{--osk:var(--osk-business);--osk-bg:var(--osk-business-bg)}
.acard-fig{
  position:relative;aspect-ratio:310/206;border-radius:16px;overflow:hidden;background:#D9D9D9;
}
.acard-fig > img{width:100%;height:100%;object-fit:cover}

/*
  写真が無い記事の代わり。淡い地に「OSEKKAI MEDIA」の文字だけを置く。

  左下のイラスト（OKサインの人）は、写真の有無にかかわらず、マウスを乗せると左から出てくる。
  ⚠ マウスを乗せる操作が無い端末（スマホ・タブレット）では、写真が無いときは最初から出しておき、
  写真があるときは出さない（写真の上に常に重なって、写真が見えにくくなるため）。
*/
.acard-noimg{position:absolute;inset:0;background:#F2FBF9}
.acard-illu{
  position:absolute;left:0;bottom:0;z-index:1;width:96px;height:114px;overflow:hidden;
  /* 乗算の部品が写真と混ざらないよう、イラストの中だけで重ねる */
  isolation:isolate;
}
.acard-illu-multiply{mix-blend-mode:multiply}
@media(hover:hover){
  .acard-illu{transform:translateX(-100%);transition:transform .3s ease}
  .acard:hover .acard-illu,
  .acard:focus-visible .acard-illu{transform:translateX(0)}
}
@media(hover:none){
  .acard-fig--photo .acard-illu{display:none}
}
.acard-noimg-word{
  position:absolute;left:50%;top:calc(50% - 22px);transform:translateX(-50%);
  font-family:var(--ff-en);font-size:18px;font-weight:600;line-height:1.2;letter-spacing:.18em;
  color:var(--navy);text-align:center;white-space:nowrap;
}

.acard-body{display:flex;flex-direction:column;gap:8px}
.acard-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;
  font-size:16px;line-height:1.6;letter-spacing:.08em;
}
.acard-tag{display:inline-flex;align-items:center;gap:8px}
.acard-tag img{width:6px;height:6px;flex-shrink:0}
.acard-date{font-family:var(--ff-en);font-weight:500}

.acard-ttl{
  font-size:20px;font-weight:600;line-height:1.6;letter-spacing:.08em;
  /* 3行を超えたら省略する。カードの高さを揃えないと一覧が読みにくい */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.acard-ex{
  font-size:13px;color:var(--gray);line-height:1.9;letter-spacing:.04em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/*
  おせっかい度。薄い色の3マスの上に、濃い色の札を左から重ねる。
  札の長さが段階を表す（low＝1マス、medium＝2マス、high＝3マス＋握手）。
  札の端はマスの切れ目（間 2px）にぴったり合わせる。
*/
.acard-osk{display:flex;align-items:center;gap:16px;margin-top:auto}
.acard-osk-label{
  flex-shrink:0;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:#B8B9B2;
}
.acard-osk-meter{position:relative;display:flex;gap:2px;flex:1;max-width:223px;height:24px}
.acard-osk-seg{flex:1;min-width:0;height:24px;background:var(--osk-bg)}
.acard-osk-seg:first-child{border-radius:4px 0 0 4px}
.acard-osk-seg:nth-child(3){border-radius:0 4px 4px 0}
/* 札。色の面は ::before に描き、文言（.acard-osk-txt）とは別々に動かせるようにしている */
.acard-osk-fill{
  position:absolute;left:0;top:0;z-index:0;height:24px;display:flex;align-items:center;justify-content:center;
  padding:2px 8px;
  font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:#fff;white-space:nowrap;
}
.acard-osk-fill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:var(--osk);
}
.acard-osk-fill--low{width:calc((100% - 4px) / 3);justify-content:flex-start}
.acard-osk-fill--medium{width:calc((100% - 4px) / 3 * 2 + 2px)}
.acard-osk-fill--high{width:100%}
.acard-osk-hand{
  position:absolute;right:36px;top:-16px;transform:translateX(100%);
  font-size:32px;line-height:1;letter-spacing:.08em;
}

/*
  メーターの動き（参考：POTEL KYOTO の「噂の広まり」。ArticleCard.astro の script が class を付ける）
  - 画面に入ったら、0.25秒待ってから色の面が左から2秒かけて伸びる（はじめ速く、最後はゆっくり）
  - 動き始めから1秒後に、文言（と握手）が1秒かけて現れる
  面を伸ばすのは width ではなく clip-path で、文言の位置が動かず、角丸も崩れない。
  ⚠ transition は is-shown の側にだけ書く。is-ready 側に書くと「隠す」ときにも遅れがかかり、
  隠れきる前に is-shown が付いて、文言が最初から見えたままになる（実際にそうなった）。
*/
.acard-osk-meter.is-ready .acard-osk-fill::before{clip-path:inset(0 100% 0 0 round 4px)}
.acard-osk-meter.is-ready .acard-osk-txt{opacity:0}
.acard-osk-meter.is-shown .acard-osk-fill::before{
  clip-path:inset(0 0 0 0 round 4px);
  transition:clip-path 2s cubic-bezier(.16,1,.3,1) .25s;
}
.acard-osk-meter.is-shown .acard-osk-txt{
  opacity:1;transition:opacity 1s cubic-bezier(.16,1,.3,1) 1s;
}

@media(max-width:690px){
  .acard-meta{font-size:14px}
  .acard-ttl{font-size:18px}
}

/* =========================================================
   カテゴリの並び（タグ）
   記事ページの区分の札（.artcl-badge）と同じ形。開いているカテゴリは塗り、それ以外は枠線
   ========================================================= */
.cchips{display:flex;flex-wrap:wrap;gap:8px}
.cchip--living{--sec:var(--navy);--sec-hover:#0061AA}
.cchip--business{--sec:var(--green);--sec-hover:#2EA36A}
.cchip{
  display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--sec);border-radius:4px;
  background:#fff;color:var(--sec);font-size:14px;font-weight:400;line-height:1.6;letter-spacing:.08em;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.cchip:hover,.cchip[aria-current="page"]{background:var(--sec);color:#fff}
.cchip[aria-current="page"]:hover{background:var(--sec-hover);border-color:var(--sec-hover)}
.cchip small{font-family:var(--ff-en);font-size:12px;letter-spacing:.02em;opacity:.7}

/* 404 のボタン（.nf-actions .chip）の土台 */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.08em;color:var(--ink-2);padding:4px 0;
  border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.chip::before{content:"";width:5px;height:5px;background:var(--navy);opacity:.5;flex-shrink:0}
.chip:hover{border-color:var(--ink)}

/* 404 のボタンだけは押せる面が要る（周りに他の手がかりが無いページのため） */
.nf-actions .chip{
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;background:var(--card);
}
.nf-actions .chip:hover{border-color:var(--ink)}

/* =========================================================
   記事詳細（Figma「メディアサイト／記事テンプレ（住居）」「同（店舗・事務所）」）

   本文の列は 680px で、本文の列（main）の中央に置く。
   色は読者区分で替える：住まい＝紺（--sec）・青（--osk）、店舗・事務所＝緑。
   ArticleView.astro が .artcl--living / .artcl--business と .acard--{区分} を付ける。
   ========================================================= */
/* 記事ページ・プレビューの地色は白（Figma のとおり。表や案内の灰色の地を浮かせるため） */
.page-article{background:#fff}
.artcl--living{--sec:var(--navy);--sec-hover:#0061AA}
.artcl--business{--sec:var(--green);--sec-hover:#2EA36A}
.artcl{max-width:calc(680px + var(--gutter) * 2);margin:0 auto;padding:64px var(--gutter) 0;color:var(--ink-top)}

/* 区分の札（住まいの記事／店舗・事務所の記事）。押すとTOPのその区分へ */
.artcl-badge{
  display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 8px;border-radius:4px;
  background:var(--sec);color:#fff;font-size:14px;font-weight:400;line-height:1.6;letter-spacing:.08em;
  transition:background-color .2s ease;
}
.artcl-badge:hover{background:var(--sec-hover)}
.artcl-badge-icon{flex-shrink:0;width:20px;height:20px}
/* 住まいの家のアイコンは 20px の枠の中に少し小さく描かれている（Figma のとおり） */
.artcl-badge-icon--living{padding:2.5px 1.9px 3.3px 2.4px}

.artcl-headline{margin-top:24px}
.artcl-ttl{font-size:32px;font-weight:600;line-height:1.4;letter-spacing:.08em}
.artcl-meta{
  margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;
  font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.08em;
}
.artcl-meta-tag{display:inline-flex;align-items:center;gap:8px}
.artcl-meta-tag img{width:6px;height:6px}
.artcl-meta-read{color:#B8B9B2}
/* おせっかい度（見出しの下・右寄せ）。カードと同じ部品で、ラベルだけ少し大きい */
.artcl-headline .acard-osk{margin-top:8px}
.acard-osk--large{justify-content:flex-end}
.acard-osk--large .acard-osk-label{font-size:14px;font-weight:500}
.acard-osk--large .acard-osk-meter{flex:0 1 223px}

.artcl-hero{margin-top:24px;aspect-ratio:680/452;border-radius:24px;overflow:hidden;background:#F2FBF9}
.artcl-hero img{width:100%;height:100%;object-fit:cover}

.artcl-main{margin-top:24px}

/* 書き手 */
.artcl-writer{
  display:flex;align-items:center;gap:32px;padding:32px 24px;
  background:#fff;border:1px solid #F9F7F6;border-radius:16px;
}
.artcl-writer-face{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.artcl-writer-body{min-width:0}
.artcl-writer-name{font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.08em}
.artcl-writer-title{margin-left:12px;font-size:14px;font-weight:400}
.artcl-writer-note{margin-top:8px;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.08em}

/* 目次。見出しを押すと開け閉めできる（details）。矢印は開いているとき上向き */
.artcl-toc{margin-top:40px;border-radius:8px;overflow:hidden}
.artcl-toc-head{
  display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#F3F1F0;
  font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.08em;cursor:pointer;list-style:none;
}
.artcl-toc-head::-webkit-details-marker{display:none}
.artcl-toc-arrow{flex-shrink:0;color:var(--osk);transition:transform .2s ease}
.artcl-toc:not([open]) .artcl-toc-arrow{transform:rotate(180deg)}
.artcl-toc-list{padding:24px;background:#F9F7F6;list-style:none}
.artcl-toc-list li{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.08em}
.artcl-toc-list li + li{margin-top:8px}
.artcl-toc-list li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--osk)}
.artcl-toc-list a{transition:color .2s ease}
.artcl-toc-list a:hover{color:var(--sec)}

/*
  本文。見出し・表などの塊の前後は 40px 空ける（Figma のとおり）。
  段落どうしは 20px 空ける。Figma は詰めていたが、記事は1段落100〜150字を目安に書く決まりにしたため、
  詰めたままだと区切りが見えず文字の壁になる（実際の記事で見比べて決めた。2026-10-27）。
  本文HTMLは cloud が Markdown から作ったもの。ここでは見た目だけを付ける。
*/
.artcl-body{margin-top:40px;font-size:16px;font-weight:400;line-height:2.6;letter-spacing:.08em}
.artcl-body > * + *{margin-top:40px}
.artcl-body > p + p{margin-top:20px}
.artcl-body strong{font-weight:600}
/*
  見出し（2026-10-29 古舘さん「のっぺりしてる」）。下線1本をやめ、区分の色の淡い面に大きな番号を置く。
  すぐ下に答えのカード（.aans）があれば、この面の下端に重ねて奥行きを出す。
  色は区分の淡い色だけ（住まい＝青・店舗＝緑）。新しい色は持ち込まない。
*/
.artcl--living{--sec-tint:#EEF3FB;--sec-tint-2:#E2EBF8}
.artcl--business{--sec-tint:#EDF7F2;--sec-tint-2:#DDF0E6}
.artcl-body{counter-reset:artcl-h2}
.artcl-body > * + h2{margin-top:88px}
.artcl-body h2{
  counter-increment:artcl-h2;position:relative;padding:30px 28px 30px 92px;border-radius:20px;
  background:linear-gradient(135deg,var(--sec-tint),var(--sec-tint-2));
  font-size:24px;font-weight:600;line-height:1.5;letter-spacing:.08em;
  /* 目次から飛んだとき、見出しが画面の端に貼り付かないようにする */
  scroll-margin-top:24px;
}
.artcl-body h2::before{
  content:counter(artcl-h2);position:absolute;left:30px;top:16px;
  font-family:var(--ff-zen);font-size:56px;font-weight:900;line-height:1;color:var(--sec);
}
/* 答えのカードを重ねる見出しは、面の下にカードの入る余白をとる */
.artcl-body h2:has(+ .aans){padding-bottom:56px}
/*
  問いの見出しに添える人物の絵（lib/headingFigure.ts）。2026-10-29 古舘さん「記事詳細ページが寂しい」→ 案3。
  帯の右上のふちに立たせ、上の余白へはみ出させる（足は帯の文字の1行目より上に収め、文字と重ねない）。
  ⚠ .artcl-body img（本文の写真＝横幅いっぱい・角丸）に負けないよう .artcl-body を付けて指定する
*/
.artcl-body .ah2-fig{
  position:absolute;right:28px;bottom:calc(100% - 22px);width:auto;height:96px;border-radius:0;pointer-events:none;
}
/* 指さす男性は、見出しの文字の方を指すよう左右を反転する */
.artcl-body .ah2-fig--p1{transform:scaleX(-1)}
/* 目次から飛んだとき、帯の上にはみ出した絵まで画面に入れる */
.artcl-body h2:has(.ah2-fig){scroll-margin-top:100px}

/* 見出しの答え（lib/answer.ts が見出し直後の太字だけの段落から作る）。書き手の顔つきの白いカードを見出しの面に重ねる */
.artcl-body > .aans{
  position:relative;margin:-34px 24px 0 48px;padding:20px 24px 20px 80px;border-radius:14px;background:#fff;
  box-shadow:0 14px 34px rgba(25,45,80,.12),0 2px 6px rgba(25,45,80,.06);line-height:1.9;
}
/* ⚠ .artcl-body img（本文の写真＝横幅いっぱい・角丸16px）に負けないよう .artcl-body を付けて指定する */
.artcl-body .aans-face{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff;
}
.aans-who{font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:var(--sec)}
.aans-text{margin-top:2px;font-size:16px;font-weight:600;letter-spacing:.06em}
.artcl-body > .aans + *{margin-top:48px}
.artcl-body h3{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.08em}
/*
  箇条書き（Figma「箇条書き」をもとに、ほかの枠とそろえて調整）。
  灰色の枠（表・図と同じ #F5F5F5、角丸は表・図・目次と同じ 8px）に、区分の色の点を並べる。
  番号付き（1. 2.）は点の代わりに区分の色の数字を出す。
  ⚠ Figma は文字18px・角丸16pxだが、本文（16px）より大きいと小見出しより目立つため、本文と同じ16pxにしている。
  ⚠ 点・数字は1行目の高さにそろえる（項目が2行以上になっても行の間に浮かないように）。
  ⚠ 「> ul」で本文の直下だけに当てる。図の凡例や、項目の中の入れ子の箇条書きには枠を付けない。
*/
.artcl-body > ul,.artcl-body > ol{padding:32px;border-radius:8px;background:#F5F5F5;list-style:none;counter-reset:artcl-ol}
.artcl-body > ul li,.artcl-body > ol li{
  position:relative;padding-left:32px;font-size:16px;font-weight:500;line-height:1.6;letter-spacing:.08em;
}
.artcl-body > ul li + li,.artcl-body > ol li + li{margin-top:8px}
/* 点は 24px の枠の中央に直径8px（Figma のとおり）。1行目の中心に合わせる */
.artcl-body > ul li::before{
  content:"";position:absolute;left:8px;top:calc(.8em - 4px);width:8px;height:8px;border-radius:50%;background:var(--osk);
}
.artcl-body > ol > li{counter-increment:artcl-ol}
.artcl-body > ol > li::before{
  content:counter(artcl-ol);position:absolute;left:0;top:0;width:24px;text-align:center;
  color:var(--osk);font-weight:600;
}
/* 入れ子の箇条書きは枠を付けず、項目の下に続ける */
.artcl-body li ul,.artcl-body li ol{margin-top:8px}
.artcl-body a{color:var(--sec);text-decoration:underline;text-underline-offset:4px}
/*
  抜き出しの一文（本文の `> ` の1行）。2026-10-29 古舘さん「記事詳細ページが寂しい」→ 案5。
  灰色の箱をやめ、大きな引用符を背負った区分の色の大きな文字にして、読み流している目を一度止める場所にする。
  ⚠ 長い注意書きを `>` で書くと、それも大きな文字になる。抜き出し以外には使わない（書き直しの決まりにも書いてある）
*/
.artcl-body blockquote{position:relative;padding:44px 16px 0;text-align:center}
.artcl-body blockquote::before{
  content:"“";position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  font-family:var(--ff-zen);font-size:104px;font-weight:900;line-height:1;color:var(--sec-tint-2);
}
.artcl-body blockquote p{
  position:relative;font-family:var(--ff-zen);font-size:24px;font-weight:900;line-height:1.7;letter-spacing:.08em;color:var(--sec);
}
.artcl-body blockquote p + p{margin-top:8px}
.artcl-body blockquote::after{
  content:"";display:block;width:40px;height:4px;margin:20px auto 0;border-radius:2px;background:var(--sec);opacity:.35;
}
.artcl-body img{display:block;width:100%;height:auto;border-radius:16px}
.artcl-body hr{border:0;border-top:1px dashed rgba(36,48,66,.3)}
.artcl-body code{background:#F5F5F5;border-radius:4px;padding:2px 6px;font-size:14px}
/* 表。灰色の地の上に、色の見出し行と白い行を置く */
.artcl-body table{
  width:100%;border-collapse:separate;border-spacing:0;padding:32px;border-radius:8px;background:#F5F5F5;
  line-height:1.4;
  /* 列の幅は中身の長さによらず等分にする（Figma の表は3列ほぼ同じ幅） */
  table-layout:fixed;
}
.artcl-body th{
  padding:8px 16px;background:var(--osk);border-right:1px solid #F5F5F5;color:#fff;
  font-size:15px;font-weight:600;letter-spacing:.08em;text-align:center;
}
.artcl-body td{
  padding:16px;background:#fff;
  border-bottom:1px dashed rgba(36,48,66,.3);border-right:1px dashed rgba(36,48,66,.3);
  font-size:14px;font-weight:500;letter-spacing:.08em;vertical-align:middle;
}
.artcl-body th:last-child,.artcl-body td:last-child{border-right:0}
.artcl-body td:first-child{font-weight:600}

/*
  本文の図（Figma「図のテンプレ」blue・green）。本文の ```chart を lib/figure.ts が描き換えたもの。
  灰色の地（表と同じ #F5F5F5・角丸8px）の上に、濃い色 → 薄い色の5段（--fig-1〜5）で描く。
  色は読者区分で替える（住まい＝青／店舗・事務所＝緑）。軸は白の2px線、文字は12px。
  ⚠ 項目が多いと狭い画面で文字が重なるので、1項目48pxを下回る幅では図の枠を横にスクロールさせる（表と同じ）。
  ⚠ 図どうしの中央寄せは margin-left/right だけで行う。margin の一括指定にすると、
    単位・凡例の下に空けた margin-top が 0 に戻って文字が重なる（実際にそうなった）。
*/
.afig{
  --fig-1:#1049C7;--fig-2:#2369FF;--fig-3:#4C7FFF;--fig-4:#7EA1FF;--fig-5:#CFDCFE;
  line-height:1.4;
}
.artcl--business .afig{--fig-1:#25B06C;--fig-2:#49C987;--fig-3:#73D9A3;--fig-4:#A3E7C3;--fig-5:#D6F3E5}
.afig-c0{background:#fff;fill:#fff}
.afig-c1{background:var(--fig-1);fill:var(--fig-1)}
.afig-c2{background:var(--fig-2);fill:var(--fig-2)}
.afig-c3{background:var(--fig-3);fill:var(--fig-3)}
.afig-c4{background:var(--fig-4);fill:var(--fig-4)}
.afig-c5{background:var(--fig-5);fill:var(--fig-5)}
.afig-ttl{font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.08em}
.afig-box{
  padding:32px 24px;border-radius:8px;background:#F5F5F5;overflow-x:auto;
  font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--ink-top);
}
.afig-ttl + .afig-box{margin-top:12px}
.afig-unit{max-width:520px;margin-left:auto;margin-right:auto;color:var(--gray)}
/* 目盛りのいちばん上の数字は線の位置に文字の中心を合わせるため、上へはみ出す。その分も空ける */
.afig-unit + *{margin-top:16px}
/* 読み上げ用の表は画面に出さない。本文の表（.artcl-body table）の幅・余白が当たらないよう打ち消す */
.afig table.visually-hidden{width:1px;padding:0}
.afig-src{margin-top:8px;font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--gray)}

/* 凡例（積み上げ・ドーナツ）。8pxの色の四角＋名前 */
/* ⚠ .afig を前に付けて強める。本文の箇条書き（.artcl-body ul の点・字下げ）が凡例に効かないように */
.afig .afig-legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0}
.afig-legend li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.afig-swatch{flex-shrink:0;width:8px;height:8px;border-radius:1px}

/* 横棒：左に項目名、棒は高さ30px・間8px、下に目盛り */
.afig-hbar{
  display:grid;grid-template-columns:fit-content(30%) minmax(0,1fr);gap:8px 24px;align-items:center;
  max-width:520px;margin-left:auto;margin-right:auto;
}
.afig-hbar-track{height:30px}
.afig-hbar .afig-bar{display:block;height:100%;border-radius:4px}
.afig-hbar-axis{margin-top:16px;border-top:2px solid #fff;border-radius:1px}

/* 下の目盛り（横棒）・項目名（折れ線）は、位置（%）に文字の中心を合わせる */
.afig-ticks-x,.afig-line .afig-labels-x{position:relative;display:block;height:17px;margin-top:8px}
.afig-ticks-x > span,.afig-labels-x .afig-line-area > span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}

/* 縦棒・積み上げ・折れ線：左に目盛り、下に項目名 */
.afig-vbar,.afig-line{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;
  max-width:520px;min-width:calc(var(--n) * 48px + 56px);margin-left:auto;margin-right:auto;
}
.afig-plot{position:relative;display:block;height:200px;border-bottom:2px solid #fff}
/* 目盛りの文字は、--p（0〜1）の高さに文字の中心を合わせる。--base は棒の根元の高さ */
.afig-ticks-y{position:relative;display:block;height:200px;min-width:2em}
.afig-ticks-y > span{
  position:absolute;right:0;bottom:calc(var(--base) + (100% - var(--base)) * var(--p));
  transform:translateY(50%);white-space:nowrap;
}
/* 欄の幅を決めるためだけの見えない文字（figure.ts の yTicks） */
.afig-ticks-y > .afig-ticks-y-size{position:static;display:block;height:0;overflow:hidden;visibility:hidden;transform:none}
/* 縦棒は Figma のとおり、棒の根元を軸の線から16px浮かせる */
.afig-vbar{--base:18px}
.afig-vbar .afig-plot{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding-bottom:16px}
.afig-slot{display:flex;align-items:flex-end;justify-content:center;height:100%}
.afig-vbar .afig-bar{display:block;width:min(48px,70%);border-radius:4px}
/* 積み上げは系列の1つ目を一番下に置く。Figma のとおり角は丸めない */
.afig-stack{display:flex;flex-direction:column-reverse;width:min(48px,70%)}
.afig-stack > span{display:block;flex-shrink:0}
.afig-legend + .afig-vbar,.afig-legend + .afig-line{margin-top:16px}
.afig--stack .afig-legend,.afig--line .afig-legend{max-width:520px;margin-left:auto;margin-right:auto}
.afig-vbar .afig-labels-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:8px;text-align:center}

/* 折れ線：軸は左と下の白線。線は2px、点は直径8px */
.afig-line{--base:2px}
.afig-line .afig-plot{border-left:2px solid #fff}
.afig-line-area{position:absolute;inset:0 16px 0 0;display:block}
.afig-line svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.afig-line path{fill:none;stroke:var(--fig-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.afig-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--fig-1);transform:translate(-50%,-50%)}

/* ドーナツ：左に凡例、中央に外径240pxの輪。最後の項目は白（下に敷いた白い輪がそのまま見える） */
.afig--donut .afig-box{padding:40px 24px}
/* ⚠ 凡例の欄は凡例の幅より狭くしない。項目名が長いと凡例（折り返さない）が輪に重なるため。
   短いときは左右が同じ幅になり輪は中央、長いときは輪がその分だけ右へ寄る */
.afig-donut{display:grid;grid-template-columns:minmax(max-content,1fr) 240px minmax(0,1fr);align-items:center;column-gap:16px}
.afig .afig-donut .afig-legend{flex-direction:column;justify-self:start;padding-left:22px}
.afig-donut-ring{display:block;width:240px;height:240px}
.afig-donut-base{fill:none;stroke:#fff}
.afig-donut-ring text{
  fill:#fff;font-size:12px;font-weight:500;letter-spacing:.08em;text-anchor:middle;dominant-baseline:central;
}
.afig-donut-ring text.is-dark{fill:var(--ink-top)}

@media(max-width:690px){
  .afig-box,.afig--donut .afig-box{padding:24px 16px}
  /* 狭い画面のドーナツは、輪を上・凡例を下に並べ替える */
  .afig-donut{grid-template-columns:minmax(0,1fr);row-gap:16px;justify-items:center}
  .afig-donut-ring{order:-1;width:min(240px,100%);height:auto}
  .afig .afig-donut .afig-legend{flex-direction:row;justify-self:center;justify-content:center;padding-left:0}
}

/* シェア */
.share{margin-top:80px;text-align:center}
.share-ttl{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.08em}
.share-list{margin-top:24px;display:flex;justify-content:center;gap:16px}
.share-list a{
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#F5F5F5;transition:opacity .2s ease;
}
.share-list a:hover{opacity:.7}
.share-list img{width:56px;height:56px}
/* LINE はロゴだけの画像なので、丸い地の中に置く */
.share-line img{width:18px;height:18px}

/*
  物件さがしへの案内（ArticleCta.astro）。灰色の枠の右上に「耳」が付いた形。
  耳（::before）と、耳と枠の間のくぼんだ角（::after）を CSS で描いている。
  左上の空いたところに「OSEKKAI ROOMs／TENANTsサイトへ」を置く。
*/
.acta{position:relative;margin-top:80px;padding-top:45px;color:var(--sec)}
/* 色は自分で持つ（記事ページの外＝カテゴリページでも使うため。値は .artcl--living / --business と同じ） */
.acta--living{--sec:var(--navy);--sec-hover:#0061AA}
.acta--business{--sec:var(--green);--sec-hover:#2EA36A}
.acta::before{
  content:"";position:absolute;right:0;top:0;width:170px;height:46px;
  background:#F5F5F5;border-radius:16px 16px 0 0;
}
.acta::after{
  content:"";position:absolute;right:170px;top:29px;width:16px;height:16px;
  background:radial-gradient(circle at 0 0,transparent 15.5px,#F5F5F5 16px);
}
.acta-ttl{
  position:absolute;left:41px;top:8px;
  font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.08em;transition:color .2s ease;
}
.acta-ttl:hover{color:var(--sec-hover)}
.acta-box{position:relative;padding:40px;background:#F5F5F5;border-radius:16px 0 16px 16px}
.acta-note{font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.08em}
.acta-btns{margin-top:16px;display:flex;gap:8px}
.acta-btn{flex:1;min-width:0;min-height:54px}
.acta .sbar-btn--line{background:#fff}
.acta .sbar-btn--line:hover{background:var(--line-green)}

/* パンくず（記事・カテゴリ・紹介ページで共用）。いちばん下に右寄せで小さく出す */
.crumb{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;
  margin-top:40px;font-size:12px;color:#B8B9B2;letter-spacing:.08em;
}
.crumb a:hover{color:var(--ink-top)}

/* 記事の下の関連記事（TOPの一覧と同じカード・同じ並び） */
.rel{margin-top:120px}
.rel-ttl{text-align:center;font-size:24px;font-weight:600;line-height:1.4;letter-spacing:.08em;color:var(--ink-top)}
.rel .tgrid{margin-top:40px}
.tmore-btn--link{padding:10px 16px}

/* =========================================================
   記事を読み進めやすくする部品（2026-10-29 古舘さん「内容はいいけど硬い。読み進めやすく」）
   - 読み進み具合のバー（.artcl-progress）… 画面のいちばん上の細い線。色は区分（--sec）
   - 吹き出し（.atalk）… 本文の ```talk を lib/talk.ts が描き換えたもの。左＝お客様、右＝担当者（書き手の顔）
   - LINEの案内（.aline）… 本文の ```line を lib/lineBlock.ts が描き換えたもの
   - 監修（.artcl-sv）… 管理画面で監修者（宅地建物取引士）を選んだ記事の本文の後
   ========================================================= */
.artcl-progress{
  position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:60;height:3px;pointer-events:none;
}
.artcl-progress-bar{
  display:block;height:100%;background:var(--sec);transform:scaleX(0);transform-origin:left center;
  transition:transform .1s linear;
}

.artcl-body .atalk{display:flex;flex-direction:column;gap:20px}
.atalk-line{display:flex;align-items:flex-start;gap:12px}
/* 担当者は右側。顔を右に置くため並びを逆にする */
.atalk-line--staff{flex-direction:row-reverse}
/* ⚠ .artcl-body img（本文の写真＝横幅いっぱい・角丸16px）に負けないよう .artcl-body を付けて指定する */
.artcl-body .atalk-face{flex-shrink:0;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#F3F1F0}
.atalk-bubble{
  position:relative;max-width:min(520px,calc(100% - 60px));padding:12px 16px;border-radius:16px;
  background:#F5F5F5;line-height:1.9;
}
/* 担当者の吹き出しは区分の色を薄く敷く（住まい＝青・店舗＝緑） */
.artcl--living .atalk-line--staff .atalk-bubble{background:#EDF3FF}
.artcl--business .atalk-line--staff .atalk-bubble{background:#EAF7F0}
/* 吹き出しの口。顔のある側に小さな三角を出す */
.atalk-bubble::before{
  content:"";position:absolute;top:16px;width:0;height:0;border:7px solid transparent;
}
.atalk-line--guest .atalk-bubble::before{left:-13px;border-right-color:#F5F5F5}
.artcl--living .atalk-line--staff .atalk-bubble::before{right:-13px;border-left-color:#EDF3FF}
.artcl--business .atalk-line--staff .atalk-bubble::before{right:-13px;border-left-color:#EAF7F0}
.atalk-who{font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:var(--gray)}
.atalk-line--staff .atalk-who{color:var(--sec)}
.atalk-text{margin-top:2px;font-size:15px;letter-spacing:.06em}
/* 記事の頭に置いた吹き出し（読者の声で始める記事）は、入口として少し大きく太く。
   字が大きいぶん、吹き出しの幅の上限を外す（520px だと「…でし／た。」のように最後の1字だけ折り返した） */
.artcl-body > .atalk:first-child .atalk-text{font-size:18px;font-weight:600}
.artcl-body > .atalk:first-child .atalk-bubble{max-width:calc(100% - 60px)}

/* =========================================================
   記事ページの右の列（ArticleRail.astro）＝広いPC（1280px以上）だけの3列目
   2026-10-29 古舘さん「PCの左右の余白が気になる。右側はバナーにして3列構成に」。
   左のメニュー（.sbar）｜記事｜この列。記事の頭の目次は、この幅では右の列へ移す（読み進めてもついてくる）。
   1280px より狭いと記事の列が細くなりすぎるので、今までどおり1列（この列は出さない）。
   ========================================================= */
.arail{display:none}
@media(min-width:1280px){
  .artcl-layout{
    display:grid;grid-template-columns:minmax(0,720px) 280px;gap:48px;justify-content:center;padding:0 32px;
  }
  .artcl-layout > .artcl{max-width:none;margin:0;padding-left:0;padding-right:0}
  .artcl-layout .artcl-toc{display:none}
  .arail{display:flex;flex-direction:column;gap:20px;padding-top:64px}
}
.arail-bn{
  position:relative;display:block;height:200px;padding:22px;border-radius:20px;overflow:hidden;color:var(--ink-top);
  box-shadow:0 10px 28px rgba(25,45,80,.10),0 2px 6px rgba(25,45,80,.05);transition:transform .2s ease;
}
.arail-bn:hover{transform:translateY(-2px)}
.arail-bn--living{background:#EEF3FB;--bn:var(--navy)}
.arail-bn--business{background:#EDF7F2;--bn:var(--green)}
/* 文字は絵より手前（絵が大きいと文字にかぶるため） */
.arail-bn-sub{position:relative;z-index:2;display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--bn)}
.arail-bn-ttl{position:relative;z-index:2;display:block;margin-top:8px;font-family:var(--ff-zen);font-size:24px;font-weight:900;line-height:1.3;color:var(--bn)}
/* 「店舗・事務所を」は字数が多く、女性の絵にかぶっていた（2026-10-29）。字を少し小さく、絵を小さく右へ寄せる */
.arail-bn--business .arail-bn-ttl{font-size:21px}
.arail-bn-go{
  position:absolute;left:22px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:999px;background:var(--bn);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;
}
.arail-bn-fig{position:absolute;z-index:1;bottom:6px;right:-6px;height:150px;width:auto}
.arail-bn-fig--business{height:128px;right:-14px}
.arail-bn-town{position:absolute;left:0;right:0;bottom:0;width:100%;height:34px;object-fit:cover;opacity:.9}
.arail-bn--line{height:auto;background:var(--line-green);color:#fff}
.arail-faces{display:flex;margin-bottom:12px}
.arail-faces img{width:36px;height:36px;margin-right:-8px;border:2px solid var(--line-green);border-radius:50%;background:#fff}
.arail-line-ttl{display:block;font-size:17px;font-weight:700;line-height:1.5}
.arail-line-note{display:block;margin-top:6px;font-size:12px;line-height:1.7}
.arail-line-btn{
  margin-top:14px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:999px;
  background:#fff;color:var(--line-green);font-size:14px;font-weight:700;
}
.arail-toc{position:sticky;top:24px;padding:18px 20px;border-radius:16px;background:#F7F6F4}
.arail-toc-ttl{margin-bottom:8px;font-size:14px;font-weight:700;letter-spacing:.08em}
.arail-toc ol{margin:0;padding:0;list-style:none;counter-reset:arail-toc}
.arail-toc li{counter-increment:arail-toc;display:flex;gap:10px;padding:6px 0;font-size:13px;line-height:1.6}
/* 目次の番号は記事の区分の色（右の列は記事の外にあるので .artcl の --sec を受け継げない） */
.arail--living{--rail-sec:var(--navy)}
.arail--business{--rail-sec:var(--green)}
.arail-toc li::before{content:counter(arail-toc);min-width:14px;font-family:var(--ff-zen);font-weight:900;color:var(--rail-sec)}
.arail-toc a{color:var(--ink-top)}
.arail-toc a:hover{color:var(--rail-sec);text-decoration:underline}

/* 小さい形（スマホのメニューで2枚を横に並べるとき・PromoBanner の compact） */
.arail-bn--compact{height:150px;padding:16px;border-radius:16px}
.arail-bn--compact .arail-bn-sub{font-size:9px;letter-spacing:.1em}
.arail-bn--compact .arail-bn-ttl{margin-top:6px;font-size:18px}
.arail-bn--compact.arail-bn--business .arail-bn-ttl{font-size:15px}
.arail-bn--compact .arail-bn-go{left:16px;bottom:14px;gap:4px;padding:5px 10px;font-size:11px}
.arail-bn--compact .arail-bn-go img{width:12px;height:12px}
.arail-bn--compact .arail-bn-fig{height:100px;right:-12px}
.arail-bn--compact .arail-bn-fig--business{height:88px;right:-20px}
.arail-bn--compact .arail-bn-town{height:24px}

/*
  記事の途中（LINE）と終わり（物件さがし）の絵入りバナー（ArticleView の .ainl）。
  2026-10-29 古舘さん「記事詳細ページが寂しい」→ 案4。右の列が出る広いPCでは同じものが右にあるので出さない。
  右の列が出ない幅では、記事の終わりの灰色の案内（.acta）を、この絵入りバナーに置き換える。
*/
.ainl{margin-top:56px}
.ainl .arail-bn{max-width:560px;margin:0 auto}
/* 途中のバナーで分けた後ろの本文。見出しの番号は前の本文の続きから数える（counter のスコープは後ろの兄弟に続く） */
.artcl-body--rest{counter-reset:none;margin-top:72px}
@media(min-width:1280px){
  .ainl{display:none}
  .artcl-body--rest{margin-top:88px}
}
@media(max-width:1279px){
  .artcl > .acta{display:none}
}

.artcl-body .aline{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  border:1px solid #DCEFE4;border-radius:8px;background:#F4FBF7;
}
.aline-text{font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.06em}
/* ⚠ .artcl-body a（本文のリンク＝区分の色・下線）と .artcl-body img に負けないよう .artcl-body を付けて指定する */
.artcl-body .aline-btn{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line-green);background:#fff;color:var(--line-green);text-decoration:none;
  font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.08em;white-space:nowrap;
  transition:background-color .2s ease;
}
.artcl-body .aline-btn:hover{background:#E6F8EE}
.artcl-body .aline-btn img{display:block;width:20px;height:20px;border-radius:0}

.artcl-sv{margin-top:56px;padding:24px;border:1px solid #F3F1F0;border-radius:16px;background:#FAFAF9}
/* 見出しは本人の言葉（「この記事は、私が監修しました。」）。区分の色で少し大きめに */
.artcl-sv-head{font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.08em;color:var(--sec)}
.artcl-sv-row{margin-top:16px;display:flex;align-items:center;gap:16px}
.artcl-sv-face{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.artcl-sv-name{min-width:0;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.08em}
.artcl-sv-title{margin-left:12px;font-size:13px;font-weight:400;color:var(--gray)}
/* 自己紹介はユーザー管理で書いた改行をそのまま出す */
.artcl-sv-note{margin-top:14px;font-size:14px;line-height:1.9;letter-spacing:.06em;color:var(--ink-2);white-space:pre-line}

@media(max-width:690px){
  .artcl-body .atalk-face{width:40px;height:40px}
  .atalk-bubble{max-width:calc(100% - 52px);padding:10px 14px}
  .atalk-bubble::before{top:12px}
  .atalk-text{font-size:14px}
  /* 狭い画面では文の下にボタンを置く */
  .artcl-body .aline{flex-direction:column;align-items:stretch;padding:16px}
  .artcl-body .aline-btn{justify-content:center}
  .artcl-sv{padding:20px 16px}
  .artcl-sv-row{gap:14px}
  .artcl-sv-face{width:48px;height:48px}
}

@media(max-width:990px){
  .artcl{padding-top:48px}
  /* 狭い画面は上に固定の帯（.header）があるので、そのぶん下で止める */
  .artcl-body h2{scroll-margin-top:96px}
  .artcl-ttl{font-size:28px}
}
@media(max-width:690px){
  .artcl{padding-top:32px}
  .artcl-ttl{font-size:22px}
  .artcl-hero{border-radius:16px}
  .artcl-writer{gap:16px;padding:20px 16px}
  .artcl-writer-face{width:48px;height:48px}
  .artcl-toc-list{padding:16px}
  .artcl-toc-list li{font-size:14px}
  .artcl-body{font-size:15px;line-height:2.4}
  .artcl-body > ul,.artcl-body > ol{padding:24px 16px}
  .artcl-body h2{font-size:19px;padding:24px 18px 24px 64px}
  .artcl-body h2::before{left:18px;top:16px;font-size:40px}
  .artcl-body h2:has(+ .aans){padding-bottom:48px}
  .artcl-body > * + h2{margin-top:72px}
  .artcl-body .ah2-fig{right:14px;bottom:calc(100% - 18px);height:72px}
  /* 上の固定の帯（62px）＋帯の上にはみ出した絵のぶん */
  .artcl-body h2:has(.ah2-fig){scroll-margin-top:132px}
  .artcl-body blockquote{padding-top:36px}
  .artcl-body blockquote::before{font-size:88px}
  .artcl-body blockquote p{font-size:20px}
  .artcl-body > .aans{margin:-30px 8px 0 20px;padding:16px 16px 16px 66px}
  .artcl-body .aans-face{left:14px;width:38px;height:38px}
  .aans-text{font-size:15px}
  /* 表は横にあふれさせず、狭い画面では横スクロールにする */
  .artcl-body table{display:block;overflow-x:auto;padding:16px;table-layout:auto}
  .artcl-body th,.artcl-body td{white-space:nowrap}
  .share,.acta{margin-top:56px}
  /* 狭い画面では耳の形をやめ、サイト名を枠の中に入れる */
  .acta{padding-top:0}
  .acta::before,.acta::after{display:none}
  .acta-ttl{position:static;display:block;padding:24px 24px 0;background:#F5F5F5;border-radius:16px 16px 0 0;font-size:16px}
  .acta-box{padding:12px 24px 24px;border-radius:0 0 16px 16px}
  .acta-btns{flex-direction:column}
  .crumb{justify-content:flex-start}
  .rel{margin-top:80px}
  .rel-ttl{font-size:20px}
  /*
    記事の下の「ほかの記事を読む」は、1枚が画面いっぱいで指で送る距離が長かったので、
    小さめのカードを横に並べて指で横に送る形にする（2026-10-29 古舘さん「記事詳細ページが寂しい」→ 案6）。
    次のカードの端を少し見せて、横に続くことが分かるようにする。左右は .tmain の余白（20px）ぶん画面の端まで広げる
  */
  .rel .tgrid{
    display:flex;gap:16px;margin:24px -20px 0;padding:0 20px 8px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding:0 20px;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .rel .tgrid::-webkit-scrollbar{display:none}
  .rel .tgrid > .acard{flex:0 0 78%;scroll-snap-align:start}
}

/* 404 のボタンも同じ形に揃える（サイトの中でボタンの顔を1つにする） */
.nf-actions{flex-direction:column;align-items:center}
.nf-actions .chip{
  width:100%;max-width:320px;justify-content:center;
  padding:20px 24px;border:1px solid var(--navy);border-radius:9px;background:transparent;
  font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--navy);
}
.nf-actions .chip::before{display:none}
.nf-actions .chip:hover{background:var(--navy-tint);border-color:var(--navy)}

/* =========================================================
   フッター（Figma「メディアサイト／TOP」の footer）
   ⚠ 右上の「PAGE TOP」の絵はフッターの上端から 120px 上へはみ出している。
   直前の要素とぶつからないよう、margin-top はそれより大きく取ること
   ========================================================= */
.footer{
  position:relative;margin-top:160px;padding:120px 80px 80px;
  background:var(--beige);border-radius:40px 40px 0 0;color:var(--ink-top);
}
.footer-in{max-width:1280px;margin:0 auto}
.footer-logo{display:inline-flex;align-items:center;gap:16px;padding:8px}
.footer-logo .tlogo-mark{width:96px;height:96px}
.footer-logo .tlogo-word{font-size:40px}
.footer-row{margin-top:32px;display:flex;align-items:flex-start;gap:40px 160px}
/* 幅は Figma の 391px を最小にし、電話番号の行（1行で出す）が収まらなければ広げる */
.footer-brand{min-width:min(391px,100%);max-width:100%}
.footer-catch{font-family:var(--ff-zen);font-size:40px;font-weight:900;line-height:1.4;letter-spacing:.08em}
.footer-catch em{color:var(--blue-catch)}
/* 宅建業の広告表示義務があるので、会社名・所在地・免許番号・電話は必ず残すこと */
.footer-info{margin-top:24px;font-size:14px;line-height:2;letter-spacing:.08em}
/* 注記は inline-block にして、括弧の途中で折り返さないようにする */
.footer-info-note{display:inline-block}
.footer-nav{display:flex;align-items:center;gap:24px 72px}
.footer-nav-col{display:flex;flex-direction:column;gap:16px}
.footer-nav-col:first-child{width:191px}
/* フッターのリンクはホバーで紺（--navy）になる。矢印・Instagram のアイコンも文字と一緒に色が変わる */
.footer-nav a,.footer-info a,.footer-privacy,.footer-follow,.footer-top-txt{transition:color .2s ease}
.footer-nav a:hover,.footer-info a:hover,.footer-privacy:hover,.footer-follow:hover,
.footer-top:hover .footer-top-txt{color:var(--navy)}
.footer-nav a{
  display:inline-flex;align-items:center;gap:3px;
  font-size:16px;line-height:1.6;letter-spacing:.08em;white-space:nowrap;
}
/* 矢印アイコンは 20px の枠の中に描かれている（Figma の arrow 2）。枠ごと再現する */
.footer-nav .arrow-icon{box-sizing:content-box;width:15.16px;height:15.65px;padding:2.17px 2.43px 2.18px 2.41px;flex-shrink:0}
.footer-bottom{
  margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;
  padding:24px;border-radius:16px;background:#FDFDFC;
  font-size:12px;font-weight:400;line-height:1.2;letter-spacing:.08em;color:#666;
}
.footer-privacy{text-decoration:underline;text-underline-offset:2px}
.footer-follow{display:flex;align-items:center;gap:16px}
.footer-follow .instagram-icon{width:24px;height:24px;flex-shrink:0}

/* PAGE TOP（歩く人）。押すとページの先頭へ戻る */
.footer-top{
  position:absolute;right:40px;top:-120px;display:flex;align-items:flex-start;
  transform-origin:top right;
}
.footer-top-illu{position:relative;width:208px;height:303px}
.footer-top-shadow{position:absolute;left:0;top:248px;width:208px;height:55px;max-width:none}
/* 人物は Figma で左右反転して置いてある */
.footer-top-man{position:absolute;left:28px;top:0;width:152px;height:279px;transform:scaleX(-1)}
.footer-top-txt{
  writing-mode:vertical-rl;width:17px;
  font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.08em;color:#000;white-space:nowrap;
}

@media(max-width:1280px){
  .footer{padding:120px 56px 80px}
  .footer-row{column-gap:80px}
}
@media(max-width:990px){
  .footer{margin-top:140px;padding:100px 40px 40px}
  .footer-row{flex-direction:column}
  .footer-logo .tlogo-mark{width:72px;height:72px}
  .footer-logo .tlogo-word{font-size:30px}
  .footer-catch{font-size:32px}
  .footer-top{right:24px;top:-100px;transform:scale(.8)}
}
@media(max-width:690px){
  .footer{margin-top:120px;padding:88px 20px 32px;border-radius:24px 24px 0 0}
  .footer-logo .tlogo-mark{width:56px;height:56px}
  .footer-logo .tlogo-word{font-size:22px}
  .footer-row{margin-top:24px}
  .footer-catch{font-size:24px}
  .footer-info{font-size:12px}
  .footer-nav{align-items:flex-start;gap:16px 24px}
  .footer-nav-col{gap:12px}
  .footer-nav-col:first-child{width:auto}
  .footer-nav a{font-size:13px;white-space:normal}
  .footer-bottom{flex-direction:column;padding:20px}
  .footer-top{right:12px;top:-84px;transform:scale(.6)}
}

/* =========================================================
   公開前プレビューの帯
   公開ページと見間違えないための注意書き。これより下は本番とまったく同じ見え方にする
   ========================================================= */
.pv-bar{background:var(--navy);color:#fff;padding:12px 0}
.pv-bar-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pv-bar-tag{
  font-size:12px;font-weight:700;letter-spacing:.08em;background:rgba(255,255,255,.18);
  border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.pv-bar-note{font-size:12px;color:rgba(255,255,255,.85);letter-spacing:.04em}
@media(max-width:600px){
  .pv-bar-note{font-size:12px}
}

/* =========================================================
   おせっかい不動産について（/about）

   中身は cloud のマイページ下部と同じ。見た目は TOP・記事ページの刷新後のデザインに合わせる（2026-10-27）。
   - 地は白、幅と左右の余白は TOP と同じ .tmain
   - 見出しは TOP の区画見出し（.tsec-ttl / .tsec-desc）をそのまま使う
   - 枠は記事の表・図・箇条書きと同じ灰色（#F5F5F5・角丸8px）、区切りは点線
   色は紺だけ（住まい・店舗のどちらの読者も来るページなので、青／緑の区分色は使わない）。
   ========================================================= */
.page-about{background:#fff}
.ab{--sec:var(--navy);--sec-en:var(--blue-catch);--ab-line:rgba(36,48,66,.3);padding-top:80px}
.ab-sec + .ab-sec{padding-top:120px}
.ab-nobr{display:inline-block}

/* 冒頭の見出し。Figma では英字も本文と同じ書体（Medium）で、頭2文字は紺 */
.ab-head .tsec-en{font-family:var(--ff-jp);font-weight:500}
.ab-head .tsec-en em{color:var(--navy)}

/*
  6つのお約束（Figma 2011:1754）。灰色の箱を2pxの白い隙間で敷き詰め、外側だけ角丸8px。
  3列の各列で上下2枚が高さを分け合う（中央の列は 02 の文章が長いぶん、区切りが下にずれる）。
*/
.ab-promises{margin-top:40px;display:flex;gap:2px;border-radius:8px;overflow:hidden}
.ab-promise-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.ab-promise{flex:1 0 auto;display:flex;flex-direction:column;padding:24px;background:#F5F5F5;color:var(--navy)}
.ab-promise-head{display:flex;justify-content:space-between;align-items:flex-start}
.ab-promise-ttl{font-size:24px;font-weight:600;line-height:1.4;letter-spacing:.08em}
/* 黄色い線は文字の下半分に重ねる（線の高さ8px・行の下端から4px上）。下線にしておけば行をまたいでも切れない */
.ab-promise-mark{
  text-decoration:underline #F4E179;text-decoration-thickness:.334em;text-underline-offset:-.17em;
  text-decoration-skip-ink:none;
}
.ab-promise-no{flex-shrink:0;font-size:12px;line-height:1;letter-spacing:.08em}
.ab-promise-body{margin-top:16px;font-size:12px;line-height:1.8;letter-spacing:.08em}

/* お約束の下の区切り線 */
.ab-rule{margin-top:80px;border:0;border-top:2px dashed #E2E2E2}

/* 代表が書いた記事へのカード。ホバーで見出しが紺に変わる */
.ab-note{
  display:flex;align-items:center;gap:32px;margin-top:56px;padding:24px;border-radius:8px;background:#F5F5F5;
  color:var(--ink-top);
}
.ab-note-img{width:min(280px,38%);height:auto;flex-shrink:0;border-radius:4px}
/* 横並びの中で長い文章がはみ出さないようにする */
.ab-note-body{min-width:0}
.ab-note-ttl{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.08em;transition:color .2s ease}
.ab-note:hover .ab-note-ttl{color:var(--sec)}
.ab-note-lead{margin-top:8px;font-size:14px;line-height:1.9;letter-spacing:.08em}
.ab-note-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--sec);
}

/* 運営会社。ロゴはサイドバー・フッターと同じもの */
.ab-brand{margin-top:40px;display:flex;align-items:center;gap:16px}
.ab-brand-name{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:.08em;color:var(--sec)}
.ab-brand-sub{margin-top:4px;font-size:12px;letter-spacing:.04em;color:var(--gray)}
.ab-lead{margin-top:24px;max-width:760px;font-size:16px;line-height:2;letter-spacing:.08em;color:var(--ink-top)}

/* オフィスの写真。1枚目だけ横いっぱい */
.ab-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.ab-photo--wide{grid-column:1 / -1}
/*
  ⚠ 写真に height:100% を付けないこと。グリッドの升目は既定で縦に伸びる（stretch）ため、
  写真が升目いっぱいまで伸び、**キャプションが升目の外へはみ出して下の要素に重なる**
  （実際に「エントランス」がスタッフの行に重なった）。高さは aspect-ratio に決めさせる。
*/
.ab-photo{align-self:start}
.ab-photo img{width:100%;height:auto;object-fit:cover;aspect-ratio:16/10;border-radius:8px}
.ab-photo--wide img{aspect-ratio:16/7}
.ab-photo figcaption{margin-top:8px;font-size:12px;color:var(--gray);letter-spacing:.04em}

/* スタッフの顔写真。少しずつ重ねる */
.ab-staff{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:14px;color:var(--ink-top);letter-spacing:.08em}
.ab-staff-faces{display:flex}
.ab-staff-faces img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;background:var(--navy-tint);
}
.ab-staff-faces img + img{margin-left:-10px}

/*
  会社概要。記事の表と同じ組み方（灰色の地の上に白い行、点線で区切る）。
  ⚠ 宅建業の広告表示にあたるので、免許番号の行を消さないこと。
*/
.ab-profile{margin-top:40px;padding:32px;border-radius:8px;background:#F5F5F5}
.ab-profile-row{display:grid;grid-template-columns:200px minmax(0,1fr);background:#fff;border-bottom:1px dashed var(--ab-line)}
.ab-profile-row:first-child{border-top:1px dashed var(--ab-line)}
.ab-profile-row dt,.ab-profile-row dd{padding:16px;font-size:14px;line-height:1.6;letter-spacing:.08em;color:var(--ink-top)}
.ab-profile-row dt{font-weight:600;border-right:1px dashed var(--ab-line)}
.ab-profile-row dd{font-weight:500}

/* 実績・体制。記事の箇条書きと同じ枠と点 */
.ab-records{margin-top:40px;padding:32px;border-radius:8px;background:#F5F5F5}
.ab-records-ttl{font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:var(--ink-top)}
.ab-records ul{margin-top:16px;list-style:none}
.ab-records li{
  position:relative;padding-left:32px;font-size:16px;font-weight:500;line-height:1.6;letter-spacing:.08em;color:var(--ink-top);
}
.ab-records li + li{margin-top:8px}
.ab-records li::before{content:"";position:absolute;left:8px;top:calc(.8em - 4px);width:8px;height:8px;border-radius:50%;background:var(--sec)}
.ab-records a{display:inline-flex;align-items:center;gap:6px;color:var(--sec);text-decoration:underline;text-underline-offset:4px}

/* 外部へのリンク。フッターのナビと同じく、文字＋外部リンクの矢印。ホバーで紺 */
.ab-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:32px}
.ab-links a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--ink-top);
  transition:color .2s ease;
}
.ab-links a:hover{color:var(--sec)}

/* 物件さがしへの入口。両方の読者が来るページなので、住まい・店舗・LINE の3つを並べる */
.ab-cta{margin-top:120px;padding:40px;border-radius:8px;background:#F5F5F5}
.ab-cta-ttl{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.08em;color:var(--ink-top)}
.ab-cta-note{margin-top:8px;font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.08em;color:var(--ink-top)}
.ab-cta-btns{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ab-cta .sbar-btn{min-height:54px}
.ab-cta .sbar-btn--line{background:#fff}
.ab-cta .sbar-btn--line:hover{background:var(--line-green)}

/* サイドバーが残る幅では3列だと見出しが語の途中で折り返すので、列の箱を外し、01〜06 を番号順に2列で並べ直す */
@media(max-width:1280px){
  .ab-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-promise-col{display:contents}
}
@media(max-width:990px){
  .ab{padding-top:56px}
  .ab-sec + .ab-sec{padding-top:96px}
  .ab-promise-ttl{font-size:20px}
  .ab-rule{margin-top:64px}
  .ab-cta{margin-top:96px}
  .ab-cta-btns{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:690px){
  .ab{padding-top:40px}
  .ab-sec + .ab-sec{padding-top:80px}
  .ab-promises{grid-template-columns:minmax(0,1fr)}
  .ab-promise{padding:20px}
  .ab-rule{margin-top:48px}
  .ab-note{flex-direction:column;align-items:stretch;gap:16px;padding:16px;margin-top:40px}
  .ab-note-img{width:100%}
  .ab-note-ttl{font-size:16px}
  .ab-lead{font-size:15px}
  .ab-photos{gap:12px}
  .ab-profile,.ab-records{padding:24px 16px}
  .ab-profile-row{grid-template-columns:minmax(0,1fr)}
  .ab-profile-row dt{padding-bottom:0;border-right:0}
  .ab-profile-row dd{padding-top:4px}
  .ab-records li{font-size:15px}
  .ab-cta{margin-top:80px;padding:24px 16px}
}

/* =========================================================
   カテゴリ別の記事一覧（/category-{slug}）

   TOP の区画（.tsec）をそのまま使い、見出しの下にカテゴリの切り替え（.cchips）を挟む。
   下の物件さがしへの入口は記事ページと同じ .acta（ArticleCta.astro）。
   ========================================================= */
.page-category{background:#fff}
.page-category .cchips{margin-top:32px}
@media(max-width:690px){
  .page-category .cchips{margin-top:24px}
}

/* =========================================================
   404
   ========================================================= */
.nf{max-width:640px;margin:0 auto;padding:120px var(--gutter);text-align:center}
.nf-code{font-family:var(--ff-en);font-size:clamp(64px,14vw,120px);font-weight:500;color:var(--line);line-height:1}
.nf-ttl{margin-top:12px;font-size:18px;font-weight:700;letter-spacing:.08em}
.nf-lead{margin-top:14px;font-size:13px;color:var(--gray);letter-spacing:.04em}
.nf-actions{margin-top:32px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:767px){.nf{padding:80px var(--gutter)}}

/* =========================================================
   空の状態
   ========================================================= */
.empty{
  border:1px dashed var(--line);border-radius:8px;padding:56px 24px;text-align:center;
  color:var(--gray);font-size:13px;letter-spacing:.04em;background:var(--card);
}