@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Kosugi+Maru&display=swap');

html { font-size: 17px; }
:root {
  --paper:  #f6f1e7;
  --card:   #fdfbf6;
  --soft:   #fbf7ee;
  --ink:    #453f37;
  --sub:    #8b7d6b;
  --line:   #d8cdbb;
  --accent: #b5763a;
  --sepia:  #7c5c43;
  --serif:  'Noto Serif JP','Yu Mincho',Georgia,serif;
  --sans:   'Noto Sans JP',-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
  --round:  'Kosugi Maru','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
  --mw:     480px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
body { font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
.l-header,.l-sidebar,.l-footer { display:none !important; }
.l-mainContent { max-width:100% !important; width:100% !important; padding:0 !important; }
.l-main,.l-wrap { padding-top:0 !important; margin-top:0 !important; }
.post_content { padding:0 !important; }
html, body { margin-top:0 !important; padding-top:0 !important; }
.c-pageTitle, .p-articleTitle, .entry-title, .page-title { display:none !important; }
.c-breadcrumb, .p-breadcrumb { display:none !important; }

/* 統一ヘッダ */
.uc-hdr { position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid #e5dfd7; }
.uc-hdr-top { display:flex; align-items:center; justify-content:space-between; padding:0 40px; height:60px; }
.uc-hdr-logo { display:flex; align-items:center; gap:8px; font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:.1em; color:#1a1a1a; }
.uc-hdr-logo-icon { flex-shrink:0; color:var(--accent); }
.uc-hdr-ham { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:6px 0; font-size:.75rem; color:#555; letter-spacing:.06em; }
.uc-hdr-ham-bars { display:flex; flex-direction:column; gap:4px; width:20px; }
.uc-hdr-ham-bar { display:block; height:1.5px; background:#1a1a1a; border-radius:1px; transition:all .25s; }
.uc-hdr-ham.open .uc-hdr-ham-bar:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.uc-hdr-ham.open .uc-hdr-ham-bar:nth-child(2) { opacity:0; }
.uc-hdr-ham.open .uc-hdr-ham-bar:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
.uc-hdr-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; opacity:0; pointer-events:none; transition:opacity .3s; }
.uc-hdr-overlay.open { opacity:1; pointer-events:auto; }
.uc-hdr-drawer { position:fixed; top:0; right:0; bottom:0; width:min(340px,88vw); background:#fff; z-index:400; transform:translateX(100%); transition:transform .32s cubic-bezier(.25,.46,.45,.94); display:flex; flex-direction:column; overflow-y:auto; }
.uc-hdr-drawer.open { transform:translateX(0); }
.uc-hdr-drawer-top { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; border-bottom:1px solid #e5dfd7; }
.uc-hdr-drawer-logo { font-family:var(--serif); font-size:1.05rem; font-weight:500; letter-spacing:.1em; color:#1a1a1a; }
.uc-hdr-drawer-close { background:none; border:none; cursor:pointer; font-size:1.1rem; color:#888; padding:4px; }
.uc-hdr-drawer-close:hover { color:var(--accent); }
.uc-hdr-nav-list { list-style:none; padding:20px 0; }
.uc-hdr-nav-link { display:block; padding:14px 28px; font-family:var(--serif); font-size:1rem; letter-spacing:.04em; color:#1a1a1a; border-bottom:1px solid #e5dfd7; }
.uc-hdr-nav-link:hover { color:var(--accent); background:#f7f0e8; }
@media (max-width:600px) { .uc-hdr-top { padding:0 20px; height:54px; } }

/* --- 年齢ものさし 本体 --- */
.am-frame { min-height:calc(100vh - 60px); background:var(--paper); padding:24px 16px 56px; }
.am-inner { max-width:var(--mw); margin:0 auto; }

.am-eye { font-size:.68rem; letter-spacing:.24em; color:var(--sub); margin:8px 0 6px; font-weight:500; }
.am-h1 { font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1.55; margin:0 0 14px; letter-spacing:.02em; }
.am-lead { font-size:.9rem; line-height:1.9; color:var(--sub); margin:0 0 22px; }

/* 入力ボックス */
.am-fieldbox { background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.am-label { font-size:.78rem; color:var(--sub); margin:0 0 8px; display:block; }
.am-input {
  width:100%; box-sizing:border-box; padding:10px 12px; font-size:.95rem; font-family:var(--sans);
  border:1.5px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); outline:none;
}
.am-input:focus { border-color:var(--accent); }
.am-select {
  width:100%; box-sizing:border-box; padding:10px 12px; font-size:.95rem; font-family:var(--sans);
  border:1.5px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); outline:none;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%238b7d6b' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.am-fieldbox-hint { font-size:.7rem; color:var(--sub); margin:6px 0 0; line-height:1.7; }

/* サイズ選択 */
.am-sizes { display:grid; gap:8px; }
.am-size {
  text-align:left; font-family:var(--sans); padding:11px 14px; cursor:pointer;
  background:var(--card); color:var(--ink);
  border:1.5px solid var(--line); border-radius:9px 11px 9px 11px;
  transition:border-color .15s, background .15s, color .15s;
}
.am-size:hover { border-color:var(--accent); }
.am-size.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.am-size-l { font-size:.94rem; font-weight:600; }
.am-size-l small { font-size:.72rem; font-weight:400; opacity:.85; margin-left:4px; }
.am-size-e { font-size:.72rem; opacity:.85; margin-top:2px; }

/* Stepper */
.am-steppers { display:flex; gap:10px; align-items:stretch; margin-bottom:22px; }
.am-stepper {
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:10px; padding:6px 8px; flex:1;
}
.am-stepper-btn {
  width:32px; height:32px; border-radius:8px; border:1.5px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:1.05rem; cursor:pointer;
  line-height:1; touch-action:manipulation;
}
.am-stepper-btn:hover { border-color:var(--accent); }
.am-stepper-val { flex:1; text-align:center; font-family:var(--serif); }
.am-stepper-val .n { font-size:1.3rem; }
.am-stepper-val .u { font-size:.72rem; color:var(--sub); margin-left:2px; }

/* CTA */
.am-cta {
  width:100%; font-family:var(--sans); font-size:.95rem; font-weight:600;
  padding:14px; border-radius:10px; border:none; cursor:pointer;
  background:var(--accent); color:#fff; min-height:48px;
}
.am-cta:hover { background:#9d6331; }
.am-cta:disabled { background:var(--line); color:#fff; cursor:not-allowed; }
.am-back { background:none; border:none; color:var(--sub); font-size:.82rem; cursor:pointer; font-family:var(--sans); padding:6px 0; margin-bottom:8px; }
.am-back:hover { color:var(--ink); }

.am-disclaimer { font-size:.7rem; color:var(--sub); line-height:1.95; margin:16px 0 0; }

/* 結果画面 */
.am-result { animation:am-fade .25s ease; }
@keyframes am-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

.am-num-wrap { text-align:center; margin-bottom:8px; }
.am-num-cap { font-size:.82rem; color:var(--sub); margin:0 0 2px; }
.am-num { font-family:var(--serif); margin:0; line-height:1; }
.am-num-h { font-size:3.5rem; color:var(--accent); font-weight:600; letter-spacing:.02em; }
.am-num-u { font-size:1.15rem; color:var(--ink); margin-left:4px; }
.am-num-sub { font-size:.78rem; color:var(--sub); margin:6px 0 0; }

/* いのちの道 (SVG) */
.am-road { background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:18px 16px 14px; margin:18px 0; }
.am-road-cap { font-size:.75rem; color:var(--sub); margin:0 0 12px; }
.am-road-svg { width:100%; height:auto; display:block; overflow:visible; }

/* シェアカード */
.am-share {
  background:var(--card); border:1.5px solid var(--line);
  border-radius:14px 16px 14px 16px;
  padding:22px 20px; margin-bottom:18px; position:relative;
}
.am-share-eye { font-size:.68rem; letter-spacing:.2em; color:var(--sub); margin:0 0 6px; }
.am-share-h { font-family:var(--serif); font-size:1.35rem; margin:0 0 6px; font-weight:500; letter-spacing:.02em; line-height:1.55; }
.am-share-h .name { color:var(--accent); font-weight:600; }
.am-share-h .num { color:var(--accent); font-weight:700; font-size:1.55rem; margin:0 2px; }
.am-share-stage { font-size:.85rem; margin:8px 0 0; }
.am-share-stage .tag { display:inline-block; padding:2px 10px; border-radius:999px; color:#fff; font-size:.72rem; margin-right:4px; font-weight:600; }
.am-share-foot { display:flex; justify-content:space-between; font-size:.68rem; color:var(--sub); margin:14px 0 0; letter-spacing:.02em; }

/* いまのステージ */
.am-stage-box { margin-bottom:18px; }
.am-stage-line { font-family:var(--serif); font-size:1.1rem; margin:0 0 6px; font-weight:500; }
.am-stage-desc { font-size:.88rem; line-height:1.9; margin:0; }
.am-stage-next { font-size:.8rem; color:var(--sub); margin:8px 0 0; line-height:1.7; }
.am-stage-next b { color:var(--ink); }

/* 今できること */
.am-do-h { font-family:var(--serif); font-size:1.05rem; margin:0 0 10px; font-weight:500; }
.am-dos { display:grid; gap:8px; margin-bottom:16px; }
.am-do {
  background:var(--card); border:1.5px solid var(--line); border-radius:9px;
  padding:11px 14px; font-size:.88rem; line-height:1.65;
  display:flex; align-items:center; gap:8px;
}
.am-do-link { text-decoration:none; color:var(--ink); transition:border-color .15s; }
.am-do-link:hover { border-color:var(--accent); }
.am-do-t { flex:1; }
.am-do-arrow { color:var(--sub); font-size:.85rem; flex-shrink:0; }
.am-do-badge {
  font-size:.66rem; padding:2px 8px; border-radius:999px;
  background:var(--paper); color:var(--sub); border:1px solid var(--line);
  flex-shrink:0; font-weight:500; letter-spacing:.02em;
}
.am-do-badge-affi { background:var(--soft); color:var(--accent); border-color:var(--accent); }
.am-do-badge-tool { background:#efeee9; color:var(--sepia); border-color:var(--sepia); }

/* 犬種おすすめカード */
.am-breed-badge {
  display:flex; gap:12px; padding:14px 16px;
  background:var(--soft); border:1.5px solid var(--accent);
  border-radius:8px 14px 8px 14px;
  text-decoration:none; color:var(--ink);
  margin:0 0 16px;
  transition:transform .12s, box-shadow .15s;
}
.am-breed-badge:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(181,118,58,.15); }
.am-breed-badge-tag {
  align-self:flex-start; flex-shrink:0;
  font-size:.62rem; padding:3px 8px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:600; letter-spacing:.04em;
}
.am-breed-badge-body { flex:1; }
.am-breed-badge-t { font-family:var(--serif); font-size:.95rem; font-weight:600; margin:0 0 4px; color:var(--accent); line-height:1.55; }
.am-breed-badge-n { font-size:.76rem; line-height:1.75; color:var(--sub); margin:0; }

/* 年齢スライダー
   ★touch-action:pan-x = 縦スクロール阻害・横ドラッグ許可 (スマホでドラッグ操作を実現)
   ★height:44px = WCAG 準拠タップ領域 (thumb 28px + 上下パディング)
   ★thumb 28px = 指で掴みやすいサイズ */
.am-slider-box {
  background:var(--card); border:1.5px solid var(--line);
  border-radius:10px; padding:12px 14px 10px; margin:0 0 14px;
}
.am-slider-cap { display:block; font-size:.72rem; color:var(--sub); margin:0 0 6px; line-height:1.6; }
.am-slider {
  width:100%; -webkit-appearance:none; appearance:none;
  background:transparent; outline:none;
  height:44px;
  padding:0; margin:0;
  touch-action:pan-x;
  cursor:pointer;
}
.am-slider::-webkit-slider-runnable-track {
  height:6px; background:var(--line); border-radius:3px;
}
.am-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); cursor:grab;
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  margin-top:-11px;
}
.am-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.05); }
.am-slider::-moz-range-track {
  height:6px; background:var(--line); border-radius:3px;
}
.am-slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); cursor:grab;
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}
.am-slider::-moz-range-thumb:active { cursor:grabbing; transform:scale(1.05); }
.am-slider:focus-visible::-webkit-slider-thumb { outline:2px solid var(--sepia); outline-offset:2px; }
.am-slider:focus-visible::-moz-range-thumb { outline:2px solid var(--sepia); outline-offset:2px; }
.am-slider-scale { display:flex; justify-content:space-between; font-size:.66rem; color:var(--sub); margin-top:-2px; }
.am-slider-current { text-align:center; font-family:var(--serif); font-size:.85rem; color:var(--accent); margin:2px 0 -2px; font-weight:600; }

/* ステージ内 CTA / 記事導線 */
.am-cta-inline {
  display:block; text-align:center;
  font-family:var(--sans); font-size:.92rem; font-weight:600; text-decoration:none;
  background:var(--accent); color:#fff; border-radius:10px; padding:13px; margin-bottom:12px;
}
.am-cta-inline:hover { background:#9d6331; }

/* 締めの一言 (C方向) */
.am-signoff {
  border:1.5px dashed rgba(124,92,67,.5); background:var(--soft);
  border-radius:4px 16px 4px 16px;
  padding:16px 18px; margin-bottom:20px;
}
.am-signoff p {
  font-family:var(--round); font-size:.95rem; line-height:2; letter-spacing:.05em; margin:0;
}

/* ステージ別 PR-BOX (アフィリ・命系L判定準拠) */
.am-prbox {
  background:#fbf6ec; border:1px solid #e6d6b4;
  border-radius:8px; padding:14px 16px; margin:0 0 18px;
}
.am-prbox-tag {
  display:inline-block; font-size:.62rem; border:1px solid var(--accent);
  color:var(--accent); border-radius:3px; padding:1px 6px; margin-right:6px;
  vertical-align:middle; letter-spacing:.05em;
}
.am-prbox-intro { font-size:.8rem; line-height:1.8; margin:0 0 8px; color:var(--ink); }
.am-prbox-item { margin:8px 0 0; font-size:.85rem; line-height:1.7; }
.am-prbox-item a { color:var(--accent); border-bottom:1px solid rgba(181,118,58,.35); }
.am-prbox-disc { font-size:.68rem; color:var(--sub); line-height:1.7; margin:10px 0 0; }

/* 3ツール数珠つなぎ (下部) */
.am-tools {
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  display:grid; gap:8px;
}
.am-tools-cap { font-size:.72rem; color:var(--sub); text-align:center; margin:0 0 4px; }
.am-tool {
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  background:var(--card); border:1.5px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--ink); font-size:.88rem;
}
.am-tool:hover { border-color:var(--accent); }
.am-tool-icon { font-size:1rem; flex-shrink:0; }
.am-tool-arrow { margin-left:auto; color:var(--sub); font-size:.78rem; }

/* トースト */
.am-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px;
  font-size:.82rem; z-index:5000; opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.am-toast.on { opacity:.95; pointer-events:auto; }

@media (max-width:420px) {
  .am-frame { padding:20px 14px 48px; }
  .am-h1 { font-size:1.5rem; }
  .am-num-h { font-size:3rem; }
  .am-share-h { font-size:1.2rem; }
  .am-share-h .num { font-size:1.4rem; }
}