@charset "UTF-8";
/* ============================================================
   株式会社こころ / 共通スタイル（FLOCSS）
   ★このファイルは全案件で共通。案件ごとの差し替えは brand/brand.css だけ。
   ★Astro版・WordPress版で同一ファイルを使う。
   ------------------------------------------------------------
   1. セマンティック層
   2. Reset
   3. Base
   4. Layout   (l-)
   5. Component(c-)
   6. Project  (p-)
   7. Utility  (u-)
   ============================================================ */

/* ============================================================
   1. セマンティック層 ── ブランド層を役割に翻訳する
   コンポーネントCSSはここより下の変数しか参照しない
   ============================================================ */
:root {
  --color-bg: var(--brand-paper);
  --color-surface: var(--brand-white);
  --color-surface-pale: var(--brand-gray-pale);
  --color-section-pale: var(--brand-primary-pale);

  --color-text: var(--brand-ink);
  --color-text-sub: var(--brand-ink-sub);
  --color-text-invert: var(--brand-white);

  --color-border: var(--brand-border);
  --color-border-strong: var(--brand-border-strong);

  /* 文字・ボタンに使う色は、ロゴそのままの色ではなくコントラストを確保した -deep 系を使う。
     ロゴの色は c-mark（クローバー）だけがそのまま使う。 */
  --color-heading-sub: var(--brand-accent-deep, var(--brand-accent)); /* 英字サブ見出し */
  --color-heading-sub-alt: var(--brand-primary-deep, var(--brand-primary));

  --color-button: var(--brand-cta);
  --color-button-hover: var(--brand-cta-light);
  --color-button-green: var(--brand-primary-deep, var(--brand-primary));
  --color-button-green-hover: var(--brand-primary-deep-hover, var(--brand-primary-light));
  --color-tel: var(--brand-cta);
  --color-accent: var(--brand-accent-deep, var(--brand-accent));
  --color-error: var(--brand-error);

  --font-base: var(--brand-font-base);
  --font-body: var(--brand-font-body);
  --font-heading: var(--brand-font-heading);
  --font-en: var(--brand-font-en);

  --radius-card: var(--brand-radius-card);
  --radius-button: var(--brand-radius-button);
  --radius-large: var(--brand-radius-large);
  --radius-pill: var(--brand-radius-pill);

  --shadow: var(--brand-shadow);
  --shadow-soft: var(--brand-shadow-soft);
  --transition: var(--brand-transition);

  /* 写真の窓の形。対角2つだけ大きく丸めて葉のシルエットにする。
     マスクを使わないので縦横比で歪まず、overflow と box-shadow がそのまま効く。 */
  --radius-leaf: clamp(48px, 9vw, 116px);

  --inner-max: 1150px;
  /* 長文用の版面。全角35〜40字/行。WCAG 1.4.8 の行長の目安にも合う。
     理念や説明文のような読ませる文章はこちらを使う。 */
  --inner-read: 940px;
  --header-h: 58px;
}
@media (min-width: 1200px) {
  :root {
    --header-h: 76px;
  }
}

/* ============================================================
   2. Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
input, textarea, select {
  font: inherit;
  color: inherit;
}
address {
  font-style: normal;
}
table {
  border-collapse: collapse;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* duration だけ潰しても、ループ回数と遅延が残る。
     無限ループのアニメーションが1つでもあると、
     「動きを減らす」を設定した人にだけ猛烈な明滅が出てしまう。 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   3. Base
   ============================================================ */
body {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: 0.06em;
  /* 和文のプロポーショナルメトリクス。約物（、。「」）の余分な空きを詰める。
     日本語の組みが締まる、最も効果の大きい1行。 */
  font-feature-settings: 'palt' 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

/* palt と字送りの例外。ここを外すと表とフォームが崩れる。 */
/* 数字の桁を揃える（電話番号・定員・料金） */
.c-deflist__desc,
.p-doc table,
.c-form__note {
  font-variant-numeric: tabular-nums;
}
/* 入力欄はカーソル位置がずれるので字送りを戻す */
input,
textarea,
select {
  letter-spacing: normal;
  font-feature-settings: normal;
}

::selection {
  background: var(--color-accent);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ページ種別ごとの背景（<main class="…"> で切り替え） */
body:has(main.about),
body:has(main.recruit) {
  background: var(--color-bg);
}
body:has(main.staff) {
  background: var(--color-surface-pale);
}

/* ============================================================
   4. Layout
   ============================================================ */
.l-inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 1200px) {
  .l-inner {
    max-width: var(--inner-max);
    padding-inline: 25px;
  }
}
.l-inner--read {
  max-width: 720px;
}
@media (min-width: 1200px) {
  .l-inner--read {
    max-width: var(--inner-read);
  }
}
.l-inner--narrow {
  max-width: 760px;
}
@media (min-width: 1200px) {
  .l-inner--narrow {
    max-width: 1000px;
  }
}

.l-main {
  display: block;
}

.l-lower-main {
  margin-top: 40px;
  margin-bottom: 60px;
}
@media (min-width: 1200px) {
  .l-lower-main {
    margin-top: 60px;
    margin-bottom: 100px;
  }
}

/* セクション間の余白。
   参考サイト（yamatoen.or.jp）はPCで 154〜242px（画面幅の11〜21%）取っている。
   ここが「なんとなく綺麗」の相当部分を作っている。
   固定値で段階を作らず、画面幅に対して連続的に効かせる。 */
.l-section {
  margin-top: clamp(56px, 9vw, 150px);
}

/* ============================================================
   5. Component
   ============================================================ */

/* --- スキップリンク --- */
.c-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10000;
  background: var(--color-button-green);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-button);
  font-weight: 700;
  transition: top var(--transition);
}
.c-skip-link:focus {
  top: 8px;
}

