/* ============================================================
   レスポンシブ方針（PC / SP の2パターンのみ）
   ・SP : 600px以下（@media (max-width: 600px)）。375pxを基準に、600pxまで自然に拡大する。
          背景・写真のカードは画面幅いっぱい、文字・ボタン・読み物には上限（max-width / min() / --sp）。
   ・PC : 600px超（@media not all and (max-width: 600px) ＝ SPの補集合。境目に隙間なし）。
          body の最小幅は1200px。1200px未満では縮小・再配置せず、横スクロールで表示する。
          1200px以上は画面幅に応じて広がる（本文・カード等は各 max-width を維持）。
   ・--vw : PCでは max(1vw, 12px)（1200px未満でvw/clampの値が縮まないようにする下限）。
            SPでは素の1vw。PC側のvw指定は calc(N * var(--vw)) で書く。
   ・--sp : SPの寸法用。375pxで1px、375pxを超えると比例して拡大（1.25倍で頭打ち）。
   ・SPの余白変数は clamp() で 375px=20px/48px → 600px=28px/64px。
============================================================ */

/* ============================================================
   Variables
============================================================ */
:root {
  --c-orange: #eb6148;
  --c-black: #000000;
  --c-text: #353535;
  --c-btn-yellow: #ffeb85;
  --c-btn-coral: #fb765e;
  --c-white: #ffffff;
  --c-bg-gray: #fafbfe;
  --c-pink: #ffcec5;
  --c-pink-soft: #fef1ed;
  --c-blue-gray: #e4ebff;
  --c-green: #3e9e83;
  --c-dash: #e5dfd2;
  --c-yellow: #ffe45e;

  --font-base: 'Zen Maru Gothic', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-accent: 'Yomogi', 'Zen Maru Gothic', cursive;
  --font-weight-base: 500;

  --container-pad: 40px;

  --gap-section: 100px;
  --vw: 1vw;
}

@media not all and (max-width: 600px) {
  :root { --vw: max(1vw, 12px); }
}
@media (max-width: 600px) {
  :root {
    --container-pad: clamp(20px, 5.3333vw, 28px);
    --gap-section: clamp(48px, 12.8vw, 64px);
    /* 375pxで1px、375pxを超えると比例して拡大（1.25倍で頭打ち）。SP新デザインの寸法に使用 */
    --sp: min(0.26667vw, 1.25px);
  }
}

/* ============================================================
   Reset / Base
============================================================ */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--font-weight-base);
  color: var(--c-text);
  letter-spacing: 0.15em;
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
/* PC(600px超)：レイアウトは最小幅1200pxを下回らない（それより狭い画面はページ全体が横スクロール）。
   ここで overflow-x を指定してはいけない：body の overflow はビューポートに伝播し、
   hidden/clip だと横スクロールができなくなる。
   SP(600px以下)：横はみ出しを隠す。 */
@media not all and (max-width: 600px) {
  body { min-width: 1200px; }
}
@media (max-width: 600px) {
  body { overflow-x: hidden; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; }
p { margin: 0; }
button { font-family: inherit; }
hr.rule { border: none; margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-black);
  color: var(--c-white);
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }

:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: 800px;
}

.only-mobile { display: none; }

/* ============================================================
   Buttons / Icons
============================================================ */
.icon-arrow {
  width: 18px;
  height: 8px;
  color: var(--c-text);
  flex-shrink: 0;
  transition: color .4s ease;
}
.icon-arrow--white { color: var(--c-white); }
.icon-arrow--lg { width: 24px; height: 8px; }
.icon-arrow circle { transition: transform .6s ease; }
.btn:hover .icon-arrow circle,
.news-more:hover .icon-arrow circle,
.news-card__btn:hover .icon-arrow circle { transform: translateX(12px); }
.btn:hover .icon-arrow--lg circle { transform: translateX(16px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 26px;
  border: 2px solid var(--c-black);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  color: var(--c-text);
  transition: opacity .2s ease;
}
.btn:hover { opacity: .72; }
.btn-outline,
.btn-white {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, opacity .2s ease;
}
.btn-outline:hover,
.btn-white:hover {
  opacity: 1;
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}
.btn-outline:hover .icon-arrow,
.btn-white:hover .icon-arrow { color: var(--c-white); }
.btn-solid {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
  transition: background-color .4s ease, border-color .4s ease, opacity .2s ease;
}
.btn-solid:hover {
  opacity: 1;
  background-color: var(--c-orange);
  border-color: var(--c-orange);
}
.btn-white {
  background: var(--c-white);
  border-radius: 70px;
  padding: 27px 60px;
  font-size: 16px;
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

/* ============================================================
   Header
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--c-white);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, calc(2 * var(--vw)), 20px);
  padding-block: 30px;
}
/* ヘッダー：1440pxで実寸になり、狭くなると比例して縮むよう vw+clamp で指定
   （文字16px/文字間隔10%、ナビ間隔20px、ボタンは高さ50px・左右余白30px・矢印20px・ピル形状・枠線なし）。 */
.site-logo a {
  display: block;
  font-weight: 700;
  font-size: clamp(12px, calc(1.1111 * var(--vw)), 16px);
  letter-spacing: .15em;
  color: var(--c-black);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}
.gnav {
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(1.3889 * var(--vw)), 20px);
}
.gnav-list {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(1.3889 * var(--vw)), 20px);
  list-style: none;
}
.gnav-list a {
  font-weight: 700;
  font-size: clamp(12px, calc(1.1111 * var(--vw)), 16px);
  letter-spacing: .15em;
  color: var(--c-black);
  text-decoration: none;
  white-space: nowrap;
  transition: color .4s ease;
}
.gnav-list a:hover { color: var(--c-orange); }
.gnav-buttons { display: flex; gap: clamp(4px, calc(.6944 * var(--vw)), 10px); }
.gnav-buttons .btn {
  padding: clamp(9px, calc(.9028 * var(--vw)), 13px) clamp(12px, calc(2.0833 * var(--vw)), 30px);
  font-size: clamp(12px, calc(1.1111 * var(--vw)), 16px);
  letter-spacing: .1em;
  line-height: 1.5;
  gap: clamp(6px, calc(.6944 * var(--vw)), 10px);
  border: none;
  border-radius: 9999px;
  color: var(--c-black);
}
.gnav-buttons .btn-outline { background: var(--c-btn-yellow); }
.gnav-buttons .btn-solid { background: var(--c-btn-coral); color: var(--c-white); }
.gnav-buttons .btn-solid { transition: background-color .4s ease, border-color .4s ease, color .4s ease, opacity .2s ease; }
/* hover：.btn-white と同じ（背景オレンジ・文字と矢印が白）。枠線はこのボタンには無いので透明のまま */
.gnav-buttons .btn-outline:hover,
.gnav-buttons .btn-solid:hover { opacity: 1; border-color: transparent; background-color: var(--c-orange); color: var(--c-white); }
.gnav-buttons .icon-arrow { width: clamp(14px, calc(1.3889 * var(--vw)), 20px); height: auto; aspect-ratio: 20 / 8; }
.gnav-buttons .btn-outline .icon-arrow { color: var(--c-black); }
.gnav-buttons .btn-outline:hover .icon-arrow,
.gnav-buttons .btn-solid:hover .icon-arrow { color: var(--c-white); }

.gnav-desktop { display: flex; align-items: center; gap: clamp(16px, calc(3 * var(--vw)), 40px); }
.gnav-mobile { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 210;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-black);
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 600px) {
  .only-mobile { display: inline; }
  .hamburger { display: flex; }
  .gnav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100vh;
    overflow-y: auto;
    background: var(--c-white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 90px 24px 30px;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,.08);
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav-desktop { display: none; }
  .gnav-mobile { display: flex; flex-direction: column; gap: 16px; }
}

/* ============================================================
   Mobile nav drawer cards
============================================================ */
.gnav-mobile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gnav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: url('../img/about-hero-bg.jpg') center / cover no-repeat;
  border-radius: 20px;
  padding: 20px 10px;
  text-decoration: none;
  color: var(--c-text);
  min-height: 160px;
}
.gnav-card__icon { display: flex; align-items: center; justify-content: center; height: 72px; }
.gnav-card__icon img { max-height: 100%; max-width: 100%; width: auto; display: block; }
.gnav-card__icon--mirror { transform: scaleX(-1); }
.gnav-card__icon--tilt { transform: rotate(5deg); }
.gnav-card__icon--pencil { position: relative; width: 64px; height: 50px; }
.gnav-card__underline { position: absolute; left: 0; bottom: 4px; width: 60px; }
.gnav-card__label { font-weight: 700; font-size: 16px; letter-spacing: 1.6px; text-align: center; }
.gnav-card--wide { min-height: 140px; }
.gnav-mobile__contact { width: 100%; justify-content: center; letter-spacing: .15em; font-weight: 500; }
.gnav-mobile__privacy {
  align-self: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .7px;
  text-decoration: underline;
  color: var(--c-text);
}

/* ============================================================
   Hero
============================================================ */
/* ヒーローは1枚の絵として全幅で拡縮する：.hero-frame__bg に縦横比を固定（PC 1360/640、SP 335/380）、
   他の要素は .hero-frame__content 内で % 指定の position:absolute（px下限・上限なし）。 */
.hero-frame {
  position: relative;
  border-radius: 40px;
  margin-bottom: 60px;
}
.hero-frame__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1360 / 640;
  object-fit: cover;
  border-radius: 40px;
}
.hero-frame__content {
  position: absolute;
  top: 0;
  bottom: 0;
  
}
.hero-frame__deco {
  position: absolute;
  right: 0%;
  top: 6.25%;
  width: auto;
  max-width: none;
  height: 121.81%;
  z-index: 2;
  pointer-events: none;
}
.hero-frame__copy {
  position: absolute;
  left: 0;
  bottom: -3.24%;
  width: 41.84%;
  margin: 0;
  z-index: 3;
  filter: drop-shadow(0 0 10px var(--c-white)) drop-shadow(0 0 10px var(--c-white));
}
.hero-frame__copy-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-frame__copy-vertical { display: none; }
/* PC：中身(イラスト・コピー)の領域は最大1120px×640pxで止め、背景が広がっても中央に据え置く。 */
@media not all and (max-width: 600px) {
  .hero-frame__content { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: min(82.3529%, 1120px); height: min(100%, 640px); }
}

