@charset "utf-8";
/* CSS Document */

/* 基本 */

html {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: #000;
  color: #fff;
}
body {
  position: relative;
  width: 100%;
  min-height: 100%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Roboto",
    "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
}
ul,
ol {
  list-style: none;
}
h1 {
  font-size: 0px;
  line-height: 0px;
}

/*  */
.column {
  display: none;
}
.anchor {
  font-size: 0px;
  line-height: 0px;
  width: 0%;
  height: 0%;
}

.column-text {
  display: none;
}
section {
  box-sizing: border-box;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.inner {
  box-sizing: border-box;
  width: 100%;
}
header {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
span img {
  width: 100%;
}

#btn-nav-wrapper {
  box-sizing: border-box;
  position: fixed;
  max-width: 1000px;
  margin: auto;
  width: 100%;
  height: 0;
  z-index: 300;
  top: 0;
  right: 0;
}
a#btn-nav {
  box-sizing: border-box;
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  margin: 2% 0% 0 0;
  overflow: hidden;
  width: 22%;
  z-index: 9300;
}
@media (min-width: 1000px) {
  a#btn-nav {
    width: 15%;
  }
}
a#btn-nav img {
  width: 100%;
}

#wrapper {
  margin: auto;
}
/* 全体の背景 */
#wrapper::before {
  background-image: url("../images/001.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-size: contain;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  margin: auto;
  padding-bottom: 0px;
  content: "";
  z-index: -1;
}

#wrapper {
  overflow: hidden;
}

@media (max-width: 1000px) {
  #wrapper::before {
    background-size: cover;
    background-size: contain;
    background-size: 170% auto;
  }
}

/* #section-01 TOP */
#section-01 .slider,
.sliderDummy {
  width: 100%;
  padding-top: 26%;
  margin: auto;
}
@media (min-width: 1000px) {
  #section-01 .slider,
  .sliderDummy {
    width: 40%;
    padding-top: 16%;
  }
}

.swiper-slide {
  vertical-align: middle;
}
.swiper-slide img {
  width: 100%;
  vertical-align: middle;
}
.swiper-slide a {
  display: block;
  margin: auto;
  width: 70%;
  vertical-align: middle;
}
@media (min-width: 1000px) {
  .swiper-slide a {
    width: 80%;
  }
}

#section-01 .slider {
}
.swiper-pagination {
  position: relative;
}

.swiper-pagination-bullet {
  border: 1px solid #000;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  border: 1px solid #ccc;
  background-color: #fff;
  opacity: 1;
}

/* ------------------------------ */
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: none;
  left: 0px;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: none;
  right: 0px;
  left: auto;
}
.swiper-button-prev .swiBtn,
.swiper-container-rtl .swiper-button-next .swiBtn {
  background-image: url(/images/swiper_prev.png);
}
.swiper-button-next .swiBtn,
.swiper-container-rtl .swiper-button-prev .swiBtn {
  background-image: url(/images/swiper_next.png);
}
@media (min-width: 750px) {
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 0%;
  }
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    right: 0%;
  }
}

/* ------------------------------ */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 60%;
  top: 50%;
  width: 44px;
  width: 10%;
  height: 44px;
  height: 100%;
  z-index: 10;
  cursor: pointer;

  margin: 0;
  padding: 0;
  margin-top: -24px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
@media (min-width: 750px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 10%;
  }
}

.swiBtn {
  margin-top: 12px;
  width: 100%;
  height: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ------------------------------ */
#section-01 h1 img {
  width: 60%;
  margin: auto 20%;
  padding-top: 2%;
}
@media (min-width: 1000px) {
  #section-01 h1 img {
    width: 40%;
    margin: auto 30%;
    padding-top: 0;
  }
}

/* #section-02 NEWS */
#section-02 {
  display: block;
  background-image: url("../images/003.jpg");
  margin-bottom: -1%;
}
#section-02pc {
  display: none;
  background-image: url("../images/003.jpg");
}
@media (min-width: 1000px) {
  #section-02 {
    display: none;
  }
  #section-02pc {
    display: block;
  }
}

