/**
 * 特集・取材・製品詳細ページ用スタイル。
 *
 * 取材ページ（kanjukufarm / utsunomiya-university / mikadokakou /
 * ikeuchiponics）と製品詳細ページ（coolpescon / woodboiler 等）で使う。
 * 取材セクション系の
 * ACFブロック（interview-section / img-float / flex-block / company-info /
 * case-cards / product-columns）とコアブロック + 追加CSSクラス
 * （md-ttl / sm-ttl / table / bd-tbl 等）で使用する。
 *
 * **土台は lp-base.css**（このファイルの直前に読み込まれる）。sect の余白・
 * lp-container の幅・flex-blc・bd-tbl・見出しの基本サイズなどの共通宣言は
 * そちらが持ち、ここには **lp-base に無いもの / lp-base と値を変えるもの**
 * だけを書く。
 */

/* セクションが連続するとき、前の下パディングと次の上パディングで余白が
   二重にかかる。取材ページはセクションごとに .sect ができるので、
   次のセクションの上パディングを落として1回分（130px）に戻す。
   背景色付きのセクションは帯の内側の余白なので、前後どちらかが帯のときは
   そのまま残す。
   販売店ページは .sect が並ぶ構成で余白2回分（140px）が正しいので、
   取材ヒーローの後ろに限定する。 */
.LP-Hero.hero-interview ~ .lp-sectWrap:not(:has(> .bg-color)) + .lp-sectWrap > .sect:not(.bg-color) {
	padding-top: 0;
}


/* セクション末尾の段落は下マージンを付けない。
   セクションの下パディングと二重にかかるため。`p:last-child` 全部に効かせると
   2×2グリッドのキャプション（.item の最後の p）やコンテナ間に挟まる導入文
   まで潰れてしまうので、対象は「セクション最後のコンテナの、直下の最後の
   段落」だけに絞る。 */
.lp-pageWrap .sect > .lp-container:last-child > p:last-child {
	margin-bottom: 0;
}

/* 2×2グリッドのキャプションは、最終行だけ下マージンなし。
   PCは2列なので後ろ2つ、SPは1列になるので最後の1つだけを対象にする。 */
.lp-pageWrap .flex-blc.flex-blc-c2 .item:nth-last-child(-n+2) p:last-child {
	margin-bottom: 0;
}


/* 見出し（サイズ・余白は lp-base.css。ここは下線の位置決めと色だけ） */
.md-ttl {
	position: relative;
}

.md-ttl > span:after {
	background-color: #379b05;
	bottom: 0;
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 60px;
}


/* 小見出しのタグ（point01等）。形は lp-base.css、白抜きだけここで足す */
.sm-ttl .tag {
	color: #fff;
}

/* 見出しの下線は既定では付けない。**付けたいときだけ**
   追加CSSクラス「md-ttl has-line」で付ける。 */
.md-ttl.has-line {
	padding-bottom: 0.5em;
}

.md-ttl.has-line::after {
	background-color: #379b05;
	bottom: 0;
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 60px;
}

.flex-blc.img-right .inner {
	padding-left: 0;
	padding-right: 5%;
}


/* 余白ユーティリティの補い。`.pdtop-0` / `.pdbottom-0` は lp-base.css に
   あるが、製品情報ページの本文先頭のセクションだけ 20px に詰めたいので
   ここに足す（同じ family の追加分はこのファイルに置く）。 */
.pdtop-20 {
	padding-top: 20px !important;
}


/* 本文の画像。`wp-image-{ID}` クラスが付いた画像には WordPress が
   width / height 属性を出す。属性で高さが固定
   されると、CSSで幅を縮めたときに縦横比が崩れるので打ち消しておく。
   `.img-wrap img` には lp-base.css に同じ指定があるが、カスタムHTMLに
   残った画像は .img-wrap の外にも出るため、ここで本文全体に効かせる。 */
.lp-pageWrap img {
	max-width: 100%;
	height: auto;
}


/* 画像回り込み（imgFloat） */
.imgFloat {
	margin-bottom: 2.5em;
}

.imgFloat img {
	max-width: 100%;
	height: auto;
}


/* 緑ヘッダーテーブル（コアのテーブルブロック + table クラス）。
   共通部は「緑の見出しセル + 縞模様の本体」で、販売店紹介ページ
   （sanken-house）と同じ。取材ページはこの上にフラット背景・幅上限・
   見出しセル34%を重ねるので、取材ヒーローの後ろだけに
   効くスコープで分ける。ヒーローと本文セクションは
   本文中の兄弟要素なので `~` で辿れる。編集画面はブロックごとに
   ラッパーが入るため取材固有分は効かず、共通の縞で表示される。 */
.lp-pageWrap .table th {
	background-color: #c9f6b3 !important;
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
}

.LP-Hero.hero-interview ~ .lp-pageWrap .table {
	max-width: 680px;
}

/* 茶配色の2ページ（いけうち・みかど化工）は表を広く取る */
.LP-Hero.hero-interview--brown ~ .lp-pageWrap .table {
	max-width: 980px;
	min-width: 600px;
}

.LP-Hero.hero-interview ~ .lp-pageWrap .table th {
	text-align: center;
	font-size: 14px;
	width: 34%;
}

.LP-Hero.hero-interview ~ .lp-pageWrap .table td {
	background-color: #e5e5e5 !important;
}

/* 画像を中央寄せで置くテーブル図版（みかど化工） */
.table-figure {
	display: grid;
	justify-content: center;
	margin-bottom: 2em;
}

/* 2カラム自由幅（みかど化工の custom-blc01 / custom-blc02） */
.flex-blc.flex-blc-c2:is([class*="custom-blc"]) {
	margin-bottom: 2em;
}

