@charset "utf-8";

/* ══════════════════════════════
   Awards & History ページ
══════════════════════════════ */

/* ── ヘッダー ── */
.page-hero {
  text-align: center;
  padding: 56px 24px 36px;
  background: linear-gradient(180deg, #f2f5f0 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid #ddeadd;
}
.page-hero::before,
.page-hero::after {
  content: '✿';
  position: absolute;
  font-size: 140px;
  opacity: 0.07;
  color: #4a7a4a;
  top: -10px;
  line-height: 1;
}

.page-hero::before { left: -20px; }
.page-hero::after  { right: -20px; }

.page-deco {
  font-size: 13px;
  color: #8aaa8a;
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}

.page-title {
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 300;
  letter-spacing: 0.25em;
  color: #3a5c3a;
  margin: 0 0 6px;
  font-family: Georgia, serif;
  line-height: 1;
}

.page-subtitle {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #7a9a7a;
  margin: 0 0 16px;
}

.page-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8aaa8a;
  opacity: 0.6;
}

.dot.big {
  width: 7px;
  height: 7px;
  opacity: 1;
  background: #4a7a4a;
}

/* ── メインセクション ── */
.history-section {
  padding: clamp(32px, 5vw, 56px) clamp(16px, 5vw, 48px);
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.section-label-line {
  flex: 1;
  height: 0.5px;
  background: #c8dbc8;
}
.section-label-text {
  font-size: 11px;
  color: #7a9a7a;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.section-label-icon {
  font-size: 13px;
  color: #8aaa8a;
}

/* 4列に固定 */
.history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* ← 4列固定 */
    gap: 16px;
}

/* タブレット：2列 */
@media (max-width: 900px) {
    .history-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ：2列 */
@media (max-width: 600px) {
    .history-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .card-img {
        height: 120px;    /* ← スマホは少し低め */
    }
}

.history-card {
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid #e0e8e0;
  background: #fff;
}
.card-img {
  width: 100%;
  height: 130px;
  position: relative;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.card-badge.award { background: #fff8e8; color: #9a7a2a; }
.card-badge.event { background: #eef4ee; color: #4a7a4a; }

.card-body { padding: 14px 16px; }
.card-year {
  font-size: 10px;
  color: #9ab89a;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
.card-title {
  font-size: 13px;
  color: #3a5a3a;
  font-weight: 500;
  line-height: 1.6;
}

/* ── スマホ ── */
@media (max-width: 600px) {
  .page-hero {
    padding: 36px 16px 24px;
  }
  .page-hero::before,
  .page-hero::after {
    font-size: 80px;
  }
  .history-section {
    padding: 28px 16px;
  }
  .card-img { height: 100px; }
  .card-body { padding: 10px 12px; }
}

.card-img {
    width: 100%;
    aspect-ratio: 4 / 3;   /* ← 比率を強制固定 */
    overflow: hidden;
    position: relative;
    height: 350px;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* ← はみ出た部分を自動トリミング */
    object-position: center top; /* ← 顔が上にある写真に合わせて上基準 */
    display: block;
}