/* ============================================
   Bar Ombra — 陰翳のオーセンティックバー / 京都・先斗町
   採寸元: AUTHENTIC BAR Kreis 2nd (design-stock fd-bar-barkreis-com)
   実測CSS(shared.css/shared2.css/index.css/font.css)より:
     グレースケール基調 #f1f1f1 / #d0d0d0 / #b3b3b0 / #c8bdbb
     アクセント深緑 #548b2e（リンク/差し色のみ・彩度を極限まで絞る）
     書体: 和文=Noto Serif JP / 欧文見出し=Libertinus Serif / 数字=DIN系
   ---
   Ombra 固有の差別化署名（色以外）:
     ① お品書き＝リーダー点線 × セリフ通し番号のレタープレス式ドリンクリスト
     ② ヒーロー右端の縦組み欧文セリフ柱 + 下部の営業時刻レール
     ③ ダーク面は「予約＝バックバー帯」1箇所のみ（他は明るいグレー）
   ============================================ */

:root{
  /* Palette — グレースケール × 深緑（Kreis 2nd 実測） */
  --paper:      #f1f1f1;   /* base bg */
  --paper-2:    #eae9e6;   /* alt section（微暖のグレー） */
  --paper-3:    #e3e2de;
  --smoke:      #d0d0d0;   /* 罫・境界（実測） */
  --stone:      #b3b3b0;   /* ミュート面（実測） */
  --taupe:      #c8bdbb;   /* 温かみのある差しグレー（実測） */
  --ink:        #202020;   /* 見出し（実測） */
  --ink-2:      #303030;   /* 本文濃部（実測） */
  --mute:       #6f6d69;   /* 本文グレー */
  --green:      #548b2e;   /* 深緑アクセント（実測・使い所を絞る） */
  --green-dark: #3f6b22;
  --green-soft: rgba(84,139,46,.14);
  --night:      #17181a;   /* 唯一のダーク面＝バックバー */
  --night-2:    #202225;
  --line:       rgba(32,32,32,.13);
  --line-2:     rgba(32,32,32,.08);
  --line-dark:  rgba(241,241,241,.14);

  --f-jp:     "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
  --f-latin:  "Libertinus Serif", "Times New Roman", Georgia, serif;
  --f-num:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --side-w: 216px;
  --maxw:   1120px;
  --trans:  cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-jp);color:var(--ink-2);background:var(--paper);
  font-size:16px;line-height:2.2;letter-spacing:.045em;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* 写真は彩度を一段落として陰翳のトーンに寄せる（Kreis=写真控えめ） */
.collage img,.feature-img img,.course-img img,.chef-img img,
.interior-bg,.hero-bg,.reservation-bg,.access-map iframe{
  filter:grayscale(.16) saturate(.92) contrast(1.02);
}
a{color:inherit;text-decoration:none;transition:opacity .35s var(--trans),color .35s var(--trans)}
a:hover{opacity:.66}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px)}

/* 縦組みユーティリティ（欧文の柱） */
.v-text{writing-mode:vertical-rl;letter-spacing:.28em;line-height:1.9}

/* 数字・欧文ラベル */
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ============ PC: 左固定サイドバー（216px・薄墨のグレー壁） ============ */
.side{
  position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:100;
  display:flex;flex-direction:column;align-items:center;
  padding:44px 20px 26px;color:var(--ink-2);
  background:linear-gradient(180deg,#ececeb 0%, #e6e5e2 100%);
  border-right:1px solid var(--smoke);overflow-y:auto;
}
.side::after{ /* 深緑の細い縦罫（右端） */
  content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;
  background:linear-gradient(180deg,transparent,var(--green) 30%,var(--green) 70%,transparent);opacity:.5;
}
.side-logo{display:block;text-align:center;margin-bottom:34px}
.side-logo .side-logo-ja{
  font-family:var(--f-latin);font-size:1.5rem;font-weight:700;
  letter-spacing:.12em;display:block;white-space:nowrap;color:var(--ink);line-height:1.2;
}
.side-logo .side-logo-en{
  font-family:var(--f-num);font-size:.58rem;font-weight:500;letter-spacing:.42em;text-indent:.42em;
  display:block;margin-top:11px;color:var(--green);text-transform:uppercase;white-space:nowrap;
}
.side-logo .side-logo-en::before{content:"— ";}
.side-logo .side-logo-en::after{content:" —";}
.side-tagline{font-size:.7rem;letter-spacing:.14em;color:var(--mute);margin-bottom:30px;text-align:center;line-height:2}
.side-nav{list-style:none;width:100%;margin-bottom:auto}
.side-nav li{margin-bottom:16px;text-align:center}
.side-nav a{
  font-family:var(--f-jp);font-size:.86rem;font-weight:500;letter-spacing:.2em;text-indent:.2em;
  display:inline-block;position:relative;padding:2px 4px;color:var(--ink-2);white-space:nowrap;
}
.side-nav a::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:6px;height:1px;background:var(--green);opacity:0;transition:opacity .3s var(--trans);
}
.side-nav a.active,.side-nav a:hover{color:var(--green-dark);opacity:1}
.side-nav a.active::before,.side-nav a:hover::before{opacity:1}
.side-tel{margin-top:28px;text-align:center;font-family:var(--f-num);font-size:1.06rem;font-weight:500;letter-spacing:.06em;color:var(--ink)}
.side-tel small{display:block;font-family:var(--f-jp);font-size:.6rem;letter-spacing:.16em;color:var(--mute);margin-bottom:5px}
.side-reserve{
  margin-top:16px;display:block;width:100%;text-align:center;
  background:var(--ink);color:var(--paper);
  padding:13px 10px;font-size:.76rem;letter-spacing:.28em;text-indent:.28em;font-weight:500;
  transition:background .35s var(--trans);
}
.side-reserve:hover{background:var(--green-dark);opacity:1}

