/* =========================================================
   春光学園 サイトリニューアル — 原稿忠実プロトタイプ
   Design: InDesign原稿 (クリーム × 水色 × 丸ゴ × 桜 × 水彩)
   Fonts: Zen Maru Gothic (見出し/丸ゴ=新丸ゴ相当) + Noto Sans JP (本文)
   ========================================================= */

/* ---------- Fonts ---------- */
/* フォールバック(無料代替) */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');

/* 先方支給フォント(サブセットwoff2): 小塚ゴシック=本文/ヒーロー, 新丸ゴ=見出し・水色 */
@font-face{font-family:'KozGo';src:url('../assets/fonts/kozgo-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'KozGo';src:url('../assets/fonts/kozgo-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'KozGo';src:url('../assets/fonts/kozgo-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'KozGo';src:url('../assets/fonts/kozgo-heavy.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'ShinMGo';src:url('../assets/fonts/shinmgo-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'ShinMGo';src:url('../assets/fonts/shinmgo-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ShinMGo';src:url('../assets/fonts/shinmgo-medium.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --cream:#FEF5EA;        /* メイン背景(実測) */
  --cream2:#FFFAF2;       /* 明るいクリーム */
  --cream3:#F7EEE0;       /* やや濃いクリーム(セクション境) */
  --beige:#EFE0CC;
  --ink:#3C3A37;          /* 本文(濃) */
  --ink2:#6E665B;         /* 本文 */
  --ink-soft:#8A8175;
  --aqua:#46BEDD;         /* 見出し・本文の水色(先方指定 修正.txt) */
  --aqua-d:#2FA7C7;       /* 濃いめ水色(強調) */
  --aqua-btn:#95D3E2;     /* MENU/職員募集/PageTop/フッター●(先方指定) */
  --aqua-btn-d:#74C2D6;
  --aqua-pale:#DCF0F5;
  --aqua-line:#AADBE3;    /* 枠線・点線(先方指定: 一緒に働く仲間の枠周り) */
  --aqua-deep:#72A7C2;    /* ロゴマークについてボタン(先方指定) */
  --gray-dot:#D1D1D2;     /* 非アクティブのドット(先方指定) */
  --sakura:#F2A6BB;       /* 桜ピンク */
  --sakura-d:#EC85A1;
  --sakura-pale:#FBE7ED;
  --shadow:0 10px 30px rgba(120,150,150,.14);
  --maxw:520px;           /* SPフレーム最大幅 */
  --ease-soft:cubic-bezier(.16,1,.3,1);
  /* 設計は全て小塚ゴシック(KozGo・角張ったゴシック)。見出し/水色も角ゴ。フォールバックも角ゴ(角ゴシック)で統一 */
  --font-r:"KozGo","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; /* 見出し・水色文字=小塚(角・やや太め) */
  --font-g:"KozGo","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; /* 本文・ヒーロー=小塚 */
  --font-m:"KozGo","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
/* スクロールバー分の幅を常時確保。メニュー開閉(body overflow切替)でヘッダー/バーガーが
   横にずれないように(先方指摘: クリック時にバツ位置がずれる) */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:var(--font-g);
  font-weight:300;            /* 本文=小塚ゴシック Light(設計はKozGoPro-Lightで全ページ本文を組版) */
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
  overflow-x:hidden;
  scrollbar-gutter:stable;   /* メニュー開閉でスクロールバー幅分ずれないよう常時ガター確保(先方指摘) */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* SPフレーム: PC閲覧時も中央にSP幅で表示 (PC幅は下のMQで全幅化) */
/* 横の装飾はみ出しはルート(html)で隠す。
   .frame に overflow を付けると固定要素(メニュー/追従ヘッダー)の基準が .frame になり、
   固定メニューがページ全高になって項目が画面外に出る不具合(=ホーム以外開かない)が起きるため、
   .frame では overflow を指定しない。 */
.frame{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--cream);
  position:relative;
  min-height:100vh;
  box-shadow:0 0 60px rgba(150,140,120,.12);
  overflow-x:clip;   /* 横の装飾はみ出しを隠す。overflow:clip は position:sticky を壊さない(overflow:hidden は不可)。
                        ※ .frame に transform を付けると固定メニューの基準が狂うため厳禁(編集モードでも.frameは対象外) */
}

/* =========================================================
   Header (SP: sticky / PC homeはヒーローに重なる透明ヘッダー)
   ========================================================= */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.62);          /* 白バックを少し透過(先方要望) */
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
}
.hdr__logo{display:flex;align-items:center;gap:8px;transition:transform .3s var(--ease-soft)}
.hdr__logo:hover{transform:scale(1.02)}
.hdr__logo img{width:auto;height:38px}
.hdr__right{display:flex;align-items:center;gap:10px}

/* 住所 (PCのみ表示・2行) */
.hdr__addr{display:none;font-size:12px;color:var(--ink2);line-height:1.6;margin-left:16px;flex:1}
.hdr__addr span{display:block;white-space:nowrap}
.hdr__addr svg{width:12px;height:12px;vertical-align:-1px;margin-right:5px;color:var(--ink2)}

/* 職員募集ミニボタン(常時表示・第一CTA) */
.recruit-mini{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--cream);border:1.5px solid var(--aqua-btn);
  color:var(--aqua-d);font-size:8px;font-weight:700;line-height:1.2;
  font-family:var(--font-r);text-align:center;gap:2px;
  transition:transform .3s var(--ease-soft),background .3s;
}
.recruit-mini svg{width:16px;height:16px}
.recruit-mini:hover{transform:scale(1.03)}
.recruit-mini:active{transform:scale(.94)}