/* --- シンボルマーク（クローバー） --- */
/* マークは横長（430:328）。高さを決めて幅は自動にする。正方形にすると潰れる。 */
.c-mark {
  width: auto;
  height: 40px;
  flex: none;
}
.c-mark__leaf--primary {
  fill: var(--brand-primary);
}
.c-mark__leaf--accent {
  fill: var(--brand-accent);
}
.c-mark__stem {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 6.78; /* ロゴのviewBox（430幅）基準の実測値 */
  stroke-linecap: round;
}

/* ============================================================
   装飾（やわらかい印象をつくる）

   ・波          セクションの色が切り替わる境目を、直線ではなく曲線でつなぐ
   ・クローバー   ブランドマークを大きく薄く敷く

   どちらもマークアップを足さずに CSS だけで当てている。
   Astro版とWordPress版でテンプレートを二重に直さなくて済むようにするため。

   波は mask で抜いているので色は background-color で決まる。
   クローバーは brand/brand.css の --brand-deco-tinted（色を焼き込み済み）。
   形と色を変えるときは brand.css 側を差し替える。
   ============================================================ */
:root {
  --wave-shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none' fill='white'><path d='M0,26 C180,74 330,-6 560,14 C790,34 930,86 1130,58 C1250,41 1350,20 1440,6 L1440,80 L0,80 Z'/></svg>");
}

/* --- 波 --- */
.u-wave-top,
.u-wave-bottom {
  position: relative;
}
.u-wave-top::before,
.u-wave-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 24px;
  background-color: var(--wave-color, var(--color-bg));
  -webkit-mask: var(--wave-shape) no-repeat center / 100% 100%;
  mask: var(--wave-shape) no-repeat center / 100% 100%;
  pointer-events: none;
}
.u-wave-top::before {
  top: -1px;
  transform: scaleY(-1);
}
.u-wave-bottom::after {
  bottom: -1px;
}
@media (min-width: 768px) {
  .u-wave-top::before,
  .u-wave-bottom::after {
    height: 44px;
  }
}

/* --- TOPの淡いセクション：上下を波でつなぎ、隅にクローバーを敷く --- */
.p-top-section--pale {
  position: relative;
  overflow: hidden;
  background-color: var(--color-section-pale);
  background-image: var(--brand-deco-tinted-alt);
  background-repeat: no-repeat;
  background-position: right -70px top -50px;
  background-size: 230px auto;
}
.p-top-section--pale::before,
.p-top-section--pale::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background-color: var(--color-bg);
  -webkit-mask: var(--wave-shape) no-repeat center / 100% 100%;
  mask: var(--wave-shape) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 1;
}
.p-top-section--pale::before {
  top: -1px;
  transform: scaleY(-1);
}
.p-top-section--pale::after {
  bottom: -1px;
}
.p-top-section--pale > * {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .p-top-section--pale {
    background-position: right -90px top -70px;
    background-size: 380px auto;
  }
  .p-top-section--pale::before,
  .p-top-section--pale::after {
    height: 48px;
  }
}

/* --- お問い合わせ帯：左下にクローバー --- */
/* お問い合わせ帯。ロゴ緑の帯にして、上下をクリームの波でつなぐ。
   参考サイトがフッター直前で使っている見せ方と同じ構造。 */
.p-contact {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-primary);
  background-image: var(--brand-deco-tinted-on-green);
  background-repeat: no-repeat;
  background-position: left -70px bottom -70px;
  background-size: 240px auto;
}
.p-contact::before,
.p-contact::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background-color: var(--color-bg);
  -webkit-mask: var(--wave-shape) no-repeat center / 100% 100%;
  mask: var(--wave-shape) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 1;
}
.p-contact::before {
  top: -1px;
  transform: scaleY(-1);
}
.p-contact::after {
  bottom: -1px;
}
.p-contact > * {
  position: relative;
  z-index: 2;
}
/* 緑の帯の上では、緑のボタンが沈む（2.51:1）。白地に濃い緑の文字へ反転する。 */
.p-contact .c-button-contact--mail {
  background-color: #fff;
  border-color: #fff;
  color: var(--brand-primary-deep);
}
@media (hover: hover) {
  .p-contact .c-button-contact--mail:hover {
    background-color: var(--brand-primary-deep);
    border-color: var(--brand-primary-deep);
    color: #fff;
  }
}
@media (min-width: 768px) {
  .p-contact {
    background-position: left -90px bottom -90px;
    background-size: 380px auto;
  }
  .p-contact::before,
  .p-contact::after {
    height: 48px;
  }
}

