/* 2026-09-25 荒川さん全体チェック: 改行・余白・揃えをスマホ／タブレット／PCで統一する。
   既存CSSの後に読み込み、ここだけで上書きする。 */

/* ===== 1. 改行: 日本語は文節で折り返す（assets/budoux-ja.js が <wbr> を挿入） ===== */
main .bx,
.site-footer .bx {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
main :is(h1, h2, h3, h4),
main summary {
  text-wrap: balance;
}
main :is(p, li, small, dd, figcaption) {
  text-wrap: pretty;
}
/* FAQの回答は両端揃えだと文節改行で字間が空くため左揃えにする。 */
.faq-list details p {
  text-align: left;
  text-align-last: auto;
}
/* 見出しの句は途中で割らない。 */
.credibility-heading .heading-phrase {
  display: inline-block;
}

/* ===== 2. セクション間の余白を全セクションで等間隔にする ===== */
:root { --section-space: 64px; }
@media (max-width: 768px) {
  :root { --section-space: 56px; }
}
main > .section,
main > section.section,
#service,
.comparison,
.operations-section,
.credibility-section,
#case,
.diagnosis-section,
.flow,
.plan-section,
.faq-section,
.final-cta {
  padding-block: var(--section-space) !important;
}
/* 区切り線はセクションの境目に1本だけ。 */
.final-cta { border-top: 0 !important; }
.faq-list > details:last-child { border-bottom: 1px solid var(--blue-tint-20); }

/* ===== 3. 最終CTA: 小見出しを他セクションと同じ書式に、見出しは中央揃え ===== */
.final-cta .cta-main h2 {
  text-align: center;
}
.final-cta .cta-main h2 + a {
  margin-top: 0;
}

/* ===== 4. WHY ENTREPRENEUR: 見出し下の余白を1行分に ===== */
@media (max-width: 768px) {
  .credibility-main { margin-top: 0 !important; }
  .credibility-visual { margin-top: 12px !important; }
}

/* ===== 5. タブレット（769〜1240px）: 横並びが詰まる部品を組み替える ===== */
@media (min-width: 769px) and (max-width: 1240px) {
  .operation-story,
  .operation-story.is-reversed { grid-template-columns: 1fr; }
  .operation-story.is-reversed .operation-story-copy { order: 1; }
  .operation-story.is-reversed .operation-visual { order: 2; }

  .credibility-role-grid ul { grid-template-columns: 1fr; gap: 8px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .plan-price > b { font-size: clamp(1.5rem, 3.4vw, 2.25rem); white-space: nowrap; }
}
/* 実績ブロックの下に余分な内側余白があり、次のセクションとの間だけ広かった。 */
.credibility-proof { padding-bottom: 0 !important; }

/* iPad横向き〜小さめPC: PC用の横並び（1101px以上）より優先して縦積みにする。 */
@media (min-width: 769px) and (max-width: 1240px) {
  .operation-story.operation-story-routine.is-reversed,
  .operation-story.operation-story-company-ai { grid-template-columns: 1fr; }
}
/* 1121〜1360px: 支援工程の3枚が細くなり「AIの仕組みを｜構築」と折れるため、左右の列を狭める。 */
@media (min-width: 1121px) and (max-width: 1360px) {
  .comparison-blueprint { grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 18px; }
  .comparison-support-board { padding-inline: 18px; }
  .comparison-support-board ol { gap: 24px; }
  .comparison-support-board li { padding-inline: 10px; }
  .comparison-support-board li + li::before { left: -22px; width: 20px; }
  .comparison-side { padding-inline: 20px; }
}
/* 箇条書き・注記・短い説明は行の長さを揃え、最後の行に1語だけ残さない。 */
main :is(li, small, dd, figcaption),
.proof-results p,
.practice-results p,
.routine-timeline small,
.plan-grid li {
  text-wrap: balance;
}

/* PC: 自社実践事例の文章欄が約210pxと狭く、28pxの見出しが語の途中で折れていたため広げる。 */
@media (min-width: 1241px) {
  .operation-story,
  .operation-story-company-ai { grid-template-columns: minmax(300px, .62fr) minmax(0, 1.9fr); }
  .operation-story.is-reversed,
  .operation-story.operation-story-routine.is-reversed { grid-template-columns: minmax(0, 1.9fr) minmax(300px, .62fr); }
}
/* 1121〜1360px: BEFORE/AFTERの見出しが列幅に収まるよう少し小さくする。 */
@media (min-width: 1121px) and (max-width: 1360px) {
  .comparison-side strong { font-size: 1.2rem; }
}
/* 幅360px以下: 課題写真のラベルが「繰り返され｜る」と折れるため文字を少し詰める。 */
@media (max-width: 360px) {
  /* 文字は13px（注釈の下限）を守り、余白と字間で収める。 */
  .issue-scene-pins > span { padding-inline: 2px; }
  .issue-scene-pins strong { font-size: var(--fs-note); letter-spacing: -.02em; }
}
/* 診断セクションは装飾の円がはみ出すため overflow:hidden だが、診断開始時のフォーカスで中身が横に16pxずれていた。
   clip はスクロールさせずに隠すので中央からずれない。 */
.diagnosis-section { overflow: clip; }

/* iPad縦（521〜900px）: BEFORE/AFTERのイラストに白いグラデーションが重なり薄く見えていたため、スマホと同じく画像だけを見せる。 */
@media (min-width: 521px) and (max-width: 900px) {
  .comparison-side {
    min-height: 380px;
    background-color: #fff;
    background-image: url("assets/workload-reduced-flow-v4.webp");
  }
  .comparison-side.is-before { background-position: left 4%; background-size: 150% auto; }
  .comparison-side.is-after { background-position: right 40%; background-size: 160% auto; }
}
/* 「AIでできること。」は1かたまりで折り返す。 */
.capability-heading h2 > span { display: inline-block; }

/* タブレット: メール自動化フローもスマホと同じ縦並びにする（横4列だと01・02が縦長になり中身が下に寄る）。 */
@media (min-width: 769px) and (max-width: 1240px) {
  .mail-operation-flow { grid-template-columns: 1fr; gap: 8px; }
  .mail-operation-flow > li { min-height: 88px; display: grid; grid-template-columns: 36px 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; justify-items: start; padding: 16px 15px; text-align: left; }
  .mail-operation-flow > li > span { position: static; grid-row: 1 / 3; align-self: center; }
  .mail-operation-flow > li > svg { grid-row: 1 / 3; width: 38px; height: 38px; }
  .mail-operation-flow > li > b { align-self: end; font-size: var(--fs-xs); }
  .mail-operation-flow > li > small { align-self: start; font-size: var(--fs-note); }
  .mail-operation-flow > li:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -13px; left: 50%; width: 16px; height: 18px; display: grid; place-items: center; background: var(--blue-tint-5); transform: translateX(-50%); }
  .mail-operation-flow > .is-processing { display: block; padding: 17px 14px; }
  .mail-operation-flow > .is-processing > span { display: block; margin-bottom: 4px; }
  .mail-operation-flow > .is-processing > b { min-height: 0; display: block; margin-bottom: 10px; }
  .mail-operation-flow .is-processing ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-operation-flow > .is-auto-complete > span { grid-row: 1 / 3; grid-column: 1; }
  .mail-operation-flow > .is-auto-complete > svg { grid-row: 1 / 3; grid-column: 2; }
  .mail-operation-flow > .is-auto-complete > b { width: 100%; min-width: 0; grid-row: 1; grid-column: 3; align-self: end; }
  .mail-operation-flow > .is-auto-complete > small { width: 100%; min-width: 0; grid-row: 2; grid-column: 3; align-self: start; }
}
@media (min-width: 769px) and (max-width: 1240px) {
  /* 説明文のない工程（メール受信・AIが判断）は文字を上下中央に。 */
  .mail-operation-flow > .is-compact > b { grid-row: 1 / 3; align-self: center; }
}

/* タブレット: 削減実績カードの注記の行数が違うと区切り線の高さがずれるため、注記欄を5行分で固定する。 */
@media (min-width: 769px) and (max-width: 1240px) {
  .proof-results-unified > article > p { min-height: 5lh; }
}

/* 2026-09-26 診断フォームから無料相談も申し込めるチェック。同意欄より目立たせ、押しやすい大きさにする。 */
.result-email-consult {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 1.25rem 0 .5rem;
  padding: 12px;
  border: 2px solid var(--color-blue);
  border-radius: 12px;
  background: var(--blue-tint-5);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}
.result-email-consult input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--color-blue); }
/* チェックと見出しを1行目、説明文を2行目に枠いっぱいで置く（狭い画面で説明文の列が細くならないように）。 */
.result-email-consult { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: 6px; }
.result-email-consult > span { display: contents; }
.result-email-consult input { grid-column: 1; grid-row: 1; margin-top: 0; }
.result-email-consult strong { grid-column: 2; grid-row: 1; white-space: nowrap; }
.result-email-consult small { grid-column: 1 / -1; grid-row: 2; }
.result-email-consult small { text-wrap: wrap; }
.result-email-consult small > .consult-line { display: inline-block; }
.result-email-consult strong { font-size: var(--fs-body); font-weight: 800; }
.result-email-consult small { color: var(--color-muted); font-size: var(--fs-xs); line-height: 1.6; }

