@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		main.css
 *	Alteration:		2023.08
 *	style info:		物件コンテンツ用CSS（主にmain要素のスタイル）
----------------------------------------------------------------------------------------------------------------
 *	< BASE > - main - OuterWide - Module_Wrapper - Framework_Wrapper - Framework_Elements - Module_Elements
----------------------------------------------------------------------------------------------------------------
 * {A}	
----------------------------------------------------------------------------------------------------------------
 * 01	カスタムプロパティ名「--ファイル名-要素クラス名等-内容-種類: xxx;」（例：--base-pageTheme-color-light: #ccc;）
 * 02	バッティング対策：「.contents」→「.contbox」。
************************************************************************************************************* */

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */

/* ============================================================================
	main
-------------------------------------------------------------------------------
	メインの初期値設定。
============================================================================ */


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


/* ============================================================================
	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);		/* 88% */	/* Mは600以下からSと同じ値になる */
		max-width: var(--site-sizeMaxWidth-M);		/* 1200px */
	}
	/* 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);		/* 1600x */
	}
	.sizeContentWideXM {
		width: var(--site-sizeContentWide-XM);		/* 90% */
		max-width: var(--site-sizeMaxWidth-M);		/* 1200px */
	}
	.sizeContentWideM {
		width: var(--site-sizeContentWide-M);		/* 88% */	/* Mは600以下からSと同じ値になる */
		max-width: var(--site-sizeMaxWidth-M);		/* 1200px */
	}
	.sizeContentWideS {
		width: var(--site-sizeContentWide-S);		/* 82.5% */
		max-width: var(--site-sizeMaxWidth-S);		/* 900px */
	}
	.sizeMaxWidthXL {
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeMaxWidthL {
		max-width: var(--site-sizeMaxWidth-L);		/* 1600px */
	}
	.sizeMaxWidthM {
		max-width: var(--site-sizeMaxWidth-M);		/* 1200px */
	}
	.sizeMaxWidthMM {
		max-width: var(--site-sizeMaxWidth-MM);		/* 1100px */
	}
	.sizeMaxWidthS {
		max-width: var(--site-sizeMaxWidth-S);		/* 1000px */
	}
	.sizeMaxWidthXS {
		max-width: var(--site-sizeMaxWidth-XS);		/* 900px */
	}
	.sizeMaxWidthXXS {
		max-width: var(--site-sizeMaxWidth-XXS);	/* 800px */
	}
	/* 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;
	}
	/* stickoutFullboxSP */ /* SPのみ*/
	@media screen and (max-width: 600px) {
		.stickoutFullboxSP {
			margin-left:	calc(-50vw + 50%);
			margin-right:	calc(-50vw + 50%);
		}
		.stickoutFullboxSP img.stickoutFullboxPicSP,
		.stickoutFullboxSP .stickoutFullboxPicSP img {
			width: 100%;
			max-width: none;
		}
	}
	
	
/* ------------------------ reset */ /* contents類の入れ子は100%にリセットする。 */
	.contbox .contbox {
		width: 100%;
		max-width: none;
	}


/* ============================================================================
	Module_Wrapper
-------------------------------------------------------------------------------
	コンテナ、コンテントボックス、
	フィーチャーコンテント(特別)、背景色チェンジ
============================================================================ */

	/* container
	----------------------- */
	.container {
		padding: var(--site-marpad-XXXL) 0;
	}
	
	.containerXXL { padding: var(--site-marpad-XXL) 0;}
	.containerXL  { padding: var(--site-marpad-XL) 0;}
	.containerL   { padding: var(--site-marpad-L) 0;}
	.containerM   { padding: var(--site-marpad-M) 0;}
	.containerS   { padding: var(--site-marpad-S) 0;}

	/* contbox
	----------------------- */

	/* featuredContent
	----------------------- */
	.featuredContent_01 {
		padding: clamp(40px, (40 / 737 * 100vw), 80px);
	}
	.featuredContent_02 {
		padding: clamp(40px, (40 / 737 * 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: var(--site-themeColor-main);}
	.bgColor_accent_1 {	color: rgba(var(--site-themeColor-accent_1_text), 1); background: var(--site-themeColor-accent_1);}
	.bgColor_accent_2 {	color: rgba(var(--site-themeColor-accent_2_text), 1); background: var(--site-themeColor-accent_2);}

	/*.bgColor01 {		background: #c2cddb;}
	.bgColor02 {		background: #d4cec8;}*/

	/*.bgPattern01 {		background: #020202 var(--site-variationColor-pattern_dark);}*/	/* 暗パターン */

	.bgGradient01 {		background: var(--site-variationColor-gradient_brown);}	/* 茶グラデ */





@media screen and (max-width: 1200px) { /*{belowTB}*/
	/* bgColor
	----------------------- */
	.bgColor_main     { background-size: 1200px auto;}
	.bgColor_accent_1 { background-size: 1200px auto;}
	.bgColor_accent_2 { background-size: 1200px auto;}
}
@media screen and (max-width: 900px) {
	/* bgColor
	----------------------- */
	.bgColor_main     { background-size: 900px auto;}
	.bgColor_accent_1 { background-size: 900px auto;}
	.bgColor_accent_2 { background-size: 900px auto;}

/* 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) {
	/* bgColor
	----------------------- */
	.bgColor_main     { background-size: 600px auto;}
	.bgColor_accent_1 { background-size: 600px auto;}
	.bgColor_accent_2 { background-size: 600px auto;}

}










/* ============================================================================
	Framework_Wrapper
============================================================================ */
/* mainHeaderVisualWrap
------------------------------------------------------------------------ */
	.mainHeaderVisualWrap {
		width: 100%;
		max-width:1920px;
		margin:0 auto;
		overflow: hidden;
	}
	.mainHeaderVisualWrap[data-js_show_target="mainVisual"] img {
		transform: scale(1.1);
		filter: blur(6px);
		transition: filter 1s ease-in-out, transform 1.5s ease-in-out;
	}
	.mainHeaderVisualWrap[data-js_show_target-passed="mainVisual"] img {
		filter: blur(0);
		transform: scale(1);
	}
	
	
	
/* noMainHeaderVisual
------------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
	.noMainHeaderVisual {
		padding-top: 80px;
	}
}



/* sectionHeader
------------------------------------------------------------------------ */
	.sectionHeader .enttl {
		display: block;
		text-align: center;
		padding-bottom:0.8em;
		--M-fluidFontSize-max-fontsize: 50;
		--M-fluidFontSize-min-fontsize: 40;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		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)
		);
		font-family: var(--site-font_family-en_1);
		line-height: 1;
		letter-spacing: 0.2em;
		color: rgba(var(--site-variationColor-yellow), 1);
	}
	
	.sectionHeader .leadTxt {
		text-align: center;
		line-height: 2.4;
	}	
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.sectionHeader .enttl {
		--M-fluidFontSize-max-fontsize: 40;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 600;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}
}

