/* ==========================================================
   猫又研究所 — HP兼オンラインショップ
   HomeCame / 2026-08-15  「しろい紙の研究所」（案A）

   ブランドの前提（Notionブリーフ 2026-08-15）:
   ・猫又研究所は妖怪を売る店ではない。
     「猫が猫又になるくらい、長く元気に幸せに生きてほしい」という
     願いから生まれたブランド。
   ・怖くしない。でも、普通のかわいい猫雑貨店にもしない。
     めざすのは「愛着のある、少し変な世界」。
   ・主役は草太さんの切り絵の線。妖怪記号（黒背景・血月・影・提灯）は使わない。
   ・障子ギミックは残す。ただし「暗い部屋に入る」ではなく
     「明るい窓が開いて、猫の世界をのぞいてしまう」ための障子にする。
   ========================================================== */

:root{
  /* 紙 */
  --kami:    #fbf9f4;   /* 白い紙 */
  --kinari:  #f4efe4;   /* 生成り */
  --kinari-2:#ebe4d3;   /* 生成りの影 */
  --shoji:   #f8f4ea;   /* 障子紙 */
  /* 墨 */
  --sumi:    #2a2723;
  --sumi-2:  #4c463f;
  /* 朱 */
  --aka:     #cf3527;
  --aka-deep:#a02318;
  /* 作品から拾う差し色（固定パレットを増やしすぎない） */
  --ai:      #3a5578;   /* 手ぬぐいの藍 */
  --kincha:  #b08a35;   /* 原画の金 */
  --muted:   #97907f;
  --line:    #e2dbc9;

  --mincho: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --serif:  "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  /* 旧変数の互換 */
  --washi:var(--kami); --paper:#ffffff; --cream:var(--kami); --cream-2:var(--kinari-2);
  --red:var(--aka); --red-dark:var(--aka-deep); --red-lift:var(--aka);
  --ink:var(--sumi-2); --ink-2:var(--sumi-2); --kin:var(--kincha); --kin-2:var(--kincha);
  --gothic:var(--serif); --maru:var(--serif);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--serif);font-weight:400;
  background:var(--kami);
  color:var(--sumi-2);
  line-height:2;
  font-size:15px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  line-break:strict;
  word-break:normal;
  /* 日本語は文節の切れ目で折り返す（対応していないブラウザは normal のまま）。
     これがないと「オンラインショッ／プ」のようにカタカナ語の途中で割れる */
  word-break:auto-phrase;
  overflow-wrap:normal;
  text-wrap:pretty;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color .35s ease;}
