@charset "utf-8";
/* ============================================================
   ケアハート独自の追加スタイル
   ※複製元サイトから引き継いだ default/common/animate.css は一切変更せず、
     上書き分だけをこのファイルに集約する（差分を追えるようにするため）
   ============================================================ */

:root{
  --ch-sky:  #8FD3E8;   /* 軌道と同じ薄い水色 */
  --ch-blue: #0060B0;   /* 既存の青 */
  --ch-pink: #E64784;   /* 既存のピンク */
  --ch-ink:  #23404f;
  --ch-sub:  #5d7686;
  /* 2026-08-25デザインレビュー：白カードの角丸/影/枠線をトップページの
     既存パターン（.chCard/#news .newsDetail li/#chInstagram .chIgFrame/
     #service の各カード、いずれも border:1px solid rgba(120,195,220,.55)）
     に揃えるための共通トークン。/about/・/recruit/の新規カードに適用する。 */
  --ch-card-radius: 20px;
  --ch-card-border: 1px solid rgba(120,195,220,.55);
  --ch-card-shadow: 0 8px 22px rgba(20,80,110,.09);
}

/* ============================================================
   ① SPヘッダー：ハンバーガーを右上に
      （元は .headMenu が左・#contactBtn が右）
   ============================================================ */
@media screen and (max-width: 767px){
  /* 元CSSは #headSp .headMenu が position:fixed + width:100%。
     実機SPでは 100% が 395px に解決されて 5px の横スクロールが出るため 100vw に置き換える。
     （position:fixed の要素は float が無効化されるので、中身を右寄せして移動させる） */
  #headSp .headMenu{
    width: 100vw !important;
    max-width: 100vw !important;
    text-align: right !important;
    box-sizing: border-box !important;
    padding-right: 10px !important;
  }
  #headSp a.openBtn{ float: none !important; display: inline-block !important; }

  /* CONTACT ボタンはハンバーガーの反対側（左）へ */
  #contactBtn{
    right: auto !important;
    left: 10px !important;
  }
}

/* ============================================================
   ② ヒーロー直下：訪問看護／訪問介護 への2枚リンク
   ============================================================ */
#chServices{
  padding: 64px 20px 72px;
  background: #fff;
}
#chServices .chLead{
  text-align: center;
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--ch-ink);
  margin: 0 0 8px;
}
#chServices .chLead span{
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ch-sky);
  font-weight: 700;
  margin-top: 6px;
}
#chServices .chCards{
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 940px;
  margin: 40px auto 0;
}
#chServices .chCard{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 34px 34px 30px;
  background: #fff;
  border: 1px solid rgba(120,195,220,.55);
  box-shadow: 0 8px 24px rgba(20,80,110,.09);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
#chServices .chCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20,80,110,.16);
}
#chServices .chCard .chCatch{
  font-size: 14px;
  color: var(--ch-sub);
  margin: 0 0 10px;
}
#chServices .chCard .chName{
  white-space: nowrap;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 4px;
  font-weight: 700;
}
#chServices .chCard .chName strong{
  /* 「訪問看護ステーション大きな輪」を1行で見せる（旧: display:block で改行していた） */
  display: inline;
  font-size: 21px;
  letter-spacing: .02em;
  margin-top: 0;
}
#chServices .chCard .chDesc{
  font-size: 14px;
  line-height: 1.95;
  color: var(--ch-sub);
  margin: 18px 0 0;
  flex: 1 1 auto;
}
#chServices .chCard .chBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 24px;
  padding: 12px 26px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  letter-spacing: .06em;
}
#chServices .chCard .chBtn::after{ content: "→"; font-size: 15px; }

/* 訪問看護＝ピンク / 訪問介護＝青（2026-09-16 ユーザー指示でカラー反転） */
#chServices .chCard--kango{ border-color: rgba(230,71,132,.28); }
#chServices .chCard--kango .chName{ color: var(--ch-pink); }
#chServices .chCard--kango .chBtn{ background: var(--ch-pink); }
#chServices .chCard--kaigo{ border-color: rgba(0,96,176,.28); }
#chServices .chCard--kaigo .chName{ color: var(--ch-blue); }
#chServices .chCard--kaigo .chBtn{ background: var(--ch-blue); }

@media screen and (max-width: 767px){
  #chServices{ padding: 48px 16px 52px; }
  #chServices .chLead{ font-size: 19px; }
  #chServices .chCards{ flex-direction: column; gap: 22px; margin-top: 28px; }
  #chServices .chCard{ padding: 26px 24px 24px; }
  #chServices .chCard .chName strong{ font-size: 17px; }
}

/* ============================================================
   複製元サイトのピンク手描き素材を停止（差し替え対象）
   ・お知らせ＝ピンクの家 bg_news01_pc.png
   ・お問い合わせ＝ピンクの導線 line_contact02_pc.png
   いずれも他社のオリジナルイラストなので使わない。
   ============================================================ */
#news, #news .detail,
#chContact, #chContact .detail{ background-image: none !important; }

/* 付随するピンクのイラスト類 */
#news .illust01, #news .newsBg,
#chContact .illust01, #chContact .illust02,
#news .newsDetail li figure{ display: none !important; }

/* --- お知らせ：カードと同じトーンに --- */
#news{
  background: #f7fbfc !important;
  padding: 56px 20px 64px !important;
}
#news .titDesign04{
  color: var(--ch-ink) !important;
  text-align: center !important;
  text-indent: 0 !important;
}
#news .titDesign04 .asap{ color: var(--ch-sky) !important; }
#news .detail{ width: auto !important; max-width: none !important; }
#news .newsDetail{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 22px !important;
  /* 元CSSの width が 642px で3枚並ばないため明示する（298*3 + 22*2 = 938） */
  width: 940px !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
}
#news .newsDetail li{
  /* 記事1件のときは横長カード、複数件なら3列に並ぶ */
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
  float: none !important;
  background: #fff !important;
  border: 1px solid rgba(120,195,220,.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(20,80,110,.08) !important;
}
#news .newsDetail li.last{ display: none !important; }
#news .newsDetail li a{
  display: block !important;
  padding: 22px 24px !important;
  text-decoration: none !important;
}
#news .newsDetail li h3{ color: var(--ch-sky) !important; font-size: 13px !important; margin-bottom: 6px !important; }
#news .newsDetail li p{ color: var(--ch-ink) !important; font-size: 15px !important; line-height: 1.7 !important; }
/* 「もっと見る」は元CSSで position:absolute。静的に戻して中央下へ。
   🔴実機で線がボタンの前に出ていたため position:relative !important + z-index を追加
   （static のままだと z-index が効かないCSS仕様のため）。 */
#news .more{
  position: relative !important;
  z-index: 9010;
  display: block !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  margin: 32px auto 0 !important;
  top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
}

/* --- お問い合わせ：ピンク導線を外した分の余白を調整 --- */
#chContact{ background: #fff !important; }

/* ============================================================
   ④ Instagram（アカウントURL+/embed の iframe。プラグイン不要で自動更新）
   ============================================================ */
#chInstagram{
  padding: 64px 20px 76px;
  background: #f7fbfc;
}
#chInstagram .chLead{
  text-align: center;
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--ch-ink);
  margin: 0 0 34px;
}
#chInstagram .chLead span{
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ch-sky);
  font-weight: 700;
  margin-top: 6px;
}
#chInstagram .chIgFrame{
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(120,195,220,.55);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(20,80,110,.09);
  overflow: hidden;
}
#chInstagram iframe{
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}
#chInstagram .chIgLink{
  display: block;
  text-align: center;
  margin: 26px auto 0;
  font-size: 14px;
  color: var(--ch-sub);
}
@media screen and (max-width: 767px){
  #chInstagram{ padding: 48px 16px 56px; }
  #chInstagram .chLead{ font-size: 19px; }
  #chInstagram iframe{ height: 560px; }
}

/* ==== サービス欄のカードレイアウト（_gen_curve.py から焼き込み） ==== */

/* ===== ここから PC専用（768px以上）=====
   カード配置と軌道は1010px幅のPCレイアウト前提。SPに適用すると横スクロールが出る。 */
@media screen and (min-width: 768px){
/* #service は height:2080px がハードコードされているため、
   中身を伸ばすと下のセクションへはみ出す。auto に開放する。 */
#service{height:auto!important;}

/* 行間を広げたぶんコンテナを伸ばす（元は1288px固定） */
#service .service .bg01,
#service .service .bg01 > ul{ height:1472px!important; min-height:1472px!important; }

/* ===== 共通のカードスタイル（6項目 + 訪問エリア/費用/ご利用方法）===== */
#service .service .bg01 > ul li,
#service .visitArea, #service .fee, #service .howto{
  box-sizing:border-box!important;
  background:#ffffff!important;
  border:1px solid rgba(120,195,220,.55)!important;
  border-radius:20px!important;
  padding:26px 30px 28px!important;
  box-shadow:0 6px 20px rgba(20,80,110,.08)!important;
  float:none!important;
}
/* 見出しの下に水色のアクセント */
#service .service .bg01 > ul li h3.titDesign01,
#service .visitArea h3.titDesign01, #service .fee h3.titDesign01,
#service .howto h3.titDesign01{
  padding-bottom:12px!important; margin-bottom:14px!important;
  border-bottom:2px solid #8FD3E8!important; text-align:left!important;
}
/* 他社イラストの装飾(::before/::after)はカードと干渉するため一旦停止。
   ③オリジナル化でケアハート用の素材に差し替える。 */
#service .service .bg01 > ul li::before, #service .service .bg01 > ul li::after,
#service .visitArea::before, #service .visitArea::after,
#service .fee::before, #service .fee::after,
#service .howto::before, #service .howto::after{display:none!important;}

/* --- サービス6項目 --- */
#service .service .bg01 > ul li{ width:400px!important; min-height:230px!important; margin:0!important; }
#service .service .bg01 > ul li p br{display:none!important;}
#service .service .bg01 > ul li p{line-height:1.9!important;}

/* --- 訪問エリア / 費用：6項目と同じ2列グリッドに載せる --- */
#service div.bg02, #service div.bg03{height:auto!important; padding-bottom:40px!important;}
#service .serviceIn{
  display:flex!important; justify-content:center!important;
  align-items:stretch!important; gap:70px!important; height:auto!important;
}
#service .visitArea, #service .fee{ width:400px!important; margin:0!important; }
/* 訪問エリアの地図は絶対配置をやめてカード内に収める */
#service .visitArea > img{
  position:static!important; display:block!important;
  width:72%!important; height:auto!important; margin:14px auto 0!important;
}

/* --- ご利用方法：2列ぶんの幅にして左右を揃える --- */
#service .howto{
  width:870px!important; margin:0 auto!important;
  position:static!important; top:auto!important; left:auto!important; right:auto!important;
}
#service .howto h3.titDesign01, #service .howto p{width:auto!important; margin-left:0!important;}
} /* ===== PC専用ここまで ===== */

/* ==== 軌道とカード配置の静的化（JSでの後付けをやめた） ====
   以前はJSで描画していたため、リサイズやフルページ撮影で丸ごと消えていた。 */
@media screen and (min-width: 768px){
  #service{ position: relative !important; }
  /* 軌道が下へ抜けるための余白 */
  #service div.bg03{ padding-bottom: 210px !important; }
  /* 軌道レイヤ */
  #service .chRail{
    position: absolute !important;
    left: 215px !important;   /* .bg01 の左端 */
    top: 0 !important;
    width: 1010px !important;
    height: 2450px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: visible !important;
  }
  #service .chRail svg{ display: block; overflow: visible; }
  /* カードは軌道より前面に */
  #service .service .bg01 > ul li,
  #service .visitArea, #service .fee, #service .howto{ position: relative; z-index: 1; }
  #service .service .bg01 > ul li{ position: absolute !important; z-index: 1 !important; }
  /* カードの位置（元CSSの bottom/right 指定を打ち消して top/left で揃える） */
  #service .service .bg01 > ul li.service01{top:238px!important;left:70px!important;right:auto!important;bottom:auto!important;}
  #service .service .bg01 > ul li.service02{top:238px!important;left:540px!important;right:auto!important;bottom:auto!important;}
  #service .service .bg01 > ul li.service03{top:728px!important;left:70px!important;right:auto!important;bottom:auto!important;}
  #service .service .bg01 > ul li.service04{top:728px!important;left:540px!important;right:auto!important;bottom:auto!important;}
  #service .service .bg01 > ul li.service05{top:1218px!important;left:70px!important;right:auto!important;bottom:auto!important;}
  #service .service .bg01 > ul li.service06{top:1218px!important;left:540px!important;right:auto!important;bottom:auto!important;}
}
@media screen and (max-width: 767px){
  /* SPでは軌道を出さない（1010px幅前提のため横スクロールになる） */
  #service .chRail{ display: none !important; }
}

/* ==== サービス欄の 複製元サイトのピンク導線を停止 ====
   .bg01/.bg02/.bg03 の背景PNGが「ピンクの手描き導線」の実体。
   これを消さないと水色の軌道と二重に描画される（JSでやっていた処理を静的化）。 */
#service div.bg01, #service div.bg02, #service div.bg03{
  background-image: none !important;
}
/* 導線に付随する 複製元サイトのイラスト（差し替え対象） */
#service .bg01 > img, #service .bg02 > img, #service .bg03 > img,
#service .illust01, #service .illust02, #service .bg02 .illust02,
#service p.description img{ display: none !important; }

/* ============================================================
   step5：ヘッダー / ヒーロー / SNS（デザイン性の底上げ）
   ============================================================ */

/* ---- ①② ヘッダー：PC・SPともハンバーガーのみ ---- */
#gNav01{ display: none !important; }          /* PC横並びナビを廃止 */
#headSp, #contactBtn{ display: none !important; }

.chHeader{
  /* 元CSSの header{height:56px} に負けるため明示的に打ち消す */
  height: auto !important; min-height: 0 !important;
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 9800;
  background: transparent;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}