@media screen and (max-width: 600px) {
	.sectionHeader .leadTxt {
		text-align: left;
		line-height: 2;
	}	

}



/* 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;
	}
}*/


/* articleContentFooterWrap, mainElementFooterWrap
------------------------------------------------------------------------ */
	.articleContentFooterWrap {}
	.mainElementFooterWrap {}

/* articleLastCaptionWrap, pageLastCaptionWrap
---------------------------------------------------- */
	.articleLastCaptionWrap,
	.pageLastCaptionWrap {
		background: rgba(var(--site-themeColor-base), 1);
		padding: 40px 0;
	}
	.articleLastCaptionWrap a,
	.pageLastCaptionWrap a {
		text-decoration: underline;
	}
	@media (hover: hover) and (pointer: fine) {
		.articleLastCaptionWrap a:hover,
		.pageLastCaptionWrap a:hover {
			color: #000;
		}
	}




/* ============================================================================
	Framework_Elements
============================================================================ */

/* ptHeading
------------------------------------------------------------------------ */
	.ptHeading .hTxt,
	[class*="hTxtStyh"] {
		--M-fluidFontSize-max-fontsize: 35;
		--M-fluidFontSize-min-fontsize: 25.5;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		--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.63;
		color: inherit;
		/*color: rgba(var(--site-variationColor-heading-light), 1);*/
		font-size: var(--M-fluidFontSize-fontSize);
		text-align: center;
		letter-spacing: .13em;
		padding: 0;
	}
	.ptHeading .hTxt .kana,
	[class*="hTxtStyh"] .kana {
		letter-spacing: -.05em;
		margin-right: .05em;
	}
	/* -- */
	:where(h2).ptHeading .hTxt,
	.hTxtStyh2 {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 24;
		margin-bottom: 1.5em;
		line-height: 2;
	}
	:where(h3).ptHeading .hTxt,
	.hTxtStyh3 {
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 20;
		margin-bottom: 1.5em;
	}
	:where(h4).ptHeading .hTxt,
	.hTxtStyh4 {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 18;
		margin-bottom: 1em;
	}
	:where(h5).ptHeading .hTxt,
	.hTxtStyh5 {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 16;
		margin-bottom: .85em;
	}
	:where(h6).ptHeading .hTxt,
	.hTxtStyh6 {
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14.5;
		margin-bottom: .7em;
	}
	/*.ptHeading .hTxt .enTxt,
	[class*="hTxtStyh"] .enTxt {
		font-family: var(--site-font_family-en_1);
		font-size: 1.15em;
	}*/
	/*.ptHeading .hWord + .hTxt,
	.ptHeading .hWord + [class*="hTxtStyh"] {
		margin-top: 16px;
	}*/
	/* hWord
	--------------------------------- */
	/*.ptHeading .hWord {
		display: block;
		line-height: 1.2;
		color: rgba(var(--site-themeColor-accent_1), 1);
		text-align: center;
		margin: 0 auto;
	}
	.ptHeading .hWord.en {
		font-family: var(--site-font_family-en_1);
		font-size: 2.6rem;
		text-transform: uppercase;
		letter-spacing: .15em;
	}
	.ptHeading .hWord.ja {
		font-family: inherit;
		font-size: 2rem;
		letter-spacing: .12em;
	}*/
	
	
