@charset "utf-8";
/* =========================================================================
   tablet.css
   タブレット帯（738px〜1024px）専用の上書きレイヤー。
   - 基本のレスポンシブはモバイル指定（max-width:1024px）が担う（横はみ出し対策）。
   - このファイルは「スマホをそのまま引き伸ばした見た目」を避けるため、
     タブレットで余白を活かした2カラム表示などの調整のみを追加する。
   - default.css / parts.css / page.css より後に読み込むこと。
   ========================================================================= */

@media screen and (min-width: 738px) and (max-width: 1024px) {

	/* --- コンテンツ全体の左右余白を少し広めに --- */
	#cont {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
	#home #cont {
		padding-left: 0;
		padding-right: 0;
	}
	#home #cont section .inner {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	/* --- 画像の意図しないはみ出し防止 --- */
	#cont img {
		max-width: 100%;
		height: auto;
	}

	/* =====================================================================
	   カードメニューをタブレットでは2カラムに（モバイルは1カラム）
	   .block-menu-2 / .block-menu-3 共通
	   ===================================================================== */
	.block-menu-2,
	.block-menu-3 {
		overflow: hidden;
	}
	.block-menu-2 li,
	.block-menu-3 li {
		width: calc(50% - 12px);
		float: left;
		margin: 0 0 24px !important;
		box-sizing: border-box;
	}
	.block-menu-2 li:nth-child(2n),
	.block-menu-3 li:nth-child(2n) {
		float: right;
	}

	/* 2カラム時はカード内を縦並び（画像上・テキスト下）に戻して見栄えを整える */
	.block-menu-2 li img,
	.block-menu-3 li img {
		float: none;
		width: 100%;
		height: auto;
		margin: 0 0 10px;
	}
	.block-menu-2 li h3,
	.block-menu-3 li h3 {
		text-align: center;
		margin: 0 0 10px !important;
		padding: 0 15px 8px;
	}
	.block-menu-2 li .text,
	.block-menu-3 li .text {
		margin: 0;
		padding: 0 6px;
	}

	/* =====================================================================
	   フッターのサイトマップを2カラムで見やすく
	   ===================================================================== */
	#footer .footer-nav > ul,
	footer .footer-nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 40px;
	}

	/* =====================================================================
	   2カラム本文（#main + #sub）はタブレットでは縦積み＋中央寄せで読みやすく
	   ===================================================================== */
	#main {
		float: none;
		width: 100%;
		margin: 0 auto 30px;
	}
	#sub {
		float: none;
		width: 100%;
		max-width: 560px;
		margin: 0 auto 30px;
	}
}