.office-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 20px;
}

.page-intro {
  margin-bottom: 40px;
  line-height: 1.8;
}

.office-item {
  margin-bottom: 50px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #e0f3ff;
}

.office-name {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.office-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.office-table th {
  width: 120px;
  background: #e0f3ff;;
  padding: 10px;
  text-align: left;
}

.office-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  overflow: visible;
}

.office-map iframe {
  width: 100%;
  height: 250px;
  border: 0;
}

.office-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.office-syocho {
  width: 100px;   /* 好きなサイズに変更 */
  height: auto;   /* 比率維持 */
  margin: 0 auto;   /* ← これで横方向センタリング */
  border-radius: 100px; /* 角丸（不要なら削除） */
}


.office-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 左：説明 */
.office-info {
  flex: 1;
}

/* 中央：外観画像 */
.office-photo {
  flex: 0 0 auto;        /* ← 画像が潰れないように固定 */
}
.office-photo img {
  width: 150px;          /* ← 画像が消えない安全サイズ */
  height: auto;
  border-radius: 6px;
}


/* 右：地図 */
.office-map {
  flex: 1;
  min-width: 200px;   /* ← 地図が消えないための最低幅 */
  max-width: 300px;
}

.office-map iframe {
  width: 100%;
  height: 220px;
  border: 0;
}

/* ▼ スマホは縦並びに強制切り替え */
@media (max-width: 768px) {
  .office-flex {
    flex-direction: column !important; /* ← これが最重要 */
    width: 100% !important;
  }

  .office-info,
  .office-photo,
  .office-map {
    width: 70% !important;
    max-width: 100% !important;
  }

  .office-photo img {
    width: 100%;
    max-width: 300px;
  }

  .office-map iframe {
    width: 100%;
  }
}