@charset "UTF-8";
/* CSS Document */

/*==============================
コンテンツ設定
==============================*/

/*ページビジュアル*/
#pageVisual{
	background: url(../img/ordermade/bg_main.webp) no-repeat center center / cover;
}

/*ページビジュアル  見出し英語*/
#pageVisual .pageNav h2::after{
	content: "ORDER MADE HOUSE";
}

/*サブビジュアル*/
.subVisual{
	display: flex;
	align-items: center;
	width: 100%;
	aspect-ratio: 2.8 / 1;
	background: url(../img/ordermade/bg_sub_visual.webp) center center / cover;
}

/*サブビジュアル 見出し*/
.subVisual h2{
	margin: 0 auto;
	width: calc(100% - 200px);
	color: #fff;
	font-size: 2.6rem;
	line-height: 1.8;
}

/*------------------------------
共通設定
------------------------------*/

/*section共通リセット*/
section{
	padding: 0;
}

section > .inner{
	padding: 150px 0;
}

/*共通flexbox*/
.flexBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

/*共通見出し*/
h3{
	font-size: 2.6rem;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

/*共通テキスト*/
.txt{
	margin: 30px 0 0 0;
	font-size: 1.4rem;
	line-height: 2.1;
	text-align: justify;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*共通写真*/
img{
	object-fit: center;
	overflow: hidden;
}

/*共通ビジュアル*/
.visual{
	width: 100%;
	height: 500px;
	flex-direction: row-reverse;
	background: #333;
}

/*共通ビジュアル txtBox*/
.visual .txtBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 60px;
	width: 460px;
}

/*共通ビジュアル txtBox中身*/
.visual .txtBox .inner{
	width: 340px;
}

/*共通ビジュアル 見出し*/
.visual .txtBox h2{
	padding: 0 0 20px 0;
	color: #fff;
	font-size: 3.2rem;
	line-height: 1.6;
	text-align: left;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #fff;
}

/*共通ビジュアル 見出し 英語*/
.visual .txtBox h2::before{
	display: block;
	margin: 0 0 20px 0;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	text-align: left;
	letter-spacing: 0;
	font-family: outfit,sans-serif;
}

/*共通ビジュアル 小見出し*/
.visual .txtBox h3{
	margin: 40px 0 0 0;
	color: #fff;
	font-size: 2rem;
	line-height: 1.6;
	text-align: left;
}

/*共通ビジュアル 写真*/
.visual .photo{
	width: calc(100% - 460px);
	height: 100%;
	position: relative;
}

/*container*/
.container{
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/*container 偶数*/
.container .flexBox:nth-of-type(even){
	flex-direction: row-reverse;
}

/*container txtBox*/
.container .txtBox{
	padding: 0 60px 0 0;
	width: 52%;
}

/*container txtBox 偶数*/
.container .flexBox:nth-of-type(even) .txtBox{
	padding: 0 0 0 60px;
}

/*container txtBox 見出し*/
.container .txtBox h3{
	padding: 0 0 20px 0;
	font-size: 2.6rem;
	line-height: 1.6;
	border-bottom: 1px solid #333;
}

/*container txtBox 本文*/
.container .txtBox .txt{
	margin: 20px 0 0 0;
}

/*container txtBox 写真*/
.container .photo{
	width: 48%;
}

/*container txtBox 写真中身*/
.container .photo img{
	aspect-ratio: 1.3 / 1;
}

/*topic*/
.topic{
	margin: 70px 0 0 0;
}

/*topicビジュアル*/
.topicVisual{
	background: #4d4d4d;
}

/*topic texBox*/
.topicVisual .txtBox{
	width: 52%;
}

/*topic texBox中身*/
.topicVisual .txtBox .inner{
	width: 100%;
	padding: 0 60px;
}

/*topic 見出し*/
.topicVisual .txtBox h3{
	padding: 0 0 20px 0;
	color: #fff;
	font-size: 2.6rem;
	line-height: 1.6;
	border-bottom: 1px solid #fff;
}

/*topic 見出し 小さい文字*/
.topicVisual .txtBox h3 span{
	margin: 0 0 0 10px;
	font-size: 0.7em;
}

/*topic 本文*/
.topicVisual .txtBox .txt{
	margin: 20px 0 0 0;
	color: #fff;
}

/*topic 写真*/
.topicVisual .photo{
	width: 48%;
}

/*topic 内容*/
.topicBox{
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 60px;
	background: #f1f1f1;
}

/*topic 内容 奇数*/
.topicBox .flexBox:nth-of-type(odd){
	flex-direction: row-reverse;
}

/*topic txtBox,photo共通*/
.topicBox .txtBox,
.topicBox .photo{
	width: calc(50% - 20px);
}

/*topic 写真が2個ある場合*/
.topicBox .line2{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/*topic 見出し*/
.topicBox .txtBox h4{
	font-size: 2.6rem;
	line-height: 1.6;
	text-align: justify;
}

/*topic 見出し 小文字*/
.topicBox .txtBox h4 span{
	display: block;
	margin: 10px 0 0 0;
	font-size: 1.8rem;
}

/*topic 見出し 小文字*/
.topicBox .txtBox sub{
	font-size: 0.5em;
}

/*topic 本文*/
.topicBox .txtBox .txt{
	margin: 26px 0 0 0;
}

/*------------------------------
住宅性能設定
------------------------------*/

/*住宅性能全体*/
#performance{
	width: 100%;
	position: relative;
}

/*住宅性能 ナビゲーション*/
#performance nav{
	width: 100%;
	position: sticky;
	top: 0;/
	height: fit-content;/* 中身の高さに合わせる（重要） */
	align-self: flex-start;/* 親の高さに合わせて伸びるのを防ぐ */
	background: #FFF;
	z-index: 50;
	transition: box-shadow 0.3s ease;
}

/* 固定された時に付与するクラス */
#performance nav.is-sticky {
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

/*住宅性能 ナビゲーション中身*/
#performance nav ul{
	margin: 30px auto 0;
	width: 960px;
	height: 124px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

/*住宅性能 ナビゲーション リスト*/
#performance nav ul li{
	border-right: 1px solid #cbcbcb;
}

