/* ============================================================
   2026リニューアル第1弾:ファーストビュー
   (style-front.css の後に読み込むこと)
   ============================================================ */
:root {
  --fph-navy: #243b65;
  --fph-ink: #1b2536;
  --fph-ink-soft: #4c576c;
  --fph-gold: #b1905a;
  --fph-line: #e6e2d8;
  --fph-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   2026 グローバルヘッダー(フロントページのみ)
------------------------------------------------------------ */
.fp-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
  transition: transform 0.5s var(--fph-ease), background-color 0.4s ease,
    box-shadow 0.4s ease;
}
.admin-bar .fp-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .fp-header {
    top: 46px;
  }
}
.fp-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(27, 37, 54, 0.06);
}
.fp-header.is-hidden {
  transform: translateY(-110%);
}
/* 下層ページ:最上部から常時ガラス背景(暗いバナーの上でも紺ロゴ・紺文字を視認できるように)。
   is-menu-open より前に置くことで、メニュー展開時は透明側(下の.is-menu-open)が優先される */
.fp-header.fp-header--solid {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(27, 37, 54, 0.06), 0 10px 30px rgba(27, 37, 54, 0.05);
}
/* メニュー展開中はガラス背景を消し、ロゴを白反転 */
.fp-header.is-menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.fp-header.is-menu-open .fp-header__logo img {
  filter: brightness(0) invert(1);
}
.fp-header.is-menu-open .fp-gnav,
.fp-header.is-menu-open .fp-header__cta {
  visibility: hidden;
}
.fp-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  height: 80px;
  width: min(1360px, 94vw);
  margin-inline: auto;
}
.fp-header__logo {
  margin-inline-end: auto;
}
.fp-header__logo-ttl {
  margin: 0;
  line-height: 0;
}
.fp-header__logo img {
  width: clamp(150px, 16vw, 190px);
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}
.fp-gnav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-gnav__link {
  display: inline-block;
  padding-block: 6px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--fph-ink);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.fp-gnav__link:link,
.fp-gnav__link:visited {
  color: var(--fph-ink);
}
@media (hover: hover) {
  .fp-gnav__link:hover {
    opacity: 0.55;
  }
}
.fp-gnav__link--x {
  line-height: 0;
}
/* ------------------------------------------------------------
   2026 ヘッダー:「サービス」ホバードロップダウン(PC・1120px超のみ)
   ・CSSのみで開閉(JS非依存)。:hover / :focus-within で表示するため、
     JS・GSAPが無くても動作し、閉じている状態でも親リンクは
     /service/ へ生きている(グレースフルデグラデーション)。
   ・1120px以下は .fp-gnav ごと非表示 → 自動的にPC限定。
------------------------------------------------------------ */
.fp-gnav__item--has-sub {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* サブメニューがあることを示す下向きキャレット */
.fp-gnav__item--has-sub > .fp-gnav__link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--fph-ease);
  opacity: 0.55;
}
.fp-subnav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--fph-ease), transform 0.35s var(--fph-ease),
    visibility 0.3s;
  z-index: 1002;
}
/* 対応業種:項目名が短いのでサービス(300px)より詰める */
.fp-subnav--ind {
  min-width: 220px;
}
.fp-subnav__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--fph-line);
  border-radius: 12px;
  box-shadow: 0 24px 50px -24px rgba(27, 37, 54, 0.4);
}
.fp-subnav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fph-ink);
  white-space: nowrap;
  transition: background 0.25s var(--fph-ease), color 0.25s var(--fph-ease);
}
.fp-subnav__num {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fph-gold);
}
.fp-subnav__ttl {
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media (hover: hover) {
  .fp-subnav__link:hover {
    background: var(--fph-navy);
    color: #fff;
  }
  .fp-subnav__link:hover .fp-subnav__num {
    color: var(--fph-gold);
  }
}
/* 開く条件:親をホバー、またはサブメニュー内(親リンク含む)にフォーカス */
.fp-gnav__item--has-sub:hover .fp-subnav,
.fp-gnav__item--has-sub:focus-within .fp-subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.fp-gnav__item--has-sub:hover > .fp-gnav__link::after,
.fp-gnav__item--has-sub:focus-within > .fp-gnav__link::after {
  transform: translateY(1px) rotate(-135deg);
}
.fp-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--fph-navy);
  color: #fff !important;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .fp-header__cta:hover {
    opacity: 0.82;
  }
}
@media screen and (max-width: 1120px) {
  .fp-gnav {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .fp-header__cta {
    display: none;
  }
}

/* ハンバーガー(1120px以下で表示) */
.fp-burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.fp-burger span {
  position: absolute;
  left: 10px;
  width: 28px;
  height: 1.5px;
  background: var(--fph-ink);
  transition: transform 0.45s var(--fph-ease), top 0.45s var(--fph-ease),
    background-color 0.3s;
}
.fp-burger span:nth-child(1) {
  top: 19px;
}
.fp-burger span:nth-child(2) {
  top: 28px;
}
.fp-burger.is-open span {
  background: #fff;
}
.fp-burger.is-open span:nth-child(1) {
  top: 24px;
  transform: rotate(20deg);
}
.fp-burger.is-open span:nth-child(2) {
  top: 24px;
  transform: rotate(-20deg);
}
@media screen and (max-width: 1120px) {
  .fp-burger {
    display: block;
  }
}

/* フルスクリーンメニュー(ヘッダーの下に重ねる) */
.fp-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #131f38;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--fph-ease), visibility 0s 0.55s;
}
.fp-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--fph-ease);
}
.fp-menu__inner {
  text-align: center;
  max-height: 100svh;
  overflow-y: auto;
  padding-block: 90px 40px;
  /* スクロールは残しつつスクロールバーだけ非表示 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 旧Edge/IE */
}
.fp-menu__inner::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
  width: 0;
  height: 0;
}
.fp-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-menu__list li {
  overflow: hidden;
}
.fp-menu__link {
  display: inline-block;
  padding-block: clamp(6px, 1.6svh, 12px);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 0.14em;
  color: #fff !important;
  text-decoration: none;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s var(--fph-ease), opacity 0.3s;
}
.fp-menu.is-open .fp-menu__link {
  transform: translateY(0);
  opacity: 1;
}
.fp-menu__list li:nth-child(1) .fp-menu__link { transition-delay: 0.08s; }
.fp-menu__list li:nth-child(2) .fp-menu__link { transition-delay: 0.13s; }
.fp-menu__list li:nth-child(3) .fp-menu__link { transition-delay: 0.18s; }
.fp-menu__list li:nth-child(4) .fp-menu__link { transition-delay: 0.23s; }
.fp-menu__list li:nth-child(5) .fp-menu__link { transition-delay: 0.28s; }
.fp-menu__list li:nth-child(6) .fp-menu__link { transition-delay: 0.33s; }
.fp-menu__list li:nth-child(7) .fp-menu__link { transition-delay: 0.38s; }
.fp-menu__list li:nth-child(8) .fp-menu__link { transition-delay: 0.43s; }
.fp-menu__link .en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--fph-gold);
  margin-block-start: 2px;
}
/* ===== サービスのアコーディオン(トグル開閉) =====
   <details>/<summary> を使用。初期は閉じ。JSが無効でも summary の
   クリックでネイティブに開閉でき、内容は常にDOMにあるためグレースフル。 */
.fp-acc {
  width: 100%;
}
.fp-acc__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  list-style: none; /* 既定の三角マーカーを消す */
  /* 指で押しやすいよう、タップ領域を上下左右に広げる(最低約52pxの高さを確保) */
  padding-block: clamp(8px, 1.8svh, 14px);
  padding-inline: 28px;
  min-height: 52px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.06);
}
/* 縦の余白は summary 側で確保するので、中のリンクの上下pad dingは消して二重取りを防ぐ */
.fp-acc__summary .fp-menu__link {
  padding-block: 0;
}
.fp-acc__summary::-webkit-details-marker {
  display: none;
}
.fp-acc__summary::marker {
  content: "";
}
.fp-acc__caret {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fph-gold);
  border-bottom: 2px solid var(--fph-gold);
  transform: rotate(45deg); /* 閉:下向き */
  transition: transform 0.3s var(--fph-ease);
}
.fp-acc[open] .fp-acc__caret {
  transform: rotate(-135deg); /* 開:上向き */
}

