/* ============================================================
   ゆきすきのくに デザイントークン
   現行サイト https://yukisukinokuni.jp/ (THE THOR) の
   配色・装飾を忠実に踏襲した軽量CSS（単一ファイル）
   ============================================================ */

:root {
  /* 色（現行サイトから抽出） */
  --c-primary: #980000;        /* 深紅（メインカラー） */
  --c-primary-dark: #7a0000;
  --c-footer: #982600;         /* フッター背景のえんじ */
  --c-accent: #b60105;
  --c-text: #191919;
  --c-text-sub: #3f3f3f;
  --c-text-light: #757575;
  --c-bg: #ffffff;
  --c-bg-gray: #f5f4f2;
  --c-border: #e3ddd6;
  --c-marker: #f6c9c4;         /* 赤ハーフマーカー */
  --c-online: #4e7a38;         /* オンライン緑バッジ（白文字4.5:1確保） */
  --c-real: #b35f00;           /* リアル開催オレンジバッジ（白文字4.5:1確保） */
  --c-later: #3d5a80;          /* 後日配信 紺バッジ */
  --c-row-salmon: #f9dcc8;     /* マトリクス行（オンライン系） */
  --c-row-salmon-light: #fcece0;
  --c-row-yellow: #f9e08e;     /* マトリクス行（般若心経） */
  --c-row-cream: #fdf3d9;      /* マトリクス行（リアルのみ） */

  /* タイポグラフィ */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;
  --text-4xl: 2.6rem;

  /* 余白（8pxグリッド） */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5rem;

  --radius: 8px;
  --shadow: 0 2px 10px rgba(0, 0, 0, .08);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, .14);
  --container: 1080px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.9;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { opacity: .85; }
h1, h2, h3, h4 { line-height: 1.5; margin: 0 0 var(--sp-2); font-weight: 700; }
p { margin: 0 0 var(--sp-2); }
ul, ol { padding-left: 1.4em; }
table { border-collapse: collapse; width: 100%; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-3); }
.section { padding: var(--sp-6) 0; }
.section-alt { background: var(--c-bg-gray); }
.text-center { text-align: center; }

/* ---------- 見出し装飾（THE THOR風マーカー） ---------- */
.h-marker {
  display: inline;
  background: linear-gradient(transparent 62%, var(--c-marker) 62%);
  padding: 0 .1em;
}
.section-title { text-align: center; font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.section-title .h-marker { font-weight: 700; }

h2.content-h {
  border-left: 6px solid var(--c-primary);
  background: var(--c-bg-gray);
  padding: .45em .7em;
  font-size: var(--text-xl);
  margin: var(--sp-5) 0 var(--sp-3);
}
h3.content-h {
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .3em;
  font-size: var(--text-lg);
  margin: var(--sp-4) 0 var(--sp-2);
}

/* 本文ページ（Markdown由来）の見出し */
.page-body h2 {
  border-left: 6px solid var(--c-primary);
  background: var(--c-bg-gray);
  padding: .45em .7em;
  font-size: var(--text-xl);
  margin: var(--sp-5) 0 var(--sp-3);
}
.page-body h3 {
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .3em;
  font-size: var(--text-lg);
  margin: var(--sp-4) 0 var(--sp-2);
}
.page-body h4 { color: var(--c-primary); margin: var(--sp-3) 0 var(--sp-1); }
.page-body img { margin: var(--sp-3) auto; border-radius: var(--radius); }
.page-body table th, .page-body table td {
  border: 1px solid var(--c-border);
  padding: .6em .8em;
  text-align: left;
  vertical-align: top;
}
.page-body table th { background: var(--c-bg-gray); white-space: nowrap; }
.page-body blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--c-primary); background: var(--c-bg-gray);
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: .8em 2.2em;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--c-primary);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 1.6;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 1; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-secondary { background: #fff; color: var(--c-primary); }
.btn-disabled {
  background: #ccc; border-color: #ccc; color: #fff;
  pointer-events: none; cursor: default;
}
.btn-block { display: block; max-width: 420px; margin: var(--sp-2) auto; }

/* ---------- バッジ・ラベル ---------- */
.badge {
  display: inline-block;
  padding: .15em .8em;
  border-radius: 4px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  line-height: 1.8;
}
.badge-online { background: var(--c-online); }
.badge-real { background: var(--c-real); }
.badge-later { background: var(--c-later); }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--c-border);
}
.header-inner {
  max-width: var(--container); margin: 0 auto;
  padding: .6rem var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.logo img { height: 44px; width: auto; }
.gnav ul { display: flex; gap: 1.1em; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.gnav a { color: var(--c-text); font-size: var(--text-sm); font-weight: 500; padding: .3em 0; }
.gnav a.active, .gnav a:hover { color: var(--c-primary); border-bottom: 2px solid var(--c-primary); opacity: 1; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: .4rem; width: 44px; height: 40px;
}
.nav-toggle span {
  display: block; height: 3px; background: var(--c-primary);
  margin: 6px 4px; border-radius: 2px; transition: .25s;
}
.mobile-nav { display: none; background: #fff; border-bottom: 1px solid var(--c-border); }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: .5rem var(--sp-3) 1rem; }
.mobile-nav a { display: block; padding: .7em .2em; border-bottom: 1px dashed var(--c-border); color: var(--c-text); font-weight: 500; }

/* ---------- ヒーロー ---------- */
.hero {
  background: linear-gradient(160deg, #4a0505 0%, var(--c-primary) 55%, #b8412e 100%);
  color: #fff;
  text-align: center;
  padding: var(--sp-7) var(--sp-3);
}
.hero-catch {
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 2;
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.hero .btn-secondary { border-color: #fff; }
.video-facade { max-width: 760px; margin: var(--sp-4) auto 0; }
.video-facade iframe, .video-embed iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius);
}

/* ---------- トップ：バナー ---------- */
.banner-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  max-width: 900px; margin: 0 auto;
}
.banner-grid a { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s; }
.banner-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); opacity: 1; }

/* ---------- トップ：次回イベント ---------- */
.upcoming-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.event-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--sp-3); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .4em;
}
.event-card .event-tag {
  align-self: flex-start;
  background: var(--c-primary); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  padding: .1em .8em; border-radius: 4px;
}
.event-card h3 { font-size: var(--text-base); margin: 0; }
.event-card .event-meta { font-size: var(--text-sm); color: var(--c-text-sub); }
.event-card .btn { margin-top: auto; padding: .5em 1.5em; font-size: var(--text-sm); }

