@charset "UTF-8";

/* =========================================================
   セミナーページ専用CSS（pages/seminar.php）

   このファイルは header.php の ej_page_style_slug() が返すスラッグ
   （このページは "seminars"）で自動的に読み込まれる。
   components.css より後に読まれるので、共通側の指定を上書きできる。

   追記は必ず「末尾」に足すこと。途中に挿すとメディアクエリが
   あとから来る素の指定に負けて効かなくなる。
   ========================================================= */


/* ---------------------------------------------------------
   2026-08-24 クライアント検収シート SEMI-02 / 03 / 04 / 06 / 07
   「テキストを中央寄せに」「COMING SOON は中央寄せに。他のところも同様に修正」

   タイトル直下の説明文（.title_txt）は共通側（components.css）で
   中央寄せ済みなので、ここでは このページに残っていた
   ・COMING SOON
   ・カード下の注意書き（※〜）
   ・「性を正しく語れる社会」の長い啓発文
   の3か所を中央寄せにする。
   --------------------------------------------------------- */

/* COMING SOON（02・03）。components.css の .coming-soon には
   text-align が無く、左端に置き去りになっていた。 */
html body .main_contents .coming-soon {
	text-align: center;
	/* components.css で .section > p に max-width:1100px が掛かっているため、
	   器のほうが広い画面では左に寄る。左右 auto で塊ごと中央に置く。 */
	margin-left: auto;
	margin-right: auto;
}


/* 2026年セミナー実績カードの下にある注意書き（※敬称略〜）。
   もとは PHP に直書きの style="line-height:2" だけで左寄せだった。 */
html body .main_contents .seminar-notes {
	margin-top: var(--sp-md, 32px);
	line-height: 2;
	text-align: center;
}

html body .main_contents .seminar-notes p {
	margin: 0;
}


/* ---------------------------------------------------------
   2026-08-24 クライアント検収シート SEMI-04
   「（04の長い啓発文について）…までを中央寄せに」

   「日本では性感染症（性病）の感染者が急増しています。」から
   「…性の啓発と社会的理解を広げる場を作っていきます：」までの長文。

   長文をそのまま中央寄せにすると行頭が揃わず読みづらいので、
   段落ごとに中央寄せしたうえで、1行が 40〜45文字あたりで
   折り返すよう幅を絞って中央に置く。
   本文は --fs-md（1.0625rem＝17px）なので、全角1文字がほぼ 1em。
   43em ＝ おおよそ43文字ぶんの幅。
   --------------------------------------------------------- */

/* 2026-08-24（2回目のご指示）:「幅は広いまま中央寄せで。
   もう少しいい感じのところで改行するようにして」
   43em に絞っていたのをやめ、器いっぱい（.section > p の 1100px）に戻す。
   代わりに、段落を句読点のかたまり（.ej-phrase）に分けて、
   かたまりの境目でしか改行が起きないようにした（PHP側 ej_phrase()）。 */
