picture{display:contents}
/* ------------------------------------------------------------
   Pukkuri Seal Lab — tokens (crystal candy: white × pink)
------------------------------------------------------------ */
:root{
  --bg:#ffffff;
  --bg-2:#fdf4fa;
  --bg-3:#fbe6f3;
  /* 文字色：茶みを抜いてアメジスト寄りに */
  --ink:#3f1a52;      /* 白背景 14.2:1 */
  --ink-2:#7b4a88;    /* 白背景  6.6:1 */
  --ink-3:#876194;    /* 白背景  5.0:1（#8d6a9a は白でちょうど4.51で、わずかな地色で割れた） */
  --line:#f0e0f2;
  --accent:#ff5ca8;        /* 面・装飾用（小さい文字には使わない） */
  --accent-2:#ffb3d6;
  --accent-deep:#d81b74;   /* 文字に使えるピンク 白背景 4.85:1 */
  --bold:#d81b74;          /* 太字・強調のピンク 白背景 4.85:1 */
  --aqua:#0b6d9e;          /* 太字・見出しの水色 白背景 5.68:1 / 薄ピンク地 4.79:1 */
  --accent-ink:#ffffff;
  /* パステル（クリスタルの映り込み用） */
  --pastel-blush:#ffe9f3;
  --pastel-lilac:#f3e9fd;
  --pastel-sky:#e6f4fd;
  --pastel-mint:#e4f9f0;
  --pastel-butter:#fff6dd;
  --mark:rgba(255,160,205,.5);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.95);
  --glow:rgba(255,92,168,.22);
  --tint:rgba(255,240,249,.62);
  --film:rgba(255,255,255,.62);
  --btn-ink:#0a4258;   /* ぷっくりピンクガラス上で 5.0:1（茶みの出る #4a0d2c を廃止） */
  --radius:28px;
  --max:1200px;
  /* 書体は2つだけ：和文＝Zen Maru Gothic / 欧文・数字＝Fredoka */
  --font-en:"Fredoka","Zen Maru Gothic","Hiragino Maru Gothic ProN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Hiragino Sans",sans-serif;
  --font-jp-head:var(--font-jp);
  --e-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-jp); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  line-break:strict; overflow-wrap:break-word; /* 禁則。文節改行は .ph（tools/jp_wbr.py が挿入する inline-block）で行う */
}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(52% 38% at 88% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
             radial-gradient(44% 34% at 2% 18%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 62%),
             radial-gradient(46% 34% at 96% 44%, rgba(178,214,255,.42), transparent 62%),
             radial-gradient(44% 32% at 4% 70%, rgba(178,240,214,.40), transparent 62%),
             radial-gradient(42% 34% at 88% 94%, rgba(214,196,255,.44), transparent 62%)}
