/* CSS Document */

@charset "UTF-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique&display=swap');

/*
Light   300
Regular 400
Medium  500
Bold    700
Black   900
*/

/*
@import "svg.css";
*/

:root{
/* color */
--color-K:#000;
--color-R:#ed1c24;
--color-Y:#fff697;
--color-G:#008479;
/* --color-clear:rgba(0,0,0,0.25); */
/* size */
/*
--size-header-H :0px;
--size-inner-mgn:0px;
--size-inner-maxW:calc(100% - var(--size-inner-mgn) * 2);
*/
--size-inner-pad:20px;
/* font */
--font-jp: "Zen Kaku Gothic Antique", sans-serif;
--font-en: "Josefin Sans", sans-serif;
--font-num: "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
/* transition */
--transition-fast:0.3s;
--transition-middle:0.5s;
}
/*
@media screen and (max-width: 999px) {
	:root{
		--size-header-H:60px;
	}
}
*/

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{font-size:16px;}
html *{
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	word-break: break-all;
	text-box-trim: trim-both;
}
body{
	margin: 0px; padding: 0px;
	font-size: 1rem; font-weight: 400;
	font-family: var(--font-jp);
	/* font-family: "Noto Sans JP",'游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif; */
	/* font-family: 'Zen Maru Gothic', sans-serif; */
	line-height:normal;
}
body,body *{line-height: normal;}
body,.col_base{color:var(--color-K);}
h1,h2,h3,h4,h5,h6,p,form,hr,
dl,dt,dd,ul,li,figure{margin:0; padding:0;}
ul,li{list-style-type: none;}
/* ul::after{clear:both;} */
span{display:inline-block;}
a{color:inherit;text-decoration:none;}
/*
a:hover{text-decoration: underline;}
a.ov_white{transition: opacity 0.3s ease;}
a.ov_white:hover{opacity:0.8;}
*/
a img{border:none;}
hr{
	/* border-top:solid 1px rgba(0,0,0,0.25); */
	border:none; border-top:solid 1px var(--color-K);
}
figure,img,svg{max-width:100%;display:block;}
picture{display: flex; justify-content: center; align-items: center;}
picture source{display: none;}
picture img,
figure img{width:100%; height:auto;}
img{min-width:1rem; object-fit:cover;}
img[src*=".svg"],svg{width:100%; object-fit:contain;}

/* ----- */

.anchor{position: relative;}
.anchor a{position:absolute;top:calc(var(--size-header-H) * -1);left:0;}

/* ----- */

body{overflow:hidden visible;}
body > *{min-width:375px;}
header,main,footer{display: flex; flex-direction: column; align-items: center;}
header{
	position: fixed;
	top:0; left:0; width:100%; z-index: 1000;
}
header > *{position: absolute; top:27px; left:36px; display: block;}
header h1{font-size: 8.8px; font-weight: 400;
gap: 0.5em; display: flex; flex-direction: column;}
header h1 img{width:282px!important;}
@media screen and (max-width: 999px) {
	header > *{top:15px; left:18px;}
	header h1{font-size: 5.78px;}
	header h1 img{width:189px!important;}
}

:root{
--kv-maxH:max(570px, calc(1vw * 570 / 3.75));
}
section.kv{position: fixed; inset: 0; z-index: 1; overflow: hidden; max-height:var(--kv-maxH);}
section.kv > *{position: absolute; inset: 0; width: 100%;}
section.kv img{max-height: 100%;}
section.kv img[src*="text"]{object-position: left center;}
section.kv *[fuwa],
main .fuwa{
	transition: opacity 0.5s
						, transform 0.5s;
}
section.kv *[fuwa]{transition-delay: calc(attr(fuwa s) / 2);}
section.kv:not(.moved) *[fuwa],
main .fuwa:not(.moved){
	opacity:0; transform: translateY(80px);
}
@media screen and (min-width: 1000px) {
	section.kv img{min-height: 800px;}
	section.kv img[src*="photo1"]{min-height: 900px;}
	section.kv img[src*="text"]{
		object-fit: cover;
		min-height: min(800px, 60vw);
		margin-left: min(0px, calc((1vw - 13px) * 50 / 2));
	}
}
@media screen and (max-width: 999px) {
	section.kv{position: relative; width: 100%;
		height: min(100vh,var(--kv-maxH));
		height: min(100dvh,var(--kv-maxH));
	}
	body:not([type="top"]) section.kv{display: none;}
}

