@charset "utf-8";
/* CSS Document */


@font-face {
  font-family: 'JapanSans70';
  src: url('../font/rounded-mplus-1mn-medium'); /* IE9 Compat Modes */
  src: url('../font/rounded-mplus-1mn-medium.ttf?#iefix') format('truetype'), /* IE6-IE8 */
       url('../font/rounded-mplus-1mn-medium.ttf') format('truetype'), /* Modern Browsers */
       url('../font/rounded-mplus-1mn-medium.ttf')  format('truetype'); /* Safari, Android, iOS */
}


/* reset css
------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
/*	vertical-align: baseline; */
	background: transparent;
}


body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	margin-bottom: 0;
	border-collapse: collapse;
	border-spacing: 0;
}



/* common setting
------------------------------------------------------------------*/
.webkit body { font-size:85%;}
.opera body { font-size:85%;}
.win body { font-size:85%;}
.mac.safari body { font-size:75%;}
.gecko body { font-size:85%;}

/* margin class */
.mt0 {margin-top:0px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}

.mb0 {margin-bottom:0px !important;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}

.ml0 {margin-left:0px !important;}
.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.ml40 {margin-left:40px !important;}
.ml50 {margin-left:50px !important;}

.mr0 {margin-right:0px !important;}
.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}
.mr40 {margin-right:40px !important;}
.mr50 {margin-right:50px !important;}

/* padding class */
.pt0 {padding-top:0px !important;}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:10px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}

.pb0 {padding-bottom:0px !important;}
.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}
.pb60 {padding-bottom:60px !important;}

.pl0 {padding-left:0px !important;}
.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl20 {padding-left:20px !important;}
.pl30 {padding-left:30px !important;}
.pl40 {padding-left:40px !important;}
.pl50 {padding-left:50px !important;}

.pr0 {padding-right:0px !important;}
.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr20 {padding-right:20px !important;}
.pr30 {padding-right:30px !important;}
.pr40 {padding-right:40px !important;}
.pr50 {padding-right:50px !important;}

.clear{
	font-size:0% !important;
	margin:0px !important;
	padding:0px !important;
	clear:both !important;
	line-height:0% !important;
	height:0px !important;
	width:0px !important;
	float:none !important;
}

.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*¥*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}
a {
	text-decoration:underline;
	color:#00a5ff;
}
a:hover {
	text-decoration:underline;
	color:#00a5ff;
}
img {
	padding: 0px;
	margin:0;
	border: none;
	line-height: 0%;
/*	vertical-align: bottom; */
	vertical-align:none !important;
}

p {
	line-height:160%;
	margin-bottom:30px;
}


html {
	height:100%;
 }

body {
	-webkit-text-size-adjust: none;
  padding: 0;
  text-align: center;
  /* font-family: 'open sans'; */
  /*font-family: 'open sans', Arial, Helvetica, Verdana, sans-serif, 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic' ;*/
  position: relative;
  margin: 0;
  height:100%:
  /*-webkit-font-smoothing: antialiased;*/
	font-family: ‘Metrophobic’, Arial, serif;
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	min-width:900px;
	background:#fbcffc;
	position: relative;

}
.wrapper {
	height: 100% !important;
	margin: 0 auto;
}

.en { display:block; }
.fr { display:none; }
.jp {
	display:block;
	font-family: 'JapanSans70';
}

img.gbImgJp { display:block; }
img.gbImgJp { display:block; }

img.gbImgJp.on { display:none; }
img.gbImgJp.on { display:none; }

.spOnly { display:none;}

