/* ===========================================================
   Belle salon  -  style.css
   淡いグリーン×ホワイト／余白を活かした上品なデザイン
   =========================================================== */

:root{
  --green:        #8aab94;   /* メイン（やや濃いめ・文字やボタン用） */
  --green-mid:    #a8d5ba;   /* メイングリーン */
  --green-pale:   #e9f2ec;   /* 淡い背景 */
  --green-pale2:  #f3f8f4;
  --cream:        #faf8f3;   /* ベージュ系背景 */
  --gold:         #c2a36b;   /* アクセント（控えめに） */
  --ink:          #4a4a44;   /* 本文テキスト */
  --ink-soft:     #7c7c74;
  --white:        #ffffff;
  --shadow:       0 18px 50px rgba(120,130,110,.14);
  --radius:       18px;
  --maxw:         1120px;
  --serif:        "Noto Serif JP", serif;
  --sans:         "Noto Sans JP", sans-serif;
  --script:       "Cormorant Garamond", serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:78px; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  font-weight:400;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* ---------- 共通レイアウト ---------- */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px 24px;
}
.section__head{ text-align:center; margin-bottom:54px; }
.section__en{
  font-family:var(--script);
  font-size:1rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:10px;
}
.section__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,4.6vw,2.1rem);
  letter-spacing:.08em;
  color:var(--ink);
  position:relative;
  display:inline-block;
  padding-bottom:18px;
}
.section__title::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:46px; height:2px; background:var(--gold);
  transform:translateX(-50%);
}
.section__desc{ margin-top:18px; color:var(--ink-soft); font-size:.92rem; }

.pc-only{ display:inline; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;
  padding:16px 42px;
  border-radius:999px;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.14em;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn--primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 26px rgba(138,171,148,.45);
}
.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(138,171,148,.55);
  background:#7c9e86;
}

/* ===========================================================
   ヘッダー
   =========================================================== */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  transition:box-shadow .3s ease;
}
/* 背景のぼかしは疑似要素に分離（headerにbackdrop-filterを付けると
   子のposition:fixedがheader基準になり、モバイルメニューが全画面に
   ならない不具合が出るため） */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
}
.header.scrolled{ box-shadow:0 4px 20px rgba(0,0,0,.06); }
.header__inner{
  max-width:1240px; margin:0 auto;
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.header__logo img{ height:70px; width:auto; }

.nav__list{ display:flex; align-items:center; gap:30px; list-style:none; }
.nav__link{
  font-family:var(--serif);
  font-size:.95rem; letter-spacing:.08em; color:var(--ink);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--green); transition:width .3s ease;
}
.nav__link:hover{ color:var(--green); }
.nav__link:hover::after{ width:100%; }
.nav__link--btn{
  background:var(--green); color:#fff;
  padding:9px 24px; border-radius:999px;
}
.nav__link--btn::after{ display:none; }
.nav__link--btn:hover{ background:#7c9e86; color:#fff; }

/* ハンバーガー */
.hamburger{
  display:none; flex-direction:column; gap:6px;
  width:34px; height:30px; background:none; border:none; cursor:pointer;
  justify-content:center; z-index:1100;
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--ink);
  border-radius:2px; transition:transform .35s ease, opacity .3s ease;
}
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ===========================================================
   ヒーロー
   =========================================================== */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:120px 24px 90px;
}
/* スライドショー：3枚をやさしくクロスフェード（JSで制御） */
.hero__slides{
  position:absolute; inset:0; background:var(--green-pale);
}
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s ease;
}
.hero__slide.is-active{ opacity:1; }
/* 黒フィルターの代わりに、ごく淡い白ベールで全体をやわらかく */
.hero__slides::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.24));
}

