@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		tk_portal_common.css
 *	Alteration:		2025.03.11
 *	style info:		「野村不動産の都心型戸建」のポータルページ用 共通のリセット、モジュールパーツのCSS
 *					※全ページに関わるため、原則書き換え禁止
----------------------------------------------------------------------------------------------------------------
 *	< load >
 *	< COMMON > - Reset - CssCustomProperties - Setting - AddParts - ShowHide - Etc
 *	< FRAMEWORK > - OuterWide
----------------------------------------------------------------------------------------------------------------
 * 01	メディアクエリの 750px以上を含む設定 には print をつける。※印刷幅=750px。
 * 02	@keyframes を @media の中に入れないように。
 * 03	(orientation: landscape)は、デバイスが横長の時。(orientation: portrait)は、デバイスが縦長の時。
----------------------------------------------------------------------------------------------------------------
 * [ Media Queries List ]
 * このCSSは「SP→TB→PC」の順に記述しています（SPファースト）。
 * print の有無に注意。
----------------------------------------------------------------------------
 * SPs	= 320 以上
 * SP	= 360 以上
 * SPl	= 480 以上
 * TB	= 750 以上
 * TBl	= 1000 以上
 * PC	= 1200 以上
 * PCl	= 1600 以上
----------------------------------------------------------------------------
@media screen and (min-width: 320px) {}
@media screen and (min-width: 360px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 480px) and (max-width: 749.98px) {}
@media print, screen and (min-width: 750px) {}
@media print, screen and (min-width: 1000px) {}
@media print, screen and (min-width: 750px) and (max-width: 1199.98px) {}
@media print, screen and (min-width: 1200px) {}
@media print, screen and (min-width: 1600px) {}
@media print, screen and (min-width: 1200px) and (max-width: 1919.98px) {}
************************************************************************************************************* */

/* ***************************************************************************************************
	load | @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
 * フォント読込はHTMLにて。											2025.03
-------------------------------------------------------------------------------
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lato&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;600;700&display=swap" rel="stylesheet">
-------------------------------------------------------------------------------
 * [ Zen Old Mincho (400,500,600,700) ]
 * [ Zen Kaku Gothic New (400,500,700) ]
 * [ Cinzel (400..900) ]
 * [ Noto Sans Japanese (100..900) ]
 * [ Noto Sans (100..900) ]
 * [ Noto Serif Japanese (200..900) ]
 * [ Noto Serif (100..900) ]
 * [ Lato (400) ]
 *
 * SOURCE :
 * 		https://fonts.google.com/share?selection.family=Cinzel:wght@400..900|Lato|Noto+Sans+JP:wght@100..900|Noto+Sans:wght@100..900|Noto+Serif+JP:wght@200..900|Noto+Serif:wght@100..900|Zen+Kaku+Gothic+New:wght@400;500;700|Zen+Old+Mincho:wght@400;500;600;700
 * CODE :
 * 		font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans", sans-serif;
 * 		font-family: "Zen Old Mincho", "Noto Serif JP", "Noto Serif", serif;
 * 		font-family: "Lato", sans-serif;
 * 		font-family: "Cinzel", serif;
 * 		font-weight: 100..900;
 * 		font-style: normal;
 *
 */


/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/* ============================================================================
	Reset 															2025.03
-------------------------------------------------------------------------------
	[2024.07]	*{min-inline-size:0;}を追加（grid時の文字のオーバーフロー対策）
				（子要素があふれたときに横スクロールさせる機構で、子要素を重ねたくない場合は要リセット解除。［横スクロールパンくずの[例]：.breadcrumbBox{overflow-x:scroll;} .breadcrumbBox li{min-inline-size:revert;}］）
============================================================================ */
	/*table {border-collapse:collapse;border-spacing:0;}*/
* {box-sizing:inherit;margin:0;padding:0;}
html {box-sizing:border-box;-webkit-text-size-adjust:100%;}
::before, ::after {box-sizing:inherit;text-decoration:inherit;vertical-align:inherit;}
ul, ol {list-style:none;}
i, em {font-style:inherit;}
h1, h2, h3, h4, h5, h6, b, strong {font-weight:inherit;}
h1, h2, h3, h4, h5, h6 {font-size:inherit;}
/*:where(hr){block-size:0;overflow:visible;color:inherit;margin-block:.5em;border:none;border-block-start:1px solid;}*/

* {min-inline-size:0;}
sub,
sup {font-size:max(1rem,75%);line-height:0;position:relative;vertical-align:baseline;}
sub {bottom:-.25em;}
sup {top:-.5em;}
:where(small) sub {bottom:-.05em;font-size:max(.9rem,.91em);}
:where(small) sup {top:-.1em;font-size:max(.9rem,.91em);}


/* ============================================================================
	CssCustomProperties 											2025.03
============================================================================ */
/* SITE
---------------------------------------------------- */
	:root {
		/* フォント */
		--site-font_family-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans", 'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
		--site-font_family-serif: "Zen Old Mincho", "Noto Serif JP", "Noto Serif", 'Hiragino Mincho ProN','Yu Mincho',serif;
		--site-font_family-en_1: "Lato", Arial, Helvetica, var(--site-font_family-sans);
		--site-font_family-en_2: "Cinzel", 'Times New Roman', Times, var(--site-font_family-serif);
		--site-font_family-basic: var(--site-font_family-serif);
		--site-font_family-caption: var(--site-font_family-sans);
		
		/* テーマカラー */			/* color: rgb(102 102 102 / .8); */
		--site-themeColor-base:						245 246 245;	/* rgb | #f5f6f5 | PaleGray */
		--site-themeColor-base_secondary:			83 83 83;		/* rgb | #535353 | DarkGray */
		--site-themeColor-base_secondary_dark:		39 39 39;		/* rgb | #242424 | NearlyBlackGray */
		--site-themeColor-base_tertiary:			230 239 239;	/* rgb | #e6efef | PaleCyan */
		--site-themeColor-text:						60 60 60;		/* rgb | #3c3c3c | DarkGray */
		--site-themeColor-text_reverse:				255 255 255;	/* rgb | #ffffff | White */
		--site-themeColor-text_strong:				0 0 0;			/* rgb | #000000 | Black */
		--site-themeColor-accent_1:					193 168 90;		/* rgb | #c1a85a | SoftGold */
		--site-themeColor-accent_2:					160 134 82;		/* rgb | #a08652 | DullGold */
		--site-themeColor-accent_3:					226 196 104;	/* rgb | #e2c468 | LightGold */
		--site-themeColor-accent_4:					168 63 63;		/* rgb | #a83f3f | DullRed */
		
		/* カラーバリエーション */
		--site-variationColor-blackish:				60 60 60;		/* rgb | #3c3c3c | 黒系 */
		--site-variationColor-whitish:				255 255 255;	/* rgb | #ffffff | 白系 */
		--site-variationColor-grayish:				104 104 104;	/* rgb | #686868 | 灰系 */
		--site-variationColor-grayish_light:		203 203 203;	/* rgb | #cbcbcb | 淡灰系 */
		
		/* 幅 */
		--site-sizeContentWide-XL:		100%;
		--site-sizeContentWide-L:		100%;
		--site-sizeContentWide-M:		88%;
		--site-sizeContentWide-S:		80%;
		--site-sizeMaxWidth-XL:			1920px;
		--site-sizeMaxWidth-L:			1500px;
		--site-sizeMaxWidth-M:			1000px;
		--site-sizeMaxWidth-S:			1000px;
		
		/* 余白 */
		--site-marpad-XXXL:				75px;
		--site-marpad-XXL:				75px;
		--site-marpad-XL:				75px;
		--site-marpad-L:				60px;
		--site-marpad-M:				40px;
		--site-marpad-S:				40px;
		--site-marpad-XS:				30px;
		--site-marpad-XXS:				30px;
		--site-marpad-XXXS:				25px;
		--site-marpad-XXXXS:			20px;
		
		/* スティッキー要素の高さ・余白 ※数値は要確認（ざっくり対応ver ※厳密にする場合はJSで） */
		/*--site-stickyHeader-height:		75px;*/
	}
@media print, screen and (min-width: 750px) {
	:root {
		/* 幅 */
		--site-sizeContentWide-XL:		100%;
		--site-sizeContentWide-L:		94%;
		--site-sizeContentWide-M:		90%;
		--site-sizeContentWide-S:		80%;
		/* 余白 */
		--site-marpad-XXXL:				180px;
		--site-marpad-XXL:				140px;
		--site-marpad-XL:				110px;
		--site-marpad-L:				90px;
		--site-marpad-M:				70px;
		--site-marpad-S:				60px;
		--site-marpad-XS:				50px;
		--site-marpad-XXS:				40px;
		--site-marpad-XXXS:				40px;
		--site-marpad-XXXXS:			30px;
		
		/* スティッキー要素の高さ・余白 ※数値は要確認（ざっくり対応ver ※厳密にする場合はJSで） */
		/*--site-stickyHeader-height:		50px;*/
	}
}
@media print, screen and (min-width: 1200px) {
	:root {
		/* 余白 */
		--site-marpad-XXXL:				200px;
		--site-marpad-XXL:				150px;
		--site-marpad-XL:				120px;
		--site-marpad-L:				100px;
		--site-marpad-M:				80px;
		--site-marpad-S:				70px;
		--site-marpad-XS:				60px;
		--site-marpad-XXS:				50px;
		--site-marpad-XXXS:				40px;
		--site-marpad-XXXXS:			30px;
	}
}

