/* hero */
.hero
{
  position: relative;
  width: 100vw;
  height: 100vh;
  aspect-ratio: 1920 / 1080;
}
.hero__fixed
{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
@media (max-width: 768px)
{
  .hero
  {
    height: 100%;
    aspect-ratio: 1080 / 1072;
  }
}
/* #region hero bg */
.hero__bg
{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero__bg-inner
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero__bg-img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 1;
}
/* #endregion */

/* #region hero top */
.hero__top
{
  position: absolute;
  top: 1vw;
  left: 1.5vw;
  right: 3.0vw;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  opacity: 1;
}
.hero__top-right
{
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__top-left
{
  display: flex;
  align-items: center;
  gap: 1vw;
}
@media (max-width: 768px)
{
  .hero__top
  {
    justify-content: flex-end;
  }
}
/* 会社ロゴ */
.hero__top-left__company-logo
{
  width: clamp(200px, 28vw, 500px);
  height: auto;
}
.sp-header__company-logo
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 45%;
  height: auto;
}
@media (max-width: 768px)
{
  .hero__top-left__company-logo
  {
    width: 80%;
  }
}
/* SNSアイコン */
.sns-circle-list__btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 4vw, 50px);
  height: clamp(24px, 4vw, 50px);
  max-width: 50px;
  border-radius: 50%;
  text-decoration: none;
}
.sns-circle-list__icon
{
  width: 50%;
  height: auto;
}
.sns-circle-list
{
  display: flex;
  align-items: center;
  gap: 1vw;
}
.sns-circle-list__btn:hover
{
  filter: brightness(0.8);
}
@media (max-width: 768px)
{
  .sns-circle-list
  {
    position: absolute;
    top: 1vw;
    left: 1.5vw;
    gap: 1vw;
  }
}
/* 各プラットフォームのロゴ調整 */
.sns-circle-list__btn--discord .sns-circle-list__icon
{
  width: 65%;
}
.sns-circle-list__btn--x .sns-circle-list__icon
{
  width: 50%;
}
.sns-circle-list__btn--youtube .sns-circle-list__icon
{
  width: 65%;
}
/* 各プラットフォームのブランドカラー */
.sns-circle-list__btn--discord
{
  background-color: #5865F2;
}

.sns-circle-list__btn--x
{
  background-color: #000000;
}

.sns-circle-list__btn--youtube
{
  background-color: #FF0000;
}
@media (max-width: 768px)
{
}
/* 言語切り替え */
.hero__top-right__lang-dropdown
{
  position: relative;
}
.hero__top-right__lang-dropdown-checkbox
{
  display: none;
}
.hero__top-right__lang-dropdown-toggle
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
}
.hero__top-right__lang-dropdown-toggle span
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);

  font-size: clamp(12px, 2.0vw, 30px);
  font-weight: bold;
  white-space: nowrap; 
  color: #FFDB06;
}
.hero__top-right__lang-dropdown-toggle img
{
  width: clamp(100px, 20vw, 270px);
  height: auto;
}
.hero__top-right__lang-dropdown-menu
{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 80%;
  background-color: transparent; 
  overflow: hidden;
  z-index: 20;
}
.hero__top-right__lang-dropdown-checkbox:checked ~ .hero__top-right__lang-dropdown-menu
{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__top-right__lang-dropdown-item
{
  position: relative;
  display: block;
  text-decoration: none;
}
.hero__top-right__lang-dropdown-item img
{
  display: block;
  width: 100%;
  height: auto;
}
.hero__top-right__lang-dropdown-item span
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);

  color: #FFDB06;
  font-weight: bold;
  font-size: clamp(10px, 1.5vw, 20px);
  white-space: nowrap;
  text-align: center;
}
.lang-item__img--normal
{
  opacity: 1;
}
.lang-item__img--hover
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine)
{
  .hero__top-right__lang-dropdown-toggle:hover .lang-item__img--normal
  {
    opacity: 0;
  }
  .hero__top-right__lang-dropdown-toggle:hover .lang-item__img--hover
  {
    opacity: 1;
  }
  .hero__top-right__lang-dropdown-item:hover .lang-item__img--normal
  {
    opacity: 0;
  }
  .hero__top-right__lang-dropdown-item:hover .lang-item__img--hover
  {
    opacity: 1;
  }
}
@media (max-width: 768px)
{
  .hero__top-right__lang-dropdown-toggle span
  {
    font-size: clamp(10px, 1.2vw, 30px);
  }
  .hero__top-right__lang-dropdown-item span
  {
    font-size: clamp(8px, 1.0vw, 18px);
  }
}
/* #endregion */

