@charset "UTF-8";

/*PC--------------------------------------------------------------------------------------*/

#content {
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);
    line-height: 1.8;
    line-break: strict;
    word-break: break-all;
    text-align: justify;
    text-justify: distribute;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 0;
    background: #000;
}

#content p:not(last-child) {
    margin: 0 0 1em 0;
}

#content p:last-child {
    margin: 0;
}

#content img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

#content a {
    text-decoration: none;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    color: #046df8;
}

#content a:hover {
    opacity: 0.7;
}

.bg-ill {
    position: fixed;
    max-width: 1200px;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.bg-ill .ill {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 93.3333%;
    position: relative;
    width: 100%;
    background: url("../images/common/bg.jpg") no-repeat;
    text-indent: -9999px;
    background-size: cover;
    display: block;
    overflow: hidden;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

.ah-header-bg{
    width: 100%;
    position: relative;
}

.ah-header-wrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    z-index: 10;
    position: relative;
}

.ah-header {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 54.16666%;
    position: relative;
    width: 100%;
    display: block;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

.ah-header .read-pos {
    position: absolute;
    top: 50.923077%;
    left: 19.250000%;
    width: 61.833333%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: readFadeIn 2s ease 0s 1 normal;
    -webkit-animation: readFadeIn 2s ease 0s 1 normal;
}

@keyframes readFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes readFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ah-header .read-pos .read {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 16.03773%;
    position: relative;
    width: 100%;
    background: url("../images/common/read.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.ah-header .logo-pos {
    position: absolute;
    top: 11.692308%;
    left: 28.666667%;
    width: 42.666667%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: logoFadeIn 2s ease 0s 1 normal;
    -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ah-header .logo-pos h1 {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 44.33593%;
    position: relative;
    width: 100%;
    background: url("../images/common/logo.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0;
}

.ah-header .chara01-pos {
    position: absolute;
    top: 8.615385%;
    left: -7.416667%;
    width: 44.666667%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: chara01FadeIn 2s ease 0s 1 normal;
    -webkit-animation: chara01FadeIn 2s ease 0s 1 normal;
}

@keyframes chara01FadeIn {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }

    50% {
        opacity: 0;
        transform: translateX(-15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes chara01FadeIn {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }

    50% {
        opacity: 0;
        transform: translateX(-15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.ah-header .chara01-pos .chara01 {
    bottom: 0;
    left: 0;
    height: 0;
    padding-top: 110.82089%;
    position: relative;
    width: 100%;
    background: url("../images/common/chara01.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.ah-header .chara02-pos {
    position: absolute;
    top: 10.000000%;
    left: 63.416667%;
    width: 38.750000%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: chara02FadeIn 2s ease 0s 1 normal;
    -webkit-animation: chara02FadeIn 2s ease 0s 1 normal;
}

@keyframes chara02FadeIn {
    0% {
        opacity: 0;
        transform: translateX(15%);
    }

    50% {
        opacity: 0;
        transform: translateX(15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes chara02FadeIn {
    0% {
        opacity: 0;
        transform: translateX(15%);
    }

    50% {
        opacity: 0;
        transform: translateX(15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.ah-header .chara02-pos .chara02 {
    bottom: 0;
    left: 0;
    height: 0;
    padding-top: 125.80645%;
    position: relative;
    width: 100%;
    background: url("../images/common/chara02.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

/*catch*/

.ah-catch-wrap{
    max-width: 902px;
    width: 96%;
    margin: 4% auto;
}

.ah-catch-wrap .ah-catch {
    bottom: 0;
    left: 0;
    height: 0;
    padding-top: 12.19512%;
    position: relative;
    width: 100%;
    background: url("../images/common/catch.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

/*loop
----------------------------*/

.loop{
    margin-top: -8.2%;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(-100%);
    }
  }
  
  /*IE11対策
    ----------------------------*/
  _:-ms-lang(x)::-ms-backdrop,
  .loop {
    display: -ms-grid;
    overflow: hidden;
  }
  /*----------------------------*/
  
  .loop__wrap {
    display: flex;
    overflow: hidden;
  }
  
  .loop__list {
    display: flex;
    list-style: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .loop__list--left {
    animation: infinity-scroll-left 55s infinite linear 0.5s both;
  }
  
  .loop__item {
    width: calc(100vw / 7);
  }
  
  .loop__item>img {
    width: 100%;
  }


.ah-info-wrap {
    width: 100%;
    z-index: 5;
    position: relative;
}

.ah-info-wrap-inner {
    max-width: 1230px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px 4% 15px;
    box-sizing: border-box;
}

.ah-info-wrap-inner ul.pickup-wrap {
    list-style: none;
    margin: 0 -1.5% -3% -1.5%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.ah-info-wrap-inner ul.pickup-wrap li {
    flex-basis: 50%;
    padding: 0 1.5%;
    box-sizing: border-box;
    margin-bottom: 3%;
    overflow: hidden;
}

.ah-info-wrap-inner ul.pickup-wrap li .pickup-box{
    background: #fff;
    padding: 4%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.ah-info-wrap-inner ul.pickup-wrap li .pickup-box::before{
    content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 200px solid #d32b3c;
  border-right: 1200px solid transparent;
}

.ah-info-wrap-inner ul.pickup-wrap li .pic {
    position: relative;
    width: 100%;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

.ah-info-wrap-inner ul.pickup-wrap li .pic::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.ah-info-wrap-inner ul.pickup-wrap li .pic .pic-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.ah-info-wrap-inner ul.pickup-wrap li a {
    display: block;
    color: #aea062 !important;
}

.ah-info-wrap-inner ul.pickup-wrap li a:hover {
    color: #f90 !important;
}

.ah-info-wrap-inner ul.pickup-wrap li img {
    width: 100%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

.ah-info-wrap-inner ul.pickup-wrap li a:hover img {
    -webkit-transform: scale(120%);
    -moz-transform: scale(120%);
    -ms-transform: scale(120%);
    -o-transform: scale(120%);
    transform: scale(120%);
}

.ah-info-wrap-inner ul.pickup-wrap li .text {
    padding-top: 4%;
    color: #333;
}

.ah-info-wrap-inner ul.pickup-wrap li .text .title {
    color: #d32b3c;
    font-size: 1.1em;
    font-weight: bold;
}

.ah-info-wrap-inner ul.pickup-wrap li .text .time {
    color: #f60;
    text-align: right;
    font-size: 0.8em;
}

.ah-wrap {
    width: 100%;
    z-index: 5;
    position: relative;
    color: #fff;
    background: rgba(51, 51, 51, 0.8);
}

.ah-wrap-inner {
    max-width: 1230px;
    width: 100%;
    margin: 0 auto;
    padding: 4% 15px;
    box-sizing: border-box;
}

.ah-wrap-inner .ah-content {
    display: flex;
    flex-wrap: wrap;
}

.ah-wrap-inner .ah-content .side-column {
    width: 320px;
    font-size: 0.9em;
}

.ah-wrap-inner .ah-content .main-column {
    flex: 1;
    padding: 0 50px 0 0;
    box-sizing: border-box;
}

.ah-wrap-inner .ah-content h3 {
    margin: 0 0 30px 0;
    padding: 0;
    font-size: 1em;
    line-height: 1;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap {
    list-style: none;
    padding: 0;
    margin: 0 0 -2% 0;
    display: block;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li {
    padding: 0 0 3% 0;
    box-sizing: border-box;
    margin-bottom: 3%;
    overflow: hidden;
    border-bottom: #666 solid 1px;
    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .pic {
    position: relative;
    width: 30%;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .pic::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .pic .pic-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li a {
    color: #fff !important;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li img {
    width: 100%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li a:hover img {
    -webkit-transform: scale(120%);
    -moz-transform: scale(120%);
    -ms-transform: scale(120%);
    -o-transform: scale(120%);
    transform: scale(120%);
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .text {
    width: 70%;
    float: right;
    padding-left: 3%;
    box-sizing: border-box;
    font-size: 0.9em;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .text .title {
    color: #d32b3c;
    font-weight: bold;
    font-size: 1.1em;
}

.ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .text .time {
    color: #f60;
    text-align: right;
    font-size: 0.9em;
}




.gamespec dl{
    margin: 0;
}

.gamespec dt {
    color: #fc0;
    font-weight: bold;
}

.gamespec dd {
    margin: 0 0 0.5rem 0;
}

.gamespec{
    margin: 0 auto 1.5em auto;
    box-sizing: border-box;
}

.gamespec h3{
    margin: 0.5rem 0 1.5rem 0;
}

.banner-wrap {
    max-width: 320px;
    width: 100%;
    margin: 0 auto 1.5em auto;
}

.banner-wrap img {
    width: 100%;
}




/*RESPONSIVE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1400px) {

}

@media only screen and (max-width: 1000px) {


    .ah-wrap-inner .ah-content {
        display: block;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }

    .ah-wrap-inner .ah-content .side-column {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        border: none;
        margin: 0;
    }

    .ah-wrap-inner .ah-content .main-column {
        flex: 1;
        padding: 0;
        box-sizing: border-box;
        margin-bottom: 3vh;
        overflow: hidden;
    }


}

/*MOBILE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 700px) {

    .bg-ill {
        position: fixed;
        width: 100%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: -1;
    }
    
    .bg-ill .ill {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 150%;
        position: relative;
        width: 100%;
        background: url("../images/common/bg.jpg") no-repeat top center;
        text-indent: -9999px;
        background-size: cover;
        display: block;
        overflow: hidden;
    }

    #content {
        font-size: clamp(10px, 14 / 375 * 100vw, 14px);
        line-height: 1.6;
    }

    .ah-header {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 104%;
        position: relative;
        width: 100%;
        display: block;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        overflow: hidden;
    }

    .ah-header .read-pos {
        position: absolute;
        top: 80%;
        left: 5%;
        width: 90%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: readFadeIn 2s ease 0s 1 normal;
        -webkit-animation: readFadeIn 2s ease 0s 1 normal;
    }
    
    .ah-header .logo-pos {
        position: absolute;
        top: 48%;
        left: 15%;
        width: 70%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: logoFadeIn 2s ease 0s 1 normal;
        -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
    }

    .ah-header .chara01-pos {
        position: absolute;
        bottom: 0;
        left: -25%;
        width: 86.451613%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: chara01FadeIn 2s ease 0s 1 normal;
        -webkit-animation: chara01FadeIn 2s ease 0s 1 normal;
    }

    .ah-header .chara02-pos {
        position: absolute;
        bottom: 0;
        left: 38%;
        width: 75.000000%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: chara02FadeIn 2s ease 0s 1 normal;
        -webkit-animation: chara02FadeIn 2s ease 0s 1 normal;
    }

    .loop{
        margin-top: 0;
    }

    .loop__item {
        width: calc(100vw / 3);
      }
    

      .ah-catch-wrap{
        width: 90%;
        margin: 5vh auto;
    }
    
    .ah-catch-wrap .ah-catch {
        bottom: 0;
        left: 0;
        height: 0;
        padding-top: 45.54455%;
        position: relative;
        width: 100%;
        background: url("../images/common/catch2.png") no-repeat;
        background-size: cover;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }

    .ah-info-wrap-inner {
        max-width: 1220px;
        width: 100%;
        margin: 0 auto;
        padding: 0 15px 3vh 15px;
        box-sizing: border-box;
    }

    .ah-info-wrap-inner ul.pickup-wrap li {
        flex-basis: 100%;
        padding: 0 1.5%;
        box-sizing: border-box;
        margin-bottom: 3vh;
        overflow: hidden;
    }



    .ah-wrap-inner {
        max-width: 1220px;
        width: 100%;
        margin: 0 auto;
        padding: 5vh 15px;
        box-sizing: border-box;
    }

    .ah-wrap-inner .ah-content {
        display: block;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }

    .ah-wrap-inner .ah-content .main-column {
        flex: 1;
        padding: 0 0 5vh 0;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    .ah-wrap-inner .ah-content .main-column ul.pickup-wrap li {
        flex-basis: 100%;
        padding: 0 1.5%;
        box-sizing: border-box;
        margin-bottom: 5%;
    }

    .ah-wrap-inner .ah-content .main-column ul.relatednews-wrap {
        list-style: none;
        padding: 0;
        margin: 0 0 -5% 0;
    }

    .ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li {
        padding: 0 0 2vh 0;
        box-sizing: border-box;
        margin-bottom: 2vh;
        overflow: hidden;
        border-bottom: #333 solid 1px;
        font-size: clamp(10px, 14 / 375 * 100vw, 14px);
    }

    .ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .pic {
        position: relative;
        width: 40%;
        float: left;
    }

    .ah-wrap-inner .ah-content .main-column ul.relatednews-wrap li .text {
        width: 60%;
        float: right;
        padding-left: 2vh;
        box-sizing: border-box;
    }

    .gamespec{
        margin: 0 auto 5vh auto;
    }
    
    .banner-wrap {
        width: 100%;
        margin: 0 auto 5vh auto;
    }

    .ah-intro {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 133.33333%;
        position: relative;
        width: 100%;
        background: url("../images/common/intro2.png") no-repeat;
        background-size: cover;
        display: block;
        overflow: hidden;
        margin: 0;
    }
    
    .ah-intro .text{
        position: absolute;
        width: 90%;
        bottom: 0;
        left: 5%;
        color: #fff;
        -moz-text-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        -webkit-text-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        text-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        font-size: clamp(10px, 14 / 375 * 100vw, 14px);
        line-height: 1.8;
    }
    

    ul.ah-intro-wrap{
        display: flex;
        flex-wrap: wrap;
        margin: 5vh 2% 3vh 2%;
        list-style: none;
        padding: 0;
        justify-content: center;
    }
    
    ul.ah-intro-wrap li{
        flex-basis: 50%;
        padding: 0 1%;
        box-sizing: border-box;
        margin-bottom: 2vh;
    }




}