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

/*==============================
ヘッダー設定
==============================*/

/*ヘッダー全体*/
#headerWrap{
	height: 100vh;
	height: 100dvh;
	background: #1a1a1a;
}

/*ヘッダー中身*/
#headerWrap .headerInner {
	display: flex;/*コピーを中央に*/
	align-items: center;/*コピーを中央に*/
	justify-content: center;/*コピーを中央に*/
}

/*ヘッダー キャッチコピー*/
#headerWrap .headerInner p{
	color: #FFF;
	font-size: 3.2rem;
	line-height: 1.6;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	letter-spacing: 4px;
}

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

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

/*住宅性能全体*/
#performance{
	padding: 0;
}

/*住宅性能中身*/
#performance .inner{
	width: 100%;
}

/*住宅性能 メイン写真*/
#performance .visual{
	padding: 250px 0;
	background: url(../img/top/bg_performance_main.webp) no-repeat center center / cover;
}

/*住宅性能 メイン写真 中身*/
#performance .visualInner{
	margin: 0 auto;
	width: 1100px;
}

/*住宅性能 見出し*/
#performance .visualInner h2{
	color: #FFF;
	font-size: 3rem;
	line-height: 1.5;
	text-align: left;
	letter-spacing: 3px;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

/*住宅性能 アイコンリスト全体*/
#performance .visualInner .icon{
	margin: 50px 0 0 0;
	width: 430px;
	display: flex;
	justify-content: space-between;
}

/*住宅性能 アイコンリスト*/
#performance .visualInner .icon li{
	width: calc(100% / 3 - 25px);
}

/*住宅性能 注釈*/
#performance .visualInner p{
	margin: 30px 0 0 0;
	color: #FFF;
	font-size: 1.2rem;
	line-height: 1.6;
	text-align: justify;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*住宅性能 バナー全体*/
#performance .feature{
	padding: 100px 0;
	width: 100%;
	background: #333333;
}

/*住宅性能 バナー中身*/
#performance .feature .featureInner{
	margin: 0 auto;
	width: 1100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*住宅性能 バナーリスト*/
#performance .feature .featureInner li{
	width: calc(50% - 20px);
	height: 260px;
}

/*住宅性能 バナーリスト 2番目と3番目*/
#performance .feature .featureInner li:is(:nth-of-type(2), :nth-of-type(3)){
	margin: 0 0 40px 0;

}

/*住宅性能 バナー リンク*/
#performance .feature .featureInner li a{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: 0.3s ease-in-out;
}

/*住宅性能 バナー リンク 装飾共通*/
#performance .feature .featureInner li a:before,
#performance .feature .featureInner li a:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.3s;
}

/*住宅性能 バナー リンク 装飾 黒い背景*/
#performance .feature .featureInner li a:before{
	background: #000;
	mix-blend-mode: multiply;
	opacity: 0.5;
	z-index: -1;
}

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

	/*住宅性能 バナー リンク 装飾 黒い背景 ホバー*/
	#performance .feature .featureInner li a.hover::before{
		opacity: 0.6;
		transition: 0.5s;
	}

	/*住宅性能 バナー リンク 装飾 画像 ホバー*/
	#performance .feature .featureInner li a.hover::after{
		transform: scale(1.1);
		transition: 0.5s;
	}

	/*トピック バナーリスト 写真BOX 装飾 ホバー*/
	#topic .inner .topicBnr li a.hover .photo::before{
		opacity: 0.6;
		transition: 0.5s;
	}


}

/*住宅性能 バナー リンク 装飾 画像*/
#performance .feature .featureInner li a:after{
	z-index: -2;
}

/*住宅性能 バナー リンク 装飾 画像 デザイン*/
#performance .feature .featureInner li:first-of-type a::after{
	background: url(../img/top/bg_performance01.webp) no-repeat center center / cover;
}

/*住宅性能 バナー リンク 装飾 画像 テクノロジー*/
#performance .feature .featureInner li:nth-of-type(2) a::after{
	background: url(../img/top/bg_performance02.webp) no-repeat center center / cover;
}

/*住宅性能 バナー リンク 装飾 画像 快適性*/
#performance .feature .featureInner li:nth-of-type(3) a::after{
	background: url(../img/top/bg_performance03.webp) no-repeat center center / cover;
}

