/*
 * crosspile.css
 * クロスパイル製品ページ（/crosspile/）と回収熱量シミュレーター（/crosspile/simulator/）専用。
 * トークンは style.css の --color-crosspile-blue-*、見出し・ボタンは c-section-heading /
 * c-button。
 * レイアウト（段組み・グリッド）はブロックエディタに任せ、このCSSは持たない（二重管理で、
 * 編集画面の列数変更が反映されなくなるため）。
 * ここには配色・書体・余白の微調整・シミュレーターUIだけを書く。読み込み条件と body クラスは
 * inc/crosspile.php。
 */

/*
 * 配色は旧サイトの実測値（アクセントは赤 #9c151b）。--crosspile-accent
 * は見出し・番号・アウトラインボタンが共通で参照するため、
 * ここを差し替えるだけで大半の配色が変わる。
 * --color-crosspile-blue-1/2
 *   は企業ページのクロスパイル誘導も参照する共有トークンなので削除しない。
 */
:root {
	--cross-width: 960px;
	--font-jp: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, Arial, sans-serif;
}

.crosspile-page {
	--crosspile-accent: #9c151b;
	font-family: var(--font-jp);
}

.entry-content {
	color: #000;
}

p {
	font-size: 1rem;
}

/*
 * 見出しは旧サイトに合わせて明朝。.c-section-heading（h2）は font-family を持たないので、
 * クロスパイル配下に限ってここで上書きする（英字ラベル __en は Montserrat のまま）。
 * Shippori Mincho は読み込むウェイトが限られるため、h2 の既定 bold だと合成太字になってにじむ。
 * font-weight: 500 を明示する。
 */
.crosspile-page .c-section-heading,
.crosspile-subtitle {
	font-family: var(--font-mincho);
	font-weight: 700;
}

/*
 * 簡易相談フォームの注意書き。※は装飾ではなく本文の一部としてマークアップ側に書いているため、
 * CSSでは行頭記号（list-style）を消すだけにしている。
 */
.crosspile-contact__notes {
	list-style: none;
	margin: 1em 0 2em;
	padding: 0;
	font-size: 0.875rem;
}

.crosspile-subtitle {
	font-size: clamp(1.5rem, 1.196rem + 0.63vw, 1.75rem);
	color: var(--color-navy);
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 700;
	width: 100%;

	span {
		font-family: inherit;
	}
}

.crosspile-subtitle--red {
	color: var(--crosspile-accent);
}

.crosspile-number {
	font-family: var(--font-mincho);
	color: var(--crosspile-accent);
	font-size: clamp(3.75rem, 2.839rem + 1.9vw, 4.5rem);
	margin-inline-start: -1px;
	display: block;
	line-height: 1;
	width: fit-content;
	font-weight: 700;

	&::after {
		content: "";
		display: block;
		width: 40px;
		margin-inline: auto;
		margin-block: 1rem;
		border-bottom: 1px solid var(--crosspile-accent);
	}
}

.crosspile-sub {
	font-size: clamp(1.125rem, 1.124rem + 0.52vw, 1.375rem);
	font-family: var(--font-jp);
	font-weight: 700;
}

/*
 * MV（ページ最上部のビジュアル）。共通の .hero はクロスパイルでは出さず（content.php で除外）、
 * 旧サイトのMV（グラデーション背景＋製品写真＋透かしロゴ）を本文のHTMLブロックで再現する。
 * 背景色は --color-crosspile-header とは別トークン（ヘッダー配色の変更にMVが連動しないように）。
 * h1 の重複を避けるため、MVタイトルはページごとにタグを変える（「クロスパイル」は <h1>、
 * 「回収熱量を試算」はそのページ本来の見出しを <h1> にしてMV側は非見出し要素。
 * 見た目はクラスで共通）。
 */
.crosspile-mv {
	position: relative;
	overflow: hidden;
	padding: 2rem 0 14rem;
	background-image: url(../images/crossheader-bg.webp);
	background-size: contain;
	background-position: center;
	color: var(--color-white);
}

.l-main--simulator .crosspile-mv {
	padding-block-end: 2em
}

.crosspile-mv__watermark img {
	width: 100%;
	max-width: clamp(21.563rem, 11.928rem + 20.07vw, 32rem);
	margin-block-start: 1rem;
}

