@charset "UTF-8";

/* =========================================================
   出展社一覧ページ（/exhibitors）専用のCSS

   固定ページのスラッグが "exhibitors" なので、header.php の
   ej_page_style_slug() によってこのページでだけ自動的に読み込まれる
   （css/news.css が /news でだけ読まれるのと同じ仕組み）。
   ページ共通の指定は書かないこと。

   追記は必ずこのファイルの末尾へ。途中に挿すと、後ろの
   メディアクエリが素の指定に負けて効かなくなる。
   ========================================================= */


/* ---------------------------------------------------------
   2026-08-24 クライアント指示（EXHI-05）
   「来場者登録のボタンが無いので追加」

   ページ最下部の来場登録ボタンの、狭い画面での折り返し。
   共通の .btn は white-space:nowrap のため、文言が長いと1行のまま
   横に伸び、黒い背景ごと画面の外へはみ出す。
   Chrome 実測（共通側の修正を当てた状態）では、
   「EDEN JAPAN 2027 来場登録」のボタン幅は 318px 固定で、
   置ける幅は 375px 端末で 327px（収まる）／320px 端末で 272px（はみ出す）。
   そこで 360px 以下のときだけ折り返しを許し、左右の余白も詰めて
   必ず画面内に収まるようにする。文言を短くしたままでも、
   端末がさらに狭い場合の保険になる。

   ※「文字がボタンの黒背景からはみ出す」原因だった .btn の
     max-width:220px と、ボタンが opacity:0 のまま出てこない
     fadein() の不具合は、いずれも共通側で修正済みなので
     ここでは触らない。
   --------------------------------------------------------- */
@media screen and (max-width: 360px) {

	html body .page-cta .btn {
		white-space: normal;
		max-width: 100%;
		justify-content: center;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ---------------------------------------------------------
   2026-08-28 クライアント指示
   「EDEN JAPAN EXPO 2026 出展社一覧 と下のコンテンツの幅が狭すぎると思うので
     調整してほしい、あと上は少し広げてほしい」

   ■ 下（カードの並び）が狭く見えていた理由
   共通の .card は width:27% 固定。1行3枚なので 27×3＝81% しか使わず、
   残り19%が左右の余白として捨てられていた。
   Chrome 実測（このページ）:
     画面1440px … 置ける幅1296px に対しカードは350px×3＝1110px（186px余り）
     画面1280px … 置ける幅1152px に対し311px×3＝ 993px（159px余り）
   本文や見出しは端まで使っているのに、カードだけ内側に寄って見えていた。

   1行3枚のまま、隙間（gap:30px×2＝60px）を引いた残りを3等分して
   行いっぱいに広げる。1px多めに引いているのは、端数の丸めで
   合計が100%をわずかに超えて4枚目が落ちる（1行2枚になる）のを防ぐため。
   実測 1440px で 350px → 412px（約1.18倍）。

   画面が広すぎるとカード1枚が大きくなりすぎるので、
   並び全体の幅に上限を設けて中央に置く。

   768px以下は共通側で width:80%（1列）に切り替わるため、
   769px以上にだけ当てる。

   ■ 上（リード文）を少し広げる
   共通の .title_txt は max-width:46em（実測782px）。
   下のカードが行いっぱいまで広がると、上だけ細く見えるので
   54em（約918px）まで広げる。読みやすさが崩れない範囲にとどめ、
   カードの並びよりは内側に収まるようにして、上下の関係は保つ。

   ※ このファイルは末尾に追記する決まり。
   --------------------------------------------------------- */

@media screen and (min-width: 769px) {

	html body .main_contents .card-grid--logo {
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
	}

	html body .main_contents .card-grid--logo .card {
		width: calc((100% - 61px) / 3);
	}

	html body .main_contents .title_txt {
		max-width: 54em;
	}
}


/* ---------------------------------------------------------
   2026-08-28 クライアント指示
   「<h3 class="sub-title">…</h3> これさ下の
     <section class="section card-grid card-grid--logo scrollin"> に入れれない？」

   見出しをカードの並びの中へ移した（pages/exhibitor-list.php）。
   .card-grid は display:flex; flex-wrap:wrap なので、そのままだと
   見出しがカードと同じ行に並んでしまう。幅100%の1行として置く。

   余白について。もとの .sub-title は margin-bottom:45px だったが、
   flex の中では margin が隣と相殺せず、行と行の隙間（row-gap:30px）が
   そのまま足される。45＋30＝75px になってしまうので、
   16px にして 16＋30＝46px ＝ 従来とほぼ同じ見え方に揃える。
   上は .section の padding-top が効くので 0 にする。
   --------------------------------------------------------- */

html body .main_contents .card-grid--logo .sub-title {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 0;
	margin-bottom: 16px;
	text-align: center;
}