/*
 * 株式会社カインド コーポレートサイト メインスタイルシート
 *
 * 正本: 資料\カインドHP20260826.pdf（スマホ幅デザインカンプ全8ページ）。
 * 2026-09-22 ボス指示によりPDF忠実再現へ全面改訂。配色・余白・角丸・ボタン形状・区切りの点線/罫線は
 * PDFを高解像度でラスタライズし実測した値に基づく（提案書\デザイン仕様.md独自判断との相違はPDFを優先）。
 * PC幅では新規デザインを追加せず、同じ部品・見た目のまま中央の最大幅コンテナに収めて広げるのみとする。
 */

/* ========== 1. カラートークン・基本変数 ========== */
:root {
	/* UI基調グリーン（ヘッダー帯・フッター帯・LINEボタン・会社概要ナビボタン。PDF実測 #40b93c） */
	--color-brand-green: #40b93c;
	/* 見出し・許可一覧下線・ドット等の装飾グリーン（PDF実測 #46ac32） */
	--color-accent-green: #46ac32;
	/* 会社概要表のラベルピル（PDF実測 #80ce4f） */
	--color-table-label-green: #7ec94c;
	/* 個人情報保護バッジ（資料\SVG\アセット52.svgで確定値） */
	--color-badge-green: #2ca33a;

	/* トップページ4色ナビボタン（PDF実測値） */
	--color-nav-company: var(--color-brand-green);
	--color-nav-business: #66afc6;
	--color-nav-news: #fcd179;
	--color-nav-license: #dd8080;

	--color-cta-contact: #3fa8c9;
	--color-cta-submit: #4fb8d6;

	--color-bg-beige: #faf1e0;
	--color-pill-pink: #d79dc1;
	--color-orange-balloon: #f68523;
	--color-bg-privacy: #bfe3f0;

	--color-text-strong: #1a1a1a;
	--color-text-base: #333333;
	--color-text-sub: #767676;

	--color-bg-base: #ffffff;
	--color-bg-gray-light: #efefef;
	--color-bg-gray-section: #d3d2d2;
	--color-bg-gray-title: #a0a0a0;
	--color-border: #e2e2e2;

	--font-en: "Poppins", "Noto Sans JP", sans-serif;
	--font-jp: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;

	/* PDFのスマホ幅相当。768px以上はデザイン仕様.md「9. PC幅レイアウト仕様」の値に切り替わる */
	--container-width: 560px;
	--container-narrow-width: 520px;
	--radius-s: 6px;
	--radius-m: 16px;
	--radius-l: 28px;
	--radius-pill: 999px;
	--header-height: 76px;
}

/* ========== 2. リセット・基本要素 ========== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	margin: 0;
	font-family: var(--font-jp);
	font-size: 16px;
	color: var(--color-text-base);
	background: var(--color-bg-base);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4 {
	font-family: var(--font-jp);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	color: var(--color-text-strong);
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-brand-green);
	color: #fff;
	padding: 10px 18px;
	z-index: 2000;
}

.skip-link:focus {
	top: 0;
}

/* ========== 3. レイアウト共通 ========== */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.container--narrow {
	max-width: var(--container-narrow-width);
}

.section {
	padding: 40px 0;
}

.section__eyebrow {
	font-family: var(--font-en);
	font-weight: 600;
	color: var(--color-accent-green);
	font-size: 1.05rem;
	margin-bottom: 0.4em;
}

.section__eyebrow--center {
	text-align: center;
}

/* PDFパーツ書き出しのフロー図SVG（縦長ボックス＋三角矢印を1枚絵で表現） */
.flow-image {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.section__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 1em;
}

.section__title--center {
	text-align: center;
}

.section__title-sub {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--color-text-sub);
}

/* 2026-09-28: 資料\業務内容.svg（アウトライン化済み、下線込み）を使用。 */
.section__title--image img {
	display: block;
	width: 100%;
	max-width: 460px;
}

/* 各サービスページ冒頭・PDF準拠のフルブリード写真（コンテナ外・画面幅いっぱい） */
.full-bleed-photo {
	width: 100%;
	display: block;
}

/* 2026-09-28: 資料\SVG\アセット49（「カインドならではの特徴と強み」、上下の罫線込みで
   アウトライン化済み）を使用。以前は罫線の実体が不明だったため::before/::afterで左右に
   短い線を出す暫定対応をしていたが、画像に上下の罫線が含まれているため不要になり削除した。 */
/* 2026-09-29: PDF p5・p6とも実測したところ、見出し下端から次要素までの余白が
   118px（8倍解像度描画）=約24px相当で一致したため、margin-bottomで再現した。 */
.section__title--rule {
	text-align: center;
	margin-bottom: 24px;
}

.section__title--rule img {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

/* 装飾ドット列（PDF「クリーンな未来へ」見出し下・セクション区切りで使用） */
.dotted-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 24px;
}

.dotted-row span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-accent-green);
	display: block;
}

/* ========== 4. ボタン・ピル ========== */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 20px;
	border-radius: var(--radius-s);
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	text-align: center;
	transition: opacity 0.2s ease;
}

.btn:hover {
	opacity: 0.88;
	color: #fff;
}

.btn--block {
	width: 100%;
}

.btn--line {
	background: var(--color-brand-green);
}

.btn--contact {
	background: var(--color-cta-contact);
}

.btn--business {
	background: var(--color-accent-green);
	width: 100%;
	flex-direction: column;
	gap: 2px;
	padding: 12px 20px;
	letter-spacing: 0.15em;
}

.business-cards__link-sub {
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0.9;
}

.pill--yellow {
	background: var(--color-orange-balloon);
	color: #fff;
}

.pill--static {
	cursor: default;
}

/* お知らせ「More」ボタン・Instagramボタンは資料\SVG\アセット30・アセット26（PDFパーツ書き出し）を
   テキストアウトライン化して使用。単体では幅が不定のため.btn-imgに個別の幅を指定する。 */
.news-section__more .btn-img {
	width: 110px;
}

.instagram-section__cta .btn-img {
	width: 130px;
}

/* ========== 5. ヘッダー（トップページ＝緑帯／下層ページ＝白地） ========== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.site-header__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* --- トップページ用：緑帯ヘッダー --- */
.site-header--front {
	background: var(--color-brand-green);
}

.site-header--front .site-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header--front .site-header__mark {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}

.site-header--front .site-header__logo-text-sub {
	display: block;
	font-size: 0.72rem;
	color: #fff;
	white-space: nowrap;
}

