@charset "UTF-8";
/* ==========================================================================
   LIFE HOUSE renewal — pages.css
   ページ固有のブロック
   ========================================================================== */

/* --------------------------------------------------------------------------
   Statement（サイト本体の hero。写真の上にキャッチコピー）
   旧 hero-panel（ロゴ＋タグライン）は廃止し、SNSアイコンとスクロール誘導を
   このセクションに統合した。常に100vhでファーストビューを占める。
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  /* 下層ページの .hero-panel と必ず同じ単位を使うこと。
     100vh だと iOS Safari でアドレスバー分はみ出し、トップだけ
     ファーストビューの収まりが変わる。 */
  min-height: 100svh;
  display: grid;
  /* 柱（マストヘッド） / コピー / 足元クレジット の3段 */
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  /* 上は固定ヘッダー、下は固定アクションバーに潜らないよう余白を確保。
     SNS を縦並びにして足元が高くなったぶん、下は特に必要。 */
  padding: calc(var(--header-h) + var(--sp-4)) var(--sp-gutter)
    calc(var(--actionbar-h) + var(--sp-4) + env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--text-invert);
  isolation: isolate;
}

.statement__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ★ スクリム（写真の上に敷いていたインディゴのグラデーション）は撤去した。
     写真をそのままの明るさで見せる方針に変更している。

   そのぶん、この上に乗る白い要素は「自前の影 or 自前の地」で
   可読性を確保している。スクリムに頼っている要素を増やさないこと。

     - .statement__copy … text-shadow を二段（WordPress 版と同じ）
     - .credit          … 項目ごとのスモークガラスの箱（components.css）
     - .masthead / .statement__sub / .scroll-cue … text-shadow

   復活させる場合は .statement::before に置くこと（::after は空けておく。
   旧版でコーナートンボ .ticks が使っていた枠で、統一しておかないと
   「どちらの擬似要素が空いているか」を毎回確認する手間が戻る）。

   なお **下層ページのスクリムは撤去していない**。
   あちらは .hero-panel__media::after（layout.css）に乗っており、
   欧文の大見出し（.hero-panel__title）が常に写真の上に来るため残してある。 */

/* コピーの塊そのものは中央ぞろえ。中の各行は左揃えで展開する。 */
.statement__inner {
  align-self: center;
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
}

/* ヒーローのキャッチコピー（テキスト）。
   WordPress 版（css/style.css の .right-hero-heading）と同じ組み：
     - 塊は中央、中の行は左揃え
     - メイン（700）2行。2行目「帰りたくなる家になった。」だけ 1.2 倍
     - サブ（500）4行。メインの 0.7 倍
     - 白文字＋二段の影で写真に埋もれないようにする
   --hero-copy-size（メインの基準サイズ）を起点に、全部の大きさが連動する。

   ★ サイズの上限 28px は WordPress 版の PC 表示と同じ値。
     器は --site-max（500px）で頭打ちなので、PC でもこれ以上は大きくしない。
     下限側の 5.8vw も WordPress 版のスマホ表示と同じ比率。
     375px 幅で2行目（12文字×1.2倍）が約 313px になり、ガターの内側に収まる。
     文字数を増やしたら、この下限で1行に収まるか確認すること
     （行は nowrap なので、溢れると折り返さずに切れる）。 */
.statement__copy {
  --hero-copy-size: clamp(19px, 5.8vw, 28px);
  width: fit-content;
  max-width: 100%;
  text-align: left;
  color: var(--c-white);
  font-family: var(--font-hero);
  text-shadow: 0 1px 3px rgba(var(--c-ink-rgb), 0.45),
    0 4px 16px rgba(var(--c-ink-rgb), 0.45);
}

.statement__main,
.statement__lead {
  margin: 0;
  letter-spacing: 0;
}

.statement__line {
  display: block;
  white-space: nowrap;
}

.statement__main {
  font-size: var(--hero-copy-size);
  font-weight: 700;
  line-height: 1.5;
}

.statement__line--em {
  font-size: 1.2em;
}

.statement__lead {
  margin-top: 1.1em;
  font-size: calc(var(--hero-copy-size) * 0.7);
  font-weight: 500;
  line-height: 1.75;
}

/* 足元：クレジットの箱 → SNS（左）／キャッチ（中央）／スクロール誘導（右） */
.statement__foot {
  display: grid;
  gap: var(--sp-4);
}

.statement__foot-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-4);
}

.statement__foot .sns {
  justify-self: start;
}