/* スクロールしたら白背景に戻す（JSで .is-stuck を付ける） */
.chHeader.is-stuck{
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 2px 14px rgba(20,80,110,.07);
}
.chHeader__inner{
  max-width: none; margin: 0; padding: 0 32px;
  height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.chHeader__brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.chHeader__logo{ width: 84px; height: 84px; display: block; flex: none; }
.chHeader__name{
  display: flex; flex-direction: column; line-height: 1.35;
  font-size: 21px; font-weight: 800; letter-spacing: .04em; color: var(--ch-ink);
}
/* タグライン「皆で繋がる大きな輪」：ユーザー提供の参考画像に合わせ、
   明朝系フォント＋左右にピンクの飾り線（くるりんカール）を添える。 */
.chHeader__tagline{
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.chHeader__tagline span{
  font-size: 12px; font-weight: 600; color: var(--ch-sub); letter-spacing: .1em;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
}
.chHeader__flourish{ width: 22px; height: 10px; flex: none; }
.chHeader__flourish--r{ transform: scaleX(-1); }
.chHeader__right{ display: flex; align-items: center; gap: 22px; }
.chHeader__tel{ display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1.3; }
.chHeader__tel strong{ font-size: 22px; font-weight: 700; color: #AE4570; letter-spacing: .02em; }
.chHeader__tel small{ font-size: 11px; color: var(--ch-sub); letter-spacing: .06em; }

/* ハンバーガー（3本線） */
.chHeader__burger{
  width: 52px; height: 52px; border-radius: 14px; background: var(--ch-sky);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; flex: none; transition: background .2s ease;
}
.chHeader__burger:hover{ background: #74c6e0; }
.chHeader__burger span{ display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

/* オーバーレイメニューは PC でも使う（元は .smOnly で PC 非表示だった） */
#gNav02.smOnly{ display: none; }
#gNav02.smOnly.active{ display: block !important; }
#gNav02{ z-index: 10000; }

/* 固定ヘッダーぶん本文を下げる */
#wrapper{ padding-top: 100px; }

@media screen and (max-width: 767px){
  .chHeader__inner{ height: 72px; padding: 0 14px; }
  .chHeader__logo{ width: 60px; height: 60px; }
  .chHeader__name{ font-size: 15px; }
  .chHeader__name small{ font-size: 10px; }
  .chHeader__tel{ display: none; }
  .chHeader__burger{ width: 44px; height: 44px; border-radius: 12px; }
  #wrapper{ padding-top: 72px; }
  /* SP実機で「合同会社ケアハート」と「皆で繋がる大きな輪」の左端がズレていた
     （タグライン側だけ先頭に装飾フローリッシュSVG+gapがあり28px右に押し出されていた）。
     左の飾りだけ非表示にして、社名とタグラインの文字の左端を揃える。 */
  .chHeader__tagline .chHeader__flourish:not(.chHeader__flourish--r){ display: none; }
  .chHeader__tagline{ margin-left: 0; }
}

/* ---- ⑥ ヒーロー：街並みイラストを全幅で敷く構成（参考モックアップ準拠） ----
   配色は参考画像から実測：背景 #F7F5EB ／ 見出し #3A3939
   イラスト hero_town.png は 2560x1368（縦横比 h/w = 0.5344）。
   width:100% で敷くと高さは 幅×0.5344 になり、中央の空（透明部分）は
   イラスト高の 47.3%〜65.1% に始まる。文字はその上に置く。
   --ch-hero-h でヒーロー高さを一箇所で切り替えられるようにしてある。 */
/* ヒーローはファーストビュー（ヘッダー84pxを除いた高さ）に収める。
   イラストは縦横比 1.87:1 と横長で、全幅のままだと 1440px 幅で高さ770px になり
   文字の居場所が無くなる。そこで object-fit:contain で「絵が丸ごと入るように縮小」する。
   ＝画面が低いほど自動で小さくなり、絵は絶対に切れない。 */
:root{ --ch-hero-h: calc(100vh - 84px); }
/* イラストは全幅で下端に置く。高さは 53.44vw（= 幅 × 縦横比0.5344）になる。
   画面が低いときは上（＝ほぼ空だけの領域）がはみ出して切れるが、
   中央60%の実測で「高さの0〜58%は空（雲のみ）／64%から下が街並み」なので
   街並みは常に見えたまま。文字はこの空の帯にぶら下げる。 */
.chHero{
  /* 元CSSの .mainImg が width:1010px / margin:0 auto のため全幅に戻す */
  width: 100% !important; max-width: none !important; margin: 0 !important;
  position: relative;
  z-index: 9200;   /* 線路(.railway-layer=9000)より前面。ヒーローには線路を映さない */
  height: max(100vh, calc(53.44vw + 108px)) !important;
  margin-top: -100px !important;
  padding-top: 100px;
  box-sizing: border-box;
  min-height: 620px; max-height: none;
  display: block;
  background: #F7F5EB;
  overflow: hidden;
  padding: 0 24px;
}
/* 見出しブロックはイラストの空の部分に収まる高さへ絶対配置する。
   （％は包含ブロックの高さ基準なので、ヒーロー高が変わっても比率を保つ） */
.chHero__inner{
  position: absolute; top: 118px; bottom: auto; left: 50%; transform: translateX(-50%);
  /* 「大きな輪」の素材を背景に敷き、テキストを輪の中央へ収める。
     輪の縦横比 h/w = 0.666。背景にすることで輪と文字が必ず一緒に拡大縮小する。 */
  width: min(54vw, 780px);
  min-height: calc(min(54vw, 780px) * 0.666);
  background: url(../img/careheart/hero_ring.png) center center no-repeat;
  background-size: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; box-sizing: border-box;
  text-align: center; z-index: 3;
}
.chHero__lead{
  display: block; margin: 0 0 18px;
  color: #6E9B57; font-size: 13px; font-weight: 700; letter-spacing: .36em;
}
.chHero__ttl{
  /* 複製元CSSの .mainImg h1 が padding-top:95px を持っているので打ち消す
     （実測で判明。これが無いとリードと見出しの間に大きな空きが出る） */
  margin: 0 0 8px; padding: 0 !important;
  width: 56%; margin-left: auto; margin-right: auto;
  font-size: 19px; line-height: 1.95; font-weight: 500;
  color: #3A3939; letter-spacing: .14em;
}
/* 見出しと本文のあいだの破線 */
.chHero__rule{
  display: none;
  border-top: 1px dashed #C5C0AE;
}
.chHero__desc{
  width: 56%; margin: 0 auto; font-size: 13px; line-height: 1.9; color: #6A6459; letter-spacing: .03em;
}
/* 街並みイラスト
   「全体が映るように」＝画面が低くても絵が切れないこと。
   width:100% で敷きつつ max-height でヒーロー高に対して頭打ちにし、
   はみ出す場合は object-fit:contain で縮小する（＝左右にクリーム地の余白が出る）。
   画面が縦に十分あるときは頭打ちに掛からず全幅のまま。
   bottom は白い波の分だけ持ち上げて、絵の下端が波に隠れないようにする。 */
.chHero__art{
  /* ジオメトリは .chHero__town へ移動（雲レイヤーと一緒に扱うため） */
  display: block; pointer-events: none;
}
/* 下端の白い波＝次セクション(#chServices は #fff)へのつなぎ */
.chHero__wave{
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px;   /* 元100px。波の白い余白が厚く、線の始点が画像から離れて見えていたため縮小 */
  display: block; z-index: 2;
}
/* スクロール誘導 */
.chHero__scroll{
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px;
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #6E9B57; font-size: 13px; letter-spacing: .12em; text-decoration: none;
}
.chHero__scroll i{
  display: block; width: 1px; height: 32px; background: #6E9B57;
  animation: chScroll 1.9s ease-in-out infinite;
}
@keyframes chScroll{
  0%{ transform: scaleY(.25); transform-origin: top; opacity: .35; }
  50%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  100%{ transform: scaleY(.25); transform-origin: bottom; opacity: .35; }
}
@media screen and (max-width: 767px){
  /* SPも同じ考え方。全幅で絵を丸ごと見せ、その上に文字ゾーンを積む */
  /* SPは全幅だと街並みが小さすぎるので1.75倍に拡大し、輪のすぐ下まで引き上げる。
     街並みの高さ = 53.44vw * 1.75 = 93.52vw。定数320pxが輪＋ヘッダーぶんの余白。 */
  .chHero{ height: calc(93.52vw + 180px) !important; margin-top: -72px !important; padding: 72px 18px 0; min-height: 0; max-height: none; }
  /* 輪+ロゴの位置：ユーザー指定の赤丸位置（画像注釈）に合わせて、街イラスト直上まで下げる */
  .chHero__inner{ top: 137px; bottom: auto; width: 88%; min-height: calc(88vw * 0.666); padding: 0; }
  .chHero__lead{ font-size: 11px; letter-spacing: .28em; margin-bottom: 12px; }
  .chHero__ttl{ width: 60%; font-size: 14px; line-height: 1.85; letter-spacing: .04em; margin-bottom: 6px; }
  .chHero__rule{ width: 200px; margin-bottom: 18px; }
  .chHero__desc{ width: 60%; font-size: 11px; line-height: 1.85; max-width: none; margin: 0 auto; letter-spacing: .01em; }
  .chHero__desc br{ display: none; }
  /* SPも全幅・全体表示（拡大して切り取らない） */
  .chHero__art{ width: 100%; left: 0; bottom: 0; height: auto; transform: none; }
  /* 「波のデザインはなしでもいい」指示によりSPでは波装飾を非表示（イラストを隠さない） */
  .chHero__wave{ display: none; }
  .chHero__scroll{ font-size: 11px; bottom: 8px; gap: 5px; }
  .chHero__scroll i{ height: 22px; }
}

/* ---- ④ SNS（SNS埋め込み用の共通構造） ---- */
.sns-sec{ position: relative; z-index: 1; width: 100%; padding: 72px 40px 76px; background: #f7fbfc; }
.sns-head{ max-width: 1180px; margin: 0 auto 34px; }
.sns-en{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.sns-en p{ margin: 0; color: var(--ch-sky); font-weight: 800; font-size: 14px; letter-spacing: .14em; }
.sns-dot{ width: 13px; height: 13px; border-radius: 50%; background: var(--ch-sky); }
.sns-ttl{ margin: 0 0 10px; font-size: 28px; font-weight: 800; color: var(--ch-ink); line-height: 1.4; }
.sns-lead{ margin: 0; font-size: 14px; color: #4a5a63; line-height: 1.9; }
.sns-grid{ max-width: 1180px; margin: 0 auto; display: flex; gap: 28px; align-items: stretch; }
.sns-card{
  flex: 1; min-width: 0; background: #fff; border-radius: 16px;
  box-shadow: 0 14px 38px rgba(20,80,110,.09);
  padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 16px;
}
.sns-bar{ display: block; height: 6px; border-radius: 99px; }
.sns-bar--ig{ background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.sns-card__head{ display: flex; align-items: center; gap: 12px; }
.sns-card__head img{ width: 44px; height: 44px; border-radius: 10px; display: block; }
.sns-card__id{ display: flex; flex-direction: column; line-height: 1.3; }
.sns-card__id strong{ font-size: 17px; font-weight: 800; color: #222; }
.sns-card__id span{ font-size: 12.5px; color: var(--ch-sub); font-weight: 600; }
.sns-feed{
  flex: 1; min-height: 300px; background: #f5fafc; border-radius: 12px;
  overflow: hidden; display: flex; align-items: stretch; justify-content: center;
}
.sns-ig-frame, .sns-fb-frame{ width: 100%; height: 430px; border: 0; display: block; background: #fff; }
.sns-btn{
  display: flex; align-items: center; justify-content: center; height: 52px;
  border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 14.5px;
  letter-spacing: .04em; transition: opacity .2s ease, transform .2s ease;
}
.sns-btn:hover{ opacity: .88; transform: translateY(-2px); }
.sns-btn--ig{ background: linear-gradient(90deg, #fa7e1e, #d62976, #962fbf); color: #fff; }
/* Facebook追加分：Instagramの横に並べる（.sns-gridは元々flexで、.sns-cardはflex:1のため
   2枚目のカードを足すだけで自動的に横並びの2カラムになる） */
.sns-bar--fb{ background: #1877F2; }
/* 🔴common.cssに`color:#013c60 !important`があり、非important指定だと負けて
   紺色の読みにくい文字になっていた（実測で確認）。!importantで上書きする。 */
.sns-btn--fb{ background: #1877F2; color: #fff !important; }
@media screen and (max-width: 767px){
  .sns-sec{ padding: 52px 20px 56px; }
  .sns-ttl{ font-size: 22px; }
  .sns-grid{ flex-direction: column; gap: 22px; }
  .sns-ig-frame, .sns-fb-frame{ height: 400px; }
}

/* ============================================================
   ⑦ ごあいさつの雲帯を差し替え
      旧 bg_greeting01_pc.png / bg_greeting01.jpg は 複製元サイトの素材で、
      画像内に「他社の著作権表示」が
      焼き込まれていた（実描画で確認）。背景ごと置き換えて除去する。
      雲＝#F2C7D4（薄いピンク）／空＝#38ADDE（素材の青のまま）＝ユーザー確定
   ============================================================ */
#greeting{
  background-color: #38ADDE !important;
  background-image: url(../img/careheart/cloud_greeting.png) !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
}
/* SPの高さの源になっている img は消さない（消すとセクションが潰れる）。
   index.html 側で透明スペーサーに差し替え済み。 */

@media screen and (max-width: 767px){
  /* SPは幅が狭く、等倍だと雲帯が薄くなりすぎるので拡大して中央を見せる */
  #greeting{
    background-size: 220% auto !important;
  }
}

/* ============================================================
   ⑧ ヘッダー：PCは横並びナビ／ハンバーガーはSPのみ
      （以前「PCもハンバーガーのみ」にしていたのを 2026-08-21 の指示で戻した）
   ============================================================ */
.chNav{ margin-left: auto; }
.chNav ul{ display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.chNav li{ margin: 0; padding: 0; }
.chNav a{
  display: block; padding: 6px 2px; white-space: nowrap;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: #3A4A52; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.chNav a:hover{ color: var(--ch-blue); border-bottom-color: var(--ch-sky); }

.chHeader__ig{ display: inline-flex; align-items: center; line-height: 0; transition: opacity .2s; }
.chHeader__ig:hover{ opacity: .75; }
.chHeader__ig img{ width: 34px; height: 34px; display: block; }
/* 2026-08-24：LINE公式アカウントへのリンクをInstagramアイコンの隣に追加 */
.chHeader__line{ display: inline-flex; align-items: center; line-height: 0; transition: opacity .2s; }
.chHeader__line:hover{ opacity: .75; }
.chHeader__line img{ width: 34px; height: 34px; display: block; }
.chHeader__cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 999px; white-space: nowrap;
  background: #F2C7D4; color: #8E3B60; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; transition: opacity .2s;
}
.chHeader__cta:hover{ background: #E9B2C4; }

/* 🔴2026-08-25：実測でCTA/LINEアイコンが1650px未満の幅で画面外に出る不具合を検出
   （ナビ+電話番号2件+Instagram+LINE+お問い合わせボタンの合計幅が1650px以上必要）。
   1366px・1440pxなど一般的なノートPC/デスクトップ幅を含めて収まらないため、
   ハンバーガー切替の閾値を1080pxから1680px（実測1650px+安全マージン30px）へ引き上げる。 */
@media screen and (min-width: 1681px){
  .chHeader__burger{ display: none !important; }
}
@media screen and (max-width: 1680px){
  .chNav{ display: none !important; }
  .chHeader__cta{ display: none !important; }
}
@media screen and (max-width: 767px){
  .chHeader__right{ gap: 10px; }
}
/* SPオーバーレイ内のメニューは6項目とも表示する */
#gNav02 .menu li a{ white-space: normal; }

/* ============================================================
   ⑨ FV中央のロゴ（既存サイト www.ookinawa.jp と同じ扱い）
   ============================================================ */
.chHero__logo{
  display: block; margin: 0 auto 6px;
  width: 26%; max-width: 240px; height: auto;
}
@media screen and (max-width: 767px){
  .chHero__logo{ width: 30%; max-width: 130px; margin-bottom: 4px; }
}

/* ゆいレール軌道は固定1010px幅のため、1080px以下では横スクロールの原因になる。隠す。 */
@media screen and (max-width: 1080px){
  #service .chRail{ display: none !important; }
}

/* ============================================================
   ⑩ FVの輪の中はロゴだけにする（2026-08-21 指示）
      h1 はSEO・読み上げのためDOMには残し、視覚的にのみ隠す。
      説明文はFVからは出さない（本文は下のセクションにある）。
   ============================================================ */
.chHero__inner .chHero__ttl{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden !important; white-space: nowrap !important;
}
.chHero__inner .chHero__desc{ display: none !important; }
.chHero__logo{ width: 34% !important; max-width: 300px !important; margin: 0 auto !important; }
@media screen and (max-width: 767px){
  .chHero__logo{ width: 38% !important; max-width: 165px !important; }
}

/* ============================================================
   ⑪ FVアニメーション（イラスト実体を動かす）
      ※SVGで足した偽の雲・鳥はユーザー指示により撤去。
        イラストのパーツごとの動きは、AIファイルをPDF互換で保存し直して
        もらってから、要素を分解して実装する。
      現状は「絵そのもの」の動きだけを入れている。
   ============================================================ */
/* 横や拡大で動かすと端が切れる（実測で確認）。
   上下の揺れなら、下は白い波が覆い、上は透明な空なので切れが出ない。 */
@keyframes chTownSway{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-9px); }
}
.chHero__art{ z-index: 2; animation: chTownSway 26s ease-in-out infinite; }
.chHero__wave  { z-index: 4; }
.chHero__inner { z-index: 5; }
.chHero__scroll{ z-index: 6; }

@keyframes chRingFloat{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(-12px); }
}
.chHero__inner{ animation: chRingFloat 9s ease-in-out infinite; }

@keyframes chLogoBreath{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.035); } }
.chHero__logo{ animation: chLogoBreath 6.5s ease-in-out infinite; }

@media screen and (max-width: 767px){
  @keyframes chRingFloat{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%    { transform: translateX(-50%) translateY(-7px); }
  }
}
@media (prefers-reduced-motion: reduce){
  .chHero__art, .chHero__inner, .chHero__logo{ animation: none !important; }
}


/* ============================================================
   12. 街並みの雲を実際に流す
       hero_town.png の空は完全な透明なので、雲は「孤立した島」として
       連結成分で正確に切り出せた（_qa/_extract_clouds.py）。
       hero_town_base.png = 雲を抜いた本体。雲は別レイヤーで横に流す。
       位置と大きさは元画像の実測値(%)をそのまま使っている。
   ============================================================ */
.chHero__town{
  position: absolute; left: 0; bottom: 0; width: 100%;
  z-index: 2; pointer-events: none;
  animation: chTownSway 26s ease-in-out infinite;
}
.chHero__town .chHero__art{
  position: static; display: block; width: 100%; height: auto;
  animation: none;
}
.ch-cl{
  position: absolute; left: 0; display: block;
  animation-name: chCloudDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.ch-cl img{ display: block; width: 100%; height: auto; }
@keyframes chCloudDrift{
  from{ transform: translateX(-22vw); }
  to  { transform: translateX(122vw); }
}

@media (prefers-reduced-motion: reduce){
  .ch-cl, .chHero__town{ animation: none !important; }
}

/* 太陽：イラストから切り出した実物。ゆっくり脈打ち、光がまわる */
.ch-sun img{ display: block; width: 100%; height: auto; animation: chSunSpin 60s linear infinite; }
@keyframes chSunPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }
@keyframes chSunSpin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ch-sun, .ch-sun img{ animation: none !important; } }

/* 車：街並みから切り出した実物。走らせて、端でそっと消えて戻る */
.ch-v{ position:absolute; display:block; will-change:transform,opacity;
       animation-name: chDrive; animation-timing-function: linear; animation-iteration-count: infinite; }
.ch-v img{ display:block; width:100%; height:auto; }
@keyframes chDrive{
  0%   { transform: translateX(0);                 opacity: 0; }
  8%   {                                            opacity: 1; }
  88%  {                                            opacity: 1; }
  100% { transform: translateX(var(--ch-run, 18vw)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .ch-v{ animation: none !important; opacity: 1 !important; } }

@media screen and (max-width: 767px){
  /* 🔴🔴「完全に見切れないようにしろ」の指示。120%でもまだ左右39pxずつ切れていたため、
     拡大自体をやめてwidth:100%（親.chHeroの実幅ぴったり）にする。
     これでhero(overflow:hidden)の切り取り線と絵の外周が完全に一致し、
     車・雲を含めて絵のどの部分も画面外に出ない。 */
  .chHero__town{ width: 100%; left: 0; }
}

/* ============================================================
   13. ローディング（トップページのみ）
       ロゴが回転。JSが失敗しても必ず消えるようCSS側にも保険を入れてある。
   ============================================================ */
#chLoader{
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #F7F5EB;
  animation: chLoaderOut .6s ease .9s forwards;   /* JSが無くても消える保険 */
}
#chLoader{ perspective: 900px; }
#chLoader img{
  width: 140px; height: auto; display: block;
  transform-style: preserve-3d; backface-visibility: visible;
  animation: chLoaderSpin 1.5s linear infinite;
}
#chLoader.is-done{ animation: chLoaderOut .5s ease forwards; }
/* 横回り＝縦軸(Y軸)まわりの回転。コインが回るような見え方。 */
@keyframes chLoaderSpin{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
@keyframes chLoaderOut{ to{ opacity: 0; visibility: hidden; pointer-events: none; } }
@media screen and (max-width: 767px){ #chLoader img{ width: 96px; } }
@media (prefers-reduced-motion: reduce){
  #chLoader img{ animation: none; }
}

/* ============================================================
   14. サービスカードに写真を敷く
       文字が読めるように白いベールを重ねる。ホバーで少し写真が出る。
   ============================================================ */
#chServices .chCard{
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* 看板に「訪問看護ステーションおおきな輪」と写っている写真を看護側へ（ユーザー指示で入替） */
#chServices .chCard--kango{ background-image: url(../img/careheart/photo/card_kaigo.jpg); }
#chServices .chCard--kaigo{ background-image: url(../img/careheart/recruit/recruit_team_illustration.png); }
#chServices .chCard::before{
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.88);
  transition: background .3s ease;
}
#chServices .chCard:hover::before{ background: rgba(255,255,255,.78); }
#chServices .chCard > *{ position: relative; z-index: 1; }

/* PSDから切り出したパーツの位置（元画像の実測値%）*/
  .ch-cl--1{ top:18.275%; width:4.141%; animation-duration:92s; animation-delay:-8s; }
  .ch-cl--2{ top:0.0%; width:4.375%; animation-duration:128s; animation-delay:-60s; }
  .ch-cl--3{ top:49.635%; width:5.234%; animation-duration:74s; animation-delay:-35s; }
  .ch-cl--4{ top:26.974%; width:5.703%; animation-duration:150s; animation-delay:-95s; }
  .ch-cl--5{ top:62.061%; width:5.938%; animation-duration:110s; animation-delay:-20s; }
  .ch-cl--6{ top:44.956%; width:3.086%; animation-duration:166s; animation-delay:-120s; }
  .ch-cl--7{ top:46.93%; width:5.469%; animation-duration:86s; animation-delay:-48s; }
  .ch-cl--8{ top:42.105%; width:6.641%; animation-duration:138s; animation-delay:-80s; }
  .ch-cl--9{ top:55.848%; width:4.609%; animation-duration:102s; animation-delay:-140s; }
  .ch-v--1{ top:65.863%; left:93.242%; width:4.141%; animation-duration:24s; animation-delay:-3s; --ch-run:16vw; }
  .ch-v--2{ top:80.994%; left:5.0%; width:3.555%; animation-duration:17s; animation-delay:-9s; --ch-run:-16vw; }
  .ch-v--3{ top:80.556%; left:26.484%; width:3.438%; animation-duration:29s; animation-delay:-16s; --ch-run:16vw; }
  .ch-v--4{ top:80.556%; left:20.078%; width:3.555%; animation-duration:20s; animation-delay:-6s; --ch-run:-16vw; }
  .ch-v--5{ top:89.181%; left:41.914%; width:6.172%; animation-duration:26s; animation-delay:-12s; --ch-run:16vw; }
  .ch-v--6{ top:92.982%; left:77.93%; width:5.234%; animation-duration:15s; animation-delay:-20s; --ch-run:-16vw; }
.ch-sun{ position:absolute; display:block; left:76.25%; top:31.652%; width:4.766%; transform-origin:50% 50%; animation: chSunPulse 5.5s ease-in-out infinite; }

/* ============================================================
   15. セクション見出しのテキストボックス
       Downloads\2593663.psd のデザインをCSSで再現。
       ・濃いグレーの輪郭を右上へ、色ベタ＋斜めストライプを左下へずらす二重構造
       ・色は --ch-box で差し替え（PSDの5色：黄緑/ターコイズ/サーモン/紫/グレー）
   ============================================================ */
.chBox{
  position: relative;
  display: inline-block;
  padding: 16px 44px;
  border: 2px solid #4C4C4C;
  background: transparent;
  text-align: center;
  line-height: 1.35;
  /* ::before を z-index:-1 で敷くので、ここで stacking context を作る。
     これが無いと ::before がセクションの白背景の裏へ回って色ベタが消える（実際に消えた）。 */
  z-index: 0;
  isolation: isolate;
}
.chBox::before{
  content: "";
  position: absolute; left: -9px; top: 9px;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.55) 0 6px,
      rgba(255,255,255,0)   6px 15px),
    var(--ch-box, #7ED0CB);
  /* z-index:-1 にしないとストライプが見出し文字の上に乗ってしまう（実際に文字が消えた）。
     .chBox 自身が stacking context を作るので、-1 でもセクション背景より後ろには行かない。 */
  z-index: -1;
}
/* 見出し本体の文字（元CSSがidセレクタで色を指定しているので !important で勝たせる） */
.chBoxWrap .chBox{
  font-size: 24px !important; font-weight: 700 !important;
  color: #2E2E2E !important; letter-spacing: .06em !important;
  text-indent: 0 !important; margin: 0 !important;
}
.chBoxWrap .chBox span, .chBoxWrap .chBox .asap{
  display: block !important; margin-top: 4px !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .22em !important; color: #4C4C4C !important;
}
/* 見出しは中央に置く（元CSSが text-indent などを持つので打ち消す） */
.chBoxWrap{ text-align: center !important; text-indent: 0 !important; }

/* PSDの5色 */
.chBox--green { --ch-box: #C3DC5B; }
.chBox--teal  { --ch-box: #7ED0CB; }
.chBox--salmon{ --ch-box: #F79180; }
.chBox--purple{ --ch-box: #C89BD1; }
.chBox--gray  { --ch-box: #D5D5D5; }

@media screen and (max-width: 767px){
  .chBox{ padding: 13px 22px; font-size: 17px; }
  .chBox span, .chBox .asap{ font-size: 10px; }
  .chBox::before{ left: -6px; top: 6px; }
}

/* ============================================================
   15b. 見出しボックスのポップ版（3案）
        15の角型は「固い」とのことで、PSD右列の角丸・吹き出しを軸に作り直す。
   ============================================================ */
.chBox--a{ border-radius: 16px; border-width: 3px; padding: 18px 52px; }
.chBox--a::before{ border-radius: 16px; }
.chBox--a::after{
  content: ""; position: absolute; left: 14px; bottom: -16px;
  width: 0; height: 0;
  border-left: 16px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid #4C4C4C;
  z-index: -1;
}
.chBox--b{ border-radius: 999px; border-width: 3px; padding: 20px 60px; }
.chBox--b::before{ border-radius: 999px; }
.chBox--c{
  border-radius: 999px; border-width: 3px; padding: 20px 62px;
  transform: rotate(-1.6deg);
}
.chBox--c::before{ border-radius: 999px; }
.chBox--c::after{
  content: ""; position: absolute; right: -14px; top: -14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ch-box, #7ED0CB);
  border: 3px solid #4C4C4C;
}

/* ============================================================
   15c. 見出しボックス＝C案で確定。さらにポップに振る。
        ・ピル型＋太い輪郭＋わずかな傾き＋右上の丸ポチ（C案）
        ・色を明るく、ストライプを太く、影を足して立体感を出す
        ・傾きはセクションごとに左右交互にして機械的に見せない
   ============================================================ */
.chBoxWrap .chBox{
  border-radius: 999px !important;
  border-width: 3px !important;
  border-color: #46403C !important;
  padding: 20px 62px !important;
  transform: rotate(-1.6deg);
  filter: drop-shadow(0 6px 0 rgba(70,64,60,.10));
}
.chBoxWrap .chBox::before{
  border-radius: 999px;
  left: -10px; top: 10px;
  /* ストライプを太くしてポップに */
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.62) 0 9px,
      rgba(255,255,255,0)   9px 20px),
    var(--ch-box, #7ED0CB);
}
.chBoxWrap .chBox::after{
  content: ""; position: absolute; right: -16px; top: -16px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ch-box, #7ED0CB);
  border: 3px solid #46403C;
}
/* 文字も少し大きく・丸みのある字面に */
.chBoxWrap .chBox{
  font-size: 26px !important;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif !important;
}
.chBoxWrap .chBox span, .chBoxWrap .chBox .asap{
  font-size: 12px !important; color: #5B534E !important;
}
/* 傾きを交互にする */
#news .chBox, #chContact .chBox{ transform: rotate(1.4deg); }

/* 色を明るく（PSDの5色をベースに彩度を上げた） */
.chBox--green { --ch-box: #CBE85F; }
.chBox--teal  { --ch-box: #72D8D2; }
.chBox--salmon{ --ch-box: #FF9C89; }
.chBox--purple{ --ch-box: #D5A2E0; }
.chBox--gray  { --ch-box: #DEDEDE; }

@media screen and (max-width: 767px){
  .chBoxWrap .chBox{ padding: 14px 30px !important; font-size: 18px !important; }
  .chBoxWrap .chBox::before{ left: -7px; top: 7px; }
  .chBoxWrap .chBox::after{ width: 20px; height: 20px; right: -10px; top: -10px; }
  .chBoxWrap .chBox span, .chBoxWrap .chBox .asap{ font-size: 10px !important; }
}

/* ============================================================
   15d. 黒枠は不要（ユーザー指示）。
        輪郭線をやめ、色ベタ＋ストライプのピルそのものを見出しにする。
        ずらし表現は輪郭ありきだったので廃止し、代わりに柔らかい影で立体感を出す。
   ============================================================ */
.chBoxWrap .chBox{
  border: 0 !important;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.60) 0 9px,
      rgba(255,255,255,0)   9px 20px),
    var(--ch-box, #72D8D2) !important;
  box-shadow: 0 8px 18px rgba(70,64,60,.13);
  filter: none;
  color: #33403F !important;
}
.chBoxWrap .chBox::before{ display: none !important; }
.chBoxWrap .chBox::after{
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(70,64,60,.14);
}
.chBoxWrap .chBox span, .chBoxWrap .chBox .asap{ color: #4A5757 !important; }

/* 元CSSがidセレクタで色を指定しているセクション（#news / #about / #chContact）は
   クラスだけの指定では勝てないので、id付きで上書きする。実測で色が効いていなかった。 */
#chServices .chBoxWrap .chBox,
#news .chBoxWrap .chBox,
#chInstagram .chBoxWrap .chBox,
#about .chBoxWrap .chBox,
#chContact .chBoxWrap .chBox{ color: #33403F !important; }
#chServices .chBoxWrap .chBox span,
#news .chBoxWrap .chBox span, #news .chBoxWrap .chBox .asap,
#chInstagram .chBoxWrap .chBox span,
#about .chBoxWrap .chBox span, #about .chBoxWrap .chBox .asap,
#chContact .chBoxWrap .chBox span, #chContact .chBoxWrap .chBox .asap{
  color: #4A5757 !important;
  font-style: normal !important;
}

/* ============================================================
   15e. 見出しの仕上げ
        ・元CSS(#about .titDesign02 等)が display:block を持っていて
          見出しが全幅に伸び、SPで横スクロールが出ていた（実測392px/390px）→ inline-block を強制
        ・文字は白＋縁取りにしてポップに（ユーザー指示）
   ============================================================ */
#chServices .chBoxWrap .chBox,
#news .chBoxWrap .chBox,
#chInstagram .chBoxWrap .chBox,
#about .chBoxWrap .chBox,
#chContact .chBoxWrap .chBox{
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 34px) !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: 5px var(--ch-ink, #2E8A85);
  paint-order: stroke fill;
}
#chServices .chBoxWrap .chBox span,
#news .chBoxWrap .chBox span, #news .chBoxWrap .chBox .asap,
#chInstagram .chBoxWrap .chBox span,
#about .chBoxWrap .chBox span, #about .chBoxWrap .chBox .asap,
#chContact .chBoxWrap .chBox span, #chContact .chBoxWrap .chBox .asap{
  color: #FFFFFF !important;
  -webkit-text-stroke: 3px var(--ch-ink, #2E8A85);
  paint-order: stroke fill;
}
/* 色ごとの縁取り色（同系の濃いトーン） */
.chBox--green { --ch-box: #CBE85F; --ch-ink: #7A9622; }
.chBox--teal  { --ch-box: #72D8D2; --ch-ink: #2E8A85; }
.chBox--salmon{ --ch-box: #FF9C89; --ch-ink: #C4553F; }
.chBox--purple{ --ch-box: #D5A2E0; --ch-ink: #7E4A8E; }
.chBox--gray  { --ch-box: #DEDEDE; --ch-ink: #6E6E6E; }

@media screen and (max-width: 767px){
  #chServices .chBoxWrap .chBox, #news .chBoxWrap .chBox, #chInstagram .chBoxWrap .chBox,
  #about .chBoxWrap .chBox, #chContact .chBoxWrap .chBox{
    max-width: calc(100% - 28px) !important;
    -webkit-text-stroke-width: 4px;
  }
  #chServices .chBoxWrap .chBox span, #news .chBoxWrap .chBox span, #news .chBoxWrap .chBox .asap,
  #chInstagram .chBoxWrap .chBox span, #about .chBoxWrap .chBox span, #about .chBoxWrap .chBox .asap,
  #chContact .chBoxWrap .chBox span, #chContact .chBoxWrap .chBox .asap{ -webkit-text-stroke-width: 2.5px; }
  .chBoxWrap .chBox::after{ width: 18px !important; height: 18px !important; right: -8px !important; top: -8px !important; }
}

/* ============================================================
   16. ごあいさつの空：青が雲より上まで塗られる問題を解消
       原因＝#greeting に background-color:#38ADDE を敷いていたため、
       雲画像の透明部分（＝雲より上）にも青が出て、上端が直線になり
       ピンクだけがリボン状に浮いて見えていた（実画面で確認）。
       対策＝背景色をやめ、青は「雲の最深部より下」に置くレイヤーにする。
       雲帯の厚み 230px / 画像幅 2560px = 8.98% なので 8.98vw が境界。
   ============================================================ */
#greeting{
  background-color: transparent !important;
  background-image:
    url(../img/careheart/cloud_greeting.png),
    linear-gradient(#38ADDE, #38ADDE) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, left 8.98vw !important;
  background-size: 100% auto, 100% calc(100% - 8.98vw) !important;
}
@media screen and (max-width: 767px){
  /* SPは背景を220%に拡大しているので境界も同じ倍率にする */
  #greeting{
    background-size: 220% auto, 100% calc(100% - 19.76vw) !important;
    background-position: center top, left 19.76vw !important;
  }
}

/* ============================================================
   16b. ごあいさつ本文の白文字がWCAG AA未達（背景#38ADDEに対し2.56:1、
        基準4.5:1）だった問題を解消。白のまま明るくする方向は不可能
        （白が最大輝度のため）なので文字色を濃紺へ変更。
        #0B3149 は #38ADDE に対し 5.29:1 で AA を余裕を持ってクリア
        （計算式＝WCAG相対輝度式、bold 14pxは「大きな文字」の緩和基準
        [14pt/18.66px bold]に届かないため通常テキスト基準4.5:1を適用）。
   ============================================================ */
#greeting .inner > p.text01{
  color: #0B3149 !important;
}
/* 見出し「ごあいさつ／Greeting」も同じ白文字×#38ADDEで基準割れ
   （28px boldは大きな文字扱いでも2.56:1、基準3:1未達）だったため同色で統一 */
#greeting h2, #greeting h2 .asap{
  color: #0B3149 !important;
}

/* 2026-08-24：SPでピンクの曲線が見出し・本文に重なって読みにくいとの指摘のため、
   RECRUITと同じ手法（背後に白系の箱を敷く）で見出し(h2)と本文(text01)をまとめて保護する。 */
@media screen and (max-width: 767px){
  .greetingTextbox{
    background: rgba(255,255,255,.85);
    border-radius: 22px;
    padding: 24px 20px;
    box-shadow: 0 8px 22px rgba(11,49,73,.14);
  }
  .greetingTextbox h2{ margin: 0 0 16px; }
}

/* ============================================================
   17. 複製元サイトの手描き素材（ピンクの曲線・イラスト類）を全面停止
       ユーザー指示「残骸の曲線がのこってるから全部削除」。
       他社のオリジナルイラストなので、装飾として残っているものを一括で止める。
   ============================================================ */
/* ピンクの手描き導線（line_*）と、それを敷いている背景 */
#service, #service .detail, #service .area,
#chContact, #chContact .detail,
#about, #about .detail,
#greeting, #greeting .detail{ background-image: none; }
#greeting{ /* 雲だけは残す（16.で指定済み） */ }

/* 曲線・イラストを持つ疑似要素と装飾imgを止める */
#service h2::before, #service h2::after,
#service .detail::before, #service .detail::after,
#chContact .detail::before, #chContact .detail::after,
#about .detail::before, #about .detail::after,
#greeting h2::before, #greeting h2::after,
#greeting .inner::before, #greeting .inner::after,
.bg01 > ul li::before, .bg01 > ul li::after{ display: none !important; content: none !important; }

/* 装飾用の img（複製元サイトのイラスト）を非表示 */
#service img[src*="/img/top/"],
#chContact img[src*="/img/top/"],
#about img[src*="/img/top/"],
#news img[src*="/img/top/"],
#greeting img[src*="/img/top/"]{ display: none !important; }
/* ただし「もっと見る」ボタンは差し替え済みの文字ボタンにするので後述 */

/* 背景に line_/bg_ を敷いているブロックを全部クリア */
#service .bg01, #service .bg02, #service .bg03,
#chContact .bg01, #chContact .bg02,
#about .bg01, #about .bg02, #about .bg03{
  background-image: none !important;
}

/* ============================================================
   18. 複製元サイトの背景画像を機械的に全停止
       common.css 内で ../img/top/ を参照している全ルールを抽出して無効化。
       （common.css 自体は複製原本なので触らず、上書きで消す）
   ============================================================ */
#about,
#about .inner,
#about .overview,
#about .overview .time p:last-child:after,
#about .overview .time:before, #about .overview .time:after,
#about .overview:after,
#about .overview:before,
#about:after,
#about:before,
#chContact,
#chContact .spContact,
#chContact:after,
#chContact:before,
#greeting,
#greeting .inner > p.greetingText,
#greeting .inner > p.text01:before,
#greeting h2:after,
#greeting h2:before,
#news,
#news .news ul.newsDetail li a figure:before,
#news .newsDetail,
#service .fee,
#service .fee:after,
#service .fee:before,
#service .service .bg01 > ul li.service02:after,
#service .service .bg01 > ul li.service03:before,
#service .service .bg01 > ul li.service04:before,
#service .service .serviceIn,
#service .serviceDetail,
#service .serviceDetail:after,
#service .serviceDetail:before,
#service .visitArea,
#service .visitArea:after,
#service .visitArea:before,
#service div.bg01,
#service div.bg02,
#service div.bg03,
#service p.description,
.info,
input#submit{ background-image: none !important; }

/* 「もっと見る」を画像ボタンから文字ボタンへ */
.chMore{
  display: inline-block !important;
  padding: 12px 34px; border-radius: 999px;
  background: var(--ch-sky, #8FD3E8); color: #1E4A55;
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; box-shadow: 0 6px 14px rgba(20,80,110,.14);
}
.chMore::after{ content: " →"; }
.chMore:hover{ opacity: .85; }

/* PC用メディアクエリ内に残っていたぶんを含め、対象セクション配下の背景画像を根こそぎ止める。
   見出しボックス(.chBox)だけは自前のストライプなので除外する。 */
#about, #about *:not(.chBox),
#service, #service *:not(.chBox),
#chContact, #chContact *:not(.chBox),
#news *:not(.chBox),
#greeting .inner, #greeting .inner *:not(.chBox){
  background-image: none !important;
}

/* 疑似要素(::before/::after)に貼られている複製元サイトの曲線・イラストも止める。
   文字を持つ疑似要素を壊さないよう content には触れず background-image だけ消す。
   見出しボックスの ::before はストライプなので除外。 */
#about::before, #about::after, #about *:not(.chBox)::before, #about *:not(.chBox)::after,
#service::before, #service::after, #service *:not(.chBox)::before, #service *:not(.chBox)::after,
#chContact::before, #chContact::after, #chContact *:not(.chBox)::before, #chContact *:not(.chBox)::after,
#news *:not(.chBox)::before, #news *:not(.chBox)::after,
#greeting .inner::before, #greeting .inner::after,
#greeting .inner *::before, #greeting .inner *::after{
  background-image: none !important;
}

/* ============================================================
   19. ごあいさつの新しいイラスト
       素材が1400px幅のままで横スクロールが出ていた（実測 scrollWidth=1927）。
   ============================================================ */
.chGreetPic{
  position: static !important;
  text-align: center !important;
  margin: 40px auto 0 !important;
  width: 100% !important;
  max-width: 620px !important;
}
.chGreetPic img{
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  margin: 0 auto !important;
  position: static !important;
}
@media screen and (max-width: 767px){
  .chGreetPic, .chGreetPic img{ max-width: 88% !important; }
}

/* ============================================================
   20. お知らせセクションをポップに
   ============================================================ */
#news{ background: #FBFAF4 !important; padding: 64px 20px 72px !important; }
#news .newsDetail{ gap: 18px !important; margin-top: 30px !important; }
#news .newsDetail li{
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(90,84,70,.10) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
#news .newsDetail li:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(90,84,70,.16) !important;
}
#news .newsDetail li a{
  display: flex !important; align-items: center !important; gap: 18px !important;
  padding: 22px 28px !important;
}
#news .newsDetail li h3{
  flex: none !important; margin: 0 !important;
  padding: 7px 16px !important; border-radius: 999px !important;
  background: #CBE85F !important; color: #5E7318 !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important;
}
#news .newsDetail li p{
  margin: 0 !important; text-align: left !important;
  color: #3B4A44 !important; font-size: 15px !important; line-height: 1.7 !important;
}
@media screen and (max-width: 767px){
  #news{ padding: 48px 16px 56px !important; }
  #news .newsDetail li a{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 18px 20px !important; }
  #news .newsDetail li p{ font-size: 14px !important; }
}

/* サービス内容の見出しを後から追加したため、#service を上書き対象に入れ忘れていた。
   元CSSの #service h2 が display:block + 位置指定を持ち、SPで392px幅になり横スクロールしていた。 */
#service .chBoxWrap{ text-align: center !important; margin: 0 auto !important; padding: 0 16px !important; }
#service .chBoxWrap .chBox{
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  max-width: calc(100% - 34px) !important;
  margin: 0 auto !important;
  float: none !important;
  left: auto !important; right: auto !important; top: auto !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: 5px var(--ch-ink, #7E4A8E);
  paint-order: stroke fill;
}
#service .chBoxWrap .chBox span{
  color: #FFFFFF !important;
  -webkit-text-stroke: 3px var(--ch-ink, #7E4A8E);
  paint-order: stroke fill;
}
@media screen and (max-width: 767px){
  #service .chBoxWrap .chBox{ max-width: calc(100% - 28px) !important; -webkit-text-stroke-width: 4px; }
  #service .chBoxWrap .chBox span{ -webkit-text-stroke-width: 2.5px; }
}

/* ============================================================
   21. ごあいさつ上端の雲（作り直し・確定版）
       要件＝雲が上に飛び出す／上端に直線を作らない／ピンクと青の境も直線にしない。
       元素材は雲が「下向きに凹んだ」形で、しかも上端で切れて直線になっていたため、
       SVGで描き起こした（_qa/_make_clouds_svg.py）。
       SVGは 1440x300。青が全幅で埋まるのは y=236 なので 236/1440 = 16.39% が境界。
   ============================================================ */
#greeting{
  background-color: transparent !important;
  background-image:
    url(../img/careheart/clouds_top.svg),
    linear-gradient(#38ADDE, #38ADDE) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, left 16.39vw !important;
  background-size: 100% auto, 100% calc(100% - 16.39vw) !important;
}
@media screen and (max-width: 767px){
  /* SPは雲が小さくなりすぎるので2倍に拡大（境界も2倍） */
  #greeting{
    background-size: 200% auto, 100% calc(100% - 32.78vw) !important;
    background-position: center top, left 32.78vw !important;
  }
}

/* ============================================================
   22. サービスカードがSPで潰れる問題
       heightLine.js がインラインで height:52px を入れており、
       写真背景を敷いたことで計算が狂って中身が全部隠れていた（実測 height=52px / overflow:hidden）。
   ============================================================ */
#chServices .chCard{ height: auto !important; min-height: 0 !important; }

/* ============================================================
   23. お知らせカードを作り直し
       ・日付バッジが横に伸びていた → 内容ぶんだけの幅に
       ・タイトルの下線を消して1行表示（はみ出しは…で省略）
       ・右端に矢印、ホバーで動く
   ============================================================ */
#news .newsDetail li{ max-width: 760px !important; }
#news .newsDetail li a{
  text-decoration: none !important;
  border: 0 !important;
  gap: 20px !important;
  padding: 20px 26px !important;
}
#news .newsDetail li h3{
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center !important;
  padding: 6px 15px !important;
  border-bottom: 0 !important;
}
#news .newsDetail li p{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding: 0 !important;
}
#news .newsDetail li a::after{
  content: "→";
  flex: 0 0 auto;
  color: #A8B86A;
  font-size: 17px;
  transition: transform .25s ease;
}
#news .newsDetail li:hover a::after{ transform: translateX(5px); }
#news .newsDetail li a *{ text-decoration: none !important; border-bottom: 0 !important; }
@media screen and (max-width: 767px){
  #news .newsDetail li a{ flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 16px 18px !important; }
  #news .newsDetail li h3{ font-size: 11px !important; padding: 5px 11px !important; }
  #news .newsDetail li p{ font-size: 13px !important; }
}

/* ============================================================
   24. SPの街並みをさらに上へ
   ============================================================ */
@media screen and (max-width: 767px){
  /* 🔴ユーザー指摘：動いている車/雲アニメーションが表示領域外で見切れていたため、
     高さの定数を120px→220pxに拡大して表示範囲を広げる。 */
  .chHero{ height: calc(93.52vw + 220px) !important; }
}

/* ============================================================
   25. SPでサービスカードが潰れる真因
       .chCard{flex:1 1 0} の flex-basis:0 が縦並び時に効き、
       親(126px)を2枚で分けて各52pxになっていた（実測）。
       縦並びのSPでは内容ぶんの高さにする。
   ============================================================ */
@media screen and (max-width: 767px){
  #chServices .chCard{ flex: 0 0 auto !important; height: auto !important; }
}

/* ============================================================
   26. ページトップボタン（複製元サイトの木札を撤去して自前に）
   ============================================================ */
a.pagetop.chPagetop{
  display: flex !important; align-items: center; justify-content: center;
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: #72D8D2 !important;
  box-shadow: 0 6px 16px rgba(70,64,60,.20) !important;
  text-decoration: none !important;
}
a.pagetop.chPagetop span{
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
a.pagetop.chPagetop::before{
  content: "↑"; color: #fff; font-size: 14px; margin-right: 3px;
}
a.pagetop.chPagetop:hover{ background: #5FC9C3 !important; }

/* お問い合わせのリード（フォームを外した分） */
.chContactLead{
  text-align: center; font-size: 16px; line-height: 2; color: #3B4A44;
  margin: 8px auto 28px;
}

/* ============================================================
   27. ヘッダーの電話番号を2件並べる（受領画像の見せ方に合わせる）
       アイコン＋事業所名（小）＋番号（大）
   ============================================================ */
.chTels{ display: flex; align-items: center; gap: 22px; }
.chTel{ display: flex; align-items: center; gap: 8px; text-decoration: none; }
.chTel__ico{ display: flex; flex: none; }
.chTel__body{ display: flex; flex-direction: column; line-height: 1.2; }
.chTel__body small{
  font-size: 11px; color: #5B534E; letter-spacing: .01em; white-space: nowrap;
}
.chTel__body strong{
  font-size: 22px; font-weight: 700; color: #AE4570; letter-spacing: .01em; white-space: nowrap;
}
.chTel:hover .chTel__body strong{ opacity: .8; }
/* 2件ぶん増えたのでナビを詰める */
.chNav ul{ gap: 16px; }
.chNav a{ font-size: 12px; }
@media screen and (max-width: 1420px){
  .chTel__body small{ display: none; }
  .chTel__body strong{ font-size: 18px; }
}
@media screen and (max-width: 1680px){
  .chTels{ display: none !important; }
}

/* ============================================================
   28. ごあいさつのイラストを青の中に収める
       実測でイラストが青の下端から175pxはみ出して、
       次のセクション（クリーム地）に足が乗っていた。
       セクションの高さを内容ぶんに開放し、下に余白を確保する。
   ============================================================ */
#greeting{
  height: auto !important;
  min-height: 880px;
  padding-bottom: 90px !important;
  box-sizing: border-box;
}
.chGreetPic{ margin: 34px auto 0 !important; }
@media screen and (max-width: 767px){
  #greeting{ min-height: 0 !important; padding-bottom: 60px !important; }
  .chGreetPic{ margin-top: 24px !important; }
}

/* ============================================================
   29. SPでサービス／私たちについてが重なって崩れる問題
       原因＝ゆいレール軌道用に li.service01〜06 を position:absolute で
       焼き込んでいたが、SPでは軌道を隠しているため全部が同じ場所に重なる（実測7要素）。
       #about の見出しも absolute で、テキストの上に浮いていた。
   ============================================================ */
@media screen and (max-width: 767px){
  #service .bg01 > ul > li,
  #service li[class^="service0"]{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    margin: 0 0 22px !important;
    transform: none !important;
  }
  #service .bg01 > ul{
    position: static !important; height: auto !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
  }
}
/* 見出しは絶対配置にしない（::before/::after を使うので relative は必要） */
.chBoxWrap .chBox{
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  float: none !important;
}

/* ============================================================
   30. ごあいさつのイラストを青の中へ（実測でまだ169pxはみ出していた）
   ============================================================ */
/* 🔴ユーザー指示：イラスト下の青い余白をなくし、イラストの下端を青枠の下端に合わせる。
   実測でPC131px・SP34pxの余白があったため、その分だけ縮める。 */
#greeting{ padding-bottom: 189px !important; }
@media screen and (max-width: 767px){
  #greeting{ padding-bottom: 70px !important; }
}

/* ============================================================
   31. 私たちについて：家族イラストを下地に、概要とマップを載せる
   ============================================================ */
#about{
  position: relative !important;
  height: auto !important;
  padding: 70px 20px 0 !important;
  background: #FBFAF4 !important;
  overflow: hidden;
}
#about .detail, #about .inner{
  position: relative !important; z-index: 2;
  width: auto !important; max-width: 1080px !important; margin: 0 auto !important;
  height: auto !important; padding: 0 !important;
}
/* 下地の家族イラスト */
.chAboutArt{
  display: block !important;
  position: relative; z-index: 1;
  width: min(100%, 900px); height: auto;
  margin: 10px auto -6px;
  opacity: .95;
}
/* 概要とマップを2カラムのカードに */
#about .overview.first{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 26px !important;
  width: auto !important; height: auto !important;
  margin: 30px 0 0 !important; padding: 0 !important;
  background: none !important;
}
#about .overview.first .inner01{
  position: static !important; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 30px 32px !important;
  background: #fff !important; border-radius: 24px !important;
  box-shadow: 0 8px 22px rgba(90,84,70,.10) !important;
}
#about #senMap{
  position: static !important;
  width: auto !important; height: 100% !important; min-height: 340px !important;
  margin: 0 !important;
  border-radius: 24px !important; overflow: hidden !important;
  box-shadow: 0 8px 22px rgba(90,84,70,.10) !important;
}
#about #senMap iframe{ height: 100% !important; min-height: 340px !important; }
#about .overview.first dl{ width: auto !important; margin: 16px 0 0 !important; }
#about .overview.second{
  position: static !important; width: auto !important; height: auto !important;
  margin: 30px 0 0 !important; padding: 30px 32px !important;
  background: #fff !important; border-radius: 24px !important;
  box-shadow: 0 8px 22px rgba(90,84,70,.10) !important;
}
#about .overview.second .staff li{ float: none !important; width: auto !important; }
#about h4, #about .titDesign02{ position: static !important; }
@media screen and (max-width: 767px){
  #about{ padding: 48px 16px 0 !important; }
  #about .overview.first{ grid-template-columns: 1fr; gap: 18px !important; }
  #about .overview.first .inner01, #about .overview.second{ padding: 22px 20px !important; border-radius: 20px !important; }
  #about #senMap, #about #senMap iframe{ min-height: 260px !important; }
  .chAboutArt{ width: 100%; margin-top: 4px; }
}

