@charset "utf-8";

/* CSS Document */

/* ======================================================
	[drawer]
	@import"../css/test_line.css";
	------------------------------------------------------
	○px以上 + 印刷モード	@media print, screen and (min-width : ○px) {}
	○px以上				@media (min-width : ○px) {}
	○px以下				@media (max-width : ○px) {}
	------------------------------------------------------
	 [sp]		     ～  479	
	([tablet]	 480 ～     )
	 [pc]		1025 ～
	 ------------------------------------------------------
	[200605]　FFでリンクが効かない
	　『CSSでz-indexが効かない時の4つの原因とその対応方法』
	　マークアップを変更したくない場合・できない場合は、.content要素からpositionを削除することでこの問題を解決できます。
	　https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html
====================================================== */
/* [pc, tablet, print] */
@media print, screen and (min-width : 480px) {
}

/* [ - sp] */
@media (max-width : calc(480px - 1px)) {
.ModeSP 
{
}
}

/* [print] */
@media print {
}


.Drawer
{
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 600;
}
/*
	z-index: 100;
	position: absolute;
*/

.Drawer .toggle
{
	display: block;
	position: absolute;
	top: 0.5em;
	right: 1em;
	z-index: 9999;
}

.Drawer label.toggle
{
	margin-right: 0;
}

.Drawer label.toggle .ribbon
{
	padding: 0.5em;
}

.Drawer .toggle .Btn
{
	width: 1em;
	height: 1em;
	line-height: 1em;
	display: block;
}
/*
#nav-input:checked ~ #nav-close	{
	top: 0;
}
*/

/* large */
@media (min-width : calc(16px * 48)) {
	.Drawer .toggle
		{
	}
	#Header>.Wrap
		{
	}
	#nav-content,  #nav-input:checked ~ #nav-close
		{
	}
}
/* middle */
@media (min-width : calc(16px * 30)) and ( max-width: calc(16px * 48)) {
}
/* small */
@media ( max-width: calc(16px * 30)) {
	.Drawer .toggle
		{
	}
	.Drawer .toggle .Btn
		{
	}
	#Header>.Wrap
		{
	}
	#nav-content,
	#nav-input:checked ~ #nav-close
		{
	}
}

/* ======================================================
	スライドメニュー
	------------------------------------------------------
	CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
	https://saruwakakun.com/html-css/reference/nav-drawer
	------------------------------------------------------ */
#nav-drawer
{
	position: relative;
}
/*
	position: absolute;
*/

/*チェックボックス等は非表示に*/
.nav-unshown
{
	display: none;
}

/*アイコンのスペース
#nav-open
{
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}
*/
/*ハンバーガーアイコンをCSSだけで表現
#nav-open span,
#nav-open span:before,
#nav-open span:after
{
	content: '';
	display: block;
	position: absolute;
	height: 3px;
	width: 25px;
	background: #555;
	border-radius: 3px;
	cursor: pointer;
}
#nav-open span:before
{
	bottom: -8px;
}
#nav-open span:after
{
	bottom: -16px;
}
*/


#nav-close,
#nav-content
{
	position: fixed;
	left: 0;
	width: 100%;/*							外側に隙間を作る（閉じるカバーを表示）*/
	transition: .5s ease-in-out;/*			滑らかに表示*/
	-webkit-transform: translateX(200%);/*	右に隠しておく*/
	transform: translateX(200%);
}
/*
	height: 100vh;
	top: 0;
*/

/* 閉じる用の薄黒カバー(はじめは隠しておく) */
#nav-close
{
	display: none;
	top: 0;
	height: 100%;
	z-index: 99;
}

#nav-content
{
	height: 100vh;
	padding-bottom: 20vh;
	overflow: auto;
	z-index: 999;
}

/* チェックが入ったら表示 */
#nav-input:checked ~ #nav-close
{
	display: block;
}
/*
	opacity: .5;
*/