.flex-blc.flex-blc-c2:is([class*="custom-blc"]) p {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.imgFloat::after {
		content: "";
		display: block;
		clear: both;
	}

	.imgFloat figure {
		width: calc(50% - 20px);
	}

	.imgFloat.img-right figure {
		float: right;
		margin-left: 40px;
	}

	.imgFloat.img-left figure {
		float: left;
		margin-right: 40px;
	}

	.flex-blc.flex-blc-c2.custom-blc01 .item:nth-child(1) {
		width: calc(584 / 1060 * 100%);
	}

	.flex-blc.flex-blc-c2.custom-blc01 .item:nth-child(2) {
		width: calc(431 / 1060 * 100%);
	}

	.flex-blc.flex-blc-c2.custom-blc02 .item:nth-child(1) {
		width: calc(618 / 1060 * 100%);
	}

	.flex-blc.flex-blc-c2.custom-blc02 .item:nth-child(2) {
		width: calc(398 / 1060 * 100%);
	}
}

@media screen and (max-width: 767px) {


	.flex-blc.img-right .inner {
		padding-right: 0;
	}

	/* 2カラム・3カラムともSPは1列。2カラムは指定が漏れていて
	   48%のまま横に並んでいた。 */
	.flex-blc.flex-blc-c2:not(._noblock) .item,
	.flex-blc.flex-blc-c3:not(._noblock) .item {
		margin: 1.5em auto;
	}

	.flex-blc.flex-blc-c2:not(._noblock) .item:nth-child(even),
	.flex-blc.flex-blc-c3:not(._noblock) .item:nth-child(3n) {
		margin-right: auto;
	}

	/* SPは1列なので、キャプションの「最終行」は最後の1つだけ。
	   後ろから2番目は下マージンを戻す。 */
	.lp-pageWrap .flex-blc.flex-blc-c2 .item:nth-last-child(2) p:last-child {
		margin-bottom: 1em;
	}


}

/* ----------------------------------------------------------------------
 取材・事例紹介ページ

 いけうち / カンジュクファーム / みかど化工 / 宇都宮大学の4ページで共用する。
 配色は `acf/hero` ブロックの「取材ページの配色」（茶 / 紺）で切り替える。

 スコープは2つに分ける:
 - ヒーローの濃色カード … ブロックが出す `.hero-interview`（配色は
   `--brown` / `--navy`）。ページ側のACFやbodyクラスは使わない
 - 本文（`.table` / `.map` / `#case` 等）… `.lp-pageWrap` 配下。
   `.lp-pageWrap` は特集・製品ページの本文ラッパーなので、ブログ等へは漏れない
---------------------------------------------------------------------- */

/* ---- ヒーローの寸法と重なり ----
   写真の高さは `min-height`（＝下限）にして、カードが高いときは写真側が
   伸びるようにする。`max-height` の決め打ちだと、カードがそれを超えたときに
   はみ出して下のリード文に重なる。取材内容によってカードの高さは変わる
   （会社紹介文の行数）ので、上限では受けきれない。 */
.LP-Hero.hero-interview .Hero {
	min-height: 400px;
	padding: 0 0 60px;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}

/* 帯の引き上げは固定値にする。パーセント指定だと幅に比例して
   変わるため、カードとの重なり量が幅ごとにばらつく。 */
.Hero-Bottom.hero-interview {
	margin-top: -60px;
}

.Hero-Bottom.hero-interview .lp-container {
	padding-top: 110px;
	padding-bottom: 50px;
}

/* ---- ヒーロー（濃色カード） ---- */
.LP-Hero.hero-interview .Hero .Wrap--narrow {
	width: 540px;
	margin-left: 50%;
	padding: 15px 40px 50px;
	border-radius: 0 0 8px 8px;
	color: #fff;
	box-shadow: 4px 5px 18px 0 rgba(0, 0, 0, 0.25);
}

.LP-Hero.hero-interview--brown .Hero .Wrap--narrow {
	background-color: #403113;
}

.LP-Hero.hero-interview--navy .Hero .Wrap--narrow {
	background-color: #12335f;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow h1 {
	margin-top: 60px;
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	line-height: 130%;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow .interview .left {
	color: #fff;
	font-weight: 400;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow .interview .right {
	color: #fff;
	/* Google Fonts の Grape Nuts。読み込めない環境では筆記体へ落とす。 */
	font-family: "Grape Nuts", cursive;
	font-weight: 400;
}

/* 下線は配色に合わせる。 */
.LP-Hero.hero-interview--brown .Hero .Wrap--narrow .interview {
	border-bottom-color: #796f5a;
}

.LP-Hero.hero-interview--navy .Hero .Wrap--narrow .interview {
	border-bottom-color: #5a718f;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow .company,
.LP-Hero.hero-interview .Hero .Wrap--narrow .name {
	font-weight: 400;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow .company {
	font-weight: 700;
}

.LP-Hero.hero-interview .Hero .Wrap--narrow .Hero-subtitle {
	margin-top: 16px;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
}

/* ---- ヒーロー直下のリード帯 ---- */
.Hero-Bottom.hero-interview {
	position: relative;
	z-index: -99;
	width: 100%;
	/* パターン画像は acf/hero ブロックが style 属性で出す。 */
	background-repeat: repeat;
	background-size: 600px;
}

.Hero-Bottom.hero-interview img {
	width: 100%;
}

.Hero-Bottom.hero-interview .lp-container {
	max-width: 1000px !important;
}

/* ---- 本文のセクション ---- */
.lp-pageWrap #feature {
	padding-bottom: 2em;
}

.lp-pageWrap #feature .md-ttl {
	margin-bottom: 0.5em;
}

.LP-Hero.hero-interview ~ .lp-pageWrap .flex-blc .inner .md-ttl,
.Hero--dealer ~ .lp-pageWrap #case .flex-blc .inner .md-ttl {
	margin-bottom: 0.25em;
}

/* 箇条書き。本文をセクションごとのブロックへ分けたことで #case が先頭の
   セクションにしか付かないため、**取材ページの本文全体**に効かせる。
   スコープを外すと製品情報の下層ページの箇条書きまで 40px 右へずれるので、
   取材ヒーローの後ろに限る。 */
.LP-Hero.hero-interview ~ .lp-pageWrap ul {
	margin-bottom: 20px;
	margin-left: 40px;
	list-style-type: disc;
}

.lp-pageWrap ul,
.lp-pageWrap ul li {
	list-style-type: disc;
}

/* 画像テキスト横並びの上マージン。取材ページは1つの .sect を複数ブロックに
   割るため #case が先頭にしか残らず、本文全体へ効かせる。販売店ページは
   .sect を崩さないので #case だけに効かせる（全体に効かせると #intoro の
   flexにまで掛かり、帯の上余白が広がりすぎる）。 */
.LP-Hero.hero-interview ~ .lp-pageWrap .flex-blc {
	margin-top: 40px;
}

.Hero--dealer ~ .lp-pageWrap #case .flex-blc {
	margin-top: 40px;
}

