:root{
  --ink:#241F1B; --ink2:#6E645C; --mute:#A79C93;
  --cream:#FBF6F0; --cream2:#F3E9DE; --line:#EEE3D7;
  --brand:#E8833A; --brandD:#CE6C24; --green:#4FA88B;
  --sh:0 1px 2px rgba(36,31,27,.03),0 12px 34px rgba(36,31,27,.06);
  --shH:0 2px 8px rgba(36,31,27,.04),0 24px 56px rgba(36,31,27,.10);
  --drop:drop-shadow(0 18px 26px rgba(36,31,27,.15));
  --dropS:drop-shadow(0 10px 16px rgba(36,31,27,.13));
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#fff;color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Meiryo",sans-serif;
  font-size:16px;line-height:1.9;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.en{font-family:"Avenir Next","Futura","Century Gothic",sans-serif;letter-spacing:.16em}
h1,h2,h3,h4{font-weight:700;letter-spacing:.005em}
.num{font-variant-numeric:tabular-nums}

/* ── ヘッダー ── */
.hd{position:sticky;top:0;z-index:60;background:#fff}
.hd .in{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
.brand{display:block;line-height:0}
.brand img{display:block;height:44px;width:auto;margin-left:-4px}
.gnav ul{display:flex;align-items:center;gap:34px;list-style:none;font-size:14.5px}
.gnav a:not(.pill){color:var(--ink2);font-weight:500}
.gnav a:not(.pill):hover,.gnav a[aria-current]:not(.pill){color:var(--brand)}
.pill{background:var(--ink);color:#fff;padding:11px 25px;border-radius:999px;font-size:14px;font-weight:700;
  display:inline-block;transition:transform .16s,background .16s}
.pill:hover{background:var(--brand);transform:translateY(-1px);color:#fff}
.burger{display:none;border:0;background:none;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:5px 0}

/* ── 共通 ── */
.ttl{font-size:clamp(26px,3.6vw,38px);line-height:1.42;text-wrap:balance}
.lead{color:var(--ink2);font-size:15.5px;max-width:56ch;margin-top:18px}
.sec{padding:104px 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;
  padding:17px 36px;border-radius:999px;font-size:15px;font-weight:700;
  box-shadow:0 6px 18px rgba(232,131,58,.24);transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{background:var(--brandD);transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,131,58,.32);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}

/* ── ページ見出し ── */
.phead{padding:64px 0 12px}
.phead h1{font-size:clamp(30px,4.6vw,46px);line-height:1.35}
.crumb{font-size:12.5px;color:var(--mute);padding:24px 0 0}
.crumb a:hover{color:var(--brand)}

/* ── ヒーロー（トップ） ── */
.hero{padding:64px 0 96px}
.hero .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center}
.hero .grid>*{min-width:0}
.hero h1{font-size:clamp(36px,6vw,62px);line-height:1.3;letter-spacing:-.005em;text-wrap:balance}
.hero h1 .hl{color:var(--brand)}
.hero .lead{font-size:16.5px}
.anniv{display:block;font-size:13px;color:var(--ink2);letter-spacing:.06em;margin-bottom:18px}
.anniv::before{content:"";display:inline-block;width:26px;height:1.5px;background:var(--brand);
  vertical-align:middle;margin-right:12px}
/* ⚠️ width:100% は必須。2026-08-19 に不具合を発見して追加した。
   aspect-ratio だけだとグリッドの列の中で幅が確定せず、箱がつぶれて
   中の商品写真（絶対配置）が消える。トップのヒーローが空白になっていた原因。 */
.shot{position:relative;aspect-ratio:1/1;width:100%;max-width:540px;margin-left:auto}
.shot .disc{position:absolute;inset:6%;border-radius:50%;background:var(--cream)}
.shot img{position:absolute;filter:var(--drop)}
.shot .a{width:84%;left:8%;top:31%}
.shot .b{width:34%;left:4%;top:8%}

/* ── カテゴリ ── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px}
.cat{background:var(--cream);border-radius:28px;padding:38px 28px 34px;text-align:center;
  transition:transform .22s,box-shadow .22s}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shH)}
.cat .im{height:168px;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.cat .im img{max-height:100%;width:auto;filter:var(--drop)}
.cat h3{font-size:20px}
.cat p{font-size:13.5px;color:var(--ink2);margin-top:9px;line-height:1.75}
.cat .go{font-size:13px;font-weight:700;color:var(--brand);margin-top:18px;display:inline-block}

/* ── 名入れ ── */
.made{background:var(--cream);border-radius:36px;padding:76px 56px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:56px}
.step{padding-top:24px;border-top:1.5px solid var(--cream2)}
.step .no{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.2em}
.step h4{font-size:16.5px;margin-top:8px}
.step p{font-size:13.5px;color:var(--ink2);margin-top:8px;line-height:1.75}

/* ── 商品グリッド ── */
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.filters a{font-size:13.5px;font-weight:700;padding:11px 24px;border-radius:999px;
  background:var(--cream);color:var(--ink2);transition:background .16s,color .16s}
.filters a:hover{background:var(--cream2)}
.filters a[aria-current]{background:var(--ink);color:#fff}
.plist{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px}
.pcard{background:#fff;border-radius:22px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:15px;
  box-shadow:var(--sh);transition:transform .22s,box-shadow .22s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shH)}
.pcard .ph{height:144px;display:flex;align-items:center;justify-content:center}
.pcard .ph img{max-height:100%;width:auto;filter:var(--dropS)}
.pcard .ph.none{background:var(--cream);border-radius:14px;color:var(--mute);font-size:12px;width:100%}
.pcard h3{font-size:14px;line-height:1.65}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
.chip{font-size:10.5px;padding:4px 11px;border-radius:999px;background:var(--cream);color:var(--ink2);font-weight:700}
.chip.a{background:#E9F4EF;color:#2F7D64}
.more{text-align:center;margin-top:52px}

/* ── 商品詳細 ── */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding:16px 0 96px}
.detail>*{min-width:0}
.dshot{position:relative;background:var(--cream);border-radius:32px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:12%}
.dshot img{max-height:100%;width:auto;filter:var(--drop)}
.dshot .none{color:var(--mute);font-size:13px}
.dcode{font-size:12px;color:var(--mute);letter-spacing:.12em;font-weight:700}
.detail h1{font-size:clamp(23px,3vw,31px);line-height:1.5;margin:8px 0 18px}
.catch{color:var(--ink2);font-size:14.5px}
.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:32px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:15px 2px;text-align:left;vertical-align:top}
.spec th{width:38%;color:var(--ink2);font-weight:400;white-space:nowrap}
.ask{margin-top:36px;background:var(--cream);border-radius:24px;padding:30px 32px}
.ask p{font-size:13.5px;color:var(--ink2);margin-bottom:20px}

/* ── 表・沿革 ── */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:20px 2px;text-align:left;vertical-align:top}
.tbl th{width:210px;color:var(--ink2);font-weight:400;font-size:14px}
.hist{list-style:none;margin-top:14px;position:relative;padding-left:34px}
.hist::before{content:"";position:absolute;left:6px;top:18px;bottom:18px;width:2px;
  background:linear-gradient(180deg,#fff,var(--cream2) 12%,var(--cream2) 88%,#fff)}
.hist li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:26px;
  padding:19px 0;border-bottom:1px solid var(--line);transition:transform .25s ease}
.hist li:last-child{border-bottom:0}
.hist li::before{content:"";position:absolute;left:-34px;top:27px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:2px solid var(--cream2);box-sizing:border-box;
  transition:border-color .25s ease,box-shadow .25s ease}
.hist .y{font-size:13px;color:var(--mute);letter-spacing:.08em;padding-top:3px;white-space:nowrap}
.hist .t{font-size:16px;line-height:1.75}
.hist li:hover::before{border-color:var(--brand)}
/* 節目 */
.hist li.mark::before{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 5px rgba(232,131,58,.13)}
.hist li.mark .y{color:var(--brandD);font-weight:700;font-size:13.5px}
.hist li.mark .t{font-weight:700}
/* 沿革の見出し脇に置く年数 */
.histnote{margin-top:16px;font-size:13px;color:var(--mute);letter-spacing:.04em}
.histnote b{display:block;font-size:40px;line-height:1.1;color:var(--brand);
  font-family:"Avenir Next","Futura","Century Gothic",sans-serif;letter-spacing:.02em;margin-bottom:2px}
.two{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start}
.two>*{min-width:0}

/* ── 連絡先 ── */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.ccard{background:var(--cream);border-radius:26px;padding:38px 30px;text-align:center}
.ccard .l{font-size:11.5px;font-weight:700;color:var(--mute);letter-spacing:.14em}
.ccard .v{font-size:23px;font-weight:700;margin:10px 0 6px;display:block;word-break:break-all}
.ccard .h{font-size:12.5px;color:var(--ink2)}

/* ── CTA・フッター ── */
.cta{padding:0 0 104px}
.ctabox{background:var(--brand);border-radius:36px;padding:68px 54px;color:#fff;position:relative;overflow:hidden}
.ctabox::before{content:"";position:absolute;right:-110px;bottom:-180px;width:460px;height:460px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.ctabox .in{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.ctabox h2{font-size:clamp(26px,3.4vw,36px);line-height:1.42}
.ctabox p{font-size:14.5px;margin-top:16px;color:rgba(255,255,255,.93);max-width:42ch}
.tel{background:#fff;border-radius:24px;padding:30px;text-align:center;box-shadow:0 14px 38px rgba(0,0,0,.12)}
.tel .l{font-size:11.5px;color:var(--mute);font-weight:700;letter-spacing:.1em}
.tel .n{font-size:31px;font-weight:700;color:var(--ink);margin:7px 0 5px;display:block}
.tel .h{font-size:12px;color:var(--ink2)}
.ftbtn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--brandD);
  padding:17px 36px;border-radius:999px;font-size:15px;font-weight:700;margin-top:32px}
.ftbtn:hover{background:var(--ink);color:#fff}
.ft{background:var(--cream);padding:66px 0 40px;font-size:13.5px;color:var(--ink2)}
.ft .top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
.ft b{font-size:16px;color:var(--ink);letter-spacing:.04em}
.ft nav ul{list-style:none;line-height:2.35}
.ft nav a:hover{color:var(--brand)}
.ft .cp{margin-top:44px;font-size:11.5px;color:var(--mute)}
.upd{font-size:11.5px;color:var(--mute);margin-top:8px}

@media(max-width:920px){
  .gnav{display:none}
  .gnav.open{display:block;position:fixed;inset:80px 0 auto 0;background:#fff;padding:10px 24px 24px;box-shadow:var(--sh)}
  .gnav.open ul{flex-direction:column;align-items:stretch;gap:0}
  .gnav.open li{border-top:1px solid var(--line)}
  .gnav.open a{padding:16px 0;display:block}
  .gnav.open .pill{margin:16px 0 4px;text-align:center}
  .burger{display:block}
  .hero{padding:20px 0 64px}
  .hero .grid{grid-template-columns:1fr;gap:18px}
  .shot{order:-1;max-width:320px;margin:0 auto}
  .cats{grid-template-columns:1fr;gap:18px}
  .made{padding:48px 24px;border-radius:28px}
  .steps{grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:40px}
  .plist{grid-template-columns:1fr 1fr;gap:16px}
  .detail{grid-template-columns:1fr;gap:32px;padding-bottom:64px}
  .two{grid-template-columns:1fr;gap:26px}
  .hist{padding-left:26px}
  .hist::before{left:4px}
  .hist li{grid-template-columns:1fr;gap:3px;padding:16px 0}
  .hist li::before{left:-26px;top:20px;width:12px;height:12px}
  .hist .t{font-size:15.5px}
  .histnote{margin-top:10px}
  .histnote b{font-size:34px}
  .contact{grid-template-columns:1fr;gap:16px}
  .tbl th{width:120px;font-size:13px}
  .sec{padding:64px 0}
  .phead{padding:40px 0 8px}
  .cta{padding:0 0 64px}
  .ctabox{padding:44px 26px;border-radius:28px}
  .ctabox .in{grid-template-columns:1fr;gap:32px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── お問い合わせフォーム（2026-08-17 追加） ── */
.formbox{background:var(--cream);border-radius:36px;padding:64px 56px;margin-top:56px}
.formbox .note{font-size:13.5px;color:var(--ink2);margin-top:10px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin-top:44px}
.f{display:flex;flex-direction:column;gap:9px}
.f.full{grid-column:1 / -1}
.f label{font-size:13.5px;font-weight:700;letter-spacing:.02em}
.f .req{color:var(--brand);font-size:11px;margin-left:6px;letter-spacing:.1em}
.f .opt{color:var(--mute);font-size:11px;margin-left:6px;letter-spacing:.1em}
.f input,.f select,.f textarea{
  font-family:inherit;font-size:15.5px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:border-color .15s,box-shadow .15s;width:100%}
.f textarea{min-height:150px;resize:vertical;line-height:1.8}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(232,131,58,.12)}
.f input::placeholder,.f textarea::placeholder{color:var(--mute)}
.f .hint{font-size:12px;color:var(--ink2)}
.f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A79C93' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 18px center}
.fsubmit{margin-top:40px;text-align:center}
.fsubmit .btn{font-size:16px;padding:18px 52px;border:0;cursor:pointer;font-family:inherit;font-weight:700}
.fsubmit .privacy{font-size:12.5px;color:var(--ink2);margin-top:18px;line-height:1.8}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:860px){
  .formbox{padding:44px 22px;border-radius:28px}
  .fgrid{grid-template-columns:1fr;gap:22px;margin-top:34px}
}
.cfdone{text-align:center;padding:64px 20px}
.cfdone .ico{width:66px;height:66px;margin:0 auto 22px;border-radius:50%;
  background:var(--green);color:#fff;font-size:32px;line-height:66px;font-weight:700}
.cfdone h3{font-size:24px}
.cfdone p{font-size:15px;color:var(--ink2);margin-top:14px;line-height:1.95}
.cferr{margin-top:26px;padding:18px 22px;border-radius:14px;
  background:#fff;border:1.5px solid var(--brand);font-size:14.5px;line-height:1.85}
.cferr a{color:var(--brandD);font-weight:700;text-decoration:underline}

/* ══════════════════════════════════════════════════════
   2026-08-19 追加 — 参考動画（Instagramリール2本）の文法を移植
   ・スクロールで「せり上がりながら現れる」
   ・商品がヒーローの主役。スクロールでゆっくり動く
   ・小さな大文字ラベル ＋ 明朝の大見出し ＋ 枠線だけのCTA
   ・1セクションだけ暗くして、そこに57年の重みを置く
   色は既存のブランド（生成り＋朱）を崩さない。暗色は墨（#1A1512）＝黒より温かい
   ══════════════════════════════════════════════════════ */

/* 2026-08-20 河野判断：黒はかっこいいが商品PR系サイトではないので、
   もっと洗練された柔らかい印象へ。黒をやめ、生成りより一段濃い温かいグレージュにした。
   文字は濃茶(--ink)。全体が同じ色family で揃うので、境目が硬く出ない。 */
:root{ --deep:#EBE3D8; --deep2:#E3D9CB; }

/* 明朝は不採用（2026-08-19 河野判断：元の書体＝ヒラギノ角ゴに統一する）。
   参考動画はセリフ体だったが、ナカシンの既存デザインに合わせることを優先した。 */

/* ── 小さな大文字ラベル（参考動画の "EST. 1905 · GENEVA"） ── */
.eyebrow{display:inline-block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute);font-weight:700;margin-bottom:18px;
  font-family:"Avenir Next","Futura","Century Gothic",sans-serif}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--brand);
  vertical-align:middle;margin-right:12px;transform:translateY(-1px)}
.dk .eyebrow{color:var(--mute)}

/* ── 枠線だけのCTA（参考動画の "EXPLORE COLLECTION"） ── */
.btn.line{background:transparent;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:none;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 32px;font-weight:700}
.btn.line:hover{background:transparent;color:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.dk .btn.line{color:var(--ink);border-color:rgba(36,31,27,.22)}
.dk .btn.line:hover{color:var(--brand);border-color:var(--brand)}

/* ── スクロールで現れる ── */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.10s} .rv.d2{transition-delay:.20s}
.rv.d3{transition-delay:.30s} .rv.d4{transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .par{transform:none !important}
}

/* ── ヒーローの商品をスクロールでゆっくり動かす ── */
.shot .a,.shot .b{will-change:transform}

/* ══ 暗いショーケース（57年・一貫生産・医療機器製造業許可） ══ */
.dk{background:var(--deep);color:var(--ink);padding:120px 0;overflow:hidden;position:relative}
.dk::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,rgba(232,131,58,.16),transparent 62%)}
.dk .wrap{position:relative;z-index:1}
.dk h2{font-size:clamp(30px,5.2vw,58px);line-height:1.34;text-wrap:balance}
.dk h2 em{font-style:normal;color:var(--brand)}
.dk .lead{color:var(--ink2);max-width:52ch}
.dkhead{text-align:center;max-width:760px;margin:0 auto}
.dkhead .lead{margin-left:auto;margin-right:auto}

/* 数字を3つ並べる */
/* 2026-08-20：取扱点数の表示をやめたため 3列→2列（商品はまだ追加される） */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:76px;max-width:820px;margin-left:auto;margin-right:auto;
  border-top:1px solid rgba(36,31,27,.14)}
.fig{padding:44px 16px 0;text-align:center;border-right:1px solid rgba(36,31,27,.14)}
.fig:last-child{border-right:0}
.fig .n{font-size:clamp(40px,7vw,72px);line-height:1;color:var(--ink);
  font-family:"Avenir Next","Futura","Century Gothic",sans-serif;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.fig .n small{font-size:.36em;letter-spacing:.06em;margin-left:4px;color:var(--brand)}
.fig .k{font-size:12.5px;letter-spacing:.16em;color:var(--ink2);margin-top:16px}
.fig .s{font-size:13px;color:var(--mute);margin-top:8px;line-height:1.8}
@media(max-width:760px){
  .dk{padding:84px 0}
  .figs{grid-template-columns:1fr;gap:0}
  .fig{border-right:0;border-bottom:1px solid rgba(36,31,27,.14);padding:34px 8px}
  .fig:last-child{border-bottom:0}
}

/* ══ MVV ══ */
.mvv{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--line)}
.mvv .row{display:grid;grid-template-columns:180px 1fr;gap:32px;
  padding:38px 0;border-bottom:1px solid var(--line);align-items:start}
.mvv .k{font-size:12px;letter-spacing:.26em;color:var(--brand);font-weight:700;padding-top:10px;
  font-family:"Avenir Next","Futura","Century Gothic",sans-serif}
.mvv .k small{display:block;font-family:inherit;color:var(--mute);font-size:10.5px;
  letter-spacing:.14em;margin-top:7px;font-weight:500}
.mvv .v{font-size:clamp(19px,2.5vw,27px);line-height:1.62;text-wrap:balance}
.mvv .v .note{display:block;font-size:14.5px;color:var(--ink2);margin-top:14px;line-height:1.9;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;font-weight:400}
.vals{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.val{display:inline-flex;align-items:baseline;gap:12px;border:1.5px solid var(--line);
  border-radius:999px;padding:11px 24px}
.val b{font-size:19px}
.val span{font-size:12.5px;color:var(--ink2)}
@media(max-width:720px){ .mvv .row{grid-template-columns:1fr;gap:12px;padding:30px 0} .mvv .k{padding-top:0} }

/* 未確定であることの注記 */
.draftnote{margin-top:26px;padding:16px 20px;border-radius:14px;background:var(--cream);
  border:1px dashed var(--line);font-size:12.5px;color:var(--ink2);line-height:1.85}
.draftnote b{color:var(--ink)}

/* ══════════════════════════════════════════════════════
   2026-08-20 追加 — オープニングと、商品の動き

   ① オープニング：墨色の暗闇に「もらってうれしい、配りやすい。」が出て、
      スクロールすると商品が奥から手前へ浮かび上がり、そのまま明るいトップへ抜ける。
      暗→明の流れにしたのは、既にサイト内に墨色のセクションがあるため。
      黒一色で終わらせず「朝が明ける」形にして、生成りのブランドへ戻している。

   ② 商品の動き：写真が1商品1枚しかないので「360度回す」はできない。
      代わりに 傾き＋奥行き＋影の移動 を組み合わせて、立体的に見せている。
      ⚠️ 傾きは最大8度まで。これ以上かけると、平面の写真だと分かって安っぽくなる。
   ══════════════════════════════════════════════════════ */

/* ── オープニング ── */
.op{position:relative;height:200vh;background:var(--deep2)}
/* ⚠️ 2026-08-21 バグ修正：height:100vh / top:0 だと、上に居座るヘッダー(80px)のぶん
   ステージが画面の下へはみ出し、いちばん下の SCROLL 表示が見えなくなっていた。
   ヘッダーの高さを引いた領域に収める。 */
.op-stage{position:sticky;top:80px;height:calc(100vh - 80px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;perspective:1200px}
/* 最後に「明ける」膜。
   ⚠️ 監修メモ（2026-08-20）：最初は白を全面(z-index:3)にかぶせたが、
      墨色に白が半分乗る区間が濁ったグレーになり、商品まで隠れてしまった。
      → ①色を生成り(#FBF6F0＝サイトの地色)に ②商品より下(z-index:0)へ
        ③明けるのを終盤(p=0.72〜1)に凝縮して、濁る時間をなくした。
      これで商品は明るくなった画面に残ったまま、そのままトップへ流れ込む。 */
.op-dawn{position:absolute;left:0;right:0;bottom:0;height:140%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,246,240,0) 0%,var(--cream) 20%);
  transform:translateY(calc((1 - var(--p,0)) * 263%));will-change:transform}
/* ⚠️ 2026-08-21：ヒーローと同じ見出しを出すのはやめた（2回流れてくどい）。
   代わりに、ヒーローとは別の「創業の言葉」をここに置く。
   ⚠️ 最初の1画面が文字だけ・商品も透明だと、読み込み失敗に見える（河野さん指摘）。
      → 商品は p=0 でも薄く見えている状態から始める（下の op-lead を参照）。 */
.op-copy{position:absolute;top:8%;left:0;right:0;z-index:2;text-align:center;padding:0 26px;
  opacity:calc(1 - var(--p,0) * 1.35);
  transform:translateY(calc(var(--p,0) * -34px));will-change:opacity,transform}
.op-copy .anniv{color:var(--mute);justify-content:center;letter-spacing:.14em;font-size:11.5px}
.op-copy .anniv::before{background:var(--brand)}
.op-copy h2{font-size:clamp(28px,5.2vw,58px);line-height:1.34;color:var(--ink);
  letter-spacing:-.01em;text-wrap:balance;margin-top:4px}
.op-copy h2 .hl{color:var(--brand)}

/* 商品が奥から手前へ。
   ⚠️ 監修メモ（2026-08-21 作り直し）：
      前版は3枚を四隅に小さく散らしていた。中央のコピーを避けるためだったが、
      「なんか違う／散らかって見える」と指摘を受けた（勇人さん）。
      原因は主役がいないこと。3つが同じ重さで端に散っていたため、
      どこを見ればいいのか分からない画面になっていた。
      → コピーを外して中央を空け、**商品1つだけ**を大きく通す作りに変えた。
      奥（-1000px）から等倍まで寄せ、回転は最後にほどける。 */
.op-items{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;
  display:grid;place-items:center}
.op-items img{filter:var(--drop);will-change:transform,opacity}
/* ⚠️ 最初は opacity を 0 から始めていたが、1画面目が真っ白に見えて
   「読み込まれていないのかと思う」と指摘を受けた（2026-08-21 河野さん）。
   → p=0 でも 0.34 残す。遠くに霞んで見えている状態から始まる。 */
.op-items .op-lead{width:min(84%,900px);margin-top:11%;
  /* 2026-08-27：干支の集合写真は5点並びなので、1点のときより大きく出さないと個々が読めない。
     大きくするとコピーとぶつかるので、コピーを 15%→8% に上げ、商品を 6%→11% 下げて逃がした。 */
  opacity:calc(0.34 + var(--p,0) * 0.78);
  transform:translateZ(calc((var(--p,0) - 1) * 1000px))
            rotate(calc((1 - var(--p,0)) * -9deg))}
@media(max-width:760px){ .op-items .op-lead{width:66%} }
/* スクロールの合図。
   ⚠️ 2026-08-21：以前は「細い縦線＋SCROLLの英字」だったが、
      これは WellneXis 側とまったく同じ形で、作り分けができていなかった（河野さん指摘）。
      → こちらは「丸に下向き矢印」。ゆっくり沈み、輪が広がって消える。
   ⚠️ 元の色 rgba(243,233,222,.55) は地色とほぼ同じで、そもそも見えていなかった。 */
/* スクロールの合図（4案目）。
   ⚠️ これまでの経緯：①線＋SCROLL の英字＝WellneXis と同じ形 ②丸に下向き矢印＝ダサい
      ③細い線を光がおりる＝きれいだが「スクロールしろ」と読めない（河野さん指摘）。
   → 形そのものに意味があるものへ。マウスの輪郭の中を、ホイールの点が落ちる。
      矢印も英字も使わないが、何をすればいいかは一目でわかる。 */
/* 文字を縦に積み、上から下へ一文字ずつ明るさが流れる。
   ⚠️ ここまでの不採用：①線＋横組みSCROLL＝WellneXis と同じ ②丸＋下向き矢印＝ダサい
      ③線を光がおりる＝意味が読めない ④マウス型 ⑤円周を回るSCROLL。
   → 文字が「読む方向」そのもので下を示す形にした。波も上から下へ流れる。 */
.op-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:calc(1 - var(--p,0) * 2.4)}
.op-hint .w{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:"Avenir Next","Futura","Century Gothic",sans-serif;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;line-height:1}
.op-hint .w i{font-style:normal;color:var(--ink2);opacity:.3;
  animation:opFall 2.3s ease-in-out infinite}
.op-hint .w i:nth-child(2){animation-delay:.12s}
.op-hint .w i:nth-child(3){animation-delay:.24s}
.op-hint .w i:nth-child(4){animation-delay:.36s}
.op-hint .w i:nth-child(5){animation-delay:.48s}
.op-hint .w i:nth-child(6){animation-delay:.60s}
/* 文字は色が変わるだけでなく、実際に少し下へ落ちる。 */
@keyframes opFall{
  0%,65%,100%{opacity:.3;color:var(--ink2);transform:translateY(0)}
  18%{opacity:1;color:var(--brand);transform:translateY(3px)}
  40%{opacity:.75;color:var(--ink2);transform:translateY(0)}}
/* 線の中を、光が上から下へ走り抜ける。 */
.op-hint .rail{position:relative;width:1px;height:44px;
  background:rgba(36,31,27,.14);overflow:hidden}
.op-hint .rail::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;
  background:var(--brand);animation:opRail 2.3s cubic-bezier(.45,0,.25,1) infinite}
@keyframes opRail{0%{transform:translateY(-18px)}
  60%,100%{transform:translateY(44px)}}

/* ── ヒーローも奥から出す ── */
.hero{perspective:1200px;perspective-origin:50% 40%}
.hero .grid{transform:translateZ(calc((var(--q,1) - 1) * 360px));
  opacity:calc(var(--q,1) * 1.5 - 0.3);transform-style:preserve-3d;
  will-change:transform,opacity}

/* ── 商品を立体的に見せる（写真は1枚のまま） ── */
.tilt{transform-origin:50% 60%}
.dshot{perspective:1000px}
.dshot img{will-change:transform,filter}

@media(max-width:760px){
  .op{height:170vh}
  .op-items .i1{width:30%;left:3%;bottom:10%}
  .op-items .i2{width:23%;right:5%;top:11%}
  .op-items .i3{width:25%;right:3%;bottom:14%}
  .hero{perspective:800px}
  .hero .grid{transform:translateZ(calc((var(--q,1) - 1) * 200px))}
}
@media(prefers-reduced-motion:reduce){
  .op{height:100vh}
  .op-dawn{opacity:0}
  .op-copy{opacity:1;transform:none}
  .op-items img{opacity:1;transform:none}
  .hero .grid{transform:none !important;opacity:1 !important}
  .op-hint i{animation:none}
}

/* ══════════════════════════════════════════════════════
   2026-08-20 追加 — オリジナル制作ページ（original.html）
   ねらい：「既存商品に名入れするだけの会社」ではなく
   「ゼロから作れる会社」だと伝える。予算で3段階あることを見せる。
   ══════════════════════════════════════════════════════ */

/* 予算の3段階 */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.tier{background:#fff;border:1.5px solid var(--line);border-radius:28px;
  padding:36px 30px 32px;display:flex;flex-direction:column;position:relative}
.tier.best{border-color:var(--brand);box-shadow:0 14px 40px rgba(232,131,58,.14)}
.tier .badge{position:absolute;top:-13px;left:30px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 16px;border-radius:999px}
.tier .lv{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--brand);
  font-family:"Avenir Next","Futura",sans-serif}
