/* ==========================================================================
   pages.css — トップおよび各固定ページの固有スタイル（ReBUILD）

   思金の pages.css は使わず、5ページぶんだけを書き直した。
   色・サイズは tokens.css の変数だけを使う（直接 #hex を書かない）。
   ========================================================================== */

/* ---------- 改行の出し分け ---------- */
.br-sp{display:none}
@media (max-width:640px){.br-sp{display:inline}.br-pc{display:none}}

/* ---------- 日本語の改行位置 ----------
   日本語は単語の区切りが無いため、既定では文の途中（「多すぎ／ています」など）で折れる。
   auto-phrase は文節の切れ目で折る指定。未対応のブラウザでは従来どおりに折れるだけで、
   表示が壊れることはない。手で入れた <br class="br-pc"> と併用している。 */
h1,h2,h3,
.hero__lead,.phead__lead,.section__lead,.creed__lead,.creed__desc,.team__lead,
.sitem__desc,.sitem__note,.scard__desc,.flow__desc,.cta__desc,.done__lead,.done__note,
.checks li,.faq__item summary,.faq__item > p,.panel__body,.assure li,.nsteps li,
.side__note,.field__help,.prose p,.prose li,.dl td{
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:pretty;
}
/* 見出しは行ごとの長さをそろえる（最終行に1〜2文字だけ残さない）。
   ただし語ごとに span で区切った見出し（.creed__title など）には掛けない。
   balance は行の幅を詰めて調整するため、収まるはずの1行が2行に割れる。 */
.hero__title,.section__title,.phead__title,.cta__title,.done__title,
.sitem__title,.flow__title,.scard__title{text-wrap:balance}

/* 「ほどく。決める。動く。」のような短い語の並びは、語の途中で折らない */
.creed__title span,.cta__tagline span,.hero__eyebrow span{display:inline-block}
.creed__title .is-accent,.hero__eyebrow .is-accent{color:var(--c-navy)}
.cta__tagline .is-accent{color:var(--c-brass-bright)}

/* ---------- ロゴ（文字版）：Re＝墨／BUILD＝青（名刺の配色） ---------- */
.logo__mark{letter-spacing:.08em;font-weight:600}
.logo__re{color:var(--c-ink)}
.logo__build{color:var(--c-navy);letter-spacing:.14em}
.footer .logo__re{color:var(--c-paper)}
.footer .logo__build{color:var(--c-brass-bright)}
.footer__tagline{margin-top:var(--space-2xs);font-family:var(--font-display);
  font-size:var(--text-sm);letter-spacing:.2em;color:var(--c-on-navy-2)}

/* ==========================================================================
   トップ
   ========================================================================== */

/* ---------- ヒーロー：糸の写真 → 見出し の縦積み（名刺・画像案と同じ並び） ---------- */
.hero{background:var(--c-paper);text-align:center;padding-bottom:var(--space-3xl)}
.hero__visual{max-width:var(--w-wide);margin-inline:auto}
.hero__img{display:block;width:100%;height:auto;
  /* 写真の白地をページの紙色に溶かす（境目の線を出さない） */
  mix-blend-mode:multiply}
.hero__inner{margin-top:calc(var(--space-lg) * -1)}
.hero__eyebrow{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;
  letter-spacing:.12em;color:var(--c-ink)}
/* 語のまとまりは inline-block（flex にすると下の横線が語と同じ行に並ぶ） */
.hero__eyebrow span+span{margin-left:.4em}
.hero__eyebrow::after{content:"";display:block;width:56px;height:1px;
  margin:var(--space-md) auto 0;background:var(--c-navy)}
.hero__title{margin-top:var(--space-lg);font-size:var(--text-4xl);font-weight:600;
  line-height:var(--lh-display);letter-spacing:.04em;color:var(--c-ink)}
.hero__lead{margin:var(--space-md) auto 0;max-width:40ch;color:var(--c-ink-2);font-size:var(--text-base)}
.hero__actions{margin-top:var(--space-xl)}
@media (max-width:640px){
  .hero__inner{margin-top:0}
  .hero__eyebrow{font-size:var(--text-base)}
  .hero__lead{text-align:left}
}

