/*
Theme Name: Yukari Care
Theme URI: https://example.com/
Author: Your Studio
Author URI: https://example.com/
Description: 特別養護老人ホーム・ショートステイ施設向けのオリジナルWordPressテーマです。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yukari-care
*/

/* ============================================================
   ゆかり○○ TOPページ スタイルシート
   ------------------------------------------------------------
   クラス名は「care-」をプレフィックスにしたBEM風の命名です。
   care-ブロック名__要素名--修飾子 という構造にしているので、
   他の施設サイトのページを作る際もこのCSSをベースに
   ブロック単位でそのまま流用できます。
   ※ WordPressの管理画面「メニュー」機能から出力される
     wp_nav_menu() のマークアップに合わせて、
     ナビゲーション部分のクラス名は .care-nav__list（ul）/
     .care-nav__list a（リンク）という構成にしています。
============================================================ */


/* ------------------------------------------------------------
   1. デザイントークン（色・フォント・角丸・影・余白などの基準値）
   ------------------------------------------------------------
   ここで色やフォントを一括管理しているので、
   ブランドカラーを変えたい場合はこの:root内の値だけ
   書き換えればサイト全体に反映されます。
------------------------------------------------------------ */
:root{
  /* 背景色（生成り・ベージュ系） */
  --care-color-bg:        #fff; /* ページ全体の基本背景 */
  --care-color-bg-soft:   #E8E0DC; /* セクションの背景（少し濃いベージュ） */

  /* ブランドカラー（ダスティローズ系） */ 
  --care-color-rose:      #FEFAFB; /* メインのローズカラー */
  --care-color-rose-deep: #C9748A; /* ボタンや見出しの濃いローズ */
  --care-color-rose-pale: #FCE8EF; /* アイコン背景などの淡いローズ */

  /* アクセントカラー（ゴールド系。数字・ラベルなどの差し色） */
  --care-color-gold:      #B8963E;
  --care-color-gold-deep: #B8963E;

  /* テキストカラー */
  --care-color-text:      #2C2416; /* 基本の本文色（こげ茶） */
  --care-color-text-soft: #7A6B62; /* 補足テキストなど、少し薄い色 */
  --care-color-white:     #FFFFFF; 

  /* フォント */
  --care-font-display: "Shippori Mincho", serif;   /* 見出し用：明朝体で温かみを演出 */
  --care-font-body: "Noto Sans JP", sans-serif;     /* 本文用：可読性重視のゴシック体 */

  /* 角丸の基準値（カード・ボタンなどで使い回す） */
  --care-radius-sm: 6px;
  --care-radius-md: 16px;
  --care-radius-lg: 32px;

  /* 影の基準値 */
  --care-shadow-soft: 0 12px 32px rgba(74,59,53,0.08);
  --care-shadow-card: 0 8px 24px rgba(74,59,53,0.10);

  /* レイアウトの基準値 */
  --care-container-width: 1120px;              /* コンテンツの最大幅 */
  --care-section-pad: clamp(56px, 8vw, 120px); /* セクションの上下余白（画面幅に応じて可変） */
}

/* ------------------------------------------------------------
   2. リセット・基本設定
   ------------------------------------------------------------ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; } /* ページ内リンクをスムーズスクロールに */
body{
  font-family:var(--care-font-body);
  color:var(--care-color-text);
  background:var(--care-color-bg);
  line-height:1.85; /* 高齢者施設サイトなので読みやすさ重視で広めの行間 */
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

/* WP標準のalignleft/alignright/screen-reader-textなどの最低限のフォールバック */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* アクセシビリティ：動きに敏感な人向けに、アニメーションを実質無効化 */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}


/* ------------------------------------------------------------
   3. レイアウト用の共通クラス
   ------------------------------------------------------------
   ページ内のどのセクションでも使う「入れ物」の役割のクラスです。
------------------------------------------------------------ */

/* 中央寄せのコンテンツ幅を制御するコンテナ */
.care-container{
  max-width:var(--care-container-width);
  margin-inline:auto;
  padding-inline:24px;
}

/* セクション共通の上下余白・装飾用の基準 */
.care-section{
  padding-block:var(--care-section-pad);
  position:relative;
  overflow:hidden; /* 背景の光の円（care-glow）がはみ出さないように */
}
.care-section--soft{ background:var(--care-color-rose); } /* 背景を少し変えたいセクション用 */
.care-section--rose{ background:var(--care-color-rose); color:var(--care-color-white); } /* ローズ背景の強調セクション用（採用バナーなど） */
.care-section--rose-deep{ background:var(--care-color-rose-deep); color:var(--care-color-white); } /* 濃いピンク背景の強調セクション用（料金表・採用バナーなど） */
.care-section--rose-pale{ background:var(--care-color-rose-pale); } /* 薄いピンク背景セクション用（採用ページのJOIN USなど） */

/* 光の円モチーフ：コピーの「自然の光と温もりに包まれた」を象徴する装飾。
   セクションの角に配置して、やわらかい雰囲気を演出する */
.care-glow{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  filter:blur(2px);
  pointer-events:none; /* クリック操作の邪魔をしないように */
  z-index:0;
}
.care-glow--rose{
  background:radial-gradient(circle at 30% 30%, rgba(216,138,152,0.35), rgba(216,138,152,0) 70%);
}

/* 円が重なり合う背景モチーフ（特徴／サービス／採用セクション角に使用）。
   ぼかしのない単色の円を2つ、少しずらして重ねる */
.care-glow-circle{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.care-glow-circle--light{ background:rgba(216,138,152,0.22); }
.care-glow-circle--dark{ background:rgba(181,103,122,0.32); }
.care-glow-circle--white-soft{ background:rgba(255,255,255,0.14); }
.care-glow-circle--white-strong{ background:rgba(255,255,255,0.22); }

/* セクション見出しの上に付ける小さなラベル（例：「◆ Our Features ───」） */
.care-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.28em; /* 英字ラベルを広めの字間にして高級感を出す */
  color:var(--care-color-gold-deep);
  text-transform:uppercase;
  margin-bottom:18px;
}
.care-eyebrow::before{
  content:"";
  width:8px; height:8px;
  flex-shrink:0;
  background:var(--care-color-gold-deep);
  transform:rotate(45deg);
}
.care-eyebrow::after{
  content:"";
  width:26px; height:1px;
  background:var(--care-color-gold-deep);
}
.care-section--rose .care-eyebrow,
.care-section--rose-deep .care-eyebrow{ color:var(--care-color-white); }
.care-section--rose .care-eyebrow::before,
.care-section--rose .care-eyebrow::after,
.care-section--rose-deep .care-eyebrow::before,
.care-section--rose-deep .care-eyebrow::after{ background:var(--care-color-white); }
.care-section--rose .care-title-divider span:last-child,
.care-section--rose-deep .care-title-divider span:last-child{ background:rgba(255,255,255,0.85); }

/* 中央寄せのセクション用ラベル（例：CONTACTセクション）。線・菱形を左右対称に配置 */
.care-eyebrow-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.28em;
  color:var(--care-color-gold-deep);
  text-transform:uppercase;
  margin-bottom:18px;
}
.care-eyebrow-center__line{ flex:1; max-width:80px; height:1px; background:var(--care-color-gold-deep); }
.care-eyebrow-center__diamond{ width:8px; height:8px; background:var(--care-color-gold-deep); transform:rotate(45deg); flex-shrink:0; }

/* セクション間の区切り線（中央に菱形） */
.care-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:8px;
}
.care-divider::before,
.care-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(74,59,53,0.14);
  max-width:560px;
}
.care-divider__diamond{
  width:8px; height:8px;
  margin-inline:18px;
  background:var(--care-color-gold-deep);
  transform:rotate(45deg);
  flex-shrink:0;
}

