@charset "UTF-8";
/* ============================================================
   LIFE DESIGN LAB 公式サイト  v3 追加スタイル（2026-08-10）
   ------------------------------------------------------------
   site.css → site2.css → site3.css の順に読み込みます。
   前の2枚は変更していません。ここは「上から足す」だけのファイルです。

   このファイルでやっていること
     1. 色と余白の追加（薄いアイボリー背景・文字の強弱）
     2. ファーストビューを 文章＋キービジュアル の2段組に
     3. 01 私たちが向き合うこと を 文章＋写真 の2段組に
     4. 03 見つける／整える／伝える を 01→02→03 の流れに
     5. 04 私たちの取り組み の実物を大きく見せる
     6. 05 仕事の約束 を誌面のような組みに
     7. 08 代表メッセージ に写真スペースを用意（写真が届いたら有効になります）
     8. 09 Insights（note）
     9. 10 仕事の進め方 をタイムラインに
    10. 料金・FAQ・余白・スマートフォンの調整
   ============================================================ */

/* ============================================================
   1. 追加のトークン
   ============================================================ */
:root {
  /* 白 → ごく薄いアイボリー → 白 → チャコール の「ごく薄い」の色。
     地の色（#F7F6F2）との差はわずかです。強くすると品が落ちます。 */
  --c-tint: #F0EEE7;

  /* 見出しをもう一段はっきりさせる（19→28px を 20→32px へ） */
  --fs-sectitle: clamp(1.25rem, 1.05rem + 1.05vw, 2rem);

  --flow-gap: clamp(24px, 3vw, 48px);
}

.section-tint { background: var(--c-tint); }

/* 地の色が変わらないまま話題が変わる場所にだけ罫線を残す */
#services { border-top: 0; }
#projects { border-top: 1px solid var(--c-rule); }
#insights { padding-block: var(--gap-md); }

/* 薄いアイボリーの上では、入力欄などの補助背景を一段濃くする */
.section-tint .faq-item summary { background: transparent; }

/* ============================================================
   2. ファーストビュー
   ------------------------------------------------------------
   パソコン：左に Mission・説明文／右にキービジュアル。
   スマートフォン：Mission → 画像 → 説明文 の順に並べ替えます。
   （.hero-copy を display:contents にして、中の要素を直接並べています）
   ============================================================ */
.hero {
  min-height: min(76svh, 720px);
  padding-top: calc(var(--h-head) + clamp(24px, 4vh, 48px));
  padding-bottom: clamp(48px, 7vh, 96px);
}
.hero .wrap { max-width: 1400px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
}
.hero-visual { margin: 0; }

/* Mission は左半分に収まる大きさに。小さくしすぎず、3行のまま保ちます。 */
.hero-mission {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.375rem);
  line-height: 1.55;
}
.hero-statement { margin-top: clamp(28px, 3.2vw, 44px); max-width: 34em; }
.hero-scroll { margin-top: clamp(28px, 4vh, 44px); }

/* --- 最初の画面に置く「ご依頼いただけること」の一覧 ---
   文章ではなく単語を並べる場所です。銀の細い罫線で本文と切り分け、
   世界観を壊さない程度の小ささに保っています。 */
.hero-offer {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--c-rule);
  max-width: 36em;
}
.hero-offer-label {
  font-size: .75rem; letter-spacing: .14em; color: var(--c-sub);
}
.hero-offer-list {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-top: 12px;
}
.hero-offer-list li {
  font-family: var(--f-mincho);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.9;
}
/* 区切りは「前」ではなく「後ろ」に付けます。前に付けると、折り返した
   2行目の先頭が「／」から始まってしまうためです。 */
.hero-offer-list li:not(:last-child)::after {
  content: "／"; margin: 0 .5em; color: var(--c-silver);
}

@media (max-width: 720px) {
  /* スマートフォンは横に並べると3回も行末が「／」で終わってしまうため、
     区切り記号をやめて縦1列にします。文字は小さくしません。 */
  .hero-offer-list { display: block; margin-top: 14px; }
  .hero-offer-list li {
    position: relative; padding-left: 18px;
    font-size: 1rem; line-height: 1.5; margin-top: 10px;
  }
  .hero-offer-list li::before {
    content: ""; position: absolute; left: 0; top: .68em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--c-silver);
  }
  .hero-offer-list li:not(:last-child)::after { content: none; }
}

.hero-visual img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid rgba(36, 36, 36, .07);
}

@media (min-width: 901px) {
  /* 画面幅ではなく「左の列に収まるか」で上限を決めています。1行14文字が基準。 */
  .hero-mission { font-size: clamp(1.75rem, 3vw, 2.6875rem); }
}