#nav-input:checked ~ #nav-close,
#nav-input:checked ~ #nav-content
{
	-webkit-transform: translateX(0%);/*中身を表示（左へスライド）*/
	transform: translateX(0%);/*	box-shadow: 6px 0 25px rgba(0, 0, 0, .15);*/
}

/* ======================================================
	アニメーションメニュー
	------------------------------------------------------
	CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋
	https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
------------------------------------------------------ */
.Drawer .toggle .Btn span,
.Drawer .Menu .ChildOn .Btn:before,
.Drawer .Menu .ChildOn .Btn:after
{
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.Drawer .toggle .Btn
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	vertical-align: middle;
	margin: 0;
	border-width: 0;
	cursor: pointer;
}
/*
	padding-top: calc(1em / 6);
	padding-bottom: calc(1em / 6);
*/

.Drawer .toggle .Btn+b
{
	font-size: 0.8em;
	display: block;
	vertical-align: middle;
	font-weight: inherit;
	line-height: 1;
	letter-spacing: normal;
	margin-top: 0.5em;
}

.Drawer .toggle .Btn:before
{
	content: "";
	display: block;
	position: absolute;
	top: -0.125em;
	left: -0.125em;
	right: -0.125em;
	bottom: -0.125em;
}

.Drawer .toggle .Btn span
{
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 100em;
	margin-left: 0em;
	margin-right: 0em;
}