.site-header--front .site-header__logo-text-main {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	margin-top: 1px;
}

.site-header--front .site-header__menu-bar {
	background: #fff;
}

/* --- 下層ページ用：白地ヘッダー（PDF p4〜6準拠、ロゴ右寄せ＋緑の下線） --- */
.site-header--sub {
	background: #fff;
	border-bottom: 2px solid var(--color-brand-green);
}

.site-header--sub .site-header__inner {
	justify-content: flex-end;
	padding-top: 18px;
	padding-bottom: 18px;
}

.site-header--sub .site-header__logo {
	display: flex;
	align-items: center;
}

/* 2026-09-29: 下層ヘッダーのマークをロゴ-2（丸マーク＋英字ロゴの合成1枚画像）に差し替え。
   旧実装はlogo-mark.svg（白丸＝ロゴ-1）を44px角で表示していたが、白地の上で白丸が
   視認できず「緑の線だけのkマーク」に見えるバグがあったため、緑地専用のマークはやめ、
   緑丸＋白抜きkの合成ロゴ（logo-lockup-sub.svg）を採用。サイズはPDF p4〜p6の
   下層ヘッダーを実測（8倍レンダリングでbbox幅831px・高さ192px→1.6換算で約166×38px）
   のうえ、キリのよい167×40pxに丸めて適用。旧テキストspan（.site-header__logo-text-*）は
   画像に統合したためマークアップから削除済み。 */
.site-header--sub .site-header__mark--sub {
	width: 167px;
	height: 40px;
	flex-shrink: 0;
}

.site-header--sub .site-header__menu-bar {
	background: var(--color-text-strong);
}

/* --- ナビゲーション（両ヘッダー共通・ハンバーガー開閉。PC幅でも同じ挙動を維持し新規デザインを足さない） --- */
.site-header__menu-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.site-header__menu-bar {
	display: block;
	width: 100%;
	height: 2px;
}

.site-nav {
	display: none;
}

.site-nav.is-open {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--color-border);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	padding: 8px 24px 20px;
	max-width: var(--container-width);
	margin: 0 auto;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
}

.site-nav__item {
	border-bottom: 1px solid var(--color-border);
	position: relative;
}

.site-nav__item-link {
	display: block;
	padding: 14px 4px;
	font-weight: 700;
	color: var(--color-text-strong);
}

.site-nav__item--has-sub .site-nav__item-link {
	padding-right: 40px;
}

.site-nav__sub-toggle {
	position: absolute;
	top: 4px;
	right: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--color-text-strong);
	line-height: 1;
}

.site-nav__item--has-sub.is-expanded .site-nav__sub-toggle span[aria-hidden] {
	transform: rotate(45deg);
	display: inline-block;
}

.site-nav__sub {
	display: none;
	padding-left: 16px;
	padding-bottom: 8px;
}

.site-nav__item--has-sub.is-expanded .site-nav__sub {
	display: block;
}

.site-nav__sub li a {
	display: block;
	padding: 10px 4px;
	color: var(--color-text-base);
	font-size: 0.92rem;
}

/* ========== 6. ヒーロー（トップページ） ==========
   2026-09-28: ボス支給の完成画像（キャッチコピー焼き込み済み、資料\ヒーロー部分.png／PC.png）に差し替え。
   画像はほぼ正方形（1024x960／2000x1980）でスマホの縦長画面とは比率が合わないため、
   object-fit:coverで埋めるとキャッチコピーの左右が切れてしまう。
   1024px未満は画像比率どおりの自然な高さ（幅いっぱい表示、height:auto相当）にとどめ、
   100vh化・下側の青い余白埋めはPC幅（<picture>のsourceが切り替わる1024px）以降のみ行う
   （ボス指示：「スマホは100vhじゃなくて良い」）。 */
.hero {
	position: relative;
}

.hero__heading {
	position: relative;
	margin: 0;
	line-height: 0;
}

.hero__heading picture {
	display: block;
}

.hero__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1024 / 960;
	object-fit: contain;
	object-position: top center;
}

/* ========== 7. トップ 4色ナビボタン ==========
   2026-09-23: PDFパーツ書き出しのSVG（資料\SVG\アセット8〜11）をテキストアウトライン化して使用。
   画像がボタンの見た目を丸ごと担うため、リンク自体はブロック要素として振る舞わせるだけでよい。 */
.nav-buttons__grid {
	display: flex;
	gap: 8px;
}

.nav-buttons__item {
	flex: 1 1 0;
	min-width: 0;
	display: block;
}

.nav-buttons__item img {
	display: block;
	width: 100%;
	height: auto;
}

.nav-buttons__line {
	margin-top: 24px;
}

/* SVG画像そのものがボタン全体の見た目を担うリンク・ボタン共通クラス
   （LINE見積もり・お問い合わせ・Instagram・More・送信など、PDFパーツ書き出しのSVGを使う箇所で共通利用） */
.btn-img {
	display: inline-block;
}

.btn-img img {
	display: block;
	width: 100%;
	height: auto;
}

.btn-img--block {
	display: block;
	width: 100%;
}

/* button要素で.btn-imgを使う場合（お問い合わせフォーム送信ボタン等）はブラウザ既定の枠・背景を解除する */
button.btn-img {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	max-width: 320px;
	margin: 28px auto 0;
}

button.btn-img:disabled,
button.btn-img.is-loading {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ========== 8. お知らせ ========== */
.section__title--news {
	color: var(--color-accent-green);
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 1.2em;
}

.news-list__item a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-text-strong);
}

.news-list__item a:hover .news-list__title {
	color: var(--color-accent-green);
}

.news-list__date {
	display: block;
	color: var(--color-text-sub);
	font-size: 0.82rem;
	margin-bottom: 2px;
}

.news-list__title {
	display: block;
	color: var(--color-text-strong);
}

.news-section__more {
	text-align: right;
	margin-top: 18px;
}

.news-section__empty {
	text-align: center;
	color: var(--color-text-base);
}

/* ========== 9. Instagram セクション ========== */
.instagram-section {
	background: var(--color-bg-beige);
	text-align: center;
	border-radius: var(--radius-l);
	margin: 32px 24px 0;
	padding: 36px 20px;
}

.section__title--instagram {
	color: var(--color-accent-green);
	font-size: 1.3rem;
}

.instagram-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0 auto 24px;
}

.instagram-section__cell {
	aspect-ratio: 1 / 1;
	border: 2px solid var(--color-accent-green);
	border-radius: var(--radius-m);
	background: var(--color-bg-beige);
}

