/* サービス資料（画面＋印刷）
   - 768px以上: A4横の枚を縦に並べる。中身は --u（1枚の幅の1/297＝印刷時の1mm相当）で組み、幅に合わせて縮小する
   - 767px以下: 枚の高さを固定せず、縦に読める表示に組み替える
   - 印刷: A4横 1枚1ページ。ページ番号は CSS カウンターで自動（総数は出さない）
   動き（アニメーション）は付けない */

body { counter-reset: slide; background: var(--paper-2); }

/* ---------- 画面上部のバー（印刷しない） ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: calc(1123px + 48px); margin: 0 auto; padding: 16px 24px;
}
.toolbar .logo { font-size: 18px; }
.btn-print {
  font: 700 15px/1 var(--font-body); color: #fff; background: var(--ai);
  border: 0; border-radius: 4px; padding: 0 20px; min-height: 44px; cursor: pointer; white-space: nowrap;
}
.btn-print:hover, .btn-print:active { background: var(--ai-dark); }
:focus-visible { outline: 3px solid var(--ai); outline-offset: 2px; }

/* ---------- 1枚の器 ---------- */
.deck { padding: 0 24px 48px; }
.slide {
  counter-increment: slide;
  position: relative;
  width: 100%; max-width: 1123px; margin: 0 auto 24px;
  aspect-ratio: 297 / 210;
  background: var(--paper); border: 1px solid var(--line);
  container-type: inline-size;
  overflow: hidden;
  /* 文字の大きさ（pt → mm 換算: 1pt ≒ 0.353mm） */
  --u: calc(100cqw / 297);
  --fs-title: calc(var(--u) * 12.7);  /* 36pt */
  --fs-h2: calc(var(--u) * 8.47);     /* 24pt */
  --fs-lead: calc(var(--u) * 4.23);   /* 12pt */
  --fs-body: calc(var(--u) * 4.06);   /* 11.5pt */
  --fs-h3: calc(var(--u) * 4.94);     /* 14pt */
  --fs-note: calc(var(--u) * 3.7);    /* 10.5pt（注記のみ） */
  --fs-foot: calc(var(--u) * 2.82);   /* 8pt */
  --fs-price: calc(var(--u) * 7.76);  /* 22pt */
  --fs-num: calc(var(--u) * 7.06);    /* 20pt */
}
.slide[hidden] { display: none; } /* 実績なしのときは hidden を付けるだけ */

.slide-in {
  position: absolute; inset: 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 12);
  display: flex; flex-direction: column;
  font-size: var(--fs-body); line-height: 1.6;
}
.slide-head h2 {
  margin: 0; font: 700 calc(var(--fs-h2) * 1.25)/1.35 var(--font-head); color: var(--ink);
}
.slide-lead { margin: calc(var(--u) * 4) 0 0; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }
.slide-body { flex: 1; min-height: 0; margin-top: calc(var(--u) * 7); }
.slide-foot {
  display: flex; justify-content: space-between; gap: 1em;
  border-top: 1px solid var(--line); padding-top: calc(var(--u) * 2.5); margin-top: calc(var(--u) * 4);
  font-size: var(--fs-foot); color: var(--ink-2); line-height: 1.4;
}
.page-no::before { content: counter(slide); font-family: var(--font-num); }
.slide p, .slide ul, .slide ol, .slide dl, .slide h3 { margin: 0; }
.slide ul, .slide ol { padding: 0; list-style: none; }

.print-only { display: none !important; }
.slide a { color: var(--ai); }

/* ---------- 1 表紙 ---------- */
.cover .slide-in { padding: 0; flex-direction: row; }
.cover-main {
  flex: 3; display: flex; flex-direction: column;
  padding: calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 20);
}
/* 実際に作ったサイトの画面を、切らずに右へはみ出して並べる（傾けない・影なし） */
.cover-panel { flex: 2; background: var(--paper-2); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 6); padding-left: calc(var(--u) * 10); }
.cover-panel img { display: block; width: calc(var(--u) * 135); max-width: none; height: auto; border: 1px solid var(--line); }
.cover .logo { font-size: calc(var(--u) * 5.2); }
.cover-kicker { margin-top: calc(var(--u) * 22) !important; font-size: var(--fs-h3); color: var(--ai); font-weight: 700; }
.cover h1 { margin: calc(var(--u) * 4) 0 0; font: 700 var(--fs-title)/1.4 var(--font-head); color: var(--ink); }
.cover h1 .nb { display: inline-block; }
.cover-rule { width: calc(var(--u) * 40); height: 0; border: 0; border-top: calc(var(--u) * .7) solid var(--ai); margin: calc(var(--u) * 9) 0 calc(var(--u) * 7); }
.cover-points { display: flex; flex-wrap: wrap; row-gap: .4em; margin-top: calc(var(--u) * 10) !important; }
.cover-points li { padding: 0 calc(var(--u) * 6); border-left: 1px solid var(--line); font-size: var(--fs-lead); }
.cover-points li:first-child { padding-left: 0; border-left: 0; }
.cover-issue { margin-top: auto !important; font-size: var(--fs-note); color: var(--ink-2); display: flex; gap: 2em; }