::selection{background:var(--aka);color:#fff;}

/* カード見出しなど短い行だけ揃える（.en持ちの大見出しには使わない） */
.jcard h3, .good h3, .scard h3, .rcard h3,
.story-x .ttl, .anext .nx b, .read-link b,
.abody h2, .from-article h2,
h2:not(:has(.en)), h1.page:not(:has(.en)){ text-wrap:balance; }
/* 最終行に2〜3字だけ残る「泣き別れ」対策（2026-08-19 全ページ点検）。
   短いかたまりだけ、行の長さをそろえる。
   ※ ブラウザは行数の多いブロック（おおむね6行超）では balance をあきらめるので、
     長い本文はこれまでどおり pretty のまま
   ※ 上の word-break:auto-phrase と併用する。balance だけだと
     「郡上クラフトマル／シェに」のようにカタカナ語の途中で割れることがある */
p, h3, h4, li, dd, dt, figcaption, .cap, .ld, .fd, .note{ text-wrap:balance; }
@media(max-width:700px){ br.pc{display:none;} }

/* ---------- デモ帯 ---------- */
.demo-bar{
  position:relative;z-index:70;
  background:var(--sumi);color:#efe9dc;text-align:center;
  padding:.65em 1em;font-size:.72rem;letter-spacing:.08em;
}
.demo-bar b{color:#f0c25a;font-weight:500;}
.demo-bar a{color:#efe9dc;border-bottom:1px solid rgba(239,233,220,.35);}
.demo-bar a:hover{color:#fff;}

/* ---------- ヘッダー（白・細罫） ---------- */
header.site{
  position:sticky;top:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(18px,4vw,40px);gap:1rem;
  background:rgba(251,249,244,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header.site .logo{display:flex;align-items:center;gap:12px;}
header.site .logo img{height:40px;width:auto;}
header.site .logo .t b{
  display:block;font-family:var(--mincho);font-size:16px;letter-spacing:.24em;
  font-weight:600;color:var(--sumi);line-height:1.3;
}
header.site .logo .t small{
  display:block;font-size:8.5px;letter-spacing:.3em;color:var(--aka);
}
header.site nav{display:flex;gap:clamp(10px,1.6vw,22px);align-items:center;}
header.site nav a{
  font-size:12.5px;letter-spacing:.14em;color:var(--sumi-2);
  padding:.4em .2em;white-space:nowrap;
}
header.site nav a:hover{color:var(--aka);}
header.site nav a.on{color:var(--aka);border-bottom:1.5px solid var(--aka);}
header.site nav a.shopbtn{
  border:1.5px solid var(--aka);color:var(--aka);border-radius:999px;
  padding:.45em 1.2em;letter-spacing:.2em;
}
header.site nav a.shopbtn:hover{background:var(--aka);color:#fff;}
.menu-btn{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;z-index:62;}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--sumi);transition:transform .35s,opacity .3s;}
.menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(max-width:940px){
  header.site nav{
    position:fixed;inset:0;z-index:61;background:rgba(251,249,244,.98);
    flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
    font-size:1rem;letter-spacing:.22em;
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
  }
  header.site nav.open{opacity:1;visibility:visible;}
  header.site nav a{font-size:15px;color:var(--sumi);}
  header.site nav a.on{color:var(--aka);}
  .menu-btn{display:flex;}
}

/* ---------- ショップ開閉のお知らせ帯 ---------- */
.shop-status{
  position:relative;z-index:59;
  text-align:center;padding:.85em 4vw;font-size:.76rem;letter-spacing:.12em;
  background:var(--kinari);color:var(--sumi-2);
  border-bottom:1px solid var(--line);
}
.shop-status.open{color:var(--aka);}
.shop-status.closed{color:var(--muted);}
.shop-status .toggle{
  margin-left:1em;font-size:.66rem;border:1px solid currentColor;background:none;color:inherit;
  padding:.35em 1em;cursor:pointer;font-family:var(--serif);letter-spacing:.12em;border-radius:999px;
  transition:background .3s,color .3s;
}
.shop-status .toggle:hover{background:var(--sumi);border-color:var(--sumi);color:var(--kami);}

/* ==========================================================
   HERO ── 白い障子が、スクロールでひらく
   ひらいた先は「紙の上」。切り絵の猫たちが点在し、
   一匹だけ尻尾が二本。（怖い影・暗闇は使わない）
   ========================================================== */
.hero{height:220vh;position:relative;}
.hero-stick{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--kami);
}
/* 障子（白）。外光が透けるあかるい紙。
   引き分けの扉なので左右50%ずつ、中央でぴったり合わさる（重ねない）。
   影も外へ落とさない（相手の扉に影がかかると重なって見えるため inset のみ） */
.hero .shoji{
  position:absolute;top:0;bottom:0;width:50%;z-index:5;
  background:
    linear-gradient(rgba(190,180,155,.35) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(190,180,155,.35) 1.5px, transparent 1.5px),
    radial-gradient(90% 70% at 50% 45%, #fdfbf6, var(--shoji) 78%);
  background-size:100% 25%, 20% 100%, 100% 100%;
  box-shadow:inset 0 0 34px rgba(90,80,60,.07);
  will-change:transform;
}
.hero .shoji.l{left:0;border-right:8px solid #d9d0ba;}
.hero .shoji.r{right:0;border-left:8px solid #d9d0ba;}
/* 障子のふち（桟の持ち手） */
.hero .shoji.l::after,.hero .shoji.r::after{
  content:"";position:absolute;top:44%;height:12%;width:5px;background:#c9bfa6;border-radius:3px;
}
.hero .shoji.l::after{right:18px;}
.hero .shoji.r::after{left:18px;}
/* ひらいた先の紙の世界 */
.hero .reveal{
  position:absolute;inset:0;z-index:1;opacity:0;
  background:
    radial-gradient(60% 50% at 50% 38%, #fdfcf8, transparent 70%),
    var(--kami);
  display:flex;align-items:center;justify-content:center;
}
.hero .reveal .core{
  position:relative;z-index:2;text-align:center;
  padding:0 6vw;max-width:760px;
}
.hero .reveal .logo-main{width:min(46vw,240px);margin:0 auto 2rem;}
.hero .reveal h1{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(22px,4vw,34px);letter-spacing:.18em;line-height:2;
  color:var(--sumi);
}
.hero .reveal .tag{
  margin:1.4rem auto 0;font-size:clamp(12.5px,1.5vw,14px);color:var(--sumi-2);
  letter-spacing:.08em;line-height:2.4;max-width:34em;
}
.hero .reveal .cta{margin-top:2.2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
/* 点在する猫たち（切り絵。実物が届くまでダミー） */
.neko-yard{position:absolute;inset:0;z-index:1;pointer-events:none;}
.neko-yard .neko{
  position:absolute;pointer-events:auto;
  animation:nekoSway 7s ease-in-out infinite;
}
.neko-yard .neko svg{width:100%;height:auto;color:var(--sumi);}
@keyframes nekoSway{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-6px) rotate(.8deg);}}
.n1{left:7%;top:16%;width:clamp(70px,8.5vw,120px);animation-delay:.6s;}
.n2{right:9%;top:13%;width:clamp(76px,9.5vw,132px);animation-delay:2.1s;}
.n3{left:11%;bottom:14%;width:clamp(86px,11vw,150px);animation-delay:1.2s;}
.n4{right:12%;bottom:18%;width:clamp(66px,8vw,112px);animation-delay:3s;}
.n5{left:44%;bottom:6%;width:clamp(60px,7vw,100px);animation-delay:.2s;}
@media(max-width:700px){
  .n1{left:4%;top:12%;} .n2{right:4%;top:11%;}
  .n3{display:none;} .n4{right:6%;bottom:12%;} .n5{left:8%;bottom:10%;}
}
/* 尻尾が二本の子。みつけると吹き出しが出る */
.neko.futamata{cursor:pointer;}
.neko.futamata .fukidashi{
  position:absolute;left:50%;bottom:104%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1.5px solid var(--sumi);border-radius:12px;
  padding:.5em .9em;font-size:11.5px;letter-spacing:.08em;color:var(--sumi);
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;
}
.neko.futamata .fukidashi::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--sumi);
}
.neko.futamata.found .fukidashi{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.neko.futamata.found svg .tail2{stroke:var(--aka);}
/* 画面が狭いときは、吹き出しを猫の右肩に寄せて画面内に収める */
@media(max-width:700px){
  .neko.futamata .fukidashi{
    left:auto;right:-6px;transform:translateY(6px);
    white-space:normal;width:max-content;max-width:58vw;text-align:left;line-height:1.9;
  }
  .neko.futamata.found .fukidashi{transform:translateY(0);}
  .neko.futamata .fukidashi::after{left:auto;right:24px;transform:none;}
}
/* ひらききったあとの添え書き */
.hero-cap{
  position:absolute;bottom:7%;left:50%;transform:translateX(-50%);z-index:2;
  font-size:12px;letter-spacing:.24em;color:var(--muted);opacity:0;text-align:center;
  padding:0 6vw;
}
/* ひらく前のヒント */
.hero-hint{
  position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-hint .tx{font-size:11.5px;letter-spacing:.34em;color:var(--muted);padding-left:.34em;}
.hero-hint .ya{display:flex;flex-direction:column;align-items:center;gap:1px;}
.hero-hint .ya i{
  font-family:var(--mincho);font-size:12px;color:var(--aka);font-style:normal;
  transform:rotate(90deg);animation:susumu 2.4s ease-in-out infinite;
}
.hero-hint .ya i:nth-child(2){animation-delay:.3s;}
.hero-hint .ya i:nth-child(3){animation-delay:.6s;}
@keyframes susumu{
  0%,100%{opacity:.15;transform:rotate(90deg) translateX(0);}
  30%{opacity:.85;transform:rotate(90deg) translateX(3px);}
  60%{opacity:.15;}
}
@media(max-width:700px){ .hero{height:190vh;} }

/* ==========================================================
   共通
   ========================================================== */
/* ★ 左右の余白は 6vw だが、画面が広いほど余白が増えて本文が痩せていく。
   2000px超のディスプレイでは「猫又研究所とは」の2列が入らず縦積みになっていた。
   余白の伸びを64pxで止めて、広い画面でも本文幅を確保する（2026-08-20） */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,6vw,64px);}
section{padding:110px 0;}
.lbl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.34em;color:var(--aka);margin-bottom:22px;
}
.lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aka);flex:0 0 auto;}
h1.page{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(24px,3.2vw,34px);letter-spacing:.2em;color:var(--sumi);line-height:1.9;
}
h2{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(22px,3vw,32px);letter-spacing:.2em;color:var(--sumi);
  margin-bottom:22px;line-height:1.9;
}
h2 .en{
  display:inline-block;margin-left:24px;
  font-size:10.5px;letter-spacing:.3em;color:var(--muted);font-weight:400;
}
p{margin-bottom:1.2em;max-width:42em;letter-spacing:.06em;}
/* ★ 中央に置いたつもりの段落が左に寄る事故を防ぐ。
   上の max-width:42em で段落の箱が本文幅より狭くなるため、
   margin を auto にしないと「箱の中では中央／画面では左寄り」になる。
   ボタンだけの段落と、中央寄せの入れものの直下の段落を、箱ごと中央に置く */
p:has(> .btn:only-child){margin-left:auto;margin-right:auto;text-align:center;}
[style*="text-align:center"] > p{margin-left:auto;margin-right:auto;}
.muted{color:var(--muted);font-size:.84rem;}
/* スクロール出現（JSが動かないときは隠さない） */
.rv{opacity:1;transform:none;}
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s ease;}
html.js .rv.on{opacity:1;transform:none;}
html.js .rv.d1{transition-delay:.12s;} html.js .rv.d2{transition-delay:.24s;}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;
  border:1.5px solid var(--sumi);border-radius:999px;
  padding:.95em 2.4em;font-size:13px;letter-spacing:.22em;
  color:var(--sumi);background:#fff;cursor:pointer;
  font-family:var(--serif);
  transition:border-color .3s,color .3s,background .3s,transform .2s;
}
.btn:hover{border-color:var(--aka);color:var(--aka);transform:translateY(-1px);}
.btn.red{background:var(--aka);border-color:var(--aka);color:#fff;}
.btn.red:hover{background:var(--aka-deep);border-color:var(--aka-deep);color:#fff;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* ---------- 猫又研究所とは（図解つき） ---------- */
.about-band{background:var(--kami);}
.naritachi{
  display:flex;gap:clamp(30px,6vw,80px);align-items:center;justify-content:center;flex-wrap:wrap;
  margin-top:40px;
}
.naritachi .zu{flex:0 1 380px;min-width:260px;text-align:center;}
.naritachi .zu svg{width:100%;height:auto;color:var(--sumi);}
.naritachi .zu img{width:min(330px,100%);height:auto;display:block;margin:0 auto;}
.naritachi .zu .cap{
  text-align:center;font-size:11px;letter-spacing:.2em;color:var(--muted);margin-top:10px;
}
.naritachi .tx{flex:0 1 420px;min-width:260px;}
.naritachi .tx p{font-size:14.5px;line-height:2.5;}
.naritachi .tx .negai{
  font-family:var(--mincho);font-size:clamp(17px,2.2vw,21px);letter-spacing:.14em;
  color:var(--sumi);line-height:2.2;margin-bottom:1.2em;font-weight:600;
}

/* ---------- お知らせ（NEW / EVENT / 期間限定） ---------- */
.news-band{background:var(--kinari);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.news-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:36px;}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.8rem 1.6rem;
  position:relative;
}
.news-card .tagline{
  display:inline-block;font-size:10.5px;letter-spacing:.3em;color:#fff;background:var(--sumi);
  border-radius:999px;padding:.3em 1em;margin-bottom:1rem;
}
.news-card.limited .tagline{background:var(--aka);}
.news-card h3{font-family:var(--mincho);font-size:16px;letter-spacing:.12em;color:var(--sumi);font-weight:600;margin-bottom:.7rem;line-height:1.9;}
.news-card p{font-size:12.5px;line-height:2.2;margin:0;color:var(--sumi-2);}
.news-card .dt{font-size:11px;letter-spacing:.18em;color:var(--aka);margin-top:.9rem;}

/* ---------- 商品カード（図録） ---------- */
.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:34px 26px;}
.good{
  display:block;color:inherit;
  transition:transform .3s ease;
}
.good:hover{transform:translateY(-4px);}
.good .cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.good .cap .no{font-size:10.5px;letter-spacing:.22em;color:var(--aka);}
.good .cap .cat{font-size:10px;letter-spacing:.16em;color:var(--muted);}
/* カードの中身は span で書かれるので、必ず block に立てる
   （inline のままだと aspect-ratio が効かず、写真がはみ出す） */