#head{
	width:100%;
	position: absolute;
	z-index:100;
}
#headInner {
	width:900px;
	margin: 0 auto;
	padding:20px 0;
}
#head .snsTool{
	float:left;
	-webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
}
#head .twitterTool{
	float:left;
	margin-right:10px;
}
#head .facebookTool{
	float:left;
}
#head .boxBtnOuter {
	float:right;
}
#head .boxBtnOuter ul{
	float:right;
}
#head .boxBtnOuter li{
	float:right;
}
#head .boxBtns01 {
	margin-bottom:16px;
}
#head .boxBtns01 li a {
	display:block;
	background:#481380;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    padding:10px 20px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    margin-left:10px;
    text-decoration:none;
    color:#fff;
}
#head .boxBtns01 li a:hover{
    text-decoration:none;
    color:#fff;
}

#head .boxBtns01 span {
	width:40px;
	-webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
}

#head .boxBtns01 .btn01 span {
	padding:3px 0 3px 28px;
	background:url(../img/icon_mail_s.png) 0 center no-repeat;
	background-size:24px 17px;
}
#head .boxBtns01 .btn02 span {
	padding:3px 0 3px 28px;
	background:url(../img/icon_press_s.png) 0 center no-repeat;
	background-size:22px 22px;
}
#head .boxBtns01 span em{
	font-style:normal;
}

#head .boxBtns02 {
	float:right;
	margin-right:10px;
	margin-top:2px;
	-webkit-transition: margin-top 0.3s;
    -moz-transition: margin 0.3s;
    transition: margin-top 0.3s;
}

#head .boxBtns02 li a{
	display:block;
	width:34px;
	height:34px;
	background:#b3b3b3;
	border-radius: 34px;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    margin-left:6px;
    text-decoration:none;
    color:#fff;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
}
#head .boxBtns02 li a.on{ background:#00a5ff; }
#head .boxBtns02 li a:hover{
    text-decoration:none;
    color:#fff;
}
#head .boxBtns02 span {
	display:block;
	padding:10px 0 0 0;
}


.cbp-af-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    height: 100px;
    overflow: hidden;
	background-color:none;
/*
	-webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
 */
}
.cbp-af-header .cbp-af-inner {
    width: 900px
    margin: 0 auto;
}
.cbp-af-header.cbp-af-header-shrink {
    height: 72px;
/*    	background-color: rgba(0,0,80,0.8);   */
}

.cbp-af-header.cbp-af-header-shrink #head .boxBtns01 li a {
    padding:4px 8px;
}
.cbp-af-header.cbp-af-header-shrink #head .boxBtns01 span {
	display:block;
	height:24px;
	width:24px;
	padding:0 0;
}
#head .boxBtns01 .btn02 span {
	background-position: 0 2px;
}
.cbp-af-header.cbp-af-header-shrink #head .boxBtns01 span em { display:none; }
.cbp-af-header.cbp-af-header-shrink #head .boxBtns02 {
	margin-top:0px;
}

.cbp-af-header.cbp-af-header-shrink #head .boxBtns02 li a{
	display:block;
	width:30px;
	height:30px;
	border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    font-size:12px;
}


#block01 {
	background:url(../img/bg_block01.png) center bottom no-repeat #000f21;
	position: relative;
	margin-bottom:50px;
}
#block01 .boxInner{
	width:900px;
	height:400px;
	position: absolute;
	top:42%;
	left:50%;
	margin-top:-200px;
	margin-left:-450px;
	text-align:center;
}


.award {
	position: absolute;
	top:10px;
	left:-24px;
	padding:0px 0;
	margin:0 auto;
	text-align:left;
}
.award li{
	display:block;
	margin:0 0 20px;
	line-height:0%;
}



#block01 h1{
	width:320px;
	height:302px;
	text-indent:-9999px;
	background:url(../img/logo.png) 0 0 no-repeat;
	margin:0 auto 40px;
}
#block01 h2{
	color:#fff;
	font-weight:bold;
	font-size:18px;
	line-height:160%;
	margin-bottom:10px;
	text-shadow: 0px 0px 4px #000;
}
#block01 h2 .jp{
	font-weight:normal;
}
#block01 h3{
	color:#00a5ff;
	font-weight:bold;
	font-size:30px;
	line-height:140%;
	text-shadow: 0px 0px 4px #000;
}
#block01 h3 .jp{
	font-weight:normal;
}