@media screen and (max-width: 1200px) {
	.ptHeading .hTxt,
	[class*="hTxtStyh"] {
		--M-fluidFontSize-max-fontsize: 25.5;
		--M-fluidFontSize-min-fontsize: 20;
		--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 );
		display: block;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.63;
		color: inherit;
		/*color: rgba(var(--site-variationColor-heading-light), 1);*/
		font-size: var(--M-fluidFontSize-fontSize);
		text-align: center;
		letter-spacing: .13em;
		padding: 0;
	}
	/* -- */
	:where(h2).ptHeading .hTxt,
	.hTxtStyh2 {
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 18;
		line-height: 1.8;
		margin-bottom: 1.2em;
	}
	:where(h3).ptHeading .hTxt,
	.hTxtStyh3 {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 16;
		margin-bottom: 1.2em;
	}
	:where(h4).ptHeading .hTxt,
	.hTxtStyh4 {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 14;
		margin-bottom: .85em;
	}
	:where(h5).ptHeading .hTxt,
	.hTxtStyh5 {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 13;
		margin-bottom: .7em;
	}
	:where(h6).ptHeading .hTxt,
	.hTxtStyh6 {
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 13;
		margin-bottom: .6em;
	}
}

@media screen and (max-width: 600px) {
	.ptHeading .hTxt,
	[class*="hTxtStyh"] {
		text-align: left;
	}

}






/*heading_Line03 ---------*/

	.heading_Line03 {
		--M-fluidFontSize-max-fontsize: 35;
		--M-fluidFontSize-min-fontsize: 25;
		--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 );
		display: block;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.5;
		color: inherit;
		font-size: var(--M-fluidFontSize-fontSize);
		text-align: center;
		letter-spacing: .13em;
		font-weight: 600;
		margin-bottom: 1em;
	}
.heading_Line03_inner {
		display: flex;
		align-items: center;
	}
.heading_Line03_inner::before,
.heading_Line03_inner::after {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: #2d0000;
		min-width:60px;
	}