.good .ph,.good h3,.good .pr{display:block;}
.good .ph{
  aspect-ratio:1/1;overflow:hidden;border-radius:10px;
  border:1px solid var(--line);background:#fff;
}
.good .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.good:hover .ph img{transform:scale(1.03);}
.good .ph.nophoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.7em;background:var(--kinari);}
.good .ph.nophoto img{width:auto;height:auto;max-width:32%;max-height:38%;object-fit:contain;opacity:.22;}
.good .ph.nophoto span{font-size:10.5px;color:var(--muted);letter-spacing:.14em;}
.good h3{
  font-family:var(--mincho);font-weight:600;font-size:14.5px;letter-spacing:.08em;
  color:var(--sumi);line-height:1.8;margin:12px 0 4px;
}
.good .pr{font-size:13.5px;color:var(--aka);letter-spacing:.08em;}
.good .pr small{color:var(--muted);margin-left:.5em;font-size:.78em;}
.good dl.spec{display:none;}

/* ---------- 猫たち / WORLD ---------- */
.world-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.world{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:36px;
}
.world figure{margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--kinari);}
.world figure img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease;}
.world figure:hover img{transform:scale(1.04);}
.world-note{font-size:11.5px;color:var(--muted);letter-spacing:.1em;margin-top:18px;}
/* スマホでは minmax(200px) だと2列に足りず1列になってしまうので、2列を明示する */
@media(max-width:560px){
  .world{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px;}
}

/* ---------- 一覧行（お取り扱い・出店） ---------- */
.list-rows{border-top:1px solid var(--line);margin-top:26px;}
.list-rows .row{
  display:grid;grid-template-columns:9.5em 1fr auto;gap:1.4em;align-items:baseline;
  padding:1.2em .2em;border-bottom:1px solid var(--line);font-size:13.5px;letter-spacing:.06em;
}
.list-rows .when{font-size:11px;color:var(--aka);letter-spacing:.2em;}
.list-rows .where{font-size:12px;color:var(--muted);}
@media(max-width:640px){.list-rows .row{grid-template-columns:1fr;gap:.25em;}}

/* ---------- 注意書き ---------- */
.box{
  background:#fff;border:1px dashed var(--aka);border-radius:10px;
  padding:1.6rem 1.8rem;margin:1.8rem 0;font-size:13px;letter-spacing:.06em;line-height:2.2;
}
.box > b{display:block;margin-bottom:.5em;color:var(--aka);font-weight:600;letter-spacing:.14em;}
.box p b{display:inline;color:var(--aka);font-weight:600;}
.box a{color:var(--aka);border-bottom:1px solid rgba(207,53,39,.35);}
.box p{margin-bottom:.5em;max-width:none;}
.box p:last-child{margin-bottom:0;}

/* ---------- フッター（猫の行進つき） ---------- */
.cat-parade{
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,48px);
  padding:0 6vw 0;transform:translateY(1px);
}
.cat-parade svg{width:clamp(44px,6vw,72px);height:auto;color:var(--sumi);}
.cat-parade .p2 svg{transform:scaleX(-1);}
footer.site{
  background:var(--kinari);color:var(--sumi-2);
  border-top:1.5px solid var(--sumi);
  padding:70px clamp(18px,6vw,64px) 40px;
}
footer.site .inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
footer.site .brand{max-width:340px;}
footer.site .brand .nm{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;}
footer.site .brand .nm b{font-family:var(--mincho);font-size:19px;letter-spacing:.24em;color:var(--sumi);font-weight:600;}
footer.site .brand .nm small{font-size:8.5px;letter-spacing:.3em;color:var(--aka);}
footer.site .fd{font-size:12.5px;line-height:2.3;letter-spacing:.06em;color:var(--sumi-2);margin:0;}
footer.site .flogo{display:none;}
footer.site .navs{display:flex;gap:clamp(40px,6vw,90px);flex-wrap:wrap;}
footer.site h4{font-size:10.5px;letter-spacing:.34em;color:var(--muted);margin-bottom:20px;font-weight:400;}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
footer.site a{font-size:12.5px;letter-spacing:.1em;color:var(--sumi-2);}
footer.site a:hover{color:var(--aka);}
footer.site .copy{
  max-width:1120px;margin:60px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px;
  font-size:10.5px;letter-spacing:.16em;color:var(--muted);
}
@media(max-width:760px){footer.site .inner{flex-direction:column;gap:40px;}}

