@charset "utf-8";

/* ==========================================
   リセット＆基本設定
========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
	font-size: 62.5%;
}
body {
	font-family: 'M PLUS 1p', 'Noto Sans JP', sans-serif;
	transform: rotate(0.03deg);  
	color: #333333;
	background-color: #ffffff;
	line-height: 1.6;
	overflow-x: hidden;
	width: 100%;
	
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
.hero-cta-button,
.mh_button,
.foot-cta-button {
	font-family: inherit;
	background: transparent linear-gradient(104deg, #E6B422 0%, #DCAA18 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 6px;
	color: #fff;
	padding: 1.8rem 3.0rem;
	font-size: 2.0rem;
	font-weight: 400;
	border: none;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
}
button:hover,
.hero-cta-button:hover,
.mh_button:hover,
.foot-cta-button:hover{
	cursor: pointer;
	outline: solid 3px #ffffff;
	outline-offset:-3px;
}
/* ==========================================
   共通コンポーネント
========================================== */
.container {
	max-width: 1364px;
	margin-left: auto;
	margin-right: auto;
	flex: 1;
}
.point_g{
	color: #188D6E;
}
.point_cian{
	color: #19A3DE;
}

/* ==========================================
   ヒーローセクション
========================================== */
#hero_erea{
	background: url("https://satsuki-s.com/system_panel/uploads/images/20260802162930710445.png") no-repeat;
	width: 100%;
	height: 550px;
	/*background-position-x: right;*/
	background-position-x: center;
	box-shadow: 0px 3px 10px #0000005E;
	position: relative;
	z-index: 3;
	background-size: cover;
	background-position-y: center;
}
#hero {
	padding-top: 9rem;
}
#hero_container{
	max-width: 1366px;
	margin: 0 auto;
	padding-bottom: 1rem;
	display: flex;
 	justify-content: space-between;
	flex-wrap: wrap;
	
	h1{
		font-family: 'Zen Old Mincho';
		font-size: clamp(4.0rem,7vw,6.4rem);
		text-align: left;
		text-shadow: 0px 6px 4px #FFFFFF;
		line-height: 1.2;
		margin-bottom: 8.4rem;
		white-space: nowrap;
		-webkit-text-stroke: 3px #fff;
		paint-order: stroke;
		width: 100%;
	}
	p{
		color: #188D6E;
		font-size: 4.0rem;
		font-weight: 600;
		width: 100%;
	}
	
}
.copy_size_l{ font-size: clamp(4.2rem,7vw, 8.0rem)}
.copy_size_m{ font-size: clamp(3.5rem, 7vw, 7.0rem);}

.sub_copy{
		/*margin-top: 3.4rem;*/
 		font-size: 1.8rem; 	
		/*margin-bottom: 5rem;*/
	
	ul{	}
	UL li{
		list-style: none;
		background:url("../images/circle_check.png") no-repeat;
		background-position: left 7px;
		padding-left: 1.8rem;
		margin-bottom: 1.2rem;
	}
}
#hero_left,#hero_right{
	display: flex;
	flex-wrap: wrap;
	/*margin-top: 4rem;*/
}

#hero_left{	width: 100%; }
#hero_right{
	align-items: center;
	
}
.hero_bottom{
	display: flex;
	width: 100%;
	height: 130px;
    align-self: end;
}
.sp_under{
	max-width: 400px;
	height: 230px;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	padding: 1.8rem;
	
	p{
		font-size: 2.4rem;
		border-bottom: 2px solid #188D6E;
		display: block;
		text-align: center;
	}
	span{
		color: #6C6C6C;
		font-size: 1.5rem;
		display: block;
		text-align: center;
		width: 100%;
	}	
}
.buider_mh{
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.hero-cta-button{
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(280px,7vw,400px);
	height: clamp(80px,7vw,85px);
	font-size: clamp(1.5rem,7vw,2.2rem);
	margin-right: 2rem;
}
.sp_under{ background: #ffffff; }

#builder_name_box{
	width: 100%;
	height: auto;
	text-align: left;
	padding: 1rem 0;
	display: flex;

	p{
	display: block;
	color: #333;
	font-size: 3.5rem;
	font-weight: 600;
	text-align: left;
	padding-left: 1.25rem;
	align-self: center;
	white-space: nowrap;
	}	
	
}
.rogo_wide{
	width: auto;
	
	object-fit: contain;	
} 
.rogo_wide_notxt{
	width: 150px;
	height: auto;
	object-fit: contain;
	
}
.rogo_sq{
	width: 95px;
	height: auto;
	object-fit: contain;
}
/* JS不可のため CSS でロゴ社名の出し分け（旧 index.js 相当） */
.rogo_name{ display: none; }
.rogo_wide_notxt + .rogo_name,
.rogo_sq + .rogo_name{ display: block; }

/* ==========================================
   動画エリアショート
========================================== */
#PU_short{
	width: 100%;
	height: auto;
	background: url("https://satsuki-s.com/system_panel/uploads/images/20260804153554957924.png") no-repeat center bottom;
	display: block;
	text-align: center;
	background-size: cover;
	padding-top: 8.0rem;
	padding-bottom: 5.4rem;
}
.s_pichup_erea{
	background: #F0F7F4 0% 0% no-repeat padding-box;
	box-shadow: 0px 5px 9px #0000006B;
	border: 5px solid #188D6E;
	border-radius: 33px;
	padding: 2.4rem 8.4rem;
	
	h3{
		text-align: center;
		font-size: 3.2rem;
		font-weight: 500;
		background: #19A3DE 0% 0% no-repeat padding-box;
		box-shadow: 0px 3px 4px #00000069;
		border-radius: 28px;
		opacity: 1;
		width: 54%;
		height: 55px;
		margin: 0 auto 3.0rem;
		color: #ffffff;
	}
}
.pickup_short{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.short_t{
	width: 280px;
	height: 513px;	
}

.thumbnail_deco{
	position: relative;
	border: 4px solid #FF4646;
	padding-bottom: 3rem;
	margin-bottom: 2.4rem;
	background: #fff;
	
	a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
	a:hover{
		opacity: 0.7;
	}
	a::after{
	content: 'YouTubeで見る▶';
    font-size: 1.4rem;
    color: #ffffff;
    background: #FF4646;
    width: 100%;
    display: block;
    text-align: right;
	}
	
}

.answer_t{
	width: 442px;
	height: 275px;
	margin-bottom: 0!important;
}

/* ==========================================
   特徴(動画)
========================================== */

#features_txterea{
	background: transparent linear-gradient(180deg, #F0F7F4 0%, #CFF4E4 100%) 0% 0% no-repeat padding-box;
	position: relative;
	padding-bottom: 4.8rem;
	
	h2{
		background: url("https://satsuki-s.com/system_panel/uploads/images/20260804153712219852.png") no-repeat;
		font-size: 3.2rem;
		color: #188D6E;
		font-weight: 600;
		position: relative;
		text-align: center;
		background-position: bottom;
		background-size: cover;
		height: 82px;
		padding-top: 3rem;
		text-shadow: 0px 3px 4px #FFFFFF;
	}
	h4{
		color: #188D6E;
		font-size: 3.2rem;
		text-align: center;
		width: 100%;
		display: block;
		border-bottom: solid 1px #188D6E;
		margin-top: 2.4rem;
		margin-bottom: 1.6rem;

	}
}
.features_box{
	
	h4{
		color: #188D6E;
		font-size: 3.2rem;
		text-align: center;
		width: 100%;
		display: block;
		border-bottom: solid 1px #188D6E;
		margin-top: 2.4rem;
		margin-bottom: 1.6rem;	
				font-weight: 700;	
	}
}
.features_front{
	position: relative;
  	z-index: 100;
}
.features_box{ padding-top: 5.2rem; }
#pu_answer{
	background: #FFE100;
	width: 100%;
	height: auto;
	margin-bottom: 2.8rem;
}
#pickup_long{
	display: flex;
	flex-wrap: wrap;
	border-radius: 2.6rem;
	padding: 2.4rem auto;
	justify-content: space-around;
	padding-top: 4.8rem;
	padding-bottom: 8.0rem;
	
	h3{
		color: #333333;
		font-weight: 900;
		display: block;
		height: 5.8rem;
		margin-bottom: 3.2rem;
		font-size: 4.0rem;
		width: 100%;
		text-align: center;
	}
}
.pu_answer_title{
	text-align: center;
	width: 100%;
	
	p{ font-size: 2.4rem;}
	h3{}
}
#pickup_long_innner{
	display: flex;
	justify-content: space-around;
	width: 1364px;
	flex-wrap: wrap;
}
.pu_answer_block{
	width: 442px;
	background: #fff;
	
	p{
		font-size: 2.3rem;
		color: #188D6E;
		text-align: center;
		background: #ffffff;
	}
	span{
		font-size: 2.0rem;
		color: #333333;
		display: block;
	}
	
}
.long_t{
	width: 359px;
	height: 228px;
}
.long_parent{
	display: flex;
	justify-content:space-around;
	flex-wrap: wrap;
	padding: 1rem 8rem;
}
.read_button{}
.long_parent > .thumbnail_deco{
	margin-bottom: 2.4rem;
}

