/* ============================================================
   1. 共通パーツ：ボタンとテキストのスタイル
   ============================================================ */
.phone { font-size: 24px; font-weight: bold; margin: 5px 0; }
.blue-text { color: #0055aa; }
.red-text { color: #ee2222; }

.company .btn {
  display: block;
  margin: 10px auto;
  padding: 12px;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
 /* transition: opacity 0.3s;*/
}
/* --- 共通ボタン（丸ボタンなど）のhover設定 --- */
.company .btn:hover {
  background-color: #fff !important; /* 背景を白に */
  color: inherit; /* いったん継承 */
  opacity: 1; /* 透明度変化をオフにする（見やすくするため） */
}

/* 青ボタンのhover：文字を青にする */
.blue-btn:hover {
  color: #2255aa !important;
  border: 1px solid #2255aa; /* 枠線を付けてボタンの輪郭を維持 */
}

/* 赤ボタンのhover：文字を赤にする */
.red-btn:hover {
  color: #ee2222 !important;
  border: 1px solid #ee2222;
}

/* --- ウィジェット内の2列ボタン（フラットデザイン）のhover設定 --- */
.red-btn-flat:hover {
  background-color: #fff !important;
  color: #ee2222 !important; /* 文字を赤に */
  border: 1px solid #ee2222;
/*  transform: translateY(-2px);*/
}

.blue-btn-flat:hover {
  background-color: #fff !important;
  color: #2255aa !important; /* 文字を青に */
  border: 1px solid #2255aa;
/*  transform: translateY(-2px);*/
}

/* ボタン内の説明文(span)もhover時に色が変わるように指定 */
.red-btn-flat:hover span,
.blue-btn-flat:hover span {
  color: inherit; /* 親のボタンの色（赤または青）に合わせる */
}
.blue-btn { background: #2255aa; }
.red-btn { background: #ee2222; }

/* ウィジェット内の2列ボタン（フラットデザイン） */
.widget-buttons { display: flex; gap: 10px; margin-top: 15px; }
/* ボタンを囲むコンテナ */
/* 親要素：横並びにするだけ */
/* 1. 親：ボタンセットを横に2つ並べる箱 */
.widget-btn-group {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 15px;
}

/* 2. 中：各ボタン＋テキストを「縦」に並べる箱 */
.btn-container {
    flex: 1 !important;
    display: block !important; /* 横並びを防ぐ */
    text-align: center !important;
}

/* 3. ボタン：高さを固定 */
.red-btn-flat, .blue-btn-flat {
    width: 100% !important;
    height: 55px !important; /* ここで高さを固定 */
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 8px !important; /* 下のテキストとの距離 */
}

/* 4. テキスト：必ずボタンの下に来るようにする */
.btn-subtext {
    display: block !important; /* これで強制的に改行 */
    width: 100% !important;
    font-size: 12px !important;
    color: #444 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 背景色 */
.red-btn-flat { background-color: #ee2222; }
.blue-btn-flat { background-color: #2255aa; }

.red-btn-flat span, .blue-btn-flat span {
  display: block;
  font-size: 0.85em;
  font-weight: normal;
  margin-top: 5px;
  line-height: 1.2;
}

/* ============================================================
   2. インラインポップアップ（本社リンク直下用） [cite: 1]
   ============================================================ */
.support-blue-box {
  display: none; /* JSでblockに切り替え */
 /* opacity: 0;*/
 /* transform: translateY(10px);*/
 transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  
  border: 2px solid #0055aa;
  border-radius: 15px;
  background: #fff;
  padding: 20px;
  margin-top: 10px;
  max-width: 350px;
  position: relative;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 85, 170, 0.1);
  z-index: 10;
}

/* ポップアップ表示用クラス */
.support-blue-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   3. 右下スライドインウィジェット [cite: 3]
   ============================================================ */
/* --- デスクトップ・基本設定 --- */
.slide-in-widget {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 450px !important;
  max-width: calc(100% - 40px) !important;
  background: #ffffff !important;
  border: 2px solid #0055aa !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 40px rgba(0, 50, 100, 0.15) !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  display: none; /* 初期はJSで制御 */
 /* transition: opacity 0.8s ease-out, transform 1.0s cubic-bezier(0.23, 1, 0.32, 1), visibility 1.0s !important;*/
  
  height: auto !important;
  min-height: 150px; /* 最小限の高さを持たせておく */
  transition: opacity 0.5s, transform 0.5s !important; /* heightは絶対に入れない  */
  overflow: hidden;
}
/* コンテンツラッパー：中身が重なってもはみ出さない */
.widget-content-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.step-content {
  grid-column: 1;
  grid-row: 1;
  opacity: 0; /* 最初は透明 */
 /* visibility: hidden; /* クリックもできないようにする */
  transition: opacity 0.3s ease; /* 透明度だけを滑らかに変える [cite: 54] */
  
  /* 重要：display: none を使わず、場所だけ確保させる */
}
/* 表示中だけ見えるようにする */
.step-content.active-step {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative; /* これが箱のサイズを支える */
}
/* 各要素の余計なマージンをリセット */
.step-content h3 { margin-top: 0; margin-bottom: 10px; }
/*.step-content p { margin-bottom: 15px; }*/
.step-content .title { font-weight: bold; margin-bottom: 5px; }
/* --- スマホ・タブレット用（画面幅が500px以下の場合） --- */
@media screen and (max-width: 500px) {
  .slide-in-widget {
    width: calc(100% - 20px); /* 左右に10pxずつの余白 */
    right: 10px;
    bottom: 10px;
    padding: 20px 15px; /* スマホ用にパディングを少し狭く */
  }

  /* 2列ボタンをスマホでは縦並びにする（押しやすくする場合） */
  .widget-buttons {
    flex-direction: column; 
    gap: 8px;
  }
  
  .phone {
    font-size: 20px; /* 電話番号を少し小さくして一行に収める */
  }
  
  .slide-in-widget h3 {
    font-size: 1.2em;
  }
}
/* スライドイン表示用クラス */
.slide-in-widget.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 閉じる際のアニメーション */
.slide-in-widget.is-closing {
  opacity: 0;
/*  transform: translateX(50px);
  transition: all 0.5s ease-in;*/
}

/* ============================================================
   4. 共通の閉じるボタン (x) [cite: 2]
   ============================================================ */
.close-btn, .close-widget {
  position: absolute;
  top: 12px;
  right: 15px;
  cursor: pointer;
  font-size: 22px;
  color: #999;
  line-height: 1;
  transition: color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn:hover, .close-widget:hover { color: #333; }

/* ============================================================
   5. その他・微調整
   ============================================================ */
.slide-in-widget h3 { margin-bottom: 10px; font-size: 1.4em;text-align:center; }
.slide-in-widget p { font-size: 1.0em; color: #444; line-height: 1.5; text-align:center; }
.note { font-size: 0.85em; color: #ee2222; margin-top: 10px; }

/* ============================================================
   ボタンのhover時：背景を白、文字色を各テーマカラーに変更
   ============================================================ */

/* --- 青色ボタン系のhover設定 --- */
#inline-support-box .blue-btn:hover,
#scroll-support-widget .blue-btn:hover,
#scroll-support-widget .blue-btn-flat:hover {
  background-color: #ffffff !important;
  color: #2255aa !important; /* 文字を青に戻す */
  border: 1px solid #2255aa !important; /* 輪郭をはっきりさせる */
  opacity: 1;
}

/* --- 赤色ボタン系のhover設定 --- */
#scroll-support-widget .red-btn:hover,
#scroll-support-widget .red-btn-flat:hover {
  background-color: #ffffff !important;
  color: #ee2222 !important; /* 文字を赤に戻す */
  border: 1px solid #ee2222 !important; /* 輪郭をはっきりさせる */
  opacity: 1;
}

/* --- ボタン内の補足テキスト(span)もhover時に色を合わせる --- */
#scroll-support-widget .blue-btn-flat:hover span {
  color: #2255aa !important;
}

#scroll-support-widget .red-btn-flat:hover span {
  color: #ee2222 !important;
}

/* --- 共通：hover時の動きを少し滑らかに --- */
.blue-btn, .red-btn, .blue-btn-flat, .red-btn-flat {
 /* transition: all 0.3s ease;*/
  text-decoration: none !important;
}

/* 各ステップの配置設定 */
#widget-step-1, #widget-step-red, #widget-step-blue {
  width: 100%;
  /* フェード時に位置がズレないよう、切り替え中は relative で安定させる */
  position: relative; 
  will-change: opacity, transform;
}
/* ボタンやテキストが配置を押し上げないよう微調整 */
.widget-buttons {
  margin-top: auto; /* ボタンを常に下側に配置して安定させる */
}
/* ボックス内のタイトルやテキストがパッと出ないように */
.title, .phone,  {
    transition: opacity 0.5s ease;
}
/* 閉じるボタンの親コンテナ */
.widget-header {
    position: absolute;
    top: 10px;
    right: 10px; /* 右から10pxに固定 */
    left: auto !important; /* 左寄りを強制解除 */
    width: 40px;
    height: 40px;
    z-index: 10000; /* コンテンツより必ず上に */
    display: block !important;
}

/* 閉じるボタン（×）自体 */
#final-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 32px; /* 押しやすいよう少し大きく */
    font-weight: normal;
    color: #999;
    line-height: 1;
    background: transparent;
    transition: color 0.2s;
}

#final-close-btn:hover {
    color: #333;
}


/* 親ボックス：アニメーションを最小限にして安定させる */
#scroll-support-widget {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 450px !important;
    max-width: calc(100% - 40px) !important;
    background: #fff !important;
    border: 2px solid #0055aa !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 50, 100, 0.15) !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    display: none; /* 初期非表示 */
    opacity: 0;
 /*   transform: translateX(100px);
    transition: opacity 0.5s ease, transform 1.5s ease !important; /* heightは絶対に入れない */
}

/* 表示時 */
#scroll-support-widget.is-visible {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* コンテンツ切り替え：高さを維持するためのラッパー */
.widget-content-wrapper {
    position: relative;
    width: 100%;
}

/* 各ステップ：一瞬の空白（真っ白）を防ぐため display: block で管理 */
.step-content {
    display: none;
    opacity: 1 !important;
}

/* 初期表示のステップ1 */
#widget-step-1 {
    display: block;
}

/* 閉じるボタン */
.widget-header {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
}
#final-close-btn {
    cursor: pointer;
    font-size: 32px;
    color: #999;
    line-height: 1;
}