/* ============================================================
   32. お問い合わせ（フォーム無し・電話とメールのカード）
   ============================================================ */
#chContact{ padding: 70px 20px 76px; background: #fff; text-align: center; }
.chContact__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1080px; margin: 36px auto 0;
}
.chContact__card{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; border-radius: 24px;
  background: #FBFAF4; text-decoration: none;
  box-shadow: 0 8px 20px rgba(90,84,70,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.chContact__card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(90,84,70,.16); }
.chContact__label{ font-size: 13px; color: #5B534E; }
.chContact__num{ font-size: 27px; font-weight: 700; color: #AE4570; letter-spacing: .01em; }
.chContact__num--mail{ font-size: 16px; word-break: break-all; }
.chContact__note{ font-size: 12px; color: #7B736D; }
@media screen and (max-width: 767px){
  #chContact{ padding: 48px 16px 56px; }
  .chContact__grid{ grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .chContact__card{ padding: 20px 16px; }
  .chContact__num{ font-size: 23px; }
}

/* ============================================================
   33. フッター
   ============================================================ */
#chFooter{ background: #38ADDE; color: #fff; padding: 56px 20px 0; }
.chFooter__inner{
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 40px;
  max-width: 1160px; margin: 0 auto;
}
.chFooter__brand img{ width: 96px; height: auto; background: #fff; border-radius: 14px; padding: 8px; }
.chFooter__name{ margin: 14px 0 8px; font-size: 18px; font-weight: 700; }
.chFooter__addr{ font-style: normal; font-size: 13px; line-height: 1.9; opacity: .95; }
.chFooter__nav ul{ list-style: none; margin: 0; padding: 0; }
.chFooter__nav li{ margin: 0 0 10px; }
.chFooter__nav a{ color: #fff; font-size: 13px; text-decoration: none; opacity: .95; }
.chFooter__nav a:hover{ text-decoration: underline; }
.chFooter__info dl{ display: grid; grid-template-columns: 92px 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.chFooter__info dt{ font-weight: 700; opacity: .9; }
.chFooter__info dd{ margin: 0; line-height: 1.7; }
.chFooter__ig{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.18);
  color: #fff; font-size: 13px; text-decoration: none;
}
.chFooter__ig:hover{ background: rgba(255,255,255,.3); }
.chFooter__copy{
  max-width: 1160px; margin: 40px auto 0; padding: 18px 0 22px;
  border-top: 1px solid rgba(255,255,255,.28);
  text-align: center; font-size: 12px; opacity: .9;
}
@media screen and (max-width: 767px){
  #chFooter{ padding: 40px 18px 0; }
  .chFooter__inner{ grid-template-columns: 1fr; gap: 28px; }
  .chFooter__info dl{ grid-template-columns: 80px 1fr; font-size: 12px; }
}

/* ============================================================
   34. ページ全体を縦断する装飾リボン（線路から変更・ユーザー指示）
       ・レイヤーは #wrapper の全長を覆う1枚だけ（分割しない）
       ・セクションの背景より上、本文・カードより下に置く。
         リボンは途切れさせず、コンテンツがリボンの上に重なる形にする。
   ============================================================ */
.railway-layer{
  position: absolute; inset: 0;
  z-index: 9000;                 /* ヘッダー(9800)より下、それ以外すべてより前面 */
  pointer-events: none;
  overflow: hidden;
}
.railway-layer svg{ display: block; width: 100%; height: 100%; }

/* 木・電車の揺れアニメーション（careheart-rail.js が生成する画像に付与）。
   2026-08-24：スクロール演出(wow)を大幅に減らした代わりに、常時動いている
   イラスト側の揺れを大きくしてほしいとの指示のため、揺れ幅を約2倍に拡大。 */
.chTreeSway{
  transform-box: fill-box; transform-origin: 50% 100%;   /* 根元を軸に揺れる */
  animation-name: chTreeSwayKF; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes chTreeSwayKF{
  0%, 100%{ transform: rotate(-5.2deg); }   /* 元-2.6deg → 2倍 */
  50%{ transform: rotate(5.2deg); }
}
.chTrainWobble{
  transform-box: fill-box; transform-origin: 50% 100%;   /* 車輪の位置を軸に上下＋わずかな傾き */
  animation: chTrainWobbleKF 1.1s ease-in-out infinite;
}
@keyframes chTrainWobbleKF{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-4.5px) rotate(1.4deg); }   /* 元-2px/0.7deg → 2倍強 */
}
@media (prefers-reduced-motion: reduce){
  .chTreeSway, .chTrainWobble{ animation: none !important; }
}

/* .railway-layer は #wrapper 基準に置く（relative が無いとビューポート基準になる＝実測で確認） */
#wrapper{ position: relative; }

/* リボンが上にかぶる箇所を、指示された場所だけ前面に出す（z-index 9000 = .railway-layer より上） */
/* 🔴実機で発覚：#news の見出しバッジしか前面化しておらず、#chContact「お問い合わせ」など
   他セクションの見出しバッジには線が前に出たままだった。全バッジに一括適用する。 */
.chBoxWrap{ position: relative; z-index: 9010; }
/* 原因：.sns-sec と #about .detail/.inner がそれぞれ z-index:1/2 の独立スタッキングコンテキストを
   作っていたため、内側の要素だけ z-index を上げても外側の箱ごと線路の下に留まっていた（実測で確認）。
   外側の箱自体を線路より上へ引き上げる。 */
/* #chInstagram セクション自体は前面化しない（.sns-sec の背景色(#f7fbfc)ごと線を隠してしまうため。
   実測で確認：セクション全体を9010にすると、カードが無い余白部分まで線が消えていた）。
   ただし .sns-sec は z-index:1 で独自のスタッキングコンテキストを作っており（551行目）、
   その中では子の9010が「文脈内だけの9010」になってしまい、外側の線路(9000)には勝てない
   （実測で確認：iframeの中まで線が突き抜けて見えていた）。
   #chInstagram だけ z-index を打ち消してコンテキストを作らせないようにし、
   カード本体(.sns-grid)と見出しバッジ(.sns-head)の9010がそのまま線路より前に出るようにする。 */
#chInstagram.sns-sec{ z-index: auto; }
#chInstagram .sns-grid{ position: relative; z-index: 9010; }   /* Instagramカード全体 */
/* 🔴実測で発覚：z-indexで前面化しても、透明な部分（カードの角丸の隙間・カード間のgap）は
   透けたままなので線が見えてしまっていた（z-indexは重なり順だけで、透明度は変えない）。
   SP(縦積み)でInstagram/Facebookカードの間に線がはみ出して見えていた対策として、
   隙間そのものにセクション背景色と同じ不透明な背景を敷いて隠す。 */
@media screen and (max-width: 767px){
  #chInstagram .sns-grid{ background: #f7fbfc; border-radius: 16px; }
}
#chInstagram .sns-head{ position: relative; z-index: 9010; }   /* 見出しバッジ（ケアハートの「今」を発信中） */
#about .detail, #about .inner{ z-index: 9010 !important; }   /* 私たちについてセクション全体 */
#about .overview.first .inner01{ position: relative !important; z-index: 9010; }
/* 🔴2026-08-25：/about/ページ新設に伴い #about をティザー構成(.chAboutTeaser)に縮小した際、
   上の`.detail`/`.inner`ラッパーごと無くなったため軌道よけのz-indexが効かなくなり、
   SPで本文・ボタンに木の装飾が重なった（実機で確認）。同じ前面化を新構造にも適用する。 */
.chAboutTeaser__inner{ position: relative; z-index: 9010; }
#greeting h2{ position: relative; z-index: 9010; }   /* 「ごあいさつ」見出しに線がかぶっていたため前面へ */
/* 🔴SP新曲線（ループ＋横揺れ）に切替後、本文と家族イラストを線が横切っていたため前面化。
   旧方式（margin-topで文章をずらす）はSP専用曲線とは噛み合わないため廃止。
   🔴実機で線がイラストに被ったまま→原因は .chGreetPic{ position:static !important }（1235行目）が
   後勝ちで position を打ち消し、z-indexが無効化されていたため（実測で確認）。position側にも
   !important を付けて上書きする。 */
#greeting .text01, #greeting .greetingText{ position: relative !important; z-index: 9010; }
/* 🔴SP実機で発覚：#greeting .inner が position:absolute のまま（元テンプレのデフォルト）で、
   #about は .inner を position:relative !important に上書き済みなのに #greeting だけ漏れていた。
   結果、#greeting 本体の高さが中身を包まず(実測 高さ34px)、直後の #chRecruit がその上に
   めり込んで「ごあいさつ」と「RECRUIT」の文字が重なっていた（SP 390pxで実測確認）。 */
#greeting .inner{ position: relative !important; top: auto !important; }
/* 🔴2026-08-24：本文・見出しは個別にz-index 9010化していたが、家族イラスト
   （.chGreetPic内のimg）は背景が透明なPNGのため、img自体を前面化しても
   透明部分から線が透けて見えていた（ユーザー実機スクショで確認：「ピンクの
   曲線はご挨拶の背面」）。#greetingセクション自体（不透明な青背景で全幅を覆う）
   を丸ごと前面化し、フッターと同様に区間全体で線を完全に隠す方式に変更。 */
#greeting{ position: relative; z-index: 9010; }
#chFooter{ position: relative; z-index: 9010; }   /* フッターには線路を表示しない */
#chContact .chContact__card{ position: relative; z-index: 9010; }   /* お問い合わせのカード（電話・メール） */
/* 🔴SP新曲線切替後、「お知らせと日記」のカード（日付バッジ含む）に線がかぶっていた。
   他カードと同じ9010前面化がここだけ漏れていたため追加。 */
#news .newsDetail li{ position: relative; z-index: 9010; }
/* 🔴SP新曲線に切替後、実機幅で線が「訪問看護／ヘルパー」カードを斜めに横切っていたため追加。
   PC側は元の経路がこの位置を通らないため見た目への影響なし（実測で確認）。 */
#chServices .chCard{ position: relative; z-index: 9010; }
/* 🔴SP新曲線がRECRUITセクション（見出し文・タグ・集合写真）を縦断していたため追加。
   #chRecruit > * に z-index:1 の指定があり(43.)、線(9000)より下のままだった。 */
.chRecruit__inner{ z-index: 9010 !important; }
/* 「RECRUIT RECRUIT...」の背景マーキー文字も同様に線より前へ（ユーザー指摘：
   線が目立つ形で交差するより、マーキーの背面に収まる方が良いとのこと）。
   🔴実測で発覚：#chRecruit > *{ z-index:1 }（43.）の方がIDセレクタで詳細度が高く後勝ちしていた
   （.chRecruit__marquee単体はクラスのみで詳細度負け）。ID+クラスにして詳細度で上書きする。 */
#chRecruit > .chRecruit__marquee{ position: relative; z-index: 9010; }

/* ============================================================
   35. ヘッダーの配置バランス
       全幅にしていたため 1890px では左のロゴと右の要素が離れすぎていた。
       中央寄せの器に入れ、ナビと連絡先の間に明確な間隔を作る。
   ============================================================ */
.chHeader__inner{
  max-width: 1680px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  gap: 28px !important;
}
.chHeader__brand{ flex: 0 0 auto; }
.chNav{ margin-left: auto !important; margin-right: 8px; }
.chHeader__right{ flex: 0 0 auto; gap: 18px !important; }
.chHeader__name{ line-height: 1.25; }
.chHeader__name small{ margin-top: 3px; }   /* 表示形式(flex)は .chHeader__tagline 側で指定 */
@media screen and (max-width: 1080px){
  /* 🔴ユーザー指示でSPにもタグライン（飾り線＋「皆で繋がる大きな輪」）を表示させる。
     以前はここでdisplay:noneにして隠していた。 */
  .chHeader__inner{ padding: 0 18px !important; }
}

/* ============================================================
   36. サービス内容の見出しが上のセクションに近すぎる
   ============================================================ */
#service{ padding-top: 86px !important; }
@media screen and (max-width: 767px){ #service{ padding-top: 56px !important; } }


/* ============================================================
   37. 線路は幅900px以上のときだけ引く
       SPは本文がほぼ全幅で、線路が通れる空きが無く本文に重なるため
       （実測で重なりを確認）。狭い画面では出さない。
   ============================================================ */

/* ============================================================
   38. 私たちについての情報欄のバランス
       項目名と内容が詰まって折り返しが崩れていた。
   ============================================================ */
#about .overview.first dl{
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  gap: 10px 14px !important;
  align-items: baseline !important;
}
#about .overview.first dl dt{
  float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  font-size: 14px !important; font-weight: 700 !important; color: #5B534E !important;
  letter-spacing: .04em !important; white-space: nowrap !important;
}
#about .overview.first dl dd{
  float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  font-size: 15px !important; line-height: 1.6 !important; color: #3B4A44 !important;
  word-break: keep-all !important; overflow-wrap: break-word !important;
}
#about .overview.first dl dd.tel a{
  display: block !important; font-size: 26px !important; font-weight: 700 !important;
  color: #AE4570 !important; text-decoration: none !important; line-height: 1.25 !important;
}
#about .overview.first dl dd.tel a span{
  display: block !important; font-size: 12px !important; font-weight: 500 !important;
  color: #5B534E !important; letter-spacing: 0 !important; margin-top: 2px !important;
}
#about .time{ display: flex !important; flex-wrap: wrap; gap: 8px 26px !important; margin: 20px 0 0 !important; }
#about .time p{ margin: 0 !important; font-size: 15px !important; color: #3B4A44 !important; }
#about .time p span{ display: inline-block; min-width: 58px; font-weight: 700; color: #5B534E; }
#about .comment02{ margin: 14px 0 0 !important; font-size: 13px !important; color: #6E665F !important; line-height: 1.8 !important; }
#about address{ display: block; margin: 18px 0 0 !important; font-style: normal; font-size: 14px !important; line-height: 1.9 !important; color: #3B4A44 !important; }
#about .btn01{ display: none !important; }
@media screen and (max-width: 767px){
  #about .overview.first dl{ grid-template-columns: 84px 1fr !important; }
  #about .overview.first dl dd.tel a{ font-size: 22px !important; }
  #about .overview.first dl dt{ font-size: 12px !important; }
  #about .overview.first dl dd{ font-size: 13px !important; }
}

/* ============================================================
   39. SPで「ご利用方法」がセクションからはみ出して
       「私たちについて」の見出しに重なっていた（実測185pxはみ出し）。
       .howto が絶対配置のまま残っていたのが原因。
   ============================================================ */
@media screen and (max-width: 767px){
  #service .howto{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; margin: 24px 0 0 !important;
  }
  #service{ height: auto !important; padding-bottom: 40px !important; }
}

/* ============================================================
   40. 私たちについて＝家の枠の中に概要と地図を入れる
       枠は 1200x1634（比率 h/w = 1.362）。
       屋根の下・壁の内側にコンテンツが収まるよう余白を取る。
   ============================================================ */
#about .inner{
  position: relative !important;
  /* 家を「枠」として中身の高さぴったりに伸ばす。
     100% auto だと家が中身より1.36倍高くなって下が空くため（実測）。 */
  background: none !important;
  padding: 0 !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
#about .chBoxWrap{ margin-bottom: 26px !important; }
/* 🔴2026-08-25デザインレビューで発覚：ここに@mediaで囲まれていない
   `grid-template-columns:1fr !important` があり、/about/ページのPC2カラム
   レイアウト（1592行目）を全幅で1カラムに強制していた（実測で確認）。
   SP専用の意図だったはずが、同じ内容は1623行目で既に@media(max-width:767px)
   としてスコープ済みのため、この無条件版は削除して良い（重複だった）。 */
#about .overview.first .inner01,
#about .overview.second{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(2px);
}
#about #senMap, #about #senMap iframe{ min-height: 300px !important; }
@media screen and (max-width: 767px){
  #about .inner{ padding: 0 !important; background: none !important; }
  #about #senMap, #about #senMap iframe{ min-height: 230px !important; }
}