/* ==========================================
   なぜこれらの現象が起こるのか？
========================================== */
#why_box{
	margin: 0 auto;
	position: relative;
	z-index: 50;
	text-align: center;
	
	h2{
		font-size: 4.8rem;
	}
	p{
		font-size: 2.4rem;
	}
}
#why_inbox{
	background: #19A3DE 0% 0% no-repeat padding-box;
	color: #fff;
	max-width: 1160px;
	top: -6rem;
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
}
/* ==========================================
   特徴
========================================== */
#features_txterea{
	background: transparent linear-gradient(180deg, #F0F7F4 0%, #CFF4E4 100%) 0% 0% no-repeat padding-box;	
	width: 100%;
	position: relative;
	
}
.features_txt{
	padding-bottom: 1rem;
	position: relative;
	
	h2{
		font-size: 3.0rem;
		color: #fff;
		background: #19A3DE 0% 0% no-repeat padding-box;
		border: 4px solid #F0F7F4;
		border-radius: 18px;
		text-align: center;
		position: absolute;
		width: 100%;
		padding: 2rem 0;
		top: -5rem;		
	}
	
}
.features_txt_prnt{
	
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	
	padding-top: 5.4rem;
}

/* ==========================================
   注意事項・注釈
========================================== */
#annotation_erea{
	width: 100%;
	background: transparent linear-gradient(180deg, #F0F7F4 0%, #CFF4E4 100%) 0% 0% no-repeat padding-box;
}
#annotation_parbox{
	max-width: 1188px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	padding-top: 5.4rem;
	
	h3{
		color: #128364;
		width: 100%;
		border-bottom: #128364 solid 1px;
		font-size: 3.2rem;
		text-align: center;
		margin-bottom: 2.4rem;
	}
}

.fts_txtbox{
	background: #ffffff;
	border-radius: 18px;
	display: flex;
	padding: 1.5rem 2.8rem;
	align-items: start;
	
	margin-bottom: 4.0rem;
	width: 30%;
	flex-wrap: wrap;
	justify-content: center;
}
.fts_txtbox > .thumbnail_deco{ border: none; }

