/* homepage-forge の土台（構造と使いやすさだけ）。
 * 見た目はここで作り込まない。案件ごとに projects/<slug>/theme.css をデザイン担当が書き、この後ろに足される。
 * 色は theme.json のプリセット（--wp--preset--color--*）だけを使う。ここに色の値を直書きしない。
 */

/* ---- 行の組み ---- */
.hf-header { padding-block: var(--wp--preset--spacing--30); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent); }
.hf-header__row { max-width: var(--wp--style--global--wide-size); margin-inline: auto; align-items: center; }
.hf-site-title { font-weight: 700; font-size: var(--wp--preset--font-size--large); margin: 0; }
.hf-site-title a { color: inherit; text-decoration: none; }
.hf-main { padding-bottom: var(--wp--preset--spacing--60); }
.hf-page-head { padding-top: var(--wp--preset--spacing--50); }

/* ---- 節 ---- */
.hf-section, .hf-hero, .hf-cta { padding-block: var(--wp--preset--spacing--60); }
.hf-section:nth-of-type(even) { background: var(--wp--preset--color--subtle); }
.hf-eyebrow { font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .06em; color: var(--wp--preset--color--muted); margin-bottom: 0; }
.hf-section__lead, .hf-lead { color: var(--wp--preset--color--muted); }
/* 幅を絞らない。絞ると中央寄せでずれ、margin-left:0 にすると全幅の節の左端まで飛び出す（2026-09-24 両方を画像で確認） */
.hf-hero__cols { align-items: center; }
.hf-hero__title { margin-top: .2em; }

/* ---- カード（同じ大きさを均等に並べるだけにしない。並びはデザインで決める） ---- */
.hf-cards { gap: var(--wp--preset--spacing--40); align-items: stretch; }
.hf-cards > .hf-card { flex: 1 1 18rem; }
.hf-card { padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base); border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); }
.hf-card__title { margin-top: 0; }
.hf-price__amount { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; margin: 0; }
.hf-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hf-tags li { font-size: var(--wp--preset--font-size--small); padding: .1em .7em; border: 1px solid currentColor; border-radius: 999px; }
.hf-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ---- 進め方 ---- */
.hf-steps { padding-left: 1.4em; }
.hf-steps li { padding-block: .6em; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }

/* ---- よくある質問 ---- */
.hf-faq .wp-block-details { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); padding-block: .8em; }
.hf-faq summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* ---- 一覧 ---- */
/* 実績の画像は実物なので切らない（2026-09-24 本の表紙の下段・左右が切れた）。比率が違えば地の色の余白で合わせる */
.hf-works .wp-block-post-featured-image img { width: 100%; height: auto; object-fit: contain; background: var(--wp--preset--color--subtle); }
.hf-news .wp-block-post-template > li { display: flex; gap: 1em; flex-wrap: wrap; padding-block: .6em; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }
.hf-news .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); margin: 0; }
.hf-date { color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }

