﻿
#DivCenterContent{
	display: grid;
	grid-template-rows:20% 70% 5%;
	width: 100%;
	height: 95%;
}
/* ロゴ */
#DivLogoArea{
	margin-top:0.5vw;
	width: 100%;
	text-align: center;
}
/* トップ写真 */
#DivImageArea{
	width: 100%;
	text-align: center;
}
/* スクロール */
.scrolldown	{
	position: absolute;
	text-align: center;
	left:50%;
	height:5%;
}

.scrolldown a{
	position: absolute;
	left:-15px;
	/*top: 0;*/
	bottom:35px;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
	position: absolute;
	/*top: 5px;*/
	width: 1px;
	/*height: 25px;*/
	background: #999398;
	  /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:10px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}
/*-----------------------
		メニュー画面 
 -----------------------*/
 #DivMenuContents{
	display: grid;
	width: 100%;
	height: 240%;
	grid-template-rows: repeat(5, 20%)
}
.menu-image{
	text-align: right;
	margin:2vw 0;
}
/* メニュー画像 */
.menu-image img{
	width: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 5% auto 0 auto;
}
.menu-image span{
	position: relative;
	font-size:12px;
	top:70%;
	right:8%;
	
}
/*---------------------------------------*/

/*               スマホ　     　　       */

/*---------------------------------------*/
@media screen and (min-width:360px ){
	
	/*　ロゴ  */
	#DivLogoArea > img{
		width: 15%;
		height: auto;
	}
	/*　トップイメージ  */
	#DivImageArea  > img{
		width: 100%;
		height: auto;

	}

}
/*---------------------------------------*/

/*               PC     　　       */

/*---------------------------------------*/

@media screen and (min-width:960px ){
	#DivCenterContent {
		grid-template-rows: 15% 80% 5%;
	}
	/*　ロゴ  */
	#DivLogoArea > img{
		width: 6%;
		height: auto;
	}
	/*　トップイメージ  */
	#DivImageArea > img{
		width: 50%;
		height: auto;

	}
	.scrolldown::after {
		right:-13px;
	}
	/* メニューイメージ  */
	.menu-image {
		width: 50%;
		margin: auto;
		transition: 0.3s;
	}
	#DivMenuContents{
		width:100%;
		display: unset;
	}
	.menu-image span{
		position: relative;
		top:30vw;
		font-size:1vw;
	}
	.menu-image img:hover{
		opacity:0.7;
	}
}