html body .main_contents .seminar-message {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

html body .main_contents .seminar-message p {
	max-width: none;
	margin: 0 auto 1.4em;
	text-align: center;
}

html body .main_contents .seminar-message .ej-phrase {
	display: inline-block;
}

/* 画面が狭いと、かたまり自体が行幅より広くなって
   結局その中で折り返してしまう。狭いときは素直に流す。 */
@media screen and (max-width: 600px) {
	html body .main_contents .seminar-message .ej-phrase {
		display: inline;
	}
}

html body .main_contents .seminar-message p:last-child {
	margin-bottom: 0;
}

/* 「・」の3項目は箇条書き。文字は左のまま、かたまりごと中央へ寄せる
   （共通側で .outline-list などに当てているのと同じ考え方）。 */
html body .main_contents .seminar-message__list {
	width: max-content;
	max-width: 100%;
	margin: 0 auto 1.4em;
	padding-left: 0;
	list-style: none;
	text-align: left;
}

html body .main_contents .seminar-message__list li {
	margin: 0 0 .4em;
	padding-left: 1.1em;
	text-indent: -1.1em;
}

html body .main_contents .seminar-message__list li::before {
	content: "・";
}

/* 画面が狭いときは 43em より器の幅のほうが先に効くので、
   幅の指定はそのままでよい。行間だけ少し詰める。 */
@media screen and (max-width: 767px) {
	html body .main_contents .seminar-message p {
		margin-bottom: 1.2em;
	}
}


/* ---------------------------------------------------------
   2026-08-24 クライアント検収シート SEMI-05(b)
   02（2027年セミナープログラム）に WordPress から出力される
   セミナー記事の一覧を出すようにしたので、その並びの調整。

   .card は共通で width:27% の3列。記事が1〜2件のときに
   左端へ寄って見えないよう、.card-grid の中央寄せに任せつつ
   見出しとの間隔だけ整える。
   --------------------------------------------------------- */

html body .main_contents .seminar-program-grid {
	padding-top: 0;
}

/* ---------------------------------------------------------
   2026-08-24（2回目のご指示）
   「Comingsoonの上下をもう少し余白をつけて、
     ここにコンテンツが来ることがわかるようにしたい」（02・03）
   文字だけがぽつんと置かれていて「準備中の枠」に見えなかったので、
   上下に大きく余白を取り、薄い枠で「ここに入る場所」を示す。
   --------------------------------------------------------- */
html body .main_contents .coming-soon {
	display: block;
	box-sizing: border-box;
	margin-top: var(--sp-lg, 48px);
	margin-bottom: var(--sp-lg, 48px);
	padding: clamp(52px, 8vw, 96px) var(--sp-md, 32px);
	border: 1px dashed var(--c-border-strong, #CFC6BA);
	border-radius: 2px;
	background-color: var(--c-bg, #FAF9F6);
	font-family: var(--ff-display, serif);
	letter-spacing: .22em;
	color: var(--c-muted, #7A716A);
}

/* 「ここに入ります」と一言添えて、空欄ではなく準備中だと分かるようにする */
html body .main_contents /* 2026-08-27（クライアント指示・LINE 16:41）:
   「決まりしだい」→「次第」（上の表記と統一）／
   「もしくは「COMING SOON」のみ。（決定次第順次公開と上で言っているので）」
   すぐ下の本文に「決定次第順次公開いたします。」があり重複するので、
   ご提案どおり **COMING SOON だけ**にする（この一文は出さない）。 */
.coming-soon::after {
	content: none;
}

@media screen and (max-width: 600px) {
	html body .main_contents .coming-soon {
		padding: clamp(40px, 12vw, 64px) var(--sp-sm, 16px);
	}

	html body .main_contents .coming-soon::after {
		font-size: 12px;
	}
}


/* =========================================================
   2026-08-25 クライアント指示
   「『性を正しく語れる社会』の実現 のテキストの改行をこれ参考にして」
   （ご提示の原稿に、どこで改行するかが入っていた）

   原稿の1行を <span class="ej-line"> で包んである。
   ここで block にすると「1かたまり＝1行」になり、原稿どおりの位置で改行する。
   .seminar-message は text-align:center なので、各行はそのまま中央に並ぶ。

   狭い画面では原稿の1行（最長で60文字ほど）が収まらないので、
   inline に戻して素直に流す。そのときも中の .ej-phrase（文節）の
   境目でしか折り返さないので、文の途中では切れない。
   ========================================================= */

html body .main_contents .seminar-message .ej-line {
	display: block;
}

@media screen and (max-width: 600px) {
	html body .main_contents .seminar-message .ej-line {
		display: inline;
	}
}


/* =========================================================
   2026-08-27 クライアント指示（HP修正0825.xlsx セミナー）
   ※ このファイルは末尾に追記する決まり。
   ---------------------------------------------------------
   1) 2026年の実績を帯でまとめて、上の2027年の案内と地色を分ける
      「下の26年分と分けるように、背景の色をつけていただけますか？
        もしくは26年分の背景を変えるか？お任せ致します。」
   2) 出展社セミナー実績の4枠を一列に並べる
      「下記4枠の出展社セミナーを一列にして、並べてほしいです。」
   ========================================================= */

.seminar-archive {
	margin: clamp(40px, 6vw, 80px) 0 0;
	padding: clamp(20px, 3.2vw, 48px) clamp(16px, 3vw, 40px) clamp(28px, 3.6vw, 52px);
	background-color: #F1ECE1;
	border-top: 1px solid rgba(140, 110, 40, .22);
	border-bottom: 1px solid rgba(140, 110, 40, .22);
}

/* 帯の中は先頭のセクションだけ上の余白を詰める（帯自体に padding があるため） */
.seminar-archive > .section:first-of-type {
	margin-top: 0;
}

/* ---- 出展社セミナー実績の4枠 ---- */

/* 2026-08-29（ユーザー指示）:
     「カードが2つしかない場合でも幅いっぱいになってしまうので、
       ４つ並ぶことを前提にしたサイズ感にしてください」
     「あと、数が多くなったら改行もするようにしてください」

   もとは auto-fit だった。auto-fit は中身の無い列を潰すため、カードが2枚だと
   その2枚が横いっぱいまで引き伸ばされていた。auto-fill は空の列を残すので、
   2枚なら4列ぶんのうち左2つを占めるだけで、1枚あたりの幅は4枚並んだときと同じになる。

   列数はブレークポイントで切り替えず、「1枚の最小幅」と「最大4列」だけ決めて
   器の幅任せに 4 → 3 → 2 → 1 と繰り下げる。だから枚数が増えれば自然に折り返す。
   min(100%, ...) は器が最小幅より狭い極小画面で横スクロールが出るのを防ぐ蓋。
   （2027セミナープログラムの .seminar-card-grid と同じ考え方・同じ式） */
.exhibitor-seminar-grid {
	--exh-card-min: 240px;
	--exh-cols-max: 4;
	--exh-gap: clamp(14px, 1.6vw, 22px);
	list-style: none;
	margin: var(--sp-md, 28px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--exh-card-min), (100% - (var(--exh-cols-max) - 1) * var(--exh-gap)) / var(--exh-cols-max))), 1fr));
	gap: var(--exh-gap);
	align-items: stretch;
}

