/* ================================================
   レイアウト全体
================================================ */
.angkor-ruins-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* --------------------------------
   メインコンテンツ：グリッドレイアウト
-------------------------------- */
.angkor-ruins-main-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-template-rows: repeat(2, auto); /* 2行 */
  gap: 1rem;
  background-color: #b28c64;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box; /* ← 追加 */
  overflow-x: hidden; /* ← 安全策 */
}

/* 各コンテンツブロック */
.angkor-ruins-front-page-top {
  background-color: #f7f1e3;
  border: 2px solid #c3b8a5;
  border-radius: 8px;
  padding: 1rem;
  text-align: center; /* ←中央寄せに変更 */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column; /* ←縦方向の順序を制御 */
  justify-content: flex-start;
  align-items: center;
}

/* 見出しを上に、画像の直前に */
.angkor-ruins-front-page-top-title {
  font-size: clamp(1rem, calc(0.8rem + 0.5vw), 1.333rem);
  color: 3b2b12;
  margin-bottom: 0.5rem;
}
.angkor-ruins-front-page-top-title a {
  text-decoration: none;
  color: inherit;
}

/* 画像（中央寄せ） */
.angkor-ruins-front-page-top-image {
  margin-bottom: 0.5rem;
}
.angkor-ruins-front-page-top-image img {
  background: linear-gradient(#f4e3c3, #e1c7a0);
  border: 1px solid #b38b5d;
  padding: 4px;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 本文（画像の下に配置） */
.angkor-ruins-front-page-top-text {
  font-size: 0.9rem;
  text-align: left;
  margin-top: 0.5rem;
  color: 2a1d0c;
}
.angkor-ruins-front-page-top-text a {
  color: 704214;
  text-decoration: underline;
}

.angkor-ruins-front-page-top-text ul {
  list-style-type: none;
  margin: 0;
  padding: 5px 3px 5px 10px;
}
.angkor-ruins-front-page-top-text li {
  color: #5e4120;
  line-height: 1.5em;
  padding: 3px;
  font-size: 0.83rem;
}
/* --------------------------------
   レスポンシブ対応（スマホ）
-------------------------------- */
@media screen and (max-width: 768px) {
  .angkor-ruins-main-content {
    grid-template-columns: repeat(2, 1fr); /* タブレット：2列 */
  }
}

@media screen and (max-width: 480px) {
  .angkor-ruins-main-content {
    grid-template-columns: 1fr; /* スマホ：1列 */
  }
}