/* ---------- 悩み: 症状を図で見せる（箱を並べない） ---------- */
.symptoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 9); }
.symptoms p { margin-top: calc(var(--u) * 4) !important; font-size: var(--fs-h3); line-height: 1.55; font-weight: 700; text-wrap: balance; }
.fig { height: calc(var(--u) * 62); background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.ph { width: calc(var(--u) * 30); height: calc(var(--u) * 54); border: calc(var(--u) * .9) solid var(--ink); border-radius: calc(var(--u) * 3); background: #fff; overflow: hidden; padding: calc(var(--u) * 2.5) 0 0 calc(var(--u) * 2); }
.ph-page { width: calc(var(--u) * 40); }
.ph-page i { display: block; height: calc(var(--u) * 1); background: var(--ink-2); margin-bottom: calc(var(--u) * 1.6); }
.ph-page i:first-child { height: calc(var(--u) * 11); background: var(--line); }
.ph-page i:last-child { width: 70%; }
.addr { width: 88%; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: calc(var(--u) * 2.2) calc(var(--u) * 4); font-size: var(--fs-note); line-height: 1.4; }
.addr b { display: block; color: var(--shu); }
.addr span { color: var(--ink-2); font-family: var(--font-num); font-size: .9em; }
.news { width: 86%; font-size: var(--fs-note); line-height: 1.5; color: var(--ink-2); background: #fff; padding: calc(var(--u) * 4); }
.news b { display: block; color: var(--ink); margin-bottom: .4em; }
.news span { display: block; border-top: 1px solid var(--line); padding: .35em 0; white-space: nowrap; font-size: .92em; }
.worries-more { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 9); margin-top: calc(var(--u) * 7) !important; border-top: 1px solid var(--ink); padding-top: calc(var(--u) * 4) !important; font-size: var(--fs-lead); font-weight: 700; }
.worries-sum { margin-top: calc(var(--u) * 4) !important; font-size: var(--fs-lead); color: var(--ink-2); }

/* ---------- できること: 左に一文、右に中身 ---------- */
.can-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: calc(var(--u) * 16); }
.can-lead .big { font: 700 calc(var(--u) * 8.4)/1.6 var(--font-head); color: var(--ink); }
.can-lead .sub { margin-top: calc(var(--u) * 8) !important; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.7; }
.can > div { padding: calc(var(--u) * 5.5) 0; border-top: 1px solid var(--line); }
.can > div:first-child { border-top: 1px solid var(--ink); }
.can dt { font: 700 var(--fs-h3)/1.5 var(--font-body); }
.can dd { margin: calc(var(--u) * 1.5) 0 0; color: var(--ink-2); }

/* ---------- 進め方: 細い7列をやめ、読める行にする ---------- */
.steps { border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: calc(var(--u) * 12) calc(var(--u) * 58) 1fr; align-items: baseline; padding: calc(var(--u) * 3.9) 0; border-bottom: 1px solid var(--line); }
.steps .sq { font: 700 var(--fs-h3)/1.4 var(--font-num); color: var(--ai); }
.steps h3 { font: 700 var(--fs-h3)/1.4 var(--font-body); }
.steps p { color: var(--ink-2); line-height: 1.5; }
.steps .optional .sq, .steps .optional h3 { color: var(--ink-2); }
.steps-note { margin-top: calc(var(--u) * 4) !important; color: var(--ink-2); }

/* ---------- 5 料金 ---------- */
.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; line-height: 1.45; }
.price-table col.c-item { width: 28%; }
.price-table col.c-plan { width: 24%; }
.price-table th, .price-table td { padding: calc(var(--u) * 1.5) calc(var(--u) * 3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.price-table thead th { font: 700 var(--fs-h3)/1.3 var(--font-head); border-bottom: 1px solid var(--ai); padding-top: calc(var(--u) * 2); }
.price-table tbody th { font-weight: 700; color: var(--ink); }
.price-table .std { background: var(--ai-tint); }
.price-table thead .std { border-top: calc(var(--u) * 1.06) solid var(--ai); position: relative; }
.mark-std {
  display: inline-block; margin-left: .6em; padding: .1em .5em; border: 1px solid var(--shu); color: var(--shu);
  font: 700 var(--fs-note)/1.3 var(--font-body); border-radius: 2px; vertical-align: middle;
}
.price-table .price td, .price-table .price th { padding-top: calc(var(--u) * 1.5); padding-bottom: calc(var(--u) * 1.5); }
.price-table .price td { font-size: var(--fs-price); font-family: var(--font-num); font-weight: 700; line-height: 1.2; }
.price-table .price td small { font-size: var(--fs-note); font-family: var(--font-body); font-weight: 400; }
.maint { margin-top: calc(var(--u) * 4); border: 1px solid var(--ink-2); padding: calc(var(--u) * 2.5) calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 6); align-items: baseline; }
.maint h3 { font-size: var(--fs-h3); white-space: nowrap; }
.maint h3 .num { font-size: var(--fs-h3); }
.maint ul { display: flex; flex-wrap: wrap; column-gap: 1.5em; }
.maint li::before { content: "・"; }
.maint .fine { font-size: var(--fs-note); color: var(--ink-2); }
.price-foot { margin-top: calc(var(--u) * 2.5) !important; font-size: var(--fs-note); color: var(--ink-2); }
.plans-sp { display: none; }
/* 料金の枚は行が多いため、余白と行間だけ詰めて1枚に収める（文字は小さくしない） */
#s-price .slide-body { margin-top: calc(var(--u) * 4.5); }
#s-price .price-table { line-height: 1.35; }
#s-price .price-table col.c-item { width: 31%; }
#s-price .price-table col.c-plan { width: 23%; }
#s-price .price-table tbody th, #s-price .price-table tbody td { padding-top: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1); }
#s-price .slide-lead { margin-top: calc(var(--u) * 2.5); }
#s-price .price-table thead th { padding-top: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2); }
#s-price .price-table .price th, #s-price .price-table .price td { padding-top: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .8); }
#s-price .maint ul { display: inline; }
#s-price .maint li { display: inline; margin-right: 1.2em; }
#s-price .maint .fine { display: inline; }
#s-price .slide-foot { margin-top: calc(var(--u) * 2); }
#s-price .maint { margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 5); }

/* ---------- 6 納期 ---------- */
.gantt { display: grid; grid-template-columns: calc(var(--u) * 24) repeat(6, 1fr) calc(var(--u) * 30); row-gap: calc(var(--u) * 5); align-items: center; }
.gantt .g-row { display: contents; }
.gantt .r1 > * { grid-row: 1; } .gantt .r2 > * { grid-row: 2; } .gantt .r3 > * { grid-row: 3; } .gantt .r4 > * { grid-row: 4; }
.gantt .plan { grid-column: 1; }
.gantt .wk { font-size: var(--fs-note); color: var(--ink-2); border-left: 1px solid var(--line); padding-left: .4em; font-family: var(--font-num); }
.gantt .plan { font: 700 var(--fs-h3)/1.3 var(--font-head); }
.gantt .bar { height: calc(var(--u) * 13); background: var(--ai); grid-column-start: 2; }
.gantt .len { padding-left: calc(var(--u) * 4); font-size: var(--fs-h3); font-weight: 700; }
.delay { margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 5); border-top: 1px solid var(--ink); font-size: var(--fs-lead); }
.delay p + p { margin-top: calc(var(--u) * 1.5); }

