@charset "utf-8";

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

/* bnr_onlinesalonWrap
------------------------------------------------------------------------ */
	.bnr_onlinesalonWrap {}



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

/* main | メインビジュアルをスティッキーヘッダーと重ねる場合「margin-top:0;」にする。 | （ざっくり対応ver ※厳密にする場合はJSで
------------------------------------------------------------------------ */
/*@media screen and (max-width: 1200px) {
	main { margin-top: var(--site-stickyHeader-height); }
}
@media screen and (max-width: 736px) {
	main { margin-top: 0; }
}*/



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

/* mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		position: relative;
		overflow: hidden;
	}
	.mainVisual {
		text-align: center;
	}
	.mainVisual .scene01 {
		filter: blur(20px);
		
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		gap: 0.3em;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: rgba(255, 255, 255, .9);
		background: rgba(var(--site-themeColor-main),1) url("../images/index/bg2.webp") bottom center no-repeat;
		background-size: cover;
	}
	.mainVisual .scene01 .txtBox {
		opacity: 0;
		filter: blur(10px);

		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 12.5;
		--M-fluidFontSize-max-viewport: 1260;
		--M-fluidFontSize-min-viewport: 320;
		--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);
	}
	.mainVisual .sceneFix {
		opacity: 0;
		filter: grayscale(1) blur(20px);
		transform: scale(1.15);
		
		position: relative;
		z-index: 100;
	}
	.mainVisual .sceneFix .txtBox {
		opacity: 0;
		filter: blur(20px);

		position: absolute;
		top: 24%;
		left: 50%;
		width: 70%;
		transform: translate(-50%, -50%);
		max-width: 535px;
	}
	.mainVisual .sceneFix img {
		width: 100%;
		max-width: none;
	}
	.mainVisual .sceneFix img {
		width: 100%;
		max-width: none;
	}
	.mainVisual .fontColor {
		color: #f5ebc4;
		
		font-weight: bolder;
		background: var(--site-variationColor-gradient_gold);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
.mainVisual em.fontColor {
	margin-right: 0.05em;
}


@media screen and (min-width: 736.02px) {
	.mainVisual .sceneFix .txtBox {
		top: 24%;
		left: 67.3%;
		width: calc(535/ 1920 * 100%);
	}
}





/* meritWrap
------------------------------------------------------------------------ */
	.meritWrap {
		color: rgba(255, 255, 255, .9);
		box-shadow: 0 0 27px rgba(255, 255, 255, .08) inset;
		border-bottom: 1px solid rgba(105, 105, 105, .4);
		backdrop-filter: blur(10px);
	}
	.meritWrap li {
		text-align: center;
		font-size: min(0.9em,2.9vw);
		padding: 1.5em 0.5em 0.8em;
		border: 0px solid rgba(105, 105, 105, .4);
	}
	.meritWrap li strong {
		font-size: 1.3em;
		line-height: 1.2;
	}
	.meritWrap li em {
		display: inline-block;
		font-size: 1.9em;
		line-height: 1.2;
		margin-right: 2px;
		
		color: #c6bb92;
		/*font-weight: bolder;
		background: var(--site-variationColor-gradient_gold);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;*/
	}

@media screen and (min-width: 736.02px) {
	.meritWrap {
		padding-bottom: 1em;
	}
	.meritWrap ul {
		display: flex;
		flex-wrap: wrap;
		column-gap: 0;
		justify-content: center;
		
		width: var(--site-sizeContentWide-L);
		max-width: var(--site-sizeMaxWidth-L);
		margin: 0 auto;
	}
	.meritWrap li {
		width: calc(50% - 1px);
		text-align: center;
		font-size: 1.2vw;
		padding-left: 1.5em;
		padding-right: 1.5em;
		/*border-width: 0 0 0 1px !important;*/
	}
	.meritWrap li:nth-of-type(2n) {	border-left-width: 1px;}
	.meritWrap li:nth-of-type(n+3) {	border-top-width: 1px;}
	
}
@media screen and (min-width: 1050.02px) {
	.meritWrap ul {			flex-wrap: nowrap; column-gap: 0.8em;}
	.meritWrap li {		width: auto;	text-align: left; font-size: min(0.86em,0.9vw);	border-width: 0 0 0 1px !important;		}
	.meritWrap li strong {		font-size: 1.2em;	}
}
@media screen and (max-width: 736px) {
	.meritWrap {
		box-shadow: 0 0 11px rgba(255, 255, 255, .08) inset;
		backdrop-filter: blur(0px);
	}
	.meritWrap li:not(:last-child) {
		border-width: 0 0 1px;
	}
}



