@charset "utf-8";
/* ==========================================================================
   受託サービス lineup ページ 改修（2026-10）
   ① LINEUP カードの短縮  ② 受託サービス詳細のアコーディオン化
   対象: /contract/lineup/ 配下 8ページ
   対になる JS: assets/js/lineup-acc.js
   ========================================================================== */
/* --- ① LINEUP カード ---------------------------------------------------- */
/* .lineup_link は この8ページでしか使われていないが、
   他ページへ波及させないよう .lineup_renewal で囲っておく。 */
/* SP(767px以下)は元から縦積みで高さを詰めてあるため、PC・タブレットのみ調整する */
@media (min-width: 768px) {
	.lineup_renewal .lineup_link > a {
		min-height: 80px;
		margin-bottom: 14px;
	}
	/* 画像の実寸で高さが決まらないよう、枠に敷き込む */
	.lineup_renewal .lineup_link_img {
		position: relative;
	}
	.lineup_renewal .lineup_link_img img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* テキスト面を画像と同じ高さまで伸ばし、1行のボタンとして組む。
   並びは  [A] 見出し ……… ↓  。
   元は h3 だけが帯になっていて、その下に余白が残っていた。
   背景を .lineup_link_text 側へ移すと、親 a の flex 既定値 align-items:stretch で
   画像と同じ高さまで伸びる。 */
.lineup_renewal .lineup_link_text {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: .4em .8em;
	background: #00B0CB;
	color: #fff;
}
.lineup_renewal .lineup_link h3 {
	/* 背景は .lineup_link_text へ移したので、ここは文字だけ持たせる */
	flex: 1;
	min-width: 0;
	padding: 0;
	background: none;
}
/* アルファベットは浮かせず、見出しの左のラベルとして置く。
   幅を固定して、カードが横に並んだときに見出しの開始位置が揃うようにする。 */
.lineup_renewal .lineup_link_text::before {
	position: static;
	z-index: auto;
	flex-shrink: 0;
	width: 1.1em;
	padding-right: 10px;
	border-right: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-size: 24px;
	text-align: center;
}
/* 下向きアロー。クリックで下の「受託サービス詳細」が開くことを示す */
.lineup_renewal .lineup_link_text::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform .3s;
}
/* 既存の hover は背景を #EFEFEF にするもので、白文字だと読めなくなるため差し替える */
.lineup_renewal .lineup_link > a:hover .lineup_link_text {
	background: #007C8E;
}
.lineup_renewal .lineup_link > a:hover .lineup_link_text::after {
	transform: rotate(45deg) translate(2px, 2px);
}
@media (max-width: 767px) {
	/* 画像が上、テキストが下の縦積みになる。
	   アルファベットは responsive.css が content:none で消しており、
	   横幅が 169px しかなく見出しが折り返すため、SPでは出さないままにする。 */
	.lineup_renewal .lineup_link_text {
		gap: 6px;
		padding: .5em .6em;
	}
	/* 見出しは 16px だと半数以上のカードが2行以上に折り返すため 13px にする。
	   （全38枚の実測: 16px = 1行16/2行20/3行2 → 13px = 1行25/2行12/3行1）
	   12px まで下げても 1行が1枚増えるだけなので、読みやすさを優先して 13px。 */
	.lineup_renewal .lineup_link h3 {
		font-size: 13px;
	}
	/* 縦積みでは帯が伸びず、見出しが1行のカードだけ下に白が残る。
	   縦方向の flex にして、PC と同じく帯をカードの高さまで伸ばす。
	   バナーだけのリンクは中身が img 1枚なので対象外にする。 */
	.lineup_renewal .lineup_link > a:not(.lineup_link_bnr) {
		display: flex;
		flex-direction: column;
	}
	.lineup_renewal .lineup_link > a:not(.lineup_link_bnr) .lineup_link_text {
		flex: 1;
	}
	.lineup_renewal .lineup_link_text::after {
		width: 7px;
		height: 7px;
		margin-top: -3px;
		border-width: 1.5px;
	}
}

/* --- ③ セクション入れ替えに伴う余白の付け替え ---------------------------- */
/* common.css は #sec01 に margin-top:80px を持たせており、これは
   「LINEUP（お問い合わせボタン）の直後」に置かれていた前提の余白。
   入れ替え後は #sec03 がその位置に来るため、余白もそちらへ移す。
   ・LINEUP のボタン → 次のセクションの間を、元と同じ 80px にする
   ・#sec01 が #sec02 の後ろに来ても、元の「#sec02 → #sec03」と同じく
     #sec02 の padding-bottom(80px) だけにする
   入れ替え後の並びにだけ効くよう、隣接セレクタで限定している。 */
