/* ========================================
   about.css - 指令センターとは ページ専用スタイル
   山梨国中地域消防指令センター
======================================== */

/* ========================================
   コンテンツ内 セクション共通
======================================== */
.page-about-wrap .about-section {
  padding: 10px 0;
}
.page-about-wrap .section__inner {
  max-width: var(--inner-width);
  margin: 40px auto;
  padding: var(--inner-padding);
}

/* 画像全体のコンテナ */
.about-overview__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.about-overview__text p {
  font-size: 20px;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 16px;
}
.about-overview__images {
  display:none;
  position: relative; 
  width: 400px;
  height: 400px;      
}

.about-overview__img {
  position: absolute; 
  /* border-radius: 15px;  */
  overflow: hidden;
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.1);  */
}

/* 左側の画像（縦長で青い枠） */
.about-overview__img:first-child {
  top: 0;
  left: 0;
  width: 170px;          
  z-index: 1;
  display: none;
}

/* 右側の画像（横長で上に重なる） */
.about-overview__img:last-child {
  top: 160px;           
  right: 0px;         
  width: 216px;          
  z-index: 2;          
  margin-top: 0;     
  display: none;
  
}

.about-overview__img img {
  height: auto;
  /* object-fit: cover; */
}

/* ========================================
   構成消防本部と管轄区域
======================================== */
.about-area__inner {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 60px;
  align-items: center;
}

.about-area__list-heading {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.about-area__list-sub {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 20px;
}
.about-area__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #d0dce8;
  border-radius: 4px;
  overflow: hidden;
}
.about-area__item:last-child { border-bottom: none; }

/* 数値を囲むコンテナ */
.about-area__item-num {
  position: relative; /* 子要素の::beforeの基準にする */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;        /* グリッドの幅に合わせる */
  height: 100%;       /* 高さを親に合わせる */
  font-size: 16px;
  font-weight: 700;
  color: #333;        /* 数字の色（白丸の上で見える色） */
  z-index: 2;         /* 数字自体を上に */
  /* mix-blend-mode: screen; は削除（白背景だと数字が消えます） */
}

/* 白い円（疑似要素） */
.about-area__item-num::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;  /* 円のサイズを少し調整 */
  height: 28px;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;  /* 数字（z-index: 2）より背面に配置 */
}

.about-area__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  /*align-items: center; */
  border-bottom:1px solid #dde8f5
}

