@charset "UTF-8";


.hero-about-image {
  width: 100%;
  height: 100%;          /* ← これが重要（反映しない原因はこれ） */
  display: block;
  object-fit: cover;
  object-position: center 70%;  /* 好きな値で調整できる */
}


.hero-about {
  position: relative;
  width: 100%;
  height: 55vh;       /* greeting と同じ */
  max-height: 520px;  /* greeting と同じ */
  overflow: hidden;
}

.hero-about .global-nav ul li:nth-child(1) a {
  color: #CD4145 !important;
  font-family: "TazuganeGothicStdN-Medium";
  pointer-events: none;
}

.about-section-title {
	font-family: "I-OTF明朝Pro M";
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: #333;
	margin: 80px auto 32px;
	max-width: 1080px;
	padding: 0 20px;
}

.about-image-block {
  max-width: 980px;    /* ← ここを1100pxにする */
  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;
}











/*ここからスマホ*/




@media screen and (max-width: 600px) {
  .about-section-title {
    font-size: 20px;
    margin: 48px auto 24px;
    margin-top: 64px;   /* ← ここを増やす */
  }

.hero-about {
    height: 260px;   /* ← 完全固定（代表ご挨拶と同じ高さにする） */
  }

  .hero-about-image {
    height: 260px;
    object-position: center 40%; /* greeting と合わせた */
  }

  .about-image {
    aspect-ratio: 1.414 / 1;  /* 大和比 */
  }

  .about-image-block {
    margin-top: 12px;      /* ← ここを詰める（おすすめ） */
    margin-bottom: 12px;   /* ← 下も少しだけ詰める */
  }


   /* 本文ブロックの“最後の余白(100px)”だけ詰める */
  .greeting-message {
    margin-bottom: 24px;
  }

  /* 画像ブロック側の上余白も必要ならさらに詰める（任意） */
  .greeting-message + .about-image-block {
    margin-top: 0;
  }





}