@charset "UTF-8";

/* =========================================================
   news.css … お知らせ一覧（news/index.html）と記事ページ（news/0001/ など）
   一覧ページ：このファイルだけ読み込む
   記事ページ：recruit.css（各セクションの中身）のあとに読み込み、カンプに合わせて上書きする
   ※ フォントサイズは custom.css の :root 変数（小さい文字も整数になる引き算）のみ使用
   ========================================================= */

/* =========================================================
   共通（SP）
   ========================================================= */
/* SPは一番下（フッターの上）にピンクの帯 */
.news,
.news-article {
  padding-bottom: 90px;
  border-bottom: 20px solid #c96e86;
}

/* パンくずはPCのみ */
.breadcrumb {
  display: none;
}

/* ---------- 英字ラベル＋下線（NEWS） ---------- */
.news-head {
  padding: 30px 16px 0 26px;
}

.news-label {
  padding: 0 0 14px;
  border-bottom: 1px solid #6b5f58;
}

/* ---------- お知らせ一覧へ戻る（文字の上に左向きの矢印） ---------- */
.news-back {
  display: flex;
  justify-content: center;
  margin-top: 75px;
}

.news-back-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #6b5f58;
  font-size: var(--main-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}

/* 矢印：横線＋左上の斜め線 */
.news-back-link::before {
  content: "";
  width: 60px;
  height: 10px;
  border-bottom: 1px solid currentColor;
  background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) left bottom / 14px 10px no-repeat;
  transition: translate 0.3s;
}

.news-back-link:hover {
  color: #c96e86;
}

.news-back-link:hover::before {
  translate: -6px 0;
}

/* =========================================================
   お知らせ一覧（SP）
   ========================================================= */
.news-intro {
  padding: 0 16px;
}

.news-title {
  margin-top: 40px;
  color: #5b534d;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-align: center;
}

.news-lead {
  margin-top: 44px;
  font-size: var(--main-text);
  line-height: 2;
}

/* ---------- セクションの見出し（アイコン＋英字＋日本語、下に線） ---------- */
.news-section {
  margin-top: 40px;
}

.news-pickup {
  margin-top: 50px;
}

.news-section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 0 10px 22px;
  border-bottom: 2px solid #7f9f83;
}

.news-section-head-pickup {
  gap: 30px;
  padding-left: 22px;
  border-bottom-color: #fd7f7f;
}

.news-section-icon {
  flex-shrink: 0;
  width: 34px;
}

.news-section-head-pickup .news-section-icon {
  width: 27px;
}

.news-section-ttl {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.news-section-en {
  color: #6c8a70;
  font-family: "Inter", sans-serif;
  font-size: var(--main-text);
  font-weight: 600;
  line-height: 1.4;
}

.news-section-head-pickup .news-section-en {
  color: #fd7f7f;
}

.news-section-ja {
  color: #5b534d;
  font-size: var(--sub-heading);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- 最新のお知らせ（SP：白い帯が画面幅いっぱい） ---------- */
.news-topic-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
}

.news-topic-link {
  position: relative;
  display: block;
  padding: 18px 76px 20px 27px;
  background-color: #fff;
  color: #5b534d;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.news-topic-link:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.news-topic-meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: "Inter", sans-serif;
  font-size: var(--main-text);
  line-height: 1.4;
}

.news-topic-date {
  color: #6c8a70;
  font-weight: 500;
}

/* 新着ラベル */
.news-topic-new {
  color: #fd7f7f;
  font-weight: bold;
  font-style: italic;
}

.news-topic-title {
  margin-top: 10px;
  font-size: var(--main-text);
  line-height: 1.45;
}

/* 右の矢印（→）… 横線＋右上・右下の斜め線 */
.news-topic-arrow {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 20px;
  height: 12px;
  margin-top: 4px;
  transition: right 0.3s;
}

/* 矢印の横線 */
.news-topic-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 1.5px;
  background-color: #5b534d;
  transform: translateY(-50%);
}

/* 矢印の先端（上下の斜め線をボーダーで描く） */
.news-topic-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #5b534d;
  border-right: 1.5px solid #5b534d;
  transform: translateY(-50%) rotate(45deg);
}

.news-topic-link:hover .news-topic-arrow {
  right: 34px;
}

/* リンクなしのお知らせ（div）… 右の矢印の分の余白をなくし、ホバーで影を変えない */
.news-topic-nolink {
  padding-right: 27px;
}

