@charset "UTF-8";
/* =========================================================
   AFFLUENT 福岡版 LP  /  FUKUOKA CLEAR LUXURY
   ファイル: css/fukuoka-clear.css （福岡版専用・他版と非共用）
   ========================================================= */

:root {
  /* FUKUOKA CLEAR LUXURY : 明るく爽やか、かつ上質さを保つ配色 */
  --fukuoka-primary: #0F4A5F;   /* ディープマリン（見出し・文字） */
  --fukuoka-secondary: #1189A6; /* クリアブルー（主役のアクセント） */
  --fukuoka-aqua: #55BED2;      /* ブライトアクア */
  --fukuoka-pale: #E4F4F9;      /* ペールアクア（セクション地色） */
  --fukuoka-background: #F5FCFD;
  --fukuoka-white: #FFFFFF;
  --fukuoka-text: #1D3A44;
  --fukuoka-muted: #5A7480;
  --fukuoka-sand: #C2A968;      /* サンドゴールド（上質さのアクセント） */

  --fk-line: #CDE8EF;
  --fk-shadow: 0 12px 32px rgba(17, 137, 166, .10);
  --fk-shadow-sm: 0 4px 16px rgba(17, 137, 166, .09);
  --fk-radius: 10px;
  --fk-header-h: 84px;
  --fk-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --fk-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --fk-en: "Cormorant Garamond", "Times New Roman", serif;
  /* 電話番号など可読性を優先する数字用（明朝体の英字フォントは使わない） */
  --fk-num: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fk-header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fk-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--fukuoka-text);
  background: var(--fukuoka-background);
  font-feature-settings: "palt";
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--fukuoka-primary); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--fukuoka-secondary); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--fukuoka-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

.fk-container {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
}
.fk-narrow { width: min(920px, calc(100% - 48px)); margin-inline: auto; }

