@charset "utf-8";
/* CSS Document */
@media (max-width: 768px) {
/*mvBlock
----------------------------------------------------------------------------------------------*/
#top{
background:#fff;
}
#mvBlock{
height:auto;
padding:263px 0 44px;
background:#1e1e1e;
position:relative;
box-sizing:border-box;
}
#mvBlock:after{
display:block;
content:"";
width:100%;
height:310px;
background:url(../images/bg_mv_01.jpg) no-repeat 80% 0;
background-size:cover;
position:absolute;
top:0;
left:0;
z-index:0;
}
#mvBlock .ttl01{
margin:0 0 39px;
padding-right:12%;
text-align:right;
position:relative;
z-index:1;
}
#mvBlock .ttl01 img{
width:100%;
height:auto;
}
#mvBlock .ttl01 .cach{
margin:10px -12% 0 0;
padding-right:22px;
display:inline-block;
font-size: 18px;
font-weight:bold;
line-height:1;
letter-spacing: .3px;
color: #fff;
}
#mvBlock .lead{
margin:0 0 40px;
color: #eaeaea;
}
#mvBlock .columnTypeB01{
margin:0 auto 15px;
border-spacing:0;
}
.columnTypeB01 .oneBlock+.oneBlock{
padding:0 0 0 20px;
}
#mvBlock .guide{
padding:0 0 0 31px;
}
#mvBlock .guide a{
padding:0 0 0 19px;
background:url(../images/icn_guide_01.png) no-repeat 0 50%;
background-size:14px auto;
letter-spacing: .3px;
text-decoration:underline;
}
#mvBlock .guide a:hover{
text-decoration:none;
}

/*ytArea
----------------------------------------------------------------------------------------------*/
.ytArea {
  background: #111;
}
  .ytArea a {
    display: inline-block;
    height: 225px;
    border: none;
    outline: none;
  }
  .ytArea a:before {
    display: block;
    content: "";
    position: relative;
    top: 85%;
    left: 43%;
    width: 50px;
    margin-top: -90px;
    border: 45px solid transparent;        /*top right bottom を透明化 */ 
    border-left: 60px solid #fff;
    opacity: 0.8;
  }
  .ytArea ul {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    flex-direction: column;
  }
    .ytArea ul li {
      flex: 1;
      margin: 30px 10px;
    }
      .ytArea ul li a span {
        display: block;
        text-align: left;
        margin-bottom: 10px;
      }
      .ytArea ul li img {
        width: 100%;
      }
        .ytArea ul li img:hover {
          opacity: 0.7;
        }

/*gameSupport
----------------------------------------------------------------------------------------------*/
.gameSupport{
padding:50px 0 20px;
background: #1e1e1e;
position:relative;
box-sizing:border-box;
}
.gameSupport:after{
display:block;
content:"";
width:100%;
height:879px;
background:url(../images/bg_game_01.jpg_small.png) no-repeat 35% 0;
background-size:cover;
position:absolute;
top:0;
left:0;
z-index:0;
}
.gameSupport #gameVideo,
.gameSupport #gameBgimg{
display:none;
}
.gameSupport .ttl01{
margin:0 0 28px;
padding: 0 0 35px;
font-size: 24px;
font-weight:bold;
letter-spacing: .5px;
color: #fff;
position:relative;
}
.gameSupport .ttl01:after{
display:block;
content:"";
width: 70px;
height: 4px;
background: #00b4ff;
position:absolute;
bottom:0;
left:0;
}
.gameSupport .lead{
margin:0 0 72px;
letter-spacing: .3px;
}
.gameSupport .btn{
margin:0 0 50px;
text-align:center;
}

#bnrList{
position:relative;
z-index:10;
}
#bnrList .slider{
display:flex;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
}
#bnrList .slider > div{
width:33.3%;
margin:0 0 0.75em;
}
#bnrList .slider > div img{
max-width:100%;
height:auto;
padding:0 5px;
box-sizing:border-box;
}
#bnrList .slickNavArrows{
display:none;
}

