@charset "UTF-8";
:root {
  --color-white: #fff;
  --color-txt: #1e2855;
  --color-accent: #1e78eb;
  --color-accent02: #5e9cf8;
  --color-accent03: #2b7ade;
  --color-gray: #aaa;
  --color-gray02: #c8c8c8;
  --color-gray03: #f6f6f6;
  --color-consulting: #5e9cf8;
  --color-bg: #f4f3ef;
  --color-yellow: #e2f174;
  --color-navy: #47505f;
  --color-dark-navy: #1e2855;
  --color-beige: #f4f3ef;
  --color-red: #e15555;
}

/* =======================================================
共通
======================================================= */
@media screen and (min-width: 769px) {
  /* Figma お知らせ 269:5578：英字見出しは上220・左110（1220pxの列） */
  .l-lower-mv {
    padding: 13.75rem 0 1.875rem;
  }
}
@media screen and (min-width: 769px) {
  .l-lower-mv .l-inner {
    width: 76.25rem;
  }
}

.p-archive {
  padding: 5.1875rem 0 11.25rem;
}
@media screen and (min-width: 769px) {
  /* Figma 269:5580(見出し下331)→269:5583(パネル391)の間隔60px。
     .l-lower-mvのpadding-bottom30pxと合わせて60pxにする（既存83pxは見出し帯確定分とは別の値） */
  .p-archive {
    padding-top: 1.875rem;
    padding-bottom: 9.375rem; /* Figma 269:5578：パネル下端1111→CTA上端1261。 */
  }
}
@media screen and (max-width: 768px) {
  /* Figma 269:6259(見出し下232)→269:6261(パネル272)の間隔40px。.l-lower-mvの下余白18pxと合わせる */
  .p-archive {
    padding: 1.375rem 0 0; /* SPは灰色パネル直下にCTAが続く。 */
  }
}
@media screen and (min-width: 769px) {
  /* Figma 269:5583：灰色パネル幅は共通.l-inner既定の76.25rem(1220px)と同じ。
     座標合わせで62.5remの上書きを外す（269:5584カード列1060pxはp-news__listのpaddingで作る） */
  .p-archive .l-inner {
    width: 76.25rem;
  }
}

/* =======================================================
news-archive
======================================================= */
.p-news__articles {
  margin-bottom: 6.25rem;
}
@media screen and (max-width: 768px) {
  .p-news__articles {
    margin-bottom: 2.5rem;
  }
}

/* 灰色パネル（実装メモ539:5611 ②③④。クリックでモーダル表示）
   B17: 薄灰色の面に白い角丸カードを並べる（Figma 269:5583／269:5584）。
   座標合わせ：パネルはカード列＋前/次ページまで内包する（Figma 269:5724が291:5583の内側にある）ため、
   背景・パディングはp-news__panel（カード列+pagenaviの外枠）に持たせ、p-news__listはグリッドだけにする */