/* 文字はすりガラス調のパネルに乗せ、優しい雰囲気のまま読みやすく */
.hero__inner{
  position:relative; z-index:2; max-width:620px;
  background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px;
  padding:54px 50px 48px;
  box-shadow:0 24px 60px rgba(90,110,85,.22);
}
.hero__sub{
  font-size:.8rem; letter-spacing:.24em; margin-bottom:20px; color:var(--green);
}
.hero__title{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.7rem,5.4vw,2.3rem);
  line-height:1.75; letter-spacing:.1em;
}
.hero__lead{
  margin:24px auto 16px; font-size:clamp(.88rem,2.4vw,1rem);
  font-weight:400; line-height:2; color:var(--ink-soft);
}
.hero__services{
  list-style:none; margin:0 auto 30px; padding:0;
  display:flex; flex-direction:column; gap:4px;
}
.hero__services li{
  font-size:clamp(.8rem,2vw,.9rem); color:var(--green);
  font-family:var(--serif); letter-spacing:.12em; line-height:1.8;
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid rgba(90,110,85,.55);
  border-radius:14px; z-index:2;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; width:4px; height:8px;
  margin-left:-2px; background:rgba(90,110,85,.85); border-radius:2px;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 80%{opacity:0;transform:translateY(14px)} 100%{opacity:0} }

/* ===========================================================
   コンセプト
   =========================================================== */
.concept{ position:relative; }
.concept__body{
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
}
.concept__img img{
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.concept__message{
  font-family:var(--serif); font-size:1.12rem; line-height:2.1;
  color:var(--green); margin-bottom:24px; font-weight:500;
}
.concept__text p{ margin-bottom:18px; font-size:.95rem; }
.concept__note{
  background:var(--green-pale); border-left:3px solid var(--green-mid);
  padding:18px 22px; border-radius:8px; font-size:.9rem; margin-top:8px;
}
.concept__note strong{ color:var(--green); }

/* ===========================================================
   背景ロゴ（右側テキストの下に大きく薄く・文字に少し重なる）
   =========================================================== */
.brandmark{
  pointer-events:none; line-height:0;
  margin-top:-22px;            /* 文章の下に少しだけ重ねる */
}
.brandmark img{
  width:100%; max-width:560px; height:auto; display:block;
  opacity:.16; mix-blend-mode:multiply;
}

/* ===========================================================
   ギャラリー（横に流れるスライド）
   =========================================================== */
.gallery{
  overflow:hidden; width:100%; padding:14px 0;
  /* 左右の端をやわらかくフェード */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery__track{
  display:flex; width:max-content;
  animation:galleryScroll 48s linear infinite;
}
.gallery:hover .gallery__track{ animation-play-state:paused; }
.gallery__set{ display:flex; align-items:center; }
.gallery__item{
  flex:0 0 auto; height:300px; margin:0 10px;
  border-radius:var(--radius); overflow:hidden;
}
.gallery__item img{
  height:100%; width:auto; display:block; object-fit:contain;
}
/* 花は小さな丸 */
.gallery__item--flower{
  height:200px; width:200px;
  border-radius:50%;
  flex-shrink:0;
}
.gallery__item--flower img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
@keyframes galleryScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ===========================================================
   メニュー
   =========================================================== */
.menu{ background:transparent; }
.menu__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start;
}
.menu__card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.menu__thumb{ height:200px; overflow:hidden; }
.menu__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.menu__thumb--bottom img{ object-position:bottom; }
.menu__card:hover .menu__thumb img{ transform:scale(1.05); }
.menu__content{ padding:28px 26px 32px; }
.menu__cat{
  font-family:var(--serif); font-size:1.4rem; font-weight:500;
  letter-spacing:.1em; color:var(--green); text-align:center;
}
.menu__lead{ text-align:center; font-size:.85rem; color:var(--ink-soft); margin-top:6px; }
.menu__tag{
  display:block; margin:14px auto 0; text-align:center; width:100%;
  font-size:.74rem; color:var(--gold); letter-spacing:.1em;
}
.menu__subcat{
  font-family:var(--serif); font-size:1rem; color:var(--ink);
  margin:24px 0 8px; padding-left:14px; position:relative; font-weight:500;
}
.menu__subcat::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--green-mid);
}
.price{ list-style:none; }
.price li{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  padding:11px 0; border-bottom:1px dashed #e3e0d6; font-size:.9rem;
}
.price li:last-child{ border-bottom:none; }
.price li span:first-child{ line-height:1.5; }
.price li em{
  display:inline-block; font-style:normal; font-size:.72rem;
  color:#fff; background:var(--green-mid); border-radius:4px;
  padding:1px 7px; margin-left:8px; vertical-align:middle;
}
.price__yen{
  font-family:var(--serif); font-weight:500; color:var(--green);
  white-space:nowrap; font-size:1.02rem;
}