/* 2026-08-27（クライアント指示・LINE 15:13）:
     「この4つのカードはきれいにして頂きたいです。今はちょっと雑な感じがします」

   もとは「枠の中に要素を積んだだけ」で、日時・見出し・ロゴ・登壇者が
   同じ強さで並んでいた。ロゴも支給画像ごとに地色（ピンク／黒／白）が違うため、
   薄いベージュの枠に貼るとパッチワークに見えていた。

   ・日時は上の帯にして、カードの入口をはっきりさせる
   ・ロゴは**白い面**に置き、上下の罫線で区切る（地色の違いが目立ちにくい）
   ・ブース番号は小さな黒札にして、登壇者名と役割を分ける
   ・余白を 20px に揃え、区切りは全部 1px の罫線で統一する */

.exhibitor-seminar-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(140, 110, 40, .28);
	text-align: left;
	line-height: 1.7;
	overflow: hidden;
}

/* 上の帯：日時 */
.exhibitor-seminar-card__datetime {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 13px 20px;
	background: #F6F1E6;
	border-bottom: 1px solid rgba(140, 110, 40, .18);
	font-family: var(--ff-display);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--c-ink, #14110F);
}

.exhibitor-seminar-card__time {
	white-space: nowrap;
	color: var(--c-gold-deep, #C4A35A);
}

/* 2026-08-29（ユーザー指示）「出店セミナーの高さが変わってるどうにかならん？」

   カードの外形の高さは元から揃っていた（グリッドが伸ばすため）。ズレていたのは
   **ロゴの帯の位置**で、実測すると 2027年で 36.4px、2026年で 14.3px 動いていた。

   原因はロゴの margin-top: auto。余った高さをロゴの**上**に吸わせていたので、
   ロゴより下（登壇者の行数・注記の有無）が1枚ごとに違うと、その差がそのまま
   ロゴの位置のズレになっていた。

   直し方は、余りをロゴの上ではなく**カードの一番下**に落とすこと。
   そのためには、ロゴより上（日時帯＋見出し）の高さが全カードで同じである必要がある。
   日時帯は元から固定なので、見出しに行数ぶんの高さを必ず確保する。

   2026-08-29（ユーザー指示）「タイトルとか長くなりすぎたら、見えなくなる感じがいいです」
   いったんは幅ごとに行数を増やして見出しが切れないようにしていたが、
   **長い見出しは切って良い**とのご判断なので、どの幅でも3行で打ち切る。
   3行を超えたぶんは末尾に「…」が付いて隠れる（-webkit-line-clamp の挙動）。
   カードが見出しの長さで伸び縮みしなくなり、並びが常に揃う。 */
.exhibitor-seminar-card__title {
	--exh-title-lines: 3;
	margin: 0;
	padding: 18px 20px 16px;
	font-family: var(--ff-display);
	font-size: clamp(.98rem, 1.2vw, 1.06rem);
	line-height: 1.65;
	/* 2026-08-29 修正（ユーザー指摘「タイトルの部分最初から広すぎ。最初から4行確保ではなく」）:
	   ここは box-sizing が content-box なので、min-height は**中身の高さ**を指す。
	   padding を足していたのは二重計上で、3行のつもりが実測151.9px＝約4.2行ぶん
	   確保されていた。行の高さだけを指定する（3行＝83.9px＋余白34px＝117.9px）。 */
	min-height: calc(1.65em * var(--exh-title-lines));
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--exh-title-lines);
	overflow: hidden;
}