/* サービス配下のコンパクトなサブリスト(中央に配置・項目は左寄せ) */
.fp-submenu {
  list-style: none;
  margin: 6px auto 14px;
  padding: 12px 0 4px;
  max-width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
}
.fp-submenu li {
  overflow: visible; /* .fp-menu__list li の overflow:hidden を打ち消す */
}
.fp-acc[open] .fp-submenu {
  animation: fp-acc-in 0.4s var(--fph-ease) both;
}
@keyframes fp-acc-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fp-submenu__link {
  display: flex;
  align-items: baseline;
  justify-content: flex-start; /* 左寄せ */
  gap: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none;
  transition: color 0.3s var(--fph-ease);
}
.fp-submenu__link:hover,
.fp-submenu__link:focus-visible {
  color: #fff !important;
}
.fp-submenu__num {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fph-gold);
}
.fp-submenu__ttl {
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  .fp-acc[open] .fp-submenu {
    animation: none;
  }
}
.fp-menu__x {
  display: inline-block;
  margin-block-start: 28px;
  opacity: 0.8;
}

/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.fp-hero {
  background: #fff;
  padding-block-start: clamp(110px, 16vh, 170px);
  overflow: hidden;
}
/* 導入クローク:読み込み直後にJS(header.php)が html.fp-cloak を付与。
   見出しを隠しておき、hero-front.js がせり上がりアニメで表示する(FOUC=一瞬表示を防ぐ)。
   JS未実行・動きを減らす設定では付与されないので、常にコンテンツは可視。 */
html.fp-cloak .fp-hero__inner {
  opacity: 0;
}
.fp-hero__inner {
  width: min(1160px, 92vw);
  margin-inline: auto;
  min-height: calc(100svh - clamp(110px, 16vh, 170px) - clamp(120px, 18vh, 220px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fp-hero__label {
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.4em;
  color: var(--fph-gold);
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 3vh, 28px);
}
.fp-hero__title {
  /* 下限28px:最長行「集患・集客・採用に効く」(11文字)が幅375pxの端末で
     .fp-hero__inner(92vw=345px)に収まる値。34pxだと約396pxとなり折り返すが、
     .fp-hero__row が overflow:hidden のため2行目が消える。下限は28pxより上げないこと。 */
  font-size: clamp(28px, 6.4vw, 82px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.06em;
  color: var(--fph-ink);
  margin: 0;
}
.fp-hero__row {
  display: block;
  overflow: hidden;
  padding-block-end: 0.08em;
}
.fp-hero__row .char {
  display: inline-block;
  will-change: transform;
}
.fp-hero__lead {
  margin: clamp(20px, 3.4vh, 36px) 0 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  color: var(--fph-ink-soft);
  letter-spacing: 0.08em;
}
.fp-hero__scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: clamp(28px, 5vh, 52px);
}
.fp-hero__scroll-tx {
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--fph-ink-soft);
}
.fp-hero__scroll-line {
  position: relative;
  width: 72px;
  height: 1px;
  background: var(--fph-line);
  overflow: hidden;
}
.fp-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fph-navy);
  animation: fph-scrollline 2.2s var(--fph-ease) infinite;
}
@keyframes fph-scrollline {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(102%); }
}

/* 動画フレーム:スクロールで下からせり上がり→全幅に拡大 */
.fp-hero__media {
  padding-block-end: clamp(48px, 8vh, 96px);
}
.fp-hero__frame {
  width: min(1160px, 92vw);
  margin-inline: auto;
  aspect-ratio: 16 / 8.2;
  border-radius: clamp(14px, 2vw, 26px);
  overflow: hidden;
  background: #131f38;
  will-change: transform;
}
.fp-hero__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .fp-hero__frame {
    aspect-ratio: 3 / 4;
  }
}

/* ------------------------------------------------------------
   マーキー(流れるテキスト — セリフ体大・塗りとアウトラインの交互)
------------------------------------------------------------ */
.fp-marquee {
  overflow: hidden;
  background: #fff;
  padding-block: clamp(40px, 8vw, 90px);
}
.fp-marquee__track {
  display: flex;
  width: max-content;
  animation: fph-marquee 36s linear infinite;
  will-change: transform;
}
.fp-marquee__group {
  display: flex;
  flex-shrink: 0;
}
.fp-marquee__item {
  white-space: nowrap;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 1.1;
  padding-inline-end: 0.6em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(36, 59, 101, 0.28);
}
.fp-marquee__item--fill {
  color: rgba(36, 59, 101, 0.45);
  -webkit-text-stroke: 0;
}
@keyframes fph-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   対応業種バンド(包摂の合図 — マーキーと導入文の間)
   ・ページの主題は「調剤薬局」のまま。ここは主張ではなく“合図”なので
     文字を小さく・高さを低く抑え、ファーストビューの序列を壊さない。
   ・チップは全業種とも同じ見た目。塗り分けない。主役が調剤薬局であることは
     リード文の <b> と並び順で示す。チップで序列をつけると、他業種の来訪者に
     「ついでの扱い」と伝わってしまうため。
   ・チップは span(非リンク)。リンク化する場合は a:link/a:visited(style-front.css)が
     色を上書きしてくるので、a.fp-ind__chip:link の詳細度で指定し直すこと。
------------------------------------------------------------ */
.fp-ind {
  background: #fff;
  padding-block: clamp(22px, 3.6vw, 36px);
  border-block: 1px solid var(--fph-line);
}
.fp-ind__inner {
  width: min(1000px, 92vw);
  margin-inline: auto;
  text-align: center;
}
.fp-ind__lead {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--fph-ink-soft);
  /* 文節の途中で改行しない(CJK)。<wbr>を入れた境界だけで折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.fp-ind__lead b {
  font-weight: 600;
  color: var(--fph-ink);
}
.fp-ind__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  list-style: none;
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  padding: 0;
}
/* チップ本体。
   ・淡いグラデーション＋二段の影で「浮いた板」に見せる。ベタ塗りより奥行きが出る。
   ・非リンクなので :hover は付けない(押せると誤解させないため)。 */
.fp-ind__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 18px 6px 6px;
  border: 1px solid var(--fph-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fcfaf6 100%);
  box-shadow:
    0 1px 2px rgba(27, 35, 54, 0.04),
    0 10px 20px -14px rgba(27, 35, 54, 0.45);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--fph-ink);
}
/* アイコンの受け皿。ゴールドの極薄チントで、線アイコンを浮かせる */
.fp-ind__ic {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(177, 144, 90, 0.09);
  color: var(--fph-gold); /* SVGは stroke="currentColor" */
}
.fp-ind__ic svg {
  display: block;
  width: 15px;
  height: 15px;
}
.fp-ind__name {
  display: block;
}
/* スマホ:flexの折り返し＋中央寄せだと行ごとに幅が変わり左右の端がガタつく
   (幅375pxで1行目3個=約325px / 2行目3個=約288px → 片側約18pxのズレ)。
   2列グリッドに変えて、チップを列幅いっぱいに伸ばして端を垂直に揃える。
   ・列数を2にしているのは、最も幅の広い「クリニック」が約111px必要で、
     3列にすると幅375pxで1列約110pxとなり white-space:nowrap のまま溢れるため。
   ・チップ内は左寄せのまま。中央寄せにするとアイコンの縦ラインが崩れる。
   ・max-width は大きめの端末でチップが間延びしないための上限。
   ・業種を7個以上に増やすと最終行が1個だけになるが、左端は揃うので破綻はしない。 */
@media (max-width: 600px) {
  .fp-ind__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(380px, 100%);
    margin-inline: auto;
  }
  .fp-ind__chip {
    display: flex;
    width: 100%;
    gap: 7px;
    padding: 5px 12px 5px 5px;
    font-size: 12px;
  }
  .fp-ind__ic {
    width: 23px;
    height: 23px;
  }
  .fp-ind__ic svg {
    width: 13.5px;
    height: 13.5px;
  }
}

/* ------------------------------------------------------------
   導入文(introduce)
------------------------------------------------------------ */
.fp-intro {
  background: #fff;
  padding-block: clamp(70px, 10vw, 130px);
}
.fp-intro__container {
  width: min(880px, 92vw);
  margin-inline: auto;
}
.fp-intro__catch {
  font-size: clamp(24px, 4.4vw, 46px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--fph-ink);
  margin: 0 0 clamp(48px, 7vw, 84px);
}
.fp-intro__body {
  text-align: center;
  color: var(--fph-ink-soft);
  line-height: 2.2;
}
.fp-intro__body p {
  margin: 0;
  /* 文節の途中で改行しない(CJK)。<wbr>を入れた文節境界だけで折り返すので、
     PC/タブレット/スマホどの幅でも改行が崩れない。極端に狭い時のみ緊急改行。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.fp-intro__body p + p {
  margin-block-start: 1.6em;
}

/* 行ごとマスク表示(js-lines) */
.js-lines > span {
  display: block;
  overflow: hidden;
  padding-block-end: 0.1em;
}
.js-lines .line-inner {
  display: block;
  will-change: transform;
}

/* ------------------------------------------------------------
   ボタン(新デザイン共通)
------------------------------------------------------------ */
.fp-btn-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-start: clamp(36px, 5vw, 56px);
}
.fp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 240px;
  padding: 16px 40px;
  border: 1px solid var(--fph-navy);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.14em;
  background: var(--fph-navy);
  color: #fff !important;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.45s var(--fph-ease);
}
.fp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--fph-ease);
}
.fp-btn::after {
  content: "→";
  font-family: "Cormorant Garamond", serif;
  transition: transform 0.45s var(--fph-ease);
}
.fp-btn > span,
.fp-btn::after {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .fp-btn:hover {
    color: var(--fph-navy) !important;
  }
  .fp-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  .fp-btn:hover::after {
    transform: translateX(5px);
  }
}
/* 線ボタン(副ボタン):透明地・紺の線と文字 → ホバーで紺塗り・白文字 */
.fp-btn--outline {
  background: transparent;
  color: var(--fph-navy) !important;
}
.fp-btn--outline::before {
  background: var(--fph-navy);
}
@media (hover: hover) {
  .fp-btn--outline:hover {
    color: #fff !important;
  }
}

