/*===================
キービジュアル
=====================*/

#key {
  position: relative;
  width: 100%;
  height: 100%;
}

#key .kv_image {
  margin: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% auto;
  background-image: url("../../img/kv.jpg");
  width: 80%;
  max-width: 1000px;
  max-height: 1361px;
  padding-top: min(110%, 1361px);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

#key h1 img {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 54%;
  max-width: 658px;
}

@media screen and (max-width: 900px) {
  #key .kv_image {
    width: 100%;
    padding-top: 145%;
  }

  #key h1 img {
    bottom: -5%;
    width: 90%;
  }
} /*max-width:750px*/

/*===================
キラキラ
=====================*/

/* キラキラの基本設定 */
.kira {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1 / 1;
  background-image: url("../../img/kira.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none; /* 重なってもクリックを邪魔しない */
  animation: kira-animation 1.6s cubic-bezier(0, 0.62, 0.36, 0.66) infinite;
}

@keyframes kira-animation {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }

  10% {
    opacity: 1;
    transform: scale(1);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }
}

.k1 {
  top: 21%;
  right: 8%;
  animation-delay: 0s;
  width: 18%;
}

.k2 {
  top: 26%;
  right: 3%;
  animation-delay: 1.2s;
  width: 13%;
}

.k3 {
  top: 24%;
  right: 0%;
  animation-delay: 0.8s;
  width: 9%;
}

.k4 {
  top: 40%;
  left: 1%;
  animation-delay: 2.4s;
  width: 13%;
}

.k5 {
  top: 43%;
  left: 3%;
  animation-delay: 0.2s;
  width: 20%;
}

.k6 {
  top: 42%;
  left: 15%;
  animation-delay: 1.5s;
  width: 9%;
}

.k7 {
  top: 63%;
  right: 9%;
  animation-delay: 1s;
  width: 20%;
}

.k8 {
  top: 69%;
  right: 1%;
  animation-delay: 1.9s;
  width: 16%;
}

.k9 {
  top: 67%;
  right: 1%;
  animation-delay: 0.8s;
  width: 9%;
}

.k10 {
  top: 76%;
  left: 6%;
  animation-delay: 2s;
  width: 13%;
}

.k11 {
  top: 80%;
  left: 1%;
  animation-delay: 2.2s;
  width: 20%;
}

.k12 {
  top: 79%;
  left: 18%;
  animation-delay: 1s;
  width: 9%;
}

@media screen and (max-width: 900px) {
  .k1 {
    top: 18%;
    right: 9%;
  }

  .k2 {
    top: 21%;
  }

  .k3 {
    top: 20%;
  }

  .k4 {
    top: 34.2%;
    left: 22%;
  }

  .k5 {
    top: 36%;
  }

  .k6 {
    top: 38%;
  }

  .k7 {
    top: 50%;
  }

  .k8 {
    top: 62%;
  }

  .k9 {
    top: 52%;
  }

  .k10 {
    top: 50%;
  }

  .k11 {
    top: 63%;
    left: 2%;
  }

  .k12 {
    top: 62.5%;
  }
}

/*===================
どんぐり
=====================*/

/* 外側の箱：移動（JSで動かす方）を担当 */
.donguri-wrapper01,
.donguri-wrapper02,
.donguri-wrapper03 {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  /* 1.0sかけてスーッと移動 */
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.donguri-wrapper01 {
  top: 43%;
  right: 8%;
}

.donguri-wrapper02 {
  top: 67%;
  left: 8%;
}

.donguri-wrapper03 {
  top: 100%;
  left: 30%;
}

/* 中身のどんぐり：デフォルトのバウンドを担当 */
.donguri-body01,
.donguri-body02,
.donguri-body03 {
  display: block;
  animation-name: bounce1;
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center bottom;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s;
  pointer-events: none; /* クリック判定を親に任せる */
}

.donguri-body01 {
  width: 200px;
}

.donguri-body02 {
  width: 165px;
}

.donguri-body03 {
  width: 200px;
}

@keyframes bounce1 {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  30% {
    transform: scale(1.05, 0.95) translate(0%, 0%);
  }
  40% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    transform: scale(0.9, 1.1) translate(0%, -7%);
  }
  60% {
    transform: scale(1, 1) translate(0%, -12%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

@media screen and (max-width: 900px) {
  .donguri-wrapper01 {
    top: 37%;
    right: 3%;
  }

  .donguri-wrapper02 {
    top: 71%;
    left: unset;
    right: 8%;
  }

  .donguri-wrapper03 {
    top: 100%;
    left: 32%;
  }

  .donguri-body01 {
    width: 115px;
  }

  .donguri-body02 {
    width: 107px;
  }

  .donguri-body03 {
    width: 121px;
  }
}

@media screen and (max-width: 750px) {
  .donguri-wrapper01 {
    top: 37%;
    right: 3%;
  }

  .donguri-wrapper02 {
    top: 71%;
    left: unset;
    right: 8%;
  }

  .donguri-wrapper03 {
    top: 100%;
    left: 32%;
  }

  .donguri-body01 {
    width: 74px;
  }

  .donguri-body02 {
    width: 69px;
  }

  .donguri-body03 {
    width: 85px;
  }
}

/*===================
メッセージ
=====================*/

#top_message {
  position: relative;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

#top_message .top_massege_back {
  width: 90%;
  margin: auto;
  margin-bottom: 90px;
  position: relative;
}

#top_message .top_massege_back a {
  position: absolute;
  top: 10%;
  z-index: 0;
  width: 25.7%;
  height: 71%;
  animation: glow 2s ease-in-out infinite;
}

#top_message .top_massege_back a.massage01 {
  left: 9.4%;
  cursor: pointer;
}

