/* ── フォント定義 ── */
@font-face {
  font-family: 'Lust';
  src: url('./fonts/Lust-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lust';
  src: url('./fonts/Lust-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── CSS変数定義 ── */
:root {
  /* カラーパレット */
  --color-bg: #FFFFFF;
  --color-primary: #333;
  --color-primary-light: #FFFFFF;
  --color-heading: #333;
  --color-text: #333;
  /* スペーシング */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 20px;
  /* フォント */
  --font-heading: 'Lust', serif;
  --font-body:    'Lato', sans-serif;
}

/* ── ベーススタイル ── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}
a {
  color: var(--color-primary);
  text-decoration: none;
}

/* ── 全体コンテナ ── */
main,
.course-list,
.story-images {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── ヒーロー ── */
.hero {
  text-align: center;
  background: var(--color-primary-light);
  padding: var(--space-lg) 0;
}
.hero img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--color-heading);
  margin: var(--space-sm) 0 var(--space-xs);
}
.hero p {
  margin: 0 var(--space-md) var(--space-lg);
  color: #333;
}

/* ── コースカード ── */
.course-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}
.card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform .2s;
}
.card:hover { transform: translateY(-5px); }
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card h2 {
  font-size: 1.1rem;
  padding: var(--space-md);
  text-align: center;
  font-family: var(--font-heading);
}
.card h2,
.card .story-desc{
  text-align: center;
}
.card h3 {
  font-size: 0.8rem;
  padding: var(--space-xxs);
  text-align: center;
  font-family: var(--font-heading);
}
/* ── ストーリー画像レイアウト ── */
.story-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* 大きな写真 */
.figure-large {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.figure-large .large-img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.figure-large figcaption {
  display: block;
  width: 100%;
  text-align: center !important;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-heading);
  font-family: var(--font-body);
}

/* 小さな写真２列 */
.small-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  justify-items: center;
}
.photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(30,90,153,0.05);
  padding: var(--space-sm);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .2s;
  flex: 1 1 160px;
  max-width: 240px;
}
.photo-card:hover { transform: translateY(-3px); }
.small-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
}
.photo-card figcaption {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-primary);
  font-family: var(--font-body);
}

/* ── 豆知識リンク ── */
.tidbit-links {
  padding: var(--space-md);
  text-align: center;
}
.tidbit-links a {
  display: inline-block;
  margin: var(--space-xs) var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-primary-light);
  border-radius: 6px;
  color: var(--color-primary);
  font-family: var(--font-body);
}

/* ── 写真下のキャプションをさらに中央揃え ── */
.figure-large,
.photo-card {
  /* 上の定義と重複しますが、確実に flex 中央揃えを適用 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── ストーリーページ内ナビゲーション ── */
.story-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}
.story-nav a {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary-light);
  border-radius: 6px;
  font-family: var(--font-body);
  text-align: center;
}

/* ── オーディオ ── */
audio {
  display: block;
  width: 100%;
  margin: var(--space-md) auto;
}

/* ── マップ ── */
.map-container {
  text-align: center;
  margin: var(--space-lg) 0;
}
.map-container iframe {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  height: 400px;
  border: 0;
}

/* ── レスポンシブ ── */
/* スマホ（〜600px） */
@media (max-width: 600px) {
  .small-grid { grid-template-columns: 1fr; }
  .small-img { height: 120px; }

  /* モバイルではナビを縦並びで幅100% */
  .story-nav {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .story-nav a {
    width: 100%;
  }
}
/* タブレット（601px〜900px） */
@media (min-width: 601px) and (max-width: 900px) {
  .course-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}
  .small-img { height: 160px; }
  .hero h1 { font-size: 2.2rem; }
  .card h2 { font-size: 1.2rem; }
}
/* PC（901px〜） */
@media (min-width: 901px) {
  .course-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}
  .small-img { height: 200px; }
  .hero h1 { font-size: 2.6rem; }
  .card h2 { font-size: 1.3rem; }
}


/* ─────────────────────────────────
   読みやすさ向上：タブレット/PC向けタイポグラフィ
   ───────────────────────────────── */
:root {
  /* 読みやすい最大行幅（約65-80字相当） */
  --readable-max-width: 72ch;
}

/* 本文ブロックに適用（ストーリー本文や説明文にクラスを付与） */
.story-text, .story-desc, .prose {
  max-width: var(--readable-max-width);
  margin: 1.5rem auto;
  line-height: 1.75;
  letter-spacing: 0.02em;
  font-size: 1rem;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* 段落の間隔を広めに */
.story-text p,
.prose p {
  margin: 0 0 1em 0;
}

/* 小見出し・見出しの余白最適化 */
.prose h2, .prose h3, .story-text h2, .story-text h3 {
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
  font-family: var(--font-heading);
  color: var(--color-heading);
}

/* リストの行間 */
.prose ul, .prose ol, .story-text ul, .story-text ol {
  margin: 0.8em 0 1.2em;
  padding-left: 1.2em;
}
.prose li, .story-text li {
  margin: 0.2em 0;
  line-height: 1.7;
}

/* 画像キャプションの可読性 */
.figure-large figcaption,
.photo-card figcaption {
  line-height: 1.5;
}

/* ベース文字サイズを画面幅に応じて段階的に拡大 */
@media (min-width: 768px) {
  body { font-size: 17px; }
  .story-text, .story-desc, .prose { font-size: 1.05rem; line-height: 1.8; }
}
@media (min-width: 1200px) {
  body { font-size: 18px; }
  .story-text, .story-desc, .prose { font-size: 1.125rem; line-height: 1.85; }
}

/* 横長画面で1行が伸びすぎるのを防ぐため左右に余白 */
@media (min-width: 1024px) {
  .story-text, .story-desc, .prose {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ヒーローやカードの見出しも少し余白見直し */
.hero h1 { letter-spacing: 0.01em; }
.card h2 { line-height: 1.3; }

/* === Fix: spot grid for many items (2025-08-25) === */
.course-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}
@media (min-width: 601px) and (max-width: 900px) {
  .course-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 901px) {
  .course-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform .2s;
  display: flex;
  flex-direction: column;
  content-visibility: auto;
  contain-intrinsic-size: 300px 280px;
}
.card img{
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  display: block;
}

.card h2{
  font-size: 1.05rem;
  padding: var(--space-md);
  text-align: center;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1em * 1.35 * 2);
}

@media (max-width: 380px){
  .course-list{ grid-template-columns: 1fr; gap: var(--space-md); }
}
/* === /Fix === */

/* === Story-desc size tweak (2025-08-26) === */
/* カード内の説明文を一段小さく。画面幅に応じて行数も最適化 */
.card .story-desc{
  font-size: clamp(.88rem, 1.4vw, .98rem);
}
/* 広い画面では3行まで表示（テキスト量を少し増やす） */
@media (min-width: 900px){
  .card .story-desc{
    -webkit-line-clamp: 3;
    min-height: calc(1em * 1.6 * 3); /* 行高1.6 × 3行 */
  }
}
/* スマホでは2行に抑える（既定通り） */
@media (max-width: 599.98px){
  .card .story-desc{
    -webkit-line-clamp: 2;
    min-height: calc(1em * 1.6 * 2);
  }
}
/* === /Story-desc size tweak === */


.hero { margin: 0; padding: 0; line-height: 2;} /* 画像下の行間ギャップ対策 */