:root {
    --sumi:#17130f; --sumi-2:#211b16;
    --washi:#ece2d2; --washi-dim:#a2968a;
    --seiji:#3f9b95; --take:#c8993f;
    --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Shippori Mincho",serif;
    --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  }
  * { box-sizing:border-box; }
  html,body { margin:0; background:var(--sumi); color:var(--washi); }
  body { font-family:var(--gothic); -webkit-font-smoothing:antialiased; padding-bottom:96px; }
  img { display:block; max-width:100%; }
  :focus-visible { outline:2px solid var(--seiji); outline-offset:3px; }
  .wrap { max-width:960px; margin:0 auto; padding:0 20px; }

  /* ---------- ファーストビュー：写真と番号だけ ---------- */
  header.wrap { padding:68px 20px 0; text-align:center; }
  h1 { font-family:var(--mincho); font-weight:400; font-size:clamp(27px,7.4vw,44px);
        line-height:1.34; letter-spacing:.04em; margin:0; }
  h1 em { font-style:normal; color:var(--take); }

  .stage { position:relative; margin:20px auto 0; max-width:600px; }
  .frame { position:relative; aspect-ratio:760/975; overflow:hidden; border-radius:2px;
            background:#0d0a08; box-shadow:0 30px 70px -34px rgba(0,0,0,.95); }
  .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .frame .aft { z-index:0; }
  .frame .bef { z-index:1; opacity:0; pointer-events:none; transition:opacity .45s ease; }
  .stage.peek .frame .bef { opacity:1; }
  .badge { position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mincho); font-size:11.5px;
            letter-spacing:.2em; padding:5px 11px; border-radius:2px; background:rgba(23,19,15,.72);
            border:1px solid rgba(236,226,210,.35); opacity:0; pointer-events:none; transition:opacity .25s; }
  .stage.peek .badge { opacity:1; }

  /* 番号ピン：このページの主役 */
  .pin { position:absolute; z-index:3; width:34px; height:34px; margin:-17px 0 0 -17px; padding:0;
          border-radius:50%; border:1px solid rgba(236,226,210,.8); background:rgba(20,16,13,.6);
          color:var(--washi); font-family:var(--mincho); font-size:15.5px; cursor:pointer;
          backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
          box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 12px rgba(0,0,0,.6);
          transition:background .12s, color .12s, border-color .12s, transform .07s linear, opacity .25s;
          opacity:0;
          touch-action:manipulation;                    /* スクロールは妨げない */
          -webkit-tap-highlight-color:transparent;
          -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
          will-change:transform; }
  /* 見た目は34px、指の判定は約124px。スクロール中の指ずれでも拾いやすくする */
  .hit { position:absolute; inset:-45px; border-radius:50%; display:block; }
  .stage.ready .pin { opacity:1; animation:pinIn .5s cubic-bezier(.2,1.6,.4,1) var(--d) forwards; }
  .pin .no { display:block; line-height:32px; }
  .pin:active, .pin.pressed { transform:scale(.88); background:var(--seiji);
                               border-color:var(--seiji); color:#0a2422; }
  .pin:hover, .pin.on { background:var(--seiji); border-color:var(--seiji); color:#0a2422; transform:scale(1.2); }
  .stage.peek .pin { opacity:.18; pointer-events:none; }
  /* 波紋の土台。これが無いと擬似要素が描画されない */
  .pin::after, .pin::before { content:""; position:absolute; inset:-1px; border-radius:50%;
                               border:1px solid rgba(236,226,210,.8); opacity:0; pointer-events:none; }
  .pin::before { border-color:rgba(236,226,210,.45); }

  .stage.calling .pin::after {
      animation:ringD 5.4s cubic-bezier(.15,.7,.25,1) calc(var(--n) * .18s + .6s) infinite; }
  .stage.calling .pin::before {
      animation:ringD 5.4s cubic-bezier(.15,.7,.25,1) calc(var(--n) * .18s + 1.7s) infinite; }
  .pin.hushed { animation:none !important; opacity:1; }
  .pin.hushed::after, .pin.hushed::before { animation:none !important; opacity:0; }
  .pin.tapped::after { animation:tap .42s ease-out 1 !important; }
  @keyframes pinIn { from { opacity:0; transform:scale(.35); } to { opacity:1; transform:scale(1); } }
  /* 水面：ゆっくり大きく広がり、薄く長く残る */
  @keyframes ringD { 0% { opacity:.75; transform:scale(1); border-width:1.5px; }
                      55% { opacity:.18; transform:scale(3.4); border-width:.5px; }
                      75% { opacity:0; transform:scale(4); }
                      100% { opacity:0; } }
  @keyframes tap { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(3.4); } }

  /* 読み込み直後、①が実際に押される様子を一度見せる */
  .guide { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
            border:1px solid rgba(236,226,210,.9); background:rgba(236,226,210,.14);
            pointer-events:none; opacity:0; }
  .guide::after { content:""; position:absolute; inset:-4px; border-radius:50%;
                   border:1px solid rgba(236,226,210,.75); opacity:0; }
  .stage.guiding .guide { animation:guide 2.1s ease-out 2; }
  .stage.guiding .guide::after { animation:guidering 2.1s ease-out 2; }
  @keyframes guide { 0% { opacity:0; transform:scale(1.5); }
                      14% { opacity:1; transform:scale(1); }
                      26% { opacity:1; transform:scale(.82); }
                      38% { opacity:1; transform:scale(1); }
                      70% { opacity:.9; } 100% { opacity:0; transform:scale(1); } }
  @keyframes guidering { 0%, 26% { opacity:0; transform:scale(.8); }
                          34% { opacity:.9; transform:scale(1); }
                          58% { opacity:0; transform:scale(2.4); }
                          100% { opacity:0; } }

  .under { display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0 0; flex-wrap:wrap; }
  .tapline { font-size:12.5px; color:#cfc3b4; letter-spacing:.04em; margin:0; }
  .peekbtn { display:inline-flex; align-items:center; gap:7px; font-family:var(--gothic); font-size:12.5px;
              color:var(--washi); background:rgba(236,226,210,.07); border:1px solid rgba(236,226,210,.4);
              border-radius:2px; padding:9px 15px; cursor:pointer;
              -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
              transition:background .2s, border-color .2s, transform .15s; }
  .peekbtn:hover { background:rgba(236,226,210,.14); border-color:rgba(236,226,210,.65); }
  .peekbtn:active { transform:scale(.97); }
  .peekbtn::before { content:"⇄"; font-size:13px; color:var(--washi-dim); }

  /* ---------- 一覧 ---------- */
  .listhead { margin:25px 0 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .listhead h2 { font-family:var(--mincho); font-weight:400; font-size:24px; margin:0; letter-spacing:.04em; }
  .listhead p { margin:0; font-size:12.5px; color:var(--washi-dim); }
  .listhead .src { flex-basis:100%; font-size:11.5px; color:#8a8177; letter-spacing:.02em; }
  ol.list { list-style:none; margin:20px 0 0; padding:0; }
  .row { position:relative; border-top:1px solid rgba(236,226,210,.1); border-radius:3px;
          transition:background .3s; }
  .row:last-child { border-bottom:1px solid rgba(236,226,210,.1); }
  .row.flash { background:rgba(63,155,149,.13); }
  .rowlink { display:grid; grid-template-columns:30px 112px 1fr 150px; gap:20px; align-items:center;
              padding:16px 12px 16px 2px; text-decoration:none; color:inherit; }
  .num { font-family:var(--mincho); font-size:21px; color:var(--take); text-align:center; }
  .thumb { display:block; position:relative; width:112px; overflow:hidden; border-radius:3px;
            transition:transform .09s linear; }
  .thumb img { width:112px; height:112px; object-fit:cover; display:block;
                transform:scale(1.06);
                transition:transform 1.1s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
  .thumb::after { content:""; position:absolute; inset:0; background:rgba(63,155,149,0);
                   transition:background .09s linear; pointer-events:none; }
  /* 案3：スクロールで画面に入った時だけ、写真が引いてCTAが現れる */
  .row.inview .thumb img { transform:scale(1); }
  .rowlink:hover .thumb img { transform:scale(1.04); box-shadow:0 12px 26px -14px rgba(0,0,0,.9); }
  /* 案5：触れた瞬間に沈んで、写真に膜がかかる */
  .rowlink { -webkit-tap-highlight-color:transparent; touch-action:manipulation;
              -webkit-user-select:none; user-select:none; }
  .rowlink:active .thumb, .rowlink.pressed .thumb { transform:scale(.96); }
  .rowlink:active .thumb::after, .rowlink.pressed .thumb::after { background:rgba(63,155,149,.22); }
  .rowlink:active .cta, .rowlink.pressed .cta { background:var(--seiji); border-color:var(--seiji);
                                                 color:#0a2422; }
  .info { display:block; }
  .info b { display:block; font-family:var(--mincho); font-weight:400; font-size:17.5px;
             margin:0 0 7px; letter-spacing:.02em; }
  .rowlink:hover .info b { color:#fff8ec; }
  .info em { font-style:normal; display:block; font-size:12.5px; line-height:1.8; color:#b5a99c; }
  .buy { display:block; text-align:right; }
  .buy .src { display:block; margin-top:7px; font-size:10.5px; letter-spacing:.06em; color:#7a7268; }
  .rowlink:hover .buy .src { color:#8f8579; }
  .cta { display:inline-block; padding:9px 16px; font-size:12.5px; letter-spacing:.02em;
          color:var(--washi); border:1px solid rgba(236,226,210,.38); border-radius:2px;
          opacity:0; transform:translateY(6px);
          transition:background .09s linear, color .09s linear, border-color .09s linear,
                     opacity .5s ease .2s, transform .5s cubic-bezier(.2,.8,.2,1) .2s; }
  .row.inview .cta { opacity:1; transform:none; }
  .rowlink:hover .cta { background:var(--washi); color:#17130f; border-color:var(--washi); }
  .rowlink:active .cta { transform:scale(.98); }
  .read { margin:74px 0 0; max-width:34em; }
  .read h2 { font-family:var(--mincho); font-weight:400; font-size:23px; letter-spacing:.03em;
              margin:52px 0 18px; padding-top:26px; border-top:1px solid rgba(236,226,210,.12); }
  .read h2:first-child { margin-top:0; padding-top:0; border-top:0; }
  .read h3 { font-family:var(--mincho); font-weight:400; font-size:17px; letter-spacing:.03em;
              margin:32px 0 10px; color:#e4d9c7; }
  .read p { margin:0 0 17px; font-size:14.5px; line-height:2.05; color:#c2b7a9; }
  .read a { color:var(--washi); text-decoration:none; border-bottom:1px solid rgba(236,226,210,.35); }
  .read a:hover { border-bottom-color:var(--washi); }
  .sizes { width:100%; border-collapse:collapse; margin:6px 0 8px; font-size:13.5px; }
  .sizes th { text-align:left; font-weight:400; font-size:11.5px; letter-spacing:.08em; color:#8a8177;
               padding:0 12px 9px 0; border-bottom:1px solid rgba(236,226,210,.16); }
  .sizes td { padding:12px 12px 12px 0; border-bottom:1px solid rgba(236,226,210,.08);
               color:#c2b7a9; line-height:1.7; vertical-align:top; }
  .sizes td:first-child { font-family:var(--mincho); font-size:14.5px; color:var(--washi); white-space:nowrap; }
  /* 画面下端＝親指がいちばん届く位置に番号を置く */
  .strip { position:fixed; left:0; right:0; bottom:0; z-index:20;
            background:rgba(24,19,15,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
            border-top:1px solid rgba(236,226,210,.14); }
  .strip .wrap { display:flex; align-items:center; gap:12px; padding:8px 20px; }
  .strip .lead { flex:none; font-size:10.5px; line-height:1.5; letter-spacing:.04em; color:#8a8177; }
  .chips { display:flex; gap:8px; overflow-x:auto; padding:3px 0;
            scrollbar-width:none; -ms-overflow-style:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; position:relative; width:54px; height:54px; border-radius:3px; overflow:hidden;
           text-decoration:none; border:1px solid rgba(236,226,210,.2); background:#0d0a08;
           touch-action:manipulation; -webkit-tap-highlight-color:transparent;
           -webkit-user-select:none; user-select:none;
           transition:border-color .14s, transform .07s linear; }
  .chip img { width:100%; height:100%; object-fit:cover; display:block;
               transition:transform .3s cubic-bezier(.2,.9,.2,1), opacity .2s; }
  .chip .n { position:absolute; left:0; bottom:0; min-width:20px; padding:1px 6px 2px;
              font-family:var(--mincho); font-size:12.5px; line-height:1.4; color:var(--washi);
              background:rgba(14,11,8,.82); border-radius:0 3px 0 0; }
  .chip::after { content:""; position:absolute; inset:-5px -2px; }
  .chip:hover { border-color:rgba(236,226,210,.55); }
  .chip:hover img { transform:scale(1.09); }
  .chip:active, .chip.pressed { transform:scale(.94); border-color:var(--seiji); }
  .chip:active img, .chip.pressed img { opacity:.75; }
  .chip.seen { border-color:rgba(63,155,149,.55); }
  .chip.seen .n { color:var(--seiji); }
  footer { margin-top:64px; padding:24px 0 8px; border-top:1px solid rgba(236,226,210,.12);
            font-size:11.5px; line-height:2; color:#8b8176; }

  @media (max-width:720px) {
    header.wrap { padding-top:44px; }
    .stage { margin-top:18px; }
    /* スマホでは「替える前を見る」を先に見せる */
    .under .peekbtn { order:-1; }
    .rowlink { grid-template-columns:26px 92px 1fr; grid-template-areas:"n t i" ". b b";
                gap:11px 13px; padding:15px 8px 12px 0; }
    .num { grid-area:n; font-size:19px; } .thumb { grid-area:t; } .info { grid-area:i; }
    .buy { grid-area:b; display:flex; align-items:center; justify-content:flex-end; gap:12px;
            text-align:right; flex-wrap:wrap; padding-right:2px; }
    .buy .src { margin-top:0; order:1; }
    .buy .cta { order:2; min-height:46px; display:inline-flex; align-items:center; padding:0 20px; }
    .thumb { width:92px; }
    .thumb img { width:92px; height:92px; }
    .cta { padding:8px 14px; }
    .add { padding-bottom:12px; }
    .read { margin-top:56px; }
    .strip .lead { font-size:9.5px; max-width:4.6em; line-height:1.4; }
    .strip .wrap { padding:7px 12px; gap:9px; }
    .chip { width:50px; height:50px; }
    .read h2 { font-size:21px; margin:42px 0 16px; }
    .read p { font-size:14px; line-height:2; }
    .sizes { font-size:13px; }
    .card .cn b { font-size:13.5px; }
    .bar .all { display:none; }
  }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- フッター（全ページ共通） ---------- */
footer .fdisc { margin:0 0 14px; font-size:11.5px; line-height:2; color:#8b8176; }
footer .flinks { display:flex; flex-wrap:wrap; gap:0 18px; margin:0 0 12px; }
footer .flinks a { font-size:12px; color:#b5a99c; text-decoration:none;
                   border-bottom:1px solid rgba(236,226,210,.22); padding-bottom:1px; }
footer .flinks a:hover { color:var(--washi); border-bottom-color:var(--washi); }
footer .fcopy { margin:0; font-size:11px; color:#6f665d; letter-spacing:.04em; }

/* ---------- 下層ページ ---------- */
.doc { max-width:36em; margin:0 auto; padding:64px 20px 40px; }
.doc .back { display:inline-block; margin:0 0 30px; font-size:12px; color:#b5a99c;
             text-decoration:none; border-bottom:1px solid rgba(236,226,210,.24); padding-bottom:1px; }
.doc .back:hover { color:var(--washi); }
.doc h1 { font-family:var(--mincho); font-weight:400; font-size:26px; letter-spacing:.04em;
          margin:0 0 8px; line-height:1.4; }
.doc .updated { margin:0 0 34px; font-size:11.5px; color:#7f766c; letter-spacing:.03em; }
.doc h2 { font-family:var(--mincho); font-weight:400; font-size:17.5px; letter-spacing:.03em;
          margin:40px 0 12px; padding-top:22px; border-top:1px solid rgba(236,226,210,.12); }
.doc h3 { font-family:var(--mincho); font-weight:400; font-size:15px; margin:24px 0 8px; color:#e4d9c7; }
.doc p, .doc li { font-size:14px; line-height:2.05; color:#c2b7a9; }
.doc p { margin:0 0 15px; }
.doc ul, .doc ol { margin:0 0 15px; padding-left:1.4em; }
.doc li { margin:0 0 7px; }
.doc a.link { color:var(--washi); text-decoration:none; border-bottom:1px solid rgba(236,226,210,.35); }
.doc a.link:hover { border-bottom-color:var(--washi); }
.doc .note { padding:14px 16px; border:1px solid rgba(236,226,210,.16); border-radius:3px;
             font-size:12.5px; line-height:1.95; color:#a2968a; margin:0 0 22px; }

/* 会社情報テーブル */
.info { width:100%; border-collapse:collapse; margin:0 0 10px; }
.info th { width:7.5em; text-align:left; font-weight:400; font-size:12px; letter-spacing:.06em;
           color:#8a8177; padding:14px 14px 14px 0; vertical-align:top;
           border-bottom:1px solid rgba(236,226,210,.1); }
.info td { font-size:14px; line-height:1.9; color:var(--washi); padding:14px 0;
           border-bottom:1px solid rgba(236,226,210,.1); }

/* お問い合わせフォーム */
.form { margin:6px 0 0; }
.field { margin:0 0 20px; }
.field label { display:block; font-size:12.5px; letter-spacing:.04em; color:#b5a99c; margin:0 0 8px; }
.field label .req { color:var(--take); margin-left:6px; font-size:11px; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--gothic); font-size:15px; color:var(--washi);
  background:rgba(236,226,210,.05); border:1px solid rgba(236,226,210,.26);
  border-radius:2px; padding:13px 14px; -webkit-appearance:none; appearance:none; }
.field textarea { min-height:150px; line-height:1.8; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--seiji); background:rgba(63,155,149,.07); }
.field select { background-image:linear-gradient(45deg,transparent 50%,#8a8177 50%),
                linear-gradient(135deg,#8a8177 50%,transparent 50%);
                background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
                background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.agree { display:flex; gap:10px; align-items:flex-start; margin:0 0 24px; font-size:13px;
         line-height:1.8; color:#b5a99c; cursor:pointer; }
.agree input { flex:none; margin-top:5px; accent-color:var(--seiji); }
.submit { font-family:var(--gothic); font-size:14px; padding:15px 34px; cursor:pointer;
          background:var(--washi); color:var(--sumi); border:1px solid var(--washi); border-radius:2px;
          transition:background .12s, color .12s; }
.submit:hover { background:#fff8ec; }
.submit:disabled { background:none; color:#7d7368; border-color:rgba(236,226,210,.2); cursor:not-allowed; }
.formmsg { margin:16px 0 0; font-size:12.5px; line-height:1.9; color:var(--seiji); }

/* ---------- 読み物の目次 ---------- */
.toc { display:flex; flex-direction:column; gap:9px; margin:0 0 42px; padding:18px 20px;
       border:1px solid rgba(236,226,210,.14); border-radius:3px; }
.toc a { font-family:var(--mincho); font-size:13.5px; letter-spacing:.02em; color:#b5a99c;
         text-decoration:none; }
.toc a::before { content:"—"; margin-right:9px; color:#6f665d; }
.toc a:hover { color:var(--washi); }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }