/* =========================================================
   STELLA 共通デザイントークン & 共通CTA帯
   全ページで最初に読み込む共通CSS。
   トップページ(front-page)の :root と .cta-band をそのまま集約。
   各ページのテンプレートは、CTAを下記の class="cta-band" ブロックに
   差し替えることで、トップと完全に同一のCTAになる。
   ========================================================= */

:root {
  --color-orange: #F26522;
  --color-orange-dark: #d5501a;
  --color-teal: #17A2A2;
  --color-red: #F0502A;
  --color-yellow: #F5A623;
  --color-green: #7AB51D;
  --color-text: #2E2A26;
  --color-text-sub: #4a453f;
  --color-bg-cream: #FCF5EE;
  --font-jp: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Poppins", sans-serif;
}

/* ===== 共通CTA帯 (トップの .cta-band と完全一致) =====
   ※ トップCSSにも .cta-band があるが、下層ページでは
   トップCSSを読み込まないため、ここで同じ定義を持たせる。
   万一トップCSSも同時に読み込まれても同一定義なので競合しない。 */
.cta-band {
  position: relative;
  background: var(--color-orange);
  padding: 52px 0;
  overflow: hidden;
}
.cta-band-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.cta-band-text { color: #fff; flex: 1; }
.cta-band-italic {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.9;
}
.cta-band-title { font-size: 32px; font-weight: 900; margin-top: 6px; }
.cta-band-sub { margin-top: 10px; font-size: 16px; font-weight: 500; opacity: 0.95; }
.cta-band-btn {
  background: #fff;
  color: var(--color-orange);
  font-weight: 800;
  font-size: 18px;
  padding: 22px 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
  text-decoration: none;
}
.cta-band-arrow {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  align-items: center;
  justify-content: center;
}
.cta-band-mascot { width: 150px; height: auto; margin-bottom: -52px; }
.cta-deco-star { position:absolute; top: 20px; left: 4%; width: 26px; opacity: 0.85; filter: brightness(0) invert(1); }
.cta-deco-dots { position:absolute; bottom: -30px; right: 14%; width: 120px; opacity: 0.25; filter: brightness(0) invert(1); }

@media (max-width: 900px) {
  .cta-band-inner { flex-wrap: wrap; }
  .cta-band-mascot { display: none; }
}


/* =========================================================
   共通ファーストビュー (トップの .hero と同一スタイル)
   下層ページ用に .st-fv 名前空間で提供。
   写真だけ各ページ固有、装飾はトップ共通(script.png / mascot.png /
   hero-blue-accent.png)を参照。見出しは日本語(900) + 英語ラベル。
   ========================================================= */
.st-fv {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px 56px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
  align-items: center;
}

/* 左上に散らすドット(トップの hero-dot と同じ) */
.st-fv__dot { position: absolute; border-radius: 50%; }
.st-fv__dot--y { width: 14px; height: 14px; background: var(--color-yellow); left: 340px; top: 120px; }
.st-fv__dot--o { width: 9px;  height: 9px;  background: var(--color-orange); left: 372px; top: 96px; }
.st-fv__dotpattern {
  position: absolute; left: 10px; bottom: 60px; width: 120px; height: 120px; opacity: 0.5;
  background: radial-gradient(circle 3px at 3px 3px, var(--color-yellow) 2px, transparent 3px);
  background-size: 20px 20px;
}

.st-fv__copy { position: relative; z-index: 2; }
/* 見出し: トップの .section-title / .section-label と同じ流儀 */
.st-fv__title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.st-fv__title .accent { color: var(--color-orange); }
.st-fv__en {
  font-family: var(--font-en);
  color: var(--color-orange);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 14px;
  margin-top: 10px;
  display: inline-block;
}
.st-fv__lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 2.1;
  color: var(--color-text-sub);
  font-weight: 500;
}

/* 右: ブロブ写真 + 装飾(トップの hero-media と同じ) */
.st-fv__media { position: relative; }
.st-fv__photo {
  width: 100%;
  /* 切り抜きはトップページ(.hero-photo)と完全に統一する。
     style.css の .hero-photo と同じ比率・形・影を使うこと。 */
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  border-radius: 46% 54% 58% 42% / 56% 46% 54% 44%;
  box-shadow: 0 20px 50px rgba(120,90,60,0.18);
}
/* マスク画像で切り抜く場合、box-shadowは形に沿わないので消す(inline styleで上書き) */
.st-fv__photo[style*="mask"] { box-shadow: none; }
.st-fv__photo img { width: 100%; height: 100%; object-fit: cover; }
.st-fv__photo--noimg {
  display: flex; align-items: center; justify-content: center;
  background: #f0eae5; color: #b5aca4; font-size: 15px;
}
.st-fv__script { position: absolute; top: -6px; left: -40px; width: 210px; height: auto; z-index: 4; }
.st-fv__mascot {
  position: absolute; right: 6px; bottom: -28px; width: 140px; height: auto;
  z-index: 3; /* 浮遊アニメは下部「FVモーション」で指定 */
}
.st-fv__blue { position: absolute; left: -30px; bottom: -40px; width: 190px; height: auto; opacity: 0.9; z-index: 2; }
.st-fv__dot--sm { width: 16px; height: 16px; background: var(--color-yellow); right: 24px; top: 34px; }
.st-fv__dot--xs { width: 10px; height: 10px; background: var(--color-yellow); right: 60px; top: 70px; }

@media (max-width: 900px) {
  .st-fv { grid-template-columns: 1fr; }
  .st-fv__title { font-size: 34px; }
  .st-fv__dot--y, .st-fv__dot--o, .st-fv__dotpattern { display: none; }
  .st-fv__media { max-width: 460px; margin: 0 auto; }
}

/* ファーストビュー 追加装飾(トップと同じ素材を散らす) */
.st-fv__deco { position: absolute; pointer-events: none; z-index: 1; }
.st-fv__deco--dots-tl { top: 0; left: -10px; width: 90px; opacity: .5; }
.st-fv__deco--dots-bl { bottom: 20px; left: 0; width: 110px; opacity: .45; }
.st-fv__deco--star-l  { top: 46%; left: 40%; width: 30px; opacity: .9; z-index: 3; }
.st-fv__deco--star-tr { top: -6px; right: 8%; width: 30px; opacity: .9; z-index: 3; }