/* ---------- 7 FAQ ---------- */
.faq { columns: 2; column-gap: calc(var(--u) * 12); }
.faq .qa { break-inside: avoid; padding-bottom: calc(var(--u) * 4.5); }
.faq dt, .faq dd { display: flex; gap: .7em; margin: 0; }
.faq dt { font-weight: 700; }
.faq dd { margin-top: calc(var(--u) * 1.2); }
.faq .mk { flex: none; font-weight: 700; }
.faq dt .mk { color: var(--ai); }
.faq dd .mk { color: var(--ink-2); }

/* ---------- 8 制作者について ---------- */
.owner-text { font-size: var(--fs-h3); line-height: 1.8; }
.owner { display: grid; grid-template-columns: 2fr 3fr; gap: calc(var(--u) * 12); }
.owner-name p + p { margin-top: calc(var(--u) * 1.5); }
.owner-name .name { font: 700 calc(var(--u) * 12.7)/1.3 var(--font-head); }
.owner-name .brand { font-weight: 700; letter-spacing: .14em; color: var(--ai); font-size: var(--fs-lead); }
.owner-text p + p { margin-top: calc(var(--u) * 3); }
.biz { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 12); }
.biz th, .biz td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--u) * 2.2) calc(var(--u) * 4); text-align: left; }
.biz th { width: 30%; font-weight: 700; color: var(--ink-2); padding-left: 0; }
.biz td { padding-left: 0; }

