/* ==============================================
   Layout
   ============================================== */
.un_tm5n .pk_inner {
	width: min(100% - 40px, 1244px);
}

.un_tm5n .pk_summary .pk_inner {
	width: min(100% - 40px, 961px);
}

.un_tm5n .tm5n_product .pk_inner {
	width: min(100% - 40px, 1366px);
}

/* ==============================================
   BG Wrap
   ============================================== */
.pk_bg_wrap .tm5n_product {
	background: transparent;
}

/* ==============================================
   FV
   ============================================== */
.tm5n_fv {
	background-image: url(/building-materials/pickup/tm5n/images/fv.webp);
}

/* ==============================================
   Summary
   ============================================== */
.tm5n_summary_ttl {
	font-size: 38px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-align: center;
}

/* ==============================================
   Product Intro
   ============================================== */
.tm5n_product {
	padding: 90px 0 20px;
}

.tm5n_product_inner {
	display: flex;
	align-items: center;
	gap: 6%;
}

.tm5n_product_img {
	width: 46%;
	flex-shrink: 0;
	margin: 0;
}

.tm5n_product_img img {
	width: 100%;
	display: block;
}

.tm5n_product_body {
	flex: 1;
}

.tm5n_product_label {
	font-size: 46px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #000;
	margin-bottom: 40px;
}

.tm5n_product_ttl {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.65;
	color: #000;
	margin-bottom: 26px;
}

.tm5n_product_txt {
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 2;
	color: #000;
	margin-bottom: 40px;
}

.tm5n_product_photo {
	margin: 130px auto 0;
	max-width: 1200px;
}

.tm5n_product_photo img {
	width: 100%;
	display: block;
}

/* ==============================================
   Section 共通パーツ
   ============================================== */
.tm5n_lead {
	max-width: 961px;
	margin: 0 auto;
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 2.05;
	color: #000;
}

.tm5n_statement {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.73;
	text-align: center;
	padding-top: 56px;
}

.tm5n_note_box {
	background: #f4f4f4;
	padding: 46px 48px;
	margin-top: 60px;
}

.tm5n_note_box p {
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 2.05;
	color: #000;
}

/* ==============================================
   Section 1: 軒ゼロ住宅が広がる背景
   ============================================== */
/* 画像内の円グラフは左寄りのため、円の中心を中央に合わせて右へずらす。
   右側の文言が枠からはみ出さないよう、狭い幅では縮める */
.tm5n_graph {
	max-width: min(757px, (50vw - 40px) * 1.415);
	margin: 62px auto 0;
	transform: translateX(20.67%);
}

.tm5n_graph img {
	width: 100%;
	display: block;
}

.tm5n_graph_note {
	margin-top: 70px;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.8;
	text-align: center;
	color: #444;
}

.tm5n_graph_source {
	margin-top: 50px;
	text-align: center;
}

.tm5n_graph_source img {
	display: inline-block;
	width: 190px;
	height: auto;
}

.tm5n_graph_credit {
	margin-top: 14px;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: #999;
}

.tm5n_bg_panel {
	width: min(100% - 40px, 1244px);
	margin: 128px auto 0;
	background: #f4f4f4;
	padding: 67px 60px 80px;
}

.tm5n_bg_panel_ttl {
	width: 416px;
	max-width: 100%;
	height: 67px;
	margin: 0 auto 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border: 1px solid #282828;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tm5n_bg_list {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8%;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tm5n_bg_item {
	width: 23%;
}

.tm5n_bg_item figure {
	margin: 0;
}

