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

.form_title:before {
    content: "フェアの";
}

.f-mincho{
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , 'Noto Serif JP', serif;
	font-weight:100;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*-- mainV --*/
.mainV{
	width:100%;
	height:750px;
	position:relative;
	background:#FDFAE4;
	overflow:hidden
}
.mainV .title_image{
	position:absolute;
	height:fit-content;
	width:100%;
	z-index:1;
	top:0;
	margin:auto;
	overflow:hidden;
	padding:2em 0;
}
.mainV .title_image h2{
	font-family: 'Barlow', sans-serif;
	font-weight:400;
	font-size:20rem;
    margin:0;
    display:inline-block;
    padding-left:100%;
    white-space:nowrap;
    line-height:1em;
    animation:scrolltitle 120s linear infinite;
	letter-spacing:0.1em;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #ffffff;
	color:transparent;
}
@keyframes scrolltitle{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}
.mainV .circle{
	width:95%;
	aspect-ratio: 1 / 1;
	position:absolute;
	top:-60%;
	bottom:0;
	left:0;
	right:-40%;
	margin:auto;
}
.mainV .circle img{
	width:100%;
	height:100%;
	animation:24s cubic-bezier(0.96, 0.01, 0.22, 1) infinite rotation1;
}
@keyframes rotation1{
	0%{ transform:rotate(0);}
	25%{ transform:rotate(90deg); }
	50%{ transform:rotate(180deg); }
	75%{ transform:rotate(270deg); }
	100%{ transform:rotate(360deg); }
}
.mainV .detail{
	width:90%;
	max-width:1400px;
	z-index:1;
	position:absolute;
	bottom:30px;
	left:0;
	right:0;
	margin:auto;
}
.mainV .detail .test{
	width:90%;
	max-width:500px;
}
.mainV .detail .test .title{
	margin-bottom:20px;
}
.mainV .detail .test .title img{
	width:100%;
	vertical-align:bottom;
}
.mainV .detail .test .sub_inner{
	box-sizing:border-box;
	background:#fffd;
	padding:15px;
	border-radius:10px;
}
.mainV .detail .test .sub_inner h1{
	font-size:1.1rem;
	margin-bottom:10px;
	border-bottom:1px solid #999;
	padding-bottom:10px;
	color:#000;
}
.mainV .detail .image{
	width:60%;
	align-items:end;
	display:flex;
}
.mainV .image_house{
	width:70%;
	max-width:800px;
	height:fit-content;
	position:absolute;
	z-index:0;
	right:-40%;
	left:0;
	bottom:-20px;
	margin:auto;
}
.mainV .image_house img{
	width:100%;
}
.mainV .limited{
	z-index:1;
	position:absolute;
	top:30px;
	right:20px;
	height:200px;
	width:200px;
}
@media screen and (max-width: 1199px) {
	.mainV .image_house{
		width:60%;
		max-width:800px;
		right:-10%;
		left:unset;
		bottom:-50px;
	}
}
@media screen and (max-width: 839px) {
	.mainV{
		width:100%;
		height:100vh;
		min-height:900px;
	}
	.mainV .detail{
		width:100%;
		height:fit-content;
		max-width:unset;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}
	.mainV .detail .test{
		width:90%;
		max-width:500px;
		margin:auto;
	}
	.mainV .image_house{
		width:90%;
		max-width:900px;
		right:0;
		left:0;
		bottom:-50px;
	}
	.mainV .limited{
		height:150px;
		width:150px;
		top:0px;
		right:0;
	}
	.mainV .circle{
		width:110%;
		top:-80%;
		bottom:0;
		left:0;
		right:-60%;
	}
	.mainV .title_image{
		width:100%;
		z-index:1;
		top:0;
		padding:0em 0;
	}
	.mainV .title_image h2{
		font-size:10rem;
	}
}
@media screen and (max-width: 768px) {
	.mainV .title_image h2{
		font-size:7rem;
	}
	.mainV .limited{
		height:120px;
		width:120px;
	}
	.mainV .detail .test{
		width:85%;
		max-width:400px;
	}
	.mainV .detail .test .sub_inner h1{
		font-size:1rem;
	}
}
@media screen and (max-width: 519px) {

}

	
/*-- event_copy --*/
.event_copy{
    width:100%;
    font-size:1rem;
    font-weight:bold;
    text-align:center;
    overflow:hidden;
	padding:1em 0;
}
.event_copy p{
    margin:0;
    display:inline-block;
    padding-left:100%;
    white-space:nowrap;
    line-height:1em;
    animation:scrollSample01 30s linear infinite;
}
.event_copy p img{
    height:2.0em;
   vertical-align:-0.5em;
	margin-right:0.5em;
}
.event_copy p em{
    font-style:normal;
    font-size:80%;
}
@keyframes scrollSample01{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}



/*-- fair_detail --*/
.fair_detail{
	width:100%;
	display:flex;
	justify-content:space-between;
	box-sizing:border-box;
	border-bottom:1px solid #fff;
}
.fair_detail ul.title{
	width:30%;
	background: #064092;
	align-items:center;
	display:flex;
}
.fair_detail ul.title .inner{
	width:85%;
	max-width:400px;
	margin:auto;
}
.fair_detail ul.title dt{
	display:flex;
	margin-bottom:15px;
	padding-bottom:15px;
	border-bottom:1px solid #fff
}
.fair_detail ul.title dt img{
	width:100%;
}
.fair_detail ul.title dd{
	color:#fff;
}
.fair_detail ul.title dd h4{
	font-size:1.1rem;
	margin-bottom:10px;
}
.fair_detail ul.detail{
	width:70%;
	display:flex;
	justify-content:space-between;
	background:#f0eee0;
}
.fair_detail ul.detail dl{
	width:33.33%;
	padding:20px 0;
}
.fair_detail ul.detail .inner{
	width:90%;
	margin:auto;
}
.fair_detail ul.detail dt{
	width:100%;
	max-height:250px;
	margin-bottom:20px;
	aspect-ratio: 1 / 0.7;
	overflow:hidden;
	position:relative;
}
.fair_detail ul.detail dt img{
	width:100%;
	height:100%;
	vertical-align:bottom;
	object-fit:cover;
}
.fair_detail ul.detail dt .spe_logo{
	position:absolute;
	top:0px;
	right:0;
	background: #064092;
	border-radius:50%;
	height:100px;
	width:100px;
	align-items:center;
	display:flex;
}
.fair_detail ul.detail dt .spe_logo img{
	width:65%;
	height:auto;
	vertical-align:bottom;
	object-fit:unset;
	margin:auto;
}
.fair_detail ul.detail dd{
	width:100%;
}
.fair_detail ul.detail dd h4{
	font-size:1rem;
	margin-block:10px;
	color:#000;
	text-align:center;
}
.fair_detail ul.detail dd h4 span{
	font-size:90%;
	display:block;
}
.fair_detail ul.detail dd h4 em{
	font-style:normal;
	font-size:130%;
	display:block;
	color:#064092;
}
.fair_detail ul.detail .dura{
	border-right:1px solid #ffffff;
}
.fair_detail ul.detail .sash{
	border-right:1px solid #ffffff;
}

@media screen and (max-width: 1199px) {
	.fair_detail{
		width:100%;
		display:block;
		justify-content:unset;
		box-sizing:border-box;
		border-bottom:unset;
	}
	.fair_detail ul.title{
		width:100%;
		align-items:center;
		display:flex;
		padding:50px 0;
	}
	.fair_detail ul.title .inner{
		width:80%;
		max-width:500px;
		margin:auto;
	}
	.fair_detail ul.detail{
		width:100%;
	}
}
@media screen and (min-width: 640px) and (max-width:839px){
	.fair_detail ul.detail{
		width:100%;
		display:block;
		justify-content:unset;
	}
	.fair_detail ul.detail dl{
		width:100%;
		padding:20px 0;
	}
	.fair_detail ul.detail .inner{
		width:90%;
		margin:auto;
		display:flex;
		justify-content:space-between;
	}
	.fair_detail ul.detail .dura,
	.fair_detail ul.detail .sash{
		border-right:unset;
		border-bottom:1px solid #ffffff;
	}
	.fair_detail ul.detail dt{
		width:45%;
		max-height:unset;
		margin-bottom:0px;
		aspect-ratio:unset;
		overflow:hidden;
	}
	.fair_detail ul.detail dd{
		width:50%;
	}
	.fair_detail ul.detail dd h4{
		text-align:unset;
	}
}
@media screen and (max-width: 639px) {
	.fair_detail ul.title dt img{
		width:100%;
		max-width:300px;
		margin:auto;
		display:block;
	}
	.fair_detail ul.detail{
		width:100%;
		display:block;
		justify-content:space-between;
	}
	.fair_detail ul.detail .dura{
		border-right:none;
	}
	.fair_detail ul.detail dl{
		width:100%;
		padding:50px 0;
		margin-bottom:0px;
		border-bottom:1px solid #fff;
	}
	.fair_detail ul.detail .inner{
		width:90%;
	}
}

/*-- smite_custom --*/
.smite_custom{
	/* background: #f1ede7; */
	padding:0px 0 100px;
	box-sizing:border-box;
}
.smite_custom .wrap{
}
.smite_custom .wrap .smite_title{
	background:#D8544D;
	position:relative;
}
.smite_custom .wrap .smite_title:before {
    position: absolute;
    top: 100%;
    left: 49%;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #D8544D;
    border-width: 20px;
    content: "";
}
.smite_custom .wrap .smite_title .inner{
	width:90%;
	max-width:1400px;
	margin:0 auto 50px;
	display:flex;
	justify-content:space-between;
	padding:50px 0;
	box-sizing:border-box;
}
.smite_custom .wrap .smite_title h3{
	padding:0px 0 0;
	width:450px;
	position:relative;
	align-items:center;
	display:flex;
}
.smite_custom .wrap .smite_title h3:after{
	content:"";
	background: url("/news_cont/event/2025/202501_quattrofair/mainV_image_house.webp") no-repeat bottom / cover;
	background-size: contain;
	vertical-align: middle;
	display: inline-block;
	width:200px;
	position:absolute;
	right:0;
	bottom:0;
	top:0;
	margin:auto;
	height:150px;
}
.smite_custom .wrap .smite_title h3 img{
	width:80%;
	z-index:1;
	position:relative;
	filter: drop-shadow(0px 0px 7px #D8544D);
}
.smite_custom .wrap .smite_title p{
	width:calc(100% - 480px);
	color:#fff;
}
.smite_custom .wrap .smite_detail{
	display:flex;
	justify-content:space-between;
	width:90%;
	max-width:1400px;
	margin:0 auto 50px;
}
.smite_custom .wrap .smite_detail li{
	width:48%;
	list-style:none;
	box-sizing:border-box;
}
.smite_custom .wrap .smite_detail li h5{
	font-family: 'Barlow', sans-serif;
	font-size:2rem;
	color:#D8544D;
	align-items: center;
	display: flex;
	margin-bottom:10px;
}
.smite_custom .wrap .smite_detail li h5::after {
	background-color: #D8544D;
	content: "";
	flex-grow: 1;
	height: 1px;
	margin-left: 15px;
}
.smite_custom .wrap .smite_detail li h4{
	font-size:1.1rem;
	color:#333;
	margin-bottom:20px;
}
.smite_custom .wrap .smite_detail li.plan dl{
	display:flex;
	justify-content:space-between;
	height:250px;
}
.smite_custom .wrap .smite_detail li.plan dl dt{
	width:24.5%;
	height:100%;
	overflow:hidden;
}
.smite_custom .wrap .smite_detail li.plan dl dt img{
	object-fit:cover;
	height:100%;
	width:100%;
}
.smite_custom .wrap .smite_detail li.style dl{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	height:250px;
}
.smite_custom .wrap .smite_detail li.style dl dt{
	width:33%;
	height:124px;
	margin-bottom:3px;
	position:relative;
}
.smite_custom .wrap .smite_detail li.style dl dt img{
	object-fit:cover;
	height:100%;
	width:100%;
}
.smite_custom .wrap .smite_detail li.style dl dt p{
	position:absolute;
	bottom:1px;
	right:5px;
	font-family: 'Barlow', sans-serif;
	font-size:0.8rem;
	color:#fff;
	text-shadow: 0px 0px 5px #010101;
}
.smite_custom .wrap .smite_detail li dt{
	width:100%;
	box-sizing:border-box;
}
.smite_custom .wrap .smite_detail li dt img{
	width:100%;
	vertical-align:bottom;
}
.smite_custom .wrap .smite_detail_que{
	width:100%;
	list-style:none;
	box-sizing:border-box;
	width:90%;
	max-width:1400px;
	margin:auto;
}
.smite_custom .wrap .smite_detail_que h5{
	font-family: 'Barlow', sans-serif;
	font-size:2rem;
	color:#D8544D;
	align-items: center;
	display: flex;
	margin-bottom:10px;
}
.smite_custom .wrap .smite_detail_que h5::after {
	background-color: #D8544D;
	content: "";
	flex-grow: 1;
	height: 1px;
	margin-left: 15px;
}
.smite_custom .wrap .smite_detail_que h3{
	font-size:1.1rem;
	color:#333;
	margin-bottom:20px;
}
.smite_custom .wrap .smite_detail_que ul{
	display:flex;
	justify-content:space-between;
}
.smite_custom .wrap .smite_detail_que ul li{
	width:49.5%;
	list-style:none;
	box-sizing:border-box;
	background:#f7f6f4;
	padding:20px;
	border-radius:13px;
}
.smite_custom .wrap .smite_detail_que ul li h4{
	font-size:1rem;
	color:#fff;
	margin-bottom:10px;
	width:fit-content;
	background:#D8544D;
	padding:0.2em 1em;
	border-radius:20px;
}
.smite_custom .wrap .smite_detail_que ul li dt{
	width:100%;
	box-sizing:border-box;
	position:relative;
}
.smite_custom .wrap .smite_detail_que ul li dt img{
	width:100%;
	vertical-align:bottom;
}
.smite_custom .wrap .smite_detail_que ul li.kanki dl{
	display:flex;
	justify-content:space-between;
	margin-bottom:30px;
}
.smite_custom .wrap .smite_detail_que ul li.kanki dl dt{
	width:49%
}
.smite_custom .wrap .smite_detail_que ul li.kanki dt:nth-child(2):after{
	content:"※熱交換率90%の換気イメージ";
	position:absolute;
	bottom:-2em;
	right:0;
	display:block;
	font-size:0.8rem;
}
.smite_custom .wrap .smite_detail_que ul li.duo dl dt{
	width:100%;
	aspect-ratio: 1 / 0.3;
	overflow:hidden;
	margin-bottom:10px;
}
.smite_custom .wrap .smite_detail_que ul li.duo dl dt img{
	width:70%;
	height:100%;
	object-fit:cover;
	margin:auto;
	display:block;
}
@media screen and (max-width: 839px) {
	.smite_custom .wrap .smite_title .inner{
		width:90%;
		max-width:unset;
		display:block;
		justify-content:unset;
	}
	.smite_custom .wrap .smite_title h3{
		padding:0 0 0;
		width:100%;
		max-width:400px;
		position:relative;
		align-items:unset;
		display:block;
		margin:auto;
	}
	.smite_custom .wrap .smite_title h3 img{
		width:100%;
	}
	.smite_custom .wrap .smite_title h3:after{
		display:none;
	}
	.smite_custom .wrap .smite_title p{
		width:100%;
		color:#fff;
	}
	.smite_custom .wrap .smite_detail{
		display:block;
		justify-content:unset;
		width:90%;
		max-width:unset;
	}
	.smite_custom .wrap .smite_detail li{
		width:100%;
		margin-bottom:50px;
	}
	.smite_custom .wrap .smite_detail_que ul{
		display:block;
		justify-content:unset;
	}
	.smite_custom .wrap .smite_detail_que ul li{
		width:100%;
		margin-bottom:20px;
	}
}
@media screen and (max-width: 839px) {
	.smite_custom .wrap .smite_detail li.plan dl{
		height:200px;
	}
}
@media screen and (max-width: 599px) {
	.smite_custom .wrap .smite_detail li.plan dl{
		flex-wrap:wrap;
		height:auto;
	}
	.smite_custom .wrap .smite_detail li.plan dl dt{
		width:49.5%;
		height:180px;
		margin-bottom:5px;
	}
	.smite_custom .wrap .smite_detail_que ul li.kanki dl{
		display:block;
		justify-content:unset;
	}
	.smite_custom .wrap .smite_detail_que ul li.kanki dl dt{
		width:100%;
		max-width:350px;
		margin:auto;
	}
	.smite_custom .wrap .smite_detail_que ul li.kanki dl dt:nth-child(1){
		margin-bottom:20px;
	}
	.smite_custom .wrap .smite_detail_que ul li.duo dl dt{
		aspect-ratio: 1 / 0.5;
	}
	.smite_custom .wrap .smite_detail_que ul li.duo dl dt img{
		width:100%;
	}
}

/*-- qua_point_title --*/
.qua_point_title{
	background: linear-gradient(90deg, #FDFAE4 50%, #FEF9CF 50%);
	padding:100px 0 0;
}
.qua_point_title .title_inner{
	width:fit-content;
	margin:auto;
	padding:10px 50px;
	border-radius:10px;
	background:#D8544D;
}
.qua_point_title .title_inner h4{
	text-align:center;
	color:#fff;
	font-size:1.1rem;
}
.qua_point_title h2{
	color:#FCE780;
	text-align:center;
	font-size:1.8rem;
}
.qua_point_title h2 span{
	font-size:120%;
}
@media screen and (max-width: 899px) {
	.qua_point_title{
		background: #FDFAE4;
		padding:100px 0 0;
	}
}
@media screen and (max-width: 639px) {
	.qua_point_title .title_inner{
		width:96%;
		margin:auto;
		box-sizing:border-box;
		padding:10px 3%
	}
	.qua_point_title .title_inner h4{
		font-size:1rem;
	}
	.qua_point_title h2{
		font-size:1.5rem;
	}
	.qua_point_title h2 span{
		display:block;
	}
}



/*-- qua_point --*/
.qua_point{
	width:100%;
}
.qua_point ul{
	width:100%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.qua_point li{
	width:50%;
	position:relative;
	height:650px;
	list-style:none;
}
.qua_point li .inner{
	height:fit-content;
	width:90%;
	max-width:700px;
	z-index:2;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	display:flex;
	justify-content:space-between;
}
.qua_point li.roof .inner,
.qua_point li.dura .inner{
	top:100px;
}
.qua_point li.sash .inner,
.qua_point li.floor .inner{
	top:70px;
}
.qua_point li .inner dd{
	width:40%;
}
.qua_point li .inner dd .spe_logo{
	width:100%;
	background:#064092;
	padding:8px 20px;
	margin-bottom:10px;
	border-radius:20px;
	box-sizing:border-box;
}
.qua_point li .inner dd .spe_logo img{
	width:150px;
	margin:auto;
	display:block;
}
.qua_point li .inner dd h5{
	font-size:1.5rem;
	line-height: 80px;
	font-weight:400;
	text-align:center;
	display: inline-block;
	color:#fff;
	width:fit-content;
	aspect-ratio: 1 / 1;
	width:80px;
	margin:0 auto 10px;
	border-radius: 50%;
	display:block;
}
.qua_point li .inner dd h3{
	font-size:1.2rem;
	margin-bottom:10px;
}
.qua_point li .inner dd h3 span{
	font-size:120%;
	color:#D8544D;
	display:block;
}
.qua_point li.roof .inner dd h5{
	background:#E9AFA1;
}
.qua_point li.dura .inner dd h5{
	background:#EEC0B5;
}
.qua_point li.dura .inner dd  .gooddesign{
	width:100%;
}
.qua_point li.dura .inner dd  .gooddesign a{
	width:100%;
	display:block;
}
.qua_point li.dura .inner dd  .gooddesign img{
	width:100%;
	vertical-align:bottom;
	padding:10px 7px;
	background:#fff;
	border-radius:3px;
	box-shadow:0px 0px 5px #ccc;
	margin:15px auto 0;
	box-sizing:border-box;
}
.qua_point li.sash .inner dd h5{
	background:#EEC0B5;
}
.qua_point li.floor .inner dd h5{
	background:#E9AFA1;
}

.qua_point li .inner dt{
	width:55%;
	margin-top:50px;
}
.qua_point li .inner dt.fadein.is-active {
    transition-delay: 1s;
}
.qua_point li .inner dt img{
	width:100%;
	vertical-align:bottom;
	padding:15px;
	background:#fff;
	box-sizing:border-box;
	border-radius:7px;
}
.qua_point li.dura .inner,
.qua_point li.floor .inner{
	flex-direction: row-reverse;
}

.qua_point li.sash .inner dt{
}
.qua_point li .cate_name{
	position:absolute;
	z-index:1;
	font-family: 'Barlow', sans-serif;
	font-weight:400;
	font-size:5rem;
	line-height:1em;
	font-weight:100;
}
.qua_point li .circle{
	height:80%;
	position:absolute;
	overflow:hidden;
}
.qua_point li:nth-child(2n) .circle{
	right:unset;
	left:0;
}
.qua_point li .circle img{
	height:100%;
	vertical-align:bottom;
}
.qua_point li:nth-child(1) {
		background:#FDFAE4;;
}
.qua_point li:nth-child(1)  .cate_name{
	bottom:10px;
	right:10px;
	color: #D7A297;
}
.qua_point li .cate_name.fadein.is-active {
    transition-delay: 1.5s;
}
.qua_point li:nth-child(1) .circle.fadein{
	opacity: 1;
	bottom:0;
	right:0;
}
.qua_point li:nth-child(1) .circle.fadein img{
	 transform-origin: right bottom;
	 transform: rotate(-90deg)
}
.qua_point li:nth-child(1) .circle.fadein.is-active img{
    opacity: 1;
	transform-origin: right bottom;
    transform: rotate(0deg);
    transition: 1.2s;
}
.qua_point li:nth-child(2) {
	background:#FEF9CF;
}
.qua_point li:nth-child(2)  .cate_name{
	bottom:10px;
	left:10px;
	color:#D7A297;
}
.qua_point li:nth-child(2) .circle.fadein{
	opacity: 1;
	bottom:0;
	right:0;
}
.qua_point li:nth-child(2) .circle.fadein img{
	 transform-origin: left bottom;
	 transform: rotate(-90deg);
}
.qua_point li:nth-child(2) .circle.fadein.is-active img{
    opacity: 1;
	transform-origin: left bottom;
    transform: rotate(0deg);
    transition: 1.2s;
}
.qua_point li:nth-child(3) {
	background:#FEF9CF;
}
.qua_point li:nth-child(3)  .cate_name{
	top:10px;
	right:10px;
	color:#D7A297;
}
.qua_point li:nth-child(3) .circle.fadein{
	opacity: 1;
	top:0;
	right:0;
}
.qua_point li:nth-child(3) .circle.fadein img{
	 transform-origin: right top;
	 transform: rotate(-90deg)
}
.qua_point li:nth-child(3) .circle img.sp{
	display:none;
}
.qua_point li:nth-child(3) .circle.fadein.is-active img{
    opacity: 1;
	 transform-origin: right top;
    transform: rotate(0deg);
    transition: 1.2s;
}
.qua_point li:nth-child(4) {
	background:#FDFAE4;
}
.qua_point li:nth-child(4)  .cate_name{
	top:10px;
	left:10px;
	color:#D7A297;
}
.qua_point li:nth-child(4) .circle.fadein{
	opacity: 1;
	top:0;
	right:0;
}
.qua_point li:nth-child(4) .circle.fadein img{
	 transform-origin: left top;
	 transform: rotate(-90deg)
}
.qua_point li:nth-child(4) .circle img.sp{
	display:none;
}
.qua_point li:nth-child(4) .circle.fadein.is-active img{
    opacity: 1;
	 transform-origin: left top;
    transform: rotate(0deg);
    transition: 1.2s;
}

@media screen and (max-width: 1199px) {
	.qua_point li .circle{
		height:60%;
		position:absolute;
		overflow:hidden;
	}
	.qua_point li .inner{
		height:fit-content;
		width:90%;
		position:relative;
		left:unset;
		right:unset;
		margin:auto;
		display:block;
		justify-content:unset;
	}
	.qua_point li{
		position:relative;
		height:800px;
		list-style:none;
	}
	.qua_point li .inner dd{
		width:100%;
	}
	.qua_point li .inner dd h5{
		display: inline-block;
	}
	.qua_point li .inner dt{
		width:55%;
		margin-top:10px;
	}
	.qua_point li .inner dd .spe_logo{
		width:fit-content;
	}
	.qua_point li .inner dt{
		width:100%;
		margin-top:10px;
	}
	.qua_point li .inner dt img{
		max-width:400px;
		margin:auto;
		display:block;
	}
	.qua_point li.dura .inner dd  .gooddesign{
		width:50%;
		margin:auto;
		position:absolute;
		top:0px;;
		right:0;
	}
}
@media screen and (max-width: 899px) {
	.qua_point ul{
		width:100%;
		display:block;
		justify-content:unset;
		flex-wrap:unset;
	}
	.qua_point li{
		position:relative;
		width:100%;
		list-style:none;
		height:auto;
		 padding:100px 0;
		overflow:hidden;
	}
	.qua_point li.roof .inner,
	.qua_point li.dura .inner{
		top:0;
	}
	.qua_point li.sash .inner,
	.qua_point li.floor .inner{
		top:0;
	}
	.qua_point li .circle{
		height:unset;
		width:70%;
		position:absolute;
		overflow:hidden;
	}
	.qua_point li .inner{
		height:fit-content;
		width:90%;
		max-width:600px;
		position:;
		left:unset;
		right:unset;
		margin:0 auto;
		display:block;
		justify-content:unset;
	}
	.qua_point li .inner dd{
		margin-bottom:30px;
	}
	.qua_point li:nth-child(3) .circle img.sp,
	.qua_point li:nth-child(4) .circle img.sp{
		display:unset;
	}
	.qua_point li:nth-child(3) .circle img.pc,
	.qua_point li:nth-child(4) .circle img.pc{
		display:none;
	}
	.qua_point li:nth-child(3) .circle.fadein{
		top:unset;
		bottom:0;
	}
	.qua_point li:nth-child(4) .circle.fadein{
		top:unset;
		bottom:0;
		right:0;
	}
	.qua_point li:nth-child(3)  .cate_name{
		top:unset;
		bottom:10px;
	}
	.qua_point li:nth-child(4)  .cate_name{
		top:unset;
		bottom:10px;
		left:10px;
		color:#D7A297;
	}
	.qua_point li:nth-child(1) .circle.fadein img{
		 transform-origin: right bottom;
		 transform: rotate(90deg)
	}
	.qua_point li:nth-child(1) .circle.fadein.is-active img{
		transform-origin: right bottom;
	    transform: rotate(0deg);
	}
	.qua_point li:nth-child(3) .circle.fadein img{
		 transform-origin: right bottom;
		 transform: rotate(90deg)
	}
	.qua_point li:nth-child(3) .circle.fadein.is-active img{
		transform-origin: right bottom;
	    transform: rotate(0deg);
	}
	.qua_point li:nth-child(4) .circle.fadein img{
		 transform-origin: left bottom;
		 transform: rotate(-90deg);
	}
	.qua_point li:nth-child(4) .circle.fadein.is-active img{
		transform-origin: left bottom;
	    transform: rotate(0deg);
	}
}
@media screen and (max-width: 519px) {

}


/*-- terms --*/
.terms{
	font-size:90%;
	width:96%;
	max-width:1200px;
	margin:0px auto 0;
	line-height:1.8em;
	padding:30px 0;
	box-sizing:border-box;
}
.terms .wrap .image dl dd{
	color:#fff;
	margin:20px 0;
}



/*-- intro --*/
.intro{
	background:#f6f6f6;
	padding:100px 0;
}
.intro .title{
	width:100%;
	max-width:1000px;
	margin:auto;
	position:relative;
}
.intro .title .ilust_tree01{
	width:150px;
	position:absolute;
	bottom:0;
}
.intro .title .ilust_tree02{
	width:150px;
	position:absolute;
	bottom:0;
	right:0;
}
.intro h2{
	font-size:1.6rem;
	text-align:center;
	margin-bottom:50px;
	position:relative;
	border-bottom: 2px solid #ccc;
	padding-bottom:10px;
}
.intro h2 strong{
	font-size:110%;
	font-style:normal;
	color:#D8544D;
}
.intro h2:before,
.intro h2:after {
    position: absolute;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}
.intro h2:before {
    top: 100%;
    border: 10px solid;
    border-color: transparent;
    border-top-color: #ccc;
    margin-left: -9px;
}
.intro h2:after {
    top: 99%;
    border: 8px solid;
    border-color: transparent;
    border-top-color: #f9f9f0;
    margin-left: -7px;
}

.intro .subsidy{
}
.intro .subsidy .tokyozeroemi,
.intro .subsidy .gx{
	width:90%;
	max-width:1000px;
	margin:0 auto 70px;
	background:#fff;
	padding:30px;
	box-sizing:border-box;
	border-radius:20px;
}
.intro .subsidy .tokyozeroemi ul,
.intro .subsidy .gx ul{
	display:flex;
	justify-content:space-between;
}
.intro .subsidy .tokyozeroemi ul dl,
.intro .subsidy .gx ul dl{
	width:45%;
}
.intro .subsidy .tokyozeroemi ul dl h4{
	color:#fff;
	font-size:1.1rem;
	padding: 0.5em 2em 0.5em 1em;
	line-height: 1.3;
	background: #119635;
	vertical-align: middle;
	border-radius: 25px;
	margin:0 0 1em;
	display:inline-block;
}
.intro .subsidy .gx ul dl h4{
	color:#fff;
	font-size:1.1rem;
	padding: 0.5em 2em 0.5em 1em;
	line-height: 1.3;
	background: #dd4d24;
	vertical-align: middle;
	border-radius: 25px;
	margin:0 0 1em;
	display:inline-block;
}
.intro .subsidy .tokyozeroemi ul dl h4:before{
  content: '❶';
  color: white;
  margin-right: 0.5em;
}
.intro .subsidy .gx ul dl h4:before{
  content: '❷';
  color: white;
  margin-right: 0.5em;
}
.intro .subsidy .gx ul dl h5{
	font-size:1.2rem;
	margin-bottom:10px;
	color:#dd4d24;
}
.intro .subsidy .tokyozeroemi ul dl h5{
	font-size:1.2rem;
	margin-bottom:10px;
	color:#119635;
}
.intro .subsidy .tokyozeroemi h5 strong,
.intro .subsidy .gx h5 strong{
	color:#be1f1e;
	font-size:120%;
}
.intro .subsidy .tokyozeroemi  figure,
.intro .subsidy .gx  figure{
	width:50%;
}
.intro .subsidy .gx  figure p{
	font-size:80%;
	line-height:1.7em;
}

.intro .subsidy .wrap{
	width:90%;
	max-width:1000px;
	margin:0 auto 50px;
}
.intro .subsidy .kodomoeco{
	width:100%;
	background:#fff;
	padding:30px;
	box-sizing:border-box;
	border-radius:20px;
}


.intro .subsidy .kodomoeco h5{
	font-size:1rem;
	margin-bottom:20px;
}
.intro .subsidy .kodomoeco h5 span{
}
.intro .subsidy .kodomoeco h5 strong{
	color:#be1f1e;
	font-size:120%;
}
.intro .subsidy .kodomoeco p{
	font-size:90%;
	line-height:1.7em;
	margin-bottom:0.5em;
}
.intro .subsidy .kodomoeco p span{
	color:#be1f1e;
}
.intro .subsidy .mortgagetax h4{
	color:#fff;
	font-size:1.1rem;
	padding: 0.5em 2em 0.5em 1em;
	line-height: 1.3;
	background: #2683c3;
	vertical-align: middle;
	border-radius: 25px;
	margin:0 0 1em;
	display:inline-block;
}
.intro .subsidy .mortgagetax h4:before {
  content: '❸';
  color: white;
  margin-right: 0.5em;
}
.intro .subsidy .mortgagetax h5{
	font-size:1rem;
	margin-bottom:20px;
}
.intro .subsidy .mortgagetax h5 strong{
	color:#be1f1e;
	font-size:120%;
}
.intro .subsidy .mortgagetax p{
	font-size:90%;
	line-height:1.7em;
	margin-bottom:0.5em;
}

.intro .subsidy .note{
	width:90%;
	max-width:1000px;
	margin:auto;
}

@media screen and (max-width: 959px) {
	.intro .subsidy .tokyozeroemi,
	.intro .subsidy .gx{
		padding:3%;
	}
}
@media screen and (max-width: 767px) {
	.intro h2{
	}
	.intro h2 span{
		display:block;
	}
	.intro .subsidy .tokyozeroemi .appeal h6{
		font-size:1.6rem;
	}
	.intro .subsidy .tokyozeroemi ul,
	.intro .subsidy .gx ul{
		display:block;
		justify-content:unset;
	}
	.intro .subsidy .tokyozeroemi ul dl,
	.intro .subsidy .gx ul dl{
		width:100%;
	}
	.intro .subsidy .tokyozeroemi ul dl h4,
	.intro .subsidy .gx ul dl h4{
		color:#fff;
		font-size:1.1rem;
		display:block;
		padding: 0.5em 0em 0.5em 0.5em;
	}
	.intro .subsidy .tokyozeroemi ul dl h4:before,
	.intro .subsidy .gx ul dl h4:before{
		margin-right: 0.2em;
	}
	.intro .subsidy .tokyozeroemi  figure,
	.intro .subsidy .gx  figure{
		margin:30px auto;
		width:80%;
		max-width:450px;
	}
	.intro .subsidy .wrap{
		display:block;
		justify-content:unset;
		max-width:unset;
	}
	.intro .subsidy .gx h4{
		display:block;
	}
}
@media screen and (max-width: 699px) {
}
@media screen and (max-width: 519px) {
	.intro .subsidy .tokyozeroemi{
		width:94%;
		max-width:1000px;
		margin:0 auto 30px;
		background:#fff;
		padding:30px 2%;
	}
	.intro .subsidy .kodomoeco .logo,
	.intro .subsidy .tokyozeroemi .logo{
		width:100%;
		max-width:unset;
		margin:0 auto 30px;
	}
	.intro .subsidy .kodomoeco .logo img,
	.intro .subsidy .tokyozeroemi .logo img{
		width:80%;
		margin:auto;
		display:block
	}
	.intro .subsidy .kodomoeco h5,
	.intro .subsidy .tokyozeroemi h5{
		text-align:;
		font-size:1.1rem;
	}
	.intro .subsidy .tokyozeroemi .appeal h6{
		font-size:1.3rem;
	}
	.intro .subsidy .tokyozeroemi  figure,
	.intro .subsidy .gx  figure{
		margin:30px auto;
		width:100%;
		max-width:unset;
	}
	
}
@media screen and (max-width: 489px) {
	.intro h2{
		font-size:1.3rem;
	}
	.intro .title .ilust_tree01{
		width:60px;
	}
	.intro .title .ilust_tree02{
		width:70px;
	}
}



/*-- offer --*/
.offer{
	background:#e1ddbc;
	padding:70px 0;
}
.offer .wrap{
	width:90%;
	max-width:1000px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.offer .wrap .image{
	width:35%;
}
.offer .wrap .image .title{
	height:fit-content;
	width:100%;
}
.offer .wrap .image .title img{
	width:100%;
}
.offer .wrap .text{
	width:60%;
	align-items:center;
}
.offer .wrap .text h4{
	font-size:1.2rem;
	margin-bottom:20px;
	font-feature-settings: "palt";
}
.offer .wrap .text h4 span{
	display:block;
	font-size:120%;
}
.offer .wrap .text h4 strong{
	color:#D8544D;
}
@media screen and (max-width: 768px) {
	.offer .wrap{
		width:90%;
		max-width:unset;
		margin:auto;
		display:block;
		justify-content:unset;
	}
	.offer .wrap .image{
		width:100%;
		max-width:300px;
		margin:0 auto 30px;
	}
	.offer .wrap .text{
		width:100%;
		max-width:500px;
		margin:auto;
	}
	.offer .wrap .text h4{
		text-align:center;
	}
	.offer .wrap .text h4 span{
		display:block;
		font-size:110%;
	}
	.offer .wrap .text h4 strong{
		display:block;
	}
}