@charset "UTF-8";
/* ==========================================================================
   灯環舎 TOKANSHA ─ 制作見本(架空の会社)
   外部フォント・外部CSS・外部画像を一切読み込まない。
   ========================================================================== */

:root{
  --bg:      #14100c;
  --bg2:     #1b1610;
  --bg3:     #221c14;
  --paper:   #ece5d8;
  --paper2:  #ded4c3;
  --ink:     #221d16;
  --text:    #ece4d7;
  --dim:     #a29683;
  --dim2:    #7d7362;
  --line:    rgba(233,214,178,.13);
  --line2:   rgba(34,29,22,.16);
  --brass:   #c9a15a;
  --brass-l: #ecd7a6;
  --enamel:  #3d6f64;

  --sans:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;

  --pad: clamp(20px,5vw,56px);
  --head-h: 66px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.95;
  letter-spacing:.035em; font-feature-settings:"palt" 1;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.09em;line-height:1.6;margin:0}
p{margin:0 0 1.3em}
p:last-child{margin-bottom:0}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}

/* ---------------------------------------------------------------- ヘッダ */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  transition:background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(20,16,12,.82);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;transition:opacity .4s;
}
.site-head.is-solid::before{opacity:1}
.site-head.is-solid{border-bottom-color:var(--line)}

.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:32px;height:32px;flex:none}
.brand b{font-family:var(--serif);font-size:1.02rem;font-weight:500;letter-spacing:.16em;display:block;line-height:1.3}
.brand small{display:block;font-size:.55rem;letter-spacing:.34em;color:var(--dim2)}

