/* ============================================================
   ワークショップ（/program/workshop/ 専用）
   一覧ページ（workshop.html）と各回ページ（YYYY-MM-*.html）で共通。
   英語・アートなどテーマが変わっても、このCSSはそのまま使う。
   色・書体は css/gajyuku-nav.css のトークン（--gaj-*）を使う。
   授業スケジュール（/schedule/schedule.html）と同じ余白・角丸・線の考え方。
   英字のラベルは大文字にせず通常の表記（Workshop / Booking など）、字間は0。
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--gaj-black, #111); font-family: var(--gaj-font, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif); }
.display_none { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ws, .ws-stage {
  --ws-accent: var(--gaj-orange, #ff6a00);
  --ws-accent-hover: var(--gaj-orange-hover, #e05900);
  --ws-accent-soft: rgba(255,106,0,0.10);
  --ws-accent-ink: #c24f00;
  --ws-line: var(--gaj-gray-light, #e8e8e8);
  --ws-muted: var(--gaj-gray-mid, #888);
  --ws-ink-2: var(--gaj-gray-dark, #444);
  --ws-bg-2: var(--gaj-sub-bg, #fafafa);
  --ws-radius: 14px;
}
.ws {
  max-width: 1080px; margin: 0 auto;
  padding: calc(var(--gaj-gh-h-sp, 60px) + 28px) 16px 72px;
  box-sizing: border-box;
}
.ws *, .ws *::before, .ws *::after { box-sizing: border-box; }
@media (min-width: 960px) {
  .ws { padding: calc(var(--gaj-gh-h-pc, 72px) + var(--gaj-gn-h, 44px) + 48px) 32px 96px; }
}
.ws a { color: var(--ws-accent-ink); text-underline-offset: 3px; }
/* 太字は Semibold（600）を上限にする（見出し・b・strong など、ブラウザ既定で700になる要素も含めて） */
.ws h1, .ws h2, .ws h3, .ws h4, .ws b, .ws strong, .ws summary, .ws dt,
.ws-stage b, .ws-stage strong { font-weight: 600; }

/* ---- パンくず ---- */
.ws--staged { padding-top: 28px !important; }

/* ---- ヒーロー画像（各回ページの最上部・画面幅いっぱい） ---- */
.ws-stage { padding: calc(var(--gaj-gh-h-sp, 60px) + 8px) 8px 0; box-sizing: border-box; }
@media (min-width: 960px) { .ws-stage { padding: calc(var(--gaj-gh-h-pc, 72px) + var(--gaj-gn-h, 44px) + 16px) 16px 0; } }
.ws-stage .ws-photo--hero { aspect-ratio: 4 / 3; border-radius: 12px; }
/* PC・タブレット：画面幅いっぱい。高さはタイトルの頭が1画面目に少し見える程度に抑える */
@media (min-width: 640px) { .ws-stage .ws-photo--hero { aspect-ratio: auto; height: min(64vh, 52vw); min-height: 360px; } }

.ws-crumbs { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--ws-muted); }
.ws-crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--ws-line); }
.ws-crumbs a { color: var(--ws-muted); text-decoration: none; }
.ws-crumbs a:hover { color: var(--ws-accent); }