/* 見出し（h2, h3などに付与） */
.care-heading{
  font-family:var(--care-font-display);
  font-weight:700;
  line-height:1.5;
  color:var(--care-color-text);
  letter-spacing:0.02em;
}
.care-heading--xl{ font-size:clamp(28px, 4vw, 44px); } /* セクションの大見出し */
.care-heading--lg{ font-size: clamp(22px, 2.8vw, 27px);}
.care-heading--md{ font-size:clamp(20px, 2.4vw, 24px); }
.care-section--rose .care-heading,
.care-section--rose-deep .care-heading{ color:var(--care-color-white); }

/* リード文（見出し下の補足説明） */
.care-lede{
  color:var(--care-color-text-soft);
  font-size:17px;
  max-width:640px;
}
.care-section--rose .care-lede,
.care-section--rose-deep .care-lede{ color:rgba(255,255,255,0.9); }

/* セクション見出しをまとめるブロック（中央寄せがデフォルト） */
.care-section-head{
  text-align:center;
  max-width:680px;
  margin-inline:auto;
  margin-bottom:56px;
  position:relative;
  z-index:1; /* care-glowより手前に表示 */
}
.care-section-head--left{ text-align:left; margin-inline:0; } /* アクセスセクションなど左寄せにしたい時用 */

/* サービスセクションの見出し（線＋ラベル＋大見出しの中央寄せ） */
.care-section-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:14px;
}
.care-section-kicker span{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.28em;
  color:var(--care-color-gold-deep);
}
.care-section-kicker::before,
.care-section-kicker::after{
  content:"";
  width:60px; height:1px;
  background:var(--care-color-gold-deep);
}


/* ------------------------------------------------------------
   4. ボタン
   ------------------------------------------------------------
   全ページ共通で使うボタンパーツ。
   care-btn に修飾子クラスを組み合わせて色違いを表現する。
------------------------------------------------------------ */
.care-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 34px;
  border-radius:999px; /* ピル型ボタン */
  font-size:16.5px;
  font-weight:700;
  letter-spacing:0.04em;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.care-btn:hover{ transform:translateY(-2px); } /* ホバーで少し浮き上がる動き */
.care-btn:focus-visible{ outline:3px solid var(--care-color-gold); outline-offset:3px; } /* キーボード操作時のフォーカス表示 */

/* 塗りつぶし（主要アクション用） */
.care-btn--primary{
  background:var(--care-color-rose-deep);
  color:var(--care-color-white);
}
.care-btn--primary:hover{ background:#A45F71; background:color-mix(in srgb, var(--care-color-rose-deep) 82%, black); }

/* 枠線のみ（副次的なアクション用） */
.care-btn--outline{
  background:var(--care-color-white);
  border-color:var(--care-color-rose-deep);
  color:var(--care-color-rose-deep);
}
.care-btn--outline:hover{ background:var(--care-color-rose-deep); color:var(--care-color-white); }

/* 白背景ボタン（ローズ背景セクションの上で使う） */
.care-btn--ghost-white{
  background:var(--care-color-white);
  color:var(--care-color-rose-deep);
}
.care-btn--ghost-white:hover{ background:var(--care-color-gold); color:var(--care-color-white); }

/* テキストリンク型（カード内の「詳しく見る」など） */
.care-btn--text{
  padding:0;
  border-radius:0;
  color:var(--care-color-rose-deep);
  border-bottom:1px solid currentColor;
  font-size:16px;
}
.care-btn--text:hover{ transform:none; } /* カード全体クリック化に伴い、テキストリンク自体が浮き上がる動きは無効化（オーバーレイがずれてホバーが暴れるのを防ぐ） */


/* ------------------------------------------------------------
   5. ヘッダー（2段構成）
   ------------------------------------------------------------
   1段目：ロゴ＋電話番号＋お問い合わせボタン
   2段目：ナビゲーションメニュー（wp_nav_menu()の出力）
   スマホ幅ではメニューをハンバーガーで開閉する。
------------------------------------------------------------ */
/* --- 最上部の帯 --- */
.care-header__topband{
  background:var(--care-color-gold-deep);
  color:var(--care-color-white);
  font-size:15px;
  letter-spacing:0.02em;
}

.care-header{
  background:var(--care-color-white);
  border-bottom:1px solid rgba(74,59,53,0.08);
}

/* --- 1段目：ロゴ行 --- */
.care-header__top{
  border-bottom:1px solid rgba(74,59,53,0.06); /* 1段目と2段目の区切り線 */
}
.care-header__top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
  gap:24px;
}
.care-header__brand{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.care-header__brand-name{
  font-family:var(--care-font-display);
  font-size:25px;
  font-weight:700;
  color:var(--care-color-rose-deep);
}
.care-header__brand-tag{
  font-size:14.5px;
  color:var(--care-color-text-soft);
  letter-spacing:0.04em;
}
.care-header__actions{
  display:flex;
  align-items:center;
  gap:18px;
}
.care-header__tel{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.care-header__tel-icon{ width:40px; height:40px; color:var(--care-color-rose-deep); flex-shrink:0; }
.care-header__tel-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.3;
  text-align:left;
}
.care-header__tel-label{ font-size:14px; color:var(--care-color-text-soft); letter-spacing:0.06em; }
.care-header__tel-number{
  font-family:var(--care-font-display);
  font-size:25px;
  font-weight:700;
  color:var(--care-color-rose-deep);
}

/* --- 2段目：ナビゲーション行の背景 --- */
.care-header__bottom{
  background:#F5F5F3;
}

/* ハンバーガーメニューボタン（PC幅では非表示） */
.care-nav-toggle{
  display:none;
  background:none;
  border:none;
  width:32px; height:24px;
  position:relative;
}
.care-nav-toggle span,
.care-nav-toggle span::before,
.care-nav-toggle span::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px;
  background:var(--care-color-text);
  transition:transform .25s ease, opacity .25s ease;
}
.care-nav-toggle span{ top:11px; }
.care-nav-toggle span::before{ top:-8px; }
.care-nav-toggle span::after{ top:8px; }
/* メニューが開いている時は「×」の形にする（JS側でis-openを付与） */
.care-nav-toggle.is-open span{ background:transparent; }
.care-nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
.care-nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }

/* --- 2段目：ナビゲーション行 --- */
.care-header__bottom-bar{
  padding-block:0;
}
/* nav要素自体（モバイル時の開閉アニメーションの対象） */
.care-nav{
  display:block;
}
/* wp_nav_menu() が出力する<ul class="care-nav__list">（PCでは横並び） */
.care-nav__list{
  display:flex;
  align-items:center;
  justify-content:center; /* メニューをまとめて中央寄せ */
  gap:36px;
  flex-wrap:wrap;
  padding-block:14px;
  list-style:none;
}
.care-nav__list li{ list-style:none; }
.care-nav__list a{
  font-size:16.5px;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
  display:inline-block;
}
.care-nav__list a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--care-color-rose-deep);
  transition:width .25s ease;
}
.care-nav__list a:hover::after,
.care-nav__list .current-menu-item > a::after{ width:100%; } /* 現在表示中のページのメニューにも下線 */


/* ------------------------------------------------------------
   6. ヒーローセクション（ファーストビュー）
   ------------------------------------------------------------ */
.care-hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
/* 右側に全面ブリードで敷く写真 */
.care-hero__media {
    position: absolute;
    top: 0;
    right: -90px;
    bottom: 0;
}
.care-hero__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.care-hero__media:hover img{ transform:scale(1.04); }