.ftr_t{
	width: 100%;
	height: auto;
	
	img{ border: 4px solid #FF4646;	}	
}
.fts_inbox_r{
	/*padding-top: 48%;*/
	
	h5{
		color: #188D6E;
		font-size: 1.8rem;
		font-weight: 600;
		text-align: center;
		display: block;
		width: 100%;
		height: 2.5rem;
		line-height: 1.2;
		align-content: center;
		margin-bottom: 0.5rem;
	}
	span{
		font-size: 1.4rem;
		text-align: left;
		color: #656565;
		display: block;
	}
}

/* ==========================================
   モデルハウス
========================================== */
#mh_erea{
	background:url("https://satsuki-s.com/system_panel/uploads/images/20260802171725221202.png") no-repeat;
	clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%);
	color: #ffffff;
	padding-top: 7rem;
	padding-bottom: 4.0rem;
	background-size: cover;
	margin-top: 4rem;
}
.mh_prnt{
	max-width: 1366px;
	margin: 0 auto;
	h3{
		font-size: 4.2rem;
		text-align: center;
		line-height: 1.2;
	}
}
.span32{
	font-size: 3.2rem;
}
.mh_picbox{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 5.2rem;
}
.mh_pic{
	width: 250px;
	height: 450px;
	/*padding-top: 33%;*/
	position: relative;
	margin: 0 0.5rem 2rem 0.5rem;
	
	p{
		display: block;
		font-size: 6.0rem;
		font-weight: 700;
		transform:rotate(-90deg);
		text-shadow: 0px 3px 6px #0000006E;
		position: absolute;
		bottom: 26.6rem;
		left: 1.0rem;
		text-align: left;
		width: 100%;
		transform-origin: bottom right;
	}
}
.mh_picbox > .hokkaido{	background: url("https://satsuki-s.com/system_panel/uploads/images/20260802172210813797.png") no-repeat bottom center; }
.mh_picbox > .tokyo{ background: url("https://satsuki-s.com/system_panel/uploads/images/20260802172219556496.png") no-repeat bottom center; }
.mh_picbox > .aichi{ background: url("https://satsuki-s.com/system_panel/uploads/images/20260802172226143987.png") no-repeat bottom center; }
.mh_picbox > .osaka{ background: url("https://satsuki-s.com/system_panel/uploads/images/20260802172233532850.png") no-repeat bottom center; }
.mh_picbox > .kyusyu{ background: url("https://satsuki-s.com/system_panel/uploads/images/20260802172239568500.png") no-repeat bottom center; }

.mh_pointbox{
	margin: 4.0rem auto 0;
	position: relative;
	display: flex;
	justify-content: center;
}
.mh_button{
	border-radius: 6px;
	width: 438px;
	height: 78px;
	font-size: 4.2rem;
	font-weight: 600;
	box-shadow: 0px 3px 6px #00000029;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.point_sml{ font-size:3.0rem!important; }

/* ==========================================
   注意事項
========================================== */
#annotation_erea{
	position: relative;
}
#annotation_erea label{
		height: 140px; /* グラデーションの高さ */
		cursor: pointer;
		text-align: center;
		font-size: 12px;
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 120;

		/* 以下グラデーションは「背景が白」に併せて設定しています */	
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
		background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
		background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
		background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);		
	}

#annotation_erea input:checked + label {
	background: inherit; /* 開いた時には背景グラデーションを消す */
}
#annotation_erea label:after {
	content: "開く"; /* ラベルの文字 */
	letter-spacing: .05em;
	line-height: 4.0rem;
	position: absolute;
	bottom: 20px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	color: #fff;
	
	width: 190px;
	height: 40px;
	background: #128364 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #0000004D;
	border-radius: 20px;	
	font-size: 2.0rem;
  	font-weight: 400;
}
#annotation_erea input {
	display: none;
}
#annotation_erea .accordion-container {
	overflow: hidden;
	height: 185px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

#annotation_erea input:checked + label {
	 display: none ; /*閉じるボタンは要らないとき */
}
#annotation_erea input:checked + label:after {
	content: "閉じる";
}
#annotation_erea input:checked ~ .accordion-container {
    height: auto;
	padding-bottom: 104px; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

