@charset "UTF-8";
/* ============================================================================
   site.css  サイト共通のスタイル
   ・パソコン表示：旧サイトと同じ見た目（幅 980px、左メニュー 195px）。
     マウスで操作する端末（Windows・Mac・Linux のパソコン）は窓の幅に関係なく常にこの表示。
     指で操作する端末（スマホ・タブレット）は幅 980px 以上のときだけ。
     寸法・色・文字の大きさは旧サイトの画像と表示を 1px 単位で測って合わせている。
     枠などの飾りは旧サイトの画像をそのまま使い、文字入りの画像は
     「文字を消した土台の画像（*_base.png）」＋本物の文字にしている。
   ・スマホ表示：指で操作する端末で幅 979px 以下（iPad 縦向きなども含む）。1 列。左メニューは「メニュー」ボタンで開く
   ・2 つの条件はちょうど裏返しにしてあり、どちらにも当たらない・両方に当たる場合は無い
   ・_dev/config.php の 'pc_narrow_sp' を true にして書き出すと、書き出し先の site.css では
     2 つの条件が「幅 980px 以上／979px 以下」だけになる（パソコンでも窓が狭いとスマホ表示）。
     書き換えは lib/layout.php の site_css()。条件を変えるときは、そちらの文字列も合わせて直す。
   ========================================================================== */

