/*
 * aozora-front.css  v7.0
 * るみっく蒼空 フロントページ専用CSS
 *
 * ══════════════════════════════════════════════════════════════
 * v7 水玉実装の正確な仕組み（調査結果に基づく）
 *
 * MONAD style.css の実際の動作：
 *   .cb_design_content .image_area .item { position: relative; }
 *     ↑ bg_image の absolute 基点（サムネイル画像のサイズ）
 *   .cb_design_content .bg_image {
 *     position: absolute; top:0; left:0;
 *     transform: translate3d(-50%, -50%, 0); ← 角から外側に出る
 *     z-index: -1;
 *   }
 *   .cb_design_content .bg_image.color { width:380px; height:380px; }
 *     ↑ 380px の円の中心が .item の左上角に来る
 *     ↑ 視覚的に見えるのは円の右下1/4だけ（overflow:hiddenで切られるため）
 *   span:first-child: filter:blur(35px) → 広がったグロー
 *   span:last-child: 20%サイズ filter:blur(10px) → 内側の輝点
 *
 * v7 子テーマの解決策：
 *   .af-deco-anchor（0×0px、position:absolute）をセクション角に配置
 *   その中の .bg_image.color が外側に380px広がる
 *   .af-section の overflow:hidden で端が切られ、淡い角グローだけ見える
 *   → MONAD本来の「角からにじみ出る光」効果を再現
 *
 * 発火：親テーマ inview_group + .animate で opacity:0→1
 * スクロール：aozora-front.js で微細なparallax
 * ══════════════════════════════════════════════════════════════
 */

/* ============================================================
   0. CSS カスタムプロパティ
============================================================ */
.af-page {
  --af-main:       #6EC6E8;
  --af-main-dk:    #4AAED0;
  --af-main-lt:    #B8E6F8;
  --af-sub-bg:     #F7FCFF;
  --af-accent:     #7BC67B;
  --af-accent-dk:  #5DAB5D;
  --af-border:     #DDE8EE;
  --af-border-lt:  #EBF4F8;
  --af-text:       #333333;
  --af-text-sub:   #666666;
  --af-text-lt:    #999999;
  --af-white:      #FFFFFF;
  --af-radius:     4px;
  --af-radius-md:  6px;
  --af-radius-lg:  8px;
  --af-shadow-sm:  0 1px 6px rgba(0, 60, 100, 0.06);
  --af-shadow:     0 2px 12px rgba(0, 60, 100, 0.08);
  --af-transition: 0.22s ease;
  --af-font:       "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--af-text);
  font-family: var(--af-font);
}

