/* --- 全体の基本設定 --- */

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f9f9f9;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  padding: 10px;
}
.card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
h2 {
  color: #5c6bc0;
  border-bottom: 2px solid #5c6bc0;
  padding-bottom: 10px;
  margin-top: 0;
}
.input-group {
  margin-bottom: 15px;
}
input[type="number"] {
  width: 70px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}
button {
  background: #5c6bc0;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
}
.result-box {
  border: 2px solid #e0e0e0;
  padding: 25px;
  border-radius: 12px;
  background: #fff;
  margin-top: 20px;
}
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 5px 10px 0;
}
.badge-shichu {
  background: #e8f5e9;
  color: #2e7d32;
}
.badge-star {
  background: #e3f2fd;
  color: #1565c0;
}
.badge-element {
  background: #fff3e0;
  color: #e65100;
}
.item-box {
  background: #fff8e1;
  padding: 12px;
  border-radius: 8px;
  border-left: 5px solid #ffb300;
  margin-top: 20px;
  font-weight: bold;
}
.profile-card {
  flex: 1;
  min-width: 200px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* --- 鑑定結果の外枠 --- */
.result-box {
  max-width: 800px;
  margin: 30px auto;
  padding: 10px;
  background: #f9faff;
  border: 2px solid #5c6bc0;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- タイトル --- */
.result-title {
  color: #5c6bc0;
  text-align: center;
  margin-top: 0;
  font-size: 1.6em;
  letter-spacing: 2px;
}

/* --- がっちゃんこ解説エリア --- */
.story-container {
  background: white;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  line-height: 2;
  margin-bottom: 25px;
  font-size: 1.1em;
}

.story-label {
  display: block;
  color: #5c6bc0;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* --- 5占術のグリッド（PC版は2列） --- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 横に2つ並べる */
  gap: 15px;
  margin-top: 20px;
}

/* 個別のデータカード */
.data-card {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
  font-size: 0.95em;
  transition: transform 0.2s;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-card strong {
  color: #5c6bc0;
  display: block;
  margin-bottom: 5px;
}

.data-card span {
  color: #666;
  font-size: 0.9em;
}

/* ラッキーアイテム */
.lucky-box {
  margin-top: 30px;
  padding: 20px;
  background: #fffcf0;
  border-radius: 12px;
  text-align: center;
  border: 1px dashed #ffb74d;
  font-weight: bold;
}

/* パソコンではそのまま（インライン） */
.fortune-item strong {
  display: inline;
}

/* パソコン版の基本設定 */
.fortune-grid {
  grid-template-columns: 1fr 1fr; /* 横に2つ並べる */
}
.rokusei-card {
  grid-column: span 2; /* 六星占術だけは横いっぱいに使う */
}
/* Amazonアフィリエイトボタンの基本設定 */
.amazon-btn {
  display: inline-block;
  background: #ff9900; /* 基本の明るいオレンジ */
  color: white !important;
  text-decoration: none;
  font-size: 0.85em;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease; /* 色の変化を滑らかに */
  margin-top: 10px;
}

/* マウスが乗った時（ホバー）の設定 */
.amazon-btn:hover {
  background: #d68605; /* 少し濃いオレンジ */
  transform: translateY(-1px); /* ほんの少し上に浮かせる演出 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* クリックした瞬間 */
.amazon-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.jyuuni {
    font-size: 0.85em;      /* 文字サイズを少し小さくします */
    color: #7f8c8d;         /* 控えめなグレー色にします */
    line-height: 1.6;       /* 行間を広げて読みやすくします */
    margin: 10px 0;         /* 前後の余白を整えます */
    padding: 0 5px;         /* 画面端に密着しないよう調整 */
    text-align: justify;    /* 両端揃えで綺麗に見せます */
}

.tuki {
    font-size: 0.9em; 
    line-height: 1.7; 
    padding: 0 15px;      /* 左右に15pxの余白を持たせる */
    margin: 15px 0;       /* 上下の余白 */
    text-align: left;     /* 左揃えを明示 */
    }

@media screen and (max-width: 600px) {
  /* 1. 2カラムを解除して横幅いっぱいに広げる（最重要） */
  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* 2. 項目名（：の前）を改行させない */
  .fortune-item {
    white-space: nowrap; /* これで「：」の前後で勝手に折れません */
    letter-spacing: -0.02em; /* ほんの少しだけ詰める */
    font-size: 0.95rem;
  }

  /* 3. 本質データの箱自体のパディングを調整 */
  .result-box div[style*="background: #fff"] {
    padding: 15px 10px !important;
  }

  .fortune-grid {
    /* スマホでは「1列」にして幅を確保する！ */
    grid-template-columns: 1fr !important;
  }

  .rokusei-card {
    /* スマホでは1列なのでスパン設定を解除 */
    grid-column: span 1 !important;
  }

  /* 項目名と中身を1行に収めやすくするための微調整 */
  .fortune-grid div {
    letter-spacing: -0.02em; /* 文字間をほんの少し詰める */
    word-break: break-all; /* 変な隙間を作らず端まで使う */
  }

  .lucky-row {
    /* 1. 文字サイズを標準より少し小さく(16px → 約13.6px) */
    font-size: 0.85rem !important;
    /* 2. 文字の間隔を極限まで詰める（これが一番効きます！） */
    letter-spacing: -0.06em !important;
    /* 3. 改行を絶対に許さない設定 */
    white-space: nowrap;
    /* 4. 左右の余白を削って、文字が通る道を広げる */
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .lucky-row strong {
    /* 太字を少し細くすると、さらに横幅が浮きます */
    font-weight: 600;
  }

  /* Amazonアフィリエイトボタンの基本設定 */
  /* アプローチ1：「押した瞬間（アクティブ時）」の演出を強化 */
  .amazon-btn:active {
    background: #ff9900 !important; /* PCのホバーよりさらに濃いオレンジ */
    transform: scale(0.97) translateY(1px) !important; /* ボタン全体を少し縮小して沈ませる */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* 影を薄くして、沈んだ感を出す */
    transition: transform 0.1s ease !important; /* 沈む動きを速くして、キレを出す */
  }

  /* アプローチ2：CSSアニメーション（キーフレーム）でボタン自体を動かす */
  @keyframes btn-shimmer {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.9;
      transform: scale(1.02);
    } /* ほんの少し大きく、薄く */
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .amazon-btn {
    /* ボタン全体にゆっくりとした点滅と拡大縮小のアニメーションを適用 */
    animation: btn-shimmer 2.5s infinite ease-in-out;
  }
  .jyuuni {
    font-size: 0.85em;      /* 文字サイズを少し小さくします */
    color: #7f8c8d;         /* 控えめなグレー色にします */
    line-height: 1.6;       /* 行間を広げて読みやすくします */
    margin: 10px 0;         /* 前後の余白を整えます */
    padding: 0 5px;         /* 画面端に密着しないよう調整 */
    text-align: justify;    /* 両端揃えで綺麗に見せます */
    }

    .tuki {
        font-size: 0.9em; 
    line-height: 1.7; 
    padding: 0 15px;      /* 左右に15pxの余白を持たせる */
    margin: 15px 0;       /* 上下の余白 */
    text-align: left;     /* 左揃えを明示 */
    }
}