/*
  ICHIRIN サイト デザイントークン
  一保堂(明朝×ゴシックの二層構造・広い余白) + とらや(季節パステルのアクセント) のハイブリッド。
  出典: 和風_awesome-design-md-jp-main/design-md/ippodo, /toraya の DESIGN.md 実測値を基に、
  長文コンテンツの可読性を保つため本文ウェイト・letter-spacingは一保堂よりやや控えめに調整。
*/

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root{
  /* Color: Surface */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f4f0;
  --color-bg-deep: #22384a;      /* とらや型 深紺サーフェス(フッター等) */

  /* Color: Text */
  --color-text-heading: #262421;  /* とらやに寄せてやや締めた黒 */
  --color-text-body: #383430;
  --color-text-muted: #8a8378;
  --color-text-inverse: #f8f6f2;

  /* Color: Brand */
  --color-brand: #7c4a52;       /* 梅紫 - ICHIRINのアクセント(見出し添え・ラベル用) */
  --color-brand-dark: #5f393f;
  --color-brand-soft: #f2e6e4;

  /* Color: Navy(とらや型 深紺) - CTA・フッターの主構造色 */
  --color-navy: #27455c;
  --color-navy-dark: #1b3140;
  --color-navy-soft: #eaf0f3;

  /* Color: Border */
  --color-border: #ddd6cb;
  --color-border-strong: #b9ae9d;
  --color-border-cta: #c7c2b8;

  /* Seasonal pastels (とらや型) - レッスン種別・季節企画カードのアクセント用途に限定使用 */
  --pastel-sakura: #eee0e9;
  --pastel-peach:  #e6d4de;
  --pastel-matcha: #d6e2db;
  --pastel-wakaba: #c8d7cd;

  /* Semantic */
  --color-danger: #b0473f;
  --color-success: #4e7a5e;

  /* Typography */
  --font-mincho: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;

  /* Spacing scale (8pxグリッド。縦リズムはやや締めて統一) */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 56px;
  --space-xxl: 96px;

  /* Layout */
  --container-max: 1120px;
  --container-pad: 20px;
  --radius-card: 2px;
  --radius-pill: 23px;       /* とらや型CTAピル */
  --radius-pill-soft: 999px; /* 明朝の細ピル(補助リンク用) */

  color-scheme: light;
}

@media (min-width: 750px){
  :root{ --container-pad: 48px; }
}

*, *::before, *::after{ box-sizing: border-box; }

/* [hidden]は.grid/.flex等のdisplay指定クラスと併用されると
   同じ詳細度・後勝ちでdisplay:noneが上書きされてしまうため、常に最優先で効かせる */
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-break: normal;
  overflow-wrap: break-word;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4{
  font-family: var(--font-mincho);
  font-weight: 500;
  color: var(--color-text-heading);
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-s);
}

h1{ font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.08em; }
h2{ font-size: clamp(22px, 3vw, 30px); }
h3{ font-size: clamp(18px, 2.4vw, 22px); }
h4{ font-size: 16px; font-family: var(--font-gothic); font-weight: 700; letter-spacing: 0.04em; }

p{ margin: 0 0 var(--space-s); }

.eyebrow{
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-brand);
  margin: 0 0 var(--space-xs);
}

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section{
  padding: var(--space-xl) 0;
}

.section--alt{
  background: var(--color-bg-alt);
}

.section-head{
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-m);
}

.lead{
  font-size: 18px;
  line-height: 2.0;
  color: var(--color-text-body);
}