/* 画像は行の半分までに抑える。ブロックの「画像の幅」に
   大きい値を入れると、テキスト側（.inner は flex: 1 = flex-basis 0）が
   先に潰れて数文字で折り返す状態になるため。直下の .img-wrap だけを対象に
   する（.flex-blc-c2 / -c3 の .item の中の画像は別物なので触らない）。

   幅は fit-content で「中身（画像）より広がらない」ようにする。
   「画像の幅」に画像の原寸より大きい値が入っていても（附属農場の図
   262px に 510 指定等）、枠だけが広がって横に空白ができることがない。
   原寸の大きい画像は従来どおり「画像の幅」→ 510px → 行の半分、の順の
   上限で縮む。 */
.lp-pageWrap .flex-blc > .img-wrap {
	width: fit-content;
	max-width: min(var(--nouzai-img-width, 510px), 50%);
}

/* SPは横並びが解けて1列になるので、幅の指定ごと解く。
   上限を半分のままにすると画像が画面の半分で中央に小さく残り、幅を
   指定したままだと `margin: 0 auto`（lp-base.css）で中央寄せになる。
   SPは画像を左寄せにするので、包み側は全幅に戻して画像の固有幅に任せる
   （中央寄せしたいページはページ側のCSSで text-align を足す）。 */
@media screen and (max-width: 767px) {
	.lp-pageWrap .flex-blc > .img-wrap {
		width: auto;
		max-width: 100%;
	}
}

/* 画像のキャプション（img-wrap 内の p）は中央寄せ・本文より小さく。 */
.lp-pageWrap .img-wrap p {
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
}

.lp-pageWrap #info .img-wrap {
	max-width: 454px;
}

.lp-pageWrap .img-right .inner {
	padding-right: 5%;
	padding-left: 0;
}

.lp-pageWrap .lp-cta {
	text-align: center;
}

/* ---- 見出し・本文 ----
   h3の緑下線は取材ページ固有（販売店紹介ページのh3は中央寄せ・下線なし）。
   テーブルと同じく取材ヒーローの後ろスコープで分ける。 */
.LP-Hero.hero-interview ~ .lp-pageWrap h3 {
	display: inline-block;
	min-width: 50%;
	margin-top: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #379b05;
	color: #333;
	font-size: 22px;
	text-align: left;
}

/* 行間は p に **200%（＝長さに解決される値）** で持たせる。
   `.lp-pageWrap` の `line-height: 2`（数値）だけに任せると、子孫が文字サイズを
   変えたときにそのサイズ基準で計算し直され、販売店ページの価格ラベル（20px）
   の行間が 32px → 40px に変わってしまう。 */
.lp-pageWrap p {
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 200%;
}

/* ---- 表 ---- */
.lp-pageWrap .table {
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
}

.lp-pageWrap .table th,
.lp-pageWrap .table td {
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.lp-pageWrap .table tr {
	text-align: left;
}

.lp-pageWrap .table tr th {
	padding: 10px;
	background-color: #c9f6b3;
}

.lp-pageWrap .table tr td {
	padding: 15px 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
}

.lp-pageWrap .table tr:nth-child(odd) td {
	background-color: #e5e5e5;
}

.lp-pageWrap .table tr:nth-child(even) td {
	background-color: #f5f5f5;
}

.lp-pageWrap .bg-color-gr {
	background-color: #c9f6b3;
}

/* 法人情報（#info）はタブレット幅からロゴを上に積む（取材・販売店とも）。 */
@media screen and (max-width: 992px) {
	.lp-pageWrap #info .flex-blc {
		display: block;
	}

	.lp-pageWrap #info .flex-blc .img-wrap {
		margin: 0 auto 1em;
	}

	.lp-pageWrap #info .flex-blc .inner {
		padding: 5% 0 0;
	}
}

/* ---- Googleマップへのボタン ----
 会社概要ブロックと同じものなので nouzai-blocks.css の `.gg-map .map` に
 まとめた。ここには何も置かない。 */


@media screen and (min-width: 768px) {
	.lp-pageWrap #intoro h2 {
		width: 350px;
	}
}