/* トップだけスクリムが無いので、明るい写真の上でボタンの輪郭が飛ぶ。
   下層ページ（.hero-panel__foot .sns）はスクリムが残っているので当てていない。

   ※ アイコンがブランドカラーのベタ塗りになったぶん、以前の
     2段重ねの drop-shadow は不要になった（塗りが不透明なので、
     影を強くすると写真に黒い滲みが出るだけになる）。1段で足を作る。
   ※ filter は fixed 子孫の包含ブロックを作るが、<a> の中はアイコンだけ
     なので問題ない（.site-frame に足してはいけないのはこのため）。 */
.statement__foot .sns a {
  filter: drop-shadow(0 2px 10px rgba(var(--c-ink-rgb), 0.55));
}

.statement__foot .scroll-cue {
  justify-self: end;
}

.statement__sub {
  justify-self: center;
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-shadow: var(--shadow-text);
}

/* --------------------------------------------------------------------------
   Event banner（トップの EVENT 見出しの上に置く横長の写真）
   -------------------------------------------------------------------------- */
.event-banner {
  margin: 0 0 var(--sp-6);
}

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

/* --------------------------------------------------------------------------
   Catalog band
   -------------------------------------------------------------------------- */
/* 見出し＋リード＋ボタン。500px の器では横並びにすると
   どちらも潰れるため、常に縦積み。 */
.catalog-band__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Link list（テキストリンクの縦並び）
   -------------------------------------------------------------------------- */
.link-list {
  border-top: 1px solid var(--line);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  letter-spacing: 0.08em;
  transition: padding var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}

.link-list a:hover {
  padding-left: var(--sp-4);
  color: var(--c-accent-deep);
}

.link-list svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform var(--dur-2) var(--ease);
}

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

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

/* --------------------------------------------------------------------------
   Concept : 4つのこだわり
   -------------------------------------------------------------------------- */
.kodawari {
  display: grid;
  gap: var(--sp-8);
}

.kodawari__item {
  display: grid;
  gap: var(--sp-5);
}

/* 罫を「大文字・数字の高さ」の中央に通すための補正量。
   Zen Kaku Gothic New は ascent 1.16 / descent 0.288 / 大文字高 0.70 のため、
   flex の中央揃え（行ボックスの中央）だと罫が 0.086em ほど上に寄る。
   行の高さ（line-height）に依らず一定なので、em で下げて合わせる。 */
.kodawari__eq {
  --cap-shift: 0.086em;
}

/* 番号は Anton（ascent 1.177 / descent 0.33 / 大文字高 0.86）。
   line-height:1 だと大文字の中央がほぼ行の中央に来るので補正は要らない。 */
.kodawari__no {
  --cap-shift: 0em;
}

/* 01〜04 は輪郭だけの巨大な数字。
   参照デザインの「極太アウトライン連番」に合わせている。
   塗りではないので、大きく置いても見出しの読みを邪魔しない。
   （装飾用の --c-mist は --c-paper 上で 1.6:1 しかないので使わない） */
.kodawari__no {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* 字形は見出し（.sec-title__en）と同じ Anton（ウェイトは 400 のみ） */
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 1.6rem + 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  --stroke-w: 2px;
}

/* 数字の右へ罫を流して1本の目盛にする */
.kodawari__no::after {
  content: "";
  flex: 1;
  height: var(--tick-w);
  background: var(--line-strong);
  -webkit-text-stroke: 0;
  transform: translateY(var(--cap-shift));
}

.kodawari__title {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* 文字の大きさは .kodawari__title と同等。右揃え。 */
.kodawari__eq {
  margin-top: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-h2);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--c-accent);
  /* .kodawari__no と同じ罫を左側に流す（番号の罫と対になる） */
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.kodawari__eq::before {
  content: "";
  flex: 1;
  height: var(--tick-w);
  background: var(--line-strong);
  transform: translateY(var(--cap-shift));
}

.kodawari__text {
  font-size: var(--fs-body);
  line-height: 2.15;
  color: var(--text-sub);
}

.kodawari__text p + p {
  margin-top: 1.6em;
}

/* 写真＋本文3段落。500px の器で横並びにすると本文が 200px 幅になり
   まったく読めないため、写真を上・本文を下の縦積みで固定する。 */

/* --------------------------------------------------------------------------
   Concept : 10の重要監査
   -------------------------------------------------------------------------- */
/* 検査項目は「工程表」。ヘアラインの全幅行に連番を振る */
.audit {
  counter-reset: audit;
  display: grid;
  border-top: var(--tick-w) solid var(--line-strong);
}

.audit li {
  position: relative;
  counter-increment: audit;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: var(--tick-w) solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.audit li::before {
  content: counter(audit, decimal-leading-zero);
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-accent);
}

