@charset "UTF-8";
/* ============================================================
   統合作業用の追加スタイル（比較確認のためのファイル）
   ------------------------------------------------------------
   本番の site.css は変更していません。site.css の後に読み込み、
   必要な項目だけを上書きしています。
   本番へ反映する際に、この内容を site.css へ統合します。
   ============================================================ */

/* ============================================================
   1. デザイントークン（v2）
   ============================================================ */
:root {
  /* --- 色 --- */
  --c-bg:        #F7F6F2;   /* 旧 #F8F8F6 */
  --c-text:      #242424;   /* 旧 #222222 */
  --c-sub:       #666261;   /* 旧 #666666。背景比 5.6:1 */
  --c-silver:    #A7A9AC;   /* 旧 #B8BABD。罫線・装飾のみ。文字色には使わない */
  --c-rule:      #DCD9D2;   /* 旧 #DADBDD */
  --c-bg-sub:    #EDEBE5;   /* 旧 #EFEFED */

  /* --- チャコール（Web上でのブラック表現の拡張。冊子は変更しない） --- */
  --c-dark:      #1C1E1F;
  --c-dark-text: #F2F1EC;   /* チャコール比 14.8:1 */
  --c-dark-sub:  #DCDAD3;   /* チャコール比 12.4:1 */
  --c-dark-rule: rgba(167, 169, 172, .30);

  /* --- 寸法 --- */
  --w-max:  1280px;         /* 旧 1120px */
  --w-read: 660px;          /* 旧 620px */
  --pad-x:  clamp(20px, 5.5vw, 88px);

  /* --- 余白3段階 --- */
  --gap-lg: clamp(160px, 19vh, 280px);   /* 大：思想の転換点 */
  --gap-md: clamp(120px, 14vh, 200px);   /* 標準 */
  --gap-sm: clamp(72px,  8vh, 112px);    /* 小：内容が続くところ */
  --gap-sec:  var(--gap-md);
  --gap-head: clamp(40px, 5.5vw, 80px);

  /* --- 文字階層 ---
     Mission と 大きな一文 を上げ、セクション見出しは下げる。
     clamp で連続的に変化させ、画面幅で急に変わらないようにする。 */
  --fs-mission:   clamp(1.75rem, 1rem + 4.2vw, 4.75rem);     /* 28 → 76px */
  --fs-statement: clamp(1.375rem, .9rem + 2.6vw, 3.25rem);   /* 22 → 52px */
  --fs-vision:    clamp(1.5rem, .95rem + 3vw, 3.625rem);     /* 24 → 58px */
  --fs-sectitle:  clamp(1.1875rem, 1.05rem + .8vw, 1.75rem); /* 19 → 28px */
  --fs-h3:        clamp(1.125rem, 1rem + .8vw, 1.625rem);    /* 18 → 26px */
  --fs-h3s:       clamp(1.0625rem, 1rem + .5vw, 1.4375rem);  /* 17 → 23px */
  --fs-body:      clamp(1rem, .95rem + .25vw, 1.125rem);     /* 16 → 18px */
  --fs-lead:      clamp(1rem, .95rem + .35vw, 1.1875rem);    /* 16 → 19px */
  --fs-small:     .9375rem;                                   /* 15px */
  --fs-label:     .8125rem;                                   /* 13px */
}

/* ============================================================
   2. 文字階層
   ============================================================ */
body { font-size: var(--fs-body); line-height: 1.95; }
.read { max-width: var(--w-read); }
.read > p + p { margin-top: 1.5em; }

.sec-num { font-size: var(--fs-label); letter-spacing: .2em; }
.sec-num::after { max-width: 120px; }

/* セクション見出しは「道標」。主張せず、字間で存在を示す */
.sec-title {
  margin-top: 22px;
  font-family: var(--f-mincho); font-weight: 400;
  font-size: var(--fs-sectitle);
  letter-spacing: .1em;
  line-height: 1.6;
}
.sec-lead { margin-top: 28px; font-size: var(--fs-lead); }

/* 大きな一文は「主張」。視線を止める */
.statement {
  font-family: var(--f-mincho); font-weight: 400;
  font-size: var(--fs-statement);
  line-height: 1.62; letter-spacing: .015em;
  text-wrap: balance;
}
/* 52pxの一文は本文カラム（660px）では収まらないため、幅を広く取る */
.statement.read-wide { max-width: min(100%, 1000px); }