/* 左側、写真に少し重なるテキストカード */
.care-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  padding-block:64px;
}
.care-hero__card{
  background:rgba(255,255,255,0.95);
  max-width:520px;
  padding:24px 0;
  margin-bottom: 24px;
}
.care-hero__title{
  font-family:var(--care-font-display);
  font-size:clamp(28px, 3.6vw, 32px);
  font-weight:700;
  line: height 2px;;
  margin-bottom:22px;
}
/* 見出し下に添える2色（ゴールド＋ローズ）の短いダッシュ */
.care-title-divider{
  display:flex;
  gap:6px;
  margin: 24px 0 36px;
}
.care-section-head .care-title-divider{ justify-content:center; margin-top:14px; }
.care-section-head--left .care-title-divider{ justify-content:flex-start; }
.care-title-divider span{ display:block; height:3px; border-radius:2px; }
.care-title-divider span:first-child{ width:44px; background:var(--care-color-gold); }
.care-title-divider span:last-child{ width:20px; background:var(--care-color-rose-deep); }
.care-hero__desc{
  color:var(--care-color-text-soft);
  font-size:17px;
  line-height:1.9;
  margin-bottom:32px;
  max-width:420px;
}
.care-hero__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}


/* ------------------------------------------------------------
   7. 特徴セクション（3つの特徴カード）
   ------------------------------------------------------------ */
.care-feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative;
  z-index:1;
}
.care-feature-card{
  background:var(--care-color-white);
  border-top:3px solid var(--care-color-gold);
  border-right:1px solid rgba(74,59,53,0.12);
  border-bottom:1px solid rgba(74,59,53,0.12);
  border-left:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-sm);
  padding:36px 30px;
  position:relative;
  z-index:0; /* 明示的なz-indexで新しいスタッキングコンテキストを作り、背景数字が本文の下に来るようにする */
  overflow:hidden;
}
.care-feature-card__num{
  position:absolute;
  top:8px; right:20px;
  font-family:var(--care-font-display);
  font-size:64px;
  font-weight:700;
  color:var(--care-color-rose-pale);
  line-height:1;
  z-index:-1;
}
.care-feature-card__icon{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}
.care-feature-card__title{
  font-family:var(--care-font-display);
  font-size:19.5px;
  font-weight:700;
  margin-bottom:14px;
  line-height:1.6;
}
.care-feature-card__desc{
  font-size:16.5px;
  color:var(--care-color-text-soft);
}


/* ------------------------------------------------------------
   8. 施設紹介・理念セクション
   ------------------------------------------------------------ */
.care-about__grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr; /* 左：文章／右：写真 */
  gap:64px;
  align-items:start; /* 右側の写真ブロックを見出しの上端に揃える */
}
.care-about__lead{
  border-left:3px solid var(--care-color-gold);
  padding-left:20px;
  margin-bottom:28px;
}
.care-about__body p{
  color:var(--care-color-text-soft);
  font-size:17px;
  margin-bottom:28px;
}
.care-about__meta{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  margin-bottom:28px;
  border:1px solid rgba(74,59,53,0.12);
  width:fit-content;
}
.care-about__meta-year{
  font-family:var(--care-font-display);
  font-size:25px;
  font-weight:700;
  color:var(--care-color-rose-deep);
}
.care-about__meta-label{ font-size:15px; color:var(--care-color-text-soft); }

/* 写真を大小2枚組み合わせたレイアウト */
.care-about__media{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px;
}
.care-about__media img{
  border-radius:var(--care-radius-md);
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(74,59,53,0.12);
}
.care-about__media-tall{ aspect-ratio:3/4.4; }
.care-about__media-col{ display:flex; flex-direction:column; gap:16px; }
.care-about__media-short{ aspect-ratio:3/2; }

/* 「開設2017年」バッジ（写真列の下に配置） */
.care-about__badge{
  border:1px solid var(--care-color-gold);
  background:var(--care-color-bg-soft);
  border-radius:var(--care-radius-md);
  padding:20px 22px;
}
.care-about__badge-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15.5px;
  font-weight:700;
  color:var(--care-color-gold-deep);
  margin-bottom:8px;
}
.care-about__badge-eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--care-color-gold-deep);
  transform:rotate(45deg);
  flex-shrink:0;
}
.care-about__badge-text{ font-size:16px; color:var(--care-color-text-soft); line-height:1.7; }


/* ------------------------------------------------------------
   9. サービスセクション（特養／ショートステイのカード）
   ------------------------------------------------------------ */
.care-service-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
  position:relative;
  z-index:1;
}
.care-service-grid--single{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
.care-service-card{
  position:relative;
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  overflow:hidden;
  border:1px solid rgba(74,59,53,0.12);
  display:flex;
  flex-direction:column;
}
.care-service-card .care-btn--text::after{ content:''; position:absolute; inset:0; } /* カード全体をクリック可能にするオーバーレイ */
.care-service-card__media{ aspect-ratio:16/10; position:relative; }
.care-service-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.care-service-card:hover .care-service-card__media img{ transform:scale(1.05); }
.care-service-card__badge{
  position:absolute; top:16px; left:16px;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--care-color-rose-deep);
  color:var(--care-color-white);
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:16.5px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--care-color-white);
}
.care-service-card__body{ padding:28px 26px 30px; }
.care-service-card__eyebrow{
  font-size:14.5px;
  letter-spacing:0.12em;
  color:var(--care-color-gold-deep);
  font-weight:700;
  margin-bottom:8px;
  display:block;
}
.care-service-card__title{
  font-family:var(--care-font-display);
  font-size:21px;
  font-weight:700;
  margin-bottom:16px;
}
.care-service-card__specs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.care-service-card__spec{
  font-size:15px;
  color:var(--care-color-text-soft);
  background:var(--care-color-bg-soft);
  padding:6px 12px;
  border-radius:999px;
}


/* ------------------------------------------------------------
   10. ブログ・お知らせセクション
   ------------------------------------------------------------
   front-page.php 側で WP_Query を使い、直近3件の投稿を
   動的に出力します。以下は投稿がない場合や画像がない場合の
   見た目も含めたスタイルです。
------------------------------------------------------------ */
.care-blog-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:44px;
  flex-wrap:wrap;
  gap:20px;
}
.care-blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.care-blog-card{
  position:relative;
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  overflow:hidden;
  border:1px solid rgba(74,59,53,0.12);
  transition:transform .25s ease;
}
.care-blog-card:hover{ transform:translateY(-4px); }
.care-blog-card__media{ display:block; aspect-ratio:16/11; background:var(--care-color-bg-soft); overflow:hidden; }
.care-blog-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.care-blog-card:hover .care-blog-card__media img{ transform:scale(1.05); }
.care-blog-card__body{ padding:22px 22px 26px; }
.care-blog-card__meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:15px;
  color:var(--care-color-text-soft);
}
.care-blog-card__cat{
  color:var(--care-color-rose-deep);
  font-weight:700;
  background:var(--care-color-rose-pale);
  padding:3px 10px;
  border-radius:999px;
}
.care-blog-card__title{
  font-size:17px;
  font-weight:500;
  line-height:1.7;
}
.care-blog-card__title a:hover{ color:var(--care-color-rose-deep); }
.care-blog-card__title a::after{ content:''; position:absolute; inset:0; } /* カード全体をクリック可能にするオーバーレイ */
.care-blog-empty{
  color:var(--care-color-text-soft);
  font-size:16.5px;
  text-align:center;
  padding:40px 0;
}

/* ------------------------------------------------------------
   10-2. ブログ個別記事ページ（single.php）
   ------------------------------------------------------------ */