/*住宅性能 ナビゲーション リスト 最後*/
#performance nav ul li:last-of-type{
	border-right: none;
}

/*住宅性能 ナビゲーション リスト リンク*/
#performance nav ul li a{
	padding: 0 0 45px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
}

/*住宅性能 ナビゲーション リスト リンク 装飾*/
#performance nav ul li a::after{
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: url(../img/common/ico_circle_arrow.svg) center center / cover;
	position: absolute;
	bottom: 20px;
	transition: 0.15s ease;
}


/* ホバー */
@media (any-hover: hover) {

	/*住宅性能 ナビゲーション リスト リンク 装飾 ホバー*/
	#performance nav ul li a:hover{
		color: #808080;
		transition: 0.5s ease;
	}

	/*住宅性能 ナビゲーション リスト リンク 装飾 ホバー*/
	#performance nav ul li a:hover::after{
		transition: 0.5s ease;
		bottom: 13px;
	}
	
}

/*------------------------------
住まいのクオリティ設定
------------------------------*/

/*クオリティ全体*/
#quality{
	padding: 150px 0 0;
}

/*クオリティ中身*/
#quality > .inner{
	padding: 0;
	width: 960px;
	display: flex;
	flex-direction: column;
	gap: 125px 0;
}

/*クオリティ リスト 偶数*/
#quality .inner li:nth-of-type(even){
	flex-direction: row-reverse;
}

/*クオリティ txtBox*/
#quality .txtBox{
	width: 380px;
}

/*クオリティ 見出し*/
#quality .txtBox h3{
	font-size: 2rem;
	line-height: 1.7;
}

/*クオリティ 見出し 英語*/
#quality .txtBox h3::before{
	display: block;
	margin: 0 0 20px 0;
	font-size: 1.4rem;
	line-height: 1;
	font-family: outfit,sans-serif;
}

/*クオリティ 見出し 英語 1つ目*/
#quality li:first-of-type .txtBox h3::before{
	content: "HIGHT PERFORMANCE";
}

/*クオリティ 見出し 英語 2つ目*/
#quality li:nth-of-type(2) .txtBox h3::before{
	content: "LIFE CIRCLE COST";
}

/*クオリティ 写真*/
#quality .photo{
	width: 100%;
	max-width: 518px;
}

/*------------------------------
数値で見る住宅性能設定
------------------------------*/

/*数値で見る住宅性能中身*/
#specifications > .inner{
	width: 960px;
}

/*数値で見る住宅性能 見出し英語*/
#specifications h2:after{
	content: "SPECIFICATIONS";
}

/*数値で見る住宅性能 グリッド表*/
#specifications .spec-grid {
	margin: 60px 0 0 0;
	display: grid;
	/* 3列で均等配置 */
	grid-template-columns: repeat(3, 1fr);
	gap: 1px; /* 罫線を作るための隙間 */
	background: #cbcbcb; /* 罫線の色 */
}

/*数値で見る住宅性能 dl*/
#specifications .spec-grid dl {
	padding: 40px 0;
	color: #fff;
	text-align: center;
	background: #333;
}

/*数値で見る住宅性能 性能名*/
#specifications .spec-grid dt {
	margin: 0 auto;
	font-size: 1.6rem;
	line-height: 1;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*数値で見る住宅性能 性能名 背景*/
#specifications .spec-grid dt span {
	display: inline-block;
	padding: 5px 0;
	width: 130px;
	background: #989898;
}

/*数値で見る住宅性能 性能名 英語*/
#specifications .spec-grid dt::before {
	display: block;
	margin: 0 0 10px 0;
	font-size: 1.2rem;
	line-height: 1;
	font-family: outfit,sans-serif;
}

/*数値で見る住宅性能 性能名 英語 1つ目*/
#specifications .spec-grid dl:first-of-type dt::before {
	content: "SEISMIC";
}

/*数値で見る住宅性能 性能名 英語 2つ目*/
#specifications .spec-grid dl:nth-of-type(2) dt::before {
	content: "INSULATION";
}

/*数値で見る住宅性能 性能名 英語 3つ目*/
#specifications .spec-grid dl:nth-of-type(3) dt::before {
	content: "AIRTIGHTNESS";
}

/*数値で見る住宅性能 性能名 英語 4つ目*/
#specifications .spec-grid dl:nth-of-type(4) dt::before {
	content: "DEGRADATION CONTROL";
}