/* ---- Hero ---- */
.ws-hero { margin-bottom: 32px; }
.ws-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 12px; letter-spacing: 0; color: var(--ws-accent); font-weight: 600; }
/* テーマ（英語 × アート など） */
.ws-tag { display: inline-block; padding: 3px 10px; border: 1px solid #f1ebe5; border-radius: 10px; background: #f8f4f0; font-size: 10.5px; letter-spacing: .08em; color: var(--ws-ink-2); font-weight: 500; }
.ws-event-vol .ws-tag { margin-left: 0; }
.ws-hero h1 { margin: 0; font-size: clamp(30px, 5.2vw, 52px); line-height: 1.12; letter-spacing: -.005em; font-weight: 600; }
/* 見出しだけ詰め組み（palt）と行のバランス調整で締まった印象に（本文・サブタイトルは読みやすさ優先で詰めない） */
.ws h1, .ws h2, .ws h3 { font-feature-settings: "palt" 1; }
.ws h1, .ws h2, .ws h3 { text-wrap: balance; }
.ws-sub { margin: 8px 0 0; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: var(--ws-ink-2); font-weight: 500; }
.ws-lead { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: var(--ws-ink-2); max-width: 44em; }

/* ---- 状態ラベル（受付前 / 受付中 / 満席 / 終了） ---- */
.ws-status { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 3px 10px; border-radius: 12px; font-size: 11.5px; letter-spacing: .06em; font-weight: 600; background: var(--ws-accent-soft); color: var(--ws-accent-ink); }
.ws-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ws-status--soon { background: #f2f2f2; color: var(--ws-ink-2); }
.ws-status--full, .ws-status--done { background: #f2f2f2; color: var(--ws-muted); }

/* ---- 写真枠（画像が入るまではボックスのまま表示） ---- */
.ws-photo {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--ws-radius);
  background: var(--ws-bg-2); border: 1px dashed #d6d6d6;
  display: flex; align-items: center; justify-content: center;
}
.ws-photo--wide { aspect-ratio: 16 / 10; }
.ws-photo--square { aspect-ratio: 1 / 1; }
.ws-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-photo:has(img) { border-style: solid; border-color: transparent; }
.ws-photo figcaption { font-size: 12px; letter-spacing: 0; color: #b5b5b5; }
.ws-photo:has(img) figcaption { display: none; }

/* 写真の左上の日付（角丸の札）：ヒーロー写真と一覧のカード写真に付ける */
.ws-date-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; min-width: 60px;
  padding: 7px 10px 8px; border-radius: 10px;
  background: rgba(255,255,255,.96); color: var(--gaj-black, #111); line-height: 1.1; text-align: center;
  font-family: var(--gaj-font, sans-serif); box-shadow: 0 6px 18px rgba(17,17,17,.14);
}
.ws-date-badge-y { font-size: 9.5px; letter-spacing: .12em; color: var(--ws-accent-ink); font-weight: 600; }
.ws-date-badge-md { margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ws-date-badge-dow { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ws-line); align-self: stretch; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--ws-ink-2); }
@media (min-width: 760px) {
  .ws-date-badge { top: 16px; left: 16px; min-width: 74px; padding: 9px 13px 10px; border-radius: 12px; }
  .ws-date-badge-y { font-size: 10.5px; }
  .ws-date-badge-md { font-size: 25px; }
  .ws-date-badge-dow { font-size: 11px; }
}
/* 祝日の「祝」は赤 */
.ws-hol { color: #d3202f; }

.ws-illus { max-width: 1080px; margin: 6px auto 0; padding: 0 8px; box-sizing: border-box; text-align: right; font-size: 11px; color: #6b6b6b; }
.ws-illus [lang="en"] { margin-left: 4px; }
/* ギャラリー下の「写真はイメージです」 */
.ws-sec .ws-gallery-note { margin: 10px 0 0; max-width: none; text-align: right; font-size: 11.5px; line-height: 1.6; color: #6b6b6b; }
.ws-gallery-note [lang="en"] { margin-left: 4px; }

/* ---- 導入（タイトル・紹介文 + 開催情報カード） ---- */
.ws-intro { display: grid; gap: 8px; margin: 0 0 56px; }
@media (min-width: 880px) { .ws-intro { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 48px; align-items: start; } }
/* タイトルと紹介文の区切り線（左端だけアクセント色） */
.ws-intro .ws-hero { position: relative; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ws-line); }
.ws-intro .ws-hero::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--ws-accent); }
.ws-about p { margin: 0 0 12px; font-size: 14px; line-height: 1.95; color: var(--ws-ink-2); }
.ws-about { margin-bottom: 20px; }

.ws-card { border: 1px solid var(--ws-line); border-radius: var(--ws-radius); padding: 20px; background: #fff; box-shadow: 0 14px 36px rgba(17,17,17,.06); }
.ws-facts { margin: 0; display: grid; gap: 0; font-size: 13.5px; }
.ws-facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #f1f1f1; }
.ws-facts > div:first-child { border-top: 0; padding-top: 0; }
.ws-facts dt { font-size: 11px; letter-spacing: .12em; color: var(--ws-muted); font-weight: 600; padding-top: 2px; }
.ws-facts dd { margin: 0; line-height: 1.7; }
.ws-facts dd small { display: block; font-size: 12px; color: var(--ws-ink-2); }
.ws-facts .ws-big { font-size: 20px; font-weight: 600; letter-spacing: .01em; line-height: 1.35; }
.ws-facts .ws-big small { font-weight: 500; }
/* セッション（時間と対象を1行にまとめる） */
.ws-slots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.ws-slots li { display: contents; }   /* 各セッションの時刻の列を上下でそろえる */
.ws-slots b { font-size: 12px; font-weight: 600; color: var(--ws-accent-ink); white-space: nowrap; }
.ws-slot-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-slot-who { grid-column: 1 / -1; margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ws-ink-2); }
.ws-slots li:last-child .ws-slot-who { margin-bottom: 0; }
.ws-slots + small { margin-top: 6px; }
.ws-card .ws-btn { margin-top: 16px; width: 100%; justify-content: center; }

/* ---- ボタン ---- */
.ws-btn {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid var(--ws-line); background: #fff;
  font-size: 13.5px; letter-spacing: .06em; color: var(--gaj-black, #111) !important; text-decoration: none;
  transition: border-color var(--gaj-dur, 140ms), color var(--gaj-dur, 140ms), background var(--gaj-dur, 140ms);
}
.ws-btn:hover { border-color: var(--ws-accent); color: var(--ws-accent) !important; }
.ws-btn--primary { background: var(--ws-accent); border-color: var(--ws-accent); color: #fff !important; font-weight: var(--gaj-cta-weight, 500); }
.ws-btn--primary:hover { background: var(--ws-accent-hover); border-color: var(--ws-accent-hover); color: #fff !important; }
.ws-btn[aria-disabled="true"] { pointer-events: none; background: #f2f2f2; border-color: #f2f2f2; color: var(--ws-muted) !important; }
.ws-btn:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }

/* ---- セクション ---- */
.ws-sec { margin: 0 0 56px; scroll-margin-top: calc(var(--gaj-gh-h-sp, 60px) + 16px); }
@media (min-width: 960px) { .ws-sec { margin-bottom: 72px; scroll-margin-top: calc(var(--gaj-gh-h-pc, 72px) + var(--gaj-gn-h, 44px) + 16px); } }
.ws-sec > h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; font-size: 21px; line-height: 1.35; letter-spacing: .04em; }
.ws-sec > h2 span { font-size: 12px; letter-spacing: .02em; color: var(--ws-muted); font-weight: 500; }
/* 見出しの右に細い線を伸ばして、セクションの区切りをはっきりさせる */
.ws-sec > h2::after { content: ''; flex: 1 1 24px; align-self: center; height: 1px; margin-left: 4px; background: var(--ws-line); }
.ws-sec p { margin: 0 0 12px; font-size: 14px; line-height: 1.9; color: var(--ws-ink-2); max-width: 46em; }

/* ---- ねらい（引用） ---- */
.ws-quote { margin: 0; padding: 20px 22px; border-left: 3px solid var(--ws-accent); background: var(--ws-bg-2); border-radius: 0 var(--ws-radius) var(--ws-radius) 0; }
.ws-quote p:first-child { font-size: 16px; font-weight: 600; color: var(--gaj-black, #111); line-height: 1.7; }
.ws-quote p:last-child { margin-bottom: 0; }

/* ---- ポイント（3列） ---- */
.ws-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 760px) { .ws-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ws-points li { border: 1px solid var(--ws-line); border-radius: var(--ws-radius); padding: 18px; }
.ws-points b { display: block; margin: 0 0 6px; font-size: 14.5px; }
.ws-points span { display: block; font-size: 13px; line-height: 1.8; color: var(--ws-ink-2); }

/* ---- 当日の流れ（枠の中のタイムライン：時間｜点と線｜内容） ---- */
.ws-flow {
  --flow-time: 5.4em; --flow-gap: 34px;
  margin: 0; padding: 24px 22px; list-style: none;
  border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: #fff;
}
.ws-flow li { position: relative; display: grid; grid-template-columns: var(--flow-time) minmax(0, 1fr); column-gap: var(--flow-gap); padding: 0 0 22px; }
.ws-flow li:last-child { padding-bottom: 0; }
.ws-flow li::before {   /* 点 */
  content: ''; position: absolute; top: 4px; left: calc(var(--flow-time) + (var(--flow-gap) - 12px) / 2);
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ws-accent);
}
.ws-flow li::after {    /* 次の点へつなぐ線 */
  content: ''; position: absolute; top: 20px; bottom: 4px; left: calc(var(--flow-time) + (var(--flow-gap) - 2px) / 2);
  width: 2px; border-radius: 1px; background: #f0e6dd;
}
.ws-flow li:last-child::after { display: none; }
.ws-flow time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ws-accent-ink); font-weight: 600; padding-top: 1px; text-align: right; }
.ws-flow b { display: block; font-size: 14.5px; }
.ws-flow span { display: block; font-size: 12.5px; line-height: 1.75; color: var(--ws-ink-2); }
/* 保護者の方が入る時間帯：点を塗り、内容を薄いオレンジで囲む */
.ws-flow .is-parents::before { background: var(--ws-accent); }
.ws-flow .is-parents > div { margin: -8px 0 0 -12px; padding: 8px 12px 10px; border-radius: 10px; background: var(--ws-accent-soft); }
.ws-note { margin: 10px 0 0 !important; font-size: 12px !important; color: var(--ws-muted) !important; line-height: 1.7 !important; }
.ws-sec .ws-note { max-width: none; }
/* 注記の箇条書き（1文ずつ1行。上のカードと同じ幅まで使う） */
.ws-note-list { margin: 14px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; color: var(--ws-ink-2); }
.ws-note-list li { position: relative; padding-left: 1em; }
.ws-note-list li + li { margin-top: 3px; }
.ws-note-list li::before { content: ''; position: absolute; left: .2em; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: var(--ws-muted); }
.ws-note-list.ws-en { margin-top: 10px; font-size: 12px; }
/* 日本語の見出し・短い文は、語句の切れ目で折り返す（対応ブラウザのみ。非対応でも表示は変わらない） */
.ws h1, .ws h2, .ws h3, .ws-sub, .ws-event-sub, .ws-lead, .ws-note, .ws-note-list li { word-break: auto-phrase; }

/* ---- 講師 ---- */
.ws-people { display: grid; gap: 16px; }
.ws-person { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); padding: 18px; }
@media (min-width: 640px) { .ws-person { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } }
.ws-person .ws-photo { border-radius: 10px; }
.ws-role { margin: 0 0 2px !important; font-size: 12px !important; letter-spacing: 0; color: var(--ws-accent) !important; font-weight: 600; }
.ws-person h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: .02em; }
.ws-person h3 small { margin-left: 8px; font-size: 12px; color: var(--ws-muted); font-weight: 500; }
.ws-person p { font-size: 13.5px; }
.ws-person p:last-child { margin-bottom: 0; }

/* ---- ギャラリー ---- */
.ws-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ws-gallery > :first-child { grid-column: 1 / -1; }   /* スマホ：1枚目を大きく、残り2枚を横並び */
@media (min-width: 760px) { .ws-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ws-gallery > :first-child { grid-column: auto; } }

/* ---- スタジオ（写真と情報を1枚のカードに。日本語をまとめ、その下に英語をまとめる） ---- */
.ws-venue { display: grid; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); overflow: hidden; background: #fff; }
.ws-venue > .ws-photo { border-radius: 0; border-width: 0 0 1px; }
@media (min-width: 760px) {
  .ws-venue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ws-venue > .ws-photo { aspect-ratio: auto; height: 100%; min-height: 320px; border-width: 0 1px 0 0; }
}
.ws-venue-body { padding: 20px 18px; }
@media (min-width: 760px) { .ws-venue-body { padding: 26px 28px; } }
.ws-venue h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.45; letter-spacing: .02em; }
.ws-venue h3 small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--ws-muted); letter-spacing: .04em; }
.ws-venue address { font-style: normal; font-size: 13.5px; line-height: 1.8; color: var(--ws-ink-2); }
/* 駅：路線マーク＋駅名・徒歩分数（マークの列幅をそろえて文字の頭を揃える） */
.ws-access { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid #f1f1f1; list-style: none; display: grid; gap: 12px; }
.ws-access li { display: flex; align-items: center; gap: 12px; }
.ws-lines { display: flex; gap: 4px; flex-shrink: 0; width: 64px; }
.ws-lines img { display: block; width: 30px; height: 30px; }
.ws-access-text { font-size: 14.5px; line-height: 1.45; color: var(--gaj-black, #111); }
.ws-access-text small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ws-muted); }
.ws-venue .ws-venue-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ws-ink-2); }
.ws-venue-en { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ws-line); color: #6b6b6b; }
.ws-venue .ws-venue-en p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.75; color: #6b6b6b; }
.ws-venue .ws-venue-en p:last-child { margin-bottom: 0; }
.ws-venue-en b { font-weight: 600; color: var(--ws-ink-2); }
.ws-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.ws-links .ws-btn { min-height: 40px; padding: 0 16px; font-size: 12.5px; }
/* スタジオ欄のボタン（Googleマップ・スタジオページ）は青 #001BC7 */
.ws-venue .ws-links .ws-btn { background: #001bc7; border-color: #001bc7; color: #fff !important; font-weight: 500; }
.ws-venue .ws-links .ws-btn:hover { background: #00139a; border-color: #00139a; color: #fff !important; }
.ws-venue .ws-links .ws-btn:focus-visible { outline-color: #001bc7; }

/* ---- 予約 ---- */
.ws-sessions { display: grid; gap: 14px; }
@media (min-width: 760px) { .ws-sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.ws-session { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); padding: 20px; }
.ws-session .ws-role { margin-bottom: 4px !important; }
.ws-session-time { margin: 0 !important; font-size: 26px !important; font-weight: 600; color: var(--gaj-black, #111) !important; font-variant-numeric: tabular-nums; line-height: 1.3 !important; }
.ws-session-who { margin: 0 !important; font-size: 14px !important; color: var(--gaj-black, #111) !important; }
.ws-session-meta { margin: 6px 0 16px !important; font-size: 12.5px !important; color: var(--ws-ink-2) !important; }
.ws-session .ws-btn { margin-top: auto; justify-content: center; }

/* ---- 注意事項・FAQ ---- */
/* ご予約の前に：薄いグレーの角丸枠で囲む */
.ws-list { margin: 0; padding: 18px 22px 18px 2.4em; font-size: 13.5px; line-height: 1.9; color: var(--ws-ink-2); max-width: 760px; background: var(--ws-bg-2); border: 1px solid var(--ws-line); border-radius: var(--ws-radius); }
.ws-list li + li { margin-top: 10px; }
/* FAQ：白い角丸枠で囲み、質問ごとに区切り線 */
.ws-faq { margin: 0; max-width: 760px; padding: 0 20px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: #fff; }
.ws-faq details + details { border-top: 1px solid var(--ws-line); }
.ws-faq summary { list-style: none; cursor: pointer; padding: 16px 28px 16px 0; position: relative; font-size: 14px; font-weight: 600; }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 18px; font-weight: 400; color: var(--ws-muted); }
.ws-faq details[open] summary::after { content: '−'; }
.ws-faq summary:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }
.ws-faq details p { margin: 0 0 14px; font-size: 13.5px; }

/* ---- 一覧ページ：ワークショップカード ---- */
.ws-events { display: grid; gap: 16px; }
@media (min-width: 760px) { .ws-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ws-event { display: flex; flex-direction: column; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); overflow: hidden; color: inherit !important; text-decoration: none; background: #fff; transition: border-color var(--gaj-dur, 140ms), box-shadow var(--gaj-dur, 140ms); }
.ws-event:hover { border-color: var(--ws-accent); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.ws-event:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }
.ws-event .ws-photo { border-radius: 0; border-width: 0 0 1px; }
.ws-event-body { padding: 18px 20px 20px; }
.ws-event-body .ws-status { margin-bottom: 10px; }
.ws-event-vol { margin: 0 0 2px; font-size: 12px; letter-spacing: 0; color: var(--ws-muted); font-weight: 600; }
.ws-event h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: .01em; }
.ws-event-sub { margin: 0 0 12px; font-size: 13px; color: var(--ws-ink-2); line-height: 1.7; }
.ws-event-meta { margin: 0; padding: 12px 0 0; border-top: 1px solid #f1f1f1; list-style: none; font-size: 12.5px; line-height: 1.9; color: var(--ws-ink-2); }
.ws-event-meta b { display: inline-block; min-width: 5em; font-weight: 600; color: var(--ws-muted); font-size: 11px; letter-spacing: .1em; }
.ws-event-more { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--ws-accent-ink); }
.ws-event--past { opacity: .8; }
.ws-empty { margin: 0; padding: 20px; border: 1px dashed var(--ws-line); border-radius: var(--ws-radius); font-size: 13px; color: var(--ws-muted); text-align: center; }
/* カード内の文字サイズは .ws-sec p（本文用）の影響を受けないよう、ここで固定 */
.ws-event .ws-status { font-size: 11.5px; margin: 0 0 10px; }
.ws-event .ws-event-vol { margin: 0 0 4px; font-size: 12px; line-height: 1.6; color: var(--ws-muted); }
.ws-event .ws-event-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--ws-ink-2); }

/* ---- 一覧ページ：開催予定（オレンジ枠の大きなカード。PCは写真と情報を横並び、写真は左詰め） ---- */
.ws-sec--upcoming > h2 { font-size: 22px; align-items: center; }
.ws-events--upcoming { grid-template-columns: minmax(0, 1fr) !important; }
.ws-event--featured { border: 2px solid var(--ws-accent); box-shadow: none; }
.ws-event--featured:hover { border-color: var(--ws-accent-hover); box-shadow: none; }
.ws-event--featured h3 { font-size: 24px; line-height: 1.3; }
/* 開催情報（項目名＋値の2列） */
.ws-event--featured .ws-event-meta { display: grid; gap: 8px; padding-top: 14px; font-size: 14px; line-height: 1.6; color: var(--gaj-black, #111); }
.ws-event--featured .ws-event-meta li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ws-event--featured .ws-event-meta > li > b { min-width: 0; padding-top: 1px; }
.ws-event--featured .ws-event-meta small { display: block; font-size: 12.5px; color: var(--ws-ink-2); }
/* 詳細を見る（カード全体がリンク。ボタン風に大きく。太さは500） */
.ws-event-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px; min-height: 52px; padding: 0 24px; border-radius: 26px;
  background: var(--ws-accent); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .08em;
  transition: background var(--gaj-dur, 140ms);
}
.ws-event-cta-arrow { transition: transform var(--gaj-dur, 140ms); }
.ws-event:hover .ws-event-cta { background: var(--ws-accent-hover); }
.ws-event:hover .ws-event-cta-arrow { transform: translateX(4px); }
@media (min-width: 960px) {   /* 横並びはPCだけ（タブレット幅では写真を上に横長で置き、3人とも入れる） */
  .ws-event--featured { flex-direction: row; }
  .ws-event--featured > .ws-photo { flex: 0 0 56%; aspect-ratio: auto; min-height: 380px; border-width: 0 1px 0 0; }
  .ws-event--featured > .ws-photo img { object-position: 20% 50%; }   /* PCは写真を左寄せで切り取り、左の2人が入るように */
  .ws-event--featured .ws-event-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 28px 30px; }
  .ws-event--featured h3 { font-size: 28px; }
  .ws-event--featured .ws-event-meta { margin-bottom: 24px; }
  .ws-event--featured .ws-event-cta { margin-top: auto; }
}

/* ---- 日英併記：英語は日本語のすぐ後ろ、同じ位置に一段控えめに ---- */
.ws [lang="en"] { letter-spacing: 0; }
.ws-en { display: block; color: #6b6b6b !important; }   /* 白地で文字コントラスト4.5:1以上 */
p.ws-en { margin-top: -6px !important; }
.ws-sub.ws-en { margin-top: 2px !important; font-size: clamp(13px, 1.4vw, 15px); font-weight: 400; }
.ws-lead.ws-en { margin-top: 8px !important; font-size: 13px; line-height: 1.8; }
.ws-about p.ws-en, .ws-sec p.ws-en { font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.ws-facts .ws-en, .ws-flow .ws-en, .ws-list .ws-en, .ws-venue .ws-en,
.ws-session .ws-en, .ws-event .ws-en, .ws-empty .ws-en { font-size: 12px; line-height: 1.65; margin-top: 2px; font-weight: 400; }
.ws-facts .ws-big .ws-en { margin-top: 4px; }
.ws-facts dt span { display: block; font-size: 10.5px; font-weight: 500; color: #999; margin-top: 1px; }
.ws-venue h3 .ws-en { font-size: 13px; font-weight: 500; margin-top: 2px; }
.ws-list .ws-en b { color: inherit; }
.ws-faq summary .ws-en { font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.ws-faq details p.ws-en { margin-top: -6px !important; font-size: 12.5px; }
.ws-h1-en { display: block; margin-top: 4px; font-size: .5em; font-weight: 500; color: var(--ws-muted); }
.ws-status [lang="en"], .ws-tag [lang="en"] { font-weight: 500; opacity: .8; margin-left: 2px; }
.ws-btn [lang="en"] { font-size: .88em; opacity: .85; margin-left: 4px; }
.ws-event-more [lang="en"] { opacity: .85; }
.ws-note.ws-en { margin-top: 2px !important; }

/* ---- スマホ（759px以下）：本文を少し大きく、余白を詰め、ボタンを押しやすく ---- */
@media (max-width: 759px) {
  .ws-intro { margin-bottom: 44px; }
  .ws-sec { margin-bottom: 44px; }
  .ws-sec > h2 { margin-bottom: 16px; font-size: 19px; }
  .ws-about p, .ws-sec p { font-size: 15px; line-height: 1.85; }
  .ws-about p.ws-en, .ws-sec p.ws-en { font-size: 13.5px; line-height: 1.75; }
  .ws-card { padding: 18px 16px; }
  .ws-facts { font-size: 14px; }
  .ws-flow { --flow-time: 4.4em; --flow-gap: 28px; padding: 20px 16px; }
  .ws-flow span { font-size: 13px; }
  .ws-person { padding: 16px; }
  .ws-session { padding: 18px 16px; }
  .ws-list { padding: 16px 16px 16px 2.1em; font-size: 14px; }
  .ws-faq { padding: 0 16px; }
  .ws-faq details p { font-size: 14px; }
  .ws-links .ws-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

/* ---- 公開前に埋める箇所（本番公開前に必ず消す） ---- */
.ws-todo { background: #fff4c2; color: #6b5200 !important; border-radius: 3px; padding: 0 3px; }

/* ---- Footer（Library/nav_global_2.lbi をそのまま入れて新デザインで表示。schedule.html と同じ） ---- */
.ws-footer { border-top: 1px solid var(--gaj-gray-light, #e8e8e8); background: var(--gaj-sub-bg, #fafafa); font-family: var(--gaj-font, sans-serif); }
.ws-footer-inner { max-width: 1080px; margin: 0 auto; padding: 32px 16px 40px; font-size: 12px; color: var(--gaj-gray-dark, #444); }
@media (min-width: 960px) { .ws-footer-inner { padding: 36px 32px 44px; } }
.ws-footer #nav_footer { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.ws-footer #nav_footer p { margin: 0; }
.ws-footer a { color: var(--gaj-gray-dark, #444); text-decoration: none; }
.ws-footer a:hover { color: var(--gaj-orange, #ff6a00); }
.ws-footer .border, .ws-footer .clearfloat { display: none; }
.ws-footer .footer_address { margin: 0 0 12px; line-height: 1.8; }
.ws-footer .sns { display: flex; gap: 10px; margin: 0 0 14px; }
.ws-footer .sns figure { margin: 0; }
.ws-footer .sns img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ws-footer address { font-style: normal; color: var(--gaj-gray-mid, #888); }
.ws-footer address p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ws-btn, .ws-event, .ws-event-cta, .ws-event-cta-arrow { transition: none; }
}
@media print {
  .gh, .gn, .ws-footer, .ws-btn { display: none; }
  .ws, .ws-stage { padding-top: 0; }
}