/* ---------- 9 制作例 ---------- */
.works { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.work .shots { position: relative; padding-right: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 6); }
.work .shots img { display: block; border: 1px solid var(--line); height: auto; }
.work .shots .pc { width: 100%; }
/* スマホ画面はPC画面の右下に少し重ねる（傾けない・影なし） */
.work .shots .sp { position: absolute; right: 0; bottom: 0; width: 24%; background: var(--paper); }
.work h3 { margin-top: calc(var(--u) * 4) !important; font: 700 var(--fs-h3)/1.4 var(--font-head); }
.work .kind { margin-top: calc(var(--u) * 1) !important; color: var(--ink-2); }
.work .facts { margin-top: calc(var(--u) * 2.5) !important; padding-left: 1.2em; list-style: disc; }
.work .url { margin-top: calc(var(--u) * 2) !important; font-size: var(--fs-note); font-family: var(--font-num); word-break: break-all; }
.work .url a { color: var(--ai); }

/* ---------- 10 お問い合わせ ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.contact > div { padding: calc(var(--u) * 7); }
.contact .main { background: var(--ai); color: #fff; }
.contact .main .cond, .contact .main .url { color: #fff; }
.contact .main .btn-book { background: #fff; color: var(--ai); }
.contact .main .btn-book:hover, .contact .main .btn-book:active { background: var(--ai-tint); }
.contact .main .qr-box { background: #fff; padding: calc(var(--u) * 2); }
.contact .sub { border-top: 1px solid var(--ink); padding-left: 0 !important; }
.contact h3 { font: 700 var(--fs-h3)/1.4 var(--font-head); }
.contact .cond { margin-top: calc(var(--u) * 2) !important; color: var(--ink-2); }
.contact .url { margin-top: calc(var(--u) * 4) !important; font-family: var(--font-num); font-weight: 700; word-break: break-all; }
.btn-book {
  display: inline-flex; align-items: center; justify-content: center; margin-top: calc(var(--u) * 6);
  min-height: 48px; padding: 0 28px; background: var(--ai); color: #fff; text-decoration: none;
  font: 700 var(--fs-lead)/1 var(--font-body); border-radius: 4px; white-space: nowrap;
}
.btn-book:hover, .btn-book:active { background: var(--ai-dark); }
.qr-box {
  margin-top: calc(var(--u) * 5); width: calc(var(--u) * 30); height: calc(var(--u) * 30);
  border: 1px dashed var(--ink-2); display: grid; place-items: center; text-align: center;
  font-size: var(--fs-note); color: var(--ink-2); padding: 1em;
}
.qr-box:has(img) { border: 0; padding: 0; }
.qr-box img { width: 100%; height: 100%; }
.contact-biz { margin-top: calc(var(--u) * 8) !important; color: var(--ink-2); display: flex; flex-wrap: wrap; column-gap: 1.5em; }

/* ======================================================
   密度を上げる: 紺の面・写真・黄のアクセント（2026-11-06）
   白い枚を続けない。枚ごとに面の使い方を変える
   ====================================================== */
.slide-head h2 { position: relative; }

