#fairy-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 30px auto;
  text-align: left;
  max-width: 700px;
  flex-wrap: wrap; /* スマホ対応 */
}

.fairy-shirufi {
  width: 600px;
  height: auto;
}
@media screen and (max-width: 600px) {
  .fairy-shirufi {
    width: 95%;   /* スマホ時は画面幅の90%にする */
    height: auto;
  }
}

.fairy-text h1 {
  font-size: 30px;
  color: #e76f51; /* オレンジ系で目立つ */
  margin-bottom: 15px;
   padding: 0 15px; 
}

.fairy-text p {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
  padding: 0 15px;
  line-height: 1.8;  /* ← 行間を広げる */
}
@media screen and (max-width: 600px) {
  .fairy-text h1 {
    font-size: 22px;
  }

  .fairy-text p {
    font-size: 14px;
    line-height: 1.6;
  }
}



  .card {
    width: 120px;    /* PCではカードを大きくする */
    height: 180px;
  }

  #fairy {
    width: 450px;    /* 妖精の切り抜きもPCでは拡大 */
  }

#fairy-card-area {
    position: relative;       /* 絶対配置の基準 */
    width: 100%;
    max-width: 800px;
    margin: 20px auto;        /* ヘッダー下に余白 */
}
.shuffle-area {
  position: relative;
  width: 100%;
  max-width: 800px;   
  height: 80vh;
  max-height: 500px;
  margin: 20px auto ; /* 上に余白 50px、左右中央寄せ */
  background-image: url('images/table.webp');
  background-size: contain;      /* 全体が見えるように */
  background-position: center;
  background-repeat: no-repeat;
}

/* カード */
.card {
  position: absolute;
  width: 90px;
  height: 140px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -45px; /* 中央に重ねる */
  opacity: 0.95;
  animation: none; /* ページロード時はアニメなし */
}

#startShuffle {
  display: block;       /* 中央寄せでブロック扱い */
  margin: 20px auto 0;           /* 上下に余白、自動で左右中央 */
  padding: 15px 30px;          /* ボタンの内側スペース */
  background-color: #ff8c42;   /* 可愛いオレンジ系 */
  color: white;                /* 文字色 */
  font-size: 18px;             /* 文字サイズ */
  font-weight: bold;           /* 太字 */
  border: none;                /* 枠線なし */
  border-radius: 25px;         /* 丸みをつける */
  cursor: pointer;             /* マウスオーバーで手の形 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 立体感 */
  transition: transform 0.2s, box-shadow 0.2s; /* ホバー効果用 */
}

/* ホバーで少し動く可愛いアニメーション */
#startShuffle:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}



/* 選択カード用アニメ */
.card.selected {
  animation: floatUp 1.8s forwards;
  z-index: 10;
}
/* 選ばれたカード用の光エフェクト */
.selected {
 
  z-index: 15;
  box-shadow: 0 0 30px 10px rgba(255, 255, 150, 0.8),
              0 0 60px 20px rgba(255, 255, 200, 0.6);
  transition: box-shadow 0.5s ease-in-out;
}

@keyframes floatUp {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(0,-80px) scale(1.3) rotate(10deg); }
}

/* 結果カード */
.result-card {
  position: absolute;       /* ← relative から absolute に変更 */
  top: 50%;                 /* 親要素の中央に */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  width: 200px;
  height: 370px;
  background-image: url('images/sitesample-cardura.webp');
  border-radius: 10px;
  z-index: 10;        /* 背景より上に */
 

  opacity: 0; /* 初期非表示 */
 
  background-size: cover;       /* 画像をカードいっぱいに */
  background-position: center;  /* 画像を中央に配置 */
  transition: opacity 1.5s ease;
  margin: 0 auto; 
}

.result-card.show {
  opacity: 1;
  transform: translate(-50%, -50%); /* 表示時にふわっと大きく */
}

/* 星の粉 */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,220,1), transparent);
  border-radius: 50%;
  opacity: 0.7;
  animation-name: sparkle;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes sparkle {
  0% { transform: translate(0,0) scale(0.5); opacity:0.3; }
  50% { transform: translate(10px,-15px) scale(1.5); opacity:1; }
  100% { transform: translate(0,0) scale(0.5); opacity:0.3; }
}


/* 光の玉 */
.orb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, rgba(255,255,200,1), transparent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  z-index: 11;
}





/* シャッフルアニメーション */
@keyframes shuffleMoveMobile {
  0%   { transform: translate(-40px,-20px) rotate(-10deg); }
  25%  { transform: translate(30px,15px) rotate(12deg); }
  50%  { transform: translate(-25px,25px) rotate(-8deg); }
  75%  { transform: translate(20px,-10px) rotate(5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes shuffleMove {
  0%   { transform: translate(-60px,-30px) rotate(-10deg); }
  25%  { transform: translate(50px,20px) rotate(12deg); }
  50%  { transform: translate(-40px,40px) rotate(-8deg); }
  75%  { transform: translate(30px,-20px) rotate(5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes shuffleMovePC {
  0%   { transform: translate(-80px,-50px) rotate(-10deg); }
  25%  { transform: translate(70px,30px) rotate(12deg); }
  50%  { transform: translate(-60px,50px) rotate(-8deg); }
  75%  { transform: translate(50px,-30px) rotate(5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}



/* 選択カードアニメ */
@keyframes floatUp {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(0,-100px) scale(1.3) rotate(10deg); }
}
/* 既存のスタイル（PC用） */
#resultWrapper {
  width: 50%;
  margin: 10px auto;
}

/* スマホ用に上書き */
@media screen and (max-width: 600px) {
  #resultWrapper {
    position: relative;  /* 追加 */
    width: 90%;      /* 画面幅いっぱいに近く */
    max-width: none; /* 制限解除 */
    margin: 10px auto;
    flex-direction: column;  /* カード→文章→ボタン */
  }
  
  .card {   /* もしカードが絶対位置なら */
    position: absolute;  /* 絶対位置解除 */
    margin-bottom: 10px; /* カード同士の間隔 */
  }
}



@media screen and (max-width: 600px) {
  
  .result-text {
    margin-top: 180px !important; /* カードの下に文章を配置 */
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto 0 auto !important;
    font-size: 16px !important;
    text-align: left !important;
  }
  
  #backBtn {
    margin-top: 15px; /* ボタンも文章の下に寄せる */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
}