/* kasaneart.com v1 r2 — 方向A「襲の端」＋今のロゴ(L0)／handoff_A_L0.md ＋ 追補1（最初の画面・押せる大きさ）に従う。食い違いは追補1が優先
   色：地 #E8E1D8／紙 #F6F2EA／印刷紙 #FFFFFF（最初の画面の2枚の紙の余白だけ）／文字3色＝墨 #1F2A2B・薄墨 #5B605E・朱 #A53A1C（黒ボタンの文字だけ紙色）
   書体：Gilda Display／Albert Sans／Zen Old Mincho（Google Fonts）
   文字の段(7)：13・14・16・20・28・44・72（スマホ：72→40、44→28。追補1で t1 12→13、t7 スマホ 44→40）
   余白(3)：S16／M40／L104（スマホL56）。境目は600pxの1か所だけ。明るい表示だけ
   帯48px・端の線8px（上4＋下4）・ナビ（スマホ64px）は追補1 */
:root{--rise:12px;--fade:1.2s;--lag:.3s;--bg:#E8E1D8;--paper:#F6F2EA;--print:#FFFFFF;--ink:#1F2A2B;--sub:#5B605E;--link:#A53A1C;--frame:#D9D4CC;
  --S:16px;--M:40px;--L:104px;--gx:var(--L);--navh:88px;--markh:40px;--logow:160px;--hem:48px;--edge:8px;--t7:72px}
