@charset "UTF-8";
/*
 * ======================================
 * Wild＆Little サイト固有CSS（site.css）
 * 共通 main.css（ピンクテーマでコンパイル）の上に重ねる差分。
 * 設計（claude-design-output）のポップなトンマナを正として再現する。
 * ======================================
 *
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ------------------------------------------------------------------
 * .wl-btn / --primary --white --ghost --lg  - ピル型ボタン（主役=グレー / ゴースト=ピンク枠）
 * .wl-phero / __inner / __copy              - 下層ページヒーロー（角丸下グラデ＋写真）
 * .wl-bc                                    - パンくず（› 区切り）
 * .wl-hero / __wrap __inner __slider __slide __overlay __copy - TOPカード型MV（静止画）
 * .shead (+ --left)                         - セクション見出し（❀＋EN小ラベル＋日本語）
 * .wl-news / news-layout                    - お知らせ（ピンク日付ピル）
 * .greet / feat / feat-grid / svc           - TOP各セクション
 * .zigzag / zigrow / commit3 / lineup / gallery / lightbox - 下層レイアウト群
 * .price / ptable3 / plans / plan / promo / tel-cta - 料金・CTA系
 * .infotable / bigmap / pending / form      - 店舗情報・フォーム
 * .blog-grid / bcard / sidebar / swidget / pager / article - ブログCMS
 * .reveal / deco-paw                        - スクロール演出・装飾
 * .wl-mw-720〜1000                          - 中央寄せ最大幅ヘルパー
 *
 * 共通SCSSに不足していたもの（5分類）
 * ------------------------------------------------------------------
 * ・装飾パターン不足：足跡(paw)・植物・番号あしらい等のポップ装飾
 * ・構造不足：写真カード型MV＋オーバーレイコピー、ジグザグ交互配置、クーポン風promo
 * ・状態不足：ギャラリーlightbox、ドロワー開閉
 * ・値の粒度不足：clamp ベースの可変余白・角丸トークン
 */

:root{
  --pink:        #ff5fc9;
  --pink-deep:   #D81E97;
  --pink-ink:    #B01278;
  --pink-tint:   #FFEAF7;
  --pink-tint2:  #FFF4FA;
  --gray:        #818181;
  --base:        #FFFFFF;
  --alt:         #FAFAFA;
  --cream:       #FFFBF6;
  --leaf:        #5FAE79;
  --leaf-tint:   #EAF6EE;
  --ink:         #463C42;
  --ink-soft:    #6E646A;
  --line:        #ECE7EA;

  --r-sm: 14px;
  --r:    20px;
  --r-lg: 30px;
  --pill: 999px;

  --shadow-soft: 0 8px 24px rgba(70,60,66,.06);
  --shadow-pink: 0 14px 34px rgba(255,95,201,.16);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 56px);
  --hh: 124px;

  --font-jp: "Noto Sans JP","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック","Hiragino Sans",sans-serif;
  --font-round: var(--font-jp);
}

/* ---------- base 上書き（設計のトンマナに合わせる） ---------- */
/* 共通 main.css は html{font-size:62.5%}（1rem=10px）だが、本サイトの site.css は
   設計どおり root=16px を前提に rem を使うため 100% に戻す。
   ※共通の .fz-* 等 rem ベースの utility は本サイトでは使用しない。 */
html{ font-size:100%; }
body{ font-family:var(--font-jp); font-weight:500; color:var(--ink); background:var(--base); line-height:1.85; font-size:16px; letter-spacing:.02em; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-round); font-weight:700; line-height:1.45; }
a{ color:inherit; }
a:hover{ opacity:1; }
img{ max-width:100%; height:auto; display:block; }

