/* =========================================================
   TOKYO BAR aap - Common Stylesheet
   ミニマル系ラグジュアリー / モスグリーン × ゴールド
   ========================================================= */

:root{
  --bg:#0a0d08;
  --bg-2:#10140d;
  --bg-3:#171c12;
  --moss:#3d4a1f;
  --moss-deep:#1f2810;
  --moss-light:#6b7d3a;
  --gold:#c9a961;
  --gold-light:#e0c98a;
  --gold-deep:#8a7430;
  --cream:#f5f0e0;
  --cream-bright:#faf6e8;
  --text:#ebe5d0;
  --text-soft:#9c9684;
  --ink:#0a0d08;
  --ink-soft:#1a1d15;
  --line:rgba(201,169,97,.22);
  --line-soft:rgba(201,169,97,.10);
  --line-moss:rgba(107,125,58,.25);

  --pad-section: clamp(96px, 14vw, 200px);
  --pad-x: clamp(24px, 6vw, 64px);
  --max-w: 1320px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Shippori Mincho','Cormorant Garamond',serif;
  font-weight:400;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* 1文字だけ取り残されないよう、行末を均等に */
  text-wrap:pretty;
  overflow-wrap:break-word;
  line-break:strict;
}

/* 見出しは行を均等に分配（バランス）*/
h1, h2, h3, h4,
.hero-title, .hero-title em,
.lead, .h-sub, .h-section,
.hero-meaning, .page-hero-sub,
.cta h2, .cta-sub{
  text-wrap:balance;
  line-break:strict;
}

/* 段落・本文：1文字孤立を防ぐ */
p, .info-val, .feature-desc,
.concept-tease p, .concept-deep p,
.owner-msg p, .access-lead,
.tl-body p, .tl-body h3,
.faq-q span, .faq-a p,
.form-note, .pos-val, .why-card p,
.space-detail p, .space-detail .features li,
.hero-meaning, .page-hero-sub,
.cta-sub, .res-intro p{
  text-wrap:pretty;
  line-break:strict;
}

/* Heroサブライン等は積極的にバランス分配 */
.hero-meaning,
.hero-title em,
.page-hero-sub,
.lead, .h-sub{
  text-wrap:balance;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
button{font:inherit;}

::selection{background:var(--gold);color:var(--ink);}

/* film grain */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Navigation
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  padding:24px var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;
  transition:background .4s, backdrop-filter .4s, padding .4s, transform .4s ease;
  will-change:transform;
}
.nav.scrolled{
  background:rgba(10,13,8,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:16px var(--pad-x);
  border-bottom:1px solid var(--line-soft);
}
.nav.hidden{
  transform:translateY(-100%);
}
.nav-logo{
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;
  font-size:24px;letter-spacing:.05em;color:var(--cream-bright);
  text-decoration:none;
}
.nav-links{display:flex;gap:40px;list-style:none;align-items:center;}
.nav-links a{
  color:var(--cream-bright);text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-size:13px;
  letter-spacing:.28em;text-transform:uppercase;
  position:relative;padding:8px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--gold);
  transition:width .4s ease;
}
.nav-links a:hover{color:var(--gold);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--gold);}
.nav-cta{
  margin-left:8px;padding:10px 20px;
  border:1px solid var(--gold);color:var(--gold) !important;
  font-family:'Cormorant Garamond',serif;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;
  transition:background .3s, color .3s;
}
.nav-cta:hover{background:var(--gold);color:var(--ink) !important;}
.nav-cta::after{display:none !important;}

/* hamburger */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  background:transparent;border:0;cursor:pointer;
  position:relative;z-index:60;
}
.nav-toggle span{
  display:block;position:absolute;left:8px;right:8px;
  height:1px;background:var(--cream-bright);
  transition:transform .4s, top .3s, opacity .2s;
}
.nav-toggle span:nth-child(1){top:14px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:28px;}
.nav-toggle.open span:nth-child(1){top:21px;transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:21px;transform:rotate(-45deg);}

/* =========================================================
   Generic Section / Typography
   ========================================================= */
.section{padding:var(--pad-section) var(--pad-x);position:relative;}
.section-inner{max-width:var(--max-w);margin:0 auto;}
.section-tight{max-width:920px;margin:0 auto;}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:32px;
}
.eyebrow::before{content:"";width:42px;height:1px;background:var(--gold);}

h1, h2, h3{
  font-family:'Bodoni Moda',serif;font-weight:400;
  letter-spacing:-.02em;color:var(--cream-bright);line-height:1.05;
}
h1 em, h2 em, h3 em{font-style:italic;color:var(--gold);font-weight:400;}

.h-display{font-size:clamp(52px, 9vw, 140px);font-weight:900;letter-spacing:-.04em;}
.h-section{font-size:clamp(40px, 6vw, 80px);}
.h-sub{font-size:clamp(28px, 3.6vw, 44px);font-weight:500;font-family:'Shippori Mincho',serif;letter-spacing:.02em;line-height:1.5;}

p{font-size:15.5px;line-height:2;color:var(--cream);}
p + p{margin-top:1.4em;}

