@charset "UTF-8";
/*
Theme Name: AKANE
Template: Mythos-core
Version: 1.2
*/

/* =====================================================
  AKANE – Brand Tokens (diff only)
===================================================== */
:root{
  /* brand */
  --brand-ink:#1f1f1f;
  --brand-deep:#111;
  --brand-muted:rgba(0,0,0,.62);
  --brand-line:rgba(0,0,0,.10);
  --brand-bg:#fbfbfa;

  /* ★Cartier Red */
  --brand-accent:#660000;

  /* body typography (AKANE tuning) */
  --akane-body-size:15px;
  --akane-body-lh:2.35;
  --akane-body-track:.08em;

  /* CTA（全ページ統一：ミトス同等の“少しだけ出る” + もう少し細く） */
  --cta-ink:rgba(0,0,0,.78);
  --cta-pad-x:8px;
  --cta-pad-b:12px;

  --cta-line-h:0.8px;        /* ← 1pxより繊細 */
  --cta-overhang:10px;       /* ← テキストより少しだけ出す */
  --cta-overhang-hover:16px; /* ← hover時だけ少し伸びる */

  /* Hamburger */
  --ham-w:30px;
  --ham-h:1px;
  --ham-gap:4px;
}

body{
  background:var(--brand-bg);
  color:var(--brand-ink);
}

/* =====================================================
  Header (diff)
  - できるだけ !important を使わず「必要最小限」
===================================================== */
#siteHeader.site-header{
  padding-top:12px;
  padding-bottom:12px;
}

#siteHeader{
  background:transparent;
  background-color:transparent;
}

/* scrolledは親header.css側が --header-bg-scrolled で制御できるのが理想。
   現状の互換用としてここは残す（強制が必要なら !important を戻す） */
#siteHeader.is-scrolled{
  background: var(--header-bg-scrolled, #111);
  background-color: var(--header-bg-scrolled, #111);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
}

/* =====================================================
  Logo (diff)
===================================================== */
.site-header__logo img{
  height:38px;
  width:auto;
  display:block;
  image-rendering:-webkit-optimize-contrast;
  transition:opacity .35s ease, transform .35s ease;
}
@media(max-width:768px){
  .site-header__logo img{ height:30px; }
}
.site-header__logo:hover img{
  opacity:.75;
  transform:translateY(1px);
}

/* Fix: header logo double/ghost (必要最小限に圧縮) */
#siteHeader .site-header__logo img:nth-of-type(2),
#siteHeader .site-header__logo picture img:nth-of-type(2),
#siteHeader .site-header__logo .logo-dark,
#siteHeader .site-header__logo .is-dark,
#siteHeader .site-header__logo img.logo-dark,
#siteHeader .site-header__logo img.is-dark{
  display:none;
}

/* =====================================================
  Footer (diff)
===================================================== */
.footer-logo img{
  height:44px;
  width:auto;
}

/* =====================================================
  Default link underline (except controls/buttons)
===================================================== */
.site-content a:not(.vip-btn):not(.system-summary__cta):not(.system-card):not(.site-header__logo):not(.gallery-prev):not(.gallery-next):not(.mv-prev):not(.mv-next){
  position:relative;
  text-decoration:none;
}
.site-content a:not(.vip-btn):not(.system-summary__cta):not(.system-card):not(.site-header__logo):not(.gallery-prev):not(.gallery-next):not(.mv-prev):not(.mv-next)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:var(--brand-accent);
  transition:width .3s ease;
}
.site-content a:not(.vip-btn):not(.system-summary__cta):not(.system-card):not(.site-header__logo):not(.gallery-prev):not(.gallery-next):not(.mv-prev):not(.mv-next):hover::after{
  width:100%;
}

/* =====================================================
  CTA unify (vip-btn / system cta)
  - 親の .vip-btn を “子テーマ差分” で統一
  - bodyクラス依存をやめて、WP標準でも確実に効く
===================================================== */
a.vip-btn,
a.system-summary__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family:var(--font-en,"Cinzel",serif);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--cta-ink);
  text-decoration:none;

  background:transparent;
  border:0;
  box-shadow:none;

  position:relative;
  padding:10px var(--cta-pad-x) var(--cta-pad-b);

  transition:opacity .35s ease, transform .35s ease;
}

/* underline */
a.vip-btn::after,
a.system-summary__cta::after{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);

  height:var(--cta-line-h);
  width:calc(100% + var(--cta-overhang));

  background:var(--brand-accent);
  opacity:1;

  transition:opacity .35s ease, width .45s ease;
}

a.vip-btn:hover,
a.system-summary__cta:hover{
  opacity:.72;
  transform:translateY(1px);
}
a.vip-btn:hover::after,
a.system-summary__cta:hover::after{
  width:calc(100% + var(--cta-overhang-hover));
}

/* remove unwanted red lines (TOPカードなどでリンク下線が邪魔な場合) */
.page-home a[href*="vip"]::after,
.page-home a[href*="recruit"]::after,
.page-home a[href*="system"]::after,
.page-home a[href*="company"]::after,
.page-home a[href*="information"]::after,
.system-card__meta .meta-cta::after{
  content:none;
  display:none;
}

/* =====================================================
  TOP – ABOUT stack fix (diff)
===================================================== */
#about .about-akane__body.stack > * + *{
  margin-top:0;
}

