/* ==========================================================================
   B-tria Spica — コンポーネント
   ========================================================================== */

/* ---------- スクロール連動フェードイン ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.3;
}
.btn--primary {
  /* 塗り自体はブランドカラー#00C2CBに、上に乗る白文字はAA未達のため
     アクセシブルな濃色（--color-accent-dark）を塗りに使う */
  background: var(--color-accent-dark);
  color: var(--color-accent-ink);
}
.btn--primary:hover { background: #005b60; color: var(--color-accent-ink); }
.btn--outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.btn--outline:hover { background: var(--color-accent-soft); }
.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--space-2) var(--space-4); min-height: 38px; font-size: var(--fs-small); }

/* ---------- Breadcrumb（現在位置） ---------- */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-4) 0 0;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: var(--space-1);
  color: var(--color-border);
}
.breadcrumb a { color: var(--color-ink-muted); }
.breadcrumb a:hover { color: var(--color-accent-dark); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 100%);
}
.hero__eyebrow {
  font-family: var(--font-display);
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: var(--fs-lead);
  margin-bottom: var(--space-3);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-muted);
  max-width: 42em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Card base ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---------- 目的別ナビ（Purpose grid） ---------- */
.purpose-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .purpose-grid { grid-template-columns: repeat(5, 1fr); }
}
.purpose-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: var(--tap-min);
}
.purpose-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.purpose-card__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  /* 白アイコンが読める濃さまで落としたブランドカラー派生色を背景に使用 */
  background: var(--color-accent-mid);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.purpose-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
}
.purpose-card__arrow {
  margin-top: auto;
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: var(--fs-small);
}

/* ---------- 今後の予定 ---------- */
.upcoming-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .upcoming-grid { grid-template-columns: 1fr 1fr; }
}
.upcoming-col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.upcoming-col__head h3 { margin: 0; }
.upcoming-col__more { font-size: var(--fs-small); font-weight: 700; text-decoration: none; }

.schedule-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.schedule-card__date {
  flex: none;
  width: 64px;
  text-align: center;
  font-family: var(--font-display);
}
.schedule-card__date .day { font-size: 1.5rem; font-weight: 700; line-height: 1; display: block; }
.schedule-card__date .month { font-size: var(--fs-small); color: var(--color-ink-muted); }
.schedule-card__body { flex: 1; min-width: 0; }
.schedule-card__title { font-weight: 700; margin-bottom: var(--space-1); }
.schedule-card__meta { font-size: var(--fs-small); color: var(--color-ink-muted); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  flex: none;
}
.status-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge--open  { background: var(--status-open-soft);  color: var(--status-open); }
.status-badge--few   { background: var(--status-few-soft);   color: var(--status-few); }
.status-badge--full  { background: var(--status-full-soft);  color: var(--status-full); }
.status-badge--closed{ background: var(--status-closed-soft);color: var(--status-closed); }

.empty-note {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* ---------- NEWS ---------- */
.news-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--color-border);
}
.news-list li {
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.news-list a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
}
.news-list a:hover { background: var(--color-accent-soft); }
.news-list time {
  font-family: var(--font-display);
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  flex: none;
  width: 6.5em;
}
.news-tag {
  flex: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.news-list__title { flex: 1; min-width: 12em; }

/* ---------- 仕事の依頼 CTA群 ---------- */
.service-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service-card h3 { margin-bottom: 0; }
.service-card p { color: var(--color-ink-muted); margin-bottom: var(--space-2); }
/* 説明文の行数がカードごとに違っても、ボタンは常に下端で揃える */
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 汎用ティーザー（Original Aroma / One+ sense 等） ---------- */
.teaser {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .teaser { grid-template-columns: 1fr 1fr; }
  .teaser--reverse { direction: rtl; }
  .teaser--reverse > * { direction: ltr; }
}
.teaser__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  overflow: hidden;
}

/* ---------- SNS埋め込み ---------- */
.sns-embed-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.sns-embed-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .sns-embed-row { grid-template-columns: 1fr 1fr; }
}
.sns-embed {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-4);
  overflow: hidden;
}
.sns-embed--instagram { display: flex; flex-direction: column; }
.sns-embed__instagram-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 640px) {
  .sns-embed__instagram-grid { grid-template-columns: repeat(2, 1fr); }
}
.sns-embed__instagram-grid .instagram-media { width: 100% !important; max-width: 280px !important; min-width: 0 !important; }
.sns-embed__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-3);
}
.sns-embed__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}
.sns-embed--facebook .fb-page,
.sns-embed--facebook iframe { width: 100% !important; }
.sns-embed--x .twitter-timeline { display: block; width: 100%; }
.sns-embed__hashtag { margin: var(--space-4) 0 0; text-align: center; }