#disclaimer_erea{
	color: #666;
	max-width: 448px;
	height: auto;
	margin: 0 auto;
	/*padding-bottom: 4rem;*/
	
	h5{
		font-size: 1.8rem;
		text-align: center;
		border-bottom: 1px solid #666;
	}
	div{
		font-size: 1.2rem;
	}	
	ul{
	  list-style: none;
	  padding: 0;		
	}
	ul li::before{
	  content: "※";
	  margin-right: .25em;		
	}
}

/* ==========================================
   fotter
========================================== */
.sm-footer{
	width: 100%;
	height: 166px;	
	position: sticky;
	text-outline: 100vh;
	bottom: 0;
	left: 0;
	text-align: center;
	/* JS不可のため常時表示（旧スクロール出現の代替） */
	transform: translateY(0);
	transition: transform 0.3s ease;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	background: #188D6E;
	
}
.form_footer{
	transform: translateY(0%);
	padding-top: 2rem;
	height: 115px;
}

.sm-footer.is-visible {
  transform: translateY(0);
}
.foot_innner{
	width: 100%;
	display: flex;
 	flex-wrap: wrap;
}
#foot_btn_erea{
	margin: 0 auto;
	padding: 1.4rem 0 1.7rem;
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.foot-cta-button{
	white-space: nowrap;
	
	padding: 0.8rem 3.0rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	}
.foot_sml_iconbox{
	display: flex;
	justify-content: center;
	padding: 0 0 1.4rem;
	width: 100%;

	a{
		
		line-height: 6.5;
		color: #ffffff;
		text-decoration: none;
		background-position: center 9px;
		font-size: 1.4rem;
		border-left: solid 1px #fff;
		text-align: center;
	}
	a:hover{
		opacity: 0.7;
	}
}

.foot_innner:has(.foot_sml_iconbox:empty) #foot_btn_erea{ padding-top:3.4rem; }

.link_home , .link_yt_ch , .link_insta{
	width: 178px;
	height: 56px;
	display: block;
}
.foot_sml_iconbox a:last-child{
   	border-right: solid 1px #fff;
	
}
.link_home{
	background: url("https://satsuki-s.com/system_panel/uploads/images/20260802180052177444.png") no-repeat;
	
}
.link_yt_ch{
	background: url("../images/youtube.svg") no-repeat;
	
}
.link_insta{
	background: url("https://satsuki-s.com/system_panel/uploads/images/20260802180058803968.png") no-repeat;
}
#foot_cpn_erea{
	background: #fff;
	height: 20px;
	font-size: 1.2rem;
	align-self: flex-end;
	width: 100%;
	text-align: center;
}

/* ==========================================
   メディアクエリ
========================================== */
@media (max-width: 930px) {
		
	#hero_container{ 
		flex-wrap: nowrap; 
	}
	#hero{
		padding-top: 4.2rem;
		height: 100%;
	}
	#hero_erea{
		background-size: auto;
		background-position-x: right -7rem;
    	height: 100%;
		position: relative;
		
		h3{
			font-size: 2.4rem;
			width: 100%;
		}
	}
	.sub_copy{
		font-size: 1.4rem;
		margin-left: 1.5rem;
	}
	#hero_left{ }
	#hero_right{ justify-content: center; }
	.sp_under{
		max-width: 100%;
		background: rgba(256, 256, 256, 0.6);
		text-align: center;
		padding: 1rem 0;
		flex-grow: 1;
		margin-top: 2rem;
		
		p{
		}
	}
	#hero_container {
		display: flex;
		/*flex-direction: column;*/
		height: 100%;
		padding: 0 5rem;
		
		h1{
			
			margin-bottom: 1.4rem;
		}
		
		p{
			opacity: 1.0!important;
			
		}
	}
	button{	opacity: 1.0!important;	}
	.hero-cta-button{ 
		white-space: nowrap;
		
		
		
		margin-bottom: 1rem;
		margin-right: 0;
	}
}
/* タブレット (890px以下) */
@media (max-width: 890px) {
	
	

	
	#builder_name_box{
	}
	.rogo_wide_notxt{
		
	}	
	
	.hero-cta-button{
		width: 100%;
		padding: 1.8rem 1rem;
		font-size: 1.9rem;		
	}
	.hero_bottom{
		flex-wrap: wrap;
		justify-content: center;
	}
	
	
	
		#PU_short{
		padding-bottom: 2.3rem;
		padding-top: 0;
	}
	.s_pichup_erea{
		margin: 3.2rem 3.2rem 0 3.2rem;
		padding: 2.4rem;
		border-radius: 0;
		h3{
			font-size: 2.4rem;
			width: 100%;
			height: 38px;
		}
	}
	.short_t{
		width: 175px;
		height: 325px;
	}
		#features_txterea {
		h2{
			font-size: 3.2rem;
			height: 68px;
			padding-top: 2rem;
			
		}
		h2::after{display: none;}
	}
	.features_box{padding-top: 0;}
	
		#pickup_long{
		border-radius: 0;
		h3{
			font-size: 2.4rem;
			margin-bottom: 1.3rem;
			height: auto;
		}
	}
	.fts_txtbox{width: 45%;}
	
		.long_parent{
		padding: 1rem;
		justify-content: space-around;
	}	