.news-topic-nolink:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* PDFアイコン */
.news-topic-pdf-icon {
  position: absolute;
  top: 50%;
  right: 34px;
  width: 26px;
  margin-top: -13px;
  color: #6b5f58;
  line-height: 0;
}

/* ---------- ピックアップのカード（トップのインタビューカードと同じ作り） ---------- */
.news-pickup-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 40px 0 0;
  padding: 0 27px;
}

.news-pickup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 43px 21px 33px;
  border: 1px solid #8a7f78;
  border-radius: 4px;
  background-color: #fef5f2;
  color: #5b534d;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s;
}

.news-pickup-card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* 左上のラベル（カードの上端に付ける） */
.news-pickup-tag {
  position: absolute;
  top: -1px;
  left: 46px;
  padding: 3px 10px;
  background-color: #fd7f7f;
  color: #fff;
  font-size: var(--main-text);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.news-pickup-img {
  aspect-ratio: 293 / 220;
  object-fit: cover;
}

/* 本文エリア：タイトルは3行分の高さで固定し、MOREボタンの位置を全カードでそろえる */
.news-pickup-body {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}

/* タイトル：最大3行（4行目以降は「…」で省略）、短くても3行分の高さを確保 */
.news-pickup-ttl {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  height: calc(1.6em * 3);
  overflow: hidden;
  font-family: "Noto Serif JP", serif;
  font-size: var(--main-text);
  line-height: 1.6;
  letter-spacing: 0.04em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* MORE ＋ 四角の中の「↗」 */
.news-pickup-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  color: #c96e86;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--main-text) - 2px);
  /* SP 14px／PC 15px */
  font-weight: 600;
}

.news-pickup-more-icon {
  position: relative;
  display: block;
  width: 41px;
  height: 41px;
  border: 1px solid #8a7f78;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  transition: background-color 0.3s;
}

/* 「↗」：斜めの線＋右上の角 */
.news-pickup-more-icon::before,
.news-pickup-more-icon::after {
  content: "";
  position: absolute;
  transition: translate 0.3s, border-color 0.3s, background-color 0.3s;
}

.news-pickup-more-icon::before {
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background-color: #5b534d;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.news-pickup-more-icon::after {
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #5b534d;
  border-right: 1.5px solid #5b534d;
}

.news-pickup-card:hover .news-pickup-more-icon {
  background-color: #c96e86;
}

.news-pickup-card:hover .news-pickup-more-icon::before {
  background-color: #fff;
  translate: 2px -2px;
}

.news-pickup-card:hover .news-pickup-more-icon::after {
  border-color: #fff;
  translate: 2px -2px;
}

/* =========================================================
   記事ページ（SP）… recruit.css の上書き
   ========================================================= */
.news-article {
  padding-bottom: 90px;
}

/* 帯の見出し：番号なし、英字＋日本語を左に */
.news-article .recruit-section-head {
  margin-top: 40px;
}

.news-article .recruit-section-inner {
  padding: 0 15px;
}

.news-article .recruit-section-en {
  font-size: calc(var(--main-text) - 3px);
  /* SP 13px／PC 14px */
}

/* 記事タイトル（明朝） */
.news-article .recruit-pickup-title,
.news-article .recruit-bonus-title,
.news-article .recruit-tour-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}

/* 矢印つきのボタン（園の情報をみる・職場見学会 申し込み・よくある質問）
   recruit.css のSPは矢印なしなので、枠の外の長い矢印を出す（矢印の分だけ左に寄せて中央に見せる） */
.more-btn.recruit-btn.news-btn-arrow {
  margin-right: 24px;
}

.more-btn.recruit-btn.news-btn-arrow::before,
.more-btn.recruit-btn.news-btn-arrow::after {
  display: block;
  background-color: #6b5f58;
}

/* ---------- 01 採用イベント：タイトル → 写真 → 文章 → 歓迎 の順に並べ替え ---------- */
.news-article .recruit-pickup {
  display: flex;
  flex-direction: column;
}

.news-article .recruit-pickup-text {
  display: contents;
}

.news-article .recruit-pickup-title {
  order: 1;
  margin-top: 0;
}

.news-article .recruit-pickup-date {
  font-size: var(--sub-heading);
}

.news-article .recruit-pickup-img01 {
  order: 2;
  margin-top: 36px;
}

.news-article .recruit-pickup-lead {
  order: 3;
  margin-top: 30px;
  font-size: var(--main-text);
}

