@charset "utf-8";
/* ============================================================
   GRAND TIME — English site shared stylesheet
   日本語版(index.html 等)のカラー/書体をそのまま継承しつつ、
   欧米の読者に合わせて余白・階層・可読性を優先した設計。
   日本語版は Shippori Mincho 主体だが、英語版は欧文セリフ
   (Cinzel / Cormorant Garamond)を主役にする。
   ============================================================ */

:root{
  /* 日本語版 index.html の :root と同一の値 */
  --paper:#ffffff; --paper-soft:#faf8f3; --beige:#efe7d8; --greige:#e9e3d7;
  --taupe:#6f6557; --taupe-deep:#564d41;
  --ink:#2d2823; --ink-soft:#736b60; --line:#ddd5c6;
  --gold:#a98a52; --gold-soft:#c2a672; --wine:#8a3c43; --wine-deep:#6c2d33; --sky:#7fa6bb;

  --wrap:1120px;
  --display:'Cinzel',serif;
  --serif:'Cormorant Garamond',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
/* 本文中のリンク：ディセンダに重ならない、金の細い下線に */
main p a:not(.btn),main dd a,main .ds a{
  color:var(--gold);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--gold-soft);
  text-decoration-skip-ink:auto;
}
main p a:not(.btn):hover,main dd a:hover,main .ds a:hover{text-decoration-color:var(--gold);}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;}
@media (max-width:640px){ .wrap{width:calc(100% - 32px);} }

.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;}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-block;font-family:var(--display);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
h1,h2,h3{margin:0;font-weight:500;line-height:1.3;}
.h-display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.2vw,3.4rem);letter-spacing:.06em;line-height:1.22;
}
.h-sec{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:.03em;
}
.lead{
  font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.95;color:var(--taupe);max-width:38em;
}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

/* 金の罫線つきセクション見出し */
.sec-head{text-align:center;margin-bottom:clamp(34px,5vw,56px);}
.sec-head .lead{margin-inline:auto;text-align:center;}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 22px;}
.rule::before,.rule::after{content:'';height:1px;width:min(90px,16vw);background:linear-gradient(90deg,transparent,var(--gold-soft));}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold-soft));}
.rule i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);flex:none;}

section{padding:clamp(56px,8vw,104px) 0;}
.bg-soft{background:var(--paper-soft);}
.bg-beige{background:var(--greige);}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{display:flex;align-items:center;gap:20px;min-height:64px;}
.brand{font-family:var(--display);font-size:1.06rem;letter-spacing:.2em;text-decoration:none;white-space:nowrap;}
.brand span{color:var(--gold);}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;justify-content:flex-end;min-width:0;}
.site-nav a{
  font-family:var(--serif);font-size:1rem;letter-spacing:.08em;
  text-decoration:none;color:var(--taupe);padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);}
/* .site-nav a が border-bottom:transparent を持つため、
   同じ詳細度以上で四辺すべてを指定し直す（下辺だけ消える不具合の対策） */
.site-nav .lang-link{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;
  border:1px solid var(--line);border-bottom-color:var(--line);
  padding:6px 12px;text-decoration:none;color:var(--taupe);
  flex:none;white-space:nowrap;line-height:1.2;
}
.site-nav .lang-link:hover,.site-nav .lang-link:focus-visible{
  border-color:var(--gold-soft);border-bottom-color:var(--gold-soft);color:var(--ink);
}

.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;}
.nav-toggle span{display:block;width:19px;height:1px;background:var(--ink);}

/* スマホ・タブレット：ハンバーガーではなく、常に見える横スクロールのナビ帯にする。
   タップして開く手間をなくし、どのページがあるか一目で分かるようにする狙い。 */