/* ---------- レイアウト（container を設計の wrap 相当に） ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(56px,8vw,110px); position:relative; }
.section .container{ position:relative; z-index:1; }
.section--tint{ background:var(--alt); }
.section--cream{ background:var(--alt); }
.section--beige{ background:#FAF6F0; }
.section--stripe{ background-color:var(--alt); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 2px, transparent 2px, transparent 16px); }
.section--pt-sm{ padding-top:clamp(20px,3vw,40px); }
.section--pt-xs{ padding-top:clamp(10px,2vw,24px); }

.wl-mw-720{ max-width:720px; margin-inline:auto; }
.wl-mw-760{ max-width:760px; margin-inline:auto; }
.wl-mw-900{ max-width:900px; margin-inline:auto; }
.wl-mw-880{ max-width:880px; margin-inline:auto; }
.wl-mw-920{ max-width:920px; margin-inline:auto; }
.wl-mw-950{ max-width:950px; margin-inline:auto; }
.wl-mw-980{ max-width:980px; margin-inline:auto; }
.wl-mw-1000{ max-width:1000px; margin-inline:auto; }

/* ---------- ボタン ---------- */
.wl-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-round); font-weight:700; font-size:1rem;
  padding:.95em 1.8em; border-radius:var(--pill);
  border:2px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap; line-height:1.3;
}
.wl-btn .arw{ transition:transform .25s ease; }
.wl-btn:hover .arw{ transform:translateX(4px); }
.wl-btn--primary{ background:transparent; color:#555; border-color:#555; }
.wl-btn--primary:hover{ background:#555; color:#fff; transform:translateY(-2px); }
.wl-btn--white{ background:#fff; color:var(--pink-ink); box-shadow:var(--shadow-soft); }
.wl-btn--white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pink); }
.wl-btn--ghost{ background:transparent; color:var(--pink-ink); border-color:var(--pink); }
.wl-btn--ghost:hover{ background:var(--pink); color:#fff; }
.wl-btn--lg{ font-size:1.1rem; padding:1.05em 2.2em; }

/* ---------- セクション見出し ---------- */
.shead{ text-align:center; margin-bottom:clamp(34px,5vw,60px); position:relative; }
.shead[data-en]::before{ content:attr(data-en); display:block; font-family:var(--font-round); font-weight:700; color:var(--pink); letter-spacing:.18em; font-size:.78rem; margin-bottom:.7em; }
.shead > *{ position:relative; z-index:1; }
.shead .ja{ font-size:clamp(1.6rem,3.6vw,2.5rem); color:var(--ink); }
.shead .lead{ margin-top:1em; color:var(--ink-soft); font-size:1.02rem; }
.shead--left{ text-align:left; }

/* ===========================================================
   ヘッダー
   =========================================================== */
.site-head{ position:relative; z-index:60; }
.utilbar{ background:var(--ink); color:#fff; font-size:.82rem; font-family:var(--font-round); }
.utilbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:40px; flex-wrap:wrap; max-width:var(--maxw); }
.utilbar .hours{ display:flex; gap:18px; flex-wrap:wrap; opacity:.92; }
.utilbar .hours b{ color:var(--pink); font-weight:700; }
.utilbar .links{ display:flex; gap:16px; align-items:center; }
.utilbar a{ display:inline-flex; align-items:center; gap:.4em; opacity:.92; transition:color .2s; color:#fff; }
.utilbar a:hover{ color:var(--pink); opacity:1; }

.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:104px; max-width:1320px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-img{ height:90px; width:auto; display:block; }

.gnav{ display:flex; align-items:center; gap:2px; }
.gnav a{ font-family:var(--font-round); font-weight:700; font-size:.94rem; padding:.5em .72em; border-radius:var(--pill); color:var(--ink); transition:color .2s, background .2s; position:relative; }
.gnav a:hover{ color:var(--pink-deep); background:var(--pink-tint); }
.gnav a[aria-current="page"]{ color:var(--pink); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-insta{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(45deg,#FEDA77 5%,#F58529 25%,#DD2A7B 55%,#8134AF 80%,#515BD4 100%); color:#fff; font-size:1.2rem; transition:transform .2s, box-shadow .2s; }
.header-insta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); color:#fff; }
.header-tel{ font-family:var(--font-round); line-height:1.1; text-align:left; background:#D441B9; border-radius:var(--pill); padding:1em 1.2em; display:flex; flex-direction:column; transition:background .2s; }
.header-tel:hover{ background:var(--pink-deep); }
.header-tel b{ font-size:1.18rem; color:#fff; display:flex; align-items:center; gap:.4em; font-weight:700; }

.hamb{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; border:none; background:var(--pink-tint); border-radius:14px; cursor:pointer; align-items:center; justify-content:center; }
.hamb span{ width:22px; height:2.5px; background:var(--pink-deep); border-radius:2px; transition:.3s; }

/* ドロワー（SP） */
.drawer{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.drawer__bg{ position:absolute; inset:0; background:rgba(70,60,66,.45); opacity:0; transition:.3s; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,360px); background:#fff; transform:translateX(100%); transition:.35s cubic-bezier(.4,0,.2,1); padding:28px 26px; display:flex; flex-direction:column; gap:6px; overflow:auto; }
.drawer.open{ visibility:visible; }
.drawer.open .drawer__bg{ opacity:1; }
.drawer.open .drawer__panel{ transform:translateX(0); }
.drawer__panel a.dnav{ font-family:var(--font-round); font-weight:700; font-size:1.1rem; padding:.85em .4em; border-bottom:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--ink); }
.drawer__panel a.dnav[aria-current="page"]{ color:var(--pink); }
.drawer__close{ align-self:flex-end; border:none; background:var(--pink-tint); width:42px; height:42px; border-radius:12px; font-size:1.3rem; color:var(--pink-deep); cursor:pointer; margin-bottom:8px; }
.drawer .d-tel{ margin-top:18px; background:var(--pink-tint); border-radius:var(--r); padding:18px; text-align:center; }
.drawer .d-tel small{ display:block; font-size:.82rem; color:var(--ink-soft); }
.drawer .d-tel b{ font-family:var(--font-round); font-size:1.5rem; color:var(--pink-deep); display:block; }
.drawer .d-tel__note{ display:block; font-size:.8rem; color:var(--ink-soft); }
.drawer .d-sns{ display:flex; gap:12px; justify-content:center; margin-top:16px; }
.drawer .d-sns a{ width:44px; height:44px; border-radius:50%; background:var(--alt); display:grid; place-items:center; color:var(--pink-deep); }

/* ===========================================================
   フッター
   =========================================================== */
.site-footer{ background:#D441B9; color:#fff; padding-top:clamp(50px,7vw,82px); margin-top:0; position:relative; overflow:hidden; }
.site-footer .container{ max-width:var(--maxw); }
.site-footer .ftop{ display:grid; grid-template-columns:1.2fr 0.7fr 1.5fr; gap:48px; }
.site-footer h4{ font-family:var(--font-round); color:#fff; font-size:1.05rem; margin-bottom:1em; }
.flogo-img{ height:66px; width:auto; display:block; filter:brightness(0) invert(1); }
.site-footer p, .site-footer li{ color:#fff; font-size:.92rem; line-height:1.9; }
.site-footer .fhours{ margin-top:18px; }
.site-footer .fhours b{ color:#fff; }
.site-footer .faddr{ margin-top:14px; }
.site-footer .ftel{ color:#fff; font-weight:700; }
.site-footer .fnav{ display:flex; flex-direction:column; gap:.5em; }
.site-footer .fnav a{ color:#fff; transition:opacity .2s; display:inline-flex; align-items:center; gap:.4em; }
.site-footer .fnav a:hover{ opacity:.7; }
.site-footer .fmap{ border-radius:var(--r); overflow:hidden; border:3px solid rgba(255,255,255,.12); }
.site-footer .fmap iframe{ display:block; width:100%; height:200px; border:0; filter:saturate(.9); }
.site-footer .fsns{ display:flex; gap:12px; margin-top:14px; }
.site-footer .fsns a{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; transition:.2s; color:#fff; }
.site-footer .fsns a:hover{ background:#fff; color:var(--pink); transform:translateY(-2px); }
.site-footer .fbtm{ margin-top:clamp(36px,5vw,56px); border-top:1px solid rgba(255,255,255,.3); padding:22px 0; text-align:center; font-size:.8rem; color:#fff; font-family:var(--font-round); }

/* ===========================================================
   TOP ヒーロー（カード型MV・静止画）
   =========================================================== */
.wl-hero{ position:relative; padding:0 0 clamp(16px,3vw,38px); }
.wl-hero__wrap{ max-width:none; padding-inline:2.5vw; }
.wl-hero__inner{ position:relative; }
.wl-hero__slider{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-pink); }
.wl-hero__slide{ width:100%; height:100%; }
.wl-hero__slide .main_slider__inner,
.wl-hero__slide img{ width:100%; height:100%; }
.wl-hero__slide img{ object-fit:cover; }
/* CMSスライダー（Swiper）出力を角丸カードの高さいっぱいに追従させる */
.wl-hero__slider #cms-slider-1-1-area,
.wl-hero__slider .swiper,
.wl-hero__slider .swiper-slide{ width:100%; height:100%; }
.wl-hero__slider .swiper-slide img{ width:100%; height:100%; object-fit:cover; }
/* CMSメインスライダー(#main_slider)は外枠(#slideshow)の高さに追従させる（高さ100%） */
/* MV高さはCMSスライダーの変数で制御する。CMSの #main_slider.slider_wrapper(ID1) に勝つよう
   親ID #slideshow を前置(ID2)して --swiper-wrapper-height を上書きする */
#slideshow #main_slider.slider_wrapper{ --swiper-wrapper-height: clamp(470px, calc(100svh - 148px), 860px); }
.wl-hero__slider::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(40,30,38,.62), rgba(40,30,38,.05) 42%, rgba(40,30,38,0) 60%); }
.wl-hero__overlay{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; pointer-events:none; }
.wl-hero__copy{ margin:clamp(22px,3.5vw,52px); max-width:680px; pointer-events:auto; }
.wl-hero__copy .tag{ color:#fff; font-family:var(--font-round); font-weight:700; font-size:.92rem; letter-spacing:.08em; }
.wl-hero__copy h1{ font-size:clamp(1.4rem,3.6vw,2.7rem); margin:.25em 0 0; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.4); line-height:1.7; }
.wl-hero__copy h1 em{ font-style:normal; color:#fff; background:var(--pink); padding:.04em .3em; border-radius:8px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---------- お知らせ ---------- */
.news-layout{ display:grid; grid-template-columns:0.05fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:stretch; }
.news-layout__head{ position:sticky; top:120px; }
.news-layout__head .shead{ margin-bottom:24px; }
.news-layout__head .shead--left .ja{ text-align:left; }
.wl-news{ display:grid; gap:2px; }
.wl-news a{ display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:18px 8px; border-bottom:2px solid var(--pink-tint); transition:.2s; }
.wl-news a:hover{ background:var(--pink-tint2); padding-inline:18px; border-radius:var(--r-sm); }
.wl-news .date{ font-family:var(--font-round); font-weight:700; color:#fff; background:var(--pink); font-size:.85rem; padding:.4em 1.2em; border-radius:var(--pill); letter-spacing:.03em; white-space:nowrap; }
.wl-news .ttl{ color:var(--ink); font-weight:500; }
.wl-news a:hover .ttl{ color:var(--pink-deep); }
.wl-news .arw{ color:var(--pink); font-size:1.2rem; }
/* お知らせ一覧CMSのページネーション（.pages > .page_prev/.page_next）を横並び中央に。
   .wl-news a のニュース項目スタイル（グリッド・下線）を打ち消す */
#cms-blog-entry-list-1-area .pages{ display:flex; justify-content:center; align-items:center; gap:14px 28px; flex-wrap:wrap; margin-top:28px; }
#cms-blog-entry-list-1-area .pages .page_prev,
#cms-blog-entry-list-1-area .pages .page_next{ display:inline-flex; }
#cms-blog-entry-list-1-area .pages a{ display:inline-flex; align-items:center; gap:.3em; padding:.45em 1.3em; border-bottom:none; border:2px solid var(--pink); border-radius:var(--pill); color:var(--pink-ink); font-family:var(--font-round); font-weight:700; font-size:.9rem; transition:background .2s, color .2s; }
#cms-blog-entry-list-1-area .pages a:hover{ background:var(--pink); color:#fff; padding-inline:1.3em; border-radius:var(--pill); }

/* ---------- 挨拶 ---------- */
.greet{ display:grid; grid-template-columns:0.78fr 1.22fr; gap:clamp(34px,5vw,68px); align-items:center; }
.greet__media{ position:relative; }
.greet__media img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-lg); }
.greet__media .stamp{ position:absolute; bottom:-22px; left:-22px; background:var(--pink); color:#fff; font-family:var(--font-round); font-weight:900; border-radius:var(--r); padding:16px 22px; box-shadow:var(--shadow-pink); line-height:1.2; }
.greet__media .stamp b{ font-size:1.9rem; display:block; }
.greet__body h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin:.3em 0 .8em; }
.greet__body h2 em{ font-style:normal; color:var(--pink); }
.greet__body p{ color:var(--ink-soft); margin-bottom:1em; }
.greet__body .sign{ font-family:var(--font-round); font-weight:700; color:var(--ink); margin-top:1.4em; }
.greet-deco{ position:absolute; right:clamp(10px,3vw,48px); bottom:0; width:clamp(120px,16vw,220px); height:auto; z-index:1; pointer-events:none; }

/* ---------- 特徴カード ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.feat{ background:#FFFAFD; border-radius:var(--r-lg); padding:clamp(30px,3.4vw,40px) clamp(24px,3vw,25px); box-shadow:2px 4px 6px -1px rgba(0,0,0,0.15); position:relative; overflow:visible; transition:transform .3s ease, box-shadow .3s ease; text-align:center; }
.feat:hover{ transform:translateY(-5px); }
.feat__illu{ width:118px; height:118px; margin:0 auto 25px; display:grid; place-items:center; }
.feat__illu img{ width:100%; height:100%; object-fit:contain; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.feat:hover .feat__illu img{ transform:scale(1.12) rotate(-5deg); }
.feat h3{ font-size:1.15rem; margin-bottom:.7em; padding-bottom:.6em; border-bottom:1px solid var(--line); color:var(--ink); min-height:3.4em; display:flex; align-items:center; justify-content:center; }
.feat p{ color:var(--ink-soft); font-size:14px; text-align:left; }

/* ---------- サービス誘導バンド ---------- */
.svc{ display:grid; gap:clamp(22px,3vw,32px); }
.svc__row{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.svc__row:nth-child(even) .svc__media{ order:2; }
.svc__media{ position:relative; min-height:200px; }
/* 画像は絶対配置にして行の高さを本文側に委ねる（画像本来の高さで行が伸びてテキストが浮くのを防ぐ） */
.svc__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc__body{ padding:clamp(35px,4.6vw,64px) clamp(30px,5vw,72px); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; }
.svc__body .catch{ font-family:var(--font-round); font-weight:700; color:var(--pink); font-size:1.04rem; }
.svc__body h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.svc__body p{ color:var(--ink-soft); text-align:left; margin-top:15px; margin-bottom:15px; }

/* ===========================================================
   下層ページ共通ヒーロー / パンくず
   =========================================================== */
/* TOPのカード型MV（左右2.5vw余白＋大きめ角丸＋ソフト影）と横幅・角丸を統一 */
.wl-phero{ position:relative; padding:0 2.5vw; }
.wl-phero__inner{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:clamp(240px,32vw,380px); display:grid; align-items:end; box-shadow:var(--shadow-soft); }
.wl-phero__inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body[data-page="info"] .wl-phero__inner img{ object-position:center -150px; }
body[data-page="petshop"] .wl-phero__inner img{ object-position:center 30%; }
.wl-phero__inner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(40,30,38,.62), rgba(40,30,38,.05) 42%, rgba(40,30,38,0) 60%); }
.wl-phero__copy{ position:relative; z-index:2; align-self:end; padding:clamp(22px,3.5vw,44px) clamp(26px,5vw,60px); color:#fff; max-width:760px; width:100%; }
.wl-phero__copy h1{ font-size:clamp(1.7rem,3.8vw,2.8rem); margin-top:.2em; text-shadow:0 2px 20px rgba(0,0,0,.4); color:#fff; }

.wl-bc{ font-size:.82rem; color:var(--gray); font-family:var(--font-round); padding:18px 0; display:flex; gap:.6em; align-items:center; flex-wrap:wrap; }
.wl-bc a{ color:var(--gray); }
.wl-bc a:hover{ color:var(--pink); }
.wl-bc .sep{ opacity:.5; }

/* ---------- 移動動物園ポイント（ジグザグ） ---------- */
.zigzag{ display:grid; gap:clamp(28px,4vw,52px); }
.zigrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; }
.zigrow .zfig{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:2px 4px 6px -1px rgba(0,0,0,0.15); aspect-ratio:4/3; }
.zigrow .zfig img{ width:100%; height:100%; object-fit:cover; display:block; }
.zigrow .zbody{ position:relative; display:flex; flex-direction:column; gap:10px; }
.zfig__deco{ position:absolute; right:-22px; bottom:141px; width:78px; height:auto; z-index:2; pointer-events:none; }
.zigrow:nth-child(even) .zfig{ order:2; }
.zigrow .ztitle{ position:relative; padding-top:30px; padding-bottom:14px; border-bottom:3px dotted var(--pink); }
.zigrow .znum{ position:absolute; top:-50px; left:-6px; z-index:0; font-family:var(--font-round); font-weight:900; font-size:4.6rem; line-height:1; color:var(--pink-tint); pointer-events:none; }
.zigrow h3{ position:relative; z-index:1; font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--ink); }
.zigrow p{ color:var(--ink-soft); font-size:.96rem; }

/* ---------- こだわり 3カラム ---------- */
.commit3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,30px); }
.commit3 .card{ background:#fff; border:2px solid var(--pink-tint); border-radius:var(--r-lg); overflow:visible; box-shadow:2px 4px 6px -1px rgba(0,0,0,0.12); display:flex; flex-direction:column; transition:transform .3s ease; position:relative; }
.commit3 .card:hover{ transform:translateY(-6px); }
.commit3 .card__media{ position:relative; aspect-ratio:4/3; background:var(--pink-tint2); border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0; overflow:hidden; }
.commit3 .card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.commit3 .card__no{ position:absolute; top:14px; left:14px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:58px; height:58px; border-radius:50%; background:var(--pink); color:#fff; font-family:var(--font-round); font-weight:900; font-size:1.5rem; line-height:1; box-shadow:0 4px 12px rgba(216,30,151,.35); }
.commit3 .card__no small{ font-size:.46rem; font-weight:700; letter-spacing:.14em; opacity:.92; }
.commit3 .card__emoji{ position:absolute; top:14px; left:14px; z-index:2; width:58px; height:58px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-size:1.4rem; box-shadow:0 4px 12px rgba(216,30,151,.35); }
.commit3 .card__body{ padding:clamp(24px,2.8vw,32px); text-align:center; }
.commit3 .card__body h3{ font-size:1.18rem; margin-bottom:.85em; padding-bottom:.7em; border-bottom:3px dotted var(--pink-tint); color:var(--ink); text-align:center; min-height:3.1em; display:flex; align-items:center; justify-content:center; }
.commit3 .card__body p{ color:var(--ink-soft); text-align:left; }
.commit3-note{ max-width:760px; margin:24px auto 0; font-size:.86rem; color:var(--ink-soft); background:var(--alt); border-radius:var(--r-sm); padding:14px 20px; text-align:center; }

/* ---------- 取扱生体ラインナップ ---------- */
.lineup{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lineup__item{ background:#fff; border-radius:var(--r); padding:30px 20px; box-shadow:var(--shadow-soft); border:2px solid var(--pink-tint); transition:.25s; text-align:center; display:flex; flex-direction:column; align-items:center; }
.lineup__item:hover{ border-color:var(--pink); transform:translateY(-4px); }
.lineup__item .ico{ width:84px; height:84px; border-radius:50%; background:var(--pink-tint); display:grid; place-items:center; color:var(--pink-deep); margin-bottom:16px; overflow:hidden; }
.lineup__item .ico img{ width:78%; height:78%; object-fit:contain; }
.lineup__item h3{ font-size:1.14rem; color:var(--ink); margin-bottom:.3em; }
.lineup__item p{ font-size:.86rem; color:var(--ink-soft); }
.lineup__item--note{ background:var(--pink); border:none; justify-content:center; gap:6px; }
.lineup__item--note p{ font-family:var(--font-round); font-weight:700; color:#fff; font-size:.96rem; line-height:1.6; margin:0; }

/* ---------- ギャラリー ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); display:block; cursor:zoom-in; transition:transform .3s ease, box-shadow .3s ease; background:var(--pink-tint2); }
.gallery img:hover{ transform:translateY(-3px) scale(1.012); box-shadow:var(--shadow-pink); }

/* ---------- ライトボックス ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(40,32,36,.92); display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .25s ease; }
.lightbox.open{ display:flex; opacity:1; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top:18px; right:20px; width:50px; height:50px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.6rem; cursor:pointer; transition:.2s; }
.lightbox__close:hover{ background:var(--pink); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.6rem; cursor:pointer; transition:.2s; display:grid; place-items:center; }
.lightbox__nav:hover{ background:var(--pink); }
.lightbox__nav.prev{ left:20px; }
.lightbox__nav.next{ right:20px; }

/* ---------- 料金表 ---------- */
.price{ background:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-soft); text-align:center; }
.price > table, .price > .price__note{ text-align:left; }
.price__ribbon{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; background:transparent; color:#EC5F59; border:2px solid #EC5F59; font-family:var(--font-round); font-weight:700; padding:.7em 1.6em; border-radius:var(--pill); margin:0 auto; text-align:center; font-size:1.02rem; }
.price__ribbon-strong{ font-size:1.15em; margin-left:.2em; }
table.ptable3{ width:100%; border-collapse:collapse; }
table.ptable3 thead th{ background:var(--pink); color:#fff; font-family:var(--font-round); font-weight:700; padding:14px 16px; text-align:center; font-size:.95rem; }
table.ptable3 thead th:first-child{ text-align:center; border-radius:var(--r-sm) 0 0 0; }
table.ptable3 thead th:last-child{ border-radius:0 var(--r-sm) 0 0; }
table.ptable3 td{ padding:15px 16px; border-bottom:1px solid var(--line); }
table.ptable3 td:first-child{ font-family:var(--font-round); font-weight:700; color:var(--ink); text-align:center; }
table.ptable3 td:first-child small{ display:block; font-size:.78rem; font-weight:500; color:var(--ink-soft); }
table.ptable3 td.num{ text-align:center; font-family:var(--font-round); font-weight:700; color:var(--pink-deep); white-space:nowrap; }
table.ptable3 tbody tr:nth-child(even){ background:var(--pink-tint2); }
.price__note{ margin-top:18px; font-size:.84rem; color:var(--gray); background:var(--alt); border-radius:var(--r-sm); padding:14px 18px; }

/* ---------- 料金プラン ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.plan{ background:#fff; border:3px solid var(--pink-tint); border-radius:var(--r-lg); padding:30px 24px 28px; text-align:center; position:relative; box-shadow:2px 4px 6px -1px rgba(0,0,0,0.12); transition:transform .3s ease; overflow:hidden; }
.plan:hover{ transform:translateY(-5px); }
.plan__name{ font-family:var(--font-round); font-weight:900; font-size:1.5rem; color:var(--pink-deep); margin-bottom:.4em; }
.plan__count{ display:inline-block; font-family:var(--font-round); font-weight:700; font-size:.86rem; color:#fff; background:var(--pink); padding:.25em 1.2em; border-radius:var(--pill); margin-bottom:.7em; }
.plan__for{ font-size:.92rem; color:var(--ink-soft); line-height:1.7; min-height:3.4em; margin-bottom:16px; }
.plan__price{ font-family:var(--font-round); font-weight:900; color:var(--ink); padding-top:14px; border-top:2px dotted var(--pink-tint); display:grid; gap:8px; }
.plan__price .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:1.25rem; }
.plan__price .row span{ font-family:var(--font-jp); font-weight:700; font-size:1rem; color:var(--gray); }
.plan__price .row.holiday b{ color:var(--pink-deep); }
.plan__animals{ font-size:.82rem; color:var(--ink-soft); line-height:1.6; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); text-align:left; }
.plan__animals b{ font-family:var(--font-round); color:var(--pink-ink); display:block; margin-bottom:.2em; }

/* ---------- リピーター割（promo） ---------- */
.promo{ background:var(--pink-tint2); border:2px solid var(--pink); color:var(--ink); border-radius:var(--r-lg); padding:clamp(32px,4.5vw,56px); position:relative; overflow:visible; box-shadow:var(--shadow-soft); text-align:center; }
.promo .ribbon{ display:inline-flex; align-items:center; gap:.4em; background:var(--pink); color:#fff; font-family:var(--font-round); font-weight:700; letter-spacing:.04em; padding:.5em 1.4em; border-radius:var(--pill); box-shadow:var(--shadow-pink); position:relative; z-index:2; }
.promo h3{ font-size:clamp(1.2rem,2.8vw,2.1rem); margin:.5em 0; color:var(--pink-deep); position:relative; z-index:2; }
.promo > p{ color:var(--ink-soft); max-width:660px; margin-inline:auto; position:relative; z-index:2; text-align:left; }
.promo__benefits{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px auto 0; max-width:760px; position:relative; z-index:2; }
.promo__benefit{ background:#fff; border-radius:var(--r); padding:22px 24px; display:flex; gap:14px; align-items:center; text-align:left; box-shadow:var(--shadow-soft); }
.promo__benefit .ck{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:900; font-family:var(--font-round); }
.promo__benefit p{ font-family:var(--font-round); font-weight:700; color:var(--ink); font-size:.96rem; line-height:1.6; }
.promo > p.promo__note{ margin-top:22px; font-size:.92rem; color:var(--gray); text-align:center; }
.promo__deco{ position:absolute; z-index:1; pointer-events:none; }
.promo__deco img{ width:100%; height:auto; display:block; }
.promo__deco--1{ width:clamp(110px,15vw,168px); left:-58px; bottom:-34px; }
.promo__deco--2{ width:clamp(74px,9.5vw,116px); right:-30px; top:-38px; transform:rotate(14deg); }

/* ---------- 予約電話CTA ---------- */
.tel-cta{ background:var(--pink-tint2); border:2px solid var(--pink); color:var(--ink); border-radius:var(--r-lg); padding:clamp(28px,4vw,46px); text-align:center; position:relative; }
.tel-cta p{ color:var(--ink-soft); }
.tel-cta p:first-of-type{ color:var(--ink); font-weight:700; font-family:var(--font-round); }
.tel-cta .num{ font-family:var(--font-round); font-weight:900; font-size:clamp(2rem,4vw,2rem); color:var(--pink-deep); display:inline-flex; align-items:center; gap:.3em; margin:.2em 0; }
.tel-cta .num .ico{ color:var(--pink); display:inline-flex; }
.tel-cta .hours{ font-size:.9rem; color:var(--gray); }
.tel-cta--sm{ max-width:560px; margin:56px auto 0; padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,32px); }
.tel-cta--sm p{ font-size:.92rem; }
.tel-cta--sm .num{ font-size:clamp(1.5rem,3vw,2rem); }
.tel-cta--sm .hours{ font-size:.82rem; }
.tel-cta__illu{ position:absolute; bottom:0; width:clamp(74px,9vw,104px); height:auto; z-index:2; pointer-events:none; }
.tel-cta__illu--l{ right:calc(100% - 20px); width:clamp(56px,6.5vw,78px); }
.tel-cta__illu--r{ left:calc(100% - 20px); transform:scaleX(-1); }
.tel-cta__illu--dog{ bottom:-2px; right:calc(100% - 28px); width:clamp(120px,15vw,170px); }
.tel-cta__illu--tools{ bottom:6px; left:calc(100% - 24px); width:clamp(96px,12vw,140px); }

/* ---------- 店舗情報テーブル ---------- */
.infotable{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--line); }
.infotable th, .infotable td{ text-align:left; padding:20px 24px; border-bottom:1px solid var(--line); vertical-align:top; }
.infotable th{ width:200px; background:var(--pink-tint2); font-family:var(--font-round); color:var(--ink); font-weight:700; }
.infotable tr:last-child th, .infotable tr:last-child td{ border-bottom:none; }
.infotable .tel-link{ color:var(--pink-deep); font-family:var(--font-round); font-weight:700; font-size:1.15rem; }
.infotable .sns-link{ color:var(--pink-deep); display:inline-flex; align-items:center; gap:.5em; }
.wl-access-btns{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
.bigmap{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-soft); border:4px solid #fff; }
.bigmap iframe{ display:block; width:100%; height:440px; border:0; }
.pending{ display:inline-flex; align-items:center; gap:.5em; background:var(--alt); color:var(--gray); border:1px dashed var(--gray); border-radius:var(--pill); padding:.4em 1.1em; font-size:.86rem; font-family:var(--font-round); }

/* ---------- 問い合わせフォーム ---------- */
.form{ background:#fff; border-radius:var(--r-lg); padding:clamp(26px,3.4vw,46px); box-shadow:var(--shadow-soft); display:grid; gap:18px; }
.form .row{ display:grid; gap:7px; }
.form .row.two{ grid-template-columns:1fr 1fr; gap:18px; }
.form label{ font-family:var(--font-round); font-weight:700; font-size:.92rem; color:var(--ink); display:flex; align-items:center; gap:.5em; }
.form .req{ font-size:.66rem; background:var(--pink); color:#fff; padding:.15em .7em; border-radius:var(--pill); }
.form input, .form select, .form textarea{ font-family:var(--font-jp); font-size:1rem; padding:.85em 1em; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--alt); color:var(--ink); transition:.2s; width:100%; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--pink); background:#fff; box-shadow:0 0 0 4px var(--pink-tint); }
.form textarea{ min-height:140px; resize:vertical; }
.form .submit{ justify-self:center; margin-top:8px; }
.form .ok{ display:none; text-align:center; background:var(--leaf-tint); color:#2f7a4d; border-radius:var(--r); padding:18px; font-family:var(--font-round); font-weight:700; }
.form .ok.show{ display:block; }

/* CMSフォーム 必須マークの背景をピンクに（CMSのオレンジ #f07240 を上書き。#cms-contact-1-1-area 前置でID追加し確実に勝つ） */
#cms-contact-1-1-area .form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before{ background:var(--pink); }
/* CMSフォーム 送信ボタン：濃いグレー */
#cms-contact-1-1-area .form-pattern-2 button[type="submit"],
#cms-contact-1-1-area .form-pattern-2 input[type="submit"],
#cms-contact-1-1-area .form-pattern-2 button.submit,
#cms-contact-1-1-area .form-pattern-2 .submit button,
#cms-contact-1-1-area .form-pattern-2 .btn-submit{ background:#555; border-color:#555; color:#fff; }
#cms-contact-1-1-area .form-pattern-2 button[type="submit"]:hover,
#cms-contact-1-1-area .form-pattern-2 input[type="submit"]:hover,
#cms-contact-1-1-area .form-pattern-2 button.submit:hover,
#cms-contact-1-1-area .form-pattern-2 .submit button:hover,
#cms-contact-1-1-area .form-pattern-2 .btn-submit:hover{ background:#333; border-color:#333; color:#fff; }
/* 送信ボタンのアイコン（.submit-btn::before 擬似要素）は常に白（ホバーでオレンジになるのを上書き） */
#cms-contact-1-1-area .form-pattern-2 .submit-btn::before,
#cms-contact-1-1-area .form-pattern-2 .submit-btn:hover::before{ background:#fff; color:#fff; border-color:#fff; }
/* SVG/フォントアイコンの場合のフォールバック */
#cms-contact-1-1-area .form-pattern-2 .submit-btn svg,
#cms-contact-1-1-area .form-pattern-2 .submit-btn:hover svg{ fill:#fff; stroke:#fff; color:#fff; }
#cms-contact-1-1-area .form-pattern-2 .submit-btn i,
#cms-contact-1-1-area .form-pattern-2 .submit-btn:hover i{ color:#fff; }

/* ===========================================================
   ブログCMS（一覧・詳細）
   =========================================================== */
.blog-grid{ display:grid; grid-template-columns:1fr 300px; gap:clamp(30px,4vw,56px); align-items:start; }
.blog-grid--single{ grid-template-columns:1fr; }
.blog-grid--single > *{ max-width:900px; width:100%; margin-inline:auto; }
.bcard-list{ display:grid; gap:24px; }
.bcard{ display:grid; grid-template-columns:200px 1fr; gap:24px; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-soft); transition:.25s; }
.bcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pink); }
.bcard__thumb{ width:100%; height:100%; min-height:150px; overflow:hidden; }
.bcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.bcard__body{ padding:20px 24px 22px; }
.bcard__meta{ display:flex; gap:12px; align-items:center; margin-bottom:.5em; }
.bcard__meta .date{ font-family:var(--font-round); color:var(--gray); font-size:.85rem; }
.bcard__meta .cat{ font-family:var(--font-round); font-weight:700; font-size:.72rem; color:#fff; background:var(--pink); padding:.2em 1em; border-radius:var(--pill); }
.bcard h3{ font-size:1.2rem; color:var(--ink); margin-bottom:.4em; }
.bcard p{ color:var(--ink-soft); font-size:.92rem; }
.sidebar{ display:grid; gap:24px; position:sticky; top:104px; }
.swidget{ background:#fff; border-radius:var(--r); padding:24px; box-shadow:var(--shadow-soft); }
.swidget h4{ font-size:1.05rem; color:var(--ink); margin-bottom:.9em; padding-bottom:.5em; border-bottom:2px solid var(--pink-tint); display:flex; align-items:center; gap:.5em; }
.swidget ul{ list-style:none; margin:0; padding:0; }
.swidget li a{ display:flex; justify-content:space-between; padding:.6em 0; border-bottom:1px dashed var(--line); font-size:.92rem; transition:.2s; color:var(--ink); }
.swidget li:last-child a{ border-bottom:none; }
.swidget li a:hover{ color:var(--pink); padding-left:.3em; }
.swidget .count{ background:var(--pink-tint); color:var(--pink-ink); font-size:.74rem; padding:.1em .7em; border-radius:var(--pill); font-family:var(--font-round); }
.swidget .recent{ display:grid; grid-template-columns:64px 1fr; gap:12px; padding:.7em 0; border-bottom:1px dashed var(--line); align-items:center; }
.swidget .recent:last-child{ border-bottom:none; }
.swidget .recent .rthumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; }
.swidget .recent .rthumb img{ width:100%; height:100%; object-fit:cover; }
.swidget .recent .rt{ font-size:.82rem; line-height:1.5; color:var(--ink); }
.swidget .recent .rd{ font-size:.74rem; color:var(--gray); font-family:var(--font-round); }

.entry-nav{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:40px; flex-wrap:wrap; }
.pager{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pager a, .pager span{ min-width:44px; height:44px; display:grid; place-items:center; border-radius:12px; font-family:var(--font-round); font-weight:700; background:#fff; box-shadow:var(--shadow-soft); transition:.2s; color:var(--ink); }
.pager a:hover{ background:var(--pink-tint); color:var(--pink-deep); }
.pager .on{ background:var(--pink); color:#fff; }

/* 記事詳細 */
.article{ background:transparent; border-radius:0; padding:0; box-shadow:none; }
.article__head{ border-bottom:2px solid var(--line); padding-bottom:18px; margin-bottom:6px; }
.article__head .cat{ font-family:var(--font-round); font-weight:700; font-size:.74rem; color:#fff; background:var(--pink); padding:.25em 1.1em; border-radius:var(--pill); }
.article__head .date{ font-family:var(--font-round); color:var(--pink); font-size:.9rem; }
.article__head h1{ font-size:clamp(1.3rem,2.4vw,1.9rem); margin:.3em 0 0; color:var(--ink); }
.article__hero{ border-radius:var(--r); overflow:hidden; margin:24px 0 32px; aspect-ratio:16/8; }
.article__hero img{ width:100%; height:100%; object-fit:cover; }
.article__body p{ margin-bottom:1.4em; color:var(--ink); }
.article__body h2{ font-size:1.4rem; margin:1.6em 0 .6em; padding-left:.6em; border-left:5px solid var(--pink); }
.article__pager{ margin-top:32px; display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
/* CMS page_link 出力（前/次リンク）を横並び中央に。
   出力ラッパー(div/ul/li/p)は display:contents で透過し、リンクを直接フレックス配置する */
#cms-blog-entry-detail-4-area{ display:flex; justify-content:center; align-items:center; gap:14px 24px; flex-wrap:wrap; width:100%; }
#cms-blog-entry-detail-4-area > div,
#cms-blog-entry-detail-4-area > p,
#cms-blog-entry-detail-4-area ul,
#cms-blog-entry-detail-4-area li{ display:contents; }
#cms-blog-entry-detail-4-area br{ display:none; }
#cms-blog-entry-detail-4-area a{ display:inline-flex; align-items:center; }
.article__actions{ margin-top:24px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ===========================================================
   装飾モチーフ・スクロール演出
   =========================================================== */
.deco-paw{ position:absolute; color:var(--pink); opacity:.1; pointer-events:none; z-index:0; }
.deco-paw--tr{ top:6%; right:4%; font-size:90px; line-height:1; }
.br-sp{ display:none; }
@media (max-width:760px){ .br-sp{ display:inline; } }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===========================================================
   ページトップボタン
   =========================================================== */
.page-top{ position:fixed; right:20px; bottom:20px; width:48px; height:48px; border-radius:50%; border:none; background:var(--pink); color:#fff; font-size:1.1rem; cursor:pointer; box-shadow:var(--shadow-pink); display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s, transform .3s, visibility .3s, background .2s; z-index:90; }
.page-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.page-top:hover{ background:var(--pink-deep); }

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

/* ===========================================================
   レスポンシブ
   =========================================================== */
@media (max-width:1080px){
  .gnav, .header-tel{ display:none; }
  .hamb{ display:flex; }
  #slideshow #main_slider.slider_wrapper{ --swiper-wrapper-height:55vh; }
  /* タブレット・SPはMV画像を下端基準に。CMSはスライド別にobject-positionを指定するため
     親ID #slideshow を前置してID2つにし、確実に上書きする */
  #slideshow #main_slider .main_slider .swiper-wrapper .swiper-slide .main_slider__inner img{ object-position:center bottom; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .greet{ grid-template-columns:1fr; }
  .news-layout{ grid-template-columns:1fr; gap:20px; }
  .news-layout__head{ position:static; }
  .blog-grid{ grid-template-columns:1fr; }
  .sidebar{ position:static; grid-template-columns:1fr 1fr; }
  .site-footer .ftop{ grid-template-columns:1fr 1fr; }
  .site-footer .fcol--map{ grid-column:1 / -1; }
  /* ハンバーガー表示時：フッターのメニュー列とページトップボタンを非表示 */
  .site-footer .fcol--nav{ display:none; }
  .site-footer .fcol--map h4{ display:none; }
  .page-top{ display:none; }
}
@media (max-width:1080px){
  .lineup{ grid-template-columns:repeat(3,1fr); }
  .commit3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .zigrow{ grid-template-columns:1fr; }
  .zigrow:nth-child(even) .zfig{ order:0; }
}
@media (max-width:760px){
  :root{ --hh:84px; }
  body{ font-size:13px; }
  .utilbar{ display:none; }
  .logo-img{ height:62px; }
  .drawer__panel a.dnav{ font-size:1rem; }
  .feat-grid{ grid-template-columns:1fr; }
  .commit3{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .svc__row{ grid-template-columns:1fr; }
  .svc__row:nth-child(even) .svc__media{ order:0; }
  /* SPは縦積み。画像を通常配置に戻し（絶対配置をやめ）崩れ・横ずれを防ぐ */
  .svc__media{ min-height:0; }
  .svc__media img{ position:static; height:auto; aspect-ratio:16/10; }
  /* 子要素を全幅にして最大コンテンツ幅でのはみ出しを防止。長いボタンは折り返す */
  .svc__body{ align-items:stretch; }
  .svc__body .wl-btn{ white-space:normal; font-size:.82rem; }
  .svc__body .catch{ font-size:12px; }
  .lineup{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .lineup__item{ padding:18px 12px; }
  .lineup__item .ico{ width:68px; height:68px; margin-bottom:12px; }
  .lineup__item h3{ font-size:1rem; }
  .lineup__item p{ font-size:12px; text-align:center; text-wrap:balance; word-break:auto-phrase; }
  .shead .lead{ text-wrap:balance; word-break:auto-phrase; }
  .gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .plans{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; }
  .plan__for{ min-height:0; }
  .promo h3{ text-align:center; }
  .promo__benefits{ grid-template-columns:1fr; }
  .promo__benefit{ padding:14px 16px; gap:10px; }
  .promo__benefit .ck{ width:28px; height:28px; font-size:.8rem; }
  .promo__benefit p{ font-size:.82rem; line-height:1.5; }
  .promo__deco--1{ width:100px; left:-10px; bottom:-86px; }
  .promo__deco--2{ width:54px; right:-12px; top:-22px; }
  .tel-cta__illu{ display:none; }
  .bcard{ grid-template-columns:1fr; }
  .bcard__thumb{ min-height:180px; aspect-ratio:16/9; }
  .sidebar{ grid-template-columns:1fr; }
  .commit3-note{ text-align:left; }
  .zfig__deco{ width:60px; right:-4px; bottom:175px; }
  .wl-news .date{ font-size:.7rem; padding:.35em 1em; }
  /* SP：お知らせの「一覧を見る」を一覧の下へ移動＋小さめ中央 */
  .news-layout{ display:flex; flex-direction:column; }
  .news-layout__head{ display:contents; }
  .news-layout__head .shead{ order:1; }
  .wl-news{ order:2; }
  .news-layout__head .wl-btn{ order:3; align-self:center; margin-top:8px; font-size:.82rem; padding:.55em 1.4em; }
  .ptable3-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ptable3-scroll table.ptable3{ min-width:480px; }
  .price__ribbon{ flex-direction:column; gap:.3em; line-height:1.4; text-align:center; }
  .price__ribbon-strong{ margin-left:0; }
  .form .row.two{ grid-template-columns:1fr; }
  .wl-hero__slider{ box-shadow:none; }
  #slideshow #main_slider .main_slider .swiper-wrapper .swiper-slide .main_slider__inner img{ object-position:center bottom; }
  .wl-phero__inner{ box-shadow:none; }
  .infotable th{ width:120px; padding:14px 16px; }
  .infotable td{ padding:14px 16px; }
  .site-footer .ftop{ grid-template-columns:1fr; gap:32px; }
  /* SPはヒーローが低く画像が足りないため、上ずらしを解除して余白が出ないようにする */
  body[data-page="info"] .wl-phero__inner img{ object-position:center top; }
}

/* トリミング ご利用にあたって（基本メニュー内サブコンテンツ） */
.trim-notes-block{ margin-top:40px; background:#fff9ef; border-radius:20px; padding:28px 24px; box-shadow:0 8px 28px rgba(216,30,151,.10); }
.trim-notes-title{ text-align:center; color:var(--pink); font-size:1.2rem; margin-bottom:18px; }
.trim-notes{ list-style:none; margin:0; padding:0; }
.trim-notes li{ position:relative; padding:13px 4px 13px 30px; border-bottom:1px dotted rgba(216,30,151,.3); font-size:.94rem; line-height:1.8; color:var(--ink); }
.trim-notes li:last-child{ border-bottom:none; }
.trim-notes li::before{ content:"※"; position:absolute; left:6px; top:13px; color:var(--pink); font-weight:700; }
.trim-notes__sub{ display:block; margin-top:4px; font-size:.84rem; color:var(--gray); }