/* ══════════════════════════════════════════════════════════
   XYLOTECT 方向性F ／ サブページ共通スタイル
   ヘッダー・フッター・ボタン・見出し・リビール等、f.html（TOP）と
   トンマナを揃えるための共有ファイル。TOP（f.html）自体は単体完結
   のまま変更していない。
   ══════════════════════════════════════════════════════════ */
:root{
  --black:#0e0f10;
  --ink:#1a1b1d;
  --gray:#6b6d70;
  --gray-300:#c7c8ca;
  --line:#e3e4e5;
  --line-d:rgba(255,255,255,.16);
  --wash:#f4f4f3;
  --white:#ffffff;
  /* アクセントカラーは廃止し、黒・白・グレーのみのモノトーンに統一。
     --accent は明るい背景での強調（インク色）、--accent-l は暗い背景
     での強調（白）として、呼び出し側のコードは変更せず据え置く */
  --accent:var(--ink);
  --accent-l:var(--white);

  --pad:clamp(1.5rem,5vw,5rem);
  --maxw:1264px;
  --bleed:calc(var(--maxw) + var(--pad) * 2);
  --hd-h:clamp(74px,9vh,96px);
  --sec-y:clamp(3.5rem,10vh,7.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --glide:cubic-bezier(.16,1,.3,1);
  --jp:"Zen Old Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --lat:"Jost",system-ui,sans-serif;
  --serif-it:"Cormorant Garamond",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--jp);font-weight:400;
  font-size:clamp(.88rem,.26vw+.83rem,.98rem);line-height:2.05;letter-spacing:.03em;
  font-feature-settings:"palt" 1}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
::selection{background:var(--black);color:var(--white)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:150;background:var(--black);color:var(--white);padding:.8em 1.4em}

.wrap{max-width:var(--maxw);margin-inline:auto}
.sec{padding-block:var(--sec-y);padding-inline:var(--pad)}
.sec[id]{scroll-margin-top:var(--hd-h)}
.wash{background:var(--wash)}
.dark{background:var(--black);color:var(--white)}

.lbl{display:flex;align-items:center;gap:1rem;font-family:var(--lat);font-weight:400;
  font-size:.66rem;letter-spacing:.28em;color:var(--gray);margin-bottom:clamp(2rem,5vh,3.2rem)}
.lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.dark .lbl{color:var(--gray-300)}
.dark .lbl::after{background:var(--line-d)}
.h2{font-weight:500;font-size:clamp(1.55rem,3.3vw,2.6rem);line-height:1.72;letter-spacing:.05em}
.lead{color:var(--gray);line-height:2.3;max-width:36em;letter-spacing:.035em}
.dark .lead{color:var(--gray-300)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:1.4rem;border:1px solid currentColor;
  border-radius:999px;padding:1.05em 1.9em 1.05em 2.3em;font-family:var(--lat);font-size:.7rem;letter-spacing:.22em;
  transition:background .45s var(--ease),color .45s var(--ease)}
.btn i{display:block;width:2.5rem;height:1px;transition:width .45s var(--glide);
  background-image:linear-gradient(90deg,currentColor 0%,color-mix(in srgb,currentColor 12%,transparent) 50%,currentColor 100%);
  background-size:300% 100%;animation:btn-flow 8.2s linear infinite}
@keyframes btn-flow{to{background-position:-300% 0}}
.btn:hover{background:var(--black);color:var(--white)}
.btn:hover i{width:3.5rem}
.dark .btn:hover{background:var(--white);color:var(--black)}
.btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-140%);mix-blend-mode:overlay}
.btn:hover::after{transition:transform .75s var(--ease);transform:translateX(140%)}
.btn:not(:hover)::after{transition:none;transform:translateX(-140%)}
@media(prefers-reduced-motion:reduce){.btn::after{display:none}}

/* 出現アニメーションは、浮上に加えてごく軽いぼかし解除を添え、
   インクが滲むように少しずつ像を結んでいく見え方にする */
.rv{opacity:0;transform:translateY(14px);filter:blur(6px);
  transition:opacity .7s var(--ease),transform .8s var(--glide),filter .8s var(--glide)}
.rv.is-in{opacity:1;transform:none;filter:blur(0)}
/* 画像単体で出てくる要素だけは、ふわっと・ぬるっと溶けるように現れる */
.rv-img{opacity:0;transform:translateY(26px) scale(.96);filter:blur(9px);
  transition:opacity 1s var(--glide),transform 1s var(--glide),filter 1s var(--glide)}