.main{margin-left:var(--side-w);min-width:0}

/* ============ SP: トップバー ============ */
.header{
  display:none;position:fixed;inset:0 0 auto 0;z-index:100;height:60px;
  background:rgba(241,241,241,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--smoke);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 18px}
.header .logo{font-family:var(--f-latin);font-weight:700;font-size:1.16rem;letter-spacing:.08em;color:var(--ink)}
.nav-list{display:none;list-style:none}
.nav-list.open{
  display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;
  background:var(--paper);padding:24px 30px;gap:18px;border-bottom:1px solid var(--smoke);
  box-shadow:0 22px 40px rgba(32,32,32,.12);
}
.nav-list a{font-family:var(--f-jp);font-weight:500;font-size:.92rem;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap}
.nav-list a.active{color:var(--green-dark)}
.nav-list a.nav-reservation{background:var(--ink);color:var(--paper) !important;font-weight:600;padding:11px 12px 11px 15px;text-align:center;letter-spacing:.22em;text-indent:.22em}
.hamburger{display:flex;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:1px;background:var(--ink);transition:.3s var(--trans)}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Hero（暗い店内 × 横組みキャッチ × 縦組み欧文柱 × 時刻レール） ============ */
.hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transform:scale(1.06);animation:slowZoom 20s ease-out forwards;
}
@keyframes slowZoom{from{transform:scale(1.12)}to{transform:scale(1.0)}}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(18,18,20,.78) 0%, rgba(18,18,20,.42) 44%, rgba(18,18,20,.18) 72%, rgba(18,18,20,.34) 100%),
             linear-gradient(180deg, rgba(18,18,20,.36) 0%, rgba(18,18,20,0) 34%, rgba(18,18,20,.5) 100%);
}
.hero-copy{position:relative;color:var(--paper);padding-left:clamp(28px,7vw,104px);max-width:60ch}
.hero-eyebrow{
  font-family:var(--f-latin);font-style:italic;font-size:clamp(.9rem,1.4vw,1.06rem);
  letter-spacing:.16em;color:#e6e6e3;margin-bottom:26px;
  display:inline-flex;align-items:center;gap:15px;
}
.hero-eyebrow::before{content:"";width:40px;height:1px;background:var(--green)}
.hero-copy .hero-title{
  font-family:var(--f-jp);font-weight:600;
  font-size:clamp(1.9rem, 5vw, 3.35rem);line-height:1.7;letter-spacing:.1em;
  text-shadow:0 2px 34px rgba(10,10,12,.6);
}
.hero-copy .hero-title em{font-style:normal;color:#dce6cf;
  border-bottom:1px solid rgba(84,139,46,.7);padding-bottom:.06em}
/* 右端の縦組み欧文柱 */
.hero-column{
  position:absolute;right:clamp(22px,4vw,64px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--f-latin);font-style:italic;
  font-size:clamp(.8rem,1.1vw,.98rem);letter-spacing:.42em;color:rgba(241,241,241,.72);
}
.hero-column::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:1px;height:18px;background:var(--green)}
/* 下部の営業時刻レール */
.hero-rail{
  position:absolute;left:clamp(28px,7vw,104px);bottom:clamp(30px,5vw,54px);
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--f-num);font-weight:500;font-size:.76rem;letter-spacing:.24em;
  color:rgba(241,241,241,.9);border-top:1px solid rgba(241,241,241,.3);padding-top:14px;
  text-transform:uppercase;
}
.hero-scroll{
  position:absolute;right:26px;bottom:30px;color:rgba(241,241,241,.82);
  font-family:var(--f-num);font-size:.64rem;letter-spacing:.3em;writing-mode:vertical-rl;text-transform:uppercase;
}
.hero-scroll::after{
  content:"";display:block;width:1px;height:44px;background:var(--green);margin:12px auto 0;
  animation:scrollLine 2.6s var(--trans) infinite;
}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ セクション基礎 ============ */
.section{padding:clamp(74px,10vw,142px) 0;position:relative}
.section-alt{background:var(--paper-2)}
.sec-head{display:flex;align-items:flex-start;gap:clamp(18px,3vw,34px);margin-bottom:clamp(42px,6vw,66px)}
.sec-label{
  font-family:var(--f-latin);font-style:italic;font-size:.96rem;letter-spacing:.24em;
  color:var(--green-dark);white-space:nowrap;padding-top:9px;
  display:inline-flex;align-items:center;gap:13px;
}
.sec-label::before{content:"";width:30px;height:1px;background:var(--green)}
.sec-title{
  font-family:var(--f-jp);font-weight:600;color:var(--ink);
  font-size:clamp(1.55rem,3.3vw,2.35rem);line-height:1.75;letter-spacing:.1em;word-break:auto-phrase;
}
.sec-title em{font-style:normal;color:var(--green-dark)}
.sec-lead{font-size:.95rem;line-height:2.35;color:var(--mute);max-width:46ch;letter-spacing:.05em}