/* ヒーローの入場（main.js の heroIn が is-animated を付けたときだけ） */
.hero.is-animated .hero__inner > *{animation:rb-rise var(--dur-slow) var(--ease-out) both}
.hero.is-animated .hero__inner > *:nth-child(2){animation-delay:120ms}
.hero.is-animated .hero__inner > *:nth-child(3){animation-delay:240ms}
.hero.is-animated .hero__inner > *:nth-child(4){animation-delay:360ms}
@keyframes rb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- トップの余白：短く見せる（読み進めない社長を前提にする。要件メモ §2） ---------- */
body.home .section,body.home #service,body.home #flow{padding-block:var(--space-2xl)}
/* 写真を上端に貼るセクションは、上の余白を写真に置き換える */
body.home #issues,body.home #team{padding-top:0}
body.home .section__head{margin-bottom:var(--space-lg)}
body.home .hero{padding-bottom:var(--space-2xl)}

/* ---------- 共通 ---------- */
.section__title{font-weight:600;letter-spacing:.03em}
.section__more{margin-top:var(--space-xl);text-align:center}

/* ---------- こんな状態の社長へ ---------- */
#issues .section__title{text-align:center;margin-bottom:var(--space-xl)}
.checks--lg{display:grid;gap:var(--space-sm)}
.checks--lg li{padding:var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 20px + var(--space-xs));
  background:var(--c-surface);border:var(--rule);border-left:3px solid var(--c-navy);border-radius:var(--radius-md);
  font-size:var(--text-base);line-height:1.7;color:var(--c-ink)}
.checks--lg li+li{margin-top:0}
.checks--lg li::before{left:var(--space-lg);top:calc(var(--space-md) + .2em);width:20px;height:20px}

/* ---------- 支援内容6項目（カード→サービス詳細へ） ---------- */
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
@media (max-width:900px){.scards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.scards{grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}}
.scard{position:relative;display:flex;flex-direction:column;gap:var(--space-2xs);height:100%;
  padding:var(--space-lg) var(--space-lg) var(--space-lg);background:var(--c-surface);
  border:var(--rule);border-radius:var(--radius-lg);text-decoration:none;color:var(--c-ink);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.scard:hover{border-color:var(--c-navy);box-shadow:var(--shadow-2)}
.scard::after{content:"";position:absolute;right:var(--space-lg);top:var(--space-lg);width:8px;height:8px;
  border-top:2px solid var(--c-navy);border-right:2px solid var(--c-navy);transform:rotate(45deg)}
.scard__no{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--c-navy)}
.scard__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.45}
.scard__desc{font-size:var(--text-sm);line-height:1.75;color:var(--c-ink-2)}
@media (max-width:520px){.scard{padding:var(--space-md) var(--space-lg)}.scard__desc{display:none}
  .scard::after{top:50%;margin-top:-4px}}

/* ---------- 相談の進め方 ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
/* 4ステップは、1列あたりが細くなりすぎないよう2列にする
   （4列だと1行8文字ほどになり、文の途中で改行が起きる）。
   1400pxより広い画面でだけ4列に戻す。 */
.flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow--4 .flow__item{padding:var(--space-md)}
/* 2×2に折ると「流れ」に見えない（谷さん指摘 2026-09-25）。
   横1列に収まらない幅では、2列を挟まず縦1列へ移す。 */
@media (max-width:1179px){.flow--4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow__item{position:relative;padding:var(--space-lg);background:var(--c-surface);
  border:var(--rule);border-top:3px solid var(--c-navy);border-radius:var(--radius-md)}
.flow__no{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--c-navy)}
.flow__title{margin-top:var(--space-2xs);font-size:var(--text-xl);font-weight:600}
.flow__desc{margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--c-ink-2)}

/* ---------- 写真の帯（こんな状態の社長へ／チーム） ----------
   画面幅いっぱいに置き、高さは比率で決める。
   PCは横長（8:3）、スマホは縦長ぎみ（5:4）に切り替える。
   スマホ用の画像は assets/img/{name}-sp.webp（inc/shortcodes.php が出し分ける）。 */
.photoband{margin:0 0 var(--space-xl);width:100%;aspect-ratio:8/3;max-height:440px;overflow:hidden;background:var(--c-paper-2)}
/* 糸の帯は細く（写真ではなく区切りの役割） */
.photoband--thin{aspect-ratio:1600/430;max-height:300px;background:var(--c-paper);margin-bottom:0}
.photoband--thin img{mix-blend-mode:multiply}
.photoband img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){
  .photoband{aspect-ratio:5/4;margin-bottom:var(--space-lg)}
  .photoband--thin{aspect-ratio:900/405;margin-bottom:0}
}