/*数値で見る住宅性能 性能名 英語 5つ目*/
#specifications .spec-grid dl:nth-of-type(5) dt::before {
	content: "OUTER WALL";
}

/*数値で見る住宅性能 性能名 英語 6つ目*/
#specifications .spec-grid dl:nth-of-type(6) dt::before {
	content: "ENERGY GENERATION";
}

/*数値で見る住宅性能 性能名 英語 7つ目*/
#specifications .spec-grid dl:nth-of-type(7) dt::before {
	content: "THERMAL PERFORMANCE";
}

/*数値で見る住宅性能 性能名 英語 8つ目*/
#specifications .spec-grid dl:nth-of-type(8) dt::before {
	content: "FIRE RESISTANCE";
}

/*数値で見る住宅性能 性能名 英語 9つ目*/
#specifications .spec-grid dl:nth-of-type(9) dt::before {
	content: "GUARANTEE";
}

/*数値で見る住宅性能 説明*/
.spec-grid dd {
	margin: 10px 0 0 0;
	font-size: 2.6rem;
	line-height: 1;
}

/*数値で見る住宅性能 説明 単位*/
.spec-grid dd span {
	font-size: 1.8rem;
}

/*------------------------------
耐久性・耐震性設定
------------------------------*/

/*耐久性・耐震性中身*/
#safety > .inner{
	padding: 150px 0;
}

/*耐久性・耐震性 タイトル英語*/
#safety .visual h2::before{
	content: "SAFETY";
}

/*耐久性・耐震性 タイトル写真*/
#safety .visual .photo{
	background: url(../img/ordermade/bg_safety.webp) center center / cover;
}

/*耐久性・耐震性 タイトル アイコン*/
#safety .visual .photo .ico{
	width: 160px;
	position: absolute;
	left: 20px;
	bottom: 25px;
}

/*sdgs*/
#safety .sdgs{
	position: relative;
}

/*sdgs アイコン*/
#safety .sdgs::after{
	content: "";
	display: block;
	width: 90px;
	aspect-ratio: 1.875 / 1;
	background: url(../img/ordermade/ico_sdgs.svg) center center / cover;
	position: absolute;
	right: 0;
	bottom: 10px;
}

/*------------------------------
高気密・高断熱設定
------------------------------*/

/*高気密・高断熱中身*/
#comfort > .inner{
	padding: 150px 0;
}

/*耐久性・耐震性 タイトル英語*/
#comfort .visual h2::before{
	content: "COMFORT";
}

/*耐久性・耐震性 タイトル写真*/
#comfort .visual .photo{
	background: url(../img/ordermade/bg_comfort.webp) center center / cover;
}

/*耐久性・耐震性 タイトル アイコン*/
#comfort .visual .ico{
	width: 550px;
	position: absolute;
	right: 0;
	bottom: 25px;
}

/*耐久性・耐震性 タイトル アイコン*/
#comfort .visual .ico ul{
	margin: 0 20px 20px auto;
	width: 340px;
}

/*耐久性・耐震性 タイトル アイコン*/
#comfort .visual .ico li{
	width: 160px;

}
/*耐久性・耐震性 タイトル アイコン*/
#comfort .visual .ico p{
	padding: 0 45px 0 0;
	font-size: 1.2rem;
	line-height: 1.6;
	text-align: right;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	background: #fff;
}

/*------------------------------
省エネ性能設定
------------------------------*/

/*省エネ性能中身*/
#eco > .inner{
	padding: 150px 0;
}

/*省エネ性能 タイトル英語*/
#eco .visual h2::before{
	content: "ECO";
}

/*省エネ性能 タイトル写真*/
#eco .visual .photo{
	background: url(../img/ordermade/bg_eco.webp) center center / cover;
}

/*------------------------------
保証とアフターサービス設定
------------------------------*/

/*保証とアフターサービス中身*/
#afterservice > .inner{
	padding: 150px 0;
}

/*保証とアフターサービス タイトル英語*/
#afterservice .visual h2::before{
	content: "AFTER SERVICE";
}

/*保証とアフターサービス タイトル写真*/
#afterservice .visual .photo{
	background: url(../img/ordermade/bg_afterservice.webp) center center / cover;
}

/*保証 flexBox*/
.building > .flexBox{
	align-items: start;
}

/*保証 txtBox*/
.building .txtBox{
	width: 35%;
}

/*保証 見出し*/
.building .txtBox h3{
	padding: 0 0 15px 0;
	font-size: 2.6rem;
	line-height: 1.6;
	border-bottom: 1px solid #333;
}

