/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none;}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	font-family:"Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #000;
	text-align: center;
	background: #fff;
}

canvas{
  display:block;
  vertical-align:bottom;
}

/* ====== loading  ====== */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* ====== music  ====== */

#jp_container_1{
    width:28px;
	position:fixed;
	top:20px;
	right:20px;
}

.jp-play{
    width: 28px;
    height: 31px;
    background: url(../img/top/music_off.svg) center center no-repeat;
    cursor: pointer;
	text-indent:-10000px;
}
.jp-pause{
    width: 28px;
    height: 31px;
    background: url(../img/top/music.svg) center center no-repeat;
    cursor: pointer;
    display: none;
	text-indent:-10000px;
}

/* ====== contact  ====== */

#contact {
	position:fixed;
	top:20px;
	left:20px;
}

/* ====== scrolltopcontroll  ====== */
a.pagetop {
	width:40px;
	height:0;
	background: url(../img/pagetop.svg) no-repeat 0 0;
	padding-top: 40px;
	text-indent:-9999px;
	overflow: hidden;
	display:block;
}





/* ====== onepagescroll  ====== */


/* #container
--------------------------- */
#container {
	width: 100%;
	z-index: 1;
}

/* 背景
--------------------------- */
.stageBase {
	width: 100%;
	position: relative;
}
.stageBase .fieldWrap {
	padding:0;
	text-align: center;
}
#stage1 {height:100%;}
#stage2 {background:#fff url(../img/top/stage2_bglogo.png) top right no-repeat;}
#stage3 {background: url(../img/top/stage3_bg.jpg)  center center no-repeat; }
#stage4 {background-image:url(../img/top/stage4_bg.png); }

@-webkit-keyframes bg-color {
  0% { background-color: #efefef; }
  30% { background-color: #cceef6; }
  60% { background-color: #f9eddc; }
  90% { background-color: #e9e0ec; }
  100% { background-color: #efefef; }
}
@keyframes bg-color {
  0% { background-color: #efefef; }
  30% { background-color: #cceef6; }
  60% { background-color: #f9eddc; }
  90% { background-color: #e9e0ec; }
  100% { background-color: #efefef; }
}

#stage4 {
  background-color: #efefef;
  animation: bg-color 30s infinite;
  -webkit-animation: bg-color 40s infinite;
}


/* #pageNav
--------------------------- */
#pageNav {
	position: fixed;
	top: 50%;
	right: 33px;
	width: 5px;
	text-align: center;
	z-index: 2;
	margin-top:-80px;
}
#pageNav ul {
	width: 5px;
	display: block;
}
#pageNav ul li {
	padding-bottom: 14px;
	width: 5px;
	height: 5px;
	display: block;
	overflow: hidden;
}

#pageNav ul li a {
	width: 5px;
	height: 5px;
	 border-radius: 50%;
	display: block;
	background-color:#000;
}
#pageNav ul li.activeStage a {
	background-color:#51b9da;
}

/*
#pageNav ul li a {
	width: 40px;
	height: 16px;
	background: transparent url(../img/top/nav.png) no-repeat center right;
	display: block;
}
#pageNav ul li.activeStage a {
	background: transparent url(../img/top/nav_acv.png) no-repeat center right;
}
*/

/* #pageDown
--------------------------- */
#pageDown {
	position: absolute;
	bottom:50px;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	overflow: hidden;
	z-index: 3;
	animation:pd_mv 2s 4s infinite normal;
}
#pageDown img {
	margin: 0 auto;
	width: auto;
	height: 40px;
	background: transparent url(../img/top/next_arw.svg) no-repeat center center;
	display: block;
	
}

@keyframes pd_mv {
0% { transform: translate(0,0);}
50% { transform: translate(0,40px);}
100% { transform: translate(0,0);}
}



/* ====== common  ====== */

/* ---- audio_bk ---- */
#audio_bk {
	position:fixed;
	top:0;
	left:0;
}

/* ---- upfade ---- */
.pre_upfd{
		opacity: 0;
	transform: translate(0,200px); 
	-webkit-transform: translate(0,200px);
		transition: .8s;
}

.upfd{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
		transition: .9s;
}

/* ---- gd ---- 

#gd {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-25%;
	margin-top:-25%;
	width:50%;
	height:50%;
	background: linear-gradient(-135deg, #E4A972, #9941D8);
	opacity:0.5;
}
*/


/* ====== stage01  ====== */

/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-image: url(../img/top/stage1_bg.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: repeat-x;
  height:100vh;
background-attachment:fixed;
position:relative;
z-index:0;
	animation: moveBg 600s infinite;
}

@keyframes moveBg {
    0%    { background-position: 0 0;}
    100%  { background-position: 1000% 0;}
}

#stage1bg_sp{
	width:0;
	height:0;
}