/* ==== Header / Nav ==== */

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo{
  font-family: var(--font-mincho);
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.logo small{
  display: block;
  font-family: var(--font-gothic);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.nav{
  display: none;
  align-items: center;
  gap: var(--space-l);
}

.nav__list{
  list-style: none;
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
}

.nav__list a{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-heading);
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.nav__list a:hover,
.nav__list a[aria-current="page"]{
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.nav-toggle{
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span{
  width: 22px; height: 1px; background: var(--color-text-heading);
}

.mobile-nav{
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.mobile-nav.is-open{ display: flex; }
.mobile-nav a{
  padding: 16px var(--container-pad);
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  letter-spacing: 0.06em;
}

@media (min-width: 990px){
  .nav{ display: flex; }
  .nav-toggle{ display: none; }
  .mobile-nav{ display: none !important; }
}

/* ==== Buttons ==== */

/* とらや型: 白塗り + 2px枠 + radius 23px + ゴシックbold が基本CTA */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 30px;
  height: 52px;
  border-radius: var(--radius-pill);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 2px solid var(--color-border-cta);
  background: #fff;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover{ border-color: var(--color-text-heading); background: var(--color-bg-alt); }

/* 予約など最重要CTAのみ紺塗り(とらや第二CTA相当) */
.btn--primary{
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.btn--primary:hover{ background: var(--color-navy-dark); border-color: var(--color-navy-dark); }

.btn--ghost{
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-body);
}
.btn--ghost:hover{ background: var(--color-bg-alt); color: var(--color-text-heading); border-color: var(--color-text-heading); }

/* 一保堂型の明朝細ピル: 本文中の控えめな「詳しく見る」用 */
.btn--mincho{
  background: transparent;
  border: 1px solid var(--color-text-body);
  border-radius: var(--radius-pill-soft);
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-text-body);
}
.btn--mincho:hover{ background: var(--color-text-heading); border-color: var(--color-text-heading); color: #fff; }

.btn--sm{ height: 44px; padding: 0 22px; font-size: 13px; }
.btn--block{ width: 100%; }

.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

/* ==== Cards ==== */

.card{
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}

.card--pastel-sakura{ background: var(--pastel-sakura); border-color: transparent; }
.card--pastel-peach{ background: var(--pastel-peach); border-color: transparent; }
.card--pastel-matcha{ background: var(--pastel-matcha); border-color: transparent; }
.card--pastel-wakaba{ background: var(--pastel-wakaba); border-color: transparent; }

.grid{
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .grid--2{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 990px){
  .grid--4{ grid-template-columns: repeat(4, 1fr); }
}

.list-plain{ margin: 0; padding: 0; list-style: none; }
.list-check{ margin: 0; padding: 0; list-style: none; }
.list-check li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.list-check li::before{
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 12px;
  border: 1px solid var(--color-brand);
  border-radius: 50%;
}

/* ==== Hero ==== */

.hero{
  position: relative;
  padding: var(--space-xxl) 0 var(--space-xl);
  overflow: hidden;
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.92) 78%);
}
.hero__content{ max-width: 640px; }
.hero__content p{ font-size: 17px; }

/* ==== Page header (sub pages) ==== */
/* ichirin102.png 実寸 1600×417。img で表示（CSS背景のみだと未コミット時など真っ黒に見える） */

.page-head{
  --page-head-ratio: 1600 / 417;
  --page-head-art-opacity: 0.62;
  --page-head-veil: rgba(255, 255, 255, 0.32);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--page-head-ratio);
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--color-text-body);
  /* ichirin102 は中央が透過。黒ではなくサイト基調の明るい面に合わせる */
  background-color: var(--color-bg-alt);
}
.page-head__art{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--page-head-art-opacity);
  pointer-events: none;
  user-select: none;
}
.page-head::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--page-head-veil);
  pointer-events: none;
}
.page-head .container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-s) var(--container-pad);
}
.page-head .eyebrow{
  color: var(--color-brand);
  margin-bottom: var(--space-xs);
}
.page-head h1{
  margin-bottom: 0;
  font-size: clamp(22px, 3.2vw, 36px);
  color: var(--color-text-heading);
  text-shadow: 0 1px 12px rgba(246, 244, 240, 0.85);
}

/* ==== Steps ==== */

.steps{
  counter-reset: step;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .steps{ grid-template-columns: repeat(4, 1fr); }
}
.step{
  position: relative;
  padding-top: 12px;
}
.step::before{
  counter-increment: step;
  content: "STEP " counter(step);
  display: block;
  font-family: var(--font-gothic);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-brand);
  margin-bottom: 10px;
}

/* ==== FAQ ==== */

.faq-item{
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-s) 0;
}
.faq-item summary{
  cursor: pointer;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-heading);
  padding-right: 24px;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "+";
  position: absolute; right: 0; top: -2px;
  font-size: 20px; color: var(--color-brand);
}
.faq-item[open] summary::after{ content: "−"; }
.faq-item p{
  margin-top: var(--space-xs);
  color: var(--color-text-body);
}

/* ==== Table ==== */