/*保証 小見出し*/
.building .txtBox h4{
	margin: 55px 0 0 0;
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

/*保証 注釈*/
.building .txtBox .txt span{
	display: block;
}

/*保証期間*/
.building .txtBox dl{
	margin: 60px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
	gap: 30px 0;
}

/*保証期間 dt*/
.building .txtBox dt{
	padding: 10px 0;
	width: 100px;
	font-size: 1.8rem;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	border-right: 1px solid #333;
}

/*保証期間 dd*/
.building .txtBox dd{
	padding: 10px 0 10px 30px;
	width: calc(100% - 100px);
	font-size: 1.8rem;
	line-height: 1.4;
}

/*保証期間 dd 強調*/
.building .txtBox dd em{
	display: block;
	font-size: 2.4rem;
	font-style: normal;
}

/*保証期間 リスト*/
.building .txtBox dd ul li{
	font-size: 1.6rem;
	padding-left: 1em;    /* 全体を右に寄せる */
	text-indent: -1em;   /* 1行目だけ左に戻す */
}

/*保証期間 リスト 装飾*/
.building .txtBox dd ul li::before{
	content: "・";
}

/*保証期間 photoBox*/
.building .photoBox{
	width: 52%;
}

/*保証期間 photoBox ul*/
.building .photoBox ul{
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/*保証対象機器*/
.building .item{
	margin: 80px 0 150px;
	padding: 30px 60px;
	width: 100%;
	background: #f1f1f1;
}

/*保証対象機器 見出し*/
.building .item h4{
	font-size: 2rem;
	line-height: 1;
	text-align: center;
}

/*保証対象機器 flexBox*/
.building .item .flexBox{
	margin: 35px 0 0 0;
	align-items: start;
}

/*保証対象機器 リスト*/
.building .item .flexBox > li{
	width: calc(100% / 5 - 20px);
}

/*保証対象機器 機器ジャンル*/
.building .item dt{
	padding: 0 0 5px 0;
	font-size: 1.6rem;
	text-align: center;
	border-bottom: 1px solid #333;
}

/*保証対象機器 機器名*/
.building .item dd{
	margin: 15px 0 0 0;
}

/*保証対象機器 機器リスト*/
.building .item dd li{
	font-size: 1.4rem;
	line-height: 1.6;
	text-align: justify;
	padding-left: 1em;    /* 全体を右に寄せる */
	text-indent: -1em;   /* 1行目だけ左に戻す */
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*保証対象機器 機器リスト 装飾*/
.building .item dd li::before{
	content: "・";
}

/*保証対象機器 注釈*/
.building .item p{
	margin: 30px 0 0 0;
	font-size: 1.4rem;
	line-height: 1.6;
	text-align: center;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*------------------------------
リンク設定
------------------------------*/

/*リンク中身*/
#link .inner {
	padding: 0 0 150px;
}

/*リンク 見出し　英語*/
#link h2::after{
	content: "RELATED RESERVATION";
}

/*保証対象機器 バナー*/
#link .bnr{
	margin: 60px auto 0;
	width: 620px;
}


/*1100px以下の場合*/
@media screen and (max-width:1100px){

	/*------------------------------
	共通設定
	------------------------------*/

	section > .inner{
		padding: 120px 0;
	}

	/*共通見出し*/
	h3{
		font-size: 2rem;
	}

	/*共通テキスト*/
	.txt{
		margin: 20px 0 0 0;
		line-height: 2;
	}

	/*共通ビジュアル*/
	.visual{
		height: 400px;
	}

	/*共通ビジュアル txtBox*/
	.visual .txtBox{
		padding: 0 40px;
		width: 35%;
	}

	/*共通ビジュアル txtBox中身*/
	.visual .txtBox .inner{
		width: 100%;
	}

	/*共通ビジュアル 見出し*/
	.visual .txtBox h2{
		padding: 0 0 15px 0;
		font-size: 2.8rem;
	}

	/*共通ビジュアル 見出し 英語*/
	.visual .txtBox h2::before{
		margin: 0 0 10px 0;
		font-size: 1.2rem;
	}

	/*共通ビジュアル 小見出し*/
	.visual .txtBox h3{
		margin: 30px 0 0 0;
		font-size: 1.8rem;
	}

	/*共通ビジュアル 写真*/
	.visual .photo{
		width: 65%;
	}

	/*container*/
	.container{
		gap: 60px;
	}

	/*container txtBox*/
	.container .txtBox{
		padding: 0 40px 0 0;
		width: 50%;
	}

	/*container txtBox 偶数*/
	.container .flexBox:nth-of-type(even) .txtBox{
		padding: 0 0 0 40px;
	}

	/*container txtBox 見出し*/
	.container .txtBox h3{
		padding: 0 0 15px 0;
		font-size: 2.2rem;
	}

	/*container txtBox 本文*/
	.container .txtBox .txt{
		margin: 15px 0 0 0;
	}

	/*container txtBox 写真*/
	.container .photo{
		width: 50%;
	}

	/*topic*/
	.topic{
		margin: 60px 0 0 0;
	}

	/*topic texBox*/
	.topicVisual .txtBox{
		width: 50%;
	}

	/*topic texBox中身*/
	.topicVisual .txtBox .inner{
		padding: 0 40px;
	}

	/*topic 見出し*/
	.topicVisual .txtBox h3{
		padding: 0 0 15px 0;
		color: #fff;
		font-size: 2.2rem;
	}

	/*topic 本文*/
	.topicVisual .txtBox .txt{
		margin: 15px 0 0 0;
	}

	/*topic 写真*/
	.topicVisual .photo{
		width: 50%;
	}

	/*topic 内容*/
	.topicBox{
		gap: 50px;
		padding: 40px;
	}

	/*topic 写真が2個ある場合*/
	.topicBox .line2{
		gap: 30px;
	}

	/*topic 見出し*/
	.topicBox .txtBox h4{
		font-size: 2.2rem;
	}

	/*topic 見出し 小文字*/
	.topicBox .txtBox h4 span{
		margin: 5px 0 0 0;
		font-size: 1.6rem;
	}

	/*topic 本文*/
	.topicBox .txtBox .txt{
		margin: 15px 0 0 0;
	}

	/*------------------------------
	住宅性能設定
	------------------------------*/
			
	/*サブビジュアル 見出し*/
	.subVisual h2{
		width: calc(100% - 150px);
		font-size: 2.4rem;
	}

	/*住宅性能 ナビゲーション中身*/
	#performance nav ul{
		margin: 20px auto 0;
		width: calc(100% - 80px);
		height: 100px;
	}

	/*住宅性能 ナビゲーション リスト リンク*/
	#performance nav ul li a{
		padding: 0 0 35px 0;
		font-size: 1.8rem;
	}

	/*住宅性能 ナビゲーション リスト リンク 装飾*/
	#performance nav ul li a::after{
		width: 20px;
		height: 20px;
		bottom: 15px;
	}

	/*------------------------------
	住まいのクオリティ設定
	------------------------------*/

	/*クオリティ全体*/
	#quality{
		padding: 60px 0 0;
	}

	/*クオリティ中身*/
	#quality > .inner{
		width: calc(100% - 80px);
		gap: 60px 0;
	}

	/*クオリティ txtBox*/
	#quality .txtBox{
		width: calc(50% - 20px);
	}

	/*クオリティ 見出し 英語*/
	#quality .txtBox h3::before{
		margin: 0 0 10px 0;
		font-size: 1.2rem;
	}

	/*クオリティ 写真*/
	#quality .photo{
		width: calc(50% - 20px);
	}

	/*------------------------------
	数値で見る住宅性能設定
	------------------------------*/

	/*数値で見る住宅性能中身*/
	#specifications > .inner{
		width: calc(100% - 80px);
	}

	/*数値で見る住宅性能 グリッド表*/
	#specifications .spec-grid {
		margin: 40px 0 0 0;
	}

	/*数値で見る住宅性能 dl*/
	#specifications .spec-grid dl {
		padding: 30px 0;
	}

	/*数値で見る住宅性能 性能名*/
	#specifications .spec-grid dt {
		font-size: 1.4rem;
	}

	/*数値で見る住宅性能 性能名 背景*/
	#specifications .spec-grid dt span {
		padding: 3px 0;
		width: 120px;
	}

	/*数値で見る住宅性能 説明*/
	.spec-grid dd {
		font-size: 2rem;
	}

	/*数値で見る住宅性能 説明 単位*/
	.spec-grid dd span {
		font-size: 1.4rem;
	}

	/*------------------------------
	耐久性・耐震性設定
	------------------------------*/

	/*耐久性・耐震性中身*/
	#safety > .inner{
		padding: 60px 0 120px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#safety .visual .photo .ico{
		width: 120px;
		left: 20px;
		bottom: 20px;
	}

	/*sdgs アイコン*/
	#safety .sdgs::after{
		width: 80px;
	}

	/*------------------------------
	高気密・高断熱設定
	------------------------------*/

	/*高気密・高断熱中身*/
	#comfort > .inner{
		padding: 60px 0 120px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico{
		width: 340px;
		right: 20px;
		bottom: 10px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico ul{
		margin: 0 0 10px 0;
		width: 340px;
		justify-content: right;
		gap: 10px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico li{
		width: 120px;

	}
	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico p{
		margin: 0 -20px 0 0;
		padding: 0 10px;
	}

	/*------------------------------
	省エネ性能設定
	------------------------------*/

	/*省エネ性能中身*/
	#eco > .inner{
		padding: 60px 0 120px;
	}

	/*------------------------------
	保証とアフターサービス設定
	------------------------------*/

	/*保証とアフターサービス中身*/
	#afterservice > .inner{
		padding: 60px 0 120px;
	}

	/*保証 txtBox*/
	.building .txtBox{
		width: 45%;
	}

	/*保証 見出し*/
	.building .txtBox h3{
		padding: 0 0 10px 0;
		font-size: 2.2rem;
	}

	/*保証 小見出し*/
	.building .txtBox h4{
		margin: 40px 0 0 0;
		font-size: 1.6rem;
	}

	/*保証期間*/
	.building .txtBox dl{
		margin: 30px 0 0 0;
		gap: 10px 0;
	}

	/*保証期間 dt*/
	.building .txtBox dt{
		width: 85px;
		font-size: 1.6rem;
	}

	/*保証期間 dd*/
	.building .txtBox dd{
		padding: 10px 0 10px 20px;
		width: calc(100% - 85px);
		font-size: 1.6rem;
	}

	/*保証期間 dd 強調*/
	.building .txtBox dd em{
		font-size: 2.2rem;
	}

	/*保証期間 リスト*/
	.building .txtBox dd ul li{
		font-size: 1.4rem;
	}

	/*保証期間 photoBox*/
	.building .photoBox{
		width: 50%;
	}

	/*保証期間 photoBox ul*/
	.building .photoBox ul{
		gap: 60px;
	}

	/*保証対象機器*/
	.building .item{
		margin: 40px 0 60px;
		padding: 20px 40px;
	}

	/*保証対象機器 見出し*/
	.building .item h4{
		font-size: 1.8rem;
	}

	/*保証対象機器 flexBox*/
	.building .item .flexBox{
		margin: 15px 0 0 0;
	}

	/*保証対象機器 機器ジャンル*/
	.building .item dt{
		padding: 0 0 2px 0;
		font-size: 1.4rem;
	}

	/*保証対象機器 機器名*/
	.building .item dd{
		margin: 10px 0 0 0;
	}

	/*保証対象機器 機器リスト*/
	.building .item dd li{
		font-size: 1.2rem;
	}

	/*保証対象機器 注釈*/
	.building .item p{
		margin: 10px 0 0 0;
		font-size: 1.2rem;
	}

	/*------------------------------
	リンク設定
	------------------------------*/

	/*リンク中身*/
	#link .inner {
		padding: 0 0 120px;
	}

	/*保証対象機器 バナー*/
	#link .bnr{
		margin: 40px auto 0;
		width: 400px;
	}



}


