@charset "UTF-8";
/* =========================================================
   ルアナケア Webサイト  base + components
   design base: 1920px / 1pt = 1px
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* color */
  --c-primary: #006433;
  --c-primary-deep: #006934;
  --c-accent: #81b440;
  --c-teal: #137f6e;
  --c-teal-light: #2dac95;
  --c-green-mid: #469e4d;
  --c-green-soft: #7fb199;
  --c-text: #333333;
  --c-yellow: #f5d220;
  --c-yellow-soft: #f6e868;
  --c-cream: #fcfad7;
  --c-mint: #e3f1e0;
  --c-green-pale: #c7e4c2;
  --c-green-bg: #90c985;
  --c-blob: #e9f4e7;
  --c-line: #c9caca;
  --c-white: #ffffff;
  --c-watermark: #cdd12c;

  /* typography */
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --fs-body: 16px;
  --fs-lead: 20px;
  --lh-body: 2;

  /* layout */
  --sidebar-w: clamp(260px, 27.5vw, 528px);
  --gutter: clamp(20px, 5vw, 96px);
  --content-width: 1200px;
  --content-width-narrow: 1104px;

  /* shape */
  --r-card: 40px;
  --r-media: 24px;
  --r-pill: 999px;

  /* decoration heights (design px) */
  --band-top: 249px;
  --band-strip: 160px;
  --band-ground: 249px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;   /* 全体ルール：1文字だけが次の行に落ちる改行を避ける */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s, background-color .25s, border-color .25s, opacity .25s; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }

:focus-visible {
  outline: 3px solid var(--c-teal-light);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  padding: 10px 18px; border-radius: 8px;
  background: var(--c-primary); color: #fff; font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   Layout
   ========================================================= */
.l-wrap {
  display: flex;
  align-items: flex-start;
}

.l-main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding-bottom: 40px;
}

.c-container {
  width: min(var(--content-width), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.c-container--narrow { max-width: var(--content-width-narrow); }

/* full-bleed colour bands inside main */
.c-band { position: relative; }

/* =========================================================
   Sidebar navigation (PC) / drawer (SP)
   ========================================================= */
.l-sidebar {
  /* 画面の高さに追従させ、どの高さでもメニュー全体が収まるようにする
     （スクロールバーを出さない）。 */
  --nav-pad-y:   clamp(18px, 3.2vh, 40px);
  --nav-logo-gap:clamp(16px, 3.2vh, 40px);
  --nav-gap:     clamp(10px, 1.8vh, 22px);
  --nav-item-h:  clamp(42px, 4.4vh, 48px);
  --nav-cta-gap: clamp(14px, 2.6vh, 32px);
  --nav-cta-h:   clamp(56px, 7.4vh, 80px);
  /* 文字も画面の高さに追従させる。低い画面でメニューが収まらなくなるのを防ぐ。 */
  --nav-fs:      min(clamp(16px, 1.25vw, 24px), 3.15vh);
  --nav-sub-fs:  min(clamp(16px, 1vw, 19px), 2.55vh);

  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--nav-pad-y) 0 calc(var(--nav-pad-y) * .8);
  background: var(--c-white);
  z-index: 30;
  scrollbar-width: none;
}
.l-sidebar::-webkit-scrollbar { width: 0; height: 0; }

.l-sidebar__logo {
  display: block;
  width: min(clamp(180px, 17.6vw, 337px), 40vh);
  margin: 0 0 var(--nav-logo-gap) clamp(16px, 5vw, 96px);
}

.c-nav { padding-inline: clamp(16px, 5vw, 96px); }

.c-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--nav-item-h);
  padding: 4px 10px 4px 16px;
  font-size: var(--nav-fs);
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-primary);
  border-bottom: 2px dashed var(--c-green-soft);
  border-radius: 8px 8px 0 0;
}
.c-nav__item::after {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--c-primary);
}
.c-nav__item:hover,
.c-nav__item:focus-visible,
.c-nav__item.is-current { background: var(--c-cream); }

.c-nav__sub { padding: clamp(8px, 1.3vh, 14px) 0 clamp(4px, .8vh, 8px) 20px; }
.c-nav__sub li + li { margin-top: clamp(8px, 1.4vh, 15px); }
.c-nav__sub a {
  font-size: var(--nav-sub-fs);
  line-height: 1.4;
  color: var(--c-primary);
}
.c-nav__sub a::before { content: "・"; }
.c-nav__sub a:hover { color: var(--c-accent); }

.c-nav > ul > li + li { margin-top: var(--nav-gap); }
.c-nav > ul > li:has(.c-nav__sub) + li { margin-top: 0; }

.c-nav__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: var(--nav-cta-gap) clamp(16px, 5vw, 96px) 0;
  min-height: var(--nav-cta-h);
  padding: 10px 20px 10px 32px;
  font-size: var(--nav-fs);
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-yellow-soft);
  border-radius: 8px;
}
.c-nav__cta::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--c-primary);
}
.c-nav__cta:hover { background: var(--c-yellow); }

/* mobile header */
.l-mobilebar { display: none; }

/* =========================================================
   Decoration bands
   ========================================================= */
