/* ======================================================
   AIダイアラー 製品紹介ページ (/dialer/)
   2024 縦マージン最適化版
====================================================== */

/* ------------------ セクション共通 ------------------ */
.dialer-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 5%; /* 高さを60→48pxへ調整 */
}

.dialer-section:not(:last-of-type) {
  margin-bottom: 40px; /* 各セクションの間隔を一定化 */
}

.dialer-section h2 {
  color: var(--main-blue);
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 18px; /* 見出し下の余白を20→18pxに少し圧縮 */
}

.dialer-section .lead {
  text-align: center;
  color: #555;
  max-width: 880px;
  margin: 0 auto 32px; /* 下余白を40→32pxへ調整 */
  line-height: 1.8;
}

/* ------------------ HERO ------------------ */
.dialer-hero {
  background: linear-gradient(135deg, #44b5d9 0%, #005277 100%);
  color: #fff;
  text-align: center;
  padding: 60px 5% 70px; /* 下方向を80→70pxへ圧縮 */
  position: relative;
  overflow: hidden;
}

.dialer-hero h1 {
  font-size: 2em;
  margin-bottom: 0.6em;
}

.dialer-hero p {
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.8;
}

.dialer-hero .hero-image {
  margin-top: 36px; /* 40→36pxへ */
}

.dialer-hero .hero-image img {
  width: 100%;
  max-width: 760px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ------------------ グリッドカード ------------------ */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-top: 25px;
}

.feature {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 26px 22px;
  width: 340px;
  transition: 0.3s;
  text-align: left;
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.feature h3,
.feature h4 {
  color: var(--main-blue);
  font-size: 1.2em;
  margin-bottom: 8px;
}

.feature p {
  color: #333;
  line-height: 1.7;
}

/* ------------------ イメージブロック ------------------ */
.overview-image,
.console-preview,
.portal-preview {
  text-align: center;
}

.overview-image img,
.console-preview img,
.portal-preview img {
  width: 100%;
  max-width: 820px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

/* ------------------ 比較テーブル ------------------ */
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 10px; /* 14→12pxへ */
  border: 1px solid #e6e6e6;
  line-height: 1.6;
  font-size: 0.95em;
}

.comparison-table th {
  background: var(--main-blue);
  color: #fff;
  font-weight: 600;
}

.comparison-table tr:nth-child(odd) {
  background: #f7f9fb;
}

/* ------------------ ボタン ------------------ */
.btn-primary {
  display: inline-block;
  background: var(--main-blue);
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  border: 2px solid var(--main-blue);
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

/* 単純な反転効果 */
.btn-primary:hover {
  background: #fff;
  color: var(--main-blue);
}

/* CTAセクション内ボタンも同様に統一 */
.cta .btn-primary {
  background: #fff;
  color: var(--main-blue);
  border: 2px solid #fff;
}

.cta .btn-primary:hover {
  background: var(--main-blue);
  color: #fff;
  border-color: #fff;
}

/* ------------------ CTA ------------------ */
.cta {
  text-align: center;
  background: linear-gradient(135deg, #0077A9 0%, #003e5b 100%);
  color: #fff;
  padding: 60px 5%; /* 70→60px */
}

.cta h2 {
  font-size: 1.9em;
  margin-bottom: 18px;
}

.cta p {
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto 28px;
}

/* ------------------ 結果ボックス ------------------ */
.result-box {
  background: #f5fbff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 36px 25px;
  max-width: 960px;
  margin: 50px auto 0; /* 60→50px */
  text-align: center;
}

.result-box h3 {
  color: var(--main-blue);
  font-size: 1.3em;
  margin-bottom: 12px;
}

.result-box ol {
  text-align: left;
  display: inline-block;
  font-size: 0.95em;
  line-height: 1.8;
  padding-left: 1.2em;
}

.result-box li {
  margin-bottom: 8px;
}

/* ------------------ フッターエンド ------------------ */
.dialer-end {
  text-align: center;
  padding: 50px 5%; /* 60→50 */
  background: #fff;
}

.dialer-end h2 {
  color: var(--main-blue);
  font-size: 1.8em;
  margin-bottom: 16px;
}

.dialer-end .lead {
  color: #555;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ======================================================
   図解セクション（AIダイアラー 自動架電フロー）
====================================================== */
.dialer-diagram {
  max-width: 1200px;
  margin: 60px auto; /* 80→60 */
  padding: 48px 5%;  /* 60→48 */
  text-align: center;
}

.dialer-diagram h2 {
  color: var(--main-blue);
  font-size: 1.9em;
  margin-bottom: 16px;
}

.dialer-diagram .lead {
  max-width: 900px;
  margin: 0 auto 30px; /* 40→30 */
  color: #555;
  line-height: 1.8;
}

/* --- 図画像 --- */
.diagram-image {
  margin-bottom: 36px; /* 40→36 */
}

.diagram-image img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ホバー時の軽アップ */
.diagram-image img:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- 背景色バリエーション --- */
.dialer-diagram.alt {
  background: #f7f9fb;
  border-radius: 8px;
  padding: 60px 5%; /* 70→60 */
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

/* ======================================================
   コスト比較セクション
====================================================== */
#dialer-cost {
  padding: 45px 5%;  /* 20→45でバランス調整 */
  text-align: center;
}

#dialer-cost h2 {
  color: #c47c00;
  font-size: 1.8em;
  margin-bottom: 18px; /* 20→18 */
}

#dialer-cost .comparison-table table th {
  background: #fcbf49;
  color: #333;
}

#dialer-cost .comparison-table td strong {
  color: #d35400;
}

/* ------------------ スマホ対応 ------------------ */
@media (max-width: 768px) {
  .feature-grid {
    flex-direction: column;
    align-items: center;
  }
  .feature {
    width: 90%;
    max-width: 360px;
  }
  .dialer-hero h1 {
    font-size: 1.6em;
  }
  .dialer-section {
    padding: 40px 5%; /* 50→40 */
  }
  .dialer-diagram {
    padding: 35px 4%;
    margin: 30px auto;
  }
  .cta {
    padding: 50px 5%;
  }
  .dialer-end {
    padding: 40px 5%;
  }
  .comparison-table th,
  .comparison-table td {
    font-size: 0.85em;
    padding: 10px 6px;
  }
  .result-box {
    padding: 30px 20px;
  }
}

/* --- 横並び表示の余白補正（大画面1920px以上） --- */
@media (min-width: 1800px) {
  .dialer-diagram {
    padding-left: 10%;
    padding-right: 10%;
  }
}


/* ==========================
   コンソールプレビュー 2枚並列
========================== */
.console-preview.two-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin: 40px auto;
  text-align: center;
}

.console-preview.two-column .console-item {
  flex: 1 1 46%; /* 2枚で並べる */
  max-width: 520px;
}

.console-preview.two-column img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}

.console-preview.two-column img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* ブレークポイント対応（スマホで縦並び） */
@media (max-width: 768px) {
  .console-preview.two-column {
    flex-direction: column;
    align-items: center;
  }
  .console-preview.two-column .console-item {
    width: 90%;
    max-width: 100%;
  }
}

/* =========================================
   支払ポータル 2枚横並び（認証・明細）
========================================= */
.portal-preview.two-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  text-align: center;
  margin-top: 40px;
}

.portal-preview.two-column .portal-item {
  flex: 1 1 46%;
  max-width: 420px;
}

.portal-preview.two-column img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portal-preview.two-column img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.portal-preview.two-column .caption {
  font-size: 0.9em;
  color: #555;
  margin-top: 10px;
}

/* スマホ時の縦並び */
@media (max-width: 768px) {
  .portal-preview.two-column {
    flex-direction: column;
    align-items: center;
  }
  .portal-preview.two-column .portal-item {
    width: 90%;
    max-width: 100%;
  }
}

.hero-cta {
  background: #ffffff !important;
  color: #0b4d6d !important;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.hero-cta:hover {
  background: #f1f7fb !important;
}

/* ===== HERO CTA 強制上書き（最終勝ち） ===== */
.dialer-hero a.btn-primary.hero-cta {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0b4d6d !important;
  border: 2px solid #ffffff !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}

/* hover */
.dialer-hero a.btn-primary.hero-cta:hover {
  background: #f1f7fb !important;
  background-color: #f1f7fb !important;
  color: #0b4d6d !important;
}

.dialer-hero .note {
  font-size: 0.9em;
  opacity: 0.9;
  margin-top: 14px;
}


/* =====================
   スマホ下部追従CTA（修正版）
===================== */
.mobile-fixed-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-fixed-cta {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    z-index: 9999;

    /* ★ これが超重要 */
    box-sizing: border-box;
  }

  .mobile-fixed-cta a {
    flex: 1;
    display: block;
    text-align: center;
    background: #0b4d6d;
    color: #fff;
    font-weight: 700;
    padding: 14px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95em;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  .dialer-hero a.btn-primary {
    display: block;              /* ★ inline をやめる */
    max-width: 420px;            /* 横幅は上限だけ */
    margin: 0 auto;              /* 左右均等センター */
    box-sizing: border-box;      /* padding込み計算 */
    font-size: 0.95em;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
}
/* ======================================================
   HEROテキスト 改行・可読性 最適化（追記分）
====================================================== */

/* 見出し：意味の途中で改行されるのを防ぐ */
.dialer-hero h1 {
  line-height: 1.35;
  letter-spacing: 0.02em;
  word-break: keep-all;     /* 日本語の不自然な分断を防止 */
  overflow-wrap: break-word;
}

/* スマホ時の見出し最適化 */
@media (max-width: 768px) {
  .dialer-hero h1 {
    font-size: 1.45em;      /* 1文字落ちを防ぐサイズ */
    line-height: 1.3;
    padding: 0 4%;          /* 端ギリギリ改行を防ぐ */
  }
}

/* Hero本文（説明文）の行長・行間を最適化 */
.dialer-hero p {
  font-size: 0.95em;
  line-height: 1.7;
  padding: 0 6%;
}

/* ======================================================
   導入事例セクション 強化（月40,000件 実運用）
====================================================== */

/* 導入事例 全体 */
#dialer-case {
  padding: 60px 5%;
  text-align: center;
}

/* 見出しを少し強調 */
#dialer-case h2 {
  font-size: 1.9em;
  font-weight: 700;
  margin-bottom: 18px;
}

/* 事例リード */
#dialer-case .lead {
  max-width: 820px;
  margin: 0 auto 28px;
  line-height: 1.8;
  color: #444;
}

/* 事例ボックス（数字を目立たせる） */
#dialer-case ul.lead {
  list-style: none;
  padding: 32px 28px;
  margin: 0 auto;
  max-width: 820px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  text-align: left;
}

/* 親リスト */
#dialer-case ul.lead > li {
  margin-bottom: 14px;
  font-size: 0.98em;
}

/* 数字強調 */
#dialer-case ul.lead strong {
  color: var(--main-blue);
  font-weight: 700;
}

/* 子リスト（導入後） */
#dialer-case ul.lead ul {
  margin-top: 10px;
  padding-left: 1.2em;
}

#dialer-case ul.lead ul li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* 注釈 */
#dialer-case .note {
  margin-top: 18px;
  font-size: 0.85em;
  color: #666;
  text-align: center;
}


/* ======================================================
   数字訴求 強調用ユーティリティ
====================================================== */

/* 月間40,000件などのキーフレーズ */
.highlight-metric {
  display: inline-block;
  background: #f1f8ff;
  color: var(--main-blue);
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 4px;
}


/* ======================================================
   Hero 実績ノートの視認性強化
====================================================== */

.dialer-hero .note {
  background: rgba(255,255,255,0.12);
  padding: 10px 14px;
  border-radius: 6px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}


/* ======================================================
   モバイル最適化（導入事例）
====================================================== */
@media (max-width: 768px) {

  #dialer-case {
    padding: 45px 5%;
  }

  #dialer-case h2 {
    font-size: 1.6em;
  }

  #dialer-case ul.lead {
    padding: 24px 20px;
  }

  #dialer-case ul.lead > li {
    font-size: 0.92em;
  }
}
.dialer-hero .note strong {
  color: #ffffff;
  font-size: 1.1em;
  letter-spacing: 0.02em;
}