.heading_Line03_inner::before {
		margin-right: 1rem;
	}
.heading_Line03_inner::after {
		margin-left: 1rem;
	}

@media screen and (max-width: 900px) { 
	.heading_Line03 {
		--M-fluidFontSize-max-fontsize: 25;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 480;
	}

}

@media screen and (max-width: 600px) { 
	.heading_Line03_inner::before,
	.heading_Line03_inner::after {
		min-width:30px;
	}
	.recommendedIistBox .item .icon {
		width: 23%;
	}
}










/* ============================================================================
	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 {
		--main-lNavWrap-ul-rowGap:		0px;	/* 2カラム: 20px / 3カラム: 10px / 4カラム: 10px / colMany: 10px */
		--main-lNavWrap-ul-columnGap:	0px;	/* 2カラム: 20px / 3カラム: 10px / 4カラム: 7px / colMany: 5px */
		--main-lNavWrap-li-maxWidth:	400px;
		--main-lNav_arrow-arrowhead-width:			11px;
		--main-lNav_arrow-arrowhead-position_right:	12px;
		--main-lNav_arrow-arrowAreaWidth:			calc(var(--main-lNav_arrow-arrowhead-width) + var(--main-lNav_arrow-arrowhead-position_right));
		width: 100%;
		line-height: 1.2;
		color: #fff;
		font-size: 1em;
		letter-spacing: .05em;
		background: rgba(0,0,0, .6);
		margin: 0 auto;
		border:0 solid rgba(var(--site-variationColor-yellow), 1);
		border-width:1px 0;
	}
	:where([data-lnav-column="col2"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
	}
	:where([data-lnav-column="col3"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
	}
	:where([data-lnav-column="col4"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
	}
	:where([data-lnav-column="col5"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
		--main-lNavWrap-li-maxWidth:	384px;
	}
	:where([data-lnav-column="colMany"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
		--main-lNavWrap-li-maxWidth:	150px;
	}
	
	.lNavWrap .lNav {
		/*width: 95%;
		max-width: 1260px;*/
		/*background: none;*/ /* ラベルフレーム付き設定に注意 */
		margin: 0 auto;
	}
	:where([data-lnav-column="col2"]).lNavWrap .lNav {
		max-width: calc((var(--main-lNavWrap-li-maxWidth) * 2) + (var(--main-lNavWrap-ul-columnGap) * 1));
	}
	:where([data-lnav-column="col3"]).lNavWrap .lNav {
		max-width: calc((var(--main-lNavWrap-li-maxWidth) * 3) + (var(--main-lNavWrap-ul-columnGap) * 2));
	}
	:where([data-lnav-column="col4"]).lNavWrap .lNav {
		max-width: calc((var(--main-lNavWrap-li-maxWidth) * 4) + (var(--main-lNavWrap-ul-columnGap) * 3));
	}
	:where([data-lnav-column="col5"]).lNavWrap .lNav {
		max-width: calc((var(--main-lNavWrap-li-maxWidth) * 5) + (var(--main-lNavWrap-ul-columnGap) * 4));
	}
	:where([data-lnav-column="colMany"]).lNavWrap .lNav {
		max-width: 1200px;
	}
	
	.lNavWrap ul {
		display: flex;
		flex-wrap: wrap;
		/*justify-content: center;*/
		gap: var(--main-lNavWrap-ul-rowGap, 1px) var(--main-lNavWrap-ul-columnGap, 1px);
		width: 100%;
		margin: 0;
		padding: 0;
	}
	:where([data-lnav-column="col2"]).lNavWrap ul {}
	:where([data-lnav-column="col3"]).lNavWrap ul {}
	:where([data-lnav-column="col4"]).lNavWrap ul {}
	:where([data-lnav-column="col5"]).lNavWrap ul {}
	:where([data-lnav-column="colMany"]).lNavWrap ul {}
	
	.lNavWrap li {
		flex-grow: 0;
		display: flex;
		width: 50%;
		max-width: var(--main-lNavWrap-li-maxWidth, unset);
	}
	:where([data-lnav-column="col2"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 1)) / 2);
	}
	:where([data-lnav-column="col3"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 2)) / 3);
	}
	:where([data-lnav-column="col4"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 3)) / 4);
	}
	:where([data-lnav-column="col5"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 4)) / 5);
	}
	:where([data-lnav-column="colMany"]).lNavWrap li {
		width: 22%;
	}
	.lNavWrap li a {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 0;
		width: 100%;
		min-height: 60px;
		color: #inherit;
		text-decoration: none;
		margin: 0 auto;
		padding: .5em calc(.45em + var(--main-lNav_arrow-arrowAreaWidth)) .6em 1em;
		transition: .18s ease-out;
		transition-property: color, background, border, box-shadow, opacity;
	}
	.lNavWrap li:not(.is-current) a::before { /* ホバー時背景_オーバーレイ */
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(255, 255, 255, .2);
		mix-blend-mode: overlay;
		transform: scaleX(0);
		transform-origin: right top;
		transition: transform .35s ease;
		/*opacity: 0;
		clip-path: inset(0 100% 0 0);
		transition: .18s ease-out;
		transition-property: opacity, clip-path;*/
	}
	.lNavWrap li a::after { /* グラデ_乗算 */
		/*content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to bottom, #fff 0%, #d7d7d7 100%);
		mix-blend-mode: multiply;*/
	}
	
	.lNavWrap li a .ln {
		display: block;
		position: relative;
		z-index: 1;
	}
	.lNavWrap li a .ln .upperPhrase {
		display: block;
		line-height: .9; /*1.15*/
		font-family: var(--site-font_family-en_1);
		font-size: 1.2em;
		letter-spacing: .06em;
	}
	.lNavWrap li a .ln .lowerPhrase {
		display: block;
		line-height: inherit;
		color: inherit;
		font-family: inherit;
		font-size: max(1rem, .65em);
		margin-top: calc(2px + .3em);
	}
	.lNavWrap li a .arrow {
		/*--main-lNav_arrow-arrowhead-width:	11px;
		inset: auto 12px auto auto;*/
		display: block;
		position: absolute;
		inset: auto var(--main-lNav_arrow-arrowhead-position_right) auto auto;
		z-index: 1;
		width: var(--main-lNav_arrow-arrowhead-width);
		aspect-ratio: 1;
		color: inherit;
		transition: transform .13s ease-out;
	}
	.lNavWrap li:not(.is-current) a[href] .arrow::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: inherit;
		border: 0 solid currentColor;
		border-width: 1px 1px 0 0;
		transform: scale( calc(1/(1*1.41421356)) ) translateY(-27.5%) rotate(135deg);
	}
	.lNavWrap li a:not([href]) .M_shinyEffect_toRight::before,
	.lNavWrap li.is-current a .M_shinyEffect_toRight::before {
		content: none;
	}
	.lNavWrap li a .M_shinyEffect_toRight::before {
		animation-duration: 6s;
	}

	/* -- placeholder, hover, current -- */
	.lNavWrap li a:not([href]) {
		color: rgba(255, 255, 255, .7);
		box-shadow: none;
		opacity: .5;
		transition: none;
	}
	.lNavWrap li a:not([href]) .comingsoon {
		display: block;
		line-height: 1.1;
		font-size: max(1rem, .5em);
		letter-spacing: .085em;
		border: 1px solid currentColor;
		padding: .225em .5em .325em;
		transform: scale(.9);
		transform-origin: left bottom;
	}
	/*.lNavWrap li:not(.is-current) a:not([href])::after {
		opacity: 0;
	}*/
	@media (hover: hover) and (pointer: fine) {
		.lNavWrap li:not(.is-current) a[href]:hover::before {
			transform: scaleX(1);
			transform-origin: left top;
			/*opacity: 1;
			clip-path: inset(0 0 0 0);*/
		}
		.lNavWrap li a[href]:hover .arrow {
			transform: translateY(3px);
		}
	}
	.lNavWrap li a[href]:focus-visible .arrow {
		transform: translateY(3px);
	}
	.lNavWrap li.is-current a {
		/*color: #000;*/
		background: rgba(99,78,18, .8);
	}
	.lNavWrap li.is-current a::after {
		/*background: linear-gradient(to top, #fff 0%, var(--main-lNavWrap-a-current-bgColor_gradient_rgba) 100%);*/
	}