/*住宅性能 バナー リンク 装飾 画像 保証とアフターメンテナンス*/
#performance .feature .featureInner li:nth-of-type(4) a::after{
	background: url(../img/top/bg_performance04.webp) no-repeat center center / cover;
}

/*住宅性能 バナー 文字*/
#performance .feature .featureInner li a span{
	display: block;
	color: #FFF;
	font-size: 2.5rem;
	line-height: 1.4;
	text-align: center;
}

/*住宅性能 バナー 文字 装飾*/
#performance .feature .featureInner li a span::before{
	display: block;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: 400;
	text-align: center;
	font-family: "Outfit", sans-serif;
}

/*住宅性能 バナー 文字 装飾 デザイン*/
#performance .feature .featureInner li:first-of-type a span::before{
	content: "DESIGN";
}

/*住宅性能 バナー 文字 装飾 テクノロジー*/
#performance .feature .featureInner li:nth-of-type(2) a span::before{
	content: "TECHNOLOGY";
}

/*住宅性能 バナー 文字 装飾 快適性*/
#performance .feature .featureInner li:nth-of-type(3) a span::before{
	content: "COMFORT";
}

/*住宅性能 バナー 文字 装飾 アフターサービス*/
#performance .feature .featureInner li:nth-of-type(4) a span::before{
	content: "AFTER SERVICE";
}

/*------------------------------
トピック設定
------------------------------*/

/*トピック中身*/
#topic .inner{
	margin: 0 auto;
	width: 1100px;
}

/*トピック見出し　英語*/
#topic .inner h2::after{
	content: "TOPICS";
}

/*トピック バナーリスト全体*/
#topic .inner .topicBnr{
	margin: 60px auto 0;
	width: 100%;
}

/*トピック バナーリスト*/
#topic .inner .topicBnr li{
	margin: 0 0 60px 0;
	width: 100%;
	height: 340px;
}

/*トピック バナーリスト 最後*/
#topic .inner .topicBnr li:last-of-type{
	margin: 0;
}

/*トピック バナーリスト リンク*/
#topic .inner .topicBnr li a{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*トピック バナーリスト 写真BOX*/
#topic .inner .topicBnr li a .photo{
	width: 650px;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/*トピック バナーリスト 写真BOX 装飾共通*/
#topic .inner .topicBnr li a .photo::before,
#topic .inner .topicBnr li a .photo::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/*トピック バナーリスト 写真BOX 装飾 黒い背景*/
#topic .inner .topicBnr li a .photo::before{
	background: #000;
	mix-blend-mode: multiply;
	opacity: 0.3;
	z-index: -1;
}

/*トピック バナーリスト 写真BOX 装飾 写真*/
#topic .inner .topicBnr li a .photo::after{
	z-index: -2;
	transition: 0.5s;
}

/*トピック バナーリスト 写真BOX 装飾 写真 ショールーム*/
#topic .inner .topicBnr li:first-of-type a .photo::after{
	background: url(../img/top/bg_topic_showroom.webp) no-repeat center center / cover;
}

/*トピック バナーリスト 写真BOX 装飾 写真 コンセプトハウス*/
#topic .inner .topicBnr li:nth-of-type(2) a .photo::after{
	background: url(../img/top/bg_topic_conceptHouse.webp) no-repeat center center / cover;
}

/*トピック バナーリスト 写真BOX 装飾 写真 緑の柱*/
#topic .inner .topicBnr li:nth-of-type(3) a .photo::after{
	background: url(../img/top/bg_topic_greenPillar.webp) no-repeat center center / cover;
}


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

	/*トピック バナーリスト 写真BOX 装飾 写真 ホバー*/
	#topic .inner .topicBnr li a.hover .photo::after{
		transform: scale(1.1);
		transition: 0.5s;
	}

	/*トピック バナーリスト テキストBOX ホバー*/
	#topic .inner .topicBnr li a.hover .txt{
		background: #1a1a1a;
		transition: 0.5s;
	}


}

/*トピック バナーリスト テキストBOX*/
#topic .inner .topicBnr li a .txt{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 650px);
	height: 100%;
	background: #333;
	position: relative;
	transition: 0.5s;
}

/*トピック バナーリスト テキストBOX 1番目の装飾写真*/
#topic .inner .topicBnr li:first-of-type a .txt::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/top/bg_showroom.webp) no-repeat right bottom / 60% auto;
	position: absolute;
	top: 0;
	left: 0;
}

