/*
Theme Name: Sun Face
Theme URI: https://sunface-yamanashi.com/
Author: BAZZ inc.
Author URI: https://bazz-inc.com/
Description: 株式会社 Sun Face（山梨県甲府市の警備会社）コーポレートサイト用オリジナルテーマ。濃紺グラデーション + 明朝体タイポグラフィ + ロゴ透かしを基調としたクラシックテーマ。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunface
Tags: custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root {
  /* Color — base */
  --sf-navy:            #0B1030;
  --sf-navy-deep:       #070B24;
  --sf-navy-footer:     #080C26;
  --sf-navy-line:       #1B2160;
  --sf-navy-mid:        #12194A;
  --sf-navy-photo-bg:   #252C6E;

  /* Color — text on light */
  --sf-text:            #1A1D3A;
  --sf-heading:         #0B1030;
  --sf-muted:           #3F4A6B;
  --sf-muted-2:         #5B6670;
  --sf-muted-3:         #4A555F;
  --sf-muted-4:         #3B454E;
  --sf-meta:            #8B949C;
  --sf-body-post:       #26313A;

  /* Color — text on dark */
  --sf-on-dark:         rgba(255,255,255,0.82);
  --sf-on-dark-strong:  rgba(255,255,255,0.9);
  --sf-on-dark-soft:    rgba(255,255,255,0.7);
  --sf-on-dark-cue:     rgba(255,255,255,0.72);
  --sf-on-dark-mute:    #B8C2CA;
  --sf-on-dark-mute-2:  #8E9AA5;
  --sf-on-dark-mute-3:  #9AA6AF;
  --sf-on-dark-link:    #D8DEE3;
  --sf-copyright:       #6F7C86;

  /* Color — accent */
  --sf-amber:           #F5A831;
  --sf-amber-dark:      #DA9017;
  --sf-amber-text:      #141A46;
  --sf-link-hover:      #A97710;
  --sf-blue:            #2A6FC0;
  --sf-blue-light:      #7FD0F5;

  /* Color — recruit */
  --sf-pink-bg:         #2A0B26;
  --sf-pink-stat:       #4A1240;

  /* Rules */
  --sf-rule-light:      rgba(27,33,96,0.10);
  --sf-rule-light-2:    rgba(27,33,96,0.12);
  --sf-rule-light-3:    rgba(27,33,96,0.24);
  --sf-rule-light-4:    rgba(27,33,96,0.25);
  --sf-rule-dark:       rgba(255,255,255,0.12);
  --sf-rule-dark-2:     rgba(255,255,255,0.4);
  --sf-hairline:        #DDDAD1;
  --sf-hairline-2:      #E2E0D9;
  --sf-hairline-3:      #E7E5DE;
  --sf-field-border:    #D6D3C9;
  --sf-field-bg:        #FAF9F6;

  /* Gradients */
  --sf-grad-dark:
    radial-gradient(54% 76% at 10% 12%, rgba(150,72,232,0.45) 0%, rgba(9,13,40,0) 66%),
    radial-gradient(58% 72% at 90% 88%, rgba(53,201,240,0.45) 0%, rgba(9,13,40,0) 68%),
    #0B1030;
  --sf-grad-about:
    radial-gradient(62% 70% at 16% 8%, rgba(150,72,232,0.42) 0%, rgba(8,12,38,0) 66%),
    radial-gradient(58% 66% at 88% 92%, rgba(53,201,240,0.42) 0%, rgba(8,12,38,0) 68%),
    linear-gradient(180deg, #070B24 0%, #0B1030 52%, #12194A 100%);
  --sf-grad-recruit:
    radial-gradient(52% 56% at 12% 10%, rgba(232,72,158,0.5) 0%, rgba(40,9,30,0) 66%),
    radial-gradient(56% 60% at 88% 86%, rgba(255,124,186,0.42) 0%, rgba(40,9,30,0) 68%),
    radial-gradient(44% 48% at 66% 22%, rgba(180,64,214,0.34) 0%, rgba(40,9,30,0) 68%),
    #2A0B26;
  --sf-grad-cta:
    radial-gradient(60% 150% at 16% 30%, rgba(150,72,232,0.42) 0%, rgba(9,13,40,0) 66%),
    radial-gradient(60% 140% at 90% 70%, rgba(53,201,240,0.42) 0%, rgba(9,13,40,0) 68%),
    #0B1030;
  --sf-grad-footer:
    radial-gradient(56% 80% at 10% 8%, rgba(150,72,232,0.34) 0%, rgba(7,11,36,0) 64%),
    radial-gradient(52% 74% at 92% 92%, rgba(53,201,240,0.34) 0%, rgba(7,11,36,0) 66%),
    #080C26;
  --sf-grad-body:
    radial-gradient(52% 48% at 8% 4%, rgba(53,201,240,0.26) 0%, rgba(248,248,252,0) 62%),
    radial-gradient(46% 44% at 92% 14%, rgba(150,72,232,0.16) 0%, rgba(248,248,252,0) 64%),
    radial-gradient(58% 54% at 74% 88%, rgba(58,132,255,0.16) 0%, rgba(248,248,252,0) 62%),
    radial-gradient(40% 40% at 30% 62%, rgba(255,198,146,0.18) 0%, rgba(248,248,252,0) 66%),
    #F8F8FC;
  --sf-grad-hero-scrim:
    linear-gradient(102deg, rgba(7,11,36,0.94) 0%, rgba(7,11,36,0.8) 38%, rgba(7,11,36,0.42) 66%, rgba(7,11,36,0.72) 100%);
  --sf-grad-subhero-scrim:
    radial-gradient(56% 76% at 12% 10%, rgba(150,72,232,0.2) 0%, rgba(9,13,40,0) 68%),
    radial-gradient(58% 72% at 90% 88%, rgba(53,201,240,0.18) 0%, rgba(9,13,40,0) 70%),
    linear-gradient(180deg, rgba(7,11,36,0.32) 0%, rgba(11,16,48,0.18) 55%, rgba(11,16,48,0.32) 100%);
  --sf-grad-placeholder:
    linear-gradient(140deg, rgba(127,208,245,0.30), rgba(245,168,49,0.16) 55%, rgba(255,255,255,0.55));

  /* Typography */
  --sf-font-jp: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sf-font-en: 'Cormorant Garamond', 'Shippori Mincho', serif;

  /* Layout */
  --sf-w-wide:   1240px;
  --sf-w-mid:    1180px;
  --sf-w-narrow: 900px;
  --sf-w-post:   800px;
  --sf-gutter:   clamp(18px, 4vw, 28px);
  --sf-section:  clamp(64px, 9vw, 124px);
  --sf-header-h: 76px;
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sf-font-jp);
  font-size: 16px;
  line-height: 1.75;
  color: var(--sf-text);
  background: var(--sf-grad-body);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
