/*
 * ======================================
 * 追加クラス一覧EE通SCSS取り込み検討用EE * ======================================
 *
 * 本案件は claude-design-output を「正」とする、min-width:1120px 固定E
 * レスポンシブ非対応EフルビスポEクチEイン。ピクセル値・配色・英字フォンチE * (Barlow Condensed)・マEキー演E・グラデCTA 等が共通フレームワークの
 * チEEマ済みコンポEネントE値と一致しなぁEめ、デザイン完E一致を最優先し
 * (§3スチEプC / §5 / §12) 、fk- プレフィチEスのサイト固有クラスで正確に
 * 再現してぁE。E送Emain.css はリセチE(_base)・レイアウト土台として読み込む、E *
 * .fk-header 系      - 固定EチEーEロゴ+ナビ+TEL/CTAEE * .fk-nav 系         - グローバルナビE下線アクチEブ！E * .fk-btn 系         - ボタンEE/navy/o-navy/o-white + サイズmodifierEE * .fk-hero 系        - TOP メインビューEE真スライチEグラチE流れる英字！E * .fk-marquee-band   - 事業英字Eーキー帯
 * .fk-eyebrow / .fk-h2 - セクション英字ラベル + 見EぁE * .fk-about 系       - TOP 会社概要導EEE省ESINCEバッジ+チEスト！E * .fk-svcard 系      - TOP 事業カード（上Eーダー+番号EE * .fk-strength 系    - 選ばれる琁EE濁E+流れる英孁E3カラムEE * .fk-worktable 系   - 施工実績リスト（行グリチEEE * .fk-cta 系         - グラチEEション CTA 帯
 * .fk-page-hero 系   - 下層ペEジヒEローE濁E+背景英字！E * .fk-message 系     - 代表挨拶
 * .fk-overview 系    - 会社惁EチEEブル
 * .fk-svdetail 系    - 事業冁E 詳細E番号+見EぁE頁EチッチE画像！E * .fk-contact 系     - お問ぁEわせEEEL帯+フォームEE * .fk-footer 系      - フッター
 * .fk-imgslot        - 画像EレースホルダEE真差し替え前提！E *
 * ======================================
 * 共通SCSSに不足してぁEもEEE刁E！E * ======================================
 * ・構造不足: 流れる英字Eーキー(marquee/marqueeR)・固定PC専用ヘッダー
 *   EハンバEガーなし）E写真スライドMV(gradient placeholder)、E * ・裁Eパターン不足: SINCEバッジ・上Eーダー番号カードE背景大英字、E * ・値の粒度不足: ボタンpadding(13/22, 17/34 筁E・見Eしmargin・
 *   グリチEの固定px刁E130px 筁E ぁEutility 刻みに存在しなぁEE * ・持E方向不足: グラチEEション(105deg/115deg)の背景は url 以外Eため
 *   インライン不可 ↁEクラス化、E */

:root {
  --fk-navy: #1e366c;
  --fk-navy2: #3e548b;
  --fk-blue: #0081ba;
  --fk-accent: #dbd40b;
  --fk-ink: #14181f;
  --fk-footer-bg: #14203f;
  --fk-section-bg: #f4f6fa;
  --fk-body-txt: #41495a;
  --fk-gray: #8a93a6;
  --fk-border: #e7eaf1;
  --fk-tag-bg: #eef1f7;
  --fk-en: "Barlow Condensed", sans-serif;
}

/* ---------- base overrides ---------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--fk-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
  min-width: 1120px;
}
::selection { background: var(--fk-accent); color: var(--fk-navy); }
a { color: inherit; }
a:hover { opacity: 1; }

@keyframes fk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fk-marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- containers ---------- */
.fk-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.fk-container--1500 { max-width: 1500px; }
.fk-container--1200 { max-width: 1200px; }
.fk-container--1100 { max-width: 1100px; }
.fk-container--1080 { max-width: 1080px; }
.fk-container--960  { max-width: 960px; }