/* 行末に「//」を置いて工程の区切りを示す */
.audit li::after {
  content: "//";
  position: absolute;
  right: 0;
  bottom: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  color: var(--c-mist);
}

/* --------------------------------------------------------------------------
   Concept : 保証カード
   -------------------------------------------------------------------------- */
.warranty {
  display: grid;
  gap: var(--sp-4);
}

.warranty__item {
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--line);
}

/* タイトルの下、右揃え */
.warranty__label {
  display: block;
  width: fit-content;
  margin: var(--sp-2) 0 0 auto;
  padding: 2px var(--sp-2);
  border: var(--tick-w) solid currentColor;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--c-accent);
}

.warranty__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.06em;
}

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

/* 保証カードは1枚あたりの本文が長い（最大160字）。
   500px の器で2段にすると1行7〜8字になるため、常に1段。 */

/* --------------------------------------------------------------------------
   Price : 価格表
   -------------------------------------------------------------------------- */
.price-headline {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--line);
  /* 上辺だけ商品色の太罫。商品ページ以外（--product 未定義）では
     既定の罫色に落ちるので、このまま共通で書いてよい。 */
  border-top: 4px solid var(--product, var(--line));
  text-align: center;
}

.price-headline__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  width: 100%;
}

.price-headline__cell {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
}

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

/* 価格の数字も商品色。淡い地の上の文字なので --product-ink 側を使う。
   ★ CRAFREE α のゴールドをグラデーション文字（background-clip:text）に
     したくなるが、金の明部（ほぼ白）に当たった桁が読めなくなるので
     やめること。グラデーションは面（タブ・帯）だけに使う。 */
.price-headline__num {
  font-family: var(--font-label);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--product-ink, inherit);
}

.price-headline__num small {
  font-size: 0.5em;
  margin-left: 0.2em;
}

/* 商品ページの PRICE。金額の代わりに案内文と公式LINEボタンを置く */
.price-contact {
  gap: var(--sp-5);
}

.price-contact__catch {
  font-weight: 500;
  line-height: var(--lh-loose);
  color: var(--c-ink);
}

/* プラン切替タブ */
/* ★ 商品4つを 2列×2段 で組む。横1列に並べないのは器の幅の問題。
     本文カラムは --site-max（500px）で頭打ち、実測で約404px しか無く、
     4列にすると1タブ101px。"KAJITORU"（15px / 0.14em）は文字だけで約90px、
     左右パディング 24px を足すと114px で必ず溢れる。
     商品を5つ以上に増やすときは、下の nth-child による罫の引き方
     （2列前提）も合わせて見直すこと。 */
.plan-tabs {
  display: grid;
  /* minmax(0,1fr) なのは、1fr の下限（min-content）だと
     "KAJITORU" が縮まずタブ全体が枠からはみ出すため。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--c-ink);
  margin-bottom: var(--sp-6);
}

/* ページ最下部に置くときは、下に隙間を空けない（セクションの余白が持つ） */
.plan-tabs--bottom {
  margin-bottom: 0;
}

/* 4商品が一度に並ぶ唯一の場所なので、ここだけは全商品の色を見せる。
   タブの上辺に商品色の帯を通し、現在地のタブはその色でベタ塗りにする。
   文字色は --product-on（明るい3色は濃インク、CRAFREE だけ白）。
   CRAFREE α は塗りがグラデーションなので --product-grad を使う。 */
.plan-tabs a {
  position: relative;
  display: grid;
  gap: 2px;
  padding: calc(var(--sp-3) + 4px) var(--sp-3) var(--sp-3);
  text-align: center;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.plan-tabs__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--product-grad);
}

/* 罫は「隣接セレクタ」ではなく格子の位置で引く。
   a + a だと2段目の先頭（3つ目）にも左罫が付いてしまう。 */
.plan-tabs a:nth-child(2n) {
  border-left: 1px solid var(--c-ink);
}

.plan-tabs a:nth-child(n + 3) {
  border-top: 1px solid var(--c-ink);
}

.plan-tabs a[aria-current="page"] {
  background: var(--product-grad, var(--c-ink));
  color: var(--product-on, var(--c-white));
}

/* 現在地のタブは面そのものが商品色なので、上辺の帯は濃インクに替えて
   「選択中」であることを示す。同色を重ねると帯が消えて、
   4つのうちどれが現在地なのか分からなくなる。 */
.plan-tabs__item[aria-current="page"]::before {
  background: var(--c-ink);
}

.plan-tabs .en {
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
}

.plan-tabs .jp {
  font-size: var(--fs-micro);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Company : スタッフ
   -------------------------------------------------------------------------- */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-5);
}

