@charset "UTF-8";
/* ==========================================================================
   LIFE HOUSE renewal — components.css
   セクション / 見出し / ボタン / カード / テーブル / ステップ 他

   ★ Container Queries の閾値について（触る前に読むこと）
     本文カラム .shell の幅は .site-frame（= var(--site-max) / 現在 500px）で
     頭打ちになる。つまり器は「実機スマホの 320〜430px」か「500px」の
     どちらかしか取り得ない。
     したがって閾値は必ず 500px 未満に置くこと。500px 以上を書くと
     どの環境でも発火しない死にコードになる。
       440px … 実機スマホでは1段、500px 枠のPC表示でだけ2段にしたいとき
     --site-max を変更したときは、このファイルと pages.css の
     @container 閾値をセットで見直すこと。
   ========================================================================== */

.shell {
  container-type: inline-size;
  container-name: shell;
}

/* ==========================================================================
   エディトリアル・プリミティブ
   このデザインの「らしさ」を作っている部品。
   個別のコンポーネントではなく、あちこちに乗せる下地として使う。

   ★ 旧「計器・図面」トーンからの置き換え表（触る前に読むこと）
     .ticks（コーナートンボ）  → 廃止。写真は角丸（--radius-lg）で見せる
     写真の傾き（.frame--tilt-*）→ 廃止（一度入れたが不採用）
     .grid-overlay（方眼）      → 廃止
     .hud（計器帯）             → .masthead（雑誌の柱）
     .meta-strip（データセル）  → .credit（クレジット行）
     .numeral-outline（輪郭数字）→ .numeral（ベタ塗り）
     .tech-dot（点滅ランプ）    → .ed-dot（静止した丸。点滅は廃止）
   旧クラス名は build.py 側からも消してあるので、復活させるときは
   マークアップと CSS を必ずセットで戻すこと。
   ========================================================================== */

/* --- 1. 縦組みタグ ----------------------------------------------------------
   カードの上端から少し飛び出させる、縦組みの札。
   雑誌の見出し脇に差し込む区分タグにあたる。6字程度までを想定。

   ★ 角丸を付けないこと。
     「紙を差し込んだ札」に見せるのが狙いなので、ここだけ直角にしている。
     写真やカードの角丸（--radius-*）とは意図的に対比させている。

   ★ .frame の「外」に置くこと。位置の基準はカード側（position:relative）。
     .frame は overflow:hidden なので、中に入れると上へのはみ出しが
     そこで切り落とされ、ただの重ね置きになる。

   ※ writing-mode: vertical-rl の中では letter-spacing が
     「行の進行方向＝縦」に効く。行間を触りたいときは line-height を使う。 */
.tag-vert {
  position: absolute;
  z-index: 3;
  /* 上へ飛び出す量。深くするほど「差し込んだ札」に寄るが、
     グリッドの行間（--sp-6 相当）を超えると上の段の本文に重なる。
     .tag-vert は絶対配置なので行の高さを押し広げてくれない。
     値を変えたら 390px 幅の2段組みで上の段と当たらないか確認すること。 */
  top: calc(var(--sp-4) * -0.3);
  /* 写真の角丸（--radius-lg = 20px）の内側に入る位置。
     これより左に寄せると、丸みの外＝カードの地の上に札が乗る。 */
  left: var(--sp-4);
  writing-mode: vertical-rl;
  /* upright が無いと数字と欧文だけ横倒しになる（「2階建て」の 2 が寝る）。
     縦組みタグは短い和文＋数字が前提なので、全部立てて揃える。 */
  text-orientation: upright;
  padding: var(--sp-4) 0.4rem var(--sp-3);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(var(--c-ink-rgb), 0.28);
}

.tag-vert--right {
  left: auto;
  right: var(--sp-4);
}

