@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		default.css
 *	Alteration:		2024.11
 *	style info:		サイトデフォルトCSS（モジュール、初期設定）
----------------------------------------------------------------------------------------------------------------
 *	< load >
 *	< COMMON > - Reset - CssCustomProperties - Setting - AddParts - Etc
 *	< @KEYFRAMES >
 *	< FRAMEWORK > - OuterWide - Framework_Elements - Module_Elements
----------------------------------------------------------------------------------------------------------------
 * PCl	= 1650 以下
 * PCm	= 1390 以下
 * PCs	= 1200 以下
 * TB	= 900 以下
 * SP	= 600 以下
 * SPs	= 480 以下
 * SPss	= 359.98 以下
----------------------------------------------------------------------------------------------------------------
@media screen and (max-width: 1650px) {}
@media screen and (max-width: 1390px) {}
@media screen and (max-width: 1200px) {}
@media screen and (min-width: 900.02px) and (max-width: 1200px) {}
@media screen and (max-width: 900px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 359.98px) {}
************************************************************************************************************* */

/* ***************************************************************************************************
	load | @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
 * フォント読込はHTMLにて。
-------------------------------------------------------------------------------
 * [ Noto Sans JP (100..900) ]
 * [ Noto Sans (100..900) ]
 * [ Noto Serif JP (200..900) ]
 * [ Noto Serif (100..900) ]
 * [ Roboto (300,400,500,700) ]
 * [ Cormorant Garamond (400,500,600) ]
 *
 * SOURCE :
 * 		https://fonts.google.com/share?selection.family=Noto+Sans+JP:wght@100..900|Noto+Sans:wght@100..900|Noto+Serif+JP:wght@200..900|Noto+Serif:wght@100..900
 * CODE :
 * 		font-family: "Noto Sans JP", "Noto Sans", sans-serif;
 * 		font-family: "Noto Serif JP", "Noto Serif", serif;
 * 		font-family: "Roboto", sans-serif;
 * 		font-weight: 100..900;
 * 		font-optical-sizing: auto;
 * 		font-style: normal;
 * 		font-variation-settings: "wdth" 100;
 */


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

