@charset "UTF-8";
html.open {
  font-size: 100% !important;
}

#chatbot-container .chatHeader {
  background-color: #37C9DA !important;
  color: #fff !important;
}

.chatHeader h6 {
  font-size: 20px !important;
  line-height: 20px !important;
}

/* 公式通販バッジ（rdgr同様） */
#chatbot-container .chatHeader #kosiki,
#chatbot-container #kosiki {
  display: inline-block !important;
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 0.95em !important;
  background: #ff9300 !important;
  background-color: #ff9300 !important;
  padding: 5px 12px !important;
  margin-left: 6px !important;
  border-radius: 9999px !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 2px 8px rgba(255, 147, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  letter-spacing: 0.5px !important;
}

@media (max-width: 768px) {
  #chatbot-container .chatHeader #kosiki,
  #chatbot-container #kosiki {
    font-size: 0.7em !important;
    padding: 4px 10px !important;
    margin-left: 4px !important;
  }
}

@media (max-width: 480px) {
  #chatbot-container .chatHeader #kosiki,
  #chatbot-container #kosiki {
    font-size: 0.65em !important;
    padding: 3px 8px !important;
    margin-left: 3px !important;
  }
}

#chatbot-container,
html.onshow{
  background-color: #f1f5f9;
}

#chatbot-container .inputContainer {
  position: initial;
  float: initial;
}


#chatbot-container .nextbtn-container, #chatbot-container .element-container{
  margin-left: initial!important;
}

#chatbot-container .option-label .listInputContainer {
  width: 100%;
  align-items: flex-start;
}
#chatbot-container .chatbot-element[data-custom-id="gender"] .list, #chatbot-container .chatbot-element[data-custom-id="sex"] .list {
  gap: 8px;
}

#chatbot-container .btn-primary {
  background-color: #FF9300;
  color: white;
}

#chatbot-container #kkg-send-container * {
  font-size: 0.9rem;
}

#chatbot-container #kkg-send-container .balloon,
#chatbot-container #kkg-send-container .balloon * {
  font-size: 1.15rem !important;
}

.closeConfirmContent {
  height: 50vh !important;
}

#np-postpay-description {
  display: none !important;
}

.nppostpayRetryOk {
  display: none !important;
}

/* NP後払いの説明文コンテナも削除 */
.chatbot-element[data-element-type="NPPostpay"] .w-full.rounded-lg.bg-white.drop-shadow-sm.p-2.mb-2 {
  display: none !important;
}

/* アコーディオン内の二重スクロールを解消 */
#chatbot-container #kkg-send-container accordion-item .accordion-body {
  max-height: none !important;
  overflow-y: visible !important;
  border: none !important;
}

@keyframes reflect {
  0%, 75% {
    transform: rotate(45deg) scale(0);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) scale(100);
    opacity: 0;
  }
}

/* 送信ボタン・アップセルボタン - 大きく押しやすいスタイル */
#chatbot-container #kkg-send-container #submitButton,
#chatbot-container #upsell-container #upsellButton,
#chatbot-container #upsell-container #upsellConfirmButton {
  height: 100px !important;
  min-height: 100px !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

/* 送信ボタン（画像ベース）: CTA画像 770x240 のアスペクト比を維持 */
#chatbot-container #kkg-send-container #submitButton.submitBtn-image {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 31.17% !important; /* 240/770 ≈ アスペクト比維持 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-image: url('https://v2pr.aqur.com/public/source/pr/drdw3/assets/CTA_drdw.gif') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden;
}
#chatbot-container #kkg-send-container #submitButton.submitBtn-image:not(:disabled):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
#chatbot-container #kkg-send-container #submitButton.submitBtn-image:not(:disabled):active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* アップセル確認ボタン（画像ベース）: 送信ボタンと同様にCTA_drdw.gif */
#chatbot-container #upsell-container #upsellConfirmButton.submitBtn-image {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 31.17% !important; /* 240/770 アスペクト比維持 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-image: url('https://v2pr.aqur.com/public/source/pr/drdw3/assets/CTA_drdw.gif') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden;
}
#chatbot-container #upsell-container #upsellConfirmButton.submitBtn-image:not(:disabled):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
#chatbot-container #upsell-container #upsellConfirmButton.submitBtn-image:not(:disabled):active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* upsellConfirmButton内のspanにもフォントサイズを適用 */
#chatbot-container #upsell-container #upsellConfirmButton span {
  font-size: 1.5rem !important;
}