/* 淡色の札（濃い写真の上で使う） */
.tag-vert--paper {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* --- 2. エディトリアルのドット ----------------------------------------------
   ラベル行頭に置く印。旧 .tech-dot の点滅は「計器の稼働ランプ」だったので
   廃止し、静止した丸にした。 */
.ed-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

/* --- 3. マストヘッド --------------------------------------------------------
   ヒーロー上端の柱（雑誌のノド／ページ上部に通す誌名と号数の帯）。
   旧 .hud の座標表示（N33.44 E130.02）は計器そのものだったので、
   誌名・号数の2点に差し替えている。 */
/* ★ min-width:0 は必須。
   マストヘッドはヒーロー（grid）の直接の子で、grid item の既定は
   min-width:auto ＝ min-content。中の項目が white-space:nowrap なので
   min-content が「項目の合計幅」になり、トラックごと横に広がる。
   実測：390px 幅で 411px まで伸び、ヒーローの overflow:hidden に
   41px 切り落とされて「EST.1965」が消えていた（当時はエリア表記も
   挟んでいた。項目が減った今も min-width:0 は外さないこと）。 */
.masthead {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(var(--c-white-rgb), 0.86);
  /* トップ（.statement）はスクリムを撤去したので、写真の明るい部分に
     直接乗る。11px の細字はここが無いと白い空や塗り壁の上で消える。
     下層ページ（.hero-panel）にはスクリムが残っているが、
     .hero-panel__title / __tagline と同じ扱いに揃えておく。 */
  text-shadow: var(--shadow-text);
}

.masthead__sep {
  flex: 1;
  height: var(--tick-w);
  /* スクリムを撤去したぶん、区切り罫も 0.3 では明るい写真の上で飛ぶ。 */
  background: rgba(var(--c-white-rgb), 0.45);
}

.masthead__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

/* 号数だけはディスプレイ書体で少し大きく出す */
.masthead__issue {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: var(--ls-display);
  line-height: 1;
}

/* ※ 以前は誌名と号数のあいだにエリア表記（.masthead__area）を挟み、
   430px 以下では display:none で落としていた。ヘッダー
   （.site-header__place）と同じ文字列で二重だったため撤去済み。
   build.py の MASTHEAD 側からも消してある。 */

/* --- 4. クレジット行 --------------------------------------------------------
   旧 .meta-strip（3分割のデータセル）の置き換え。
   罫で囲ったセルをやめ、雑誌の写真クレジットのように
   「小さなラベル ＋ 値」を見せる。

   ★ 1本の帯に3項目を流し込む構成から、項目ごとに独立した箱を
     横に並べる構成へ変更した。スモークガラスの地は帯ではなく
     「箱それぞれ」が持つ。 */
/* min-width:0 の理由は .masthead と同じ（grid item の min-content 対策）。 */
.credit {
  display: grid;
  /* 3項目を等幅で横並びに。
     ★ 1fr ではなく minmax(0, 1fr) にすること。1fr の下限は min-content
       なので、中身が縮まらない項目があるとトラックが器の外まで広がる
       （.masthead で 390px 幅のときに踏んだのと同じ罠）。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: var(--sp-2);
}

/* 1項目 ＝ 1つの箱。3つは grid の既定（align-items:stretch）で
   自動的に同じ高さに揃うので、高さを指定する必要はない。 */
.credit li {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  /* ピルにしないこと。角が半円だと横並びの3つが数珠つなぎに見える。 */
  border-radius: var(--radius-md);
  background: rgba(var(--c-ink-rgb), 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-white);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-align: center;
  /* ★ white-space:nowrap は付けないこと。
     「唐津・糸島・佐世保」は 375px 幅だと箱の内寸（約90px）に収まらず、
     nowrap のままだと箱からはみ出す。折り返して2行にする。

     ★ そのうえで keep-all が要る。既定の折り返しは和文を1文字単位で
       切るので、390px では「唐津・糸島・佐 / 世保」と地名が割れていた。
       keep-all にすると語中で切れなくなり、中黒の直後（＝唯一の
       break opportunity）で「唐津・糸島・ / 佐世保」と折れる。 */
  word-break: keep-all;
}

.credit .k {
  font-family: var(--font-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(var(--c-white-rgb), 0.6);
}

.credit .v {
  font-weight: 500;
}

/* --- 5. 見せる数字 ----------------------------------------------------------
   旧 .numeral-outline（-webkit-text-stroke の輪郭数字）の置き換え。
   輪郭は「図面」の声だったのでベタ塗りにし、ディスプレイ書体
   （--font-display＝Rubik Mono One）で塊として見せる。
   ベタ塗りなので @supports のフォールバック分岐も不要になった。

   ★ 等幅なので1字 0.85em を食う。3文字以上の語をここに入れると
     器（--site-max 500px）から溢れる。文字列には使わないこと
     （FLOW の "POINT" は .step--point でラベル書体に倒してある）。 */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 9vw, 7rem);
  line-height: 0.78;
  letter-spacing: var(--ls-display);
  color: var(--c-accent);
}

/* 濃色の面の上では明るい側のアクセントに差し替える
   （--c-accent は charcoal 上だと 1.7:1 しか出ない） */
.section--dark .numeral {
  color: var(--c-accent-light);
}

/* 淡い地に敷く「透かし」としての数字 */
.numeral--ghost {
  color: rgba(var(--c-ink-rgb), 0.08);
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.section {
  padding: var(--sp-section) var(--sp-gutter);
}

.section--dark {
  background: var(--c-charcoal);
  color: var(--text-invert);
}

.section--sand {
  background: var(--c-sand);
}

.section--paper {
  background: var(--c-white);
}

/* CONCEPT の地は写真（common/hero-portrait.webp：吹き抜けのリビング）。
   build.py 側で .section--dark と併用しているので、見出し・リード文・
   連番は白文字の指定がそのまま効く（ボタンは .btn--invert）。

   ★ 3枚の重ね順（上から）
     1. インディゴの透過（0.75）… 写真が白壁中心で明るいので、
        これが無いと白文字が読めない。0.75 でリード文（白 78%）が
        写真の一番明るい所でも約 5.5:1 を保つ。薄くするときは測り直すこと。
     2. assets/img/common/hero-portrait.webp … 写真本体（1400×2104）。
     3. --c-charcoal … 画像が落ちてこないときの保険（白文字が読める濃色）。

   ★ このルールは .section--dark より後ろに置くこと。
     .section--dark の background ショートハンドが画像を消してしまう。 */
.section--concept {
  background-image: linear-gradient(
      rgba(var(--c-ink-rgb), 0.1),
      rgba(var(--c-ink-rgb), 0.4)
    ),
    url("../img/common/hero-portrait.webp");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--c-charcoal);
}

/* 和文ラベルは .section--dark の既定（白 60%）だと、写真の明るい所で
   AA を割る。ここだけ リード文と同じ 78% に上げる。
   ※ 後ろにある .section--dark .sec-title__jp に負けないよう、2クラス重ねている。 */
.section--dark.section--concept .sec-title__jp {
  color: rgba(var(--c-white-rgb), 0.78);
}

/* セクション見出し ＝ 雑誌の扉
   1行目に巨大な欧文、2行目に「和文ラベル ／ 罫+通し番号 ／ VIEW ALL
   ボタン」を横一列で流す2行構成のロックアップ。

   ★ 欧文は器の幅いっぱいまで大きくするのが要点。
     --fs-h2 のままだと本文の延長に見えてしまい、扉として立たない。
     器は --site-max（500px）で頭打ちになるので、上限も 500px 基準で決める。

   ★ 和文ラベルは <h2 class="sec-title"> の中（欧文と兄弟）にある。
     見出しのアクセシブルネームを「EVENT イベント」のまま保ちたいので
     マークアップは動かさず、h2 を display:contents にして中の2つの
     <span> を .sec-head 直下のグリッドアイテムに昇格させている。
     （h2 を外して <p> に切り出すと見出し名から和文が消える）

   3点の位置は grid-row / grid-column で明示する。auto-flow 任せにすると
   1行目の欧文（1 / -1 で2本ぶん占有）の右に和文が回り込んでしまう。

   列は 和文=auto ／ 罫+番号=1fr ／ ボタン=auto の3本。VIEW ALL の無い
   セクション（PRICE / COMPANY など）では3本目を引かない。空でも
   トラックを引くと右端に column-gap ぶんの隙間が残り、罫が届かない。

   ★ 真ん中を minmax(0, 1fr) にしているのは必須。min-content 始まりに
     すると、3列をまたぐ1行目の欧文（"PERFORMANCE" で 330px 前後）の寸法がこの列に流れ込んで
     ふくらみ、スマホ幅で VIEW ALL が2行に潰れる。 */
.sec-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-3);
  row-gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.sec-head:not(:has(.btn)) {
  grid-template-columns: auto minmax(0, 1fr);
}

