@charset "UTF-8";
/**
 * 追加スタイル（mmj）
 *
 * 既存の style.css は SCSS からコンパイルされたものであり、
 * SCSS ソースが手元にないため直接編集していない。
 * 本ファイルを style.css の後に読み込ませ、上書きする方式をとる。
 *
 * 読み込み: functions.php の my_script_init()（依存: style-css）
 * ロールバック: functions.php の wp_enqueue_style('custom-css', ...) を外すだけで元に戻る。
 *
 * 2026-09 コンテンツ入口の改修
 *   1. 第二階層トップを 2カラム → 3カラム
 *   2. アイコン表示（白背景ボックス）の追加
 */

/* ------------------------------------------------------------------
 * 1. 第二階層トップのコンテンツ入口を3カラムに
 *
 * .entrance-items は トップページ（.top-entrance__items）と共用のため、
 * 第二階層のみに適用されるよう .sub-entrance__items に限定する。
 * トップページは既存の2カラムのまま。
 *
 * カラム幅の計算: .inner のコンテンツ幅1080px − .entrance-items の padding 40px
 *                 − カラム間 40px × 2 = 960px ÷ 3 = 各320px
 * カラム間の余白 40px（2.5rem）は既存のままで仕様どおりのため変更しない。
 * ------------------------------------------------------------------ */
@media screen and (min-width: 960px) {
	.sub-entrance__items {
		grid-template-columns: repeat(3, 1fr);
	}

	/* カラム幅が 500px → 320px に狭まるため、タイトルの文字と矢印を縮める。
	   長いタイトルは2行以上に折り返すが、Subgrid が行の高さを吸収する。 */
	.sub-entrance__items .entrance-item__title {
		font-size: 1.375rem;
		grid-template-columns: auto 2rem;
		gap: 0.75rem;
	}

	.sub-entrance__items .entrance-item__title::after {
		height: 2rem;
		width: 2rem;
	}
}

/* ------------------------------------------------------------------
 * 2. アイコン表示（小サイズ）
 *
 * 画像の代わりにアイコンを選んだ場合、白い背景ボックスの中央に表示する。
 * ボックスの縦横比は大サイズ画像と同じ 1000 : 680（= 25 : 17）。
 * 既存のコンテンツ入口の画像はすべて 1000×680 で統一されているため、
 * 同じ行に並ぶ写真とボックスの高さが一致する。
 *
 * aspect-ratio を指定しているので、行のすべてがアイコンになった場合でも
 * 高さの基準が失われず、レイアウトが潰れない。
 * ------------------------------------------------------------------ */
.entrance-item__img--icon {
	aspect-ratio: 25 / 17;
	background-color: #fff;
	display: grid;
	place-items: center;
}

/* スマホ: アイコンの横幅は画面幅の20%。縦は画像の縦横比を維持する。
   縦長のアイコンでもボックスからはみ出さないよう max-height で上限を設ける
   （object-fit: contain により、上限に達しても縦横比は崩れない）。 */
.entrance-item__img--icon img {
	height: auto;
	max-height: 70%;
	object-fit: contain;
	width: 20vw;
}

/* PC: アイコンの横幅は 80px 固定。 */
@media screen and (min-width: 960px) {
	.entrance-item__img--icon img {
		width: 5rem;
	}
}

/* ------------------------------------------------------------------
 * 3. お知らせセクションが最下部にある場合の、装飾のはみ出し対策
 *
 * 2026-09-09 の page-second-top.php の変更で、お知らせ（.c-news）が
 * 最下部へ移動された。.c-news::after（装飾）は bottom: -118px で
 * 下方向にはみ出す指定のため、最下部にあると main の外へ 118px 溢れる。
 *
 * main には既存の style.css で overflow-x: hidden が指定されており、
 * CSS仕様上この場合 overflow-y は visible ではなく auto に計算される。
 * その結果 main がスクロール領域となり、ウィンドウとは別の縦スクロール
 * バーがコンテンツ内に発生していた（第二階層6ページすべてで118px）。
 *
 * 最下部にある場合のみ装飾のはみ出しを打ち消すことで、スクロールバーを
 * 解消する。:last-child で限定しているため、お知らせが最下部にない
 * トップページには影響しない。
 * ------------------------------------------------------------------ */
main > .c-news:last-child::after {
	bottom: 0;
}