.about-area__item--1 .about-area__item-num { background: #f0a000; color: #f0a000;}
.about-area__item--2 .about-area__item-num { background: #00b0c8; color: #00b0c8;}
.about-area__item--3 .about-area__item-num { background: #e03030; color: #e03030;}
.about-area__item--4 .about-area__item-num { background: #f0c800; color: #f0c800;}
.about-area__item--5 .about-area__item-num { background: #a040c0; color: #a040c0;}
.about-area__item--6 .about-area__item-num { background: #60b840; color: #60b840;}

.about-area__item-body {
  padding: 12px 16px;
  background: var(--color-white);
}
.about-area__item-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: 2px;
}
.about-area__item-cities {
  font-size: 16px;
  color: var(--color-text-light);
}

/* ========================================
   消防指令業務の共同運用
======================================== */
.about-joint__text {
  font-size: 20px;
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 16px;
  max-width: 800px;
}

/* ========================================
   協議会の経緯（テーブル）
======================================== */
/* .about-history { background: #f5f8fc; } */
.about-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px;
}
.about-history__table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.about-history__table tbody td {
  font-weight: 600;
}

.about-history__table thead th:first-child { width: 160px; }
.about-history__table tbody tr {
  border-bottom: 1px solid #dde8f5;
  transition: background 0.15s;
}
.about-history__table tbody tr:last-child { border-bottom: none; }
.about-history__table tbody tr:hover { background: #eef4fb; }
.about-history__table tbody td {
  padding: 14px 20px;
  line-height: 1.7;
  color: var(--color-text);
  vertical-align: top;
}
.about-history__table tbody td:first-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
  border-right: 1px solid #dde8f5;
  vertical-align: middle;
}

.about-history__table td,
.about-history__table th {
  border: 2px solid #999;
}

/* ========================================
   ページ下部 お問い合わせバナー
======================================== */
.page-contact-banner {
  background: var(--color-primary);
  padding: 48px 0;
}
.page-contact-banner__inner {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: var(--inner-padding);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}
.page-contact-banner__tel-label,
.page-contact-banner__mail-label {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.page-contact-banner__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 36px;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.page-contact-banner__tel svg { width: 28px; height: 28px; }
.page-contact-banner__fax {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.page-contact-banner__divider {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,0.3);
}
.page-contact-banner__mail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-contact-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--color-white);
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}
.page-contact-banner__btn:hover { background: rgba(255,255,255,0.25); }
.page-contact-banner__note {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 900px) {
  .about-overview__inner { grid-template-columns: 1fr; }
  .about-overview__images { max-width: 480px; }
  .about-area__inner { grid-template-columns: 1fr; }
  .about-area__map { max-width: 420px; }
  .page-contact-banner__inner { grid-template-columns: 1fr; gap: 24px; }
  .page-contact-banner__divider { display: none; }
}
@media (max-width: 600px) {
  .about-history__table { font-size: 12px; }
  .about-history__table thead th:first-child { width: 100px; }
  .about-history__table tbody td { padding: 10px 12px; }
  .page-contact-banner__tel { font-size: 28px; }

  .section-heading {
    font-size: 15px;
  }
  .about-overview__text p {
      font-size: 16px;
  }

  .about-area__list-heading {
    font-size: 18px;
  }
  /* 画像全体のコンテナ */
  .about-overview__images {
    display: none;
    position: relative; /* 子要素の基準になる */
    width: 100%;
    height: 0px;      /* 画像の高さに合わせて調整 */
  }
  .about-overview__images {
    position: relative; 
    width: 380px;
    height: 400px;  
    display: none;    
  }
  .about-joint__text {
      font-size: 16px;
  }
 
  .about-overview__img {
    position: absolute; 
    /* border-radius: 15px;  */
    overflow: hidden;
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.1);  */
  }

  /* 左側の画像（縦長で青い枠） */
  .about-overview__img:first-child {
    top: 0;
    left: 0;
    width: 150px;          
    z-index: 1;
    display: none;
  }

  /* 右側の画像（横長で上に重なる） */
  .about-overview__img:last-child {
    top: 200px;           
    right: 0px;         
    width: 170px;          
    z-index: 2;          
    margin-top: 0;       
    display: none;
  }

  .about-overview__img img {
    height: auto;
    /* object-fit: cover; */
  }

  .about-overview__img {
  position: absolute; /* 自由な位置に配置 */
  /*border-radius: 15px;  参考画像のような丸み */
  overflow: hidden;
  /*box-shadow: 0 4px 20px rgba(0,0,0,0.1);  軽い影をつけると重なりが綺麗に見えます */
  }

  /* 左側の画像（縦長で青い枠） */
  .about-overview__img:first-child {
    top: 0;
    left: 0;
    width: 65%;           /* 横幅の比率 */
    /* aspect-ratio: 3 / 4;  縦長にする */
    z-index: 1;
  }

  /* 右側の画像（横長で上に重なる） */
  .about-overview__img:last-child {
    top: 210px;           /* 上から100px下げる（重なり具合の調整） */
    left: 120px;             /* 右端に寄せる */
    width: 200px;           /* 横幅を少し大きくする */
    /*aspect-ratio: 4 / 3;   横長にする */
    z-index: 2;           /* 左の画像より上に表示 */
    margin-top: 0;        /* 元のCSSの指定をリセット */
  }

  .about-overview__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-area__item-name {
      font-size: 14px;
  }
  .about-area__item-cities {
      font-size: 11px;
      color: var(--color-text);
  }
  .about-area__item-body {
      line-height: normal;
  }
  .about-history__table tbody td {
    font-size: 13px;
  }
  .page-about-wrap .section__inner {
  margin: 10px auto;
  }


}