/* .sec-head の外でも使う（ダーク面のカタログ帯 .catalog-band）。
   そちらは欧文と和文を素直に縦積みするだけなので、グリッドのまま残す。
   gap が --sp-2 ではなく --sp-5 なのは .sec-head 側と歩調を合わせるため。
   あちらは row-gap（--sp-3）＋ 和文がボタン（52px 弱）の行の中央に
   来るぶんの余白で、欧文の下に約 25px 空く。ここだけ 8px だと
   同じロックアップなのに窮屈に見える。 */
.sec-title {
  display: grid;
  gap: var(--sp-5);
  line-height: 1;
  min-width: 0;
}

/* 扉の見出しだけ h2 の箱を透過させ、中の2つの <span> を .sec-head の
   グリッドアイテムに昇格させる（和文ラベルを罫・ボタンと同じ行に
   並べるため）。詳しくは上の .sec-head のコメント参照。 */
.sec-head .sec-title {
  display: contents;
}

/* 和文ルビ。「● コンセプト」の小さなラベル。巨大な欧文の「下」、
   2行目の左端に置く（欧文 → 和文の順に読ませる）。
   .sec-head の外（ダーク面のカタログ帯など）でも同じ見た目で使うので、
   グリッド上の位置指定だけ .sec-head 配下に絞ってある。 */
.sec-head .sec-title__jp {
  grid-row: 2;
  grid-column: 1;
}

.sec-title__jp {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: 1;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.sec-title__jp::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-accent);
}

/* 扉の欧文の「置き場所」。見た目は下の .sec-title__en が持つ。
   .sec-title__en は全ページ共通のクラスで、EVENT / CONCEPT から
   MESSAGE / STAFF / OUTLINE まで同じ組み方で出る。 */
.sec-head .sec-title__en {
  grid-row: 1; /* 1行目を独占。2行目の3点セットとは別行にする */
  grid-column: 1 / -1;
  justify-self: start;
}

/* --- 欧文見出し（Anton）---------------------------------------------------
   セクション見出しと下層ページのヒーロー見出しは、Anton の素のテキスト。
   飾り（輪郭・点線・グラデーション等）は付けない。

   ★ 大きさは --en-cap（大文字の高さ）で指定し、ここで font-size に換算する。
     Anton のキャップハイトは 0.86em（実測）。
   ★ line-height: 1 で、大文字の上下の余白がほぼ均等になる
     （Anton は ascent 1.177 / descent 0.33 なので、1 に詰めると
      キャップの上 0.06em・ベースラインの下 0.08em ほどが残る）。 */
