@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */


/* =======================================================================================
	COMMON
======================================================================================= */


/* =======================================================================================
	PAGE
======================================================================================= */

/* ------------------------------------------------------------------------
 mainVisualWrap
------------------------------------------------------------------------ */






/* ------------------------------------------------------------------------
 meritSection
------------------------------------------------------------------------ */
	.meritSection {
		padding: 15px 0 20px;
		background: linear-gradient(to right, #e3e3e3 0%, #f8f8f8 50%, #e3e3e3 100%);
	}
	.meritSection .meritBox {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		width: 95%;
		line-height: 1.4;
        text-align: center;
		letter-spacing: .15em;	
	}

	.meritSection .meritBox .stName {
		--M-fluidFontSize-max-fontsize: 43;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		display: inline-block;
	}

@media screen and (max-width: 600px) {
	.meritSection {
		padding: 15px 0 ;
	}
}




/* ------------------------------------------------------------------------
forRentSection
------------------------------------------------------------------------ */
	.forRentWrap{
		max-width: 1400px;
		border: 1px solid rgba(255,255,255,0.40);
		padding: clamp(60px, (60 / 900 * 100vw), 80px)  clamp(40px, (40 / 900 * 100vw), 60px)  ;
	}
	.forRentSection .enHeading_S{
		text-align: center;
		color: #fffbeb;
		letter-spacing: .15em;
	}



/* noticeWrap
--------------------------------------------------*/
	.noticeItem .planningBox .planningTxt{
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);

		display: inline-block;
		border: 1px solid #ece4c3;
		color: #ece4c3;
		padding: 10px 2em 13px;
		line-height: 1.2;
		margin-top: var(--site-marpad-S) ;
	}
@media screen and (max-width: 600px) { 
	.forRentWrap{
		padding: clamp(40px, (40 / 600 * 100vw), 60px)  clamp(20px, (20 / 600 * 100vw), 40px)  ;
	}
	.noticeItem .planningBox .planningTxt {
	  padding: 10px 1em 13px;
	}
}




/* yokokuNoteWrap
------------------------------------------------------------------------ */
	.yokokuNoteWrap {
		font-size: max(1.05rem, .875em);
		margin-top: 60px;
		width: 100%;
	}
	.yokokuBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.yokokuTitle {
		width: auto;
	}
	.yokokuText {
		width: 80%;
		text-align: left;
		border-left: 1px solid #aaa;
		padding-left: 2em;
		margin-left: 2em;
	}

@media screen and (max-width: 600px) { 
	.yokokuBox  {
		text-align: left;
	}
	.yokokuBox > * {
		width: 100%;
		display: block;
	}

	.yokokuTitle > * {
		display: inline-block;
		letter-spacing: .1em;
		margin-bottom: .2em;
		padding: .05em .6em .05em .7em;
		border: 1px solid #aaa;
	}
	.yokokuText {
		border-left: none;
		padding-left: 0em;
		margin-left: 0em;
	}

}


/* ------------------------------------------------------------------------
 conceptSection 
------------------------------------------------------------------------ */

	.bukkenConceptTxt {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-serif);
		
		text-align: center;
		line-height: 2.3;
		text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
		letter-spacing: 0.17em;
	}
	.bukkenConceptTxt .txtBox > [class*="row"] {
		display: block;
	}

@media screen and (min-width: 600.02px)  {
	.conceptSection {
		position: relative;
		overflow: hidden;
		min-height:100lvh;
	}
	.conceptSection .sectionBg_Inner {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 
		z-index: 0;
		background: #fff;
	}
	.conceptSection .sectionBg_Inner::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100lvh;
		background-image: url("../images/index/stfront_p@pc.jpg");
		background-position: bottom center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	[data-js_show_target="sectionBg_Inner"]::before {
		transform: scale(1.1);
		filter: blur(6px);
		transition: filter 1s ease-in-out, transform 1.5s ease-in-out;
	}
	[data-js_show_target-passed="sectionBg_Inner"]::before {
		filter: blur(0);
		transform: scale(1);
	}

	.bukkenConceptBox {
		position: relative;
		color:#fff;
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		/*padding:clamp(250px, (250 / 1200 * 100vw), 380px)  4%;*/
		padding: 25% 4%;
	}
	.bukkenConceptPic .imgcapkeep {
		bottom: 0;
		left: 0;
		right: auto;
		color: #fff;
		background: rgba(123,89,55, .6);
		padding: 0.25em 0.5em;
	}
}

@media screen and (max-width: 600px) { 
	.conceptSection .sectionBg_Inner {
		background-image: url(../images/index/stfront_p@sp.jpg);
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 100lvh;
	}
}