/*トピック バナーリスト テキストBOX dl*/
#topic .inner .topicBnr li a .txt dl{
	margin: 0 0 20px 0;
}

/*トピック バナーリスト テキストBOX dt*/
#topic .inner .topicBnr li a .txt dt{
	color: #fff;
	font-size: 3rem;
	line-height: 1.4;
	text-align: center;
}

/*トピック バナーリスト テキストBOX dd*/
#topic .inner .topicBnr li a .txt dd{
	margin: 20px 0 0 0;
	color: #333;
	font-size: 2.4rem;
	text-align: center;
}

/*トピック バナーリスト テキストBOX dd 背景*/
#topic .inner .topicBnr li a .txt dd span{
	display: inline-flex;
	padding: 0 15px 2px;
	height: 38px;
	line-height: 1;
	justify-content: center;
	align-items: center;
	background: #fff;
}

/*トピック バナーリスト テキストBOX dd 背景 1番目*/
#topic .inner .topicBnr li:first-of-type a .txt dd span{
	padding: 0 60px 2px;
}

/*トピック バナーリスト テキストBOX dd 背景 3番目*/
#topic .inner .topicBnr li:nth-of-type(3) a .txt dd span{
	padding: 0 20px 2px;
}

/*------------------------------
施工例設定
------------------------------*/

/*施工例全体*/
#works{
	background: #333;
}

/*施工例 見出し英語*/
#works .inner h2::after{
	content: "WORKS";
}

/*施工例 ,家の名前*/
.worksBox .postTitle dt,
.worksBox .postTitle dd{
	color: #fff;
}

/*施工例 家主名*/
.worksBox .postTitle dt{
	font-size: 1.6rem;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*施工例 家の名前*/
.worksBox .postTitle dd{
	margin: 5px 0 0 0;
	font-size: 2rem;
	line-height: 1.4;
	text-align: justify;
	display: -webkit-box;       /* 必須：要素をブロック配置のボックスにする */
    -webkit-box-orient: vertical; /* 必須：垂直方向に並べる */
    -webkit-line-clamp: 2;     /* ここで「2行」を指定 */
    overflow: hidden;           /* はみ出た分を隠す */
}

/*------------------------------
お客様の声設定
------------------------------*/

/*お客様の声 見出し英語*/
#voice .inner h2::after{
	content: "VOICE";
}

/*お客様の声 家主名*/
.voiceBox .postTitle dt{
	font-size: 1.6rem;
	font-weight: 500;
}

/*お客様の声 説明*/
.voiceBox .postTitle dd{
	margin: 10px 0 0 0;
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: justify;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	/*white-space: nowrap;*/
	overflow: hidden;
	text-overflow: ellipsis;
}


/*------------------------------
イベント情報設定
------------------------------*/

/*イベント情報全体*/
#event {
	padding: 0 0 150px;
}

/*イベント情報中身*/
#event .inner{
	width: 100%;
}

/*イベント情報 メイン写真*/
#event .visual{
	width: 100%;
	aspect-ratio: 3.4 / 1;
	background: url(../img/top/bg_event_main.webp) no-repeat center center / cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*イベント情報 見出し英語*/
#event .visual h2::after{
	content: "EVENTS";
}

/*イベント情報 イベントBOX*/
#event .eventBox{
	margin: 100px auto 0;
}

/*イベント情報 イベントBOX 写真*/
#event .eventBox .photo{
	position: relative;
}

/*イベント情報 イベントBOX 写真オビ*/
#event .eventBox .photo span{
	display: inline-block;
	padding: 10px 0;
	width: 100%;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	text-align: center;
	letter-spacing: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #333;
	position: absolute;
	left: 0;
	bottom: 0;
}

/*イベント情報 イベントBOX タイトル*/
.eventBox .postTitle dt{
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 500;
	text-align: justify;
	display: -webkit-box;/* 必須：要素をブロック配置のボックスにする */
	-webkit-box-orient: vertical;/* 必須：垂直方向に並べる */
	-webkit-line-clamp: 2;/* ここで「2行」を指定 */
	overflow: hidden;/* はみ出た分を隠す */
}