/* ==========================================
   なぜこれらの現象が起こるのか？
========================================== */
	#why_box{

		h2{font-size: 3.2rem; }
		p{
	font-size: 2.0rem;
		  line-height: 1;		
		}
	}
	#why_inbox{
		position: static;
		padding: 1.5rem 0;
	}
	
	.features_txt{

		h2{
			font-size: 2.4rem;
			border: none;
			border-radius: 0;
			position: static;
			padding: 1rem 0;
		}
	}
	#features_txt_prnt{
		padding: 2.4rem;
		width: 100%;
		flex-wrap: wrap;
		justify-content:space-between;

		img{
			
		}
	}

/* ==========================================
   注意事項・注釈
========================================== */
	.fts_txtbox{ padding: 3rem;	}
	.fts_txtbox > .thumbnail_deco{ margin-bottom: 2.4rem; }	
	.fts_inbox_r{
		
		span{ font-size: 1.4rem; }			
		h5{	font-size: 1.8rem; }
	} 	
	#features_txterea{ h2::after{ }	}
	
	
		#disclaimer_erea{

		h5{
		}
		div{  }	
		ul{}
		ul li{}
	}
	
	.sm-footer{
		position: sticky;
		z-index: 100;
	}

/* ==========================================
   モデルハウス
========================================== */
	#mh_erea{
		clip-path: polygon(50% 0%, 100% 10%, 100% 100%, 0 100%, 0 10%);		
	}
	.mh_prnt{
		h3{
		}
	}
	.span32{
	}
	.mh_picbox{
		flex-wrap: wrap;
		justify-content: center;
	}
	.mh_pic{

		p{
		}
	}

	.mh_pointbox{
		margin: 4.0rem auto 0;
		position: relative;
		display: flex;
	  justify-content: center;
	}
	.mh_button{}
	.point_sml{}
}