/* ============================================================
   41. SPでごあいさつの見出しがピンクの雲に埋もれる
   ============================================================ */
@media screen and (max-width: 767px){
  #greeting .inner{ padding-top: 34vw !important; }
}

/* ============================================================
   42. SPハンバーガーメニューのボタン
   ============================================================ */
.chHeader__burger{
  background: transparent !important;
  border: 2px solid #46403C !important;
  border-radius: 14px !important;
  width: 46px !important; height: 46px !important;
  flex-direction: column; gap: 5px;
  transition: background .2s, border-color .2s;
}
.chHeader__burger span{
  width: 20px !important; height: 2px !important;
  background: #46403C !important; border-radius: 2px !important;
}
.chHeader__burger:hover{ background: rgba(114,216,210,.18) !important; border-color: #2E8A85 !important; }
.chHeader__burger:hover span{ background: #2E8A85 !important; }

/* ============================================================
   43. 採用情報セクション（他案件の採用セクション構成を参考に構築）
       サービス内容は詳細ページで説明するためトップからは削除。
   ============================================================ */
#chRecruit{
  position: relative;
  margin: 130px 0 0;
  padding: 44px 0 96px;
  background: linear-gradient(180deg, #38ADDE 0%, #2E9BC9 55%, #2589B4 100%);
  overflow: hidden;
}
#chRecruit > *{ position: relative; z-index: 1; }
.chRecruit__curve{
  position: absolute !important; bottom: 100% !important; top: auto !important;
  left: 0 !important; width: 100% !important; height: 96px; display: block; z-index: 0;
}
.chRecruit__marquee{ margin: 30px 0 6px; overflow: hidden; }
.chRecruit__track{ display: flex; gap: .55em; width: max-content; animation: chRcSlide 26s linear infinite; }
.chRecruit__track span{
  font-family: Montserrat, Asap, sans-serif; font-weight: 800;
  font-size: clamp(70px, 9.6vw, 140px); line-height: 1.05; color: #fff; white-space: nowrap;
}
.chRecruit__track span.is-out{ color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.75); }
@keyframes chRcSlide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.chRecruit__inner{
  max-width: 1180px; margin: 40px auto 0; padding: 0 40px;
  display: flex; gap: 56px; align-items: center;
}
.chRecruit__txt{ flex: 1; min-width: 0; }
.chRecruit__catch{
  font-size: 34px; font-weight: 800; color: #fff; line-height: 1.75;
  letter-spacing: .04em; margin: 0 0 24px;
}
.chRecruit__lead{ color: rgba(255,255,255,.94); font-size: 15px; line-height: 2.1; margin: 0 0 26px; }
.chRecruit__jobs{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chRecruit__jobs span{
  border: 1.5px solid rgba(255,255,255,.85); color: #fff;
  font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 22px;
}
.chRecruit__cta{
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: #2589B4; font-size: 16px; font-weight: 800;
  padding: 16px 34px; border-radius: 36px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.chRecruit__cta:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.chRecruit__photo{ flex: 0 0 40%; }
.chRecruit__photo img{
  width: 100%; height: auto; display: block;
  border-radius: 24px; box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
@media screen and (max-width: 900px){
  #chRecruit{ margin-top: 110px; padding: 44px 0 64px; }
  .chRecruit__inner{ flex-direction: column; gap: 28px; padding: 0 20px; margin-top: 26px; }
  .chRecruit__photo{ flex: none; width: 100%; }
  .chRecruit__catch{ font-size: 23px; }
    }
@media (prefers-reduced-motion: reduce){ .chRecruit__track{ animation: none; } }

/* ============================================================
   44. ハンバーガーメニュー内の複製元サイトの素材を差し替え
       家＋トラックのイラストと手描きの線を止め、
       ケアハート用のイラストにする。閉じるボタンも文字に。
   ============================================================ */
#gNav02{
  background: #FBFAF4 !important;
}
#gNav02 .inner{
  background: url(../img/careheart/menu_people.png) no-repeat center bottom !important;
  background-size: min(88%, 420px) auto !important;
  padding-bottom: 34vw !important;
}
#gNav02 .menu:after{ background: none !important; }
#gNav02 a.closeBtn img, #gNav02 a.close img{ display: none !important; }
#gNav02 a.closeBtn{
  display: flex !important; align-items: center; justify-content: center;
  width: 46px !important; height: 46px !important;
  border: 2px solid #46403C !important; border-radius: 14px !important;
  background: #fff !important;
}
#gNav02 a.closeBtn::before{ content: "✕"; color: #46403C; font-size: 18px; font-weight: 700; }
#gNav02 a.close{
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 26px auto 0 !important; padding: 12px 30px !important;
  border-radius: 999px !important; background: #72D8D2 !important;
  width: auto !important; height: auto !important;
}
#gNav02 a.close::before{ content: "閉じる"; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
#gNav02 ul.menu li a{
  color: #33403F !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* ============================================================
   45. SPでごあいさつと採用の間に大きな空きが出ていた
   ============================================================ */
