body{
margin:0;
font-family:"Rounded Mplus 1c",sans-serif;
background:linear-gradient(180deg,#ffb6e6,#fff3a0);
color:#3a1121;
}

header{
text-align:center;
padding:60px 20px;
}

h1{
font-size:3rem;
color:#ff4fbf;
}

section{
padding:40px 20px;
}

h2{
color:#ff4fbf;
border-bottom:3px dashed #ffd000;
display:inline-block;
}

ul{
list-style: "⭐ ";
padding-left:20px;
}

.card{
  display:flex;
  gap:15px;
  background:#fff;
  padding:15px;
  border-radius:15px;
  margin-top:15px;
  align-items:center;

  /* 発光 */
  box-shadow:0 0 10px rgba(255,79,191,0.5);

  /* スクロール用 */
  opacity:0;
  transform: translateX(0);

  transition: 
    transform 1.2s ease-out,
    box-shadow 0.3s ease;
}


.card img{
width:70px;
height:70px;
border-radius:50%;
}

a{
color:#ff4fbf;
font-weight:bold;
text-decoration:none;
}

/* メニュー */
#menuBtn{
  position:fixed;
  top:25px;
  right:20px; 
  font-size:28px;
  cursor:pointer;
  z-index:3000;
  color: #3a1121;
}


#menu{
position:fixed;
top:60px;
right:15px;
background:#74ffe3;
padding:15px;
border-radius:10px;
display:none;
z-index:3000;
}

#menu a{
display:block;
margin:10px 0;
}

/* トップへ */
#topBtn{
  position:fixed;
  right:15px;
  bottom:15px;
  font-size:22px;
  border:none;
  background:#ff4fbf;
  color:#fff;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  box-shadow: 0 0 8px rgba(255,79,191,0.5); 
  transition: all 0.25s ease; 
}

/* ホバー時の演出 */
#topBtn:hover{
  background:#ffd000;
  transform: scale(1.2) rotate(-10deg);
  box-shadow: 0 0 15px #ff4fbf, 0 0 25px #ffd000;
}

/* クリック時 */
#topBtn:active{
  transform: scale(1) rotate(0deg); 
  box-shadow: 0 0 8px rgba(255,79,191,0.5);
}

.creator {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 5px; 
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.creator-name {
  font-weight: bold;
  color: #ff4fbf; 
  text-align: center;
}


@media screen and (max-width: 480px) {
  .creator {
    font-size: 0.8rem; 
  }
}


/* キラキラ背景 */
#sparkle{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

/* スクロール出現アニメ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:1s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

#fortuneBox{
 text-align:center;
}

#fortuneBtn{
 background:#ff4fbf;
 color:white;
 border:none;
 padding:12px 25px;
 font-size:18px;
 border-radius:30px;
 cursor:pointer;
 box-shadow:0 0 10px #ffd000;
}

#fortuneBtn:hover{
 transform:scale(1.1);
 box-shadow:0 0 10px #ff4fbf;
}

#fortuneResult{
 margin-top:20px;
 font-size:20px;
 color:#ff4fbf;
}

#logo span{
 display:inline-block;
 opacity:0;
 transform:translateY(20px) scale(0.9);
 animation:pop 0.35s forwards,
          glow 1.5s infinite alternate;
 animation-delay: calc(var(--i) * 0.1s);

 color:#ff4fbf;

 text-shadow:
  0 0 5px rgba(255,79,191,0.6),
  0 0 10px rgba(255,208,0,0.5);
}

#logo span{
  position: relative;
  z-index: 1; 
}




@keyframes pop{
 0%{
  opacity:0;
  transform:translateY(30px) scale(0.8);
 }
 60%{
  opacity:1;
  transform:translateY(-10px) scale(1.1);
 }
 100%{
  opacity:1;
  transform:translateY(0) scale(1);
 }
}

@keyframes glow{
 0%{
  text-shadow:
   0 0 3px rgba(255,79,191,0.5),
   0 0 6px rgba(255,208,0,0.4);
 }
 100%{
  text-shadow:
   0 0 10px rgba(255,79,191,1),
   0 0 20px rgba(255,208,0,0.6);
 }
}


#logo:hover span{
 text-shadow:
  0 0 15px #ff4fbf,
  0 0 30px #ffd000;
}

#menu a{
  display:block;
  padding:10px 15px;
  margin-bottom:5px;
  border-radius:8px;
  text-decoration:none;
  color:#3a1121;   
  background: #fff; 
  transition: all 0.2s ease;
}

/* ホバー時の強調 */
#menu a:hover{
  background: #ff4fbf;  
  color: #fff;    
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255,79,191,0.7); /* 光る演出 */
}
#emojiCursor{
  position: fixed;
  pointer-events: none; /* クリックを邪魔しない */
  font-size: 32px;
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease;
  z-index: 5000; 
  color: #ff4fbf; /* 💩をピンクに */
}
body {
  cursor: none; /* デフォルトカーソル非表示 */
}

