@charset "utf-8";
/* =========================================================
   Club Raffine — 北新地 高級クラブ
   配色: アイボリー × ゴールド / 見出し: 明朝 / 本文: ゴシック
   ========================================================= */

:root{
  --ivory:      #F4EFE7;   /* ベース（象牙） */
  --ivory-deep: #ECE3D4;   /* やや濃いシャンパン */
  --paper:      #FBF8F3;   /* カード等の明色 */
  --ink:        #3A322A;   /* 本文（深いブラウン） */
  --ink-soft:   #6B5F50;   /* 補助テキスト */
  --gold:       #B08D4F;   /* ゴールド */
  --gold-lt:    #C9A86A;   /* 明ゴールド */
  --gold-dk:    #8E6F39;   /* 濃ゴールド */
  --ember:      #C8632B;   /* 差し色（羽根ランプのオレンジ）※1点使い */
  --night:      #2A2520;   /* ヒーロー暗部 */

  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 56px);

  --f-disp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-latin: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* ---- layout helpers ---- */
.wrap{ width:min(100% - var(--gut)*2, var(--maxw)); margin-inline:auto; }
.section{ padding-block:clamp(72px, 12vw, 140px); position:relative; }

/* ---- eyebrow / headings ---- */
.eyebrow{
  font-family:var(--f-latin);
  font-size:.82rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold-dk);
  text-align:center;
  margin:0 0 1.1em;
  padding-left:.42em;
}
.eyebrow::before{
  content:""; display:block; width:34px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto 1.4em;
}
.headline{
  font-family:var(--f-disp);
  font-weight:500;
  text-align:center;
  line-height:1.5;
  letter-spacing:.08em;
  font-size:clamp(1.55rem, 4.4vw, 2.45rem);
  margin:0 0 .8em;
}
.lead{
  text-align:center;
  max-width:30em;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:clamp(.95rem,2.4vw,1.02rem);
}

/* wing divider motif (signature) */
.wing{
  display:block; width:clamp(120px,22vw,180px); height:auto;
  margin:0 auto clamp(28px,5vw,40px); opacity:.9;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vw,22px) var(--gut);
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease;
}
.site-header.is-solid{
  background:rgba(244,239,231,.92);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 1px 0 rgba(176,141,79,.22);
  padding-block:10px;
}
.site-header .brand{ position:relative; display:block; line-height:0; }
.site-header .brand img{ height:clamp(40px,6vw,52px); width:auto; transition:height .5s ease, opacity .4s ease; }
.site-header .brand__dark{ position:absolute; inset:0; opacity:0; }
.site-header.is-solid .brand img{ height:clamp(36px,5vw,44px); }
.site-header.is-solid .brand__gold{ opacity:0; }
.site-header.is-solid .brand__dark{ opacity:1; }
.header-sns{ display:flex; gap:14px; align-items:center; }
.header-sns a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(176,141,79,.5); border-radius:50%;
  color:var(--gold-dk); transition:.3s;
}
.header-sns a:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.header-sns svg{ width:17px; height:17px; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  color:#fff; overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:#cdbfa8 center/cover no-repeat;
  background-image:url("../img/hero.jpg");
  animation:heroZoom 18s ease-out forwards;
}
@media (max-width:680px){
  .hero__bg{ background-image:url("../img/hero_mobile.jpg"); }
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(20,16,12,.12), rgba(20,16,12,.62) 100%),
    linear-gradient(180deg, rgba(20,16,12,.34) 0%, rgba(20,16,12,.10) 38%, rgba(20,16,12,.66) 100%);
}
.hero__inner{ position:relative; z-index:1; padding:0 var(--gut); }
.hero__logo{ width:clamp(210px,44vw,300px); margin:0 auto clamp(20px,4vw,32px); filter:drop-shadow(0 2px 16px rgba(0,0,0,.45)); }
.hero__logo img{ width:100%; }
.hero__catch{
  font-family:var(--f-disp); font-weight:500;
  font-size:clamp(1.7rem,6vw,3.2rem);
  letter-spacing:.14em; line-height:1.6; margin:0;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.hero__catch .em{ color:var(--gold-lt); }
.hero__sub{
  font-family:var(--f-latin); letter-spacing:.34em; text-transform:uppercase;
  font-size:.78rem; margin-top:1.6em; color:rgba(255,255,255,.82);
}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-latin); font-size:.62rem; letter-spacing:.32em; color:rgba(255,255,255,.8);
}
.scroll-cue span{ width:1px; height:46px; background:linear-gradient(180deg,var(--gold-lt),transparent); animation:cue 2.2s ease-in-out infinite; }