.fk-section { padding: 96px 0; }
.fk-section--pale { background: var(--fukuoka-pale); }
.fk-section--white { background: var(--fukuoka-white); }
.fk-section--deep { background: var(--fukuoka-primary); color: #fff; }
/* クロスメディア：同系色で沈まないよう、明るいアクア系グラデーションの地色にする */
.fk-section--cross {
  background:
    radial-gradient(900px 460px at 88% 0%, #D6F1F8 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--fukuoka-pale) 0%, var(--fukuoka-background) 100%);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Section heading ---------- */
.fk-sec-head { text-align: center; margin-bottom: 56px; }
.fk-sec-head__en {
  display: block;
  font-family: var(--fk-en);
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--fukuoka-secondary);
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* 見出し内の強調（要所のインパクト） */
.fk-sec-head__ja .fk-em {
  color: var(--fukuoka-secondary);
  background: linear-gradient(180deg, transparent 72%, rgba(121,181,193,.34) 72%);
  padding-inline: .06em;
}
.fk-sec-head__ja {
  font-family: var(--fk-serif);
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--fukuoka-primary);
}
.fk-section--deep .fk-sec-head__ja { color: #fff; }
.fk-section--deep .fk-sec-head__en { color: var(--fukuoka-aqua); }
.fk-sec-head__line {
  width: 48px; height: 2px; margin: 20px auto 0;
  background: var(--fukuoka-sand);
}
.fk-sec-head__lead {
  margin-top: 22px;
  font-size: 15.5px;
  color: var(--fukuoka-muted);
  line-height: 2;
}
.fk-section--deep .fk-sec-head__lead { color: rgba(255,255,255,.86); }

/* ---------- Buttons ---------- */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 34px;
  font-family: var(--fk-sans); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  text-align: center;
}
.fk-btn--primary { background: var(--fukuoka-primary); color: #fff; }
.fk-btn--primary:hover { background: var(--fukuoka-secondary); color: #fff; }
/* 主要CTA（FV・フロート・送信）はサンドゴールドの細枠でアクセントを付ける */
.fk-btn--accent {
  background: linear-gradient(135deg, var(--fukuoka-primary) 0%, var(--fukuoka-secondary) 100%);
  color: #fff;
  border-color: var(--fukuoka-sand);
  box-shadow: 0 10px 26px rgba(17, 137, 166, .28);
}
.fk-btn--accent:hover {
  background: linear-gradient(135deg, var(--fukuoka-secondary) 0%, var(--fukuoka-aqua) 100%);
  color: #fff; border-color: #DCC993;
}
.fk-btn--secondary { background: var(--fukuoka-secondary); color: #fff; }
.fk-btn--secondary:hover { background: var(--fukuoka-primary); color: #fff; }
.fk-btn--outline {
  background: transparent; color: var(--fukuoka-primary); border-color: var(--fukuoka-primary);
}
.fk-btn--outline:hover { background: var(--fukuoka-primary); color: #fff; }
.fk-btn--ghost-light {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55);
}
.fk-btn--ghost-light:hover { background: #fff; color: var(--fukuoka-primary); }
.fk-btn--wide { width: 100%; max-width: 420px; }
/* 大きめCTA（お問い合わせパネル用） */
.fk-btn--lg { min-width: 340px; min-height: 64px; font-size: 17px; }
/* FVのCTAは横に伸びすぎないよう押さえる */
.fk-hero__actions .fk-btn { padding: 14px 26px; }

.fk-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-weight: 700; font-size: 15px; color: var(--fukuoka-secondary);
  border-bottom: 1px solid rgba(17,137,166,.45);
}
.fk-textlink:hover { color: var(--fukuoka-primary); border-bottom-color: var(--fukuoka-primary); }

/* ---------- リンクボタン（最新号・バックナンバー・各施策の詳細） ----------
   背景のアクア系に埋もれないよう、深いネイビー＋サンドゴールフィニッシュに変更 */
.fk-linkbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  font-family: var(--fk-sans); font-size: 14.5px; font-weight: 700; letter-spacing: .03em;
  color: #fff; border-radius: 6px; border: 1px solid var(--fukuoka-sand);
  background: linear-gradient(135deg, #0B3D50 0%, #135C74 100%);
  box-shadow: 0 8px 20px rgba(11, 61, 80, .26);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fk-linkbtn i { font-size: 13px; color: #DFC489; transition: color .2s ease; }
.fk-linkbtn:hover {
  background: linear-gradient(135deg, var(--fukuoka-sand) 0%, #DFC489 100%);
  color: #0B3D50; border-color: var(--fukuoka-sand); transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(194, 169, 104, .38);
}
.fk-linkbtn:hover i { color: #0B3D50; }
/* 併記する2つ目のボタンは白地＋色枠で主従をつける */
.fk-linkbtn--outline {
  background: #fff; color: #0B3D50;
  border-color: #0B3D50; box-shadow: 0 6px 16px rgba(11, 61, 80, .14);
}
.fk-linkbtn--outline i { color: #0B3D50; }
.fk-linkbtn--outline:hover {
  background: #0B3D50; color: #fff; border-color: var(--fukuoka-sand);
}
.fk-linkbtn--outline:hover i { color: #DFC489; }

/* =========================================================
   Header
   ========================================================= */
.fk-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--fk-line);
  backdrop-filter: blur(8px);
}
.fk-header__inner {
  width: min(1400px, calc(100% - 40px));
  margin-inline: auto;
  min-height: var(--fk-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fk-brand { display: flex; align-items: center; gap: 14px; }
.fk-brand__logo {
  font-family: var(--fk-en);
  font-size: 26px; letter-spacing: .18em; font-weight: 600;
  color: var(--fukuoka-primary); line-height: 1.1;
}
.fk-brand__edition {
  font-size: 11px; letter-spacing: .16em; color: var(--fukuoka-secondary);
  border-left: 1px solid var(--fk-line); padding-left: 14px; line-height: 1.6;
}
.fk-brand__edition strong { display: block; font-size: 13px; color: var(--fukuoka-primary); }

.fk-nav { display: flex; align-items: center; gap: 22px; }
.fk-nav__link { font-size: 14px; font-weight: 500; color: var(--fukuoka-text); }
.fk-nav__link:hover { color: var(--fukuoka-secondary); }

.fk-header__tel { text-align: right; line-height: 1.4; }
.fk-header__tel-label { display: block; font-size: 11px; color: var(--fukuoka-muted); letter-spacing: .04em; }
.fk-header__tel-num {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fk-num); font-size: 23px; font-weight: 700; letter-spacing: .01em;
  color: var(--fukuoka-primary);
}
.fk-header__tel-num i { font-size: 17px; color: var(--fukuoka-secondary); }
.fk-header__tel-note { display: block; font-size: 11px; color: var(--fukuoka-muted); }
.fk-header__cta { margin-left: 4px; }
.fk-header__cta .fk-btn { min-height: 48px; padding: 10px 22px; font-size: 14px; }

.fk-burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--fk-line);
  background: #fff; border-radius: 6px; color: var(--fukuoka-primary); font-size: 18px; cursor: pointer;
}
.fk-drawer {
  display: none;
  position: fixed; top: var(--fk-header-h); left: 0; right: 0; z-index: 899;
  background: #fff; border-bottom: 1px solid var(--fk-line);
  padding: 18px 20px 26px; box-shadow: var(--fk-shadow);
  max-height: calc(100vh - var(--fk-header-h)); overflow-y: auto;
}
.fk-drawer.is-open { display: block; }
.fk-drawer__link {
  display: block; padding: 14px 6px; border-bottom: 1px solid var(--fk-line);
  font-size: 15px; font-weight: 500; color: var(--fukuoka-text);
}
.fk-drawer__tel {
  display: block; margin-top: 20px; text-align: center;
  padding: 14px; border-radius: 6px; background: var(--fukuoka-pale);
}
.fk-drawer__tel span { display: block; font-size: 12px; color: var(--fukuoka-muted); }
.fk-drawer__tel strong { font-family: var(--fk-num); font-size: 24px; font-weight: 700; color: var(--fukuoka-primary); }

/* =========================================================
   Hero
   ========================================================= */
.fk-hero {
  position: relative;
  margin-top: var(--fk-header-h);
  padding: 34px 0 0;
  background:
    radial-gradient(1100px 560px at 84% -12%, #CFEEF7 0%, rgba(255,255,255,0) 64%),
    radial-gradient(760px 420px at 6% 18%, #EAF8FB 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--fukuoka-white) 0%, var(--fukuoka-pale) 100%);
  overflow: hidden;
}
.fk-hero__inner {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
  gap: 26px; align-items: center;
}
/* 左テキスト列は引き締めて上質な寄りを作る */
.fk-hero__body { max-width: 480px; }
.fk-hero__label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--fk-en); font-size: 13px; letter-spacing: .26em;
  color: var(--fukuoka-secondary); padding-bottom: 10px; margin-bottom: 22px;
  border-bottom: 1px solid var(--fukuoka-sand);
}
/* ラベル先頭のアクセント罫線 */
.fk-hero__label::before {
  content: ""; width: 34px; height: 1px; background: var(--fukuoka-sand); flex: none;
}
.fk-hero__title {
  font-family: var(--fk-serif);
  font-size: clamp(30px, 3.9vw, 48px);
  line-height: 1.5; letter-spacing: .03em; color: var(--fukuoka-primary);
  margin-bottom: 24px;
}
.fk-hero__title .fk-line { display: block; }
.fk-hero__title em { font-style: normal; color: var(--fukuoka-secondary); }
/* 見出しのアクセント行 */
.fk-hero__title-accent {
  color: var(--fukuoka-secondary);
  background: linear-gradient(180deg, transparent 74%, rgba(194,169,104,.48) 74%);
  display: inline-block !important;
  padding-right: .12em;
}
.fk-hero__lead {
  font-size: 14.5px; line-height: 1.95; color: var(--fukuoka-text);
  max-width: 30em; margin-bottom: 26px;
}
.fk-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fk-hero__tel {
  display: inline-flex; flex-direction: column; line-height: 1.35;
  padding-left: 18px; border-left: 1px solid var(--fk-line);
}
.fk-hero__tel small { font-size: 11.5px; color: var(--fukuoka-muted); }
.fk-hero__tel a { font-family: var(--fk-num); font-size: 22px; font-weight: 700; letter-spacing: .01em; color: var(--fukuoka-primary); }

/* Hero visual : 上=発行エリアMAP / 下=誌面・DM見本4点
   パネルや丸囲みは使わず、MAPを背景に溶け込ませてシンプルに見せる */
.fk-hero__visual {
  position: relative; min-width: 0;
  padding: 4px 0 0;
  background: transparent;
}

/* MAP：縁取りなし、周囲をフェードさせて背景と一体化
   列幅より大きく図を見せるため、左右にはみ出して拡大する */
.fk-hero__map {
  position: relative; margin: 0 -10% 0 -4%;
  width: 114%;
  /* 横幅は保ちながら高さを抑え、左テキスト列との高さ差を埋める */
  aspect-ratio: 20 / 12;
}
.fk-hero__map img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  transform: scale(1.2);
  transform-origin: 50% 42%;
  mix-blend-mode: multiply;
  filter: saturate(1.14) contrast(1.08);
  -webkit-mask-image: radial-gradient(72% 70% at 50% 44%, #000 60%, transparent 100%);
  mask-image: radial-gradient(72% 70% at 50% 44%, #000 60%, transparent 100%);
}
.fk-hero__map-label {
  position: absolute; top: -4px; left: 0; right: 0; z-index: 2;
  text-align: center;
  font-family: var(--fk-en); font-size: 12px; letter-spacing: .3em;
  color: var(--fukuoka-secondary);
}

/* 4冊の冊子を扇状に配置 */
.fk-hero__books {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  /* 冊子の底辺を左CTAの高さに揃えるため、MAP下端に深く重ねる */
  margin-top: -172px;
  padding: 0 4px;
}
.fk-hero__book {
  margin: 0; width: 29%; max-width: 182px;
  border-radius: 4px; overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 74, 95, .20);
  transition: transform .35s ease;
}
.fk-hero__book img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.fk-hero__book--1 { transform: rotate(-9deg) translateY(6px); z-index: 4; }
.fk-hero__book--2 { transform: rotate(-3deg) translateY(-6px); margin-left: -8%; z-index: 3; }
.fk-hero__book--3 { transform: rotate(3deg) translateY(-2px); margin-left: -8%; z-index: 2; }
.fk-hero__book--4 { transform: rotate(9deg) translateY(10px); margin-left: -8%; z-index: 1; }
.fk-hero__book:hover { transform: translateY(-10px) rotate(0deg); z-index: 5; }

.fk-hero__caption {
  margin-top: 14px; text-align: center;
  font-size: 12px; color: var(--fukuoka-muted); line-height: 1.8;
}

/* Hero stats */
.fk-hero__stats {
  margin-top: 58px;
  background: var(--fukuoka-white);
  border-top: 1px solid var(--fk-line);
}
.fk-stats-grid {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fk-stat {
  padding: 34px 20px; text-align: center;
  border-right: 1px solid var(--fk-line);
}
.fk-stat:last-child { border-right: 0; }
.fk-stat__num {
  display: block;
  font-family: var(--fk-serif);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.25; color: var(--fukuoka-secondary); letter-spacing: .02em;
}
/* 数値の上に短いアクセント罫線 */
.fk-stat dd::before {
  content: ""; display: block; width: 26px; height: 2px; margin: 0 auto 12px;
  background: var(--fukuoka-sand);
}
.fk-stat__label { display: block; margin-top: 8px; font-size: 13px; color: var(--fukuoka-muted); }

/* =========================================================
   Problem cards
   ========================================================= */
.fk-problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* グリッド子要素の最小幅を解除し、狭幅での横はみ出しを防ぐ */
.fk-problem-grid > *, .fk-data-grid > *, .fk-service > *, .fk-case > *,
.fk-support > *, .fk-flow > *, .fk-footer__top > * { min-width: 0; }
.fk-problem {
  position: relative; background: #fff; border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius); padding: 54px 28px 44px;
  box-shadow: var(--fk-shadow-sm);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* 番号：カード上部中央で大きく視認性高く */
.fk-problem__no {
  position: absolute; top: -23px; left: 50%; transform: translateX(-50%);
  min-width: 76px; height: 46px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fukuoka-primary) 0%, var(--fukuoka-secondary) 100%);
  color: #fff;
  font-family: var(--fk-num); font-size: 24px; font-weight: 700; letter-spacing: .06em;
  border-radius: 6px; border-bottom: 2px solid var(--fukuoka-sand);
  box-shadow: 0 6px 16px rgba(17, 137, 166, .30);
}
/* カード上辺のアクセントライン */
.fk-problem::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: linear-gradient(90deg, var(--fukuoka-secondary), var(--fukuoka-aqua));
  border-radius: var(--fk-radius) var(--fk-radius) 0 0;
}
.fk-problem__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fukuoka-pale); color: var(--fukuoka-secondary);
  font-size: 29px; margin: 8px auto 22px;
}
.fk-problem__title {
  font-family: var(--fk-serif); font-size: 20px; color: var(--fukuoka-primary);
  margin-bottom: 16px; letter-spacing: .02em; line-height: 1.6;
}
.fk-problem__text {
  font-size: 14.5px; color: #47646E; line-height: 2;
  max-width: 18em; margin-inline: auto;
}

/* =========================================================
   About
   ========================================================= */
/* 左テキストと右画像は上端を揃え、中央寄せで浮くのを防ぐ */
.fk-about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.fk-about__body p + p { margin-top: 22px; }
.fk-about__body p { font-size: 16px; line-height: 2.15; }
.fk-about__quote {
  margin: 30px 0 0; padding: 22px 26px;
  background: var(--fukuoka-pale); border-left: 3px solid var(--fukuoka-sand);
  border-radius: 0 6px 6px 0;
}
.fk-about__quote p {
  font-family: var(--fk-serif); font-size: 17px; line-height: 1.95; color: var(--fukuoka-primary);
}
/* 誌面イメージ：同じ大きさのページを3列×2行で整列させる */
.fk-about__pages { margin: 0; }
.fk-about__pages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fk-about__page {
  display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--fk-line);
  border-radius: 4px; box-shadow: var(--fk-shadow-sm);
}
.fk-about__page img {
  width: 100%; height: 100%;
  /* 右列が縦に長くなりすぎないよう、誌面の上部を見せる比率にする */
  aspect-ratio: 7 / 6; object-fit: cover; object-position: 50% 0;
  display: block;
}
.fk-about__pages-caption {
  margin-top: 12px; font-size: 12.5px; color: var(--fukuoka-muted); line-height: 1.8;
}
.fk-about__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 18px; }

/* Media outline table */
.fk-outline {
  margin-top: 64px; background: #fff; border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius); overflow: hidden; box-shadow: var(--fk-shadow-sm);
}
.fk-outline__head {
  background: var(--fukuoka-primary); color: #fff; padding: 18px 28px;
  font-family: var(--fk-serif); font-size: 19px; letter-spacing: .06em;
}
.fk-outline__table { width: 100%; border-collapse: collapse; }
.fk-outline__table th, .fk-outline__table td {
  padding: 17px 28px; border-bottom: 1px solid var(--fk-line);
  font-size: 15px; text-align: left; vertical-align: top;
}
.fk-outline__table th {
  width: 200px; background: var(--fukuoka-background); color: var(--fukuoka-primary);
  font-weight: 700; white-space: nowrap;
}
.fk-outline__table tr:last-child th, .fk-outline__table tr:last-child td { border-bottom: 0; }
.fk-note {
  margin-top: 18px; font-size: 13px; line-height: 1.9; color: var(--fukuoka-muted);
}

/* =========================================================
   Reader data
   ========================================================= */
.fk-data-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.fk-data-card {
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  padding: 34px 26px 30px; box-shadow: var(--fk-shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; min-width: 0;
}
/* ドーナツリング＋中央の数値 */
.fk-data-card__ring {
  position: relative; width: 148px; height: 148px; margin: 0 auto 22px;
  flex: none;
}
.fk-data-card__ring canvas { width: 100% !important; height: 100% !important; }
.fk-data-card__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: none;
}
.fk-data-card__num {
  font-family: var(--fk-serif); font-weight: 500;
  font-size: 34px; line-height: 1.1; color: var(--fukuoka-primary); letter-spacing: .01em;
}
.fk-data-card__num em { font-style: normal; font-size: .74em; margin-left: 1px; }
.fk-data-card__unit {
  font-size: 10.5px; line-height: 1.5; color: var(--fukuoka-muted); letter-spacing: .02em;
}
.fk-data-card__title {
  font-family: var(--fk-serif); font-size: 18px; line-height: 1.6;
  color: var(--fukuoka-primary); letter-spacing: .02em;
}
.fk-data-card__desc {
  margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: var(--fukuoka-muted);
}
/* 年齢層カード（横バー表現） */
.fk-data-card--age { justify-content: center; }
.fk-data-card__age {
  font-family: var(--fk-serif); font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.2; color: var(--fukuoka-primary); letter-spacing: .03em;
  margin-bottom: 22px;
}
.fk-data-card__bar {
  display: flex; width: 100%; max-width: 260px; height: 10px;
  border-radius: 999px; overflow: hidden; background: var(--fukuoka-pale);
}
.fk-data-card__bar-male { background: var(--fukuoka-secondary); }
.fk-data-card__bar-female { background: var(--fukuoka-sand); }
.fk-data-card__bar-legend {
  display: flex; justify-content: space-between;
  width: 100%; max-width: 260px; margin: 10px auto 24px;
  font-size: 12.5px; color: var(--fukuoka-muted);
}
.fk-data-survey {
  margin-top: 30px; text-align: center; font-size: 12.5px; color: var(--fukuoka-muted); line-height: 2;
}

/* =========================================================
   Services
   ========================================================= */
.fk-service { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fk-service__card {
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--fk-shadow-sm);
}
/* 実物の誌面・チラシ・DM画像は全体を見せたいため、切り抜かず contain で収める */
.fk-service__media {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 42px 18px 16px;
  background: linear-gradient(160deg, #EEF8FB 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--fk-line);
}
.fk-service__media img {
  width: auto; max-width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(15, 74, 95, .18));
}
/* 2枚並びのカード（誌面広告・単独DM） */
.fk-service__media--duo img { max-width: calc(50% - 6px); }
.fk-service__tag {
  position: absolute; top: 0; left: 0;
  background: linear-gradient(135deg, var(--fukuoka-primary) 0%, var(--fukuoka-secondary) 100%);
  color: #fff;
  font-family: var(--fk-en); font-size: 13px; letter-spacing: .16em;
  padding: 8px 16px;
  border-bottom: 2px solid var(--fukuoka-sand);
}
.fk-service__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.fk-service__name {
  font-family: var(--fk-serif); font-size: 23px; color: var(--fukuoka-primary); letter-spacing: .04em;
}
.fk-service__catch {
  margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--fukuoka-secondary);
  padding-bottom: 14px; border-bottom: 1px solid var(--fk-line);
}
.fk-service__text { margin-top: 16px; font-size: 14.5px; line-height: 1.95; color: var(--fukuoka-text); }
.fk-service__points { margin-top: 18px; display: grid; gap: 9px; }
.fk-service__points li {
  position: relative; padding-left: 24px; font-size: 14px; line-height: 1.8; color: var(--fukuoka-text);
}
.fk-service__points li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: 2px; font-size: 12px; color: var(--fukuoka-aqua);
}
.fk-service__note {
  margin-top: 18px; font-size: 12.5px; color: var(--fukuoka-muted);
  background: var(--fukuoka-background); border-radius: 6px; padding: 10px 14px; line-height: 1.8;
}
/* 3カードでボタンの行を揃える（カード下端に揃えて配置） */
.fk-service__link { margin-top: auto; padding-top: 20px; }
.fk-service__common {
  margin-top: 30px; padding: 20px 26px; background: #fff;
  border: 1px dashed var(--fukuoka-aqua); border-radius: var(--fk-radius);
  font-size: 14px; line-height: 1.95; color: var(--fukuoka-text); text-align: center;
}

/* =========================================================
   Cross media
   ========================================================= */
/* 全体が同系色で沈まないよう、明るい地色＋白カードでコントラストを付ける */
.fk-cross__intro { max-width: 860px; margin: 0 auto 20px; text-align: center; font-size: 15.5px; line-height: 2.05; color: var(--fukuoka-text); }
.fk-cross__tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.fk-cross__tag {
  border: 0; border-radius: 999px;
  padding: 7px 20px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--fukuoka-secondary) 0%, var(--fukuoka-aqua) 100%);
  box-shadow: 0 6px 14px rgba(17, 137, 166, .22);
}
.fk-cross__target { text-align: center; font-size: 13.5px; color: var(--fukuoka-primary); font-weight: 700; margin-bottom: 48px; line-height: 1.9; }
.fk-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fk-flow__item {
  position: relative; background: #fff;
  border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  padding: 30px 22px 26px; box-shadow: var(--fk-shadow-sm);
}
/* 各ステップの上辺にアクセント帯を入れて識別しやすくする */
.fk-flow__item::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px;
  background: linear-gradient(90deg, var(--fukuoka-secondary), var(--fukuoka-aqua));
  border-radius: var(--fk-radius) var(--fk-radius) 0 0;
}
.fk-flow__no {
  font-family: var(--fk-en); font-size: 12.5px; letter-spacing: .18em; color: #fff;
  display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 4px;
  background: var(--fukuoka-primary);
}
.fk-flow__title { font-family: var(--fk-serif); font-size: 19px; color: var(--fukuoka-primary); margin-bottom: 10px; line-height: 1.6; }
.fk-flow__text { font-size: 14px; line-height: 1.95; color: var(--fukuoka-muted); }
.fk-flow__item::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--fukuoka-aqua); font-size: 15px; z-index: 2;
}
.fk-flow__item:last-child::after { display: none; }