.instagram-section__feed {
	margin-bottom: 24px;
}

.instagram-section__cta {
	margin-top: 8px;
}

.section__separator {
	margin: 24px 0 0;
}

/* ========== 10. Google マップ ========== */
.map-section {
	margin-top: 24px;
}

.map-section__iframe {
	width: 100%;
	height: 600px;
	border: 0;
	display: block;
}

/* ========== 11. フッター ========== */
.site-footer {
	background: var(--color-brand-green);
	color: #fff;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 28px 24px 0;
	max-width: var(--container-width);
	margin: 0 auto;
}

.site-footer__logo img {
	width: 68px;
	height: 68px;
	display: block;
}

.site-footer__office-name {
	font-size: 0.78rem;
	line-height: 1.5;
	margin: 0 0 2px;
}

.site-footer__office-name strong {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: 2px;
}

.site-footer__contact {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 18px 24px 0;
	font-size: 0.95rem;
	/* 2026-09-28: PDF p1実測（住所行と電話行の間はほぼ1行分の高さのみ）に合わせ、
	   body由来のline-height:1.8を1.5に詰め、行間のgapも10px→4pxに縮小した。 */
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-footer__contact-row {
	/* <p>タグの既定margin（1em）がgapと二重に効いて行間が開いていたため0にリセット */
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-footer__contact-row svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.site-footer__fax-icon {
	margin-left: 10px;
}

.site-footer__contact a {
	color: #fff;
}

.site-footer__photo-strip {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	margin-top: 24px;
}

.site-footer__nav {
	padding: 24px 24px 32px;
	max-width: var(--container-width);
	margin: 0 auto;
}

/* 2026-09-28: 資料\カインドHP20260831fixol.pdf p1のフッターナビ実測（項目の縦間隔と文字の
   縦寸法の比率）に基づき、bodyのline-height:1.8を継承したままの間延び（1項目約46px）を詰めた。
   line-height:1.5・上下padding:3pxで1項目約29.5pxとなり、PDFの見た目に近い密度になる。 */
.site-footer__nav-list li a {
	display: block;
	padding: 3px 0;
	color: #fff;
	font-size: 0.98rem;
	line-height: 1.5;
}

.site-footer__bottom {
	padding: 14px 24px;
	background: rgba(0, 0, 0, 0.1);
	text-align: center;
	font-size: 0.72rem;
}

/* ========== 12. 下層ページ タイトルボックス（PDF p4〜6のグレー帯） ========== */
.page-header {
	background: var(--color-bg-gray-title);
	padding: 24px 24px 22px;
	text-align: center;
}

.page-header__eyebrow {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 1.2rem;
	color: #fff;
	margin-bottom: 4px;
}

.page-header__catch {
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

.page-header__rule {
	width: 100%;
	max-width: 300px;
	height: 1px;
	background: #fff;
	margin: 16px auto;
}

.page-header__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

/* シンプル版（お問い合わせ・お知らせ等、対応するPDFパーツSVGが無いページ） */
.page-header--simple {
	padding: 28px 24px;
}

.page-header--simple .page-header__title {
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}

/* 画像版（収集運搬・中間処理・積替保管）：資料\SVG\アセット31/37/41（PDFパーツ書き出し、
   英字キャッチ＋和文サブ＋白線＋ページタイトルを1枚に収めたもの）をテキストアウトライン化して使用。
   背景色・余白ともに画像側で完結しているため、枠のpadding・背景・text-alignは持たせない。 */
.page-header--image {
	padding: 0;
	background: none;
	text-align: left;
}

.page-header__heading-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ========== 13. 会社概要ページ：プロフィール（PDF p2） ========== */
.profile-hero {
	position: relative;
}

/* 2026-09-28: 資料\会社概要-ヒーロー部分.png（写真＋「会社概要」バッジを1枚に合成、
   埋め込み写真ありのためWebP化）に差し替え。バッジが画像に焼き込まれたことで、旧実装で
   PDF実測して調整していた.profile-hero__badgeの重ね位置指定（position:absolute等）は
   不要になったため削除した。
   2026-09-29: ボスから写真が全面差し替わった新しいPNG（旧：地上からの外観写真、
   新：ドローンによる俯瞰写真＋重機）が支給されたため、about-hero-composite.webpを
   作り直した。新画像はバッジが写真高さの40.5%〜59.4%（中心50.0%）にほぼ中央配置で
   焼き込まれており、以前のような偏った位置合わせ（47%）が不要になったため
   object-positionはデフォルトのcenter（50%）に戻した。PC幅（1024px+、height:360px固定）
   でも中心を保持したまま切り抜けばバッジは十分内側に収まる計算（実測・計算値を
   デザイン仕様側の記録として残す）。 */
.profile-hero__photo {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.profile__body-wrap {
	padding-top: 48px;
}

/* 2026-09-23: 資料\SVG\アセット18（PDFパーツ書き出し、英字キャッチ＋点線）をテキストアウトライン化して使用。 */
.profile__eyebrow-image {
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.profile__catch {
	margin: 1em 0;
}

/* 2026-09-23: 資料\SVG\アセット17（PDFパーツ書き出し）をテキストアウトライン化して使用。 */
.profile__catch img {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.profile__signature {
	text-align: right;
	font-weight: 700;
	margin: 1.4em 0 0;
}

.profile__divider {
	border: 0;
	border-top: 1px solid var(--color-text-strong);
	margin: 32px 0;
}

.profile__phase-title {
	font-weight: 700;
	font-size: 1.1rem;
	text-align: center;
	margin-bottom: 14px;
}

/* 2026-09-28: 資料\Smart Moves for the Next Phase.（アウトライン化済みSVG、下線込み）を使用。 */
.profile__phase-title img {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.profile__phase-rule {
	width: 90px;
	height: 1px;
	background: var(--color-text-strong);
	margin: 0 auto 28px;
}

/* 2026-09-28: 資料\名称未設定-6.svg（俯瞰写真＋オーバーレイ＋キャッチ文・本文を
   1枚に合成、埋め込み写真ありのためWebP化）に差し替え。写真・グラデーション・
   text-shadow等を個別CSSで調整していた旧実装（.profile-quote__photo／
   __overlay／__title／__text）は画像1枚に統合されたため不要になり削除した。
   旧recycling-center-aerial.webpは削除せず残置。 */
.profile-quote-image {
	display: block;
	width: 100%;
}

/* ========== 14. トータルサポート（番号見出し＋■本文、PDF準拠で円バッジは使わない） ========== */
/* 2026-09-29: PDF p2・p4とも実測したところ、この一覧を囲む灰色の角丸ボックスは存在せず
   白背景のままだったため、background/border-radius/paddingを削除した（「勝手に作った箱」
   の是正）。margin-topはPDF実測（前の要素からの余白、約25px相当）に近い既存値のため維持。 */
.support__box {
	margin-top: 28px;
}

.support__title {
	font-size: 1.05rem;
	text-align: center;
	margin-bottom: 1.2em;
	font-weight: 700;
}

/* 2026-09-28: 資料\カインドの5つのトータルサポート.svg（アウトライン化済み緑ピル）を使用。 */
.support__title img {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.support__quote {
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-text-strong);
}

.support__quote--small {
	font-size: 0.98rem;
	margin-top: 8px;
}

.support__intro {
	text-align: center;
}

.support__list-item {
	margin-bottom: 1.4em;
}

.support__list-item:last-child {
	margin-bottom: 0;
}

.support__list-item h3 {
	font-size: 0.98rem;
	font-weight: 700;
	margin-bottom: 0.3em;
}

.support__list-item p {
	font-size: 0.9rem;
	margin: 0;
}

/* ========== 15. 業務内容カード（PDF p3、写真に暗いオーバーレイ＋白文字、常に縦積み） ========== */
.business-cards {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.business-cards__item h3 {
	font-size: 1.02rem;
	margin-bottom: 0.5em;
}

.business-cards__item > p {
	font-size: 0.9rem;
	margin-bottom: 1em;
}

.business-cards__media {
	position: relative;
	display: block;
	margin-bottom: 14px;
}

.business-cards__media img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

/* 2026-09-29: 収集運搬・積替保管カードはPDF p3準拠の合成画像（写真＋文字を1枚に焼き込み済み）に
   差し替えた。合成画像自体のアスペクト比（600:353.6、PDFのカード枠実測ともほぼ一致）を保つため、
   中間処理カード用の固定height:190px+object-fit:coverは適用せず、幅いっぱい・高さ自動にする
   （固定高さのままだと、PC幅など横長の表示比率になった際に焼き込み文字が上下に切れてしまう）。 */
.business-cards__media--composite img {
	height: auto;
	aspect-ratio: 600 / 353.6;
	object-fit: contain;
}

.business-cards__media-caption {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 12px;
}

.business-cards__media-eyebrow {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 1.05rem;
}

.business-cards__media-catch {
	font-weight: 700;
	margin-top: 6px;
	font-size: 1.05rem;
}

/* ========== 16. 会社概要表（PDF p3、緑ピルラベル＋値） ========== */
.company-table-section {
	background: var(--color-bg-gray-section);
}

.company-table-section .section__title {
	font-size: 1.3rem;
	border-bottom: 1px solid #fff;
	padding-bottom: 16px;
	margin-bottom: 24px;
	text-align: left;
}

.company-table {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.company-table__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
}

/* 取引銀行等、対応するSVG資産がない行のみのフォールバック表示（通常は company-table__label-image を使う） */
.company-table__label {
	flex-shrink: 0;
	background: var(--color-table-label-green);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

/* 2026-09-23: 資料\SVG\アセット23〜30（PDFパーツ書き出しの緑ピルラベル）をテキストアウトライン化して使用。 */
.company-table__label-image {
	flex-shrink: 0;
	height: 1.7em;
	width: auto;
}

.company-table__value {
	font-size: 0.92rem;
	line-height: 1.7;
	padding-top: 4px;
}

/* ========== 17. 許可一覧（下線つきテキスト＋PDFバルーン） ========== */
.license {
	background: var(--color-bg-gray-section);
	position: relative;
}

.license .section__title {
	font-size: 1.3rem;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding-bottom: 16px;
	margin-bottom: 20px;
}

.license__list li {
	padding: 10px 4px;
	border-bottom: 2px solid var(--color-accent-green);
	margin-bottom: 14px;
	font-size: 0.88rem;
}

/* 2026-09-24: 各項目を許可証PDF（assets/docs/kind-license-list.pdf）へのリンクにした。
   PDFカンプにはリンクの意匠が無いため、字面・余白はliの指定のまま変えず、
   hover・focus-visible時の色変化のみでリンクであることを示す最小限の手掛かりにとどめる。 */
.license__list li a {
	color: inherit;
}

.license__list li a:hover,
.license__list li a:focus-visible {
	color: var(--color-accent-green);
	text-decoration: underline;
}

/* ========== 18. CTA帯 ========== */
.cta-band {
	background: var(--color-bg-gray-light);
}

/* 2026-09-29: PDF p5・p6を実測（8倍レンダリング、色ベースでボタン矩形の上下端を検出）した
   ところ、緑（LINE）ボタン下端から青（お問い合わせ）ボタン上端までの隙間はp5で約309px(8倍)
   →38.6pt→約61.8px、p6で約63px相当と、2ページとも60〜64px程度で一致した。旧実装は14pxで
   ほぼ隙間が無いように見えていたため、64px（既存の余白の刻み24/32/40/48/64/96に丸め）に拡大した。 */
.cta-band__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ========== 19. サービスページ共通イントロ ========== */
/* 2026-09-28: PDF p4実測の結果、このキャッチ文・本文とも左揃えだったため、
   .service-intro__catch・.service-intro__text（収集運搬ページのみ使用範囲を
   確認して修正）の中央寄せを解除した。.service-intro__textは中間処理ページとも
   共用のため、ベース定義は変えず.page-template-transport配下だけ上書きする。 */
.service-intro__catch {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.6em;
}

/* 資料\8.svg（「適切な処理方法をご提案いたします。」アウトライン化済み）を使用。 */
.service-intro__catch img {
	display: block;
	width: 100%;
	max-width: 420px;
}

.service-intro__text {
	text-align: center;
}

/* 2026-09-28: PDF p4・p5とも実測で左揃えを確認したため、共用クラスの
   ベース定義は変えずページ単位で上書きする。 */
.page-template-transport .service-intro__text,
.page-template-processing .service-intro__text {
	text-align: left;
}

.service-intro__cta {
	margin-top: 20px;
}

.service-intro__cta--top {
	margin-top: 0;
	margin-bottom: 24px;
}

/* ========== 20. はじめての解体業者様へ ==========
   2026-09-28: PDF p4実測（Windows.Data.Pdf APIで8倍解像度描画しピクセル確認）の結果、
   本文・3つの問いかけ・「そんな時は」はいずれも左揃えの通常テキストで、中央寄せや
   グレーの角丸ボックスはPDFに存在しないことを確認。ボスの「勝手に中央寄せしない」
   指示に基づき、以下のPDFにない装飾をすべて除去した。 */
.first-time__bubbles {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0;
}

.first-time__bubble p {
	margin: 0;
	font-weight: 700;
}

.first-time__note {
	font-weight: 700;
}

/* 2026-09-28: 資料\9.svg／10.svg／11.svgを使い、PDF p4の並び順
   （問いかけ→そんな時は→フロー図→LINEボタン→STEP1〜3→お問い合わせ）に合わせて
   .first-timeセクション内に1本の流れとして配置しなおした。 */
.first-time .flow {
	margin: 32px 0;
}

/* STEP1〜3（資料\11.svgをアウトライン化して使用、旧.line-stepsのHTML3分割から1枚絵に統合） */
.line-steps-image {
	display: block;
	width: 100%;
	margin: 32px auto 0;
}

/* ========== 21. フロー（PDF：緑の縦長ボックス＋三角矢印の横並び） ========== */
.flow__caption {
	text-align: center;
	font-weight: 700;
	margin-top: 14px;
}

/* 2026-09-28: PDF p5実測で左揃えを確認したため中央寄せを解除。
   なお実際のPDFではこの文言はサービス紹介文の直前（本文冒頭の強調行）に
   配置されており、現在のようにフロー図見出しの直後には存在しなかった。
   配置自体の是正は別途判断が必要なため今回は文言・位置とも変更せず、
   揃えのみ修正した（コーディネーターへの報告事項）。 */
/* 2026-09-29: PDF p5実測で、本文（.service-intro__text）より太く一回り大きい強調行
   だったため、.storage-detail__leadと同じ太字リード文の扱いに合わせた。
   .flow__leadはprocessing.php以外で未使用のためページスコープは不要。 */
.flow__lead {
	text-align: left;
	font-size: 1.15rem;
	font-weight: 700;
}

.flow__row {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.flow__box {
	flex: 1;
	background: var(--color-brand-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.5;
	padding: 10px 3px;
	min-height: 88px;
}

.flow__arrow {
	flex: 0 0 auto;
	width: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flow__arrow::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 9px solid var(--color-bg-gray-title);
}

/* ========== 22. 中間処理の品目セクション ==========
   2026-09-28: PDF p5実測で左揃えを確認したため中央寄せを解除。
   なお.processing-items__grid（品目タグの箱表示）はPDFに存在しない「勝手に作った表」
   だったとボスの判断が出たため削除した（スマホ幅含む全幅）。本文とフロー図の間は
   PDF実測の余白（約48px相当）をあけるためmargin-bottomを追加している。 */
.processing-items__lead {
	text-align: left;
	margin-bottom: 48px;
}

.media-block img {
	width: 100%;
	display: block;
}

/* 2026-09-28: PDF p5実測（黄色マーカー風のハイライト、色rgb(244,232,141)＝#f4e88d、
   文字の高さいっぱいではなく下寄り・ベースライン付近に敷かれている）に基づき、
   見出しの前半部分のみを<span>で囲んでグラデーション背景を付けた。 */
.processing-destinations__highlight {
	background: linear-gradient(to bottom, transparent 45%, #f4e88d 45%, #f4e88d 92%, transparent 92%);
	padding: 0 0.15em;
	margin: 0 -0.15em;
}

/* ========== 23. 各種処理施設への案内（ドット柄＋色分けバッジ） ========== */
/* 2026-09-23: 資料\SVG\アセット35（日本地図風ドット柄＋色分けバッジのPDFパーツ書き出し）を
   テキストアウトライン化して使用。旧実装のCSSドット柄＋バッジ近似（.destinations等）から置き換えた。 */
.destinations-map {
	display: block;
	width: 100%;
}

/* ========== 24. 積替保管ページ ========== */
.storage-detail__lead {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 1em;
}

.storage-strength-heading {
	margin: 32px 0 20px;
}

.storage-strength-section {
	margin-bottom: 1.6em;
}

.storage-strength-section h3 {
	font-size: 1rem;
	margin-bottom: 0.5em;
}

.storage-strength-section p {
	font-size: 0.92rem;
}

/* 2026-09-28: 資料\13.svg（帯＋写真＋引用文を1枚に合成、埋め込み写真ありのためWebP化）に
   差し替え。旧実装（帯SVG＋写真＋浮かせた引用カードの3要素）はPDFにない演出だったため、
   PDF p6どおりの単一画像に統合した。旧banner-small-quantity.svg・dump-truck-side.webpは
   削除せず残置。 */
.storage-banner-image {
	display: block;
	width: 100%;
}

/* 2026-09-28: 資料\アスベスト.svg（石綿含有物の例＋受入・処理フロー①〜⑥の説明文まで
   含む詳細版、テキストアウトライン化済み）に差し替え。旧flow-asbestos-combined.svg
   （見出しのみ・説明文なし）は削除せず残し、参照のみこちらに変更した。 */
.asbestos-flow-image {
	display: block;
	width: 100%;
}

/* ========== 25. お問い合わせページ ========== */
/* 2026-09-29: PDF p7実測により、当初はヒーローを白背景＋オレンジバッジのみ（写真なし）に
   統一していたが、同日中にボスから写真素材（お問い合わせ-ヒーロー部分.jpg、バッジは
   焼き込まれていない）が支給されたため方針変更。.privacy-heroと同じ「写真＋中央オーバーレイの
   バッジ」構成に組み直した。バッジ自体のサイズ・書体は、写真なし版のときにPDF p7を実測して
   決めた値（8倍レンダリングで幅約104px・高さ約47px、角丸なし、文字サイズ0.8rem・太字、
   内側余白12px 14px）をそのまま踏襲している。 */
.contact-hero {
	position: relative;
}

.contact-hero__photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.contact-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-hero__badge {
	display: inline-block;
	background: #f6c98e;
	color: var(--color-text-strong);
	font-weight: 700;
	font-size: 0.8rem;
	padding: 12px 14px;
}

/* 2026-09-29: PDF p7実測で、この注意書きは背景の無い通常テキストだったため、
   background・border-radius・paddingを削除した（「勝手に作った箱」の是正）。 */
.contact__notes {
	font-size: 0.88rem;
	margin-bottom: 32px;
}

.contact__tel {
	margin-top: 12px;
	font-weight: 700;
	font-size: 1.1rem;
}

.contact__tel a {
	color: var(--color-brand-green);
}

.contact-form__row {
	margin-bottom: 22px;
}

.contact-form__row label,
.contact-form__row legend {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 0.92rem;
}

.contact-form__required {
	display: inline-block;
	color: var(--color-text-sub);
	font-size: 0.8rem;
	font-weight: 400;
	margin-left: 4px;
}

.contact-form__required::before {
	content: "（";
}

.contact-form__required::after {
	content: "）";
}

.contact-form__row input[type="text"],
.contact-form__row input[type="email"],
.contact-form__row input[type="tel"],
.contact-form__row textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--color-border);
	background: var(--color-bg-gray-light);
	border-radius: var(--radius-s);
	font-size: 0.95rem;
	font-family: inherit;
}

.contact-form__row textarea {
	resize: vertical;
	background: #fff;
}

/* 送信前チェック（JS）でエラーがある項目の枠線とメッセージ。PDFの雰囲気を崩さない最小限の表示に留める。 */
.contact-form__row input.is-invalid,
.contact-form__row textarea.is-invalid {
	border-color: #c94141;
}

.contact-form__error {
	color: #c94141;
	font-size: 0.8rem;
	margin: 6px 0 0;
}

.contact-form__hint {
	font-size: 0.78rem;
	color: var(--color-cta-contact);
	margin: 6px 0 0;
}

.contact-form__row--radio {
	padding: 0;
}

.contact-form__radio-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
	margin-bottom: 12px;
	font-size: 0.92rem;
}

/* PDFの□チェックボックス表記に合わせ、ラジオボタンを角形にカスタム表示する（種別としては単一選択のため要素自体はradio） */
.contact-form__radio-label input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--color-text-sub);
	border-radius: 2px;
	position: relative;
	flex-shrink: 0;
}

.contact-form__radio-label input[type="radio"]:checked {
	background: var(--color-brand-green);
	border-color: var(--color-brand-green);
}

.contact-form__radio-label input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__note {
	font-size: 0.8rem;
	color: var(--color-text-base);
}

.contact-form__note a {
	color: var(--color-brand-green);
	text-decoration: underline;
}

.contact-form__result {
	text-align: center;
	margin-top: 12px;
	font-weight: 700;
}

.contact-form__result.is-success {
	color: var(--color-brand-green);
}

.contact-form__result.is-error {
	color: #c94141;
}

/* ========== 26. 個人情報保護方針ページ（水色ヒーロー＋吹き出し） ========== */
.privacy-hero {
	position: relative;
	background: var(--color-bg-privacy);
}

.privacy-hero__photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.privacy-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
}

/* 2026-09-23: 資料\SVG\アセット52（PDFパーツ書き出し、rx/ryで丸ピル形状込み）をテキストアウトライン化して使用。 */
.privacy-hero__badge {
	display: inline-block;
}

.privacy-hero__badge img {
	display: block;
	width: 130px;
	height: auto;
	border-radius: var(--radius-pill);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 2026-09-23: 資料\SVG\アセット51（PDFパーツ書き出し）をテキストアウトライン化して使用。 */
.privacy-page__title {
	margin: 28px 0 1em;
}

.privacy-page__title img {
	display: block;
	width: 100%;
	height: auto;
}

.privacy-page h3 {
	font-size: 1rem;
	margin: 1.8em 0 0.6em;
	color: var(--color-accent-green);
}

.privacy-page ul {
	margin: 0 0 1em;
}

.privacy-page ul li {
	padding-left: 1.2em;
	position: relative;
	margin-bottom: 0.5em;
	font-size: 0.92rem;
}

.privacy-page ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent-green);
}

/* ========== 27. お知らせアーカイブ・個別 ========== */
.news-archive__pagination {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.news-single__date {
	display: inline-block;
	color: var(--color-text-sub);
	margin-bottom: 12px;
}

.news-single__thumbnail img {
	border-radius: var(--radius-s);
	margin-bottom: 20px;
}

.news-single__back {
	margin-top: 32px;
}

/* ========== 28. 404 ========== */
.error-404 {
	text-align: center;
	padding: 80px 0;
}

.error-404__code {
	font-family: var(--font-en);
	font-size: 3rem;
	font-weight: 700;
	color: var(--color-brand-green);
	margin: 0;
}

.error-404__title {
	font-size: 1.2rem;
	margin: 0.4em 0;
}

.error-404__text {
	margin-bottom: 24px;
}

/* ========== 29. スマホ幅640px以上：コンテナを中央寄せして広げるのみ（既存・不変） ========== */
@media (min-width: 640px) {
	:root {
		--container-width: 640px;
	}

	.site-header__inner,
	.site-nav.is-open {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/*
 * ========== 30. タブレット幅（768〜1023px、デザイン仕様.md「9. PC幅レイアウト仕様」9-5準拠） ==========
 * ========== 31. PC幅（1024px〜、基準1200px、同9-1〜9-4準拠） ==========
 * ========== 32. PC幅（1440px〜、ヒーロー写真の上限拡張のみ） ==========
 *
 * 767px以下（第7〜8章で確定したPDF忠実再現の実装）は本セクションで一切変更しない。
 * すべて min-width の昇順で記述し、後続のブレークポイントが前のブレークポイントの値を
 * 上書きする形で運用する（例: --container-width は 640→720→1120pxの順に上書き）。
 */

/* ---------- 30. タブレット幅（768〜1023px） ---------- */
@media (min-width: 768px) {
	:root {
		--container-width: 720px;
		--container-narrow-width: 640px;
	}

	.container {
		padding-left: 32px;
		padding-right: 32px;
	}

	.section {
		padding: 56px 0;
	}

	.section.nav-buttons,
	.section.cta-band,
	.section.media-block {
		padding: 48px 0;
	}

	.nav-buttons__grid {
		max-width: 480px;
		margin: 0 auto;
	}

	/* PDF p1・デザイン仕様.md9-5準拠：タブレット幅・PC幅とも3列×2段を維持する
	   （列数はベースの.instagram-section__gridのrepeat(3,1fr)のまま）。
	   マスが極端に大きくならないよう、グリッド自体の最大幅を1マス240px程度が上限になる値に抑える。 */
	.instagram-section__grid {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
		gap: 16px;
	}
}

/* ---------- 31. PC幅（1024px〜、基準1200px） ---------- */
@media (min-width: 1024px) {
	:root {
		--container-width: 1120px;
		--container-narrow-width: 760px;
	}

	.container {
		padding-left: 40px;
		padding-right: 40px;
	}

	.section {
		padding: 96px 0;
	}

	.section.nav-buttons,
	.section.cta-band,
	.section.media-block {
		padding: 64px 0;
	}

	/* ----- ヘッダー：横並びテキストナビ（9-3） -----
	   帯（緑背景／下層ページは白地）自体は全幅のまま、内側paddingだけで中身を1120px幅相当に中央寄せする。
	   帯にmax-widthを付けると帯自体が縮んでしまうため使わない。
	   1040pxは1120pxから左右の固定padding40px×2を差し引いた値（＝従来の見た目のコンテンツ幅）。
	   ビューポートが広いほど(100% - 1040px) / 2が固定40pxを上回り、中身の位置は従来のmax-width:1120pxと
	   同じ結果になる。 */
	.site-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px max(40px, calc((100% - 1040px) / 2));
	}

	.site-header__inner {
		max-width: none;
		margin: 0;
		padding: 0;
		flex: 0 0 auto;
	}

	.site-header__menu-btn {
		display: none;
	}

	.site-nav {
		display: block;
		position: static;
		flex: 0 0 auto;
	}

	.site-nav.is-open {
		position: static;
		background: none;
		border-top: none;
		box-shadow: none;
		padding: 0;
		max-width: none;
		margin: 0;
	}

	.site-nav__list {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

	.site-nav__item {
		border-bottom: none;
		position: relative;
	}

	.site-nav__item-link {
		padding: 8px 2px;
		border-bottom: 2px solid transparent;
	}

	.site-nav__item--has-sub .site-nav__item-link {
		padding-right: 2px;
	}

	.site-nav__item.current-menu-item > .site-nav__item-link,
	.site-nav__item.current-menu-ancestor > .site-nav__item-link {
		border-bottom-color: var(--color-brand-green);
	}

	/* トップページ＝緑帯ヘッダー上のナビ文字は白、下層ページ＝白地ヘッダーは既存の濃色のまま */
	.site-header--front .site-nav__item-link {
		color: #fff;
	}

	.site-nav__sub-toggle {
		display: none;
	}

	.site-nav__item--has-sub .site-nav__sub {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: #fff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
		padding: 8px 0;
		z-index: 1100;
	}

	/* タップ式開閉（is-expanded、キーボード・タッチ向け）は維持しつつ、PC幅ではホバー・フォーカスでも開く */
	.site-nav__item--has-sub:hover .site-nav__sub,
	.site-nav__item--has-sub:focus-within .site-nav__sub,
	.site-nav__item--has-sub.is-expanded .site-nav__sub {
		display: block;
	}

	.site-nav__sub li a {
		padding: 10px 16px;
		font-size: 0.88rem;
	}

	/* 下層ページヘッダー：左にナビ・右にロゴ（意匠自体＝ロゴ右寄せ＋緑下線は維持） */
	.site-header--sub .site-header__inner {
		order: 2;
	}

	.site-header--sub .site-nav {
		order: 1;
	}

	/* ----- ヒーロー（トップページ） -----
	   2026-09-28: PC幅ではsourceでhero-pc.webp（2000x1980）に切り替わる。ボス指示によりPC幅
	   （1024px〜）のみ100vh化し、画像が届かない下側の余白をPC用画像の実測値（#005bbf）で埋める。
	   スマホ幅は画像本来の比率どおりの高さのままとする（下記base側では100vh・背景色を持たせない）。 */
	.hero {
		height: 100vh;
		height: 100svh;
		overflow: hidden;
		background-color: #005bbf;
	}

	/* 画像下端と背景色の境目をなじませる薄いグラデーション。PC幅でのみ余白が生じるため、
	   ::after自体もPC幅でのみ追加する。 */
	.hero__heading::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64px;
		background: linear-gradient(180deg, rgba(0, 91, 191, 0) 0%, #005bbf 100%);
		pointer-events: none;
	}

	.hero__photo {
		max-height: 100%;
		aspect-ratio: 2000 / 1980;
	}

	/* ----- 4色ナビボタン＋LINEボタン ----- */
	.nav-buttons__grid {
		max-width: 640px;
	}

	.nav-buttons__line {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	/* ----- お知らせ -----
	   直前の.nav-buttons（密着系64px下余白）と本セクション（section標準96px上余白）が
	   そのまま足されると150px超の間延びした空きになるため、隣接時のみ上余白を詰める。 */
	.nav-buttons + .news-section {
		padding-top: 0;
	}

	.news-section .container--narrow {
		max-width: 600px;
	}

	/* ----- Instagram「クリーンな未来へ」 -----
	   列数・グリッド最大幅（3列×2段、1マス上限目安240px）はタブレット幅と共通のため
	   .instagram-section__gridの上書きはタブレット幅ブロック側のみで行う（PC幅でも同じ値を継承）。 */
	.instagram-section {
		max-width: 960px;
		margin: 0 auto;
		padding: 64px 48px;
	}

	/* ----- Googleマップ -----
	   2026-09-28: ボス支給の埋め込みコードにHTML側height="600"があり、CSS側も
	   スマホ・PCとも600pxに揃えたためPC専用の上書きは不要になった（基本値.map-section__iframeを流用）。
	   2026-09-28: ボス指示「GoogleMAPは横幅をフルサイズに」。max-width:960pxが.map-section
	   （コンテンツではなく地図の帯そのもの）に掛かっていたため、ヘッダー・フッター緑帯の不具合
	   （4373495）と同じ原因でPC幅では中央寄せの帯になっていた。帯側の幅制限を外すだけで全幅化
	   できるため、PC幅専用の指定自体を削除し基本値（margin-top:24pxのみ、幅制限なし）に委ねる。
	   .map-sectionは単一要素でフッターのような複数カラムの中央寄せは不要なため、ガター列等の
	   仕組みも不要（100vwは縦スクロールバー幅を含むため使わない）。 */

	/* ----- フッター -----
	   2026-09-28: PDF p1のフッター実測で、ロゴ・住所連絡先・ナビゲーションが横並びの
	   2カラムではなく縦1列だったため、グリッドによる2カラム化（ガター列を使った中央寄せ
	   の仕組み）を廃止し、モバイル幅と同じ「各要素がmax-width:var(--container-width)で
	   自己中央寄せする」構成にPC幅でも統一した（「勝手にカラムを分けない」というボスの
	   指示に基づく。デザイン仕様.md9章参照）。帯（緑背景）自体はmax-widthを付けず全幅の
	   ままなので、100vwブレイクアウト無しでフルブリードを維持できる。 */
	.site-footer__brand {
		padding: 40px 24px 0;
	}

	.site-footer__logo img {
		width: 84px;
		height: 84px;
	}

	.site-footer__office-name {
		font-size: 0.95rem;
	}

	.site-footer__office-name strong {
		font-size: 1.5rem;
	}

	.site-footer__contact {
		padding: 18px 24px 40px;
		font-size: 1.02rem;
	}

	.site-footer__nav {
		padding: 40px 24px;
	}

	.site-footer__photo-strip {
		height: 280px;
	}

	/* ----- 会社概要ページ ----- */
	.profile-hero__photo {
		aspect-ratio: auto;
		height: 360px;
	}

	.profile__body-wrap {
		padding-top: 96px;
		/* 直後の.supportとの間で96px+96pxの二重余白にならないよう下側を詰める */
		padding-bottom: 48px;
	}

	.profile__body-wrap + .support {
		padding-top: 32px;
	}

	/* 2026-09-28: 代表挨拶と引用ブロックの2カラム化をやめ、PDFどおりPC幅でも縦1列に
	   統一した（「勝手にカラムを分けない」というボスの指示に基づく。デザイン仕様.md9章
	   参照）。.profile-columns自体は無地のdivに戻り、直下の.container--narrowと
	   .profile-quoteがそれぞれの既定幅で縦に積まれる。 */

	/* 5つのトータルサポート：.container--narrowではなく.container（1120px）を使う（9-2-2） */
	.support .container--narrow {
		max-width: 1120px;
	}

	/* 2026-09-29: 箱の装飾を外したことで幅の制限も不要になったため、PC幅専用の
	   max-width:880px上書きを削除し、.support .container--narrow（1120px）の
	   幅のまま表示する（PC幅は1カラム・コンテナ幅のまま、というボスの方針）。 */

	/* 2026-09-28: 1〜5を2カラムに分けていたが、PDFは縦1列のみのため統一した
	   （幅はcontainer--narrow max-width:1120pxのまま変更していない）。 */

	/* 2026-09-28: 3事業カードを3列グリッド化していたが、PDF p3は縦積みのみのため
	   1カラムに戻した（幅はcontainer--narrow max-width:1120pxのまま変更していない）。 */
	.business .container--narrow {
		max-width: 1120px;
	}

	.business-cards__media img {
		height: 220px;
	}

	/* 2026-09-29: 上の.business-cards__media img（height:220px固定）は中間処理カード用。
	   合成画像（収集運搬・積替保管）はPC幅でも高さ固定にすると焼き込み文字が上下に切れるため、
	   ここで再度height:autoに戻す（同じ詳細度のセレクタが後勝ちするため、この明示的な
	   上書きが必要）。 */
	.business-cards__media--composite img {
		height: auto;
	}

	/* 2026-09-28: 会社概要表＋許可一覧を2カラムにしていたが、PDFは縦1列のため
	   1カラムに戻した（幅・背景・paddingはmax-width:1120pxのまま変更していない）。 */
	.about-table-columns {
		background: var(--color-bg-gray-section);
		display: grid;
		grid-template-columns: 1fr;
		gap: 40px;
		max-width: 1120px;
		margin: 0 auto;
		padding: 96px 40px;
	}

	.about-table-columns .section {
		padding: 0;
		background: none;
	}

	.about-table-columns .container {
		max-width: none;
		padding: 0;
		margin: 0;
	}

	.company-table__row {
		display: grid;
		grid-template-columns: 180px 1fr;
		gap: 16px;
		align-items: center;
	}

	/* ----- 収集運搬・中間処理・積替保管の3ページ共通（9-2） ----- */
	.page-header {
		padding: 48px 40px;
	}

	.page-header__title {
		font-size: 1.6rem;
	}

	/* 画像版はモバイル幅のPDFパーツをそのまま等比拡大すると縦に間延びしすぎるため、
	   帯はPDFの背景グレー（#aeafaf、画像のrect塗りと同色）で全幅を維持しつつ、
	   中身の画像だけ幅を絞って中央寄せする（9-1準拠：構成自体は変えず余白だけ広げる）。 */
	.page-header--image {
		padding: 40px;
		background: #aeafaf;
	}

	.page-header__heading-image {
		max-width: 440px;
		margin: 0 auto;
	}

	.full-bleed-photo {
		aspect-ratio: 21 / 9;
		object-fit: cover;
	}

	.service-intro .container--narrow,
	.storage-detail .container--narrow,
	.processing-items .container--narrow,
	.first-time .container--narrow {
		max-width: 680px;
	}

	/* 収集運搬ページ固有 */
	/* 2026-09-28: 3つの問いかけをPC幅で横3カラムにしていたが、PDFはスマホ幅カンプの
	   縦1列のみで、グレーの箱も無い単純な段落だったため、PC幅でも縦積みのまま統一した
	   （「勝手にカラムを分けない」というボスの指示に基づく）。 */

	.page-template-transport .flow-image {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	.line-steps-image {
		max-width: 480px;
	}

	/* 中間処理ページ固有 */
	.media-block img {
		max-width: 820px;
		margin: 0 auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.page-template-processing .flow-image {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.destinations-map {
		max-width: 560px;
		margin: 0 auto;
	}

	/* 積替保管ページ固有 */
	.storage-banner-image {
		/* 帯＋写真＋引用文を1枚に合成した画像のため、フロー図等と同程度の幅に収めて拡大しすぎない */
		max-width: 600px;
		margin: 0 auto;
	}

	.asbestos-flow-image {
		/* 説明文まで含む詳細版のため、旧版（見出しのみ）より少し広めにして文字を読みやすくする */
		max-width: 480px;
		margin: 0 auto;
	}

	/* ----- お問い合わせページ -----
	   2026-09-29: ボス支給の写真を使う構成に戻したため、.privacy-hero__photoと同じ比率で
	   PC幅用のアスペクト比上書きを再度追加した（横長になりすぎるのを防ぐ）。 */
	.contact-hero__photo {
		aspect-ratio: 21 / 9;
		object-fit: cover;
	}

	.contact__inner {
		max-width: 760px;
		margin: 0 auto;
	}

	/* ----- 個人情報保護方針ページ ----- */
	.privacy-hero__photo {
		aspect-ratio: 21 / 9;
		object-fit: cover;
	}

	.privacy-page .container--narrow {
		max-width: 720px;
	}
}