.sec-title__en,
.hero-panel__en {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(var(--en-cap) / 0.86);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--en-fill);
}

/* ダーク面（CATALOG 帯）では字を白に。 */
.section--dark {
  --en-fill: var(--c-white);
}

/* 欧文の下に流す罫と通し番号「———————— ( 03 )」。

   ★ マークアップを持たせず CSS カウンタで出している。
     番号はページ内の .sec-head の出現順に振られるので、build.py 側で
     セクションを足す／並べ替えるだけで自動的に採番し直される。
     （手で番号を書く方式にすると、並べ替えのたびに全ページの
       付け直しが必要になり、必ずどこかが取り残される）

   罫は擬似要素の background（1pxのグラデーション）で描いている。
   罫用に要素をもう1つ増やさずに「罫 → 数字」を1行に並べるため。
   background-size の 4em が数字の逃げ幅。数字の書式を変えるときは
   ここも合わせて調整すること（足りないと罫が数字の下に潜り込む）。
   ※ 和文ラベル・ボタンと同じ行に入れて幅が半分以下になったので、
     以前の 5.5em ではスマホ幅で罫が消えてしまう。数字の実寸（約40px）
     ＋ 少しの余白で足りる 4em に詰めてある。 */
main {
  counter-reset: sec;
}

.sec-head {
  counter-increment: sec;
}

.sec-head::after {
  content: "( " counter(sec, decimal-leading-zero) " )";
  display: block;
  grid-row: 2; /* 2行目の真ん中。和文ラベルの右・VIEW ALL の左 */
  grid-column: 2;
  text-align: right;
  white-space: nowrap; /* 狭い画面でも「( 01 )」を折り返さない */
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--c-flare); /* セクション連番は差し色ポイント。ダーク面は下の .section--dark で個別に上書き */
  background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat;
  background-size: calc(100% - 4em) var(--tick-w);
  background-position: left center;
}

/* 「VIEW ALL →」は 2行目の右端。共通の .btn（ピル型・ホバーで左から
   塗りワイプ）をそのまま使うが、器が 500px しかない見出し脇なので
   .btn の既定サイズ（min-height 52px / padding 2rem）では罫の逃げ幅を
   食い潰す。ここだけ一回り小さく詰める。 */
.sec-head .btn {
  grid-row: 2;
  grid-column: 3;
  justify-self: end;
  gap: var(--sp-2);
  min-height: 0;
  padding: 0.5rem var(--sp-4);
  font-size: var(--fs-micro);
}

.sec-head .btn svg {
  width: 12px;
  height: 12px;
}

/* ※ ダーク面の見出しに VIEW ALL を足すときは、他のボタンと同じく
   マークアップ側で class="btn btn--invert" にすること（ここでは
   面の判定をしていない）。 */

.section--dark .sec-head::after {
  color: rgba(var(--c-white-rgb), 0.66);
  background-image: linear-gradient(var(--line-invert), var(--line-invert));
}

.section--dark .sec-title__jp::after {
  background: var(--line-invert);
}

.section--dark .sec-title__jp::before {
  background: var(--c-accent-light);
}

.section--dark .sec-title__jp {
  color: rgba(255, 255, 255, 0.6);
}

/* セクション内の小見出し。sec-title より必ず一段小さくする */
.sub-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-accent);
}

.sub-text {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

.sec-lead {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-sub);
}

.section--dark .sec-lead {
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */
/* ボタンは「雑誌の応募ハガキのボタン」。角丸のピル形で、
   大字間のラベル書体。ホバーで面が左から塗りつぶされる。
   （旧版は角丸なしの「計器スイッチ」だった） */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0.75rem var(--sp-6);
  border: var(--tick-w) solid var(--c-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

/* ホバーの塗りは background の切り替えではなく擬似要素のワイプ（左→右）。
   isolation:isolate で自前の重なり文脈を作っているので、z-index:-1 の
   ::before は「自分の背景より上・自分のテキストより下」に入る。
   isolation を外すとワイプがセクション背景の裏に回って見えなくなる。 */
.btn {
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn:hover {
  color: var(--c-white);
  border-color: var(--c-accent);
}

.btn--fill {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}

.btn--invert {
  border-color: var(--line-invert);
  color: var(--c-white);
}

.btn--invert::before {
  background: var(--c-white);
}

.btn--invert:hover {
  color: var(--c-ink);
  border-color: var(--c-white);
}

.btn--block {
  width: 100%;
}

.btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform var(--dur-2) var(--ease);
}

.btn:hover svg {
  transform: translateX(4px);
}

/* テキストリンク（VIEW ALL 等） */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: var(--tick-w) solid var(--line-strong);
  white-space: nowrap;
}

.link-more svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  transition: transform var(--dur-2) var(--ease);
}

.link-more:hover {
  border-color: currentColor;
}

.link-more:hover svg {
  transform: translateX(4px);
}

.section--dark .link-more {
  border-color: var(--line-invert);
}

/* --------------------------------------------------------------------------
   Grid utilities（コンテナ幅で段数が変わる）
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--sp-5);
}

@container shell (min-width: 440px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Media frame（画像の共通枠。CLS 防止に aspect-ratio を必ず指定）
   -------------------------------------------------------------------------- */
