/*
takakuradai4
Last Updated: 2026-03-11
Author kayama
*/
@charset "utf-8";

/*----------------------------------------
	共通
----------------------------------------*/
body{
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
}
p{ 
	line-height: 2.4; 
	font-feature-settings: "palt";/* 追加　*/
}
.rela{position: relative;}
.abs{position: absolute;}
.m_center {
	display: block;
	margin-inline: auto;
}

.sp_block {display: none;}
.pc_block {display: block;}
@media screen and (max-width: 599px) {
	.sp_block {display: block;}
	.pc_block {display: none;}
}
.sp_block400 {display: none;}
@media screen and (max-width: 599px) {
	.sp_block400 {display: block;}
}

/*----------------------------------------
	text
----------------------------------------*/
.text_gray{color: #3a3a3a;}

.ls_06{letter-spacing: 0.6px;}
.ls_26{letter-spacing: 2.6px;}
.ls_20{letter-spacing: 2px;}
.lh_25{line-height: 2.5;}

.text_center{text-align: center;}
.text_right{text-align: right;}

.text_bold{font-weight: bold;}
.text_400{font-weight: 400;}
.text_500{font-weight: 500;}

.nowrap{white-space: nowrap;}

.yu_min{ font-family:'游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝',serif; }

.text_15{ font-size: clamp(1.3rem,1.442vw,1.5rem);}
.text_16{ font-size: clamp(1.4rem,1.538vw,1.6rem); }
.text_18{ font-size: clamp(1.5rem,1.731vw,1.8rem); }
.text_28{ font-size: clamp(2rem,2.43vw,2.8rem); }
.text_36{ font-size: clamp(2.2rem,3.13vw,3.6rem); }

@media screen and (max-width: 599px) {
	.text_center{text-align: left;}
}	


/*----------------------------------------
	layout
----------------------------------------*/
.btn_house img{
	max-width: 350px;
	width: 30%;
}
.ttl_550 img{max-width: 550px;}
.ttl_500 img{max-width: 500px;}
.ttl_160 img{
	max-width: 160px;
	width: 100%;
}
.ttl_center{
	margin-right: auto;
	margin-left: auto;
}
@media screen and (max-width: 599px) {
	.btn_house img{
		width: 100%;
	}
}


/*----------------------------------------
	frame
----------------------------------------*/
.inner_frame{
	width: 100%;
	max-width: 1190px;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
	.inner_frame{
		padding-right: 2.5%;
		padding-left: 2.5%;
	}
}/*END*/
@media screen and (max-width: 768px){
	.inner_frame{
		padding-right: 3.5%;
		padding-left: 3.5%;
	}
}/*END*/
@media screen and (max-width: 599px){
	.inner_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
}/*END*/



/*----------------------------------------
	map
----------------------------------------*/
.map{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 45% 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: 599px) {
	.map{ padding: 60% 0 0; }
}/*END*/



/*----------------------------------------
	共通設定
----------------------------------------*/
.bg{
	background-image: url(../../images/land_of_sale/land/takakuradai4/plan_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}


/*----------------------------------------
	mv
----------------------------------------*/
.mv_bg{
	background: #fcf9e8;
}


/*----------------------------------------
	concept
----------------------------------------*/
.concept_deco01,
.concept_deco02 {
	position: absolute;
}
.concept_deco01 {
	max-width: 192px;
	width: 17%;
	top: 6%;
	left: 36%;
}
.concept_deco02 {
	max-width: 74px;
	width: 8%;
	bottom: 0;
	right: 0;
}
@media screen and (max-width: 768px) {
	#concept .flex50 img {
		margin-inline: unset;
	}
	#concept .flexbox {
		gap: 20px;
	}
	.concept_deco01 {
		width: 23%;
		left: auto;
		right: 3%;
	}
	.concept_deco02 {
		width: 15%;
		right: 1%;
	}
}
@media screen and (max-width: 599px) {
	.concept_deco01 {
		width: 30%;
	}
}


/*----------------------------------------
	plan
----------------------------------------*/
.plan_deco01,
.plan_deco02 {
	position: absolute;
	top: 0;
}
.plan_deco01 {
	max-width: 254px;
	width: 16%;
	left: 0;
}
.plan_deco02 {
	max-width: 334px;
	width: 21%;
	right: 0;
}
@media screen and (max-width: 599px) {
	#plan .gap01 {
		gap: 35px;
	}
	.plan_deco01 {
		width: 23%;
	}
	.plan_deco02 {
		width: 25%;
	}
}