/* ============================================================================
	Reset 															2024.07
-------------------------------------------------------------------------------
	[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:normal;}
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;}

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


/* ============================================================================
	CssCustomProperties 											2024.11
============================================================================ */
/* SITE
---------------------------------------------------- */
	:root {
		/* フォント */
		--site-font_family-sans: YakuHanJP, "Noto Sans", "Noto Sans JP", 'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
		--site-font_family-serif: "Noto Serif", "Noto Serif JP", 'Hiragino Mincho ProN','Yu Mincho',serif;
		--site-font_family-en_1: "Roboto", Arial, Helvetica, var(--site-font_family-sans);
		--site-font_family-basic: var(--site-font_family-sans);
		--site-font_family-caption: var(--site-font_family-sans);
		
		/* テーマカラー */			/* color: rgb(102 102 102 / .8); */
		--site-themeColor-mainColor:				0 74 142;		/* rgb | #004a8e | Blue */
		--site-themeColor-mainColor_hover:			35 163 216;		/* rgb | #23a3d8 | light Blue */
		--site-themeColor-base:						255 255 255;	/* rgb | #ffffff | White */
		--site-themeColor-base_reverse:				18 19 20;		/* rgb | #121314 | NearlyBlack */
		--site-themeColor-base_secondary:			236 236 236;	/* rgb | #ececec | LightGray */
		--site-themeColor-text:						0 0 0;			/* rgb | #000000 | DarkGray */
		--site-themeColor-text_reverse:				255 255 255;	/* rgb | #ffffff | White */
		--site-themeColor-text_strong:				18 19 20;		/* rgb | #121314 | NearlyBlack */
		--site-themeColor-accent_1:					58 105 255;		/* rgb | #3a69ff | BrightBlue */
		
		/* カラーバリエーション */
		--site-variationColor-blackish:				18 19 20;		/* rgb | #121314 | 黒系 */
		--site-variationColor-whitish:				255 255 255;	/* rgb | #ffffff | 白系 */
		--site-variationColor-grayish:				102 102 102;	/* rgb | #666666 | 灰系 */
		
		/* 幅 */
		--site-sizeContentWide-XL:		100%;
		--site-sizeContentWide-L:		94%;
		--site-sizeContentWide-M:		88%;		/* Mは900以下からSと同じ幅にする */
		--site-sizeContentWide-S:		86.111%;
		--site-sizeMaxWidth-XL:			1920px;
		--site-sizeMaxWidth-L:			1600px;
		--site-sizeMaxWidth-M:			1260px;		/* Mは900以下からSと同じ幅にする */
		--site-sizeMaxWidth-S:			1000px;
		
		/* 余白 */
		--site-marpad-XXXL:				150px;
		--site-marpad-XXL:				150px;		/* 900以下の下げ幅大 */
		--site-marpad-XL:				120px;
		--site-marpad-L:				100px;
		--site-marpad-M:				80px;
		--site-marpad-S:				60px;
		--site-marpad-XS:				40px;
		--site-marpad-XXS:				20px;
		
		/* スティッキー要素の高さ・余白 ※数値は要確認（ざっくり対応ver ※厳密にする場合はJSで） */
		--site-stickyHeader-height:		90px;
		
		/* Text */
		--default-lh-XL: 2.5;
		--default-lh-L: 2;
		--default-lh-M: 1.75;
		--default-lh-S: 1.5;
		--default-lh-XS: 1.35;
		--default-fw-XM: 530;	/* font-weight: var(--default-fw-XM, bold); */
		
		/* default transition Setting */
		--default-transition: 0.3s ease;
	}
@media screen and (max-width: 900px) {
	:root {
		/* 幅 */
		--site-sizeContentWide-M:		86.111%;	/* Mは900以下からSと同じ幅にする */
		--site-sizeMaxWidth-M:			1000px;		/* Mは900以下からSと同じ幅にする */
		
		/* 余白 */
		--site-marpad-XXXL:				120px;
		--site-marpad-XXL:				100px;
		--site-marpad-XL:				100px;
		--site-marpad-L:				80px;
		--site-marpad-M:				60px;
		--site-marpad-S:				40px;
		--site-marpad-XS:				30px;
		--site-marpad-XXS:				20px;
		
		/* スティッキー要素の高さ・余白 ※数値は要確認（ざっくり対応ver ※厳密にする場合はJSで） */
		--site-stickyHeader-height:		60px;
	}
}
@media screen and (max-width: 600px) {
	:root {
		/* 幅 */
		--site-sizeContentWide-L:		90%;
		--site-sizeContentWide-M:		85%;
		--site-sizeContentWide-S:		85%;
		
		/* 余白 */
		--site-marpad-XXXL:				90px;
		--site-marpad-XXL:				70px;
		--site-marpad-XL:				70px;
		--site-marpad-L:				40px;
		--site-marpad-M:				30px;
		--site-marpad-S:				30px;
		--site-marpad-XS:				20px;
		--site-marpad-XXS:				15px;
	}
}

/* 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, -0.64, .46, .94);
		--M-easing-myEaseOutBack_01:	cubic-bezier(.4, .2, .1, 1.5);
	}

/* 文字サイズ可変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
============================================================================ */
/* html */
	html {
		font-size: .625em;
		scrollbar-gutter: stable;											/* モーダル展開時のがたつき対策 */
	}

@media (prefers-reduced-motion: no-preference) {
	html {scroll-behavior: smooth;}											/* スムーススクロール */
}

/* id */
	[id] {scroll-margin-top: var(--site-stickyHeader-height);}				/* アンカーリンクのスティッキー対策 */

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

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