/* ---- logo ---- */
#logo {
	position:absolute;
	top: 50%;
	left: 50%;
	width:580px;
	height:auto;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#logo img {	margin-top:-100px;}


/* ====== stage02  ====== */

#stage2 .triangle01{
	width: 0;
	height: 0;
	border: 300px solid transparent;
	border-top: 300px solid #cceef6;
	border-left: 300px solid #cceef6;
	z-index:0;
}
#stage2 .triangle02{
	position:absolute;
	bottom:0;
	right:0;
	width: 0;
	height: 0;
	border:350px solid transparent;
	border-top:200px solid transparen;
	border-bottom:350px solid #e9e0ec;
	border-left:200px solid transparen;
	border-right:350px solid #e9e0ec;
	z-index:0;
}
#stage2 .triangle03{
	position:absolute;
	bottom:0;
	left:0;
	width: 0;
	height: 0;
	border:350px solid transparent;
	border-top:200px solid transparent;
	border-bottom:200px solid #f9eddc;
	border-left:350px solid #f9eddc;
	border-right:350px solid transparent;
	z-index:0;
}

#stage2 #introduction {
	position:absolute;
	top: 12%;
	left: 0;
	right: 0;
	margin:0 auto 30px;
	width:800px;
	z-index:1;
}
#stage2 #introduction .jp {
	font-size:26px;
	line-height:180%;
	margin-bottom:15px;
}

#stage2 #introduction .en {
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
}

/*#stage2 aside#leave {
	position:absolute;
	top: 35%;
	left: 0;
	right: 0;
	margin:0 auto;
	font-size:15px;
	z-index:1;
	width:600px;
	height:20px;
	line-height:20px;
	background-image: url(../img/top/stage2_bracketL.png), url(../img/top/stage2_bracketR.png);
	background-position:left, right;
	background-size:5px 20px;
	background-repeat:no-repeat;
	padding-left:10px;
}
*/

#stage2 .logomarc {
	position:absolute;
	top: 36%;
	left: 50%;
	margin-left:-54px;
	width:108px;
	height:32px;
	z-index:1;
	animation:mvlogo_nomal 3s infinite ease-out;
	cursor: pointer;
}

@keyframes mvlogo_nomal {
0% { transform: scale(0.8, 0.8); }
10% { transform: scale(1.2, 1.2); }
20% { transform: scale(1, 1); }
30% { transform: scale(1.1, 1.1); }
40% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

#stage2 .logomarc_mv {
		animation:mvlogo 7s 1 linear;
}
#stage2 .logomarc_mv img {
	animation:mvlogo_img 1s 7 linear;
	cursor: pointer;
}

@keyframes mvlogo_img {
    0%    { transform: rotate(0); }
    100%  { transform: rotate(360deg);  }
}
@keyframes mvlogo {
    0%    { transform: translate(0,0); }
	40%    { transform:translate(300px,400px); }
	80%    { transform:translate(-200px,-260px); }
	100%    { transform:translate(0,0); }
}

#stage2 dl {
	position:absolute;
	bottom:10%;
	left: 0;
	right: 0;
	margin:0 auto;
	width:800px;
	z-index:1;
}

#stage2 dl dt {
	display:block;
	margin:0 auto 30px;
	width:240px;
	overflow:hidden;
}

#stage2 dl dt span.job {
	display:block;
	font-family: 'Dancing Script', cursive;
	font-size:25px;
	float:left;
	padding-bottom:5px;
}
#stage2 dl dt span.sl {
	display:block;
	font-family: 'Dancing Script', cursive;
	font-size:25px;
	float:left;
	padding-left:20px;
}
#stage2 dl dt span.name {
	display:block;
	font-family: 'EB Garamond', serif;
	font-size:23px;
	float:left;
	padding-left:20px;
}

#stage2 dl dd.jp {
	clear:left;
	font-size:15px;
	line-height:180%;
	text-align:left;
	margin-bottom:10px;
}
#stage2 dl dd.en {
	font-size:13px;
	line-height:160%;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
}

#stage2 dl dd.link {
	font-size:13px;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
	margin-top: 10px;
}

#stage2 dl dd a:link,#stage2 dl dd a:visited{
	color: #00acee;
}

#stage2 dl dd.sv br {
	display:none;
}

