@charset "utf-8";

/* 全体 */
body {
  background: #f5f5f5;
  color: #313131;
  margin: 0;
  padding: 0;
  font: 16px/1.6 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}

#container {
  width: 750px;
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

img { max-width: 100%; height: auto; }

/* ===== CTA（画像に合わせた余白・サイズ） ===== */
.countdown {
  width: 750px;
  background-color: #01b796;      /* 緑 */
  border-radius: 20px;             /* 角丸 */
  margin: 0 auto;                  /* 上下の外側余白はゼロで中央寄せ */
  padding: 28px 30px 22px;         /* 画像に近い内側余白（上/左右/下） */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* タイマー（2行） */
.cta-timer {
  color: #fff;
  font-size: 34px;                 /* 画像に近いサイズ感（必要なら38pxへ） */
  line-height: 1.35;
  margin: 0 0 18px;
}

/* ラベル */
.cta-label {
  color: #fff;
  font-size: 18px;
  margin: 6px 0 10px;
}

/* 入力欄（グレー枠・薄グレー背景） */
.cta-input {
  width: 600px;                    /* 画像の見た目に近い固定幅 */
  max-width: 90%;
  height: 54px;
  background-color: #f8f8f8;
  border: 2px solid #666666;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 14px;
  box-sizing: border-box;
  margin-bottom: 18px;
  color: #313131;
}
.cta-input::placeholder {
  color: #9a9a9a;
}

/* ボタン（画像をそのまま使う） */
.cta-btn {
  width: 640px;
  height: 165px;
  max-width: 92%;
  background: url(../img/button.png) no-repeat center center / cover;
  border: none;
  cursor: pointer;
  display: block;
  margin: 8px auto 14px;           /* 入力欄との距離・下部との距離 */
}

/* 注意書き */
.note {
  color: #ffffff;
  font-size: 14px;
  margin: 0;
}

/* フッター */
footer {
  width: 100%;
  text-align: center;
  padding: 20px 0 15px;
  color: #fff;
  background-color: transparent;
  font-size: 90%;
}

/* 既存スタイル（必要最低限残し） */
a { color: #555; text-decoration: none; }
a:hover { color: #006ddc; }

/* スマホ調整（必要に応じて） */
@media (max-width: 768px) {
  #container { width: 100%; border: none; }
  .countdown { width: 92%; padding: 24px 16px 18px; border-radius: 16px; }
  .cta-timer { font-size: 28px; }
  .cta-label { font-size: 16px; }
  .cta-input { width: 100%; height: 56px; font-size: 16px; }
  .cta-btn { width: 100%; height: 135px; }
  .note { font-size: 12px; }
}
.cta-timer span {
  font-size: 60px;
  font-weight: bold;
}

/* 数字を大きくする（PCだけ適用） */
.cta-timer span {
  font-size: 60px;
  font-weight: bold;
}

/* スマホ調整 */
@media (max-width: 768px) {
  #container { width: 100%; border: none; }
  .countdown { width: 92%; padding: 24px 16px 18px; border-radius: 16px; }
  .cta-timer { font-size: 22px; line-height: 1.4; }
  .cta-timer span { font-size: 34px; } /* ← 数字を縮小 */
  .cta-label { font-size: 16px; }
  .cta-input { width: 100%; height: 56px; font-size: 16px; }
  .cta-btn { 
    width: 100%; 
    height: auto; /* 高さ自動 */
    aspect-ratio: 640 / 165; /* 元画像比率維持 */
    background: url(../img/button.png) no-repeat center center / contain; /* 見切れ防止 */
  }
  .note { font-size: 12px; }
}