/* --- 下層ページのFV下：波でつなぐ --- */
.l-lower-main {
  position: relative;
}

/* スクロール演出で未表示のブロックに、キーボードでフォーカスが入ることがある。
   その場合は演出を待たずに見せる（見えないままフォーカスされるのを防ぐ）。 */
.js-reveal:focus-within {
  opacity: 1;
  transform: none;
}

/* 文字数の上限超過 */
.c-form__note.is-over {
  color: var(--color-error, #d82c28);
  font-weight: 700;
}

/* --- 写真を葉の形に切り抜く ---
   ブランドのクローバーから受け継いだ丸みを、写真の窓の形に持ち込む。
   参考サイトも、写真の窓に「葉型」「ゆりかご型」という単純で対称な形を使っていた。
   複雑な有機形はマスクが要るうえ縦横比で歪むので採らない。

   適用は各ページの主役写真だけに絞る。全部に広げると、
   形が主張しすぎて写真そのものが見えなくなる。 */
.p-top-media__figure,
.p-facility-head__figure,
.p-message__figure {
  border-radius: var(--radius-leaf) var(--radius-card) var(--radius-leaf) var(--radius-card);
}
/* TOPは写真が3枚縦に並ぶ。同じ向きだと単調なので向きを反転する。
   nth-of-type は各セクションに1つずつなので効かない。
   左右の配置を入れ替える既存の --reverse に紐づける。 */
.p-top-media--reverse .p-top-media__figure {
  border-radius: var(--radius-card) var(--radius-leaf) var(--radius-card) var(--radius-leaf);
}

/* --- 項目の頭に添えるアイコン ---
   文字だけで並ぶ表や手順に、意味を助ける絵を足す。
   意味を色や形だけに預けないよう、必ず文字ラベルと併記する。
   アイコン自体は aria-hidden なので読み上げには出ない。 */
/* リセットで svg は display:block にしてあるため、
   文字と横に並べたいものは inline-block に戻す必要がある。
   fill も currentColor にしないと色が効かない（既定の黒のままになる）。 */
.c-deflist__icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-right: 0.35em;
  vertical-align: -0.17em;
  fill: currentColor;
  color: var(--color-button-green);
}
.p-flow__icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
  color: var(--color-button-green);
}
@media (min-width: 768px) {
  .p-flow__icon {
    width: 26px;
    height: 26px;
  }
}

/* ============================================================
   オープニング

   紙色の幕が本文の上に乗り、ロゴのクローバーが葉ごとに開いて、
   幕ごと上へ抜ける。全体で約1.7秒。

   ★本文は隠さない。幕は上に乗るだけ。
     参考サイトのように本文を opacity:0 で待たせると、JSが1行落ちた
     だけでページが白紙のままになる。ここは CSS のアニメーションだけで
     必ず幕が消えるので、JSが動かなくても本文にたどり着ける。
   ★動きを減らす設定のときは、そもそも表示しない。
   ★セッション中2回目以降は JS が即座に外す。
   ============================================================ */
.c-opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  pointer-events: none;
  animation: cocoro-opening-veil 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.c-opening__mark {
  width: min(38vw, 190px);
  height: auto;
  opacity: 0;
  animation: cocoro-opening-mark 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}
/* 葉が1枚ずつ、わずかに遅れて開く */
.c-opening__mark .c-mark__leaf {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: cocoro-opening-leaf 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.c-opening__mark .c-mark__leaf:nth-of-type(1) { animation-delay: 0.12s; }
.c-opening__mark .c-mark__leaf:nth-of-type(2) { animation-delay: 0.17s; }
.c-opening__mark .c-mark__leaf:nth-of-type(3) { animation-delay: 0.22s; }
.c-opening__mark .c-mark__leaf:nth-of-type(4) { animation-delay: 0.27s; }
.c-opening__mark .c-mark__leaf:nth-of-type(5) { animation-delay: 0.20s; }
.c-opening__mark .c-mark__leaf:nth-of-type(6) { animation-delay: 0.25s; }
.c-opening__mark .c-mark__leaf:nth-of-type(7) { animation-delay: 0.30s; }
.c-opening__mark .c-mark__leaf:nth-of-type(8) { animation-delay: 0.35s; }
/* 茎はあとから伸びる */
.c-opening__mark .c-mark__stem {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: cocoro-opening-stem 0.62s cubic-bezier(0.65, 0, 0.35, 1) 0.50s forwards;
}

@keyframes cocoro-opening-veil {
  0%, 73% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2%); visibility: hidden; }
}
@keyframes cocoro-opening-mark {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes cocoro-opening-leaf {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes cocoro-opening-stem {
  to { stroke-dashoffset: 0; }
}

/* 動きを減らす設定のときは、幕そのものを出さない。
   （幕を残したまま animation だけ潰すと、幕が消えず本文に到達できない） */
@media (prefers-reduced-motion: reduce) {
  .c-opening {
    display: none;
  }
}

/* --- 募集要項の職種カード --- */
.p-jobs {
  display: grid;
  gap: 28px;
}
@media (min-width: 768px) {
  .p-jobs {
    gap: 40px;
  }
}
.p-job {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 20px 8px;
}
@media (min-width: 768px) {
  .p-job {
    padding: 30px 32px 12px;
  }
}
.p-job__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.p-job__type {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-section-pale);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-button-green);
}
.p-job__title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .p-job__title {
    font-size: 22px;
  }
}
/* カードの中では、定義リストの上端の罫線を省く（カードの枠と二重になるため） */
.p-job .c-deflist {
  border-top: 0;
}