/* ============================================================
   1. セクション共通
   ─ position:relative で .af-deco-anchor の絶対配置基点
   ─ overflow:hidden で bg_image の外側を自然にカット
============================================================ */
.af-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.af-section--white     { background: var(--af-white); }
.af-section--soft      { background: var(--af-sub-bg); }
.af-section--accent-bg { background: linear-gradient(150deg, #F2FAF2 0%, #F7FCFF 100%); }
.af-section--dark      { background: linear-gradient(150deg, #2D6A8A 0%, #1E4F6B 100%); }

.af-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;   /* .af-deco-anchor の bg_image（z-index:0）より前面 */
}

/* ============================================================
   2. MONAD水玉装飾（v7 正しい実装）
   ════════════════════════════════════════════════════════════
   HTML構造：
   <div class="af-deco-anchor af-deco-anchor--tr">  ← 0×0の角基点
     <div class="bg_image color position_right_top"> ← 外に380px広がる
       <span style="background-image:radial-gradient(...)"></span>
       <span style="background-image:radial-gradient(...)"></span>
     </div>
   </div>
   ════════════════════════════════════════════════════════════
============================================================ */

/* ── アンカー基点（0×0px、セクション角に配置） ── */
.af-deco-anchor {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
  /* フェードイン初期状態（inview_group.animate 待ち） */
  opacity: 0;
  transition: opacity 1.6s ease 0.40s;
}

/* 2番目のアンカーは少し遅延 */
.af-deco-anchor:nth-of-type(2) {
  transition-delay: 0.70s;
}

/* 親テーマ inview_group.animate でフェードイン */
.af-section.inview_group.animate .af-deco-anchor {
  opacity: 1;
}

/* ── アンカー位置バリエーション ── */
.af-deco-anchor--tl { top: 0;   left: 0;   }  /* 左上角 */
.af-deco-anchor--tr { top: 0;   right: 0;  }  /* 右上角 */
.af-deco-anchor--bl { bottom: 0; left: 0;  }  /* 左下角 */
.af-deco-anchor--br { bottom: 0; right: 0; }  /* 右下角 */
.af-deco-anchor--ml { top: 50%; left: 0;   }  /* 左中央 */
.af-deco-anchor--mr { top: 50%; right: 0;  }  /* 右中央 */

/* ════════════════════════════════════════════════════
   .af-section 内の .bg_image CSS
   親テーマは .cb_design_content .bg_image をスコープとするため
   子テーマで同等の定義を .af-section 文脈で再定義する。
   
   参照：親テーマ style.css L356-369（完全一致）
════════════════════════════════════════════════════ */

/* 基本配置：アンカー(0,0)から外に出る */
.af-section .af-deco-anchor .bg_image {
  position: absolute;
  top: 0;
  left: 0;
  /* transform:(-50%,-50%) → 380pxの円の中心がアンカー角に来る */
  /* → セクション内に見えるのは円の1/4（blurが拡散した淡い端） */
  transform: translate3d(-50%, -50%, 0);
  z-index: 0;
  display: block;
  pointer-events: none;
  /* parallaxのmargin-top変化のためにtransitionを指定（親テーマ同等） */
  transition: margin 0.8s ease-out;
}

/* ── ポジションクラス（親テーマ style.css L359-366 と同じ） ── */
.af-section .af-deco-anchor .bg_image.position_right_top {
  left: auto; right: 0;
  transform: translate3d(50%, -50%, 0);
}
.af-section .af-deco-anchor .bg_image.position_left_middle {
  top: 50%;
}
.af-section .af-deco-anchor .bg_image.position_center_middle {
  top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.af-section .af-deco-anchor .bg_image.position_right_middle {
  top: 50%; left: auto; right: 0;
  transform: translate3d(50%, -50%, 0);
}
.af-section .af-deco-anchor .bg_image.position_left_bottom {
  top: auto; bottom: 0;
  transform: translate3d(-50%, 50%, 0);
}
.af-section .af-deco-anchor .bg_image.position_right_bottom {
  top: auto; bottom: 0; left: auto; right: 0;
  transform: translate3d(50%, 50%, 0);
}

/* ── .bg_image.color（親テーマ style.css L367-369 完全再現） ── */
.af-section .af-deco-anchor .bg_image.color {
  width: 380px;
  height: 380px;
}

/* span:first-child → 外側グロー（blur:35px、全面） */
.af-section .af-deco-anchor .bg_image.color span:first-child {
  display: block;
  width: 100%;
  height: 100%;
  /* background-image はインラインstyle（front-page.phpで色を設定） */
  filter: blur(35px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

/* span:last-child → 内側輝点（blur:10px、中央20%） */
.af-section .af-deco-anchor .bg_image.color span:last-child {
  display: block;
  width: 20%;
  height: 20%;
  /* background-image はインラインstyle */
  filter: blur(10px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ── ダーク背景セクション：mix-blend-mode で光として合成 ── */
.af-section--dark .af-deco-anchor .bg_image.color span {
  mix-blend-mode: screen;
}

/* ── スマホ：装飾を非表示（パフォーマンスと可読性確保） ── */
@media screen and (max-width: 768px) {
  .af-deco-anchor { display: none; }
}

/* ── prefers-reduced-motion：アニメーション無効化 ── */
@media (prefers-reduced-motion: reduce) {
  .af-deco-anchor {
    opacity: 0.50 !important;
    transition: none !important;
  }
  .af-section.inview_group.animate .af-deco-anchor {
    opacity: 0.50;
  }
}

/* ============================================================
   3. セクション見出し
============================================================ */
.af-sec-head { text-align: center; margin-bottom: 60px; }
.af-sec-head__en {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--af-main); margin-bottom: 12px; opacity: 0.78;
}
.af-sec-head__title {
  font-size: clamp(21px, 3vw, 28px); font-weight: 700;
  color: var(--af-text); line-height: 1.50; letter-spacing: 0.04em; margin: 0 0 16px;
}
.af-sec-head__title::after {
  content: ""; display: block; width: 28px; height: 1.5px;
  background: var(--af-main); margin: 14px auto 0; opacity: 0.65;
}
.af-sec-head__title--white { color: var(--af-white); }
.af-sec-head__title--white::after { background: rgba(255,255,255,0.40); }
.af-sec-head__desc { font-size: 14.5px; color: var(--af-text-sub); line-height: 1.85; margin: 0; }
.af-sec-head__desc--white { color: rgba(255,255,255,0.75); }

/* ============================================================
   4. ヒーロー
============================================================ */
.af-hero {
  position: relative; width: 100%; min-height: 90vh;
  display: flex; align-items: center; overflow: hidden;
}
.af-hero__bg {
  position: absolute; inset: 0;
  background-color: #A8D8EE;
  background-image: linear-gradient(150deg, #7DC8E8 0%, #A8DCF0 30%, #C0EAE0 65%, #D4EEC8 100%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.02);
}
.af-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(8,40,65,0.52) 0%, rgba(8,40,65,0.28) 50%, rgba(8,40,65,0.10) 100%);
  z-index: 1;
}
.af-hero__inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 48px; width: 100%;
}
.af-hero__eyebrow,
.af-hero__title,
.af-hero__desc,
.af-hero__btns {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.af-hero.is-visible .af-hero__eyebrow { opacity:1; transform:translateY(0); transition-delay:0.10s; }
.af-hero.is-visible .af-hero__title   { opacity:1; transform:translateY(0); transition-delay:0.24s; }
.af-hero.is-visible .af-hero__desc    { opacity:1; transform:translateY(0); transition-delay:0.40s; }
.af-hero.is-visible .af-hero__btns    { opacity:1; transform:translateY(0); transition-delay:0.56s; }
.af-hero__eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.30);
  padding: 5px 14px; border-radius: 2px; margin-bottom: 22px;
}
.af-hero__title {
  font-size: clamp(28px, 5.2vw, 56px); font-weight: 700;
  color: var(--af-white); line-height: 1.42; letter-spacing: 0.05em;
  margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0,30,60,0.26);
}
.af-hero__desc {
  font-size: clamp(13.5px, 1.5vw, 16px); color: rgba(255,255,255,0.88);
  line-height: 1.90; margin: 0 0 38px; max-width: 520px;
  text-shadow: 0 1px 6px rgba(0,30,60,0.20);
}
.af-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.af-hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.50); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.af-hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.50), transparent);
  animation: af-scroll 2s ease-in-out infinite;
}
@keyframes af-scroll {
  0%   { transform: scaleY(0); transform-origin: top; }
  48%  { transform: scaleY(1); transform-origin: top; }
  52%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   5. ボタン
============================================================ */
.af-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--af-radius);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; transition: all var(--af-transition);
  white-space: nowrap; cursor: pointer;
}
.af-btn--primary { background: var(--af-main); color: var(--af-white); }
.af-btn--primary:hover { background: var(--af-main-dk); color: var(--af-white); transform: translateY(-1px); }
.af-btn--ghost { background: rgba(255,255,255,0.12); color: var(--af-white); border: 1px solid rgba(255,255,255,0.46); backdrop-filter: blur(3px); }
.af-btn--ghost:hover { background: rgba(255,255,255,0.22); color: var(--af-white); border-color: rgba(255,255,255,0.68); transform: translateY(-1px); }
.af-btn--outline { background: transparent; color: var(--af-main-dk); border: 1px solid var(--af-main); }
.af-btn--outline:hover { background: var(--af-sub-bg); color: var(--af-main-dk); }
.af-btn--accent { background: var(--af-accent); color: var(--af-white); }
.af-btn--accent:hover { background: var(--af-accent-dk); color: var(--af-white); transform: translateY(-1px); }
.af-btn--white { background: var(--af-white); color: var(--af-main-dk); border: 1px solid rgba(255,255,255,0.28); }
.af-btn--white:hover { background: #F0F8FF; color: var(--af-main-dk); }
.af-btn--tel {
  background: rgba(255,255,255,0.14); color: var(--af-white);
  border: 1px solid rgba(255,255,255,0.36);
}
.af-btn--tel::before {
  content: ""; display: inline-block; width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.5 12.12a19.79 19.79 0 0 1-3-8.57A2 2 0 0 1 3.44 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.12 6.12l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; flex-shrink: 0;
}
.af-btn--tel:hover { background: rgba(255,255,255,0.22); color: var(--af-white); transform: translateY(-1px); }
.af-btn-arrow { font-size: 11px; transition: transform var(--af-transition); }
.af-btn:hover .af-btn-arrow { transform: translateX(3px); }

/* ============================================================
   6. 生活介護とは
============================================================ */
.af-about__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.af-about__text { font-size: 15.5px; color: var(--af-text); line-height: 1.95; margin: 0; }

/* ============================================================
   7. 価値観カード
============================================================ */
.af-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.af-value-card {
  background: var(--af-white); border-radius: var(--af-radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--af-border-lt); border-top: 2px solid var(--af-border-lt);
  box-shadow: var(--af-shadow-sm);
  transition: transform var(--af-transition), box-shadow var(--af-transition), border-top-color var(--af-transition);
}
.af-value-card:hover { transform: translateY(-3px); box-shadow: var(--af-shadow); border-top-color: var(--af-main); }
.af-value-card__num { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--af-main); margin-bottom: 14px; opacity: 0.78; }
.af-value-card__title { font-size: 16px; font-weight: 700; color: var(--af-text); margin: 0 0 10px; line-height: 1.45; }
.af-value-card__desc { font-size: 13.5px; color: var(--af-text-sub); line-height: 1.82; margin: 0; }