@media (max-width: 600px) {
  /* SPの背景写真は専用の切り出し（hero-bg-sp.jpg：赤ちゃんの手を上へ持ち上げ、下のイラストの輪との重なりを減らしたもの） */
  .hero-frame picture { display: block; }
  .hero-frame__bg { aspect-ratio: 335 / 380; object-position: left center; }
  .hero-frame__content { left: 0; right: 0; }
  /* SP新デザイン：イラストの輪は幅の60.7%・左端34.1%（右寄り）・上端73.7%（枠の下に約98pxはみ出す）。
     縦書きコピーは左側（左端13.3%・上端9.2%・高さ54.4%）。 */
  .hero-frame__deco {
    display: block;
    left: 34.1%;
    right: auto;
    top: 73.7%;
    width: 60.7%;
    height: auto;
  }
  .hero-frame__copy {
    left: 13.3%;
    right: auto;
    top: 9.2%;
    bottom: auto;
    width: auto;
    max-width: none;
    height: 54.4%;
    margin: 0;
    filter: none;
  }
  .hero-frame__copy-img { display: none; }
  .hero-frame__copy-vertical {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  /* ヒーローのイラストは枠の下にはみ出す（高さ auto で幅に比例）。margin-bottom もそれに合わせて
       枠幅に対する%にして、新着情報パネルへの重なり量を常に一定にする
       （.news 側の margin-top は News セクションの SP ブロックで指定）。 */
  .hero-frame { margin-bottom: 11.9403%; z-index: 2; } /* はみ出したイラストが、下の新着情報パネルに隠れず手前に表示される */
}
@media (max-width: 600px) {
  .hero-frame, .hero-frame__bg { border-radius: 20px; }
}

/* ============================================================
   News
============================================================ */
.news { margin-top: var(--gap-section); }
.news-panel {
  background: var(--c-bg-gray);
  border-radius: 40px;
  padding: 100px 32px;
}
/* .news-side (A: art-direction — badge icon + rotated "新着情報" label + deco squiggle)
   is fluid-scaled via vw calibrated at the PC/SP reference viewports (1440/375),
   matching every other value already derived that way (.page-hero__title etc.),
   so it scales continuously with the canvas instead of using fixed px. */
.news-panel__inner {
  display: flex;
  gap: calc(2.9167 * var(--vw));
  align-items: flex-start;
  max-width: 1120px;
  margin-inline: auto;
}
.news-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(10.2778 * var(--vw));
}
/* PC：NEWSの吹き出し画像（左揃え、102x59の画像のうち絵は(2,2)から98x55）、見出し、飾りの順に縦に並べる。
   SPでは下の SP 用ブロックで別構成にする。 */
.news-side__bubble {
  display: block;
  align-self: flex-start;
  width: calc(7.0833 * var(--vw));
  height: auto;
  margin: calc(-0.1389 * var(--vw)) 0 calc(1.4375 * var(--vw)) calc(-0.1389 * var(--vw));
}
.news-side__label {
  display: flex;
  align-items: flex-start;
  gap: calc(0.7639 * var(--vw));
}
/* PCの .news-side__title は、文字サイズの下限(20px)と同じ比率で縮むように下限を設定。 */
.news-side__title {
  margin: 0;
  font-weight: 600;
  font-size: max(20px, calc(2.2222 * var(--vw)));
  letter-spacing: 3.2px;
  line-height: 1.2;
  width: max(20px, calc(2.2222 * var(--vw)));
  text-align: center;
}
.news-side__deco { display: block; width: calc(7.5 * var(--vw)); height: auto; margin-top: calc(1.1111 * var(--vw)); }

.news-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 30px; margin-top: 0; }
.news-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 0;
  border-bottom: 2px solid var(--c-blue-gray);
}
.news-tabs { display: flex; align-items: center;  }
.news-tab {
  border: none;
  cursor: pointer;
  background: var(--c-blue-gray);
  color: var(--c-black);
  font-weight: 700;
  font-size: 14px;
  
  transition: background-color .4s ease, color .4s ease;
}
.news-tab.is-active,
.news-tab:hover { background: var(--c-text); color: var(--c-white); }
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  white-space: nowrap;
  color: var(--c-text);
  transition: color .4s ease;
}
.news-more:hover { color: var(--c-orange); }
.news-more:hover .icon-arrow { color: var(--c-orange); }
.news-more__circle {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--c-black);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  transition: border-color .4s ease;
}
.news-tabs-row .news-more__circle { border-color: var(--c-text); }
.news-more:hover .news-more__circle,
.news-tabs-row .news-more:hover .news-more__circle { border-color: var(--c-orange); }

.news-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.news-item {
  --news-dots: radial-gradient(circle at 1px 1px, #d0dcff 1px, transparent 1.3px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom: 2px solid transparent;
  background: var(--news-dots) left bottom / 10px 2px repeat-x;
  background-origin: border-box;
}
.news-item__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .news-item__row { gap: 10px; }
}
.news-item__meta { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .news-item__meta { gap: 20px; }
}
.news-item__date { font-weight: 900; font-size: 14px; letter-spacing: 2.8px; color: var(--c-black); }
.news-item__tag {
  border: 1px solid var(--c-dash);
  border-radius: 9999px;
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.news-item__text {
  flex: 1 1 300px;
  font-weight: 500;
  font-size: 16px;
  
  color: var(--c-black);
  text-decoration: none;
  transition: color .4s ease;
}
.news-item__text:hover { color: var(--c-orange); }
.news-empty { text-align: center; padding: 40px 0; color: #777; font-size: 15px; }

/* PC：新着情報パネルの寸法。
   タブ：文字14px/文字間隔0.15em/左右30px・間隔10px、非選択37px・選択45px（下端は下線に接する）、
   一覧：タイトル行間22px/文字間隔0.1em、項目の下余白18px（項目間隔80px）、タグは高さ22px、最後の項目にも点線あり。 */
@media not all and (max-width: 600px) {
  .news-tabs { gap: clamp(4px, calc(.6944 * var(--vw)), 10px); }
  .news-tab { letter-spacing: .15em; line-height: 1.2; padding: 10px clamp(12px, calc(2.0833 * var(--vw)), 30px); border-radius: 4px; white-space: nowrap; }
  .news-tab.is-active { padding: 14px clamp(12px, calc(2.0833 * var(--vw)), 30px); border-radius: 4px 4px 0 0; }
  .news-tabs-row .news-more { gap: 16px; }
  .news-item { padding-bottom: 18px; }
  .news-item:last-child { border-bottom: 2px solid transparent; padding-bottom: 18px; background: var(--news-dots) left bottom / 10px 2px repeat-x; background-origin: border-box; }
  .news-item__date { letter-spacing: 2.5px; }
  .news-item__tag { padding: 4px 20px; line-height: 1; letter-spacing: .9px; }
  .news-item__text { line-height: 1.375; letter-spacing: .1em; }
}

@media (max-width: 600px) {
  /* .news の上余白＝ヒーローのイラストとの重なりに合わせた、コンテナ幅に対する%。
       .news本体のルールより後方に書く必要があるためここに配置。 */
  .news { margin-top: calc((100% - 2 * var(--container-pad)) * 0.119403); }
  .news-panel {  border-radius: 20px; }
  .news-panel__inner {
    display: grid;
    
  }
  /* 新着情報の左列（吹き出し・縦書き見出し・飾り）。新SPデザインの寸法は下の「SP新デザイン」ブロックで指定。
       見出しは width と font-size を同じ比率（vw）で縮め、1文字ずつ縦に積む並びが崩れないようにする。 */
  .news-side {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    
  }
  .news-side__title { font-size: min(4.8vw, 22px); letter-spacing: 0.1em; width: min(4.6552vw, 21.3px); }
  .news-main { display: contents; }
  .news-tabs-row {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    gap: 20px;
    border-bottom: none;
    padding-bottom: 0;
  }
  .news-item__meta { width: 100%; justify-content: space-between; }
  .news-panel__inner::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    height: 2px;
    background: var(--c-blue-gray);
  }
  .news-list,
  .news-empty { grid-column: 1 / -1; grid-row: 3; }
  /* 新着情報タブはカテゴリごとに独立した [role="tabpanel"] で出し分けるため、
       グリッドアイテムである [role="tabpanel"] 自体にもフル幅指定が必要。 */
  [role="tabpanel"] { grid-column: 1 / -1; grid-row: 3; }
}

/* SP新デザイン（375px基準）：新着情報 */
@media (max-width: 600px) {
  /* パネル内の上余白＝デザイン40px。ヒーローとの重なり（.news の margin-top）は上のブロックで指定 */
  .news-panel { padding: 11.9403% 20px 40px; }
  .news-panel__inner {
    grid-template-columns: min(22.4vw, 105px) minmax(0, 1fr);
    column-gap: min(6.4vw, 30px); /* 左列とタブ列の間を狭めて、タブの左右の余白を確保する */
    row-gap: min(7.2vw, 34px);
  }
  .news-side { width: 100%; gap: 0; align-items: center; }
  .news-side__bubble { display: block; align-self: flex-start; width: min(17vw, 80px); margin: 0 0 min(2.3vw, 11px) -1px; }
  .news-side__label { gap: 0; }
  .news-side__deco { width: min(16vw, 75px); margin-top: min(3.2vw, 15px); }

  .news-tabs-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: start; margin-top: min(10.4vw, 49px); }
  .news-tabs {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(11 * var(--sp)) calc(10 * var(--sp));
    width: 100%;
    max-width: none;
  }
  .news-tab {
    display: flex; align-items: center; justify-content: center;
    height: calc(36 * var(--sp));
    padding: 0 calc(10 * var(--sp));
    font-size: max(14px, calc(12 * var(--sp)));
    white-space: nowrap;
    letter-spacing: .32em;
    line-height: 1.2;
    border-radius: 4px;
  }
  /* 「研修・イベント情報」はデザインでは1行（現行のSP用<br>はCSSで無効化。HTMLは変更しない） */
  .news-tab .only-mobile { display: none; }
  .news-tab:nth-child(1) { justify-self: start; padding-inline: calc(9.75 * var(--sp)); }
  /* 375px未満は、14pxのまま1行に収めるため左右の余白を詰め、320px前後ではさらに字間も詰める */
  @media (max-width: 374px) { .news-tab { padding-inline: 4px; } }
  @media (max-width: 359px) { .news-tab { letter-spacing: .05em; padding-inline: 2px; } }
  .news-tab:nth-child(n+2) { justify-self: stretch; }
  .news-tab:nth-child(2) { grid-column: 1 / -1; }
  .news-panel .news-more {
    grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 1;
    height: calc(36 * var(--sp));
    font-size: calc(12 * var(--sp));
    letter-spacing: .05em;
    gap: calc(7 * var(--sp));
  }
  .news-panel .news-more__circle { width: calc(25 * var(--sp)); height: calc(25 * var(--sp)); border-width: 1.5px; }
  .news-panel .news-more__circle .icon-arrow { width: calc(11.4 * var(--sp)); height: calc(4.5 * var(--sp)); }
  /* SPでは「一覧を見る」の「を見る」を表示しない（「一覧」だけ） */
  .news-tabs-row .news-more__label-pc { display: none; }

  .news-list { margin-top: calc(3 * var(--sp)); gap: calc(30 * var(--sp)); }
  .news-item { padding-bottom: calc(18 * var(--sp)); }
  .news-item__row { row-gap: calc(20 * var(--sp)); }
  /* 最後の記事にも点線（PCと同じ） */
  .news-item:last-child {
    padding-bottom: calc(18 * var(--sp));
    border-bottom: 2px solid transparent;
    background: var(--news-dots) left bottom / 10px 2px repeat-x;
    background-origin: border-box;
  }
  .news-item__tag { height: 22px; padding: 0 calc(18 * var(--sp)); font-size: 14px; line-height: 20px; }
  .news-item__text { font-size: 16px; letter-spacing: 3px; line-height: calc(26 * var(--sp)); text-align: justify; }
}

