/* =====================================================================
   泰明窯 公式オンラインショップ 提案用モック
   一日の光の順に:04:52 未明(群青) → 05:41 日の出(辰砂) → 日中(澄んだ空気)
   → 17:48 残照 → 19:30 夜。章ではなく時刻で進む。地平線が全体を貫く。
   ===================================================================== */
:root{
  --mimei:#16213A;        /* 未明の群青 */
  --mimei-deep:#0E1526;   /* 夜 */
  --shinsha:#9A2433;      /* 辰砂 */
  --shinsha-deep:#6E1826;
  --dawn:#D98A93;         /* 群青の上に置く、夜明けの薄紅 */
  --ember:#C9573F;        /* 地平線 */
  --sunlit:#F0B46A;       /* 昇る日 */
  --gosu:#2F4A7E;         /* 染付の青 */
  --air:#F0F1EE;          /* 澄んだ空気 */
  --air-deep:#E3E5E0;
  --paper:#F7F2E7;        /* 証明書の紙 */
  --ink:#1B1A1D;
  --ink-soft:#4B4A4F;
  --grey:#7A7B78;
  --rule:#CDD0CA;
  --disp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --max:1240px;
  --gut:clamp(20px,5vw,72px);
  --band:30px;
  --bar:60px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--air);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.95;font-size:15px;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--gosu);outline-offset:3px}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;line-height:1.5}
