@charset "UTF-8";

/* =========================================
   ABOUT ヒーローエリア
========================================= */
.hero-about {
  position: relative;
  width: 100%;
  height: 55vh;        /* greeting と同じ */
  max-height: 520px;   /* greeting と同じ */
  overflow: hidden;
}

.hero-about-image {
  width: 100%;
  height: 100%;        /* 親の高さに追従させる（重要） */
  display: block;
  object-fit: cover;
  object-position: center 60%;
}

/* =========================================
   セクション見出し（h2）
========================================= */
.about-section-title {
  font-family: "I-OTF明朝Pro M";
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #333;
  max-width: 1080px;
  padding: 0 20px;
  margin: 80px auto 16px; /* 下余白は詰めた状態を採用 */
}

/* =========================================
   ABOUT 画像ブロック
========================================= */
.about-image-block {
  max-width: 980px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

.about-image {
  width: 100%;
  aspect-ratio: 16 / 9;  /* 黄金比 */
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 2px;
}

/* =========================================
   箇条書き（著作権 / プライバシー）
========================================= */
.copyright-list,
.privacy-purpose-list {
  margin: 12px 0 0 1.2em;
  padding: 0;
}

.copyright-list li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.privacy-purpose-list li {
  margin-bottom: 6px;
  line-height: 1.8;
  font-family: "TazuganeGothicStdN-Light";
  font-size: 17px;
  letter-spacing: 0.01em;
}

/* =========================================
   サイトマップ
========================================= */
.sitemap-grid {
  max-width: 1080px;
  margin: 100px auto 0;
  padding: 0 20px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 40px;
}

.sitemap-block {
  margin: 0;
}

/* サイトマップ内では h2 の上余白をリセット */
.sitemap-block .about-section-title {
  margin-top: 0;
}












/*ここからスマホ*/




/* =========================================
   スマホ表示（max-width: 600px）
========================================= */
@media screen and (max-width: 600px) {

  /* -----------------------------
     セクション見出し（h2）
  ----------------------------- */
  .about-section-title {
    font-size: 20px;
    margin: 38px auto 20px;
  }

  /* -----------------------------
     ABOUT ヒーローエリア
  ----------------------------- */
  .hero-about {
    height: 260px; /* 代表ご挨拶と同じ高さ */
  }

  .hero-about-image {
    height: 260px;
    object-position: center 40%;
  }

  /* -----------------------------
     導入メッセージ
  ----------------------------- */
  .greeting-message {
    margin-bottom: 20px;
  }

  /* -----------------------------
     サイトマップグリッド
  ----------------------------- */
  .sitemap-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }

  /* サイトマップ内 見出し・本文の左右余白を解除 */
  .sitemap-grid .about-section-title,
  .sitemap-grid .greeting-message {
    padding-left: 0;
    padding-right: 0;
  }

  /* サイトマップ リスト */
  .sitemap-grid li {
    font-size: 16px;
    line-height: 2;
  }

}