@charset "UTF-8";
/* -----------------------------------------------
* Page エントリーポイント
*   1ページ＝1ディレクトリ。各ページの担当者は自分のディレクトリだけを触る。
-------------------------------------------------- */
/* -----------------------------------------------
* TOP（index.html）— セクションごとにファイルを分ける
*   中身は各セクションの担当者が書く。ここは読み込みの束ねだけ。
-------------------------------------------------- */
/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# home-fv — TOP の FV（オレンジ帯・円写真・キャッチ・子供イラスト）
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/chama-inspect.log ＋ ref/fv.png の ink 走査）
#   帯       [0,0,2000,1170] #ffab58。上 130px は共通ヘッダーが通常フローで占めるので
#            この要素の高さは 1170 - 130 = 1040
#   写真円   [265,132,1025,892] 760×760 → 帯内 top = 132 - 130 = 2
#   黄円     [285,142,1045,902] ＝ 写真円の背面に +20 / +10
#   キャッチ ink 1行目 y236-280 ／ 2行目 y321-364 ＝ 行ピッチ 85px（85 / 48 = 1.7708）
#            左端 x=1054 → 帯内 top は行ボックス上端に直すと 84
#   子供絵   [1173,418,1597,871] 425×454 → 帯内 top = 418 - 130 = 288
#   下端は凹カーブ curve-concave（中央 y=1000 / 端 y=1169 ＝ 深さ 169px）
#
# 幅 1200〜2000 は vw() が 2000 基準でそのまま比率を保つので、絶対配置のまま崩れない。
# 縦積みに変えるのは SP（md）だけ。そこで隣接ブロックの margin-top を明示する。
===================================================== */
.home-fv {
  position: relative;
  overflow: hidden;
}
.home-fv::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, calc(min(8.5vw, 170px) * -1));
          transform: translate(-50%, calc(min(8.5vw, 170px) * -1));
  width: 400%;
  aspect-ratio: 8000/10644;
  border-radius: 50%;
  background-color: #fcefcf;
  pointer-events: none;
}
.home-fv {
  width: 100%;
  height: min(52vw, 1040px);
  background-color: #ffab58;
}
.home-fv {
  /* ▼ 円写真 760×760。素材 mv-photo は正方形なので円は CSS で作る */
}
.home-fv__photo {
  position: absolute;
  z-index: 1;
  left: min(13.25vw, 265px);
  top: min(0.1vw, 2px);
  width: min(38vw, 760px);
  aspect-ratio: 1/1;
}
.home-fv__photo::before {
  content: "";
  position: absolute;
  left: 2.6316%;
  top: 1.3158%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffe87e;
}
.home-fv {
  /* ▼ 写真を丸く切り抜く枠。素材 mv-photo は 763×763 ＝ カンプの円 760×760 より
       約 1.5px ずつ外側まで書き出されている。760 に縮めると絵柄が 1〜2px ずれるので、
       763 のまま -2 / -1 にずらして置く（カンプとの突き合わせで確定）。 */
}
.home-fv__photo-mask {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
.home-fv__photo-mask img {
  position: absolute;
  left: calc(min(0.1vw, 2px) * -1);
  top: calc(min(0.05vw, 1px) * -1);
  display: block;
  width: calc(100% + min(0.15vw, 3px));
  max-width: none;
  height: auto;
}
.home-fv {
  /* ▼ キャッチ（マーケティングのコピー文＝見出しではないので p のまま）
       カンプは中央揃え：1行目 ink 1111-1663 / 2行目 ink 1054-1719 で中心が 1387 にそろう。
       左端は 2行目（長い方）の 1054 に合わせ、幅は中身なり（max-content）にして
       1行目だけが中央に寄る形にする。こうすると本文が 20px で頭打ちになる幅でも
       文字列が左へ伸びず、MV の円写真に重ならない。 */
}
.home-fv__catch {
  position: absolute;
  z-index: 2;
  left: min(52.7vw, 1054px);
  top: min(4.2vw, 84px);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(20px, min(2.4vw, 48px), 48px);
  font-weight: 600;
  line-height: 1.7708;
  letter-spacing: 0.04em;
  text-align: center;
}
.home-fv {
  /* ▼ 子供イラスト（黄色い地面ごと1枚の透過素材） */
}
.home-fv__children {
  position: absolute;
  z-index: 2;
  left: min(58.65vw, 1173px);
  top: min(14.4vw, 288px);
  width: min(21.25vw, 425px);
  height: auto;
}

/* =====================================================
# home-about — TOP の ABOUT US
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/chama-inspect.log ＋ ref/about.png の ink 走査）
#   英字 "ABOUT US"     ink [867,1110,1132,1151] 60px Barlow Bold #f79737（中央 x=1000）
#   和文 "私たちについて" ink [918,1176,1081,1197] 24px NotoSansJP SemiBold
#   リード ink 7行 行頭 y = 1260 / 1308 / 1356 / 1404 / 1452 / 1500 / 1548（ピッチ 48px）
#          ＝ 18px × line-height 2.6667（foundation/_base.scss の body 既定値そのまま）
#   キリン絵 ink [365,1176,574,1385] ／ 子供絵 ink [1435,1373,1644,1582]
#          素材の透明余白（キリン 左1/上2・子供 左2/上2）を戻した画像左上は
#          キリン (364,1174) ／ 子供 (1433,1371)
#
# 🚨 セクションの箱は FV 帯の下端（y=1170）から始まるが、カンプの英字見出しは
#    y=1110 ＝ 帯の中に食い込んだ凹カーブの内側にある。負の margin-top で持ち上げる。
#
# 🚨 装飾の絵は「.inner と同じ幅の箱」を基準に置く（$width-inner + 左右padding = 1530px）。
#    ビューポート基準の vw で置くと、本文が 16px で頭打ちになる 1500px 付近から
#    絵と本文が重なる（本文だけ相対的に太るため）。1530px の箱に紐づけると
#    箱が画面幅まで縮む＝絵も内側に寄らないので、1024px まで重ならない。
===================================================== */
.home-about {
  position: relative;
  margin-top: calc(min(3.55vw, 71px) * -1);
  padding-bottom: 0;
}
.home-about {
  /* ▼ 見出しは c-sec-title--center をそのまま使う（位置合わせは上の margin-top 側で持つ） */
  /* ▼ リード文（7行・中央寄せ・改行位置は PSD の原文どおり）
       文字サイズ・行送りは body 既定（clamp(16px, vw(18), 18px) / 2.6667）を継承する */
}
.home-about__lead {
  margin-top: min(2.3vw, 46px);
  text-align: center;
}
.home-about {
  /* ▼ 2行目の事業名だけ橙（カンプ ink x 838-1146 ＝「児童発達支援・放課後等デイサービス」） */
}
.home-about__em {
  color: #f79737;
  font-weight: 600;
}
.home-about {
  /* ▼ 装飾の絵を載せる箱（.inner と同じ 1530px 幅・セクション全高） */
}
.home-about__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: calc(1530 * var(--to-rem));
  margin-inline: auto;
  pointer-events: none;
}
.home-about {
  /* ▼ キリン円（白円＋黄円は素材に焼き込み済み。CSS で円を作らない） */
}
.home-about__giraffe {
  position: absolute;
  left: min(6.45vw, 129px);
  top: min(3.75vw, 75px);
  width: min(10.65vw, 213px);
  height: auto;
}
.home-about {
  /* ▼ 子供円 */
}
.home-about__kids {
  position: absolute;
  right: min(5.95vw, 119px);
  top: min(13.6vw, 272px);
  width: min(10.65vw, 213px);
  height: auto;
}

/* =====================================================
# home-daysvc — TOP の 放課後等デイサービス
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/chama-inspect.log ＋ ref/daysvc.png の走査）
#   写真         [390,1629,1590,2329] 1200×700・角丸 r=20（走査で r=20 を確認）
#   橙オフセット面 [410,1649,1610,2349] 同寸・+20 / +20・角丸 r=20（写真の背面）
#     写真と橙面を合わせた [390,1610] が 2000 の中央にそろう ＝ 幅 1220 のかたまりを中央寄せ
#   白カード     [1090,2129,1590,2329] 500×200・角丸 r=20（写真の右下角にぴったり重なる）
#     見出し ink [1160,2165,1520,2198] ＝ カード天から 36px
#     VIEW MORE  [1220,2228,1459,2287] 240×60 ＝ 見出し ink 底から 30px
#
# 直前の ABOUT US の箱は y=1579 で終わる。写真の天 1629 まで 50px。
===================================================== */
.home-daysvc {
  position: relative;
  padding-top: min(2.5vw, 50px);
}

/* ▼ 写真 ＋ 橙オフセット面のかたまり（幅 1220 ＝ 写真 1200 ＋ ずらし 20） */
.home-daysvc__box {
  position: relative;
  width: min(61vw, 1220px);
  margin-inline: auto;
  padding-bottom: min(1vw, 20px);
}
.home-daysvc__box::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: min(1vw, 20px);
  top: min(1vw, 20px);
  width: min(60vw, 1200px);
  height: min(35vw, 700px);
  border-radius: calc(20 * var(--to-rem));
  background-color: #f79737;
}

/* ▼ 写真の切り抜き枠。素材 1204×703 を等倍のまま -2 / -2 にずらして置く
     （1200×700 に縮めると絵柄が 1〜2px ずれる。カンプとの突き合わせで確定） */
.home-daysvc__photo {
  position: relative;
  z-index: 1;
  width: min(60vw, 1200px);
  height: min(35vw, 700px);
  border-radius: calc(20 * var(--to-rem));
  overflow: hidden;
}
.home-daysvc__photo img {
  position: absolute;
  left: calc(min(0.1vw, 2px) * -1);
  top: calc(min(0.1vw, 2px) * -1);
  display: block;
  width: calc(100% + min(0.2vw, 4px));
  max-width: none;
  height: auto;
}

/* ▼ 白カード（c-card の白地・角丸 r20 をそのまま使う）
     🚨 c-card の padding は component の CSS が page より後ろに出力されるため、
        同じ詳細度（クラス1つ）では勝てない。詳細度を1つ上げて上書きする。 */
.home-daysvc__box .home-daysvc__card {
  position: absolute;
  z-index: 2;
  left: min(35vw, 700px);
  top: min(25vw, 500px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: min(25vw, 500px);
  height: min(10vw, 200px);
  padding: min(1.2vw, 24px) min(1vw, 20px) 0;
  border-radius: calc(20 * var(--to-rem)) 0 calc(20 * var(--to-rem)) 0;
}

/* ▼ VIEW MORE（c-btn そのまま。見出しの ink 底 2198 → ボタン天 2228 ＝ 30px） */
.home-daysvc__btn {
  margin-top: min(1.05vw, 21px);
}

/* =====================================================
# TOP > NEWS（ちゃまだより）
#
# カンプ実測（DOC 2000 基準）
#   一次ソース = ~/work/_ascii/chama-inspect.log ＋ 参照画像 ref/news.png の画素走査
#   白箱     [265,2529,1735,2949] 1470×420・角丸 20・純白（.c-card の型）
#   ぞう     [295,2486,458,2590] 163×104 … 白箱の上端より 43px 上へはみ出す
#   うさぎ   [1609,2850,1705,2980] 96×130 … 白箱の下端より 31px 下へはみ出す
#   H2       英字 [368,2628,525,2672] ／ 和文 [367,2695,500,2717]（左寄せ）
#   ボタン   [369,2784,569,2844] 200×60（= .c-btn--ja の実寸）
#   罫線     y=2618 / 2693 / 2768 / 2843（各 1px #cccccc・x 675→1655）
#   日付     x=675（16px Barlow Medium）／ タイトル x=790（16px NotoSansJP Medium）
#
# → 白箱の内側余白は 上 89 / 右 80 / 下 105 / 左 102、
#   中身は 見出し列 308（367→675）＋ リスト列 980（675→1655）の2段組み。
#
# 🚨 ぞう・うさぎが箱からはみ出すので白箱に overflow:hidden を掛けない。
# 🚨 style.scss は page → component の順で読むため、component の値を page から
#   上書きする箇所（c-card の padding）は 2クラス指定にして詳細度で勝たせる。
===================================================== */
.home-news {
  padding-block: clamp(60px, min(9vw, 180px), 180px) clamp(60px, min(8.7vw, 174px), 174px);
}

.home-news__box.c-card {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: clamp(28px, min(4.45vw, 89px), 89px) clamp(20px, min(4vw, 80px), 80px) clamp(32px, min(5.25vw, 105px), 105px) clamp(20px, min(5.1vw, 102px), 102px);
}

/* ▼ 装飾イラスト（箱の外へはみ出す・意味を持たないので alt は空） */
.home-news__illust {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}

.home-news__illust--elephant {
  top: clamp(-43px, min(2.15vw, 43px) * -1, -24px);
  left: clamp(16px, min(1.5vw, 30px), 30px);
  width: clamp(90px, min(8.15vw, 163px), 163px);
}

.home-news__illust--rabbit {
  right: clamp(16px, min(1.5vw, 30px), 30px);
  bottom: clamp(-31px, min(1.55vw, 31px) * -1, -18px);
  width: clamp(56px, min(4.8vw, 96px), 96px);
}

/* ▼ 左の見出し列（H2 ＋ 全ての記事を見る） */
.home-news__head {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: clamp(200px, 23.91%, 308px);
}

.home-news__btn {
  margin-top: clamp(24px, min(3.4vw, 68px), 68px);
}

/* ▼ 右の記事リスト（上下の罫線で3行） */
.home-news__list {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  border-top: 1px solid #cccccc;
}

.home-news__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: clamp(57px, min(3.75vw, 75px), 75px);
  padding-block: calc(8 * var(--to-rem));
  border-bottom: 1px solid #cccccc;
}