/* ---------- トースト ---------- */
#toast{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(18px);
  background:var(--sumi);color:var(--kami);padding:.95em 1.9em;border-radius:999px;
  font-size:12px;letter-spacing:.14em;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;z-index:95;max-width:90vw;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html.js .rv{opacity:1;transform:none;}
}

/* ==========================================================
   読みもの
   ========================================================== */
.jr-hero{
  position:relative;overflow:hidden;
  padding:90px 0 70px;
  background:var(--kinari);
  border-bottom:1px solid var(--line);
}
.jr-hero::before{
  content:"";position:absolute;right:8vw;top:-40px;z-index:0;
  width:min(22vw,180px);aspect-ratio:1/1;border-radius:50%;
  background:var(--aka);opacity:.12;
}
.jr-hero .wrap{position:relative;z-index:1;}
.jr-hero .ld{margin-top:1.6rem;font-size:13.5px;color:var(--sumi-2);max-width:none;line-height:2.5;}

.series{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.scard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:2rem 1.8rem;}
.scard .em{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-bottom:1.2rem;
  border:1.5px solid var(--aka);color:var(--aka);border-radius:50%;
  font-family:var(--mincho);font-size:14px;
}
.scard h3{font-family:var(--mincho);font-weight:600;font-size:16px;letter-spacing:.12em;color:var(--sumi);margin-bottom:.8rem;}
.scard p{font-size:12.5px;color:var(--sumi-2);margin:0;line-height:2.2;}
.scard .cnt{margin-top:1.2rem;font-size:10.5px;letter-spacing:.26em;color:var(--aka);}

.jlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:44px 30px;}
.jcard{display:block;color:inherit;transition:transform .3s ease;}
.jcard:hover{transform:translateY(-4px);}
.jcard .ph{
  aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--kinari);
}
.jcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.jcard:hover .ph img{transform:scale(1.03);}
.jcard .ph.nophoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5em;}
.jcard .ph.nophoto img{width:auto;height:auto;max-width:22%;max-height:34%;object-fit:contain;opacity:.2;}
.jcard .ph.nophoto span{font-size:10.5px;color:var(--muted);letter-spacing:.14em;}
.jcard .meta{display:flex;flex-wrap:wrap;gap:.3em 1.3em;align-items:baseline;margin:16px 0 .5rem;font-size:10.5px;letter-spacing:.2em;}
.jcard .meta .ser{color:var(--aka);}
.jcard .meta .dt{color:var(--muted);}
.jcard h3{font-family:var(--mincho);font-weight:600;font-size:16.5px;letter-spacing:.1em;line-height:1.9;color:var(--sumi);margin-bottom:.7rem;}
.jcard .ld{font-size:12.5px;color:var(--sumi-2);margin:0 0 .8rem;line-height:2.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.jcard .by{font-size:10.5px;color:var(--muted);margin:0;letter-spacing:.1em;}
.jlist .jcard.big{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;gap:2.4rem;align-items:center;}
.jlist .jcard.big .ph{aspect-ratio:4/3;}
.jlist .jcard.big h3{font-size:clamp(18px,2.2vw,23px);}
.jlist .jcard.big .ld{-webkit-line-clamp:5;}
@media(max-width:760px){
  .jlist .jcard.big{grid-template-columns:1fr;gap:0;}
  .jlist .jcard.big .ph{aspect-ratio:16/10;}
}

/* ---------- 記事本文 ---------- */
.article{padding:60px 6vw 110px;max-width:1120px;margin:0 auto;}
.article .crumb{font-size:10.5px;letter-spacing:.18em;color:var(--muted);margin-bottom:2.6rem;max-width:none;}
.article .crumb a:hover{color:var(--aka);}
.ahead{max-width:34em;margin:0 auto 3rem;text-align:center;}
.ahead .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:.3em 1.5em;font-size:10.5px;letter-spacing:.24em;margin-bottom:1.4rem;max-width:none;}
.ahead .meta .ser{color:var(--aka);}
.ahead .meta .dt{color:var(--muted);}
.ahead h1.page{margin-bottom:1.6rem;}
.ahead .lead{font-size:13.5px;color:var(--sumi-2);text-align:left;margin:0 auto 1.4rem;line-height:2.5;}
.ahead .by{font-size:10.5px;color:var(--muted);margin:0;max-width:none;letter-spacing:.14em;}
.ahero{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:4rem;
  background:var(--kinari);
}
.ahero img{width:100%;height:100%;object-fit:cover;}
.ahero.nophoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8em;}
.ahero.nophoto img{width:auto;height:auto;max-width:11%;max-height:30%;object-fit:contain;opacity:.2;}
.ahero.nophoto span{font-size:10.5px;color:var(--muted);letter-spacing:.16em;}
.abody{max-width:34em;margin:0 auto;line-height:2.5;}
.abody p{font-size:14px;margin-bottom:2em;max-width:none;letter-spacing:.06em;}
.abody h2{
  font-size:17px;letter-spacing:.14em;line-height:1.9;margin:3.6rem 0 1.6rem;
  padding-left:.9em;border-left:3px solid var(--aka);
}
.abody figure{margin:3rem 0;}
.abody figure img{border:1px solid var(--line);border-radius:10px;width:100%;}
.abody figcaption{font-size:11px;color:var(--muted);margin-top:.9em;line-height:2;letter-spacing:.06em;}
.abody blockquote{
  margin:3rem 0;padding:1.8rem 2rem;background:#fff;border-radius:10px;
  border-left:3px solid var(--aka);font-size:14px;line-height:2.4;
}
.abody blockquote cite{display:block;margin-top:1em;font-size:10.5px;color:var(--muted);font-style:normal;letter-spacing:.14em;}
.jnote{
  margin:2.6rem 0;padding:1.5rem 1.7rem;border:1.5px dashed var(--kincha);border-radius:10px;
  background:#fffdf4;font-size:12.5px;line-height:2.2;letter-spacing:.05em;
}
.jnote b{display:block;color:var(--kincha);font-size:10.5px;letter-spacing:.22em;margin-bottom:.6em;font-weight:600;}
.jnote p{margin:0;font-size:12.5px;color:var(--sumi-2);max-width:none;}
.article .credit{
  max-width:34em;margin:3.6rem auto 0;padding-top:1.8rem;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted);letter-spacing:.14em;
}
.from-article{margin-top:5rem;padding:3rem 2.6rem;background:var(--kinari);border-radius:14px;}
.from-article h2{font-size:19px;margin-bottom:1.8rem;}
.from-article .goods{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px 20px;}
@media(max-width:640px){.from-article{padding:2rem 1.4rem;}}
.anext{margin-top:3.6rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;}
.anext .nx{
  flex:1 1 320px;border:1px solid var(--line);border-radius:10px;padding:1.5rem 1.7rem;background:#fff;
  transition:border-color .3s;
}
.anext a.nx:hover{border-color:var(--aka);}
.anext .nx span{display:block;font-size:10.5px;letter-spacing:.26em;color:var(--aka);margin-bottom:.5em;}
.anext .nx b{font-family:var(--mincho);font-size:14.5px;letter-spacing:.1em;line-height:1.9;font-weight:600;color:var(--sumi);}
.anext .nx.none{border-style:dashed;}
.anext .nx.none span,.anext .nx.none b{color:var(--muted);}
.article .other{padding:6rem 0 0;}
.article .other h2{font-size:19px;}