/* Case cards */
.fk-case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fk-case__card {
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  padding: 30px 26px; box-shadow: var(--fk-shadow-sm);
}
.fk-case__no {
  font-family: var(--fk-en); font-size: 13px; letter-spacing: .2em; color: var(--fukuoka-sand);
  display: block; margin-bottom: 10px;
}
.fk-case__title {
  font-family: var(--fk-serif); font-size: 21px; color: var(--fukuoka-primary);
  padding-bottom: 16px; border-bottom: 2px solid var(--fukuoka-aqua); margin-bottom: 18px;
}
.fk-case__combo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.fk-case__chip {
  background: var(--fukuoka-pale); color: var(--fukuoka-primary);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 4px;
}
.fk-case__plus { color: var(--fukuoka-aqua); font-size: 12px; }
.fk-case__text { font-size: 14.5px; line-height: 1.95; color: var(--fukuoka-muted); }

/* =========================================================
   Industry table
   ========================================================= */
.fk-industry {
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  overflow: hidden; box-shadow: var(--fk-shadow-sm);
}
.fk-industry__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fk-industry table { width: 100%; border-collapse: collapse; min-width: 860px; }
.fk-industry th, .fk-industry td {
  padding: 20px 22px; border-bottom: 1px solid var(--fk-line); text-align: left; vertical-align: top;
  font-size: 14.5px; line-height: 1.9;
}
.fk-industry thead th {
  background: var(--fukuoka-primary); color: #fff; font-size: 14px; letter-spacing: .06em; white-space: nowrap;
}
.fk-industry tbody th {
  width: 230px; background: var(--fukuoka-background);
  color: var(--fukuoka-primary); font-weight: 700;
}
.fk-industry tbody tr:last-child th, .fk-industry tbody tr:last-child td { border-bottom: 0; }
.fk-industry__combo { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-industry__chip {
  background: var(--fukuoka-pale); color: var(--fukuoka-primary);
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 4px; white-space: nowrap;
}
.fk-industry__cards { display: none; }

/* =========================================================
   Support
   ========================================================= */
.fk-support { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fk-support__item {
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  padding: 30px 26px; box-shadow: var(--fk-shadow-sm);
}
.fk-support__icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--fukuoka-pale);
  color: var(--fukuoka-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 16px;
}
.fk-support__title {
  font-family: var(--fk-serif); font-size: 19px; color: var(--fukuoka-primary);
  line-height: 1.6; margin-bottom: 10px;
}
.fk-support__text { font-size: 14.5px; line-height: 1.95; color: var(--fukuoka-muted); }

/* =========================================================
   Contact
   ========================================================= */
.fk-contact { background: var(--fukuoka-pale); padding: 76px 0; }

/* お問い合わせ導線パネル（ボタン＋電話＋注記のみ） */
.fk-contact__panel {
  max-width: 680px; margin: 0 auto;
  background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
  padding: 46px 34px 38px; text-align: center; box-shadow: var(--fk-shadow-sm);
}
.fk-contact__panel-btn { margin-top: 0; }
.fk-contact__panel-tel {
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--fk-line);
  font-size: 15px; color: var(--fukuoka-text);
}
.fk-contact__panel-tel a {
  font-family: var(--fk-num); font-size: 24px; font-weight: 700; letter-spacing: .01em;
  color: var(--fukuoka-secondary); vertical-align: -1px;
}
.fk-contact__panel-tel a:hover { color: var(--fukuoka-primary); }
.fk-contact__panel-tel span { font-size: 13.5px; color: var(--fukuoka-muted); }
.fk-contact__panel-note {
  margin-top: 18px; font-size: 12.5px; line-height: 1.9; color: var(--fukuoka-muted);
}
.fk-contact__panel-note a { color: var(--fukuoka-secondary); border-bottom: 1px solid rgba(17,137,166,.45); }

