@charset "utf-8";

/*========= ナビゲーションのためのCSS ===============*/


/*アクティブになったエリア*/

#g-nav.panelactive {
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	height: 100vh;
}


/*丸の拡大*/

.circle-bg {
	position: fixed;
	z-index: 3;
	/*丸の形*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #ffdbe3;
	/*丸のスタート位置と形状*/
	transform: scale(0);
	/*scaleをはじめは0に*/
	right: -50px;
	top: -50px;
	transition: all .6s;
	/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive {
	transform: scale(50);
	/*クラスが付与されたらscaleを拡大*/
}


/*ナビゲーションの縦スクロール*/

#g-nav-list {
	display: none;
	/*はじめは表示なし*/
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list {
	display: block;
	/*クラスが付与されたら出現*/
}


/*ナビゲーション*/

#g-nav ul {
	opacity: 0;
	/*はじめは透過0*/
	/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
	position: absolute;
	z-index: 999;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/*背景が出現後にナビゲーションを表示*/

#g-nav.panelactive ul {
	opacity: 1;
}


/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/

#g-nav.panelactive ul li {
	animation-name: gnaviAnime;
	animation-duration: 1s;
	animation-delay: .2s;
	/*0.2 秒遅らせて出現*/
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes gnaviAnime {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*リストのレイアウト設定*/

#g-nav li {
	text-align: center;
	list-style: none;
}

#g-nav li a {
	color: #333;
	text-decoration: none;
	padding: 10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
	font-size: 1rem;
}


/*========= ボタンのためのCSS ===============*/

.openbtn1 {
	position: fixed;
	top: 2%;
	right: 2%;
	z-index: 9999;
	/*ボタンを最前面に*/
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: none;
}


/*×に変化*/

.openbtn1 span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #e02646;
	width: 45%;
}

.openbtn1 span:nth-of-type(1) {
	top: 15px;
	width: 45%;
}

.openbtn1 span:nth-of-type(2) {
	top: 23px;
	width: 40%;
}

.openbtn1 span:nth-of-type(3) {
	top: 31px;
	width: 30%;
}

.openbtn1.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 40%;
}

.openbtn1.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn1.active span:nth-of-type(3) {
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 40%;
}


/*========= レイアウトのためのCSS ===============*/

#header {
	width: 100%;
	background: #333;
	color: #fff;
	text-align: center;
	padding: 20px;
}

nav li a {
	height: 3%!important;
}

.info,
.info a {
	color: #fff!important;
	padding: 5%;
	position: absolute;
	top: 60%;
	left: 10%;
	font-weight: bold;
	text-align: center;
	border-radius: 50px 3px;
	width: 80%;
}

#g-nav p,
#g-nav div {
	position: absolute;
}

#g-nav p {
	color: #333;
	text-align: center;
	top: 60%;
	left: 23%;
	z-index: 1;
	width: 70%;
}

#g-nav div {
	width: 80%;
	height: 65%;
	left: 10%;
	top: 10%;
	mix-blend-mode: multiply;
}

#g-nav .circle-1,
#g-nav .circle-2,
#g-nav .circle-3 {
	width: 55%;
	height: 35%;
	left: 30%;
	top: 55%;
	mix-blend-mode: multiply;
	overflow: hidden;
}


/* Circles */

#g-nav .circle-1 {
	background: #f66;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	animation: border-animation 6s infinite linear;
}

#g-nav #g-nav .circle-2 {
	background: #f591a6;
	border-radius: 80% 30% 50% 50%/50%;
	animation: border-animation 4s infinite linear;
}

#g-nav .circle-3 {
	background: #f7b4c2;
	border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
	animation: border-animation 3s infinite linear;
}

.bugger {
	text-align: center;
	font-size: 2.5vw!important;
	bottom: -15%;
	position: absolute;
	left: 11%;
	color: #e02646;
}

@media screen and (max-width: 767px) {
	.bugger {
		text-align: center;
		font-size: 1.4vw!important;
		bottom: -15%;
		position: absolute;
		left: 12%;
		color: #e02646;
	}
	.openbtn1 {
		position: fixed;
		top: 2%;
		right: 2%;
		z-index: 9999;
		/*ボタンを最前面に*/
		cursor: pointer;
		width: 12%;
		height: 6%;
	}
	.bugger {
		text-align: center;
		font-size: 2.5vw!important;
		bottom: -10%;
		position: absolute;
		left: 11%;
		color: #e02646;
		line-height: 1.4;
	}
}

@media screen and (max-width: 744px) {
	.bugger {
		text-align: center;
		font-size: 2vw!important;
		bottom: -8%;
		position: absolute;
		left: 11%;
		color: #e02646;
	}
	.openbtn1 {
		position: fixed;
		top: 1.5%;
		right: 2%;
		z-index: 9999;
		/*ボタンを最前面に*/
		cursor: pointer;
		width: 9%;
		height: 5%;
		display: block!important;
	}
	@media screen and (max-width: 460px) {
		.bugger {
			text-align: center;
			font-size: 2.5vw!important;
			bottom: -10%;
			position: absolute;
			left: 11%;
			color: #e02646;
			line-height: 1.4;
		}
		.openbtn1 {
			position: fixed;
			top: 0%;
			right: 2%;
			z-index: 9999;
			/*ボタンを最前面に*/
			cursor: pointer;
			width: 13%;
			height: 6%;
			display: block!important;
		}
	}
	/* Animation */
	@keyframes border-animation {
		to {
			transform: rotate(360deg);
		}
	}
	@media screen and (min-width: 768px) {
		.openbtn1,
		.bugger,
		#g-nav {
			display: none!important;
		}
	}