.capability-title { font-size: var(--fs-h3); font-weight: 500; }
.promise-title    { font-size: var(--fs-h3s); font-weight: 500; }
.note, .field-hint { font-size: var(--fs-small); }
.nav-list a { font-size: .9375rem; }
.hero-statement { font-size: 1.0625rem; }
.promise-num, .next-steps dt { font-size: var(--fs-label); }

/* ============================================================
   3. Hero（Mission Statement を Mission の直下へ）
   ============================================================ */
.hero { min-height: min(92svh, 900px); }
.hero-mission {
  margin-top: clamp(28px, 3.5vw, 40px);
  font-size: var(--fs-mission);
  line-height: 1.5; letter-spacing: 0;
}
.hero-statement {
  margin-top: clamp(32px, 4vw, 52px);
  margin-left: 0;
  max-width: 520px;
}
.hero-statement::before { margin-bottom: 22px; }
.hero-scroll { margin-top: clamp(48px, 7vh, 88px); }

/* ============================================================
   4. 余白3段階と罫線の削減（9本 → 3本）
   ============================================================ */
.section + .section { border-top: 0; }

#issue    { padding-block: var(--gap-md); }
#about    { padding-block: var(--gap-lg); }              /* チャコール */
#services { padding-block: var(--gap-lg); }              /* 前後がチャコール */
#promise  { padding-block: var(--gap-lg); }              /* チャコール */
#partners { padding-block: var(--gap-lg) var(--gap-sm); }
#process  { padding-block: var(--gap-sm) var(--gap-md); }
#message  { padding-block: var(--gap-md); }
#faq      { padding-block: var(--gap-md) var(--gap-sm); }
#contact  { padding-block: var(--gap-sm) var(--gap-md); }

/* 残す罫線＝地の色が変わらない場所で新しい話題が始まる3か所 */
#services { border-top: 1px solid var(--c-rule); }

/* ============================================================
   5. チャコールの2セクション
   ============================================================ */
#about, #promise, #message, #contact {
  background: var(--c-dark);
  color: var(--c-dark-text);
  border-top: 0 !important;
}

#about .sec-title, #promise .sec-title,
#about .statement, #about .capability-title,
#promise .promise-title { color: var(--c-dark-text); }

#about .read p, #about .sec-lead,
#promise .sec-lead, #promise .promise-body { color: var(--c-dark-sub); }

#about .sec-num, #promise .sec-num,
#promise .promise-num { color: var(--c-silver); }
#about .sec-num::after, #promise .sec-num::after { background: var(--c-silver); }

#promise .promise { border-top-color: var(--c-dark-rule); }
#promise .promise:last-child { border-bottom-color: var(--c-dark-rule); }
#about .dot-list li::before { background: var(--c-silver); }

/* チャコール上のリンクとフォーカス表示 */
#about a, #promise a, #message a, #contact a { color: var(--c-dark-text); }
#about .link, #promise .link, #message .link, #contact .link { border-bottom-color: var(--c-silver); }
#about :focus-visible, #promise :focus-visible,
#message :focus-visible, #contact :focus-visible { outline-color: var(--c-dark-text); }

/* --- 03 は文章量が多いため、詰め込まずに3つのまとまりへ分ける --- */
#about .statement {
  font-size: var(--fs-vision);
  line-height: 1.55;
}
#about .read { max-width: 640px; line-height: 2.1; }   /* 暗背景は行間を広く */
#about .read > p + p { margin-top: 1.7em; }

/* まとまりの区切りは罫線ではなく余白＋短い銀線で */
#about .closing {
  margin-top: clamp(96px, 12vh, 160px);
  padding-top: 0;
  border-top: 0;
  position: relative;
}
#about .closing::before {
  content: ""; position: absolute; top: -56px; left: 0;
  width: 40px; height: 1px; background: var(--c-silver);
}
#about .capability-title { margin-top: clamp(80px, 9vh, 120px) !important; }
#about .dot-list.mincho li { margin-top: 26px; }

/* --- 06 仕事の約束 --- */
#promise .promise { padding-block: clamp(32px, 3.8vw, 48px); }
#promise .promise-body { line-height: 2.05; max-width: 42em; }

/* ============================================================
   6. 固定ヘッダー（チャコール上で反転）
   切替は瞬時。中間色ができないため、読めない瞬間が生じません。
   ============================================================ */
.site-head { transition: none; }

.site-head.is-scrolled {
  background: rgba(247, 246, 242, .93);
  border-bottom-color: var(--c-rule);
}