/* ------------------------------------------------------------
   汎用:新デザインのセクション見出し・コンテナ
------------------------------------------------------------ */
.fp-container {
  width: min(1160px, 92vw);
  margin-inline: auto;
}
.fp-container--narrow {
  width: min(880px, 90vw);
}
.fp-sec-lead {
  text-align: center;
  margin: 0 0 clamp(40px, 6vw, 66px);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--fph-ink-soft);
}
.fp-sec-head {
  text-align: center;
  margin-block-end: clamp(40px, 6vw, 72px);
}
.fp-label {
  display: inline-block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fph-gold);
  margin: 0 0 14px;
}
.fp-label::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--fph-gold);
  margin: 10px auto 0;
}
.fp-title {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--fph-ink);
  margin: 0;
}

/* 1文字ずつせり上がる見出し(.js-chars)
   JSが行ごとに .char-row で包み、その中で1文字ずつ動かす。
   行の間の<br>はそのまま残るので pc-none の改行制御は今まで通り効く */
.js-chars .char-row {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding-block-end: 0.1em;
}
.js-chars .char {
  display: inline-block;
  will-change: transform;
}

/* ------------------------------------------------------------
   Problems(こんなお悩みを解決します)
------------------------------------------------------------ */
.fp-problems {
  background: #fff;
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-problems__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-problems__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 20px);
  padding: clamp(24px, 3vw, 36px);
  background: #fbfaf8;
  border: 1px solid var(--fph-line);
  border-radius: 16px;
}
.fp-problems__num {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--fph-gold);
}
.fp-problems__icon {
  flex-shrink: 0;
  width: clamp(28px, 3.4vw, 34px);
  height: clamp(28px, 3.4vw, 34px);
  margin-block-start: clamp(0px, 0.4vw, 4px);
  color: var(--fph-navy); /* SVGのcurrentColor(主線)がこの色になる */
}
.fp-problems__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fp-problems__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--fph-ink);
}
@media screen and (max-width: 768px) {
  .fp-problems__list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   About(代表紹介)
------------------------------------------------------------ */
.fp-sec-head--left {
  text-align: left;
}
.fp-sec-head--left .fp-label::after {
  margin-inline: 0;
}
.fp-about {
  background: #fff;
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-about__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(36px, 5.4vw, 80px);
  align-items: start;
}
.fp-about__photo {
  border-radius: 18px;
  overflow: hidden;
}
.fp-about__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.fp-about__name {
  margin: 18px 0 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 13px;
  color: var(--fph-ink-soft);
}
.fp-about__name span {
  font-size: 20px;
  letter-spacing: 0.2em;
  color: var(--fph-ink);
}
.fp-about__x {
  display: inline-flex;
  margin-block-start: 10px;
  opacity: 0.85;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fp-about__x:hover {
    opacity: 0.5;
  }
}
.fp-about__tx {
  color: var(--fph-ink);
  line-height: 2.1;
}
.fp-about__tx p {
  margin: 0;
}
.fp-about__tx p + p,
.fp-about__tx .fp-check {
  margin-block-start: 1.4em;
}
@media screen and (max-width: 992px) {
  .fp-about__grid {
    grid-template-columns: 1fr;
  }
  .fp-about__media {
    max-width: 300px;
    margin-inline: auto;
  }
  .fp-about__body .fp-btn-row--left {
    justify-content: center;
  }
}

/* チェックリスト(金のチェック) */
.fp-check {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-check li {
  position: relative;
  padding-inline-start: 30px;
  margin-block-start: 10px;
  font-weight: 500;
}
.fp-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 20px;
  height: 20px;
  background: url("../img/checkicon.png") center / contain no-repeat;
}

/* 左寄せボタン行 */
.fp-btn-row--left {
  justify-content: flex-start;
}

/* 画像クリップ表示(js-clip) */
.js-clip {
  overflow: hidden;
}
.js-clip img {
  will-change: transform;
}

/* ------------------------------------------------------------
   Features(UJ WebServiceの特徴)
------------------------------------------------------------ */
.fp-features {
  background: #fff;
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5.4vw, 80px);
  align-items: center;
}
.fp-feature + .fp-feature {
  margin-block-start: clamp(72px, 10vw, 128px);
}
.fp-feature--rev {
  grid-template-columns: 1fr 1.05fr;
}
.fp-feature--rev .fp-feature__media {
  order: 2;
}
.fp-feature__media {
  border-radius: 18px;
  overflow: hidden;
}
.fp-feature__media img {
  width: 100%;
  height: auto;
  display: block;
}
.fp-feature__num {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  color: var(--fph-gold);
  margin-block-end: 12px;
}
.fp-feature__ttl {
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--fph-ink);
  margin: 0 0 18px;
}
.fp-feature__tx {
  margin: 0;
  font-size: 15px;
  line-height: 2.1;
  color: var(--fph-ink);
}
.fp-feature__body .fp-check {
  margin-block-start: 20px;
}
.fp-feature__body .fp-check li {
  font-size: 14.5px;
}
@media screen and (max-width: 992px) {
  .fp-feature,
  .fp-feature--rev {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fp-feature--rev .fp-feature__media {
    order: 0;
  }
  .fp-feature + .fp-feature {
    margin-block-start: 64px;
  }
  .fp-features .fp-btn-row--left {
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   Message(選ばれる理由 / STRENGTHS)ページの特徴一覧
   ※フロントの .fp-feature と用途が異なり見た目も分岐するため、
     衝突を避けて .msg- で名前空間を分離。デザイントークンは共通。
   初期状態は非表示にせず(常に可視)、動きはJS(message-anime.js)で付与。
------------------------------------------------------------ */
.msg-features {
  background: #fff;
  padding-block: clamp(64px, 10vw, 120px);
}
.msg-features__list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 120px);
}
.msg-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.msg-feature__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(27, 37, 54, 0.1);
}
.msg-feature__media img {
  width: 100%;
  height: auto;
  display: block;
}
/* 偶数行は画像を右へ */
.msg-feature--rev .msg-feature__media {
  order: 2;
}
.msg-feature__num {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(44px, 5.4vw, 68px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fph-gold);
}
.msg-feature__ttl {
  position: relative;
  margin: 10px 0 22px;
  padding-bottom: 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: clamp(20px, 2.7vw, 29px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--fph-navy);
}
.msg-feature__ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 1px;
  background: var(--fph-gold);
}
.msg-feature__tx {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--fph-ink-soft);
}
@media screen and (max-width: 860px) {
  .msg-feature {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .msg-feature--rev .msg-feature__media {
    order: 0;
  }
}

/* ------------------------------------------------------------
   Works(制作実績 — PCは横スクロールピン留め)
   カードが画面下端ではなく中段に来るようコンパクトな縦配置
------------------------------------------------------------ */
.fp-works {
  background: #fff;
  overflow: clip;
}
.fp-works__pin {
  padding-block: clamp(96px, 13vh, 130px) clamp(24px, 4vh, 40px);
}
.fp-works .fp-sec-head {
  margin-block-end: clamp(14px, 2.4vh, 24px);
}
.fp-works__head {
  margin-block-end: clamp(20px, 3.5vh, 36px);
}
.fp-works__sub {
  text-align: center;
  margin: 0;
  color: var(--fph-ink-soft);
  font-size: 14.5px;
  line-height: 2;
}
.fp-works__track {
  display: flex;
  gap: clamp(20px, 2.6vw, 36px);
  width: max-content;
  padding-inline: max(calc((100vw - 1160px) / 2), 4vw);
  list-style: none;
  margin: 0;
  will-change: transform;
}
.fp-works__card {
  width: clamp(280px, 30vw, 400px);
  flex-shrink: 0;
}
.fp-works__shot {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.5s var(--fph-ease), box-shadow 0.5s var(--fph-ease);
}
.fp-works__shot img {
  width: 100%;
  height: auto;
  display: block;
}
@media (hover: hover) {
  .fp-works__card:hover .fp-works__shot {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -24px rgba(27, 37, 54, 0.35);
  }
}
.fp-works__name {
  margin: 14px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--fph-ink);
}
.fp-works__card--more {
  display: grid;
  place-items: center;
}
.fp-works__more {
  display: grid;
  place-items: center;
  width: clamp(160px, 15vw, 200px);
  aspect-ratio: 1;
  border: 1px solid var(--fph-navy);
  border-radius: 50%;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.9;
  background: var(--fph-navy);
  color: #fff !important;
  text-decoration: none;
  transition: background-color 0.45s var(--fph-ease), color 0.45s var(--fph-ease);
}
@media (hover: hover) {
  .fp-works__more:hover {
    background: #fff;
    color: var(--fph-navy) !important;
  }
}
.fp-works__foot {
  margin-block-start: clamp(24px, 4vh, 36px);
  text-align: center;
}
.fp-works__map {
  display: inline-block;
  border-block-end: 1px solid var(--fph-navy);
  padding-block-end: 2px;
  font-size: 14.5px;
  color: var(--fph-navy) !important;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fp-works__map:hover {
    opacity: 0.6;
  }
}
/* SPは通常の横スワイプ */
@media screen and (max-width: 991px) {
  .fp-works__pin {
    padding-block: clamp(56px, 9vw, 90px) 40px;
  }
  .fp-works__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fp-works__viewport::-webkit-scrollbar {
    display: none;
  }
  .fp-works__track {
    padding-inline: 4vw;
  }
  .fp-works__card {
    width: min(76vw, 340px);
  }
}

