/* =============================================================
   style_teleapo.css
   /teleapo（テレアポリスト作成サービス）専用スタイル。
   標準レイアウト(layout.haml)使用時に /teleapo でのみ読み込む。
   ※ /teleapo/lp は引き続き teleapo/layout.haml 内のインラインCSSを使用。
   ============================================================= */

/* ==== セクション間余白ルール ====
   すべてのセクション縦padding: 64px(SP) / 96px(PC)
   ヒーロー上部のみ: ヘッダー実高(64/80px) + 微小ブレス(8px)
   ヒーロー下部: 通常セクションと同じ                              */
:root {
  --lp-section-pad-y: 48px;        /* SP: 通常セクション縦padding */
  --lp-hero-pad-top: 72px;         /* SP: 64px header + 8px breath */
  --lp-hero-pad-bottom: 32px;      /* SP: ヒーロー下端は少しタイトに */
}
@media (min-width: 768px) {
  :root {
    --lp-section-pad-y: 96px;      /* PC: 通常セクション縦padding */
    --lp-hero-pad-top: 88px;       /* PC: 80px header + 8px breath */
    --lp-hero-pad-bottom: 64px;    /* PC: ヒーロー下端 */
  }
}
/* テレアポLP固有の補助スタイル（Tailwindで表現しづらい箇所のみ） */
body, html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #19283C;
  background: #fff;
}
/* ==== ヒーローの2番目のCTA「お試しコールから始める」（白背景＋青枠） ==== */
.teleapo_hero_cta_secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  background: #FFFFFF;
  color: #1458E4 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid #1458E4;
  box-shadow: 0 2px 8px rgba(20, 88, 228, 0.10);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.teleapo_hero_cta_secondary:hover {
  background: #F4F8FF;
  box-shadow: 0 4px 12px rgba(20, 88, 228, 0.18);
  transform: translateY(-1px);
}
/* ==== ヒーローのバッジ（余白広め＋しっかりした外枠） ==== */
.teleapo_hero_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #FFFFFF;
  color: #1458E4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  border: 1.5px solid #C6D8F8;
  box-shadow: 0 2px 6px rgba(7, 37, 140, 0.06);
}
.teleapo_hero_badge svg {
  flex-shrink: 0;
}
/* ==== LP本文：視認性のためのコントラスト底上げ ==== */
#main p { color: #1F2937; }
/* 白文字スコープ（CTAバナーやヒーロー上の白文字）は維持 */
#main .text-white,
#main .text-white p,
#main .teleapo_brand_gradient p,
#main .teleapo_brand_gradient .text-white p { color: #FFFFFF !important; }
#main .text-gray-400 { color: #6B7280 !important; }
#main .text-gray-500 { color: #4B5563 !important; }
#main .text-gray-600 { color: #374151 !important; }
#main .text-gray-700 { color: #1F2937 !important; }
/* PROBLEMS / SOLUTION のカード本文をハッキリ */
#about p, .teleapo_section_blue p { line-height: 1.85; }
/* ==== 導入の流れ ==== */
.teleapo_flow_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}
.teleapo_flow_item {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E5ECF7;
  box-shadow: 0 1px 2px rgba(7, 37, 140, 0.03), 0 6px 16px rgba(7, 37, 140, 0.04);
  padding: 22px 24px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.teleapo_flow_item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7, 37, 140, 0.06), 0 16px 32px rgba(7, 37, 140, 0.08);
  border-color: #C6D8F8;
}
.teleapo_flow_step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
}
.teleapo_flow_step_num {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #FF8924;
  margin-bottom: 6px;
  line-height: 1;
}
.teleapo_flow_step_icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAF1FE 0%, #DCE6F8 100%);
  color: #1458E4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(20, 88, 228, 0.10);
}
.teleapo_flow_step_icon svg {
  width: 26px;
  height: 26px;
}
.teleapo_flow_content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.teleapo_flow_title {
  font-size: 16px;
  font-weight: 800;
  color: #19283C;
  margin: 0 0 6px;
  line-height: 1.4;
}
.teleapo_flow_desc {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.75;
  margin: 0;
}
/* ステップ間の縦コネクタライン */
.teleapo_flow_item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(24px + 36px); /* padding-left + half of icon */
  bottom: -14px;
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(to bottom, #C6D8F8 0 4px, transparent 4px 8px);
  z-index: 0;
}
@media screen and (min-width: 769px) {
  .teleapo_flow_title { font-size: 17px; }
  .teleapo_flow_desc { font-size: 14px; }
  .teleapo_flow_step_icon { width: 64px; height: 64px; }
  .teleapo_flow_step_icon svg { width: 30px; height: 30px; }
  .teleapo_flow_step { width: 80px; }
  .teleapo_flow_item:not(:last-child)::after {
    left: calc(24px + 40px);
  }
}
/* ==== お悩み(PROBLEMS) ==== */
#about .grid > div {
  background: #FFFFFF;
  border: 1px solid #EEF2F8;
  box-shadow: 0 1px 2px rgba(7, 37, 140, 0.03);
  transition: box-shadow 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;
}
#about .grid > div:hover {
  box-shadow: 0 8px 24px rgba(7, 37, 140, 0.08);
  border-color: #FFD9B5;
  transform: translateY(-3px);
}
#about .grid > div h3 {
  color: #19283C;
  font-weight: 800;
}
#about .grid > div p {
  color: #4B5563;
  line-height: 1.85;
}
/* ==== Urizo × Workflow（SOLUTION）カード ==== */
.teleapo_section_blue .grid > div p {
  color: #4B5563;
  line-height: 1.85;
}
/* ==== 担当者紹介 ==== */
.teleapo_staff_photo_placeholder {
  min-height: 280px;
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 137, 36, 0.16), transparent 36%),
    linear-gradient(135deg, #EAF1FE 0%, #F7FAFF 100%);
  border: 1px solid #DCE6F8;
  box-shadow: 0 10px 30px rgba(7, 37, 140, 0.08);
}
.teleapo_staff_photo_img {
  width: 100%;
  height: 100%;
  min-height: 244px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}
