@charset "utf-8";

/* =========================================================
   展示会概要（/overview/ ＝ pages/info.php）専用のCSS

   ページのスラッグと同じ名前のファイルは header.php が自動で読み込む。
   共通のCSS（tokens / common / components）より後に読まれるので、
   ここでの指定はこのページの中だけに効く。

   追記は必ずこのファイルの末尾へ。
   途中に足すと、下のほうにあるメディアクエリに負けて効かなくなる。
   ========================================================= */


/* ---------------------------------------------------------
   2026-08-24（クライアント指示 OVER-02）
   「いい感じのところで改行して、ください。今は文章の途中で開業して気持ち悪い」

   冒頭の紹介文が「…技術が集ま／るBtoB国際展示会です。」のように
   単語の途中で折り返していた。pages/info.php で本文を意味のかたまり
   （文節）ごとに <span class="ej-phrase"> で包み、ここで inline-block に
   することで、折り返しが「かたまりの境目」でしか起きないようにしている。

   <br> で改行位置を固定していないので、画面幅が狭くなっても崩れない。
   736px / 520px / 343px の各幅で、文の途中で切れないことを確認済み。

   .ej-phrase 自体はテーマ既存のクラス（inc/helpers.php の ej_phrase()、
   css/front-page.css）と同じもの。ただし front-page.css はこのページでは
   読み込まれないため、このページ用にここで定義している。
   --------------------------------------------------------- */

html body .main_contents .overview-lead .ej-phrase {
	display: inline-block;
	/* かたまり同士の間に余白を作らない（間は改行位置としてだけ使う） */
	margin: 0;
}

html body .main_contents .overview-lead {
	/* 行頭に「ッ」「ー」「、」などが来ないようにする日本語の折り返し規則 */
	line-break: strict;
	/* 万一かたまりが画面幅より長くなっても、はみ出さずに中で折り返す保険 */
	overflow-wrap: break-word;
	/* 対応ブラウザでは各行の長さを揃える。効かない環境でも
	   文節ごとの区切りはそのまま活きるので、見た目が崩れることはない。 */
	text-wrap: balance;
}


/* ---------------------------------------------------------
   2026-08-24（クライアント指示 OVER-06 のうち、このページで対応できる分）
   「住所を中央寄せにして〒112-0004　東京都文京区後楽1-3-61
     東京ドームシティ プリズムホール　にして」

   ・中央寄せ … 共通側（css/components.css 末尾の .title_txt）で適用済みのため
                 ここには重ねて書かない。
   ・並び順（〒→住所→施設名）と文字づかい
                … 出力しているのは共通パーツ template-part/venue-access.php で、
                  住所そのものは inc/event-config.php が持っている。
                  どちらも来場案内ページと共用のため、共通側の担当へ依頼している。

   このページ側では「狭い画面で不自然に切れないこと」だけを担保しておく。
   並び順がどう変わっても効く書きかたにしてあるので、共通側の修正と衝突しない。
   --------------------------------------------------------- */

html body .main_contents .venue-access .title_txt {
	line-break: strict;
	overflow-wrap: break-word;
}

/* 2026-08-24 追記:
   かたまりを inline-block にしていると、かたまり自体が行幅より広いときに
   結局その中で折り返してしまう（クライアントが指摘した「文の途中で改行」が再発する）。
   幅の狭い端末では、かたまり分けをやめて素直に流す。
   front-page.css の .ej-phrase にも同じ逃げ道がある（あちらはこのページでは読まれない）。 */
@media screen and (max-width: 480px) {
	html body .main_contents .overview-lead .ej-phrase {
		display: inline;
	}
}


/* =========================================================
   2026-08-24（クライアント指示）
   「展示会概要 → 開催概要 のイベント情報のテーブル幅を max-width 1000px に
     して真ん中寄せに。テキストは左寄せのまま」

   共通側（components.css の .info-table table）は
   max-width: var(--w-content) = 1600px なので、ワイドな画面では
   表が横いっぱいに伸びて、見出し（th）と値（td）が離れすぎていた。

   このページだけ 1000px で止めて中央に置く。
   中の文字は共通側の text-align:left のままなので触らない
   （「かたまりごと中央へ、中の文字は左」の決まりと同じ扱い）。
   表の下の「※ 会期・会場は…」の注記も、ずれて見えないよう同じ幅に合わせる。
   ========================================================= */

html body .main_contents .info-table table {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

html body .main_contents .info-table__note {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}