#section-02 h1 {
  display: none;
}
#section-02 h1 img {
  width: 100%;
  margin: auto;
}

#section-02 .twitter {
  box-sizing: border-box;
  width: 100%;
  padding: 0% 5%;
}
#section-02 .twitter iframe {
  box-sizing: border-box;
  width: 100%;
}
/*iphone6+*/
@media screen and (max-width: 414px) {
  .twitter iframe {
    width: 384px !important;
  }
}
/*iphone6*/
@media screen and (max-width: 375px) {
  .twitter iframe {
    width: 345px !important;
  }
}

/*iphone5*/
@media screen and (max-width: 320px) {
  .twitter iframe {
    width: 290px !important;
  }
}

.twitter-title {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.acounts {
  box-sizing: border-box;
  font-size: 0px;
  line-height: 0px;
  padding: 0 20% 5%;
}
.acounts ul {
  width: 100%;
}
.acounts ul li {
  box-sizing: border-box;
  display: inline-block;
  width: 33.333%;
  margin: 0;
  padding: 0;
  text-align: center;
}
.acounts ul li a {
  margin: 0;
  padding: 0;
}
.acounts ul li img {
  box-sizing: border-box;
  width: 60%;
  margin: 0 5%;
  padding: 0;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.8);
}

/* pc用 */
.sec2-left {
  float: left;
  box-sizing: border-box;
  width: 60%;
  padding: 5% 5% 0 5%;
  overflow: hidden;
}
.sec2-right {
  float: right;
  box-sizing: border-box;
  width: 40%;
  padding: 5% 5% 5% 0;
  overflow: hidden;
}
.sec2-wiki {
  box-sizing: border-box;
  font-size: 0px;
  line-height: 0px;
  padding: 0 20% 5%;
}
.sec2-wiki img {
  box-sizing: border-box;
  width: 100%;
}

/* ダウンロードリンク */
.app-download {
  box-sizing: border-box;
  width: 100%;
  background-color: #000;
  font-size: 0;
  line-height: 0;
}
.app-download-inner {
  box-sizing: border-box;
  width: 100%;
  padding: 10.5% 0% 5% 30%;
  background-image: url("../images/003-03.png");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (min-width: 1000px) {
  .app-download {
    background: none;
  }
}
.app-download ul {
  box-sizing: border-box;
  display: block;
}
.app-download ul li {
  box-sizing: border-box;
  display: inline-block;
  width: 43%;
  margin: 0;
  padding-left: 2%;
}
.app-download a {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
}
.app-download img {
  width: 100%;
}

/* 公認wikiはこちら */
.wiki {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 11.5% 10%;
  background-image: url("../images/004.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 235% auto;
  background-repeat: no-repeat;
  background-position: center top;
  font-size: 0;
  line-height: 0;
}
@media (min-width: 1000px) {
  .wiki {
    background-size: contain;
    padding: 4.8% 10%;
  }
  .wiki span {
    padding: 0% 28%;
  }
}
.wiki span {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

/* #section-03 */
#section-03 {
  padding: 50% 0% 99.5%;
  margin-bottom: -1%;
  background-image: url("../images/005sp.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
@media (min-width: 1000px) {
  #section-03 {
    padding: 0% 0% 55%;
    margin-bottom: -2%;
    background-size: contain;
  }
}

#section-03 .inner-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0% 0%;
  position: relative;
}
#section-03 .inner-text .main {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0 15% 0 5%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media (min-width: 1000px) {
  #section-03 .inner-text .main {
    padding: 19% 45% 0 20%;
  }
}

#section-03 .inner-text .character-01 {
  width: 30%;
  height: auto;
  position: absolute;
  top: 0;
  z-index: 1;
}
#section-03 .inner-text img {
  width: 100%;
  height: auto;
}

@media (max-width: 1000px) {
  #section-03 .inner-text .character-01 {
    width: 50%;
  }
}

/* キャラクターアニメーション用 */
.monster,
.character-outer {
  transform: translate3d(0, 0, 0);
  transition-timing-function: ease-out;
}

.chara-anime {
  transform: translate3d(0, 0, 0);
  transition: all 0.8s ease-out;
}

