@charset "utf-8";

*{
	box-sizing:border-box;
}
:root,body,aside{
	height:100%;
}
img{
	width:100%;
}
p{
	margin:0;
}
h1,h2{
	font-weight:normal;
}
a{
	color:#000;
}
body{
	font-family: PCMyungjo, 'Times New Roman', a-otf-ryumin-pr6n, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight:200;
	font-size:28px;
	letter-spacing:0;
	line-height:2;
}
.en{
	font-feature-settings:"hwid" on, "zero" on,"palt" on;
}
.super{
	vertical-align:super;
	font-size:0.5em;
}
header{
	position:absolute;
	top:0;
	z-index:999;
}
header h1{
	font-size:20.8vw;
	line-height:0.5em;
	margin-top:50px;
	color:#8B6949;
}
aside{
	font-size:14px;
	width:20%;
	position:fixed;
	/*border-right:1px solid #8B6949;*/
	top:0;
	left:0;
	text-align:center;
	padding-top:0.83em;
	z-index:1;
}
aside h2{
	margin-top:0;
	font-size:14px;
	opacity:0;
	animation-name:fadeIn;
	animation-duration:1s;
	animation-timing-function:ease-out;
	animation-delay:1.8s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
aside dl{
	opacity:0;
	animation-name:fadeIn;
	animation-duration:1s;
	animation-timing-function:ease-out;
	animation-delay:1.8s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
aside dd{
	margin-left:0;
	margin-bottom:2em;
}
main{
	width:60%;
	margin-right:auto;
	margin-left:auto;
	opacity:0;
	animation-name:fadeIn;
	animation-duration:1s;
	animation-timing-function:ease-out;
	animation-delay:1.8s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
main p.powder{
	width:94.5%;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:959px;
}
#ytPlayerWrap{
	position: fixed;
    height: 44vw;
    width: 80%;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
}
#ytPlayer{
	height:100%;
position: relative;
    overflow: hidden;
}
#ytPlayerWrap iframe{
	margin-left: 0 !important;
    margin-top: 0 !important;
	pointer-events: none;
display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 45vw;
}
main p.pie{
	width:80.3%;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:1082px;
}
main p.pie+p{
	margin-bottom:877px;
}
main h2{
	font-size:10.4vw;
	line-height:0.5em;
	margin-bottom:1032px;
}
main h2+p{
	margin-bottom:1792px;
}
footer{
	width:60%;
	margin-right:auto;
	margin-left:auto;
	font-size:14px;
}
footer p{
	position:relative;
}
.load::before{
	content:"";
	display:block;
	position:fixed;
	height:300%;
	width:20%;
	z-index:9999;
	background-color:#8B6949;
	top:0;
	right:80%;
	animation-name:slide1;
	animation-duration:2s;
	animation-timing-function:ease-in;
	animation-delay:0.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.load::after{
	content:"";
	display:block;
	position:fixed;
	height:300%;
	width:80%;
	z-index:9999;
	background-color:#8B6949;
	top:0;
	left:20%;
	animation-name:slide2;
	animation-duration:1s;
	animation-timing-function:ease-in;
	animation-delay:0.5s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes fadeIn {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}
@keyframes slide1 {
  from {
    width:20%;
  }

  50%{
  	width:1px;
  }

  to {
    height:0;
    width:1px;
  }
}
@keyframes slide2 {
  from {
    width:80%;
  }

  to {
    width:0;
  }
}

@media screen and (max-width:764px){
	body{
		font-size:14px;
	}
	main{
		width:80%;
		margin-right:0;
	}
	main p.powder{
		width:100%;
		margin-bottom:571px;
	}
	main p.pie{
		width:100%;
		margin-bottom:624px;
	}
	main p.pie+p{
		margin-bottom:638px;
	}
	main h2{
		margin-bottom:796px;
	}
	main h2+p{
		margin-bottom:1079px;
	}
	aside{
		line-height:1.5;
	}
	aside dd{
		margin-bottom:1.8em;
	}
}