a { color: var(--sf-navy-line); text-decoration: none; }
a:hover { color: var(--sf-link-hover); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* 角丸は全要素で使わない（デザイン決めごと） */
button, input, select, textarea, img, .sf-card, .sf-badge { border-radius: 0; }

:focus-visible { outline: 2px solid var(--sf-amber); outline-offset: 2px; }

.sf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--sf-navy); padding: 12px 20px;
}
.sf-skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.sf-wrap        { max-width: var(--sf-w-wide);   margin: 0 auto; padding-left: var(--sf-gutter); padding-right: var(--sf-gutter); }
.sf-wrap--mid   { max-width: var(--sf-w-mid); }
.sf-wrap--narrow{ max-width: var(--sf-w-narrow); }
.sf-wrap--post  { max-width: var(--sf-w-post); }

.sf-section { padding: var(--sf-section) 0; background: transparent; }
.sf-section--lg { padding: clamp(76px, 10vw, 144px) 0; }
.sf-section--white {
  background: #fff;
  border-top: 1px solid var(--sf-hairline-2);
  border-bottom: 1px solid var(--sf-hairline-2);
}
.sf-section--frost {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(27,33,96,0.08);
}
.sf-section--frost-60 { background: rgba(255,255,255,0.6); }

.sf-center { text-align: center; }