/* =========================================================
   Footer
   ========================================================= */
.fk-footer { background: var(--fukuoka-primary); color: rgba(255,255,255,.86); padding: 64px 0 0; }
.fk-footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
.fk-footer__logo { font-family: var(--fk-en); font-size: 28px; letter-spacing: .18em; color: #fff; margin-bottom: 8px; }
.fk-footer__tagline { font-size: 13.5px; color: var(--fukuoka-aqua); margin-bottom: 20px; letter-spacing: .04em; }
.fk-footer__address { font-size: 14px; line-height: 1.95; }
.fk-footer__tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--fk-num); font-size: 22px; font-weight: 700; letter-spacing: .01em; color: #fff; }
.fk-footer__tel:hover { color: var(--fukuoka-aqua); }
.fk-footer__heading { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: .08em; }
.fk-footer__list li { margin-bottom: 11px; }
.fk-footer__list a { font-size: 14px; color: rgba(255,255,255,.82); }
.fk-footer__list a:hover { color: #fff; }
.fk-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.2); padding: 22px 0 40px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: rgba(255,255,255,.7);
}

/* =========================================================
   Float CTA（SP版のみ／問合せボタン＋電話番号の2つ）
   ========================================================= */
.fk-float-sp {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 890;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--fk-line);
  backdrop-filter: blur(6px);
}
.fk-float-sp__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 58px;
  font-size: 16px; font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  white-space: nowrap; text-align: center; line-height: 1.2;
}
.fk-float-sp__btn i { font-size: 15px; }
/* 問合せボタン（主） */
.fk-float-sp__btn--contact {
  background: linear-gradient(135deg, #0B3D50 0%, #135C74 100%);
  color: #fff; border-color: var(--fukuoka-sand);
}
.fk-float-sp__btn--contact i { color: #DFC489; }
.fk-float-sp__btn--contact:hover, .fk-float-sp__btn--contact:active { background: #0B3D50; color: #fff; }
/* 電話ボタン（従） */
.fk-float-sp__btn--tel {
  background: #fff; color: #0B3D50; border-color: #0B3D50;
}
.fk-float-sp__btn--tel .fk-float-sp__num {
  font-family: var(--fk-num); font-size: 18px; font-weight: 700; letter-spacing: .01em;
}
.fk-float-sp__btn--tel:hover, .fk-float-sp__btn--tel:active { background: var(--fukuoka-pale); color: #0B3D50; }

.fk-pagetop {
  position: fixed; right: 24px; bottom: 96px; z-index: 870;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--fk-line); color: var(--fukuoka-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--fk-shadow-sm);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.fk-pagetop.is-visible { opacity: 1; visibility: visible; }

/* =========================================================
   Scroll animation
   JS有効時のみ適用。JS無効・失敗時も内容は必ず表示される
   ========================================================= */
:root {
  --fk-ease: cubic-bezier(.22, .68, .28, 1);
  --fk-dur: .82s;
}

/* ---------- 基本のスクロール出現 ---------- */
.fk-reveal { opacity: 1; transform: none; }
html.fk-js .fk-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--fk-dur) var(--fk-ease),
    transform var(--fk-dur) var(--fk-ease);
  transition-delay: var(--fk-delay, 0s);
  will-change: opacity, transform;
}
html.fk-js .fk-reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* 方向・種類のバリエーション */
html.fk-js .fk-reveal--left  { transform: translateX(-38px); }
html.fk-js .fk-reveal--right { transform: translateX(38px); }
html.fk-js .fk-reveal--zoom  { transform: scale(.945); }
html.fk-js .fk-reveal--fade  { transform: none; }

/* ---------- 見出しの連続アニメーション ---------- */
html.fk-js .fk-sec-head .fk-sec-head__en,
html.fk-js .fk-sec-head .fk-sec-head__ja,
html.fk-js .fk-sec-head .fk-sec-head__lead {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--fk-ease), transform .7s var(--fk-ease);
}
html.fk-js .fk-sec-head.is-in .fk-sec-head__en   { opacity: 1; transform: none; transition-delay: .05s; }
html.fk-js .fk-sec-head.is-in .fk-sec-head__ja   { opacity: 1; transform: none; transition-delay: .18s; }
html.fk-js .fk-sec-head.is-in .fk-sec-head__lead { opacity: 1; transform: none; transition-delay: .46s; }
/* 罫線は中央から左右に伸びる */
html.fk-js .fk-sec-head .fk-sec-head__line {
  width: 0; transition: width .6s var(--fk-ease) .34s;
}
html.fk-js .fk-sec-head.is-in .fk-sec-head__line { width: 48px; }

/* ---------- ファーストビューの読み込み演出 ---------- */
html.fk-js .fk-hero__label,
html.fk-js .fk-hero__title .fk-line,
html.fk-js .fk-hero__lead,
html.fk-js .fk-hero__actions,
html.fk-js .fk-hero__caption,
html.fk-js .fk-stat {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s var(--fk-ease), transform .9s var(--fk-ease);
}
html.fk-js .fk-hero__map,
html.fk-js .fk-hero__map-label {
  opacity: 0; transition: opacity 1.1s var(--fk-ease) .26s;
}
html.fk-js .fk-hero.is-loaded .fk-hero__label   { opacity: 1; transform: none; transition-delay: .08s; }
html.fk-js .fk-hero.is-loaded .fk-hero__title .fk-line:nth-child(1) { opacity: 1; transform: none; transition-delay: .18s; }
html.fk-js .fk-hero.is-loaded .fk-hero__title .fk-line:nth-child(2) { opacity: 1; transform: none; transition-delay: .27s; }
html.fk-js .fk-hero.is-loaded .fk-hero__title .fk-line:nth-child(3) { opacity: 1; transform: none; transition-delay: .36s; }
html.fk-js .fk-hero.is-loaded .fk-hero__title .fk-line:nth-child(4) { opacity: 1; transform: none; transition-delay: .45s; }
html.fk-js .fk-hero.is-loaded .fk-hero__lead    { opacity: 1; transform: none; transition-delay: .58s; }
html.fk-js .fk-hero.is-loaded .fk-hero__actions { opacity: 1; transform: none; transition-delay: .68s; }
html.fk-js .fk-hero.is-loaded .fk-hero__map,
html.fk-js .fk-hero.is-loaded .fk-hero__map-label { opacity: 1; }
html.fk-js .fk-hero.is-loaded .fk-hero__caption { opacity: 1; transform: none; transition-delay: .95s; }
html.fk-js .fk-hero.is-loaded .fk-stat:nth-child(1) { opacity: 1; transform: none; transition-delay: .90s; }
html.fk-js .fk-hero.is-loaded .fk-stat:nth-child(2) { opacity: 1; transform: none; transition-delay: .98s; }
html.fk-js .fk-hero.is-loaded .fk-stat:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.06s; }
html.fk-js .fk-hero.is-loaded .fk-stat:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.14s; }

