@charset "utf-8";

@import url("reset.css");
@import url("responsive.gs.24col.css");
/*slick*/
@import url("slick.css");
@import url("slick-theme.css");
/*modal*/
@import url("magnific-popup.css");
/*base*/
@import url("common.css");
@import url("frame.css?200501");



/*menu-----------------------------------------------------------------*/
@media ( max-width : 959px ) {
header .hm{
background-color:transparent;
box-shadow:none;
}

header h1{
-webkit-transform: translateY(-280px);
transform: translateY(-230px);
-webkit-transition:-webkit-transform 0.3s ease;
transition: transform 0.3s ease;
-webkit-backface-visibility:hidden;
overflow:hidden;
}
header #nav-toggle:checked~.hm h1 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

/*ttl-----------------------------------------------------------------*/
.ttl {
margin-top:-45px;
background:url(../img/index/ttl_bg.jpg) repeat-x center center;
background-size: cover;
position: relative;
height: 490px;
padding-top:40px;
}
.ttl .inner {
position: relative;
}
.ttl .copy{
width:231.5px;
margin:0 auto;
height:156px;
text-indent:-9999px;
background:url(../img/index/copy.png) no-repeat center top, url(../img/common/logo.png) no-repeat center bottom;
background-size:231.5px auto,227.5px auto;
}
.ttl .btn_pv{
width:178px;
position:absolute;
right:10px;
bottom:180px;
}
.ttl .bnrs .bnr2{
padding: 0 10px;
}

@media ( max-width : 767px ) {
.ttl{
height: auto;
padding-bottom: 20px;
}
.ttl .copy{
height:53.6vw;
width: 72.345vw;
background:url(../img/index/copy.png) no-repeat center top, url(../img/common/logo.png) no-repeat center bottom;
background-size:100% auto,98.2% auto;
}
.ttl .btn_pv{
width:89px;
margin:20px auto 0;
position:inherit;
right:auto;
left:auto;
bottom:auto;
}
.ttl .bnrs{
margin:7vw auto 0;
}
.ttl .bnrs .bnr2{
}
.ttl .bnrs .rb-box{
width: calc(100vw - 20px);
}
}
@media ( min-width : 960px ) {
.ttl{
margin-top:0;
}
}
@media ( min-width : 768px ) {
.ttl{
height:640px;
}
.ttl .copy{
width:463px;
height:325px;
background:url(../img/index/copy.png) no-repeat center top, url(../img/common/logo.png) no-repeat center bottom;
background-size:366px auto,455px auto;
}
.ttl .bnrs{
margin:0;
position:absolute;
width:100%;
bottom:30px;
}
}

/*store_link-------------------------------------------------------------------*/
.store_link_top{
width: auto;
background: url(../img/index/regist_bg.png) repeat center top #FFE539;
position: relative;
z-index: 1;
}
.store_link_top > div{
max-width: 960px;
height: 132px;
margin: 0 auto;
padding: 0 10px;
}
.store_link_top p{
display:none;
}
.store_link_top ul{
display: flex;
display: -webkit-flex; /**iPad用**/
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.store_link_top ul li.app-icon{
height: 100%;
width: 45%;
display: flex;
align-items: center;
background: url(../img/common/bg_store_link_transmission_s.png?191102) no-repeat right center;
background-size: 62.2% auto;
margin: 1.703% 0;
}
.store_link_top ul li.app-icon img{
max-width: 33.25%;
width: 33.25%;
border-radius: 20%;
}
.store_link_top ul li[class^="app-link"]{
width: 45%;
margin-left:2%;
}

@media ( max-width : 960px ) {
.store_link_top > div{
height:auto;
margin:0 10px;
padding:0;
}
.store_link_top ul li[class^="app-link"] {
margin-right:0;
}
.store_link_top ul li a{
position:relative;
top:3%;
}
}

@media ( max-width : 767px ) {
.store_link_top > div{
width: calc(100% - 20px);
margin: auto;
}
.store_link_top ul{
width: auto;
margin: 0 auto;
display: flex;
display: -webkit-flex; /**iPad?**/
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;
background: url(../img/common/bg_store_link_transmission_l.png?191102) no-repeat right top 15%;
background-size: 80.5% auto;
}
.store_link_top ul li.app-icon,
.store_link_top ul li[class^="app-link"]{
margin: 2.5% 0;
}
.store_link_top ul li.app-icon{
width: 19%;
display: flex;
align-items: center;
background-image: none;
margin-right: 1%;
}
.store_link_top ul li.app-icon img{
max-width: 100%;
width: 100%;
}
.store_link_top ul li[class^="app-link"]{
width: 45%;
margin-left: 2%;
}
}

/*rolling banner-----------------------------------------------------------------*/
.rb-box {
width:310px;
margin:0 auto 10px ;
}
@media ( min-width : 768px ) {
.rb{
padding:0 10px;
float:right;
}
.rb-box {
width:100%;
margin-top:0;
}
}

/*main-----------------------------------------------------------------*/
.main {
padding-bottom: 30px;
}

/*news-----------------------------------------------------------------*/
.news {
margin-top:20px;
}
@media ( min-width : 768px ) {
.news {
margin-top:40px;
padding: 0px 10px 0;
}
}
.news h2 > span > span {
background-image:url(../img/index/h2_info.png);
}
@media ( min-width : 768px ) {
.news h2{
height:46px;
background-size: auto 46px;
}
.news .hdr2 > span > span{
background-size: auto 22.5px;
}
.news .hdr2 > span:before {
background:url(../img/index/h2_left_news.png) no-repeat left top;
width: 37px;
height: 35px;
display: block;
content: '';
position: absolute;
left: 3px;
bottom: 8px;
background-size: 100%;
z-index:1;
}
.news .hdr2 > span:after {
background:url(../img/index/h2_right_news.png) no-repeat left top;
width: 43px;
height: 37px;
display: block;
content: '';
position: absolute;
right: 3px;
bottom: 8px;
background-size: 100%;
z-index:1;
}
}

.news .paper{
height:240px;
padding:15px 10px 15px 20px;
}
.news .news-box{
height:215px;
overflow:scroll;
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
}
.news .topic~.topic{
border-top:1px dotted #465535;
padding-top:15px;
margin-top:15px;
}
.news time{
font-size:12px;
line-height:1;
}
.news h3{
font-weight:bold;
border-left:3px solid #f78b28;
padding-left:10px;
margin-top:5px;
font-size:14px;
line-height:16px;
}
.news img{
margin:0px auto 10px;
}
.news .description{
font-size:14px;
word-break:break-all;
word-wrap:break-word;
padding:10px 10px 0;
}
.news .description p{
margin-bottom:1em;
}


@media ( min-width : 768px ) {
.news li a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.news li:nth-child(n+5) {
display: block;
}
.news .paper{
height:310px;
padding: 10px 0 0 10px;
}
.news .news-box{
height: 300px;
padding: 0 10px;
}
}

/*twitter-----------------------------------------------------------------*/
.twitter {
}
.twitter h2 > span > span {
background-image:url(../img/index/h2_twitter.png);
}
.twitter .timeline {
padding: 10px 10px 0px 10px;
text-align: center;
height:240px;
/*
overflow:auto;
overflow-x:hidden;
*/
}

.twitter .timeline iframe{
height:220px !important;
}

@media ( min-width : 768px ) {
.twitter {
margin-top:40px;
padding: 0px 10px 0;
}
.twitter h2{
height:46px;
background-size: auto 46px;
}
.twitter h2 > span > span{
background-size: auto 22.5px;
}
.twitter .hdr2 > span:before {
background:url(../img/index/h2_left_tw.png) no-repeat left top;
width: 40px;
height: 42px;
display: block;
content: '';
position: absolute;
left: 2px;
bottom: 8px;
background-size: 100%;
z-index:1;
}
.twitter .hdr2 > span:after {
background:url(../img/index/h2_right_tw.png) no-repeat left top;
width: 39px;
height: 37px;
display: block;
content: '';
position: absolute;
right: 3px;
bottom: 8px;
background-size: 100%;
z-index:1;
}
.twitter .timeline {
padding: 10px 0px 0px 10px;
height:310px;
}
.twitter .timeline iframe{
/*
height:290px !important;
overflow:scroll;
overflow-x:hidden;
*/
height:300px !important;
}

}

/*about-----------------------------------------------------------------*/
.about .inner{
padding-bottom:30px;
position:relative;
z-index:2;
}
.about h2 > span > span{
background-image:url(../img/index/h2_about.png);
}

.about .visual{
height:256px;
background:url(../img/index/about_bg.jpg) no-repeat center center;
background-size:cover;
margin-bottom:60px;
position:relative;
}
.about .smartphone{
background:url(../img/index/smartphone.png) no-repeat left top;
width:222px;
height:430px;
border:1px solid rgba(0,0,0,0);
transform:scale(0.63,0.63) rotate(15deg);
-webkit-transform:scale(0.63,0.63) rotate(15deg);
transform-origin:left top;
-webkit-transform-origin:left top;
position:absolute;
left:50%;
top:10px;
margin-left:-40px;
z-index:2;
-webkit-backface-visibility: hidden;
}
.about .finger{
position:absolute;
left:50%;
bottom:0;
margin-left:80px;
width:55px;
}
.about .smartphone img{
position:absolute;
top:31px;
left:10px;
}
.about .smartphone ul li:nth-child(4) img{
animation: fade1 20s linear 4s infinite normal;
-webkit-animation: fade1 20s linear 4s infinite normal;
}
.about .smartphone ul li:nth-child(3) img{
animation: fade2 20s linear 4s infinite normal;
-webkit-animation: fade2 20s linear 4s infinite normal;
}
.about .smartphone ul li:nth-child(2) img{
animation: fade3 20s linear 4s infinite normal;
-webkit-animation: fade3 20s linear 4s infinite normal;
}
@keyframes fade1 {
5% { opacity:1;}
10% { opacity:0;}
80% { opacity:0;}
85% { opacity:1;}
}
@keyframes fade2 {
0% { opacity:1;}
30% { opacity:1;}
35% { opacity:0;}
100% { opacity:0;}
}
@keyframes fade3 {
0% { opacity:1;}
55% { opacity:1;}
60% { opacity:0;}
100% { opacity:0;}
}
@-webkit-keyframes fade1 {
5% { opacity:1;}
10% { opacity:0;}
80% { opacity:0;}
85% { opacity:1;}
}
@-webkit-keyframes fade2 {
0% { opacity:1;}
30% { opacity:1;}
35% { opacity:0;}
100% { opacity:0;}
}
@-webkit-keyframes fade3 {
0% { opacity:1;}
55% { opacity:1;}
60% { opacity:0;}
100% { opacity:0;}
}

.about h3{
margin:0 20px;
}
.about h3 span{
display:block;
background:url(../img/index/about_copy.png) no-repeat left top;
padding-top:24.6268%;
height:0;
overflow:hidden;
background-size:100%;
margin:20px auto;
}
.about .btn{
margin-top:20px;
}
.about .text br{
display:none;
}
@media ( min-width : 768px ) {
.about{
margin-top:40px;
}
.about .inner{
padding:40px 10px 60px 10px;
position:relative;
z-index:2;
}
.about .visual{
background:url(../img/index/about_bg_pc.png) no-repeat 350px top;
background-size: auto 100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:auto;
margin:0;
z-index:-1;
}
.about .smartphone-box{
position:relative;
margin-left:540px;
margin-right:20%;
height:100%;
}
.about .smartphone{
transform:scale(0.9,0.9) rotate(15deg);
-webkit-transform:scale(0.9,0.9) rotate(15deg);
transform-origin:left top;
-webkit-transform-origin:left top;
position:absolute;
left:auto;
right:50%;
top:40px;
margin-right:-240px;
z-index:2;
}
.about .finger{
position:absolute;
right:50%;
margin-right:-230px;
left:auto;
bottom:0;
width:80px;
}
.about h3{
margin:0 0 40px 0;
width:540px;
height:133px;
}
.about h3 span{
display:block;
background:url(../img/index/about_copy.png) no-repeat left top;
width:540px;
padding-top:133px;
height:0;
overflow:hidden;
background-size:100%;
margin:0px auto;
}
.about .btn{
margin-top:40px;
}
.about .btn a{
margin:0;
}
.about .text{
letter-spacing:0.1em;
max-width:60%;
min-width:500px;
}
.about .text br{
display:block;
}
.about .text br.middle{
display:none;
}
}

@media ( min-width : 960px ) {
.about .text br.middle{
display:block;
}
}

/*gamesystem-----------------------------------------------------------------*/
.system .inner{
padding-top:20px;
padding-bottom:30px;
}
.system h2 > span > span{
background-image:url(../img/index/h2_gamesysytem.png);
}

.system h3{
margin:0 auto;
}
.system h3 span{
display:block;
background:url(../img/index/system_point.png) no-repeat center top;
width:293.5px;
padding-top:43.5px;
height:0;
overflow:hidden;
background-size:100%;
margin:0px auto;
}
.system .common-slider{
margin-top:20px;
}
.system .common-slider li > div{
text-align:center;
padding:15px 10px;
}
.system .common-slider li h4{
text-align:center;
height:16px;
margin-bottom:10px;
}
.system .common-slider li h4 img{
height:100%;
width:auto;
display:inline-block;
}
.system .common-slider li p{
margin-top:10px;
font-size:13px;
text-align:center;
}
.system .btn{
margin-top:20px;
}

@media ( min-width : 768px ) {
.system .inner{
padding-bottom:60px;
}
.system h3{
margin:20px auto 30px;
}
.system h3 span{
display:block;
background:url(../img/index/system_point.png) no-repeat center top;
width:587px;
padding-top:87px;
height:0;
overflow:hidden;
background-size:100%;
margin:0px auto;
}
.system .common-slider li{
padding:10px;
}
.system .common-slider li > div{
padding:20px 20px 15px;
}
.system .common-slider li h4{
height:20px;
margin-bottom:15px;
}
.system .common-slider li p{
font-size:13px;
white-space:nowrap;
}
}

/*modal----------------------------------------------------------------*/

.modal-tw,
.modal-li{
background-color:#f8f8f4;
max-width:620px;
margin:0 auto;
position:relative;
}

.modal-tw h3,
.modal-li h3{
height:60px;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:60px;
color:#fff;
}
.modal-tw h3{
background-color:#55acee;
}
.modal-li h3{
background-color:#00c300;
}

.modal-tw > div,
.modal-li > div{
padding:30px;
}


.modal-tw .btn,
.modal-li .btn{
margin:20px auto 0;
}
.modal-tw .btn a,
.modal-li .btn a{
width:260px;
}

.modal-tw .btn a{
border:2px solid #55acee;
color:#55acee;
}
.modal-tw .btn a:after{
border-top: 2px solid #55acee;
border-right: 2px solid #55acee;
}

.modal-li .btn a{
border:2px solid #00c300;
color:#00c300;
}
.modal-li .btn a:after{
border-top: 2px solid #00c300;
border-right: 2px solid #00c300;
}