.tm5n_bg_item img {
	width: auto;
	max-width: 100%;
	height: 200px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.tm5n_bg_item figcaption {
	margin-top: 30px;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ==============================================
   Section 2: 防水・換気・防火への対策
   ============================================== */
.tm5n_measures {
	width: min(100% - 40px, 1244px);
	margin: 0 auto;
}

.tm5n_measures img {
	width: 100%;
	display: block;
}

.un_tm5n .pk_feature .tm5n_note_box,
.un_tm5n .pk_feature .tm5n_statement {
	width: min(100% - 40px, 1244px);
	margin-left: auto;
	margin-right: auto;
}

/* ==============================================
   Section 3: 独自の止水フラップ
   ============================================== */
.tm5n_flap_hero {
	max-width: 924px;
	margin: 56px auto 0;
}

.tm5n_flap_hero img {
	width: 100%;
	display: block;
}

.tm5n_flap_cols {
	max-width: 1190px;
	margin: 60px auto 0;
	display: flex;
	gap: 110px;
}

.tm5n_flap_col {
	flex: 1;
	min-width: 0;
}

.tm5n_flap_label {
	width: 245px;
	max-width: 100%;
	height: 58px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #282828;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tm5n_flap_label--storm {
	border-color: #a72126;
	color: #a72126;
}

.tm5n_flap_fig {
	margin: 34px 0 0;
}

.tm5n_flap_fig img {
	width: 100%;
	display: block;
}

.tm5n_spec {
	position: relative;
	margin-top: 46px;
	border: 1px solid #282828;
	padding: 48px 20px 34px;
	text-align: center;
}

.tm5n_spec_label {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 210px;
	padding: 12px 20px;
	background: #fff;
	border: 1px solid #282828;
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1;
}

.tm5n_spec_value {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #a72126;
}

.tm5n_spec_value sup {
	font-size: 0.62em;
	vertical-align: super;
}

.tm5n_spec_desc {
	margin-top: 14px;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/* ==============================================
   Section 4: 防水性能を検証済
   ============================================== */
.tm5n_steps {
	max-width: 1104px;
	margin: 66px auto 0;
	list-style: none;
	padding: 0;
}

.tm5n_step {
	display: flex;
	align-items: center;
	gap: 73px;
	margin-bottom: 60px;
}

.tm5n_step:last-child {
	margin-bottom: 0;
}

.tm5n_step_img {
	width: 533px;
	max-width: 50%;
	flex-shrink: 0;
	margin: 0;
}

.tm5n_step_img img {
	width: 100%;
	display: block;
}

.tm5n_step_body {
	flex: 1;
	min-width: 0;
}

.tm5n_step_num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 106px;
	height: 38px;
	padding: 0 18px;
	border-radius: 100px;
	background: #a72126;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tm5n_step_ttl {
	margin-top: 30px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tm5n_step_list {
	margin-top: 26px;
	list-style: none;
	padding: 0;
}

.tm5n_step_list li {
	position: relative;
	padding-left: 1em;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 2;
}

.tm5n_step_list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

/* ==============================================
   Section 5: 破風の有無と防火仕様
   ============================================== */
.tm5n_shape {
	display: flex;
	align-items: center;
	gap: 97px;
	margin-top: 56px;
}

.tm5n_shape_img {
	width: 637px;
	max-width: 52%;
	flex-shrink: 0;
	margin: 0;
}

.tm5n_shape_img img {
	width: 100%;
	display: block;
}

.tm5n_shape_body {
	flex: 1;
	min-width: 0;
}

.tm5n_shape_body p {
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 2;
	text-align: justify;
}

.tm5n_mount {
	max-width: 1202px;
	margin: 0 auto;
	display: flex;
	gap: 71px;
}

.tm5n_mount_item {
	flex: 1;
	min-width: 0;
}

.tm5n_mount_label {
	width: 216px;
	max-width: 100%;
	height: 48px;
	margin: 0 auto 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #282828;
	font-size: 17px;
	letter-spacing: 0.04em;
}

.tm5n_mount_fig {
	position: relative;
	margin: 0;
}

.tm5n_mount_fig img {
	width: 100%;
	display: block;
}

.tm5n_table_wrap {
	max-width: 1080px;
	margin: 0 auto;
	overflow-x: auto;
}

.tm5n_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tm5n_table th,
.tm5n_table td {
	border: 1px solid #282828;
	padding: 10px;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
}

.tm5n_table thead th {
	height: 73px;
	font-size: 19px;
	letter-spacing: 0.04em;
}

/* table-layout: fixed では先頭行が列幅を決めるので thead 側に持たせる */
.tm5n_table thead th:nth-child(1) {
	width: 21.6%;
}

.tm5n_table thead th:nth-child(2),
.tm5n_table thead th:nth-child(3) {
	width: 39.2%;
}

.tm5n_table tbody th {
	height: 90px;
	padding-left: 40px;
	font-size: 19px;
	letter-spacing: 0.04em;
	text-align: left;
}

.tm5n_table_product {
	padding: 18px 10px;
}

.tm5n_table_name {
	display: block;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.tm5n_table_name--tm5n {
	color: #002062;
}

.tm5n_table_name--tm5nj {
	color: #fe0d02;
}

.tm5n_table_sub {
	display: block;
	font-size: 16px;
	letter-spacing: 0.04em;
}

.tm5n_table_none {
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		#282828 50%,
		transparent calc(50% + 1px)
	);
}

.tm5n_btn_wrap {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.tm5n_btn_wrap .pk_btn {
	margin-left: 0;
}

/* ==============================================
   Report
   ============================================== */
.tm5n_report {
	background: #ebebeb;
	padding: 60px 0 70px;
}

.tm5n_report_inner {
	width: fit-content;
	max-width: min(100% - 40px, 1366px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 190px auto;
	column-gap: 153px;
	align-items: start;
}

.tm5n_report_cover {
	grid-row: 1 / 3;
	width: 190px;
	margin: 0;
}

.tm5n_report_cover img {
	width: 100%;
	display: block;
}

.tm5n_report_body {
	grid-column: 2;
	min-width: 0;
}

.tm5n_report_label {
	font-size: 16px;
	letter-spacing: 0.04em;
	color: #858585;
}

.tm5n_report_desc {
	margin-top: 14px;
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.tm5n_report_ttl {
	margin-top: 26px;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tm5n_report_btn {
	grid-column: 2;
	justify-self: start;
	width: 441px;
	max-width: 100%;
	margin-top: 34px;
	margin-left: 0;
}

/* ==============================================
   拡大モーダル
   ============================================== */
.pk_zoom {
	position: relative;
	cursor: pointer;
}

.pk_zoom_icon {
	position: absolute;
	right: 30px;
	bottom: 28px;
	width: 34px;
	height: 34px;
	pointer-events: none;
	background: url(/images/building-materials/product/common/icon-zoom.png)
		center center / contain no-repeat;
}

.pk_zoom_overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.pk_zoom_overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.pk_zoom_modal {
	position: relative;
	background: #fff;
	max-width: 90vw;
	max-height: 90vh;
	overflow: hidden;
}

.pk_zoom_modal_close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
	color: #282828;
	cursor: pointer;
	z-index: 1;
}

.pk_zoom_modal_close:hover {
	opacity: 0.7;
}

.pk_zoom_modal_body {
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pk_zoom_modal_img {
	display: block;
	max-width: 100%;
	max-height: calc(90vh - 60px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==============================================
   Utility
   ============================================== */
.tm5n_vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==============================================
   SP Responsive (max-width: 768px)
   ============================================== */
@media screen and (max-width: 768px) {
	.un_tm5n .pk_inner,
	.un_tm5n .pk_summary .pk_inner,
	.un_tm5n .tm5n_product .pk_inner {
		width: 100%;
		padding: 0 20px;
	}

	.un_tm5n .pk_summary {
		padding: 53px 0 72px;
	}

	.un_tm5n .pk_feature {
		padding: 80px 0 60px;
		margin-bottom: 72px;
	}

	.un_tm5n .pk_features_wrap {
		padding: 60px 0 60px;
	}

	/* FV */
	.tm5n_fv {
		background-image: url(/building-materials/pickup/tm5n/images/fv_sp.webp);
	}

	/* Summary */
	.tm5n_summary_ttl {
		font-size: 22px;
		line-height: 1.5;
	}

	/* Product intro */
	.tm5n_product {
		padding: 58px 0 0;
	}

	.tm5n_product_inner {
		flex-direction: column;
		gap: 0;
	}

	.tm5n_product_img {
		width: 86%;
		margin: 0 auto 36px;
	}

	.tm5n_product_body {
		width: 100%;
	}

	.tm5n_product_label {
		font-size: 22px;
		text-align: center;
		margin-bottom: 22px;
	}

	.tm5n_product_ttl {
		font-size: 18px;
		line-height: 1.7;
		margin-bottom: 18px;
	}

	.tm5n_product_txt {
		font-size: 14px;
		line-height: 1.8;
		margin-bottom: 43px;
	}

	.tm5n_product_photo {
		margin-top: 76px;
	}

	/* Section 共通 */
	.tm5n_lead {
		font-size: 16px;
		line-height: 2;
	}

	.tm5n_statement {
		font-size: 18px;
		line-height: 1.85;
		padding-top: 24px;
	}

	.tm5n_note_box {
		padding: 28px 20px;
		margin-top: 34px;
	}

	.tm5n_note_box p {
		font-size: 16px;
		line-height: 2;
	}

	.un_tm5n .pk_feature .tm5n_note_box {
		width: calc(100% - 40px);
	}

	/* 18字の行（約337px）を360px幅で折り返さないよう、左右の余白を10pxまで詰める */
	.un_tm5n .pk_feature .tm5n_statement {
		width: calc(100% - 20px);
	}

	.un_tm5n .pk_feature .pk_inner .tm5n_statement {
		width: auto;
		margin-left: -10px;
		margin-right: -10px;
	}

	/* Section 1 */
	.tm5n_graph {
		margin-top: 34px;
		max-width: 271px;
		transform: none;
	}

	.tm5n_graph_note {
		margin-top: 40px;
		font-size: 14px;
		text-align: left;
	}

	.tm5n_graph_source {
		margin-top: 30px;
	}

	.tm5n_graph_source img {
		width: 140px;
	}

	.tm5n_graph_credit {
		font-size: 13px;
		text-align: center;
		margin-top: 30px;
		line-height: 1.7;
	}

	.tm5n_bg_panel {
		width: calc(100% - 36px);
		margin-top: 60px;
		padding: 56px 34px 50px;
	}

	.tm5n_bg_panel_ttl {
		width: 100%;
		height: 69px;
		margin-bottom: 46px;
		font-size: 16px;
	}

	.tm5n_bg_list {
		flex-direction: column;
		align-items: center;
		gap: 85px;
	}

	.tm5n_bg_item {
		width: 100%;
	}

	.tm5n_bg_item img {
		height: 302px;
	}

	.tm5n_bg_item figcaption {
		margin-top: 28px;
		font-size: 18px;
		line-height: 1.5;
	}

	/* Section 2 */
	.tm5n_measures {
		width: calc(100% - 40px);
	}

	/* Section 3 */
	.tm5n_flap_hero {
		margin-top: 30px;
	}

	.tm5n_flap_cols {
		flex-direction: column;
		gap: 47px;
		margin-top: 44px;
	}

	.tm5n_flap_label {
		width: 198px;
		height: 62px;
		font-size: 18px;
	}

	.tm5n_flap_fig {
		margin-top: 27px;
	}

	.tm5n_spec {
		margin-top: 56px;
		padding: 32px 16px 20px;
	}

	.tm5n_spec_label {
		min-width: 145px;
		padding: 13px 20px;
		font-size: 16px;
	}

	.tm5n_spec_value {
		font-size: 26px;
	}

	.tm5n_spec_desc {
		margin-top: 17px;
		font-size: 16px;
	}

	/* Section 4 */
	.tm5n_steps {
		margin-top: 44px;
	}

	.tm5n_step {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 20px;
		margin-bottom: 50px;
	}

	.tm5n_step_img {
		width: calc(100% + 10px);
		max-width: none;
		margin: 0 -5px;
	}

	.tm5n_step_num {
		display: flex;
		width: 128px;
		height: 43px;
		margin: 0 auto;
		font-size: 16px;
	}

	.tm5n_step_ttl {
		margin-top: 33px;
		font-size: 18px;
	}

	.tm5n_step_list {
		margin-top: 16px;
	}

	.tm5n_step_list li {
		font-size: 16px;
		line-height: 2;
	}

	/* Section 5 */
	.tm5n_shape {
		flex-direction: column;
		gap: 56px;
		margin-top: 34px;
	}

	.tm5n_shape_img {
		width: 100%;
		max-width: none;
	}

	.tm5n_shape_body p {
		font-size: 16px;
		line-height: 2;
	}

	.tm5n_mount {
		flex-direction: column;
		gap: 50px;
		margin-top: 44px;
	}

	.tm5n_mount_label {
		width: 198px;
		height: 62px;
		margin-bottom: 30px;
		font-size: 18px;
	}

	.tm5n_table_wrap {
		margin: 36px 3px 0;
	}

	.tm5n_table thead th {
		height: 46px;
		font-size: 16px;
	}

	.tm5n_table thead th:nth-child(1) {
		width: 46px;
	}

	.tm5n_table thead th:nth-child(2),
	.tm5n_table thead th:nth-child(3) {
		width: auto;
	}

	.tm5n_table tbody th {
		height: 140px;
		padding: 0;
		font-size: 16px;
		text-align: center;
	}

	.tm5n_table tbody tr:last-child th {
		height: 124px;
	}

	/* 1字ずつ折り返して縦に並べる幅（漢字1字16.64pxは入り2字は入らない。数字2桁19.05pxは1行に入る）。
	   text-combine-upright はブラウザにより数字の位置がずれるため使わない */
	.tm5n_table_rowhead {
		display: block;
		width: 24px;
		margin: 0 auto;
		line-height: 1;
	}

	/* 「TM5N-J」（22pxで約131px）を360px幅で1行に収めるため、左右の余白を0にする */
	.tm5n_table .tm5n_table_product {
		padding-left: 0;
		padding-right: 0;
	}

	.tm5n_table_name {
		font-size: 22px;
	}

	.tm5n_table_sub {
		font-size: 12px;
	}

	.tm5n_btn_wrap {
		margin-top: 40px;
	}

	/* Report */
	.tm5n_report {
		padding: 40px 0 44px;
	}

	.tm5n_report_inner {
		width: 100%;
		max-width: none;
		padding: 0 20px;
		grid-template-columns: 1fr;
		row-gap: 24px;
		justify-items: center;
	}

	.tm5n_report_cover {
		grid-row: auto;
		order: 2;
		width: 100%;
		max-width: 320px;
	}

	.tm5n_report_body {
		grid-column: auto;
		order: 1;
		width: 100%;
		text-align: center;
	}

	.tm5n_report_label {
		font-size: 14px;
	}

	/* 2行目（約321px）を内容幅320pxで折り返さないよう、左右へ少しはみ出させる */
	.tm5n_report_desc {
		margin: 10px -4px 0;
		font-size: 15px;
	}

	.tm5n_report_ttl {
		margin-top: 18px;
		font-size: 22px;
		line-height: 1.5;
	}

	.tm5n_report_btn {
		grid-column: auto;
		justify-self: stretch;
		order: 3;
		width: 100%;
		margin-top: 0;
	}

	/* 拡大アイコン */
	.pk_zoom_icon {
		right: 12px;
		bottom: 12px;
		width: 24px;
		height: 24px;
	}
}