@charset "UTF-8";

/* screens smaller than 599---------------------------------------------------------- */
@media only screen and (max-width:599px) {

body{min-width:300px;}

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

#jp_container_1{
    width:25px;
	position:fixed;
	top:10px;
	right:7px;
}

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

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

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

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

/* #pageNav
--------------------------- */
#pageNav {
	position: fixed;
	top:15px;
	right:0;
	left:10px;
	width:100px;
	z-index: 2;
	margin-top:0;
}
#pageNav ul {
	width:100px;
	overflow:hidden;
}
#pageNav ul li {
	padding-bottom:0;
	padding-right:12px;
	float:left;
}


/* #pageDown
--------------------------- */
#pageDown {
	bottom:20px;
	height:40px;
}

#pageDown a {
	width: auto;
	height: 40px;
}

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

/* 背景
--------------------------- */
#stage1 {
  width: 100%;
  height: 100%;
  background-image: url(../img/top/stage1_bg.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat:repeat;
position:relative;
z-index:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
	animation: moveBg 300s infinite linear;
}

@keyframes moveBg {
    0%    { background-position: -100% 0;}
    100%  { background-position: 1000% 0;}
}
	
#stage2 {
	background:#fff url(../img/top/stage2_bglogo.png) top right no-repeat;
	background-size: 80%;

}
#stage3 {
  width: 100%;
  height: 100%;
  background-image: url(../img/top/stage3_bg.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
position:relative;
z-index:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
	 }
#stage4 {background-image:url(../img/top/stage4_bg.png);
	 }


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

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

#particles-js{
 display: none;
}


/* ---- logo ---- */

#logo {
	width:70%;
	height:auto;
}


#logo img {	margin-top:0;}

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

#stage2 .triangle01{display:none;}
#stage2 .triangle02{display:none;}
#stage2 .triangle03{display:none;}


#stage2 #introduction {
	position:static;
	margin:0 auto 90px;
	width:80%;
	padding-top: 30px;
}
#stage2 #introduction .jp {
	font-size:19px;
	line-height:150%;
	margin-bottom:5px;
}
#stage2 #introduction .jp br { display:none;}

#stage2 #introduction .en {
	font-size:12px;
	line-height:150%;
}

#stage2 .logomarc {
	position:absolute;
	top: 0;
	left: 50%;
	margin-left: -45px;
	width:90px;
	height:350px;
	z-index:1;
	animation:mvlogo_nomal 3s infinite ease-out;
}
#stage2 .logomarc img {
	width:90px;
	height:auto;
	position:absolute;
	top: 170px;
	left: 50%;
	margin-left: -45px;
}

@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;
}

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

#stage2 dl {
		position:static;
	margin:0 auto;
	width:80%;
	z-index:1;
}

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

#stage2 dl dt span.job {
	font-size:20px;
	margin-left:0;
}
#stage2 dl dt span.sl {
	padding-left:10px;
}
#stage2 dl dt span.name {
	font-size:19px;
	padding-left:10px;
}

#stage2 dl dd.jp {
	clear:left;
	font-size:13px;
	line-height:170%;
	text-align:left;
	margin-bottom:10px;
}

#stage2 dl dd.jp br { display:none;}
#stage2 dl dd.en {
	font-size:13px;
	line-height:160%;
	text-align:left;
	font-family: 'Open Sans', sans-serif;
}
#stage2 dl dd.sv {
	line-height:180%;
	padding-bottom: 50px;
}
#stage2 dl dd.sv br {
	display:block;
}
	
/* ====== stage03  ====== */

#stage3 .gdwrap {
	width:100%;
	height:100vh;
}

#stage3 .cont {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:100;
	width:80%;
	height:auto;
	position:static;
	margin:0 auto;

}

#stage3 h2 {
	margin-bottom:15px;
	padding-top: 20%;
}
	#stage3 h2 img {width: 100%; height: auto;}

#stage3 #box {
	position:relative;
	width:100%;
	height:auto;
}

#stage3 #box a img.btn {
	width:100%; height:auto;
	position:static;
}

#stage3 #box .ex img {
	position:absolute;
	top:20px;
	left:-25px;
	width:40px;
	height:auto;
}
	
#stage3 #box p br {display: none;}
#stage3 #box p.jp {
	width: 90%;
	margin: 0 auto;
	font-size:14px;
	font-weight:500;
	line-height:160%;
	position:static;
	padding-top: 10px;
	text-align:left;
}
#stage3 #box p.en {
		width: 90%;
	margin: 0 auto;
	font-size:13px;
	font-weight:500;
	line-height:160%;
	position:static;
	padding-top: 10px;
	text-align:left;
}
	

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

#stage4 .cont {
	width:80%;
	height:auto;
	position:static;
	margin:0 auto;
	background:none;
}



#stage4 h2 {
	margin:0;
	padding-top:15%;
}

#stage4 h2 img {
	width:90%;
	height:auto;
	margin-bottom:15px;
}

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

#stage4 p.jp {
	font-size:15px;
	line-height:160%;
	padding-left:0;
	margin-bottom:5px;
	text-align: left;
	width:auto;
}
	
#stage4 p.en {
	font-size:13px;
	line-height:160%;
	padding-left:0;
	text-align: left;
	width:auto;
}
#stage4 p.jp br,#stage4 p.en br {display: none;}
#stage4 a.btn{ margin-top:26px; padding-left:0; display:block;}
#stage4 a.btn img {	width:139px; height:33px;}
	
	

/*contact*/
/*------------------------------------------------------------------------------*/

.contact .txt { margin-bottom:20px;}
.contact .attention { margin-bottom:10px; font-size:90%;}
.contact .attention  span { color:#FF7373;}

#form_wrap dl { display:block; width:100%; overflow:hidden; margin-bottom:15px;}

#form_wrap dl dt {
	float:none;
	width:100%;
}
#form_wrap dd.kind br{
	display:block;
}
#form_wrap dd.box01 input{
	width:95%;
	height:30px;
}
#form_wrap dd.box02 textarea{
	width:95%;
	height:200px;
}
#form_wrap .btn { margin-top:25px; margin-left:15%;}
#form_wrap .btn input { width:200px; height:30px;}


/*confirm*/

.confirm .su {margin-bottom:15px;}
.confirm .bu {float:left;}

}