.teleapo_staff_photo_inner {
  width: 100%;
  min-height: 244px;
  border-radius: 20px;
  border: 2px dashed #C6D8F8;
  color: #1458E4;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.teleapo_staff_tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 16px;
  background: #F4F8FF;
  border: 1px solid #DCE6F8;
  color: #07258C;
  font-size: 13px;
  font-weight: 700;
}

/* ==== FAQ アコーディオン ==== */
.teleapo_faq_item summary span:last-child {
  color: #19283C;
}
.teleapo_faq_item p {
  color: #374151;
}
.teleapo_faq_item[open] {
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
  border-color: #1458E4;
}
/* ==== 料金プラン：プラン名/価格のメリハリ ==== */
#price h3 {
  font-size: 18px;
  letter-spacing: 0.04em;
}
#price .teleapo_pricing_badge,
#price .teleapo_pricing_badge_pill {
  letter-spacing: 0.06em;
}
.teleapo_hero_bg {
  background:
    radial-gradient(ellipse 80% 60% at 72% -12%, rgba(20, 88, 228, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at -5% 112%, rgba(255, 137, 36, 0.14), transparent 58%),
    linear-gradient(180deg, #EAF1FF 0%, #FFFFFF 62%);
  position: relative;
}
/* ヒーロー背景に微細なドットパターンを重ねて奥行きを出す */
.teleapo_hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 88, 228, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* ヒーロー専用padding：上はヘッダー分のみ＋微小、下は変数で調整 */
.teleapo_hero_container {
  padding-top: var(--lp-hero-pad-top);
  padding-bottom: var(--lp-hero-pad-bottom);
}
/* 通常セクションの統一縦padding */
.teleapo_section_pad {
  padding-top: var(--lp-section-pad-y);
  padding-bottom: var(--lp-section-pad-y);
}
.teleapo_section_blue {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
}
/* 旧リボン版（残置）。新グリッドカードは .teleapo_reason_card を利用 */
.teleapo_reason_ribbon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 100%;
  background: linear-gradient(180deg, #07258C 0%, #1458E4 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px));
}
/* 「選ばれる3つの理由」グリッドカード */
.teleapo_reason_card {
  position: relative;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  box-shadow: 0 1px 2px rgba(7, 37, 140, 0.04), 0 4px 12px rgba(7, 37, 140, 0.04);
}
.teleapo_reason_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(7, 37, 140, 0.08), 0 20px 40px rgba(7, 37, 140, 0.10);
}
/* 上端のブランドオレンジアクセント */
.teleapo_reason_card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #FF8924;
  z-index: 2;
}
.teleapo_reason_card_head {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 137, 36, 0.12) 0%, transparent 55%),
    linear-gradient(135deg, #07258C 0%, #1458E4 100%);
  padding: 26px 24px 28px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
/* ヘッダー帯背景の数字ウォーターマーク */
.teleapo_reason_card_head_watermark {
  position: absolute;
  right: -8px;
  bottom: -28px;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  user-select: none;
}
.teleapo_reason_card_head_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}
.teleapo_reason_card_head_label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #FF8924;
  border-radius: 2px;
}
.teleapo_reason_card_head_label .num {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0;
  color: #FFFFFF;
}
.teleapo_reason_card_head_title {
  color: #FFFFFF;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
  margin-top: 14px;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(7, 37, 140, 0.20);
}
@media screen and (min-width: 769px) {
  .teleapo_reason_card_head_title {
    font-size: 21px;
  }
}
/* ボディエリア */
.teleapo_reason_card_body {
  background: #FFFFFF;
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.teleapo_reason_card_desc {
  color: #374151;
  font-size: 13px;
  line-height: 1.85;
  margin: 0;
}
@media screen and (min-width: 769px) {
  .teleapo_reason_card_desc {
    font-size: 14px;
  }
}
/* チェック項目：薄ブルー背景のピル形タグでまとめる */
.teleapo_reason_card_items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed #DCE6F8;
}
.teleapo_reason_card_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #F4F8FF;
  border: 1px solid #E5ECF7;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #07258C;
  line-height: 1.3;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.teleapo_reason_card_item:hover {
  background: #EAF1FE;
  border-color: #C6D8F8;
  transform: translateX(2px);
}
.teleapo_reason_card_item svg {
  flex-shrink: 0;
  color: #1458E4;
}
.teleapo_brand_gradient {
  background: linear-gradient(135deg, #07258C 0%, #1458E4 100%);
}
.teleapo_pricing_badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
/* スタンダードプラン専用：人気＋推奨を別ピルで横並び */
.teleapo_pricing_badge_group {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}
.teleapo_pricing_badge_pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(7, 37, 140, 0.08);
}
.teleapo_pricing_badge_pill.is_orange {
  background: #FF8924;
  color: #FFFFFF;
}
.teleapo_pricing_badge_pill.is_blue {
  background: #1458E4;
  color: #FFFFFF;
}
/* 料金カード共通：上端の見切り強化＋柔らかいシャドウ */
#price .grid > div {
  box-shadow: 0 1px 0 #DCE6F8, 0 4px 16px rgba(7, 37, 140, 0.06);
}
/* お試しコール内の機能アイコン：縦並び4ボックス（白背景） */
.teleapo_trial_box {
  background: #FFFFFF;
  border: 1px solid #DCE6F8;
  border-radius: 14px;
  padding: 12px;
}
.teleapo_trial_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.teleapo_trial_icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  line-height: 1.35;
  font-size: 13px;
  font-weight: 700;
  color: #07258C;
  text-align: left;
  background: #F4F8FF;
  border-radius: 8px;
}
.teleapo_trial_icon_iconbox {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #C6D8F8;
  color: #1458E4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teleapo_trial_icon_iconbox svg {
  width: 16px;
  height: 16px;
  display: block;
}
.teleapo_trial_icon_text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.teleapo_trial_icon_label {
  font-size: 13px;
  line-height: 1.3;
}
.teleapo_trial_icon_sub {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.2;
}
/* プラン特徴ヘッダー（スモールスタート向け 等） */
.teleapo_plan_lead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}
.teleapo_plan_lead.is_blue {
  background: #EAF1FE;
  color: #1458E4;
}
.teleapo_plan_lead.is_orange {
  background: #FFF4EA;
  color: #FF8924;
}
.teleapo_plan_lead svg {
  flex-shrink: 0;
}
.teleapo_plan_audience {
  font-size: 12px;
  color: #6B7280;
  margin-top: 8px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.teleapo_plan_divider {
  border-top: 1px dashed #E5ECF7;
  margin: 12px 0;
}
/* style_common.css の `ul, ol, li { font-size: 0 }` を LP の本文 li で打ち消す */
#main ul,
#main ol,
#main li {
  font-size: inherit;
}
#main ul li,
#main ol li {
  font-size: inherit;
}
.teleapo_faq_item summary::-webkit-details-marker { display: none; }
.teleapo_faq_item summary { list-style: none; }
.teleapo_faq_item[open] .teleapo_faq_icon {
  transform: rotate(45deg);
}
/* /teleapo/lp 専用: 青背景固定ヘッダー上の白文字を維持 */
#lp header #pc_menu li .menu_heading a {
  color: #FFFFFF;
  transition: opacity 0.2s ease-in-out;
}
@media screen and (min-width: 769px) {
  #lp header #pc_menu li .menu_heading a:hover {
    color: #FFFFFF;
    opacity: 0.85;
  }
}
#lp header #sp_btn span,
#lp header.active #sp_btn span {
  background-color: #FFFFFF;
}
/* ロゴ：標準Urizoロゴ＋サブテキスト（横並び固定） */
#lp header #h_logo.lp_logo {
  width: auto;
  max-width: none;
}
#lp header #h_logo.lp_logo a {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
#lp header #h_logo.lp_logo img {
  width: auto;
  height: 28px;
  max-height: 28px;
  flex-shrink: 0;
}
#lp header #h_logo.lp_logo .lp_logo_sub {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  color: #FFFFFF !important;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1;
}
@media screen and (min-width: 769px) {
  #lp header #h_logo.lp_logo .lp_logo_sub {
    margin-left: 20px;
    padding-left: 20px;
  }
}
@media screen and (min-width: 769px) {
  #lp header #h_logo.lp_logo img {
    height: 32px;
    max-height: 32px;
  }
}
@media screen and (max-width: 768px) {
  #lp header #h_logo.lp_logo .lp_logo_sub {
    font-size: 11px;
  }
}
/* ヘッダー内 資料請求CTAボタン（ブランドオレンジ） */
#lp header #pc_menu li.lp_header_cta .menu_heading a {
  background-color: #FF8924;
  color: #FFFFFF !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 0.2s ease-in-out;
}
#lp header #pc_menu li.lp_header_cta .menu_heading a:hover {
  background-color: #e07614;
  color: #FFFFFF !important;
  opacity: 1;
}
.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}
.pagetop a {
  text-align: center;
  display: block;
  width: 60px;
  height: 45px;
  margin: 0 auto;
  padding: 15px 0 0 0;
  border-radius: 50%;
  font-size: 12px;
  color: #fff !important;
  background: #19283C;
  text-decoration: none;
  line-height: 1.5;
  transition: background 0.3s ease-in-out;
}
@media screen and (max-width: 768px) {
  .pagetop {
    display: none !important;
  }
}