/*----------------------------------------
	spec
----------------------------------------*/
.spec_point{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 50px;
}
.chouki_frame{
	background: #fff;
	border: 20px solid #e5e5e5;
	box-sizing: border-box;
	width: 100%;
	padding-right: 3%;
}
.chouki_img {
	max-width: 600px;
	width: 100%;
}
.spec_list{
	display: grid;
	height: auto;
	grid-template-columns: repeat(4,1fr);
	gap: 50px;
}
@media screen and (max-width: 768px){
	.spec_point{
		gap: 20px;
	}
	.chouki_frame {
		border: 0px;
		padding-right: 0;
	}
	.chouki_frame .flex40 {
		margin-top: 20px;
	}
	.spec_list{
		gap: 15px;
	}
}/*END*/
@media screen and (max-width: 599px){
	.spec_point{
		grid-template-columns: repeat(1,1fr);
	}
	.spec_list{
		grid-template-columns: repeat(2,1fr);
	}
}/*END*/


/*----------------------------------------
	location
----------------------------------------*/
.location_deco01,
.location_deco02 {
	position: absolute;
	top: 0;
}
.location_deco01 {
	max-width: 288px;
	width: 18%;
	left: 0;
}
.location_deco02 {
	max-width: 295px;
	width: 19%;
	right: 0;
}
.location_list > div{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #d8d0d0;
    gap: 1em;
    line-height: 1.4;
}
.location_list > div:first-of-type{
	border-top: 1px solid #d8d0d0;
}
.location_list dd{
	text-align: right;
}
.location_bottm{
	display: grid;
	grid-template-columns: 1fr auto;
}
@media screen and (max-width: 768px) {
	#location .ttl_160.m_t60 {
		margin-top: 0;
	}
	#location .ttl_160 {
		margin-top: 30px !important;
	}
	#location .ttl_160 img {
		margin-inline: unset;
	}
}
@media screen and (max-width: 599px) {
	.location_deco01,
	.location_deco02 {
		width: 25%;
	}
	.flex_two .location_list:not(:last-child){
		margin-bottom: 30px!important;
	}
}


/*----------------------------------------
	access
----------------------------------------*/
.access_deco01,
.access_deco02 {
	position: absolute;
}
.access_deco01 {
	max-width: 114px;
	width: 10%;
	top: 0;
	left: 36%;
}
.access_deco02 {
	max-width: 70px;
	width: 6%;
	bottom: 1%;
	left: 0;
}
@media screen and (max-width: 768px) {
	#access .ttl_500 img {
		margin-inline: unset;
	}
	#access .access_station {
		margin-top: 30px;
	}
	#access .map.m_t100 {
		margin-top: 0 !important;
	}
	.access_deco01 {
		width: 16%;
		left: auto;
		right: 10%;
	}
	.access_deco02 {
		width: 8%;
		bottom: auto;
		left: 5%;
		top: 34%;
	}
}
@media screen and (max-width: 599px) {
	.access_deco01 {
		width: 23%;
		top: 2%;
		left: auto;
		right: 3%;
	}
	.access_deco02 {
		width: 13%;
		bottom: auto;
		left: 1%;
		top: 29%;
	}
}



/*----------------------------------------
	outline
----------------------------------------*/
.outline_l{
	float: left;
	width: 47.82%;
}
.outline_r{
	float: right;
	width: 47.82%;
}
#outline table{
	line-height: 2;
	width: 100%;
	border-top: 1px solid #e5e5e5;
}
#outline th{
	font-weight: normal;
	text-align: left;
	background: #faf7d2;
	border-bottom: 1px solid #e5e5e5;
	padding: 4px 10px;
	box-sizing: border-box;
	width: 150px;
	vertical-align: baseline;
}
#outline td{
	border-bottom: 1px solid #e5e5e5;
	padding: 4px 10px;
	box-sizing: border-box;
}
@media screen and (max-width: 768px){
	.outline_r{
		margin-top: 20px;
	}
	.kigen tr{
		display: flex;
		flex-direction: column;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
	}
	.kigen th{
		width: unset!important;
	}
	.kigen th,.kigen td{
		border-bottom: none!important;
	}
}
@media screen and (max-width: 599px){
	.outline_l,
	.outline_r{
		float: none;
		width: 100%;
	}
	.kigen th,
	.kigen td{
		display: block;
		width: 100% !important;
	}
	#outline td,
	#outline th{
		font-size: 1.3rem;
	}
	#outline th{
		width: 120px;
	}
}/*END*/


/*----------------------------------------
	contact set
----------------------------------------*/
.contact_set{
	text-align: center;
}
.contact_set ul{
	display: grid;
	height: auto;
	grid-template-columns: repeat(3,1fr);
	gap: 50px;
}
.contact_set a{
	display: block;
}
@media screen and (max-width: 768px){
	.contact_set ul{gap: 30px;}
}/*END*/
@media screen and (max-width: 599px){
	.contact_set ul{
		display: block;
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}
	.contact_set ul li{margin-bottom: 20px;}
}/*END*/


