@charset "UTF-8";

/* ==========================================================================
   Base & Reset
   ========================================================================= */
* {
  box-sizing: border-box;
}

:root {
  --color-primary: #0b6c16;
  --color-white: #ffffff;
  --color-text: #111111;
  --font-rounded: "m-plus-rounded-1p", "Meiryo", sans-serif;
  --font-mincho: "biz-udpmincho", "BIZ UDP明朝", serif;
}

body {
  margin: 0;
  padding: 20px;
  font-family: var(--font-rounded);
  color: #333;
  background-color: #f5f5f5;
  line-height: 1.6;
}

h1,
h2,
h3,
p,
dl,
dt,
dd,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.l-wrapper {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex; /* ★追加 */
  flex-direction: column; /* ★追加 */
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background-color: var(--color-primary);
  padding: 15px 20px;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
}

.header__logo-image {
  height: 32px;
  width: auto;
  display: block;
}

.header__logo-text {
  font-size: 24px;
  font-weight: 500;
}

.header__nav-list {
  display: flex;
  gap: 10px;
}

.header__nav-link {
  display: block;
  background-color: var(--color-white);
  color: #000000;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   Main Content (Top Page)
   ========================================================================== */
.main {
  padding: 40px 0 60px;
}

.index-page {
  padding: 40px 0 60px;
}

.hero__image {
  width: 100%;
  height: auto;
  display: block;
  min-height: 200px;
  background-color: #eee;
}

.catchphrase {
  text-align: center;
  padding: 60px 20px 0px;
}

.catchphrase__text {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.12em;
}

/* index.htmlのお知らせや更新履歴など、各ブロックの外枠。
   この上の余白を【60px】に固定することで、HTML構造に依存せず綺麗に離れます。
*/
.information__block {
  text-align: center;
  margin-top: 60px;
}

/* ただし、一番最初のお知らせの上だけは、空きすぎないよう 0px にします */
section:first-of-type .information__block {
  margin-top: 0px;
}

/* 見出し自体の下余白（文字とテーブルの隙間）15px */
.information__title {
  display: inline-block;
  border: 3px solid var(--color-primary);
  border-radius: 30px;
  padding: 6px 45px;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 15px;
}

.information__content {
  display: flex;
  justify-content: center;
}

.information__item {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  font-weight: 500;
}

/* ==========================================================================
   Main Content (About Page 追加分)
   ========================================================================== */

/* Aboutページの各セクション（組合概要、団地概要、沿革）の上の余白を【60px】にします */
.about-page section {
  padding-top: 60px;
}

/* 一番最初のセクション（組合概要）の上だけは 20px です */
.about-page section:first-of-type {
  padding-top: 20px;
}

/* 組合概要・団地概要の表組み（定義リストDL） */
.profile-table-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 0;
}

.profile-table-container.is-short {
  max-width: 650px;
}