.tier h3{font-size:22px;margin-top:12px;line-height:1.45}
.tier .bud{font-size:12.5px;color:var(--ink2);margin-top:10px;
  padding:7px 14px;background:var(--cream);border-radius:999px;display:inline-block;align-self:flex-start}
.tier p{font-size:13.5px;color:var(--ink2);margin-top:18px;line-height:1.85}
.tier ul{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tier li{font-size:13px;color:var(--ink);padding:7px 0 7px 22px;position:relative;line-height:1.7}
.tier li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;
  border-radius:50%;background:var(--brand);opacity:.5}
.tier li.no{color:var(--mute)}
.tier li.no::before{background:var(--mute);opacity:.3}

/* むすぶちゃんの実演 */
.demo{background:var(--deep);border-radius:36px;padding:56px 48px;margin-top:24px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.demo .stagebox{background:#fff;border-radius:28px;padding:34px 26px;display:flex;
  align-items:center;justify-content:center;min-height:300px}
.demo .stagebox svg{width:100%;max-width:270px;height:auto;
  transition:filter .3s}
.demo h3{font-size:clamp(22px,3vw,30px);line-height:1.5}
.demo p{font-size:14.5px;color:var(--ink2);margin-top:16px;line-height:1.9}
.swatches{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sw{width:52px;height:52px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;
  padding:0;transition:transform .18s,border-color .18s;position:relative}
.sw:hover{transform:translateY(-3px)}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.sw span{position:absolute;inset:6px;border-radius:50%}
.demo .note{font-size:12px;color:var(--mute);margin-top:20px;line-height:1.75}

/* できることの一覧 */
.cando{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.can{background:var(--cream);border-radius:24px;padding:32px 28px}
.can .ic{width:44px;height:44px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px}
.can h4{font-size:17px;line-height:1.5}
.can p{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.8}

/* キャラクターの3面図 */
.poses{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin-top:40px;align-items:end}
.pose{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:20px;text-align:center}
.pose img{width:100%;height:auto;margin:0 auto}
.pose b{display:block;font-size:12px;color:var(--ink2);margin-top:12px;letter-spacing:.08em}

@media(max-width:900px){
  .tiers{grid-template-columns:1fr}
  .demo{grid-template-columns:1fr;padding:40px 24px;gap:32px}
  .cando{grid-template-columns:1fr}
  .poses{grid-template-columns:1fr 1fr;gap:14px}
}

/* 段階切り替えボタン（オリジナル制作ページの実演） */
.stepbtn{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink2);transition:all .18s}
.stepbtn:hover{border-color:var(--brand);color:var(--brand)}
.stepbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.demo .stagebox #pkg{width:100%;max-width:420px;height:auto}
/* 絆創膏は「台紙＋絆創膏」の2つを横に並べるので、ウェットティッシュより広く要る。
   個別指定がないと .stagebox svg の 270px に縛られて小さく出る（2026-08-27 河野さん指摘） */
.demo .stagebox #bsvg{width:100%;max-width:660px;height:auto}
.demo #pkTitle{transition:opacity .2s}

/* ── オリジナル制作のプレビュー（トップ / 2026-08-21） ──
   ⚠️ 見出しとボタンだけでは余白が空きすぎて、何ができるのか伝わらなかった。
      「そのまま → 名入れ → 御社仕様」の3段階を絵で見せて、
      オリジナル制作ページへの入口にしている。 */
.pvs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.pv{background:#fff;border-radius:22px;padding:26px 20px 22px;box-shadow:var(--sh);
  transition:transform .22s,box-shadow .22s}
.pv:hover{transform:translateY(-5px);box-shadow:var(--shH)}
.pv img{width:100%;height:auto}
.pv figcaption{text-align:center;margin-top:16px;font-size:13px;color:var(--ink2);line-height:1.7}
.pv figcaption b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.note{font-size:12.5px;color:var(--mute);margin-top:14px}
@media(max-width:760px){
  .pvs{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .pv{padding:20px 18px 18px}
}