img{max-width:100%; display:block}
a{color:inherit}
/* 太字・強調はピンク（--bold は白背景 4.85:1）。反転パネル内だけ白に戻す */
b,strong{color:var(--bold)}
:where(b,strong):not(.btn *, .contact-next *, .xs-legend b){font-weight:500}
.btn b, .btn strong{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--font-jp-head); font-weight:700; line-height:1.3; text-wrap:balance; color:var(--aqua)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.en{font-family:var(--font-en); font-variant-numeric:tabular-nums}
.num{font-family:var(--font-en); font-variant-numeric:tabular-nums; font-weight:800}
mark{background:none; color:inherit; background-image:linear-gradient(transparent 55%, var(--mark) 55%); padding:0 .06em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,48px)}
.ph{display:inline-block; max-width:100%; overflow-wrap:anywhere; text-decoration:inherit} /* BudouX 文節: 文節内では折り返さない（keep-all は Safari が禁則を無視するため不採用） */
.nb{white-space:nowrap}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px}
.logo{white-space:nowrap; font-family:var(--font-en); font-weight:900; font-size:24px; letter-spacing:-.05em; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.logo-jp{font-family:var(--font-jp-head); font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--aqua)}
.logo-by{white-space:nowrap; display:flex; flex-direction:column; line-height:1.1; margin-left:6px; padding-left:12px; border-left:1px solid var(--line); font-family:var(--font-en); font-weight:900; font-size:11px; letter-spacing:-.02em; color:var(--aqua)}
.logo-by em{font-style:normal; font-family:inherit; font-weight:500; font-size:10px; letter-spacing:0; margin-top:2px}
@media (max-width:720px){ .logo-by{display:none} }
.logo i{width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,#ff8ac4,#ff3d97)}
.nav{display:flex; gap:22px; align-items:center}
.nav a{white-space:nowrap; color:var(--aqua); font-family:var(--font-en); font-weight:600; font-size:14.5px; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; opacity:.9}
.nav a:hover{opacity:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:999px; border:0; position:relative; overflow:visible;
  background:none; color:var(--btn-ink); font-weight:700; font-size:15.5px; text-decoration:none; cursor:pointer; white-space:nowrap; isolation:isolate;
  box-shadow:none;
  transition:transform .3s var(--e-out), filter .3s;
}
/* 硬質エポキシのドームを撮影した素材を 9 スライスで伸ばす。ラベルは実テキストのまま */
.btn::before{content:""; position:absolute; inset:-2px -3px -5px -3px; z-index:-1; pointer-events:none;
  border-style:solid; border-width:0 26px; border-image-repeat:stretch;
  border-image-source:url(/assets/ui-pill-pink.png); border-image-slice:0 76 fill;
  transition:filter .3s}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{filter:saturate(1.10) brightness(1.03) drop-shadow(0 8px 14px rgba(216,27,116,.22))}
.btn.ghost{background:none; color:var(--aqua); border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.btn.ghost::before{border-width:0 27px; border-image-source:url(/assets/ui-pill-clear.png); border-image-slice:0 75 fill}
.btn.ghost:hover::before{filter:brightness(.985) drop-shadow(0 8px 14px rgba(123,74,136,.16))}
.btn.sm{padding:12px 22px; font-size:14px}
.btn.sm::before{border-width:0 22px}
.hdr .btn{flex:none}
@media (max-width:820px){ .nav{display:none} }
.cta-short{display:none}
@media (max-width:1180px){ .nav{gap:18px} .cta-long{display:none} .cta-short{display:inline} }
@media (max-width:1024px){ .logo-cand .lc-by .by-s{font-size:11px;letter-spacing:.2em} }
@media (max-width:640px){ .cta-long{display:none} .cta-short{display:inline} .hdr-in{height:64px} .logo{font-size:20px} }

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(72px,10vw,140px) 0}
.sec.tint{background:var(--tint)}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.st-now{--ar:2.651; --k:1.0; background-image:url(/assets/title-now.webp)}
.st-product{--ar:4.586; --k:1.003; background-image:url(/assets/title-product.webp)}
.st-use{--ar:2.53; --k:1.007; background-image:url(/assets/title-use.webp)}
.st-why{--ar:2.367; --k:1.138; background-image:url(/assets/title-why.webp)}
.st-price{--ar:3.019; --k:1.013; background-image:url(/assets/title-price.webp)}
.st-flow{--ar:3.027; --k:1.005; background-image:url(/assets/title-flow.webp)}
.st-quality{--ar:3.385; --k:1.202; background-image:url(/assets/title-quality.webp)}
.st-data{--ar:3.141; --k:1.0; background-image:url(/assets/title-data.webp)}
.st-faq{--ar:2.369; --k:1.054; background-image:url(/assets/title-faq.webp)}
.st-studio{--ar:3.786; --k:1.003; background-image:url(/assets/title-studio.webp)}
.st-contact{--ar:4.475; --k:1.006; background-image:url(/assets/title-contact.webp)}
.sec-sub{font-size:14px; color:var(--ink-2); letter-spacing:.04em}
.lead{font-size:clamp(17px,2vw,20px); line-height:2; max-width:38em; color:var(--ink)}
.muted{color:var(--ink-2)}
.small{font-size:14px; line-height:1.8}
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .g3{grid-template-columns:1fr} .g2{grid-template-columns:1fr} }
.card{background:linear-gradient(150deg, rgba(255,255,255,.90), rgba(255,255,255,.66)); border-radius:var(--radius); padding:clamp(24px,3vw,36px); border:1px solid var(--glass-line); box-shadow:0 24px 50px -28px var(--glow), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.sec.tint .card{background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.card h3{font-size:20px; margin-bottom:12px; line-height:1.5}
.card p{color:var(--ink-2); font-size:16.5px}
.rv{opacity:1; transform:none; transition:opacity .8s var(--e-out), transform .9s var(--e-out)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} }

/* ---------- photos ---------- */
.photo{margin:0}
.photo img{display:block; width:100%; height:auto; border-radius:var(--radius)}
.photo figcaption{font-size:12px; color:var(--ink-3); margin-top:10px; text-align:right}

/* ---------- hero ---------- */
.hero{position:relative; padding:clamp(16px,3vw,40px) 0 clamp(8px,2vw,24px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; padding-top:clamp(16px,3vw,36px); padding-bottom:clamp(28px,4vw,48px)} /* 左右の padding は .wrap のまま（旧: padding:… 0 … で左右0になり、狭い画面で文字が端に張り付いていた） */
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px} }
.hero-copy{position:relative; z-index:2; max-width:640px}
.eyebrow{font-weight:500; font-size:13.5px; letter-spacing:.06em; color:var(--accent-deep); margin-bottom:18px}
.h1{
  font-family:var(--font-jp-head); font-size:clamp(34px,5.2vw,66px); line-height:1.16; letter-spacing:-.01em; font-weight:900; margin-bottom:22px;
}
.h1-img{display:block; width:min(100%,640px); height:auto; margin:6px 0 0}
.h1-img--resin{mix-blend-mode:multiply}
.hero-lead{font-size:clamp(16.5px,1.6vw,18px); line-height:2; color:var(--ink-2); max-width:34em; margin:0 0 26px}
.hero-note{max-width:34em; margin:-14px 0 24px; font-size:12.5px; line-height:1.7}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero-stats{display:flex; gap:8px 22px; flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.hero-stats b{font-family:var(--font-en); font-weight:500; color:var(--bold); font-size:16px; letter-spacing:0}
.hero-vis{position:relative; z-index:1; color:var(--ink)}
.hero-vis img{box-shadow:0 30px 60px rgba(122,31,78,.16)}
@media (max-width:900px){ .hero-vis{max-width:520px; margin:0 auto} .hero-copy{max-width:none} }


/* ---------- definition ---------- */
.def{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){ .def{grid-template-columns:1fr} }
.def-text{font-size:clamp(17px,1.9vw,21px); line-height:2; font-weight:700; letter-spacing:.005em; color:var(--aqua)}
.aka{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px}
.aka > span{font-size:12px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2)}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0}
/* 数値カードは dl：項目(dt)を先、値(dd)を後に書き、見た目は値→項目の順（2026-09-27 A8） */
.stat{background:var(--bg); padding:22px 20px; display:flex; flex-direction:column}
.stat > dd{margin:0; order:-1}
.stat b{display:block; font-family:var(--font-en); font-weight:500; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.04em; line-height:1}
.stat b small{font-size:.42em; font-weight:500; letter-spacing:0; margin-left:2px; font-family:var(--font-jp)}
.stat > dt{display:block; font-size:12px; color:var(--ink-2); margin-top:8px}

