/*
Last Updated: 2026-02-10
Author:zeal
*/

/*----------------------------------------
	全体
----------------------------------------*/
html{
	font-family:'游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	color: #000;
	-webkit-text-size-adjust:100%;
}
body{
	font-size:1.4rem;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
#container {
	overflow: hidden;
}
img{
	vertical-align: bottom;
}
li{
	list-style:none;
}
a{
	color:#000;
	text-decoration: none;
}
p{
	line-height: 2.2;
}
.op {
	transition: .4s;
}
.op:hover{
	filter: alpha(opacity=60);
	-moz-opacity: 060;
	opacity: .60;
}
.respon{
	width: 100%;
}
.max_respon{
	max-width:100%;
}
.w_fit {
	width: fit-content;
}
.cover_img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}
.hidden {
	overflow: hidden;
}


.sp_none{ display:block; }
.pc_none{ display:none; }
@media screen and (max-width: 768px){
	.sp_none{ display:none; }
	.pc_none{ display:block; }
}/*END*/

.block {display: block;}
.none {display: none;}
.sp_only {display: none;}
@media screen and (max-width: 599px){
	.sp_only {display: block;}
	.sp_block{ display:block; }
	.pc_block{ display:none; }
	.pc_inline_block{ display:none; }
	.sp_inline_block{ display:inline-block; }
}/* end */


/*----------------------------------------
	flexbox
----------------------------------------*/
.flexbox {
	display: flex;
}
.row_reverse {
	flex-direction: row-reverse;
}
.jc_b {
	justify-content: space-between;
}
.jc_c {
	justify-content: center;
}
.ai_c {
	align-items: center;
}
.ai_e {
	align-items: flex-end;
}
.gap10 {
	gap: 10px;
}
.gap20 {
	gap: 20px;
}
.gap30 {
	gap: 30px;
}
.gap40 {
	gap: 40px;
}
.gap50 {
	gap: 50px;
}
@media screen and (max-width: 768px) {
	.flexbox {
		flex-direction: column;
	}
	.tb_gap0 {
		gap: 0;
	}
}
@media screen and (max-width: 599px) {
	.sp_gap0 {
		gap: 0;
	}
}

.box_common_p {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 11.11%;
}
@media screen and (max-width: 768px) {
	.box_common_p {
		align-items: start;
		padding: 9% 7%;
	}
}
@media screen and (max-width: 599px) {
	.box_common_p {
		align-items: start;
		padding: 6% 4.5%;
	}
}

