/* 076 Osteria Nocciola ― 色はここだけ触れば差し替わる */
:root {
  --c-bg: #f6f1ea;
  --c-sand: #ebe1d3;
  --c-dark: #1b1714;
  --c-main: #3a2c22;
  --c-accent: #b08a64;
  --c-accent-text: #7a5434;
  --c-gold: #c9a77c;
  --c-text: #374151;
  --c-sub: #4b5563;
  --font: "Noto Sans JP", sans-serif;
  --font-ja: "Hina Mincho", serif;
  --font-en: "Gilda Display", serif;
  --ease: cubic-bezier(.45, 0, .2, 1);
}

/* D01：区切りごとの色。文字の色も一緒に切り替える（style 属性ではなくクラスで） */
.tone-bg   { --surface: var(--c-bg);   --head: var(--c-main); --body: var(--c-text); --sub: var(--c-sub); --label: var(--c-accent-text); --line: #ddd0be; }
.tone-sand { --surface: var(--c-sand); --head: var(--c-main); --body: var(--c-text); --sub: var(--c-sub); --label: var(--c-accent-text); --line: #d2c1aa; }
.tone-dark { --surface: var(--c-dark); --head: #f3ece3;       --body: #e9e1d6;        --sub: #d3c9bc;     --label: var(--c-gold);        --line: rgba(255, 255, 255, .16); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 2; letter-spacing: .05em; color: var(--body); background: var(--surface); transition: background-color 1s var(--ease); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dd, li { word-break: auto-phrase; }
main > section { background: var(--surface); color: var(--body); }

.label { font-family: var(--font-en); font-size: 16px; letter-spacing: .32em; color: var(--label); margin-bottom: 20px; display: flex; align-items: center; gap: 16px; }
.label::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.h2 { font-family: var(--font-ja); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.6; letter-spacing: .14em; color: var(--head); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; text-decoration: none; letter-spacing: .14em; white-space: nowrap; flex: none; transition: background-color .5s, color .5s; font-size: 15px; }
.btn--main { background: var(--c-main); color: #fff; }
.btn--main:hover, .btn--main:focus-visible { background: var(--c-accent-text); }
.btn--line { border: 1px solid currentColor; color: var(--c-main); }
.btn--lg { min-height: 60px; padding: 0 40px; font-size: 16px; }

/* ===== ヘッダー（白い細い線の帯。スクロールで地色に） ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--head); background: var(--surface); transition: background-color 1s var(--ease), color 1s; }
.header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header__inner { display: flex; align-items: center; gap: 20px; height: 72px; padding: 0 20px; max-width: 1440px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 14px; min-height: 48px; text-decoration: none; white-space: nowrap; flex: none; }
.logo__en { font-family: var(--font-en); font-size: 26px; letter-spacing: .12em; }
.logo__ja { font-size: 15px; letter-spacing: .14em; }
@media (max-width: 599px) { .logo__ja { display: none; } }
.gnav { display: none; }
.header__btn { margin-left: auto; }
.header.is-scrolled .header__btn { background: var(--head); color: var(--surface); }
@media (min-width: 1080px) {
  .header__inner { height: 88px; padding: 0 48px; }
  .gnav { display: flex; gap: 32px; margin-left: auto; }
  .gnav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 15px; letter-spacing: .12em; }
  .header__btn { margin-left: 0; }
}

/* スマホのメニュー（details 要素） */
.spmenu { flex: none; }
.spmenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; }
.spmenu summary::-webkit-details-marker { display: none; }
.spmenu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spmenu__bar, .spmenu__bar::before, .spmenu__bar::after { display: block; width: 22px; height: 1px; background: currentColor; position: relative; }
.spmenu__bar::before, .spmenu__bar::after { content: ""; position: absolute; left: 0; }
.spmenu__bar::before { top: -7px; } .spmenu__bar::after { top: 7px; }
.spmenu[open] .spmenu__bar { background: transparent; }
.spmenu[open] .spmenu__bar::before { top: 0; transform: rotate(45deg); }
.spmenu[open] .spmenu__bar::after { top: 0; transform: rotate(-45deg); }
.spmenu__nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); padding: 8px 20px 24px; display: flex; flex-direction: column; box-shadow: 0 16px 32px rgba(0, 0, 0, .12); }
.spmenu__nav a { display: flex; align-items: center; min-height: 52px; color: var(--c-main); text-decoration: none; font-family: var(--font-ja); border-bottom: 1px solid #ddd0be; }
@media (min-width: 1080px) { .spmenu { display: none; } }

/* ===== メインビジュアル：画像1枚のLP風＋A03 ===== */
.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.hero__card { position: absolute; inset: 0; overflow: hidden; background: var(--c-sand); }
.hero__card { background: var(--c-bg); }
.hero__card img { width: 100%; height: 58%; object-fit: cover; object-position: 66% 60%; }
/* 写真の上の文字の下に、生成り色のグラデを敷く */
.hero__card::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 18%; background: linear-gradient(0deg, rgba(246, 241, 234, 1) 0%, rgba(246, 241, 234, 0) 100%); }
.hero__copy { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 40px; }
.hero__en { font-family: var(--font-en); font-size: 16px; letter-spacing: .32em; color: var(--c-accent-text); }
.hero__title { font-family: var(--font-ja); font-size: clamp(46px, 7.2vw, 108px); line-height: 1.35; letter-spacing: .12em; color: var(--c-main); margin: 8px 0 20px; }
.hero__lead { font-size: 16px; color: var(--c-text); line-height: 1.9; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) {
  .hero__card img { height: 100%; }
  .hero__card::after { top: 0; height: 100%; background: linear-gradient(90deg, rgba(246, 241, 234, .95) 0%, rgba(246, 241, 234, .82) 36%, rgba(246, 241, 234, 0) 58%); }
  .hero__card img { object-position: 60% 50%; }
  .hero__copy { left: 8vw; right: auto; top: 50%; bottom: auto; transform: translateY(-46%); max-width: 640px; }
  .hero__btns { margin-top: 40px; }
}

/* ===== ごあいさつ ===== */
.about { padding: 120px 20px; }
.about__inner { max-width: 880px; margin: 0 auto; }
.about__body { margin-top: 40px; max-width: 34em; }
.about__body p + p { margin-top: 20px; }
@media (min-width: 900px) {
  .about { padding: 200px 20px 160px; }
  .about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
  .about__inner .label { grid-column: 1 / -1; }
  .about__body { margin-top: 0; padding-top: 12px; border-left: 1px solid var(--line); padding-left: 48px; }
}

/* ===== 手打ちパスタ ===== */
.pasta { padding: 0 20px 120px; }
.pasta__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 40px; }
.pasta__inner > * { min-width: 0; }
.pasta__photo { margin: 0; overflow: hidden; }
.pasta__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pasta__text .h2 { margin-bottom: 24px; }
.pasta__list { margin-top: 32px; border-top: 1px solid var(--line); }
.pasta__list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.pasta__list span { font-family: var(--font-en); font-size: 20px; letter-spacing: .08em; color: var(--label); }
@media (min-width: 900px) {
  .pasta { padding-bottom: 200px; }
  .pasta__inner { grid-template-columns: 5fr 6fr; gap: 96px; align-items: center; }
}

