/* =========================================================
   Meticulous — 玉手箱
   ========================================================= */
:root{
  --ink:#07070b;          /* 夜の漆 */
  --ink-2:#0e0d14;
  --ink-3:#16141d;
  --lacquer:#b3261e;      /* 朱 */
  --lacquer-d:#6e0f12;
  --gold:#d9b46a;
  --gold-l:#f3dca4;
  --gold-d:#8a6a2f;
  --washi:#f4efe4;
  --washi-2:#e9e1cf;
  --sumi:#1d1a17;
  --mist:rgba(244,239,228,.72);
  --mist-2:rgba(244,239,228,.48);
  --line:rgba(217,180,106,.28);
  --green:#7fae7a;
  --serif:"Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans:"Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --latin:"Cormorant Garamond", "Times New Roman", serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --gutter:clamp(16px, 4vw, 48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--washi);font-family:var(--sans);font-size:15px;line-height:1.9;letter-spacing:.04em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-opening,body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--lacquer);color:#fff}

/* =========================================================
   OPENING
   ========================================================= */
#opening{position:fixed;inset:0;z-index:100;background:radial-gradient(120% 90% at 50% 70%,#141226 0%,#07070b 60%,#030305 100%);overflow:hidden;cursor:pointer;transition:opacity 1.2s ease}
#opening.is-done{opacity:0;pointer-events:none}
#opening.is-done .op-stage,#opening.is-done #op-sky,#opening.is-done .op-horizon{opacity:0;transition:opacity .9s ease}
#op-sky,#op-smoke{position:absolute;inset:0;width:100%;height:100%}
#op-smoke{pointer-events:none;z-index:4}
.op-horizon{position:absolute;left:-10%;right:-10%;top:66%;height:40%;background:linear-gradient(180deg,rgba(120,140,220,.10),rgba(7,7,11,0) 60%);border-top:1px solid rgba(180,195,255,.18);filter:blur(.3px)}
.op-horizon::before{content:"";position:absolute;left:30%;right:30%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(243,220,164,.6),transparent)}
.op-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px;z-index:2}
.op-hint{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--serif);letter-spacing:.6em;font-size:13px;color:var(--gold-l);opacity:0;animation:hint 2.6s ease-in-out 1.6s infinite}
@keyframes hint{0%,100%{opacity:.15}50%{opacity:.9}}
#opening.is-opened .op-hint{animation:none;opacity:0;transition:opacity .4s}
.op-white{position:absolute;inset:0;z-index:5;background:radial-gradient(circle at 50% 55%,#fffaf0,#f4efe4 60%,#e9e1cf);opacity:0;pointer-events:none;transition:opacity 1.1s ease}
.op-white.on{opacity:1}
.op-skip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));z-index:6;font-family:var(--latin);letter-spacing:.3em;font-size:13px;color:var(--mist-2);padding:10px 14px;border:1px solid rgba(244,239,228,.18);border-radius:999px;transition:.3s}
.op-skip:hover{color:var(--washi);border-color:var(--gold)}

