@charset "utf-8";
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	overflow-y: scroll;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
input, textarea {
	margin: 0;
	padding: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
a:focus {
	outline: none;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}
.both {
	clear: both;
}
.inline_block {
	display: inline-block;
 *display: inline;
 *zoom: 1;
}
body {
	background: #1d2b54; /* Old browsers */
	background: -moz-linear-gradient(left, #1d2b54 0%, #45484d 34%, #603063 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #1d2b54 0%, #45484d 34%, #603063 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #210747 0%, #000 50%, #591475 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.circuit {
    background-image: url(../images/kairo-bg800.png);
	background-size:1300px;
}
section {
	width: 100%;
	max-width: 800px;
	padding-bottom:20%;
	margin: auto;
	/*-moz-box-shadow: 0px 0px 100px 50px rgba(255,255,255,0.60);
	-webkit-box-shadow: 0px 0px 100px 50px rgba(255,255,255,0.60);
	box-shadow: 0px 0px 100px 50px rgba(255,255,255,0.60);*/
	position: relative;
	overflow: hidden;
}
img {
	display: block;
	max-width: 100%;
}
a {
	display: block;
}
a:link:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
div.dlnavi {
	background: #dfe2ed;
	position: fixed;
	bottom: 0;
	z-index: 101;
	width: 100%;
	max-width: 800px;
}
div.dlnavi .lef {
	width: 42%;
	float: left;
	padding: 2%;
	padding-right: 1%;
	box-sizing: border-box;
}
div.dlnavi .rig {
	width: 42%;
	float: left;
	padding: 2%;
	padding-left: 1%;
	box-sizing: border-box;
}
div.dlnavi .end {
	width: 16%;
	float: left;
	box-sizing: border-box;
	background: #000000;
	display: block;
	position: relative;
	height: 0;
	padding-top: 16%;
	overflow: hidden;
}
div.dlnavi .end img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	display: block;
	width: 45%;
	height: auto;
}
div.dl {
	position: absolute;
	z-index: 5;
	padding-left: 7%;
	padding-right: 7%;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 640px) {
div.dl {
	margin-top: -40px;
}
}

@media screen and (max-width: 500px) {
div.dl {
	margin-top: -27px;
}
}
div.dl a {
	display: block;
	width: 45%;
	margin-left: 2.5%;
	margin-right: 2.5%;
	float: left;
}
.moviethumb {
	cursor: pointer;
}
.moviebg {
	position: fixed;
	background-color: rgba(0,0,0,0.50);
	width: 100vw;
	height: 100vh;
	top: 0;
	z-index: 101;
	left: 0;
	display: none;
}
.moviebox {
	display: none;
}
.moviebox iframe {
	position: fixed;
	top: -50%;
	bottom: -50%;
	left: -50%;
	right: -50%;
	margin: auto;
	max-width: 88%;
	z-index: 102;
	max-height: 49.5vw;
}
.pvmoviebox {
	position: relative;
}
.pvmoviebox > img {
	position: relative;
	z-index: 99;
}
.pvmoviebox a {
	cursor: pointer;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	position: absolute;
	z-index: 100;
	bottom: 5%;
}
.pvmoviebox a img {
	width: 100%;
	max-width: none;
}
.download {
	position: relative;
}
.download a {
	position: absolute;
	width: 42%;
	left: 7%;
	top: 37%;
}
.download a:last-child {
	top: 62%;
}
.campaignbtnarea {
	position: relative;
}
.campaignbtnarea a {
	position: absolute;
	width: 46%;
	left: 19%;
	top: 41%;
}
.campaignbtnarea a:last-child {
	top: 76%;
}
.bgimagearea {
	top: 0;
	z-index: 1;
}
.share_area {
	position: relative;
}
.snsbtn {
	width: 80%;
	margin: auto;
	max-width: 190px;
}
.snsbtn li {
	float: left;
	width: 33.3%;
	padding-left: 3%;
	padding-right: 3%;
	box-sizing: border-box;
}
.officialsns {
	position: absolute;
	top: 60%;
	width: 89%;
	left: 0;
	right: 0;
	margin: auto;
}
.officialsns li {
	width: 50%;
	float: left;
	padding: 0 1%;
	margin-bottom: 3%;
	box-sizing: border-box;
}
.footer1 {
	background-color: #fff;
	padding: 3% 0;
}
.footer1 ul {
	width: 90%;
	margin: auto;
}
.footer2 {
	background-color: #363636;
	padding: 8% 0;
}
.footer2 ul {
	max-width: 720px;
	width: 90%;
	margin: auto;
}
.footer2 li{
	margin-bottom: 4%
}
.footer2 a {
	width: 92%;
}
.footer2 li.official_btn{
	margin-bottom:0;
	margin:auto;
	float:none;
	margin-top:4%;
}
.footer2 li.official_btn a{
      border: solid 2px #fff;
    color: #fff;
    display: block;
    padding: 5% 0;
    text-align: center;
    font-size: 4vw;
    text-decoration: none;
}
.footer3 {
	padding: 8% 0;
	background-color: #000;
}
.footer3 a {
	width: 50%;
}
.footer3 a img {
	width: 92%;
	display: block;
	margin: auto;
}
footer ul li {
	width: 50%;
	float: left;
}
footer ul li a {
	margin: auto;
	display: block;
}
footer ul li a img {
	max-width: 100%;
	margin: auto;
	display: block;
}
footer .corp {
	max-width: 640px;
	width: 80%;
	text-align: center;
	margin: auto;
}
footer div a {
	display: inline-block;/*width: 46%;*/
}
.copyright {
	width: 29%;
	margin: auto;
}
.copyright img{
	margin:auto;
}
.mainvisual{
	padding-bottom:0;
}
.mainvisual article {
	background-size: contain;
	position: relative;
}
.sidenavi1{
      position: fixed;
    right: 0;
    width: 10%;
    z-index: 100;
    top: 62vw;
    margin-top: -37vw;
	z-index:21;
}
.sidenavi2{
      position: fixed;
    right: 0;
    width: 10%;
    z-index: 100;
    top: 102vw;
    margin-top: -37vw;
	z-index:20;
}
.maintitle img{
	width:90%;
	margin:auto;
}
.mainimg{
	position:relative;
	top:auto;
}

.topbtn{
      margin-bottom: 5%;
}
.topbtn li{
	float:left;
	width:50%;
	display:block;
}

.main_logo {
	position: absolute;
	right: 4%;
	top: 2%;
	width: 27%;
}
.main_title img{
	width:90%;
	margin:auto;
}
.mainimg {
	margin: auto;
	z-index: 1;
}
.mainimg1 {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: none;
}
.mainimg2 {
	position: absolute;
	z-index: 11;
	-webkit-animation: move7 0.5s ease-in-out infinite normal;
	animation: move7 1.5s ease-in-out infinite normal;
	left: -50%;
	right: -50%;
	top: -50%;
	bottom: -50%;
	margin: auto;
	max-width: none;
}
@-webkit-keyframes move7 {
0% {
opacity:0.3;
width:100%;
}
100% {
opacity:0.1;
width:110%;
}
}
@keyframes move7 {
0% {
opacity:0.3;
width:100%;
}
100% {
opacity:0.1;
width:110%;
}
}
.effect1 {
	position: absolute;
	z-index: 12;
	top: 11%;
	left: 4%;
	max-width: none;
	width: 19%;
	-webkit-animation: move1 1s ease-in-out infinite alternate;
	animation: move1 1s ease-in-out infinite alternate;
}
@-webkit-keyframes move1 {
0% {
top: 11%;
opacity:0.8;
}
100% {
top: 15%;
opacity:1
}
}
@keyframes move1 {
0% {
top: 11%;
opacity:0.8;
}
100% {
top: 15%;
opacity:1
}
}
.effect2 {
	position: absolute;
	z-index: 12;
	top: -3%;
	left: 39%;
	width: 19%;
	max-width: none;
	-webkit-animation: move2 1.3s ease-in-out infinite alternate;
	animation: move2 1.3s ease-in-out infinite alternate;
}
@-webkit-keyframes move2 {
0% {
top: -5%;
opacity:0.8;
}
100% {
top: -1%;
opacity:1
}
}
@keyframes move2 {
0% {
top: -5%;
opacity:0.8;
}
100% {
top: -1%;
opacity:1
}
}
.effect3 {
	position: absolute;
	z-index: 12;
	top: 4%;
	left: 67%;
	width: 23%;
	max-width: none;
	-webkit-animation: move3 2s ease-in-out infinite alternate;
	animation: move3 2s ease-in-out infinite alternate;
}
@-webkit-keyframes move3 {
0% {
top: 1%;
opacity:0.8;
}
100% {
top: 7%;
opacity:1;
}
}
@keyframes move3 {
0% {
top: 1%;
opacity:0.8;
}
100% {
top: 7%;
opacity:1;
}
}
.effect4 {
	position: absolute;
	bottom: -1%;
	z-index: 10;
	-webkit-animation: move4 2s ease-in-out infinite alternate;
	animation: move4 2s ease-in-out infinite alternate;
	width: 100%;
	max-width: none;
}
@-webkit-keyframes move4 {
0% {
opacity:0.6;
}
100% {
opacity:1;
}
}
@keyframes move4 {
0% {
opacity:0.6;
}
100% {
opacity:1;
}
}
.effect5 {
	position: absolute;
	bottom: 2%;
	z-index: 9;
	width: 100%;
	max-width: none;
}
.effect6 {
	position: absolute;
	bottom: 9%;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 11;
	-webkit-animation: move6 0.5s ease-in-out infinite alternate;
	animation: move6 0.5s ease-in-out infinite alternate;
	width: 100%;
	max-width: none;
}
@-webkit-keyframes move6 {
 0% {
opacity:0.6;
}
 100% {
opacity:1;
}
}
@keyframes move6 {
 0% {
opacity:0.7;
}
 33% {
opacity:0.8;
}
 66% {
opacity:0.7;
}
 100% {
opacity:1;
}
}
.main_title {
	opacity: 0;
	transition: 0.5s 0.3s;
}
.mainimg {
	opacity: 0;
	transition: 0.5s 0.8s;
}
.main_text1 {
	opacity: 0;
	transition: 0.3s 1.5s;
}
.main_text2 {
	opacity: 0;
	transition: 0.3s 1.5s;
} .main_logo {
	opacity: 0;
	transition: 0.3s 1.5s;
	z-index: 10;
}
.main_title.show {
	opacity: 1;
}
.mainimg.show {
	opacity: 1;
}
.main_text1.show {
	opacity: 1;
}
.main_text2.show {
	opacity: 1;
}
.main_logo.show {
	opacity: 1;
}

.promotion_movie {
	margin:auto;
	margin-bottom: 10%;
	opacity: 0;
	width:90%;
}
.promotion_movie.show {
	opacity: 1;
	transition: 0.3s;
}
.campaign1 {
	margin-bottom: 10%;
}
.campaign1 img{
	margin:auto;
	display:block;
	width:90%;
}
.sugo5{
	margin-top:10%;
}
.sugo5 img{
	width:90%;
	margin:auto;
}
.sugo5 img.full{
	width:100%;
}
.startdash{
	margin:auto;
	margin-top:10%;
	margin-bottom:5%;
	width:90%;
	display:block;
	background-color:#fff;
}
.taidan{
	margin:auto;
	margin-top:10%;
	margin-bottom:10%;
	width:90%;
	display:block;
	background-color:#fff;
}
.webcm{
	background-color:#fff;
	margin:auto;
	margin-bottom:10%;
	width:90%;
}
.moviearea{
	position:relative;
	width:100%;
	height:0;
padding-bottom: 56.25%;  
}
.webcminner{
	width:89%;
	margin:auto;
	padding-bottom:10%;
}
.webcminner img{
	margin-top:10%;
	margin-bottom:4%;
}
.moviearea iframe{
      position: absolute;
    left: 0;
    right: 0;
    top: -50%;
    bottom: -50%;
    width: 100%;
    margin: auto;
}
.moviearea:last-child img{
	margin:0;
}
.sugojobtitle{
	margin-bottom:10%;
}

.startdash p{
      font-size: 3vw;
	width:90%;
	margin:auto;
    padding-bottom: 7%;
}
.startdash a{
	display:inline-block;
}
.startdash a:visited, .startdash a:hover, .startdash a:link {
	color: #088bfa;
	text-decoration: underline;
}
.startdash a:hover {
	text-decoration: none;
}
.taidan{
	padding-bottom:7%;
}
.taidan a{
	width:90%;
	margin:auto;
}
.rtbtnarea {
	position: relative;
}
.rtbtnarea a {
	position: absolute;
	margin: auto;
	bottom: 12%;
	left: 0;
	right: 0;
	display: block;
	width: 80%;
}
.storebtnarea {
	position: relative;
}
.storebtnarea .dl {
	margin-top: auto;
	bottom: 10%;
}
.sugoi1, .sugoi2, .sugoi3 {
	position: relative;
	padding: 10% 0;
}
.textimg {
	position: absolute;
	bottom: 84.6%;
	width: 90%;
	transition: 0.1s 0.2s;/* bottom: 83%; */
}
.bottomimg {
	width: 65%;
	position: absolute;
	top: 84.7%;
	transition: 0.1s 0.2s;
}
.sugoi1 .main, .sugoi2 .main, .sugoi3 .main {
	opacity: 0;
	transition: 0.3s;
}
.sugoi1.show .main, .sugoi2.show .main, .sugoi3.show .main {
	opacity: 1;
}
.sugoi1 .textimg, .sugoi3 .textimg {
	left: 100%;
	opacity: 0;
}
.sugoi2 .textimg {
	right: 100%;
	opacity: 0;
}
.sugoi1.show .textimg, .sugoi3.show .textimg {
	left: 0;
	opacity: 1;
}
.sugoi2.show .textimg {
	right: 0;
	opacity: 1;
}
.sugoi1 .bottomimg, .sugoi3 .bottomimg {
	right: 100%;
	opacity: 0;
}
.sugoi2 .bottomimg {
	left: 100%;
	opacity: 0;
}
.sugoi1.show .bottomimg, .sugoi3.show .bottomimg {
	right: 0;
	opacity: 1;
}
.sugoi2.show .bottomimg {
	left: 0;
	opacity: 1;
}
.campaignarea {
	opacity: 0;
	transition: 0.3s;
}
.campaignarea.show {
	opacity: 1;
}
.campaign_textarea {
	background-image: url(../images/campaignareabg.png);
	background-size: contain;
	padding: 2% 10%;
	font-size: 2.5vw;
}
.campaign_textarea a {
	display: inline-block;
	color: #088bfa;
	text-decoration: underline;
}
.campaign_textarea a:visited, .campaign_textarea a:hover, .campaign_textarea a:link {
	color: #088bfa;
	text-decoration: underline;
}
.campaign_textarea a:hover {
	text-decoration: none;
}

@media screen and (min-width: 641px) {
.snsbtn li {
	width: 50%;
}
.snsbtn li a img {
	margin: auto;
}
.snsbtn li:last-child {
	display: none;
}
	.sidenavi1 {
      width: 60px;
    top: 50vh;
    margin-top: -240px;
}
.sidenavi2 {
      width: 60px;
    top: 50vh;
    margin-top: 0px;
}
}
@media screen and (min-width: 801px) {
section {
	padding-bottom: 160px;
}
.footer1 {
	padding: 25px;
}
.footer2 {
	padding-bottom: 64px 0;
}
.footer3 {
	padding-bottom: 64px 0;
}
.startdash p {
	font-size: 20px;
}
.footer2 li.official_btn a {
    font-size: 34px;
}
}

@media screen and (min-width: 1001px) {
section.mainvisual {
	padding-bottom: 0px;
}
.mainvisual {
	max-width: none;
}
.mainimg {
	top: 8%;
	right: 0;
	width: 70%;
	position:absolute;
}
.main_logo {
	right: 4%;
	top: 1%;
	width: 20%;
}
.main_title {
      position: absolute;
    margin: 0;
    width: 48%;
    top: 15%;
    left: 2%;
    right: 0;
    z-index: 10;
}
.mainvisual article {
	max-height: none;
      height: 57vw;
}
}
@media screen and (max-width: 1000px) {
.main_title img{
	width:90%;
	margin:auto;
}
}

@media screen and (min-width: 1300px) {
.circuit{
background-size:contain;
}
}