/* ---------- image placeholder ---------- */
.fk-imgslot {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #eef1f7, #eef1f7 14px, #e7eaf1 14px, #e7eaf1 28px);
  color: #8a93a6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
.fk-imgslot span { background: rgba(255,255,255,.75); padding: 8px 16px; }
.fk-imgslot--about { height: 420px; }
.fk-imgslot--ceo   { height: 440px; }
/* service.php: 640ÁE80EE:3E比率の画像に対忁E*/
.fk-imgslot--sv    { height: auto; aspect-ratio: 4 / 3; }
/* 実画像が入った場合Eトリミングして枠に敷き詰める */
img.fk-imgslot--filled { display: block; object-fit: cover; }

/* ---------- box revealEEチEスが横に伸びて要E→退ぁE画像が出現EE---------- */
.fk-boxreveal { position: relative; overflow: hidden; }
/* 要EのボックスEアクセントカラーE。スクロールで表示領域に入ると animation 発火 */
.fk-boxreveal::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--fk-accent);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.fk-boxreveal > .fk-imgslot { opacity: 0; }
.fk-boxreveal.is-inview::after { animation: fk-boxreveal 1.1s cubic-bezier(.77,0,.18,1) forwards; }
.fk-boxreveal.is-inview > .fk-imgslot { opacity: 1; transition: opacity 0s .55s; }
@keyframes fk-boxreveal {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  55%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* ============ BUTTONS ============ */
.fk-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.4;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.fk-btn--y { background: var(--fk-accent); color: var(--fk-navy); font-weight: 900; }
.fk-btn--y:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(219,212,11,.5); }
.fk-btn--navy { background: var(--fk-navy); color: #fff; font-weight: 700; }
.fk-btn--navy:hover { background: var(--fk-blue); }
.fk-btn--o-navy { background: transparent; color: var(--fk-navy); border: 1.5px solid var(--fk-navy); font-weight: 700; }
.fk-btn--o-navy:hover { background: var(--fk-navy); color: #fff; }
.fk-btn--o-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); font-weight: 700; }
.fk-btn--o-white:hover { background: #fff; color: var(--fk-navy); border-color: #fff; }

/* button sizes */
.fk-btn--head   { font-size: 14px; padding: 13px 22px; box-shadow: 0 4px 14px rgba(219,212,11,.35); white-space: nowrap; }
.fk-btn--hero   { font-size: 16px; padding: 17px 34px; }
.fk-btn--about  { font-size: 15px; padding: 15px 30px; }
.fk-btn--seeall { font-size: 14px; padding: 13px 26px; }
.fk-btn--cta    { font-size: 16px; padding: 16px 44px; }
.fk-btn--foot   { font-size: 14px; padding: 13px 28px; }
.fk-btn--submit { font-size: 17px; padding: 18px 70px; letter-spacing: .06em; }

/* ============ HEADER ============ */
.fk-header {
  position: fixed; top: 0; left: 0; right: 0; height: 84px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fk-border);
  z-index: 200;
}
.fk-header__inner {
  max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.fk-header__logo img { height: 100px; display: block; }
.fk-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.fk-nav__link {
  font-size: 15px; font-weight: 700; color: var(--fk-navy);
  padding-bottom: 6px; border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s; white-space: nowrap;
}
.fk-nav__link:hover { color: var(--fk-blue); }
.fk-nav__link.is-active { color: var(--fk-blue); border-bottom-color: var(--fk-accent); }
.fk-header__right {
  display: flex; align-items: center; gap: 20px;
  padding-left: 28px; border-left: 1px solid var(--fk-border);
}
.fk-header__tel-block { text-align: right; line-height: 1.3; }
.fk-header__tel-label { font-family: var(--fk-en); font-size: 13px; letter-spacing: .08em; color: var(--fk-gray); font-weight: 600; }
.fk-header__tel { font-size: 19px; font-weight: 900; color: var(--fk-navy); letter-spacing: .02em; white-space: nowrap; }

/* main offset for fixed header */
.fk-main { padding-top: 84px; }

/* ============ HERO ============ */
/* MV は本番でCMSスライダーEE部SwiperEに差し替える。生成時は静止画1枚、E   Swiper JS は初期化しなぁE§10.1E、Eslideshow=外枠 / .swiper-slide=中身、E*/
/* .fk-hero=外枠。EチEー(84px)+MV でPC晁E画面に収まるよぁE100vh 基準で高さを算E */
.fk-hero { position: relative; overflow: hidden; height: calc(100vh - 84px); min-height: 520px; background: var(--fk-navy); }
/* スマE等！Eiewport=1120px 固定）では 100vh が実機E縦長画面に追従して極端に
   高くなりMVが縦長・全画面化する。幁E溁Evw)の高さに刁Eえ、PCと同じ横長比率を保つ */
@media (max-width: 1120px) {
  .fk-hero { height: 56vw; min-height: 0; }
}
/* #slideshow は外枠ぁEぱぁE敷く背景レイヤー、EMSスライダーは height:100% で
   外枠(.fk-hero)に追従するためEさは 100% で明示。上にチEスチEオーバEレイを重ねる、E   z-index:0 で独立したスタチEングコンチEストを作り、CMS側Swiperが持つ z-index めE   #slideshow 冁Eに閉じ込めるE外EオーバEレイ・マEキー・チEストを要EせなぁEE*/
#slideshow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0d1a3a, #1e366c); }
#slideshow .swiper-slide { width: 100%; height: 100%; }
#slideshow .main_slider__inner { width: 100%; height: 100%; }
#slideshow .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fk-hero__inner {
  position: relative; z-index: 3; height: 100%;
  margin: 0 auto; padding: 0 40px 72px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.fk-hero__title {
  font-size: 70px; line-height: 1.14; font-weight: 900; color: #fff; text-align: left;
  letter-spacing: .01em; text-shadow: 0 4px 30px rgba(0,0,0,.25);
}
/* キャチEコピE 1斁Eずつ表示E参老Eイト風のフェード＋せり上がり＋E彩E、E   遁Eは JS(common.js) が各 .fk-hero__char に animation-delay を付与、E   斁Eが現れる瞬間に text-shadow のグローが強くEり！E5%付近でピEクE、E   そE後やわらかい残Eへ落ち着く！Eoth で最終状態を保持E、E*/
.fk-hero__char { display: inline-block; opacity: 0; will-change: transform, opacity, filter, text-shadow; animation: fk-charin .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fk-charin {
  0%   { opacity: 0; transform: translateY(.45em); filter: blur(6px);
         text-shadow: 0 0 0 rgba(255,255,255,0); }
  55%  { opacity: 1;
         text-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 34px rgba(120,190,255,.75), 0 0 62px rgba(0,129,186,.55); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0);
         text-shadow: 0 0 9px rgba(255,255,255,.38), 0 0 22px rgba(120,190,255,.28); }
}

/* ============ MARQUEE BAND ============ */
.fk-marquee-band { background: var(--fk-navy); overflow: hidden; padding: 18px 0; border-top: 3px solid var(--fk-accent); }
/* 8コピEを並べ -50% 移動で継ぎ目を一致させシームレスにループ（見Eれ防止E、E   コピE増加刁Eけ移動距離が増えるためEduration を比例させ、体感速度は据え置ぁE*/
.fk-marquee-band__inner {
  display: inline-flex; white-space: nowrap; animation: fk-marquee 112s linear infinite;
  font-family: var(--fk-en); font-weight: 600; font-size: 30px; letter-spacing: .06em; color: rgba(255,255,255,.9);
}
.fk-marquee-band__inner > span { padding-right: 44px; }
.fk-marquee-band__inner .fk-star { color: var(--fk-accent); }

/* ============ SECTION HEADINGS ============ */
.fk-eyebrow { font-family: var(--fk-en); font-size: 16px; letter-spacing: .24em; color: var(--fk-blue); font-weight: 600; margin-bottom: 10px; }
.fk-eyebrow--accent { color: var(--fk-accent); }
.fk-h2 { font-size: 40px; font-weight: 900; color: var(--fk-navy); }
.fk-h2--white { color: #fff; }

/* ============ ABOUT (top) ============ */
.fk-section { padding: 120px 0; background: #fff; }
.fk-section--110 { padding: 110px 0; }
.fk-section--100 { padding: 100px 0; }
.fk-section--pt0-pb110 { padding: 0 0 110px; }
.fk-section--90-110 { padding: 90px 0 110px; }
.fk-section--80-110 { padding: 80px 0 110px; }
.fk-section--gray { background: var(--fk-section-bg); }
.fk-about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
.fk-about__figure { position: relative; }
.fk-about__img { display: block; width: 100%; height: 420px; object-fit: cover; }
.fk-about__badge {
  position: absolute; right: -24px; bottom: -24px;
  background: var(--fk-accent); color: var(--fk-navy); padding: 24px 30px; font-weight: 900; line-height: 1.2;
}
.fk-about__badge-label { font-family: var(--fk-en); font-size: 15px; letter-spacing: .1em; }
.fk-about__badge-year { font-size: 40px; }
.fk-about__title { font-size: 28px; font-weight: 900; line-height: 1.35; color: var(--fk-navy); margin-bottom: 24px; }
.fk-about__text { font-size: 16px; line-height: 2.1; color: var(--fk-body-txt); margin-bottom: 20px; }
.fk-about__text:last-of-type { margin-bottom: 34px; }
.fk-about__text strong { color: var(--fk-navy); }

/* ============ SERVICE (top) ============ */
.fk-sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.fk-sec-head--48 { margin-bottom: 48px; }
.fk-svgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fk-svcard {
  display: block; background: #fff; padding: 40px; border-top: 4px solid var(--fk-blue);
  box-shadow: 0 2px 16px rgba(30,54,108,.06); transition: transform .2s, box-shadow .2s;
}
.fk-svcard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(30,54,108,.14); }
.fk-svcard__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.fk-svcard__no { font-family: var(--fk-en); font-size: 44px; font-weight: 700; color: var(--fk-accent); line-height: 1; }
.fk-svcard__en { font-family: var(--fk-en); font-size: 14px; letter-spacing: .14em; color: var(--fk-gray); font-weight: 600; }
.fk-svcard__title { font-size: 23px; font-weight: 900; color: var(--fk-navy); }
.fk-svcard__label { font-size: 13px; color: var(--fk-blue); font-weight: 700; margin-bottom: 8px; letter-spacing: .02em; }
.fk-svcard__text { font-size: 14px; line-height: 1.9; color: #5a6376; }

/* ============ STRENGTH ============ */
.fk-strength { padding: 120px 0; background: var(--fk-navy); position: relative; overflow: hidden; }
.fk-strength__marquee { position: absolute; top: -30px; left: 0; right: 0; overflow: hidden; opacity: .06; pointer-events: none; }
.fk-strength__marquee-inner {
  display: inline-flex; white-space: nowrap; animation: fk-marqueeR 40s linear infinite;
  font-family: var(--fk-en); font-weight: 700; font-size: 180px; color: #fff; line-height: 1;
}
.fk-strength__marquee-inner span { padding-right: 60px; }
.fk-strength__inner { position: relative; }
.fk-strength__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fk-strength__item { padding-top: 30px; border-top: 3px solid rgba(255,255,255,.16); }
.fk-strength__no { font-family: var(--fk-en); font-size: 56px; font-weight: 700; color: var(--fk-accent); line-height: 1; margin-bottom: 8px; }
.fk-strength__en { font-family: var(--fk-en); font-size: 13px; letter-spacing: .16em; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 14px; }
.fk-strength__title { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 16px; }
.fk-strength__text { font-size: 15px; line-height: 2; color: rgba(255,255,255,.82); }
.fk-mb-60 { margin-bottom: 60px; }

/* ============ WORKS TABLE ============ */
.fk-worktable { border-top: 2px solid var(--fk-navy); }
.fk-worktable__row {
  display: grid; grid-template-columns: 130px 1fr 150px; gap: 24px; align-items: center;
  padding: 22px 8px; border-bottom: 1px solid var(--fk-border); transition: background .15s;
}
.fk-worktable__row:hover { background: var(--fk-section-bg); }
.fk-worktable__ym { font-family: var(--fk-en); font-size: 20px; font-weight: 600; color: var(--fk-blue); }
.fk-worktable__cat { justify-self: start; background: var(--fk-tag-bg); color: var(--fk-navy); font-size: 12px; font-weight: 700; padding: 5px 12px; }
.fk-worktable__target { font-size: 16px; font-weight: 700; color: var(--fk-navy); }
.fk-worktable__area { font-size: 14px; color: var(--fk-gray); text-align: right; }
/* works page: slightly larger */
.fk-worktable--lg .fk-worktable__row { grid-template-columns: 1fr auto; padding: 24px 8px; }
.fk-works-cat { margin-bottom: 48px; }
.fk-works-cat__title { font-size: 22px; font-weight: 900; color: var(--fk-navy); margin: 0 0 8px; padding-left: 4px; }
.fk-worktable--lg .fk-worktable__ym { font-size: 22px; }
.fk-worktable--lg .fk-worktable__cat { padding: 6px 13px; }

/* ============ CONTACT CTA ============ */
.fk-cta { background: linear-gradient(115deg, #1e366c 0%, #3e548b 55%, #0081ba 100%); padding: 88px 0; }
.fk-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.fk-cta__heading { font-size: 34px; font-weight: 900; color: #fff; line-height: 1.4; }
.fk-cta__box { text-align: center; flex-shrink: 0; }
.fk-cta__tel-label { font-family: var(--fk-en); font-size: 14px; letter-spacing: .14em; color: var(--fk-accent); font-weight: 600; margin-bottom: 2px; }
.fk-cta__tel { font-size: 38px; font-weight: 900; color: #fff; letter-spacing: .02em; margin-bottom: 18px; }
.fk-cta__tel-icon { font-size: .72em; margin-right: 12px; vertical-align: baseline; color: var(--fk-accent); }
.fk-cta__tel-link { color: inherit; text-decoration: none; }

/* ============ PAGE HERO (下層) ============ */
.fk-page-hero { background: var(--fk-navy); padding: 74px 0 70px; position: relative; overflow: hidden; }
.fk-page-hero__bgtext { position: absolute; top: 10px; left: 0; right: 0; overflow: hidden; opacity: .08; pointer-events: none; }
.fk-page-hero__bgtext span { white-space: nowrap; font-family: var(--fk-en); font-weight: 700; font-size: 150px; color: #fff; line-height: 1; }
.fk-page-hero__inner { position: relative; }
.fk-page-hero__en { font-family: var(--fk-en); font-size: 16px; letter-spacing: .24em; color: var(--fk-accent); font-weight: 600; }
.fk-page-hero__ja { font-size: 46px; font-weight: 900; color: #fff; margin-top: 6px; }

/* ============ MESSAGE (company) ============ */
.fk-message__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }
.fk-message__img { display: block; width: 100%; height: 750px; object-fit: cover; }
.fk-message__title { font-size: 28px; font-weight: 900; color: var(--fk-navy); line-height: 1.4; margin-bottom: 30px; }
.fk-message__text { font-size: 16px; line-height: 2.15; color: var(--fk-body-txt); margin-bottom: 20px; }
.fk-message__text:last-of-type { margin-bottom: 34px; }
.fk-message__sign { display: flex; align-items: baseline; gap: 14px; border-top: 2px solid var(--fk-tag-bg); padding-top: 22px; }
.fk-message__sign-role { font-size: 14px; color: var(--fk-gray); }
.fk-message__sign-name { font-size: 24px; font-weight: 900; color: var(--fk-navy); }

/* ============ OVERVIEW TABLE (company) ============ */
/* 会社惁Eセクション右下E大きな半透EロゴマEクE背景あしらいEE*/
.fk-overview-sec { position: relative; overflow: hidden; }
.fk-overview-sec__deco {
  position: absolute; right: -60px; bottom: -60px; z-index: 0;
  width: 460px; height: auto; opacity: .07; pointer-events: none; user-select: none;
}
.fk-overview-sec > .fk-container { position: relative; z-index: 1; }
.fk-overview__h2 { font-size: 32px; font-weight: 900; color: var(--fk-navy); margin-bottom: 36px; }
.fk-overview { border-top: 2px solid var(--fk-navy); }
.fk-overview__row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--fk-border); }
.fk-overview__k { font-size: 15px; font-weight: 700; color: var(--fk-navy); }
.fk-overview__v { font-size: 15px; line-height: 1.8; color: var(--fk-body-txt); }
.fk-overview__note { font-size: 13px; color: var(--fk-gray); margin-top: 16px; line-height: 1.8; }

/* ============ SERVICE DETAIL (service) ============ */
.fk-svlist { display: flex; flex-direction: column; gap: 70px; }
/* 画像Eは固定pxだとコンチE幁EPC=1500 / スマEviewport=1120)で比率が変わり、E   スマEで画像が相対皁E大きくなる。可夁Efr)にして全幁E同じ比率(チEスチE画像≒1.1:1)を保つ */
.fk-svdetail { display: grid; grid-template-columns: 150px 1.1fr 1fr; gap: 44px; align-items: start; border-bottom: 1px solid var(--fk-border); padding-bottom: 70px; }
.fk-svdetail:last-child { border-bottom: none; padding-bottom: 0; }
.fk-svdetail__numcol { text-align: center; width: 150px; }
.fk-svdetail__no { font-family: var(--fk-en); font-size: 88px; font-weight: 700; color: var(--fk-accent); line-height: .9; }
.fk-svdetail__en { font-family: var(--fk-en); font-size: 14px; letter-spacing: .14em; color: var(--fk-gray); font-weight: 600; margin-top: 6px; }
.fk-svdetail__title { font-size: 30px; font-weight: 900; color: var(--fk-navy); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid var(--fk-blue); display: inline-block; }
.fk-svdetail__group { margin-bottom: 22px; }
.fk-svdetail__label { font-size: 13px; color: var(--fk-blue); font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.fk-svdetail__text { font-size: 16px; line-height: 1.9; color: var(--fk-body-txt); }
.fk-svdetail__items { display: flex; flex-wrap: wrap; gap: 10px; }
.fk-svdetail__chip { background: var(--fk-section-bg); color: var(--fk-navy); font-size: 14px; font-weight: 500; padding: 9px 16px; border-left: 3px solid var(--fk-accent); }
.fk-svdetail__note { margin-top: 20px; font-size: 14px; line-height: 1.9; color: #6b7488; background: var(--fk-section-bg); padding: 16px 20px; }

.fk-svcta { background: linear-gradient(115deg, #1e366c, #0081ba); padding: 70px 0; text-align: center; }
.fk-svcta__h2 { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 24px; }

/* ============ WORKS PAGE ============ */
.fk-works__note { font-size: 15px; line-height: 1.9; color: #6b7488; margin-bottom: 40px; background: var(--fk-section-bg); padding: 18px 22px; border-left: 4px solid var(--fk-accent); }

/* ============ CONTACT PAGE ============ */
.fk-tel-band {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fk-section-bg); padding: 32px 40px; margin-bottom: 56px; border-left: 5px solid var(--fk-accent);
}
.fk-tel-band__title { font-size: 16px; font-weight: 900; color: var(--fk-navy); margin-bottom: 4px; }
.fk-tel-band__note { font-size: 13px; color: var(--fk-gray); }
.fk-tel-band__label { font-family: var(--fk-en); font-size: 13px; letter-spacing: .14em; color: var(--fk-gray); font-weight: 600; }
.fk-tel-band__tel { font-size: 36px; font-weight: 900; color: var(--fk-navy); letter-spacing: .02em; }

.fk-form__eyebrow { font-family: var(--fk-en); font-size: 16px; letter-spacing: .2em; color: var(--fk-blue); font-weight: 600; margin-bottom: 6px; }
.fk-form__h2 { font-size: 26px; font-weight: 900; color: var(--fk-navy); margin-bottom: 32px; }
.fk-form__fields { display: flex; flex-direction: column; gap: 24px; }
.fk-form__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.fk-form__row--top { align-items: start; }
.fk-form__label { font-size: 15px; font-weight: 700; color: var(--fk-navy); }
.fk-form__row--top .fk-form__label { padding-top: 12px; }
.fk-form__req { color: #c00; font-size: 12px; }
.fk-input { width: 100%; padding: 14px 16px; border: 1px solid #cdd4e0; font-size: 15px; background: #fbfcfe; }
.fk-input:focus { border-color: var(--fk-blue); outline: none; }
textarea.fk-input { resize: vertical; line-height: 1.7; }
.fk-form__submit-wrap { text-align: center; margin-top: 44px; }
.fk-form__errors { background: #fff4f4; border-left: 4px solid #c00; padding: 14px 18px; margin-bottom: 28px; }
.fk-form__error { font-size: 14px; color: #c00; line-height: 1.8; }

/* CMSフォームの「忁E」バチEをサイトカラーEネイビE地E白字）に変更Eユーザー持EE/ !importantEE*/
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '忁EE !important;
  color: #fff !important;
  background: var(--fk-navy) !important;
}

/* CMSフォームがE力する送信ボタン(.submit-btn)をサイトEボタン(.fk-btn--y + --submit)に合わせる、E   CMS側のインラインCSSに勝つため !important を付与（ユーザー持E！E*/
.submit-btn {
  display: block !important;
  width: fit-content !important;
  min-width: 360px !important;
  margin: 0 auto !important;
  white-space: nowrap !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  background: var(--fk-accent) !important;
  color: var(--fk-navy) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  padding: 18px 70px !important;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s !important;
}
.submit-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(219,212,11,.5) !important;
}
.fk-thanks { text-align: center; padding: 80px 20px; }
.fk-thanks__en { font-family: var(--fk-en); font-size: 60px; color: var(--fk-accent); font-weight: 700; }
.fk-thanks__h2 { font-size: 26px; font-weight: 900; color: var(--fk-navy); margin: 12px 0 16px; }
.fk-thanks__text { font-size: 15px; line-height: 1.9; color: #6b7488; }

/* ============ FOOTER ============ */
.fk-footer { background: var(--fk-footer-bg); color: #fff; padding: 64px 0 28px; }
.fk-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.fk-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14); }
.fk-footer__brand { max-width: 450px; }
.fk-footer__logo { height: auto; width: 200px; max-width: none; margin-bottom: 20px; display: block; }
.fk-footer__desc { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.7); }
.fk-footer__addr { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.55); margin-top: 16px; }
.fk-footer__cols { display: flex; gap: 56px; }
.fk-footer__col-title { font-family: var(--fk-en); font-size: 13px; letter-spacing: .16em; color: var(--fk-accent); font-weight: 600; margin-bottom: 16px; }
.fk-footer__links { display: flex; flex-direction: column; gap: 12px; }
.fk-footer__link { font-size: 14px; color: rgba(255,255,255,.82); transition: color .2s; }
.fk-footer__link:hover { color: var(--fk-accent); }
.fk-footer__contact-label { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.fk-footer__contact-tel { font-size: 26px; font-weight: 900; color: #fff; margin-bottom: 18px; }
.fk-footer__copy { text-align: center; padding-top: 24px; font-family: var(--fk-en); font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.5); }

/* ============ PAGE TOP BUTTON ============ */
.fk-pagetop {
  position: fixed; right: 28px; bottom: 28px; z-index: 150;
  width: 52px; height: 52px; border: none; cursor: pointer;
  background: var(--fk-navy); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  border-top: 3px solid var(--fk-accent);
  box-shadow: 0 6px 20px rgba(30,54,108,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s, visibility .3s;
}
.fk-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fk-pagetop:hover { background: var(--fk-blue); transform: translateY(-3px); }
