/* ====== Theme (Light & Serene) ====== */
:root{
  /* layout */
  --gap: 16px;
  --card-w: 180px;
  --card-h: 270px;
  --radius: 14px;

  /* palette (light) */
  --bg: #ffffff;                 /* ページ背景 */
  --panel: #f7f8fa;              /* セクション/カードの淡背景 */
  --text: #111111;               /* 本文 */
  --muted: #62666d;              /* 補助テキスト */
  --border: #e6e8eb;             /* 枠線 */
  --shadow: 0 6px 16px rgba(17, 24, 39, .06);

  /* accents (静かなブルーグレー) */
  --accent: #7e8ea6;             /* ボタン/見出しの基調色 */
  --accent-strong: #6b7a93;      /* ホバー/強調 */
  --accent-soft: #dfe5ee;        /* 淡色チップ/ボタン背景 */

  /* focus ring */
  --focus: rgba(126, 142, 166, .35);
}

/* ====== Base ====== */
*{ box-sizing: border-box }
html,body{ height: 100% }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; display: block }
.container{ max-width: 1100px; margin: 0 auto; padding-inline: 20px }
.section{ padding: 40px 0 }
.section-title{
  font-size: clamp(20px, 3.2vw, 28px);
  margin: 0 0 8px;
  color: var(--accent-strong);
  letter-spacing: .01em;
}
.section-desc{ color: var(--muted); margin: 0 0 16px }
.muted{ color: var(--muted) }
.prose img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  margin-block: 1.5rem;
  object-fit: cover;
}
/* ====== Buttons ====== */
.btn{
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:focus{ outline: 3px solid var(--focus); outline-offset: 2px }
.btn.primary{
  background: var(--accent-soft);
  border-color: transparent;
  color: #1b2330;
  font-weight: 600;
}
.btn.primary:hover{ background: var(--accent); color: #fff }

/* sizes */
.btn.small{ padding: 8px 12px; border-radius: 10px; font-size: 14px }
.btn.large{ padding: 12px 18px; border-radius: 12px; font-size: 16px }

/* ====== Header ====== */
.site-header{
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: 56px }
.nav{ display: flex; gap: 14px; align-items: center }
.nav a{
  color: #2a2f36; text-decoration: none; font-size: 14px; padding: 6px 8px; border-radius: 8px;
}
.nav a:hover{ background: #f0f2f5 }

/* ====== Hero (明るい紙面の上に穏やかな写真) ====== */
.hero{
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
}
.hero { width: 100%; overflow: hidden; }
.hero img { width: 100%; height: auto; display: block; }
.hero-inner{ position: relative; padding: 56px 20px 48px }
.hero h1{
  font-size: clamp(28px, 6vw, 56px);
  margin: 0 0 8px; letter-spacing: .02em;
  color: #1d2430;
}
.hero-lead{ color: var(--muted); margin: 0 0 16px }
.hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap }

/* ====== Prose ====== */
.prose {
  max-width: 680px;          /* PC時の本文幅（640〜720px目安） */
  margin-inline: auto;       /* 中央寄せ */
  padding-inline: 20px;      /* 端の余白 */
  line-height: 1.9;
  font-size: 1rem;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
/* 見出しなども本文幅に合わせる */
.prose h1, .prose h2, .prose h3, .prose p, .prose ul, .prose ol, .prose figure{
  margin-inline: 0;
}
.prose p{ 
  text-align: justify;            /* 両端揃え */
  text-justify: inter-character;  /* 文字間で均等化（CJK向け） */
  line-break: strict;             /* 日本語の禁則を厳守 */
  hyphens: auto;                  /* 英単語は適切に分割（対応ブラウザで） */
}
.prose strong{ font-weight: 700 }

/* 長いURLや英数字の連なりでハミ出さないように */
.prose a, .prose p{
  overflow-wrap: anywhere;
}

/* タイトルの“最終行ガタつき”を軽減（対応ブラウザ） */
.prose h1, .prose h2, .prose h3{
  text-wrap: balance;  /* 見出しの改行バランスを自動調整 */
}

/* 和文のプロポーショナル代替とカーニング（対応フォントで効く） */
.prose{
  font-feature-settings: "palt" 1, "kern" 1;
  hanging-punctuation: allow-end; /* Safari中心で対応。末尾約物のぶら下がり */
}


/* 画像は本文幅にフィット（歪み防止） */
.prose img{
  width: 100%;
  height: auto;              /* ←超重要：縦横比を維持 */
  display: block;
  /* “同じ比率で見せたい”場合だけ下2行をON
  aspect-ratio: 3 / 2;
  object-fit: cover;
  */
}

/* 図版の上下余白 */
.prose figure{ 
  margin: 1rem 0;}
.prose figure img{
    display: block;
    margin: 0;
  }
/* キャプション：小さめ＆画像のすぐ下に */
.prose figure figcaption{
  margin-top: 6px;              /* 画像との距離を短く */
  font-size: 0.80rem;           /* 例：~13.6px（好みで 0.8rem でも） */
  line-height: 1.5;
  color: var(--muted, #6b7280); /* 落ち着いた色 */
  text-align: left;             /* 中央にしたい場合は center */
}

/* ====== Articles ====== */
.grid.articles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.article-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;  /* 好みで 16/9 など */
  object-fit: cover;    /* 余白なく収める（切り取りあり） */
  display: block;
  border-radius: 8px;
}
.article-body{ padding: 14px }
.article-body h3{ margin: 4px 0 6px; font-size: 18px; color: #1f2835 }
.article-body p{ margin: 0 0 10px; color: var(--muted) }

/* ====== Info (開催情報) ====== */
.info{ background: var(--panel) }
.info-inner{}
.info-grid{ display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start }
.info-list{ display: grid; gap: 10px; margin: 0 }
.info-list dt{ color: var(--muted); min-width: 82px }
.info-list dd{ margin: 0; color: var(--text) }
.info-list > div{
  display: flex; gap: 12px; padding: 10px 12px;
  border-radius: 12px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.info-cta{
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  box-shadow: var(--shadow);
}

/* ====== Footer ====== */
.site-footer {
  font-size: 14px;       /* 既定16px → 14px程度が読みやすさの下限 */
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding: 24px 0;
  background: #fff;
  color: var(--muted);
}

/* 子要素は親サイズを継承 */
.footer-brand,
.footer-nav a,
.sns a { 
  font-size: inherit;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto; /* ← PC時は横並び */
  align-items: center;
  gap: 12px;
}

/* フッター内ナビ */
.footer-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: #52555b;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}

/* SNSリンク */
.sns {
  display: flex;
}
.sns a {
  color: #52555b;
  margin-left: 10px;
  text-decoration: none;
}

/* ====== スマホ時の並び整形 ====== */
@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
    justify-items: center;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .footer-nav a {
    display: inline-block;
    padding: 6px 8px;
  }

  .sns {
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
  }

  .sns a {
    margin-left: 0;
  }
}

/* ====== Slider (書籍・図録) ====== */
.rail-wrap{
  position: relative; max-width: 1100px; margin: 12px auto 0; padding-inline: 44px
}
.rail{
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 4px 22px; scrollbar-width: none; background: transparent;
}
.rail::-webkit-scrollbar{ display: none }

.card{
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  inline-size: var(--card-w);
  block-size: var(--card-h);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
}
.card img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.card:hover img{ transform: scale(1.02) }
.badge{
  position: absolute; inset: 8px auto auto 8px;
  background: var(--accent-soft);
  color: #1b2330; font-size: 12px; padding: 6px 8px; border-radius: 999px; letter-spacing: .02em;
  border: 1px solid #cbd5e1;
}

/* arrows */
.arrow{
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 36px; height: 36px; border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff; color: #2a2f36;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow);
}
.arrow:hover{ background: var(--panel) }
.arrow:focus{ outline: 3px solid var(--focus) }
.arrow.prev{ left: 6px }
.arrow.next{ right: 6px }

/* ====== Dialog (書籍ポップアップ) ====== */
dialog{
  border: none; padding: 0; border-radius: 16px; overflow: hidden;
  color: var(--text);
  background: #fff;
  max-width: min(720px, 92vw);
  box-shadow: 0 24px 60px rgba(17,24,39,.18);
}
dialog::backdrop{ background: rgba(15, 23, 42, .35) }
.sheet{
  display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}
.sheet .cover{ border-radius: 10px; overflow: hidden; aspect-ratio: 2/3; background: #f2f4f7; border: 1px solid var(--border) }
.sheet .cover img{ width: 100%; height: 100%; object-fit: cover }
.sheet .meta h3{ margin: 0 0 6px; font-size: 22px; color: #1d2430 }
.sheet .meta p{ margin: 0 0 10px; color: var(--muted) }
.sheet .actions{ display: flex; gap: 10px; margin-top: 14px }

/* ====== Responsive ====== */
@media (max-width: 920px){
  .grid.articles{ grid-template-columns: repeat(2, 1fr) }
  .info-grid{ grid-template-columns: 1fr }
}
@media (max-width: 720px){
  .nav{ display: none }
  .hero-inner{ padding: 40px 20px }
  .grid.articles{ grid-template-columns: 1fr }
  .rail-wrap{ padding-inline: 36px }
  .sheet{ grid-template-columns: 1fr }
}

/* ==== Profile trigger（テキスト内リンク風ボタン） ==== */
.linklike{
  appearance: none;
  background: none;
  border: 0;
  color: var(--link, #1a73e8);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.linklike:hover{ opacity: .85 }

/* ==== Profile dialog ==== */
#profileDialog{
  border: none;
  padding: 0;
  border-radius: 10px;           /* 角は控えめに */
  max-width: 720px;
  width: min(92vw, 720px);
}
#profileDialog::backdrop{
  background: rgba(15,23,42,.55); /* 落ち着いた暗幕 */
}

.profile-sheet{
  background: #fff;
  color: var(--text, #111);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08));
  overflow: clip;
}

/* ヘッダーは全幅で横並び */
.profile-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.profile-header .icon{
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.profile-header .icon:hover{ background: #f6f7f9 }

/* 本文は “画像カラム + テキスト” の2列（スマホは1列） */
.profile-body{
  display: grid;
  grid-template-columns: clamp(160px, 28vw, 260px) 1fr;
  gap: 16px;
  padding: 16px;
  align-items: start;
}
@media (max-width: 640px){
  .profile-body{ grid-template-columns: 1fr; }
}
.profile-portrait img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.profile-dl{
  display: grid;
  gap: 6px;
}
.profile-dl dt{
  font-weight: 600;
  color: #374151;
}
.profile-dl dd{
  margin: 0;
  color: #4b5563;
}


/* プロフィール行は両端揃えの影響を受けないよう左寄せ */
.prose .profile-cta{ 
  text-align: left; 
}

/* 目立ちすぎない“静かなボタン”バリアント */
.btn.ghost{
  background: transparent;
  border-color: var(--border);
  color: #1b2330;
  box-shadow: none;                 /* 影ナシで上品に */
}
.btn.ghost:hover{
  background: var(--accent-soft);
  border-color: transparent;
  color: #1b2330;
  transform: translateY(-1px);
}
.btn.ghost:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 万一、旧 linklike のリセットが残っていたら無効化 */
#openProfile.linklike{ all: revert; }


/* ---- プロフィールダイアログの中身レイアウトを修正 ---- */
.profile-body{
  /* 画像カラムを固定120px → 画面に応じて可変に */
  grid-template-columns: clamp(160px, 28vw, 260px) 1fr;
  align-items: start;
  gap: 16px;
}

/* 画像を枠いっぱいに、歪み防止 */
.profile-portrait img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* スマホは縦積み（既存があればこの数値で上書き） */
@media (max-width: 640px){
  .profile-body{ grid-template-columns: 1fr; }
}

/* ---- ダイアログ自体が小さすぎる場合の保険 ---- */
#profileDialog{
  width: min(92vw, 760px);   /* 720→気持ち広めに */
  border-radius: 8px;        /* 丸みは控えめ（お好みで） */
}

/* --- プロフィール用 dialog を中だけスクロールに --- */
#profileDialog { padding: 0; border: none; max-width: min(720px, 92vw); }
#profileDialog .profile-sheet{
  display: grid;
  grid-template-rows: auto minmax(0,1fr); /* ヘッダー + スクロール領域 */
  max-height: 85vh;                       /* 画面高の上限 */
}
#profileDialog .profile-body{
  overflow: auto;              /* ← ここがポイント */
  min-height: 0;               /* Gridの“縮まない”問題を回避 */
  -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
}




/* 画像やテキストのベース：歪み防止の再確認 */
.prose img { width: 100%; height: auto; display: block; }

/* 名前は少し大きく・重めに */
.profile-name{
  margin: 2px 0 8px;
  font-size: clamp(18px, 2.2vw, 22px); /* ほんのり大きく */
  font-weight: 700;
  letter-spacing: .01em;
  color: #1d2430;
}
.profile-name .en{
  font-weight: 600;
  font-size: .95em;   /* 和文より少し小さく添える */
  color: #364152;
}

/* 紹介文は少し小さく・読みやすく */
.profile-text p{
  font-size: .95rem;        /* 既定1rem → 0.95rem */
  line-height: 1.85;
  color: #33383f;
}

/* プロフィール用トリガーだけ文字を少し大きく */
#openProfile.btn {
  font-size: clamp(15px, 1.9vw, 17px); /* 端末幅でなめらかに拡大 */
  font-weight: 600;
  padding: 10px 14px;                  /* タップ領域も確保（≈44px目安） */
  line-height: 1.2;
}

.bouten{
  /* 主要ブラウザ */
  text-emphasis: filled dot;              /* 形：dot / circle / double-circle / triangle / sesame */
  text-emphasis-color: currentColor;      /* 色（お好みで #333 など） */
  text-emphasis-position: over right;     /* 横書きは「over」(上側) が一般的 */

  /* iOS/Safari 向けの別名プロパティ（保険で併記）*/
  -webkit-text-emphasis: filled dot;
  -webkit-text-emphasis-color: currentColor;
}



/* 親 dialog ではクリップしない（iOSの重なりバグ回避） */
dialog#modal{
  overflow: visible;      /* ← 重要 */
  border-radius: 0;       /* 角丸は内側へ */
}

/* 中身(.sheet)を角丸＋スクロール容器に */
#modal .sheet{
  border-radius: 16px;
  max-height: 85svh;                 /* 実機で安定 */
  overflow: auto;                     /* 中だけスクロール */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Grid 子が縮まらずに重なる問題の保険 */
#modal .meta,
#modal .cover{ min-height: 0; }

/* スマホは縦積み＋画像は自然比率（被り防止） */
@media (max-width: 720px){
  #modal .sheet{
    display: flex;                    /* grid → flex に切替 */
    flex-direction: column;
    gap: 16px;
  }
  #modal .cover{
    flex: 0 0 auto;
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }
  #modal .cover img{
    width: 100%;
    height: auto;                     /* ★ これが肝。height:100% をやめる */
    object-fit: contain;              /* 切り取りたければ cover に */
    display: block;
    transform: translateZ(0);         /* Safari描画安定化 */
  }
  #modal .meta{ flex: 1 1 auto; min-height: 0; }
}

/* アドレスバー高さ変動対策（対応環境で上書き） */
@supports (height: 100dvh){
  #modal .sheet{ max-height: min(85dvh, 85svh); }
}

#modal .sheet{ overflow-anchor: none; }

/* モーダル中身のスクロール容器に“底上げ”を付与 */
#modal .sheet{
  /* 既存の padding に加えて… */
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  /* “スクロール先頭/末尾位置”も底上げ（キーボード操作や focus 時に効く） */
  scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* 最下部のボタン群は margin で沈まないように */
#modal .actions{
  margin-bottom: 0;
  padding-bottom: 4px; /* 好みで微調整。不要なら削除 */
}