/* 014 宵坂香料研究所 — 共通スタイル
   設計の出典: design-system/014-yoisaka-fragrance/MASTER.md
   配色トークンはMASTER.mdの値をそのまま使用。書体は端末標準のみ(外部フォント禁止)。 */

:root{
  --c-primary:#7C2D12;
  --c-on-primary:#FFFFFF;
  --c-secondary:#B91C1C;
  --c-accent:#A16207;
  --c-bg:#FEF2F2;
  --c-fg:#450A0A;
  --c-muted:#ECEDF0;
  --c-border:#FECACA;
  --c-ring:#7C2D12;

  --c-ink:#2A0806;
  --c-paper:#FBF6F3;
  --c-dark:#1B0605;
  --c-dark-2:#2E0C0A;
  --c-gold-soft:#D9A441;

  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(69,10,10,.10);
  --shadow-lg:0 10px 15px rgba(69,10,10,.12);
  --shadow-xl:0 20px 25px rgba(69,10,10,.15);

  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --wrap:1120px;

  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
  --gothic:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--c-paper); color:var(--c-ink);
  font-family:var(--gothic); font-size:16px; line-height:1.9;
  letter-spacing:.02em; overflow-x:hidden;
}
img,svg,canvas{max-width:100%; display:block}
a{color:var(--c-primary)}
h1,h2,h3,h4{font-family:var(--mincho); font-weight:600; line-height:1.45; letter-spacing:.04em; margin:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.4em}
li{margin-bottom:.35em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-lg)}
.narrow{max-width:760px}
.sec{padding-block:var(--space-3xl)}
.sec-tint{background:var(--c-bg)}
.sec-ink{background:var(--c-dark); color:#F3E7DF}
.sec-ink h2,.sec-ink h3{color:#FBEFE6}

.eyebrow{
  font-family:var(--gothic); font-size:12px; letter-spacing:.22em;
  color:var(--c-accent); margin:0 0 var(--space-sm); text-transform:uppercase; font-weight:700;
}
.sec-ink .eyebrow{color:var(--c-gold-soft)}
h2.h{font-size:clamp(23px,3.1vw,34px); margin-bottom:var(--space-md)}
h3.h{font-size:clamp(18px,2.1vw,22px); margin-bottom:var(--space-sm)}
.lede{font-size:17px; color:#5A2A22; max-width:62ch}
.sec-ink .lede{color:#DCC7BC}

/* ---- ヘッダ ---- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(251,246,243,.92); border-bottom:1px solid var(--c-border);
}
@supports (backdrop-filter:blur(10px)){
  .site-head{backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
}
.head-in{display:flex; align-items:center; gap:var(--space-md); min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--c-ink)}
.brand-mark{width:34px; height:34px; flex:0 0 34px}
.brand-name{font-family:var(--mincho); font-size:17px; letter-spacing:.1em; line-height:1.2}
.brand-en{display:block; font-family:var(--gothic); font-size:9.5px; letter-spacing:.2em; color:var(--c-accent)}
.nav{margin-left:auto}
.nav ul{display:flex; gap:var(--space-lg); list-style:none; margin:0; padding:0}
.nav li{margin:0}
.nav a{
  text-decoration:none; color:var(--c-ink); font-size:14px; letter-spacing:.08em;
  padding:6px 2px; border-bottom:2px solid transparent; transition:border-color 200ms ease,color 200ms ease;
}
.nav a:hover{color:var(--c-primary); border-bottom-color:var(--c-accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--c-primary); color:var(--c-primary)}
.nav-toggle{
  display:none; margin-left:auto; cursor:pointer;
  background:transparent; border:1px solid var(--c-border); border-radius:var(--r-sm);
  padding:8px 12px; font:inherit; font-size:13px; color:var(--c-ink); align-items:center; gap:8px;
}
.nav-toggle .bars{display:inline-block; width:16px; height:10px; position:relative}
.nav-toggle .bars i{position:absolute; left:0; right:0; height:1.5px; background:var(--c-ink)}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:4.2px}
.nav-toggle .bars i:nth-child(3){top:8.5px}

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r-sm); font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform 200ms ease,opacity 200ms ease,background 200ms ease,color 200ms ease;
}
.btn-primary{background:var(--c-accent); color:#fff}
.btn-primary:hover{opacity:.9; transform:translateY(-1px)}
.btn-secondary{background:transparent; color:var(--c-primary); border-color:var(--c-primary)}
.btn-secondary:hover{background:var(--c-primary); color:#fff; transform:translateY(-1px)}
.sec-ink .btn-secondary,.hero .btn-secondary{color:#F6E4D8; border-color:#8A4432}
.sec-ink .btn-secondary:hover,.hero .btn-secondary:hover{background:#F6E4D8; color:var(--c-dark)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-lg)}

/* ---- カード ---- */
.grid{display:grid; gap:var(--space-lg)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md);
  padding:var(--space-lg); box-shadow:var(--shadow-md);
  transition:box-shadow 200ms ease,transform 200ms ease;
}
a.card{display:block; text-decoration:none; color:inherit; cursor:pointer}
a.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.card-fig{
  border-radius:var(--r-sm) var(--r-sm) 0 0; overflow:hidden;
  margin:calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  border-bottom:1px solid var(--c-border); background:var(--c-dark);
}
.card h3{margin-bottom:var(--space-xs)}
.card p{font-size:14.5px; color:#5A2A22; margin-bottom:0}
.card .meta{font-size:12px; letter-spacing:.14em; color:var(--c-accent); font-weight:700; margin-bottom:6px}
.card .go{display:inline-block; margin-top:var(--space-md); font-size:13.5px; font-weight:700; color:var(--c-primary)}

/* ---- 数字 ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg)}
.stat{border-left:3px solid var(--c-accent); padding-left:var(--space-md)}
.stat b{display:block; font-family:var(--mincho); font-size:clamp(26px,3.4vw,38px); line-height:1.2; color:var(--c-primary)}
.sec-ink .stat b{color:var(--c-gold-soft)}
.stat span{font-size:13px; color:#6B382E}
.sec-ink .stat span{color:#C9AFA4}

/* ---- 表 ---- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.t{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; background:#fff}
table.t th,table.t td{border:1px solid var(--c-border); padding:10px 14px; text-align:left; vertical-align:top}
table.t th{background:var(--c-bg); font-weight:700; white-space:nowrap}
table.t caption{caption-side:bottom; font-size:12.5px; color:#7A4A3E; padding-top:8px; text-align:left}

/* ---- 工程 ---- */
.steps{list-style:none; padding:0; margin:0; counter-reset:st}
.steps li{
  counter-increment:st; position:relative; padding:0 0 var(--space-xl) 62px;
  border-left:1px solid var(--c-border); margin-left:18px;
}
.steps li:last-child{border-left-color:transparent; padding-bottom:0}
.steps li::before{
  content:counter(st,decimal-leading-zero); position:absolute; left:-18px; top:0;
  width:36px; height:36px; border-radius:50%; background:var(--c-primary); color:#fff;
  font-family:var(--mincho); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.steps h3{margin-bottom:6px}
.steps p{font-size:14.5px; color:#5A2A22; margin-bottom:.4em}

/* ---- 演出まわり ---- */
.stage{position:relative; background:var(--c-dark); border-radius:var(--r-lg); overflow:hidden}
.stage canvas{width:100%; height:auto; display:none; touch-action:pan-y}
.js-on .stage canvas{display:block}
.js-on .stage .fallback{display:none}
.stage .fallback{display:block}
.readout{
  position:absolute; left:var(--space-md); bottom:var(--space-md);
  background:rgba(27,6,5,.86); border:1px solid #6B2F1E; border-radius:var(--r-sm);
  padding:12px 14px; color:#F6E4D8; font-size:13px; line-height:1.7; min-width:214px;
  pointer-events:none; margin:0;
}
.readout dt{font-size:11px; letter-spacing:.16em; color:var(--c-gold-soft); margin:0}
.readout dd{margin:0 0 6px; font-family:var(--mincho); font-size:17px}
.readout .bars{display:grid; gap:5px; margin-top:8px}
.readout .bar{display:grid; grid-template-columns:5.8em 1fr; gap:8px; align-items:center; font-size:11.5px}
.readout .bar i{display:block; height:5px; border-radius:3px; background:var(--c-gold-soft); transition:width 120ms linear}
.hint{
  position:absolute; right:var(--space-md); top:var(--space-md);
  color:#C9AFA4; font-size:12px; letter-spacing:.08em; pointer-events:none; margin:0;
}
.ctrls{display:grid; gap:var(--space-md); margin-top:var(--space-lg)}
.ctrl{display:grid; grid-template-columns:7.6em 1fr 4.4em; gap:var(--space-md); align-items:center; font-size:13.5px}
.ctrl label{letter-spacing:.06em}
.ctrl output{font-family:var(--mincho); font-size:15px; color:var(--c-primary); text-align:right}
.ctrl input[type=range]{width:100%; accent-color:var(--c-accent); cursor:pointer}
.motion-note{display:none; margin-top:var(--space-md); font-size:13.5px}
.motion-note.on{display:block}

/* ---- ヒーロー ---- */
.hero{background:var(--c-dark); color:#F3E7DF; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2; padding-block:var(--space-3xl)}
.hero h1{font-size:clamp(28px,5vw,52px); line-height:1.3; margin-bottom:var(--space-md); color:#FBEFE6}
.hero .sub{font-size:clamp(15px,1.7vw,18px); color:#DCC7BC; max-width:56ch}
.hero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:var(--space-2xl); align-items:center}
.page-head{background:var(--c-dark); color:#F3E7DF; padding-block:var(--space-2xl)}
.page-head h1{font-size:clamp(24px,3.8vw,40px); color:#FBEFE6; margin-bottom:var(--space-sm)}
.page-head p{color:#DCC7BC; margin:0; max-width:62ch}
.crumb{font-size:12px; letter-spacing:.12em; color:#B08D80; margin-bottom:var(--space-md)}
.crumb a{color:#D8B9AB; text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- 香りの輪 ---- */
.wheel-wrap{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--space-2xl); align-items:center}
.wheel-stage{background:var(--c-dark); border-radius:var(--r-lg); padding:var(--space-lg); touch-action:pan-y}
.wheel-info{background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--space-lg); box-shadow:var(--shadow-md); min-height:250px}
.wheel-info .fam{font-family:var(--mincho); font-size:26px; color:var(--c-primary); margin:0 0 2px}
.wheel-info .fam-en{font-size:11.5px; letter-spacing:.2em; color:var(--c-accent); font-weight:700; margin:0 0 var(--space-md)}
.wheel-info p{font-size:14.5px; color:#5A2A22}
.wheel-info .mats{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-md); padding:0; list-style:none}
.wheel-info .mats li{background:var(--c-bg); border:1px solid var(--c-border); border-radius:999px; padding:3px 12px; font-size:12.5px; margin:0}
.seg{cursor:pointer; transition:transform 260ms cubic-bezier(.22,1,.36,1),opacity 260ms ease}
.seg:focus{outline:none}
.seg:focus-visible .seg-body{stroke:#FFF4E6; stroke-width:2.5}

/* ---- フォーム ---- */
.form{display:grid; gap:var(--space-md); max-width:640px}
.field{display:grid; gap:6px}
.field label{font-size:13.5px; font-weight:700}
.field .req{color:var(--c-secondary); font-size:12px; margin-left:6px}
.input,textarea.input,select.input{
  padding:12px 16px; border:1px solid #E2E8F0; border-radius:var(--r-sm);
  font-size:16px; font-family:inherit; background:#fff; color:var(--c-ink);
  transition:border-color 200ms ease,box-shadow 200ms ease; width:100%;
}
.input:focus{border-color:var(--c-primary); outline:none; box-shadow:0 0 0 3px rgba(124,45,18,.13)}
textarea.input{min-height:150px; resize:vertical; line-height:1.8}
.note{font-size:13px; color:#7A4A3E}

/* ---- フッタ ---- */
.site-foot{background:var(--c-dark-2); color:#D8C2B7; padding-block:var(--space-2xl) var(--space-lg); font-size:13.5px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-xl); margin-bottom:var(--space-xl)}
.site-foot h4{font-family:var(--gothic); font-size:12px; letter-spacing:.18em; color:var(--c-gold-soft); margin:0 0 var(--space-sm)}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:.3em}
.site-foot a{color:#EBD8CE; text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.mock-notice{
  border:1px solid #7A3A28; border-radius:var(--r-sm); padding:var(--space-md);
  background:rgba(124,45,18,.20); color:#F0DCD2; font-size:12.5px; line-height:1.85;
}
.mock-notice b{color:#FFE9C9}
.copy{margin-top:var(--space-md); font-size:11.5px; color:#A98879}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:99; background:#fff; color:var(--c-primary); padding:10px 16px; border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--c-ring); outline-offset:2px}
.sec-ink :focus-visible,.hero :focus-visible,.stage :focus-visible{outline-color:var(--c-gold-soft)}

/* ---- 応答 ---- */
@media (max-width:900px){
  .hero-grid,.wheel-wrap{grid-template-columns:1fr; gap:var(--space-xl)}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-flex}
  .site-head{position:relative}
  .nav{
    position:absolute; left:0; right:0; top:100%; margin-left:0; z-index:70;
    background:var(--c-paper); border-bottom:1px solid var(--c-border);
    box-shadow:var(--shadow-lg); display:none;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:0; padding:var(--space-sm) var(--space-lg) var(--space-lg)}
  .nav li{border-bottom:1px solid var(--c-border)}
  .nav a{display:block; padding:14px 2px; border-bottom:none; font-size:15px}
}
@media (max-width:600px){
  body{font-size:15.5px}
  .wrap{padding-inline:var(--space-md)}
  .sec{padding-block:var(--space-2xl)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr; gap:var(--space-md)}
  .foot-grid{grid-template-columns:1fr; gap:var(--space-lg)}
  .readout{position:static; margin:var(--space-md); min-width:0}
  .hint{position:static; display:block; padding:var(--space-md) var(--space-md) 0; text-align:left}
  .ctrl{grid-template-columns:6.2em 1fr 3.6em; gap:var(--space-sm); font-size:12.5px}
  .steps li{padding-left:52px}
  .wheel-stage{padding:var(--space-md)}
}
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  .ctrl{grid-template-columns:5.6em 1fr 3.4em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}