/* 送信後のメッセージは1文ずつ行を分ける。 */
.result-email-status-line { display: block; }

/* 2026-09-30 荒川さん指摘：PCのファーストビューは、下の「人を増やしても、忙しさが消えない。」の写真（幅1158px）と同じ幅に収める。
   文字と写真の間が広く空きすぎないように、写真の右端をその写真の右端にそろえる。 */
@media (min-width: 1025px) {
  .hero-ai { --hero-frame: 1158px; }
  .hero-ai-inner { width: min(calc(100% - 64px), var(--hero-frame)); }
  .hero-ai-photo {
    right: max(32px, calc((100% - var(--hero-frame)) / 2));
    width: min(52vw, 720px);
    object-position: 92% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 11%, #000 30%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 11%, #000 30%, #000 93%, transparent 100%);
  }
}

/* 2026-09-30 荒川さん指摘：スマホの青い帯をPCの見出しと同じ光沢ブルーに統一する（以前は濃い青 #004bd2 の単色）。 */
@media (max-width: 768px) {
  .hero-ai::after {
    background: linear-gradient(180deg, var(--blue-tint-5) 0 100px, rgba(247, 251, 254, .6) 116px, transparent 150px, transparent 73%, var(--color-blue) 100%);
  }
  .hero-ai-conversion {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, transparent 40%), linear-gradient(170deg, var(--color-blue) 0%, #0a6fe6 55%, #0561dc 100%);
  }
}

