@charset "UTF-8";
/* system */
#system .contents:before {
  content: "";
  display: block;
  padding-bottom: 3.897%;
}
#system .contents:after {
  content: "";
  display: block;
  padding-bottom: 10.22%;
}
#system .framehead, #system .framebody {
  background-color: #FF7BAC;
}

.system_bg {
  position: absolute;
  overflow-x: hidden;
  left: 0;
  top: -175px;
  width: 100%;
  height: 0;
  padding-top: 1654px;
  background-image: url("../images/top/s1/system_bg.png");
  background-image: -webkit-image-set(url("../images/top/s1/system_bg.webp") type("image/webp"), url("../images/top/s1/system_bg.png") type("image/png"));
  background-image: image-set(url("../images/top/s1/system_bg.webp") type("image/webp"), url("../images/top/s1/system_bg.png") type("image/png"));
  background-size: 1920px 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1920px) {
  .system_bg {
    background-size: 100% 100%;
  }
}
@media screen and (max-width: 1360px) {
  .system_bg {
    top: -9.115vw;
    background-size: 141.176% auto;
    padding-top: 121.617vw;
  }
}

#s1_g1 {
  position: absolute;
  width: 25.806%;
  left: -22.823%;
  top: 0;
  margin-top: 4.596%;
  animation: a_rot_l 180s linear infinite;
  pointer-events: none;
}

#s1_g2 {
  position: absolute;
  width: 20.161%;
  left: 89.919%;
  top: 0;
  margin-top: 22.983%;
  animation: a_rot_r 180s linear infinite;
  pointer-events: none;
}

#s1_g3 {
  position: absolute;
  width: 37.661%;
  left: 86.209%;
  top: 0;
  margin-top: 65.403%;
  animation: a_rot_l 180s linear infinite;
  pointer-events: none;
}

.picframe {
  box-sizing: border-box;
  border-radius: 8px;
}
@media screen and (max-width: 1360px) {
  .picframe {
    border-radius: 0.5882352941vw;
  }
}
.picframe {
  border: 8px solid #fff;
  border-width: 8px;
}
@media screen and (max-width: 1360px) {
  .picframe {
    border-width: 0.5882352941vw;
  }
}
.picframe {
  width: 43.225%;
  box-shadow: 16px 16px 0px 0px rgba(0, 0, 0, 0.37);
}
@media screen and (max-width: 1360px) {
  .picframe {
    box-shadow: 1.1764705882vw 1.1764705882vw 0vw 0vw rgba(0, 0, 0, 0.37);
  }
}
#s1_2 .picframe, #s1_3 .picframe {
  width: 42.903%;
}

#s1_1 #s1_1_tx1 {
  position: relative;
  width: 80.322%;
  margin-left: 8.951%;
  padding-top: 2.661%;
  margin-bottom: 1.451%;
}
#s1_1 .s1_info {
  position: relative;
  width: 91.37%;
  margin-left: 3.387%;
  margin-top: -percent-decimal(0.0064516129);
  padding-bottom: 2.419%;
  display: flex;
  justify-content: flex-start;
}
#s1_1 .s1_info .info_text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#s1_1 .s1_info .info_text p {
  position: relative;
  margin-top: -percent-decimal(0.0064516129);
  padding: 2.419% 0 2.419% 45%;
  width: calc(55% - 8px);
  background-color: #fff;
  border-radius: 8px;
}
@media screen and (max-width: 1360px) {
  #s1_1 .s1_info .info_text p {
    border-radius: 0.5882352941vw;
  }
}
#s1_1 .s1_info .info_text p {
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 25px;
}
@media screen and (max-width: 1360px) {
  #s1_1 .s1_info .info_text p {
    font-size: 1.8382352941vw;
  }
}
#s1_1 .s1_info .info_text p {
  line-height: 1.44;
  color: #ff7bac;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#s1_1 .s1_info .info_text p#s1_1_tx2 {
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 35px;
}
@media screen and (max-width: 1360px) {
  #s1_1 .s1_info .info_text p#s1_1_tx2 {
    font-size: 2.5735294118vw;
  }
}
#s1_1 .s1_info .info_text p#s1_1_tx2 {
  line-height: 1.28;
}
#s1_1 .s1_info .info_text p#s1_1_tx4 {
  padding-top: 1.209%;
  padding-bottom: 1.209%;
}
#s1_1 .s1_info:first-child {
  margin-top: 0;
}
#s1_1 .s1_info:nth-child(2n+1) {
  justify-content: flex-end;
}
#s1_1 .s1_info:nth-child(2n+1) .info_text p {
  padding-left: 0;
  padding-right: 45%;
  margin-left: 0.645%;
  color: #7ac943;
}
#s1_1 .s1_info .picframe {
  z-index: 2;
}

