@charset "UTF-8";
/* =============================================================
   seminar.css — 本文（説明会一覧＋詳細）
   ヘッダー刷新版と一体化させるため、ryugaku-refresh.css と同じ
   ブランドブルー×グリーンのトークンを流用。日経セミナー風カードグリッド。
   共通シェル(style.css)の後に読み込まれ、本文域だけを上書きする。
   ============================================================= */

:root {
	--sm-blue:      #1066A9;
	--sm-blue-deep: #0b4f83;
	--sm-green:     #59b200;
	--sm-green-deep:#4a9600;
	--sm-ink:       #1f2b38;
	--sm-muted:     #6b7785;
	--sm-line:      #e3e8ee;
	--sm-tint:      #f5f8fb;
	--sm-radius:    10px;
}

.sm-wrap {
	--sm-blue:      #1066A9;
	--sm-blue-deep: #0b4f83;
	--sm-green:     #59b200;
	--sm-green-deep:#4a9600;
	--sm-ink:       #1f2b38;
	--sm-muted:     #6b7785;
	--sm-line:      #e3e8ee;
	--sm-tint:      #f5f8fb;
	--sm-radius:    10px;

	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
	padding: 28px 24px 56px;
	box-sizing: border-box;
	color: var(--sm-ink);
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.sm-wrap * { box-sizing: border-box; }
.sm-wrap a { text-decoration: none; }

/* -------------------------------------------------------------
   ツールバー（並べ替え／形式／国・地域）
   ------------------------------------------------------------- */
.sm-toolbar {
	background: var(--sm-tint);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sm-toolbar__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.sm-toolbar__label {
	flex: 0 0 auto;
	width: 68px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sm-muted);
	letter-spacing: .04em;
}

/* セグメント（並べ替え） */
.sm-seg { display: inline-flex; border: 1px solid var(--sm-line); border-radius: 8px; overflow: hidden; background: #fff; }
.sm-seg__btn {
	appearance: none; border: 0; background: #fff; cursor: pointer;
	font-size: 13px; color: var(--sm-ink); padding: 8px 16px; line-height: 1;
	border-left: 1px solid var(--sm-line);
}
.sm-seg__btn:first-child { border-left: 0; }
.sm-seg__btn.is-active { background: var(--sm-blue); color: #fff; font-weight: 700; }

/* チップ（形式・国フィルタ） */
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-fchip {
	appearance: none; cursor: pointer;
	border: 1px solid var(--sm-line); background: #fff;
	color: var(--sm-ink); font-size: 13px; line-height: 1;
	padding: 7px 14px; border-radius: 999px;
	transition: border-color .12s, background .12s, color .12s;
}
.sm-fchip:hover { border-color: var(--sm-blue); color: var(--sm-blue); }
.sm-fchip.is-active { background: var(--sm-blue); border-color: var(--sm-blue); color: #fff; font-weight: 700; }

.sm-count { margin: 18px 2px 14px; font-size: 13px; color: var(--sm-muted); }
.sm-count #sm-count-num { font-weight: 700; color: var(--sm-ink); }

/* -------------------------------------------------------------
   カードグリッド
   ------------------------------------------------------------- */
.sm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}
.sm-group {
	grid-column: 1 / -1;
	margin: 14px 0 -6px;
	padding: 0 0 8px;
	font-size: 16px; font-weight: 700; color: var(--sm-blue-deep);
	border-bottom: 2px solid var(--sm-line);
}

.sm-card {
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	overflow: hidden;
	transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.sm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(16,102,169,.14);
	border-color: #cfe0ee;
}
.sm-card__link { display: block; color: inherit; }

.sm-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #dbe7f1 0%, #eef3f8 100%);
	overflow: hidden;
}
.sm-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* 上端を基準にトリミング（バナー上部のタイトルを見せる） */
	display: block;
}
.sm-card__thumb-ph {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #9db4c8; font-weight: 800; letter-spacing: .18em; font-size: 15px;
}

/* 形式バッジ（日付行にインライン配置） */
.sm-badge {
	display: inline-block;
	font-size: 11px; font-weight: 700; color: #fff; line-height: 1;
	padding: 5px 9px; border-radius: 4px; letter-spacing: .02em; white-space: nowrap;
}
.sm-badge--online { background: var(--sm-blue); }
.sm-badge--venue  { background: var(--sm-green-deep); }
.sm-badge--hybrid { background: #7b5cc4; }

.sm-card__body { padding: 14px 16px 16px; }
.sm-card__date {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 8px; color: var(--sm-blue-deep); font-weight: 700; font-size: 15px;
}
.sm-card__date time { letter-spacing: .01em; }
.sm-card__time { font-size: 13px; color: var(--sm-muted); font-weight: 600; }

.sm-card__title {
	margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; font-weight: 700; color: var(--sm-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-card__excerpt {
	margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--sm-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sm-chip {
	display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--sm-blue-deep);
	background: #eaf2f9; border-radius: 4px; padding: 4px 9px; line-height: 1;
}
.sm-card__venue { font-size: 11.5px; color: var(--sm-muted); }
.sm-card__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--sm-blue); }
.sm-arrow { transition: transform .15s ease; }
.sm-card:hover .sm-arrow { transform: translateX(3px); }

/* 空／該当なし */
.sm-empty { margin: 24px 2px; color: var(--sm-muted); font-size: 14px; }
.sm-noresult {
	border: 1px dashed var(--sm-line); border-radius: var(--sm-radius);
	padding: 40px 24px; text-align: center; background: var(--sm-tint);
}
.sm-noresult__title { margin: 0 0 8px; font-weight: 700; font-size: 16px; color: var(--sm-ink); }
.sm-noresult__lead  { margin: 0 0 16px; font-size: 13px; color: var(--sm-muted); }
.sm-noresult__link  { color: var(--sm-blue); font-weight: 700; }

/* -------------------------------------------------------------
   詳細ページ
   ------------------------------------------------------------- */
.sm-single { max-width: 980px; margin: 0 auto; padding: 28px 24px 56px; color: var(--sm-ink);
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
.sm-single * { box-sizing: border-box; }
.sm-single a { text-decoration: none; }
.sm-single__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sm-single .sm-badge { position: static; }
.sm-single__title { font-size: 26px; line-height: 1.45; font-weight: 800; margin: 0 0 18px; color: var(--sm-ink); }
.sm-single__hero { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.sm-single__hero img { width: 100%; height: auto; display: block; }

.sm-single__grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.sm-single__body { font-size: 15px; line-height: 1.9; }
.sm-single__body p { margin: 0 0 1.2em; }
.sm-past-note { background: #fff5f2; border: 1px solid #f3d3c9; color: #a2452c; font-size: 13px; padding: 12px 14px; border-radius: 8px; margin: 0 0 18px; }

.sm-single__aside { position: sticky; top: 16px; }
.sm-facts { border: 1px solid var(--sm-line); border-radius: 10px; overflow: hidden; margin: 0 0 14px; }
.sm-facts > div { display: grid; grid-template-columns: 84px 1fr; border-top: 1px solid var(--sm-line); }
.sm-facts > div:first-child { border-top: 0; }
.sm-facts dt { background: var(--sm-tint); padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--sm-muted); margin: 0; }
.sm-facts dd { padding: 12px 14px; font-size: 14px; font-weight: 600; margin: 0; }

.sm-apply {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--sm-green); color: #fff; font-weight: 800; font-size: 16px;
	padding: 17px 18px; border-radius: 10px; margin-bottom: 12px;
	transition: background .14s ease;
}
.sm-apply:hover { background: var(--sm-green-deep); }
.sm-apply--sub { background: #fff; color: var(--sm-blue); border: 1.5px solid var(--sm-blue); font-size: 14px; padding: 12px 18px; }
.sm-apply--sub:hover { background: #eaf2f9; }

/* 共通シェルの a スタイルに競り負けるため、!important でボタン化を確定させる */
#contents a.sm-apply {
	display: flex !important; align-items: center; justify-content: center; gap: 8px;
	background: var(--sm-green) !important; color: #fff !important;
	font-weight: 800 !important; font-size: 16px !important; text-decoration: none !important;
	padding: 18px !important; border-radius: 10px !important; border: 0 !important;
	box-shadow: 0 4px 12px rgba(89,178,0,.30) !important;
	margin-bottom: 12px !important;
	transition: background .14s ease, transform .12s ease, box-shadow .14s ease;
}
#contents a.sm-apply:hover {
	background: var(--sm-green-deep) !important; transform: translateY(-1px);
	box-shadow: 0 7px 18px rgba(89,178,0,.36) !important; color: #fff !important;
}
#contents a.sm-apply .sm-arrow { transition: transform .15s ease; }
#contents a.sm-apply:hover .sm-arrow { transform: translateX(3px); }
#contents a.sm-apply--sub {
	background: #fff !important; color: var(--sm-blue) !important;
	border: 2px solid var(--sm-blue) !important; box-shadow: none !important;
	font-size: 15px !important; padding: 14px 18px !important; font-weight: 700 !important;
}
#contents a.sm-apply--sub:hover { background: #eaf2f9 !important; color: var(--sm-blue-deep) !important; }
.sm-back { margin-top: 28px; }
.sm-back a { color: var(--sm-blue); font-weight: 700; font-size: 14px; }

/* -------------------------------------------------------------
   レスポンシブ（既存BP 980 / 480 に合わせる）
   ------------------------------------------------------------- */
@media (max-width: 980px) {
	.sm-single__grid { grid-template-columns: 1fr; gap: 22px; }
	.sm-single__aside { position: static; }
	.sm-single__title { font-size: 22px; }
}
@media (max-width: 620px) {
	.sm-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.sm-card__body { padding: 12px 12px 14px; }
	.sm-card__title { font-size: 14px; }
	.sm-wrap { padding: 20px 14px 44px; }
	.sm-toolbar__label { width: 100%; }
}
@media (max-width: 420px) {
	.sm-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   共通シェル(style.css)の打ち消し
   style.css の #main 幅指定・汎用 h2 スタイルが本文より強い/!important の
   可能性があるため、確実に勝てるよう !important で上書きする。
   ------------------------------------------------------------- */

/* ① 説明会ページは1カラム構成。style.css が #main を約74%幅・float で
      サイドバー前提にしているため、全幅・float解除で右の余白をなくす */
#contents { width: auto !important; }
#contents #main {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ②③ カード見出し(h2)に漏れる共通シェルの汎用 h2 スタイル
      （下線・囲み・背景・角丸・ドロップシャドウ・大きい文字）を全消し */
#contents .sm-card__title {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
	font-size: 15.5px !important;
	line-height: 1.5 !important;
	font-weight: 700 !important;
	color: var(--sm-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#contents .sm-card__title::before,
#contents .sm-card__title::after { content: none !important; display: none !important; }

/* 詳細ページ見出し(h1)も同様に囲み・影を消す */
#contents .sm-single__title {
	border: 0 !important; background: none !important; box-shadow: none !important;
	border-radius: 0 !important; padding: 0 !important;
}

/* 国別ソートのグループ見出しは、下線だけ残して他の装飾を消す */
#contents .sm-group {
	background: none !important; box-shadow: none !important;
	border: 0 !important; border-bottom: 2px solid var(--sm-line) !important;
	border-radius: 0 !important; padding: 0 0 8px !important;
}

/* -------------------------------------------------------------
   関連・おすすめ説明会（詳細ページ下部）
   ------------------------------------------------------------- */
.sm-related {
	max-width: 980px;
	margin: 8px auto 0;
	padding: 8px 24px 48px;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.sm-related__head {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 0 0 20px; padding: 2px 0 2px 14px;
	font-size: 20px; font-weight: 800; color: var(--sm-ink);
	border-left: 5px solid var(--sm-blue);
}
.sm-related__head span { font-size: 12px; font-weight: 700; color: var(--sm-muted); letter-spacing: .08em; }

/* 共通シェルの汎用 h2 装飾（囲み・影・下線）を打ち消し、左アクセントバーだけ残す */
#contents .sm-related__head {
	background: none !important; box-shadow: none !important;
	border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
	border-left: 5px solid var(--sm-blue) !important;
	border-radius: 0 !important;
	padding: 2px 0 2px 14px !important;
	font-size: 20px !important;
}

/* -------------------------------------------------------------
   おすすめ説明会スライダー（一覧トップ・センターモード）
   中央のスライドを大きく、左右の隣がのぞくカルーセル。
   位置合わせは featured-slider.js が実寸から算出（依存なし）。
   ------------------------------------------------------------- */
.sm-hero {
	position: relative;
	max-width: 1180px;
	margin: 24px auto 14px;
	padding: 0 56px;               /* 矢印を置くための左右スペース */
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.sm-hero__viewport { overflow: hidden; }
.sm-hero__track {
	display: flex;
	gap: 18px;
	will-change: transform;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.sm-hero__slide {
	flex: 0 0 62%;                 /* 中央を大きく＋左右チラ見え */
	position: relative;
	height: 320px;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	opacity: .5;
	transform: scale(.94);
	transition: opacity .4s ease, transform .4s ease;
	background: #dbe7f1;
}
.sm-hero__slide.is-active { opacity: 1; transform: scale(1); }
.sm-hero__img { position: absolute; inset: 0; }
.sm-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-hero__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 48px 26px 16px;
	background: linear-gradient(to top, rgba(11,32,51,.88) 0%, rgba(11,32,51,.55) 40%, rgba(11,32,51,0) 100%);
	color: #fff;
}
.sm-hero__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sm-hero__date { font-weight: 700; font-size: 14px; color: #fff; }
.sm-hero__title {
	margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.35);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#contents .sm-hero__title {
	border: 0 !important; background: none !important; box-shadow: none !important;
	border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
	font-size: 22px !important; color: #fff !important;
}
/* 共通シェルの p 余白がキャプションを上に膨らませるため打ち消す（テキストを下端へ寄せる） */
#contents .sm-hero__meta { margin: 0 0 6px !important; padding: 0 !important; }
#contents .sm-hero__caption { padding: 48px 26px 16px !important; }

/* 矢印（ビューポート外・左右のパディング内に配置） */
.sm-hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.92); border: 0; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--sm-ink);
	display: flex; align-items: center; justify-content: center; z-index: 3;
	box-shadow: 0 2px 8px rgba(0,0,0,.16); transition: background .14s ease;
}
.sm-hero__arrow:hover { background: #fff; }
.sm-hero__arrow--prev { left: 6px; }
.sm-hero__arrow--next { right: 6px; }

/* ドット（スライダー下・中央） */
.sm-hero__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.sm-hero__dot {
	width: 9px; height: 9px; padding: 0; border-radius: 50%;
	border: 0; cursor: pointer; background: #c7d2dc; transition: background .14s ease, transform .14s ease;
}
.sm-hero__dot.is-active { background: var(--sm-blue); transform: scale(1.25); }

@media (max-width: 900px) {
	.sm-hero__slide { flex-basis: 74%; height: 260px; }
}
@media (max-width: 620px) {
	.sm-hero { padding: 0 40px; margin: 16px auto 8px; }
	.sm-hero__slide { flex-basis: 86%; height: 190px; border-radius: 10px; }
	.sm-hero__track { gap: 12px; }
	.sm-hero__caption { padding: 30px 16px 14px; }
	.sm-hero__title, #contents .sm-hero__title { font-size: 15px !important; }
	.sm-hero__arrow { width: 34px; height: 34px; font-size: 20px; }
	.sm-hero__arrow--prev { left: 2px; }
	.sm-hero__arrow--next { right: 2px; }
}
/* =============================================================
   常設（オンデマンド）動画説明会ブロック
   テーマのスタイルシート末尾に追記してください。

   設計意図：
     リアルタイムの説明会・イベントへの参加を優先させたいため、
     このブロックは「あえて目立たせない」。
     カード型のグリッド・サムネイル・ブランドカラーの塗りは使わず、
     グレー基調の細いリストにとどめる。
   ============================================================= */

.sm-ondemand {
  margin: 40px 0 8px;
  padding: 20px 22px;
  background: #fafbfc;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
}

.sm-ondemand__head {
  font-size: 15px;
  font-weight: 700;
  color: #1f2b38;
  margin: 0 0 4px;
}

.sm-ondemand__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7785;
  margin: 0 0 14px;
}