.crosspile-mv__inner {
	position: relative;
	z-index: 1;
	max-width: var(--cross-width);
	margin-inline: auto;
	display: grid;
	gap: 2rem clamp(1rem, -1.43rem + 5.06vw, 3rem);
	align-items: end;

	@media(768px >=width) {
		justify-items: center
	}
}

.crosspile-mv__img {
	flex: 0 0 400px;
	max-width: clamp(18.75rem, 11.155rem + 15.82vw, 25rem);
	margin-inline: auto;
	grid-row: 2/3;

	@media(768px < width) {
		grid-row: 1 /3;
	}

	img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

.crosspile-mv__lead {
	font-size: clamp(1.125rem, 0.821rem + 0.63vw, 1.375rem);
	color: #bbc0c7;

	@media(768px < width) {
		grid-row: 1/2;
	}
}

.crosspile-mv__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: clamp(1.75rem, -0.301rem + 4.27vw, 3.438rem);
	line-height: 1.3;
	/* ページによって p になるため、p のベース指定（palt）を打ち消して h1 と同じ字送りにする. */
	font-feature-settings: normal;
}

.crosspile-mv__title-sub {
	display: inline-block;
	margin-left: 0.75em;
	font-size: 18px;
	font-weight: normal;
}

.crosspile-mv__desc {
	font-size: 0.875rem;
	line-height: 1.8;

	@media(768px < width) {
		grid-row: 2/3;
		max-width: clamp(21.563rem, 11.928rem + 20.07vw, 32rem);
	}
}

/*
 * セクション単位の背景色。alignfull のグループブロックは画面幅いっぱいに広がるので、
 * ここでは色だけを定義し、幅・余白はブロック側に任せる。
 */

:where(.crosspaile-inner) {
	width: 100%;
	max-width: var(--cross-width);
	margin-inline: auto;

}

@media(990px >=width) {
	.crosspaile-inner {
		padding-inline: 1rem;
	}
}

/* mv下 */
.crosspile-about.is-layout-flex {
	position: relative;
	max-width: var(--cross-width);
	background-color: rgba(255, 255, 255, 0.7);
	margin-block-start: -150px;
	padding-block: 2rem;
	padding-inline: 1rem;
	display: grid;

	@media(768px < width) {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* 背景色切り替え用 */
.crosspile-section-pastel {
	background: #f6f4f0;
}

.crosspile-section-case {
	background: #cedee4;
}

.crosspile-section-gray {
	background: #eaecee;
}

.crosspile-section-pastel,
.crosspile-section-case,
.crosspile-section-case + .crosspaile-inner,
.crosspile-section-pastel + .crosspaile-inner {
	padding-block: 3rem;
}

/* クロスパイルの用途例 */
.c-section-heading--bar {
	text-align: center;

	span {
		padding-block: 0.25em 1em;
		display: block;
		font-size: 0.5em;
		color: var(--crosspile-accent, var(--color-accent, var(--color-navy)));
		letter-spacing: 0.05em;
		text-align: center;
		font-style: italic;
		font-weight: 500;
	}
}

.crosspile-property__list.crosspaile-inner {
	grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr));
	gap: 1em;
}

.crosspile-property__list > * {
	background: rgba(255, 255, 255, 0.85);
	padding: 1.5rem;
	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.12);
	grid-row: span 2;
}

.crosspile-property__list > *:not(.point-feat) {
	display: grid;
	grid-template-rows: subgrid;
	gap: 1.5em;
	align-content: start;

	.crosspile-button-area {
		justify-self: center;
		margin-block-start: 3em;
	}
}

h3 span.crosspile-sub {
	font-size: 1rem;
}

.point-feat {
	justify-self: center;
	width: 100%;
	height: 100%;
	align-self: center;

	h2 {
		text-align: center;
	}

	img {
		max-width: 190px;
		margin-inline: auto;
	}
}

.crosspile-button-area--sim .c-button--outline {
	a.wp-element-button {
		position: relative;
		width: 100%;
		border-radius: 0;
		border-color: transparent;
		padding: 1.5em 1em;
		background-color: var(--crosspile-accent);
		display: flex;
		gap: 1em;
		align-items: center;
		font-size: 1rem;

		@media(768px < width) {
			font-size: 1.125em;
			padding: 1.5em 2em;
		}

		&::before,
		&::after {
			display: block;
			content: "";
			background-image: url(../images/sim_icon.png);
			background-size: contain;
			background-repeat: no-repeat;
			width: 1.45em;
			height: 1.45em;
			aspect-ratio: 1 / 1;
		}
	}
}