/* 2026-10-01 荒川さん指摘：自社実践事例の図解の文字が、上の「仕事を減らす仕組みをつくる」より小さく見える。
   図解内を一段ずつ大きくし、上のブロック（見出し18px・説明14px）にそろえる。 */
.operation-visual .routine-monitor b,
.operation-visual .mail-operation-flow small,
.operation-visual .routine-timeline small,
.operation-visual .mail-auto-message small,
.operation-visual .mail-operation-flow > li > span,
.operation-visual .routine-timeline time { font-size: 14px; }
.operation-visual .ai-description-line,
.operation-visual .mail-auto-complete-copy,
.operation-visual .routine-timeline > li > b { font-size: 16px; }
.operation-visual .mail-operation-flow > li.is-processing > b,
.operation-visual .mail-auto-message b,
.operation-visual ul > li > b { font-size: 18px; }
.operation-visual .mail-operation-flow > li.is-compact > b { font-size: 15px; white-space: nowrap; letter-spacing: -.01em; }

/* 2026-10-01 「35」「30」の下端・右端が切れる：文字を塗るグラデーションの範囲（行の高さ .8）が字形より狭かった。
   内側に余白を足して塗る範囲を広げ、同じ分だけ外側を詰めて位置は変えない。 */
.operations-proofline strong b,
.company-ai-visual header em,
.credibility-proof strong > b {
  display: inline-block;
  padding: .12em .12em .16em .04em;
  margin: -.12em -.12em -.16em -.04em;
}

/* 2026-10-01 荒川さん決定：スマホのファーストビューはC（左そろえ）。青い帯をやめ、PCと同じ白地・濃紺の文字・青い見出し・黄色いボタンにする。
   写真の上下は白へぼかし、説明・ボタンは写真の下の白地に左そろえで置く（PCと同じ左そろえ・同じ配色）。 */
@media (max-width: 768px) {
  .hero-ai { background: #fff; }
  .hero-ai::after { background: linear-gradient(180deg, #fff 0 100px, rgba(255, 255, 255, .55) 118px, transparent 150px, transparent 70%, #fff 100%) !important; }
  .hero-ai-conversion { background: #fff !important; color: var(--color-ink); padding: 18px 22px 30px; }
  .hero-ai-lead { color: #28445e !important; font-size: clamp(15px, 4.3vw, 17px); font-weight: 800; line-height: 1.75; }
  .hero-ai-authority { margin: 0 0 18px !important; padding: 2px 0 2px 12px !important; border-left: 3px solid #ffb000 !important; color: #263c57 !important; font-size: clamp(13px, 3.7vw, 14px); line-height: 1.7; }
  .hero-ai-authority::before { display: none !important; }
  .hero-ai-note { color: #61768a !important; }
}

/* 2026-10-01 荒川さんのデザイン案：スマホのファーストビュー。説明の2行目「AIが実務で動く仕組み」を青のマーカーで強調し、
   補足は青い線＋要点だけ太字にして、文字が多く見えないようにする。 */
@media (max-width: 768px) {
  .hero-ai-lead { color: var(--color-ink) !important; font-size: clamp(15px, 4.9vw, 20px); font-weight: 900; line-height: 1.6; letter-spacing: -.01em; }
  .hero-lead-em {
    color: var(--color-blue);
    background: linear-gradient(transparent 70%, rgba(8, 127, 242, .18) 70%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hero-ai-authority { border-left-color: var(--color-blue) !important; padding: 2px 0 2px 14px !important; color: #3e5063 !important; font-weight: 500; font-size: clamp(13.5px, 3.9vw, 15px); line-height: 1.8; }
  .hero-auth-strong { color: var(--color-ink); font-weight: 800; }
}
/* 2026-10-01 荒川さん：補足を2行に（文字は小さくしない）。右の余白だけ詰め、左端は見出しとそろえたまま。
   幅375px未満の端末では、これまでどおり3行になる。 */
@media (max-width: 768px) {
  .hero-ai-conversion { padding-right: 12px !important; }
  .hero-ai-authority { letter-spacing: -.01em; }
}