/* 表紙 */
.cover { background: var(--ai); }
.cover .slide-in { padding: 0; display: grid; grid-template-columns: 56% 44%; grid-template-rows: 1fr auto; }
.cover-main { padding: calc(var(--u) * 16) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 20); color: #fff; }
.cover .logo, .cover .logo-main { color: #fff; }
.cover .logo-sub { color: #fff; border-left-color: rgba(255,255,255,.5); }
.cover-kicker { color: var(--kin); margin-top: calc(var(--u) * 20) !important; }
.cover h1 { color: #fff; font-size: calc(var(--u) * 11.6); line-height: 1.5; }
.cover-issue { color: rgba(255,255,255,.75); }
.cover-panel { position: relative; background: none; padding: 0; display: block; overflow: hidden; }
.cover-panel img { position: absolute; border: calc(var(--u) * .5) solid #fff; width: auto; max-width: none; height: auto; }
.cover-panel .c-pc { top: calc(var(--u) * 13); left: calc(var(--u) * 2); width: calc(var(--u) * 122); }
.cover-panel .c-pc2 { top: calc(var(--u) * 92); left: calc(var(--u) * 22); width: calc(var(--u) * 122); }
.cover-panel .c-sp { display: none; }
.slide .cover-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 !important; background: var(--kin); color: var(--ink); padding: calc(var(--u) * 5) calc(var(--u) * 20); }
.cover-points li { border: 0 !important; padding: 0 !important; font-size: var(--fs-lead); font-weight: 700; display: flex; align-items: baseline; gap: .5em; }
.cover-points b { font: 700 calc(var(--u) * 10)/1.1 var(--font-num); }
.cover-points li:nth-child(2) b { font-family: var(--font-head); }

/* 悩み: 薄い地に白い札、下に紺の帯 */
#s-worry { background: var(--paper-2); }
#s-worry .slide-in { padding-bottom: 0; }
#s-worry .slide-body { display: flex; flex-direction: column; margin-top: calc(var(--u) * 5); }
.symptoms li { background: #fff; padding: calc(var(--u) * 4); border-top: calc(var(--u) * 1.2) solid var(--ai); }
.symptoms { gap: calc(var(--u) * 5); }
.fig { background: var(--ai-tint); height: calc(var(--u) * 48); }
.symptoms p { margin-top: calc(var(--u) * 3) !important; }
.worries-more { border-top: 0; margin-top: calc(var(--u) * 5) !important; padding-top: 0 !important; gap: calc(var(--u) * 5); }
.worries-more li { background: #fff; padding: calc(var(--u) * 3) calc(var(--u) * 4); border-left: calc(var(--u) * 1.2) solid var(--kin); }
.worries-sum { margin: auto calc(var(--u) * -20) 0 !important; background: var(--ai); color: #fff; padding: calc(var(--u) * 5) calc(var(--u) * 20); font-size: var(--fs-h3); font-weight: 700; }
#s-worry .slide-foot { display: none; }

/* 制作例: 紺の全面で実物を大きく */
#s-works { background: var(--ai); color: #fff; }
#s-works h2, #s-works h3 { color: #fff; }
#s-works .slide-foot { color: rgba(255,255,255,.7); border-top-color: rgba(255,255,255,.3); }
#s-works .kind { color: var(--kin); font-weight: 700; }
#s-works .url a { color: #fff; }
#s-works .work .shots img { border-color: #fff; }
#s-works .slide-body { margin-top: calc(var(--u) * 5); }
.works { gap: calc(var(--u) * 9); }

/* できること: 左に紺の柱 */
#s-can .slide-in::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 118); background: var(--ai); }
#s-can .slide-head, #s-can .slide-body, #s-can .slide-foot { position: relative; }
#s-can h2 { color: #fff; max-width: calc(var(--u) * 86); font-size: var(--fs-h2); }
.can-wrap { grid-template-columns: calc(var(--u) * 86) 1fr; gap: calc(var(--u) * 24); }
.can-lead .big { color: #fff; font-size: calc(var(--u) * 7.6); }
.can-lead .sub { color: var(--kin); font-weight: 700; }
#s-can .can-wrap { margin-top: calc(var(--u) * 8); }
#s-can .can { margin-top: calc(var(--u) * -27); }
.can { counter-reset: can; }
.can > div { counter-increment: can; position: relative; padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 18); margin-bottom: calc(var(--u) * 3); background: var(--paper-2); border: 0 !important; }
.can > div::before { content: counter(can); position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 6); width: calc(var(--u) * 10); height: calc(var(--u) * 10); display: grid; place-items: center; background: var(--ai); color: #fff; border-radius: 50%; font: 700 var(--fs-h3)/1 var(--font-num); }
#s-can .slide-foot span:first-child { color: rgba(255,255,255,.75); }

/* 進め方: 薄い地に白い行、番号を丸で */
#s-flow { background: var(--paper-2); }
#s-flow .slide-body { margin-top: calc(var(--u) * 5); }
.steps { border-top: 0; display: grid; gap: calc(var(--u) * 1.8); }
.steps li { background: #fff; border: 0; padding: calc(var(--u) * 3.3) calc(var(--u) * 5); align-items: center; }
.steps .sq { width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); display: grid; place-items: center; background: var(--ai); color: #fff; border-radius: 50%; font-size: var(--fs-body); }
.steps li:first-child { background: var(--kin); }
.steps li:first-child p { color: var(--ink); }
.steps .optional { background: none; outline: 1px dashed var(--ink-2); outline-offset: -1px; }
.steps .optional .sq { background: var(--ink-2); color: #fff; }
.steps-note { margin-top: calc(var(--u) * 3) !important; }
#s-flow .slide-foot { border-top-color: var(--line); margin-top: calc(var(--u) * 2); }

/* 料金: 見出し行を紺に、竹を強く */
#s-price .price-table thead th, #s-price .price-table thead td { background: var(--ai); color: #fff; border-bottom: 0; text-align: center; font-size: calc(var(--fs-h3) * 1.15); }
#s-price .price-table thead .std { background: var(--kin); color: var(--ink); border-top: 0; }
#s-price .mark-std { border-color: var(--ink); color: var(--ink); background: #fff; }
#s-price .price-table .std { background: #FFF6D9; }
#s-price .price-table .price td { color: var(--ai); text-align: center; }
#s-price .price-table tbody td { text-align: center; }
#s-price .price-table tbody tr:nth-child(even) th, #s-price .price-table tbody tr:nth-child(even) td:not(.std) { background: var(--paper-2); }
#s-price .maint { background: var(--ai); color: #fff; border: 0; }
#s-price .maint .fine { color: rgba(255,255,255,.8); }

/* 納期: 色の面に札 */
#s-term { background: var(--ai-tint); }
.gantt { background: #fff; padding: calc(var(--u) * 8) calc(var(--u) * 7); row-gap: calc(var(--u) * 8); }
.gantt .bar { height: calc(var(--u) * 16); }
.gantt .r3 .bar { background: var(--kin); }
.delay { background: var(--ai); color: #fff; border: 0; padding: calc(var(--u) * 6) calc(var(--u) * 8); margin-top: calc(var(--u) * 6); }
#s-term .slide-body { margin-top: calc(var(--u) * 5); }

/* FAQ: 薄い地に白い札 */
#s-faq { background: var(--paper-2); }
#s-faq .slide-body { margin-top: calc(var(--u) * 5); }
.faq { columns: 2; column-gap: calc(var(--u) * 5); font-size: calc(var(--fs-body) * .94); line-height: 1.5; }
.faq .qa { background: #fff; padding: calc(var(--u) * 4) calc(var(--u) * 5); margin-bottom: calc(var(--u) * 3.5); }
.faq .mk { width: 1.6em; height: 1.6em; display: inline-grid; place-items: center; border-radius: 50%; font-size: .85em; }
.faq dt .mk { background: var(--ai); color: #fff; }
.faq dd .mk { background: var(--kin); color: var(--ink); }

/* 制作者: 左に岩手の写真 */
#s-owner .slide-in::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 118); background: linear-gradient(rgba(21,42,69,.55), rgba(21,42,69,.75)), url(images/iwate.webp) center / cover; }
#s-owner .slide-head, #s-owner .slide-body, #s-owner .slide-foot { position: relative; }
#s-owner h2 { color: #fff; max-width: calc(var(--u) * 86); font-size: var(--fs-h2); }
.owner { grid-template-columns: calc(var(--u) * 86) 1fr; gap: calc(var(--u) * 24); }
.owner-name .name { color: #fff; }
.owner-name .brand { color: var(--kin); }
#s-owner .owner { margin-top: calc(var(--u) * 8); }
#s-owner .owner-text { margin-top: calc(var(--u) * -27); }
.biz { width: auto; margin: calc(var(--u) * 4) 0 0 calc(var(--u) * 110); }
.biz th { width: calc(var(--u) * 40); font-size: var(--fs-note); }
.biz td { font-size: var(--fs-note); }
#s-owner .slide-foot span:first-child { color: rgba(255,255,255,.8); }

/* お問い合わせ: 写真の全面に白い札 */
#s-contact { background: linear-gradient(rgba(21,42,69,.72), rgba(21,42,69,.82)), url(images/iwate.webp) center / cover; color: #fff; }
#s-contact h2 { color: #fff; }
#s-contact .slide-lead { color: #fff; }
#s-contact .contact .main { background: #fff; color: var(--ink); }
#s-contact .contact .main .cond, #s-contact .contact .main .url { color: var(--ink); }
#s-contact .contact .main .btn-book { background: var(--ai); color: #fff; }
#s-contact .contact .sub { background: var(--kin); color: var(--ink); border: 0; padding-left: calc(var(--u) * 7) !important; }
#s-contact .contact-biz { color: #fff; }
#s-contact .contact-biz a { color: #fff; }
#s-contact .slide-foot { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.3); }

/* ======================================================
   767px以下: 縦に読める表示
   ====================================================== */
@media screen and (max-width: 767px) {
  body { background: var(--paper); }
  .toolbar { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .toolbar .logo { font-size: 16px; }
  .btn-print { font-size: 14px; padding: 0 14px; }
  .deck { padding: 0; }
  .slide {
    aspect-ratio: auto; max-width: none; margin: 0; border: 0; border-bottom: 1px solid var(--line);
    container-type: normal; overflow: visible;
    --u: 2.4px;
    --fs-title: 28px; --fs-h2: 23px; --fs-lead: 16px; --fs-body: 16px; --fs-h3: 17px;
    --fs-note: 14px; --fs-foot: 12px; --fs-price: 26px; --fs-num: 20px;
  }
  .slide:nth-of-type(even) { background: var(--paper-2); }
  .slide-in { position: static; padding: 48px 20px; line-height: 1.8; }
  .slide-body { margin-top: 24px; }
  .slide-foot { display: none; }

  .cover .slide-in { padding: 0; }
  .cover-main { padding: 40px 20px 32px; }
  .cover-panel { flex: none; height: 240px; gap: 12px; padding: 20px 0 20px 20px; }
  .cover-panel img { width: 300px; }
  .cover .slide-in { flex-direction: column; }
  .cover h1 .nb { display: inline; }
  .cover .logo { font-size: 16px; }
  .cover-kicker { margin-top: 40px !important; }
  .cover-rule { width: 96px; border-top-width: 2px; margin: 24px 0; }
  .cover-points { flex-direction: column; gap: 8px; }
  .cover-points li { padding: 0 0 0 12px; border-left: 2px solid var(--line); }
  .cover-points li:first-child { padding-left: 12px; border-left: 2px solid var(--line); }
  .cover-issue { margin-top: 32px !important; flex-wrap: wrap; column-gap: 1.5em; row-gap: 4px; }

  .works { grid-template-columns: 1fr; gap: 40px; }
  .work .shots { padding-right: 24px; padding-bottom: 16px; }

  .symptoms { grid-template-columns: 1fr; gap: 28px; }
  .symptoms p { margin-top: 12px !important; font-size: 17px; }
  .fig { height: 170px; background: var(--paper); border: 1px solid var(--line); }
  .ph { width: 80px; height: 140px; border-width: 3px; border-radius: 10px; padding: 8px 0 0 6px; }
  .ph-page { width: 120px; }
  .ph-page i { height: 3px; margin-bottom: 5px; }
  .ph-page i:first-child { height: 34px; }
  .addr { font-size: 14px; padding: 8px 16px; }
  .news { font-size: 13px; padding: 8px 12px; }
  .worries-more { grid-template-columns: 1fr; gap: 12px; margin-top: 28px !important; padding-top: 16px !important; font-size: 16px; }
  .worries-sum { margin-top: 16px !important; font-size: 16px; }

  .can-wrap { grid-template-columns: 1fr; gap: 24px; }
  .can-lead .big { font-size: 21px; line-height: 1.6; }
  .can-lead .sub { margin-top: 12px !important; font-size: 16px; }
  .can > div { padding: 14px 0; }

  .steps li { grid-template-columns: 28px 1fr; padding: 14px 0; }
  .steps p { grid-column: 2; margin-top: 4px; }
  .steps-note { margin-top: 14px !important; }

  /* 料金: 表をやめ、プランごとのまとまり（梅→竹→松） */
  .price-table, .maint-pc { display: none; }
  .plans-sp { display: grid; gap: 20px; }
  .plans-sp article { background: var(--paper); border: 1px solid var(--line); padding: 20px 16px; }
  .plans-sp article.std { background: var(--ai-tint); border-top: 3px solid var(--ai); }
  .plans-sp h3 { font: 700 20px/1.3 var(--font-head); display: flex; align-items: center; }
  .plans-sp .p { margin-top: 8px !important; font-family: var(--font-num); font-weight: 700; font-size: 28px; line-height: 1.2; }
  .plans-sp .p small { font-family: var(--font-body); font-weight: 400; font-size: 14px; }
  .plans-sp dl { margin-top: 12px; }
  .plans-sp dt { font-size: 14px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; }
  .plans-sp dd { margin: 2px 0 0; font-weight: 700; }
  .plans-sp .maint-sp { background: var(--paper); border: 1px solid var(--ink-2); }
  .plans-sp .maint-sp ul { margin-top: 10px; }
  .plans-sp .maint-sp li::before { content: "・"; }
  .plans-sp .maint-sp .fine { margin-top: 8px !important; font-size: 14px; color: var(--ink-2); }
  .price-foot { margin-top: 16px !important; }

  .gantt { grid-template-columns: 28px repeat(6, 1fr) 64px; row-gap: 16px; }
  .gantt .wk { font-size: 12px; padding-left: 2px; }
  .gantt .len { padding-left: 6px; font-size: 15px; white-space: nowrap; }
  .gantt .bar { height: 22px; }
  .delay { margin-top: 28px; padding-top: 14px; font-size: 16px; }

  .faq { columns: 1; }
  .faq .qa { padding: 16px 0; border-top: 1px solid var(--line); }

  .owner { grid-template-columns: 1fr; gap: 20px; }
  .owner-name .name { font-size: 28px; }
  .owner-text { font-size: 16px; }
  .biz { margin-top: 28px; }
  .biz th, .biz td { display: block; width: 100%; border: 0; padding: 8px 12px; }
  .biz tr { display: block; border-top: 1px solid var(--line); }
  .biz tr:last-child { border-bottom: 1px solid var(--line); }

  .contact { grid-template-columns: 1fr; gap: 20px; }
  .contact > div { padding: 20px 16px; }
  .contact .sub { padding-left: 0 !important; }
  .btn-book { display: flex; width: 100%; min-height: 56px; font-size: 18px; margin-top: 16px; }
  .contact-biz { margin-top: 24px !important; flex-direction: column; }
}

/* 密度を上げた枚の、スマホでの組み替え */
@media screen and (max-width: 767px) {
  .cover .slide-in { display: flex; flex-direction: column; }
  .cover-main { padding: 32px 20px 24px; }
  .cover h1 { font-size: 28px; }
  .cover-kicker { margin-top: 28px !important; }
  .cover-panel { order: 2; flex: none; height: 230px; }
  .cover-panel .c-pc { top: 8px; left: 20px; width: 340px; }
  .cover-panel .c-pc2, .cover-panel .c-sp { display: none; }
  .slide .cover-points { order: 3; grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .cover-points b { font-size: 24px; }
  .symptoms li { padding: 14px; }
  .fig { height: 160px; }
  .worries-more li { padding: 12px 14px; }
  .worries-sum { margin: 24px -20px -48px !important; padding: 20px; font-size: 16px; }
  #s-can .slide-in::before, #s-owner .slide-in::before { display: none; }
  #s-can h2, #s-owner h2 { color: var(--ink); max-width: none; font-size: 23px; }
  .can-wrap, .owner { grid-template-columns: 1fr; gap: 20px; }
  #s-can .can-wrap, #s-owner .owner { margin-top: 20px; }
  #s-can .can, #s-owner .owner-text { margin-top: 0; }
  .can-lead .big, .owner-name .name { color: var(--ai); }
  .can-lead .sub, .owner-name .brand { color: var(--ink-2); }
  .can > div { padding: 14px 14px 14px 56px; margin-bottom: 10px; }
  .can > div::before { left: 12px; top: 14px; width: 32px; height: 32px; font-size: 16px; }
  .steps { gap: 8px; }
  .steps li { grid-template-columns: 40px 1fr; padding: 12px; }
  .steps .sq { width: 30px; height: 30px; grid-row: 1 / span 2; font-size: 15px; }
  .gantt { padding: 16px 12px; }
  .delay { padding: 16px; margin-top: 16px; }
  .faq { columns: 1; }
  .faq .qa { border-top: 0; padding: 14px; margin-bottom: 10px; }
  .biz { margin: 24px 0 0; width: 100%; }
  .biz th { width: 100%; font-size: 14px; }
  .biz td { font-size: 16px; }
  #s-contact .contact .sub { padding-left: 16px !important; }
}

/* ======================================================
   印刷: A4横 1枚1ページ
   ====================================================== */
@page { size: A4 landscape; margin: 0; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: none; }
  .screen-only { display: none !important; }
  .print-only { display: grid !important; }
  .deck { padding: 0; }
  .slide {
    width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto;
    margin: 0; border: 0; box-shadow: none; break-after: page; overflow: hidden;
    --u: 1mm;
  }
  .slide:last-of-type { break-after: auto; }
}