.care-article{ max-width:760px; margin-inline:auto; }
.care-article__meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-size:15.5px;
  color:var(--care-color-text-soft);
}
.care-article__cat{
  color:var(--care-color-rose-deep);
  font-weight:700;
  background:var(--care-color-rose-pale);
  padding:3px 12px;
  border-radius:999px;
}
.care-article__thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--care-radius-md);
  overflow:hidden;
  margin-bottom:36px;
  background:var(--care-color-bg-soft);
}
.care-article__thumb img{ width:100%; height:100%; object-fit:cover; }
.care-article__body{ font-size:17px; line-height:1.95; color:var(--care-color-text); }
.care-article__body p{ margin-bottom:1.6em; }
.care-article__body h2{
  font-family:var(--care-font-display);
  font-size:23px;
  font-weight:700;
  margin:1.6em 0 0.8em;
}
.care-article__body h3{
  font-family:var(--care-font-display);
  font-size:19.5px;
  font-weight:700;
  margin:1.4em 0 0.7em;
}
.care-article__body img{ border-radius:var(--care-radius-md); margin:1.2em 0; }
.care-article__body ul, .care-article__body ol{ margin:0 0 1.6em 1.4em; }
.care-article__body li{ margin-bottom:0.5em; }
.care-article__body blockquote{
  border-left:4px solid var(--care-color-rose);
  padding:4px 0 4px 20px;
  color:var(--care-color-text-soft);
  margin:1.6em 0;
}
.care-article__body a{ color:var(--care-color-rose-deep); text-decoration:underline; }

.care-post-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid rgba(74,59,53,0.12);
}
.care-post-nav__link{
  font-size:16px;
  color:var(--care-color-text-soft);
  max-width:45%;
}
.care-post-nav__link:hover{ color:var(--care-color-rose-deep); }
.care-post-nav__link--next{ text-align:right; margin-left:auto; }
.care-article__back{
  display:inline-block;
  margin-top:32px;
  font-size:16px;
  color:var(--care-color-text-soft);
}
.care-article__back:hover{ color:var(--care-color-rose-deep); }


/* ------------------------------------------------------------
   11. 採用バナーセクション
   ------------------------------------------------------------ */
   #recruit{background-color:var(--care-color-rose-deep) ;}
    #recruit .care-eyebrow{color:var(--care-color-bg) ;}
    #recruit  .care-title-divider span:first-child {
    background: var(--care-color-bg);
}
#recruit .care-eyebrow::before {
    background: var(--care-color-bg);
}
#recruit .care-title-divider span:last-child {
    width: 20px;
    background: var(--care-color-bg);
}
   
.care-recruit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.care-recruit__title{
  font-family:var(--care-font-display);
  font-size:clamp(22px, 3vw, 30px);
  font-weight:700;
  color:var(--care-color-white);
  margin-bottom:14px;
  line-height:1.7;
}
.care-recruit__desc{ color:rgba(255,255,255,0.9); font-size:16.5px; max-width:480px; }


/* ------------------------------------------------------------
   12. アクセスセクション
   ------------------------------------------------------------ */
.care-access__grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr; /* 左：施設情報表／右：地図 */
  gap:48px;
  align-items:stretch;
}
.care-access__table{
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  overflow:hidden;
}
.care-access__row{
  display:grid;
  grid-template-columns:120px 1fr;
  padding:20px 26px;
  font-size:16.5px;
  border-bottom:1px solid var(--care-color-bg-soft);
}
.care-access__row:last-child{ border-bottom:none; }
.care-access__row dt{ color:var(--care-color-gold-deep); font-weight:700; font-size:15.5px; letter-spacing:0.04em; }
.care-access__row dd{ color:var(--care-color-text); }
.care-access__map{
  border-radius:var(--care-radius-md);
  overflow:hidden;
  border:1px solid rgba(74,59,53,0.12);
  background:var(--care-color-bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--care-color-text-soft);
  font-size:16px;
  min-height:280px;
}
.care-access__map iframe{ width:100%; height:100%; border:0; min-height:280px; }


/* ------------------------------------------------------------
   13. お問い合わせCTAセクション
   ------------------------------------------------------------ */
#contact{
  background: #E8E0DC;
}

.care-contact{
  text-align:center;
  position:relative;
  z-index:1;
}
.care-contact__actions{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:32px;
}
.care-contact__tel{
  font-family:var(--care-font-display);
  font-weight:700;
}


/* ------------------------------------------------------------
   14. フッター
   ------------------------------------------------------------
   フッターメニューも wp_nav_menu()（theme_location: footer）で
   出力しているため、.care-footer__col ul は通常のリスト
   スタイルをそのまま使います。
------------------------------------------------------------ */
.care-footer{
  border-top:4px solid var(--care-color-gold-deep);
  background:var(--care-color-bg);
  color:var(--care-color-text-soft);
  padding-block:56px 0;
  font-size:16px;
}
.care-footer__grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4, 1fr); /* 左：会社情報／右：リンク4列 */
  gap:36px;
  padding-bottom:40px;
}
.care-footer__brand-name{
  font-family:var(--care-font-display);
  color:var(--care-color-rose-deep);
  font-size:20px;
  font-weight:700;
  margin-bottom:6px;
}
.care-footer__brand-sub{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.care-footer__hp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--care-color-gold-deep);
  color:var(--care-color-white);
  font-size:14px;
  font-weight:700;
  padding:2px 6px;
  border-radius:3px;
}
.care-footer__col-title{
  color:var(--care-color-text);
  font-weight:700;
  font-size:16px;
  margin-bottom:16px;
  letter-spacing:0.03em;
}
.care-footer__col ul{ list-style:none; }
.care-footer__col li{ margin-bottom:10px; }
.care-footer__col a:hover{ color:var(--care-color-rose-deep); }
.care-footer__bottom{
  background:var(--care-color-gold-deep);
  color:rgba(255,255,255,0.9);
  padding-block:16px;
  text-align:center;
  font-size:15px;
}


/* ------------------------------------------------------------
   16. 下層ページ共通パーツ
   ------------------------------------------------------------
   ページバナー／パンくずリストは template-parts/page-header.php
   から出力され、「入所のご案内」以外の下層ページ（サービス・料金、
   採用情報など）でも共通の見た目として使い回します。
------------------------------------------------------------ */

/* --- ページバナー（タイトル画像＋見出し） --- */
.care-page-banner{
  position:relative;
  height:clamp(180px, 26vw, 280px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.care-page-banner__image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.care-page-banner__overlay{
  position:absolute;
  inset:0;
}
.care-page-banner__inner{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
.care-page-banner__box{
  background:rgba(169,130,46,0.9); /* --care-color-gold-deep を半透明で使用 */
  padding:20px 32px;
  max-width:100%;
}
.care-page-banner__eyebrow{
  display:block;
  color:rgba(255,255,255,0.85);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.care-page-banner__title{
  font-family:var(--care-font-display);
  font-size:clamp(24px, 3.6vw, 34px);
  font-weight:700;
  color:var(--care-color-white);
}

/* --- パンくずリスト --- */
.care-breadcrumb{
  background:var(--care-color-white);
  border-bottom:1px solid var(--care-color-gold);
   border-top:1px solid var(--care-color-gold);
}
.care-breadcrumb__inner{
  padding-block:14px;
  font-size:15.5px;
  color:var(--care-color-text-soft);
  display:flex;
  align-items:center;
  gap:8px;
}
.care-breadcrumb__inner a:hover{ color:var(--care-color-rose-deep); }
.care-breadcrumb__sep{ color:var(--care-color-gold-deep); }
.care-breadcrumb__current{ color:var(--care-color-gold-deep); }

/* --- お知らせバー（「このページは特別養護老人ホームについてです」など） --- */

.care-notice-bar__inner{
  padding-block:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  text-align:center;
}
.care-notice-bar__inner p{
  font-size:16.5px;
  color:var(--care-color-text);
}
.care-btn--sm{ padding:10px 24px; font-size:15.5px; }

/* --- 入所対象者・条件（テキストボックス＋写真） --- */
.care-eligibility__grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:32px;
  align-items:stretch;
}
.care-eligibility__box{
  background:var(--care-color-white);
  border:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-md);
  padding:32px 34px;
}
.care-eligibility__box-title{
  font-family:var(--care-font-display);
  font-size:19px;
  font-weight:700;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--care-color-bg-soft);
}
.care-eligibility__list{ margin-bottom:20px; }
.care-eligibility__list li{
  position:relative;
  padding-left:28px;
  font-size:16.5px;
  line-height:1.9;
  margin-bottom:12px;
  color:var(--care-color-text);
}
.care-eligibility__list li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:16px; height:16px;
  border:2px solid var(--care-color-rose-deep);
  border-radius:4px;
}
.care-eligibility__note{
  font-size:15.5px;
  color:var(--care-color-text-soft);
  background:var(--care-color-bg-soft);
  border-left:3px solid var(--care-color-rose-deep);
  border-radius:var(--care-radius-sm);
  padding:16px 18px;
  line-height:1.9;
}
.care-eligibility__media{
  border:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-md);
  overflow:hidden;
  min-height:220px;
}
.care-eligibility__media img{ width:100%; height:100%; object-fit:cover; }