/* スマートフォンは Mission → 画像 → 説明文 の順。
   .hero-copy を display:contents にして、中の要素を直接並べ替えます。 */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--h-head) + 28px);
    padding-bottom: clamp(56px, 8vh, 88px);
  }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { display: contents; }
  .hero-eyebrow  { order: 1; }
  .hero-mission  { order: 2; }
  /* スマートフォンだけ、一覧を画像より前に出します。
     画面の高さが足りず、下に置くと最初の画面に入らないためです
     （「何をお願いできるのか」を1画面目で見せることを優先）。
     画像は説明文より前、という並びは変えていません。 */
  .hero-offer    { order: 3; margin-top: clamp(26px, 5vw, 34px); }
  .hero-visual   { order: 4; margin-top: clamp(28px, 5vw, 40px); }
  .hero-statement{ order: 5; margin-top: clamp(28px, 5vw, 36px); }
  .hero-scroll   { order: 6; }
  .hero-visual img { aspect-ratio: 3 / 2; }
}
@media (max-width: 420px) {
  /* site.css の 24px 指定を上書き。小さくしすぎないための下限です。 */
  .hero-mission { font-size: 1.75rem; }
}

/* ============================================================
   3. 01 私たちが向き合うこと
   ============================================================ */
.issue-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.issue-photo { margin: 0; }
.issue-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 58%;
}
@media (max-width: 900px) {
  .issue-body { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 44px); }
  .issue-photo img { aspect-ratio: 16 / 10; object-position: 40% 55%; }
}

/* ============================================================
   4. 03 価値を見つける／整える／伝える
   ------------------------------------------------------------
   画像は使いません。大きな数字・細い罫線・矢印・余白だけで組みます。
   下に並ぶサービス名は「商品一覧」ではなく、その工程で使う手段です。
   ============================================================ */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 5行を親側で持ち、各列が同じ行を共有します（subgrid）。
     これで「この工程で使う手段」の位置が3列でぴたりと揃います。 */
  grid-template-rows: auto auto 1fr auto auto;
  gap: 0 var(--flow-gap);        /* 行の間隔は各要素の margin で作ります */
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--c-rule);
}
.flow-step {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding-top: clamp(28px, 3.2vw, 44px);
}
/* 列と列のあいだの細い縦線と、右向きの小さな矢印 */
.flow-step + .flow-step::before {
  content: ""; position: absolute;
  left: calc(var(--flow-gap) / -2); top: clamp(28px, 3.2vw, 44px);
  width: 1px; height: 56px; background: var(--c-rule);
}
.flow-step + .flow-step::after {
  content: ""; position: absolute;
  left: calc(var(--flow-gap) / -2 - 4px); top: -4px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--c-silver);
  border-right: 1px solid var(--c-silver);
  transform: rotate(45deg);
}
.flow-num {
  font-family: var(--f-en); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1; letter-spacing: .03em;
  color: var(--c-silver);
}
.flow-title {
  margin-top: clamp(18px, 2vw, 26px);
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.6;
}
.flow-body { margin-top: 16px; line-height: 1.95; }
.flow-means {
  margin-top: clamp(22px, 2.4vw, 30px);
  padding-top: 16px; border-top: 1px solid var(--c-rule);
}
.flow-means dt {
  font-size: .75rem; letter-spacing: .12em; color: var(--c-sub); margin-bottom: 10px;
}
.flow-means dd {
  font-family: var(--f-mincho);
  font-size: var(--fs-small); line-height: 2.1;
}
.flow-note {
  margin-top: 18px;
  font-size: .875rem; line-height: 1.9; color: var(--c-sub);
}

/* 流れの終点 */
.flow-closing {
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--c-rule);
}
.flow-closing .statement,
/* 06 Partners の締め。役割は「締め」なのに主役サイズ(52px)で出ていて、
   二列のリストの直後に新しいセクションが始まったように見えていた（2026-09-03）。
   03 What We Do の締めと同じ大きさに揃える。#about の .closing に .statement は無いので影響しない */
.closing .statement {
  font-size: clamp(1.25rem, .9rem + 1.7vw, 2.125rem);
  max-width: 20em;
}
.flow-closing .read { margin-top: clamp(24px, 3vw, 32px); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .flow-step { display: block; grid-row: auto; padding-bottom: clamp(32px, 5vw, 44px); }
  .flow-step + .flow-step { border-top: 1px solid var(--c-rule); }
  /* 縦並びのときは、矢印を下向きにして左端へ置く */
  .flow-step + .flow-step::before { display: none; }
  .flow-step + .flow-step::after {
    left: 0; top: -4px;
    transform: rotate(135deg);
  }
}

/* ============================================================
   5. 04 私たちの取り組み（実物を大きく見せる）
   ============================================================ */
.project-mark {
  width: 26px; height: 26px; flex: none;
  align-self: center; opacity: .85;
}
.project-title { font-size: clamp(1.1875rem, 1rem + 1vw, 1.75rem); }

/* --- 実物を並べる共通の額（縦横比をそろえて museum のように見せる） --- */
.artifacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 52px);
}
.artifact { margin: 0; }
.artifact-media {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  padding: clamp(10px, 1.4vw, 18px);
  background: #FFFFFF;
  border: 1px solid var(--c-rule);
}
.artifact-media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.artifact figcaption,
.spread figcaption {
  margin-top: 14px;
  font-size: .8125rem; line-height: 1.85; color: var(--c-sub);
}
.artifact-label {
  display: block; margin-bottom: 4px;
  font-size: .75rem; letter-spacing: .1em; color: var(--c-text);
}
/* 関係を示す短いラベル（画像の高さの中央に置く） */
.artifact-rel {
  align-self: center;
  margin-top: -2.6em;              /* figcaption の分だけ上へ戻して額の中央に合わせる */
  font-size: .75rem; letter-spacing: .08em; color: var(--c-sub);
  white-space: nowrap; text-align: center;
}
.artifact-rel::after {
  content: "→"; display: block; margin-top: 6px; color: var(--c-silver);
}