/* 冊子4点は閉じた状態から扇状に開く */
html.fk-js .fk-hero__book {
  opacity: 0;
  transition: opacity .8s var(--fk-ease), transform .9s var(--fk-ease);
}
html.fk-js .fk-hero__book--1 { transform: rotate(0deg) translateY(34px); }
html.fk-js .fk-hero__book--2 { transform: rotate(0deg) translateY(34px); }
html.fk-js .fk-hero__book--3 { transform: rotate(0deg) translateY(34px); }
html.fk-js .fk-hero__book--4 { transform: rotate(0deg) translateY(34px); }
html.fk-js .fk-hero.is-loaded .fk-hero__book { opacity: 1; }
html.fk-js .fk-hero.is-loaded .fk-hero__book--1 { transform: rotate(-9deg) translateY(6px);  transition-delay: .56s; }
html.fk-js .fk-hero.is-loaded .fk-hero__book--2 { transform: rotate(-3deg) translateY(-6px); transition-delay: .64s; }
html.fk-js .fk-hero.is-loaded .fk-hero__book--3 { transform: rotate(3deg) translateY(-2px);  transition-delay: .72s; }
html.fk-js .fk-hero.is-loaded .fk-hero__book--4 { transform: rotate(9deg) translateY(10px);  transition-delay: .80s; }
html.fk-js .fk-hero.is-loaded .fk-hero__book:hover {
  transform: translateY(-10px) rotate(0deg); transition-delay: 0s;
}