.rv-img.is-in{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv-img{opacity:1;transform:none;filter:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ══ ヘッダー（サブページは常に不透明＝is-solid相当で固定） ══ */
.hd{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;
  min-height:var(--hd-h);padding-inline:var(--pad);color:var(--ink);background:var(--white);
  border-bottom:1px solid var(--line)}
.hd__in{width:100%;max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hd__brand{display:flex;align-items:center;gap:.8rem}
.hd__actions{display:flex;align-items:center;gap:.6rem}
.hd__mark{width:clamp(28px,3vw,36px)}
.hd__name{height:clamp(10px,1.1vw,12px);width:auto}
.hd__nav{display:flex;gap:clamp(.9rem,1.9vw,1.8rem);font-family:var(--lat);font-size:.68rem;letter-spacing:.16em}
.hd__nav a{position:relative;padding-block:.4em;transition:color .3s var(--ease)}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__nav a:hover{color:var(--accent)}
.hd__cta{position:relative;overflow:hidden;font-family:var(--lat);font-size:.68rem;letter-spacing:.16em;border:1px solid currentColor;
  border-radius:999px;padding:.72em 1.6em;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.hd__cta:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.hd__cta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-140%);mix-blend-mode:overlay}
.hd__cta:hover::after{transition:transform .75s var(--ease);transform:translateX(140%)}
.hd__cta:not(:hover)::after{transition:none;transform:translateX(-140%)}
@media(prefers-reduced-motion:reduce){.hd__cta::after{display:none}}
/* RECRUITボタン：CONTACTと逆配色（黒塗り→ホバーで白塗り） */
.hd__cta--fill{background:var(--black);color:var(--white);border-color:var(--black)}
.hd__cta--fill:hover{background:var(--white);color:var(--black);border-color:var(--black)}
.hd__burger{display:none;width:32px;height:13px;position:relative;z-index:2}
.hd__burger i{position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .4s var(--glide)}
.hd__burger i:nth-child(1){top:0}.hd__burger i:nth-child(2){bottom:0}
.is-menu .hd__burger i:nth-child(1){transform:translateY(6px) rotate(28deg)}
.is-menu .hd__burger i:nth-child(2){transform:translateY(-6px) rotate(-28deg)}

.mnu{position:fixed;inset:0;z-index:95;background:var(--white);overflow-y:auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--hd-h) + clamp(1rem,3vh,2rem)) var(--pad) clamp(2rem,6vh,4rem);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.mnu.is-on{opacity:1;visibility:visible}
.mnu a{display:flex;align-items:baseline;gap:1.1rem;padding-block:clamp(.6rem,1.9vh,1rem);
  border-bottom:1px solid var(--line);font-size:1.02rem;letter-spacing:.1em;font-weight:500}
.mnu a span{font-family:var(--lat);font-size:.62rem;letter-spacing:.22em;color:var(--gray)}
.mnu a[href="/recruit"]{background:var(--black);color:var(--white);
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);border-bottom-color:var(--black)}
.mnu a[href="/recruit"] span{color:var(--gray-300)}
.mnu__foot{margin-top:clamp(1.4rem,3.5vh,2.2rem);display:flex;flex-direction:column;gap:.4rem}
.mnu__tel{font-family:var(--lat);font-size:1.5rem;letter-spacing:.06em;border:0!important;padding:0!important}
.mnu__hours{font-size:.78rem;color:var(--gray);letter-spacing:.1em}

/* ══ フッター ══ */
.ft{position:relative;overflow:hidden;background:var(--black);color:var(--gray-300)}
.ft__media{position:absolute;inset:0;z-index:0}
.ft__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;
  filter:grayscale(.1) brightness(.32) contrast(1.05)}
.ft__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,8,.68) 0%,rgba(6,7,8,.88) 100%)}
.ft__cta{position:relative;z-index:2;padding-block:clamp(2.6rem,6.5vh,4.2rem) clamp(1.8rem,4.5vh,3rem);
  padding-inline:var(--pad);border-bottom:1px solid var(--line-d)}
.ft__cta-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2.5rem}
.ft__cta .lbl{margin-bottom:0;color:var(--gray-300)}
.ft__cta .lbl::after{background:var(--line-d)}
.ft__ttl{margin-top:.9rem;font-weight:500;color:var(--white);
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.6;letter-spacing:.05em}
.ft__cta-r{text-align:right}
.ft__tel{display:inline-block;font-family:var(--lat);font-weight:300;color:var(--white);
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.1;letter-spacing:.02em;transition:color .35s var(--ease)}
.ft__tel:hover{color:var(--accent-l)}
.ft__hours{margin-top:.5rem;font-size:.8rem;letter-spacing:.06em}
.ft__act{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.9rem}
.ft__act .btn{color:var(--white);border-color:var(--line-d)}
.ft__act .btn:hover{background:var(--white);color:var(--black)}
.ft__mid{position:relative;z-index:2;padding-block:clamp(1.8rem,4.5vh,2.6rem);padding-inline:var(--pad);
  border-bottom:1px solid var(--line-d)}