@media (max-width: 900px) {
  .artifacts { grid-template-columns: 1fr; gap: clamp(8px, 2vw, 16px); }
  .artifact-media { aspect-ratio: 3 / 4; }
  .artifact-rel {
    margin: 6px 0 2px; text-align: left;
  }
  .artifact-rel::after { content: "↓"; display: inline-block; margin: 0 0 0 8px; }
}

/* --- Kindle の誌面2点 --- */
.spreads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  max-width: 720px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.spread { margin: 0; }
.spread .artifact-media { aspect-ratio: 5 / 8; }

@media (max-width: 520px) {
  .spreads { grid-template-columns: 1fr; max-width: 340px; }
  .spread .artifact-media { aspect-ratio: 5 / 8; }
}

/* 「架空の事例は作らない」の一言（2026-09-04追加）。
   4本目のnote記事で公に約束した一文を、FAQの中だけでなくここにも出す。
   .price-note と同じ余白の付け方に揃えている（新しい間隔のルールは増やしていない）。 */
.project-note { margin-top: clamp(28px, 3.5vw, 40px); max-width: 46em; }

/* ============================================================
   6. 05 私たちの仕事の約束（誌面のような組み）
   ============================================================ */
#promise .promise {
  grid-template-columns: clamp(70px, 9vw, 148px) minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 40px);
  align-items: start;
  padding-block: clamp(34px, 4.2vw, 58px);
}
#promise .promise-num {
  font-family: var(--f-en); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: .95; letter-spacing: .02em;
  color: rgba(167, 169, 172, .62);
  padding-top: .06em;
}
#promise .promise-title {
  font-size: clamp(1.1875rem, 1rem + .9vw, 1.75rem);
  line-height: 1.55;
}
#promise .promise-body { margin-top: 18px; }
#promise .sec-lead { max-width: 42em; }

@media (max-width: 720px) {
  #promise .promise { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  #promise .promise-num { font-size: 1.875rem; }
}

/* ============================================================
   7. 08 代表からのメッセージ
   ------------------------------------------------------------
   写真が入るまでは1段組。index.html のコメントを外して
   assets/images/portrait.jpg を置くと、自動で「写真4割／文章6割」になります。
   （:has() に対応していない古いブラウザでは1段組のままです）
   ============================================================ */
.message-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.message-grid:has(.portrait) {
  grid-template-columns: minmax(0, .66fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 4; object-fit: cover;
}
@media (max-width: 900px) {
  .message-grid:has(.portrait) { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
}

/* ============================================================
   8. 09 Insights（note）
   ------------------------------------------------------------
   カードは1枚でも2枚でも3枚でも成立します（1枚の最大幅を決めているため、
   1枚だけのときに間延びしません）。
   ============================================================ */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 460px));
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
.post { margin: 0; }
.post-link { display: block; }
.post-media { overflow: hidden; border: 1px solid var(--c-rule); }
.post-media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .6s var(--ease);
}
.post-link:hover .post-media img { transform: scale(1.03); }
.post-link:hover .post-media { box-shadow: 0 8px 26px rgba(36, 36, 36, .07); }
.post-body { padding-top: clamp(18px, 2vw, 24px); }
.post-date {
  font-family: var(--f-en); font-size: .75rem;
  letter-spacing: .1em; color: var(--c-sub);
}
.post-title {
  margin-top: 12px;
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3s); line-height: 1.65;
}
.post-desc { margin-top: 14px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-sub); }
.post-more { margin-top: 18px; font-size: var(--fs-small); letter-spacing: .04em; }
.post-more::after {
  content: "→"; display: inline-block; margin-left: 10px;
  transition: transform .35s var(--ease);
}
.post-link:hover .post-more::after { transform: translateX(4px); }
.posts-more { margin-top: clamp(32px, 4vw, 44px); }

/* ============================================================
   9. 10 仕事の進め方（タイムライン）
   ============================================================ */
.process-band { margin: clamp(32px, 4vw, 48px) 0 0; }
.process-band img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 24 / 7; object-fit: cover; object-position: 50% 46%;
}

.timeline {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--c-rule);
}
/* 全体をつなぐ細い縦線 */
.timeline::before {
  content: ""; position: absolute;
  left: 4px; top: 0; bottom: 0; width: 1px;
  background: rgba(167, 169, 172, .6);
}
.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(20px, 2.4vw, 30px) 28px;
  border-bottom: 1px solid var(--c-rule);
}
.tl-step::before {                      /* 縦線の上に置く小さな点 */
  content: ""; position: absolute;
  left: 1px; top: calc(clamp(20px, 2.4vw, 30px) + .55em);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-silver);
}
.tl-num {
  font-family: var(--f-en); font-size: var(--fs-label);
  letter-spacing: .14em; color: var(--c-sub);
}
.tl-title {
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3s); line-height: 1.6;
}
.tl-body { font-size: var(--fs-small); line-height: 1.95; color: var(--c-sub); }