/* ハンバーガー: 先方支給見本(水色塗り円 + 白い太3本線 + MENU)を CSS で再現。
   クリックで3本線が「×(ばつ印)」へアニメーションで変化(先方指摘 2026-06-26) */
.burger{
  position:relative;
  width:50px;height:50px;border-radius:50%;
  background:var(--aqua-btn);border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding-bottom:6px;   /* 3本線を中央よりやや上目に(先方指摘・見本準拠) */
  box-shadow:none;   /* 見本に合わせフラット */
  transition:transform .3s var(--ease-soft),background .3s;
}
/* 3本線は中央よりやや上目・少し細く・隙間広め・少し横長(先方指摘)。MENU は絶対配置で下部へ */
.burger span{display:block;width:30px;height:3px;background:#fff;border-radius:999px;transition:transform .55s ease,opacity .4s ease}
.burger small{
  position:absolute;left:0;right:0;bottom:14%;text-align:center;margin:0;
  font-size:8px;color:#fff;font-family:var(--font-r);letter-spacing:.12em;
  transition:opacity .4s ease;
}
.burger:hover{transform:scale(1.03);background:var(--aqua-btn-d)}
.burger:active{transform:scale(.94)}
/* 開いた状態: 上下の線を中央へ寄せ ±45°回転して×印に / 中央線と MENU を消す。
   transition .55s ease で「ふんわりゆっくり」変化(先方指摘) */
.burger.is-open span:nth-child(1),
.burger.is-open span:nth-child(3){position:absolute;top:50%;left:50%;margin:0}
.burger.is-open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
.burger.is-open small{opacity:0}

/* スマホ(<860px): 50px 円。3本線と MENU を1つのグループとして円の中心に置き、
   両者の間隔を PC 同様に詰める(line-height:1 で MENU を低背化、bottom で上へ寄せる)。
   PC(>=860px)は p-home.css / 下部メディアで別管理のため無変更。 */
@media (max-width:859px){
  .burger{padding-bottom:7px}
  .burger small{bottom:16%;line-height:1}
}

/* =========================================================
   Fullscreen Menu (fade-in)
   ========================================================= */
.menu{
  position:fixed;inset:0;z-index:55;
  background:rgba(250,244,239,.97);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:safe center;align-items:center;
  gap:6px;padding:96px 24px 44px;          /* 上余白でヘッダーへの食い込みを防止(SP) */
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:scale(1.02);
  transition:opacity .75s ease,transform .75s ease,visibility .75s;
}
.menu.is-open{opacity:1;visibility:visible;transform:scale(1)}
.menu__item{
  font-family:var(--font-r);font-size:19px;letter-spacing:.14em;font-weight:500;
  color:var(--ink);padding:13px 0;width:100%;max-width:300px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;
  opacity:0;transform:translateY(10px);
  transition:opacity .72s ease,transform .72s ease,color .3s;
}
.menu__item:hover{color:var(--aqua-d)}
.menu__item::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua-btn)}
.menu.is-open .menu__item{opacity:1;transform:translateY(0)}
.menu.is-open .menu__item:nth-child(1){transition-delay:.12s}
.menu.is-open .menu__item:nth-child(2){transition-delay:.18s}
.menu.is-open .menu__item:nth-child(3){transition-delay:.24s}
.menu.is-open .menu__item:nth-child(4){transition-delay:.30s}
.menu.is-open .menu__item:nth-child(5){transition-delay:.36s}
.menu.is-open .menu__item:nth-child(6){transition-delay:.42s}
.menu.is-open .menu__item:nth-child(7){transition-delay:.48s}
.menu.is-open .menu__item:nth-child(8){transition-delay:.54s}
.menu.is-open .menu__item:nth-child(9){transition-delay:.60s}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;overflow:hidden}
.hero__img{width:100%;display:block}
.hero::after{ /* 下部をクリームに溶かす */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:30%;
  background:linear-gradient(to bottom,rgba(254,245,234,0),var(--cream) 94%);
  pointer-events:none;
}
.hero__copy{
  position:absolute;left:0;right:0;bottom:10%;z-index:3;
  font-family:var(--font-g);font-weight:900;text-align:center;
  color:#fff;font-size:clamp(32px,10.6vw,52px);line-height:1.24;
  letter-spacing:.01em;
  /* シャドーなし(先方要望) */
  padding:0 6px;
  opacity:0;
}
.hero__copy .sm{font-size:.6em}
@keyframes heroCopy{to{opacity:1;transform:translateY(0)}}