/* --- 申し込みの流れ（縦型ステップ） --- */
.care-flow{
  list-style:none;
  max-width:760px;
  margin-inline:auto;
}
.care-flow__item{
  display:flex;
  gap:28px;
  align-items:flex-start;
  position:relative;
  margin-bottom:28px;
}
.care-flow__item:last-child{ margin-bottom:0; }
/* ステップ番号をつなぐ縦線（最後のSTEPの下には表示しない） */
.care-flow__item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:35px;
  top:72px;
  bottom:-28px;
  width:1px;
  background:var(--care-color-gold);
  opacity:0.6;
}
.care-flow__step{
  flex-shrink:0;
  width:72px; height:72px;
  border-radius:50%;
  background:var(--care-color-rose-pale);
  border:3px solid var(--care-color-gold);
  color:var(--care-color-rose-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  line-height:1.4;
  position:relative;
  z-index:1;
}
.care-flow__body{
  background:var(--care-color-white);
  border:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-md);
  padding:22px 26px;
  flex:1;
}
.care-flow__title{
  font-family:var(--care-font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}
.care-flow__desc{
  font-size:16px;
  color:var(--care-color-text-soft);
}

/* --- 必要書類・ダウンロード --- */
.care-downloads__grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:24px;
}
.care-downloads__card{
  background:var(--care-color-white);
  border:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-md);
  padding:28px 30px;
}
.care-downloads__card-title{
  font-family:var(--care-font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--care-color-bg-soft);
}
.care-downloads__address{
  font-size:16.5px;
  line-height:1.9;
  color:var(--care-color-text-soft);
}
.care-downloads__desc{
  font-size:16px;
  color:var(--care-color-text-soft);
  margin-bottom:16px;
}
.care-downloads__checklist{
  list-style:none;
  counter-reset:downloads-counter;
  margin-bottom:24px;
}
.care-downloads__checklist li{
  counter-increment:downloads-counter;
  position:relative;
  padding-left:30px;
  font-size:16px;
  color:var(--care-color-text);
  margin-bottom:10px;
}
.care-downloads__checklist li::before{
  content:counter(downloads-counter);
  position:absolute;
  left:0; top:0;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  font-size:14.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.care-downloads__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}


/* ------------------------------------------------------------
   17. サービス・料金ページ専用パーツ
   ------------------------------------------------------------
   「サービス内容」の写真＋説明ブロックと、「料金表」のテーブルを
   スタイリングします。ページテンプレート page-service.php で使用。
------------------------------------------------------------ */

/* --- サービス内容（写真＋説明） --- */
.care-service-detail{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:44px;
  align-items:center;
}
.care-service-detail__media{
  border-radius:var(--care-radius-md);
  overflow:hidden;
  border:1px solid rgba(74,59,53,0.12);
  aspect-ratio:4/3;
}
.care-service-detail__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.care-service-detail__media:hover img{ transform:scale(1.05); }
.care-service-detail__number{
  display:inline-block;
  font-family:var(--care-font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--care-color-gold-deep);
  background:var(--care-color-rose-pale);
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.care-service-detail__title{
  font-family:var(--care-font-display);
  font-size:clamp(20px, 2.6vw, 26px);
  font-weight:700;
  margin-bottom:16px;
}
.care-service-detail__desc{
  font-size:17px;
  color:var(--care-color-text-soft);
  margin-bottom:22px;
}
.care-service-detail__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.care-service-detail__tag{
  font-size:15px;
  font-weight:500;
  color:var(--care-color-text);
  background:var(--care-color-bg-soft);
  padding:8px 16px;
  border-radius:999px;
}

/* --- 料金表 --- */
.care-fee__intro{
  text-align:center;
  max-width:680px;
  margin:0 auto 40px;
  font-size:16.5px;
  color:var(--care-color-text-soft);
}
.care-fee__table-wrap{
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  border:1px solid rgba(74,59,53,0.12);
  overflow-x:auto; /* スマホ幅では横スクロールできるようにする */
  margin-bottom:24px;
}
.care-fee__table{
  width:100%;
  border-collapse:collapse;
  min-width:560px; /* 横スクロール発生の目安幅 */
  font-size:16.5px;
}
.care-fee__table thead th{
  background:#F5F5F3;
  color:var(--care-color-text);
  font-weight:700;
  font-size:16px;
  text-align:center;
  padding:16px 22px;
  white-space:nowrap;
}
.care-fee__table tbody td{
  padding:16px 22px;
  border-bottom:1px solid var(--care-color-bg-soft);
  color:var(--care-color-text);
  text-align:center;
}
.care-fee__table tbody tr:last-child td{ border-bottom:none; }
.care-fee__table tbody td:last-child{
  font-weight:700;
  color:var(--care-color-rose-deep);
}
.care-fee__table tbody tr:nth-child(even){ background:var(--care-color-bg); }

.care-fee__notes{
  font-size:15px;
  color:var(--care-color-text-soft);
  line-height:2;
}
.care-fee__notes li{ padding-left:1.1em; text-indent:-1.1em; }
.care-section--rose-deep .care-fee__intro,
.care-section--rose-deep .care-fee__notes{ color:rgba(255,255,255,0.9); }


/* ------------------------------------------------------------
   18. パネルカードグリッド（汎用パーツ）
   ------------------------------------------------------------
   「見出しヘッダー＋箇条書き」のカードを複数並べるパターンです。
   サービス・料金ページの「年間行事」（1月〜12月）や、
   採用情報ページの「教育・研修制度」（入職前〜1年〜）など、
   見た目が同じカード一覧を再利用する際にこのクラスを使います。
------------------------------------------------------------ */
.care-panel-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.care-panel-card{
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  overflow:hidden;
  border:1px solid rgba(74,59,53,0.12);
}
.care-panel-card__header{
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  text-align:center;
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:18px;
  padding:14px 0;
}
.care-panel-card__list{ padding:18px 22px 22px; }
.care-panel-card__list li{
  position:relative;
  padding-left:16px;
  font-size:16px;
  color:var(--care-color-text);
  margin-bottom:8px;
}
.care-panel-card__list li:last-child{ margin-bottom:0; }
.care-panel-card__list li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--care-color-rose-deep);
}


/* ------------------------------------------------------------
   19. お問い合わせページ専用パーツ
   ------------------------------------------------------------
   情報バー（電話／メール／面会時間）、交通のご案内、
   Contact Form 7 のフォームスタイルをまとめています。
------------------------------------------------------------ */