.news-article .recruit-welcome {
  order: 4;
}

.news-article .recruit-pickup-img02 {
  order: 5;
}

/* ---------- 受付終了：見出しの＋で開閉（details／summary） ---------- */
.recruit-status-summary {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
}

.recruit-status-summary::-webkit-details-marker {
  display: none;
}

/* ＋（開くと −） */
.recruit-status-summary::before,
.recruit-status-summary::after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  right: 34px;
  width: 22px;
  height: 2px;
  background-color: #6b5f58;
  transition: transform 0.3s;
}

.recruit-status-summary::after {
  transform: rotate(90deg);
}

.recruit-status-closed[open] .recruit-status-summary::after {
  transform: rotate(0deg);
}

/* 受付終了のカードはボタンなし（注意書きだけ） */
.news-article .recruit-event-card-closed .recruit-event-card-btn-closed {
  display: none;
}

.news-article .recruit-event-card-closed .recruit-event-card-notes {
  align-self: flex-start;
  margin-top: 0;
}

/* ---------- 02 入社お祝い金：タイトル → 写真 → 文章 の順に並べ替え ---------- */
.news-article .recruit-bonus .recruit-section-head,
.news-article .recruit-tour .recruit-section-head {
  margin-top: 40px;
}

.news-article .recruit-bonus .recruit-inner {
  padding-top: 38px;
}

.news-article .recruit-bonus-intro {
  display: flex;
  flex-direction: column;
}

.news-article .recruit-bonus-text {
  display: contents;
}

.news-article .recruit-bonus-title {
  order: 1;
  color: #5b534d;
  font-size: var(--middle-heading);
  line-height: 1.5;
}

.recruit-bonus-title-em {
  color: #f49931;
}

.news-article .recruit-bonus-img {
  order: 2;
  margin-top: 36px;
  aspect-ratio: 390 / 293;
  box-shadow: none;
}

.news-article .recruit-bonus-lead {
  order: 3;
  margin-top: 36px;
}

/* ---------- 03 職場見学会 ---------- */
.news-article .recruit-tour .recruit-inner {
  padding-top: 38px;
}

.news-article .recruit-tour-title {
  padding-bottom: 0;
  color: #5b534d;
  font-size: var(--middle-heading);
  line-height: 1.5;
}

/* SPは見出し下の短い線なし */
.news-article .recruit-tour-title::after {
  content: none;
}

.recruit-tour-title-em {
  color: #7f9f83;
}

.recruit-tour-main-img {
  width: calc(100% + 32px);
  max-width: none;
  margin: 36px -16px 0;
  aspect-ratio: 390 / 293;
  object-fit: cover;
}

.news-article .recruit-tour-quote {
  margin-top: 36px;
  font-family: inherit;
  font-size: var(--main-text);
  line-height: 1.6;
}

.news-article .recruit-tour-imgs {
  margin-top: 46px;
}

.news-article .recruit-tour-btns {
  margin-top: 50px;
}

/* =========================================================
   PC（1024px〜）  ※一覧はカンプ w1440 基準（中身の幅 1142px）
   ========================================================= */