@media (max-width:600px){:root{--L:56px;--gx:var(--S);--navh:64px;--markh:32px;--logow:120px;--t7:40px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Albert Sans",system-ui,sans-serif;font-size:16px;line-height:1.7}
body.has-bar{padding-bottom:80px}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:var(--S);top:-72px;background:var(--ink);color:var(--paper);padding:0 var(--S);line-height:48px;z-index:20}
.skip:focus{top:var(--S)}

/* 書体の段 */
h1,h2,h3{font-family:"Gilda Display",serif;font-weight:400;margin:0 0 var(--S)}
.t7{font-size:var(--t7);line-height:1.05;margin-bottom:var(--S)}
h1.t6,h2{font-size:44px;line-height:1.1}
h3{font-size:28px;line-height:1.2}
p{margin:0 0 var(--S);max-width:34em}
.jp{font-family:"Zen Old Mincho",serif;font-size:14px;letter-spacing:.3em;color:var(--sub);margin:0 0 var(--S)}
.small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.sub{color:var(--sub)}
@media (max-width:600px){h1.t6,h2{font-size:28px}}

/* ナビ（Etsy ↗ はスマホでも常に出す） */
.nav{display:flex;justify-content:space-between;align-items:center;height:var(--navh);padding:0 var(--gx);position:relative}
.brand{display:flex;align-items:center;gap:var(--S);min-height:48px}
.brand img{height:var(--markh);width:auto;display:block}
.brand b{font-family:"Gilda Display",serif;font-weight:400;font-size:20px;letter-spacing:.28em}
.links{display:flex;align-items:center;gap:var(--M);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.links a{line-height:48px;display:inline-block;min-width:48px;text-align:center}
.ext{color:var(--link);font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:48px;display:inline-block}
.menu{display:none;position:static}
.menu summary{list-style:none;cursor:pointer;font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:48px;min-width:48px;text-align:center}
.menu summary::-webkit-details-marker{display:none}
.menu .panel{position:absolute;right:var(--gx);top:var(--navh);background:var(--paper);padding:var(--S);display:flex;flex-direction:column;z-index:10;box-shadow:0 2px 12px rgba(31,42,43,.12);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.menu .panel a{line-height:48px;padding:0 var(--S)}
@media (max-width:600px){
  .brand b{font-size:16px}
  .links{gap:var(--S)}
  .links .l-pc{display:none}
  .menu{display:block}
}

/* ボタン */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 var(--M);font-size:14px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.off{border-color:var(--frame);color:var(--ink);background:var(--frame);cursor:default}

/* トップの最初の画面（追補1） */
.home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
.hero{position:relative;flex:1;display:grid;grid-template-columns:5fr 7fr;align-items:center;min-height:0}
.hero .copy{padding:0 var(--M) 0 var(--L)}
.hero .what{font-weight:600;color:var(--ink);margin:0 0 var(--M);letter-spacing:.02em;max-width:none}
.duo{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.slot{position:absolute;aspect-ratio:.762;margin:0;animation:fadein .8s ease-out both}
.pic{position:absolute;inset:0;margin:0;background:var(--print);padding:var(--S);box-shadow:0 10px 30px rgba(31,42,43,.18);opacity:0;transform:translateY(var(--rise));transition:opacity var(--fade) ease-out,transform var(--fade) ease-out}
.pic.on{opacity:1;transform:none}
.slot.u .pic{transition-delay:var(--lag)}
[data-hero="zen"] .slot.u .pic{transition-delay:0s}
[data-hero="zen"] .slot.z .pic{transition-delay:var(--lag)}
.pic img{display:block;width:100%;height:100%;object-fit:contain}
.pause{position:absolute;right:var(--S);bottom:0;z-index:5;height:48px;min-width:48px;padding:0 var(--S);border:0;background:transparent;color:var(--sub);font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
/* 主役＝浮世絵002（既定）。<body data-hero="zen"> で禅010が主役に戻る（札・重なり・帯の順も入れ替わる） */
.slot.u{height:min(78%,620px);z-index:3;transform:translate(18%,5%)}
.slot.z{height:min(70%,560px);z-index:1;transform:translate(-42%,-10%);animation-delay:.12s}
[data-hero="zen"] .slot.z{height:min(78%,620px);z-index:3;transform:translate(18%,5%);animation-delay:0s}
[data-hero="zen"] .slot.u{height:min(70%,560px);z-index:1;transform:translate(-42%,-10%);animation-delay:.12s}
.pic figcaption{position:absolute;left:var(--S);bottom:calc(var(--S) * -1 - 24px);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);white-space:nowrap;display:none}
.slot.u .pic figcaption{display:block}
[data-hero="zen"] .slot.u .pic figcaption{display:none}
[data-hero="zen"] .slot.z .pic figcaption{display:block}
@media (max-width:600px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start}
  .duo{order:-1;height:min(56svh,470px);margin-top:var(--S)}
  .pic{padding:10px}
  .pause{right:0;bottom:-40px}
  .slot.u{height:86%;transform:translate(9%,6%)}
  .slot.z{height:72%;transform:translate(-22%,-14%)}
  [data-hero="zen"] .slot.z{height:86%;transform:translate(9%,6%)}
  [data-hero="zen"] .slot.u{height:72%;transform:translate(-22%,-14%)}
  .pic figcaption,.slot.u .pic figcaption,[data-hero="zen"] .slot.z .pic figcaption{display:none!important}
  .hero .copy{padding:var(--M) var(--S) var(--S)}
  .hero .copy .jp{display:none}
  .hero .what{margin-bottom:var(--S);font-size:14px}
}

/* シリーズの色 */
.s-zen{--omote:#F7F5EF;--ura:#8FA382;--e1:#F7F5EF;--e2:#8FA382}
.s-ukiyo{--omote:#F6E9E1;--ura:#CB4C25;--ura2:#183132;--e1:#CB4C25;--e2:#183132}
.s-kawaii{--omote:#F8E6EA;--ura:#D9607A;--e1:#F8E6EA;--e2:#D9607A}
.s-about{--omote:#F6F2EA;--ura:#183132;--e1:#F6F2EA;--e2:#183132}

/* 帯（hem）：高さ48px・端の線8px（上4＋下4） */
.hems{display:flex;flex-direction:column}
.hem{display:flex;align-items:center;height:var(--hem);font-size:14px;letter-spacing:.14em;text-transform:uppercase;position:relative;background:var(--omote);transition:transform .2s ease-out;animation:rise .4s ease-out backwards;animation-delay:calc(var(--n,0) * .12s);padding-left:calc(var(--gx) + var(--S) * var(--n,0))}
.hem::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--edge);background:linear-gradient(var(--e1) 0 50%,var(--e2) 50% 100%)}
.hem span{padding-top:var(--edge)}
a.hem:hover,a.hem:focus-visible{transform:translateY(-8px)}
.hem em{font-style:normal;font-family:"Zen Old Mincho",serif;letter-spacing:.2em;color:var(--sub);margin-left:var(--S);text-transform:none}
.hem.off{color:var(--sub);cursor:default}
.hem.off small{font-size:13px;margin-left:var(--S);letter-spacing:.14em}
[data-hero="zen"] .hem.s-zen{--n:0;order:1}
[data-hero="zen"] .hem.s-ukiyo{--n:1;order:2}
[data-hero="zen"] .hem.s-kawaii{--n:2;order:3}
@media (max-width:600px){.hem em{display:none}}

/* 層（紙） */
.layer{background:var(--paper);position:relative}
.edge{height:var(--edge);background:linear-gradient(var(--e1) 0 50%,var(--e2) 50% 100%)}
.shead{display:grid;grid-template-columns:1fr auto;gap:var(--M);align-items:end;padding:var(--L) var(--gx) var(--M)}
.shead p.intro{color:var(--sub);max-width:30em;margin:0}
.shead h2,.shead h1{margin-bottom:var(--S)}
@media (max-width:600px){.shead{grid-template-columns:1fr;padding:var(--M) var(--S)}}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--M);padding:0 var(--gx) var(--L);margin:0;list-style:none}
@media (max-width:600px){.grid{grid-template-columns:1fr 1fr;gap:var(--S);padding:0 var(--S) var(--M)}}
.card{display:block;position:relative}
.card .art{display:block;aspect-ratio:3/4;width:100%;box-shadow:0 2px 12px rgba(31,42,43,.12);transition:transform .2s ease-out}
.card .art img{width:100%;height:100%;object-fit:cover;display:block}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ura);transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out;z-index:1}
.card.u2::after{box-shadow:0 3px 0 var(--ura2)}
.card:hover .art,.card:focus-visible .art{transform:translateY(-4px)}
.card:hover::after,.card:focus-visible::after{transform:scaleX(1)}
.card .cap{display:block;font-size:14px;margin-top:var(--S)}
.ph{aspect-ratio:3/4;width:100%;background:var(--frame);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* 重なる層（JSが条件を満たすときだけ .is-stack を付ける） */
.layer{z-index:calc(var(--i,0) + 1)}
.is-stack .layer{position:sticky;top:calc(var(--i,0) * var(--edge));min-height:100vh}

/* How it works */
.how{padding:var(--L) var(--gx)}
.how ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--M);padding:0;margin:var(--M) 0 0}
.how li{border-top:3px solid var(--ink);padding-top:var(--S)}
.how .n{font-family:"Gilda Display",serif;font-size:28px;line-height:1.2;display:block}
.how b{display:block;font-weight:600;margin-bottom:0}
.how li p{margin:0;color:var(--sub);font-size:14px}
@media (max-width:600px){.how{padding:var(--M) var(--S)}.how ol{grid-template-columns:1fr;gap:var(--S)}}

