@charset "utf-8";

#content { position: relative; margin: 0; padding: 0;}
#lovl {
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    z-index: 10000;
    background: #90ACA2;
}
#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: 4em;
  height: 4em;
}
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -2em;
    margin-top: -2em;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s 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;
    margin: 0 auto;
    min-width: 1200px;
    font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-image: url(/megahobby/event/spy-family/images/common/bg.png),url(/megahobby/event/spy-family/images/common/bgs.png);
    background-position: center top, center top;
    background-repeat: repeat-y, repeat-x;
    background-color: #4E6865;
}
.contents a {
    display: block;
    transition-duration: 0.2s;
}
.contents a:hover {
    filter: brightness(150%);
    transform: scale(1.1);
}
.contents img {
    display: block;
    width: 100%;
    border: 0;
}


.sfmain {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}
.sfmain h1 {
    position: relative;
    width: 100%;
    padding-top: 33.91%;
    height: 0;
    z-index:2;
}
#logo1 { position: absolute; width: 85.58%; left: 7.66%; top: 0; margin-top: 6.16%; }
#logo2 { position: absolute; width: 61.5%; left: 19.66%; top: 0; margin-top: 21.58%; }

.sfmaintop:before {
    position: relative;
    content: "";
    display: block;
    padding-top: 6.16%;
}
#topslider {
    position: relative;
    width: 77.16%;
    padding: 1.83% 1.83% 0 1.83%;
    margin: 0 auto;
    background-color: #B9AA99;
    border: 2px solid #224341;
    box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.3);
    z-index: 2;
}
#ar { position: absolute; width: 3.11%; left: 57.22%; top: 86.81%; }
#al { position: absolute; width: 3.11%; left: 39.51%; top: 86.81%; }
#history { position: absolute; width: 9.27%; left: 45.36%; top: 0; margin-top: 62.5%; z-index: 2;}

.swiper-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
    box-sizing: content-box;
    border: 2px solid #000;
}
.gallery-top .swiper-slide {
    padding-top: 56.8%;
    overflow: hidden;
}
.gallery-top .swiper-slide iframe {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.contents .gallery-top a {
    display: block;
    transition-duration: 0.2s;
}
.contents .gallery-top a:hover {
    filter: brightness(110%);
}

.gallery-thumbs {
  box-sizing: border-box;
  padding: 1.83% 0;
}

.gallery-thumbs .swiper-slide:before {
    position: relative;
    content:"";
    display: block;
    padding-top: 56.8%;
}
.gallery-thumbs .swiper-slide {
    left: 0;
    top: 0;
    cursor: pointer;
}
.gallery-thumbs .swiper-button-prev {
    width: 2.23%;
    height: 0px;
    padding-top: 4.17%;
    margin-top: -2.05%;
    background: url(/megahobby/event/spy-family/images/al.png) center top no-repeat;
    background-size: auto 100%;
    left: 40%;
}
.gallery-thumbs .swiper-button-next {
    width: 2.23%;
    height: 0px;
    padding-top: 4.17%;
    margin-top: -2.05%;
    background: url(/megahobby/event/spy-family/images/ar.png) center top no-repeat;
    background-size: auto 100%;
    right: 40%;
}
.gallery-thumbs .swiper-slide {
    transition-duration: 0.2s;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 0;
}


#items {
    position: relative;
    width: 96%;
    margin: 7.41% auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 2;
}
.item {
    position: relative;
    width: 31.59%;
}
.item:after {
    z-index: 1;
    position: relative;
    content: "";
    display: block;
    padding-top: 38.18%;
}
.itempic {
    position: relative;
    z-index: 3;
    box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.3);
}
.itembtn {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 93.40%;
    margin: 106.04% 0 0 3.3%;
    display: flex;
    justify-content: space-between;
}
.itembtn.itemcenter {
    justify-content: center;
}
.itembt1,.itembt2,.itembt3 {
    position: relative;
    width: 46.17%;
    box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.3);
}
.itembt1:before,
.itembt2:before,
.itembt3:before {
    z-index: 1;
    position: absolute;
    content: "";
    display: block;
    left: 50%;
    top: -100%;
    width: 1.27%;
    min-width: 2px;
    background-color: #000;
    padding-top: 50%;
}
.itembt1 a,
.itembt2 a,
.itembt3 a {
    position: relative;
    z-index: 2;
}

