/* ======================================================
   PBX 基本機能ページ（通話UI＋管理画面統合版）
====================================================== */

/* HERO */
.pbx-hero {
  position: relative;
  z-index: 1;        /* ← これが無いと裏に潜る */
  background: linear-gradient(135deg, #66d0e6 0%, #005d8f 100%);
  text-align: center;
  padding: 40px 6% 70px;
  color: #fff;
}

.pbx-hero h1 {
  font-size: 2em;
  margin-bottom: 0.6em;
}
.pbx-hero p {
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.8;
}

/* 共通 */
.pbx-section {
  max-width: 1200px;
  margin: 0 auto;
}
.pbx-section h2 {
  color: var(--main-blue);
  font-size: 1.7em;
  margin-bottom: 20px;
  text-align: center;
}
.pbx-section .lead {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px;
  color: #555;
  line-height: 1.8;
}

/* カードレイアウト */
.pbx-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.pbx-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 28px 22px;
  width: 320px;
  transition: 0.3s;
}
.pbx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.pbx-card h3 {
  font-size: 1.1em;
  color: var(--main-blue);
  margin-bottom: 8px;
}

/* 画面イメージブロック */
.pbx-feature-block {
  padding: 60px 0;
  background: #fff;
}
.pbx-feature-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.pbx-feature-block.reverse .pbx-feature-inner {
  flex-direction: row-reverse;
}
.pbx-feature-image {
  flex: 1 1 480px;
  text-align: center;
}
.pbx-feature-image img {
  width: 100%;
  max-width: 480px;
  background: #111;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pbx-feature-text {
  flex: 1 1 420px;
}
.pbx-feature-text h3 {
  font-size: 1.2em;
  color: var(--main-blue);
  margin-bottom: 0.6em;
}
.pbx-feature-text p {
  line-height: 1.8;
  color: #333;
}

/* 連携導線 */
.linked-section {
  background: var(--light-bg);
  text-align: center;
}
.pbx-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 25px;
}
.pbx-link-btn {
  background: var(--main-blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}
.pbx-link-btn:hover { background: var(--accent-cyan); }

@media (max-width: 768px) {
  .pbx-feature-inner { flex-direction: column !important; }
  .pbx-feature-image img { max-width: 100%; }
  .pbx-card { width: 90%; max-width: 340px; }
}



/* ======================================================
   PBX通話系カルーセル
====================================================== */
.pbx-feature-carousel {
  background: #fff;
  text-align: center;
  overflow: visible;
}

.carousel-header {
  max-width: 1000px;
  margin: 0 auto 40px;
}
.carousel-header h3 {
  color: var(--main-blue);
  font-size: 1.6em;
  margin-bottom: 10px;
}
.carousel-header p {
  color: #555;
  line-height: 1.8;
  font-size: 1em;
}

.pbx-call-carousel {
  position: relative;
  overflow: visible;     /* ← 枠外を隠さない */
  max-width: 1200px;     /* ← スライダー枠自体を少し広げる */
  margin: 0 auto;
  padding: 0 200px;       /* ← 左右に余白を確保し、矢印分のスペースを作る */
}

.pbx-call-carousel .swiper-button-prev {
  left: -3px;  /* ← 親枠内に確実に残るように */
}

.pbx-call-carousel .swiper-button-next {
  right: -3px;
}

.pbx-call-carousel .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pbx-call-carousel img {
  width: 100%;
  max-width: 320px;   /* ← ここでサイズ指定 */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  margin: 20px auto;
}

.pbx-call-carousel .caption {
  margin-top: 6px;
  font-size: 0.9em;
  color: #333;
  text-align: center;
}

/* Swiper 標準UI調整 */
.swiper-wrapper {
  display: flex;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--main-blue);
  transition: opacity 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.7;
}
.swiper-pagination-bullet-active {
  background: var(--accent-cyan);
}

.pbx-call-carousel .swiper-pagination {
  position: relative;
  margin-top: 10px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .pbx-feature-carousel { padding: 60px 4%; }
  .carousel-header h3 { font-size: 1.3em; }
  .pbx-call-carousel img {
    max-width: 260px;
  }
}

/* ======================================================
   リアルタイムモニタリング セクション
====================================================== */
.monitor-section h2 {
  color: var(--main-blue);
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 20px;
}
.monitor-section .lead {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px;
  line-height: 1.8;
  color: #333;
}

.monitor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.monitor-card {
  flex: 1 1 420px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 25px;
  text-align: left;
}

.monitor-card.image {
  text-align: center;
}

.monitor-card img {
  width: 100%;
  max-width: 450px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.monitor-card .caption {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.monitor-card h3 {
  color: var(--main-blue);
  font-size: 1.2em;
  margin-bottom: 0.6em;
}

.monitor-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.monitor-card li {
  line-height: 1.7;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .monitor-grid {
    flex-direction: column;
    align-items: center;
  }
  .monitor-card {
    width: 90%;
    max-width: 500px;
  }
}

/* ======================================================
   ダッシュボード セクション
====================================================== */
.dashboard-section h2 {
  color: var(--main-blue);
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 20px;
}
.dashboard-section .lead {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px;
  line-height: 1.8;
  color: #333;
}
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.dashboard-card {
  flex: 1 1 420px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 25px;
  text-align: left;
}
.dashboard-card.image {
  text-align: center;
}
.dashboard-card img {
  width: 100%;
  max-width: 450px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dashboard-card .caption {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
  text-align: center;
}
.dashboard-card h3 {
  color: var(--main-blue);
  font-size: 1.2em;
  margin-bottom: 0.6em;
}
.dashboard-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dashboard-card li {
  line-height: 1.7;
  margin-bottom: 8px;
}
@media (max-width:768px){
  .dashboard-grid {
    flex-direction: column;
    align-items: center;
  }
  .dashboard-card {
    width: 90%;
    max-width: 500px;
  }
}

.dashboard-benefits {
  background: var(--light-bg);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 30px 25px;
  margin-top: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-benefits h3 {
  color: var(--main-blue);
  font-size: 1.3em;
  text-align: center;
  margin-bottom: 20px;
}

.dashboard-benefits ul {
  list-style: none;
  padding-left: 0;
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.8;
}

.dashboard-benefits li {
  margin-bottom: 10px;
  color: #333;
}
@media (max-width: 768px) {
  .dashboard-benefits {
    padding: 20px 15px;
  }
}

/* 管理系機能カード画像調整 */
.pbx-card.with-img img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


/* ======================================================
   レポート・分析機能
====================================================== */
.report-section h2 {
  color: var(--main-blue);
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 20px;
}

.report-section .lead {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px;
  line-height: 1.8;
  color: #333;
}

.report-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

.report-card {
  flex: 1 1 350px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 25px;
  text-align: left;
}

.report-card img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.report-card h3 {
  color: var(--main-blue);
  font-size: 1.1em;
  margin-bottom: 10px;
}

.report-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.report-card li {
  margin-bottom: 6px;
  line-height: 1.6;
  color: #333;
}

.report-benefits {
  background: var(--light-bg);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 30px 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.report-benefits h3 {
  color: var(--main-blue);
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 15px;
}

.report-benefits ul {
  list-style: none;
  margin: 0 auto;
  max-width: 900px;
  padding-left: 0;
  line-height: 1.8;
}

.report-benefits li {
  margin-bottom: 8px;
  color: #333;
}

@media (max-width:768px){
  .report-grid{
    flex-direction: column;
    align-items: center;
  }
  .report-card{
    width: 90%;
    max-width: 500px;
  }
}