.boxCont {
	width:900px;
	margin:0 auto;
	padding:20px 0 100px;
	margin-bottom:50px;
	color:#fff;
	text-align:left;
	border-bottom:4px dotted #555593;
}
#block04.boxCont { padding-bottom:70px;}
#block05.boxCont {
	border-bottom:none;
	padding-bottom:50px;
}



.boxCont h2{
	font-size:32px;
	margin-bottom:20px;
	line-height:160%;
/* 	background:url(../img/icon_h2.png) 0 center no-repeat; */
	background-size:40px 40px;
/* 	padding:8px 0 8px 60px; */
}
.boxCont h2 .jp{
	font-weight:normal;
}

.boxCont p {
	font-size:14px;
	line-height:180%;
}

.movie{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.boxSlide {
	width:600px;
	height:900px;
	background:url(../img/iphone.png) 0 0 no-repeat;
	overflow:hidden;
}
#block03 .bx-wrapper {
	top:50px;
	left:18px;
}

.boxNews {
	width:100% !important;
    height:300px;
    overflow:auto;
    overflow-y:scroll;
    overflow-x:hidden;
}
.boxNews dl:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.boxNews dl {
	display:block;
	min-height: 1px; /*IE6、7対策*/
	width:100%;
	margin-bottom:12px;
	padding-bottom:12px;
	border-bottom:1px solid #29296c;
	clear:left;
	line-height:160%;
}
* .boxNews dl {
	height: 1px;
	/*¥*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
	font-size:14px;
	line-height:180%;
}
.boxNews dt {
	display:block;
	float:left;
	width:100px;
	margin-right:20px;
	background:#00a5ff;
	color:#fff;
	font-size:14px;
	padding:1px 2px;
	text-align:center;
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
/*     font-weight:bold; */
}
.boxNews dd {
	clear:right;
	display:block;
	float:left;
	width:750px;
}




#block05 {
	padding-bottom:120px;
}
#facebookLikeBox {
	width:425px;
	float:left;
}
#boxTwitterOuter {
	width:425px;
	float:right;
}
.boxFacebook {
	width:425px;
	background:#fff;
	float:none;
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    height:500px;
	margin-bottom:20px;
}
.boxTwitter {
	/*
width:425px;
	height:500px;
	background:#fff;
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
 */
	overflow:hidden;
}

.btnSns {
	display:block;
	margin-top:20px;
}

.btnSns a{
	display:block;
	border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    color:#fff;
    font-size:20px;
    text-align:center;
    padding:20px;
    font-weight:bold;
    text-decoration: none;
}

.btnTw a{ background:#55acee; }
.btnFb a{ background:#3B5998; }

.btnDownLoad {
	margin-top:440px;
  display: flex;
  justify-content: center;
}

.btnDownLoad a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 89px;
  margin: 0 10px;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.btnDownLoad .btn3ds a {
  background: #fff;
}

.btnDownLoad span {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 16px;
  text-shadow: 0px 0px 4px #000;
}

#block06 .howToStep {
	width:274px;
	float:left;
	margin-right:39px;
	margin-bottom:-50px;
}
#block06 .step03 {
	margin-right:0;
}
#block06 .howToStep .howToImg{
	width:274px;
	height:274px;
	border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-bottom:15px;
    overflow:hidden;
}

#block06 .howToStep .howToText {
	padding:0 16px;
}

#block08 .boxSoundTrack{
	float:left;
}

#block08 .textSoundTrack{
	float:right;
	width:500px;
}

#block08 h5{
	font-size:20px;
	color:#fff;
	font-weight:bold;
	line-height:140%;
	margin-bottom:20px;
}

#block08 .btnBC {
	display:block;
}


#footer {
	/* background:#00a5ff; */
	background:#4d4d4d;
	color:#fff;
	padding:80px 0 0;
	border-top:1px solid #686868;

}
#footer h2 {
	font-size:30px;
	margin-bottom:30px;
}