/* ---------- 課題カード：番号バッジが遅れて着地 ---------- */
html.fk-js .fk-problem .fk-problem__no {
  opacity: 0; transform: translate(-50%, -14px) scale(.86);
  transition: opacity .55s var(--fk-ease), transform .55s var(--fk-ease);
}
html.fk-js .fk-problem.is-in .fk-problem__no {
  opacity: 1; transform: translate(-50%, 0) scale(1);
  transition-delay: calc(var(--fk-delay, 0s) + .3s);
}
html.fk-js .fk-problem .fk-problem__icon {
  opacity: 0; transform: scale(.8);
  transition: opacity .6s var(--fk-ease), transform .6s var(--fk-ease);
}
html.fk-js .fk-problem.is-in .fk-problem__icon {
  opacity: 1; transform: scale(1);
  transition-delay: calc(var(--fk-delay, 0s) + .22s);
}

/* ---------- 誌面イメージタイルが順番に立ち上がる ---------- */
html.fk-js .fk-about__page {
  opacity: 0; transform: translateY(20px) scale(.96);
  transition: opacity .65s var(--fk-ease), transform .65s var(--fk-ease);
}
html.fk-js .fk-about__media.is-in .fk-about__page {
  opacity: 1; transform: none;
  transition-delay: calc(.12s * var(--fk-i, 0) + .15s);
}