/* MODULE
---------------------------------------------------- */
	:root {
		/* イージング */
		--M-easing-easeInOutQuint:		cubic-bezier(.83, 0, .17, 1);
		--M-easing-easeInOutCubic:		cubic-bezier(.65, 0, .35, 1);
		--M-easing-easeOutQuint:		cubic-bezier(.22, 1, .36, 1);
		/* my */
		--M-easing-myEaseInBack_01:		cubic-bezier(.98, -.64, .46, .94);
		--M-easing-myEaseOutBack_01:	cubic-bezier(.4, .2, .1, 1.5);
		--M-easing-myEaseOutBack_02:	cubic-bezier(.28, .09, .05, 1.22);
	}

/* 文字サイズ可変CSS
------------------------------------------------------
- [--M-fluidFontSize-fontSize:]と[font-size:]は書き換えなしでそのまま使用する。
------------------------------------------------------
[例]：文字サイズ[1.85rem~2.4rem]・ビューポート[320~980]
font-size: clamp(最小文字, calc(最小文字 + (1vw - ビューポート最小幅のrem値) * (100 * (文字可変量) / (ビューポート可変量))), 最大文字);
font-size: clamp(1.85rem, calc(1.85rem + (1vw - .32rem) * (100 * (24 - 18.5) / (980 - 320))), 2.4rem);
	↓
.xxxxx {
	--M-fluidFontSize-max-fontsize: 24;
	--M-fluidFontSize-min-fontsize: 18.5;
	--M-fluidFontSize-max-viewport: 980;
	--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 );

	font-size: var(--M-fluidFontSize-fontSize);
}
---------------------------------------------------- */


/* ============================================================================
	Setting
============================================================================ */
/* ----------------------------------------------------------------------------
	basic Setting
---------------------------------------------------------------------------- */
/* html */
	html {
		font-size: .625em;
		scrollbar-gutter: stable;							/* モーダル展開時のがたつき対策 */
	}

/* Img */
	img,
	object[data-obj-roleimg*="roleImg"] {
		width: 100%;
		height: auto;
		vertical-align: bottom;								/* 余白対策 */
	}
	a object[data-obj-roleimg*="_link"] {					/* リンクが効かなくなる仕様の解除 | 例：<a href="#"><object data="xxx.svg" data-obj-roleimg="roleImg_link"></object></a> */
		pointer-events: none;
	}

/* svg */
	svg:not(:root) {
		overflow: hidden;
	}
	img[src$=".svg"],
	img[src$=".svgz"],
	object[data-obj-roleimg*="roleImg"][data$=".svg"],
	object[data-obj-roleimg*="roleImg"][data$=".svgz"] {	/* for IE11 | ※親要素に幅指定必須 (Width specification is mandatory for parent element.) */
		width: 100%;
	}

/* form */
	button, input, select, textarea {
		font: inherit;
	}

/* Font Family */
	.fontSans,
	.fontSansBox * {
		font-family: var(--site-font_family-sans);
	}
	.fontSerif,
	.fontSerifBox * {
		font-family: var(--site-font_family-serif);
	}
	.fontEn01,
	.fontEn01Box * {
		font-family: var(--site-font_family-en_1);
	}
	.fontEn02,
	.fontEn02Box * {
		font-family: var(--site-font_family-en_2);
	}

