@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		main.css
 *	Alteration:		2026.01
 *	style info:		物件コンテンツ用CSS（主にmain要素のスタイル）
----------------------------------------------------------------------------------------------------------------
 *	< BASE > - main - OuterWide - Module_Wrapper - Framework_Wrapper - Framework_Elements - Module_Elements
----------------------------------------------------------------------------------------------------------------
 * {A}	
----------------------------------------------------------------------------------------------------------------

************************************************************************************************************* */

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */

/* ============================================================================
	main
-------------------------------------------------------------------------------
	メインの初期値設定。
============================================================================ */

	/* //////////////////////////////////////////////////////////////////////////////////
	 * スティッキーヘッダー分の余白（ざっくり対応ver ※厳密にする場合はJSで）|（メインビジュアルをスティッキーヘッダーと重ねる場合「margin-top:0;」にする）
	////////////////////////////////////////////////////////////////////////////////// */
	main {
		margin-top: var(--site-stickyHeader-height);
	}
	.indexP main {
		margin-top: 0;
	}
@media screen and (max-width: 900px) {

}


/* ============================================================================
	OuterWide
-------------------------------------------------------------------------------
	ヘッダー、ページテーマ、フッター、コンテナ、コンテンツ類の初期値設定。
============================================================================ */

	/* ---------------- margin */
	.articleContentBox,
	.breadcrumbBox,
	.container,
	.containerFlexibleM,
	.containerFlexibleL,
	.contbox,
	[class*="sizeContentWide"],
	[class*="sizeMaxWidth"] {
		margin-left: auto;
		margin-right: auto;
	}

	/* ---------------- width */
	/* OUTER */
	.articleContentBox,
	.container,
	.containerFlexibleM,
	.containerFlexibleL {
		width: 100%;
	}
	/* INNER */
	.breadcrumbBox {
		width: 100%;
	}
	.contbox {
		width: var(--site-sizeContentWide-M);		/* 90% */	/* Mは600以下からSと同じ値になる */
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */
	}
	/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
	.sizeContentWideXL {
		width: var(--site-sizeContentWide-L);		/* 100% */
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeContentWideL {
		width: var(--site-sizeContentWide-L);		/* 100% */
		max-width: var(--site-sizeMaxWidth-L);		/* 1366px */
	}
	.sizeContentWideXM {
		width: var(--site-sizeContentWide-XM);		/* 90% */
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */
	}
	.sizeContentWideM {
		width: var(--site-sizeContentWide-M);		/* 90% */	/* Mは600以下からSと同じ値になる */
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */
	}
	.sizeContentWideS {
		width: var(--site-sizeContentWide-S);		/* 82.5% */
		max-width: var(--site-sizeMaxWidth-S);		/* 990px */
	}
	.sizeMaxWidthL {
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeMaxWidthL {
		max-width: var(--site-sizeMaxWidth-L);		/* 1366px */
	}
	.sizeMaxWidthM {
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */
	}
	.sizeMaxWidthS {
		max-width: var(--site-sizeMaxWidth-S);		/* 990px */
	}
	/* stickoutFullbox */ /* 固定幅のボックスをはみ出して、ウィンドウ幅いっぱいに広げる */
	.stickoutFullbox {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
							/*opacity: .5; box-shadow: 0 0 0 10px red inset, 0 0 5px 10px red;*/
	}
	.stickoutFullbox img.stickoutFullboxPic,
	.stickoutFullbox .stickoutFullboxPic img {
		width: 100%;
		max-width: none;
	}

	/* stickoutFullbox SPのみ固定幅のボックスをはみ出して、ウィンドウ幅いっぱいに広げる*/ 
@media screen and (max-width: 600px) { /*{SP}*/
	.stickoutFullbox_SPonly {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
							/*opacity: .5; box-shadow: 0 0 0 10px red inset, 0 0 5px 10px red;*/
	}
	.stickoutFullbox_SPonly img.stickoutFullboxPic,
	.stickoutFullbox_SPonly .stickoutFullboxPic img {
		width: 100%;
		max-width: none;
	}
}	

/* ------------------------ reset */ /* contents類の入れ子は100%にリセットする。 */
	.contbox .contbox {
		width: 100%;
		max-width: none;
	}


/* ============================================================================
	Module_Wrapper
-------------------------------------------------------------------------------
	コンテナ、コンテントボックス、
	フィーチャーコンテント(特別)、背景色チェンジ
============================================================================ */

	/* container
	----------------------- */
	.container {
		padding: var(--site-marpad-XXL) 0;
	}
	.containerFlexibleM {
		padding: var(--site-marpad-M-flexible) 0;
	}
	.containerFlexibleL {
		padding: var(--site-marpad-L-flexible) 0;
	}

	/* contbox
	----------------------- */

	/* featuredContent
	----------------------- */
	.featuredContent_01 {
		padding: clamp(40px, (40 / 600 * 100vw), 80px);
	}
	.featuredContent_02 {
		padding: clamp(60px, (40 / 600 * 100vw), 80px); /* SP時上下余白多め */
	}

	/* bgColor
	----------------------- */
	.bgColorWh {		background: rgba(var(--site-variationColor-whitish), 1);}	/* 白 */
	.bgColorWhOpa {		background: rgba(var(--site-variationColor-whitish), .3);}	/* 白（透過） */
	.bgColorBk {		background: rgba(var(--site-variationColor-blackish), 1);}	/* 黒 */
	.bgColorBkOpa {		background: rgba(var(--site-variationColor-blackish), .3);}	/* 黒（透過） */

	.bgColor_base {		color: rgba(var(--site-themeColor-base_text), 1); background: rgba(var(--site-themeColor-base), 1);}
	.bgColor_main {		color: rgba(var(--site-themeColor-main_text), 1); background: rgba(var(--site-themeColor-main), 1);}
	.bgColor_accent_1 {	color: rgba(var(--site-themeColor-accent_1_text), 1); background: rgba(var(--site-themeColor-accent_1), 1);}
	/*.bgColor_accent_2 {	color: rgba(var(--site-themeColor-accent_2_text), 1); background: rgba(var(--site-themeColor-accent_2), 1);}*/

	.bgdark {	
		background: #000000 var(--site-pattern-dark);
		color: rgba(var(--site-variationColor-whitish), 1);
}	
	.bglight {	background: #FFFFFF var(--site-pattern-light);}	


@media screen and (max-width: 900px) {
	.container {
		padding: var(--site-marpad-XL) 0;
	}
	/* featuredContent
	----------------------- */
	.featuredContent_01 {
		padding: clamp(28px, (28 / 320 * 100vw), 35px);
	}
	.featuredContent_02 {
		padding: clamp(40px, (40 / 320 * 100vw), 47px) clamp(28px, (28 / 320 * 100vw), 35px);
	}
}
@media screen and (max-width: 600px) {
	.container {
		padding: var(--site-marpad-M) 0;
	}
}

/* ============================================================================
	Framework_Wrapper
============================================================================ */

/* ------------------------------------------------------------------------
mainHeaderVisualWrap
------------------------------------------------------------------------ */
	/*pTtl--------*/
	.mainHeaderVisualWrap {
		text-align: left;
		background: #fff var(--site-pattern-light);
		padding: clamp(40px, (60 / 900 * 100vw), 80px)  0;
	}
	.mainHeaderVisualBox{
		max-width: 1600px;
		width: 94%;
		margin: 0 auto;
	}
	.mainHeaderVisualWrap .pTtl {
		display:block;
		padding-bottom: clamp(20px, (20 / 1200 * 100vw), 30px);
		--M-fluidFontSize-max-fontsize: 20;
		--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)
		);
		/*letter-spacing: 0.2em;*/
		line-height: 1;
	}
	.mainHeaderVisualWrap .pTtl .ja {
		display: block;
	}	
	.mainHeaderVisualWrap .pTtl .en {
    display: block;
}
	.mainHeaderVisualWrap .pTtl .en .txtSplitAnime{
		margin-top: 0.3em;

		--M-fluidFontSize-max-fontsize: 86;
		--M-fluidFontSize-min-fontsize: 60;
		--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)
		);
		line-height: 1;
		font-family: var(--site-font_family-en_1);
		background: var(--site-variationColor-gradient_text);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
	}	
	
	/* iPhone+Chrome, Edge　グラデ動きバグ設定*/
	.mainHeaderVisualWrap .pTtl .en .txtSplitAnime span {
		  /* グラデーション設定 */
    background: var(--site-variationColor-gradient_text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Safariでの消失を防ぐ重要設定 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
	}	



	/*pPic--------*/
	.mainHeaderVisualWrap .pPic {
		position: relative;
	}

@media screen and (max-width: 900px) { 
	/*pTtl--------*/
	.mainHeaderVisualWrap .pTtl {
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 480;
	}
	.mainHeaderVisualWrap .pTtl .en .txtSplitAnime{
		--M-fluidFontSize-max-fontsize: 60;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 480;
		/*color: #383838;*/
	}	

}

@media screen and (max-width: 600px) { 
	/*pTtl--------*/
	.mainHeaderVisualWrap {
		padding:30px  0;
	}
	.mainHeaderVisualWrap .pTtl {
		padding-bottom: 10px;
	}
}




/* noPhoto
------------------------------------------------------------------------ */
	.mainHeaderVisualWrap.noPhoto {
		/*text-align: center;*/
	}
	.mainHeaderVisualWrap.noPhoto .pTtl {
		  padding-bottom: 0;
	}

@media screen and (max-width: 480px) { 
	.mainHeaderVisualWrap.noPhoto {
		text-align: center;
	}
}


/* breadcrumbBox
------------------------------------------------------------------------ */
/*	.breadcrumbBox {
		line-height: 1.8;
		color: inherit;
		font-family: var(--site-font_family-sans);
		font-size: 1rem;
		letter-spacing: .05em;
		padding: 0;
	}
	.breadcrumbBox ol {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin: 0;
		padding: .7em 1em;
	}
	.breadcrumbBox li {
		opacity: .6;
	}
	.breadcrumbBox li:not(:last-child)::after {
		content: "＞";
		margin: 0 .35em 0 .5em;
	}
	.breadcrumbBox li.current {
		font-weight: bold;
		opacity: .85;
	}
	.breadcrumbBox li a {
		border-bottom: 1px solid transparent;
		transition: border .05s ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
		.breadcrumbBox li a[href]:hover {
			border-bottom-color: currentColor;
		}
	}
@media screen and (max-width: 900px) {
	.breadcrumbBox {
		word-break: break-all;
		letter-spacing: .02em;
	}
	.breadcrumbBox ol {
		display: block;
		padding: 1.1em .8em;
	}
	.breadcrumbBox li {
		display: inline;
	}
}*/


/* mainElementFooterWrap
------------------------------------------------------------------------ */
	.mainElementFooterWrap {
	}


/* pageLastCaptionWrap
---------------------------------------------------- */
	.pageLastCaptionWrap {
		padding: 60px 0;
	}
	.pageLastCaptionWrap .captionWrap a {
		text-decoration: underline;
		transition: background .13s ease-out;
		padding-left: .1em;
		padding-right: .1em;
	}
	.pageLastCaptionWrap .captionWrap small {
		line-height: 1.75;
	}
	@media (hover: hover) and (pointer: fine) {
		.pageLastCaptionWrap .captionWrap a:hover {
			text-decoration: underline;
			background: rgba(150, 150, 150, .15);
		}
	}
	.pageLastCaptionWrap .captionWrap a:focus-visible {
		text-decoration: underline;
		background: rgba(150, 150, 150, .15);
	}
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.pageLastCaptionWrap {
		padding: clamp(40px, (40 / 736 * 100vw), 60px)  0;
	}
}
@media screen and (max-width: 600px) { 
	.pageLastCaptionWrap .captionWrap.contbox {
		width: 92%;
	}
	
	.pageLastCaptionWrap.noCap {
		padding: 20px 0;
	}
}



