:root{
  --field:#dfe4e6;      /* 列の外側。淡い青灰（日傘の女の空から） */
  --paper:#f4f2ed;      /* 列の中 */
  --tint:#dfd7c8;       /* ヒーローの地 */
  --ink:#1c1b19;
  --sub:#7d786e;
  --line:#ded9cf;
  --col:600px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:60px}
body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Jost",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:300; font-size:14px; line-height:2.05; letter-spacing:.05em;
  font-feature-settings:"palt" 1;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.en{font-family:"Jost",sans-serif; font-weight:300; letter-spacing:.16em}

.col{width:min(100%,var(--col)); margin-inline:auto; background:var(--paper);
     min-height:100vh; box-shadow:0 0 0 1px #00000008;
     overflow:hidden;
     /* ヘッダーは .col の外に出して position:fixed で固定しているので、
        ここで overflow を切っても追従には影響しない。
        ヘッダーの高さぶんだけ中身を下げる。 */
     padding-top:55px}
.pad{padding-inline:26px}

/* ===== ヘッダー ===== */
/* ヘッダーは画面に固定する。
   sticky を .col の中に置くと、.col の overflow に左右されるうえ、
   スマホでスクロール中に位置が揺れることがあった。
   fixed なら画面が基準になるので、どの端末でも同じ位置に留まる。 */
.hd{position:fixed; top:0; left:0; right:0; z-index:60;
    width:min(100%, var(--col)); margin-inline:auto;
    background:var(--paper); border-bottom:1px solid var(--line)}
