#navTgl:checked ~ .contents {

	transform: translateX(250px);

}



/* :::::: toggle button :::::: */

#navTgl {

	display: none;

}

label {

	cursor: pointer;

	position: fixed;

	top: 0;

	left: 0;

}

.open {

	z-index: 2;

	width: 48px;

	height: 48px;

	background: #0097F1;

	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.open::before,

.open::after {

	content: "";

}

.open span,

.open::before,

.open::after {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	left: 30%;

	width: 40%;

	border-bottom: 2px solid white;

	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.open::before {

	transform: translateY(-8px);

}

.open::after {

	transform: translateY(8px);

}

.close {

	z-index: 1;

	width: 100%;

	height: 100%;

	pointer-events: none;

	transition: background .6s;

}

#navTgl:checked + .open {

	background: indianRed;

	transform: translateX(250px);

}

#navTgl:checked + .open span {

	transform: scaleX(0);

}

#navTgl:checked + .open::before {

	transform: rotate(45deg);

}

#navTgl:checked + .open::after {

	transform: rotate(-45deg);

}

#navTgl:checked ~ .close {

	pointer-events: auto;

	background: rgba(0,0,0,.3);

}



/* :::::: drawer menu :::::: */

.menu {

	z-index: 999;

	position: fixed;

	overflow: auto;

	top: 0;

	left: 0;

	width: 250px;

	height: 100%;

	margin: 0;

	padding: 10px;

	box-sizing: border-box;

	background: rgba(0,0,0,.6);

	transform: translateX(-100%);

	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.menu h2,

.menu a {

	color: white;

}

.menu h2 {

	text-align: center;

}

.menu ul {

	margin: 0;

	padding: 0;

}

.menu li {

	font-size: .8em;

	line-height: 1.4;

}

.menu li:not(:first-child) {

	border-top: 1px solid rgba(255,255,255,.6);

}

.menu a {

	display: block;

	padding: 1em 2em;

	text-decoration: inherit;

	transition: background .6s;

}

.menu a:hover {

	background: black;

}

#navTgl:checked ~ .menu {

	transform: none;

}



/* :::::: header :::::: */





header {

    box-sizing: border-box;

	text-align: center;

	position: relative;

	margin-bottom: 0px;

    background-color:#FBFDFD;

}





/* :::::: nav :::::: */

header nav {

	max-width: 100%;

	margin: 0 auto;

    

}

header nav ul {

	display: flex;

	width: 100%;

	margin: 0;

	padding: 0;

	font-size: .8em;

	text-align: center;

	white-space: nowrap;

}

header nav li {

	display: flex;

	flex-basis: 20%;

    

}

header nav li:not(:first-child) {

	border-left: 1px solid rgba(0,0,0,.1);

    

}

header nav li a {

	flex-grow: 1;

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 1em;

	color: black;

    font-weight:600;

	text-decoration: inherit;

	background-image: url("../image/navb.png");

    background-size:cover;

	background-position: center;

    height:80px;

    background-repeat: no-repeat;

	transition: background .3s;

    cursor: pointer;

}

header nav li a:hover {

	background: #0097F1;

    color: #fff;

    cursor: pointer;

}



/* :::::: change mechanism :::::: */

@media screen and (min-width: 1051px) {

	.open {

		display: block;

	}

}

@media screen and (max-width: 1050px) {

	header nav {

		display: none;

	}

}