/* informationWrap
------------------------------------------------------------------------ */
	.informationWrap {
		width: 90%;
		margin: 0 auto;
		padding: var(--site-marpad-S) 0;
	}
	.informationWrap h2 {
		display: flex;
		align-items: center;
		column-gap: 5px;
		justify-content: flex-start;
		color: #917540;
		line-height: 1.4;
		font-family: var(--site-font_family-en_1);
		font-weight: 700;
	}
	.informationWrap h2::before {
		content: "";
		display: block;
		width: 2em;
		height: 2em;
		margin-right: 10px;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(255, 255, 255, .2) inset;
		background: url("../images/index/ico_news.svg") center center no-repeat;
		background-size: 50% auto;
	}
	.informationWrap h2 em {
		color: rgba(255, 255, 255, .8);
		font-size: 0.8em;
		font-weight: 400;
		line-height: 1.6;
		padding: 0 0.3em;
		border: 1px solid rgba(255, 255, 255, .4);
	}
	.informationWrap .btnBox {
		display: flex;
		column-gap: 10px;
		margin-top: var(--site-marpad-XXS);
	}
	.informationWrap .btnBox > * {
		width: max(40%, 300px);
	}
	.informationWrap [class*="btn"] a {
		width: 100%;
		margin: 0;
	}
@media screen and (min-width: 736.02px) {
	.informationWrap {
		width: var(--site-sizeContentWide-M);
		max-width: 1120px;
		margin: 0 0 0 auto;
	}
	.informationWrap header {
		width: 100px;
	}
	.informationWrap h2 {
		flex-direction: column;
	}
	.informationWrap h2::before {
		width: 52px;
		height: 52px;
		box-shadow: 0 0 27px rgba(255, 255, 255, .2) inset;
		border-radius: 10px;
		margin-bottom: 1em;
	}
	.informationWrap h2 em {
		margin-top: 0.5em;
	}
}
@media screen and (max-width: 1050px) {
	.informationWrap {
		margin: 0 auto 0;
	}
}

/*newsWrap*/
	.newsWrap .noticeWrap {
		margin: var(--site-marpad-XXS) 15px 0 calc(2em + 15px); 
	}
	.newsWrap .noticeWrap .noticeItem {
		color: rgba(255, 255, 255, .9);
		text-align: left;
		margin: 0 0 0;
	}
	.newsWrap .noticeWrap .noticeItem + .noticeItem{
		margin-top: var(--site-marpad-XS);
	}

@media screen and (min-width: 736.02px) {
	.newsWrap {
		display: grid;
		column-gap: 2em;
		grid-template-columns: 100px 1fr;
	}
	.newsWrap .noticeWrap {
		margin: calc((52px - 3em)/ 2) 0 0;
	}
}

/*libraryWrap*/
	.libraryWrap {
		margin-top: var(--site-marpad-S);
	}
	.libraryWrap .txtBox {
		color: rgba(255, 255, 255, .9);
		line-height: 1.8;
	}
	.libraryWrap .entryMeritWrap {
		position: relative;
		margin: var(--site-marpad-XXS) 15px 0 calc(2em + 15px); 
	}
	.libraryWrap .entryMeritWrap .swiper {
		width: 100%;
		max-width: 430px;
		margin: 0;
	}
	.libraryWrap .entryMeritWrap .swiper-wrapper {
		margin: 2.2em 0;
	}
	.libraryWrap .entryMeritWrap .swiper-slide {
		display: flex;
		align-items: center;
		width: 100% !important;
		column-gap: 2em;
		box-shadow: 0 0 27px rgba(255, 255, 255, .1) inset;
	}
	.libraryWrap .entryMeritWrap .swiper-slide .picBox {
		width: 30%;
	}
	.libraryWrap .entryMeritWrap .swiper-pagination {
		bottom: 3px;
		text-align: right;
		padding-top: 0.5em;
	}
	.libraryWrap .entryMeritWrap .swiper-pagination-bullet {
		background: rgba(255, 255, 255, .9);
	}
	.libraryWrap .entryMeritWrap .swiper-pagination-bullet-active {
		background: rgba(var(--site-themeColor-accent_1),1);
	}