/* form */
:where(.siteWrap) :is(button, input, select, textarea) {
	font: inherit;
}

/* ---------------------------------
	Text Base
--------------------------------- */
	body {
		color: rgb(var(--site-themeColor-text));
		font-family: var(--site-font_family-basic);
		background-color: rgb(var(--site-themeColor-base));
	}
	body,
	.fontSizeReset {
		line-height: var(--default-lh-M, 1.75);
		font-size: 1.6rem;
		/*letter-spacing: .06em;*/
	}
	small, figcaption {
		color: inherit;
		font-family: inherit;
		font-size: inherit;
	}
	.smallText {
		line-height: 1.5;
		color: inherit;
		font-family: var(--site-font_family-caption);
		font-size: max(1.2rem, .75em);
		/*letter-spacing: .04em;*/
	}
@media screen and (max-width: 600px) {
	body,
	.fontSizeReset {
		/*font-size: 1.3rem;*/
	}
	.smallText {
		font-size: max(1rem, .769230em);
	}
}

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

/* Text */
	.txtSizeInherit {	font-size: inherit;}
	.txtSizeLLL {		font-size: 1.5em;}
	.txtSizeLL {		font-size: 1.35em;}
	.txtSizeL {			font-size: 1.15em;}
	.txtSizeS {			font-size: 0.93em;}
	.txtSizeSS {		font-size: 0.85em;}
	.txtSizeSSS {		font-size: 0.65em;}
	.txtSize1rem {		font-size: 1rem;}
	.txtSize09rem {		font-size: .9rem;}

	.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;}

	.bgColor_base {				color: rgb(var(--site-themeColor-text));			background: rgb(var(--site-themeColor-base));}
	.bgColor_base_reverse {		color: rgb(var(--site-themeColor-text_reverse));	background: rgb(var(--site-themeColor-base_reverse));}
	.bgColor_base_secondary {	color: rgb(var(--site-themeColor-text));			background: rgb(var(--site-themeColor-base_secondary));}
	.bgColor_accent_1 {			color: #000;									background: rgb(var(--site-themeColor-accent_1));}
	.bgColor_accent_2 {			color: rgb(var(--site-themeColor-text));		background: rgb(var(--site-themeColor-accent_2));}
	.bgColor_accent_3 {			color: rgb(var(--site-themeColor-text));		background: rgb(var(--site-themeColor-accent_3));}

	.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;}

	.ptHeading sub {bottom:-.1em;margin-right:.1em; font-size:max(.9rem,.55em);}
	.ptHeading sup {top:-.6em;margin-right:.1em; font-size:max(.9rem,.55em);}

/* Small Text */
	small.bltr,
	small.blPCtrSPtl {display:block;text-align:right;margin-top:.35em;}
	.captionWrap {display:block;}
	.captionWrap small {display:inline-block;}
@media screen and (max-width: 600px) {
	small.blPCtrSPtl {text-align:left;}
}