/* =====================================================
  Typography (AKANE tuning)
===================================================== */
.about-akane__body{
  width:100%;
  max-width:min(860px,92vw);
  margin:0 auto;
  text-align:center;
}
.about-akane__body p,
.vip-text p{
  font-size:var(--akane-body-size);
  line-height:var(--akane-body-lh);
  letter-spacing:var(--akane-body-track);
  color:var(--brand-muted);
  margin:0;
}
.about-akane__body p + p,
.vip-text p + p{
  margin-top:18px;
}
@media (max-width:768px){
  .about-akane__body p,
  .vip-text p{
    font-size:14px;
    line-height:2.15;
  }
  .about-akane__body p + p,
  .vip-text p + p{
    margin-top:14px;
  }
}

/* =====================================================
  VIP (diff)
===================================================== */
.vip{ background:var(--brand-bg); }
.vip-text{
  max-width:640px;
  margin:0 auto 44px;
  text-align:center;
}

/* =====================================================
  Hamburger (diff)
===================================================== */
.site-header__toggle span,
.menu-toggle span,
.hamburger span{
  height:var(--ham-h);
  width:var(--ham-w);
}
.site-header__toggle span + span,
.menu-toggle span + span,
.hamburger span + span{
  margin-top:var(--ham-gap);
}

/* =====================================================
  SYSTEM PAGE – Price Table (AKANE diff)
===================================================== */
.page-system .system-dl{
  max-width:980px;
  border-top:1px solid var(--brand-line);
  text-align:left;
}
.page-system .system-dl__row{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 220px;
  gap:28px;
  padding:18px 0;
  border-bottom:1px solid var(--brand-line);
  align-items:center;
}
.page-system .system-dl dt{
  font-size:14px;
  line-height:2.0;
  letter-spacing:.06em;
  color:color-mix(in srgb, var(--brand-ink) 74%, transparent);
  font-weight:400;
}
.page-system .system-dl dd{
  margin:0;
  text-align:right;
  font-family:var(--font-en,"Cinzel",serif);
  font-size:14px;
  line-height:1.9;
  letter-spacing:.10em;
  color:color-mix(in srgb, var(--brand-ink) 72%, transparent);
  font-variant-numeric:tabular-nums;
}
.page-system .system-h{
  margin-top:56px;
  text-align:center;
  font-family:var(--font-jp,"Cormorant Garamond",serif);
  font-weight:400;
  letter-spacing:.12em;
  color:color-mix(in srgb, var(--brand-ink) 78%, transparent);
}
@media (max-width:768px){
  .page-system .system-dl{ margin-top:34px; }
  .page-system .system-dl__row{
    grid-template-columns:1fr;
    gap:10px;
    padding:14px 0;
  }
  .page-system .system-dl dd{
    text-align:left;
    letter-spacing:.08em;
  }
}

/* =====================================================
  CONTACT – Submit Button (AKANE diff)
  - CTAと同じ思想で統一（underline token寄せ）
===================================================== */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
form input[type="submit"],
form button[type="submit"]{
  background:transparent;
  border:0;
  box-shadow:none;

  font-family:var(--font-en,"Cinzel",serif);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--cta-ink);
  padding:10px var(--cta-pad-x) var(--cta-pad-b);

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:opacity .35s ease, transform .35s ease;
}

/* underline（CTA token に寄せて統一） */
.wpcf7 input[type="submit"]::after,
.wpcf7 button[type="submit"]::after,
form input[type="submit"]::after,
form button[type="submit"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:var(--cta-line-h);
  width:calc(100% + var(--cta-overhang));
  background:var(--brand-accent);
  transition:width .35s ease, opacity .35s ease;
}

/* hover */
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover{
  opacity:.72;
  transform:translateY(1px);
}
.wpcf7 input[type="submit"]:hover::after,
.wpcf7 button[type="submit"]:hover::after,
form input[type="submit"]:hover::after,
form button[type="submit"]:hover::after{
  width:calc(100% + var(--cta-overhang-hover));
}

/* =====================================================
  CTA hover animation OFF（伸びない / 沈むだけ）
===================================================== */
a.vip-btn::after,
a.system-summary__cta::after,
.wpcf7 input[type="submit"]::after,
.wpcf7 button[type="submit"]::after,
form input[type="submit"]::after,
form button[type="submit"]::after{
  /* widthアニメを殺す */
  transition: opacity .25s ease;
}

/* hover時に幅を変えない（=伸びない） */
a.vip-btn:hover::after,
a.system-summary__cta:hover::after,
.wpcf7 input[type="submit"]:hover::after,
.wpcf7 button[type="submit"]:hover::after,
form input[type="submit"]:hover::after,
form button[type="submit"]:hover::after{
  width: calc(100% + var(--cta-overhang)); /* hoverでも同じ幅に固定 */
}

/* hoverは沈むだけ（今のままでOKなら不要だけど、静かにするなら） */
a.vip-btn:hover,
a.system-summary__cta:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover{
  transform: translateY(1px);
  opacity: .85; /* .72 が強いなら .85 が上品 */
}

/* =====================================================
   CTA – 
===================================================== */
a.system-summary__cta:hover,
a.vip-btn:hover,
a.vip-btn:focus,
a.system-summary__cta:focus{
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================
   VIP MV Title – Match Top Page Font
========================================= */
.page-vip-room .vip-mv__content h1{
  font-family: var(--font-en, "Cinzel", serif);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* =====================================================
  REVEAL
===================================================== */
.js-reveal .reveal-item{
  opacity:0;
  transform:translate3d(0,16px,0);
  filter:blur(4px);
  transition:
    opacity 1400ms cubic-bezier(.18,.65,.22,1),
    transform 1400ms cubic-bezier(.18,.65,.22,1),
    filter 1400ms cubic-bezier(.18,.65,.22,1);
}

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

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