/* 縦組みの飾り見出し */
.v-caption{
  font-family:var(--f-jp);font-weight:600;color:var(--ink);
  font-size:clamp(1.05rem,1.6vw,1.28rem);padding-top:10px;position:relative;letter-spacing:.24em;
}
.v-caption::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:14px;height:2px;background:var(--green)}

/* ============ お知らせ ============ */
.news-strip{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news-inner{max-width:var(--maxw);margin:0 auto;padding:24px clamp(20px,4vw,52px);display:flex;align-items:flex-start;gap:clamp(18px,3vw,36px)}
.news-label{
  font-family:var(--f-num);font-weight:600;font-size:.66rem;letter-spacing:.28em;text-indent:.28em;
  color:var(--paper);background:var(--green-dark);padding:8px 13px;white-space:nowrap;margin-top:3px;text-transform:uppercase;
}
.news-list{list-style:none;flex:1;min-width:0}
.news-list li{display:flex;gap:22px;align-items:baseline;padding:8px 0;border-bottom:1px dotted var(--line);font-size:.9rem}
.news-list li:last-child{border-bottom:0}
.news-date{font-family:var(--f-num);color:var(--green-dark);font-size:.82rem;letter-spacing:.06em;white-space:nowrap}
.news-text{letter-spacing:.04em;color:var(--ink-2)}

/* ============ コンセプト（縦組み飾り × コラージュ） ============ */
.concept-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,6vw,92px);align-items:center}
.concept-copy{max-width:44ch}
.concept-copy .sec-lead{margin-top:28px;max-width:none}
.collage{position:relative;padding:0 clamp(20px,3vw,44px) clamp(44px,5vw,64px) 0}
.collage::before{ /* 深緑の細枠をずらして重ねる */
  content:"";position:absolute;inset:14px calc(clamp(20px,3vw,44px) - 14px) calc(clamp(44px,5vw,64px) - 14px) 14px;
  border:1px solid rgba(84,139,46,.4);pointer-events:none;z-index:1;
}
.collage-main{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 18px 46px rgba(32,32,32,.16);
}
.collage-sub{
  position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1/1;object-fit:cover;z-index:2;
  border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 14px 34px rgba(32,32,32,.2);
}

/* ============ こだわり＝流儀（写真×交互） ============ */
.feature-row{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,82px);
  align-items:center;padding-bottom:clamp(56px,8vw,96px);margin-bottom:clamp(56px,8vw,96px);
  border-bottom:1px solid var(--line);
}
.feature-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.feature-row.is-flip .feature-img{order:2}
.feature-row.is-flip .feature-body{order:1}
.feature-img{overflow:hidden;aspect-ratio:16/11;border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 14px 38px rgba(32,32,32,.14)}
.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--trans)}
.feature-row:hover .feature-img img{transform:scale(1.035)}
.feature-num{
  font-family:var(--f-num);font-weight:500;font-size:.82rem;letter-spacing:.24em;
  color:var(--green-dark);margin-bottom:18px;display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;
}
.feature-num::before{content:"";width:26px;height:1px;background:var(--green)}
.feature-title{
  font-family:var(--f-jp);font-weight:600;color:var(--ink);
  font-size:clamp(1.28rem,2.1vw,1.62rem);line-height:1.8;letter-spacing:.08em;margin-bottom:18px;
}
.feature-desc{font-size:.93rem;line-height:2.3;color:var(--mute);letter-spacing:.04em}