.box500 {
	width: calc( 500 * 100% / 1150 );
	flex: none;
}
.box550 {
	width: calc( 550 * 100% / 1150 );
	flex: none;
}
.box600 {
	max-width: 600px;
	width: calc( 600 * 100% / 1050 );
	flex: none;
}
.max350 {
	max-width: 350px;
}
.max550 {
	max-width: 550px;
}
@media screen and (max-width: 768px) {
	.flex {
		flex-wrap: wrap;
	}
	.flex.sp_no_wrap,
	.sp_no_wrap {
		flex-wrap: nowrap!important;
	}
	.flex.sp_reverse {
		flex-direction: column-reverse;
	}
	.sp_reverse {
		display: flex;
		flex-direction: column-reverse;
	}
	.box500,
	.box550,
	.box600 {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.sp_max_w {
		width: 100%;
		max-width: 100%;
	}
}

/*----------------------------------------
	gridbox
----------------------------------------*/
.grid_three {
	display: grid;
	grid-template-columns: repeat(3,1fr);
}

@media screen and (max-width: 768px) {
	.grid_three {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width: 599px) {
	.grid_three {
		display: grid;
		grid-template-columns: repeat(1,1fr);
	}
}


/*----------------------------------------
	width
----------------------------------------*/
.box60{width: 60%; }
.box55{width: 55%; }
.box50{width: 50%; }
.box48{width: 48.5%; }
.box47{width: 47.5%; }
.box45{width: 45%; }
.box40{width: 40%; }
.box35{width: 35%; }
.box25{width: 25%; }
.box75{width: 75%; }


.ttl_550 img{
	width: 100%;
	max-width: 550px;
}
.ttl_500 img{
	width: 100%;
	max-width: 500px;
}
.ttl_600 img{
	width: 45%;
	max-width: 600px;
}
.ttl_620 img{
	width: 100%;
	max-width: 620px;
}
@media screen and (max-width: 768px) {
	.ttl_600 img,
	.ttl_500 img{
		width: 90%;
	}
}



/*----------------------------------------
	position
----------------------------------------*/
.rela{position: relative;}
.z_1 {	z-index: 1;}
.z_2 {	z-index: 2;}
.z_3 {	z-index: 3;}


/*----------------------------------------
	background
----------------------------------------*/
.bg_green {
	background: #4d6b5a;
}
.bg_black {
	background: #000;
}
.bg_white {
	background: #fff;
}
.bg_light_brown{
	background:#d8d2bf;
}
.bg_brown{
	background:#b5ae97;
}
.bg_deep_brown{
	background:#948e79;
}
.bg_navy{
	background: #17204d;
}
.bg_beige{
	background: #d8d2bf;
}
.bg_light_beige{
	background: #f6f3e8;
}
.bg_light_blue{
	background: #f0f6fa;
}


/*----------------------------------------
	text
----------------------------------------*/
.yumin{
	font-family:'游明朝体','Yu Mincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝','Sawarabi Mincho',serif;
}
.meiryo{
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
}

.text_gray{ color: #555; }
.text_white{ color:#fff; }
.text_black{ color:#000; }
.text_navy {color: #2d4d66;}
.text_green {color: #4d6b5a;}

.text_bold{ font-weight: bold; }
.text_normal{ font-weight: normal; }
.text_500{ font-weight: 500; }

.text_center { text-align:center; }
.center{ text-align:center; }
.text_right {text-align:right;}
.text_left {text-align:left;}

.palt {
	font-feature-settings: 'palt';
}

/*line-height*/
.lh_09 {line-height: 0.9;}
.lh_12{ line-height: 1.2 !important; }
.lh_13{ line-height: 1.3 !important; }
.lh_14{ line-height: 1.4 !important; }
.lh_15{ line-height: 1.5 !important; }
.lh_16{ line-height: 1.6 !important; }
.lh_18{ line-height: 1.8 !important; }
.lh_20{ line-height: 2.0 !important; }
.lh_22{ line-height: 2.2 !important; }
.lh_24{ line-height: 2.4 !important; }
.lh_26{ line-height: 2.6 !important; }
.lh_28{ line-height: 2.8 !important; }
.lh_30{ line-height: 3.0 !important; }
.lh_32{ line-height: 3.2 !important; }
@media screen and (max-width: 768px) {
	.lh_22{ line-height: 2.0 !important; }
	.lh_24{ line-height: 2.0 !important; }
	.lh_26{ line-height: 2.4 !important; }
	.lh_28{ line-height: 2.4 !important; }
}

/*letter-spacing*/
.ls_1{ letter-spacing: 1px; }
.ls_2{ letter-spacing: 2px; }
.ls_3{ letter-spacing: 3px; }
.ls_4{ letter-spacing: 4px; }
.ls_5{ letter-spacing: 5px; }
.ls_6{ letter-spacing: 6px; }
.ls_7{ letter-spacing: 7px; }
.ls_8{ letter-spacing: 8px; }

/*font-size*/
.text_10{ font-size: 1.0rem;}
.text_11{ font-size: clamp(1.0rem,0.957vw,1.1rem);}
.text_12{ font-size: clamp(1.4rem,1.043vw,1.2rem); }
.text_13{ font-size: clamp(1.1rem,1.130vw,1.3rem);}
.text_14{ font-size: clamp(1.4rem,1.217vw,1.4rem); }
.text_15{ font-size: clamp(1.3rem,1.304vw,1.5rem);}
.text_16{ font-size: clamp(1.4rem,1.391vw,1.6rem); }
.text_17{ font-size: clamp(1.4rem,1.478vw,1.7rem); }
.text_18{ font-size: clamp(1.5rem,1.565vw,1.8rem); }
.text_19{ font-size: clamp(1.6rem,1.652vw,1.9rem); }
.text_20{ font-size: clamp(1.7rem,1.739vw,2.0rem); }
.text_22{ font-size: clamp(1.7rem,1.913vw,2.2rem);}
.text_24{ font-size: clamp(1.8rem,2.087vw,2.4rem);}
.text_26{ font-size: clamp(1.8rem,2.261vw,2.6rem); }
.text_28{ font-size: clamp(1.8rem,2.435vw,2.8rem); }
.text_30{ font-size: clamp(2.0rem,2.609vw,3rem); }
.text_32{ font-size: clamp(2.2rem,2.800vw,3.2rem); }
.text_34{ font-size: clamp(2.4rem,3vw,3.4rem); }

@media screen and (max-width: 599px){
	.sp_text_left{ text-align:left; }
	.sp_center {text-align: center;}
	.sp_text_left{text-align: left;	}
	.sp_text_left_b {text-align: left;}
	.sp_text_left_b br{display: none;}
}/*END*/


/*----------------------------------------
	margin
----------------------------------------*/
.m_center {
	display: block;
	margin-inline: auto;
}
.m_left {
	display: block;
	margin-left: auto;
}
.m_right {
	display: block;
	margin-right: auto;
}
.m_t_auto {
	margin-top: auto;
}
@media screen and (max-width: 768px) {
	.tb_m_center {
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 599px) {
	.sp_m_center {
		margin-left: auto;
		margin-right: auto;
	}
}



/*----------------------------------------
	list box
----------------------------------------*/
.list_two{
	display: flex;
	flex-wrap: wrap;
	gap: calc( 50 * 100% / 1150 );
}
.list_two > li{
	width: calc( 550 * 100% / 1150 );
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: calc( 50 * 100% / 1150 );
}
@media screen and (max-width: 768px){
	.list_two{
		gap: 0%;
	}
	.list_two > li{
		width: 100%;
		margin-bottom: 30px;
	}
	.list_two.sp_no_wrap li{
		width: calc( 550 * 100% / 1150);
		margin-bottom: 0px;
	}
}/*END*/

.list_three {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: calc( 50 * 100% / 1150 );
}
.list_three > li {
	width: calc( 350 * 100% / 1150 );
	margin-bottom: calc( 50 * 100% / 1150 );
}
@media screen and (max-width: 768px) {
	.list_three {
		gap: 4%;
	}
	.list_three > li {
		width: 85%;
		margin-bottom: 10px;
	}
	.list_three.sp_list_two > li {
		margin-bottom: 25px;
		width: 48%;
	}
}

.list_four {
	display: flex;
	flex-wrap: wrap;
	gap: calc( ( 100% - ( ( 250 * 100% / 1150 ) * 4) ) / 3);
}
.list_four > li {
	margin-bottom: calc( ( 100% - ( ( 250 * 100% / 1150 ) * 4) ) / 3);
	width: calc( 250 * 100% / 1150 );
}
@media screen and (max-width: 768px) {
	.list_four {
		gap: 4%;
	}
	.list_four > li {
		margin-bottom: 25px;
		width: 48%;
	}
}


/*----------------------------------------
	iframe中央配置
----------------------------------------*/
/*iframe比率維持*/
.map{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 50% 0 0;
	text-align: center;
}
.map iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}
.map iframe:not(:target){
	left: 0\9;
	top: 0\9;
}
.map iframe{
	left: 0\9;
	top: 0\9;
}
@media all and (-ms-high-contrast: none) {
	.map iframe{
		left: 50%\9 !important;
		top: 50%\9 !important;
	}
}
.map{ z-index: 2; }/*chrome対策*/

@media screen and (max-width: 768px){
	.map{
		padding: 75% 0 0;
	}
}/*END*/


/*----------------------------------------
	frame
----------------------------------------*/
.frame1350{
	max-width: 1350px;
	width: 100%;
	margin: 0 auto;
}
.inner_frame {
	max-width: 1190px;
	margin-right: auto;
	margin-left: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
@media screen and (max-width: 768px){
	.inner_frame{
		padding-right: 7%;
		padding-left: 7%;
	}
}/*END*/
@media screen and (max-width: 599px){
	.inner_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
}/*END*/




/*----------------------------------------
	mv
----------------------------------------*/
.mv_frame {
	width: 100%;
	display: flex;
}
.mv_rt {
	width: 37.04%;
}
.mv_lt {
	width: 62.96%;
}
@media screen and (max-width: 850px) {
	.mv_rt {
		display: none;
	}
	.mv_lt {
		width: 100%;
	}
}


/*----------------------------------------
	concept
----------------------------------------*/
#concept {
	padding: 100px 1em 200px;
}
#concept h2 {
	padding-top: 30px;
}
.bg_concept {
	background-image: url(../images/concept_bg.png);
	background-size: 100% 100%;
}
#concept p {
	display: block;
	max-width: 580px;
	width: 43%;
	margin-inline: auto;
}
.concept_deco {
	max-width: 304px;
	width: 23%;
	position: absolute;
	top: 0;
}
.concept_deco._01 {
	left: 0;
}
.concept_deco._02 {
	right: 0;
}
@media screen and (max-width: 768px) {
	#concept {
		padding: 100px 1em 200px;
	}
	.concept_deco {
		display: none;
	}
	#concept p {
		width: 100%;
	}
}
@media screen and (max-width: 599px) {
	#concept {
		padding: 50px 1em 150px;
	}

}


/*----------------------------------------
	land
----------------------------------------*/
#landplan h2,
#landplan p {
	width: 50%;
}
@media screen and (max-width: 768px) {
	#landplan h2 {
		width: 80%;
	}
	#landplan p {
		width: 100%;
		margin-top: 30px;
	}
}


