@charset "UTF-8";

/* =========================================
   MYTHOS BASE DESIGN
   INCONNECTZERO  (BASE.CSS – FINAL INTEGRATED)
========================================= */

/* =========================================
   ROOT VARIABLES
========================================= */

:root{
  /* =====================
     Brand
  ===================== */
  --lux-black:#1a1a1a;
  --lux-deep:#111;
  --lux-soft:#666;
  --lux-line:rgba(0,0,0,.08);
  --lux-gold:#9c7a2f;
  --lux-bg:#fafaf7;

  /* =====================
     Typography
  ===================== */
  --font-en:"Cinzel", serif;
  --font-jp:"Cormorant Garamond", serif;

  --fz-body:15px;
  --lh-body:2.6;
  --ls-body:0.08em;
  --fw-body:400;

  /* =====================
     Layout
  ===================== */
  --sec-y:96px;
  --sec-y-sm:72px;

  --stack-1:14px;
  --stack-2:22px;
  --stack-3:28px;
  --stack-4:40px;

  --container:1200px;
  --container-wide:1400px;
  --container-narrow:920px;

  --gutter:40px;
  --gutter-sm:18px;

  /* =====================
     CTA
  ===================== */
  --cta-color:rgba(0,0,0,.78);
  --cta-line:rgba(0,0,0,.22);
  --cta-line-hover:rgba(0,0,0,.32);

  /* =====================
     Motion
  ===================== */
  --ease-out:cubic-bezier(.16,1,.30,1);
  --ease:cubic-bezier(.25,.80,.25,1);

  --dur-1:420ms;
  --dur-2:700ms;
  --dur-3:1400ms;
  --dur-4:1800ms;

  --reveal-y:16px;
  --reveal-blur:4px;
  --reveal-ease:cubic-bezier(.18,.65,.22,1);

  /* =====================
     HEADER（集約）
  ===================== */
  --header-h:78px;
  --header-pad-x:60px;
  --header-ink:#ffffff;
  --header-bg:transparent;
  --header-bg-scrolled:#1a1a1a;
  --header-shadow:0 10px 24px rgba(0,0,0,.35);

  /* =====================
     MENU（集約）
  ===================== */
  --menu-ink:rgba(232,232,232,.92);
  --menu-bg-alpha:.88;
  --menu-font:var(--font-en,"Cinzel",serif);
  --menu-letter:.18em;

  /* =====================
     MV GLOBAL DESIGN（統一）
     ※各ページ側で上書きOK
       - 例：--mv-filter: brightness(.86) contrast(1.05) saturate(.94);
  ===================== */
  --mv-filter:none;

  /* “限りなく透明に近いハイライト幕” */
  --mv-highlight: linear-gradient(
    to bottom,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02) 45%,
    rgba(0,0,0,.06)
  );
}

/* =========================================
   RESET
========================================= */

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-jp);
  color:var(--lux-black);
  background:#fff;
  font-size:var(--fz-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-weight:var(--fw-body);
}

body, button, input, textarea{
  font-variant-numeric: lining-nums;
}

/* =========================================
   LINK BASE（静寂設計）
========================================= */