/* ---- 相談フォーム ---- */
.hf-form { display: grid; gap: var(--wp--preset--spacing--30); max-width: 40rem; }
.hf-field label { display: block; font-weight: 700; margin-bottom: .3em; }
.hf-field input, .hf-field textarea { width: 100%; font: inherit; font-size: max(16px, 1rem); padding: .7em .8em; border: 1px solid var(--wp--preset--color--muted); border-radius: 4px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); box-sizing: border-box; }
.hf-req { font-size: var(--wp--preset--font-size--small); margin-left: .5em; padding: 0 .4em; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); border-radius: 2px; }
.hf-form__purpose, .hf-purpose { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.hf-form__error { padding: .8em 1em; border-left: 4px solid currentColor; font-weight: 700; }
.hf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hf-form .wp-block-button__link { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* ---- フッター ---- */
.hf-footer { padding-block: var(--wp--preset--spacing--50); background: var(--wp--preset--color--subtle); font-size: var(--wp--preset--font-size--small); }
.hf-footer a { color: inherit; }

/* ---- 操作しやすさ（WCAG 2.4.7 / 2.5.8） ---- */
:where(a, button, summary, input, textarea, .wp-block-navigation-item__content):focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.wp-block-navigation-item__content { min-height: 44px; display: inline-flex; align-items: center; }

/* 押せる大きさ 24px 以上（WCAG 2.5.8）。文中のリンク以外の、単独で置くリンクに当てる。
 * 2026-09-24 の audit で、フッターのリンク・実績の種類のリンクが高さ 20px だった */
.hf-footer a, .wp-block-post-terms a, .hf-card__link a, .hf-news .wp-block-post-title a { display: inline-block; min-height: 24px; min-width: 24px; line-height: 24px; }
.wp-block-post-terms a { padding-inline: 4px; text-align: center; }
/* スマホのメニューボタンに見える境界（WCAG 1.4.11。audit で境界 1:1 だった） */
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { border: 1px solid currentColor; border-radius: 4px; padding: 6px; min-width: 44px; min-height: 44px; justify-content: center; }

/* 実績ページ末尾の「一覧へ」: 押せる大きさ 24px 以上（WCAG 2.5.8）。1行のリンクは高さ 19px になる。
 * 位置（:last-child）で狙うと、後ろに節を足したときに外れる（2026-09-24 相談への誘導を足して外れた） */
.hf-back a { display: inline-block; min-height: 24px; line-height: 24px; }

/* スマホの画面の下に固定する予約ボタン（stickyCta）。PC は隠す（ヘッダーに予約がある）。
 * 本文の最後がボタンに隠れないよう、足元の下に同じ高さの余白を取る */
.hf-sticky { display: none; }
@media (max-width: 781px) {
  .hf-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0 !important;
    padding: .5rem 16px calc(.5rem + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--base); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
    box-shadow: 0 -6px 16px -10px color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent); }
  .hf-sticky .wp-block-buttons { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 0; }
  .hf-sticky .wp-block-button__link { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
  .hf-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}
/* 足元のリンク色（.hf-footer a）がボタンの文字に勝ち、緑の上に黒い文字になっていた（2026-09-24 実測）→ ボタンの色を明示 */
.hf-footer .hf-sticky .hf-sticky__main .wp-block-button__link { color: var(--wp--preset--color--accent-contrast); background: var(--wp--preset--color--accent); text-decoration: none; }
.hf-footer .hf-sticky .hf-sticky__tel .wp-block-button__link { color: var(--wp--preset--color--contrast); text-decoration: none; }

/* 実績の「実物を見る」のリンク: 1行の高さが 19px で押せる大きさに足りない（2026-09-24 audit で6件）→ 行のリンクを 24px 以上に */
.hf-links a { display: inline-block; min-height: 24px; line-height: 24px; padding-block: 2px; }
.hf-links li + li { margin-top: .4em; }

/* 相談フォームが本文の幅の中で中央に寄り、見出しと左端がずれていた（2026-09-24）→ 左に揃える */
.hf-contact > *, .hf-contact .hf-form { margin-left: 0 !important; }

/* ==== 2026-09-24 に人が見つけた崩れを、全サイトで起きないようにする（audit の「文字の折れ」「左端のずれ」と対） ==== */
/* 最後の行に1〜2文字だけ落ちる・語の途中で折れる（「98／冊」「回／数券」「お知ら／せ」）→ 文節で折り、短い最後の行を避ける。
 * Chrome 119 以降で効く。効かないブラウザでは今まで通りの折れ方になるだけ */
.hf-main :where(h1, h2, h3, h4, p, li, summary, figcaption), .wp-block-button__link { word-break: auto-phrase; text-wrap: pretty; }
/* 足元の左端がヘッダーの屋号（広い幅）より右に寄っていた（屋号 60px ／ 足元 260px）→ 足元も広い幅で */
.hf-footer.is-layout-constrained > :not(.alignfull) { max-width: var(--wp--style--global--wide-size); }

/* ==== 全型共通の土台（design/presets/_foundation.css） ====
 * hpforge.py new --style のとき、型の theme.css の前にこのファイルがつながれて projects/<slug>/theme.css になる。
 * 決まりの説明は _foundation.md。ここは全型に効くので、型ごとの見た目は書かない。
 * 色の値を直書きしない（--wp--preset--color--* だけ）。
 */

/* 字間: 0.02〜0.04em（wp-corporate-demo 規則 §6）。0.12em に上書きされても崩れないよう、高さを固定しない（WCAG 1.4.12） */
body { letter-spacing: .03em; }

/* 見出しは文節で折る（Chrome 119 以降。効かないブラウザでは今まで通り） */
:where(h1, h2, h3) { word-break: auto-phrase; }

/* 長い URL・英数字で横スクロールを出さない（audit の「横スクロール」） */
.hf-main :where(p, li, dd, td) { overflow-wrap: break-word; }

/* 全幅の節どうし・ヘッダーと本文の間に、地の色の細い隙間を作らない（blockGap の margin が帯の間に出る。
 * 2026-09-24 kenjitsu の画面で、帯と帯の間に 16px の白い筋が出ていた） */
.wp-site-blocks > .hf-main, .wp-site-blocks > footer { margin-block-start: 0; }
.hf-main .wp-block-post-content > :is(.hf-hero, .hf-section, .hf-cta) { margin-block-start: 0; }

/* 押せる大きさ 24px 以上（WCAG 2.5.8）。2026-09-24 の型の audit で、
 * 実績のページ末尾「つくったものの一覧へ」が高さ 19px、屋号のリンクが 22px（見出しを細く・丸ゴにした型）だった */
.single-hf_work .hf-main > .wp-block-group:last-child a,
.hf-site-title a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ==== 型: jitsubutsu 実物を並べる ====
 * 構造（preset.json の layout）: hero=works（見出しの下に実績6件の格子）、heroWorks=6、
 *   トップの「実績」の節は出さない（最初の画面と重なる）
 * ねらい: 作品集（展示の壁）。文字は脇役にして短く、写真を格子で詰める。地は白、写真の角は立てる。
 *   差し色（苔の緑）はボタンとリンクだけ。写真の色を邪魔しない。
 * 色は --wp--preset--color--* だけ。数値の段は _foundation.md。
 */

/* ---- ヘッダー: 低く ---- */
.hf-header { padding-block: var(--wp--preset--spacing--20); }
.hf-site-title { font-weight: 800; letter-spacing: .06em; }
.wp-block-button__link { border-radius: 0; }

/* ---- 最初の画面: 見出しは短く、すぐ格子 ---- */
.hf-hero--works { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.hf-hero--works .hf-hero__text { padding-bottom: var(--wp--preset--spacing--40); }
.hf-hero--works .hf-hero__title { font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.4; font-weight: 800; }
/* PC 幅: 左に見出し、右に説明とボタン。1行でも多く写真を上げる */
@media (min-width: 782px) {
  .hf-hero--works > .hf-hero__text { max-width: var(--wp--style--global--wide-size); display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--50); align-items: end; }
  .hf-hero--works .hf-hero__text > * { margin: 0 !important; max-width: none; }
  .hf-hero--works .hf-hero__text > .hf-eyebrow { grid-column: 1; grid-row: 1; margin-bottom: .4em !important; }
  .hf-hero--works .hf-hero__text > .hf-hero__title { grid-column: 1; grid-row: 2 / span 2; }
  .hf-hero--works .hf-hero__text > .hf-lead { grid-column: 2; grid-row: 2; }
  .hf-hero--works .hf-hero__text > .wp-block-buttons { grid-column: 2; grid-row: 3; margin-top: var(--wp--preset--spacing--30) !important; }
}

/* ---- 格子: 1件目を 2列×2行 に大きく（同じ大きさを均等に並べない。規則 §5）。
 * 3列×3行 = 大1（4マス）＋小5 で、heroWorks=6 のとき隙間なく埋まる。件数を変えたら並びを見直す。
 * PC 幅だけ。WordPress は 600px 以下で格子を1列にするので、そこで span 2 を使うと横にはみ出す */
.hf-hero__works { margin-top: 0; }
.hf-hero__works .wp-block-post-template.is-layout-grid { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.hf-hero__works .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); margin-block: .2em 0; line-height: 1.5; }
.hf-hero__works .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.hf-hero__works .wp-block-post-title a:hover { text-decoration: underline; }
.hf-hero__works .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-top: .2em; }
.hf-hero__works .wp-block-post-excerpt__excerpt { margin: 0; }
@media (min-width: 782px) {
  .hf-hero__works .wp-block-post-template.is-layout-grid > li:first-child { grid-column: span 2; grid-row: span 2; }
  .hf-hero__works .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-title { font-size: var(--wp--preset--font-size--large); }
  /* 大きい1件の写真は、下の文字の分まで伸ばして右の2段と下端を揃える */
  .hf-hero__works .wp-block-post-template.is-layout-grid > li:first-child { display: flex; flex-direction: column; }
  .hf-hero__works .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-featured-image { flex: 1 1 auto; }
  .hf-hero__works .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-featured-image :is(a, img) { height: 100% !important; }
}
/* 写真: 角を立て、触れたときだけ少し寄る（格子の写真だけ。他には動きを付けない） */
.hf-works .wp-block-post-featured-image { overflow: hidden; margin-bottom: .6em; }
.hf-works .wp-block-post-featured-image img { transition: transform .4s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hf-works .wp-block-post-featured-image a:hover img { transform: scale(1.03); }
}
/* 種類: 小さな文字だけ（枠や色の札にしない） */
.hf-works .hf-eyebrow { font-weight: 700; letter-spacing: .08em; }
.hf-works .hf-eyebrow a { color: var(--wp--preset--color--muted); text-decoration: none; }

