/*
Last Updated: 2025-09-29
Author: zeal
*/

/*----------------------------------------
	全体
----------------------------------------*/

html{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{ vertical-align: bottom; }

a{
	color:#21436b;
	transition: all 0.5s ease-out;
}
a:hover{
	color:#0078bf;
	transition: all 0.5s ease-out;
}

.text_red{ color: #e60012; }
.text_green{ color: #6e8b20; }
.text_bold{ font-weight: bold; }
.text_500{ font-weight: 500; }
.text_normal{ font-weight: normal; }
.fjalla{ font-family: 'Fjalla One', sans-serif; }
.futura{ font-family: 'Hind', sans-serif; }
.text_yu_min{ font-family:'游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Sawarabi Mincho',serif; }
.text_meiryo{ font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif; }



/*----------------------------------------
	text
----------------------------------------*/

p{ line-height:1.8; }

.text_11{ font-size:1.1rem !important; }
.text_12{ font-size:1.2rem !important; }

/*line-height*/
.lh_15{ line-height: 1.5 !important; }

/*letter-spacing*/
.ls_1{ letter-spacing: 1px; }
.ls_2{ letter-spacing: 2px; }
.ls_3{ letter-spacing: 3px; }

@media print, screen and (min-width: 769px) {

	.text_16{ font-size:1.6rem !important; }
	.text_18{ font-size:1.8rem !important; }
	.text_22{ font-size:2.2rem !important; }
	.text_36{ font-size:3.6rem !important; }
	.text_48{ font-size:4.8rem !important; }

	/*line-height*/
	.lh_20{ line-height: 2 !important; }
	.lh_22{ line-height: 2.2 !important; }

	/*letter-spacing*/
	.ls_4{ letter-spacing: 4px; }

}/*END*/

@media screen and (max-width: 768px){

	.text_16,
	.text_18{
		font-size: 1.5rem;
	}
	.text_22{ font-size: 1.8rem !important; }
	.text_36{ font-size: 2.6rem !important; }
	.text_48{ font-size: 3.2rem !important; }

	/*letter-spacing*/
	.ls_4{ letter-spacing: 3px; }

	/*line-height*/
	.lh_20{ line-height: 1.8 !important; }
	.lh_22{ line-height: 1.8 !important; }

}/*END*/

@media screen and (max-width: 599px){

	.text_16,
	.text_18{
		font-size: 1.4rem;
	}
	.text_22{ font-size: 1.6rem !important; }
	.text_36{ font-size: 2.4rem !important; }
	.text_48{ font-size: 3rem !important; }

	/*letter-spacing*/
	.ls_4{ letter-spacing: 2px; }

}/*END*/


/*----------------------------------------
	共通
----------------------------------------*/

#container{ overflow: hidden; }
li{ list-style:none; }
.center{ text-align:center; }
.text_center{ text-align:center; }
.m_center{ margin-inline: auto; }
.op img{ transition: all 0.4s ease-out; }
.op:hover img{
	filter: alpha(opacity=60);
	-moz-opacity:060;
	opacity:0.60;
	transition: all 0.4s ease-out;
}
.main_ttl img {
    max-width: 390px;
    width: 45%;
}
.sub_ttl img{
	max-width: 500px;
	width: 90%;
}

.ttl_center{
	margin-right: auto;
	margin-left: auto;
}
.rela{
	position: relative;
}
.nowrap{text-wrap: nowrap;}
@media screen and (max-width: 599px){
	.main_ttl img {
		width: 50%;
	}
	.text_center{ text-align:left; }
}
/*----------------------------------------
	layout
----------------------------------------*/

.inner_frame{
	width: 100%;
	max-width: 1100px;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	box-sizing: border-box;
}
.main_frame{
	max-width: 1350px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

@media print, screen and (min-width: 769px) {
	.sp_br{
		display: none;
	}

}/*END*/

@media print, screen and (min-width: 600px) {

	.mv_sp{
		display: none;
	}

}/*END*/

@media screen and (max-width: 599px){

	.pc_br{
		display: none;
	}
	.mv_pc{
		display: none;
	}
	.main_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}

}/*END*/

.box_l{
	float: left;
	width: 48.11%;
}
.box_r{
	float: right;
	width: 48.11%;
}

@media screen and (max-width: 599px){

	.box_l,
	.box_r{
		float: none;
		width: 100%;
	}

}/*END*/


/*----------------------------------------
	header
----------------------------------------*/

header a{
	display: block;
	color: inherit;
	text-decoration: none;
}
header h1{
	float: left;
	font-weight: normal;
	color: #666;
	font-size: 1.1rem;
	line-height: 1.4;
}
.head_official{
	float: right;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
}
.head_official:hover{ color: #22548f; }
.foot_official img,
.head_official img{
	width: 6px;
	vertical-align: middle;
	margin-right: 6px;
}
.head_logo{
	float: left;
	width: 28.49%;
}
.head_tel{
	float: right;
	font-size: 3.1rem;
	padding-top: 12px;
	font-family: 'Cabin', sans-serif;
	font-weight: bold;
}
.head_tel img{
	vertical-align: -2px;
	width: 20px;
	margin-right: 8px;
}
.head_contact{
	float: right;
	color: #fff;
	background: #0f1254;
	font-size: 1.6rem;
	margin-left: 2%;
	font-weight: bold;
	text-align: center;
	padding-top: 14px;
	padding-bottom: 14px;
	margin-top: 4px;
}
.head_contact:hover{
	color: #fff;
	background: #1b22ae;
}
#sd{ background: #fff !important; }
#sd li{ letter-spacing: 2px; }
#sd li a{ color: #000; }

@media print, screen and (min-width: 769px) {

	header{
		padding-top: 6px;
		padding-bottom: 20px;
	}
	header h1{ margin-bottom: 13px; }
	.head_logo{ margin-bottom: 22px; }
	#sd{
		width: 100%;
		max-width: inherit;
	}
	#sd li{
		float: left;
		box-sizing: border-box;
		width: 14.28%;
		text-align: center;
		font-size: 1.6rem;
	}
	#sd li a{
		border-right: 1px solid #21436b;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	#sd li:first-child a{ border-left: 1px solid #21436b; }
	#sd li a{ position: relative; }
	#sd li a:hover{
		background: #faf6a7;
		box-shadow:0px 0px 6px 3px #fff inset;
	}
	.head_contact{ width: 24.52%; }

}/*END*/

@media print, screen and (min-width: 769px) and ( max-width: 959px) {

	#sd li{
		font-size: 1.4rem;
		letter-spacing: 1px;
	}
	.head_contact{
		font-size: 1.4rem;
		padding-top: 11px;
		padding-bottom: 11px;
		margin-top: 8px;
	}

}/*END*/