main,footer{
	position: relative; z-index: 2;
	width:375px; max-width: 100%;
	margin: 0 auto;
}
main{
	min-height: 100vh;
	min-height: 100dvh;	
	padding-top: 70px;
}
@media screen and (min-width: 1000px) {
	body[type="top"] main{
		padding-top: min(100vh,var(--kv-maxH));
		padding-top: min(100dvh,var(--kv-maxH));
	}
}
@media screen and (max-width: 999px) {
	body[type="top"] main{
		padding-top: 0;
		margin-top: min(0px,max(-50px,calc((100vw - 525px) / 3)));
	}
}
main > *{width:100%;}
main > section,
main .inner{padding: 0 var(--size-inner-pad);}
main > section{text-align: justify;}
main > img[src*="main-top."] + section.bg_Y{margin-top: -1.25rem; padding-top: 1.25rem;}
main section.bg_Y:not(:last-of-type){padding-bottom: 50px;}
main h2.G{font-size: 25px; line-height: 36px; color: var(--color-G); white-space: pre-wrap;}
main h4{font-size: 1rem; font-weight: 700; line-height: 36px; margin-top: 1.5em;}
main .cmn_text{font-size: 1rem; line-height: 33px; white-space: pre-wrap;}
main .cmn_text.font14{font-size: 14px; line-height: 26px;}
main h2.G + .cmn_text{margin-top: 1em;}
main h4 + .cmn_text{margin-top: 0.5em;}
main .of_hidden{overflow: hidden;}