/* ロゴは白い面に置いて、上下の罫線で区切る。
   パーセントの max-height は当てにせず px で頭打ちにする（2026-08-27 の経緯） */
/* 2026-08-29（ユーザー指示）:
     「画像が違くても縦横比が同じになるようにして」→ 切り取らない方式で対応

   もとは min-height だったので、枠は中身しだいで伸びうる作りだった。
   height で完全に固定し、画像は width/height 100% ＋ object-fit: contain で
   その枠の中に全体を収める。

   これで**枠の形は全カードで完全に同一**になる。画像そのものは縦横比を保ったまま
   letterbox（余白）で収まるので、ロゴの端が切れることは絶対に起きない。
   ロゴは支給画像ごとに縦横比が違うため、cover で埋めると社名が欠ける危険がある。

   box-sizing: border-box は、padding と罫線を 140px の内側に含めるため
   （付けないと 140 + 28 + 2 = 170px になり、固定した意味が無くなる）。 */
.exhibitor-seminar-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 140px;
	/* 2026-08-29: margin-top: auto をやめた。余りをロゴの上に吸わせると、
	   ロゴより下の中身の差がロゴの位置のズレになって出てしまうため
	   （上の .exhibitor-seminar-card__title のコメント参照）。
	   余りはカードの一番下に落ちる。 */
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid rgba(140, 110, 40, .14);
	border-bottom: 1px solid rgba(140, 110, 40, .14);
	overflow: hidden;
}

.exhibitor-seminar-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.exhibitor-seminar-card__speaker {
	padding: 16px 20px 18px;
	font-size: 14px;
}

.exhibitor-seminar-card__speaker p {
	margin: 0;
}

