@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap');

#content { position: relative; margin: 0; padding: 0; overflow-x: hidden; }
#lovl {
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    z-index: 10000;
    background: #000000;
}
#loadimg {
    position: absolute;
    width: 16px;
    height: 11px;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -5px;
    /*
    -webkit-animation: a_load_img 1s linear 0s infinite;	
    animation: a_load_img 1s linear 0s  infinite;	
    */
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 3em;
  height: 3em;
}
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1.5em;
    margin-top: -1.5em;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(5, 48, 255, 0.2);
  border-right: 1.1em solid rgba(5, 48, 255, 0.2);
  border-bottom: 1.1em solid rgba(55, 48, 255, 0.2);
  border-left: 1.1em solid #70116f;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 0.5s infinite linear;
  animation: load8 0.5s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.rblock { position: relative; }
.contents {
    position: relative;
    padding: 0;
    margin: 0 auto;
    width: 1200px;
    font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.contents a {
    display: block;
    transition-duration: 0.2s;
}
.contents a:hover {
    filter: brightness(150%);
}
.contents img {
    display: block;
    width: 100%;
    border: 0;
}

.yt {
    position: relative;
    width: 100%;
    box-shadow: 0 0 0.8em 1px rgba(0,0,0,0.7);
}
.yt:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.yt iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.yt span.new {
    display: block;
    position: absolute;
    left: -1%;
    top: 0;
    margin-top: -2%;
    width: 6.639%;
    height: 0;
    padding-top: 3.3195%;
    box-sizing: border-box;
    background: url(../images/movie/movie_new.png) center top no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.slider {
    position: relative;
    width: 73.54%;
    margin: 0 auto;
    padding: 0 3.54%;
    background-image: linear-gradient(to left, #FFEFA5 0%, #D7C272 25%, #BFA54F 37.5%, #B0943B 50%, #BFA54F 62.5%, #D7C272 75%,#FFEFA5 100%);
    border-radius: 2.59% 2.59% 0 0 / 3.38% 3.38% 0 0;
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.4);
    z-index: 2;
}
.swiper {
    position: relative;
    width: 100%;
    padding: 1.27% 0;
    overflow: hidden;
}
.swiper-pagination {
    position: relative;
    width: 73.54%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 3.54%;
    z-index: 1;
}

.swiper-pagination-bullet {
    width: calc(3% - 4px);
    height: 0;
    padding-top: calc(3% - 4px);
    margin: 0 1.42%;
    vertical-align: top;
    border-radius: 50%;
    background: #000;
    border: 2px solid #887103;
    opacity: 1;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
  border: 2px solid #BAAA51;
}

.swiper-slide span,
.swiper-slide a {
    display: block;
    transition-timing-function: ease-out;
}
.swiper-slide img {
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.swiper-button-next,
.swiper-button-prev {
    width: 2.56%;
    height: 0px;
    padding-top: 8.11%;
    margin-top: -4.05%;
    background: url(/megahobby/event/mh_yugioh/images/ar.png) center top no-repeat;
    background-size: auto 100%;
    right: 1%;
}
.swiper-button-prev {
    background-image: url(/megahobby/event/mh_yugioh/images/al.png);
    left: 1%;
}



.swiper-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

#copyright {
    font-size: 12px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #fff;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.75rem;
}


footer {
    position: relative;
}
#twitter-widget-0 {
    vertical-align: top;
}
footer .box {
    position: relative;
}
footer #box_inner #footer_sns {
    position: absolute;
    top: 90px;
    left: 0;
}
.topkv {
    position: relative;
    width: 100%;
}
.topkv_main {
    position: relative;
    width: 1900px;
    left: 50%;
    margin-left: -950px;
    overflow: hidden;;
}
.toptitle {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    background-color: #000;
}
.toptitle h1 {
    position: relative;
    width: 158.33%;
    margin-left: -29.1665%;
}
.topkv img,
.toptitle img,
.contents img {
    display: block;
    width: 100%;
}
.dmlogo { position: absolute; width: 15.526%; left: 42.21%; top: 0; margin-top: 16.789%; }
.top_r { position: absolute; width: 22.842%; left: 51%; top: 0; margin-top: 1.578%; }
.top_m { position: absolute; width: 22.894%; left: 38.526%; top: 0; margin-top: 1.578%; }
.top_l { position: absolute; width: 22.842%; left: 26.105%; top: 0; margin-top: 1.578%; }