/* ---------- 年間マトリクス ---------- */
.matrix { margin: var(--sp-4) 0; }
.matrix-title { text-align: center; font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.matrix-row {
  display: grid; grid-template-columns: 1fr 220px 230px;
  gap: 8px; margin-bottom: 8px;
}
.matrix-name {
  border: 2px solid var(--c-text);
  border-radius: 4px;
  padding: .6em .9em;
  font-weight: 700;
  display: flex; flex-direction: column; justify-content: center;
}
.matrix-name a { color: inherit; }
.matrix-name.tone-salmon { background: var(--c-row-salmon); }
.matrix-name.tone-yellow { background: var(--c-row-yellow); }
.matrix-name.tone-cream { background: var(--c-row-cream); }
.matrix-format {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  border: 1px solid var(--c-border); border-radius: 4px; background: #fff;
  padding: .4em; flex-wrap: wrap;
}
.matrix-price {
  border: 1px solid var(--c-border); border-radius: 4px; background: #fff;
  padding: .5em .8em; font-size: var(--text-sm); line-height: 1.7;
  display: flex; flex-direction: column; justify-content: center;
}
.matrix-price strong { color: var(--c-primary); font-size: 1.1em; }
.matrix-price small { color: var(--c-text-sub); }
/* ゆきすきクラブの入れ子 */
.matrix-club-children { margin-top: .7em; display: flex; flex-direction: column; gap: .5em; }
.matrix-child {
  border-radius: 4px; padding: .35em .8em; font-weight: 700;
  background: var(--c-row-salmon-light); font-size: var(--text-sm);
}
.matrix-child.solid { border: 2px solid var(--c-text); }
.matrix-child.dashed { border: 2px dashed var(--c-text); }
.matrix-child.plain { border: none; background: transparent; }
.matrix-child-note { font-size: var(--text-xs); font-weight: 400; color: var(--c-text-sub); }
.matrix-group-label {
  font-size: var(--text-xs); font-weight: 400; color: var(--c-text-sub); margin-top: .3em;
}
.matrix-note { text-align: center; font-size: var(--text-xs); color: var(--c-text-sub); margin-top: var(--sp-1); }

/* ---------- イベントカタログ（シリーズブロック） ---------- */
.series-divider {
  text-align: center; color: var(--c-text-light);
  letter-spacing: .4em; margin: var(--sp-6) 0 var(--sp-4);
  user-select: none;
}
.series-block { max-width: 860px; margin: 0 auto; }
.series-title {
  font-size: var(--text-xl);
  background: var(--c-primary); color: #fff;
  border-radius: 8px; padding: .5em 1em;
  margin: var(--sp-2) 0 var(--sp-3);
}
.series-section-h {
  font-weight: 700; font-size: var(--text-lg);
  margin: var(--sp-4) 0 var(--sp-2);
}
.series-section-h .h-marker { background: linear-gradient(transparent 55%, var(--c-marker) 55%); }
.series-intro p { margin-bottom: .8em; }
.overview-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.overview-list li {
  padding: .45em 0; border-bottom: 1px dashed var(--c-border);
  display: flex; gap: 1em;
}
.overview-list .ov-label { min-width: 7.5em; font-weight: 700; flex-shrink: 0; }
.overview-note { font-size: var(--text-sm); color: var(--c-text-sub); }

/* スケジュール行（日付行＝申込リンク） */
.schedule-note { font-size: var(--text-sm); color: var(--c-text-sub); margin-bottom: var(--sp-2); }
.schedule-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.schedule-list li { border-bottom: 1px solid var(--c-border); }
.schedule-list li:first-child { border-top: 1px solid var(--c-border); }
.schedule-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em;
  padding: .55em .4em;
}
.schedule-row .ep { font-weight: 700; min-width: 5.5em; }
.schedule-row .apply-tag {
  margin-left: auto;
  background: var(--c-primary); color: #fff;
  border-radius: 4px; padding: .05em .9em;
  font-size: var(--text-sm); font-weight: 700;
  white-space: nowrap;
}
a.schedule-row:hover { background: #fdf0ef; opacity: 1; }
.schedule-row.done { color: var(--c-text-light); }
.schedule-row .sold-tag {
  margin-left: auto;
  background: #767676; color: #fff;
  border-radius: 4px; padding: .05em .9em;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.schedule-row .done-tag {
  margin-left: auto;
  background: #767676; color: #fff;
  border-radius: 4px; padding: .05em .9em;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.schedule-row .acv-tag {
  margin-left: auto;
  background: #fff; color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  border-radius: 4px; padding: .05em .9em;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.schedule-row .acv-tag:hover { background: #fdf0ef; opacity: 1; }
.schedule-row .soon-tag {
  margin-left: auto;
  background: #fff; color: #5d6b76;
  border: 1.5px solid #9aa7b0;
  border-radius: 4px; padding: .05em .9em;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.schedule-row .changed { color: var(--c-accent); font-size: var(--text-xs); }

.series-cta { text-align: center; margin: var(--sp-3) 0; }

/* ---------- シリーズカード（講座・イベント） ---------- */
.series-card-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.series-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 90px;
}
.series-card-head {
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em;
}
.series-card-head h2, .series-card-head h3 { margin: 0; font-size: var(--text-lg); color: #fff; }
.series-card-plans { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4em; }
.plan-tag {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
  border-radius: 4px;
  padding: .05em .7em;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.series-card-body { padding: var(--sp-3); }
.series-lead { margin-bottom: var(--sp-2); }
.series-facts { list-style: none; padding: 0; margin: 0 0 var(--sp-2); }
.series-facts li {
  display: flex; gap: 1em;
  padding: .4em 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: var(--text-sm);
}
.series-facts .fact-label {
  flex-shrink: 0; min-width: 5.5em;
  font-weight: 700; color: var(--c-primary);
}
.series-card-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.series-card-actions .btn { flex: 1 1 200px; padding: .7em 1em; }

/* アコーディオン（スケジュール） */
.schedule-acc {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-top: var(--sp-2);
  background: var(--c-bg-gray);
}
.schedule-acc summary {
  cursor: pointer;
  padding: .8em var(--sp-3);
  font-weight: 700;
  color: var(--c-primary);
  list-style: none;
  position: relative;
  user-select: none;
}
.schedule-acc summary::-webkit-details-marker { display: none; }
.schedule-acc summary::after {
  content: "▼";
  position: absolute; right: var(--sp-3);
  font-size: .75em;
  transition: transform .2s;
}
.schedule-acc[open] summary::after { transform: rotate(180deg); }
.schedule-acc summary:hover { background: #f0e9e3; border-radius: var(--radius); }
.schedule-acc-body { padding: 0 var(--sp-3) var(--sp-3); background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.schedule-acc-body .schedule-note:first-child { padding-top: var(--sp-2); }
.schedule-acc-body .schedule-list { margin-bottom: var(--sp-2); }

/* ---------- アーカイブ ---------- */
.price-line { font-weight: 700; margin: var(--sp-2) 0; }
.card-h3 {
  font-weight: 700;
  font-size: var(--text-lg);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .3em;
  margin: var(--sp-3) 0 var(--sp-2);
}

/* 年度タブ・シリーズフィルタ */
.year-tabs {
  display: flex; flex-wrap: wrap; gap: .5em;
  margin: 0 0 var(--sp-3);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 0;
}
.year-tab {
  background: var(--c-bg-gray);
  border: 1px solid var(--c-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: .5em 1.6em;
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--c-text-sub);
  font-family: var(--font-body);
}
.year-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.filter-btns {
  display: flex; flex-wrap: wrap; gap: .5em;
  margin-bottom: var(--sp-3);
}
.filter-btn {
  background: #fff;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
  border-radius: 999px;
  padding: .3em 1.2em;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}
.filter-btn.active { background: var(--c-primary); color: #fff; }
.year-panel { display: none; }
.year-panel.active { display: block; }
.prep-box {
  text-align: center;
  background: var(--c-bg-gray);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-3);
  color: var(--c-text-sub);
}

/* ---------- プロフィール（トップ） ---------- */
.profile-flex {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  max-width: 900px; margin: 0 auto;
}
.profile-flex img { width: 300px; border-radius: var(--radius); flex-shrink: 0; }
.sns-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.sns-list a { font-size: var(--text-sm); font-weight: 500; border-bottom: 1px solid var(--c-primary); }

/* ---------- ページヘッダー（下層） ---------- */
.page-header {
  background: linear-gradient(160deg, #4a0505, var(--c-primary));
  color: #fff; text-align: center; padding: var(--sp-5) var(--sp-3);
}
.page-header h1 { font-size: var(--text-3xl); margin: 0; letter-spacing: .1em; }
.page-header .subtitle { opacity: .9; margin: .5em 0 0; font-size: var(--text-sm); }
.breadcrumb {
  font-size: var(--text-xs); color: var(--c-text-light);
  max-width: var(--container); margin: 0 auto; padding: .6rem var(--sp-3);
}
.breadcrumb a { color: var(--c-text-light); }

/* ---------- カレンダー埋め込み ---------- */
.gcal-wrap { max-width: 800px; margin: 0 auto; }
.gcal-wrap iframe { width: 100%; height: 600px; border: 1px solid var(--c-border); border-radius: var(--radius); }

/* ---------- 登録セクション ---------- */
.register-box {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: #fff; border: 2px solid var(--c-primary); border-radius: var(--radius);
  padding: var(--sp-4);
}
.register-box .note { font-size: var(--text-sm); color: var(--c-text-sub); }

/* ---------- フッター ---------- */
.footer { background: var(--c-footer); color: #fff; padding: var(--sp-5) 0 var(--sp-3); margin-top: var(--sp-6); }
.footer a { color: #fff; opacity: .92; }
.footer a:hover { opacity: 1; text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.footer .footer-h {
  font-size: var(--text-base); font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: .4em; margin: 0 0 var(--sp-2);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: .25em 0; font-size: var(--text-sm); }
.footer .sns-line { display: flex; flex-wrap: wrap; gap: .4em 1em; margin-top: var(--sp-1); }
.footer .sns-line a { font-size: var(--text-xs); }
.footer-copy { text-align: center; font-size: var(--text-xs); opacity: .85; border-top: 1px solid rgba(255,255,255,.3); padding-top: var(--sp-2); }

/* ---------- レスポンシブ ---------- */
@media (min-width: 641px) {
  .banner-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .gnav { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 720px) {
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
  .matrix-format { justify-content: flex-start; }
  .profile-flex { flex-direction: column; align-items: center; }
  .profile-flex img { width: 100%; max-width: 380px; }
  .overview-list .ov-label { min-width: 6em; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: var(--sp-5) 0; }
  .schedule-row .apply-tag, .schedule-row .sold-tag { margin-left: 0; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- アクセシビリティ配慮 ---------- */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}