/* --- ロゴ --- */
.c-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.c-logo__image {
  width: auto;
  height: 40px;
}
.c-logo__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .c-logo {
    gap: 10px;
  }
  .c-logo .c-mark {
    width: auto;
    height: 46px;
  }
  .c-logo__image {
    height: 52px;
  }
  .c-logo__name {
    font-size: 19px;
  }
}
.c-logo--footer .c-logo__name {
  font-size: 18px;
}

/* --- ボタン --- */
.c-button1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-text-invert);
  background-color: var(--color-button);
  border-radius: var(--radius-button);
  padding: 10px 18px;
  transition: background-color var(--transition), transform var(--transition);
}
.c-button1 .c-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}
@media (min-width: 1200px) {
  .c-button1 {
    gap: 12px;
    font-size: 16px;
    padding: 15px 28px;
  }
  .c-button1 .c-icon {
    width: 19px;
    height: 19px;
  }
}
.c-button1--green {
  background-color: var(--color-button-green);
}
@media (hover: hover) {
  .c-button1:hover {
    background-color: var(--color-button-hover);
  }
  .c-button1--green:hover {
    background-color: var(--color-button-green-hover);
  }
}

.c-button-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 6px;
  transition: color var(--transition), border-color var(--transition), gap var(--transition);
}
.c-button-more::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}
@media (hover: hover) {
  .c-button-more:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    gap: 16px;
  }
}

/* --- 大きいCTAボタン（電話 / フォーム） --- */
.c-button-contact {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  min-height: 76px;
  padding: 12px 24px;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  transition: background-color var(--transition), color var(--transition);
}
@media (min-width: 1200px) {
  .c-button-contact {
    gap: 24px;
    max-width: 383px;
    min-height: 88px;
    padding: 12px 40px;
  }
}
.c-button-contact .c-icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}
.c-button-contact__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  line-height: 1;
}
.c-button-contact__main {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media (min-width: 1200px) {
  .c-button-contact__main {
    font-size: 26px;
  }
}
.c-button-contact__sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
.c-button-contact--tel {
  background-color: var(--color-tel);
  border-color: var(--color-tel);
  color: #fff;
}
.c-button-contact--mail {
  background-color: var(--color-button-green);
  border-color: var(--color-button-green);
  color: #fff;
  justify-content: center;
}
.c-button-contact--mail .c-button-contact__main {
  font-size: 17px;
}
@media (min-width: 1200px) {
  .c-button-contact--mail .c-button-contact__main {
    font-size: 19px;
  }
}
@media (hover: hover) {
  .c-button-contact--tel:hover {
    background-color: #fff;
    color: var(--color-tel);
  }
  .c-button-contact--mail:hover {
    background-color: #fff;
    color: var(--color-button-green);
  }
}

/* --- 追従フローティングCTA（SP専用） --- */
.p-float {
  position: fixed;
  right: 0;
  bottom: 6%;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity var(--transition), transform var(--transition);
}
/* opacity と pointer-events だけではキーボードのTabが通ってしまい、
   見えない電話ボタンにフォーカスが移る。visibility で遮る。 */
.p-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(20px);
}
@media (min-width: 1200px) {
  .p-float {
    display: none;
  }
}
.c-button-float {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-large) 0 0 var(--radius-large);
  background-color: var(--color-button-green);
  color: #fff;
  box-shadow: var(--shadow);
}
.c-button-float .c-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.c-button-float--orange {
  background-color: var(--color-tel);
}

/* --- セクション見出し（サイト全体のシグネチャ） --- */
.c-section-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.c-section-title .main {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.c-section-title .sub {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-heading-sub);
}
@media (min-width: 1200px) {
  .c-section-title {
    gap: 14px;
  }
  .c-section-title .main {
    font-size: 38px;
  }
  .c-section-title .sub {
    font-size: 16px;
  }
}
.c-section-title--left {
  align-items: flex-start;
  text-align: left;
}
.c-section-title--green .sub {
  color: var(--color-heading-sub-alt);
}
.c-section-title--white .main,
.c-section-title--white .sub {
  color: var(--color-text-invert);
}

/* --- パンくず --- */
.c-breadcrumb {
  padding-block: 14px;
}
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "›";
  margin-right: 6px;
  color: var(--color-border-strong);
}
.c-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .c-breadcrumb a:hover {
    color: var(--color-accent);
  }
}

