@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object] link
	@import"../css/test_line.css";
====================================================== */

a
{
	text-decoration-line: none;
	text-underline-offset: 0.5em;
}

a:hover
{
}

.SNS a:hover
{
	text-decoration-line: none;
}

.Banner a:hover
{
	color: inherit;
}

*[id*="anchor"]
{
}


/* ------------------------------------------------------
	<a>　underline
*/
.AnchorLine a
{
	text-decoration-line: underline;
}

.AnchorLine a>span
{
	display: inline;
}


/* ------------------------------------------------------
	文字で「>」
*/
.arrow
{
}

.arrow:after
{
	content: "〉";
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}


/* ------------------------------------------------------
	「▲」
*/
.arrow_triangle,
.select
{
	--arrow_width		: 1em;
}

.arrow_triangle::before,
.select::before
{
	aspect-ratio: var(--arrow_aspect);

	content: "";
	display: block;

	width: var(--arrow_width);

	background-color: rgb(var(--arrow_color));
}

.arrow_triangle::before
{
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.arrow_triangle:is(.arrowL, .arrowR)
{
	--arrow_aspect		: cos(30deg);
}
.arrow_triangle.arrowL::before
{
	clip-path: polygon(
		0 50%,
		100% 100%,
		100% 0
	);
}
.arrow_triangle.arrowR::before
{
	clip-path: polygon(
		0 0,
		0% 100%,
		100% 50%
	)
}
.arrow_triangle:is(.arrowUP, .arrowDown),
.select
{
	--arrow_aspect		: 1/cos(30deg);
}
.arrow_triangle.arrowUP::before
{
	clip-path: polygon(
		50% 0, 0% 100%, 100% 100%
	);
}
.arrow_triangle.arrowDown::before,
.select::before
{
	clip-path: polygon(
		50% 100%,
		100% 0,
		0 0
	);
}


.select
{
	display: grid;
	grid-template-areas:
		"select arrow"
	;
	grid-template-columns: auto 0;
	align-items: center;
}
.select::before
{
	grid-area: arrow;

	position: absolute;
	right: 0.5em;
	top: 50%;
	translate: -0% -50%;
}
.select select
{
	grid-area: select;
}


/* ------------------------------------------------------
	罫線で「>」
*/
.ColorBtn,
.line_arrow,
.Drawer .Menu a,
.PageNavi,
.Btn:is(.Prev, .Next, .minus, .plus, .Back)
{
	--arrow_aspect		: 5 / 9;
	--arrow_weight		: 1px;
	--arrow_width		: 0.4em;
	--arrow_height_rate	: 1.875;
}

.Btn:is(.Prev, .Next, .minus, .plus, .Back)
{
	--arrow_weight		: 2px;
}


.ColorBtn:after,
.Drawer .Menu a:before,
.PageNavi span:not(:last-of-type):after
{
	aspect-ratio: var(--arrow_aspect);
	content: "";
	display: inherit;
	
	width: var(--arrow_width);

	background-color: rgb(var(--arrow_color));
	clip-path: polygon(
		var(--arrow_weight) 0,
		100% 50%,
		var(--arrow_weight) 100%,
		0% 100%,
		calc(100% - var(--arrow_weight)) 50%,
		0 0
	);

	line-height: 0;
	text-decoration-line: none;
}
/*
	height: calc(var(--arrow_width) * var(--arrow_height_rate));
*/

.line_arrow::after,
.Btn:is(.Prev, .Next, .minus, .plus, .Back):after
{
	aspect-ratio: var(--arrow_aspect);

	content: "";
	display: block;

	width: var(--arrow_width);

	background-color: rgb(var(--arrow_color));
	line-height: 0;
	text-decoration-line: none;
}

.line_arrow.arrowL:after,
.Btn:is(.Prev, .Back):after
{
	clip-path: polygon(
		100% 0%,
		var(--arrow_weight) 50%,
		100% 100%,
		calc(100% - var(--arrow_weight)) 100%,
		0% 50%,
		calc(100% - var(--arrow_weight)) 0
	);
}

.line_arrow.arrowR:after,
.Btn:is(.Next):after
{
	clip-path: polygon(
		var(--arrow_weight) 0,
		100% 50%,
		var(--arrow_weight) 100%,
		0% 100%,
		calc(100% - var(--arrow_weight)) 50%,
		0 0
	);
}


.line_arrow
{
	display: inline-grid;
	grid-template-areas:
		"arrow txt"
	;
	justify-content: center;
	align-items: center;
	gap: calc(var(--gap) / 3);
}

.line_arrow>*
{
	grid-area: txt;
}

.line_arrow::after
{
	grid-area: arrow;
}


.line_arrow:is(.arrowL, .arrowR)
{
	--arrow_width		: 0.6em;
}

.line_arrow.arrowL
{
}
.line_arrow.arrowL:after
{
	left: 0;
}

.line_arrow.arrowR
{
	grid-template-areas:
		"txt arrow"
	;
}
.line_arrow.arrowR:after
{
	right: 0;
}

.line_arrow:is(.arrowUP .arrowDown)
{
	--arrow_aspect		: 9 / 5;
}
.line_arrow.arrowUP:after
{
	clip-path: polygon(
		50% 0,
		100% calc(100% - var(--arrow_weight)),
		100% 100%,
		50% var(--arrow_weight),
		0 100%,
		0 calc(100% - var(--arrow_weight))
	);
}
.line_arrow.arrowDown:after
{
	clip-path: polygon(
		50% calc(100% - var(--arrow_weight)),
		100% 0,
		100% var(--arrow_weight),
		50% 100%,
		0% var(--arrow_weight),
		0 0
	);
}


.Btn:is(.Prev, .Back, .Next)
{
	--arrow_aspect		: 5 / 7;
	--arrow_width		: 0.75em;
}

.Btn:is(.Next)::after
{
	margin-left: calc(var(--arrow_weight) / 2);
}
.Btn:is(.Prev, .Back)::after
{
	margin-right: calc(var(--arrow_weight) / 2);
}


/* 丸付きの罫線で「>」を追加する　※文字アリ */
.arrow_circle
{
	--arrow_width		: 1.2em;
	--arrow_color		: var(--bg_color);

	display: grid;
	grid-template-columns: var(--arrow_width) auto;
	justify-content: center;
	align-items: center;
	gap: 0.5em;

}
.arrow_circle::before
{
	aspect-ratio: 1 / 1;

	content: "";
	display: block;

	background-color: rgb(var(--arrow_color));
	width: var(--arrow_width);

	mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-composite: exclude;

	border-radius: 100em;
}
.arrow_circle>*
{
	font-weight: inherit;
}


/* 丸付きの罫線で「>」　※文字は削除 */
.arrow_circle_only
{
	--arrow_width		: 1.2em;
	--arrow_color		: var(--bg_color);

	aspect-ratio: 1 / 1;
	display: block;

	background-color: rgb(var(--arrow_color));
	width: var(--arrow_width);

	mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-composite: exclude;

	border-radius: 100em;
}
.arrow_circle_only>*
{
	aspect-ratio: 1 / 1;

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100%;
	overflow: hidden;
	opacity: 0;
}



/* 「↑」「←」「→」「↓」 */
.arrow_Large
{
	--arrow_size			: 1.5em;
	--arrow_weight			: 1px;
	--arrow_angle			: calc(var(--arrow_size) / 2);

	display: inline-grid;
	grid-template-areas:
		"arrow txt"
	;
	align-items: center;
	gap: 1em;
}
.arrow_Large>*
{
	grid-area: txt;
}
.arrow_Large::after
{
	grid-area: arrow;

	content: "";
	display: inherit;

	aspect-ratio: 1 / 1;
	width: var(--arrow_size);
	height: var(--arrow_size);

	background-color: rgb(var(--bk));
}


/* 「↑」 */
.arrow_Large.arrowUp
{
}
.arrow_Large.arrowUp::after
{
	clip-path: polygon(
		50% 0%,
		100% var(--arrow_angle),
		100% calc(var(--arrow_angle) + var(--arrow_weight)),
		calc(50% + (var(--arrow_weight) / 2)) calc(var(--arrow_weight) * 1.5),
		calc(50% + (var(--arrow_weight) / 2)) 100%,
		calc(50% - (var(--arrow_weight) / 2)) 100%,
		calc(50% - (var(--arrow_weight) / 2)) calc(var(--arrow_weight) * 1.5),
		0 calc(var(--arrow_angle) + var(--arrow_weight)),
		0 var(--arrow_angle)
	);
}

/* 「←」 */
.arrow_Large.arrowL
{
}
.arrow_Large.arrowL::after
{
	clip-path: polygon(
		calc(var(--arrow_angle) + var(--arrow_weight)) 0%,
		calc(var(--arrow_weight) * 1.5) calc(50% + (var(--arrow_weight) / 2)),
		100% calc(50% + (var(--arrow_weight) / 2)),
		100% calc(50% - (var(--arrow_weight) / 2)),
		calc(var(--arrow_weight) * 1.5) calc(50% - (var(--arrow_weight) / 2)),
		calc(var(--arrow_angle) + var(--arrow_weight)) 100%,
		var(--arrow_angle) 100%,
		0% 50%,
		var(--arrow_angle) 0
	);
}

/* 「→」 */
.arrow_Large.arrowR
{
	grid-template-areas:
		"txt arrow"
	;
}
.arrow_Large.arrowR::after
{
	clip-path: polygon(
		calc(100% - (var(--arrow_angle) + var(--arrow_weight))) 0,
		calc(100% - var(--arrow_angle)) 0,
		100% 50%,
		calc(100% - var(--arrow_angle)) 100%,
		calc(100% - (var(--arrow_angle) + var(--arrow_weight))) 100%,
		calc(100% - (var(--arrow_weight) * 1.5)) calc(50% + (var(--arrow_weight) / 2)),
		0 calc(50% + (var(--arrow_weight) / 2)),
		0% calc(50% - (var(--arrow_weight) / 2)),
		calc(100% - (var(--arrow_weight) * 1.5)) calc(50% - (var(--arrow_weight) / 2))
	);

}

/* 「↓」 */
.arrow_Large.arrowDown
{
}
.arrow_Large.arrowDown::after
{
	clip-path: polygon(
		calc(50% - (var(--arrow_weight) / 2)) 0,
		calc(50% + (var(--arrow_weight) / 2)) 0,
		calc(50% + (var(--arrow_weight) / 2)) calc(100% - (var(--arrow_weight) * 1.5)),
		100% calc(100% - (var(--arrow_angle) + var(--arrow_weight))),
		100% calc(100% - var(--arrow_angle)),
		50% 100%,
		0 calc(100% - var(--arrow_angle)),
		0% calc(100% - (var(--arrow_angle) + var(--arrow_weight))),
		calc(50% - (var(--arrow_weight) / 2)) calc(100% - (var(--arrow_weight) * 1.5))
	);
}

/* 「+」「-」 */
.Btn:is(.minus, .plus):after
{
	--arrow_width		: 60%;
	--arrow_height_rate	: 1;

	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

/* 「+」 */
.Btn.plus:after
{
	clip-path: polygon(
		0% calc(50% - (var(--arrow_weight) / 2)),
		calc(50% - (var(--arrow_weight) / 2)) calc(50% - (var(--arrow_weight) / 2)),
		calc(50% - (var(--arrow_weight) / 2)) 0%,
		calc(50% + (var(--arrow_weight) / 2)) 0%,
		calc(50% + (var(--arrow_weight) / 2)) calc(50% - (var(--arrow_weight) / 2)),
		100% calc(50% - (var(--arrow_weight) / 2)),
		100% calc(50% + (var(--arrow_weight) / 2)),
		calc(50% + (var(--arrow_weight) / 2)) calc(50% + (var(--arrow_weight) / 2)),
		calc(50% + (var(--arrow_weight) / 2)) 100%,
		calc(50% - (var(--arrow_weight) / 2)) 100%,
		calc(50% - (var(--arrow_weight) / 2)) calc(50% + (var(--arrow_weight) / 2)),
		0% calc(50% + (var(--arrow_weight) / 2))
	);
}

/* 「-」 */
.Btn.minus:after
{
	clip-path: none;
	height: var(--arrow_weight);
}


/*
	【初心者向け】transformを複数指定したい時は書き順に注意！
	https://qiita.com/7note/items/f0eedc0e33677c2e5758
	複数指定する場合は、順番に注意！！！
*/
.ColorBtn:after,
.Drawer .List a:not([href^="tel"]):before
{
	position: absolute;
	top: 50%;
	right: 1em;
	translate: -0% -50%;
}

.ColorBtn:where(.Back, .BtnBack):after
{
	left: 1em;
	right: initial;
	translate: -0% -50%;
	rotate: -180deg;
}

.anchorBtn .ColorBtn:after
{
	translate: -0% -50%;
}

:is(.Header, .MapNaviBtn) .ColorBtn:after
{
	content: none;
}

.Drawer .List a
{
	--arrow_width	: 0.5em;
}

.Drawer .List a:before
{
	right: 2em;
	background-color: rgb(var(--w));
}


/* ------------------------------------------------------
	ボタン風
*/
.BtnSubmit,
.BtnSubmit input,
.BtnBack,
.BtnOk,
.ColorBtn
{
	min-width: 15em;
}

table :is(.BtnSubmit, .BtnSubmit input, .BtnBack, .BtnOk, .ColorBtn)
{
	min-width: initial;
}


.ColorBtn
{
	--arrow_width		: 1.5em;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0;

	padding: 1em 2em;

	background-color: rgb(var(--btn_bg_color));
	border-width: 1px;

	line-height: 1.5;
	text-align: center;
	text-decoration-line: none;
}
/*
	cursor: pointer;
	display: inline-block;
*/

.ColorBtn,
.ColorBtn:before
{
}
/*
[221026]不要
	border-radius: 0.3em;
*/

.ColorBtn:after
{
	aspect-ratio: 1;
}

.ColorBtn:hover
{
}

input.ColorBtn
{
	border-width: 0;
}

.ColorBtn *
{
	display: inherit;
	font-weight: inherit;
}


/* <table>の中の ColotBtn */
table .ColorBtn:not([class*="Width"])
{
	--arrow_width		: 1.5em;
	
	width: auto;
	min-width: initial;
	height: auto;
	min-height: initial;
	padding-left: 1em;
	padding-right: 1em;
	border-style: solid;

	margin-top: -1em;
	margin-bottom: -1em;
}
table :is(input, button).ColorBtn:not([class*="Width"])
{
}
table .ColorBtn:not([class*="Width"])
{
}


/* colorbtn mini */
.ColorBtn.mini
{
	min-width: initial;
	font-size: 0.7em;
}

.ColorBtn.mini:before
{
}

.ColorBtn.mini:after
{
}


/* ------------------------------------------------------
	<input>風
*/
.BtnDsp
{
	display: inline-block;
	margin: 0 1em;
	padding: 0;
	white-space: nowrap;
	word-break: break-all;
}

.BtnDsp::before
{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;

	width: calc(100% + 1em);
	height: calc(100% + 0.25em);

	border-width: 1px;
	border-radius: calc(var(--border_radius) / 2);
}

/* ------------------------------------------------------
	indexへ戻る
*/
.BackIndex
{
}


/* ------------------------------------------------------
	印刷ボタン
*/
.PrintBtn
{
}


/* ------------------------------------------------------
	<input><button>の装飾を全て外す
*/
.BtnClear,
.BtnClear:before,
.BtnClear:after,
.BtnClear:hover,
:is(input, button).BtnClear,
:is(input, button).BtnClear:before,
:is(input, button).BtnClear:after
:is(input, button).BtnClear:hover
{
	padding: 0;
	background: none;
	border-width: 0;
	font-family: inherit;
	color: inherit;
	font-weight: inherit;
}

/* ------------------------------------------------------
	特定のリンク・共通
*/
a[target],
a[href*=".pdf"],
a[href*=".doc"],
.ex[href^="http"],
.ColorBtn.ex
{
	--href_icon_size			: 1.5em;

	display: inline-grid;
	grid-template-columns: var(--href_icon_size) 1fr;
	align-items: center;
	gap: 0.5em;
}
/*
	display: inline-flex;
	align-items: center;
	gap: (var(--gap) / 3);
*/
/*
a[target],
a[href*=".pdf"],
a[href*=".doc"],
.ex[href^="http"],
.ColorBtn.ex
{
	display: inline-grid;
	grid-template-columns: var(--href_icon_size) 1fr;
	align-items: center;
	gap: 0.5em;
}
	display: inline-flex;
*/

a[target]::before,
a[href*=".pdf"]::before,
a[href*=".doc"]::before,
.ex[href^="http"]::before,
.ColorBtn.ex::before
{
	aspect-ratio: 1 / 1;
	content: "";
	display: block;

	width: 100%;

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

a[target]>.Img::before
{
	content: none !important;
}


/* ------------------------------------------------------
	[特定のリンク]　外部
*/
a[target]
{
}
/*
a[target],
.ex[href^="http"],
.ColorBtn.ex
{
	--href_icon_size			: 1.25em;
}
*/
a[target]::before,
.ex[href^="http"]:before,
.ColorBtn.ex:before
{
	background-image: url(../img/layers.svg);
}


.ColorBtn.ex
{
	padding-right: calc(var(--padding_lr) / 2);
	gap: 0.5em;
}
.ColorBtn.ex:before
{
	width: 1.25em;
}
.ColorBtn.ex:after
{
	content: none;
}


.Banner a[target]
{
	display: block;
}
.Banner a[target]::before
{
	content: none;
}


/* ------------------------------------------------------
	[特定のリンク]　メール
*/
a[target][href^="mail"]
{
}

a[target][href^="mail"].ColorBtn
{
	padding-left: 1em;
	padding-right: 1em;
}


/* ------------------------------------------------------
	[特定のリンク]　pdf
*/
a[target][href*=".pdf"]
{
}
a[target][href*=".pdf"]::before
{
	background-image: url(../img/118432_c.svg);
}


/* ------------------------------------------------------
	[特定のリンク]　ワード書類
*/
a[target][href*=".doc"]
{
}
a[target][href*=".doc"]:before
{
	background-image: url(../img/icon_doc.svg);
}


/* ------------------------------------------------------
	[特定のリンク]　地図
*/
.MapNaviBtn .Btn a:before
{
}


/* ------------------------------------------------------
	[sp]電話番号を発信ボタンにする
*/
@media screen and (max-width:480px) {
	[href^="tel:"]
	{
		display: inline-block;
		padding: 0;
		margin: 0;
		border-width: 0;
		background: transparent;
		color: inherit;
	}

	/* underline */
	[href^="tel:"]:before
	{
		content: "";
		display: block;
		position: absolute;
		top: calc(100% + 0.25em);
		left: 0;
		right: 0;
		width: 100%;
		background-color: transparent !important;
		border-bottom-width: 1px;
		border-bottom-color: rgb(var(--anchor_color) / 0.5);
	}

	.Drawer [href^="tel:"]:before
	{
		border-bottom-color: rgb(var(--w) / 0.5);
	}
}


/* ============================================================================================================
	Banner
------------------------------------------------------------------------------------------------------------ */
.Banner
{
}

.Banner>*
{
	list-style: none;
	margin: 0;
}

.Banner>*>*
{
	margin: 0;
}

.Banner img
{
	display: block;
	margin: auto;
	width: 100%;
}


/* ============================================================================================================
	アイコン
------------------------------------------------------------------------------------------------------------ */
.Icon
{
}

/*
.Icon a
{
	display: inline-flex;
	align-items: center;
	gap: 1em;
	line-height: 1;
}
.Icon .Img
{
	width: 1em;
}

.Icon .Img img
{
}

.Icon.icon_w
{
	color: rgb(var(--w));
}

.Icon.icon_k
{
	color: rgb(var(--k));
}

.sideArea .Icon
{
}
*/


/* ============================================================================================================
	ページナビ
------------------------------------------------------------------------------------------------------------ */
.PageNavi,
.sort_navi
{
}

/* ------------------------------------------------------
	ぱんくず */
.PageNavi
{
	text-align: left;
	line-height: 1;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: rgb(var(--bg_color) / 0.05);
}

.PageNavi>.Wrap
{
}

.PageNavi .main
{
	font-size: 0.8em;
	display: flex;
	align-items: center;
	gap: 1em;
}
/*
	height: 1em;
*/

.PageNavi .main>*
{
	display: flex;
	align-items: center;
	gap: 1em;
}

.PageNavi .main>*:not(:last-child)
{
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.PageNavi .main a
{
	text-decoration-line: underline;
}


.pagetitle .PageNavi
{
}


.scroll_btn .PageNavi
{
}

.scroll_btn .PageNavi>.Wrap
{
	height: 2em;
	overflow: hidden;
	width: calc(100% - 5em);
	margin-left: 0;
}


/* ------------------------------------------------------
	sort */
.sort_navi
{
	--sort_navi_gap					: calc(var(--gap) / 3);
	letter-spacing: 0;
	text-align: center;

	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sort_navi_gap);
}

.Main .sort_navi a
{
	text-decoration-line: none;
}

.sort_navi>*
{
	aspect-ratio: 1 / 1;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 3em;
	border-width: 1px;

	border-radius: 100em;
}

.sort_navi>*>*
{
	line-height: 0;
}

.sort_navi .active
{
}
/*
	border-color: transparent;
*/

.sort_navi .Btn
{
	position: absolute;
	top: 50%;
	translate: -0% -50%;
}
/*

	border-width: 0;
*/

.sort_navi .Btn>*
{
	display: none;
	position: absolute;
	opacity: 0;
}

.sort_navi .Btn.Prev
{
	right: calc(100% + (var(--sort_navi_gap) * 1.5));
}

.sort_navi .Btn.Next
{
	left: calc(100% + (var(--sort_navi_gap) * 1.5));
}


/* ------------------------------------------------------
	並び替え */
.Sort
{
	margin-top: 0.5em;
}

.Sort b,
.Sort a
{
	line-height: inherit;
}

/* 並び替え・表示切り替え */
.SortSwitching
{
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
	line-height: 1;
}

.ViewSwitching a
{
	display: inline-block;
	vertical-align: middle;
}

.ViewSwitching a>span
{
	border-bottom-width: 0;
	text-decoration-line: underline;
}

.ViewSwitchingIcon
{
	display: inline-block;
}


/* ============================================================================================================
	前・次ボタン
------------------------------------------------------------------------------------------------------------ */
.PrevNext
{
}


/* ページ数 */
.PageCount
{
}


/* ============================================================================================================
	navigation btn
	ページ内ジャンプ、子ボタン、
------------------------------------------------------------------------------------------------------------ */
.NaviBtn
{
	--num				: 3;

	display: flex;
	justify-content: center;
	justify-items: center;
	align-content: stretch;
	gap: var(--gap);

	text-align: center;
}

.NaviBtn>*
{
	width: 100%;
}


.NaviBtn>.Item,
.NaviBtn>.Item>*,
.NaviBtn>.Item :is(a, .a)
{
	display: grid;
}

.NaviBtn>.Item
{
	--icon_size			: 4em;
}

.NaviBtn>.Item>.Wrap
{
}

.NaviBtn :is(a, .a):not(.ColorBtn) .Gallery
{
	margin: 0;
}

.NaviBtn :is(a, .a):not(.ColorBtn)
{
	text-decoration-line: none;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--gap) / 3);
	padding: 1em;

	background-color: rgb(var(--w));
	border-width: 1px;
	border-radius: 1em;
}
/*
	display: grid;
*/

.NaviBtn :is(a, .a):not(.ColorBtn) .icon
{
	display: flex;
	justify-content: center;
	justify-items: center;
	gap: 0;
	width: 100%;
}

.NaviBtn :is(a, .a):not(.ColorBtn) .icon .Img
{
	width: 100%;
	height: var(--icon_size);
}


.NaviBtn :is(a, .a):not(.ColorBtn) .icon img
{
	aspect-ratio: 1 / 1;

	width: var(--icon_size);
}


.NaviBtn :is(a, .a):not(.ColorBtn) .title
{
	display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
	gap: calc(var(--gap) / 3);
}

.NaviBtn :is(a, .a):not(.ColorBtn) .title>b
{
	font-size: 1.2em;

	display: inline-grid;
	text-align: justify;

	line-height: 1.5;
}
.NaviBtn :is(a, .a):not(.ColorBtn) .title>b>span:last-of-type
{
	font-size: 0.8em;
}


.NaviBtn.AnchorBtn
{
}

.NaviBtn.AnchorBtn .title>.before
{
	font-size: 0.9em;
}
.NaviBtn.AnchorBtn .title>.before+b
{
	font-size: 1.1em;
	font-weight: bold;
}


/* ============================================================================================================
	SNS
------------------------------------------------------------------------------------------------------------ */
.SNS
{
}

.SNS a
{
	padding: 0;
}

.SNS a[target]
{
	gap: 1em;
}
.SNS a[target]::before
{
	content: none;
}
.SNS .Icon a[target] .Img+[class*="title"]::before
{
	content: none;
}


.SNS a[target].ColorBtn
{
	display: block;
}


.Header .SNS
{
	display: flex;
	gap: 1.5em;
}

.Header .SNS .Img
{
	width: 1.25em;
}

.sideArea .SNS
{
}

.sideArea .SNS .Img
{
	width: 1.5em;
}

.sideArea .SNS .title_set
{
	font-size: 0.8em;
}

.Footer .SNS
{
	display: flex;
	gap: 2em;
	margin-left: auto;
	margin-right: 0;
}

.Footer .SNS .Img
{
	width: 1.5em;
}

.Drawer .SNS
{
	display: flex;
	justify-content: center;
	gap: var(--gap);
}

.Drawer .SNS .Img
{
	width: 1.5em;
}


/* ------------------------------------------------------------------------------------------------------------
	X(旧Twitter) */
.ClassX
{
	color: var(--x_color);
}


/* ------------------------------------------------------------------------------------------------------------
	Facebook */
.ClassFacebook
{
	color: var(--facebook_color);
}

.ClassFacebook .Img:before
{
	background-color: var(--facebook_color);
}


/* いいねボタン */
.SNSBtn
{
}

.ClassFacebook iframe
{
	margin: auto;
}

.ClassFacebook .fb-like
{
}


/* ------------------------------------------------------------------------------------------------------------
	Twitter */
.ClassTwitter
{
	color: var(--twitter_color);
}

/*
.ClassTwitter .Img:before
{
	background-color: var(--twitter_color);
}
*/

/* ------------------------------------------------------------------------------------------------------------
	Instagram */
.ClassInstagram
{
	color: var(--instagram_color);
}

.ClassInstagram .Img:before
{
	background: var(--instagram_gradation);
}


/* ------------------------------------------------------------------------------------------------------------
	QRcode */
.Code
{
}


/* ------------------------------------------------------------------------------------------------------------
	Line */
.ClassLine
{
	color: var(--line_color);
}

.ClassLine .Img:before
{
	background-image: url(../download/LINE_Icon.png);
	background-repeat: no-repeat;
	background-size: contain;
}


/* ------------------------------------------------------------------------------------------------------------
	Line＠ */
.ClassLineat
{
	color: var(--lineat_color);
}

.ClassLineat .Img:before
{
	background-image: url(../download/LINEat_icon_basic_A.png);
	background-repeat: no-repeat;
	background-size: contain;
}


/* ------------------------------------------------------------------------------------------------------------
	Ameblo */
.ClassAmeblo
{
	color: var(--ameblo_color);
}

.ClassAmeblo .title_set
{
	width: 1em;
	height: 1em;
	line-height: 1em;
	border-radius: 100em;
	background-color: var(--ameblo_color);
	vertical-align: middle;
	text-align: center;
	letter-spacing: normal;
	background-color: var(--ameblo_color);
	background-image: url(../download/amebloL.svg);
	background-repeat: no-repeat;
}
/*
	color: #21759b;
	color: rgb(33 117 155);
*/

.ClassAmeblo .Img:before
{
	background-color: var(--ameblo_color);
}


/* ------------------------------------------------------------------------------------------------------------
	楽天 */
.ClassRakuten
{
}

/*
.IconRakuten
{
	background: var(--rakuten_color);
}

.IconRakuten.code_w .Img:before
{
	background-color: var(--rakuten_color);
	background-image: url(../download/rakuten.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
*/


/* ------------------------------------------------------------------------------------------------------------
	Excite */
.IconEx,
.IconExblog
{
}


/* ============================================================================================================
	外部サイト
------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------
	ホットペッパー */
.ClassHotpepper
{
}

.ClassHotpepper.Icon
{
}

.ClassHotpepper.Icon .Img
{
	width: 3em;
}


/* ============================================================================================================
	Word Press
------------------------------------------------------------------------------------------------------------ */


/* ============================================================================================================
	行き来するボタン
------------------------------------------------------------------------------------------------------------ */
.SwitchingBtnSet
{
	text-align: center;
	line-height: 1;
	font-size: 0.8em;
	margin-top: 3em;
	margin-bottom: 3em;
}

.SwitchingBtnSet input,
.SwitchingBtnSet input[type="button"]:not([class])
{
	border-width: 0;
	background: none;
	color: inherit;
	padding: 0;
	line-height: inherit;
	padding-left: 2em;
	padding-right: 2em;
}

.SwitchingBtn
{
	border-width: 1px;
	padding: 0.5em 1em;
	display: inline-block;
	color: inherit;
	background: rgb(var(--w));
	border-radius: 100em;
}

.SwitchingBtn>*
{
	display: inline-block;
	vertical-align: middle;
}

.SwitchingBtnPC
{
}

.SwitchingBtnSP
{
}

#Footer .SwitchingBtnSet .glyph
{
	padding-right: 0;
}

#Footer .SwitchingBtnSet .glyph:before
{
	font-size: 1em;
	line-height: inherit;
	opacity: 1.0;
}


/* ------------------------------------------------------
	hover */
.Hover
{
}

.Hover a
{
}

.Hover a:hover,
.Hover a.ContentNo:hover,
.Hover.slider+.thumbnail .Item:hover
{
	opacity: 0.7;
}

.Hover button
{
}

.Hover button:hover
{
	opacity: 0.7;
}

.Hover .ColorBtn
{
}

.Hover input[class*="Btn"]:hover,
.Hover button[class*="Btn"]:hover
/*.Hover :is(.ColorBtn, .BtnSubmit, .BtnBack, .BtnOk, .BtnUpload):hover*/
{
	opacity: 0.5;
}

/* ------------------------------------------------------
	zoom */
.Zoom
{
}

.Zoom a
{
}

.Zoom a .Img:not(.no_Zoom)
{
	overflow: hidden;
}

.Zoom a:hover .Img:not(.no_Zoom) img
{
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	scale: 1.1;
}


/* ============================================================================================================
	content:; 解除
------------------------------------------------------------------------------------------------------------ */
a.ContentNo,
a.before_del>*
{
	display: block;
	grid-template-columns: none;
}

.ContentNo::before,
a.before_del>*::before
{
	aspect-ratio: 1 !important;
	position: absolute !important;
	width: 0 !important;
	overflow: hidden !important;
}
/*
	content: none !important;
*/
/*
:is(.ContentNo, .ContentNo *):before,
:is(.ContentNo, .ContentNo *):after,
:is(.GlobalMenu, .Drawer, .sideArea, .SNS, .Banner, .Icon, .Download) :where(a, .a)>*:before,
:is(.GlobalMenu, .Drawer, .sideArea, .SNS, .Banner, .Icon, .Download) :where(a, .a)>*:after,
:is(.GlobalMenu, .Drawer, .sideArea, .SNS, .Banner, .Icon, .Download) :where(a, .a):is([target])>*:before,
:is(.GlobalMenu, .Drawer, .sideArea, .SNS, .Banner, .Icon, .Download) :where(a, .a):is([target])>*:after
{
	content: none;
}
*/

.ContentNo,
.Banner a
{
	text-indent: 0;
}


/* ============================================================================================================
	box
------------------------------------------------------------------------------------------------------------ */
.WordPress
{
	zoom: 1;
}

.WordPress:after
{
	content: "";
	display: block;
	clear: both;
}