/* ---------- Contact CTA バンド ---------- */
.cta-band {
  /* 常に濃色カードとして固定表示するため、ライト/ダークモードで反転する
     --color-ink-strong ではなく固定色を使う（ダークモード時に背景が白に
     反転し、白文字が読めなくなる不具合の対策） */
  background: #2e2e2e;
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #d4d4d4; margin: 0 auto var(--space-5); }

/* ---------- アコーディオン（蛇腹） ---------- */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}
.accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-min);
}
.accordion__summary h2,
.accordion__summary h3 { order: 2; flex: 1; }
.accordion__chevron { order: 1; }
.accordion__summary::-webkit-details-marker,
.accordion__summary::marker { display: none; content: ""; }
/* summary内の見出しは、記事の見出しではなくアコーディオンの操作行として
   コンパクトな1行に収める（見出しタグ自体は意味構造として維持） */
.accordion__summary h2,
.accordion__summary h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.accordion__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-accent-dark);
  transition: transform .15s ease;
}
details[open] > .accordion__summary .accordion__chevron { transform: rotate(180deg); }
.accordion__body {
  padding: 0 var(--space-5) var(--space-5);
}

/* ---------- メニュー：写真つき（クリックでライトボックス表示） ---------- */
.menu-item--clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.menu-item--clickable:hover,
.menu-item--clickable:focus-visible {
  background: var(--color-surface-alt);
}
.menu-item__photo-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent-dark);
}
.menu-item__photo-hint svg { width: 16px; height: 16px; }

/* ---------- ライトボックス ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 20, 20, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.lightbox__panel {
  max-width: min(90vw, 640px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.lightbox__img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.lightbox__caption {
  color: #fff;
  font-size: var(--fs-small);
  text-align: center;
  margin: 0;
}
.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- オリジナルブレンド一覧 ---------- */
.blend-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .blend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blend-grid { grid-template-columns: repeat(3, 1fr); } }
.blend-card { overflow: hidden; display: flex; flex-direction: column; }
.blend-card__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}
.blend-card__media--photo { padding: 0; }
.blend-card__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blend-card__body { padding: var(--space-5); }
.blend-card__body h3 { font-size: 1.15rem; margin: var(--space-3) 0 0; }
.blend-card__subtitle { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--color-ink-muted); margin-top: 2px; }
.blend-card__date { font-size: var(--fs-small); color: var(--color-ink-muted); margin: var(--space-2) 0 0; }
.blend-card__note { font-size: var(--fs-small); color: var(--color-ink-muted); margin: 4px 0 0; }
.blend-card__tag {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin: var(--space-2) 0 0;
}
.blend-card__story { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-small); font-weight: 700; }

/* ---------- 企業コラボ写真カード ---------- */
.collab-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .collab-grid { grid-template-columns: repeat(3, 1fr); }
}
.collab-photo-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.collab-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.collab-photo-card p {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

/* ---------- Googleマップ埋め込み ---------- */
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  aspect-ratio: 16 / 9;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 体験メニュー一覧 ---------- */
.menu-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.menu-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.menu-item__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
.menu-item__name { font-weight: 600; }
.menu-item__badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.menu-item__price {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.menu-item__options {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-item__price-option {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  font-family: var(--font-display);
}
.menu-item__note {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  margin: var(--space-2) 0 0;
}

/* ---------- 体験教室：月間カレンダー（一覧形式） ---------- */
.cal-month-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink-strong);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.cal-month-nav:hover { background: var(--color-surface-alt); }
.cal-month-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.cal-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.cal-row--past { opacity: .45; }
.cal-row__date {
  flex: none;
  width: 44px;
  text-align: center;
  font-family: var(--font-display);
}
.cal-row__day { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.cal-row__wd { display: block; font-size: var(--fs-small); color: var(--color-ink-muted); }
.cal-row__body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cal-row__detail { font-size: var(--fs-small); color: var(--color-ink-muted); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend span::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.cal-legend .is-open { color: var(--status-open); }
.cal-legend .is-evening { color: var(--status-few); }
.cal-legend .is-closed { color: var(--status-closed); }

/* ---------- ミニカレンダー（TOPページ：直近の体験教室） ---------- */
.mini-calendar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
}
.mini-calendar__month {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-4);
}
.mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mini-calendar__dow {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  padding-bottom: var(--space-2);
}
.mini-calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 700;
}
.mini-calendar__day--blank { visibility: hidden; }
.mini-calendar__day--open { background: var(--status-open-soft); color: var(--status-open); }
.mini-calendar__day--evening { background: var(--status-few-soft); color: var(--status-few); }
.mini-calendar__day--closed,
.mini-calendar__day--event { background: var(--status-closed-soft); color: var(--status-closed); font-weight: 400; }
.mini-calendar__day--past { opacity: .4; }
.mini-calendar__day--today { box-shadow: 0 0 0 2px var(--color-accent-dark) inset; }
.mini-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-4);
}
.mini-calendar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.mini-calendar__legend span::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.mini-calendar__legend .is-open { color: var(--status-open); }
.mini-calendar__legend .is-evening { color: var(--status-few); }
.mini-calendar__legend .is-closed { color: var(--status-closed); }