#s1_2, #s1_3 {
  overflow: hidden;
}
#s1_2 .sslist, #s1_3 .sslist {
  position: relative;
  width: 100%;
  margin: 1.612% auto 0.483% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#s1_2 .sslist .picframe, #s1_3 .sslist .picframe {
  margin-left: 6.854%;
  margin-bottom: 2.741%;
}
#s1_2 .sslist .picframe:nth-child(2n), #s1_3 .sslist .picframe:nth-child(2n) {
  margin-left: 0;
  margin-right: 3.951%;
}
#s1_2 .s1_g4, #s1_3 .s1_g4 {
  position: absolute;
  right: -5.646%;
  bottom: 0;
  margin-bottom: -5.484%;
  width: 16.048%;
  height: 0;
  padding-top: 15.967%;
  background-image: url(../images/top/s1/s1_g4.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  animation: a_rot_l 120s linear infinite;
  pointer-events: none;
}

#s1_2 {
  padding-top: 2.822%;
}

#s1_2_bg {
  position: relative;
  width: 93.951%;
  margin: 0 0 0 4.516%;
  padding-top: 40%;
  background-image: url("../images/top/s1/2/s1_2_bg.png");
  background-image: -webkit-image-set(url("../images/top/s1/2/s1_2_bg.webp") type("image/webp"), url("../images/top/s1/2/s1_2_bg.png") type("image/png"));
  background-image: image-set(url("../images/top/s1/2/s1_2_bg.webp") type("image/webp"), url("../images/top/s1/2/s1_2_bg.png") type("image/png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#s1_2_bg h3 {
  position: absolute;
  width: 71.931%;
  left: 1.459%;
  top: 0;
  margin-top: 2.832%;
}
#s1_2_bg p {
  position: absolute;
  width: 63.776%;
  height: 42.338%;
  left: 18.712%;
  top: 0;
  margin-top: 19.742%;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 29px;
}
@media screen and (max-width: 1360px) {
  #s1_2_bg p {
    font-size: 2.1323529412vw;
  }
}
#s1_2_bg p {
  line-height: 1.6;
  color: #ff7bac;
  text-align: center;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  letter-spacing: 2px;
}

#s1_2_bg2 {
  position: relative;
  width: 93.951%;
  padding-top: 29.193%;
  margin: 0 0 0 4.516%;
  background-image: url("../images/top/s1/2/s1_2_bg2.png");
  background-image: -webkit-image-set(url("../images/top/s1/2/s1_2_bg2.webp") type("image/webp"), url("../images/top/s1/2/s1_2_bg2.png") type("image/png"));
  background-image: image-set(url("../images/top/s1/2/s1_2_bg2.webp") type("image/webp"), url("../images/top/s1/2/s1_2_bg2.png") type("image/png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#s1_2_bg2 p {
  position: absolute;
  width: 93.905%;
  height: 97.79%;
  left: 0%;
  top: 0;
  margin-top: 0%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 43px;
}
@media screen and (max-width: 1360px) {
  #s1_2_bg2 p {
    font-size: 3.1617647059vw;
  }
}
#s1_2_bg2 p {
  line-height: 1.48;
  color: #7ac943;
  text-align: center;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  letter-spacing: 2px;
}

#s1_2_tx4 {
  position: absolute;
  width: 44.2%;
  padding-left: 50%;
  padding-right: 5.8%;
  height: 90%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 35px;
}
@media screen and (max-width: 1360px) {
  #s1_2_tx4 {
    font-size: 2.5735294118vw;
  }
}
#s1_2_tx4 {
  line-height: 1.28;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 6px #ff7bac;
  paint-order: stroke fill;
  letter-spacing: 1px;
}