@media screen and (max-width: 1240px) {
	.LP-Hero.hero-interview .Hero .Wrap--narrow {
		width: auto;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .interview,
	.LP-Hero.hero-interview .Hero .Wrap--narrow h1,
	.LP-Hero.hero-interview .Hero .Wrap--narrow p {
		padding-right: 30px;
		padding-left: 30px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .Hero-subtitle {
		padding-bottom: 30px;
	}

	.Hero-Bottom.hero-interview .lp-container {
		padding-bottom: 30px;
	}

	.Hero-Bottom.hero-interview img {
		display: none;
	}
}

@media screen and (max-width: 912px) {
	.LP-Hero.hero-interview,
	.LP-Hero.hero-interview .Hero {
		position: relative;
	}

	.LP-Hero.hero-interview .Hero {
		max-height: none;
		padding: 350px 0 0;
		background-position: 20% 0%;
		background-size: auto 380px;
	}

	.Hero-Bottom.hero-interview {
		margin-top: -23px;
	}


	/* 絶対配置は使わず通常フローで積む（配色によらず同じ組み方にする）。 */
	.LP-Hero.hero-interview .Hero .Wrap--narrow {
		/* 左右のパディングは中の要素（.interview / h1 / p）が持つので外す。
		   ここに残すと width:100% と足されて画面からはみ出す。 */
		width: 100%;
		margin-left: 0;
		padding: 0 0 50px;
		border-radius: 0;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .interview .left {
		margin-right: 20px;
	}

	.Hero-Bottom.hero-interview img {
		position: absolute;
		top: -100px;
		z-index: -10;
	}
}

@media screen and (max-width: 768px) {
	.LP-Hero.hero-interview .Hero {
		padding: calc(2em + 322px) 0 0;
		background-size: auto 404px;
	}

	.Hero-Bottom.hero-interview {
		margin-top: -10px;
	}

	.Hero-Bottom.hero-interview .lp-container {
		padding-top: 70px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .interview,
	.LP-Hero.hero-interview .Hero .Wrap--narrow h1,
	.LP-Hero.hero-interview .Hero .Wrap--narrow p {
		padding-top: 10px;
		padding-right: 20px;
		padding-left: 20px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow h1 {
		margin: 0.5em 0;
		font-size: 26px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow p {
		font-size: 16px;
		line-height: 1.8;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .company {
		margin-top: 20px;
		font-size: 22px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .interview .right {
		font-size: 50px;
	}

	.LP-Hero.hero-interview .Hero .Wrap--narrow .img-wrap {
		max-width: 200px;
	}

	.Hero-Bottom.hero-interview img {
		top: -56px;
	}

	/* 見出しはSPでも左寄せで統一する。 */

	/* ここから数件は取材（kanjukufarm 等）・販売店（sanken / oce）ページ用。
	   無限定のまま置くと製品情報の下層ページにも効いてしまうので、
	   そのページ種別に限る。 */
	.LP-Hero.hero-interview ~ .lp-pageWrap .flex-blc .img-wrap,
	.Hero--dealer ~ .lp-pageWrap .flex-blc .img-wrap,
	.Hero--product ~ .lp-pageWrap .flex-blc .img-wrap {
		width: 100%;
		max-width: unset;
		margin-bottom: 30px;
		text-align: center;
	}

	.lp-pageWrap #feature .lp-container.tac {
		text-align: left;
	}

	.lp-pageWrap #intoro h2 br {
		display: none;
	}

	.LP-Hero.hero-interview ~ .lp-pageWrap #intoro .inner,
	.Hero--dealer ~ .lp-pageWrap #intoro .inner,
	.Hero--product ~ .lp-pageWrap #intoro .inner {
		margin-top: 5%;
	}

	.LP-Hero.hero-interview ~ .lp-pageWrap .flex-blc:not(._noblock),
	.Hero--dealer ~ .lp-pageWrap .flex-blc:not(._noblock),
	.Hero--product ~ .lp-pageWrap .flex-blc:not(._noblock) {
		display: flex;
	}

	.LP-Hero.hero-interview ~ .lp-pageWrap .flex-blc .inner,
	.Hero--dealer ~ .lp-pageWrap .flex-blc .inner,
	.Hero--product ~ .lp-pageWrap .flex-blc .inner {
		width: 100%;
		padding-left: 0;
	}

	/* 幅は「上限100%」にする。width: 100% だと原寸の小さい画像
	   （附属農場の図 262px 等）まで引き伸ばされてぼやける。大きい画像は
	   どちらでも同じ表示になる。 */
	.LP-Hero.hero-interview ~ .lp-pageWrap .img-wrap img,
	.Hero--dealer ~ .lp-pageWrap .img-wrap img,
	.Hero--product ~ .lp-pageWrap .img-wrap img {
		width: auto !important;
		max-width: 100% !important;
	}

	.lp-pageWrap .flex-blc.ai-cen.img-right {
		flex-direction: column-reverse;
	}

	.lp-pageWrap .table-wrap {
		overflow-x: scroll;
	}

	/* `.map`（Googleマップボタン）のSP指定は nouzai-blocks.css にある
	 （ブレークポイントはテーマで数の多い 767px に揃えている）。 */

	.lp-pageWrap #return_top {
		bottom: 50px;
	}
}

/* ----------------------------------------------------------------------
 販売店紹介ページ

 sanken-house / oce-1000 の2ページ。背景写真の上に大見出し（48px）と
 キャッチコピーを重ねるヒーローで、ヒーローブロックの「ヒーローの見た目 =
 販売店紹介」が `.Hero--dealer` を出す。本文の h3 は中央寄せ・下線なし
 （取材ページの緑下線は取材スコープに分離済み）。テーブルは共通の縞模様が
 そのまま効く。2ページのヒーロー差分（oce-1000 は上余白60px・背景中央）は
 サンケンハウス側に統一し、必要ならページ設定→ヘッダーHTMLで上書きする。
---------------------------------------------------------------------- */
.Hero.has-bg.Hero--dealer {
	padding: 110px 0 170px;
	background-position: bottom center;
}

/* nouzai-blocks.css の .Hero .Wrap--narrow h1（36px）が後から読み込まれる
   ため、.Hero を重ねて詳細度で勝たせる（取材ヒーローと同じ手） */
.Hero.Hero--dealer .Wrap--narrow h1 {
	font-size: 48px;
	margin: 20px 0 0.5em;
}

.Hero--dealer .Wrap--narrow .Hero-subtitle {
	font-size: 22px;
	font-weight: 700;
	line-height: 160%;
}

/* 明るい写真の販売店紹介（oce-1000）。写真の左側が白くフェードしていて
   黒文字が前提のデザイン。上余白と背景位置も専用の値にする。 */
.Hero.has-bg.Hero--dealer-light {
	padding: 60px 0 170px;
	background-position: center center;
}

.Hero.has-bg.Hero--dealer-light .Wrap--narrow {
	color: #333;
}

/* ---- チェックリスト（#feature の特長）----
   アイコンは assets/images/check-icon.png */
.Hero--dealer ~ .lp-pageWrap .flex-blc .inner ul {
	margin-left: 0;
	list-style: none;
}

.Hero--dealer ~ .lp-pageWrap .flex-blc .inner ul li {
	list-style: none;
	font-weight: 700;
	margin-bottom: 10px;
}

.Hero--dealer ~ .lp-pageWrap .flex-blc .inner ul li::before {
	content: "";
	display: inline-block;
	width: 21px;
	height: 21px;
	background-image: url(../images/check-icon.png);
	background-size: contain;
	vertical-align: middle;
	margin-right: 7px;
}

/* ---- 価格帯（テキスト + 金額）---- */
.lp-pageWrap .flex-blc .price {
	margin-top: 30px;
}

.lp-pageWrap .flex-blc .price .text {
	background-color: #379b05;
	color: #fff;
	padding: 10px 30px;
	font-weight: 700;
	margin-right: 20px;
	font-size: 20px;
}

.lp-pageWrap .flex-blc .price .num {
	background-color: #c9f6b3;
	padding: 10px 30px;
	font-size: 20px;
}

@media screen and (max-width: 1000px) {
	.lp-pageWrap .flex-blc .price .text,
	.lp-pageWrap .flex-blc .price .num {
		display: inline-block;
		width: 100%;
	}

	.lp-pageWrap .flex-blc .price {
		display: inline-grid;
	}
}

/* ---- 販売店カード（flex-blc v2。ロゴ + 店名 + 区分タグ）---- */
.flex-blc.v2 {
	background-color: #f5f5f5;
	padding: 17px 10px 13px;
	width: 46% !important;
	margin-right: 2% !important;
	margin-bottom: 22px;
}

.flex-blc.v2 .img-left {
	width: 30%;
}

.flex-blc.v2 .img-left img {
	width: 130px;
}

.flex-blc.v2 .inner-right {
	width: 67%;
	margin-left: 12px;
}

.flex-blc.v2 .inner-right .text {
	font-size: 24px;
	text-align: left;
	font-weight: 700;
	margin-bottom: 10px;
}

/* タグのリストは黒丸なし（本文全体の disc 指定を打ち消す） */
.flex-blc.v2 ul {
	display: flex;
	margin-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.flex-blc.v2 ul li {
	list-style: none;
	color: #fff;
	background-color: #949494;
	padding: 1px 15px;
	border-radius: 5px;
}

.flex-blc.v2 .child {
	text-align: left;
	word-break: keep-all;
	line-height: 1.9;
}

.flex-blc.v2 .child span {
	color: #fff;
	background-color: #949494;
	padding: 1px 15px 3px;
	border-radius: 5px;
	font-size: 14px;
	margin-right: 5px;
}

/* ---- 番号付き特長ボックス（LP-Basic-Content）---- */
.LP-Basic-Content {
	padding-top: 60px;
	padding-bottom: 60px;
}

.LP-Basic-Content h2 {
	text-align: center;
	color: #379b05;
	margin-bottom: 30px;
	font-size: 28px;
}

.LP-Basic-Content .Row {
	align-content: flex-start;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	margin: 165px -15px 30px;
	width: calc(100% + 30px);
}

.LP-Basic-Content .Column--4 {
	width: 30%;
	margin-right: 3%;
}

.LP-Basic-Content .Column--8 {
	width: 66.66667%;
}

.LP-Basic-Content .Column--4 .block .num {
	font-size: 36px;
	font-weight: 700;
	color: #379b05;
	margin-left: 22px;
}

.LP-Basic-Content .Column--4 .block .img {
	margin-bottom: -30px;
	position: relative;
}

.LP-Basic-Content .Column--4 .block .img img {
	position: absolute;
	top: -115px;
	right: -13px;
}

.LP-Basic-Content .Column--4 .block .text {
	padding: 15px 28px;
	background-color: #fff;
	min-height: 250px;
}

.LP-Basic-Content .Column--4 .block .text h3 {
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.LP-Basic-Content .Column--4 .block .text p {
	margin-bottom: 0;
}

.LP-Basic-Content p {
	font-size: 16px;
	line-height: 200%;
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.Hero--dealer .Wrap--narrow .img-wrap {
		max-width: 200px;
	}

	.Hero.Hero--dealer .Wrap--narrow h1 {
		font-size: 26px;
		margin: 0.5em 0;
	}

	.Hero--dealer .Wrap--narrow .Hero-subtitle {
		font-size: 16px;
		line-height: 1.8;
	}

	.Hero--dealer ~ .lp-pageWrap #feature img {
		width: 100%;
		height: auto;
	}

	.flex-blc.v2 {
		display: flex;
		width: 100% !important;
	}

	.flex-blc.v2 .inner-right {
		margin-left: 10px;
		width: 65%;
	}

	.flex-blc.v2 .inner-right .text {
		font-size: 20px;
		margin-bottom: 0;
	}

	.LP-Basic-Content .Row {
		margin-top: 0;
	}

	.LP-Basic-Content .Column--4 {
		width: 100%;
		margin-right: 0;
		padding: 0 20px;
	}

	.LP-Basic-Content .Column--4 .block .img {
		position: relative;
	}

	.LP-Basic-Content .Column--4 .block .img img {
		width: 100%;
		position: static;
	}

	.LP-Basic-Content .Column--4 .block .text {
		min-height: auto;
	}
}

/* ----------------------------------------------------------------------
 製品紹介ページ（coolpescon）

 背景写真の上に「製品ロゴ + 青の見出し（26px）+ キャッチコピー」を重ねる
 ヒーローで、ヒーローブロックの「ヒーローの見た目 = 製品紹介」が
 `.Hero--product` を出す。本文はページ固有の部品（#effect の数字付き
 ボックス・#feature の矢印つき手順・#scene）を持つ。

 `#intoro` / `#feature` は販売店ページと同じIDなので、素で書くと oce の
 見出しが青くなる等の漏れが起きる。本文の規則はすべて
 `.Hero--product ~ .lp-pageWrap` スコープに置く（テーブル等と同じ手。
 編集画面はブロックごとにラッパーが入るためこのスコープは効かない）。
 `#info` と `.lp-cta` は共通CSSと同値なのでここには書かない。
---------------------------------------------------------------------- */
.Hero.has-bg.Hero--product {
	padding: 110px 0 170px;
	background-position: center center;
}

/* 写真が明るく、キャッチコピーは既定の黒。見出しだけブランド青。 */
.Hero.has-bg.Hero--product .Wrap--narrow {
	color: #333;
}

.Hero.Hero--product .Wrap--narrow h1 {
	color: #4694d1;
	font-size: 26px;
	margin: 0 0 0.75em;
}

.Hero--product .Wrap--narrow .img-wrap {
	max-width: 447px;
	margin-bottom: 2.5em;
}

/* キャッチコピーは h1 と同じブランド青。白文字だと明るい写真に
   溶けて読めないため。 */
.Hero.Hero--product .Wrap--narrow .Hero-subtitle {
	color: #4694d1;
	font-size: 22px;
	font-weight: 700;
}

/* ---- 導入（#intoro）---- */
.Hero--product ~ .lp-pageWrap #intoro .lg-ttl {
	color: #4694d1;
	margin: 0 2em;
}

/* ---- 特長（#feature）。2列の図版と、奇数番目に緑の矢印が付く手順 ---- */
.Hero--product ~ .lp-pageWrap #feature .inner-sm {
	max-width: 940px;
	margin: auto;
}

.Hero--product ~ .lp-pageWrap #feature .inner-sm > div {
	width: 48%;
	margin-right: 4%;
}

.Hero--product ~ .lp-pageWrap #feature .inner-sm > div:nth-child(even) {
	margin-right: 0;
}

.Hero--product ~ .lp-pageWrap #feature .inner-sm > div p {
	font-size: 1em;
	line-height: 1.6;
}