/* =========================================================
   Concept
   ========================================================= */
.concept{ background:var(--ivory); }
.concept__body{
  font-family:var(--f-disp);
  text-align:center;
  font-size:clamp(1.05rem,3vw,1.32rem);
  line-height:2.5; letter-spacing:.12em; color:var(--ink);
  margin:0 auto; max-width:24em; font-weight:400;
}
.concept__figs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,2.4vw,22px); margin-top:clamp(40px,7vw,68px);
}
.concept__figs figure{ margin:0; overflow:hidden; border-radius:2px; }
.concept__figs img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.1s ease; }
.concept__figs figure:hover img{ transform:scale(1.05); }

/* =========================================================
   Interior gallery
   ========================================================= */
.interior{ background:var(--ivory-deep); }
.gallery{
  display:grid; gap:clamp(12px,2vw,18px);
  grid-template-columns:repeat(6,1fr);
  margin-top:clamp(40px,6vw,60px);
}
.gallery figure{ position:relative; margin:0; overflow:hidden; border-radius:2px; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s ease; }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:26px 18px 14px;
  font-family:var(--f-latin); letter-spacing:.26em; text-transform:uppercase;
  font-size:.72rem; color:#fff;
  background:linear-gradient(0deg, rgba(20,16,12,.6), transparent);
}
/* asymmetric tiling */
.g-a{ grid-column:span 4; aspect-ratio:16/10; }
.g-b{ grid-column:span 2; aspect-ratio:3/4; }
.g-c{ grid-column:span 2; aspect-ratio:3/4; }
.g-d{ grid-column:span 2; aspect-ratio:3/4; }
.g-e{ grid-column:span 2; aspect-ratio:3/4; }
.g-f{ grid-column:span 4; aspect-ratio:16/10; }

/* =========================================================
   Recruit
   ========================================================= */