/* ------------------------------------------------------------
   Plan(料金プラン)
   ※料金の数字だけは旧デザインの Roboto を維持(.fp-price__num .en)
------------------------------------------------------------ */
/* サービス(旧デザイン)末尾のボタンと、直下の料金セクション上枠線の間に余白を確保 */
#service {
  padding-block-end: clamp(64px, 9vw, 104px);
}
.fp-price {
  background: #fff;
  border-block: 1px solid var(--fph-line);
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-price__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.fp-price__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fbfaf8;
  border: 1px solid var(--fph-line);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 28px);
}
/* おすすめプラン:白地・紺の枠・浮き上がる影で強調 */
.fp-price__card--rec {
  background: #fff;
  border: 2px solid var(--fph-navy);
  box-shadow: 0 24px 48px -32px rgba(36, 59, 101, 0.4);
}
.fp-price__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: var(--fph-navy);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  padding: 4px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.fp-price__name {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
}
.fp-price__for {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--fph-ink-soft);
  text-align: center;
  min-height: 2.4em;
}
.fp-price__num {
  text-align: center;
  margin-block: 14px 18px;
  padding-block: 14px;
  border-block: 1px solid var(--fph-line);
  color: var(--fph-navy);
  letter-spacing: 0.06em;
}
/* 数字だけ旧デザインの Roboto に戻す(グローバルの .en=Cormorant を上書き) */
.fp-price__num .en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(44px, 4vw, 56px);
  font-weight: 400;
  line-height: 1;
}
.fp-price__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--fph-ink-soft);
}
.fp-price__list li {
  position: relative;
  padding-inline-start: 18px;
  margin-block-start: 8px;
  line-height: 1.8;
}
.fp-price__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fph-gold);
}
@media screen and (max-width: 1080px) {
  .fp-price__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 600px) {
  .fp-price__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Flow(制作の流れ — スクロールで縦線が伸びる)
------------------------------------------------------------ */
.fp-flow {
  background: #fff;
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-flow .fp-sec-head {
  margin-block-end: clamp(18px, 2.6vw, 28px);
}
.fp-flow__list {
  position: relative;
  padding-inline-start: clamp(52px, 7vw, 76px);
}
.fp-flow__list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 線は「番号の丸と同じ幅の枠」を丸と同じ位置に置き、その中央に1pxを引く
   (手計算で半分にせず50%で出すのでズレない) */
.fp-flow__line {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: clamp(38px, 5.4vw, 54px);
  background: none;
  pointer-events: none;
}
.fp-flow__line::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fph-line);
}
.fp-flow__line-fill {
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fph-navy);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
.fp-flow__item {
  position: relative;
  margin: 0;
  padding: clamp(20px, 3vw, 30px) 0;
}
.fp-flow__num {
  box-sizing: border-box;
  position: absolute;
  left: calc(-1 * clamp(52px, 7vw, 76px));
  top: clamp(20px, 3vw, 30px);
  width: clamp(38px, 5.4vw, 54px);
  height: clamp(38px, 5.4vw, 54px);
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--fph-navy);
  border-radius: 50%;
  color: var(--fph-navy);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.08em;
  z-index: 1;
  transition: background-color 0.4s var(--fph-ease), color 0.4s var(--fph-ease),
    box-shadow 0.4s var(--fph-ease);
}
/* 紺の線が到達した番号を点灯 */
.fp-flow__num.is-active {
  background: var(--fph-navy);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(36, 59, 101, 0.08);
}
.fp-flow__item h3 {
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--fph-ink);
  margin: 0 0 8px;
}
.fp-flow__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 2;
  color: var(--fph-ink-soft);
}
@media screen and (max-width: 767px) {
  .fp-flow__list {
    padding-inline-start: 56px;
  }
  .fp-flow__num {
    left: -56px;
    width: 40px;
    height: 40px;
  }
  .fp-flow__line {
    width: 40px;
  }
}

/* ------------------------------------------------------------
   FAQ(よくある質問 — アコーディオン)
------------------------------------------------------------ */
.fp-faq {
  background: #fff;
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-faq__item {
  border-block-end: 1px solid var(--fph-line);
}
.fp-faq__item:first-child {
  border-block-start: 1px solid var(--fph-line);
}
.fp-faq__q {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 18px);
  width: 100%;
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px) 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  font-family: inherit;
  font-size: clamp(15px, 1.8vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--fph-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fp-faq__q:hover {
    opacity: 0.62;
  }
}
.fp-faq__mark {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
  color: var(--fph-gold);
  flex-shrink: 0;
}
.fp-faq__q-tx {
  flex: 1;
}
.fp-faq__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
}
.fp-faq__icon::before,
.fp-faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--fph-navy);
  transition: transform 0.45s var(--fph-ease);
}
.fp-faq__icon::before {
  width: 14px;
  height: 1.5px;
}
.fp-faq__icon::after {
  width: 1.5px;
  height: 14px;
}
.fp-faq__q[aria-expanded="true"] .fp-faq__icon::after {
  transform: rotate(90deg);
}
.fp-faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.5s var(--fph-ease);
}
.fp-faq__a-inner {
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  padding: 4px 8px clamp(24px, 3vw, 32px);
}
.fp-faq__a-inner .fp-faq__mark {
  color: var(--fph-navy);
}
.fp-faq__a-inner p {
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 2;
  color: var(--fph-ink-soft);
}
.fp-faq__a-inner a {
  color: var(--fph-navy);
  border-block-end: 1px solid var(--fph-navy);
  text-decoration: none;
}

/* ------------------------------------------------------------
   Contact CTA(2026 / A案:白地ミニマル・ゴールド罫フレーム)
------------------------------------------------------------ */
.fp-cta {
  background: #faf9f6;
  text-align: center;
  padding-block: clamp(60px, 9vw, 110px);
  border-block: 1px solid var(--fph-line);
}
/* 見出しまわりを短いゴールド罫で上下から額装 */
.fp-cta__frame {
  position: relative;
  padding-block: clamp(40px, 5vw, 64px);
}
.fp-cta__frame::before,
.fp-cta__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 1px;
  background: var(--fph-gold);
}
.fp-cta__frame::before {
  top: 0;
}
.fp-cta__frame::after {
  bottom: 0;
}
/* フレームのゴールド罫があるので、ラベル下のバーは消す */
.fp-cta .fp-label::after {
  display: none;
}
.fp-cta__ttl {
  margin: 0;
  font-size: clamp(21px, 3.4vw, 35px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--fph-navy);
}
.fp-cta__tx {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--fph-ink-soft);
}
.fp-cta__btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-start: clamp(32px, 4.4vw, 48px);
}