/* 写真枠。旧版は四隅にコーナートンボ（.ticks）を乗せていたが、
   トンボは「図面・印刷指示」の声そのものだったので廃止し、
   角丸だけで見せる。角丸は雑誌のスクラップの手触りを作る最大の要素。

   ※ overflow:hidden と border-radius はセットで必要。
     角丸だけ付けても中の img は矩形のままはみ出す。 */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-sand);
}

/* 写真の上に文字を乗せる枠だけ、下端に向かって暗く落とす。
   角丸の内側に収まるよう .frame の子として敷く。 */
.frame--shaded::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--c-ink-rgb), 0.55) 0%,
    rgba(var(--c-ink-rgb), 0) 58%
  );
}

/* 切り抜き素材（スタッフ）は淡い地に置くので、角丸を強めて丸く見せる */
.staff-card .frame {
  border-radius: var(--radius-pill);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.frame--16x9 {
  aspect-ratio: 16 / 9;
}

.frame--3x2 {
  aspect-ratio: 3 / 2;
}

.frame--4x5 {
  aspect-ratio: 4 / 5;
}

.frame--1x1 {
  aspect-ratio: 1;
}

a:hover .frame img {
  transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   Event card
   -------------------------------------------------------------------------- */
/* 段組みは
     見出し（全幅）
     画像  ｜ タグ ＋ メタ情報
   の2段。タグは見出しの隣ではなくメタと同じ列の先頭に置き、
   「区分 → 詳細」で1つの情報ブロックとして読ませる。
   結果として右列（約140px）と画像列（135px）の高さがほぼ揃う。
   タグを見出し側に置くと右列は102pxしかなく、画像の横に34pxの
   余白が残ってしまう。

   ★ 面と枠は必ず持たせること。
     以前は下罫1本だけの一覧だったが、そのときは
     「左の写真が全高を貫いてカードの左辺と高さを同時に決めていた」ので
     囲いが無くても1コンテンツに見えていた。
     見出しを上段に出して写真が2段目の小ブロックになった時点で
     その錨が消え、カードとして読めなくなる。
     rail-card / plan-card / warranty__item と同じ「白面＋罫」に揃える。 */
.event-card {
  border-radius: var(--radius-lg);
  position: relative; /* 左下の四角（::after）の基準 */
  overflow: hidden; /* 角丸に沿って::afterの四角を切り取る（rail-cardと同じ仕組み） */
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "media info";
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--line);
  align-items: start;
  transition: border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* design01 のカードと同じ、左下に掛かるインディゴの四角。
   写真は左padding(16px)の内側にあるので、-6px に出しても重ならない。 */
/* イベントカードの写真は上部の左右だけを丸める。
   カード自体が角丸の白面なので、写真まで四隅を丸めると
   丸が二重に入って輪郭がぼやける。下辺は直角のまま本文へ受け渡す。 */
.event-card .frame {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* カード左下の印。rail-card（PC余白のカード）と同じ、
   左下へ掛かる直角の小さな四角に揃える。
   ここは面積が小さい差し色ポイントなので --c-flare（テラコッタ）を使う。 */
.event-card::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
  background: var(--c-flare);
  transition: transform var(--dur-2) var(--ease-out);
}

.event-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.event-card:hover::after {
  transform: scale(1.25);
}

/* 1段目：見出しは全幅を使う */
.event-card__title {
  grid-area: title;
}

/* 2段目の右列。タグ → メタ情報 の縦積みで1ブロックにする */
.event-card__info {
  grid-area: info;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  /* justify-items は既定の stretch のまま。
     メタ情報は列いっぱいに広げたいので start にしないこと
     （start にすると ul が内容幅に縮み、日程の折り返し位置が乱れる）。
     タグだけ .event-card__tag 側で justify-self: end して右へ寄せる。 */
}

/* 写真はカードの下辺まで裁ち落とす。
   負の margin-bottom と カード側の padding-bottom(16px) が同値なので、
   写真の下端がちょうどカードの罫に接する。 */
.event-card .frame {
  grid-area: media;
  margin-bottom: calc(var(--sp-4) * -1);
}

.event-card__title {
  /* 下マージンは持たせない。段の間隔は .event-card の gap が持つ */
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  transition: color var(--dur-1) var(--ease);
}

.event-card:hover .event-card__title {
  color: var(--c-accent-deep);
}

.event-card__meta {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--text-sub);
}

.event-card__meta th,
.event-card__meta td {
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.event-card__meta tr:first-child th,
.event-card__meta tr:first-child td {
  border-top: 1px solid var(--line);
}

.event-card__meta th {
  width: 3.5em;
  padding-right: var(--sp-2);
  font-weight: 500;
  white-space: nowrap;
}

/* カテゴリの塗りバッジ。以前は枠線＋着色文字だったが、
   マスタードやローズは白地の上で文字色として使うと AA(4.5:1) が
   出ない（特にマスタードは白背景でほぼ読めない）。塗り地＋濃色インク
   文字にすることで、どの支給カラーでもコントラストを確保している。
   OPEN HOUSE・RECRUIT は専用カラーを割り当てていないので、この既定
   （インディゴ地・白文字）のまま出る。 */
.event-card__tag {
  border-radius: var(--radius-pill);
  display: inline-block;
  /* 右列の右端に寄せる。カードの右辺に揃うので、
     見出し全幅の右端とも縦のラインが通る。 */
  justify-self: end;
  padding: 3px var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  background: var(--c-charcoal);
  color: var(--c-white);
}

/* SEMINAR・CONSULTING・RENOVATION 用。支給カラーはどれも中明度で、
   白文字では出ないため濃色インク文字に統一する。 */
.event-card__tag--flare {
  background: var(--c-flare);
  color: var(--c-ink);
}

.event-card__tag--mustard {
  background: var(--c-mustard);
  color: var(--c-ink);
}

.event-card__tag--rose {
  background: var(--c-rose);
  color: var(--c-white);
}

@container shell (min-width: 440px) {
  .event-card {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   Works card
   -------------------------------------------------------------------------- */
/* position:relative は必須。カード上端から飛び出す .tag-vert の基準になる。
   外すと札が祖先の positioned 要素（＝セクションや body）を基準にして
   ページの隅へ飛ぶ。 */
.works-card {
  position: relative;
  display: block;
}

.works-card__body {
  padding-top: var(--sp-3);
}

/* 「唐津市浜玉町 ———」の計器ラベル。罫を右へ流して行を1本の目盛にする */
.works-card__place {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-accent);
}

.works-card__place::after {
  content: "";
  flex: 1;
  height: var(--tick-w);
  background: var(--line);
}

.works-card__title {
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.65;
  transition: color var(--dur-1) var(--ease);
}

.works-card:hover .works-card__title {
  color: var(--c-accent-deep);
}

/* --c-mist は罫線・装飾用の淡色で、11px の文字に使うと 1.8:1 しか出ない。
   延床面積は読ませたい情報なので補助テキスト色にする。 */
.works-card__area {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   Concept card（写真の上に見出し）
   -------------------------------------------------------------------------- */
/* 写真の全面にオーバーレイを掛けない。
   以前は ::after で rgba(ink, .1→.62) のグラデーションを1枚被せていたが、
   写真が沈んでしまうのでやめた。
   文字のコントラストは、連番と見出しを収めた
   .concept-card__label（不透明のインディゴ）が単独で確保している。 */
/* plan-card と同じ理由で角丸を持たせる。
   写真が枠いっぱいに敷かれるので、カードが直角だと写真も直角になる。 */
.concept-card {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: start;
  min-height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--text-invert);
  isolation: isolate;
  box-shadow: 0px 4px 10px #333333;
}

.concept-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

/* 右辺だけが斜めの札。左下の角に接して置く。
   上辺を --slant ぶん内側へ引き込み、下辺は端まで伸ばすので
   下に向かって広がる形になる（短い連番→長い見出しの並びに合う）。
   斜めのぶん右の padding を厚くしないと、上段の文字が切り口に当たる。 */
.concept-card__label {
  --slant: 24px;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) calc(var(--slant) + var(--sp-4)) var(--sp-3) var(--sp-4);
  background: var(--c-charcoal);
  clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
  transition: background var(--dur-2) var(--ease);
}

.concept-card:hover img {
  transform: scale(1.06);
}

.concept-card:hover .concept-card__label {
  background: var(--c-accent-deep);
}

.concept-card__no {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-accent-light);
}

/* 連番と横一線に並べるので、見出しも --fs-h3 の半分まで落とす。
   --fs-h3 は 18〜22px なので /2 は 9〜11px。
   ただし 9px はサイト最小のラベル(--fs-micro = 11px)を下回るため、
   max() で 11px を下限にしている。
   結果は実質どの幅でも 11px ＝ /2 の上限値（22÷2）と同じ。 */
.concept-card__title {
  font-size: max(var(--fs-micro), calc(var(--fs-h3) / 2));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Plan card（KAJITORU / CRAFREE への導線）
   -------------------------------------------------------------------------- */
/* ★ カード自身に角丸を持たせること。
   写真（.frame）はカードの上辺に密着するので、カードが直角のままだと
   丸い写真の外側に直角の角が残り、写真の丸みだけが浮いて見える。 */
/* 上辺の太い罫が商品色。--product はカード自身に付く .is-* クラス
   （build.py の product_cls()）が入れるので、商品が増えても
   ここは触らなくてよい。商品の無いカードでは既定の罫色に落ちる。 */
.plan-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--product, var(--line));
  background: var(--c-white);
  transition: box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* 写真側の角丸は外し、カードの overflow:hidden にクリップさせる。
   親子の両方に同じ半径を持たせると、丸の内側にカードの地と罫が
   三日月状に覗いて二重の輪郭に見える。 */
.plan-card > .frame {
  border-radius: 0;
}

.plan-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.plan-card__body {
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

/* 商品名とルビを「KAJITORU ---------- カジトル」の一行に組む。
   間の罫（.plan-card__rule）が余った幅を吸うので、ルビは常に右端で揃う。
   カード幅が足りないときは折り返して、ルビだけ次行に落ちる。 */
.plan-card__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}

/* 商品名は商品色。淡い地の上に置く文字なので、支給色そのままではなく
   コントラストを確保した --product-ink を使う（KAJITORU の #ffa336 は
   白地で 1.9:1 しか出ない）。 */
.plan-card__name {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--product-ink, inherit);
}