/* --- 情報バー（電話・メール・面会時間の3カラム） --- */
.care-info-section{ background:var(--care-color-rose-deep); }
.care-info-strip{
  background:var(--care-color-white);
  border:1px solid rgba(74,59,53,0.12);
  border-radius:var(--care-radius-md);
}
.care-info-strip__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.care-info-strip__item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:32px 30px;
  border-right:1px solid var(--care-color-bg-soft);
}
.care-info-strip__item:last-child{ border-right:none; }
.care-info-strip__icon{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.care-info-strip__label{ font-size:14.5px; color:var(--care-color-text-soft); margin-bottom:6px; }
.care-info-strip__value{
  font-family:var(--care-font-display);
  font-size:19px;
  font-weight:700;
  margin-bottom:4px;
  word-break:break-all;
}
.care-info-strip__note{ font-size:15px; color:var(--care-color-text-soft); }

/* --- 交通のご案内（電車／車の2カラム） --- */
.care-transit-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin-top:24px;
}
.care-transit-card{
  background:var(--care-color-bg-soft);
  border-radius:var(--care-radius-md);
  padding:24px 26px;
}
.care-transit-card__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16.5px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--care-color-text);
}
.care-transit-card__title svg{ color:var(--care-color-rose-deep); flex-shrink:0; }
.care-transit-card__list{ font-size:16px; color:var(--care-color-text-soft); line-height:1.9; }

/* --- お問い合わせフォーム見出し部分 --- */
.care-form-intro{
  max-width:720px;
  margin:0 auto 36px;
}
.care-form-wrap{
  max-width:720px;
  margin-inline:auto;
  background:var(--care-color-white);
  border-radius:var(--care-radius-lg);
  border:1px solid rgba(74,59,53,0.12);
  padding:clamp(28px, 4vw, 48px);
}

/* --- フォームの共通レイアウト（Contact Form 7 の管理画面側で
       下記のクラスを使ってフィールドを囲んでください） ---
   例：
   <div class="care-form-row">
     <div class="care-form-field">
       <label class="care-form-label">お名前 *</label>
       [text* your-name placeholder "山田 花子"]
     </div>
     ...
   </div>
------------------------------------------------------------ */
.care-form-group{ margin-bottom:28px; }
.care-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}
.care-form-label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--care-color-text);
  margin-bottom:10px;
}
.care-form-privacy{
  font-size:16px;
  color:var(--care-color-text-soft);
}
.care-form-submit{
  text-align:center;
  margin-top:8px;
}

/* --- Contact Form 7 が出力する要素本体のスタイル ---
   CF7はプラグイン側でHTMLを生成するため、下記は
   .wpcf7 配下の標準クラス（wpcf7-form-control 等）に
   直接スタイルを当てています。 */
.wpcf7 form{ display:block; }
.wpcf7-form-control-wrap{ display:block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 input[type="date"],
.wpcf7 textarea{
  width:100%;
  padding:14px 18px;
  border:1px solid rgba(74,59,53,0.16);
  border-radius:var(--care-radius-sm);
  background:var(--care-color-white);
  font-family:var(--care-font-body);
  font-size:16.5px;
  color:var(--care-color-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder{ color:rgba(74,59,53,0.35); }
.wpcf7 input:focus,
.wpcf7 textarea:focus{
  outline:none;
  border-color:var(--care-color-rose-deep);
  box-shadow:0 0 0 3px rgba(181,103,122,0.12);
}
.wpcf7 textarea{ min-height:140px; resize:vertical; }

/* お問い合わせ種別などのラジオボタン群 */
.wpcf7 .wpcf7-radio{
  display:flex;
  flex-wrap:wrap;
  gap:14px 30px;
}
.wpcf7 .wpcf7-list-item{ margin:0; }
.wpcf7 .wpcf7-list-item-label{
  font-size:16.5px;
  padding-left:8px;
  vertical-align:middle;
}
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:var(--care-color-rose-deep);
  vertical-align:middle;
}

/* プライバシーポリシー同意チェックボックス */
.wpcf7-acceptance .wpcf7-list-item-label{ padding-left:8px; }
.wpcf7-acceptance a{
  color:var(--care-color-rose-deep);
  border-bottom:1px solid currentColor;
}

/* 送信ボタン（[submit class:care-btn class:care-btn--primary "送信する"] のように
   CF7のタグにcare-btnクラスを付けると、サイト共通のボタンデザインで表示されます） */
.wpcf7-form-control.care-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  min-width:240px;
}
.wpcf7-spinner{ margin-left:10px; }

/* 入力エラー・送信結果メッセージ */
.wpcf7-not-valid-tip{
  display:block;
  font-size:15px;
  color:#b3413a;
  margin-top:6px;
}
.wpcf7-form-control.wpcf7-not-valid{ border-color:#b3413a; }
.wpcf7-response-output{
  margin:24px 0 0;
  padding:14px 20px;
  border-radius:var(--care-radius-sm);
  font-size:16px;
  border:1px solid rgba(74,59,53,0.15);
  color:var(--care-color-text-soft);
}
.wpcf7-form.sent .wpcf7-response-output{
  background:#eef6ee;
  border-color:#a9cfa9;
  color:#3f6b3f;
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output{
  background:#fbeceb;
  border-color:#e3aca8;
  color:#a3463d;
}


/* ------------------------------------------------------------
   20. 採用情報ページ専用パーツ
   ------------------------------------------------------------
   福利厚生の一覧グリッドと、募集職種一覧のカードをまとめています。
------------------------------------------------------------ */

/* --- 福利厚生（3列のシンプルなチェックリスト） --- */
.care-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px 40px;
}
.care-benefits-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16.5px;
  color:var(--care-color-text);
}
.care-benefits-item::before{
  content:"";
  flex-shrink:0;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--care-color-rose-deep);
}

/* --- 募集職種一覧 --- */
.care-job-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.care-job-card{
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  border:1px solid rgba(74,59,53,0.12);
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.care-job-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:1px solid var(--care-color-bg-soft);
}
.care-job-card__salary{ display:flex; flex-direction:column; gap:10px; }
.care-job-card__salary-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  font-size:15px;
  line-height:1.8;
}
.care-job-card__salary-row dt{ color:var(--care-color-gold-deep); font-weight:700; font-size:14px; }
.care-job-card__salary-row dd{ color:var(--care-color-text); }
.care-job-card__total{
  background:var(--care-color-bg-soft);
  border-radius:var(--care-radius-sm);
  padding:14px 18px;
  font-weight:700;
  font-size:19px;
  color:var(--care-color-rose-deep);
}
.care-job-card__total-note{
  display:block;
  font-weight:400;
  font-size:13px;
  color:var(--care-color-text-soft);
  margin-top:4px;
}
.care-job-card__title{
  font-family:var(--care-font-display);
  font-size:18px;
  font-weight:700;
}
.care-job-card__status{
  font-size:14.5px;
  font-weight:700;
  padding:4px 14px;
  border-radius:999px;
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  white-space:nowrap;
}
.care-job-card__status--limited{
  background:var(--care-color-bg-soft);
  color:var(--care-color-gold-deep);
}
.care-job-card__meta{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  font-size:16px;
  color:var(--care-color-text);
}
.care-job-card__meta-label{
  color:var(--care-color-gold-deep);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0.04em;
  margin-right:8px;
}


/* ------------------------------------------------------------
   21. ブログ一覧ページ専用パーツ（ページネーション）
   ------------------------------------------------------------
   home.php の paginate_links() が出力する
   <a class="page-numbers"> / <span class="page-numbers current"> を
   丸いページ番号ボタンとしてスタイリングします。
   サイドバーは設けず、記事一覧のみのシンプルな1カラム構成です。
------------------------------------------------------------ */
.care-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:48px;
  flex-wrap:wrap;
}
.care-pagination .page-numbers{
  min-width:44px;
  height:44px;
  padding-inline:6px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16.5px;
  font-weight:600;
  background:var(--care-color-rose-pale);
  color:var(--care-color-rose-deep);
  transition:background .2s ease, color .2s ease;
}
.care-pagination a.page-numbers:hover{
  background:var(--care-color-rose);
  color:var(--care-color-white);
}
.care-pagination .page-numbers.current{
  background:var(--care-color-rose-deep);
  color:var(--care-color-white);
}
.care-pagination .page-numbers.dots{
  background:transparent;
  color:var(--care-color-text-soft);
}