/* =========================================================
   Intro section
   ========================================================= */
.intro{position:relative;padding:46px 26px 30px;text-align:center}
.intro__leaf{position:absolute;pointer-events:none;opacity:.92;z-index:0}
.intro__leaf.l1{width:34px;top:8px;left:12px}
.intro__leaf.l2{width:26px;top:64px;left:40px}
.intro__leaf.l3{width:36px;top:14px;right:14px}
.intro__leaf+.intro__leaf+.intro__leaf~*{position:relative;z-index:1}
.intro p{font-size:14.5px;color:var(--ink2);line-height:2.15;letter-spacing:.1em}
.intro .em{color:var(--aqua-d);font-weight:500}
.intro .lead{margin-top:10px;line-height:2.1;letter-spacing:.08em}
.intro .lead .lead-aqua{font-family:var(--font-r);color:var(--aqua);font-weight:500;font-size:1.18em}
.intro .lead .lead-aqua b{font-weight:700;font-size:1.3em}
.intro .lead .lead-rest{color:var(--ink);font-size:1em}

/* CTA box (職員募集) */
.cta-box{
  margin:26px 16px 6px;
  border:2px solid var(--aqua-line);border-radius:18px;
  background:var(--cream2);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:14px;align-items:center;
  /* 先方指摘(2026-06-25): 中段の影を取る → box-shadow 除去(枠線のみで表現) */
}
.cta-box__txt{font-family:var(--font-r);font-size:15px;color:var(--aqua);line-height:1.95;font-weight:500}
/* 先方指摘: 「一緒に働く仲間」が太すぎ・色だけ濃い → 細く(500)・周囲と同色(aqua)に統一 */
.cta-box__txt b{color:var(--aqua);font-weight:500;font-size:1.12em}
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--aqua-btn);
  color:#fff;font-family:var(--font-r);font-weight:500;font-size:15px;letter-spacing:.08em;   /* 先方指摘: 「横須賀の魅力」ボタン(weight500)に書体を合わせる */
  padding:13px 32px;border-radius:30px;
  box-shadow:0 4px 10px rgba(143,209,225,.35);
  transition:transform .55s var(--ease-soft),box-shadow .55s,background .55s;
}
.btn-pill:hover{transform:scale(1.02);background:var(--aqua-btn-d);box-shadow:0 8px 22px rgba(116,194,214,.5)}
.btn-pill:active{transform:translateY(1px) scale(.99)}
.btn-pill svg{width:14px;height:14px}

/* =========================================================
   Logo-mark card (白カード=ロゴ / テキスト右)
   ========================================================= */