/* ============ シグネチャー（2〜3杯） ============ */
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.course-card{
  background:#fff;display:flex;flex-direction:column;
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(32,32,32,.08);
}
.course-img{aspect-ratio:4/5;overflow:hidden}
.course-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--trans)}
.course-card:hover .course-img img{transform:scale(1.04)}
.course-body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;flex:1}
.course-name-en{
  font-family:var(--f-latin);font-style:italic;font-size:1rem;letter-spacing:.14em;
  color:var(--green-dark);margin-bottom:9px;
}
.course-name{font-family:var(--f-jp);font-weight:600;color:var(--ink);font-size:1.24rem;letter-spacing:.08em;margin-bottom:14px;line-height:1.7}
.course-desc{font-size:.9rem;line-height:2.2;color:var(--mute);letter-spacing:.04em;margin-bottom:22px}
.course-meta{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.course-price{font-family:var(--f-num);font-weight:600;font-size:1.42rem;letter-spacing:.02em;color:var(--ink)}
.course-price small{font-family:var(--f-jp);font-weight:400;font-size:.66rem;color:var(--mute);margin-left:8px;letter-spacing:.1em}
.course-note{font-size:.76rem;color:var(--mute);letter-spacing:.05em}
.course-cta{margin-top:clamp(40px,6vw,56px);text-align:center}

/* ============ ボタン ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 40px;font-family:var(--f-jp);font-weight:600;
  font-size:.84rem;letter-spacing:.2em;text-indent:.08em;border:0;cursor:pointer;transition:all .45s var(--trans);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--green-dark);opacity:1;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink-2)}
.btn-secondary:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid rgba(241,241,241,.5)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);opacity:1;border-color:var(--paper)}
.btn-arrow{display:inline-block;font-family:var(--f-num);transition:transform .35s var(--trans)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ============ 店内・空間（全幅写真） ============ */
.interior-wide{position:relative;isolation:isolate;padding:clamp(94px,13vw,172px) 0;color:var(--paper)}
.interior-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.interior-wide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(18,18,20,.74) 0%, rgba(18,18,20,.38) 58%, rgba(18,18,20,.14) 100%)}
.interior-copy{max-width:34ch}
.interior-copy .sec-label{color:#c9d8b6}
.interior-copy .sec-label::before{background:#8fbf5f}
.interior-copy .sec-title{color:var(--paper)}
.interior-copy .sec-title em{color:#c9d8b6}
.interior-copy .sec-lead{color:rgba(241,241,241,.86);margin-top:26px}

/* ============ FAQ ============ */
.faq-intro{text-align:center;max-width:640px;margin:0 auto 52px}
.faq-intro .sec-title{margin:0 auto}
.faq-container{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-question{
  width:100%;padding:26px 0;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;gap:22px;text-align:left;
  font-family:var(--f-jp);font-size:.98rem;letter-spacing:.05em;color:var(--ink-2);transition:color .3s var(--trans);
}
.faq-question:hover{color:var(--green-dark)}
.faq-q-label{font-family:var(--f-num);font-weight:600;font-size:.9rem;color:var(--green-dark);letter-spacing:.08em;flex-shrink:0}
.faq-q-text{flex:1;line-height:1.85;font-family:var(--f-jp);font-weight:500}
.faq-toggle{flex-shrink:0;width:24px;height:24px;position:relative;transition:transform .4s var(--trans)}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:var(--green-dark);transition:all .4s var(--trans)}
.faq-toggle::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.faq-toggle::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.faq-item.is-open .faq-toggle::after{transform:translateX(-50%) scaleY(0)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .5s var(--trans)}
.faq-item.is-open .faq-answer{max-height:400px}
.faq-answer-inner{padding:2px 0 30px;font-size:.92rem;line-height:2.25;color:var(--mute);letter-spacing:.04em}

[data-section].is-hidden{display:none !important}

/* ============ 予約CTA（唯一のダーク面＝バックバー） ============ */
.reservation-section{position:relative;padding:clamp(94px,12vw,152px) 0;text-align:center;background:var(--night);color:var(--paper);isolation:isolate;overflow:hidden}
.reservation-bg{position:absolute;inset:0;z-index:-2;opacity:.22;background-size:cover;background-position:center}
.reservation-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px 340px at 50% 20%, rgba(197,150,74,.16), transparent 70%)}
.reservation-inner{max-width:700px;margin:0 auto;padding:0 24px}
.reservation-label{
  font-family:var(--f-latin);font-style:italic;font-size:.96rem;letter-spacing:.24em;
  color:#c9d8b6;display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;
}
.reservation-label::before,.reservation-label::after{content:"";width:30px;height:1px;background:rgba(143,191,95,.6)}
.reservation-title{font-family:var(--f-jp);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.15rem);letter-spacing:.12em;line-height:1.9;margin-bottom:16px;word-break:auto-phrase}
.reservation-note{font-size:.92rem;opacity:.82;margin-bottom:40px;line-height:2.25;letter-spacing:.05em}
.reservation-tel{
  font-family:var(--f-num);font-weight:500;font-size:clamp(1.7rem,3vw,2.2rem);letter-spacing:.04em;
  color:var(--paper);display:inline-block;margin-bottom:34px;border-bottom:1px solid rgba(143,191,95,.5);padding-bottom:6px;
}
.reservation-tel:hover{border-color:var(--green);opacity:1}
.reservation-tel small{font-family:var(--f-jp);display:block;font-size:.64rem;letter-spacing:.28em;opacity:.82;margin-bottom:7px}
.reservation-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ============ フッター ============ */
.footer{background:var(--paper-3);color:var(--mute);padding:70px 0 26px;font-size:.88rem;border-top:1px solid var(--line);position:relative}
.footer::before{content:"";position:absolute;top:-1px;left:0;width:120px;height:2px;background:var(--green)}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,5vw,60px);max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.footer-logo{font-family:var(--f-latin);font-weight:700;font-size:1.5rem;letter-spacing:.06em;color:var(--ink);margin-bottom:6px}
.footer-logo-en{font-family:var(--f-num);font-weight:500;font-size:.6rem;letter-spacing:.32em;color:var(--green-dark);margin-bottom:20px;text-transform:uppercase}
.footer-info{line-height:2.15;color:var(--mute)}
.footer-heading{font-family:var(--f-latin);font-style:italic;font-size:.86rem;letter-spacing:.2em;color:var(--ink);margin-bottom:20px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:11px}
.footer-links a{color:var(--mute);font-size:.88rem;letter-spacing:.06em}
.footer-links a:hover{color:var(--green-dark);opacity:1}
.footer-bottom{text-align:center;margin-top:54px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--f-num);font-size:.68rem;color:var(--stone);letter-spacing:.18em}