@media (max-width: 900px) {
  .tl-step {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 14px;
    padding-left: 24px;
  }
  .tl-body { grid-column: 2; margin-top: 8px; }
}

/* ============================================================
   10. 料金・FAQ・ご一緒したい方の読みやすさ
   ============================================================ */
.price-item { padding-block: clamp(28px, 3.4vw, 38px); }
.price-name { font-family: var(--f-mincho); font-size: var(--fs-h3s); line-height: 1.6; }
.price-amount { font-size: var(--fs-body); color: var(--c-text); }
.price-desc { margin-top: 4px; line-height: 1.95; }

/* 20件を5つのまとまりに区切る小見出し（読みやすさのためのラベル） */
.faq-cat {
  margin-top: clamp(36px, 4vw, 52px);
  padding-bottom: 12px;
  font-size: .8125rem; letter-spacing: .12em; color: var(--c-sub);
}
.faq-list > .faq-cat:first-child { margin-top: clamp(18px, 2vw, 24px); }
.faq-item summary { gap: 18px; }
.faq-answer { line-height: 2.0; }

.audience h3 { font-size: var(--fs-h3s); padding-bottom: 18px; }
.audience .dot-list li { margin-top: 16px; line-height: 1.9; }

/* ============================================================
   11. 余白と文字（スマートフォン）
   ------------------------------------------------------------
   「余白が大きい＝高級感」ではありません。内容が少ない場所で
   空白が続かないよう、スマートフォンでは一段詰めています。
   文字は小さくしません（むしろ補助文字を1px上げています）。
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --gap-lg: clamp(92px, 11vh, 128px);
    --gap-md: clamp(72px, 9vh, 100px);
    --gap-sm: clamp(48px, 6vh, 68px);
    --gap-head: clamp(28px, 6vw, 40px);
    --fs-small: 1rem;                 /* 15px → 16px。読みにくさを作らない */
  }
  .sec-title { margin-top: 16px; }
  .sec-lead  { margin-top: 20px; }
  .statement { line-height: 1.7; }
  .closing { margin-top: clamp(48px, 9vw, 64px); padding-top: clamp(32px, 6vw, 40px); }
  #about .closing { margin-top: clamp(64px, 12vw, 88px); }
  #about .capability-title { margin-top: clamp(56px, 10vw, 72px) !important; }
  .project { padding-block: clamp(40px, 8vw, 56px); }
  .project-covers, .spreads, .artifacts { margin-top: clamp(24px, 5vw, 32px); }
  .price-note { margin-top: clamp(28px, 5vw, 36px); }
  .foot-bottom { margin-top: clamp(36px, 7vw, 48px); }
  .process-band img { aspect-ratio: 16 / 7; }
  .flow-closing { margin-top: clamp(48px, 9vw, 64px); }
}

/* 小さすぎる文字と、押しにくいリンクをなくす */
.hero-scroll { font-size: .75rem; }
@media (max-width: 720px) {
  .foot-nav { gap: 4px 28px; }
  .foot-nav a, .foot-legal a { display: inline-block; padding-block: 8px; }
  .foot-legal { gap: 8px 20px; }
}

/* 極端に狭い画面でも、横に飛び出さない */
@media (max-width: 380px) {
  .tl-step { grid-template-columns: 42px minmax(0, 1fr); padding-left: 22px; }
  .artifact-media { padding: 8px; }
}


/* ============================================================
   14. 順番に現れる（stagger）  ※2026-08-14 追加
   ------------------------------------------------------------
   並んでいる要素が一斉に出るのをやめ、少しずつ時間をずらして
   出します。読む順番を示すためのもので、装飾ではありません。

   ▼ 強さを変えるのは、すぐ下の2つの数字だけです。
       ① 控えめ      … --stg-step: .08s / --stg-shift: 14px
       ② 中間（現在） … --stg-step: .10s / --stg-shift: 18px
       ③ やや強め    … --stg-step: .12s / --stg-shift: 22px
   ▼ 元に戻したいときは、この「14.」の見出しから下を丸ごと
     削除してください。それだけで動きなしに戻ります。
   ▼ 「動きを減らす」設定の端末では自動的に無効になります。
   ============================================================ */
:root {
  --stg-step: .10s;    /* 1項目あたり、後ろへずらす時間 */
  --stg-shift: 18px;   /* 現れるときに動く距離 */
}

