/* Hero */
.hero{position:relative; isolation:isolate; border-bottom:1px solid var(--line)}
.hero-media{position:absolute; inset:0; z-index:-1; opacity:.26}
.hero-video{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(105%) brightness(55%)}
.hero-inner{padding:92px 0 84px}
.hero-title{font-size:clamp(1.6rem, 2.3vw + 1rem, 2.8rem); margin:0}
.hero-sub{font-size:1.1rem; color:var(--muted); margin:.6rem 0 1.2rem}
.hero-cta{display:flex; gap:.6rem; align-items:center}
.hero-badge{margin-top:1rem; font-size:.9rem; color:var(--brand)}


/* Concept */
.concept .lead em{font-style:normal; color:var(--brand)}
.concept em strong{font-weight:700}


/* Menu */
.menu .pricing{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 720px){
.menu .pricing{grid-template-columns:1.1fr .9fr}
}


/* Pass */
.pass .pricing.grid{display:grid; gap:16px}
@media (min-width: 720px){
.pass .pricing.grid{grid-template-columns:1fr 1fr}
}


/* Booking */
.booking .cta-stack{display:grid; gap:10px; grid-template-columns:1fr}
.booking .hours{border-top:1px dashed var(--line); margin-top:16px; padding-top:16px}
.booking .hours ul{display:flex; gap:12px; padding:0; list-style:none}
.booking .hours li{border:1px solid var(--line); border-radius:12px; padding:.4rem .6rem; background:#14171b}


/* FAQ */
.faq details{border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem; margin:.6rem 0; background:#12151a}
.faq summary{cursor:pointer}
/* ===== 点火ヴィジュアル ===== */

body {
    background:#000;
    color:#fff;
    font-family:"Noto Serif JP", serif;
  }
  
  /* ヒーロー全体 */
  .hero {
    position:relative;
    width:100vw;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  
  /* タイトル（後で浮く） */
  .hero-inner {
    text-align:center;
    opacity:0;
    transition:opacity 1.6s ease 1.2s;
  }
  
  .hero-title {
    font-size:6rem;
    font-weight:300;
    letter-spacing:0.2rem;
  }
  
  .hero-sub {
    margin-top:1rem;
    font-size:1.3rem;
    opacity:.85;
  }
  
  /* 火花 */
  .spark {
    position:absolute;
    top:50%;
    left:50%;
    width:4px;
    height:4px;
    background:radial-gradient(circle, rgba(255,230,180,1) 0%, rgba(255,200,100,0.4) 70%, transparent 100%);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    filter:blur(2px);
    animation:spark-burst 1.4s ease-out .4s forwards;
  }
  
  @keyframes spark-burst {
    0% {
      opacity:0;
      transform:translate(-50%, -50%) scale(.2);
    }
    10% {
      opacity:.95;
      transform:translate(-50%, -50%) scale(3.4);
      filter:blur(3px);
    }
    28% {
      opacity:.5;
      transform:translate(-50%, -50%) scale(1.2);
      filter:blur(1px);
    }
    100% {
      opacity:0;
      transform:translate(-50%, -50%) scale(1);
    }
  }
  
  /* 火花の尾（魔法感） */
  .spark::after {
    content:"";
    position:absolute;
    width:120px;
    height:2px;
    background:linear-gradient(90deg, rgba(255,230,180,0.7), rgba(255,200,100,0));
    top:50%;
    left:100%;
    transform:translateY(-50%);
    opacity:0;
    animation:trail .6s ease-out .35s forwards;
  }
  
  @keyframes trail {
    0% {opacity:0; width:0;}
    30% {opacity:.9; width:120px;}
    100% {opacity:0; width:150px;}
  }
  
  /* SP対応 */
  @media(max-width:768px) {
    .hero-title {font-size:4rem;}
    .spark {width:3px; height:3px;}
    .spark::after {width:90px;}
  }
  .yohaku .card.quiet-card {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    padding: 28px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.9;
  }
  
  .yohaku .small {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
  }
  
  .yohaku-note {
    font-size: 0.85rem;
    color: #777;
    margin: 24px 0 32px;
    line-height: 1.8;
  }
  
  .yohaku .center {
    text-align: center;
  }
  /* カードの視認性とタイポ */
.yohaku .card.quiet-card{
    background: rgba(250,250,250,.96); /* うっすら透けをやめて読みやすく */
    border: 1px solid #E6E6E6;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    border-radius: 12px;
    padding: clamp(22px, 4vw, 36px);
    line-height: 1.95;
    letter-spacing: .02em;
  }
  
  /* 本文のコントラスト */
  .yohaku .card.quiet-card p{
    color: #2a2a2a;
    margin: 0 0 1.1em;
  }
  .yohaku .card.quiet-card p.small{ color:#6B6B6B; }
  
  /* 見出しの存在感（細く強い） */
  .yohaku .sec-title{
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: .35em;
  }
  .yohaku .lead{
    color:#CFC6B0; /* ゴールド系を淡く */
    font-weight: 400;
    letter-spacing: .04em;
    margin-bottom: 1.4rem;
  }
  /* セクション上下の余白を深めて“間”を作る */
.section.yohaku{
    padding: clamp(48px, 10vw, 120px) 0;
  }
  
  /* カード幅：視線が泳がない最適幅 */
  .container.narrow{ max-width: 760px; }
  /* ボタンの質感とフォーカス */
.yohaku .btn.btn-primary{
    background: #CDB581;
    color: #1a1a1a;
    border: 1px solid #BFA873;
    padding: 12px 22px;
    border-radius: 28px;
    box-shadow: 0 6px 18px rgba(205,181,129,.25);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .yohaku .btn.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(205,181,129,.32);
  }
  .yohaku .btn.btn-primary:focus{
    outline: 2px solid #D7C79E;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(215,199,158,.35);
  }
  .yohaku .card.quiet-card{ box-shadow: 0 10px 40px rgba(0,0,0,.12); }
  @media (max-width: 520px){
    .yohaku .sec-title{ font-size: 1.25rem; }
    .yohaku .lead{ font-size: .95rem; }
    .yohaku .card.quiet-card{ border-radius: 10px; }
    .yohaku .btn.btn-primary{ width: 100%; }
  }
  .hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55) saturate(0.8);
    pointer-events: none;
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.28); */
    /* backdrop-filter: blur(2px); */
  }
  
  .hero-inner {
    position: relative;
    z-index: 2;
  }
  /* ---- Concept 読みやすさ調整 ---- */
.section.concept .container.narrow {
    max-width: 44rem;               /* 行幅を絞って読みやすく */
  }
  
  /* 見出しの折り返し最適化（対応ブラウザで効く） */
  .section.concept .sec-title {
    text-wrap: balance;
  }
  
  /* リード行：少し大きく＆余白 */
  .section.concept .lead {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.9;
    letter-spacing: .03em;
    margin-bottom: .9em;
    font-weight: 500;
  }
  
  /* 本文：行間／文字間／段落間 */
  .section.concept p {
    font-size: clamp(.98rem, 1.9vw, 1.125rem);
    line-height: 2;                 /* 日本語は少し広めが読みやすい */
    letter-spacing: .02em;          /* わずかに字間を開ける */
    margin: 0 0 1.1em;              /* 段落間の余白 */
    text-underline-offset: .2em;    /* 万一リンクが入っても読みやすく */
  }
  
  /* 強調の質感：日本語は italic を使わず色と太さだけで */
  .section.concept p em {
    font-style: normal;
    font-weight: 500;
    opacity: .95;
  }
  .section.concept p strong {
    font-weight: 700;
    letter-spacing: .01em;
  }
  
  /* PCでは <br> を隠して“自然な段落読み”にする */
  @media (min-width: 768px) {
    /* .section.concept p br { display: none; } */
  }
  
  /* モバイルは左右の詰まりを緩める（読み疲れ防止） */
  @media (max-width: 767px) {
    .section.concept .container.narrow {
      padding-inline: 1.2rem;
    }
    .section.concept p { line-height: 1.95; }
  }
  /* ================================
   Responsive
================================ */

/* Tablet & below */
@media (max-width: 1024px) {
    .hero-title {
      font-size: 6vw;
    }
    .hero-sub {
      font-size: 3.5vw;
    }
  }
  
  /* Smartphone */
  @media (max-width: 768px) {
  
    /* layout width */
    .container.narrow {
      padding: 0 20px;
    }
  
    /* hero */
    .hero {
      min-height: 70vh;
    }
    .hero-title {
      font-size: 9vw;
      letter-spacing: 0.04em;
    }
    .hero-sub {
      font-size: 4.2vw;
      line-height: 1.5;
      margin-top: 0.8rem;
    }
  
    .hero video {
      object-fit: cover;
    }
  
    /* typography */
    p, .lead {
      font-size: 15px;
      line-height: 1.65;
    }
  
    .sec-title {
      font-size: 22px;
      margin-bottom: 1.6rem;
    }
  
    /* spacing */
    .section {
      padding: 3.5rem 0;
    }
  
    .pricing {
      flex-direction: column;
      gap: 20px;
    }
  
    .card {
      padding: 20px;
    }
  
    ol.flow-steps {
      padding-left: 0;
    }
  
    ol.flow-steps li {
      padding: 12px 0;
    }
  
    /* buttons */
    .btn-lg {
      font-size: 15px;
      padding: 14px 24px;
    }
  }
  /* =========================================
   Responsive + Hero fix (append-only patch)
   -----------------------------------------*/

/* 1) ヒーローの高さを端末依存の100vh問題に強くする */
.hero{
    height:auto;
    min-height:100vh;
    min-height:100dvh; /* 最新ブラウザ */
  }
  @supports (height: 100svh){
    .hero{ min-height:100svh; } /* iOS Safariのアドレスバー対策 */
  }
  
  /* 2) 背景動画のレイヤーとトリミングを強制（セレクタ揺れに両対応） */
  .hero-video,
  .hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1;        /* テキストより背面へ */
  }
  
  /* 3) 視認性のためのごく薄いオーバーレイ（見え方を壊さない範囲） */
  .hero-overlay{
    background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.18) 40%, rgba(0,0,0,.32));
  }
  
  /* 4) ヒーロー内余白（デスクトップとモバイルで最小限の最適化） */
  @media (min-width: 769px){
    .hero-inner{ padding: 112px 0 96px; }
  }
  @media (max-width: 768px){
    .hero{ min-height:70vh; }               /* モバイルは少し浅めでスクロール誘導 */
    .hero-inner{ padding: 72px 0 64px; }
  }
  
  /* 5) タイポスケールの最終調整（極小端末） */
  @media (max-width: 480px){
    .hero-title{ font-size: clamp(1.8rem, 8.8vw, 2.4rem); letter-spacing:.04em; }
    .hero-sub{ font-size: clamp(.95rem, 4.2vw, 1.06rem); line-height:1.55; }
  }
  
  /* 6) 安全領域（iPhoneノッチ）に沿った左右パディング */
  @supports (padding: max(0px)){
    .site-header,
    .hero-inner{
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
  }
  
  /* 7) メニューのグリッド：720px未満は確実に縦積み */
  @media (max-width: 720px){
    .menu .pricing{ grid-template-columns: 1fr !important; }
  }
  
  /* 8) 予約の営業時間バッジが折り返せるように */
  @media (max-width: 520px){
    .booking .hours ul{ flex-wrap: wrap; row-gap: 8px; }
  }
  
  /* 9) Flow（15分の儀）の最終スマホ詰まり対策（あなたの既存調整と衝突しない軽微版） */
  @media (max-width: 767px){
    #flow-title.sec-title{ text-wrap: balance; }
    .flow-steps{ gap:12px; }
    .flow-steps li{ padding:14px; }
    .flow-steps .micro br{ display:none; } /* 不要な改行を抑制 */
  }
  
  /* 10) モーション弱め設定に追従（火花アニメを無効化） */
  @media (prefers-reduced-motion: reduce){
    .spark, .spark::after{ animation:none !important; opacity:0; }
  }