/* fNavWrap
---------------------------------------------------- */
	.fNavWrap {
		line-height: 1.1;
		font-size: 1.4rem;
		text-align: center;
		padding: clamp(40px, (40 / 600 * 100vw), 60px)  0 clamp(50px, (50 / 600 * 100vw), 80px) ;
		background: #000 var(--site-pattern-dark);
		color: rgba(var(--site-variationColor-whitish), 1);
	}
	.fNavTtl {
		display: none;
	}
	.fNav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		letter-spacing: .06em;
		width: var(--site-sizeContentWide-M);
		max-width: var(--site-sizeMaxWidth-M);
		margin:0 auto;
	}
	.fNav li {
		position: relative;
		width: 30.15%;
		text-align: left;
		border-bottom:1px solid #666;
	}
	.fNav li .en {
		display: block;
		font-family: var(--site-font_family-en_1);
		font-size:2.6rem;
		padding-bottom:8px;
	}
	.fNav li a {
		display: block;
		margin: .1em 0;
		padding: 2em .8em;
		transform: scale(1);
		transition: all .18s ease-out;
		position: relative;
	}
	.fNav li a:not([href]) {
		opacity: .35;
	}
	@media (hover: hover) and (pointer: fine) {
		.fNav li:not(.is_current) a[href]:hover,
		.fNav li:not(.is_current) a[href]:focus {
			opacity:.65;
			color: #bdb699;
		}
	}
	.fNav li.is_current a {
		color: #bdb699;
	}