@media print, screen and (min-width: 960px) and ( max-width:1119px) {

	#sd li{
		font-size: 1.5rem;
		letter-spacing: 1px;
	}
	.head_contact{
		font-size: 1.5rem;
		padding-top: 12px;
		padding-bottom: 12px;
		margin-top: 6px;
	}

}/*END*/

@media screen and (max-width: 768px){

	header{
		padding-top: 10px;
		padding-bottom: 15px;
	}
	header .inner_frame{ padding-right: 3%; }
	header h1{
		margin-bottom: 14px;
		font-size: 1rem;
	}
	.head_logo{
		width: 70%;
		max-width: 260px;
	}
	.sd-trigger{
		float: right;
		position: relative;
		width: 48px;
		height: 38px;
		background: #fff;
		cursor: pointer;
		border: 1px solid #21436b;
		margin-top: 2px;
	}
	.sd-trigger span{
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		width: 25px;
		background-color: #21436b;
	}
	.sd-trigger span:nth-of-type(1){ top: 11px; left: 11px; }
	.sd-trigger span:nth-of-type(2){ top: 19px; left: 11px; }
	.sd-trigger span:nth-of-type(3){ top: 27px; left: 11px; }
	#sd ul{
		margin-bottom: 0;
		border-top: 1px solid #ccc;
	}
	#sd li{ position: relative; }
	#sd li a{
		display: block;
		text-decoration: none;
		padding: 18px 2% 18px 8%;
		border-bottom: 1px solid #ccc;
		font-size: 1.5rem;
	}
	#sd li.pc_none a{ border: none; }
	.drawer_contact,
	.drawer_tel{
		margin-top: 5px;
		font-family: 'Cabin', sans-serif;
		font-weight: bold;
	}
	.drawer_tel a{
		color: #000;
		font-size: 2.4rem !important;
		letter-spacing: 0 !important;
	}
	.drawer_tel img{
		width: 18px;
		margin-right: 10px;
		vertical-align: -3px;
	}
	.drawer_contact a{
		background: #aa0000;
		color: #fff !important;
		text-align: center;
		font-size: 1.4rem !important;
		letter-spacing: 1px !important;
	}

}/*END*/