/* ==========================================================
   商品ページ × 読みもの
   ========================================================== */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start;padding-top:1.6rem;}
.detail .gallery .main{
  aspect-ratio:1/1;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#fff;
}
.detail .gallery .main img{width:100%;height:100%;object-fit:cover;}
.detail .gallery .main.nophoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1em;background:var(--kinari);}
.detail .gallery .main.nophoto img{width:auto;height:auto;max-width:28%;max-height:34%;object-fit:contain;opacity:.2;}
.detail .gallery .main.nophoto span{font-size:11px;color:var(--muted);letter-spacing:.16em;}
.detail .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.detail .thumbs button{
  width:62px;aspect-ratio:1/1;border:1px solid var(--line);border-radius:8px;
  background:none;padding:0;cursor:pointer;overflow:hidden;transition:border-color .3s;
}
.detail .thumbs button[aria-current="true"]{border-color:var(--aka);}
.detail .thumbs img{width:100%;height:100%;object-fit:cover;}
.detail .price{font-size:23px;color:var(--aka);margin:1.2rem 0 .2rem;letter-spacing:.08em;}
.detail .tax{font-size:10.5px;color:var(--muted);letter-spacing:.14em;}
.buy-box{border:1px solid var(--line);border-radius:12px;background:#fff;padding:1.8rem;margin-top:2rem;}
.buy-box .note{font-size:11px;color:var(--muted);margin:1.2rem 0 0;line-height:2.1;letter-spacing:.05em;}
.detail .spec{border-top:1px solid var(--line);margin-top:2.4rem;font-size:12.5px;}
.detail .spec > div{display:grid;grid-template-columns:7em 1fr;gap:1.3em;padding:.95em .2em;border-bottom:1px solid var(--line);}
.detail .spec dt{color:var(--muted);letter-spacing:.1em;}
.detail .spec dd{color:var(--sumi-2);}
@media(max-width:820px){.detail{grid-template-columns:1fr;gap:2.4rem;}}
@media(max-width:480px){
  .detail .spec > div{grid-template-columns:1fr;gap:.2em;}
  .detail .spec dt{font-size:10.5px;}
}

.read-link{
  display:grid;grid-template-columns:96px 1fr;gap:1.3rem;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:1.1rem;background:#fff;margin-top:1.8rem;
  transition:border-color .3s;
}
.read-link:hover{border-color:var(--aka);}
.read-link .ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--kinari);}
.read-link .ph img{width:100%;height:100%;object-fit:cover;}
.read-link .ph.np{display:flex;align-items:center;justify-content:center;}
.read-link .ph.np img{width:auto;height:auto;max-width:44%;max-height:56%;object-fit:contain;opacity:.25;}
.read-link .tx{display:block;min-width:0;}
.read-link small{display:block;font-size:10px;letter-spacing:.26em;color:var(--aka);margin-bottom:.5em;}
.read-link b{display:block;font-family:var(--mincho);font-size:13.5px;letter-spacing:.08em;line-height:1.9;font-weight:600;color:var(--sumi);}
.read-link em{display:block;margin-top:.5em;font-style:normal;font-size:10px;letter-spacing:.22em;color:var(--muted);}
.read-link:hover em{color:var(--aka);}
@media(max-width:420px){.read-link{grid-template-columns:72px 1fr;gap:1rem;}}

#story{padding-top:7rem;}
.story-x{
  display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start;
  background:var(--kinari);border-radius:14px;padding:2.6rem;
}
.story-x .ph{display:block;overflow:hidden;border-radius:10px;aspect-ratio:4/3;position:sticky;top:100px;
  background:#fff;border:1px solid var(--line);}
.story-x .ph img{width:100%;height:100%;object-fit:cover;}
.story-x .ph .np{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6em;}
.story-x .ph .np img{width:auto;height:auto;max-width:27%;max-height:34%;object-fit:contain;opacity:.2;}
.story-x .ph .np span{font-size:10.5px;color:var(--muted);letter-spacing:.14em;}
.story-x .tx{min-width:0;}
.story-x .meta{display:flex;flex-wrap:wrap;gap:.3em 1.3em;align-items:baseline;font-size:10.5px;letter-spacing:.2em;margin-bottom:.9rem;max-width:none;}
.story-x .meta .ser{color:var(--aka);}
.story-x .meta .dt{color:var(--muted);}
.story-x .ttl{font-family:var(--mincho);font-size:clamp(16px,2vw,20px);line-height:1.9;letter-spacing:.1em;margin-bottom:1.6rem;font-weight:600;color:var(--sumi);}
.story-x .ttl a:hover{color:var(--aka);}
.story-x .bd{position:relative;line-height:2.4;padding-bottom:1.8rem;}
.story-x .bd p{font-size:13px;margin-bottom:1.6em;max-width:none;}
.story-x .bd h3{font-family:var(--mincho);font-size:14.5px;letter-spacing:.12em;line-height:1.9;margin:2.2rem 0 1.1rem;padding-left:.9em;border-left:3px solid var(--aka);font-weight:600;color:var(--sumi);}
.story-x .bd::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;pointer-events:none;
  background:linear-gradient(to bottom, rgba(244,239,228,0) 0%, var(--kinari) 88%);
}
.story-x .act{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.4rem;}
.story-x .act .btn{padding:.85em 1.8em;font-size:12px;letter-spacing:.2em;}
.story-x .by{font-size:10.5px;color:var(--muted);margin:1.6rem 0 0;max-width:none;letter-spacing:.12em;}
@media(max-width:860px){
  .story-x{grid-template-columns:1fr;gap:1.8rem;padding:1.6rem;}
  .story-x .ph{position:static;aspect-ratio:16/10;}
}