/* About の短い案内（トップ） */
.about-short{padding:var(--L) var(--gx)}
.about-short p{color:var(--sub)}
.about-short a{color:var(--link);font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:48px;display:inline-block}
@media (max-width:600px){.about-short{padding:var(--M) var(--S)}}

/* 作品ページ */
.work{display:grid;grid-template-columns:7fr 5fr;gap:var(--L);padding:var(--M) var(--gx) var(--L)}
.plate{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:var(--L)}
.plate img{width:100%;max-width:440px;display:block;box-shadow:0 6px 24px rgba(31,42,43,.18)}
.work .info{align-self:center}
.buy{background:var(--paper);border-top:3px solid var(--ura);padding:var(--S);margin:0 0 var(--M)}
.buy ul{list-style:none;margin:0 0 var(--S);padding:0;font-size:14px;color:var(--sub)}
.buy li{margin:0}
.buy li b{color:var(--ink);font-weight:600}
.buy .go{margin:0}
.soon{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:0}
.room{margin:var(--M) 0 0}
.room a{display:block}
.room img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.room figcaption{margin-top:var(--S)}
.note{font-size:14px;color:var(--sub);margin-top:var(--M)}
.note a{color:var(--link)}
.lineband{height:var(--edge);background:linear-gradient(var(--e1) 0 50%,var(--e2) 50% 100%)}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--paper);box-shadow:0 -2px 12px rgba(31,42,43,.12);display:flex;align-items:center;justify-content:space-between;gap:var(--S);padding:var(--S) var(--gx)}
.bar .name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar .btn{flex:none}
@media (max-width:600px){
  .work{grid-template-columns:1fr;gap:var(--M);padding:0 0 var(--M)}
  .plate{padding:var(--M)}
  .work .info{padding:0 var(--S)}
  .bar .btn{padding:0 var(--S)}
}
dialog.lb{border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh}
dialog.lb::backdrop{background:rgba(31,42,43,.82)}
dialog.lb img{display:block;max-width:92vw;max-height:92vh;object-fit:contain}
dialog.lb[open]{animation:fadein .2s ease-out both}