.Hero--product ~ .lp-pageWrap #feature .inner-sm > div p span {
	font-size: 0.9em;
}

.Hero--product ~ .lp-pageWrap #feature .lp-container h4 {
	font-size: 1.15em;
	margin-bottom: 1em;
}

.Hero--product ~ .lp-pageWrap #feature .lp-container.mgtop-25 .item:nth-child(odd) {
	position: relative;
}

.Hero--product ~ .lp-pageWrap #feature .lp-container.mgtop-25 .item:nth-child(odd)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -8%;
	transform: translateY(-50%);
	border: 15px solid transparent;
	border-left: 20px solid #379b05;
}

.Hero--product ~ .lp-pageWrap #feature .lp-container.mgtop-25 .img-wrap {
	max-width: 538px;
	margin: auto;
}

/* ---- 効果（#effect）。01・02… の数字が肩に乗る白ボックス ----
   番号はCSSで自動採番する（カードを足しても番号が続くように）。 */
.Hero--product ~ .lp-pageWrap #effect .flex-blc {
	counter-reset: nouzai-effect;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item {
	counter-increment: nouzai-effect;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .box {
	padding: 50px 20px 20px;
	background-color: #fff;
	position: relative;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .img-wrap {
	max-width: 110px;
	margin: 0 auto 3em;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box {
	min-height: 240px;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box::before {
	content: counter(nouzai-effect, decimal-leading-zero);
	font-size: 2.25em;
	font-weight: 700;
	color: #379b05;
	top: -40px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box h3 {
	font-size: 1.25em;
	text-align: center;
	margin-bottom: 1em;
}

.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box p {
	margin-bottom: 0;
}

.Hero--product ~ .lp-pageWrap #effect .lp-container {
	margin-top: 4em;
}

.Hero--product ~ .lp-pageWrap #effect .lp-container:nth-of-type(2) .box {
	min-height: 364px;
}

/* ---- 使用シーン（#scene）---- */
.Hero--product ~ .lp-pageWrap #scene .lp-container {
	text-align: center;
}

.Hero--product ~ .lp-pageWrap #scene .lp-container:nth-of-type(2) {
	margin-top: 4em;
}

.Hero--product ~ .lp-pageWrap #scene .lp-container h4 {
	font-size: 1.15em;
	margin-bottom: 1.25em;
}