@media print, screen and (min-width: 600.02px) {
	.fNav li:not(:nth-child(3n+3)) {
      margin-right: 4.775%;
    }
}
@media screen and (max-width: 1390px) { 
	.fNav li .en {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1340;
		--M-fluidFontSize-min-viewport: 768;
		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)
		);
	}
}
@media screen and (max-width: 600px) { 
	.fNavWrap {
		font-size: 1.25rem;
	}
	.fNav li {
		width: 45%;
	}
    .fNav li:not(:nth-child(2n+2)) {
      margin-right: 5%;
    }

	.fNav li .en {
		font-size:1.65rem;
	}
	.fNav li a > div::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5px;
		width: 12px;
		height: 1.2rem;
		background: url("../images/share/ico_arr_plan.svg") center center no-repeat;
		background-size: auto;
		background-size: 100% auto;
		transition: all 0.2s;
	}
	.fNav li.is_current a > div::before {
		content: none;
	}
}
@media screen and (max-width: 480px) { 
	.fNav li {
		width: 100%;
	}
    .fNav li:not(:nth-child(2n+2)) {
      margin-right: 0%;
    }
	.fNav li a {
		padding: 1.2em .8em;
	}
	.fNav li .en {
	  display: inline-block;
	  padding: 0 .5em 0 0;
	}
}
