:root {
	--green: #008747;
	--text: #000;
	--link: #00f;
	--link-hover: #f00;
	--gray-line: #c8c8c8;
	--title-accent: #668dd2;
	--tel: #004e9f;
	--fax: #005514;
	--mail: #ea6100;
	--order: #ff7600;
	--company: #7d7dff;
	--btn-current: #ffc8c8;
	--box-current: #ffffb4;
	--c-method: #009f64;
	--c-factory: #ff7d63;
	--c-trading: #1187b9;
	--c-material: #d82f58;
	/* 旧サイトの sub.css はフォント名が文字化けしていたため、実際にはブラウザの「等幅フォント」
	   （Windows の Edge・Chrome では BIZ UDゴシック）で表示されていた。同じ見た目にするため BIZ UDゴシックを使う。
	   入っていない Mac・Linux などでは、サイトに置いたフォント（css/fonts.css の「… Web」）を使う */
	--pc-font: "BIZ UDGothic", "BIZ UDゴシック", "BIZ UDGothic Web", monospace;
	/* ボタンの文字：旧サイトのボタン画像は BIZ UDゴシックで作られていた（画像と重ねて合わせた結果） */
	--btn-font: "BIZ UDGothic", "BIZ UDゴシック", "BIZ UDGothic Web", sans-serif;
	--sp-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

/* ============================================================================
   共通
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); }
.menu-btn, .side-close { display: none; }

/* 本文で使う文字の指定（旧サイトの sub.css と同じ） */
.fix12 { font-family: var(--pc-font); font-size: 12px; line-height: 14px; color: #000; }
.fix14 { font-family: var(--pc-font); font-size: 14px; line-height: 22px; color: #000; }
a.fix12, a.fix14 { color: var(--link); text-decoration: none; }
a.fix12 { line-height: 14px; }
a.fix14 { line-height: inherit; }	/* 旧 sub.css と同じく、行の高さは親のまま */
a.fix12:hover, a.fix14:hover { color: var(--link-hover); text-decoration: underline; }
a.fix12:active, a.fix14:active { color: #0f0; text-decoration: underline; }

h2.detail {
	clear: both;
	margin: 15px 8px 5px;
	padding: 15px 10px 10px;
	background: url("../img_backward_common/h3_back.gif") left bottom repeat-x;
	color: #333; font-size: 14px;
}
h3.line {
	clear: both;
	margin: 10px 20px 10px 0;
	padding: 5px;
	border-bottom: 1px solid #999;
	color: #333; font-size: 14px;
}
.mintext { font-size: 9px; vertical-align: top; }
/* 途中で改行しない。表の「2.65<wbr>(27.0)」のように、改行してよい所（<wbr>）とセットで使う */
.nowrap { white-space: nowrap; }

/* 本文の枠（旧サイトのテーブルの余白） */
.pad { padding: 16px; }
/* 旧サイトの中央寄せの表（width="700" align="center"）の代わり。表と同じく、幅は余白込み */
.mx-auto { box-sizing: border-box; margin-inline: auto; }
.text-right { text-align: right; }
/* <center> と同じく、中の表や画像も中央に寄せる */
.text-center { text-align: center; text-align: -webkit-center; text-align: -moz-center; }

/* 表 */
table.backward {
	border-top: 1px solid #465469;
	border-left: 1px solid #465469;
	background: #fff;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	line-height: 14px;
}
td.backward { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 2px 5px; background: #f0f8fa; }
td.backward_color1, td.backward_color2, td.backward_color3 {
	border-right: 1px solid #465469; border-bottom: 1px solid #465469; padding: 2px 5px;
	font-family: var(--pc-font); font-size: 14px;
}
td.backward_color2_left, td.backward_color3_left {
	border-bottom: 1px solid #465469; padding: 2px 5px;
	font-family: var(--pc-font); font-size: 14px;
}
td.backward_color1 { background: #fff; }
td.backward_color2, td.backward_color2_left { background: #cde0eb; }
td.backward_color3, td.backward_color3_left { background: #faa; }

/* お問い合わせなどのフォーム（form_*.php。旧 sub.css と同じ）
   入力の表：見出しのマス（form1 は注文の内容、form2 はお客様の情報、form1_red は入力にエラーがあるマス）と入力のマス（form3） */
table.form { border: 1px solid #b7d4c9; border-collapse: collapse; border-spacing: 0; }
td.form1, td.form1_red, td.form2, td.form3 {
	border: 1px solid #b7d4c9; padding: 4px;
	font-family: var(--pc-font); font-size: 14px; color: #000;
}
td.form1, td.form1_red, td.form2 { vertical-align: top; text-align: left; }
td.form1 { background: #e6fcf4; }
td.form1_red { background: #faa; }
td.form2 { background: #e6fce6; }
td.form3 { background: #fff; }
/* 確認画面の表の、入力した内容のマス */
div.formbox { width: 550px; overflow-wrap: break-word; }
/* 入力にエラーがあるときのお知らせ */
.form-error { margin: 16px; padding: 16px; background: #fcc; }
textarea { resize: vertical; }
input.overimg:hover { cursor: pointer; opacity: .85; }

/* 画像リンクのマウスオーバー（旧サイトと同じ：黄色の上に 70% の濃さ） */
a.overimg { display: block; background-color: transparent; }
a.overimg:hover { background-color: #ff0; }
a.overimg:hover img { opacity: .7; }
/* トップページの 4 つのボタン：文字はスマホだけで使う（パソコンは文字入りの画像のまま） */
.top-banner__text { display: none; }

/* ページの先頭へ（行の高さを画像の高さにそろえる） */
.pagetop { clear: both; margin: 20px 15px; text-align: right; font-size: 0; line-height: 0; }

/* 中身の幅に合わせる（旧サイトの幅指定の無い表と同じ） */
.fit { width: fit-content; }

/* FAQ の質問と回答（旧サイトの幅 720px の表と同じ見た目）
   枠は旧サイトの画像（角 4×4px と辺）を背景に重ねる。辺の画像は、旧サイトと同じく角の内側（4px の位置）から並べる。中は 8px の間隔で、左に Q・A の画像（60px の列の中央）、右に文字 */
.faq {
	box-sizing: border-box; width: 720px; margin: 16px auto; padding: 4px;
	background:
		url("../img_common/table_topleft.png") no-repeat 0 0,
		url("../img_common/table_topright.png") no-repeat 100% 0,
		url("../img_common/table_bottomleft.png") no-repeat 0 100%,
		url("../img_common/table_bottomright.png") no-repeat 100% 100%,
		url("../img_common/table_top.png") repeat-x 4px 0,
		url("../img_common/table_bottom.png") repeat-x 4px 100%,
		url("../img_common/table_left.png") repeat-y 0 4px,
		url("../img_common/table_right.png") repeat-y 100% 4px;
}
.faq__in { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; padding: 8px; }
.faq__in > img { display: block; justify-self: center; }
.faq__line { grid-column: 1 / -1; height: 17px; background: url("../img_faq/line.png") repeat-x; }

/* YouTube の埋め込み */
.video iframe { display: block; max-width: 100%; }

/* ============================================================================
   パソコン表示（幅 980px 以上、またはマウスで操作する端末）：旧サイトの見た目を再現
   ========================================================================== */
@media (min-width: 980px), (hover: hover) and (pointer: fine) {
	.inner { width: 980px; margin-inline: auto; }

	/* ---------- ヘッダー ---------- */
	.site-header {
		padding-top: 4px;
		background: url("../img_common/top_bar.png") repeat-x 0 0, url("../img_common/top_back.png") repeat-x 0 4px;
	}
	.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 57px; }
	.logo { margin: 0; line-height: 0; }
	.header-contact { display: flex; align-self: flex-start; gap: 2px; }
	.telfax-img { margin: 0; line-height: 0; }
	.telfax { display: none; }

	/* メールでのお問い合わせ（184×57） */
	.mail-btn {
		display: block; box-sizing: border-box;
		width: 184px; height: 57px; padding: 10px 0 0 49px;
		background: url("../img_common/top_mail_base.png") no-repeat;
		color: var(--mail) !important; text-decoration: none !important;
		/* このボタンだけは文字幅が詰まる BIZ UDPゴシック（等幅だと右端の丸みに文字がかかる） */
		font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDPGothic Web", var(--btn-font); font-size: 12px; font-style: italic; font-weight: bold; line-height: 16px;
		white-space: nowrap;
	}
	.mail-btn:hover {
		background:
			linear-gradient(rgba(255, 255, 0, .3), rgba(255, 255, 0, .3)) 6px 6px / 170px 43px no-repeat,
			url("../img_common/top_mail_base.png") no-repeat;
		color: color-mix(in srgb, var(--mail) 70%, #ff0) !important;
	}

	/* ---------- トップページのメニュー ---------- */
	.global-nav { background: url("../img_common/topmenu_back.png") repeat-x; }
	.global-nav ul {
		display: flex; box-sizing: border-box; height: 32px; margin-block: 0; padding: 0 3px 0 0; list-style: none;
		background: url("../img_top/topmenu_vertical.png") no-repeat right 0 top 0;
	}
	.global-nav li {
		display: flex; align-items: center; justify-content: center;
		padding-left: 3px;
		background: url("../img_top/topmenu_vertical.png") no-repeat 0 0;
	}
	/* 区切り線の位置は旧サイトの表と同じ（各セル幅＝区切り線 3px を含む） */
	.global-nav li:nth-child(1) { width: 165.5px; }
	.global-nav li:nth-child(2) { width: 157px; }
	.global-nav li:nth-child(3) { width: 166px; }
	.global-nav li:nth-child(4) { width: 166px; }
	.global-nav li:nth-child(5) { width: 166px; }
	.global-nav li:nth-child(6) { width: 156.5px; }
	.global-nav a { font-family: var(--pc-font); font-size: 14px; color: var(--link); text-decoration: none; }
	.global-nav a:hover { color: var(--link-hover); text-decoration: underline; }

	/* ---------- パンくず ---------- */
	.breadcrumb { background: url("../img_common/topmenu_back.png") repeat-x; }
	.breadcrumb ol {
		display: flex; height: 32px; box-sizing: border-box; margin-block: 0; padding: 9px 0 0 12px; list-style: none;
		font-family: var(--pc-font); font-size: 12px; line-height: 14px;
	}
	.breadcrumb li + li::before { content: "\a0>\a0"; }
	.breadcrumb a { color: var(--link); text-decoration: none; }
	.breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; }

	/* ---------- 2 列の枠 ---------- */
	.page { display: grid; grid-template-columns: 195px 785px; grid-template-areas: "side main"; padding-top: 4px; }
	.is-top .page { grid-template-columns: 195px 2px 783px; grid-template-areas: "side . main"; padding-top: 0; }
	.content { grid-area: main; min-width: 0; padding-left: 8px; }
	.is-top .content { padding-left: 0; }
	.side { grid-area: side; }

	/* ---------- 左メニューの枠（旧サイトの画像をそのまま使う） ---------- */
	.side-box {
		width: 195px; margin: 0; padding: 9px 0 10px; box-sizing: border-box;
		background:
			url("../img_common/left_top.png") no-repeat 0 0,
			url("../img_common/left_bottom.png") no-repeat 0 100%,
			url("../img_common/left_middle.png") repeat-y 0 0;
	}
	.side-cat.is-current {
		background:
			url("../img_common/left_top.png") no-repeat 0 0,
			url("../img_common/left_bottom.png") no-repeat 0 100%,
			url("../img_common/left_middle_select.png") repeat-y 0 0;
	}
	.side-btns--order {
		background:
			url("../img_common/left_top.png") no-repeat 0 0,
			url("../img_common/left_bottom.png") no-repeat 0 100%,
			url("../img_common/left_middle_menu1.png") repeat-y 0 0;
	}
	.side-btns--company {
		background:
			url("../img_common/left_top.png") no-repeat 0 0,
			url("../img_common/left_bottom.png") no-repeat 0 100%,
			url("../img_common/left_middle_menu2.png") repeat-y 0 0;
	}
	.side-box ul { margin: 0; padding: 0; list-style: none; }

	/* ---------- 左メニューのボタン（181×51） ---------- */
	.side-btns a {
		--base: url("../img_common/left_menu1_base.png");
		display: block; box-sizing: border-box;
		width: 181px; height: 51px; margin: 0 auto; padding: 18px 0 0 21px;
		background: var(--base) no-repeat;
		color: #000; text-decoration: none;
		font-family: var(--btn-font); font-size: 14px; font-weight: bold; line-height: 14px; letter-spacing: 1px;
		white-space: nowrap;
	}
	/* 2 行のボタンは 1 行のものより少し小さい文字 */
	.side-btns a.is-2lines { padding: 10px 0 0 22px; font-size: 13px; line-height: 15px; }
	.side-btns .hang { margin-left: -8px; }
	.side-btns .sp-label, .global-nav .sp-label { display: none; }
	.side-btns a[aria-current="page"] { --base: url("../img_common/left_menu1_base_select.png"); }
	.side-btns--company a { --base: url("../img_common/left_menu2_base.png"); }
	.side-btns--company a[aria-current="page"] { --base: url("../img_common/left_menu2_base_select.png"); }
	/* マウスを乗せたとき：旧サイトと同じく、ボタンの範囲だけ黄色の上に 70% の濃さで表示 */
	.side-btns a:hover {
		background-image: linear-gradient(rgba(255, 255, 0, .3), rgba(255, 255, 0, .3)), var(--base);
		color: color-mix(in srgb, #000 70%, #ff0);
	}

	/* ---------- 左メニューの分類 ---------- */
	.side-cat__title {
		height: 45px; margin: 0; padding: 1px 0 0 22px; box-sizing: border-box;
		font-family: var(--pc-font); font-size: 13px; font-weight: bold; line-height: 36px; color: #000;
	}
	/* 加工方法の下線は、旧サイトでも素材と同じ色の線だった */
	.side-cat--method .side-cat__title   { background: url("../img_common/left_method_title_vertical.png") no-repeat 0 0, url("../img_common/left_material_title_line.png") no-repeat 0 36px; }
	.side-cat--factory .side-cat__title  { background: url("../img_common/left_artifact_title_vertical.png") no-repeat 0 0, url("../img_common/left_artifact_title_line.png") no-repeat 0 36px; }
	.side-cat--trading .side-cat__title  { background: url("../img_common/left_product_title_vertical.png") no-repeat 0 0, url("../img_common/left_product_title_line.png") no-repeat 0 36px; }
	.side-cat--material .side-cat__title { background: url("../img_common/left_material_title_vertical.png") no-repeat 0 0, url("../img_common/left_material_title_line.png") no-repeat 0 36px; }

	.side-cat__list { font-family: var(--pc-font); font-size: 12px; line-height: 14px; }
	.side-cat__list a { color: var(--link); text-decoration: none; }
	.side-cat__list a:hover { color: var(--link-hover); text-decoration: underline; }
	.side-cat__list a[aria-current="page"] { color: #000; pointer-events: none; }
	.side-cat__list li { display: flex; align-items: center; min-height: 20px; padding-left: 37px; }
	.side-cat--factory .side-cat__list li { background: url("../img_common/left_tri_artifact.png") no-repeat 0 50%; }
	.side-cat--trading .side-cat__list li { background: url("../img_common/left_tri_product.png") no-repeat 0 50%; }
	.side-cat--method .side-cat__list { padding: 1px 0 5px; }
	.side-cat--method .side-cat__list li { padding-left: 39px; background: url("../img_common/left_tri_method.png") no-repeat 2px 50%; }

	/* 素材（2 階層） */
	.side-mat { padding-top: 1px !important; }
	.side-mat > li { display: block; min-height: 0; padding: 0 0 8px; background: none !important; }
	/* 印の画像は素材ごとに下で指定する（ここで background をまとめて書くと画像が消えるので、位置だけ指定） */
	.side-mat > li > a { display: flex; align-items: center; min-height: 22px; padding-left: 27px; background-repeat: no-repeat; background-position: 0 50%; }
	.side-mat ul { width: 180px; }
	.side-mat ul li { padding-left: 39px; background-repeat: no-repeat; background-position: 0 50%; }
	.side-mat__item--1 > a { background-image: url("../img_common/left_tri_1.png"); }
	.side-mat__item--2 > a { background-image: url("../img_common/left_tri_2.png"); }
	.side-mat__item--3 > a { background-image: url("../img_common/left_tri_3.png"); }
	.side-mat__item--4 > a { background-image: url("../img_common/left_tri_4.png"); }
	.side-mat__item--1 li { background-image: url("../img_common/left_tri_1-1.png"); }
	.side-mat__item--2 li { background-image: url("../img_common/left_tri_2-1.png"); }
	.side-mat__item--3 li { background-image: url("../img_common/left_tri_3-1.png"); }
	.side-mat__item--4 li { background-image: url("../img_common/left_tri_4-1.png"); }

	/* ---------- 本文 ---------- */
	/* 見出しバー（777×36）。上の 3px は旧サイトでは表の行だったので、余白の相殺が起きない padding にする */
	.title-bar {
		display: flex; align-items: center; box-sizing: border-box;
		height: 39px; margin: 0; padding: 3px 0 0 22px;
		background: url("../img_common/title_line_back.png") no-repeat 0 3px;
		font-family: var(--pc-font); font-size: 16px; font-weight: bold; line-height: normal; color: #000;
	}

	/* 注文・問い合わせのボタン（184×35） */
	.cta { display: flex; justify-content: center; gap: 16px; margin: 0; padding: 3px 0; }
	.btn {
		display: block; box-sizing: border-box;
		width: 184px; height: 35px; padding: 10px 0 0 48px;
		background: url("../img_common/btn_order_base.png") no-repeat;
		color: #000 !important; text-decoration: none !important;
		font-family: var(--btn-font); font-size: 14px; line-height: 14px; letter-spacing: 1px;
		white-space: nowrap;
	}
	.btn--contact { padding: 11px 0 0 61px; background-image: url("../img_common/btn_contact_base.png"); }
	.btn:hover {
		background-image: linear-gradient(rgba(255, 255, 0, .3), rgba(255, 255, 0, .3)), url("../img_common/btn_order_base.png");
		color: color-mix(in srgb, #000 70%, #ff0) !important;
	}
	.btn--contact:hover { background-image: linear-gradient(rgba(255, 255, 0, .3), rgba(255, 255, 0, .3)), url("../img_common/btn_contact_base.png"); }

	/* ---------- トップページ ---------- */
	.hero { height: 249px; background: url("../img_top/flash_back.png") repeat-x; }
	.hero__inner { display: flex; align-items: center; height: 249px; }
	.hero .side-btns { order: 1; flex: none; padding-bottom: 11px; }
	.hero .side-btns li + li { margin-top: 2px; }
	.hero__video { order: 2; display: block; width: 773px; height: 230px; margin-left: 7px; }
	.hero__video.is-ended { cursor: pointer; }

	.top-banners { display: flex; align-items: center; height: 62px; margin: 0; padding: 0 0 0 5px; list-style: none; }
	.top-banners li + li { margin-left: 4px; }
	.top-banners li:nth-child(3) { margin-left: 5px; }
	.top-section__title {
		box-sizing: border-box; height: 40px; margin: 0; padding: 11px 0 0 9px;
		background: url("../img_top/bar_base.png") no-repeat;
		color: #fff; font-family: var(--btn-font); font-size: 15px; font-weight: normal; line-height: 15px; letter-spacing: 1px;
	}
	.top-section__lead { margin: 0; line-height: 0; }
	/* 見出し画像と同じ内容の文字：パソコンでは画像があるので見えないようにする（読み上げ・検索用には残す） */
	.top-lead, .top-lead__sub {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.top-cards { display: grid; grid-template-columns: repeat(3, 261px); margin: 0; padding: 0; list-style: none; line-height: 0; }
	.top-section--trading { margin-top: 4px; }

	/* 案内カード（261×150）：文字を消した土台の画像の上に、旧画像と同じ位置で文字を置く */
	.top-card:hover { background: #ff0; }
	.top-card a { position: relative; display: block; width: 261px; height: 150px; background: no-repeat; color: #000; text-decoration: none; }
	.top-card a:hover { opacity: .7; }
	.top-card--factory_sofabed a   { background-image: url("../img_top/card_factory_sofabed.png"); }
	.top-card--factory_care a      { background-image: url("../img_top/card_factory_care.png"); }
	.top-card--factory_noisecut a  { background-image: url("../img_top/card_factory_noisecut.png"); }
	.top-card--factory_amenity a   { background-image: url("../img_top/card_factory_amenity.png"); }
	.top-card--factory_packing a   { background-image: url("../img_top/card_factory_packing.png"); }
	.top-card--factory_other a     { background-image: url("../img_top/card_factory_other.png"); }
	.top-card--trading_pipe a      { background-image: url("../img_top/card_trading_pipe.png"); }
	.top-card--trading_adiabator a { background-image: url("../img_top/card_trading_adiabator.png"); }
	.top-card--trading_noisecut a  { background-image: url("../img_top/card_trading_noisecut.png"); }
	.top-card--trading_air a       { background-image: url("../img_top/card_trading_air.png"); }
	.top-card--trading_belt a      { background-image: url("../img_top/card_trading_belt.png"); }
	.top-card--trading_other a     { background-image: url("../img_top/card_trading_other.png"); }
	/* 文字の位置・大きさはカードごとに index.php の pos で指定（--tx など） */
	.top-card__title {
		position: absolute; left: var(--tx); top: var(--ty); margin: 0;
		color: var(--c); font-family: "HGPｺﾞｼｯｸE", "HGPGothicE", "BIZ UDPGothic Web", var(--btn-font);
		font-size: var(--ts); font-weight: normal; line-height: var(--ts); letter-spacing: var(--tl);
		white-space: nowrap;
		/* 旧画像と同じ白い縁取り（約 1.25px）と、右下にずれた薄い影（旧画像と重ねて測った値） */
		-webkit-text-stroke: 2.5px #fff;
		paint-order: stroke fill;
		/* 影は縁取りを含めた形から落とす（text-shadow だと縁取りに隠れて薄くなる） */
		filter: drop-shadow(1.5px 2px 2px rgba(0, 0, 0, .18));
	}
	.top-card__title small { position: relative; top: 1px; margin: 0 3.5px 0 3px; font-size: 12px; letter-spacing: 0; }
	.top-card__list {
		position: absolute; left: 0; top: calc(var(--ly) - 2px); margin: 0; padding: 0; list-style: none;
		font-family: "ＭＳ ゴシック", "MS Gothic", var(--pc-font); font-size: 14px; line-height: 18px; letter-spacing: var(--ll);
		white-space: nowrap;
	}
	.top-card__list li { position: relative; padding-left: var(--lx); }
	.top-card__list li + li { margin-top: var(--gap); }
	.top-card__list li::before {
		content: ""; position: absolute; left: 19px; top: 5px;
		border-left: 4px solid var(--c); border-block: 3px solid transparent;
	}
	.top-card__list--plain li::before { content: none; }
	.top-card__photo, .top-card__more { display: none; }

	/* ---------- フッター ---------- */
	.site-footer {
		padding: 12px 0 14px;
		background: url("../img_common/footer_bar2.png") repeat-x 0 0, url("../img_common/footer_bar.png") repeat-x 0 100%;
	}
	.site-footer .inner {
		display: grid; grid-template-columns: 1fr 178px; grid-template-rows: 16px 15px;
		grid-template-areas: "links logo" "copy logo";
		height: 31px;
	}
	.footer-links { grid-area: links; display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
	.footer-links li { padding-left: 10px; line-height: 13px; background: url("../img_common/footer_tri.png") no-repeat 0 5px; }
	.footer-links li + li { margin-left: 16px; }
	.footer-links a { font-family: var(--pc-font); font-size: 14px; color: var(--link); text-decoration: none; }
	.footer-links a:hover { color: var(--link-hover); text-decoration: underline; }
	.copyright { grid-area: copy; margin: 0; font-family: var(--pc-font); font-size: 12px; line-height: 17px; color: #808080; }
	.copyright img { vertical-align: top; margin-top: 3.5px; }
	.footer-logo { grid-area: logo; margin: 0; line-height: 0; }
}

/* ============================================================================
   スマホ表示（指で操作する端末で幅 979px 以下）
   ========================================================================== */
@media (max-width: 979px) and (hover: none), (max-width: 979px) and (pointer: coarse), (max-width: 979px) and (pointer: none) {
	*, *::before, *::after { box-sizing: border-box; }
	body { font-family: var(--sp-font); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
	img, video, iframe { max-width: 100%; }
	img, video { height: auto; }
	/* 本文の画像は、まわりの文章とは別の層として描かせる。
	   Android の Chrome（1px を 3.75 倍などの半端な倍率で描く端末）で、画像の上端に灰色の細い線が残り、
	   少しスクロールすると消えることがあったため（2026-10-23。サイトの画像・CSS には線の元は無い） */
	.content img { will-change: transform; }
	a:link, a:visited { color: var(--link); }
	.inner { padding-inline: 12px; }

	/* 旧サイトの文字指定（ＭＳ ゴシックの小さい文字）はスマホでは読みやすい文字にする */
	.fix12, .fix14, td.backward_color1, td.backward_color2, td.backward_color3,
	td.backward_color2_left, td.backward_color3_left {
		font-family: inherit; font-size: inherit; line-height: inherit;
	}
	table.backward { line-height: 1.5; }

	/* ヘッダー */
	.site-header { border-top: 4px solid var(--green); }
	.site-header .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-block: 6px; }
	.logo { margin: 0; line-height: 0; }
	.logo img { width: 160px; height: auto; }
	/* TEL・FAX はいつも 2 行（上が TEL、下が FAX）にし、右にメールのボタンを置く。
	   2 行を合わせた高さはメールのボタンと同じ 40px（1 行 20px）。TEL・FAX の文字と番号の始まりは縦にそろえる。
	   左端は画面の左の余白（.inner の 12px）にそろえる。幅は 128px（ロゴの「株式会社アイシン産業」の文字の幅）。
	   番号の文字は、その幅（.telfax の幅 ＝ 100cqw）いっぱいになる大きさにする。
	   1 行の幅 ＝ 23px（TEL・FAX の文字と間）＋ 番号の文字の大きさ × 8.55（FAX の番号を測った値。斜体のはみ出しを含む） */
	.header-contact { order: 3; display: flex; align-items: center; gap: 6px; width: 100%; }
	.telfax-img { display: none; }
	.telfax {
		flex: none; width: 128px; container-type: inline-size;
		display: grid; grid-template-columns: auto 1fr; grid-auto-rows: 20px; align-items: center; column-gap: 4px;
		margin: 0; font-weight: bold; font-style: italic; line-height: 20px; white-space: nowrap;
	}
	.telfax div { display: contents; }
	.telfax dt { width: 19px; border-radius: 2px; color: #fff; font-size: 8px; font-style: normal; line-height: 12px; text-align: center; }
	.telfax dd { margin: 0; font-size: calc((100cqw - 23px) / 8.55); }
	.telfax .tel dt { background: var(--tel); }
	.telfax .tel a { color: var(--tel); text-decoration: none; }
	.telfax .fax dt { background: var(--fax); }
	.telfax .fax dd { color: var(--fax); }
	.mail-btn:link, .mail-btn:visited {
		display: flex; align-items: center; gap: 8px;
		height: 40px; margin-left: auto; padding: 0 10px 0 8px;
		border: 1px solid #d6d6d6; border-radius: 22px;
		background: linear-gradient(#fff, #f3f3f3);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
		color: var(--mail); font-size: 12px; font-weight: bold; font-style: italic; line-height: 1.3; text-decoration: none;
		white-space: nowrap;
	}
	.mail-btn::before {
		content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
		background: var(--mail) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='1'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / 16px no-repeat;
	}
	.mail-btn .pc-only { display: none; }
	/* 幅 360px 未満の狭いスマホでは、TEL・FAX の番号が小さくなりすぎないよう、メールのボタンを少し小さくする */
	@media (max-width: 359px) {
		.mail-btn:link, .mail-btn:visited { gap: 4px; padding: 0 7px 0 5px; font-size: 11px; }
		.mail-btn::before { width: 20px; height: 20px; background-size: 14px; }
	}
	.menu-btn {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		width: 52px; height: 44px; margin-left: auto;
		border: 1px solid var(--gray-line); border-radius: 6px; background: #fff;
		color: #333 !important; font-size: 10px; font-weight: bold; line-height: 1.2; text-decoration: none !important;
	}
	.menu-btn__icon, .menu-btn__icon::before, .menu-btn__icon::after {
		display: block; width: 22px; height: 2px; background: var(--green); content: "";
	}
	.menu-btn__icon { position: relative; margin: 6px 0; }
	.menu-btn__icon::before { position: absolute; top: -6px; }
	.menu-btn__icon::after { position: absolute; top: 6px; }

	/* トップページのメニュー・パンくず */
	.global-nav, .breadcrumb {
		background: linear-gradient(#dcdcdc 0, #fff 1px, #fff 4px, #f2f2f2 50%, #fff calc(100% - 1px), #c6d5e1 calc(100% - 1px));
	}
	.global-nav ul { display: flex; flex-wrap: wrap; margin-block: 0; padding: 0; list-style: none; }
	.global-nav li { flex: 0 0 33.333%; text-align: center; border-bottom: 1px solid #e3e3e3; }
	.global-nav li:nth-child(3n+2) { border-inline: 1px solid #e3e3e3; }
	/* 文字は改行しない。欄が狭くて「地図・アクセス」（いちばん長い。文字の大きさの約 6.12 倍の幅。
	   「お問い合わせ」は約 5.94 倍）が収まらないときは、全部の項目の文字を同じだけ小さくする（左右に 4px ずつ余白を残す） */
	.global-nav li { container-type: inline-size; }
	.global-nav a { display: block; line-height: 40px; text-decoration: none; white-space: nowrap; font-size: min(15px, (100cqw - 8px) / 6.15); }
	.breadcrumb ol { display: flex; flex-wrap: wrap; margin-block: 0; padding: 6px 12px; list-style: none; font-size: 12px; line-height: 20px; }
	.breadcrumb li + li::before { content: ">"; margin-inline: .5em; }
	.breadcrumb a { text-decoration: none; }

	/* 1 列：本文を先に、左メニューは後ろ */
	.page { padding-top: 8px; }
	.content { min-width: 0; padding-bottom: 8px; }
	.side { margin-top: 24px; }
	/* トップページは本文が案内のパネルで終わるので、パネルと左メニューのボタンの間を詰める */
	.is-top .side { margin-top: 0; }

	/* 左メニュー */
	.side-box {
		margin: 0 0 10px; padding: 6px 8px 8px;
		border: 1px solid var(--gray-line); border-radius: 6px;
		background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
	}
	.side-box ul { margin: 0; padding: 0; list-style: none; }
	.side-btns { padding: 6px; background: #fdfdfd; }
	/* ボタンは 1 行に 2 個（幅が広いときは 4 個）。3 個＋1 個のような並びにしない */
	.side-btns ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
	/* 数が奇数のときは、最後の 1 個を行いっぱいに広げる */
	.side-btns li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.side-btns a:link, .side-btns a:visited {
		display: flex; align-items: center; height: 100%;
		min-height: 47px; padding: 4px 8px 4px 14px;
		border: 1px solid var(--gray-line); border-left: 5px solid var(--order); border-radius: 3px;
		background: linear-gradient(#f9f9f9, #fff 8%, #fff 90%, #ececec);
		color: #000; font-size: 13px; font-weight: bold; line-height: 1.35; text-decoration: none;
	}
	.side-btns--company a:link, .side-btns--company a:visited { border-left-color: var(--company); }
	.side-btns a[aria-current="page"] { background: var(--btn-current); }
	.side-btns .pc-label, .global-nav .pc-label { display: none; }
	/* 「よくあるご質問（ＦＡＱ）」は改行しない。ボタンが狭いときは、1 行に収まるよう文字を小さくする
	   （13px のとき文字の幅が約 132px ＝ 文字の大きさの約 10.2 倍） */
	.side-btns a[href="./faq.html"] { container-type: inline-size; }
	.side-btns a[href="./faq.html"] .sp-label { white-space: nowrap; font-size: min(13px, 100cqw / 10.4); }

	.side-cat { --c: var(--c-method); }
	.side-cat--factory { --c: var(--c-factory); }
	.side-cat--trading { --c: var(--c-trading); }
	.side-cat--material { --c: var(--c-material); }
	.side-cat.is-current { background: var(--box-current); }
	.side-cat__title {
		margin: 0 4px 6px; padding: 6px 0 6px 10px;
		border-bottom: 1px solid var(--c);
		background: linear-gradient(var(--c), var(--c)) left 1px center / 4px calc(100% - 10px) no-repeat;
		font-size: 13px; line-height: 1.4;
	}
	.side-cat__list { font-size: 14px; line-height: 1.5; }
	.side-cat__list li { position: relative; padding: 3px 0 3px 20px; }
	.side-cat__list > li::before, .side-mat ul li::before {
		content: ""; position: absolute; left: 12px; top: .75em;
		border: 4px solid transparent; border-left: 5px solid var(--c); border-right: 0;
	}
	.side-cat__list a { text-decoration: none; }
	.side-cat__list a[aria-current="page"] { color: #000; font-weight: bold; }
	.side-mat > li { padding-left: 14px; }
	.side-mat > li + li { margin-top: 8px; }
	.side-mat > li::before { left: 4px; top: .8em; width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--m); }
	.side-mat ul { margin-top: 2px; }
	.side-mat ul li { padding-left: 16px; }
	.side-mat ul li::before { left: 6px; border-left-color: var(--m); }
	.side-mat__item--1 { --m: var(--c-factory); }
	.side-mat__item--2 { --m: var(--c-method); }
	.side-mat__item--3 { --m: var(--c-trading); }
	.side-mat__item--4 { --m: var(--c-material); }

	/* 「メニュー」ボタンで開いたとき：画面いっぱいに重ねて表示 */
	.nav-open { overflow: hidden; }
	.nav-open .side {
		position: fixed; inset: 0; z-index: 100;
		margin: 0; padding: 12px; overflow-y: auto;
		background: #eef1ee;
	}
	.nav-open .side-close { display: block; margin: 0 0 10px; text-align: right; }
	.side-close a:link, .side-close a:visited {
		display: inline-block; padding: 6px 14px;
		border: 1px solid var(--gray-line); border-radius: 6px; background: #fff;
		color: #333; font-weight: bold; text-decoration: none;
	}
	.side-close a::before { content: "×"; margin-right: 6px; }

	/* 本文 */
	.content p { margin: .8em 0; }
	.content p:empty { margin: .5em 0; }
	.title-bar {
		display: flex; align-items: center;
		min-height: 36px; margin: 14px 0 8px; padding: 6px 12px 6px 22px;
		border: 1px solid #c2c2c2; border-radius: 3px;
		background:
			linear-gradient(var(--title-accent), var(--title-accent)) 9px center / 4px 20px no-repeat,
			linear-gradient(#eff1f3, #fff 40%);
		font-size: 17px; font-weight: bold; line-height: 1.4;
	}
	.content > .title-bar:first-child { margin-top: 3px; }
	.pad { padding: 8px 0; }
	h3.line { margin-right: 0; }
	h2.detail { margin-inline: 0; }
	/* FAQ：枠は画面の幅に合わせ、Q・A の画像を少し小さくして、文字の 1 行目の横に置く */
	.faq { width: auto; margin: 12px 0; }
	.faq__in { grid-template-columns: 36px 1fr; align-items: start; gap: 6px 8px; padding: 6px; }
	.faq__in > img { width: 32px; height: auto; }
	.content [style*="margin-left"] { margin-left: 8px !important; }
	.content [style*="padding"] { padding-inline: 0 !important; }
	/* 地図・アクセスの住所など、色の付いた段落は文字が端に付かないよう、右と上下に余白を取る（左は全角空白で空いている） */
	.content p[style*="background-color"] { padding: 4px 8px 4px 0; }

	.table-wrap { max-width: 100%; overflow-x: auto; }
	.table-wrap > table[width] { width: 100%; }
	/* 表の中は、「115」「JIS K 6251」のような数字や語を途中で分けない（ページ全体の overflow-wrap: anywhere を戻す）。
	   表が広くなった分は、枠の中で横に動かして見る */
	.table-wrap td, .table-wrap th { overflow-wrap: normal; }
	/* 「LD-24」「UL-94HF-1」のようなハイフン付きの品番や値も、ハイフンの後で分けない（パソコンでは何もしない） */
	.sp-nowrap { white-space: nowrap; }
	/* 「2.65<wbr>(27.0)」のような値は、幅に関係なく「(」の前で改行する */
	wbr + .nowrap { display: block; }
	table.layout--stack, table.layout--stack > tbody, table.layout--stack > tbody > tr,
	table.layout--stack > tbody > tr > td, table.layout--stack > tr, table.layout--stack > tr > td {
		display: block; width: auto !important; height: auto !important;
	}
	table.layout--stack > tbody > tr > td, table.layout--stack > tr > td { padding: 4px 0; }
	/* パソコンでは写真を左・右と交互に置いているが、スマホでは写真のマスを先に出し、「写真 → 文章」の順にそろえる */
	table.layout--stack > tbody > tr, table.layout--stack > tr { display: flex; flex-direction: column; }
	table.layout--stack > tbody > tr > td:has(img), table.layout--stack > tr > td:has(img) { order: -1; }

	/* フォーム（form_*.php）
	   お問い合わせの入力の表と確認画面の表（項目名・「必須」・内容の 3 列）：1 行目に項目名と「必須」、2 行目に内容 */
	table.form-confirm, table.form-input, table.form-confirm > tbody, table.form-input > tbody { display: block; width: 100% !important; }
	table.form-confirm tr, table.form-input tr { display: grid; grid-template-columns: 1fr auto; }
	table.form-confirm td, table.form-input td { display: flex; align-items: center; width: auto !important; }
	table.form-confirm td.backward_color1, table.form-input td.backward_color1 { display: block; grid-column: 1 / -1; padding: 6px 8px; }
	/* 項目名が 2 列分のマス（「必須」が無い項目）は行いっぱいに */
	table.form-confirm td[colspan], table.form-input td[colspan] { grid-column: 1 / -1; }
	/* 中身の無い行（旧ページの書き間違いの <tr></tr>） */
	table.form-confirm tr:empty, table.form-input tr:empty { display: none; }
	div.formbox { width: auto; }
	/* 見積もり・ご商談の入力の表（項目名・入力の 2 列）：項目名の下に入力欄 */
	table.form, table.form > tbody, table.form > tbody > tr, table.form > tbody > tr > td { display: block; width: auto; }
	table.form > tbody > tr > td > table { border-spacing: 8px 4px; }
	td.form3 { padding: 8px; }
	td.form3 p { margin: .5em 0; }
	/* 入力欄は画面の幅に合わせる（郵便番号・日付の短い欄は元の幅のまま）。
	   文字は 16px（iPhone では 16px より小さいと、入力するときに画面が拡大される） */
	.content input[type="text"], .content textarea, .content select { max-width: 100%; font-size: 16px; }
	.content input[type="text"]:not([size="14"]):not([size="15"]), .content textarea { width: 100%; }
	.content input[type="image"] { max-width: 100%; height: auto; }
	.form-error { margin: 12px 0; padding: 12px; }
	/* 確認画面の「送信を実行する」「内容を修正する」：横に 2 つ並べ、画面が狭いときは縮める */
	table.form-buttons, table.form-buttons > tbody { display: block; }
	table.form-buttons tr { display: flex; justify-content: center; gap: 8px; }
	table.form-buttons td { flex: 0 1 200px; }
	table.form-buttons td:nth-child(2) { display: none; }
	/* 送信エラーなどのお知らせの文章（旧ページの余白 8px・間隔 8px の表）は、ほかのページの文章と同じく端までにする */
	.content table[cellpadding="8"][cellspacing="8"] { border-spacing: 0; }
	.content table[cellpadding="8"][cellspacing="8"] > tbody > tr > td { padding: 0; }

	/* 注文・問い合わせのボタン */
	.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 12px 0; }
	.btn:link, .btn:visited {
		display: inline-flex; align-items: center; gap: 10px;
		min-width: 184px; min-height: 35px; padding: 0 14px 0 6px;
		border: 1px solid #a88734; border-radius: 3px;
		background: linear-gradient(#f6dda0, #f1ca67 50%, #f0c24e);
		color: #313a43; font-size: 13px; font-weight: bold; text-decoration: none;
	}
	.btn::before {
		content: ""; flex: none; width: 26px; height: 24px; border-radius: 2px;
		background: #313a43 center / 18px no-repeat;
	}
	.btn--order::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2 4h3l2.5 11h11L21 8H7'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E");
	}
	.btn--contact::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='1'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	}

	.video { max-width: 560px; }
	.video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

	/* トップページ */
	.hero { padding: 0 0 8px; background: linear-gradient(#f4f4f4, #fff 20%); }
	.hero__inner { padding-inline: 0; }
	.hero__video { display: block; width: 100%; aspect-ratio: 773 / 230; object-fit: cover; }
	.hero .side-btns { margin: 8px 12px 0; }
	.top-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 6px 0; padding: 0; list-style: none; text-align: center; }
	.top-section { margin-bottom: 4px; }
	/* 「1. 発泡品の加工」「2. 製品の販売」の上は、前との間を 8px 広く空ける
	   （前の下の余白と重なるので、上のバナーの 6px ＋ 8px ＝ 14px、前のカードの 4px ＋ 8px ＝ 12px） */
	.top-section--factory { margin-top: 14px; }
	.top-section--trading { margin-top: 12px; }
	/* 緑の帯：左に見出し、右に見出し画像の小さい文（「スポンジ加工品、…」）を右寄せで置く */
	.top-section__head {
		display: flex; align-items: center; gap: 10px;
		min-height: 40px; padding: 4px 12px 4px 16px; border-radius: 4px;
		background: linear-gradient(#3ba46b, #1e8048 50%, #0f6e3a);
		color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	}
	.top-section__title { flex: none; margin: 0; font-size: 16px; line-height: 1.4; }
	.top-section__lead { margin: 0; }
	/* 見出し画像の代わりに、同じ内容を読みやすい文字で表示する。
	   元の画像と同じく、文字のまとまり全体を左、人物の写真を右の空き全体に置く。
	   文字のまとまりの幅の上限（--tw）。各行の文字の大きさは、この幅に収まるように決める。
	   残りの幅に、人物 2 人が左右に余裕を持って収まるように測って決めた式：
	   狭い画面では「画面幅の 64% − 59px」、広い画面では「画面幅 − 230px」（写真の幅 約 180px を残す）、上限は「画面幅の 70% − 48px」 */
	.top-section__lead--pc { display: none; }
	/* 写真ごとの数値（写真の高さを 100cqh とした長さ）：
	   --iw 写真の幅、--pl 人物の左端、--pr 人物の右端（どちらも写真の左端から）
	   ここは「1. 発泡品の加工」の写真（886×560。元の 1234×864 の縦 60〜840 を切り出して縮小）。
	   人物は元の写真で、左の男性のひじ（横 420）から右の女性のひじ（横 857）まで */
	.top-lead {
		--tw: min(70vw - 48px, max(64vw - 59px, 100vw - 230px));
		--iw: 158.21cqh; --pl: 53.85cqh; --pr: 109.87cqh;
		display: flex;
		margin: 4px 0 6px; padding: 10px 6px 4px 12px;
		background: linear-gradient(#ffffe1, #ffffc0);
		border: 1px solid #ecebb5; border-radius: 4px;
		line-height: 1.5;
		overflow: hidden;
	}
	.top-lead p { margin: 0; }
	/* 幅は中身に合わせる（いちばん長い行の幅。上限 --tw） */
	.top-lead__text { flex: none; width: fit-content; max-width: var(--tw); }
	/* 写真の枠：文字の右の空き全体を、枠の上・下・右の端まで広げる（元の「2. 製品の販売」の画像と同じ見せ方）。
	   左端は文字のまとまりの右端（文字にはかからない） */
	.top-lead__photo {
		container-type: size;
		position: relative; flex: 1 1 0; min-width: 0;
		margin: -10px -6px -4px 0;
		overflow: hidden;
	}
	/* 左端の --fade の幅は、背景の色から少しずつ写真が濃くなるようにぼかす。
	   ぼかしの幅は 12〜36px（画面幅に合わせる）。ただし人物にかからないよう、人物の左の空き − 2px までにする
	  （空き ＝ 枠の幅 − 右の余白 6px − 人物の幅）。--fade-min より狭くはしない */
	.top-lead__fade {
		--fade: max(var(--fade-min, 8px), min(clamp(12px, 6vw - 8px, 36px), 100cqw - 8px - (var(--pr) - var(--pl))));
		position: absolute; inset: 0;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
		mask-image: linear-gradient(to right, transparent, #000 var(--fade));
	}
	/* 人物の写真：高さを枠に合わせ、はみ出す左右を切る。写真の左端の位置（--x）は、次の順に決める：
	   ① 人物が「ぼかしを除いた濃い部分」の真ん中に来る位置
	   ② ①で右の人が切れるときは、人物の右端が枠の右端から 6px になる位置
	   ③ ①②で左の人がぼかしにかかるときは、人物の左端がぼかしの終わりから 2px になる位置（右側が切れる）
	   ④ 写真の左端が枠の中に入って線に見えないよう、0 より右には置かない
	   写真の右端が枠に届かないときは、幅を枠まで広げる（上下が少し切れる） */
	.top-lead__people {
		--x: min(0px, max(var(--fade) + 2px - var(--pl),
			min(var(--fade) / 2 + 50cqw - (var(--pl) + var(--pr)) / 2, 100cqw - 6px - var(--pr))));
		position: absolute; top: 0; left: var(--x);
		width: auto; min-width: calc(100cqw - var(--x)); max-width: none; height: 100%;
		object-fit: cover;
	}
	/* 文字のデザインは見出し画像に合わせる（字間を広く、影や縁取りを付ける） */
	/* 緑の帯の右側の文（「スポンジ加工品、…」）：右寄せ。折り返したときも各行を右にそろえる */
	.top-lead__sub { flex: 1 1 0; min-width: 0; margin: 0; font-size: 11px; line-height: 1.45; letter-spacing: .04em; text-align: right; }
	/* 折り返すときは「、」の後ろで区切る（言葉の途中で切らない） */
	.top-lead__sub span { display: inline-block; }
	/* 大見出しは「発泡品の加工を／お引き受けいたします！」の 2 行（長いほうの行が約 12.2 文字分）。
	   本文（15px）より小さくならないよう 16px より縮めず、収まらないときは区切り（span）の境目で折り返す */
	.top-lead__main {
		margin: 0 0 .3em !important;
		font-size: clamp(16px, calc(var(--tw) / 12.2), 22px); font-weight: bold; line-height: 1.45; letter-spacing: .08em;
		filter: drop-shadow(1.5px 2px 1.5px rgba(0, 0, 0, .35));
	}
	.top-lead__main span { display: inline-block; white-space: nowrap; }
	/* 「加工」：元の画像に近い、斜めの明朝体（HGP明朝B）。無い場合はほかの明朝体を斜めにする */
	.top-lead__main em {
		color: #ff2400; font-family: "HGP明朝B", "HGS明朝B", "HG明朝B", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
		font-size: 1.45em; font-style: italic; font-weight: normal; letter-spacing: .22em;
		-webkit-text-stroke: 2px #fff; paint-order: stroke fill;
	}
	.top-lead__points { margin: 0 0 .5em; padding: 0; list-style: none; font-size: 15px; letter-spacing: .04em; }
	.top-lead__points li { position: relative; padding-left: 1em; }
	.top-lead__points li::before { content: "・"; position: absolute; left: 0; }
	.top-lead__foot {
		margin-bottom: 6px !important;
		color: #00a800; font-size: clamp(15px, calc(var(--tw) / 16.6), 18px); font-weight: bold; letter-spacing: .02em;
		-webkit-text-stroke: 2px #fff; paint-order: stroke fill;
		filter: drop-shadow(1.5px 2px 1.5px rgba(0, 0, 0, .3));
	}
	/* 「2. 製品の販売」：背景は元の画像と同じピンクのグラデーション。
	   写真は商談の場面（897×560。元の 1024×839 の縦 200〜839 を切り出して縮小）。
	   人物は元の写真で、左の男性の手（横 515）から右の女性の背中（横 920）まで。
	   2 人が収まらない狭い画面では右側（女性の背中）を切るので、ぼかしは人物に合わせて狭めない */
	.top-lead--trading {
		--iw: 160.25cqh; --pl: 80.59cqh; --pr: 143.97cqh;
		--fade-min: clamp(12px, 6vw - 8px, 36px);
		background: linear-gradient(#fee7e9, #ffa3ab);
		border-color: #f7c1c6;
	}
	/* 大見出しは「管工機材、断熱材、制振・防音材など／卸売販売しております！」。
	   1 行目は「、」の後ろで折り返してよい。2 行目（約 13.5 文字分）は、収まらないときだけ「卸売販売」の後ろで折り返す */
	.top-lead--trading .top-lead__main { font-size: clamp(16px, calc(var(--tw) / 13.5), 22px); }
	/* 「卸売販売」：元の画像と同じ、青い太字のゴシック体を斜めにして白で縁取る */
	.top-lead--trading .top-lead__main em {
		color: #177be1; font-family: inherit;
		font-size: 1.35em; font-weight: bold; letter-spacing: .1em;
	}
	/* 下の行「貴社のニーズにあったご商談が可能です」は 18 文字 */
	.top-lead--trading .top-lead__foot { font-size: clamp(15px, calc(var(--tw) / 18.7), 18px); }
	.top-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; text-align: center; }
	.top-cards a.overimg, .top-banners a.overimg { display: inline-block; }
	/* 画像のボタンは、「ご注文・お見積り」などのボタンと同じく、ポイントしても色を変えない（トップページの 4 つのボタンは別に指定） */
	a.overimg:not(.top-banner):hover { background-color: transparent; }
	a.overimg:not(.top-banner):hover img { opacity: 1; }
	/* トップページの 4 つのボタン：写真の上に文字を重ねる。高さは「ご注文・お見積もり」などのボタンと同じ 47px に固定し、
	   写真は幅に合わせて上下を切る。パソコン版の画像と同じく、上と左の端に内側の影を付ける（端で約半分の明るさ、6px ほどで消える）。
	   文字は元の画像と同じ紺の太字で、白くぼかした縁取りを付ける。
	   大きさはボタンの幅に合わせる（いちばん長い「金型なしで試作１個から」11 文字が幅の約 9 割に収まる大きさ。最大 15px） */
	.top-banners a.top-banner {
		position: relative; display: block; height: 47px; container-type: inline-size;
		background-position: center; background-size: cover; background-repeat: no-repeat;
		box-shadow: inset 3px 3px 5px rgba(0, 0, 0, .55);
		text-decoration: none;
	}
	.top-banner img { display: none; }
	.top-banner--slice { background-image: url("../img_top/banner_slice_sp.jpg"); }
	.top-banner--trial { background-image: url("../img_top/banner_trial_sp.jpg"); }
	.top-banner--cad   { background-image: url("../img_top/banner_cad_sp.jpg"); }
	.top-banner--short { background-image: url("../img_top/banner_short_sp.jpg"); }
	.top-banner__text {
		position: relative; display: flex; align-items: center; justify-content: center; height: 100%;
		color: #0b3a70; font-size: min(7.8cqw, 15px); font-weight: bold; letter-spacing: .05em; white-space: nowrap;
		text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 12px rgba(255, 255, 255, .8);
	}
	/* マウスオーバー：パソコンと同じく、写真に黄色を 30% 重ねる */
	.top-banner:hover::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 0, .3); }

	/* 案内カード：スマホでは画像を使わず、読みやすい大きさの文字で組む */
	.top-card a {
		display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title title" "list photo" "list more";
		gap: 6px 12px; height: 100%; padding: 10px 12px 12px;
		border: 1px solid #ccc; border-top: 5px solid var(--c); border-radius: 6px;
		background: linear-gradient(#fff, #e6e6e6); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
		color: #000; text-align: left; text-decoration: none;
	}
	.top-card__title {
		grid-area: title; margin: 0; color: var(--c); font-size: 19px; font-weight: bold; line-height: 1.4; text-align: center;
		/* パソコン表示と同じ白い縁取りと右下の薄い影 */
		-webkit-text-stroke: 2.5px #fff;
		paint-order: stroke fill;
		filter: drop-shadow(1.5px 2px 2px rgba(0, 0, 0, .18));
	}
	.top-card__title small { margin: 0 3px; font-size: 12px; }
	.top-card__list { grid-area: list; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
	.top-card__list li { position: relative; padding-left: 14px; }
	.top-card__list li + li { margin-top: 6px; }
	.top-card__list li::before {
		content: ""; position: absolute; left: 2px; top: .45em;
		border-left: 5px solid var(--c); border-block: 4px solid transparent;
	}
	.top-card__list--plain li { padding-left: 0; }
	.top-card__list--plain li::before { content: none; }
	/* パソコン表示だけの改行（スマホでは文章を続けて流す） */
	.top-card .pc-br { display: none; }
	.top-card__photo { grid-area: photo; width: 80px; height: auto; }
	.top-card__more {
		grid-area: more; justify-self: end; align-self: end;
		padding: 2px 10px; border-radius: 3px; background: #f08c1e; color: #fff; font-size: 13px; font-weight: bold;
	}

	/* フッター */
	.site-footer { margin-top: 8px; border-top: 4px solid var(--green); border-bottom: 7px solid var(--green); }
	.site-footer .inner { display: grid; justify-items: center; gap: 8px; padding-block: 12px; }
	.footer-links { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
	.footer-links a { text-decoration: none; }
	.copyright { order: 1; margin: 0; color: #808080; font-size: 11px; }
	.copyright img { margin: 0 4px; vertical-align: middle; }
	.footer-logo { margin: 0; }
}

/* スマホ表示の中での細かな切り替え */
@media (max-width: 979px) and (hover: none), (max-width: 979px) and (pointer: coarse), (max-width: 979px) and (pointer: none) {
	@media (min-width: 640px) {
		.side-btns ul { grid-template-columns: repeat(4, 1fr); }
	}
	@media (max-width: 480px) {
		.top-cards { grid-template-columns: 1fr; }
	}
}

/* 印刷時はメニューを省く */
@media print {
	.side, .menu-btn, .global-nav, .breadcrumb, .pagetop { display: none; }
	.page { display: block; }
}