/*
#stage2 aside#blog {
	position:absolute;
	top: 80%;
	left: 0;
	right: 0;
	margin:0 auto;
	font-size:21px;
	z-index:1;
	width:100px;
	background-image: url(../img/top/arr02.png);
	background-position:left, right;
	background-size:26px 7px;
	background-repeat:no-repeat;
	font-family: 'Cormorant Garamond', serif;
}
#stage2 aside#blog a:link { text-decoration:none; color: #000;}
#stage2 aside#blog a:visited { text-decoration:none; color: #000;}
#stage2 aside#blog a:active {text-decoration:none; color: #000;}
#stage2 aside#blog a:hover { text-decoration:none; color: #000;}
*/

/* ====== stage03  ====== */
#stage3 {background: url(../img/top/stage3_bg.jpg)  center center no-repeat; }

#stage3 .gdwrap {
	width:100%;
	height:100vh;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = 'rgba(115,216,240,0.8)', endColorstr = ' rgba(224,188,236,0.8)');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = 'rgba(115,216,240,0.8)', endColorstr = 	'rgba(224,188,236,0.8)')";
	background-image: -moz-linear-gradient(left, rgba(115,216,240,0.8) 0%, rgba(224,188,236,0.8) 50%,rgba(241,201,145,0.8) 100%);
	background-image: -ms-linear-gradient(left, rgba(115,216,240,0.8) 0%, rgba(224,188,236,0.8) 50%,rgba(241,201,145,0.8) 100%);
	background-image: -o-linear-gradient(left, rgba(115,216,240,0.8) 0%, rgba(224,188,236,0.8) 50%,rgba(241,201,145,0.8) 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(rgba(115,216,240,0.8)), to(rgba(224,188,236,0.8)));
	background-image: -webkit-linear-gradient(left, rgba(115,216,240,0.8) 0%, rgba(224,188,236,0.8) 50%,rgba(241,201,145,0.8) 100%);
	background-image: linear-gradient(left, rgba(115,216,240,0.8) 0%, rgba(224,188,236,0.8) 50%,rgba(241,201,145,0.8) 100%);
	transition-duration:1s;
	transition-timing-function:ease-in-out;
	transition-delay:0.7s;
}

.pre_fadein{opacity: 0;}
.fadein{opacity: 1.0;}

#stage3 .cont {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:100;
	width:500px;
	height:500px;
	position:absolute;
	top: -60px;
	left: 0;
	right: 0;
	bottom:0;
	margin:auto;

}

#stage3 h2 {
	margin-bottom:15px;
}

#stage3 #box {
	position:relative;
	width:500px;
	height:180px;
}

#stage3 #box a img.btn {
	width:400px; height:55px;
	position:absolute;
	top:0;
	left:40px;
}

#stage3 #box .ex img {
	position:absolute;
	top:20px;
	left:0;
	width:61px;
	height:70px;
}

#stage3 #box p.jp {
	font-size:16px;
	font-weight:500;
	line-height:160%;
	position:absolute;
	top:68px;
	left:55px;
	text-align:left;
}
#stage3 #box p.en {
	font-size:13px;
	font-weight:500;
	line-height:160%;
	position:absolute;
	top:130px;
	left:55px;
	text-align:left;
}
#stage3 p a{ text-decoration:nderline; color: #000;}
#stage3 p a:visited { text-decoration:nderline; color: #000;}
#stage3 p a:active { text-decoration:nderline; color: #000;}
#stage3 p a:hover { text-decoration:nderline; color: #000;}


/* ====== stage04  ====== */

.pre_mv{
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}
.mv{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}


#stage4 .cont {
	width:592px;
	height:592px;
	position:absolute;
	top:0;
	left:-45px;
	right:0;
	bottom:0;
	margin:auto;
	background: url(../img/top/stage4_bgpaper.png) no-repeat;
}



#stage4 h2 {
	margin:103px 0 0 45px;
}

#stage4 h2 img {
	width:276px;
	height:94px;
	margin-bottom:15px;
}

#stage4 h3 {
	font-size:19px;
	width:155px;
	margin:0 auto 20px;
	padding-left:40px;
}
#stage4 h3 span{
	font-family: 'Dancing Script', cursive;
	font-size:43px;
	padding-right:10px;
	margin-left:-10px;
}

#stage4 p.jp {
	font-size:15px;
	line-height:160%;
	padding-left:45px;
	width: 450px;
	margin: 0 auto 10px;
}
#stage4 p.en {
	font-size:13px;
	line-height:160%;
	padding-left:45px;
		width: 450px;
	margin: 0 auto;
}
#stage4 a.btn{ margin:33px auto 0; padding-left:45px; display:block; width:140px;}
#stage4 a.btn img {	width:139px; height:33px;}