@media (max-width:1000px){
  .nav-toggle{display:none;}
  .site-head .bar{flex-wrap:wrap;min-height:0;padding-block:10px;gap:8px 14px;}
  .brand{font-size:1rem;}
  .site-nav{
    order:3;width:100%;margin:0;
    flex-wrap:nowrap;justify-content:flex-start;
    gap:18px;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
    /* 右端で切れていることが分かるよう、うっすら白へフェードさせる */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav a{white-space:nowrap;flex:none;font-size:1.02rem;padding:5px 0;}
  .site-nav .lang-link{margin-left:4px;margin-right:26px;padding:5px 11px;}
}
@media (max-width:420px){
  .site-nav{gap:15px;}
  .site-nav a{font-size:.98rem;}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(420px,72vh,660px);display:grid;align-items:center;color:#fff;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,15,.62),rgba(26,21,15,.44) 45%,rgba(26,21,15,.76));}
.hero .wrap{position:relative;z-index:2;text-align:center;padding-block:70px;}
.hero .eyebrow{color:var(--gold-soft);}
.hero h1{color:#fff;margin:14px 0 0;text-shadow:0 2px 22px rgba(0,0,0,.4);}
.hero .lead{color:rgba(255,255,255,.93);margin:20px auto 0;text-align:center;text-shadow:0 1px 14px rgba(0,0,0,.45);}
.hero-meta{
  margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:9px 12px;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.09em;
}
.hero-meta span{border:1px solid rgba(255,255,255,.45);padding:6px 13px;border-radius:999px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--serif);font-size:1.06rem;letter-spacing:.09em;
  padding:14px 30px;border:1px solid var(--gold-soft);color:var(--ink);
  text-decoration:none;background:transparent;transition:background .3s,color .3s;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn .ar{transition:transform .3s;}
.btn:hover .ar{transform:translateX(4px);}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn-solid:hover{background:var(--wine);border-color:var(--wine);}
.btn-light{border-color:rgba(255,255,255,.6);color:#fff;}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--ink);}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:clamp(20px,3vw,32px);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){ .g3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .g2,.g3{grid-template-columns:1fr;} }

.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--greige);}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.card:hover .ph img{transform:scale(1.045);}
.card .bd{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.card .nm{font-family:var(--serif);font-size:1.24rem;font-weight:600;letter-spacing:.02em;line-height:1.4;}
.card .ja{font-size:.76rem;letter-spacing:.08em;color:var(--gold);margin-top:5px;}
.card .ds{font-size:.9rem;line-height:1.8;color:var(--ink-soft);margin-top:11px;flex:1;}
.card .pr{font-family:var(--serif);font-size:1.14rem;font-weight:600;color:var(--gold);margin-top:15px;}

/* ---------- Menu list ---------- */
.menu-list{display:grid;gap:26px;}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:baseline;padding-bottom:20px;border-bottom:1px solid var(--line);}
.menu-item:last-child{border-bottom:0;}
.menu-item .nm{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:.02em;}
.menu-item .pr{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--gold);white-space:nowrap;}
.menu-item .ja{grid-column:1/-1;font-size:.74rem;letter-spacing:.08em;color:var(--gold-soft);margin-top:-2px;}
.menu-item .ds{grid-column:1/-1;font-size:.9rem;line-height:1.8;color:var(--ink-soft);}
.menu-item .nt{grid-column:1/-1;font-size:.8rem;color:var(--taupe);font-style:italic;}

/* ---------- Essentials (訪日客向け実用情報) ---------- */
.essentials{border:1px solid var(--gold-soft);background:linear-gradient(180deg,#fffdf8,#f8f4ec);padding:clamp(26px,4vw,44px);}
.essentials dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 34px;margin:0;}
.essentials dt{font-family:var(--display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.essentials dd{margin:0;font-size:.94rem;line-height:1.8;}
.essentials dd b{font-weight:600;}
.pay-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.pay-badges span{font-size:.74rem;letter-spacing:.05em;border:1px solid var(--gold-soft);color:var(--taupe-deep);padding:4px 10px;border-radius:999px;}

/* ---------- Note / callout ---------- */
.note{border-left:3px solid var(--gold);background:var(--paper-soft);padding:18px 22px;font-size:.92rem;line-height:1.85;color:var(--taupe-deep);}
.note strong{color:var(--ink);}

/* ---------- Footer ---------- */
.site-foot{background:var(--taupe-deep);color:#e8e2d7;padding:clamp(46px,6vw,72px) 0 34px;text-align:center;}
.site-foot .brand-lg{font-family:var(--display);font-size:1.5rem;letter-spacing:.26em;}
.site-foot .sub{font-family:var(--serif);font-size:1rem;letter-spacing:.14em;color:var(--gold-soft);margin-top:6px;}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin:26px 0 24px;}
.site-foot nav a{font-family:var(--serif);font-size:1rem;letter-spacing:.07em;color:#e8e2d7;text-decoration:none;opacity:.88;}
.site-foot nav a:hover{opacity:1;color:var(--gold-soft);}
.site-foot .addr{font-size:.86rem;line-height:1.95;color:#c9c1b3;}
.site-foot .addr a{color:#c9c1b3;}
.site-foot .copy{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.74rem;letter-spacing:.1em;color:#a89f90;}

/* ---------- Mobile sticky CTA ---------- */
.mobicta{display:none;}
@media (max-width:760px){
  .mobicta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px;
  }
  .mobicta a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    font-family:var(--serif);font-size:1rem;letter-spacing:.06em;
    padding:12px 8px;text-decoration:none;border:1px solid var(--gold-soft);color:var(--ink);
  }
  .mobicta a.primary{background:var(--gold);border-color:var(--gold);color:#fff;}
  .mobicta svg{width:16px;height:16px;flex:none;}
  body{padding-bottom:72px;}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .card .ph img{transition:none;}
}

/* ---------- Print ---------- */
@media print{
  .site-head,.mobicta,.hero-bg::after{display:none;}
  body{padding-bottom:0;font-size:12pt;}
  .reveal{opacity:1;transform:none;}
}

/* ---- ヘッダーのロゴマーク（月の満ち欠け）---- */
.brand{display:inline-flex;align-items:center;gap:9px;}
.brand img{width:26px;height:auto;flex:none;}
@media (max-width:420px){ .brand img{width:22px;} .brand{gap:7px;font-size:.98rem;} }

/* ---- トップ Hero のロゴ ----
   ロゴは透明背景＋濃いグレー文字のため、暗いヒーロー上では読めない。
   brightness(0) invert(1) で白一色に起こしてから影を付ける。
   （ヘッダーは明るい背景なので原色のまま使う） */
.hero-logo{
  width:clamp(180px,46vw,220px);height:auto;margin:0 auto 24px;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.5));
  opacity:.95;
}

/* ---- アルコールページのヒーロー（日本語版 .hero-menu と同じ見た目に揃える）
       背景は山崎・白州・竹鶴・響のボトル写真。日本語版と同じ画像・同じ覆いの濃さ。 ---- */
.hero-alc{
  position:relative;overflow:hidden;text-align:center;color:#f6f0e4;
  padding:clamp(76px,11vw,128px) 20px clamp(46px,6vw,68px);
  background-image:
    linear-gradient(180deg,rgba(26,21,15,.84) 0%,rgba(26,21,15,.6) 44%,rgba(26,21,15,.88) 100%),
    url(../../images/emb-95e4c910d5.webp);
  background-size:cover;background-position:center;
}
.hero-alc .hero-mark{
  display:block;width:34px;height:auto;margin:0 auto 10px;
  fill:none;stroke:var(--gold-soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.hero-alc h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,5.6vw,3.3rem);letter-spacing:.14em;
  color:#f6f0e4;margin:2px 0 20px;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero-alc .lead{
  max-width:35em;margin:0 auto;color:rgba(246,240,228,.9);
  font-size:.96rem;line-height:2.05;text-shadow:0 1px 12px rgba(0,0,0,.6);
  font-family:var(--sans);
}
.hero-alc .hero-note{
  display:inline-block;margin-top:22px;
  font-family:var(--serif);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,240,228,.9);border:1px solid rgba(246,240,228,.45);padding:5px 15px;
}

/* ---- 写真つきの3カラム（文字だけのセクションを避けるため）---- */
.pic-col img{
  width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px;
  background:var(--greige);
}
.pic-col h3{font-family:var(--serif);font-size:1.24rem;font-weight:600;letter-spacing:.02em;}
.pic-col p{color:var(--ink-soft);font-size:.93rem;line-height:1.85;margin-top:10px;}

/* ---- 写真＋キャプション ---- */
.ph-fig{margin:0;}
.ph-fig img{
  width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--greige);
  transition:transform .7s ease;
}
.ph-fig{overflow:hidden;}
.ph-fig:hover img{transform:scale(1.04);}
.ph-fig figcaption{
  margin-top:9px;font-size:.78rem;letter-spacing:.08em;color:var(--gold);
}
@media (prefers-reduced-motion:reduce){ .ph-fig img{transition:none;} }

/* ---- Before You Come：写真の帯とアイコン ---- */
.ess-band{margin:0 0 clamp(22px,3vw,34px);overflow:hidden;}
.ess-band img{
  width:100%;height:clamp(150px,22vw,260px);object-fit:cover;
  object-position:center 58%;background:var(--greige);
}
.essentials dt{display:flex;align-items:center;gap:8px;}
.ess-ic{
  display:inline-flex;flex:none;width:16px;height:16px;color:var(--gold);
}
.ess-ic svg{width:100%;height:100%;}