@media screen and (max-width: 767px) {
	.Hero.has-bg.Hero--product {
		padding: 3em 0 4em;
	}

	.Hero.Hero--product .Wrap--narrow h1 {
		font-size: 20px;
	}

	.Hero--product .Wrap--narrow .img-wrap {
		max-width: 240px;
		margin-bottom: 1em;
	}

	.Hero--product .Wrap--narrow .Hero-subtitle {
		font-size: 16px;
	}

	.Hero--product ~ .lp-pageWrap #intoro .lg-ttl {
		margin: 0;
	}

	.Hero--product ~ .lp-pageWrap #intoro p {
		margin-top: 0.5em;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac p {
		text-align: left;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac .inner-sm > div {
		width: 100%;
		margin-right: 0;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac .inner-sm > div .img-wrap {
		margin-bottom: 0.5em;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac .inner-sm > div:nth-of-type(2) {
		margin-top: 1em;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac.mgtop-25 {
		margin-top: 2em !important;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac.mgtop-25 .item:nth-child(odd) {
		margin-bottom: 2em;
	}

	.Hero--product ~ .lp-pageWrap #feature .lp-container.tac.mgtop-25 .item:nth-child(odd)::after {
		display: none;
	}

	.Hero--product ~ .lp-pageWrap #effect .flex-blc .box,
	.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box {
		padding: 30px 20px 20px;
	}

	.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .img-wrap {
		margin-bottom: 1em;
	}

	.Hero--product ~ .lp-pageWrap #effect .flex-blc .item .box::before {
		top: -35px;
	}

	.Hero--product ~ .lp-pageWrap #effect .lp-container:nth-of-type(2) {
		margin-top: 3em;
	}

	.Hero--product ~ .lp-pageWrap #effect .lp-container:nth-of-type(2) .box {
		min-height: initial;
	}

	.Hero--product ~ .lp-pageWrap #scene .lp-container h4 {
		margin-bottom: 0.75em;
	}
}


/* ----------------------------------------------------------------------
 製品情報の下層ページ

 /list-products-materials/ 配下の6ページ。ヒーローは既定の見た目のままで
 （h1 36px + 緑の罫線。背景写真があるのは涼風だけ）、本文は
 `#intoro`（画像+テキスト）/ `#product`（2カラム）/ `#case`（事例カード）/
 `#info`（企業情報テーブル）という決まった並び。共通部分は
 nouzai-blocks.css と lp-base.css が持つので、ここには**このページ種別に
 固有の分**だけを置く。ページの絞り込みは body の
 `page-{スラッグ}`（inc/setup.php）で行う。
---------------------------------------------------------------------- */

/* 段落の下余白は 20px。取材・販売店ページ（lp-base.css の 2.5em、SPは1em）
   とは別の値なので、ヒーローの目印でスコープする。 */
.Hero--material ~ .lp-pageWrap p {
	margin-bottom: 20px;
}