/* PCだけ、うっすら透けさせる（スマホではぼかしがスクロールを重くする） */
@media (min-width:1081px){
  .hd{background:rgba(244,242,237,.9);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
}
.hd-in{display:flex; align-items:center; justify-content:space-between; height:54px}
.logo{font-family:"Jost",sans-serif; font-weight:400; font-size:13px; letter-spacing:.26em}
.nav{display:flex; gap:18px; font-family:"Jost",sans-serif; font-size:10px;
     letter-spacing:.18em; color:var(--sub)}
.nav a{transition:color .2s}
.nav a:hover{color:var(--ink)}
/* 現在いるページ */
.nav a[aria-current="page"]{color:var(--ink); text-decoration:underline;
     text-underline-offset:5px; text-decoration-thickness:1px}

/* ===== ヒーロー（縦組みのタイトルを写真に直接置く） ===== */
.hero{background:var(--paper); padding:0; container-type:inline-size}

.hero-stage{position:relative; color:var(--ac2, #b6412f)}
.hero-photo{width:100%; display:block}

/* 左に薄い陰りを敷いて、白い文字を必ず読めるようにする（帯は置かない） */
.hero-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(102deg, rgba(22,19,16,.50) 0%, rgba(22,19,16,.22) 30%,
                             rgba(22,19,16,.05) 52%, rgba(22,19,16,0) 66%)}

.hero-ttl{position:absolute; left:5.5%; top:6%; margin:0; writing-mode:vertical-rl;
  font-weight:300; font-size:9.2cqw; line-height:1.18; letter-spacing:.02em;
  color:#fff; text-shadow:0 .3cqw 2cqw rgba(0,0,0,.5)}
.hero-sub{position:absolute; left:6.2%; bottom:6%; margin:0; writing-mode:vertical-rl;
  font-size:2.1cqw; letter-spacing:.28em; color:rgba(255,255,255,.9);
  text-shadow:0 .2cqw 1.4cqw rgba(0,0,0,.55)}

.hero-line{position:absolute; left:46%; top:33%; width:34%; height:20%; overflow:visible}
.hero-zoom{position:absolute; right:4%; top:11%; width:33%; aspect-ratio:1;
  border-radius:50%; overflow:hidden; border:3px solid var(--paper);
  box-shadow:0 1.6cqw 3.4cqw rgba(0,0,0,.26);
  animation:ab-sway 5.2s ease-in-out infinite}   /* ABOUTの黒猫と同じ揺れ */
.hero-zoom img{width:100%; height:100%; object-fit:cover}

/* キャプションは1行ずつ別の白帯にする */
.hero-cap{position:absolute; right:3%; top:43.5%; margin:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:1.3cqw}
.hero-cap span{background:rgba(244,242,237,.95); padding:1.2cqw 2.4cqw;
  font-size:2.9cqw; line-height:1.75; letter-spacing:.04em; color:#2a2622;
  box-shadow:0 .7cqw 1.8cqw rgba(0,0,0,.13)}
.hero-cap span:first-child{font-weight:500; color:var(--ac2, #b6412f)}

.hero-jp{margin:0; padding:26px 26px 34px; font-size:12px; line-height:2.4;
         letter-spacing:.02em; color:#3a3833}

/* ===== セクション見出し ===== */
.slabel{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 16px}
.slabel h2{font-family:"Jost",sans-serif; font-weight:300; font-size:19px; letter-spacing:.2em; margin:0}
.slabel span{font-size:10px; color:var(--sub); letter-spacing:.12em}

/* ============================================================
   作品セクション（スクラップブック型）
   .cs-stage を基準にした % 配置。文字は cqw なので列幅に追従する
   ============================================================ */
.cs{padding-bottom:46px}
.cs + .cs{padding-top:38px; border-top:1px solid var(--line)}

.cs-stage{
  position:relative; container-type:inline-size;
  width:100%; aspect-ratio:600/1010; overflow:hidden;
  background:color-mix(in srgb, var(--mk) 26%, var(--paper));
}
.cs-stage > *{position:absolute; margin:0}

/* 番号：作品の色で塗った丸に、白抜きの数字 */
.cs-no{left:6%; top:5.9%; z-index:6;
       width:7.8cqw; height:7.8cqw; border-radius:50%;
       background:var(--ac); color:var(--paper);
       display:grid; place-content:center;
       font-size:2.9cqw; letter-spacing:.08em}

/* 作品名（日本語） */
/* 題名と英題はひとまとまり。題名が2行になっても英題が押し下がるように、
   個別に % で置かず、1つの箱の中で普通に積む。 */
.cs-head{left:17%; right:6%; top:5.8%; z-index:6}
/* .cs-stage の直下ではなくなったので margin:0 が効かない。
   h3 と p の初期マージン（合計40px近く）がそのまま残り、
   英題がバッジや帯まで押し下げられていた。 */
.cs-head > *{margin:0}
/* いちばん長い題（14字）が1行に収まる大きさに全セクションを揃える。
   セクションごとに大きさが変わると、下に続く英題の位置もずれて重なりが出る。 */
.cs-name{position:static; font-weight:500; font-size:5.2cqw;
         line-height:1.15; letter-spacing:.02em; white-space:nowrap}
.cs-name-en{position:static; margin-top:1cqw;
            font-size:2.4cqw; letter-spacing:.2em; color:var(--sub)}

/* 回転バッジ */
.cs-badge{left:2.5%; top:16.5%; width:25%; z-index:6; display:block;
          padding:0; border:0; background:none; cursor:pointer; -webkit-appearance:none}
.cs-ring{width:100%; display:block; animation:spin 26s linear infinite}
.cs-ring text{font-family:"Jost",sans-serif; font-size:7.2px; letter-spacing:1.05px;
              fill:var(--ac)}
.cs-ring-c{position:absolute; inset:0; display:grid; place-content:center; text-align:center;
           font-family:"Jost",sans-serif; font-size:2.1cqw; letter-spacing:.16em;
           line-height:1.55; color:var(--ink)}
.cs-ring-c i{font-style:normal; font-size:1.7cqw; color:var(--ac)}
.cs-ring-c.has-img{inset:19%; display:block; border-radius:50%; overflow:hidden;
                   box-shadow:0 .6cqw 1.8cqw rgba(0,0,0,.20)}
.cs-ring-c.has-img img{width:100%; height:100%; object-fit:cover; display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cs-ring{animation:none}}

/* 傾いた帯コピー */
.cs-band{left:53%; top:17.5%; width:44%; z-index:4;
         transform:rotate(-6deg); transform-origin:left top;
         font-size:2.75cqw; font-weight:500; line-height:2.1; letter-spacing:.03em}

/* メインの切り抜き */
.cs-main{left:24%; top:21%; width:48%; z-index:2}

/* 実写（背景つきの矩形）は、切り抜き用のハロー・フェードを外して写真として見せる */
.cs-main.is-photo{left:22%; width:52%; aspect-ratio:3/4;
                  box-shadow:0 1.4cqw 3.2cqw rgba(0,0,0,.15)}
.cs-main.is-photo img{width:100%; height:100%; object-fit:cover;
                      -webkit-mask-image:none; mask-image:none; filter:none}
.cs-sub2.is-photo{left:17%; top:57%; width:26%; aspect-ratio:9/16;
                  background:var(--paper); padding:1.2cqw;
                  box-shadow:0 .9cqw 2.2cqw rgba(0,0,0,.13)}
.cs-sub2.is-photo img{width:100%; height:100%; object-fit:cover; filter:none}
.cs-main img{-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 98%);
             mask-image:linear-gradient(to bottom,#000 78%,transparent 98%)}
.cs-main img, .cs-sub2 img{
  filter:drop-shadow(0 0 .8cqw #fff) drop-shadow(0 0 .8cqw #fff)
         drop-shadow(0 0 .8cqw #fff) drop-shadow(0 0 2.6cqw rgba(255,255,255,.95))
         drop-shadow(0 1.2cqw 2cqw rgba(0,0,0,.12));
}

/* 元絵（傾けた紙もの） */
.cs-sub1{right:4%; top:43%; width:24%; z-index:3;
         background:var(--paper); padding:1.4cqw; transform:rotate(4.5deg);
         box-shadow:0 .8cqw 2cqw rgba(0,0,0,.11)}
.cs-sub1 figcaption{font-size:1.9cqw; letter-spacing:.18em; color:var(--sub);
                    text-align:center; padding:1cqw 0 .3cqw}

/* 元絵と、作ったデザインを重ねて比較する */
.cs-vs{right:2%; top:33%; width:35%; height:0; padding-bottom:50%; z-index:3}
.cs-vs figure{position:absolute; width:64%; margin:0; background:var(--paper);
              padding:1.3cqw; box-shadow:0 .9cqw 2.2cqw rgba(0,0,0,.15)}
.cs-vs .a{left:0; top:0; transform:rotate(-4.5deg)}
.cs-vs .b{right:0; top:30%; transform:rotate(3.5deg)}
.cs-vs img{width:100%; height:auto}
.cs-vs figcaption{font-size:1.7cqw; letter-spacing:.16em; color:var(--sub); padding:.9cqw 0 .2cqw}
.cs-vs .a figcaption{text-align:left}
.cs-vs .b figcaption{text-align:right}
.cs-vs .b figcaption{color:var(--ac)}
/* 「まざり猫ver」は日本語。Jost だと字が出ないので本文と同じ書体にする。
   cqw だけだとスマホで7px程度まで縮んで読めないため下限を置く。 */
.cs-vs figcaption.ver{font-family:"Zen Kaku Gothic New",sans-serif;
                      letter-spacing:.08em; font-size:max(9.5px, 1.9cqw)}

/* デザイン1枚だけのとき。コメントカードに少しかぶせる */
.cs-vs.solo{right:4%; top:auto; bottom:26%; width:23%;
            padding:0; border:0; background:none; cursor:pointer; font:inherit;
            -webkit-appearance:none; height:auto; z-index:6}
.cs-vs.solo figure{position:static; width:100%; transform:rotate(3.5deg)}
.cs-vs.solo figcaption{text-align:right}

/* 引きの1枚 */
.cs-sub2{left:18%; top:57%; width:18%; z-index:3}

/* 実写の切り抜き（透過WebP）。プレースホルダと同じハローを回す */
.cs-main.is-cutout{left:25%; width:44%}
.cs-main.is-cutout img{-webkit-mask-image:none; mask-image:none;
                       filter:drop-shadow(0 1.2cqw 2.2cqw rgba(0,0,0,.16))}
.cs-sub2.is-cutout{left:15%; top:56%; width:22%}

/* メインの右に重ねる1枚 */
.cs-sub3{left:67%; top:21%; width:29%; z-index:3}
.cs-sub3 img{filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.15))}
.cs-sub2.is-cutout img{filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.15));
                       transform-origin:50% 94%}

/* 左右にカクカク振れる。steps(1) で中間を補間せず、左と右の2状態だけを行き来する */
@keyframes sway-step{
  0%   {transform:rotate(-3.2deg) translateX(-2%)}
  50%  {transform:rotate(3.2deg)  translateX(2%)}
  100% {transform:rotate(-3.2deg) translateX(-2%)}
}

.stage img.is-cutout{filter:drop-shadow(0 1vw 2vw rgba(0,0,0,.14))}
.grid figure.is-cutout a img{width:70%; padding:14px 0 0}

/* 縦書きラベル */
.cs-vt{left:2%; top:34%; z-index:4; display:flex; flex-direction:row-reverse; gap:1.8cqw}
.cs-vt span{writing-mode:vertical-rl; white-space:nowrap; background:var(--paper);
            padding:2.6cqw 1.4cqw; font-size:3.2cqw; font-weight:500; letter-spacing:.14em;
            box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.08)}
.cs-vt span:first-child{transform:rotate(-3deg)}
.cs-vt span:last-child{transform:rotate(2deg); margin-top:3.4cqw}

/* 装飾 */
.deco{z-index:1; opacity:.5}
.deco svg{width:100%; display:block; fill:var(--ac); stroke:var(--ac);
          stroke-linecap:round; stroke-linejoin:round}
.deco.a{right:5%; top:28%; width:8%}
.deco.b{right:15.5%; top:33.5%; width:7%; opacity:.38; transform:rotate(11deg)}

/* 太陽はゆっくり回り、傘はふわふわ浮く */
@keyframes sun-spin{to{transform:rotate(360deg)}}
@keyframes umb-float{
  0%,100%{transform:translate(0,0) rotate(11deg)}
  50%    {transform:translate(-14%,-24%) rotate(3deg)}
}


/* コメントカード */
.cs-card{right:3%; top:72%; width:55%; z-index:5;
         background:var(--paper); padding:6.4cqw 4.6cqw 4.2cqw;
         box-shadow:0 1cqw 2.6cqw rgba(0,0,0,.09)}
.cs-card p{margin:0; font-size:2.9cqw; line-height:2.05; letter-spacing:.02em}

mark{background:linear-gradient(transparent 52%, var(--mk) 52%); color:inherit; padding:0 .08em}

/* セクションの下（作品情報と購入） */
.cs-foot{padding:26px 26px 0}
.cs-foot-top{display:flex; gap:14px; align-items:flex-start;
             border-top:1px solid var(--line); padding-top:18px; margin:0 0 26px}
.cs-sub{font-size:10.5px; color:#aaa294; letter-spacing:.2em; margin:0 0 14px}

/* 商品写真（右に小さく置く） */
.cs-item{flex:0 0 27%; margin:0; text-align:center}
.cs-item img{width:100%; filter:drop-shadow(0 8px 18px rgba(0,0,0,.13))}
.cs-item figcaption{margin-top:9px; font-size:8.5px; letter-spacing:.16em; color:#aaa294}

/* 購入ボタン：番号の丸やモーダルの閉じるボタンと同じ色で揃える */
.buy-main{display:flex; align-items:center; justify-content:center; gap:12px;
          height:56px; border-radius:999px; background:var(--ac); color:var(--paper);
          font-size:13.5px; font-weight:400; letter-spacing:.16em;
          transition:filter .25s, transform .25s}
.buy-main i{font-style:normal; font-size:14px; letter-spacing:0; transition:transform .25s}
.buy-main:hover{filter:brightness(1.08)}
.buy-main:hover i{transform:translateX(4px)}
.buy-main:active{transform:scale(.985)}
.buy-note{margin:14px 0 0; text-align:center; font-size:10.5px; line-height:2;
          letter-spacing:.08em; color:var(--sub)}
.buy-note .en{font-size:10px; letter-spacing:.18em}
.orig-meta{font-size:11px; line-height:1.95; color:var(--sub); margin:0}
.orig-meta b{display:block; font-size:9px; letter-spacing:.22em; color:#aaa294;
             font-weight:400; margin-bottom:5px}
.orig-meta em{display:block; font-style:normal; color:var(--ink); font-size:12.5px}

/* 元になった絵 */
.cs-based{margin:0; font-size:11px; line-height:1.95; color:var(--sub)}
.cs-based em{display:block; font-style:normal; color:var(--ink); font-size:12.5px;
             letter-spacing:.03em; margin-bottom:2px}

/* 元になった絵と商品スペック */
.spec{flex:1 1 auto; min-width:0; margin:0}
.spec div{display:flex; gap:10px; align-items:baseline; padding:4px 0}
.spec dt{flex:0 0 48px; margin:0; font-size:8px; letter-spacing:.12em;
         white-space:nowrap; color:#aaa294}
.spec dd{margin:0; min-width:0; font-size:11px; line-height:1.75; letter-spacing:.02em;
         color:var(--sub)}
/* いちばん長い作品名（三代目大谷鬼次の奴江戸兵衛＝13字）が
   1行に収まる大きさにしている。はみ出すと1文字だけ次行に落ちて見苦しい。 */
.spec dd em{display:block; font-style:normal; font-size:11.5px; color:var(--ink);
            letter-spacing:.01em; margin-bottom:1px}
.buy{display:grid; gap:8px}
.btn{display:flex; align-items:center; justify-content:center; height:48px;
     border:1px solid var(--ink); font-family:"Jost",sans-serif;
     font-size:11px; letter-spacing:.18em}
.btn.ghost{border-color:var(--line); color:var(--sub)}

/* ===== ALL DESIGNS（2列。下端が揃うように最後の1枚が伸びる） ===== */
.dgrid{display:flex; align-items:stretch; gap:12px; margin:0 0 44px}
.dcol{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px}
.dcol figure{margin:0; display:flex; flex-direction:column; min-height:0}
.dcol figure:last-child{flex:1 1 auto}
.dcol figure:last-child a{flex:1 1 auto; display:block; min-height:0}
.dcol img{width:100%; height:100%; object-fit:cover; display:block;
          box-shadow:0 5px 14px rgba(0,0,0,.13)}
.dcol figure:not(:last-child) img{height:auto}
.dcol figcaption{font-size:10px; letter-spacing:.1em; color:var(--sub); padding:9px 2px 0}
.dcol figcaption b{font-family:"Jost",sans-serif; font-weight:400; color:#aaa294; margin-right:7px}

/* ===== MEN'S ／ OTHER ITEMS ===== */
.sec-note{margin:0 0 20px; font-size:12px; line-height:2.15; color:#3a3833}

/* 高さは箱の縦横比から決める。cqw は使わない（コンテナ基準が無い場所だと画面幅に化ける） */
.mens{display:flex; gap:12px; margin:0 0 44px}
.mens figure{flex:1 1 0; min-width:0; margin:0}
.mens .ph{display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
          aspect-ratio:58/100; background:var(--tint)}
.mens .ph img{height:calc(100% * var(--s)); width:auto; max-width:none; display:block}
/* 背景ごとの写真は箱いっぱいに敷く（身長の比は切り出しの段階で入れてある） */
.mens .ph img.is-bg{width:100%; height:100%; object-fit:cover}
.mens figcaption{font-size:10px; letter-spacing:.1em; color:var(--sub);
                 text-align:center; padding:11px 4px 0}

.goods{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 22px}
.goods figure{margin:0; animation:katakata 2s steps(2, jump-none) infinite;
              animation-delay:var(--d, 0s)}
.goods a{display:block}
.goods img{width:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.10))}
.goods figcaption{font-size:10px; letter-spacing:.06em; color:var(--sub);
                  text-align:center; padding:8px 2px 0; line-height:1.6}

/* セクションから別ページへ送るリンク */
.sec-link{display:flex; align-items:center; justify-content:center; gap:11px;
          height:50px; margin:0 0 44px; border:1px solid var(--line);
          font-size:12.5px; letter-spacing:.12em; transition:border-color .25s}
.sec-link:hover{border-color:var(--ink)}
.sec-link i{font-style:normal; font-size:13px; transition:transform .25s}
.sec-link:hover i{transform:translateX(4px)}

/* ===== グリッド ===== */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 44px}
.grid figure{margin:0}
.grid a{display:block; background:var(--tint)}
.grid a img{width:46%; margin:0 auto; padding:16px 0 0}
.grid figcaption{font-size:10px; letter-spacing:.14em; color:var(--sub); padding:8px 2px 0}
.grid figure.is-photo a{background:none}
.grid figure.is-photo a img{width:100%; padding:0; aspect-ratio:3/4; object-fit:cover}

/* ===== ABOUT ===== */
.about{background:var(--tint); padding:40px 26px 44px; margin-top:10px}
.about .lead{font-family:"Jost",sans-serif; font-size:19px; font-weight:300;
             letter-spacing:.1em; line-height:1.7; margin:0 0 20px}
.about p{font-size:13.5px; line-height:2.35; margin:0 0 1.4em}
.about .btn{background:var(--paper); border-color:var(--paper)}

/* ===== フッター ===== */
.ft{padding:38px 26px 40px; font-size:11.5px; color:var(--sub)}
.ft h3{font-family:"Jost",sans-serif; font-size:9px; letter-spacing:.24em;
       color:#aaa294; font-weight:400; margin:0 0 8px}
.ft ul{list-style:none; margin:0 0 26px; padding:0; line-height:2.2}
.ft-btm{margin-top:14px; padding-top:16px; border-top:1px solid var(--line);
        display:flex; justify-content:space-between; font-size:10px}
.note{background:#d8d1c2; color:#5f5949; font-family:"Jost",sans-serif;
      font-size:9.5px; letter-spacing:.16em; text-align:center; padding:9px 0}


/* ===== 元絵のモーダル（小さめのカード） ===== */
.lb{padding:0; border:0; background:transparent; overflow:visible;
    max-width:none; max-height:none; margin:auto}
.lb::backdrop{background:rgba(28,27,25,.52); backdrop-filter:blur(4px)}

.lb-in{position:relative; width:min(84vw,340px);
       background:var(--paper); border-radius:20px;
       padding:26px 24px 22px;
       box-shadow:0 26px 64px rgba(0,0,0,.34);
       display:flex; flex-direction:column; align-items:center; gap:13px}

.lb-tag{margin:0; font-size:10.5px; letter-spacing:.1em; color:#a9a396}

.lb-frame{display:block; background:#fff; padding:9px; border-radius:6px;
          box-shadow:0 6px 18px rgba(0,0,0,.13)}
.lb-frame img{display:block; width:auto; max-width:100%; max-height:52vh; border-radius:2px}

.lb-cap{margin:2px 0 0; text-align:center; font-size:10.5px; line-height:1.95;
        letter-spacing:.05em; color:var(--sub)}
.lb-cap b{display:block; font-weight:500; font-size:14px; letter-spacing:.08em;
          color:var(--ink); margin-bottom:4px}

.lb-close{position:absolute; top:-13px; right:-13px; width:36px; height:36px;
          padding:0; border:0; border-radius:50%; cursor:pointer;
          background:var(--ac); color:var(--paper);
          font-family:"Jost",sans-serif; font-size:17px; line-height:1;
          display:grid; place-content:center;
          box-shadow:0 5px 14px rgba(0,0,0,.28)}
.lb-close:hover{filter:brightness(1.12)}

/* ふわっと出す */
.lb[open]{animation:lb-pop .3s cubic-bezier(.34,1.5,.64,1)}
.lb[open]::backdrop{animation:lb-fade .3s ease}
@keyframes lb-pop{from{transform:scale(.88); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes lb-fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lb[open], .lb[open]::backdrop{animation:none}
}

@media(min-width:700px){
  .lb-in{width:400px; padding:30px 28px 26px}
  .lb-cap{font-size:11.5px}
  .lb-frame img{max-height:58vh}
}

/* ============================================================
   セクションごとのレイアウト（参考サイトのように毎回変える）
   v1 = 基準（モネ）。v2 はその左右反転。v3〜v5 は別の組み方。
   ============================================================ */

/* --- v2：v1の左右反転 --- */
.v2 .cs-badge{left:auto; right:2.5%}
.v2 .cs-band{left:3%}
.v2 .cs-main.is-cutout{left:31%}
.v2 .cs-vt{left:auto; right:2%}
.v2 .deco.a{right:auto; left:5%}
.v2 .deco.b{right:auto; left:15.5%}
.v2 .cs-sub2.is-cutout{left:auto; right:15%}
.v2 .cs-vs.solo{right:auto; left:4%}
.v2 .cs-card{right:auto; left:3%}

/* --- v3：帯を左上、縦書きを右上、左に縦積み --- */
.v3 .cs-band{left:4%; top:17.5%; width:42%}
.v3 .cs-vt{left:auto; right:3%; top:26%}
.v3 .cs-badge{left:3%; top:38%; width:22%}
.v3 .cs-main.is-cutout{left:24%; top:23%; width:47%}
.v3 .deco.a{right:auto; left:5%; top:52.5%}
.v3 .deco.b{right:auto; left:14%; top:53.5%}
.v3 .cs-sub2.is-cutout{left:8%; top:60%; width:21%}
.v3 .cs-vs.solo{right:5%}

/* --- v4：v3の左右反転 --- */
.v4 .cs-band{left:auto; right:9%; top:17.5%; width:42%; text-align:right}
.v4 .cs-vt{left:3%; top:26%}
.v4 .cs-badge{left:auto; right:3%; top:38%; width:22%}
.v4 .cs-main.is-cutout{left:29%; top:23%; width:47%}
.v4 .deco.a{right:5%; top:52.5%}
.v4 .deco.b{right:14%; top:53.5%}
.v4 .cs-sub2.is-cutout{left:auto; right:8%; top:60%; width:21%}
.v4 .cs-vs.solo{right:auto; left:5%}
.v4 .cs-card{right:auto; left:3%}

/* --- v5：主役を右端に寄せ、左側に上から縦に積む --- */
.v5 .cs-badge{left:4%; top:15%; width:23%}
.v5 .deco.a{right:auto; left:29%; top:22%}
.v5 .deco.b{right:auto; left:37%; top:26%}
/* 北斎だけ2行目が長いので、帯を広げて2行に収める（狭いと3行になり縦書きと重なる） */
.v5 .cs-band{left:3%; top:35%; width:57%}
.v5 .cs-vt{left:31%; top:44%}
.v5 .cs-main.is-cutout{left:auto; right:1%; top:25%; width:46%}
.v5 .cs-sub2.is-cutout{left:4%; top:62%; width:20%}
.v5 .cs-vs.solo{right:4%}


/* ============================================================
   作品ごとの動き（アイコン2つ＋左下の人物）
   ============================================================ */

/* --- 01 歌舞伎：扇はあおぎ、提灯は吊り下げて揺れる。人物はぴょこぴょこ --- */
.w-kabuki .deco.a{animation:fan-wave 2.2s ease-in-out infinite; transform-origin:50% 88%}
.w-kabuki .deco.b{animation:lantern-swing 3.4s ease-in-out infinite; transform-origin:50% 6%}
.w-kabuki .cs-sub2.is-cutout img{animation:hop-step 1.8s steps(1,end) infinite}
@keyframes fan-wave{0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)}}
@keyframes lantern-swing{0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)}}
@keyframes hop-step{0%{transform:translateY(0)} 50%{transform:translateY(-3.5%)} 100%{transform:translateY(0)}}

/* --- 02 モネ：太陽は回転、日傘はふわふわ。人物は左右カクカク（変更なし） --- */
.w-monet .deco.a{animation:sun-spin 22s linear infinite}
.w-monet .deco.b{animation:umb-float 4.6s ease-in-out infinite}
.w-monet .cs-sub2.is-cutout img{animation:sway-step 2.6s steps(1,end) infinite}

/* --- 03 フェルメール：真珠は明滅、窓は光が差す。人物はゆっくり振り子 --- */
.w-vermeer .deco.a{animation:pearl-glow 3.8s ease-in-out infinite}
.w-vermeer .deco.b{animation:window-light 5.2s ease-in-out infinite}
.w-vermeer .cs-sub2.is-cutout img{animation:pendulum 5s ease-in-out infinite}
@keyframes pearl-glow{0%,100%{opacity:.42; transform:scale(1)} 50%{opacity:.72; transform:scale(1.07)}}
@keyframes window-light{0%,100%{opacity:.26} 50%{opacity:.54}}
@keyframes pendulum{0%,100%{transform:rotate(-2.6deg)} 50%{transform:rotate(2.6deg)}}

/* --- 04 ゴッホ：星はまたたき、月はゆっくり浮く。人物はふわっと上下 --- */
.w-vangogh .deco.a{animation:twinkle 1.9s steps(1,end) infinite}
.w-vangogh .deco.b{animation:moon-drift 4.8s ease-in-out infinite}
.w-vangogh .cs-sub2.is-cutout img{animation:float-soft 4.2s ease-in-out infinite}
@keyframes twinkle{0%{opacity:.55; transform:scale(.88)} 50%{opacity:1; transform:scale(1.1)} 100%{opacity:.55; transform:scale(.88)}}
@keyframes moon-drift{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-16%) rotate(2deg)}}
/* ％だと小さい画面で移動量が2〜3pxに縮んで止まって見えるため px で指定する */
@keyframes float-soft{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* --- 05 北斎：波はうねって流れ、富士は静かに呼吸。人物は横に揺られる --- */
.w-hokusai .deco.a{animation:wave-drift 3.2s ease-in-out infinite}
.w-hokusai .deco.b{animation:breathe 6s ease-in-out infinite}
.w-hokusai .cs-sub2.is-cutout img{animation:drift-x 3.6s ease-in-out infinite}
@keyframes wave-drift{0%,100%{transform:translateX(-9%)} 50%{transform:translateX(9%)}}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
@keyframes drift-x{0%,100%{transform:translateX(-6px)} 50%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  .deco.a, .deco.b, .cs-sub2.is-cutout img{animation:none}
}

/* ============================================================
   ABOUT ページ
   トップが賑やかなぶん、こちらは静かに縦に読ませる
   ============================================================ */
.ab{container-type:inline-size; padding:0 0 10px}

.ab-head{display:flex; align-items:flex-start; gap:16px; padding:34px 26px 30px}
.ab-head .t{flex:1 1 auto; min-width:0}
.ab-head .fig{flex:0 0 25%; margin:0}
.ab-head .fig img{width:100%; animation:katakata 2s steps(2, jump-none) infinite}
.ab-head .en{font-size:9.5px; letter-spacing:.3em; color:#a9a396; margin:0}
.ab-head h1{margin:12px 0 0; font-weight:500; font-size:7.8cqw;
            line-height:1.25; letter-spacing:.02em}
.ab-lead{margin:20px 0 0; font-size:12.5px; line-height:2.4; color:#3a3833}

.ab-sec{padding:34px 26px 0}
.ab-sec + .ab-sec{margin-top:8px}
.ab-no{display:flex; align-items:center; gap:12px; margin:0 0 14px}
.ab-no i{flex:none; width:26px; height:26px; border-radius:50%;
         background:var(--ac); color:var(--paper); font-style:normal;
         font-family:"Jost",sans-serif; font-size:10px; letter-spacing:.06em;
         display:grid; place-content:center}
.ab-no h2{margin:0; font-weight:500; font-size:16px; letter-spacing:.06em}
.ab-sec p{margin:0 0 1.5em; font-size:13px; line-height:2.35; letter-spacing:.03em}
.ab-sec p:last-child{margin-bottom:0}
.ab-sec em{font-style:normal; background:linear-gradient(transparent 52%, var(--mk) 52%)}

/* 元絵 → 猫入り の比較 */
.ab-cmp{margin:22px 0 0; padding:0}   /* ul の初期パディングを消す（右にずれる） */
.ab-cmp li{list-style:none; display:flex; align-items:center; gap:3.4cqw;
           padding:14px 0; border-top:1px solid var(--line)}
.ab-cmp li:last-child{border-bottom:1px solid var(--line)}
.ab-cmp figure{flex:1 1 0; min-width:0; margin:0}
.ab-cmp img{width:100%; box-shadow:0 3px 10px rgba(0,0,0,.12)}
.ab-cmp figcaption{margin-top:7px; font-size:9px; letter-spacing:.14em; color:#aaa294}
.ab-cmp figcaption.ver{font-family:"Zen Kaku Gothic New",sans-serif;
                       letter-spacing:.06em; font-size:9.5px}
.ab-cmp .ar{flex:0 0 auto; text-align:center; width:8cqw;
            font-family:"Jost",sans-serif; font-size:4cqw; color:var(--ac)}
.ab-cmp .ttl{margin:10px 0 0; font-size:10.5px; letter-spacing:.06em; color:var(--sub)}

.ab-list{margin:0; padding:0; list-style:none}
.ab-list li{padding:10px 0; border-top:1px solid var(--line); line-height:1.7}
.ab-list li:last-child{border-bottom:1px solid var(--line)}
.ab-list .w{display:block; font-size:12.5px; letter-spacing:.04em}
.ab-list .a{display:block; margin-top:3px; font-size:10.5px;
            letter-spacing:.06em; color:var(--sub)}

.ab-shop{display:grid; gap:9px; margin:20px 0 0}
.ab-shop a{display:flex; align-items:center; justify-content:space-between;
           padding:15px 20px; border:1px solid var(--line); font-size:12.5px;
           letter-spacing:.06em; transition:border-color .25s}
.ab-shop a:hover{border-color:var(--ink)}
.ab-shop span{font-size:10.5px; color:var(--sub); letter-spacing:.1em}

.ab-end{margin:36px 26px 0; padding:26px 0 0; border-top:1px solid var(--line);
        font-size:11px; line-height:2.1; color:var(--sub)}


/* ---- ABOUT の画像パーツ ---- */
.ab-float{float:right; width:34%; margin:2px 0 14px 18px; border-radius:50%;
          overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.18);
          border:3px solid var(--paper);
          animation:ab-sway 5.2s ease-in-out infinite}
@keyframes ab-sway{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)}}
.ab-float img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.ab-sec::after{content:""; display:block; clear:both}

.ab-cats{display:flex; gap:2.6cqw; margin:22px 0 0}
.ab-cats figure{flex:1 1 0; min-width:0; margin:0;
                animation:ab-rise 5s ease-in-out infinite;
                animation-delay:var(--d, 0s)}
/* 1匹ずつ順番に、まっすぐ上へ浮いて戻る */
@keyframes ab-rise{
  0%       {transform:translateY(0)}
  10%      {transform:translateY(-13%)}
  20%,100% {transform:translateY(0)}
}
.ab-cats span{display:block; border-radius:50%; overflow:hidden;
              box-shadow:0 5px 13px rgba(0,0,0,.16)}
.ab-cats img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.ab-cats figcaption{margin-top:8px; text-align:center; font-size:8.5px;
                    letter-spacing:.14em; color:#aaa294}

.ab-person{float:left; width:38%; margin:3px 18px 12px 0;
           box-shadow:0 8px 20px rgba(0,0,0,.14)}
.ab-person img{width:100%; display:block}

.ab-items{display:flex; gap:3cqw; margin:20px 0 0}
.ab-items figure{flex:1 1 0; min-width:0; margin:0; padding:0;
                 animation:katakata 2s steps(2, jump-none) infinite;
                 animation-delay:var(--d, 0s)}
.ab-items img{width:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.10))}
.ab-items figcaption{margin-top:7px; text-align:center; font-size:8px;
                     letter-spacing:.02em; color:var(--sub); white-space:nowrap}


/* ============================================================
   WORKS ページ（横スクロールの棚）
   ============================================================ */
.wk{container-type:inline-size; padding:0 0 12px}
.wk-head{display:flex; align-items:flex-start; gap:16px; padding:34px 26px 26px}
.wk-head .t{flex:1 1 auto; min-width:0}
.wk-head .fig{flex:0 0 24%; margin:0; perspective:620px}
.wk-head .fig img{width:100%; transform-origin:50% 50%; backface-visibility:visible;
                  animation:wk-spin 6.4s cubic-bezier(.62,0,.3,1) infinite}
/* ほとんど止まっていて、たまに縦軸まわりに1回転する */
@keyframes wk-spin{
  0%, 74%  {transform:rotateY(0deg)}
  88%,100% {transform:rotateY(360deg)}
}
@media (prefers-reduced-motion:reduce){
  .wk-head .fig img, .wk-track, .wk-card{animation:none}
}
.wk-head .en{font-size:9.5px; letter-spacing:.3em; color:#a9a396; margin:0}
.wk-head h1{margin:12px 0 0; font-weight:500; font-size:7.4cqw;
            line-height:1.25; letter-spacing:.02em}
.wk-head p{margin:18px 0 0; font-size:12.5px; line-height:2.3; color:#3a3833}

.wk-row{margin:0 0 34px}
.wk-ttl{display:flex; align-items:center; gap:11px; padding:0 26px; margin:0 0 13px}
.wk-ttl i{flex:none; width:24px; height:24px; border-radius:50%; background:var(--ac);
          color:var(--paper); font-style:normal; font-family:"Jost",sans-serif;
          font-size:9.5px; display:grid; place-content:center}
.wk-ttl h2{margin:0; font-weight:500; font-size:15px; letter-spacing:.06em; flex:1}
.wk-ttl span{font-size:9.5px; letter-spacing:.14em; color:#aaa294}

/* 棚の上に置く短い説明（いまは円のシリーズだけ） */
.wk-note{padding:0 26px; margin:-4px 0 15px; font-size:11.5px; line-height:2.05;
         color:var(--sub); letter-spacing:.03em}

/* 無限に横へ流れる棚。
   同じ並びを2周ぶん置き、track を -50% までずらして、また0に戻す。
   ずらすのは transform なのでコンポジタだけで動き、メインスレッドを使わない。
   （以前は毎フレーム scrollLeft を書き換えていて、スマホでガタついた）
   overflow-x は auto のままなので、指で自由に動かすこともできる。 */
.wk-marquee{overflow-x:auto; overflow-y:hidden; padding:6px 0 10px;
            scrollbar-width:none; -webkit-overflow-scrolling:touch;
            overscroll-behavior-x:contain}
.wk-marquee::-webkit-scrollbar{display:none}

.wk-track{display:flex; width:max-content;
          animation:wk-flow var(--dur, 60s) linear infinite}
/* 奇数行は逆向きに流す */
.wk-row.rev .wk-track{animation-direction:reverse}
/* 触っている間・画面外は止める */
.wk-track.is-held,
.wk-row.is-off .wk-track{animation-play-state:paused}

@keyframes wk-flow{
  from{transform:translate3d(0, 0, 0)}
  to  {transform:translate3d(-50%, 0, 0)}
}

.wk-card{flex:none; width:40cqw; margin-right:10px; display:block;
         animation:katakata 2s steps(2, jump-none) infinite;
         animation-delay:var(--d, 0s)}
@keyframes katakata{from{transform:rotate(-1.6deg)} to{transform:rotate(1.6deg)}}
.wk-card img{width:100%; aspect-ratio:1/1; object-fit:contain; display:block}
.wk-card .nm{display:block; padding:9px 8px 12px; font-size:9.5px; line-height:1.7;
             letter-spacing:.02em; color:var(--sub); text-align:center}
/* 円のシリーズだけ、英題の下に日本語の副題を小さく添える */
.wk-card .nm + .sub{display:block; margin-top:-8px; padding:0 8px 12px;
                    font-size:9px; letter-spacing:.08em; color:#b0a99b;
                    text-align:center}
/* 画面外の棚はカードの傾きも止める（スマホでのガタつき対策） */
.wk-row.is-off .wk-card{animation-play-state:paused}

.wk-card.soon img{opacity:.34}
.wk-card.soon .nm::after{content:"準備中"; display:block; margin-top:3px;
                         font-size:8.5px; letter-spacing:.14em; color:#c0b8a8}

@media(min-width:520px){ .wk-card{width:28cqw} }
@media (prefers-reduced-motion:reduce){
  .wk-card{animation:none}
}


@media (prefers-reduced-motion:reduce){
  .ab-head .fig img, .ab-float, .ab-cats figure, .ab-items figure,
  .goods figure{animation:none}
}


/* ============================================================
   下層ページ（お問い合わせ・プライバシーポリシー）
   ============================================================ */
.pg{container-type:inline-size; padding:0 0 14px}

.pg-head{padding:34px 26px 30px}
.pg-head .en{font-size:9.5px; letter-spacing:.3em; color:#a9a396; margin:0}
.pg-head h1{margin:12px 0 0; font-weight:500; font-size:7.8cqw;
            line-height:1.25; letter-spacing:.02em}
.pg-lead{margin:20px 0 0; font-size:12.5px; line-height:2.4; color:#3a3833}

.pg-body{padding:0 26px}
.pg-back{margin:44px 26px 0; padding-top:24px; border-top:1px solid var(--line);
         font-size:11.5px; letter-spacing:.06em; color:var(--sub)}
.pg-back a{transition:color .2s}
.pg-back a:hover{color:var(--ink)}

/* ---- フォーム ---- */
.form{margin:0}
.field{margin:0 0 26px}
.field > label{display:flex; align-items:center; gap:9px; margin:0 0 9px;
               font-size:12px; letter-spacing:.08em; font-weight:400}
.req,.opt{font-family:"Jost",sans-serif; font-size:8.5px; letter-spacing:.14em;
          padding:3px 7px; line-height:1}
.req{background:#b6412f; color:var(--paper)}
.opt{background:var(--line); color:var(--sub)}

.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:13px; line-height:1.8; color:var(--ink);
  background-color:#fbfaf7; border:1px solid var(--line); border-radius:0;
  padding:13px 14px; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, background-color .2s}
.field textarea{min-height:180px; line-height:2.1; resize:vertical}
.field select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237d786e' stroke-width='1.2'/%3E%3C/svg%3E");
              background-repeat:no-repeat; background-position:right 15px center;
              padding-right:38px; cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); background-color:var(--paper)}
.field ::placeholder{color:#b8b2a5}
.hint{display:block; margin-top:8px; font-size:10.5px; line-height:1.95; color:var(--sub)}
.qtext{margin:0 0 9px; font-size:13px; letter-spacing:.04em}

/* 迷惑メール対策（人には見せない） */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.agree{display:flex; align-items:flex-start; gap:11px; margin:2px 0 28px;
       font-size:12px; line-height:1.95; cursor:pointer}
.agree input{flex:none; width:15px; height:15px; margin:5px 0 0; accent-color:#b6412f}
.agree a{text-decoration:underline; text-underline-offset:3px}

.submit{width:100%; height:56px; border:0; cursor:pointer;
        background:var(--ink); color:var(--paper); font:inherit; font-size:13px;
        letter-spacing:.18em; display:flex; align-items:center; justify-content:center;
        gap:12px; transition:opacity .2s}
.submit:hover{opacity:.82}
.submit i{font-style:normal; font-family:"Jost",sans-serif; transition:transform .25s}
.submit:hover i{transform:translateX(4px)}

.notes{margin:30px 0 0; padding:22px 20px; background:var(--tint);
       font-size:11.5px; line-height:2.1; color:#4a473f}
.notes p{margin:0 0 .9em}
.notes p:last-child{margin:0}
.notes b{font-weight:500}

/* ---- 規約などの本文 ---- */
.doc h2{margin:36px 0 12px; padding-left:12px; border-left:3px solid #b6412f;
        font-size:14px; font-weight:500; letter-spacing:.06em; line-height:1.6}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 1.35em; font-size:12.5px; line-height:2.3; letter-spacing:.03em}
.doc ul{margin:0 0 1.35em; padding-left:1.25em; font-size:12.5px;
        line-height:2.3; letter-spacing:.03em}
.doc a{text-decoration:underline; text-underline-offset:3px}
.doc .updated{margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
              font-size:11px; color:var(--sub)}

/* ---- 送信完了・エラー ---- */
.pg-done{padding:64px 26px 20px; text-align:center}
/* 送信完了の印。朱色だとエラーに見えるので緑にする。
   （エラー画面は同じクラスを使い、その場で灰色に上書きしている） */
.pg-done .mark{width:62px; height:62px; margin:0 auto 24px; border-radius:50%;
               background:#4d7a56; color:var(--paper); display:grid;
               place-content:center; font-size:24px}
.pg-done h1{margin:0; font-size:20px; font-weight:500; line-height:1.7;
            letter-spacing:.04em}
.pg-done p{margin:18px 0 0; font-size:12.5px; line-height:2.3; color:#3a3833}
.pg-done ul{margin:20px 0 0; padding:0 0 0 1.2em; text-align:left;
            font-size:12.5px; line-height:2.2}


/* ============================================================
   PC版の左右の余白
   中央の列だけがスクロールし、ここは画面に固定されて動かない。
   左＝モデル3人の重なり、右＝Tシャツ5種。全ページ共通。
   ============================================================ */
.stage{position:relative}
.col{position:relative; z-index:1}

.side{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
/* 余白が狭い画面では出さない（列に重なって邪魔になるため） */
@media (max-width:1080px){ .side{display:none} }

/* 左右の帯。ここを基準に中身を置くので、中の calc が単純になる */
.sd-band{position:absolute; top:0; bottom:0; width:calc((100% - var(--col)) / 2)}
.sd-band.sd-l{left:0}

/* ---- 左：モデル3人 ----
   高さではなく幅で決める。高さ基準にすると、作品ごとに縦横比が違うぶん
   狭い画面で横に潰れるため。--ar は画像の 横÷縦。 */
.sd-model{position:absolute; bottom:var(--b, 0); left:calc(var(--x) * 1%);
          z-index:var(--z, 1); transform:translateX(-50%);
          /* 帯の幅に対する割合で決めるが、画面の高さを超えないところで頭打ちにする。
             幅の上限 = 出したい高さ × 縦横比 という形で、比率を保ったまま抑える。 */
          width:min(calc(var(--w) * 1%), calc(var(--mh, 70vh) * var(--ar)))}
.sd-model img{width:100%; height:auto; display:block;
              filter:drop-shadow(0 14px 30px rgba(0,0,0,.14))}

/* ---- 左上：ロゴ ---- */
.sd-logo{position:absolute; top:4.5%; left:50%; transform:translateX(-50%);
         margin:0; text-align:center; z-index:5; white-space:nowrap}
.sd-logo b{display:block; font-family:"Jost",sans-serif; font-weight:400;
           font-size:19px; letter-spacing:.28em; color:var(--ink)}
.sd-logo span{display:block; margin-top:9px; font-size:10.5px;
              letter-spacing:.26em; color:var(--sub)}

/* ---- 右：メニューカード ----
   飾りではなく本物のリンクなので .side（aria-hidden）の外に置き、
   クリックできるように pointer-events を戻している。 */
.sd-menu{position:fixed; z-index:5; top:50%; transform:translateY(-50%);
         left:calc(50% + var(--col) / 2); width:calc(50% - var(--col) / 2);
         display:flex; justify-content:center; padding:0 26px;
         pointer-events:auto}
@media (max-width:1080px){ .sd-menu{display:none} }

/* 紙を1枚、ほんの少し傾けて置いた見立て */
.sd-card{position:relative; width:100%; max-width:236px;
         background:var(--paper); border-radius:16px; padding:26px 20px 22px;
         box-shadow:0 14px 34px rgba(0,0,0,.11);
         transform:rotate(-1.4deg)}

/* 紙の右上からTシャツがはみ出す */
.sd-card-tee{position:absolute; top:-40px; right:-26px; width:92px;
             transform:rotate(8deg)}
.sd-card-tee img{width:100%; height:auto; display:block;
                 filter:drop-shadow(0 7px 14px rgba(0,0,0,.16))}

.sd-card-ttl{margin:0 0 15px; text-align:center;
             font-family:"Jost",sans-serif; font-size:10px; letter-spacing:.34em;
             color:#a9a396}

.sd-card ul{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:7px}
.sd-card li a{display:flex; align-items:center; gap:11px;
              padding:9px 10px; border-radius:11px;
              transition:background .22s, transform .22s}
.sd-card li a:hover{background:var(--tint); transform:translateX(3px)}
.sd-card li i{flex:none; width:25px; height:25px; border-radius:50%;
              background:var(--n); color:var(--paper); font-style:normal;
              font-size:9.5px; letter-spacing:.04em;
              display:grid; place-content:center}
.sd-card li b{display:block; font-size:11.5px; letter-spacing:.18em; font-weight:400}
.sd-card li em{display:block; margin-top:2px; font-style:normal;
               font-size:9.5px; letter-spacing:.03em; color:var(--sub)}

/* 買う導線は丸い塗りのボタンで、ここだけ強く */
.sd-shop{display:flex; align-items:center; justify-content:center; gap:10px;
         height:46px; border-radius:999px; background:var(--ink); color:var(--paper);
         font-size:12px; letter-spacing:.22em;
         transition:opacity .22s, transform .22s}
.sd-shop:hover{opacity:.85; transform:translateY(-2px)}
.sd-shop i{transition:transform .25s}
.sd-shop:hover i{transform:translateX(4px)}

.sd-card-note{margin:10px 0 0; text-align:center; font-size:9.5px;
              letter-spacing:.1em; color:#a9a396}

/* ---- 飾りのアイコン。--x は余白の左端を0、列側を100 とした位置 ---- */
.sd-ico{position:absolute; width:var(--w, 30px); height:var(--w, 30px);
        color:var(--c, #b6412f); opacity:.3; z-index:4;
        animation:sd-drift 7s ease-in-out infinite;
        animation-delay:var(--d, 0s)}
.sd-ico svg{width:100%; height:100%; display:block;
            fill:var(--c); stroke:var(--c);
            stroke-linecap:round; stroke-linejoin:round}
.sd-ico.sd-l{left:calc((50% - var(--col) / 2) * var(--x) / 100)}
.sd-ico.sd-r{left:calc(50% + var(--col) / 2 + (50% - var(--col) / 2) * var(--x) / 100)}
@keyframes sd-drift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-12px) rotate(5deg)}
}

@media (prefers-reduced-motion:reduce){ .sd-ico{animation:none} }