/* ============================================================
   Mission (街の風景)
============================================================ */
/* .mission__photo は縦横比固定のキャンバス（PC 1360/500.039、SP 335/420）。.mission__copy はその中で
   % 指定の position:absolute とし、写真の上端に重ねたまま全幅で拡縮する（PC/SPとも同じ重ね構成）。 */
.mission { margin-top: var(--gap-section); background: var(--c-white); position: relative;}
.mission__photo {
  position: relative;
  padding-inline: var(--container-pad);
  padding-top: 13.6111%;
  border-radius: 40px;
}
.mission__photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 1360 / 500.039;
  object-fit: cover;
  border-radius: 40px;
}
.mission__copy {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(var(--container-pad) + (100% - 2 * var(--container-pad)) * 0.088235);
  width: calc((100% - 2 * var(--container-pad)) * 0.5774);
  margin: 0;
}
.mission__copy img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px var(--c-white)) drop-shadow(0 0 8px var(--c-white));
}
.mission__copy .mission__copy-img--sp { display: none; }
@media (max-width: 600px) {
  .mission__photo, .mission__photo > img { border-radius: 20px; }
  .mission__photo { padding-top: 23.467%; }
  .mission__photo > img { aspect-ratio: 335 / 420; }
  .mission__copy .mission__copy-img { display: none; }
  .mission__copy .mission__copy-img--sp { display: block; }
  .mission__copy {
    top: 0;
    left: var(--container-pad);
    width: calc(100% - 2 * var(--container-pad));
  }
}

/* ============================================================
   Purpose / About business
============================================================ */
.purpose { margin-top: var(--gap-section); color: var(--c-black); }
.purpose__lead {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .8px;
  text-align: justify;
}
mark {
  background: var(--c-pink);
  color: inherit;
  padding: 0 4px;
  border-radius: 2px;
}
.purpose__lead mark {
  background: var(--c-pink-soft);
  font-weight: 700;
  border-radius: 4px;
}
.purpose__list { margin-top: 20px; font-size: 16px; line-height: 1.9; letter-spacing: .8px; }

.purpose-detail { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.rule--gray { display: block; width: 100%; height: 2px; background: var(--c-blue-gray); }
.rule--thin { height: 1px; }
.rule--yellow { display: block; width: 100%; height: 4px; background: var(--c-yellow); border-radius: 2px; margin-top: 12px; }
/* 見出しは枠線の上辺をまたぐ（枠線を白背景で途切れさせる） */
.purpose-detail__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 2px solid var(--c-blue-gray);
  border-radius: 20px;
}
.purpose-detail__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  background: var(--c-pink-soft);
  font-weight: 500;
  
  text-align: center;
}
@media (max-width: 600px) {
  .purpose-detail__badge {   font-size: 16px; box-shadow: 0 0 0 6px var(--c-white); }
}
.purpose-detail__text { font-size: 16px; line-height: 1.9; letter-spacing: .8px; text-align: justify; }
.purpose-detail__bullets { list-style: none; display: flex; flex-direction: column;   }
.purpose-detail__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .8px;
}
.purpose-detail__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
}
/* PC（SPは上のスタイルのまま）：本文は字間0.2em・行送り40px */
@media not all and (max-width: 600px) {
  .purpose__lead, .purpose-detail__text, .purpose-detail__bullets li {
    letter-spacing: 3px;
  }
  .purpose__lead, .purpose__list, .purpose-detail__text { line-height: 2.5; }
  /* マーカーは左へ10pxはみ出すだけで、文字の送りは変えない */
  .purpose__lead mark { padding: 3px 0 3px 10px; margin-left: -10px; }
  .purpose-detail__box { gap: 18px; padding: 60px 40px 57px; border-radius: 30px; }
  .purpose-detail__badge { top: -2px; padding: 3px 36px 3px 40px; font-size: 18px; line-height: 1.4; letter-spacing: 5px; box-shadow: 0 0 0 20px var(--c-white); }
  .purpose-detail__bullets { gap: 10px; margin-top: 0; }
}
/* 十分な幅があるときは、枠をテキスト列より左右62pxだけ外側へ広げる */
@media not all and (max-width: 600px) {
  .purpose .container--narrow { max-width: 1054px; }
  .purpose__lead, .purpose__list { padding-inline: 62px 57px; }
  .purpose-detail__box { padding-inline: 60px 55px; }
}