/* ---------- 記事ページの下部バー ---------- */
#buyBar{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(160%);
  z-index:75;display:flex;align-items:center;gap:1.2rem;
  background:#fff;border:1.5px solid var(--sumi);border-radius:999px;
  padding:.55rem .65rem .55rem .55rem;
  max-width:min(92vw,540px);
  box-shadow:0 10px 30px rgba(42,39,35,.12);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s;opacity:0;
}
#buyBar.on{transform:translateX(-50%) translateY(0);opacity:1;}
#buyBar .it{display:flex;align-items:center;gap:.9rem;color:var(--sumi);min-width:0;}
#buyBar img{width:42px;height:42px;border-radius:999px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line);}
#buyBar img.np{object-fit:contain;background:var(--kinari);padding:5px;}
#buyBar .tx{min-width:0;}
#buyBar b{display:block;font-size:12px;letter-spacing:.06em;line-height:1.5;font-weight:600;color:var(--sumi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14em;}
#buyBar small{display:block;font-size:11px;color:var(--aka);letter-spacing:.08em;}
#buyBar .btn{padding:.8em 1.6em;font-size:11.5px;letter-spacing:.2em;flex:0 0 auto;}
@media(max-width:560px){
  #buyBar{left:12px;right:12px;bottom:12px;transform:translateY(160%);max-width:none;justify-content:space-between;}
  #buyBar.on{transform:translateY(0);}
  #buyBar b{max-width:8em;}
  #buyBar .btn{padding:.8em 1.1em;}
}
@media (prefers-reduced-motion: reduce){ #buyBar{transition:none;} }

/* 下層ページの本文開始位置 */
.page-top{padding-top:70px;}

/* ==========================================================
   草太さんの切り絵・ロゴ（本物の素材／2026-08-19）
   ・ロゴと鬼火はベクター（logo.svg / logo_mark.svg / onibi.svg）
   ・猫は切り絵の実作品（透過PNG）。色も形もそのまま使う
   ========================================================== */


/* 研究所の猫たち：切り絵そのもの（写真ではないので、切り抜きのまま置く） */
.world figure.kirie{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;background:var(--kami);padding:11%;
}
.world figure.kirie img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  aspect-ratio:auto;object-fit:contain;
}
.world figure.kirie:hover img{transform:scale(1.04);}

/* 鬼火。ロゴの一部を切り出したもの。押しつけないよう、薄く・少なく */
.onibi{
  display:block;width:auto;color:inherit;
  pointer-events:none;user-select:none;
}
.about-band{position:relative;overflow:hidden;}
.about-band .onibi-mizu{
  position:absolute;right:-2%;top:8%;height:min(56%,340px);width:auto;
  opacity:.05;pointer-events:none;
}
@media(max-width:820px){
  .about-band .onibi-mizu{height:200px;right:-6%;top:2%;opacity:.04;}
}

/* フッターの猫の行進に、鬼火をふたつ添える */
.cat-parade img.onibi{width:clamp(18px,2.4vw,28px);opacity:.5;align-self:center;}

/* 行進する猫は本物の切り絵。縦横の比がちがうので、高さで揃える。
   ※ 実作品なので左右反転はしない（改変にあたるため） */
.cat-parade .pk{display:flex;align-items:flex-end;}
.cat-parade .pk img{width:auto;display:block;}
.cat-parade .pk.tachi img{height:clamp(52px,7vw,86px);}
.cat-parade .pk.kao img{height:clamp(34px,4.6vw,56px);}

/* ヒーローの四方に浮かぶ鬼火（ロゴから切り出したもの）。
   猫と同じ幅では大きすぎるので、位置ごとに細く指定しなおす */
.neko-yard .neko.hi img{width:100%;height:auto;display:block;}
.neko-yard .n1.hi{width:clamp(38px,4.4vw,62px);opacity:.85;}
.neko-yard .n2.hi{width:clamp(42px,5vw,70px);opacity:.7;}
.neko-yard .n3.hi{width:clamp(46px,5.4vw,78px);opacity:.9;}
.neko-yard .n4.hi{width:clamp(34px,4vw,56px);opacity:.62;}
@media(max-width:700px){
  .neko-yard .n3.hi{display:block;}   /* 細いので、スマホでも4つとも出す */
}
.naritachi .zu .cap small{
  display:block;margin-top:.6em;font-size:9.5px;letter-spacing:.08em;opacity:.75;
}

/* 読みもの扉の鬼火（ABOUTと同じ扱い。赤い丸のとなりに置く） */
.jr-hero{position:relative;overflow:hidden;}
.jr-hero .onibi-mizu{
  position:absolute;right:calc(8vw + min(20vw,150px));top:-6px;
  height:min(150px,26vw);width:auto;opacity:.08;pointer-events:none;z-index:0;
}
@media(max-width:700px){ .jr-hero .onibi-mizu{right:auto;left:6vw;height:110px;opacity:.07;} }

/* グッズ一覧の締めに置く切り絵 */
.shime-neko{margin:70px auto 0;text-align:center;max-width:430px;}
.shime-neko img{width:min(190px,52%);height:auto;display:block;margin:0 auto;}
.shime-neko figcaption{
  margin-top:1.2rem;font-family:var(--mincho);font-size:12px;
  letter-spacing:.18em;color:var(--muted);
}

/* 文節ごとに包んだ文字列は、かたまりの途中で折り返さない。
   （CSSでは文節を判定できないため、HTML側で span に分けている） */
.negai > span, .hero-hint .tx > span{ display:inline-block; }

/* 商品名は「美濃和紙郡上八幡フレークシール」のように文節の切れ目が無い長い語が多い。
   auto-phrase だと切れ目を見つけられず greedy に詰めて最後の1字が落ちるので、
   ここだけ auto-phrase を外し、text-wrap:balance に行分けを任せる */
.good h3{ word-break:normal; }

/* ヒーローに散らす金の星（ブックカバーの隠しレイヤーから切り出したもの）。
   鬼火より控えめに、光の粒くらいの大きさで置く */
.neko-yard .neko.hoshi img{width:100%;height:auto;display:block;}
.neko-yard .s1{left:22%;top:9%;width:clamp(26px,3vw,44px);opacity:.75;animation-delay:1.6s;}
.neko-yard .s2{right:24%;bottom:11%;width:clamp(18px,2.2vw,32px);opacity:.6;animation-delay:2.6s;}
@media(max-width:700px){
  .neko-yard .s1{left:12%;top:6%;} .neko-yard .s2{right:12%;bottom:8%;}
}

/* 見出しの印を、丸い猫の顔に（赤い丸から差し替え） */
.lbl::before{
  content:"";width:14px;height:15px;border-radius:0;background:none;
  background-image:url(img/neko_face.svg);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  flex:0 0 auto;
}

/* ---------- フッターの地に、薄く猫を散らす（2026-08-20） ----------
   ブックカバーの隠しレイヤー（レイヤー1）から切り出した猫と星。
   もともと一緒に散らされていた組み合わせなので、並べると作者の意図に近い。
   ・1本のパスの真っ黒なシルエットなので、薄くしても形がくずれない
     （立ち猫・箱の猫・顔は白い抜き線と色が入っていて、薄くすると濁る）
   ・文字の可読性を落とさないよう、不透明度は .06。読む場所は避けて置く */
footer.site{position:relative;overflow:hidden;}
footer.site .inner, footer.site .copy{position:relative;z-index:1;}
footer.site::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.06;
  background-repeat:no-repeat;
  background-image:
    url(img/neko_maru.svg), url(img/neko_marumaru.svg),
    url(img/neko_marumaru.svg), url(img/neko_maru.svg),
    url(img/hoshi_s.svg), url(img/hoshi.svg);
  background-size:210px auto,132px auto,158px auto,248px auto,42px auto,62px auto;
  background-position:2% 82%, 26% 8%, 60% 80%, 88% 12%, 44% 26%, 72% 58%;
}
@media(max-width:760px){
  /* スマホはフッターが縦に伸びるので、数を減らして間隔をとる */
  footer.site::before{
    opacity:.05;
    background-image:url(img/neko_maru.svg), url(img/neko_marumaru.svg), url(img/hoshi.svg);
    background-size:150px auto,110px auto,46px auto;
    background-position:88% 6%, 6% 62%, 70% 34%;
  }
}

