@charset "utf-8";



/*==================================================
　4-1-4 ロゴアニメーション
==================================================*/

	#splash {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 99999;	/* 最前面へ */
		background: #fff;
		text-align: center;
		color: #333;
	}

	#splash_logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#splash_logo h1 {
		font-size: 2.5rem;
	    font-family: 'Cormorant Garamond', serif;
	}
	@media screen and (max-width:540px) {
		#splash_logo h1 {
			font-size: 2rem;
		}    
	}
	@media screen and (max-width:320px) {
		#splash_logo h1 {
			font-size: 1.7rem;
		}
	}

	.fadein {
		animation-name: fadeinAnime;
		animation-duration: 1.5s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	@keyframes fadeinAnime {
		from { opacity: 0; }
		to { opacity: 1; }
	}



/*==================================================
　5-2-1 3本線が×に
==================================================*/

	.openbtn {
		position: fixed;
	    top: 2vh;
	    right: 2vw;
	    z-index: 9999;
		cursor: pointer;
		width: 50px;
		height: 50px;
	}

	.openbtn span {
		display: inline-block;
		transition: all .4s;	/*アニメーションの設定*/
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background: #333;
		width: 45%;
	}

	.openbtn span:nth-of-type(1) {
		top:15px; 
	}

	.openbtn span:nth-of-type(2) {
		top:23px;
	}

	.openbtn span:nth-of-type(3) {
		top:31px;
	}

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

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;	/*真ん中の線は透過*/
	}

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



/*==================================================
　5-1-15 クリックしたら背景が全面に広がる
==================================================*/

	#g-nav {
		position: fixed;
		z-index: -1;
		opacity: 0;
		top: 0;
		width:100%;
		height: 100vh;
		background:rgba(255,255,255,0.9);
		transition: all 0.7s;	/* メニュー表示時アニメーション時間 */
	}

	#g-nav.panelactive{
		opacity: 1;
		z-index: 999;
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;/*表示する高さ*/
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#g-nav ul {
		display: none;
		position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}

	#g-nav.panelactive ul {
		display: block;
	}

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

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



/*==================================================
==================================================*/