/* ハート用 */
.heart {
  position: fixed;
  pointer-events: none;
  font-size: 24px;
  animation: heartFly 1.5s forwards;
  z-index: 4000;
}

@keyframes heartFly {
  0% {
    opacity: 1;
    transform: translate(0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rotate));
  }
}

p, .text {
  color: #3a1121; 
}
li {
  color: #3a1121;
  font-weight: bold;
}

.or-text {
  color: #3a1121; 
  font-weight: bold;
}


.x-link {
  color: #1DA1F2; 
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  position: relative;
}

/* ホバー時の強調 */
.x-link:hover {
  color: #ff4fbf; /* ピンクに変化 */
  transform: scale(1.1); 
  text-shadow: 0 0 10px #ff4fbf, 0 0 20px #ffd000; /* 発光 */
}

/* クリックした状態でもわかるように */
.x-link:active {
  transform: scale(0.95); 
  text-shadow: 0 0 5px #ff4fbf;
}




.glossary-cards {
  display: flex;
  flex-direction: column; 
  align-items: center;   
  gap: 20px;  
}


.glossary-card {
  background: #ffffff;
  padding: 15px 20px;
  border-radius: 15px;
  width: 90%;        
  max-width: 400px;     
  color: #fff;
  box-shadow: 0 0 10px rgba(255,79,191,0.5);
  transition: transform 1.2s, box-shadow 0.2s;
  cursor: pointer;
}
.glossary-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 20px #ff4fbf, 0 0 30px #ffd000;
}

.term {
  font-weight: bold;
  font-size: 1.2rem;
  color: #ff4fbf;
  margin-bottom: 8px;
}

.definition {
  font-size: 0.9rem;
  color: #3a1121;
  line-height: 1.3;
}

.poo {
  position: fixed;
  pointer-events: none; /* クリックを邪魔しない */
  font-size: 32px;
  color: #ff4fbf; /* ピンク💩 */
  animation: pooFly 1.5s forwards;
  z-index: 5000;
}

@keyframes pooFly {
  0% {
    opacity: 1;
    transform: translate(0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rotate));
  }
}



/* 左から出る */
.card.left-show {
  opacity: 1;
  transform: translateX(0);
}

/* 右から出る */
.card.right-show {
  opacity: 1;
  transform: translateX(0);
}

/* アニメ用の初期位置 */
.card-left-init {
  transform: translateX(-100px);
}

.card-right-init {
  transform: translateX(100px);
}

.glossary-card-left {
  transform: translateX(-100px);
}
.glossary-card-right {
  transform: translateX(100px);
}

.left-show {
  opacity: 1;
  transform: translateX(0);
}
.right-show {
  opacity: 1;
  transform: translateX(0);
}

/* 用語集と同じ浮き演出を自己紹介カードにも */
.card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 20px #ff4fbf, 0 0 30px #ffd000;
}

.card,
.glossary-card{
  animation: softGlow 2s infinite alternate;
}

@keyframes softGlow{
  from{ box-shadow:0 0 8px rgba(255,79,191,0.4); }
  to{ box-shadow:0 0 16px rgba(255,79,191,0.8); }
}