/* スタッフ写真は背景を抜いた切り抜き素材なので、
   cover で切らずに contain で全身を見せる。
   素材が 1:1（700×700）なので枠も frame--1x1 を使うこと。
   以前 frame--4x5 に入れていたときは contain のぶん上下に
   --c-paper の帯が出ていた。素材を差し替えるときは比率もそろえる。 */
.staff-card .frame {
  background: var(--c-paper);
}

.staff-card .frame img {
  object-fit: contain;
}

/* 1人3枚の写真を枠の中に重ね、.active の1枚だけを見せる。
   ホバーで main.js（initStaffHover）が .active を 1→2→3 と送る。
   1枚目は HTML 側で .active を持っているので、JS が無くても1枚目が出る。 */
.staff-card__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease), transform 0.9s var(--ease-out);
}

.staff-card__img.active {
  opacity: 1;
}

.staff-card:hover .frame img {
  transform: scale(1.03);
}

.staff-card {
  cursor: pointer;
}

.staff-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Company : スタッフ詳細モーダル
   タップしたスタッフの写真を1→2→3と自動スライドし、最後の1枚で止める
   （ループしない）。
   -------------------------------------------------------------------------- */
.staff-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
}

.staff-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.staff-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--c-ink-rgb), 0.6);
}

.staff-modal__content {
  position: relative;
  width: min(100%, 400px);
  max-height: calc(100dvh - var(--sp-8));
  overflow-y: auto;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transform: translateY(12px);
  transition: transform var(--dur-2) var(--ease-out);
}

.staff-modal.is-open .staff-modal__content {
  transform: none;
}

.staff-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: var(--c-white);
  transition: background var(--dur-1) var(--ease);
}

.staff-modal__close:hover {
  background: var(--c-accent-deep);
}

.staff-modal__close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 素材が 1:1（700×700）なので枠も正方形。写真は背景を抜いた
   切り抜きなので、cover で切らず contain で全身を見せる。 */
.staff-modal__image {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.staff-modal__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}

.staff-modal__image img.active {
  opacity: 1;
}

.staff-modal__info {
  padding: var(--sp-5);
  text-align: center;
}

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

.staff-modal__name {
  margin-top: var(--sp-2);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

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

.staff-modal__text {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--text-main);
}

/* 紹介文が無いスタッフは空のまま残ると罫線だけの
   余白になってしまうので、中身が無いときは丸ごと消す。 */
.staff-modal__text:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Catalog : ダウンロードカード
   -------------------------------------------------------------------------- */
.dl-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--line);
}

/* 表紙は縦長（A4）。切り抜かずに全体を見せ、冊子らしく影を落とす */
.dl-card__cover {
  display: block;
  justify-self: center;
  width: min(100%, 300px);
}

.dl-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 6px 18px rgba(var(--c-ink-rgb), 0.18);
  transition: transform var(--dur-2) var(--ease);
}

.dl-card__cover:hover img {
  transform: translateY(-4px);
}