/* スマートフォン (584px以下) */
@media (max-width: 584px) {
		#builder_name{ height: 70px; }
	.builder_name_contn{}
	#builder_name_box{
		width: 100%;
		height: auto;
		justify-content: center;
		display: flex;
		align-items: center;

		
		p{}
	}
	#hero{ padding-top: 0; }
	h1{	margin-bottom: 2.4rem; }
	#hero_erea{
		background-size: cover;
		background-position-x: right -28rem;
    	height: 400px;
		position: relative;
		padding: 1rem;
		
		h3{
			font-size: 2.4rem;
			width: 100%;
		}
	}
	#hero_container{
		flex-direction: column;
	}	
	#hero_left{	
		width: 100%;
		margin-top: 2rem;
	}
	#hero_right{
		margin-top: 0;
		padding-top: 6rem;
		align-self: center;
	}	
	.sub_copy{
		font-size: 1.4rem;
		margin-left: 1.5rem;
		margin-top: 0;
		
		ul{}
		ul li{
			background-position: left 4px;
			margin-bottom: 0.8rem;
		}
	}
	
	.rogo_wide{
		
	}
	.rogo_wide_notxt{}
	
	

	.sp_under{
		background: none;
		text-align: center;
		padding: 1rem 0;
		flex-grow: 1;
		
		p{ }
		span{ font-size: 1.2rem; }
	}
	.buider_mh{
		margin-top: 0;
		margin-bottom: 0;
	}
	#hero_container {
		background: rgba(256, 256, 256, 0.6);
		padding: 0;
			
		h1{ 
			font-size: 3.0rem;
			margin-bottom: 1.4rem;
		
		}
		p{  }
	}
	
	button{	}
	.hero-cta-button{
		width: 255px;
		height: 65px;
		font-size: 2.0rem;		
	}
		#PU_short{
		padding-bottom: 2.3rem;
		padding-top: 3rem;
	}
	.s_pichup_erea{
		margin: 3.2rem 0 0;
		padding: 2.4rem;
		border-radius: 0;
		border-left: none;
		border-right: none;
		
		h3{	}
	}
	.short_t{
		width: 148px;
		height: 249px;
		border: none;
		
		img{
			border: 4px solid #FF4646;
		}
	}
.thumbnail_deco {
		height: 230px;
		margin-bottom: 6.4rem !important;
	
	a::after{
		text-align: center;
		height: 28px;
	}
}
	
		#ad_features {
		h2{	}
	}
	.features_box{	}
	
		#pickup_long{
		padding: 0;
		h3{
			margin-top: 1rem;
			margin-bottom: 0.3rem;
		}
	}
	.long_t{
		border: none;
		img{
			border: 4px solid #FF4646;
		}
		a::after{
			text-align: right;
		}
	}

/* ==========================================
   なぜこれらの現象が起こるのか？
========================================== */
	#why_box{

		h2{font-size: 2.4rem; }
		p{
	font-size: 1.8rem;
		  line-height: 1;		
		}
	}
	#why_inbox{
		position: static;
		padding: 1.5rem 0;
	}

	.features_box {
		h4{ font-size: 2.4rem; }
	}
	
#annotation_erea{
	/*padding-bottom: 2rem;*/
	}	
	.features_txt{

		h2{	}
	}
	#features_txt_prnt{
		padding: 2.4rem;
		margin-bottom: 0;
		
		img{
			width: 100%;
			height: auto;
		}
	}
	.fts_txtbox{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin-bottom: 1rem;
	}
	#features_txterea{ padding-bottom: 0; }
	.fts_inbox_r{
		span{ }			
		h5{
			margin-bottom: 0.5rem;
			text-align: center;
		}
	} 	

/* ==========================================
   モデルハウス
========================================== */
	#mh_erea{
		clip-path: polygon(50% 0%, 100% 6%, 100% 100%, 0 100%, 0 6%);		
	}
	.mh_prnt{
		h3{
		}
	}
	.span32{
	}
	.mh_picbox{
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 1rem;
	}
	.mh_pic{
		width: 100%;
    	height: 155px;
		background-repeat: no-repeat!important;
		background-size: cover!important;
		background-position-x: left!important;

		p{
			transform: rotate(0deg);
			bottom: 0;
			font-size: 4.0rem;
		}
	}
	.hokkaido{ background-position-y: bottom -414px!important; }
	.tokyo{	background-position-y: bottom -409px!important;	}
	.aichi{	background-position-y: bottom -316px!important;	}
	.osaka{	background-position-y: bottom -342px!important;	}
	.kyusyu{ background-position-y: bottom -327px!important; }

	.mh_pointbox{
		margin: 4.0rem auto 0;
		position: relative;
		display: flex;
	  justify-content: center;
	}
	.mh_button{
		width: 95%;
		font-size: 3.0rem;
}
	.point_sml{ font-size: 2.4rem !important; }
	
	
	
		#disclaimer_erea{

		h5{
		}
		div{
		}	
		ul{}
		ul li{}
	}
	
	.sm-footer{
	}
	.foot_sml_iconbox{
		a{
			font-size: 1.0rem;
			line-height: 9;			
		}
	}
	.foot_sml_iconbox a:first-child{ border-left: none;	}	
	.foot_sml_iconbox a:last-child{	border-right: none;	}

	#foot_btn_erea{
		align-items: center;
		
		a{
			font-size: 1.2rem;
			overflow: hidden;
			line-height: 13;
			background-position-y: center;
			border: none;
		}
	}
	.foot-cta-button{
	}
}
	