.popcard{
  margin:30px 18px;background:transparent;
  padding:6px;position:relative;
  display:flex;gap:16px;align-items:flex-start;
}
.popcard__pic{flex-shrink:0;text-align:center}
.popcard__pic .pic-card{
  background:#fff;border-radius:10px;padding:14px 12px;
  box-shadow:0 6px 22px rgba(150,140,120,.10);
}
.popcard img{width:96px;flex-shrink:0;margin:0 auto}
.popcard__dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.popcard__dots i{width:7px;height:7px;border-radius:50%;background:#CFC6B8}
.popcard__dots i.on{background:var(--aqua-btn)}
.popcard__body h3{
  font-family:var(--font-r);color:var(--aqua);font-size:16px;font-weight:500;
  letter-spacing:.14em;margin-bottom:6px;
}
.popcard__body p{font-size:12px;color:var(--ink2);line-height:1.95;letter-spacing:.04em}
.pop-leaf{position:absolute;pointer-events:none;display:none}

/* =========================================================
   Section heading
   ========================================================= */
.sec-head{
  text-align:center;font-family:var(--font-r);
  color:var(--aqua);font-size:23px;letter-spacing:.08em;
  font-weight:500;margin:8px 0 18px;
}
.sec-sub{
  text-align:center;font-family:var(--font-r);font-size:15px;
  color:var(--ink);letter-spacing:.1em;margin-bottom:20px;line-height:1.9;
}
/* 点線: border-dotted は環境で四角に見えるため radial-gradient で確実に丸点 + 間隔広め(先方指摘) */
.dots{
  height:3px;border:none;
  background:radial-gradient(circle closest-side, var(--aqua-line) 96%, transparent) center/11px 3px repeat-x;
  margin:24px 28px;
}

/* =========================================================
   Marquee (特大白文字・ゆっくり横ドリフト)
   ========================================================= */
/* overflow:visible にして1文字ずつの跳ね(elastic)が縦に切れないように(先方指摘: フェードでなく跳ねるアニメに) */
.marquee{overflow:visible;white-space:nowrap;text-align:center;margin:6px 0;line-height:1.15}
.marquee > span{
  display:inline-block;
  font-family:var(--font-g);font-weight:900;font-size:clamp(19px,5.6vw,30px);
  color:#fff;letter-spacing:.01em;
  /* 影は先方指摘で削除 */
  animation:drift 26s ease-in-out infinite alternate;
}
.marquee .sm{font-size:.6em}
@keyframes drift{from{transform:translateX(0.5%)}to{transform:translateX(-0.5%)}}

/* =========================================================
   Instagram
   ========================================================= */
.insta{padding:6px 16px 30px;text-align:center}
.insta__title{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-r);color:var(--aqua);font-size:18px;letter-spacing:.16em;font-weight:500;
  margin-bottom:14px;
}
.insta__title svg{width:22px;height:22px;color:var(--aqua)}
.insta__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;text-align:left;text-decoration:none;color:inherit}
.insta__head img{width:34px;height:34px;border-radius:50%}
.insta__head b{font-size:12px;color:var(--aqua-d);display:block;font-family:var(--font-r)}
.insta__head span{font-size:10px;color:var(--ink-soft)}
.insta__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.insta__grid a{display:block;line-height:0}   /* 画像をInstagramプロフィールへのリンクに(先方指摘の中段リンク切れ対応) */
.insta__grid img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;
  transition:transform .45s var(--ease-soft),box-shadow .45s;
}
.insta__grid img:hover{transform:scale(1.015);box-shadow:0 10px 26px rgba(120,150,150,.22)}

/* =========================================================
   Recruit page (職員募集)
   ========================================================= */
.page-pad{padding:24px 20px 10px}
.spec-table{margin:6px 4px 24px;border-top:1px solid var(--aqua-line)}
.spec-row{
  display:grid;grid-template-columns:96px 1fr;gap:0;
  border-bottom:1px solid var(--aqua-line);padding:13px 4px;
}
.spec-row dt{
  font-family:var(--font-r);color:var(--aqua-d);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;line-height:1.6;
}
.spec-row dd{font-size:13px;color:var(--ink);line-height:1.8;padding-left:1em}
.pay-block{margin:4px 4px 8px;padding:16px;background:var(--cream2);border-radius:14px}
.pay-block h4{font-family:var(--font-r);color:var(--ink);font-size:14px;margin-bottom:6px;font-weight:700}
.pay-block p{font-size:12.5px;color:var(--ink2);line-height:1.9}
.pay-block .total{color:var(--aqua-d);font-weight:700}
.benefits{margin-top:10px}
.benefits .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 2px;border-bottom:1px dotted var(--aqua-line)}
.benefits .row span:first-child{color:var(--ink2)}
.benefits .row span:last-child{color:var(--ink);font-weight:500}