.hbg {
    position: relative;
    width: 100%;
    background-color: #000;
}
.cbg {
    position: relative;
    min-width: 1200px;
    background-color: #000;
}
.bg_1 {
    background-blend-mode: multiply;
    background-image: url(../images/intro/bg_1_ovr.png),url(../images/intro/bg_r.jpg);
    background-position: center top,center top;
    background-repeat: no-repeat,repeat-y;
    background-size: auto 100%, 1900px auto;
}
.bg_1 .contents {
    z-index: 2;
}
.bg_2 {
    background: url(../images/movie/bg_2.jpg) center top repeat-y #000;
}
.contents h2 {
    position: relative;
    width: 135.25%;
    margin-left: -17.625%;
}
.contents hr {
    position: relative;
    width: 158.333%;
    border: none;
    margin: 0 0 0 -29.166%;
    padding: 0;
}
.bg_1 .contents:before {
    content: "";
    position: relative;
    display:block;
    padding-bottom: 2.3%;
}
.bg_1 .contents:after {
    content: "";
    position: relative;
    display:block;
    padding-bottom: 0%;
}
.intro_box {
    position: relative;
    width: 73.333%;
    margin: 0 0 5% 12%;
}
.intro_box:before {
    content: "";
    display: block;
    position: relative;
    padding-top: 47.619%;
}
.intro_box.awm {
    background: url(../images/intro/bg_awm.png) center top no-repeat;
    background-size: 100% 100%;
}
.intro_box.mcl {
    background: url(../images/intro/bg_mcl.png) center top no-repeat;
    background-size: 100% 100%;
}
.intro_box.mtn {
    background: url(../images/intro/bg_mtn.png) center top no-repeat;
    background-size: 100% 100%;
}

.intro_box.awm h3 { position: absolute; width: 22.613%; left: 61.931%; top: 0; margin-top: 9.204%; }
.intro_box.mcl h3 { position: absolute; width: 21.022%; left: 16.59%; top: 0; margin-top: 3.977%;}
.intro_box.mtn h3 { position: absolute; width: 34.318%; left: 56.136%; top: 0; margin-top: 10.227%; }

.intro_box .img {
    position: absolute;
    top: 0;
    width: 38.977%;
    height: 89.498%;
    overflow: hidden;
}
.intro_box.awm .img {
    left: 7.613%;
    margin-top: 2.5%;
}
.intro_box.mcl .img {
    left: 53.75%;
    margin-top: 1.59%;
}
.intro_box.mtn .img {
    left: 7.613%;
    margin-top: 3.295%;
    margin-bottom: 0;
}

#content .intro_box p {
    position: absolute;
    width: 29.318%;
    height: 53.221%;
    top: 0;
    font-family: 'Noto Serif JP', serif;
    color: #fff;
    font-size: 18px;
    line-height: 1.68;
}
#content .intro_box.awm p {
    left: 58.522%; 
    margin-top: 19.772%;
}
#content .intro_box.mcl p {
    left: 12.5%;
    margin-top: 25.681%;
    height: 44.391%;
}
#content .intro_box.mtn p {
    left: 58.522%;
    margin-top: 22.272%;
}

.intro hr {
    padding-top: 2.416%;
    background: url(../images/intro/hr_intro.png) center top no-repeat;
    background-size: 100% auto;
}

.bg_1_2 {
    background-blend-mode: multiply;
    background-image: url(../images/intro/bg_1_2_ovr_1.png),url(../images/intro/bg_1_2_ovr_2.png),url(../images/intro/bg_r.jpg);
    background-position: center top,center bottom,center top;
    background-repeat: no-repeat,no-repeat,repeat-y;
    background-size: 1900px auto, 1900px auto, 1900px auto;
}