#s1_3 {
  padding-top: 5.645%;
}
#s1_3 h3 {
  position: relative;
  width: 93.387%;
  margin: 0 0 2.9% 4.516%;
}
#s1_3 .sslist {
  margin-bottom: 3.548%;
}
#s1_3 .s1_g4 {
  animation-name: a_rot_r;
}

#s1_3_bg {
  position: relative;
  width: 93.951%;
  margin: 0 0 2.09% 4.516%;
  padding-top: 40.322%;
  background-image: url("../images/top/s1/3/s1_3_bg.png");
  background-image: -webkit-image-set(url("../images/top/s1/3/s1_3_bg.webp") type("image/webp"), url("../images/top/s1/3/s1_3_bg.png") type("image/png"));
  background-image: image-set(url("../images/top/s1/3/s1_3_bg.webp") type("image/webp"), url("../images/top/s1/3/s1_3_bg.png") type("image/png"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#s1_3_bg p {
  position: absolute;
  width: 95.193%;
  height: 100%;
  left: 0%;
  top: 0;
  margin-top: 0%;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 29px;
}
@media screen and (max-width: 1360px) {
  #s1_3_bg p {
    font-size: 2.1323529412vw;
  }
}
#s1_3_bg p {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  line-height: 1.6;
  color: #ff7bac;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  letter-spacing: 2px;
}

/* movie */
#moviespec {
  position: relative;
  width: 100%;
}

#movie {
  z-index: 2;
}
#movie .contents:before {
  content: "";
  display: block;
  padding-bottom: 3.897%;
}
#movie .contents:after {
  content: "";
  display: block;
  padding-bottom: 14.117%;
}
#movie .framehead, #movie .framebody {
  background-color: #67C7F2;
}

.moviespec_bg {
  position: absolute;
  overflow-x: hidden;
  left: 0;
  top: -179px;
  width: 100%;
  height: 0;
  padding-top: 2110px;
  background-image: url("../images/top/movie/moviespec_bg.png");
  background-image: -webkit-image-set(url("../images/top/movie/moviespec_bg.webp") type("image/webp"), url("../images/top/movie/moviespec_bg.png") type("image/png"));
  background-image: image-set(url("../images/top/movie/moviespec_bg.webp") type("image/webp"), url("../images/top/movie/moviespec_bg.png") type("image/png"));
  background-size: 1920px 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1920px) {
  .moviespec_bg {
    background-size: 100% 100%;
  }
}
@media screen and (max-width: 1360px) {
  .moviespec_bg {
    top: -9.323vw;
    background-size: 141.176% auto;
    padding-top: 155.147vw;
  }
}

/*
.movie_bg {
    position: absolute;
    overflow-x:hidden;
    left: 0;
    top: -179px;
    width: 100%;
    height: 0;
    padding-top: 1148px;
    background: url(../images/top/movie/movie_bg.webp) center top no-repeat;
    background-size: $bp-pc-max * 1px auto;
    @include media-min($bp-pc-max) {
        top: -9.322vw;
        background-size: 100% auto;
        padding-top: 59.791vw;
    }
    @include media-max($bp-sp) {
        top: -9.322vw;
        padding-top: 59.791vw;
        background-size: 141.176% auto;
    }
}
*/
.movieframe {
  position: relative;
  width: 78.225%;
  padding-top: 45.161%;
  margin: 5% auto;
  background-color: #fff;
}
.movieframe a {
  position: absolute;
  width: 96.701%;
  height: 94.107%;
  left: 1.649%;
  top: 0;
  margin-top: 1.752%;
  display: block;
  transition-duration: 0.2s;
  overflow: hidden;
}
.movieframe a:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/movie/movie_arrow.png) center center no-repeat;
  background-size: 11.784% auto;
  transition-duration: 0.2s;
}
.movieframe a img {
  display: block;
  width: 100%;
  transition-duration: 0.2s;
}
.movieframe a:hover:after {
  background-size: 20% auto;
}
.movieframe a:hover img {
  filter: brightness(110%);
  transform: scale(1.1);
}

/* spec */
#spec_tank {
  position: absolute;
  width: 36.612%;
  left: 60.887%;
  bottom: 1px;
}

#spec_g2 {
  position: absolute;
  width: 37.661%;
  left: -16.613%;
  top: 0;
  margin-top: 38.87%;
  animation: a_rot_l 180s linear infinite;
  pointer-events: none;
}