/* ---------- 媒体概要テーブルが行ごとに出る ---------- */
html.fk-js .fk-outline__table tbody tr {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--fk-ease), transform .5s var(--fk-ease);
}
html.fk-js .fk-outline.is-in .fk-outline__table tbody tr {
  opacity: 1; transform: none;
  transition-delay: calc(.07s * var(--fk-i, 0) + .2s);
}

/* ---------- 読者データ：リング・数値・バー ---------- */
html.fk-js .fk-data-card .fk-data-card__center {
  opacity: 0; transform: scale(.88);
  transition: opacity .6s var(--fk-ease), transform .6s var(--fk-ease);
}
html.fk-js .fk-data-card.is-in .fk-data-card__center {
  opacity: 1; transform: none;
  transition-delay: calc(var(--fk-delay, 0s) + .35s);
}
/* 男女比バーは0%から実数へ伸びる */
.fk-data-card__bar-male, .fk-data-card__bar-female { width: var(--fk-bar, 0%); }
html.fk-js .fk-data-card__bar-male,
html.fk-js .fk-data-card__bar-female {
  width: 0;
  transition: width 1.05s var(--fk-ease) .35s;
}
html.fk-js .fk-data-card.is-in .fk-data-card__bar-male,
html.fk-js .fk-data-card.is-in .fk-data-card__bar-female { width: var(--fk-bar, 0%); }

/* ---------- サービスカード：画像がゆっくり寄る ---------- */
html.fk-js .fk-service__media img {
  transform: scale(1.06); opacity: 0;
  transition: transform 1.1s var(--fk-ease), opacity .8s var(--fk-ease);
}
html.fk-js .fk-service__card.is-in .fk-service__media img {
  transform: scale(1); opacity: 1;
  transition-delay: calc(var(--fk-delay, 0s) + .12s);
}
html.fk-js .fk-service__tag {
  opacity: 0; transform: translateX(-16px);
  transition: opacity .55s var(--fk-ease), transform .55s var(--fk-ease);
}
html.fk-js .fk-service__card.is-in .fk-service__tag {
  opacity: 1; transform: none;
  transition-delay: calc(var(--fk-delay, 0s) + .28s);
}

/* ---------- クロスメディア：FLOWの矢印が順に点灯 ---------- */
html.fk-js .fk-flow__item::after {
  opacity: 0; transition: opacity .5s var(--fk-ease);
}
html.fk-js .fk-flow__item.is-in::after {
  opacity: 1; transition-delay: calc(var(--fk-delay, 0s) + .45s);
}
html.fk-js .fk-flow__item::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--fk-ease);
}
html.fk-js .fk-flow__item.is-in::before {
  transform: scaleX(1);
  transition-delay: calc(var(--fk-delay, 0s) + .2s);
}
html.fk-js .fk-cross__tag {
  opacity: 0; transform: translateY(12px) scale(.94);
  transition: opacity .5s var(--fk-ease), transform .5s var(--fk-ease);
}
html.fk-js .fk-cross__tags.is-in .fk-cross__tag {
  opacity: 1; transform: none;
  transition-delay: calc(.11s * var(--fk-i, 0) + .1s);
}

/* ---------- 組み合わせ例：チップが順に並ぶ ---------- */
html.fk-js .fk-case__chip, html.fk-js .fk-case__plus {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--fk-ease), transform .45s var(--fk-ease);
}
html.fk-js .fk-case__card.is-in .fk-case__chip,
html.fk-js .fk-case__card.is-in .fk-case__plus {
  opacity: 1; transform: none;
  transition-delay: calc(var(--fk-delay, 0s) + .09s * var(--fk-i, 0) + .25s);
}

/* ---------- 制作支援：アイコンがふわりと出る ---------- */
html.fk-js .fk-support__icon {
  opacity: 0; transform: translateY(-8px) scale(.8);
  transition: opacity .55s var(--fk-ease), transform .55s var(--fk-ease);
}
html.fk-js .fk-support__item.is-in .fk-support__icon {
  opacity: 1; transform: none;
  transition-delay: calc(var(--fk-delay, 0s) + .2s);
}

/* ---------- スクロール進捗バー（ヘッダー下端） ---------- */
.fk-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--fukuoka-secondary), var(--fukuoka-aqua) 60%, var(--fukuoka-sand));
  pointer-events: none;
}
/* スクロール開始でヘッダーに影を落とす */
.fk-header { transition: box-shadow .35s ease, background-color .35s ease; }
.fk-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(15, 74, 95, .10);
  background: rgba(255, 255, 255, .985);
}

/* ---------- フロートCTAはスクロールで迫り上がる ---------- */
@media (max-width: 767px) {
  html.fk-js .fk-float-sp {
    transform: translateY(120%);
    transition: transform .45s var(--fk-ease);
  }
  html.fk-js .fk-float-sp.is-visible { transform: translateY(0); }
}