.blandmenu ul {
    display: flex;
    width: 68.5%;
    margin: 0 auto 2.16% auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 3.25%;
}
.blandmenu li {
    position: relative;
    width: 30.413%;
    margin: 0 1.459% 1.459% 1.459%;
}
.blandmenu a {
    display: block;
    filter: brightness(50%);
}
.all .blandmenu a[data-type="all"],
.awm .blandmenu a[data-type="awm"], 
.mcl .blandmenu a[data-type="mcl"], 
.mtn .blandmenu a[data-type="mtn"], 
.etc .blandmenu a[data-type="etc"]
{
    filter: brightness(100%);
}

.items ul {
    display: flex;
    width: 66.667%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
}
.items li {
    position: relative;
    width: 22.5%;
    margin-bottom: 3.5%;
    display: none;
}
.itemlist.awm .items ul li,
.itemlist.mcl .items ul li,
.itemlist.mtn .items ul li,
.itemlist.etc .items ul li {
    display: none;
}

#content .itemlist .items ul li.limitover {
    display: none;
}

.itemlist.all .items ul li {
    display: block;
}

.itemlist.awm .items ul li[data-type="awm"] {
    display: block;
}

.itemlist.mcl .items ul li[data-type="mcl"] {
    display: block;
}

.itemlist.mtn .items ul li[data-type="mtn"] {
    display: block;
}

.itemlist.etc .items ul li[data-type="etc"] {
    display: block;
}
.items ul:before {
    content: "";
    order: 1;
    width: 22.5%;
    display: block;
}
.items ul:after {
    content: "";
    width: 22.5%;
    display: block;
}
.items ul:after {
    content: "";
    width: 22.5%;
    display: block;
}
.items li a {
    display: block;
}
.items li a span.itemframe {
    position: relative;
    display: block;
}
.items li a span.itemframe:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/itemlist/itemframe.png) center top no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.items li a img {
    width: 94.444%;
    padding: 2.77%;
}
.items li a  {
    font-size: 12px;
    color: #fff;
    text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
}
.items li a span.itemtitle {
    display: block;
    padding-top: 3%;
    line-height: 1.2;
}
.items li span.new,
.blandmenu li span.new {
    display: block;
    position: absolute;
    left: -1%;
    top: 0;
    margin-top: -1%;
    width: 30%;
    height: 0;
    padding-top: 15%;
    box-sizing: border-box;
    background: url(../images/itemlist/new.png) center top no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.blandmenu li span.new {
    width: 20%;
    padding-top: 10%;
}
.itemlist hr {
    padding-top: 3%;
    background: url(../images/itemlist/hr_itemlist.png) center top no-repeat;
    background-size: 100% auto;
}
.btn_more {
    position: relative;
    width: 20.75%;
    margin: 2% auto 0% auto;
}
.bg_1_2 .contents:after {
    content: "";
    position: relative;
    display: block;
    padding-bottom: 2.83%;
}
.alldisp .btn_more {
    display: none;
}
.movie hr {
    padding-top: 2.416%;
    background: url(../images/movie/hr_movie.png) center top no-repeat;
    background-size: 100% auto;
}
.movielist {
    margin-top: 3.33%;
}
.movie .yt {
    width: 80.333%;
    margin: 0 auto 3% auto;
}
.topics {
    padding-bottom: 5%;
}
.topics hr {
    padding-top: 3.75%;
    background: url(../images/topics/hr_topics.png) center top no-repeat;
    background-size: 100% auto;
}

.topics_main {
    position: relative;
    width: 66.667%;
    padding: 0.416%;
    margin: 3% auto 0 auto;
}
.topics img {
    display: block;
    width: 100%;
}
.topics_main:after {
    content: "";
    display: block;
    position: relative;
    padding-top: 125%;
}
.topics_main .swiper {
    position: absolute;
    padding: 0.6175%;
    width: 98.765%;
    height: 99.124%;
    background-color: #000;
    overflow: hidden;
}
.topics_main .swiper:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/topics/topicsframe.png) center top no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
.topics .swiper-button-next,
.topics .swiper-button-prev {
    width: 6.583%;
    height: 0px;
    padding-top: 12.75%;
    margin-top: 0;
    transform: translateY(-50%);
    background: url(../images/topics/topics_r.png) center top no-repeat;
    background-size: auto 100%;
    right: -10%;
    transition-duration: 0.2s;
}
.topics .swiper-button-prev {
    background-image: url(../images/topics/topics_l.png);
    left: -10%;
}
.topics .swiper-button-prev:hover,
.topics .swiper-button-next:hover {
    filter: brightness(150%);
}