#footer ul.btn{
	width:700px;
	margin:0 auto 80px;
}

#footer ul.btn li a{
	/*display:block;*/
	width:300px;
	background:#481380;
	color:#fff;
	padding:20px;
	text-align:center;
	font-size:24px;
	text-decoration:none;
	font-weight:bold;
	border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
}
#footer ul.btn li.btn01 a{
	/*float:left;*/
}
#footer ul.btn li.btn02 a{
	float:right;
}

#footer ul.btn li.btn01 a span{
	padding:3px 0 3px 50px;
	background:url(../img/icon_mail_l.png) 0 center no-repeat;
	background-size:44px 30px;
}

#footer ul.btn li.btn02 a span{
	padding:3px 0 3px 46px;
	background:url(../img/icon_press_l.png) 0 center no-repeat;
	background-size:40px 40px;
}

span.br { display:none;}
span.brHp { display:block;}


.boxStaffOuter {
	border-top:1px solid #686868;
/* 	border-bottom:1px solid #3a3a3a; */
	padding:40px 0 50px;
	margin-bottom:0;
	box-shadow: 0px -1px 0 #3a3a3a;
	-moz-box-shadow: 0px -1px 0 #3a3a3a;
	-webkit-box-shadow: 0px -1px 0 #3a3a3a;
}
.boxStaff {
	width:900px;
	margin:0 auto;
	color:#fff;
	text-align:center;
}
.boxStaff h2{
	line-height:120%;
	text-align:center;
	font-size:22px !important;
}
.boxStaff h2 .jp{
	font-weight:normal;
	line-height:160%;
}

.boxStaff .member {
	display:inline-block;
	width:190px;
	margin:0 10px;
	text-align:center;
	vertical-align:top;
}
.boxStaff .pic{
	display:block;
	width:100px;
	height:100px;
	border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    margin:0 auto 10px;
    text-indent:-9999px;
}
.boxStaff .pic.mem01{ background:url(../img/pic_staff_hiraoka.jpg) top center no-repeat; background-size: 100px 100px; }
.boxStaff .pic.mem02{ background:url(../img/pic_staff_watanabe.jpg) top center no-repeat; background-size: 100px 100px; }
.boxStaff .pic.mem03{ background:url(../img/pic_staff_fujita.jpg) top center no-repeat; background-size: 100px 100px; }

.boxStaff .name a{
	display:inline-block;
	font-size:14px;
	font-weight:bold;
	margin-bottom:6px;
	background:url(../img/tw.png) 0 center no-repeat;
	background-size:16px 16px;
	padding:4px 0 4px 20px;
	text-decoration:underline;
	color:#fff;
}
.boxStaff .part{
	display:block;
	font-size:12px;
	font-weight:bold;
}

.boxStaff .name a .jp, .boxStaff .part .jp{ font-weight:normal;}

#footer .copy{
	text-align:center;
	background:#7f78d2;
	display:block;
	padding:20px 0 ;
	font-size:12px;
	border-top:1px solid #2c2c2c;
}








/* フランス語テキスト準備中 */
.fr { display:none; }







/* scrollbar */

.jspContainer
{
	overflow: hidden;
	position: relative;
	width:100% !important;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	background: none;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #0d0d65;
	position: relative;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.jspDrag
{
	background: #555593;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}


#gallery {
	padding-top:0;
	overflow:hidden;
}
#gallery ul {
	width:920px;
}
#gallery li {
	display:block;
	width:134px;
	height:134px;
	overflow:hidden;
	margin:0 19px 19px 0;
	float:left;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#gallery li img{
	display:block;
	width:150%;
	height:auto;
	margin-left:-25%;
	margin-top:-25%;
}
#gallery li.horizontally img{
	width:auto;
	height:150%;
}
#gallery li.defImage img{
	width:100%;
	height:auto;
	margin-left:0;
	margin-top:0;
}