/*イベント情報 イベントBOX 日時*/
.eventBox .postTitle dd .date{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

/*イベント情報 イベントBOX dt,dd*/
.eventBox .postTitle dd .date dt,
.eventBox .postTitle dd .date dd{
	font-size: 1.4rem;
	line-height: 2;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

}

/*イベント情報 イベントBOX dt：期間とか*/
.eventBox .postTitle dd .date dt{
	width: 80px;
	position: relative;
}

/*イベント情報 イベントBOX dt：開催期間とか 装飾*/
.eventBox .postTitle dd .date dt::after{
	content: "";
	display: block;
	width: 1px;
	height: 12px;
	background: #333;
	position: absolute;
	top: 8px;
	right: 10px;
}

/*イベント情報 イベントBOX dt：日時とか*/
.eventBox .postTitle dd .date dd{
	width: calc(100% - 80px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*------------------------------
事業内容設定
------------------------------*/

/*事業内容全体*/
#business{
	background: #333;
}

/*事業内容中身*/
#business .inner{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/*事業内容 txtBox*/
#business .txtBox{
	margin: 0 0 0 auto;
	padding: 100px 60px 0 0;
	width: 440px;
	position: sticky;
	top: 100px; /* ヘッダー高さ分 */
	align-self: flex-start;
}

/*事業内容 txtBox 見出し*/
#business .txtBox h2{
	text-align: left;
}

/*事業内容 txtBox 見出し 英語*/
#business .txtBox h2::after{
	content: "OUR BUSINESS";
	text-align: left;
}

/*事業内容 txtBox 説明*/
#business .txtBox p{
	margin: 50px 0 0 0;
	color: #FFF;
	font-size: 2rem;
	line-height: 1.6;
}

/*事業内容 photoBox*/
#business .photoBox{
	width: calc(100% - 600px);
}

/*事業内容 photoBox リスト*/
#business .photoBox li{
	margin: 0 0 50px 0;
	width: 100%;
	aspect-ratio: 2.2 / 1;
	min-height: 0; /* コンテンツによる強制的な高さ拡大を防ぐ */
	position: relative;
	z-index: 1;
	overflow: hidden;
	align-content: center;
}

/*事業内容 photoBox リスト 最後*/
#business .photoBox li:last-of-type{
	margin: 0;
}

/*事業内容 photoBox リスト 装飾共通*/
#business .photoBox li::before,
#business .photoBox li::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: 0.5s;
}

/*事業内容 photoBox リスト 装飾 黒い背景*/
#business .photoBox li::before{
	background: #000;
	mix-blend-mode: multiply;
	opacity: 0.4;
	z-index: -1;
}


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

	/*事業内容 photoBox リスト 装飾 黒い背景 ホバー*/
	#business .photoBox li.hover::before{
		opacity: 0.6;
		transition: 0.5s;
	}

	/*事業内容 photoBox リスト 装飾 写真 ホバー*/
	#business .photoBox li.hover::after{
		transform: scale(1.1);
		transition: 0.5s;
	}

	/*事業内容 photoBox リスト 6番目 装飾 黒い背景 ホバー*/
	#business .photoBox li:nth-of-type(6).hover::before{
		opacity: 0.4;
		transition: none;
	}

	/*事業内容 photoBox リスト 6番目 装飾 写真 ホバー*/
	#business .photoBox li:nth-of-type(6).hover::after{
		transform: scale(1);
		transition: none;
	}

}


/*事業内容 photoBox リスト 装飾 写真*/
#business .photoBox li::after{
	z-index: -2;
}

/*事業内容 photoBox 注文住宅*/
#business .photoBox li:first-of-type::after{
	background: #aaa url(../img/top/bg_business01.webp) no-repeat center center / cover;
}

/*事業内容 photoBox リフォーム*/
#business .photoBox li:nth-of-type(2)::after{
	background: #aaa url(../img/top/bg_business02.webp) no-repeat center center / cover;
}

/*事業内容 photoBox 分譲地*/
#business .photoBox li:nth-of-type(3)::after{
	background: #aaa url(../img/top/bg_business03.webp) no-repeat center center / cover;
}

/*事業内容 photoBox オフィス・クリニック*/
#business .photoBox li:nth-of-type(4)::after{
	background: #aaa url(../img/top/bg_business04.webp) no-repeat center center / cover;
}

/*事業内容 photoBox 賃貸住宅*/
#business .photoBox li:nth-of-type(5)::after{
	background: #aaa url(../img/top/bg_business05.webp) no-repeat center center / cover;
}

/*事業内容 photoBox 外構事業*/
#business .photoBox li:nth-of-type(6)::after{
	background: #aaa url(../img/top/bg_business06.webp) no-repeat center center / cover;
}