@media screen and (min-width: 736.02px) {
	.libraryWrap {
		display: flex;
		column-gap: 2em;
	}
	.libraryWrap .entryMeritWrap {
		margin-top: calc((52px - 2em)/ 2);
		margin-left: 0;
	}
}



/* conceptWrap
------------------------------------------------------------------------ */
	.conceptWrap {
		position: relative;
		text-align: center;
		background: rgba(var(--site-themeColor-main),1) url("../images/index/bg2.webp") bottom center no-repeat;
		background-size: cover;
		padding: var(--site-marpad-XL) 1.3em var(--site-marpad-L);
	}
	.conceptWrap::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		display: block;
		width: 1px;
		height: var(--site-marpad-L);
		background: rgba(105, 105, 105, .4);
	}
	.conceptWrap h2 {
		padding: var(--site-marpad-XS) 0  var(--site-marpad-S);
	}
	.conceptWrap h2 img {
		width: 80%;
		max-width: 506px;
	}
	.conceptWrap .conceptLead {
		line-height: 2.8;
	}



/* innerLinkContWrap
------------------------------------------------------------------------ */




/* innerLinkCont
------------------------------------------------------------------------ */
	.innerLinkCont {
		position: relative;
	}
	.innerLinkCont::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: center bottom no-repeat;
		background-size: cover;
	}
	.innerLinkCont::after {
		content: "image photo";
		position: absolute;
		bottom: 0;
		right: 0;
		color: rgba(255, 255, 255, .6);
		font-family: var(--site-font_family-sans);
		font-size: 0.6em;
	}

	.innerLinkCont:not(.setagayaUnit) .picBox {
		overflow: hidden;
		width: 100%;
		aspect-ratio: 910 / 692;
	}
	.innerLinkCont:not(.setagayaUnit) .picBox img {
		transform: scale(1.1)
	}

	.innerLinkCont .txtBox {
		color: rgba(255, 255, 255, .8);
		padding-bottom: 1em;
	}
	.innerLinkCont .txtBox .ptHeading a {
		position: relative;
	}
	.innerLinkCont .txtBox .ptHeading a::before {
			content: "";
			display: block;
			position: absolute;
			bottom: 50%;
			left: -1.8em;
			width: 1.2em;
			height: 1.2em;
			margin: auto;
			border-style: solid;
			border-width: 0 1px 1px 0;
			border-color: rgba(var(--site-themeColor-accent_1),.9);
			transform: rotate(-45deg);	
	}
	.innerLinkCont .txtBox .ptHeading a::after {
		content: "";
		display: block;
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 1px;
		background: rgba(var(--site-themeColor-accent_1),.9);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s ease;
	}
	.innerLinkCont .txtBox .ptHeading a:hover::after {
		transform: scaleX(1);
	}
	.innerLinkCont .txtBox .ptHeading .hTxt {
		line-height: 2.4em;
		margin: 0.8em 0 1.0em;
		padding: 0;
		border-left: 0px;
	}
	.innerLinkCont .txtBox .ptHeading .hTxt em {
		display: inline-block;
		/*color: rgba(var(--site-themeColor-main),1);*/
		line-height: 0.9;
		letter-spacing: 0;
		font-size: 0.9em;
		font-weight: 500;
		/*background: rgba(255, 255, 255, .9);*/
		/*padding: 0 0.2em;*/
	}
	.innerLinkCont .txtBox .ptHeading .hTxt::before {
		display: none;
	}

	.innerLinkCont .txtBox .btn {
		margin-top: 1em;
	}
	.innerLinkCont .txtBox .btn a {
		display: block;
		width: auto;
		max-width: 130px;
		color: rgba(var(--site-themeColor-main),1);
		text-align:	left;
		line-height: 2.0em;
		background: rgba(255, 255, 255, .9);
		margin: 0.5em 0 0;
		padding: 0 0em 0 1em;
		border-radius: 3px;
		transform: scale(1);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.innerLinkCont .txtBox .btn a::after {
		content: "";
		display: inline-block;
		width: 0.6em;
		height: 1em;
		background: url("../images/share/ico_navy_arrow.svg") left center / contain no-repeat;
		border: none;
		transform: none;
	}
	.innerLinkCont .txtBox .btn a:hover {
		transform: scale(1.1);
		opacity: 0.8;
	}

@media screen and (max-width: 1050px) {
	.innerLinkCont .picUnit {
		width: var(--site-sizeContentWide-M) !important;
		margin: 0 auto;
		padding: 3em 0 0;
	}
	.innerLinkCont .picBox .inbl {
		display: block;
		width: 100%;
	}
	.innerLinkCont .picBox img {
		width: 100%;
		max-width: none;
	}
	.innerLinkCont .txtBox {
		width: calc(var(--site-sizeContentWide-S) * 0.95);
		margin: 0 auto;
		padding: var(--site-marpad-S) 0 var(--site-marpad-M);
	}

	.innerLinkCont .txtBox .ptHeading .hWord {
		line-height: 1.2;
		font-size: 8vw;
	}
}

@media screen and (min-width: 1050.02px) {
	.innerLinkCont {
		display: flex;
		align-items: center;
	}
	.innerLinkCont:nth-of-type(2n+1) > .picBox,
	.innerLinkCont:nth-of-type(2n+1) > .picUnit {
		order: 10;
	}
	.innerLinkCont > * {
		position: relative;
		z-index: 3;
	}
	.innerLinkCont > .picBox,
	.innerLinkCont > .picUnit {
		width: 50%;
		padding: var(--site-marpad-S);
	}
	.innerLinkCont:nth-of-type(2n) > .picBox,
	.innerLinkCont:nth-of-type(2n) > .picUnit {
		padding-right: 0;
	}
	.innerLinkCont:nth-of-type(2n+1) > .picBox,
	.innerLinkCont:nth-of-type(2n+1) > .picUnit {
		padding-left: 0;
	}
	.innerLinkCont > .txtBox {
		width: 50%;
	}
	.innerLinkCont > .txtBox > * {
		width: 86%;
		max-width: 600px;
		margin: 0 auto;
		/*padding-right: 10%;*/
	}
	.innerLinkCont:nth-of-type(2n+1) > .txtBox > *,
	.innerLinkCont:nth-of-type(2n+1) > .txtBox > * {
		order: 10;
	}
}
/*setagayaUnit*/
	.setagayaUnit::before {
		background-image: url("../images/index/setagaya_bg@sp.webp");
	}
	.setagayaUnit::before {
		background-image: url("../images/index/setagaya_bg@sp.webp");
	}

	.setagayaUnit .picUnit {
		transition-timing-function: linear;
	}
	.setagayaUnit .picBox small.imgcapkeep {
		right: auto;
		left: 0;
	}
@media screen and (min-width: 1050.02px) {
	.setagayaUnit::before {
		background-image: url("../images/index/setagaya_bg@pc.webp");
	}
	.setagayaUnit .picUnit {
		display: grid;
		gap: 2px;
		grid-template-columns: repeat(5 20%);
	}
	.setagayaUnit .picUnit .picBox {
		transition-property: opacity !important;
		transition-duration: 1500ms !important;
		transition-timing-function: ease-out !important;
	}
	.setagayaUnit .picUnit .picBox:nth-of-type(1) {grid-column: 1 / 3;}
	.setagayaUnit .picUnit .picBox:nth-of-type(2) {grid-column: 3 / 5;}
	.setagayaUnit .picUnit .picBox:nth-of-type(3) {grid-column: 2 / 4;}
	.setagayaUnit .picUnit .picBox:nth-of-type(4) {grid-column: 4 / 6;}
	.setagayaUnit .picBox .inbl {
		background: #0c0a20;
	}
}

/*planUnit*/
	.planUnit::before {
		background-image: url("../images/index/plan_bg@sp.webp");
	}
@media screen and (min-width: 1050.02px) {
	.planUnit::before {
		background-image: url("../images/index/plan_bg@pc.webp");
	}
}


/*equipmentUnit*/
	.equipmentUnit::before {
		background-image: url("../images/index/equipment_bg@sp.webp");
	}
@media screen and (min-width: 1050.02px) {
	.equipmentUnit::before {
		background-image: url("../images/index/equipment_bg@pc.webp");
	}
}


/*locationUnit*/
	.locationUnit::before {
		background-image: url("../images/index/location_bg@sp.webp");
	}
	/*.locationUnit::after {
		content: "●●●●●（最遠区画より約000m/徒歩●分）"
	}*/
@media screen and (min-width: 1050.02px) {
	.locationUnit::before {
		background-image: url("../images/index/location_bg@pc.webp");
	}
}


/*accessUnit*/
	.accessUnit::before {
		background-image: url("../images/index/access_bg@sp.webp");
	}
@media screen and (min-width: 1050.02px) {
	.accessUnit::before {
		background-image: url("../images/index/access_bg@pc.webp");
	}
}



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




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




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