/* ============================================
   おしごとずかん 上書きCSS
   担当: 山中 / 2026-09-02〜
   ============================================ */

/* 半円ドームを真円弧に(クライアント依頼「カーブをキレイな円に※他ページも同様」):
   dx__titleは幅380remに対し半径180remで頂部に平らな区間が出るため幅=半径×2へ補正 */
@media screen and (min-width: 769px) {
	.page-workbook .page-dx .dx__title {
		width: 360rem;
	}
}

/* ============================================
   2026-09-02 クライアント修正依頼
   ============================================ */

/* 「働く車紹介」の見出しドームを真円弧に: 幅300×高さ140rem(SP180×85)に
   半径150remでは高さ制約で半径が縮み頂部に平らな区間が出るため、
   高さ=半径・幅=半径×2に補正 */
@media screen and (min-width: 769px) {
	.page-workbook .page-vehicle__head {
		/* 拡大360×180+食い込み60rem(頂点の高さは境界上120remのまま不変) */
		width: 360rem;
		height: 180rem;
		border-radius: 180rem 180rem 0 0;
		transform: translate(-50%, calc(-100% + 60rem));
	}
}
@media screen and (max-width: 768px) {
	.page-workbook .page-vehicle__head {
		/* PC同様に拡大216×108+食い込み30rem(PCの1/2スケール) */
		width: 216rem;
		height: 108rem;
		border-radius: 108rem 108rem 0 0;
		transform: translate(-50%, calc(-100% + 30rem));
		border: none;
	}
	.page-workbook .page-vehicle__head::before {
		content: "";
		position: absolute;
		inset: 0;
		border: 1rem solid #999;
		border-bottom: none;
		border-radius: 108rem 108rem 0 0;
		pointer-events: none;
		clip-path: inset(0 0 32rem 0); /* 食い込み30rem+安全2rem */
	}
}

/* ⑧(SP不具合の根本対策):
   グローバルの section { overflow-x: clip } を、WebKit(iOS Safari)が描画時に
   縦方向までクリップするバグがあり、セクション上へ張り出す見出しドーム
   (「働く車紹介」)がiPhoneだけ消えていた。
   ※全セクション解除にするとタイムラインの横長トラック(約1500px)が
   レイアウト幅を押し広げ、モバイル検証モードでページがズームアウトする
   副作用が出たため、ドームを持つ .page-vehicle だけに限定して解除する */
.page-workbook .page-vehicle {
	overflow-x: visible;
}

/* 働く車紹介の「+」ボタンとモーダルの「×」ボタン: 行高・フォント基準の
   配置は環境でズレ得るため、フレックスで◯の中心に固定(PC/SP共通) */
.page-workbook .page-vehicle .page-vehicle-card .page-vehicle-card__plus,
.page-workbook .page-vehicle .popup__close {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
}

/* モーダルの「×」: グレーの塗りを外し、円に枠線+×を大きく(クライアント指定。
   ボタンのデフォルト文字色はiOSで青になるため色も明示)。SPも同調整 */
.page-workbook .page-vehicle .popup__close {
	background: transparent;
	border: 1rem solid #333;
	color: #333;
	font-size: 32rem;
}

/* 「+」アイコン: 円に枠線を追加し、+を黒に(クライアント指定。SPも同調整) */
.page-workbook .page-vehicle .page-vehicle-card .page-vehicle-card__plus {
	border: 1rem solid #333;
	color: #333;
}

/* work-wave下の1px隙間(スライダーが線状に見える)対策(PC/SP共通) */
.page-workbook-intro .flow-images .wave-bg {
	bottom: -1px;
	display: block;
}

/* 「西松のDX」ドーム: ヒーロー下端より下へ食い込む際に弧の線がはみ出るため、
   線を::beforeに分離し境界より下だけクリップ(ONE DAYと同方式。
   ドームも下のエリアも白のため面のはみ出しは見えない) */