@media screen and (min-width: 900.02px) {
	.lNavWrap li:not(:last-of-type) {
		border-right:1px solid rgba(var(--site-variationColor-yellow), 1);
	}
}

@media screen and (max-width: 900px) {
	.lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
		--main-lNavWrap-li-maxWidth:	450px;
	}
	:where([data-lnav-column="colMany"]).lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
		--main-lNavWrap-li-maxWidth:	150px;
	}

	.lNavWrap .lNav {
	}
	:where([data-lnav-column="col2"]).lNavWrap .lNav,
	:where([data-lnav-column="col3"]).lNavWrap .lNav,
	:where([data-lnav-column="col4"]).lNavWrap .lNav,
	:where([data-lnav-column="col5"]).lNavWrap .lNav {
		max-width: calc((var(--main-lNavWrap-li-maxWidth) * 2) + (var(--main-lNavWrap-ul-columnGap) * 1));
	}
	
	/*.lNavWrap ul {
	}
	:where([data-lnav-column="col2"]).lNavWrap ul,
	:where([data-lnav-column="col3"]).lNavWrap ul,
	:where([data-lnav-column="col4"]).lNavWrap ul {
		justify-content: center;
		justify-content: flex-start;
	}*/

	.lNavWrap li {
		width: 50%;
	}
	.lNavWrap li:nth-child(2n-1) {
		border-right:1px solid rgba(var(--site-variationColor-yellow), 1);
	}
	.lNavWrap li {
		border-bottom:1px solid rgba(var(--site-variationColor-yellow), 1);
	}
	
	:where([data-lnav-column="col2"]).lNavWrap li,
	:where([data-lnav-column="col3"]).lNavWrap li,
	:where([data-lnav-column="col4"]).lNavWrap li,
	:where([data-lnav-column="col5"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 1)) / 2);
	}
	:where([data-lnav-column="colMany"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 2)) / 3);
	}
}
@media screen and (max-width: 600px) {
	.lNavWrap {
		--main-lNav_arrow-arrowhead-width:			6px;
		--main-lNav_arrow-arrowhead-position_right:	7px;
		font-size: 1.2rem;
	}
	.lNavWrap .lNav {
		/*max-width: 410px;*/
	}
	:where([data-lnav-column="col2"]).lNavWrap li ,
	:where([data-lnav-column="col3"]).lNavWrap li,
	:where([data-lnav-column="col4"]).lNavWrap li,
	:where([data-lnav-column="col5"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 1)) / 2);
	}
	:where([data-lnav-column="colMany"]).lNavWrap li {
		width: calc((100% - (var(--main-lNavWrap-ul-columnGap) * 2)) / 3);
	}
	.lNavWrap li a {
		min-height: 50px;
		padding-left: .9em;
	}
}
/*@media screen and (max-width: 270px) {
	.lNavWrap {
		--main-lNavWrap-ul-rowGap:		0px;
		--main-lNavWrap-ul-columnGap:	0px;
	}
	.lNavWrap li {
		width: 100%;
		max-width: none;
	}
}*/