/* 完全プライベートサロンの説明＋予約導線（メニュー下） */
.menu__private{
  max-width:760px; margin:56px auto 0; text-align:center;
}
.menu__private p{
  background:var(--green-pale); border-radius:12px;
  padding:26px 30px; font-size:.92rem; line-height:2; color:var(--ink);
}
.menu__private strong{ color:var(--green); }
.menu__cta{ margin-top:30px; }

/* ===========================================================
   スタッフ
   =========================================================== */
.staff{ position:relative; background:var(--cream); }
/* 写真を画面に固定（sticky）し、文字がその上を流れて読める */
.staff__media{
  position:sticky; top:0; height:100vh; width:100%;
  background-size:cover; background-position:78% 45%;
}
/* 文字側だけをやさしく白でぼかし、右下のお顔には重ねない */
.staff__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(250,248,243,.95) 0%,
    rgba(250,248,243,.88) 28%,
    rgba(250,248,243,.55) 50%,
    rgba(250,248,243,0) 72%);
}
.staff__content{
  position:relative; z-index:2; margin-top:-100vh;
  min-height:142vh; display:flex; align-items:center;
}
.staff__col{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px;
}
.staff__col > *{ max-width:460px; }
.staff__heading{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,4.6vw,2.1rem); letter-spacing:.08em;
  color:var(--ink); margin:8px 0 26px; padding-bottom:18px; position:relative;
}
.staff__heading::after{
  content:""; position:absolute; left:0; bottom:0;
  width:46px; height:2px; background:var(--gold);
}
.staff__role{
  font-family:var(--script); letter-spacing:.2em; color:var(--green); font-size:1.05rem;
}
.staff__name{
  font-family:var(--serif); font-size:1.5rem; font-weight:500;
  margin:4px 0 20px; letter-spacing:.06em; color:var(--ink);
}
.staff__col p{ font-size:.95rem; margin-bottom:16px; color:var(--ink); }

/* ===========================================================
   アクセス
   =========================================================== */