#top_message .top_massege_back a.massage02 {
  width: 26.5%;
  left: 37.7%;
}

#top_message .top_massege_back a.massage03 {
  right: 7.4%;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0px 10px rgb(255, 255, 255), 0 0 16px rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0px 0px 25px #ffffff00;
    background-color: unset;
  }
}

#top_message .img02,
#top_message .img03 {
  position: absolute;
  z-index: 1;
}

#top_message .img02 img,
#top_message .img03 img {
  width: 100%;
}

#top_message .img02 {
  width: 15.5%;
  max-width: 191px;
  bottom: 3px;
  right: 0;
  pointer-events: none;
}

#top_message .img03 {
  width: 45%;
  max-width: 496px;
  bottom: 8%;
  right: -4%;
  pointer-events: none;
  animation: shake-animation 5.5s infinite;
}

@keyframes shake-animation {
  /* 0%から50%（3秒間）まで、1%刻みで超高速に動かす */
  0%,
  50%,
  100% {
    transform: translate(0, 0);
  }

  1%,
  3%,
  5%,
  7%,
  9%,
  11%,
  13%,
  15%,
  17%,
  19%,
  21%,
  23%,
  25%,
  27%,
  29%,
  31%,
  33%,
  35%,
  37%,
  39%,
  41%,
  43%,
  45%,
  47%,
  49% {
    transform: translate(-0.6px, 0.6px);
  }
  2%,
  4%,
  6%,
  8%,
  10%,
  12%,
  14%,
  16%,
  18%,
  20%,
  22%,
  24%,
  26%,
  28%,
  30%,
  32%,
  34%,
  36%,
  38%,
  40%,
  42%,
  44%,
  46%,
  48% {
    transform: translate(0.6px, -0.6px);
  }
  /* 50%以降は静止 */
}

#top_message .img04 {
  width: fit-content;
  margin: auto;
}

@media screen and (max-width: 900px) {
  #top_message {
    overflow: hidden;
  }

  #top_message .top_massege_back {
    max-width: 100%;
    margin-bottom: 50px;
  }

  #top_message .img02 {
    width: 16%;
    bottom: 1px;
  }

  #top_message .img03 {
    width: 42%;
    bottom: 5%;
    right: -2%;
  }

  @keyframes shake-animation {
    1%,
    3%,
    5%,
    7%,
    9%,
    11%,
    13%,
    15%,
    17%,
    19%,
    21%,
    23%,
    25%,
    27%,
    29%,
    31%,
    33%,
    35%,
    37%,
    39%,
    41%,
    43%,
    45%,
    47%,
    49% {
      transform: translate(-0.4px, 0.4px);
    }
    2%,
    4%,
    6%,
    8%,
    10%,
    12%,
    14%,
    16%,
    18%,
    20%,
    22%,
    24%,
    26%,
    28%,
    30%,
    32%,
    34%,
    36%,
    38%,
    40%,
    42%,
    44%,
    46%,
    48% {
      transform: translate(0.4px, -0.4px);
    }
    /* 50%以降は静止 */
  }

  #top_message .img04 {
    width: 80%;
    margin: auto;
  }
}

/*===================
MOVIE
=====================*/

#top_movie {
  position: relative;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.top_pv {
  width: 90%;
  margin: auto;
  position: relative;
  text-align: center;
  aspect-ratio: 4 / 3.13;
  padding-top: 4%;
}

.top_pv .top_pv_video {
  width: 95%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: auto;
  z-index: 0;
  transition: 0.3s all;
}