/* ==== /teleapo 専用オーバーライド（旧 index.haml :css ブロック） ==== */
/* /teleapo 専用: 縮こまり防止。/teleapo/lp のトンマナを保ちつつ、PCでは余白と横幅を少し広げる */
#main > .sr-only {
  display: none !important;
}
#main,
#main *,
#main *::before,
#main *::after {
  box-sizing: border-box;
}
/* 共通ヘッダーの .inner（max-width:1200px・余白なし・中央寄せ）と左右端を揃える */
#main .max-w-\[1200px\] {
  max-width: 1200px !important;
}
#main .teleapo_preview_card {
  max-width: 100%;
  overflow: hidden;
}
#main .teleapo_preview_metric {
  min-width: 0;
}
#main .teleapo_preview_metric_value,
#main .teleapo_preview_metric_label {
  white-space: nowrap;
}
#main .teleapo_source_icon_band {
  min-height: 58px;
}
#main .teleapo_hero_badge_group {
  gap: 12px;
  row-gap: 12px;
}
#main .teleapo_hero_cta_primary,
#main .teleapo_hero_cta_secondary {
  min-height: 54px;
}
#main .teleapo_list_method_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
#main .teleapo_problem_check {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}
#main .teleapo_method_panel {
  border: 1px solid #DCE6F8;
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
  box-shadow: 0 12px 28px rgba(7, 37, 140, 0.08);
}
#main .teleapo_method_step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
#main .teleapo_method_step_num {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1458E4;
  background: #EAF1FE;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(20, 88, 228, 0.08);
}
#main .teleapo_method_step + .teleapo_method_step {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #DCE6F8;
}
#main .teleapo_usage_number {
  font-size: clamp(84px, 8vw, 132px);
  line-height: 0.9;
  letter-spacing: 0;
}
#main .teleapo_rank_bar {
  height: 8px;
  border-radius: 999px;
  background: #EAF1FE;
  overflow: hidden;
}
#main .teleapo_rank_bar_fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1458E4 0%, #FF8924 100%);
}
#main .teleapo_usage_detail_grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
}
#main .teleapo_example_table th,
#main .teleapo_example_table td {
  vertical-align: top;
}
@media (max-width: 767px) {
  #main .teleapo_hero_container,
  #main .teleapo_section_pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #main .teleapo_hero_badge {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }
  #main .teleapo_hero_badge:nth-child(3) {
    flex-basis: 100%;
  }
  #main .teleapo_hero_badge svg {
    width: 16px;
    height: 16px;
  }
  #main .teleapo_hero_cta_primary,
  #main .teleapo_hero_cta_secondary {
    width: 100%;
    min-height: 56px;
    padding: 16px 18px;
    line-height: 1.35;
  }
  #main .teleapo_stat_pill {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 22px;
  }
  #main .teleapo_preview_metric_value {
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  #main .teleapo_preview_metric_unit {
    font-size: 12px;
  }
  #main .teleapo_usage_card,
  #main .teleapo_industry_card,
  #main .teleapo_source_card {
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }
  #main .teleapo_usage_card h3,
  #main .teleapo_industry_card h3,
  #main .teleapo_source_card h3 {
    font-size: 13px !important;
    line-height: 1.45;
  }
  #main .teleapo_usage_card p,
  #main .teleapo_industry_card p,
  #main .teleapo_source_card p {
    font-size: 11px !important;
    line-height: 1.65;
  }
  #main .teleapo_industry_icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 14px !important;
  }
  #main .teleapo_industry_icon svg {
    width: 26px;
    height: 26px;
  }
  #main .teleapo_source_icon_band {
    width: 100%;
    min-height: 64px;
    margin-bottom: 18px !important;
    border-radius: 999px;
  }
  #main .teleapo_list_method_grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #main .teleapo_method_panel {
    padding: 20px 16px !important;
  }
  #main .teleapo_method_step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }
  #main .teleapo_method_step_num {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }
  #main .teleapo_usage_number {
    font-size: 92px;
  }
  #main .teleapo_usage_detail_grid {
    grid-template-columns: 1fr;
  }
  #main .teleapo_mobile_card_table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  #main .teleapo_mobile_card_table thead {
    display: none;
  }
  #main .teleapo_mobile_card_table,
  #main .teleapo_mobile_card_table tbody,
  #main .teleapo_mobile_card_table tr,
  #main .teleapo_mobile_card_table td {
    display: block;
    width: 100%;
  }
  #main .teleapo_mobile_card_table tr {
    margin-bottom: 12px;
    border: 1px solid #E5ECF7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(7, 37, 140, 0.06);
  }
  #main .teleapo_mobile_card_table td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.65;
    border-top: 1px solid #EEF2F8;
    background: #FFFFFF !important;
  }
  #main .teleapo_mobile_card_table td:first-child {
    border-top: 0;
    background: #F4F8FF !important;
    font-size: 13px !important;
  }
  #main .teleapo_mobile_card_table td::before {
    content: attr(data-label);
    color: #1458E4;
    font-weight: 900;
    font-size: 11px;
    line-height: 1.5;
  }
}
@media (min-width: 768px) {
  #main .teleapo_section_pad {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  #main .teleapo_hero_container {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}

/* =============================================================
   標準レイアウト統合時の干渉打ち消し（行間・字間・余白の正常化）
   -------------------------------------------------------------
   標準レイアウトでは output.css(Tailwind preflight) が style_common.css
   より先に読み込まれ、p/li/見出しの margin・letter-spacing・font-size が
   style_common.css によって上書きされる。/teleapo はユーティリティ駆動の
   余白設計のため、:where(#main) で詳細度を 0 に抑えてコンテンツ領域のみ
   preflight 相当へ戻す（ヘッダー/フッターや Tailwind ユーティリティは
   一切壊さない）。
   ============================================================= */
:where(#main) p {
  letter-spacing: normal;
  line-height: 1.85;
}
:where(#main) h1,
:where(#main) h2,
:where(#main) h3,
:where(#main) h4,
:where(#main) h5,
:where(#main) h6 {
  margin: 0;
  letter-spacing: normal;
}
:where(#main) ul,
:where(#main) ol {
  margin: 0;
  padding: 0;
}
:where(#main) li {
  font-size: inherit;
  letter-spacing: normal;
}
/* リンクの既定 display:block / color を teleapo コンテンツで無効化（ユーティリティ優先） */
:where(#main) a {
  color: inherit;
}

/* =============================================================
   余白の強化（「余白がない／詰まって見える」への対応）
   ゆったりとした行間・段落間・カード内外の余白で視認性を高める。
   ============================================================= */
/* 本文の行間をゆったりと（leading-relaxed/snug 指定箇所は除き底上げ） */
#main .teleapo_section_pad p,
#main #hero p {
  line-height: 1.9;
}
/* 段落の下マージン（連続テキストに息継ぎを） */
#main #hero p,
#main .teleapo_section_pad > .mx-auto p:not(:last-child) {
  margin-bottom: 1.25rem;
}
/* ハブ／比較カードの内側余白とカード間ギャップを拡張 */
#main .teleapo_hub_card {
  padding: 1.75rem;
}
#main .teleapo_hero_hub {
  gap: 1.5rem;
}
@media (min-width: 768px) {
  #main .teleapo_hub_card {
    padding: 2rem;
  }
  #main .teleapo_hero_hub {
    gap: 2rem;
    margin-top: 4rem;
  }
}
/* セクション見出しと本文の間隔を広げる */
#main .teleapo_section_pad h2 {
  line-height: 1.5;
}