#hero_container .hero_right p {
  color: #fff;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
}

#foot_btn_erea a {
	font-family: inherit;
    background: transparent linear-gradient(104deg, #E6B422 0%, #DCAA18 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 6px;
    color: #fff;
    padding: 1.8rem 3.0rem;
    font-size: 2.0rem;
    font-weight: 400;
    border: none;
}

#foot_btn_erea a:hover {
	cursor: pointer;
	outline: solid 3px #ffffff;
	outline-offset: -3px;
}

.foot_sml_iconbox a:hover,
.mh_pointbox a:hover {
	color: #fff;
}

/* ヒーローエリア通過後に追従フッターを表示 */
.sm-footer.js-fixed-footer {
	position: sticky;
	right: auto;
	bottom: 0;
	left: auto;
	z-index: 1000;

	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	pointer-events: none;

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s ease;
}

.sm-footer.js-fixed-footer.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* スマホ時の追従フッター調整 */
@media (max-width: 584px) {
	#foot_btn_erea a {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.4;
	}

	#foot_btn_erea a p {
		margin: 0;
		line-height: 1.4;
	}

	.foot_sml_iconbox a {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		line-height: 1.4;
		padding-bottom: 2px;
		background-position: center 5px;
	}

	.foot_sml_iconbox a p {
		margin: 0;
		line-height: 1.4;
	}
}

/* SP：メインビジュアルの余白調整 */
@media (max-width: 584px) {
	#hero_erea {
		padding: 1rem 1rem 0;
	}

	#hero_left {
		margin-top: 1rem;
	}

	#hero_right {
		margin-top: 0;
		padding-top: 3rem;
	}

	#hero_container h1 {
		margin-bottom: 1rem;
	}
}

@media (max-width: 584px) {
	#hero_erea {
		height: 400px;
	}

	#hero_container {
		height: 100%;
	}
}

@media (max-width: 584px) {
    .hero_right {
        margin-top: 0;
        padding-top: 6rem;
        align-self: center;
    }
}


.rogo_wide{height: clamp(75px,7vw,112px);}	
.rogo_sq{width: clamp(44px,7vw,62px);}
.rogo_name{ font-size: clamp(4.0rem,7vw,6rem) !important}
.rogo_wide_notxt{width: 250px;}
@media (max-width: 584px) {
    .rogo_wide_notxt{width: 205px;}
}
#hero_left h1 span {
	    font-size: clamp(4.2rem, 7vw, 8.0rem);
}
	
.hero_right {
    align-items: center;
      display: flex;
    flex-wrap: wrap;
    /* width: 100%; */
}
#hero_left, #hero_right {
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 4rem; */
}

@media (min-width: 1200px) {
  #hero_left, #hero_right {
  	gap: 50px;
  }
}

@media (max-width: 890px) {
    #hero {
        height: 600px;
    }
}

@media (max-width: 930px) {
    #hero_container {
        height: 84%;
    }
}

@media (max-width: 560px) {
    #hero_container {
        height: 64%;
    }
}

.mh_button p span {
	    font-size: 3.0rem !important;
}