/* 空要素なのでベースライン＝下マージン端になり、罫が文字の足元に並ぶ。
   flex-basis を持たせておかないと、狭い幅で真っ先に折り返してしまう。 */
.plan-card__rule {
  flex: 1 1 var(--sp-6);
  border-top: 1px dashed var(--line-strong);
}

.plan-card__jp {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
  white-space: nowrap;
}

.plan-card__desc {
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--text-sub);
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.plan-card__price .label {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  color: var(--text-sub);
}

.plan-card__price .num {
  font-family: var(--font-label);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.plan-card__price .unit {
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Staff card
   -------------------------------------------------------------------------- */
.staff-card__en {
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.staff-card__name {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.staff-card__role {
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   Definition table（会社概要 / 仕様表）
   -------------------------------------------------------------------------- */
.def-table {
  border-top: 1px solid var(--line);
}

.def-table > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.def-table dt {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.def-table dd {
  font-size: var(--fs-body);
  line-height: 1.9;
}

.def-table dd a {
  border-bottom: 1px solid var(--line-strong);
}

@container shell (min-width: 440px) {
  .def-table > div {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   Step list（お家づくりの流れ）
   -------------------------------------------------------------------------- */
/* 参照デザインの「大きな連番 + ヘアライン区切りの全幅行」。
   丸バッジ＋縦のつなぎ線をやめ、番号は輪郭だけの数字にしている。
   14ステップが等間隔の目盛として一続きに読めるのが狙い。 */
.steps {
  display: grid;
  border-top: var(--tick-w) solid var(--line);
}

.step {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border-bottom: var(--tick-w) solid var(--line);
  isolation: isolate;
  overflow: hidden;
}

/* 行頭に立つアクセントの縦棒（ホバーで伸びる） */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--c-accent);
  transform: scaleY(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.step:hover::before {
  transform: scaleY(1);
}

/* 番号は .numeral が実体（ディスプレイ書体のベタ塗り）。
   ここではステップ行に合わせたサイズだけを上書きする。 */
/* 番号は本文の背景に敷く透かし。右に寄せ、行の縦中央に置く。
   本文が横幅いっぱいに使えるので、読みやすくなる。 */
.step__no {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-2);
  z-index: -1;
  /* 字形は見出し（.sec-title__en）と同じ Anton */
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  /* 塗りは無色、線だけ（淡いインク色）の輪郭数字 */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--c-ink-rgb), 0.18);
  pointer-events: none;
}

/* POINT だけは文字数が多いので小さいラベルに倒す。
   ディスプレイ書体は等幅の極太（1字 0.85em）で、5文字だと
   2.25rem 指定でも 153px を食って行が崩れる。単語には当てない。 */
.step--point .step__no {
  position: static;
  z-index: auto;
  -webkit-text-stroke: 0;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--c-accent);
}

/* POINT は連番の流れから外れた補足。上下に余白を取り、罫も外して、
   番号つきの行とは別物の「かたまり」として見せる。 */
.step--point {
  margin-block: var(--sp-6);
  background: var(--c-sand);
  border-radius: var(--radius-md);
  border-bottom: 0;
}

/* POINT の下罫を外したので、直後のステップには上罫を付けて区切りを保つ */
.step--point + .step {
  border-top: var(--tick-w) solid var(--line);
}

/* 「無料」バッジは見出しの行の右端へ */
.step__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.step__free {
  display: inline-block;
  order: 1;
  flex-shrink: 0;
  padding: 2px var(--sp-2);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}

.step__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   Spec badges（性能表示）
   -------------------------------------------------------------------------- */
/* 性能値は「計器の読み」。左揃え・等幅・連番付きのセルにする */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tick-w);
  background: var(--line-strong);
  border: var(--tick-w) solid var(--line-strong);
  counter-reset: spec;
}

.specs > li {
  position: relative;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-white);
}

/* 右上に通し番号 */
.specs > li::before {
  counter-increment: spec;
  content: counter(spec, decimal-leading-zero);
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--c-mist);
}

