@charset "utf-8";
/* =========================================================================
   カクスル — 製図台トーン
   作業台グレー（#EDF0F3）× グラファイト（#23272C）× セーフティイエロー（#F5B80A）
   ＋ 透明背景メタファーの市松（チェッカー）パターン
   Webフォントは読み込まない（システムフォントのみ）
   ========================================================================= */

:root {
  --desk:        #EDF0F3;   /* 作業台 */
  --desk-sunken: #E2E7EC;   /* 一段沈んだ面 */
  --panel:       #FFFFFF;   /* パネル・カード */
  --graphite:    #23272C;   /* 濃い面（ツールバー・バッジ） */
  --graphite-2:  #2E343B;   /* 濃い面の一段明るい所 */
  --graphite-3:  #3B434C;   /* 濃い面の境界 */
  --ink:         #1B1F24;   /* 本文 */
  --ink-soft:    #58616B;   /* 補助文 */
  --ink-faint:   #8A939D;   /* 弱い文字 */
  --line:        #D3D9DF;   /* 罫線 */
  --line-strong: #B9C2CB;
  --safety:      #F5B80A;   /* セーフティイエロー（1画面1〜2箇所） */
  --safety-deep: #C9930A;
  --safety-wash: #FFF6DC;
  --danger:      #C33A30;

  --radius: 8px;
  --shadow-1: 0 1px 1px rgba(27,31,36,.05), 0 2px 4px rgba(27,31,36,.06);
  --shadow-2: 0 1px 1px rgba(27,31,36,.06), 0 4px 10px rgba(27,31,36,.09), 0 12px 28px rgba(27,31,36,.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;

  --toolbar-h: 52px;
  --strip-h: 78px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--desk);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { text-wrap: balance; line-height: 1.4; margin: 0 0 .5em; }
p { text-wrap: pretty; }

a { color: #14618F; }
a:hover { color: #0E4A6E; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--graphite);
  color: #EEF2F5;
  border-bottom: 3px solid var(--safety);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background:
    linear-gradient(var(--graphite), var(--graphite)) 0 0 / 100% 46% no-repeat,
    conic-gradient(#FFF 0 25%, #DCE2E8 0 50%, #FFF 0 75%, #DCE2E8 0) 0 0 / 8px 8px;
  border: 2px solid #EEF2F5;
}
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.tagline { margin: 0; font-size: 13px; color: #AEB8C2; }
.no-upload-badge {
  font-size: 12.5px; font-weight: 700;
  color: var(--graphite); background: var(--safety);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.site-nav {
  margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px;
}
.site-nav a { color: #D5DCE3; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible { color: #FFF; border-bottom-color: var(--safety); }

/* ------------------------------------------------------------------ hero */
.hero { padding: 44px 0 40px; }
.hero h1 { font-size: 27px; letter-spacing: .01em; }
.hero .lead { font-size: 16px; color: var(--ink-soft); margin: 0 0 22px; }
.hero .lead strong { color: var(--ink); }

.dropzone {
  position: relative;
  display: block; width: 100%;
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    conic-gradient(#FFF 0 25%, #E4E9EE 0 50%, #FFF 0 75%, #E4E9EE 0) 0 0 / 20px 20px;
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--safety-deep); box-shadow: var(--shadow-1); }
.dropzone.is-over { border-color: var(--safety-deep); border-style: solid; background-color: var(--safety-wash); }
.dropzone .dz-main { display: block; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.dropzone .dz-sub  { display: block; font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.7; }
.dropzone kbd {
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  background: var(--graphite); color: #EEF2F5;
  border-radius: 4px; padding: 1px 6px;
}

.hero-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.hero-points li { padding-left: 22px; position: relative; font-size: 14px; color: var(--ink-soft); }
.hero-points li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; background: var(--safety); border-radius: 2px;
}

/* ---------------------------------------------------------------- editor */
.editor { display: none; }
.editor.is-active { display: block; }
body.editing .hero { display: none; }

.editor-shell {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.editor-inner { max-width: 1360px; margin: 0 auto; }

/* ツールバー：高さ固定でツール切替時のCLSをゼロにする */
.toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: var(--toolbar-h);
  padding: 7px 12px;
  background: var(--graphite);
  color: #E9EDF1;
}
.tgroup { display: flex; align-items: center; gap: 4px; }
.tsep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--graphite-3); }

.tbtn {
  font: inherit; font-size: 13.5px; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 11px; min-height: 34px;
  color: #E9EDF1; background: var(--graphite-2);
  border: 1px solid var(--graphite-3); border-radius: 6px;
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}
.tbtn:hover:not(:disabled) { background: #3A424B; }
.tbtn:disabled { opacity: .38; cursor: not-allowed; }
.tbtn[aria-pressed="true"] {
  background: var(--safety); border-color: var(--safety); color: var(--graphite); font-weight: 700;
}
.tbtn:focus-visible { outline: 2px solid var(--safety); outline-offset: 2px; }
.tbtn .ico { font-size: 15px; line-height: 1; }

.zoom-readout {
  font-variant-numeric: tabular-nums;
  font-size: 13px; color: #C6CED6;
  min-width: 4.5em; text-align: center;
}

/* キャンバス
   ⚠️ ステージの高さは「必ず確定値」にする。auto にすると
   canvas(height:100%) → 親の高さ auto → canvas の属性高さが採用される、の循環で
   描画のたびにステージが伸び続ける（実測で 1,100px まで成長した）。
   canvas を absolute にしてフローから外すのも同じ事故の二重防止。 */
.stage-row { display: flex; align-items: stretch; height: clamp(360px, 58vh, 760px); }
.stage {
  position: relative; flex: 1 1 auto; min-width: 0;
  background: var(--desk-sunken);
  overflow: hidden;
}
#canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#canvas.mode-pan { cursor: grab; }
#canvas.mode-panning { cursor: grabbing; }
#canvas.mode-draw { cursor: crosshair; }
#canvas.mode-select { cursor: default; }

.stage-hint {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 12px; color: var(--ink-soft);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; pointer-events: none;
}

/* 右パネル */
.side {
  flex: 0 0 264px; width: 264px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
  overflow-y: auto;
}
.side h2 { font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 10px; }
.side + .side { border-top: 1px solid var(--line); }
.field { margin: 0 0 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.field .val { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 400; }
.field input[type="range"] { width: 100%; accent-color: var(--safety-deep); }
.field input[type="color"] {
  width: 100%; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.swatches { display: flex; gap: 6px; margin-top: 6px; }
.swatch {
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line-strong); padding: 0;
}
.swatch:focus-visible { outline: 2px solid var(--safety); outline-offset: 2px; }

.oplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.oplist li { display: flex; align-items: center; gap: 6px; }
.oplist button.op-pick {
  flex: 1 1 auto; text-align: left; font: inherit; font-size: 13px;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oplist button.op-pick[aria-pressed="true"] {
  border-color: var(--safety-deep); background: var(--safety-wash); font-weight: 700;
}
.oplist button.op-del {
  font: inherit; font-size: 12px; padding: 6px 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink-soft);
}
.oplist button.op-del:hover { color: var(--danger); border-color: var(--danger); }
.side .empty { font-size: 13px; color: var(--ink-faint); margin: 0; }

/* フィルムストリップ */
.filmstrip {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--strip-h); padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--desk);
  overflow-x: auto;
}
.film-wrap { position: relative; flex: none; }
.film {
  display: block;
  width: 76px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 6px;
  background: var(--panel); overflow: hidden;
}
.film[aria-pressed="true"] { border-color: var(--safety-deep); box-shadow: 0 0 0 2px var(--safety-wash); }
.film img { width: 100%; height: 100%; object-fit: contain; display: block; }
.film-x {
  position: absolute; top: 1px; right: 1px;
  width: 18px; height: 18px; line-height: 1; text-align: center;
  font: inherit; font-size: 12px; padding: 0;
  border-radius: 4px; border: 0; cursor: pointer;
  background: rgba(35,39,44,.82); color: #fff;
}
.film-x:focus-visible { outline: 2px solid var(--safety-deep); outline-offset: 1px; }
.film-add {
  flex: none; width: 76px; height: 56px; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: 6px;
  background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 20px;
}
.film-add:hover { border-color: var(--safety-deep); color: var(--safety-deep); }

/* アクションバー */
.actionbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px; border-top: 1px solid var(--line); background: var(--panel);
}
.btn {
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 10px 18px; min-height: 42px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  transition: background-color .13s ease, box-shadow .13s ease;
}
.btn:hover:not(:disabled) { background: var(--desk); }
.btn:focus-visible { outline: 2px solid var(--safety-deep); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--safety); border-color: var(--safety-deep); color: var(--graphite);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover:not(:disabled) { background: #FFC722; }
.btn-quiet { color: var(--ink-soft); font-weight: 400; }
.action-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.action-note.is-warn { color: var(--danger); }
.spacer { margin-left: auto; }

.status {
  padding: 8px 12px; font-size: 13px;
  border-top: 1px solid var(--line);
  background: var(--safety-wash); color: var(--ink);
}
.status:empty { display: none; }
.status.is-error { background: #FBE9E7; }

/* ------------------------------------------------------------- 注意ブロック */
.section { padding: 40px 0; }
.notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--safety);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
.notice h2 { font-size: 17px; margin-bottom: 10px; }
.notice ul { margin: 0; padding-left: 1.2em; }
.notice li { margin-bottom: 8px; font-size: 14.5px; }
.notice li:last-child { margin-bottom: 0; }
.notice strong { background: linear-gradient(transparent 62%, var(--safety-wash) 0); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--graphite); color: #AEB8C2;
  padding: 26px 0; margin-top: 40px; font-size: 13px;
}
.site-footer p { margin: 0 0 6px; }
.site-footer .privacy-line { color: #EEF2F5; font-weight: 700; }
.site-footer .copy { color: #7C868F; margin: 0; }

/* --------------------------------------------------------------- 狭い画面 */
@media (max-width: 900px) {
  .stage-row { flex-direction: column; height: auto; }
  .side { flex: none; width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; }
  .stage { flex: none; height: clamp(280px, 46vh, 520px); }
}
@media (max-width: 560px) {
  .hero { padding: 28px 0 26px; }
  .hero h1 { font-size: 22px; }
  .dropzone { padding: 30px 16px; }
  .site-nav { margin-left: 0; gap: 12px; }
  .steps { grid-template-columns: 1fr; }
  .guide-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================================
   S2 追加分
   ========================================================================= */

/* ------------------------------------------------ 文字入力オーバーレイ */
/* キャンバスの上に重ねる本物の <textarea>。canvas に自前の文字入力を作ると
   日本語入力（変換中の未確定文字）が扱えないため、OS/ブラウザの入力欄をそのまま使う。 */
.text-overlay {
  position: absolute; z-index: 3;
  margin: 0; padding: 2px 4px;
  font-family: var(--font); font-weight: 700;
  background: rgba(255,255,255,.92);
  border: 2px solid var(--safety-deep);
  border-radius: 4px;
  outline: none; resize: none; overflow: hidden;
  min-width: 3em;
  box-shadow: var(--shadow-1);
}

/* ------------------------------------------------------------ 右パネル追加 */
.side .hint { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.65; }
.side .hint strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.field input[type="number"] {
  width: 100%; font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink);
}
.btn-small { font-size: 13px; padding: 7px 12px; min-height: 34px; margin-top: 10px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn-small { flex: 1 1 auto; }

/* --------------------------------------------------------- アクションバー */
.fmt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft);
}
.fmt select {
  font: inherit; font-size: 13.5px; padding: 8px 10px; min-height: 42px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.fmt input[type="range"] { width: 110px; accent-color: var(--safety-deep); }
.fmt .val { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ------------------------------------------------------------ 汎用セクション */
.sec-title {
  font-size: 21px; margin: 0 0 20px;
  padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.sec-title::after {
  content: ""; display: block; width: 56px; height: 2px;
  background: var(--safety); margin-bottom: -12px; position: relative; top: 12px;
}
kbd {
  font-family: var(--font); font-size: .88em; font-weight: 700;
  background: var(--graphite); color: #EEF2F5;
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

/* ----------------------------------------------------------- 加工の見本 */
.samples-lead { margin: -6px 0 18px; font-size: 14px; color: var(--ink-soft); }

.sample-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.sample-fig {
  margin: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 10px 12px;
  box-shadow: var(--shadow-1);
}
/* width/height 属性でアスペクト比が決まるので、描画前でも高さが動かない（CLS対策） */
.sample-fig canvas {
  display: block; width: 100%; height: auto;
  background: var(--desk-sunken); border-radius: 4px;
}
.sample-fig figcaption {
  margin: 9px 2px 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
  text-wrap: pretty;
}
.sample-fig figcaption strong { color: var(--ink); }

.sample-tiles {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

@media (max-width: 860px) {
  .sample-ba { grid-template-columns: 1fr; }
  .sample-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sample-tiles { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- 使い方 */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.steps li {
  position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 18px 18px;
  box-shadow: var(--shadow-1);
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--safety); color: var(--graphite);
  font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.steps h3 { font-size: 16px; margin: 0 0 6px; }
.steps p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.steps-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ FAQ */
.faq h3 {
  font-size: 16px; margin: 22px 0 6px;
  padding-left: 26px; position: relative;
}
.faq h3:first-child { margin-top: 0; }
.faq h3::before {
  content: "Q"; position: absolute; left: 0; top: 0;
  color: var(--safety-deep); font-weight: 700;
}
.faq p { margin: 0; font-size: 14.5px; color: var(--ink-soft); padding-left: 26px; }

/* ------------------------------------------------------------- ガイド一覧 */
.guide-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.guide-list li {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px 18px;
  transition: border-left-color .15s ease, box-shadow .15s ease;
}
.guide-list li:hover { border-left-color: var(--safety); box-shadow: var(--shadow-1); }
.guide-list a { font-size: 15.5px; font-weight: 700; text-decoration: none; }
.guide-list a:hover { text-decoration: underline; }
.guide-list p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* ------------------------------------------------------------ フッター追加 */
.foot-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 10px; }
.foot-nav a { color: #C6CED6; font-size: 12.5px; }
.foot-nav a:hover { color: #FFF; }

/* =========================================================================
   記事・固定ページ（/guide/... ・/about ・/privacy ・/terms）
   ========================================================================= */
.page { padding: 32px 0 8px; }
.breadcrumb { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 14px; }
.breadcrumb a { color: var(--ink-soft); }
.page h1 { font-size: 25px; margin: 0 0 10px; }
.page .page-lead { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 4px; }

.article {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 28px 30px; margin: 22px 0 0;
}
.article h2 {
  font-size: 19px; margin: 32px 0 12px;
  padding-left: 12px; border-left: 4px solid var(--safety);
}
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 16px; margin: 22px 0 8px; color: var(--graphite); }
.article p { margin: 0 0 14px; font-size: 15px; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 1.4em; }
.article li { margin-bottom: 7px; font-size: 15px; }
.article strong { font-weight: 700; }
.article .mark { background: linear-gradient(transparent 62%, var(--safety-wash) 0); font-weight: 700; }
.article table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px;
}
.article th, .article td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.article th { background: var(--desk); font-weight: 700; }
.article .callout {
  background: var(--safety-wash); border: 1px solid #EBD79A;
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px;
}
.article .callout p:last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; }

.cta {
  display: block; margin: 26px 0 8px;
  background: var(--graphite); color: #EEF2F5;
  border-radius: var(--radius); padding: 20px 22px;
  text-decoration: none;
  border-left: 5px solid var(--safety);
  transition: background-color .15s ease;
}
.cta:hover { background: #2E343B; color: #FFF; }
.cta .cta-title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.cta .cta-sub { display: block; font-size: 13.5px; color: #C6CED6; }

.related { margin: 30px 0 0; }
.related h2 { font-size: 15px; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 10px; border: 0; padding: 0; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.related a { font-size: 14px; }

.updated { font-size: 12.5px; color: var(--ink-faint); margin: 18px 0 0; }

@media (max-width: 560px) {
  .article { padding: 20px 18px; }
  .page h1 { font-size: 21px; }
}

/* --- 広告枠（AdSense）------------------------------------------------------
   slot が未発行のあいだ枠は空のまま。空要素は display:none で完全に消えるため
   レイアウトに余白を一切作らない（:not(:empty) 側にだけ余白を持たせる）。
   エディタのキャンバス操作領域には枠を置かない（操作の邪魔をしないため）。 */
.ad-slot { display: none; }
.ad-slot:not(:empty) {
  display: block;
  margin: 26px auto;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}
.ad-slot--footer:not(:empty) { margin: 30px auto 0; }

/* --- フッター最下部のお問い合わせリンク（小さく1本だけ）------------------ */
.foot-contact { margin: 10px 0 0; font-size: 12px; }
.foot-contact a { color: var(--ink-faint); text-decoration: none; }
.foot-contact a:hover { color: var(--ink-soft); text-decoration: underline; }

/* --- 物販リンク（Amazon）--------------------------------------------------- */
.shop-box {
  margin: 28px 0 0;
  background: var(--desk-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.shop-box h2 {
  font-size: 15px; letter-spacing: .04em; margin: 0 0 6px;
  border: 0; padding: 0; color: var(--ink);
}
.shop-box .shop-lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
.shop-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-box li { font-size: 14px; }
.shop-box a { font-weight: 600; }
.shop-box .shop-note { display: block; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.pr-note { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; }