@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
html {
	width: 100%;
}
body {
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.6;
}

.rblock {
	position: relative;
}
.ablock {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.rblock img, .ablock img {
	display: block;
}
.pblock img {
    display: block;
	width: 100%;
}
li {
	list-style: none;
}
img {
	border: 0;
	vertical-align: top;
}
a {
	color: #0099FF;
	outline: 0;
}
a:focus {
	outline: 0;
}

#wrapper {
	width: 100%;
	position: relative;
    overflow-x: hidden;
}
.wrapper {
	width: 100%;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
.contents {
	position: relative;
	width: 1024px;
	margin: 0 auto;
}


/* common */

#lovl {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10000;
    background: #005deb;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}
.loader {
  font-size: 10px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -3em;
  margin-top: -3em;
  border-top: 1.1em solid rgba(200, 200, 255, 0.2);
  border-right: 1.1em solid rgba(200, 200, 255, 0.2);
  border-bottom: 1.1em solid rgba(200, 200, 255, 0.2);
  border-left: 1.1em solid rgba(255,255,255, 0.9);
  animation: load_circle 0.8s infinite linear;
}
@keyframes load_circle {
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#fix {
    position: fixed;
    right: 0;
    bottom: 1em;
	z-index: 100;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 298px;
    pointer-events: none;
}
.storebtn {
    position: relative;
    width: 100%;
    padding-right: 1.56%;
}
.storebtn a:first-child {
    margin-bottom: 2%;
}

.ptop {
    position: relative;
    padding-right: 1.56%;
    padding-bottom: 3%;
}
.ptop img {
	width: 6em;
}
#fix a {
    pointer-events: auto;
    display: block;
    transition-duration: 0.2s;
}
#fix a:hover  {
    /* transform: scale(1.05); */
    filter: brightness(150%);
}

.c_header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}
.c_header:before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    width: 100%;
    pointer-events: none;
    overflow-x: hidden;
    padding-top: 183px;
    background: url(../images/top/s0/tp_grad.png) center top repeat-x;
    background-size: auto 100%;
}

.c_menu {
    position: relative;
    padding: 1.95% 0 0 0;
    width: 98.9%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.c_menu li {
    width: 24.9%;
    transition-duration: 0.2s;
}
.c_menu li a {
    display: block;
    transition-duration: 0.2s;
}
.c_menu li a:hover {
    filter: brightness(140%);
}
.c_main {
    position: relative;
    width: 100%;
}
.c_section {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.movie {
    position: relative;
}
.movie:before {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 57.72%;
    background: url(../images/common/movie_f.png) center top no-repeat;
    background-size: 100% 100%;
}
.movie h3 { position: absolute; width: 38.22%; left: 0%; top: 0; margin-top: -6.3%; }
.movie p {
    position: absolute;
    width: 88.76%;
    left: 5.61%;
    bottom: 4%;
    font-size: 16px;
    line-height: 100%;
    vertical-align: bottom;
    font-family: 'Mochiy Pop P One', -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.movie_pic {
    position: absolute;
    width: 88.76%;
    left: 5.61%;
    top: 0;
    margin-top: 4.04%;
    height: 75.67%;
}

.movie_pic a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 5.27% / 10.06%;
}
.movie_pic img { transition-duration: 0.2s; }

.movie_pic a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/common/movie_btn.png) center center no-repeat rgba(0,0,0,0.4);
    background-size: 15.44% auto;
    transition-duration: 0.2s;
}
.movie_pic a:hover img {
    /* transform: scale(1.1); */
}
.movie_pic a:hover:after {
    background-color: rgba(0,0,0,0);
    /* background-size: 20% auto; */
    filter: brightness(140%);
}

.box {
    position: relative;
    width: 91.79%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 20px;
    border: 10px solid #fff;
    box-shadow: 0 14px 0 0 rgba(0,21,176, 0.5);
    margin-left: auto;
    margin-right: auto;
}
.box h3 {
    position: relative;
    width: 100%;
    background: url(../images/common/box_h_bg.png) center bottom no-repeat #FBBB2D;
    background-size: 100% auto;
    border-radius: 20px 20px 0 0;
}
.box h3.tall {
    background-image: url(../images/common/box_h_bg_tall.png);
}
.box_main {
    position: relative;
    width: 100%;
    background: url(../images/common/box_bg.png) center top repeat;
    background-size: auto 60px;
    border-radius: 0 0 20px 20px;
}
.memo {
    position: relative;
    width: 95.21%;
    margin-left: auto;
    margin-right: auto;
}
.memo.small {
    margin-left: 0;
    margin-right: 0;
}
.memo:before {
    content: "";
    display: block;
    position: relative;
    background: url(../images/common/memo_l.png) left top repeat;
    background-size: auto 25px;
    width: 100%;
    height: 0;
    padding-top: 25px;
}
.memo_main {
    position: relative;
    width: 100%;
    background: url(../images/common/memo_bg.png) right bottom no-repeat #fff;
    background-size: auto 227px;
    border-bottom: 8px solid #FBBB2D;
}
.small .memo_main {
    background: url(../images/common/memo_small_bg.png) right bottom no-repeat #fff;
    background-size: auto 136px;
}
.ss_set {
    position: relative;
    width: 88.29%;
    margin: -6.09% auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ss_set .pic {
    width: 47.71%;
}

.pic {
    box-sizing: border-box;
    border: 3px solid #000;
    border-radius: 20px;
}
/* footer */

.c_footer {
    position: relative;
    width: 100%;
    color: #fff;
    background-color: #00c6fa;
	font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 15px;
    line-height: 1.37;
}
.c_footer .contents:before {
    content: "";
    display: block;
    position: relative;
    padding-top: 1.36%;
}
#logoarea {
    position: relative;
    width: 100%;
    padding-top: 14.55%;
}
#nswlogo { position: absolute; width: 25.68%; left: 0%; top: 0; margin-top: 4.49%; }
#steamlogo { position: absolute; width: 22.07%; left: 29.98%; top: 0; margin-top: 3.8%; }
#d3plogo { position: absolute; width: 11.13%; left: 64.25%; top: 0; margin-top: 0%; }

