/* Encore — 大人のためのピアノ教室
   深いボルドー × セリフのクラシック。カレンダー部品は day18 Skill の booking.css を土台に配色だけ差し替え。 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 世界観＝ピアノそのもの：黒（ピアノブラック）× 金 × 赤（フェルトの赤） */
  --ink:   #1A1917;   /* 文字・◯（空き）。ほぼ黒 */
  --soft:  #8A8681;   /* 補助テキスト（ニュートラルグレー） */
  --line:  #E7E6E3;   /* 罫線（ニュートラル） */
  --sand:  #F4F4F2;   /* ヘッダ・時間ラベルの地（クールな薄グレー） */
  --paper: #FFFFFF;   /* 背景＝白（雑誌の白ページ） */
  --card:  #FFFFFF;
  --black: #14120F;   /* ピアノブラック（ヘッダ・フッター） */
  --gold:  #BE9A4E;   /* 金（Encoreの文字・罫・ラベル） */
  --gold2: #A6833B;   /* 濃い金 */
  --wine:  #D40F28;   /* 赤＝ピアノのフェルトの赤（パキッとしたクリムゾン・あしらいの細線） */
  --wine2: #14120F;   /* ＝ピアノブラック（フッター地に流用） */
  --wine-br: #E51B31; /* 白黒写真の上で映えるさらに鮮やかな赤 */
  --x:     #CBC7C1;   /* ✕（満席） */
}

html { scroll-behavior: smooth; }
body {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  color: var(--ink); background: var(--paper); line-height: 1.9;
  font-size: 15.5px; font-weight: 400; -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* 共通ラベル・見出し */
.sec-eyebrow {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .28em; color: var(--gold2); text-transform: uppercase;
}
.sec-eyebrow::after { content: ""; display: inline-block; width: 24px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-left: 12px; }
.sec-title {
  font-family: "Noto Serif JP", serif; font-weight: 600; font-size: 27px;
  letter-spacing: .03em; margin: 8px 0 16px; line-height: 1.4;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: rgba(20,18,15,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(190,154,78,.28);
}
.topbar__logo {
  font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 26px;
  font-style: italic; color: #F5EFE7; text-decoration: none; letter-spacing: .02em;
}
.topbar__nav { display: flex; gap: 22px; }
.topbar__nav a {
  font-family: "Inter", sans-serif; font-size: 12.5px; letter-spacing: .06em;
  color: rgba(247,241,234,.82); text-decoration: none;
}
.topbar__nav a:hover { color: var(--gold); }
@media (max-width: 560px){ .topbar__nav { gap: 15px; } .topbar__nav a { font-size: 11.5px; } }

/* ---------- FV ---------- */
.fv {
  background:
    radial-gradient(78% 56% at 50% 46%, rgba(12,11,11,.44) 0%, rgba(14,12,12,.14) 52%, transparent 78%),
    linear-gradient(180deg, rgba(18,16,16,.30) 0%, rgba(16,14,14,.22) 50%, rgba(12,10,10,.52) 100%),
    url("assets/fv-bw.jpg") center 34% / cover no-repeat;
  color: #F7F1EA; text-align: center;
  padding: 104px 24px 116px; position: relative; overflow: hidden;
}
.fv::before {  /* 差し色＝ワインの細い帯（下端） */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--wine-br) 22%, var(--wine-br) 78%, transparent);
}
.fv__inner { max-width: 680px; margin: 0 auto; position: relative; }
.fv__eyebrow {
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: .34em;
  color: rgba(247,241,234,.82); text-transform: uppercase;
}
.fv__eyebrow::after { content: ""; display: block; width: 28px; height: 1px;
  background: var(--gold); margin: 13px auto 0; }
