/* ============================================================
   UTAGE中川LP 独自スタイル
   ブランドカラー: UTAGEブルー/パープルグラデーション
   ============================================================ */

:root {
  --clr_utage:        #2b6cad;
  --clr_utage_purple: #922d77;
  --clr_cta_shadow:   rgba(6, 199, 85, 0.35);
}

/* ============================================================
   FV
   ============================================================ */
.fv {
  padding: 0;
  background: #fff;
  line-height: 0;
}

/* ============================================================
   CTAボタン
   ============================================================ */
.cta_sec {
  padding-right: 1rem;
  padding-left:  1rem;
}

.cta_btn_link {
  display: block;
}

.cta_btn {
  display: block;
  background: linear-gradient(135deg, #06C755 0%, #04a848 100%);
  color: #fff;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 900;
  text-align: center;
  padding: clamp(18px, 1.6vw, 28px) 20px;
  border-radius: 8px;
  letter-spacing: .04em;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 10px 24px var(--clr_cta_shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

@media (hover: hover) {
  .cta_btn_link:hover .cta_btn {
    transform: translateY(3px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 4px 12px var(--clr_cta_shadow);
  }
}

/* ============================================================
   ✗ リスト（悩みリスト）
   ============================================================ */
.list_type_x {
  text-align: left;
}

.list_type_x li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 3%;
  font-weight: 600;
  line-height: 1.6;
}

.list_type_x li:last-child {
  margin-bottom: 0;
}

.list_type_x li::before {
  content: "✗";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--clr_red);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1.6;
}

/* ============================================================
   ブリッジコピー（セクション橋渡し）
   ============================================================ */

/* 全体ラッパー */
.bridge_wrap {
  text-align: center;
}

/* リードテキスト */
.bridge_lead {
  line-height: 1.6;
}

/* グラデーションバナー（下向き矢印付き） */
.bridge_banner {
  background: linear-gradient(90deg, #2b6cad 0%, #922d77 100%);
  color: #fff;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 900;
  text-align: center;
  padding: 18px 24px;
  position: relative;
  letter-spacing: .05em;
}

.bridge_banner::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-top: 22px solid #922d77;
}

/* 解決策エリア */
.bridge_solution {
  padding-top: 42px;
}

/* UTAGEキーワード */
.bridge_keyword {
  display: inline-block;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 900;
  background: linear-gradient(90deg, #2b6cad 0%, #922d77 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .05em;
  line-height: 1.3;
}

/* ============================================================
   メリットセクション末尾 ブリッジコピー（枠線のみ）
   ============================================================ */
.merit_bridge {
  padding: 22px 32px;
  text-align: center;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #2b6cad 0%, #922d77 100%) border-box;
  border-radius: 4px;
}

.merit_bridge p {
  color: #262626;
  font-size: clamp(18px, 1.5vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ============================================================
   fc_utage
   ============================================================ */
.fc_utage {
  color: var(--clr_utage);
}

/* ============================================================
   セクション見出し グラデーション上書き（宴カラー：青→紫）
   ============================================================ */
.h_type_1 {
  background: linear-gradient(90deg, #2b6cad 0%, #922d77 100%);
}

/* ============================================================
   目次 TOC カラー上書き（UTAGEカラー）
   ============================================================ */
.toc .tit {
  background: linear-gradient(90deg, #2b6cad 0%, #922d77 100%);
}

/* ============================================================
   著者プロフィール ヘッダー グラデーション上書き
   ============================================================ */
.prof header {
  background: linear-gradient(90deg, #2b6cad 0%, #922d77 100%);
}

/* ============================================================
   ステップバー カラー上書き（UTAGEカラー）
   ============================================================ */
.stepbar .stepbarwrap .steptitle .stepcircle {
  background: linear-gradient(135deg, #2b6cad 0%, #922d77 100%);
}

.stepbar .stepbarwrap .stepline {
  background: linear-gradient(180deg, #2b6cad 0%, #922d77 100%);
}

/* ============================================================
   P.S. ブロック
   ============================================================ */
.ps_block {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 24px 28px;
  font-family: "Klee One", "Noto Serif", serif;
}

.ps_block p {
  line-height: 1.8;
}

/* ============================================================
   SP レスポンシブ調整
   ============================================================ */
@media screen and (max-width: 767px) {

  .cta_sec {
    padding-right: 0;
    padding-left:  0;
  }

  .cta_btn {
    font-size: 3.8vw;
    padding: 5.5vw 3vw;
    border-radius: 6px;
  }

  .bridge_banner {
    font-size: 4.5vw;
    padding: 4.5vw 3vw;
  }

  .bridge_banner::after {
    bottom: -18px;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 18px solid #922d77;
  }

  .bridge_solution {
    padding-top: 36px;
  }

  .bridge_keyword {
    font-size: 9vw;
  }

  .merit_bridge {
    padding: 5vw 4vw;
  }

  .merit_bridge p {
    font-size: 4.8vw;
  }

  .ps_block {
    padding: 4.5vw;
  }

  .list_type_x li {
    font-size: 4.2vw;
  }

  .stepbar .steptxt p {
    font-size: 3.6vw;
    line-height: 1.7;
  }

  .toc .tit_s {
    font-size: 4.6vw;
    font-weight: 700;
  }

}

/* チャットウィンドウの背景を不透明に */
#chat {
  background-color: #ffffff !important;
}

/* チャットボットバッジ：シェイクアニメーション定義 */
@keyframes chatBadgeShake {
  0%,  100% { transform: rotate(0deg); }
  10%        { transform: rotate(-8deg); }
  20%        { transform: rotate(8deg); }
  30%        { transform: rotate(-6deg); }
  40%        { transform: rotate(6deg); }
  50%        { transform: rotate(-4deg); }
  60%        { transform: rotate(4deg); }
  70%        { transform: rotate(-2deg); }
  80%        { transform: rotate(2deg); }
  90%        { transform: rotate(0deg); }
}

/* チャットボットバッジを大きく・目立たせる */
.chat-badge {
  height: 68px !important;
  width: 210px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  bottom: 28px !important;
  right: 28px !important;
  box-shadow: 0 6px 24px rgba(0, 160, 193, 0.55) !important;
  animation: chatBadgeShake 1.8s ease-in-out 1s infinite !important;
  transform-origin: bottom center !important;
}

.chat-badge:hover {
  animation-play-state: paused !important;
  transform: scale(1.05) !important;
  box-shadow: 0 8px 28px rgba(0, 160, 193, 0.7) !important;
}

.chat-badge-icon {
  height: 34px !important;
  width: 34px !important;
}