@media screen and (min-width: 1024px) {

  /* PCはピンクの帯なし */
  .news,
  .news-article {
    padding-bottom: 120px;
    border-bottom: none;
  }

  /* ---------- パンくず（contact.css／recruit.css と同じ） ---------- */
  .breadcrumb {
    display: block;
    width: min(1209px, 100% - 80px);
    margin: 0 auto;
    padding: 10px 0 0 0;
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-size: var(--breadcrumb-text);
    list-style: none;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    margin: 0 10px;
  }

  .breadcrumb-link {
    color: #5b534d;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  /* ---------- 英字ラベル＋下線 ---------- */
  .news-head {
    width: min(1142px, 100% - 80px);
    margin: 0 auto;
    padding: 30px 0 0;
  }

  .news-label {
    padding-bottom: 16px;
    border-bottom-color: #cfc4bb;
  }

  .news-back {
    margin-top: 110px;
  }

  /* ---------- 一覧：見出し・リード ---------- */
  .news-intro {
    padding: 0 40px;
    text-align: center;
  }

  .news-title {
    margin-top: 72px;
  }

  .news-lead {
    margin-top: 34px;
    line-height: 1.9;
  }

  /* ---------- 一覧：セクション（中身の幅 1142px） ---------- */
  .news-section {
    width: min(1142px, 100% - 80px);
    margin: 90px auto 0;
  }

  .news-pickup {
    margin-top: 110px;
  }

  .news-section-head {
    gap: 40px;
    padding: 0 0 12px 18px;
  }

  .news-section-head-pickup {
    gap: 46px;
  }

  .news-section-en {
    font-size: calc(var(--main-text) - 3px);
    /* 14px */
  }

  .news-section-ja {
    font-size: var(--main-text);
  }

  /* 最新のお知らせ：白いカード（幅 963px）を中央に */
  .news-topic-list {
    gap: 20px;
    max-width: 963px;
    margin: 40px auto 0;
  }

  /* 左：NEW と日付（縦に並べる）／中央：タイトル／右：矢印 */
  .news-topic-link {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    align-items: center;
    min-height: 91px;
    padding: 14px 90px 14px 38px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  }

  .news-topic-meta {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2px;
    /* font-size: calc(var(--main-text) - 2px); */
    /* 15px */
  }

  .news-topic-new {
    /* font-size: calc(var(--main-text) - 4px); */
    /* 13px */
  }

  .news-topic-title {
    margin-top: 0;
    /* font-size: calc(var(--main-text) - 2px); */
  }

  .news-topic-arrow {
    margin-top: 0;
    transform: translateY(-50%);
  }

  .news-topic-pdf-icon {
    right: 38px;
  }

  .news-topic-nolink {
    padding-right: 38px;
  }

  .news-topic-nolink:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  }

  /* ピックアップ：3列 */
  .news-pickup-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 329px));
    justify-content: center;
    gap: 36px;
    margin-top: 76px;
    padding: 0;
  }

  .news-pickup-card {
    padding: 40px 20px 24px;
  }

  .news-pickup-tag {
    left: 40px;
    font-size: calc(var(--main-text) - 4px);
    /* 13px */
  }

  .news-pickup-img {
    aspect-ratio: 289 / 214;
  }

  .news-pickup-body {
    margin-top: 20px;
  }

  .news-pickup-ttl {
    font-size: calc(var(--main-text) - 2px);
    /* 15px */
  }

  .news-pickup-more {
    font-size: calc(var(--main-text) - 4px);
    /* 13px */
  }

  .news-pickup-more-icon {
    width: 36px;
    height: 36px;
  }

  .news-pickup-more-icon::after {
    top: 11px;
    right: 11px;
  }

  /* ---------- 記事ページ：PCは元の採用情報ページのレイアウト（recruit.css）に戻す ---------- */
  .news-article .recruit-section-head {
    margin-top: 40px;
  }

  .news-article .recruit-section-inner {
    padding: 0;
  }

  .news-article .recruit-section-en {
    font-size: var(--main-text);
  }

  .more-btn.recruit-btn.news-btn-arrow {
    margin-right: 0;
  }

  .news-article .recruit-pickup {
    display: grid;
  }

  .news-article .recruit-pickup-text {
    display: block;
  }

  .news-article .recruit-pickup-img01 {
    margin-top: 0;
  }

  .news-article .recruit-pickup-lead {
    margin-top: 34px;
    font-size: var(--main-text);
  }

  .news-article .recruit-bonus .recruit-inner,
  .news-article .recruit-tour .recruit-inner {
    padding-top: 80px;
  }

  .news-article .recruit-bonus-intro {
    display: grid;
  }

  .news-article .recruit-bonus-text {
    display: block;
  }

  .news-article .recruit-bonus-title {
    font-size: var(--main-heading);
  }

  .news-article .recruit-bonus-img {
    margin-top: 0;
    aspect-ratio: 606 / 352;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  .news-article .recruit-bonus-lead {
    margin-top: 40px;
  }

  .news-article .recruit-tour-title {
    padding-bottom: 45px;
    font-size: var(--main-heading);
  }

  .news-article .recruit-tour-title::after {
    content: "";
  }

  .news-article .recruit-tour-quote {
    margin-top: 67px;
    font-size: var(--sub-heading);
    line-height: 1.85;
  }

  .news-article .recruit-tour-imgs {
    margin-top: 72px;
  }

  .news-article .recruit-tour-btns {
    margin-top: 60px;
  }

  /* 受付終了の＋は白（PCの見出しはこげ茶の帯） */
  .recruit-status-summary::before,
  .recruit-status-summary::after {
    top: calc(50% - 1px);
    right: 40px;
    background-color: #fff;
  }

}