.profile-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-table__item {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* 左側：項目名（緑色背景） */
.profile-table dt {
  flex: 0 0 160px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 10px 5px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 団地概要用の幅調整 */
.profile-table.is-area dt {
  flex: 0 0 180px;
}

/* 右側：内容（白い枠線） */
.profile-table dd {
  flex: 1;
  border: 3px solid #999999;
  background-color: var(--color-white);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 沿革セクション */
.history-section {
  padding-bottom: 30px;
}

.history-list-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  /* コンテナ内を中央揃えにするための設定を追加 */
  display: flex;
  justify-content: center;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* リスト自体を左揃えにしつつ、中身の塊が中央に寄るようにします */
  text-align: left;
}

/* 沿革の各行：中央の隙間を固定にし、全体をセンタリング */
.history-list__item {
  display: flex;
  justify-content: flex-start; /* 常に左から順に並べる */
  gap: 20px; /* ★日付と出来事の間のスペース（お好みで調整してください） */
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

/* 左側（日付）：右寄せ */
.history-list dt {
  flex: 0 0 auto;
  min-width: 160px; /* ★120px から 160px に広げました */
  text-align: right;
  white-space: nowrap;
}

/* 右側（出来事）：残りの幅をすべて使う */
.history-list dd {
  flex: 1;
  text-align: left;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 20px 20px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__logo-image {
  height: 24px;
  width: auto;
  display: block;
}

.footer__logo-text {
  font-size: 22px;
  font-weight: 500;
}

.footer__info {
  font-size: 16px;
  font-weight: 500;
}

.footer__copyright {
  font-size: 12px;
}

/* ==========================================================================
   Main Content (Members Page 追加分)
   ========================================================================== */
/* 団地内マップの画像調整 */
.park-map-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.park-map-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 企業一覧の2列グリッド（members.jpg のようなレイアウトを作ります） */
.company-grid {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 均等に2列に並べます */
  gap: 24px; /* カードとカードの隙間 */
}

/* 企業のカード外枠：members.pngに合わせて上画像・下テキストに変更 */
.company-card {
  display: flex;
  flex-direction: column; /* 上下に配置 */
  background-color: var(--color-white);
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center; /* members.pngに合わせて中央揃え */
}

/* 組合会館など、単独の特別なカード用 */
.company-card.is-hall {
  border-color: var(--color-primary);
}

/* カードの上側：画像エリア */
.company-card__image-wrapper {
  width: 100%;
  height: 180px; /* members.pngの高めの比率に調整 */
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 2px solid #ddd; /* 画像とテキストの境界線 */
}

/* 画像が実際にある場合 */
.company-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠線に合わせて綺麗にトリミング */
}

/* 画像がない場合のダミー文字 */
.company-card__no-image {
  font-size: 14px;
  color: #999;
  font-weight: 500;
}

/* カードの下側：文字情報エリア（文字が大きくなったので余白を少し調整） */
.company-card__info {
  flex: 1;
  padding: 20px 12px; /* 15px 10px から少し広げて窮屈さを解消しました */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

/* 丸数字と社名（さらに大きく、視認性をアップ） */
.company-card__name {
  font-size: 22px; /* 18px から 22px に大きくしました */
  font-weight: bold;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 10px; /* 下の文字との間隔を少し広げました */
  text-align: center;
}

/* 工場名などのサブタイトル（フォントを18pxに変更） */
.company-card__sub-name {
  display: block; /* 確実に改行させるため */
  font-size: 18px; /* 16px から 18px に変更 */
  font-weight: 500; /* 少しだけ細くしてメリハリをつけます */
  color: #555; /* 色も少しだけ薄くして、社名を引き立てます */
  margin-top: 4px; /* 社名との間のわずかな隙間 */
}

/* 説明文 */
.company-card__desc {
  font-size: 15px;
  color: #666;
  line-height: 1.4;
}

/* 企業カードをリンク（aタグ）にした場合の追加スタイル */
a.company-card {
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 文字色を親要素から引き継ぐ */
  display: flex; /* ブロック要素として扱う */
  cursor: pointer; /* マウスカーソルをポインターにする */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; /* ホバー時のアニメーション用 */
}

/* リンク付きカードにマウスを乗せたときの動き */
a.company-card:hover {
  transform: translateY(-5px); /* 少し上に浮き上がらせる */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 影を濃くして立体感を出す */
}

/* リンク付きカードの中の説明文（フォントを15pxに変更） */
a.company-card .company-card__desc {
  font-size: 15px; /* 元の 13px から 15px に変更 */
  color: #444; /* 文字が大きくなったので、色も少し濃くして視認性を高めます */
}

/* 【重要】画面が狭いスマホなどで見たときは、見づらくならないよう1列にします */
@media (max-width: 650px) {
  .company-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Member Detail Page (企業詳細ページ共通)
   ========================================================================== */

/* 企業個別ロゴエリア */
.member-logo-block {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.member-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.member-logo-image {
  height: 40px; /* ロゴの高さ */
  width: auto;
}

.member-company-name {
  font-family: var(--font-rounded);
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

/* 公式Webサイトボタン */
.member-website-button {
  display: inline-block;
  border: 1px solid #333;
  color: #333;
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  background-color: #fff;
  transition: background-color 0.2s;
}

.member-website-button:hover {
  background-color: #f0f0f0;
}

/* 大きな公式Webサイトボタン */
.member-website-button-large {
  display: inline-block;
  border: 1px solid #333;
  color: #333;
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  background-color: #fff;
  transition: background-color 0.2s;
}

.member-website-button-large:hover {
  background-color: #f0f0f0;
}

/* メインの外観写真 */
.member-main-visual {
  width: calc(100% - 40px);
  margin: 0 20px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.member-main-visual-image {
  width: 100%;
  height: auto;
  display: block;
}

/* キャッチフレーズ */
.member-catchphrase {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0 20px;
}

/* 「基本情報」「沿革」見出しのデザイン */
.member-section-title-container {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

/* ==========================================================================
   Main Content (Access Page 追加分)
   ========================================================================== */
/* Googleマップのコンテナ */
.google-map-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 20px;
  border-radius: 8px;
  overflow: hidden;
}

/* 埋め込みマップ（iframe）自体の設定 */
.google-map-container iframe {
  width: 100%;
  height: auto;
  min-height: 450px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 交通アクセス情報の箇条書きセクション */
.access-info-section {
  padding-bottom: 30px;
}

.access-info-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}

.access-info-list {
  display: flex;
  flex-direction: column;
  gap: 28px; /* 文字が大きくなったので、項目間の隙間を少しだけ広げました */
  text-align: center;
}

/* 交通アクセスの各項目（「車の場合」など） */
.access-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text);
}

/* 項目名（dt）：小見出し化 */
.access-info-item dt {
  font-size: 22px; /* ★18pxから4px大きくしました */
  font-weight: bold;
  margin-bottom: 6px; /* 説明文との間隔を微調整 */
  line-height: 1.4;
}

/* 具体的なルート説明（dd） */
.access-info-item dd {
  font-size: 18px; /* こちらは元のサイズを維持 */
  text-align: center;
  line-height: 1.6;
}