/* ============================================================================
	Framework_Elements
============================================================================ */

/* ptHeading
------------------------------------------------------------------------ */
	.ptHeading .hTxt,
	[class*="hTxtStyh"] {
		--M-fluidFontSize-max-fontsize: 23;
		--M-fluidFontSize-min-fontsize: 19;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 600;
		--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 );
		
		display: block;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.8;
		/*color: inherit;*/
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-serif);
		text-align: left;
		letter-spacing: 0.08em;
		padding: 0;
	}
	
	.ptHeading .hTxt .kana,
	[class*="hTxtStyh"] .kana {
		letter-spacing: -0.15em;
		margin-right: 0.15em;
		margin-left: -0.15em;
	}
	/* -- */
	:where(h2).ptHeading .hTxt,
	.hTxtStyh2 {
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 22;
		line-height: 2;
		margin-bottom: 1em;
	}
	:where(h3).ptHeading .hTxt,
	.hTxtStyh3 {
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 18;
		margin-bottom: 1.2em;
	}
	:where(h4).ptHeading .hTxt,
	.hTxtStyh4 {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 16;
		margin-bottom: 1em;
	}
	:where(h5).ptHeading .hTxt,
	.hTxtStyh5 {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 14;
		margin-bottom: 1em;
	}
	:where(h6).ptHeading .hTxt,
	.hTxtStyh6 {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 13;
		margin-bottom: 1em;
	}
@media screen and (max-width: 600px) { 
	.ptHeading .hTxt,
	[class*="hTxtStyh"] {
		line-height: 1.8;
		/*text-align: left;*/
		letter-spacing: .12em;
		margin-bottom: 0.9em;
	}
}