/* ============ モバイルCTA ============ */
.mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(23,24,26,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(143,191,95,.3);padding:10px 14px;gap:10px}
.mobile-cta-bar .btn{flex:1;padding:13px;font-size:.78rem}
.mobile-cta-bar .btn-secondary{color:var(--paper);border-color:rgba(241,241,241,.5)}
.mobile-cta-bar .btn-primary{background:var(--green-dark)}

/* ============ Fade-in ============ */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity 1s var(--trans), transform 1s var(--trans)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ============ 下層ページ共通 ============ */
.page-header{position:relative;padding:clamp(120px,16vw,180px) 0 clamp(56px,8vw,84px);text-align:center;background:var(--paper-2);border-bottom:1px solid var(--line)}
.page-header-title-en{font-family:var(--f-latin);font-style:italic;color:var(--green-dark);font-size:.98rem;letter-spacing:.24em;margin-bottom:12px}
.page-header-title{font-family:var(--f-jp);font-weight:600;color:var(--ink);font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:.16em;text-indent:.16em;word-break:auto-phrase}

/* --- お品書きページ（署名①：リーダー点線 × セリフ通し番号） --- */
.menu-category{margin-bottom:clamp(64px,8vw,104px)}
.menu-category:last-child{margin-bottom:0}
.menu-category-title{
  font-family:var(--f-jp);font-weight:600;color:var(--ink);
  font-size:clamp(1.35rem,2.2vw,1.68rem);letter-spacing:.12em;margin-bottom:6px;
  display:flex;align-items:baseline;gap:16px;padding-bottom:14px;position:relative;
}
.menu-category-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink-2)}
.menu-category-title-en{font-family:var(--f-latin);font-style:italic;font-weight:400;font-size:.94rem;color:var(--green-dark);letter-spacing:.14em}
.menu-category-intro{font-size:.92rem;color:var(--mute);line-height:2.2;letter-spacing:.04em;margin:20px 0 28px;max-width:56ch}
.menu-list{margin-top:10px}
.menu-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:16px;
  padding:20px 2px 18px;border-bottom:1px dotted var(--line);
}
.menu-item-idx{
  font-family:var(--f-num);font-weight:500;font-size:.82rem;color:var(--green-dark);
  letter-spacing:.06em;padding-top:.2em;
}
.menu-item-name{
  font-family:var(--f-jp);font-weight:600;color:var(--ink);
  font-size:1.04rem;letter-spacing:.06em;line-height:1.7;
}
.menu-item-badge{
  display:inline-block;font-family:var(--f-num);font-weight:600;font-size:.6rem;letter-spacing:.16em;text-indent:.16em;
  color:var(--green-dark);background:var(--green-soft);border:1px solid rgba(84,139,46,.4);
  padding:3px 9px;margin-left:12px;vertical-align:2px;text-transform:uppercase;
}
/* リーダー点線（名前と価格の間） */
.menu-item-leader{align-self:baseline;border-bottom:1px dotted var(--stone);transform:translateY(-.28em);min-width:18px}
.menu-item-price{text-align:right;font-family:var(--f-num);font-weight:600;font-size:1.06rem;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.menu-item-price small{font-family:var(--f-jp);font-weight:400;font-size:.64rem;color:var(--mute);margin-left:6px;letter-spacing:.08em}
.menu-item-desc{grid-column:2 / 4;font-size:.85rem;color:var(--mute);line-height:2;letter-spacing:.04em;margin-top:6px}
.menu-item-note{grid-column:2 / 4;font-size:.75rem;color:var(--stone);letter-spacing:.05em;margin-top:3px}
.menu-footnote{max-width:660px;margin:56px auto 0;text-align:center;font-size:.84rem;color:var(--mute);line-height:2.25;letter-spacing:.04em}

/* --- Aboutページ --- */
.about-story{display:grid;grid-template-columns:1fr auto;gap:clamp(36px,6vw,92px);align-items:center}
.about-story .collage{max-width:520px}
.chef-block{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.chef-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 14px 38px rgba(32,32,32,.14)}
.chef-img img{width:100%;height:100%;object-fit:cover}
.chef-role{font-family:var(--f-latin);font-style:italic;font-size:.92rem;color:var(--green-dark);letter-spacing:.16em;margin-bottom:10px}
.chef-name{font-family:var(--f-jp);font-weight:600;color:var(--ink);font-size:1.68rem;letter-spacing:.14em;margin-bottom:4px}
.chef-name-en{font-family:var(--f-latin);font-style:italic;font-size:.86rem;color:var(--mute);letter-spacing:.14em;margin-bottom:24px}
.chef-bio{font-size:.94rem;line-height:2.35;color:var(--mute);letter-spacing:.05em;margin-bottom:26px}
.chef-career{list-style:none;border-top:1px solid var(--line)}
.chef-career li{padding:12px 4px;border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.05em;color:var(--ink-2);display:flex;gap:14px}
.chef-career li::before{content:"";flex-shrink:0;width:5px;height:5px;background:var(--green);border-radius:50%;margin-top:.85em}

/* --- アクセスページ --- */
.access-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.access-map{aspect-ratio:4/5;overflow:hidden;position:sticky;top:40px;border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 14px 38px rgba(32,32,32,.12)}
.access-map iframe{width:100%;height:100%;border:0}
.access-info-block{padding:26px 0;border-bottom:1px solid var(--line)}
.access-info-block:first-child{padding-top:0}
.access-info-block:last-child{border-bottom:0}
.access-info-label{font-family:var(--f-latin);font-style:italic;font-size:.92rem;color:var(--green-dark);letter-spacing:.16em;margin-bottom:12px;display:inline-block;border-bottom:1px solid var(--green);padding-bottom:4px}
.access-info-text{font-size:.96rem;line-height:2.15;letter-spacing:.04em;color:var(--ink-2)}
.access-info-text a{border-bottom:1px solid var(--line);padding-bottom:2px}
.access-info-text a:hover{border-color:var(--green);opacity:1}
.hours-table{width:100%;border-collapse:collapse}
.hours-table td{padding:11px 0;font-size:.92rem;letter-spacing:.04em;border-bottom:1px dotted var(--line)}
.hours-table tr:last-child td{border-bottom:0}
.hours-table td:first-child{font-family:var(--f-jp);font-weight:600;color:var(--ink);width:42%;letter-spacing:.08em}
.hours-table td:last-child{font-family:var(--f-num);font-weight:400;color:var(--ink-2)}
.phone-link{font-family:var(--f-num);font-weight:500;font-size:1.5rem;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:4px;display:inline-block;color:var(--ink)}
.phone-link:hover{border-color:var(--green);opacity:1}

/* --- お問い合わせページ --- */
.contact-intro{max-width:620px;margin:0 auto clamp(48px,6vw,72px);text-align:center}
.contact-intro .sec-lead{margin:0 auto;max-width:none;line-height:2.35}
.contact-form{max-width:560px;margin:0 auto}
.form-group{margin-bottom:30px}
.form-label{display:block;font-size:.9rem;color:var(--ink);letter-spacing:.06em;margin-bottom:10px;font-family:var(--f-jp);font-weight:600}
.form-label .required{display:inline-block;font-size:.66rem;letter-spacing:.08em;color:var(--green-dark);margin-left:8px;vertical-align:2px;font-family:var(--f-num);font-weight:600}
.form-input,.form-select,.form-textarea{
  width:100%;padding:14px 18px;border:1px solid var(--smoke);border-radius:2px;
  font-family:var(--f-jp);font-size:1rem;color:var(--ink-2);background:#fbfbfa;transition:all .25s var(--trans);letter-spacing:.03em;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--stone)}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--stone)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(84,139,46,.14)}
.form-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23548b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position:calc(100% - 18px) center;background-repeat:no-repeat;padding-right:40px;cursor:pointer;
}
.form-textarea{min-height:140px;resize:vertical;line-height:1.9}
.form-submit{display:block;margin:46px auto 0;padding:17px 70px;min-width:220px;font-family:var(--f-jp);font-weight:600;font-size:.84rem;letter-spacing:.28em;text-indent:.28em;background:var(--ink);color:var(--paper);border:0;cursor:pointer;transition:all .4s var(--trans)}
.form-submit:hover{background:var(--green-dark);transform:translateY(-1px)}
.quick-contact{text-align:center;padding:clamp(64px,9vw,110px) 0;background:var(--paper-2);border-top:1px solid var(--line)}
.quick-contact .sec-title{margin:0 auto 26px;text-align:center}
.quick-contact-phone{font-family:var(--f-num);font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:.03em;color:var(--ink);display:inline-block;border-bottom:1px solid var(--green);padding-bottom:6px;margin-top:14px}
.quick-contact-phone:hover{border-color:var(--green-dark);opacity:1}
.quick-contact-hours{font-size:.86rem;color:var(--mute);margin-top:18px;letter-spacing:.06em}

/* --- 下層の簡易予約帯（バックバー） --- */
.reservation-compact{background:var(--night);color:var(--paper);padding:clamp(34px,5vw,52px) 0;position:relative;isolation:isolate;overflow:hidden}
.reservation-compact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(440px 200px at 16% 50%, rgba(197,150,74,.12), transparent 70%)}
.reservation-compact-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,44px);flex-wrap:wrap}
.reservation-compact-text{display:flex;align-items:baseline;gap:clamp(14px,2vw,24px);flex-wrap:wrap;min-width:0}
.reservation-compact-eyebrow{font-family:var(--f-latin);font-style:italic;font-size:.9rem;color:#c9d8b6;letter-spacing:.16em;display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.reservation-compact-eyebrow::before{content:"";width:24px;height:1px;background:rgba(143,191,95,.6)}
.reservation-compact-title{font-family:var(--f-jp);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.32rem);letter-spacing:.1em;line-height:1.85}
.reservation-compact-actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .fade-in{opacity:1;transform:none;transition:none}
  .hero-bg{animation:none;transform:none}
  .hero-scroll::after{animation:none;transform:none}
  .feature-row:hover .feature-img img,.course-card:hover .course-img img{transform:none}
  .feature-img img,.course-img img,.btn,.btn-arrow,.faq-toggle,.faq-answer{transition:none}
  .btn:hover,.form-submit:hover{transform:none}
  .btn:hover .btn-arrow{transform:none}
}