/* 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;
		line-height: 1.5;
		padding: 5px 10px;
	}
	.imgcap.bg, .imgcapkeep.bg {
		padding: 2px 6px;
	}
	.imgcap > span,
	.imgcapkeep > span {
		display: inline-block;
	}
	.imgcapkeep.is_imgcapkeep_bottom_right {inset: auto 0 0 auto;}
	.imgcapkeep.is_imgcapkeep_bottom_left {	inset: auto auto 0 0;}
	.imgcapkeep.is_imgcapkeep_top_right {	inset: 0 0 auto auto;}
	.imgcapkeep.is_imgcapkeep_top_left {	inset: 0 auto auto 0;}
	.imgcap.wh, .imgcapkeep.wh {color:rgb(var(--site-variationColor-whitish));text-shadow:0 0 3px rgb(0 0 0/.3);}
	.imgcap.bk, .imgcapkeep.bk {color:rgb(var(--site-variationColor-blackish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcap.gr, .imgcapkeep.gr {color:rgb(var(--site-variationColor-grayish));text-shadow:0 0 3px rgb(255 255 255/.3);}
	.imgcap .wh, .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);}
	.imgcap .bk, .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);}
	.imgcap .gr, .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);}
	.imgcap.wh.bg, .imgcapkeep.wh.bg {background-color:rgb(0 0 0/.5);text-shadow:none;}
	.imgcap.bk.bg, .imgcapkeep.bk.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
	.imgcap.gr.bg, .imgcapkeep.gr.bg {background-color:rgb(255 255 255/.6);text-shadow:none;}
@media screen and (max-width: 600px) {
	.imgcap {
		position: static;
		padding: .3em .5em 0;
	}
	.imgcap.wh,
	.imgcap.bk,
	.imgcap.gr,
	.imgcap > span {
		display: block;
		color: inherit;
		text-shadow: none!important;
		margin: .3em 0 0;
	}
	.imgcap.wh.bg,
	.imgcap.bk.bg,
	.imgcap.gr.bg {
		background-color: transparent;
	}
}

/* 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;
		line-height: 1.5;
		font-family: var(--site-font_family-caption);
		color: inherit;
		font-size: 1.1rem;
		letter-spacing: .04em;
		white-space: pre;
		padding: 5px 10px;
		opacity: .8; /* 気持ち軽くする(不要なら削除) */
	}
	[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;
	}
	[data-bgcap-parent~="1rem"]::after {
		font-size: 1rem;
	}
	[data-bgcap-parent~="09rem"]::after {
		font-size: .9rem;
	}
	[data-bgcap-parent~="08rem"]::after {
		font-size: .8rem;
	}
@media screen and (max-width: 600px) {
	[data-bgcap-parent]::after {
		font-size: 1.1rem;
	}
	[data-bgcap-parent~="1_2rem"]::after {
		font-size: 1.2rem;
	}
	[data-bgcap-parent~="1rem"]::after {
		font-size: 1rem;
	}
	[data-bgcap-parent~="09rem"]::after {
		font-size: .9rem;
	}
	[data-bgcap-parent~="08rem"]::after {
		font-size: .8rem;
	}
}

/* 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: 900px) {
	.symList-kome span.symItemInnerLineBreakItem_TBSP {width: 100%;}
}
@media screen and (max-width: 600px) {
	.symList-kome span.symItemInnerLineBreakItem_SP {width: 100%;}
}
@media screen and (max-width: 480px) {
	.symList-kome span.symItemInnerLineBreakItem_SPs {width: 100%;}
}

/* ---------------------------------
	Link
--------------------------------- */
	/* ----- tmplリセット ----- */
	:where(.siteWrap) a {
		color: inherit;
		text-decoration: none;
	}
	:where(.siteWrap) 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 .15s 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
-------------------------------------------------------------------------------
	* [data-texticon]
	- arrow_tri
	- arrow_ku
	- popup
	* [data-buttonicon]
	- ico_plus
	* M_shinyEffect
============================================================================ */

/* [data-texticon]													2024.11
---------------------------------------------------------------------------
- テキストの横にアイコンを表示。::before,::afterを使用。
- 例：<a href="xxx" data-texticon="xxxxxxxxxx">XXX</a>
------------------------------------------------------------------------ */

/* テキストアイコン系の共通設定
---------------------------------------------------- */
	[data-texticon]::before,
	[data-texticon]::after {
		display: inline-block;
	}

