/* 迷子ペットのポスター作成ツール — 画面のスタイル
   方向性：「町内の貼り紙を作る作業机」。紙の地、マスキングテープ、太い貼り紙の文字。
   色は config.js の accent / accentSoft を poster.js が :root に流し込む。
   地の色・文字の色は accent から color-mix で割り出すので、2サイトとも同じこのファイルで
   おたプラはオレンジ、猫プロはブルーの手ざわりになる。
   このファイルはサイト共通。サイトごとの差は色と名前だけ。 */

:root {
  color-scheme: light;
  --accent: #d9650f;
  --accent-soft: #fff3e8;

  /* accent から割り出す色 */
  --accent-ink: color-mix(in oklch, var(--accent) 72%, #1b1712);   /* 小さい文字でも読める濃さ */
  --paper: color-mix(in oklch, var(--accent) 4%, #fffdf8);          /* 紙の地 */
  --paper-2: color-mix(in oklch, var(--accent) 9%, #f7f1e6);        /* 少し濃い紙（机） */
  --ink: oklch(24% 0.012 60);                                        /* 真っ黒にしない */
  --ink-sub: oklch(45% 0.012 60);
  --line: color-mix(in oklch, var(--accent) 14%, #ddd6ca);
  --field: #fffefb;
  --yellow: #ffd800;
  --line-green: #06c755;
  --bad: oklch(55% 0.19 25);

  --display: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;   /* 見出し：太くても読みやすい（2026-09-23 社長） */
  --body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --r: 12px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }
/* hidden を付けた要素は、display の指定より優先して隠す（保存ボタンが見本の段階で出ていた不具合の対策） */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  font-feature-settings: "palt" 0;
}

a { color: var(--accent-ink); text-underline-offset: 3px; }

/* 紙のざらつき（うすいノイズ） */
.hd, .ft {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── サイト名の帯 ───────────────────────── */

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
}
.brand__name {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .04em;
  text-decoration: none;
  color: #fff;
}
.brand__tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; }

/* ── 見出し ───────────────────────────── */

.hd {
  background-color: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hd__in {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 28px;
  display: grid;
  gap: 24px;
}
.hd__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--field);
}
.hd__title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 9.4vw, 60px);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--ink);
}
.hd__lead {
  margin: 0 0 16px;
  max-width: 34em;
  font-size: 15px;
  color: var(--ink-sub);
}
.hd__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hd__tags li {
  padding: 4px 12px 4px 26px;
  position: relative;
  border-radius: 6px;
  background: var(--field);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
}
.hd__tags li::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.hd__notice {
  max-width: 1040px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: #fff6c7;
  color: #5a4600;
  font-size: 14.5px;
  line-height: 1.7;
}
.hd > .hd__notice { margin: 0 16px 20px; }

/* ── チラシの模型（見出しの横） ─────────── */