.mono,.no,.price,.big,.t{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.kari{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;line-height:1.6;border:1px solid currentColor;padding:0 6px;margin-left:10px;vertical-align:middle;opacity:.6;font-weight:400}
.small{font-size:13px;color:var(--ink-soft)}
.linkline{display:inline-block;font-size:13px;letter-spacing:.16em;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:14px}
.linkline:hover{color:var(--shinsha)}
i{font-style:normal}
.is-hidden{display:none!important}

/* ---------- 地平線の印 ---------- */
.sun{position:relative;display:inline-block;width:15px;height:15px;flex:none;vertical-align:middle;background:var(--shinsha);border-radius:1px}
.sun::after{content:"泰";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:10px;line-height:1;color:#F6EFE8}

/* ---------- 帯・天バー ---------- */
.mock-band{height:var(--band);background:var(--shinsha);color:#fff;font-size:11px;letter-spacing:.18em;text-align:center;line-height:var(--band);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px;position:relative;z-index:30}
.bar{position:fixed;top:var(--band);left:0;right:0;z-index:20;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gut);color:var(--ink);transition:color .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
body.on-dark .bar{color:var(--air)}
body.scrolled .bar{background:rgba(240,241,238,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:rgba(27,26,29,.08)}
body.scrolled.on-dark .bar{background:rgba(10,12,20,.22);border-bottom-color:rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:12px;line-height:1}
.brand b{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.22em}
.brand small{font-size:10.5px;letter-spacing:.22em;opacity:.7}
.barnav{display:flex;gap:28px;font-size:12.5px;letter-spacing:.2em}
.barnav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .25s}
.barnav a:hover{border-bottom-color:currentColor}

/* ---------- 時刻の見出し(章ではなく、時刻で進む) ---------- */
.when{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;font-size:12px;letter-spacing:.2em;color:var(--grey);line-height:1.6}
.when .t{font-size:13px;color:var(--shinsha)}
.when i{opacity:.45;margin:0 2px}
.sec-head{margin-bottom:44px;max-width:820px}
.title{font-size:clamp(26px,2.6vw,36px);letter-spacing:.1em;line-height:1.55;font-weight:700;margin-top:14px}
.sec-lead{font-size:14px;color:var(--ink-soft);max-width:680px;margin-top:14px;line-height:2}
.prose{max-width:620px}
.prose p{margin-bottom:1.5em;text-align:justify}
.prose p:last-child{margin-bottom:0}
.prose .lead{font-family:var(--disp);font-weight:400;font-size:17.5px;letter-spacing:.06em;line-height:2.1}
@media (max-width:760px){.sec-head{margin-bottom:32px}}

/* (04:52 未明の面は、末尾の「辰砂の札」ブロックで定義) */

/* ---------- 05:41 日の出(辰砂の一面) ---------- */
.jo{background:linear-gradient(180deg,var(--shinsha-deep) 0,var(--shinsha) 18%,var(--shinsha) 100%);color:#F6ECE9;padding:104px 0 112px}
.jo .when{color:rgba(255,255,255,.7)}
.jo .when .t{color:var(--sunlit)}
.jo .title{color:#fff}
.jo .kari{border-color:rgba(255,255,255,.6);opacity:.85}
.jo-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:start}
.jo .prose p{color:rgba(255,255,255,.88)}
.jo .prose .small{color:rgba(255,255,255,.7)}
.jo-fig{margin-right:calc(-1 * var(--gut));margin-top:12px}
.jo-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.jo-fig figcaption{font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.72);margin-top:14px;line-height:1.9;padding-right:var(--gut)}
.jo-direct{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid rgba(255,255,255,.35);padding-top:28px}
.jo-direct b{display:block;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.1em;color:#fff;margin-bottom:6px}
.jo-direct span{display:block;font-size:13px;line-height:1.9;color:rgba(255,255,255,.78)}
@media (max-width:900px){
  .jo{padding:72px 0 80px}
  .jo-two{grid-template-columns:1fr;gap:40px}
  .jo-fig{margin:0 calc(-1 * var(--gut))}
  .jo-fig figcaption{padding:0 var(--gut)}
  .jo-direct{grid-template-columns:1fr;gap:22px;margin-top:56px}
}

/* ---------- 09:00 日中 ── 作品 ---------- */
.sakuhin{padding:104px 0 96px}
.filters{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:10px 0;margin-bottom:8px}
.filter-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.filter-row + .filter-row{border-top:1px solid var(--rule);margin-top:8px;padding-top:8px}
.filter-row .fl{font-size:11px;letter-spacing:.24em;color:var(--grey);flex:none;width:34px}
.filter-row>div{display:flex;flex-wrap:wrap;gap:0 4px}
.fbtn{border:0;background:none;font-size:13px;letter-spacing:.1em;padding:6px 10px;color:var(--grey);cursor:pointer;border-bottom:1px solid transparent;line-height:1.6}
.fbtn:hover{color:var(--ink)}
.fbtn[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.group-title{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:72px 0 28px;padding-top:14px;border-top:1px solid var(--ink)}
.group-title>span:first-child{font-size:22px;letter-spacing:.18em;font-weight:700}
.group-title .cnt{font-size:13px;color:var(--grey);letter-spacing:.1em}
.group-title .cnt b{font-family:var(--mono);font-weight:400;font-size:15px;color:var(--ink);margin-right:2px}
.group-title .lead{font-size:13px;color:var(--grey);margin-left:auto;font-family:var(--sans);font-weight:400;letter-spacing:.06em}
.ledger-group:first-child .group-title{margin-top:40px}
.ledger-foot{font-size:12.5px;color:var(--grey);letter-spacing:.08em;margin-top:40px;border-top:1px solid var(--rule);padding-top:14px}

.ph{position:relative;display:block;overflow:hidden;background:var(--air-deep);aspect-ratio:1/1}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ph .ph-label{display:none}
.ph.noimg{background:linear-gradient(160deg,var(--t1),var(--t2))}
.ph.noimg img{display:none}
.ph.noimg .ph-label{display:block;position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.75)}
.stamp{position:absolute;left:0;right:0;bottom:0;background:rgba(27,26,29,.72);color:#fff;font-size:11px;letter-spacing:.3em;text-align:center;padding:6px 0 5px;line-height:1.6}

.entry{display:block;color:inherit}
.entry figure{position:relative;margin:0}
.entry:hover .ph img{transform:scale(1.025)}
.entry.is-sold .ph img{opacity:.6;filter:saturate(.75)}
.entry-meta{margin-top:14px;display:flex;flex-direction:column}
.entry .no{font-size:11.5px;color:var(--grey);letter-spacing:.02em;line-height:1.6}
.entry .no i,.entry .glaze i,.item-kicker i,.item-info .no i,.hue-yomi i{margin:0 .3em;opacity:.6}
.entry .name{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.08em;line-height:1.55;margin-top:4px;transition:color .3s}
.entry:hover .name{color:var(--shinsha)}
.entry .glaze{font-size:12.5px;color:var(--ink-soft);line-height:1.8;margin-top:2px}
.entry .word{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--gosu);letter-spacing:.06em;line-height:1.9;margin-top:8px}
.entry .price{font-size:15px;margin-top:10px;line-height:1.5}
.entry .price small{font-family:var(--sans);font-size:11px;color:var(--grey);margin-left:6px;letter-spacing:.1em}
.entry .price.is-sold{font-family:var(--sans);color:var(--grey);font-size:13px;letter-spacing:.1em}
.entry .act{display:inline-block;align-self:flex-start;font-size:11.5px;letter-spacing:.18em;border-bottom:1px solid var(--ink);padding-bottom:2px;margin-top:8px;line-height:1.6}
.entry.is-sold .act{border-bottom-color:transparent;color:var(--grey)}

/* 美術作品・茶道具:一点ずつ、地平線で区切った横長の段 */
.entries.plates{display:flex;flex-direction:column}
.entry.plate{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:40px 0;border-top:1px solid var(--rule);align-items:end}
.entry.plate:first-child{border-top:0;padding-top:8px}
.entry.plate:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.entry.plate:nth-child(even) figure{order:2}
.entry.plate .ph{aspect-ratio:5/4}
.entry.plate .entry-meta{margin-top:0;padding-bottom:6px}
.plate .name{font-size:clamp(22px,2.2vw,30px);margin-top:8px}
.plate .word{font-size:16px;margin-top:12px}
.plate .price{font-size:18px;margin-top:16px}
.entries.rows{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
@media (max-width:1000px){.entries.rows{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .sakuhin{padding:72px 0 64px}
  /* スマホ:先頭の一点だけ大きく、残りは写真と文を横に並べて短くする */
  .entry.plate,.entry.plate:nth-child(even){grid-template-columns:38% minmax(0,1fr);gap:14px;padding:18px 0;align-items:center}
  .entry.plate:nth-child(even) figure{order:0}
  .entry.plate .ph{aspect-ratio:1/1}
  .entry.plate .name{font-size:16px;margin-top:2px}
  .entry.plate .word{font-size:13px;margin-top:4px;line-height:1.7}
  .entry.plate .price{font-size:15px;margin-top:6px}
  .entry.plate .act{margin-top:6px}
  .entry.plate:first-child{grid-template-columns:1fr;gap:16px;padding:8px 0 28px}
  .entry.plate:first-child .ph{aspect-ratio:5/4}
  .entry.plate:first-child .name{font-size:22px}
  .entry.plate:first-child .word{font-size:15px}
  .entries.rows{grid-template-columns:1fr 1fr;gap:28px 16px}
  .group-title{margin:44px 0 20px}
  .group-title .lead{margin-left:0;width:100%}
  .filter-row .fl{width:100%;line-height:1.5}
}

/* ---------- 12:00 はじめの一点 ---------- */
.hajime{background:var(--air-deep);padding:88px 0 96px}
.hajime .when .t{color:var(--gosu)}
.hajime-row{display:grid;grid-template-columns:repeat(6,1fr);gap:32px 20px}
.hajime-row .entry .name{font-size:14.5px}
@media (max-width:1000px){.hajime-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.hajime{padding:64px 0 72px}.hajime-row{grid-template-columns:1fr 1fr;gap:28px 16px}}

/* ---------- 14:00 釉の色 ---------- */
.fu{padding:104px 0 96px}
.spectrum{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.hue{display:block;position:relative;padding-top:10px}
.hue::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--t1),var(--t2))}
.hue-img{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--air-deep)}
.hue-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hue:hover .hue-img img{transform:scale(1.03)}
.hue-name{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.22em;margin-top:16px;line-height:1.4;padding:0 8px 0 10px}
.hue-yomi{display:block;font-size:11.5px;color:var(--grey);letter-spacing:.08em;padding:0 10px;line-height:1.7}
.hue-line{display:block;font-size:13px;color:var(--ink-soft);line-height:1.85;margin-top:8px;padding:0 10px}
.hue:hover .hue-name{color:var(--shinsha)}
.fu-note{font-size:13px;color:var(--ink-soft);margin-top:40px;border-top:1px solid var(--rule);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
.fu-note a{border-bottom:1px solid var(--ink);padding-bottom:2px;letter-spacing:.12em;font-size:12.5px}
@media (max-width:860px){
  .fu{padding:72px 0 64px}
  .spectrum{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);gap:14px;scrollbar-width:none}
  .spectrum::-webkit-scrollbar{display:none}
  .hue{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}

/* ---------- 16:00 窯 ── 炎の数字 ---------- */
.kiroku{padding:104px 0 112px;border-top:1px solid var(--rule)}
.numbers{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.num{border-top:1px solid var(--ink);padding-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.num.n1{grid-column:1/7}
.num.n2{grid-column:7/13;margin-top:140px}
.num.n3{grid-column:3/10;margin-top:48px}
.num .pre{font-size:15px;color:var(--grey);letter-spacing:.1em}
.num .big{font-weight:300;font-size:clamp(76px,11vw,168px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.num .unit{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:.1em;margin-left:4px}
.num .lab{display:block;width:100%;font-size:13.5px;color:var(--ink-soft);margin-top:10px;letter-spacing:.08em;line-height:1.8}
.num .lab small{display:block;font-size:12px;color:var(--grey)}
.num.n3 .big,.num.n3 .unit{color:var(--shinsha)}
.kilnday{margin-top:112px}
.kilnday h3{font-size:14px;letter-spacing:.32em;font-weight:700;margin-bottom:22px}
.kilnday ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);position:relative}
.kilnday li{position:relative;padding:18px 16px 0 0}
.kilnday li::before{content:"";position:absolute;top:-1px;left:0;width:1px;height:14px;background:var(--ink)}
.kilnday .t{display:block;font-size:13px;color:var(--ink);line-height:1.5}
.kilnday .l{display:block;font-size:14px;margin-top:4px;line-height:1.7}
.kilnday .l small{display:block;font-size:12px;color:var(--grey)}
.makigama{margin-top:112px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.makigama h3{font-size:22px;letter-spacing:.18em;margin-bottom:16px;font-weight:700}
.makigama-fig{max-width:460px;margin-left:auto;width:100%}
.makigama-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.makigama-fig figcaption{font-size:12px;letter-spacing:.1em;color:var(--ink-soft);margin-top:12px;line-height:1.9}
@media (max-width:860px){
  .kiroku{padding:72px 0 80px}
  .numbers{display:block}
  .num.n1,.num.n2,.num.n3{margin-top:0}
  .num + .num{margin-top:40px}
  .num .big{font-size:clamp(64px,20vw,120px)}
  .kilnday{margin-top:72px}
  .kilnday ol{display:block;border-top:0;border-left:1px solid var(--rule);padding-left:18px}
  .kilnday li{padding:0 0 18px}
  .kilnday li::before{top:10px;left:-18px;width:14px;height:1px}
  .makigama{grid-template-columns:1fr;gap:40px;margin-top:72px}
  .makigama-fig{margin-left:0}
}

/* ---------- 17:00 約束 ── 保証と買い方 ---------- */
.akashi{background:#F8F8F5;border-top:1px solid var(--rule);padding:104px 0 112px}
.akashi-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:72px;align-items:start}
.cert{position:relative;background:var(--paper);border:1px solid #D9D0BE;padding:30px 30px 26px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 30px 50px -36px rgba(0,0,0,.45);color:#2A2520}
.cert-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid #2A2520;padding-bottom:10px;margin-bottom:14px}
.cert-title{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.3em}
.cert-en{font-size:10px;letter-spacing:.16em;color:#8A8276}
.cert-body div{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #E5DCCB;font-size:13.5px;line-height:1.8}
.cert-body dt{font-size:11.5px;letter-spacing:.14em;color:#8A8276}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:22px;font-size:12px;letter-spacing:.1em;line-height:1.8}
.cert-foot em{display:block;font-style:normal;font-family:var(--disp);font-size:19px;letter-spacing:.14em;font-weight:400}
.cert-foot small{display:block;font-size:10px;letter-spacing:.24em;color:#8A8276}
.cert-sun{position:relative;width:46px;height:46px;flex:none;border:2px solid var(--shinsha);color:var(--shinsha);transform:rotate(-2deg);opacity:.88}
.cert-sun::after{content:"泰明";position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;font-family:var(--disp);font-size:15px;letter-spacing:.06em;font-weight:500}
.cert-mock{position:absolute;top:14px;right:14px;border:1px solid var(--shinsha);color:var(--shinsha);font-size:10.5px;letter-spacing:.24em;padding:1px 7px;line-height:1.8}
.cert-cap{font-size:12px;color:var(--grey);margin-top:14px;letter-spacing:.08em}
.akashi-dl div,.guide-dl div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.akashi-dl,.guide-dl{border-top:1px solid var(--ink)}
.akashi-dl dt,.guide-dl dt{font-size:12px;letter-spacing:.16em;color:var(--grey);padding-top:2px}
.akashi-dl dd,.guide-dl dd{font-size:14px;line-height:1.9}
.tiers-title{font-size:19px;letter-spacing:.14em;margin:56px 0 16px;font-weight:700}
.tiers{list-style:none;border-top:1px solid var(--ink)}
.tiers li{display:grid;grid-template-columns:150px 150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tiers .range{font-family:var(--mono);font-size:13px}
.tiers .act{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.08em}
.tiers .how{font-size:13px;color:var(--ink-soft);line-height:1.9}
.guide-dl{margin-top:48px}
@media (max-width:900px){
  .akashi{padding:72px 0 80px}
  .akashi-grid{grid-template-columns:1fr;gap:48px}
  .cert{max-width:460px}
  .tiers li{grid-template-columns:1fr;gap:4px}
  .tiers .how{margin-top:2px}
}
@media (max-width:420px){.cert{padding:22px 18px 20px}.cert-title{font-size:17px;letter-spacing:.2em}}

/* ---------- 17:48 残照 ── 窯元 ---------- */
.kamamoto{padding:112px 0 120px;color:var(--air);background:
  radial-gradient(90% 60% at 20% 100%, rgba(232,169,91,.28), transparent 60%),
  linear-gradient(180deg,#2E2742 0%,#5A2C3F 42%,#8A3A2E 76%,#1E1C33 100%)}
.kamamoto .when{color:rgba(240,241,238,.65)}
.kamamoto .when .t{color:#F0C9B5}
.kamamoto .sec-lead{color:rgba(240,241,238,.78)}
.kamamoto .kari{border-color:rgba(255,255,255,.5);opacity:.8}
.kamamoto-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.career{list-style:none;border-top:1px solid rgba(255,255,255,.3);max-width:640px}
.career li{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:14px;line-height:1.9}
.career b{font-family:var(--disp);font-weight:400;color:#F0C9B5;letter-spacing:.08em;font-size:15px}
.kamamoto-fig{max-width:440px;margin-left:auto;width:100%}
.kamamoto-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.kamamoto-fig figcaption{font-size:12px;letter-spacing:.1em;color:rgba(240,241,238,.72);margin-top:12px;line-height:1.9}
.kamamoto-quote{margin-top:96px;border-top:1px solid rgba(255,255,255,.3);padding-top:40px}
.kamamoto-quote p{font-family:var(--disp);font-weight:700;font-size:clamp(22px,3vw,38px);letter-spacing:.1em;line-height:1.7;color:#fff;max-width:900px}
.kamamoto-quote cite{display:block;font-style:normal;font-size:12px;letter-spacing:.22em;color:rgba(240,241,238,.65);margin-top:14px}
@media (max-width:900px){
  .kamamoto{padding:72px 0 80px}
  .kamamoto-grid{grid-template-columns:1fr;gap:40px}
  .kamamoto-fig{margin-left:0}
  .kamamoto-quote{margin-top:64px;padding-top:28px}
}

/* ---------- 19:30 夜 ---------- */
.foot{background:var(--mimei-deep);color:rgba(240,241,238,.82);padding:80px 0 40px}
.foot .when{color:rgba(240,241,238,.55);margin-bottom:44px}
.foot .when .t{color:var(--dawn)}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.foot h2{font-size:12px;letter-spacing:.32em;font-weight:700;margin-bottom:18px;color:#fff}
.foot-name{font-family:var(--disp);font-size:18px;letter-spacing:.14em;margin-bottom:14px;color:#fff;font-weight:700;display:flex;align-items:center;gap:12px}
.foot dl{font-size:13.5px}
.foot dt{color:rgba(240,241,238,.5);font-size:11px;letter-spacing:.16em;margin-top:12px}
.foot dt:first-child{margin-top:0}
.foot dd a{border-bottom:1px solid rgba(255,255,255,.3)}
.foot ul{list-style:none;font-size:13.5px}
.foot ul li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.foot a:hover{color:var(--dawn)}
.foot-end{margin-top:64px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font-size:11.5px;letter-spacing:.1em;color:rgba(240,241,238,.55)}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr;gap:36px}.foot{padding:64px 0 32px}}

/* ---------- 現れ方 ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ph img,.hue-img img{transition:none}
  .entry:hover .ph img,.hue:hover .hue-img img{transform:none}
}

/* ---------- 作品ページ ---------- */
.page-item{background:var(--air)}
.item-top{padding-top:calc(var(--band) + var(--bar) + 40px)}
.crumb{font-size:12px;letter-spacing:.1em;color:var(--grey);display:flex;flex-wrap:wrap;gap:4px 0;margin-bottom:36px}
.crumb a::after,.crumb span::before{content:"/";margin:0 10px;opacity:.5}
.crumb span::before{display:none}
.crumb a:hover{color:var(--shinsha)}
.crumb span{color:var(--ink-soft)}
.item-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.gallery-main{position:relative;margin:0}
.gallery-main .ph{aspect-ratio:1/1}
.gallery-main .ph img{transition:none}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{width:64px;height:64px;padding:0;border:1px solid transparent;background:var(--air-deep);cursor:pointer;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{border-color:var(--ink)}
.video-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;margin-top:24px;border:0;background:none;cursor:pointer;overflow:hidden;text-align:left;color:#fff}
.video-bg{position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 40%,var(--t1),transparent 70%),radial-gradient(60% 80% at 75% 70%,var(--t2),transparent 70%),#15121A}
.video-frame .play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:1px solid rgba(255,255,255,.7);border-radius:50%}
.video-frame .play::after{content:"";position:absolute;left:24px;top:20px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.video-frame .label{position:absolute;left:18px;top:14px;font-size:12px;letter-spacing:.3em}
.video-frame .sub{position:absolute;left:18px;bottom:14px;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.video-frame .tag{position:absolute;right:14px;top:12px;font-size:10px;letter-spacing:.2em;border:1px solid rgba(255,255,255,.5);padding:1px 7px}
.gallery-note{font-size:12px;color:var(--grey);margin-top:12px;letter-spacing:.06em;line-height:1.8}
.item-info .no{font-size:12px;color:var(--grey)}
.item-title{font-size:clamp(26px,3vw,38px);letter-spacing:.1em;line-height:1.45;margin-top:6px}
.item-kicker{font-size:13px;color:var(--ink-soft);margin-top:8px;letter-spacing:.08em}
.item-price{font-family:var(--mono);font-weight:300;font-size:clamp(26px,2.6vw,32px);margin-top:22px;line-height:1.3}
.item-price small{font-family:var(--sans);font-size:12px;color:var(--grey);margin-left:8px;letter-spacing:.1em}
.item-price.is-sold{font-family:var(--sans);font-size:20px;color:var(--grey);letter-spacing:.14em;font-weight:400}
.official{font-size:12.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:.06em}
.item-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.item-tags li{font-size:11px;letter-spacing:.14em;border:1px solid var(--rule);padding:2px 10px;color:var(--ink-soft);line-height:1.8}
.item-tags li.red{border-color:var(--shinsha);color:var(--shinsha)}

.purchase{margin-top:28px;padding:24px;border:1px solid var(--ink);background:#fff}
.purchase h3{font-size:17px;letter-spacing:.16em;margin-bottom:8px}
.purchase .lead{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.9}
.purchase .lead.review{font-size:12.5px}
.btn{display:inline-block;padding:14px 28px;border:1px solid var(--ink);font-size:14px;letter-spacing:.2em;background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,color .25s;line-height:1.6}
.btn:hover{background:var(--ink);color:var(--air)}
.btn-primary{background:var(--ink);color:var(--air)}
.btn-primary:hover{background:#000}
.btn-shinsha{background:var(--shinsha);border-color:var(--shinsha);color:#fff}
.btn-shinsha:hover{background:var(--shinsha-deep);border-color:var(--shinsha-deep)}
.btn-block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.5;cursor:default}
.btn[disabled]:hover{background:var(--ink);color:var(--air)}
.cert-line{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.8}
.seal-mini{flex:none;font-size:10px;background:var(--shinsha);color:#fff;padding:2px 6px;letter-spacing:.14em;line-height:1.6;margin-top:3px}
.pay-panel{display:none}
.pay-panel.is-open{display:block;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.pay-title{font-size:11.5px;letter-spacing:.24em;color:var(--grey);margin-bottom:4px}
.pay-option{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);cursor:pointer;align-items:start}
.pay-option input{margin-top:9px;accent-color:var(--shinsha)}
.pay-option .t{font-size:14px;font-family:var(--sans);letter-spacing:.04em}
.pay-option .d{font-size:12px;color:var(--grey);line-height:1.7}
.pay-option .soon{font-size:10px;border:1px solid var(--rule);padding:0 6px;margin-left:8px;letter-spacing:.14em;color:var(--grey)}
.pay-option.is-disabled{opacity:.55;cursor:default}
.pay-summary{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:13.5px;margin:16px 0}
.pay-summary .total{font-weight:700;border-top:1px solid var(--ink);padding-top:8px;margin-top:4px}
.form.is-hidden{display:none}
.form{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.field{margin-top:14px}
.field label{display:block;font-size:12px;letter-spacing:.12em;margin-bottom:6px;color:var(--ink-soft)}
.req{font-size:10px;color:var(--shinsha);margin-left:8px;letter-spacing:.14em}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea{width:100%;padding:10px 12px;border:1px solid var(--rule);background:#fff;font:inherit;font-size:14px;line-height:1.6}
.field input:focus,.field textarea:focus{outline:2px solid var(--gosu);outline-offset:0;border-color:var(--gosu)}
.field textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radios{display:flex;flex-wrap:wrap;gap:8px 18px}
.radios label{font-size:14px;display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--ink)}
.radios input{accent-color:var(--shinsha)}
.check-box{margin-top:16px;padding:14px;background:var(--air);font-size:13px;line-height:1.8}
.check-box .main{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.check-box input{margin-top:7px;accent-color:var(--shinsha)}
.check-box .sign{margin-top:10px}
.check-box .sign label{display:block;font-size:12px;letter-spacing:.1em;margin-bottom:6px;color:var(--ink-soft)}
.check-box .sign input[type="text"]{width:100%;padding:10px 12px;border:1px solid var(--rule);background:#fff;font:inherit;font-size:14px}
.form-error{display:none;color:var(--shinsha);font-size:13px;line-height:1.8}
.form-error.is-visible{display:block;border-left:2px solid var(--shinsha);padding-left:10px;margin-bottom:12px}
.form-note{font-size:12px;color:var(--grey);margin-top:10px;line-height:1.8}
.form .btn{margin-top:16px}
.sold-msg{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.2em}
.sold-sub{font-size:13px;color:var(--ink-soft);margin:8px 0 16px;line-height:1.9}

.spec{margin-top:32px;border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.8}
.spec dt{font-size:12px;letter-spacing:.14em;color:var(--grey);padding-top:1px}
.mono-dd dd{font-family:var(--mono);font-size:13px}
.firing{margin-top:36px}
.firing h3,.item-desc h3,.cert-block h3{font-size:14px;letter-spacing:.3em;font-weight:700}
.firing .spec{margin-top:12px}
.note{font-size:12px;color:var(--grey);line-height:1.8;margin-top:10px}
.item-desc{margin-top:40px}
.item-desc .word{font-family:var(--disp);font-weight:400;font-size:18px;color:var(--gosu);letter-spacing:.06em;line-height:1.8;margin:10px 0 8px}
.item-desc p{font-size:14px;line-height:2}
.cert-block{margin-top:40px}
.cert-block .cert{margin-top:14px;max-width:440px}
.glaze-note{margin-top:40px;padding-top:24px;border-top:1px solid var(--ink)}
.glaze-note h3{font-size:22px;letter-spacing:.2em}
.glaze-note h3 small{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--grey);margin-left:12px;letter-spacing:.1em}
.glaze-note .line{font-family:var(--disp);font-weight:400;font-size:15.5px;color:var(--shinsha);margin:4px 0 8px;letter-spacing:.06em}
.glaze-note p{font-size:14px;line-height:2}
.kiln-link{margin-top:40px;display:grid;grid-template-columns:72px 1fr 24px;gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .25s}
.kiln-link:hover{background:var(--air-deep)}
.kiln-link .ph-sm .ph{width:72px;aspect-ratio:1/1}
.kiln-link b{display:block;font-family:var(--disp);font-size:15px;letter-spacing:.1em;font-weight:700}
.kiln-link small{display:block;font-size:12px;color:var(--grey);line-height:1.7}
.kiln-link .ar{color:var(--grey);text-align:right}
.related{margin-top:96px;padding:80px 0 104px;border-top:1px solid var(--rule);background:#F8F8F5}
.related .sec-head{display:block}
.notfound{padding:160px 0 120px;text-align:center}
.notfound h1{font-size:24px;letter-spacing:.14em;margin:8px 0 12px}
.notfound .btn{margin-top:24px}
@media (max-width:900px){
  .item-top{padding-top:calc(var(--band) + 52px + 28px)}
  .item-layout{grid-template-columns:1fr;gap:40px}
  .field-row{grid-template-columns:1fr}
  .related{margin-top:64px;padding:56px 0 72px}
  .purchase{padding:18px}
}

/* ---------- スマホ:天バーは固定しない ---------- */
@media (max-width:760px){
  :root{--bar:52px}
  .bar{position:absolute;background:none!important;border-bottom-color:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .brand small{display:none}
  .brand b{font-size:16px}
  .barnav{gap:16px;font-size:11.5px;letter-spacing:.14em}
  .mock-band{font-size:10px;letter-spacing:.1em}
}

/* ================= ページ分け(2026-11-07) ================= */
/* ロゴ:窯元のロゴ画像。暗い面では白抜き版に替える */
.brand{gap:14px}
.logo{height:34px;width:auto;display:block}
.logo-light{display:none}
body.on-dark .logo-ink{display:none}
body.on-dark .logo-light{display:block}
.foot-logo{height:52px;width:auto}
.foot-name{margin-bottom:22px}

/* メニュー */
.barnav a[aria-current="page"]{border-bottom-color:currentColor}

/* 下層ページの頭:固定バーの下から始める */
.page-head{padding-top:calc(var(--bar) + 64px)}
.jo.page-head,.kamamoto.page-head{padding-top:calc(var(--bar) + 72px)}
.kiroku.page-head{border-top:0}

/* トップ:入口 */
.more-row{margin-top:40px}
.btn-n{margin-left:12px;font-family:var(--mono);font-size:12px;opacity:.7}
.more-light{display:inline-block;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;letter-spacing:.16em;font-size:14px}
.more-light:hover{color:var(--sunlit);border-color:var(--sunlit)}
.sakuhin-pick{padding-bottom:88px}
.akashi-more{margin-top:24px}

/* 物語の目次 */
.chapters{padding:104px 0;border-top:1px solid var(--rule)}
.chapter-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.chapter-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding-bottom:16px;border-bottom:1px solid var(--ink);position:relative}
.ch-ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--air-deep);margin-bottom:10px}
.ch-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.chapter-list a:hover .ch-ph img{transform:scale(1.04)}
.chapter-list b{font-family:var(--disp);font-size:19px;letter-spacing:.1em;line-height:1.5}
.chapter-list small{font-size:12.5px;color:var(--ink-soft);line-height:1.8}
.chapter-list .ar{position:absolute;right:0;bottom:14px;font-size:13px}
@media (max-width:1000px){.chapter-list{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .chapters{padding:72px 0}
  .chapter-list{grid-template-columns:1fr;gap:0}
  .chapter-list a{display:grid;grid-template-columns:30% 1fr;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:4px;padding:16px 0}
  .ch-ph{grid-row:1/4;margin:0;aspect-ratio:1/1}
}

/* 次の時刻へ */
.next-hour{background:var(--air);border-top:1px solid var(--rule)}
.next-hour .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:40px;padding-bottom:40px}
.next-hour a{display:flex;flex-direction:column;gap:6px}
.next-hour .nh-next{text-align:right;align-items:flex-end;margin-left:auto}
.next-hour b{font-family:var(--disp);font-size:clamp(18px,2vw,24px);letter-spacing:.1em}
.next-hour a:hover b{color:var(--shinsha)}

/* 贈り物・ガイド・フォーム・表記 */
.gift{padding:96px 0 104px}
.gift-dl,.legal-dl,.faq{border-top:1px solid var(--ink);max-width:880px}
.gift-dl div,.legal-dl div,.faq div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.gift-dl dt,.legal-dl dt{font-size:12.5px;letter-spacing:.14em;color:var(--grey);padding-top:2px}
.faq dt{font-family:var(--disp);font-weight:700;letter-spacing:.06em}
.gift-dl dd,.legal-dl dd,.faq dd{font-size:14px;line-height:1.95}
.guide,.formpage{padding-bottom:104px}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.guide-grid .tiers-title{margin-top:0}
.guide-grid .guide-dl{margin-top:0}
.guide-block{margin-top:72px;max-width:880px}
.guide-block .guide-dl{margin-top:0}
.cform{display:grid;gap:22px;max-width:640px}
.cform label{display:grid;gap:8px;font-size:13px;letter-spacing:.12em}
.cform .req{font-size:10.5px;color:var(--shinsha);margin-left:8px}
.cform input,.cform select,.cform textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:0;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--ink);outline:none}
.cform .btn{justify-self:start}
.policy h3{font-size:17px;letter-spacing:.1em;margin:32px 0 8px}
.policy{max-width:760px}
@media (max-width:760px){
  .guide-grid{grid-template-columns:1fr;gap:40px}
  .gift-dl div,.legal-dl div,.faq div{grid-template-columns:1fr;gap:4px}
  .gift{padding:64px 0 72px}
}

/* スマホ:メニューは開閉、作品への入口は常に下に */
.dock{display:none}
@media (max-width:760px){
  .logo{height:28px}
  .barnav{display:none}
  .dock{display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:25;background:var(--shinsha);color:#fff;padding:14px 18px;font-size:14px;letter-spacing:.18em;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .dock-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;opacity:.8}
  .dock .ar{margin-left:auto}
  body:has(.dock) .foot{padding-bottom:96px}
  .next-hour .wrap{flex-direction:column}
  .next-hour .nh-next{order:-1}
}

/* ================= 贈り物 ================= */
.giftpage{padding-bottom:104px}
.sub-title{font-size:clamp(20px,2vw,26px);letter-spacing:.12em;margin:72px 0 24px;padding-top:14px;border-top:1px solid var(--ink)}
.gift-back{margin-left:24px}
/* 季節の締め切り */
.season-in{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:baseline;background:var(--shinsha);color:#fff;padding:20px 24px;max-width:880px}
.season-k{font-family:var(--disp);font-size:22px;letter-spacing:.14em;font-weight:700;grid-row:1/3}
.season-d{font-family:var(--mono);font-size:15px}
.season-dl{font-size:13px;letter-spacing:.08em;opacity:.92}
.season-dl em{font-style:normal;font-family:var(--mono);margin-left:12px;padding:1px 8px;border:1px solid rgba(255,255,255,.6)}
.season-dl .kari{color:#fff}
.season-in:hover{background:var(--shinsha-deep)}
/* 場面のカード */
.occ-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.occ-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding-bottom:16px;border-bottom:1px solid var(--rule);position:relative}
.occ-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--air-deep);margin-bottom:8px}
.occ-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.occ-list a:hover .occ-ph img{transform:scale(1.04)}
.occ-label{font-size:12px;letter-spacing:.24em;color:var(--shinsha)}
.occ-list b{font-family:var(--disp);font-size:17px;letter-spacing:.06em;line-height:1.6}
.occ-list small{font-size:12px;color:var(--grey);padding-right:20px}
.occ-list .ar{position:absolute;right:0;bottom:14px}
@media (max-width:1000px){.occ-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.occ-list{grid-template-columns:1fr 1fr;gap:24px 14px}.occ-list b{font-size:15px}}
/* 場面への小さな入口 */
.occ-strip{margin-top:48px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.occ-strip-h{font-size:12px;letter-spacing:.2em;color:var(--grey)}
.occ-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.occ-chips a{display:inline-block;border:1px solid var(--ink);padding:6px 14px;font-size:13px;letter-spacing:.14em;line-height:1.5}
.occ-chips a:hover,.occ-chips a[aria-current="page"]{background:var(--ink);color:var(--air)}
/* 予算 */
.budget{display:flex;flex-wrap:wrap;gap:4px 8px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0;margin-bottom:28px}
.gift-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
@media (max-width:1000px){.gift-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.gift-rows{grid-template-columns:1fr 1fr;gap:28px 14px}}
/* しきたり */
.manner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;margin-top:48px;align-items:start}
.manner-dl{border-top:1px solid var(--ink)}
.manner-dl div{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule)}
.manner-dl dt{font-size:12px;letter-spacing:.16em;color:var(--grey);padding-top:2px}
.manner-dl dd{font-size:14px}
.manner-note{font-family:var(--disp);font-size:16px;line-height:2.1;letter-spacing:.04em;padding:4px 0 4px 20px;border-left:2px solid var(--shinsha)}
.manner-note.is-caution{border-left-color:var(--gosu)}
@media (max-width:760px){.manner{grid-template-columns:1fr;gap:28px}}
/* 組み合わせ */
.gift-sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.set-card{border-top:1px solid var(--ink);padding-top:14px}
.set-name{font-size:12px;letter-spacing:.24em;color:var(--shinsha);margin-bottom:10px}
.set-ph{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.set-ph a{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--air-deep)}
.set-ph img{width:100%;height:100%;object-fit:cover}
.set-ph .plus{font-family:var(--mono);color:var(--grey)}
.set-items{font-size:13.5px;margin-top:12px;line-height:1.8}
.set-price{font-family:var(--mono);font-size:18px;margin-top:6px}
.set-price small{font-family:var(--sans);font-size:11.5px;color:var(--grey);margin-left:10px;letter-spacing:.08em}
.set-note{grid-column:1/-1}
@media (max-width:760px){.gift-sets{grid-template-columns:1fr}}
/* 内祝いの計算 */
.calc{max-width:880px}
.calc-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px}
.calc-row label{display:grid;gap:8px;font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft)}
.calc-in{display:flex;align-items:baseline;gap:8px}
.calc-in input{font-family:var(--mono);font-size:22px;width:180px;padding:8px 12px;border:1px solid var(--ink);background:#fff;border-radius:0}
.calc-rate{display:flex;gap:6px}
.calc-out{margin-top:18px;font-size:15px}
.calc-out b{font-family:var(--mono);font-size:24px;color:var(--shinsha);font-weight:400;margin:0 4px}
/* 作品ページのギフト欄 */
.gift-box{margin:0 0 18px}
.gift-fits{font-size:12px;letter-spacing:.14em;color:var(--grey);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.gift-fits span{display:flex;flex-wrap:wrap;gap:6px}
.gift-fits a{border:1px solid var(--rule);padding:2px 10px;color:var(--ink);letter-spacing:.1em}
.gift-fits a:hover{border-color:var(--ink)}
.gift-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:14px 16px;border:1px solid var(--rule);cursor:pointer;font-size:14px;letter-spacing:.1em}
.gift-toggle small{font-size:11.5px;color:var(--grey);letter-spacing:.06em}
.gift-fields{border:1px solid var(--rule);border-top:0;padding:4px 16px 16px}
.gift-fields select,.gift-fields input[type=text],.gift-fields input[type=date],.gift-fields textarea{width:100%;font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--rule);background:#fff;border-radius:0}
.gift-check{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:34px}
@media (max-width:760px){.season-in{grid-template-columns:1fr;padding:18px}.season-k{grid-row:auto;font-size:19px}}

/* ================= 06:30 窯出し:釉ごとの色の世界(2026-11-08) =================
   トップだけの節。節全体の地色(--iro-bg)を、画面の中央にある章の釉の色へ切り替える(app.js initIro)。
   章ごとに作品写真が一枚、釉の名を細い明朝で大きく、写真に重ねる。
   図形や絵は描かない。写真・色面・文字・細い線だけ。
   動きを減らす設定 / IO非対応(.is-static)では、章ごとの静的な色面に落とす。 */
.iro{--iro-bg:#4a0f18;--ov:clamp(52px,4.6vw,80px);position:relative;background:var(--iro-bg);color:#fff;transition:background-color 1.1s cubic-bezier(.4,0,.2,1);overflow:hidden}
.iro .when{color:rgba(255,255,255,.62)}
.iro .when .t{color:rgba(255,255,255,.9)}
.iro .title{color:#fff}
.iro .sec-lead{color:rgba(255,255,255,.78)}
.iro-head{padding:128px 0 0}
.iro-head .sec-head{margin-bottom:0}

/* 章 */
.iro-ch{position:relative}
.iro-ch::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(42% 46% at 72% 50%,var(--c1),transparent 100%)}   /* 明るい方の釉色を、写真の後ろにだけ淡くにじませる */
.iro-ch.is-even::before{background:radial-gradient(42% 46% at 28% 50%,var(--c1),transparent 100%)}
.iro-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;min-height:100vh;min-height:max(640px,100svh);padding-top:72px;padding-bottom:88px}
.iro-fig,.iro-frame{grid-column:8/13;grid-row:1}
.iro-ch.is-even .iro-fig,.iro-ch.is-even .iro-frame{grid-column:1/6}
.iro-fig{position:relative;z-index:2;display:block;box-shadow:0 40px 90px rgba(0,0,0,.42);transform:translate3d(0,calc(var(--p,0) * -36px),0)}
.iro-fig .ph{aspect-ratio:4/5;background:#DAD9D4}
.iro-fig .ph img{object-position:center}
.iro-fig:hover .ph img{transform:scale(1.02)}
.iro-cap{position:absolute;left:0;right:0;top:100%;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.72);line-height:1.6;white-space:nowrap}
.iro-cap .price{font-size:12px;color:rgba(255,255,255,.85)}
.iro-frame{position:relative;z-index:0;width:100%;aspect-ratio:4/5;border:1px solid rgba(255,255,255,.3);pointer-events:none;transform:translate3d(24px,calc(28px + var(--p,0) * -72px),0)}   /* 一枚うしろの細い枠。写真より速く動いて奥行きを出す */
.iro-ch.is-even .iro-frame{transform:translate3d(-24px,calc(28px + var(--p,0) * -72px),0)}

/* 文字:写真に寄せて組み、釉の名だけ写真の下へ差し込む(写真が文字の端に重なる) */
.iro-text{grid-column:1/8;grid-row:1;position:relative;z-index:1;text-align:right;padding-right:44px}
.iro-ch.is-even .iro-text{grid-column:6/13;text-align:left;padding-right:0;padding-left:44px}
.iro-idx{display:inline-flex;align-items:baseline;gap:0;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px}
.iro-idx .t{font-size:12px;color:inherit}
.iro-idx i{margin:0 .5em;opacity:.5}
.iro-name{margin:18px 0 0;font-weight:400;line-height:1}
.iro-kanji{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(72px,12.5vw,188px);letter-spacing:.06em;line-height:1.08;color:#fff;white-space:nowrap;margin-right:calc(-1 * var(--ov));transform:translate3d(0,calc(var(--p,0) * 22px),0)}
.iro-ch.is-even .iro-kanji{margin-right:0;margin-left:calc(-1 * var(--ov))}
.iro-ch.is-long .iro-kanji{font-size:clamp(48px,8.4vw,126px);letter-spacing:.08em}
.iro-yomi{display:block;font-family:var(--sans);font-weight:300;font-size:12.5px;letter-spacing:.34em;color:rgba(255,255,255,.72);margin-top:16px;line-height:1.6}
.iro-line{font-family:var(--disp);font-weight:400;font-size:clamp(16px,1.3vw,19px);line-height:2;letter-spacing:.06em;color:rgba(255,255,255,.92);margin-top:26px}
.iro-n{font-size:12.5px;letter-spacing:.18em;color:rgba(255,255,255,.72);margin-top:22px;line-height:1.6}
.iro-n b{font-family:var(--mono);font-weight:400;font-size:22px;color:#fff;margin:0 4px 0 10px;letter-spacing:0}
.iro-n small{display:block;font-size:11px;letter-spacing:.14em;opacity:.75;margin-top:2px}
.iro-more{display:inline-block;margin-top:20px;font-size:13px;letter-spacing:.16em;color:#fff;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:3px;transition:border-color .25s}
.iro-more:hover{border-color:#fff}

/* 結び:窯変 */
.iro-coda{padding:150px 0 160px}
.iro-coda-lead{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.5vw,33px);line-height:1.95;letter-spacing:.08em;max-width:820px;color:#fff}
.iro-coda-sub{font-size:14px;line-height:2;color:rgba(255,255,255,.75);max-width:620px;margin-top:24px}
.iro-coda-links{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:40px;border-top:1px solid rgba(255,255,255,.3);padding-top:22px;font-size:13px;letter-spacing:.16em}
.iro-coda-links a{display:inline-flex;align-items:baseline;gap:10px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;color:#fff}
.iro-coda-links a:hover{border-color:#fff}
.iro-coda-n{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.65)}
.iro-coda-n:empty{display:none}

/* 静的な色面(動きを減らす設定 / IO非対応) */
.iro.is-static{transition:none}
.iro.is-static .iro-head,.iro.is-static .iro-ch,.iro.is-static .iro-coda{background:var(--c2)}
.iro.is-static .iro-fig,.iro.is-static .iro-kanji{transform:none}
.iro.is-static .iro-frame{transform:translate(24px,28px)}
.iro.is-static .iro-ch.is-even .iro-frame{transform:translate(-24px,28px)}
@media (prefers-reduced-motion:reduce){
  .iro{transition:none}
  .iro-head,.iro-ch,.iro-coda{background:var(--c2)}
  .iro-fig,.iro-kanji{transform:none!important}
  .iro-frame{transform:translate(24px,28px)!important}
  .iro-ch.is-even .iro-frame{transform:translate(-24px,28px)!important}
  .iro-fig .ph img{transition:none}
  .iro-fig:hover .ph img{transform:none}
}

/* 中間幅:写真の列を少し広く */
@media (max-width:1100px){
  .iro-fig,.iro-frame{grid-column:7/13}
  .iro-ch.is-even .iro-fig,.iro-ch.is-even .iro-frame{grid-column:1/7}
  .iro-text{grid-column:1/7;padding-right:32px}
  .iro-ch.is-even .iro-text{grid-column:7/13;padding-left:32px}
}

/* スマホ:縦に積む。釉の名は写真の下の角に重ねる。下のドックに掛からないよう底を空ける */
@media (max-width:760px){
  .iro{--ov:0px}
  .iro-head{padding:80px 0 0}
  .iro-ch::before{background:radial-gradient(60% 40% at 70% 36%,var(--c1),transparent 100%)}
  .iro-ch.is-even::before{background:radial-gradient(60% 40% at 30% 36%,var(--c1),transparent 100%)}
  .iro-grid{display:block;min-height:0;padding-top:80px;padding-bottom:112px}
  .iro-fig{width:76%;margin-left:auto;box-shadow:0 24px 60px rgba(0,0,0,.4);transform:translate3d(0,calc(var(--p,0) * -14px),0)}
  .iro-ch.is-even .iro-fig{margin-left:0;margin-right:auto}
  .iro-frame{display:none}
  .iro-cap{flex-direction:column;align-items:flex-end;gap:0;padding-top:10px;font-size:11px}
  .iro-ch.is-even .iro-cap{align-items:flex-start}
  .iro-text{text-align:left;padding:0}
  .iro-ch.is-even .iro-text{text-align:right;padding:0}
  .iro-idx{display:none}
  .iro-name{margin-top:0}
  .iro-kanji{font-size:clamp(64px,20vw,88px);margin:-.3em 0 0;transform:none;line-height:1.1}   /* 上端だけ写真の下に差し込む */
  .iro-ch.is-long .iro-kanji{font-size:clamp(42px,12.6vw,56px)}
  .iro-yomi{margin-top:12px}
  .iro-line{margin-top:18px;font-size:16px}
  .iro-n{margin-top:16px}
  .iro-coda{padding:96px 0 128px}
  .iro-coda-links{flex-direction:column;gap:14px}
  .iro-coda-links a{align-self:flex-start}
}

/* 釉の節:写真と文字の間を広げる(重ねない) */
.iro{--ov:0px}
.iro-text{padding-right:clamp(56px,7vw,128px)}
.iro-ch.is-even .iro-text{padding-left:clamp(56px,7vw,128px)}
@media (max-width:1100px){.iro-text{padding-right:48px}.iro-ch.is-even .iro-text{padding-left:48px}}
@media (max-width:760px){.iro-text,.iro-ch.is-even .iro-text{padding:0}.iro-kanji{margin:28px 0 0}}

/* ================= 04:52 未明:辰砂の札と、開くメニュー(2026-11-08) =================
   冒頭は辰砂の一面。札(カード)を横に並べ、中央の一枚を正面に、両脇に前後の札がのぞく(app.js initHero)。
   札が替わるたび面の地色(--hb)と、一枚うしろの灯り(.hero-glow の --hg)がわずかに違う赤へ移る。
   絵や図形は描かない。色面・ごく細い光の線・写真・文字だけ。
   下に続く「赤と青のこと」(辰砂の面)へ、底を --shinsha-deep に溶かして渡す。 */
.hero{--hb:#4A0F18;position:relative;isolation:isolate;overflow:hidden;color:#F6ECE9;background:var(--hb);transition:background-color 1.4s cubic-bezier(.4,0,.2,1)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 28%,transparent 62%,rgba(0,0,0,.1))}
.hero-glow{--hg:#9A2433;position:absolute;inset:-22% -10%;opacity:0;transition:opacity 1.8s ease;background:radial-gradient(44% 40% at 66% 36%,var(--hg) 0%,rgba(0,0,0,0) 72%)}
.hero-glow.is-on{opacity:.9}
.hero-line{position:absolute;left:-12%;right:-12%;top:57%;height:1px;transform:rotate(-3.5deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 34%,rgba(255,224,206,.34) 52%,rgba(255,255,255,.12) 70%,transparent)}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(26vh,220px);background:linear-gradient(180deg,rgba(110,24,38,0),var(--shinsha-deep))}
@media (prefers-reduced-motion:no-preference){
  .hero-glow.is-on{animation:hero-drift 22s ease-in-out infinite alternate}
  @keyframes hero-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.5%,2%,0)}}
  .hero-copy,.hero-sub,.hero-top{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) .05s forwards}
  .hero-sub{animation-delay:.35s}
  .hero-top{animation-delay:.2s}
  .hero-deck{opacity:0;animation:fade 1.1s ease .25s forwards}
  .hero-menu{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) .5s forwards}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* 組み:左に言葉、右に札。下に主な入口 */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"top top" "copy deck" "sub deck" "menu menu";column-gap:clamp(32px,4.5vw,80px);min-height:calc(100svh - var(--band));padding-top:calc(var(--bar) + 22px);padding-bottom:36px}
.hero-top{grid-area:top;display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap;padding-bottom:clamp(20px,3.6vh,44px)}
.hero .when{color:rgba(246,236,233,.66)}
.hero .when .t{color:#F0C9B5}
.hero-place{font-size:12px;letter-spacing:.18em;color:rgba(246,236,233,.6)}
.hero-place i{opacity:.5;margin:0 4px}
.hero-copy{grid-area:copy;align-self:center;padding-bottom:24px}
.hero h1{font-weight:400;font-size:clamp(40px,4.7vw,78px);line-height:1.3;letter-spacing:.06em;color:#fff}
.hero h1 .nb{display:inline-block;white-space:nowrap}
.hero-tag{font-family:var(--disp);font-weight:400;font-size:clamp(17px,1.6vw,24px);letter-spacing:.26em;color:#F0C9B5;margin-top:clamp(14px,1.8vw,26px)}
.hero-sub{grid-area:sub;align-self:end;max-width:400px;font-size:13.5px;line-height:2.05;color:rgba(246,236,233,.72);padding-bottom:8px}

/* 札 */
.hero-deck{--cw:clamp(210px,18.5vw,296px);grid-area:deck;align-self:center;position:relative;overflow:hidden;padding-top:8px;-webkit-user-select:none;user-select:none}
.deck-track{--dx:0px;position:relative;height:calc(var(--cw) * 1.25 + 86px);column-gap:clamp(14px,1.6vw,24px);touch-action:pan-y;cursor:grab}
.deck-track:active{cursor:grabbing}
.deck-track.no-anim .deck-card{transition:none!important}
.deck-card{--x:0px;--s:.88;position:absolute;top:0;left:50%;width:var(--cw);margin-left:calc(var(--cw) / -2);display:block;color:inherit;opacity:.38;transform:translate3d(calc(var(--x) + var(--dx)),0,0) scale(var(--s));transform-origin:50% 40%;transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .85s ease;-webkit-user-drag:none;will-change:transform}
.deck-card.is-on{--s:1;opacity:1}
.deck-card.is-far{opacity:0;pointer-events:none}
.deck-card.jump{transition:none!important}
.deck-card .ph{aspect-ratio:4/5;background:#E8E4DE;box-shadow:0 34px 70px -10px rgba(0,0,0,.5)}
.deck-card .ph::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.35);pointer-events:none}
.deck-card .ph img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.deck-card.is-on:hover .ph img{transform:scale(1.025)}
.deck-card .ph.noimg{background:linear-gradient(160deg,var(--t1),var(--t2))}
.deck-meta{display:flex;flex-direction:column;gap:3px;padding-top:14px;opacity:0;transition:opacity .6s ease}
.deck-card.is-on .deck-meta{opacity:1;transition-delay:.25s}
.deck-meta .no{font-size:11px;letter-spacing:.06em;color:rgba(246,236,233,.6)}
.deck-name{font-family:var(--disp);font-weight:400;font-size:15.5px;letter-spacing:.1em;line-height:1.5;color:#fff}
.deck-sub{font-size:11.5px;letter-spacing:.14em;color:rgba(246,236,233,.72)}
.deck-sub i{opacity:.5;margin:0 4px}
.deck-ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.deck-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);background:none;color:#fff;font-size:15px;cursor:pointer;transition:border-color .25s,background .25s}
.deck-btn:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.deck-count{font-size:12px;letter-spacing:.18em;color:rgba(246,236,233,.72);min-width:84px;text-align:center}
.deck-count .t{font-size:13px;color:#fff}
.deck-count i{margin:0 8px;opacity:.5}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 主な入口:五つの札を一列に(作品・贈り物・物語・釉・証明書) */
.hero-menu{grid-area:menu;margin-top:clamp(28px,4.5vh,56px)}
.hero-menu ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.3)}
.hero-menu li{border-left:1px solid rgba(255,255,255,.16)}
.hero-menu li:first-child{border-left:0}
.hero-menu a{display:grid;grid-template-rows:auto auto 1fr auto;gap:7px;min-height:112px;padding:18px 18px 18px;transition:background .35s}
.hero-menu li:first-child a{padding-left:0}
.hero-menu a:hover{background:rgba(255,255,255,.06)}
.hero-menu li:first-child a:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 20%)}
.hm-no{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(246,236,233,.58)}
.hm-label{font-family:var(--disp);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:.14em;line-height:1.3;color:#fff}
.hm-sub{font-size:11.5px;letter-spacing:.1em;line-height:1.75;color:rgba(246,236,233,.68)}
.hm-n{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(246,236,233,.75)}

@media (prefers-reduced-motion:reduce){
  .hero,.hero-glow,.deck-track,.deck-card,.deck-meta,.deck-card .ph img{transition:none!important;animation:none!important}
  .deck-card.is-on:hover .ph img{transform:none}
}

/* 中間幅〜スマホ:縦に積む。札は画面の端まで使い、入口は横にめくる */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;grid-template-areas:"top" "copy" "deck" "sub" "menu";min-height:0;padding-top:calc(var(--bar) + 18px);padding-bottom:56px}
  .hero-top{padding-bottom:28px}
  .hero-copy{align-self:start;padding-bottom:32px}
  .hero h1{font-size:clamp(40px,11.5vw,64px);line-height:1.25}
  .hero-sub{align-self:start;max-width:none;margin-top:28px;font-size:13px;padding-bottom:0}
  .hero-deck{--cw:min(62vw,250px);margin:0 calc(-1 * var(--gut))}
  .deck-track{column-gap:14px}
  .deck-card{--s:.9}
  .deck-card .ph{box-shadow:0 22px 50px -10px rgba(0,0,0,.5)}
  .deck-meta{align-items:center;text-align:center}
  .deck-ctl{margin-top:14px}
  .hero-menu{margin-top:32px}
  .hero-menu ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero-menu ol::-webkit-scrollbar{display:none}
  .hero-menu li{flex:0 0 min(46vw,176px);scroll-snap-align:start}
  .hero-menu a{min-height:120px;padding:16px 16px 16px 14px}
  .hero-menu li:first-child a{padding-left:0}
  .hm-label{font-size:22px}
}
@media (max-width:420px){.hero h1{font-size:clamp(34px,10.4vw,44px)}}

/* ---------- 開くメニュー:二本線のボタンと、辰砂の面 ----------
   天バーの右端は二本の細い線。押すと辰砂の面が二枚、わずかにずれて右から差し込まれ、項目が明朝で大きく並ぶ(app.js initMenu)。
   デスクトップは右の帯(--mvw)、スマホは全面。行内の目次(.barnav)はデスクトップに残し、ボタンはどの幅でも出す。 */
.menu-btn{display:inline-flex;align-items:center;gap:12px;border:0;background:none;color:inherit;font:inherit;font-size:11px;letter-spacing:.26em;padding:8px 0 8px 8px;cursor:pointer;flex:none}
.menu-word{line-height:1}
.menu-bars{position:relative;display:block;width:26px;height:13px;flex:none}
.menu-bars i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .5s cubic-bezier(.2,.7,.2,1),top .5s cubic-bezier(.2,.7,.2,1),width .4s}
.menu-bars i:first-child{top:0}
.menu-bars i:last-child{top:12px}
.menu-btn:hover .menu-bars i:last-child{transform:scaleX(.72);transform-origin:left center}
.menu-bars.is-x{width:28px;height:28px}
.menu-bars.is-x i{top:14px;transform:rotate(45deg)}
.menu-bars.is-x i:last-child{transform:rotate(-45deg)}
.mv-close:hover .menu-bars.is-x i{transform:rotate(0)}
.menu-ov{--mvw:min(560px,46vw);position:fixed;inset:0;z-index:40;color:#F6ECE9;background:rgba(18,8,10,0);transition:background .7s ease}
.menu-ov.is-open{background:rgba(18,8,10,.46)}
.mv-panel{position:absolute;top:0;bottom:0;right:0;width:var(--mvw);transform:translate3d(102%,0,0);transition:transform .72s cubic-bezier(.76,0,.24,1)}
.mv-p1{background:var(--shinsha);transition-delay:0s}
.mv-p2{background:linear-gradient(160deg,#5A1320,#3E0C14 70%);transition-delay:.1s}
.menu-ov.is-open .mv-panel{transform:none}
.mv-in{position:absolute;top:0;bottom:0;right:0;width:var(--mvw);display:flex;flex-direction:column;padding:calc(var(--band) + var(--bar) + 20px) clamp(28px,4vw,64px) 36px;overflow-y:auto;overscroll-behavior:contain}
.mv-eyebrow,.mv-foot{font-size:11.5px;letter-spacing:.2em;color:rgba(246,236,233,.6);opacity:0;transition:opacity .6s ease}
.mv-eyebrow i,.mv-foot i{opacity:.5;margin:0 6px}
.mv-foot{margin-top:28px;letter-spacing:.14em}
.menu-ov.is-open .mv-eyebrow{opacity:1;transition-delay:.3s}
.menu-ov.is-open .mv-foot{opacity:1;transition-delay:.7s}
.mv-list{list-style:none;margin:auto 0;padding:24px 0 0}
.mv-list a{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"no label" "no sub";align-items:baseline;padding:13px 0 12px;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),padding-left .3s}
.mv-list li:first-child a{border-top:1px solid rgba(255,255,255,.14)}
.mv-list a:hover{padding-left:6px}
.menu-ov.is-open .mv-list a{opacity:1;transform:none}
.menu-ov.is-open .mv-list li:nth-child(1) a{transition-delay:.3s}
.menu-ov.is-open .mv-list li:nth-child(2) a{transition-delay:.36s}
.menu-ov.is-open .mv-list li:nth-child(3) a{transition-delay:.42s}
.menu-ov.is-open .mv-list li:nth-child(4) a{transition-delay:.48s}
.menu-ov.is-open .mv-list li:nth-child(5) a{transition-delay:.54s}
.menu-ov.is-open .mv-list li:nth-child(6) a{transition-delay:.6s}
.menu-ov.is-open .mv-list li:nth-child(7) a{transition-delay:.66s}
.mv-no{grid-area:no;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(246,236,233,.5)}
.mv-label{grid-area:label;font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.2vh,36px);letter-spacing:.14em;line-height:1.35;color:#fff}
.mv-sub{grid-area:sub;font-size:11.5px;letter-spacing:.12em;line-height:1.7;color:rgba(246,236,233,.6)}
.mv-list a[aria-current="page"] .mv-label{color:#F0C9B5}
.mv-list a[aria-current="page"] .mv-no::after{content:"";display:inline-block;width:14px;height:1px;background:#F0C9B5;margin-left:6px;vertical-align:middle}
.mv-close{position:absolute;z-index:2;top:calc(var(--band) + (var(--bar) - 44px) / 2);right:calc(var(--gut) - 10px);width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;opacity:0;transition:opacity .45s ease .35s}
.menu-ov.is-open .mv-close{opacity:1}
.menu-ov :focus-visible{outline-color:#F0C9B5}
body.menu-open{overflow:hidden}
@media (max-width:760px){
  .menu-word{display:none}
  .menu-btn{padding:10px 0 10px 10px}
  .menu-ov{--mvw:100%}
  .menu-ov.is-open{background:rgba(18,8,10,.2)}
  .mv-in{padding:calc(var(--band) + var(--bar) + 12px) var(--gut) max(28px,env(safe-area-inset-bottom))}
  .mv-label{font-size:clamp(26px,7.4vw,34px)}
  .mv-list a{padding:12px 0 11px}
}
@media (prefers-reduced-motion:reduce){
  .menu-ov,.mv-panel,.mv-list a,.mv-eyebrow,.mv-foot,.mv-close,.menu-bars i{transition:none!important}
  .mv-list a:hover{padding-left:0}
}

/* トップ:ヒーローが見えている間はドックを隠す(カードの矢印に重ねない) */
@media (max-width:760px){
  .dock{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s}
  body.dock-hide .dock{transform:translateY(140%);opacity:0;pointer-events:none}
}

/* ===== 作品ページ:一点を回して見る(実写の面を重ね、横ドラッグで切り替える) ===== */
.turn{position:relative}
.turn-stage{position:relative;margin:0;aspect-ratio:1/1;background:var(--air-deep);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.turn.is-drag .turn-stage{cursor:grabbing}
.turn-stage:focus-visible{outline-offset:-2px}
.turn-frames{position:absolute;inset:0}
.turn-frame{position:absolute;inset:0;aspect-ratio:auto;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
.turn-frame.is-on{opacity:1;z-index:1}
.turn.is-drag .turn-frame{transition-duration:.14s}
.turn-frame img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none;transition:none}
.turn-stage .stamp{z-index:2}
.turn-ctl{display:flex;align-items:center;gap:14px;margin-top:12px}
.turn-btn{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--rule);background:transparent;cursor:pointer;color:var(--ink);transition:border-color .25s,color .25s}
.turn-btn:hover{border-color:var(--ink)}
.turn-ind{flex:1;display:flex;gap:4px;height:12px;align-items:center}
.turn-ind i{flex:1;height:1px;background:var(--rule);transition:background .3s,height .3s}
.turn-ind i.is-on{height:2px;background:var(--shinsha)}
.turn-count{font-size:12px;color:var(--grey);letter-spacing:.04em;white-space:nowrap}
.turn-cap{font-size:12px;letter-spacing:.14em;color:var(--ink-soft);margin-top:10px;line-height:1.8}
.turn + .gallery-thumbs{margin-top:14px}
@media (prefers-reduced-motion:reduce){
  .turn-frame,.turn-ind i,.turn-btn{transition:none}
}

/* ===== 同じ釉、同じ窯、違う赤(釉の色のページ / トップ) ===== */
.akai{background:#17100F;color:#F6ECE9;padding:104px 0 112px}
.akai .when{color:rgba(246,236,233,.6)}
.akai .when .t{color:var(--dawn)}
.akai .title{color:#fff}
.akai .sec-lead{color:rgba(246,236,233,.78)}
.akai-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px 20px}
.akai-tile{display:block;color:inherit}
.akai-tile .ph{aspect-ratio:1/1;background:#241A19}
.akai-tile:hover .ph img{transform:scale(1.025)}
.akai-cap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-size:12px;letter-spacing:.1em;color:rgba(246,236,233,.65);line-height:1.7}
.akai-cap b{font-family:var(--disp);font-weight:400;font-size:14.5px;letter-spacing:.08em;color:#fff}
.akai-cap .no{font-size:11px}
.akai-fallback{font-size:13px;color:rgba(246,236,233,.7);line-height:2}
.akai-fallback a{border-bottom:1px solid currentColor}
.akai-foot{margin-top:40px;border-top:1px solid rgba(246,236,233,.25);padding-top:4px}
.akai-foot .linkline{color:#fff}
.akai-foot .linkline:hover{color:var(--dawn)}
.akai.is-compact{padding:88px 0 96px}
@media (max-width:760px){
  .akai{padding:64px 0 72px}
  .akai-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .akai-row::-webkit-scrollbar{display:none}
  .akai-tile{flex:0 0 min(72vw,300px);scroll-snap-align:start}
  .akai-row::after{content:"";flex:0 0 1px}
}
@media (prefers-reduced-motion:reduce){
  .akai-tile:hover .ph img{transform:none}
}

.akai .title .nb{display:inline-block;white-space:nowrap}

/* ================= 04:52 未明:釉が揺らめく・流れる時・熾火の明滅(2026-11-08) =================
   札のうしろ一面に辰砂の釉面(写真)を大きく寄せて敷く(app.js initHaze)。
   ・窯の炎:面の下 60% だけを熱が立ちのぼるように歪ませる(SVG フィルタ、760px 超のみ)。
   写真は面と同じ大きさの箱の background として寄せる(transform で拡大した <img> や、常時 will-change の層は作らない。
   合成層が巨大になって描き残しの矩形が出たため)。流れは translate だけ(scale は毎コマ描き直しになる)。
     その上を、柔らかな光の帯がゆっくり上へ流れ(.hero-heat w/c)、
     燃える炎の色が 辰砂の赤 → 紫紅の紫 → 瑠璃・呉須の青 → 赤 と 54 秒で一巡する(.hero-tint v/b、.hero-fire r/b)。
     急な明滅は置かない(稲光に見える)。どの変わり目も 7 秒以上かけて、息のように連続して移る。
   ・流れる時:釉がゆっくり垂れる(.hero-yu-flow)。写真は一枚(溶け替えは描き直しの途中で矩形が見えたのでやめた)。
     下へ読み進めるほど、未明の暗がりから日の出の暖かな光へ寄る(--dawn、app.js が 0→1)。
   絵・図形・粒は描かない。写真と光だけ。言葉の載る側は暗く落として読めるようにする。
   .hero.is-still のあいだ(画面外・タブが隠れている)は、すべての動きを止める。 */
.hero{--dawn:0;--ov:38 6 12} /* --ov:言葉の側を暗く落とす色。赤の相は辰砂の闇、青の相は未明の群青へ(app.js が刻む) */
.hero-yu{position:absolute;inset:-6%;z-index:-1;overflow:hidden;opacity:0;transition:opacity 2.4s ease}
.hero-yu.is-in{opacity:1}
.hero-yu-flow{position:absolute;inset:0;transform-origin:50% 0;will-change:transform}
.hero-yu-base{position:absolute;inset:0;opacity:.62}
.hero-yu-heat{position:absolute;left:0;right:0;top:40%;bottom:0;opacity:.62;overflow:hidden;filter:url(#hero-haze);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
.hero-yu-heat-in{position:absolute;left:0;right:0;top:-66.667%;height:166.667%}
.hero-yu.has-heat .hero-yu-base{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 58%);mask-image:linear-gradient(180deg,#000 40%,transparent 58%)}
/* 一枚の写真:面と同じ箱に、--op の点を合わせて 2.3 倍に寄せる(background-position の % は、画像と箱の同じ割合の点を重ねる) */
.hero-yu-img{--op:32% 40%;position:absolute;inset:0;background-repeat:no-repeat;background-size:230% auto;background-position:var(--op);opacity:0}
.hero-yu-img.is-cur{opacity:1}
.hero-haze-def{position:absolute;width:0;height:0;overflow:hidden}
/* 立ちのぼる熱:柔らかな光の帯が、下から上へ流れつづける(帯は上半分と下半分で同じ模様。半分流れたら元に戻しても継ぎ目がない)。
   色は淡い生成りにして、下の色味(赤・紫・青)がそのまま透ける一枚だけにする */
.hero-heat{position:absolute;inset:0;overflow:hidden;opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 62%);mask-image:linear-gradient(180deg,transparent 18%,#000 62%)}
.hero-heat i{position:absolute;left:-10%;right:-10%;top:0;height:200%;will-change:transform;background-size:100% 50%;background-repeat:repeat-y;background-image:radial-gradient(58% 11% at 30% 10%,rgba(255,214,190,.26),rgba(255,214,190,0) 70%),radial-gradient(46% 8% at 74% 22%,rgba(255,200,180,.22),rgba(255,200,180,0) 70%),radial-gradient(64% 9% at 48% 34%,rgba(255,224,200,.2),rgba(255,224,200,0) 70%),radial-gradient(40% 7% at 18% 44%,rgba(255,200,180,.18),rgba(255,200,180,0) 70%)}
/* 炎の色:辰砂の赤 → 紫紅の紫 → 瑠璃・呉須の青 → 赤。54 秒で一巡、どの変わり目も 7 秒以上かけて息のように移る。
   色味(.hero-tint、写真に重ねる色)と、札のうしろの灯り(.hero-fire、光として足す)の二組。
   不透明度は app.js が 1 秒に 8 回、なめらかな関数で刻む(CSS animation にすると層が一枚ずつ合成され、
   面いっぱいの層が十数枚になって GPU の記憶が尽き、文字や札が描き残しで消えた) */
.hero-tint{position:absolute;inset:0;pointer-events:none}
.hero-tint.v{background:linear-gradient(90deg,rgba(84,30,88,.3) 0%,rgba(96,36,100,.5) 55%,rgba(84,30,88,.44) 100%);opacity:0}
.hero-tint.b{background:linear-gradient(90deg,rgba(22,33,58,.5) 0%,rgba(47,74,126,.74) 55%,rgba(40,66,118,.7) 100%);opacity:0}
.hero-fire{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.hero-fire.r{background:radial-gradient(52% 46% at 64% 62%,rgba(196,42,30,.7),rgba(196,42,30,0) 72%);opacity:.55}
.hero-fire.b{background:radial-gradient(52% 46% at 64% 62%,rgba(80,120,210,.7),rgba(80,120,210,0) 72%);opacity:0}
/* 日の出へ:--dawn が 1 に近づくほど、下から暖かな光が差し、暗がりが薄れる */
.hero-dawn{position:absolute;inset:0;opacity:var(--dawn);background:linear-gradient(0deg,rgba(255,172,92,.5),rgba(255,140,80,.18) 42%,rgba(255,140,80,0) 78%)}
.hero-yu::after{content:"";position:absolute;inset:0;opacity:calc(1 - var(--dawn) * .3);background:linear-gradient(90deg,rgb(var(--ov) / .8) 0%,rgb(var(--ov) / .66) 38%,rgb(var(--ov) / .4) 62%,rgb(var(--ov) / .5) 100%)}
/* 熾火:札のうしろで、暗い赤と明るい赤のあいだをゆっくり往復する。周期の違う二枚を重ねて、同じ明滅が続かないようにする */
.hero-ember{position:absolute;inset:-10%;pointer-events:none;opacity:.45} /* 明滅は app.js が刻む */
.hero-ember.a{background:radial-gradient(38% 34% at 66% 46%,rgba(214,62,46,.62) 0%,rgba(214,62,46,0) 72%)}
.hero-ember.b{background:radial-gradient(30% 40% at 60% 56%,rgba(250,118,72,.4) 0%,rgba(250,118,72,0) 70%)}
@media (prefers-reduced-motion:no-preference){
  .hero-yu-flow{animation:hero-yu-flow 110s cubic-bezier(.4,0,.6,1) infinite alternate}
  @keyframes hero-yu-flow{from{transform:translate3d(0,-1.8%,0)}to{transform:translate3d(0,1.8%,0)}}
  .hero-heat i{animation:hero-heat-rise 30s linear infinite}
  @keyframes hero-heat-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
  .hero.is-still .hero-yu-flow,.hero.is-still .hero-heat i{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .hero-yu,.hero-yu-flow,.hero-yu-img,.hero-heat,.hero-heat i{animation:none!important;transition:none!important}
  .hero-heat{opacity:.35}.hero-tint.v{opacity:.25}.hero-tint.b{opacity:0}.hero-fire.r{opacity:.45}.hero-fire.b{opacity:0}
  .hero-ember.a{opacity:.5}.hero-ember.b{opacity:.3}
}
@media (max-width:900px){
  .hero-yu-img{background-size:300% auto}
  .hero-yu-base,.hero-yu-heat{opacity:.6}
  /* 縦組み:上の言葉の下は暗く、札のまわりは明るめに */
  .hero-yu::after{background:linear-gradient(180deg,rgb(var(--ov) / .84) 0%,rgb(var(--ov) / .62) 30%,rgb(var(--ov) / .36) 52%,rgb(var(--ov) / .6) 80%,rgb(var(--ov) / .78) 100%)}
  .hero-fire.r{background:radial-gradient(60% 34% at 50% 54%,rgba(196,42,30,.7),rgba(196,42,30,0) 72%)}
  .hero-fire.b{background:radial-gradient(60% 34% at 50% 54%,rgba(80,120,210,.7),rgba(80,120,210,0) 72%)}
  .hero-tint.v{background:linear-gradient(180deg,rgba(84,30,88,.3) 0%,rgba(96,36,100,.5) 50%,rgba(84,30,88,.44) 100%)}
  .hero-tint.b{background:linear-gradient(180deg,rgba(22,33,58,.5) 0%,rgba(47,74,126,.74) 50%,rgba(40,66,118,.7) 100%)}
  .hero-ember.a{background:radial-gradient(44% 30% at 50% 50%,rgba(214,62,46,.62) 0%,rgba(214,62,46,0) 72%)}
  .hero-ember.b{background:radial-gradient(34% 36% at 46% 58%,rgba(250,118,72,.4) 0%,rgba(250,118,72,0) 70%)}
}

/* 05:00 泰明窯について:ヒーローの直後に、誰の窯かを短く伝える(紙の地) */
.about{background:var(--paper);color:var(--ink);padding:88px 0 92px}
.about-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.about .when .t{color:var(--shinsha)}
.about .title{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.2vw,40px);line-height:1.45;margin:14px 0 0;letter-spacing:.04em}
.about .lead{font-family:var(--disp);font-size:clamp(16px,1.5vw,19px);line-height:2;margin:0 0 28px;color:var(--ink)}
.about-dl{margin:0;border-top:1px solid var(--rule)}
.about-dl>div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.about-dl dt{color:var(--grey);font-size:13px;letter-spacing:.12em;padding-top:2px}
.about-dl dd{margin:0;line-height:1.85;font-size:15px}
.about-links{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px}
@media (max-width:760px){
  .about{padding:64px 0 68px}
  .about-in{grid-template-columns:1fr;gap:22px}
  .about-dl>div{grid-template-columns:4.5em 1fr;gap:12px}
}
.about .title .nb{display:inline-block;white-space:nowrap}

/* 2026-11-08 i:チラつき対策。炎の色は一枚の帯を CSS で滑らせるだけにする。
   白い光の帯・札ごとに明るさが変わる灯り・JS で段々に変えていた層はやめる */
.hero-heat,.hero-tint,.hero-fire{display:none!important}
.hero-hue{position:absolute;left:0;right:0;top:0;height:400%;pointer-events:none;opacity:.72;will-change:transform;
  background:linear-gradient(180deg,#8E1E2C 0%,#7A2346 18%,#55306A 38%,#2F4A7E 62%,#26407A 80%,#26407A 100%);
  animation:hero-hue 6s ease-in-out infinite alternate}
@keyframes hero-hue{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-75%,0)}}
.hero.is-still .hero-hue{animation-play-state:paused}
.hero-ember.a,.hero-ember.b{opacity:.4!important;transition:none!important}
.hero-glow{transition:opacity 5s ease-in-out!important}
.hero-glow.is-on{opacity:.45!important}
@media (prefers-reduced-motion:reduce){.hero-hue{animation:none;transform:none}}