/*事業内容 photoBox リスト リンク*/
#business .photoBox li a{
	display: flex;
	justify-content: left;
	align-items: center;
	width: 100%;
	height: 100%;
}

/*事業内容 photoBox 小見出し*/
#business .photoBox li h3{
	padding: 0 0 0 40px;
	width: 100%;
	color: #fff;
	font-size: 4.6rem;
	line-height: 1.1;
	font-weight: 400;
	font-family: "Outfit", sans-serif;
}

/*事業内容 photoBox 小見出し 装飾共通*/
#business .photoBox li h3::before,
#business .photoBox li h3::after{
	display: block;
}

/*事業内容 photoBox 小見出し 装飾 説明文*/
#business .photoBox li h3::before{
	margin: 0 0 5px 0;
	font-size: 2rem;
	line-height: 1.6;
	font-family: "Shippori Mincho", serif;
	white-space: pre-wrap;/* 改行を入れる */
}

/*事業内容 photoBox 小見出し 装飾 説明文 注文住宅*/
#business .photoBox li:first-of-type h3::before{
	content: "思い描いた理想の家に";
}

/*事業内容 photoBox 小見出し 装飾 説明文 リフォーム*/
#business .photoBox li:nth-of-type(2) h3::before{
	content: "思い出の家をより美しく、\A住みやすく";
}

/*事業内容 photoBox 小見出し 装飾 説明文 分譲地*/
#business .photoBox li:nth-of-type(3) h3::before{
	content: "豊かな暮らしの大切な基盤";
}

/*事業内容 photoBox 小見出し 装飾 説明文 医療*/
#business .photoBox li:nth-of-type(4) h3::before{
	content: "働く人も暮らす人も\A快適に過ごせる空間作りを";
}

/*事業内容 photoBox 小見出し 装飾 説明文 賃貸住宅*/
#business .photoBox li:nth-of-type(5) h3::before{
	content: "エールメゾンで資産を運営";
}

/*事業内容 photoBox 小見出し 装飾 説明文 外構*/
#business .photoBox li:nth-of-type(6) h3::before{
	content: "家の外も美しく";
}

/*事業内容 photoBox 小見出し 英語 注文住宅*/
#business .photoBox li h3::after{
	margin: 10px 0 0 0;
	font-size: 1.5rem;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*事業内容 photoBox 小見出し 英語 注文住宅*/
#business .photoBox li:first-of-type h3::after{
	content: "注文住宅";
}

/*事業内容 photoBox 小見出し 英語 リフォーム*/
#business .photoBox li:nth-of-type(2) h3::after{
	content: "リフォーム";
}

/*事業内容 photoBox 小見出し 英語 分譲地*/
#business .photoBox li:nth-of-type(3) h3::after{
	content: "分譲地・土地情報";
}

/*事業内容 photoBox 小見出し 英語 オフィス・クリニック*/
#business .photoBox li:nth-of-type(4) h3::after{
	content: "医療・介護施設";
}

/*事業内容 photoBox 小見出し 英語 賃貸住宅*/
#business .photoBox li:nth-of-type(5) h3::after{
	content: "賃貸住宅［エールメゾン］";
}

/*事業内容 photoBox 小見出し 英語 外構事業*/
#business .photoBox li:nth-of-type(6) h3::after{
	content: "外構事業";
}


/*------------------------------
お知らせ設定
------------------------------*/

/*お知らせ 見出し 英語*/
#information h2::after{
	content: "INFORMATION";
}

/*infoBox*/
#information .infoBox{
	margin: 55px auto 0;
	width: 640px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*infoBox リスト共通*/
#information .infoBox dt,
#information .infoBox dd{
	padding: 17px 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	text-align: justify;
	white-space: nowrap; /* 横幅のMAXに達しても改行しない */
	overflow: hidden; /* 溢れた部分を隠す */
	text-overflow: ellipsis; /* 「…」と省略 */
	border-bottom: 1px solid #b2b2b2;
}

/*infoBox 日付*/
#information .infoBox dt{
	width: 105px;
	font-family: "Outfit", sans-serif;
}

/*infoBox 内容*/
#information .infoBox dd{
	width: calc(100% - 105px);
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*infoBox 内容 リンク*/
#information .infoBox dd a{
	color: #1a1a1a;
}