/* 見出しブロック */
.sf-heading { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.sf-label {
  margin: 0 0 22px;
  font-family: var(--sf-font-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(11,16,48,0.6);
}
.sf-label--on-dark { color: var(--sf-on-dark-soft); }
.sf-label--amber {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--sf-amber);
}
.sf-h2 {
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--sf-heading);
}
.sf-h2--display { font-size: 47px; line-height: 1.34; letter-spacing: 0.01em; margin: 0 0 30px; }
.sf-h2--md { font-size: clamp(24px, 2.9vw, 36px); }
.sf-h2--sm { font-size: clamp(23px, 2.5vw, 30px); margin: 0 0 30px; }
.sf-h2--flush { margin: 0; }
.sf-lead {
  margin: 0 auto;
  max-width: 30em;
  color: var(--sf-muted);
  font-size: 15px;
  line-height: 2;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.sf-btn {
  display: inline-block;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 19px 38px;
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sf-btn:hover { text-decoration: none; }

.sf-btn--outline-light { color: #fff; border: 1px solid rgba(255,255,255,0.75); }
.sf-btn--outline-light:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sf-btn--outline-light-soft { color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.sf-btn--outline-light-soft:hover { background: rgba(255,255,255,0.14); color: #fff; }

.sf-btn--outline-dark { color: var(--sf-navy); border: 1px solid rgba(11,16,48,0.7); }
.sf-btn--outline-dark:hover { background: rgba(11,16,48,0.08); color: var(--sf-navy); }

.sf-btn--navy { background: var(--sf-navy-line); color: #fff; padding: 16px 28px; font-weight: 700; letter-spacing: 0.06em; }
.sf-btn--navy:hover { background: var(--sf-amber); color: #fff; }

.sf-btn--amber { background: var(--sf-amber); color: var(--sf-amber-text); padding: 18px 32px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.sf-btn--amber:hover { background: var(--sf-amber-dark); color: var(--sf-amber-text); }

.sf-btn--block { display: block; width: 100%; }

.sf-btn-text {
  background: none; border: 0; cursor: pointer;
  color: var(--sf-heading);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  padding: 8px 0; text-decoration: none;
}
.sf-btn-text:hover { color: var(--sf-blue); text-decoration: none; }
.sf-btn-text--bold { color: var(--sf-navy-line); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.sf-btn-text--bold:hover { color: var(--sf-amber); }
.sf-btn-text--back { color: var(--sf-muted-2); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.sf-btn-text--back:hover { color: var(--sf-amber); }

/* ==========================================================================
   5. Watermark mark (CSS mask)
   ========================================================================== */
.sf-mark {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(58vw, 620px);
  aspect-ratio: 1 / 1;
  display: block;
  pointer-events: none;
  z-index: 2;
  opacity: 0.2;
}
.sf-mark__layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block;
  background-size: 280% 280%;
  animation: sfShift 11s ease-in-out 0s infinite;
}
.sf-mark__layer--inner {
  background-image: linear-gradient(135deg, #5AA8FF 0%, #7FD0F5 34%, #D9F1FF 62%, #FFFFFF 100%);
  -webkit-mask: var(--sf-mask-navy) center / contain no-repeat;
          mask: var(--sf-mask-navy) center / contain no-repeat;
}
.sf-mark__layer--outer {
  background-image: linear-gradient(135deg, #F5A831 0%, #FFC862 46%, #FFE9A8 76%, #FFFFFF 100%);
  -webkit-mask: var(--sf-mask-amber) center / contain no-repeat;
          mask: var(--sf-mask-amber) center / contain no-repeat;
}
/* RECRUIT 帯では内側レイヤーをローズ系に */
.sf-mark--rose .sf-mark__layer--inner {
  background-image: linear-gradient(135deg, #FFB7DE 0%, #FF8FC6 34%, #FFE3F2 62%, #FFFFFF 100%);
}
.sf-mark--hero {
  right: auto;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: min(112vw, 98vh);
  z-index: 1;
}
.sf-mark--sub    { opacity: 0.22; }
.sf-mark--footer { opacity: 0.16; z-index: 1; }

/* ==========================================================================
   6. Header
   ========================================================================== */
.sf-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
}
.sf-header__inner {
  max-width: none;
  margin: 0 auto;
  padding: 12px clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  flex-wrap: nowrap;
  min-height: var(--sf-header-h);
  position: relative;
}
.sf-header__tagline {
  position: absolute;
  left: clamp(20px, 4vw, 70px);
  top: 36px;
  z-index: 3;
  margin: 0;
  font-family: var(--sf-font-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.78);
  transition: color 260ms ease;
}
.sf-header__nav-wrap { margin-left: auto; min-width: 0; }
.sf-header__nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: nowrap;
  min-width: 0;
  list-style: none;
  margin-top: 0; margin-bottom: 0; padding: 0;
}
.sf-header__nav a {
  position: relative;
  display: block;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 260ms ease;
}
.sf-header__nav a:hover { color: var(--sf-amber); text-decoration: none; }
.sf-header__nav .current-menu-item > a::after,
.sf-header__nav .current_page_item > a::after,
.sf-header__nav .current-menu-parent > a::after,
.sf-header__nav .current-post-ancestor > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--sf-amber);
  display: block;
}
.sf-header__cta { margin-left: auto; flex: none; display: flex; align-items: center; gap: 18px; }
.sf-header__cta .sf-btn { padding: 14px 28px; font-size: 13px; width: 203px; }

.sf-header__sp { display: none; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.sf-header__tel {
  color: #fff;
  font-family: var(--sf-font-jp);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 260ms ease;
}
.sf-header__tel:hover { color: #fff; text-decoration: none; }
.sf-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0 12px;
  transition: background-color 200ms ease, border-color 260ms ease;
}
.sf-burger:hover { background: rgba(255,255,255,0.22); }
.sf-burger span { display: block; height: 1.5px; background: #fff; transition: background-color 260ms ease; }

/* 明暗反転（ライト背景時） */
.sf-header.is-on-light .sf-header__tagline { color: rgba(11,16,48,0.7); }
.sf-header.is-on-light .sf-header__nav a   { color: var(--sf-navy); }
.sf-header.is-on-light .sf-header__nav a:hover { color: var(--sf-blue); }
.sf-header.is-on-light .sf-header__tel     { color: var(--sf-navy); }
.sf-header.is-on-light .sf-burger          { background: rgba(11,16,48,0.06); border-color: rgba(11,16,48,0.5); }
.sf-header.is-on-light .sf-burger:hover    { background: rgba(11,16,48,0.14); }
.sf-header.is-on-light .sf-burger span     { background: var(--sf-navy); }
.sf-header.is-on-light .sf-header__cta .sf-btn {
  color: var(--sf-navy);
  border-color: rgba(11,16,48,0.7);
}
.sf-header.is-on-light .sf-header__cta .sf-btn:hover { background: rgba(11,16,48,0.08); }

/* SP メニューパネル */
.sf-menu-panel {
  display: none;
  background: rgba(9,13,40,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--sf-rule-dark);
  padding: 14px clamp(16px, 4vw, 28px) 24px;
  flex-direction: column;
  gap: 2px;
}
.sf-menu-panel.is-open { display: flex; }
.sf-menu-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-menu-panel a {
  display: block;
  padding: 15px 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
}
.sf-menu-panel a:hover { color: var(--sf-amber); text-decoration: none; }
.sf-menu-panel__cta {
  display: block;
  background: var(--sf-amber);
  color: var(--sf-amber-text);
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 14px;
  text-align: center;
  text-decoration: none;
}
.sf-menu-panel__cta:hover { background: var(--sf-amber-dark); color: var(--sf-amber-text); text-decoration: none; }

@media (max-width: 1059px) {
  .sf-header__nav-wrap, .sf-header__cta { display: none; }
  .sf-header__sp { display: flex; }
  .sf-header__tagline { display: none; }
}

/* ==========================================================================
   7. 左下固定ナビ（PC のみ）
   ========================================================================== */
.sf-sidenav {
  position: fixed;
  left: clamp(20px, 4vw, 71px);
  bottom: clamp(44px, 7vw, 96px);
  z-index: 50;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.sf-sidenav ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-sidenav a {
  color: var(--sf-on-dark-strong);
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: 500;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(6,10,32,0.85), 0 1px 3px rgba(6,10,32,0.7);
  transition: color 240ms ease, text-shadow 240ms ease;
}
.sf-sidenav a:hover { color: var(--sf-amber); text-decoration: none; }
.sf-sidenav.is-on-light a {
  color: var(--sf-navy);
  text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 1px 3px rgba(255,255,255,0.85);
}
.sf-sidenav.is-on-light a:hover { color: var(--sf-blue); }
.sf-sidenav.is-hidden { opacity: 0; visibility: hidden; }
.sf-sidenav__sns { margin-top: 10px; }
.sf-sidenav__sns img { width: 32px; height: 32px; display: block; }
.sf-sidenav__sns:hover { opacity: 0.75; }

@media (max-width: 1059px) { .sf-sidenav { display: none; } }

/* ==========================================================================
   8. トップ ヒーロー
   ========================================================================== */
.sf-hero-wrap { position: relative; overflow: hidden; }

.sf-hero {
  position: relative;
  background: var(--sf-navy-deep);
  color: #fff;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}
.sf-hero__slide { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.sf-hero__slide--1 { background-position: center 28%; animation: sfHeroZoom 18s ease-in-out infinite alternate; }
.sf-hero__slide--2 { background-position: center 34%; animation: sfHeroFade2 21s ease-in-out infinite; }
.sf-hero__slide--3 { background-position: center 40%; animation: sfHeroFade3 21s ease-in-out infinite; will-change: opacity; }
.sf-hero__scrim { position: absolute; inset: 0; background: var(--sf-grad-hero-scrim); }
.sf-hero__glow {
  position: absolute; inset: -8%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(28px);
  background:
    radial-gradient(38% 42% at 34% 6%, rgba(150,72,232,0.72) 0%, rgba(7,11,36,0) 68%),
    radial-gradient(34% 40% at 6% 34%, rgba(255,198,146,0.5) 0%, rgba(7,11,36,0) 66%),
    radial-gradient(46% 52% at 84% 72%, rgba(53,201,240,0.62) 0%, rgba(7,11,36,0) 68%),
    radial-gradient(40% 46% at 62% 96%, rgba(58,132,255,0.5) 0%, rgba(7,11,36,0) 70%);
  animation: sfDrift 22s ease-in-out infinite;
}
.sf-hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: var(--sf-grain);
  background-repeat: repeat;
  background-size: 128px 128px;
}
.sf-hero__logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(819px, 86vw, 116vh);
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 6px 30px rgba(7,11,36,0.6));
}
.sf-hero__body {
  position: relative;
  width: 100%;
  max-width: var(--sf-w-wide);
  margin: 0 auto;
  min-height: min(80vh, 720px);
  padding: clamp(112px, 12vw, 150px) var(--sf-gutter) clamp(90px, 11vw, 150px);
}

/* SCROLL キュー */
.sf-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--sf-font-en);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--sf-on-dark-cue);
  white-space: nowrap;
}
.sf-scroll-cue--hero {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(40px, 6vw, 80px);
  z-index: 3;
}
.sf-scroll-cue--about { margin-top: clamp(48px, 6vw, 80px); }
.sf-scroll-cue__line {
  position: relative;
  width: 1px; height: 84px;
  background: rgba(255,255,255,0.22);
  display: block;
  overflow: hidden;
}
.sf-scroll-cue__line span {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
  animation: sfScrollLine 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
}

/* ==========================================================================
   9. トップ ABOUT
   ========================================================================== */
.sf-about {
  position: relative;
  background: var(--sf-grad-about);
  color: #fff;
  padding: clamp(80px, 11vw, 150px) 0 clamp(80px, 10vw, 140px);
}
.sf-about__inner {
  position: relative;
  z-index: 3;
  max-width: var(--sf-w-narrow);
  margin: 0 auto;
  padding: 0 var(--sf-gutter);
  text-align: center;
}
.sf-about__title {
  font-size: 47px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.01em;
  margin: 0 0 30px;
  color: #fff;
}
.sf-about__lead {
  font-size: 17px;
  color: var(--sf-on-dark);
  margin: 0 auto 44px;
  max-width: 34em;
}
.sf-about__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 700px) {
  .sf-about__title, .sf-h2--display { font-size: clamp(26px, 7vw, 38px); }
}

/* ==========================================================================
   10. カード / グリッド
   ========================================================================== */
.sf-grid { display: grid; gap: 26px; }
.sf-grid--cards   { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: stretch; }
.sf-grid--posts   { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 30px; }
.sf-grid--support { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.sf-grid--2col    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(34px, 5vw, 70px); align-items: center; }
.sf-grid--2col-top{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(34px, 5vw, 70px); align-items: start; }
.sf-grid--photos  { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.sf-grid--info    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 60px); }
.sf-cell          { display: flex; }
.sf-offset        { margin-top: 38px; }

.sf-figure {
  position: relative;
  background: var(--sf-navy);
  color: var(--sf-on-dark-strong);
  overflow: hidden;
  display: block;
}
.sf-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-figure--16x10 { aspect-ratio: 16 / 10; }
.sf-figure--16x9  { aspect-ratio: 16 / 9; }
.sf-figure--4x3   { aspect-ratio: 4 / 3; }
.sf-figure--3x4   { aspect-ratio: 3 / 4; }
.sf-figure--photo-bg { background: var(--sf-navy-photo-bg); }
.sf-figure__ph {
  position: absolute; inset: 0;
  background: var(--sf-grad-placeholder);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #8C8879;
  overflow-wrap: anywhere;
  text-align: center;
  padding: 12px;
}

/* サービスカード */
.sf-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--sf-rule-light);
  padding: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease;
}
.sf-card:hover { border-color: var(--sf-navy-line); text-decoration: none; color: inherit; }
.sf-card .sf-figure { flex: none; }
.sf-card__body { padding: 26px 26px 30px; }
.sf-card__no {
  margin: 0 0 12px;
  font-family: var(--sf-font-en);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--sf-amber);
}
.sf-card__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.sf-card__text  { margin: 0; font-size: 14px; color: var(--sf-muted-2); line-height: 1.85; }

/* 記事カード */
.sf-post-card {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--sf-rule-light);
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease;
}
.sf-post-card:hover { border-color: var(--sf-navy-line); text-decoration: none; color: inherit; }
.sf-post-card__body { padding: 24px 26px 28px; }
.sf-post-card__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.sf-post-card__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.sf-post-card__excerpt { margin: 0; font-size: 14px; color: var(--sf-muted-2); }

.sf-badge {
  background: var(--sf-navy-line);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-decoration: none;
}
.sf-badge:hover { color: #fff; text-decoration: none; }
.sf-badge--amber { background: var(--sf-amber); color: var(--sf-amber-text); font-size: 11px; padding: 5px 12px; letter-spacing: 0.1em; }
.sf-badge--amber:hover { color: var(--sf-amber-text); }
.sf-badge--outline {
  background: transparent;
  border: 1px solid var(--sf-field-border);
  color: var(--sf-muted-2);
  font-size: 10px;
  padding: 3px 8px;
}
.sf-badge--outline:hover { color: var(--sf-muted-2); }
.sf-badge--outline-navy {
  background: transparent;
  border: 1px solid var(--sf-navy-line);
  color: inherit;
  font-size: 11px;
  padding: 4px 10px;
  text-align: center;
}

.sf-date {
  font-family: var(--sf-font-jp);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sf-meta);
  white-space: nowrap;
}
.sf-date--lg { font-size: 14px; }
.sf-date--xl { font-size: 15px; letter-spacing: 0.1em; }

/* ==========================================================================
   11. トップ 会社紹介 / RECRUIT / BLOG / INFORMATION
   ========================================================================== */
.sf-intro__title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; margin: 0 0 26px; line-height: 1.4; }
.sf-intro__text  { font-size: 16px; color: var(--sf-muted-3); margin: 0 0 20px; }
.sf-intro__text:last-of-type { margin-bottom: 34px; }
.sf-intro__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sf-cert-badge {
  border: 1px solid var(--sf-navy-line);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sf-recruit {
  position: relative;
  overflow: hidden;
  background: var(--sf-grad-recruit);
  color: #fff;
  padding: clamp(68px, 9vw, 132px) 0;
}
.sf-recruit__head {
  position: relative;
  z-index: 3;
  max-width: var(--sf-w-narrow);
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--sf-gutter);
  text-align: center;
}
.sf-recruit__title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; margin: 0 0 24px; line-height: 1.4; }
.sf-recruit__lead  { font-size: 16px; color: var(--sf-on-dark-mute); margin: 0 auto; max-width: 34em; }
.sf-recruit__body  { position: relative; z-index: 3; }
.sf-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--sf-rule-dark);
  margin-bottom: 32px;
}
.sf-stats__cell { background: var(--sf-pink-stat); padding: 18px 20px; }
.sf-stats__label { margin: 0; font-size: 11px; color: var(--sf-on-dark-mute-2); letter-spacing: 0.14em; }
.sf-stats__value { margin: 6px 0 0; font-family: var(--sf-font-jp); font-size: 30px; font-weight: 700; }
.sf-stats__value--sm { font-size: 17px; }