#copyright { margin-top: 2.44%; }
#notice    { margin-top: 2.44%; padding-bottom: 5.4%; }
.c_footer ul { position: relative; }
.c_footer li.indent {
    position: relative;
    text-indent: -1em;
    margin-left: 1em;
    margin-bottom: 0.2em;
}

.cbmv #cboxContent{margin-top:43px;background:#000; }
.cbmv .cboxIframe{background:#000;}
.cbmv #cboxError{padding:50px; border:1px solid #ccc;}
.cbmv #cboxLoadedContent{ border: 2px solid #ff0; border-image: linear-gradient(135deg, #009af5,  #005deb,  #00c6fa, #005deb,  #00c6fa); border-image-slice: 1;  background:#000;}
.cbmv #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
.cbmv #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
.cbmv #cboxLoadingGraphic{background:url(../images/common/loading.gif) no-repeat center center;}
.cbmv #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
.cbmv #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
.cbmv #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
.cbmv #cboxClose{
        position:absolute;
        overflow: hidden;
        top:-43px;
        right:0px;
        display:block;
        background:url("../images/common/btn_close.png") no-repeat top center;
        width:120px;
        height:0;
        padding-top: 40px;
        transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
    }
.cbmv #cboxClose:hover{filter:brightness(120%);}

@media screen and (min-width:2001px) {
    #fix {
        width: 14.9%;
    }
}
@media screen and (max-width:1619px) {
    .c_footer {
        padding-bottom: 99px;
    }
    #fix {
        width: 100%;
        bottom: 0;
    }
    .ptop {
        margin: 0 1% 1% 0;
        padding-bottom: 0;
    }
    .storebtn {
        width: 98.44%;
        padding: 0.78%;
        display: flex;
        justify-content: flex-end;
    }
    .storebtn a {
        width: 220px;
        display: block;
        margin-bottom: 0.5%;
    }
    .storebtn a img {
        width: 100%;
        display: block;
    }
    .storebtn a:first-child {
        margin-right: 1%;
        margin-bottom: 0.5%;
    }
}

@media screen and (max-width:1023px) {
    /* common */
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
    .ptop img {
        width: 12vw !important;
    }
    .contents {
        width: 100%;
    }
    .c_header:before {
        padding-top: 17.87%;
    }

    .c_footer {
        font-size: 2.9vw;
        padding: 0 1% 23% 1%;
        width: 98%;
    }
    .movie p {
        font-size: 1.5625vw;
    }

    .box {
        border-radius: 1.95vw;
        border: 0.97vw solid #fff;
        box-shadow: 0 1.36vw 0 0 rgba(0,21,176, 0.5);
    }
    .box h3 {
        border-radius: 0.97vw 0.97vw 0 0;
    }
    .box_main {
        background-size: 6.38% auto;
        border-radius: 0 0 0.97vw 0.97vw;
    }
    .memo:before {
        background-size: auto 2.44vw;;
        width: 100%;
        height: 0;
        padding-top: 2.44vw;
    }
    .memo_main {
        width: 100%;
        background-color: #fff;
        border-bottom: 0.78vw solid #FBBB2D;
    }
    .memo_main {
        background-size: auto 22.16vw;
    }
    .small .memo_main {
        background-size: auto 13.28vw;
    }
    .pic {
        border: 0.29vw solid #000;
        border-radius: 1.95vw;
    }

    .cbmv #cboxClose {
        position:absolute;
        overflow: hidden;
        top:-23px;
        right:0px;
        display:block;
        background:url("../images/common/btn_close.png") no-repeat top center;
        background-size: 100% auto;
        width:60px;
        height:0;
        padding-top: 20px;
    }
    
}
@media (orientation: portrait) and (max-width: 767px){
}