/* ------------------------------------------------------------
   Footer(2026 / C案:3カラム・サイトマップ型)
------------------------------------------------------------ */
.fp-footer {
  background: #131f38;
  color: rgba(255, 255, 255, 0.75);
  padding-block: clamp(56px, 7vw, 88px) 32px;
}
.fp-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-block-end: clamp(34px, 5vw, 48px);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.fp-footer__logo {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: 0.04em;
  color: #fff;
}
.fp-footer__tag {
  margin: 12px 0 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
}
.fp-footer .fp-footer__x {
  display: inline-flex;
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.fp-footer__x:hover {
  opacity: 1;
}
.fp-footer__x svg {
  display: block;
}
.fp-footer__head {
  margin: 4px 0 18px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fph-gold);
}
.fp-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fp-footer__nav a {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}
@media (hover: hover) {
  .fp-footer__nav a:hover {
    color: var(--fph-gold);
  }
}
.fp-footer__contact p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.62);
}
.fp-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-footer .fp-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  transition: background 0.35s, color 0.35s;
}
@media (hover: hover) {
  .fp-footer__btn:hover {
    background: #fff;
    color: var(--fph-navy);
  }
}
.fp-footer .fp-footer__btn--line {
  border-color: #7aff7a;
  color: #7aff7a;
}
@media (hover: hover) {
  .fp-footer__btn--line:hover {
    background: #00b900;
    color: #fff;
  }
}
.fp-footer__btm {
  text-align: center;
  padding-block-start: 24px;
}
.fp-footer__btm small {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 820px) {
  .fp-footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-hero__scroll-line::after {
    animation: none;
  }
  .fp-faq__a {
    transition: none;
  }
  .fp-flow__line-fill {
    transform: scaleY(1);
  }
  .fp-flow__num {
    background: var(--fph-navy);
    color: #fff;
    transition: none;
  }
  .fp-marquee__track {
    animation: none;
  }
}

/* ============================================================
   2026リニューアル:service(サービス)ページ
   ・トップ/messageと同じ設計言語(.fp-* トークンを流用)
   ・.svc-* で名前空間を分離(トップページと非干渉)
============================================================ */

/* Intro:ステートメント + キーワードタグ */
.svc-intro { padding-block: clamp(64px, 10vw, 120px); }
.svc-tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: clamp(32px, 4.5vw, 46px);
}
.svc-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border: 1px solid var(--fph-line); border-radius: 999px; background: #fff;
  font-size: 14px; letter-spacing: 0.02em; color: var(--fph-ink);
}
.svc-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fph-gold); }

/* ステートメント帯(ネイビー) */
.svc-statement {
  background: var(--fph-navy); color: #fff; text-align: center;
  padding-block: clamp(64px, 9vw, 112px);
}
.svc-statement__label {
  margin: 0 0 20px; font-size: clamp(12px, 1.4vw, 14px); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fph-gold); font-family: "Cormorant Garamond", "Times New Roman", serif;
}
.svc-statement__ttl {
  margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500;
  font-size: clamp(22px, 3.3vw, 37px); line-height: 1.7; letter-spacing: 0.04em;
}
.svc-statement__ttl::after {
  content: ""; display: block; width: 46px; height: 1px; background: var(--fph-gold); margin: 26px auto 0;
}
.svc-statement__tx {
  max-width: 780px; margin: 24px auto 0; font-size: clamp(14px, 1.7vw, 15px); line-height: 2.1;
  color: rgba(255, 255, 255, 0.82);
}

/* Index:サービス一覧カード(#1〜#6へジャンプ) */
.svc-index { background: #faf9f6; border-block: 1px solid var(--fph-line); padding-block: clamp(58px, 8vw, 100px); }
.svc-index__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(34px, 5vw, 52px);
}
.svc-idx {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 24px 26px; background: #fff; border: 1px solid var(--fph-line); border-radius: 12px;
  text-decoration: none; color: var(--fph-ink); overflow: hidden;
  transition: transform 0.45s var(--fph-ease), border-color 0.45s var(--fph-ease), box-shadow 0.45s var(--fph-ease);
}
.svc-idx__num {
  flex-shrink: 0; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 34px; line-height: 1; color: var(--fph-gold);
}
.svc-idx__ttl { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 15.5px; line-height: 1.5; flex: 1; }
.svc-idx__arrow {
  flex-shrink: 0; font-family: "Cormorant Garamond", "Times New Roman", serif;
  color: var(--fph-navy); transition: transform 0.45s var(--fph-ease);
}
@media (hover: hover) {
  .svc-idx:hover { transform: translateY(-4px); border-color: var(--fph-navy); box-shadow: 0 18px 40px rgba(27, 37, 54, 0.1); }
  .svc-idx:hover .svc-idx__arrow { transform: translateX(5px); }
}

/* 詳細:6カテゴリ × 3項目(交互レイアウト) */
.svc-cats { padding-block: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 30px); }
.svc-cat { scroll-margin-top: 90px; padding-top: clamp(52px, 7vw, 88px); }
.svc-cat + .svc-cat { border-top: 1px solid var(--fph-line); margin-top: clamp(52px, 7vw, 88px); }
.svc-cat__head { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 30px); }
.svc-cat__num {
  flex-shrink: 0; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(40px, 6vw, 72px); line-height: 0.9; color: var(--fph-gold);
}
.svc-cat__sub { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.06em; color: var(--fph-ink-soft); }
.svc-cat__ttl { margin: 0; font-size: clamp(21px, 3vw, 32px); line-height: 1.4; color: var(--fph-navy); font-weight: 500; }
.svc-cat__list { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 76px); margin-top: clamp(36px, 5vw, 58px); }
.svc-item { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.svc-item--rev .svc-item__media { order: 2; }
.svc-item__media { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 22px 55px rgba(27, 37, 54, 0.1); }
.svc-item__media img { display: block; width: 100%; height: auto; will-change: transform; }
.svc-item__num {
  display: inline-block; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--fph-gold);
}
.svc-item__ttl {
  position: relative; margin: 8px 0 20px; padding-bottom: 18px;
  font-size: clamp(18px, 2.3vw, 24px); line-height: 1.5; color: var(--fph-navy); font-weight: 500;
}
.svc-item__ttl::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px; background: var(--fph-gold); }
.svc-item__tx { margin: 0; font-size: 14.5px; line-height: 2.05; color: var(--fph-ink-soft); }

/* service CTA のボタン列 */
.svc-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(32px, 4.5vw, 48px); }

@media screen and (max-width: 900px) {
  .svc-index__grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 860px) {
  .svc-item { grid-template-columns: 1fr; gap: 24px; }
  .svc-item--rev .svc-item__media { order: 0; }
  .svc-cat__head { gap: 14px; }
}
@media screen and (max-width: 560px) {
  .svc-index__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   2026リニューアル:works(制作実績)アーカイブページ
   ・トップ/service と同じ設計言語(.fp-* トークンを流用)
   ・.wk-* で名前空間を分離(トップページの .fp-works と非干渉)
   ・実績はレスポンシブグリッド(PC3列 / タブレット2列 / スマホ1列)
============================================================ */
.wk { padding-block: clamp(58px, 8vw, 104px); background: #fff; }
.wk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px); margin-top: clamp(40px, 5.5vw, 64px);
}
.wk-card { display: block; text-decoration: none; color: inherit; text-align: center; }
.wk-card__shot {
  position: relative; overflow: hidden; aspect-ratio: 4/3;
  box-shadow: 0 14px 34px -20px rgba(27, 37, 54, 0.32);
  transition: transform 0.5s var(--fph-ease), box-shadow 0.5s var(--fph-ease);
}
.wk-card__shot img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; transition: transform 0.6s var(--fph-ease);
}
.wk-card__name {
  margin: 16px 0 0; font-family: "Noto Serif JP", serif; font-weight: 500;
  font-size: 15.5px; letter-spacing: 0.08em; color: var(--fph-ink); line-height: 1.5;
  transition: color 0.4s var(--fph-ease);
}
.wk-card__more {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 9px 22px; border: 1px solid var(--fph-navy); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.14em; color: var(--fph-navy);
  position: relative; overflow: hidden; transition: color 0.4s var(--fph-ease);
}
.wk-card__more::before {
  content: ""; position: absolute; inset: 0; background: var(--fph-navy);
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--fph-ease);
}
.wk-card__more-t, .wk-card__more i { position: relative; z-index: 1; }
.wk-card__more i {
  font-style: normal; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 15px; transition: transform 0.4s var(--fph-ease);
}
@media (hover: hover) {
  .wk-card:hover .wk-card__shot { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(27, 37, 54, 0.42); }
  .wk-card:hover .wk-card__shot img { transform: scale(1.04); }
  .wk-card:hover .wk-card__name { color: var(--fph-navy); }
  .wk-card:hover .wk-card__more { color: #fff; }
  .wk-card:hover .wk-card__more::before { transform: scaleX(1); transform-origin: left; }
  .wk-card:hover .wk-card__more i { transform: translateX(4px); }
}

/* Google Map 口コミリンク */
.wk-foot { text-align: center; margin-top: clamp(44px, 6vw, 72px); }
.wk-map {
  display: inline-block; border-bottom: 1px solid var(--fph-navy); padding-bottom: 2px;
  font-size: 14.5px; color: var(--fph-navy); text-decoration: none; transition: opacity 0.3s;
}
@media (hover: hover) { .wk-map:hover { opacity: 0.6; } }

/* 汎用CTAボタン列(下層ページ共通) */
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(32px, 4.5vw, 48px); }

