/* ==================================================================
   ライトプランの制作例①（架空の美容クリニック）専用スタイルシート
   ==================================================================
   「超ミニマル・ハイエンド」なテイストに全振りしたデザインです。
   色数を黒・生成り・ゴールドの3色に絞り、巨大なタイポグラフィと
   贅沢な余白で「引き算の高級感」を表現しています。制作例②
   （ネイルサロン・Y2Kポップ）、制作例③（カフェ・手作りZINE）とは
   対極にあるテイストにすることで、同じライトプランでもここまで
   違う世界観を作れることを示しています。
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@300;500&display=swap");

:root {
  --color-bg: #faf8f4;
  --color-ink: #0f0e0c;
  --color-gold: #a9895a;
  --color-line-hair: rgba(15, 14, 12, 0.14);
  --color-text-light: #6b6660;
  --color-line: #06c755;
  --font-serif: "Cormorant Garamond", "Hiragino Mincho ProN", serif;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-weight: 300; color: var(--color-ink); background: var(--color-bg); line-height: 1.9; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* ------------------------------------------------------------------
   ヘッダー：装飾を排した極細ライン＋広めの字間
   ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-line-hair); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; }
.logo { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: 0.12em; }
.nav { display: flex; gap: 40px; }
.nav a { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.nav a:hover { border-color: var(--color-gold); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.lang-toggle { border: 1px solid var(--color-line-hair); background: transparent; color: var(--color-ink); padding: 6px 14px; font-size: 0.68rem; letter-spacing: 0.1em; cursor: pointer; }
.lang-toggle:hover { border-color: var(--color-gold); color: var(--color-gold); }
.menu-toggle { display: none; background: none; border: none; font-size: 1.3rem; }

/* ------------------------------------------------------------------
   ヒーロー：巨大タイポグラフィ＋贅沢な余白
   ------------------------------------------------------------------ */
.hero { padding: 160px 0 140px; text-align: center; }
.hero-eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--color-gold); margin-bottom: 36px; }
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw + 1rem, 5.6rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-bottom: 40px;
}
.hero-lead { max-width: 420px; margin: 0 auto 52px; color: var(--color-text-light); font-size: 0.92rem; }
.hero-actions { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

/* ボタン：塗りつぶしを避け、線と字間で見せる */
.btn { display: inline-block; padding: 16px 6px; font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; border-bottom: 1px solid var(--color-ink); transition: opacity 0.2s, border-color 0.2s; }
.btn:hover { opacity: 0.6; }
.btn-primary { border-color: var(--color-ink); }
.btn-outline { border-color: var(--color-line-hair); color: var(--color-text-light); }
.btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn-large { font-size: 0.8rem; padding: 20px 10px; }
.btn-line { background: var(--color-line); color: #fff; border: none; border-radius: 999px; padding: 14px 30px; letter-spacing: 0.08em; }
.btn-line:hover { opacity: 0.85; }

/* ------------------------------------------------------------------
   セクション見出し
   ------------------------------------------------------------------ */
.section-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.9rem, 2.4vw + 1rem, 2.7rem); text-align: center; margin-bottom: 18px; }
.section-lead { text-align: center; color: var(--color-text-light); font-size: 0.88rem; margin-bottom: 84px; }
.section-title-light, .section-lead-light { color: var(--color-bg); }

/* ------------------------------------------------------------------
   メニュー：カードではなく編集的なナンバリングリスト
   ------------------------------------------------------------------ */
.menu { padding: 140px 0; }
.menu-grid { display: flex; flex-direction: column; }
.menu-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--color-line-hair);
  text-align: left;
  transition: none;
}
.menu-grid .menu-card:last-child { border-bottom: 1px solid var(--color-line-hair); }
.menu-card:hover { transform: none; }
.menu-card-image { display: none; }
.menu-card-index { font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-gold); }
.menu-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 8px; }
.menu-card p { color: var(--color-text-light); font-size: 0.86rem; margin-bottom: 0; max-width: 480px; }
.menu-price { font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-ink) !important; font-weight: 500 !important; white-space: nowrap; }

/* ------------------------------------------------------------------
   ご予約
   ------------------------------------------------------------------ */
.reserve { background: var(--color-ink); padding: 140px 0; text-align: center; color: var(--color-bg); }
.reserve-note { margin-top: 28px; font-size: 0.76rem; opacity: 0.55; }
.reserve .btn-primary { border-color: var(--color-bg); color: var(--color-bg); }

/* LINE */
.line { padding: 140px 0; }
.line-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.line-text { flex: 1; min-width: 280px; }
.line-text .section-title, .line-text .section-lead { text-align: left; margin-bottom: 28px; }
.qr-placeholder { width: 150px; height: 150px; border: 1px solid var(--color-line-hair); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.78rem; letter-spacing: 0.05em; }

/* アクセス */
.access { padding: 140px 0 160px; }
.access-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--color-line-hair); }
.access-map { background: var(--color-bg); min-height: 280px; display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 0.85rem; }
.access-info { background: var(--color-bg); padding: 40px; }
.access-info p { margin-bottom: 26px; font-size: 0.86rem; }
.access-info p:last-child { margin-bottom: 0; }
.access-info strong { font-family: var(--font-serif); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--color-gold); display: block; margin-bottom: 4px; }

/* フッター */
.site-footer { text-align: center; padding: 48px 0; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--color-text-light); border-top: 1px solid var(--color-line-hair); }

/* 演出 */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .site-header, .btn, .nav a, .logo, .nav { transition: none; }
}

/* タブレット */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero { padding: 120px 0 100px; }
}

/* モバイル */
@media (max-width: 768px) {
  .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .header-actions { gap: 10px; }
  .access-grid { grid-template-columns: 1fr; }
  .menu-card { grid-template-columns: 40px 1fr; }
  .menu-price { grid-column: 2; }
  .hero { padding: 110px 0 90px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-line-hair);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.nav-open { max-height: 320px; }
  .nav a { display: block; padding: 18px 32px; border-bottom: 1px solid var(--color-line-hair); }
}