.sf-blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--sf-rule-light-4);
  padding-bottom: 26px;
  flex-wrap: wrap;
}
.sf-blog-head h2 { font-size: clamp(29px, 3.9vw, 48px); font-weight: 600; margin: 0; }
.sf-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }
.sf-featured__body { padding: 30px 32px 34px; }
.sf-featured__meta { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sf-featured__title { margin: 0 0 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.5; }
.sf-featured__excerpt { margin: 0; font-size: 15px; color: var(--sf-muted-2); }

.sf-post-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sf-rule-light);
  border: 1px solid var(--sf-rule-light);
}
.sf-post-list__item {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.8);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease;
}
.sf-post-list__item:hover { background: rgba(127,208,245,0.14); text-decoration: none; color: inherit; }
.sf-post-list__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.sf-post-list__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }

.sf-news { display: flex; flex-direction: column; }
.sf-news__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sf-hairline-3);
}
.sf-news__title { font-size: 16px; font-weight: 500; flex: 1 1 260px; min-width: 0; }
.sf-news__title a { color: inherit; }

/* ==========================================================================
   12. 下層ページ ヒーロー
   ========================================================================== */
.sf-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--sf-navy);
  color: #fff;
  padding: clamp(120px, 13vw, 150px) 0 clamp(40px, 5vw, 64px);
}
.sf-page-hero__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.35;
}
.sf-page-hero__photo--full   { opacity: 1; }
.sf-page-hero__photo--half   { opacity: 0.5; }
.sf-page-hero__scrim { position: absolute; inset: 0; background: var(--sf-grad-subhero-scrim); }
.sf-page-hero__scrim--sweep {
  background: linear-gradient(100deg, rgba(7,11,36,0.85) 0%, rgba(7,11,36,0.6) 36%, rgba(7,11,36,0.1) 64%, rgba(7,11,36,0) 100%);
}
.sf-page-hero__scrim--sweep-strong {
  background: linear-gradient(100deg, rgba(7,11,36,0.9) 0%, rgba(7,11,36,0.72) 40%, rgba(7,11,36,0.4) 70%, rgba(7,11,36,0.3) 100%);
}
.sf-page-hero__inner { position: relative; z-index: 3; max-width: var(--sf-w-wide); margin: 0 auto; padding: 0 var(--sf-gutter); }
.sf-page-hero__title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; margin: 0 0 18px; }
.sf-breadcrumb { margin: 0; font-size: 15px; color: var(--sf-on-dark-mute-2); }
.sf-breadcrumb a { color: inherit; }
.sf-breadcrumb a:hover { color: var(--sf-amber); }