@media (prefers-reduced-motion: no-preference) {

  /* 枠そのものは動かさない。動くのは中の項目だけにする
     （枠と項目が二重に薄れると、にごって見えるため） */
  .flow.reveal,
  .promise-list.reveal,
  .timeline.reveal,
  .posts.reveal,
  .price-list.reveal { opacity: 1; transform: none; }

  .flow.reveal .flow-step,
  .promise-list.reveal .promise,
  .timeline.reveal .tl-step,
  .posts.reveal .post,
  .price-list.reveal .price-item {
    opacity: 0;
    transform: translateY(var(--stg-shift));
  }

  .flow.reveal.is-in .flow-step,
  .promise-list.reveal.is-in .promise,
  .timeline.reveal.is-in .tl-step,
  .posts.reveal.is-in .post,
  .price-list.reveal.is-in .price-item {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }

  /* 1つあたり --stg-step ずつ後ろへ。5つ目以降は同じ（待たせすぎない） */
  .flow.reveal.is-in .flow-step:nth-child(1),
  .promise-list.reveal.is-in .promise:nth-child(1),
  .timeline.reveal.is-in .tl-step:nth-child(1),
  .posts.reveal.is-in .post:nth-child(1),
  .price-list.reveal.is-in .price-item:nth-child(1) { transition-delay: 0s; }

  .flow.reveal.is-in .flow-step:nth-child(2),
  .promise-list.reveal.is-in .promise:nth-child(2),
  .timeline.reveal.is-in .tl-step:nth-child(2),
  .posts.reveal.is-in .post:nth-child(2),
  .price-list.reveal.is-in .price-item:nth-child(2) { transition-delay: var(--stg-step); }

  .flow.reveal.is-in .flow-step:nth-child(3),
  .promise-list.reveal.is-in .promise:nth-child(3),
  .timeline.reveal.is-in .tl-step:nth-child(3),
  .posts.reveal.is-in .post:nth-child(3),
  .price-list.reveal.is-in .price-item:nth-child(3) { transition-delay: calc(var(--stg-step) * 2); }

  .promise-list.reveal.is-in .promise:nth-child(4),
  .timeline.reveal.is-in .tl-step:nth-child(4),
  .price-list.reveal.is-in .price-item:nth-child(4) { transition-delay: calc(var(--stg-step) * 3); }

  .promise-list.reveal.is-in .promise:nth-child(n+5),
  .timeline.reveal.is-in .tl-step:nth-child(n+5),
  .price-list.reveal.is-in .price-item:nth-child(n+5) { transition-delay: calc(var(--stg-step) * 4); }
}

/* 安全策：JavaScriptが動かない環境では、ずらさずに必ず表示する
   （文章が読めない状態を絶対に作らないため） */
.no-js .flow .flow-step,
.no-js .promise-list .promise,
.no-js .timeline .tl-step,
.no-js .posts .post,
.no-js .price-list .price-item {
  opacity: 1;
  transform: none;
}


/* ============================================================
   15. 読む文章のかたまりは動かさない  ※2026-08-14 追加
   ------------------------------------------------------------
   動くのは「見出し」「写真」「並んだ項目」だけにします。
   本文・注記・FAQ・お問い合わせフォームは、最初から表示します。
   読む対象を待たせないためです。

   ▼ 対象は index.html 側で class="… still" と書いてある要素です。
     動かしたくない場所が増えたら、その要素に still を足すだけです。
   ▼ 元に戻すときは、この「15.」を削除し、index.html の
     " still" を削除してください。
   ============================================================ */
.reveal.still {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============================================================
   16. ファーストビューから「制作費の目安」への入口
   ------------------------------------------------------------
   ▼ 経緯：もとは「ご依頼いただけること」の7項目それぞれを
     料金表の該当行へのリンクにしていました。2026-08-26 に外しています。
     7つの飛び先はすべて同じ料金セクションの中にあり、
     パソコンではほぼ1画面に収まるため、押し分ける意味がありませんでした。
     下線が7本並んで最初の画面がうるさくなるだけ、という判断です。
   ▼ いまは .hero-offer-note の1本だけが料金へのリンクです。
     「CTAはご相談の1つだけ」という決めごとは変えていません。
     こちらは押しどころではなく、料金表への案内という位置づけです。
   ▼ 料金表側の id（#price-vct など）は、他から参照できるよう残しています。
   ============================================================ */

/* 料金への近道であることを示す1行（ファーストビュー） */
.hero-offer-note {
  margin-top: 16px;
  font-size: .8125rem;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--c-sub);
}

.hero-offer-note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--c-silver);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}

.hero-offer-note a:hover,
.hero-offer-note a:focus-visible {
  border-bottom-color: currentColor;
}

/* ⚠ この1行は、スマートフォンのときだけ出します（2026-08-26）。
   ▼ なぜ：パソコンではヘッダーに「制作費の目安」が常に見えているため、
     ここに出すと同じ行き先が2つ並びます。
     720px以下ではヘッダーのナビがハンバーガーの中に隠れ（.site-nav が
     全画面オーバーレイになる指定）、最初の画面に残るリンクは「ご相談」だけ。
     そのため、スマートフォンでは**ここが料金への唯一の入口**になります。
   ⛔ 区切りの 720px は、ナビがハンバーガーに切り替わる幅と必ず揃えること。
     片方だけ変えると、料金への入口が1つも無い幅ができます。 */
@media (min-width: 721px) {
  .hero-offer-note { display: none; }
}

/* QW-2 最初の画面に置く「無料」の一行 */
.hero-offer-free {
  margin-top: 8px;
  font-size: .8125rem;
  letter-spacing: .04em;
  line-height: 1.8;
  color: var(--c-sub);
}

/* ============================================================
   17. 代表からのメッセージを、他のセクションと同列に見せない
   ------------------------------------------------------------
   ▼ なぜ：濃い色の背景は About・仕事の約束・お問い合わせにも
     使われているため、背景だけでは代表挨拶が事業説明と横並びに
     見えてしまう、という指摘を受けての対応です。
   ▼ やっていること … ①前後の余白を広げて章の変わり目をつくる
     ②本文を少し大きく・行間を広くして「読ませる」場にする
     ③署名を明朝にして手紙らしくする ④節番号を控えめにする
   ▼ 元に戻すときは、この「17.」を削除し、index.html の
     class から " section-message" を削除してください。
   ============================================================ */