/* ------------------------------------------------------------------------
innerpageLinkPickUpWrap/innerpageLinkWrap
------------------------------------------------------------------------ */
/*　共通　*/

	.innerlinkBtn {
		font-family: var(--site-font_family-en_1);
		font-size: 14px;
		letter-spacing: 0.1em;
		color: #000;
		display: block;
		position: relative;
		box-sizing: border-box;
		max-width: 250px;
		text-align: left; 
		padding: 12px 35px 12px 16px;
		margin-top:3em;
		border: 1px solid #fff;
		text-decoration: none;
		cursor: pointer;
		z-index:1;
		transition: all 0.3s;
		background: #fff;
		transition: all 0.3s;
	}
	.innerlinkBtn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -35px;
		width: 70px;
		height: 1px;
		background: #636363;
		transition: all 0.3s ease;
	}
	a[href]:hover .innerlinkBtn {
		background: transparent;
		color: #fff;
	}	
	 a[href]:hover .innerlinkBtn::after {
		animation: OutIn-Line 700ms;
		transition: all 0.3s;
		background: #fff;
	}
	 a:not([href]) .innerlinkBtn  {
		pointer-events: none;
	}	

@keyframes OutIn-Line {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    50.1% {
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@media screen and (max-width: 1200px) {
	 a[href] .innerlinkBtn  {
		max-width: 200px;
		padding: 10px 35px 10px 13px;
		margin-top:2em;

	}
}
@media screen and (max-width: 900px) {
	a[href] .innerlinkBtn  {
		font-size: 13px;
	}
}



/* ------------------------------------------------------------------------
innerpageLinkPickUpWrap
------------------------------------------------------------------------ */
	.innerpageLinkPickUpWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.innerpageLinkPickUpWrap .picBox{
		width: 48.4375%;
	}
	.innerpageLinkPickUpWrap .txtBox{
		padding: 2em 5%;
		width: 51.5625%;
	}
	.innerpageLinkPickUpWrap .bukkenConceptTtl {
		--M-fluidFontSize-max-fontsize: 45;
		--M-fluidFontSize-min-fontsize: 32;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 900;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-serif);

		line-height: 1.5;
		text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.7);
		letter-spacing: 0.2em;
		text-align: left;
		margin-bottom: 20px;
	}
	.innerpageLinkPickUpWrap .bukkenConceptTtl .enHeading_XS{
		text-align: left;
		color: #ece4c3;
		letter-spacing: 0.1em;
	}

	.innerpageLinkPickUpWrap .txtBox .btnBox{
		display: inline-block;
		max-width: 250px;
		width: 100%;
	}