/* 記事ページ用の帯 */
.sf-post-band { background: var(--sf-grad-cta); height: clamp(88px, 11vw, 120px); }

/* ==========================================================================
   13. 事業内容ページ
   ========================================================================== */
.sf-service-lead {
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 clamp(50px, 7vw, 90px);
  line-height: 2.1;
  color: var(--sf-muted);
}
.sf-service-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); }
.sf-service-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.sf-service-item__figure { order: 1; }
.sf-service-item__text   { order: 2; }
.sf-service-item--rev .sf-service-item__figure { order: 2; }
.sf-service-item--rev .sf-service-item__text   { order: 1; }
.sf-service-item__no {
  margin: 0 0 18px;
  font-family: var(--sf-font-jp);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(27,33,96,0.28);
  line-height: 1;
}
.sf-service-item__title { margin: 0 0 20px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.5; color: var(--sf-heading); }
.sf-service-item__body  { margin: 0 0 26px; font-size: 16px; color: var(--sf-muted); line-height: 2; }
.sf-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-tag {
  border: 1px solid var(--sf-rule-light-3);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sf-muted);
  background: rgba(255,255,255,0.6);
}
.sf-support-card {
  border: 1px solid var(--sf-rule-light-2);
  padding: clamp(26px, 3vw, 38px);
  background: rgba(255,255,255,0.78);
}
.sf-support-card h3 { margin: 0 0 16px; font-size: 19px; font-weight: 600; line-height: 1.6; color: var(--sf-heading); }
.sf-support-card p  { margin: 0; font-size: 14px; color: var(--sf-muted); line-height: 2; }