/* ===== コース（スライド） ===== */
.course { padding: 120px 0; overflow: hidden; }
.course__head { padding: 0 20px; max-width: 1120px; margin: 0 auto 48px; }
.course__lead { margin-top: 16px; color: var(--sub); }
.dish { background: var(--c-bg); }
.dish img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dish__body { padding: 24px 24px 32px; }
.dish__no { font-family: var(--font-en); font-size: 16px; letter-spacing: .2em; color: var(--c-accent-text); }
.dish h3 { font-family: var(--font-ja); font-size: 22px; letter-spacing: .1em; color: var(--c-main); margin: 8px 0 8px; line-height: 1.6; }
.dish p:last-child { font-size: 15px; color: var(--c-sub); }
@media (min-width: 1080px) { .course { padding: 180px 0; } .course__head { padding: 0 48px; } }

/* スライド：JSなしは scroll-snap の横並び。Swiper が動いたら Swiper の並びに */
.slider__viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 16px; scrollbar-width: thin; }
.slider__track { display: flex; gap: 20px; width: max-content; }
.slider__item { width: 80vw; max-width: 460px; scroll-snap-align: center; flex: none; }
.slider.is-swiper .slider__viewport { overflow: hidden; scroll-snap-type: none; padding: 0 20px; }
.slider.is-swiper .slider__track { gap: 0; width: auto; }
.slider.is-swiper .slider__item { width: auto; max-width: none; }
.slider__ctrl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; padding: 0 20px; flex-wrap: wrap; }
.slider__ctrl[hidden] { display: none; }
.slider__arrow { width: 52px; height: 52px; border: 1px solid var(--c-main); background: transparent; color: var(--c-main); cursor: pointer; position: relative; border-radius: 50%; transition: background-color .4s, color .4s; }
.slider__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translate(-65%, -50%) rotate(45deg); }
.slider__prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.slider__arrow:hover, .slider__arrow:focus-visible { background: var(--c-main); color: #fff; }
.slider__arrow.swiper-button-disabled { opacity: .35; }
.slider__dots, .slider__dots.swiper-pagination-horizontal { position: static; width: auto; transform: none; } 
.slider__dots { display: flex; align-items: center; }
.slider__dots .swiper-pagination-bullet { width: 32px; height: 44px; margin: 0 !important; background: transparent; opacity: 1; border-radius: 0; position: relative; }
.slider__dots .swiper-pagination-bullet::before { content: ""; position: absolute; left: 8px; right: 8px; top: 21px; height: 1px; background: var(--c-accent); transition: height .4s, background-color .4s; }
.slider__dots .swiper-pagination-bullet-active::before { top: 20px; height: 3px; background: var(--c-main); }
.slider__pause { min-height: 44px; padding: 0 18px; margin-left: 12px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--c-main); font: inherit; font-size: 15px; letter-spacing: .1em; cursor: pointer; }
@media (min-width: 1080px) {
  .slider__viewport, .slider.is-swiper .slider__viewport { padding: 0 48px; }
  .slider__item { width: 30vw; }
}