/* enHeading_* 													2026.01
---------------------------------------------------------------------------
h3.enHeading_L>span.hTxt
------------------------------------------------------------------------ */
	[class*="enHeading_"] {
		display: block;
		text-align: left;
		padding: 0;
		--M-fluidFontSize-max-fontsize: 50;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 480;
		--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;
		line-height: 1;/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-en_1);
		letter-spacing: 0.01em;
		/*color: rgba(var(--site-variationColor-gold_1), 1); */
	}

	
	/* -英語タイトル- */
	.enHeading_XL {
		--M-fluidFontSize-max-fontsize: 70;
		--M-fluidFontSize-min-fontsize: 30;
		letter-spacing: 0.15em;
		/*border-bottom: 1px solid #919191;*/
		line-height: .6;
		margin-bottom: 1em;
		position: relative;
	}
	.enHeading_XL:before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 1px #919191;
}
	.enHeading_XL .hTxt {
		max-width: 1600px;
		width: 96%;
		margin: 0 auto;
		display: block;
		color: #919191;	
	}
.enHeading_XL.js_showTargetAnimate:before{
	animation: border_anim .5s linear forwards;
}
@keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}




	.enHeading_L {
		--M-fluidFontSize-max-fontsize: 38;
		--M-fluidFontSize-min-fontsize: 28;
	}
	.enHeading_M {
		--M-fluidFontSize-max-fontsize: 34;
		--M-fluidFontSize-min-fontsize: 24;
	}
	.enHeading_S {
		--M-fluidFontSize-max-fontsize: 30;
		--M-fluidFontSize-min-fontsize: 20;
	}
	.enHeading_XS {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 16;
	}
	.enHeading_XXS {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 13;
	}




/* ============================================================================
	heading_Line
============================================================================ */

/* heading_Line 上縦ライン
------------------------------------------------------------------------ */
	.heading_Line{
		text-align: center;
		margin-bottom:var(--site-marpad-XL);
	}
	.heading_Line::before {
		content: "";
		display: block;
		width: 1px;
		height: 100px;
		background: #cac2a2;
		margin:  0 auto 15px;
	}
	.heading_Line .ja {
		text-align: center;
		line-height: 1.6;
	}
	.heading_Line .enHeading_XS {
		color: #cac2a2!important;
		text-align: center;
		letter-spacing: 0.1em;
	}
@media screen and (max-width: 600px) { 
	.heading_Line{
		margin-bottom:var(--site-marpad-M);
	}
	.heading_Line::before {
		height: 60px;
	}
}	

/* heading_Line01 上下ライン
------------------------------------------------------------------------ */
	.heading_Line01 {
		padding:clamp(10px, (10 / 1200 * 100vw), 15px) 0;
		border:0 solid #000;
		border-width:1px 0;
	}
@media screen and (max-width: 600px) { 
	.heading_Line01 {
		padding:clamp(10px, (10 / 480 * 100vw), 15px) 0;
	}
}	
/* heading_Line02 下ライン
------------------------------------------------------------------------ */
	.heading_Line02 {
		border:0 solid rgba(var(--site-lineColor-accent), 1);
		border-width:0 0 2px 0;
	}
/* heading_Line03  両端ライン 
		<div class="tc"><p class="heading_Line03 "><span class="heading_Line03_inner">xxxxxxx</span></p></div>
------------------------------------------------------------------------ */
	.heading_Line03 {
		text-align: center;
		display:inline-block;
	}
	.heading_Line03_inner {
		display: flex;
		align-items: center;
	}
	.heading_Line03_inner::before,
	.heading_Line03_inner::after {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: rgba(var(--site-lineColor-basic), 1);
		min-width:80px;
	}
	.heading_Line03_inner::before {
		margin-right: 1rem;
	}
	.heading_Line03_inner::after {
		margin-left: 1rem;
	}
	
@media screen and (max-width: 600px) { 
	.heading_Line03_inner::before,
	.heading_Line03_inner::after {
		min-width:30px;
	}
}

