@charset "utf-8";

.nav-trigger {
	display: none;
}

.nav-sub {
	background-color: #fff;	
}

.nav-sub + .bdr {
	display: none;
}

.sub {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-end;
	align-content: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.to-top {
	display: inline-block;
	height: 30px;
	width: 30px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 5;
/* 	overflow: hidden; */
	text-indent: 100%;
	white-space: nowrap;
	background: url('top.svg') no-repeat center center;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility .3s 0s;
	-moz-transition: opacity .3s 0s, visibility .3s 0s;
	transition: opacity .3s 0s, visibility .3s 0s;
}

.to-top-visible {
	visibility: visible;
	opacity: 0.8;
}


/* ########## mobile ########## */

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

	nav {
		display: none;
	}
	
	.nav-items {
		width: 100%;
/* 		height: 100%; */
		position: fixed;
		top: 50%;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		margin: 0;
		padding: 0;
		font-size: 1.25em;
		list-style-type: none;
	}
	
	.nav-items li {
		width: 180px;
		padding: 0 20px;	
	}
	
	.nav-items a {
		color: #fff;
		text-decoration: none;
		line-height: 1.5;
	}
	
	label[for="nav-trigger"] {
		height: 30px;
		width: 30px;
		position: fixed;
		left: 15px;
		bottom: 15px;
		z-index: 5;
		background: url('nav.svg') no-repeat center center;
		opacity: 0.8;
	}
	
	.nav-trigger + label, #wrapper {
		transition: left 0.2s;
	}
	
	.nav-trigger:checked + label {
		left: 195px;
		background-image: url('nav-close.svg');
	}
	
	.nav-trigger:checked ~ #wrapper {
		left: 180px;
	}
	
	.nav-sub > div {
		width: 100%;
		padding: 10px 0;
	}
	
	.sub {
		-webkit-justify-content: center;
		justify-content: center;
	}
	
	.sub p {
		margin: 0 0.625em;
		font-size: 0.8em;
		line-height: 24px;
	}
	
	.sticky {
		position: fixed;
		top: 0;
		z-index: 3;
		margin: 0;
		background: transparent url('sub-light80.png') center center;
	}
	
	.sticky + section {
/* 		margin-top: 0; */ /* nav */
	}
	
	.sticky + .bdr + article {
		padding-top: 68px;
	}
	
	.to-top {
		bottom: 15px;
		right: 15px;
	}
}


@media screen and (max-device-width: 640px) and (orientation: portrait) {

}


@media screen and (max-device-width: 640px) and (orientation: landscape) {

}


/* ########## tablet ########## */

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	
}

@media screen and (min-device-width : 768px) {
	
	body > .nav-items, .nav-trigger + label {
		display: none;
	}
	
	nav {
		display: none;
		height: 0;
		width: 100%;
		background: #00ff66;
		text-align: center;
	}
	
	nav ul {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		margin: 0;
		padding: 20px 0;
	}
	
	nav li {
		font-size: 1.25em;
		line-height: 30px;
		list-style-type: none;
		margin: 0 0.625em;
	}
	
	nav a {
		color: #fff;
	}
	
	nav a:hover {
		color: skyblue;
		text-decoration: none;
	}
	
	.nav-sub {
		position: fixed;
		z-index: 1;
		top: 0;
		height: 100px;
	}
	
	.nav-sub > div {
		position: absolute;
		bottom: 0;
		min-width: 468px;
		max-width: calc(100% - 280px);
		margin-left: 260px;
		padding: 0 0 20px;
	}
	
	.sub {
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	
	.sub p {
		margin: 0.625em 0 0 1em;
		font-size: 1em;
		line-height: 0.8;
	}
}

/* ########## desktop ########## */


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

}