.dl-card__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.dl-card__text {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

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

.field .req {
  margin-left: var(--sp-2);
  padding: 1px 6px;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem var(--sp-3);
  font: inherit;
  /* iOS Safari は 16px 未満の入力欄にフォーカスするとページを自動拡大し、
     そのまま戻らない。フォームの入力欄だけは 16px を下回らせないこと。 */
  font-size: max(16px, var(--fs-body));
  color: var(--text-main);
  background: var(--c-white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color var(--dur-1) var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-accent);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   AIRMAKER（全館空調システム）
   原稿と図版はメーカー（イビケン株式会社）の公式サイトから許可を得て転載。
   図版は文字入りのイラストなので、写真用の .frame（object-fit:cover で
   トリミングする）には入れず、.am-figure で全体を見せる。

   ★ 図版の中の文字は 500px の器に縮めると小さくなる。
     2段組みにすると 1枚 200px 前後になり読めないため、図版は常に1段。
     横に並べているのは文字の少ない比較図（.am-compare）だけ。

   差し色はメーカー図版のオレンジに寄せて --c-flare を使う。
   --c-flare は中明度なので、塗りの上の文字は白ではなく --c-ink にすること
   （白だと 2.9:1 しか出ない。--c-ink なら 5.8:1）。
   -------------------------------------------------------------------------- */
.am-block + .am-block {
  margin-top: var(--sp-8);
}

/* 章の扉（.sec-head の変形）。
     1行目  REASON（右揃え）          ┐ 番号は右列で
     2行目  COMFORT                   ┘ 1〜2行目の高さ
     3行目  ● 快適健康 ------ ( 02 )
   REASON は左列の中で右揃え＝番号のすぐ左上。番号は右列なので重ならない。 */
.sec-head.sec-head--reason {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.sec-head--reason .am-reason__label {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-label);
  font-size: calc(var(--fs-small) * 2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}

.sec-head--reason .am-reason__num {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  font-family: var(--font-heading);
  font-weight: 400;
  /* 数字（Anton）の高さ ＝ 欧文見出しの大文字高の2倍 ＝ REASON ＋ 欧文の2行ぶん */
  font-size: calc(var(--en-cap) * 2 / 0.86);
  line-height: 1;
  color: var(--c-accent);
}

.sec-head.sec-head--reason .sec-title__en {
  grid-column: 1 / 3;
  grid-row: 2;
}

.sec-head.sec-head--reason .sec-title__jp {
  grid-row: 3;
}

/* 「( 02 )」と罫は3行目。罫は番号の下まで通す */
.sec-head.sec-head--reason::after {
  grid-row: 3;
  grid-column: 2 / -1;
}

/* AIRMAKERとは？ のキャッチ */
.am-catch {
  margin-bottom: var(--sp-5);
  font-family: var(--font-hero);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.am-body {
  font-size: var(--fs-body);
  line-height: 2.1;
  color: var(--text-sub);
}

.am-body p + p {
  margin-top: 1.2em;
}

.am-body p:last-child {
  font-weight: 700;
  color: var(--text-main);
}

/* 選ばれる3つの理由（ページ内リンク） */
/* FLOW（.steps / .step）と同じ作り：白い台紙＋罫のカード（従来の背景）に、
   番号は右下の輪郭数字（塗りなし・横幅50%）として本文の背景に敷く。 */
.am-toc {
  display: grid;
  gap: var(--sp-3);
}

.am-toc__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.3s;
}

.am-toc__item:hover {
  border-color: var(--c-accent);
}

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

.am-toc__item:hover::before {
  transform: scaleY(1);
}

/* 右端の矢印の左に置いて、矢印と重ならないようにする */
.am-toc__no {
  position: absolute;
  right: calc(var(--sp-4) + 18px + var(--sp-4));
  bottom: var(--sp-2);
  z-index: -1;
  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;
}

.am-toc__body {
  display: grid;
  gap: 2px;
}

.am-toc__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.am-toc__text {
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--text-sub);
}

.am-toc__item svg {
  width: 18px;
  height: 18px;
  fill: var(--c-accent);
  transform: rotate(90deg); /* ページ内の下へ進むリンクなので下向き */
}

/* 文字入りの図版。白い台紙に載せ、トリミングせず全体を見せる */
.am-figure {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--c-white);
  border-radius: var(--radius-lg);
}

.am-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* 元の画像が小さい図版。器いっぱいに引き伸ばすと荒れるので上限を付ける */
.am-figure--narrow img {
  max-width: 360px;
}

.am-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  line-height: 1.8;
  color: var(--text-sub);
}

/* 図版の番号（1, 2, 3…）と対応させる番号付きリスト。
   番号札はメーカー図版のオレンジの四角に合わせている。 */
.am-num {
  counter-reset: am-num;
  display: grid;
  border-top: 1px solid var(--line);
}

.am-num li {
  counter-increment: am-num;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.85;
}

.am-num li::before {
  content: counter(am-num);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1em;
  border-radius: var(--radius-sm);
  background: var(--c-flare);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-ink);
}

/* 小見出しに添える季節の札 */
.am-season {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: 0.2em;
}

.am-season--winter {
  background: var(--c-accent);
  color: var(--c-white);
}

.am-season--summer {
  background: var(--c-flare);
  color: var(--c-ink);
}

/* 暖かい家と健康（10項目）。図版の文字を読ませるため常に1段 */
.am-health {
  display: grid;
  gap: var(--sp-4);
}

.am-health__item {
  padding: var(--sp-5);
  background: var(--c-white);
  border-radius: var(--radius-md);
}

.am-health__label {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid currentColor;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-accent);
}

.am-health__title {
  margin-top: var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.am-health__media {
  margin-top: var(--sp-4);
}

.am-health__media img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
}

.am-health__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--text-sub);
}

/* ダクトレスの3つのポイント */
.am-points {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.am-point {
  padding: var(--sp-5);
  background: var(--c-white);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius-md);
}

.am-point__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

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

/* 白い台紙の中にさらに白い台紙を重ねないよう、余白だけ残す */
.am-point .am-figure {
  margin-bottom: 0;
  padding: 0;
}

/* 一般的なダクト式 と AIRMAKER の比較 */
.am-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.am-compare--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.am-compare__item {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.am-compare__item--am {
  border: 2px solid var(--c-flare);
}

.am-compare__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.am-compare__label {
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-stone);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-white);
}