/* CTA 帯 */
.sf-cta { background: var(--sf-grad-cta); color: #fff; padding: clamp(64px, 8vw, 104px) 0; }
.sf-cta__inner { max-width: var(--sf-w-narrow); margin: 0 auto; padding: 0 var(--sf-gutter); text-align: center; }
.sf-cta h2 { margin: 0 0 20px; font-size: clamp(23px, 2.7vw, 34px); font-weight: 600; line-height: 1.5; }
.sf-cta p  { margin: 0 auto 36px; max-width: 28em; color: var(--sf-on-dark); font-size: 15px; line-height: 2; }

/* ==========================================================================
   14. 定義リスト（募集要項 / 会社情報）
   ========================================================================== */
.sf-deflist { border-top: 2px solid var(--sf-navy-line); }
.sf-deflist__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--sf-hairline);
}
.sf-deflist__key { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.sf-deflist__val { font-size: 15px; color: var(--sf-muted-4); white-space: pre-line; }
.sf-deflist--company .sf-deflist__row { grid-template-columns: minmax(110px, 150px) 1fr; gap: 18px; padding: 17px 4px; }
.sf-deflist--company .sf-deflist__key { font-size: 13px; color: var(--sf-navy-line); }

.sf-aside-card {
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--sf-rule-light);
  padding: 32px;
}
.sf-aside-card h3 { margin: 0 0 18px; font-size: 19px; font-weight: 600; }
.sf-aside-card__tel {
  margin: 0 0 6px;
  font-family: var(--sf-font-jp);
  font-size: 30px;
  font-weight: 700;
  color: var(--sf-amber);
  line-height: 1.1;
}
.sf-aside-card__note { margin: 0 0 22px; font-size: 13px; color: var(--sf-muted-2); }
.sf-aside-card__addr { margin: 0 0 24px; font-size: 14px; color: var(--sf-muted-4); line-height: 1.9; }

.sf-greeting {
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--sf-rule-light);
  padding: 34px;
  margin-bottom: 34px;
}
.sf-greeting p { margin: 0 0 18px; font-size: 16px; color: var(--sf-muted-4); }
.sf-greeting__name { margin: 0; font-size: 14px; color: var(--sf-muted-2); }
.sf-map { aspect-ratio: 16 / 10; margin-bottom: 16px; overflow: hidden; }
.sf-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.sf-map__note { margin: 0; font-size: 13px; color: var(--sf-muted-2); }

/* ==========================================================================
   15. ブログ一覧 / 記事
   ========================================================================== */