.page-workbook .page-dx .dx__title {
	border: none;
}
.page-workbook .page-dx .dx__title::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1rem solid #333;
	border-bottom: none;
	border-radius: 180rem 180rem 0 0;
	pointer-events: none;
}
@media screen and (min-width: 769px) {
	.page-workbook .page-dx .dx__title::before {
		clip-path: inset(0 0 35rem 0); /* bottom:-35remの食い込み分 */
	}
}
@media screen and (max-width: 768px) {
	/* SPも真円弧に: 幅180×高さ85remでは角丸クランプで頂部に約10remの
	   平らな区間が出るため、幅=半径(85rem)×2に補正。さらに10rem下へ移動 */
	.page-workbook .page-dx .dx__title {
		width: 170rem;
		border-radius: 85rem 85rem 0 0;
		bottom: -30rem; /* 元-20rem */
	}
	.page-workbook .page-dx .dx__title::before {
		border-radius: 85rem 85rem 0 0;
		clip-path: inset(0 0 30rem 0); /* bottom:-30remの食い込み分 */
	}
}

/* ⑩ マーキーのトラック: flexの縮小で画像が横に潰れ・欠けて見えるため縮小禁止 */
.page-workbook .page-dx .flow_dx .dx__bg img {
	flex-shrink: 0;
}

/* マーキーの「一瞬途切れる」対策: アニメーションの移動距離は-1560rem固定だが、
   繰り返し1単位の実幅はフォント描画依存で不一致となり、ループの継ぎ目で
   毎回ジャンプ+右端に空白が出ていた。
   → 1周期(1単位幅+ギャップ)をJS(functions.php)で実測し、CSS変数--nm-mq-shiftで
   移動距離に渡す方式に変更。要素間の余白は10remに設定(クライアント指定) */
.page-workbook .page-dx .flow_dx {
	gap: 10rem;
	animation-name: nmFlowMove;
}
.page-workbook .page-dx .flow_dx .dx__bg {
	gap: 10rem;
	flex-shrink: 0;
}
@keyframes nmFlowMove {
	from { transform: translateX(0); }
	to { transform: translateX(var(--nm-mq-shift, -1140rem)); }
}

/* ⑥ クラウドシステムのメリット箱: 枠線が細く薄くて見えないため太く濃く */
.page-workbook .page-dx .merit-list .merit-card {
	border: 2rem solid #999;
}

/* ④ ONE DAYタイトルの文字のアキを詰める */
.page-workbook .page-oneday__title p {
	line-height: 1.2;
	margin-bottom: 0;
}
.page-workbook .page-oneday__title h2 {
	line-height: 1.05;
}
.page-workbook .page-oneday .page-oneday__title p.sub {
	margin-top: 0; /* 元12rem(クライアント指示で不要) */
}