.c-deco {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.c-deco img { width: 100%; height: auto; }

.c-deco--top { top: 0; z-index: 0; }  /* 写真・ロゴ看板（z-index:1）の後ろ＝背景側。先方 10/7 指示 #4「イラストが写真の裏です」＝裏に回す（10/12 確定。9/16 に前面にしたのを逆にした） */
.c-deco--ground { bottom: 0; }
.c-deco--strip { top: 0; }
/* FLOWの花葉は見本どおり上から垂らし、左右も合わせる。 */
.c-deco--strip img { transform: rotate(180deg); }

/* =========================================================
   Page hero
   ========================================================= */
.c-hero {
  position: relative;
  margin: 88px var(--gutter) 0 0;
  z-index: 1;
}
.c-hero__media {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 1296 / 288;
}
.c-hero__media picture { display: block; width: 100%; height: 100%; }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.c-hero__title {
  position: absolute;
  left: clamp(20px, 7.5%, 144px);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(20px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  z-index: 1;
}
/* TOP hero board */
/* 重なりは3層：木の板（この箱の背景）→ 上部の花・葉（.c-deco--top, z-index:0）→ 白い看板（::before）→ ロゴ・文字。
   箱は位置指定なし（static）にして、背景の木の板が花・葉より奥に描かれるようにする */
.c-hero-board {
  margin: 88px var(--gutter) 0 0;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 1296 / 536;
  background: #8c6239 url("../images/hero-board.webp") center / cover no-repeat;
  display: grid;
  place-items: center;
}
/* 白い看板：木の板の画像から看板だけを切り抜いた画像を、箱の背景と同じ位置・大きさで重ねる（background-* は箱から引き継ぐ） */
.c-hero-board::before {
  content: "";
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  z-index: 1;
  background-image: url("../images/hero-board-paper.webp");
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: inherit;
  pointer-events: none;
}
.c-hero-board__inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 660px;
  text-align: center;
  transform: translateY(2%);
}
.c-hero-board__logo { width: 100%; margin-inline: auto; }
.c-hero-board__lead {
  margin-top: clamp(8px, 1.7%, 26px);
  font-size: clamp(11px, 1.67vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--c-teal-light);
}

/* =========================================================
   Headings
   ========================================================= */
.c-section-head { text-align: center; }
.c-section-head--left { text-align: left; }
.c-section-head__en {
  display: block;
  font-size: clamp(12px, .84vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2em;
  color: var(--c-accent);
}
.c-section-head__ja {
  margin-top: 10px;
  font-size: clamp(22px, 1.875vw, 36px);   /* 1920px幅で36px */
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .08em;
  color: var(--c-primary);
}
.c-section-head--onlight .c-section-head__en { color: #fff; }
.c-section-head--onlight .c-section-head__ja { color: #fff; }

.c-catch {
  font-size: clamp(20px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: .08em;
  color: var(--c-primary);
}

/* =========================================================
   Buttons
   ========================================================= */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(328px, 100%);
  min-height: 64px;
  padding: 10px 28px;
  font-size: clamp(16px, .94vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--c-teal);
  background: var(--c-white);
  border: 2px solid var(--c-teal);
  border-radius: var(--r-pill);
}
.c-btn::after { content: "→"; font-size: 1.1em; line-height: 1; }
.c-btn:hover,
.c-btn:focus-visible { color: #fff; background: var(--c-teal); }
.c-btn--wide { min-width: min(360px, 100%); }
.c-btn--center { display: flex; margin-inline: auto; width: fit-content; }
/* 黄色の塗りのボタン（採用募集の「お問い合わせはこちら」。先方指示 10/19）。見本は約432×80px。ホバー・フォーカスは他の .c-btn と同じく teal に白文字 */
.c-btn--yellow {
  min-width: min(432px, 100%);
  min-height: 80px;
  /* 見本の実測：文字 約23px、文字の左端・矢印の右端ともボタンの端から約58px。ボタンの幅（432px）が画面幅で変わらないので、文字と余白も固定（伊藤さん指示 10/19：どの画面でも見本と同じ大きさに）。スマホは下の @media で 16px に戻す */
  padding-inline: 57px;
  font-size: 23px;
  color: var(--c-primary);
  background: var(--c-yellow);
  border-color: var(--c-yellow);
}
.c-btn--yellow:hover,
.c-btn--yellow:focus-visible { color: #fff; background: var(--c-teal); border-color: var(--c-teal); }

/* =========================================================
   NEWS list (home)
   ========================================================= */
.c-news-list { border-top: 2px dashed var(--c-green-soft); }
.c-news-list__item { border-bottom: 2px dashed var(--c-green-soft); }
.c-news-list__link {
  display: grid;
  /* カテゴリー名が長い（例：ルアナハウス可児下恵土より）ためバッジが切れないよう確保する */
  grid-template-columns: clamp(110px, 8vw, 152px) clamp(216px, 13.6vw, 261px) 1fr;   /* 16pxのバッジ（最長13字）が収まる幅 */
  align-items: center;
  gap: 0 clamp(16px, 1.6vw, 30px);
  min-height: 64px;
  padding: 8px;
  font-size: clamp(16px, .94vw, 18px);
  color: var(--c-primary);
}
.c-news-list__link:hover { background: var(--c-cream); }
.c-news-list__date { letter-spacing: .04em; }
.c-news-list__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 10px;
  font-size: 16px;
  color: #fff;
  background: var(--c-accent);
  border-radius: 10px;
  white-space: nowrap;
}
.c-news-list__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
/* お知らせの緑ラベル（先方指示 2026-10-04）：先頭の「ルアナハウス」は、記事タイトルと施設名が重ならないよう、
   PC（1025px以上）とスマホ（767px以下）では出さない（「可児下恵土より」）。タブレット（768〜1024px）は全文のまま。
   テンプレートで先頭の語を span で包んでいる（luana_cat_label）。ラベルの大きさ・色・余白はそのまま */
@media (min-width: 1025px), (max-width: 767px) {
  .c-cat-prefix { display: none; }
}

/* =========================================================
   ABOUT band (home) — pale green + white card
   ========================================================= */
.c-band--about {
  background: var(--c-green-pale);
  padding: 48px 0 72px;   /* 白カードの下角が足元の装飾に隠れないよう空ける */
  margin-top: 96px;
}
.c-card-white {
  position: relative;
  z-index: 3;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: clamp(28px, 3.4vw, 48px);
}
.c-lead {
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 2;
  letter-spacing: .04em;
}
.c-list-check { margin-top: 30px; }
.c-list-check li {
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 2;
  color: var(--c-primary);
}
.c-list-check li::before { content: "・"; }
.c-note { margin-top: 26px; font-size: var(--fs-body); line-height: 2; }

/* =========================================================
   Strength blocks (home)
   ========================================================= */
.c-strength {
  display: grid;
  grid-template-columns: 480fr 528fr;
  gap: 96px;
  align-items: start;
}
.c-strength + .c-strength { margin-top: 96px; }
.c-strength--reverse { grid-template-columns: 528fr 480fr; }
.c-strength--reverse .c-strength__media { order: 2; }
.c-strength--reverse .c-strength__body { order: 1; }
.c-strength__media {
  aspect-ratio: 480 / 384;
}
.c-strength__media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-media);
}
/* 写真・カードの右下に添えるプルメリア＋モンステラ（カンプ準拠） */
.c-strength__media { position: relative; }
.c-strength__media::after {
  content: "";
  position: absolute;
  right: -1.6%;
  bottom: -6.3%;
  width: 32.8%;
  aspect-ratio: 168 / 160;
  background: url("../images/deco-corner.webp") right bottom / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* 写真が左側に来る項目は、装飾を外側（左下）に置き左右反転する（9.16 P4 見本） */
.c-strength:not(.c-strength--reverse) .c-strength__media::after {
  right: auto;
  left: -1.6%;
  transform: scaleX(-1);
}

.c-strength__title {
  font-size: clamp(19px, 1.7vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  /* カンプ実測 17文字/526px に合わせて僅かに詰める（1行に収める） */
  letter-spacing: -.04em;
  color: var(--c-primary);
}
.c-strength__text { margin-top: 34px; line-height: 2; }
.c-strength__body { padding-top: 24px; }

/* =========================================================
   VOICE band (home)
   ========================================================= */
.c-band--voice {
  background: var(--c-green-bg);
  padding: 78px 0 0;
  margin-top: 128px;
}
.c-voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 60px;
  margin-top: 37px;
}
/* ふきだしの高さが違っても人物の下端が揃うようにする */
.c-voice-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.c-voice-item > .c-voice-card { flex: 1 1 auto; }
.c-voice-card {
  position: relative;
  background: var(--c-white);
  border-radius: 20px;
  padding: 40px 24px;
  min-height: 472px;
}
.c-voice-card::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -26px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 28px 22px 0 22px;
  border-color: var(--c-white) transparent transparent transparent;
}
.c-voice-card__title {
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--c-green-mid);
  text-align: center;
}
.c-voice-card__text { margin-top: 32px; line-height: 2; }
.c-voice-figure {
  margin-top: auto;
  padding-top: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* 3人とも同じ高さに揃える。幅を揃えると中央の人物だけ顔が大きくなるため高さ基準。
   イラストのviewBoxは余白なしで人物にぴったりのため、高さ＝見える大きさ。 */
.c-voice-figure img {
  width: auto;   /* 比率は img の width/height 属性（＝SVG実寸）から得る */
  height: clamp(104px, 8.8vw, 170px);
  transition: transform .4s ease;
}
.c-voice-item:hover .c-voice-figure img,
.c-voice-item:focus-within .c-voice-figure img { transform: translateY(-10px) rotate(-3deg); }

/* =========================================================
   FLOW band (home)
   ========================================================= */
.c-band--flow {
  background: var(--c-primary);
  padding: 0 0 64px;
}
/* 花と葉をカードの上端に重ね、前面に表示する。 */
.c-band--flow .c-deco--strip { position: relative; top: 0; z-index: 4; }   /* 帯の上端から花を始める（PC-15：すき間をなくす） */
.c-band--flow .c-container { position: relative; z-index: 3; margin-top: -50px; }
.c-flow-card-wrap { padding: 46px clamp(24px, 4.7vw, 56px) 64px; }
.c-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 64px;
  margin-top: 42px;
}
.c-flow-card {
  --flow-num: 72px;   /* 番号の円の直径。左上の角丸と必ず一致させる */
  position: relative;
  border: 2px solid var(--c-primary);
  /* 左上は番号の円と同じ半径にして、円で角丸を完全に覆う（カンプ拡大図の通り） */
  border-radius: calc(var(--flow-num) / 2) 16px 16px 16px;
  padding: 46px 22px 26px;
  text-align: center;
  min-height: 272px;
}
.c-flow-card__num {
  position: absolute;
  /* 絶対配置はパディングボックス基準のため、枠線2px分ずらして
     角丸の弧の中心と円の中心を一致させる（弧が外側にはみ出すのを防ぐ） */
  top: -2px; left: -2px;
  display: grid;
  place-items: center;
  width: var(--flow-num); height: var(--flow-num);
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: clamp(26px, 2.1vw, 40px);
  font-weight: 900;
  line-height: 1;
}
.c-flow-card__icon { height: 56px; margin: 0 auto 18px; }
.c-flow-card__icon img { height: 100%; width: auto; margin-inline: auto; }
.c-flow-card__title {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--c-primary);
}
.c-flow-card__text { margin-top: 20px; font-size: var(--fs-body); line-height: 1.75; text-align: left; }
.c-flow-grid__arrow {
  position: absolute;
  top: 50%; right: -46px;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 20px 0 20px 26px;
  border-color: transparent transparent transparent var(--c-green-pale);
}

/* =========================================================
   CONTACT band (yellow)
   ========================================================= */
.c-band--contact {
  background: var(--c-yellow);
  padding: 94px 0;
  overflow: hidden;
}
.c-band--contact > * { position: relative; z-index: 1; }
.c-band--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/deco-monstera.svg");
  background-size: 1392px 520px;   /* カンプの柄グループ実寸 */
  background-repeat: repeat;
  opacity: 1;
  pointer-events: none;
}
/* お問い合わせページのフォーム帯は、モンステラ柄なしの単色（#f5d220）にする */
.c-band--form::before { content: none; }

.c-contact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 560fr 480fr;
  gap: 64px;
  align-items: stretch;
}
/* 左カラムのメールボタンを下端に寄せ、右の2つ目の電話ボタンと高さを揃える */
.c-contact > :first-child { display: flex; flex-direction: column; }
.c-contact__lead {
  margin-top: 26px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.6;
  color: var(--c-primary);
}
.c-contact__mail { padding-top: 66px; }
/* A7：PCではメールボタンと下段の電話ボタンを同じ行（subgrid）に置き、
   どの画面幅でも高さ・上端・下端がそろうようにする */
@media (min-width: 1025px) {
  .c-contact { grid-template-rows: auto auto; row-gap: 40px; }
  .c-contact > :first-child,
  .c-contact > .c-tel-list {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 40px;
  }
  .c-tel-list > :first-child { align-self: start; }
  .c-contact__mail { margin-top: 0; padding-top: 0; display: flex; }
  .c-contact__mail > .c-btn-box { flex: 1 1 auto; }
  /* 受付時間の1行（全角20字）がボタン幅に収まるよう、ボタン幅に応じて縮める（1600px未満で2行に折れていた） */
  .c-btn-box--mail { container-type: inline-size; }
  .c-btn-box--mail .c-btn-box__label { font-size: 16px; }   /* 全体ルール：最小16px */
  @container (min-width: 352px) { .c-btn-box--mail .c-btn-box__label { white-space: nowrap; } }
}
.c-tel-list { display: grid; gap: 40px; }