/* leaf decorations for inner pages */
.leaf-deco{position:absolute;pointer-events:none;z-index:0}

/* =========================================================
   Floating recruit CTA
   ========================================================= */
.float-cta{
  position:fixed;right:14px;bottom:18px;z-index:50;
  transform:translateX(140%);opacity:0;
  transition:transform 1.1s var(--ease-soft) .9s,opacity 1.1s ease .9s;
}
.float-cta.show{transform:translateX(0);opacity:1}
.float-cta a{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--sakura),var(--sakura-d));
  color:#fff;font-family:var(--font-r);font-weight:700;font-size:13px;
  padding:12px 18px;border-radius:30px;
  box-shadow:0 10px 24px rgba(236,133,161,.45);
  transition:transform .35s var(--ease-soft),box-shadow .35s;
}
.float-cta a:hover{transform:scale(1.02);box-shadow:0 14px 30px rgba(236,133,161,.55)}
.float-cta a svg{width:16px;height:16px}

/* =========================================================
   Footer (原稿: 中央2段ナビ + 水彩の木 + 点線 + 横並びロゴ/住所/インスタ)
   ========================================================= */
.pagetop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:var(--aqua-pale);
  color:var(--aqua-d);font-size:9px;margin:24px auto 0;gap:2px;font-family:var(--font-r);
  transition:transform .35s var(--ease-soft),background .35s;
}
.pagetop:hover{transform:scale(1.03);background:var(--aqua-line)}
.foot-wrap{position:relative;padding:8px 0 0}
.foot-tree{position:absolute;pointer-events:none;display:none}
.foot-nav{
  padding:28px 16px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.foot-nav__row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px}
.nav-brk{display:none}
.foot-nav a{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:700;
  transition:color .3s;
}
.foot-nav a:hover{color:var(--aqua-d)}
.foot-nav a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua-btn);flex-shrink:0}
.foot-dots{
  height:4px;border:none;
  background:radial-gradient(circle closest-side, var(--aqua-line) 96%, transparent) center/14px 4px repeat-x;
  margin:26px 24px 0;
}
.foot{background:var(--cream);padding:22px 18px 34px;text-align:center;max-width:344px;margin:0 auto}
.foot__bottom{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:nowrap;margin-top:8px}
.foot__bottom .foot__info{text-align:left}
.foot__bottom .foot-insta{margin-top:0}
.sp-br{display:inline}
.foot img{height:54px;margin:0 auto 12px;mix-blend-mode:multiply}
.foot__info{font-size:11px;color:var(--ink2);line-height:1.9;font-style:normal}
.foot__info span{display:block;white-space:nowrap}
.foot__info svg{width:11px;height:11px;vertical-align:-1px;margin-right:4px;color:var(--ink2)}
.foot-insta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--font-r);font-size:13px;color:var(--ink);font-weight:500;
  transition:color .3s;
}
.foot-insta:hover{color:var(--aqua-d)}
.foot-insta svg{width:18px;height:18px;color:var(--aqua-d)}

/* =========================================================
   Scroll reveal (ふわっと下から / スタッガーはJSでdelay付与)
   ========================================================= */
.reveal{opacity:0}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.from-right{transform:translateX(34px)}
.reveal.from-right.in{transform:translateX(0)}

/* 水彩の葉/木 ゆらゆら */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* breadcrumb mini for inner pages */
.inner-hero{background:var(--cream);padding:6px 0 0}

/* =========================================================
   PC レイアウト (原稿 top-1〜3.svg 忠実再現 / 全幅)
   ========================================================= */