.copyright {
    font-size: 12px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #fff;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.75rem;
}



@media screen and (min-width:1901px) {
    .topkv_main {
        min-width: initial; min-width: auto;
        overflow-x: hidden;
        width: 100%;
        left: auto;
        margin-left: 0;
    }
}
@media screen and (max-width:1559px) {
    .topkv {
        min-width: 1200px;
    }
    .topkv_main {
        position: relative;
        left: auto;
        width: 130%;
        margin-left: -15%;
    }
}
/*
@media screen and (max-width:1199px) {
    .topkv_main {
        position: relative;
        left: auto;
        width: 130%;
        margin-left: -15%;
    }
    .contents {
        min-width: initial; min-width: auto;
        overflow-x: hidden;
        width: 100%;
    }
    .bg_1 {
        background-size: 158.333% auto;
    }
    .bg_2 {
        background-size: 158.333% auto;
    }
    .items li a  {
        font-size: 11px;
        text-shadow:
        2px 2px 0 #000,
        -2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000;
    }
}
*/
@media screen and (max-width:767px) {
    .topkv,.cbg {
        min-width: initial; min-width: auto;
    }
    .contents {
        min-width: initial; min-width: auto;
        overflow-x: hidden;
        width: 100%;
    }
    .bg_1, .bg_1_2, .bg_2 {
        background-size: 158.333% auto;
    }
    .bg_1 {
        background-blend-mode: multiply;
        background-image: url(../images/intro/bg_1_ovr_sp.png),url(../images/intro/bg_r.jpg);
        background-size: 100% 100%, 158.333% auto;
    }
    .items li a  {
        font-size: 11px;
        text-shadow:
        2px 2px 0 #000,
        -2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000;
    }
    .topkv_main {
        position: relative;
        left: auto;
        /*
        width: 130%;
        margin-left: -15%;
        */
        width: 220%;
        margin-left: -60%;
    }

    .slider {
        width: 80.58%;
    }
    .swiper-pagination {
        width: 80.58%;
    }
    #wrap .box {
        margin: 0 auto;
        width: 100%;
    }
    footer {
        padding: 3% 0;
        box-sizing: border-box;        
    }
    footer #box_inner #footer_sns {
        position: relative;
        top: auto;
        left: auto;
        padding-top: 2%;
    }
    .groupLogo{position: static;}

    .toptitle h1 {
        position: relative;
        width: 180%;
        margin-left: -40%;
    }
    .contents h2 {
        position: relative;
        width: 240%;
        margin-left: -70%;
    }
    .intro_box {
        width: 100%;
        margin-left: 0;
    }
    #content .intro_box p {
        width: 35%;
        font-size: 2.3vw;
    }
    #content .intro_box.awm p {
        left: 57.522%; 
    }
    #content .intro_box.mcl p {
        left: 10.5%;
    }
    #content .intro_box.mtn p {
        left: 57.522%;
    }    
    .blandmenu ul {
        width: 96%;
    }
    .blandmenu li span.new {
        width: 30%;
        padding-top: 15%;
    }
    .items ul {
        width: 88%;
    }
    .items ul:before,
    .items ul:after {
        width: 48%;
    }
    .items li {
        width: 48%;
    }
    .btn_more {
        width: 30%;
    }
    .movielist {
        margin-top: 5%;
        padding-bottom: 2%;
    }
    .movie .yt {
        width: 88%;
        margin-bottom: 4%;
    }
    .yt span.new {
        left: -1%;
        top: 0;
        margin-top: -5%;
        width: 12%;
        height: 0;
        padding-top: 6%;
        box-sizing: border-box;
        background: url(../images/movie/movie_new.png) center top no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
    }
    .topics_main {
        width: 80%;
    }
}

[data-aos="flash"] {
    transition-property: filter;
    filter: brightness(250%);
}

[data-aos="flash"].aos-animate {
    filter: brightness(100%);
}