.top_pv .top_pv_video video {
  margin-top: 10%;
}

.top_pv .pv_overlay_wrap {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 100/66;
  z-index: 10;
}

.top_pv .top_pv_overlay01,
.top_pv .top_pv_overlay02,
.top_pv .top_pv_overlay03 {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 2;
  transition: all 0.3s ease-out;
}

.top_pv .top_pv_overlay01 {
  width: 100%;
  height: 100%;
}

.top_pv .top_pv_overlay01 img {
  width: 100%;
}

.top_pv .top_pv_overlay02 {
  width: 20%;
  height: auto;
  cursor: pointer;
}

.top_pv .top_pv_overlay03 {
  width: 100%;
  pointer-events: none;
}

/* スクロールで縮小アニメ */
/* 画像の外枠（ここでサイズを固定する） */
.img-wrapper {
  width: 100%;
  margin: 0 auto;
  height: 120%;
  overflow: hidden; /* はみ出た分を隠す */
}

/* 動かしたい画像 */
.target-img {
  width: 78%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  transform: scale(1.7);
  will-change: transform;
}

.top_pv:hover .top_pv_video {
  opacity: 1;
}

.top_pv .top_pv_overlay02:hover {
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1.7);
  -webkit-transform: translate(-50%, -50%) scale(1.7);
  -ms-transform: translate(-50%, -50%) scale(1.7);
  transition: 0.3s all;
}

/* 動画モーダル */

.modal {
  position: fixed;
  top: 0;
  z-index: 1000;
  touch-action: none;
}

.md-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.md-contents {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  touch-action: auto;
}

.md-xmark {
  z-index: 1000;
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.md-xmark span {
  display: block;
  position: relative;
}

.md-xmark span::before,
.md-xmark span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 40px;
  background: #fff;
}

.md-xmark span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.md-xmark span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.md_msg {
  width: 70%;
  height: fit-content;
}

.md_pv {
  width: 70%;
  aspect-ratio: 16 / 9;
  height: fit-content;
  border: unset;
}

.top_pv_md {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.top_pv_md img {
  margin: auto;
}

.top_pv_md iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 750px), (max-aspect-ratio: 1/0.91) {
  .md-xmark {
    top: 3px;
    right: 3px;
    width: 80px;
    height: 80px;
  }

  .md-xmark span::before,
  .md-xmark span::after {
    height: 35px;
  }

  .md-contents {
    padding: 0;
  }

  .top_pv_md {
    width: 100%;
  }

  .md_msg {
    width: 90%;
  }

  .md_pv {
    width: 80%;
  }
} /*max-width:900px*/

/*===================
制作
=====================*/

#top_seisaku {
  position: relative;
}

#top_seisaku .seisaku_wrapper {
  margin: auto;
  max-width: 900px;
  aspect-ratio: 1 / 1;
  background-image: url(../../img/bg_pa.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#top_seisaku .seisaku_wrapper .img01 {
  width: 56%;
  max-width: 497px;
  margin: auto;
}

#top_seisaku .seisaku_wrapper .img02 {
  width: 82%;
  max-width: 738px;
  margin: auto;
}

#top_seisaku .seisaku_wrapper img {
  width: 100%;
}

/*===================
BOOKS
=====================*/

#top_books {
  position: relative;
}

#top_books .title_wrap {
  position: relative;
  width: fit-content;
  margin: auto;
}

.barios {
  width: 320px;
  position: absolute;
  top: -40%;
  left: -67%;
}

h2.books_title {
  width: 100%;
  margin-bottom: 60px;
}

h2.books_title img {
  max-height: 50px;
  margin: auto;
}

.book_wrapper {
  position: relative;
  background-color: #c6c3bf;
  margin: 12% 0 0 0;
  padding-top: 50px;
  overflow: visible;
}

.book_wrapper::before,
.book_wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  height: 17%;
}

/* 上のペンキ */
.book_wrapper::before {
  top: 1px;
  transform: translateY(-100%);
  background-image: url("../../img/bg_bk01.png");
}

/* 下のペンキ */
.book_wrapper::after {
  bottom: 1px;
  transform: translateY(100%);
  background-image: url("../../img/bg_bk02.png");
  z-index: 2;
}

#top_books .book_contents {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 30px; /* ★左右のスライダー同士の間隔 */
  padding: 0;
  overflow: visible; /* 矢印を見せるため */
}

/* スライダー本体の幅調整 */
#top_books .book_contents .swiper_wrap {
  width: 45%;
  padding: 0 50px;
  /* max-width: 540px;  */
  box-sizing: border-box;
  pointer-events: auto;
}

