@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

html{
    font-size:100%;
    background: #ffff;
}

body {
    font-family:"hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.7;
    color: rgb(0, 0, 0);
    max-width: 100%;
}

  .confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1; /* ← これがポイント！ */
  }
  


.confetti span {
  position: absolute;
  width: 8px;
  height: 14px;
  background: var(--color);
  opacity: 0.9;
  border-radius: 2px;
  animation: fall var(--duration) linear infinite;
  top: -20px;
}

@keyframes fall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(360deg); }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background:rgba(255, 255, 255, 0.1);
  color: white;
  position: fixed;
  width:100%;
  box-sizing: border-box;
}


.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: bold;
}
.menu-toggle {
  font-size: 40px;
  cursor: pointer;
  position:sticky;
}
.menu {
  display: none;
  position: fixed;
  top: 60px;
  right: 20px;
  background:rgba(0, 0, 0, 0.836);
  color: white;
  width: 150px;
  box-shadow: 0 4px 6px rgba(0, 0, 0);
}


.slider-container1 {
  position: relative;
  width: 100%;
  max-width: 900px;   /* ★ここで全体の最大サイズを決める */
  margin: 5% auto 0;  /* 中央寄せ */
  overflow: hidden;
}

/* 横並び＋ループ用。幅は“相対”にする */
.slider1 {
  display: flex;
  animation: scroll-1 40s linear infinite;
}

/* 各スライドは「コンテナ幅ぶん」 */
.slide1 {
  flex: 0 0 100%;
  overflow: hidden;
}

/* 画像はスライド幅にフィットさせる */
.slide1 img {
  width: 100%;
  height: auto;       /* ★ここが大事：縦は自動 */
  object-fit: cover;
  border-radius: 30px;
  padding: 5px;
}

/* スライドアニメーション */
@keyframes scroll-1 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1000px); /* 幅×(枚数-可視枚数)を調整 */
  }
}

/* テキストオーバーレイ */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.text-overlay h2 {
  font-size: 4rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: white;
  background-size: 200%;
}

@media (max-width: 900px) {
  .text-overlay h2 {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
    background-size: 200%;
  }
  
  
  


}

.slider-container2 {
  position: relative;
  width: 100%;
  height: 30%;
  overflow: hidden;
  margin-top: -12%;
  text-align: center;
}

.slider2 {
  display: flex;
  width: calc(800px * 10); /* 画像数×幅に応じて調整 */
  animation: scroll-2 18s linear infinite;
  height: 100%;
  width: 100%;
  margin-top: 2%;
}

.slide2 {
  flex: none;
  height: 100%;
  overflow: hidden;
}

.slide2 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius:30px;
  padding: 5px;
}

/* スライドアニメーション */
@keyframes scroll-2 {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(0); /* 幅×(枚数-可視枚数)を調整 */
  }
}

@media (max-width: 900px) {
  .slider-container1 {
    position: relative;
    width: 100%;
    height: 75%;
    overflow: hidden;
    margin-top: 5%;
  }
  .slider-container2 {
    position: relative;
    width: 100%;
    height: 30%;
    overflow: hidden;
    margin-top: 10%;
    text-align: center;
  }
  }

.mainwrapper{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
}

.kotoba h1 {
  max-width: 100%;
  color: black;
  margin-top: 10%;
  font-weight: 600;
  font-size: 7rem;
  background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: gradientText 7s infinite;
  animation: gradientText 7s infinite;
}

.kotoba h2 {
  max-width: 100%;
  color: black;
  font-weight: 1000;
  font-size: 6vw;
  margin-bottom: 20%;
  background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: gradientText 7s infinite;
    animation: gradientText 7s infinite;
}

.about__container {
  border-radius: 3.125rem;
  position: relative;
  padding: 7.5rem 3.125rem;
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 10%;
}

.about__container h1{
  text-align: center;
  font-size: 9vw;
}
.about__container2{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3.875rem;
    max-width: 100%;
    max-height: 100%;
}

.about__top{
  position: absolute;
  top: -9rem;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 5rem;
  font-weight: 700;
  max-width: 100%;

}
.about__title{
  width: unset;
  padding: 0;
  padding-bottom: 40px;
  font-size: 2.025rem;
  text-align: left;
}
.about__title_ex{
  width: unset;
  padding: 0;
  padding-bottom: 40px;
  font-size: 1.625rem;
  text-align: left;
}
.aboutright{
  max-width: 100%;
  max-height: 100%;
  margin: auto 0;
}

.question{
    max-width: 100%;
    height: inherit;
    margin: 0 auto;

}
.question_wrap{
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    justify-content: center;
    max-width: 100%;
    gap: 10px;
    margin: 20% 0 30% 0;
}
.performers img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
}
.TT img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
}
.guests img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
}
.MC img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
}
.performersbox{
  max-width: 100%;
  background-size: cover;       
  background-position: center;  
  padding: 10%;
  position: relative;
}
.performersbox p {
  white-space: normal;
  word-break: break-word;
}