/* =========================================================
   Page Hero (sub pages)
   ========================================================= */
.page-hero{
  min-height:62vh;
  padding:200px var(--pad-x) 120px;
  display:flex;align-items:center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(61,74,31,.32) 0%, transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.page-hero-inner{max-width:var(--max-w);margin:0 auto;width:100%;}
.page-hero h1{font-size:clamp(56px, 9vw, 120px);font-weight:900;line-height:.95;}
.page-hero-sub{
  margin-top:32px;max-width:560px;
  font-family:'Shippori Mincho',serif;font-size:16px;
  line-height:2;color:var(--cream);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:20px 40px;
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;background:transparent;
  border:1px solid;transition:background .4s, color .4s, border-color .4s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex-shrink:0;}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-gold:hover{background:transparent;color:var(--gold);}
.btn-line{background:#06C755;color:#fff;border-color:#06C755;}
.btn-line:hover{background:transparent;color:#06C755;}
.btn-outline{color:var(--cream-bright);border-color:var(--cream-bright);}
.btn-outline:hover{background:var(--cream-bright);color:var(--ink);}
.btn-ghost{color:var(--gold);border-color:var(--gold);}
.btn-ghost:hover{background:var(--gold);color:var(--ink);}

/* link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
  border-bottom:1px solid var(--gold-deep);
  padding:6px 0;transition:gap .3s, border-color .3s;
}
.link-arrow:hover{gap:22px;border-color:var(--gold);}

/* =========================================================
   Footer (common)
   ========================================================= */
.footer{
  background:var(--ink);
  border-top:1px solid var(--line-soft);
  padding:80px var(--pad-x) 40px;
  position:relative;
}
.footer-grid{
  max-width:var(--max-w);margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid var(--line-soft);
}
.footer-brand .nav-logo{font-size:32px;}
.footer-brand p{
  margin-top:20px;font-size:13px;line-height:2;
  color:var(--text-soft);max-width:300px;
}
.footer-col h4{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;font-weight:400;
}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:14px;}
.footer-col a{
  text-decoration:none;color:var(--cream);font-size:13.5px;
  letter-spacing:.05em;transition:color .3s;
}
.footer-col a:hover{color:var(--gold);}
.footer-col p{font-size:13.5px;color:var(--cream);margin:0 0 10px;line-height:1.9;}
.footer-col p small{color:var(--text-soft);font-size:11.5px;}

.footer-bottom{
  max-width:var(--max-w);margin:0 auto;
  padding-top:32px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
}
.footer-copy{
  font-family:'Cormorant Garamond',serif;font-size:11.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--text-soft);
}
/* Minimal social link — matches gold theme */
.footer-ig, .ig-link{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 24px;
  background:transparent;
  color:var(--gold);
  text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  border:1px solid var(--gold-deep);
  transition:background .35s, color .35s, border-color .35s;
}
.footer-ig:hover, .ig-link:hover{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.footer-ig svg, .ig-link svg{width:14px;height:14px;flex-shrink:0;}

/* Mail icon-button (used in footer) */
.icon-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;background:transparent;
  border:1px solid var(--line);color:var(--cream-bright);
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;
  transition:border-color .3s, color .3s;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);}
.icon-btn svg{width:14px;height:14px;flex-shrink:0;}

/* =========================================================
   Bottom CTA (共通) - 各ページ末尾
   ========================================================= */
.cta{
  padding:var(--pad-section) var(--pad-x);
  text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61,74,31,.42) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(107,125,58,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(201,169,97,.14) 0%, transparent 50%),
    linear-gradient(180deg,#13180c 0%,#0d1209 100%);
  border-top:1px solid var(--line-soft);
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 100%, rgba(201,169,97,.12), transparent 60%);
  pointer-events:none;
}
/* CTA装飾：左右に対称的な葉のシルエット */
.cta::after{
  content:"";position:absolute;
  bottom:-100px;left:50%;transform:translateX(-50%);
  width:1200px;max-width:130%;height:300px;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cg fill='%233d4a1f' opacity='0.18'%3E%3Cpath d='M100 280 Q 100 180 80 100 Q 60 60 30 30 Q 80 50 110 110 Q 130 180 130 280 Z'/%3E%3Cpath d='M1100 280 Q 1100 180 1120 100 Q 1140 60 1170 30 Q 1120 50 1090 110 Q 1070 180 1070 280 Z'/%3E%3Cpath d='M250 290 Q 245 220 230 160 Q 215 120 195 95 Q 235 115 265 170 Q 280 230 280 290 Z'/%3E%3Cpath d='M950 290 Q 955 220 970 160 Q 985 120 1005 95 Q 965 115 935 170 Q 920 230 920 290 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  pointer-events:none;
  z-index:0;
}
.cta-inner{position:relative;z-index:2;}
.cta-inner{max-width:780px;margin:0 auto;position:relative;z-index:2;}
.cta h2{font-size:clamp(48px, 7vw, 100px);margin-bottom:32px;}
.cta-sub{
  font-family:'Shippori Mincho',serif;font-size:16px;line-height:2;
  margin:0 auto 56px;max-width:480px;color:var(--cream);
}
.cta-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}