#btn_i {
    position: relative;
    width: 88.58%;
    padding-top: 22.5%;
    margin: 1% 0 0 7.33%;
    z-index: 2;
}
#btn_c1 { position: absolute; display: block; width: 24.92%; left: 0%; top: 0; margin-top: 0%;  z-index: 2; pointer-events: none;}
#btn_c2 { position: absolute; display: block; width: 81.84%; left: 7.9%; top: 0; margin-top: 7.43%;}
#btn_c3_pc { position: absolute; display: block; width: 14.29%; left: 85.7%; top: 0; margin-top: 4.51%;  z-index: 2; pointer-events: none; }
#btn_c3_sp { display: none; pointer-events: none; }

#btn_i a:hover {
    filter: brightness(120%);
    transform: scale(1.05) rotate(1deg);
}


.copyright {
    margin-top: 0.83%;
    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;
    padding-bottom: 4.08%; 
}

#sfbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}
#sfbg_pc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#sfbg_sp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}
#sfbgpc1 { position: absolute; width: 15.08%; left: 84%; top: 0; margin-top: 40.08%; }
#sfbgpc2 { position: absolute; width: 14.75%; left: -6.59%; top: 0; margin-top: 76%; }
#sfbgpc3 { position: absolute; width: 20.16%; left: 0.08%; top: 0; margin-top: 82.58%; }
#sfbgpc4 { position: absolute; width: 20%; left: 84.58%; top: 0; margin-top: 93.75%; }
#sfbgpc5 { position: absolute; width: 14.91%; left: 96.3%; top: 0; margin-top: 136.21%; }
#sfbgpc6 { position: absolute; width: 18.75%; left: -6.75%; top: 0; margin-top: 173.05%; }



footer {
    position: relative;
}
#twitter-widget-0 {
    vertical-align: top;
}
footer .box {
    position: relative;
}
footer #box_inner #footer_sns {
    position: absolute;
    top: 90px;
    left: 0;
}
@media screen and (max-width:767px) {
    .contents {
        min-width: initial; min-width: auto;
        background: url(/megahobby/event/spy-family/images/common/bg_sp.png) center top no-repeat #4E6865;
        background-size: 100% auto;
        overflow-x: hidden;
    }

    .sfmain { width: 100%; }
    .sfmain h1 {
        padding-top: 36.8%;
    }
    #logo1 { width: 81.1%; left: 10.1%; margin-top: 8.7%; }
    #logo2 { width: 58.9%; left: 20.7%; margin-top: 22.6%; }
    
    #history { margin-top: 61.85%;}

    #topslider {
        position:relative;
        width: 84.4%;
        padding: 1.41% 2.2% 0% 2.2%;
        margin: 0% 0 0 5.6%;
        box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
    }    
    #items {
        position: relative;
        width: 87%;
        margin: 10% auto 0 auto;
    }
    
    .item {
        position: relative;
        width: 48.96%;
    }
    .item:after {
        z-index: 1;
        position: relative;
        content: "";
        display: block;
        padding-top: 36.17%;
    }
    .itempic {
        box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.3);
    }
    .itembt1,.itembt2,.itembt3 {
        margin-bottom: 7.1%;
    }
    #btn_i {
        position: relative;
        width: 79.1%;
        padding-top: 19.8%;
        margin: 2.1% 0 0 10.3%;
    }
    #btn_c1 { position: absolute; width: 27.43%; left: 0%; top: 0; margin-top: 4.17%; z-index: 3; }
    #btn_c2 { position: absolute; width: 94.05%; left: 3.91%; top: 0; margin-top: 13.65%; z-index: 2; }
    #btn_c3_pc { display: none; }
    #btn_c3_sp { display: block; position: absolute; width: 17.95%; left: 82.04%; top: 0; margin-top: 0%; }
    
    .copyright {
        margin-top: 13%;
        padding-bottom: 9.0%;
    }
    #sfbg_pc {
        display: none;
    }
    #sfbg_sp {
        display: block;
    }
    #sfbgsp1 { position: absolute; width: 23.7%; left: 1.3%; top: 0; margin-top: 92.7%; }
    #sfbgsp2 { position: absolute; width: 30.2%; left: 57.1%; top: 0; margin-top: 206.6%; }
    #sfbgsp3 { position: absolute; width: 16.87%; left: 55.62%; top: 0; margin-top: 345.31%; }
    #sfbgsp4 { position: absolute; width: 27.7%; left: 64.06%; top: 0; margin-top: 367.18%; }

    #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%;
    }
    #twitter-widget-0 {
    }
    .groupLogo{position: static;}
}

[data-aos="check"] {
    transition-property: transform,opacity;
    transform: translateZ(0);
    -webkit-transform: translateX(-200%) scale(1.75) rotate(-365deg);
    transform: translateX(-200%) scale(1.75) rotate(-355deg);
    opacity: 0;
}

[data-aos="check"].aos-animate {
    -webkit-transform: translateX(0) scale(1) rotate(0deg);
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
}