/* クロスパイルの用途例ブロック */
.l-main--crosspile {

	.crosspile-case__images,
	.crosspile-values__images {
		margin-bottom: 2rem;
		gap: 1.5em;

		@media(768px <=width) {
			&.is-layout-grid {
				grid-template-columns: repeat(2, minmax(330px, 1fr));
				gap: 2.5em clamp(1rem, -0.823rem + 3.8vw, 2.5rem);
			}
		}
	}
}

/* 768px 未満は1列（列数は WordPress の自動配置に任せず固定する） */
@media (768px > width) {
	.l-main--crosspile .crosspile-case__images.is-layout-grid,
	.l-main--crosspile .crosspile-values__images.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.crosspile-section-case {
	.crosspaile-inner {
		> div {
			background-color: rgba(255, 255, 255, 0.7);
			padding-block: 2rem;
			padding-inline: clamp(1rem, -1.43rem + 5.06vw, 3rem);

			p.crosspile-caption {
				font-weight: normal;
			}
		}

		h2 + div {
			margin-block-end: 3em;
		}

		.crosspile-case__images {
			margin-block-end: 1em;
		}

		.crosspile-case__images > div {
			position: relative;

			img {
				width: 100%;
				height: auto;
			}
		}

	}

	p {
		margin-block-end: 0.75em;
	}
}

.crosspile-caption {
	font-size: 1rem;
	color: var(--color-crosspile-header);
	margin-top: 1rem;
}

/* 用途例のキャプションは、狭い画面では折り返す（nowrap のままだとページ全体が横にはみ出す） */
@media (768px <=width) {
	.crosspile-section-case .crosspaile-inner > div p.crosspile-caption {
		white-space: nowrap;
	}
}

/* 実測値ブロック */
.crosspaile-section-plain {
	.crosspile-values__images {
		padding-block-start: 2em;
	}
}

.crosspaile-section-plain,
.crosspile-section-case .crosspaile-inner > div {
	h3 {
		padding-inline-start: clamp(1.125rem, 0.669rem + 0.95vw, 1.5rem);
		border-left: 1px solid #9c151b;
		font-size: clamp(1.125rem, 0.745rem + 0.79vw, 1.438rem);
		font-weight: normal;
		margin-block-end: 1em;
		@media(768px>=width){
			font-weight: bold;
		}
	}

	h4 {
		margin-block: 1em;
		color: var(--crosspile-accent);
		position: absolute;
		width: fit-content;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* 簡易フォーム */
.crosspile-section-gray:has(form) {
	.crosspaile-inner {
		h2 ~ p {
			font-feature-settings: normal;
		}
	}
}

/*
 * シミュレーター表の高温側／低温側の色分け（旧サイトの実測値）。inc/crosspile.php
 * のショートコードが出力する th/td に data-side 属性を付けている。
 */
.crosspile-calc-table thead th[data-side="high"],
.crosspile-result-table .crosspile-result-label--high {
	background-color: #d47e18;
}

.crosspile-calc-table thead th[data-side="low"],
.crosspile-result-table .crosspile-result-label--low {
	background-color: #7b979e;
}

.crosspile-calc-table thead th {
	color: var(--color-white);
	background-color: #7b979e;
}

.crosspile-result-table .crosspile-result-label--high,
.crosspile-result-table .crosspile-result-label--low {
	display: inline-block;
	padding: 0.3em 0.6em;
	margin-right: 0.5em;
	color: var(--color-white);
	font-size: 0.8125rem;
}

/*
 * 主要アクション（試算する）は塗り赤ボタン。サイト共通の .c-button
 * は白文字/白枠前提の別デザインのため変更せず、このページ限定の新規クラスとして追加した。
 */
.crosspile-button--primary {
	display: inline-block;
	padding: 0.875em 2em;
	background: var(--crosspile-accent);
	color: var(--color-white);
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/*
 * 段組みはカラムブロック、グリッドはグループブロックが担当し、列数・間隔は編集画面から変更できる。
 * ここでは前後の余白だけを足す。
 */
.crosspile-about {
	margin-bottom: 3rem;

	> div:has(img) {
		figure {
			width: 100%;
			max-width: 280px;
			margin-inline: auto;
		}
	}

	@media(768px < width) {
		.c-section-heading {
			display: flex;
			align-items: flex-end;
			gap: 0.5em;
			letter-spacing: 1px;
		}
	}

	.c-section-heading__en {
		margin-block-end: 5px;
	}
}

.crosspile-property__head {
	margin-bottom: 1.5rem;
}

.crosspile-button-area {
	margin-top: 1rem;
}

.crosspile-button-area--sim {
	margin: 3rem 0;
}

.crosspile-contact__lead {
	margin-bottom: 1.5rem;
}

/* ---- シミュレーター / 仕様ページ ---- */
.crosspile-simulator,
.crosspile-spec {
	margin-bottom: 3rem;
}

.crosspile-calc-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	background-color: var(--color-white);
}

.crosspile-calc-table th {
	background-color: #7b979e;
	color: var(--color-white);
	text-align: center;
	font-weight: normal;
	letter-spacing: 2px;
	width: 3rem;
}

.crosspile-calc-table th,
.crosspile-calc-table td {
	border: 1px solid #ddd;
	padding: 0.5em 0.75em;
}

.crosspile-calc-table input[type="text"] {
	width: 5em;
	padding: 0.3em;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.crosspile-calc-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
}

.crosspile-result-box {
	background: var(--color-white);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;

	h3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24px;

		.crosspile-caption {
			margin-top: unset;
			color: var(--color-text);
			font-weight: normal;
		}
	}
}

.crosspile-result-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

.crosspile-result-table th,
.crosspile-result-table td {
	border-bottom: 1px solid #ddd;
	padding: 0.6em 0.5em;
	text-align: left;
}

.crosspile-result-table th {
	width: 10em;
	color: var(--crosspile-accent);
}

.crosspile-spec__img {
	margin-bottom: 1.5rem;
}

.crosspile-spec__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

/*
 * 標準仕様の横長テーブル。テーブルブロックは <figure class="wp-block-table"><table> 構造で、
 * className は figure 側に付くため、wrap（figure）と table を分けて指定する。横スクロールは
 * figure 側の overflow-x が担当する。
 */
.crosspile-spec__table-wrap {
	overflow-x: auto;
	margin-bottom: 1rem;
}

.crosspile-spec__table-wrap table {
	border-collapse: collapse;
	width: 100%;
	min-width: 720px;
}

.crosspile-spec__table-wrap th,
.crosspile-spec__table-wrap td {
	border: 1px solid #ddd;
	padding: 0.5em 0.75em;
	text-align: center;
}

/* crosspile.css */
.l-main--detailsform .hero {
	max-height: 320px;

	.hero-inner {
		background: var(--color-crosspile-header);
	}

	.entry-title {
		font-size: clamp(1.5rem, 1.043rem + 1.95vw, 2.75rem)
	}

	.entry-title-en {
		font-size: clamp(1.5rem, 0.951rem + 2.34vw, 3rem);
	}
}

.l-main--detailsform .hero::before,
.l-main--detailsform .hero::after {
	all: unset;
}

/*詳細フォーム*/
.c-c-form {
	color: var(--color-corporate-heading);
}

.crosspile-notice {
	font-weight: 700;
	margin-block: clamp(1.75rem, 0.231rem + 3.16vw, 3rem) 3.5rem;
}

.crosspile-paragraph {
	margin-block-end: 3rem;
}

@counter-style crosspile-circled-num {
	system: fixed;
	symbols: "①" "②" "③" "④" "⑤" "⑥";
	suffix: "";
}

.crosspile-inner-form {
	counter-reset: crosspile-h2;

	h2 {
		counter-increment: crosspile-h2;
		font-size: clamp(1.125rem, 0.669rem + 0.95vw, 1.5rem);
		letter-spacing: 0.05em;
		line-height: 2.5;
		margin-block: 1rem;

		&::before {
			content: counter(crosspile-h2, crosspile-circled-num) " ";
		}
	}

	h2:not(:first-child) {
		margin-block-start: clamp(2.75rem, 0.016rem + 5.7vw, 5rem);
	}
}

button {
	font-weight: bold;
}

@media(1130px >= width){
	.crosspile-mv {
		padding-inline: 1rem;
	}
}