/* ============ レスポンシブ ============ */
@media (max-width:1024px){
  .side{display:none}
  .main{margin-left:0}
  .header{display:block}
  body{padding-top:60px}
  .hero{min-height:86vh}
  .hero-column{display:none}
  .concept-grid{grid-template-columns:1fr;gap:44px}
  .concept-grid .v-caption{writing-mode:horizontal-tb;letter-spacing:.16em}
  .concept-grid .v-caption::before{left:0;transform:none}
  .about-story{grid-template-columns:1fr;gap:44px}
  .feature-row{grid-template-columns:1fr;gap:26px;padding-bottom:48px;margin-bottom:48px}
  .feature-row.is-flip .feature-img{order:0}
  .feature-row.is-flip .feature-body{order:1}
  .course-grid{grid-template-columns:1fr;gap:32px}
  .course-img{aspect-ratio:16/10}
  .chef-block{grid-template-columns:1fr;gap:32px}
  .chef-img{max-width:380px}
  .access-layout{grid-template-columns:1fr;gap:40px}
  .access-map{position:static;aspect-ratio:16/10}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .mobile-cta-bar{display:flex}
  body{padding-bottom:72px}
  .hero-overlay{background:linear-gradient(90deg, rgba(18,18,20,.82) 0%, rgba(18,18,20,.5) 46%, rgba(18,18,20,.28) 78%),
                           linear-gradient(180deg, rgba(18,18,20,.36) 0%, rgba(18,18,20,0) 32%, rgba(18,18,20,.52) 100%)}
  .hero-copy{padding-left:24px}
  .hero-rail{left:24px}
  .news-inner{flex-direction:column;gap:12px}
  .sec-head{flex-direction:column;gap:14px}
  .footer-inner{grid-template-columns:1fr}
  .menu-item{grid-template-columns:auto 1fr auto}
}
@media (max-width:600px){
  .reservation-compact-inner{flex-direction:column}
  .reservation-compact-actions{width:100%}
  .reservation-compact-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   下層ページの視覚強化（2026-07-13 下層エンリッチ）
   陰翳の世界観の続きを下層へ＝ダークの緩急・写真の存在感を足す
   ============================================================ */

/* --- 下層ヒーロー帯を写真背景のダーク面に（無地→陰翳の続き） --- */
.page-header.is-photo{
  background:var(--night);color:var(--paper);border-bottom:0;
  padding:clamp(148px,19vw,212px) 0 clamp(58px,8vw,92px);
  isolation:isolate;overflow:hidden;
}
.page-header-bg{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transform:scale(1.05);
  filter:grayscale(.16) saturate(.92) contrast(1.02);
}
.page-header.is-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,16,18,.62) 0%,rgba(16,16,18,.5) 46%,rgba(16,16,18,.8) 100%);
}
.page-header.is-photo .page-header-title-en{color:#c9d8b6}
.page-header.is-photo .page-header-title{color:var(--paper);text-shadow:0 2px 30px rgba(8,8,10,.6)}
/* 右下の縦組み欧文柱（ヒーロー柱の余韻） */
.page-header-col{
  position:absolute;right:clamp(18px,3.4vw,50px);bottom:clamp(18px,4vw,38px);z-index:1;
  writing-mode:vertical-rl;font-family:var(--f-latin);font-style:italic;
  font-size:.82rem;letter-spacing:.4em;color:rgba(241,241,241,.6);
}

/* --- 全幅の写真バンド（明暗リズム・editorial caption） --- */
.photo-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,13vw,150px) 0;color:var(--paper)}
.photo-band-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.04);filter:grayscale(.16) saturate(.92) contrast(1.02)}
.photo-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,16,18,.74) 0%,rgba(16,16,18,.42) 58%,rgba(16,16,18,.2) 100%)}
.photo-band-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.photo-band-en{font-family:var(--f-latin);font-style:italic;font-size:.95rem;letter-spacing:.22em;color:#c9d8b6;display:inline-flex;align-items:center;gap:13px;margin-bottom:16px}
.photo-band-en::before{content:"";width:30px;height:1px;background:var(--green)}
.photo-band-title{font-family:var(--f-jp);font-weight:600;font-size:clamp(1.32rem,2.6vw,1.88rem);letter-spacing:.1em;line-height:1.8;max-width:26ch;text-shadow:0 2px 24px rgba(8,8,10,.5)}

/* --- menu署名リード（course-grid 再利用） --- */
.menu-signature{padding-bottom:clamp(20px,3vw,36px)}

/* --- 名物：今日の一杯・マスターの気分 --- */
.todays-section{background:var(--paper-2);border-top:1px solid var(--line-2);padding-top:clamp(58px,8vw,104px);padding-bottom:clamp(58px,8vw,104px)}
.todays{display:grid;grid-template-columns:minmax(0,.86fr) 1.14fr;gap:clamp(30px,5vw,68px);align-items:center;max-width:960px;margin:0 auto}
.todays-photo{position:relative;border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 18px 46px rgba(32,32,32,.16)}
.todays-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.16) saturate(.92) contrast(1.02)}
.todays-date{position:absolute;left:0;bottom:0;padding:8px 16px;background:rgba(23,24,26,.86);color:var(--paper);font-family:var(--f-num);font-weight:500;font-size:.78rem;letter-spacing:.14em}
.todays-eyebrow{font-family:var(--f-latin);font-style:italic;font-weight:400;font-size:.96rem;letter-spacing:.14em;color:var(--green-dark);display:inline-flex;align-items:center;gap:13px;margin-bottom:16px}
.todays-eyebrow::before{content:"";width:30px;height:1px;background:var(--green)}
.todays-title{font-family:var(--f-jp);font-weight:600;color:var(--ink);font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:.09em;line-height:1.5;margin-bottom:18px}
.todays-name{font-family:var(--f-jp);font-weight:600;color:var(--green-dark);font-size:1.16rem;letter-spacing:.06em;line-height:1.7;padding-top:18px;border-top:1px solid var(--line);margin-bottom:14px}
.todays-note{font-family:var(--f-jp);font-weight:400;color:var(--ink-2);font-size:.94rem;line-height:2.15;letter-spacing:.04em;max-width:44ch}
.todays-sign{font-family:var(--f-jp);font-weight:400;color:var(--mute);font-size:.82rem;letter-spacing:.08em;margin-top:20px}