.p-news__panel {
  padding: 3.75rem 5rem 5rem; /* Figma 269:5583→269:5584：左右の内側余白は80px（5rem） */
  margin-bottom: 0;
  background: var(--color-bg);
  border-radius: 1.875rem;
}
.p-news__list {
  display: grid;
  gap: 1.25rem;
}
/* Figma 269:5584→269:5724：カード列とpagenaviの間は50px */
.p-news__panel > .p-archive__pagenavi-wrapper {
  margin-top: 3.125rem;
}
@media screen and (max-width: 768px) {
  .p-news__panel {
    position: relative;
    z-index: 0;
    /* Figma 269:6261：背景は画面幅いっぱいにbleedするだけで、中身の左右の余白は.l-inner側の25pxのみ（二重に取らない） */
    padding: 2.5rem 0 5rem; /* Figma 269:6261：パネル下端は前/次ページから80px */
    margin-bottom: 0;
    background: none;
  }
  .p-news__list {
    gap: 0.75rem;
  }
  /* Figma 269:6276→269:6262：カード列とpagenaviの間は40px */
  .p-news__panel > .p-archive__pagenavi-wrapper {
    margin-top: 2.5rem;
  }
  .p-news__panel .p-archive__pagenavi.--prev::before {
    width: 2.25rem;
    height: 2.25rem;
  }
  /* SPは画面幅いっぱいの灰色パネル（Figma 269:6261・full-bleed） */
  .p-news__panel::before {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: 100%;
    content: "";
    background: var(--color-bg);
    border-radius: 0.9375rem 0.9375rem 0 0;
    transform: translateX(-50%);
  }
}
.p-news__card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.25rem 3.125rem 1.25rem 2.5rem; /* Figma実測：カード高150px＝アイコン110px＋上下20pxずつ（269:5583） */
  text-align: left;
  cursor: pointer;
  background: var(--color-white);
  border: 0;
  border-radius: 0.9375rem;
}
@media screen and (max-width: 768px) {
  .p-news__card {
    position: relative;
    padding: 1rem 0.625rem;
    border-radius: 0.625rem;
  }
}
.p-news__card-media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 10.625rem;
  height: 6.875rem;
  margin-right: 3.125rem;
  overflow: hidden;
  border-radius: 0.625rem;
}
.p-news__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-news__card-media.--noimg {
  background: var(--color-navy);
}
.p-news__card-media.--noimg img {
  width: 3.125rem;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .p-news__card-media {
    width: 7.875rem;
    height: 6rem;
    margin-right: 0.75rem;
    border-radius: 0.3125rem;
  }
  .p-news__card-media.--noimg img {
    width: 3.125rem;
  }
}
.p-news__card-body {
  display: grid;
  flex: 0 1 40rem;
  align-self: flex-start;
  gap: 0.625rem;
  min-width: 0;
  padding-top: 1.875rem;
}
@media screen and (max-width: 768px) {
  .p-news__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: stretch;
    gap: 0.25rem;
    padding-top: 0.375rem;
  }
}
.p-news__card-date {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-gray);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .p-news__card-date {
    font-size: 0.75rem;
    line-height: calc(14/12);
  }
}
.p-news__card-ttl {
  font-size: 1rem;
  line-height: 1.875;
  color: var(--color-txt);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .p-news__card-ttl {
    font-size: 0.875rem;
    line-height: calc(24/14);
    letter-spacing: 0;
  }
}
.p-news__card-icon {
  position: relative;
  flex: none;
  width: 3.125rem;
  height: 3.125rem;
  margin-left: auto;
  border: 0.0625rem solid var(--color-gray02);
  border-radius: 50%;
}
.p-news__card-icon::before,
.p-news__card-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: var(--color-txt);
  transform: translate(-50%, -50%);
}
.p-news__card-icon::before {
  width: 1.125rem;
  height: 0.0625rem;
}
.p-news__card-icon::after {
  width: 0.0625rem;
  height: 1.125rem;
}
@media screen and (max-width: 768px) {
  .p-news__card-icon {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0;
  }
  .p-news__card-icon::before {
    width: 0.625rem;
  }
  .p-news__card-icon::after {
    height: 0.625rem;
  }
}

/* モーダル本文（外枠の.p-document__modal-wrapper等はstyle.css共通部品を再利用）
   B17: PCモーダルは画面中央の角丸の白い面にする（Figma 269:6247。共通部品は上端寄り・角丸なしなので
   .p-news__modal-wrapper／.p-news__modalという2点目のクラス名で絞って上書きする） */
.p-news__modal-wrapper.--js-modal-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* 10/14 Astra監査02：画面より高い時に上端（閉じるボタン）が切れないよう、中央寄せは margin:auto で行う */
.p-news__modal {
  margin: auto;
  border-radius: 0.9375rem;
}
@media screen and (max-width: 768px) {
  .p-news__modal {
    border-radius: 0.625rem;
  }
}
.p-news__modal-img-wrapper {
  margin-bottom: 1.875rem;
  overflow: hidden;
  border-radius: 0.625rem;
}
.p-news__modal-img-wrapper img {
  width: 100%;
  height: auto;
}
.p-news__modal-date {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  color: var(--color-gray);
  letter-spacing: 0.05em;
}
.p-news__modal-ttl {
  margin-bottom: 1.875rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-txt);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .p-news__modal-ttl {
    font-size: 1.25rem;
  }
}
.p-news__modal-body {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-txt);
}
@media screen and (max-width: 768px) {
  .p-news__modal-body {
    font-size: 0.875rem;
  }
}
/* お知らせ個別（single-news.php・10/14 Astra監査01） */
.p-news-single__article {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3.75rem 0 7.5rem;
}
.p-news-single__ttl {
  font-weight: 500;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.p-news-single__back {
  margin-top: 3.75rem;
  text-align: center;
}
.p-news-single__back a {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  border: 1px solid var(--color-navy);
  border-radius: 100vmax;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--color-navy);
}
.p-news__modal-body p + p {
  margin-top: 1em;
}
@media screen and (max-width: 768px) {
  .p-news-single__article {
    padding: 2.5rem 0 5rem;
  }
}
.p-news__modal-body a { color: #1e78eb; text-decoration: underline; text-underline-offset: 0.2em; }