/* Text */
	.txtColorInherit {color:inherit;}
	.txtColorBk {color: rgb(var(--site-variationColor-blackish)) !important;} /*黒系*/
	.txtColorWh {color: rgb(var(--site-variationColor-whitish)) !important;} /*白系*/
	.txtColorGr {color: rgb(var(--site-variationColor-grayish)) !important;} /*灰系*/
	
	.txtColor_text {			color: rgb(var(--site-themeColor-text)) !important;}
	.txtColor_text_reverse {	color: rgb(var(--site-themeColor-text_reverse)) !important;}
	.txtColor_text_strong {		color: rgb(var(--site-themeColor-text_strong)) !important;}
	.txtColor_accent_1 {		color: rgb(var(--site-themeColor-accent_1)) !important;}
	.txtColor_accent_2 {		color: rgb(var(--site-themeColor-accent_2)) !important;}
	.txtColor_accent_3 {		color: rgb(var(--site-themeColor-accent_3)) !important;}
	.txtColor_accent_4 {		color: rgb(var(--site-themeColor-accent_4)) !important;}
	
	.bgColor_base {							color: rgb(var(--site-themeColor-text));			background: rgb(var(--site-themeColor-base));}
	.bgColor_base_secondary {				color: rgb(var(--site-themeColor-text_reverse));	background: rgb(var(--site-themeColor-base_secondary));}
	.bgColor_base_secondary_dark {			color: rgb(var(--site-themeColor-text_reverse));	background: rgb(var(--site-themeColor-base_secondary_dark));}
	.bgColor_accent_1 {						color: rgb(var(--site-themeColor-text_strong));		background: rgb(var(--site-themeColor-accent_1));}
	.bgColor_accent_2 {						color: rgb(var(--site-themeColor-text_reverse));	background: rgb(var(--site-themeColor-accent_2));}
	.bgColor_accent_3 {						color: rgb(var(--site-themeColor-text_strong));		background: rgb(var(--site-themeColor-accent_3));}
	.bgColor_accent_4 {						color: rgb(var(--site-themeColor-text_reverse));	background: rgb(var(--site-themeColor-accent_4));}
	
	.emphasis {font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
	
	.EmParentheses {margin-left:-.5em;margin-right:-.5em;}
	.EmParenthesesL {margin-left:-.5em;}
	.EmParenthesesR {margin-right:-.5em;}
	.EmParenthesesH {margin-left:-.25em;margin-right:-.25em;}/* Half */
	.EmParenthesesHL {margin-left:-.25em;}
	.EmParenthesesHR {margin-right:-.25em;}
	.EmParenthesesInline {margin-inline-start:-.5em;margin-inline-end:-.5em;}
	.EmParenthesesInlineS {margin-inline-start:-.5em;}
	.EmParenthesesInlineE {margin-inline-end:-.5em;}
	.EmParenthesesInlineH {margin-inline-start:-.25em;margin-inline-end:-.25em;}/* Half */
	.EmParenthesesInlineHS {margin-inline-start:-.25em;}
	.EmParenthesesInlineHE {margin-inline-end:-.25em;}

/* Small Text */
	small.bl,
	small.bltr,
	small.bltrOverTB,
	small.bltrOverPC {display:block;/*line-height:1.4;*/margin-top:.35em;}
	small.bltr {text-align:right;}
	
	.captionWrap {display:block;}
	.captionWrap small {display:inline-block;/*line-height: 1.7;font-size:1.1rem;letter-spacing:.07em;*/}
	
	.caption {
		line-height: 1.5;
		color: inherit;
		font-family: var(--site-font_family-caption);
		font-size: max(1rem, .769230em);
		/*font-weight: 470;*/
		/*letter-spacing: .03em;*/
		/*opacity: .7;*/ /* 気持ち軽くする(不要なら削除) */
	}
@media print, screen and (min-width: 750px) {
	small.bltrOverTB {text-align:right;}
	
	.caption {
		font-size: max(1.2rem, .75em);
	}
}
@media print, screen and (min-width: 1200px) {
	small.bltrOverPC {text-align:right;}
}

/* Imgcap | 例: <p class="imgcapParent"><img><small class="imgcap bk">caption</small></p> <p class="imgcapParent"><img><small class="imgcap"><span class="wh">caption</span></small></p> */
	.imgcapParent {
		position: relative;
	}
	.imgcap,
	.imgcapkeep {
		display: block;
		/*position: absolute;*/
		bottom: 0;
		right: 0;
		/*padding: 5px 10px;*/
		
		/* ///// .caption と同じ設定 ///// */
		line-height: 1.5;
		color: inherit;
		font-family: var(--site-font_family-caption);
		font-size: max(1rem, .769230em);
		/*font-weight: 470;*/
		/*letter-spacing: .03em;*/
		/*opacity: .7;*/ /* 気持ち軽くする(不要なら削除) */
	}
	.imgcap {
		position: static;
		padding: .3em .5em 0;
	}
	.imgcapkeep {
		position: absolute;
		padding: 5px 10px;
	}
	.imgcap.bg,
	.imgcapkeep.bg {
		padding: 2px 6px;
	}
	.imgcap > span {
		display: block;
	}
	.imgcapkeep > span {
		display: inline-block;
	}
	.imgcapkeep.is_imgcapkeep_top_left {	inset: 0 auto auto 0;}
	.imgcapkeep.is_imgcapkeep_top_right {	inset: 0 0 auto auto;}
	.imgcapkeep.is_imgcapkeep_bottom_left {	inset: auto auto 0 0;}
	.imgcapkeep.is_imgcapkeep_bottom_right {inset: auto 0 0 auto;}
	.imgcapkeep.wh {color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 3px rgb(0 0 0/.3);}
	.imgcapkeep.bk {color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcapkeep.gr {color:rgb(var(--site-variationColor-grayish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcapkeep .wh {color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 5px rgb(0 0 0/.9), 0 0 4px rgb(0 0 0/.9), 0 0 3px rgb(0 0 0), 0 0 2px rgb(0 0 0);}
	.imgcapkeep .bk {color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 9px rgb(255 255 255/.9), 0 0 9px rgb(255 255 255/.9), 0 0 5px rgb(255 255 255/.5), 0 0 2px rgb(255 255 255/.5), 0 0 1px rgb(255 255 255/.5), 0px 1px 1px rgb(255 255 255/.5), 0px -1px 1px rgb(255 255 255/.5), 1px 0px 1px rgb(255 255 255/.5), -1px 0px 1px rgb(255 255 255/.5), 1px 1px 1px rgb(255 255 255/.5), -1px 1px 1px rgb(255 255 255/.5), 1px -1px 1px rgb(255 255 255/.5), -1px -1px 1px rgb(255 255 255/.5), .5px .5px .5px rgb(255 255 255/.7);}
	.imgcapkeep .gr {color:rgb(var(--site-variationColor-grayish));text-shadow:0 0 9px rgb(255 255 255/.9), 0 0 9px rgb(255 255 255/.9), 0 0 5px rgb(255 255 255/.5), 0 0 2px rgb(255 255 255/.5), 0 0 1px rgb(255 255 255/.5), 0px 1px 1px rgb(255 255 255/.5), 0px -1px 1px rgb(255 255 255/.5), 1px 0px 1px rgb(255 255 255/.5), -1px 0px 1px rgb(255 255 255/.5), 1px 1px 1px rgb(255 255 255/.5), -1px 1px 1px rgb(255 255 255/.5), 1px -1px 1px rgb(255 255 255/.5), -1px -1px 1px rgb(255 255 255/.5), .5px .5px .5px rgb(255 255 255/.7);}
	.imgcapkeep.wh.bg {background-color:rgb(0 0 0/.5);text-shadow:none;}
	.imgcapkeep.bk.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
	.imgcapkeep.gr.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
@media print, screen and (min-width: 750px) {
	.imgcap,
	.imgcapkeep {
		/* ///// .caption と同じ設定 ///// */
		font-size: max(1.2rem, .75em);
	}
	.imgcap {
		position: absolute;
		padding: 5px 10px;
	}
	.imgcap > span {
		display: inline-block;
	}
	.imgcap.is_imgcap_top_left {	inset: 0 auto auto 0;}
	.imgcap.is_imgcap_top_right {	inset: 0 0 auto auto;}
	.imgcap.is_imgcap_bottom_left {	inset: auto auto 0 0;}
	.imgcap.is_imgcap_bottom_right {inset: auto 0 0 auto;}
	.imgcap.wh {color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 3px rgb(0 0 0/.3);}
	.imgcap.bk {color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcap.gr {color:rgb(var(--site-variationColor-grayish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcap .wh {color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 5px rgb(0 0 0/.9), 0 0 4px rgb(0 0 0/.9), 0 0 3px rgb(0 0 0), 0 0 2px rgb(0 0 0);}
	.imgcap .bk {color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 9px rgb(255 255 255/.9), 0 0 9px rgb(255 255 255/.9), 0 0 5px rgb(255 255 255/.5), 0 0 2px rgb(255 255 255/.5), 0 0 1px rgb(255 255 255/.5), 0px 1px 1px rgb(255 255 255/.5), 0px -1px 1px rgb(255 255 255/.5), 1px 0px 1px rgb(255 255 255/.5), -1px 0px 1px rgb(255 255 255/.5), 1px 1px 1px rgb(255 255 255/.5), -1px 1px 1px rgb(255 255 255/.5), 1px -1px 1px rgb(255 255 255/.5), -1px -1px 1px rgb(255 255 255/.5), .5px .5px .5px rgb(255 255 255/.7);}
	.imgcap .gr {color:rgb(var(--site-variationColor-grayish));text-shadow:0 0 9px rgb(255 255 255/.9), 0 0 9px rgb(255 255 255/.9), 0 0 5px rgb(255 255 255/.5), 0 0 2px rgb(255 255 255/.5), 0 0 1px rgb(255 255 255/.5), 0px 1px 1px rgb(255 255 255/.5), 0px -1px 1px rgb(255 255 255/.5), 1px 0px 1px rgb(255 255 255/.5), -1px 0px 1px rgb(255 255 255/.5), 1px 1px 1px rgb(255 255 255/.5), -1px 1px 1px rgb(255 255 255/.5), 1px -1px 1px rgb(255 255 255/.5), -1px -1px 1px rgb(255 255 255/.5), .5px .5px .5px rgb(255 255 255/.7);}
	.imgcap.wh.bg {background-color:rgb(0 0 0/.5);text-shadow:none;}
	.imgcap.bk.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
	.imgcap.gr.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
}

/* Bgcap | （~=スペース区切り毎の正確な値） | content 内に「\A」で改行可能。 white-space:pre; 必須。 */
	[data-bgcap-parent] {
		position: relative;
		/*background-image: ; 各ページ用CSSで設定*/
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	[data-bgcap-parent]::after {
		/*content: ""; 各ページ用CSSで設定（または後述のデータ属性）*/
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		white-space: pre;
		padding: 5px 10px;
		
		/* ///// .caption と同じ設定 ///// */
		line-height: 1.5;
		color: inherit;
		font-family: var(--site-font_family-caption);
		font-size: max(1rem, .769230em);
		/*font-weight: 470;*/
		/*letter-spacing: .03em;*/
		/*opacity: .7;*/ /* 気持ち軽くする(不要なら削除) */
	}
	[data-bgcap-parent][data-bgcap-alt]::after {
		content: attr(data-bgcap-alt); /*HTMLにデータ属性を設定した場合*/
	}
	[data-bgcap-parent~="topLeft"]::after {		top: 0;	left: 0;}
	[data-bgcap-parent~="topRight"]::after {	top: 0; right: 0;}
	[data-bgcap-parent~="bottomLeft"]::after {	bottom: 0; left: 0;}
	[data-bgcap-parent~="bottomRight"]::after {	bottom: 0; right: 0;}
	[data-bgcap-parent~="wh"]::after {
		color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 3px rgb(0 0 0/.3);
	}
	[data-bgcap-parent~="bk"]::after {
		color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 3px rgb(255 255 255/.3);
	}
	[data-bgcap-parent~="bg"]::after {
		text-shadow:none; padding: 2px 6px;
	}
	[data-bgcap-parent~="wh"][data-bgcap-parent~="bg"]::after {
		background-color:rgb(0 0 0/.5);
	}
	[data-bgcap-parent~="bk"][data-bgcap-parent~="bg"]::after {
		background-color:rgb(255 255 255/.6);
	}
	[data-bgcap-parent~="1_2rem"]::after {
		font-size: 1.2rem !important;
	}
	[data-bgcap-parent~="1_1rem"]::after {
		font-size: 1.1rem !important;
	}
	[data-bgcap-parent~="1rem"]::after {
		font-size: 1rem !important;
	}
	[data-bgcap-parent~="09rem"]::after {
		font-size: .9rem !important;
	}
	[data-bgcap-parent~="08rem"]::after {
		font-size: .8rem !important;
	}
@media print, screen and (min-width: 750px) {
	[data-bgcap-parent]::after {
		/* ///// .caption と同じ設定 ///// */
		font-size: max(1.2rem, .75em);
	}
}

/* Symbol List */
	/* ul.symList>li.symItem*2>div.sym+div.symItemText */
	.symList > .symItem {display:flex;width:100%;}
	.symList > .symItem::before,
	.symList > .symItem .sym {display:block;white-space:nowrap;padding-right:.25em;}
	.symList > .symItem .symItemText {flex:1 1;display:block;}
	.symList[data-star-symlist-styletype="circleFill"] > .symItem::before { content: "●";}
	.symList[data-star-symlist-styletype="squareFill"] > .symItem::before { content: "■";}
	.symList[data-star-symlist-styletype="squareLine"] > .symItem::before { content: "□";}
	
	/* small.symList-kome>span.symItem*2>span.sym{※}+span.symItemText{xxx}>br */
	.symList-kome {display:block!important;}
	.symList-kome .symItem {display:flex;width:100%;}
	.symList-kome .sym {display:block;white-space:nowrap;padding-right:.25em;}
	.symList-kome .symItemText {flex:1 1;display:block;}
	.symList-kome span.symItemInnerLineBreakItem {/*width: 100%;*/}	/* 「.symItem」または「.legendBox i」の兄弟要素。HTMLの改行したい位置に要素を追加し、任意のメディアクエリのタイミングにこのスタイルを追加する。 */
	
	/* legendBox | 2023.09 変更（注：white-space:nowrap;） */
	/* small.symList-kome>span.symItem.legendBox>(i*3>img[src="xxx"][alt="xxx色"][width="000"][height="000"])+(i*3>{XXXxxxxxx})+br */
	.symList-kome .legendBox {display:flex;flex-wrap:wrap;justify-content:flex-start;}
	.symList-kome .legendBox i {display:flex;align-items:center;white-space:nowrap;margin-right:1.35em;padding:.4em 0;}
	.symList-kome .legendBox img {line-height:1;margin-right:3px; /*height:1.5em;*/}
	.symList-kome .legendBox br:last-child {display: none;}

@media screen and (max-width: 1199.98px) {
	.symList-kome span.symItemInnerLineBreakItem_belowTBl {width: 100%;}
}
@media screen and (max-width: 999.98px) {
	.symList-kome span.symItemInnerLineBreakItem_belowTB {width: 100%;}
}
@media screen and (max-width: 749.98px) {
	.symList-kome span.symItemInnerLineBreakItem_belowSPl {width: 100%;}
}
@media screen and (max-width: 479.98px) {
	.symList-kome span.symItemInnerLineBreakItem_belowSP {width: 100%;}
}

/* ---------------------------------
	Link
--------------------------------- */
	/* ----- リセット ----- */
	a {
		color: inherit;
		text-decoration: none;
	}
	a .inbl {
		color: inherit;
		text-decoration: inherit;
	}
	/* ----- 汎用：文字色青・下線付き ----- */
	a.txtLink,
	.txtLink a {
		/*color: #4d92ff!important;*/
		text-decoration: underline !important;
		text-underline-offset: .25em;
	}
	/* ----- 汎用：hover時_透過フェード ----- */
	a.hover,
	.hover a,
	.hoverItem {
		transition: opacity 100ms ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
		a.txtLink:hover,
		.txtLink a:hover {
			text-decoration: none !important;
		}
		a.hover:hover,
		.hover a:hover,
		.hoverItem:hover {
			opacity: .63;
		}
	}
	a.txtLink:focus-visible,
	.txtLink a:focus-visible {
			text-decoration: none !important;
	}
	a.hover:focus-visible,
	.hover a:focus-visible,
	.hoverItem:focus-visible {
			opacity: .63;
	}

/* ---------------------------------
	Button
--------------------------------- */
	/* ボタン要素のスタイルリセット | button.M_btnReset */
	.M_btnReset {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		text-align: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
	}
	.M_btnReset:not([disabled]) {
		cursor: pointer;
	}


/* ============================================================================
	AddParts
-------------------------------------------------------------------------------
	* generalButton
	- アイコンエリア | シンプルアロー
	* ico_plus
	* M_shinyEffect
	* M_KEYFRAMES
============================================================================ */

/* generalButton													2025.03
---------------------------------------------------------------------------
- 汎用ボタン（::before,::afterはアイコンエリアとして使用）
- ラベルエリア中央配置、アイコンエリア両端配置
- テキスト中央揃え
- 例：<a href="xxx" class="generalButton"><span class="label">XXX</span></a>
- 例：<a href="xxx" class="generalButton"><span class="label">XXX</span><span class="btnBg">//背景色など</span></a>
- 例：<button type="button" class="generalButton"><span class="label">XXX</span></button>
------------------------------------------------------------------------ */
	[class*="generalButton"] {
		--tkpCommon-generalButton-boxShadow: 0 5px 5px 0 rgb(0 0 0/.35);
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		position: relative;
		z-index: 0;									/* for Safari.（border-radius時必須） */
		width: 100%;
		/*max-width: 330px;*/
		/*min-height: 50px;*/						/* 初期値: 50px（非表示可） */
		line-height: 1.5;
		font-size: 1.3rem;
		/*font-weight: 600;*/
		text-align: center;							/* 初期値: center */
		text-decoration: none;
		letter-spacing: .1em;
		margin: 0 auto;
		padding: 1em 14px;
		box-shadow: var(--tkpCommon-generalButton-boxShadow);
		translate: 0 .01px;							/* おまじない（hover時にtranslate操作があるときに、ここが(0 0)のままだと少しずれることがあるので.01pxを追加しておく） */
							/*background: tan;*/
							/*writing-mode: vertical-rl;*/
	}
	/* アイコンエリア */
	[class*="generalButton"]::before,
	[class*="generalButton"]::after {
		content: "";
							/*background: linen;
							box-shadow: 0 0 0 1px rgb(255 0 0/.5);*/
	}
	/* ラベルエリア */
	[class*="generalButton"] .label {
		display: block;
	}
	/* hover（共通） */
	[class*="generalButton"][href],
	button:not([disabled])[class*="generalButton"] {
		transition: 100ms ease-out;
		transition-property:  color, background, border, box-shadow, opacity, translate;
	}
	@media (hover: hover) and (pointer: fine) {
		[class*="generalButton"][href]:hover,
		button:not([disabled])[class*="generalButton"]:hover {
			--tkpCommon-generalButton-boxShadow: 0 2px 2px 0 rgb(0 0 0/.45);
			translate: 0 2px;
		}
	}
	[class*="generalButton"][href]:focus-visible,
	button:not([disabled])[class*="generalButton"]:focus-visible {
			--tkpCommon-generalButton-boxShadow: 0 2px 2px 0 rgb(0 0 0/.45);
			translate: 0 2px;
	}
	
	/* 細かいパーツ
	----------------------- */
	[class*="generalButton"] .en {}	/*font-family: var(--site-font_family-en_1); font-size: 1.125em;*/
	[class*="generalButton"] .ja {}
	[class*="generalButton"] .inbl {	text-decoration: inherit;}
	[class*="generalButton"] .kana {	letter-spacing: -.02em;}
	[class*="generalButton"] .kochira {}
	

	/* ---------------------------------
		btn000
	--------------------------------- */
	/*[class*="generalButton"].btnL {
		max-width: 600px;
	}
	[class*="generalButton"].btnS {
		max-width: 330px;
	}*/

	/* ---------------------------------
		start配置
	------------------------------------
	- ラベルエリア先頭配置、アイコンエリア末尾配置
	- テキスト先頭揃え
	- 例：<a href="xxx" class="generalButton is_generalButton_inlineStart"><span class="label">XXX</span></a>
	--------------------------------- */
	.is_generalButton_inlineStart {
		grid-template-columns: auto 1fr;
		text-align: left;
	}
	.is_generalButton_inlineStart::before {
		content: none;
	}

	/* ---------------------------------
		角丸
	--------------------------------- */
	.is_generalButton_round {
		overflow: hidden;
		border-radius: 8em;
	}

	/* ---------------------------------
		単色
	--------------------------------- */
	.generalButton {
		color: rgb(var(--site-themeColor-text));
		background: #fff;
	}
	/*@media (hover: hover) and (pointer: fine) {
		.generalButton[href]:hover,
		button:not([disabled]).generalButton:hover {
			background: #bbbbbb;
		}
	}
	.generalButton[href]:focus-visible,
	button:not([disabled]).generalButton:focus-visible {
			background: #bbbbbb;
	}*/
	/* ---------------------------------
		枠線
	--------------------------------- */
/*	.generalButton_border {
		color: rgb(var(--site-themeColor-text));
		background: transparent;
		box-shadow: 0 0 0 1px #000 inset, var(--tkpCommon-generalButton-boxShadow);
	}
	@media (hover: hover) and (pointer: fine) {
		.generalButton_border[href]:hover,
		button:not([disabled]).generalButton_border:hover {
			background: #bbbbbb;
		}
	}
	.generalButton_border[href]:focus-visible,
	button:not([disabled]).generalButton_border:focus-visible {
			background: #bbbbbb;
	}*/
	/* ---------------------------------
		内側枠線
	--------------------------------- */
	.generalButton_innerBorder {
		color: rgb(var(--site-themeColor-text));
		background: #fff;
	}
	.generalButton_innerBorder .btnBd {
		position: absolute;
		inset: 5px;
		z-index: -1;
		box-shadow: 0 0 0 1px currentColor inset;
	}
	/*@media (hover: hover) and (pointer: fine) {
		.generalButton_innerBorder[href]:hover,
		button:not([disabled]).generalButton_innerBorder:hover {
			background: #bbbbbb;
		}
	}
	.generalButton_innerBorder[href]:focus-visible,
	button:not([disabled]).generalButton_innerBorder:focus-visible {
			background: #bbbbbb;
	}*/
	/* ---------------------------------
		グラデーション
	------------------------------------
		- 例：<a href="xxx" class="generalButton_bgGradient"><span class="label">XXX</span><span class="btnBg">//背景色など</span></a>
	--------------------------------- */
/*	.generalButton_bgGradient {
		color: rgb(var(--site-themeColor-text));
		background: #ffffff;
	}
	.generalButton_bgGradient .btnBg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(to right, rgb(0 0 0/.25) 0%, rgb(0 0 0/0) 45% 55%, rgb(0 0 0/.25) 100%);
		opacity: 1;
		transition: opacity 180ms ease-out;
	}
	.generalButton_bgGradient .label {
		position: relative;
		z-index: 3;
	}
	@media (hover: hover) and (pointer: fine) {
		.generalButton_bgGradient[href]:hover .btnBg,
		button:not([disabled]).generalButton_bgGradient:hover .btnBg {
			opacity: .33;
		}
	}
	.generalButton_bgGradient[href]:focus-visible .btnBg,
			button:not([disabled]).generalButton_bgGradient:focus-visible .btnBg {
			opacity: .33;
	}*/
	/* ---------------------------------
		グラデーション | hover時にグラデをスライドさせる場合
	------------------------------------
		- 例：<a href="xxx" class="generalButton_bgGradient"><span class="label">XXX</span></a>
	--------------------------------- */
/*	.generalButton_bgGradient {
		color: #fff;
		background: linear-gradient(to right, red 0%, violet 30%, violet 50%, blue 90%) right center / 200% auto no-repeat;
		transition: background 300ms ease-out, box-shadow 180ms ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
		.generalButton_bgGradient[href]:hover,
		button:not([disabled]).generalButton_bgGradient:hover {
			background-position: left center;
		}
	}
	.generalButton_bgGradient[href]:focus-visible,
	button:not([disabled]).generalButton_bgGradient:focus-visible {
			background-position: left center;
	}*/
	/* ---------------------------------
		色追加
	------------------------------------
		- 例：<a href="xxx" class="generalButton_bgColor"><span class="label">XXX</span><span class="btnBg">//背景色など</span></a>
	--------------------------------- */
	.generalButton_bgColor {}
	.generalButton_bgColor .btnBg {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.generalButton_bgColor .label {
		position: relative;
		z-index: 3;
	}

@media print, screen and (min-width: 750px) {
	[class*="generalButton"] {
		/*width: 90%;*/
		/*max-width: 462px;*/
		/*min-height: 70px;*/
		font-size: 1.6rem;
		padding-left: 21px;
		padding-right: 21px;
	}
	/* ---------------------------------
		内側枠線
	--------------------------------- */
	.generalButton_innerBorder .btnBd {
		inset: 7px;
	}
}
@media print, screen and (min-width: 1200px) {
	[class*="generalButton"] {
		font-size: 1.8rem;
	}
}

/* アイコンエリア | シンプルアロー
-------------------------------------------------------
- 例：<a href="xxx" class="generalButton" data-buttonicon="arrow_ku"><span class="label">XXX</span></a>
- 例：<a href="xxx" class="generalButton" data-buttonicon="arrow_tri"><span class="label">XXX</span></a>
---------------------------------------------------- */
	[class*="generalButton"][data-buttonicon*="arrow_ku"] {
		column-gap: 1em;	/* ラベルエリアとアイコンエリアの要素間余白 */
	}
	[class*="generalButton"][data-buttonicon*="arrow_ku"]::before,
	[class*="generalButton"][data-buttonicon*="arrow_ku"]::after {
		display: inline-block;
		height: 1em;	/* 初期値: 1em */
		aspect-ratio: 1;
		scale: 1 1;	/* scale: 1 1; | scale: .8 1; */
		transform: rotate(45deg);
	}
	[class*="generalButton"][data-buttonicon*="arrow_ku"]::before {
		/*justify-self: start;*/
	}
	[class*="generalButton"][data-buttonicon*="arrow_ku"]::after {
		justify-self: end;
		border: 0 solid;
		border-width: 2px 2px 0 0;
	}
	[class*="generalButton"][data-buttonicon="arrow_ku_S"]::before,
	[class*="generalButton"][data-buttonicon="arrow_ku_S"]::after {		height: .5em;}
	[class*="generalButton"][data-buttonicon="arrow_ku_M"]::before,
	[class*="generalButton"][data-buttonicon="arrow_ku_M"]::after {		height: .7em;}
	[class*="generalButton"][data-buttonicon="arrow_ku_L"]::before,
	[class*="generalButton"][data-buttonicon="arrow_ku_L"]::after {		height: 1.4em;}
	[class*="generalButton"][data-buttonicon="arrow_ku_L"]::before {	margin-right: -.4em;}	/* 微調整 */
	[class*="generalButton"][data-buttonicon="arrow_ku_L"]::after {		margin-left: -.4em;}	/* 微調整 */
	
	
	[class*="generalButton"][data-buttonicon*="arrow_tri"] {
		column-gap: 1em;	/* ラベルエリアとアイコンエリアの要素間余白 */
	}
	[class*="generalButton"][data-buttonicon*="arrow_tri"]::before,
	[class*="generalButton"][data-buttonicon*="arrow_tri"]::after {
		display: inline-block;
		height: 0;
		aspect-ratio: 1;
		border-top: 1em solid;	/* 初期値: 1em */
		scale: .47 1;			/* scale: .47 1; | scale: .9 1; */
	}
	[class*="generalButton"][data-buttonicon*="arrow_tri"]::before {
		/*justify-self: start;*/
		border-color: transparent;
	}
	[class*="generalButton"][data-buttonicon*="arrow_tri"]::after {
		justify-self: end;
		clip-path: polygon(0 0, 100% 50%, 0% 100%);
	}
	[class*="generalButton"][data-buttonicon="arrow_tri_S"]::before,
	[class*="generalButton"][data-buttonicon="arrow_tri_S"]::after {	border-top-width: .5em;}
	[class*="generalButton"][data-buttonicon="arrow_tri_M"]::before,
	[class*="generalButton"][data-buttonicon="arrow_tri_M"]::after {	border-top-width: .8em;}
	[class*="generalButton"][data-buttonicon="arrow_tri_L"]::before,
	[class*="generalButton"][data-buttonicon="arrow_tri_L"]::after {	border-top-width: 1.4em;}


/* ico_plus															2025.03
---------------------------------------------------------------------------
- ボタン右端に固定した＋アイコン。
- tk_portal_module.jsの「slideToggleFocus」と連携(.active)。
- カスタムデータ属性（^= と = の違いに注意。^=先頭の値）
- 例：<button type="button" class="js_slideToggleFocusBtn" aria-controls="xxx" data-buttonicon="ico_plus"><span class="label" data-button-text-show="開く" data-button-text-hide="閉じる">開く</span><span class="ico"></span></button>
------------------------------------------------------------------------ */
	[data-buttonicon^="ico_plus"] {
		--tkpCommon-dataButtonIcon-icoPlus_-right:			0px;	/* 右端からの距離（初期値） */
		--tkpCommon-dataButtonIcon-icoPlus_-width:			24px;	/* アイコン幅（初期値） */
		--tkpCommon-dataButtonIcon-icoPlus_-columnGap:		.6em;	/* ラベルエリアとアイコンエリアの要素間余白 */
		--tkpCommon-dataButtonIcon-icoPlus_-padding-adjust:	0px;	/* 微調整 */
	}
	[data-buttonicon^="ico_plus"] .ico {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: auto;
		right: var(--tkpCommon-dataButtonIcon-icoPlus_-right);
		width: var(--tkpCommon-dataButtonIcon-icoPlus_-width);
		aspect-ratio: 1;
		margin: auto;
		/*opacity: .89;*/
	}
	[data-buttonicon^="ico_plus"] .ico::before,
	[data-buttonicon^="ico_plus"] .ico::after {
		content: "";
		display: block;
		position: absolute;
		top: calc(50% - 1px);
		left: 0;
		width: 100%;
		height: 0;
		border-top: 2px solid currentColor;
		transition: all 300ms ease-out;
	}
	[data-buttonicon^="ico_plus"] .ico::before {
		transform: rotate(0deg);
	}
	[data-buttonicon^="ico_plus"] .ico::after {
		transform: rotate(90deg);
	}
	.active[data-buttonicon^="ico_plus"] .ico::before {
		transform: rotate(180deg);
	}
	.active[data-buttonicon^="ico_plus"] .ico::after {
		transform: rotate(360deg);
	}
@media print, screen and (min-width: 750px) {
	[data-buttonicon^="ico_plus"] {
		--tkpCommon-dataButtonIcon-icoPlus_-right:			0px;
		--tkpCommon-dataButtonIcon-icoPlus_-width:			30px;
	}
}
@media print, screen and (min-width: 1200px) {
	[data-buttonicon^="ico_plus"] {
		--tkpCommon-dataButtonIcon-icoPlus_-right:			0px;
		--tkpCommon-dataButtonIcon-icoPlus_-width:			40px;
	}
}


/* M_shinyEffect 													2025.03
---------------------------------------------------------------------------
- 光が走るエフェクト
- 横長コンテンツ専用（横長～正方形まで）（※縦長コンテンツは[padding-top:calc(長辺/短辺*100%);]で個々に設定）
- 親要素に position:relative; 必須。
---------------------------------------------------------------------------
a.generalButton>(span.label{xxx}+span.M_shinyEffect_toRight)
a.generalButton[data-m-shinyeffect="toRight__after"]>(span.label{xxx})
------------------------------------------------------------------------ */
	.M_shinyEffect_toRight {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		background: transparent;
		pointer-events: none;
	}
	[data-m-shinyeffect] {
		position: relative;
		overflow: hidden;
	}
	.M_shinyEffect_toRight::before,
	[data-m-shinyeffect="toRight__before"]::before,
	[data-m-shinyeffect="toRight__after"]::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		height: 0;
		width: 100%;
		padding-top: 100%;
		background: rgb(255 255 255/.7);
		transform: translate(-100%, -100%) rotate(-45deg) scale(1);
		transform-origin: center center;
		animation: 4500ms ease-out infinite ANIME-M_shinyEffect_toRight;
		pointer-events: none;
	}
@keyframes ANIME-M_shinyEffect_toRight {
	0% {		transform: translate(-100%, -100%) rotate(-45deg) scale(1); opacity: 1;}
	15% {		transform: translate(-100%, -100%) rotate(-45deg) scale(4);}
	30%, 100% {	transform: translate(-100%, -100%) rotate(-45deg) scale(4); opacity: 0;}
}

/* M_KEYFRAMES
---------------------------------------------------------------------------
例	{ animation: .7s ease-out both M_fadeIn; }
------------------------------------------------------------------------ */
@keyframes M_fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes M_fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}
@keyframes M_fadeIn_and_scaleGetBigger_and_blur {
	0% {	opacity: 0;	transform: scale(.5); filter: blur(10px);}
	100% {	opacity: 1;	transform: scale(1); filter: blur(0px);}
}


/* ============================================================================
	ShowHide
============================================================================ */

@media print, screen and (min-width: 750px) {
	.onlySP { display: none !important; }
}
/*@media screen and (max-width: 749.98px) {
	.onlySP { display: block; }
}*/
/*@media print, screen and (min-width: 750px) {
	.onlyPCTB { display: block; }
}*/
@media print, screen and (max-width: 749.98px) {
	.onlyPCTB { display: none !important; }
}
/*@media print, screen and (min-width: 750px) and (max-width: 1199.98px) {
	.onlyTB { display: block; }
}*/
@media print, screen and (max-width: 749.98px), screen and (min-width: 1200px) {
	.onlyTB { display: none !important; }
}
/*@media print, screen and (min-width: 1200px) {
	.onlyPC { display: block; }
}*/
@media print, screen and (max-width: 1199.89px) {
	.onlyPC { display: none !important; }
}


/* ============================================================================
	Etc
============================================================================ */
.clearfix::after {content:"";display:block;clear:both;}
.clear{clear:both !important;}
.dispNone{display:none;}
.dispNoneImp{display:none!important;}
.dispInline{display:inline;}
.inbl{display:inline-block;}
.bl{display:block;}
.bltc{display:block;text-align:center;}
.blImp{display:block !important;}
.noWrap{white-space:nowrap;}
.wordBreakAll{word-break:break-all;}
.ttUppercase{text-transform: uppercase;}
.ttLowercase{text-transform: lowercase;}
.ttCapitalize{text-transform: capitalize;}
.tj{text-align:justify !important;} .tj *{display:inline !important;}
.tc{text-align:center !important}
.tl{text-align:left !important}
.tr{text-align:right !important}
.fl{float:left !important}
.fr{float:right !important}
.fn{float:none !important}
/* print */
.pageBreakBefore {page-break-before:always;}
.pageBreakAfter {page-break-after:always;}
.pageBreakInsideAvoid {page-break-inside:avoid !important;}
/* fontSize */
.fszInherit{font-size: inherit;}
.fsz05em{	font-size: .5em;}
.fsz055em{	font-size: .55em;}
.fsz06em{	font-size: .6em;}
.fsz065em{	font-size: .65em;}
.fsz07em{	font-size: .7em;}
.fsz075em{	font-size: .75em;}
.fsz08em{	font-size: .8em;}
.fsz085em{	font-size: .85em;}
.fsz09em{	font-size: .9em;}
.fsz095em{	font-size: .95em;}
.fsz1em{	font-size: 1em;}
.fsz1_1em{	font-size: 1.1em;}
.fsz1_15em{	font-size: 1.15em;}
.fsz1_2em{	font-size: 1.2em;}
.fsz1_25em{	font-size: 1.25em;}
.fsz1_3em{	font-size: 1.3em;}
.fsz1_35em{	font-size: 1.35em;}
.fsz1_4em{	font-size: 1.4em;}
.fsz1_45em{	font-size: 1.45em;}
.fsz1_5em{	font-size: 1.5em;}
.fsz1_55em{	font-size: 1.55em;}
.fsz1_6em{	font-size: 1.6em;}
.fsz1_65em{	font-size: 1.65em;}
.fsz1_7em{	font-size: 1.7em;}
.fsz1_75em{	font-size: 1.75em;}
.fsz1_8em{	font-size: 1.8em;}
.fsz1_85em{	font-size: 1.85em;}
.fsz1_9em{	font-size: 1.9em;}
.fsz1_95em{	font-size: 1.95em;}
.fsz2em{	font-size: 2em;}
.fsz08rem{	font-size: .8rem;}
.fsz085rem{	font-size: .85rem;}
.fsz09rem{	font-size: .9rem;}
.fsz095rem{	font-size: .95rem;}
.fsz1rem{	font-size: 1rem;}
.fsz1_05rem{font-size: 1.05rem;}
.fsz1_1rem{	font-size: 1.1rem;}
.fsz1_15rem{font-size: 1.15rem;}
.fsz1_2rem{	font-size: 1.2rem;}
/* fontWeight */
.fwNormal{	font-weight: normal;}
.fwBold{	font-weight: bold;}
.fw100{	font-weight: 100;}
.fw150{	font-weight: 150;}
.fw200{	font-weight: 200;}
.fw250{	font-weight: 250;}
.fw300{	font-weight: 300;}
.fw350{	font-weight: 350;} .fw360{	font-weight: 360;} .fw370{	font-weight: 370;} .fw380{	font-weight: 380;} .fw390{	font-weight: 390;}
.fw400{	font-weight: 400;} .fw410{	font-weight: 410;} .fw420{	font-weight: 420;} .fw430{	font-weight: 430;} .fw440{	font-weight: 440;}
.fw450{	font-weight: 450;}
.fw500{	font-weight: 500;}
.fw550{	font-weight: 550;}
.fw600{	font-weight: 600;}
.fw650{	font-weight: 650;}
.fw700{	font-weight: 700;}
.fw750{	font-weight: 750;}
.fw800{	font-weight: 800;}
.fw850{	font-weight: 850;}
.fw900{	font-weight: 900;}
/* lineHeight */
.lh_XXL{line-height: 2.5 !important;}
.lh_XL{line-height: 2.25 !important;}
.lh_L{line-height: 2 !important;}
.lh_M{line-height: 1.75 !important;}
.lh_S{line-height: 1.636363 !important;}
.lh_XS{line-height: 1.5 !important;}
.lh_XXS{line-height: 1.35 !important;}
.lh_1_1{line-height: 1.1 !important;}
.lh_1{line-height: 1 !important;}
.lh_09{line-height: .9 !important;}
.lh_08{line-height: .8 !important;}
.lh_07{line-height: .7 !important;}
.lh_06{line-height: .6 !important;}
.lh_05{line-height: .5 !important;}
/* letterSpacing */
.lettsp-007	{letter-spacing: -.07em !important;}
.lettsp-006	{letter-spacing: -.06em !important;}
.lettsp-005	{letter-spacing: -.05em !important;}
.lettsp-004	{letter-spacing: -.04em !important;}
.lettsp-003	{letter-spacing: -.03em !important;}
.lettsp-002	{letter-spacing: -.02em !important;}
.lettsp-001	{letter-spacing: -.01em !important;}
.lettsp0	{letter-spacing: 0 !important;}
.lettsp001	{letter-spacing: .01em !important;}
.lettsp002	{letter-spacing: .02em !important;}
.lettsp003	{letter-spacing: .03em !important;}
.lettsp004	{letter-spacing: .04em !important;}
.lettsp005	{letter-spacing: .05em !important;}
.lettsp006	{letter-spacing: .06em !important;}
.lettsp007	{letter-spacing: .07em !important;}
.lettsp008	{letter-spacing: .08em !important;}
.lettsp009	{letter-spacing: .09em !important;}
.lettsp01	{letter-spacing: .1em !important;}
.lettsp012	{letter-spacing: .12em !important;}
.lettsp015	{letter-spacing: .15em !important;}
.lettsp02	{letter-spacing: .2em !important;}
.lettsp025	{letter-spacing: .25em !important;}
.lettsp03	{letter-spacing: .3em !important;}
/* margin, padding | Legacy */
.mt001em{margin-top: .01em!important}	.mr001em{margin-right: .01em!important}		.mb001em{margin-bottom: .01em!important}	.ml001em{margin-left: .01em!important}			.pt001em{padding-top: .01em!important}	.pr001em{padding-right: .01em!important}	.pb001em{padding-bottom: .01em!important}	.pl001em{padding-left: .01em!important}
.mt002em{margin-top: .02em!important}	.mr002em{margin-right: .02em!important}		.mb002em{margin-bottom: .02em!important}	.ml002em{margin-left: .02em!important}			.pt002em{padding-top: .02em!important}	.pr002em{padding-right: .02em!important}	.pb002em{padding-bottom: .02em!important}	.pl002em{padding-left: .02em!important}
.mt003em{margin-top: .03em!important}	.mr003em{margin-right: .03em!important}		.mb003em{margin-bottom: .03em!important}	.ml003em{margin-left: .03em!important}			.pt003em{padding-top: .03em!important}	.pr003em{padding-right: .03em!important}	.pb003em{padding-bottom: .03em!important}	.pl003em{padding-left: .03em!important}
.mt004em{margin-top: .04em!important}	.mr004em{margin-right: .04em!important}		.mb004em{margin-bottom: .04em!important}	.ml004em{margin-left: .04em!important}			.pt004em{padding-top: .04em!important}	.pr004em{padding-right: .04em!important}	.pb004em{padding-bottom: .04em!important}	.pl004em{padding-left: .04em!important}
.mt005em{margin-top: .05em!important}	.mr005em{margin-right: .05em!important}		.mb005em{margin-bottom: .05em!important}	.ml005em{margin-left: .05em!important}			.pt005em{padding-top: .05em!important}	.pr005em{padding-right: .05em!important}	.pb005em{padding-bottom: .05em!important}	.pl005em{padding-left: .05em!important}
.mt01em	{margin-top: .1em!important}	.mr01em	{margin-right: .1em!important}		.mb01em	{margin-bottom: .1em!important}		.ml01em	{margin-left: .1em!important}			.pt01em	{padding-top: .1em!important}	.pr01em	{padding-right: .1em!important}		.pb01em	{padding-bottom: .1em!important}	.pl01em	{padding-left: .1em!important}
.mt02em	{margin-top: .2em!important}	.mr02em	{margin-right: .2em!important}		.mb02em	{margin-bottom: .2em!important}		.ml02em	{margin-left: .2em!important}			.pt02em	{padding-top: .2em!important}	.pr02em	{padding-right: .2em!important}		.pb02em	{padding-bottom: .2em!important}	.pl02em	{padding-left: .2em!important}
.mt03em	{margin-top: .3em!important}	.mr03em	{margin-right: .3em!important}		.mb03em	{margin-bottom: .3em!important}		.ml03em	{margin-left: .3em!important}			.pt03em	{padding-top: .3em!important}	.pr03em	{padding-right: .3em!important}		.pb03em	{padding-bottom: .3em!important}	.pl03em	{padding-left: .3em!important}
.mt04em	{margin-top: .4em!important}	.mr04em	{margin-right: .4em!important}		.mb04em	{margin-bottom: .4em!important}		.ml04em	{margin-left: .4em!important}			.pt04em	{padding-top: .4em!important}	.pr04em	{padding-right: .4em!important}		.pb04em	{padding-bottom: .4em!important}	.pl04em	{padding-left: .4em!important}
.mt05em	{margin-top: .5em!important}	.mr05em	{margin-right: .5em!important}		.mb05em	{margin-bottom: .5em!important}		.ml05em	{margin-left: .5em!important}			.pt05em	{padding-top: .5em!important}	.pr05em	{padding-right: .5em!important}		.pb05em	{padding-bottom: .5em!important}	.pl05em	{padding-left: .5em!important}
.mt06em	{margin-top: .6em!important}	.mr06em	{margin-right: .6em!important}		.mb06em	{margin-bottom: .6em!important}		.ml06em	{margin-left: .6em!important}			.pt06em	{padding-top: .6em!important}	.pr06em	{padding-right: .6em!important}		.pb06em	{padding-bottom: .6em!important}	.pl06em	{padding-left: .6em!important}
.mt07em	{margin-top: .7em!important}	.mr07em	{margin-right: .7em!important}		.mb07em	{margin-bottom: .7em!important}		.ml07em	{margin-left: .7em!important}			.pt07em	{padding-top: .7em!important}	.pr07em	{padding-right: .7em!important}		.pb07em	{padding-bottom: .7em!important}	.pl07em	{padding-left: .7em!important}
.mt08em	{margin-top: .8em!important}	.mr08em	{margin-right: .8em!important}		.mb08em	{margin-bottom: .8em!important}		.ml08em	{margin-left: .8em!important}			.pt08em	{padding-top: .8em!important}	.pr08em	{padding-right: .8em!important}		.pb08em	{padding-bottom: .8em!important}	.pl08em	{padding-left: .8em!important}
.mt09em	{margin-top: .9em!important}	.mr09em	{margin-right: .9em!important}		.mb09em	{margin-bottom: .9em!important}		.ml09em	{margin-left: .9em!important}			.pt09em	{padding-top: .9em!important}	.pr09em	{padding-right: .9em!important}		.pb09em	{padding-bottom: .9em!important}	.pl09em	{padding-left: .9em!important}
.mt1em	{margin-top: 1em!important}		.mr1em	{margin-right: 1em!important}		.mb1em	{margin-bottom: 1em!important}		.ml1em	{margin-left: 1em!important}			.pt1em	{padding-top: 1em!important}	.pr1em	{padding-right: 1em!important}		.pb1em	{padding-bottom: 1em!important}		.pl1em	{padding-left: 1em!important}
.mt1_5em{margin-top: 1.5em!important}	.mr1_5em{margin-right: 1.5em!important}		.mb1_5em{margin-bottom: 1.5em!important}	.ml1_5em{margin-left: 1.5em!important}			.pt1_5em{padding-top: 1.5em!important}	.pr1_5em{padding-right: 1.5em!important}	.pb1_5em{padding-bottom: 1.5em!important}	.pl1_5em{padding-left: 1.5em!important}
.mt2em	{margin-top: 2em!important}		.mr2em	{margin-right: 2em!important}		.mb2em	{margin-bottom: 2em!important}		.ml2em	{margin-left: 2em!important}			.pt2em	{padding-top: 2em!important}	.pr2em	{padding-right: 2em!important}		.pb2em	{padding-bottom: 2em!important}		.pl2em	{padding-left: 2em!important}
.mt2_5em{margin-top: 2.5em!important}	.mr2_5em{margin-right: 2.5em!important}		.mb2_5em{margin-bottom: 2.5em!important}	.ml2_5em{margin-left: 2.5em!important}			.pt2_5em{padding-top: 2.5em!important}	.pr2_5em{padding-right: 2.5em!important}	.pb2_5em{padding-bottom: 2.5em!important}	.pl2_5em{padding-left: 2.5em!important}
.mt3em	{margin-top: 3em!important}		.mr3em	{margin-right: 3em!important}		.mb3em	{margin-bottom: 3em!important}		.ml3em	{margin-left: 3em!important}			.pt3em	{padding-top: 3em!important}	.pr3em	{padding-right: 3em!important}		.pb3em	{padding-bottom: 3em!important}		.pl3em	{padding-left: 3em!important}
.mt3_5em{margin-top: 3.5em!important}	.mr3_5em{margin-right: 3.5em!important}		.mb3_5em{margin-bottom: 3.5em!important}	.ml3_5em{margin-left: 3.5em!important}			.pt3_5em{padding-top: 3.5em!important}	.pr3_5em{padding-right: 3.5em!important}	.pb3_5em{padding-bottom: 3.5em!important}	.pl3_5em{padding-left: 3.5em!important}
.mt4em	{margin-top: 4em!important}		.mr4em	{margin-right: 4em!important}		.mb4em	{margin-bottom: 4em!important}		.ml4em	{margin-left: 4em!important}			.pt4em	{padding-top: 4em!important}	.pr4em	{padding-right: 4em!important}		.pb4em	{padding-bottom: 4em!important}		.pl4em	{padding-left: 4em!important}
.mt4_5em{margin-top: 4.5em!important}	.mr4_5em{margin-right: 4.5em!important}		.mb4_5em{margin-bottom: 4.5em!important}	.ml4_5em{margin-left: 4.5em!important}			.pt4_5em{padding-top: 4.5em!important}	.pr4_5em{padding-right: 4.5em!important}	.pb4_5em{padding-bottom: 4.5em!important}	.pl4_5em{padding-left: 4.5em!important}
.mt5em	{margin-top: 5em!important}		.mr5em	{margin-right: 5em!important}		.mb5em	{margin-bottom: 5em!important}		.ml5em	{margin-left: 5em!important}			.pt5em	{padding-top: 5em!important}	.pr5em	{padding-right: 5em!important}		.pb5em	{padding-bottom: 5em!important}		.pl5em	{padding-left: 5em!important}
.mt5_5em{margin-top: 5.5em!important}	.mr5_5em{margin-right: 5.5em!important}		.mb5_5em{margin-bottom: 5.5em!important}	.ml5_5em{margin-left: 5.5em!important}			.pt5_5em{padding-top: 5.5em!important}	.pr5_5em{padding-right: 5.5em!important}	.pb5_5em{padding-bottom: 5.5em!important}	.pl5_5em{padding-left: 5.5em!important}
.mt6em	{margin-top: 6em!important}		.mr6em	{margin-right: 6em!important}		.mb6em	{margin-bottom: 6em!important}		.ml6em	{margin-left: 6em!important}			.pt6em	{padding-top: 6em!important}	.pr6em	{padding-right: 6em!important}		.pb6em	{padding-bottom: 6em!important}		.pl6em	{padding-left: 6em!important}
.mt6_5em{margin-top: 6.5em!important}	.mr6_5em{margin-right: 6.5em!important}		.mb6_5em{margin-bottom: 6.5em!important}	.ml6_5em{margin-left: 6.5em!important}			.pt6_5em{padding-top: 6.5em!important}	.pr6_5em{padding-right: 6.5em!important}	.pb6_5em{padding-bottom: 6.5em!important}	.pl6_5em{padding-left: 6.5em!important}
.mt7em	{margin-top: 7em!important}		.mr7em	{margin-right: 7em!important}		.mb7em	{margin-bottom: 7em!important}		.ml7em	{margin-left: 7em!important}			.pt7em	{padding-top: 7em!important}	.pr7em	{padding-right: 7em!important}		.pb7em	{padding-bottom: 7em!important}		.pl7em	{padding-left: 7em!important}
.mt7_5em{margin-top: 7.5em!important}	.mr7_5em{margin-right: 7.5em!important}		.mb7_5em{margin-bottom: 7.5em!important}	.ml7_5em{margin-left: 7.5em!important}			.pt7_5em{padding-top: 7.5em!important}	.pr7_5em{padding-right: 7.5em!important}	.pb7_5em{padding-bottom: 7.5em!important}	.pl7_5em{padding-left: 7.5em!important}
.mt8em	{margin-top: 8em!important}		.mr8em	{margin-right: 8em!important}		.mb8em	{margin-bottom: 8em!important}		.ml8em	{margin-left: 8em!important}			.pt8em	{padding-top: 8em!important}	.pr8em	{padding-right: 8em!important}		.pb8em	{padding-bottom: 8em!important}		.pl8em	{padding-left: 8em!important}
.mt8_5em{margin-top: 8.5em!important}	.mr8_5em{margin-right: 8.5em!important}		.mb8_5em{margin-bottom: 8.5em!important}	.ml8_5em{margin-left: 8.5em!important}			.pt8_5em{padding-top: 8.5em!important}	.pr8_5em{padding-right: 8.5em!important}	.pb8_5em{padding-bottom: 8.5em!important}	.pl8_5em{padding-left: 8.5em!important}
.mt9em	{margin-top: 9em!important}		.mr9em	{margin-right: 9em!important}		.mb9em	{margin-bottom: 9em!important}		.ml9em	{margin-left: 9em!important}			.pt9em	{padding-top: 9em!important}	.pr9em	{padding-right: 9em!important}		.pb9em	{padding-bottom: 9em!important}		.pl9em	{padding-left: 9em!important}
.mt9_5em{margin-top: 9.5em!important}	.mr9_5em{margin-right: 9.5em!important}		.mb9_5em{margin-bottom: 9.5em!important}	.ml9_5em{margin-left: 9.5em!important}			.pt9_5em{padding-top: 9.5em!important}	.pr9_5em{padding-right: 9.5em!important}	.pb9_5em{padding-bottom: 9.5em!important}	.pl9_5em{padding-left: 9.5em!important}
.mt5	{margin-top: 5px!important}		.mr5	{margin-right: 5px!important}		.mb5	{margin-bottom: 5px!important}		.ml5	{margin-left: 5px!important}			.pt5	{padding-top: 5px!important}	.pr5	{padding-right: 5px!important}		.pb5	{padding-bottom: 5px!important}		.pl5	{padding-left: 5px!important}
.mt10	{margin-top: 10px!important}	.mr10	{margin-right: 10px!important}		.mb10	{margin-bottom: 10px!important}		.ml10	{margin-left: 10px!important}			.pt10	{padding-top: 10px!important}	.pr10	{padding-right: 10px!important}		.pb10	{padding-bottom: 10px!important}	.pl10	{padding-left: 10px!important}
.mt15	{margin-top: 15px!important}	.mr15	{margin-right: 15px!important}		.mb15	{margin-bottom: 15px!important}		.ml15	{margin-left: 15px!important}			.pt15	{padding-top: 15px!important}	.pr15	{padding-right: 15px!important}		.pb15	{padding-bottom: 15px!important}	.pl15	{padding-left: 15px!important}
.mt20	{margin-top: 20px!important}	.mr20	{margin-right: 20px!important}		.mb20	{margin-bottom: 20px!important}		.ml20	{margin-left: 20px!important}			.pt20	{padding-top: 20px!important}	.pr20	{padding-right: 20px!important}		.pb20	{padding-bottom: 20px!important}	.pl20	{padding-left: 20px!important}
.mt25	{margin-top: 25px!important}	.mr25	{margin-right: 25px!important}		.mb25	{margin-bottom: 25px!important}		.ml25	{margin-left: 25px!important}			.pt25	{padding-top: 25px!important}	.pr25	{padding-right: 25px!important}		.pb25	{padding-bottom: 25px!important}	.pl25	{padding-left: 25px!important}
.mt30	{margin-top: 30px!important}	.mr30	{margin-right: 30px!important}		.mb30	{margin-bottom: 30px!important}		.ml30	{margin-left: 30px!important}			.pt30	{padding-top: 30px!important}	.pr30	{padding-right: 30px!important}		.pb30	{padding-bottom: 30px!important}	.pl30	{padding-left: 30px!important}
.mt35	{margin-top: 35px!important}	.mr35	{margin-right: 35px!important}		.mb35	{margin-bottom: 35px!important}		.ml35	{margin-left: 35px!important}			.pt35	{padding-top: 35px!important}	.pr35	{padding-right: 35px!important}		.pb35	{padding-bottom: 35px!important}	.pl35	{padding-left: 35px!important}
.mt40	{margin-top: 40px!important}	.mr40	{margin-right: 40px!important}		.mb40	{margin-bottom: 40px!important}		.ml40	{margin-left: 40px!important}			.pt40	{padding-top: 40px!important}	.pr40	{padding-right: 40px!important}		.pb40	{padding-bottom: 40px!important}	.pl40	{padding-left: 40px!important}
.mtAuto	{margin-top: auto!important}	.mrAuto	{margin-right: auto!important}		.mbAuto	{margin-bottom: auto!important}		.mlAuto	{margin-left: auto!important}			.ptAuto	{padding-top: auto!important}	.prAuto	{padding-right: auto!important}		.pbAuto	{padding-bottom: auto!important}	.plAuto	{padding-left: auto!important}
.mt0	{margin-top: 0!important}		.mr0	{margin-right: 0!important}			.mb0	{margin-bottom: 0!important}		.ml0	{margin-left: 0!important}				.pt0	{padding-top: 0!important}		.pr0	{padding-right: 0!important}		.pb0	{padding-bottom: 0!important}		.pl0	{padding-left: 0!important}

/* cliphidden | 構造上は存在するが表示させない要素 */
.cliphidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0; }




/* ***************************************************************************************************
	FRAMEWORK
*************************************************************************************************** */

/* ============================================================================
	OuterWide
-------------------------------------------------------------------------------
	コンテンツ類の初期値設定。
============================================================================ */

	/* ---------------- margin */
	[class*="sizeContentWide"],
	[class*="sizeMaxWidth"] {
		margin-left: auto;
		margin-right: auto;
	}

	/* ---------------- width */
	/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
	.sizeContentWideXL {
		width: var(--site-sizeContentWide-XL);		/* 100% | 100% */
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeContentWideL {
		width: var(--site-sizeContentWide-L);		/* 100% | 94% */
		max-width: var(--site-sizeMaxWidth-L);		/* 1500px */
	}
	.sizeContentWideM {
		width: var(--site-sizeContentWide-M);		/* 88% | 90% */
		max-width: var(--site-sizeMaxWidth-M);		/* 1000px */
	}
	.sizeContentWideS {
		width: var(--site-sizeContentWide-S);		/* 80% | 80% */
		max-width: var(--site-sizeMaxWidth-S);		/* 1000px */
	}
	.sizeMaxWidthXL {
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeMaxWidthL {
		max-width: var(--site-sizeMaxWidth-L);		/* 1500px */
	}
	.sizeMaxWidthM {
		max-width: var(--site-sizeMaxWidth-M);		/* 1000px */
	}
/*	.sizeMaxWidthS {
		max-width: var(--site-sizeMaxWidth-S);
	}*/
	/* 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;
	}










/* ウィンドウサイズ確認表示 */
/*
body::before {content: "[PC]1650より大";display: flex;align-items: center;position: fixed;inset: 0 auto;z-index: 100; color: red;font-size: 2em;font-weight: bold;text-shadow: 0 0 2px #000, 0 0 5px #000, 0 0 10px #000;border-left: 10px solid red;opacity: .5;pointer-events: none; }
@media screen and (min-width: 320px) {	body::before {content: "[SPs]320 以上";border-left: 10px solid blue;color:royalblue;} }
@media screen and (min-width: 360px) {	body::before {content: "[SP]360 以上";border-left: 10px solid green;color:green;} }
@media screen and (min-width: 480px) {	body::before {content: "[SPl]480 以上";border-left: 10px solid mediumpurple;color:purple;} }
@media screen and (min-width: 750px) {	body::before {content: "[TB]750 以上";border-left: 10px solid yellow;color:orange;} }
@media screen and (min-width: 1000px) {	body::before {content: "[TBl]1000 以上";border-left: 10px solid magenta;color:magenta;} }
@media screen and (min-width: 1200px) {	body::before {content: "[PC]1200 以上";border-left: 10px solid cyan;color:cyan;} }
@media screen and (min-width: 1600px) {	body::before {content: "[PCl]1600 以上";border-left: 10px solid cyan;color:royalblue;} }
*/