@charset "UTF-8";

/* =========================================================
   住宅分電盤 TOP ページ固有スタイル
   共通コンポーネント（.nav / .hero / .grid / .headline /
   .section-wrapper / .anchor / .breadcrumb / .title_block 等）は
   /ssiinc/v4/ssi_cssjs_utf8_2024.html の共通CSSに定義。
   本ファイルはページ固有の追加・上書きのみ。
========================================================= */

/* --- 汎用（flexiid 流用） --- */
.text-left {
	text-align: left;
}

/* --- hero --- */
.hero {
	margin-bottom: 40px;
}

/* --- lead --- */
.lead {
	line-height: 1.9;
}

/* --- 商品ラインアップ カード ---
   グリッドは共通 .grid ＋ flexiid 由来の grid--row2-border-pc / grid--row1-border-sp（下部に定義）。 */
.lineup__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #333;
	text-decoration: none;
}

.lineup__card .img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}

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

.lineup__card .headline--h3 {
	margin-bottom: 8px;
}

.lineup__card .headline--h3 .headline__title {
	font-weight: 700;
}

.lineup__card > p {
	margin-bottom: 25px;
}

/* 「詳しく見る」テキストリンクをカード最下部に揃える（説明文の有無に関わらず） */
.lineup__card > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}

/* --- サポートツール --- */
.support__banner {
	display: block;
	margin-bottom: 24px;
}

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

.support__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.support__item {
	width: 100%;
}

.support__item a {
	display: block;
}

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

/* --- 関連商品 ---
   グリッドは共通 .grid ＋ grid--row2-border-pc / grid--row1-border-sp（下部に定義）。 */
.relation__card {
	display: block;
	color: #333;
	text-decoration: none;
}

.relation__card .img {
	margin-bottom: 16px;
}

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

.relation__card .headline--h3 {
	margin-bottom: 8px;
}

.relation__text {
	font-size: 1.4rem;
	line-height: 1.7;
	color: #333;
}

/* --- お知らせ ---
   共通CSSの #newContents は PC で「日付(左120px)＋本文(右)」の横並び。
   本ページのみ日付を本文の上に積む縦並びへ上書きする。 */
#newContents dl {
	display: block;
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
	line-height: 1.75;
}

#newContents dt,
#newContents dd {
	width: 100%;
	padding: 0;
	border-bottom: none;
}

#newContents dt {
	margin-bottom: 4px;
}

/* --- hover --- */
@media (hover: hover) and (pointer: fine) {
	.relation__card:hover,
	.support__banner:hover,
	.support__item a:hover {
		opacity: 0.8;
		transition: opacity 0.3s;
	}
}

/* =========================================================
   PC（768px 以上）
========================================================= */
@media print, screen and (min-width: 48em) {

	.hero {
		margin-bottom: 60px;
	}

	/* 商品ラインアップ 2カラム＋区切り罫線（flexiid 流用） */
	.grid--row2-border-pc {
		justify-content: start;
		row-gap: 200px;
	}

	.grid--row2-border-pc > .grid__item {
		width: calc(100% / 2);
		padding: 0 100px;
		position: relative;
	}

	.grid--row2-border-pc > .grid__item:nth-of-type(odd)::after {
		width: 1px;
		height: 100%;
		content: '';
		background: #e6e6e6;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}

	.grid--row2-border-pc > .grid__item:only-child::after {
		display: none;
	}

	.grid--row2-border-pc > .grid__item:not(.no-border-bottom)::before {
		width: 100%;
		height: 1px;
		content: '';
		background: #e6e6e6;
		display: block;
		position: absolute;
		left: 0;
		bottom: -100px;
	}

	.support__item {
		width: calc((100% - 16px) / 2);
	}

}

/* =========================================================
   SP（767px 以下）
========================================================= */
@media screen and (max-width: 47.99em) {

	.grid--row1-border-sp {
		row-gap: 100px;
	}

	.grid--row1-border-sp > .grid__item {
		position: relative;
	}

	.grid--row1-border-sp > .grid__item:not(:last-of-type)::after {
		width: 100%;
		height: 1px;
		content: '';
		background: #e6e6e6;
		display: block;
		position: absolute;
		left: 0;
		bottom: -50px;
	}

}