.right-10,
.left-17,
.right-17,
.left-5,
.right-5 {
  /* opacity: 1; */
  transform: translate3d(0, 0, 0);
}
.right-60,
.left-130,
.right-130,
.left-55,
.right-55 {
  /* opacity: 0; */
  transform: translate3d(0, 0, 0);
}

/* タマティーナ */
.right-60 {
  /*right: -60%;*/
  transform: translate(200%);
}
@media (min-width: 1000px) {
  .right-60 {
    /*right: 0%;*/
    opacity: 0;
    transform: translate(260%);
    margin-top: 15%;
  }
}
.right-10 {
  /*right: -10%;*/
  transform: translate(120%);
}
@media (min-width: 1000px) {
  .right-10 {
    /*right: 15%;*/
    opacity: 1;
    transform: translate(200%);
    margin-top: 15%;
  }
}

/* モンスター3種 */
.left-17 {
  /*left: -0%;*/
  transform: translate(0%);
}
.left-130 {
  /*left: -120%;*/
  transform: translate(-100%);
}

.right-17 {
  /*right: -0%;*/
  transform: translate(0%);
}
.right-130 {
  /*right: -120%;*/
  transform: translate(100%);
}

@media (max-width: 1000px) {
  .left-17 {
    /*left: -18%;*/
    transform: translate(-15%);
  }
  .right-17 {
    /*right: -18%;*/
    transform: translate(0%);
  }
}

/* #section-04 */
#section-04 {
  background-image: url("../images/006sp.jpg");
  padding: 70% 0% 20%;
  margin-bottom: -2%;
  background-repeat: no-repeat;
  background-position: center top;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 1000px) {
  #section-04 {
    background-image: url("../images/006.jpg");
    padding: 25% 0% 15%;
    margin-bottom: -2%;
    background-size: contain;
  }
}

#section-04 .inner-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0% 0%;
  position: relative;
}

#section-04 .inner-text .character-02 {
  width: 119%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
#section-04 .inner-text .character-03 {
  width: 119%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
#section-04 .inner-text .character-04 {
  width: 119%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}

@media (min-width: 1000px) {
  #section-04 .inner-text .character-02 {
    width: 100%;
  }
  #section-04 .inner-text .character-03 {
    width: 100%;
  }
  #section-04 .inner-text .character-04 {
    width: 100%;
  }
}

#section-04 .inner-text img {
  width: 100%;
  height: auto;
}

.monster {
  position: static;
  padding-bottom: 55%;
  z-index: 2;
}
@media (min-width: 1000px) {
  .monster {
    position: static;
    padding-bottom: 47%;
  }
}

.monster img {
  width: 100%;
}

/* #section-05 */
#section-05 {
  background-image: url("../images/007sp.jpg");
  padding: 100% 0% 63%;
  margin-bottom: -2%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;

  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 1000px) {
  #section-05 {
    background-image: url("../images/007.jpg");
    padding: 0% 0% 20%;
    margin-bottom: -2%;
    background-size: contain;
  }
}

#section-05 .inner-text {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

#section-05 .inner-text .character-05 {
  box-sizing: border-box;
  width: 37%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
@media (max-width: 1000px) {
  .effect5 {
    display: none;
  }
}

#section-05 .inner-text .character-06 {
  box-sizing: border-box;
  width: 37%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
@media (max-width: 1000px) {
  .effect6 {
    display: none;
  }
}

.left-5 {
  /*left: -15%;*/
  transform: translate(-70%);
}
.left-55 {
  /*left: -130%;*/
  transform: translate(-100%);
}

.right-5 {
  /*right: -15%;*/
  transform: translate(250%);
}
.right-55 {
  /*right: -130%;*/
  transform: translate(280%);
}

/* #section-06 */
#section-06 {
  background-image: url("../images/008sp.jpg");
  padding: 100% 0% 75%;
  margin-bottom: -1%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 1000px) {
  #section-06 {
    background-image: url("../images/008.jpg");
    padding: 5% 0% 40%;
    margin-bottom: -2%;
    background-size: contain;
  }
}