/* is_lNavWrap_labelFrame | SP時ラベルフレーム付き
---------------------------------------------------- */
@media screen and (max-width: 600px) {
	.lNavWrap[data-lnav-option="label"] {
		--main-lNavWrap-ul-rowGap:		2px;
		--main-lNavWrap-ul-columnGap:	0px;
		font-size: 1em;
	}
	.lNavWrap[data-lnav-option="label"] .lNav {
		position: relative;
		background: rgba(0, 0, 0, .1);
		padding: 1.2em 0;
	}
	.lNavWrap[data-lnav-option="label"] .lNav::before {
		content: attr(data-lnav_name); /*content: "PAGE MENU";*/
		display: block;
		line-height: 1;
		color: #000;
		font-family: var(--site-font_family-en_1);
		font-size: 1.3rem;
		text-align: center;
		text-indent: .2em;
		letter-spacing: .2em;
		margin: auto auto .2em;
		padding: .7em;
	}
	.lNavWrap[data-lnav-option="label"] ul {
		position: relative;
		width: 100%;
		/*background: #999;*/
		padding: .2em 0;
	}
	.lNavWrap[data-lnav-option="label"] li {
		width: 90%;
		max-width: none;
	}
}
@media screen and (max-width: 270px) {
	.lNavWrap[data-lnav-option="label"] {
		font-size: 1.2rem;
	}
}