@media (min-width:860px){
  /* PDF設計(1000px幅・本文は読みやすい行長で中央配置)をベースにしたレスポンシブ。
     文字サイズはどの画面でも読みやすい範囲(clamp)で、本文幅は約1000pxに収まる。
     極端なワイドだけ広がりすぎ防止に上限を設ける(BenQ 1920は従来どおり全幅)。 */
  .frame{max-width:2200px;margin:0 auto;box-shadow:none}

  /* ---- header: home はヒーローに重なる透明ヘッダー ---- */
  .hdr{padding:26px 46px;gap:28px}
  body.home .hdr{
    position:absolute;top:0;left:0;right:0;
    background:transparent;border-bottom:none;backdrop-filter:none;
  }
  body.home .hdr.is-stuck{
    position:fixed;
    background:rgba(255,255,255,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:10px 46px;
    animation:hdrDown .45s var(--ease-soft);
  }
  @keyframes hdrDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
  .hdr__logo img{height:92px}
  body.home .hdr.is-stuck .hdr__logo img{height:56px}
  .hdr__addr{display:block;font-size:15px;margin-left:8px;letter-spacing:.02em}
  .hdr__addr svg{width:14px;height:14px}
  .hdr__right{gap:28px}
  .recruit-mini{
    width:auto;height:auto;border:none;background:transparent;border-radius:0;
    color:var(--ink);font-size:13px;font-weight:500;gap:5px;
  }
  .recruit-mini svg{width:34px;height:34px;color:var(--aqua-d)}
  .burger{width:88px;height:88px}
  body.home .hdr.is-stuck .burger{width:60px;height:60px}
  .menu__item{font-size:22px}

  /* ---- hero: 全幅 + 端から端への特大1行 ---- */
  .hero__copy{
    /* 先方指摘: 端で切れないよう nowrap テキスト幅(=font-size×14.32)を必ず viewport 内に。
       6.4vw で text 91.6vw(左右余白 4.2vw)。p-home.css 側と一致 */
    font-size:min(110px, 6.4vw);bottom:7%;
    white-space:nowrap;line-height:1;letter-spacing:.005em;padding:0;
  }
  .hero__copy br{display:none}

  /* ---- intro ---- */
  .intro{padding:104px 60px 78px}
  .intro__leaf.l1{width:92px;top:22px;left:7.5%;animation:floaty 6s ease-in-out infinite}
  .intro__leaf.l2{width:74px;top:138px;left:13.5%;animation:floaty 7s ease-in-out .6s infinite}
  .intro__leaf.l3{width:68px;top:118px;right:7.5%;animation:floaty 6.5s ease-in-out .3s infinite}
  .intro p{font-size:17px;line-height:2.55;letter-spacing:.14em}
  .intro .lead{margin-top:18px;white-space:nowrap}
  .intro .lead .lead-aqua{font-size:24px}
  .intro .lead .lead-aqua b{font-size:34px}
  .intro .lead .lead-rest{font-size:17px}
  .intro>.reveal{max-width:880px;margin:0 auto}

  /* ---- CTA banner: 左テキスト + 右ボタン (原稿) ---- */
  .cta-box{
    flex-direction:row;width:min(1000px,calc(100% - 80px));margin:64px auto 10px;
    padding:0;overflow:hidden;align-items:stretch;
    border-width:2px;border-radius:26px;background:transparent;box-shadow:none;
  }
  .cta-box__txt{
    flex:1;padding:34px 56px;font-size:23px;text-align:left;
    display:block;line-height:1.9;color:var(--aqua);
  }
  .cta-box__txt b{font-size:1.22em;display:inline}
  .cta-box .btn-pill{
    border-radius:0;min-width:310px;justify-content:center;font-size:24px;
    box-shadow:none;letter-spacing:.08em;
  }
  .cta-box .btn-pill:hover{transform:none;background:var(--aqua-btn-d)}

  /* ---- logo-mark card: 白カード(ロゴ)左 + テキスト右 ---- */
  .popcard{width:min(1010px,calc(100% - 120px));margin:96px auto;gap:74px;padding:0;align-items:center}
  .popcard__pic .pic-card{padding:30px 26px;border-radius:10px}
  .popcard img{width:218px}
  .popcard__dots{gap:9px;margin-top:16px}
  .popcard__dots i{width:9px;height:9px}
  .popcard__body h3{font-size:25px;margin-bottom:14px}
  .popcard__body p{font-size:15.5px;line-height:2.2;max-width:560px}
  .pop-leaf{display:block;opacity:.92}
  .pop-leaf.p1{width:84px;left:-15%;top:24%;animation:floaty 7s ease-in-out infinite}
  .pop-leaf.p2{width:86px;right:-13%;top:-12%;animation:floaty 6s ease-in-out .4s infinite}
  .pop-leaf.p3{width:96px;right:-19%;top:46%;animation:floaty 7.5s ease-in-out .8s infinite}

  /* ---- marquee: ヒーローと同格の特大白文字。端で切れないよう font×14.32 ≤ viewport ---- */
  .marquee{margin:64px 0}
  .marquee > span{font-size:min(110px, 5.9vw)}

  /* ---- instagram ---- */
  .insta{max-width:1100px;margin:0 auto;padding:30px 40px 96px}
  .insta__title{font-size:27px;gap:11px}
  .insta__title svg{width:30px;height:30px}
  .insta__head{max-width:1010px;margin:14px auto 20px;gap:13px}
  .insta__head img{width:54px;height:54px}
  .insta__head b{font-size:16px}
  .insta__head span{font-size:13px}
  .insta__grid{grid-template-columns:repeat(4,1fr);gap:24px;max-width:1010px;margin:0 auto}
  .insta__grid img{border-radius:3px}

  /* ---- footer: 原稿 top-3 ---- */
  .pagetop{width:96px;height:96px;font-size:12px;margin:84px auto 30px}
  .foot-wrap{max-width:1240px;margin:0 auto}
  .foot-tree{display:block}
  .foot-tree.ft-l{width:104px;left:5%;top:6px;animation:floaty 7s ease-in-out infinite}
  .foot-tree.ft-r{width:86px;right:5.5%;top:36px;animation:floaty 6.4s ease-in-out .5s infinite}
  .foot-nav{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:34px 62px;padding:36px 150px 8px;
  }
  .nav-brk{display:block;flex-basis:100%;height:0}
  .foot-nav a{font-size:18px;letter-spacing:.06em}
  .foot-nav a::before{width:13px;height:13px}
  .foot-dots{max-width:1230px;margin:78px auto 0;height:5px;background-size:18px 5px}
  .foot{
    max-width:1180px;margin:0 auto;padding:64px 20px 130px;
    display:flex;align-items:center;justify-content:center;gap:64px;text-align:left;
  }
  .foot img{height:92px;margin:0}
  .foot__info{font-size:15px;line-height:2.1}
  .foot__info svg{width:14px;height:14px;margin-right:6px}
  .foot-insta{margin-top:0;font-size:17px;gap:9px}
  .foot-insta svg{width:24px;height:24px}
  .foot__bottom{display:contents}
  .sp-br{display:none}

  /* ---- floating CTA ---- */
  .float-cta{right:24px;bottom:26px}
  .float-cta a{font-size:15px;padding:14px 22px}

  /* ---- 内部ページ共通 ---- */
  .page-pad{max-width:880px;margin:0 auto;padding:48px 30px 14px}
  .inner-hero .page-pad{max-width:none;padding-top:30px}
  .sec-head{font-size:30px;letter-spacing:.1em}
  .sec-sub{font-size:17px}
  .dots{max-width:880px;margin:34px auto}

  /* recruit */
  .spec-table{max-width:800px;margin:8px auto 34px}
  .spec-row{grid-template-columns:170px 1fr;padding:17px 10px}
  .spec-row dt{font-size:15px}
  .spec-row dd{font-size:15px}
  .pay-block{max-width:800px;margin:8px auto;padding:22px 26px}
  .pay-block h4{font-size:17px}
  .pay-block p{font-size:14.5px}
  .benefits{max-width:800px;margin:14px auto}
  .benefits .row{font-size:14.5px;padding:6px 4px}
  .leaf-deco{width:84px !important}

  /* facility */
  .fac-lead{max-width:760px;margin:0 auto;font-size:16px;padding-bottom:26px}
  .fac-photo{max-width:880px;margin:0 auto 36px}
  .director{max-width:800px;margin:0 auto 26px;gap:26px}
  .director img{width:150px}
  .director p{font-size:15px}
  .creed,.policy,.goal{max-width:760px;margin-left:auto;margin-right:auto}
  .creed .big{font-size:25px}
  .policy{font-size:15.5px}
  .goal{font-size:16px}
  .history .spec-row{grid-template-columns:210px 1fr}
}

/* コンテンツ上限 (超ワイド画面でも伸びやかに) */
@media (min-width:1700px){
  /* 端で切れないよう上限も font×14.32 ≤ viewport を満たす値に(118px は 1700px 帯で超過) */
  .hero__copy{font-size:min(110px, 6.4vw)}
  .marquee > span{font-size:min(110px, 5.9vw)}
}

/* SP フッター: 住所+インスタを1行(横並び)に収める */
@media (max-width:859px){
  .foot__bottom .foot__info{font-size:10px;line-height:1.7}
  .foot__bottom .foot__info svg{width:10px;height:10px;margin-right:3px}
  .foot__bottom .foot-insta{font-size:11.5px;gap:5px}
  .foot__bottom .foot-insta svg{width:15px;height:15px}
}

/* =========================================================
   共有シェル: ヘッダー/フッターの設計一致(全ページ共通)
   ※ home固有の幾何(余白等)は p-home.css 側
   ========================================================= */
:root{ --ink-dark:#2C2A28; }
/* 住所・電話/フッター文字は小塚+濃いチャコール(灰色は誤り) */
.hdr__addr{font-family:var(--font-g);color:var(--ink-dark)}
.foot__info{font-family:var(--font-g);color:var(--ink-dark)}
.foot-nav a{font-family:var(--font-r);color:var(--ink-dark)}
.foot-insta{font-family:var(--font-r);color:var(--ink-dark)}
@media (min-width:860px){
  .hdr__addr{font-size:15px;line-height:1.75;letter-spacing:.02em;margin-left:10px;font-weight:400}
  .hdr__addr svg{width:14px;height:14px;color:var(--ink-dark);stroke-width:2;margin-right:6px}
  .hdr__right{gap:34px}
  /* 職員募集: 人物+虫眼鏡(水色) + 下に濃色テキスト(小塚) */
  .recruit-mini{width:auto;height:auto;border:none;background:transparent;border-radius:0;
    flex-direction:column;gap:6px;color:var(--ink-dark);font-family:var(--font-g);
    font-size:14px;font-weight:400;letter-spacing:.04em}
  .recruit-mini .ic-recruit{width:44px;height:44px;color:var(--aqua-btn)}
  .recruit-mini:hover{transform:scale(1.03)}
  /* MENU: 水色塗り円 + 白い太3本線(ピル形) + 白MENU。先方見本に合わせフラット(影なし) */
  /* MENU: 見本どおり 水色円 + 白い太3本線(ピル形) + 白MENU */
  .burger{width:92px;height:92px;gap:9px;padding-bottom:11px}   /* やや上目・隙間広め */
  .burger span{width:54px;height:4px}            /* 少し横長・少し細く(先方指摘) */
  .burger small{font-size:11px;letter-spacing:.14em}   /* 位置は base の絶対配置(bottom:14%) */
  .hdr__logo img{height:96px}
  /* フッター タイポgrafi(幾何はhome側) */
  .foot-nav a{font-size:20px;font-weight:500;letter-spacing:.06em;gap:11px}
  .foot-nav a::before{width:15px;height:15px;background:var(--aqua-btn)}
  .foot-dots{height:4px;background-size:16px 4px}
  .foot__info{font-size:15px;line-height:2.0}
  .foot__info svg{width:14px;height:14px;margin-right:6px;color:var(--ink-dark);stroke-width:2}
  .foot-insta{font-size:19px;font-weight:500;color:var(--ink-dark);gap:10px}
  .foot-insta svg{width:26px;height:26px;color:var(--aqua-d)}
}

/* =========================================================
   先方指摘の共通修正(2026-06-24) — 全ページ共通
   ========================================================= */
/* 本文を設計の濃さに(薄すぎ是正): 角ゴ Regular + 濃色 */
body{font-weight:400;color:#241F1C}
:root{--ink:#241F1C;--ink2:#4A443D;--ink-soft:#5E574D;--ink-dark:#241F1C;}
/* PAGE TOP: 設計=塗り円(水色)+白文字・白矢印(薄青+青字を是正) */
.pagetop{background:var(--aqua-btn);color:#fff}
.pagetop:hover{background:var(--aqua-btn-d)}
@media (min-width:860px){
  /* PCはヘッダーが背高なので、メニュー項目が隠れないよう上余白を確保(Edge/Firefox食い込み対策) */
  .menu{padding-top:164px}
  /* フッターの過大な余白を縮小(home以外・設計のコンパクトなフッターに) */
  body:not(.home) .foot{padding:48px 20px 56px}
  body:not(.home) .foot-dots{margin-top:44px}
  body:not(.home) .pagetop{margin:56px auto 28px}
  body:not(.home) .foot-nav{padding:30px 150px 6px}
}