.dateCountdown-box {
  /*-- widget全体 --*/
  padding: 10px 10px 10px 10px;
  /* 背景色 */
  background: #fa69b4;
}

 .dateCountdown-box .dateCountdown-inner {
  /* カウントダウンを囲む枠線 */
  border: 1px solid #fff;
}

 .dateCountdown-box .campaign {
  /*-- 「お急ぎください」タイトル部分 --*/
  text-align: center;
  width: fit-content;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  /* 文字の大きさ */
  font-size: 22px;
  /* 文字の太さ */
  font-weight: bold;
  /* 背景色 */
  background: #fa69b4;
}

 .dateCountdown-box .campaign ._small {
  /*-- 「ください」「キャンペーン」の部分 --*/
  /* 文字の大きさ */
  font-size: 20px;
  /* 文字の太さ */
  font-weight: normal;
}

 .dateCountdown-box .campaign .sp_only {
  display: none;
}

 .dateCountdown-box .dateCountdown__area {
  /*-- カウントダウン部分 --*/
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #000;
}

 .dateCountdown-box .dateCountdown__area .endText {
  /* 「キャンペーンは終了しました」の部分 */
  /* 文字の大きさ */
  font-size: 30px;
  /* 文字の太さ */
  font-weight: bold;
}

 .dateCountdown-box .dateCountdown__area .countEndText {
  /* 「終了まで」の部分 */
  margin: auto 0;
  line-height: 1.2;
  /* 文字の大きさ */
  font-size: 14px;
  /* 文字の太さ */
  font-weight: bold;
}

 .dateCountdown-box .dateCountdown__area .countText {
  /* 「日と」「時間」「分」「秒」の部分 */
  /* もじの大きさ */
  font-size: 16px;
  /* 文字の太さ */
  font-weight: bold;
  /* 文字の色 */
  color: #000;
}

 .dateCountdown-box .dateCountdown__area .countText .countNumBox {
  /* カウントダウン数字部分 */
  padding: 10px 10px;
  margin: 0 05px;
  display: inline-block;
  text-align: right;
  /* 横幅（文字の大きさを変更する場合は適宜修正してください） */
  min-width: 35px;
  /* 数字部分の背景色 */
  background: #fff;
  /* 文字の大きさ */
  font-size: 24px;
}

@media screen and (max-width: 650px) {
   .dateCountdown-box {
    /*-- 画面の大きさが650以下でのスタイル --*/
    padding: 10px 2% 3%;
  }

   .dateCountdown-box .dateCountdown-inner {
    padding: 10px 0 10px;
  }

   .dateCountdown-box .campaign {
    /*-- 「お急ぎください」タイトル部分 --*/
    margin-top: 10px;
    width: 90%;
    line-height: 10px;
    /* 文字の大きさ */
    font-size: 16px;
  }

   .dateCountdown-box .campaign ._small {
    /*-- 「ください」「キャンペーン」の部分 --*/
    /* 文字の大きさ */
    font-size: 14px;
  }

   .dateCountdown-box .campaign .sp_only {
    display: block;
  }

   .dateCountdown-box .dateCountdown__area {
    /*-- カウントダウン部分 --*/
  }

   .dateCountdown-box .dateCountdown__area .endText {
    /* 「キャンペーンは終了しました」の部分 */
    /* 文字の大きさ */
    font-size: 18px;
  }

   .dateCountdown-box .dateCountdown__area .countEndText {
    /* 「終了まで」の部分 */
    /* 文字の大きさ */
    font-size: 10px;
  }

   .dateCountdown-box .dateCountdown__area .countText {
    /* 「日と」「時間」「分」「秒」の部分 */
    /* 文字の太さ */
    font-size: 10px;
  }

   .dateCountdown-box .dateCountdown__area .countText .countNumBox {
    /* カウントダウン数字部分 */
    padding: 3px;
    /* 横幅（文字の大きさを変更する場合は適宜修正してください） */
    min-width: 23px;
    /* 文字の大きさ */
    font-size: 16px;
  }
}