.bg_Y{background-color: var(--color-Y);}
.bg_W{background-color: #FFF;}

:root{
--bukken_set-pad:26px;
}
.bukken_set{border:solid 3px var(--color-G); background-color: #FFF; margin-top: calc(var(--size-inner-pad) * 2);
	border-radius: 30px 0 30px 0; padding: 25px 0;
}
.bukken_set + .bukken_set{margin-top: var(--size-inner-pad);}
.bukken_set .photo{padding-left: var(--bukken_set-pad); display: flex; justify-content: flex-end;}
.bukken_set .photo img{width:100%; height:207px; border-radius: 15px 0 0 15px;}
.bukken_set dt{padding-left: var(--bukken_set-pad); font-size: 20px; font-weight: 700; margin-top: 1em; white-space: pre-wrap;}
.bukken_set .price,
.detail_prof .price{text-align: right; color: var(--color-R);
font-size: 32px; font-weight: 700;}
.bukken_set .price{padding-right: var(--bukken_set-pad);}
.bukken_set .price font,
.detail_prof .price font{font-size: calc(1em + 10px); line-height: normal; font-family: var(--font-num); display: inline-block;}
.bukken_set .price::after,
.detail_prof .price::after{content:'（税込）'; display: inline-block; font-size: 1rem; margin: 0 -0.5em;}
.bukken_set .price[zei]::after,
.detail_prof .price[zei]::after{content:attr(zei);}
.bukken_set .price[zei=""]::after,
.detail_prof .price[zei=""]::after{content:none; margin: 0;}
.bukken_set .cmn_text,
.detail_prof .cmn_text,
.detail_set .cmn_text{line-height: 26px; margin-top: 1em;}
.detail_set .cmn_text:first-child{margin-top: 0;}
.bukken_set .cmn_text{padding: 0 var(--size-inner-pad);}
.bukken_set .btn{padding: 0 var(--size-inner-pad); margin-top: var(--size-inner-pad);}

.btn_oval,
.detail_prof h2{
	text-align: center; font-weight: 700; position: relative;
	width:100%; min-height: 55px; border-radius: 55px;
	display: flex; justify-content: center; align-items: center;}
.btn_oval{background-color: var(--color-K); color:#FFF; font-size: 1rem;}
.btn_oval::after{content:'';display: block; width: 10px; height: 16px;
	position: absolute; right: 25px;
	background-image: url("../img/common/arrow-btn.svg");
	background-position: center center;
	background-repeat: no-repeat;
}
.btn_oval.tel{min-height: 79px; border-radius: 79px;}
.btn_oval.tel img{width: auto; height: 46px;}
.btn_oval.tel dl dd{font-size: 14px; line-height: 27px; margin: -2px 0 2px;}
.btn_oval.tel dl dd:nth-of-type(2){font-size: 25px; font-weight: 900; margin: -0.2em 0;}

.detail_prof{}
.detail_prof h2{background-color: #FFF; font-size: 1.25rem;
	white-space: pre-wrap; padding: 0.5em 0;}
.detail_prof dl{margin-top: 25px;}
.detail_prof .photo img{width:100%; height:227px; border-radius: 20px;}

.detail_set{margin-top: 50px;}
.detail_set.bg_W{border-top-left-radius: 25px; padding-bottom: 20px;}
.detail_prof + .detail_set{margin-top: 35px;}
.detail_set h3{background-color: var(--color-G); color:#FFF;
	font-size: 19px; font-weight: 700; line-height: 1em; padding: 0 15px 1px; margin-bottom: 25px; min-height: 30px;
	border-radius: 15px 0 15px 0;
	display: flex; justify-content: space-between; align-items: center;
}
.detail_set h3[en]::after{content: attr(en); opacity: 0.5;
	font-size: 12px; font-family: var(--font-en); line-height: 1em; padding-top: 3px;}
.detail_set h3[en="FLOOR PLAN"] + .inner img{margin: 0 auto 0;}
.detail_set h3[en="FLOOR PLAN"] + .inner img:nth-child(n+2){margin-top: 25px;}
.detail_set h3[en="GALLERY"] ~ img{width:100%; border-radius: 20px;}
.detail_set h3[en="GALLERY"] ~ img + img{margin-top: 20px;}
.detail_set iframe{width:100%; height: auto; display: block;}
.detail_set h3[en="ACCESS"] ~ iframe{aspect-ratio: 335 / 250;}
.detail_set h3[en="PERFORMANCE"] ~ .cmn_text{margin-top: 0.75em;}
.detail_set h3[en="PERFORMANCE"] ~ img ~ img{width:100%; margin-top: 30px;}
.detail_set table{width:100%; border-collapse: collapse; border-top: solid 1px #b3b3b3; margin-top: 0.75em;}
.detail_set table tr > *{font-size: 14px; font-weight: 400; line-height: 1.5em;
text-align: justify; vertical-align: middle;
white-space: pre-wrap; padding: 0.5em 1em;
border-bottom: solid 1px #b3b3b3;}
.detail_set table th{width:7em; background-color: #dbedec;}
.detail_set table td{}
.detail_set .tel_set{margin-top: 50px;}
.detail_set .tel_set .cmn_text{text-align: center; line-height: 24px;}
.detail_set .back{
	padding: 0 var(--size-inner-pad);
	margin-top: calc(var(--size-inner-pad) * 2);
}

footer{text-align: center; font-size: 10px; line-height: 1em; background-color: #FFF;
padding: calc(var(--size-inner-pad) * 2) 0 var(--size-inner-pad);}
body[type="top"] footer{background-color: var(--color-Y);}


/* ----- */

.pc_vanish{}
.sp_vanish{}
.im_vanish{display:none!important;}
.pc_br_del{}
.sp_br_del{}
.vanish_branch{}
.vanish_branch_onoff{}
@media screen and (min-width: 1000px) {
	.pc_vanish,
	.pc_br_del br,
	.pc_div_del div,
	.vanish_branch img[src*="-sp."],
	.vanish_branch_onoff img[src*="-sp."]{display:none!important;}
}
@media screen and (max-width: 999px) {
	.sp_vanish,
	.sp_br_del br,
	.sp_div_del div,
	.vanish_branch img[src*="-pc."],
	.vanish_branch_onoff img:not([src*="-sp."]){display:none!important;}
}

/*
.W100per{width:100%;}
.Wbase{
	width:100%;
	max-width:1000px;
	margin: 0 auto;
}
.Wbase.W1400{max-width:1400px;}
.Wbase[w]{max-width:attr(w px);}
*/
@media screen and (max-width: 999px) {
}

/* CSSだけで多角形を作る */
/*
.clippath{width:100%; height:90px;
background-color: #F00;
clip-path: polygon(0 100%, 100% 0, 90% 100%, 0 100%);
}
*/

/* 印刷用CSS */
/*
@media print{
  印刷用CSSの定義を指定する
}
※印刷時は
「@media screen and (min-width: 1000px)」
「@media screen and (max-width: 999px)」内のスタイルは効かなくなる
*/
@media print{
	.pc_vanish{display:none!important;}
	header{position:relative;}
	main{padding-top: 0;}
}