/* ===== D05：ワインと夜（煙の写真＋金属調のロゴ） ===== */
.wine { position: relative; padding: 120px 20px; overflow: hidden; background: var(--c-dark); }
.wine__smoke { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.wine::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 30%, rgba(27, 23, 20, .35), rgba(27, 23, 20, .85) 70%); }
.wine__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.wine__metal {
  font-family: var(--font-en); font-size: clamp(64px, 15vw, 220px); line-height: 1; letter-spacing: .04em; text-align: center; margin-bottom: 72px;
  background: linear-gradient(115deg, #7d6446 0%, #e9d3b0 22%, #9a7b55 40%, #f6e7cc 52%, #8a6c49 68%, #d9bf98 86%, #6f583d 100%);
  background-size: 220% 100%; background-position: 50% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6));
}
.wine .label, .wine .h2 { text-align: left; }
.wine__cols { display: grid; gap: 40px; margin-top: 40px; }
.wine__cols > * { min-width: 0; }
.wine__photo { margin: 0; overflow: hidden; }
.wine__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wine__text p + p { margin-top: 16px; }
.wine__list { margin: 32px 0 0; border-top: 1px solid var(--line); }
.wine__list div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wine__list dd { margin: 0; color: var(--c-gold); }
.wine__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 96px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.wine__grid li {
  display: grid; place-items: center; min-height: 120px; background: rgba(20, 17, 15, .82);
  font-family: var(--font-en); font-size: 28px; letter-spacing: .06em;
  background-image: linear-gradient(var(--a, 115deg), #7d6446 0%, #e9d3b0 30%, #8a6c49 55%, #f6e7cc 75%, #6f583d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wine__grid li:nth-child(2) { --a: 70deg; } .wine__grid li:nth-child(3) { --a: 160deg; } .wine__grid li:nth-child(4) { --a: 30deg; }
.wine__grid li:nth-child(5) { --a: 200deg; } .wine__grid li:nth-child(6) { --a: 95deg; } .wine__grid li:nth-child(7) { --a: 140deg; } .wine__grid li:nth-child(8) { --a: 50deg; }
/* 格子の枠は別の要素で敷く（文字を切り抜くため、li の背景は文字専用） */
.wine__grid { background: transparent; border: 0; gap: 0; }
.wine__grid li { box-shadow: inset 0 0 0 .5px rgba(233, 211, 176, .22); }
@media (min-width: 768px) { .wine__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .wine { padding: 200px 48px; }
  .wine__cols { grid-template-columns: 5fr 6fr; gap: 96px; align-items: end; }
}
.is-motion .wine__grid li.is-shine { animation: shine 2.6s var(--ease) both; }
@keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.wine__grid li { background-size: 260% 100%; background-position: 50% 50%; }

/* ===== ご予約 ===== */
.reserve { padding: 120px 20px; text-align: center; }
.reserve__inner { max-width: 880px; margin: 0 auto; }
.reserve .label { justify-content: center; }
.reserve .label::after { content: ""; width: 40px; height: 1px; background: currentColor; }
.plans { display: grid; gap: 16px; margin: 48px 0; text-align: left; }
.plan { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 4px; }
.plan h3 { font-family: var(--font-ja); font-size: 22px; letter-spacing: .1em; color: var(--head); margin-bottom: 4px; }
.plan__price { margin-top: 8px; color: var(--label); }
.reserve__tel { margin-top: 24px; font-size: 15px; color: var(--sub); }
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 900px) { .reserve { padding: 200px 20px; } }

/* ===== 店舗情報 ===== */
.info { padding: 0 20px 120px; }
.info__inner { max-width: 880px; margin: 0 auto; }
.info__list { margin: 32px 0 0; }
.info__list div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info__list dt { font-family: var(--font-ja); color: var(--head); }
.info__list dd { margin: 0; }
@media (min-width: 768px) { .info__list div { grid-template-columns: 8em 1fr; gap: 24px; } }

/* ===== フッター ===== */
.footer { background: var(--c-dark); color: #e9e1d6; padding: 72px 20px 32px; text-align: center; font-size: 15px; }
.footer__logo { font-family: var(--font-en); font-size: 40px; letter-spacing: .1em; color: var(--c-gold); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin: 24px 0; }
.footer__nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__fiction { margin-top: 24px; }

/* 動く版：区切りの背景を透かし、ページ全体（body）の色を変える（D01） */
.is-motion main > section.tone-bg, .is-motion main > section.tone-sand { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}