/* ---------- why one ---------- */
.why-lead{color:var(--aqua); font-size:clamp(18px,2.2vw,24px); line-height:1.9; font-weight:700; max-width:30em; margin-bottom:clamp(36px,5vw,56px)}
.why-lead .q{display:block; color:var(--ink-3); font-weight:400; font-size:.78em; line-height:1.8; margin-bottom:14px}
.card .k{display:inline-block; font-family:var(--font-en); font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua); margin-bottom:18px}

/* ---------- product ---------- */
.prod{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start}
@media (max-width:900px){ .prod{grid-template-columns:1fr} }
.sheet-wrap{position:sticky; top:100px}
@media (max-width:900px){ .sheet-wrap{position:static} }
.sheet-fig{background:linear-gradient(150deg, #fff, var(--pastel-lilac) 60%, var(--pastel-sky)); border-radius:var(--radius); overflow:hidden; display:grid; place-items:center; color:var(--ink); border:1px solid var(--glass-line)}
.sheet-fig img{display:block; width:100%; height:auto}
.sheet-cap{display:flex; justify-content:space-between; gap:12px; margin-top:14px; font-size:13px; color:var(--ink-2)}
.spec{border-top:1px solid var(--line)}
.spec div{display:grid; grid-template-columns:120px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline}
.spec dt{font-size:12.5px; letter-spacing:.06em; color:var(--aqua); font-weight:700}
.spec dd{margin:0; font-size:16px; line-height:1.8}
.spec dd b{font-family:var(--font-en); font-weight:500}
.spec-note{margin:20px 0 0; padding:18px 20px; border-radius:18px; background:#fff5fa; border:1px solid #f6dce9;
  font-size:15px; line-height:1.85; color:var(--ink-2)}
.spec-note b{color:var(--bold); font-weight:500}

/* ---------- use cases (rows) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 130px; gap:24px; padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line); align-items:start}
@media (max-width:900px){ .row{grid-template-columns:1fr; gap:10px} }
.row h3{font-size:clamp(18px,1.9vw,22px); letter-spacing:-.01em; display:flex; align-items:center; gap:14px; line-height:1.4}
/* 見出しの補足(.who)は h3 の外の p。h3 の中にあった頃と同じ字間・行高・折り返しを row-head から継承させる（2026-09-27 A8） */
.row .row-head{font-size:clamp(18px,1.9vw,22px); letter-spacing:-.01em; line-height:1.4}
.row .who{font-size:12px; color:var(--ink-2); display:block; margin-top:6px; font-weight:400; text-wrap:balance}
.row p{color:var(--ink-2); font-size:16.5px}
.row .row-copy p + p{margin-top:12px}
.row .row-copy .family-lead{font-size:18px; line-height:1.7}
.row .row-copy .row-note{font-size:14px; line-height:1.85}
.row .lot{color:var(--bold); font-family:var(--font-en); font-weight:500; font-size:16px; letter-spacing:-.01em; text-align:right}
.row .lot small{display:block; font-family:var(--font-jp); font-weight:400; font-size:11px; color:var(--ink-2); letter-spacing:0}
@media (max-width:900px){ .row .lot{text-align:left} }

/* ---------- price ---------- */
.price-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:end; margin-bottom:clamp(40px,5vw,64px)}
@media (max-width:900px){ .price-hero{grid-template-columns:1fr} }
.bignum{color:var(--bold); font-family:var(--font-en); font-weight:500; font-size:clamp(88px,15vw,196px); letter-spacing:-.06em; line-height:.86; display:flex; align-items:baseline; gap:.06em; margin-left:-.03em}
.bignum .yen{font-size:.42em; letter-spacing:-.03em}
.bignum .per{font-size:.16em; letter-spacing:0; font-family:var(--font-jp); font-weight:700; color:var(--aqua); align-self:end; margin-bottom:.35em}
.price-meta{display:flex; gap:28px; flex-wrap:wrap; margin-top:22px}
.price-meta div b{display:block; font-family:var(--font-en); font-weight:500; font-size:22px; letter-spacing:-.02em}
.price-meta div > span{font-size:12px; color:var(--aqua)}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px; background:none; color:var(--aqua); position:relative; isolation:isolate}
.pill::after{content:""; position:absolute; inset:-1px -2px -3px -2px; z-index:-1; pointer-events:none;
  border-style:solid; border-width:0 15px; border-image-repeat:stretch;
  border-image-source:url(/assets/ui-pill-clear.png); border-image-slice:0 75 fill}