@media screen and (max-width: 900px){
  #chRecruit{ margin-top: 60px !important; }
  #greeting{ padding-bottom: 4px !important; }   /* イラスト下端を青枠の下端に合わせる（ユーザー指示） */
}

/* ============================================================
   46. SPの代表プロフィールは中央ぞろえに
   ============================================================ */
@media screen and (max-width: 767px){
  #about .overview.second .staff li{ text-align: center !important; }
  #about .overview.second figure{ float: none !important; margin: 0 auto 14px !important; text-align: center !important; }
  #about .overview.second .profile{ float: none !important; width: auto !important; text-align: center !important; }
  #about .overview.second h4{ text-align: center !important; }
  #about .overview.second .text02{ text-align: left !important; margin-top: 12px !important; }
}

/* ============================================================
   47. 線路沿いの家と列車
   ============================================================ */
@media screen and (max-width: 999px){ }
@media (prefers-reduced-motion: reduce){ }

/* ============================================================
   48. 768〜1010pxの幅で横スクロールが出る
       複製元CSSが #wrapper を 1010px 固定にしており、
       タブレット幅を想定していなかった（実測 scrollWidth=1010 / 画面920）。
   ============================================================ */
#wrapper{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
@media screen and (min-width: 768px) and (max-width: 1080px){
  .area, #contents, #contents.top,
  #chServices, #news, #chInstagram, #greeting, #chRecruit, #about, #chContact{
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .chFooter__inner{ max-width: 100% !important; box-sizing: border-box !important; }
}