/* --- 定義リスト表 --- */
.c-deflist {
  border-top: 1px solid var(--color-border);
}
.c-deflist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .c-deflist__row {
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding-block: 18px;
    align-items: baseline;
  }
  /* アクセスマップの案内だけは縦並びにする。
     「公共交通機関でお越しの方」のように項目名が長く、
     200px の列では折り返して読みにくくなるため。
     会社概要・施設情報・募集要項は項目名が短く、横並びのほうが締まる。 */
  .p-map .c-deflist__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.c-deflist__term {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-sub);
}
.c-deflist__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-line;
}
/* 値の下に添える但し書き。
   値のすぐ下に同じ字下げで置くと「値の続き」に見えて読みにくい。
   ※ を立てて字下げを揃え、注記だとひと目で分かるようにする。 */
.c-deflist__note {
  display: block;
  margin-top: 8px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  max-width: 34em;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-sub);
  white-space: normal;
}
.c-deflist__note::before {
  content: '※';
  margin-right: 0.35em;
}

/* --- アコーディオン（FAQ） --- */
.c-accordion {
  border-top: 1px solid var(--color-border);
}
.c-accordion__q {
  border-bottom: 1px solid var(--color-border);
}
/* 開いているときは、質問と答えのあいだの線を消す。
   対になっているものの真ん中に線が入ると、別々の項目に見えてしまう。 */
.c-accordion__q:has(+ .c-accordion__a:not([hidden])) {
  border-bottom-color: transparent;
}
.c-accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 16px 40px 16px 0;
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  transition: color var(--transition);
}
.c-accordion__trigger::after,
.c-accordion__trigger::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-button-green);
  border-radius: 2px;
  transition: transform var(--transition);
}
.c-accordion__trigger::before {
  transform: translateY(-50%) rotate(90deg);
}
.c-accordion__trigger::after {
  transform: translateY(-50%);
}
.c-accordion__trigger[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(0deg);
}
.c-accordion__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.c-accordion__q .c-accordion__badge {
  background: var(--color-button-green);
}
.c-accordion__a .c-accordion__badge {
  background: var(--color-accent);
}
.c-accordion__a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* 上は質問との間隔、下は次の質問との間隔。
     質問側の padding（16px）と足して、上下が同じ見えになるようにする。 */
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
  /* 答えは補足ではなく、知りたい内容そのもの。薄くする理由がない。
     質問が 14.78:1 なのに答えが 4.74:1 では落差が大きすぎる。 */
  color: var(--color-text);
}
.c-accordion__a[hidden] {
  display: none;
}
@media (hover: hover) {
  .c-accordion__trigger:hover {
    color: var(--color-accent);
  }
}

/* --- お知らせカード --- */
/* サムネイルは持たない。日付・カテゴリー・タイトルだけを見せる。
   以前は画像の有無にかかわらず 96px の列を確保していたため、
   アイキャッチが未設定の記事では本文が押し込まれて折り返していた。 */
.c-card-news {
  display: block;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (min-width: 1200px) {
  .c-card-news {
    padding: 20px 24px;
  }
}
.c-card-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.c-card-news__time {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}
.c-card-news__term {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-section-pale);
  color: var(--color-button-green);
}
.c-card-news__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1200px) {
  .c-card-news__text {
    font-size: 17px;
  }
}
@media (hover: hover) {
  .c-card-news:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
}

/* --- スタッフカード --- */
.c-card-staff {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.c-card-staff__img {
  aspect-ratio: 3 / 4;
}
.c-card-staff__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-card-staff__content {
  padding: 16px 18px 20px;
}
.c-card-staff__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
}
.c-card-staff__post {
  font-size: 13px;
  color: var(--color-text-sub);
  margin-top: 2px;
}
.c-card-staff__comment {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 10px;
}

/* --- 準備中の枠 --- */
.c-preparing {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  padding: 32px 20px 40px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.c-preparing__image {
  width: 100%;
  max-width: 720px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.c-preparing__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-line;
}
.c-preparing__badge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--brand-accent-pale);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
}

/* --- 注記ボックス --- */
.c-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.c-note--pale {
  background: var(--color-section-pale);
  border-color: color-mix(in srgb, var(--color-button-green) 26%, var(--color-border));
}