/* ----- the box ----- */
.box{--w:300px;--d:220px;--h:132px;--lh:46px;--ov:14px;position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(40px) rotateX(-24deg) rotateY(-34deg);animation:boxIn 2.2s var(--ease) both}
@keyframes boxIn{from{transform:translateY(90px) rotateX(-24deg) rotateY(-70deg) scale(.86)}to{transform:translateY(40px) rotateX(-24deg) rotateY(-34deg)}}
.op-stage{animation:fade 1.6s ease both}
#opening.is-opened .box{animation:boxOpen 2.4s var(--ease) forwards}
@keyframes boxOpen{from{transform:translateY(40px) rotateX(-24deg) rotateY(-34deg)}to{transform:translateY(70px) rotateX(-30deg) rotateY(-18deg) scale(1.08)}}
@media (max-width:600px){.box{--w:210px;--d:156px;--h:96px;--lh:34px;--ov:10px}}
.box-body,.box-lid{position:absolute;left:0;top:0;transform-style:preserve-3d}
.face{position:absolute;left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* lacquer */
.face{background:
  linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 64%,rgba(255,255,255,.05) 78%,rgba(255,255,255,0) 90%),
  linear-gradient(180deg,#1b1418 0%,#0a0709 55%,#140d10 100%);
  box-shadow:inset 0 0 0 1px rgba(217,180,106,.45),inset 0 0 0 3px #0a0709,inset 0 0 0 4px rgba(217,180,106,.18)}
.f-front,.f-back{width:var(--w);height:var(--h)}
.f-left,.f-right{width:var(--d);height:var(--h)}
.f-bottom{width:var(--w);height:var(--d)}
.f-front{transform:translate(-50%,-50%) translateZ(calc(var(--d)/2))}
.f-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2))}
.f-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2));filter:brightness(.62)}
.f-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w)/2));filter:brightness(.78)}
.f-bottom{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2));box-shadow:0 0 80px 30px rgba(0,0,0,.8)}
/* lid */
.box-lid{transform:translateY(calc(var(--h)/-2 - var(--lh)/2 + 2px));transition:transform 1.9s var(--ease),opacity 1.6s ease 1s}
.l-top{width:calc(var(--w) + var(--ov));height:calc(var(--d) + var(--ov));transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--lh)/2));
  background:
   radial-gradient(60% 70% at 30% 20%,rgba(255,255,255,.10),transparent 60%),
   linear-gradient(160deg,#2a0d0f 0%,#140608 50%,#220a0c 100%)}
.l-front,.l-back{width:calc(var(--w) + var(--ov));height:var(--lh)}
.l-left,.l-right{width:calc(var(--d) + var(--ov));height:var(--lh)}
.l-front{transform:translate(-50%,-50%) translateZ(calc(var(--d)/2 + var(--ov)/2))}
.l-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2 + var(--ov)/2))}
.l-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2 + var(--ov)/2));filter:brightness(.6)}
.l-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w)/2 + var(--ov)/2));filter:brightness(.78)}
#opening.is-opened .box-lid{transform:translateY(calc(var(--h)/-2 - var(--lh)/2 - 260px)) translateZ(-120px) rotateX(38deg) rotateZ(-8deg);opacity:0}
/* 蒔絵（seigaiha） */
.makie{position:absolute;inset:8px;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23d9b46a' stroke-width='.7'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0M6 20a14 14 0 0 1 28 0M12 20a8 8 0 0 1 16 0M-20 10a20 20 0 0 1 40 0M20 10a20 20 0 0 1 40 0M-14 10a14 14 0 0 1 28 0M26 10a14 14 0 0 1 28 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 70%);mask-image:linear-gradient(180deg,transparent 0%,#000 70%)}
.makie-top{-webkit-mask-image:radial-gradient(circle at 85% 85%,#000 0%,transparent 45%),radial-gradient(circle at 12% 15%,#000 0%,transparent 30%);mask-image:radial-gradient(circle at 85% 85%,#000 0%,transparent 45%),radial-gradient(circle at 12% 15%,#000 0%,transparent 30%);opacity:.8}
.l-top::before{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(217,180,106,.7);box-shadow:inset 0 0 0 6px rgba(20,6,8,.9),inset 0 0 0 7px rgba(217,180,106,.4)}
/* 組紐 */
.f-front::after,.l-front::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:12px;transform:translateX(-50%);background:repeating-linear-gradient(135deg,#8c1218 0 3px,#d23a2f 3px 6px,#a8191f 6px 9px);box-shadow:0 0 0 1px rgba(232,196,122,.35);transition:opacity .6s ease,transform .8s var(--ease)}
.l-top::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(50% - 6px),#b3261e calc(50% - 6px),#b3261e calc(50% + 6px),transparent calc(50% + 6px)),
  linear-gradient(180deg,transparent calc(50% - 6px),#9a1a1f calc(50% - 6px),#9a1a1f calc(50% + 6px),transparent calc(50% + 6px));transition:opacity .6s ease}
.cord{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translateY(calc(var(--h)/-2 - var(--lh) + 6px)) translateZ(calc(var(--d)/2 + var(--ov)/2 + 2px));pointer-events:none}
.cord span{display:none}
.bow{position:absolute;width:92px;left:-46px;top:-30px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));transition:transform 1s var(--ease),opacity .8s ease}
@media (max-width:600px){.bow{width:66px;left:-33px;top:-22px}}
#opening.is-untied .bow{transform:translateY(60px) rotate(25deg) scale(.6);opacity:0}
#opening.is-untied .f-front::after,#opening.is-untied .l-front::after,#opening.is-untied .l-top::after{opacity:0}
.box-glow{position:absolute;left:0;top:0;width:10px;height:10px;transform:translateY(calc(var(--h)/-2)) ;pointer-events:none}
.box-glow::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%) scale(.1);border-radius:50%;background:radial-gradient(circle,rgba(255,248,226,.95) 0%,rgba(243,220,164,.55) 22%,rgba(217,180,106,.12) 50%,transparent 70%);opacity:0;transition:transform 2.4s var(--ease),opacity 1.4s ease}
#opening.is-opened .box-glow::before{animation:glowBurst 3.4s var(--ease) forwards}
@keyframes glowBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:.28;transform:translate(-50%,-50%) scale(1.1)}}
@media (max-width:600px){.box-glow::before{width:340px;height:340px}}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;transition:background .5s,backdrop-filter .5s,transform .6s var(--ease);transform:translateY(-110%)}
body.is-ready .site-header{transform:none}
.site-header.is-solid{background:rgba(7,7,11,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:26px;height:26px;position:relative;display:inline-block;border:1px solid var(--gold);background:linear-gradient(160deg,#2a0d0f,#0a0709);box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px rgba(217,180,106,.4)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--lacquer)}
.brand-mark::before{left:50%;top:-1px;bottom:-1px;width:3px;transform:translateX(-50%)}
.brand-mark::after{top:50%;left:-1px;right:-1px;height:3px;transform:translateY(-50%)}
.brand-name{font-family:var(--latin);font-size:22px;letter-spacing:.14em;font-weight:500}
.gnav{display:flex;gap:clamp(14px,2.2vw,30px)}
.gnav a{text-decoration:none;display:flex;flex-direction:column;align-items:center;line-height:1.3;font-family:var(--serif);font-size:13px;position:relative;padding:4px 0}
.gnav a small{font-family:var(--latin);font-size:10px;letter-spacing:.24em;color:var(--gold);opacity:.8}
.gnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-4px;height:1px;background:var(--gold);transition:.4s var(--ease)}
.gnav a:hover::after{left:0;right:0}
.menu-btn{display:none;width:44px;height:44px;position:relative}
.menu-btn i{position:absolute;left:10px;right:10px;height:1px;background:var(--washi);transition:.4s var(--ease)}
.menu-btn i:first-child{top:18px}.menu-btn i:last-child{top:26px}
.menu-btn[aria-expanded=true] i:first-child{top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-child{top:22px;transform:rotate(-45deg)}
@media (max-width:980px){
  .menu-btn{display:block;z-index:2}
  .gnav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:22px;background:rgba(7,7,11,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
  .gnav.open{opacity:1;pointer-events:auto}
  .gnav a{font-size:18px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:radial-gradient(90% 70% at 50% 45%,#1d1a2c 0%,#0d0c15 50%,#07070b 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#fffaf0,#f4efe4 60%,#e9e1cf);transition:opacity 2.8s ease .2s;pointer-events:none}
.hero.is-night::before{opacity:0}
.hero-center::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:180%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(7,7,11,.55),rgba(7,7,11,0));z-index:-1;opacity:1!important}
#hero-sky{position:absolute;inset:0;width:100%;height:100%}
.hero{isolation:isolate}
.orbit{position:absolute;inset:0;pointer-events:none}
.scroll-content h3{font-family:var(--serif);font-weight:500;letter-spacing:.1em}
.gem{position:absolute;left:0;top:0;width:var(--s,72px);height:var(--s,72px);margin:calc(var(--s,72px)/-2) 0 0 calc(var(--s,72px)/-2);pointer-events:auto;border-radius:22%;will-change:transform,opacity;transition:filter .3s}
.gem img{width:100%;height:100%;object-fit:cover;border-radius:22%;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(243,220,164,.35)}
.gem .gem-fallback{width:100%;height:100%;border-radius:22%;display:grid;place-items:center;font-family:var(--serif);font-size:calc(var(--s,72px)*.24);text-align:center;line-height:1.2;color:var(--washi);background:linear-gradient(160deg,var(--c1,#2a0d0f),var(--c2,#0a0709));box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(243,220,164,.35);padding:6px}
.gem::after{content:attr(data-name);position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px);white-space:nowrap;font-family:var(--serif);font-size:12px;color:var(--gold-l);opacity:0;transition:.3s;pointer-events:none;text-shadow:0 2px 8px #000}
.gem:hover::after,.gem:focus-visible::after{opacity:1;transform:translateX(-50%)}
.gem:hover{filter:brightness(1.15) drop-shadow(0 0 18px rgba(243,220,164,.55))}
.hero-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,760px);pointer-events:none}
.hero-center>*{opacity:0;transform:translateY(14px);transition:opacity 1.4s ease,transform 1.4s var(--ease)}
body.is-ready .hero-center>*{opacity:1;transform:none}
body.is-ready .hero-center>:nth-child(2){transition-delay:.25s}
body.is-ready .hero-center>:nth-child(3){transition-delay:.7s}
body.is-ready .hero-center>:nth-child(4){transition-delay:1.1s}
.hero-kicker{margin:0;font-family:var(--latin);letter-spacing:.5em;font-size:12px;color:var(--gold)}
.hero-logo{margin:.1em 0 .1em;font-family:var(--latin);font-weight:500;font-size:clamp(52px,11vw,132px);letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#fff7df 0%,#f3dca4 40%,#c99a4b 62%,#f6e2b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(217,180,106,.25))}
.hero-corp{margin:0;font-family:var(--serif);letter-spacing:.5em;font-size:clamp(12px,1.5vw,15px);color:var(--mist)}
.hero-copy{margin:2.2em 0 0;font-family:var(--serif);font-size:clamp(17px,2.4vw,24px);letter-spacing:.3em;color:var(--washi)}
.hero-scroll{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);margin:0;font-family:var(--latin);font-size:10px;letter-spacing:.4em;color:var(--mist-2);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll::after{content:"";width:1px;height:40px;background:linear-gradient(var(--gold),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ----- お知らせの帯 ----- */
.obi{position:absolute;left:0;right:0;bottom:0;height:54px;display:flex;align-items:stretch;text-align:left;
  background:linear-gradient(180deg,#8c1218,#6e0f12);box-shadow:inset 0 1px 0 rgba(243,220,164,.55),inset 0 -1px 0 rgba(243,220,164,.55),inset 0 4px 0 #6e0f12,inset 0 5px 0 rgba(243,220,164,.25),0 -10px 40px rgba(0,0,0,.35);z-index:3;padding-bottom:env(safe-area-inset-bottom);height:calc(54px + env(safe-area-inset-bottom))}
.obi-label{flex:none;display:grid;place-items:center;padding:0 22px;font-family:var(--latin);letter-spacing:.3em;font-size:13px;color:var(--ink);background:linear-gradient(180deg,var(--gold-l),var(--gold))}
.obi-track{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.obi-text{position:absolute;top:50%;left:0;white-space:nowrap;transform:translateY(-50%);font-family:var(--serif);font-size:14px;letter-spacing:.12em;color:var(--washi);animation:obi var(--dur,60s) linear infinite;padding-left:100%}
.obi:hover .obi-text{animation-play-state:paused}
.obi-text b{font-family:var(--latin);font-weight:500;color:var(--gold-l);margin-right:.8em;letter-spacing:.08em}
.obi-text .sep{display:inline-block;margin:0 2.4em;color:var(--gold)}
.obi-text .new{display:inline-block;font-family:var(--latin);font-size:10px;letter-spacing:.2em;padding:0 6px;margin-right:8px;background:var(--gold-l);color:var(--lacquer-d);line-height:1.6;vertical-align:2px}
@keyframes obi{from{transform:translate(0,-50%)}to{transform:translate(-100%,-50%)}}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{position:relative;padding:clamp(96px,14vw,180px) var(--gutter)}
.sec-head{text-align:center;max-width:780px;margin:0 auto clamp(48px,7vw,88px)}
.sec-en{margin:0;font-family:var(--latin);letter-spacing:.5em;font-size:13px;color:var(--gold)}
.sec-ja{margin:.5em 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,40px);letter-spacing:.18em;line-height:1.5}
.sec-lead{margin:1.6em 0 0;font-family:var(--serif);color:var(--mist);font-size:clamp(14px,1.5vw,16px);line-height:2.2}
.sec-head .sec-ja::after{content:"";display:block;width:1px;height:42px;margin:26px auto 0;background:linear-gradient(var(--gold),transparent)}
.note{font-size:12px;color:var(--mist-2);text-align:center;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:.8em;text-decoration:none;font-family:var(--serif);letter-spacing:.2em;font-size:14px;padding:16px 34px;border:1px solid var(--gold);color:var(--gold-l);position:relative;overflow:hidden;transition:color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--ink)}.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn{z-index:0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s ease,transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ----- 事業内容：引き出し ----- */
.business{background:linear-gradient(180deg,#07070b,#0e0d14 60%,#07070b)}
.drawers{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:760px){.drawers{grid-template-columns:1fr}}
.drawer{position:relative;min-height:400px;padding:clamp(28px,4vw,48px);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#18121a,#0a0709 70%);box-shadow:inset 0 0 0 1px rgba(217,180,106,.35),inset 0 0 0 6px #0a0709,inset 0 0 0 7px rgba(217,180,106,.14);transition:transform .7s var(--ease),box-shadow .5s}
.drawer::before{content:"";position:absolute;left:50%;top:22px;width:62px;height:10px;transform:translateX(-50%);border-radius:0 0 30px 30px;border:1px solid rgba(217,180,106,.6);border-top:0}
.drawer:hover{transform:translateY(-6px)}
.drawer-art{position:absolute;inset:0;z-index:-1;opacity:.55;transition:opacity .6s,transform 1.2s var(--ease)}
.drawer:hover .drawer-art{opacity:.8;transform:scale(1.04)}
.drawer-art .mini{position:absolute;width:64px;height:64px;border-radius:22%;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(243,220,164,.3)}
.drawer-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,9,.2) 0%,rgba(10,7,9,.75) 55%,#0a0709 85%)}
.drawer-no{font-family:var(--latin);font-size:14px;letter-spacing:.3em;color:var(--gold)}
.drawer h3{margin:.3em 0 .2em;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);letter-spacing:.14em}
.drawer .en{font-family:var(--latin);font-style:italic;color:var(--mist-2);font-size:15px;letter-spacing:.1em}
.drawer p{margin:1em 0 0;color:var(--mist);font-size:14px;line-height:2}
.drawer .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.drawer .tags span{font-size:11px;padding:2px 10px;border:1px solid var(--line);color:var(--gold-l);letter-spacing:.08em}
.drawer.is-new{background:linear-gradient(160deg,#0f1a12,#070b08 70%)}
.badge-new{position:absolute;right:22px;top:22px;font-family:var(--latin);font-size:11px;letter-spacing:.3em;color:var(--ink);background:var(--gold-l);padding:2px 10px}

/* ----- カーボン ----- */
.carbon{background:#08100b;overflow:hidden}
.carbon-bg{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 20% 10%,rgba(127,174,122,.18),transparent 60%),
  radial-gradient(50% 40% at 90% 80%,rgba(217,180,106,.12),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 28px)}
.carbon-inner{position:relative;max-width:1200px;margin:0 auto}
.carbon .sec-en{color:#a9cf9f}
.carbon-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 auto 72px;max-width:1000px;counter-reset:st}
@media (max-width:760px){.carbon-steps{grid-template-columns:1fr 1fr;gap:28px 0}}
.step{text-align:center;padding:0 12px;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;right:-6px;top:44px;width:12px;height:1px;background:var(--line)}
.step-ico{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(169,207,159,.45);background:radial-gradient(circle,rgba(127,174,122,.15),transparent 70%)}
.step-ico svg{width:42px;height:42px;stroke:#cfe5c7;fill:none;stroke-width:1.2}
.step b{display:block;font-family:var(--serif);font-weight:500;letter-spacing:.12em;font-size:16px}
.step span{display:block;font-size:12.5px;color:var(--mist);line-height:1.9;margin-top:6px}
.carbon-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){.carbon-cards{grid-template-columns:1fr}}
.ccard{position:relative;padding:34px 30px 30px;background:rgba(10,20,13,.7);box-shadow:inset 0 0 0 1px rgba(169,207,159,.25);display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:transform .6s var(--ease),box-shadow .4s}
.ccard:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(217,180,106,.6)}
.ccard-top{display:flex;align-items:center;gap:16px}
.ccard img,.ccard .cico{width:64px;height:64px;border-radius:18%;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(243,220,164,.3)}
.ccard h3{margin:0;font-family:var(--latin);font-weight:600;font-size:22px;letter-spacing:.12em}
.ccard .role{font-family:var(--serif);font-size:12px;color:#a9cf9f;letter-spacing:.14em}
.ccard p{margin:0;color:var(--mist);font-size:14px;line-height:2}
.ccard .status{margin-top:auto;font-size:11px;letter-spacing:.14em;color:var(--gold-l)}

/* ----- 作品 ----- */
.works{background:var(--ink)}
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:-24px auto 48px}
.filters button{font-family:var(--serif);font-size:13px;letter-spacing:.14em;padding:8px 18px;border:1px solid rgba(244,239,228,.16);color:var(--mist);transition:.3s}
.filters button[aria-selected=true]{border-color:var(--gold);color:var(--ink);background:var(--gold)}
.works-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:520px){.works-grid{grid-template-columns:1fr 1fr}}
.wcard{position:relative;text-align:left;padding:22px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(170deg,#141219,#0b0a0f);box-shadow:inset 0 0 0 1px rgba(244,239,228,.07);transition:transform .6s var(--ease),box-shadow .4s,opacity .5s;min-height:100%}
.wcard:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(217,180,106,.55),0 24px 60px rgba(0,0,0,.5)}
.wcard.hide{display:none}
.wcard-ico{width:76px;height:76px;border-radius:22%;object-fit:cover;box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(243,220,164,.25)}
.wcard-cat{font-family:var(--latin);font-size:11px;letter-spacing:.24em;color:var(--gold)}
.wcard h3{margin:0;font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.08em;line-height:1.5}
.wcard p{margin:0;font-size:12.5px;color:var(--mist);line-height:1.9}
.wcard .soon{position:absolute;right:14px;top:14px;font-family:var(--serif);font-size:10px;letter-spacing:.14em;color:var(--mist-2);border:1px solid rgba(244,239,228,.2);padding:0 8px}
@media (max-width:520px){.wcard{padding:16px}.wcard-ico{width:58px;height:58px}.wcard p{display:none}}

/* ----- 代表挨拶（和紙） ----- */
.message{background:var(--washi);color:var(--sumi);overflow:hidden}
.message::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(29,26,23,.06) 1px,transparent 1px);background-size:5px 5px}
.message-inner{position:relative;max-width:820px;margin:0 auto}
.message .sec-en{color:var(--lacquer)}
.message .sec-ja{color:var(--sumi)}
.message-body{margin-top:48px;font-family:var(--serif);font-size:16px;line-height:2.4;letter-spacing:.08em}
.message-body p{margin:0 0 1.6em}
.message-body .sign{text-align:right;margin-top:3em;letter-spacing:.2em}

/* ----- 会社概要 ----- */
.company{background:linear-gradient(180deg,#07070b,#0e0d14)}
.company-table{max-width:860px;margin:0 auto;display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--line)}
.company-table dt,.company-table dd{margin:0;padding:24px 8px;border-bottom:1px solid var(--line)}
.company-table dt{font-family:var(--serif);color:var(--gold-l);letter-spacing:.2em;font-size:14px}
.company-table dd{color:var(--washi);font-size:15px}
.company-table dd a{text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:600px){.company-table{grid-template-columns:1fr}.company-table dt{border-bottom:0;padding-bottom:0}.company-table dd{padding-top:6px}}

/* ----- ストア・採用 ----- */
.store{background:radial-gradient(70% 60% at 50% 0%,rgba(179,38,30,.22),transparent 70%),var(--ink)}
.store-inner,.recruit-inner{max-width:820px;margin:0 auto;text-align:center}
.store-body,.recruit-body{margin:40px 0 44px;color:var(--mist);font-family:var(--serif);line-height:2.3;font-size:15px}
.store-body p,.recruit-body p{margin:0 0 1.2em}
.store-body img,.recruit-body img{margin:24px auto;box-shadow:0 0 0 1px var(--line)}
.recruit{background:linear-gradient(180deg,var(--ink),#120a0c)}
.recruit .sec-ja{letter-spacing:.12em}

/* ----- footer ----- */
.site-footer{padding:80px var(--gutter) calc(40px + env(safe-area-inset-bottom));background:#040406;border-top:1px solid var(--line);text-align:center}
.footer-brand .brand-mark{width:34px;height:34px}
.footer-logo{margin:14px 0 0;font-family:var(--latin);font-size:30px;letter-spacing:.16em}
.footer-corp{margin:0;font-family:var(--serif);font-size:12px;letter-spacing:.4em;color:var(--mist-2)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:40px 0 30px}
.footer-nav a{text-decoration:none;font-size:13px;color:var(--mist);font-family:var(--serif)}
.footer-nav a:hover{color:var(--gold-l)}
.copyright{font-family:var(--latin);font-size:12px;letter-spacing:.2em;color:var(--mist-2);margin:0}

/* =========================================================
   巻物モーダル
   ========================================================= */
.scroll-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--gutter)}
.scroll-modal[hidden]{display:none}
.scroll-backdrop{position:absolute;inset:0;background:rgba(4,4,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .4s ease}
@keyframes fade{from{opacity:0}}
.scroll-paper{position:relative;width:min(760px,100%);max-height:min(86svh,900px);display:flex;flex-direction:column;background:var(--washi);color:var(--sumi);
  box-shadow:0 30px 90px rgba(0,0,0,.6);animation:unroll .9s var(--ease) both;transform-origin:top center}
.scroll-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background-image:radial-gradient(rgba(29,26,23,.06) 1px,transparent 1px);background-size:5px 5px}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.scroll-rod{position:absolute;left:-14px;right:-14px;height:16px;border-radius:8px;background:linear-gradient(180deg,#3a1012,#8c1218 45%,#3a1012);box-shadow:0 0 0 1px rgba(217,180,106,.5),0 6px 14px rgba(0,0,0,.4);z-index:2}
.scroll-rod.top{top:-8px}.scroll-rod.bottom{bottom:-8px}
.scroll-close{position:absolute;right:14px;top:16px;z-index:3;width:40px;height:40px;font-size:24px;line-height:40px;color:var(--sumi);font-family:var(--latin)}
.scroll-content{position:relative;overflow:auto;padding:clamp(40px,6vw,64px) clamp(22px,6vw,64px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll-content h2{margin:0 0 .2em;font-family:var(--serif);font-weight:500;font-size:clamp(20px,3vw,28px);letter-spacing:.12em;line-height:1.6}
.scroll-content .en{font-family:var(--latin);letter-spacing:.4em;font-size:12px;color:var(--lacquer)}
.scroll-content p,.scroll-content li{font-size:14.5px;line-height:2.1}
.scroll-content img{margin:20px 0;border-radius:4px}
.scroll-content a{color:var(--lacquer)}
.news-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(29,26,23,.15)}
.news-item{border-bottom:1px solid rgba(29,26,23,.15)}
.news-item>button{width:100%;text-align:left;display:grid;grid-template-columns:110px 1fr 20px;gap:12px;align-items:baseline;padding:18px 4px}
.news-item time{font-family:var(--latin);font-size:15px;letter-spacing:.08em;color:var(--lacquer)}
.news-item .t{font-family:var(--serif);font-size:15px;line-height:1.7}
.news-item .pm{font-family:var(--latin);font-size:20px;color:var(--lacquer);transition:transform .4s}
.news-item.open .pm{transform:rotate(45deg)}
.news-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.news-item.open .news-body{grid-template-rows:1fr}
.news-body>div{overflow:hidden;padding:0 4px}
.news-item.open .news-body>div{padding-bottom:20px}
@media (max-width:560px){.news-item>button{grid-template-columns:1fr 20px}.news-item time{grid-column:1/-1;font-size:13px}}
.work-detail .wd-head{display:flex;gap:20px;align-items:center}
.work-detail .wd-ico{width:96px;height:96px;border-radius:22%;object-fit:cover;flex:none;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.work-detail .wd-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.work-detail .wd-links a{font-family:var(--serif);font-size:13px;text-decoration:none;color:var(--washi);background:var(--sumi);padding:10px 18px;letter-spacing:.1em}
.work-detail .wd-shots{display:flex;gap:12px;overflow-x:auto;margin:20px -4px 0;padding:4px}
.work-detail .wd-shots img{height:300px;width:auto;margin:0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .obi-text{animation:none;padding-left:0}
}
/* 開いたときに見える箱の内側 */
.f-back,.f-left{backface-visibility:visible;-webkit-backface-visibility:visible}
.f-bottom{backface-visibility:visible;-webkit-backface-visibility:visible;background:radial-gradient(circle at 50% 50%,#3a2a12,#120c0d 70%)}
.sp{display:none}
@media (max-width:600px){.sp{display:inline}.hero-copy{letter-spacing:.2em;line-height:2}.wcard h3{font-size:14px}}

/* 会社ロゴ */
.brand-logo{height:30px;width:auto}
@media (max-width:600px){.brand-logo{height:26px}}
.footer-logo-img{height:44px;width:auto;margin:0 auto 10px}
/* ヘッダー：ロゴを送られた色のまま見せる明るい帯 */
.site-header,.site-header.is-solid{background:rgba(250,248,243,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(29,26,23,.08),0 8px 30px rgba(0,0,0,.25);padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
.brand-logo{height:34px}
@media (max-width:600px){.brand-logo{height:28px}}
.gnav a{color:var(--sumi)}
.gnav a small{color:#1a7df5;opacity:1}
.gnav a::after{background:#1a7df5}
.menu-btn i{background:var(--sumi)}
@media (max-width:980px){
  .gnav{background:rgba(250,248,243,.98)}
  .gnav a{color:var(--sumi)}
}
@media (max-width:980px){.site-header,.site-header.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(250,248,243,.98)}.gnav{-webkit-backdrop-filter:none;backdrop-filter:none}}
/* フッター：ヘッダーと同じ明るい帯 */
.site-footer{background:#faf8f3;border-top:1px solid rgba(29,26,23,.08);color:var(--sumi)}
.footer-corp{color:rgba(29,26,23,.6)}
.footer-nav a{color:var(--sumi)}
.footer-nav a:hover{color:#1a7df5}
.copyright{color:rgba(29,26,23,.5)}
/* お知らせの帯：ヘッダーと同じ明るい色 */
.obi{background:#faf8f3;box-shadow:0 -1px 0 rgba(29,26,23,.08),0 -8px 30px rgba(0,0,0,.25)}
.obi-text{color:var(--sumi)}
.obi-text b{color:#1a7df5}
.obi-text .sep{color:rgba(29,26,23,.3)}
.obi-text .new{background:#1a7df5;color:#fff}
[hidden]{display:none!important}

/* =========================================================
   メニュー「事業内容」の項目（ドロップダウン）
   ========================================================= */
.gnav-group{position:relative;display:flex}
.gnav-sub{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);min-width:220px;padding:10px 0;background:#faf8f3;box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 0 1px rgba(29,26,23,.06);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
@media (min-width:981px) and (hover:hover){.gnav-group:hover .gnav-sub,.gnav-group:focus-within .gnav-sub{opacity:1;pointer-events:auto;transform:translate(-50%,4px)}}
.gnav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.gnav .gnav-sub a{display:block;padding:9px 22px;font-size:13px;text-align:left;line-height:1.6;white-space:nowrap}
.gnav .gnav-sub a::after{display:none}
.gnav .gnav-sub a:hover{background:rgba(26,125,245,.08);color:#1a7df5}
@media (max-width:980px){
  .gnav-group{flex-direction:column;align-items:center}
  .gnav-sub{position:static;transform:none;opacity:1;pointer-events:auto;background:none;box-shadow:none;padding:6px 0 0;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px}
  .gnav-sub::before{display:none}
  .gnav .gnav-sub a{font-size:13px;padding:4px 10px;color:rgba(29,26,23,.7)}
}

/* =========================================================
   事業内容ページ
   ========================================================= */
.page{min-height:70vh}
.page-head{padding:calc(140px + env(safe-area-inset-top)) var(--gutter) 0;text-align:center;background:radial-gradient(80% 100% at 50% 0%,#1d1a2c,#07070b 70%)}
.page-head .sec-ja{margin-bottom:0}
.biz-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:36px auto 0;padding-bottom:12px;max-width:900px}
.biz-tabs a{font-family:var(--serif);font-size:13px;letter-spacing:.12em;padding:8px 18px;border:1px solid rgba(244,239,228,.16);color:var(--mist);text-decoration:none;transition:.3s}
.biz-tabs a:hover{border-color:var(--gold);color:var(--washi)}
.biz-tabs a[aria-current=page]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.biz{padding-top:clamp(48px,7vw,80px)}
.biz-list{list-style:none;margin:0 auto;padding:0;max-width:960px;border-top:1px solid var(--line)}
.biz-row{display:grid;grid-template-columns:60px 240px 1fr 30px;gap:20px;align-items:center;padding:30px 10px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .3s}
.biz-row:hover{background:rgba(217,180,106,.05)}
.biz-row:hover .biz-arrow{transform:translateX(6px);color:var(--gold-l)}
.biz-no{font-family:var(--latin);font-size:22px;color:var(--gold)}
.biz-name b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.12em}
.biz-name small{font-family:var(--latin);font-style:italic;font-size:13px;color:var(--mist-2);letter-spacing:.1em}
.biz-lead{font-size:13.5px;color:var(--mist);line-height:1.9}
.biz-arrow{font-family:var(--latin);font-size:20px;color:var(--gold);transition:.4s var(--ease)}
@media (max-width:700px){.biz-row{grid-template-columns:44px 1fr 24px;gap:12px}.biz-lead{grid-column:2/3}.biz-arrow{grid-row:1;grid-column:3}}
.biz-intro{text-align:center;max-width:720px;margin:0 auto 48px;font-family:var(--serif);color:var(--mist);line-height:2.2}
.biz .store-body{max-width:820px;margin:0 auto;color:var(--mist);font-family:var(--serif);line-height:2.3;font-size:15px}
.biz .store-body img{margin:0 auto 32px;box-shadow:0 0 0 1px var(--line)}
/* 代表挨拶・会社概要・採用の別ページ */
.page .message{padding-top:clamp(56px,8vw,96px)}
.page .company,.page .recruit{padding-top:clamp(56px,8vw,96px)}
.page .recruit-inner .sec-ja{font-size:clamp(20px,2.6vw,28px);margin:0}
/* スマホのメニュー：項目を縦に並べて、指でタップしやすく */
@media (max-width:980px){
  .gnav{justify-content:flex-start;gap:0;padding:calc(84px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .gnav>a,.gnav-parent{width:100%;max-width:340px;padding:14px 0;min-height:56px;justify-content:center;border-bottom:1px solid rgba(29,26,23,.08)}
  .gnav-group{width:100%;max-width:340px}
  .gnav-group .gnav-parent{border-bottom:0}
  .gnav-sub{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;padding:0 0 10px;border-bottom:1px solid rgba(29,26,23,.08)}
  .gnav .gnav-sub a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;font-size:15px;color:var(--sumi);background:rgba(26,125,245,.05);margin:3px 0;border-radius:6px}
  .gnav .gnav-sub a:active{background:rgba(26,125,245,.15)}
  .gnav a::after{display:none}
}
@media (max-width:600px){
  .biz-tabs{flex-direction:column;align-items:stretch;max-width:340px;gap:6px}
  .biz-tabs a{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:15px}
}

/* スマホ：タップしても項目が横にずれない・横に動かない */
@media (max-width:980px){
  .gnav-sub,.gnav-group:hover .gnav-sub,.gnav-group:focus-within .gnav-sub{position:static;left:auto;top:auto;transform:none!important;opacity:1}
  .gnav{overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain}
  .gnav a{-webkit-tap-highlight-color:transparent}
}
/* タッチ端末：マウスを重ねたときの変化を止める（1回目のタップが「重ねただけ」扱いになるのを防ぐ） */
@media (hover:none){
  .gnav .gnav-sub a:hover{background:rgba(26,125,245,.05);color:var(--sumi)}
  .gnav a:hover::after{left:50%;right:50%}
  .biz-tabs a:hover{border-color:rgba(244,239,228,.16);color:var(--mist)}
  .biz-tabs a[aria-current=page]:hover{border-color:var(--gold);color:var(--ink)}
  .footer-nav a:hover{color:var(--sumi)}
  .biz-row:hover{background:none}.biz-row:hover .biz-arrow{transform:none;color:var(--gold)}
  .wcard:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(244,239,228,.07)}
  .gem:hover{filter:none}.gem:hover::after{opacity:0}
  .btn:hover{color:var(--gold-l)}.btn:hover::before{transform:scaleX(0)}
}
/* 戻るボタン */
.page-head{position:relative}
.back-btn{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 20px;font-family:var(--serif);font-size:14px;letter-spacing:.14em;color:var(--washi);text-decoration:none;border:1px solid rgba(244,239,228,.25);border-radius:999px;background:rgba(7,7,11,.4);-webkit-tap-highlight-color:transparent}
.back-btn span{font-family:var(--latin);font-size:16px}
.back-top{position:absolute;left:var(--gutter);top:calc(84px + env(safe-area-inset-top))}
.back-foot{display:flex;justify-content:center;padding:0 var(--gutter) clamp(56px,8vw,96px)}
.message+.back-foot{background:var(--washi);margin-top:-1px}
.message+.back-foot .back-btn{color:var(--sumi);border-color:rgba(29,26,23,.25);background:none}
@media (hover:hover){.back-btn:hover{border-color:var(--gold);color:var(--gold-l)}.message+.back-foot .back-btn:hover{color:var(--lacquer);border-color:var(--lacquer)}}
@media (max-width:600px){.back-top{top:calc(76px + env(safe-area-inset-top));padding:0 16px;font-size:13px}.page-head{padding-top:calc(150px + env(safe-area-inset-top))}}
@media (max-width:980px){.gnav{transition:opacity .2s}}
/* ホームの下のお知らせ一覧 */
.news-sec{background:linear-gradient(180deg,#07070b,#0e0d14)}
.news-sec .sec-head{margin-bottom:40px}
.hn-list{list-style:none;margin:0 auto;padding:0;max-width:880px;border-top:1px solid var(--line)}
.hn-row{width:100%;display:grid;grid-template-columns:110px auto 1fr 24px;gap:14px;align-items:center;text-align:left;padding:22px 8px;min-height:64px;border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
.hn-row time{font-family:var(--latin);font-size:15px;letter-spacing:.06em;color:var(--gold)}
.hn-new{font-family:var(--latin);font-size:10px;letter-spacing:.2em;padding:0 7px;background:#1a7df5;color:#fff;line-height:1.7}
.hn-t{font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--washi)}
.hn-arrow{font-family:var(--latin);color:var(--gold);transition:transform .3s}
.hn-row:not(:has(.hn-new)) .hn-t{grid-column:2/4}
@media (hover:hover){.hn-row:hover{background:rgba(217,180,106,.05)}.hn-row:hover .hn-arrow{transform:translateX(5px)}}
@media (max-width:600px){.hn-row{grid-template-columns:auto 1fr 20px;gap:6px 10px}.hn-row time{grid-column:1/2}.hn-new{grid-column:2/3;justify-self:start}.hn-t,.hn-row:not(:has(.hn-new)) .hn-t{grid-column:1/3}.hn-arrow{grid-column:3;grid-row:1/3}}
.hn-more{text-align:center;margin:44px 0 0}
/* お知らせ1件 */
.news-article time{display:block;margin-top:14px;font-family:var(--latin);font-size:15px;letter-spacing:.08em;color:var(--lacquer)}
.news-article h2{margin-top:4px;padding-bottom:18px;border-bottom:1px solid rgba(29,26,23,.15)}
.news-article-body{margin-top:10px}
.news-article-more{text-align:center;margin:36px 0 0}
.news-article-more button{font-family:var(--serif);font-size:13px;letter-spacing:.12em;padding:12px 24px;min-height:44px;border:1px solid rgba(29,26,23,.3);color:var(--sumi)}
/* 巻物が狭い画面からはみ出さないように */
.scroll-modal{grid-template-columns:minmax(0,760px);justify-content:center}
.scroll-paper{width:100%;min-width:0;max-width:100%}
.scroll-content{overflow-wrap:anywhere;word-break:normal}
.scroll-content img{max-width:100%;height:auto}
.scroll-rod{left:-8px;right:-8px}
/* 旧サイトの画像 */
.home-visual{background:#07070b;padding:clamp(48px,7vw,96px) var(--gutter) 0}
.home-visual img{width:min(100%,760px);height:auto;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.page-photo{margin:0 auto 48px;max-width:640px}
.page-photo img{width:100%;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.company .page-photo{max-width:420px}
.site-footer .copyright{margin-top:22px}
/* メニューの中のプライバシーポリシー（控えめ） */
.gnav .gnav-small span{font-size:12px}
@media (max-width:980px){.gnav>a.gnav-small{min-height:48px;border-bottom:0;margin-top:8px}.gnav .gnav-small span{font-size:13px;color:rgba(29,26,23,.7)}}
/* 箱が触れられるのを待つあいだ、結び目と箱がゆっくり光る */
#opening.is-waiting:not(.is-untied) .bow{animation:bowGlow 2.4s ease-in-out infinite}
@keyframes bowGlow{0%,100%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 14px rgba(243,220,164,.95)) drop-shadow(0 0 30px rgba(210,58,47,.6))}}
#opening.is-waiting:not(.is-opened) .box-glow::before{opacity:.18;transform:translate(-50%,-50%) scale(.55);animation:waitGlow 2.4s ease-in-out infinite}
@keyframes waitGlow{0%,100%{opacity:.08}50%{opacity:.26}}
/* 時間帯の空はキャンバスが描く */
#opening{background:#07070b}
.op-horizon{display:none}
/* 隠し演出の名前 */
.secret-tag{position:absolute;left:50%;top:22%;transform:translateX(-50%);margin:0;font-family:var(--serif);font-size:clamp(20px,3vw,32px);letter-spacing:.3em;color:var(--gold-l);text-shadow:0 0 20px rgba(243,220,164,.8);pointer-events:none;z-index:120;animation:secretIn 3.2s ease forwards;white-space:nowrap}
@keyframes secretIn{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
/* 作品の巻物の演出 */
.wd-stage{position:relative;margin:22px 0 6px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 0 1px rgba(29,26,23,.12)}
.wd-stage canvas{display:block;width:100%;height:220px;cursor:default}
.wd-stage.is-play canvas{height:260px;cursor:pointer}
.wd-hint{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 12px;font-size:12px!important;line-height:1.6!important;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}

/* =========================================================
   ページを移るとき：襖が左右に開くように
   ========================================================= */
@view-transition{navigation:auto}
::view-transition-old(root){animation:shojiOut .55s cubic-bezier(.6,0,.4,1) both}
::view-transition-new(root){animation:shojiIn .75s cubic-bezier(.22,.8,.2,1) both}
@keyframes shojiOut{to{opacity:0;filter:brightness(.6)}}
@keyframes shojiIn{from{clip-path:inset(0 50% 0 50%);filter:brightness(1.4)}to{clip-path:inset(0 0 0 0);filter:none}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* =========================================================
   事業ごとの背景（ページ上部）
   ========================================================= */
.page-head{overflow:hidden}
.page-head>*:not(.head-fx):not(.back-top){position:relative;z-index:1}
.page-head>.back-top{z-index:2}
.head-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* =========================================================
   終わりの演出：フッターの小さな玉手箱の蓋が閉じる
   ========================================================= */
.mini-box{position:relative;width:64px;height:52px;margin:0 auto 26px}
.mini-box .mb-body{position:absolute;left:6px;right:6px;bottom:0;height:30px;background:linear-gradient(180deg,#1b1418,#0a0709);box-shadow:inset 0 0 0 1px rgba(217,180,106,.6)}
.mini-box .mb-body::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%);background:#b3261e}
.mini-box .mb-lid{position:absolute;left:2px;right:2px;bottom:28px;height:12px;background:linear-gradient(180deg,#2a0d0f,#140608);box-shadow:inset 0 0 0 1px rgba(217,180,106,.7);transform-origin:0 100%;transform:translate(10px,-22px) rotate(-28deg);transition:transform 1.2s cubic-bezier(.22,.8,.2,1) .2s}
.mini-box .mb-lid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%);background:#b3261e}
.mini-box .mb-glow{position:absolute;left:50%;bottom:28px;width:60px;height:60px;transform:translate(-50%,50%);border-radius:50%;background:radial-gradient(circle,rgba(243,220,164,.8),transparent 70%);transition:opacity 1s ease .6s}
.mini-box.closed .mb-lid{transform:none}
.mini-box.closed .mb-glow{opacity:0}
.mini-box-msg{margin:-12px 0 22px;font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:rgba(29,26,23,.55);opacity:0;transition:opacity 1s ease 1.2s}
.mini-box.closed+.mini-box-msg{opacity:1}
/* 代表挨拶：墨のにじみと筆の署名 */
.message .ink{opacity:0;filter:blur(8px);transform:translateY(6px);transition:opacity 1.6s ease,filter 1.8s ease,transform 1.6s ease}
.message .ink.in{opacity:1;filter:none;transform:none}
.message-body .sign{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:3.5em}
.sign-corp{font-size:13px;letter-spacing:.2em;color:rgba(29,26,23,.7)}
.sign-name{font-family:"Yuji Syuku",var(--serif);font-size:clamp(30px,5vw,42px);letter-spacing:.12em;color:var(--sumi);line-height:1.3}
.message-photo{margin:0 auto 48px;max-width:360px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 0%);mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 0%);transition:-webkit-mask-image 2s ease,mask-image 2s ease}
.message-photo img{width:100%;height:auto;filter:grayscale(.15) contrast(1.02)}
.message-photo.in{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 72%)}
.sign-corp{white-space:nowrap}
/* 言語の切り替え */
.lang-btn{margin-left:auto;margin-right:8px;min-height:36px;padding:0 14px;border:1px solid rgba(29,26,23,.25);border-radius:999px;font-family:var(--latin);font-size:13px;letter-spacing:.12em;color:var(--sumi);z-index:3}
@media (min-width:981px){.lang-btn{order:3;margin:0 0 0 20px}}
@media (hover:hover){.lang-btn:hover{border-color:#1a7df5;color:#1a7df5}}
/* 英語のときは文字の間隔を詰める */
html[lang=en] .hero-copy{letter-spacing:.08em;line-height:1.7}
html[lang=en] .hero-corp{letter-spacing:.3em}
html[lang=en] .sec-ja{letter-spacing:.06em}
html[lang=en] .message-body,html[lang=en] .scroll-content p{letter-spacing:.01em}
html[lang=en] .gnav a span{letter-spacing:.06em}
.wd-note{margin:6px 0 0!important;font-size:12px!important;line-height:1.7!important;color:rgba(29,26,23,.6)}
.wd-stage.is-play canvas{height:290px}
/* 文書のページ（プライバシーポリシー・お知らせ） */
.doc{padding-top:clamp(48px,7vw,80px)}
.doc-body{max-width:820px;margin:0 auto;color:var(--mist);font-size:15px;line-height:2.1}
.doc-body p{margin:0 0 1.3em}
.doc-body a{color:var(--gold-l)}
.doc-body img{max-width:100%;height:auto;margin:20px 0}
.doc-body h3{font-family:var(--serif);font-weight:500;color:var(--washi);letter-spacing:.1em;margin:2em 0 .6em}
.doc .news-article time{color:var(--gold)}
.doc .news-article h2{font-family:var(--serif);font-weight:500;color:var(--washi);font-size:clamp(20px,3vw,28px);line-height:1.6;letter-spacing:.08em;border-bottom-color:var(--line)}
.doc .news-article-more .btn{font-size:13px}
a.hn-row{text-decoration:none;color:inherit}
/* 404：空っぽの玉手箱 */
.nf-head{padding-bottom:clamp(80px,12vw,140px)}
.nf-box{position:relative;width:120px;height:96px;margin:0 auto 28px}
.nf-body{position:absolute;left:10px;right:10px;bottom:0;height:56px;background:linear-gradient(180deg,#1b1418,#0a0709);box-shadow:inset 0 0 0 1px rgba(217,180,106,.6)}
.nf-lid{position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(180deg,#2a0d0f,#140608);box-shadow:inset 0 0 0 1px rgba(217,180,106,.7);transform:rotate(-14deg) translate(-10px,-6px);transform-origin:left bottom;animation:nfLid 3s ease-in-out infinite}
@keyframes nfLid{0%,100%{transform:rotate(-14deg) translate(-10px,-6px)}50%{transform:rotate(-20deg) translate(-12px,-12px)}}
.nf-lead{margin:1.4em 0 2.2em;color:var(--mist);font-family:var(--serif)}
/* お問い合わせフォーム */
.cform{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.cform-lead{color:var(--mist);margin:0 0 6px}
.cf{display:flex;flex-direction:column;gap:8px}
.cf>span{font-family:var(--serif);font-size:14px;letter-spacing:.1em;color:var(--gold-l)}
.cf>span b{font-weight:500}.cf em{font-style:normal;color:#ff8aa0;margin-left:4px}
.cf input,.cf textarea,.cf select{font:inherit;font-size:16px;color:var(--washi);background:rgba(244,239,228,.06);border:1px solid rgba(244,239,228,.2);border-radius:8px;padding:12px 14px;width:100%;-webkit-appearance:none;appearance:none}
.cf select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.cf select option{color:#111}
.cf input:focus,.cf textarea:focus,.cf select:focus{outline:none;border-color:var(--gold);background:rgba(244,239,228,.1)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-agree{display:flex;align-items:center;gap:10px;color:var(--mist);font-size:14px}
.cf-agree input{width:20px;height:20px;accent-color:#1a7df5}
.cf-err{color:#ff8aa0;font-size:12px;min-height:0}
.cf-send{text-align:center;margin:10px 0 0}
.cf-send .btn{min-width:220px;justify-content:center;font-size:15px}
.cf-send .btn:disabled{opacity:.5}
.cf-msg{text-align:center;color:var(--mist);font-size:13px;margin:0}
.cform-done{text-align:center;max-width:620px;margin:0 auto;color:var(--mist)}
.cform-done h2{font-family:var(--serif);font-weight:500;color:var(--washi);letter-spacing:.2em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 代表の写真（切り抜き・髪が円からはみ出す形）：墨がにじむように浮かび上がる */
.message-photo{-webkit-mask-image:none;mask-image:none;max-width:300px;margin:0 auto 40px;opacity:0;filter:blur(10px) saturate(.6);transform:translateY(10px) scale(.98);transition:opacity 1.6s ease,filter 2s ease,transform 1.6s cubic-bezier(.22,.8,.2,1)}
.message-photo.in{-webkit-mask-image:none;mask-image:none;opacity:1;filter:none;transform:none}
.message-photo img{filter:drop-shadow(0 14px 28px rgba(29,26,23,.18))}
@media (max-width:600px){.message-photo{max-width:240px}}
/* ページ上部の見出し：英語の下にすぐ日本語、黒い帯の下とのあいだに余白 */
.page-head{padding-bottom:clamp(40px,7vw,72px)}
.page-head .sec-en{margin:0}
.page-head .sec-ja{margin-top:.15em}
.page-head .biz-tabs{margin-top:28px}
/* オープニング：「タップして」と、間違えて押しにくい SKIP */
.op-tap{position:absolute;left:0;right:0;bottom:calc(16% + env(safe-area-inset-bottom));margin:0;text-align:center;z-index:6;pointer-events:none;font-family:var(--serif);font-size:15px;letter-spacing:.5em;color:var(--gold-l);opacity:0;transition:opacity .8s ease}
#opening.is-waiting:not(.is-untied) .op-tap{animation:tapBlink 2.2s ease-in-out infinite}
@keyframes tapBlink{0%,100%{opacity:.25}50%{opacity:.95}}
#opening.is-untied .op-tap{opacity:0;animation:none}
.op-skip{top:auto;bottom:max(18px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right));font-size:11px;padding:6px 12px;letter-spacing:.24em;opacity:0;pointer-events:none;transition:opacity .6s ease}
#opening.show-skip .op-skip{opacity:.6;pointer-events:auto}
/* ホーム：旧サイトの画像を画面いっぱいに・そのすぐ下にお知らせをコンパクトに */
.home-visual{padding:0;background:#07070b}
.home-visual img{width:100%;max-width:none;height:auto;margin:0;box-shadow:none;display:block}
.news-sec{padding:clamp(36px,6vw,64px) var(--gutter) clamp(56px,8vw,88px)}
.news-sec .sec-head{margin:0 auto 22px}
.news-sec .sec-head .sec-ja{font-size:clamp(20px,2.6vw,28px);margin-top:.1em}
.news-sec .sec-head .sec-ja::after{display:none}
.news-sec .hn-list{max-width:760px}
.news-sec .hn-row{padding:14px 6px;min-height:52px;gap:12px}
.news-sec .hn-t{font-size:14.5px;line-height:1.6}
.news-sec .hn-row time{font-size:14px}
.news-sec .hn-more{margin-top:28px}
.news-sec .hn-more .btn{padding:12px 26px;font-size:13px}
@media (max-width:600px){.news-sec .hn-row{padding:12px 4px;gap:4px 10px}}
/* パソコンの広い画面では、画像を画面の高さに収める */
@media (min-width:700px){.home-visual img{width:auto;max-width:100%;max-height:calc(100svh - 64px);margin:0 auto;object-fit:contain}}
/* ホームの画像：端が切れても、画面いっぱいに大きく見せる */
.home-visual{overflow:hidden}
.home-visual img{width:100%!important;max-width:none!important;max-height:none!important;height:82svh;object-fit:cover;object-position:50% 45%;margin:0!important}
@media (min-width:700px){.home-visual img{height:calc(100svh - 64px)}}
/* ページ上部の黒い帯：見出しを帯の上下まん中に（ヘッダーの下〜帯の下端で同じ余白） */
.page-head{padding-top:calc(64px + env(safe-area-inset-top) + 76px);padding-bottom:76px}
@media (max-width:600px){.page-head{padding-top:calc(64px + env(safe-area-inset-top) + 64px);padding-bottom:64px}}
/* ホームのお知らせ見出し：画像の下端〜一覧の上の線のまん中に */
.news-sec{padding-top:44px}
.news-sec .sec-head{margin:0 auto 44px}
@media (min-width:700px){.news-sec{padding-top:56px}.news-sec .sec-head{margin-bottom:56px}}
/* ホームのお知らせの黒い枠：上下を狭く（見出しはまん中のまま） */
.news-sec{padding-top:22px;padding-bottom:40px}
.news-sec .sec-head{margin:0 auto 22px}
.news-sec .hn-more{margin-top:22px}
@media (min-width:700px){.news-sec{padding-top:28px;padding-bottom:48px}.news-sec .sec-head{margin-bottom:28px}}
/* 採用ページ：上下の余白を詰める・画像の下に見出し */
.page .recruit{padding-top:36px;padding-bottom:56px}
.page .recruit .recruit-body{margin:0 0 32px}
.page .recruit .page-photo{margin-bottom:22px}
.page .recruit .recruit-body .sec-ja{margin:0 0 22px;font-size:clamp(19px,2.4vw,26px);color:var(--washi)}
@media (min-width:700px){.page .recruit{padding-top:48px;padding-bottom:72px}}
/* 採用：スマホでは画像を約1.2cm（72px）上へ */
@media (max-width:600px){.page .recruit{padding-top:0;margin-top:-36px;position:relative;z-index:1}}
/* 会社概要：スマホでは写真を約1.2cm（72px）上へ */
@media (max-width:600px){.page .company{padding-top:0;margin-top:-16px;position:relative;z-index:1}}
/* お問い合わせ・プライバシーポリシー：スマホでは本文の始まりを約1.5cm（90px）上へ */
@media (max-width:600px){.page:has(#cform) .doc,.page:has(#privacyBody) .doc{padding-top:0;margin-top:-42px;position:relative;z-index:1}}
/* メニュー：事業を5つ並べたので、パソコンの中くらいの幅では詰める */
.gnav a[aria-current=page] span{color:#1a7df5}
@media (min-width:981px) and (max-width:1280px){.gnav{gap:14px}.gnav a{font-size:12px}.gnav a small{display:none}}
/* 事業ページ：見出しのすぐ下から中身が見えるように */
.page .biz{padding-top:28px}
.page .biz .biz-intro{margin-bottom:28px}
@media (max-width:600px){.page .biz{padding-top:8px}}

/* カーボン：南九州市の注意書き */
.biz-note{text-align:center;max-width:720px;margin:40px auto 0;font-size:13px;line-height:1.9;color:var(--mist);opacity:.85}

/* カーボン：南九州市の皆さまへのお知らせ枠（ページの一番上・大きく） */
.area-notice{max-width:760px;margin:0 auto 56px;padding:32px 28px;border:2px solid #d9b45a;border-radius:14px;background:rgba(217,180,90,.1);text-align:center;color:#fff}
.area-notice h2{font-family:var(--serif);font-size:clamp(22px,4.6vw,30px);letter-spacing:.08em;margin:0 0 20px;color:#f1d58c}
.area-notice p{font-size:clamp(16px,3.6vw,19px);line-height:1.9;margin:0 0 12px}
.area-notice strong{font-weight:700}
.area-notice .an-sub{font-size:15px;color:var(--mist);margin-top:18px}
.area-notice .an-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.area-notice .an-links a{display:inline-block;padding:11px 20px;border:1px solid #d9b45a;border-radius:999px;color:#f1d58c;text-decoration:none;font-size:15px}
@media (hover:hover){.area-notice .an-links a:hover{background:rgba(217,180,90,.18)}}
@media (max-width:600px){.area-notice{padding:24px 18px;margin-bottom:40px;text-align:left}.area-notice h2{text-align:center}.area-notice .an-links{flex-direction:column}.area-notice .an-links a{text-align:center}}
.area-notice .an-lead{font-size:clamp(15px,3.4vw,17px);color:#f1d58c;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid rgba(217,180,90,.4)}