/*960px以下の場合*/
@media screen and (max-width:960px){

	/*------------------------------
	共通設定
	------------------------------*/

	section > .inner{
		padding: 100px 0;
	}

	/*共通見出し*/
	h3{
		font-size: 1.8rem;
	}

	/*共通テキスト*/
	.txt{
		margin: 15px 0 0 0;
		line-height: 1.8;
	}

	/*共通ビジュアル*/
	.visual{
		height: 350px;
	}

	/*共通ビジュアル 見出し*/
	.visual .txtBox h2{
		font-size: 2.2rem;
	}

	/*共通ビジュアル 小見出し*/
	.visual .txtBox h3{
		margin: 20px 0 0 0;
		font-size: 1.6rem;
	}

	/*container*/
	.container{
		gap: 40px;
	}

	/*container txtBox*/
	.container .txtBox{
		padding: 0 30px 0 0;
	}

	/*container txtBox 偶数*/
	.container .flexBox:nth-of-type(even) .txtBox{
		padding: 0 0 0 30px;
	}

	/*container txtBox 見出し*/
	.container .txtBox h3{
		font-size: 2rem;
	}

	/*topic*/
	.topic{
		margin: 40px 0 0 0;
	}

	/*topic texBox中身*/
	.topicVisual .txtBox .inner{
		padding: 0 30px;
	}

	/*topic 見出し*/
	.topicVisual .txtBox h3{
		font-size: 2rem;
	}

	/*topic 内容*/
	.topicBox{
		gap: 40px;
		padding: 30px;
	}

	/*topic 写真が2個ある場合*/
	.topicBox .line2{
		gap: 20px;
	}

	/*topic 見出し*/
	.topicBox .txtBox h4{
		font-size: 2rem;
	}

	/*topic 見出し 小文字*/
	.topicBox .txtBox h4 span{
		font-size: 1.4rem;
	}

	/*------------------------------
	住宅性能設定
	------------------------------*/
			
	/*サブビジュアル 見出し*/
	.subVisual h2{
		width: calc(100% - 100px);
		font-size: 2rem;
	}

	/*住宅性能 ナビゲーション中身*/
	#performance nav ul{
		width: 100%;
	}

	/*住宅性能 ナビゲーション リスト リンク*/
	#performance nav ul li a{
		padding: 0 0 25px 0;
		font-size: 1.6rem;
	}

	/*------------------------------
	住まいのクオリティ設定
	------------------------------*/

	/*クオリティ全体*/
	#quality{
		padding: 30px 0 0;
	}

	/*クオリティ中身*/
	#quality > .inner{
		gap: 40px 0;
	}

	/*------------------------------
	数値で見る住宅性能設定
	------------------------------*/

	/*数値で見る住宅性能 グリッド表*/
	#specifications .spec-grid {
		margin: 30px 0 0 0;
	}

	/*数値で見る住宅性能 dl*/
	#specifications .spec-grid dl {
		padding: 25px 0;
	}


	/*数値で見る住宅性能 説明*/
	.spec-grid dd {
		font-size: 1.8rem;
	}

	/*数値で見る住宅性能 説明 単位*/
	.spec-grid dd span {
		font-size: 1.2rem;
	}

	/*------------------------------
	耐久性・耐震性設定
	------------------------------*/

	/*耐久性・耐震性中身*/
	#safety > .inner{
		padding: 40px 0 100px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#safety .visual .photo .ico{
		width: 100px;
		left: 15px;
		bottom: 15px;
	}

	/*sdgs アイコン*/
	#safety .sdgs::after{
		width: 60px;
	}

	/*------------------------------
	高気密・高断熱設定
	------------------------------*/

	/*高気密・高断熱中身*/
	#comfort > .inner{
		padding: 40px 0 100px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico{
		width: 280px;
		right: 15px;
		bottom: 10px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico ul{
		width: 280px;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico li{
		width: 100px;

	}
	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico p{
		margin: 0 -15px 0 0;
	}

	/*------------------------------
	省エネ性能設定
	------------------------------*/

	/*省エネ性能中身*/
	#eco > .inner{
		padding: 40px 0 100px;
	}

	/*------------------------------
	保証とアフターサービス設定
	------------------------------*/

	/*保証とアフターサービス中身*/
	#afterservice > .inner{
		padding: 40px 0 100px;
	}

	/*保証 見出し*/
	.building .txtBox h3{
		font-size: 2rem;
	}

	/*保証 小見出し*/
	.building .txtBox h4{
		margin: 30px 0 0 0;
	}

	/*保証期間*/
	.building .txtBox dl{
		margin: 20px 0 0 0;
	}

	/*保証期間 dt*/
	.building .txtBox dt{
		width: 75px;
		font-size: 1.4rem;
	}

	/*保証期間 dd*/
	.building .txtBox dd{
		width: calc(100% - 75px);
		font-size: 1.4rem;
	}

	/*保証期間 photoBox ul*/
	.building .photoBox ul{
		gap: 40px;
	}

	/*保証対象機器*/
	.building .item{
		margin: 20px 0 40px;
		padding: 30px;
	}

	/*------------------------------
	リンク設定
	------------------------------*/

	/*リンク中身*/
	#link .inner {
		padding: 0 0 100px;
	}

	/*保証対象機器 バナー*/
	#link .bnr{
		margin: 30px auto 0;
		width: 360px;
	}


}

