@charset "UTF-8";
/* ==================================================================
 * 箱と見出し（1-c）
 *
 * サイト全体の骨格。`m-box` が節（section）、その中を
 * `m-box-header`（見出し）と `m-box-body`（中身）で分ける。
 *
 * 🚨 トークンを使ってよいのは「既存のCSSにPC用の上書きがあり、かつ値が一致する宣言」だけ。
 * ここは **SPとPCで値が違う指定が多い**（例: `.m-box + .m-box` は 60px と 120px）ので、
 * 該当箇所は実値のまま書いている。
 * ================================================================== */

/* --- 箱 -------------------------------------------------------------- */

.m-box {
	width: 100%;
	margin-top: var(--space-32);
}

/* 箱が続くときは大きく空ける。★SP 60px / PC 120px で値が違う */
.m-box + .m-box {
	margin-top: 16vw;
}

.m-box-header,
.m-box-header-second {
	padding: 0 0 var(--space-12);
	text-align: center;
}

.m-box-body {
	line-height: var(--leading-normal);
}

.m-box-body + .m-box-body {
	margin-top: var(--space-16);
}

@media screen and (min-width: 751px) {
	.m-box {
		margin-top: var(--space-32);
	}

	.m-box + .m-box {
		margin-top: 120px;
	}

	.m-box-header {
		padding: 0 0 14px;   /* 一点物 */
	}

	.m-box-header-second {
		padding: 0 0 7px;    /* 一点物 */
	}

	.m-box-body {
		padding: 0;
	}

	.m-box-body + .m-box-body {
		padding: 0;
		margin-top: var(--space-32);
	}
}

/* --- 箱の中の余白バリエーション ---------------------------------------- */

.m-box-inner {
	padding: var(--space-16) 0 0;
}

.m-box-inner-half {
	padding: var(--space-8) 0 0;
}

.m-box-inner-double {
	padding: var(--space-16) 0 var(--space-16);
}

/* ★SP 32px / PC 64px と値が違う */
.m-box-inner-wide {
	padding: 8.53333vw 0 8.53333vw;
}

.m-box-inner-all_side {
	padding: var(--space-16);
}

.m-box-inner-welfare {
	padding: var(--space-8) 0 var(--space-8);
	border-bottom: solid var(--border-thin) var(--color-gray-100);
}

@media screen and (min-width: 751px) {
	.m-box-inner {
		padding: var(--space-32) 0 0;
	}

	.m-box-inner-half {
		padding: var(--space-16) 0 0;
	}

	.m-box-inner-double {
		padding: var(--space-32) 0 var(--space-32);
	}

	.m-box-inner-wide {
		padding: 64px 0 64px;
	}

	.m-box-inner-all_side {
		padding: var(--space-32);
	}

	.m-box-inner-welfare {
		padding: var(--space-16) 0 var(--space-16);
	}
}

/* --- SDGsページ専用 ---------------------------------------------------- */

.m-box-sdogs {
	width: 100%;
	margin-top: var(--space-32);
}

.m-box-header-sdogs {
	padding: 0 0 var(--space-12);
	text-align: left;
}

.m-box-inner-sdogs,
.m-box-inner-sdogs-text {
	padding: var(--space-16) 0 0;
}

/* ★SP は下に大きく余白、PC は無し */
.m-box-inner-sdogs-last {
	padding: var(--space-16) 0 12.8vw;
}

.m-box-inner-sdogs-text p {
	margin-bottom: var(--space-16);
}

@media screen and (min-width: 751px) {
	.m-box-sdogs {
		margin-top: 60px;   /* 一点物（--space-32 の 32px ではない） */
	}

	.m-box-header-sdogs {
		padding: 0 0 14px;
	}

	.m-box-inner-sdogs,
	.m-box-inner-sdogs-last {
		padding: var(--space-32) 0 0;
	}

	.m-box-inner-sdogs-text {
		padding: 0;
	}

	.m-box-inner-sdogs-text p {
		margin-bottom: var(--space-32);
	}
}

/* --- 面の色 ------------------------------------------------------------ */

.m-card-white {
	background-color: var(--color-bg);
}

.m-card-gray-light {
	background-color: #f7f8f9;   /* ★--color-gray-50(#f7f7f7) とは別の値。寄せない */
}

.m-band-white {
	background-color: var(--color-white-a60);
}

/* --- 見出し ------------------------------------------------------------- */

.m-title-main {
	font-size: var(--font-26);
	font-weight: bold;
	line-height: 1em;
}

/* 見出しに添える英字（例: NEWS の下の「ニュース」） */
.m-title-main span {
	padding-top: var(--space-8);
	font-size: var(--font-16);
	font-weight: normal;
	line-height: .85em;
}

.m-title-secondary {
	font-size: var(--font-20);
	font-weight: bold;
}

.m-title-tertiary {
	font-size: var(--font-16);
	font-weight: bold;
}

.m-title-emphasis {
	font-size: var(--font-32);
	font-weight: bold;
	line-height: 1em;
	color: var(--color-red);
	text-shadow: .26667vw .26667vw .08vw var(--color-text);
}

@media screen and (min-width: 751px) {
	/* ★SP 26px / PC 32px と値が違うため上書きする */
	.m-title-main {
		font-size: var(--font-32);
	}

	.m-title-emphasis {
		text-shadow: .0625rem .0625rem .0625rem var(--color-text);
	}
}

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

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

	.m-title-main span {
		padding-top: 8px;
		font-size: 1rem;
	}

	.m-title-secondary {
		font-size: 1.25rem;
	}

	.m-title-tertiary {
		font-size: 1rem;
	}

}

/* ===== 個別に補う宣言 ===== */
/*
 * 🚨 セレクタは書き直し済みだが、**このプロパティだけ他に定義が無い**もの。
 */

.m-box-story {
	padding: 0 25px;
}

.m-box-crew-graduates {
	padding: 0;
}

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

	.m-box-story {
		padding: 0 200px;
	}

	.m-box-crew-graduates {
		padding: 0 200px;
	}

}

/*
 * 一覧へ戻る導線の箱。
 *
 * 🚨 この直後に採用の画像ボタン（`.m-btn-container`）が続くのは
 *    ストーリー詳細と社員紹介詳細の2箇所だけ。
 *    `.m-btn-container` の上余白は **スマホで 8px しかない**（PCは42px）ため、
 *    戻るリンクの文字がバナーに近づきすぎる。スマホのときだけ下に余白を足す。
 *    `.m-box` 全体を触ると他のページの間隔まで変わるので、この箱だけに限定する。
 */
.m-box-back {
	/*
	 * スマホでの間隔
	 *   下: 48px ＋ `.m-btn-container` の padding-top 8px ＝ **56px**
	 *   上: 既定の 16px を 8px に詰めて、リンク全体を上へ寄せる
	 */
	margin-bottom: calc(var(--space-32) + var(--space-16));
}

.m-box-back .m-box-inner {
	padding-top: var(--space-8);
}

@media screen and (min-width: 751px) {
	.m-box-back {
		/* PCは `.m-btn-container` の padding-top 42px で足りているため広げない。 */
		margin-bottom: 0;
	}

	.m-box-back .m-box-inner {
		/* PCは既定（32px）のまま。 */
		padding-top: var(--space-32);
	}
}