.lineup_renewal > section:not([id]) + #sec03 {
	margin-top: 80px;
}
.lineup_renewal #sec02 + #sec01 {
	margin-top: 0;
}

/* --- ② 受託サービス詳細 アコーディオン ---------------------------------- */
.lineup_acc_panel,
.lineup_acc2_panel {
	display: none;
}
.lineup_acc + .lineup_acc {
	margin-top: 24px;
}

/* 見出しを包む button（階層1・階層2 共通） */
.lineup_acc_btn,
.lineup_acc2_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.lineup_acc_btn:hover,
.lineup_acc2_btn:hover {
	opacity: .85;
}
.lineup_acc_btn:focus-visible,
.lineup_acc2_btn:focus-visible {
	outline: 2px solid #007C8E;
	outline-offset: 3px;
}

/* 開閉アイコン（閉 = ＋ / 開 = −） */
.lineup_acc_icon {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.lineup_acc_icon::before,
.lineup_acc_icon::after {
	position: absolute;
	top: 50%;
	left: 0;
	content: "";
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
}
.lineup_acc_icon::after {
	transform: rotate(90deg);
	transition: transform .3s;
}
[aria-expanded="true"] .lineup_acc_icon::after {
	transform: rotate(0);
}

/* 階層1（A・B・C…） */
.lineup_acc_head h3 {
	flex: 1;
}
.lineup_acc_head p.font_josefin {
	pointer-events: none;
}

/* 階層2（A-1・A-2…）
   上下の余白は元のマークアップが持つ mt-3 / mt-5 をそのまま使う。
   h4 の margin-top は親 .lineup_acc2 と相殺して外側に出るため、
   アコーディオン化前と同じ間隔（キャッチ直後 16px / 項目間 48px）になる。
   ここで margin を指定し直すと元のデザインから外れるので注意。 */
.lineup_acc2_head {
	border-bottom: 1px solid #D9E9EB;
}
/* 階層2どうしの間隔。元は mt-5(48px) だが、閉じている状態では空きすぎるため
   1rem に統一する。先頭（キャッチ直後）の mt-3 と同じ間隔になる。
   元マークアップの mt-3 / mt-4 / mt-5 は Bootstrap の !important 付きなので
   こちらも !important で上書きする。 */
.lineup_acc2 + .lineup_acc2 > .lineup_acc2_head {
	margin-top: 1rem !important;
}
.lineup_acc2_head h4 {
	flex: 1;
	padding-right: 8px;
}

/* 階層が分かるよう、親の見出しラベル(.font_josefin)の幅ぶん子を下げる。
   これで子の左端が親のラベルの右端・見出しテキストの左端に揃う。
     階層1のバッジ 66px        → キャッチと階層2 がバッジの右端に揃う
     階層2のラベル 94px + 16px → 階層3 が階層2の見出しテキストに揃う
   右端は3階層とも揃ったまま。
   左右の margin / padding は上下のマージン相殺に影響しないため、
   上で効かせている mt-3 / mt-5 の余白はそのまま保たれる。 */
.lineup_acc_panel > * {
	margin-left: 66px;
}
.lineup_acc2_panel {
	padding-left: 110px;
}
/* protein / cell の C はキャッチと右のバナーが 2カラムで組まれており、
   横幅に余裕がない。コンテナごと下げるとバナーが折り返すため、
   コンテナは元の幅のままにして左カラムの中だけを下げる。 */
.lineup_acc_panel > .d-lg-flex {
	margin-left: 0;
}
.lineup_acc_panel > .d-lg-flex > div:first-child {
	padding-left: 66px;
	/* 下げたぶん左カラムが広がって折り返さないよう、残り幅に収める */
	flex: 1;
	min-width: 0;
}
@media (max-width: 767px) {
	/* 画面が狭く、同じ量を下げると表が読めなくなるため控えめにする */
	.lineup_acc_panel > * {
		margin-left: 12px;
	}
	.lineup_acc_panel > .d-lg-flex {
		margin-left: 0;
	}
	.lineup_acc_panel > .d-lg-flex > div:first-child {
		padding-left: 12px;
	}
	.lineup_acc2_panel {
		padding-left: 12px;
	}
}