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

/*開発用*/
div,img,a,span{
	/*border: solid 1px #cccccc;*/
}

/* ==========================================
   リセット＆基本設定
========================================== */
* {
  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%;
	/*min-height: 100%;*/
}

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

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;
}
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;
}
.point_tomato{
	color: #ff6347;
}

/* ==========================================
   ヒーローセクション
========================================== */
#hero_erea{
	background: url("../images/hero_base_1920.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;
	display: flex;
	justify-content: 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;
	height: 100%;
	
	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;
	/*width: 100%;*/
}
.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: block;
	width: 285px;
	height: 75px;
	font-size: clamp(1.5rem,7vw,2.2rem);
	margin-right: 2rem;
	align-self:end;
}
.sp_under{ background: #ffffff; }

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

	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;
	/*height: clamp(100px,7vw,111px);*/
	object-fit: contain;	
} 
.rogo_wide_notxt{
	width: 150px;
	height: auto;
	object-fit: contain;
	
}
.rogo_sq{
	width: 95px;
	height: auto;
	object-fit: contain;
}
/*.rogo_sq + .rogo_name { font-size: 4.5rem !important;}*/

/* ==========================================
   動画エリアショート
========================================== */
#PU_short{
	width: 100%;
	height: auto;
	background: url("../images/short_back.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("../images/tokuchou_back.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;		
	}
}
.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;
	/*min-height: 100vh;*/
}
.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{
	/*max-width: 1188px;*/
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	/*margin: 0 auto 11rem auto;*/
	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;
	/*border: 4px solid #19A3DE;*/
	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("../images/mh_back.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: 215px;
	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("../images/mh_pic/mh_hokkaido.png") no-repeat bottom center; }
.mh_picbox > .tokyo{ background: url("../images/mh_pic/mh_tokyo.png") no-repeat bottom center; }
.mh_picbox > .aichi{ background: url("../images/mh_pic/mh_aichi.png") no-repeat bottom center; }
.mh_picbox > .osaka{ background: url("../images/mh_pic/mh_osaka.png") no-repeat bottom center; }
.mh_picbox > .kyusyu{ background: url("../images/mh_pic/mh_kyusyu.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;
}
.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
========================================== */
footer{
	width: 100%;
	height: 166px;	
	position: sticky;
	text-outline: 100vh;
	bottom: 0;
	left: 0;
	text-align: center;
	transform: translateY(100%);
	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;
}


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;
	/*height:22px;*/
	padding: 0.8rem 3.0rem;
	}
.foot_sml_iconbox{
	display: flex;
	justify-content: center;
	padding: 0 0 1.4rem;
	width: 100%;

	a{
		/*margin: 0 0.8rem;*/
		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("../images/home.svg") no-repeat;
	/*width: 27px;
	height: 40px;*/
}
.link_yt_ch{
	background: url("../images/youtube.svg") no-repeat;
	/*width: 35px;
	height: 40px;*/
}
.link_insta{
	background: url("../images/insta_icon.svg") 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{
			/*font-size: 4.0rem;*/
			margin-bottom: 1.4rem;
		}
		
		p{
			opacity: 1.0!important;
			/*font-size: 2.5rem;*/
		}
	}
	button{	opacity: 1.0!important;	}
	.hero-cta-button{ 
		white-space: nowrap;
		/*width: 293px;*/
		/*height: 80px;*/
		/*font-size: 2.4rem;*/
		margin-bottom: 1rem;
		margin-right: 0;
		padding-top: 1.0rem;
	}
}
/* タブレット (890px以下) */
@media (max-width: 890px) {
	/*.copy_size_m{ font-size: 5rem; }*/
	/*.copy_size_l{ font-size: 5rem; }*/
#hero{
	height: 600px;
}
	
	#builder_name_box{
	justify-content: center;
	}
	.rogo_wide_notxt{
		/*width: 100px;*/
	}	
	
	.hero-cta-button{
		width: 100%;
		padding: 1.8rem 1rem;
		font-size: 1.9rem;		
	}
	.hero_bottom{
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 19rem;
	}
	
	
	
	/*ピックアップショート*/
	#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{
			/*width: 177px;
			height: auto;*/
		}
	}

/* ==========================================
   注意事項・注釈
========================================== */
	.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{}
	}
	
	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;
		height: 385px;
	}
	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: 15rem; */
		align-items: stretch;
    	height: 100%;
	}
	#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{
		/*width: 230px;*/
	}
	.rogo_wide_notxt{}
	
/*	.rogo_sq{
		width: 75px;		
	}*/
	/*.rogo_sq + .rogo_name{
		font-size: 3.5rem !important;
	}*/

	.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{ /*font-size: 1.8rem;*/ }
	}
	/*.copy_size_m{ font-size: 3.5rem; }
	.copy_size_l{ font-size: 4.2rem; }*/
	.hero_bottom{
		align-self: center;
	}
	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;
	}
	
	
	/*メカニズム動画*/
	.long_parent{	}
	.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;
			margin-left: 4rem;
		}
	}
	.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{}
	}
	
	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{
	}
}