@charset "utf-8";
/*base
-----------------------------*/
*{box-sizing: border-box;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-box-shadow: none;box-shadow: none;outline: none;}
img{vertical-align: bottom;}
html{font-size: 62.5%;-webkit-text-size-adjust: 100%;}
body{
	line-height: 1.5;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.1rem;
	color: #ffffff;
	position: relative;
	background: url(../images/com/index_bg01.jpg) repeat-x 0 770px /113px 7528px;
}
/*header
-----------------------------*/
header{
	position: relative;
	width: 100%;}
header.white{
	background-color: #fff;}
header.black{
	background-color: #212121;}
#headerInner{
	width: 100%;
	margin: 0 auto;
	padding: 12px 20px;}
#logo{
	line-height: 0;}
/*ローディング
------------------------------*/
#loading{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
	z-index: 9999;
}
#loading .content{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
	transform: translate3d(-50%,-50%,0);
  text-align: center;
	width: 405px;
	height: 406px;
	padding-top: 103px;
}
#loading ul{
  margin: 80px auto 20px;
  width: 49px;
  text-align: center;
}
#loading li{
  width: 7px;
  height: 7px;
  background-color: #d4b865;
  border-radius: 100%;
  display: inline-block;
  animation: dot 1.6s infinite ease-in-out both;
}
#loading li+li{
	margin-left: 7px;
}
#loading li:nth-of-type(1){
  animation-delay: -0.32s;
}
#loading li:nth-of-type(2){
  animation-delay: -0.16s;
}
@keyframes dot{
  0%,80%,100%{ 
    transform: scale(0);
		opacity: 0.2;}
	40%{ 
    transform: scale(1.0);
		opacity: 1;}
}
/*共通
------------------------------*/
.videoArea ul,nav ul,.down,.share,.share ul,.share p,.videoArea .inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.ivent,.people,.kyanpen,.movie{
	position: relative;
	background: #0ff;
}
/*箱
------------------------------*/
main{
	display: block;
	text-align: center;
	overflow: hidden;
	position: relative;
}
main>.content{
	position: relative;
	background: url(../images/com/index_info_bg02.png) no-repeat center 0px/375px 200px;
	margin-top: 71px;
	left: 50%;
	transform: translate3d(-50%,0,0);
	width: 415px;
	border-left: 10px solid #bcdcf8;
	border-right: 10px solid #bcdcf8;	
}
section{
	width: 395px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
/*メインビジュアル動画
------------------------------*/
.videoArea{
	width: 100%;
	height: 660px;
	position: relative;
	overflow: hidden;
}
video{
	width: 412px;
	height: auto;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
h1{
	position: relative;
	left: 50%;
	transform: translate3d(-52%,0,0);
	width: 462px;
}
.videoArea .info{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 265px;
	background: url(../images/com/index_info_bg05.png) no-repeat center 61px/501px 210px,url(../images/com/index_info_bg01.png) repeat-x 0 0/8px 265px;
	padding-bottom: 20px;
}
.videoArea .info>.btn{
	margin: 12px auto 0;
}
.videoArea .inner{
	width: 360px;
	margin: -15px auto 8px;
	justify-content: flex-end;
}
.videoArea .inner p:nth-of-type(1){
	margin-top: 3px;
}
/*ナビゲーション
------------------------------*/
nav{
	width: 100%;
	margin-bottom: -71px;
	position: relative;
	z-index: 5000;
	background: url(../images/com/index_nav_bg01.jpg) repeat-x 0 0/31px 71px;
}
nav.sticky{
	position: fixed;
	top: 0;
	width: 100%;
}
nav ul{
	height: 71px;
	width: 360px;
	margin: 0 auto;
	background: url(../images/com/index_nav_bg02.png) no-repeat center 0 /372px 71px;
}
nav li{
	margin-top: 27px;
}
nav li+li{
	margin-left: 27px;
}
nav a{
	display: block;
	padding: 10px;
	margin-top: -10px;
}
/*イベント情報
------------------------------*/
.ivent{
	background: url(../images/com/index_ivent_bg01.png) no-repeat center 0/375px 3191px;
	height: 3191px;
	margin-top: 179px;
	padding: 28px 0 0px;
}
.iventContent figure{
	margin: 17px 0 15px;
}
.iventContent figcaption{
	margin-top: -96px;
}
.iventContent .btn{
	margin: 18px 0 43px;
}
.iventContent .board{
	margin: 0 0 6px -111px;
}
.iventContent:nth-of-type(2){
	margin-bottom: 31px;
}
.iventContent:nth-of-type(2) .fun{
	margin-bottom: 9px;
}
.iventContent:nth-of-type(2) .fun+p{
	margin-bottom: 25px;
}
.iventContent ol{
	width: 331px;
	margin: 0 auto;
	text-align: left;
}
.iventContent ol::before{
	content: "";
  display: inline-block;
	height: 22px;
  width: 360px;
	margin: 15px 0 11px;
  background: url(../images/com/index_ivent_before01.png) no-repeat center top 0px/360px 21px;
	position: relative;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
.iventContent ol::after{
	content: "";
  display: inline-block;
	height: 117px;
  width: 360px;
	margin: -25px 0 3px;
  background: url(../images/com/index_ivent_after01.png) no-repeat center top 0px/360px 117px;
	position: relative;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
.iventContent:nth-of-type(3) ol li:nth-of-type(2){
	position: relative;
}
.iventContent:nth-of-type(3) ol li:nth-of-type(2)::after{
	content: "";
  display: inline-block;
	position: absolute;
	height: 77px;
  width: 80px;
  background: url(../images/com/index_ivent_im04.png) no-repeat center top 0px/80px 77px;
	top: -12px;
	left: 50%;
	transform: translate3d(124%,0,0);
}
.iventContent:nth-of-type(3) ol::before{
	margin: 6px 0 10px;
}
.iventContent:nth-of-type(3) ol::after{
	height: 2px;
	margin: -25px 0 4px;
  background: url(../images/com/index_ivent_after02.png) no-repeat center top 0px/360px 2px;
}
.iventContent ol li+li{
	margin-top: 9px;
}
.iventContent ol+p{
	margin-bottom: 5px;
}
.iventContent:nth-of-type(3) .board{
	margin-bottom: -2px;
}
.iventContent:nth-of-type(3) .fun{
	margin-bottom: 15px;
}
.iventContent:nth-of-type(3) p:nth-last-of-type(1){
	margin-left: -5px;
}
/*ぱらぱら
------------------------------*/
section:nth-of-type(2){
	padding-top: 236px;
	margin-top: -241px;
}
.people{
	background: url(../images/com/index_people_bg01.png) no-repeat center 0/375px 3072px;
	height: 3072px;
	margin-top: 0px;
	padding-top: 0px;
	position: relative;
	top: -20px;
}
section h2.slideIn{
	transform: translate3d(0,-125px,0);
}
section h2{
	transform: translate3d(0,0,0);
	transition: all 100ms ease-out;
	position: absolute;
	top: 130px;
	margin-left: 24px;
}
#parapara li:nth-of-type(1){
	margin-bottom: 17px;
}
#parapara li{
	margin-bottom: 18px;
}
.charMovie{
	position: relative;
	width: 95px;
	height: 95px;
}
.charMovie img:nth-of-type(2){
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
.char{
	width: 375px;
	height: 450px;
	margin: 0 auto;
	position: relative;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
.char .touch,.char .text{
	pointer-events: none;
}
#parapara .img{
	position: relative;
	left: 50%;
	opacity: 0;
	transform: translate3d(130%,0,0) rotate(-3deg);
	transition: all 200ms;
	width: 375px;
}
#parapara .img{
	bottom: 0;
}
#parapara .img img{
	position: absolute;
	left: 50%;
	bottom: -27px;
	padding: 0 100px;
	transform: translate3d(-50%,0,0) rotate(3deg);
}#parapara li:nth-of-type(3) .img img{
	bottom: -108px;
}
#parapara li:nth-of-type(4) .img img{
	bottom: -39px;
	margin-left: -18px;
}
#parapara li:nth-of-type(5) .img img{
	bottom: -67px;
}
#parapara li:nth-of-type(6) .img img{
	bottom: -32px;
	margin-left: 21px;
}
#parapara li.slideIn .img{
	opacity: 1;
	transform: translate3d(-50%,0,0) rotate(-3deg);
	width: 510px;
	height: 414px;
	overflow: hidden;
}
#parapara .charMovie{
	position: relative;
	top: -27px;
	left: 50%;
	transform: translate3d(-55%,0,0);
	opacity: 0;
	transition: all 300ms;
	transition-delay: 300ms;
}
#parapara li:nth-of-type(2) .charMovie{
	top: -30px;
}
#parapara li.slideIn .charMovie{
	opacity: 1;
}
#parapara .text{
	opacity: 0;
	transform: translate3d(-100px,0,0);
	margin-right: 100px;
	margin-top: -125px;
}
#parapara li:nth-of-type(2) .text{
	margin-right: 223px;
	margin-top: -128px;
}
#parapara li:nth-of-type(3) .text{
	margin-right: 154px;
}
#parapara li:nth-of-type(4) .text{
	margin-right: 96px;
}
#parapara li.slideIn .text{
	animation: name 0.1s 1 ease-in-out both;
	animation-delay: 180ms;
}
@keyframes name{
  80%{
		transform: translate3d(15px,0,0);
		opacity: 0.8;}
	100%{
		transform: translate3d(0,0,0);
		opacity: 1;}
}
#parapara li .touch{
	position: relative;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	left: 50%;
	top: -360px;
	margin-left: 72px;
	opacity: 0;
	transform: scale(5,5);
	transition: all 100ms;
	transition-delay: 260ms;
}
#parapara li:nth-of-type(2) .touch{
	top: -285px;
	margin-left: -148px;
}
#parapara li:nth-of-type(3) .touch{
	top: -370px;
	margin-left: 112px;
}
#parapara li:nth-of-type(4) .touch{
	top: -334px;
	margin-left: -119px;
}
#parapara li:nth-of-type(5) .touch{
	top: -330px;
	margin-left: 108px;
}
#parapara li:nth-of-type(6) .touch{
	top: -342px;
	margin-left: -127px;
}
#parapara li.slideIn .touch{
	opacity: 1;
	transform: scale(1,1);
}
.touch img{
	border-radius: 50%;
}
.touch .ring{
	background: rgba(255,255,255,0.4);
	position: absolute;
	z-index: -1;
  border-radius: 50%;
	height: 55px;
	width: 55px;
	top: -5px;
	left: -5px;
	animation: touch 1.6s ease-out infinite;
}
.wave .touch{
	animation: out 0.5s ease-out forwards;
}
@keyframes touch{
	0%{
		transform: scale(0.8,0.8);}
	50%{
		opacity: 1;}
	100%{
		transform: scale(1.3,1.3); opacity: 0.0;}
}
@keyframes out{
	90%{
		transform: scale(0.9,0.9);}
	95%{
		transform: scale(1.5,1.5);}
	100%{
		opacity: 0;
		transform: scale(1,1);}
}
/*動画情報
------------------------------*/
section:nth-of-type(3){
	padding-top: 179px;
	margin-top: -220px;
}
.movie{
	background: url(../images/com/index_movie_bg01.png) no-repeat center 0/375px 811px;
	height: 811px;
	position: relative;
	padding-top: 48px;
}
.thumbnail>button+p{
	margin-top: -19px;
}
.thumbnail>button{
	position: relative;
	z-index: 50;
}
.thumbnail+li{
	margin-top: 25px;
}
/*footer
-----------------------------*/
footer{
	font-size: 1.2rem;
	margin-top: -449px;
	position: relative;
}
footer.white{
	background-color: #fff;
	color: #888;
}
footer.black{
	color: #aaa;
}
#footerInner{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	overflow-x: hidden;
}
.copy{
	text-align: center;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
#footerLinks{
	display: flex;
	justify-content: center;
	margin-top: 5px;
}
#footerLinks li{
	position: relative;
	margin-left: 19px;
}
#footerLinks li:nth-of-type(1){
	margin-left: 0;
}
#footerLinks li a{
	text-decoration: none;
}
footer.white #footerLinks li a{
	color: #888;
}
footer.black #footerLinks li a{
	color: #aaa;
}
#footerLinks li::before{
	display: inline-block;
	content: "";
	position: absolute;
	width: 1px;
	height: 10px;
	top: 4px;
	left: -10px;
}
footer.white #footerLinks li::before{
	background-color: #888;
}
footer.black #footerLinks li::before{
	background-color: #aaa;
}
#footerLinks li:nth-of-type(1)::before{
	content: none;
}
.down{
	background: url(../images/com/index_footer_bg01.png) no-repeat center 0/375px 206px;
	height: 205px;
	position: relative;
}
.down li{
	margin-top: 136px;
}
.down li+li{
	margin-left: 15px;
}
.offcel{
	padding: 25px 0;
	background-color: #000;
}
.offcel li+li{
	margin-top: 15px;
}
.share{
	background: url(../images/com/index_footer_bg02.jpg) repeat-x 0 0/32px 95px;
	align-items: center;
	height: 95px;
}
.share p>img+img{
	margin: 2px 0 0 15px;
}
.share ul{
	margin-left: 15px;
}
.share ul li+li{
	margin-left: 10px;
}
.pageUp{
	background: url(../images/com/index_footer_bg03.jpg) repeat-x 0 0/1px 165px;
	height: 165px;
	position: relative;
}
.pageUp p:nth-of-type(1){
	padding-top: 76px;
}
.pageUp p:nth-of-type(2){
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
#footerInfo{
	background-color: #1e1e1e;
	padding: 13px 0;
}
.down,.offcel,.share,.pageUp{
	width: 395px;
	margin: 0 auto;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	position: relative;
	left: 50%;
	transform: translate3d(-50%,0,0);
}
#footerInner .content{
	width: 415px;
	margin: 0 auto;
	border-left: 10px solid #bcdcf8;
	border-right: 10px solid #bcdcf8;
	position: relative;
	left: 50%;
	margin-left: -207.5px;
}
.info>.btn img:nth-of-type(1){
	box-shadow: 4px 4px 0 0 rgba(75,63,32,0.7)
}
.ivent .btn img{
	box-shadow: 4px 4px 0 0 rgba(45,60,109,0.4)
}
/****************モーダルのシステム****************/
.modal_form{
	z-index: 9999;
	display: none;
	position: fixed;
}
.modal_form .overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	background-color: rgba(0,0,0,0.8);
}
.modal_messege{
	line-height: 1.8;
	position: fixed;
	width: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 9999;
	height: 85%;
}
.modal_messege .content{
	position: relative;
}
.modal_messege .content a{
	display: block;
	height: 25px;
	position: absolute;
}
.modal_messege .content a:nth-of-type(1){
	width: 240px;
	bottom: 115px;
	left: 8px;
}
.modal_messege .content a:nth-of-type(2){
	width: 250px;
	bottom: 69px;
	left: 9px;
}
.modal_messege .closeBtn{
	margin-bottom: 6px;
	cursor: pointer;
	z-index: 999;
	text-align: right;
}
body.fixed {
  position: fixed;
	width: 100%;
  height: 100%;
}
.modal_contents{
	height: 90%;
	overflow-x: hidden;
	z-index: 9999;
}
/*TOPへ戻るボタン*/
#pageUp{
	position: absolute;
  top: 535px;
  left: 50%;
  z-index: 6000;
  transform: translate3d(-50%,0,0);
}
#pageUp.fly{
	transition: all 1700ms ease-in-out;
	transition-delay: 1880ms;
}
.move{
	pointer-events: none;
}
.modal_messege .content a:nth-of-type(3){
	width: 275px;
	bottom: 23px;
	left: 9px;
}
#loading .content p:nth-of-type(1){
	margin-top: -158px;
	margin-bottom: -220px;
}
/*追加*/
#section2 button,#section3 button{
	pointer-events: none;
}