@media screen and (min-width: 769px) {
	/* KV(イントロ)を幅80%・中央配置に(クライアント指定) */
	.page-workbook-intro--inner {
		width: 80%;
		margin-inline: auto;
	}

	/* ①(PC) 波ギャラリーの写真を大きく(400×300→500×375、波に隠れる割合を減らす) */
	.page-workbook-intro .flow-images .gallery figure {
		width: 500rem;
		height: 375rem;
		/* 写真をもう少し上に出す: 下マージン分だけ波より上に持ち上げる */
		margin-bottom: 30rem;
	}
	/* .nm-arrowの幅(このページのみ・クライアント指定。maskはcontainのため縦横比は保たれる) */
	.page-workbook .nm-arrow {
		width: 0.55em;
	}

	/* サービスカード「もっとくわしく」(.more)のフォント */
	.page-workbook .page-service .card .more {
		font-size: 25rem;
		font-weight: 800;
	}

	/* ②(PC) カードの青ベタに余白を追加し、スライドも一回り拡大 */
	.page-workbook .page-service .swiper-slide {
		width: 520rem;
	}
	.page-workbook .page-service .card .card-main .card-body p {
		padding: 20rem 30rem;
	}
	/* ②(PC) 前後ボタンをもう少し外側へ */
	.page-workbook .page-service .service-prev {
		left: 31%;
	}
	.page-workbook .page-service .service-next {
		right: 31%;
	}

	/* ⑤(PC) 「西松のDX」テキストの位置を下げる */
	.page-workbook .page-dx .dx__title {
		padding-top: 50rem;
	}

	/* クラウドシステムのメリット箱の見出し(クライアント指定) */
	.page-workbook .page-dx .merit-list .merit-card h4 {
		font-size: 33rem;
	}

	/* ONE DAYの時刻バッジ: 50remに拡大。上下パディングは元々0で、
	   行高1.8のアキが上下余白になっているため行高を詰める */
	.page-workbook .page-oneday .time {
		font-size: 50rem;
		line-height: 1.4;
	}

	/* ONE DAYサブタイトルの「1」: SPと同じ見え方(ウエイト700)に統一(クライアント依頼。
	   元はPCのみ900=Montserrat Blackで太く見えていた) */
	.page-workbook .page-oneday .page-oneday__title p.sub span {
		font-weight: 700;
	}

	/* プロが働く現場: 見出し50rem・本文ウエイト500(クライアント指定) */
	.page-workbook .page-professional__title {
		font-size: 50rem;
	}
	.page-workbook .page-professional-card__content p {
		font-weight: 500;
	}

	/* 働く車紹介の半円をセクション境界より30rem下へ食い込ませる。
	   線がはみ出ないよう弧の線を::beforeに分離し境界より下をクリップ
	   (DX・ONE DAYと同方式。ドームもセクション内も白のため面のはみ出しは見えない) */
	.page-workbook .page-vehicle__head {
		border: none;
	}
	.page-workbook .page-vehicle__head::before {
		content: "";
		position: absolute;
		inset: 0;
		border: 1rem solid #999;
		border-bottom: none;
		border-radius: 180rem 180rem 0 0;
		pointer-events: none;
		clip-path: inset(0 0 62rem 0); /* 食い込み60rem+安全2rem */
	}

	/* 働く車紹介の見出し文字(クライアント指定)。
	   「西松の」と「働く車紹介」の間はマージン0で行高(1.8)分のアキのため行高を詰める */
	.page-workbook .page-vehicle__head p {
		font-size: 23rem;
		font-weight: 800;
		line-height: 1.2;
		margin-bottom: 8rem; /* 詰めすぎたため少しアキを戻す */
	}
	.page-workbook .page-vehicle__head h2 {
		font-size: 40rem;
		line-height: 1.1;
	}
	/* 両テキストを少し上へ(レイアウトに影響しないtransformで移動) */
	.page-workbook .page-vehicle__head p,
	.page-workbook .page-vehicle__head h2 {
		transform: translateY(-12rem);
	}

}