.member-name{
  cursor:pointer;
  color:#ff4fbf;
  transition: transform 0.2s, text-shadow 0.2s;
}

.member-name:hover{
  transform: scale(1.1);
  text-shadow: 0 0 10px #ff4fbf;
}
/* レインボー文字アニメ */
.rainbow-list li{
  font-weight: bold;
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, cyan, blue, violet, red
  );
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 4s linear infinite;
}

@keyframes rainbowText{
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 300%;
  }
}

/* スロット全体 */
.slot-machine{
  text-align:center;
  margin:50px 0;
  padding:25px;
  
}

/* タイトル */
.slot-title{
  color:#ff4fbf;
  margin-bottom:15px;
  
}

/* リール */
.reels{
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:50px;
  margin-bottom:20px;
}

.reel{
  width:70px;
  height:70px;
  background:#000;
  border:2px solid #ff4fbf;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 10px #ff4fbf;
}

/* ボタン */
#slotBtn{
  background:#ff4fbf;
  color:#fff;
  border:none;
  padding:10px 25px;
  font-size:18px;
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 0 10px #ffd000;
}

#slotBtn:hover{
  transform:scale(1.1);
  box-shadow:0 0 20px #ff4fbf;
}

.reel.stop{
  animation:bounce 0.3s ease;
}

@keyframes bounce{
  0%{transform:scale(1);}
  50%{transform:scale(1.3);}
  100%{transform:scale(1);}
}
/* JACKPOT演出 */
.jackpot{
  animation: jackpotFlash 0.15s infinite alternate;
}

@keyframes jackpotFlash{
  0%{
    background:#ff4fbf;
    box-shadow:0 0 20px #ff4fbf;
  }
  100%{
    background:#ffd700;
    box-shadow:0 0 40px #ffd700;
  }
}

/* JACKPOT文字ド派手 */
#slotResult.jackpot-text{
  animation: textPop 0.3s infinite alternate;
  font-size:28px;
  text-shadow:0 0 10px #ffd700,0 0 25px #ff4fbf;
}

@keyframes textPop{
  0%{transform:scale(1);}
  100%{transform:scale(1.3);}
}

/* 紙吹雪 */
.confetti{
  position:fixed;
  top:-20px;
  width:10px;
  height:10px;
  background:red;
  animation: confettiFall 2.5s linear forwards;
  z-index:9999;
}

@keyframes confettiFall{
  0%{
    transform:translateY(0) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translateY(100vh) rotate(720deg);
    opacity:0;
  }
}

/* 背景レインボーフラッシュ */
body.rainbow-flash{
  animation: rainbowFlash 0.8s linear;
}

@keyframes rainbowFlash{
  0%{
    background:#ff4fbf;
  }
  20%{
    background:#ff0000;
  }
  40%{
    background:#ffd700;
  }
  60%{
    background:#00ffea;
  }
  80%{
    background:#7CFF00;
  }
  100%{
    background:linear-gradient(180deg,#ffb6e6,#fff3a0);
  }
}

/* 流れ星 */
.shooting-star{
  position: fixed;
  top: 20%;
  left: -50px;
  font-size: 40px;
  cursor: pointer;
  z-index: 2000;
  animation: starFly 5s linear forwards;
  user-select: none;
  padding: 10px;
}

@keyframes starFly{
  from{
    transform: translateX(0) translateY(0);
  }
  to{
    transform: translateX(120vw) translateY(30vh);
  }
}

/* 特殊演出 */
.star-effect{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle,#fff,#ff4fbf,#ffd000);
  opacity: 0.9;
  animation: starFlash 0.8s ease-out forwards;
  z-index: 4000;
}

@keyframes starFlash{
  from{opacity:1;}
  to{opacity:0;}
}

/* Xスライドショー */

#x-slideshow{
  width:100%;
  overflow:hidden;
}

/* スライダー外枠 */
.x-slider{
  position: relative;
  width:100%;
  max-width:650px;
  margin:0 auto 0 -20px;
}

/* 見える窓 */
.slides-wrapper{
  width:100%;
  overflow:hidden;
}

/* 横レーン */
.slides{
  display:flex;
  transition: transform 0.6s ease;
}