.am-compare__item--am .am-compare__label {
  background: var(--c-flare);
  color: var(--c-ink);
}

.am-compare__label small {
  font-size: inherit;
  font-weight: 500;
  opacity: 0.85;
}

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

/* 推奨加湿機 */
.am-product {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

.am-product__media {
  padding: var(--sp-2);
  background: var(--c-white);
  border-radius: var(--radius-md);
}

.am-product__media img {
  display: block;
  width: 100%;
  height: auto;
}

.am-product__name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.am-product__model {
  margin-bottom: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--text-sub);
}

/* 電気代の削減額 */
.am-saving {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-charcoal);
  border-radius: var(--radius-lg);
  color: var(--text-invert);
  text-align: center;
}

.am-saving__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: rgba(var(--c-white-rgb), 0.78);
}

.am-saving__num {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: 700;
}

.am-saving__num b {
  margin: 0 0.15em;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-flare);
}

.am-saving__num span {
  display: block;
  margin-top: var(--sp-1);
}

.am-conditions {
  margin-top: var(--sp-4);
}

.am-conditions > div {
  padding: var(--sp-3) 0;
}

.am-conditions dd {
  font-size: var(--fs-small);
}

/* お客様の声 */
.am-voices {
  display: grid;
  gap: var(--sp-4);
}

.am-voice {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-white);
  border-radius: var(--radius-md);
}

.am-voice__media {
  padding: var(--sp-2) var(--sp-1) 0;
  background: var(--c-sand);
  border-radius: var(--radius-md);
}

.am-voice__media img {
  display: block;
  width: 100%;
  height: auto;
}

.am-voice__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
}

.am-voice__who {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--text-sub);
}

.am-voice__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.9;
}

/* よくある質問。<details> なので開閉に JS は使っていない */
.faq {
  display: grid;
  gap: var(--sp-3);
}

.faq__item {
  background: var(--c-white);
  border-radius: var(--radius-md);
}

.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 14px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* 右端の ＋／− */
.faq__q::after {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--c-accent), var(--c-accent)) center / 2px 100% no-repeat;
  transition: transform 0.3s var(--ease-out);
}

.faq__item[open] .faq__q::after {
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

.faq__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-accent);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--c-white);
}

.faq__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  margin: 0 var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

.faq__a .faq__mark {
  background: var(--c-flare);
  color: var(--c-ink);
}

.faq__a p + p {
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  padding: var(--sp-9) var(--sp-gutter);
  text-align: center;
}

/* 輪郭だけの巨大な 404（.kodawari__no と同じ語彙） */
.notfound__code {
  font-family: var(--font-label);
  font-size: clamp(4rem, 2rem + 9vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  --stroke-w: 3px;
}

.notfound__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Product pages : パンフレット由来の読み物ブロック（KAJITORU / CRAFREE）
   500px の1カラム前提。常に縦積みで、色は --product 系トークンに任せる。
   -------------------------------------------------------------------------- */
.prose {
  font-size: var(--fs-body);
  line-height: 2.15;
  color: var(--text-sub);
}

.prose p + p {
  margin-top: 1.6em;
}

.prose strong {
  font-weight: 500;
  color: var(--c-ink);
}

/* キャッチコピー。和文の大見出し＋欧文の小さな添え書き。
   左に商品色の縦罫を通して、本文との区切りと商品の色を見せる。 */
.catch {
  padding-left: var(--sp-4);
  border-left: 4px solid var(--product, var(--c-accent));
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  /* 改行は入れず、文として流す。対応ブラウザ（Chrome 系）では文節の切れ目で折り返す */
  word-break: auto-phrase;
}

/* スマホ幅では一回り小さくし、<br> で区切った1行がそのまま収まるようにする */
@media (max-width: 480px) {
  .catch {
    font-size: 1.125rem;
  }
}



.catch__en {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.7;
  color: var(--product-ink, var(--c-accent));
}

/* 縦に積む1ブロック（キャッチ＋写真＋本文）の間隔 */
.story {
  display: grid;
  gap: var(--sp-5);
}

.story + .story {
  margin-top: var(--sp-8);
}

/* 切り抜いたままの比率で見せる写真（.frame は比率固定でトリミングするため別枠） */
.shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-sand);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: start;
}

/* ZUBORA の1日（タイムライン） */
.day {
  display: grid;
  gap: var(--sp-7);
}

.day__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.day__label small {
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--text-sub);
}

.day__list {
  display: grid;
  gap: var(--sp-5);
  margin-left: 0.4rem;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--product, var(--line-strong));
}

.day__item {
  position: relative;
  display: grid;
  gap: var(--sp-1);
}