#spec_g1 {
  position: absolute;
  width: 25.806%;
  left: 85.564%;
  top: 0;
  margin-top: -19.194%;
  animation: a_rot_r 180s linear infinite;
  pointer-events: none;
}

#spec {
  position: relative;
}
#spec .contents:after {
  content: "";
  display: block;
  padding-bottom: 14.117%;
}
#spec .framehead, #spec .framebody {
  background-color: #A9D4A2;
}
#spec .framebody {
  padding: 4.354% 13.629%;
}

/*
.spec_bg {
    position: absolute;
    overflow-x:hidden;
    left: 0;
    top: -117px;
    width: 100%;
    height: 0;
    padding-top: 1176px;
    @include webp-background-png("../images/top/spec/spec_bg.webp", "../images/top/spec/spec_bg.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: $bp-pc-max * 1px auto;
    @include media-min($bp-pc-max) {
        top: -8.602vw;
        background-size: 100% auto;
        padding-top: 61.25vw;
    }
    @include media-max($bp-sp) {
        top: -8.602vw;
        padding-top: 61.25vw;
        background-size: 141.176% auto;
    }
}
*/
#spec_main {
  position: relative;
  background-color: #fff;
}
#spec_main .spec_i {
  position: relative;
  width: 95.344%;
  padding: 1.662% 2.328%;
  line-height: 2;
}
#spec_main .spec_i dl {
  position: relative;
  display: flex;
  justify-content: flex-start;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 24px;
}
@media screen and (max-width: 1360px) {
  #spec_main .spec_i dl {
    font-size: 1.7647058824vw;
  }
}
#spec_main .spec_i dl {
  margin-bottom: 1.816%;
}
#spec_main .spec_i dl dt {
  width: 19.733%;
  margin-right: 2.954%;
  background-color: #FF7BAC;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
#spec_main .spec_i dl dd {
  color: #000;
  flex: 1;
}
#spec_main .spec_i dl:last-child {
  margin-bottom: 0;
}

#null {
  position: absolute;
  width: 19.733%;
  left: 2.328%;
  top: 0;
  margin-top: 1.662%;
}

#box2 {
  position: absolute;
  width: 64.583%;
  left: 17.708%;
  top: 0;
  margin-top: 180.052%;
}

#null {
  position: absolute;
  width: 46.979%;
  left: 26.51%;
  top: 0;
  margin-top: 182.864%;
}

/*
#spec>.contents:before {
    content: "";
    display: block;
    padding-top: 6.738%;
}
#spec>.contents:after {
    content: "";
    display: block;
    padding-bottom: 2.05%;
}
#spec_frame {
    position: relative;
    width: 101.953%;
    margin: 0 0 0 -0.9765%;
    border-bottom: 10px solid #000;
    @include set-border-width(10);
}
#spec_main {
    position: relative;
    box-sizing: content-box;
    border: 7px solid #fff;
    @include set-border-width(7);
    background-color: #FFFFE8;
    h2 {
        width: 100%;
        background-color: #FFDC82;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            display: block;
            width: 25.9%;
            height: auto;
            @include media-max($bp_sp) {
                width: 40%;
            }            
        }
    }
    .spec_i {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .spec_l {
            width: 26.9%;
            @include media-max($bp_sp) {
                width: 20%;
            }            
        }
        .spec_r {
            position: relative;
            flex: 1;
            dl {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                color: #000;
                background-color: #fff;
                &:nth-child(even)
                {
                    background-color: #FFFFB9;
                }
                dt {
                    display: flex;
                    width: 15.817%;
                    justify-content: center;
                    align-items: center;
                    @include set-fonts(900);
                    @include set-font-size-min(16, 9);
                    border-right: 2px solid #000;
                    @include set-border-radius-px(2);
                    margin: 0.938% 0;
                    @include media-max($bp_sp) {
                        font-feature-settings: "palt";
                        width: 18%;
                    }            
                }
                dd {
                    position: relative;
                    padding: 2% 2.8% 2.81% 2.4%;
                    @include set-fonts(700);
                    @include set-font-size-min(15, 10);
                    font-feature-settings: "palt";
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                }
                &.spec_platform dd img {
                    width: 16.8%;
                    height: auto;
                    display: block;
                }
                &.spec_etc dd {
                    text-indent: -1em;
                    margin-left: 1em;
                }
            }
        }
    }
}
*/