.fv__title {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: clamp(72px, 17vw, 128px); line-height: 1; letter-spacing: .01em;
  margin: 14px 0 4px; color: #F8F3EC;
  text-shadow: 0 2px 34px rgba(0,0,0,.42);
}
.fv__sub { font-size: 18px; font-weight: 500; letter-spacing: .1em; color: #EBD9CC; margin-bottom: 26px; }
.fv__lead { font-size: 15px; line-height: 2.2; color: rgba(246,236,226,.86); font-weight: 300; }
.fv__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .1em;
  color: #1A1917; text-decoration: none; font-weight: 600;
  background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 13px 30px;
  transition: all .2s; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.fv__cta span { font-size: 15px; }
.fv__cta:hover { background: var(--gold2); border-color: var(--gold2); }

/* ---------- 予約カレンダー（day18 Skill の部品・配色をワインに） ---------- */
.booking { padding: 72px 22px 8px; }
.booking__head { margin-bottom: 26px; }
.cal__lead { font-size: 14.5px; color: var(--soft); margin-top: 6px; }
.cal__lead b { color: var(--ink); font-weight: 600; }

.course__label { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; color: var(--soft); margin: 0 0 9px; letter-spacing: .04em; }
.course { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.course--time { margin-bottom: 18px; }
.crow {
  font-family: "Noto Serif JP", serif; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: all .15s; user-select: none;
}
.crow small { color: var(--soft); margin-left: 7px; font-size: 12px; }
.crow.is-on { background: var(--ink); border-color: var(--ink); color: #F5EFE7; }
.crow.is-on small { color: rgba(245,239,231,.66); }
.course__single { font-size: 14px; color: var(--ink); padding: 8px 2px; }
.course__total { font-size: 13px; color: var(--soft); margin-bottom: 22px; }
.course__total b { color: var(--ink); font-size: 17px; font-weight: 600; }

.cal__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; }
.cal__navbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); font-size: 18px; color: var(--gold2); cursor: pointer; line-height: 1; }
.cal__navbtn:disabled { opacity: .32; cursor: default; }
.cal__range { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; min-width: 170px; text-align: center; letter-spacing: .03em; }