.specs .value {
  font-family: var(--font-label);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--product-ink, inherit);
}

/* 通し番号も商品色に振る。こちらは文字が小さいので、
   支給色そのままだと読めない組み合わせが出る。--product-ink 側を使う。 */
[data-product] .specs > li::before {
  color: var(--product-ink);
  opacity: 0.55;
}

.specs .note {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--text-sub);
  line-height: 1.6;
}

/* 性能バッジは 4 つ。500px の器でも1つ約100pxしか取れず
   「耐震等級3」「HEAT20 G2（地域区分6）」が破綻するため、2×2 で固定する。 */

/* --------------------------------------------------------------------------
   Equipment list（標準装備）
   -------------------------------------------------------------------------- */
/* 標準装備は「仕様書の一覧」。1pxのすき間で敷き詰め、通し番号を振る。
   中央揃えをやめて左揃えにし、番号 → 品名の読み順を作る。 */
.equip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--tick-w);
  background: var(--line);
  border: var(--tick-w) solid var(--line);
  counter-reset: equip;
}

.equip li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-3);
  background: var(--c-white);
  font-size: var(--fs-micro);
  line-height: 1.6;
}

.equip li::before {
  counter-increment: equip;
  content: counter(equip, decimal-leading-zero);
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  color: var(--c-mist);
}