.day__item::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: calc(-1 * var(--sp-5) - 7px);
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--product, var(--c-accent));
  border-radius: 50%;
  background: var(--c-white);
}

.day__time {
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--product-ink, var(--c-accent));
}

.day__what {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
}

/* その場面で効く設備。商品色の札＋一言 */
.day__help {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text-sub);
}

.day__help b {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0 0.7em;
  border-radius: var(--radius-pill);
  background: var(--product, var(--c-accent));
  color: var(--product-on, var(--c-white));
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* 挿絵（パンフレットの線画）。高さで揃え、幅は絵ごとの比率に任せる */
.day__illust {
  display: block;
  width: auto;
  height: 120px;
  max-width: 100%;
  margin-top: var(--sp-2);
}

/* 「これが無いと…」の吹き出し。設備の札（.day__help）の裏返しなので、
   白地のカードではなく点線の枠で軽く添える */
.day__without {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-sub);
}

.day__without b {
  display: block;
  font-weight: 500;
  color: var(--text-main);
}

.day__without-img {
  flex: none;
  width: auto;
  height: 52px;
}

/* 見出し＋説明（＋写真）のカード。ZUBORA! の吹き出し／収納・設備の紹介に使う */
.points {
  display: grid;
  gap: var(--sp-5);
}

.point {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--c-white);
}

/* 写真はカードの上端いっぱいに */
.point > .shot {
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.point__tag {
  justify-self: start;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--product, var(--c-accent));
  color: var(--product-on, var(--c-white));
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}

.point__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.point__text {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

.point__note {
  font-size: var(--fs-micro);
  line-height: 1.8;
  color: var(--text-sub);
}

/* 「ポイント」の囲み（家事動線の考え方・減らせる家事など） */
.callout {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--product, var(--c-accent));
  border-radius: var(--radius-md);
  /* 地色が --c-sand のセクションの上でも輪郭が出るよう白地にする */
  background: var(--c-white);
}

.callout__label {
  justify-self: start;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--product-ink, var(--c-accent));
  border-bottom: 2px solid var(--product, var(--c-accent));
}

.callout__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
}

.callout__text {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--text-sub);
}

/* 「減らせる家事」。1行1項目の用語表 */
.chores {
  display: grid;
  gap: var(--tick-w);
  margin-top: var(--sp-2);
  background: var(--line);
  border: var(--tick-w) solid var(--line);
}

.chores li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text-sub);
}

.chores b {
  font-weight: 500;
  color: var(--c-ink);
}

/* インタビュー */
.qa {
  display: grid;
  gap: var(--sp-6);
}

.qa__q {
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--product, var(--c-accent));
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.7;
}

/* 24プランの間取り図 */
.plan-group + .plan-group {
  margin-top: var(--sp-7);
}

.plan-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--product, var(--line-strong));
}

.plan-group__en {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  letter-spacing: 0.08em;
}

.plan-group__jp {
  font-size: var(--fs-small);
  color: var(--text-sub);
}

.plan-group__count {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--product-ink, var(--c-accent));
}

.plan-sheets {
  display: grid;
  gap: var(--sp-4);
}

.plan-sheet {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--c-white);
}

.plan-sheet img {
  display: block;
  width: 100%;
  height: auto;
}

.plan-sheet figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--text-sub);
}

.plan-sheet__no {
  font-size: 1rem;
  font-weight: 700;
  color: var(--product-ink, var(--c-ink));
}

.plan-sheet__total {
  color: var(--c-ink);
  font-weight: 500;
}

/* CRAFREE の標準装備ハイライト（写真付き） */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-3);
}

.tile {
  margin: 0;
}

.tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tile figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   記事ページ・ブログ一覧（_content/ の Markdown から生成）
   works/*.html  event/*.html  blog/*.html  blog.html
   本文 .entry__body の中身は content.py の md_to_html が出す素の HTML
   （p / h3 / h4 / ul / ol / blockquote / hr / figure.post-fig / .post-gallery）なので、
   クラスではなく要素セレクタで当てる。
   -------------------------------------------------------------------------- */
.post-card {
  display: block;
}

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

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

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

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

.entry {
  padding: var(--sp-7) var(--sp-gutter) var(--sp-6);
}

.entry__head {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

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

/* 事例のカテゴリ札。イベントの .event-card__tag と同じ寸法で並ぶようにしてある */
.entry__tag {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-charcoal);
  color: var(--c-white);
}

.entry__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.entry__meta {
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-sub);
}

.entry__meta li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
}

.entry__meta li:not(:has(svg)) {
  grid-template-columns: minmax(0, 1fr);
  padding-left: calc(16px + var(--sp-2));
}