/* #greeting の .detail / .inner も 1010px 固定だった（実測）。タブレット幅で開放する。 */
@media screen and (max-width: 1080px){
  #greeting .detail, #greeting .inner, #greeting .text01, #greeting .greetingText{
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #greeting .inner{ padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   49. タブレット幅（768〜1080px）でも線路を残す
       本文の幅を狭めて線路の通り道を作る方式。
       セクションごとに左右へ寄せ、空いた側を線路が走る。
       🔴767px以下（実機SP）はこの方式をやめ、PCと同じ「カードを個別に
       前面化」方式に統一（ユーザー提供の新しいSP用中心線に切替に伴う変更）。
       本文幅を圧縮したままだと新しい経路の振れ幅と噛み合わないため。
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1080px){
  /* 中身は必ず中央ぞろえ。線路を通したいがために左右へ寄せるのは本末転倒だった。
     線路は本文の左右に残る余白（14%ずつ）を通す。 */
  #chServices .chCards,
  #news .newsDetail,
  #chInstagram .sns-grid,
  #chRecruit .chRecruit__inner,
  #about .overview.first,
  #about .overview.second,
  #chContact .chContact__grid{
    width: 72% !important;
    max-width: 72% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  #chServices .chBoxWrap, #chInstagram .chBoxWrap, #about .chBoxWrap,
  #news .chBoxWrap, #chContact .chBoxWrap, #chRecruit .chBoxWrap{
    text-align: center !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  #greeting .inner{
    width: 76% !important; margin-left: auto !important; margin-right: auto !important;
    padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;
  }
  }

/* ============================================================
   50. 採用セクションの背景を青からクリーム系へ
       ヒーロー・ごあいさつが青なので、青が続いて重かった。
   ============================================================ */