/* --- フォーム --- */
.c-form__list {
  display: grid;
  gap: 20px;
}
.c-form__item {
  display: grid;
  gap: 6px;
}
@media (min-width: 1200px) {
  .c-form__item {
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
  }
}
.c-form__term {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding-top: 10px;
}
.c-form__required,
.c-form__optional {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.6;
}
.c-form__required {
  background: var(--brand-accent-pale);
  color: var(--color-accent);
}
.c-form__optional {
  background: var(--color-surface-pale);
  color: var(--color-text-sub);
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea,
.c-form select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.c-form input:focus,
.c-form textarea:focus,
.c-form select:focus {
  border-color: var(--color-button-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-button-green) 18%, transparent);
  outline: none;
}
.c-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 10px;
}
.c-form__radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14.5px;
  cursor: pointer;
}
.c-form__policy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-body);
  font-size: 14px;
}
.c-form__policy a {
  color: var(--color-button-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.c-form__submit {
  display: grid;
  justify-items: center;
  margin-top: 22px;
}
.c-form__note {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin-top: 4px;
}

/* --- ページネーション --- */
.c-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.c-pagination a,
.c-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border-radius: var(--radius-button);
  font-family: var(--font-en);
  font-weight: 700;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.c-pagination .is-current {
  background: var(--color-button-green);
  border-color: var(--color-button-green);
  color: #fff;
}

/* ============================================================
   6. Project
   ============================================================ */

/* --- ヘッダー --- */
.p-header {
  position: sticky;
  top: 0;
  z-index: 7000;
  height: var(--header-h);
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
}
.p-header__inner {
  max-width: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 16px;
}
@media (min-width: 1200px) {
  .p-header__inner {
    padding-inline: 24px;
    gap: 24px;
  }
}
.p-header__nav,
.p-header__cta {
  display: none;
}
@media (min-width: 1200px) {
  .p-header__nav {
    display: block;
    margin-left: auto;
  }
  .p-header__cta {
    display: flex;
    gap: 10px;
  }
}
.p-header__nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
}
.p-header__nav-list a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: 6px;
  transition: color var(--transition);
}
.p-header__nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.p-header__nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .p-header__nav-list a:hover {
    color: var(--color-accent);
  }
  .p-header__nav-list a:hover::after {
    transform: scaleX(1);
  }
}

/* ハンバーガー */
.p-header__hamburger {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
}
@media (min-width: 1200px) {
  .p-header__hamburger {
    display: none;
  }
}
.p-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
.p-header__hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.p-header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.p-header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ドロワー */
.p-drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 6900;
  background: var(--color-bg);
  padding: 28px 20px 60px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 26px;
}
.p-drawer[hidden] {
  display: none;
}
@media (min-width: 1200px) {
  .p-drawer {
    display: none !important;
  }
}
.p-drawer__nav-list {
  display: grid;
  gap: 2px;
}
.p-drawer__nav-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}
.p-drawer__nav-list .en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading-sub);
}
.p-drawer__cta {
  display: grid;
  gap: 10px;
}
.p-drawer__cta .c-button1 {
  padding-block: 15px;
  font-size: 15px;
}
.p-drawer__info {
  display: grid;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.8;
}

/* --- 下層FV --- */
.p-lower-fv {
  position: relative;
  background: var(--color-section-pale);
}
.p-lower-fv__inner {
  display: grid;
  /* スマホでは、ヘッダーの下に少し余白を置いてから画像を始める。
     画像がヘッダーに接していると窮屈に見えるため。
     そのぶん、画像と見出しの間は詰める。 */
  gap: 14px;
  padding-block: 30px 0;
}
.p-lower-fv__img {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--radius-card);
}
/* 画像を持たない下層FV（管理画面から追加した固定ページ）。
   上の余白は画像を前提にした値なので打ち消す。 */
.p-lower-fv__inner:not(:has(.p-lower-fv__img)) {
  padding-block: 0;
  gap: 0;
}
.p-lower-fv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-lower-fv__heading {
  display: grid;
  gap: 6px;
  padding: 14px 0 26px;
}
.p-lower-fv__heading .main {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
}
.p-lower-fv__heading .sub {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-heading-sub);
}
@media (min-width: 1200px) {
  .p-lower-fv__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding-block: 40px;
  }
  .p-lower-fv__inner:not(:has(.p-lower-fv__img)) {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .p-lower-fv__img {
    aspect-ratio: 2 / 1;
    order: 2;
  }
  .p-lower-fv__heading {
    padding: 0;
    gap: 10px;
    order: 1;
  }
  .p-lower-fv__heading .main {
    font-size: 42px;
  }
  .p-lower-fv__heading .sub {
    font-size: 15px;
  }
}

/* --- 2カラム（ローカルナビ + 本文） --- */
.p-column2b {
  display: grid;
  gap: 28px;
}
@media (min-width: 1200px) {
  .p-column2b {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}
.p-localnav {
  display: none;
}
@media (min-width: 1200px) {
  .p-localnav {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.p-localnav ul {
  display: grid;
  gap: 1px;
  border-left: 2px solid var(--color-border);
}
.p-localnav a {
  display: block;
  padding: 8px 0 8px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-sub);
  transition: color var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .p-localnav a:hover {
    color: var(--color-text);
    border-left-color: var(--color-accent);
  }
}

/* --- 共通お問い合わせ帯 --- */
.p-contact {
  padding-block: 56px 64px;
  margin-top: 80px;
}
@media (min-width: 1200px) {
  .p-contact {
    padding-block: 72px 84px;
    margin-top: 130px;
  }
}
.p-contact__box {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}
.p-contact__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  white-space: pre-line;
}
.p-contact__buttons {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: 100%;
  margin-top: 6px;
}
@media (min-width: 768px) {
  .p-contact__buttons {
    grid-auto-flow: column;
    justify-content: center;
  }
}
.p-contact__note {
  font-size: 12.5px;
  color: var(--color-text-sub);
}

/* --- フッター --- */
.p-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-block: 44px 22px;
}
/* お問い合わせ帯（緑）から波でつながる場合は、区切り線を出さない。
   線が残ると波の上に横一文字が乗ってしまう。
   お問い合わせ帯を出さないページ（プライバシーポリシー等）では線が要るので残す。 */