.site-head.on-dark,
.site-head.on-dark.is-scrolled {
  background: rgba(28, 30, 31, .90);
  border-bottom-color: rgba(167, 169, 172, .22);
}
.site-head.on-dark .logo,
.site-head.on-dark .nav-list a { color: var(--c-dark-text); }
.site-head.on-dark .nav-list a::after { background: var(--c-dark-text); }
/* QW-3 暗い背景の上では明暗を反転させる（塗りボタンのまま） */
.site-head.on-dark .nav-cta {
  background: var(--c-dark-text);
  border-color: var(--c-dark-text);
  color: var(--c-dark);
}
.site-head.on-dark .nav-cta:hover { opacity: .82; }
.site-head.on-dark .nav-toggle span { background: var(--c-dark-text); }
.site-head.on-dark :focus-visible { outline-color: var(--c-dark-text); }

/* --- メニューを開いている間は backdrop-filter を切る（重要） ---
   backdrop-filter は position:fixed の包含ブロックをつくるため、
   有効なままだと全画面メニュー（.site-nav の inset:0）が
   ヘッダーの高さ（約61px）に閉じ込められ、背面のページが透けて見えます。
   site.css の .site-head.is-scrolled に backdrop-filter があるため、
   スクロール後にメニューを開くとこの状態になります。 */
body.body-lock .site-head,
body.body-lock .site-head.is-scrolled { backdrop-filter: none; }

/* スマートフォンでメニューを開くと、背面はオフホワイトの全画面になる。
   その間だけヘッダーを明るい配色へ戻さないと、淡い文字が読めなくなる。
   （site.js が body に body-lock を付ける仕様を利用） */
body.body-lock .site-head.on-dark,
body.body-lock .site-head.on-dark.is-scrolled {
  background: rgba(247, 246, 242, .93);
  border-bottom-color: var(--c-rule);
}
body.body-lock .site-head.on-dark .logo,
body.body-lock .site-head.on-dark .nav-list a { color: var(--c-text); }
body.body-lock .site-head.on-dark .nav-list a::after { background: var(--c-text); }
body.body-lock .site-head.on-dark .nav-cta { border-color: var(--c-silver); }
body.body-lock .site-head.on-dark .nav-toggle span { background: var(--c-text); }

/* JavaScriptが動かない場合：ヘッダーの地を常に淡いオフホワイトで固定し、
   チャコールの上でも濃い文字が読める状態を保つ */
.no-js .site-head {
  background: rgba(247, 246, 242, .93);
  border-bottom-color: var(--c-rule);
}

/* 7.（旧）.split を1カラムに戻す指定は、.split 自体を使わなくなったため
   2026-08-10 に削除しました。 */

/* ============================================================
   8. スマートフォン
   ============================================================ */

@media (max-width: 720px) {
  :root {
    --gap-lg: clamp(112px, 14vh, 160px);
    --gap-md: clamp(88px, 11vh, 120px);
    --gap-sm: clamp(56px, 7vh, 80px);
  }
  #about .read, #promise .promise-body { line-height: 2.0; }
}

/* ============================================================
   9. Projects「私たちの取り組み」
   ------------------------------------------------------------
   3ブロック構成（背景と課題／考えたこと・設計したこと／制作したもの）。
   カード・アイコン・強調色・CTAは使わず、細い罫線と余白だけで組みます。
   ============================================================ */

/* 04の下は「小」に変更（Projectsが続くため） */
#services { padding-block: var(--gap-lg) var(--gap-sm); }
#projects { padding-block: var(--gap-sm) var(--gap-lg); }

.project {
  padding-block: clamp(48px, 5.5vw, 76px);
  border-top: 1px solid var(--c-rule);
}
.project:last-of-type { border-bottom: 1px solid var(--c-rule); }

.project-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 24px;
}
.project-num {
  font-family: var(--f-en); font-size: var(--fs-label);
  letter-spacing: .16em; color: var(--c-sub);
}
.project-title {
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.5;
}
.project-kind {
  margin-left: auto; padding: 4px 14px;
  border: 1px solid var(--c-silver); border-radius: 999px;
  font-size: .75rem; letter-spacing: .06em; color: var(--c-sub);
}

/* 本文と図版 */
.project-body {
  display: grid; gap: clamp(32px, 4vw, 64px);
  grid-template-columns: 1.7fr 1fr;
  align-items: start;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.project-block + .project-block { margin-top: clamp(28px, 3.5vw, 40px); }
.project-block dt { font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-sub); }
.project-block dd {
  margin-top: 12px; max-width: var(--w-read);
  font-size: var(--fs-body); line-height: 1.95;
}

/* 制作したもの：PCはラベルと内容の横並び */
.project-made {
  display: grid; grid-template-columns: 160px 1fr; gap: 24px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 20px; border-top: 1px solid var(--c-rule);
}
.project-made dt {
  font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-sub); padding-top: .25em;
}
.project-made dd { font-size: var(--fs-small); line-height: 1.95; }