/* ▼ 日付＋NEW（2026-09-04 修正#3 で NEW を追加）
   幅を固定して、NEW が付かない行もタイトルの左端が揃うようにする。
   日付 x=675 → タイトル x=790（115px）がカンプだが、NEW を挟むぶん 160px へ広げた。
   下限 130px は 日付（16px で約78px）＋gap＋NEW（約34px）が収まる最小値 */
.home-news__meta {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(8px, min(0.6vw, 12px), 12px);
  width: clamp(130px, min(8vw, 160px), 160px);
}

/* ▼ NEW ＝ 橙の文字（仕様書 TOPレイアウト [40][44]・下層 news の news-list__new と同じ） */
.home-news__new {
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.home-news__date {
  white-space: nowrap;
  color: #333333;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

.home-news__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(16px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ▼ SP：見出し列とリストを縦積み */
/* =====================================================
# TOP > OTHER SERVICE（その他の福祉事業）
#
# カンプ実測（DOC 2000 基準）
#   一次ソース = ~/work/_ascii/chama-inspect.log ＋ 参照画像 ref/other.png の画素走査
#   水色帯   [0,3123,2000,4123]（PSD の矩形。実際の見た目の下端は CONTACT 帯の
#            凸カーブが受け持つので、この帯は 3123→3691 の 568px で組む）
#   鳥       [265,3335,383,3433] 118×98
#   H2       英字 [402,3341,814,3385] 青 ／ 和文 [402,3407,598,3431]
#   H3       [396,3489,720,3524] 36px 青（= .c-heading--accent の型）
#   ボタン   [395,3552,635,3612] 240×60（= .c-btn--accent の実寸）
#   写真     [855,3213,1715,3713] 860×500・角丸 20
#   青の面   [875,3233,1735,3733] 860×500（写真の +20 / +20 背面オフセット）
#
# → 左のテキスト列 265→814（549）／右の写真列 855→1735（880）。
#   テキスト列の文字の左端は 396（鳥の右端 383 ＋ 13）。
#
# 🚨 写真の下端 3733 は CONTACT 帯の上端 3691 より下＝カンプでは写真が
#   凸カーブ（水色）の上に重なる。z-index:2 を与えて CONTACT（z-index:1）の
#   擬似要素より前面に置き、帯からはみ出す分は figure の負マージンで作る。
===================================================== */
.home-other {
  position: relative;
  padding-top: clamp(40px, min(4.5vw, 90px), 90px);
  background-color: #eef9ff;
}

.home-other__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* ▼ 左：鳥アイコン ＋ H2 ＋ H3 ＋ VIEW MORE */
.home-other__body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin-top: clamp(30px, min(5.95vw, 119px), 119px);
  padding-left: clamp(80px, min(6.55vw, 131px), 131px);
}

.home-other__bird {
  position: absolute;
  top: clamp(2px, min(0.15vw, 3px), 3px);
  left: 0;
  display: block;
  width: clamp(64px, min(5.9vw, 118px), 118px);
  height: auto;
}

/* ▼ カンプでは英字・和文の見出しだけ H3／ボタンの列より 5px 右にある
      （PSD ink 実測：英字 402 / 和文 402 に対し H3 396・ボタン 395）。
      同じフォント・同じサイズで描いた実測でも同じ 5px 差が出るので合わせる。 */
.home-other .c-sec-title {
  margin-left: clamp(2px, min(0.25vw, 5px), 5px);
}
.home-other .c-sec-title .c-sec-title__en {
  letter-spacing: -0.012em;
}

.home-other__lead.c-heading {
  margin-top: clamp(24px, min(2.4vw, 48px), 48px);
}

.home-other__btn {
  margin-top: clamp(14px, min(1vw, 20px), 20px);
}

/* ▼ 右：写真 ＋ 背面の青いオフセット面 */
.home-other__figure {
  position: relative;
  z-index: 2;
  width: 59.86%;
  padding-bottom: clamp(10px, min(1vw, 20px), 20px);
  margin-bottom: clamp(-42px, min(2.1vw, 42px) * -1, -20px);
}
.home-other__figure::before {
  content: "";
  position: absolute;
  inset: clamp(10px, min(1vw, 20px), 20px) 0 0 clamp(10px, min(1vw, 20px), 20px);
  border-radius: calc(20 * var(--to-rem));
  background-color: #6eb8ea;
}

.home-other__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% - clamp(10px, min(1vw, 20px), 20px));
  height: auto;
  border-radius: calc(20 * var(--to-rem));
}

/* ▼ タブレット：2段組みだとテキスト列が狭く英字見出しが収まらないので縦積み */
/* =====================================================
# TOP > CONTACT（お問い合わせ）
#
# カンプ実測（DOC 2000 基準）
#   一次ソース = ~/work/_ascii/chama-inspect.log ＋ 参照画像 ref/contact.png の画素走査
#   オレンジ帯 [0,3691,2000,4461]。上端は水色が下へ膨らむ凸カーブ。
#     実測プロファイル（帯の上端からの深さ）x=100:31 / 200:59 / 400:105 /
#     600:140 / 800:162 / 1000:169 ＝ mixin curve-convex の楕円と一致。
#   H2   英字 [876,3970,1123,4014] 白 ／ 和文 [928,4036,1073,4059] 白（中央寄せ）
#   カード TEL [430,4120,970,4340] ／ MAIL [1030,4120,1570,4340]（540×220・角丸20）
#   ボタン [520,4213,880,4293] ／ [1120,4213,1480,4293]（360×80・角丸フル・#f79737）
#   カード内 見出し [587,4163,812,4182] 20px ／ TEL番号 24px ／ MAIL文言 20px
#   → カードの内側余白は 上 37 / 左右 90（= 540 の 16.667%）/ 下 47
#
# 🚨 curve-convex は overflow:hidden を掛けるので、帯の外へはみ出す要素を
#   この中に入れない。z-index:1 は OTHER の写真（z-index:2）を凸カーブより
#   前面に出すための土台（カンプでは写真の下端がカーブに重なる）。
===================================================== */
.home-contact {
  position: relative;
  overflow: hidden;
}
.home-contact::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  -webkit-transform: translate(-50%, min(8.5vw, 170px));
          transform: translate(-50%, min(8.5vw, 170px));
  width: 400%;
  aspect-ratio: 8000/10644;
  border-radius: 50%;
  background-color: #eef9ff;
  pointer-events: none;
}
.home-contact {
  z-index: 1;
  padding-block: clamp(120px, min(13.5vw, 270px), 270px) clamp(60px, min(6.05vw, 121px), 121px);
  background-color: #ffab58;
}

/* ▼ 白カード2枚 */
.home-contact__cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4.08%;
  margin-top: clamp(30px, min(3.05vw, 61px), 61px);
}

.home-contact__card.c-card {
  width: 36.73%;
  padding: clamp(20px, min(1.85vw, 37px), 37px) clamp(20px, 6.12%, 90px) clamp(24px, min(2.35vw, 47px), 47px);
  text-align: center;
}

.home-contact__card-title {
  margin: 0;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ▼ カード内のボタン（カンプ 360×80・カードの内側幅いっぱい） */
.home-contact__btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(8px, min(0.7vw, 14px), 14px);
  height: clamp(56px, min(4vw, 80px), 80px);
  margin-top: clamp(16px, min(1.3vw, 26px), 26px);
  border-radius: 9999px;
  background-color: #f79737;
  text-decoration: none;
}

.home-contact__btn-icon {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  display: block;
  width: clamp(16px, min(1.15vw, 23px), 23px);
  height: auto;
}
.home-contact__btn-icon[src*=mail] {
  width: clamp(26px, min(1.85vw, 37px), 37px);
}