/* ---------- 専門家のチーム ---------- */
.team{text-align:center}
.team__lead{margin:var(--space-md) auto 0;max-width:40ch;color:var(--c-ink-2);text-align:left}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-lg);
  list-style:none;padding:0}
.tags li{padding:6px var(--space-sm);font-size:var(--text-sm);color:var(--c-navy-700);
  background:var(--c-navy-100);border-radius:999px}

/* ---------- お問い合わせ帯（トップ末尾・下層共通）とフッターの境目 ---------- */
.footer{background:var(--c-navy-850);border-top:1px solid rgba(250,251,252,.08)}
.footer__main{grid-template-columns:minmax(0,1fr) auto}
.footer__nav{display:block}
.footer__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg)}
.footer__list li+li{margin-top:0}
@media (max-width:1180px){.footer__main{grid-template-columns:minmax(0,1fr)}}
.cta__single{padding-block:var(--space-2xl);text-align:center}
.cta__tagline{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em;
  font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:.24em;color:var(--c-on-navy-2)}
.cta .cta__title{margin-top:var(--space-sm);font-weight:600;line-height:1.5}
.cta .cta__desc{max-width:none;color:var(--c-on-navy-2)}

/* ==========================================================================
   サービス詳細
   ========================================================================== */
.sitems{display:grid;gap:var(--space-xl)}
.sitem{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-md);
  padding-top:var(--space-xl);border-top:var(--rule);scroll-margin-top:calc(var(--header-h) + 16px)}
.sitem:first-child{padding-top:0;border-top:0}
.sitem__no{font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--c-navy)}
.sitem__title{font-size:var(--text-2xl);font-weight:600}
.sitem__desc{margin-top:var(--space-sm);color:var(--c-ink)}
.sitem__note{margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--c-ink-3)}
.sitem__label{margin-top:var(--space-md);margin-bottom:var(--space-2xs);font-size:var(--text-xs);
  font-weight:700;letter-spacing:.1em;color:var(--c-navy)}
@media (max-width:640px){.sitem{grid-template-columns:minmax(0,1fr);gap:var(--space-2xs)}
  .sitem__no{font-size:1.75rem}}

/* よくある質問（details ブロック） */
.faq{display:grid;gap:var(--space-sm)}
.faq__item{background:var(--c-surface);border:var(--rule);border-radius:var(--radius-md)}
.faq__item summary{position:relative;padding:var(--space-md) var(--space-2xl) var(--space-md) var(--space-lg);
  font-weight:700;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:"Q";margin-right:var(--space-xs);font-family:var(--font-display);color:var(--c-navy)}
.faq__item summary::after{content:"";position:absolute;right:var(--space-lg);top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--c-ink-3);border-bottom:2px solid var(--c-ink-3);transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out)}
.faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__item > p{padding:0 var(--space-lg) var(--space-md);color:var(--c-ink-2);font-size:var(--text-sm)}

/* ==========================================================================
   会社概要
   ========================================================================== */
.creed__title{max-width:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .1em;font-size:var(--text-3xl);font-weight:600;letter-spacing:.16em;text-align:center}
.creed__lead{margin:var(--space-lg) auto 0;max-width:44ch;color:var(--c-ink-2);text-align:center}
@media (max-width:640px){.creed__lead{text-align:left}}
.creed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
@media (max-width:720px){.creed{grid-template-columns:minmax(0,1fr)}}
.creed__item{padding:var(--space-lg);background:var(--c-surface);border:var(--rule);border-radius:var(--radius-md);text-align:center}
.creed__en{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--c-navy)}
.creed__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2)}
#profile .section__title{margin-bottom:var(--space-lg)}
/* 会社概要の事業内容を、項目の途中で折り返さない */
.nbi{display:inline-block}

/* ==========================================================================
   お問い合わせ・送信完了
   ========================================================================== */
.layout--form{grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-2xl)}
@media (max-width:900px){.layout--form{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}}
.formbox{padding:var(--space-xl);background:var(--c-surface);border:var(--rule);border-radius:var(--radius-lg)}
@media (max-width:640px){.formbox{padding:var(--space-md)}}
.side--form{display:grid;gap:var(--space-md);align-content:start}
.nsteps{display:grid;gap:var(--space-xs);padding-left:1.25em;list-style:decimal;font-size:var(--text-sm);color:var(--c-ink-2)}
.nsteps li::marker{color:var(--c-navy);font-weight:700}
.side__note{font-size:var(--text-xs);line-height:1.8;color:var(--c-ink-3)}

