@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* ▼ リセットCSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-style: normal;
text-align: left;
zoom: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
width: 100%;
height: auto;
}
a {
    text-decoration: none;
}
/* ▲ リセットCSS */


html {
    font-size: 17px;
    line-height: 17px;
	color:#fff;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight:100;
}
body {
    background-color: #000;
}


/* ▼ ヘッダー */
header {
	position:fixed;
    display: flex;
	width:100%;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background-color: #000;
	z-index:999;
}
header h1 {
    width: 16%;
    margin-left: 3%;
}

header a {
    color: #fff;
}
header nav {
    width: 80%;    
}
header nav ul {
    display: flex;
    justify-content: right;
    width: 100%;
}
header nav ul li a {
	position:relative;
    display: block;
    padding: 0px 30px;
	font-size:1.2rem;
	font-weight:bold;
    line-height: 80px;
    text-align: center;
}
header nav ul li a::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3px;
}

header nav ul li:last-child a {
    background-color: #f26e6e;
}
header nav ul li a:hover::after {
	background-color:#fff;
	box-shadow:0 -3px 5px #fff;
}
header nav ul li a:hover {
	text-shadow:0 0 5px #fff;
}
#nav_tab {
	display: none;
}
/* ▲ ヘッダー */


#wrap {
	padding-top:80px;
	overflow:hidden;	
}

#content {
    max-width: 1200px;
    margin: 0 auto;
}

#content h2 {
	margin:50px 0 80px;
	text-align:center;
	font-size:2.0rem;
	line-height:2.2rem;
	text-shadow:0 0 8px #fff;
}
#content h2 span {
	font-size:1.6rem;
	line-height:2.0rem;
}


footer {
    height:100px;
    background-color: #000;
}
footer p {
    line-height: 100px;
    color: #fff;
    text-align: center;
}


@media screen and (max-width:720px) {
	header {
		
		
	}
	header h1 {
		width: calc(100vw * 200 / 720);
		margin:3% auto 3%;
	}
	header nav {
		position:fixed;
		right:0;
		top:80px;
		height:100vh;
		width: 0%;    
		background-color:#000;
		transition:all .3s ease;
	}
	header nav ul {
		display:block;
		width: 100%;
	}
	header nav ul li {
		margin-left:100%;
		transition:all .3s ease;
	}	
	#nav_tab:checked+label+nav {
		width:60%;	
	}
	#nav_tab:checked+label+nav ul li:nth-child(1){
		margin-left:0%;	
		transition-delay:.2s;
	}
	#nav_tab:checked+label+nav ul li:nth-child(2){
		margin-left:0%;	
		transition-delay:.4s;
	}
	#nav_tab:checked+label+nav ul li:nth-child(3){
		margin-left:0%;	
		transition-delay:.6s;
	}
	#nav_tab:checked+label+nav ul li:nth-child(4){
		margin-left:0%;	
		transition-delay:.8s;
	}
	
	#nav_btn {
		position: absolute;
		top: 10px;
		right: 30px;
		width: 50px;
		height: 50px;
		z-index: 100;
		cursor: pointer;
	}
	.btn_bar {
		position: absolute;
		top:50%;
		width: 55px;
		height: 5px;
		background-color: #fff;
		transition: .5s;
		margin-top: 17px;
		margin-left:13px;
	}
	.btn_bar:nth-of-type(1){
		top: 0px;
	}
	.btn_bar:nth-of-type(2){
		top: 12px;
	}
	.btn_bar:nth-of-type(3){
		top: 24px;
	}
	#nav_tab:checked+label .btn_bar:nth-of-type(1) {
		top: 10px;
		transform: rotate(45deg);
		
	}
	#nav_tab:checked+label .btn_bar:nth-of-type(2) {
		/*transform: scale(0);*/
		margin-left:100%;
		opacity:0;
	}
	#nav_tab:checked+label .btn_bar:nth-of-type(3) {
		top: 10px;
		transform: rotate(-45deg);
	}
	
	
	#nav_tab {
		z-index:1000;	
	}
	#nav_btm {
		z-index:1000;	
	}
}