/* --- access 外観・路地の写真 --- */
.access-visual{position:relative;margin-bottom:clamp(40px,5vw,64px);border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 18px 46px rgba(32,32,32,.16);overflow:hidden}
.access-visual img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;filter:grayscale(.16) saturate(.92) contrast(1.02)}
.access-visual figcaption{
  position:absolute;left:0;bottom:0;padding:9px 18px;
  background:rgba(23,24,26,.82);color:var(--paper);
  font-family:var(--f-jp);font-weight:500;font-size:.8rem;letter-spacing:.12em;
}

/* --- about Our Story を大判・重ねに --- */
.about-story .collage{max-width:600px}
.about-story .collage-main{aspect-ratio:4/5}
.about-story .collage-sub{width:52%}

@media (max-width:1024px){
  .page-header-col{display:none}
}
@media (max-width:768px){
  .photo-band::after{background:linear-gradient(180deg,rgba(16,16,18,.5) 0%,rgba(16,16,18,.66) 100%)}
  .access-visual img{aspect-ratio:16/10}
  .todays{grid-template-columns:1fr;gap:26px}
  .todays-photo{max-width:340px}
  .todays-photo img{aspect-ratio:16/11}
}
@media (prefers-reduced-motion: reduce){
  .page-header-bg,.photo-band-bg{transform:none}
}