@media screen and (max-width: 900px) {
  .wk-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 28px); }
}
@media screen and (max-width: 600px) {
  .wk-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   2026リニューアル:FAQ(よくあるご質問)ページ
   ・本体はトップの .fp-faq アコーディオンを流用(JS: hero-front.js)
   ・.qa-group__* はカテゴリ見出しのみ新設(金色ナンバリング + 明朝)
============================================================ */
.qa-group { margin-top: clamp(44px, 6vw, 72px); }
.qa-group__ttl {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 clamp(6px, 1.4vw, 12px);
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.5; color: var(--fph-navy);
}
.qa-group__num {
  flex-shrink: 0; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 30px); line-height: 1; color: var(--fph-gold);
}

/* ============================================================
   2026リニューアル:制作事例 詳細ページ(workcustom.php / 案A Editorial)
   ・メタ情報(Client/Website)+ 大判ヒーロー
   ・各ページを金インデックス付きギャラリーで見せる
   ・コメント/口コミ本文を明朝見出し+金アクセントで整形
============================================================ */
.wkp { background: #fff; padding-bottom: clamp(64px, 8vw, 100px); }

/* --- メタ情報 + ヒーロー --- */
.wkp-hero { padding-top: clamp(40px, 6vw, 68px); }
/* メタ情報:アイコン付きメタバー(丸い線アイコン + 金ラベル + ネイビーの値) */
.wkp-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3.5vw, 50px);
  margin-bottom: clamp(30px, 4.5vw, 52px);
}
.wkp-meta__cell { display: flex; align-items: center; gap: 15px; }
.wkp-meta__ic {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fph-line); border-radius: 50%;
  color: var(--fph-gold);
  transition: border-color 0.4s var(--fph-ease), box-shadow 0.4s var(--fph-ease);
}
.wkp-meta__ic svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.wkp-meta__k {
  margin: 0 0 4px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fph-gold);
}
.wkp-meta__v {
  margin: 0; font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.4; letter-spacing: 0.02em;
  color: var(--fph-navy); word-break: break-word;
}
.wkp-meta__v a { color: var(--fph-navy); text-decoration: none; }
.wkp-meta__v a::after {
  content: "\00a0\2197"; display: inline-block; color: var(--fph-gold); font-size: 0.78em;
  transition: transform 0.35s var(--fph-ease);
}
@media (hover: hover) {
  .wkp-meta__cell:hover .wkp-meta__ic { border-color: var(--fph-gold); box-shadow: 0 8px 20px -14px rgba(177, 144, 90, 0.7); }
  .wkp-meta__v a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .wkp-meta__v a:hover::after { transform: translate(3px, -3px); }
}

.wkp-hero__shots { position: relative; max-width: 940px; margin: 0 auto; }
.wkp-hero__pc {
  border-radius: 4px; overflow: hidden;
}
.wkp-hero__pc img { display: block; width: 100%; }
.wkp-hero__sp {
  position: absolute; right: 2%; bottom: -6%;
  width: 24%; max-width: 220px;
  filter: drop-shadow(0 30px 40px rgba(27, 37, 54, 0.35));
}

/* --- セクション見出し(左寄せ + 金の下線) --- */
.wkp-head { margin: clamp(60px, 8vw, 104px) 0 clamp(28px, 3.5vw, 40px); }
.wkp-head__en {
  display: block; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(13px, 1.4vw, 16px); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fph-gold);
}
.wkp-head__ttl {
  position: relative; margin-top: 12px; padding-bottom: 16px;
  font-size: clamp(20px, 2.8vw, 28px); line-height: 1.5; letter-spacing: 0.04em;
  color: var(--fph-navy);
}
.wkp-head__ttl::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px; background: var(--fph-gold);
}

/* --- 各ページギャラリー --- */
.wkp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
.wkp-shot__frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--fph-line); background: #fff; padding: 8px;
  aspect-ratio: 3 / 4;
  box-shadow: 0 18px 34px -26px rgba(27, 37, 54, 0.4);
  transition: box-shadow 0.5s var(--fph-ease), transform 0.5s var(--fph-ease);
}
.wkp-shot__frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  /* transition はホバー機のみ(下の@media)。タッチ機はJSでスクロール連動パンするため付けない */
}
.wkp-cap { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.wkp-cap__n {
  flex-shrink: 0; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 15px; letter-spacing: 0.06em; color: var(--fph-gold);
}
.wkp-cap__t { font-family: "Noto Serif JP", serif; font-size: 14px; color: var(--fph-ink); }
@media (hover: hover) {
  .wkp-shot__frame img { transition: object-position 0.9s var(--fph-ease); }
  .wkp-shot:hover .wkp-shot__frame { transform: translateY(-4px); box-shadow: 0 26px 46px -22px rgba(27, 37, 54, 0.55); }
  .wkp-shot:hover .wkp-shot__frame img { object-position: 50% 100%; }
}

/* --- 本文(紹介文 / 口コミ) --- */
.wkp-article { max-width: 760px; margin: 0 auto; text-align: justify; }
.wkp-article p { margin: 0 0 1.6em; line-height: 2; color: var(--fph-ink-soft); }
.wkp-story .wkp-article > p:first-of-type { font-size: clamp(16px, 1.9vw, 19px); line-height: 2.1; color: var(--fph-ink); }
.wkp-article h2 {
  margin: 2.4em 0 1em; padding-left: 20px;
  border-left: 4px solid var(--fph-gold);
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.6; letter-spacing: 0.03em;
  color: var(--fph-navy);
}
.wkp-article h3 {
  margin: 2em 0 0.8em;
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(17px, 2vw, 20px); color: var(--fph-navy);
}
.wkp-article ul { list-style: none; margin: 0 0 1.8em; padding: 0; }
.wkp-article ul li { position: relative; margin-bottom: 0.7em; padding-left: 22px; line-height: 1.9; color: var(--fph-ink-soft); }
.wkp-article ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 7px; height: 7px; background: var(--fph-gold); transform: rotate(45deg);
}
.wkp-article ol { margin: 0 0 1.8em; padding-left: 1.4em; }
.wkp-article ol li { margin-bottom: 0.6em; line-height: 1.9; color: var(--fph-ink-soft); }
.wkp-article li strong { color: var(--fph-navy); }
.wkp-article strong { color: var(--fph-ink); }
.wkp-article a { color: var(--fph-navy); text-decoration: underline; text-underline-offset: 3px; }
.wkp-article img {
  display: block; max-width: 100%; height: auto; margin: 2em auto;
  border: 1px solid var(--fph-line);
  box-shadow: 0 22px 44px -30px rgba(27, 37, 54, 0.4);
}

