@charset "utf-8";
/* */
#header{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
  width: 100%;
	height:100vh;
 	overflow: hidden;/*はみ出しているところを隠す*/
}

#header-img{
  position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  width: 100%;
	height:100vh;
	background: url("../images/main.jpg") no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#diet-img{
  position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  width: 100%;
	height:100vh;
	background: url("../images/stretch.jpg") no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}


#container,
#footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/*ロゴを中央に配置*/
#header h1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
  color: #f8f9fa;
  font-size: 8rem;
  font-family: 'Parisienne', cursive;
  font-weight: normal;
}

/*======  縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:fixed;
	left:50%;
	bottom:5rem;
    /*全体の高さ*/
	height:8rem;
  z-index: 2;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-1.5rem;
	top: -1.5rem;
    /*テキストの形状*/
	color: #eee;
  font-size: 2rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	left: 1.5rem;
  top: 3rem !important;
    /*線の形状*/
	width: .2rem;
	height: 5rem !important;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:3rem;
		opacity: 1;
	}
	100%{
		height:0;
		top:5rem;
		opacity: 0;
	}
}
/* ---------- ボタン --------- */

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #ccc;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#e2a2b1;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.btn__wap {
  width: 100%;
  margin: 2rem auto;
  text-align: center;
}

/*==================================================
　本線が回転して×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: fixed;
	top: 2rem;
	right: 2rem;
	cursor: pointer;
    width: 10rem;
    height:10rem;
	border-radius: 5px;
	z-index: 999;
}

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


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

.openbtn span:nth-of-type(2) {
	top:30px;
  	width: 35%;
}

.openbtn span:nth-of-type(3) {
	top:45px;
  	width: 20%;
}

/*activeクラスが付与されると線が回転して×になる*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    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(135deg);
    width: 30%;
}

/*　ナビゲーション　*/

/* アクティブになったエリア */
#g-nav-list {
	display: none;/*はじめは非表示*/
	/*ナビの数が増えた場合は縦スクロール*/
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100vh;
	overflow: auto;
}

#g-nav.panelactive #g-nav-list {
	display: block;/*クラスがついたら出現*/
}

#g-nav ul {
	opacity: 0;/*はじめは透過*/
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	transform:  translate(-50%,-50%);
	padding: 0;
	list-style: none;
	font-size: 1.8rem;
	li {
		margin: 2rem 0;
	}
	a {
			color: #fff;
	}
}

/*背景が出現後にナビを表示*/
#g-nav.panelactive ul {
	opacity: 1;
}

/*背景が出現後にリストを表示*/

#g-nav.panelactive ul li {
	animation-name:gnavAnime;
	animation-duration: 1s;
	/*0.2秒遅らせる*/
	animation-delay: .2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes gnavAnime {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 丸の拡大 */

.circle-bg {
	position: fixed;
	z-index: 3;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: #e2a2b1;
	/*丸のスタート位置と形状*/
	transform: scale(0);
	right: -5rem;
	top: -5rem;
	/* 0.6秒かけてアニメーション */
	transition: all .6s;
}

.circle-bg.circleactive {
	/* クラスが付与されたら拡大 */
	transform: scale(50);
}