/* ブース番号は小さな黒札 */
.exhibitor-seminar-card__booth {
	display: inline-block;
	margin-bottom: 10px !important;
	padding: 3px 10px;
	background: var(--c-ink, #14110F);
	color: #fff;
	font-family: var(--ff-display);
	font-size: 11px;
	letter-spacing: .08em;
}

.exhibitor-seminar-card__org {
	color: var(--c-muted, #736C62);
	font-size: 13px;
}

.exhibitor-seminar-card__role {
	color: var(--c-muted, #736C62);
	font-size: 13px;
}

.exhibitor-seminar-card__name {
	font-weight: 700;
	font-size: 15px;
}

.exhibitor-seminar-card__note {
	margin: 0;
	padding: 0 20px 16px;
	font-size: 12px;
	color: var(--c-muted, #736C62);
}

/* 2026-08-29（ユーザー指示）「リンクをつけれるようにして」
   出展社セミナーのカードから公式サイトなどへ飛ばすリンク。
   カード内の他の区画と同じ 20px の余白に揃え、
   金色＋下線で「押せる場所」だと分かるようにする。 */
.exhibitor-seminar-card__link {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 13px;
}

.exhibitor-seminar-card__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-display);
	letter-spacing: .06em;
	color: var(--c-gold-deep, #C4A35A);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.exhibitor-seminar-card__link a::after {
	content: "→";
	text-decoration: none;
}

.exhibitor-seminar-card__link a:hover,
.exhibitor-seminar-card__link a:focus-visible {
	opacity: .72;
}

@media screen and (max-width: 768px) {

	.seminar-archive {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* 2026-08-29: 上と同じ理由で min-height → height。
	   img 側は width/height 100% ＋ contain なので max-height の指定は要らなくなった */
	.exhibitor-seminar-card__logo {
		height: 124px;
	}
}


/* =========================================================
   COMING SOON の枠のすぐ下に置く注記（2026-08-28 追記）

   クライアント指示:
     「これは、class="coming-soon"の直下に入れてください。
       また、Comingsoonと同じ幅にして、左寄せにしてください。」
     「これと同じにしてくれたらいいかも class="visitor-companies__pending"」

   来場案内の .visitor-companies__pending と同じ考え方
   （かたまりごと中央へ／中の文字は左のまま）で揃える。
   幅は COMING SOON の枠に合わせる。枠は <p> なので
   components.css の `.main_contents .section > p { max-width: 1100px }` が
   効いているが、こちらは <div> で同じ指定が届かない。
   同じ 1100px を明示して、左右 auto で枠とぴったり重ねる。

   .seminar-notes は既定が中央寄せ（2026年実績の下でそう使っている）なので、
   枠の直下に来たときだけ左寄せに上書きする。
   ※ このファイルは末尾に追記する決まり。
   ========================================================= */

html body .main_contents .coming-soon + .seminar-notes {
	box-sizing: border-box;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}


/* ---------------------------------------------------------
   同・注記の見え方（2026-08-28 追記）

   クライアント指示: 「薄文字 小さめ 色薄めにしてください。」

   ・薄文字 … Noto Sans JP の 300（header.php で 300/400/500/700 を読み込み済み。
              ブラウザが太さを合成するのではなく、本物の細いウェイトが当たる）
   ・小さめ … --fs-xs（0.875rem ＝ 14px）。本文の --fs-md（17px）より一段小さい
   ・色薄め … --c-muted（#736C62）。COMING SOON の文字と同じトーンで、
              本文よりはっきり引いて見える。白地でのコントラストは約4.9:1あり、
              薄くしても読めなくならない範囲にとどめている

   枠の直下に置いた注記だけに当てる（2026年実績の下の注記は従来のまま）。
   --------------------------------------------------------- */

html body .main_contents .coming-soon + .seminar-notes {
	font-size: var(--fs-xs, 0.875rem);
	font-weight: 300;
	color: var(--c-muted, #736C62);
	line-height: 1.9;
}


/* ---------------------------------------------------------
   同・注記の下の余白（2026-08-28 追記）

   クライアント指示: 「seminar-notesの下側にもマージ入れて」

   注記の下にはすぐ説明文（.title_txt）が来る。
   .title_txt は div なので既定の余白を持たず、
   共通側の `.title_txt + * { margin-top: var(--sp-lg) }` も
   「.title_txt の“次”」に効く規則なので、この並び（注記 → .title_txt）では届かない。
   結果、注記と説明文がくっついていた。

   上（COMING SOON の枠との間）は枠の margin-bottom で --sp-lg（64px）空いているので、
   下も同じ --sp-lg にして、注記のかたまりが上下で揃って見えるようにする。
   --------------------------------------------------------- */

html body .main_contents .coming-soon + .seminar-notes {
	margin-bottom: var(--sp-lg, 64px);
}