@charset "UTF-8";
/* ============================================================================
   ハイドロ・スカイ 商品ページ 個別スタイル

   amica-eco.net では商品ページごとの調整が
   `.page-id-1361`（チャコールペイント）のような固定ページIDで書かれている。
   このサイトではIDが変わるため、同じ内容を body.hydrosky-product に移植する。
   （元CSS: RAQMO-LP-ligtnning-child-g3/assets/css/style.css）
   ここに無いものはすべて本家CSSをそのまま使用している。
   ========================================================================== */

/* --- page-header：タイトルは出さず、固定ヘッダー分の高さだけ確保 -------- */
body.hydrosky-product .page-header-inner.container { display: none; }
body.hydrosky-product .page-header { min-height: 70px; }
body.hydrosky-product .global-nav-name { color: #333 !important; text-shadow: unset; }
/* ↑ で全ナビが濃色になるが、お問い合わせだけは緑ボタン上の白抜きに戻す。
   本家 `.page-id-1361 li#menu-item-1542 strong{color:#fff!important}` と同じ。 */
body.hydrosky-product li#menu-item-1542 strong { color: #fff !important; }

/* --- ヒーロー：画像帯の上にキャッチを重ねる ---------------------------- */
body.hydrosky-product .wp-block-group.header_wrap { position: relative; }
body.hydrosky-product .wp-block-group.header_txt_wrap {
	position: absolute; top: 50%; left: 0; width: 100%;
	color: #fff; font-weight: 900;
	text-shadow: 0 0 30px rgba(18, 53, 6, 0.8);
	transform: translatey(-50%) !important;
}
body.hydrosky-product .wp-block-group.header_txt_wrap h2 { font-size: 4.2rem; margin-bottom: 30px; }
body.hydrosky-product .wp-block-group.header_txt_wrap p { text-shadow: 0 0 30px rgba(18, 53, 6, 0.8); }
@media screen and (max-width: 600px) {
	body.hydrosky-product .wp-block-group.header_txt_wrap h2 { font-size: 2.2rem; margin-bottom: 30px; }
	/* スマホでは帯（800×400を横幅いっぱい＝約188px）よりキャッチが高くなり文字がはみ出すため、
	   帯の高さを確保してキャッチを収める。本家より少しだけ高くしている箇所。 */
	body.hydrosky-product .header_wrap figure.header img {
		height: 320px !important; object-fit: cover; object-position: center;
	}
	body.hydrosky-product .wp-block-group.header_txt_wrap .vk_inline-font-size { font-size: 1.7rem !important; }
}

/* --- カラムの折り返し停止 ---------------------------------------------
   本家では core が `.wp-container-core-columns-layout-N{flex-wrap:nowrap}`
   をインライン出力している。同等の指定をクラスで持たせる。 */
.wp-block-columns.amica-nowrap { flex-wrap: nowrap; }
@media screen and (max-width: 781px) {
	.wp-block-columns.amica-nowrap:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
}

/* --- 特徴セクションの見出し：読点のあとを1文字だけ落とさない ------------
   日本語はどこでも改行されるため、「コンクリートのアルカリ性を、取り戻／す」の
   ように末尾1文字だけが次行に落ちる。読点より後ろ（amica_hs_title の `|` 以降）を
   inline-block の塊にして、入らないときは読点の位置で改行させる。
   ・前半は inline のまま＝後半すら1行に入らない幅では従来どおり折り返す
     （前半まで塊にすると 992〜1199px などで行数が増える）
   `h3 span{padding:10px}`（child-assets.css）が内側の span にも当たるので打ち消す。 */
.wp-block-column.sub1-section03-column-txtbox h3 span.hs-keep {
	display: inline-block; padding: 0;
}
/* 1行に8文字しか入らない幅では、長い後半（「においが残りません」9文字・
   「コンクリートの質感を保つ」12文字）は塊のままだと1文字だけ次行に落ちて
   逆に行数が増える。長い後半（hs-keep-wide）だけ、実測した該当幅で塊をやめる。
   短い後半（「取り戻す」）はどの幅でも1行に入るので塊のままでよい。
   ・600〜767px  ＝ container 510px・22px（段は255px）
   ・851〜991px  ＝ container 720px・24px（段は345px。22pxの指定は850pxまで）
   ・360px以下   ＝ 1段組みだが段が狭い
   768〜850px と 992px以上・361〜599px は長い後半も1行に収まる。 */
@media screen and (max-width: 360px),
	screen and (min-width: 600px) and (max-width: 767px),
	screen and (min-width: 851px) and (max-width: 991px) {
	.wp-block-column.sub1-section03-column-txtbox h3 span.hs-keep-wide { display: inline; }
}

/* --- 特徴セクションの写真：帯の高さを揃える ----------------------------
   写真を absolute でレイアウトから外し、段の高さはテキスト側だけで決める。
   そうしないと次の2つが起きる。
   ・素材が縦長の段だけ極端に伸びる
     （test-sp-drop.jpg は 1000×1777 なので、他が420pxの中この段だけ986px）
   ・lightning-common.css の
     `.wp-block-image img:not([style*="object-fit"]){height:auto!important}`
     に負けて写真が min-height 止まりになり、テキストが420pxを超える段で
     写真の下に白い隙間が出る
   絶対配置の置換要素は height:auto だと固有高さを使ってしまうため、
   height は !important で 100% を指定する必要がある。 */
.wp-block-columns.sub1-section03-column > .wp-block-column { min-height: 420px; }
.wp-block-columns.sub1-section03-column figure.feat-img {
	margin: 0; height: 100%; position: relative;
}
.wp-block-columns.sub1-section03-column figure.feat-img img {
	position: absolute; inset: 0; width: 100%; height: 100% !important;
	object-fit: cover; display: block;
}
/* 縦長素材。中央で切ると「SP」の刻印が切れるので、刻印と水滴が入る位置にずらす。 */
.wp-block-columns.sub1-section03-column figure.feat-img img[src*="test-sp-drop"] {
	object-position: center 22%;
}

/* 写真のキャプション。試験体の写真は見た目が似ていて何の比較か分からないため、
   写真の下端に重ねて「何を写したものか」を出す。段の高さは変えない。
   （1段目の画像はラベルが焼き込まれているのでキャプションを持たせていない） */
.wp-block-columns.sub1-section03-column figure.feat-img figcaption.feat-cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	margin: 0; padding: 46px 24px 16px;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 62%);
	color: #fff; font-size: 1.3rem; line-height: 1.7; text-align: left;
}
@media screen and (max-width: 850px) {
	.wp-block-columns.sub1-section03-column figure.feat-img figcaption.feat-cap {
		padding: 36px 16px 12px; font-size: 1.2rem; line-height: 1.6;
	}
}
@media screen and (max-width: 850px) {
	.wp-block-columns.sub1-section03-column > .wp-block-column { min-height: 260px; }
}