a{
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:
    opacity var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

a:hover{ opacity:.75; }

/* CTAは独立制御 */
.vip-btn,
.vip-btn:hover{
  opacity:unset;
}

/* =========================================
   LAYOUT
========================================= */

.site{ width:100%; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

@media (max-width:768px){
  .container{ padding:0 var(--gutter-sm); }
}

.container.narrow{ max-width:var(--container-narrow); }
.container.wide{ max-width:var(--container-wide); }

/* =========================================
   SECTION SPACING
========================================= */

.section{ padding:var(--sec-y) 0; }

@media (max-width:768px){
  .section{ padding:var(--sec-y-sm) 0; }
}

/* =========================================
   TYPOGRAPHY
========================================= */

.eyebrow{
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--lux-soft);
  font-weight:400;
}

.title{
  font-family:var(--font-en);
  font-weight:500;
  letter-spacing:.16em;
  color:var(--lux-black);
  font-size:clamp(22px,2.6vw,34px);
}

.lead{
  font-size:15px;
  color:var(--lux-soft);
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  line-height:2.4;
  letter-spacing:var(--ls-body);
}

.hero-title{
  text-align:center;
  font-family:var(--font-en);
  font-weight:500;
  letter-spacing:.24em;
  font-size:clamp(32px,4vw,56px);
  text-transform:uppercase;
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1;
}

.kicker{
  text-align:center;
  font-family:var(--font-en);
  letter-spacing:.18em;
  color:var(--lux-soft);
}

/* =========================================
   SECTION HEAD
========================================= */

.section-head{ text-align:center; }
.section-head .eyebrow{ margin-bottom:10px; }
.section-head .title{ margin:0; }
.section-head + .section-body{ margin-top:var(--stack-3); }

.section-body{ text-align:center; }
.section-body .lead{ margin-top:var(--stack-2); }

/* =========================================
   STACK UTILITIES
========================================= */

.stack > * + *{ margin-top:var(--stack-2); }
.stack.tight > * + *{ margin-top:var(--stack-1); }
.stack.loose > * + *{ margin-top:var(--stack-3); }

/* =========================================
   CTA
========================================= */

.section-cta{
  text-align:center;
  margin-top:var(--stack-4);
}

@media (max-width:768px){
  .section-cta{ margin-top:var(--stack-3); }
}

.vip-btn{
  display:inline-block;
  text-decoration:none;
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cta-color);
  padding:6px 0;
  border-bottom:1px solid var(--cta-line);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.vip-btn:link,
.vip-btn:visited,
.vip-btn:hover,
.vip-btn:active{
  color:var(--cta-color);
  text-decoration:none;
}

.vip-btn:hover{
  opacity:.6;
  transform:translateY(-1px);
  border-bottom-color:var(--cta-line-hover);
}

.vip-btn:focus-visible{
  outline:2px solid rgba(0,0,0,.15);
  outline-offset:6px;
}

/* =========================================
   IMAGE FULL
========================================= */

.image-full{
  width:100%;
  height:70vh;
  overflow:hidden;
}

.image-full img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================
   REVEAL
========================================= */

.js-reveal .reveal-item{
  opacity:0;
  transform:translate3d(0,var(--reveal-y),0);
  filter:blur(var(--reveal-blur));
  transition:
    opacity var(--dur-3) var(--reveal-ease),
    transform var(--dur-3) var(--reveal-ease),
    filter var(--dur-3) var(--reveal-ease);
}

.js-reveal.is-inview .reveal-item{
  opacity:1;
  transform:none;
  filter:none;
}

@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal-item{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}

/* =========================================
   HEADER Responsive Variables
========================================= */

@media (max-width:768px){
  :root{
    --header-h:72px;
    --header-pad-x:28px;
  }
}

/* =========================================
   MV GLOBAL (FILTER + HIGHLIGHT)
   - “VIP質感”の薄いハイライト幕 + 画像フィルターを一括制御
   - 各ページCSSで --mv-filter / --mv-highlight を上書きOK
========================================= */

/* MVコンテナ：ブレンドをローカルに閉じ込める（安全策） */
.page-mv,
.recruit-mv,
.info-mv,
.vip-mv,
#mvGallery.mv-slider{
  isolation:isolate;
}

/* 画像フィルター一括（必要なら各ページで個別上書き） */
.page-mv img,
.recruit-mv__media img,
.info-mv__media img,
.vip-mv__media img,
#mvGallery.mv-slider img{
  filter:var(--mv-filter);
}

/* テキストが幕に負けないよう上に */
.page-mv__inner,
.recruit-mv__inner,
.info-mv__inner,
.vip-mv__overlay,
#mvGallery .mv-ui{
  z-index:6;
}

/* ハイライト幕（“透明に近い”） */
.page-mv::after,
.recruit-mv::after,
.info-mv::after,
.vip-mv::after,
#mvGallery.mv-slider::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--mv-highlight);
  mix-blend-mode:soft-light;
  opacity:1;
  z-index:3;
}

/* ========================================
   404 – MYTHOS
======================================== */

.page-404{
  padding-top: 120px;
  padding-bottom: 120px;
}

.page-404 .hero-title{
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: .12em;
}

.page-404 .kicker{
  letter-spacing: .3em;
  font-size: 12px;
  opacity: .6;
}

.page-404 .lead{
  margin-top: 24px;
}

.page-404 .vip-btn{
  margin-top: 40px;
}