.c-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 128px;
  padding: 16px 24px;
  background: var(--c-white);
  border: 2px solid var(--c-primary);
  border-radius: 16px;
  color: var(--c-primary);
  text-align: center;
}
.c-btn-box__icon { flex: 0 0 auto; width: 56px; }
.c-btn-box__label { display: block; font-size: var(--fs-body); line-height: 1.5; letter-spacing: .06em; }
.c-btn-box__main {
  display: block;
  font-size: clamp(18px, 1.46vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
}
.c-btn-box__tel {
  display: block;
  font-size: clamp(24px, 2.1vw, 40px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}
a.c-btn-box:hover { background: var(--c-cream); }
.c-btn-box--tall { min-height: 160px; }

/* =========================================================
   RECRUIT banner
   ========================================================= */
.c-recruit-banner {
  display: grid;
  grid-template-columns: 480fr 720fr;
  align-items: stretch;
  margin-top: 96px;
  background: var(--c-cream);
  border-radius: var(--r-media);
  overflow: hidden;
}
.c-recruit-banner__media { aspect-ratio: 480 / 288; }
.c-recruit-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.c-recruit-banner__body {
  position: relative;
  padding: clamp(24px, 3.4vw, 62px) clamp(24px, 3.4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-recruit-banner__text {
  margin-top: 34px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 2;
  color: var(--c-primary);
}
/* 見出しと矢印イラストを同じ行に置いて高さを揃える */
.c-recruit-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.c-recruit-banner__arrow {
  flex: 0 0 auto;
  width: clamp(56px, 6vw, 108px);
  transition: transform .3s ease;
}
.c-recruit-banner:hover .c-recruit-banner__arrow { transform: translateX(8px); }

/* ---------- PCだけの調整（2026-10-02 先方フィードバック。スマホ・タブレットには効かせない） ---------- */
@media (min-width: 1025px) {
  /* PC-09：キャッチを少し小さく（1920px幅で48→40px、1440px幅で36→30px） */
  .c-catch { font-size: clamp(20px, 2.1vw, 40px); }
  /* PC-15：花はカードの前面のまま、重なりをカード上端の角丸（40px）の範囲にとどめ、見出しにかけない */
  .c-band--flow .c-container { margin-top: -24px; }
  /* PC-19：写真の枠が縦横比を保とうとして文字側へはみ出し、文字が写真にくっついていた。
     写真は自分の列の幅に収め、文字側の内側余白（左右とも同じ値）を効かせる */
  .c-recruit-banner__media { aspect-ratio: auto; min-width: 0; }
  /* 1行ずつ（テンプレートの span）長さを揃え、文節の区切りで折り返す。
     最後の「ます。」「す。」だけが次の行に落ちないようにする */
  .c-recruit-banner__text br { display: none; }
  .c-recruit-banner__line { display: block; text-wrap: balance; word-break: auto-phrase; }

  /* フッターの4列メニューは、本文（写真・見出し）の左端から始める。メニューの右端は本文の右端のまま。左のロゴ・ボタンは動かさない */
  .l-footer__nav { margin-left: var(--gutter); }
}

/* =========================================================
   House cards (service / recruit)
   ========================================================= */
.c-house-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin: 48px 0 88px;   /* 次のセクションとの間に余白を確保 */
}
.c-house-card {
  display: block;
  text-align: center;
  padding-bottom: 8px;
}
.c-house-card__bubble {
  display: block;
  position: relative;
  z-index: 1;  /* 背景の楕円（イラスト）より手前に置く */
  width: min(100%, 244px);
  margin: 0 auto;
  aspect-ratio: 248 / 194;
}
.c-house-card__bubble img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: opacity .3s ease;
}
.c-house-card__bubble img.is-hover { opacity: 0; }
.c-house-card__bubble > span {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.35;
  letter-spacing: .04em;
}
.c-house-card__bubble small { display: block; font-size: clamp(16px, 1.25vw, 24px); }
.c-house-card__bubble strong { display: block; font-size: clamp(17px, 1.67vw, 32px); font-weight: 700; }
.c-house-card__figure {
  display: block;
  position: relative;
  margin: -22% auto 0;
  width: min(100%, 344px);
  aspect-ratio: 344 / 300;
}
.c-house-card__figure img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .3s ease;
}
.c-house-card__figure img.is-hover { opacity: 0; }
.c-house-card__label {
  display: block;
  margin-top: -4%;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-primary);
  transition: color .3s ease;
}
.c-house-card:hover .c-house-card__bubble img.is-hover,
.c-house-card:focus-visible .c-house-card__bubble img.is-hover,
.c-house-card.is-active .c-house-card__bubble img.is-hover,
.c-house-card:hover .c-house-card__figure img.is-hover,
.c-house-card:focus-visible .c-house-card__figure img.is-hover,
.c-house-card.is-active .c-house-card__figure img.is-hover { opacity: 1; }
.c-house-card:hover .c-house-card__bubble > span,
.c-house-card:focus-visible .c-house-card__bubble > span,
.c-house-card.is-active .c-house-card__bubble > span,
.c-house-card:hover .c-house-card__label,
.c-house-card:focus-visible .c-house-card__label,
.c-house-card.is-active .c-house-card__label { color: #231815; }

/* =========================================================
   Facility detail (service)
   ========================================================= */
.c-facility { padding: 96px 0 0; }
.c-facility--cream { background: var(--c-cream); }
.c-facility--mint { background: var(--c-mint); }
.c-facility__head {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 96px;
  align-items: start;
}
.c-facility__en {
  font-size: clamp(12px, .84vw, 16px);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
  line-height: 1.2;
}
.c-facility__name {
  margin-top: 10px;
  font-size: clamp(20px, 1.67vw, 32px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-primary);
}
.c-facility__desc { margin-top: 30px; line-height: 2; }
.c-facility__support { margin-top: 32px; line-height: 2; }
.c-facility__support li::before { content: "・"; }
.c-facility__media {
  aspect-ratio: 480 / 384;
}
.c-facility__media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-media);
}
/* 写真・カードの右下に添えるプルメリア＋モンステラ（カンプ準拠） */
.c-facility__media { position: relative; }
.c-facility__media::after {
  content: "";
  position: absolute;
  right: -1.6%;
  bottom: -6.3%;
  width: 32.8%;
  aspect-ratio: 168 / 160;
  background: url("../images/deco-corner.webp") right bottom / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}


.c-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 64px;
  margin-top: 74px;
}
.c-info-block__title {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text);
}
.c-info-box {
  margin-top: 6px;
  padding: 24px 28px;
  background: var(--c-white);
  border-radius: 16px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.85;
}
.c-info-box li { padding-left: 1.4em; text-indent: -1.4em; }
.c-info-box li::before { content: "●"; color: var(--c-primary); margin-right: .3em; }
.c-info-box li.is-note {
  padding-left: 0; text-indent: 0;
  font-size: var(--fs-body); line-height: 1.7;
}
.c-info-box li.is-note::before { content: none; }
/* 「・」「※」で始まる行は、2行目以降を記号の後ろの文字の位置にそろえる（ぶら下げ。2026-10-12 先方指示 P7・P9・P12・P14・P16。PC・スマホ共通）。
   記号の幅は全角の1字ぶん＝1em */
.c-hang,
.c-info-box li.is-note.c-hang { padding-left: 1em; text-indent: -1em; }
.c-hang .c-unit { text-indent: 0; }   /* スマホで語を包む inline-block に、行頭の字下げ（継承）が重複して効き、文字が重なるのを防ぐ */
/* 定員・体験利用の下の間取り図（2026-10-12 先方指示 P13・P15・P17）。背景は透明の画像。列の幅いっぱい（最大380px）で、縦長の図は幅に合わせて縦に伸びる */
.c-info-plan { margin-top: 32px; }
.c-info-plan img { display: block; width: 100%; max-width: 380px; height: auto; }
.c-info-plain {
  margin-top: 6px;
  padding: 24px 28px;
  background: var(--c-white);
  border-radius: 16px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.85;
}

.c-spec-table {
  margin-top: 14px;
  width: 100%;
  background: var(--c-white);
  font-size: clamp(16px, 1.05vw, 20px);
}
.c-spec-table th,
.c-spec-table td {
  border: 1px solid var(--c-line);
  padding: 12px 16px;
  text-align: left;
  line-height: 1.6;
  font-weight: 500;
}
.c-spec-table th {
  width: 130px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: .3em;
  text-indent: .3em;
}
.c-table-note { margin-top: 14px; font-size: var(--fs-body); line-height: 1.7; }

/* gallery */
.c-gallery {
  margin-top: 78px;
  overflow: hidden;
  padding-bottom: 56px;
}
.c-gallery__track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: gallery-scroll 96s linear infinite;
}
.c-gallery:hover .c-gallery__track,
.c-gallery:focus-within .c-gallery__track { animation-play-state: paused; }
.c-gallery__item {
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 360px);
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 360 / 288;
}
@keyframes gallery-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .c-gallery { overflow-x: auto; }
  .c-gallery__track { animation: none; transform: none; }
}

/* facility contact strip */
.c-facility-cta {
  background: var(--c-yellow);
  padding: 62px 0 72px;
  overflow: hidden;
}
.c-facility-cta > * { position: relative; z-index: 1; }
.c-facility-cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: url("../images/deco-monstera.svg");
  background-size: 1392px 520px;   /* カンプの柄グループ実寸 */
  background-repeat: repeat;
  pointer-events: none;
}
.c-facility-cta__inner { position: relative; z-index: 1; text-align: center; }
.c-facility-cta__name {
  font-size: clamp(20px, 1.67vw, 32px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-primary);
}
.c-facility-cta__addr {
  margin-top: 18px;
  font-size: clamp(16px, 1.25vw, 24px);
  letter-spacing: .04em;
  color: var(--c-primary);
}
.c-facility-cta__btns {
  display: grid;
  grid-template-columns: 560fr 480fr;
  gap: 64px;
  margin-top: 40px;
  text-align: left;
}
.c-map {
  position: relative;
  z-index: 1;
  margin-top: 46px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1104 / 384;
  background: var(--c-line);
}
.c-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   ABOUT page
   ========================================================= */
.c-greeting {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 80px;
  align-items: start;
}
.c-greeting__text p { line-height: 2.5; text-indent: 1em; }
.c-greeting__media { position: relative; aspect-ratio: 336 / 384; }
.c-greeting__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-media); }
/* 代表挨拶の写真の右下にもプルメリア＋モンステラ（カンプP3・SP見本P10） */
.c-greeting__media::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -5%;
  width: 36%;
  aspect-ratio: 168 / 160;
  background: url("../images/deco-corner.webp") right bottom / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

.c-prose { line-height: 2.5; }
.c-prose p { text-indent: 1em; }
.c-prose li { text-indent: 1em; }
.c-prose li::before { content: "・"; }

.c-facility-card {
  background: var(--c-white);
  border: 2px solid var(--c-primary);
  border-radius: var(--r-media);
  padding: clamp(24px, 3vw, 48px);
}
.c-facility-card + .c-facility-card { margin-top: 48px; }
.c-facility-card__head {
  display: grid;
  grid-template-columns: 1fr 472px;
  gap: 48px;
  align-items: start;
}
.c-facility-card__name {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .04em;
}
.c-facility-card__data {
  margin-top: 24px;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.6;
}
.c-facility-card__data dl { margin-top: 24px; }
.c-facility-card__media { border-radius: 12px; overflow: hidden; aspect-ratio: 472 / 328; }
.c-facility-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   NEWS page
   ========================================================= */
.c-news-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  color: var(--c-accent);
}
.c-news-filter li + li::before { content: "/"; margin: 0 .7em; color: var(--c-accent); }
.c-news-filter a:hover,
.c-news-filter .is-current { color: var(--c-primary); text-decoration: underline; }

.c-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 78px 96px;
  margin-top: 56px;
}
.c-news-card__media {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 504 / 284;
  background: var(--c-line);
}
.c-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-news-card__media--tall img { object-position: 50% 12%; } /* 縦長の写真：上部の顔隠しロゴが欠けないよう上寄せ */
.c-news-card__cat {
  display: block;
  margin-top: 24px;
  font-size: clamp(16px, .94vw, 18px);
  font-weight: 700;
  color: var(--c-accent);
}
.c-news-card__title {
  margin-top: 12px;
  font-size: clamp(18px, 1.46vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-primary);
}
.c-news-card__text { margin-top: 22px; line-height: 2; }
.c-news-card:hover .c-news-card__title { text-decoration: underline; }