/* ★追加 20260527 */
#information .infoBox dd a:hover{
	text-decoration: underline;
}




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

	/*infoBox 内容 リンク ホバー*/
	#information .infoBox dd a.hover{
		text-decoration: underline;
	}
}



/*==============================
レスポンシブ設定
==============================*/

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

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

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

	/*住宅性能 メイン写真*/
	#performance .visual{
		padding: 200px 0;
	}

	/*住宅性能 メイン写真 中身*/
	#performance .visualInner{
		width: calc(100% - 80px);
	}

	/*住宅性能 バナー中身*/
	#performance .feature .featureInner{
		width: calc(100% - 80px);
	}

	/*住宅性能 バナーリスト*/
	#performance .feature .featureInner li{
		height: 200px;
	}

	/*------------------------------
	トピック設定
	------------------------------*/

	/*トピック中身*/
	#topic .inner{
		width: calc(100% - 80px);
	}

	/*トピック バナーリスト*/
	#topic .inner .topicBnr li{
		margin: 0 0 40px 0;
		height: 300px;
	}

	/*トピック バナーリスト 写真BOX*/
	#topic .inner .topicBnr li a .photo{
		width: 60%;
	}

	/*トピック バナーリスト テキストBOX*/
	#topic .inner .topicBnr li a .txt{
		width: calc(100% - 60%);
	}

	/*------------------------------
	イベント情報設定
	------------------------------*/

	/*イベント情報全体*/
	#event {
		padding: 0 0 120px;
	}

	/*イベント情報 イベントBOX 写真オビ*/
	#event .eventBox .photo span{
		padding: 7px 0;
	}

	/*------------------------------
	事業内容設定
	------------------------------*/

	/*事業内容 txtBox*/
	#business .txtBox{
		margin: 0 0 0 40px;
		width: 40%;
	}

	/*事業内容 photoBox*/
	#business .photoBox{
		width: 60%;
	}

	/*事業内容 photoBox 小見出し*/
	#business .photoBox li h3{
		font-size: 4rem
	}

	/*事業内容 photoBox 小見出し 装飾 説明文*/
	#business .photoBox li h3::before{
		font-size: 1.8rem;
	}

	/*事業内容 photoBox 小見出し 英語 注文住宅*/
	#business .photoBox li h3::after{
		font-size: 1.4rem;
	}

}

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

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

	/*------------------------------
	トピック設定
	------------------------------*/

	/*トピック バナーリスト テキストBOX dt*/
	#topic .inner .topicBnr li a .txt dt{
		font-size: 2.4rem;
		line-height: 1.4;
	}

	/*トピック バナーリスト テキストBOX dd*/
	#topic .inner .topicBnr li a .txt dd{
		font-size: 2rem;
	}

	/*------------------------------
	施工例設定
	------------------------------*/

	/*施工例 家主名*/
	.worksBox .postTitle dt{
		font-size: 1.4rem;
	}

	/*施工例 家の名前*/
	.worksBox .postTitle dd{
		font-size: 1.6rem;
	}

	/*------------------------------
	お客様の声設定
	------------------------------*/

	/*お客様の声 家主名*/
	.voiceBox .postTitle dt{
		font-size: 1.4rem;
	}

	/*お客様の声 説明*/
	.voiceBox .postTitle dd{
		margin: 5px 0 0 0;
		font-size: 1.4rem;
	}

	/*------------------------------
	イベント情報設定
	------------------------------*/

	/*イベント情報 イベントBOX*/
	#event .eventBox{
		margin: 60px auto 0;
	}

	/*イベント情報 イベントBOX 写真オビ*/
	#event .eventBox .photo span{
		font-size: 1.6rem;
	}

	/*イベント情報 イベントBOX タイトル*/
	.eventBox .postTitle dt{
		font-size: 1.6rem;
	}

	/*------------------------------
	事業内容設定
	------------------------------*/

	/*事業内容 txtBox 説明*/
	#business .txtBox p{
		font-size: 1.6rem;
	}

}

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

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

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

	/*住宅性能 メイン写真*/
	#performance .visual{
		padding: 150px 0;
	}

	/*住宅性能 見出し*/
	#performance .visualInner h2{
		font-size: 2rem;
		line-height: 1.8;
	}

	/*住宅性能 アイコンリスト全体*/
	#performance .visualInner .icon{
		margin: 20px 0 0 0;
		width: 350px;
	}

	/*住宅性能 アイコンリスト*/
	#performance .visualInner .icon li{
		width: calc(100% / 3 - 10px);
	}

	/*住宅性能 注釈*/
	#performance .visualInner p{
		margin: 20px 0 0 0;
	}

	/*住宅性能 バナー全体*/
	#performance .feature{
		padding: 60px 0;
	}

	/*------------------------------
	トピック設定
	------------------------------*/

	/*トピック バナーリスト全体*/
	#topic .inner .topicBnr{
		margin: 40px auto 0;
	}

	/*トピック バナーリスト*/
	#topic .inner .topicBnr li{
		height: 250px;
	}

	/*トピック バナーリスト 写真BOX*/
	#topic .inner .topicBnr li a .photo{
		width: 50%;
	}

	/*トピック バナーリスト テキストBOX*/
	#topic .inner .topicBnr li a .txt{
		width: 50%;
	}

	/*------------------------------
	事業内容設定
	------------------------------*/

	/*事業内容 txtBox*/
	#business .txtBox{
		width: 30%;
	}

	/*事業内容 photoBox*/
	#business .photoBox{
		width: 70%;
	}

	/*事業内容 photoBox リスト*/
	#business .photoBox li{
		margin: 0 0 20px 0;
	}

	/*------------------------------
	お知らせ設定
	------------------------------*/

	/*infoBox*/
	#information .infoBox{
		width: 100%;
	}

}

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

	/*==============================
	共通設定
	==============================*/

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

	/*住宅性能 メイン写真*/
	#performance .visual{
		padding: 200px 0;
	}

	/*住宅性能 メイン写真 中身*/
	#performance .visualInner{
		width: 320px;
	}

	/*住宅性能 見出し*/
	#performance .visualInner h2{
		font-size: 1.8rem;
		text-align: center;
	}

	/*住宅性能 アイコンリスト全体*/
	#performance .visualInner .icon{
		margin: 20px auto 0;
		width: 100%;
	}

	/*住宅性能 注釈*/
	#performance .visualInner p{
		text-align: center;
	}

	/*住宅性能 バナー全体*/
	#performance .feature{
		padding: 40px 0;
	}

	/*住宅性能 バナー中身*/
	#performance .feature .featureInner{
		flex-direction: column;
	}

	/*住宅性能 バナーリスト*/
	#performance .feature .featureInner li{
		margin: 0 0 20px 0;
		width: 100%;
		height: 200px;
	}

	/*住宅性能 バナーリスト 2番目と3番目*/
	#performance .feature .featureInner li:is(:nth-of-type(2), :nth-of-type(3)){
		margin: 0 0 20px 0;

	}

	/*住宅性能 バナー 文字*/
	#performance .feature .featureInner li a span{
		font-size: 2.2rem;
	}

	/*------------------------------
	トピック設定
	------------------------------*/

	/*トピック バナーリスト全体*/
	#topic .inner .topicBnr{
		margin: 30px auto 0;
	}

	/*トピック バナーリスト*/
	#topic .inner .topicBnr li{
		margin: 0 0 20px 0;
		height: 220px;
	}

	/*トピック バナーリスト リンク*/
	#topic .inner .topicBnr li a{
		position: relative;
	}

	/*トピック バナーリスト 写真BOX*/
	#topic .inner .topicBnr li a .photo{
		width: 100%;
	}

	/*トピック バナーリスト テキストBOX*/
	#topic .inner .topicBnr li a .txt{
		width: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	/*トピック バナーリスト テキストBOX 1番目の装飾写真*/
	#topic .inner .topicBnr li:first-of-type a .txt::after{
		background: url(../img/top/bg_showroom.webp) no-repeat right bottom / 40% auto;
	}

	/*トピック バナーリスト テキストBOX dt*/
	#topic .inner .topicBnr li a .txt dt{
		font-size: 2.2rem;
	}

	/*トピック バナーリスト テキストBOX dd*/
	#topic .inner .topicBnr li a .txt dd{
		margin: 10px 0 0 0;
		font-size: 2rem;
	}

	/*トピック バナーリスト テキストBOX dd 背景*/
	#topic .inner .topicBnr li a .txt dd span{
		height: 34px;
	}

	/*------------------------------
	イベント情報設定
	------------------------------*/

	/*イベント情報 イベントBOX 写真オビ*/
	#event .eventBox .photo span{
		padding: 8px 0;
		font-size: 1.8rem;
	}

	/*------------------------------
	事業内容設定
	------------------------------*/

	/*事業内容全体*/
	#business{
		padding: 0;
	}

	/*事業内容中身*/
	#business .inner{
		display: block;
		padding: 0;
		flex-direction: column;
	}

	/*事業内容 txtBox*/
	#business .txtBox {
		position: sticky;
		top: 0;           /* 画面の一番上に固定 */
		width: 100%;
		padding: 20px 0;
		background: #333; /* 背景色を敷いて後ろの写真が透けないようにする */
		z-index: 3;
		margin: 0;
	}

	/*事業内容 txtBox 見出し*/
	#business .txtBox h2{
		text-align: center;
	}

	/*事業内容 txtBox 見出し 英語*/
	#business .txtBox h2::after{
		text-align: center;
	}

	/*事業内容 txtBox 説明*/
	#business .txtBox p{
		margin: 20px 0 0 0;
		text-align: center;
	}

	/*事業内容 photoBox*/
	#business .photoBox{
		margin: 40px auto 0;
		width: 100%;
	}

	/*事業内容 photoBox リスト*/
	#business .photoBox li{
		margin: 0 0 20px 0;
		width: 100%;
		aspect-ratio: 3 / 1.6; /* スマホで見やすい比率に */
	}

	/*事業内容 photoBox 小見出し*/
	#business .photoBox li h3{
		padding: 0;
		font-size: 3.6rem;
		text-align: center;
	}

	/*事業内容 photoBox 小見出し 装飾 説明文*/
	#business .photoBox li h3::before{
		font-size: 1.8rem;
	}

	/*事業内容 photoBox 小見出し 英語 注文住宅*/
	#business .photoBox li h3::after{
		margin: 10px 0 0 0;
		font-size: 1.5rem;
	}


}

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

	/*==============================
	ヘッダー設定
	==============================*/

	/*ヘッダー キャッチコピー*/
	#headerWrap .headerInner p{
		font-size: 2.6rem;
	}

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

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

	/*住宅性能 バナー中身*/
	#performance .feature .featureInner {
		width: calc(100% - 40px);
	}

	/*住宅性能 バナーリスト*/
	#performance .feature .featureInner li{
		height: 150px;
	}

	/*住宅性能 バナー 文字*/
	#performance .feature .featureInner li a span{
		font-size: 2rem;
	}

	/*------------------------------
	トピック設定
	------------------------------*/

	/*トピック中身*/
	#topic .inner{
		width: calc(100% - 40px);
	}

	/*トピック バナーリスト*/
	#topic .inner .topicBnr li{
		height: 160px;
	}

	/*トピック バナーリスト テキストBOX 1番目の装飾写真*/
	#topic .inner .topicBnr li:first-of-type a .txt::after{
		background: url(../img/top/bg_showroom.webp) no-repeat right bottom / 40% auto;
	}

	/*トピック バナーリスト テキストBOX dt*/
	#topic .inner .topicBnr li a .txt dt{
		font-size: 2rem;
	}

	/*トピック バナーリスト テキストBOX dd*/
	#topic .inner .topicBnr li a .txt dd{
		margin: 10px 0 0 0;
		font-size: 1.8rem;
	}

	/*トピック バナーリスト テキストBOX dd 背景*/
	#topic .inner .topicBnr li a .txt dd span{
		height: 30px;
	}

	/*イベント情報 メイン写真*/
	#event .visual{
		aspect-ratio: 1.6 / 1;
	}

	/*------------------------------
	事業内容設定
	------------------------------*/

	/*事業内容 txtBox 説明*/
	#business .txtBox p{
		margin: 10px 0 0 0;
	}

	/*事業内容 photoBox 小見出し*/
	#business .photoBox li h3 {
		font-size: 2.8rem;
	}

	/*事業内容 photoBox 小見出し 装飾 説明文*/
	#business .photoBox li h3::before {
		font-size: 1.4rem;
	}


	/*------------------------------
	お知らせ設定
	------------------------------*/

	/*infoBox*/
	#information .infoBox{
		margin: 40px auto 0;
	}

	/*infoBox リスト共通*/
	#information .infoBox dt,
	#information .infoBox dd{
		padding: 17px 0;
		font-size: 1.4rem;
	}

	/*infoBox 日付*/
	#information .infoBox dt{
		width: 90px;
	}

	/*infoBox 内容*/
	#information .infoBox dd{
		width: calc(100% - 90px);
	}


}