/*768px以下の場合*/
@media screen and (max-width:768px){

	/*------------------------------
	共通設定
	------------------------------*/

	section > .inner{
		padding: 60px 0;
	}

	/*共通flexbox*/
	.flexBox{
		flex-direction: column;
		gap: 30px;
	}

	/*共通ビジュアル*/
	.visual{
		height: auto;
		gap: 0;
	}

	/*共通ビジュアル txtBox*/
	.visual .txtBox{
		padding: 30px;
		width: 100%;
	}

	/*共通ビジュアル txtBox中身*/
	.visual .txtBox .inner{
		width: 100%;
	}

	/*共通ビジュアル 写真*/
	.visual .photo{
		width: 100%;
		aspect-ratio:  16 / 9;
	}

	/*container txtBox*/
	.container .txtBox{
		padding: 0;
		width: 100%;
	}

	/*container txtBox 偶数*/
	.container .flexBox:nth-of-type(even) .txtBox{
		padding: 0;
	}

	/*container*/
	.container{
		gap: 50px;
	}

	/*container txtBox 写真*/
	.container .photo{
		width: 100%;
	}

	/*container txtBox 写真中身*/
	.container .photo img{
		aspect-ratio: 4 / 3;
	}

	/*topic texBox*/
	.topicVisual{
		gap: 0;
	}

	/*topic texBox*/
	.topicVisual .txtBox{
		padding: 0;
		width: 100%;
	}

	/*topic texBox*/
	.topicVisual .txtBox .inner{
		padding: 30px;
	}


	/*topic 写真*/
	.topicVisual .photo{
		width: 100%;
	}

	/*topic txtBox,photo共通*/
	.topicBox .txtBox,
	.topicBox .photo{
		width: 100%;
	}

	/*------------------------------
	住宅性能設定
	------------------------------*/
			
	/*サブビジュアル 見出し*/
	.subVisual h2{
		width: calc(100% - 80px);
	}

	/*住宅性能 ナビゲーション中身*/
	#performance nav ul{
		width: calc(100% - 40px);
		height: 70px;
	}

	/*住宅性能 ナビゲーション リスト リンク*/
	#performance nav ul li a{
		padding: 0 0 20px 0;
		font-size: 1.4rem;
	}

	/*住宅性能 ナビゲーション リスト リンク 装飾*/
	#performance nav ul li a::after{
		width: 16px;
		height: 16px;
		bottom: 5px;
	}

	/*------------------------------
	住まいのクオリティ設定
	------------------------------*/

	/*クオリティ中身*/
	#quality > .inner{
		padding: 50px 0 0 0;
		width: 400px;
	}

	/*クオリティ txtBox*/
	#quality .txtBox{
		width: 100%;
	}

	/*クオリティ 写真*/
	#quality .photo{
		width: 100%;
		max-width: 100%;
	}

	/*------------------------------
	数値で見る住宅性能設定
	------------------------------*/

	/*数値で見る住宅性能中身*/
	#specifications > .inner{
		width: 560px;
	}

	/*------------------------------
	耐久性・耐震性設定
	------------------------------*/

	/*耐久性・耐震性中身*/
	#safety > .inner{
		padding: 40px 0;
		width: 400px;
	}

	/*------------------------------
	高気密・高断熱設定
	------------------------------*/

	/*高気密・高断熱中身*/
	#comfort > .inner{
		padding: 40px 0;
		width: 400px;
	}

	#comfort .visual .ico{
		width: 100%;
	}

	#comfort .visual .ico .flexBox{
		margin: 0 0 10px auto;
		flex-direction: row;
	}

	/*------------------------------
	省エネ性能設定
	------------------------------*/

	/*省エネ性能中身*/
	#eco > .inner{
		padding: 40px 0;
		width: 400px;
	}

	/*------------------------------
	保証とアフターサービス設定
	------------------------------*/

	/*保証とアフターサービス中身*/
	#afterservice > .inner{
		padding: 40px 0;
		width: 400px;
	}

	/*保証 txtBox*/
	.building .txtBox{
		width: 100%;
	}

	/*保証期間 photoBox*/
	.building .photoBox{
		width: 100%;
	}

	/*保証対象機器*/
	.building .item .flexBox{
		flex-direction: row;
	}

	/*保証対象機器 リスト*/
	.building .item .flexBox > li{
		width: 45%;
	}

	/*保証対象機器 リスト*/
	.building .item .flexBox > li:last-of-type{
		width: 100%;
	}

	/*保証対象機器 注釈*/
	.building .item p{
		text-align: justify;
	}


	/*------------------------------
	リンク設定
	------------------------------*/

	/*リンク中身*/
	#link .inner {
		padding: 0 0 40px;
	}


}