.section-message {
  padding-top: calc(var(--gap-sec) * 1.25);
  padding-bottom: calc(var(--gap-sec) * 1.25);
}
/* 節番号（08 Message）は控えめに。主役は本文です */
.section-message .sec-num { opacity: .55; }

/* 本文を、他のセクションより一段ゆったり読ませる */
.section-message .message-body .read p {
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 2.1;
}
.section-message .message-body .read p + p { margin-top: 1.35em; }

/* 署名は手紙の差出人として扱う */
.section-message .message-sign {
  font-family: var(--f-mincho);
  font-size: 1rem;
  letter-spacing: .08em;
}
.section-message .message-sign::before { width: 56px; }

/* ============================================================
   18. ナビが5項目になった分、中くらいの画面で詰まらないようにする
   ------------------------------------------------------------
   ▼ なぜ：「制作費の目安」を足したことで項目が4→5になり、
     940〜1100px あたりでナビがロゴに接してしまいました（実測）。
     900px以下は下の「19.」でハンバーガーに変わるので、901〜1120pxの帯だけ
     文字と間隔を詰めます（900pxはサイト共通の切り替え幅に合わせています）。
     文字と間隔をわずかに詰めます。1121px以上は今までどおりです。
   ▼ 元に戻すときは、この「18.」を削除してください。
   ============================================================ */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-list { gap: clamp(9px, 1.2vw, 22px); }
  .nav-list a { font-size: .8125rem; letter-spacing: .01em; }
  .nav-cta { margin-left: 4px; padding: 9px 16px; }
}

/* ============================================================
   19. 900px以下はハンバーガーに切り替える（もとは720px以下）
   ------------------------------------------------------------
   ▼ なぜ：ナビ項目が5つになり、721〜900px の帯では横1列に収まらず
     ロゴと接してしまいました（実測。4項目のときも768pxで残り2pxと
     すでにギリギリでした）。文字をこれ以上小さくすると読みにくく
     なるため、すでに用意されているハンバーガーメニューの担当範囲を
     900pxまで広げます。中身と動きは既存のものをそのまま使います。
   ▼ site.css の「@media (max-width: 720px)」は書き換えていません。
     ここで同じ指定を 721〜900px にも適用しているだけです。
   ▼ 元に戻すときは、この「19.」を削除してください。
   ============================================================ */
@media (min-width: 721px) and (max-width: 900px) {
  .nav-toggle { display: block; margin-right: -10px; }
  .site-head .logo { position: relative; z-index: 95; }
  .site-nav {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center;
    background: var(--c-bg);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .nav-list {
    flex-direction: column; align-items: flex-start;
    gap: 28px; width: 100%;
    padding: 0 var(--pad-x);
  }
  .nav-list a { font-family: var(--f-mincho); font-size: 1.25rem; letter-spacing: .04em; }
  .nav-cta { margin-left: 0; padding: 12px 26px; font-size: .8125rem; }
  .body-lock { overflow: hidden; }
}

/* ============================================================
   20. お知らせ（What's New）  ※2026-08-19 追加
   ------------------------------------------------------------
   ファーストビューのすぐ下に置く、細い帯です。

   ・画像を使っていないのは、下の「8. 09 Insights」と役割を分けるためです。
     Insights＝読ませる場所／ここ＝「日付」を見せる場所。
     ここに画像を足すと、トップに読み物のかたまりが2つ並んで重くなります
   ・読む文章なので、動き（stagger）は付けていません
     （方針は「15. 読む文章のかたまりは動かさない」と同じです）
   ・日付を隠したくなったら、このブロックのいちばん下にある
     1行のコメントを外してください。HTMLには触らずに戻せます
   ============================================================ */
.news {
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--c-rule);
}
.news .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.news-label {
  font-family: var(--f-mincho);
  font-size: var(--fs-small);
  letter-spacing: .08em;
  white-space: nowrap;
  padding-top: 1px;
}
.news-list { list-style: none; margin: 0; padding: 0; }
.news-static { margin: 0; }
.news-item + .news-item { margin-top: 10px; }

/* .news-static は「リンク先のないお知らせ」用です。
   （このサイト自身のお知らせなど、飛ぶ先がないもの）
   .news-link と同じ並びにして、見た目が揃うようにしています */
.news-link,
.news-static {
  display: grid;
  /* 日付の列は幅を固定します。auto にすると日付の文字幅が行ごとにわずかに違い、
     文章の左端が数pxずれて、並びががたつきます（実測で4pxずれていました） */
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 22px);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.news-date {
  font-family: var(--f-en);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--c-sub);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;  /* 数字の幅を揃える */
}
.news-text {
  font-size: var(--fs-small);
  line-height: 1.8;
}
.news-link:hover .news-text,
.news-link:focus-visible .news-text {
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}

/* スマートフォン
   ・「お知らせ」の見出しだけを上に出し、日付と文章は横並びのまま残します
     （日付を上に積むと1件あたり1行増えて、帯が画面の3分の1を占めました）
   ・表示は最新1件だけにします。動いている証拠は
     「いちばん新しい日付」ひとつで足りるためです */