/* #region hero__bottom */
.hero__bottom
{
  position: absolute;
  bottom: 1vw;
  left: 1.5vw;
  right: 1.5vw;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  z-index: 10;
  opacity: 1;
}
.hero__bottom-left
{
  position: absolute;
  bottom: 0vw;
  left: -1.5vw;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}
.hero__bottom-right
{
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2vw;
  z-index: 1;
}
/* ストア */
.hero__bottom-right_btn
{
  opacity: 1;
}
.hero__bottom-right__store-btn
{
  position: relative;
  display: inline-block;
  text-decoration: none;
  width: clamp(120px, 28vw, 340px);
  height: auto;
}
.hero__bottom-right__store-btn > img
{
  width: 100%;
  height: auto;
  display: block;
}
.hero__bottom-right__store-btn:hover .hero__bottom-right__store-btn-bg
{
  filter: brightness(1.1);
}
@media (max-width: 768px)
{
  .hero__bottom-right
  {
    position: static;
    margin-bottom: 6px;
    margin-left: auto;
  }
  .hero__bottom-left
  {
    bottom: 0vw;
  }
}
/* ゲーム紹介文 */
.hero__bottom-left__intro-text
{
  position: relative;
  display: inline-block;
  width: clamp(150px, 35vw, 450px);
}
.hero__bottom-left__intro-text img
{
  display: block;
  width: 100%;
}
.hero__bottom-left__intro-text span
{
  position: absolute;
  top: 45%;
  left: 43%;
  transform: translate(-50%, -50%);
  
  color: #FFDB06;;
  font-weight: bold;
  font-size: clamp(10px, 2.5vw, 28px);
  white-space: nowrap;
}
@media (max-width: 768px)
{
  .hero__bottom-left__intro-text
  {
    width: 60vw;
  }
  .hero__bottom-left__intro-text span
  {
    font-size: clamp(10px, 3.5vw, 24px);
  }
}
/* ゲームロゴ */
.hero__bottom-left__game-logo
{
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: clamp(280px, 50vw, 620px);
  height: auto;
  z-index: 5;
}
@media (max-width: 768px)
{
  .hero__bottom-left__game-logo
  {
    width: clamp(200px, 50vw, 400px);
  }
}
.hero__bottom-right__store-btn-content
{
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;

  color:#372800;
  font-size: clamp(12px, 2.0vw, 20px);
  font-weight: bold;
  white-space: nowrap;
}
.hero__bottom-right__store-btn-icon
{
  margin-top: 2px;
  height: auto;
  flex-shrink: 0;
}
.hero__bottom-right__store-btn-text
{
  display: flex;
  align-items: center;
  margin-top: -1px;
  margin-left: 6px;
}
.hero__bottom-right__store-btn-arrow
{
  margin-left: auto;
  flex-shrink: 0;
}
.hero__bottom-right__store-btn-icon--switch
{
  width: clamp(100px, 15vw, 180px);
  margin-left: 18%;
}
.hero__bottom-right__store-btn-icon--steam
{
  width: clamp(100px, 15vw, 170px);
  margin-left: 18%;
}
@media (max-width: 768px)
{
  .hero__bottom-right__store-btn-content
  {
    font-size: clamp(8px, 2.0vw, 20px);
  }
  .hero__bottom-right__store-btn-text
  {
    margin-top: 0px;
  }
  .hero__bottom-right__store-btn-icon--switch
  {
    width: clamp(40px, 40vw, 60px);
    margin-left: 20%;
  }
  .hero__bottom-right__store-btn-icon--steam
  {
    width: clamp(40px, 40vw, 60px);
    margin-left: 20%;
  }
}
/* #endregion */

/*  */
.sp-header
{
  display: none;
  width: 100%;
  background-color: #001940;
  padding: 7vw 0;
  justify-content: center;

  position: relative;
}