/* --- クライアント情報 --- */
.wkp-client-sec { margin-top: clamp(56px, 7vw, 84px); }
.wkp-client {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 3px solid var(--fph-gold); background: #faf9f6;
  padding: clamp(30px, 4vw, 44px);
}
.wkp-client__en {
  display: block; font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fph-gold);
}
.wkp-client__name { margin-top: 8px; font-size: clamp(19px, 2.4vw, 24px); color: var(--fph-navy); }
.wkp-client__url { margin-top: 6px; font-size: 14px; }
.wkp-client__url a { color: var(--fph-ink-soft); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.wkp-visit {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 15px 30px; border: 1px solid var(--fph-navy); background: #fff;
  font-size: 14px; letter-spacing: 0.06em; text-decoration: none; color: var(--fph-navy);
  transition: background 0.4s var(--fph-ease), color 0.4s var(--fph-ease);
}
.wkp-visit i { font-style: normal; }
@media (hover: hover) { .wkp-visit:hover { background: var(--fph-navy); color: #fff; } }

@media screen and (max-width: 820px) {
  .wkp-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  /* スマホでも「iMacの右下にスマホが重なる」1つの構図を維持(縦積みにしない) */
  .wkp-hero__sp { width: 36%; right: 2%; bottom: -4%; filter: none; }
  .wkp-client { flex-direction: column; align-items: flex-start; }
  .wkp-visit { width: 100%; justify-content: center; }
}
@media screen and (max-width: 560px) {
  .wkp-gallery { gap: 18px; }
  .wkp-cap__t { font-size: 12px; }
}

/* ============================================================
   2026リニューアル:事務所について(page-about.php)
   ・.ab-* で名前空間を分離(他ページと非干渉)
   ・スクロールアニメは about-anime.js(GSAP)。
     JS/GSAP不在・prefers-reduced-motion では常に全て可視。
   ============================================================ */
:root {
  --ab-navy-deep: #1b2c4d;
  --ab-gold-soft: #c9ad80;
  --ab-paper: #faf9f6;
  --ab-en: "Cormorant Garamond", "Times New Roman", serif;
  --ab-min: "Noto Serif JP", "Yu Mincho", serif;
  --ab-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ab-wrap: 1160px;
}
.ab-wrap { width: min(var(--ab-wrap), 90vw); margin-inline: auto; }

/* --- 共通見出し --- */
.ab-head { margin-bottom: clamp(30px, 4vw, 52px); }
.ab-head__en { margin: 0 0 8px; font-family: var(--ab-en); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fph-gold); }
.ab-head__ttl { margin: 0; font-family: var(--ab-min); font-weight: 600; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.4; color: var(--fph-navy); letter-spacing: 0.02em; }
.ab-head__ttl::after { content: ""; display: block; width: 48px; height: 2px; background: var(--fph-gold); margin-top: 20px; }

/* --- Message --- */
.ab-msg { padding: clamp(64px, 9vw, 120px) 0; }
.ab-msg__eyebrow { margin: 0 0 14px; font-family: var(--ab-en); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fph-gold); }
.ab-msg__catch { margin: 0 0 clamp(40px, 6vw, 72px); font-family: var(--ab-min); font-weight: 600; font-size: clamp(28px, 5vw, 52px); line-height: 1.5; letter-spacing: 0.03em; color: var(--fph-navy); text-wrap: balance; }
.ab-msg__catch b { color: var(--fph-gold); font-weight: 600; }
.ab-msg__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ab-msg__aside { position: sticky; top: 100px; }
.ab-msg__portrait { position: relative; border-radius: 6px; overflow: hidden; background: var(--ab-paper); }
.ab-msg__portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.ab-msg__aside::before { content: ""; position: absolute; left: -14px; top: -14px; width: 58%; height: 58%; border-top: 2px solid var(--fph-gold); border-left: 2px solid var(--fph-gold); z-index: 2; pointer-events: none; }
.ab-msg__role { margin: 18px 2px 0; font-family: var(--ab-en); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fph-gold); }
.ab-msg__nm { margin: 4px 2px 0; font-family: var(--ab-min); font-size: 22px; color: var(--fph-navy); }
.ab-msg__nm span { font-size: 13px; font-family: var(--ab-sans); color: var(--fph-ink-soft); margin-left: 10px; letter-spacing: 0.06em; }
.ab-msg__body p { margin: 0 0 1.7em; font-size: clamp(15px, 1.05vw, 16px); line-height: 2.15; color: var(--fph-ink-soft); }
.ab-msg__body .lead { font-family: var(--ab-min); font-size: clamp(17px, 1.6vw, 21px); line-height: 2; color: var(--fph-navy); margin-bottom: 1.9em; }
.ab-msg__body .quote { font-family: var(--ab-min); color: var(--fph-navy); }

/* --- Profile(時系列タイムライン) --- */
.ab-profile { background: var(--ab-paper); padding: clamp(64px, 9vw, 110px) 0; }
.ab-profile__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.ab-id__role { margin: 0; font-family: var(--ab-en); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fph-gold); }
.ab-id__nm { margin: 8px 0 16px; font-family: var(--ab-min); font-size: clamp(28px, 3.4vw, 40px); color: var(--fph-navy); letter-spacing: 0.1em; }
.ab-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ab-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--fph-line); }
.ab-timeline li { position: relative; padding: 0 0 26px 40px; }
.ab-timeline li:last-child { padding-bottom: 0; }
.ab-timeline li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--fph-gold); }
.ab-timeline li.is-now::before { background: var(--fph-gold); box-shadow: 0 0 0 4px rgba(177, 144, 90, 0.18); }
.ab-timeline .txt { font-family: var(--ab-min); font-size: clamp(15px, 1.5vw, 18px); color: var(--fph-navy); }

/* --- Office(事務所概要) --- */
.ab-office { padding: clamp(64px, 9vw, 110px) 0; }
.ab-info { margin-inline: auto; max-width: 820px; }
.ab-info__row { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--fph-line); align-items: center; }
.ab-info__row:first-child { border-top: 1px solid var(--fph-line); }
.ab-info__k { margin: 0; font-family: var(--ab-en); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fph-gold); }
.ab-info__k small { display: block; font-family: var(--ab-min); font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--fph-navy); margin-top: 3px; }
.ab-info__v { margin: 0; font-size: 15px; color: var(--fph-ink); }
.ab-info__v ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ab-info__v ul li { position: relative; padding-left: 16px; margin-bottom: 5px; color: var(--fph-ink-soft); font-size: 14.5px; }
.ab-info__v ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; background: var(--fph-gold); transform: rotate(45deg); }
.ab-info__v .note { font-size: 12.5px; color: var(--fph-ink-soft); }
.ab-info__v a { color: var(--fph-navy); text-decoration: underline; text-underline-offset: 3px; }