.product{
background:#1e1e1e;
}
.product .ttl02{
height:63px;
background:#000;
border-top:1px solid #00b4ff;
border-bottom:1px solid #00b4ff;
font-size: 26px;
letter-spacing: .5px;
line-height:63px;
text-align: center;
color: #eaeaea;
}
.product .imgColumn01{
display:flex;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
}
.product .imgColumn01 .oneBlock{
width:33.33333%;
border-left: solid 1px #1e1e1e;
border-bottom: solid 1px #00b4ff;
text-align:center;
box-sizing:border-box;
}
.product .imgColumn01 .oneBlock:nth-child(n+2){
border-left: solid 1px #00b4ff;
}
.product .imgColumn01 .oneBlock a{
padding:0 0 18%;
display:block;
}
.product .imgColumn01 .oneBlock figure{
margin:0 0 3.5%;
padding:8.5% 6%;
position:relative;
}
.product .imgColumn01 .oneBlock a:active figure{
background: radial-gradient(circle at 53% 42%, #447fa8, #1e1e1e);
}
.product .imgColumn01 .oneBlock figure img{
max-width:100%;
height:auto;
}
.product .imgColumn01 .oneBlock figcaption{
margin:5px 0 0;
font-size: 16px;
font-weight: bold;
letter-spacing: .3px;
text-align: center;
color: #eaeaea;
}
.product .imgColumn01 .oneBlock .txt{
margin:0 0 35px;
padding:0 11%;
font-size:12px;
letter-spacing: .2px;
color: #eaeaea;
text-align:left;
}
.product .imgColumn01 .oneBlock .btn{
width: 120px;
height: 40px;
display:inline-block;
border-radius: 3px;
background: rgba(0, 180, 255, .3);
border: solid 2px #00b4ff;
font-size:12px;
line-height:40px;
letter-spacing: .3px;
}
.product .imgColumn01 .oneBlock a:active .btn{
background-color: #00b4ff;
color:#fff;
}
/*about
----------------------------------------------------------------------------------------------*/
#about{
margin:0;
padding:50px 0 53px;
background:#282828;
position:relative;
box-sizing:border-box;
}
#about:before,
#about:after{
display:block;
content:"";
width:100%;
position:absolute;
left:0;
z-index:0;
}
#about:before{
height:407px;
background:url(../images/support_bg_01_sp.jpg) no-repeat 100% 0;
background-size:280%;
top:0;
}
#about:after{
height:408px;
background:url(../images/support_bg_02_sp.jpg) no-repeat 0 100%;
background-size:280%;
bottom:0;
}
#about .ttl01{
margin:0 0 30px;
padding: 0 0 35px;
font-size: 24px;
font-weight: bold;
letter-spacing: .5px;
text-align: center;
color: #fff;
position:relative;
}
#about .ttl01:after{
display:block;
content:"";
width: 70px;
height: 4px;
background: #00b4ff;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
}
#about .lead{
margin:0 0 30px;
letter-spacing: .3px;
color: #eaeaea;
}
#about .note{
margin:0 0 33px;
font-size: 10px;
letter-spacing: .2px;
color: #eaeaea;
}
#about .imgColumn01{
display:flex;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
}
#about .imgColumn01 .oneBlock{
width:50%;
margin: 0 0 42px;
padding:0 1% 0 0;
box-sizing:border-box;
}
#about .imgColumn01 .oneBlock:nth-child(even){
padding:0 0 0 1%;
}
#about .imgColumn01 .oneBlock figure{
margin:0 0 16px;
text-align:center;
}
#about .imgColumn01 .oneBlock figure figcaption{
margin:15px 0 0;
font-size: 18px;
font-weight:bold;
letter-spacing: .3px;
}
#about .imgColumn01 .oneBlock .txt{
font-size:12px;
letter-spacing: .2px;
line-height: 1.75;
color: #eaeaea;
}
/*news gameInfo
----------------------------------------------------------------------------------------------*/
#news{
margin:0 0 56px;
padding:40px 15px;
}
#gameInfo{
margin:0 0 60px;
padding:0 15px;
}

#news .ttl,
#gameInfo .ttl{
margin:0 0 18px;
padding:0 0 30px;
border-bottom:1px solid #5a5a5a;
font-size: 24px;
letter-spacing: .5px;
text-align: center;
color: #1e1e1e;
line-height:1;
}
#news .newsList01{
margin:0 0 10px;
}
#news .newsList01 li{
margin:0 0 18px;
padding:0 0 20px;
border-bottom:1px solid #dadada;
}
#news .newsList01 li:last-child{
border:none;
}
#news .newsList01 li p{
letter-spacing: .3px;
color: #1e1e1e;
}
#news .newsList01 li .date{
margin:0 0 4px;
font-size:12px;
line-height: 1.75;
}
#news .newsList01 li .txt a,
#news .newsList01 li .txt a:visited,
#news .newsList01 li .txt a:link{
color:#000;
}
#news .newsList01 li .txt a:hover,
#news .newsList01 li .txt a:active {
color: #00a2e6;
}

#gameInfo .newsList01{
margin:0 0 30px;
}
#gameInfo .newsList01 dt{
margin:38px 0 0;
padding:24px 0 0;
border-top:1px solid #dadada;
}
#gameInfo .newsList01 dd{
margin:20px 0 0;
}
#gameInfo .newsList01 dt:first-child{
margin-top:0;
padding-top:6px;
border:none;
}
#gameInfo .newsList01 dt{
font-size: 16px;
font-weight:bold;
line-height: 1.31;
letter-spacing: .3px;
color: #1e1e1e;
}
#gameInfo .newsList01 dd{
}
#gameInfo .newsList02 li{
margin:0 0 19px;
}
#gameInfo .newsList02 li:last-child{
margin:0;
}
#gameInfo .newsList02 li p{
letter-spacing: .3px;
color: #1e1e1e;
}
#gameInfo .newsList02 li .date{
}
#gameInfo .newsList02 li .txt{
padding:0;
}
#gameInfo .newsList02 li .txt a,
#gameInfo .newsList02 li .txt a:visited,
#gameInfo .newsList02 li .txt a:link{
color:#000;
}
#gameInfo .newsList02 li .txt a:hover,
#gameInfo .newsList02 li .txt a:active {
color: #00a2e6;
}

/* 20190117 公式SNS add */

#officialSns .snsList {
	width: 100%;
	flex-wrap: wrap;
}
#officialSns .snsList > div {
	width: 85%;
	margin: 0 auto 3em;
}
#officialSns .snsList > div:last-child {
	margin-bottom: 0;
}

#officialSns .snsList div a {
	width: 60%;
	margin: 0 auto;
}

}

@media (max-width: 500px) {
	.product .imgColumn01 .oneBlock {
		width: 100%;
	}
	.product .imgColumn01 .oneBlock:nth-child(n+2) {
		border-left: none;
	}
}