/* #region section */
.section
{
  position: relative;
  width: 100vw;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
}
.section__bg
{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.movie .section__bg
{
  background: url('../assets/img/bg/movie_section_pc.png') center / cover no-repeat;
}
.spec .section__bg 
{
  background: url('../assets/img/bg/spec_section_pc.png') center / cover no-repeat;
}
@media (max-width: 768px)
{
  .section.movie
  {
    height: 100%;
    aspect-ratio: 1080 / 1611;
  }
  .section.spec
  {
    height: 100%;
    aspect-ratio: 1080 / 1226;
  }
  .movie .section__bg
  {
    background: url('../assets/img/bg/movie_section_sp.png') center / cover no-repeat;
  }
  .spec .section__bg 
  {
    background: url('../assets/img/bg/spec_section_sp.png') center / cover no-repeat;
  }
}
/* #endregion */

/* #region movie */
.movie .section__title--img
{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65vw;
  height: auto;
}
.movie__layout
{
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}
.movie__bg
{
  width: 100%;
  height: 100%;
  display: block;
}
.movie__player
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#youtube__player
{
  position: absolute;
  top: 46%;
  left: 49%;
  width: 83%;
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}
.movie__arrow 
{
  position: absolute;
  top: 50%;
  transform: translateY(-62%);
  z-index: 10;

  background: none;
  border: none;
  cursor: pointer;
}
.movie__arrow img
{
  width: clamp(16px, 2.5vw, 40px);
  height: auto; 
}
.arrow--left
{
  left: 1.7%;
}
.arrow--right 
{
  right: 3.9%;
  transform: translateY(-65%) rotate(180deg);
}
@media (max-width: 768px)
{
  .movie .section__title--img
  {
    top: 32%;
    width: 90vw;
  }
  .movie__layout
  {
    top: 52%;
    width: 90%;
  }
}
/* #endregion */

/* #region spec */
.spec .section__title--img
{
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  width: 12vw;
  height: auto;
  z-index: 2;
}
.spec__bg
{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: auto;
  display: block;
}
.spec__inner
{
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
}
.spec__row
{
  display: flex;
  width: 100%;
  align-items: center;
}
.spec__row p
{
  margin: 0;
  font-size: clamp(11px, 1.3vw, 24px);
  font-weight: bold;
  color: #493618;
  white-space: nowrap;
}
.spec__effect-fish-r
{
  position: absolute;
  top: 25%;
  left: 71%;
  transform: translateX(-50px);
  width: 24vw;
  z-index: 4;
}
.spec__effect-fish-l
{
  position: absolute;
  bottom: 22%;
  left: 14%;
  transform: translateX(-50px);
  width: 24vw;
  z-index: 4;
}
.spec__effect-bubble
{
  position: absolute;
  top: -28%;
  left: 20%;
  transform: translateX(-50px);
  width: 3.8vw;
  z-index: 10;
}
@media (max-width: 768px)
{
  .spec .section__title--img
  {
    top: 18%;
    width: 15vw;
  }
  .spec__bg
  {
    top: 12%;
    width: 60%;
    display: block;
  }
  .spec__inner
  {
    top: 40%;
  }
  .spec__row p
  {
    font-size: clamp(8px, 2.0vw, 36px);
  }
  .spec__effect-fish-r
  {
    top: 16%;
    left: 88%;
    width: 24vw;
  }
  .spec__effect-fish-l
  {
    bottom: 32%;
    left: 14%;
    width: 24vw;
  }
  .spec__effect-bubble
  {
    top: -18%;
    left: 35%;
    width: 6.0vw;
  }
}

/* #endregion */

/* #region footer */
.footer
{
  position: relative;
  width: 100vw;
  background-color: #001940;
  padding: 40px 0;
  z-index: 1;
}
.footer__inner
{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__btn-inner
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  gap: 80px;
}
.footer__btn-inner__item
{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.footer__btn-inner__item img
{
  width: 280px;
  height: auto;
  display: block;
}
.footer__btn-inner__item span
{
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #FFDB06;
  font-weight: 900;
  font-size: clamp(15px, 1.6vw, 18px);
  white-space: nowrap;
  text-align: center;
}
.footer__btn-inner__item_btn
{
  opacity: 1;
}
.footer__btn-inner__item_btn_hover
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.footer__btn-inner__item:hover
{
  filter: brightness(0.8);
}
/*
.footer__btn-inner__item:hover .footer__btn-inner__item_btn
{
  opacity: 0;
}
.footer__btn-inner__item:hover .footer__btn-inner__item_btn_hover
{
  opacity: 1;
}
*/
.footer__credit--label
{
  color: #FFFFFF;
  font-size: clamp(4.5px, 1.0vw, 20px);
  margin-bottom: 0.5vw;
  white-space: nowrap;
}
@media (max-width: 768px)
{
  .footer__btn-inner
  {
    gap: 50px;
  }
  .footer__btn-inner__item img
  {
    width: 30vw;
    height: auto;
    display: block;
  }
  .footer__btn-inner__item span
  {
    font-size: clamp(8px, 1.0vw, 16px);
  }
}
/* #endregion */

/* #region units */
.movie__units
{
  position: absolute;
  bottom: 7%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  z-index: 0;
  pointer-events: none;
}
.movie__unit-group
{
  position: relative;
}
.movie__unit-shadow
{
  position: absolute;
  bottom: 5%;
  left: 55%;
  transform: translateX(-50%);
  width: 90%;
  z-index: -1;
}
.movie__unit
{
  width: 18vw;
  max-width: 240px;
  height: auto;
}
@media (max-width: 768px)
{
  .movie__units
  {
    bottom: 6.5%;
  }
  .movie__unit
  {
    width: 20vw;
  }
}
/* #endregion */