/* ====== ナビゲーションバー全体 ====== */
body {
	margin: 0;
	padding: 0;
}

/* 現在ページのリンクに色を付ける */ 
	.nav-links a.current { color: #3D9EBF; } 
	.Hamburger-links a.current { color: #3D9EBF; }


/* ====== Nikkyou Sans フォント読み込み ====== */
@font-face {
	font-family: 'NikkyouSans';
	src: url('../fonts/NikkyouSans-mLKax.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* ====== ナビゲーションバー(スマホ・PC共通) ====== */
	.navbar {
		height: 60px;/*ナビゲーションバーの高さ*/
		margin: 0;
		background: #E6E6E6;/*ナビゲーションバーの色*/
		width: 100%;
		z-index: 1000;/*レイヤーの高さ*/
	}

/* ====== TOPアイコン ====== */
	.logo {
		position: absolute;
		left: 20px;
	}
	.logo img {
		padding-top: 10px;
		height: 40px;
		width: auto;
		display: block;
	}
/* ====== ナビゲーションメニュー(PC時) ====== */
	/* ====== メニューリスト ====== */
		.nav-links ul {
			/*ナビゲーションメニューの文字たちを真ん中寄せ*/
			text-align: center;
			padding: 0;
    	margin: 0;
		}

		.nav-links li {
			display: inline-block;/*ナビゲーションメニューの文字を横並びに*/
			padding:15px;
		}

	/* ====== メニューリンク ====== */
		.nav-links a {
			font-family: 'NikkyouSans', sans-serif;
			text-decoration: none;
			color: #575757;          /* デフォルト色 */
			font-weight: 700;
			font-size: 16px;
			letter-spacing: 2px;
			transition: color 0.3s;
		}
		.nav-links a:hover {
			color: #3D9EBF;          /* ホバー時 */
		}

/* ====== ハンバーガーメニュー(スマホ時) ====== */
	/*ハンバーガーメニュー装飾*/
		.Hamburger {
			position: relative;/*位置：親(子に対して)*/
			top: 0;
			right: 0;
			width: 100%;
			z-index: 10000;
		}
		nav { 
			position: relative;/*位置：親(子に対して)*/
		}

	/* ハンバーガーのクリック当たり判定 */
		.Hamburger label {
			position: absolute;/*位置：子(親に対して)*/
			display: block;/*ブロック要素*/
			/*大きさ*/
			width: 40px;
			height: 40px;
			/*配置位置*/
			right: 15px;
			top: 10px;
			border-radius: 50%;/*丸み*/
			z-index: 10000;/*レイヤーの高さ*/
			mix-blend-mode: overlay;/*レイヤーモード：オーバーレイ*/
			background-color: #FFFFFF;/*当たり判定を可視化した時の色です*/
			opacity: 0;/* ←当たり判定調整時はここを一時的に1にすると可視化できます */
		}
	/* ハンバーガーの棒を作る */
		.Hamburger span {
			position: absolute;/*位置：子(親に対して)*/
			/*棒の長さ＆太さ*/
			width: 30px;
			height: 3px;
			background-color: #575757;/*棒の色*/
			right: 20px;/*棒の位置*/
			transition: .3s;/*変化がおきる時は0.3秒かける*/
			z-index: 1001;/*レイヤーの高さ*/
		}
			/*棒1,2,3の高さ*/
			.span1 {top: 20px;}
			.span2 {top: 30px;}
			.span3 {top: 40px;}

	/*ハンバーガーの棒バツ印化*/
			#check:checked ~ .span2 {/*クリック後、棒2を消す*/
				display: none;
			}
			#check:checked ~ .span1 {/*クリック後、棒1を変形*/
				/*棒1の長さと位置を微調整*/
				width: 35px;
				top: 30px;
				right:17px;
				transform: rotate(45deg);/*棒1を45度斜めにする*/
			}
			#check:checked ~ .span3 {/*クリック後、棒3を変形*/
				/*棒3の長さと位置を微調整*/
				width: 35px;
				top: 30px;
				right:17px;
				transform: rotate(-45deg);/*棒3をー45度斜めにする*/
			}
			#check {
				display: none;/*ハンバーガーメニューのチェックボックスを非表示*/
			}

	/*ハンバーガーメニューの背景など*/
			.Hamburger-links {
				position: fixed;
				width: 100%;	/*メニュー背景横幅*/
				height: 100vh;	/*メニュー背景縦幅(画面の高さを基準)*/
				background-color: #FFFFFF;	/*メニュー背景の色*/
				right: -100%;	/*初期位置：画面外右100％*/
				opacity: 0;		/*初期不透明度：0*/
				transition: right 0.5s ease, opacity 0.5s ease; /* スライド+フェード */
				display: flex;		/*Flexboxを有効化*/
				align-items: center;/*メニュー文字たちを縦に真ん中に配置する*/
				z-index: 1000;		/*レイヤーの高さ*/
			}

	/*クリックしたらハンバーガーメニューが右から現れる仕様(右-100%から0に)*/	
			#check:checked ~ .Hamburger-links {
				right: 0;
				opacity: 1;
			}
	/*ハンバーガーの文字同士の幅*/
				.Hamburger-links li {
				padding: 30px 0;/*上下30px,左右0pxの余白*/
				display: block;/*ハンバーガーメニューの文字を縦並びに*/
			}
			.Hamburger-links ul {
				position: relative;
				margin-top: -60px;
				text-align: center;/*メニュー文字たちを横に真ん中に配置する*/
				list-style: none;/*リストの点を消す*/
				width: 100%;
				padding: 0;
			}

	/*ハンバーガーメニュー内の文字のフォントや色など*/
			.Hamburger-links a {
				font-family: 'NikkyouSans', sans-serif;
				text-decoration: none;
				color: #575757;          /* デフォルト色 */
				font-weight: 700;
				font-size: 16px;
				letter-spacing: 2px;
				transition: color 0.3s;
			}
			.Hamburger-links a:hover {
				color: #3D9EBF;          /* ホバー時 */
			}	

/* ====== レスポンシブ設定(スマホとPCで見た目を変える設定) ====== */

	/*レスポンシブ：スマホサイズくらい(最大横幅600px)の時に横のナビゲーションメニューを消す*/
		@media screen and (max-width: 600px) {
			.nav-links {
					display: none;  /* 消す */
			}
		}
	/*レスポンシブ：スマホ以上,アイパッド～PCサイズくらい(最小601px～)の時にハンバーガーメニューを消す*/
		@media screen and (min-width: 601px) {
  			.Hamburger {
				display: none;
 			 }
		}