@media (max-width: 900px) {
  .st-fv__deco--dots-tl, .st-fv__deco--dots-bl, .st-fv__deco--star-l { display: none; }
}


/* =========================================================
   ヘッダー: PC横並び微調整 + ハンバーガー/ドロワー
   ========================================================= */

/* --- PC: メニューが入りきるよう余白・文字を微調整 --- */
@media (min-width: 1025px) {
  .site-header .nav-list { gap: 18px; }
  .site-header .nav-list a { font-size: 15px; white-space: nowrap; }
  .site-header .btn-primary { font-size: 14px; padding: 14px 22px; white-space: nowrap; }
  .site-header .header-inner { gap: 14px; }
}
/* 幅がやや狭いPC(〜1200px)ではさらに詰める */
@media (min-width: 1025px) and (max-width: 1200px) {
  .site-header .nav-list { gap: 12px; }
  .site-header .nav-list a { font-size: 14px; }
  .site-header .btn-primary { font-size: 13px; padding: 12px 16px; }
  .site-header .sns-icons { gap: 8px; }
  .site-header .sns-icons img { width: 22px; height: 22px; }
}

.header-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* --- ハンバーガーボタン(PCでは非表示) --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: none; background: transparent; cursor: pointer;
  padding: 0; margin-left: auto;
}
.nav-toggle__bar {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: var(--color-text, #2E2A26); margin: 0 auto;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- ドロワー(右スライドイン) --- */
.mobile-drawer {
  position: fixed; top: 0; right: 0; z-index: 9999;
  width: 300px; max-width: 82vw; height: 100%;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 76px 28px 96px;   /* 下は広めに。右下固定ウィジェットとの重なり回避 */
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__close {
  position: absolute; top: 18px; right: 20px;
  width: 40px; height: 40px; border: none; background: transparent;
  font-size: 34px; line-height: 1; color: var(--color-text, #2E2A26);
  cursor: pointer;
}
.mobile-drawer__nav .mobile-nav-list {
  list-style: none; margin: 0 0 24px; padding: 0;
}
.mobile-drawer__nav .mobile-nav-list li { border-bottom: 1px solid #f0e8e1; }
.mobile-drawer__nav .mobile-nav-list a {
  display: block; padding: 16px 4px; font-size: 16px; font-weight: 700;
  color: var(--color-text, #2E2A26); text-decoration: none;
}
.mobile-drawer__nav .mobile-nav-list a:hover { color: var(--color-orange, #F26522); }
.mobile-drawer__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--color-orange, #F26522); color: #fff; font-weight: 800; font-size: 15px;
  padding: 15px 20px; border-radius: 40px; text-decoration: none; margin-bottom: 24px;
  box-shadow: 0 8px 18px rgba(242,101,34,.3);
}
/* ドロワーは flex column なので、そのままだとメニューが伸びた分
   下にある CTA と SNS が押し潰されて見えなくなる。
   flex-shrink:0 で潰れないようにし、SNSは常に最下部へ寄せる。 */
.mobile-drawer__nav { flex: 0 0 auto; }
.mobile-drawer__cta { flex: 0 0 auto; margin-bottom: auto; }
/* 【重要】SNSはCTAの「上」に置く（header.php の並び順もそれに合わせている）。
   画面右下にはチャットウィジェット等が固定表示され、z-index がドロワーより
   高いことがある。SNSを最下部に置くとその当たり判定に重なり、
   タップが奪われて「PCでは開くのにスマホだけ反応しない」状態になる。 */
.mobile-drawer__sns {
  flex: 0 0 auto;
  margin: 0 0 22px;
  padding: 18px 0;
  border-top: 1px solid #f0e8e1;
  border-bottom: 1px solid #f0e8e1;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  position: relative;
  z-index: 2;
}
.mobile-drawer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;               /* タップしやすい大きさを確保 */
  height: 44px;
  flex: 0 0 auto;
}
.mobile-drawer__sns img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* --- オーバーレイ --- */
.mobile-drawer-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s ease;
}
.mobile-drawer-overlay.is-visible { opacity: 1; }

/* --- 切り替え: 1024px以下でハンバーガー、PCナビ等を隠す --- */
@media (max-width: 1024px) {
  .site-header .main-nav,
  .site-header .btn-primary,
  .site-header .sns-icons { display: none; }
  .nav-toggle { display: flex; }
  .site-header .header-inner { justify-content: space-between; }
}
@media (min-width: 1025px) {
  .mobile-drawer, .mobile-drawer-overlay { display: none; }
}


/* 共通パンくず(.st-crumb) — 会社概要/事業内容/強みなどで使用 */
.st-crumb {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 40px 0;
  font-size: 13px;
  font-weight: 500;
  color: #8a847f;
  position: relative;
  z-index: 2;
}
.st-crumb a { color: var(--color-orange, #F26522); text-decoration: none; }
.st-crumb a:hover { text-decoration: underline; }
.st-crumb .sep { margin: 0 8px; color: #c9c2bc; }

@media (max-width: 600px) {
  .st-crumb { padding: 18px 20px 0; }
}


/* =========================================================
   ファーストビュー モーション（全ページ共通）
   --------------------------------------------------------
   対象:
     .st-fv       … 共通FV（スタッフ / 事業内容 / 強み / お知らせ / 採用）
     .hero        … トップページ
     .company-title … 会社概要（独自FV）
     .st-ct-title   … お問い合わせ（独自FV）
   方針:
     1) 要素ごとの時間差登場（写真 → コピー → 英字 → 装飾）
     2) 常時のゆらぎ（明滅・漂い・浮遊・写真のゆっくりズーム）
     3) マウス追従の視差（PC・hover環境のみ / JSが --px --py を更新）
     4) prefers-reduced-motion ですべて停止
   ※ 視差は transform ではなく translate プロパティで指定。
      登場アニメ(transform)と別プロパティなので互いに打ち消さない。
   ========================================================= */

/* --- 登場アニメーション定義 --- */
@keyframes st-rise {            /* 下から浮き上がる */
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes st-pop {             /* 奥から手前へ */
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes st-fade {            /* ふわっと */
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes st-slide-left {      /* 左から */
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- 常時ゆらぎ --- */
@keyframes st-twinkle {         /* スパークル明滅 */
  0%, 100% { opacity: .95; transform: scale(1); }
  50%      { opacity: .45; transform: scale(0.88); }
}
@keyframes st-drift {           /* ドットがゆっくり漂う */
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(6px, -8px); }
  66%      { transform: translate(-5px, 5px); }
}
@keyframes st-kenburns {        /* 写真のゆっくりズーム */
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@keyframes st-floaty {          /* マスコットの浮遊 */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes st-breathe {         /* バッジがゆっくり呼吸 */
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* タイプライター対象の初期チラつき防止(JSが visibility を制御) */
[data-typewriter] { min-height: 1em; }


/* =========================================================
   [A] 共通FV (.st-fv) ─ スタッフ / 事業内容 / 強み / お知らせ / 採用
   ========================================================= */
/* 1. 写真 */
.st-fv__photo        { animation: st-pop 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.10s both; }
/* 2. コピー（タイトル・英字・リード文の枠） */
.st-fv__copy         { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.25s both; }
/* 3. 英字ラベル */
.st-fv__en           { animation: st-slide-left 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.55s both; }
/* 4. 手書き文字 */
.st-fv__script       { animation: st-fade 0.9s ease-out 0.75s both; }
/* 5. 水色曲線 */
.st-fv__blue         { animation: st-fade 0.9s ease-out 0.90s both; }
/* 6. マスコット（登場 → そのあと浮遊が続く） */
.st-fv__mascot {
  animation:
    st-pop 0.7s cubic-bezier(0.34,1.4,0.64,1) 1.00s both,
    st-floaty 4s ease-in-out 1.7s infinite;
}
/* 7. 装飾（ドット群・スパークル）は最後に */
.st-fv__deco--dots-tl { animation: st-fade 0.8s ease-out 1.15s both, st-drift 9s ease-in-out 2s infinite; }
.st-fv__deco--dots-bl { animation: st-fade 0.8s ease-out 1.25s both, st-drift 11s ease-in-out 2.4s infinite; }
.st-fv__deco--star-l  { animation: st-fade 0.6s ease-out 1.35s both, st-twinkle 3.2s ease-in-out 2s infinite; }
.st-fv__deco--star-tr { animation: st-fade 0.6s ease-out 1.45s both, st-twinkle 2.6s ease-in-out 2.3s infinite; }
/* 8. 小さな丸ドット */
.st-fv__dot--y  { animation: st-fade .5s ease-out 1.20s both, st-drift 8s ease-in-out 2s infinite; }
.st-fv__dot--o  { animation: st-fade .5s ease-out 1.30s both, st-drift 10s ease-in-out 2.2s infinite; }
.st-fv__dot--sm { animation: st-fade .5s ease-out 1.35s both, st-drift 9s ease-in-out 2.1s infinite; }
.st-fv__dot--xs { animation: st-fade .5s ease-out 1.45s both, st-drift 12s ease-in-out 2.5s infinite; }
.st-fv__dotpattern { animation: st-fade .8s ease-out 1.10s both, st-drift 14s ease-in-out 2s infinite; }
/* 写真のゆっくりズーム（マスク形は保ったまま中身だけ拡大） */
.st-fv__photo img { animation: st-kenburns 18s ease-in-out 1.2s infinite alternate; will-change: transform; }


/* =========================================================
   [B] トップページ (.hero)
   ※ 以前の「.hero 全体を一括フェードイン」は廃止し、
      下層ページと同じ“時間差で組み上がる”演出に統一。
   ========================================================= */
.hero-photo        { animation: st-pop 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.10s both; }
.hero-heading      { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.25s both; }
.hero-text         { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.45s both; }
.hero-buttons      { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.65s both; }
.hero-script       { animation: st-fade 0.9s ease-out 0.75s both; }
.hero-blue-accent  { animation: st-fade 0.9s ease-out 0.90s both; }
.hero-mascot {
  animation:
    st-pop 0.7s cubic-bezier(0.34,1.4,0.64,1) 1.00s both,
    st-floaty 4s ease-in-out 1.7s infinite;
}
.hero-dashed-line  { animation: st-fade 0.9s ease-out 1.05s both; }
.hero-badge {
  animation:
    st-pop 0.7s cubic-bezier(0.34,1.4,0.64,1) 1.15s both,
    st-breathe 3.6s ease-in-out 1.9s infinite;
}
.hero-dots-pattern      { animation: st-fade .8s ease-out 1.10s both, st-drift 14s ease-in-out 2s infinite; }
.hero-dot--yellow       { animation: st-fade .5s ease-out 1.20s both, st-drift 8s  ease-in-out 2s   infinite; }
.hero-dot--orange       { animation: st-fade .5s ease-out 1.30s both, st-drift 10s ease-in-out 2.2s infinite; }
.hero-dot--top          { animation: st-fade .5s ease-out 1.35s both, st-drift 9s  ease-in-out 2.1s infinite; }
.hero-dot--top2         { animation: st-fade .5s ease-out 1.45s both, st-drift 12s ease-in-out 2.5s infinite; }
.hero-photo img { animation: st-kenburns 18s ease-in-out 1.2s infinite alternate; will-change: transform; }


/* =========================================================
   [C] 会社概要 (.company-title)
   ========================================================= */
.company-title h1        { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.15s both; }
.company-title .eyebrow  { animation: st-slide-left 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.45s both; }
.deco-title-burst { animation: st-fade 0.8s ease-out 0.70s both, st-twinkle 3.2s ease-in-out 1.6s infinite; }
.deco-title-ring  { animation: st-fade 0.8s ease-out 0.85s both, st-drift 12s ease-in-out 1.8s infinite; }


/* =========================================================
   [D] お問い合わせ (.st-ct-title / 装飾)
   ========================================================= */
.st-ct-title h1        { animation: st-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.15s both; }
.st-ct-title__en       { animation: st-slide-left 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.45s both; }
.st-ct-title p         { animation: st-fade 0.9s ease-out 0.60s both; }
.st-ct-info__card:nth-of-type(1) { animation: st-rise 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.75s both; }
.st-ct-info__card:nth-of-type(2) { animation: st-rise 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.90s both; }
.st-ct-deco--blob1 { animation: st-fade 1s ease-out 0.95s both, st-drift 16s ease-in-out 2s   infinite; }
.st-ct-deco--blob2 { animation: st-fade 1s ease-out 1.05s both, st-drift 18s ease-in-out 2.4s infinite; }
.st-ct-deco--dots  { animation: st-fade .8s ease-out 1.15s both, st-drift 12s ease-in-out 2.2s infinite; }


/* =========================================================
   [E] ファーストビューの浮遊モーション
   --------------------------------------------------------
   JSが .st-fv / .hero / .company-title / .st-contact に
   is-parallax を付け、--px --py（-1〜1）を毎フレーム更新する。
   ・常時ゆっくり漂う「自動ドリフト」＝スマホでも動く
   ・PCでマウスを動かすとそちらが優先（2.5秒で自動に復帰）
   ※ transition は入れない。毎フレーム値が変わると transition が
     再始動して二重に鈍るため、補間はJS側(lerp)で行っている。
   ========================================================= */

.st-fv__media, .st-fv__copy, .st-fv__mascot,
.st-fv__deco--dots-tl, .st-fv__deco--dots-bl, .st-fv__dotpattern,
.hero-media, .hero-copy, .hero-mascot, .hero-dots-pattern,
.company-title-inner, .deco-title-burst, .deco-title-ring,
.st-ct-title, .st-ct-deco--blob1, .st-ct-deco--blob2, .st-ct-deco--dots {
  will-change: translate;
}

/* 共通FV */
.st-fv.is-parallax .st-fv__media { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 20px); }
.st-fv.is-parallax .st-fv__copy  { translate: calc(var(--px, 0) * -15px) calc(var(--py, 0) * -11px); }
.st-fv.is-parallax .st-fv__mascot { translate: calc(var(--px, 0) * -35px) calc(var(--py, 0) * -24px); }
.st-fv.is-parallax .st-fv__deco--dots-tl,
.st-fv.is-parallax .st-fv__deco--dots-bl,
.st-fv.is-parallax .st-fv__dotpattern { translate: calc(var(--px, 0) * 44px) calc(var(--py, 0) * 33px); }

/* トップ */
.hero.is-parallax .hero-media { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 20px); }
.hero.is-parallax .hero-copy  { translate: calc(var(--px, 0) * -15px) calc(var(--py, 0) * -11px); }
.hero.is-parallax .hero-mascot { translate: calc(var(--px, 0) * -35px) calc(var(--py, 0) * -24px); }
.hero.is-parallax .hero-dots-pattern { translate: calc(var(--px, 0) * 44px) calc(var(--py, 0) * 33px); }

/* 会社概要 */
.company-title.is-parallax .company-title-inner { translate: calc(var(--px, 0) * -13px) calc(var(--py, 0) * -9px); }
.company-title.is-parallax .deco-title-burst,
.company-title.is-parallax .deco-title-ring { translate: calc(var(--px, 0) * 40px) calc(var(--py, 0) * 29px); }

/* お問い合わせ */
.st-contact.is-parallax .st-ct-title { translate: calc(var(--px, 0) * -13px) calc(var(--py, 0) * -9px); }
.st-contact.is-parallax .st-ct-deco--blob1,
.st-contact.is-parallax .st-ct-deco--blob2,
.st-contact.is-parallax .st-ct-deco--dots { translate: calc(var(--px, 0) * 40px) calc(var(--py, 0) * 29px); }

/* スマホは画面が狭く、大きく動くと窮屈に見えるので振れ幅を約6割に抑える */
@media (max-width: 700px) {
  .st-fv.is-parallax .st-fv__media { translate: calc(var(--px, 0) * 15px) calc(var(--py, 0) * 11px); }
  .st-fv.is-parallax .st-fv__copy  { translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -7px); }
  .st-fv.is-parallax .st-fv__mascot { translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -13px); }
  .st-fv.is-parallax .st-fv__deco--dots-tl,
  .st-fv.is-parallax .st-fv__deco--dots-bl,
  .st-fv.is-parallax .st-fv__dotpattern { translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 18px); }

  .hero.is-parallax .hero-media { translate: calc(var(--px, 0) * 15px) calc(var(--py, 0) * 11px); }
  .hero.is-parallax .hero-copy  { translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -7px); }
  .hero.is-parallax .hero-mascot { translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -13px); }
  .hero.is-parallax .hero-dots-pattern { translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 18px); }

  .company-title.is-parallax .company-title-inner { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px); }
  .company-title.is-parallax .deco-title-burst,
  .company-title.is-parallax .deco-title-ring { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 15px); }

  .st-contact.is-parallax .st-ct-title { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px); }
  .st-contact.is-parallax .st-ct-deco--blob1,
  .st-contact.is-parallax .st-ct-deco--blob2,
  .st-contact.is-parallax .st-ct-deco--dots { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 15px); }
}


/* =========================================================
   [F] 動きを減らす設定の人には全部止める
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .st-fv *, .hero *, .company-title *, .st-ct-title *,
  .st-fv__photo, .hero-photo, .company-title, .st-ct-title,
  .st-ct-info__card, .st-ct-deco--blob1, .st-ct-deco--blob2, .st-ct-deco--dots {
    animation: none !important;
    translate: none !important;
    transition: none !important;
  }
}


/* =========================================================
   フッターメニューを横一列に
   --------------------------------------------------------
   style.css の .footer-nav-list は 3列グリッド指定だが、
   フッターは1行に流したいので上書きする。

   ※ メニュー位置が未割り当てだと wp_nav_menu が既定の
     固定ページ一覧に切り替わり、menu_class が付かない。
     そのため .footer-nav 配下の ul 全般を対象にしている。
   ※ style.css は common-tokens.css より後に読まれるので、
     詳細度を上げて(.site-footer .footer-nav ul)勝たせている。
   ========================================================= */
.site-footer .footer-nav ul,
.site-footer .footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.site-footer .footer-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.site-footer .footer-nav a:hover {
  color: var(--color-orange);
  text-decoration: underline;
}

/* 幅が足りないときは折り返して2段に */
@media (max-width: 900px) {
  .site-footer .footer-nav ul,
  .site-footer .footer-nav-list { gap: 10px 20px; }
}
@media (max-width: 600px) {
  .site-footer .footer-nav ul,
  .site-footer .footer-nav-list { justify-content: flex-start; gap: 8px 16px; }
  .site-footer .footer-nav a { font-size: 13px; }
}


/* =========================================================
   会社沿革タイムライン (.st-history)
   --------------------------------------------------------
   PC(901px以上) = 横並び / スマホ(900px以下) = 縦積み
   1件が [年][マーカー][説明] の1ブロックなので、
   縦積みにしても年と説明の対応が崩れない。
   旧 .history-* のCSSは company-page.css に残っていても
   対象要素が無くなるため無害。
   ========================================================= */
.st-history {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.st-history__item { position: relative; }
.st-history__year {
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-orange, #F26522);
}
.st-history__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 線 */
.st-history__marker::before {
  content: "";
  position: absolute;
  background: #ECE2DB;
}
/* 丸 */
.st-history__dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #D9CFC7;
  box-sizing: border-box;
}
.st-history__item.is-milestone .st-history__dot {
  width: 19px;
  height: 19px;
  background: var(--color-orange, #F26522);
  border-color: var(--color-orange, #F26522);
  box-shadow: 0 0 0 5px rgba(242, 101, 34, .16);
}
.st-history__desc {
  font-size: 13px;
  line-height: 1.85;
  font-weight: 500;
  color: var(--color-text-sub, #4a453f);
}

/* ---------- PC: 横並び ---------- */
@media (min-width: 901px) {
  /* 【重要】各項目を個別のグリッドにすると、年が1行の列と2行の列で
     高さが揃わず、丸の位置が上下にずれる。
     display:contents で項目の枠を消し、年・マーカー・説明を
     すべて親グリッドの直接の子にして「行」を全列で共有させる。 */
  .st-history {
    grid-template-rows: auto 38px 1fr;   /* 年 / マーカー / 説明 */
    grid-auto-flow: column;              /* 列方向に流す = 1項目1列 */
    grid-auto-columns: 1fr;
    column-gap: 18px;
    align-items: stretch;
  }
  .st-history__item { display: contents; }

  .st-history__year   { grid-row: 1; text-align: center; align-self: end; padding-bottom: 2px; }
  .st-history__marker { grid-row: 2; }
  .st-history__desc   { grid-row: 3; }

  /* 横線。両端は半分だけ引いて線がはみ出さないようにする。
     column-gap の分も繋がるよう左右に広げる。 */
  .st-history__marker::before {
    left: -9px; right: -9px; top: 50%;
    height: 2px;
    transform: translateY(-50%);
  }
  .st-history__item:first-child  .st-history__marker::before { left: 50%; }
  .st-history__item:last-child   .st-history__marker::before { right: 50%; }
}

/* ---------- スマホ・タブレット: 縦積み ---------- */
@media (max-width: 900px) {
  .st-history { gap: 0; }
  .st-history__item {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas:
      "marker year"
      "marker desc";
    column-gap: 14px;
    padding-bottom: 26px;
  }
  .st-history__item:last-child { padding-bottom: 0; }
  .st-history__year   { grid-area: year; margin-bottom: 6px; font-size: 16px; }
  .st-history__desc   { grid-area: desc; font-size: 13.5px; }
  .st-history__marker {
    grid-area: marker;
    align-items: flex-start;
    padding-top: 4px;
  }
  /* 縦線。最後の項目では線を消す */
  .st-history__marker::before {
    top: 4px; bottom: -26px; left: 50%;
    width: 2px;
    transform: translateX(-50%);
  }
  .st-history__item:last-child .st-history__marker::before { display: none; }
  /* 年内の<br>は縦積みでは不要（横に流す） */
  .st-history__year br { display: none; }
}


/* =========================================================
   プライバシーポリシー (page-privacy.php)
   ========================================================= */
.st-privacy {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--color-text, #2E2A26);
  overflow-x: clip;
}
.st-privacy__wrap { max-width: 880px; margin: 0 auto; padding: 0 28px 70px; }

.st-privacy__head { text-align: center; padding: 40px 0 34px; }
.st-privacy__head h1 { font-size: 38px; font-weight: 900; letter-spacing: .03em; margin: 0 0 10px; }
.st-privacy__en {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; letter-spacing: .18em; font-size: 14px;
  color: var(--color-orange, #F26522);
  margin: 0 0 26px;
}
.st-privacy__lead { font-size: 15px; line-height: 2; font-weight: 500; color: var(--color-text-sub, #4a453f); margin: 0; }

.st-privacy__sec { margin-top: 44px; }
.st-privacy__sec h2 {
  font-size: 19px; font-weight: 900; margin: 0 0 16px;
  padding-left: 14px; border-left: 4px solid var(--color-orange, #F26522);
  line-height: 1.5;
}
.st-privacy__sec p { font-size: 14.5px; line-height: 2; font-weight: 500; color: var(--color-text-sub, #4a453f); margin: 0 0 14px; }
.st-privacy__sec p:last-child { margin-bottom: 0; }
.st-privacy__sec ul { margin: 0 0 14px; padding-left: 1.4em; }
.st-privacy__sec li { font-size: 14.5px; line-height: 1.95; font-weight: 500; color: var(--color-text-sub, #4a453f); margin-bottom: 6px; }
.st-privacy__sec a { color: var(--color-orange, #F26522); font-weight: 700; }

.st-privacy__dl {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px 20px;
  margin: 0; padding: 22px 26px;
  background: var(--color-bg-cream, #FCF5EE); border-radius: 14px;
}
.st-privacy__dl dt { font-size: 14px; font-weight: 700; }
.st-privacy__dl dd { font-size: 14px; font-weight: 500; margin: 0; line-height: 1.8; color: var(--color-text-sub, #4a453f); }

.st-privacy__sec--contact { margin-top: 54px; }
.st-privacy__revised { margin-top: 44px; text-align: right; font-size: 13px; font-weight: 500; color: #8a847f; }

@media (max-width: 600px) {
  .st-privacy__wrap { padding: 0 20px 50px; }
  .st-privacy__head h1 { font-size: 28px; }
  .st-privacy__lead { font-size: 14px; }
  .st-privacy__lead br { display: none; }
  .st-privacy__sec h2 { font-size: 17px; }
  .st-privacy__dl { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; }
  .st-privacy__dl dt { margin-top: 8px; }
  .st-privacy__dl dt:first-child { margin-top: 0; }
}


/* =========================================================
   CTA帯の見出しを1行に収める
   --------------------------------------------------------
   「リフォームのこと、何でもご相談ください！」は19文字あり、
   style.css の 32px だと、右のボタン(約330px)とマスコット(150px)に
   挟まれた幅では折り返してしまう。
   画面幅に応じて字送りを縮め、折り返しを禁止する。
   ※ style.css は common-tokens.css より後に読まれるため、
     .cta-band を付けて詳細度で上回らせている。
   ========================================================= */
.cta-band .cta-band-title {
  font-size: clamp(21px, 2.15vw, 31px);
  letter-spacing: -0.015em;
  white-space: nowrap;
  line-height: 1.35;
}
/* 縦積みに折り返す幅では、無理に1行にせず通常の折り返しに戻す */
@media (max-width: 900px) {
  .cta-band .cta-band-title {
    font-size: 22px;
    white-space: normal;
    letter-spacing: 0;
  }
}


/* =========================================================
   会社概要ページ ビジョンセクション (.company-vision)
   --------------------------------------------------------
   経営理念(左テキスト＋右写真)と代表挨拶(写真＋テキスト)の間に入るため、
   写真を持たない「中央寄せの帯」にしてリズムを変えている。
   背景はトップと同じクリーム色で、前後の白セクションと差をつける。
   ========================================================= */
.company-vision {
  position: relative;
  background: var(--color-bg-cream, #FCF5EE);
  padding: 84px 0 88px;
  margin-top: 20px;
  overflow: hidden;
}
.company-vision-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* 装飾（既存アセットの流用） */
.deco-vision-burst {
  position: absolute;
  top: 44px; left: 4%;
  width: 74px;
  opacity: .5;
  pointer-events: none;
}
.deco-vision-ring {
  position: absolute;
  right: -30px; bottom: -30px;
  width: 170px;
  opacity: .38;
  pointer-events: none;
}

/* 見出し */
.company-vision .section-label { margin-bottom: 26px; }

.vision-en {
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--color-orange, #F26522);
  margin: 0 0 12px;
}
.vision-lead {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 0 14px;
}
/* 見出し下のグラデーションバー（トップの strengths-bar と同じ考え方） */
.vision-lead::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  border-radius: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg,
    var(--color-orange, #F26522),
    var(--color-teal, #17A2A2),
    var(--color-green, #7AB51D),
    var(--color-yellow, #F5A623));
}

/* 本文 */
.vision-body { margin-top: 30px; }
.vision-body p {
  font-size: 15px;
  line-height: 2.1;
  font-weight: 500;
  color: var(--color-text-sub, #4a453f);
  margin: 0 0 20px;
}
.vision-body p:last-child { margin-bottom: 0; }

/* 「透明性」「高品質」をマーカーで強調 */
.vision-mark {
  font-weight: 700;
  color: var(--color-text, #2E2A26);
  background: linear-gradient(transparent 62%, rgba(242, 101, 34, .22) 62%);
  padding: 0 2px;
}

@media (max-width: 900px) {
  .company-vision { padding: 60px 0 64px; }
  .vision-lead { font-size: 23px; line-height: 1.7; }
  .deco-vision-ring { width: 120px; right: -40px; }
}
@media (max-width: 600px) {
  .company-vision-inner { padding: 0 20px; }
  .vision-lead { font-size: 20px; }
  .vision-lead br { display: none; }
  .vision-body p { font-size: 14px; line-height: 2; }
  .deco-vision-burst { width: 52px; left: 6%; }
}


/* =========================================================
   ロゴ差し替えに伴うサイズ調整
   --------------------------------------------------------
   新ロゴ(logo.png)は横型に組み直したもの（比率 約2.74:1）。
   マークを左、社名を右に配置しているので、高さ44pxでも
   「STELLA」が読める。style.css の指定でほぼ問題ないが、
   マスコットとのバランスだけ整えている。
   ※ 縦型のロックアップは logo-vertical.png として同梱。
   ========================================================= */
.header-logo .logo-img {
  height: 46px;
  width: auto;
}
.header-logo .mascot-icon {
  height: 54px;
  width: auto;
}
.footer-logo img:first-child { height: 42px; width: auto; }
.footer-logo img:last-child  { height: 50px; width: auto; }

@media (max-width: 1024px) {
  .header-logo .logo-img    { height: 40px; }
  .header-logo .mascot-icon { height: 46px; }
}
@media (max-width: 600px) {
  .header-logo .logo-img    { height: 34px; }
  .header-logo .mascot-icon { height: 40px; }
}


/* =========================================================
   準備中パネル (.st-coming)
   --------------------------------------------------------
   施工事例など、掲載前のセクションに置くプレースホルダー。
   トップページ(.works)とお知らせページ(.st-sec--works)の両方で使う。
   ========================================================= */
.st-coming {
  margin: 30px auto 0;
  max-width: 620px;
  padding: 46px 34px 42px;
  text-align: center;
  background: #fff;
  border: 1.5px dashed #e8d9cd;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(120, 90, 60, .07);
}
.st-coming__badge {
  display: inline-block;
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--color-orange, #F26522);
  background: #fdece4;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.st-coming__title {
  font-size: 21px;
  font-weight: 900;
  margin: 0 0 14px;
}
.st-coming__text {
  font-size: 14.5px;
  line-height: 2;
  font-weight: 500;
  color: var(--color-text-sub, #4a453f);
  margin: 0 0 26px;
}
/* パネル内のボタンは中央に置く */
.st-coming .btn-white,
.st-coming .st-btn-outline {
  margin-top: 0;
  display: inline-flex;
}

@media (max-width: 600px) {
  .st-coming { padding: 34px 22px 32px; border-radius: 18px; }
  .st-coming__title { font-size: 18px; }
  .st-coming__text { font-size: 13.5px; }
  .st-coming__text br { display: none; }
}


/* =========================================================
   本文の行末調整（末尾1文字だけが次行に落ちるのを防ぐ）
   --------------------------------------------------------
   text-wrap: pretty はブラウザが行分割を調整し、最終行に
   1〜2文字だけ残る「泣き別れ」を避けてくれる。
   未対応ブラウザでは単に無視されるだけなので安全。
   ========================================================= */
.strength-desc,
.work-title,
.st-card__text,
.division-body,
.reform-detail-item-body,
.it-detail-item-body,
.vision-body p,
.st-coming__text {
  text-wrap: pretty;
}


/* =========================================================
   ポッドキャストのサムネイルをリンク化した分の調整
   ========================================================= */
.podcast-video a {
  display: block;
  line-height: 0;
  border-radius: inherit;
}
.podcast-video a img { transition: transform .4s ease, opacity .3s ease; }
.podcast-video a:hover img { transform: scale(1.03); opacity: .92; }

@media (prefers-reduced-motion: reduce) {
  .podcast-video a img { transition: none; }
  .podcast-video a:hover img { transform: none; }
}


/* 投稿が無いときのお知らせ表示 */
.news-empty {
  padding: 26px 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-sub, #4a453f);
  border-bottom: 1px solid #ece3d8;
  margin: 0;
}


/* =========================================================
   投稿詳細ページ (single.php)
   --------------------------------------------------------
   お知らせ・施工事例の記事本文。
   本文の幅を絞って読みやすさを優先し、
   会社概要のビジョンセクションと同じ字送りに揃えている。
   ========================================================= */
.st-single {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--color-text, #2E2A26);
  overflow-x: clip;
}
.st-single__wrap { max-width: 820px; margin: 0 auto; padding: 0 28px 76px; }

/* --- 見出し --- */
.st-single__head { padding: 34px 0 30px; }
.st-single__meta {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.st-single__date {
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 600; font-size: 15px;
  color: var(--color-text-sub, #4a453f);
}
.st-single__cat {
  font-size: 12px; font-weight: 700;
  color: var(--color-orange, #F26522);
  background: #fdece4;
  padding: 5px 14px; border-radius: 999px;
}
.st-single__title {
  font-size: 30px; font-weight: 900; line-height: 1.55;
  letter-spacing: .01em; margin: 0 0 12px;
}
.st-single__en {
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 700; letter-spacing: .18em; font-size: 12px;
  color: var(--color-orange, #F26522);
  margin: 0;
}
.st-single__head::after {
  content: ""; display: block; width: 62px; height: 4px;
  border-radius: 3px; margin-top: 22px;
  background: linear-gradient(90deg,
    var(--color-orange, #F26522), var(--color-teal, #17A2A2),
    var(--color-green, #7AB51D), var(--color-yellow, #F5A623));
}

/* --- アイキャッチ --- */
.st-single__thumb { margin: 0 0 34px; border-radius: 18px; overflow: hidden; }
.st-single__thumb img { width: 100%; height: auto; display: block; }

/* --- 本文（エディタで書いた内容） --- */
.st-single__body { font-size: 15.5px; line-height: 2.05; font-weight: 500; color: var(--color-text-sub, #4a453f); }
.st-single__body > * { margin: 0 0 22px; }
.st-single__body > *:last-child { margin-bottom: 0; }
.st-single__body h2 {
  font-size: 22px; font-weight: 900; color: var(--color-text, #2E2A26);
  margin: 44px 0 18px; padding-left: 14px;
  border-left: 4px solid var(--color-orange, #F26522);
  line-height: 1.5;
}
.st-single__body h3 {
  font-size: 18px; font-weight: 900; color: var(--color-text, #2E2A26);
  margin: 36px 0 14px; line-height: 1.6;
}
.st-single__body a { color: var(--color-orange, #F26522); font-weight: 700; }
.st-single__body img { max-width: 100%; height: auto; border-radius: 12px; }
.st-single__body ul, .st-single__body ol { padding-left: 1.5em; }
.st-single__body li { margin-bottom: 8px; }
.st-single__body blockquote {
  background: var(--color-bg-cream, #FCF5EE);
  border-radius: 14px; padding: 22px 26px;
  font-size: 14.5px;
}
.st-single__body blockquote p:last-child { margin-bottom: 0; }
.st-single__body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.st-single__body th, .st-single__body td {
  border: 1px solid #ece3d8; padding: 12px 14px; text-align: left;
}
.st-single__body th { background: var(--color-bg-cream, #FCF5EE); font-weight: 700; }

/* --- 前後の記事・一覧へ戻る --- */
.st-single__nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: center;
  margin-top: 56px; padding-top: 34px;
  border-top: 1px solid #ece3d8;
}
.st-single__nav-side--right { text-align: right; }
.st-single__nav-link { display: inline-block; text-decoration: none; max-width: 100%; }
.st-single__nav-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--color-orange, #F26522); margin-bottom: 6px;
}
.st-single__nav-title {
  display: block; font-size: 14px; font-weight: 500;
  color: var(--color-text, #2E2A26); line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-single__nav-link:hover .st-single__nav-title { color: var(--color-orange, #F26522); }
.st-single__back {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid #e7ddd0; border-radius: 40px;
  padding: 13px 30px; font-weight: 700; font-size: 14px;
  color: var(--color-text, #2E2A26); text-decoration: none; white-space: nowrap;
}
.st-single__back:hover { border-color: var(--color-orange, #F26522); color: var(--color-orange, #F26522); }

@media (max-width: 700px) {
  .st-single__wrap { padding: 0 20px 54px; }
  .st-single__title { font-size: 22px; }
  .st-single__body { font-size: 14.5px; line-height: 1.95; }
  .st-single__body h2 { font-size: 19px; }
  .st-single__nav { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .st-single__nav-side--right { text-align: center; }
  .st-single__back { order: -1; }
}


/* =========================================================
   ファーストビューのスマホ表示 崩れ対策
   --------------------------------------------------------
   写真が読み込めないと .st-fv__photo の高さが 0 になり、
   その中に absolute で置いている装飾(マスコット・手書き文字・曲線)が
   行き場を失って上のテキストへ重なる。
   ・写真枠に min-height と背景を入れて潰れないようにする
   ・狭い画面では重なりやすい装飾を整理する
   ========================================================= */
.st-fv__photo {
  min-height: 200px;                 /* 写真が無くても枠が潰れない */
  background: var(--color-bg-cream, #FCF5EE);
}

@media (max-width: 900px) {
  /* 写真とコピーの間に余白を作り、装飾が食い込まないようにする */
  .st-fv__media { margin-top: 28px; }

  /* 手書き文字と曲線は左に大きくはみ出す設計なので、
     画面が狭いと本文に重なる。位置と大きさを内側に寄せる。 */
  .st-fv__script { left: -12px; top: -10px; width: 150px; }
  .st-fv__blue   { left: -10px; bottom: -20px; width: 130px; }
  .st-fv__mascot { right: 0; bottom: -18px; width: 108px; }

  /* 写真の下にマスコットが出る分の余白 */
  .st-fv { padding-bottom: 84px; }
}

@media (max-width: 600px) {
  /* さらに狭い端末では手書き文字を隠す。
     写真・マスコット・曲線だけ残すと窮屈にならない。 */
  .st-fv__script { display: none; }
  .st-fv__blue   { width: 108px; bottom: -14px; }
  .st-fv__mascot { width: 96px; }
  .st-fv__photo  { min-height: 170px; }
}


/* =========================================================
   横スクロール（横方向のはみ出し）対策
   --------------------------------------------------------
   ヘッダーは [ロゴ+マスコット][メニュー8項目][CTAボタン][SNS4個] と
   要素が多く、1240pxの枠に収まらない幅で右へはみ出していた。
   加えて、FVや各セクションの装飾は負の座標で外側に置いているため、
   画面が狭いとそれ自体もはみ出す。

   ・body で横方向だけを切り取る（clip は sticky ヘッダーを壊さない）
   ・ヘッダーは要素を縮められるようにし、SNSは余裕がない幅で隠す
     （SNSはフッターとハンバーガー内にもあるので導線は失われない）
   ========================================================= */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* --- ヘッダー右側: CTAボタンとSNSを縦に積む ---
   横に並べるとメニュー8項目と競合して収まらないため、
   右端は2行の縦積みにして横幅を節約する。
   [ロゴ] [------ メニュー ------] [CTA / SNS]
   ※ min-width:0 は使わない。メニューが縮むと文字がはみ出して重なる。 */
.header-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.header-actions .btn-primary { margin-left: 0; }
.header-actions .sns-icons { gap: 12px; }
.header-actions .sns-icons img { width: 24px; height: 24px; }

/* 狭い画面ではメニューの字間とボタンを詰める */
@media (min-width: 1025px) and (max-width: 1300px) {
  .site-header .header-inner { gap: 14px; padding-left: 20px; padding-right: 20px; }
  .site-header .main-nav { margin-left: 12px; }
  .site-header .nav-list { gap: 18px; font-size: 14px; }
  .header-actions .btn-primary { font-size: 13px; padding: 11px 18px; }
  .header-actions .sns-icons img { width: 21px; height: 21px; }
}

/* ハンバーガーに切り替わる幅では縦積み枠ごと隠す */
@media (max-width: 1024px) {
  .header-actions { display: none; }
}

/* --- 装飾のはみ出し対策 --- */
/* セクション自体で切り取っておくと、body側の clip に頼らずに済む */
.st-fv,
.news-insta,
.company-access {
  overflow-x: clip;
}


/* =========================================================
   電話発信フローティングボタン (.st-callbtn)
   --------------------------------------------------------
   【重要】z-index は 9999 未満にすること。
   モバイルドロワー(.mobile-drawer)が 9999 のため、
   これ以上にするとドロワー内のリンクの当たり判定を奪う。
   ========================================================= */
.st-callbtn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;                 /* ドロワー(9999)より必ず下 */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: var(--color-orange, #F26522);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(242, 101, 34, .38);
  transition: transform .25s ease, box-shadow .25s ease;
}
.st-callbtn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(242, 101, 34, .46);
}
.st-callbtn__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: inline-flex; align-items: center; justify-content: center;
}
.st-callbtn__icon svg { width: 19px; height: 19px; }
.st-callbtn__text { display: flex; flex-direction: column; line-height: 1.25; }
.st-callbtn__num {
  font-family: 'Poppins', var(--font-en, sans-serif);
  font-weight: 700; font-size: 19px; letter-spacing: .01em;
}
.st-callbtn__note { font-size: 11px; font-weight: 500; opacity: .9; }

/* --- スマホは丸ボタンだけにして画面を圧迫しない --- */
@media (max-width: 700px) {
  .st-callbtn {
    right: 16px; bottom: 16px;
    padding: 0;
    width: 60px; height: 60px;
    justify-content: center;
    gap: 0;
  }
  .st-callbtn__text { display: none; }
  .st-callbtn__icon { width: 60px; height: 60px; background: none; }
  .st-callbtn__icon svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-callbtn { transition: none; }
  .st-callbtn:hover { transform: none; }
}