/*
メニューロゴの高さ70px
横115px
メニューの横幅変える場合はheader_innerのgrid-template-columns: 110px 1fr;の110pxのとこの数字上げる

*/

/*
body{background-color:#afc9b4;padding:0;margin:0;}
*/


/*
#header_inner{
	display:grid;
	grid-template-columns: 110px 1fr auto;
	place-items:center left;
	box-sizing: border-box;

	padding:10px;box-sizing: border-box;
	transition: all .4s;
	border-bottom:1px solid #FFF;
}
*/

nav{
	width:100%;
}

#nav_inner{
	display:flex;
	width:100%;
	gap:20px;

	align-items: center;
	justify-content: center; /* 追加 */

	box-sizing: border-box;

	margin:0 auto;


}

/*----------------
新メニューここから↓
------------------*/
header{
	box-sizing: border-box;
	top: 0;
	left: 0;

	/*
	position: fixed;
	*/
	position: sticky;
	top: 0;
	z-index:9;
	width:100%;
	/*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/

}

.header {
	display: flex;
	justify-content: space-between;
	/*position: sticky;*/
	position:absolute;
	background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);

	top: 0;
	left: 0;
	z-index: 10;

	box-sizing: border-box;
	width:100%;

	padding: 14px 24px;

	/*background: #000;*/
}

.nav a, .x_icon a {
	margin: 0 8px;
	text-decoration: none;
	color: #fff;
	font-size: 14px;
}

.nav a:hover {
	color: #db0081;
}



/*--------------------
ハンバーガーメニュー
---------------------*/
.nav_open{
	display:none;
	position: relative;
	cursor: pointer;
	width: 32px;
	height:32px;
	color:#FFF;
	text-align:right;
	font-size:12px;

	background-color:#000;border-radius:3px;
}

.nav_open span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 6px;
	height: 3px;
	border-radius: 2px;
	background: #FFF;
	width: 64%;
}

.nav_open span:nth-of-type(1) {
	top:6px; 
}

.nav_open span:nth-of-type(2) {
	top:11px;
}

.nav_open span:nth-of-type(3) {
	top:16px;
}

.nav_open span:nth-of-type(4) {
	background: none;
	font-size:8px;
	top:18px;
	left: 4px;
}

/*activeクラス付与　線を回転して×に*/
.nav_open.active span:nth-of-type(1) {
	top: 4px;
	left: 5px;
	transform: translateY(6px) rotate(-45deg);
	width: 70%;
}

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

.nav_open.active span:nth-of-type(3){
	top: 16px;
	left: 5px;
	transform: translateY(-6px) rotate(45deg);
	width: 70%;
}

/*--------------------
スクロール時の挙動
---------------------*/
/*
#header_scroll {font-size:0.9em;}
#header_scroll #header_logo img{max-height:30px;}
#header_scroll #nav_teny img{width:60px;}
#header_scroll #header_inner{
	grid-template-columns: 70px 1fr auto;
	padding:5px 10px;
}
*/
/*--------------------
メニューのリンクの挙動
---------------------*/
#nav_inner a{
	text-decoration: none;
	color:#fff;
	display: inline-block;
}



@media (max-width: 768px) {

	.nav {
		display: none;
	}

	.logo{margin-right: auto;}




	.header {
		padding: 10px 5px;
	}

}

/*上下２段計6個の例　使わないかも*/
/*
@media (min-width: 0px) and (max-width: 1200px) {

	header{
		display:grid;
		grid-template-columns: 80px 1fr 1fr 1fr 80px;
		gap:20px;
	}

	header div:first-child{
		grid-row: 1 / 3;
	}

	header div:last-child{
		grid-column: 5 / 6;
		grid-row: 1 / 3;
	}
}
*/


/*--------------------
640↓
---------------------*/
@media (min-width: 0px) and (max-width: 768px) { 

	/*--------------------
	header
	---------------------*/
  	#header_inner{ 
		display:block;
 		grid-template-columns: 1fr;
		padding:0;
 	}

  	.nav_open{display:block;}