/* SP新デザイン（375px基準）：妊産婦等生活援助事業とは */
@media (max-width: 600px) {
  /* 導入文は字間3px。箇条書き前のリストは字間0.8pxのまま行送りだけ40px */
  .purpose__lead, .purpose__list { padding-inline: 20px; font-size: 16px; line-height: 40px; }
  .purpose__lead { letter-spacing: 3px; }
  .purpose__lead mark {
    padding: 3px 6px; margin-inline: -6px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .purpose-detail { margin-top: 43px; }
  .purpose-detail__box { padding: 40px 20px 40px; }
  .purpose-detail__badge {
    max-width: calc(100% - 8px);
    padding: 3px 10px;
    line-height: 21px;
  }
  .purpose-detail__text { letter-spacing: 3px; line-height: 40px; }
  .purpose-detail__bullets { gap: 14px; margin-top: 2px; }
  .purpose-detail__bullets li { letter-spacing: 3px; text-align: justify; }
  .purpose-detail__bullets li::before { top: 50%; transform: translateY(-50%); }
}

/* ============================================================
   Audience section
============================================================ */
.audience { margin-top: var(--gap-section); }
/* キャンバスは .hero-frame と同じ考え方。PCは1440px基準で左端から160px内側・右端いっぱいの非対称配置
   （margin-left/width を % で再現、aspect-ratio で高さを幅に連動、子要素は % の position:absolute）。
   SPは見出し左上・イラスト右下・右端いっぱいの別構成で、下の @media (max-width: 600px) で切り替える。 */
.audience__intro {
  position: relative;
  z-index: 2;
  padding-inline: 0;
  margin-left: 11.1111%;
  margin-right: 0;
  width: 88.8889%;
  aspect-ratio: 1280 / 353.169;
  margin-bottom: -4.8034%;
}
.audience__heading {
  position: absolute;
  left: 0;
  top: 25.2%;
  width: 33.75%;
  margin: 0;
}
.audience__title {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
}
.audience__photo {
  position: absolute;
  right: 0;
  top: 0;
  width: 58.984%;
  height: 100%;
}
.audience__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.audience-panel {
  position: relative;
  z-index: 1;
  color: var(--c-black);
  background: var(--c-bg-gray);
  border-radius: 40px;
  padding: 100px 32px 100px;
}
.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading--center { margin-bottom: 20px; }
.section-heading__title { font-weight: 700; font-size: 32px; letter-spacing: 3.2px; margin-bottom: 14px; }
/* 見出し画像は「3」の前後に各10pxの余白を含む幅(534px)。 */
.section-heading__title--big { display: block; position: relative; left: 50%; transform: translateX(-50%); margin: 0; width: min(103.89%, 534px); max-width: none; height: auto; }
.section-heading__en { display: inline-block; height: 16px; width: auto; margin: 0 auto 20px; }
.audience-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1126px;
  margin-inline: auto;
}
.audience-card {
  flex: 1 1 300px;
  max-width: 370px;
  background: var(--c-white);
  border-radius: 10px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.audience-card__icon img { width: 100px; height: 100px; object-fit: cover; }
.audience-card__title { text-align: center; font-weight: 700; font-size: 20px; letter-spacing: 5.6px; line-height: 1.7; margin: 0;}
.audience-card__text { font-weight: 500; font-size: 14px;   text-align: left; }
/* PC：英字見出しを日本語見出しの上に出し、本文の字間・行送りを広げる（SPは下のブロックのまま） */
@media not all and (max-width: 600px) {
  .audience-panel .section-heading { display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 77px; }
  .audience-panel .section-heading__en { display: block; height: 21px; margin: 3px 0 25px; }
  .audience-panel .section-heading__title { letter-spacing: 6px; margin-bottom: 0; }
  .audience-card { padding-inline: 20px; }
  .audience-card__text { line-height: 31px; letter-spacing: 1px; }
}

/* SPキャンバス：見出し左上、イラスト右下で画面右端に接する。PCの連続的な縮小ではなく別構成。 */
@media (max-width: 600px) {
  .audience__intro {
    margin-left: var(--container-pad);
    margin-right: 0;
    width: calc(100% - var(--container-pad));
    aspect-ratio: 355 / 237.993;
    margin-bottom: -15.46%;
  }
  .audience__heading { left: 0; top: 0; width: 60.85%; }
  .audience__photo { left: 16.9%; right: auto; top: 42.02%; width: 83.1%; height: 57.98%; }
}
@media (max-width: 600px) {
  /* SP：パネルの上パディングは写真との重なり量に連動（コンテナ幅の23.88%）、下は11.94%。
       .audience__intro のSP値と必ず一緒に変えること。 */
  .audience-panel { padding: 23.88% 20px 11.94%; border-radius: 20px; }
  /* SP：写真の下端から見出しまでの間隔。 */
  .audience-panel .section-heading { margin-top: 10.834%;  }
  /* SP：カード間は8px。 */
  .audience-cards { gap: min(2.1333vw, 12px); }
}

/* SP新デザイン（375px基準）：こんな課題はありませんか */
@media (max-width: 600px) {
  /* パネル上端から見出しまでは写真との重なり(.audience__intro)に連動するため据え置き。内部のみ新デザイン。 */
  .audience-panel .section-heading { display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 9.7288%; }
  .audience-panel .section-heading__title { margin-bottom: 0; font-size: 18px; letter-spacing: .18em; padding-left: .18em; line-height: calc(26 * var(--sp)); }
  .audience-panel .section-heading__en { display: block; height: calc(11 * var(--sp)); margin: 0 0 calc(14.3 * var(--sp)); }
  .audience-card { padding: calc(31 * var(--sp)) calc(23 * var(--sp)); border-radius: calc(8 * var(--sp)); gap: calc(15 * var(--sp)); }
  .audience-card__icon img { width: calc(80 * var(--sp)); height: calc(80 * var(--sp)); }
  .audience-card__title { font-size: 16px; letter-spacing: .28em; padding-left: .28em; line-height: calc(27 * var(--sp)); }
  .audience-card__text { font-size: max(14px, calc(11.6 * var(--sp))); line-height: calc(25 * var(--sp)); }
}

/* ============================================================
   Initiatives (3つの取り組み)
============================================================ */
.initiatives { margin-top: var(--gap-section); }
@media not all and (max-width: 600px) {
  .initiatives .section-heading__en { display: block; height: 16px; margin: 0 auto 33px; }
}

.torikumi { position: relative; margin-top: 40px; }
/* .torikumi__heading はイラスト群(.icon-cluster)をパネルの上に重ねるための枠。
   位置・大きさはPC/SPそれぞれ、下の「3つの取り組み」ブロックで指定する。 */
.torikumi__heading {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}
.icon-cluster { position: absolute; right: 0; top: 0; height: 100%; width: auto; }

.torikumi__panel {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  padding: 90px 32px 50px;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.torikumi__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.torikumi__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.torikumi__caption {
  margin: 0;
  color: var(--c-white);
  font-weight: 700;
  font-size: max(20px, calc(1.3889 * var(--vw)));
  line-height: 2;
  letter-spacing: 1.6px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .6);
  text-underline-offset: 8px;
}
/* 取り組み3の説明文は、PCとSPで改行位置が違うため、PC用/SP用の改行を別々に持つ。 */
.torikumi__caption-break--sp { display: none; }
.torikumi__title {
  margin: 0;
  color: var(--c-white);
  font-weight: 700;
  font-size: max(32px, calc(2.2222 * var(--vw)));
  line-height: 1.6;
  letter-spacing: 2px;
}

/* トップページ「3つの取り組み」パネルの色かぶせ（下に向かって濃くなる。PC/SP共通） */
.page-home .torikumi__panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-home .torikumi__panel--01::after { background: linear-gradient(to bottom, rgba(108, 193, 255, 0) 0%, rgba(108, 193, 255, .26) 30%, rgba(108, 193, 255, .42) 49%, rgba(108, 193, 255, .47) 66%, rgba(108, 193, 255, .62) 87%, rgba(108, 193, 255, .66) 100%); }
.page-home .torikumi__panel--02::after { background: linear-gradient(to bottom, rgba(190, 150, 122, 0) 0%, rgba(190, 150, 122, .03) 10%, rgba(190, 150, 122, .12) 29%, rgba(190, 150, 122, .2) 49%, rgba(190, 150, 122, .27) 66%, rgba(190, 150, 122, .42) 87%, rgba(190, 150, 122, .47) 100%); }
.page-home .torikumi__panel--03::after { background: linear-gradient(to bottom, rgba(62, 88, 28, 0) 0%, rgba(62, 88, 28, .03) 10%, rgba(62, 88, 28, .13) 29%, rgba(62, 88, 28, .25) 49%, rgba(62, 88, 28, .3) 66%, rgba(62, 88, 28, .34) 87%, rgba(62, 88, 28, .36) 100%); }

/* ============================================================
   トップページ「3つの取り組み」PC版
   英字見出し・タイトル・説明・ボタンをパネル内に集約し、イラストを左上へ。番号(01〜03)は非表示。
============================================================ */
@media not all and (max-width: 600px) {
  .page-home .torikumi { margin-top: 110px; }
  .page-home .torikumi:first-of-type { margin-top: 90px; }
  /* 見出し行はパネルに重ねる枠（0×0）として使い、イラストだけをパネル左上に置く */
  :is(.page-home, .page-about) .torikumi__heading { position: absolute; left: 0; top: 0; width: 0; height: 0; max-width: none; margin: 0; padding: 0; aspect-ratio: auto; }
  :is(.page-home, .page-about) .icon-cluster img { position: absolute; max-width: none; object-fit: fill; }
  /* イラストの位置・大きさ(px)はパネル左上基準。HTML側のインライン%指定を上書きする */
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(1) { left: 302.5px !important; top: 14.4px !important; width: 51.6px !important; height: 61.2px !important; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(2) { left: 120.5px !important; top: -43px !important; width: 61.9px !important; height: 99.5px !important; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(3) { left: 255.5px !important; top: 19.9px !important; width: 30.8px !important; height: 54.5px !important; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(4) { left: 199.4px !important; top: 42px !important; width: 17.6px !important; height: 10.4px !important; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(5) { left: 288.5px !important; top: -23px !important; width: 13.8px !important; height: 8.8px !important; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(6) { left: 219.2px !important; top: -40.8px !important; width: 25.4px !important; height: 16.4px !important; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(1) { left: 193.5px !important; top: -25px !important; width: 175px !important; height: 117px !important; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(2) { left: 120.5px !important; top: -57px !important; width: 23.1px !important; height: 90.9px !important; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(3) { left: 158px !important; top: -30.7px !important; width: 22.8px !important; height: 40.3px !important; }
  :is(.page-home, .page-about) .icon-cluster--03 img { left: 120.3px; top: -79.7px; width: 248px; height: 170.8px; }

  .page-home .torikumi__panel { padding: 64px 32px 60px; }
  :is(.page-home, .page-about) .torikumi__body { gap: 0; }
  :is(.page-home, .page-about) .torikumi__en-white { display: block; order: -2; width: auto; max-width: none; height: 21.5px; }
  :is(.page-home, .page-about) .torikumi__title { order: -1; margin: 15px 0 0; padding-left: .28em; font-weight: 500; letter-spacing: .28em; }
  .page-home .torikumi__caption { margin: 21px 0 0; font-size: 16px; font-weight: 500; line-height: 32px; letter-spacing: 3px; text-decoration: none; }
  .page-home .btn-white { margin-top: 31px; width: 584px; justify-content: center; gap: 12px; padding: 26.5px 20px; letter-spacing: 3px; }
  /* 下に向かって濃くなる色のかぶせ（パネルごとの色）。文字は本文(z-index:1)が上に乗る */
}

@media (max-width: 600px) {
  /* SP：「こんな課題」パネルの下端から取り組み見出しまでは60px相当。見出しと最初のブロックは接する。 */
  .initiatives { margin-top: 16%; }
  .initiatives .section-heading--center { margin-bottom: 0; }
  /* SP：3つの取り組みのブロックは隙間なく並べる（各ブロック内に余白を含む）。 */
  .torikumi__caption {
    font-size: 14px;
    letter-spacing: 0;
  }
  .torikumi__caption-break--pc { display: none; }
  .torikumi__caption-break--sp { display: inline; }
  .btn-white {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-align: left;
    gap: 10px;
    border-radius: 30px;
  }
}

/* SP新デザイン（375px基準）：Our three initiatives 見出し */
@media (max-width: 600px) {
  .page-home .initiatives .section-heading__en { display: block; height: calc(8.8 * var(--sp)); margin: 0 auto calc(19.55 * var(--sp)); }
  .page-home .section-heading__title--big { width: min(88.0597%, 360px); }
}

/* SP新デザイン（375px基準）：3つの取り組み（トップページ・事業についてページ共通。ページ固有の余白は各セクション側）  */
@media (max-width: 600px) {
  .page-home .torikumi { margin-top: calc(60 * var(--sp)); }
  .page-home .torikumi:first-of-type { margin-top: calc(55 * var(--sp)); }
  /* イラストだけパネル左上に重ねる（位置はパネル幅335pxに対する%） */
  :is(.page-home, .page-about) .torikumi__heading { position: absolute; left: 0; top: 0; width: 100%; height: 0; max-width: none; margin: 0; padding: 0; aspect-ratio: auto; }
    :is(.page-home, .page-about) .torikumi__heading .icon-cluster { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 0; aspect-ratio: auto; }
  :is(.page-home, .page-about) .icon-cluster img { position: absolute; max-width: none; object-fit: fill; height: auto; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(1) { left: 40.522% !important; top: 0 !important; margin-top: 2.761%; width: 7.015% !important; height: auto !important; aspect-ratio: 23.5 / 31.5; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(2) { left: 11.94% !important; top: 0 !important; margin-top: -6.343%; width: 9.701% !important; height: auto !important; aspect-ratio: 32.5 / 52; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(3) { left: 32.612% !important; top: 0 !important; margin-top: 3.358%; width: 5.075% !important; height: auto !important; aspect-ratio: 17 / 29.5; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(4) { left: 24.179% !important; top: 0 !important; margin-top: 6.716%; width: 3.06% !important; height: auto !important; aspect-ratio: 10.25 / 6.75; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(5) { left: 38.209% !important; top: 0 !important; margin-top: -3.358%; width: 2.313% !important; height: auto !important; aspect-ratio: 7.75 / 5; }
  :is(.page-home, .page-about) .icon-cluster--01 img:nth-child(6) { left: 27.164% !important; top: 0 !important; margin-top: -5.97%; width: 4.179% !important; height: auto !important; aspect-ratio: 14 / 9.25; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(1) { left: 23.284% !important; top: 0 !important; margin-top: -3.358%; width: 27.463% !important; height: auto !important; aspect-ratio: 92 / 61.75; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(2) { left: 11.94% !important; top: 0 !important; margin-top: -8.209%; width: 3.582% !important; height: auto !important; aspect-ratio: 12 / 48.5; }
  :is(.page-home, .page-about) .icon-cluster--02 img:nth-child(3) { left: 17.761% !important; top: 0 !important; margin-top: -3.955%; width: 3.731% !important; height: auto !important; aspect-ratio: 12.5 / 20.75; }
  :is(.page-home, .page-about) .icon-cluster--03 img { left: 11.94% !important; top: 0 !important; margin-top: -11.94%; width: 38.806% !important; height: auto !important; aspect-ratio: 130 / 90; }

  .page-home .torikumi__panel { border-radius: min(10.6667vw, 50px); padding: calc(83 * var(--sp)) calc(6 * var(--sp)) calc(40 * var(--sp)); }
  :is(.page-home, .page-about) .torikumi__body { gap: 0; }
  /* 白い英字画像：高さ11.5pxで、幅は画像の縦横比のまま（デザインの文字幅に一致） */
  :is(.page-home, .page-about) .torikumi__en-white { display: block; order: -2; height: calc(11.5 * var(--sp)); width: auto; max-width: none; margin-bottom: calc(8.8 * var(--sp)); }
  :is(.page-home, .page-about) .torikumi__title {
    order: -1; margin: 0; padding-left: .26em;
    font-size: calc(20 * var(--sp)); font-weight: 500; line-height: calc(36 * var(--sp)); letter-spacing: .26em;
    white-space: normal; word-break: auto-phrase; text-wrap: balance;
  }
  .page-home .torikumi__caption {
    margin: calc(19 * var(--sp)) 0 0;
    font-size: calc(14 * var(--sp)); font-weight: 500; line-height: calc(24 * var(--sp)); letter-spacing: .19em;
    text-decoration: none; word-break: auto-phrase; text-wrap: balance;
  }
  .page-home .torikumi .btn-white {
    width: 90%; max-width: 400px; height: calc(42 * var(--sp)); margin: calc(20 * var(--sp)) auto 0;
    padding: 0; justify-content: center; gap: calc(9.5 * var(--sp));
    font-size: max(14px, calc(12 * var(--sp))); letter-spacing: .12em; border-width: 1px; border-radius: 999px;
  }
  .page-home .torikumi .btn-white .icon-arrow { width: calc(16 * var(--sp)); height: calc(5.33 * var(--sp)); }
  .torikumi .btn-label__long { display: none; }
}

/* ============================================================
   About us (運営について)
============================================================ */
.about-us { margin-top: var(--gap-section); }
.about-us .section-heading--center { margin-bottom: 0; }
.about-us .section-heading__en { margin-bottom: 0; }

.about-us__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: fit-content; margin-inline: auto; margin-bottom: 40px; }
.about-us__title { font-weight: 700; font-size: clamp(20px, calc(2 * var(--vw)), 20px); letter-spacing: 2px; }
.about-us__text { margin-top: 40px; font-size: 16px; line-height: 1.9; letter-spacing: .8px; text-align: justify; }
@media (max-width: 600px) {
  .about-us { margin-top: 60px; }
}

.org-list { margin-top: 30px; display: flex; flex-direction: column; }
.org-row { display: flex; gap: 40px; padding-block: 24px; flex-wrap: wrap; }
.org-row__label { flex: 0 0 auto; width: 100px; font-weight: 700; font-size: 18px; letter-spacing: 1.8px; }
.org-row__body { flex: 1 1 300px; }
.org-row__body--multi { display: flex; flex-direction: column; gap: 20px; }
.org-row__name {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
}
/* リンク先URLが未設定の団体は <p class="org-row__name"> として出力されるため、
   オレンジ文字・下線ホバーはリンク(aタグ)の場合に限定する。 */
a.org-row__name {
  color: var(--c-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
a.org-row__name:hover { border-color: var(--c-orange); }
/* SP新デザイン（375px基準）：運営について・組成団体（トップページ） */
@media (max-width: 600px) {
  .page-home .about-us .section-heading--center { display: flex; flex-direction: column-reverse; align-items: center; }
  .page-home .about-us .section-heading__title { margin: 0; padding-left: .18em; font-size: 18px; letter-spacing: .18em; line-height: calc(26 * var(--sp)); }
  .page-home .about-us .about-us__en-sp { height: calc(11.6 * var(--sp)); width: auto; margin: 0 0 calc(14 * var(--sp)); }
  .page-home .about-us__block { margin-top: 40px; }
  .page-home .about-us__block--lead { margin-top: 31px; }
  .page-home .about-us__head { gap: 16px; margin-bottom: 29.5px; }
  .page-home .about-us__title { font-size: 16px; letter-spacing: .28em; line-height: calc(29 * var(--sp)); }
  .page-home .about-us__text { margin-top: 0; padding-inline: 20px; letter-spacing: 3px; line-height: 40px; }
  .page-home .org-list { margin-top: 0; padding: 11px 20px 12px; border: 2px solid var(--c-blue-gray); border-radius: 20px; }
  .page-home .org-list > hr:first-child,
  .page-home .org-list > hr:last-child,
  .page-home .org-row__body--multi > hr { display: none; }
  .page-home .org-list hr.rule--thin { height: 1px; background: repeating-linear-gradient(to right, #d9d9eb 0 3px, transparent 3px 8px); }
  .page-home .org-row { gap: 11px; padding-block: 32px; }
  .page-home .org-row__label { width: 100%; font-size: 18px; line-height: 27px; letter-spacing: 5.6px; }
  .page-home .org-row__body--multi { gap: 13px; }
  .page-home .org-row__name { display: block; font-size: 16px; line-height: 36px; letter-spacing: 5px; }
  .page-home a.org-row__name { border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(235, 97, 72, .4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .page-home .org-row__addr { margin-top: 4px; line-height: 24px; letter-spacing: 1px; }
}

/* ============================================================
   Footer
============================================================ */
.site-footer {
  margin-top: var(--gap-section);
  margin-bottom: 20px;
}
.footer-inner {
  background: var(--c-orange);
  border-radius: 40px;
  padding: 36px 30px 30px;
  text-align: center;
  color: var(--c-white);
}
.footer-text { font-weight: 700; font-size: 14px; letter-spacing: .7px; line-height: 1.6; }
.footer-privacy {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .7px;
  text-decoration: underline;
  color: var(--c-white);
  transition: opacity .4s ease;
}
.footer-privacy:hover { opacity: .6; }
.footer-copyright { margin-top: 14px; font-size: 12px; letter-spacing: .6px; color: var(--c-pink); }
@media (max-width: 600px) {
  /* SP共通フッター（全ページ）。寸法は下の「SP新デザイン：フッター」で指定。 */
  .footer-inner { border-radius: 10px; }
}

/* SP新デザイン（375px基準）：フッター（SP共通・全ページ） */
@media (max-width: 600px) {
  /* 組成団体の枠との間隔は39px（トップページのみ。他ページは --gap-section）。 */
  .page-home .site-footer { margin-top: calc(39 * var(--sp)); }
  .footer-inner { padding: 36px 18px 34px; }
  .footer-text { font-weight: 500; letter-spacing: .2em; line-height: 24px; }
  .footer-privacy { margin-top: 18px; font-weight: 700; line-height: 20px; letter-spacing: 2px; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 4px; }
  .footer-copyright { margin-top: 16px; line-height: 18px; letter-spacing: 2.7px; color: var(--c-white); }
}

/* ============================================================
   トップページ「運営について」＋フッター PC版
   about-us / footer とも page-home 限定。
============================================================ */
.about-us__en-pc { display: none; }
@media not all and (max-width: 600px) {
  .page-home .about-us { color: var(--c-black); }
  .page-home .about-us .about-us__en-sp { display: none; }
  .page-home .about-us .about-us__en-pc { display: block; height: 16.7px; width: auto; max-width: none; margin: 0 0 25px; }
  .page-home .about-us .section-heading--center { display: flex; flex-direction: column-reverse; align-items: center; }
  .page-home .about-us .section-heading__title { margin: 0; padding-left: 7px; line-height: 1.6; letter-spacing: 7px; }
  .page-home .about-us__block { margin-top: 79px; }
  .page-home .about-us__block--lead { margin-top: 57px; }
  .page-home .about-us__head { gap: 20px; }
  .page-home .about-us__head .rule--yellow { margin-top: 0; }
  .page-home .about-us__title { letter-spacing: 5.6px; }
  .page-home .about-us__text { letter-spacing: 2.9px; line-height: 40px; }
  /* 組成団体：枠で囲み、区切りは点線 */
  .page-home .org-list { margin-top: 0; padding: 32px 60px 29px; border: 2px solid var(--c-blue-gray); border-radius: 30px; }
  .page-home .org-list > hr:first-child,
  .page-home .org-list > hr:last-child { display: none; }
  .page-home .org-list hr.rule--thin { height: 1px; background: repeating-linear-gradient(to right, #d9d9eb 0 3px, transparent 3px 8px); }
  .page-home .org-row { align-items: center; padding-block: 34px; }
  .page-home .org-row__label { width: 150px; letter-spacing: 5.6px; }
  .page-home .org-row__body--multi { gap: 34px; }
  .page-home .org-row__name { font-size: 16px; letter-spacing: 5.3px; line-height: 22px; }
  .page-home a.org-row__name { border-bottom-color: rgba(235, 97, 72, .25); }
  .page-home a.org-row__name:hover { border-bottom-color: var(--c-orange); }
  .page-home .org-row__addr { margin-top: 10px; line-height: 24px; letter-spacing: 3px; }
  /* フッター */
  .page-home .footer-inner { padding: 36px 30px 31px; }
  .page-home .footer-text { font-weight: 500; letter-spacing: 2.8px; line-height: 24px; }
  .page-home .footer-privacy { margin-top: 17px; font-weight: 700; line-height: 20px; letter-spacing: 2px; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 4px; }
  .page-home .footer-copyright { margin-top: 15px; line-height: 18px; letter-spacing: 2.4px; color: var(--c-white); }
}
/* 十分な幅があるときは、枠をテキスト列より左右62pxだけ外側へ広げる（事業説明と同じ） */
@media not all and (max-width: 600px) {
  .page-home .about-us .container--narrow { max-width: 1054px; }
  .page-home .about-us__text { padding-inline: 62px 57px; }
  .page-home .org-list { padding-inline: 60px 55px; }
}

/* ============================================================
   Page hero (下層ページ共通ヒーロー)
============================================================ */
/* .page-hero__bg に縦横比を固定（PC 1360/293、SP 335/142）し、高さを幅から決める。他の要素は
   .page-hero__content 内で % 指定の position:absolute。切り替えはPC/SPの1回のみ。 */
.page-hero__frame {
  position: relative;
  border-radius: 40px;
  overflow: visible;
  margin-bottom: 80px;
}
.page-hero__bg {
  display: block;
  width: 100%;
  aspect-ratio: 1360 / 293;
  object-fit: cover;
  border-radius: 40px;
}
.page-hero__content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 1120px;
  margin-inline: auto;
}
/* PC：枠の左右から120pxの位置（1440px幅のデザインどおり）を、枠が狭くなっても変えない（%指定にしない）。
   枠が広い（1360px超）ときは、幅1120pxのまま中央に寄る。 */
@media not all and (max-width: 600px) {
  .page-hero__content { left: 120px; right: 120px; }
}
.page-hero__deco {
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: auto;
  max-width: none;
  z-index: 2;
  pointer-events: none;
}
.page-hero__underline {
  position: absolute;
  right: 4%;
  top: 32.9%;
  width: 20%;
  z-index: 2;
  pointer-events: none;
}
.page-hero__note {
  position: absolute;
  right: 8%;
  top: 29.5%;
  width: 6%;
  transform: rotate(10deg);
  z-index: 2;
  pointer-events: none;
}
.page-hero__copy {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  /* 英字（英語ラベル）をタイトルの上に表示（HTML上はタイトルが先） */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
/* ヒーローのタイトルは .section-heading__title（事業についてページの見出し）と同じ文字設定 */
.page-hero__title { margin: 0; font-weight: 500; font-size: 32px; line-height: 1.6; letter-spacing: 6px; }
.page-hero__en { margin: 0 0 14px; font-family: var(--font-accent); color: var(--c-orange); font-size: 16px; letter-spacing: 1.6px; }
img.page-hero__en { display: block; height: calc(1.1111 * var(--vw)); width: auto; max-width: none; }
/* 英字画像ごとの高さ（Figma書き出しの原寸：1440px幅で about 17px / news 17px / info 16px / activity 21px / training 21px） */
img.page-hero__en--about { height: calc(1.1806 * var(--vw)); }
img.page-hero__en--not { height: calc(1.1806 * var(--vw)); }
img.page-hero__en--news { height: calc(1.1806 * var(--vw)); }
img.page-hero__en--info { height: calc(1.1111 * var(--vw)); }
img.page-hero__en--activity { height: calc(1.4583 * var(--vw)); }
img.page-hero__en--training { height: calc(1.4583 * var(--vw)); }

@media (max-width: 600px) {
  /* .page-hero__deco は枠の下にはみ出す（枠の高さの33.79%）。枠の margin-bottom もそれに合わせて
       幅に対する割合(48px = 12.8vw)にし、後続要素との間隔が崩れないようにする。 */
  .page-hero__frame { margin-bottom: 15.1119%; }
  .page-hero__bg { aspect-ratio: 335 / 142; }
  .page-hero__copy { left: 7.16%; top: 50%; transform: translateY(-50%); }
  .page-hero__title { font-size: calc(18 * var(--sp)); line-height: calc(26 * var(--sp)); letter-spacing: .2em; }
  .page-hero__en { font-size: min(3.2vw, 15px); margin-bottom: 8px; }
  img.page-hero__en { height: min(3.2vw, 15px); }
  img.page-hero__en--about { height: calc(12.75 * var(--sp)); }
  img.page-hero__en--not { height: calc(12.75 * var(--sp)); }
  img.page-hero__en--news { height: calc(12.75 * var(--sp)); }
  img.page-hero__en--info { height: calc(12 * var(--sp)); }
  img.page-hero__en--activity { height: calc(15.75 * var(--sp)); }
  img.page-hero__en--training { height: calc(13 * var(--sp)); }
  .page-hero__deco { left: 50%; right: auto; top: 35.2%; height: 98.6%; }
  /* SP：ペンシル画像の位置とサイズ（キャンバス 335x146 に対して top 31.27%、right 8.96%、width 35.82%）。 */
  .page-hero__underline { top: 31.27%; right: 8.955%; width: 35.82%; }
}
@media (max-width: 600px) {
  .page-hero__frame, .page-hero__bg { border-radius: 20px; }
}

/* ============================================================
   Lead copy (下層ページ導入文)
============================================================ */
.lead { margin-top: 0; }
.lead__copy {
  max-width: 1120px;
}
.lead__copy img {
  display: block;
  width: min(100%, 779px);
  height: auto;
}
.lead__copy .lead__copy-img--sp { display: none; }
/* PC：導入画像は内容行の左端から120px（ヒーローのコピーと同じ位置）。中央寄せにはしない。 */
@media not all and (max-width: 600px) {
  .lead__copy { margin: 0 0 0 120px; max-width: none; }
}
@media (max-width: 600px) {
  .lead__copy .lead__copy-img--pc { display: none; }
  .lead__copy .lead__copy-img--sp { display: block; }
}
@media (max-width: 600px) {
  .lead__copy { margin: 60px auto 0; }
}
/* ============================================================
   Torikumi detail (取り組み詳細ボックス)
============================================================ */
.page-about .torikumi__panel { border-radius: 40px 40px 0 0; }
.page-about .torikumi:last-of-type .torikumi-detail { margin-bottom: 0; }

.torikumi-detail {
  border: 2px solid var(--c-blue-gray);
  border-top: none;
  border-radius: 0 0 40px 40px;
  padding: 100px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
/* 本文の装飾・横幅は「妊産婦等生活援助事業とは」の導入文(.purpose__lead)に合わせる：字間3px・行送り40px・本文幅855px（左右の余白が62px/57pxなので、中央から2.5pxだけ右へ寄せる）。SPは下で指定 */
.torikumi-detail__text {
  max-width: 855px;
  margin-left: 5px;
  width: 100%;
  font-size: 16px;
  line-height: 2.5;
  letter-spacing: 3px;
  text-align: justify;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 600px) {
  .torikumi-detail { padding: 30px 20px; gap: 30px; border-radius: 0 0 20px 20px; }
}
@media (max-width: 600px) {
  /* SP：.purpose__lead と同じ位置・幅（コンテナ左右20pxの内側にさらに20px。詳細ボックスの枠2px＋余白20pxの分だけ左右に2pxずつ広げて揃える） */
  .torikumi-detail__text { gap: 20px; width: calc(100% + 4px); max-width: 440px; margin-left: 0; }
}
.date-highlight { color: var(--c-orange); font-weight: 700; }

.btn-cta { width: 100%; max-width: 756px; margin-inline: auto; }
/* A fixed border-radius (the 40px/30px/20px .btn-white uses elsewhere) only reads as
   a full pill at the height a single line of text produces — if this button's text
   wraps to 2 lines the same fixed value no longer reaches half the taller box, so it
   renders as a merely-rounded rect instead of staying fully pill-shaped. A radius
   larger than any realistic box height is clamped by the browser to exactly half the
   box's own height/width, so it's always a full pill regardless of line count. */
.btn-white.btn-cta { border-radius: 9999px; }

/* ============================================================
   Slideshow placeholder
============================================================ */
.slideshow { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.slideshow__frame { position: relative; width: 100%; aspect-ratio: 960 / 540; border-radius: 10px; overflow: hidden; }
.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(0);
  transition: transform .5s ease;
}
.slideshow__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--c-text);
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
}
.slideshow__arrow--prev { left: 10px; }
.slideshow__arrow--next { right: 10px; }
.slideshow__arrow:disabled { cursor: not-allowed; opacity: .4; }
.slideshow__arrow .icon-chevron { width: 100%; height: 100%; display: block; }
.slideshow__arrow--prev .icon-chevron { transform: rotate(180deg); }
.slideshow__dots { display: flex; gap: 10px; }
.slideshow__dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-blue-gray);
  cursor: pointer;
}
.slideshow__dots button:disabled { cursor: not-allowed; }
.slideshow__dots button.is-active { background: var(--c-orange); }

/* ============================================================
   PDF link
============================================================ */
.pdf-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
}
.pdf-link img { width: 18px; flex-shrink: 0; }
.pdf-link a {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .8px;
  color: var(--c-orange);
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
.pdf-link a:hover { border-color: var(--c-orange); }
.pdf-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* ============================================================
   Training & events (研修・イベント情報 within 取り組み3)
============================================================ */
.training-events { width: 100%; max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.recruit-badge { position: relative; flex-shrink: 0; }
.recruit-badge img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.recruit-badge__text { position: absolute; left: 13%; top: 9%; width: 73%; height: auto; }

.training-events__head { position: relative; }
.training-events__row { display: contents; }
.training-events__rule {
  height: 2px;
  background: var(--c-dash);
}
.section-heading--left { text-align: left; }
/* PC：1120x162.8 の1枚の絵（バッジ左上、見出しがその下、罫線+リンク行が右）。
   値はすべてこのキャンバスに対する%で、.training-events の max-width:1120px にそのまま追従する。
   SPは「事業について」ページ用SP新デザインのブロック（バッジ→見出し+リンク→罫線の縦並び）で指定。 */
@media not all and (max-width: 600px) {
  .training-events__head { aspect-ratio: 1120 / 162.799; }
  .training-events__head .recruit-badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 11.965%;
    height: 49.14%;
  }
  .training-events__head .section-heading {
    position: absolute;
    left: 0;
    top: 55.29%;
    width: 28.04%;
    margin: 0;
  }
  .training-events__head .section-heading__title {
    font-size: min(32px, calc(2.857 * var(--vw)));
    letter-spacing: min(3.2px, calc(0.2857 * var(--vw)));
    margin-bottom: 3.503%;
    white-space: nowrap;
  }
  .training-events__head .training-events__link-row {
    position: absolute;
    left: 30.71%;
    top: 11.61%;
    width: 69.29%;
    height: 21.50%;
    display: block;
  }
  .training-events__head .training-events__rule {
    position: absolute;
    left: 0;
    top: 50%;
    width: 78.87%;
    transform: translateY(-50%);
  }
  .training-events__head .training-events__link-row .news-more {
    position: absolute;
    left: 82.73%;
    top: 0;
    width: 17.27%;
    height: 100%;
    font-size: min(16px, calc(1.4286 * var(--vw)));
    letter-spacing: min(1.6px, calc(0.1429 * var(--vw)));
    gap: 8.955%;
  }
  .training-events__head .news-more__circle { width: 26.12%; height: 100%; }
  .training-events__head .news-more__circle .icon-arrow { width: 45.71%; height: 22.86%; }
}

.news-cards {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}
.news-card {
  flex: 1 1 300px;
  max-width: 368px;
  border: 2px solid var(--c-blue-gray);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.news-card__thumb { overflow: hidden; }
.news-card__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 600/293;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.news-card:hover { cursor: pointer; }
.news-card:hover .news-card__thumb img { transform: scale(1.08); }
.news-card__body { padding: 30px 28px 25px; display: flex; flex-direction: column; gap: 10px; }
.news-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 投稿に複数カテゴリがある場合に .news-card__tag を複数並べるためのラッパー。 */
.news-card__tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* カテゴリのタグ：丸い（ピル型）・高さ22px・幅158px以上（長い名称は広がる）・枠は薄いベージュ(--c-dash)・文字は黒 */
.news-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 158px;
  height: 22px;
  padding: 0 16px;
  border: 1px solid var(--c-dash);
  border-radius: 11px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.news-card__date { font-weight: 900; font-size: 14px; color: var(--darkgray, #747474); letter-spacing: .2em; }
.news-card__title { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.8; letter-spacing: 1.2px; text-align: justify; }
.news-card__detail { margin: 4px 0 0; display: flex; flex-direction: column; gap: 14px; }
.news-card__detail > div { display: flex; flex-direction: column; gap: 6px; }
.news-card__detail dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--darkgray, #747474);
  letter-spacing: .2em;
}
/* アイコンは縦20px・横は画像の縦横比のまま（時計 約20px／パソコン 約24px） */
.news-card__detail dt { gap: 10px; }
.news-card__detail dt img { width: auto; height: 20px; }
.news-card__detail dd { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: 1.8px; }
.news-card__btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid var(--c-black);
  border-radius: 22px;
  padding: 7.5px 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-decoration: none;
  color: var(--c-text);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
/* 開催日時・開催形式がある場合は、その下のボタンまで少し広く空ける */
.news-card__detail + .news-card__btn { margin-top: 18px; }
.news-card:hover .news-card__btn {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}
.news-card:hover .news-card__btn .icon-arrow { color: var(--c-white); }

@media (max-width: 600px) {
  .news-card__meta { flex-wrap: wrap; gap: 5px 12px; }
  .news-card__tag { font-size: 14px; }
  .news-card__detail dd { font-size: 16px; letter-spacing: 1.6px; }
  .news-card__btn {
    width: 100%;
    justify-content: space-between;
    border-radius: 40px;
    padding: 12px 20px;
    font-size: 14px;
    letter-spacing: 1.2px;
    gap: 10px;
  }
}

/* ============================================================
   Case study section (事例と調査)
============================================================ */
.case-study { margin-top: var(--gap-section); }
.case-study__heading { display: flex;     }
.case-study__icon {  height: auto; flex-shrink: 0; }
.case-study__icon--file { transform: rotate(5deg); }
.case-study__text { font-size: 16px;   }
.case-study .about-us__block { margin-top: 60px; }
/* ============================================================
   News list page (お知らせ一覧)
============================================================ */
.container--wide { max-width: 1120px; }

/* News list page hero (03_お知らせ一覧) shares the same underline decoration and canvas
   as news-detail.html (both .page-news), but each page's copy sits at its own inset —
   scoped via .page-news-list for news.html specifically. .page-hero__underline itself
   is defined in the unified page-hero block above (fluid %, no px cap). */
@media (max-width: 600px) {
  .page-news .page-hero__bg { aspect-ratio: 335 / 146; }
  .page-news .page-hero__copy { left: 7.16%; }
  .page-news-list .page-hero__copy { left: 8.96%; }
}

.news-list-section { margin-top: var(--gap-section); }
/* お知らせ一覧の内容幅は1120px（.container の左右paddingを引かない）。 */
.news-list-section .container--wide { max-width: 1200px; }
.news-cards--grid { justify-content: center; gap: 8px; }

.pagination {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagination__item {
  /* ページネーションは <a>（現在ページは <span>）なので、min-width/height を効かせるため display:inline-flex を指定。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 46px;
  height: 46px;
  padding: 8px 8px 10px 10px;
  border: 2px solid var(--c-blue-gray);
  border-radius: 4px;
  background: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.pagination__item.is-current { background: var(--c-blue-gray); }
.pagination__item:hover {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}
.pagination__item--next { width: 80px; }

/* ============================================================
   Article detail (お知らせ詳細)
============================================================ */
.article-section { margin-top: var(--gap-section); }
/* 記事＋サイドバーの行は1120px幅。.container--wide の1120px は左右paddingを含み1040pxになるため、
   1200pxに広げて内容を1120pxにする（.news-list-section .container--wide と同じ処理）。 */
.article-section .container--wide { max-width: 1200px; }
.article-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.article-main {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.article-main__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* タグと日付は横並びで間隔20px */
.article-main__head .news-card__meta { justify-content: flex-start; gap: 20px; }
/* 投稿詳細のアイキャッチ表示枠。一覧カードの .news-card__thumb img と同じ比率(600:293)・object-fit:cover。 */
.article-main__thumb { display: block; overflow: hidden; border-radius: 20px; }
.article-main__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 293;
  object-fit: cover;
}
.article-main__title {
  margin: 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: clamp(20px, calc(2.4 * var(--vw)), 24px);
  line-height: 1.8;
  letter-spacing: .25em;
  text-align: justify;
}
.article-main__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 500;
  font-size: 16px;
  line-height: 2.5;
  letter-spacing: .25em;
  text-align: justify;
  overflow-wrap: break-word;
}
/* PC：タイトルは24px（字間6px・行送り43px）、本文は16px（字間4px・行送り40px）。SPも同じ字間・行送りの比率 */
@media not all and (max-width: 600px) {
  .article-main__title { font-size: 24px; }
}
.article-main__body p { margin: 0; }
/* ブロックエディタの「段落」ブロック：行送り1.6・字間0.15em（SP・PC共通） */
.article-main .wp-block-paragraph { line-height: 1.6; letter-spacing: 0.15em; }
.article-main__body h2 {
  margin: 20px 0 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 1.8px;
}
/* ブロックエディタが出力し得る h3/h4/figure(wp-block-image含む)/figcaption に、h2 に準じた最低限の見た目を
   .article-main__body 配下に限定して適用。 */
.article-main__body h3 {
  margin: 16px 0 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 1.7px;
}
.article-main__body h4 {
  margin: 12px 0 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 1.6px;
}
.article-main__body figure { margin: 0; }
.article-main__body figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--darkgray, #747474);
  text-align: center;
}
.article-main__body blockquote {
  margin: 0;
  padding: 16px 20px;
  border-left: 3px solid var(--c-orange);
  background: var(--c-bg-gray, #f5f5f5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-main__body blockquote p { font-size: 15px; }
/* the_content() が出力し得る箇条書き・画像・リンクの最小限のスタイル（.article-main__body 配下のみ）。 */
.article-main__body ul,
.article-main__body ol {
  margin: 0;
  padding-left: 1.4em;
}
.article-main__body li + li { margin-top: 8px; }
.article-main__body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.article-main__body a { color: var(--c-orange); text-decoration: underline; }
.article-main__body a:hover { opacity: .72; }
/* ブロックエディタの「ボタン」ブロックは .article-main__body a の下線・オレンジ文字が当たるため、
   gnav-buttons の .btn.btn-outline と同じ配色・形状に上書きする。 */
/* ボタンの位置はブロックエディタのツールバー（左・中央・右・両端揃え）で選べる。未設定のときは左。
   ブロックエディタが付ける .is-content-justification-* に対応するCSSをここで持つ（コアのCSSの読み込み有無によらず効く）。 */
.article-main__body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
.article-main__body .wp-block-buttons.is-content-justification-left { justify-content: flex-start; }
.article-main__body .wp-block-buttons.is-content-justification-center { justify-content: center; }
.article-main__body .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.article-main__body .wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
.article-main__body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 26px;
  border: 2px solid var(--c-black);
  background: transparent;
  color: var(--c-text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, opacity .2s ease;
}
.article-main__body .wp-block-button__link:hover {
  opacity: 1;
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}
/* 記事のボタンは大きな丸ボタン（枠2px・字間4px）で、文字の右に ●━ の矢印を付ける。
   PC：左右80px・本文との間80px（本文の段落間20px＋60px）。SPは下で小さくする。 */
.article-main__body .wp-block-buttons { margin-top: 60px; }
.article-main__body .wp-block-button__link {
  gap: 12px;
  padding: 24px 80px;
  border-radius: 9999px;
  line-height: 1.5;
  letter-spacing: 4px;
}
.article-main__body .wp-block-button__link:hover { color: var(--c-white); }
@media (max-width: 600px) {
  .article-main__body .wp-block-buttons { margin-top: 30px; }
  .article-main__body .wp-block-button__link {
    padding: 16px 28px;
    letter-spacing: 3px;
    white-space: normal;
    text-align: center;
  }
}
.article-main__body .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Cline x1='1' y1='4' x2='19' y2='4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Cline x1='1' y1='4' x2='19' y2='4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 記事CTAは左右padding 80px（共通の .btn-white は60px）、上に80px（.article-main の他の子要素間は40px）。
   .article-main 配下に限定し、他の .btn-white / .btn-cta には影響させない。 */
.article-main .btn-cta { padding-left: 80px; padding-right: 80px; margin-top: 40px; max-width: none; white-space: nowrap; }
@media (max-width: 600px) {
  /* SPでは .btn-white が padding 12px/20px になるため、上のPC用の左右padding指定（詳細度が高い）も戻し、
     余分な margin-top も打ち消して、3つの子要素の間隔を20pxで揃える。 */
  .article-main .btn-cta { padding-left: 20px; padding-right: 20px; margin-top: 0; }
}

.article-sidebar {
  flex: 0 1 320px;
  min-width: 0;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.sidebar-block { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.sidebar-block__title {
  margin: 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2em;
}
.recent-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.recent-posts__item { border-top: 1px solid var(--darkgray, #747474); padding-top: 20px; }
.recent-posts__item a { display: block; text-decoration: none; color: inherit; }
.recent-posts__date {
  margin: 0 0 5px;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .2em;
  color: var(--darkgray, #747474);
}
.recent-posts__title {
  margin: 0;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .25em;
  transition: color .4s ease;
}
.recent-posts__item a:hover .recent-posts__title { color: var(--c-orange); }
.category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.category-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 20px;
  border: 1px solid var(--c-black);
  border-radius: 4px;
  background: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2.8px;
  text-decoration: none;
  color: var(--c-text);
  text-align: center;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.category-list__link.is-current { background: var(--c-bg-gray); }
.category-list__link:hover {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}

@media (max-width: 600px) {
  .article-sidebar { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
  .article-main__title { font-size: 16px; }
  /* SP：見出し・本文・ボタンの間隔20px（PCは40px）、本文の段落間10px（PCは20px）、サイドバーの2ブロック間40px（PCは60px）。 */
  .article-main { gap: 20px; }
  .article-main__body { gap: 10px; }
  .article-sidebar { gap: 40px; }
}

/* ============================================================
   Privacy policy page
============================================================ */
/* .page-hero__note 自体は上の page-hero ブロックで定義（%指定、PC/SPとも表示）。 */

.policy-section { margin-top: var(--gap-section); }

/* ============================================================
   Policy content（the_content() 出力用）
   ブロックエディタが出力する素のh2/p/ol/ul/li/aに見た目を与える。
   編集者はこれらのタグを普通に使うだけでよく、class名やHTMLを手入力する必要はない。
============================================================ */
.policy-content > *:first-child { margin-top: 0; }
.policy-content h2 {
  margin: 40px 0 10px;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: 1.8px;
  color: var(--c-orange);
}
.policy-content h3 {
  margin: 24px 0 8px;
  font-family: 'Zen Maru Gothic', var(--font-base);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 1.7px;
  color: var(--c-orange);
}
.policy-content p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .8px;
}
.policy-content p:last-child { margin-bottom: 0; }
.policy-content ol,
.policy-content ul {
  margin: 0 0 14px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .8px;
}
.policy-content a { color: var(--c-orange); text-decoration: underline; }
.policy-content a:hover { opacity: .72; }
.policy-content strong { font-weight: 700; }

/* ============================================================
   Scroll reveal animation
============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Page to top button
============================================================ */
.page-to-top {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 150;
  display: block;
  width: 74px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.page-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.page-to-top:hover { opacity: .72; }
.page-to-top img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .page-to-top { right: 14px; bottom: 20px; width: 60px; }
}

/* ============================================================
   Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gnav, .hamburger span, .btn { transition: none; }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-to-top { transition: opacity .3s ease, visibility .3s; }
}

/* 「事業について」の取り組みパネルの色かぶせ（PC/SP共通） */
.page-about .torikumi__panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-about .torikumi__panel--01::after { background: linear-gradient(to bottom, rgba(100, 186, 248, 0), rgba(100, 186, 248, .68)); }
.page-about .torikumi__panel--02::after { background: linear-gradient(to bottom, rgba(190, 132, 100, 0), rgba(190, 132, 100, .42)); }
.page-about .torikumi__panel--03::after { background: linear-gradient(to bottom, rgba(57, 87, 23, 0), rgba(57, 87, 23, .4)); }

/* ============================================================
   「事業について」ページ PC版
   取り組み3パネル・研修イベント見出し・事例と調査。
============================================================ */
@media not all and (max-width: 600px) {
  /* --- 取り組み3パネル（イラスト・見出しの構成はトップページと共通） --- */
  .page-about .initiatives--detail .torikumi { margin-top: 110px; }
  .page-about .initiatives--detail .torikumi:first-of-type { margin-top: 69px; }
  .page-about .torikumi__panel { padding: 106px 32px 104.5px; }
  /* 説明文は画面表示から外す（読み上げ・検索用に残す）。下の本文ボックスに詳細があるため */
  .page-about .torikumi__caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* --- 研修・イベント情報の見出し（1120×162.8のキャンバスに対する%） --- */
  .training-events .training-events__head .recruit-badge { width: 13.84%; height: 61.4%; }
  .training-events .training-events__head .recruit-badge__text { left: 25.2%; top: 36%; width: 52.6%; }
  .training-events .training-events__head .section-heading { left: 15.63%; top: 27%; width: 36.4%; display: flex; flex-direction: column-reverse; align-items: flex-start; }
  .training-events .training-events__head .section-heading__en { width: 100%; height: auto; max-width: none; margin: 0 0 4.84%; }
  .training-events .training-events__head .section-heading__title { margin: 0; font-weight: 500; line-height: 1.6; letter-spacing: min(6px, calc(0.5357 * var(--vw))); }
  .training-events .training-events__head .training-events__link-row { left: 54.02%; top: 41.8%; width: 45.98%; }
  .training-events .training-events__head .training-events__rule { width: 69.1%; background: var(--c-blue-gray); }
  .training-events .training-events__head .training-events__link-row .news-more { left: 73.2%; width: 26.8%; gap: 5.5px; letter-spacing: min(3.5px, calc(0.3125 * var(--vw))); }

  /* --- 事例と調査に関する情報発信 --- */
  .case-study { color: var(--c-black); }
  .case-study .case-en { display: block; height: 21.1px; width: auto; max-width: none; margin: 0 0 20px; }
  .case-study__heading { align-items: center; justify-content: center; flex-wrap: nowrap; gap: 48px; margin-bottom: 36.5px; }
  .case-study .section-heading { display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 0; }
  .case-study .section-heading__title { margin: 0; padding-left: 6px; line-height: 1.6; letter-spacing: 6px; }
  .case-study__icon { width: 69px; margin: 0 -7px 9px 0; }
  .case-study__icon--file { width: 62px; margin: 0 0 9px -1px; }
  .case-study__text { margin-right: -5px; letter-spacing: 3px; line-height: 40px; }
  .case-study .about-us__head { gap: 20px; }
  .case-study .about-us__head .rule--yellow { margin-top: 0; }
  .case-study .about-us__title { letter-spacing: 5.6px; }
  .case-study .pdf-link a { line-height: 1.27; border-bottom-color: rgba(235, 97, 72, .25); }
  .case-study .pdf-link a:hover { border-bottom-color: var(--c-orange); }
}
@media not all and (max-width: 600px) {
  .case-study .container--narrow { max-width: 930px; }
}

/* SP新デザイン（375px基準）：事業についてページ（取り組み3パネル・研修イベント見出し・事例と調査） */
@media (max-width: 600px) {
  /* --- 取り組み3パネル（イラスト・英字・タイトルはトップページと共通。説明文はPC同様に画面表示から外す） --- */
  .page-about .initiatives--detail .torikumi { margin-top: calc(55 * var(--sp)); }
  .page-about .initiatives--detail .torikumi:first-of-type { margin-top: calc(16 * var(--sp)); }
  .page-about .torikumi .btn-white { width: 90%; }
  .page-about .torikumi__panel {
    border-radius: min(10.6667vw, 50px) min(10.6667vw, 50px) 0 0;
    padding: 18.806% calc(6 * var(--sp)) calc(38.5 * var(--sp)); /* 上は英字までの距離＝イラストの重なり量に連動（パネル幅の%） */
  }
  .page-about .torikumi__caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* --- 研修・イベント情報の見出し：バッジ→英字+見出し(左)/一覧リンク(右)→罫線 の順に縦に並べる（PCと同じ画像を使用） --- */
  /* 取り組み詳細ボックスの内側（枠線2px+余白20px）を越えて、コンテナ幅いっぱいに広げる（デザインの罫線は左右端まで） */
  .training-events .training-events__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; aspect-ratio: auto; max-width: none; margin-inline: -22px; padding-inline: 30px; }
  .training-events .training-events__head .recruit-badge { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: calc(106 * var(--sp)); height: calc(69 * var(--sp)); }
  .training-events .training-events__head .recruit-badge__text { left: 25.2%; top: 36%; width: 52.6%; }
  .training-events .training-events__head .section-heading {
    position: static; grid-column: 1; grid-row: 2; width: auto;
    margin: calc(13.5 * var(--sp)) 0 0 calc(21 * var(--sp));
    display: flex; flex-direction: column-reverse; align-items: flex-start;
  }
  .training-events .training-events__head .section-heading__en { width: auto; height: calc(11.9 * var(--sp)); max-width: none; margin: 0 0 calc(11.5 * var(--sp)) calc(2 * var(--sp)); }
  .training-events .training-events__head .section-heading__title {
    margin: 0; font-size: calc(18 * var(--sp)); font-weight: 500; letter-spacing: .2em; line-height: calc(28.8 * var(--sp)); white-space: normal;
  }
  .training-events .training-events__head .training-events__link-row { display: contents; }
  .training-events .training-events__head .training-events__rule {
    position: static; grid-column: 1 / -1; grid-row: 3; width: 100%; transform: none;
    margin-top: calc(15.3 * var(--sp)); background: var(--c-blue-gray);
  }
  .training-events .training-events__head .news-more {
    position: static; grid-column: 2; grid-row: 2; align-self: end; width: auto; height: auto;
    margin-bottom: calc(3.2 * var(--sp));
    font-size: calc(12 * var(--sp)); letter-spacing: .04em; gap: calc(7 * var(--sp));
  }
  .training-events .training-events__head .news-more__circle { width: calc(25 * var(--sp)); height: calc(25 * var(--sp)); border-width: 1.5px; }
  .training-events .training-events__head .news-more__circle .icon-arrow { width: calc(11.4 * var(--sp)); height: calc(4.5 * var(--sp)); }

  /* --- 事例と調査に関する情報発信 --- */
  .case-study { color: var(--c-black); }
  .case-study .case-en { display: block; height: calc(11.9 * var(--sp)); width: auto; max-width: none; margin: 0 0 calc(13.3 * var(--sp)); }
  .case-study__heading { align-items: center; justify-content: space-between; gap: 0; max-width: 480px; margin: 0 auto calc(30 * var(--sp)); }
  .case-study .section-heading { display: flex; flex-direction: column-reverse; align-items: center; width: calc(205 * var(--sp)); margin-bottom: 0; }
  .case-study .section-heading__title { margin: 0; padding-left: .2em; font-size: calc(18 * var(--sp)); font-weight: 500; letter-spacing: .2em; line-height: calc(26 * var(--sp)); }
  .case-study__icon { width: calc(51 * var(--sp)); margin: calc(4 * var(--sp)) 0 0; }
  .case-study__icon--file { margin: calc(2.4 * var(--sp)) 0 0; }
  .case-study__text { padding-inline: 20px; letter-spacing: 2.7px; line-height: 40px; }
  .case-study .about-us__block { margin-top: 40px; }
  .case-study .about-us__head { gap: 16px; margin-bottom: 30px; }
  .case-study .about-us__title { font-size: 16px; letter-spacing: .28em; line-height: calc(29 * var(--sp)); }
  .case-study .pdf-list { padding-inline: 20px; }
  .case-study .pdf-link { gap: calc(12 * var(--sp)); }
  .case-study .pdf-link a {
    line-height: calc(22 * var(--sp)); border-bottom: 0; overflow-wrap: anywhere;
    text-decoration: underline; text-decoration-color: rgba(235, 97, 72, .25); text-decoration-thickness: 1px; text-underline-offset: calc(3 * var(--sp));
  }
}
/* ============================================================
   SP(600px以下)：481〜600pxで横に間延びしないための上限
   いずれも375px時の幅より大きい上限なので、375pxの見た目は変わらない。
   対象は下記の要素のみ（一律ルールではない）。背景・写真のカードは画面幅いっぱい。
============================================================ */
@media (max-width: 600px) {
  /* 読み物の本文 */
  .purpose__lead, .purpose__list, .purpose-detail__text, .purpose-detail__bullets,
  .about-us__text, .case-study__text, .article-main__body, .policy-content { max-width: 480px; margin-inline: auto; }
  /* ボタン */
  .btn-white, .btn-white.btn-cta { max-width: 400px; margin-inline: auto; }
  /* 取り組み見出しの画像・研修見出し */
}

/* ============================================================
   404（ページが見つかりません）
============================================================ */
.notfound-section { margin-top: var(--gap-section); }
.notfound {
  max-width: 800px;
  margin-inline: auto;
  padding: 60px 40px 57px;
  border: 2px solid var(--c-blue-gray);
  border-radius: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notfound__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.8; letter-spacing: .2em; padding-left: .2em; }
.notfound__text { margin: 20px 0 0; font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: .1em; }
.notfound__btn { margin-top: 40px; justify-content: center; gap: 12px; }
.notfound__links { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
@media (max-width: 600px) {
  .notfound { padding: 40px 20px 40px; border-radius: 20px; }
  .notfound__title { font-size: 18px; letter-spacing: .15em; padding-left: .15em; }
  .notfound__text { margin-top: 16px; font-size: 14px; line-height: 1.9; letter-spacing: .05em; }
  .notfound__btn { margin-top: 28px; width: 100%; }
  .notfound__links { margin-top: 28px; gap: 12px 28px; }
}