/* 図版 */
.project-visual { margin: 0; }
.project-visual img { width: 100%; height: auto; display: block; }
.project-visual.page img { border: 1px solid var(--c-rule); }
.project-visual figcaption {
  margin-top: 12px; font-size: .8125rem; color: var(--c-sub); letter-spacing: .02em;
}

@media (max-width: 900px) {
  .project-body { grid-template-columns: 1fr; }
  /* スマートフォンではラベル幅を固定せず、ラベルの下に内容を置く */
  .project-made { grid-template-columns: 1fr; gap: 10px; }
  .project-made dt { padding-top: 0; }
  .project-visual { max-width: 280px; }
}

/* ============================================================
   10. 制作費の目安
   ------------------------------------------------------------
   細い罫線のみの一覧。カード・比較表・背景色・強調色・
   値引きや通常価格との比較は使いません。
   ============================================================ */

/* FAQの直前に入るため、前後の余白を調整 */
#price { padding-block: var(--gap-md) var(--gap-sm); }
#faq   { padding-block: var(--gap-sm) var(--gap-sm); }

.price-list {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--c-rule);
}

.price-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px clamp(24px, 4vw, 56px);
  padding-block: clamp(26px, 3.2vw, 36px);
  border-bottom: 1px solid var(--c-rule);
}
.price-name { font-size: var(--fs-body); line-height: 1.6; }
.price-amount {
  margin: 0; font-size: var(--fs-body); line-height: 1.6;
  font-variant-numeric: tabular-nums;   /* 桁を揃える */
  white-space: nowrap; text-align: right;
}
.price-desc {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--fs-small); line-height: 1.9; color: var(--c-sub);
  max-width: 46em;
}
/* 料金の下に添える注記（1行空けて示す）。
   ⚠ 2026-09-12：padding-left:1em / text-indent:-1em を外した。
   注記が1行のうちは見た目が変わらないが、2行以上になると
   2行目だけが右に下がって読みにくくなっていた（ツール開発の注記2本で発生）。 */
.price-desc .price-option {
  display: block; margin-top: 10px;
}

.price-note { margin-top: clamp(32px, 4vw, 48px); max-width: 46em; }
.price-note-2 { margin-top: 1.2em; max-width: 46em; }

@media (max-width: 720px) {
  /* スマートフォンは縦積み。金額は左揃え */
  .price-item { grid-template-columns: 1fr; gap: 6px; }
  .price-amount { text-align: left; }
  .price-desc { margin-top: 6px; }
}

/* ---- 03 Kindle出版：表紙は横長のため、本文の下に置く ---- */
.project-body.single { grid-template-columns: minmax(0, 1fr); }

.project-covers { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 720px; }
.project-covers img { width: 100%; height: auto; display: block; }
.project-covers figcaption {
  margin-top: 14px;
  font-size: var(--fs-small); line-height: 1.9; color: var(--c-sub);
}

.project-link-row { margin: clamp(20px, 2.4vw, 26px) 0 0; }
.project-link {
  display: inline-block;
  font-size: var(--fs-small); letter-spacing: .04em;
  border-bottom: 1px solid var(--c-silver); padding-bottom: 3px;
}
.project-link::after { content: " ↗"; font-size: .85em; }
.project-link:hover { border-bottom-color: var(--c-text); }

/* 区切りの帯写真 .band-photo は 01 の中（.issue-photo）へ、
   仕事の進め方の写真 .process-photo は細い帯（.process-band）へ移したため、
   2026-08-10 に削除しました。どちらも site3.css にあります。 */

/* ============================================================
   5-2. チャコールの追加2セクション（代表メッセージ・お問い合わせ）
   ページ後半に視覚的な錨がなかったため追加。確定文は変更していません。
   ============================================================ */
#message .sec-title, #contact .sec-title,
#message .statement, #contact .statement,
#message .message-sign { color: var(--c-dark-text); }

#message .read p, #message .sec-lead,
#contact .read p, #contact .sec-lead { color: var(--c-dark-sub); }

#message .sec-num, #contact .sec-num { color: var(--c-silver); }
#message .sec-num::after, #contact .sec-num::after { background: var(--c-silver); }

/* 暗背景は行間を広くとる */
#message .read, #contact .read { line-height: 2.1; }