/*

	#header_logo{display:grid;grid-template-columns: 110px 1fr auto;width:100%;padding:10px;box-sizing: border-box;}
	#nav_teny{margin-left: 0;}

	nav{display:none;position: fixed;}
	#nav_inner{
		background-color:rgba(255,255,255,0.9);
		height:100vh;
		width:100%;
		flex-flow: column;
		justify-content: center;
		text-align:center;

	}
*/

	nav{
		display:none;
		position: fixed;

		top: 0;
		left: 0;

		/*width: 100vw;*/

		z-index: 999;
	}

	#nav_inner{
		background-color: #DB0081;

		height: 100vh;

		flex-flow: column;

		padding-top:70px;
/*		padding-left:24px;
		padding-right:24px;
		justify-content: start;
		align-items: start;
		text-align:left;
*/

		font-family: "Noto Serif JP", serif;

		text-align:center;

	}


	#nav_inner div{
		width:100%;
		/*border-bottom:1px solid #e5e5e5;*/
	}


	#nav_inner a{
		font-size:1.1em;
		padding-bottom: 5px;

		font-family: "Noto Serif JP", serif;
		/*
		display:flex;
		justify-content: space-between;
		align-items: center;

		width:100%;
		color:#fff;
		text-decoration:none;

		width:95%;margin:0 auto;
		border-bottom:1px solid #e5e5e5;
		*/
	}

/*
#nav_inner a::after{
	content: ">";
	color:#999;
	font-size:0.9em;
}
*/

	.nav a, .x_icon a {
		font-size: medium;
	}

	.nav_open,.logo,.x_icon{
		z-index: 1000;
	}

/*
	#header_scroll #nav_teny img{width:80px;}
*/


	/*--------------------
	header スクロール時
	---------------------*/
/*  	#header_scroll #header_inner{ 
		padding:0;
 	}

	#header_scroll */
	#nav_inner{
		height:100vh;
	}


	/*------------------------------------
	ハンバーガーメニュー　スクロール時
	-------------------------------------*/
	#header_scroll .nav_open span{
		height: 3px;
	}

	#header_scroll .nav_open span:nth-of-type(1) {
		top:6px; 
	}

	#header_scroll .nav_open span:nth-of-type(2) {
		top:11px;
	}

	#header_scroll .nav_open span:nth-of-type(3) {
		top:16px;
	}

	#header_scroll .nav_open span:nth-of-type(4) {
		top:18px;
	}


	/*activeクラス付与　線を回転して×に*/
	#header_scroll .nav_open.active span:nth-of-type(1) {
		top: 4px;
		left: 5px;
		width: 70%;
	}

	#header_scroll .nav_open.active span:nth-of-type(3){
		top: 16px;
		left: 5px;
		width: 70%;
	}
}



/*---------------------------------
　ホバーアニメーション可能なデバイスのみに適用
-----------------------------------*/
@media (any-hover: hover) {
	/*--------------------
	メニューのリンクの挙動
	---------------------*/
	#nav_inner a {
		padding-bottom: 5px;
		position: relative;

	}
	#nav_inner a:before {
		background: #db0081;
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;bottom: 0;
		transform-origin: right top;
		transform: scale(0, 1);
		transition: transform .3s;
	}

	#nav_inner a:hover::before {
		transform-origin: center top;
		transform: scale(1, 1);


	}


	/*--------------------
	Xのアイコンの挙動
	---------------------*/
	.x_icon a:hover img {
		transition: transform 1s;
		transform: rotateY(360deg);
	}

}




/*--------------------
スポットライト
---------------------*/
.spotlight {
	display:none;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);

	width: min(80vw, 1000px);
	height: 100vh;
	z-index:9999;
	background:linear-gradient(
		to bottom,
		rgba(255,255,255,0.8) 0%,
		rgba(255,255,255,0.3) 50%,
		rgba(255,255,255,0) 100%
	);
	clip-path: polygon(45% 0,55% 0,100% 100%,0% 100%);
	pointer-events: none;
}