/* ============================================
   TOPページ 上書きCSS(SP文字サイズ・行間調整)
   担当: 山中 / 2026-08-30〜
   ============================================ */

/* アラーム吹き出しの「見る」テキストと>>アイコンの間に隙間(PC/SP共通) */
.alarm-text .nm-arrow {
	margin-left: 1.5px;
}

/* 採用情報・ブログ一覧ボタン: テキストと>>アイコンの間に4px、アイコンは一回り小さく(PC/SP共通) */
.sec-recruit__btn .nm-arrow,
.sec-blog__button .nm-arrow {
	margin-left: 4px;
	width: 0.85em;
	height: 0.68em;
}

@media screen and (max-width: 768px) {
	/* ずかんセクションの吹き出し(アラーム)テキスト: 12rem→13rem、行間1.8→1.4 */
	.sec-book__inner .alarm p {
		font-size: 13rem;
		line-height: 1.4;
		top: 53rem; /* 元47rem */
	}

	/* 吹き出しのしっぽサークル: 元の3/4に縮小(半分→1.5倍で調整。L: 28×22→21×16.5 / S: 22×18→16.5×13.5) */
	.sec-book__inner .alarm .circle_L {
		width: 19rem;
		height: 16.5rem;
		bottom: 12rem; /* 元20rem */
	}
	.sec-book__inner .alarm .circle_S {
		width: 11.5rem;
		height: 9.5rem;
	}

	/* SERVICEカードの見出し: 下パディングのみ18rem→1rem(タイトルと下線の間を詰める) */
	.sec-service .service-card h3 {
		padding: 18rem 18rem 1rem;
	}

	/* SERVICEカードの本文: 長文時も「もっとくわしく」バーとの間に必ず余白を確保 */
	.sec-service .service-card p {
		margin-bottom: 15rem;
	}

	/* RECRUITセクション: 縦の間隔調整 */
	.sec-recruit__inner {
		gap: 30rem; /* 元SP値40rem */
	}
	.sec-recruit__heading {
		margin-bottom: 30rem; /* 追加(元は指定なし) */
	}
	.sec-recruit__lead {
		margin-bottom: 20rem; /* 元40rem(共通値) */
	}

	/* ブログカードのサムネイル: 幅30%→32%、テキストが長くても幅を維持(flex圧縮を禁止) */
	.sec-blog__list .blog-card__image {
		width: 32%;
		flex-shrink: 0;
	}
	.sec-blog__list .blog-card .blog__info {
		min-width: 0;
	}

	/* ブログカードのタイトル: 10rem→11rem、最大3行で省略(…) */
	.sec-blog__list .blog-card__title {
		font-size: 11rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	/* ブログカードの日付・カテゴリ行: 下マージン調整 */
	.sec-blog__list .blog-card__meta {
		margin-bottom: 6rem;
	}

	/* BLOGセクションのリード文: ウェイト500を追加 */
	.sec-blog__lead {
		font-weight: 500;
	}

	/* 「採用情報を見る」「ブログ一覧をみる」ボタン: scale(0.5)→scale(0.6)で少し拡大。
	   テキストはさらに 22rem→24rem・太字900に */
	.sec-recruit__btn,
	.sec-blog__button {
		transform: scale(0.6);
		font-size: 24rem;
		font-weight: 900;
	}
}

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

/* サービスカードの説明文: 2行で統一、2行を超える場合は文末を「...」で省略(PC/SP共通)
   ※元のmin-height(PC120rem/SP45rem)が枠を行数より高くするとclampが発動しないため解除。
   全カードが2行なので高さは揃ったまま */
.sec-service .service-card p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 0;
	margin-bottom: 20rem;
}

/* ずかんセクションの2台のトラック: ほぼ全重なりだった手前のアームロール車を
   右下へずらし、2台ともフロント(キャブ)が見えるように(PC) */
