@charset "UTF-8";
/* ==================================================================
 * ユーティリティ（1-c）
 *
 * 🚨 トークンを使ってよいのは「既存のCSSにPC用の上書きがある宣言」だけ。
 * 上書きが無い宣言は PC でも vw のまま効くため、トークンにすると値が変わる。
 * ================================================================== */

/* --- グリッドの列幅 --------------------------------------------------
 * 12分割。`calc(n/12 - 間隔)` で幅を決める（従来と同じ考え方）。
 * ★間隔は PC が 12px、SP が 3.2vw（=12px @375）で、どちらも --space-12 と一致する。
 */

@media screen and (min-width: 751px) {
	.u-grid-pc-col2 { flex-basis: calc(16.66667% - var(--space-12)); }
	.u-grid-pc-col3 { flex-basis: calc(25% - var(--space-12)); }
	.u-grid-pc-col4 { flex-basis: calc(33.33333% - var(--space-12)); }
	.u-grid-pc-col6 { flex-basis: calc(50% - var(--space-12)); }
	.u-grid-pc-col8 { flex-basis: calc(66.66667% - var(--space-12)); }
	.u-grid-pc-col10 { flex-basis: calc(83.33333% - var(--space-12)); }
	.u-grid-pc-col12 { flex-basis: 100%; }

	/* ★ボタン用は間隔が 21px（本文用の 12px と違う）。トークンに無いので実値のまま */
	.u-grid-btn-pc-col4 { flex-basis: calc(33.33333% - 21px); }
	.u-grid-btn-pc-col5 { flex-basis: calc(41.66667% - 21px); }
	.u-grid-btn-pc-col6 { flex-basis: calc(50% - 21px); }
	.u-grid-btn-pc-col12 { flex-basis: 100%; }

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

@media screen and (max-width: 751px) {
	.u-grid-sp-col3 { flex-basis: calc(25% - var(--space-12)); }
	.u-grid-sp-col4 { flex-basis: calc(33.33333% - var(--space-12)); }
	.u-grid-sp-col5 { flex-basis: calc(41.66667% - var(--space-12)); }
	.u-grid-sp-col9 { flex-basis: calc(75% - var(--space-12)); }
	.u-grid-sp-col11 { flex-basis: calc(91.66667% - var(--space-12)); }

	.u-grid-btn-sp-col4 { flex-basis: calc(33.33333% - var(--space-12)); }

	.u-grid-sp-center { justify-content: center; }
}

.u-grid-col12 { flex-basis: 100%; }
.u-grid-center { justify-content: center; }
.u-grid-right { justify-content: flex-end; }
.u-grid-stretch { align-items: stretch; }
.u-grid-vertical-middle { align-items: center; }

/* --- 横並び ---------------------------------------------------------- */

.u-horizontal {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.u-horizontal + .u-horizontal,
.u-horizontal-primary li + li {
	margin-top: var(--space-10);
}

.u-horizontal-primary > *:first-child {
	flex-basis: 15%;
}

.u-horizontal-primary > *:last-child {
	flex-basis: 85%;
}

@media screen and (min-width: 751px) {
	.u-horizontal-primary > *:first-child {
		flex-basis: 10%;
	}

	.u-horizontal-primary > *:last-child {
		flex-basis: 90%;
	}
}

/* --- リスト ---------------------------------------------------------- */

.u-ul,
.u-ol {
	list-style: none;
}
.u-ol-fit {
	margin-left: calc(var(--space-24) * -1);
}

.u-ul-decimal > li,
.u-ol-decimal > li {
	margin-left: var(--space-24);
	list-style-type: decimal;
}

.u-ul-square > li,
.u-ol-square > li {
	margin-left: var(--space-24);
	list-style-type: square;
}

.u-ul-asta > li{
	position: relative;
	padding-left: var(--space-24);
}

.u-ul-asta > li::before{
	position: absolute;
	top: 0;
	left: 0;
	content: "※";
}

.u-ul > li + li,
.u-ol > li + li {
	margin-top: 6.4vw;   /* 🚨 SP 24px / PC 16px と**値が違う**。トークン化できない */
}

.u-dl > dt {
	margin-bottom: var(--space-16);
}

.u-dl > dd + dd {
	margin-top: var(--space-8);
}

@media screen and (min-width: 751px) {
	.u-ul > li + li,
	.u-ol > li + li {
		margin-top: var(--space-16);
	}
}

/* --- リンク ---------------------------------------------------------- */

.u-link,
.entry-content a.u-link-none {
	text-decoration: none;
}

.u-link:hover,
.entry-content a.u-link-none:hover {
	text-decoration: underline;
	opacity: .6;
}

/* アイコンフォントには下線を引かない */
.u-link:hover i,
.u-link:hover i::before,
.u-link:hover i::after,
.entry-content a.u-link-none:hover i,
.entry-content a.u-link-none:hover i::before,
.entry-content a.u-link-none:hover i::after {
	text-decoration: none;
}

.u-link-underline {
	text-decoration: underline;
}

.u-link-underline:hover {
	text-decoration: none;
	opacity: .6;
}

/* --- 罫線 ------------------------------------------------------------ */

.u-border {
	position: relative;
	border-color: var(--color-red);
	border-style: solid;
}

.u-border-top {
	border-top-width: var(--space-3);
}

.u-border-bottom {
	border-bottom-width: var(--space-3);
}

/* 見出し下の短い赤線 */
.u-border-fixed::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: 48vw;   /* = 180px @375。PCで200pxに上書きされる */
	content: "";
	border-bottom: calc(3px / 1.5) solid var(--color-red);
	transform: translate(-50%, 0);
}

@media screen and (min-width: 751px) {
	.u-border-fixed::after {
		width: 200px;
		border-bottom: calc(3px / 1.5) solid var(--color-red);
	}
}

/* --- 表 -------------------------------------------------------------- */

.u-table {
	width: 100%;
	line-height: var(--leading-relaxed);
}

.u-table-main {
	border-spacing: 0;
	border-collapse: separate;
}

.u-table-main tr th {
	width: 20vw;
	padding: var(--space-16) 0 var(--space-16) var(--space-16);
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	background-color: #e7e7e7;   /* ★--color-gray-100(#e5e5e5) ではない。実値を保つ */
}

.u-table-main tr td {
	padding: var(--space-16);
	text-align: left;
	vertical-align: middle;
}

@media screen and (max-width: 751px) {
	.u-table-main tr th,
	.u-table-main tr td {
		display: inline-block;
		width: 100%;
	}

	.u-table-main tr th {
		border: var(--border-thin) dotted var(--color-gray-300);
		border-width: 1px 0 1px 0;
	}
}

@media screen and (min-width: 751px) {
	.u-table {
		line-height: 2;
	}

	.u-table-main tr th {
		width: 20%;
		padding: 36px 0 36px 36px;   /* 36px は一点物 */
		border-top: var(--border-thin) dotted var(--color-gray-300);
	}

	.u-table-main tr td {
		padding: 36px;
		border-top: var(--border-thin) dotted var(--color-gray-300);
	}

	.u-table-main tr:nth-child(2n) th {
		background-color: var(--color-gray-50);
	}
}

/* --- 表示・文字 ------------------------------------------------------- */

.u-display-block { display: block; }
.u-text-font-bold { font-weight: bold; }
.u-font-bold { font-weight: bold !important; }
.u-toggle-btn { cursor: pointer; }
.u-toggle-container { display: none; }

@media screen and (max-width: 751px) {
	.u-display-none-sp { display: none !important; }
	.u-text-sp-center { text-align: center; }
}

@media screen and (min-width: 751px) {
	.u-text-pc-center { text-align: center; }
	/*
	 * PCで隠す。既存の `u-display-none-sp` と対になる。
	 * 社員紹介の「おすすめの記事」で、公開環境が wp_is_mobile() で出し分けている
	 * 情報の並びを、CSSで出し分けるために使う（CDNのキャッシュに左右されないため）。
	 */
	.u-display-none-pc { display: none !important; }
}

/* --- 本文の器 --------------------------------------------------------- */

.l-contents {
	padding: 0 4.8vw 0;   /* = 18px @375 */
}

@media screen and (min-width: 751px) {
	.l-contents {
		padding: 0;
	}
}

/* ===== ページ全体に効く指定 ===== */
/*
 * 詳細度と読み込み順に依存するため、並びを変えない。
 */

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

	.u-ol-fit {
		margin-left: -1.5rem;
	}

	.u-ol-decimal > li {
		margin-left: 1.5rem;
	}

	.u-ul-square > li {
		margin-left: 1.5rem;
	}

	.u-ol-square > li {
		margin-left: 1.5rem;
	}

	.u-ul-asta > li {
		padding-left: 1.5rem;
	}

	.u-dl > dt {
		margin-bottom: 1rem;
	}

	.u-dl > dd + dd {
		margin-top: 0.5rem;
	}

	.u-horizontal + .u-horizontal {
		margin-top: 10px;
	}

	.u-horizontal-primary li + li {
		margin-top: 10px;
	}

	.u-border-top {
		border-top-width: 3px;
	}

	.u-border-bottom {
		border-bottom-width: 3px;
	}

}