/* ---------- 予約チャンネル ---------- */
.booking-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .booking-grid { grid-template-columns: 1fr 1fr; }
}
.booking-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.booking-card__tag {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}

/* ---------- 活動記録：年タブ ---------- */
.year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.year-tab {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  cursor: pointer;
}
.year-tab:hover { border-color: var(--color-accent-dark); }
.year-tab--active {
  border-color: var(--color-accent-dark);
  background: var(--color-accent-dark);
  color: #fff;
}
.year-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.year-stat {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
}
.genre-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.genre-tab {
  font-size: var(--fs-small);
  padding: var(--space-1) var(--space-4);
}
.year-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}
.activity-item:last-child { border-bottom: none; }
.activity-item__date {
  flex: none;
  width: 3.6em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: var(--fs-small);
}
.activity-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}
.activity-item__title { font-weight: 700; }
.activity-item__venue,
.activity-item__note {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.activity-item__badges {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 2px;
}
.item-type-badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.item-type-badge--event { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.item-type-badge--workshop-hosted { color: #9a5b00; background: #fdf0da; }
.item-type-badge--workshop-own { color: #9a5b00; background: #fdf0da; border: 1px solid #e8c780; }
.item-type-badge--lecture { color: #5b4b9a; background: #ece8f9; }
.item-type-badge--milestone { color: var(--color-ink-muted); background: var(--color-surface-alt); }

/* ---------- ショップ：商品カード ---------- */
.product-card { overflow: hidden; display: flex; flex-direction: column; }
.product-card__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}
.product-card__media--photo { padding: 0; }
.product-card__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.product-card__body h3 { font-size: 1.15rem; margin: var(--space-3) 0 0; }
.product-card__note { font-size: var(--fs-small); color: var(--color-ink-muted); margin: 4px 0 0; }
.product-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-top: var(--space-3); }
/* バリエーション選択カード（Kidsイラストラベル精油・ステッカー共通）：
   プルダウンで購入するデザインを選び、全種類のサムネイル一覧で見比べられる。
   スマホは縦積み、PC幅では本体とサムネイル一覧を左右に並べる
   （1商品だけでもblend-gridの1カラム分に収まらないよう、グリッド全幅を使う） */
.variant-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.variant-card__main { display: flex; flex-direction: column; min-width: 0; }
.variant-card__gallery { min-width: 0; padding: var(--space-5); border-top: 1px solid var(--color-border); }
@media (min-width: 720px) {
  /* grid-templateで幅を厳密に固定し、flexのbasis計算によるはみ出しを避ける */
  .variant-card { display: grid; grid-template-columns: 3fr 2fr; align-items: stretch; }
  .variant-card__gallery { border-top: none; border-left: 1px solid var(--color-border); }
}
/* メイン画像を少し控えめなサイズに（もとの4:3いっぱいだと大きすぎるため） */
.variant-card__main .product-card__media--photo {
  max-width: 85%;
  margin: 0 auto;
}
.variant-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.variant-thumb {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  cursor: pointer;
}
.variant-thumb:hover, .variant-thumb:focus-visible { border-color: var(--color-accent-dark); }
.variant-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 文字入りの完成画像（Kidsイラストラベル精油・ステッカー）は切り抜かず
   全体を表示する（余白ができて多少小さく見えても良いという判断） */
.product-card__media--contain { background: var(--color-surface-alt); }
.product-card__media--contain img,
.variant-thumb.product-card__media--contain img { object-fit: contain; object-position: center; }

.variant-select {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.product-card__controls { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.product-card__in-cart { color: var(--color-accent-dark); font-weight: 700; margin-top: var(--space-2); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.qty-stepper button {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-ink-strong);
}
.qty-stepper button:disabled { opacity: .35; cursor: default; }
.qty-stepper__value { width: 2em; text-align: center; font-family: var(--font-display); font-weight: 700; }

/* ---------- ショップ：カートドロワー ---------- */
.cart-toggle { position: relative; }
.cart-toggle__badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, .5);
  z-index: 310;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface);
  z-index: 320;
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer__list { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.cart-line { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); align-items: center; }
.cart-line__body { flex: 1; min-width: 0; }
.cart-line__name { font-weight: 600; font-size: var(--fs-small); }
.cart-line__price { font-family: var(--font-display); font-size: var(--fs-small); color: var(--color-ink-muted); }
.cart-line__remove { background: none; border: none; color: var(--color-ink-muted); text-decoration: underline; font-size: var(--fs-small); cursor: pointer; padding: 0; }
.cart-drawer__foot { padding: var(--space-5); border-top: 1px solid var(--color-border); }
.cart-drawer__subtotal { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: var(--space-4); }
.cart-note { font-size: var(--fs-small); margin-top: var(--space-3); }
.cart-note--error { color: var(--status-full); }
.cart-note--success { color: var(--status-open); }