.sm-ondemand__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-ondemand__list li {
  margin: 0;
  padding: 0;
  border-top: 1px dotted #dde3ea;
}
.sm-ondemand__list li:first-child { border-top: 0; }

.sm-ondemand__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  color: #1f2b38;
  text-decoration: none;
}
.sm-ondemand__item:hover {
  background: #f2f5f8;
  text-decoration: none;
}

/* バッジは塗らず枠線のみ。日時開催カードより弱く見せる */
.sm-ondemand__badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7785;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #c8d2dc;
  border-radius: 3px;
}

.sm-ondemand__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.sm-ondemand__arrow {
  flex: 0 0 auto;
  font-size: 12px;
  color: #6b7785;
}

.sm-ondemand__foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6b7785;
}

/* 0件時フォールバックは受け皿として機能させたいので、
   通常より少しだけ主張を強める（それでもカードにはしない） */
.sm-ondemand--empty {
  margin-top: 24px;
  background: #f4f8fb;
  border-color: #cfdce7;
}
.sm-ondemand--empty .sm-ondemand__head {
  font-size: 16px;
}

/* 詳細ページ：オンデマンド用バッジ */
.sm-badge--ondemand {
  background: #eef1f5;
  color: #4a5768;
}
.sm-badge--anytime {
  background: #fff;
  color: #6b7785;
  border: 1px solid #c8d2dc;
}