/* ------------------------------------------------------------
   15. レスポンシブ対応
   ------------------------------------------------------------
   960px：タブレット幅でハンバーガーメニューに切り替え
   640px：スマホ幅で1カラムレイアウトに変更
------------------------------------------------------------ */
@media (max-width: 960px){
  /* --- ヘッダー：ナビを折りたたみメニュー化 --- */
  .care-header__bottom-bar{
    padding-block:0;
  }
  .care-nav{
    max-height:0; /* 閉じている時は高さ0で隠す */
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .care-nav.is-open{ max-height:400px; } /* JSでis-openを付与すると開く */
  .care-nav__list{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 0 16px;
  }
  .care-nav__list a{ display:block; width:100%; padding-block:12px; }
  .care-nav-toggle{ display:block; }
  .care-header__tel{ display:none; } /* スマホでは電話番号表示を省略しCTAボタンのみに */

  /* --- ヒーロー：画像を上、テキストカードを下に縦積みする --- */
  .care-hero{ min-height:0; flex-direction:column; }
  .care-hero__media{ position:relative; width:100%; height:280px; }
  .care-hero__inner{ padding-block:32px; }
  .care-hero__card{ max-width:none; background:var(--care-color-white); padding:24px; }

  /* --- 各グリッドを1〜2カラムに調整 --- */
  .care-feature-grid{ grid-template-columns:1fr; }
  .care-about__grid{ grid-template-columns:1fr; }
  .care-about__media{ order:-1; }
  .care-service-grid{ grid-template-columns:1fr; }
  .care-blog-grid{ grid-template-columns:repeat(2, 1fr); }
  .care-access__grid{ grid-template-columns:1fr; }
  .care-footer__grid{ grid-template-columns:repeat(3, 1fr); }

  /* --- 下層ページ共通パーツ --- */
  .care-eligibility__grid{ grid-template-columns:1fr; }
  .care-eligibility__media{ order:-1; min-height:200px; }
  .care-downloads__grid{ grid-template-columns:1fr; }

  /* --- サービス・料金ページ --- */
  .care-service-detail{ grid-template-columns:1fr; }
  .care-panel-grid{ grid-template-columns:repeat(2, 1fr); }

  /* --- お問い合わせページ --- */
  .care-info-strip__grid{ grid-template-columns:1fr; }
  .care-info-strip__item{ border-right:none; border-bottom:1px solid var(--care-color-bg-soft); }
  .care-info-strip__item:last-child{ border-bottom:none; }
  .care-transit-grid{ grid-template-columns:1fr; }
  .care-form-row{ grid-template-columns:1fr; }

  /* --- 採用情報ページ --- */
  .care-benefits-grid{ grid-template-columns:repeat(2, 1fr); }
  .care-job-card{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 640px){
  :root{ --care-section-pad: 56px; } /* スマホでは余白を詰める */
  .care-header__brand-name{ font-size:20px; }
  .care-blog-grid{ grid-template-columns:1fr; }
  .care-about__media{ grid-template-columns:1fr; }
  .care-about__media-tall{ aspect-ratio:16/10; }
  .care-footer__grid{ grid-template-columns:repeat(2, 1fr); }
  .care-recruit{ flex-direction:column; align-items:flex-start; }
  .care-access__row{ grid-template-columns:1fr; gap:4px; }
  .care-hero__actions .care-btn,
  .care-contact__actions .care-btn{ width:100%; } /* ボタンを横幅いっぱいにしてタップしやすく */

  /* --- 下層ページ共通パーツ --- */
  .care-page-banner{ height:auto; padding-block:36px 24px; }
  .care-page-banner__title{ font-size:23px; }
  .care-flow__item:not(:last-child)::before{ left:29px; top:60px; }
  .care-flow__step{ width:60px; height:60px; font-size:14px; }
  .care-flow__item{ gap:16px; }
  .care-downloads__actions .care-btn{ width:100%; }
  .care-notice-bar__inner{ flex-direction:column; gap:12px; }

  /* --- サービス・料金ページ --- */
  .care-panel-grid{ grid-template-columns:1fr; }

  /* --- 採用情報ページ --- */
  .care-benefits-grid{ grid-template-columns:1fr; }
  .care-job-card__meta{ gap:16px 24px; }
}

/* ============================================================
   法人ページ（page-about.php）専用スタイル
   ------------------------------------------------------------
   社会福祉法人 林声会の紹介ページ用。ワイヤーフレーム（PDF）の
   レイアウト構成をそのまま再現し、配色・フォントのみ本サイトの
   --care- トークンを流用しています。他ページの共通ヘッダー／
   フッター（header.php／footer.php）は使わず、この中で完結する
   独自のトップバー・フッターを持ちます。
============================================================ */
.hojin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  background:var(--care-color-white);
  border-bottom:1px solid rgba(74,59,53,0.08);
}
.hojin-topbar__logo{
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:17px;
  color:var(--care-color-text);
}
.hojin-topbar__nav{ display:flex; gap:12px; }

.hojin-hero{
  position:relative;
  padding:100px 24px 170px;
  text-align:center;
  overflow:hidden;
  background:repeating-linear-gradient(135deg,
    var(--care-color-rose-pale) 0px, var(--care-color-rose-pale) 46px,
    var(--care-color-bg-soft) 46px, var(--care-color-bg-soft) 92px);
}
.hojin-hero__title{
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:clamp(24px, 3.4vw, 36px);
  line-height:1.6;
  color:var(--care-color-text);
  margin-bottom:28px;
  position:relative;
  z-index:1;
}
.hojin-hero__lede{
  font-size:16.5px;
  line-height:2;
  color:var(--care-color-text-soft);
  max-width:520px;
  margin-inline:auto;
  position:relative;
  z-index:1;
}
.hojin-hero__note{
  margin-top:24px;
  font-weight:700;
  font-size:17px;
  color:var(--care-color-rose-deep);
  position:relative;
  z-index:1;
}
.hojin-hero__wave{
  position:absolute;
  left:0; right:0; bottom:-1px;
  line-height:0;
}
.hojin-hero__wave svg{ display:block; width:100%; height:auto; }

.hojin-philosophy{ padding:var(--care-section-pad) 24px; background:var(--care-color-bg-soft); }
.hojin-philosophy__grid{
  max-width:var(--care-container-width);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
}
.hojin-philosophy__heading{
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:27px;
  margin-bottom:14px;
}
.hojin-philosophy__text{
  font-size:16.5px;
  line-height:1.9;
  color:var(--care-color-text-soft);
  margin-bottom:36px;
}

.hojin-doc-list{ display:flex; flex-direction:column; gap:22px; }
.hojin-doc-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--care-color-white);
  border-radius:var(--care-radius-md);
  padding:16px 18px;
}
.hojin-doc-number{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid var(--care-color-rose-deep);
  color:var(--care-color-rose-deep);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16.5px;
}
.hojin-doc-title{ font-size:17px; font-weight:500; margin-bottom:10px; }
.hojin-doc-download{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 16px;
  border-radius:999px;
  border:1px solid rgba(74,59,53,0.2);
  font-size:15px;
  color:var(--care-color-text-soft);
}
.hojin-doc-download:hover{ border-color:var(--care-color-rose-deep); color:var(--care-color-rose-deep); }