/* ---------- 動きを減らす設定の端末では全アニメーションを無効化 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.fk-js .fk-reveal,
  html.fk-js .fk-reveal--left,
  html.fk-js .fk-reveal--right,
  html.fk-js .fk-reveal--zoom,
  html.fk-js .fk-sec-head .fk-sec-head__en,
  html.fk-js .fk-sec-head .fk-sec-head__ja,
  html.fk-js .fk-sec-head .fk-sec-head__lead,
  html.fk-js .fk-hero__label,
  html.fk-js .fk-hero__title .fk-line,
  html.fk-js .fk-hero__lead,
  html.fk-js .fk-hero__actions,
  html.fk-js .fk-hero__map,
  html.fk-js .fk-hero__map-label,
  html.fk-js .fk-hero__caption,
  html.fk-js .fk-stat,
  html.fk-js .fk-problem .fk-problem__no,
  html.fk-js .fk-problem .fk-problem__icon,
  html.fk-js .fk-about__page,
  html.fk-js .fk-outline__table tbody tr,
  html.fk-js .fk-data-card .fk-data-card__center,
  html.fk-js .fk-service__media img,
  html.fk-js .fk-service__tag,
  html.fk-js .fk-flow__item::after,
  html.fk-js .fk-cross__tag,
  html.fk-js .fk-case__chip,
  html.fk-js .fk-case__plus,
  html.fk-js .fk-support__icon {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.fk-js .fk-sec-head .fk-sec-head__line { width: 48px; transition: none; }
  html.fk-js .fk-flow__item::before { transform: scaleX(1); transition: none; }
  html.fk-js .fk-hero__book--1 { transform: rotate(-9deg) translateY(6px); }
  html.fk-js .fk-hero__book--2 { transform: rotate(-3deg) translateY(-6px); }
  html.fk-js .fk-hero__book--3 { transform: rotate(3deg) translateY(-2px); }
  html.fk-js .fk-hero__book--4 { transform: rotate(9deg) translateY(10px); }
  html.fk-js .fk-hero__book { opacity: 1; transition: none; }
  html.fk-js .fk-data-card__bar-male,
  html.fk-js .fk-data-card__bar-female { width: var(--fk-bar, 0%); transition: none; }
  html.fk-js .fk-float-sp { transform: none !important; transition: none !important; }
  .fk-progress { display: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px) {
  .fk-nav { display: none; }
  .fk-header__cta { display: none; }
}

@media (max-width: 1024px) {
  :root { --fk-header-h: 72px; }
  .fk-section { padding: 76px 0; }
  .fk-container, .fk-narrow { width: calc(100% - 40px); }
  .fk-hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .fk-hero__body { max-width: none; }
  .fk-hero__visual { max-width: 620px; margin-inline: auto; }
  .fk-problem-grid, .fk-data-grid, .fk-service, .fk-case, .fk-support {
    grid-template-columns: repeat(2, 1fr);
  }
  .fk-flow { grid-template-columns: repeat(2, 1fr); }
  .fk-flow__item:nth-child(2)::after { display: none; }
  .fk-about { grid-template-columns: 1fr; gap: 36px; }
  .fk-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .fk-burger { display: inline-flex; align-items: center; justify-content: center; }
  .fk-header__tel { display: none; }
}

@media (max-width: 767px) {
  :root { --fk-header-h: 64px; }
  body { font-size: 15px; }
  .fk-section { padding: 58px 0; }
  .fk-container, .fk-narrow { width: calc(100% - 32px); }

  .fk-brand__logo { font-size: 21px; }
  .fk-brand__edition { font-size: 10px; padding-left: 10px; }
  .fk-brand__edition strong { font-size: 11.5px; }

  .fk-hero { padding: 42px 0 0; }
  .fk-hero__inner { width: calc(100% - 32px); gap: 32px; }
  .fk-hero__title { font-size: clamp(21px, 6.3vw, 30px); line-height: 1.55; letter-spacing: .01em; }
  .fk-hero__lead { font-size: 14.5px; line-height: 1.95; }
  .fk-hero__actions { flex-direction: column; align-items: stretch; }
  .fk-hero__actions .fk-btn { width: 100%; }
  .fk-hero__tel { border-left: 0; border-top: 1px solid var(--fk-line); padding: 14px 0 0; align-items: center; }
  .fk-hero__body { max-width: none; }
  .fk-hero__visual { padding-top: 10px; }
  /* SPでは画面内に収める（トリミングせず画像全体を表示する） */
  .fk-hero__map { margin: 0; width: 100%; aspect-ratio: 1200 / 896; }
  .fk-hero__map img { transform: none; object-fit: contain; object-position: 50% 50%; }
  .fk-hero__map-label { top: -6px; font-size: 10.5px; letter-spacing: .24em; }
  .fk-hero__books { margin-top: -40px; }
  .fk-hero__book { width: 32%; }
  .fk-hero__caption { margin-top: 14px; font-size: 11.5px; }
  .fk-hero__stats { margin-top: 44px; }
  .fk-stats-grid { grid-template-columns: repeat(2, 1fr); width: calc(100% - 32px); }
  .fk-stat { padding: 22px 10px; border-bottom: 1px solid var(--fk-line); }
  .fk-stat:nth-child(2n) { border-right: 0; }
  .fk-stat:nth-child(n+3) { border-bottom: 0; }

  .fk-sec-head { margin-bottom: 36px; }
  .fk-sec-head__lead { font-size: 14.5px; line-height: 1.95; text-align: left; }

  .fk-problem-grid, .fk-data-grid, .fk-service, .fk-case, .fk-support,
  .fk-flow, .fk-footer__top { grid-template-columns: 1fr; }
  .fk-flow__item::after {
    content: "\f078"; right: 50%; top: auto; bottom: -18px; transform: translateX(50%);
  }
  .fk-flow { gap: 30px; }

  .fk-outline__table th, .fk-outline__table td { display: block; width: 100%; padding: 12px 20px; }
  .fk-outline__table th { border-bottom: 0; padding-bottom: 4px; }
  .fk-outline__head { padding: 15px 20px; font-size: 17px; }

  .fk-data-card { padding: 30px 22px 26px; }
  .fk-data-card__ring { width: 132px; height: 132px; margin-bottom: 18px; }
  .fk-data-card__num { font-size: 31px; }
  .fk-data-card__title { font-size: 17px; }
  .fk-data-card__age { font-size: 32px; margin-bottom: 18px; }

  .fk-industry__scroll { display: none; }
  .fk-industry { background: transparent; border: 0; box-shadow: none; }
  .fk-industry__cards { display: grid; gap: 16px; }
  .fk-industry__card {
    background: #fff; border: 1px solid var(--fk-line); border-radius: var(--fk-radius);
    padding: 22px 20px;
  }
  .fk-industry__card h3 {
    font-family: var(--fk-serif); font-size: 18px; color: var(--fukuoka-primary);
    padding-bottom: 12px; border-bottom: 1px solid var(--fk-line); margin-bottom: 14px;
  }
  .fk-industry__card dt { font-size: 12px; font-weight: 700; color: var(--fukuoka-secondary); letter-spacing: .08em; margin-bottom: 6px; }
  .fk-industry__card dd { margin: 0 0 14px; font-size: 14px; line-height: 1.9; }
  .fk-industry__card dd:last-child { margin-bottom: 0; }

  /* リンクボタン・お問い合わせパネルはSPで全幅にする */
  .fk-linkbtn { width: 100%; }
  .fk-about__links, .fk-service__link { display: grid; gap: 12px; }
  .fk-contact { padding: 56px 0; }
  .fk-contact__panel { padding: 30px 20px 26px; }
  .fk-btn--lg { min-width: 0; width: 100%; min-height: 58px; font-size: 16px; }
  .fk-contact__panel-tel { margin-top: 22px; padding-top: 20px; }
  .fk-contact__panel-tel a { font-size: 22px; }
  .fk-contact__panel-tel span { display: block; }
  .fk-contact__panel-note { text-align: left; }

  /* フロートはSPのみ。2ボタンを横並びにする */
  .fk-float-sp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fk-pagetop { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .fk-footer { padding-top: 46px; }
  .fk-footer__bottom { padding-bottom: 26px; }
}

@media (max-width: 374px) {
  .fk-brand__edition { display: none; }
  .fk-float-sp { padding-inline: 10px; gap: 6px; }
  .fk-float-sp__btn { font-size: 14px; gap: 6px; }
  .fk-float-sp__btn i { font-size: 13px; }
  .fk-float-sp__btn--tel .fk-float-sp__num { font-size: 15.5px; }
}