.p-contact + .p-footer {
  border-top: 0;
}
@media (min-width: 1200px) {
  .p-footer {
    padding-block: 68px 24px;
  }
}
.p-footer__inner {
  display: grid;
  gap: 34px;
}
@media (min-width: 1200px) {
  .p-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: start;
  }
}
.p-footer__brand {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.p-footer__address {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-footer__tel {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.p-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (min-width: 1200px) {
  .p-footer__nav {
    gap: 10px 56px;
  }
}
.p-footer__nav-list {
  display: grid;
  gap: 2px;
  align-content: start;
}
.p-footer__nav-list a {
  display: grid;
  gap: 1px;
  padding-block: 7px;
  transition: color var(--transition);
}
.p-footer__nav-list .jp {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
}
.p-footer__nav-list .en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading-sub);
}
@media (hover: hover) {
  .p-footer__nav-list a:hover .jp {
    color: var(--color-accent);
  }
}
.p-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-sub);
}
.p-footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-footer__copyright {
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

/* ============================================================
   トップページ
   ============================================================ */
.p-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  max-height: 760px;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.p-hero__media {
  position: absolute;
  inset: 0;
}
.p-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.15) 0%, rgba(20, 16, 10, 0.1) 40%, rgba(20, 16, 10, 0.72) 100%);
}
.p-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 40px 56px;
}
@media (min-width: 1200px) {
  .p-hero__inner {
    padding-block: 60px 90px;
  }
}
.p-hero__catch {
  font-family: var(--font-heading);
  font-size: clamp(25px, 6.6vw, 38px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: pre-line;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1200px) {
  .p-hero__catch {
    font-size: 50px;
    line-height: 1.5;
  }
}
.p-hero__sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.p-hero__sub .c-mark {
  width: auto;
  height: 20px;
}
.p-hero__meta {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
}

/* 汎用のトップセクション */
.p-top-section {
  padding-block: 56px;
}
@media (min-width: 1200px) {
  .p-top-section {
    padding-block: 90px;
  }
}
.p-top-section--pale {
  background: var(--color-section-pale);
}
.p-top-section--surface {
  background: var(--color-surface);
}
.p-top-section__head {
  margin-bottom: 28px;
}
@media (min-width: 1200px) {
  .p-top-section__head {
    margin-bottom: 44px;
  }
}
.p-top-media {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 1200px) {
  .p-top-media {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .p-top-media--reverse .p-top-media__figure {
    order: 2;
  }
}
.p-top-media__figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-top-media__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top-media__body {
  display: grid;
  gap: 16px;
  justify-items: start;
}
.p-top-media__catch {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  white-space: pre-line;
}
@media (min-width: 1200px) {
  .p-top-media__catch {
    font-size: 30px;
  }
}
.p-top-media__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  white-space: pre-line;
}

.p-top-news__list {
  display: grid;
  gap: 12px;
}
.p-top-news__foot,
.p-top-section__foot {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.p-top-news__empty {
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-text-sub);
  padding-block: 20px;
}

/* トップ：施設カード3枚 */
.p-cards3 {
  display: grid;
  gap: 18px;
}
@media (min-width: 768px) {
  .p-cards3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: grid;
  align-content: start;
}
.p-card__figure {
  aspect-ratio: 4 / 3;
}
.p-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-card__body {
  padding: 18px 20px 24px;
  display: grid;
  gap: 8px;
}
.p-card__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.p-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ============================================================
   下層ページ個別
   ============================================================ */
.p-block + .p-block {
  margin-top: 56px;
}
@media (min-width: 1200px) {
  .p-block + .p-block {
    margin-top: 90px;
  }
}
.p-block__head {
  margin-bottom: 22px;
}
@media (min-width: 1200px) {
  .p-block__head {
    margin-bottom: 34px;
  }
}
.p-block__lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2;
  white-space: pre-line;
  margin-bottom: 24px;
}

/* 施設：ヘッダー部 */
.p-facility-head {
  display: grid;
  gap: 20px;
}
@media (min-width: 1200px) {
  .p-facility-head {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }
}
.p-facility-head__figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-facility-head__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-facility-head__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--color-button-green);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  margin-bottom: 10px;
}
.p-facility-head__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 1200px) {
  .p-facility-head__title {
    font-size: 32px;
  }
}
.p-facility-head__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  white-space: pre-line;
  margin-top: 12px;
}

