/* =========================================================
   アトリエ — storefront（日本語主体・産霊トンマナ）
   two-column catalog: left category sidebar + right grid,
   full-bleed, library-first. near-black bg, silver/peach
   iridescent accents, glass, light-weight display type.
   和欧混植：見出しと商品名は明朝、本文と数字はゴシック、ラテンは小さく併走。
   original copy / own brand / self-contained visuals.
   ========================================================= */

:root{
  color-scheme:dark;
  --background:#060507;
  --surface-1:#0c0b10;
  --surface-2:#131218;
  --text-primary:#f5f4f7;
  --text-secondary:#a3a1ad;
  --text-muted:#6a6873;
  /* 小さい字（ラテン名・振り仮名・注記）用。--text-muted は 3.72:1 しか無くAAを割るので分けた */
  --text-fine:#9d9ba7;
  --border-soft:#ffffff14;
  --border-soft-2:#ffffff26;

  --accent-1:#e8eaef;
  --accent-2:#bcc0ca;
  --accent-premium:linear-gradient(90deg,#bcc0ca -1%,#feeae1 42%,#c0cef2 102%);
  --accent-secondary:linear-gradient(135deg,#ffb07a 0%,#ff7a4e 100%);
  --accent-warm:#ffa582;
  --accent-cool-glow:#5e80f066;
  --accent-warm-glow:#ffa58273;
  --heart-red:#ff4d6d;

  /* カードの説明欄を地から起こす量。ここだけで濃さを振れる。
     ★上げすぎるとプレビューより先に目が行く。0a を超えたら一度実画面で見ること。 */
  --card-body-tint:#ffffff0b;
  --glass-tint:#ffffff0b;
  --glass-tint-strong:#ffffff12;
  --glass-edge:#ffffff66;
  --glass-blur:18px;

  --radius-card:12px;
  --radius-control:8px;
  --radius-pill:999px;
  --radius-stage:24px;
  --header-height:4.75rem;
  --pad-x:clamp(1rem,2.4vw,2rem);
  --readw:1180px;

  /* 本文・数字＝ゴシック（ラテンを先頭に置いて和欧混植を成立させる） */
  --font:"Helvetica Neue","Segoe UI","Inter","Hiragino Kaku Gothic ProN",
         "Yu Gothic UI","Yu Gothic","Noto Sans JP",system-ui,-apple-system,sans-serif;
  /* 見出し・商品名＝明朝（Win=游明朝 Demibold / Mac=ヒラギノ明朝 W6） */
  --font-wa:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",
            "Noto Serif CJK JP","BIZ UDMincho",serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ロゴマーク（差し替え点：ここだけ変えれば全ページのマークが変わる） */
  --logo-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12.06 14.65C12.56 15.09 13.27 15.86 13.52 16.59C13.77 17.32 13.79 18.28 13.56 19.02C13.34 19.75 12.78 20.54 12.17 21.01C11.55 21.47 10.64 21.79 9.87 21.8C9.1 21.81 8.28 21.56 7.54 21.09C6.6 20.49 5.59 19.24 4.91 18.14C4.25 17.05 3.75 15.77 3.52 14.52C3.28 13.29 3.27 11.94 3.48 10.72C3.69 9.51 4.14 8.27 4.76 7.21C5.36 6.17 6.21 5.19 7.14 4.44C8.05 3.69 9.17 3.08 10.28 2.71C11.38 2.34 12.61 2.16 13.76 2.2C14.9 2.24 16.09 2.5 17.13 2.93C18.16 3.35 19.44 4.16 19.98 4.75C20.3 5.1 20.49 5.43 20.52 5.78C20.55 6.14 20.4 6.62 20.17 6.9C19.94 7.17 19.49 7.4 19.14 7.43C18.78 7.47 18.45 7.24 18.03 7.08C17.44 6.87 16.66 6.39 15.96 6.25C15.27 6.12 14.51 6.12 13.84 6.24C13.18 6.36 12.52 6.61 11.96 6.95C11.43 7.28 10.93 7.73 10.57 8.22C10.21 8.68 9.93 9.25 9.78 9.8C9.63 10.33 9.58 10.91 9.63 11.44C9.68 11.95 9.84 12.47 10.07 12.9C10.28 13.32 10.6 13.71 10.94 14.01C11.26 14.29 11.69 14.32 12.06 14.65ZM7.47 18.83A1.65 1.65 0 1 0 10.78 18.83A1.65 1.65 0 1 0 7.47 18.83Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* アンカー遷移の着地点が固定ヘッダの下に潜らないように */
#top,#projects,#pricing,#footer{scroll-margin-top:calc(var(--header-height) + 1rem)}
/* ★料金だけは、セクション自身が大きな上パディングを持っているぶん着地が高すぎた
   （キッカーがヘッダの103px下）。**自分のパディングを差し引く**ことで、
   「ヘッダの40px下にキッカーが来る」を幅によらず一定にする。 */
#pricing{scroll-margin-top:calc(var(--header-height) + 2.5rem - clamp(3rem,6vw,5.5rem))}
body{
  font-family:var(--font);background:var(--background);color:var(--text-primary);
  line-height:1.8;letter-spacing:.02em;overflow-x:hidden;line-break:strict;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:#ffa58255;color:#fff}

/* 和文の型：明朝＋プロポーショナル詰め（palt）。これを使う所だけが"見出し・商品名" */
.wa{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;letter-spacing:.06em}

/* ★2026-08-15：ざらつき（grain）を全廃した。
   .grain は position:fixed;inset:0;mix-blend-mode:overlay の全画面ブレンド層で、
   下で何かが動くたび**画面全体を合成し直す**。実測（動画26本を再生しながらスクロール・CPU 1/4）:
     両方オフ 78.2fps / p95 27.5ms  ←→  全画面のgrainだけ復活 61.5fps / p95 41.9ms
   濃さは 3.5% しかなく実寸では見えないのに、コストだけが一番高かった。
   カード側の .card-grain（15%）はカードの矩形内で済むぶん安いが、こちらも実寸では判別できず、
   ボス判断で両方とも撤去。＝動画サムネを載せる余裕をここで作る。 */

/* ---------- glass / border glow ---------- */
.glass{background:var(--glass-tint);position:relative;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%)}
.border-glow{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.5;transition:opacity .4s var(--ease)}
.border-glow-blob{position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,#ffa582,#c0cef2,#feeae1,transparent 75%);
  transform:translate(-50%,-50%);animation:spin 6s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
:hover>.border-glow,.plan--featured .border-glow{opacity:1}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);
  font-size:.86rem;font-weight:500;letter-spacing:.06em;padding:.65em 1.35em;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;transition:.35s var(--ease);white-space:nowrap;background:none;color:inherit}
.btn--lg{font-size:.98rem;padding:.85em 1.6em}
.btn--block{width:100%;justify-content:center}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}
.btn--solid{background:var(--accent-1);color:#0a0a0e;font-weight:600}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px #e8eaefaa}
.btn--ghost{border-color:var(--border-soft-2);color:var(--text-primary);background:#ffffff05}
.btn--ghost:hover{background:#ffffff0d;border-color:var(--glass-edge);transform:translateY(-2px)}
.btn--glow{background:var(--glass-tint-strong);color:var(--text-primary);font-weight:600;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--glow .btn__label{position:relative;z-index:1}
.btn--glow:hover{transform:translateY(-2px)}

/* ---------- header / ロゴ ---------- */
.site-header{position:fixed;inset-inline:0;top:0;z-index:100;height:var(--header-height);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:0 var(--pad-x);transition:.4s var(--ease)}
.site-header.is-stuck{background:#08070ac2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft)}

.logo{display:inline-flex;align-items:center;gap:.62rem;justify-self:start}
/* マークは mask で抜く＝銀桃の虹彩グラデがそのまま形になる */
.logo__mark{width:22px;height:22px;flex:none;background:var(--accent-premium);
  -webkit-mask:var(--logo-mask) center/contain no-repeat;mask:var(--logo-mask) center/contain no-repeat;
  filter:drop-shadow(0 0 10px #c0cef255)}
.logo__lockup{display:flex;flex-direction:column;justify-content:center;line-height:1}
.logo__name{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.05rem;letter-spacing:.18em;color:var(--text-primary)}
.logo__latin{font-size:.56rem;letter-spacing:.4em;color:var(--text-fine);margin-top:.42em;text-transform:lowercase}

.pill-nav{justify-self:center;display:flex;align-items:center;gap:.1rem;padding:.35rem;
  border-radius:var(--radius-pill);border:1px solid var(--border-soft)}
.pill-nav a{display:inline-flex;align-items:baseline;gap:.5em;font-size:.82rem;letter-spacing:.1em;
  color:var(--text-secondary);padding:.5em 1.05em;border-radius:var(--radius-pill);transition:.28s var(--ease)}
.pill-nav a span{font-size:.62rem;letter-spacing:.16em;color:var(--text-fine);transition:.28s var(--ease)}
.pill-nav a:hover{color:var(--text-primary);background:#ffffff0d}
.pill-nav a:hover span{color:var(--text-secondary)}
.header__cta{justify-self:end;display:flex;align-items:center;gap:.6rem}
.header__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:var(--radius-control)}
.header__burger span{width:22px;height:2px;background:var(--text-primary);border-radius:2px}

/* ---------- shared ---------- */
.kicker{font-size:.72rem;letter-spacing:.18em;color:var(--text-fine);font-weight:600;margin-bottom:1rem}
.section-title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:clamp(1.55rem,2.9vw,2.5rem);letter-spacing:.1em;line-height:1.45;color:#fff}
.section-title em{font-style:normal;background:var(--accent-premium);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 語の途中で折れないように、意味のかたまりごとに inline-block で包む */
.section-title .phrase{display:inline-block}
.pill{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.05em;color:var(--text-secondary);
  padding:.45em 1.1em;border:1px solid var(--border-soft);border-radius:var(--radius-pill);background:#ffffff05;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 和文の字送りの中に半角数字が入ると前後が空くので、数字だけ字送りを外す */
.pill #pillCount{letter-spacing:0;font-variant-numeric:tabular-nums}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 10px var(--accent-warm);flex:none}

/* ---------- LIBRARY ---------- */
.library{width:100%;padding:calc(var(--header-height) + 2.2rem) var(--pad-x) clamp(3rem,6vw,5rem)}
.library__topbar{margin-bottom:1.8rem}
/* 見出しはピルに少し寄せる（明朝の半行送りぶん、実測の余白は数値より広く見えるため） */
.library__titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.6rem}
.sort{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-size:.84rem;letter-spacing:.12em;
  color:var(--text-secondary);background:#ffffff05;border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);padding:.5em 1.15em;white-space:nowrap}
/* 和文の字送りの中に半角数字が入ると前後が空くので、数字だけ字送りを外す */
.sort b{font-weight:500;color:var(--text-primary);letter-spacing:0;font-variant-numeric:tabular-nums}

/* grid ── ★2026-08-15：区分のサイドバーを外して全幅1本にした。
   空いた 208px + 余白ぶんをカードに回し、広い画面では1行4枚で広々と見せる。 */
.grid{display:grid;grid-template-columns:1fr;gap:1.9rem 1.1rem;overflow-anchor:none}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}

/* project card */
.project-card{position:relative;display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.project-card.in{opacity:1;transform:none}
.card-thumb{position:relative;aspect-ratio:960/684;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--border-soft);transition:.45s var(--ease)}
.card-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,#060507b3)}
/* AVIF の受け皿として <img> を <picture> で包んでいる（2026-08-16）。
   display:contents で <picture> をレイアウトから消し、<img> を今までどおり .card-thumb の
   直下として扱う＝position:absolute の基準が .card-thumb のまま変わらない。 */
.card-thumb picture,.item__shot picture{display:contents}
.card-thumb-img{position:absolute;inset:0;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.05) translate(-1%,-1%)}to{transform:scale(1.12) translate(1%,1%)}}
.card-thumb-img--real{width:100%;height:100%;object-fit:cover;animation:none}
.card-thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease)}
.card-thumb-video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.card-thumb-video{display:none}}
/* .card-grain は撤去（上の .grain と同じ理由・2026-08-15）。 */
.project-card:hover .card-thumb{border-color:var(--border-soft-2);transform:translateY(-4px);box-shadow:0 30px 60px -34px #000}
.card-new-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;font-size:.74rem;letter-spacing:.08em;color:#fff;
  padding:.3em .7em;border-radius:var(--radius-pill);
  background:#0a0a0eaa;border:1px solid var(--border-soft-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card-new-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 8px var(--accent-warm);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* サムネの下の帯。地に直接置くと文字が浮いて読みにくいので、ほんの少しだけ起こす。
   枠線は付けない（付けるとプレビューと同じ強さの箱が2つ並んで、目が散る）。 */
.card-body{display:flex;flex-direction:column;gap:.42rem;
  margin-top:.5rem;padding:.8rem .85rem .85rem;
  background:var(--card-body-tint);border-radius:var(--radius-card)}
.card-titlerow{display:flex;align-items:baseline;gap:.7rem}
/* 商品名＝和名(明朝・大) ＋ ラテン(小)。ラテンは捨てない */
.card-title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.22rem;letter-spacing:.14em;line-height:1.3;color:var(--text-primary);white-space:nowrap}
/* 4字以上の長い正名（電気コバルト等）は少し詰めて、ラテン名を押し出さない */
.card-title--long{font-size:1.02rem;letter-spacing:.06em}
/* 和名を持たない商品は、ラテン名を見出しの位置へ。併走ラテンは出さないので、この一枚で行を埋める */
.card-title--latin-only{font-family:var(--font);font-weight:500;font-size:1.06rem;letter-spacing:.16em;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-title-latin{font-size:.82rem;letter-spacing:.16em;color:var(--text-fine);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★2行ぶんの高さを常に確保する。説明文に範囲（1画面／部品／背景）を書くようになって
   1行の本と2行の本が混ざり、地色を敷いたプレートの高さがカードごとに変わってしまうため。 */
.card-desc{font-size:.9rem;line-height:1.75;color:var(--text-secondary);letter-spacing:.04em;
  min-height:calc(.9rem * 1.75 * 2);word-break:auto-phrase}
/* 説明文の下のタグ。本家と同じ「暗い地に溶ける無彩色の極薄ピル」。
   ★プレビューより目立たせない。色を付けるのは「何が手に入るか」の1枚だけ。 */
.card-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;list-style:none}
.card-tag{display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);background:#ffffff0a;color:var(--text-fine);
  padding:.26rem .62rem;font-size:.78rem;letter-spacing:.04em;line-height:1.4;white-space:nowrap}
/* 客がいちばん知りたいのは「丸ごと来るのか、一部なのか」。ここだけ一段はっきり出す。 */
.card-tag--scope{color:var(--text-secondary);background:#ffffff12;border-color:var(--border-soft-2)}
/* ---------- Free / Premium のバッジ（2026-08-15 に塗りへ）----------
   前は「文字だけ光らせる」形にしていたが、並べた時に弱く、名前に埋もれていた。
   どちらも小さな"塗りのピル"にして、色の置き方で役割を分ける：
     Free    … 色を置く（見つけてほしい方）
     Premium … 銀の虹彩＝明度で目立たせ、彩度では騒がせない（21点あるため）      */
/* ★どちらも"黒地"に置いて背景へ沈ませる（2026-08-15）。塗りで目立たせると、
   26枚ぶん並んだときにバッジの列が先に目に入ってしまう。
   区別は明るさではなく **形と縁** でつける：
     Free    … 角のある札。縁も文字も控えめ＝無難なラベル
     Premium … 丸いピル。縁だけ銀の虹彩の1本線＋小さな輝き＝黒のまま質を出す        */
.tier-badge{display:inline-flex;align-items:center;gap:.34em;flex:none;align-self:center;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;white-space:nowrap;
  padding:.4em .82em;border-radius:5px;
  background:#0a0a0ecc;border:1px solid var(--border-soft);color:var(--text-fine);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tier-badge__spark{font-style:normal;font-size:.92em;line-height:1;color:#feeae1;
  opacity:.85;margin-top:-.05em}
/* 縁だけを虹彩にする（padding-box と border-box の二枚重ね）。塗りは黒のまま。 */
.tier-badge--premium{border-radius:var(--radius-pill);border:1px solid transparent;
  color:var(--accent-1);padding:.4em .88em;
  background:linear-gradient(#0a0a0e,#0a0a0e) padding-box,
             var(--accent-premium) border-box;
  box-shadow:inset 0 0 14px #c0cef21f}

/* ---------- pricing ---------- */
.pricing{width:100%;padding:clamp(3rem,6vw,5.5rem) var(--pad-x)}
.pricing__inner{max-width:var(--readw);margin:0 auto}
.pricing__head{max-width:680px;margin-bottom:2.8rem}
.pricing__lead{margin-top:1.2rem;color:var(--text-secondary);font-size:.92rem}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;align-items:start;max-width:880px;margin:0 auto}
.plan{position:relative;border:1px solid var(--border-soft);border-radius:var(--radius-stage);padding:2.1rem 1.9rem;background:var(--surface-1)}
.plan--featured{background:var(--surface-2);transform:translateY(-8px);box-shadow:0 40px 90px -50px #c0cef255}
.plan__flag{position:absolute;top:-.8rem;left:1.9rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  padding:.34em 1em;border-radius:var(--radius-pill);background:var(--accent-premium);color:#0a0a0e}
.plan__name{display:flex;align-items:baseline;gap:.7em;font-size:.8rem;letter-spacing:.2em;color:var(--text-secondary);font-weight:600}
.plan__name i{font-style:normal;font-size:.84rem;letter-spacing:.1em;color:var(--text-fine)}
.plan__price{font-size:2.7rem;font-weight:300;letter-spacing:-.02em;margin:.55rem 0 .1rem;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap}
/* 単位は折り返してよい。「年額 ¥50,000 を一括」まで含むので長い＝ここを nowrap にすると溢れる */
.plan__price span{font-size:.82rem;color:var(--text-secondary);letter-spacing:.06em;line-height:1.5;
  font-variant-numeric:normal}
.plan__note{color:var(--text-secondary);font-size:.86rem;line-height:1.85;margin-bottom:1.4rem;word-break:auto-phrase}
.plan__note b{color:var(--text-primary);font-weight:600}
/* 年額の差額。塗らずに縁と文字で出す（バッジ全般の方針と揃える） */
.plan__save{display:inline-block;margin-top:.7rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  padding:.34em .9em;border-radius:var(--radius-pill);border:1px solid transparent;color:var(--accent-1);
  background:linear-gradient(#0a0a0e,#0a0a0e) padding-box,var(--accent-premium) border-box}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:.72rem;margin-bottom:1.9rem}
.plan__list li{position:relative;padding-left:1.5em;color:var(--text-secondary);font-size:.86rem;line-height:1.7}
.plan__list li b{color:var(--text-primary);font-weight:600}
.plan__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent-premium)}
.pricing__fine{text-align:center;color:var(--text-fine);font-size:.78rem;margin-top:1.9rem;line-height:1.75}
.pricing__fine + .pricing__fine{margin-top:.2rem}

/* ---------- footer ---------- */
.site-footer{width:100%;padding:clamp(2.5rem,5vw,4.5rem) var(--pad-x) 2rem}
.footer__inner{max-width:var(--readw);margin:0 auto}
.footer__grid{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.footer__brand{max-width:300px}
.footer__brand .logo{margin-bottom:.9rem}
.footer__brand p{color:var(--text-fine);font-size:.84rem;line-height:1.9}
.footer__grid h3{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:.84rem;letter-spacing:.14em;color:var(--text-fine);margin-bottom:1.05rem}
.footer__grid nav a{display:block;color:var(--text-secondary);font-size:.84rem;letter-spacing:.06em;padding:.3em 0;transition:.25s}
.footer__grid nav a:hover{color:var(--text-primary)}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-soft);color:var(--text-fine);font-size:.78rem}

/* ---------- entrance ---------- */
.anim{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim[data-anim="1"]{transition-delay:.08s}
.anim[data-anim="2"]{transition-delay:.16s}
.anim.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .plans{grid-template-columns:1fr}
  /* nav を隠すと3カラムの2列目が消えてCTAが中央に落ちるので、2カラムに組み替える */
  .site-header{grid-template-columns:1fr auto}
  .pill-nav{display:none}
  /* ナビが消える幅では必ずバーガーを出す（960〜601px でヘッダの操作子が消えていた） */
  .header__burger{display:flex}
  .plan--featured{transform:none}
}
@media(max-width:600px){
  .header__burger{display:flex}
  .header__cta .btn--glow{display:none}
  /* 見出しが2行になる幅では、静的ラベルの「掲載順」が1行を占めて座りが悪いので出さない */
  .sort{display:none}
  .library__titlerow{flex-wrap:wrap;gap:.6rem}
  .footer__grid{flex-direction:column;gap:1.8rem}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:.7rem}
  .card-title{font-size:1.14rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .anim,.project-card{opacity:1!important;transform:none!important}
}

/* 画面には出さず、読み上げにだけ届ける（絞り込み結果の件数） */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* =========================================================
   会員の操作（2026-08-15・カタログを1枚へ統合）
   ログイン状態でカードのボタンが入れ替わる。ログインもこの画面から出ずに済ませる。
   ========================================================= */

/* ★.btn は display:inline-flex なので、これが無いと hidden 属性が効かない
   （ブラウザ既定の [hidden]{display:none} をクラス側が上書きしてしまう）。 */
[hidden]{display:none !important}

/* 一覧の上に出る状態表示（ログイン中だけ） */
.libstatus{margin-top:.95rem;font-size:.86rem;letter-spacing:.04em;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;word-break:auto-phrase}

/* 操作子（いまはカードでなく「拡大表示」の中だけにある） */
.card-actions{display:flex;align-items:center;gap:.4rem .6rem;flex-wrap:wrap}
.card-btn{font-size:.78rem;padding:.58em 1.2em}
/* ★注記はボタンの"横"に置かない。狭い幅で3行に割れてカードが読めなくなる
   （2026-08-13 に実画面で確認）。必ず行を分ける。 */
.card-note{flex-basis:100%;font-size:.8rem;line-height:1.7;letter-spacing:.02em;
  color:var(--text-fine);word-break:auto-phrase}

/* ---------- 商品の拡大表示 ----------
   ★カードにボタンを置かない（誤って押すと1日3点の残量が減る）。押すのはここに来てから。 */
.project-card{cursor:pointer}
.project-card:focus-visible{outline:2px solid var(--glass-edge);outline-offset:6px;border-radius:var(--radius-card)}
/* ---------- 商品の拡大表示（本家 getlayers 踏襲・採点表 ../モーダル_must-match.md） ----------
   ★ここの数値は全部、本家の実CSSから取った値。目分量で書いた数字は1つも無い。
     出所を確かめずに触らないこと（触るなら採点表の行も一緒に直す）。

   ★機構で外してはいけない3点：
     1. スクロールするのは .im__panel **本体**（overflow:hidden auto）。中の .im__body ではない。
     2. .im__panel は .im の**子**。開閉の opacity が親子で掛かって二乗になるのが本家の見え方。
     3. 背後は body ではなく **<html> にインライン**で止める（script.js の lockScroll）。 */

/* 幕。flex の**上寄せ**なのが要点（中央寄せにすると背の低い商品で位置が跳ねる）。
   余白 = ヘッダの高さ + 2rem（本家は banners-height も足すが、店に告知帯は無いので0）。 */
.im{position:fixed;inset:0;z-index:190;display:flex;justify-content:center;align-items:flex-start;
  padding:calc(var(--header-height) + 2rem) 1.5rem 2rem;background:#040406b8}
/* ★ログイン（.modal / z-index:200）はこの上に出す。拡大表示から「無料でダウンロード」を押すと
   ログインが重なって開くため、順番を逆にすると入力欄が幕の裏に隠れる。 */

.im__panel{position:relative;width:100%;max-width:56rem;
  max-height:calc(100dvh - var(--header-height) - 4rem);
  overflow:hidden auto;border-radius:var(--radius-stage);background:var(--surface-1);
  border:1px solid var(--border-soft);box-shadow:0 30px 80px -30px #000000e6}
.im__panel::-webkit-scrollbar{width:7px;height:7px}
.im__panel{scrollbar-width:thin;scrollbar-color:#ffffff29 transparent}

/* × は2つある。デスクトップはパネルの中（絶対配置）、スマホはパネルの外（固定）。
   パネルはスクロールコンテナなので、中に置いた×は下へ送ると画面外へ流れていく。 */
.im__close{position:absolute;top:.85rem;right:.85rem;z-index:2;width:2.2rem;height:2.2rem;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:#08080c99;border:1px solid var(--border-soft);color:var(--text-primary);cursor:pointer}
.im__close:hover{background:#000000cc}
.im__close svg{width:.95rem;height:.95rem}
.im__close-mobile{display:none}

.im__top{display:flex;flex-direction:column}
.im__hero{position:relative;aspect-ratio:960/684;width:100%;flex:none;overflow:hidden;background:var(--surface-2)}
.im__hero img,.im__hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 写真がまだ無い商品。壊れた画像アイコンを出さず、静かに理由だけ置く。 */
.im__hero-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;letter-spacing:.06em;color:var(--text-muted)}
.im__hero-video{opacity:0;transition:opacity .35s var(--ease)}
.im__hero-video.is-on{opacity:1}
.im__hero-spinner{position:absolute;top:50%;left:50%;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;
  border:2px solid #ffffff3d;border-top-color:#ffffffcc;border-radius:50%;animation:im-spin .8s linear infinite}
@keyframes im-spin{to{transform:rotate(360deg)}}

.im__body{display:flex;flex-direction:column;align-items:flex-start;gap:.95rem;
  min-width:0;max-width:100%;padding:1.6rem}
.im__metarow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.45rem}

/* 商用利用可のチップ。押す物ではないので cursor は help。 */
.im__licence{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);background:#1b1b22;color:var(--text-primary);cursor:help;
  padding:.26rem .62rem;font-size:.875rem;font-weight:600;line-height:1}
.im__licence:focus-visible{outline:2px solid var(--glass-edge);outline-offset:3px}
.im__licence-tip{position:absolute;bottom:calc(100% + .55rem);left:0;width:max-content;max-width:18rem;
  opacity:0;visibility:hidden;pointer-events:none;z-index:5;border-radius:var(--radius-control);
  border:1px solid var(--border-soft);background:#15161c;color:var(--text-primary);
  padding:.55rem .75rem;font-size:.8rem;line-height:1.6;white-space:normal;word-break:auto-phrase;
  box-shadow:inset 0 1px #ffffff0f,0 12px 28px -14px #000000a6}
.im__licence:hover .im__licence-tip,.im__licence:focus-visible .im__licence-tip{opacity:1;visibility:visible}

/* ★題は明朝（商品名は明朝、が店の組版規約）。本家はサンセリフの -.03em だが、
   日本語の明朝に負の字間を掛けると詰まって読めなくなるので正に振る。 */
.im__title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.7rem;letter-spacing:.08em;line-height:1.45;color:var(--text-primary)}
.im__latin{font-size:.88rem;letter-spacing:.18em;color:var(--text-fine)}
.im__desc{font-size:1rem;line-height:1.6;color:var(--text-secondary);word-break:auto-phrase}
.im__actions{margin-top:.2rem;display:flex;flex-wrap:wrap;gap:.6rem}
.im__actions .card-btn{font-size:.92rem;padding:.7rem 1.3rem}
.im__quota{margin-top:.6rem;font-size:.85rem;line-height:1.5;color:var(--text-muted)}
.im__reset{margin-top:.15rem;font-size:.72rem;line-height:1.4;color:var(--text-muted);opacity:.85}

.im__section{margin-top:1.75rem;padding:0 1.5rem}
.im__section--last{padding-bottom:1.75rem}
/* ★本家は uppercase を掛けるが、日本語には効かず字間だけ崩れるので外した（採点表 D6）。 */
.im__section-title{margin-bottom:.6rem;font-size:.875rem;font-weight:600;letter-spacing:.05em;
  color:var(--text-muted)}

.im__stack{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}
/* 範囲のチップだけ、他より一段はっきり出す（客がいちばん知りたいのはここ）。 */
.im__stack-scope{color:var(--text-primary)!important;background:#ffffff14!important;
  border-color:var(--border-soft-2)!important;font-weight:600}
.im__scope-note{margin-top:.5rem;font-size:.85rem;line-height:1.75;color:var(--text-secondary);
  word-break:auto-phrase}
.im__stack li{display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);background:var(--glass-tint);color:var(--text-secondary);
  padding:.34rem .7rem;font-size:.875rem;line-height:1}

/* 使い方の畳みカード。高さは script.js が実測してばねで動かす（CSSでは動かさない）。 */
.im__block{position:relative;overflow:hidden;border-radius:var(--radius-card);
  border:1px solid var(--border-soft);background:var(--glass-tint)}
.im__block-head{display:flex;flex-direction:column;gap:.18rem;padding:.95rem 1.1rem .55rem}
.im__block-title{font-size:1rem;font-weight:600;color:var(--text-primary)}
.im__block-sub{font-size:.875rem;color:var(--text-muted)}
.im__block-body{position:relative;overflow:hidden}
.im__block-content{padding:0 1.1rem;color:var(--text-secondary)}
/* 手順。番号は <ol> のマーカーではなく自前のバッジで出すので、標準のマーカーは消す。 */
.im__steps{display:flex;flex-direction:column;gap:.85rem;padding-bottom:1rem;list-style:none}
.im__step{display:grid;grid-template-columns:2.2rem 1fr;align-items:start;gap:.85rem}
.im__step-num{display:inline-flex;align-items:center;justify-content:center;height:1.8rem;
  border-radius:var(--radius-control);border:1px solid var(--border-soft);background:#ffffff0f;
  color:var(--text-primary);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.im__step-title{font-size:1rem;font-weight:600;color:var(--text-primary)}
/* ★本家は 1.5。日本語は同じ字面でも行が詰まって見えるので 1.75 に開けた（採点表 D9）。 */
.im__step-text{margin-top:.2rem;font-size:.95rem;line-height:1.75;color:var(--text-secondary);
  word-break:auto-phrase}
/* 下端のぼかし。mask-image ではなく、地色に着地するグラデを敷いた div（本家と同じ＝採点表 C9）。 */
.im__block-fade{position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;
  background:linear-gradient(to bottom,#0c0b1000 0%,#0c0b108c 55%,var(--surface-1) 100%)}
.im__block-toggle{position:relative;z-index:1;display:flex;width:100%;margin:0;
  align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1rem;
  border:none;border-top:1px solid var(--border-soft);background:0 0;
  color:var(--text-primary);font:inherit;font-size:.95rem;cursor:pointer}
.im__block-toggle:hover{background:#ffffff0a}
.im__chev{width:.95rem;height:.95rem;flex:none;color:var(--text-secondary);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  width:.5rem;height:.5rem;margin-top:-.22rem;transform:rotate(45deg)}

.im__faqs{display:flex;flex-direction:column;gap:.5rem}
.im__faq{overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--border-soft);
  background:#ffffff06}
.im__faq:hover{background:var(--glass-tint-strong)}
.im__faq-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;border:none;background:0 0;color:var(--text-primary);
  font:inherit;font-size:1rem;font-weight:600;text-align:left;cursor:pointer;word-break:auto-phrase}
.im__faq-mark{flex:none;width:1.8rem;height:1.8rem;display:inline-flex;align-items:center;
  justify-content:center;border-radius:999px;border:1px solid var(--border-soft);
  background:#ffffff0a;color:var(--text-secondary)}
.im__faq-mark::before{content:"";width:.45rem;height:.45rem;margin-top:-.2rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.im__faq-body{overflow:hidden}
.im__faq-inner{padding:0 1.1rem 1.1rem;font-size:.95rem;line-height:1.75;
  color:var(--text-secondary);word-break:auto-phrase}

/* ★ブレークポイントは本家と同じ1本（max-width:767px）＋本文余白の 1024px だけ。 */
@media (max-width:767px){
  .im{padding:4.6rem 1rem 1rem}
  .im__panel{max-height:calc(100dvh - 5.6rem);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.5rem)}
  .im__body{padding:1rem}
  .im__section{margin-top:1.2rem;padding:0 1rem}
  .im__close{display:none}
  .im__close-mobile{position:fixed;top:1rem;right:1rem;z-index:105;width:2.6rem;height:2.6rem;
    display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-card);
    border:1px solid var(--border-soft);background:#0a0a0eb3;color:var(--text-primary);cursor:pointer;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .im__close-mobile svg{width:1.1rem;height:1.1rem}
  .im__title{font-size:1.4rem}
}
@media (min-width:1024px){
  .im__body{padding:1.8rem 2rem}
  .im__section{margin-top:2rem;padding:0 2rem}
  .im__section--last{padding-bottom:2rem}
}

/* ---------- ログイン（モーダル） ---------- */
/* ★背後の止め方は script.js の lockScroll() が <html> へインラインで直付けする
   （position:relative / overflow:hidden / height:100%）。本家と同じ方式で、
   position:fixed を使わないのでスクロール位置の保存・復元が要らない。
   ここに body.is-locked を残すと2種類のロックが外し合うので置かない。
   ロック時に横へ飛ばないよう、スクロールバーの溝を常に確保しておく（採点表 D8）。 */
html{scrollbar-gutter:stable}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem}
.modal__scrim{position:absolute;inset:0;background:#04030699;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__panel{position:relative;width:min(26rem,100%);max-height:calc(100dvh - 2.4rem);overflow:auto;
  background:var(--surface-1);border:1px solid var(--border-soft-2);border-radius:var(--radius-stage);
  padding:clamp(1.5rem,4vw,2.1rem);box-shadow:0 50px 110px -60px #000}
.modal__close{position:absolute;top:.75rem;right:.85rem;width:2.2rem;height:2.2rem;border:0;background:none;
  color:var(--text-fine);font-size:.86rem;line-height:1;cursor:pointer;border-radius:50%;transition:.25s var(--ease)}
.modal__close:hover{color:var(--text-primary);background:#ffffff0d}
.modal__title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.35rem;letter-spacing:.1em;line-height:1.45;color:#fff}
.modal__lead{margin-top:.55rem;font-size:.84rem;color:var(--text-secondary);word-break:auto-phrase}
.field{display:block;margin:1.35rem 0 .45rem;font-size:.78rem;letter-spacing:.06em;color:var(--text-secondary)}
.modal__panel input{width:100%;background:var(--surface-2);border:1px solid var(--border-soft-2);
  color:var(--text-primary);font:inherit;font-size:.92rem;padding:.75rem .9rem;border-radius:var(--radius-control)}
.modal__panel input:focus{outline:2px solid #ffffff40;outline-offset:1px}
/* 字送りを付けると右に寄るので、その分だけ左を足して見た目を中央に戻す */
.modal__panel input.code{font-size:1.45rem;letter-spacing:.5em;text-align:center;
  font-variant-numeric:tabular-nums;padding-left:calc(.9rem + .5em)}
.modal__go{margin-top:1.2rem}
.modal__back{margin-top:.6rem}
.modal__msg{margin-top:1rem;font-size:.82rem;line-height:1.75;padding:.75rem .9rem;
  border-radius:var(--radius-control);word-break:auto-phrase}
.modal__msg--ok{background:#ffffff0d;border:1px solid var(--border-soft-2);color:var(--text-secondary)}
.modal__msg--err{background:#ff4d6d1a;border:1px solid #ff4d6d40;color:#ffb3c1}
.modal__fine{margin-top:1.35rem;font-size:.74rem;line-height:1.9;color:var(--text-fine);word-break:auto-phrase}
.modal__fine a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}

@media(max-width:600px){
  /* 幅が無い時は、認証の操作子を優先して「はじめる」を引っ込める（既存の指定と同じ考え方） */
  .modal__panel{padding:1.4rem 1.2rem}
}