/*----------------------------------------
	concept
----------------------------------------*/

.concept_bg{
	background: #fcfcfc;
	position: relative;
}

.concept_deco01{
    position: absolute;
    left: -11%;
    top: 78%;
    max-width: 383px;
    width: 100%;
}
.concept_flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
}
.concept_flex > div:nth-child(1){
	width: 50%;
}
.concept_flex > div:nth-child(2){
	width: 55%;
}
.concept_inner_box{
	display: flex;
	justify-content: end;
}
.g_concept_text {
    flex: 0 0 95%;
}
.g_concept_text >p:nth-child(2){
    z-index: 1;
    position: relative;
}
.p_concept_left{
	padding-left: 7%;
}
@media screen and (max-width: 599px){
	.concept_flex {
		flex-direction: column;
		gap: 60px;
	}
	.concept_flex > div:nth-child(1) {
		width: 100%;
	}
	.concept_flex > div:nth-child(2) {
		width: 100%;
	}
	.g_concept_text {
		flex: 0 0 100%;
	}
	.p_concept_left {
		padding-left: 0%;
	}
	.concept_deco01 {
		left: initial;
		right: -5%;
		width: 40%;
	}
}
/*----------------------------------------
	land
----------------------------------------*/
.land_bg{
	background: #b83434;
}
#land{
	background: #fff;
	position: relative;
}
.land_deco{
    position: absolute;
    right: 17%;
    top: 30%;
    width: 14%;
    max-width: 165px;
}
#land ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: end;
}
#land ul li p{
	padding-left: 5%;
	padding-right: 5%;
}
@media screen and (max-width: 1100px){
	.land_deco {
		right: 12%;
	}
}
@media screen and (max-width: 599px){
	.land_deco {
		right: 15%;
		top: 42%;
	}
	#land ul{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
        column-gap: 10px;
	}
	#land ul li{
	border-left: none;
}
}


/*----------------------------------------
	plan
----------------------------------------*/
.plan_ttl img{
	max-width: 235px;
	width: 100%;
}
.plan_ttl_flex {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 15%;
}
.plandata_box {
    display: flex;
    justify-content: flex-end;
}
.plandata_flex {
    flex: 0 0 84%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plandata_flex > p{
	width: 60%;
}
.plandata_flex > div{
	width: 37%;
}
.plan01_deco {
    position: absolute;
    left: 3%;
    bottom: 6%;
    width: 11%;
    max-width: 83px;
}
.plan02_deco {
    position: absolute;
    left: -1%;
    bottom: -7px;
    width: 15%;
    max-width: 127px;
}
.plan_deco01{
    position: absolute;
    left: 13%;
    bottom: 0;
    width: 22%;
    max-width: 213px;
}
.plan_deco02 {
    position: absolute;
    right: 25%;
    bottom: -7px;
    width: 6%;
    max-width: 54px;
}
#plan{
	background: #b9b877;
}
.plan_box{
	background: #fff;
	padding-left: calc((100/1060)*100%);
	padding-right: calc((100/1060)*100%);
}
#plan li{
	margin-bottom: 40px;
}
#plan li img{
	display: block;
	float: left;
	width: calc((90/920)*100%);
	padding-top: 5px;
}
#plan li p{
	float: right;
	width: calc((800/920)*100%);
}
.plan_flex{
	display: flex;
	column-gap: 40px;
}
.plan_flex_box1{
	width: 50%;
}
.plan_flex_box2{
	width: 50%;
}
@media print, screen and (max-width: 1100px){
	.plan_deco01 {
		left: 8%;
	}
	.plan_deco02 {
		right: 17%;
	}
}
@media print, screen and (min-width: 600px){

	.plan_madori img{
		float: left;
		width: 50%;
	}

}/*END*/
@media screen and (max-width: 599px){
	.plan_box{
		padding-left: calc((60/1060)*100%);
		padding-right: calc((60/1060)*100%);
	}
	.plandata_flex {
		align-items: flex-start;
		flex-direction: column;
		gap: 30px;
	}
	.plandata_flex > p {
		width: 100%;
	}
	.plandata_flex > div {
		width: 80%;
	}
	.plan01_deco {
		bottom: initial;
		top: 0%;
	}
	.plan02_deco {
		bottom: initial;
		top: 0%;
	}
	.plan_deco01 {
		left: 1%;
		width: 27%;
	}
	.plan_deco02 {
		right: 13%;
		width: 7%;
	}
	.plan_ttl_flex {
		align-items: flex-start;
		gap: 20px;
		flex-direction: column;
	}
	.plan_ttl img {
		width: 80%;
	}
	#plan li{
		margin-bottom: 20px;
	}
	#plan li img{
		width: 10%;
	}
	#plan li p{
		width: 85%;
	}
	.plan_flex{
	flex-direction: column;
	}
	.plan_flex_box1{
	width: 100%;
}
	.plan_flex_box2{
	width: 100%;
}

}/*END*/