.recruit{
  position:relative; background:var(--night); color:#F4EFE7; overflow:hidden;
}
.recruit__bg{
  position:absolute; inset:0; z-index:0;
  background:url("../img/g_wings_b.jpg") center/cover no-repeat;
  opacity:.16;
}
.recruit__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,37,32,.6), rgba(42,37,32,.92)); }
.recruit .wrap{ position:relative; z-index:1; }
.recruit .eyebrow{ color:var(--gold-lt); }
.recruit .eyebrow::before{ background:linear-gradient(90deg,transparent,var(--gold-lt),transparent); }
.recruit .headline{ color:#FBF8F3; }
.recruit__lead{
  text-align:center; max-width:28em; margin:0 auto clamp(40px,6vw,56px);
  color:rgba(244,239,231,.86); font-size:clamp(.95rem,2.4vw,1.04rem);
}
.recruit__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px);
  align-items:start; max-width:880px; margin-inline:auto;
}
.perks{ list-style:none; margin:0; padding:0; }
.perks li{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 0; border-bottom:1px solid rgba(201,168,106,.22);
  font-size:clamp(.98rem,2.4vw,1.08rem); letter-spacing:.04em;
}
.perks li:first-child{ border-top:1px solid rgba(201,168,106,.22); }
.perks svg{ flex:none; width:20px; height:20px; margin-top:3px; color:var(--gold-lt); }
.salary{
  background:linear-gradient(160deg, rgba(201,168,106,.14), rgba(201,168,106,.04));
  border:1px solid rgba(201,168,106,.34); border-radius:4px;
  padding:clamp(26px,4vw,34px); text-align:center;
}
.salary__label{ font-family:var(--f-latin); letter-spacing:.34em; text-transform:uppercase; color:var(--gold-lt); font-size:.74rem; margin:0 0 .7em; }
.salary__amount{ font-family:var(--f-disp); font-size:clamp(2rem,7vw,2.7rem); line-height:1.1; color:#FBF8F3; margin:0; letter-spacing:.04em; }
.salary__amount small{ font-size:.5em; letter-spacing:.06em; }
.salary__note{ margin:.9em 0 0; font-size:.82rem; color:rgba(244,239,231,.7); }
.recruit__cta{ text-align:center; margin-top:clamp(44px,6vw,60px); }
.recruit__cta p{ margin:0 0 1.4em; font-family:var(--f-disp); font-size:clamp(1.1rem,3vw,1.3rem); letter-spacing:.1em; }

/* LINE button (差し色: emberは使わず公式グリーンで信頼感、ただし主役CTAとして強調) */
.btn-line{
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 40px; border-radius:999px;
  background:#06C755; color:#fff; font-weight:700; letter-spacing:.08em;
  font-size:1.02rem; box-shadow:0 10px 30px rgba(6,199,85,.32);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-line:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(6,199,85,.42); }
.btn-line svg{ width:22px; height:22px; }
.recruit__age{ text-align:center; margin-top:2.6em; font-size:.74rem; letter-spacing:.06em; color:rgba(244,239,231,.55); }

/* =========================================================
   Access
   ========================================================= */
.access{ background:var(--ivory); }
.access__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px);
  margin-top:clamp(40px,6vw,60px); align-items:stretch;
}
.access__info dl{ margin:0; }
.access__info .name{
  font-family:var(--f-disp); font-size:clamp(1.3rem,3.4vw,1.6rem);
  letter-spacing:.1em; margin:0 0 1.2em; color:var(--ink);
}
.access__row{ display:flex; gap:18px; padding:14px 0; border-bottom:1px solid rgba(176,141,79,.24); }
.access__row dt{
  flex:none; width:5.5em; color:var(--gold-dk);
  font-family:var(--f-latin); letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; padding-top:.35em;
}
.access__row dd{ margin:0; font-size:1rem; line-height:1.8; }
.access__row dd a{ color:var(--ink); border-bottom:1px solid rgba(176,141,79,.5); }
.map{ position:relative; min-height:300px; border-radius:3px; overflow:hidden; box-shadow:0 12px 34px rgba(58,50,42,.14); }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.92) contrast(.98); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--night); color:#E9E0D2; text-align:center; padding:clamp(56px,9vw,80px) var(--gut) 40px; }
.site-footer__logo{ width:clamp(170px,36vw,210px); margin:0 auto clamp(24px,4vw,32px); }
.site-footer__logo img{ width:100%; }
.footer-sns{ display:flex; gap:16px; justify-content:center; margin-bottom:30px; }
.footer-sns a{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid rgba(201,168,106,.45); border-radius:50%; color:var(--gold-lt); transition:.3s;
}
.footer-sns a:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.footer-sns svg{ width:19px; height:19px; }
.site-footer small{ display:block; color:rgba(233,224,210,.5); font-size:.72rem; letter-spacing:.14em; font-family:var(--f-latin); }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  .recruit__grid{ grid-template-columns:1fr; gap:34px; }
  .access__grid{ grid-template-columns:1fr; }
  .map{ min-height:280px; order:-1; }
}
@media (max-width:680px){
  /* gallery → 2 columns */
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g-a,.g-f{ grid-column:span 2; aspect-ratio:16/11; }
  .g-b,.g-c,.g-d,.g-e{ grid-column:span 1; aspect-ratio:3/4; }
  .concept__figs{ gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__bg{ animation:none; }
}

/* keyframes */
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }