/*
=====================================================
AIダイアラー 管理・分析コンソールページ (/dialer-console/)
最終CSS版 2024-12：余白・画像位置補正・レスポンシブ対応
=====================================================
*/

/* ---------------------------------------------
Hero セクション
--------------------------------------------- */
.dialer-console-hero {
  background: linear-gradient(135deg, #A6E6F5 0%, #0098C7 40%, #0077A9 100%);
  color: #fff;
  text-align: center;
  padding: 120px 8% 80px;
  overflow: hidden;
}

.dialer-console-hero h1 {
  font-size: 2.4em;
  font-weight: 700;
  margin-bottom: 0.6em;
}

.dialer-console-hero p {
  font-size: 1.1em;
  opacity: 0.95;
  line-height: 1.9;
  max-width: 880px;
  margin: 0 auto;
}

.dialer-console-hero img {
  display: block;
  max-width: 880px;
  width: 100%;
  margin: 40px auto 0;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------
基礎セクション
--------------------------------------------- */
.dialer-console-section {
  padding: 60px 6% 70px;  /* 上60 下70 */
  text-align: center;
  background: #fff;
}

.dialer-console-section:nth-of-type(even) {
  background: var(--light-bg);
}

.dialer-console-section h2 {
  font-size: 1.9em;
  color: var(--main-blue);
  margin-bottom: 0.9em;
}

.dialer-console-section p {
  font-size: 1.05em;
  max-width: 850px;
  margin: 0 auto 35px;
  line-height: 1.9;
  color: #444;
}

/* ---------------------------------------------
画像の中央寄せと余白補正
--------------------------------------------- */
.dialer-console-section img {
  display: block;               /* インライン要素ではなくブロックとして描画 */
  margin: 30px auto 0;          /* 上に余白を足して中央揃え */
  max-width: 900px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------
CTA セクション
--------------------------------------------- */
.dialer-console-cta,
.cta { /* 両方のclass表記に対応 */
  background: linear-gradient(135deg, var(--main-blue), var(--accent-cyan));
  color: #fff;
  text-align: center;
  padding: 70px 6%;
}

.dialer-console-cta h2,
.cta h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
}

.dialer-console-cta p,
.cta p {
  font-size: 1.05em;
  margin-bottom: 1.4em;
  line-height: 1.8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dialer-console-cta .btn-primary,
.cta .btn-primary {
  display: inline-block;
  background: #fff;
  color: var(--main-blue);
  padding: 14px 30px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #fff;
  transition: all 0.25s ease;
}

.dialer-console-cta .btn-primary:hover,
.cta .btn-primary:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ---------------------------------------------
ヒーロー高さ調整：ナビゲーション被りを回避
--------------------------------------------- */
@media (min-width: 1024px) {
  .dialer-console-hero {
    padding-top: 140px;
  }
}

/* ---------------------------------------------
画像の反応を穏やかに
--------------------------------------------- */
.dialer-console-section img:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* ---------------------------------------------
レスポンシブ調整
--------------------------------------------- */
@media (max-width: 1024px) {
  .dialer-console-hero {
    padding: 100px 6% 80px;
  }

  .dialer-console-hero h1 {
    font-size: 2em;
  }

  .dialer-console-hero img {
    max-width: 100%;
    margin-top: 30px;
  }

  .dialer-console-section {
    padding: 50px 5% 60px;
  }

  .dialer-console-section h2 {
    font-size: 1.6em;
  }

  .dialer-console-section p {
    font-size: 1em;
    line-height: 1.8;
  }

  .dialer-console-section img {
    margin-top: 25px;
  }

  .dialer-console-cta,
  .cta {
    padding: 60px 6%;
  }

  .dialer-console-cta h2,
  .cta h2 {
    font-size: 1.5em;
  }
}

@media (max-width: 600px) {
  .dialer-console-hero {
    padding: 90px 6% 70px;
  }
  .dialer-console-hero h1 {
    font-size: 1.6em;
  }
  .dialer-console-section {
    padding: 40px 5% 50px;
  }
  .dialer-console-section h2 {
    font-size: 1.4em;
  }
  .dialer-console-section img {
    margin-top: 20px;
    box-shadow: none;
  }
  .dialer-console-cta,
  .cta {
    padding: 50px 5%;
  }
}