/* About */
.about{padding:var(--M) var(--gx) var(--L)}
.about .lead{color:var(--sub);max-width:34em}
.layers{margin-top:var(--M);max-width:880px}
.lay{background:var(--paper);border-top:3px solid var(--ura);padding:var(--M);box-shadow:0 2px 12px rgba(31,42,43,.08)}
.lay p{margin:0;color:var(--sub)}
.lay:nth-child(2){margin-left:var(--M);margin-top:calc(var(--S) * -1);position:relative}
.lay:nth-child(3){margin-left:calc(var(--M) * 2);margin-top:calc(var(--S) * -1);position:relative}
@media (max-width:600px){
  .about{padding:var(--S) var(--S) var(--M)}
  .lay{padding:var(--S)}
  .lay:nth-child(2){margin-left:var(--S)}
  .lay:nth-child(3){margin-left:calc(var(--S) * 2)}
}

/* 404 */
.nf{padding:var(--L) var(--gx)}

/* フッター（地は #E8E1D8 のまま） */
.foot{background:var(--bg);padding:var(--M) var(--gx);display:flex;flex-wrap:wrap;gap:var(--M);align-items:flex-end;justify-content:space-between}
.foot img{width:var(--logow);height:auto;display:block}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--M);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.foot nav a{line-height:48px}
.foot .copy{flex-basis:100%;font-size:13px;color:var(--sub);margin:0}

/* 動き（位置と不透明度だけ） */
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* r4：関門の直し（押せる高さ48px・Coming soonは墨・部屋の写真の注記） */
.shead h2 a{display:inline-flex;align-items:center;min-height:48px}
.roomnote{font-size:13px;color:var(--sub);margin:var(--S) 0 0;max-width:none}

/* r6：トップは各シリーズ4点＋「全部見る」 */
.viewall{margin:calc(var(--M) * -1) 0 0;padding:0 var(--gx) var(--M);max-width:none}
.viewall a{display:inline-flex;align-items:center;min-height:48px;color:var(--link);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:600px){.viewall{margin:0;padding:0 var(--S) var(--M)}}

/* r7：トップの重なる層を、画面の高さが低いPC（高さ650px以上）でも収める。作品は4点のまま、画面の高さに合わせて作品を縮め、見出しの上下の余白も詰める。
   650px未満は収まらないので、これまでどおり縦並び（JSが判定）。スマホ（600px以下）は変えない */
@media (min-width:601px){
  .stack .shead{padding-top:clamp(24px,calc((100vh - 560px) * .4),var(--L));padding-bottom:clamp(16px,calc((100vh - 560px) * .1),var(--M))}
  .stack .grid{padding-bottom:var(--S)}
  .stack .viewall{margin:0;padding-bottom:var(--S)}
  .stack .card,.stack .ph{width:min(100%,calc((100vh - 430px) * .75))}
}

/* r8：最初の画面の絵の切り替え（追補2）。「動きを減らす」設定は組1で止める（JSも動かさない）。作品は切り抜かない（contain） */
@media (prefers-reduced-motion:reduce){.pic{transition:none;transform:none}.pause{display:none}}

/* r12：追補3 案C「春・夏・秋」。季節の一字（Zen Old Mincho 900・朱10%）を見出しの列の後ろ・左下に置き、絵の組と一緒に入れ替わる（不透明度だけ・1.2秒）。止まる条件は絵と同じ（「動きを減らす」設定では「春」で止まる）。押せない・読み上げない（aria-hidden・lang="ja"）。
   墨の文字（見出し・一文・ボタン）の後ろには置いてよい。薄墨・朱の文字（和文の添え・札・Pause・帯）の後ろには置かない */
.typebox{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;user-select:none}
.type{position:absolute;line-height:1;white-space:nowrap}
.t-c{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:min(52svh,380px);color:rgba(203,76,37,.10);left:calc(var(--L) - 24px);bottom:-10%;width:1em;height:1em}
.t-c span{position:absolute;left:0;top:0;opacity:0;transition:opacity var(--fade) ease-out}
.t-c span.on{opacity:1}
.hero .copy{position:relative;z-index:4}
@media (max-width:600px){.t-c{font-size:150px;left:auto;right:var(--S);bottom:0}}
@media (prefers-reduced-motion:reduce){.t-c span{transition:none}}

/* r10：Follow KASANE・Save to Pinterest */
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--S) var(--M)}
.follow .small{margin:0}
.follow a{font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:48px}
.share{margin:0 0 var(--M)}
.share a{display:inline-flex;align-items:center;height:48px;padding:0 var(--M);font-size:14px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink)}