/*600px以下の場合*/
@media screen and (max-width:600px){

	/*------------------------------
	数値で見る住宅性能設定
	------------------------------*/

	/*数値で見る住宅性能中身*/
	#specifications > .inner{
		width: calc(100% - 40px);
	}


}


/*430px以下の場合*/
@media screen and (max-width:430px){

	/*ページビジュアル*/
	#pageVisual{
		background: url(../img/ordermade/bg_main_sp.webp) no-repeat center center / cover;
	}
	
	/*------------------------------
	住宅性能設定
	------------------------------*/

	/*サブビジュアル*/
	.subVisual{
		aspect-ratio: 4 / 3;
	}
			
	/*サブビジュアル 見出し*/
	.subVisual h2{
		width: calc(100% - 40px);
		font-size: 1.6rem;
	}

	/*住宅性能 ナビゲーション中身*/
	#performance nav ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
	}

	/*住宅性能 ナビゲーション リスト*/
	#performance nav ul li{
		width: 50%;
		height: 60px;
		display: flex;
		align-items: center;
	}

	/*住宅性能 ナビゲーション リスト*/
	#performance nav ul li:first-of-type{
		border-bottom: 1px solid #cbcbcb;
	}


	/*住宅性能 ナビゲーション リスト*/
	#performance nav ul li:nth-of-type(2){
		border-right: none;
		border-bottom: 1px solid #cbcbcb;
	}

	/*住宅性能 ナビゲーション リスト リンク*/
	#performance nav ul li a{
		padding: 0 0 10px 0;
		font-size: 1.2rem;
		position: relative;
	}

	/*住宅性能 ナビゲーション リスト リンク 装飾*/
	#performance nav ul li a::after{
		width: 10px;
		height: 10px;
		bottom: 7px;
	}

	/*------------------------------
	住まいのクオリティ設定
	------------------------------*/

	/*クオリティ中身*/
	#quality > .inner{
		width: calc(100% - 40px);
	}

	/*------------------------------
	数値で見る住宅性能設定
	------------------------------*/

	/*数値で見る住宅性能中身*/
	#specifications > .inner{
		width: calc(100% - 40px);
	}

	/*数値で見る住宅性能 グリッド表*/
	#specifications .spec-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*数値で見る住宅性能 グリッド表*/
	#specifications .spec-grid dl:last-of-type {
		grid-column: 1 / 3; /* 1番目の線から3番目の線（右端）まで占有 */
	}

	/*数値で見る住宅性能 性能名*/
	#specifications .spec-grid dl {
		padding: 15px 0;
	}

	/*数値で見る住宅性能 性能名*/
	#specifications .spec-grid dt {
		font-size: 1.2rem;
	}

	/*数値で見る住宅性能 性能名 背景*/
	#specifications .spec-grid dt span {
		width: 100px;
	}

	/*数値で見る住宅性能 性能名 英語*/
	#specifications .spec-grid dt::before {
		display: block;
		margin: 0 0 5px 0;
		font-size: 1rem;
	}

	/*数値で見る住宅性能 説明*/
	.spec-grid dd {
		margin: 10px 0 0 0;
		font-size: 1.6rem;
	}

	/*数値で見る住宅性能 説明 単位*/
	.spec-grid dd span {
		font-size: 1.2rem;
	}

	/*------------------------------
	耐久性・耐震性設定
	------------------------------*/

	/*耐久性・耐震性中身*/
	#safety > .inner{
		width: calc(100% - 40px);
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#safety .visual .photo .ico{
		width: 80px;
		left: 10px;
		bottom: 10px;
	}

	/*------------------------------
	高気密・高断熱設定
	------------------------------*/

	/*高気密・高断熱中身*/
	#comfort > .inner{
		width: calc(100% - 40px);
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico{
		width: 100%;
		right: 0;
		bottom: 0;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico ul{
		padding: 0 10px 0 0;
		width: 100%;
	}

	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico li{
		width: 80px;

	}
	/*耐久性・耐震性 タイトル アイコン*/
	#comfort .visual .ico p{
		padding: 0;
		width: 100%;
		font-size: 1rem;
	}

	/*------------------------------
	省エネ性能設定
	------------------------------*/

	/*省エネ性能中身*/
	#eco > .inner{
		width: calc(100% - 40px);
	}

	/*------------------------------
	保証とアフターサービス設定
	------------------------------*/

	/*保証とアフターサービス中身*/
	#afterservice > .inner{
		width: calc(100% - 40px);
	}

	/*保証対象機器*/
	.building .item{
		margin: 30px auto;
		width: 320px;
	}

	/*保証対象機器*/
	.building .item .flexBox{
		gap: 10px;
	}


	/*保証対象機器 リスト*/
	.building .item .flexBox > li{
		width: 100%;
	}

	/*------------------------------
	リンク設定
	------------------------------*/
	
	/*保証対象機器 バナー*/
	#link .bnr{
		width: 320px;
	}



}

/*375px以下の場合*/
@media screen and (max-width:375px){

	/*数値で見る住宅性能 説明*/
	.spec-grid dd {
		font-size: 1.4rem;
	}

}