@media (max-width: 700px) {
  .news .wrap { grid-template-columns: 1fr; row-gap: 10px; }
  .news-link,
  .news-static { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 12px; }
  .news-item:nth-child(n+2) { display: none; }
}

/* ▼ 日付を隠したくなったら、次の1行のコメントを外してください。
      並び順も検索エンジン向けの情報も壊れません。戻すときは付け直すだけです。
.news-date { display: none; }
*/

/* ============================================================
   21. Insights の記事が1枚だけのときは、横長で見せる  ※2026-08-19 追加
   ------------------------------------------------------------
   ・「看板記事を1本だけ見せる」という意図が、見た目からも伝わるようにするためです
     （1枚のままだと、パソコンで右側に3分の2の空白ができていました）
   ・条件は「1枚しかないとき」に限定してあります。
     記事を2枚以上に戻せば、この指示は自動的に効かなくなり、元の並びに戻ります
   ・スマートフォン（900px以下）は、これまでどおり画像が上・文章が下です
   ============================================================ */
/* 段組みの指定そのものを1列に切り替えます。画面の幅を問わず適用します。
   これがないと、カードは460px（もとの1列ぶんの幅）までしか広がらず、
   右端に余白が残ります（パソコンで664px、タブレットで326px残っていました） */
.posts:has(.post:only-child) { grid-template-columns: minmax(0, 1fr); }
.post:only-child { grid-column: 1 / -1; }

@media (min-width: 901px) {
  .post:only-child .post-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 60px);
    align-items: center;
  }
  .post:only-child .post-body { padding-top: 0; }
}


/* ============================================================
   「時間の価値を上げる」— What We Do の補足ブロック（2026-08-28 追加）
   ・01〜03 のカードは .flow の grid に入っていますが、この帯は入れていません。
     伝えるための手段ではなく、毎日の仕事の負担を減らす支援だからです
   ・番号（.flow-num）を持たせないのは、4枚目のカードに見せないためです
   ・幅は本文カラム（--w-read）に合わせ、カードの3列とは形を変えています
   ============================================================ */
.svc-aside {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--c-rule);
}
/* 番号が入るはずの位置に置く小さなラベル（2026-08-30 追加）。
   見出しの書体・大きさが 01〜03 と同じで番号だけが無いと、
   初見の人には「番号の付け忘れた4枚目」に見えます。
   書式は .flow-means dt（「この工程で使う手段」）と同じにして、新しい見た目を増やしていません。
   ⛔ 消さない。消すと番号の付け忘れに戻ります */
.svc-aside-kicker {
  font-size: .75rem; letter-spacing: .12em; color: var(--c-sub);
  margin-bottom: 10px;
}
.svc-aside-title {
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.6;
}
.svc-aside .read { margin-top: clamp(16px, 2vw, 22px); }
.svc-aside .flow-means { max-width: var(--w-read); }

/* ============================================================
   16. 03「できること」の見出しの折り返し（2026-09-05 追加）
   見出しを「価値を◯◯」から具体的な文言に変えたところ、
   01 だけが 1440px で「伝わっていない理由を見つけ／る」と
   最後の1文字だけ次の行に落ちました。
   文言を短くして意味を削るのではなく、行の分け方で直しています。
   text-wrap: balance は各行の長さをそろえるので、
   「伝わっていない理由を／見つける」のように意味の切れ目で折り返します。
   ⚠ 対応していないブラウザでは、今までどおりの折り返しに戻るだけです（崩れません）。
============================================================ */
.flow-title { text-wrap: balance; }


/* ============================================================
   最上部の説明文（2026-09-08 齋藤さんの指示で差し替え）
   ・理念と同じ大見出しにしない。本文サイズのまま、1文目だけ濃くする
   ・PCでは1文目を1行に収める。スマホだけ「ホームページはあるのに、」で折る
   ・［診断・改善について相談する］は #contact へのテキストリンク。
     ⛔ ボタンにしない。「CTAはご相談の1つだけ」という決めごとは変えていない
   ============================================================ */
.hero-lead-1 { color: var(--c-text); font-weight: 600; }
/* ⛔ <br> を display:none で隠す方法は使わない。Chromeでは隠しても改行が残る（9-08 に実際に発生）。
   代わりに、2つの塊をそれぞれ「折り返さない」にする。
   幅が足りるPCでは1行、足りないスマホでは塊と塊の間だけで折れる。 */
.hero-lead-1 .nw { white-space: nowrap; }

.hero-consult { margin-top: clamp(14px, 1.6vw, 20px); font-size: .9375rem; }
.hero-consult a {
  color: var(--c-text); text-decoration: none;
  border-bottom: 1px solid var(--c-silver-d); padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.hero-consult a:hover, .hero-consult a:focus-visible { border-bottom-color: var(--c-text); }

/* ============================================================
   16. 取り組みを折りたたむ（よくあるご質問と同じ開閉の見た目）
   ============================================================ */
#projects .project { padding-block: 0; }
.project-fold > summary {
  display: flex; align-items: center; gap: 18px;
  padding-block: clamp(22px, 2.6vw, 30px);
  cursor: pointer; list-style: none;
}
.project-fold > summary::-webkit-details-marker { display: none; }
.project-fold > summary .project-head { flex: 1; min-width: 0; }
.project-fold > summary::after {                /* ＋ / − の記号（.faq-item と同じ） */
  content: ""; flex: none; align-self: center;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--c-silver-d), var(--c-silver-d)) center/100% 1px no-repeat,
    linear-gradient(var(--c-silver-d), var(--c-silver-d)) center/1px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.project-fold[open] > summary::after { transform: rotate(90deg); background-size: 100% 1px, 0 0; }