/*----------------------------------------
	features
----------------------------------------*/
.bg_features {
	background-image: url(../images/featuires_bg.png);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.features_deco {
	max-width: 227px;
	width: 20%;
	position: absolute;
	top: -4%;
	right: 4%;
}
.features_text h3 {
	max-width: 430px;
	width: 100%;
}
.features_text {
	width: 50%;
}
.features_img01 {
	max-width: 528px;
	width: 100%;
}
.features_img02 {
	max-width: 508px;
	width: 100%;
}
.features_img03 {
	max-width: 508px;
	width: 100%;
}
.feactures_point02_deco {
	max-width: 340px;
	width: 67%;
	position: absolute;
	top: -42%;
	right: -20%;
}
.feactures_point03_deco {
	max-width: 273px;
	width: 54%;
	position: absolute;
	bottom: -46%;
	left: -12%;
}
@media screen and (max-width: 768px) {
	.bg_features.p_t150 {
		padding-top: 100px;
	}
	.features_deco {
		width: 16%;
		top: 0;
	}
	#features .point {
		width: 90%;
		margin-inline: auto;
	}
	.point.gap50 {
		gap: 20px;
	}
	.features_text {
		width: 100%;
	}
	.features_text h3 {
		width: 85%;
	}
	.features_text .m_t30 {
		margin-top: 10px;
	}
	.feactures_point02_deco {
		width: 50%;
		top: -17%;
		right: -8%;
	}
	.feactures_point03_deco {
		width: 54%;
		bottom: 59%;
		left: auto;
		right: -6%;
	}

    .bg_features {
        background-image: url(../images/featuires_bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg_features::before {
        content: '';
        background: #edf5f9;
        position: absolute;
        top: 200px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
        

    .bg_concept {
        background-image: url(../images/sp_concept_bg.png);
        background-position: center -50px;
        background-repeat: no-repeat;
    }
    /*
    .bg_concept::before {
        content: '';
        background: #dde3f1;
        position: absolute;
        top: -200px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    */









}/* END */


/*----------------------------------------
	location
----------------------------------------*/
.location_deco {
    max-width: 485px;
    width: 100%;
}
.location dl{
	overflow: hidden;
	padding: 18px 5px;
	border-bottom: 1px solid #4d6b5a;
}
.location .top_border01,
.location .top_border02 {
	border-top: 1px solid #4d6b5a;
}
.location dd{
	text-align: right;
}
.location dt{
	width: 58%;
	float: left;
}
.location dd{
	width: 40%;
	float: left;
	text-align: right;
}
@media print, screen and (max-width: 768px) {
	.location_deco {
		width: 90%;
	}
	#location .box50 {
		width: 100%;
	}
	#location .gap50 {
		gap: 0;
	}
	.location .top_border02 {
		border-top: none;
	}
	.location dt{
		width: 49%;
	}
	.location dd{
		width: 50%;
	}
}/*END*/
@media print, screen and (max-width: 599px) {
	.location dd,
	.location dt{
		font-size: 1.3rem;
	}
	.location dt{
		width: 54%;
	}
	.location dd{
		width: 46%;
	}
}/*END*/



/*----------------------------------------
	grantee
----------------------------------------*/
.bg_gurantee {
	background-image: url(../images/gurantee_bg.jpg);
	background-size: cover;
}
@media print, screen and (max-width: 768px) {
	#gurantee .gap30 {
		gap: 10px;
	}
	#gurantee ul li img {
		display: block;
		width: 90%;
		margin-inline: auto;
	}
}


/*----------------------------------------
	specification
----------------------------------------*/
.spec_ttl h2 {
	width: 55%;
}
.spec_ttl p {
	width: 45%;
}
@media screen and (max-width: 768px) {
	.spec_ttl h2 {
		width: 80%;
	}
	.spec_ttl p {
		width: 100%;
		margin-top: 20px;
	}
}



/*----------------------------------------
	outline
----------------------------------------*/
.outline_table {
	width: 100%;
}
.outline_table th,
.outline_table td {
	box-sizing: border-box;
	padding: 1em;
	font: 1.4rem;
	border-bottom: 1px solid #5d6972;
	line-height: 1.5;
}
.outline_table th {
	color: #fff;
	background: #3b4e5d;
	width: 10.2em;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}
.outline_table td {
	background: #fff;
}
@media screen and (max-width: 768px) {
	#outline .gap50 {
		gap: 0;
	}
	.outline_table th,
	.outline_table td {
		display: block;
		width: 100%;
		padding: 0.6em;
	}
}

