/* =========================================================
   components.css : 複数ページで使い回す共通コンポーネント
   セクション見出し / 施設カード
   ========================================================= */

/* ----------------------------------------------------------
   セクション見出し
---------------------------------------------------------- */
.sec-title {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
}

.sec-lead {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-sub);
}

/* ----------------------------------------------------------
   施設カード（トップ / 施設一覧で共通）
---------------------------------------------------------- */
.fac__list {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.fac__card {
  display: block;
  position: relative;
  width: 360px;
  max-width: 100%;
}

.fac__photo {
  position: relative;
  display: block;
  aspect-ratio: 360 / 220;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.fac__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.fac__card:hover .fac__photo img { transform: scale(1.04); }

/* 写真上の「園のWebサイトを見る」ボタン */
.fac__btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 229px;
  height: 44px;
  padding-inline: 28px;
  border-radius: 22px;
  background: var(--color-beige);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-text);
}

/* 右向き三角（幅8px / 高さ7px） */
.fac__btn::after {
  content: "";
  margin-left: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 8px;
  border-color: transparent transparent transparent var(--color-text);
}

.fac__name {
  display: block;
  margin-top: 20px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
}

/* ----------------------------------------------------------
   お知らせ行（トップ / お知らせ一覧で共通）
---------------------------------------------------------- */
.news__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news__row {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 80px;
  padding: 12px 32px;
  border-radius: 10px;
  background: var(--color-bg);
  transition: opacity 0.2s;
}

.news__row:hover { opacity: 0.7; }

.news__date {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-text);
}

/* 施設タグ（お知らせ行・求人カード共通）。色は施設ごとに modifier */
.tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  height: 27px;
  padding-inline: 12px;
  border-radius: 14px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 13px;
  /* 既定：りじょう認定こども園（緑） */
  background: var(--color-tag-bg);
  color: var(--color-green);
}

/* フレーベル幼稚園（黄） */
.tag--fle {
  background: #fbf7e6;
  color: #c7b86a;
}

/* 福山りじょう幼稚園（桃） */
.tag--fukuyama {
  background: #fbeaea;
  color: #c97c7c;
}

.news__ttl {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
}

/* ----------------------------------------------------------
   ページネーション
---------------------------------------------------------- */
.pager {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 16px;
  color: #999;
  transition: opacity 0.2s;
}

.pager__item:hover { opacity: 0.7; }

/* 現在ページ（淡いクリーム＋白文字。デザイン準拠） */
.pager__item--current {
  background: #fdfdf0;
  color: var(--color-white);
  pointer-events: none;
}

/* 前後の矢印（シェブロン） */
.pager__item--prev::before,
.pager__item--next::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
}

.pager__item--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.pager__item--next::before { transform: rotate(45deg); margin-right: 3px; }

/* ==========================================================
   SP : max-width 750px（お知らせ行 / ページャ）
   ========================================================== */
@media (max-width: 750px) {
  .news__list {
    margin-top: 28px;
    gap: 0;
    border-top: 1px solid var(--color-beige);
  }

  .news__row {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 28px 14px 16px;
    position: relative;
    border-radius: 0;
    border-bottom: 1px solid var(--color-beige);
  }

  .news__row:hover { opacity: 1; }

  .news__date { width: 100%; color: #999; }
  .tag { min-width: 0; height: 20px; font-size: 10px; }
  .news__ttl { width: 100%; font-size: 14px; }

  /* 行末の「>」（ベージュ） */
  .news__row::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--color-beige);
    border-right: 2px solid var(--color-beige);
    transform: translateY(-50%) rotate(45deg);
  }

  .pager { margin-top: 36px; gap: 8px; }
  .pager__item { width: 40px; height: 40px; font-size: 14px; }
}

/* ==========================================================
   SP : max-width 750px
   ========================================================== */
@media (max-width: 750px) {
  .sec-title { font-size: 22px; }
  .sec-lead { font-size: 14px; }

  /* 施設カード（SP）：名前は写真左上に重ね、ボタン無し、右下に三角 */
  .fac__list {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    margin-top: 28px;
  }

  .fac__card { width: 320px; }

  /* 右下はコーナー三角のため角丸なし（尖り） */
  .fac__photo { border-bottom-right-radius: 0; }

  .fac__btn { display: none; }

  .fac__name {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
    padding: 5px 16px;
    background: var(--color-white);
    color: var(--color-green);
    font-size: 22px;
    line-height: 1.45;
    text-align: left;
  }

  /* 右下のコーナー三角 */
  .fac__photo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: var(--color-text);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
  }
}