.access__body{
  display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:stretch;
}
.access__info{
  background:var(--green-pale2); border-radius:var(--radius); padding:40px 38px;
  display:flex; align-items:center;
}
.info{ width:100%; }
.info > div{
  display:grid; grid-template-columns:96px 1fr; gap:10px;
  padding:15px 0; border-bottom:1px solid #e4e9e3;
}
.info > div:last-child{ border-bottom:none; }
.info dt{
  font-family:var(--serif); color:var(--green); font-size:.9rem; font-weight:500;
}
.info dd{ font-size:.92rem; }
.info dd a{ color:var(--ink); border-bottom:1px solid var(--green-mid); }
.info dd a:hover{ color:var(--green); }
.access__map{
  position:relative;
  min-height:380px; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:var(--green-pale2);
}
.access__map iframe{ width:100%; height:100%; min-height:380px; display:block; }
.access__maplink{
  position:absolute; right:12px; bottom:12px;
  background:rgba(255,255,255,.95); color:var(--green);
  font-size:.78rem; padding:7px 14px; border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.12); letter-spacing:.06em;
}
.access__maplink:hover{ background:#fff; }

/* ===========================================================
   予約・お問い合わせ
   =========================================================== */
.reserve{ background:transparent; }
.reserve__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
/* 全カード統一：白地に緑の縁取り。タップ／ホバーで緑に */
.reserve__card{
  background:#fff; border:1.5px solid var(--green-mid); border-radius:var(--radius);
  padding:30px 26px; display:flex; flex-direction:column; gap:6px;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow:0 6px 18px rgba(120,130,110,.07);
}
.reserve__label{
  font-family:var(--script); font-size:.95rem; letter-spacing:.16em;
  color:var(--green);
}
.reserve__name{ font-family:var(--serif); font-size:1.18rem; color:var(--ink); }
.reserve__note{ font-size:.78rem; color:var(--ink-soft); }

.reserve__card:hover,
.reserve__card:focus-visible,
.reserve__card:active{
  transform:translateY(-5px); box-shadow:var(--shadow);
  background:var(--green); border-color:var(--green);
}
.reserve__card:hover .reserve__label,
.reserve__card:hover .reserve__name,
.reserve__card:active .reserve__label,
.reserve__card:active .reserve__name{ color:#fff; }
.reserve__card:hover .reserve__note,
.reserve__card:active .reserve__note{ color:rgba(255,255,255,.85); }

/* ===========================================================
   フッター
   =========================================================== */
.footer{ background:var(--green-pale); margin-top:40px; }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; padding:56px 24px 36px;
  text-align:center;
}
.footer__logo{ height:222px; width:auto; margin:0 auto 18px; }
.footer__addr{ font-size:.85rem; color:var(--ink-soft); margin-bottom:22px; }
.footer__sns{
  display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:28px;
}
.footer__sns a{ color:var(--green); transition:color .3s, transform .3s; }
.footer__sns a:hover{ color:#6f9079; transform:translateY(-2px); }
.footer__reserve{
  font-family:var(--serif); border:1px solid var(--green); color:var(--green);
  padding:9px 26px; border-radius:999px; font-size:.9rem; transition:all .3s;
}
.footer__reserve:hover{ background:var(--green); color:#fff; }
.footer__copy{
  font-family:var(--script); font-size:.8rem; letter-spacing:.1em;
  color:var(--ink-soft); border-top:1px solid #d9e4dc; padding-top:22px;
}

/* ===========================================================
   スクロールアニメーション
   =========================================================== */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

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

/* ===========================================================
   レスポンシブ（スマートフォン優先）
   =========================================================== */
@media (max-width:900px){
  .concept__body{ grid-template-columns:1fr; gap:34px; }
  .concept__img img{ aspect-ratio:16/10; }
  .menu__grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .access__body{ grid-template-columns:1fr; }
  .reserve__grid{ grid-template-columns:repeat(2,1fr); }

  /* スタッフ：縦長画面では文字を左上、お顔を右下に分けて重ねない */
  .staff__media{ background-position:88% 96%; }
  .staff__scrim{
    background:linear-gradient(160deg,
      rgba(250,248,243,.96) 0%,
      rgba(250,248,243,.9) 38%,
      rgba(250,248,243,.55) 58%,
      rgba(250,248,243,0) 78%);
  }
  .staff__content{ min-height:150vh; align-items:flex-start; }
  .staff__col{ padding-top:15vh; }
  .staff__col > *{ max-width:68%; }
  .staff__col p{ font-size:.9rem; }
}

@media (max-width:680px){
  .section{ padding:70px 20px; }
  .pc-only{ display:none; }
  .gallery__item{ height:220px; margin:0 7px; }
  .gallery__track{ animation-duration:36s; }

  /* ヒーロー：パネルと文字をスマホ幅に最適化 */
  .hero__inner{ padding:40px 24px 36px; border-radius:22px; }
  .hero__title{ font-size:1.5rem; letter-spacing:.05em; line-height:1.85; }
  .hero__sub{ letter-spacing:.16em; }

  /* ナビをハンバーガーに */
  .hamburger{ display:flex; }
  .nav{
    position:fixed; inset:0; background:rgba(250,248,243,.98);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:1050;
  }
  .nav.open{ opacity:1; pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:28px; text-align:center; }
  .nav__link{ font-size:1.2rem; }
  .nav__link--btn{ padding:12px 36px; font-size:1rem; }

  .concept__gallery{ grid-template-columns:1fr 1fr; gap:12px; }
  .concept__gallery figure:first-child{ grid-column:1 / -1; }
  .reserve__grid{ grid-template-columns:1fr; }
  .footer__sns{ flex-direction:column; gap:18px; }
}

@media (max-width:380px){
  .header__logo img{ height:56px; }
  .hero__title{ line-height:1.6; }
}