@media screen and (min-width: 769px) {
	.sec-book__inner .truck-2 {
		left: 67.5%;
		top: 53%;
	}

	/* 応援している社員さん: トラック移動に合わせて右下へ(クライアント検証値) */
	.sec-book__inner .personS-3 {
		left: 79.8%;
		top: 55%;
	}

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

	/* メッセージセクションの上パディング */
	.sec-message {
		padding-top: 250rem;
	}

	/* SERVICEカードエリアの角丸 */
	.sec-service__inner {
		border-radius: 100rem 100rem 0 0;
	}

	/* SERVICEカード見出しの下パディング */
	.sec-service .service-card h3 {
		padding-bottom: 5rem;
	}

	/* SERVICEカード「もっとくわしく」のフォントサイズ */
	.sec-service .service-card a {
		font-size: 18rem;
	}

	/* RECRUITリードの上マージン */
	.sec-recruit__lead {
		margin-top: 40rem;
	}

	/* 採用情報を見る/ブログ一覧をみるボタン: ウェイト800・高さ100rem */
	.sec-recruit__btn,
	.sec-blog__button {
		font-weight: 800;
		height: 100rem;
	}

	/* ブログカードのメタ行 */
	.sec-blog__list .blog-card__meta span {
		font-weight: 500;
	}
	.sec-blog__list .blog-card__meta time {
		font-size: 20rem;
		font-weight: 800;
	}

	/* ブログ一覧グリッド: nowrapタイトルが列幅を押し広げてカード幅が
	   不揃いになるため、列を強制均等化 */
	.sec-blog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* ブログカードタイトル: 23rem・1行で省略(…) */
	.sec-blog__list .blog-card__title {
		font-size: 23rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* SERVICEカード見出しのフォントサイズ */
	.sec-service .service-card h3 {
		font-size: 28rem;
	}

	/* SERVICEカード「もっとくわしく」内のアイコン(span)を10remに */
	.sec-service .swiper-slide-active a span {
		font-size: 10rem;
	}

	/* ブログカードのメタ行: 下マージン削除 */
	.sec-blog__list .blog-card__meta {
		margin-bottom: 0;
	}

	/* ブログカードのサムネイル: 下マージン10rem */
	.sec-blog__list .blog-card__image {
		margin-bottom: 10rem;
	}
}

/* BLOGセクションの木: RECRUITのベタ(ベージュ)の下に上半分が隠れる端末対策。
   セクションの重なりを明示し、木を自前レイヤーに昇格(iOS Safariのコンポジット対策) */
.sec-recruit {
	z-index: 0;
}
.sec-blog {
	z-index: 2;
}
.sec-blog .tree--1,
.sec-blog .tree--2,
.sec-blog .tree--3 {
	transform: translateY(-50%) translateZ(0);
}

@media screen and (max-width: 768px) {
	/* ブログ一覧ボタンとフッター写真ギャラリーの距離を指示書に合わせて拡大(約31px→約80px) */
	.sec-blog {
		padding-bottom: 50rem;
	}

	/* メッセージ帯の背景動画(SP)を50rem広く見せる(クライアント依頼)。
	   SPの窓はfunctions.phpの「::afterによる帯より下の背景塗り直し」で決まるため、
	   ①塗り直しの開始位置を50rem下げ、②白カードも50rem下げる。
	   カード上端の背後に動画が残るので角丸も見える */
	.sec-message {
		padding-top: calc(52.0833333333vw - 105rem); /* 元 -155rem */
	}
	.sec-message::after {
		top: calc(46.875vw - 50rem); /* 元 -100rem */
	}

	/* SERVICE帯の背景動画(SP)も50rem広く(クライアント依頼)。
	   カードを50rem下げ、動画枠も同量延長(角丸の背後に動画が残る) */
	.sec-service {
		padding-top: 150rem; /* 元100rem */
	}
	.sec-service .movie {
		height: 302rem; /* 元252rem(top:-105remのまま) */
	}
}