@media screen and (max-width: 1200px) {
	.innerpageLinkPickUpWrap .txtBox {
	  padding: 1em 3%;
	}
	.innerpageLinkPickUpWrap .txtBox .ttl{
		margin-bottom: 1em;
	}
	.innerpageLinkPickUpWrap .txtBox .btnBox{
		max-width: 200px;
	}
	.innerpageLinkPickUpWrap .picBox{
		width: 55.438%;
	}
	.innerpageLinkPickUpWrap .txtBox{
		padding: 2em ;
		width: 44.563%;
	}
	.innerpageLinkPickUpWrap .bukkenConceptTtl {
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 1000px) {
	.innerpageLinkPickUpWrap{
		display: block;
		padding: 2.5% 0 60px;
	}
	.innerpageLinkPickUpWrap > *{
		width: 95%!important;
		margin: 0 auto;
	}
	.innerpageLinkPickUpWrap .picBox{
	}
	.innerpageLinkPickUpWrap .txtBox{
	}
}

@media screen and (max-width: 600px) {
/*	.innerpageLinkPickUpWrap{
		outline: 1px solid  rgba(255,255,255,0.35);
		outline-offset: -8px;
	}*/
	.innerpageLinkPickUpWrap .bukkenConceptTtl {
		margin-bottom: 25px;
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 28;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
}





/* ------------------------------------------------------------------------
innerpageLinkWrap
------------------------------------------------------------------------ */
	.innerpageLinkWrap .enHeading_S{
		text-align: center;
	}
	.innerpageLinkBox a {
	  pointer-events: none;
	}
	.innerpageLinkUnit {
		position: relative;
		margin-top: clamp(150px, (150 / 900 * 100vw), 200px) ;
		display: block;
	}
	.innerpageLinkUnit:first-child {
		margin-top: clamp(70px, (70 / 900 * 100vw), 150px) ;
	}
	.innerpageLinkUnit::after {
		content: "";                /* 必須：空のコンテンツ */
		display: block;             /* 要素をブロック化 */
		position: absolute;         /* 位置調整 */
		top: -13%;
		left: 0;
		width: 100%;                /* 幅 */
		height: 100%;               /* 高さ */
		background-size: cover;     /* カバー設定 */
		z-index: -1;                /* 親要素の背面に配置 */
		background: #FFFFFF var(--site-pattern-light);
	}
	.innerpageLinkUnit .innerpageLinkInner {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		
		width: calc(((100% - var(--site-sizeContentWide-M))/ 2) + var(--site-sizeContentWide-M));
		max-width: clamp(1760px, (1760 / 1920 * 100vw), 1920px);
	 	 margin-right: auto;
	 	 margin-left:0;
	 	 /*padding-left: calc(((100% - var(--site-sizeContentWide-M))/ 2));*/
	 	 padding-left:0;
	}

	/*picBox--------------*/
	.innerpageLinkUnit .innerpageLinkInner .picBox {
		width: 79.5454%;
	}

	/*txtBox--------------*/
	.innerpageLinkUnit .innerpageLinkInner .txtBox {
		/*width: 20.4545%;*/
		width: 18%;
		pointer-events: auto;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		color:#a29251;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox .enHeading_L {
		--M-fluidFontSize-max-fontsize: 38;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 900;
	}


	/*linkBtn*/
	a.innerpageLinkUnit .innerlinkBtn {
		max-width: 220px;
		padding: 10px 35px 10px 16px;
		margin-top: 2em;
	}


	/* reverse /hover*/
	.innerpageLinkUnit:nth-of-type(2n)::after {
		background: #000000 var(--site-pattern-dark);
	}
	.innerpageLinkUnit:nth-of-type(2n) .innerpageLinkInner {
		flex-direction:row-reverse;
		margin-right: 0;
		margin-left: auto;
		color: #fff;
	}
	 a.innerpageLinkUnit:nth-child(odd) .innerlinkBtn {
		color: #fff;
		border: 1px solid #000;
		background: #000;
	}
	 a[href].innerpageLinkUnit:hover:nth-child(odd) .innerlinkBtn  {
		background: transparent;
		color: #000;
	}	
	 a[href].innerpageLinkUnit:hover:nth-child(odd) .innerlinkBtn::after {
		background: #000;
	}

	.innerpageLinkUnit .picBox p {
		overflow: hidden;
		background: #000;
	}
	.innerpageLinkUnit .picBox p img {
		transition: all 0.5s ease-in-out 0s;
        filter:brightness(1);
	}
	
	@media (hover: hover) and (pointer: fine) {
		a[href]:hover.innerpageLinkUnit .picBox p img {
			transform: scale(1.1);
			 filter:brightness(1.1);
	}
}


/* COMING SOON */
	a:not([href]).innerpageLinkUnit .picBox p img {
			 filter:grayscale(1)  blur(5px);
		transform: scale(1.1);
	}


@media screen and (max-width: 1390px) {
	.innerpageLinkUnit .innerpageLinkInner .picBox {
		width: 70%;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox {
		/*width: 20.4545%;*/
		width: 27%;
	}	
}


@media screen and (max-width: 900px) {
	.innerpageLinkUnit {
		margin-top: clamp(100px, (150 / 700 * 100vw), 150px) ;
	}
	.innerpageLinkUnit .innerpageLinkInner .picBox {
		width: 60%;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox {
		/*width: 20.4545%;*/
		width: 36%;
		/*margin-top:clamp(30px, (30 / 600 * 100vw), 50px);*/
	}	
	.innerpageLinkUnit .innerpageLinkInner .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 600;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox .enHeading_L {
		--M-fluidFontSize-max-fontsize: 30;
		--M-fluidFontSize-min-fontsize: 26;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 480;
	}
	
	/*linkBtn*/
	a.innerpageLinkUnit .innerlinkBtn {
		max-width: 180px;
	}
}

@media screen and (max-width: 600px) {
	.innerpageLinkUnit {
		width: 100%;
	 	margin-left:auto;
	}
	.innerpageLinkUnit::after {
		top: 10%;
	}
	.innerpageLinkUnit:last-child {
		margin-bottom: 10%;
	}
	.innerpageLinkUnit .innerpageLinkInner {
		max-width:700px;
	}
	.innerpageLinkUnit .innerpageLinkInner .picBox,
	.innerpageLinkUnit .innerpageLinkInner .txtBox {
		width: 100%;
	}
	.innerpageLinkUnit .innerpageLinkInner .txtBox {
		margin-top:clamp(30px, (30 / 600 * 100vw), 50px);
	}	
	
	/* reverse */
	.innerpageLinkUnit:nth-child(odd) .innerpageLinkInner .txtBox {
		padding-left: 35px;
	}	
}