.pill.ok{background:none; color:var(--btn-ink)}   /* ピンクガラス上 7.6:1（--bold だと 3.2:1 で不足） */
.pill.ok::after{border-image-source:url(/assets/ui-pill-pink.png); border-image-slice:0 76 fill}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.7}
.slider-card{background:var(--bg); border-radius:var(--radius); padding:clamp(24px,3vw,36px); border:1px solid var(--line)}
.slider-card label{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--ink-2); margin-bottom:14px}
.slider-card label b{font-family:var(--font-en); font-weight:500; font-size:30px; letter-spacing:-.04em; color:var(--bold)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--line); border-radius:2px}
input[type=range]::-moz-range-track{height:4px; background:var(--line); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:34px; height:34px; border-radius:50%; margin-top:-15px; border:0; cursor:pointer;
  background:radial-gradient(circle at 34% 28%, #fff 0 8%, rgba(255,255,255,.35) 20%, #ffa9d2 46%, #ff4d9f 100%); box-shadow:inset 0 -3px 5px rgba(120,0,60,.18), 0 6px 14px var(--glow)}
input[type=range]::-moz-range-thumb{width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 34% 28%, #fff 0 8%, rgba(255,255,255,.35) 20%, #ffa9d2 46%, #ff4d9f 100%); box-shadow:inset 0 -3px 5px rgba(120,0,60,.18), 0 6px 14px var(--glow)}
.ticks{position:relative; height:15px; margin-top:2px; font-family:var(--font-en); font-weight:700; font-size:11px; color:var(--aqua)}
.ticks span{position:absolute; top:0; left:calc(17px + (100% - 34px) * var(--i) / var(--last, 5)); transform:translateX(-50%); white-space:nowrap}
.ticks span[data-on]{color:var(--bold);font-weight:500}
.slider-note{font-size:13px; color:var(--ink-2); margin-top:16px; line-height:1.8}

.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:640px}
th,td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:12px; letter-spacing:.06em; color:var(--aqua); font-weight:700; background:var(--bg-2)}
tr:last-child td{border-bottom:0}
td.n{color:var(--bold); font-family:var(--font-en); font-weight:500; font-variant-numeric:tabular-nums; font-size:17px; letter-spacing:-.01em}
td.n small{font-family:var(--font-jp); font-weight:400; font-size:12px; color:var(--ink-2); margin-left:2px}
tr.active td{background:color-mix(in srgb, var(--accent) 12%, var(--bg))} /* 22%だと帯の上でピンク太字が3.83:1・水色が3.98:1まで落ちるので薄くした（2026-09-02 実測） */
tbody tr{cursor:pointer}
tbody tr:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
.incl{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,40px); margin-top:clamp(28px,4vw,40px)}
@media (max-width:900px){ .incl{grid-template-columns:1fr} }
.incl h3{font-size:12px; letter-spacing:.08em; color:var(--aqua); margin-bottom:14px}
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px}
@media (max-width:600px){ .checks{grid-template-columns:1fr} }
.checks li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.7}
.checks li::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; margin-top:10px; background:var(--accent-deep)}
.extra li{font-size:15.5px; line-height:1.8; padding:10px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:16px}
.extra li:last-child{border-bottom:0}
.extra li b{font-family:var(--font-en); font-weight:500; white-space:nowrap}