.hojin-facility{ padding:56px 24px; }
.hojin-facility:nth-of-type(even){ background:var(--care-color-white); }
.hojin-facility__inner{ max-width:var(--care-container-width); margin-inline:auto; }
.hojin-facility__heading{
  font-family:var(--care-font-display);
  font-weight:700;
  font-size:25px;
  margin-bottom:20px;
}
.hojin-facility__cta{ margin-bottom:32px; }
.hojin-facility__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  align-items:start; /* カードの高さが互いに引っ張られて伸びないようにする */
}
.hojin-facility__grid > article{
  overflow:hidden; /* カード内の要素が箱の外にはみ出さないようにする */
}
.hojin-facility__card-image{
  aspect-ratio:1/1;
  border-radius:var(--care-radius-sm);
  background:var(--care-color-bg-soft);
  margin-bottom:14px;
  overflow:hidden;
}
.hojin-facility__card-image img{ width:100%; height:100%; object-fit:cover; }
.hojin-facility__card-title{ font-size:16.5px; font-weight:700; margin-bottom:6px; }
.hojin-facility__card-desc{
  font-size:15px;
  line-height:1.7;
  color:var(--care-color-text-soft);
  margin-bottom:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hojin-facility__card-label{
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  background:var(--care-color-text);
  color:var(--care-color-white);
  font-size:14.5px;
}

.hojin-footer{
  background:var(--care-color-gold-deep);
  padding:24px;
}
.hojin-footer__bottom{
  max-width:var(--care-container-width);
  margin-inline:auto;
  font-size:15px;
  color:var(--care-color-white);
  text-align:center;
}

@media (max-width: 900px){
  .hojin-philosophy__grid{ grid-template-columns:1fr; gap:32px; }
  .hojin-facility__grid{ grid-template-columns:repeat(2, 1fr); }
  .hojin-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .hojin-topbar{ flex-direction:column; gap:14px; align-items:flex-start; }
  .hojin-hero{ padding:64px 20px 120px; }
}

/* ============================================================
   施設についてページ（page-about.php）専用パーツ
   ------------------------------------------------------------
   施設概要テーブル横の写真、ギャラリー、施設理念カード。
============================================================ */
.care-overview__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.care-overview__media{
  border-radius:var(--care-radius-md);
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid rgba(74,59,53,0.12);
}
.care-overview__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.care-overview__media:hover img{ transform:scale(1.05); }

.care-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.care-gallery-item{
  position:relative;
  border-radius:var(--care-radius-sm);
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid rgba(74,59,53,0.12);
}
.care-gallery-item img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .4s ease; }
.care-gallery-item img:hover{ transform:scale(1.06); }
.care-gallery-item__label{
  position:absolute;
  left:10px; bottom:10px;
  background:rgba(255,255,255,0.92);
  padding:4px 12px;
  border-radius:999px;
  font-size:14.5px;
  color:var(--care-color-text);
}

.care-philosophy__grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:32px;
  align-items:start;
}
.care-philosophy-quote{
  background:var(--care-color-rose-deep);
  border-radius:var(--care-radius-md);
  padding:32px 28px;
  height:100%;
}
.care-philosophy-quote__icon{ display:block; width:64px; height:auto; margin:24px auto 0; }
.care-philosophy-quote__label{ font-size:15px; color:rgba(255,255,255,0.8); margin-bottom:14px; text-align:center; }
.care-philosophy-quote__title{
  font-family:var(--care-font-display);
  font-size:23px;
  font-weight:700;
  color:var(--care-color-white);
  margin-bottom:18px;
  text-align:center;
}
.care-philosophy-quote__text{ font-size:16.5px; color:rgba(255,255,255,0.9); line-height:2; }

.care-philosophy-list{ display:flex; flex-direction:column; gap:20px; }
.care-philosophy-item{
  background:var(--care-color-rose-pale);
  border-radius:var(--care-radius-md);
  padding:26px 28px;
  display:flex;
  gap:22px;
}
.care-philosophy-item__num{
  font-family:var(--care-font-display);
  font-size:27px;
  font-weight:700;
  color:var(--care-color-rose-deep);
  flex-shrink:0;
  line-height:1;
}
.care-philosophy-item__title{ font-weight:700; margin-bottom:8px; }
.care-philosophy-item__desc{ font-size:16px; color:var(--care-color-text-soft); line-height:1.85; }

@media (max-width: 900px){
  .care-overview__grid{ grid-template-columns:1fr; }
  .care-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .care-philosophy__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   サイトマップページ（page-sitemap.php）
============================================================ */
.care-sitemap-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
}
.care-sitemap-col__title{
  font-family:var(--care-font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:2px solid var(--care-color-gold);
}
.care-sitemap-col ul{ list-style:none; }
.care-sitemap-col ul li{ margin-bottom:12px; }
.care-sitemap-col ul li a{
  font-size:15px;
  color:var(--care-color-text-soft);
}
.care-sitemap-col ul li a:hover{ color:var(--care-color-rose-deep); }

/* ============================================================
   プライバシーポリシーページ（page-privacy-policy.php）
============================================================ */
.care-policy{ max-width:820px; margin-inline:auto; }
.care-policy__intro{ font-size:15px; color:var(--care-color-text-soft); line-height:1.9; margin-bottom:40px; }
.care-policy__block{ margin-bottom:36px; }
.care-policy__block-title{
  font-family:var(--care-font-display);
  font-size:19px;
  font-weight:700;
  margin-bottom:14px;
  padding-left:14px;
  border-left:4px solid var(--care-color-gold);
}
.care-policy__block p{ font-size:15px; color:var(--care-color-text-soft); line-height:1.9; margin-bottom:12px; }
.care-policy__block ul{ margin:0 0 12px 1.4em; }
.care-policy__block ul li{ font-size:15px; color:var(--care-color-text-soft); line-height:1.9; margin-bottom:6px; }
.care-policy__date{ font-size:14px; color:var(--care-color-text-soft); text-align:right; }

@media (max-width: 900px){
  .care-sitemap-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .care-sitemap-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   21. スクロール表示アニメーション
   ------------------------------------------------------------
   assets/js/script.js の IntersectionObserver が対象要素に
   .care-reveal を付与し、画面内に入ったら .is-in-view を追加する。
   グリッド内では順番に少しずつ遅れて浮き上がるよう
   nth-child でtransition-delayをずらしている。
------------------------------------------------------------ */
.care-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.care-reveal.is-in-view{
  opacity:1;
  transform:translateY(0);
}
.care-reveal:nth-child(2){ transition-delay:.08s; }
.care-reveal:nth-child(3){ transition-delay:.16s; }
.care-reveal:nth-child(4){ transition-delay:.24s; }
.care-reveal:nth-child(5){ transition-delay:.32s; }
.care-reveal:nth-child(6){ transition-delay:.4s; }
.care-reveal:nth-child(7){ transition-delay:.48s; }
.care-reveal:nth-child(8){ transition-delay:.56s; }

@media (prefers-reduced-motion: reduce){
  .care-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ------------------------------------------------------------
   22. 施設写真の拡大表示（ライトボックス）
   ------------------------------------------------------------
   assets/js/script.js が .care-gallery-item img クリック時に
   このオーバーレイをJSで生成し、拡大画像を表示する。
------------------------------------------------------------ */
.care-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:rgba(44,36,22,0.88);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
.care-lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.care-lightbox__img{
  max-width:min(900px, 100%);
  max-height:80vh;
  border-radius:var(--care-radius-sm);
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
}
.care-lightbox__caption{
  margin-top:16px;
  color:var(--care-color-white);
  font-size:15px;
  letter-spacing:0.04em;
}
.care-lightbox__close{
  position:absolute;
  top:24px;
  right:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:transparent;
  color:var(--care-color-white);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.care-lightbox__close:hover{ background:rgba(255,255,255,0.15); }

@media (max-width: 600px){
  .care-lightbox__close{ top:12px; right:12px; width:38px; height:38px; }
}