.ft__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,.7fr);gap:clamp(2rem,5vw,4rem)}
.ft__brand-l{display:inline-flex;align-items:center;gap:.7rem}
.ft__mark{width:40px;filter:invert(1)}
.ft__bname{height:15px;width:auto;filter:invert(1) grayscale(1)}
.ft__addr{margin-top:1.1rem;font-size:.8rem;line-height:2;color:var(--gray-300)}
.ft__nav-h{font-family:var(--lat);font-size:.6rem;letter-spacing:.24em;color:var(--gray);margin-bottom:1rem}
.ft__nav{display:flex;flex-direction:column;gap:.75rem}
.ft__nav a{display:block;width:fit-content;font-size:.82rem;letter-spacing:.06em;color:var(--gray-300);
  transition:color .3s var(--ease)}
.ft__nav a:hover{color:var(--white)}
.ft__bottom{position:relative;z-index:2;padding-inline:var(--pad)}
.ft__in{padding-block:clamp(.9rem,2.2vh,1.3rem);display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:1rem;font-family:var(--lat);font-size:.62rem;letter-spacing:.2em}

/* ══ ライトボックス ══ */
.lb{position:fixed;inset:0;z-index:130;background:rgba(6,7,8,.95);display:flex;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s}
.lb.is-on{opacity:1;visibility:visible}
.lb__stage{display:flex;align-items:center;justify-content:center;
  gap:clamp(1.5rem,4vw,3rem);max-width:94vw;max-height:88svh}
.lb img{max-width:90vw;max-height:84svh;object-fit:contain}
.lb__stage img{flex:1 1 auto;min-width:0;max-width:min(62vw,760px)}
.lb__info{flex:0 0 auto;width:min(300px,32vw);max-height:82svh;overflow-y:auto;color:var(--white);
  border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(1.2rem,3vw,2rem)}
.lb__info-ttl{font-size:1rem;font-weight:500;letter-spacing:.04em;margin-bottom:1.1rem}
.lb__info-dl{display:grid;grid-template-columns:5.4em 1fr;gap:.65rem 1rem;font-size:.8rem;line-height:1.7}
.lb__info-dl dt{color:rgba(255,255,255,.5);font-size:.68rem;letter-spacing:.1em}
.lb__info-dl dd{color:rgba(255,255,255,.92)}
@media(max-width:899px){
  .lb__stage{flex-direction:column;flex-wrap:wrap;max-height:92svh}
  .lb__stage img{max-width:90vw;max-height:56svh}
  .lb__info{width:100%;border-left:0;border-top:1px solid rgba(255,255,255,.18);
    padding-left:0;padding-top:1rem;max-height:28svh}
  .ft__grid{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1/-1}
}
@media(max-width:639px){
  .ft__grid{grid-template-columns:1fr;gap:1.8rem}
  .ft__in{flex-direction:column}
}
.lb__x,.lb__nav{position:absolute;color:var(--white);font-family:var(--lat);letter-spacing:.2em;
  opacity:.6;transition:opacity .3s}
.lb__x:hover,.lb__nav:hover{opacity:1}
.lb__x{top:clamp(1rem,3vh,2rem);right:var(--pad);font-size:.7rem}
.lb__nav{top:50%;translate:0 -50%;font-size:1.4rem;padding:1rem}
.lb__nav.p{left:clamp(.4rem,2vw,2rem)}
.lb__nav.n{right:clamp(.4rem,2vw,2rem)}
.lb__cnt{position:absolute;bottom:clamp(1rem,3vh,2rem);left:var(--pad);
  color:rgba(255,255,255,.6);font-family:var(--lat);font-size:.66rem;letter-spacing:.22em}

/* ══ サブページ共通：ページタイトル部（SERVICE/CONCEPTと同系統の暗い全面写真ヒーロー） ══ */
.pg-head{position:relative;overflow:hidden;background:var(--black);color:var(--white);
  min-height:72svh;display:flex;align-items:flex-end;
  padding-block:calc(var(--hd-h) + clamp(3rem,8vh,5rem)) clamp(2.5rem,6vh,4rem);padding-inline:var(--pad)}
.pg-head__media{position:absolute;inset:0;z-index:0}
.pg-head__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.9)}
.pg-head__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.15) 0%,rgba(8,9,10,.55) 55%,rgba(8,9,10,.86) 100%)}
.pg-head__in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%}
.pg-head__en{font-family:var(--lat);font-size:.66rem;letter-spacing:.3em;color:rgba(255,255,255,.82)}
.pg-head__ttl{margin-top:.8rem;font-weight:500;font-size:clamp(1.9rem,4.6vw,3.1rem);letter-spacing:.06em;color:var(--white)}

@media(max-width:1199px){
  .hd__nav,.hd__actions{display:none}
  .hd__burger{display:block}
}