/* --- About Me(価値観・人となり:スクロール連動クロスフェード) --- */
.ab-story { background: var(--ab-navy-deep); color: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); }
.ab-story__head { width: min(var(--ab-wrap), 90vw); margin: 0 auto clamp(30px, 4vw, 50px); }
.ab-story__head .en { display: block; font-family: var(--ab-en); font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ab-gold-soft); margin-bottom: 12px; }
.ab-story__head .jp { margin: 0; font-family: var(--ab-min); font-weight: 600; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.5; color: #fff; letter-spacing: 0.03em; text-wrap: balance; }
.ab-story__inner { width: min(1220px, 92vw); margin: 0 auto; display: flex; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.ab-story__visual { width: 46%; position: sticky; top: 100px; align-self: flex-start; }
.ab-story__frame { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100vh - 150px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.ab-story__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s var(--fph-ease); will-change: opacity; }
.ab-story__img.is-active { opacity: 1; }
.ab-story__img--1 { background-image: url("../img/career1.png"); }
.ab-story__img--2 { background-image: url("../img/career2.png"); }
.ab-story__img--3 { background-image: url("../img/career3.png"); }
.ab-story__img--4 { background-image: url("../img/career4.png"); }
.ab-story__img--5 { background-image: url("../img/career5.png"); }
.ab-story__img--6 { background-image: url("../img/career6.png"); }
.ab-story__img--7 { background-image: url("../img/career7.png"); }
.ab-story__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 30, 52, 0.82) 0%, rgba(20, 30, 52, 0.1) 42%, transparent 70%); pointer-events: none; }
.ab-story__cap { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ab-story__cap-en { font-family: var(--ab-en); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ab-gold-soft); }
.ab-story__cap-jp { font-family: var(--ab-min); font-size: clamp(19px, 2vw, 24px); color: #fff; margin-top: 2px; }
.ab-story__dots { display: flex; gap: 8px; }
.ab-story__dots button { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.4s var(--fph-ease); }
.ab-story__dots button.is-now { background: var(--fph-gold); border-color: var(--fph-gold); transform: scale(1.25); }
.ab-story__panels { width: 54%; }
.ab-story__panel { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; }
.ab-story__panel .cat { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ab-story__panel .cat i { width: 34px; height: 1px; background: var(--fph-gold); display: inline-block; }
.ab-story__panel .cat .en { font-family: var(--ab-en); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ab-gold-soft); }
.ab-story__panel h3 { margin: 0 0 22px; font-family: var(--ab-min); font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); color: #fff; letter-spacing: 0.04em; }
.ab-story__panel p { margin: 0; font-size: clamp(14.5px, 1.05vw, 16px); line-height: 2.15; color: rgba(255, 255, 255, 0.8); }
.ab-story__panel .grp { margin-bottom: 1.3em; }
.ab-story__panel .grp b { display: block; font-family: var(--ab-en); color: var(--ab-gold-soft); letter-spacing: 0.14em; font-size: 13px; margin-bottom: 4px; }
.ab-story__panel a { color: var(--ab-gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* --- 事務所について レスポンシブ --- */
@media screen and (max-width: 900px) {
  .ab-msg__grid { grid-template-columns: 1fr; }
  .ab-msg__aside { position: static; max-width: 320px; }
  .ab-profile__grid { grid-template-columns: 1fr; }
  .ab-story__inner { flex-direction: column; gap: 0; }
  /* 画像を上部に固定し、テキストは画像の"下(後ろ)"を通って隠れる。
     GSAPがテキストにtransformを当てると描画順で上に来るため、画像側のz-indexを上げて重なりを制御。 */
  .ab-story__visual { width: 100%; position: sticky; top: 70px; z-index: 5; background: var(--ab-navy-deep); padding-bottom: 10px; }
  .ab-story__frame { aspect-ratio: 16 / 10; max-height: 44vh; box-shadow: 0 26px 30px -20px rgba(0, 0, 0, 0.75); }
  .ab-story__panels { width: 100%; position: relative; z-index: 1; }
  .ab-story__panel { min-height: auto; padding: 44px 0; }
  .ab-story__panel:first-child { padding-top: 30px; }
  .ab-story__dots { display: none; }
}
@media screen and (max-width: 520px) {
  .ab-info__row { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-story__img { transition: none; }
}

/* ------------------------------------------------------------
   Voice(お客さまの声 / 2026新設)
   front-page.php の $uj_voices が空のあいだはセクションごと出力されない。
   現在は許諾済みの3件を掲載中なので有効。

   ・.fp-voice__cat(業種バッジ)は匿名掲載のため現在どのカードにも出ていない。
     カード先頭が .fp-voice__tx になるが、::before の引用符(top:6px / 54px)の
     インクは card 上端から約12〜23px に収まり、本文1行目(最小 padding 26px 時で
     約34px から)とは重ならない。card の padding-block-start をこれ以上詰めると
     引用符が本文に被るので注意。
------------------------------------------------------------ */
.fp-voice {
  background: #faf9f6;
  border-block-start: 1px solid var(--fph-line);
  padding-block: clamp(60px, 9vw, 110px);
}
.fp-voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  list-style: none;
  margin: clamp(32px, 4.4vw, 48px) 0 0;
  padding: 0;
}
.fp-voice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fph-line);
  border-radius: 16px;
  padding: clamp(26px, 2.8vw, 38px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
}
/* 引用符。装飾なのでスクリーンリーダーからは隠す(::before なので元から読まれない) */
.fp-voice__card::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: clamp(16px, 1.8vw, 22px);
  font-family: "Noto Serif JP", serif;
  font-size: 54px;
  line-height: 1;
  color: var(--fph-gold);
  opacity: 0.28;
}
.fp-voice__cat {
  position: relative;
  margin: 0 0 14px;
  align-self: flex-start;
  background: var(--fph-navy);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 4px 14px;
  border-radius: 999px;
}
.fp-voice__tx {
  position: relative;
  margin: 0;
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--fph-ink);
}
.fp-voice__ba {
  margin: 18px 0 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--fph-line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: baseline;
}
.fp-voice__ba dt {
  font-family: var(--ab-en, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fph-gold);
  white-space: nowrap;
}
.fp-voice__ba dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--fph-ink-soft);
}
.fp-voice__name {
  margin: auto 0 0;
  padding-block-start: 18px;
  font-size: 13px;
  text-align: right;
  color: var(--fph-ink-soft);
}
/* プラグイン(Trustindex等)の出力を入れる枠。中身の構造には触れず、幅と余白だけ与える */
.fp-voice__gr {
  margin-block-start: clamp(32px, 4.4vw, 48px);
}
.fp-voice__foot {
  margin-block-start: clamp(28px, 3.6vw, 40px);
  text-align: center;
}
.fp-voice__map {
  display: inline-block;
  border-block-end: 1px solid var(--fph-navy);
  padding-block-end: 2px;
  font-size: 14.5px;
  color: var(--fph-navy) !important;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fp-voice__map:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 991px) {
  .fp-voice__list {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------
   CTA の連絡経路(電話・メール)
   front-page.php の $uj_contact に値を入れると表示される。
------------------------------------------------------------ */
.fp-cta__ch {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px clamp(24px, 4vw, 48px);
  list-style: none;
  margin: clamp(26px, 3.4vw, 36px) 0 0;
  padding: 0;
}
.fp-cta__ch-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fp-cta__ch-k {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--fph-gold);
}
.fp-cta__ch-v {
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.04em;
  color: var(--fph-navy) !important;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .fp-cta__ch-v:hover {
    border-block-end-color: var(--fph-navy);
  }
}
.fp-cta__ch-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--fph-ink-soft);
}

/* ------------------------------------------------------------
   受付状況(帯) .fp-status
   トップのマーキー直後・対応業種バンドの直前に入る。
   値は functions.php の uj_get_status()。CTA直前の .fp-accept と共用。

   ・下の枠線は付けない。直後の .fp-ind が border-block を持っており、
     付けると境界が2本線になる。
   ・背景をクリーム(#faf9f6)にしているのは、前後の .fp-marquee / .fp-ind が
     どちらも白で、白のまま置くと帯として認識されないため。
   ・点滅アニメーションは付けないこと。動かすと広告に見えて、
     事実を伝える帯としての信用が落ちる。
------------------------------------------------------------ */
.fp-status {
  background: #faf9f6;
  border-block-start: 1px solid var(--fph-line);
}
.fp-status__inr {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  width: min(1000px, 92vw);
  margin-inline: auto;
  padding-block: 13px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fph-ink);
}
.fp-status__now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}
.fp-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f8f5f;
  box-shadow: 0 0 0 3px rgba(63, 143, 95, 0.16);
}
/* 受付を止めているときはゴールドに落とす。赤にしないのは、
   「休止中」は異常ではなく通常運転の一状態であり、警告色を使うと過剰なため */
.fp-status--closed .fp-status__dot {
  background: var(--fph-gold);
  box-shadow: 0 0 0 3px rgba(177, 144, 90, 0.18);
}
.fp-status__sep {
  width: 1px;
  height: 14px;
  background: var(--fph-line);
}
.fp-status__sub {
  color: var(--fph-ink-soft);
  font-size: 12.5px;
}
.fp-status__sub b {
  font-weight: 500;
  color: var(--fph-ink);
}
@media screen and (max-width: 600px) {
  /* スマホでは横1行に収まらないので2行に分ける。区切り線は行が分かれた時点で
     意味を失うため消す(残すと1行目の右端に線だけが浮く) */
  .fp-status__inr { gap: 4px 14px; padding-block: 11px; font-size: 12px; }
  .fp-status__sep { display: none; }
  .fp-status__sub { font-size: 11.5px; width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   受付状況(カード) .fp-accept
   CTA直前。上部の帯と同じ内容を、判断の直前でもう一度出す。
   帯より情報を増やして(上限件数とその理由)、判断材料として成立させている。

   ・背景は白のまま。直後の .fp-cta がクリーム地なので、
     ここもクリームにすると2つのブロックが1枚に見えて境目が消える。
------------------------------------------------------------ */
.fp-accept {
  padding-block: clamp(48px, 6vw, 72px);
}
.fp-accept__box {
  max-width: 860px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--fph-line);
  border-radius: 16px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 44px);
}
.fp-accept__hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-block-end: 18px;
  margin-block-end: 22px;
  border-block-end: 1px solid var(--fph-line);
}
.fp-accept__ttl {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.fp-accept__asof {
  font-size: 12px;
  color: var(--fph-ink-soft);
  letter-spacing: 0.04em;
}
/* 3項目の等分割。件数を出さない設定のときは2項目になるが、
   1fr の繰り返しなので幅は自動で埋まる */
.fp-accept__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-accept__item {
  padding-inline: 20px;
  border-inline-start: 1px solid var(--fph-line);
}
.fp-accept__item:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.fp-accept__k {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--fph-gold);
  margin-block-end: 9px;
}
.fp-accept__v {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}
.fp-accept__v small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--fph-ink-soft);
  margin-inline-start: 4px;
}
.fp-accept__note {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--fph-ink-soft);
}
@media screen and (max-width: 700px) {
  /* 縦積みに切り替え。区切りは縦罫から横罫に変える */
  .fp-accept__list { grid-template-columns: 1fr; }
  .fp-accept__item {
    padding: 16px 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--fph-line);
  }
  .fp-accept__item:first-child { padding-block-start: 0; border-block-start: 0; }
}

/* ------------------------------------------------------------
   CTAの不安打ち消し .fp-cta__ease
   front-page.php と footer.php の両方のCTAに入る。
   ボタンの直下に置くこと。ボタンより上に置くと、読ませてから押させる形になり、
   決めている人の導線を1つ余計に踏ませることになる。
------------------------------------------------------------ */
.fp-cta__ease {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.fp-cta__ease li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--fph-line);
  border-radius: 999px;
  padding: 7px 16px 7px 13px;
  font-size: 12.5px;
  color: var(--fph-ink-soft);
  background: #fff;
}
.fp-cta__ease svg {
  flex: none;
  color: var(--fph-gold);
}
@media screen and (max-width: 600px) {
  .fp-cta__ease { gap: 8px; }
  .fp-cta__ease li { font-size: 11.5px; padding: 6px 13px 6px 10px; }
}