#section-06 .inner-text {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

#section-06 .inner-text .character-06 {
  width: 30%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
@media (max-width: 1000px) {
  .effect6 {
    display: none;
  }
}

#section-06 .inner-text .character-07 {
  box-sizing: border-box;
  width: 37%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
@media (max-width: 1000px) {
  .effect7 {
    display: none;
  }
}

#section-06 .inner-text .character-08 {
  box-sizing: border-box;
  width: 37%;
  height: auto;
  position: absolute;
  top: 0%;
  z-index: 1;
}
@media (max-width: 1000px) {
  .effect8 {
    display: none;
  }
}

.left-6 {
  /*left: -4%;*/
  transform: translate(-30%);
}
.left-66 {
  /*left: -100%;*/
  transform: translate(-120%);
}

.right-6 {
  /*right: -4%;*/
  transform: translate(210%);
}
.right-66 {
  /*right: -100%;*/
  transform: translate(300%);
}

/* #section-07 */
#section-07 {
  background-image: url("../images/009sp.jpg");
  padding: 55% 0% 10%;
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 1000px) {
  #section-07 {
    background-image: url("../images/009.jpg");
    padding: 20% 0% 3%;
    background-size: contain;
  }
}

#section-07 .inner {
  text-align: center;
}

#section-07 .movieouter {
  /*float: left;*/
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 0% 5% 5%;
}
@media (min-width: 1000px) {
  #section-07 .movieouter {
    box-sizing: border-box;
    width: 33.33%;
    padding: 0% 1% 3%;
  }
}
/*
#section-07 .movieouter:nth-child(2){
margin-left:16.666%;
}
#section-07 .movieouter:nth-child(3){
margin-right:16.666%;
}
}
*/

#section-07 .movie {
  width: 100%;
  height: 1%;
  position: relative;
}
#section-07 .movie:before {
  content: "";
  display: block;
  padding-top: 56%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#section-07 .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#section-07 .movie span {
  display: block;
}

/* footer */

footer {
  background: #603814;
  font-size: 3vw;
}
@media (min-width: 1000px) {
  footer {
    background: #603814;
    font-size: 12pt;
  }
}
.footerwrapper {
  box-sizing: border-box;
  max-width: 1000px;
  padding: 0% 7%;
  margin: auto;
}

.detail {
  box-sizing: border-box;
  width: 100%;
  padding: 3% 0%;
}
.detail .data {
  display: table-cell;
  box-sizing: border-box;
  width: 78%;
  font-size: 80%;
  vertical-align: middle;
}
.data dl {
  box-sizing: border-box;
  width: 100%;
}
.data dt {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
}
.data dd {
  display: inline-block;
  box-sizing: border-box;
  width: 75%;
}
.small {
  font-size: 80%;
}

.detail .icon {
  display: table-cell;
  box-sizing: border-box;
  width: 19%;
  height: 100%;
  vertical-align: middle;
}
.detail .icon img {
  width: 100%;
  vertical-align: middle;
}

.environment .title {
  display: block;
  text-align: center;
  font-size: 3.5vw;
}
@media (min-width: 1000px) {
  .environment span {
    display: block;
    text-align: center;
    font-size: 18pt;
  }
}
.privacypolicy {
  padding-left: 5px;
}
@media (min-width: 1000px) {
  .privacypolicy {
  }
}
.privacypolicy a {
  color: #fff;
}

.note {
  font-size: 2vw;
  text-align: center;
  padding-bottom: 5px;
}
@media (min-width: 1000px) {
  .note {
    font-size: 7pt;
    text-align: center;
    padding-bottom: 5px;
  }
}

.copylight {
  font-size: 2vw;
  padding: 20px 7%;
  text-align: center;
  background: #41210a;
  padding-bottom: calc(120 / 1280 * 100vw);
  @media screen and (max-width: 1000px) {
    padding-bottom: calc(200 / 375 * 100vw);
  }
}
@media (min-width: 1000px) {
  .copylight {
    font-size: 7pt;
  }
}

.border {
  width: 100%;
  height: 2%;
  box-sizing: border-box;
  max-width: 1000px;
  margin: auto;
}
.border img {
  width: 100%;
}