/* arrow_tri
-------------------------------------------------------
- 三角アイコン。テキスト右横に設置したarrow。
- 例：<a href="xxx" data-texticon="arrow_tri right">XXX</a>
---------------------------------------------------- */
	[data-texticon~="arrow_tri"]::after {
		content: "";
		width: .65em;
		aspect-ratio: 1 / .889;
		vertical-align: middle;
		background-color: currentColor;
		margin-left: .3em;
		margin-right: .3em;
	}
	[data-texticon~="arrow_tri"][data-texticon~="up"]::after {
		clip-path: polygon(0 100%, 50% 0, 100% 100%);
	}
	[data-texticon~="arrow_tri"][data-texticon~="down"]::after {
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
	[data-texticon~="arrow_tri"][data-texticon~="left"]::after {
		clip-path: polygon(0 50%, 100% 0, 100% 100%);
	}
	[data-texticon~="arrow_tri"][data-texticon~="right"]::after {
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}

/* arrow_ku
-------------------------------------------------------
- くの字アイコン。テキスト右横に設置したarrow。
- 例：<a href="xxx" data-texticon="arrow_ku right">XXX</a>
---------------------------------------------------- */
	[data-texticon~="arrow_ku"]::after {
		content: "";
		width: .65em;
		aspect-ratio: 1;
		vertical-align: middle;
		mask: center center / contain no-repeat;
		mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="7.5" height="7.5" viewBox="0 0 7.5 7.5"><polyline points="1.877 .363 5.27 3.759 1.896 7.137" fill="none" stroke="%23000" stroke-miterlimit="10"/></svg>');
		background-color: currentColor;
		margin-left: .25em;
		margin-right: .25em;
	}
	[data-texticon~="arrow_ku"][data-texticon~="up"]::after {
		rotate: -90deg;
	}
	[data-texticon~="arrow_ku"][data-texticon~="down"]::after {
		rotate: 90deg;
	}
	[data-texticon~="arrow_ku"][data-texticon~="left"]::after {
		rotate: 180deg;
	}
	[data-texticon~="arrow_ku"][data-texticon~="right"]::after {}

/* popup
-------------------------------------------------------
- テキスト右横に設置したポップアップアイコン。
- 例：<a href="xxx" data-texticon="popup">XXX</a>
---------------------------------------------------- */
	[data-texticon~="popup"]::after {
		content: "";
		width: 10px;
		aspect-ratio: 1;
		vertical-align: middle;
		mask: center center / contain no-repeat;
		mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polyline points=".5 2 .5 9.5 8 9.5" fill="none" stroke="%23000" stroke-miterlimit="10"/><rect x="2.5" y=".5" width="7" height="7" fill="none" stroke="%23000" stroke-miterlimit="10"/></svg>');
		background-color: currentColor;
		margin-top: -2px;
		margin-left: .25em;
		margin-right: .25em;
	}


/* [data-buttonicon]												2024.11
---------------------------------------------------------------------------
- ボタン右端に固定したアイコン
- 「span.ico」タイプ
- 例：<a href="xxx" data-buttonicon="xxxxxxxxxx">XXX</a>
------------------------------------------------------------------------ */

/* ボタンアイコン系の共通設定
---------------------------------------------------- */
	[data-buttonicon] {}

/* ico_plus
-------------------------------------------------------
- ボタン右端に固定した＋アイコン。
- setting.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"] {
		position: relative;
		padding-left:	50px;
		padding-right:	50px;
	}
	[data-buttonicon^="ico_plus"] .ico {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: auto;
		right: 16px;
		width: 19px;
		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% - .5px);
		left: 0;
		width: 100%;
		height: 0;
		border-top: 1px solid currentColor;
	}
	[data-buttonicon^="ico_plus"] .ico::after {
		transform: rotate(90deg);
		transition: all .3s ease-out;
	}
	.active[data-buttonicon^="ico_plus"] .ico::after {
		transform: scale(.01) rotate(90deg);
	}
@media screen and (max-width: 600px) {
	[data-buttonicon^="ico_plus"] {
		padding-left:	45px;
		padding-right:	45px;
	}
	[data-buttonicon^="ico_plus"] .ico {
		right: 15px;
		width: 15px;
	}
}



/* ============================================================================
	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;}
.tj{text-align:justify !important;text-justify:inter-ideograph !important;/* for IE */}.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}
/* lineHeight */
.lh_XL{line-height: var(--default-lh-XL, 2.5);}
.lh_L{line-height: var(--default-lh-L, 2);}
.lh_M{line-height: var(--default-lh-M, 1.75);}
.lh_S{line-height: var(--default-lh-S, 1.5);}
.lh_XS{line-height: var(--default-lh-XS, 1.35);}
/* letterSpacing */
.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;}
.lettsp01	{letter-spacing: .1em !important;}
.lettsp015	{letter-spacing: .15em !important;}
.lettsp02	{letter-spacing: .2em !important;}
/* margin, padding | Legacy */
.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; }