.mock {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.mock__paper {
  position: relative;
  width: min(240px, 64vw);
  aspect-ratio: 210 / 297;
  background: #fff;
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--accent) 20%, #c9bfae),
    0 14px 30px -12px color-mix(in oklch, var(--accent) 40%, #3a2e1f);
  transform: rotate(-3.5deg);
  animation: pin .8s var(--ease) both;
  overflow: visible;
  font-family: var(--display);
}
@keyframes pin {
  from { transform: rotate(-9deg) translateY(10px); }
  to   { transform: rotate(-3.5deg) translateY(0); }
}
.mock__paper > span { position: absolute; display: block; }
.mock__tape {
  width: 58px; height: 18px;
  background: color-mix(in oklch, var(--yellow) 55%, #fff);
  opacity: .9;
  top: -8px;
  z-index: 3;
}
.mock__tape--l { left: -14px; transform: rotate(-32deg); }
.mock__tape--r { right: -14px; transform: rotate(28deg); }
.mock__corner {
  left: 0; top: 0;
  width: 0; height: 0;
  border-top: 70px solid #1c1a17;
  border-right: 42px solid transparent;
}
.mock__star {
  left: 3%; top: 3%;
  width: 26%; aspect-ratio: 1;
  display: grid !important;
  place-items: center;
  background: var(--yellow);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 56%, 96% 76%, 74% 76%, 66% 98%, 50% 84%, 34% 98%, 26% 76%, 4% 76%, 16% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%);
  font-size: 7px;
  color: var(--accent);
}
.mock__title {
  left: 30%; top: 4%;
  width: 44%;
  text-align: center;
  font-size: 22px;
  line-height: 1.1;
  color: var(--accent);
  -webkit-text-stroke: 1px #1c1a17;
}
.mock__sub {
  left: 30%; top: 15%;
  width: 44%;
  text-align: center;
  font-size: 10px;
  color: #1c1a17;
}
.mock__date {
  right: 3%; top: 3%;
  width: 26%; height: 20%;
  background: var(--accent);
  border-radius: 4px;
  color: #fff;
  text-align: center;
  padding-top: 10%;
  line-height: 1.2;
}
.mock__date b { display: block; font-weight: 400; font-size: 12px; }
.mock__date i { display: block; font-style: normal; font-size: 8px; color: var(--yellow); }
.mock__photo {
  left: 4%; top: 25%;
  width: 70%; height: 33%;
  border-radius: 3px;
  background: linear-gradient(160deg, #f0d2a8, #c98e52);
  display: grid !important;
  place-items: end center;
  overflow: hidden;
}
.mock__cat { width: 70%; fill: #3b2a1c; stroke: #f0d2a8; }
.mock__feat {
  right: 4%; top: 25%;
  width: 20%; height: 33%;
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  padding-top: 6px;
}
.mock__feat i, .mock__info i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #e6e0d6;
}
.mock__feat i:first-child { background: var(--accent); width: 70%; }
.mock__band {
  left: 0; right: 0; top: 60%;
  height: 6.5%;
  background: var(--yellow);
  display: grid !important;
  place-items: center;
  font-size: 8px;
  color: #1c1a17;
}
.mock__map {
  left: 4%; top: 69%;
  width: 45%; height: 18%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(35deg, transparent 0 7px, #d4d0c6 7px 8px),
    repeating-linear-gradient(-55deg, transparent 0 10px, #d4d0c6 10px 11px),
    #eef0ea;
}
.mock__map::after {
  content: "";
  position: absolute;
  left: 46%; top: 42%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px #fff;
}
.mock__info {
  right: 4%; top: 69%;
  width: 43%; height: 18%;
  border-radius: 3px;
  background: #fbf5e6;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 10%;
}
.mock__tel {
  left: 3%; right: 3%; bottom: 2.5%;
  height: 9%;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  display: grid !important;
  place-items: center;
  font-size: 14px;
  letter-spacing: .02em;
}

/* ── 本文の枠 ─────────────────────────── */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── 入力と完成イメージの並び ─────────────
   スマホ：入力 → 完成イメージ → 保存。パソコン：入力の右に完成イメージを固定 */
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "form" "live" "out";
  column-gap: 40px;
}
.work__form { grid-area: form; }
.work__live { grid-area: live; padding-top: 32px; scroll-margin-top: 12px; }
.work__out { grid-area: out; }
.live__h { margin-bottom: 12px; }
.live .out__canvas { margin-bottom: 0; }

.out__stale {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff6c7;
  color: #5a4600;
  font-size: 14px;
  font-weight: 700;
}

/* スマホ：完成イメージへ飛ぶボタン */
.jump {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(30, 24, 16, .5);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.jump svg { width: 16px; height: 16px; }
.jump.is-off { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (min-width: 1000px) {
  .work {
    max-width: 1200px;
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-template-areas: "form live" "out live";
    align-items: start;
  }
  .work__live {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
  .live #cv { max-height: calc(100vh - 150px); width: auto; max-width: 100%; margin: 0 auto; }
  .jump { display: none; }
}

/* ── 入力の段 ─────────────────────────── */

.sec {
  padding: 32px 0 12px;
  border-bottom: 1px dashed var(--line);
}
.form .sec:last-of-type { border-bottom: 0; }

.sec__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
}
.sec__h small {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-sub);
}
.sec__no {
  flex: none;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.sec__lead {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink-sub);
}

.f { display: block; margin: 0 0 24px; }
.f--row { display: flex; flex-wrap: wrap; gap: 12px 12px; }
.f__half { flex: 1 1 140px; min-width: 0; }
/* 選ぶボタンが入る欄は、狭い画面では1行を丸ごと使う */
@media (max-width: 479px) { .f--row > .f__half:has(.seg) { flex-basis: 100%; } }

.f__label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.req {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}

/* いちばん大事な欄：黄色の蛍光ペン */
.hl {
  background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%);
  padding: 0 2px;
}
.f--key {
  padding: 18px 16px 16px;
  border-radius: var(--r);
  background: color-mix(in oklch, var(--yellow) 12%, var(--field));
  border: 2px solid color-mix(in oklch, var(--yellow) 70%, #c8a300);
}

input[type="text"],
input[type="tel"],
input[type="date"],
input[type="time"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder { color: oklch(62% 0.01 60); }

/* iPhone の日付・時刻の欄：独自の見た目を外して、ほかの欄と同じ高さ・左寄せにそろえる */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  height: 52px;
  line-height: 1.3;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
  min-height: 1.3em;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .6; }
input[type="date"], input[type="time"] { width: 100%; max-width: 100%; }
/* iPhone は未入力だと何も出ないので、空のときだけ案内の文字を背景に出す（poster.js が is-empty を付け外し）。
   パソコンやAndroidは「年/月/日」と自前で出すので重なる。iPhone・iPad（-webkit-touch-callout が効く端末）だけに出す */
@supports (-webkit-touch-callout: none) {
  input.is-empty[type="date"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='24'><text x='0' y='17' font-size='16' font-family='sans-serif' fill='%23958c7c'>タップして日付を選択</text></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
  }
  input.is-empty[type="time"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='24'><text x='0' y='17' font-size='16' font-family='sans-serif' fill='%23958c7c'>タップして時刻を選択</text></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
  }
}
/* スマホでは日付と時刻を1行ずつに（iPhone で横にはみ出すため） */
@media (max-width: 599px) { .f--dt > .f__half { flex-basis: 100%; } }
input:hover { border-color: color-mix(in oklch, var(--accent) 35%, var(--line)); }
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}
input.is-bad {
  border-color: var(--bad);
  background: oklch(97% 0.02 25);
}

.mt8 { margin-top: 10px; }

/* いなくなった場所：都道府県・市区町村・町名を選ぶ（2026-09-26 社長「表記揺れ対策」） */
fieldset.addr { border: 0; padding: 0; min-width: 0; }
.addr > legend { padding: 0; }
.addr__pref select { max-width: 240px; }
/* あかさたな で候補をしぼる（2026-09-26 社長「プルダウンの中で分けられたら」） */
.kana { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.kana button {
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: 700 16px/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.kana button.kana__all { font-size: 13px; }
.kana button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.kana button:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); }
.addr__one { display: block; margin-bottom: 12px; }
.addr__sub {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-sub);
}
.addr__sub small { margin-left: 6px; font-weight: 400; }
.addr__zip { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.addr__zipl { flex: 0 0 160px; }
.addr__zipmsg { flex: 1; padding-bottom: 14px; font-size: 13px; color: var(--ink-sub); }
select {
  width: 100%;
  min-height: 52px;
  padding: 12px 36px 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23776f62' stroke-width='2'/></svg>") no-repeat right 14px center;
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
select:disabled { opacity: .55; }
select:hover:not(:disabled) { border-color: color-mix(in oklch, var(--accent) 35%, var(--line)); }
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}
.tm { display: flex; gap: 8px; }
.tm select { flex: 1 1 0; min-width: 0; }
select.is-bad { border-color: var(--bad); background-color: oklch(97% 0.02 25); }

.f__note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-sub);
}
.f__note b { color: var(--ink); }

/* 選ぶボタン */
.seg { display: flex; gap: 8px; }
.seg--wrap { flex-wrap: wrap; }
.seg__i { flex: 0 1 auto; }
.seg__i input { position: absolute; opacity: 0; pointer-events: none; }
.seg__i span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 64px;
  padding: 8px 20px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.seg__i span:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); }