/* 1枚 */
.slide{
  flex: 0 0 100%;
  display:flex;
  justify-content:center;
}

/* X埋め込み幅制御 */
.slide blockquote,
.slide iframe{
  width:100% !important;
  max-width:550px !important;
}

/* ボタン */
.slide-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#ff4fbf;
  border:none;
  color:#fff;
  font-size:20px;
  padding:8px 12px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
  box-shadow:0 0 10px #ff4fbf;
}

.prev{ left:5px; }
.next{ right:5px; }

.slide-btn:hover{
  transform:translateY(-50%) scale(1.2);
}

/* ローディング画面 */

#loadingScreen{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#ffb6e6,#fff3a0);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

/* ロゴ文字 */
.loading-logo span{
  display:inline-block;
  font-size:3rem;
  font-weight:bold;
  color:#ff4fbf;
  opacity:0;
  animation: loadingPop 0.6s forwards;
  animation-delay: calc(var(--i) * 0.15s);
  text-shadow:
    0 0 10px #ff4fbf,
    0 0 20px #ffd000;
}

@keyframes loadingPop{
  0%{
    opacity:0;
    transform:translateY(20px) scale(0.8);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Loading... */
.loading-text{
  margin-top:15px;
  color:#3a1121;
  font-size:1.1rem;
  letter-spacing:2px;
  animation: blink 1s infinite;
}

@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0.3;}
}

/* フェードアウト */
#loadingScreen.fade-out{
  animation: fadeOut 0.8s forwards;
}

@keyframes fadeOut{
  to{
    opacity:0;
    visibility:hidden;
  }
}

#gacha {
  text-align: center;
  margin: 30px 0;
}

#gachaBtn {
  background:#ff4fbf;
 color:white;
 border:none;
 padding:12px 25px;
 font-size:18px;
 border-radius:30px;
 cursor:pointer;
 box-shadow:0 0 10px #ffd000;
}

#gachaBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #ff4fbf;
}

#gachaResult img {
  max-width: 300px;
  width: 100%;
  border-radius: 15px;
  margin-top: 20px;
  transform: rotate(0deg);
}

#gachaResult{
 margin-top:20px;
 font-size:20px;
 color:#ff4fbf;
}

/* ガチャ画像カード風 */
.gacha-card {
  display: inline-block;
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(255,79,191,0.3);
  transform: translateY(0);
  transition: transform 0.5s, box-shadow 0.5s;
  position: relative;
  max-width: 250px;
}

/* 浮かせる演出 */
.gacha-card.float {
  animation: floatCard 1s ease forwards;
}

/* 光る演出 */
.gacha-card.glow {
  box-shadow:
    0 0 20px #ff4fbf,
    0 0 30px #ffd000,
    0 0 40px #ff4fbf;
}