/* 事例カード（#case）。ブロック（.case-cards）に移せた分はそちらのCSSが
   効くが、見出しが2つある等でHTMLのまま残ったセクションにも同じ見た目が
   要るため、ここでも同じ見た目を定義する。 */
.Hero--material ~ .lp-pageWrap #case .flex-blc {
	margin-top: 40px;
}

.Hero--material ~ .lp-pageWrap #case .flex-blc .item {
	width: 45%;
	max-width: 50%;
	margin-right: 2%;
	margin-bottom: 20px;
	padding: 15px 15px 5px;
	background-color: #f5f5f5;
	line-height: 1.6;
}

/* カードの中は本文より詰まった行間にする。
   段落には上の `.lp-pageWrap p` が効くので、ここで直接指定する。 */
.Hero--material ~ .lp-pageWrap #case .flex-blc .item p {
	line-height: 1.6;
}

.Hero--material ~ .lp-pageWrap #case .item-blc {
	display: flex;
	align-items: center;
}

.Hero--material ~ .lp-pageWrap #case .item-blc .img-left {
	position: relative;
	width: 55%;
	margin-right: 15px;
	overflow: hidden;
}

.Hero--material ~ .lp-pageWrap #case .item-blc .inner-right p {
	font-weight: 700;
}

.Hero--material ~ .lp-pageWrap #case .item-blc .item-tag {
	width: fit-content;
	margin-bottom: 5px;
	padding: 1px 15px 3px;
	border-radius: 5px;
	background-color: #949494;
	color: #fff;
	font-size: 14px;
}

.Hero--material ~ .lp-pageWrap #case .flex-blc a {
	color: #333;
	transition: transform 0.3s;
}

.Hero--material ~ .lp-pageWrap #case .flex-blc .item a:hover {
	opacity: 0.8;
}

.Hero--material ~ .lp-pageWrap #case .flex-blc .item a:hover .img-left img {
	transform: scale(1.1);
	transition: transform 0.3s;
}

.Hero--material ~ .lp-pageWrap #case .flex-blc .item > a > p {
	font-size: 14px;
}

/* 企業情報のロゴ幅 */
.Hero--material ~ .lp-pageWrap #info .img-wrap {
	max-width: 454px;
}

@media screen and (max-width: 1100px) {
	.Hero--material ~ .lp-pageWrap #case .flex-blc .item {
		width: 44%;
	}

	.Hero--material ~ .lp-pageWrap #intoro .flex-blc.ai-cen {
		align-items: normal;
	}
}

@media screen and (max-width: 980px) {
	.Hero--material ~ .lp-pageWrap #info .flex-blc {
		display: block;
	}

	.Hero--material ~ .lp-pageWrap #info .flex-blc .img-wrap {
		margin: 0 auto 1em;
	}

	.Hero--material ~ .lp-pageWrap #info .flex-blc .inner {
		padding: 5% 0 0;
	}
}

@media screen and (max-width: 832px) {
	.Hero--material ~ .lp-pageWrap #case .flex-blc .item {
		width: 43%;
	}
}

@media screen and (max-width: 667px) {
	.Hero--material ~ .lp-pageWrap #case .item-blc {
		flex-wrap: wrap;
	}

	.Hero--material ~ .lp-pageWrap #case .flex-blc .item {
		width: 100%;
		max-width: 100%;
	}

	.Hero--material ~ .lp-pageWrap #case .item-blc .img-left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
}

/* SPのヒーロー下余白。製品情報の下層は見出し + 緑罫線だけで背景写真も
   無いため、既定の `padding: 2em 0 4em` だと罫線と本文の間が空きすぎる。
   下余白なしにする。他のページ種別には影響しない
   （販売店・製品紹介・取材はそれぞれ自分の指定を持つ）。 */
@media screen and (max-width: 767px) {
	.Hero.Hero--material {
		padding-bottom: 0;
	}
}

/* 画像の下のボタン（`.top_btn`）。ボタンそのものの見た目は
   generic/design.css の `.q_custom_button.bt_green`。ここは配置だけ。 */
.lp-pageWrap .img-wrap .top_btn {
	margin-top: 30px;
	text-align: center;
}

/* スーパーカラー: チェック付きの箇条書き。テーマは Font Awesome を
   読み込まないので、販売店ページと同じチェックアイコンの画像を使う。 */
.lp-pageWrap .summary_list {
	margin-left: 0;
	list-style: none;
}

.lp-pageWrap .summary_list li {
	list-style: none;
	padding-left: 10px;
}

.lp-pageWrap .summary_list li::before {
	content: "";
	display: inline-block;
	width: 21px;
	height: 21px;
	margin-right: 6px;
	background-image: url(../images/check-icon.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

/* ウッドボイラー・エンボス灌水チューブ: 2カラムの本文を字下げする */
.page-woodboiler .lp-pageWrap .text,
.page-embossed-irrigation-tube .lp-pageWrap .text {
	padding-left: 30px;
}

/* ウッドボイラー・エンボス灌水チューブ: 小見出しの下余白 */
.page-woodboiler .lp-pageWrap .md-ttl,
.page-embossed-irrigation-tube .lp-pageWrap .md-ttl {
	margin-bottom: 1em;
}

/* ウッドボイラー: 企業情報テーブルの見出し列を狭く */
.page-woodboiler .lp-pageWrap .bd-tbl tr th {
	width: 30%;
}

/* ウッドボイラー: 「製品活用」の画像2枚は折り返さず中央に並べる */
.lp-pageWrap .flex-blc.sp {
	flex-wrap: unset;
	justify-content: center;
}

.lp-pageWrap .flex-blc.sp .flex-item {
	text-align: center;
}

/* エンボス灌水チューブ: 「規格」の見出しと図版の位置 */
.page-embossed-irrigation-tube .lp-pageWrap .title_second {
	margin-left: 150px;
}

.page-embossed-irrigation-tube .lp-pageWrap .flex-item .img img {
	margin-left: 60px;
}

/* エンボス灌水チューブ・スーパーカラー: 中央寄せの図版 */
.lp-pageWrap .box_img .img {
	text-align: center;
}

.page-embossed-irrigation-tube .lp-pageWrap .box_img .img img {
	width: 500px;
	max-width: 100%;
}

@media screen and (max-width: 1150px) and (min-width: 850px) {
	.page-embossed-irrigation-tube .lp-pageWrap .flex-item .img img {
		width: 450px;
		margin-left: 30px;
	}

	.page-embossed-irrigation-tube .lp-pageWrap .title_second {
		margin-left: 120px;
	}
}

@media screen and (max-width: 1023px) {
	.page-woodboiler .lp-pageWrap #info .flex-blc {
		display: block;
	}

	/* 共通の `#info .flex-blc .img-wrap { margin: 0 auto 1em }`（980px以下）に
	   勝たせるため、同じだけの詳細度にしておく。 */
	.page-woodboiler .lp-pageWrap #info .flex-blc .img-wrap {
		margin: 0 auto;
	}
}

