@charset "utf-8";
/*==========================================================
  お知らせ（TOPページの欄 ＋ お知らせ一覧 20_news.html）

  配色は お問い合わせページ（20_contact-new.css）・
  おまかせ保育LP（hoiku-lp.css）と同じ緑・淡黄を使う。
===========================================================*/
:root {
  --nw-green: #6fbf8b;        /* 基本の緑（ボタン・枠線） */
  --nw-green-dark: #4f9b6d;   /* 小さい文字・矢印。白地で読める濃さ */
  --nw-green-mid: #9cd3af;    /* 飾りの丸 */
  --nw-green-light: #dcefe3;  /* 薄い枠線・点線 */
  --nw-green-pale: #edf7f1;   /* 薄い背景 */
  --nw-cream: #fffdf3;        /* お問い合わせフォームの枠の中と同じ淡黄の背景 */
  --nw-pink: #ff9494;         /* 一覧ボタン・NEW・PDF のアクセント */
  --nw-pink-dark: #ff6868;    /* ボタンのホバー */
  --nw-text: #3c423e;
  --nw-muted: #8a918c;
}

.news-top,
.news-top *,
.news-page,
.news-page * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*---------------  見出し（お問い合わせページと同じ形）  ---------------*/
.news-head {
  text-align: center;
  margin: 0 0 24px;
}
.news-head_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: inherit;
  line-height: 1;
  text-transform: none;
}
.news-head_lbl {
  display: inline-block;
  padding: 11px 44px;
  background: var(--nw-green);
  border-radius: 999px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.08em;
}
.news-head_dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-head_dots i {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--nw-green-light);
  border-radius: 50%;
}
.news-head_dots i:last-child {
  width: 14px;
  height: 14px;
  background: var(--nw-green-mid);
}
.news-head_dots:last-child {
  flex-direction: row-reverse;
}
.news-head_en {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--nw-green-dark);
}
.news-head_lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--nw-text);
}

/*---------------  TOPページの欄  ---------------*/
.news-top {
  padding: 56px 0 64px;
  background: var(--nw-cream);
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 6px 28px;
  background: #fff;
  border-radius: 22px;
}

/*---------------  1件分（TOP・一覧 共通）  ---------------*/
.news-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed var(--nw-green-light);
}
.news-item:last-child {
  border-bottom: 0;
}
.news-item_link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
  color: var(--nw-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.6;
  transition: background-color 0.2s;
}
a.news-item_link:hover {
  background: var(--nw-green-pale);
  color: var(--nw-text);
}
.news-item_date {
  flex: none;
  width: 118px;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--nw-muted);
}
.news-item_cat {
  flex: none;
  width: 84px;
  padding: 3px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}
.news-item_cat--event   { background: #edf7f1; color: #3f7d58; }
.news-item_cat--media   { background: #fff0e8; color: #a5532e; }
.news-item_cat--award   { background: #ffecec; color: #b5474f; }
.news-item_cat--release { background: #fff8c2; color: #6e5c0c; }
.news-item_cat--works   { background: #f1f1ef; color: #55554f; }
.news-item_title {
  flex: 1;
  min-width: 0;
}
.news-item_new,
.news-item_pdf {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 2px;
  white-space: nowrap;
}
.news-item_new {
  background: var(--nw-pink);
  color: #fff;
}
.news-item_pdf {
  border: 1px solid var(--nw-pink);
  color: #c95a5a;
}
.news-item_arrow {
  flex: none;
  position: relative;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--nw-green-mid);
  border-radius: 50%;
}
.news-item_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--nw-green-dark);
  border-right: 1.5px solid var(--nw-green-dark);
  transform: translate(-60%, -50%) rotate(45deg);
}
.news-item_link--nolink .news-item_arrow {
  visibility: hidden;
}

/*---------------  一覧へのボタン（LP の「詳しくはこちら」と同じ形をピンクで）  ---------------*/
.news-more {
  text-align: center;
  margin: 28px 0 0;
}
.news-more_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 66px 11px 28px;
  background: var(--nw-pink);
  box-shadow: 0 3px 0 var(--nw-pink-dark);
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.news-more_btn:hover {
  color: #fff;
  opacity: 0.8;
}
.news-more_btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--nw-pink-dark);
}
/* 線の丸に、左から線が突き抜ける矢印（文字の→は隠す） */
.news-more_arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 38px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='25' cy='13' r='12'/%3E%3Cpath d='M1 13h28M24 8l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
  font-size: 0;
  color: transparent;
  transform: translateY(-50%);
}