/* スライダー全体のコンテナ */
.swiper {
  width: 100%;
  margin: 50px 0;
  pointer-events: none;
  overflow: visible !important;
}

/* #top_books .swiper-slide a,      */
#top_books .swiper-button-next,  /* 矢印ボタン */
#top_books .swiper-button-prev {
  pointer-events: auto;
}

/* 右スライダーのクリック横取り防止 */
.swiper-wrapper {
  width: auto !important;
}

/* 各スライド（画像の入れ物）の設定 */
.swiper-slide a {
  background-position: center;
  background-size: cover;
  aspect-ratio: 300 / 420;
  height: auto !important;
  opacity: 0 !important;
  display: inline-block !important;
  transition: opacity 0.3s;
}

#top_books .swiper-slide a {
  pointer-events: none !important;
}

/* 2. 「選ばれし3枚（真ん中・右・左）」だけ強制的に復活させる */
#top_books .swiper-slide.swiper-slide-active a,
#top_books .swiper-slide.swiper-slide-next a,
#top_books .swiper-slide.swiper-slide-prev a,
/* ループ時の複製用 */
#top_books .swiper-slide.swiper-slide-duplicate-active a,
#top_books .swiper-slide.swiper-slide-duplicate-next a ,
#top_books .swiper-slide.swiper-slide-duplicate-prev a {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 「表示範囲に入っている」と判定されたスライドだけ表示する */
#top_books .swiper-slide.swiper-slide-visible a {
  opacity: 1 !important;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/*矢印のデザイン変更*/
/* 1. 共通設定：クリックエリアの調整 */
.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  margin-top: -20px; /* 縦位置の微調整（高さの半分） */
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  outline: none;
}

.swiper-button-prev {
  left: -50px !important;
}

.swiper-button-next {
  right: -50px !important;
}

/* 2. デフォルトのアイコン消去 */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "" !important; /* ★元アイコン（青い文字）を強制的に消す */
  font-family: none !important; /* ★フォント設定も強制リセット */
  font-size: 0 !important; /* ★文字サイズも0にして見えなくする */
  width: 0;
  height: 0;
  border-style: solid;
  display: block;
}

/* 3. 左矢印（◀）の形 */
.swiper-button-prev::after {
  border-color: transparent #222 transparent transparent;
  border-width: 20px 24px 20px 0;
}

/* 4. 右矢印（▶）の形 */
.swiper-button-next::after {
  border-color: transparent transparent transparent #222;
  border-width: 20px 0 20px 24px;
}

@media screen and (max-width: 900px) {
  .barios {
    width: 150px;
    left: -70%;
    top: -60%;
    z-index: -1;
  }

  h2.books_title {
    margin-bottom: 0px;
  }

  h2.books_title img {
    max-height: 28px;
    margin: auto;
  }

  .book_wrapper {
    margin: 16% 0 0 0;
  }

  .book_wrapper::before,
  .book_wrapper::after {
    height: 5%;
  }

  #top_books .book_contents {
    display: flex;
    justify-content: center;
    gap: 12%;
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;
    overflow: hidden;
  }

  /* スライダー本体の幅調整 */
  #top_books .book_contents .swiper_wrap {
    width: 100%;
    max-width: 690px;
    margin: auto;
    padding: 0 8%;
  }

  #top_books .book_contents {
    padding: 0;
  }

  .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }

  /* ★真ん中「以外」のスライドを小さくする */
  .swiper-slide:not(.swiper-slide-active) a {
    transform: scale(0.55);
  }

  #top_books .book_contents {
    flex-direction: column; /* 縦並びにする */
  }
  #top_books .book_contents .swiper {
    width: 100%;
    margin: 0 auto 30px;
    overflow: visible !important;
    padding: 8%;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 20px;
    height: 20px;
    margin-top: -20px; /* 縦位置の微調整（高さの半分） */
  }

  .swiper-button-prev {
    left: -8% !important; /* 枠の外側（左）へ出す */
  }

  .swiper-button-next {
    right: -8% !important; /* 枠の外側（右）へ出す */
  }

  /* 3. 左矢印（◀）の形 */
  .swiper-button-prev::after {
    border-width: 15px 20px 15px 0;
    border-color: transparent #222 transparent transparent;
  }

  /* 4. 右矢印（▶）の形 */
  .swiper-button-next::after {
    border-width: 15px 0 15px 20px;
  }
} /*max-width:900px*/

@media screen and (max-width: 750px) {
  .barios {
    width: 140px;
    left: -40%;
    top: -40%;
    z-index: -1;
  }
}