@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		common.css
 *	Alteration:		2022.06		[Major update]（WidthCheckerForJs等の削除。クラス名変更など）
 *	style info:		全ページ共通のリセット・コモンCSS
----------------------------------------------------------------------------------------------------------------
 *	<load>
 *	<COMMON> - WidthCheckerForJs - Normalize - Reset - CssCustomProperties - Setting - AddParts - Display - etc
 *	<@KEYFRAMES>
----------------------------------------------------------------------------------------------------------------
 * 01	メディアクエリの 1340px よりも上の設定には print をつける。
************************************************************************************************************* */

/* ***************************************************************************************************
	load | @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
 * [ Noto Serif ][ Noto Serif Japanese (300) ][ Cinzel ][ Red Rose ]
 * URL	: https://fonts.google.com/share?selection.family=Cinzel%7CNoto%20Serif%7CNoto%20Serif%20JP:wght@300%7CRed%20Rose:wght@300
 * CODE	:
 *		font-family: 'Cinzel', serif;
 *		font-family: 'Cormorant Garamond;
 *		font-family: 'Noto Serif JP', 'Noto Serif', serif;
 *		font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
 * 		font-weight: 300;
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Noto+Serif&family=Noto+Serif+JP:wght@300&family=Noto+Sans&family=Noto+Sans+JP:wght@300&family=Cormorant+Garamond:wght@500&family=EB+Garamond&display=swap');









/* ----------------------------------------------------------------------------
 * [ Yaku Han JP (MP_Noto) ]
 * URL	: https://yakuhanjp.qranoko.jp
 * CODE	:
 * 		font-family: YakuHanMP_Noto, 'Noto Serif JP', 'Noto Serif', serif;
 */
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanmp-noto.min.css');



@media print, screen and (min-width: 768.2px) { /*{overTB}*/}
@media print, screen and (max-width: 1620px) { /*{PCs}*/}
@media screen and (max-width: 1340px) { /*{TBl}*/}
@media screen and (max-width: 980px) { /*{TBs}*/}
@media screen and (max-width: 768px) { /*{SP}*/}
@media screen and (max-width: 520px) { /*{SPs}*/}
@media screen and (max-width: 320px) { /*{SPss}*/}

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

/* ============================================================================
	[ WidthCheckerForJs ] setting.jsと連携 | ※CSS依存型ウィンドウ幅判別
============================================================================ */
.WidthCheckerForJs {position:absolute;top:0;left:0;z-index:-100;width:0;height:0;} /* blank span */
/* initial value */									.WidthCheckerForJs {z-index:-160;}	/*{PCl}*/
@media print, screen and (max-width: 1620px) {		.WidthCheckerForJs {z-index:-150;}}	/*{PCs}*/
@media screen and (max-width: 1340px) {				.WidthCheckerForJs {z-index:-140;}}	/*{TBl}*/
@media screen and (max-width: 980px) {				.WidthCheckerForJs {z-index:-130;}}	/*{TBs}*/
@media screen and (max-width: 768px) {				.WidthCheckerForJs {z-index:-120;}}	/*{SP}*/
@media screen and (max-width: 520px) {				.WidthCheckerForJs {z-index:-110;}}	/*{SPs}*/
@media screen and (max-width: 320px) {				.WidthCheckerForJs {z-index:-100;}}	/*{SPss}*/

/* ============================================================================
	Normalize (ress v1.1.2 - v1.2.2)
-------------------------------------------------------------------------------
	[ress.css • v1.1.2]
	Author 	: Filipe Linhares
	License	: MIT License(https://opensource.org/licenses/mit-license.php)
	URL		: github.com/filipelinhares/ress
-------------------------------------------------------------------------------
	[2021.10] Adding | deleted the part of the style.
============================================================================ */
html {box-sizing:border-box;/*overflow-y:scroll;*/-webkit-text-size-adjust:100%;}
*, ::before, ::after {background-repeat:no-repeat;box-sizing:inherit;}
::before, ::after {text-decoration:inherit;vertical-align:inherit;}
* {padding:0;margin:0;}
	/*audio:not([controls]) {display:none;height:0;}*/
a {background-color:transparent;-webkit-text-decoration-skip:objects;}
	/*a:active, a:hover {outline-width:0;}*/
