@charset "UTF-8";
/* ==================================================================
 * レイアウトとグリッド（共通パーツ / 1-b）
 *
 * 【方針】
 * - IE10/旧Safari 向けのベンダープレフィックスを削除
 * （`-webkit-box` / `-ms-flexbox` / `-ms-flex-*`。要件は Requires at least 6.5 / PHP 8.1 で、
 * 対象ブラウザに IE は含まれない）
 * - 数値を tokens.css の変数に置き換え
 * ★**宣言の効果は変えていない**（プレフィックスを外し、値を変数にしただけ）
 * ================================================================== */

/* --- ページ全体の枠 ------------------------------------------------ */

.l-wrapper {
	width: var(--wrapper-width);
}

.l-container {
	width: var(--container-width);
}

/* トップページ以外の、ヘッダー分の余白 */
.l-wrapper-page_top {
	padding-top: 12.53333vw;   /* = 47px @375。★4pxスケール外 */
}

@media screen and (min-width: 751px) {
	.l-wrapper,
	.l-container {
		margin: auto;
	}

	.l-container {
		padding: 0;
	}

	.l-wrapper-page_top {
		padding-top: 0;
	}

	/* 多言語を廃止した面で、ヘッダー上端に入る黒帯 */
	.l-wrapper-page_top.lang-disable {
		border-top: solid var(--space-32) var(--color-text);
	}
}

/* --- グリッド ------------------------------------------------------
 * 既存のCSSは flex ベース。`col{n}` は 12分割の flex-basis。
 * ★gap ではなく calc() で間隔を作っている（従来どおり）。
 */

.u-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.u-grid-left {
	justify-content: flex-start;
}

@media screen and (min-width: 751px) {
	.u-grid-pc-equal {
		justify-content: space-around;
	}

	.u-grid-pc-vertical-middle {
		align-items: center;
	}

	.u-grid-pc-col9 {
		flex-basis: calc(75% - var(--space-12));
	}
}

@media screen and (max-width: 751px) {
	.u-grid-sp-col6 {
		flex-basis: calc(50% - var(--space-12));
	}

	.u-grid-sp-col12,
	.u-grid-btn-sp-col12 {
		flex-basis: 100%;
	}
}

/* --- 汎用 ---------------------------------------------------------- */

@media screen and (min-width: 751px) {
	.u-display-none-pc {
		display: none !important;
	}
}

.m-card-gray {
	background-color: var(--color-gray-200);  /* #ddd。★#ccc ではない */
}