.seg__i span { white-space: nowrap; }
.seg--sm span { min-width: 0; padding: 8px 18px; font-size: 14px; }
.seg__i input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.seg__i input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.chk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.chk input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }

/* 写真 */
.photos { display: flex; gap: 12px; }
.photos__sub { display: flex; flex-direction: column; gap: 12px; flex: 0 0 34%; }
.ph { display: block; flex: 1 1 auto; cursor: pointer; }
.photos__sub .ph { flex: 1 1 0; }
.ph__in { position: absolute; opacity: 0; width: 0; height: 0; }
.ph__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 96px;
  padding: 10px;
  border: 2px dashed color-mix(in oklch, var(--accent) 40%, var(--line));
  border-radius: var(--r);
  background-color: var(--field);
  background-size: cover;
  background-position: center;
  text-align: center;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.ph:hover .ph__box { border-color: var(--accent); background-color: var(--accent-soft); }
.ph__box--big { min-height: 200px; }
.ph__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-ink);
}
.ph__ic { width: 30px; height: 30px; color: var(--accent); }
.ph__ph .req { margin: 2px 0 0; }
.ph__box.is-set { border-style: solid; border-color: var(--accent); }
.ph__box.is-set .ph__ph { display: none; }
.ph__in:focus-visible + .ph__box { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ── ボタン ───────────────────────────── */

.acts { padding: 28px 0 8px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 14px 20px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  background: var(--field);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s var(--ease);
}
.btn:hover { background: var(--accent-soft); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn--main {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 0 color-mix(in oklch, var(--accent) 60%, #1b1712);
}
.btn--main:hover { background: color-mix(in oklch, var(--accent) 88%, #1b1712); }
.btn--main:active { box-shadow: 0 2px 0 color-mix(in oklch, var(--accent) 60%, #1b1712); }
.btn--build {
  min-height: 64px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .06em;
}
.btn--line {
  border-color: var(--line-green);
  background: var(--line-green);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 4px 0 #04913d;
}
.btn--line:hover { background: #05b44d; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.acts__note {
  margin: 12px 0 0;
  min-height: 1em;
  font-size: 14px;
  font-weight: 700;
  color: var(--bad);
}

/* ── できあがり ───────────────────────── */

.sec--out { border-bottom: 0; padding-top: 40px; }
.out__canvas {
  position: relative;
  margin: 8px 0 24px;
  padding: 22px 18px 18px;
  border-radius: var(--r);
  background: var(--paper-2);
}
.out__canvas::before,
.out__canvas::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 64px; height: 20px;
  background: color-mix(in oklch, var(--yellow) 55%, #fff);
  opacity: .9;
  z-index: 1;
}
.out__canvas::before { left: 10px; transform: rotate(-24deg); }
.out__canvas::after { right: 10px; transform: rotate(22deg); }
#cv {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 12px 28px -14px color-mix(in oklch, var(--accent) 45%, #3a2e1f);
}

.out__acts { display: flex; flex-direction: column; gap: 12px; }

.out__gate {
  margin-top: 8px;
  padding: 22px 18px 20px;
  border: 2px solid var(--line-green);
  border-radius: 16px;
  background: color-mix(in oklch, var(--line-green) 7%, var(--field));
  text-align: center;
}
.out__gate-h {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 19px;
}
.out__gate-p { margin: 0 0 16px; font-size: 15px; }
.out__gate-note { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-sub); }
.out__line { margin-top: 20px; text-align: center; }
.out__line-p { margin: 0 0 10px; font-size: 14px; }
.out__forget { margin: 18px 0 0; text-align: center; font-size: 13px; }
.out__forget a { display: inline-block; padding: 10px 4px; }

.tips {
  margin-top: 32px;
  padding: 22px 18px 16px;
  border-radius: var(--r);
  background: var(--field);
  border: 2px solid var(--line);
}
.tips__h {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
}
.tips__l {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tip;
  font-size: 14.5px;
  line-height: 1.8;
}
.tips__l li {
  position: relative;
  padding: 0 0 12px 38px;
  counter-increment: tip;
}
.tips__l li::before {
  content: counter(tip);
  position: absolute;
  left: 0; top: 1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1;
}

/* ── 足まわり ─────────────────────────── */

.ft {
  padding: 26px 16px 40px;
  border-top: 1px solid var(--line);
  background-color: var(--paper-2);
}
.ft__p { max-width: 720px; margin: 0 auto 6px; font-size: 12.5px; color: var(--ink-sub); }

/* ── 広い画面 ─────────────────────────── */

@media (min-width: 760px) {
  .hd__in {
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    padding: 56px 24px 48px;
    gap: 32px;
  }
  .mock { padding: 0; }
  .mock__paper { width: 270px; }
  .hd > .hd__notice { margin: 0 auto 24px; max-width: 992px; }
  .out__acts { flex-direction: row; }
  .sec__h { font-size: 28px; }
  .sec__no { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .mock__paper { animation: none; }
  * { transition: none !important; }
}

/* 見出しの書体は太さ900で使う */
.hd__title, .sec__h, .sec__no, .brand__name, .btn--build, .tips__h, .out__gate-h, .mock__paper, .tips__l li::before { font-weight: 900; }


/* ── 猫探偵プロの見た目（config の theme: 'neko'） ──────────────
   2026-09-26 社長「デザインは若干変えてほしい。色だけでなく」。
   猫探偵プロのサイト（nekotantei-pro.com）に合わせる：白い看板＋ロゴ、紺の帯の見出し、
   金の差し色、角の丸みは小さく、文字はサイトと同じゴシック。紙のざらつきは使わない。 */

[data-theme="neko"] {
  --accent: #14305c;          /* 受け取りページは poster.js を読まないので、ここでも紺にする */
  --accent-soft: #e8edf5;
  --gold: #c9a13b;
  --gold-soft: #f3e7c4;
  --paper: #f1f3f6;
  --paper-2: #ffffff;
  --line: #cdd4de;
  --field: #ffffff;
  --ink: #1e2a3a;
  --ink-sub: #4f5b6b;
  --display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --r: 6px;
}
[data-theme="neko"] .hd, [data-theme="neko"] .ft { background-image: none; }

/* 看板：サイトのほかのページと同じ（ロゴ＋サイト名＋小さい説明、白地に細い線）2026-09-27 社長 */
[data-theme="neko"] .brand { padding: 8px 14px; border-bottom: 1px solid #dfe3ea; }
.nkhd { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nkhd__logo { width: 40px; height: 40px; flex: 0 0 auto; }
.nkhd__txt { display: flex; flex-direction: column; line-height: 1.2; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; }
.nkhd__txt strong { font-size: 25px; font-weight: 800; letter-spacing: .04em; color: #14305C; }
.nkhd__by { font-size: 7px; font-weight: 600; letter-spacing: .06em; color: #8A94A3; margin-top: 1px; }

[data-theme="neko"] .brand { align-items: center; background: #fff; color: var(--ink-sub); }

/* 見出し：紺の地に白い文字、題の下に金の線 */
[data-theme="neko"] .hd { background-color: var(--accent); border-bottom: 0; color: #fff; }
[data-theme="neko"] .hd__eyebrow {
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  color: var(--gold-soft);
}
[data-theme="neko"] .hd__title {
  font-weight: 800;
  font-size: clamp(30px, 7.4vw, 48px);
  line-height: 1.25;
  color: #fff;
}
[data-theme="neko"] .hd__title::after {
  content: "";
  display: block;
  width: 72px; height: 4px;
  margin-top: 16px;
  background: var(--gold);
}
[data-theme="neko"] .hd__lead { color: #d6deea; }
[data-theme="neko"] .hd__tags li {
  border-radius: 4px;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
}
[data-theme="neko"] .hd__tags li::before { border-radius: 1px; background: var(--gold); }
[data-theme="neko"] .hd__notice { color: var(--ink); }

/* 章の見出し：サイトのH2と同じ紺の帯 */
[data-theme="neko"] .sec { border-bottom: 0; }
[data-theme="neko"] .sec__h {
  align-items: center;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
}
[data-theme="neko"] .sec__no { font-size: 22px; font-weight: 800; color: var(--gold); }
[data-theme="neko"] .sec__h small { color: #cfd8e6; }

/* 入力と選ぶボタン：角を小さく */
[data-theme="neko"] input[type="text"],
[data-theme="neko"] input[type="tel"],
[data-theme="neko"] input[type="date"],
[data-theme="neko"] select { border-width: 1.5px; border-radius: var(--r); }
[data-theme="neko"] .seg__i span { border-width: 1.5px; border-radius: var(--r); }
[data-theme="neko"] .kana button { border-width: 1.5px; border-radius: 4px; }
[data-theme="neko"] .req { border-radius: 3px; }
[data-theme="neko"] .ph__box { border-radius: var(--r); }
[data-theme="neko"] .f--key { border-radius: var(--r); }

/* ボタン：作成は金、ほかは紺 */
[data-theme="neko"] .btn { border-radius: 8px; border-width: 1.5px; }
[data-theme="neko"] .btn--main { box-shadow: 0 3px 0 #0b1c38; }
[data-theme="neko"] .btn--build {
  border-color: var(--gold);
  background: var(--gold);
  color: #14233d;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 3px 0 #9c7a24;
}
[data-theme="neko"] .btn--build:hover { background: #d4ad48; }
[data-theme="neko"] .ft { background-color: #fff; }

/* ── 受け取りページ（猫探偵プロは Worker が出す。おたすけプラスは r/index.php に同じ指定） ── */
.rc { max-width: 620px; margin: 0 auto; padding: 28px 16px 56px; }
.rc__h { margin: 0 0 8px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.25; }
.rc__lead { margin: 0 0 20px; color: var(--ink-sub); font-size: 15px; }
.rc__img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 12px 28px -14px rgba(58,46,31,.45); }
.rc__acts { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 8px; }
.rc__meta { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-sub); }
.rc__del { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.rc__del button { background: none; border: 0; padding: 10px 0; color: var(--bad); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rc__none { padding: 22px 18px; border-radius: 14px; background: var(--field); border: 2px solid var(--line); }
@media (min-width: 600px) { .rc__acts { flex-direction: row; } }
[data-theme="neko"] .rc__h { font-weight: 800; color: var(--accent); }
[data-theme="neko"] .rc__none { border-radius: var(--r); border-width: 1.5px; }