/* 浮遊アニメ */
@keyframes floatCard {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.gacha-result img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* ガチャカードの虹色光 */
.gacha-card.rainbow-glow {
  animation: float 1s ease forwards, rainbowGlow 2s linear infinite alternate;
  box-shadow: 0 0 20px #ff4fbf;
}

/* 浮かせるアニメーション */
@keyframes float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* 虹色光のアニメーション */
@keyframes rainbowGlow {
  0%   { box-shadow: 0 0 20px red, 0 0 40px orange; }
  20%  { box-shadow: 0 0 20px orange, 0 0 40px yellow; }
  40%  { box-shadow: 0 0 20px yellow, 0 0 40px green; }
  60%  { box-shadow: 0 0 20px green, 0 0 40px blue; }
  80%  { box-shadow: 0 0 20px blue, 0 0 40px purple; }
  100% { box-shadow: 0 0 20px purple, 0 0 40px red; }
}
/* ガチャ紙吹雪 */
.gacha-particle{
  position: fixed;
  font-size: 26px;
  pointer-events: none;
  animation: gachaFly 1.5s forwards;
  z-index: 9999;
}

@keyframes gachaFly{
  0%{
    opacity:1;
    transform:translate(0,0) scale(1) rotate(0deg);
  }
  100%{
    opacity:0;
    transform:
      translate(var(--x), var(--y))
      scale(var(--s))
      rotate(var(--r));
  }
}
/* 作者情報まとめ枠 */
.gacha-author{
  margin:14px auto 4px;
  padding:6px 14px;
  width:fit-content;
  background:rgba(0,0,0,0.6);
  border:1px solid #ff4fbf;
  border-radius:20px;
  color:#ffd6f2;
  font-size:14px;
  box-shadow:0 0 10px #ff4fbf;
  text-shadow:0 0 6px #ff4fbf;
}

/* Xリンク */
.gacha-xlink{
  display:inline-block;
  margin-top:6px;
  padding:6px 16px;
  border-radius:20px;
  background:#ff4fbf;
  color:#000;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 0 12px #ff4fbf;
  transition:0.3s;
}

.gacha-xlink:hover{
  background:#ffd000;
  box-shadow:0 0 20px #ffd000;
  transform:scale(1.1);
}
/* 💩ドーン */
.big-poop{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-size:120px;
  z-index:9999;
  animation:poopBoom 1.2s ease forwards;
  pointer-events:none;
}

@keyframes poopBoom{
  0%{transform:translate(-50%,-50%) scale(0);}
  60%{transform:translate(-50%,-50%) scale(1.3);}
  100%{transform:translate(-50%,-50%) scale(1);}
}

/* 💩雨 */
.poop-fall{
  position:fixed;
  top:-50px;
  font-size:32px;
  animation:poopDrop 1.5s linear forwards;
  z-index:9999;
  pointer-events:none;
}

@keyframes poopDrop{
  from{
    transform:translateY(0) rotate(0deg);
  }
  to{
    transform:translateY(110vh) rotate(720deg);
  }
}

.big-love{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-size:clamp(18px, 5vw, 40px); /* 画面に応じて自動調整 */
  white-space:nowrap; /* 改行させない */
  color:#ff4fbf;
  z-index:9999;
  animation:lovePop 1.2s ease forwards;
  text-shadow:
    0 0 10px #ff4fbf,
    0 0 25px #ffffff;
  pointer-events:none;
  text-align:center;
  max-width:95vw;  /* 画面からはみ出さない */
  overflow:hidden;
}

@keyframes lovePop{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
  }
  60%{
    transform:translate(-50%,-50%) scale(1.2);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-50%) scale(1);
  }
}

#logo{
  cursor:pointer;
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

#logo:hover{
  text-shadow:
    0 0 8px #ff4fbf,
    0 0 18px #ffd000,
    0 0 30px #ff4fbf;
  transform:scale(1.05);
}

#visitorText{
  font-size:18px;
  text-align:center;
  margin-top:10px;
  color:#ff4fbf;
  text-shadow:0 0 5px #ff4fbf;
  white-space: nowrap;
}

#counterImg{
  vertical-align:middle;
  height:28px;   /* 数字の大きさ */
}

/* キリ番オーバーレイ */

#kiriOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

#kiriBox{
  background:#120012;
  border:3px solid #ff4fbf;
  padding:30px 50px;
  text-align:center;
  border-radius:15px;
  box-shadow:0 0 30px #ff4fbf;
  animation:kiriPop 0.4s ease;
}

#kiriTitle{
  color:#ffd000;
  font-size:32px;
  margin-bottom:15px;
}

#kiriNumber{
  font-size:28px;
  color:#ff4fbf;
  margin-bottom:20px;
}

#kiriBox button{
  background:#ff4fbf;
  border:none;
  color:#fff;
  padding:10px 20px;
  border-radius:20px;
  cursor:pointer;
}

@keyframes kiriPop{
  0%{transform:scale(0.5);}
  100%{transform:scale(1);}
}

#kiriLink{
  text-align:center;
  margin-top:6px;
  font-size:14px;
}

#kiriLink a{
  color:#ff4fbf;
  text-decoration:none;
  text-shadow:0 0 5px #ff4fbf;
}

#kiriLink a:hover{
  color:#ffd000;
  text-shadow:0 0 10px #ffd000;
}