/* 施設案内：ジグザグ */
.p-guide__list {
  display: grid;
  gap: 34px;
}
@media (min-width: 1200px) {
  .p-guide__list {
    gap: 60px;
  }
}
.p-guide__item {
  display: grid;
  gap: 16px;
}
@media (min-width: 1200px) {
  .p-guide__item {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
  }
  .p-guide__item:nth-child(even) figure {
    order: 2;
  }
}
.p-guide__item figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-guide__item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-guide__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
@media (min-width: 1200px) {
  .p-guide__title {
    font-size: 22px;
  }
}
.p-guide__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* こころについて */
.p-about-purpose {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding-block: 20px 10px;
}
.p-about-purpose .c-mark {
  width: 72px;
  height: 72px;
}
.p-about-purpose__catch {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  white-space: pre-line;
}
@media (min-width: 1200px) {
  .p-about-purpose__catch {
    font-size: 36px;
  }
}
.p-about-purpose__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--color-text-sub);
  white-space: pre-line;
}

.p-pvv {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 28px 22px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
@media (min-width: 1200px) {
  .p-pvv {
    padding: 44px 48px;
  }
}
/* 装飾のクローバー。
   ロゴ差し替えでマークが正方形から横長（430×328）に変わり、
   上へ大きくはみ出して切れていた。枠の中に収まる位置に置き直す。 */
.p-pvv__deco {
  position: absolute;
  right: 10px;
  top: 12px;
  width: 84px;
  height: auto;
  opacity: 0.28;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .p-pvv__deco {
    right: 26px;
    top: 20px;
    width: 124px;
  }
}
.p-pvv__catch {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.75;
  white-space: pre-line;
  position: relative;
}
@media (min-width: 1200px) {
  .p-pvv__catch {
    font-size: 27px;
  }
}
.p-vision-list {
  counter-reset: v;
  display: grid;
  gap: 14px;
}
.p-vision-list li {
  counter-increment: v;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
}
.p-vision-list li::before {
  content: "0" counter(v);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.p-message {
  display: grid;
  gap: 22px;
}
@media (min-width: 1200px) {
  .p-message {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 50px;
    align-items: start;
  }
}
.p-message__figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-message__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-message__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2.1;
  white-space: pre-line;
}
.p-message__sign {
  margin-top: 20px;
  text-align: right;
  font-family: var(--font-heading);
}
.p-message__role {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-text-sub);
}
.p-message__name {
  font-size: 20px;
  font-weight: 700;
}

/* 採用の流れ */
.p-flow {
  display: grid;
  gap: 16px;
  counter-reset: f;
}
@media (min-width: 1200px) {
  .p-flow {
    gap: 22px;
  }
}
.p-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 1200px) {
  .p-flow__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 28px;
    padding: 28px 34px;
  }
}
.p-flow__step {
  display: grid;
  justify-items: center;
  gap: 2px;
  align-content: start;
}
.p-flow__label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-sub);
}
.p-flow__number {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1200px) {
  .p-flow__number {
    font-size: 44px;
  }
}
.p-flow__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
@media (min-width: 1200px) {
  .p-flow__title {
    font-size: 21px;
  }
}
.p-flow__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  white-space: pre-line;
}

/* 本文（プライバシーポリシー等） */
.p-doc {
  font-family: var(--font-body);
}
.p-doc h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 36px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1200px) {
  .p-doc h2 {
    font-size: 21px;
  }
}
.p-doc h2:first-child {
  margin-top: 0;
}
.p-doc p {
  font-size: 15px;
  line-height: 2.05;
}
.p-doc p + p {
  margin-top: 14px;
}
.p-doc ol {
  counter-reset: d;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.p-doc ol li {
  counter-increment: d;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  font-size: 15px;
  line-height: 1.9;
}
.p-doc ol li::before {
  content: counter(d) ".";
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.p-doc__contact {
  margin-top: 16px;
  padding: 20px 22px;
  background: var(--color-surface);
  border-radius: var(--radius-large);
  border: 1px solid var(--color-border);
  font-size: 14.5px;
  line-height: 2;
}
.p-doc__date {
  margin-top: 30px;
  text-align: right;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* アクセス */
.p-map {
  display: grid;
  gap: 20px;
}
@media (min-width: 1200px) {
  .p-map {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
}
/* 地図と、その下の「Googleマップで見る」をひとまとめにする。
   .p-map が1200px以上で2カラムになるため、地図とリンクは1つの子にしておく。 */
.p-map__col {
  display: grid;
  gap: 10px;
  align-content: start;
}
.p-map__frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-pale);
}
.p-map__link {
  font-size: 14px;
}
.p-map__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-sub);
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.p-map__link .c-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}
@media (hover: hover) {
  .p-map__link a:hover {
    color: var(--color-button-green);
  }
}
.p-map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 404 */
.p-404 {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding-block: 60px 40px;
}
.p-404__code {
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

/* ============================================================
   7. Utility
   ============================================================ */
.u-sp {
  display: block;
}
.u-pc {
  display: none;
}
@media (min-width: 1200px) {
  .u-sp {
    display: none;
  }
  .u-pc {
    display: block;
  }
}
.br-pc {
  display: none;
}
@media (min-width: 1200px) {
  .br-pc {
    display: inline;
  }
}
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-center {
  text-align: center;
}
.u-mt-s {
  margin-top: 12px;
}
.u-mt-m {
  margin-top: 24px;
}
.u-mt-l {
  margin-top: 40px;
}

/* スクロール演出（IntersectionObserver。ライブラリ不使用） */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
  }
}