@charset "utf-8";

.animate__animated {
  will-change: transform, opacity;
}

/*========= slide ===============*/
.swiper-slide {
  background-size: cover; /* 背景画像をコンテナにフィットさせる */
  background-position: center; /* 背景画像を中央に配置 */
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
}

.sl-1 { background-image: url('/images/slide_back_1.png'); }

.sl-1-harf { background-image: url('/images/slide_back_1_harf.png'); }

.sl-1-quarter { background-image: url('/images/slide_back_1_quarter.png'); }

.sl-2 { background-image: url('/images/slide_back_2.png'); }

.sl-3 { background-image: url('/images/slide_back_3.png'); }

.sl-4 { background-image: url('/images/slide_back_5.png'); }

.sl-5 { background-image: url('/images/slide_back_4.png'); }

.swiper-container {
  width: 100vw;
  height: 56.25vw; /* 16:9の比率に対応 */
  max-height: 100vh;
  max-width: 177.78vh; /* 16:9の比率に対応 */
}

body.slides {
  overflow: hidden; /* スクロールバーを非表示 */
  /*margin: 0;
  padding: 0;*/
  width: 100vw;
  height: 56.25vw; /* 16:9の比率に対応 */
  max-height: 100vh;
  max-width: 177.78vh; /* 16:9の比率に対応 */
  margin: auto;
}

body.slides .contents {
  margin-top: 0;
}

.sl-title {
  color: #a9a9a9;
  text-shadow:0 0 15px #daa520;
  font-size: 2.2em;
}

/*** スライド1 ***/
.top-price {
  color: #fff;
}

.top-price-year {
  font-size: 4.5em;
  text-shadow:0 0 15px #ff7f00;
}

.top-price-month {
  font-size: 3.5em;
  text-shadow:0 0 15px #ffff00;
}

.top-item {
  font-size: 2em;
  color: #fff;
}

.item-box {
  /*border: 1px solid #ccc;*/
  border-radius: 10px;
  background-color: rgba(128, 128, 128, 0.3);
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3);
}

/*** スライド1-harf ***/
.team-norma-details {
  color: #fff;
  width: 270px;              /* 幅と高さを同じに */
  height: 270px;
  border-radius: 50%;        /* 円形に */
  display: flex;             /* 中身を中央揃え */
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 5px;
}
.team-norma-details-achieved {
  border: 5px solid #c17b39;/*#b8860b;     枠線の色と太さを調整 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(184, 134, 11, 0.6)); /* 黒からゴールドへ */
  box-shadow:0 0 15px #daa520;
}

.team-norma-details-not-achieved {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.6));
  box-shadow:0 0 15px #808080;
}

.team-norma-group-name {
  font-size: 2.5em;
  text-shadow:0 0 15px #ffd700;
}

.team-norma-group-price {
  font-size: 2em;
  text-shadow:0 0 15px #ffd700;
}

.team-norma-group-base {
  font-size: 1.2em;
  color: #a9a9a9;
}

.text-achieved {
  font-size: 2.5em;
  color: #c17b39;
  text-shadow:0 0 20px #808080;
}

.text-not-achieved {
  font-size: 1.5em;
  color: #808080;
  text-shadow:0 0 20px #000;
}

/*** スライド1-quarter ***/
.contents-norma-group {
  color: #fff;
  height: 570px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 20px;
}

.contents-norma-details {
  font-size: 0.8em;
  padding-left: 10px;
  margin-top: 70px;
}

.contents-norma-name {
  font-size: 2em;
  text-shadow:0 0 15px #ffd700;
}

.contents-norma-price {
  font-size: 3em;
  text-shadow:0 0 15px #ffd700;
  margin-bottom: 0px;
}

.contents-norma-text-achieved {
  font-size: 2.5em;
  color: #c17b39;
  text-shadow:0 0 20px #808080;
  margin-top: 15px;
  margin-bottom: 15px;
}

.contents-norma-text-not-achieved {
  font-size: 1.5em;
  color: #808080;
  text-shadow:0 0 20px #000;
  margin-top: 30px;
  margin-bottom: 30px;
}

.contents-norma-goal {
  font-size: 1.7em;
  color: #a9a9a9;
}

/*** スライド2・3 ***/
.ranking-item {
  padding: 5px;
  position: relative; /* 擬似要素の基準を設定 */
}

.ranking-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0)); /* グラデーション */
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* シャドウを追加 */
  z-index: 0; /* 背景に配置 */
}

.slide-rank {
  font-weight: bold;
  color: #a9a9a9;
}

.user-name, .item-name {
  color: #fff;
  text-shadow:0 0 15px #ffff00;
}

.slide-c-point, .contract-count, .top-item-details {
  color: #ffffe0;
}

/*** スライド4 ***/
.ranking-item-l4 {
  color: #fff;
  text-shadow:0 0 15px #ffd700;
}

.group-top {
  text-shadow:0 0 25px #ff7f00;
}

/*** 新規登録チェックアニメーション ***/
.animation-container {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 56.25vw; /* 16:9の比率に対応 */
  max-height: 100vh;
  max-width: 177.78vh; /* 16:9の比率に対応 */
  background: black;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background-image: url('/images/contract_details_back.png'); /* 背景画像を指定 */
  background-size: cover; /* 背景画像をコンテナにフィットさせる */
  background-position: center; /* 背景画像を中央に配置 */
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
  opacity: 1; /* 初期状態は完全に表示 */
  transition: opacity 1s ease; /* フェードアウトのトランジションを指定 */
}

.animation-container.fade-out {
  opacity: 0; /* フェードアウト時に透明にする */
}

.animation-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contract-details {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3.5em;
  text-align: center;
  white-space: nowrap; /* テキストを折り返さない */
  text-shadow:0 0 15px #ffff00;
}

.contract-details-title {
  color: #c0c0c0;
  font-size: 0.8em;
  /*text-shadow: none;*/
}