/* =========================================================
   Card / Grid utilities
   ========================================================= */
.split-2{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(48px,7vw,120px);align-items:center;}
.split-3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}

/* fade-in on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease, transform 1s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* hidden helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.honeypot{position:absolute;left:-9999px;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .nav-links{
    display:none !important;
    position:fixed !important;
    top:0 !important;left:0 !important;
    width:100vw !important;height:100vh !important;height:100dvh !important;
    margin:0;padding:32px;
    background:rgba(10,13,8,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column !important;
    justify-content:center !important;align-items:center !important;
    gap:32px;
    z-index:55;
    overflow-y:auto;
    box-sizing:border-box;
  }
  .nav-links.open{
    display:flex !important;
  }
  .nav-links a{
    font-size:22px;letter-spacing:.3em;padding:8px 0;
    color:var(--cream-bright);text-decoration:none;
  }
  .nav-toggle{display:block;z-index:60;}
  .nav-cta{margin:0;padding:14px 32px;font-size:13px;}

  .split-2, .split-3{grid-template-columns:1fr;gap:48px;}

  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 32px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-bottom{flex-direction:column;text-align:center;}

  .page-hero{min-height:50vh;padding:160px var(--pad-x) 80px;}
  .btn{padding:18px 32px;font-size:12px;}
}

@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr;}
}

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

/* =========================================================
   Mobile: 一文を一行に収めるための文字サイズ調整
   PC版で「。の後改行」に整えた文章が、スマホでも同じ構成で
   見えるように、本文の文字サイズを段階的に小さくする
   ========================================================= */
@media (max-width: 700px){
  /* 大見出しもサイズダウン */
  .h-sub{font-size:clamp(18px, 4.5vw, 24px) !important;line-height:1.55;}
  .h-section{font-size:clamp(36px, 9vw, 56px);}
  .h-display{font-size:clamp(56px, 18vw, 96px);}
  .lead{font-size:clamp(18px, 4.5vw, 24px) !important;line-height:1.55;}

  /* 共通の本文 */
  p{font-size:13.5px;line-height:1.95;letter-spacing:.01em;}

  /* Hero */
  .hero-meaning{font-size:13px;line-height:2;max-width:100%;}

  /* ページHero下のサブ */
  .page-hero-sub{font-size:13.5px;line-height:1.95;}

  /* Concept・本文系 */
  .concept-tease p,
  .concept-deep p,
  .owner-msg p,
  .access-lead{font-size:13px;line-height:1.95;}

  /* Pillar / Card */
  .pillar p, .why-card p, .space-card p, .feature-desc{font-size:12.5px;line-height:1.9;}

  /* Story timeline */
  .tl-body p{font-size:12.5px;line-height:1.9;}
  .tl-body h3{font-size:16px;}

  /* 注釈・小さい文字 */
  .res-intro p{font-size:13.5px;}
  .res-intro .note{font-size:11.5px;line-height:1.9;}

  /* Interior 各 space-detail */
  .space-detail p{font-size:13px;line-height:1.95;}
  .space-detail .features li{font-size:12px;}

  /* CTA */
  .cta-sub{font-size:13.5px;line-height:1.95;}

  /* Footer */
  .footer-brand p{font-size:12.5px;line-height:1.85;}
  .footer-col li, .footer-col a, .footer-col p{font-size:13px;}

  /* FAQ */
  .faq-q span{font-size:14.5px;}
  .faq-a p{font-size:12.5px;line-height:1.9;}
}

/* スマホ専用：背景に温かみと深みを加える（PC版は変更なし） */
@media (max-width: 700px){
  body{
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(61,74,31,.18) 0%, transparent 60%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,169,97,.06) 0%, transparent 55%),
      linear-gradient(180deg, #15190e 0%, #11150c 50%, #0d1109 100%);
    background-attachment:fixed;
  }
  /* セクション境界の透明感を少しだけ強調 */
  .concept-tease,
  .gallery-section,
  .res-section,
  .map-section,
  .transport,
  .glr-tease,
  .info,
  .careers,
  .position,
  .story,
  .owner,
  .access-section{
    background-color:transparent !important;
  }
  /* CTAだけは少し色味を残す */
  .cta{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(61,74,31,.32) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(201,169,97,.08) 0%, transparent 60%),
      linear-gradient(180deg, #1a1f12 0%, #14180e 100%);
  }
}

/* さらに狭い端末（iPhone SE 等）はもう一段小さく */
@media (max-width: 380px){
  p, .hero-meaning, .page-hero-sub,
  .concept-tease p, .concept-deep p, .owner-msg p, .access-lead,
  .res-intro p, .cta-sub, .space-detail p{
    font-size:12px;line-height:1.9;
  }
  .pillar p, .why-card p, .space-card p, .feature-desc,
  .tl-body p, .footer-col li, .footer-col a, .footer-col p{
    font-size:11.5px;line-height:1.85;
  }
  .res-intro .note, .footer-brand p{font-size:11px;}
}