/*---------------  お知らせ一覧ページ  ---------------*/
.news-page {
  padding: 40px 20px 90px;
}
.news-page .container {
  max-width: 1060px;
}
.news-crumb {
  margin: 0 0 22px;
  font-size: 12px;
  color: var(--nw-muted);
}
.news-crumb a {
  color: var(--nw-muted);
  text-decoration: none;
}
.news-crumb a:hover {
  color: var(--nw-green-dark);
}

/* カテゴリ絞り込み */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.news-filter a {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--nw-green-dark);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.news-filter a:hover {
  background: var(--nw-green-pale);
}
.news-filter a.is-current {
  background: var(--nw-green);
  color: #fff;
}

/* 一覧のカード（TOP のお知らせ欄と同じ白い角丸。緑枠はお問い合わせフォーム専用なので使わない） */
.news-box {
  padding: 10px 28px 20px;
  background: #fff;
  border-radius: 22px;
}
.news-box .news-list {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.news-year {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nw-green-dark);
}
.news-year::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nw-green-mid);
}
.news-empty {
  margin: 30px 0;
  text-align: center;
  color: var(--nw-muted);
}

/* ページ送り */
.news-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.news-pager a,
.news-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--nw-green-dark);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.news-pager a:hover {
  background: var(--nw-green-pale);
}
.news-pager .is-current {
  background: var(--nw-green);
  color: #fff;
}
.news-back {
  margin: 26px 0 0;
  text-align: center;
}
.news-back a {
  color: var(--nw-green-dark);
  font-size: 14px;
  text-decoration: none;
}
.news-back a:hover {
  text-decoration: underline;
}

/*---------------  スマホ  ---------------*/
@media (max-width: 767px) {
  .news-top {
    padding: 40px 0 48px;
  }
  .news-head_ttl {
    gap: 12px;
  }
  .news-head_lbl {
    padding: 9px 30px;
    font-size: 19px;
  }
  .news-head_lead {
    font-size: 14px;
    text-align: left;
  }
  .news-list {
    padding: 4px 16px;
    border-radius: 16px;
  }
  /* TOP はスマホでは 3 件まで */
  .news-list--top .news-item:nth-child(n+4) {
    display: none;
  }
  .news-list--top .news-item:nth-child(3) {
    border-bottom: 0;
  }
  .news-item_link {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 13px 2px;
    font-size: 14px;
  }
  .news-item_date {
    width: auto;
    font-size: 13px;
  }
  .news-item_title {
    flex: 1 1 100%;
    padding-right: 30px;
  }
  .news-item_arrow {
    position: absolute;
    right: 2px;
    bottom: 14px;
    width: 20px;
    height: 20px;
  }
  .news-item {
    position: relative;
  }
  .news-more_btn {
    font-size: 14px;
    padding: 10px 54px 10px 22px;
  }
  .news-more_arrow {
    right: 12px;
    width: 32px;
    height: 22px;
  }
  .news-page {
    padding: 24px 14px 60px;
  }
  .news-filter a {
    padding: 5px 14px;
    font-size: 13px;
  }
  .news-box {
    padding: 6px 14px 14px;
    border-radius: 16px;
  }
  .news-year {
    font-size: 15px;
  }
}