/* ***************************************************************************************************
	@KEYFRAMES
*************************************************************************************************** */

/* ----------------------------------------------------------------------------
	fade
-------------------------------------------------------------------------------
	例	{ animation: .7s ease-out both M_fadeIn; }
	例	{ animation: 2s cubic-bezier(.25, .46, .45, .94) .3s both M_fadeIn; }
	例	{ animation: 1.1s ease-out 0s infinite alternate both M_fadeIn; }
---------------------------------------------------------------------------- */
@keyframes M_fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes M_fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}




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

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

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

	/* ---------------- width */
	/* OUTER */
	.container {
		width: 100%;
	}
	/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
	.sizeContentWideXL {
		width: var(--site-sizeContentWide-XL);		/* 100% */
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeContentWideL {
		width: var(--site-sizeContentWide-L);		/* 94% */
		max-width: var(--site-sizeMaxWidth-L);		/* 1600px */
	}
	.sizeContentWideM {
		width: var(--site-sizeContentWide-M);		/* 88% */		/* Mは900以下からSと同じ幅にする */
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */	/* Mは900以下からSと同じ幅にする */
	}
	.sizeContentWideS {
		width: var(--site-sizeContentWide-S);		/* 86.111% */
		max-width: var(--site-sizeMaxWidth-S);		/* 1000px */
	}
	.sizeMaxWidthXL {
		max-width: var(--site-sizeMaxWidth-XL);		/* 1920px */
	}
	.sizeMaxWidthL {
		max-width: var(--site-sizeMaxWidth-L);		/* 1600px */
	}
	.sizeMaxWidthM {
		max-width: var(--site-sizeMaxWidth-M);		/* 1260px */	/* Mは900以下からSと同じ幅にする */
	}
	.sizeMaxWidthS {
		max-width: var(--site-sizeMaxWidth-S);		/* 1000px */
	}
	/* stickoutFullbox */ /* 固定幅のボックスをはみ出して、ウィンドウ幅いっぱいに広げる */
	.stickoutFullbox {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
		margin-left:	calc(-50cqw + 50%);
		margin-right:	calc(-50cqw + 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;
	}


/* container
------------------------------------------------------------------------ */
	.container {
		padding: var(--site-marpad-XL) 0;
	}




/* ============================================================================
	Framework_Elements
-------------------------------------------------------------------------------
	見出し
============================================================================ */

/* ptHeading
------------------------------------------------------------------------ */
	:where(.ptHeading) .hTxt,
	[class*="hTxtStyh"] {
		--M-fluidFontSize-max-fontsize: 35;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 700;
		--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;
		/*line-height: 1.63;*/
		color: inherit;
		font-size: var(--M-fluidFontSize-fontSize);
		font-weight: var(--default-fw-XM, bold);
		/*letter-spacing: .09em;*/
	}
	:where(.ptHeading) .hTxt .kana,
	[class*="hTxtStyh"] .kana {
		letter-spacing: -.04em;
		margin-right: .04em;
	}
	/* -- */
	:where(h2.ptHeading) .hTxt,
	.hTxtStyh2 {
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 28;
		/*margin-bottom: calc(15px + .7em);*/
	}
	:where(h3.ptHeading) .hTxt,
	.hTxtStyh3 {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 24;
		/*margin-bottom: calc(15px + .7em);*/
	}
	:where(h4.ptHeading) .hTxt,
	.hTxtStyh4 {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 19.5;
		/*margin-bottom: calc(10px + .7em);*/
	}
	:where(h5.ptHeading) .hTxt,
	.hTxtStyh5 {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 17.5;
		/*margin-bottom: .85em;*/
	}
	:where(h6.ptHeading) .hTxt,
	.hTxtStyh6 {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		/*margin-bottom: .85em;*/
	}
	:where(.ptHeading) .hTxt .subTxt,
	[class*="hTxtStyh"] .subTxt {
		display: inline-block;
		line-height: 1.4;
		font-size: max(1.25rem, .6em);
		font-weight: 700;
		margin-bottom: .4em;
	}
	:where(.ptHeading) .hTxt .enTxt,
	[class*="hTxtStyh"] .enTxt {
		font-family: var(--site-font_family-en_1);
		font-size: max(1.3rem, .625em);
	}
	:where(.ptHeading) .hTxt .hNum,
	[class*="hTxtStyh"] .hNum {
		line-height: 1.15;
		font-family: var(--site-font_family-en_1);
		font-size: max(1.3rem, .625em);
		letter-spacing: normal;
		margin-bottom: .75em;
		padding-bottom: .1em;
		border-bottom: 3px solid;
	}
@media screen and (max-width: 600px) {
	:where(h2.ptHeading) .hTxt,
	.hTxtStyh2 {
		font-size: 2.4rem;
	}
	:where(h3.ptHeading) .hTxt,
	.hTxtStyh3 {
		font-size: 2rem;
	}
	:where(h4.ptHeading) .hTxt,
	.hTxtStyh4 {
		font-size: 1.8rem;
	}
	:where(h5.ptHeading) .hTxt,
	.hTxtStyh5 {
		font-size: 1.7rem;
	}
	:where(h6.ptHeading) .hTxt,
	.hTxtStyh6 {
		font-size: 1.6rem;
	}
	:where(.ptHeading) .hTxt .subTxt,
	[class*="hTxtStyh"] .subTxt {
		font-size: max(1.15rem, .69em);
	}
	:where(.ptHeading) .hTxt .hNum,
	[class*="hTxtStyh"] .hNum,
	:where(.ptHeading) .hTxt .enTxt,
	[class*="hTxtStyh"] .enTxt {
		font-size: max(1.2rem, .75em);
	}
}

/* leadTxtBox
------------------------------------------------------------------------ */
	.leadTxtBox {
		background: rgb(255 255 255 / .6);
		margin-bottom: var(--site-marpad-S);
		padding: var(--site-marpad-XS) var(--site-marpad-S);
	}
	.leadTxtBox.noBg {
		background: transparent;
		padding: 0;
	}
@media screen and (max-width: 480px) {
}




/* ============================================================================
	Module_Elements
============================================================================ */

/* ssssssssssssss
------------------------------------------------------------------------ */





/* ウィンドウサイズ確認表示 */
/*
body::before {content: "[PC]1650より大";display: flex;align-items: center;position: fixed;inset: 0 auto;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 (max-width: 1650px) {	body::before {content: "[PCl]1650 以下";border-left: 10px solid blue;color:royalblue;} }
@media screen and (max-width: 1390px) {	body::before {content: "[PCm]1390 以下";border-left: 10px solid green;color:green;} }
@media screen and (max-width: 1200px) {	body::before {content: "[PCs]1200 以下";border-left: 10px solid mediumpurple;color:purple;} }
@media screen and (max-width: 900px) {	body::before {content: "[TB]900 以下";border-left: 10px solid yellow;color:orange;} }
@media screen and (max-width: 600px) {	body::before {content: "[SP]600 以下";border-left: 10px solid magenta;color:magenta;} }
@media screen and (max-width: 480px) {	body::before {content: "[SPs]480 以下";border-left: 10px solid cyan;color:cyan;} }*/