/* 「クリックすると記事が読める」と分かるボタン */
.c-news-card > a { display: block; height: 100%; }
.c-news-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 232px;
  min-height: 56px;
  margin-top: 28px;
  padding: 8px 24px;
  font-size: clamp(16px, .94vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-teal);
  background: var(--c-white);
  border: 2px solid var(--c-teal);
  border-radius: var(--r-pill);
  transition: background-color .25s ease, color .25s ease;
}
.c-news-card__more::after { content: "→"; font-size: 1.1em; line-height: 1; }
.c-news-card:hover .c-news-card__more,
.c-news-card:focus-within .c-news-card__more {
  color: #fff;
  background: var(--c-teal);
}

/* =========================================================
   CONTACT page
   ========================================================= */
.c-tel-panel {
  display: grid;
  gap: 40px;
  margin-top: 42px;
}
.c-tel-panel .c-btn-box { min-height: 96px; }
/* ボタン内の余白が目立つため横幅を絞る */
.c-tel-panel { max-width: 760px; margin-inline: auto; }
@media (min-width: 1025px) {
  /* PC-44：ボタン幅を中身＋左右の余白に合わせる（2つのボタンは広い方に揃う） */
  .c-tel-panel { width: fit-content; max-width: 100%; }
  .c-tel-panel .c-btn-box { padding-inline: 64px; }
}
.c-tel-panel .c-btn-box__name {
  display: block;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .04em;
}

.c-form {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: clamp(28px, 4.2vw, 60px) clamp(24px, 3.5vw, 48px);
  margin-top: 40px;
}
.c-form__field + .c-form__field { margin-top: 26px; }
/* Contact Form 7 は自動で <p> と <br> を入れるため、
   ラベルと入力欄の間に余分な行が生まれる。それを打ち消す。 */
.c-form .c-form__label + br { display: none; }
.c-form .wpcf7-form-control-wrap { display: block; }
.c-form__label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
}
.c-form__req { color: #c0392b; font-size: max(.9em, 16px); }   /* 全体ルール：最小16px */
.c-form input[type="text"],
.c-form input[type="tel"],
.c-form input[type="email"],
.c-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
  background: #fafafa;
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.c-form textarea { min-height: 180px; resize: vertical; }
.c-form input::placeholder,
.c-form textarea::placeholder { color: #b9b9b9; }
.c-form input:focus,
.c-form textarea:focus { background: #fff; border-color: var(--c-teal); }
.c-form__submit { margin-top: 46px; text-align: center; }
.c-btn--submit {
  justify-content: center;
  min-width: 336px;
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.c-btn--submit:hover { background: var(--c-teal); border-color: var(--c-teal); }

/* =========================================================
   RECRUIT page
   ========================================================= */
.c-recruit-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-top: 74px;
}
.c-recruit-photos figure { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 360 / 288; }
.c-recruit-photos img { width: 100%; height: 100%; object-fit: cover; }
/* 1枚目は縦長の写真（顔隠しの花マークが上寄り）。PCの横長の枠で花マークから手元・ケーキまでが入る高さに合わせる（スマホの縦長の枠では高さが合うので影響しない） */
.c-recruit-photos figure:first-child img { object-position: 50% 30%; }

.c-merit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  margin-top: 88px;
}
/* 上が丸い縦長のカード（先方 10/7 指示 P22）。上の半円は ::before（幅の半分の高さ）で描き、その高さぶんを上の余白（margin-top:50%）でとる。
   % は、どちらもカードの幅に対する割合なので、幅が変わっても形・イラストの位置は同じ */
.c-merit {
  position: relative;
  margin-top: 50%;
  padding-bottom: 8%;
  border-radius: 0 0 var(--r-media) var(--r-media);
  background: var(--c-cream);
  text-align: center;
}
.c-merit::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px);
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: var(--c-cream);
}
.c-merit img { position: relative; display: block; width: 83%; height: auto; margin: -33% auto 0; }
.c-merit__label {
  display: block;
  margin-top: 4%;
  font-size: clamp(17px, 1.67vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--c-primary);
}
.c-merit__text { margin: 5% 8.7% 0; text-align: left; line-height: 1.9; }

.c-fit {
  position: relative;
  margin-top: 96px;
  background: var(--c-cream);
  border-radius: var(--r-media);
  padding: clamp(28px, 3.4vw, 48px);
}
.c-fit::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: clamp(120px, 14%, 200px);
  aspect-ratio: 168 / 160;
  background: url("../images/deco-corner.webp") right bottom / contain no-repeat;
  pointer-events: none;
}
.c-fit__title {
  font-size: clamp(20px, 1.67vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-primary);
}
.c-fit__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
  margin-top: 24px;
  font-size: clamp(16px, 1.12vw, 21px);
  line-height: 2;
}
.c-fit__list li::before { content: "・"; }
/* 最初の項目（障がい者に理解がある方）だけ、文字の下に黄色いライン（先方 10/7 指示 P22）。見本の実測：色 #f2e357、太さ 0.5em、
   文字の中心より 0.24em 下から、左は「・」の0.25em手前、右は文字の終わりより 0.19em 先。項目を文字の幅にして（fit-content）背景で描く。
   先頭の項目に付くので、管理画面で並びを変えるとラインも先頭の項目に付く */
.c-fit__list li:first-child {
  width: fit-content;
  padding-right: .19em;
  background: linear-gradient(#f2e357, #f2e357) .25em calc(50% + .485em) / calc(100% - .25em) .49em no-repeat;
}

/* 採用募集のボタンの入れ物。上下の余白は、以前の求人リスト（.c-job-list）と同じにして、次の「各施設の雰囲気は」までの距離を変えない */
.c-recruit-cta { margin: 44px 0 40px; }
/* 募集要項の準備中のお知らせ（11/12 伊藤さん指示）。ボタンの上に置き、見出し→文→ボタンの順。要項が決まったら表に替える */
.c-recruit-status { margin: 44px 0 0; font-size: var(--fs-body); line-height: 2; text-align: center; }
.c-recruit-status + .c-recruit-cta { margin-top: 28px; }
.c-job-list { display: grid; gap: 12px; margin: 44px 0 40px; }
.c-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 16px 32px;
  border: 2px solid var(--c-teal);
  border-radius: var(--r-pill);
  color: var(--c-teal);
}
.c-job__title {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}
.c-job__more {
  flex: 0 0 auto;
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  white-space: nowrap;
}
.c-job__more::after { content: " →"; }
.c-job:hover, .c-job:focus-visible { background: var(--c-teal); color: #fff; }

/* =========================================================
   Footer
   ========================================================= */
.l-footer {
  position: relative;
  padding: 80px 0 110px;
  background: var(--c-white);
}
.l-footer__inner {
  display: grid;
  /* 左カラム幅 + 左右パディング = サイドメニュー幅（本文カラムの左端）。
     PC ではこのうえで、メニュー（.l-footer__nav）に gutter ぶんの左マージンを足し、本文（写真・見出し）の左端に揃える
     （「PCだけの調整」のブロックを参照）。 */
  grid-template-columns: calc(var(--sidebar-w) - var(--gutter)) 1fr;
  column-gap: 0;
  row-gap: 48px;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-footer__logo { width: clamp(220px, 21vw, 404px); }
.l-footer__btns { display: grid; gap: 32px; margin-top: 40px; max-width: min(384px, 100%); }
.c-footer-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-yellow-soft);
}
.c-footer-btn img { width: 32px; }
.c-footer-btn:hover { background: var(--c-yellow); }
.c-footer-btn--outline {
  justify-content: flex-start;
  gap: 20px;
  background: var(--c-white);
  border: 2px solid var(--c-primary);
}
.c-footer-btn--outline:hover,
.c-footer-btn--outline:focus-visible {
  background: var(--c-primary);
  color: #fff;
}
.c-footer-btn--outline:hover .c-footer-btn__en,
.c-footer-btn--outline:focus-visible .c-footer-btn__en { color: #fff; }
.c-footer-btn__en {
  font-size: clamp(12px, .84vw, 16px);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--c-green-soft);
}
.l-footer__meta { margin-top: 48px; color: var(--c-text); }
.l-footer__meta p { font-size: clamp(16px, 1.05vw, 20px); line-height: 1.6; }
.l-footer__meta address { font-style: normal; font-size: var(--fs-body); font-weight: 400; line-height: 1.8; }

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  padding-top: 24px;
}
.l-footer__nav h2 {
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  color: var(--c-primary);
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--c-green-soft);
}
.l-footer__nav ul { margin-top: 18px; display: grid; gap: 20px; }
.l-footer__nav ul a { font-size: var(--fs-body); color: var(--c-primary); }
.l-footer__nav ul a::before { content: "・"; }
.l-footer__nav a:hover { color: var(--c-accent); }

/* =========================================================
   Utilities
   ========================================================= */
.u-mt-xs { margin-top: 24px; }
.u-mt-s { margin-top: 40px; }
.u-mt-m { margin-top: 64px; }
.u-mt-l { margin-top: 96px; }
.u-mt-xl { margin-top: 128px; }
.u-nobr { white-space: nowrap; }
.u-center { text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1400px) {
  .c-strength { gap: 56px; }
  .c-facility__head { gap: 56px; }
  .c-voice-grid { gap: 32px; }
  .c-flow-grid { gap: 44px; }
  .c-flow-grid__arrow { right: -34px; border-width: 15px 0 15px 20px; }
  .c-news-grid { gap: 56px 56px; }
  .c-greeting { gap: 48px; grid-template-columns: 1fr 280px; }
  .c-facility-card__head { grid-template-columns: 1fr 380px; gap: 32px; }
  .c-facility__head { grid-template-columns: 1fr 400px; }
  .c-info-grid { gap: 48px; }
  .c-contact { gap: 40px; }
  .c-facility-cta__btns { gap: 40px; }
}