@media (max-width: 600px) {
  .sm-ondemand {
    margin-top: 32px;
    padding: 16px 14px;
  }
  .sm-ondemand__item {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 2px;
  }
  .sm-ondemand__title {
    flex: 1 1 100%;
    font-size: 13.5px;
  }
}

/* 形式で「動画（オンデマンド）」が選ばれたときは主役として表示する。
   自分から探しに来た人に対しては隠す理由がないため、
   通常状態より少し強く見せる（ただしカード型にはしない） */
.sm-ondemand.is-prominent {
  margin-top: 8px;
  padding: 24px 24px;
  background: #fff;
  border-color: #cfdce7;
}
.sm-ondemand.is-prominent .sm-ondemand__head {
  font-size: 18px;
  margin-bottom: 6px;
}
.sm-ondemand.is-prominent .sm-ondemand__note {
  font-size: 13px;
}
.sm-ondemand.is-prominent .sm-ondemand__item {
  padding: 14px 4px;
}
.sm-ondemand.is-prominent .sm-ondemand__title {
  font-size: 15.5px;
}

/* 個別カウンセリングへの導線は、受け皿として出しているときだけ見せる */
.sm-ondemand__counseling { display: none; }
.sm-ondemand.is-fallback .sm-ondemand__counseling,
.sm-ondemand.is-prominent .sm-ondemand__counseling { display: block; }

/* カード表示（タームアーカイブ等）でのオンデマンド表記 */
.sm-card__anytime {
  font-size: 13px;
  font-weight: 700;
  color: #6b7785;
}