.cal__grid { display: grid; grid-template-columns: 80px repeat(7, 1fr);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.cal__cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cal__cell:nth-child(8n) { border-right: none; }
.cal__grid > .cal__cell:nth-last-child(-n+8) { border-bottom: none; }
.cal__head { background: var(--sand); font-weight: 600; font-size: 12px; flex-direction: column; gap: 1px; padding: 7px 0; }
.cal__head small { font-family: "Cormorant Garamond", serif; font-size: 15px; font-weight: 600; color: var(--soft); }
.cal__head.is-today { background: var(--ink); color: #F5EFE7; }
.cal__head.is-today small { color: rgba(245,239,231,.82); }
.cal__head.is-past { opacity: .4; }
.cal__timelabel { background: var(--sand); font-family: "Cormorant Garamond", serif; font-size: 15px; font-weight: 600; color: var(--soft);
  justify-content: flex-end; padding-right: 10px; }
.cal__mark { font-size: 16px; font-weight: 500; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; cursor: default; }
.cal__mark--o { color: var(--ink); cursor: pointer; }
.cal__mark--x { color: var(--x); }
.cal__mark--closed { color: #DED3C4; }
.cal__mark--o:hover { background: rgba(190,154,78,.14); }
.cal__mark.is-active { background: var(--gold); color: #1A1917; border-radius: 5px; }

.cal__legend { font-size: 12px; color: var(--soft); margin-top: 15px;
  display: flex; flex-wrap: nowrap; gap: 16px; white-space: nowrap; overflow-x: auto; }
.cal__legend .lgi { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lg { font-weight: 600; }
.lg--o { color: var(--ink); } .lg--x { color: var(--x); } .lg--c { color: #DED3C4; }
.cal__note { font-size: 12.5px; color: var(--soft); margin-top: 10px; }

/* 予約CTA */
.cta { margin-top: 28px; }
.cta__card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; text-align: center; box-shadow: 0 12px 34px rgba(87,22,37,.06); }
.cta__label { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--gold2); text-transform: uppercase; }
.cta__summary { font-size: 18px; font-weight: 600; margin: 12px 0 22px; }
.cta__summary.is-placeholder { color: var(--soft); font-size: 14px; font-weight: 400; }
.cta__buttons { display: flex; flex-direction: column; gap: 10px; }
.btn { display: block; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 11px; padding: 15px 16px; font-family: "Noto Serif JP", serif; }
.btn--line { background: var(--gold); color: #1A1917; letter-spacing: .04em; }
.btn--line:hover { background: var(--gold2); }
.cta__note { margin-top: 15px; font-size: 12.5px; color: var(--soft); }

/* メニューと料金 */
.menu { margin-top: 52px; }
.menu__list { border-top: 1px solid var(--line); margin-top: 14px; }
.menu__list > div { display: flex; align-items: baseline; gap: 12px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.menu__list dt { font-weight: 600; }
.menu__list dt small { font-weight: 400; color: var(--soft); font-size: 12px; margin-left: 12px; }
.menu__list dd { margin-left: auto; font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; white-space: nowrap; }

/* ---------- レッスンについて ---------- */
.lesson { padding: 70px 22px; }
.lesson__grid { display: grid; gap: 30px; margin-top: 24px; }
.lesson__no { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 34px; color: var(--gold); line-height: 1; }
.lesson__item h3 { font-size: 18px; font-weight: 600; margin: 8px 0 6px; }
.lesson__item p { font-size: 14.5px; color: #5f574f; line-height: 2; }
@media (min-width: 720px){ .lesson__grid { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

/* ---------- 白黒の帯（フルブリード） ---------- */
.band {
  position: relative; min-height: 380px; display: flex; align-items: center;
  background:
    linear-gradient(90deg, rgba(15,13,11,.72) 0%, rgba(15,13,11,.34) 46%, rgba(15,13,11,.10) 100%),
    url("assets/band.jpg") center 40% / cover no-repeat;
}
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--wine) 0%, var(--wine) 34%, transparent 60%); }
.band__cap { max-width: 760px; width: 100%; margin: 0 auto; padding: 0 30px; color: #F7F1EA; }
.band__eyebrow { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: .3em; color: var(--gold); }
.band__eyebrow::after { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--gold); vertical-align: middle; margin-left: 12px; }
.band__text { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 27px; line-height: 1.7; margin-top: 12px; letter-spacing: .03em; }

/* ---------- 講師のひとこと ---------- */
.teacher { text-align: center; padding: 20px 22px 74px; }
.teacher__quote {
  font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 21px; line-height: 2.1;
  color: var(--ink); margin: 18px 0 14px; letter-spacing: .02em;
}
.teacher__name { font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .1em; color: var(--soft); }

/* ---------- アクセス ---------- */
.access { padding: 8px 22px 80px; }
.access__list { border-top: 1px solid var(--line); margin-top: 14px; }
.access__list > div { display: flex; gap: 20px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.access__list dt { font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .08em; color: var(--gold2); min-width: 68px; padding-top: 3px; }
.access__list dd { font-size: 15px; }

/* ---------- footer ---------- */
.site-footer { background: var(--wine2); color: rgba(246,236,226,.86); text-align: center; padding: 50px 22px 44px; }
.site-footer__logo { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 30px; color: #F5EFE7; }
.site-footer__cp { font-size: 12px; margin: 8px 0 18px; color: rgba(246,236,226,.6); }
.site-footer__making { font-family: "Inter", sans-serif; font-size: 12.5px; letter-spacing: .06em; color: #EBD9CC; text-decoration: none; border-bottom: 1px solid rgba(235,217,204,.4); padding-bottom: 2px; }
.site-footer__making:hover { color: #fff; }

@media (min-width: 600px) {
  .cta__buttons { flex-direction: row; justify-content: center; }
  .cta__buttons .btn { min-width: 260px; }
}