@charset "UTF-8";

header{
	z-index: 100;
	display: flex;
    justify-content: space-between;
	position:fixed;
	top:-3px;
	width:100%;
	height:10dvh;
	padding: 0 10px;
	-webkit-backdrop-filter:  blur(5px);
	backdrop-filter: blur(5px);
	/*border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.2);*/
}

.h_logo{
	width: 15%;
	height: fit-content;
	margin-top: 2.5%;
	margin-left: 3%;
	animation: spinners-animation 30000ms linear infinite;
	transform-origin: center;
	cursor: pointer;
}

@keyframes spinners-animation {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.h_logo a{
	display: block;
}

.header_logo .logo_path{
	fill: url(#gradient);
}

#stop1{
	animation: gra-left 15s ease infinite;
}

#stop2{
	animation: gra-right 15s ease infinite;
}

@keyframes gra-left{ /* 左側の色 */
	0%{stop-color: #ff6969;}
	20%{stop-color: #d5ff69;}
	40%{stop-color: #69ff8a;}
	60%{stop-color: #69a8ff;}
	80%{stop-color: #dc69ff;}
	100%{stop-color: #ff6969;}
}

@keyframes gra-right{ /* 右側の色 */
	0%{stop-color: #69a8ff;}
	20%{stop-color: #dc69ff;}
	40%{stop-color: #ff6969;}
	60%{stop-color: #d5ff69;}
	80%{stop-color: #69ff8a;}
	100%{stop-color: #69a8ff;}
}

.pc-menu{
	display:none;
}

.sp-menu{
	width: 20%;
}

/*モーダルを開くボタン*/
.modal-open{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	height: 100%;
	overflow: hidden;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	z-index: 70;
	position: absolute;
	top: -1000%;
	left: 0;
	background-color: rgba(255, 255, 255, 0.95);
	width: 100%;
	padding: 10%;
	transition: .5s;
    box-sizing: border-box;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	top: 0;
	left: 0;
}

/*メニューを閉じる ×ボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
    right: -0%;
    width: 20%;
    height: 20%;
	font-size: 40px;
	background: rgba(255, 255, 255, 1);
    color: #000000;
    border-radius: 50rem;
	cursor: pointer;
}

/*メニュー内のコンテンツの指定*/
.modal-content{
	text-align: center;
    padding: 30px;
	padding-bottom: 0;
    border-radius: 1em;
}

.modal-content li{
	display:block;
	position: relative;
	margin: 25% 0 0;
}

.modal-content a{
	display: block;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 2;
	color: #333;
	pointer-events: all;
}

/*下線の設定*/
.modal-content a::after{
    content: '';
    display: inline-block;
    position: absolute;
    left: 10%;
    bottom: -10%;
    width: 150%;
    height: 1.5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	background: linear-gradient(to right, #555 77%, #0fc7c2 78%);
	pointer-events: none;
}

/*三本線の設定*/
.navicon {
	background: #777;
	display: block;
	height: 3px;
	width: 26px;
	position: relative;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,.navicon:after {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	background: #777;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
	top: 9px;
}

.navicon:after {
	bottom: 9px;
}

@media screen and (min-width:700px){ /*TB版*/
	header{
		height:7em;
	}
	
	.h_logo{
        width: 10%;
        margin-top: 1%;
        margin-left: 5%;
	}

	.sp-menu{
		display:none;
	}

	.pc-menu{
		display: flex;
		justify-content: center;
		width: 80%;
	}

	.pc-menu .menu{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
	}

	.pc-menu li{
		width: 10%;
	}

	.pc-menu a{
        display: inline-block;
        font-family: 'myfont_1';
        font-weight: 100;
        text-shadow: 3px 3px 5px rgba(170, 170, 170, 0.5);
        font-size: 3em;
        transition: .5s;
	}

}

@media screen and (min-width:1000px){ /*PC版*/
	header{
		height:8.5em;
	}
	
	.h_logo{
		width: 6.5%;
        margin-top: 1%;
        margin-left: 3%;
	}

	.pc-menu{
		width: 70%;
	}

	.pc-menu a{
		font-size: 3.5em;
		transform: rotate(0deg) scale(1);
	}

	.pc-menu a:hover{
        color: #111;
        text-shadow: none;
        transform: rotate(10deg) scale(1.5);
	}
}