.table-plain{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table-plain th, .table-plain td{
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.table-plain th{
  width: 34%;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ==== Form ==== */

.form-field{ margin-bottom: var(--space-m); }
.form-field label{
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: var(--color-text-heading);
}
.form-field .required{
  color: var(--color-brand);
  font-size: 11px;
  margin-left: 6px;
  border: 1px solid var(--color-brand);
  border-radius: 3px;
  padding: 1px 6px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  font: inherit;
  font-family: var(--font-gothic);
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text-heading);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--color-brand);
}
.form-note{ font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.form-status{
  margin-top: var(--space-s);
  padding: var(--space-s);
  border-radius: 4px;
  display: none;
  font-size: 14px;
}
.form-status.is-visible{ display: block; }
.form-status.is-success{ background: #eaf1ec; color: var(--color-success); }
.form-status.is-error{ background: #f6e9e8; color: var(--color-danger); }

/* ==== Photo gallery ==== */

.gallery-grid{
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .gallery-grid{
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-auto-rows: 220px;
  }
  .gallery-item--tall{ grid-row: span 2; }
}
.gallery-item{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  height: 260px;
}
@media (min-width: 700px){ .gallery-item{ height: 100%; } }
.gallery-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-s) var(--space-m);
  background: linear-gradient(0deg, rgba(20,18,16,.62), rgba(20,18,16,0));
  color: #fff;
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* ==== Placeholder photo (未確保の写真枠) ==== */

.photo-placeholder{
  aspect-ratio: 4/3;
  border: 1px dashed var(--color-border-strong);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: var(--space-s);
}

/* ==== Course card (選択状態の視覚化) ==== */

.course-card{
  border-width: 1px;
  transition: border-color .15s ease, background .15s ease;
}
.course-card:has(input:checked){
  border-color: var(--color-navy);
  background: var(--color-navy-soft);
}

/* ==== Date chip (固定開催日から選ぶ) ==== */

.date-chip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 14px 18px;
  margin-bottom: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s ease, background .15s ease;
}
.date-chip:has(input:checked){
  border-color: var(--color-navy);
  background: var(--color-navy-soft);
}
.date-chip input{ width: auto; margin-right: 12px; }
.date-chip__status{
  margin-left: auto;
  font-size: 12px;
  color: var(--color-success);
  white-space: nowrap;
}
.date-chip__status--few{ color: var(--color-brand); }

/* ==== Notice (補足・注意) ==== */

.notice{
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-alt);
  padding: var(--space-m);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-text-body);
}
.notice strong{ color: var(--color-brand); }
.notice > strong{ display: block; }
.notice > :first-child{ margin-top: 0; }
.notice > :last-child{ margin-bottom: 0; }
.notice > strong + p,
.notice > strong + ul{
  margin-top: var(--space-xs);
}
.notice > ul:not(.list-check){
  padding-left: 1.2em;
}
.notice .list-check{ padding-left: 0; }
.notice .list-check li:last-child{ margin-bottom: 0; }
.notice--danger{ border-color: var(--color-danger); }

/* ==== Footer ==== */

.site-footer{
  background: var(--color-bg-deep);
  color: var(--color-text-inverse);
  padding: var(--space-xl) 0 var(--space-m);
}
.site-footer a{ color: var(--color-text-inverse); opacity: .82; }
.site-footer a:hover{ opacity: 1; }
.footer-grid{
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 750px){
  .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-grid h4{
  font-family: var(--font-mincho);
  font-weight: 500;
  color: var(--color-text-inverse);
  font-size: 15px;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-s);
}
.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 10px; font-size: 14px; }
.footer-bottom{
  padding-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  font-size: 12px;
  opacity: .7;
}

/* ==== Utility ==== */

.u-center{ text-align: center; }
.u-muted{ color: var(--color-text-muted); }
.u-mt-l{ margin-top: var(--space-l); }
.u-mt-m{ margin-top: var(--space-m); }
.u-mb-m{ margin-bottom: var(--space-m); }
/* 横中央揃え。margin 一括指定と違い、u-mt-* の上余白を消さない */
.u-mx-auto{ margin-inline: auto; }
.u-measure-sm{ max-width: 720px; margin-inline: auto; }
.u-measure{ max-width: 760px; margin-inline: auto; }
.u-measure-wide{ max-width: 820px; margin-inline: auto; }
.u-measure-form{ max-width: 640px; margin-inline: auto; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}