@media (max-width: 1024px) {
  :root { --r-card: 28px; --r-media: 18px; }

  .l-wrap { display: block; }
  /* Keep the first hero's top margin inside main so its decoration stays visible above it. */
  .l-main { display: flow-root; }

  .l-sidebar {
    position: fixed;
    inset: 0 0 0 auto;   /* メニューボタンが右上にあるため右側から開く（SP P2） */
    width: min(360px, 86vw);
    max-height: none;
    height: 100%;
    padding: 88px 0 40px;
    background: #fff;
    box-shadow: none;
    transform: translateX(102%);
    transition: transform .32s ease;
    z-index: 60;
  }
  .l-sidebar.is-open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
  .l-sidebar__logo { display: none; }
  .c-nav, .c-nav__cta { padding-inline: 24px; margin-inline: 24px; }
  .c-nav__cta { margin: 40px 24px 0; min-height: 72px; }
  .c-nav__item { font-size: 17px; min-height: 52px; }
  .c-nav__sub a { font-size: 16px; }   /* 原則16px以上（SP P1） */

  .l-mobilebar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 70;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 80px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
  }
  .l-mobilebar__logo { width: 192px; margin-left: -7px; }
  .l-mobilebar__toggle {
    position: relative;
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--c-yellow-soft);   /* #f6e868（SP P2） */
  }
  .l-mobilebar__toggle span:not(.u-visually-hidden) {
    position: absolute;
    left: 12px;
    width: 24px; height: 2px;
    background: var(--c-primary);
    transition: transform .28s ease, opacity .2s ease;
  }
  .l-mobilebar__toggle span:nth-child(1) { top: 16px; }
  .l-mobilebar__toggle span:nth-child(2) { top: 23px; }
  .l-mobilebar__toggle span:nth-child(3) { top: 30px; }
  .l-mobilebar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .l-mobilebar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .l-mobilebar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .l-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 55;
  }
  .l-backdrop.is-open { opacity: 1; visibility: visible; }

  .c-hero, .c-hero-board { margin-right: var(--gutter); margin-top: 40px; }
  .c-hero__media { aspect-ratio: 16 / 7; }
  /* 看板は画像本来の比率で（16:8だと紙の端や木枠が切れていた） */
  .c-hero-board { background-size: 100% 100%; }

  .l-footer__inner { grid-template-columns: 1fr; }

  /* 上部の葉と花：重なり順は写真・看板の後ろ（z-index:0）。写真・看板の範囲は、後ろに隠れるので描かない（マスク）。
     写真・看板より上の帯と右側の余白だけを見せる（SPと同じ考え方。SPは下の767px以下で上書き） */
  .c-deco--top {
    -webkit-mask:
      linear-gradient(#000 0 0) left top / 100% 40px no-repeat,
      linear-gradient(#000 0 0) right top / var(--gutter) 100% no-repeat;
            mask:
      linear-gradient(#000 0 0) left top / 100% 40px no-repeat,
      linear-gradient(#000 0 0) right top / var(--gutter) 100% no-repeat;
  }
  /* ホームは看板の木の板の上にも花・葉を見せる（白い看板が手前で隠す）ので、マスクをかけない */
  .home .c-deco--top { -webkit-mask: none; mask: none; }
  .l-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .c-contact { grid-template-columns: 1fr; }
  .c-contact__mail { margin-top: 36px; }
  .c-facility-cta__btns { grid-template-columns: 1fr; }
  .c-greeting { grid-template-columns: 1fr; }
  .c-greeting__media { max-width: 320px; }
  .c-facility__head { grid-template-columns: 1fr; }
  .c-facility__media { max-width: 520px; }
  .c-facility-card__head { grid-template-columns: 1fr; }
  .c-facility-card__media { max-width: 520px; }
  .c-info-grid { grid-template-columns: 1fr; gap: 40px; }
  .c-news-grid { grid-template-columns: 1fr; gap: 48px; }
  .c-flow-grid { grid-template-columns: repeat(2, 1fr); }
  .c-flow-grid__arrow { display: none; }
  .c-voice-grid { grid-template-columns: 1fr; gap: 56px; }
  .c-voice-card { min-height: 0; }
  .c-voice-figure { margin-top: 46px; }
  .c-merit-grid { gap: 24px; }
  .c-recruit-photos { gap: 24px; }
  .c-band--about { margin-top: 64px; }
  .c-band--voice { margin-top: 72px; }
}

@media (max-width: 768px) {
  :root { --fs-body: 15px; }

  .c-news-list__link { grid-template-columns: 1fr; gap: 6px; padding: 14px 8px; }
  .c-news-list__cat { justify-self: start; }
  .c-news-list__title { -webkit-line-clamp: 3; line-clamp: 3; }   /* 施設名の行＋本文（狭い幅では2行）が切れないように */

  .c-strength,
  .c-strength--reverse { grid-template-columns: 1fr; gap: 24px; }
  .c-strength--reverse .c-strength__media,
  .c-strength--reverse .c-strength__body { order: 0; }
  .c-strength + .c-strength { margin-top: 56px; }

  .c-house-grid { grid-template-columns: 1fr; gap: 24px; max-width: 340px; margin-inline: auto; }
  .c-flow-grid { grid-template-columns: 1fr; gap: 40px; }
  .c-flow-card-wrap { padding: 32px 20px 40px; }
  .c-fit__list { grid-template-columns: 1fr; gap: 0; }
  .c-merit-grid { grid-template-columns: 1fr; gap: 32px; max-width: 340px; margin-inline: auto; }
  .c-recruit-photos { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin-inline: auto; }
  .c-recruit-banner { grid-template-columns: 1fr; }
  .c-recruit-banner__arrow { display: none; }
  .c-btn-box { flex-direction: column; gap: 10px; min-height: 0; padding: 20px; }
  .l-footer__nav { grid-template-columns: 1fr; }
  .c-band--contact { padding: 56px 0; }
  .c-band--flow { padding: 40px 0; }
  .l-footer { padding: 56px 0 72px; }
  .c-spec-table th { width: 92px; letter-spacing: .1em; text-indent: .1em; padding: 10px 8px; }
  .c-spec-table td { padding: 10px 12px; }
  .c-gallery__track { gap: 20px; }
  .c-greeting__text p { text-indent: 0; }
  .c-prose p, .c-prose li { text-indent: 0; }
}

@media (max-width: 480px) {
}

/* ground band just above the footer */
.c-deco-ground {
  position: relative;
  margin-top: -57px;
  pointer-events: none;
  user-select: none;
}
.c-deco-ground img { width: 100%; height: auto; }
/* 帯の上端に葉を乗せる（カンプ：ルアナケアについて「運営会社」と「施設案内」の間） */
.c-deco-ground--on-band { margin-top: 24px; margin-bottom: -1px; }
.c-deco-ground--on-band img { display: block; }
/* 施設ごとの写真スライドの下、黄色のお問い合わせ帯の上に葉を並べる（カンプ：施設案内・サービス内容）。
   画像上部の透明部分（幅の約6.5%）をスライドの余白に重ね、葉先がスライドの28px下に来るようにする */
.c-gallery + .c-deco-ground--facility { margin-top: calc(-28px - 6.5%); }
.c-deco-ground--facility img { display: block; }

/* セクションの区切りに入れる装飾帯。
   指示PDF（P16下・P22上）の見本は 1008 x 116pt の浅いトリミング。
   素材は上側に余分があるため、下端を基準に同じ範囲だけ見せる。 */
.c-deco-divider {
  position: relative;
  margin-top: 56px;
  pointer-events: none;
  user-select: none;
}
.c-deco-divider img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1008 / 116;
  object-fit: cover;
  object-position: center bottom;
}

/* ---------- ギャラリー：クリックで拡大（ライトボックス） ---------- */
.c-gallery__btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
  width: 100%;
}
.c-gallery__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-gallery__btn:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }

body.is-lightbox-open { overflow: hidden; }

.c-lightbox {
  width: min(92vw, 1400px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.c-lightbox::backdrop { background: rgba(0, 0, 0, .78); }
.c-lightbox__figure { margin: 0; }
.c-lightbox__img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r-media);
}
.c-lightbox__caption {
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  letter-spacing: .08em;
  color: #fff;
}
.c-lightbox__close,
.c-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  color: var(--c-primary);
  background: #fff;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  cursor: pointer;
}
.c-lightbox__close { top: -22px; right: -22px; font-size: 28px; }
.c-lightbox__nav--prev { left: -22px; top: 50%; transform: translateY(-50%); }
.c-lightbox__nav--next { right: -22px; top: 50%; transform: translateY(-50%); }
.c-lightbox__close:hover,
.c-lightbox__nav:hover { color: #fff; background: var(--c-primary); }
.c-lightbox__close:focus-visible,
.c-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
  .c-lightbox { width: 94vw; }
  .c-lightbox__close { top: -18px; right: -8px; width: 44px; height: 44px; font-size: 24px; }
  .c-lightbox__nav { width: 44px; height: 44px; font-size: 26px; }
  .c-lightbox__nav--prev { left: -8px; }
  .c-lightbox__nav--next { right: -8px; }
}

/* contact page tel panel */
.c-tel-panel .c-btn-box { flex-direction: column; gap: 10px; }
.c-tel-panel .c-btn-box__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.c-tel-panel .c-btn-box__icon { width: clamp(34px, 2.9vw, 56px); }

.c-info-plain p + p { margin-top: 4px; }
.c-info-plain p:has(+ p:empty) { margin-bottom: 0; }
.c-info-block--clinic .c-info-plain p + p { margin-top: 22px; }
.c-info-box li + li { margin-top: 10px; }
.c-info-box li.is-note { margin-top: 4px; color: #555; }

/* EN label on yellow band is white in the comp */
.c-band--contact .c-section-head__en { color: #fff; }

/* =========================================================
   Article (single) / pagination / form notice  ※WordPress用
   ========================================================= */
.c-article { max-width: 880px; }
.c-article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(16px, .94vw, 18px);
  color: var(--c-primary);
}
.c-article__title {
  margin-top: 16px;
  font-size: clamp(22px, 2.1vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-primary);
}
.c-article__thumb {
  margin-top: 32px;
  border-radius: var(--r-media);
  overflow: hidden;
}
.c-article__body { margin-top: 40px; }
.c-article__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 64px;
}
.c-article__prev a,
.c-article__next a { color: var(--c-teal); font-weight: 700; }
.c-article__prev a:hover,
.c-article__next a:hover { text-decoration: underline; }

.c-prose h2 {
  margin-top: 48px;
  font-size: clamp(20px, 1.67vw, 32px);
  font-weight: 700;
  color: var(--c-primary);
}
.c-prose h3 {
  margin-top: 40px;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--c-primary);
}
.c-prose p + p { margin-top: 0; }  /* 代表挨拶と同じ行送りに揃える */
.c-prose ul { margin: 1em 0; }
.c-prose ol { margin: 1em 0 1em 1.6em; list-style: decimal; }
.c-prose a { color: var(--c-teal); text-decoration: underline; }
.c-prose img { border-radius: var(--r-media); margin: 24px 0; }
.c-prose blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--c-cream);
  border-radius: 12px;
}
.c-prose table { width: 100%; margin: 24px 0; }
.c-prose th, .c-prose td { border: 1px solid var(--c-line); padding: 10px 14px; }