/* heading_Line04  両端ライン 
		<p class="heading_Line04"><span class="heading_Line04_inner">xxxxxxx</span></p>
------------------------------------------------------------------------ */
	.heading_Line04 {
		text-align: center;
	}
	.heading_Line04_inner {
		display: flex;
		align-items: center;
	}
	.heading_Line04_inner::before,
	.heading_Line04_inner::after {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: rgba(var(--site-lineColor-basic), 1);
		min-width:60px;
	}
	.heading_Line04_inner::before {
		margin-right: 1rem;
	}
	.heading_Line04_inner::after {
		margin-left: 1rem;
	}

/* heading_Line0５  →端ライン 
		<div class="tc"><p class="heading_Line05"><span class="heading_Line05_inner">xxxxxxx</span></p></div>
------------------------------------------------------------------------ */
	.heading_Line05 {
		text-align: left;
		display:inline-block;
	}
	.heading_Line05_inner {
		display: flex;
		align-items: center;
	}
	.heading_Line05_inner::after {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: rgba(var(--site-themeColor-base_text-accent), 1);
		min-width:150px;
		margin-left: 1rem;
	}
	
@media screen and (max-width: 600px) { 
	.heading_Line05_inner::after {
		min-width:40px;
		margin-right: 0.8rem;
	}
}


/* heading_Line06  左端ライン 
		<div class="tc"><p class="heading_Line06"><span class="heading_Line06_inner">xxxxxxx</span></p></div>
------------------------------------------------------------------------ */
	.heading_Line06 {
		text-align: left;
		display:inline-block;
	}
	.heading_Line06_inner {
		display: flex;
		align-items: center;
	}
	.heading_Line06_inner::before {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: rgba(var(--site-themeColor-base_text-accent), 1);
		min-width:26px;
		margin-right: 1rem;
	}
	
@media screen and (max-width: 600px) { 
	.heading_Line06_inner::before {
		min-width:20px;
		margin-right: 0.8rem;
	}
}

/* heading_Line07  下側に小さくライン 
		<div class="tc"><p class="heading_Line07">xxxxxxx</p></div>
------------------------------------------------------------------------ */

.heading_Line07 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.heading_Line07:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 60px;
  height: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #fff;
}
.heading_Line07.bk:before {
  background-color: #000;
}
	
/*marker 
-------------------------------------------------------
-テキストマーカー
- 例：<span class="marker js_showTarget">xxxxxxxxxxxx</span>
---------------------------------------------------- */
	.marker {
		background-image: linear-gradient(to right, transparent 50%, #b8eae5 50%);
		background-repeat: repeat-x;
		background-size: 200% 0.5em;
		background-position: 0 1em;
		transition: all 1s ease;
	}
	.marker.js_showTargetAnimate{
		background-position: -100% 1em;
	}


	
	
/* heading_circle  左端●
		<p class="heading_circle">xxxxxxxxxxxxxxxxxxxxxxxxx</p>
------------------------------------------------------------------------ */
	.heading_circle {
		position: relative;
		display: block;
		padding-left:18px;
		line-height: 1;
	}
	.heading_circle:before {
		position: absolute;
		top:0.25em;
		left:0;
		content: "";		
		display:inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;		
		background:#b4a965;
		line-height: 1;
	}
	
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.heading_circle:before {
		/*margin-top: clamp(9px, (12 / 1200 * 100vw), 12px);*/
	}
}

	
	
/* heading_bg01 ※改行ある場合は使わない
------------------------------------------------------------------------ */
	.heading_bg01 {
		padding: 0.1em 0.8em;
		color: #fff;
		background: rgba(var(--site-lineColor-basic), 1);
	}
	.bgColor_main .heading_bg01 {
		background: rgba(var(--site-lineColor-basic), 1);
	}
	
	
/* hr
------------------------------------------------------------------------ */
	hr.hrLine {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1px;
		background: rgba(var(--site-lineColor-accent), 1);
		border: none;
		margin: 0;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-block: 0;
		margin-inline: 0;
		padding: 0;
	}	
	
	
	
	









/* ============================================================================
	Module_Elements
============================================================================ */