@media screen and (max-width: 768px) {
	/* ⑨(SP) タイムラインを「7:45」カードが中央にある状態で開始
	   (カード幅260remの半分をビューポート中央から引いた左パディング) */
	.page-workbook .page-oneday .timeline__wrap {
		padding-left: calc(50vw - 130rem);
	}

	/* ============================================
	   2026-09-03 SP調整(クライアント指定)
	   ============================================ */

	/* KV(キャッチコピー・タイトル・リード文)を10rem上へ
	   (transformなので周囲のレイアウトに影響しない) */
	.page-workbook-intro .content {
		transform: translateY(-10rem);
	}

	/* サービスカードの見出し・番号(クライアント指定) */
	.page-workbook .page-service .card .card-main .card-title h3 {
		font-size: 31rem;
		line-height: 1;
	}
	.page-workbook .page-service .card .card-main .card-title .number {
		font-size: 20rem;
	}

	/* .nm-arrowの幅(SPは0.65em。PCは0.55em) */
	.page-workbook .nm-arrow {
		width: 0.65em;
	}

	/* プロが働く現場(クライアント指定) */
	.page-workbook .page-professional-card__content h3 {
		font-size: 20rem;
		text-align: center;
		font-weight: 800;
	}
	.page-workbook .page-professional-card__content p {
		font-weight: 500;
	}
	.page-workbook .page-professional__list {
		gap: 20rem;
	}

	/* 西松のDXセクション(SP・クライアント指定) */
	.page-workbook .page-dx .flow_dx .dx__bg {
		padding-top: 10rem;
	}
	/* DXマーキー(SP): スライド速度を上げる(30s→18s・クライアント依頼) */
	.page-workbook .page-dx .flow_dx {
		animation-duration: 18s;
	}
	.page-workbook .page-dx .dx__content h2 {
		font-size: 25rem;
		margin-bottom: 10rem;
	}
	.page-workbook .page-dx .dx__content p {
		margin-bottom: 30rem;
	}
	.page-workbook .page-dx .cloud-merit__content h2 {
		font-size: 20rem;
	}
	.page-workbook .page-dx .cloud-merit__top {
		gap: 30rem;
	}
	.page-workbook .page-dx .merit-title {
		padding: 5rem 28rem;
	}
	.page-workbook .page-dx .merit-list .merit-card h4 {
		font-size: 18rem;
	}
	/* MERIT・No.テキストの縁(text-stroke 2px)を除去 */
	.page-workbook .page-dx .merit-list .merit-card .number,
	.page-workbook .page-dx .merit-list .merit-card .number .num {
		-webkit-text-stroke: 0;
	}

	/* ONE DAYの時刻バッジ(SP): 32remに拡大。上下パディングは元々0で
	   行高1.8のアキが上下余白のため、PC同様に行高を詰める */
	.page-workbook .page-oneday .time {
		font-size: 32rem;
		line-height: 1.4;
	}

	/* ONE DAYサブタイトル「家庭ごみ収集の1日」(クライアント指定)。
	   「1」は全角だったため半角へ変更(テンプレート側)。全角のままだと
	   Zen Kakuの全角枠で描画され、左右の余白とこれ以上太くできない問題が出る */
	.page-workbook .page-oneday .page-oneday__title p.sub {
		font-weight: 900;
	}
	.page-workbook .page-oneday .page-oneday__title p.sub span {
		font-size: 35rem;
		font-weight: 700; /* 900では太すぎたため1段細く */
	}

	/* ONE DAYタイムラインカードの見出し(クライアント指定) */
	.page-workbook .page-oneday .timeline-card h3 {
		font-size: 20rem;
		font-weight: 900;
		line-height: 1.3em;
	}

	/* 働く車紹介セクションの箱(SP・クライアント指定) */
	.page-workbook .page-vehicle {
		width: 100%;
		border-radius: 20rem;
		padding: 20rem 20rem 20rem;
	}

	/* 働く車紹介グリッドの間隔(クライアント指定) */
	.page-workbook .page-vehicle__grid {
		gap: 20rem 20rem;
	}

	/* 働く車紹介の見出し文字(PC同様の調整をSPスケールで) */
	.page-workbook .page-vehicle__head p {
		font-size: 16rem;
		font-weight: 800;
		line-height: 1.2;
		margin-bottom: 4rem;
	}
	.page-workbook .page-vehicle__head h2 {
		font-size: 24rem;
		line-height: 1.1;
	}
	.page-workbook .page-vehicle__head p,
	.page-workbook .page-vehicle__head h2 {
		transform: translateY(-22rem); /* 元-6rem→-14rem→-22rem(クライアント依頼でさらに上へ) */
	}
}

/* ONE DAYの円をヒーロー下端より下へ食い込ませる(クライアント依頼)。
   テキストも境界より下へ出すため、弧の線だけを別レイヤー(::before)に分離し、
   境界より下の線のみclip-pathでカットする(円も下のエリアもベージュ同色のため
   面のはみ出しは見えず、テキストはクリップされない) */
.page-workbook .page-oneday .page-oneday__title {
	border: none;
}
.page-workbook .page-oneday .page-oneday__title::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1rem solid #888;
	border-bottom: none;
	border-radius: 310rem 310rem 0 0;
	pointer-events: none;
}
/* テキストブロックをさらに25rem下げる(クライアント指定。transformなので
   レイアウトに影響せず、ドーム本体はクリップしていないためはみ出しても表示される) */
.page-workbook .page-oneday .page-oneday__title > * {
	transform: translateY(20rem); /* ドームを20rem追加で沈めた分を相殺しテキスト位置は維持 */
}
@media screen and (min-width: 769px) {
	.page-workbook .page-oneday .page-oneday__title {
		bottom: -85rem;
		padding-bottom: 15rem;
	}
	.page-workbook .page-oneday .page-oneday__title::before {
		clip-path: inset(0 0 85rem 0);
	}
}
@media screen and (max-width: 768px) {
	.page-workbook .page-oneday .page-oneday__title {
		bottom: -12vw;
		padding-bottom: 3vw;
	}
	.page-workbook .page-oneday .page-oneday__title::before {
		clip-path: inset(0 0 12vw 0);
	}
	/* 円の食い込みでタイトルが時計と重なるようになったため、時計を下げる
	   (実測: 重なり30px+余白分。元margin-top 26rem→80rem) */
	.page-workbook .page-oneday .clock {
		margin-top: 80rem;
	}
}