/* 「お問い合わせ後の流れ」 */
#contact .next-steps dt { color: var(--c-silver); border-bottom-color: var(--c-dark-rule); }
#contact .next-steps dd { color: var(--c-dark-sub); border-bottom-color: var(--c-dark-rule); }
#contact .next-steps dd span:first-child { color: var(--c-silver); }

/* ---- 暗背景の入力フォーム ---- */
#contact .field label { color: var(--c-dark-text); }
#contact .field .req { color: var(--c-silver); }

#contact .field input,
#contact .field textarea {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(167, 169, 172, .34);
  color: var(--c-dark-text);
}
#contact .field input::placeholder,
#contact .field textarea::placeholder { color: rgba(220, 218, 211, .55); }

#contact .field input:hover,
#contact .field textarea:hover { background: rgba(255, 255, 255, .11); }

#contact .field input:focus,
#contact .field textarea:focus {
  background: rgba(255, 255, 255, .13);
  border-color: var(--c-dark-text);
  outline: none;
}

#contact .field-hint { color: var(--c-dark-sub); }
#contact .field-error { color: #F0AFAF; }                  /* チャコール比 8.0:1 */
#contact .field.has-error input,
#contact .field.has-error textarea { border-color: #F0AFAF; }

#contact .note { color: var(--c-dark-sub); }

/* 送信ボタンは明暗を反転 */
#contact .btn-submit {
  background: var(--c-dark-text);
  color: var(--c-dark);
  border-color: var(--c-dark-text);
}
#contact .btn-submit:hover {
  background: transparent;
  color: var(--c-dark-text);
}
#contact .btn-submit:disabled { opacity: .55; cursor: default; }

/* ============================================================
   ヘッダー：スマートフォンでも「ご相談」を常時表示
   CTAは増やしていません。メニュー内に隠れていたものを外に出しただけです。
   ============================================================ */
.head-actions { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  /* 開いたメニュー（z-index:90）に覆われないようにする */
  .head-actions { position: relative; z-index: 95; }
  .nav-cta { margin-left: 0; padding: 9px 18px; font-size: .8125rem; }
}
@media (max-width: 400px) {
  .nav-cta { padding: 9px 15px; letter-spacing: .04em; }
}

/* メニューを開いている間は「ご相談」を隠す（×印と重ならないように） */
body.body-lock .head-actions .nav-cta { opacity: 0; pointer-events: none; }
.head-actions .nav-cta { transition: opacity .25s var(--ease), background .35s var(--ease),
                                     color .35s var(--ease), border-color .35s var(--ease); }

/* チャコール上でのボタンの見え方（塗りボタン版・2026-08-26 修正）
   ⛔ ここと下の「②」は、必ず同じ組み合わせにすること。
      片方だけ直すと、背景と文字が同じ色になって文字が消えます（実際に起きました）。 */
.site-head.on-dark .head-actions .nav-cta {
  background: var(--c-dark-text);
  border-color: var(--c-dark-text);
  color: var(--c-dark);
}
.site-head.on-dark .head-actions .nav-cta:hover { opacity: .82; }
body.body-lock .site-head.on-dark .head-actions .nav-cta { border-color: var(--c-silver); }

/* ---- ヘッダーの調整（2026-08-07） ---- */

/* ① 「ご相談」が折り返して縦に伸び、下の罫線に近づいていたため
      折り返しを止め、高さを抑える */
.nav-cta { white-space: nowrap; line-height: 1.5; }

@media (max-width: 900px) {
  /* site.css の全画面メニュー用の指定（縦並び時の上余白）を打ち消し、
     ヘッダー内で上下中央に置く */
  .head-actions .nav-cta { margin-top: 0; margin-bottom: 0; padding: 7px 16px; }
}
@media (max-width: 400px) {
  .nav-cta { padding: 7px 14px; }
}

/* ② チャコール背景では明暗を反転させる（塗り＝明るい／文字＝暗い）
      ⚠ 2026-08-26：ここが var(--c-dark-text) のままだと、
        上の①の背景と同じ色になり「ご相談」の文字が消えます。 */
.site-head.on-dark .head-actions .nav-cta { color: var(--c-dark); }
body.body-lock .site-head.on-dark .head-actions .nav-cta { color: var(--c-text); }

/* ③ ハンバーガーを3本線に。開いたときは上下が×、真ん中が消える */
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-head.on-dark .nav-toggle span { background: var(--c-dark-text); }
body.body-lock .site-head.on-dark .nav-toggle span { background: var(--c-text); }


/* 事例のLPへ飛ぶリンクも同じ扱いにする（2026-09-08）。⛔ 強調色は使わない */
.project-link {
  font-weight: 600;
  border-bottom-color: var(--c-silver-d);
}