/* ==================================================
   ちょっと聞いてみる
================================================== */
.quick-chat {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 9999;
   font-family: inherit;
}


/* 開くボタン */

.quick-chat-button {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 14px 20px;
   border: none;
   border-radius: 999px;
   background: #ffe600;
   color: black;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 7px 20px rgba(0, 31, 63, 0.28);
   transition: transform 0.2s ease, background 0.2s ease;
}

   .quick-chat-button i {
      color: #ffe600;
   }

   .quick-chat-button:hover {
      transform: translateY(-2px);
      background: #00345f;
   }


/* ==================================================
   チャット本体
================================================== */

.quick-chat-box {
   position: absolute;
   right: 0;
   bottom: 66px;
   width: 350px;
   max-height: calc(100vh - 110px);
   overflow-y: auto;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 15px 40px rgba(0, 31, 63, 0.25);
   border: 1px solid rgba(0, 31, 63, 0.12);
   opacity: 0;
   visibility: hidden;
   transform: translateY(15px);
   transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
   box-sizing: border-box;
}

   .quick-chat-box.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }


/* ==================================================
   ヘッダー
================================================== */

.quick-chat-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 18px;
   background: #001f3f;
   color: #ffffff;
}

   .quick-chat-header strong {
      display: block;
      font-size: 17px;
   }

   .quick-chat-header span {
      display: block;
      margin-top: 2px;
      color: #ffe600;
      font-size: 12px;
   }

.quick-chat-close {
   border: none;
   background: transparent;
   color: #ffffff;
   font-size: 26px;
   cursor: pointer;
   line-height: 1;
}


/* ==================================================
   最初のメッセージ
================================================== */

.quick-chat-message {
   padding: 18px;
   background: #eef8ff;
}

.quick-chat-company {
   padding: 13px 15px;
   background: #ffffff;
   border-radius: 5px 14px 14px 14px;
   color: #001f3f;
   font-size: 14px;
   line-height: 1.75;
   box-shadow: 0 3px 10px rgba(0, 31, 63, 0.07);
}

.quick-chat-note {
   margin: 12px 2px 0;
   color: #607080;
   font-size: 11px;
   line-height: 1.6;
}


/* ==================================================
   入力フォーム
================================================== */

.quick-chat-form {
   padding: 18px;
}

   .quick-chat-form label {
      display: block;
      margin: 0 0 6px;
      color: #001f3f;
      font-size: 13px;
      font-weight: 700;
   }

      .quick-chat-form label:not(:first-child) {
         margin-top: 14px;
      }

      .quick-chat-form label span {
         margin-left: 5px;
         color: #777777;
         font-size: 10px;
         font-weight: 400;
      }

   .quick-chat-form input,
   .quick-chat-form textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 11px;
      border: 1px solid #cbd6df;
      border-radius: 8px;
      background: #ffffff;
      color: #001f3f;
      font-family: inherit;
      font-size: 14px;
   }

   .quick-chat-form textarea {
      resize: vertical;
   }

      .quick-chat-form input:focus,
      .quick-chat-form textarea:focus {
         outline: none;
         border-color: #2374a8;
         box-shadow: 0 0 0 3px rgba(35, 116, 168, 0.12);
      }


/* 送信ボタン */

.quick-chat-submit {
   width: 100%;
   margin-top: 17px;
   padding: 12px;
   border: none;
   border-radius: 9px;
   background: #ffe600;
   color: #001f3f;
   font-size: 14px;
   font-weight: 800;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
}

   .quick-chat-submit:hover {
      background: #ffd500;
      transform: translateY(-1px);
   }


/* ==================================================
   送信結果画面
================================================== */

.quick-result-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 30px 20px;
   box-sizing: border-box;
   background: #eef8ff;
}

.quick-result-box {
   width: 100%;
   max-width: 560px;
   padding: 45px 35px;
   box-sizing: border-box;
   text-align: center;
   background: #ffffff;
   border-radius: 18px;
   box-shadow: 0 15px 40px rgba(0, 31, 63, 0.15);
}

.quick-result-icon {
   margin-bottom: 18px;
   font-size: 54px;
}

.quick-result-box.success .quick-result-icon {
   color: #2e8b57;
}

.quick-result-box.error .quick-result-icon {
   color: #c0392b;
}

.quick-result-box h1 {
   margin: 0 0 18px;
   color: #001f3f;
   font-size: 28px;
}

.quick-result-box p {
   margin: 0;
   color: #536474;
   font-size: 15px;
   line-height: 1.9;
}

.quick-result-back {
   display: inline-block;
   margin-top: 28px;
   padding: 12px 24px;
   border-radius: 999px;
   background: #001f3f;
   color: #ffffff;
   text-decoration: none;
   font-weight: 700;
}

   .quick-result-back:hover {
      background: #00345f;
   }


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 500px) {

   .quick-chat {
      right: 12px;
      bottom: 12px;
   }

   /* ==================================================
   「ちょっと聞いてみる」ボタン
================================================== */

   .quick-chat-button {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 22px;
      border: 3px solid #001f3f;
      border-radius: 999px;
      background: #ffe600;
      color: #001f3f;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 31, 63, 0.28);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
   }


      /* 吹き出しアイコン */

      .quick-chat-button i {
         color: #001f3f;
         font-size: 21px;
      }


      /* マウスを乗せたとき */

      .quick-chat-button:hover {
         background: #ffe600;
         transform: translateY(-3px);
         box-shadow: 0 9px 24px rgba(0, 31, 63, 0.35);
      }


   /* 最初だけ少し目を引く動き */

   .quick-chat-button {
      animation: quickChatAttention 4s ease-in-out infinite;
   }


   @keyframes quickChatAttention {

      0%, 82%, 100% {
         transform: translateY(0);
      }

      86% {
         transform: translateY(-5px);
      }

      90% {
         transform: translateY(0);
      }

      94% {
         transform: translateY(-3px);
      }
   }

   .quick-chat-box {
      position: fixed;
      left: 10px;
      right: 10px;
      top: 20px;
      bottom: 70px;
      width: auto;
      max-height: none;
      overflow-y: auto;
      box-sizing: border-box;
   }
}

/* ==================================================
   迷惑送信対策用ハニーポット
================================================== */

.quick-chat-honeypot {
   position: absolute !important;
   left: -9999px !important;
   top: auto !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
   opacity: 0 !important;
   pointer-events: none !important;
}


.quick-chat-guide {
   width: max-content;
   margin: 0 8px 7px auto;
   padding: 7px 12px;
   background: #ffffff;
   color: #001f3f;
   border: 2px solid #001f3f;
   border-radius: 12px;
   font-size: 12px;
   font-weight: 700;
   box-shadow: 0 3px 10px rgba(0, 31, 63, 0.15);
}


   /* 吹き出しの三角 */

   .quick-chat-guide::after {
      content: "";
      position: absolute;
      right: 28px;
      margin-top: 7px;
      border-width: 7px 6px 0;
      border-style: solid;
      border-color: #001f3f transparent transparent;
   }


/* ==================================================
   ちょっと聞いてみるボタン 色を統一
   PC・スマホ共通
================================================== */

.quick-chat .quick-chat-button {
   background: #ffe600 !important;
   color: #001f3f !important;
   border: 3px solid #001f3f !important;
}

   .quick-chat .quick-chat-button i {
      color: #001f3f !important;
   }

   .quick-chat .quick-chat-button:hover {
      background: #ffd900 !important;
      color: #001f3f !important;
   }