/*----------------------------------------
	flexbox/gridbox
----------------------------------------*/
.gridbox {display: grid;}
.grid_two,
.grid_three,
.grid_four{
	display: grid;
	column-gap: 3.5%;
	row-gap: 30px;
}
.grid_two{grid-template-columns: repeat(2,1fr);}
.grid_three{grid-template-columns: repeat(3,1fr);}
.grid_four{grid-template-columns: repeat(4,1fr);}
@media screen and (max-width: 599px) {
	.grid_two,
	.grid_three{
		grid-template-columns: repeat(1,1fr);
	}
	.grid_four{	grid-template-columns: repeat(2,1fr);}
}

.flexbox {display: flex;}
.flex20 {width: 20%;}
.flex30 {width: 30%;}
.flex40 {width: 40%;}
.flex45 {width: 45%;}
.flex46 {width: 46%;}
.flex47 {width: 47%;}
.flex48 {width: 48%;}
.flex49 {width: 49%;}
.flex50 {width: 50%;}
.flex55 {width: 55%;}
.flex60 {width: 60%;}
.flex70 {width: 70%;}
.fd_rr {flex-direction: row-reverse;}
.jc_c { justify-content: center;}
.jc_e {justify-content: flex-end;}
.jc_s {justify-content: flex-start;}
.jc_bw {justify-content: space-between;}
.ai_c {align-items: center;}
.ai_s {align-items: flex-start;}
.ai_e {align-items: flex-end;}
.gap005 {gap: .5em;}
.gap01 {gap: 1em;}
.gap02 {gap: 2em;}
.gap03 {gap: 3em;}
.gap04 {gap: 4em;}
.gap05 {gap: 5em;}
.gap06 {gap: 6em;}
.gap07 {gap: 7em;}
.gap08 {gap: 8em;}
.gap09 {gap: 9em;}
.gap10 {gap: 10em;}
@media screen and (max-width: 768px) {
	.flexbox {flex-direction: column;}
	.sp_row {flex-direction: row;}
	.flex20,.flex30,
	.flex40,.flex45,
	.flex46,.flex47,
	.flex48,.flex49,
	.flex50,.flex55,
	.flex60,.flex70 {
		width: 100%;
	}
	.flex20 img,.flex30 img,
	.flex40 img,.flex45 img,
	.flex46 img,.flex47 img,
	.flex48 img,.flex49 img,
	.flex50 img,.flex55 img,
	.flex60 img,.flex70 img {
		display: block;
		margin-inline: auto;
	}
	.grid_4 {grid-template-columns: repeat(2, 1fr);}
    .gap04,.gap05 {gap: 2em;}
	.gap06,.gap07 {gap: 3em;}
	.gap08 {gap: 4em;}
	.gap09,.gap10 {gap: 5em;}
}

/* 個別指定 */
#concept .flex_two > div:nth-child(1){
	width: 44%!important;
}
#concept .flex_two > div:nth-child(2){
	width: 47.5%!important;
}
.flex_two._location > div:nth-child(1) {
    width: 47.5% !important;
}
.flex_two._location > div:nth-child(2){
	width: 43.5%!important;
}
#access .flex_two > div:nth-child(1){
	width: 42%!important;
}
@media screen and (max-width: 599px) {
	.flex_two,
	.flex_two.reverse{
		flex-direction: column;
		row-gap: 30px;
	}
	.flex_two > div{
		width: 100%;
	}
	.sp_dis_contents{
		display: contents;
	}
	/* 個別指定 */
	#concept .flex_two > div:nth-child(1){
		width: 100%!important;
	}
	#concept .flex_two > div:nth-child(2){
		width: 100%!important;
	}
	.flex_two._location > div:nth-child(1){
		width: 100%!important;
	}
	.flex_two._location > div:nth-child(2){
		width: 100%!important;
	}
	#access .flex_two > div:nth-child(1){
		width: 100%!important;
	}
}
.sp_archive_link_layout{
	display: flex;
	flex-direction: column-reverse;
	position: relative;
}
@media screen and (max-width: 599px) {
	.sp_archive_link_layout{
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.sp_archive_link_layout_text{
		width: 55%;
	}
	.sp_archive_link_layout_img{
		width: 42%;
	}
}




.top_line_dots{
	position: relative;
}
.top_line_dots::after{
	content: "";
    width: 80%;
    height: 1px;
    border-top: 3px dashed #b3b3b3;
    position: absolute;
    top: 0;
    left: 10%;
}