/* lNav_Module														2023.11
---------------------------------------------------------------------------
- [.lNavWrap]は入れ子にしないことが前提です。
- [data-lnav-column="xxx"]でカラム数を指定できます。指定しない場合は空欄またはデータ属性を削除。
- [data-lnav-option="label"]ラベルフレーム付きはSP時に必ず1カラムになります。
- [data-lnav_name="yyy"]はラベルフレームに表示する文言を入れます。
- [aria-label="xxx"]はページメニュー／設備・仕様メニューなど分かりやすい言葉を入れます。
- 光が走るエフェクト「.M_shinyEffect_toRight」の基本設定は base.css 参照。
- 全ボタンの高さを揃えたい場合はJSにて調整を。
- 細かい設定は各ページ用CSSで設定を。
---------------------------------------------------------------------------
div.lNavWrap[data-lnav-option="label"][data-lnav-column="xxx"]>nav.lNav[data-lnav_name="●/ PAGE MENU /" aria-label="●xxxメニュー"]>ul>li.ln01*4>a>span.ln{01lNav}
------------------------------------------------------------------------ */


/* lNavWrap
--------------------------------------------------------------------------- */
	.lNavWrap {
		position: relative;
		margin-bottom: 50px;
	}
	.lNavWrap::before,
	.lNavWrap::after {
		display: block;
		position: absolute;
		left: 0; bottom: 0; z-index: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #000000;
	}
	.lNavWrap::before {
		content: "";
	}
	.lNav ul {
		/*--default-generalColBox-margin-t:	5px;
		--default-generalColBox-margin-lr:	5px;*/
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.lNav li {
		display: flex;
		width: 14%;
		padding: 0 .5em;
		/*width: calc(20% - (var(--default-generalColBox-margin-lr) * 2));*/
	}
	.lNav a {
		display: flex;
		flex-direction: column;
		width: 100%;
        color: rgba(var(--site-themeColor-accent_1), 1);
	}
	.lNav .label {
		--M-fluidFontSize-max-fontsize: 31;
		--M-fluidFontSize-min-fontsize: 22;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 600;
		--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);

		display: block;
		line-height: 1.35;
		font-family: var(--site-font_family-en_2);
		text-transform: uppercase;
		letter-spacing: .04em;
		/*margin-bottom: .1em;*/
		width: 100%;
		text-align: center;
		color: #575757;
		border-bottom: 4px solid transparent;
	}



	/* hover, focus */
	.lNavWrap li.is-current a .label{
		border-bottom: 4px solid #b08d42;
		color: #b08d42;
	}
	.lNavWrap li:not(.is-current) a[href] .label {
		transition: border .22s ease-out;
	}

	@media (hover: hover) and (pointer: fine) {
		.lNavWrap li:not(.is-current) a[href]:hover .label {
			border-color:#b08d42;
			color: #b08d42;
		}
	}
	.lNavWrap li:not(.is-current) a[href]:focus-visible .label {
		border-color:#b08d42;
		color: #b08d42;
	}

@media screen and (max-width: 900px) {
	.lNav li {
		width: 20%;
}
@media screen and (max-width: 600px) {
  .lNav li {
    width: 27%;
  }
/*	.lNavWrap {
		padding-top:	20px;
		padding-bottom:	43px;
	}
	.lNavWrap::before,
	.lNavWrap::after {
		content: "";
		opacity: .5;
	}
	.lNavWrap::before {	left: 0; top: 0;}
	.lNavWrap::after {	left: 0; bottom: 0;}
	
	.lNav ul {
		--default-generalColBox-margin-t:	7px;
		--default-generalColBox-margin-lr:	0px;
		display: block;
		max-width: 550px;
		margin: 0 auto;
	}
	.lNav li {
		width: 100%;
	}
	.lNav .label {
		padding: 10px 0;
		border-bottom-width: 2px
	}
	.lNav .ja {
		font-size: clamp(1.4rem, 1.246rem + 0.77vw, 1.6rem);
	}*/
}
@media screen and (max-width: 480px) {
	.lNav ul {
		--default-generalColBox-margin-t:	5px;
	}
	.lNav .arrow {
		height: 26px;
		background-position: center 5px, center 13px;
		background-size: 29px 13px;
	}
}