/* --- 施工実績の画像 -----------------------------------------------------
   文字入りの資料画像なので、切り抜かずそのままの比率で表示する。 */
.wp-block-column.works-column-box figure.works-thumb img { width: 100%; height: auto; display: block; }

/* --- 仕様テーブル（sub1-section03-column2-box を流用）------------------- */
.wp-block-column.sub1-section03-column2-box table { width: 100%; }

/* --- 比較ボックス（本家 sub3-* を使用）の中の一覧 ---------------------- */
.wp-block-column.sub3-section02-column-box1 ul,
.wp-block-column.sub3-section02-column-box2 ul { margin: 0; padding-left: 1.2em; }
.wp-block-column.sub3-section02-column-box1 li,
.wp-block-column.sub3-section02-column-box2 li { margin-bottom: 0.4em; }

/* --- 出典・注記 -------------------------------------------------------- */
.amica-note { font-size: 1.3rem; color: #666; line-height: 1.9; }

/* --- ページトップへ -----------------------------------------------------
   本家の child-assets.css は `div#topcontrol{...;position:relative}` で
   見た目（緑の四角＋白い山形の ::before）だけを定義していて、
   fixed 配置は VK のプラグインが JS でインラインstyleとして当てている。
   こちらはそのJSを持ってこないので relative のままになり、
   フッターの下に 50px の箱が居座って余白になっていた。
   `div#topcontrol` と同等以上の詳細度で fixed に上書きする。
   見た目そのものは本家の div#topcontrol / ::before に任せる（画像は使わない）。 */
body.hydrosky-product div#topcontrol {
	position: fixed; right: 20px; bottom: 20px;
	cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.4s;
}
body.hydrosky-product div#topcontrol.is-visible { opacity: 1; visibility: visible; }
/* スマホは固定CTAバー（.sp_cv_fix・高さ70px）に重ならない位置へ */
@media screen and (max-width: 992px) { body.hydrosky-product div#topcontrol { bottom: 90px; } }