.project-fold > summary:hover .project-title { text-decoration: underline; text-underline-offset: .3em;
  text-decoration-thickness: 1px; text-decoration-color: var(--c-silver); }
.project-fold > summary:focus-visible { outline: 1px solid var(--c-text); outline-offset: 6px; }
.project-fold-body { padding-bottom: clamp(40px, 5vw, 64px); }
/* 開いた中身は待たせない（読む対象は最初から表示する、という決めごと） */
.project-fold .reveal { opacity: 1; transform: none; }

/* ============================================================
   17. 冒頭の「困りごと」と「何をするか」を、流し読みで拾える大きさに
   ------------------------------------------------------------
   大きい文字だけを上から追ったとき、理念 → 困りごと → 何をするか の順に
   目に入るようにする。本文と同じ大きさのままだと、置いてあっても拾われない。
   ============================================================ */
.hero-statement .hero-lead-1 {
  display: block;
  font-family: var(--f-mincho); font-weight: 500; color: var(--c-text);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);   /* 22 → 30px */
  line-height: 1.55; letter-spacing: .01em;
}
.hero-statement .hero-lead-2 {
  display: block; margin-top: .7em;
  font-family: var(--f-mincho); font-weight: 400; color: var(--c-text);
  font-size: clamp(1.375rem, 1.25rem + .35vw, 1.5rem);    /* 22 → 24px */
  line-height: 1.7;
}
.hero-statement > br { display: none; }
/* 17の続き：言葉の途中（「伝わ／り」「確／認。」）で折れないよう、まとまりごとに折り返す */
.hero-lead-2 .nw { white-space: nowrap; }

/* ============================================================
   18. 畳んだ行に「制作したもの」を出す
   ------------------------------------------------------------
   見出しだけでは、何を作った事例か分からない（04はお客様の商売の説明になる）。
   左に 見出し＋制作したもの／右端に ＋ の2列にする。
   ============================================================ */
.project-fold > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center;
}
.project-fold > summary .project-head { grid-column: 1; }
.project-fold > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.project-sum-made {
  grid-column: 1; display: block; margin-top: 12px;
  font-size: var(--fs-small); line-height: 1.85; color: var(--c-text);
}
.project-sum-label {
  display: inline-block; margin-right: 1.2em;
  font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-sub);
}
@media (max-width: 900px) {
  .project-sum-label { display: block; margin: 0 0 2px; }
}
/* 18の続き：＋は2行の真ん中ではなく、見出しの1行目の右端にそろえる（押す場所に見えるように） */
.project-fold > summary::after { grid-row: 1; align-self: start; margin-top: .95em; }

/* ============================================================
   19. 制作事例の見出しの折り返し（2026-09-10）
   見出しを「何の問題に、何をしたか」の形に長くしたら、スマホで
   「測／る」と1文字だけ落ちる・「ホームペー／ジ」と語の途中で切れる。
   文言は削らず、行の分け方で直す（16. の .flow-title と同じ考え方）。
   auto-phrase は対応していないブラウザでは無視されるだけ。
   ============================================================ */
.project-title {
  text-wrap: balance;
  word-break: auto-phrase;
}
/* 19の続き：「｜」や「を、」が行の頭に来ないよう、前の語と離さない（文言は変えていない） */
.project-title .nw { white-space: nowrap; }

/* ============================================================
   20. とても狭い画面（359px以下）では、改行させない指定を外す（2026-09-10）
   17. の .nw（語の途中で折り返さない）が、320px 幅ではヒーローを
   350px に押し広げ、ページが横にずれていた。360px 以上は今までどおり。
   ============================================================ */
@media (max-width: 359px) {
  .nw, .hero-lead-2 .nw { white-space: normal; }  /* 見出しの「｜」の固定（.project-title .nw）は短いので外さない */
}


/* ============================================================
   24. 手紙（DM）のQRから来た方への一言（2026-09-12 追加）
   ------------------------------------------------------------
   出るのは `?src=dm` のときだけ（HTML側は style="display:none" で、
   ページ下の script が外します）。⛔ 既定で表示させないこと。
   お問い合わせは暗い面なので、白い枠ではなく
   「左に細い線＋少し明るい背景」で、面から浮かせずに目立たせています。
   ============================================================ */
#dm-note {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  background: rgba(255, 255, 255, .05);
  border-left: 2px solid var(--c-silver);
}
.dm-note-title {
  font-family: var(--f-mincho); font-weight: 500;
  font-size: var(--fs-h3s); line-height: 1.6;
  color: var(--c-dark-text);
}
#dm-note .read { margin-top: 18px; max-width: 56em; }
#contact #dm-note .read p { color: var(--c-dark-sub); }
#dm-note .read > p + p { margin-top: 1.1em; }