.Drawer .toggle .Btn span:first-of-type
{
	position: absolute;
	top: calc(50% - 0.3em);
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.Drawer .toggle .Btn span:last-of-type
{
	position: absolute;
	top: calc(50% + 0.3em);
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.Drawer .toggle
{
}

#nav-input:checked ~ .toggle
{
}

#nav-input:checked ~ .toggle .Btn span
{
	opacity: 0;
}

#nav-input:checked ~ .toggle .Btn span:first-of-type
{
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	opacity: 1.0;
}

#nav-input:checked ~ .toggle .Btn span:last-of-type
{
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	opacity: 1.0;
}
/*
#nav-input:checked ~ .toggle .Btn span
{
	width: calc(100% - (0em * 1));
	margin-left: calc(0em / 2);
	margin-right: calc(0em / 2);
}

#nav-input:checked ~ .toggle .Btn span:first-of-type
{
	transform: rotate(45deg);
	top: calc(0em + (50% - (2px / 2)));
}

#nav-input:checked ~ .toggle .Btn span:not(:last-of-type):nth-of-type(2),
#nav-input:checked ~ .toggle .Btn span:not(:last-of-type):nth-of-type(3),
#nav-input:checked ~ .toggle .Btn span:not(:last-of-type):nth-of-type(4)
{
	opacity: 0;
}

#nav-input:checked ~ .toggle .Btn span:last-of-type
{
	transform: rotate(-45deg);
	top: calc(0em - (50% - (2px / 2)));
}
*/

/* ======================================================
	custom
------------------------------------------------------ */
.Drawer .List
{
	text-align: center;
}

.Drawer .List .Menu :where(a, .a, span)
/*
.Drawer .Menu a,
.Drawer .Menu .a,
.Drawer .Menu :where(a, .a) span
*/
{
	display: block;
	color: inherit;
}

.Drawer .List .Menu :where(a, .a)
/*
.Drawer .Menu a,
.Drawer .Menu .a
*/
{
	padding: 1em 4vw;
}
/*
	line-height: 4em;
*/

.Drawer .List :where(a, .a) .title
{
	display: flex;
	justify-content: space-between;
}

.Drawer .List .title br
{
	display: none;
}

.Drawer .List .title .nowrap
{
	white-space: normal;
	display: inline;
}

.Drawer .List a
{
}


.Drawer .List>.Wrap
{
	display: flex;
	flex-direction: column;
	gap: 3em;
	text-align: inherit;
	border-width: 0;
}
/*
	margin-bottom: 2em;
	padding-bottom: 20vh;
	margin-left: 2em;
	margin-right: 2em;
*/

.Drawer .List>.Wrap ul
{
	margin: 0em;
	text-align: inherit;
}

.Drawer .List>.Wrap ul li
{
	display: block;
	margin: 0em;
	text-align: inherit;
}

.Drawer .List>.Wrap ul li:not(:last-of-type)
{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}

.Drawer .List>.Wrap ul li:not(:last-of-type):not(.Icon)
{
}
/*
	border-bottom-width: 1px;
*/

.Drawer .List>.Wrap>ul>li>.Wrap
{
}

.Drawer .List .Flex
{
	text-align: center;
}

.Drawer .List .Flex ul
{
	text-align: inherit;
}
/*
	border-top-width: 1px;
	border-bottom-width: 1px;
*/

.Drawer .List .Flex ul>li
{
	border-width: 0;
}

.Drawer .List .Flex ul>li:not(:last-of-type):not(.Icon)
{
	border-right-width: 1px;
}



/* 親 */


/* 子 */
.Drawer .List .Child
{
	text-align: left;
}
/*
	margin-left: 3em;
	margin-left: 1em;
	margin-bottom: 1em;
*/

.Drawer .List .Child :where(a, .a)
{
	padding: 0;
}

.Drawer .List .Child ul
{
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-left: 3em;
}
/*
	padding: 1em;
*/

.Drawer .List .Child ul>*
{
	width: 100%;
}

.Drawer .List>.Wrap .Child
{
}

.Drawer .List>.Wrap .Child li
{
}

.Drawer .List>.Wrap .Child li:not(:last-of-type)
{
	border-bottom-style: dashed;
}

.Drawer .List .child_MenuOn
{
	font-weight: bold;
}


/* 孫 */
.Drawer .List .Mago
{
	margin-left: 2em;
}

.Drawer .List .Mago ul
{
}

.Drawer .List .Mago ul li
{
}

.Drawer .List .Mago ul li:first-of-type
{
	border-top-width: 1px;
	border-top-style: dotted;
}



/* 開け閉め */
.Drawer .List .ChildOn
{
}

.Drawer .List .ChildOn :where(a, .a)
/*
.Drawer .Menu .ChildOn a,
.Drawer .Menu .ChildOn .a
*/
{
}

.Drawer .List .ChildOn .Btn
{
	position: absolute;
	top: 0;
	right: 0;
	width: 4em;
	height: 4em;
	line-height: 4em;
	margin: 0;
	text-align: right;
	letter-spacing: normal;
	z-index: 5;
}
/*
	width: 50%;
	float: right;
*/

.Drawer .List .ChildOn .Btn:before,
.Drawer .List .ChildOn .Btn:after
{
	font-size: 1.5em;
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	line-height: 0;
	transform: translateX(-50%) translateY(-50%);
}

.Drawer .List .ChildOn .Btn:before
{
	right: 0;
	width: 1em;
	height: 0;
	border-top-width: 1px;
}

.Drawer .List .ChildOn .Btn:after
{
	right: calc((1em - 1px) / 2);
	width: 0;
	height: 1em;
	border-left-width: 1px;
}

.Drawer .List .Change .ChildOn .switch:checked ~ .Btn
{
}

.Drawer .List .Change .ChildOn .switch:checked ~ .Btn:before
{
}

.Drawer .List .Change .ChildOn .switch:checked ~ .Btn:after
{
	top: calc(1em / 2);
	height: 0;
}

.Drawer .List .Change .ChildOn .switch:checked ~ .detail
{
	margin: 0em;
}


.Drawer .List .Change .ChildOn .switch:checked ~ .detail li
{
}

.Drawer .List .Change .ChildOn .switch:checked ~ .detail li:last-of-type
{
}

#nav-input:checked ~ #nav-close
{
	background-color: rgba(34,34,34,0.8);
}


.Drawer .List .Icon .Img
{
	border-radius: 100em;
}