/* **************************************************

  		　　ヘッダー

************************************************** */
header {
	position:fixed;
	justify-content:space-between;
	width:100%;
	display:flex;
	align-items:center;
	z-index:9999;
}

body#manga header {
	position:relative;
}

/* ********* ロゴ：宮崎県産業資源循環協会 ******** */
header #logo {
	color:#fff;
	font-weight:bold;
	flex-grow:1;
	text-align:left;
	display:block;
	line-height:3rem;
	background-color:var(--color1);


}
header #logo a {
	font-size:1.2em;
	color:#fff;
	text-decoration:none;
	padding:0 1em;
}

/* ********* ハンバーガーアイコン ******** */
.menu_button {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	color:#fff;
	font-weight:bold;
	line-height:3em;
	background-color:var(--color1);
	padding:0 1em;
	border-top:1px solid var(--color1);

}
/* Menu */
.menu_button span.menu_text {
	margin-right:2em;
}

/* 3本線 */
.menu_button span.menu_icon,
.menu_button span.menu_icon:before,
.menu_button span.menu_icon:after {
	content:'';
	display:block;
	height:3px;
	width:1.5em;
	border-radius:3px;
	background-color:#fff;
	position:absolute;
}
.menu_button span.menu_icon:before {
	bottom:8px;
}
.menu_button span.menu_icon:after {
	top:8px;
}

/* チェックボックスの非表示 */
#menu_check {
	display:none;
}

/* メニューを画面外へ隠しておく */
.menu_list {
	width:100%;
	height:100%;
	position:fixed;
	top:-100%;
	left:0%;
	z-index:-1;
	background:rgba(255,255,255,0.93);
	transition:all 0.5s;/*アニメーション設定*/
	color:#000;
}

/* ********* クリックしてメニューを表示中 ******** */

/* 3本線を×に切り替え */
#menu_check:checked ~ .menu_button span.menu_icon {
	background-color:rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu_check:checked ~ .menu_button span.menu_icon::before {
	bottom:0;
	transform:rotate(45deg);
}
#menu_check:checked ~ .menu_button span.menu_icon::after {
	top:0;
	transform:rotate(-45deg);

}
/* 「Menu」の文字を消す */
#menu_check:checked ~ .menu_button span.menu_text {
	visibility:hidden;
}

/* メニューの表示 */
.menu_list ul {
	padding:5em 1em 0;
}
.menu_list ul li {
	list-style:none;
}
.menu_list ul li a {
	display:inline-block;
	box-sizing:border-box;
	text-decoration:none;
	margin:1.5em 1em 0;
	position:relative;
}

/* 隠しておいたメニューを画面内へ */
#menu_check:checked ~ .menu_list {
	top:0%;
}

/* メニューのスタイル */
nav ul {
	font-weight:bold;
	text-align:right;
	margin:0 1em;
}
nav ul li:nth-of-type(1) a {
	color:var(--color1);
}
nav ul li:nth-of-type(2) a {
	color:var(--color1);
}
nav ul li:nth-of-type(3) a {
	color:var(--color8);
}
nav ul li:nth-of-type(4) a {
	color:var(--color7);
}
nav ul li:nth-of-type(5) a {
	color:var(--color5);
}
nav ul li:nth-of-type(6) a {
	color:var(--color6);
}
nav ul li:nth-of-type(7) a {
	color:var(--color7);
}

/* **************************************************

　　　　　　　　　　CSS振り分け

************************************************** */
@media only screen and (min-width: 640px) {

	.menu_button {

	}

}