@media screen and (max-width: 959px) {
	.lp-pageWrap .flex-blc.sp {
		gap: 20px;
	}

	.page-woodboiler .lp-pageWrap #product .flex-blc .flex-item img {
		width: 100%;
	}

	.page-woodboiler .lp-pageWrap .flex-item .img img {
		margin-left: 0;
	}
}

@media screen and (max-width: 780px) {
	.page-woodboiler .lp-pageWrap #intoro .flex-blc.ai-cen,
	.page-embossed-irrigation-tube .lp-pageWrap #intoro .flex-blc.ai-cen {
		justify-content: center;
	}

	.page-woodboiler .lp-pageWrap #intoro .flex-blc.ai-cen .img-wrap,
	.page-embossed-irrigation-tube .lp-pageWrap #intoro .flex-blc.ai-cen .img-wrap {
		margin-bottom: 20px;
	}

	.page-woodboiler .lp-pageWrap #intoro .flex-blc.ai-cen .img-wrap {
		text-align: center;
	}

	.page-embossed-irrigation-tube .lp-pageWrap .title_second {
		margin-left: 0;
	}

	.lp-pageWrap .flex-item .img {
		text-align: center;
	}

	.page-embossed-irrigation-tube .lp-pageWrap .flex-item .img img {
		margin-left: 0;
	}
}

@media screen and (max-width: 767px) {
	/* スーパーカラー: 2カラムの本文に左右の余白 */
	.page-winding-pipe-super-collar .lp-pageWrap .text {
		padding: 0 1em;
	}

	/* 科学的原産地証明: 画像は中央へ */
	.page-scientific-certification-of-origin .lp-pageWrap .flex-blc .img-wrap {
		text-align: center;
	}
}

@media screen and (max-width: 659px) {
	.page-woodboiler .lp-pageWrap .bd-tbl tr th {
		width: 100%;
	}
}

@media screen and (max-width: 639px) {
	.page-embossed-irrigation-tube .lp-pageWrap .box_img .img img {
		width: 300px;
	}
}

@media screen and (max-width: 479px) {
	.lp-pageWrap .flex-blc.sp {
		display: block;
	}
}

/* ----------------------------------------------------------------------
 SPのテーブルまわりの調整
---------------------------------------------------------------------- */

/* 本文のテーブルには th へ width="16.31%" 等がインラインで直書きされている
   ことがある。SPでは th/td を縦積み（display:block・全幅）にするため、
   インライン指定が残るとラベルが「お問い合/わせ先」のように数文字で
   折り返す。インライン指定より強くする必要があるため !important。 */
@media screen and (max-width: 767px) {
	.lp-pageWrap .bd-tbl tr th,
	.lp-pageWrap .bd-tbl tr td {
		width: 100% !important;
	}
}

/* 法人情報のように背景色付きのセクションが2つ続くページでは、間で帯が
   切れて大きな余白に見える。SPでは1つの帯としてつなげる（PCは列組みが
   あるため現状の余白を保つ）。
   display: flow-root は、上パディングを0にしたことで中身の上マージンが
   帯の外へ抜けて（マージンの相殺）白い隙間になるのを防ぐため。 */
@media screen and (max-width: 767px) {
	.LP-Hero.hero-interview ~ .lp-sectWrap:has(> .bg-color) + .lp-sectWrap > .sect.bg-color {
		padding-top: 0;
		display: flow-root;
	}

	/* つなげた2つ目のセクション先頭のブロックは、上の余白も詰める。
	   .flex-blc の上マージン40pxと、ロゴを上に積むときの .inner の
	   上パディング5%が重なって、前のセクションとの間が空きすぎるため。
	   （#info は法人情報セクションのアンカー。ベースの
	   `#info .flex-blc .inner` よりセレクタを強くするために含めている） */
	.LP-Hero.hero-interview ~ .lp-sectWrap:has(> .bg-color) + .lp-sectWrap .flex-blc:first-child {
		margin-top: 0;
	}

	.LP-Hero.hero-interview ~ .lp-sectWrap:has(> .bg-color) + .lp-sectWrap #info .flex-blc:first-child > .inner {
		padding-top: 0;
	}
}

/* ロゴの無い法人情報テーブルは、ロゴとの間隔用の上パディングが不要
   （.inner の padding-top 5% はロゴを上に積んだときの間隔）。 */
@media screen and (max-width: 992px) {
	.lp-pageWrap #info .flex-blc .inner:only-child {
		padding-top: 0;
	}
}

/* 法人情報で**表のあとに画像が来る**並び（画像を右に置いた指定）のとき、
   縦積みになると表の下罫線と画像がくっつく。
   `#info .flex-blc .img-wrap` の余白は `margin: 0 auto 1em` で下だけを
   持っており、画像が先に来る並びを前提にしているため。
   画像が後ろに来るときだけ上の余白を補う（`.inner + .img-wrap`）。
   画像が先の並びは img-wrap が先頭なのでこの指定に当たらず、従来どおり
   「画像の下1em + 表の上5%」で間隔が付く。
   値を表の上パディングと同じ5%にしているのは、同じページに並ぶ
   「画像が先」の法人情報と間隔をそろえるため（SP幅で実測21px対18px）。 */
@media screen and (max-width: 992px) {
	.lp-pageWrap #info .flex-blc .inner + .img-wrap {
		margin-top: 5%;
	}
}