/* ---------- flow ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px)}
@media (max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding:clamp(24px,3vw,32px); border-radius:var(--radius); background:var(--bg); border:1px solid var(--line); min-height:260px; display:flex; flex-direction:column}
.step .no{color:var(--bold); font-family:var(--font-en); font-weight:500; font-size:44px; letter-spacing:-.05em; line-height:1; margin-bottom:0}
.step h3{font-size:17px; margin:26px 0 10px; line-height:1.5}
.step p{font-size:15.5px; color:var(--ink-2)}
.step .days{position:absolute; top:22px; right:22px; font-family:var(--font-en); font-weight:800; font-size:12.5px; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg, var(--pastel-sky), var(--pastel-mint)); color:var(--aqua)}
.total{margin-top:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:15px; color:var(--ink-2)}
.total b{font-family:var(--font-en); font-weight:500; font-size:34px; letter-spacing:-.04em; color:var(--bold)}

/* ---------- quality ---------- */
.q-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){ .q-grid{grid-template-columns:1fr} }
.q-fig{border-radius:var(--radius); overflow:hidden; background:linear-gradient(150deg, #fff, var(--pastel-lilac) 55%, var(--pastel-sky)); border:1px solid var(--glass-line); color:var(--aqua)}
.q-fig img{display:block; width:100%; height:auto}
.q-fig .xsec{padding:clamp(16px,2.5vw,28px); display:grid; gap:8px}
.q-fig svg{width:100%; height:auto; overflow:visible; display:block}
.q-fig svg text{font-family:var(--font-jp)}
.q-fig .cap{font-size:13px; color:var(--ink-2); text-align:center}
.q-fig .xsec{gap:14px}
.q-fig .xs-legend{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:12.5px; line-height:1.45}
.q-fig .xs-legend li{display:flex; gap:8px; align-items:flex-start; min-width:0}
.q-fig .xs-legend b{flex:none; width:19px; height:19px; border-radius:50%; background:var(--aqua); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; margin-top:1px; font-family:var(--font-en)}
.q-fig .xs-legend strong{font-weight:500}
.q-fig .xs-legend small{display:block; color:var(--ink-2); font-size:11px}
@media (max-width:520px){ .q-fig .xs-legend{grid-template-columns:1fr} }
.q-list li{padding:22px 0; border-bottom:1px solid var(--line)}
.q-list li:first-child{border-top:1px solid var(--line)}
.q-list h3{font-size:18px; margin-bottom:6px}
.q-list p{font-size:15.5px; color:var(--ink-2)}

/* ---------- data ---------- */
.mkt{margin:0; padding:clamp(24px,3vw,32px) clamp(22px,3vw,30px) clamp(22px,3vw,28px); border-radius:var(--radius);
  background:#fff5fa; border:1px solid #f6dce9; position:relative}
.mkt::before{content:"\201C"; position:absolute; top:6px; left:16px; font-family:var(--font-en); font-weight:500;
  font-size:58px; line-height:1; color:#ffbcda; pointer-events:none}
.mkt blockquote{margin:0; position:relative; font-size:clamp(19px,2vw,23px); font-weight:800; line-height:1.8;
  letter-spacing:-.01em; color:var(--aqua)}
.mkt blockquote b{color:var(--bold); font-family:var(--font-en); font-weight:500; font-size:1.18em; letter-spacing:-.03em}
.mkt figcaption{margin-top:16px; padding-top:14px; border-top:1px solid #f6dce9; font-size:12.5px; line-height:1.75; color:var(--ink-2)}
.trend-note{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
/* Now: 文章＋数字の2カラム（文章だけが左に寄って右が空く、をなくす） */
.trend-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center; margin-bottom:clamp(36px,5vw,56px)}
.trend-grid .why-lead{max-width:none; margin-bottom:0}
@media (max-width:900px){ .trend-grid{grid-template-columns:1fr; gap:32px} }
.rules{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); margin-bottom:24px}
@media (max-width:1000px){ .rules{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .rules{grid-template-columns:1fr} }
.rule{padding:24px; border-radius:var(--radius); background:linear-gradient(150deg, var(--pastel-lilac), var(--pastel-blush) 55%, var(--pastel-sky))}
.rule b{display:block; font-family:var(--font-en); font-weight:500; font-size:30px; letter-spacing:-.04em; margin-bottom:8px}
.rule p{font-size:15.5px; color:var(--ink-2)}
.dl{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
#data .data-instructions{background:#fff}
#data .data-steps{list-style:decimal; padding-left:1.5em; margin:0 0 18px; font-size:15px; color:var(--ink-2)}
#data .data-steps li + li{margin-top:12px}
#data .data-steps li::marker{color:var(--aqua); font-weight:700}
#data .data-note{font-size:14px; line-height:1.85}
#data .data-downloads{margin-top:18px}
#data .data-downloads .btn{white-space:normal; text-align:center}
.artwork-preview{display:grid;grid-template-columns:minmax(160px,260px) 1fr;align-items:center;gap:28px;margin-top:28px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.artwork-preview-image{display:block;max-width:260px;width:100%;justify-self:center}
.artwork-preview-image img{display:block;width:100%;height:auto}
.artwork-preview h3{font-size:21px;color:var(--aqua);margin:0 0 12px}
.artwork-preview p{font-size:15px;line-height:1.9;color:var(--ink-2)}
.artwork-preview .btn{font-weight:500}
@media(max-width:600px){.artwork-preview{grid-template-columns:1fr;gap:18px;padding:20px}.artwork-preview-image{max-width:230px}}
#data .card > p + p{margin-top:14px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; color:var(--aqua); padding:24px 44px 24px 0; font-size:clamp(16px,1.7vw,19px); font-weight:700; position:relative; line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; margin-right:14px; font-family:var(--font-en); font-weight:500; font-size:15px; color:var(--bold);
  border-style:solid; border-width:0; border-image-source:url(/assets/ui-dot-clear.png); border-image-slice:0 fill; border-image-repeat:stretch}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--aqua); border-bottom:2px solid var(--aqua); transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--e-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 26px 30px; color:var(--ink-2); font-size:16.5px; max-width:44em}

/* ---------- studio ---------- */
.studio{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){ .studio{grid-template-columns:1fr} }
.studio p{color:var(--ink-2); font-size:16.5px}
.studio .name{font-size:22px; font-weight:700; color:var(--aqua); margin-bottom:12px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tags > span{font-size:12.5px; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg, var(--pastel-lilac), var(--pastel-sky)); color:var(--ink)}
.studio-fig{border-radius:var(--radius); overflow:hidden; background:linear-gradient(150deg, #fff, var(--pastel-lilac) 55%, var(--pastel-sky)); border:1px solid var(--glass-line); color:var(--aqua)}
.studio-fig img{border-radius:0}
.studio-fig figcaption{padding:0 14px 12px}
.use-fig{margin:0 0 clamp(28px,4vw,44px); border-radius:var(--radius); overflow:hidden; border:1px solid var(--glass-line)}
.use-fig img{aspect-ratio:16/9; object-fit:cover; max-height:560px; border-radius:0}
.use-fig.is-end{margin:clamp(28px,4vw,44px) 0 0}
.use-fig figcaption{padding:0 14px 12px}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px)}
@media (max-width:900px){ .contact{grid-template-columns:minmax(0,1fr)} }
.form{display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:16px}
.field{min-width:0}
.f2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
@media (max-width:600px){ .f2{grid-template-columns:minmax(0,1fr)} }
.field label, .field .flabel{display:block; font-size:13.5px; letter-spacing:.06em; color:var(--aqua); margin-bottom:6px; font-weight:700}
.field label em, .field .flabel em{font-style:normal; color:var(--accent-deep); margin-left:4px;font-weight:500}
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:16px;  /* 16px未満だとiOS Safariがフォーカス時に自動ズームする */
}
.field input[type=radio],.field input[type=checkbox]{width:18px; height:18px; margin:0; flex:none}
.field textarea{min-height:120px; resize:vertical}
.field .hint{display:block; font-size:13px; line-height:1.6; color:var(--ink-2); margin-top:6px}
.field select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.choice{display:flex; gap:10px; flex-wrap:wrap}
.choice label{flex:1; display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:15.5px; margin:0; color:var(--ink); font-weight:400; letter-spacing:0}
.choice input{accent-color:var(--accent)}
.choice-data{display:grid;grid-template-columns:minmax(0,1fr)}
.choice-data label{font-size:15px;letter-spacing:0}
.field .optional{font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-left:6px}
.field .file-field,.file-field{min-width:0}
.field input[type=file]{padding:12px;font-size:14px;min-width:0;max-width:100%;overflow:hidden}
.field input[type=file]::file-selector-button{font:inherit;padding:9px 12px;margin-right:10px;background:#fff;color:var(--aqua);border:1px solid var(--line);border-radius:7px;cursor:pointer}
.file-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.file-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;color:var(--ink)}
.file-list li span{min-width:0;overflow-wrap:anywhere}
.file-remove{flex:none;min-height:40px;padding:7px 10px;font:inherit;color:var(--aqua);background:#fff;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.file-remove:focus-visible,.field input[type=file]:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
.file-status{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere}
.file-status:empty{display:none}.file-status.is-error{color:var(--accent-deep);font-weight:500}
.contact-next{margin:24px 0;padding-left:1.3em;color:var(--ink-2);font-size:14px;line-height:1.8}
.contact-next li+li{margin-top:16px}.contact-next b{display:block;color:var(--aqua)}
.form-note{font-size:13px; color:var(--ink-2)}
.status{font-size:14px; padding:14px 16px; border-radius:12px; background:var(--bg-2); display:none}
.status.show{display:block}
.status.ng{color:var(--accent-deep); font-weight:500; box-shadow:inset 3px 0 0 var(--accent-deep)}
.ts:not(:empty){margin-bottom:4px}
/* Turnstile は、フォームが近づいたときに assets/js/contact.js が読み込む。描画されるまでの間、ウィジェットと同じ大きさの枠
   （行内の高さ65pxのiframe＝通常サイズ300×65と同じ行、下の余白4px）を確保し、表示された瞬間に送信ボタンやフッターが動かないようにする。
   cf-turnstile は Turnstile を使うときだけ JS が付けるクラスなので、確認用ページの注記とJS無効時の見た目は変わらない。 */
.cf-turnstile.ts:empty{margin-bottom:4px}
.cf-turnstile.ts:empty::before{content:"";display:inline-block;height:65px;vertical-align:baseline}
.cf-turnstile.ts[data-size="compact"]:empty::before{height:140px}
.preview-note{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--ink);font-size:14px;line-height:1.8}
/* ハニーポット：画面にも読み上げにも出さず、bot にだけ見える欄 */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- footer ---------- */
.ftr{padding:48px 0 40px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.ftr-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.ftr .logo{font-size:20px}
.ftr p{max-width:52em; line-height:1.9}
.ftr a{text-decoration:none}
.ftr-links{display:flex; gap:18px; flex-wrap:wrap}
p.sec-title{margin:0}
h2.sec-sub{margin:0; font:inherit}
h2.sec-sub .sec-title{display:block}
h2.sec-sub .sec-ja{display:block; font-family:var(--font-jp-head); font-weight:700; font-size:clamp(16px,1.7vw,21px); line-height:1.6; color:var(--aqua); letter-spacing:.01em; text-wrap:pretty; margin-top:2px; max-width:30em}
.h1-kw{display:block; font-family:inherit; font-weight:700; font-size:clamp(15px,1.5vw,19px); line-height:1.6; letter-spacing:.02em; color:var(--aqua); margin:0 0 12px}
.h1-hook{display:block}
.cmp-wrap{overflow-x:auto; min-width:0; margin-top:clamp(36px,5vw,56px)}
.cmp{width:100%; min-width:560px; border-collapse:separate; border-spacing:0; font-size:14.5px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.cmp th,.cmp td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.7}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-size:12px; color:var(--aqua); font-weight:700; letter-spacing:.04em; background:rgba(255,92,168,.05)}
.cmp tbody th{font-weight:700; color:var(--aqua); white-space:nowrap; width:8em}
.cmp td.hl{background:rgba(255,92,168,.06); font-weight:500; color:var(--bold)}
.cmp-cap{margin-top:10px; font-size:13px; color:var(--ink-2)}
.insp{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:24px}
.insp div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.6}
.insp b{display:block; font-family:var(--font-en); font-size:11px; letter-spacing:.06em; color:var(--accent-deep); margin-bottom:4px}
.addr{margin-top:16px; font-size:14px; color:var(--ink-2); line-height:1.9}
.ftr-addr{margin-top:8px; font-size:13px; color:var(--ink-2)}
.aka-note{margin-top:12px; font-size:13px; color:var(--ink-2)}


a.logo-cand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;color:var(--aqua);line-height:1;height:auto}
.logo-cand .lc-mk{display:block;height:33px;width:auto;flex:none;margin-right:10px}
.logo-cand .lc-mk svg{display:block;height:100%;width:auto;overflow:visible}
.logo-cand .lc-wm{display:block;height:34px;flex:none}
.logo-cand .lc-wm img{display:block;height:100%;width:auto;filter:drop-shadow(0 3px 8px rgba(233,30,140,.16))}
.logo-cand .lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo-cand .lc-by{display:block;margin:0;padding:0;border:0;white-space:nowrap}
.logo-cand .lc-by em{font-style:normal;font-family:var(--font-jp);font-weight:700;font-size:12px;letter-spacing:.285em;color:var(--aqua)}
@media (max-width:1024px){ .logo-cand .lc-by .by-s{font-size:11px;letter-spacing:.2em} }
@media (max-width:720px){ .logo-cand .lc-mk{height:29px;margin-right:8px} .logo-cand .lc-wm{height:29px} }
@media (max-width:480px){ .logo-cand .lc-wm{height:27px} .logo-cand .lc-by .by-s{font-size:10.5px;letter-spacing:.14em} }


/* ART LAYER 2026-08-31 v2: transparent-resin atmosphere */
.sec{overflow:hidden}
.sec-head{--cap:clamp(50px,7.8vw,112px); position:relative; padding-top:calc(var(--cap) * 1.02 + clamp(18px,2.4vw,34px))}
h2.sec-sub .sec-title, p.sec-title{
  position:absolute; left:-4px; top:0; z-index:0; margin:0; display:block;
  width:calc(var(--ar) * var(--k) * var(--cap)); height:calc(var(--k) * var(--cap)); max-width:calc(100% + 4px);
  background-repeat:no-repeat; background-position:left top; background-size:100% 100%;
  font-size:0; line-height:0; color:transparent;
  filter:drop-shadow(0 2px 4px rgba(255,255,255,.85));
  pointer-events:none; user-select:none}
h2.sec-sub .sec-ja{position:relative; z-index:1}
.sec.tint{background:linear-gradient(180deg,#fff 0%, var(--tint) 16%, var(--tint) 84%, #fff 100%)}
/* パステルのクリスタル面 */
.sec.tint{position:relative}
.sec.tint::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38% 46% at 6% 12%, var(--pastel-sky), transparent 66%),
             radial-gradient(34% 42% at 96% 30%, var(--pastel-lilac), transparent 66%),
             radial-gradient(40% 44% at 78% 96%, var(--pastel-mint), transparent 66%);
  opacity:.7}
.sec.tint > .wrap{position:relative; z-index:1}
.hero{background:radial-gradient(760px 420px at 88% -8%, rgba(255,179,214,.36), transparent 68%), radial-gradient(900px 560px at -12% 70%, rgba(255,214,232,.4), transparent 70%), #fff}
.q-fig img, .use-fig img, .studio-fig img{filter:saturate(.92) brightness(1.03)}
.proof{margin:0 auto clamp(40px,6vw,68px); max-width:680px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--glass-line); background:linear-gradient(150deg, #fff, var(--pastel-lilac) 55%, var(--pastel-sky))}
.proof img{display:block; width:100%; height:auto}
.proof figcaption{font-size:12.5px; color:var(--ink-2); padding:12px 16px 14px; text-align:center}
#contact{background:radial-gradient(120% 90% at 12% 0%, var(--pastel-lilac) 0%, transparent 58%), radial-gradient(110% 80% at 88% 8%, var(--pastel-sky) 0%, transparent 55%), radial-gradient(120% 90% at 70% 100%, var(--pastel-mint) 0%, transparent 60%), linear-gradient(180deg, var(--bg-2), #fff 55%, var(--bg-2))}

/* 2026-09-07: 実描画で不足した面だけ補正。文字色・太さ・寸法は維持。
   測定記録: output/measurement-20260907/contrast/README.md */
#product .spec{background:rgba(255,255,255,.65)}
#ptable tr.active td{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
#ptable .pill:not(.ok)::after{background-color:#fff;border-radius:inherit;filter:brightness(1.025)}
#q-xsec .xs-legend{background:rgba(255,255,255,.65)}
#trend mark{background-image:linear-gradient(transparent 55%,color-mix(in srgb,var(--mark) 50%,transparent) 55%)}
@media (max-width:900px){
  .hero{background:radial-gradient(760px 420px at 88% -8%,rgba(255,179,214,.18),transparent 68%),radial-gradient(900px 560px at -12% 70%,rgba(255,214,232,.2),transparent 70%),#fff}
  .hero .btn.ghost::before{background-color:#fff;border-radius:inherit;filter:brightness(1.025)}
  .hero .btn.ghost:hover::before{filter:brightness(1.025) drop-shadow(0 8px 14px rgba(123,74,136,.16))}
}

/* Production consultation and paid prototype guidance, 2026-09-08 */
.contact-options{margin:24px 0;padding:0}
.contact-options>div{padding:16px 0;border-top:1px solid var(--line)}
.contact-options dt{font-weight:700;margin-bottom:6px}
.contact-options dd{margin:0;line-height:1.85}
.price-consult{margin:24px 0;padding:20px 0;border-block:1px solid var(--line);line-height:1.85}
.price-consult b{display:block;margin-bottom:6px}
.price-consult a{display:inline-block;margin-top:8px}