/* menu */

header {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1000px;
  padding: 10% 0;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-image: url("../images/menu/bg.png");
  background-size: 100%;
  background-position: center center;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  z-index: -100;
}
@media (min-width: 1000px) {
  header {
    width: 40%;
    max-width: 800px;
  }
}

.header-bg img {
  width: 100%;
}
.header-bg {
  width: 100%;
}

.menu-on {
  opacity: 1;
  transition: 0.2s;
  z-index: 100;
}

#header-navi {
  position: relative;
  top: 0;
  left: 0;
}
.nav inner {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 102;
}
nav li a {
  display: block;
}

/* privacypolicy */

#privacy-wrapper {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
/* 全体の背景 */
#privacy-wrapper::before {
  background-image: url("../images/privacy/002-mini.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-size: cover;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 150%;
  margin: auto;
  padding-bottom: 0px;
  content: "";
  z-index: -1;
}

#privacy-header {
  border-bottom: 3px solid #40210d;
}

#privacy-header a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-image: url("../images/privacy/001-mini.jpg");
  padding: 7.5% 25%;
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: top center;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#privacy-header h1 {
  width: 100%;
}
#privacy-header img {
  width: 100%;
}

@media (min-width: 1000px) {
  #privacy-header {
    background-image: url("../images/privacy/001.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: 100px;
    overflow: hidden;
  }
  #privacy-header-inner {
    background-image: url("../images/dgeg-logo.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: contain;
    background-position: top center;
    width: 100%;
    height: 100px;
    overflow: hidden;
  }
  #privacy-header a {
    display: block;
    background-image: none;
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: contain;
    background-position: top center;
    font-size: 0;
    line-height: 0;
    height: 100%;
    overflow: hidden;
  }
}

#privacy {
  box-sizing: border-box;
  padding: 0% 0% 10%;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 1000px) {
  #privacy {
    padding: 0% 0% 3%;
    margin-bottom: -2%;
  }
}

#privacy .text {
  padding: 5%;
  font-size: 10pt;
  line-height: 1.7;
  color: #fff;
}
#privacy h2 {
  font-size: 15pt;
  margin: 4% 0 2%;
}
#privacy p {
  margin-bottom: 1vh;
}

#privacy ul li {
  text-indent: -1.7em;
  margin-left: 1.7em;
}
#privacy ul li.two {
  text-indent: -2.2em;
  margin-left: 1.6em;
}
#privacy-footer {
  padding: 1% 0% 0%;
  border-top: 3px solid #45220e;
}

#privacy-footer-inner {
  max-width: 1000px;
  margin: auto;
}

@media (min-width: 1000px) {
  #privacy h1 {
    box-sizing: border-box;
    width: 100%;
    padding: 5% 20% 0;
    margin-bottom: -3%;
  }
}

/* PC用 */

@media (min-width: 1000px) {
  .sp {
    display: none;
  }
}
@media (max-width: 999px) {
  .pc {
    display: none;
  }
}

@media (min-width: 1000px) {
  #section-02pc {
    background-image: url("../images/pc/003.jpg");
  }
  .wiki {
    background-image: url("../images/pc/004.jpg");
  }
  #section-03 {
    background-image: url("../images/pc/005.jpg");
  }
  #section-04 {
    background-image: url("../images/pc/006.jpg");
  }
  #section-05 {
    background-image: url("../images/pc/007.jpg");
  }
  #section-06 {
    background-image: url("../images/pc/008.jpg");
  }
  #section-07 {
    background-image: url("../images/pc/009.jpg");
  }
  /* inner */
  /*
#section-02pc .inner,
#section-03 .inner,
#section-04 .inner,
#section-05 .inner,
#section-06 .inner,
#section-07 .inner{
background-repeat: no-repeat;
background-position: center top;
  background-size: 100% auto;
background-size: contain;

}
#section-02pc .inner{
background-image: url("../images/pc/003-01.png");
}
#section-03 .inner{
background-image: url("../images/pc/005-01.png");
}
#section-04 .inner{
background-image: url("../images/pc/006-01.png");
}
#section-05 .inner{
background-image: url("../images/pc/007-01.png");
}
#section-06 .inner{
background-image: url("../images/pc/008-01.png");
}
#section-07 .inner{
background-image: url("../images/pc/009-01.png");
}
*/
  #section-02pc,
  .wiki,
  #section-03,
  #section-04,
  #section-05,
  #section-06,
  #section-07 {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    background-size: cover;
  }
  .inner {
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
  }
}

