@charset "utf-8";

/* CSS Document */

/* ======================================================
	[drawer]
	@import"../css/test_line.css";
	------------------------------------------------------
	min-width　→　○px以上だと??という設定にする
	max-width　→　○px以下だと??という設定にする
	 ------------------------------------------------------
	[200605]　FFでリンクが効かない
	　『CSSでz-indexが効かない時の4つの原因とその対応方法』
	　マークアップを変更したくない場合・できない場合は、.content要素からpositionを削除することでこの問題を解決できます。
	　https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html
====================================================== */
.Drawer
{
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
}
/*
	z-index: 100;
	position: absolute;
*/

.Drawer .toggle
{
	display: block;
	position: absolute;
	top: 1em;
	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 screen and (min-width: calc(16px * 48)) {
	.Drawer .toggle
		{
	}
	#Header>.Wrap
		{
	}
	#nav-content,  #nav-input:checked ~ #nav-close
		{
	}
}
/* middle */
@media screen and (min-width: calc(16px * 30)) and ( max-width: calc(16px * 48)) {
}
/* small */
@media screen and ( 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-between;
	vertical-align: middle;
	margin: 0;
	padding-top: calc(1em / 6);
	padding-bottom: calc(1em / 6);
	border-width: 0;
	cursor: pointer;
}

.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: calc(100% - (0em * 2));
	height: 2px;
	border-radius: 100em;
	margin-left: 0em;
	margin-right: 0em;
}

.Drawer .toggle
{
}

#nav-input:checked ~ .toggle
{
}

#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-child
{
	transform: rotate(45deg);
	top: calc(0em + (50% - (2px / 2)));
}

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

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

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

/* 今のページ */
.Drawer .Menu .MenuOn
{
}

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

/*
.Drawer .Menu :is(a, .a)
*/
.Drawer .Menu a,
.Drawer .Menu .a
{
	padding-top: 1em;
	padding-bottom: 1em;
}
/*
	line-height: 4em;
*/

.Drawer .Menu a
{
}


.Drawer .Menu>.Wrap
{
	text-align: inherit;
}
/*
	margin-bottom: 2em;
	padding-bottom: 20vh;
	margin-left: 2em;
	margin-right: 2em;
*/

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

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

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

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

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

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

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

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

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



/* 親 */


/* 子 */
.Drawer .Menu .Child
{
}

.Drawer .Menu .Child ul
{
	margin-left: 1.5em;
}

.Drawer .Menu>.Wrap .Child
{
}

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

.Drawer .Menu>.Wrap .Child li:not(:last-child)
{
	border-bottom-style: dashed;
}


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

.Drawer .Menu .Mago ul
{
}

.Drawer .Menu .Mago ul li
{
}

.Drawer .Menu .Mago ul li:first-child
{
	border-top-width: 1px;
	border-top-style: dotted;
}



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

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

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

.Drawer .Menu .ChildOn .Btn:before,
.Drawer .Menu .ChildOn .Btn:after
{
	font-size: 1.5em;
	content: "";
	display: block;
	position: absolute;
	margin-top: calc(((1em / 1.5) * 4) / 3);
	margin-right: calc(((1em / 1.5) * 4) / 3);
	line-height: 0;
}

.Drawer .Menu .ChildOn .Btn:before
{
	top: calc((1em - 1px) / 2);
	right: 0;
	width: 1em;
	height: 0;
	border-top-width: 1px;
}

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

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

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

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

.Drawer .Menu .Change .ChildOn .switch:checked ~ .detail
{
}
/*
	margin: 0;
*/

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

.Drawer .Menu .Change .ChildOn .switch:checked ~ .detail li:last-child
{
}

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

/*
.Drawer .Menu .Change .ChildOn .switch:checked ~ .Btn	{
}
.Drawer .Menu .ChildOn.MenuOn .Change .switch:checked ~ .Btn:before,
.Drawer .Menu .ChildOn.MenuOn .Change .Btn:before	{
}
.Drawer .Menu .ChildOn.MenuOn .Change .switch:checked ~ .Btn:after,
.Drawer .Menu .ChildOn.MenuOn .Change .Btn:after	{
	border-width: 0;
}
.Drawer .Menu .Change .ChildOn .switch:checked ~ .detail,
.Drawer .Menu .ChildOn.MenuOn .Change .detail
{
	margin: 0;
}
.Drawer .Menu .Change .ChildOn .switch:checked ~ .detail li	{
}
.Drawer .Menu .Change .ChildOn .switch:checked ~ .detail li:last-child	{
}
.Drawer .Menu .ChildOn.MenuOn .Change .detail	{
	height: auto;
	opacity: 1;
}
*/





.Drawer .Menu .Icon :is(a, .a)
/*
.Drawer .Menu .Icon a,
.Drawer .Menu .Icon .a
*/
{
}

.Drawer .Menu .Icon :is(a, .a) span
/*
.Drawer .Menu .Icon a span,
.Drawer .Menu .Icon .a span
*/
{
	display: inline-block;
	vertical-align: middle;
}

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

.Drawer .Menu .Icon .Img img
{
}

.Drawer .Menu .Icon .title
{
}

.Drawer .Menu .Ex
{
}

.Drawer .Menu .Ex :is(a, .a)
/*
.Drawer .Menu .Ex a,
.Drawer .Menu .Ex .a
*/
{
	line-height: 1;
}

.Drawer .Menu .Ex .title
{
	line-height: inherit;
}