#chRecruit{ background: linear-gradient(180deg, #F7F0DF 0%, #F2E7D0 55%, #EDDFC2 100%) !important; }
.chRecruit__curve path{ fill: #F7F0DF !important; }
.chRecruit__track span{ color: #C9A227 !important; }
.chRecruit__track span.is-out{ color: transparent !important; -webkit-text-stroke: 2px rgba(201,162,39,.5) !important; }
.chRecruit__catch{ color: #4A3B1E !important; }
.chRecruit__lead{ color: #6B5A38 !important; }
/* 🔴半透明(.5)だと.railway-layer(線路, z-index9000)の線がタグ越しに透けて見えていた
   （実測で確認：タグ左上の縁からピンク線が透過）。線を完全に背後へ隠すため不透明化。 */
.chRecruit__jobs span{ border-color: rgba(120,98,50,.55) !important; color: #6B5A38 !important; background: #fff; }
.chRecruit__cta{ background: #C9A227 !important; color: #fff !important; }
.chRecruit__cta:hover{ background: #B08F1F !important; }

/* ============================================================
   51. SPのRECRUIT見出し・リード文にピンクの線が重なって見づらいとの
       指摘のため、背後にカード状の白背景を敷いて線を隠す。
       対象は見出し(.chRecruit__catch)とリード文(.chRecruit__lead)のみ
      （職種タグ・CTAボタンは元々個別の背景を持つため対象外）。
   ============================================================ */
@media screen and (max-width: 767px){
  .chRecruit__textbox{
    background: rgba(255,255,255,.85);
    border-radius: 22px;
    padding: 22px 16px;
    box-shadow: 0 8px 22px rgba(120,98,50,.14);
  }
  .chRecruit__textbox .chRecruit__catch,
  .chRecruit__textbox .chRecruit__lead{ margin-bottom: 0; }
  /* 箱のpaddingぶん横幅が狭くなり「住み慣れた家での暮らしを、」が2行目にはみ出す
     （box無しでは350px確保できていたのが箱の分322pxに減っていた＝実測で確認）
     ため、箱内だけ見出しフォントサイズを詰めて元の改行位置(<br>のみ)に収める。 */
  .chRecruit__textbox .chRecruit__catch{ margin-bottom: 18px; font-size: 21px; }
}

/* ============================================================
   51. 線路が「私たちについて」の箱の隙間から透けて見える対策
       #about .overview.first .inner01 の背景が半透明(rgba(255,255,255,.86))
       のため、線路(z-index:9000)がテキストの隙間から透けていた（実測で確認）。
       この箱は線路を完全に隠す指示のため不透明にする。
   ============================================================ */
#about .overview.first .inner01{
  background: #fff !important;
  backdrop-filter: none !important;
}
/* 🔴同じ半透明バグが `.overview.second`（2つ目の「ごあいさつ」ブロック・代表者プロフィール）
   にも存在（rgba(255,255,255,.86)、実測で確認）。前面化もされていなかったため合わせて追加。 */
#about .overview.second{
  background: #fff !important;
  backdrop-filter: none !important;
  position: relative !important;
  z-index: 9010;
}

/* ============================================================
   52. サブページ（訪問看護/ヘルパーステーション LP）共通パーツ
       www.ookinawa.jp の service.php / homecare.php の構成を参考に、
       トップページと同じデザインシステム（chBox・カード・線路演出）で再構築。
       アクセントカラーはページ側で --ch-page-accent を上書きして切り替える。
       kango(訪問看護)=青(--ch-blue) / kaigo(ヘルパー)=ピンク(--ch-pink)
   ============================================================ */
.chBox--blue{ --ch-box: #8FC7EA; --ch-ink: #0060B0; }
.chBox--pinkA{ --ch-box: #F5A8C4; --ch-ink: #E64784; }

/* ============================================================
   52a. kango/kaigo 用ヒーロービュー（LP化・2026-08-28）
        写真は未用意（ユーザー確定：新しい写真が届くまで保留）のため、
        トップページの実FVで既に使っている「大きな輪」素材(hero_ring.png)＋
        ロゴだけを仮ビジュアルにする。写真が届いたら .chHeroLP__visual の
        background-image を差し替えるだけで済むようにしてある。
        トップの輪と同じ理由（一度は輪の中に文字を入れて視認性が悪く撤去した
        経緯がある）で、見出しは輪の「中」ではなく「隣」に置く。
        ※2026-08-31現在この基本形を使っているのは kaigo のみ。
          kango は下の .chHeroLP--town（町並みイラスト版）で上書きしている。
   ============================================================ */
.chHeroLP{
  padding: 132px 20px 64px; overflow: hidden;
}
@media screen and (max-width: 767px){
  .chHeroLP{ padding: 92px 20px 40px; }
}
/* kaigoのFV表示領域をkango(.chHeroLP--town、アスペクト比1191:842≒vw×0.707で
   高さが決まる)に揃える。901px以上のみ対象（900px以下は元々の高さがほぼ一致済み＝
   実測kaigo715px/kango741pxで既に近く、この調整は不要かつ縦積みレイアウトと噛み合わない）。 */
@media screen and (min-width: 901px){
  .chHeroLP{ min-height: 70.7vw; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
}
.chHeroLP__inner{
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 56px;
}
.chHeroLP__text{ flex: 1 1 420px; max-width: 520px; text-align: left; }
.chHeroLP__badge{
  margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .22em;
  color: var(--ch-page-accent, var(--ch-blue));
}
.chHeroLP__ttl{
  margin: 0; font-size: 34px; line-height: 1.55; font-weight: 800; color: var(--ch-ink);
}
.chHeroLP__sub{
  margin: 16px 0 0; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: var(--ch-sub);
}
/* kaigo（基本形.chHeroLPをそのまま使うページ）用のステーション名バッジ。
   kango側 .chHeroLP--town .chHeroLP__station（52a-2）とトンマナを揃えるための追加だが、
   kaigoは絶対配置の町並みイラスト構成ではなく通常フローの横並びレイアウトのため、
   --town側のCSSには一切触れず、無印 .chHeroLP__station に独立定義する。 */
.chHeroLP__station{
  margin: 16px 0 0; display: inline-flex; align-items: center; gap: 14px;
}
.chHeroLP__station img{ width: 60px; height: 60px; flex: 0 0 auto; }
.chHeroLP__station span{
  font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.35; color: var(--ch-sub);
}
.chHeroLP__station b{
  display: block; margin-top: 2px; font-size: 27px; font-weight: 800; letter-spacing: .06em;
  line-height: 1.3; color: var(--ch-ink);
}
@media screen and (max-width: 900px){
  .chHeroLP__station{ margin-top: 16px; justify-content: center; }
}
.chHeroLP__cta{
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.chHeroLP__cta .chSubCta{ margin: 0; max-width: none; }
.chHeroLP__more{
  font-size: 14px; font-weight: 700; color: var(--ch-page-accent, var(--ch-blue)); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.chHeroLP__more:hover{ opacity: .75; }
.chHeroLP__visual{
  flex: 0 0 auto; width: min(30vw, 340px); min-height: calc(min(30vw, 340px) * 0.666);
  background: url(../img/careheart/hero_ring.png) center center no-repeat; background-size: contain;
  display: flex; align-items: center; justify-content: center;
}
.chHeroLP__visual img{ width: 40%; max-width: 130px; height: auto; }
@media screen and (max-width: 900px){
  .chHeroLP__inner{ flex-direction: column; gap: 28px; }
  .chHeroLP__text{ text-align: center; max-width: 560px; }
  .chHeroLP__cta{ justify-content: center; }
  .chHeroLP__visual{ width: min(58vw, 300px); min-height: calc(min(58vw, 300px) * 0.666); order: -1; }
}
@media screen and (max-width: 767px){
  .chHeroLP__ttl{ font-size: 24px; line-height: 1.6; }
  .chHeroLP__visual{ width: 52vw; min-height: calc(52vw * 0.666); }
}
@media (prefers-reduced-motion: no-preference){
  .chHeroLP__visual{ animation: chRingFloat 9s ease-in-out infinite; }
}

/* ============================================================
   52a-2. 町並みイラスト版ヒーロー（.chHeroLP--town / kango専用・2026-08-31）
        ユーザー支給のPSD素材(Downloads\23589542.psd)のアイソメトリック町並み
        イラストをセクション全幅の背景に敷き、PSD内で「TEXT」プレースホルダーが
        置かれていた右下の空きスペースにテキストブロックを重ねる。
        テキスト位置の % は PSD の実座標から算出（キャンバス1191x842、
        textレイヤーのbbox = x629-1069 / y494-712）:
          left = 629/1191 = 52.8%   top = 494/842 = 58.7%   width = 440/1191 = 36.9%
        イラストを一切トリミングせず全体を見せるため、セクションの高さは
        イラストのアスペクト比(1191:842 ≒ 高さ=幅×0.707)に追従させている。
        ※基本形(.chHeroLP)は kaigo がそのまま使っているので触らないこと。
   ============================================================ */
.chHeroLP--town{
  position: relative; padding: 0; overflow: hidden; background: #fff;
}
/* 背景イラスト。通常フローに置いてセクションの高さを決めさせる。 */
.chHeroLP--town .chHeroLP__bg{
  display: block; width: 100%; height: auto; user-select: none; pointer-events: none;
}
.chHeroLP--town .chHeroLP__inner{
  position: absolute; inset: 0; display: block; max-width: none; margin: 0; gap: 0;
}
/* PSDのTEXT枠の位置にそのまま重ねる */
.chHeroLP--town .chHeroLP__text{
  position: absolute; left: 52.8%; top: 44%; width: 36.9%; min-width: 300px;
  flex: none; max-width: none; text-align: left;
}
.chHeroLP--town .chHeroLP__ttl{ font-size: clamp(22px, 2.36vw, 34px); }
/* ステーション名。www.ookinawa.jp のリンクから「ナースイラスト＋店名」という
   組み合わせだけを踏襲する（2026-08-31ユーザー指示：黄色いピル枠は真似しない）。
   店名はヒーロー内で見出しに次ぐ要素として読ませるため大きく組む。 */
.chHeroLP--town .chHeroLP__station{
  margin: 22px 0 0; display: inline-flex; align-items: center; gap: 14px;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.chHeroLP--town .chHeroLP__station img{ width: 60px; height: 60px; flex: 0 0 auto; }
.chHeroLP--town .chHeroLP__station span{
  font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.35; color: var(--ch-sub);
}
.chHeroLP--town .chHeroLP__station b{
  display: block; margin-top: 2px; font-size: 27px; font-weight: 800; letter-spacing: .06em;
  line-height: 1.3; color: var(--ch-ink);
}
.chHeroLP--town .chHeroLP__cta{ margin-top: 28px; }

/* タブレット以下：重ね配置をやめ、イラストの下にテキストを普通に流す。
   狭い画面でPSDのTEXT枠(全体の37%幅)に文字を押し込むと破綻するため。 */
@media screen and (max-width: 900px){
  .chHeroLP--town{ padding: 92px 0 40px; }
  .chHeroLP--town .chHeroLP__inner{ position: static; inset: auto; }
  .chHeroLP--town .chHeroLP__text{
    position: static; left: auto; top: auto; width: auto; min-width: 0;
    max-width: 560px; margin: 24px auto 0; padding: 0 20px; text-align: center;
  }
  .chHeroLP--town .chHeroLP__station{ margin-top: 16px; }
  .chHeroLP--town .chHeroLP__cta{ justify-content: center; }
}

/* ============================================================
   52a-3. セクション見出しの装飾ピルを外す（2026-08-31 ユーザー指示、
        2026-09-16 kaigoにも適用範囲拡大＝「セクションタイトルのデザインもあわせる」指示）
        「このセクションタイトルのデザインは抜こうか」＝斜ストライプ・色ベタ・影・
        丸ドット(::after)をやめ、テキスト見出しだけにする。見出し文言は残す。
        🔴 .chBox系は index/about/recruit/kaigo/kango の全5ページ計28箇所で共有して
           いるため、必ず body.pageKango / body.pageKaigo にスコープを限定すること
           （index/about/recruitは対象外のまま）。
   ============================================================ */
/* 🔴セレクタに #about / #chContact を併記しているのは詳細度対策。
   このCSSには元サイト由来の `#about .chBoxWrap .chBox`（詳細度1,2,0・!important付きで
   color:#fff と -webkit-text-stroke:5px を当てる）が存在し、
   `body.pageKango .chBoxWrap .chBox`（0,3,1）ではID数で負ける。
   実際この対策前は「私たちについて」だけ白抜き＋サーモン縁取りで残っていた。 */
body.pageKango #about .chBoxWrap .chBox,
body.pageKango #chContact .chBoxWrap .chBox,
body.pageKango .chBoxWrap .chBox,
body.pageKaigo #about .chBoxWrap .chBox,
body.pageKaigo #chContact .chBoxWrap .chBox,
body.pageKaigo .chBoxWrap .chBox{
  background: none !important; box-shadow: none !important;
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  font-size: 27px !important; font-weight: 800 !important; letter-spacing: .08em !important;
  /* var(--ch-ink) は .chBox--blue/.chBox--pinkA が自分自身で再定義して色が化けるため、
     見出し色は変数を使わず明示する（全見出しの色を揃える意図）。 */
  color: #23404f !important;
  /* .chBoxWrap .chBox の rotate(-1.6deg) と drop-shadow はピル意匠とセットの装飾。
     ピルを外した以上、傾きと影も打ち消す（ユーザー指示「斜めにしなくていい」）。 */
  transform: none !important; filter: none !important;
  /* 縁取りは打ち消し宣言が無いと詳細度を直しても残る（実際に残っていた）。 */
  -webkit-text-stroke: 0 !important; text-shadow: none !important;
}
body.pageKango .chBoxWrap .chBox::before,
body.pageKango .chBoxWrap .chBox::after,
body.pageKaigo .chBoxWrap .chBox::before,
body.pageKaigo .chBoxWrap .chBox::after{ display: none !important; content: none !important; }
body.pageKango #about .chBoxWrap .chBox span,
body.pageKango #about .chBoxWrap .chBox .asap,
body.pageKango #chContact .chBoxWrap .chBox span,
body.pageKango #chContact .chBoxWrap .chBox .asap,
body.pageKango .chBoxWrap .chBox span,
body.pageKango .chBoxWrap .chBox .asap,
body.pageKaigo #about .chBoxWrap .chBox span,
body.pageKaigo #about .chBoxWrap .chBox .asap,
body.pageKaigo #chContact .chBoxWrap .chBox span,
body.pageKaigo #chContact .chBoxWrap .chBox .asap,
body.pageKaigo .chBoxWrap .chBox span,
body.pageKaigo .chBoxWrap .chBox .asap{
  margin-top: 8px !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .24em !important; color: var(--ch-page-accent, var(--ch-blue)) !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important;
}
@media screen and (max-width: 767px){
  body.pageKango #about .chBoxWrap .chBox,
  body.pageKango #chContact .chBoxWrap .chBox,
  body.pageKango .chBoxWrap .chBox,
  body.pageKaigo #about .chBoxWrap .chBox,
  body.pageKaigo #chContact .chBoxWrap .chBox,
  body.pageKaigo .chBoxWrap .chBox{ font-size: 21px !important; }
}

/* ------------------------------------------------------------
   見出しまわりの上下リズムを統一する（ユーザー指示「全部上下の距離が違う」）。
   実測した崩れ＝見出しの上余白が section ごとに 0/56/70px とバラバラで、
   #chIns→#chDx→#chArea は padding が上下とも0のため、前セクションの内容に
   見出しが密着していた（実際にDX見出しの直上が0pxだった）。
   方針＝関係する全 section の上下 padding を同値(44px)に揃え、
   どの見出しも「前の内容から 44+44=88px」で始まるようにする。
   見出しの下は .chBoxWrap の次要素の margin-top を36pxに統一（元は30〜40px）。
   ※#chFlow だけ背景色(#F7FBFC)の帯を持つので、padding を0にはできない。
     全部同値にする方式ならこの帯も自然に見えるのでこの方法を採った。
   ------------------------------------------------------------ */
body.pageKango .chSubHero{ padding-top: 44px !important; padding-bottom: 44px !important; }
body.pageKango #chSvc,
body.pageKango #chFlow,
body.pageKango #chIns,
body.pageKango #chDx,
body.pageKango #chArea,
body.pageKango #about,
body.pageKango #chContact{ padding-top: 44px !important; }
body.pageKango #chSvc,
body.pageKango #chFlow,
body.pageKango #chIns,
body.pageKango #chDx,
body.pageKango #chArea,
body.pageKango #about{ padding-bottom: 44px !important; }
/* 見出し直下の間隔。.chBoxWrap 自身の margin-bottom(#aboutだけ26px)は
   隣接マージンの相殺で読みにくくなるので0にして、次要素側で一本化する。 */
body.pageKango .chBoxWrap{ margin-bottom: 0 !important; }
body.pageKango .chBoxWrap + *{ margin-top: 36px !important; }
/* 「私たちについて」だけ下が30pxになっていた。原因は #about .overview.first の
   `margin:30px 0 0 !important`（id込みで詳細度(1,2,0)）が、上の
   `body.pageKango .chBoxWrap + *`（(0,2,1)）に競り勝っていたため。
   idを含めて詳細度(1,3,0)にして揃える。 */
body.pageKango #about .overview.first{ margin-top: 36px !important; }

/* 訪問看護/介護の「こんなお悩みありませんか」導入部。
   以前は先頭セクション(.chSubHero)としてヘッダー分の上余白(132px)を持っていたが、
   上に.chHeroLPが付いて2番目のセクションになったため通常の余白に戻す。 */
.chSubHero{
  padding: 8px 20px 60px; text-align: center;
}
@media screen and (max-width: 767px){
  .chSubHero{ padding: 4px 20px 24px; }
}
.chSubHero__lead{
  max-width: 760px; margin: 22px auto 0; font-size: 16px; line-height: 2; color: var(--ch-sub);
  /* 中央揃えのため、最終行が数文字だけ残る泣き別れが起きていた
     （実測 kango=748/751/752/62px・kaigo=749/752/110px）。
     text-wrap:balance で各行長を揃えて解消する。中央揃えの見た目は維持できる。
     非対応ブラウザでは効かないだけで従来表示のまま＝安全に劣化する。
     .chSubHero__lead は kango と kaigo だけが使う部品（grepで確認済み）。 */
  text-wrap: balance;
}
.chPainList{
  list-style: none; margin: 34px auto 0; padding: 0; max-width: 820px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.chPainList li{
  background: #fff; border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 8px 20px rgba(20,80,110,.08); font-size: 14.5px; color: var(--ch-ink); line-height: 1.7;
  position: relative;
}
/* 🔴下2つは必ず body.pageKango にスコープすること。
   .chPainList は kaigo でも使っており、あちらは項目が「4件」＝2列で綺麗に埋まる。
   スコープ無しで :last-child を全幅にすると kaigo の4枚目まで全幅になって崩れる。 */
body.pageKango .chPainList li{
  /* セクションが text-align:center なので、そのままだと2行になったカードの
     2行目が中央寄せでガタつく。カード内は左揃えに戻す（.chDxList と同じ扱い）。 */
  text-align: left;
}
/* kangoのお悩みは5件＝2列だと最後の1枚が左に取り残されて余白が割れる。
   最後だけ2列ぶち抜きにして収まりを揃える（文言も一番長いので幅が生きる）。 */
body.pageKango .chPainList li:last-child{ grid-column: 1 / -1; }
@media screen and (max-width: 767px){
  body.pageKango .chPainList li:last-child{ grid-column: auto; }
}
.chPainList li::before{ content: "?"; color: var(--ch-page-accent, var(--ch-blue)); font-weight: 800; margin-right: 6px; }
@media screen and (max-width: 767px){ .chPainList{ grid-template-columns: 1fr; } }

.chSvcGrid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1080px; margin: 40px auto 0; padding: 0 20px;
}
.chSvcItem{
  background: #fff; border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 10px 26px rgba(20,80,110,.09); border: 1px solid rgba(0,0,0,.04);
}
.chSvcItem__num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 800;
  background: var(--ch-page-accent, var(--ch-blue)); color: #fff; margin-bottom: 12px;
}
/* アイコン＋番号のヘッダ行（2026-08-31追加）。
   アイコンの出典＝ユーザー支給 Downloads\388956.psd（16点セット）。
   .chSvcItem__head を持つ場合は番号単体の下余白は不要なので打ち消す。 */
.chSvcItem__head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.chSvcItem__head .chSvcItem__num{ margin-bottom: 0; flex: 0 0 auto; order: 2; }
.chSvcItem__ico{ width: 56px; height: 56px; flex: 0 0 auto; order: 1; }
.chSvcItem h3{ margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: var(--ch-ink); }
.chSvcItem p{ margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ch-sub); }
@media screen and (max-width: 1080px){ .chSvcGrid{ grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 640px){ .chSvcGrid{ grid-template-columns: 1fr; } }

.chFlowList{
  list-style: none; margin: 40px auto 0; padding: 0 20px; max-width: 760px;
  display: flex; flex-direction: column; gap: 0;
}
.chFlowList li{
  display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px dashed #d9dfe3;
}
.chFlowList li:last-child{ border-bottom: 0; }
.chFlowNum{
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  background: var(--ch-page-accent, var(--ch-blue)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.chFlowList h3{ margin: 4px 0 6px; font-size: 16px; font-weight: 800; color: var(--ch-ink); }
.chFlowList p{ margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ch-sub); }

.chInsGrid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1080px; margin: 40px auto 0; padding: 0 20px;
}
/* kaigo(ヘルパーステーション)はカード2枚のみのため専用の2列版。
   インラインstyleで幅だけ変えるとメディアクエリが効かずSPでも2列のまま窮屈になったため、
   専用クラスに切り出してブレークポイントを持たせる。 */
.chInsGrid--2col{ grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media screen and (max-width: 767px){
  .chInsGrid--2col{ grid-template-columns: 1fr; }
}
.chInsCard{
  background: #fff; border-radius: 18px; padding: 26px 24px;
  border-top: 5px solid var(--ch-page-accent, var(--ch-blue));
  box-shadow: 0 10px 26px rgba(20,80,110,.09);
}
/* カード見出しの上に置く線画SVGアイコン（2026-08-31追加）。
   stroke="currentColor" なので、この色指定だけでページのアクセント色に追従する。 */
.chInsCard__ico{
  display: block; width: 46px; height: 46px; margin: 0 0 12px;
  color: var(--ch-page-accent, var(--ch-blue));
}
.chInsCard__ico svg{ width: 100%; height: 100%; display: block; }
.chInsCard h3{ margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--ch-ink); }
.chInsCard p{ margin: 0 0 10px; font-size: 13px; line-height: 1.8; color: var(--ch-sub); }
.chInsCard p:last-child{ margin-bottom: 0; }
/* 🔴2026-09-01修正。修正前は `@media(max-width:1080px){ .chInsGrid{1fr} }` が
   `.chInsGrid--2col`（同詳細度・ソース順で前）に勝ってしまい、
   ①kaigoの2枚組が1081px以下で常に1列（2483行の意図が死んでいた）
   ②kangoの3枚組が1080pxでいきなり3列→1列に直落ち（.chSvcGridは3→2→1と段階的）
   という2つの崩れが出ていた。:not() で --2col を除外し、中間段(2列)を追加して解消。 */
@media screen and (max-width: 1080px){
  .chInsGrid:not(.chInsGrid--2col){ grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 640px){
  .chInsGrid:not(.chInsGrid--2col){ grid-template-columns: 1fr; }
}

.chAreaTags{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 760px; margin: 34px auto 0; padding: 0 20px;
}
.chAreaTags span{
  background: #fff; border: 1.5px solid var(--ch-page-accent, var(--ch-blue));
  color: var(--ch-page-accent, var(--ch-blue)); font-weight: 700; font-size: 13.5px;
  padding: 8px 20px; border-radius: 999px;
}

.chSubCta{
  display: block; max-width: 320px; margin: 44px auto 0; text-align: center;
  padding: 18px 26px; border-radius: 999px; font-weight: 800; font-size: 15px;
  /* 🔴default.cssの`a:link{color:#013c60}`は要素+疑似クラスで.chSubCta単体より
     詳細度が高く、!importantを付けないと文字色が紺色に負けていた（実測で確認）。
     Facebookボタン(chHeader__ig等)で既出の同じ問題への対処と同じ方式。 */
  color: #fff !important; background: var(--ch-page-accent, var(--ch-blue)); text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.14); transition: transform .2s ease, box-shadow .2s ease;
}
.chSubCta:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }

/* 医療DX推進の取り組みなど、質問形式ではない告知事項のリスト（chPainListの兄弟パーツ）。
   カードの角丸/影は :root の --ch-card-* トークンに揃え、先頭は「？」ではなく「✓」にする。 */
.chDxList{
  list-style: none; margin: 34px auto 0; padding: 0; max-width: 820px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.chDxList li{
  background: #fff; border-radius: var(--ch-card-radius); border: var(--ch-card-border);
  box-shadow: var(--ch-card-shadow); padding: 14px 20px 14px 38px;
  font-size: 13.5px; color: var(--ch-sub); line-height: 1.8; position: relative; text-align: left;
}
.chDxList li::before{
  content: "✓"; position: absolute; left: 16px; top: 14px;
  color: var(--ch-page-accent, var(--ch-blue)); font-weight: 800;
}

/* ページ別アクセントカラー切り替え（bodyに付与） */
/* 2026-09-16 ユーザー指示でカラー反転：訪問看護(kango)＝ピンク／ヘルパー(kaigo)＝青 */
body.pageKango{ --ch-page-accent: var(--ch-pink); }
body.pageKaigo{ --ch-page-accent: var(--ch-blue); }

/* ============================================================
   51. SP専用の固定下部バー（訪問看護／ヘルパーステーション／お問い合わせ）
       2026-08-24：レイアウト（電話アイコン＋小さいサービス名＋大きい電話番号）は
       ユーザー提供の参考画像（既存公式サイトwww.ookinawa.jpの実装）を踏襲。
       配色は「派手にしないで」との複数回の指摘を受け、ボタン全体を色で塗る
       方式をやめた。バー地色は白、各ボタンは白のまま据え置き、色は
       アイコン・電話番号・上端の細いアクセントラインだけに絞って主張を弱める。
       3列均等グリッド、PCでは非表示。線路(.railway-layer)より前面かつ
       ヘッダー(9800)より下に置く。
   ============================================================ */
.chFixBar{ display: none; }
@media screen and (max-width: 767px){
  .chFixBar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,.14);
  }
  .chFixBar__btn{
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 64px; padding: 6px 6px;
    min-width: 0;   /* 🔴grid item既定のmin-width:autoのままだとnowrapテキストの
                        実寸ぶん列が縮まず3等分からはみ出す（実測で確認・修正） */
    background: #fff;
    color: #3A3A45; text-decoration: none;
    border-right: 1px solid rgba(0,0,0,.07);
    border-top: 3px solid transparent;   /* 色は上端の細いラインだけで主張を抑える */
  }
  .chFixBar__btn:last-child{ border-right: none; }
  .chFixBar__btn--kango{ border-top-color: var(--ch-pink); }
  .chFixBar__btn--kaigo{ border-top-color: var(--ch-blue); }
  .chFixBar__btn--contact{ border-top-color: #2E8A85; justify-content: center; }
  .chFixBar__btn--kango .chFixBar__icon{ color: var(--ch-pink); }
  .chFixBar__btn--kango strong{ color: var(--ch-pink); }
  .chFixBar__btn--kaigo .chFixBar__icon{ color: var(--ch-blue); }
  .chFixBar__btn--kaigo strong{ color: var(--ch-blue); }
  .chFixBar__btn--contact strong{ color: #2E8A85; }
  .chFixBar__icon{ flex: none; }
  .chFixBar__text{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
  /* 🔴「正式名称で」の指示のため、89px幅では収まらない「訪問看護ステーションおおきな輪」
     （14文字）を省略せず出す。1行に収める代わりに2行折り返しを許可し、
     バーの高さを52→64pxへ拡張して収まるようにした（実測で折り返し2行に収まることを確認）。 */
  .chFixBar__text small{ font-size: 8.5px; font-weight: 600; white-space: normal; max-width: 100%; display: block; color: #6B6B76; }
  .chFixBar__text strong{ font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; margin-top: 2px; }
  .chFixBar__text--center{ align-items: center; justify-content: center; }
  .chFixBar__text--center strong{ font-size: 14px; white-space: nowrap; }
  /* バーの高さぶん本文末尾・フッターが隠れないように余白を確保
     （.chPagetopはposition:fixedではなく通常の行内リンクのため、
     yell-siteの参考パターンにあった「TOPボタンの押し上げ」は
     careheartの実装には該当せず不要と確認済み）。 */
  #wrapper{ padding-bottom: 64px; }
}

/* ============================================================
   52. SPヘッダーのアイコン（Instagram・LINE・ハンバーガー）の間隔を詰める
       ユーザー指示：「spのアイコン同士の幅せばめれ」。
       🔴実測で判明：679行目のSP用gap:10pxは、より後ろにある
       .chHeader__right{ gap:18px !important }（1803行目、メディアクエリなし）に
       詳細度は同じだが!important+ソース順で負けており、SPでも実際は18pxのまま
       効いていなかった。ソース順で後勝ちするようファイル末尾に!important付きで追加する。 */
@media screen and (max-width: 767px){
  .chHeader__right{ gap: 8px !important; }
}

/* ============================================================
   53. /about/（会社概要ページ）専用：ヒーローの無いページ用の簡易タイトル帯
       ヘッダーが position:fixed のため、ヒーローの無いページでは本文が
       ヘッダーの下に隠れる。帯に背景色を敷いてヘッダー分の高さを
       padding-top で確保し、隠れないようにする。
   ============================================================ */
/* 🔴2026-08-25：単色の青グラデーションバナーは、トップページの世界観
   （クリーム背景 #F7F5EB＋斜めストライプの手描き風バッジ .chBox）と
   トンマナが全く合っていないとユーザー指摘のため撤去。
   トップページの見出しと同じ .chBoxWrap / .chBox コンポーネントを
   そのまま流用し、背景も本文と同じクリームに統一する。 */
.chPageHero{
  background: #F7F5EB;
  padding: 132px 20px 40px;
  text-align: center;
}
@media screen and (max-width: 767px){
  .chPageHero{ padding: 92px 20px 24px; }
}

/* ============================================================
   54. トップページの「私たちについて」を会社概要ページ(/about/)への
       ティザーに縮小（旧・会社概要表+ごあいさつは/about/へ移設済み）。
   ============================================================ */
.chAboutTeaser__inner{
  max-width: 640px; margin: 0 auto; padding: 0 20px 72px; text-align: center;
}
.chAboutTeaser__logo{ width: 96px; height: auto; margin: 0 auto 24px; display: block; }
.chAboutTeaser__text{
  font-size: 15px; line-height: 1.9; color: var(--ch-ink, #23404f); margin: 0 0 32px;
}
/* 🔴実機SPで確認：z-indexで前面化しても、本文に背景が無いため文字の隙間から
   軌道の木・葉の装飾が透けて読みにくかった。ごあいさつ(.greetingTextbox)と
   同じ「背後に白系の箱を敷く」手法で保護する（SPのみ。PCは余白があり装飾が
   本文にかからないため不要）。 */
@media screen and (max-width: 767px){
  .chAboutTeaser__logo, .chAboutTeaser__text{
    position: relative; background: rgba(255,255,255,.9); border-radius: 18px;
  }
  .chAboutTeaser__logo{ padding: 16px; }
  .chAboutTeaser__text{ padding: 20px; box-shadow: 0 8px 22px rgba(11,49,73,.1); }
}

/* ============================================================
   55. /recruit/（採用情報ページ）
   ============================================================ */
#chRecruitLead{ padding: 56px 20px 8px; }
.chRecruitLead__inner{
  max-width: 760px; margin: 0 auto; text-align: center;
  font-size: 15px; line-height: 1.9; color: var(--ch-ink, #23404f);
}

#chJobs{ padding: 56px 0 16px; background: #FBF6F2; }
.chJobs__inner{ max-width: 880px; margin: 36px auto 0; padding: 0 20px; }

/* 🔴2026-08-25：3職種を1つの連結リストに変更（訪問看護師/介護士/リハビリ職が
   バラバラの独立ブロックに見えるとの指摘のため）。行の境界線だけで区切り、
   全体をひとつのカードで囲んで「並んでいる」印象にする。 */
.chJobList{
  background: #fff; border-radius: var(--ch-card-radius); overflow: hidden;
  border: var(--ch-card-border); box-shadow: var(--ch-card-shadow);
}
.chJobRow{ border-bottom: 1px solid rgba(0,0,0,.08); }
.chJobRow:last-child{ border-bottom: none; }

.chJobRow__head{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 22px 24px; text-align: left;
}
.chJobRow.is-open .chJobRow__head{ background: #F5FAFD; }
.chJobRow__name{
  font-size: 18px; font-weight: 800; color: var(--ch-ink, #23404f);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.chJobRow__name small{ font-size: 12px; font-weight: 600; color: var(--ch-sub, #5d7686); }
.chJobRow__head i{ width: 14px; height: 14px; flex: none; position: relative; }
.chJobRow__head i::before, .chJobRow__head i::after{
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ch-blue);
  transform: translate(-50%,-50%); transition: transform .2s ease;
}
.chJobRow__head i::before{ width: 14px; height: 2px; }
.chJobRow__head i::after{ width: 2px; height: 14px; }
.chJobRow.is-open .chJobRow__head i::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

.chJobRow__body{
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.chJobRow.is-open .chJobRow__body{ max-height: 3000px; }

.chJobTabs{ display: flex; gap: 10px; margin: 0 24px 18px; }
.chJobTab{
  flex: 1; appearance: none; border: 2px solid var(--ch-blue); background: #fff;
  color: var(--ch-blue); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 12px 10px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s;
}
.chJobTab.is-active{ background: var(--ch-blue); color: #fff; }
.chJobTab:hover{ opacity: .85; }

.chJobPanel{ display: none; padding: 0 24px 28px; }
.chJobPanel.is-active{ display: block; }

.chJobTable{ padding: 4px 0 0; margin: 0; }
.chJobTable dt{
  font-weight: 700; color: var(--ch-blue); font-size: 13px; letter-spacing: .03em;
  margin: 16px 0 4px;
}
.chJobTable dt:first-child{ margin-top: 4px; }
.chJobTable dd{
  margin: 0 0 4px; font-size: 14.5px; line-height: 1.8; color: var(--ch-ink, #23404f);
  word-break: keep-all; overflow-wrap: break-word;
}
.chJobPanel .chSubCta{ margin: 20px 0 0; max-width: 280px; }

.chJobComingSoon{
  background: #FBF6F2; border: 1px dashed rgba(230,90,120,.35); border-radius: 14px;
  padding: 24px 20px; text-align: center;
}
.chJobComingSoon p{ margin: 0 0 16px; font-size: 14px; line-height: 1.8; color: var(--ch-ink, #23404f); }
.chJobComingSoon .chSubCta{ margin: 0 auto; max-width: 280px; }

@media screen and (max-width: 767px){
  .chJobRow__head{ padding: 18px; }
  .chJobRow__name{ font-size: 16px; }
  .chJobTabs{ margin: 0 18px 16px; }
  .chJobPanel{ padding: 0 18px 22px; }
  .chJobTab{ font-size: 13px; padding: 10px 6px; }
}

#chFlow{ padding: 56px 20px; background: #f7fbfc; }
.chFlow__list{
  max-width: 880px; margin: 36px auto 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.chFlow__list li{
  background: #fff; border-radius: var(--ch-card-radius); padding: 28px 20px; text-align: center;
  border: var(--ch-card-border); box-shadow: var(--ch-card-shadow);
}
.chFlow__num{
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--ch-blue); color: #fff;
  font-weight: 800; font-size: 16px;
}
.chFlow__label{ display: block; font-weight: 800; font-size: 15px; color: var(--ch-ink, #23404f); margin: 0 0 8px; }
.chFlow__list p{ margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ch-sub, #5d7686); }
@media screen and (max-width: 767px){
  .chFlow__list{ grid-template-columns: 1fr; gap: 16px; }
}

#chEntry{ padding: 56px 20px 72px; }
.chEntryForm{
  max-width: 720px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  background: #fff; border-radius: var(--ch-card-radius); padding: 32px;
  border: var(--ch-card-border); box-shadow: var(--ch-card-shadow);
}
.chEntryForm__row{ display: flex; flex-direction: column; gap: 6px; }
.chEntryForm__row--full{ grid-column: 1 / -1; }
.chEntryForm label{ font-size: 13.5px; font-weight: 700; color: var(--ch-ink, #23404f); }
.chEntryForm__req{
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--ch-pink); border-radius: 999px; padding: 2px 8px; vertical-align: middle;
}
.chEntryForm input, .chEntryForm select, .chEntryForm textarea{
  border: 1px solid rgba(0,0,0,.15); border-radius: 10px; padding: 11px 14px;
  font-size: 14px; font-family: inherit; color: var(--ch-ink, #23404f); background: #fff;
}
.chEntryForm input:focus, .chEntryForm select:focus, .chEntryForm textarea:focus{
  outline: none; border-color: var(--ch-blue);
}
.chEntryForm__submit{
  grid-column: 1 / -1; appearance: none; border: none; cursor: pointer;
  background: var(--ch-blue); color: #fff; font-weight: 800; font-size: 15px;
  padding: 16px; border-radius: 999px; margin-top: 8px; transition: opacity .2s;
}
.chEntryForm__submit:hover{ opacity: .88; }
.chEntryForm__note{
  grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ch-sub, #5d7686); text-align: center;
}
.chEntryForm__altNote{
  grid-column: 1 / -1; margin: 8px 0 0; font-size: 12.5px; color: var(--ch-sub, #5d7686); text-align: center;
}
.chEntryForm__altNote a{ color: var(--ch-blue); text-decoration: underline; }
@media screen and (max-width: 767px){
  .chEntryForm{ grid-template-columns: 1fr; padding: 24px 20px; }
}

/* ============================================================
   56. /about/：ごあいさつ（実写真）＋サービスの特徴（既存サイトの実データ・実画像）
       ユーザー指示「代表挨拶は上に」「既存サイトにある写真を適用」「コンテンツ量が少ない」に対応。
       写真・イラストは既存サイト www.ookinawa.jp/about.php から実データを移設（自社の既存資産）。
   ============================================================ */
#chAboutGreeting{ padding: 56px 20px; }
.chAboutGreeting__inner{
  /* 🔴align-items:centerだと写真(高さ約210px)が本文(高さ約300px超)の中央に
     来るため、見出し「代表 大城舞」から写真が浮いて下寄りに見えた。
     見出しと写真の上端を揃える一般的なプロフィール配置に変更。 */
  max-width: 880px; margin: 36px auto 0; display: flex; gap: 40px; align-items: flex-start;
}
.chAboutGreeting__photo{
  flex: 0 0 280px; margin: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 28px rgba(11,49,73,.14);
}
.chAboutGreeting__photo img{ display: block; width: 100%; height: auto; }
.chAboutGreeting__body h3{
  font-size: 20px; font-weight: 800; color: var(--ch-ink, #23404f); margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.chAboutGreeting__body h3 .position{
  font-size: 12px; font-weight: 700; color: #fff; background: var(--ch-blue);
  border-radius: 999px; padding: 4px 12px;
}
.chAboutGreeting__body h3 .color01{ color: var(--ch-pink); }
.chAboutGreeting__body h3 .name{ font-size: 12px; font-weight: 700; color: var(--ch-sub, #5d7686); }
.chAboutGreeting__body p{ font-size: 14.5px; line-height: 1.95; color: var(--ch-ink, #23404f); margin: 0; }
@media screen and (max-width: 767px){
  .chAboutGreeting__inner{ flex-direction: column; gap: 24px; }
  .chAboutGreeting__photo{ flex: none; width: 220px; margin: 0 auto; }
}

#chAboutFeatures{ padding: 40px 20px 56px; background: #F5FAFD; }
.chAboutFeatures__grid{
  max-width: 1040px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.chAboutFeatures__card{
  background: #fff; border-radius: var(--ch-card-radius); padding: 28px 22px; text-align: center;
  border: var(--ch-card-border); box-shadow: var(--ch-card-shadow);
}
.chAboutFeatures__card img{ width: 140px; height: auto; margin: 0 auto 16px; display: block; }
.chAboutFeatures__card h3{
  font-size: 16px; font-weight: 800; color: var(--ch-ink, #23404f); margin: 0 0 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.chAboutFeatures__card h3 span{ font-size: 11.5px; font-weight: 600; color: var(--ch-sub, #5d7686); }
.chAboutFeatures__card p{ font-size: 13px; line-height: 1.8; color: var(--ch-ink, #23404f); margin: 0; }
@media screen and (max-width: 767px){
  .chAboutFeatures__grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   57. デザインレビュー指摘の反映（2026-08-25）
       ナビにaria-current="page"はHTML側に付与済みだったが対応CSSが無く、
       現在地が視覚的にわからなかった。
   ============================================================ */
.chNav a[aria-current="page"]{
  color: var(--ch-blue); border-bottom-color: var(--ch-blue); font-weight: 700;
}
#gNav02 ul.menu li a[aria-current="page"]{ color: var(--ch-blue) !important; }
#gNav02 ul.menu li a[aria-current="page"]::after{
  content: "●"; color: var(--ch-blue); margin-left: 6px; font-size: 9px; vertical-align: middle;
}
.chFooter__nav a[aria-current="page"]{ font-weight: 700; text-decoration: underline; }

/* ============================================================
   58. 訪問看護 料金シミュレーターへのCTA（2026-09-30）
       「ご利用いただける方」の緊急連絡PDFリンクの下に置く。
       直後の #chDx は padding-top 44px を持つので下マージンは不要。
   ============================================================ */
body.pageKango .chSimCta{ max-width: 360px; margin-top: 32px; }