/* 工業系コンデンス書体(スペックカードの数字用)= Oswald は index.html 等の で読む。
以前はここで @import していたが、CSS を取得してから初めて発見されるため
リクエストが直列化してフォント取得の開始が遅れていた(2026-07-25・C-5②)。
書体を差し替えるときは --font-cond と をセットで変えること。 */
/* =========================================================================
不動産・地域物件情報テンプレート スタイル(瓦鼠 × 錆浅葱。construction 派生)
配色の切り替えは下の :root 変数を差し替えるだけ(README「配色の切り替え」)。
デザイン原則:
- 「売り込む会社」ではなく「地域の物件台帳」の顔にする。派手な訴求色を避け、
瓦鼠(墨に緑を含んだ濃色)基調＋錆浅葱の一色差しで「中立・実直・地元」を出す
- 明色アクセントを白背景に器(丸・帯)として置かない。濃色の上の小さな
マーク・細い線としてのみ使う(hp-maker-core CLAUDE.md の鉄則を準用)
- 見出しは Noto Sans JP(角ゴ=誠実・現代的)。本文は BIZ UDPGothic(UD書体)
- 変数名は他テンプレートと共通(--sumi=濃色/--accent=アクセント)。
意味は「業種の濃色/差し色」で、値だけが業種ごとに変わる
========================================================================= */
:root {
/* --- 配色(不動産・地域物件情報:瓦鼠 × 錆浅葱) ← 既定 ---
業態で差し替える例:
地域物件情報・空き家バンク --accent: #1E6A63(錆浅葱)/ --sumi: #2C3330(瓦鼠) ← 既定
賃貸仲介(まち中・若年層) --accent: #2E6187(鋼青) / --sumi: #232B36(グラファイト)
売買・資産系(重厚) --accent: #7A4A6B(古代紫)/ --sumi: #2A2730(墨紫)
田舎暮らし・古民家 --accent: #1F6E4A(深緑) / --sumi: #2A2621(土)
*/
/* ※ --accent を差し替えるときの必須条件(2026-07-25レビューで明文化):
・tint地(--paper-2)の上で 4.5:1 以上 … .eyebrow / .feature__kicker / .req など
小さなアクセント文字がこの地に載るため
・白文字を載せて 4.5:1 以上 … .btn--accent のラベル
上の候補はすべてこの2条件を満たす値に調整済み。新しい色を足すときも必ず確認する。
既定値の実測:#1E6A63 は tint地で 5.34:1 / 白文字を載せて 6.37:1。 */
--sumi: #2C3330; /* 瓦鼠:墨に緑を含んだ濃色。濃色セクション・見出し */
--sumi-2: #3D4642; /* 瓦鼠の明るめ(グラデ・ホバー) */
/* --- 濃色の「深さ」(2026-07-25レビューで変数化) ---
以前は .site-footer / .hero のグラデ終端 / スクリムに直書きされており、
--sumi を差し替えてもこの3箇所だけ旧色のまま取り残されていた。
--sumi に対する濃さの比率はテンプレごとに 52〜79% とばらついており
式には還元できないため、明示的なトークンとして持つ。
※ --sumi を変えたら、この2つも必ず併せて調整すること。 */
--sumi-deep: #191E1C; /* 最も深い濃色:フッター地・ヒーローのグラデ終端 */
--scrim: #151917; /* 写真ヒーローのスクリム地。可読性は不透明度側で担保する */
--accent: #1E6A63; /* 錆浅葱(青緑):ボタン・アクセント。白文字が載る濃さを保つこと */
--accent-soft: #7FBAB2; /* 錆浅葱の明るめ:濃色背景の上の文字・マーク専用(--sumi 上 5.9:1) */
--paper: #F6F7F4; /* わずかに緑を含んだ白(ページ地) */
--paper-2: #E9ECE7; /* 淡い灰緑(セクション地) */
--ink: #2C3330;
--ink-muted: #5F6862; /* tint地(--paper-2)の上で 4.8:1(AA) */
--line: #D8DCD7;
/* --- エラー(2026-07-25レビューで追加) ---
値は既存の .form-status.is-err の文字色をそのまま採用(白地 6.36:1)。
フィールド単位のエラー表示と集約メッセージで同じ色を使い、意味と色を1対1に保つ。 */
--error: #A04226;
--error-ring: color-mix(in srgb, var(--error) 14%, transparent); /* --error に追従 */
/* --- タイポ --- */
--font-head: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--font-body: "BIZ UDPGothic", "Yu Gothic", "Noto Sans JP", sans-serif;
--wrap: 1080px;
--radius: 10px;
--shadow: 0 12px 32px rgba(44, 51, 48, 0.14);
--shadow-sm: 0 3px 12px rgba(44, 51, 48, 0.10);
}
/* --------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
line-height: 1.9;
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt" 1;
}
img { max-width: 100%; display: block; }
/* 日本語を文節で折り返す(語中で切れるのを防ぐ)。非対応環境では単に無視される。
従来は送信完了カードにしか入れておらず、ヒーローのリードや本文が
「…環境改善、IT / のご相談まで」のように語の途中で割れていた(2026-07-25レビュー)。
対象は散文だけ。表・ボタン・入力欄には掛けない(短い枠では効果がなく、
かえって行が不揃いになるため)。※ 存在しないセレクタは無効なので全テンプレ共通で置ける。 */
.hero__lead, .head p, .feature p, .news-cta p, .page-hero p,
.svc__desc, .svc-note, .menu-note, .equip-lead, .stat__label,
.faq-item .faq-a, .dish__desc, .taglist-lead, .form-note, .field__error { word-break: auto-phrase; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.5; margin: 0; letter-spacing: .02em; }
/* viewport-fit=cover にしたため、横向きのノッチ側に本文が潜り込まないよう
左右の safe-area を内側の余白として持たせる(* { box-sizing: border-box } なので
その分だけ内容幅が減る)。縦向きでは左右インセットが 0 なので見た目は変わらない。 */
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto;
padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* アンカー着地時にstickyヘッダーで見出しが隠れないように */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; scroll-margin-top: 68px; }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--sumi); color: #fff; }
/* 画像プレースホルダ(顧客写真に差し替える枠) */
.ph {
position: relative;
/* 地色から導出(2026-07-25レビューで変数化)。以前は縞の2色と陰影を直書きしていたため
--paper-2 / --sumi を差し替えてもプレースホルダだけ旧色で残っていた。
比率は実測から一律 98% / 95%(テンプレ間の誤差は最大7で、縞模様では知覚できない)。 */
background: var(--paper-2); /* color-mix 非対応時のフォールバック */
background:
linear-gradient(135deg,
color-mix(in srgb, var(--sumi) 5%, transparent),
color-mix(in srgb, var(--sumi) 2%, transparent)),
repeating-linear-gradient(45deg,
color-mix(in srgb, var(--paper-2) 98%, var(--sumi)) 0 12px,
color-mix(in srgb, var(--paper-2) 95%, var(--sumi)) 12px 24px);
display: grid; place-items: center;
color: var(--ink-muted);
font-size: .8rem; letter-spacing: .08em;
border-radius: var(--radius);
}
.ph::after { content: attr(data-label); }
/* ========================================================= キーボード操作
2026-07-25レビューで追加。従来 :focus-visible の定義が全テンプレに無く、
ブラウザ既定のリング頼みだった(濃色ボタンの上では地に埋もれる)。
:focus ではなく :focus-visible に付けるので、マウス操作では出ない。
※ .form-sent / .form-confirm は JS でフォーカスする「入れ物」なので
それぞれの :focus { outline: none } が優先される(意図どおり)。 */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* 濃色の地の上ではアクセントが沈むので明色のリングに切り替える */
.hero :where(a, button):focus-visible,
.section--dark :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.cta-band :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible { outline-color: var(--accent-soft); }
/* スキップリンク:普段は隠し、Tabで来たときだけ左上に出す。
display:none や visibility:hidden ではフォーカスできないので、
画面外に飛ばす方式にする。 */
.skip-link {
position: absolute; left: .5rem; top: -100px; z-index: 100;
background: var(--sumi); color: #fff; text-decoration: none;
font-weight: 700; font-size: .9rem; line-height: 1.5;
padding: .7rem 1.1rem; border-radius: 0 0 6px 6px;
transition: top .15s ease;
}
.skip-link:focus { top: 0; }
/* 目には見せず、読み上げには残す(掲載例テーブルの など)。
スキップリンクと違いフォーカスを受けない要素専用なので、画面外送りではなく
1px クリップで隠す(レイアウトに影響を残さないため)。 */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------- demo banner */
.demobar {
background: var(--sumi);
color: rgba(255,255,255,.85);
font-size: .78rem;
text-align: center;
padding: .4rem 1rem;
letter-spacing: .02em;
}
.demobar b { color: var(--accent-soft); font-weight: 700; }
/* -------------------------------------------------------------- header */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--paper); /* color-mix 非対応時のフォールバック(不透明) */
background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: saturate(1.1) blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between;
min-height: 68px; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/* ロゴ=濃色の角丸 × 明色のマーク(鉄則の基本形。企業らしく角を少し立てる) */
.brand__mark {
width: 38px; height: 38px; border-radius: 7px;
background: var(--sumi);
display: grid; place-items: center; flex: none;
}
.brand__mark span {
width: 12px; height: 12px; border-radius: 3px;
background: var(--accent-soft);
}
.brand__name { font-family: var(--font-head); font-weight: 700; color: var(--sumi); font-size: 1.14rem; line-height: 1.4; letter-spacing: .04em; }
.brand__name small { display: block; font-size: .54rem; letter-spacing: .2em; color: var(--ink-muted); font-weight: 400; font-family: var(--font-body); }
/* gap は流体(狭いほど詰まる)。畳む直前の 1024〜1080px でも折り返さない余白を稼ぐ */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.7rem); }
.nav a { text-decoration: none; }
.nav a:not(.btn) {
color: var(--sumi); font-family: var(--font-head); font-weight: 600; font-size: .93rem;
letter-spacing: .05em; line-height: 1.5; position: relative; padding: .2rem 0;
white-space: nowrap; /* 日本語のナビ項目が語中で2行に割れるのを防ぐ */
}
.nav a:not(.btn)::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
background: var(--accent); transition: width .2s ease;
}
.nav a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--sumi); margin: 5px 0; transition: .25s; }
/* ヘッダー右クラスタ(ナビ＋言語切替＋ハンバーガー) */
.header-right { display: flex; align-items: center; gap: 1.1rem; }
/* 言語切替(日英)。濃色ピルでアクティブ言語を示す */
.lang-switch {
display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 6px;
overflow: hidden; font-family: var(--font-head); font-weight: 700; font-size: .76rem;
}
.lang-switch a, .lang-switch span {
padding: .32rem .62rem; text-decoration: none; letter-spacing: .06em; line-height: 1.5;
color: var(--ink-muted); transition: background .2s ease, color .2s ease;
}
.lang-switch .is-active { background: var(--sumi); color: #fff; } /* 現在の言語 */
.lang-switch a:hover { background: var(--paper-2); color: var(--sumi); }
/* --------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-family: var(--font-head); font-weight: 700; line-height: 1.5; letter-spacing: .05em;
padding: .8rem 1.7rem; border-radius: 7px; text-decoration: none;
border: 1px solid transparent; cursor: pointer; font-size: 1rem;
transition: box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn:active { transform: translateY(1px); }
/* 白背景で使う主ボタン=土(こげ茶)塗り+白文字 */
.btn--primary { background: var(--sumi); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--sumi-2); }
/* 深緑ボタン=白文字が載る濃さの緑なので白背景でも濃色背景でも使える */
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.08); }
/* 濃色の地(ヒーロー・お知らせ)の上では、accent の「面」と地の明度差が
1.9〜2.8:1 しかなく、ボタンの輪郭が背景に沈む(WCAG 1.4.11 非テキスト
コントラスト 3:1 未満)。実害として、隣の .btn--ghost(白枠)のほうが目立ち
主従が逆転していた。accent-soft の細い枠で輪郭を立てて 5.0〜7.5:1 を確保する。
※ .btn は border: 1px solid transparent を持つので、色を指定するだけで
寸法は変わらない(既存レイアウトに影響しない)。
※ 明色を「面」ではなく「濃色の上の細い線」として使うのは、このリポジトリの
デザイン鉄則どおり。2026-07-25レビュー。 */
.hero .btn--accent,
.section--dark .btn--accent { border-color: var(--accent-soft); }
/* 濃色背景の上の従ボタン=白枠 */
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { border-color: #fff; }
.btn--sm { padding: .5rem 1.15rem; font-size: .88rem; }
/* ----------------------------------------------------------------- hero */
.hero {
position: relative; color: #fff;
background:
radial-gradient(1100px 480px at 82% -8%, var(--sumi-2), transparent 60%),
linear-gradient(165deg, var(--sumi) 46%, var(--sumi-deep) 100%);
overflow: hidden;
}
/* 細い罫のテクスチャで「図面・整った」印象(硬派) */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px),
repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px);
mask-image: linear-gradient(120deg, transparent 40%, #000 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid {
display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.6rem;
align-items: center; padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.hero__eyebrow {
display: inline-flex; align-items: center; gap: .7rem;
font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .2em;
color: rgba(255,255,255,.85); line-height: 1.5;
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--accent-soft); }
.hero h1 {
font-size: clamp(1.9rem, 5vw, 3.05rem); margin: 1.2rem 0 .6rem; line-height: 1.5;
font-weight: 900; letter-spacing: .03em;
}
.hero h1 .accent { color: var(--accent-soft); }
.hero__lead { font-size: 1.02rem; color: rgba(255,255,255,.82); max-width: 34ch; }
.hero__cta { display: flex; gap: .8rem; margin-top: 1.9rem; flex-wrap: wrap; }
.hero__photo { aspect-ratio: 4/3; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
img.hero__photo { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); }
.hero__facts {
display: flex; gap: 1.5rem; margin-top: 2.2rem; flex-wrap: wrap;
font-size: .9rem; color: rgba(255,255,255,.75);
}
.hero__facts b { color: #fff; font-family: var(--font-head); font-weight: 700; margin-right: .35em; }
/* ---- ヒーローのパターン切替(正典は ../../hero-patterns/README.md) ----
.hero.hero--flat(既定) … 左コピー＋右写真カード(企業サイトの王道・写真が弱くても成立)
.hero.hero--photo … 全面写真(img/hero.jpg・オフィス/現場)＋スクリム、コピー1カラム
必須装備:スクリムで可読性確保、背景写真は width/height 指定と軽量化でLCP対策。 */
.hero__scrim { display: none; }
.hero--photo::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: url(../img/hero.jpg) center 35% / cover;
}
.hero--photo .hero__scrim {
display: block; position: absolute; inset: 0; z-index: 1;
background: rgba(0,0,0,.6); /* color-mix 非対応時:無彩の一様スクリム(文字の可読性だけは確保) */
background: linear-gradient(95deg,
color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
color-mix(in srgb, var(--scrim) 55%, transparent) 48%,
color-mix(in srgb, var(--scrim) 14%, transparent) 100%);
}
.hero--photo .hero__grid { grid-template-columns: 1fr; padding: clamp(4.5rem, 15vh, 8rem) 0; }
.hero--photo .hero__photo { display: none; }
.hero--photo .hero__copy { max-width: 37rem; }
.hero--photo .hero__lead { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
/* ---- モバイルのスクリム(2026-07-25レビュー。削除しない) ----
上の横グラデはデスクトップの「左にコピー・右に写真を見せる」構図を前提にしている。
モバイルではコピーが全幅になるため、そのままだと画面右半分が素通しになり、
見出し・リードが写真の明部に載って読めなくなる(juku/restaurant/construction で実測)。
モバイルは縦グラデに切り替え、文字が載る範囲の不透明度を .64 以上に保つ。
α=.64 なら真っ白な写真の上でも白文字が 5.5:1 を満たすので、
顧客が明るい実店舗写真に差し替えても破綻しない(この下限は下げないこと)。 */
@media (max-width: 860px) {
.hero--photo .hero__scrim {
background: rgba(0,0,0,.6); /* color-mix 非対応時:無彩の一様スクリム(文字の可読性だけは確保) */
background: linear-gradient(180deg,
color-mix(in srgb, var(--scrim) 78%, transparent) 0%,
color-mix(in srgb, var(--scrim) 64%, transparent) 50%,
color-mix(in srgb, var(--scrim) 82%, transparent) 100%);
}
}
/* ---------------------------------------------------------- section head */
.head { text-align: center; margin-bottom: 2.8rem; }
.head .eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
color: var(--accent);
font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .24em;
line-height: 1.5;
}
.head .eyebrow .dot { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.section--dark .head .eyebrow { color: var(--accent-soft); }
.section--dark .head .eyebrow .dot { background: var(--accent-soft); }
.head h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: .9rem; color: var(--sumi); line-height: 1.5; font-weight: 800; }
/* 見出し下の短いアクセント線 */
.head h2::after {
content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
background: var(--accent); margin: 1.1rem auto 0;
}
.section--dark .head h2 { color: #fff; }
.section--dark .head h2::after { background: var(--accent-soft); }
.head p { color: var(--ink-muted); margin: 1rem 0 0; }
.section--dark .head p { color: rgba(255,255,255,.72); }
/* --------------------------------------------------------------- feature */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.feature + .feature { margin-top: 3.2rem; }
.feature--rev .feature__media { order: 2; }
.feature__media .ph { aspect-ratio: 5/4; }
.feature__img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; display: block; border-radius: var(--radius); }
.feature__kicker {
font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: .92rem;
letter-spacing: .16em; line-height: 1.6;
}
.feature h3 { font-size: clamp(1.35rem, 3.4vw, 1.8rem); color: var(--sumi); margin: .5rem 0 .9rem; line-height: 1.5; font-weight: 800; }
.feature p { color: var(--ink-muted); }
/* -------------------------------------------------------- service cards */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.svc {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; display: flex; flex-direction: column;
}
/* カード上部=濃色帯(サービス番号)。鉄則:明色はこの濃色帯の上の文字にのみ使う */
.svc__head { background: var(--sumi); color: #fff; padding: 1rem 1.3rem; }
.svc__label { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .16em; color: var(--accent-soft); }
.svc__name { font-family: var(--font-head); font-weight: 800; font-size: 1.22rem; line-height: 1.5; margin-top: .15rem; }
.svc__body { padding: 1.2rem 1.3rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.svc__desc { color: var(--ink-muted); font-size: .92rem; margin: 0 0 1rem; }
.svc__points { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.svc__points li { padding-left: 1.5em; position: relative; font-size: .9rem; color: var(--ink); line-height: 1.7; }
/* チェック風マーク(深緑の細線。器にしない) */
.svc__points li::before {
content: ""; position: absolute; left: .1em; top: .5em;
width: .5em; height: .28em; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
.svc-note { text-align: center; color: var(--ink-muted); font-size: .85rem; margin-top: 1.8rem; }
/* --------------------------------------------------------------- stats */
/* 取引先業種などのタグ列(結果・実績の軽い見せ方) */
.taglist-lead { text-align: center; color: var(--ink-muted); font-size: .9rem; margin: 2.4rem 0 1rem; }
.taglist { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem; margin: 0; padding: 0; list-style: none; }
.taglist li {
background: #fff; border: 1px solid var(--line); border-radius: 6px;
padding: .45rem 1.05rem; font-family: var(--font-head); font-weight: 700;
color: var(--sumi); font-size: .92rem; line-height: 1.5;
}
/* ------------------------------------------------------- 施工実績ギャラリー
物件情報サイトの要:住まいの雰囲気を、あえて不均等なタイル(縦長・横長を混ぜる)で
見せる。キャプション(物件種別/エリア)は写真下部にそっと重ねる
(白背景の器にしない=デザイン鉄則)。cafe テンプレのギャラリーと同型。
※ここに**個別物件の賃料を書かない**。賃料・空室状況は変動するため
共通基盤の /p/menu(掲載物件一覧)が唯一の源(README共通ルール9)。 */
.gallery-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px; gap: 1rem; margin-bottom: 3rem;
}
.gallery-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.gallery-item .ph { position: absolute; inset: 0; border-radius: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item figcaption {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 1.5rem .95rem .75rem;
background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); /* color-mix 非対応時 */
background: linear-gradient(0deg, color-mix(in srgb, var(--scrim) 82%, transparent), transparent);
color: #fff; font-family: var(--font-head); font-weight: 700;
font-size: .84rem; letter-spacing: .03em; line-height: 1.55;
}
/* --------------------------------------------------------------- notice
物件情報サイト固有の「立場の明示」パネル(削除禁止)。
当サイトは宅地建物取引業者ではなく、契約の媒介・代理を行わない——という
一文を、本文に埋もれさせず必ず読める位置に置くための器。
宅建業者が運営する案件に転用する場合は、文言を免許番号の表示に差し替える
(README「運営者の立場で必ず変えるところ」)。
明色アクセントの器にはしない=濃色側の細い縦線 + tint 地で立てる(デザイン鉄則)。 */
.notice {
background: var(--paper-2);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.15rem 1.3rem;
margin: 2.2rem auto 0;
max-width: 760px;
}
.notice__title {
font-family: var(--font-head); font-weight: 800; font-size: .95rem;
color: var(--sumi); margin: 0 0 .35rem; line-height: 1.6;
}
.notice p { margin: 0; font-size: .88rem; color: var(--ink-muted); line-height: 1.85; word-break: auto-phrase; }
.notice p + p { margin-top: .5rem; }
/* 濃色セクションの上に置く場合(#howto の最後など)は地と文字を反転させる */
.section--dark .notice { background: rgba(255,255,255,.06); border-left-color: var(--accent-soft); }
.section--dark .notice__title { color: #fff; }
.section--dark .notice p { color: rgba(255,255,255,.82); }
/* ------------------------------------------------------- 掲載状態のバッジ
募集中 / 申込あり / 成約済み。スペック表の「状態」行と物件見出しで使う。
※静的HTMLに置くのは**掲載例(サンプル)だけ**。実物件の状態は /p/menu 側が持つ
(menu_items.sold_out が「成約済み」に対応し、打ち消し表示になる)。 */
.prop-state {
display: inline-block; vertical-align: middle;
font-family: var(--font-head); font-weight: 700; font-size: .74rem;
letter-spacing: .08em; line-height: 1.5;
padding: .16em .7em; border-radius: 3px;
background: var(--accent); color: #fff;
}
.prop-state--closed { background: var(--ink-muted); }
/* ------------------------------------------------------------------ news */
.news-cta { text-align: center; max-width: 620px; margin-inline: auto; }
.news-cta p { color: rgba(255,255,255,.82); margin: .6rem 0 1.7rem; }
.news-list { list-style: none; padding: 0; margin: 0 auto 1.8rem; max-width: 560px; text-align: left; border-top: 1px solid rgba(255,255,255,.14); }
.news-list[hidden] { display: none; }
.news-list li { display: flex; gap: 1.1rem; align-items: baseline; padding: .85rem .2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.news-list .d { font-family: var(--font-head); color: var(--accent-soft); font-size: .85rem; letter-spacing: .06em; flex: none; line-height: 1.6; }
.news-list .t { color: rgba(255,255,255,.92); text-decoration: none; font-size: .95rem; line-height: 1.6; min-width: 0; }
.news-list .t:hover { color: #fff; text-decoration: underline; }
/* ------------------------------------------------------------------ info */
.info-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; padding: .9rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-table th { width: 8em; color: var(--sumi); font-family: var(--font-head); font-weight: 700; font-size: .95rem; line-height: 1.6; }
.info-table td { color: var(--ink-muted); }
.info-tel { color: var(--sumi); font-weight: 700; }
.info-map { aspect-ratio: 4/3; }
.info-map iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); display: block; }
/* ------------------------------------------------------------------ form */
.form-wrap { max-width: 640px; margin-inline: auto; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; color: var(--sumi); margin-bottom: .35rem; font-size: .95rem; }
.field .req { color: var(--accent); font-size: .78em; margin-left: .4rem; font-weight: 700; }
/* .opt = 純粋に任意の項目用。メール/電話の「どちらか必須」は条件付きでも必須なので
.req を使う(2026-07-25レビュー:任意の見た目だったため必須と気づけなかった)。
現在どのテンプレでも未使用だが、任意項目を足すときのために残している。 */
.field .opt { color: var(--ink-muted); font-size: .78em; margin-left: .4rem; font-weight: 400; }
.field input, .field textarea {
width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 7px;
font: inherit; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field textarea { min-height: 140px; resize: vertical; }
.field small.hint { color: var(--ink-muted); font-size: .8rem; }
/* ---- フィールド単位のエラー表示(2026-07-25レビューで追加。削除しない) ----
従来はフォーム末尾の集約メッセージだけで、どの欄が悪いのかフィールド側に
一切表示がなかった(赤枠なし・インライン文言なし・aria-invalid なし・
最初のエラー欄へのフォーカス移動なし)。novalidate でネイティブ検証も
切っているため代替もなく、モバイルでは利用者が自力でエラー箇所を探すことになる。
JS(markFieldErrors)が .is-invalid と .field__error を付与する。 */
.field.is-invalid label { color: var(--error); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus {
border-color: var(--error); box-shadow: 0 0 0 3px var(--error-ring);
}
.field__error {
display: flex; gap: .45em; align-items: baseline;
margin: .4rem 0 0; font-size: .85rem; line-height: 1.7; color: var(--error);
word-break: auto-phrase;
}
/* 色だけに意味を持たせない(色覚特性への配慮)。記号でもエラーと分かるようにする */
.field__error::before { content: "!"; font-weight: 700; flex: none; }
/* ハニーポット:視覚・スクリーンリーダーから隠す(ボット除け。空のまま送られる) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile ウィジェット。既定では左寄せ・余白なしで、中央揃えの送信ボタンの
真上に浮いて見えていた(2026-07-25レビュー)。中央に揃えて余白を持たせる。
テーマは HTML 側で data-theme="light" を指定(フォーム面が明色のため)。 */
.cf-turnstile { display: flex; justify-content: center; margin: 1.4rem 0 0; }
.form-actions { text-align: center; margin-top: 1.7rem; }
.form-status { margin-top: 1.2rem; padding: .9rem 1rem; border-radius: 7px; font-size: .92rem; display: none; }
.form-status.is-ok { display: block; background: #EAF3EB; color: #2F6B3C; border: 1px solid #C6DECA; }
.form-status.is-err { display: block; background: #FAEDE7; color: var(--error); border: 1px solid #EDCFC0; }
.form-status ul { margin: .4rem 0 0; padding-left: 1.1rem; }
/* 送信完了カード(2026-07-25。07-25に装飾を簡素化)。
送信後はフォーム本体を隠し、状態が伝わるカードに置き換える。
※ .form-note(送信前の「お急ぎは電話」の1行)は 2026-07-26 に既定から外した。
顧客の要望があるときだけ貼る任意パーツになったので、テンプレの HTML には
無いが、CSS はここに残してある(貼り直しに CSS 変更を伴わせないため)。
貼り方は README の共通ルール5。.form-wrap.is-sent .form-note の行は、
貼った案件で送信後に二重案内(完了カードの「お急ぎの場合はお電話…」＋
下部固定CTAの「電話する」で計3回)が出るのを防ぐために必要。
※ .form-sent:focus の outline を消しているのは、role="status" の入れ物へ
プログラム的に focus() を当てるため(操作可能な部品ではないので
フォーカスリングは出さない)。読み上げは role/aria-live が担う。 */
.form-sent { display: none; margin: 1.2rem auto 0; max-width: 30rem;
background: #fff; border: 1px solid var(--line); border-radius: 4px;
padding: 1.9rem 1.9rem 1.7rem; }
.form-sent:focus { outline: none; }
.form-wrap.is-sent #contactForm { display: none; }
.form-wrap.is-sent .form-sent { display: block; }
.form-wrap.is-sent .form-note { display: none; }
.form-sent__head { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; }
.form-sent__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ink-muted); }
.form-sent__title { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.5;
font-weight: 600; color: var(--sumi); margin: 0; letter-spacing: .05em; }
/* word-break: auto-phrase = 日本語を文節で折り返す(語中で切れるのを防ぐ。非対応環境では無効) */
.form-sent__body { margin: 0; font-size: .95rem; line-height: 1.95; color: var(--ink); word-break: auto-phrase; }
.form-sent__body strong { color: var(--sumi); font-weight: 700; }
.form-sent__note { margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
font-size: .875rem; line-height: 1.85; color: var(--ink-muted); word-break: auto-phrase; }
.form-sent__tel { font-weight: 700; color: var(--ink); text-decoration: underline; white-space: nowrap; }
.form-sent__tel:hover { color: var(--accent); }
/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--sumi-deep); color: rgba(255,255,255,.72); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer .brand__name { color: #fff; }
.site-footer h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: .1em; color: #fff; font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--accent-soft); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .9rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.3rem; font-size: .78rem; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__photo { order: -1; aspect-ratio: 16/10; }
.svc-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
.gallery-item--wide { grid-column: span 2; }
.feature, .info-grid, .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
.feature--rev .feature__media { order: 0; }
}
/* ---------------------------------------- ナビの折りたたみ(1024px以下)
レイアウトの1カラム化(860px)より先に、ナビだけをハンバーガーに畳む。
日本語のナビ項目＋CTAは横並びのままだと 900〜1030px 付近で1項目ずつ
2行に折り返し、ヘッダー全体が崩れる(2026-07-25レビューで全テンプレ実測)。
畳む幅を全テンプレ一律 1024px にしているのは、顧客がナビ文言を長くしても
耐えるだけの余白を残すため(実測の必要幅はテンプレにより 814〜1030px)。
※この値を下げるときは、必ずナビ文言を最長にした状態で 1024→860px を
通しで確認すること。 */
@media (max-width: 1024px) {
.nav {
position: fixed; inset: 68px 0 auto 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: .5rem 1.25rem 1.25rem;
transform: translateY(-140%); box-shadow: var(--shadow);
/* 閉状態は visibility: hidden にしてタブ順・スクリーンリーダーから外す。
transform で画面外へ出すだけでは要素は「見えないのに操作できる」状態のままで、
キーボード利用者は見えないメニューにタブで入り込む(2026-07-25レビュー)。
visibility はスライドと同じ .28s で遷移させる。visibility は離散プロパティで
遷移の途中経過が visible に解決されるため、閉じるアニメーションは見えたまま
最後に hidden になる(`0s + delay` 指定では Chrome で hidden に落ちなかった)。 */
visibility: hidden;
transition: transform .28s ease, visibility .28s;
}
.nav.is-open {
transform: translateY(0);
visibility: visible;
transition: transform .28s ease, visibility .28s;
}
.nav a:not(.btn) { padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
.nav a.btn { margin-top: .9rem; }
.nav-toggle { display: block; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* ------------------------------------ 小画面のヘッダー(520px以下)
ロゴ(社名＋欧文)・言語切替・ハンバーガーが横に並びきらず、社名が語中で
折り返してヘッダーが2〜3行に膨らむ(corporate の 390px で実測。2026-07-25)。
顧客の社名は長くなり得るので固定値ではなく可変で詰める:
余白を先に削り、それでも足りない分だけ社名を縮める(上限は各テンプレの既定値
なので 520px ちょうどでは見た目が変わらない)。
※ 係数 4.4vw はデモの社名(全角10文字=corporate)で 390px に収まる実測値。
これより長い社名では社名が2行に折り返してヘッダーが伸びる(壊れはしない)。
顧客案件では社名を入れた状態で 390px を必ず確認すること。 */
@media (max-width: 520px) {
.site-header .wrap { gap: .6rem; }
.header-right { gap: .6rem; } /* 多ページ系のみ存在。無い場合は無効 */
.brand__name { font-size: clamp(1rem, 4.4vw, 1.14rem); }
.lang-switch { font-size: .72rem; } /* 日英テンプレのみ存在 */
.lang-switch a, .lang-switch span { padding: .34rem .5rem; }
}
@media (max-width: 520px) {
.hero__cta .btn { flex: 1 1 auto; }
}
/* ------------------------------------------- FAQ(AIO対策セクション) */
.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: .8rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq-item summary {
list-style: none; cursor: pointer; display: flex; gap: .8rem; align-items: baseline;
padding: 1.05rem 1.15rem; font-weight: 700; color: var(--sumi);
font-family: var(--font-head); line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; color: var(--accent); font-family: var(--font-head); font-weight: 700; flex: none; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
/* ---- 開閉のアフォーダンス(2026-07-25レビューで追加。削除しない) ----
上で ::-webkit-details-marker を消し、マーカーを "Q" に置き換えているため、
閉じた状態では「押すと開く」ことが視覚的に一切伝わっていなかった(全7テンプレ)。
FAQ は AIO(AI検索の引用元)の要でありながら、人間には中身が見えないままになる。
右端のシェブロン(開くと反転)＋ホバーの地色変化で開閉可能を示す。
色は --ink-muted。左の "Q"(--accent)より弱く置き、主役を奪わない。 */
.faq-item summary::after {
content: ""; flex: none; margin-left: auto; align-self: center;
width: .46em; height: .46em;
border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
transform: translateY(-.12em) rotate(45deg);
transition: transform .2s ease, border-color .2s ease;
}
.faq-item[open] summary::after { transform: translateY(.12em) rotate(225deg); }
.faq-item summary:hover { background: var(--paper); }
.faq-item summary:hover::after { border-color: var(--accent); }
.faq-item .faq-a { padding: .95rem 1.15rem 1.1rem; color: var(--ink-muted); display: flex; gap: .8rem; line-height: 1.9; }
.faq-item .faq-a::before { content: "A"; color: var(--sumi); font-family: var(--font-head); font-weight: 700; flex: none; }
.faq-item .faq-a p { margin: 0; }
/* ---------------------------- リクエスト予約の注意書き(削除しない) */
/* 白地・1px罫・角丸・フォーム幅いっぱい = .field input と全く同じ視覚言語だったため、
注記が「無効化された入力欄」に見えていた(2026-07-25レビュー)。
器をやめ、アクセントの細い左罫線だけの注記にする(明色を器にしない鉄則とも整合)。 */
.form-note {
margin: 0 0 1.5rem; padding: .1rem 0 .1rem .9rem;
border-left: 2px solid var(--accent);
font-size: .88rem; color: var(--ink-muted); line-height: 1.8;
word-break: auto-phrase;
}
.form-note b { color: var(--sumi); }
.form-note a { color: var(--sumi); font-weight: 700; white-space: nowrap; } /* 電話番号が途中で改行されないように */
/* ------------------------- フローティングCTA(スマホのみ・下部固定) */
.float-cta { display: none; }
@media (max-width: 860px) {
/* CTAバーの高さぶん、フッターが隠れないように。
viewport-fit=cover ではバーがホームインジケータの下まで伸びるので、
その分(env)も足さないとフッター末尾が約34px隠れる(2026-07-25レビュー)。 */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.float-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
padding: .6rem calc(.8rem + env(safe-area-inset-right))
calc(.6rem + env(safe-area-inset-bottom)) calc(.8rem + env(safe-area-inset-left));
/* ヘッダーと同じ「固定クロム面」なので地色も揃える(2026-07-25)。
従来は cafe だけ --paper、他6テンプレは純白で、暖色系テンプレでは
バーだけ冷たく浮いていた。 */
background: var(--paper); /* color-mix 非対応時のフォールバック */
background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
}
.float-cta .btn { padding: .75rem .4rem; font-size: .93rem; white-space: nowrap; }
/* フッターリンクのタップ領域(2026-07-25レビュー)。
行の高さが約15px、行間 .5rem(8px)で、間隔を足しても23pxしかなく
WCAG 2.2 SC 2.5.8(24×24)を割っていた。リンクを block にして上下に
余白を持たせ、その分 gap を詰めて見た目の間延びを避ける。
※ リンクの無い行(住所・営業時間)はそのままなので、
文字の間隔は従来とほぼ変わらない。 */
.footer-links { gap: .15rem; }
.footer-links a { display: block; padding: .4rem 0; }
/* ヒーロー表示中は下げる(JSが .is-hidden を付ける。2026-07-25レビュー)。
visibility も切り替えて、隠れている間はタブ順・読み上げからも外す(P0-7と同じ作法)。
JSが動かない環境では .is-hidden が付かず、従来どおり常時表示になる。 */
.float-cta { transition: transform .25s ease, visibility .25s; }
.float-cta.is-hidden { transform: translateY(120%); visibility: hidden; }
/* 送信完了後(body.is-form-sent):下部固定CTAの「予約/申込」を下げる。
リンク先 #contact は送信済みのフォーム=完了カードなので、押しても
何も起きない迷子導線になり、かつ二重送信を誘う。残すのは電話だけ。 */
body.is-form-sent .float-cta { grid-template-columns: 1fr; }
body.is-form-sent .float-cta .btn--accent { display: none; }
}
/* =========================================================================
多ページ展開(ハブ&スポーク)用の共通パーツ ★企業向けプラン
1枚もの(既定)では未使用。サブページを作る場合だけ使う。
使い方の正典は ../../multipage-pattern/README.md(サブページ雛形も同梱)。
ここに定義するのは:ページヒーロー / パンくず / 「詳しく見る→」/ CTA帯 /
スペック表(仕様・設備一覧など)。色は全てCSS変数なのでテーマに追従する。
========================================================================= */
/* ナビ現在地(サブページで aria-current="page" を付ける) */
.nav > a[aria-current="page"] { color: var(--accent); }
.nav > a[aria-current="page"]::after { width: 100%; }
/* サブページのページヒーロー(トップの大ヒーローの代わり) */
.page-hero { background: var(--sumi); color: #fff; padding: clamp(2.6rem, 6vw, 4rem) 0; }
.page-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 800; line-height: 1.5; margin: 0; }
.page-hero p { color: rgba(255,255,255,.75); margin: 1rem 0 0; max-width: 60ch; line-height: 1.9; }
.breadcrumb { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .9rem; }
.breadcrumb a { color: var(--accent-soft); }
.breadcrumb span { margin: 0 .5em; opacity: .6; }
/* 「詳しく見る →」リンク(ハブから各サブページへ誘導) */
.more-link { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: .92rem; }
.more-link::after { content: "→"; transition: transform .2s ease; }
.more-link:hover::after { transform: translateX(3px); }
.more-wrap { text-align: center; margin-top: 2rem; }
/* サブページ下部のCTA帯(フォームはハブに集約し、各ページはここから誘導) */
.cta-band { background: var(--accent); color: #fff; text-align: center; padding: clamp(2.8rem, 6vw, 4rem) 0; }
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 800; margin: 0; line-height: 1.5; }
.cta-band p { color: rgba(255,255,255,.92); margin: 1rem 0 1.8rem; }
.cta-band .cta-band__btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn--light { background: #fff; color: var(--sumi); }
.btn--light:hover { filter: brightness(.95); }
.btn--outline { border: 1px solid rgba(255,255,255,.8); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); }
/* スペック表(仕様一覧・設備一覧など。横スクロール対応) */
.equip-lead { max-width: 62ch; margin: 0 auto 2rem; text-align: center; color: var(--ink-muted); line-height: 1.9; }
.equip-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.equip-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .92rem; }
.equip-table thead th { background: var(--sumi); color: #fff; font-family: var(--font-head); font-weight: 700; text-align: left; padding: .8rem 1rem; font-size: .86rem; letter-spacing: .04em; white-space: nowrap; }
.equip-table tbody th, .equip-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.equip-table tbody tr:last-child th, .equip-table tbody tr:last-child td { border-bottom: 0; }
.equip-table tbody tr:nth-child(even) { background: var(--paper-2); }
.equip-table tbody th { text-align: left; color: var(--sumi); font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.equip-table tbody td { color: var(--ink-muted); }
.equip-table .num { text-align: right; white-space: nowrap; }
.equip-scroll-hint { text-align: center; color: var(--ink-muted); font-size: .78rem; margin: .7rem 0 0; }
/* 加工事例・実績カードも、スペック表示カードと同じ「データシート/銘板」の作りに揃える */
.equip-cases {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--line); border: 1px solid var(--line);
border-radius: 4px; overflow: hidden; margin-top: 2.4rem; counter-reset: caseidx;
}
.equip-case { counter-increment: caseidx; background: #fff; border: 0; border-radius: 0; padding: 1.5rem 1.5rem 1.6rem; }
.equip-case::before { /* 連番インデックス(Oswald・アクセント色) */
content: counter(caseidx, decimal-leading-zero);
display: block; font-family: var(--font-cond); font-weight: 600;
font-size: .78rem; letter-spacing: .2em; color: var(--accent); margin-bottom: .8rem;
}
.equip-case h4 { font-family: var(--font-head); color: var(--sumi); font-size: .98rem; margin: 0 0 .5rem; line-height: 1.5; }
.equip-case p { color: var(--ink-muted); font-size: .88rem; margin: 0; line-height: 1.75; }
@media (max-width: 860px) { .equip-cases { grid-template-columns: 1fr; } }
/* =========================================================================
★スペック表示カード(データシート/銘板風)★企業向けプラン・B2B標準
量産型のKPIカード(白角丸＋中央アイコン)をやめ、AI感を消した見せ方。
・浮いたカード → ハーフライン仕切りの一枚板(角丸ほぼ無し・影なし・左揃え)
・中央アイコン → 隅の淡いウォーターマーク(.stat__icon)
・英字キー(.stat__ix)＋大きなコンデンス数字(Oswald)＋刻印風のアクセント罫
実例=hp-maker-core/clients/higuchi-machinery。使い方=../../multipage-pattern/README.md。
========================================================================= */
:root { --font-cond: "Oswald", "Roboto Condensed", var(--font-head); }
.stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--line); border: 1px solid var(--line);
border-radius: 4px; overflow: hidden;
}
/* レスポンシブはこの直後に置く(2026-07-25:重要)。
このブロックはファイル後半にあり、860px/520px のメディアクエリより後ろに来る。
メディアクエリは詳細度を上げないので、列数の指定を前方のメディアクエリに置くと
後勝ちで repeat(4, 1fr) に戻り、モバイルで4列のまま潰れる(実際に発生させた)。
.stats の指定は分散させず、必ずこの1箇所にまとめること。 */
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
position: relative; overflow: hidden;
background: #fff; border: 0; border-radius: 0;
text-align: left; padding: 1.6rem 1.5rem 1.5rem;
}
.stat__ix { /* 英字のミニ見出し(データシートのキー) */
display: block; font-family: var(--font-cond); font-weight: 600;
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted);
}
.stat__icon { /* 隅の淡いウォーターマーク */
position: absolute; top: 1.05rem; right: 1.05rem;
width: 44px; height: 44px; margin: 0; color: var(--sumi); opacity: .1;
}
.stat__icon svg { width: 100%; height: 100%; display: block; }
.stat b { /* 数字はコンデンス書体(Oswald) */
display: block; margin: 1.05rem 0 0;
font-family: var(--font-cond); font-weight: 600; letter-spacing: .01em;
color: var(--sumi); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1;
}
/* 単位の小書き。font-weight は 700(Oswald は 600/700 のみ読み込み。
800 と書いても 700 に解決されるだけなので、実態に合わせる。C-2 と同じ是正) */
.stat b span { font-size: .42em; font-weight: 700; margin-left: .15em; color: var(--ink-muted); }
.stat b::after { /* 刻印のようなアクセントの短い罫 */
content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-top: .8rem;
}
.stat__label {
display: block; text-align: left; margin-top: .8rem;
color: var(--ink-muted); font-size: .84rem; line-height: 1.6;
}
.equip-table .num { font-family: var(--font-cond); font-weight: 600; }
/* アニメーション抑制の希望を尊重 */
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto; transition: none !important; }
}
/* ----------------------------------------- 送信前の確認パネル(form-confirm)
いきなり送信せず、入力内容を一度確認してもらうためのパネル。
確認中(.is-confirming)は入力欄・元の送信ボタン・Turnstile を隠す。 */
.is-confirming .field,
.is-confirming .form-actions,
.is-confirming .cf-turnstile { display: none; }
.form-confirm { margin-top: .5rem; }
/* JSでフォーカスを当てる入れ物。操作可能な部品ではないのでリングは出さない
(.form-sent と同じ扱い。読み上げは中の見出し文が担う)。2026-07-25レビュー。 */
.form-confirm:focus { outline: none; }
.form-confirm__lead { font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; }
.form-confirm__list { margin: 0; border-top: 1px solid var(--line); }
.form-confirm__list dt { font-family: var(--font-body); font-weight: 700; color: var(--ink-muted); font-size: .8rem; letter-spacing: .04em; padding: .9rem 0 .15rem; }
.form-confirm__list dd { margin: 0 0 .1rem; padding: 0 0 .9rem; color: var(--ink); border-bottom: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.form-confirm__list dd.is-empty { color: var(--ink-muted); font-style: italic; }
.form-confirm__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.6rem; }
.form-confirm__back { background: #fff; color: var(--ink); border: 1px solid var(--ink-muted); font-weight: 700; }
/* ホバーの地色。--line は罫線トークンなので面には使わない(2026-07-25)。
ボタン自身の枠色から起こした淡い面にする。 */
.form-confirm__back:hover { background: var(--paper-2); border-color: var(--ink); }
.form-confirm__back:hover { background: color-mix(in srgb, var(--ink-muted) 12%, #fff); }
@media (max-width: 520px) {
.form-confirm__actions { flex-direction: column-reverse; }
.form-confirm__actions .btn { width: 100%; }
}
/* ----------------------------------------------------------------- blog
ブログ(blog-pattern。共通基盤 /p/blog/latest.json を読む動的セクション)。
配色トークンのみ参照するのでどのパレットでもそのまま効く。
セクションは hidden で出荷し、記事が取れたときだけ js/main.js が外す
(ブログ未契約の案件に貼っても何も表示されない=貼りっぱなしで無害)。 */
.blog-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.blog-grid[hidden] { display: none; }
/* カードは **白面**。地(--paper)と同じ色にすると枠線1本だけの区別になり、
背景と同化して「カードに見えない」(2026-07-26に実際に発生)。
テンプレ既存の .faq-item / .equip-wrap と同じ「白面+線+角丸」の作法に揃え、
影で面を持ち上げる。セクション側は .section--tint を推奨(下記HTML参照)。 */
.blog-card { display: flex; flex-direction: column; height: 100%;
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.blog-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.blog-card__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.blog-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.blog-card__meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
font-family: var(--font-head); font-size: .78rem; letter-spacing: .04em; color: var(--ink-muted); }
.blog-card__cat { display: inline-block; padding: .15rem .6rem; border-radius: 999px;
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 700; }
.blog-card__title { font-family: var(--font-head); font-size: 1.02rem; line-height: 1.55; margin: 0; }
.blog-card__ex { font-size: .88rem; line-height: 1.8; color: var(--ink-muted); margin: 0; }
.blog-more { text-align: center; margin-top: 1.8rem; }
/* ------------------------------------------------------------------- 404
404.html 専用。ヘッダー・フッターを持たない独立したページ。
Cloudflare Pages は存在しないURLすべてに 404.html を返すので、
/a/b/c のような深いURLでも壊れないよう 404.html 側の参照は絶対パスにしてある。
幅の分岐はメディアクエリではなく clamp() で持たせる(この節より後ろに
非メディアの宣言が来ると後勝ちするため。check-release.sh の検査11)。 */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center;
padding: clamp(2.5rem, 8vw, 5rem) 0; }
.nf__code { font-family: var(--font-head); font-weight: 700; line-height: 1;
font-size: clamp(3.2rem, 12vw, 5.5rem); letter-spacing: .06em;
color: var(--sumi); opacity: .16; margin: 0 0 .5rem; }
.nf__title { font-size: clamp(1.3rem, 4.5vw, 1.75rem); margin: 0 0 1rem; }
.nf__lead { color: var(--ink-muted); margin: 0 auto 2.2rem; max-width: 34rem; }
.nf__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0; }
.nf__links .btn { min-width: 11rem; }
/* 従ボタン(白背景の上の枠線)。.btn は border: 1px solid transparent を持つので
色を足すだけで寸法は変わらない。 */
.nf__links .btn:not(.btn--primary) { border-color: var(--line); color: var(--sumi); }
.nf__links .btn:not(.btn--primary):hover { border-color: var(--sumi); }
.nf__brand { margin: 2.8rem 0 0; font-family: var(--font-head); font-size: .8rem;
letter-spacing: .16em; color: var(--ink-muted); }