section {
  position: relative;
}

.pc-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pc3 {
  width: 406px;
}
.pc4 {
  width: 440px;
}
.pc5 {
  width: 510px;
}
.pc6 {
  width: 510px;
}
.pc7 {
  width: 406px;
}

@media (min-width: 1000px) {
  .wiki {
    min-height: 165px;
  }
  #section-03 {
    min-height: 700px;
  }
  #section-04 {
    min-height: 304px;
  }
  #section-05 {
    min-height: 766px;
    min-height: 836px;
  }
  #section-06 {
    min-height: 850px;
    min-height: 930px;
  }
  #section-07 {
    min-height: 406px;
  }
}

.legal {
  margin-top: 16px;
}

/* -----------------------------
    official_banner
----------------------------- */
.official_banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}
.official_banner.open {
  display: block;
}
.official_banner__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 33, 60, 0.7);
}
.official_banner__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(295 / 375 * 600px), calc(295 / 600 * 100vh));
  @media screen and (max-width: 600px) {
    width: calc(295 / 375 * 100vw);
  }
}

.official_banner__image {
  width: 100%;
  height: auto;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.official_banner__btns {
  display: flex;
  justify-content: space-between;
  margin-top: min(calc(16 / 375 * 600px), calc(16 / 600 * 100vh));
  @media screen and (max-width: 600px) {
    margin-top: calc(16 / 375 * 100vw);
  }
}

.official_banner__btn1 {
  width: min(calc(295 / 375 * 600px), calc(295 / 600 * 100vh));
  height: min(calc(45 / 375 * 600px), calc(45 / 600 * 100vh));
  @media screen and (max-width: 600px) {
    width: calc(295 / 375 * 100vw);
    height: calc(45 / 375 * 100vw);
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.official_banner__close {
  cursor: pointer;
  width: min(calc(40 / 375 * 600px), calc(40 / 600 * 100vh));
  height: min(calc(40 / 375 * 600px), calc(40 / 600 * 100vh));
  margin-top: min(calc(16 / 375 * 600px), calc(16 / 600 * 100vh));
  margin-inline: auto;
  @media screen and (max-width: 600px) {
    width: calc(40 / 375 * 100vw);
    height: calc(40 / 375 * 100vw);
    margin-top: calc(16 / 375 * 100vw);
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.fixed_cta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 calc(30 / 1280 * 100vw);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  translate: 0 40px;
  transition: all 0.3s ease-in-out;
  @media screen and (max-width: 1000px) {
    padding: 0 0 calc(20 / 375 * 100vw);
  }
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
  .fixed_cta__app_stores {
    display: flex;
    justify-content: center;
    gap: calc(24 / 1280 * 100vw);
    li {
      a {
        display: block;
        pointer-events: auto;
        img {
          display: block;
          width: auto;
          height: calc(56 / 1280 * 100vw);
          @media screen and (max-width: 1000px) {
            height: calc(50 / 375 * 100vw);
          }
        }
      }
    }
  }
  .fixed_cta__btn {
    position: absolute;
    right: calc(30 / 1280 * 100vw);
    bottom: calc(40 / 1280 * 100vw);
    width: calc(295 / 1280 * 100vw);
    pointer-events: auto;
    filter: drop-shadow(
      0 calc(6 / 1280 * 100vw) calc(7.5 / 1280 * 100vw) rgba(0, 0, 0, 0.6)
    );
    @media screen and (max-width: 1000px) {
      position: relative;
      right: auto;
      bottom: auto;
      width: calc(190 / 375 * 100vw);
      margin: 0 calc(10 / 375 * 100vw) calc(15 / 375 * 100vw) auto;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}