.entry__meta svg {
  width: 13px;
  height: 13px;
  margin-top: 5px;
  fill: var(--c-mist);
}

.entry__thumb {
  margin-top: var(--sp-5);
}

/* イベントのサムネは縦長ポスター。そのまま横幅いっぱいに出すと画面を占領する */
.entry__thumb--poster {
  max-width: 340px;
}

.entry__body {
  margin-top: var(--sp-6);
  overflow-wrap: anywhere;
}

/* .prose は p + p にしか余白を持たないので、記事用に他の要素の間隔を足す */
.entry__body > * + * {
  margin-top: 1.6em;
}

.entry__body h3 {
  margin-top: 2.6em;
  padding-bottom: var(--sp-2);
  border-bottom: var(--tick-w) solid var(--line-strong);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-ink);
}

.entry__body h4,
.entry__body h5 {
  margin-top: 2em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink);
}

.entry__body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry__body ul,
.entry__body ol {
  padding-left: 1.4em;
}

.entry__body ul {
  list-style: disc;
}

.entry__body ol {
  list-style: decimal;
}

.entry__body li + li {
  margin-top: 0.4em;
}

.entry__body blockquote {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-accent-light);
  background: var(--c-sand);
}

.entry__body hr {
  border: 0;
  border-top: var(--tick-w) solid var(--line-strong);
}

.entry__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.entry__body .post-fig {
  margin-block: 2em;
}

.entry__body .post-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-block: 2em;
}

.entry__body .post-gallery img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.entry__body iframe,
.entry__body video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-md);
}

.entry__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.entry__body th,
.entry__body td {
  padding: var(--sp-2) var(--sp-3);
  border: var(--tick-w) solid var(--line-strong);
  text-align: left;
}

/* 前後の記事＋一覧へ戻る */
.entry-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--tick-w) solid var(--line-strong);
}

.entry-nav__prev,
.entry-nav__next {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--sp-3);
  border: var(--tick-w) solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: 1.6;
}

a.entry-nav__prev:hover,
a.entry-nav__next:hover {
  background: var(--c-sand);
}

.entry-nav__none {
  border-style: dashed;
  opacity: 0.35;
}

.entry-nav__next {
  text-align: right;
}

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

.entry-nav__ttl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-nav__list {
  order: 3;
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  min-height: 48px;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.entry-nav__list:hover {
  background: var(--c-accent-deep);
}

/* ブログ記事の日付の横に置く、同じ月のアーカイブへのリンク */
.entry__archive {
  margin-left: var(--sp-3);
  color: var(--text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry__archive:hover {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Catalog : 資料請求（LINE 誘導）と PDF ビューアー
   -------------------------------------------------------------------------- */
.catalog-request {
  display: grid;
  justify-items: center;
}

/* 中身は main.js の initCatalogViewer が PDF.js で描く。
   ページは本文カラム（500px）に縛らず画面幅いっぱいに読ませる */
.catalog-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: rgba(var(--c-ink-rgb), 0.97);
  color: var(--text-invert);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.catalog-viewer[hidden] {
  display: none;
}

.catalog-viewer.is-open {
  opacity: 1;
}

.catalog-viewer__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(var(--c-white-rgb), 0.15);
}

.catalog-viewer__title {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.catalog-viewer__count {
  margin-right: auto;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  opacity: 0.7;
}

.catalog-viewer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--c-white-rgb), 0.12);
  color: var(--c-white);
}

.catalog-viewer__close:hover {
  background: rgba(var(--c-white-rgb), 0.24);
}

.catalog-viewer__close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.catalog-viewer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
}

.catalog-viewer__pages {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 1100px);
  margin: 0 auto;
}

/* 読み込み前は淡い枠だけ。比率（--ratio = 幅/高さ）は JS がカタログごとに入れる。
   1ページが画面の高さに収まる幅で頭打ちにする（縦長の冊子が PC で巨大にならないように） */
.catalog-viewer__page {
  justify-self: center;
  width: min(100%, calc((100dvh - 6rem) * var(--ratio, 0.707)));
  aspect-ratio: var(--ratio, 0.707);
  background: rgba(var(--c-white-rgb), 0.06);
}

.catalog-viewer__page img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Contact : 公式LINEへの誘導と電話
   -------------------------------------------------------------------------- */
.contact-cta {
  display: grid;
  justify-items: center;
  margin-top: var(--sp-7);
}

.contact-topics li {
  font-size: var(--fs-body);
}

.contact-tel {
  display: grid;
  gap: var(--sp-3);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-sub);
}

.contact-tel__num a {
  font-family: var(--font-label);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.contact-tel__num small {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}