/* # ==================== */
input {border-radius:0;}
button,[type="button"],[type="reset"],[type="submit"],[role="button"] {cursor:pointer;}
[disabled] {cursor:default;}
	/*[type="number"] {width:auto;}
	[type="search"] {-webkit-appearance:textfield;}
	[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}*/
textarea {overflow:auto;resize:vertical;}
button,input,optgroup,select,textarea {font:inherit;}
	/*optgroup {font-weight:bold;}*/
button {overflow:visible;}
	/*button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:0;padding:0;}
	button:-moz-focusring,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {outline:1px dotted ButtonText;}
	button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
	button,select {text-transform:none;}
	button,input,select,textarea {background-color:transparent;border-style:none;color:inherit;}
	select {-moz-appearance:none;-webkit-appearance:none;}
	select::-ms-expand {display:none;}
	legend {border:0;color:inherit;display:table;max-width:100%;white-space:normal;}
	::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}*/
/* # ==================== */
img {border-style:none;}
progress {vertical-align:baseline;}
/*svg:not(:root) {overflow:hidden;}*/
audio, canvas, progress, video {display:inline-block;}
/* # ==================== */
::-moz-selection {background-color:#b3d4fc;color:#333;text-shadow:none;}
::selection {background-color:#b3d4fc;color:#333;text-shadow:none;}


/* ============================================================================
	Reset 															2021.10
============================================================================ */
ul, ol {list-style:none;}
/*ul li::before {content: "\200B";}*/ /*for Safari (アクセシビリティの考慮事項)*/
/*table {border-collapse:collapse;border-spacing:0;}*/
h1, h2, h3, h4, h5, h6 {font-weight:inherit;}
b, strong {font-weight:inherit;}
i, em, address {font-style:normal;}
img {vertical-align:bottom;} /*余白対策 */
small, figcaption {font:inherit;}
sub, sup {font-size:63%;line-height:0;position:relative;vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}


/* ============================================================================
	CssCustomProperties 											2021.10
============================================================================ */
/* SITE
---------------------------------------------------- */
	:root {
		/* family */
		/*--site-font_family-sans: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;*/
		--site-font_family-sans:  YakuHanMP_Noto, "Noto Sans JP", "Noto Sans","Helvetica Neue","Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
		--site-font_family-serif: YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en1: "Cinzel", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en2: "Cormorant Garamond", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en3: "EB Garamond", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;

		/* themeColor */
		--site-themeColor-base: #000;
		--site-themeColor-base02: #252b34;
		--site-themeColor-base-text: #fff;
		--site-themeColor-base-inversion: #fff;
		--site-themeColor-base-inversion-text: #333;
/*		--site-themeColor-main: 3, 3, 3;*/				/* rgb | #030303 */
		--site-themeColor-accent_1: 131, 177, 62;		/* rgb | #83b13e */
		--site-themeColor-accent_2: 242, 246, 237;		/* rgb | #f2f6ed */

		/* link */
		--site-moduleLink-color: 147,143,137;			/* rgb | #938f89 */
		--site-moduleLink-color-hover: 164,148,118;	/* rgb | #a49476 */
		--site-moduleLink-color-active: 125,109,85;	/* rgb | #7d6d55 */
		

		/* item_size */
		--site-siteHeaderMinimalContents-width: 350;	/* 単位(px)はつけない!! */
		--site-siteHeaderLogo-tphb-width: 73;			/* 単位(px)はつけない!! */
		--site-siteHeaderLogo-name-width: 226;			/* 単位(px)はつけない!! */

		--site-headerWrap-height: clamp(100px, 7vw, 120px);	/* PC時の高さ */ /* 7vw is feeling */
		--site-header-height: 56px;							/* TB時の高さ */
		--site-actionLink-height: 50px;
		
		--site-siteFooter-inner-width: 94%;
		--site-siteFooter-inner-max-width: 1260px;
		--site-siteFooter-inner-margin: 0 auto;
		--site-siteFooter-mitsubishiFooterBnr-padding: 25px;
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		a[href]:hover,
		a[href]:focus {
			--site-moduleLink-color: var(--site-moduleLink-color-hover);
		}
	}
	/* current */
	.is_current > a[href] {
		--site-moduleLink-color: var(--site-moduleLink-color-active);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	:root {
		--site-siteFooter-inner-width: 90%;
	}
}

/* MODULE
---------------------------------------------------- */
/* 文字サイズ可変CSS
--------------------------------- */
/* /////////////////////////////////
[例]：文字サイズ[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;
		min-height: 0.001vw; // for safari | font-sizeにclamp()使用時必須 //
	font-size: clamp(
		calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
		calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
		calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
	);
}
///////////////////////////////// */
	:root {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 980;
		--M-fluidFontSize-min-viewport: 320;
	}





/* ============================================================================
	Setting
============================================================================ */
/* html */
	html {font-size:0.625em;}	/* ~= 10px | for 'rem' Criteria. */

/* Img */
	img,
	object[data-obj-roleimg*="roleImg"] {
		width:auto;
		max-width:100%;
		height:auto;
	}
	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%;
		backface-visibility: hidden;
		transform: translateZ(0);
	}

/* ---------------------------------
	Text Base
--------------------------------- */
	.siteWrap {
		line-height:1.75;
		font-display: optional;
		font-family: var(--site-font_family-serif);
		font-size:1.4rem;
		letter-spacing:0.0875em;
	}
	.fontSizeReset {
		font-size:1.4rem;
	}
	small, figcaption,
	[data-imgcap="imgcapPseudoAfterParent"]::after {
		color:inherit;
		font-family: var(--site-font_family-sans);
		font-size:1rem;
		letter-spacing:0.03em;
		/*opacity: 0.92;*/ /* 気持ち軽くする(不要なら削除) */
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.siteWrap {
		font-size:1.325rem;
	}
	.fontSizeReset {
		font-size:1.325rem;
	}
	small, figcaption,
	[data-imgcap="imgcapPseudoAfterParent"]::after {
		font-size:0.9rem;
		/*font-size:1.05rem;*/
	}
}


/* Font Family */
	.fontSerif,
	.fontSerifBox * {
		font-family: var(--site-font_family-serif);
	}
	.breadcrumbBox,
	.fontSans,
	.fontSansBox * {
		font-family: var(--site-font_family-sans);
	}
	.fontEnglishSerif {
		font-family: var(--site-font_family-en1);
	}

/* Text */
	.txtReset,
	.txtResetBox * {
		color:inherit;
		font-family: var(--site-font_family-serif);
	}
	.txtSizeInherit {	font-size:inherit;}
	.txtSizeLLL {		font-size:1.5em;}
	.txtSizeLL {		font-size:1.35em;}
	.txtSizeL {			font-size:1.15em;}
	.txtSizeS {			font-size:0.85em;}
	.txtSizeSS {		font-size:0.65em;}
	.txtSizeSSS {		font-size:0.475em;}
	.txtSize1rem {		font-size:1rem;}
	
	.txtColorInherit {color:inherit;}
	.txtColorBk {color:#000 !important;} /*黒系*/
	.txtColorWh {color:#fff !important;} /*白系*/
	.txtColorGr {color:#666 !important;} /*灰系*/
	.txtColor01 {color:#d42a2a !important;} /*明赤系*/
	.txtColor02 {color:#a20909 !important;} /*暗赤系*/
	.txtColor03 {color:#b8995b !important;} /*明茶系*/
	.txtColor04 {color:#9a7d45 !important;} /*茶系*/
	.txtColor05 {color:#91a2ab !important;} /*淡青系*/
	.txtColor06 {color:#5b8295 !important;} /*青系*/
	
	.emphasis {font-weight:bold;}
	
	.EmParentheses {margin-left:-0.5em;margin-right:-0.5em;}
	.EmParenthesesL {margin-left:-0.5em;}
	.EmParenthesesR {margin-right:-0.5em;}
	.EmParenthesesH {margin-left:-0.25em;margin-right:-0.25em;}/* Half */
	.EmParenthesesHL {margin-left:-0.25em;}
	.EmParenthesesHR {margin-right:-0.25em;}

	.heading sub {font-size:0.55em;bottom:-0.1em;margin-right:0.1em;}
	.heading sup {font-size:0.55em;top:-0.6em;margin-right:0.1em;}

/* Small Text */
	small.bl {display:block;line-height:1.4;margin-top:0.35em;}
	small.bltr {display:block;line-height:1.4;margin-top:0.35em;text-align:right;}
	small.bltr.gr {color:#767676;}
	small .punc {margin-right:-0.5em;}/* punctuation mark（約物）｜※inline-block内の文末使用は不可。inline-block自身への使用は可。 */
	
	.mainRoleCaption,
	.captionWrap {display:block;clear:both;line-height:1.7;}
	.mainRoleCaption small,
	.captionWrap small {display:inline-block;letter-spacing:0.02em;}
@media screen and (max-width: 768px) { /*{SP}*/
	small.bl {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,
	[data-imgcap="imgcapPseudoAfterParent"] {
		position:relative;
	}
	.imgcap, .imgcapkeep,
	[data-imgcap="imgcapPseudoAfterParent"]::after {
		display:block;
		position:absolute;
		right:0;
		bottom:0;
		font-size:0.9rem;
		line-height:1.5;
		padding:5px 10px;
	}
	.imgcap > span,
	.imgcapkeep > span {
		display:inline-block;
	}
	.imgcap.wh, .imgcapkeep.wh {color:#ffffff;text-shadow:0 0 3px rgba(0,0,0,0.3);}
	.imgcap.bk, .imgcapkeep.bk {color:#202020;text-shadow:0 0 3px rgba(255,255,255,0.3);}
	.imgcap.gr, .imgcapkeep.gr {color:#767676;text-shadow:0 0 3px rgba(255,255,255,0.3);}
	.imgcap .wh, .imgcapkeep .wh {color:#ffffff;text-shadow:0 0 5px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);}
	.imgcap .bk, .imgcapkeep .bk {color:#202020;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);}
	.imgcap .gr, .imgcapkeep .gr {color:#767676;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);}
	.imgcapkeep.bg.wh {background:rgba(0,0,0,0.5);text-shadow:none;}
	.imgcapkeep.bg.bk {background:rgba(255,255,255,0.6);text-shadow:none;}
	.imgcapkeep.bg.gr {background:rgba(255,255,255,0.6);text-shadow:none;}
@media screen and (max-width: 768px) { /*{SP}*/
	.imgcap {
		position:static;
		padding:0.3em 0.5em 0;
	}
	.imgcap.wh,
	.imgcap.bk,
	.imgcap.gr,
	.imgcap > span {
		display:block;
		color:inherit;
		text-shadow:none!important;
		margin:0.3em 0 0;
	}
}

/* Bgcap | （~=スペース区切り毎の正確な値） */
	[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-sans);*/
		color: inherit;
		font-size: 1.1rem;
		letter-spacing: .04em;
		padding: 5px 10px;
		opacity: .92; /* 気持ち軽くする(不要なら削除) */
	}
	[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:#ffffff;text-shadow:0 0 3px rgba(0,0,0,.3);
	}
	[data-bgcap-parent~="bk"]::after {
		color:#202020;text-shadow:0 0 3px rgba(255,255,255,.3);
	}
	[data-bgcap-parent~="1rem"]::after {
		font-size: 1rem;
	}
@media screen and (max-width: 736px) {
	[data-bgcap-parent]::after {
		font-size: 1.05rem;
	}
	[data-bgcap-parent~="1rem"]::after {
		font-size: 1rem;
	}
}

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

/* ---------------------------------
	Link
--------------------------------- */
	a,
	a .inbl {			/* tmplリセット */
		color:inherit;
		text-decoration:none;
	}
	a.txtLink,
	.txtLink a {		/* 汎用：下線付き */
		text-decoration:underline !important;
	}
	.hoverItem,
	.hover a,
	a.hover {			/* 汎用：hover時_透過フェード */
		opacity:1;
		transition:opacity .18s ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
		a:hover,
		a:focus,
		a:hover .inbl,
		a:focus .inbl {			/* tmplリセット */
			text-decoration:none;
		}
		a.txtLink:hover,
		a.txtLink:focus,
		.txtLink a:hover,
		.txtLink a:focus {		/* 汎用：下線付き */
			text-decoration:none !important;
		}
		.hoverItem:hover,
		.hoverItem:focus,
		.hover a:hover,
		.hover a:focus,
		a.hover:hover,
		a.hover:focus {			/* 汎用：hover時_透過フェード */
			opacity:0.63;
		}
	}


/* ============================================================================
	AddParts
-------------------------------------------------------------------------------
	* generalBtnUnit
	- simpleArrow_tri
	- simpleArrow_cir
	* generalColBox
	* js_swipeMe
============================================================================ */

/* generalBtnUnit
-------------------------------------------------------
- 汎用ボタン
- 例：<a href="xxx" class="generalBtnUnit"><span class="label">XXX</span></a>
---------------------------------------------------- */
	[class*="generalBtnUnit"] {
		display: block;
		position: relative;
		/*z-index: 0;*/								/* for Safari.（border-radius時必須） */
		width: 95%;
		max-width: 500px;
		line-height: 1.3;
		color: #333;
		font-size: 1.1em;
		text-align: center;
		text-decoration: none;
		letter-spacing: .1em;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		padding: calc(13px + .45em) 35px;
		/*box-shadow: 0 2px 12px -3px rgba(0,0,25, .7);*/
	}
	[class*="generalBtnUnit"] .inbl {	text-decoration: inherit;}
	[class*="generalBtnUnit"] .kana {	letter-spacing: -.06em;}
	
	[class*="generalBtnUnit"] .en {
		display: block;
		line-height: 1.1;
		font-family: var(--site-font_family-en_1);
		font-size: 1.125em;
		font-style: italic;
		letter-spacing: .15em;
		margin-bottom: .4em;
	}
	@media (hover: hover) and (pointer: fine) {
		[class*="generalBtnUnit"][href] {
			transition: background .18s ease-out, box-shadow .18s ease-out;
		}
		[class*="generalBtnUnit"][href]:hover,
		[class*="generalBtnUnit"][href]:focus {
			background: rgba(255, 255, 255, .9);
			/*box-shadow: 0 0 4px -1px rgba(0,0,25, .98);*/
		}
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	[class*="generalBtnUnit"] {
		font-size: 1em;
		letter-spacing: .03em;
		padding-top:	calc(11px + .4em);
		padding-bottom:	calc(11px + .4em);
	}
	[class*="generalBtnUnit"] .en {
		letter-spacing: .07em;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	[class*="generalBtnUnit"] {
		padding-left:	28px;
		padding-right:	28px;
	}
}

/* simpleArrow_tri
-------------------------------------------------------
- 三角アイコン。ボタン右端に固定したarrow。
- カスタムデータ属性（^= と = の違いに注意。^=先頭の値）
- 例：<a href="xxx" class="generalBtnUnit" data-buttonicon="simpleArrow_tri01">三角__右向き</a>
- 例：<a href="xxx" class="generalBtnUnit" data-buttonicon="simpleArrow_tri01_b">三角__下向き</a>
---------------------------------------------------- */
	[data-buttonicon^="simpleArrow_tri"]::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: auto;
		right: 18px;
		width: 0;
		height: 0;
		margin: auto;
		border-style: solid;
		border-width: 6px 0 6px 6px;
		border-color: transparent transparent transparent #666;
	}
	[data-buttonicon="simpleArrow_tri01_b"]::after {
		right: 14px;
		border-width: 6px 6px 0 6px;
		border-color: #666 transparent transparent transparent;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	[data-buttonicon^="simpleArrow_tri"]::after {
		right: 15px;
		border-width: 5px 0 5px 5px;
	}
	[data-buttonicon="simpleArrow_tri01_b"]::after {
		right: 12px;
		border-width: 5px 5px 0 5px;
	}
}

/* simpleArrow_cir
-------------------------------------------------------
- 丸背景に[三角]または[くの字]アイコン。ボタン右端に固定したarrow。
- カスタムデータ属性（^= と = の違いに注意。^=先頭の値）
- 例：<a href="xxx" class="generalBtnUnit" data-buttonicon="simpleArrow_cir_tri">丸付き三角__右向き</a>
- 例：<a href="xxx" class="generalBtnUnit" data-buttonicon="simpleArrow_cir_ku">丸付きくの字__右向き</a>
---------------------------------------------------- */
	[data-buttonicon^="simpleArrow_cir"]::before,
	[data-buttonicon^="simpleArrow_cir"]::after {
		content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
	}
	[data-buttonicon^="simpleArrow_cir"]::before {
		left: auto;
		right: 15px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #666;
	}
	[data-buttonicon="simpleArrow_cir_tri"]::after {
		left: auto;
		right: 15px;
		width: 4px;
		height: 4px;
		border: 4px solid transparent;
		border-left: 4px solid #fff;
	}
	[data-buttonicon="simpleArrow_cir_ku"]::after {
		left: auto;
		right: 20px;
		width: 6px;
		height: 6px;
		border: 1px solid #fff;
		border-width: 1px 1px 0 0;
		transform: rotate(45deg);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	[data-buttonicon^="simpleArrow_cir"]::before {
		right: 10px;
	}
	[data-buttonicon="simpleArrow_cir_tri"]::after {
		right: 10px;
	}
	[data-buttonicon="simpleArrow_cir_ku"]::after {
		right: 15px;
	}
}




/* longArrowBtnBox
-------------------------------------------------------
<div class="longArrowBtnBox"><a href="xxxxx.html">
<div class="longArrowBtnUnit"><p>xxxxxxxx</p><p class="longArrow"></p></div>
</a></div>
---------------------------------------------------- */
	.longArrowBtnBox .longArrowBtnUnit {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		align-items: center;
	}
	.longArrowBtnBox .longArrowBtnUnit .longArrow {
		display: block;
		width: 4em; /* feeleng. */
		height: 1px;
		margin-top:0.5em;
		margin-left:0.5em;
		border-bottom: 1px solid #fff;
		transform-origin: left bottom;
	}
	.longArrowBtnBox .longArrowBtnUnit .longArrow::after {
		content: "";
		display: block;
		width: 1.2em;
		margin: auto 0 -1px auto;
		border-bottom: 1px solid #fff;
		transform: rotate(25deg);
		transform-origin: right bottom;
	}
	/*hover*/
	.longArrowBtnBox .longArrowBtnUnit {
		transition: opacity .22s ease-out;
	}
	.longArrowBtnBox:hover .longArrowBtnUnit,
	.longArrowBtnBox:focus .longArrowBtnUnit {
		opacity: 0.6;
	}
	
	.longArrowBtnBox .longArrowBtnUnit .longArrow {
		transition: transform .22s ease-out;
	}
	.longArrowBtnBox:hover .longArrowBtnUnit .longArrow,
	.longArrowBtnBox:focus .longArrowBtnUnit .longArrow {
		transform: scale(1.2);
		opacity: 0.5;
	}



/* generalColBox
-------------------------------------------------------
[Alteration] 2022.06
-------------------------------------------------------
- シンプルver
- 子要素の上左右にマージンを設定。親ボックスで上左右のマージン相殺
- カスタムデータ属性（~=スペース区切り毎の正確な値）
- 各ページ用CSSで、ユニーククラスに対してであればカスタムプロパティの値を変更可
	- × .generalColBox {		--common-generalColBox-margin-t: 15px;}
	- ○ .generalColBox.xxxBox {	--common-generalColBox-margin-t: 15px;}
	- ○ .xxxBox {				--common-generalColBox-margin-t: 15px;}
-------------------------------------------------------
div.generalColBox[data-colbox-size="maxCol3 toCol1_SP"]>(div.xxx{xxx})*3
---------------------------------------------------- */
	.generalColBoxParent {
		overflow: hidden;
	}
	.generalColBox {
		--common-generalColBox-margin-t:	30px;
		--common-generalColBox-margin-lr:	30px;
		display: flex;
		flex-wrap: wrap;
		margin-top:		calc(var(--common-generalColBox-margin-t) * -2);
		margin-left:	calc(var(--common-generalColBox-margin-lr) * -1);
		margin-right:	calc(var(--common-generalColBox-margin-lr) * -1);
	}
	.generalColBox > * {
		margin-top:		calc(var(--common-generalColBox-margin-t) * 2);
		margin-left:	var(--common-generalColBox-margin-lr);
		margin-right:	var(--common-generalColBox-margin-lr);
	}
	[data-colbox-size~="maxCol1"] > * {		width: calc(100% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="maxCol2"] > * {		width: calc(50% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="maxCol3"] > * {		width: calc(33.333% - (var(--common-generalColBox-margin-lr) * 2));}
	
	.generalColBox .picBox,
	.generalColBox .colUnit .pic {
		display: block;
		position: relative;
	}
	.generalColBox .picBox img,
	.generalColBox .colUnit .pic img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.generalColBox .txtBox .ttl,
	.generalColBox .colUnit .ttl {
		display: block;
		line-height: 1.5;
		/*color: rgba(var(--site-themeColor-accent_1), 1);*/
		font-size: 1.28571em;
		margin-top: 20px;
	}
	.generalColBox .txtBox .txt,
	.generalColBox .colUnit .txt {
		display: block;
		line-height: 1.7;
		font-size: 1em;
		/*text-align: justify;*/
		margin-top: 12px;
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	[data-colbox-size~="toCol1_TBl"] > * {	width: calc(100% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol2_TBl"] > * {	width: calc(50% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol3_TBl"] > * {	width: calc(33.333% - (var(--common-generalColBox-margin-lr) * 2));}
}
@media screen and (max-width: 980px) { /*{TBs}*/
	[data-colbox-size~="toCol1_TBs"] > * {	width: calc(100% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol2_TBs"] > * {	width: calc(50% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol3_TBs"] > * {	width: calc(33.333% - (var(--common-generalColBox-margin-lr) * 2));}
}
@media screen and (max-width: 768px) { /*{SP}*/
	[data-colbox-size~="toCol1_SP"] > * {	width: calc(100% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol2_SP"] > * {	width: calc(50% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol3_SP"] > * {	width: calc(33.333% - (var(--common-generalColBox-margin-lr) * 2));}
	
	.generalColBox .txtBox .ttl,
	.generalColBox .colUnit .ttl {
		font-size: 1.175em;
	}
	.generalColBox .txtBox .txt,
	.generalColBox .colUnit .txt {
		line-height: 1.55;
		font-size: .965em;
		margin-top: 10px;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	[data-colbox-size~="toCol1_SPs"] > * {	width: calc(100% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol2_SPs"] > * {	width: calc(50% - (var(--common-generalColBox-margin-lr) * 2));}
	[data-colbox-size~="toCol3_SPs"] > * {	width: calc(33.333% - (var(--common-generalColBox-margin-lr) * 2));}
}


/* js_swipeMe
-------------------------------------------------------
[Alteration] 2022.06
-------------------------------------------------------
- スワイプを促すアイコンを表示させる。
-------------------------------------------------------
- (JS)		setting.jsの「js_swipeMe」と連携
- (HTML)	スクロールしたい要素の親に「(div).js_swipeMe」を指定する。「.js_swipeMe[data-js_swipeme-maxwidth="000"]」でメディアクエリの値も設定可能
- (CSS)		[data-js_swipeme-maxwidth]を設定しない場合は、各ページCSS内の必要なタイミングで設定する（下記参考に。メディアクエリは自由）
-------------------------------------------------------
- 例 (HTML) div.xxx>div.js_swipeMe[data-js_swipeme-maxwidth](>div.yyyPicBox>img)+small
-------------------------------------------------------
// -------------
	スワイプ
-------------- //
@media screen and (max-width: 736px) {
	.xxx .js_swipeMeIcon,
	.xxx .js_swipeMeInnerBoxOverlay { display: block;}
	.xxx .js_swipeMeInnerBox { overflow-x: scroll;}
	.xxx .js_swipeMeInnerBox img {max-width: none; padding: 7px;}
	.xxx .js_swipeMeInnerBoxOverlay,
	.xxx .js_swipeMeInnerBox img {width: 160%;}
}
@media screen and (max-width: 480px) {
	.xxx .js_swipeMeInnerBoxOverlay,
	.xxx .js_swipeMeInnerBox img { width: 180%;}
}
---------------------------------------------------- */
	.js_swipeMe {
		position: relative;
		z-index: 0;
	}
	.js_swipeMeIcon { /* ※各ページCSS内のタイミングで block にする */
		display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
		width: 60px;
		height: 60px;
		margin: auto;
		background: url("../../../imgs/smarthome/ico_swipe_wh.svg") 50% center / contain no-repeat;
		animation: 1.1s ease-in-out .2s infinite alternate both js_swipeMeIcon_motion;
	}
	.js_swipeMeInnerBox {
		display: block;
		position: relative;
		width: 100%;
		-webkit-overflow-scrolling: touch;
	}
	.js_swipeMeInnerBoxOverlay { /* ※各ページCSS内のタイミングで block にする */
		display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0, 0, 0, .35);
	}
	/* [data-js_swipeme-maxwidth]でメディアクエリを設定した場合の初期値 */
	.js_swipeMe_active .js_swipeMeIcon,
	.js_swipeMe_active .js_swipeMeInnerBoxOverlay { display: block;}
	.js_swipeMe_active .js_swipeMeInnerBox { overflow-x: scroll;}
	.js_swipeMe_active .js_swipeMeInnerBox img {max-width: none;}
	.js_swipeMe_active .js_swipeMeInnerBoxOverlay,
	.js_swipeMe_active .js_swipeMeInnerBox img {width: 200%;}
/* =================================
	@KEYFRAMES
================================= */
@keyframes js_swipeMeIcon_motion {
	0% {	transform: translateX(-20px);}
	100% {	transform: translateX(20px);}
}


/* ============================================================================
	Display
============================================================================ */
	.PCTB, .PC, .PCs {							display:inherit;}
	.TBSP, .TB, .TBl, .TBs, .SP, .SPl, .SPs {	display:none;}
@media screen and (max-width: 1340px) { /*{TBl}*/
	.PCTB, .TBSP, .TB, .TBl {					display:inherit;}
	.PC, .PCs, .TBs, .SP, .SPl, .SPs {			display:none;}
}
@media screen and (max-width: 980px) { /*{TBs}*/
	.PCTB, .TBSP, .TB, .TBs {					display:inherit;}
	.PC, .PCs, .TBl, .SP, .SPl, .SPs {			display:none;}
}
@media screen and (max-width: 768px) { /*{SP}*/
	.TBSP, .SP, .SPl {							display:inherit;}
	.PCTB, .PC, .PCs, .TB, .TBl, .TBs, .SPs {	display:none;}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.TBSP, .SP, .SPs {							display:inherit;}
	.PCTB, .PC, .PCs, .TB, .TBl, .TBs, .SPl {	display:none;}
}


/* ============================================================================
	inbl
============================================================================ */
@media print, screen and (min-width: 1340.2px) { /*{overPC}*/
	.PCTB_inbl, .PC_inbl {							display:inline-block !important;}
}
@media screen and (min-width: 768.2px) and (max-width: 1340px) { /*{TB}*/
	.PCTB_inbl, .TBSP_inbl, .TB_inbl {				display:inline-block !important;}
}

@media screen and (max-width: 768px) { /*{SP}*/
	.TBSP_inbl, .SP_inbl {							display:inline-block !important;}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.SPs_inbl {										display:inline-block !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;}
.visibilityHidden{visibility:hidden;}
.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}
/* print */
.pageBreakBefore {page-break-before:always;}
.pageBreakAfter {page-break-after:always;}
.pageBreakInsideAvoid {page-break-inside:avoid !important;}
/* letterSpacing */
.lettsp0	{letter-spacing: 0 !important;}
.lettsp002	{letter-spacing: 0.02em !important;}
.lettsp003	{letter-spacing: 0.03em !important;}
.lettsp005	{letter-spacing: 0.05em !important;}
.lettsp007	{letter-spacing: 0.07em !important;}
.lettsp01	{letter-spacing: 0.1em !important;}
.lettsp015	{letter-spacing: 0.15em !important;}
.lettsp02	{letter-spacing: 0.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__0_1; }
	例	{ animation: 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .3s both M_fadeIn__0_1; }
	例	{ animation: 1.1s ease-out 0s infinite alternate both M_fadeIn__0_1; }
---------------------------------------------------------------------------- */
@keyframes M_fadeIn__0_1 {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes M_fadeIn__1_0 {
	0% {opacity: 1}
	100% {opacity: 0}
}
@keyframes M_fadeInUp__20px {
	0% {opacity: 0; transform: translateY(20px);}
	65% {opacity: 1;}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes M_width__0_100per {
	0% {	width: 0;}
	100% {	width: 100%;}
}
@keyframes M_height__0_100per {
	0% {	height: 0;}
	100% {	height: 100%;}
}