.home-contact__btn-num {
  color: #fff;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(24px, min(1.8vw, 36px), 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.home-contact__btn-label {
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ▼ TEL：発信は SP のみ（tel-3.1.js が span を包む）。
      PC は表示のみで hover・cursor・transition を付けない＝EZ 規約 */
.home-contact__btn--tel .home-contact__btn-icon {
  width: clamp(16px, min(1.15vw, 23px), 23px);
}

/* ▼ MAIL：お問い合わせページへのリンク */
.home-contact__btn--mail {
  gap: clamp(8px, min(0.6vw, 12px), 12px);
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.home-contact__btn--mail .home-contact__btn-icon {
  width: clamp(26px, min(1.85vw, 37px), 37px);
}

/* ▼ 1024〜1199px：横並びのままカードが細くなるので内側余白を詰める
      （詰めないと「メールフォームでのお問い合わせ」が2行になり左右のボタンの高さがずれる） */
/* ▼ タブレット：カード2枚を縦積み */
/* =====================================================
# chama.html（仕様書シート2「ちゃま」）
#
# 文言は全て仕様書原文ママ（drawing_2.txt の図形 [NN] / cells_2.txt のセル値）。
# 見た目は TOP の設計言語をそのまま流用し、新しい型を発明しない：
#   セクション見出し = c-heading（36px NotoSansJP SemiBold $color_main・中央）
#   小見出し         = c-heading3（24px NotoSansJP SemiBold $color_txt）
#   白角丸カード     = c-card（角丸 20px・カンプ実測）
#   表               = c-table ／ 写真グリッド = c-photo-grid
#
# 🚨 style.scss は page → foundation → layout → component の順で読み込むため、
#   同じ詳細度なら component が page に勝つ。component 側が指定済みのプロパティを
#   page から上書きする時だけ、複合セレクタ（例 &__grid.c-photo-grid）で詳細度を上げる。
#
# 縦のリズム（EZ 規約：縦積みに変わる全 BP で margin-top を明示）
#   PC   セクション間 min(vw(120),120px) ／ 見出し下 min(vw(56),56px)
#   xl   セクション間 rem(72)            ／ 見出し下 rem(40)
#   md   セクション間 rem(56)            ／ 見出し下 rem(35)
===================================================== */
/* -----------------------------------------------------
# セクションの縦間隔（4セクション共通）
#   MV の下端は凹カーブで最大 169px えぐれるので、
#   最初のセクションだけ上余白を少し詰めて視覚的な間を揃える。
----------------------------------------------------- */
.chama-intro {
  padding-top: min(min(4.5vw, 90px), 90px);
}

.chama-service,
.chama-feature,
.chama-facility {
  padding-top: min(min(6vw, 120px), 120px);
}

.chama-facility {
  padding-bottom: min(min(7vw, 140px), 140px);
}

/* -----------------------------------------------------
# 2. リード — h2「放課後等デイサービス」[06] ＋ 白角丸カード内に本文[08]
----------------------------------------------------- */
.chama-intro {
  /* ▼ 白カード
       仕様書ワイヤーの相対比：リード枠[07]は写真グリッド[35]〜[37]や注記枠[12]より
       約 11% 狭い（枠幅 80.6% : 90% 前後）。グリッド側を .inner（1470px）に置くので
       リード枠は 1470 × 0.89 ≒ 1300px に絞って中央に置く。 */
}
.chama-intro__card {
  max-width: calc(1200 * var(--to-rem));
  margin: min(min(2.8vw, 56px), 56px) auto 0;
}
.chama-intro__text {
  margin: 0;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
  text-align: justify;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------
# 3. サービス提供内容 — h2[09]／h3[10]＋表／h3[11]＋表／注記[13]
----------------------------------------------------- */
.chama-service__block {
  max-width: calc(1200 * var(--to-rem));
  margin-top: min(min(2.8vw, 56px), 56px);
  margin-inline: auto;
}
.chama-service {
  /* ▼ 表ブロック同士は見出し下より広く空ける */
}
.chama-service__block + .chama-service__block {
  margin-top: min(min(4vw, 80px), 80px);
}
.chama-service__title {
  min-width: 0;
}
.chama-service__table {
  max-width: calc(1200 * var(--to-rem));
  margin-top: min(min(1.2vw, 24px), 24px);
  margin-inline: auto;
}
.chama-service {
  /* ▼ 注記ボックス[12][13]（角丸・justify）
       地はごく薄いピンク・幅は 1200px 上限で中央寄せ（2026-08-22 CEO 指示） */
}
.chama-service__note {
  max-width: calc(1200 * var(--to-rem));
  margin-top: min(min(2.8vw, 56px), 56px);
  margin-inline: auto;
}
.chama-service {
  /* 地色は .c-card（純白）と詳細度が同じで、出力順が後の component 側が勝ってしまう。
     2クラスで受けて確実に上書きする */
}
.chama-service__note.c-card {
  background-color: #fdf0f1;
}
.chama-service__note-text {
  margin: 0;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
  text-align: justify;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------
# 4. ちゃまのサービスの4つの特徴
#   h2[16] の左右に装飾[14][15]（TOP ABOUT の円イラスト 213×214 を流用）
#   白角丸カード×4：左に番号（Barlow Bold 60px $color_main）＋h3＋本文／右に写真
----------------------------------------------------- */
.chama-feature {
  /* ▼ 見出し行（左＝キリン／右＝子供） */
}
.chama-feature__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(min(2vw, 40px), 40px);
}
.chama-feature__deco {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(64px, min(10.65vw, 213px), 213px);
  height: auto;
}
.chama-feature {
  /* ▼ 見出しは残り幅で折り返す（装飾を押し出さない） */
}
.chama-feature__heading {
  min-width: 0;
}
.chama-feature__list {
  list-style: none;
  margin: min(min(2.8vw, 56px), 56px) 0 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: min(min(2vw, 40px), 40px);
}
.chama-feature__item {
  max-width: calc(1200 * var(--to-rem));
  margin-inline: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(min(3vw, 60px), 60px);
}
.chama-feature__item {
  /* SP は縦積み。写真を上に出し、本文側に margin-top を明示する（EZ 規約） */
}
.chama-feature__body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}
.chama-feature__label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(min(1.2vw, 24px), 24px);
}
.chama-feature__num {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(32px, min(3vw, 60px), 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.chama-feature__title {
  min-width: 0;
}
.chama-feature__text {
  margin: min(min(1vw, 20px), 20px) 0 0;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
  text-align: justify;
  overflow-wrap: anywhere;
}
.chama-feature {
  /* ▼ 写真（支給素材は 300×300 の正方形） */
}
.chama-feature__photo {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(180px, min(15vw, 300px), 300px);
  line-height: 0;
}
.chama-feature__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: calc(20 * var(--to-rem));
}

/* -----------------------------------------------------
# 5. 施設紹介 — h2[33]＋リード[34]（中央寄せ・20px 基準）＋写真グリッド5枚
----------------------------------------------------- */
.chama-facility {
  /* ▼ 中央寄せのリードは justify しない（EZ 規約：中央寄せリードは据置・設計値 20px） */
}
.chama-facility__lead {
  max-width: calc(1160 * var(--to-rem));
  margin: min(min(2vw, 40px), 40px) auto 0;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.chama-facility {
  /* ▼ c-photo-grid が margin:0 を持つので複合セレクタで詳細度を上げて間隔を足す */
}
.chama-facility__grid.c-photo-grid {
  margin-top: min(min(2.8vw, 56px), 56px);
}

/* =====================================================
# milkcrown.html（仕様書シート3「3.ミルククラウン」）
#
# 構成（設計書 C-2）
#   1. MV                l-mv（common/_mv.ejs・当ファイルの管轄外）
#   2. milkcrown-intro   2事業カード（訪問介護／生活介護）
#   3. milkcrown-service サービス提供内容（c-table 1つ）
#   4. milkcrown-gallery 生活介護のご紹介（c-photo-grid 3列×2行＝6枠）
#
# 下層カンプの支給は無いため、寸法は TOP カンプの設計言語をそのまま流用する。
#   カード      = TOP の白箱（角丸 20px・純白）＝ c-card
#   見出し      = TOP のカード見出し 36px NotoSansJP SemiBold ＝ c-heading
#                 このページだけ青（c-heading--accent）。TOP カンプが
#                 「ちゃま事業＝橙／ミルククラウン事業＝青」で塗り分けているため。
#   見出し下の間隔 = 設計書 B「PC min(vw(56),56px) 以上・SP rem(35)」
#
# 🚨 余白は「単調 clamp 1本」で書き、mq(xl) と mq(md) の両方で同じプロパティを
#    上書きしない。ビルドの css-mqpacker が max-width:767 の塊を max-width:1199 より
#    前に出力するため、両方に同じプロパティを書くと SP で xl の値が勝ってしまう
#    （＝ SP 指定が効かない）。clamp 1本なら幅に関係なく意図どおりに効く。
===================================================== */
/* -----------------------------------------------------
# 2事業カード（訪問介護 ／ 生活介護）
#   ワイヤーの枠 [08][09] は左右ほぼ等幅 → 2カラム等分。
#   md（〜767）で1カラムに縦積み。縦積み時の間隔は row-gap で明示する。
----------------------------------------------------- */
.milkcrown-intro {
  padding-block: clamp(40px, min(5vw, 100px), 100px) 0;
}
.milkcrown-intro__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, min(3vw, 60px), 60px);
  /* ▼ 縦積みに変わる BP。隣接ブロックの間隔を row-gap で明示する */
}
.milkcrown-intro__item {
  min-width: 0;
}
.milkcrown-intro__text {
  margin: clamp(20px, min(2vw, 40px), 40px) 0 0;
  text-align: justify;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------
# サービス提供内容（h2 ＋ 表1つ）
#   表は c-table（白地・罫線 $color_line・th 地は薄ピンク・md で縦積み）。
#   横幅は 900px 上限で中央寄せ（2026-08-22 CEO 指示）。
----------------------------------------------------- */
.milkcrown-service {
  padding-block: clamp(50px, min(6vw, 120px), 120px) 0;
}
.milkcrown-service__table {
  max-width: calc(900 * var(--to-rem));
  margin: clamp(35px, min(2.8vw, 56px), 56px) auto 0;
}

/* -----------------------------------------------------
# 生活介護のご紹介（写真6枠）
#   🚨 写真6枚は実体が未支給。c-photo-grid__photo--empty で枠だけを組んでいる。
#      枠の大きさ・比率（3:2）・角丸は通常の写真枠と同一なので、
#      支給後は div を img に差し替えるだけでレイアウトが変わらない。
----------------------------------------------------- */
.milkcrown-gallery {
  padding-block: clamp(50px, min(6vw, 120px), 120px) clamp(60px, min(7vw, 140px), 140px);
}
.milkcrown-gallery .milkcrown-gallery__list {
  margin-top: clamp(35px, min(2.8vw, 56px), 56px);
}

/* =====================================================
# news.html（仕様書シート4「4.ちゃまだより」・プログラム CL01 新着情報）
#
# 構成（設計書 C-3）
#   1. MV        l-mv（common/_mv.ejs・当ファイルの管轄外）
#   2. news-list 記事一覧（h2 ＋ カテゴリタブ ＋ リスト ＋ ページング）
#   ページングの装飾は component/_c-paging.scss（EZ 公式の共有 html を装飾するだけ）
#
# 🚨 2026-09-07 前田様のご指示（修正#4）で、アイテムを縦積みに変更した。
#   ワイヤー「4 (2)」＝ 日付(+NEW) → タイトル(+PDF) → 説明文(html01) → 画像ギャラリー。
#   旧（仕様書シート4）は1行に日付とタイトルを横並びにする型だった。
#   ワイヤー実測（Excel 図形の実寸 px・ページ幅 1385.4 が DOC 2000 に相当＝倍率 1.4436）
#     画像1枚   311.3 × 179.6（＝縦横比 1.733・16:9 相当）
#     列間 30.7 ／ 行間 15.7 ／ ギャラリー全幅 993.4
#     ＝ 3列・1枚あたり 31.3%・列間 3.1%
#   文字は日付・タイトル・説明文とも同じ大きさ（ワイヤーは3つとも 12pt）＝設計値 16px を踏襲。
#
# 🚨 CL01（新着情報）の設置領域。動的に件数・要素が増減しても崩れないことを最優先。
#   - 件数可変：<li> の増減だけで成立。高さ固定・overflow 無しにしていない
#   - 本文コンテナは <div>（<p> で囲むと ezm_htmlarea の div が押し出されて崩壊する）
#   - overflow-wrap:anywhere ＋ min-width:0 で長いタイトル・URL でも横スクロールを出さない
#   - NEW / PDF ラベルは有っても無くてもレイアウトが動かない
#   - 写真は枚数可変。画像が1枚も無いアイテムでは <ul> 自体を出さないので余白が残らない
#     ＝ワイヤー注記「画像の挿入がない場合詰めて表示」
#   - 写真は .photo-ofi（object-fit:scale-down）で受ける
#     ＝ワイヤー注記「縦横比率の違うものは余白を入れて調整」
#   - カテゴリタブは flex-wrap なのでカテゴリが増えれば段落ちする
#
# 🚨 余白は「単調 clamp 1本」で書き、mq(xl) と mq(md) の両方で同じプロパティを
#    上書きしない。ビルドの css-mqpacker が max-width:767 の塊を max-width:1199 より
#    前に出力するため、両方に同じプロパティを書くと SP で xl の値が勝ってしまう
#    （＝ SP 指定が効かない）。clamp 1本なら幅に関係なく意図どおりに効く。
===================================================== */
.news-list {
  padding-block: clamp(40px, min(5vw, 100px), 100px) clamp(60px, min(7vw, 140px), 140px);
  /* -----------------------------------------------------
  # カテゴリタブ（ALL ／ お知らせ ／ 活動報告）
  #   2026-08-27 前田様のご指示（修正#1）でページングを設置したため、EZ 公式プログラム章
  #   「タブ切り替えとページングは併用できません／カテゴリ切り替えは <a> リンクによる
  #   ページ遷移で実装してください」に従い、JS の絞り込みから <a> のページ遷移へ変更した。
  #   遷移先は news.html / news-info.html / news-report.html。
  #   3つとも c-btn--outline（白抜き）で書き、表示中のカテゴリのタブにだけ is-active を
  #   足して橙地・白字に反転させる。タブの数は固定していない（flex-wrap で段落ちする）。
  ----------------------------------------------------- */
}
.news-list__tabs {
  list-style: none;
  margin: clamp(35px, min(2.8vw, 56px), 56px) 0 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(12px, min(1.2vw, 24px), 24px);
}
.news-list__tab {
  /* ▼ SP はタブ幅を内容なりに詰めて、3つが1行に収まるようにする
       （カテゴリが増えれば従来どおり段落ちする） */
}
.news-list__tab .c-btn.is-active {
  background-color: #f79737;
  color: #fff;
}
.news-list {
  /* -----------------------------------------------------
  # 記事リスト
  ----------------------------------------------------- */
  /* ▼ 一覧を白い角丸枠で囲む（2026-08-22 CEO 指示。クリーム地に埋もれて目立たないため）
       枠の角丸は c-table__wrap と同じ 20px。行の区切り線は枠の内側だけに出す。 */
}
.news-list__items {
  list-style: none;
  max-width: calc(1200 * var(--to-rem));
  margin: clamp(35px, min(3.5vw, 70px), 70px) auto 0;
  padding: clamp(4px, min(0.5vw, 10px), 10px) clamp(20px, min(2vw, 40px), 40px);
  border-radius: calc(20 * var(--to-rem));
  background-color: #fff;
}
.news-list__item {
  padding-block: clamp(16px, min(1.4vw, 28px), 28px);
  border-top: 0;
}
.news-list__item + .news-list__item {
  border-top: 1px solid #cccccc;
}
.news-list {
  /* ▼ 日付＋NEW。ワイヤーではアイテムの1行目 */
}
.news-list__meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, min(0.8vw, 16px), 16px);
}
.news-list__date {
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.news-list {
  /* ▼ NEW ＝ 橙の文字（ワイヤー [12][16] は囲みの無いテキスト） */
}
.news-list__new {
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.news-list {
  /* ▼ CMS が流し込む本文コンテナ。<p> ではなく <div>（EZ 公式プログラム章） */
}
.news-list__body {
  min-width: 0;
  margin-top: clamp(6px, min(0.5vw, 10px), 10px);
}
.news-list__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, min(1vw, 20px), 20px);
}
.news-list__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.news-list {
  /* ▼ PDF ＝ 橙枠の小ラベル（ワイヤー [18][22] は囲みのある小箱）・行末に置く */
}
.news-list__pdf {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  margin-left: auto;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(46px, min(2.9vw, 58px), 58px);
  height: clamp(24px, min(1.5vw, 30px), 30px);
  border: 1px solid #f79737;
  border-radius: calc(4 * var(--to-rem));
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(13px, min(0.7vw, 14px), 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
  /* hover はマウス環境だけ（EZ 規約） */
}
.news-list {
  /* -----------------------------------------------------
  # 説明文（CMS の html 入力欄 html01）
  #   EZ 公式プログラム章「テキスト出力エリア」＝<p> ではなく <div> で受け、
  #   line-height: normal を明示する。お客様の入力 HTML と干渉しないよう、
  #   この中に text-align 等の文字配置の指定は入れない。
  ----------------------------------------------------- */
}
.news-list__desc {
  margin-top: clamp(8px, min(0.7vw, 14px), 14px);
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  line-height: normal;
  overflow-wrap: anywhere;
}
.news-list {
  /* -----------------------------------------------------
  # 画像ギャラリー（ワイヤー「4 (2)」image01〜）
  #   ワイヤー実測で 3列・1枚 31.3%・列間 3.1%。枚数可変で段落ちする。
  #   画像が無いアイテムでは EJS 側で <ul> ごと出力しないため余白が残らない
  #   ＝ワイヤー注記「画像の挿入がない場合詰めて表示」。
  ----------------------------------------------------- */
}
.news-list__gallery {
  list-style: none;
  margin: clamp(12px, min(1.1vw, 22px), 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 3.1%;
     -moz-column-gap: 3.1%;
          column-gap: 3.1%;
  row-gap: clamp(10px, min(0.9vw, 18px), 18px);
  /* ▼ SP は3列だと1枚が小さくなりすぎるため2列にする（PC をそのまま縮小しない＝EZ 規約） */
}
.news-list__photo {
  min-width: 0;
}
.news-list__photo > a {
  display: block;
  /* hover はマウス環境だけ（EZ 規約）・減光は 0.6 統一 */
}
.news-list {
  /* -----------------------------------------------------
  # 写真の受け
  #   EZ 公式プログラム章「カタログ用画像」＝どの縦横比の画像を投稿されても
  #   全体が表示されるよう object-fit: scale-down の箱で受ける
  #   ＝ワイヤー注記「縦横比率の違うものは余白を入れて調整」。
  #   箱の縦横比はワイヤー実測 311.3 × 179.6 ＝ 1.733（16:9 相当）。
  ----------------------------------------------------- */
}
.news-list .photo-ofi {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(8 * var(--to-rem));
  background-color: #fcefcf;
}
.news-list .photo-ofi img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: inherit;
  max-height: inherit;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  font-family: "object-fit: scale-down;";
}

/* =====================================================
# company.html — 会社案内（仕様書シート5）
#
# 下層カンプの支給は無いので TOP の設計言語と共通部品だけで組む
#   見出し   c-heading（h2 36px 橙）／ c-heading3（h3 24px $color_txt）
#   表       c-table（白地・罫線 $color_line・th 地はクリーム）
#   ボタン   c-btn（TOP の VIEW MORE 型）
#
# 幅の一次ソース＝仕様書シート5 のワイヤー実測（列幅 2.0字≒19px・行高 12pt＝16px で換算）
#   ワイヤーの版面   col2〜col75  ＝ 1406px
#   表・年表・写真   col8〜col70  ＝ 1178px（版面の 83.8%）→ .inner 1470px 換算で 1230px
#   地図 [11][20]    col15〜col61 ＝  874 × 380px（版面の 62.2%・比 874:380）
#                    → .inner 1470px 換算で 915px
#   ボタン [13][22]  213 × 52px・中心 x=702.6 ＝ 版面中央 703 とほぼ一致（中央寄せ）
#   見出し [05][07][09][15][18] は全て 20pt。文字幅から求めた中心が版面中央 703 と
#   17〜29px 以内で一致するので中央寄せで組む
===================================================== */
/* -----------------------------------------------
# 法人概要（ちゃま[05] / ミルククラウン[15] の2箇所で共用）
-------------------------------------------------- */
.company-profile {
  padding-block: min(min(4.5vw, 90px), 90px) min(min(2.5vw, 50px), 50px);
}
.company-profile__table {
  max-width: calc(1230 * var(--to-rem));
  margin: min(min(2.8vw, 56px), 56px) auto 0;
}

/* -----------------------------------------------
# 沿革[07] — 左に年表（cells_5 H80〜S104）／右に写真[08]
-------------------------------------------------- */
.company-history {
  padding-block: min(min(2.5vw, 50px), 50px);
}
.company-history__title {
  text-align: center;
}
.company-history__body {
  max-width: calc(1230 * var(--to-rem));
  margin: min(min(2.8vw, 56px), 56px) auto 0;
  display: grid;
  grid-template-columns: 1fr min(min(20.45vw, 409px), 409px);
  gap: clamp(24px, min(2vw, 40px), 40px);
  -webkit-box-align: start;
  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
}
.company-history {
  /* 沿革の表は法人概要と同じ c-table 構造（2026-08-22 CEO 指示）。
     日付列だけは最長の「平成28年11月30日」（16px で実測 133px）が 768〜900px 帯で
     折り返さないよう、c-table 既定の下限 140px を 180px へ引き上げる */
}
.company-history__table .c-table th {
  width: clamp(180px, min(17vw, 340px), 340px);
}
.company-history__photo {
  margin: 0;
  line-height: 0;
}
.company-history__photo img {
  display: block;
  width: 100%;
  max-width: calc(409 * var(--to-rem));
  height: auto;
  margin-inline: auto;
  border-radius: calc(20 * var(--to-rem));
}

/* -----------------------------------------------
# アクセスマップ[09][18] — Google マップ埋め込み＋Googlemap ボタン[13][22]
-------------------------------------------------- */
.company-map {
  padding-block: min(min(2.5vw, 50px), 50px);
}
.company-map:last-child {
  padding-bottom: min(min(6vw, 120px), 120px);
}
.company-map__title {
  text-align: center;
}
.company-map__frame {
  position: relative;
  max-width: calc(915 * var(--to-rem));
  margin: min(min(2.8vw, 56px), 56px) auto 0;
  aspect-ratio: 874/380;
  overflow: hidden;
  border-radius: calc(20 * var(--to-rem));
}
.company-map__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.company-map__btn {
  margin-top: min(min(2vw, 40px), 40px);
  text-align: center;
}

/* =====================================================
# contact.html（仕様書シート6・MF01 メールフォーム）
#
# 構成（上から）
#   1. MV                     … common/_mv.ejs（layout/_l-mv.scss）
#   2. 電話・FAX  .contact-tel  … 白カード1枚を中央の縦罫線で2分割
#   3. メールフォーム .contact-form … MF01（word1〜word6・別紙全文のスクロールボックス）
#
# ワイヤー実測（xlsx グリッド → px 換算・キャンバス幅 1680 ＝ 全幅相当）
#   白カード[06]  x 24.8 → 1701.6 ／ y 531 → 766
#   h2[07]        x 758（カード中央 863 に対して中央寄せ）／ y 562
#   縦罫線[09]    x 857.9 → 861.0（カード中央）／ y 622 → 766
#   TEL[13] x 255.3・FAX[11] x 1089.8 → 左右それぞれの半分の中央に幅 ≒378 の箱
#     （1677 → .inner 1470 に換算すると ≒331px ＝ TOP の CONTACT ボタン 360×80 と同型）
#   送信ボタン[22] x 526 → 1198（中央寄せ）
#
# 色は変数参照のみ（ハードコード禁止）。font-size は clamp、max-width は固定 rem。
# style.scss は page → component の順で読むので、共通部品を上書きする箇所は
# セクション名でネストして詳細度を上げてある（.contact-form .contact-form__table th 等）。
===================================================== */
/* =====================================================
# 2. 電話・FAX
===================================================== */
.contact-tel {
  padding-block: min(min(6vw, 120px), 120px) 0;
}
.contact-tel {
  /* ▼ 白角丸カード1枚（c-card）。h2 もこの中に入る（ワイヤー[07] が [06] の内側） */
}
.contact-tel .contact-tel__ttl {
  margin-bottom: min(min(2.8vw, 56px), 56px);
}
.contact-tel .contact-tel__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.contact-tel .contact-tel__col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-inline: min(min(2vw, 40px), 40px);
  text-align: center;
}
.contact-tel .contact-tel__col {
  /* 中央の縦罫線[09]。md で縦積みになるので横罫線に置き換え、
     隣接ブロックの margin-top を明示する（EZ 規約） */
}
.contact-tel .contact-tel__col + .contact-tel__col {
  border-left: 1px solid #cccccc;
}
.contact-tel .contact-tel__label {
  margin: 0;
  text-align: center;
}
.contact-tel {
  /* ▼ 橙の角丸フルボタン型の「表示」。
       🚨 リンクでも操作要素でもないので PC では hover / cursor / transition を付けない。
       SP のみ tel-3.1.js が data-action="call" の span を tel リンクで包む（左側だけ）。 */
}
.contact-tel .contact-tel__pill {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(8px, min(0.7vw, 14px), 14px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: clamp(240px, min(18vw, 360px), 360px);
  max-width: 100%;
  min-height: clamp(56px, min(4vw, 80px), 80px);
  margin-top: min(min(1.4vw, 28px), 28px);
  padding-inline: clamp(16px, min(1.2vw, 24px), 24px);
  border-radius: 9999px;
  background-color: #f79737;
}
.contact-tel .contact-tel__pill-icon {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: clamp(17px, min(1.15vw, 23px), 23px);
  height: auto;
}
.contact-tel {
  /* FAX 機のアイコンは横長(31×26)。電話(23×31)と同じ幅にすると縦が19pxまで縮んで
     見た目が軽くなるため、幅基準を上げて2つのピルでアイコンの重さを揃える */
}
.contact-tel .contact-tel__pill-icon--fax {
  width: clamp(23px, min(1.55vw, 31px), 31px);
}
.contact-tel .contact-tel__pill-num {
  color: #fff;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.contact-tel .contact-tel__hours {
  margin: min(min(1vw, 20px), 20px) 0 0;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  line-height: 1.8;
}

/* =====================================================
# 3. メールフォーム（MF01）
===================================================== */
.contact-form {
  padding-block: min(min(6vw, 120px), 120px) min(min(8vw, 160px), 160px);
}
.contact-form {
  /* 本文の1行が長くなりすぎないよう、フォーム側だけ .inner より狭い固定幅で束ねる */
}
.contact-form .contact-form__lead,
.contact-form .contact-form__table-wrap,
.contact-form .contact-form__privacy-heading,
.contact-form .contact-form__privacy,
.contact-form .contact-form__agree,
.contact-form .contact-form__btns {
  max-width: calc(1120 * var(--to-rem));
  margin-inline: auto;
}
.contact-form .contact-form__ttl {
  margin: 0;
  text-align: center;
}
.contact-form {
  /* ▼ リード F55（4行を1段落として詰めて置く） */
}
.contact-form .contact-form__lead {
  margin-top: min(min(2.4vw, 48px), 48px);
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  line-height: 2;
  text-align: justify;
}
.contact-form .contact-form__lead p {
  margin: 0;
}
.contact-form {
  /* ▼ 注記 F63 */
}
.contact-form .contact-form__required {
  color: #f79737;
  font-weight: 600;
  /* 「【必」／「須】」のように角括弧の途中で折れるのを防ぐ */
  white-space: nowrap;
}
.contact-form {
  /* ---------- 表（c-table を流用） ---------- */
}
.contact-form .contact-form__table-wrap {
  margin-top: min(min(2.5vw, 50px), 50px);
}
.contact-form .contact-form__table {
  /* 本文級は下限 16px（c-table と同値。vw() は 2000 基準なので下限を上げないと
     1199px 以下で張り付いて EZ の本文可読性を割る） */
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  line-height: 1.8;
}
.contact-form .contact-form__table th,
.contact-form .contact-form__table td {
  vertical-align: middle;
  padding-block: min(min(1vw, 20px), 20px);
}
.contact-form .contact-form__table th {
  /* 下限 240px ＝ 最長ラベル「お問い合わせ内容 【必須】」が 16px で1行に収まる幅
     （768〜1023px 帯で 200px だと2行に折れて 【必須】 が分断される） */
  width: clamp(240px, min(21vw, 420px), 420px);
}
.contact-form .contact-form__label {
  display: inline-block;
  cursor: pointer;
}
.contact-form .contact-form__input {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: clamp(48px, min(3vw, 60px), 60px);
  padding: clamp(10px, min(0.7vw, 14px), 14px) clamp(12px, min(0.9vw, 18px), 18px);
  border: 1px solid #cccccc;
  border-radius: calc(8 * var(--to-rem));
  background-color: #fff;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  /* 🚨 16px 未満にすると iOS でフォーカス時に自動ズームする */
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 1.6;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.contact-form .contact-form__input::-webkit-input-placeholder {
  color: rgba(51, 51, 51, 0.45);
}
.contact-form .contact-form__input::-moz-placeholder {
  color: rgba(51, 51, 51, 0.45);
}
.contact-form .contact-form__input:-ms-input-placeholder {
  color: rgba(51, 51, 51, 0.45);
}
.contact-form .contact-form__input::-ms-input-placeholder {
  color: rgba(51, 51, 51, 0.45);
}
.contact-form .contact-form__input::placeholder {
  color: rgba(51, 51, 51, 0.45);
}
.contact-form .contact-form__input:focus {
  border-color: #f79737;
  outline: 2px solid rgba(247, 151, 55, 0.4);
  outline-offset: 1px;
}
.contact-form .contact-form__input {
  /* お問い合わせ内容（textarea）。縦だけ伸ばせるようにする */
}
.contact-form .contact-form__input--area {
  min-height: clamp(160px, min(11vw, 220px), 220px);
  resize: vertical;
}
.contact-form {
  /* ---------- 個人情報の取扱いについて（F86 ＋ 別紙全文） ---------- */
}
.contact-form .contact-form__privacy-heading {
  margin: min(min(4vw, 80px), 80px) auto 0;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  /* TOP の CONTACT カード見出し 20px の型（h3 24px との差を保つ） */
  font-size: clamp(17px, min(1vw, 20px), 20px);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
.contact-form .contact-form__privacy {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: clamp(280px, min(22vw, 440px), 440px);
  margin-top: min(min(1.4vw, 28px), 28px);
  padding: min(min(2vw, 40px), 40px);
  overflow-y: auto;
  border: 1px solid #cccccc;
  border-radius: calc(20 * var(--to-rem));
  background-color: #fff;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  line-height: 1.9;
  text-align: justify;
}
.contact-form .contact-form__privacy {
  /* 直下の子だけを同じ詳細度で並べて上マージンを積む
     （p / ul に個別の margin を書くと詳細度が上がって隣接指定が効かなくなる） */
}
.contact-form .contact-form__privacy > * {
  margin: 0;
}
.contact-form .contact-form__privacy > * + * {
  margin-top: min(min(1.2vw, 24px), 24px);
}
.contact-form .contact-form__privacy {
  /* 条見出しの前は1段ぶん広く空ける */
}
.contact-form .contact-form__privacy > * + .contact-form__privacy-ttl {
  margin-top: min(min(2.2vw, 44px), 44px);
}
.contact-form .contact-form__privacy-lead {
  font-size: clamp(17px, min(1vw, 20px), 20px);
  font-weight: 600;
  text-align: center;
}
.contact-form {
  /* 別紙の条見出し。<h4> にすると別紙の階層が本文の見出し構造に混ざるので、
     強調付きの <p> で組む（見た目だけ見出しにする） */
}
.contact-form .contact-form__privacy-ttl {
  color: #333333;
  font-weight: 600;
}
.contact-form {
  /* (1)〜(6) は仕様書の注記「出だしを揃える」に従い、折り返し行を番号の右に揃える */
}
.contact-form .contact-form__privacy-list {
  padding: 0;
  list-style: none;
}
.contact-form .contact-form__privacy-list li {
  /* 1.51em ＝ ブラウザ実測した「(1) 」の字幅（17.145px 時 25.83px）。
     折り返し行の頭が番号の右の本文と正確に揃う */
  padding-left: 1.51em;
  text-indent: -1.51em;
}
.contact-form .contact-form__privacy-list li + li {
  margin-top: 0.5em;
}
.contact-form .contact-form__privacy-link {
  color: #6eb8ea;
  text-decoration: underline;
  word-break: break-all;
}
.contact-form {
  /* ---------- 同意チェック（F101） ---------- */
}
.contact-form .contact-form__agree {
  margin-top: min(min(2vw, 40px), 40px);
  text-align: center;
}
.contact-form {
  /* <label> で文字まで囲んであるので、どこを押しても切り替わる */
}
.contact-form .contact-form__agree-label {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(8px, min(0.6vw, 12px), 12px);
  padding: calc(8 * var(--to-rem)) calc(4 * var(--to-rem));
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  /* SP は文言が2行に折り返すので、チェックは1行目の高さに合わせる */
}
.contact-form .contact-form__agree-check {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: clamp(20px, min(1.2vw, 24px), 24px);
  height: clamp(20px, min(1.2vw, 24px), 24px);
  margin: 0;
  accent-color: #f79737;
  cursor: pointer;
}
.contact-form {
  /* ---------- 送信ボタン ---------- */
}
.contact-form .contact-form__btns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, min(1.2vw, 24px), 24px);
  margin-top: min(min(2.4vw, 48px), 48px);
}
.contact-form .contact-form__btns {
  /* ▼ 2026-09-04 修正#3（前田様・EZGATE デザイナー様のご指示）
     「お問い合わせページで戻る/送信ボタンが見えないため表示お願いいたします」
     EZ 公式コーディング章「ボタン」は
     「確認画面用に送信ボタン・戻るボタンもあらかじめ記述しておく（入力画面では非表示）」
     と定めており、当初はその指定どおり display:none で隠していた。
     今回、依頼元である EZGATE 様のご指示で入力画面でも表示する。
     class="confirm-only" は HTML 側に残してあるので、
     非表示へ戻す場合はこのブロックを display:none に戻すだけでよい。 */
}
.contact-form .contact-form__btns--confirm.confirm-only {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.contact-form .contact-form__btns {
  /* 確認画面用の2つは矢印を持たないので左右の余白を揃える */
}
.contact-form .contact-form__btns--confirm .contact-form__btn {
  padding-inline: clamp(24px, min(2.5vw, 50px), 50px);
}
.contact-form .contact-form__btn {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.contact-form .contact-form__btn .c-btn__label {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 600;
  letter-spacing: 0;
}

/* FLOCSS
----------------------------------------------------- */
/* FLOCSS
----------------------------------------------------- */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

img {
  max-width: 100%;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

:root {
  --to-rem: 0.0625rem;
}

main {
  overflow: hidden; /*横スクロールの発生を防止*/
  background-size: auto auto;
}

html {
  background-color: #fcefcf;
  scroll-padding-top: clamp(64px, min(6.5vw, 130px), 130px);
}

body {
  max-width: 2000px;
  margin-inline: auto;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  line-height: 2.6667;
  letter-spacing: 0;
  color: #333333;
  background-color: #fcefcf;
}

section > picture,
section picture {
  display: block;
  line-height: 0;
}

a {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

img {
  height: auto;
}

/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# .inner — 内側コンテナ
#   カンプ guide_w1470 [265,0,1735,4775]（2000 - 265×2 = 1470）。
#   フッターの左端 264 / 右端 1736 とも一致する。
#   box-sizing:border-box なので max-width は 1470 ＋ 左右パディング分。
#   max-width は固定 rem（vw 連動は EZ 規約で禁止）＋ width:100%。
===================================================== */
.inner {
  width: 100%;
  max-width: calc(1530 * var(--to-rem));
  margin-inline: auto;
  padding-inline: calc(30 * var(--to-rem));
}

/* =====================================================
# l-header — 全ページ共通の常時オレンジ地バー（$color_key_bg）
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/chama-inspect.log）
#   ロゴ        [45,20,295,110]   240×80 のロゴ＋白 3px 外側ストローク ＝ 246×86
#   ナビ        [1071,58,1620,74] 16px NotoSansJP SemiBold 白
#                                 6項目の ink 間隔は実測 21px（全角スペース1つ分）
#                                 → flex gap 18px（左右のサイドベアリング 1.5px ずつを差し引いた値）
#   TEL ボタン  [1650,38,1890,92] 240×54・角丸フル・地 #fbefcf（PSD composite の実色）
#     アイコン  [1687,55,1702,75] 15×20 橙
#     番号      [1714,56,1853,74] 24px Barlow SemiBold 橙
#   縦位置は全て中央 65 → 帯の高さ 130px
#   左余白 45 ／ 右余白 2000-1890 = 110
#
# TOP は直下の FV 帯（[0,0,2000,1170] #ffab58）と同色なので継ぎ目が出ない。
# 下層は MV 写真の上にこのバーが乗る。通常フロー配置なので写真とは重ならない。
# 逆スクロール時は script.js が #header に .show を付けて固定する（EZ 標準）。
===================================================== */
.l-header {
  position: relative;
  z-index: 50;
  width: 100%;
  height: clamp(64px, min(6.5vw, 130px), 130px);
  background-color: #ffab58;
}
.l-header__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-inline: min(min(2.25vw, 45px), 45px) min(min(5.5vw, 110px), 110px);
}
.l-header {
  /* ▼ ロゴ（EZ 公式 2026-08-03: header 内に h1 を置かない＝div のまま） */
}
.l-header__logo {
  margin: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
}
.l-header__logo-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.l-header__logo-link img {
  display: block;
  width: clamp(150px, min(12.3vw, 246px), 246px);
  height: auto;
}
.l-header {
  /* ▼ 右側（ナビ ＋ TEL）。XL 以下は非表示にしてドロワーへ */
}
.l-header__right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(min(1.5vw, 30px), 30px);
}
.l-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(min(0.9vw, 18px), 18px);
}
.l-header__nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-header__nav-link {
  display: inline-block;
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-header__nav-link {
  /* 現在地 */
}
.l-header__nav-link.is-active {
  color: #ffe082;
}
.l-header {
  /* ▼ TEL ボタン 240×54
     PC は表示のみ（cursor / transition / hover / tel リンクを付けない＝EZ 規約）。
     SP は tel-3.1.js が data-action="call" の span を発信リンクで包む。 */
}
.l-header__tel {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  gap: min(min(0.6vw, 12px), 12px);
  width: clamp(160px, min(12vw, 240px), 240px);
  height: clamp(40px, min(2.7vw, 54px), 54px);
  border-radius: 9999px;
  background-color: #fcefcf;
}
.l-header__tel-icon {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(11px, min(0.75vw, 15px), 15px);
  height: auto;
}
.l-header__tel-num {
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #f79737;
  white-space: nowrap;
}
.l-header {
  /* ▼ ハンバーガー（XL 以下のみ表示・オレンジ地なので白線） */
}
.l-header__hamburger {
  display: none;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  width: calc(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l-header__hamburger span {
  position: absolute;
  left: 50%;
  width: calc(30 * var(--to-rem));
  height: 2px;
  background-color: #fff;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.l-header__hamburger span:nth-child(1) {
  top: calc(14 * var(--to-rem));
}
.l-header__hamburger span:nth-child(2) {
  top: calc(21 * var(--to-rem));
}
.l-header__hamburger span:nth-child(3) {
  top: calc(28 * var(--to-rem));
}
.l-header__hamburger.is-checked span:nth-child(1) {
  -webkit-transform: translate(-50%, calc(7 * var(--to-rem))) rotate(45deg);
          transform: translate(-50%, calc(7 * var(--to-rem))) rotate(45deg);
}
.l-header__hamburger.is-checked span:nth-child(2) {
  opacity: 0;
}
.l-header__hamburger.is-checked span:nth-child(3) {
  -webkit-transform: translate(-50%, calc(-7 * var(--to-rem))) rotate(-45deg);
          transform: translate(-50%, calc(-7 * var(--to-rem))) rotate(-45deg);
}

/* =====================================================
# 逆スクロール（上方向）でヘッダーを固定表示
#   script.js が #header に .show を付与する（EZ 標準）。
#   地色は通常時と同じオレンジのままなので、写真や本文に重なっても読める。
#   fixed だと付与の瞬間にヘッダー分の高さが通常フローから抜けて本文が上へずれ、
#   フォームの入力エラー時にブラウザが表示した入力欄が画面外へ押し出される
#   （2026-09-15 修正#5）。sticky は通常フローの場所を残したまま上端に留まる。
===================================================== */
.l-header.show {
  position: -webkit-sticky;
  position: sticky;
  inset: 0 0 auto 0;
  max-width: 2000px;
  margin-inline: auto;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  -webkit-animation: l-header-slide-in 0.3s ease;
          animation: l-header-slide-in 0.3s ease;
}

@-webkit-keyframes l-header-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes l-header-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* =====================================================
# l-drawer — XL 以下のドロワーメニュー
#   雛形 JS（script.js）が #js-drawer-icon / #js-drawer-content /
#   #js-drawer-close と中のリンクで .is-checked をトグルする。
#   （.is-open は使わない＝EZ 規約）
#   SP カンプは支給が無いため、ヘッダーの構成（ナビ6項目 ＋ TEL）をそのまま縦に並べる。
#   地はキーカラーのオレンジ＋白文字なので、現在地と hover は視認できる黄色
#   $color_active_light（opacity 減光で済ませない・transition は color）＝EZ 規約。
===================================================== */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 105;
  width: min(86vw, 360 * var(--to-rem));
  height: 100%;
  background-color: #ffab58;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  overflow-y: auto;
}
.l-drawer.is-checked {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.l-drawer__close {
  position: absolute;
  top: calc(14 * var(--to-rem));
  right: calc(16 * var(--to-rem));
  z-index: 2;
  width: calc(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l-drawer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(26 * var(--to-rem));
  height: 2px;
  background-color: #fff;
}
.l-drawer__close span:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.l-drawer__close span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.l-drawer__inner {
  padding: calc(84 * var(--to-rem)) calc(28 * var(--to-rem)) calc(48 * var(--to-rem));
}
.l-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-drawer__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.l-drawer__list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.l-drawer__list a {
  display: block;
  padding: calc(16 * var(--to-rem)) calc(6 * var(--to-rem));
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(16px, 2.3468057366vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-drawer__list a.is-active {
  color: #ffe082;
}
.l-drawer {
  /* ▼ TEL（ヘッダーと同じクリームの角丸フル・SP は tel-3.1.js が発信リンクにする） */
}
.l-drawer__tel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(12 * var(--to-rem));
  width: 100%;
  height: calc(54 * var(--to-rem));
  margin-top: calc(35 * var(--to-rem));
  border-radius: 9999px;
  background-color: #fcefcf;
}
.l-drawer__tel-icon {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(15 * var(--to-rem));
  height: auto;
}
.l-drawer__tel-num {
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 3.1290743155vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #f79737;
  white-space: nowrap;
}

/* =====================================================
# l-mv — 下層5ページ共通のメインビジュアル（common/_mv.ejs）
#
# 下層カンプの支給は無いため、TOP の設計言語をそのまま踏襲する
# （EZ 規約「下層は TOP の型を流用し新規の型を発明しない」）。
#   和文  48px NotoSansJP SemiBold 白 ＝ TOP MV キャッチ [1054,235,1720,366] と同値
#   英字  24px Barlow SemiBold 白     ＝ TOP セクション和文小見出しと同値
#   下端の凹カーブ ＝ TOP MV 下端／CONTACT 帯上端と同じ 169/2000 のカーブ（curve-concave）
#
# 和文が上・英字が下（仕様書ワイヤー全5シートがこの順）。
# 和文がそのページの h1（EZ 公式 2026-08-03 改定）。
# 英字は HTML 原文ママ（chama / milkcrown / News / Company / Contact）で書き、
# 表示だけ text-transform:uppercase で TOP と同じ全大文字に揃える。
#
# ヘッダーは通常フローのオレンジバーなので MV とは重ならない（押し下げの余白は不要）。
===================================================== */
.l-mv {
  width: 100%;
  height: clamp(220px, min(30vw, 600px), 600px);
  position: relative;
  overflow: hidden;
}
.l-mv::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, calc(min(8.5vw, 170px) * -1));
          transform: translate(-50%, calc(min(8.5vw, 170px) * -1));
  width: 400%;
  aspect-ratio: 8000/10644;
  border-radius: 50%;
  background-color: #fcefcf;
  pointer-events: none;
}
.l-mv__bg {
  position: absolute;
  inset: 0;
  line-height: 0;
}
.l-mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.l-mv__bg {
  /* 白文字の可読性を確保する薄い暗幕（milkcrown / contact の写真が白く飛ぶため） */
}
.l-mv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(51, 51, 51, 0.25);
}
.l-mv__body {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-bottom: min(min(4.2vw, 84px), 84px);
  text-align: center;
}
.l-mv__ja {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(26px, min(2.4vw, 48px), 48px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.l-mv__en {
  margin: min(min(0.8vw, 16px), 16px) 0 0;
  color: #fff;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =====================================================
# l-footer — カンプ実測（DOC 2000 基準・地はクリーム $color_bg）
#   フッタ上端 = CONTACT 帯の下端 4461
#   ロゴ        [266,4533,506,4613]   240×80（上へ 72 の余白）
#   ナビ        [1186,4570,1733,4583] 16px SemiBold #333333・右端が .inner 右 1735 と一致
#                                     ink 間隔 実測 21px → flex gap 18px
#   住所        ink 上端 4640         16px Regular
#   TEL/受付    ink 上端 4678         → 行ピッチ 実測 38px（= line-height 2.375）
#   コピーライト[1513,4679,1731,4691] 14px Regular・右下（住所2行目と同じ高さ）
#   ロゴ中心 4573 とナビ中心 4576 がほぼ一致 → 上段は align-items:center
===================================================== */
.l-footer {
  position: relative;
  width: 100%;
  background-color: #fcefcf;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  padding-block: min(min(3.6vw, 72px), 72px) min(min(3vw, 60px), 60px);
}
.l-footer {
  /* ▼ 上段: ロゴ ／ ナビ */
}
.l-footer__top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: min(min(2vw, 40px), 40px);
}
.l-footer__logo {
  margin: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
}
.l-footer__logo img {
  display: block;
  width: clamp(150px, min(12vw, 240px), 240px);
  height: auto;
}
.l-footer__logo a {
  display: inline-block;
  line-height: 0;
}
.l-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: min(min(0.9vw, 18px), 18px);
}
.l-footer__nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-footer__nav-link {
  display: inline-block;
  color: #333333;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-footer__nav-link.is-active {
  color: #f79737;
}
.l-footer {
  /* ▼ 下段: 住所・TEL ／ コピーライト */
}
.l-footer__bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: min(min(2vw, 40px), 40px);
  margin-top: min(min(0.8vw, 16px), 16px);
}
.l-footer__info {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.l-footer__address, .l-footer__contact {
  margin: 0;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 400;
  line-height: 2.375;
  letter-spacing: 0;
}
.l-footer__copyright {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0;
  font-size: clamp(13px, min(0.7vw, 14px), 14px);
  font-weight: 400;
  line-height: 2.7143;
  letter-spacing: 0;
}
.l-footer__copyright small {
  font-size: inherit;
}

/* =====================================================
# l-pagetop — ページトップへ戻る（#js-pagetop ＋ script.js の .is-show）
#   カンプ [1900,4660,1970,4730] ＝ 70×70 の橙丸
#   アイコン [1922,4687,1948,4702] ＝ 白い山形 26×15（素材は 28×17 の PNG）
#   2000px 幅で右 30 / 下 30。実体は <a>・単調 clamp で下限 48px を担保（EZ 標準）。
===================================================== */
.l-pagetop {
  position: fixed;
  right: max(clamp(12px, min(1.5vw, 30px), 30px), (100vw - 2000px) / 2 + 30px);
  bottom: clamp(12px, min(1.5vw, 30px), 30px);
  z-index: 90;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(48px, min(3.5vw, 70px), 70px);
  height: clamp(48px, min(3.5vw, 70px), 70px);
  border-radius: 50%;
  background-color: #f79737;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(calc(10 * var(--to-rem)));
          transform: translateY(calc(10 * var(--to-rem)));
  -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.l-pagetop img {
  display: block;
  width: clamp(18px, min(1.3vw, 26px), 26px);
  height: auto;
}
.l-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# c-sec-title — TOP のセクション見出し（英字 ＋ 和文の2段）
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/chama-inspect.log）
#   ABOUT US      英字 [867,1109,1133,1153] 60px Barlow Bold #f79737
#                 和文 [918,1175,1082,1198] 24px NotoSansJP SemiBold #333333（中央寄せ）
#   NEWS          英字 [368,2628,525,2672] 橙 ／ 和文 [367,2695,500,2717]（左寄せ）
#   OTHER SERVICE 英字 [402,3341,814,3385] 青 ／ 和文 [402,3407,598,3431]（左寄せ）
#   CONTACT       英字 [876,3970,1123,4014] 白 ／ 和文 [928,4036,1073,4059] 白（中央寄せ）
#   英字 ink 下端 → 和文 ink 上端は 4箇所とも 22〜23px で一致する
#
# 使い方（HTML）
#   <div class="c-sec-title c-sec-title--center">
#     <p class="c-sec-title__en">ABOUT US</p>
#     <h2 class="c-sec-title__ja">私たちについて</h2>
#   </div>
#   ※ 英字は装飾なので <p>、和文が h2。__en と __ja を1つの h2 にまとめると
#     見出しテキストが「ABOUT US私たちについて」になるので分けたまま使う。
#
#   修飾クラス
#     --center … 中央寄せ（ABOUT US / CONTACT）
#     --accent … 英字を青 $color_accent（OTHER SERVICE）
#     --light  … 英字・和文とも白（CONTACT のようにオレンジ帯の上に載せる時）
===================================================== */
.c-sec-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.c-sec-title__en {
  display: block;
  margin: 0;
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(32px, min(3vw, 60px), 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.c-sec-title__ja {
  display: block;
  margin: min(min(0.7vw, 14px), 14px) 0 0;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(18px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.c-sec-title {
  /* ▼ 中央寄せ */
}
.c-sec-title--center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.c-sec-title {
  /* ▼ 英字を青（OTHER SERVICE） */
}
.c-sec-title--accent .c-sec-title__en {
  color: #6eb8ea;
}
.c-sec-title {
  /* ▼ 白文字（オレンジ帯の上に載せる CONTACT） */
}
.c-sec-title--light .c-sec-title__en,
.c-sec-title--light .c-sec-title__ja {
  color: #fff;
}

/* =====================================================
# c-heading — 下層ページのセクション見出し（h2）
#
# 仕様書の下層ワイヤーに英字見出しは1つも無いので英字は足さない（EZ 規約）。
# その制約下で TOP の設計言語だけを流用する：
#   36px NotoSansJP SemiBold ＝ TOP のカード見出し
#   「放課後等デイサービス」[1159,2165,1522,2200] 36px #f79737 と同値。
# 色は TOP カンプの色文法どおり
#   ちゃま事業（放課後等デイサービス）＝ 橙 $color_main（既定）
#   ミルククラウン事業（訪問介護・生活介護）＝ 青 $color_accent（--accent）
#
# 使い方: <h2 class="c-heading">サービス提供内容</h2>
#         <h2 class="c-heading c-heading--accent">訪問介護</h2>
===================================================== */
.c-heading {
  margin: 0;
  color: #f79737;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(22px, min(1.8vw, 36px), 36px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  /* ▼ ミルククラウン事業（訪問介護・生活介護）は青 */
}
.c-heading--accent {
  color: #6eb8ea;
}
.c-heading {
  /* ▼ 左寄せにしたい時 */
}
.c-heading--left {
  text-align: left;
}

/* =====================================================
# c-heading3 — 下層ページの小見出し（h3）
#   24px NotoSansJP SemiBold $color_txt ＝ TOP の和文小見出しの型
===================================================== */
.c-heading3 {
  margin: 0;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(18px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
}

/* =====================================================
# c-btn — ボタン共通（TOP の VIEW MORE 型を汎用化）
#
# カンプ実測（DOC 2000 基準）
#   VIEW MORE      箱 [1220,2228,1460,2288] 240×60・角丸フル・地 #f79737
#                  ラベル [1285,2250,1394,2266] 20px Barlow SemiBold 白（箱の中央）
#                  矢印   [1430,2250,1440,2266] 10×16 白（箱の右端から 20px）
#   VIEW MORE(青)  箱 [395,3552,635,3612] 同寸・地 #6eb8ea
#   全ての記事を見る 箱 [369,2784,569,2844] 200×60
#                  ラベル 16px NotoSansJP Medium 白 ／ 矢印 同寸
#
# 使い方（HTML）
#   <a href="chama.html" class="c-btn c-btn--pop">
#     <span class="c-btn__label">VIEW MORE</span>
#     <img class="c-btn__arrow" src="img/common/icon-arrow.webp" alt="" width="10" height="16"
#          loading="lazy" decoding="async">
#   </a>
#
#   修飾クラス
#     --accent  … 地を青（OTHER SERVICE の VIEW MORE）
#     --ja      … 和文ラベル（「全ての記事を見る」型・200×60・NotoSansJP 16px）
#     --outline … 白抜き（橙の枠線＋橙文字。news のカテゴリタブの非アクティブ用）
#     --wide    … 中身に合わせて横幅を伸ばす（フォーム送信ボタン等）
#     --pop     … hover でボタン自体が 1.1 倍（TOP の主要ボタン専用・EZ 前田様指定）
#
# 図形は padding 組みでなく width / height を明示する（EZ・self-coding 共通則）。
# 単調 clamp（base 1本）で高さの下限 48px を担保するので、XL・SP で潰れない。
===================================================== */
.c-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: clamp(200px, min(12vw, 240px), 240px);
  height: clamp(48px, min(3vw, 60px), 60px);
  padding-inline: clamp(16px, min(1.5vw, 30px), 30px) clamp(24px, min(1.9vw, 38px), 38px);
  border: 0;
  border-radius: 9999px;
  background-color: #f79737;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease, color 0.3s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, -webkit-transform 0.4s ease;
}
.c-btn__label {
  display: inline-block;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
}
.c-btn__arrow {
  position: absolute;
  top: 50%;
  right: clamp(14px, min(1vw, 20px), 20px);
  display: block;
  width: clamp(8px, min(0.5vw, 10px), 10px);
  height: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-btn {
  /* ▼ 青（OTHER SERVICE の VIEW MORE） */
}
.c-btn--accent {
  background-color: #6eb8ea;
}
.c-btn {
  /* ▼ 和文ラベル（「全ての記事を見る」型） */
}
.c-btn--ja {
  width: clamp(180px, min(10vw, 200px), 200px);
}
.c-btn--ja .c-btn__label {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  letter-spacing: 0;
}
.c-btn {
  /* ▼ 白抜き（news のカテゴリタブ 非アクティブ）
       矢印は付けない前提なので、右側の逃げを外して左右対称の余白に戻す
       （矢印素材 icon-arrow.png は白なので白地の上では見えない） */
}
.c-btn--outline {
  padding-inline: clamp(16px, min(1.2vw, 24px), 24px);
  background-color: #fff;
  border: 2px solid #f79737;
  color: #f79737;
}
.c-btn {
  /* ▼ 中身に合わせて伸びる（フォーム送信ボタン等） */
}
.c-btn--wide {
  width: auto;
  min-width: clamp(200px, min(12vw, 240px), 240px);
  max-width: 100%;
  padding-inline: clamp(24px, min(2.5vw, 50px), 50px) clamp(34px, min(2.8vw, 56px), 56px);
  height: auto;
  min-height: clamp(48px, min(3vw, 60px), 60px);
  padding-block: 12px;
  white-space: normal;
}
.c-btn--wide .c-btn__label {
  line-height: 1.5;
  text-align: center;
}
.c-btn {
  /* ▼ TOP の主要ボタンだけ hover で 1.1 倍（EZ 前田様指定・0.4s）
       GSAP（js-popUp / js-fadeUp）が inline transform を残すため !important が必須 */
}

/* =====================================================
# c-card — 白地・角丸のカード
#   カンプ実測：NEWS の白箱 [265,2529,1735,2949] と CONTACT の白カード
#   [430,4120,970,4340] は、いずれも純白 #ffffff・角丸の実測半径 20px。
#   （角の走査：行 y=2530 で白の開始が x=278、行 y=2535 で x=271 → r ≒ 20）
#
# 使い方: <div class="c-card"> … </div>
#   修飾クラス
===================================================== */
.c-card {
  background-color: #fff;
  border-radius: calc(20 * var(--to-rem));
  padding: min(min(3vw, 60px), 60px);
}
.c-card {
  /* -----------------------------------------------------
  # --pop ／ --pop-accent（2026-08-22 CEO 指示の装飾）
  #   TOP に既にある型だけを流用する（新色・新モチーフは足さない）
  #     1. 背面にずらした業務色の面 ＝ TOP 放デイの橙面／OTHER SERVICE の青面と同じ考え方
  #     2. カードのフチをまたぐ動物 ＝ TOP NEWS 白箱のぞう・うさぎと同じ実測値
  #   色面は box-shadow で作る。擬似要素＋z-index:-1 だと、GSAP の js-popUps が
  #   transform を残して積層文脈を作るため色面が白地の上に出る事故が起きる。
  #   box-shadow なら必ず背景の背面に描かれ、横スクロールにも算入されない。
  #   ページ側から opt-in で付けるので TOP の NEWS 白箱・CONTACT 白カードには波及しない。
  ----------------------------------------------------- */
}
.c-card.c-card--pop, .c-card.c-card--pop-accent {
  position: relative;
  padding-top: clamp(36px, min(4.45vw, 89px), 89px);
  padding-bottom: clamp(60px, min(5.25vw, 105px), 105px);
  -webkit-box-shadow: clamp(10px, min(1vw, 20px), 20px) clamp(10px, min(1vw, 20px), 20px) 0 0 #f79737;
          box-shadow: clamp(10px, min(1vw, 20px), 20px) clamp(10px, min(1vw, 20px), 20px) 0 0 #f79737;
}
.c-card {
  /* ▼ ミルククラウン事業は青（ページ単位で橙／青を分けるカンプの色文法） */
}
.c-card.c-card--pop-accent {
  -webkit-box-shadow: clamp(10px, min(1vw, 20px), 20px) clamp(10px, min(1vw, 20px), 20px) 0 0 #6eb8ea;
          box-shadow: clamp(10px, min(1vw, 20px), 20px) clamp(10px, min(1vw, 20px), 20px) 0 0 #6eb8ea;
}
.c-card {
  /* ▼ フチをまたぐ動物（装飾なので alt は空。TOP NEWS と同じ実測値） */
}
.c-card__illust {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}
.c-card__illust--elephant {
  top: clamp(-43px, min(2.15vw, 43px) * -1, -24px);
  left: clamp(16px, min(1.5vw, 30px), 30px);
  width: clamp(90px, min(8.15vw, 163px), 163px);
}
.c-card__illust--rabbit {
  right: clamp(16px, min(1.5vw, 30px), 30px);
  bottom: clamp(-31px, min(1.55vw, 31px) * -1, -18px);
  width: clamp(56px, min(4.8vw, 96px), 96px);
}

/* =====================================================
# c-table — 下層ページの表（サービス提供内容・法人概要）
#   白地・罫線 $color_line・見出し列の地はクリーム $color_bg。
#   角丸はセルを切り落とせないので、外側の __wrap で overflow:hidden して丸める。
#   SP（md）では th / td を縦積みにして横スクロールを出さない。
#
# 使い方（HTML）
#   <div class="c-table__wrap">
#     <table class="c-table">
#       <tbody>
#         <tr><th>活動日</th><td>月曜日～金曜日</td></tr>
#       </tbody>
#     </table>
#   </div>
===================================================== */
.c-table__wrap {
  width: 100%;
  overflow: hidden;
  /* 外周の罫線はラッパー側が持つ。セル側の border だと角丸で四隅が切り落とされて
     線が消えるため（2026-08-22 CEO 指摘）、丸めるのと同じ要素に線を引く */
  border: 1px solid #cccccc;
  border-radius: calc(20 * var(--to-rem));
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  font-size: clamp(16px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0;
}
.c-table th,
.c-table td {
  padding: min(min(1.2vw, 24px), 24px) min(min(1.5vw, 30px), 30px);
  border: 0;
  border-bottom: 1px solid #cccccc;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.c-table th {
  width: clamp(140px, min(17vw, 340px), 340px);
  background-color: #fdf0f1;
  font-weight: 600;
}
.c-table td {
  border-left: 1px solid #cccccc;
}
.c-table tr:last-child th,
.c-table tr:last-child td {
  border-bottom: 0;
}

/* =====================================================
# c-photo-grid — 写真＋キャプションの3列グリッド
#   chama「施設紹介」5枚 ／ milkcrown「生活介護のご紹介」6枠 で使う。
#   XL（〜1199）でも3列を維持し、SP（〜767）で2列に落とす。
#   キャプションは 16px・中央寄せ。
#
# 使い方（HTML）
#   <ul class="c-photo-grid">
#     <li class="c-photo-grid__item">
#       <figure class="c-photo-grid__figure">
#         <img class="c-photo-grid__photo" src="img/chama/facility-01.webp" alt="ちゃまの外観"
#              width="720" height="480" loading="lazy" decoding="async">
#         <figcaption class="c-photo-grid__caption">外観</figcaption>
#       </figure>
#     </li>
#
#     <%# 写真が未支給の枠（milkcrown「生活介護のご紹介」6枚は実体が無い） %>
#     <li class="c-photo-grid__item">
#       <figure class="c-photo-grid__figure">
#         <div class="c-photo-grid__photo c-photo-grid__photo--empty"><span>準備中</span></div>
#         <figcaption class="c-photo-grid__caption">○○○○○○</figcaption>
#       </figure>
#     </li>
#   </ul>
===================================================== */
.c-photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(min(2.5vw, 50px), 50px) min(min(2vw, 40px), 40px);
}
.c-photo-grid__item {
  min-width: 0;
}
.c-photo-grid__figure {
  margin: 0;
}
.c-photo-grid__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: calc(20 * var(--to-rem));
}
.c-photo-grid {
  /* ▼ 写真が未支給の枠：クリーム地＋点線枠＋中央に小さく「準備中」 */
}
.c-photo-grid__photo--empty {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fcefcf;
  border: 2px dashed #cccccc;
  color: #333333;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1;
}
.c-photo-grid__caption {
  margin-top: min(min(0.8vw, 16px), 16px);
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

/* =====================================================
# paging — ページング（EZ 公式コーディング章「ページング」の弊社共有 html を装飾）
#
# 🚨 HTML は EZ 公式の共有 html をそのまま使う。クラス名（paging / paging-text /
#    current）と rel 属性は絶対に変えない。プログラム（CL01）設置時に、同じクラス名で
#    出力された HTML へ差し替わるため、独自クラスを足してそこに装飾を依存させない。
#
#    <div class="paging">
#      <span class="paging-text"><a rel="prev">&laquo; Prev</a></span>
#      <span class="paging-text"><a>1</a></span>
#      <span class="current paging-text">2</span>
#      <span class="paging-text"><a rel="next">Next &raquo;</a></span>
#    </div>
#
# 見た目はサイトのトーンに合わせる（カテゴリタブと同じ橙の白抜き → 現在地は橙地・白字）。
# ページ番号は Barlow（TOP の英数字と同じ）。
# 図形は単調 clamp（base 1本）で下限を確保し、XL・SP でも豆粒にならないようにする。
# 件数・桁数が増えても flex-wrap で段落ちするだけで崩れない（EZ 動的プログラム規約）。
===================================================== */
.paging {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(8px, min(0.6vw, 12px), 12px);
  margin-top: clamp(35px, min(2.8vw, 56px), 56px);
  /* ▼ 各コマ。current も paging-text を併せ持つので、まず共通の形をここで作る */
}
.paging span.paging-text,
.paging span.current {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: clamp(40px, min(2.4vw, 48px), 48px);
  height: clamp(40px, min(2.4vw, 48px), 48px);
  padding-inline: clamp(12px, min(0.8vw, 16px), 16px);
  border: 2px solid #f79737;
  border-radius: 9999px;
  background-color: #fff;
  color: #f79737;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.paging {
  /* ▼ リンクのコマ。href はプログラムが出力するので、装飾は span 側に持たせて
       a は当たり判定を広げる役に徹する（a が href 無しでも見た目が崩れない） */
}
.paging span.paging-text a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.paging {
  /* ▼ 現在のページ。橙地・白字に反転（カテゴリタブの is-active と同じ扱い） */
}
.paging span.current {
  background-color: #f79737;
  color: #fff;
}

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

@media (max-width: 1199px) {
  .home-daysvc {
    padding-top: calc(60 * var(--to-rem));
  }
  .home-daysvc__box {
    width: calc(100% - calc(48 * var(--to-rem)));
    padding-bottom: calc(14 * var(--to-rem));
  }
  .home-daysvc__box::before {
    left: calc(14 * var(--to-rem));
    top: calc(14 * var(--to-rem));
    width: 100%;
    height: auto;
    aspect-ratio: 1200/700;
  }
  .home-daysvc__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1200/700;
  }
  .home-daysvc__box .home-daysvc__card {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(14 * var(--to-rem));
    width: calc(340 * var(--to-rem));
    height: auto;
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem)) calc(28 * var(--to-rem));
  }
  .home-daysvc__btn {
    margin-top: calc(16 * var(--to-rem));
  }
  .home-contact__card.c-card {
    padding: calc(28 * var(--to-rem)) calc(40 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .chama-intro {
    padding-top: calc(56 * var(--to-rem));
  }
  .chama-service,
  .chama-feature,
  .chama-facility {
    padding-top: calc(72 * var(--to-rem));
  }
  .chama-facility {
    padding-bottom: calc(80 * var(--to-rem));
  }
  .chama-intro__card {
    margin-top: calc(40 * var(--to-rem));
  }
  .chama-service__block {
    margin-top: calc(40 * var(--to-rem));
  }
  .chama-service__block + .chama-service__block {
    margin-top: calc(48 * var(--to-rem));
  }
  .chama-service__note {
    margin-top: calc(40 * var(--to-rem));
  }
  .chama-feature__head {
    gap: calc(20 * var(--to-rem));
  }
  .chama-feature__list {
    margin-top: calc(40 * var(--to-rem));
    gap: calc(30 * var(--to-rem));
  }
  .chama-feature__item {
    gap: calc(32 * var(--to-rem));
  }
  .chama-facility__lead {
    margin-top: calc(30 * var(--to-rem));
  }
  .chama-facility__grid.c-photo-grid {
    margin-top: calc(40 * var(--to-rem));
  }
  .company-profile {
    padding-block: calc(56 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .company-profile__table {
    margin-top: calc(36 * var(--to-rem));
  }
  .company-history {
    padding-block: calc(32 * var(--to-rem));
  }
  .company-history__body {
    margin-top: calc(36 * var(--to-rem));
  }
  .company-map:last-child {
    padding-bottom: calc(72 * var(--to-rem));
  }
  .company-map {
    padding-block: calc(32 * var(--to-rem));
  }
  .company-map__frame {
    margin-top: calc(36 * var(--to-rem));
  }
  .contact-tel {
    padding-block: calc(72 * var(--to-rem)) 0;
  }
  .contact-tel .contact-tel__col {
    padding-inline: calc(16 * var(--to-rem));
  }
  .contact-form {
    padding-block: calc(72 * var(--to-rem)) calc(96 * var(--to-rem));
  }
  html {
    scroll-padding-top: calc(72 * var(--to-rem));
  }
  .inner {
    padding-inline: calc(24 * var(--to-rem));
  }
  .l-header {
    height: calc(72 * var(--to-rem));
  }
  .l-header__inner {
    padding-inline: calc(20 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .l-header__right {
    display: none;
  }
  .l-header__hamburger {
    display: inline-block;
  }
  .l-mv {
    height: clamp(220px, 30.0250208507vw, 360px);
  }
  .l-footer {
    padding-block: calc(48 * var(--to-rem)) calc(40 * var(--to-rem));
  }
  .l-footer__top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(30 * var(--to-rem));
  }
  .l-footer__nav-list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(14 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .l-footer__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    margin-top: calc(30 * var(--to-rem));
    gap: calc(16 * var(--to-rem));
  }
  .l-footer__copyright {
    line-height: 1.6;
  }
  .c-card {
    padding: calc(32 * var(--to-rem));
  }
  .c-photo-grid {
    gap: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
  }
}

@media (max-width: 1023px) {
  .home-about {
    padding-bottom: calc(140 * var(--to-rem));
  }
  .home-about__giraffe {
    left: calc(16 * var(--to-rem));
    top: auto;
    bottom: calc(10 * var(--to-rem));
    width: calc(120 * var(--to-rem));
  }
  .home-about__kids {
    right: calc(16 * var(--to-rem));
    top: auto;
    bottom: calc(10 * var(--to-rem));
    width: calc(120 * var(--to-rem));
  }
  .home-daysvc {
    padding-top: calc(40 * var(--to-rem));
  }
  .home-other {
    padding-top: calc(60 * var(--to-rem));
    padding-bottom: calc(80 * var(--to-rem));
  }
  .home-other__inner {
    display: block;
  }
  .home-other__body {
    width: 100%;
    margin-top: 0;
  }
  .home-other__figure {
    width: 100%;
    max-width: calc(880 * var(--to-rem));
    margin: calc(30 * var(--to-rem)) auto 0;
  }
  .home-contact__cards {
    display: block;
  }
  .home-contact__card.c-card {
    width: 100%;
    max-width: calc(540 * var(--to-rem));
    margin-inline: auto;
    padding: calc(28 * var(--to-rem)) calc(30 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .home-contact__card + .home-contact__card {
    margin-top: calc(30 * var(--to-rem));
  }
  .company-history__body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .company-history__photo {
    margin-top: calc(30 * var(--to-rem));
  }
}

@media (max-width: 767px) {
  .home-fv {
    height: auto;
    padding: calc(30 * var(--to-rem)) calc(16 * var(--to-rem)) calc(min(8.5vw, 170px) + 1.875rem);
  }
  .home-fv__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 73.0117340287vw;
    max-width: 100%;
    margin-inline: auto;
  }
  .home-fv__catch {
    position: static;
    width: auto;
    margin-top: calc(35 * var(--to-rem));
  }
  .home-fv__children {
    position: static;
    display: block;
    width: 52.1512385919vw;
    margin: calc(35 * var(--to-rem)) auto 0;
  }
  .home-about {
    padding-top: calc(40 * var(--to-rem));
    padding-bottom: calc(110 * var(--to-rem));
  }
  .home-about__lead {
    margin-top: calc(35 * var(--to-rem));
    text-align: left;
  }
  .home-about__giraffe {
    left: calc(12 * var(--to-rem));
    bottom: calc(8 * var(--to-rem));
    width: calc(92 * var(--to-rem));
  }
  .home-about__kids {
    right: calc(12 * var(--to-rem));
    bottom: calc(8 * var(--to-rem));
    width: calc(92 * var(--to-rem));
  }
  .home-daysvc__box {
    width: calc(100% - calc(32 * var(--to-rem)));
    padding-bottom: calc(10 * var(--to-rem));
  }
  .home-daysvc__box::before {
    left: calc(10 * var(--to-rem));
    top: calc(10 * var(--to-rem));
  }
  .home-daysvc__box .home-daysvc__card {
    position: static;
    width: min(100%, calc(420 * var(--to-rem)));
    margin: calc(35 * var(--to-rem)) auto 0;
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem)) calc(28 * var(--to-rem));
  }
  .home-news__illust--elephant {
    top: calc(-39 * var(--to-rem));
  }
  .home-news__illust--rabbit {
    bottom: calc(-53 * var(--to-rem));
  }
  .home-news {
    padding-block: calc(70 * var(--to-rem)) calc(70 * var(--to-rem));
  }
  .home-news__box.c-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: calc(28 * var(--to-rem)) calc(20 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .home-news__head {
    width: 100%;
  }
  .home-news__list {
    width: 100%;
    margin-top: calc(35 * var(--to-rem));
  }
  /* ▼ 2026-09-04 CEO ご指示（SP のみ）
     日付＋NEW（__meta）とタイトル（__title）を1行に並べず2行に積む。
     PC・タブレット帯は従来どおり横並びのまま（この指定は mq(md) の中だけ）。 */
  .home-news__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: calc(6 * var(--to-rem));
  }
  .home-news__meta {
    width: auto;
  }
  .home-other {
    padding-top: calc(50 * var(--to-rem));
    padding-bottom: calc(60 * var(--to-rem));
  }
  .home-other__body {
    padding-left: calc(80 * var(--to-rem));
  }
  .home-other__figure {
    margin-top: calc(35 * var(--to-rem));
  }
  .home-contact__card.c-card {
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem)) calc(28 * var(--to-rem));
  }
  .home-contact__card + .home-contact__card {
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-intro {
    padding-top: calc(40 * var(--to-rem));
  }
  .chama-service,
  .chama-feature,
  .chama-facility {
    padding-top: calc(56 * var(--to-rem));
  }
  .chama-facility {
    padding-bottom: calc(56 * var(--to-rem));
  }
  .chama-intro__card {
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-service__block {
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-service__block + .chama-service__block {
    margin-top: calc(40 * var(--to-rem));
  }
  .chama-service__table {
    margin-top: calc(16 * var(--to-rem));
  }
  .chama-service__note {
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-feature__head {
    gap: calc(10 * var(--to-rem));
  }
  .chama-feature__deco {
    width: clamp(48px, 11.7340286832vw, 90px);
  }
  .chama-feature__list {
    margin-top: calc(35 * var(--to-rem));
    gap: calc(24 * var(--to-rem));
  }
  .chama-feature__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
  }
  .chama-feature__body {
    width: 100%;
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-feature__label {
    gap: calc(12 * var(--to-rem));
  }
  .chama-feature__text {
    margin-top: calc(16 * var(--to-rem));
  }
  .chama-feature__photo {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
    width: 100%;
    max-width: calc(300 * var(--to-rem));
    margin-inline: auto;
  }
  .chama-facility__lead {
    margin-top: calc(35 * var(--to-rem));
  }
  .chama-facility__grid.c-photo-grid {
    margin-top: calc(35 * var(--to-rem));
  }
  .milkcrown-intro__list {
    grid-template-columns: 1fr;
    row-gap: calc(32 * var(--to-rem));
  }
  .news-list__tab .c-btn {
    width: auto;
    min-width: clamp(96px, 14.3415906128vw, 110px);
    padding-inline: calc(16 * var(--to-rem));
  }
  .news-list__item {
    padding-block: calc(20 * var(--to-rem));
  }
  .news-list__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .company-profile {
    padding-block: calc(40 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .company-profile__table {
    margin-top: calc(28 * var(--to-rem));
  }
  .company-history {
    padding-block: calc(24 * var(--to-rem));
  }
  .company-history__body {
    margin-top: calc(28 * var(--to-rem));
  }
  .company-history__table .c-table th {
    width: 100%;
  }
  .company-map:last-child {
    padding-bottom: calc(48 * var(--to-rem));
  }
  .company-map {
    padding-block: calc(24 * var(--to-rem));
  }
  .company-map__frame {
    margin-top: calc(28 * var(--to-rem));
    aspect-ratio: 4/3;
  }
  .company-map__btn {
    margin-top: calc(24 * var(--to-rem));
  }
  .contact-tel {
    padding-block: calc(48 * var(--to-rem)) 0;
  }
  .contact-tel .contact-tel__ttl {
    margin-bottom: calc(28 * var(--to-rem));
  }
  .contact-tel .contact-tel__cols {
    grid-template-columns: 1fr;
  }
  .contact-tel .contact-tel__col {
    padding-inline: 0;
  }
  .contact-tel .contact-tel__col + .contact-tel__col {
    margin-top: calc(32 * var(--to-rem));
    padding-top: calc(32 * var(--to-rem));
    border-left: 0;
    border-top: 1px solid #cccccc;
  }
  .contact-tel .contact-tel__pill {
    margin-top: calc(18 * var(--to-rem));
  }
  .contact-tel .contact-tel__hours {
    margin-top: calc(14 * var(--to-rem));
  }
  .contact-form {
    padding-block: calc(48 * var(--to-rem)) calc(64 * var(--to-rem));
  }
  .contact-form .contact-form__lead {
    margin-top: calc(24 * var(--to-rem));
  }
  .contact-form .contact-form__table-wrap {
    margin-top: calc(28 * var(--to-rem));
  }
  .contact-form .contact-form__table th,
  .contact-form .contact-form__table td {
    padding: calc(14 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .contact-form .contact-form__table th {
    width: 100%;
    padding-bottom: calc(8 * var(--to-rem));
  }
  .contact-form .contact-form__privacy-heading {
    margin-top: calc(40 * var(--to-rem));
  }
  .contact-form .contact-form__privacy {
    height: calc(300 * var(--to-rem));
    margin-top: calc(18 * var(--to-rem));
    padding: calc(20 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .contact-form .contact-form__agree {
    margin-top: calc(24 * var(--to-rem));
  }
  .contact-form .contact-form__agree-label {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .contact-form .contact-form__agree-check {
    margin-top: calc(3 * var(--to-rem));
  }
  .contact-form .contact-form__btns {
    margin-top: calc(28 * var(--to-rem));
  }
  .inner {
    padding-inline: calc(16 * var(--to-rem));
  }
  .l-mv {
    height: clamp(220px, 39.1134289439vw, 300px);
  }
  .l-mv__body {
    padding-bottom: calc(30 * var(--to-rem));
  }
  .l-mv__en {
    margin-top: calc(10 * var(--to-rem));
  }
  .l-footer__bottom {
    margin-top: calc(35 * var(--to-rem));
  }
  .c-sec-title__ja {
    margin-top: calc(10 * var(--to-rem));
  }
  .c-card {
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem));
  }
  .c-table th,
  .c-table td {
    display: block;
    width: 100%;
    padding: calc(14 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .c-table th {
    border-bottom: 0;
  }
  .c-table td {
    border-left: 0;
  }
  .c-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .c-photo-grid__caption {
    margin-top: calc(10 * var(--to-rem));
  }
}

@media (min-width: 768px) {
  .home-contact__btn--mail:focus, .home-contact__btn--mail:hover {
    opacity: 0.6;
  }
  .news-list__tab .c-btn.is-active:focus, .news-list__tab .c-btn.is-active:hover {
    opacity: 0.6;
    background-color: #f79737;
    color: #fff;
  }
  .news-list__pdf:hover {
    background-color: #f79737;
    color: #fff;
  }
  .news-list__photo > a {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .news-list__photo > a:hover, .news-list__photo > a:focus {
    opacity: 0.6;
  }
  .contact-form .contact-form__privacy-link:focus, .contact-form .contact-form__privacy-link:hover {
    opacity: 0.6;
  }
  .l-header__logo-link:focus, .l-header__logo-link:hover {
    opacity: 0.6;
  }
  .l-header__nav-link:focus, .l-header__nav-link:hover {
    color: #ffe082;
  }
  .l-drawer__list a:focus, .l-drawer__list a:hover {
    color: #ffe082;
  }
  .l-footer__logo a:focus, .l-footer__logo a:hover {
    opacity: 0.6;
  }
  .l-footer__nav-link:focus, .l-footer__nav-link:hover {
    color: #f79737;
  }
  .l-pagetop.is-show:focus, .l-pagetop.is-show:hover {
    opacity: 0.6;
  }
  .c-btn:focus, .c-btn:hover {
    opacity: 0.6;
  }
  .c-btn--outline:focus, .c-btn--outline:hover {
    opacity: 1;
    background-color: #f79737;
    color: #fff;
  }
  .c-btn--pop:focus, .c-btn--pop:hover {
    opacity: 1;
    -webkit-transform: scale(1.1) !important;
            transform: scale(1.1) !important;
  }
  .paging span.paging-text:hover,
  .paging span.paging-text:focus-within {
    background-color: #f79737;
    color: #fff;
  }
}