/* 迷惑メール対策の見えない欄（inc/form-guard.php）。人には見せない */
.rb-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

.done{padding-block:var(--space-3xl) var(--space-4xl);text-align:center}
.done__mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--c-navy-100);color:var(--c-navy)}
.done__mark svg{width:28px;height:28px}
.done__title{margin-top:var(--space-lg);font-size:var(--text-2xl);font-weight:600}
.done__lead{margin-top:var(--space-md);color:var(--c-ink-2)}
.done__note{margin:var(--space-lg) auto 0;max-width:46ch;font-size:var(--text-xs);color:var(--c-ink-3);text-align:left}
.done__back{margin-top:var(--space-xl)}

/* ==========================================================================
   プライバシーポリシー
   ========================================================================== */
.prose{margin-inline:auto;padding-bottom:var(--space-3xl)}
.prose ul{padding-left:1.25em;list-style:disc}
.prose ul li+li{margin-top:var(--space-3xs)}
.prose__date{margin-top:var(--space-2xl) !important;text-align:right;font-size:var(--text-sm);color:var(--c-ink-3)}


/* ---------- 手順カード：流れに見せる（谷さん指摘 2026-09-25） ----------
   ・カードとカードの間に、薄いブルーグレーの▶を置く（最後のカードには付けない）
   ・手順ごとに線画アイコンを出す。アイコンはCSSから差しているので、
     ページ本文（管理画面で編集する側）には何も足さなくてよい。 */
.flow__item{padding-top:var(--space-lg)}
.flow__item::before{
  content:"";display:block;width:40px;height:40px;margin-bottom:var(--space-xs);
  background:var(--c-navy);
  -webkit-mask:var(--flow-icon) no-repeat center/contain;
          mask:var(--flow-icon) no-repeat center/contain;
}
.flow__item:nth-child(1)::before{--flow-icon:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='14' width='32' height='22' rx='3'/%3E%3Cpath d='M8 17l16 11 16-11'/%3E%3C/svg%3E")}
.flow__item:nth-child(2)::before{--flow-icon:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h22a3 3 0 013 3v10a3 3 0 01-3 3H16l-7 6v-6H6a3 3 0 01-3-3V15a3 3 0 013-3z'/%3E%3Cpath d='M36 18h6a3 3 0 013 3v9a3 3 0 01-3 3h-2v5l-6-5'/%3E%3C/svg%3E")}
.flow__item:nth-child(3)::before{--flow-icon:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='16'/%3E%3Cpath d='M16 24l6 6 11-12'/%3E%3C/svg%3E")}
.flow__item:nth-child(4)::before{--flow-icon:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 34h14M6 24h9'/%3E%3Cpath d='M26 10l14 14-14 14'/%3E%3Cpath d='M40 24H20'/%3E%3C/svg%3E")}

.flow__item::after{
  content:"";position:absolute;top:50%;right:calc(var(--space-md) * -1);
  width:var(--space-md);height:14px;transform:translate(0,-50%);
  background:#b6c4dc;
  -webkit-mask:var(--flow-arrow) no-repeat center/10px 14px;
          mask:var(--flow-arrow) no-repeat center/10px 14px;
}
.flow__item:last-child::after{content:none}
:root{--flow-arrow:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M1 1l7 6-7 6z' fill='black'/%3E%3C/svg%3E")}

/* 縦に並ぶときは、矢印を下向きにしてカードの間に置く */
@media (max-width:1179px){
  .flow--4 .flow__item::after{
    top:auto;right:auto;left:50%;bottom:calc(var(--space-md) * -1);
    width:14px;height:var(--space-md);transform:translate(-50%,0) rotate(90deg);
  }
}
@media (max-width:900px){
  .flow .flow__item::after{
    top:auto;right:auto;left:50%;bottom:calc(var(--space-md) * -1);
    width:14px;height:var(--space-md);transform:translate(-50%,0) rotate(90deg);
  }
  /* 狭い画面ではアイコンを左に置き、縦の高さを抑える */
  .flow__item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-md);align-items:start}
  .flow__item::before{grid-row:1 / span 3;margin-bottom:0}
  .flow__item::after{grid-column:1 / -1}
}

/* ---------- スマホでは説明文を中央ぞろえにする（谷さん指摘 2026-09-25） ---------- */
@media (max-width:640px){
  .hero__lead,.team__lead,.creed__lead,.phead__lead,.section__lead{
    text-align:center;margin-inline:auto;text-wrap:balance;
  }
}