#chatbot-container #kkg-send-container #submitButton:not(:disabled):hover,
#chatbot-container #upsell-container #upsellButton:not(:disabled):hover,
#chatbot-container #upsell-container #upsellConfirmButton:not(:disabled):hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#chatbot-container #kkg-send-container #submitButton:not(:disabled):active,
#chatbot-container #upsell-container #upsellButton:not(:disabled):active,
#chatbot-container #upsell-container #upsellConfirmButton:not(:disabled):active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* タイマーの色設定（kkgと同じ色） */
/* 「お急ぎください！」はオレンジ色 */
#chatbot-container #header-timer .timer-urgent {
  color: #c2410c !important;
  font-weight: 600;
}

/* 数字はオレンジ色 */
#chatbot-container #header-timer .timer-number {
  color: #c2410c !important;
  font-weight: 600;
}

#chatbot-container #header-timer #timer-milliseconds {
  color: #c2410c !important;
  font-weight: 600;
}

/* 「本日受付終了まで　あと　時間　分　秒」は黒色 */
#chatbot-container #header-timer .timer_1 {
  color: #000 !important;
}

/* 「あと」は黒色 */
#chatbot-container #header-timer .timer_3 {
  color: #000 !important;
}

/* 「時間」「分」「秒」は黒色 */
#chatbot-container #header-timer .timer-unit,
#chatbot-container #header-timer .timer-unit-small {
  color: #000 !important;
}

/* index.jsonのcodeセクションで設定されたタイマーの色を上書き */
/* timer_1内のspan（timer-urgent以外）は黒色 */
#chatbot-container #header-timer .timer_1 span:not(.timer-urgent) {
  color: #000 !important;
}

/* timer_2内のspan（timer-number以外）は黒色 */
#chatbot-container #header-timer .timer_2 span:not(.timer-number):not(#timer-milliseconds) {
  color: #000 !important;
}

/* 次へボタンに「あとX問」を追加（ブロック単位、groupは1問としてカウント） */
/* sid653b: お名前→住所→電話+メール(contact)→支払方法→クレカ/NP（生年月日なし・4問から） */
/* sid9f99: 生年月日→お名前→住所→電話+メール(contact)→支払方法→クレカ/NP（5問から、下のオーバーライドで制御） */
#chatbot-container button[data-element-id="f88f3e1"]::after {
  content: '（あと4問）';
  margin-left: 0.25em;
}

#chatbot-container button[data-element-id="45db1e"]::after {
  content: '（あと4問）';
  margin-left: 0.25em;
}

/* sid9f99: 1問目=生年月日、2問目=お名前（index.jsonとは逆順）のためオーバーライド */
#chatbot-container[data-sid="9f9930ee-c530-4160-a314-f9a79561111c"] button[data-element-id="45db1e"]::after {
  content: '（あと5問）';
  margin-left: 0.25em;
}

#chatbot-container[data-sid="9f9930ee-c530-4160-a314-f9a79561111c"] button[data-element-id="f88f3e1"]::after {
  content: '（あと4問）';
  margin-left: 0.25em;
}

#chatbot-container button[data-element-id="cc7da2a"]::after {
  content: '（あと3問）';
  margin-left: 0.25em;
}

/* ブロック4: contact（電話+メール）は1問 */
#chatbot-container button[data-element-id="d5d307"]::after,
#chatbot-container button[data-element-id="31d3c2"]::after {
  content: '（あと2問）';
  margin-left: 0.25em;
}

#chatbot-container button[data-element-id="dac6a61"]::after {
  content: '（あと1問）';
  margin-left: 0.25em;
}

#chatbot-container button[data-element-id="36a5088"]::after,
#chatbot-container button[data-element-id="52dc1d"]::after {
  content: '（あと1問）';
  margin-left: 0.25em;
}

/* タイマーボタン#aqur_timerを非表示にする（manaraと同様の処理） */
#aqur_timer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}