.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav a{font-size:.79rem;letter-spacing:.14em;color:var(--dim);transition:color .3s;position:relative;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass)}
.btn-cta{border:1px solid var(--brass);color:var(--brass) !important;padding:9px 20px !important;letter-spacing:.16em}
.btn-cta:hover{background:var(--brass);color:#17120b !important}

.burger{display:none;width:42px;height:42px;background:none;border:0;padding:0;cursor:pointer}
.burger i{display:block;width:22px;height:1px;background:var(--text);margin:5px auto;transition:transform .35s,opacity .35s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:880px){
  .burger{display:block;position:relative;z-index:2}
  .nav{
    position:fixed;inset:0;background:rgba(16,12,9,.985);
    flex-direction:column;justify-content:center;gap:26px;
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
  }
  .nav a{font-size:1.05rem;letter-spacing:.24em}
  .nav.is-open{opacity:1;visibility:visible}
}

/* ---------------------------------------------------------------- 部品 */
.eyebrow{font-size:.63rem;letter-spacing:.42em;color:var(--brass);margin:0 0 1.5em;text-transform:uppercase}
.lead{color:var(--dim);font-size:.94rem}
.btn{
  display:inline-block;border:1px solid var(--line);padding:14px 34px;
  font-size:.76rem;letter-spacing:.22em;color:var(--text);
  transition:border-color .3s,background .3s,color .3s;
}
.btn:hover{border-color:var(--brass);color:var(--brass)}
.btn--fill{background:var(--brass);border-color:var(--brass);color:#17120b}
.btn--fill:hover{background:transparent;color:var(--brass)}

.section{padding-block:clamp(72px,11vw,132px)}
.section--ink2{background:var(--bg2)}
.section--ink3{background:var(--bg3)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper .lead{color:#5c5344}
.section--paper .eyebrow{color:#8a6b30}
.section--paper .btn{border-color:var(--line2);color:var(--ink)}
.section--paper .btn:hover{border-color:#8a6b30;color:#8a6b30}

.section-head{max-width:44em;margin-bottom:clamp(40px,6vw,68px)}
.section-head h2{font-size:clamp(1.4rem,3.4vw,2.15rem);margin-bottom:.7em}

.grid{display:grid;gap:clamp(20px,3vw,34px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}

.card{border:1px solid var(--line);padding:clamp(26px,3.4vw,38px);background:linear-gradient(165deg,rgba(255,255,255,.033),transparent)}
.card .num{font-family:var(--serif);font-size:.68rem;letter-spacing:.3em;color:var(--brass);display:block;margin-bottom:1.5em}
.card h3{font-size:1.06rem;margin-bottom:.85em}
.card p{font-size:.85rem;color:var(--dim);margin:0}
.section--paper .card{border-color:var(--line2);background:linear-gradient(165deg,rgba(0,0,0,.032),transparent)}
.section--paper .card p{color:#5c5344}
.section--paper .card .num{color:#8a6b30}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:24px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,5vw,3rem);color:var(--brass);font-weight:500;line-height:1.2}
.stat span{font-size:.7rem;letter-spacing:.18em;color:var(--dim2)}

.quote{
  font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.6rem);line-height:2.25;
  margin:0;max-width:24em;text-align:center;letter-spacing:.08em;
}
.quote cite{display:block;margin-top:1.8em;font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.2em;color:var(--dim2)}

table.spec{width:100%;border-collapse:collapse;font-size:.83rem}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:15px 8px;text-align:left;vertical-align:top}
table.spec th{width:34%;color:var(--dim);font-weight:400;letter-spacing:.1em}
.section--paper table.spec th,.section--paper table.spec td{border-bottom-color:var(--line2)}
.section--paper table.spec th{color:#6b6151}
.tablescroll{overflow-x:auto}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(72px,110px) 1fr;gap:clamp(16px,3vw,38px);
  padding:clamp(20px,3vw,30px) 0;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .yr{font-family:var(--serif);font-size:.94rem;color:var(--brass);letter-spacing:.1em}
.timeline h3{font-size:1rem;margin-bottom:.55em}
.timeline p{font-size:.85rem;color:var(--dim);margin:0}
.section--paper .timeline li{border-top-color:var(--line2)}
.section--paper .timeline li:last-child{border-bottom-color:var(--line2)}
.section--paper .timeline p{color:#5c5344}
.section--paper .timeline .yr{color:#8a6b30}

.cta{padding-block:clamp(80px,12vw,150px);text-align:center;
     background:radial-gradient(75% 120% at 50% 0%,rgba(201,161,90,.13),transparent 72%),var(--bg2)}
.cta h2{font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:.7em}
.cta p{color:var(--dim);font-size:.92rem}

/* 出現 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------- 写真連番 */
.seq-stage{position:relative}
.seq-sticky{
  position:sticky;top:0;height:100svh;min-height:560px;
  display:grid;align-content:center;
  overflow:hidden;
}
.seq-layout{
  display:grid;gap:clamp(10px,2vw,40px);align-items:center;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  max-width:1250px;width:100%;margin-inline:auto;padding-inline:var(--pad);
}
@media(max-width:900px){
  .seq-layout{grid-template-columns:1fr;gap:6px}
}

/* 写真そのもの */
.seq{
  position:relative;width:100%;aspect-ratio:1/1;
  max-height:min(72svh,660px);margin-inline:auto;
  background:#171310;
  border:1px solid var(--line);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
  overflow:hidden;
}
.seq canvas,.seq .seq-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.seq canvas{opacity:0;transition:opacity .5s ease}
.seq.is-ready canvas{opacity:1}
.seq .seq-poster{filter:saturate(.98)}
/* 隅を紙面になじませる */
.seq::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 12px rgba(15,11,8,.55);
}
.seq-corner{
  position:absolute;left:12px;bottom:10px;z-index:3;
  font-size:.6rem;letter-spacing:.24em;color:rgba(236,228,215,.5);
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;
}
.seq-angle{
  position:absolute;right:12px;bottom:10px;z-index:3;
  font-family:var(--serif);font-size:.66rem;letter-spacing:.2em;
  color:rgba(201,161,90,.85);text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* 読み込み中の見た目(白紙を絶対に出さない) */
.seq-load{
  position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:14px;
  background:linear-gradient(180deg,rgba(23,19,16,.55),rgba(23,19,16,.8));
  transition:opacity .5s ease,visibility .5s;
  text-align:center;
  /* 読み込み中もドラッグを通す。ここで受け止めると、読み込みが遅い端末では
     「触っているのに回らない」になり、壊れていると受け取られる。 */
  pointer-events:none;
}
.seq.is-ready .seq-load{opacity:0;visibility:hidden}
.seq-load b{display:block;font-family:var(--serif);font-size:.72rem;letter-spacing:.3em;color:var(--brass);font-weight:500}
.seq-load .bar{width:min(46vw,190px);height:2px;background:rgba(236,228,215,.16);overflow:hidden}
.seq-load .bar i{display:block;height:100%;width:0;background:var(--brass);transition:width .25s linear}
.seq-load small{font-size:.62rem;letter-spacing:.2em;color:var(--dim2);font-variant-numeric:tabular-nums}

/* 「視差効果を減らす」設定のときの断り書き */
.seq-motion{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:11px 14px;background:rgba(15,11,8,.88);border-top:1px solid var(--line);
}
.seq-motion span{font-size:.66rem;letter-spacing:.08em;color:var(--dim);line-height:1.7;flex:1 1 190px}
.seq-motion button{
  flex:none;font-family:inherit;font-size:.68rem;letter-spacing:.16em;cursor:pointer;
  background:none;border:1px solid var(--brass);color:var(--brass);padding:8px 16px;
}
.seq-motion button:hover{background:var(--brass);color:#17120b}

/* 見出しと説明(写真の横) */
.seq-copy{position:relative;min-height:1px}
.seq-hero{margin-bottom:clamp(18px,3vw,34px)}
.seq-hero h1{font-size:clamp(1.65rem,4.6vw,3.1rem);line-height:1.45;margin-bottom:.5em}
.seq-hero p{font-size:.68rem;letter-spacing:.34em;color:var(--brass);margin:0}
.seq-caps{position:relative;min-height:clamp(150px,20vw,178px)}
.seq-cap{
  position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .55s,transform .55s;pointer-events:none;
}
.seq-cap.is-on{opacity:1;transform:none}
.seq-cap .no{display:block;font-size:.62rem;letter-spacing:.32em;color:var(--brass);margin-bottom:1em}
.seq-cap h2{font-size:clamp(1.05rem,2.4vw,1.42rem);margin-bottom:.7em}
.seq-cap p{font-size:.845rem;color:var(--dim);margin:0}
@media(max-width:900px){
  .seq-caps{min-height:210px}
  .seq{max-height:46svh}
  .seq-hero h1{font-size:clamp(1.4rem,7vw,2rem)}
}

.seq-progress{margin-top:26px;height:1px;background:var(--line);position:relative}
.seq-progress i{position:absolute;inset:0 auto 0 0;width:0;background:var(--brass);transition:width .12s linear}

.scroll-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:.58rem;letter-spacing:.34em;color:var(--dim2);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--brass),transparent);animation:drop 2.1s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 指で回せる版(製品ページ) */
.seq--drag{cursor:grab;touch-action:pan-y}
.seq--drag:active{cursor:grabbing}
.seq-dragtip{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;
  font-size:.6rem;letter-spacing:.22em;color:rgba(236,228,215,.62);
  background:rgba(15,11,8,.5);padding:5px 13px;border:1px solid var(--line);
  transition:opacity .4s;pointer-events:none;
}
.seq--drag.is-touched .seq-dragtip{opacity:0}

/* ---------------------------------------------------------------- 製品カード */
.piece{display:block;border:1px solid var(--line);transition:border-color .35s,transform .45s;background:linear-gradient(165deg,rgba(255,255,255,.03),transparent)}
.piece:hover{border-color:var(--brass);transform:translateY(-4px)}
.piece .shot{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(62% 62% at 50% 42%,#241d15,#120e0a 78%);border-bottom:1px solid var(--line);overflow:hidden}
.piece .shot svg{width:74%}
.piece .meta{padding:24px clamp(20px,2.4vw,28px) 28px}
.piece .ref{font-size:.62rem;letter-spacing:.26em;color:var(--dim2);display:block;margin-bottom:1em}
.piece h3{font-size:1.05rem;margin-bottom:.6em}
.piece p{font-size:.82rem;color:var(--dim);margin-bottom:1.3em}
.piece .price{font-size:.78rem;letter-spacing:.1em;color:var(--brass)}
/* 「押せる」ことを見た目で伝える。第2号の初版はカードが押せるのに行き先が無かった。
   行き先を用意したので、押せることも分かるようにする。 */
.piece .more{display:block;margin-top:1.3em;font-size:.66rem;letter-spacing:.24em;color:var(--dim2);
  transition:color .35s,transform .35s}
/* CSSのユニコード脱出は、終わりに空白を置かないと次の文字まで飲み込む。
   書き忘れて「詳しく見る ⎔ 92」と豆腐が出た（2026-08-22 実測）。 */
.piece .more::after{content:" → "}
.piece:hover .more{color:var(--brass);transform:translateX(4px)}

/* ---------------------------------------------------------------- フォーム */
.form{display:grid;gap:22px}
.field label{display:block;font-size:.72rem;letter-spacing:.16em;color:var(--dim);margin-bottom:9px}
.field label .req{color:var(--brass);margin-left:.5em;font-size:.66rem}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:.9rem;padding:13px 15px;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:1px solid var(--brass);border-color:var(--brass)}
.field textarea{min-height:150px;resize:vertical}
.formnote{font-size:.74rem;color:var(--dim2);line-height:1.9}
#formmsg{font-size:.82rem;min-height:1.6em}

/* ---------------------------------------------------------------- フッタ */
.site-foot{background:#100c09;border-top:1px solid var(--line);padding-block:clamp(52px,7vw,84px) 34px}
.foot-grid{display:grid;gap:clamp(26px,4vw,46px);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));margin-bottom:44px}
.site-foot h4{font-size:.66rem;letter-spacing:.3em;color:var(--brass);margin-bottom:1.5em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{font-size:.79rem;color:var(--dim);margin-bottom:.85em}
.site-foot li a:hover{color:var(--brass)}
.disclaimer{border-top:1px solid var(--line);padding-top:26px;font-size:.72rem;line-height:2;color:var(--dim2)}
.disclaimer b{color:var(--brass);font-weight:400}

/* ---------------------------------------------------------------- 配慮 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-hint i{animation:none}
  .seq-cap{transition:none}
}
@media print{
  .site-head,.seq-load,.scroll-hint{display:none}
  .reveal{opacity:1;transform:none}
  body{background:#fff;color:#000}
}