.c-pagination {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.c-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 2px solid var(--c-teal);
  border-radius: var(--r-pill);
  color: var(--c-teal);
  font-weight: 700;
}
.c-pagination .page-numbers.current,
.c-pagination .page-numbers:hover { background: var(--c-teal); color: #fff; }
.c-pagination .page-numbers.dots { border-color: transparent; }

.c-form-notice {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 24px auto 0;
  padding: 16px 20px;
  background: #fff;
  border-left: 6px solid var(--c-primary);
  border-radius: 8px;
  font-weight: 700;
  color: var(--c-primary);
}

/* =========================================================
   補助：SPだけ効く改行／採用キャッチの分割表示／SP用フッターロゴ
   ========================================================= */
@media (min-width: 768px) {
  .u-br-sp { display: none; }
}
@media (max-width: 767px) {
  .u-hide-sp { display: none; }
}
.c-recruit-intro__head,
.c-recruit-intro__tail { display: block; }
.l-footer__brand-sp { display: none; }

/* =========================================================
   SP版 修正（9.18_ルアナケア様_修正_sp版.pdf）
   括弧内はPDFのページ番号
   ========================================================= */
@media (max-width: 767px) {
  :root { --gutter: 32px; --r-media: 8px; }

  /* ---- 全体：文字は原則16px以上（P1）。英字の小見出しは装飾扱いで除外 ---- */
  :root { --fs-body: 16px; }
  .skip-link,
  .c-btn,
  .c-lead, .c-note, .c-list-check li,
  .c-news-list__link, .c-news-list__cat, .c-news-list__date, .c-news-list__title,
  .c-strength__text,
  .c-voice-card__text,
  .c-flow-card__text,
  .c-contact__lead, .c-btn-box__label, .c-btn-box__name,
  .c-recruit-banner__text,
  .c-footer-btn, .l-footer__meta p, .l-footer__meta address,
  .c-facility__desc, .c-facility__support, .c-facility-cta__addr,
  .c-info-box, .c-info-box li.is-note, .c-info-plain, .c-spec-table, .c-table-note,
  .c-house-card__label,
  .c-greeting__text, .c-prose, .c-facility-card__data,
  .c-news-filter, .c-news-card__cat, .c-news-card__text, .c-news-card__more,
  .c-fit__list, .c-job__more,
  .c-form__label, .c-form__req, .u-center,
  .c-tel-panel .c-btn-box__name { font-size: 16px; }
  /* 通常本文は、理念の本文と同じ見た目（太さ500・字間は標準）。リード文だけ字間を広げているPCの指定は、スマホでは戻す */
  .c-lead { letter-spacing: 0; }
  /* 送信ボタンは画面幅に収める（PCの最小幅336pxを解除） */
  .c-btn--submit { min-width: 0; width: 100%; max-width: 336px; }
  /* 区切り装飾とフォーム帯の間の空白を詰める */
  .c-deco-divider + .c-band--form { margin-top: 0; }
  /* お問い合わせ：フォームの説明文（3つの文）は左揃え。折り返した行の行頭をそろえ、行は箱の幅いっぱいまで続ける（見出しは中央のまま。電話の説明文など他の .u-center は対象外） */
  .c-band--form p.u-center { text-align: left; text-wrap: wrap; }   /* iPhone の Safari は text-wrap: pretty だと行を短くそろえて左に寄って見えるため、普通の折り返し（箱の幅いっぱい）にする */

  /* 16pxにしたことでボタン文字が2行に折れないよう、内側の余白を詰める */
  .c-btn { padding: 10px 22px; gap: 14px; letter-spacing: .03em; }

  /* ---- 見出しはSPでは中央揃え（P6・P7・P10・P11・P16、P14見本） ---- */
  .c-section-head--left { text-align: center; }
  /* 見出しの大きさは見本実測（字高約18.5px・1字約19.7px）に合わせる */
  .c-section-head__ja { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
  /* ABOUT帯のボタンは1行に収める（見本P3・P14） */
  .c-band--about .c-btn { width: 100%; padding-inline: 14px; gap: 6px; letter-spacing: .02em; white-space: nowrap; }

  /* ---- メニューボタンの三本線（見本実測：幅28px・太さ2.5px・間隔10px） ---- */
  .l-mobilebar__toggle span:not(.u-visually-hidden) { left: 10px; width: 28px; height: 2.5px; border-radius: 1px; }
  .l-mobilebar__toggle span:nth-child(1) { top: 12.25px; }
  .l-mobilebar__toggle span:nth-child(2) { top: 22.25px; }
  .l-mobilebar__toggle span:nth-child(3) { top: 32.25px; }
  .l-mobilebar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .l-mobilebar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  /* ---- 上部の葉と花（P1・P8・P10・P13・P14） ----
     重なり順は写真・看板の後ろ（z-index:0。基本ルール）。
     見本の葉の形に合わせ、素材を1.374倍・右寄せで置く（390px実寸で見本と一致率が最大）。
     写真・看板の後ろに隠れる範囲はマスクで描かない（見えるのは、写真・看板より上の帯と左右の余白） */
  .c-deco--top {
    --deco-show-top: 18px;              /* 下層：ヒーロー上端までの高さ */
    overflow: hidden;
    -webkit-mask:
      linear-gradient(#000 0 0) left top / 100% var(--deco-show-top) no-repeat,
      linear-gradient(#000 0 0) left top / var(--gutter) 100% no-repeat,
      linear-gradient(#000 0 0) right top / var(--gutter) 100% no-repeat;
            mask:
      linear-gradient(#000 0 0) left top / 100% var(--deco-show-top) no-repeat,
      linear-gradient(#000 0 0) left top / var(--gutter) 100% no-repeat,
      linear-gradient(#000 0 0) right top / var(--gutter) 100% no-repeat;
  }
  .c-deco--top img { width: 137.4%; max-width: none; margin-left: -34.9%; }

  /* ---- 下層ページのヒーロー：小さくし、装飾を上に見せる（P8・P10・P13・P14） ---- */
  .c-hero { margin: 18px var(--gutter) 0; }
  .c-hero__media { aspect-ratio: 326 / 97; }
  .c-hero + .u-mt-l { margin-top: 44px; }   /* ヒーロー直後の余白（見本は約45px） */
  .c-hero__title {
    left: 12px; right: 12px;
    text-align: center;
    font-size: 20px;
    letter-spacing: .1em;
  }

  /* ---- ホームのロゴ看板：装飾を上に見せ、両側に余白を取る（P1） ---- */
  /* 看板画像は元の比率のまま（切り抜くと紙の端や文字が欠けるため） */
  .c-hero-board { margin: 16px var(--gutter) 0; aspect-ratio: 326 / 177; border-radius: 0; }
  .c-hero-board__inner { width: 84%; transform: translateY(calc(3% - 3px)); }   /* ロゴ位置を見本（P1）に合わせる */
  .c-hero-board__logo { width: 76%; }
  .c-hero-board__lead { font-size: 11px; margin-top: 9px; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
  /* 看板とキャッチの間を詰める（P1） */
  .c-hero-board + .c-container .c-catch { margin-top: 36px; }

  /* ---- ABOUT帯：白カード下の余白と足元の装飾（P3・P14見本） ---- */
  .c-band--about { padding-bottom: 44px; }
  .c-band--about + .c-container.u-mt-xl { margin-top: 56px; }   /* SP-06：花の帯→次の見出し 約80px（見本P3） */

  /* ---- ルアナの強み：タイトル → 本文 → 写真 の順にそろえる（P3） ---- */
  .c-strength__body { order: 1; }
  .c-strength__media { order: 2; }

  /* ---- 利用者様の声（P4・P5） ---- */
  .c-voice-grid { gap: 40px; }
  .c-voice-card__title { font-size: 19px; }
  .c-voice-figure { padding-top: 28px; }
  .c-voice-figure img { height: 140px; }
  /* 最後の人物がFLOW帯に隠れないよう下に余白 */
  .c-band--voice { padding-bottom: 28px; }

  /* ---- ご入居までの流れ（P5） ---- */
  .c-band--flow { padding-top: 0; }                    /* 装飾帯を帯の上端に付ける */
  .c-band--flow .c-deco--strip { top: 0; overflow: hidden; z-index: 2; }   /* SP-10：帯の上のすき間をなくす。花・葉は背景（カードの下） */
  .c-band--flow .c-deco--strip img { width: 150%; max-width: none; margin-left: -25%; }
  .c-band--flow .c-container { margin-top: -29px; }   /* 白いエリアを花・葉の帯に29px重ねる（カードが前面） */
  .c-band--flow .c-flow-card-wrap { padding: 49px 28px 40px; }   /* P5実測：カード上端→FLOW 49px */
  .c-band--flow .c-flow-grid { margin-top: 25px; }
  .c-flow-card { --flow-num: 62px; padding-inline: 12px; }   /* 本文の幅を確保（入居契約の文が3行になり「ます。」だけが残っていた） */
  .c-flow-card__num { font-size: 31px; }
  .c-flow-grid { gap: 52px; }
  .c-flow-card__title { font-size: 20px; }
  /* カードの間に下向きの三角（P5） */
  .c-flow-card + .c-flow-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 22px 30px 0 30px;
    border-color: var(--c-green-pale) transparent transparent transparent;
  }

  /* ---- お問い合わせ帯（P6）・施設ごとのお問い合わせ（P9） ---- */
  /* 見本（P6）どおり2行に収める。16pxを保つため字間だけ詰める */
  .c-contact__lead { text-align: center; letter-spacing: -.045em; }
  /* 折り返しフレックスで［アイコン＋主要な文字］の行と、補足の行を分ける */
  .c-btn-box {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 12px;
    padding: 22px 16px;
  }
  .c-btn-box > span { display: contents; }
  .c-btn-box__icon { width: 44px; }
  /* メール：［アイコン＋お問い合わせ／フォームはこちら］の下に受付時間 */
  .c-btn-box--mail .c-btn-box__icon { order: 1; }
  .c-btn-box--mail .c-btn-box__main { order: 2; line-height: 1.35; text-align: left; }
  .c-btn-box--mail .c-btn-box__label {
    order: 3;
    flex: 0 0 100%;
    max-width: 12.8em;          /* 「２４時間３６５日いつでも／受付しております」で折り返す幅 */
    margin-inline: auto;
  }
  /* 電話：施設名の下に［アイコン＋番号］ */
  .c-btn-box--tel .c-btn-box__label { order: 1; flex: 0 0 100%; }
  .c-btn-box--tel .c-btn-box__icon { order: 2; }
  .c-btn-box--tel .c-btn-box__tel { order: 3; font-size: 31px; }
  /* 見本P6の実測（390px）に合わせた大きさ・余白。ボタン間は約50px */
  .c-band--contact .c-contact { gap: 45px; }
  .c-band--contact .c-tel-list { gap: 45px; }
  .c-band--contact .c-contact__mail { padding-top: 1px; }
  .c-band--contact .c-btn-box__icon { width: 52px; }
  .c-band--contact .c-btn-box--mail { padding: 28px 16px 23px; row-gap: 20px; }
  .c-band--contact .c-btn-box--mail .c-btn-box__main { letter-spacing: 0; }
  .c-band--contact .c-btn-box--mail .c-btn-box__label { letter-spacing: 0; }
  .c-band--contact .c-btn-box--tel { padding: 20px 16px 26px; row-gap: 8px; }
  .c-band--contact .c-btn-box--tel .c-btn-box__label { font-size: 17.5px; line-height: 1.85; letter-spacing: .03em; }
  .c-band--contact .c-btn-box--tel .c-btn-box__tel { font-size: 34px; }
  .c-facility-cta__btns { gap: 24px; text-align: center; }
  /* 施設の地図はフォームのボタンより大きく（P9） */
  .c-facility-cta .c-map { aspect-ratio: 4 / 3; margin-top: 28px; }

  /* ---- 採用バナー（P7） ---- */
  .c-recruit-banner__body { text-align: center; }
  .c-recruit-banner__head { justify-content: center; }
  /* 見本どおりカードを足元の葉より手前に出し、下の角丸を見せる */
  .c-recruit-banner { position: relative; z-index: 2; }
  .c-deco-ground { z-index: 1; }
  .u-br-pc { display: none; }   /* SPでは改行しない（採用バナーのリード文など） */

  /* ---- フッター（P7）：ロゴ差し替え・サイトマップ省略・中央揃え ---- */
  .l-footer__logo { display: none; }
  .l-footer__brand-sp { display: block; text-align: center; }
  .l-footer__logo-sp { margin-inline: auto; }
  .l-footer__tagline {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-teal-light);
  }
  .l-footer__nav { display: none; }   /* 右上のメニューから辿れるため省略 */
  .l-footer__btns { margin: 28px auto 0; max-width: 100%; }
  .c-footer-btn { justify-content: center; }
  /* 見本P7の実測（390px）に合わせる */
  .l-footer { padding-top: 38px; }
  .l-footer__logo-sp { width: 261px; }
  .l-footer__tagline { line-height: 1.35; letter-spacing: 0; }
  .l-footer__btns { gap: 24px; }
  .c-footer-btn { font-size: 19px; letter-spacing: .06em; }
  .c-footer-btn--outline { font-size: 22px; }
  .c-footer-btn__en { font-size: 14.5px; }
  .l-footer__meta { text-align: center; }

  /* ---- 施設案内：ふきだしカードを小さく、文字を大きく（P8・P16） ---- */
  #houses-head { line-height: 1.5; }
  /* 建物図・ラベルは SP見本（390px 実寸）に 2px 以内で合わせた値 */
  .c-house-grid { max-width: 300px; gap: 11px; margin-top: 22px; margin-bottom: 160px; }
  .c-house-card__bubble { width: 190px; }
  .c-house-card__bubble small { font-size: 16px; }
  .c-house-card__bubble strong { font-size: 24px; }
  .c-house-card__figure { width: 272px; max-width: 100%; transform: translateY(2px); }
  .c-house-card__label {
    position: relative; z-index: 2;
    margin-top: -24px;
    font-size: 17px;
    letter-spacing: 0;
    font-feature-settings: "palt";   /* 見本は文字詰めあり */
  }
  /* 可児広見AP：見本では建物が少し低く、ラベルは字間が広い */
  .c-house-card--hiromi .c-house-card__figure { transform: translateY(6px); }
  .c-house-card--hiromi .c-house-card__label { letter-spacing: .2em; text-indent: .2em; }
  /* 瀬戸西山：見本では図が一回り小さい */
  .c-house-card--seto .c-house-card__figure { width: 260px; transform: translateY(10px); }
  .c-house-card--seto .c-house-card__label { margin-top: -14px; }

  /* ---- 施設詳細：施設名 → 外観写真 → 説明文（P9） ---- */
  .c-facility__head { display: flex; flex-direction: column; gap: 0; }
  .c-facility__head > div { display: contents; }
  .c-facility__head > div > * { order: 3; }
  .c-facility__head .c-facility__en,
  .c-facility__head .c-facility__name { order: 1; }
  .c-facility__head .c-facility__media { order: 2; width: 100%; max-width: 100%; margin: 24px 0 8px; }

  /* ---- ルアナケアについて（P10〜P12） ---- */
  .c-greeting { gap: 0; }
  #greeting-head { font-size: 20px; }
  .c-greeting__media { order: -1; width: 69%; max-width: 224px; margin: 0 auto 34px; transform: translate(4px, -4px); }
  .c-greeting__media::after { width: 50%; right: -8%; }
  /* 見本（P10）の行送り33px。本文16px以上を維持。約物の半角詰めは下の共通ルール。太さ・字間は本文の標準のまま（理念の本文と同じ） */
  .c-greeting__text p { line-height: 33px; }
  .c-facility-card .c-map { aspect-ratio: 472 / 328; }   /* 写真と同じくらいの縦幅 */
  #facility.c-facility { padding-bottom: 56px; }        /* 施設一覧とお問い合わせ帯の間 */

  /* ---- お知らせ（P13） ---- */
  .c-news-filter { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.85; font-weight: 400; }
  .c-news-filter .is-current { color: var(--c-accent); text-decoration: none; }
  .c-news-filter li + li::before { content: none; }
  .c-news-filter li:not(:last-child)::after { content: " /"; color: var(--c-accent); }
  .c-news-grid { gap: 40px; margin-top: 32px; }
  .c-news-card {
    padding: 32px 26px 40px;
    background: var(--c-white);
    border: 1px solid #d6d6d6;
    border-radius: 16px;
  }

  .c-news-card__media { aspect-ratio: 272 / 168; }
  .c-news-card__cat { margin-top: 12px; }
  .c-news-card__title { margin-top: 4px; }
  .c-news-card__text { margin-top: 10px; }
  .c-news-card__more { min-width: 200px; }

  /* ---- 採用情報：キャッチと写真のレイアウト（P14） ---- */
  .c-recruit-intro {
    display: grid;
    grid-template-columns: 39% 1fr 25%;
    grid-template-areas:
      "head head p1"
      "p2   tail tail"
      "p2   p3   p3";
    column-gap: 14px;
    row-gap: 14px;
    align-items: start;
    margin-top: 31px;
  }
  .c-recruit-intro .c-recruit-intro__catch,
  .c-recruit-intro .c-recruit-photos { display: contents; }
  .c-recruit-intro__catch { font-size: 19px; line-height: 2.5; letter-spacing: .04em; }
  @media (max-width: 375px) { .c-recruit-intro__catch { font-size: 17px; letter-spacing: 0; } }
  .c-recruit-intro__head { grid-area: head; word-break: auto-phrase; }
  .c-recruit-intro__tail { grid-area: tail; align-self: center; justify-self: end; word-break: auto-phrase; transform: translateY(-17px); }
  .c-recruit-intro .c-recruit-photos figure:nth-child(1) { grid-area: p1; aspect-ratio: 5 / 8; transform: translateY(-5px); }
  .c-recruit-intro .c-recruit-photos figure:nth-child(2) { grid-area: p2; aspect-ratio: 4 / 3; align-self: center; transform: translateY(-24px); }
  .c-recruit-intro .c-recruit-photos figure:nth-child(3) { grid-area: p3; aspect-ratio: 4 / 3; width: 52%; justify-self: center; transform: translateY(-8px); }
  .c-recruit-intro .c-recruit-photos figure { border-radius: 14px; max-width: none; }
  .c-recruit-intro .c-recruit-photos figure:first-child { border-radius: 999px; }
  .c-band--about.c-band--vm { margin-top: 32px; padding-top: 41px; padding-bottom: 40px; }
  .c-band--about.c-band--vm .c-card-white { padding-top: 45px; padding-bottom: 48px; }
  .c-band--about.c-band--vm .c-section-head__ja { letter-spacing: 0; }
  .c-band--about.c-band--vm .c-lead.u-mt-xs { margin-top: 12px; }
  .c-band--about.c-band--vm .c-list-check { margin-top: 18px; }
  .c-band--about.c-band--vm .c-list-check li { padding-left: .7em; text-indent: -.7em; font-size: 17px; line-height: 32px; }
  .c-band--about.c-band--vm .c-list-check li + li { margin-top: 11px; }
  .c-band--about.c-band--vm .c-note { margin-top: 18px; line-height: 33px; }
  .c-band--about.c-band--vm .c-note br { display: none; }   /* 見本は自然な折り返しのみ */
  .c-band--about.c-band--vm .u-mt-s { margin-top: 39px; }

  /* ---- 採用情報：働く魅力のカード（P15。10/12 に円→上が丸い縦長のカードへ） ---- */
  .c-merit-grid { max-width: 340px; gap: 20px; }
  .c-merit__label { font-size: 24px; }   /* 見本P15実測 */
  /* 理念・使命・運営会社の行送り（見本P11：33px） */
  #vision .c-prose, #mission .c-prose, #company .c-prose { line-height: 33px; margin-top: 14px; }
  .c-fit { padding-bottom: 80px; }
  .c-fit::after { width: 110px; right: -8px; bottom: -50px; } /* 角に半分重ね、文字は避ける */
  .c-fit__list li:nth-child(2) { order: 4; }
  .c-fit__list li:nth-child(3) { order: 2; }
  .c-fit__list li:nth-child(4) { order: 5; }
  .c-fit__list li:nth-child(5) { order: 3; }
  .c-fit__list li:nth-child(6) { order: 6; }
  .c-fit__title { text-align: center; }   /* こんな人が向いてます！ */
  .c-fit__list { line-height: 1.8; }
  .c-fit__list li { padding-left: 1em; text-indent: -1em; }
  .c-fit__list li + li { margin-top: 8px; }

  /* ---- 採用募集：2行＋下部に「詳しくはこちら」（P16） ---- */
  .c-job {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  .c-job__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 14px;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
  }
  .c-job__sep { display: none; }
  /* 見本P16の実測（390px）：見出し→1件目・カード間25px・「各施設の雰囲気は」までの距離 */
  .c-job-list { margin: 18px 0 0; gap: 25px; }
  .c-recruit-cta { margin: 18px 0 0; }
  .c-recruit-status { margin: 18px 0 0; }
  .c-recruit-status + .c-recruit-cta { margin-top: 20px; }
  section:has(.c-job-list) + .u-mt-l,
  section:has(.c-recruit-cta) + .u-mt-l { margin-top: 70px; }
  section:has(.c-job-list) + .u-mt-l #houses-head,
  section:has(.c-recruit-cta) + .u-mt-l #houses-head { line-height: 1.7; }
  /* 黄色のボタンは、同じ採用ページの「サービス内容を詳しく見る」と同じ270px幅で中央に置く（伊藤さん指示 10/19。狭い画面では列の幅に収める） */
  .c-btn--yellow { min-width: 0; width: min(270px, 100%); min-height: 64px; padding-inline: 22px; font-size: 16px; }
  .c-job__more {
    display: block;
    padding: 8px 16px;
    text-align: center;
    color: #fff;
    background: var(--c-teal);
  }
  .c-job:hover .c-job__more,
  .c-job:focus-visible .c-job__more { background: var(--c-primary); }
}

/* ---------- スマホだけの調整（2026-10-02 先方フィードバック。パソコン・タブレットには効かせない） ---------- */
@media (max-width: 767px) {
  /* SP-06：ホーム「ルアナとは」の白カードと葉の間に緑のすき間があった。
     葉の画像は上半分が透明なので、見本（SP P3）くらいの大きさに広げ、カードの下端より上から葉が始まるようにする。
     重なり順は見本どおり葉がカードの後ろ（カードの下端はそのまま見せ、すき間だけなくす） */
  .c-band--about:has(#about-head) .c-deco--ground { overflow: hidden; }
  .c-band--about:has(#about-head) .c-deco--ground img {
    width: max(150%, 600px);
    max-width: none;
    margin-left: calc((100% - max(150%, 600px)) / 2);
  }

  /* SP-15・SP-24：「お問い合わせ／フォームはこちら」を必ず2行に収める。
     Safari では文字の箱が「フォームはこちら」ちょうどの幅で計算され、端数で「フォーム／はこちら」と割れて3行になっていた。
     行の途中では折り返さず、幅の狭い画面ではアイコンの横に収まる大きさまで文字を縮める（最大は従来の大きさ） */
  .c-btn-box--mail { container-type: inline-size; }
  .c-btn-box--mail .c-btn-box__main { white-space: nowrap; font-size: min(21px, calc((100cqi - 56px) / 8.6)); }
  .c-band--contact .c-btn-box--mail .c-btn-box__main { font-size: min(24px, calc((100cqi - 64px) / 8.2)); }

  /* お問い合わせボタンの受付時間：「２４時間３６５日いつでも／受付しております」で折り返す。
     iPhone の Safari では text-wrap: pretty が行の長さをそろえて「いつ／でも」と割れていたため、普通の折り返しにする */
  .c-btn-box--mail .c-btn-box__label { text-wrap: wrap; word-break: keep-all; overflow-wrap: break-word; }

  /* 文章（本文・リスト・お知らせ・カードの文）は、文節で切らず、横幅いっぱいまで続けて、行末で（語の途中でも）折り返す。
     body の text-wrap: pretty は、iPhone の Safari では行の長さをそろえて（3〜5文字ぶん短く）折り返すため、
     文章全体が左に寄って見える（2026-10-03 伊藤さんの指示と、iPhone実機での確認）。スマホでは普通の折り返しにする。
     中央そろえの見出し・短い文だけは、行の長さをそろえる（従来どおり）。
     1文字だけが次の行に落ちるのは、luana_yakumono() が行の最後の3文字を折り返さないことで防ぐ */
  body { text-wrap: wrap; }
  .c-voice-card__title, .c-section-head__ja, .c-hero__title, .c-hero-board__lead, .c-contact__lead,
  .c-recruit-banner__text, .c-facility-cta__addr, .l-footer__tagline, .c-btn-box__name, .c-merit__label, .c-footer-btn, .u-center { text-wrap: pretty; }

  /* 約物（、。「」・）は半角幅に詰める（見本は、どの本文も約物が半角）。luana_yakumono() が包んだ約物すべてに共通で効く。
     以前はブロックごとに書いていたため、書いていないブロック（理念・使命、こんな人が向いてます！）だけ約物の後ろが
     全角ぶん空いて、行によって字間が広く見えた（2026-10-04 天方さんの指摘） */
  .yk-o { margin-left: -.5em; }
  .yk-c { margin-right: -.5em; }
  .yk-m { margin-inline: -.25em; }

  /* 名称・住所（施設情報・協力医療機関・住所・フッターの会社情報）と、文章・見出しの中の施設名は、語の途中で折り返さない。
     語は main.js（スマホだけ）が span.c-unit で包む（スペース・「・」・「/」・読点の間が1語）。inline-block にすると、
     1語が1行に収まるときは分割されず、1語が1行より長いときだけ語の中で折り返す。折り返すのは語と語の間だけで、
     括弧や「・」の禁則は通常どおり守られる（word-break: keep-all は Safari で禁則が守られないため使わない）。文章（本文）には使わない */
  .c-unit { display: inline-block; }

  /* お知らせ一覧の題名：「ルアナハウス＋施設名」を1行目に、題名の本文は次の行から（main.js がスマホだけ、題名の先頭の施設名を包む）。文字・大きさは変えない */
  .c-title-facility { display: block; }

  /* お問い合わせページの電話ボタン：施設名の箱は最長の行ちょうどの幅で決まるため、Safari では端数で「ルアナハウス可児広見AP」が2行に割れる。
     施設ごとの改行は <br> で入れているので、名称の途中では折り返さない（SP-15 の「フォームはこちら」と同じ原因） */
  .c-tel-panel .c-btn-box__name { white-space: nowrap; }

  /* SP-28：ルアナケアについて「理念・使命・運営会社」は見本どおり、見出しは中央・本文は左そろえ（字下げも見本どおり）。
     見出し「理念」「使命」は見本どおり字間をあける（2文字の見出しだけ。右にも字間が付くぶん、字下げで中央に戻す） */
  .c-section-head__ja--spread { letter-spacing: .5em; text-indent: .5em; }

  /* SP-36：採用情報「理念と使命」も見本どおり本文は左そろえ。
     2つの文は文ごとに改行し、それぞれ横幅いっぱいまで続けて折り返す */
  .c-band--about.c-band--vm .c-card-white .c-note__line { display: block; }

  /* SP-36：「こんな人が向いてます！」は箇条書きの点を左でそろえ、文章は箱の横幅いっぱいまで続けて折り返す（幅は絞らない） */
}

/* ---------- 2026-10-12 先方指示（10/7資料）：余白・文字サイズの調整はPCだけ（スマホ・タブレットには効かせない） ---------- */
@media (min-width: 1025px) {
  /* #3 左メニューの項目どうしの間を少し広げる（高さ640pxでも収まる：vh連動で上限32px） */
  .l-sidebar { --nav-gap: clamp(14px, 2.6vh, 32px); }
  /* #6 ホーム：VOICE（人物の帯）とFLOWの帯の間に余白 */
  .c-band--flow { margin-top: 64px; }
  /* #7 FLOWのカード：文字の左右の余白を均等に。文字幅（1字=1em）の整数倍に幅を切り下げて中央に置くと、
     いっぱいまで入った行は左右が同じ余白になる（端数ぶんが右だけに余るのを防ぐ。字間は広げない）。未対応のブラウザは今まで通り */
  .c-flow-card__text { width: round(down, 100%, 1em); margin-inline: auto; }
  /* #8 フッターの4列メニューの文字を約1.125倍に（見出し16→18px・リンク16→18px。大きい画面では見出し20→22.5px） */
  .l-footer__nav h2 { font-size: clamp(18px, 1.18vw, 22.5px); }
  .l-footer__nav ul a { font-size: 18px; }
  /* #13 ルアナケアについて：最後の施設カードとCONTACT帯の間に余白 */
  .c-facility--about { padding-bottom: 64px; }
  /* #25 お問い合わせ：電話の下の花・葉の帯と、黄色いフォーム帯の間の余白をなくす（スマホは既にすき間なし） */
  .c-deco-divider + .c-band--form { margin-top: 0; }
  /* フッター左の住所：番地（「下切3018番地2」）は途中で折り返さない（1280pxで「3018番／地2」と割れていた。footer.php が span.c-nobr-pc で包む） */
  .l-footer__meta .c-nobr-pc { white-space: nowrap; }
  /* 間取り図のある施設は、「定員・体験利用」の列を下の行（協力医療機関の行）まで伸ばす。協力医療機関は今の位置のまま、間取り図が右の列に続く（先方指示 P13・P15・P17） */
  .c-info-grid { grid-template-rows: auto auto 1fr; }   /* 伸びた分は最後の行が受け持つ（料金の行が伸びて協力医療機関が下がらない） */
  .c-info-block.has-plan { grid-row: span 2; }
}

/* #8 の続き：フッター4列は、文字を大きくしても施設名が語の途中で切れないように、列を内容の幅にする（PC＝1025px以上）。
   施設名・「利用者さん・ご家族の声」などは、切れ目（「・」の後ろ・「ルアナハウス」の後ろ・「より」の前）でだけ折り返す（切れ目は footer.php の luana_footer_label()）。
   見出しは1行のまま。左の列だけ縮められるようにして、右の3列に施設名を入れる幅を譲る。
   列の間隔は、1025〜1279px では8px（狭い幅で見出し・地名を切らずに収めるため）、1280px以上では14px */
@media (min-width: 1025px) {
  .l-footer__nav { display: flex; justify-content: space-between; column-gap: 8px; }
  .l-footer__nav > div { flex: 0 1 auto; min-width: min-content; }
  .l-footer__nav > div:first-child { flex-shrink: 10; }
  .l-footer__nav h2 { white-space: nowrap; }
  .l-footer__nav ul a { display: flex; }            /* 「・」を別にして、折り返した2行目を「・」の後ろにそろえる */
  .l-footer__nav .c-seg { white-space: nowrap; }
}
@media (min-width: 1280px) {
  .l-footer__nav { column-gap: 14px; }
  .l-footer__nav .c-nm { white-space: nowrap; }     /* 「ルアナハウス＋地名」は、広い幅では1つのかたまり（1025〜1279px では「ルアナハウス」の後ろだけで折れる） */
}
/* 1366px以上は右の3列を内容の幅のまま（縮めない）にして、施設名＋「より」を1行に保つ。1280〜1365px は右の列も縮めて、「より」の前で折り返す */
@media (min-width: 1366px) {
  .l-footer__nav > div { flex-shrink: .001; }
}