:root{
    --bg:#eadcc9;
    --bg-deep:#e2cfb7;
    --paper:#f7efe4;
    --paper-2:#f3e8da;
    --ink:#43342d;
    --muted:#78685e;
    --faint:#a99687;
    --line:#d5c0ad;
    --line-2:#c8ad98;
    --accent:#8c6850;
    --accent-dark:#6d4f3d;
    --accent-soft:#b99b83;
    --shadow:rgba(63,44,31,.10);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0}
  body{
    min-height:100vh;
    color:var(--ink);
    background:
      radial-gradient(circle at 18% 8%, rgba(255,250,244,.72), transparent 28%),
      radial-gradient(circle at 86% 18%, rgba(255,255,255,.23), transparent 24%),
      linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
    font-family:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
    letter-spacing:.01em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  body::before{
    content:"";
    position:fixed; inset:0; pointer-events:none;
    opacity:.24;
    background-image:
      repeating-linear-gradient(0deg, rgba(70,46,30,.018) 0, rgba(70,46,30,.018) 1px, transparent 1px, transparent 4px);
    mix-blend-mode:multiply;
  }

  .wrap{
    width:min(780px,92vw);
    margin:0 auto;
    padding:64px 0 92px;
  }

  header{
    position:relative;
    padding:0 2px 36px;
    margin-bottom:36px;
    border-bottom:1px solid rgba(200,173,152,.6);
  }

  header::after{
    content:"";
    position:absolute;
    left:0; bottom:-1px;
    width:84px; height:1px;
    background:var(--accent);
    opacity:.7;
  }

  .eyebrow{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;
    letter-spacing:.24em;
    color:var(--muted);
    margin-bottom:14px;
  }

  h1{
    margin:0;
    font-size:clamp(32px,7vw,52px);
    font-weight:500;
    letter-spacing:.12em;
    line-height:1.35;
  }

  .sub{
    margin-top:16px;
    color:var(--muted);
    line-height:2.05;
    font-size:14px;
  }

  .card{
    position:relative;
    background:
      linear-gradient(180deg,rgba(250,244,236,.96),rgba(247,239,228,.94));
    border:1px solid rgba(213,192,173,.9);
    box-shadow:
      0 18px 48px var(--shadow),
      inset 0 1px rgba(255,255,255,.7);
    border-radius:2px;
    overflow:hidden;
  }

  .card::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(213,192,173,.35);
    pointer-events:none;
  }

  .inner{
    position:relative;
    z-index:1;
    padding:clamp(28px,6vw,52px);
  }

  .step{display:none}
  .step.active{display:block;animation:fade .48s ease}
  @keyframes fade{
    from{opacity:0;transform:translateY(5px)}
    to{opacity:1;transform:none}
  }

  .qnum,
  .result-label{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;
    letter-spacing:.2em;
    color:var(--muted);
  }

  h2{
    font-size:clamp(21px,4.6vw,29px);
    font-weight:500;
    line-height:1.85;
    margin:10px 0 18px;
    letter-spacing:.03em;
  }

  p{line-height:2.05;margin:0 0 15px}
  .tiny{
    font-size:12.5px;
    color:var(--muted);
    line-height:1.95;
  }

  textarea{
    width:100%;
    min-height:146px;
    resize:vertical;
    border:none;
    border-bottom:1px solid var(--line-2);
    background:transparent;
    padding:20px 2px 18px;
    font:inherit;
    font-size:18px;
    color:var(--ink);
    outline:none;
    line-height:1.95;
  }
  textarea:focus{border-bottom-color:var(--accent)}
  textarea::placeholder{color:#a89688}

  .choices{
    display:grid;
    gap:11px;
    margin-top:24px;
  }

  button.choice,
  button.primary,
  button.ghost{
    font:inherit;
    cursor:pointer;
    transition:.2s ease;
  }

  button.choice{
    text-align:left;
    padding:16px 18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.18);
    color:var(--ink);
    border-radius:1px;
  }

  button.choice:hover,
  button.choice.selected{
    background:#efe0d1;
    border-color:var(--line-2);
  }

  button.choice.selected{
    box-shadow:inset 3px 0 0 var(--accent);
  }

  .actions{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:30px;
    flex-wrap:wrap;
  }

  button.primary{
    border:1px solid var(--accent-dark);
    background:var(--accent-dark);
    color:#fff9f3;
    padding:12px 20px;
    border-radius:1px;
    box-shadow:0 5px 14px rgba(79,53,38,.11);
  }

  button.primary:hover{transform:translateY(-1px)}
  button.primary:disabled{
    opacity:.34;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
  }

  button.ghost{
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    padding:11px 16px;
    border-radius:1px;
  }

  .note{
    margin-top:14px;
    font-size:11.5px;
    color:var(--faint);
    font-family:"Zen Kaku Gothic New",sans-serif;
    letter-spacing:.02em;
  }


  .scene-atmosphere{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.52;
    transition:.4s ease;
    z-index:0;
  }

  .scene-atmosphere::before,
  .scene-atmosphere::after{
    content:"";
    position:absolute;
  }

  .atm-top::before{
    left:0; right:0; top:0; height:34%;
    background:linear-gradient(180deg, rgba(111,79,61,.09), transparent);
  }
  .atm-bottom::before{
    left:0; right:0; bottom:0; height:28%;
    background:linear-gradient(0deg, rgba(140,104,80,.08), transparent);
  }
  .atm-horizon::before{
    left:8%; right:8%; bottom:24%;
    height:1px; background:rgba(109,79,61,.14);
  }
  .atm-mist::before{
    inset:18% 6% auto 6%; height:30%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 70%);
    filter:blur(4px);
  }
  .atm-glow::before{
    width:180px; height:180px; border-radius:50%;
    top:-50px; right:-30px;
    background:radial-gradient(circle, rgba(190,150,118,.13), transparent 70%);
  }
  .atm-night::before{
    inset:0;
    background:linear-gradient(180deg, rgba(71,61,58,.07), transparent 46%);
  }
  .atm-path::before{
    left:50%; bottom:-4%;
    width:1px; height:46%;
    background:linear-gradient(0deg, rgba(109,79,61,.0), rgba(109,79,61,.14));
    transform:rotate(8deg);
    transform-origin:bottom center;
  }

  .month-link{
    margin-top:22px;
    display:flex;
    justify-content:flex-end;
  }

  .month-report{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(213,192,173,.7);
  }

  .month-report h3{
    margin:8px 0 20px;
    font-weight:500;
    font-size:clamp(22px,4vw,30px);
    letter-spacing:.08em;
  }

  .month-summary{
    line-height:2.1;
    margin-bottom:24px;
  }

  .month-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:20px;
  }

  .month-box{
    padding:18px;
    border:1px solid rgba(213,192,173,.7);
    background:rgba(255,255,255,.15);
  }

  .month-kicker{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10px;
    letter-spacing:.16em;
    color:var(--muted);
    margin-bottom:12px;
  }

  .month-top-scene{
    font-size:22px;
    letter-spacing:.07em;
    margin-bottom:4px;
  }

  .month-count{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:11px;
    color:var(--faint);
  }

  .month-signs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    line-height:1;
  }

  .month-sign{
    width:28px; height:28px;
    display:grid; place-items:center;
    border:1px solid rgba(213,192,173,.6);
    color:var(--accent-dark);
    font-size:14px;
    background:rgba(255,255,255,.12);
  }

  .month-foot{
    margin-top:22px;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
  }

  @media (max-width:560px){
    .month-grid{grid-template-columns:1fr}
  }

  .result-top{
    text-align:left;
    margin-bottom:22px;
  }


  .symbol-wrap{
    margin:8px 0 16px;
    display:flex;
    align-items:center;
    gap:14px;
  }

  .symbol-mark{
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    border:1px solid rgba(200,173,152,.62);
    background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .symbol-mark svg{
    width:48px;
    height:48px;
    overflow:visible;
  }

  .symbol-mark svg *{
    vector-effect:non-scaling-stroke;
    stroke:var(--accent-dark);
    stroke-width:1.15;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.94;
  }

  .symbol-caption{
    font-family:"Zen Kaku Gothic New",sans-serif;
    color:var(--faint);
    font-size:10px;
    letter-spacing:.16em;
    line-height:1.8;
  }

  .history-symbol{
    color:var(--faint);
    font-size:12px;
    min-width:18px;
    text-align:center;
  }

  .scene{
    margin:10px 0 5px;
    font-size:clamp(32px,7vw,50px);
    font-weight:500;
    letter-spacing:.09em;
    line-height:1.45;
  }

  .scene-sub{
    color:var(--muted);
    font-size:12.5px;
    letter-spacing:.08em;
  }

  .specimen{
    margin:28px 0 30px;
    padding:18px 0 16px;
    border-top:1px solid rgba(200,173,152,.7);
    border-bottom:1px solid rgba(200,173,152,.7);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    color:var(--faint);
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;
    letter-spacing:.14em;
  }

  .specimen i{
    display:block;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(140,104,80,.55), transparent);
  }

  .observation{
    position:relative;
    margin:30px 0;
    padding:18px 20px 18px 24px;
    background:rgba(239,224,209,.42);
    border-left:2px solid var(--accent-soft);
    line-height:2.05;
  }

  .observation::before{
    content:"観察";
    position:absolute;
    top:-9px; left:18px;
    padding:0 7px;
    background:var(--paper);
    color:var(--faint);
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10px;
    letter-spacing:.16em;
  }

  .action-box{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid rgba(213,192,173,.7);
  }

  .action-box .kicker{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;
    letter-spacing:.17em;
    color:var(--muted);
    margin-bottom:10px;
  }

  .log{
    margin-top:34px;
    padding:22px 2px 0;
    border-top:1px dashed var(--line-2);
    color:#5f5047;
    line-height:2.05;
    font-size:15px;
  }

  .log .date{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;
    letter-spacing:.16em;
    color:var(--muted);
    margin-bottom:8px;
  }

  .history{
    margin-top:38px;
    padding-top:24px;
    border-top:1px solid rgba(213,192,173,.7);
  }

  .history h3{
    margin:0 0 18px;
    font-weight:500;
    font-size:15px;
    letter-spacing:.1em;
  }

  .trail{
    position:relative;
    display:grid;
    gap:14px;
    padding-left:18px;
  }

  .trail::before{
    content:"";
    position:absolute;
    left:5px; top:5px; bottom:5px;
    width:1px;
    background:linear-gradient(180deg,var(--line-2),rgba(200,173,152,.15));
  }

  .trail-item{
    position:relative;
    display:flex;
    gap:12px;
    align-items:baseline;
    min-height:22px;
  }

  .trail-item::before{
    content:"";
    position:absolute;
    left:-16px;
    top:.72em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--accent);
  }

  .trail-date{
    min-width:42px;
    font-family:"Zen Kaku Gothic New",sans-serif;
    color:var(--faint);
    font-size:10px;
    letter-spacing:.08em;
  }

  .trail-scene{
    color:#66574e;
    font-size:13px;
  }

  .footer{
    margin-top:28px;
    color:var(--muted);
    font-size:11.5px;
    line-height:1.9;
  }

  .signature{
    margin-top:16px;
    text-align:right;
    color:var(--faint);
    font-size:11px;
    letter-spacing:.12em;
  }

  @media (max-width:560px){
    .wrap{padding-top:38px}
    .inner{padding:28px 24px 32px}
    .specimen{grid-template-columns:1fr}
    .specimen i{display:none}
  }

  @media (prefers-reduced-motion: reduce){
    *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  }

.back-portal{display:inline-block;margin-top:20px;padding:9px 18px;
  border:1px solid currentColor;border-radius:2px;
  font-size:12px;letter-spacing:.08em;text-decoration:none;
  color:inherit;opacity:.6;transition:opacity .3s ease;}
.back-portal:hover,.back-portal:focus-visible{opacity:1;}

/* 足元のコピーライト。ページごとの控えめな色に合わせる（薄くしすぎない） */
.copyright{color:var(--muted);}