@charset "utf-8";
@import url('reset.css');
@import url('general.css');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

html {
	font-size: 62.5%;
}
body {
	width:100%;
	font-size: 10px;
	font-size: 1.0rem;
	line-height: 1.8;
	color:#222;
	font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "游ゴシック Medium", "YuGothic", "YuGothicM", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
	-webkit-text-size-adjust:100%;
	overflow:hidden;
}

p {
	font-size:180%;
}
img {
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
}
ul {
	list-style-type:none;
}
strong {
	font-weight:bold;
}

button {
	cursor:pointer;
	background-color:#fff;
	padding:1% 2% !important;
}

.sp {
	display:none;
}

.material-icons {
	vertical-align:middle;
}

/*nav*/
.navWrapper {
	width:100%;
	background-color:#fff;
	box-shadow:0 5px 0px #f3f3f3;
	padding:10px 0;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
}
.navWrapper > a:first-child {
	position:absolute;
	top:30px;
	left:30px;
}

.wrapper {
	background-color:#c5d9f1;
}
.container {
	max-width:1200px;
	padding:5% 0;
	margin:0 auto;
}


h2,h3 {
	font-size:340%;
	font-weight:600;
	line-height:1.3;
}
.green {
	color:#2bb7b3;
}
.large {
	font-size:167%;
}
.small {
	font-size:78.5%;
}

.img-fit {
	overflow:hidden;
	position:relative;
}
.img-fit img {
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform :translate(-50%,-50%);
}


@media only screen and (min-width: 901px) {
	.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
	}
}
@media only screen and (max-width: 1200px) {
	html {
		font-size:50%;
	}
	.navWrapper > a img {
		width:auto;
		height:40px;
	}
	.container {
		padding:5%;
	}
}
@media only screen and (max-width: 900px) {
	.pc {
		display:none;
	}
	.sp {
		display:block;
	}
	body::before {
		content: "";
		background-repeat:no-repeat;
		background-position:center;
		background-size: cover;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		transform: translateZ(0);
	}
	.navWrapper {
		background:none;
		box-shadow:none;
	}
}
@media only screen and (max-width: 600px) {
	.navWrapper > a:first-child {
		top:5%;
		left:2%;
	}
	.navWrapper > a img {
		height:25px;
	}
	h2,h3 {
		font-size:240%;
	}
	p {
		font-size:160%;
	}
}
@media only screen and (max-width: 500px) {
	p.close a,p.close a:visited,p.close a:hover {
		width:50%;
	}
}