/* categorySetBox													2023.11
---------------------------------------------------------------------------
- JSで読み込むアンカーリンク付の「カテゴリーセット」。
- 先頭のアンカーリンクは通常通り記述し、2つ目以降のアンカーリンクは先頭のコードをJSで抽出・挿入する。
- アンカーリンクは1種類のみが前提（アンカーリンク抽出をページ内全体から探すため）。
- 細かい設定は各ページ用CSSで設定を。
---------------------------------------------------------------------------
* 先頭	div.categorySetBox.categorySetBox_ccccc>(div.lNavAnchorWrap.js_categorySetMenuWrap>div.lNavWrap.js_categorySetMenu>nav{xxxxx})+(div.categorySetContainer#ccccc>section{xxxxx})
* JS読込	div.categorySetBox.categorySetBox_ccccc>(div.lNavAnchorWrap.js_categorySetMenuWrap{<!-- ####jsInclude__js_categorySetMenu -->})+(div.categorySetContainer#ccccc>section{xxxxx})
------------------------------------------------------------------------ */

	.categorySetBox {}

/* lNavAnchorWrap
---------------------------------------------------- */
	.lNavAnchorWrap {
		/*background: #fff;*/
	}

/* categorySetContainer
---------------------------------------------------- */
	.categorySetContainer {}




/* hrSeparateLine
------------------------------------------------------------------------ */
	hr.hrSeparateLine {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 11px;
		color: #666;
		background: linear-gradient(to right, currentColor 0%, currentColor 100%) center center / calc(100% - (15px * 2)) 1px no-repeat;
		border: none;
		margin: 0;
		margin-block: 0;
		margin-inline: 0;
		padding: 0;
	}
	hr.hrSeparateLine::before,
	hr.hrSeparateLine::after {
		content: "";
		display: block;
		width: 7px;
		aspect-ratio: 1;
		background: currentColor;
		border-radius: 100%;
	}



/* planBnrSection
------------------------------------------------------------------------ */
	.planBnrSection {
		background: url("../images/share/planBnr_bg@pc.jpg") right top / cover no-repeat;
	}
	.planBnrSection .en {
		text-align: center;
		--M-fluidFontSize-max-fontsize: 31;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1200;
		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)
		);
		font-family: var(--site-font_family-en_1);
		color: rgba(var(--site-variationColor-yellow), 1);
	}
	.planBnrSection .leadTxt {
		text-align: center;
		--M-fluidFontSize-max-fontsize: 31;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1200;
		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:#fff;
	}
	.planBnrSection .generalBtnUnit {
		margin-top:var(--site-marpad-S);
		background: rgba(166,135,43,1);
	}
	@media (hover: hover) and (pointer: fine) {
		 .planBnrSection .generalBtnUnit[href]:where(:hover) {
			background: rgba(166,135,43,.8);
		  }
	}
	
@media screen and (min-width: 600.02px){
	.planBnrSection {
		padding: var(--site-marpad-XL) 0;
	}
}
	
@media screen and (max-width: 600px) {
	.planBnrSection {
		padding:clamp(30px, (30 / 480 * 100vw), 40px);
		background: url("../images/share/planBnr_bg@sp.jpg") right top / cover no-repeat;
	}
	.planBnrSection .planBnrBgColor {
		padding:clamp(60px, (60 / 480 * 100vw), 80px) 10px;
		background: rgba(0,0,0,.5);
	}
	.planBnrSection .leadTxt {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
}