/* ---- 他の節: 写真が主役なので、節の帯は控えめ（交互の薄い帯のまま） ---- */
.hf-section__title { font-weight: 800; }
.hf-card { border: 0; background: var(--wp--preset--color--subtle); }
.hf-section:nth-of-type(even) .hf-card { background: var(--wp--preset--color--base); }
.hf-price__amount { letter-spacing: .01em; }
.hf-profile__photo img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 782px) {
  .hf-profile > .wp-block-column:has(> .hf-profile__photo) { flex: 0 0 34%; }
}

/* 実績の画像は「実物」なので切らない（2026-09-24 本の表紙の下段・左右が切れていた）。枠と比率が違えば余白で合わせる */
.hf-works .wp-block-post-featured-image img { object-fit: contain !important; background: #f0ede6; }
/* 一覧の題名が大きすぎて3行に折れていた（h2 の大きさのまま）→ カードの題名の大きさに。文節で折る */
.hf-works .wp-block-post-title { font-size: var(--wp--preset--font-size--large) !important; line-height: 1.5; word-break: auto-phrase; text-wrap: pretty; }
.hf-main :where(p, li, h1, h2, h3) { word-break: auto-phrase; text-wrap: pretty; }
/* スマホの最初の画面: 2つのボタンの幅がばらばら → 同じ幅で縦に */
@media (max-width: 781px) {
  .hf-hero .wp-block-buttons { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hf-hero .wp-block-button, .hf-hero .wp-block-button__link { width: 100%; text-align: center; }
}

/* 特定商取引法に基づく表記: 項目名の列の幅を決め打ちにする（自動だと1文字ずつ折れる／広がりすぎる） */
.hf-tokushoho table { table-layout: fixed; width: 100%; }
.hf-tokushoho th { width: 11em; text-align: left; vertical-align: top; }
@media (max-width: 781px) {
  .hf-tokushoho th { width: 7.5em; font-size: .9em; }
}