/* ============================================================
   8. サービス導線カード（ボタン下揃え）
============================================================ */
.af-service-nav__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.af-snav-card {
  display: flex; flex-direction: column;
  background: var(--af-white); border-radius: var(--af-radius-lg);
  overflow: hidden; border: 1px solid var(--af-border);
  box-shadow: var(--af-shadow-sm); text-decoration: none; color: inherit;
  transition: transform var(--af-transition), box-shadow var(--af-transition);
}
.af-snav-card:hover { transform: translateY(-3px); box-shadow: var(--af-shadow); color: inherit; }
.af-snav-card__accent { height: 3px; background: var(--af-main); flex-shrink: 0; }
.af-snav-card--alt .af-snav-card__accent { background: var(--af-accent); }
.af-snav-card__media { height: 190px; background: linear-gradient(140deg,#D4EEF8,#E8F6F2); overflow: hidden; flex-shrink: 0; position: relative; }
.af-snav-card--alt .af-snav-card__media { background: linear-gradient(140deg,#D8F0D8,#E8F6E8); }
.af-snav-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.af-snav-card__media-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(70,130,160,0.30); }
.af-snav-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.af-snav-card__tag { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.20em; text-transform:uppercase; color:var(--af-main-dk); opacity:0.72; margin-bottom:10px; }
.af-snav-card--alt .af-snav-card__tag { color: var(--af-accent-dk); }
.af-snav-card__title { font-size:18px; font-weight:700; color:var(--af-text); margin:0 0 10px; }
.af-snav-card__desc { font-size:13.5px; color:var(--af-text-sub); line-height:1.80; margin:0 0 22px; flex:1; }
.af-snav-card__body .af-btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   9. ご利用までの流れ
============================================================ */
.af-steps__list { display:flex; align-items:flex-start; justify-content:center; list-style:none; margin:0; padding:0; }
.af-step { display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; max-width:180px; padding:0 8px; position:relative; }
.af-step:not(:last-child)::after { content:""; position:absolute; top:25px; left:calc(50% + 26px); right:calc(-50% + 26px); height:1px; background:var(--af-border); }
.af-step:not(:last-child)::before { content:"▸"; position:absolute; top:16px; right:-5px; font-size:10px; color:var(--af-main); opacity:0.60; z-index:1; }
.af-step__num { width:50px; height:50px; border-radius:50%; background:var(--af-main); color:var(--af-white); font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex-shrink:0; }
.af-step__label { font-size:13px; font-weight:700; color:var(--af-text); line-height:1.4; }

/* ============================================================
   10. 施設案内
============================================================ */
.af-facility__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.af-facility__media { border-radius:var(--af-radius-lg); overflow:hidden; box-shadow:var(--af-shadow); aspect-ratio:4/3; background:#EAF4F8; position:relative; }
.af-facility__media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.af-facility__placeholder { position:absolute; inset:0; background:linear-gradient(150deg,#E2F2F8,#ECF8F2); display:flex; align-items:center; justify-content:center; }
.af-facility__placeholder::before,.af-facility__placeholder::after { content:""; position:absolute; background:rgba(110,198,232,0.12); }
.af-facility__placeholder::before { width:1px; top:24%; bottom:24%; left:50%; }
.af-facility__placeholder::after  { height:1px; left:24%; right:24%; top:50%; }
.af-facility__placeholder-label { font-size:9px; font-weight:700; letter-spacing:0.26em; text-transform:uppercase; color:rgba(70,140,180,0.30); position:relative; z-index:1; }
.af-facility__content .af-sec-head { text-align:left; margin-bottom:20px; }
.af-facility__content .af-sec-head__title::after { margin-left:0; }
.af-facility__text { font-size:15px; color:var(--af-text); line-height:1.95; margin:0 0 24px; }
.af-facility__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; }
.af-facility__tag { font-size:12px; font-weight:700; color:var(--af-main-dk); background:var(--af-sub-bg); border:1px solid var(--af-border); border-radius:var(--af-radius); padding:4px 12px; }

/* ============================================================
   11. お知らせ
============================================================ */
.af-news__list { border-top: 1px solid var(--af-border); }
.af-news-item { display:flex; align-items:baseline; gap:16px; padding:16px 0; border-bottom:1px solid var(--af-border); text-decoration:none; color:var(--af-text); transition:background var(--af-transition), padding-left var(--af-transition); }
.af-news-item:hover { background:var(--af-sub-bg); padding-left:8px; color:var(--af-text); }
.af-news-item__date { font-size:12.5px; color:var(--af-text-lt); white-space:nowrap; flex-shrink:0; font-feature-settings:"tnum"; }
.af-news-item__cat { font-size:10px; font-weight:700; color:var(--af-main-dk); background:var(--af-sub-bg); border:1px solid var(--af-border); border-radius:2px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
.af-news-item__title { font-size:14px; line-height:1.60; flex:1; }
.af-news-item__arrow { font-size:10px; color:var(--af-main); flex-shrink:0; opacity:0; transition:opacity var(--af-transition), transform var(--af-transition); }
.af-news-item:hover .af-news-item__arrow { opacity:1; transform:translateX(3px); }
.af-news__footer { text-align:center; margin-top:36px; }
.af-news__empty { text-align:center; padding:28px 0; color:var(--af-text-sub); font-size:14px; }
.af-news__empty p { margin:0 0 20px; }

/* ============================================================
   12. 採用情報
============================================================ */
.af-recruit__inner { max-width:680px; margin:0 auto; text-align:center; }
.af-recruit__catch { font-size:clamp(17px,2.6vw,22px); font-weight:700; color:var(--af-accent-dk); line-height:1.55; margin:0 0 16px; letter-spacing:0.04em; }
.af-recruit__text { font-size:14.5px; color:var(--af-text); line-height:1.88; margin:0 0 32px; }
.af-recruit__btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ============================================================
   13. CTA
============================================================ */
.af-cta { text-align:center; }
.af-cta__btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ============================================================
   14. スマホ
============================================================ */
@media screen and (max-width: 1024px) {
  .af-container { padding: 0 32px; }
  .af-facility__inner { gap: 40px; }
}
@media screen and (max-width: 768px) {
  .af-section { padding: 60px 0; }
  .af-container { padding: 0 20px; }
  .af-sec-head { margin-bottom: 36px; }
  .af-hero { min-height: 100svh; align-items: flex-end; padding-bottom: 72px; }
  .af-hero__inner { padding: 0 20px; }
  .af-hero__title { font-size: 26px; }
  .af-hero__desc { font-size: 13.5px; }
  .af-hero__btns { flex-direction: column; gap: 10px; }
  .af-hero__btns .af-btn { width: 100%; justify-content: center; padding: 14px 18px; }
  .af-values__grid { grid-template-columns: 1fr; gap: 12px; }
  .af-value-card { padding: 20px 18px; display: flex; flex-direction: row; align-items: flex-start; gap: 18px; }
  .af-value-card__num { font-size: 13px; flex-shrink: 0; margin-bottom: 0; padding-top: 2px; min-width: 26px; }
  .af-service-nav__grid { grid-template-columns: 1fr; gap: 16px; }
  .af-snav-card__media { height: 160px; }
  .af-steps__list { flex-direction: column; }
  .af-step { flex-direction: row; text-align: left; gap: 16px; max-width: none; padding: 14px 0; border-bottom: 1px solid var(--af-border-lt); }
  .af-step:last-child { border-bottom: none; }
  .af-step::before,.af-step::after { display: none; }
  .af-step__num { margin-bottom: 0; width: 44px; height: 44px; font-size: 17px; flex-shrink: 0; }
  .af-step__label { font-size: 14.5px; }
  .af-facility__inner { grid-template-columns: 1fr; gap: 24px; }
  .af-facility__media { order: -1; }
  .af-facility__content .af-sec-head { text-align: center; }
  .af-facility__content .af-sec-head__title::after { margin: 12px auto 0; }
  .af-facility__tags { justify-content: center; }
  .af-news-item { flex-wrap: wrap; gap: 6px; }
  .af-news-item__title { flex-basis: 100%; }
  .af-news-item__arrow { opacity: 1; }
  .af-recruit__btns,.af-cta__btns { flex-direction: column; align-items: center; }
  .af-recruit__btns .af-btn,.af-cta__btns .af-btn { width: 100%; max-width: 300px; justify-content: center; }
  .af-btn--tel { min-height: 50px; font-size: 15px; }
}

/* ============================================================
   15. アクセシビリティ
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .af-hero__eyebrow,.af-hero__title,.af-hero__desc,.af-hero__btns {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .af-hero__scroll-line { animation: none; }
}
:focus-visible { outline: 2px solid var(--af-main); outline-offset: 2px; }