/* ---------- 薄く敷く猫（2026-08-20 追加分） ----------
   フッターと同じ考え方で、余白の広いところにだけ静かに置く。
   使うのは単色1パスのベクター（薄くしても形がくずれないため）。
   本文を読む場所（商品ページ・記事本文）には入れない */

/* 1) 「オンラインショップへ」の帯。中央寄せで左右があいている */
#shop-guide{position:relative;overflow:hidden;}
#shop-guide .wrap{position:relative;z-index:1;}
#shop-guide::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-repeat:no-repeat;
  background-image:url(img/neko_maru.svg),url(img/neko_marumaru.svg),url(img/hoshi_s.svg);
  background-size:230px auto,150px auto,40px auto;
  background-position:4% 74%, 93% 20%, 84% 76%;
}
@media(max-width:760px){
  #shop-guide::before{
    background-image:url(img/neko_marumaru.svg);
    background-size:120px auto;background-position:92% 88%;opacity:.05;
  }
}

/* 2) 読みものページの締め（グッズへの導線） */
.band{position:relative;overflow:hidden;}
.band .wrap{position:relative;z-index:1;}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.055;
  background:url(img/neko_maru.svg) 6% 70%/220px auto no-repeat;
}
@media(max-width:760px){ .band::before{background-size:140px auto;background-position:92% 88%;} }

/* ---------- ヒーロー：画面が低いときにロゴが切れないように（2026-08-20） ----------
   `.hero-stick` は 100vh・overflow:hidden なので、中身が画面より高いと
   上下が同じだけ切られる＝いちばん上のロゴから消える。
   ノートPCの横長画面（高さ550px前後）で実際に起きていた。
   ・スクロール中は sticky のヘッダーが上に重なるので、そのぶんの余白も確保する
   ・画面が低いほど、ロゴ・見出し・余白を段階的に詰める */
.hero .reveal{
  padding-top:76px;              /* 追従してくるヘッダー（実測69px）より必ず大きく取る */
  box-sizing:border-box;
}
@media(max-height:760px){
  .hero .reveal .logo-main{width:min(34vw,186px);margin-bottom:1.4rem;}
  .hero .reveal h1{font-size:clamp(20px,3.2vw,29px);line-height:1.9;}
  .hero .reveal .tag{margin-top:1.1rem;line-height:2.1;}
  .hero .reveal .cta{margin-top:1.5rem;}
}
@media(max-height:640px){
  .hero .reveal .logo-main{width:min(27vw,138px);margin-bottom:1rem;}
  .hero .reveal h1{font-size:clamp(18px,2.6vw,24px);line-height:1.8;}
  .hero .reveal .tag{margin-top:.8rem;font-size:12px;line-height:1.95;}
  .hero .reveal .cta{margin-top:1.1rem;}
  .hero .reveal .cta .btn{padding:.75em 1.6em;font-size:11.5px;}
}
@media(max-height:540px){
  .hero .reveal .logo-main{width:min(22vw,108px);margin-bottom:.7rem;}
  .hero .reveal h1{font-size:clamp(16px,2.2vw,20px);line-height:1.7;}
  .hero .reveal .tag{margin-top:.6rem;font-size:11px;line-height:1.8;}
  .hero .reveal .cta{margin-top:.9rem;}
}
/* スマホを横に倒したときなど、極端に低い画面 */
@media(max-height:440px){
  .hero .reveal .logo-main{width:min(18vw,86px);margin-bottom:.5rem;}
  .hero .reveal h1{font-size:clamp(15px,2vw,18px);line-height:1.6;}
  .hero .reveal .tag{margin-top:.45rem;font-size:10.5px;line-height:1.7;}
  .hero .reveal .cta{margin-top:.7rem;}
  .hero .reveal .cta .btn{padding:.6em 1.3em;font-size:11px;}
}

/* hidden属性の保険（display指定を持つセクションでも確実に消す） */
[hidden]{display:none !important;}


/* ---------- お問い合わせフォーム（2026-08-22） ---------- */
.cform{max-width:560px;margin-top:3rem;}
.cform .f{margin-bottom:1.6rem;}
.cform label{display:block;font-size:12.5px;letter-spacing:.12em;color:var(--sumi);margin-bottom:.5em;font-weight:600;}
.cform label em{font-style:normal;font-size:10px;color:#fff;background:var(--aka);border-radius:99px;padding:.1em .6em;margin-left:.5em;letter-spacing:.1em;vertical-align:middle;}
.cform input,.cform select,.cform textarea{
  width:100%;border:1.5px solid var(--line);border-radius:8px;background:#fff;
  padding:.8em 1em;font:inherit;font-size:15px;letter-spacing:.06em;color:var(--sumi);
}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--sumi);}
.cform textarea{resize:vertical;line-height:1.9;}
.cform small{display:block;font-size:11px;color:var(--muted);margin-top:.5em;letter-spacing:.08em;}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cform .cnote{font-size:11.5px;color:var(--muted);letter-spacing:.08em;line-height:2;}
.cform .cerr{color:var(--aka);font-size:12.5px;font-weight:600;min-height:1.4em;margin:.4rem 0 0;}
.cform .cbtn{margin-top:1.4rem;}
.cform button[disabled]{opacity:.5;cursor:wait;}
.cdone{max-width:560px;margin-top:3rem;padding:2.6rem 1.6rem;border:1.5px solid var(--sumi);border-radius:14px;text-align:center;background:#fff;}
.cdone img{width:90px;height:auto;margin:0 auto 1.2rem;display:block;}
.cdone h2{font-size:clamp(18px,2.4vw,22px);margin-bottom:1rem;}
.cdone p{font-size:13.5px;line-height:2.2;margin:0 auto;}

/* ==========================================================
   カート（お買いもの）
   紙と墨の調子に合わせ、派手にしない。
   買いものの最中に迷わせないことだけを優先する
   ========================================================== */
.cart-btn{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  z-index:96;display:flex;align-items:center;gap:.5em;
  border:1.5px solid var(--sumi);border-radius:999px;
  background:var(--kami);color:var(--sumi);cursor:pointer;
  padding:.7em 1.15em;font-family:var(--serif);font-size:13px;
  box-shadow:0 6px 22px rgba(42,39,35,.16);
  transition:border-color .3s,color .3s,transform .2s,box-shadow .3s;
}
.cart-btn:hover{border-color:var(--aka);color:var(--aka);transform:translateY(-2px);box-shadow:0 9px 26px rgba(42,39,35,.22);}
.cart-btn .ico{font-size:16px;line-height:1;}
.cart-btn .n{
  min-width:1.5em;height:1.5em;line-height:1.5em;text-align:center;
  background:var(--aka);color:#fff;border-radius:999px;font-size:11px;letter-spacing:0;
}

.cart-wrap{position:fixed;inset:0;z-index:120;}
.cart-bg{
  position:absolute;inset:0;background:rgba(42,39,35,.42);
  opacity:0;transition:opacity .3s;
}
.cart-wrap.on .cart-bg{opacity:1;}
.cart-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);
  background:var(--kami);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.cart-wrap.on .cart-panel{transform:none;}