.performersboxbox h1{
  font-family:"hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 9vw;
  transform: translateY(90%);
  background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.performersbox h2{
  text-align: left;
}

.performersboxwrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    justify-content: center;
    max-width: 100%;
    margin: 20% 0 30% 0;
    position: relative;
}
@media (min-width: 901px){
  .performersboxwrap > *:nth-child(2n){
    --offsetY: 80px;
  }
}

/* ===== スマホ（縦1列・完全フラット） ===== */
@media (max-width: 900px) {
  .performersboxwrap{
    display: flex;              /* block よりこちらが安定 */
    flex-direction: column;
    gap: 20px;                  /* ← 等間隔は gap で管理 */
    margin: 16% 0 20% 0;        /* 少しコンパクトに */
  }

  /* 偶数ズラし・初期+24px を無効化して高さブレをゼロに */
  .performersboxwrap > *{ --offsetY: 0 !important; }
  .performersboxwrap .per{
    opacity: 1;                 /* 好み：初期から見せる */
    transform: translateY(0) scale(1) !important;
    filter: none !important;
    padding: 16px;              /* %→px で安定 */
  }

  /* テキストの余白も統一（任意） */
  .performersboxwrap h4{
    margin: 8px 0 6px;
    font-weight: 800;
    font-size: clamp(16px, 4.8vw, 20px);
  }
  .performersbox p{
    margin: 0;
    font-size: clamp(13px, 3.8vw, 15px);
    white-space: normal;
    word-break: break-word;
    font-size: 10px;
  }
  .kotoba h1 {
    max-width: 100%;
    color: black;
    margin-top: 10%;
    font-weight: 600;
    font-size: 6rem;
    background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: gradientText 7s infinite;
    animation: gradientText 7s infinite;
  }
}


.performersboxwrap h4{
  font-weight: 800;
  font-size: larger;
}

.performersboxwrap img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
}

.per{
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
  padding: 10%;
  position: relative; 
}


/* 初期状態：ぼんやり＆少し下げる（+偶数列オフセット） */
.performersboxwrap .per{
  --offsetY: 0px;                   /* ← 偶数列で上書きする箱 */
  opacity: 0;
  transform: translateY(calc(var(--offsetY) + 24px)) scale(.98);
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  transition-delay: var(--stagger, 0ms);
}

/* 画面に入ったら表示（オフセットは残したまま） */
.performersboxwrap .per.is-visible{
  opacity: 1;
  transform: translateY(var(--offsetY)) scale(1);
  filter: blur(0);
}

/* 偶数列だけ縦ズラし。%は要素高依存でブレやすいのでpx推奨 */
.performersboxwrap > *:nth-child(2n){
  --offsetY: 80px;  /* 好みで 32〜64px くらい */
}

.mcbox{
  max-width: 100%;
  background-size: cover;       
  background-position: center;  
  padding: 10%;
  position: relative;
}

.mcboxbox h1{
  font-family:"hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 9vw;
  transform: translateY(90%);
  background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.guestbox{
  max-width: 100%;
  background-size: cover;       
  background-position: center;  
  padding: 10%;
  position: relative;
}

.guestboxbox h1{
  font-family:"hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 9vw;
  transform: translateY(90%);
  background: -webkit-linear-gradient(left, #bf0060, #0066a5, #bf0060);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.per2{
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
  padding: 10%;
  position: relative; 
}

.per2 img{
  max-width:70%;
  max-height: 70%;
  border-radius: 20px;
}

.per2 h4{
  font-weight: 800;
  font-size: xx-large;
}
@media (min-width: 900px){
  .per2 p{
    font-size: x-large;
  }
}
@media (max-width: 900px){
.per2 h4{
  font-weight: 800;
  font-size: larger;
}
}

.container {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  text-align: center;
}

.container h1 {
  letter-spacing: .15em;
  margin: 0 0 8px;
  font-weight: 800;
  font-size: xx-large;
}

#birthdays {
  margin-top: 24px;
  color: gold;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#birthdays  span{
  font-size: 60px
}

#dates {
  margin-top: 8px;
  color: #ccc;
  font-size: 14px;
}

span { font-size: 24px; }

#big {
  font-size: 36px;
  margin: 12px 0;
}
@media (max-width: 900px) {
  .container {
    max-width: 720px;
    margin: 100px auto;
    padding: 0 16px;
    text-align: center;
  }
  #birthdays  span{
    font-size: medium;
  }
  .container h1 {
    letter-spacing: .15em;
    margin: 0 0 8px;
    font-weight: 800;
    font-size: medium;
  }
}