/*----------------------------------------
	F'sの家
----------------------------------------*/

@media print, screen and (min-width: 600px){

	#house ul{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 20px;
	}

}/*END*/

@media screen and (max-width: 599px){

	#house ul li{
		margin-bottom: 35px;
	}

}/*END*/


/*----------------------------------------
	location
----------------------------------------*/

#location {
    background-image: url(../images/realestate/uemachi4/location_bg.jpg);
    background-repeat: repeat;
}
.location01{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 30px;
	margin-bottom: 40px;
}
.location_flex {
    display: flex;
    justify-content: space-between;
    gap: 4%;
}
.location_flex > div{
	width: 50%;
}
.location01 li{
	position: relative;
}
.location_fukidashi{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -25px;
	width: calc((260/510)*100%);
}
.location02{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.location_table h3{
    background: #5e423c;
	color: #fff;
	text-align: center;
	padding: 7px 0;
	font-weight: normal;
}
.location_table table{
	width: 100%;
	line-height: 1.6;
}
.location_table table th{
	font-weight: normal;
	text-align: left;
	padding: 5px 10px 5px 0;
}
.location_table table td{
	text-align: right;
	padding: 5px 0;
}

@media print, screen and (min-width: 600px){

	.location_table{
		width: calc((520/1060)*100%);
	}

}/*END*/

@media screen and (max-width: 599px){

	.location01{
		gap: 20px;
		margin-bottom: 40px;
	}
	.location02{
		grid-template-columns: repeat(2,1fr);
		gap: 20px;
	}
	.location_table{
		width: 100%;
	}

	.location_flex_box1{
		width: 100%;
	}
	.location_flex_box2{
		width: 100%;
	}

}/*END*/


/*----------------------------------------
	access
----------------------------------------*/

.g_map{
	aspect-ratio: 27/10;
	overflow: hidden;
}
.g_map iframe{
	width: 100%;
	height: 100%;
}
.access_flex {
    display: flex;
    column-gap: 5%;
    justify-content: space-between;
}
@media screen and (max-width: 599px){
	.access_flex{
	flex-direction: column;
	row-gap: 30px;
}
	.g_map{
	aspect-ratio: 10/10;
}
}


/*----------------------------------------
	outline
----------------------------------------*/

#outline{
	background: #b83434;
}
#outline table{
	width: 100%;
}
#outline table tr{
	width: 100%;
	line-height: 1.7;
	border-top: 1px solid #fff;
}
#outline table th,
#outline table td{
	border-bottom: 1px solid #fff;
	text-align: left;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 18px 10px;
	box-sizing: border-box;
	background: none !important;
	color: #fff;
}
#outline table th{ width: 15em; }
@media screen and (max-width: 768px){
	#outline table th {
    width: 9em;
}
}
@media screen and (max-width: 599px){

	#outline table th,
	#outline table td{
		display: block;
		width: 100%;
		border-top: none;
	}
	#outline table th{
		padding: 8px 10px 0 10px;
		border: none;
	}
	#outline table td{
		padding: 0 10px 8px 10px;
	}

}/*END*/