.cart-head{position:relative;padding:26px clamp(20px,5vw,32px) 16px;border-bottom:1px solid var(--line);}
.cart-head .lbl{font-size:10px;letter-spacing:.3em;color:var(--muted);margin:0;}
.cart-head h2{font-family:var(--mincho);font-size:21px;letter-spacing:.14em;margin:.2em 0 0;}
.cart-x{
  position:absolute;top:20px;right:clamp(14px,4vw,24px);
  width:38px;height:38px;border:none;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--sumi-2);border-radius:50%;
}
.cart-x:hover{background:var(--kinari);color:var(--aka);}

.cart-body{flex:1;overflow-y:auto;padding:6px clamp(20px,5vw,32px) 10px;}
.cart-empty{color:var(--muted);font-size:13px;text-align:center;padding:44px 0;}

.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line);}
.cart-row .ph{display:block;width:64px;height:64px;border-radius:3px;overflow:hidden;background:var(--kinari);}
.cart-row .ph img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-row .ph .np{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:.35;}
.cart-row .ph .np img{width:26px;height:26px;object-fit:contain;}
.cart-row .tx{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cart-row .nm{font-family:var(--serif);font-size:13.5px;color:var(--sumi);text-decoration:none;line-height:1.5;}
.cart-row .nm:hover{color:var(--aka);}
.cart-row .pr{font-size:11.5px;color:var(--muted);}
.cart-row .qty{display:flex;align-items:center;gap:2px;margin-top:2px;}
.cart-row .qty b{min-width:2.2em;text-align:center;font-size:13px;font-weight:400;}
.cart-row .q{
  width:27px;height:27px;border:1px solid var(--line);background:#fff;border-radius:50%;
  cursor:pointer;font-size:13px;color:var(--sumi-2);line-height:1;
}
.cart-row .q:hover{border-color:var(--aka);color:var(--aka);}
.cart-row .rm{
  border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:11px;margin-left:.7em;text-decoration:underline;text-underline-offset:3px;font-family:var(--serif);
}
.cart-row .rm:hover{color:var(--aka);}
.cart-row .sum{font-size:13px;white-space:nowrap;padding-top:1px;}

.cart-ng{margin:18px 0 4px;padding:14px 16px;background:var(--kinari);border-radius:4px;}
.cart-ng p{font-size:12px;color:var(--sumi-2);margin:0 0 .5em;}
.cart-ng ul{margin:0 0 .9em;padding-left:1.2em;font-size:12px;color:var(--sumi-2);}
.btn.sm{padding:.6em 1.5em;font-size:11px;}
.btn.wide{display:block;width:100%;text-align:center;}

.cart-foot{padding:18px clamp(20px,5vw,32px) 24px;border-top:1px solid var(--line);background:var(--shoji);}
.cart-foot:empty{display:none;}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5em;}
.cart-total span{font-size:12px;letter-spacing:.14em;color:var(--sumi-2);}
.cart-total b{font-family:var(--mincho);font-size:20px;font-weight:400;}
.cart-note{font-size:11px;color:var(--muted);margin:0 0 1.1em;line-height:1.7;}
.cart-safe{font-size:10.5px;color:var(--muted);text-align:center;margin:.9em 0 0;letter-spacing:.06em;}

@media (max-width:520px){
  .cart-panel{width:100%;}
  .cart-row{grid-template-columns:54px 1fr auto;gap:11px;}
  .cart-row .ph{width:54px;height:54px;}
}

/* ---------- 商品ページ：種類（色ちがい）の選択 ---------- */
.vsel{margin-top:1.6rem;}
.vsel-t{font-size:11px;letter-spacing:.22em;color:var(--muted);margin:0 0 .6em;}
.vsel-opts{display:flex;flex-wrap:wrap;gap:.55rem;}
.vopt{position:relative;cursor:pointer;}
.vopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.vopt span{
  display:inline-flex;align-items:center;gap:.45em;
  border:1.5px solid var(--line-2,#d3c9b2);border-radius:999px;background:#fff;
  padding:.55em 1.2em;font-size:13px;letter-spacing:.12em;color:var(--sumi);
  transition:border-color .25s,background .25s,color .25s;
}
.vopt span small{font-size:10px;letter-spacing:.08em;color:var(--muted);}
.vopt:hover span{border-color:var(--aka);}
.vopt input:checked + span{border-color:var(--aka);background:var(--aka);color:#fff;}
.vopt input:checked + span small{color:rgba(255,255,255,.8);}
.vopt input:focus-visible + span{outline:2px solid var(--aka);outline-offset:3px;}
.vopt.out{cursor:not-allowed;}
.vopt.out span{opacity:.45;background:var(--kinari);text-decoration:line-through;}
.vopt.out:hover span{border-color:var(--line-2,#d3c9b2);}

/* ==========================================================
   特定商取引法に基づく表示（tokushoho.html）
   法定の表示なので、飾らずに読めることを優先する。
   PCは「項目｜内容」の2列、スマホは縦に積む。
   ========================================================== */
.legal{max-width:760px;margin-top:3rem;}
.legal .lead{
  margin:0 0 2.4rem;font-size:14.5px;line-height:2.1;color:var(--sumi-2);
}
.legal dl{
  margin:0;border-top:1px solid var(--line);
}
.legal dt{
  font-size:12.5px;letter-spacing:.12em;font-weight:600;color:var(--sumi);
  padding:1.5rem 0 .5rem;
}
.legal dd{
  margin:0;padding:0 0 1.5rem;font-size:14.5px;line-height:2.1;
  color:var(--sumi-2);border-bottom:1px solid var(--line);
}
.legal dd small{
  display:block;margin-top:.6em;font-size:12px;line-height:2;color:var(--muted);
}
.legal dd a{color:var(--aka);text-decoration:none;border-bottom:1px solid var(--line);}
.legal dd a:hover{border-bottom-color:var(--aka);}

/* 色移りのお願い。読み飛ばされないよう、紙の色を変えて置く */
.legal .tenote{
  margin:2.6rem 0 0;padding:1.4rem 1.6rem;background:var(--kinari);
  font-size:13px;line-height:2.1;color:var(--sumi-2);letter-spacing:.04em;
}
.legal .tolink{margin:2.6rem 0 0;font-size:13.5px;}
.legal .tolink a{color:var(--aka);text-decoration:none;letter-spacing:.06em;}
.legal .tolink a:hover{text-decoration:underline;}

@media (min-width:720px){
  /* 項目｜内容 の2列。
     ★ align-items は指定しない（初期値 stretch のまま）。
       start を指定すると、項目と内容の高さがそれぞれの文の量で決まってしまい、
       下線の位置が段ごとにズレて、ガタガタに見える。
       stretch なら両方が段の高さいっぱいに伸びるので、下線が一直線に揃う。 */
  .legal dl{
    display:grid;grid-template-columns:13.5em 1fr;
    column-gap:2.5rem;
  }
  .legal dt{padding:1.6rem 0;border-bottom:1px solid var(--line);}
  .legal dd{padding:1.6rem 0;}
}