/* =============================================================
   /teleapo は1カラム。2カラム用の #content(75%幅) を全幅化し、
   FVの区切り線・コンテンツを .inner 内で100%にする
   ============================================================= */
#main_content #content {
  width: 100%;
  max-width: none;
  float: none;
  padding-right: 0;
}
/* 2カラム用の右サイドバー領域グレー背景を無効化 */
#main_content::before {
  display: none;
}
/* 区切り線はコンテンツ全幅（=.inner 100%） */
#main_content .content_header .content_heading::before {
  width: 100%;
  left: 0;
  right: auto;
  transform: none;
}

/* === Tailwind border幅ユーティリティの補完（テレアポページ限定） === */
/* ビルド済み output.css に border / border-2 などの「枠線の太さ」指定が含まれず、
   border-color を指定済みのカード枠が border-width:0 のまま描画されない問題を補正。
   これにより各カードに枠が出てメリハリがつく。 */
#main .border { border-width: 1px !important; }
#main .border-2 { border-width: 2px !important; }
#main .border-t { border-top-width: 1px !important; }
#main .border-b { border-bottom-width: 1px !important; }
#main .border-l { border-left-width: 1px !important; }
#main .border-r { border-right-width: 1px !important; }

/* === パネル枠線を「明確に」描画する補正 === */
/* 出力CSSに border-style:solid のリセットが効いておらず、border-style が none のため
   width/color を指定しても枠が描画されない（computed border-width が 0 になる）。
   パネル系すべてに border-style:solid を固定して枠を必ず表示する。 */
#main .border,
#main .border-2,
#main .border-t,
#main .border-b,
#main .border-l,
#main .border-r,
#main .teleapo_hub_card,
#main .teleapo_source_card,
#main .teleapo_reason_card,
#main .teleapo_industry_card,
#main .teleapo_faq_item {
  border-style: solid !important;
}