/* --------------------------------------------------------------------------
   Note list（注意書き）
   -------------------------------------------------------------------------- */
.notes {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  line-height: 1.85;
  color: var(--text-sub);
}

.notes li {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.notes li::before {
  content: "※";
  margin-right: 0.2em;
}

.notes--dash li::before {
  content: "―";
  margin-right: 0.4em;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap; /* ブログは14ページ前後になり、500px幅に1行では収まらない */
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}

.pager a,
.pager span {
  display: grid;
  place-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--sp-2);
  border: var(--tick-w) solid var(--line-strong);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
}

.pager a:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.pager [aria-current="page"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   LINE CTA
   -------------------------------------------------------------------------- */
/* 濃いインディゴの見開き。雑誌の巻末広告のように角丸で切り出す。
   （旧版は四隅にトンボ＋方眼を敷いた「計器パネル」だった） */
.line-cta {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-gutter);
  text-align: center;
  background: var(--c-ink);
  color: var(--text-invert);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
}

/* 面のニュアンス。方眼をやめ、斜めの淡いグラデーション1枚にした */
.line-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(var(--c-white-rgb), 0.1),
    transparent 70%
  );
}

/* 地は濃紺のまま、LINE と分かる部分（丸いマークと下のボタン）だけを
   LINE グリーンにしている。面ごと緑にすると、インディゴ基調のページ末尾に
   全幅の緑帯が入って主張が強すぎるため。
   #06c755 と --c-ink の対比は 8.6:1 で、濃紺の地の上でも十分明るい。 */
.line-cta__mark {
  justify-self: center;
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  border: var(--tick-w) solid var(--c-line);
  border-radius: 50%;
  color: var(--c-line);
}

.line-cta__mark svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* 面を濃色（--c-ink）にしたので、文字色も反転側にそろえること。
   --text-sub（--c-stone）のままだと ink 上で 2.3:1 しか出ず読めない。 */
.line-cta__text {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: rgba(var(--c-white-rgb), 0.8);
}

.line-cta .btn {
  justify-self: center;
  min-width: 240px;
  border-color: var(--c-line);
  color: var(--c-line);
  background: none;
}

/* ホバーで緑が左から流れ込む。塗られた側の文字は必ず --c-ink に返すこと
   （白のままだと 2.2:1 で AA 未達。base.css の --c-line のコメント参照） */
.line-cta .btn::before {
  background: var(--c-line);
}

.line-cta .btn:hover {
  color: var(--c-ink);
  border-color: var(--c-line);
}

/* --------------------------------------------------------------------------
   Filter chips（施工事例の絞り込み）
   -------------------------------------------------------------------------- */
/* 軸が「商品カテゴリ」「家の特徴」の2本あるので、行ごとに見出しを付ける。
   見出しが無いとチップが1本の長い列に見えて、軸の切れ目が読めない。 */
.filters {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.filter-row__label {
  margin-bottom: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

/* 行間は .filters の gap が持つので、内側の下マージンは殺す。 */
.filters .chips {
  margin-bottom: 0;
}

.chip {
  border-radius: var(--radius-pill);
  padding: 0.5rem var(--sp-4);
  border: var(--tick-w) solid var(--line-strong);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-sub);
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chip:hover {
  color: var(--text-main);
  border-color: var(--c-ink);
}

/* ブログの年別・月別アーカイブは JS の絞り込みではなくリンク（<a class="chip">）。
   現在のページは aria-current で押下済みと同じ見た目にする。 */
a.chip {
  display: inline-block;
}

.chip small {
  font-size: inherit;
  opacity: 0.7;
}

.chip[aria-pressed="true"],
.chip[aria-current="page"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Quote / message block
   -------------------------------------------------------------------------- */
.message {
  font-size: var(--fs-lead);
  line-height: 2.2;
  letter-spacing: 0.05em;
}

.message p + p {
  margin-top: 1.8em;
}

.message strong {
  font-weight: 500;
  background: linear-gradient(transparent 62%, var(--c-sand) 62%);
}

.message__sign {
  margin-top: var(--sp-6);
  text-align: right;
  font-size: var(--fs-small);
  color: var(--text-sub);
}

.message__sign b {
  display: block;
  margin-top: 2px;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-main);
}

/* 全幅バナー（.shell いっぱい。余白・角丸なし） */
.banner-full {
  width: 100%;
  line-height: 0;
}

.banner-full img {
  display: block;
  width: 100%;
  height: auto;
}