@charset "UTF-8";

/*colum210*/
/* ==========================================
   1. コンテナ全体のレイアウト（横並び・中央配置）
   ※前回の設定を維持しつつ、gapを調整
   ========================================== */
.release-method {
  display: flex;
  align-items: center;
  /* 中央揃えを維持 */
  justify-content: space-between;
  gap: 40px;
  /* 画像とテキストの間に少しゆとりを持たせる */
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================
   2. 各要素の幅と画像の設定（左に配置）
   ========================================== */
.release-img {
  flex-grow: 3;
  /* 比率を3に変更 */
  flex-basis: 0;
  order: 1;
  /* ★追加：必ず1番目（左）に配置する */
}

.release-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   3. 洗練されたテキストカード（右に配置）
   ========================================== */
.release-text {
  flex-grow: 1;
  flex-basis: 0;
  order: 2;
  /* ★追加：必ず2番目（右）に配置する */

  /* ↓ 以下のスタイルはそのまま残してください ↓ */
  background-color: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.3s ease;
}

/* ==========================================
   4. スマートフォン向けの調整（縦並び）
   ※カードのデザインをスマホ向けに最適化
   ========================================== */
@media (max-width: 768px) {
  .release-method {
    flex-direction: column;
    /* スマホでは縦並びに切り替える */
    gap: 20px;
    /* 余白を調整 */
  }

  .release-text {
    width: 100%;
    /* 画面幅に広げる */
    padding: 25px;
    /* スマホでは余白を狭める */
    border-radius: 8px;
    /* 角丸を少し小さく */
    box-shadow: none;
    /* スマホでは影を消してスッキリ見せる（任意） */
    border: none;
    /* スマホでは枠線も消す（任意） */
  }
}