.sf-cat-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--sf-hairline);
  list-style: none;
  padding-left: 0;
}
.sf-cat-filter a {
  display: block;
  border: 1px solid var(--sf-navy-line);
  background: #fff;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--sf-navy-line);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.sf-cat-filter a:hover,
.sf-cat-filter .is-current a { background: var(--sf-navy-line); color: #fff; text-decoration: none; }
.sf-count { margin: 0 0 30px; font-size: 13px; color: var(--sf-muted-2); letter-spacing: 0.06em; }

.sf-entry__meta { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.sf-entry__title { font-size: clamp(27px, 3.6vw, 40px); font-weight: 600; line-height: 1.5; margin: 0 0 34px; }
.sf-entry__thumb { margin-bottom: 44px; }
.sf-entry__foot {
  border-top: 1px solid var(--sf-hairline-2);
  margin-top: 50px;
  padding-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.sf-entry__foot p { margin: 0; font-size: 14px; color: var(--sf-muted-2); }

.entry-content { font-size: 17px; color: var(--sf-body-post); line-height: 2.05; }
.entry-content > * { margin-top: 0; }
.entry-content p { margin: 0 0 28px; }
.entry-content h2 {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.6;
  margin: 54px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sf-hairline-2);
  color: var(--sf-heading);
}
.entry-content h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.6; margin: 44px 0 18px; color: var(--sf-heading); }
.entry-content h4 { font-size: 17px; font-weight: 700; margin: 36px 0 16px; }
.entry-content ul,
.entry-content ol { margin: 0 0 28px; padding-left: 1.5em; }
.entry-content li { margin-bottom: 10px; }
.entry-content blockquote {
  margin: 0 0 28px;
  padding: 20px 26px;
  border-left: 3px solid var(--sf-amber);
  background: rgba(255,255,255,0.7);
  font-size: 16px;
  color: var(--sf-muted-4);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img,
.entry-content figure { margin: 0 0 28px; }
.entry-content figure img { display: block; }
.entry-content figcaption { font-size: 13px; color: var(--sf-muted-2); margin-top: 10px; }
.entry-content a { color: var(--sf-blue); text-decoration: underline; }
.entry-content a:hover { color: var(--sf-link-hover); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 15px; }
.entry-content th,
.entry-content td { border: 1px solid var(--sf-hairline); padding: 12px 14px; text-align: left; }
.entry-content th { background: rgba(27,33,96,0.05); font-weight: 700; }
.entry-content hr { border: 0; border-top: 1px solid var(--sf-hairline-2); margin: 44px 0; }
.entry-content .wp-caption { max-width: 100%; }

/* ページネーション */
.sf-pagination { margin-top: clamp(46px, 6vw, 72px); }
.sf-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sf-pagination .page-numbers {
  display: block;
  min-width: 46px;
  padding: 12px 14px;
  border: 1px solid var(--sf-rule-light-3);
  background: rgba(255,255,255,0.76);
  color: var(--sf-navy-line);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.sf-pagination .page-numbers:hover,
.sf-pagination .page-numbers.current { background: var(--sf-navy-line); color: #fff; text-decoration: none; }
.sf-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ==========================================================================
   16. フォーム（Contact Form 7）
   ========================================================================== */
.sf-form-card {
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--sf-rule-light);
  padding: clamp(24px, 3.5vw, 44px);
}
.sf-form-card__lead { margin: 0 0 34px; font-size: 15px; color: var(--sf-muted-2); }
.sf-form { display: grid; gap: 24px; }
.sf-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.sf-form label { display: grid; gap: 8px; }
.sf-form__label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.sf-form__req { color: var(--sf-amber); margin-left: 6px; font-size: 11px; }

/* Contact Form 7 の必須マーカー（項目名の後ろに赤字） */
.sf-required {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #B3261E;
  white-space: nowrap;
}

/* CF7 が dl / dt / dd で組まれている場合のレイアウト */
.sf-form dl { margin: 0; }
.sf-form dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  color: var(--sf-text);
}
.sf-form dd { margin: 0 0 24px; }
.sf-form dd:last-child { margin-bottom: 0; }
.sf-form .wpcf7-form-control-wrap { display: block; }

.sf-form input[type="text"],
.sf-form input[type="email"],
.sf-form input[type="tel"],
.sf-form input[type="url"],
.sf-form input[type="date"],
.sf-form input[type="number"],
.sf-form select,
.sf-form textarea,
.sf-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
  width: 100%;
  border: 1px solid var(--sf-field-border);
  padding: 14px;
  font-size: 15px;
  font-family: inherit;
  background: var(--sf-field-bg);
  color: var(--sf-text);
}
.sf-form textarea { resize: vertical; }
.sf-form input:focus,
.sf-form select:focus,
.sf-form textarea:focus { outline: 2px solid var(--sf-amber); outline-offset: 0; }

.sf-form input[type="submit"],
.sf-form .wpcf7-submit {
  background: var(--sf-amber);
  color: var(--sf-amber-text);
  border: 0;
  padding: 19px 44px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  justify-self: start;
  width: auto;
  transition: background-color 200ms ease;
}
.sf-form input[type="submit"]:hover,
.sf-form .wpcf7-submit:hover { background: var(--sf-amber-dark); }

.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  border: 1px solid var(--sf-rule-light-3);
  padding: 14px 16px;
  font-size: 14px;
}
.wpcf7-not-valid-tip { color: #B3261E; font-size: 13px; }
.wpcf7-spinner { margin-left: 12px; }

.sf-contact-tel {
  background: radial-gradient(84% 84% at 18% 18%, rgba(53,201,240,0.4) 0%, rgba(9,13,40,0) 66%), var(--sf-navy);
  color: #fff;
  padding: 34px;
  margin-bottom: 24px;
}
.sf-contact-tel__label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.2em; color: var(--sf-on-dark-mute-2); }
.sf-contact-tel__num {
  margin: 0 0 6px;
  font-family: var(--sf-font-jp);
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.1;
}
.sf-contact-tel__num a { color: #fff; text-decoration: none; }
.sf-contact-tel__note { margin: 0; font-size: 13px; color: var(--sf-on-dark-mute); }
.sf-contact-addr { border: 1px solid var(--sf-hairline-2); background: #fff; padding: 30px; }
.sf-contact-addr p:first-child { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.sf-contact-addr p:last-child { margin: 0; font-size: 14px; color: var(--sf-muted-4); line-height: 1.9; }

/* 検索フォーム */
.sf-searchform { display: flex; gap: 10px; max-width: 420px; }
.sf-searchform input[type="search"] {
  flex: 1 1 auto;
  border: 1px solid var(--sf-field-border);
  background: var(--sf-field-bg);
  padding: 12px 14px;
  font-size: 15px;
}
.sf-searchform button {
  border: 0;
  background: var(--sf-navy-line);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.sf-searchform button:hover { background: var(--sf-amber); }

/* ==========================================================================
   17. 404
   ========================================================================== */
.sf-404 { text-align: center; }
.sf-404__code {
  font-family: var(--sf-font-en);
  font-size: clamp(64px, 12vw, 140px);
  line-height: 1;
  margin: 0 0 24px;
  color: rgba(27,33,96,0.24);
  letter-spacing: 0.08em;
}
.sf-404 .sf-searchform { margin: 34px auto 0; }
.sf-mt-34 { margin-top: 34px; }
.sf-article { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(56px, 7vw, 100px); }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.sf-footer {
  position: relative;
  overflow: hidden;
  background: var(--sf-grad-footer);
  color: #fff;
}
.sf-footer__inner {
  position: relative;
  z-index: 3;
  max-width: var(--sf-w-wide);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 70px) var(--sf-gutter) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(34px, 4vw, 50px);
}
.sf-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sf-footer__logo img { height: 44px; width: auto; display: block; }
.sf-footer__addr { margin: 0 0 20px; font-size: 14px; color: var(--sf-on-dark-mute-3); line-height: 1.9; }
.sf-footer__map { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--sf-amber); }
.sf-footer__map:hover { color: #fff; }
.sf-footer__sns {
  display: flex;
  gap: 14px;
  align-items: center;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.sf-footer__sns a {
  display: block;
  width: 32px;
  height: 32px;
  transition: opacity 200ms ease;
}
.sf-footer__sns a:hover { opacity: 0.75; }
.sf-footer__sns img { width: 100%; height: 100%; display: block; }
.sf-footer__label {
  margin: 0 0 18px;
  font-family: var(--sf-font-en);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--sf-amber);
}
.sf-footer__nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.sf-footer__nav a { color: var(--sf-on-dark-link); font-size: 14px; text-decoration: none; }
.sf-footer__nav a:hover { color: var(--sf-amber); text-decoration: none; }
.sf-footer__cert { margin: 0 0 22px; font-size: 14px; color: var(--sf-on-dark-mute-3); line-height: 1.9; }
.sf-footer__cta {
  display: inline-block;
  background: var(--sf-amber);
  color: var(--sf-amber-text);
  padding: 15px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.sf-footer__cta:hover { background: var(--sf-amber-dark); color: var(--sf-amber-text); text-decoration: none; }
.sf-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 3; }
.sf-footer__bottom div {
  max-width: var(--sf-w-wide);
  margin: 0 auto;
  padding: 22px 28px;
  font-size: 12px;
  color: var(--sf-copyright);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   19. Animations
   ========================================================================== */
@keyframes sfHeroFade2 { 0%,26% { opacity: 0; } 33%,59% { opacity: 1; } 66%,100% { opacity: 0; } }
@keyframes sfHeroFade3 { 0%,59% { opacity: 0; } 66%,93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sfHeroZoom  { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
@keyframes sfScrollLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes sfShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@keyframes sfDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%,-2%,0) scale(1.08); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes sfSheen {
  0%   { transform: translateX(-60%) skewX(-12deg); opacity: 0; }
  12%  { opacity: 0.55; }
  55%  { opacity: 0.35; }
  100% { transform: translateX(160%) skewX(-12deg); opacity: 0; }
}

/* スクロールリビール */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .sf-hero__slide--2, .sf-hero__slide--3 { opacity: 0; }
  .sf-hero__slide--1 { opacity: 1; }
}

/* ==========================================================================
   20. Responsive fine-tuning
   ========================================================================== */
@media (max-width: 900px) {
  .sf-service-item__figure,
  .sf-service-item__text,
  .sf-service-item--rev .sf-service-item__figure,
  .sf-service-item--rev .sf-service-item__text { order: 0; }
  .sf-deflist__row { grid-template-columns: 1fr; gap: 6px; }
  .sf-deflist--company .sf-deflist__row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .sf-btn { padding: 16px 26px; }
  .sf-card__body { padding: 22px 20px 26px; }
  .sf-featured__body { padding: 24px 22px 28px; }
  .sf-stats { grid-template-columns: 1fr; }
  .sf-footer__bottom div { padding: 22px var(--sf-gutter); }
}