@charset "UTF-8";
/* 自動でまとめたファイル（inc/css-bundle.php）。直すときは元のファイルを直す。ここを直しても次に作り直されて消える */

/* ---- /assets/styles/css/fiz-tokens.css ---- */
/* 写し。直すのは fiz-design-system/src/tokens.css（このファイルは直接編集しない） */

/* ============================================================
   FIZ デザインシステムの決まりの元。
   値を変えるときはここだけを直し、写すスクリプトで開発サイトに写す
   （fiz-design-system/決まりの値を開発サイトに写す.sh）。
   正は、開発サイト（fiz-dev.local）のサービス4ページで実際に使っている値
   （service-dads.css で DADS に合わせて直した後の値）。React 側（styles.css）
   にしか無かった変数名（--color-primary など）は同じ名前のまま残している。
   基準: /Users/nishidafiz/FIZ_AII_pj/出力のデザインの決まり.md（DADS）

   ---- 赤の使い方の決まり（2026-09-24 本人見直し。全ページ共通） ----
   1. 文字には赤を使わない：見出し・カードの見出し・説明文・本文・項目名など、読ませる文字は #212121 か #595959
   2. 小さな目印には赤（#C10000）を使う：アイコン、タグ・バッジ、見出しの上の英字ラベル、
      番号（課題・理由・流れの丸番号、FAQのQ）、矢印、沿革のマーカー、料金カードの英字ラベル、実績カードのタグなど。
      タグ・バッジは赤地に白字でよい（白字が4.5:1を満たすこと）
   3. 大きな面の赤は絞る：ヘッダーの帯・フッターの帯・ドロワー・ボタンだけ。
      ページの途中の赤い帯や色つきの背景は使わない
   4. 「いまどこにいるか」の赤（目次の現在地・ページ送りの現在ページ・お問い合わせのステップ）は残す
   5. 押して絞り込む・切り替えるボタン（実績一覧のタグの絞り込みなど）は目印ではなく操作の部品なので、赤にしない。
      枠と文字は #212121、選ばれているものは #212121 地に白字（2026-09-24 本人決定）

   ---- 表の決まり（2026-10-02 本人決定。記事の本文の表など、文章の中の表すべて） ----
   1. マスの中の文字は折り返す。折り返さないと表が本文の幅の2倍以上になり、横に長くスクロールしないと読めなかった
   2. 列の幅の下限は 7em。列が細くなりすぎて1〜2字ずつ折り返すのを防ぐ。列が多くて収まらない表だけ、横にスクロールさせる
   3. 文字はスマホ 14px（--font-size-min）・768px 以上 16px。スマホで本文と同じ 16px だと表が大きすぎた
   4. マスの余白はスマホ 上下8px・左右12px、768px 以上 上下12px・左右16px（本人が画面で確かめて決めた値。12px は8の倍数の例外）
   5. 罫線は --color-border-strong（白との差3:1以上）。見出しの行の背景は --color-bg-neutral、文字は太字 #212121
   6. iPhone の Safari が横に広い所の文字を勝手に大きくしないよう、html に text-size-adjust: 100% を付ける（共通の CSS）
   ============================================================ */

:root {
  /* ---- 色 ---- */
  --color-primary: #C10000;    /* ブランドレッド。文字には使わない。目印（アイコン・タグ・番号・矢印など）・ボタン・帯（ヘッダー/フッター/ドロワー）だけに使う */
  --color-text: #212121;       /* 本文・見出し・ダーク背景の文字色 */
  --color-white: #FFFFFF;      /* 基本背景・反転テキスト */
  --color-gray: #A1A1A1;       /* 文字には使わない。罫線・飾り専用（白背景で4.5:1に届かないため） */
  --color-gray-light: #EFEFEF; /* 薄背景・区切りセクション */
  --color-border: #CCCCCC;     /* 罫線・ボーダー */
  --color-border-strong: #949494; /* 白との差3:1以上の罫線（表の罫線など。2026-10-02） */
  --color-dark-sub: #3A3838;   /* ボタンのグラデーション・図の濃い面などの補助色 */
  --color-muted: #595959;      /* 白背景で4.5:1以上のコントラストを満たす補助文字色（パンくず・FAQの答えなど） */
  --color-bg-soft: #FAFAFA;    /* 「選ばれる理由」などの薄い背景 */
  --color-bg-pink: #F5E7E7;    /* （2026-09-24以降は未使用。薄いピンクの背景は --color-bg-neutral に置き換えた） */
  --color-bg-neutral: #F2F2F2; /* DADSの薄い背景。提供価値のセクション・CTA帯など、赤をやめた面の背景に使う */

  /* ---- フォント ---- */
  --font-en: "Josefin Sans", sans-serif; /* 英語見出し・eyebrow・数字 */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* 日本語全般 */

  /* ---- 文字の大きさの段階（DADS: 本文16px以上・補助文字も最小14px） ---- */
  --font-size-min: 14px;   /* 本文・補助文字の最小。これより小さくしない（ラベル・パンくず・チップ・タグなど） */
  /* 例外（2026-10-06 本人決定）：実績詳細の題名の下のタグ（.wk-tags li）だけ 12px。読ませる文字ではなく目印のため */
  --font-size-body: 16px;  /* 読ませる文（段落・カードの説明・FAQの答え・流れの説明など）の基準 */

  /* ---- 太さ（DADS: 400と700の2段階だけ。500・600・900は使わない） ---- */
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* ---- 行間 ---- */
  --line-height-body: 1.8;    /* 本文（.svc の基準値） */
  --line-height-heading: 1.4; /* 見出し（h2など） */

  /* ---- 余白の段階（8の倍数） ---- */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- 角丸 ---- */
  --radius-pill: 100vh;  /* ボタン・タグ（FIZ の標準はピル型） */
  --radius-card: 10px;   /* カード・画像・実績カード */
  --radius-sm: 5px;      /* 小さめの箱（バッジなど） */

  /* ---- 最大幅 ---- */
  --max-width-content: 1200px; /* .svc-wrap（コンテンツ全体の中央寄せ幅） */

  /* ---- 動きの速さ ---- */
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
  --duration: 0.3s;

  /* ---- 余白の使い方（2026-09-24 本人決定） ----
     ページの中の余白は、置き場所の役割ごとに下の変数を使う。値はスマホを既定にし、
     PC（1024px以上）は @media (min-width: 1024px) の :root で上書きする。
     ヘッダーは position: fixed で浮いている（common.scss:221、top 30px）。
     高さは SP 60px・PC 70px のため、下端は画面上端から SP 90px・PC 100px になる。
     「ヘッダーの下端から」の余白は、見た目の距離であって padding-top の値そのものではない。
     ヘッダーを避ける上余白は calc(ヘッダーの下端 + 下の変数) で組む
     （例: padding-top: calc(var(--header-bottom-sp) + var(--space-after-header))）。 */
  --header-bottom-sp: 90px;  /* 固定ヘッダーの下端（画面上端から。SP） */
  --header-bottom-pc: 100px; /* 固定ヘッダーの下端（画面上端から。PC） */

  --space-after-header: 24px;               /* ヘッダー下端 → パンくず上端 */
  --space-after-header-no-breadcrumb: 48px; /* パンくずが無いページ: ヘッダー下端 → 題名上端 */
  --space-breadcrumb-to-title: 24px;        /* パンくず下端 → ページの題名のまとまり上端 */
  --space-band-to-breadcrumb: 16px;         /* 写真の帯に題名が乗るページ: 帯下端 → パンくず上端（2026-09-29）。パンくず下端 → 最初の中身は --space-title-to-content */
  --space-title-to-content: 40px;           /* 題名のまとまり下端 → 最初の中身上端 */
  --space-section-y: var(--space-40);       /* セクションの上下の余白（それぞれ） */
  --space-section-heading: var(--space-16); /* セクションの見出し → その中身 */

  /* ---- 表（2026-10-02 本人決定。決まりは上の「表の決まり」） ---- */
  --table-font-size: var(--font-size-min); /* スマホ 14px */
  --table-line-height: 1.6;
  --table-cell-padding: var(--space-8) 12px; /* スマホ 上下8px・左右12px */
  --table-cell-min-width: 7em;
}

@media (min-width: 768px) {
  :root {
    --table-font-size: var(--font-size-body); /* 16px */
    --table-line-height: 1.7;
    --table-cell-padding: 12px var(--space-16); /* 上下12px・左右16px */
  }
}

/* ---- ブレークポイント ----
   CSS変数はメディアクエリの条件には使えないため、数値をそのまま書く決まりにする。
   タブレット: @media (min-width: 768px)
   PC        : @media (min-width: 1024px)
*/

@media (min-width: 1024px) {
  :root {
    --space-after-header: 32px;
    --space-after-header-no-breadcrumb: 72px;
    --space-breadcrumb-to-title: 40px;
    --space-band-to-breadcrumb: 24px;
    --space-title-to-content: 64px;
    --space-section-y: var(--space-64);
    --space-section-heading: var(--space-24);
  }
}

/* ---- /assets/styles/css/common.css ---- */
/*===============================
reset
================================*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: start; /* 2026-09-24 DADS対応: justify→start。両端揃えを前提にした個別の左揃え上書き（*_hero__title など）は残置（無害） */
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 100%;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

button {
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
}

nav ul {
  list-style: none;
}

ol,
ul {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table, td, th {
  border-collapse: collapse;
  border-spacing: 0;
}

textarea {
  resize: vertical;
}

/*===============================
base
================================*/
html {
  /* 2026-10-02 iPhone の Safari が、画面より幅の広い所（横にスクロールする表など）の文字を自動で大きくし、表ごとに文字の大きさが変わっていた。自動で大きくする働きを止める */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: var(--font-weight-normal, 400); /* 2026-09-24 DADS対応: 600→400（太字は個別に700を指定） */
  letter-spacing: 0; /* 2026-09-24 DADS対応: 1px→0（見出しの英字ラベルなど装飾文字は個別に広げる） */
  color: #212121;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow: auto;
  height: 100%;
}

body {
  position: relative;
  z-index: 100;
  font-size: var(--font-size-body, 16px); /* 2026-09-24 DADS対応: clamp(13〜15px)→16px */
}
body .grecaptcha-badge {
  display: none;
}

.page-template-page-contact .grecaptcha-badge {
  display: block;
}

.wrap-s, .wrap, .wrap-l {
  width: calc(100% - 60px);
  margin-inline: auto;
}

.wrap-s {
  max-width: 1000px;
}

.wrap {
  max-width: 1200px;
}

.wrap-l {
  max-width: 1500px;
}

.palmtop {
  display: block !important;
}
@media screen and (min-width: 1024px) {
  .palmtop {
    display: none !important;
  }
}

.laptop {
  display: none !important;
}
@media screen and (min-width: 1024px) {
  .laptop {
    display: block !important;
  }
}

.sclNone {
  overflow: hidden;
}

/*===============================
layout
================================*/
/*
header
================================*/
.site-header {
  position: fixed;
  z-index: 100;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(100% - 60px);
  padding: 15px 20px;
  background: #c10000;
  border-radius: 100vh;
  /* 2026-07-22 site-header follow update: animate header hide/show. */
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.site-header.is-hidden {
  -webkit-transform: translate(-50%, calc(-100% - 40px));
          transform: translate(-50%, calc(-100% - 40px));
}
@media screen and (min-width: 1024px) {
  .site-header {
    padding: 15px 30px;
  }
}
.site-header__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-header__logo a img {
  height: 20px;
}
@media screen and (min-width: 1024px) {
  .site-header__logo a img {
    height: 25px;
  }
}
.site-header__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.site-header__buttons .button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100vh;
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .button {
    width: 35px;
    height: 35px;
  }
}
.site-header__buttons .button a, .site-header__buttons .button button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
.site-header__buttons .button a img, .site-header__buttons .button button img {
  height: 20px;
  width: auto;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .button a img, .site-header__buttons .button button img {
    height: 25px;
  }
}
.site-header__buttons .contact-button {
  background: #ccc;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .contact-button:hover {
    background: #212121;
  }
}
.site-header__buttons .menu-button {
  margin-left: 10px;
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .menu-button {
    margin-left: 15px;
  }
  .site-header__buttons .menu-button:hover {
    background: #212121;
  }
}
.site-header__menuList {
  display: none;
}
@media screen and (min-width: 1024px) {
  .site-header__menuList {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 1024px) {
  .site-header__menuList-item:not(:first-child) {
    margin-left: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .site-header__menuList-item:not(:first-child) {
    margin-left: 40px;
  }
}
.site-header__menuList-item a {
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
}

/*
main
================================*/
/*
footer
================================*/
.site-footer__contact {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("https://fizjapan.com/wp-content/themes/fiz-theme/assets/styles/css/../../images/common/footer-contact-bg.webp");
}
.site-footer__contact a {
  position: relative;
  display: block;
}
.site-footer__contact a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
@media screen and (min-width: 1024px) {
  .site-footer__contact a:before {
    background: rgb(255, 255, 255);
  }
}
@media screen and (min-width: 1024px) {
  .site-footer__contact a:hover {
    color: #212121;
  }
  .site-footer__contact a:hover:before {
    background: rgba(255, 255, 255, 0);
  }
  .site-footer__contact a:hover .site-footer__contact__title {
    color: #212121;
  }
  .site-footer__contact a:hover .site-footer__contact__slogan-title span, .site-footer__contact a:hover .site-footer__contact__slogan-desc span {
    color: #212121;
  }
  .site-footer__contact a:hover .site-footer__contact__arrow {
    border: 2px solid #212121;
  }
  .site-footer__contact a:hover .site-footer__contact__arrow svg path {
    fill: #212121;
  }
}
.site-footer__contact__column {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-footer__contact__column__ele:first-child {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: clamp(3.125rem, 2.367rem + 3.24vw, 6.25rem);
}
.site-footer__contact__column__ele:nth-child(2) {
  width: 50px;
  height: 50px;
}
@media screen and (min-width: 768px) {
  .site-footer__contact__column__ele:nth-child(2) {
    width: 75px;
    height: 75px;
  }
}
.site-footer__contact__title {
  display: inline-block;
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
  color: #c10000;
  padding: 8px 8px 1px;
  background: #fff;
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.site-footer__contact__slogan {
  margin-top: 25px;
}
@media screen and (min-width: 1024px) {
  .site-footer__contact__slogan {
    margin-top: 30px;
  }
}
.site-footer__contact__slogan-title span, .site-footer__contact__slogan-desc span {
  display: inline-block;
  color: #212121; /* 2026-09-24 本人決定: 「お問い合わせはこちら」と説明文は文字なので#212121。英字のCONTACTと矢印は赤のまま */
  padding: 8px;
  background: #fff;
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.site-footer__contact__slogan-title {
  font-weight: 700;
  font-size: clamp(1rem, 0.848rem + 0.65vw, 1.625rem);
}
.site-footer__contact__slogan-desc {
  margin-top: 15px;
  line-height: 1.4em;
}
@media screen and (min-width: 1024px) {
  .site-footer__contact__slogan-desc {
    margin-top: 20px;
  }
}
.site-footer__contact__arrow {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 100vh;
  border: 2px solid #c10000;
  background: #fff;
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
@media screen and (min-width: 768px) {
  .site-footer__contact__arrow {
    width: 75px;
    height: 75px;
  }
}
.site-footer__contact__arrow svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10px;
}
@media screen and (min-width: 768px) {
  .site-footer__contact__arrow svg {
    width: 15px;
  }
}
.site-footer__contact__arrow svg path {
  fill: #c10000;
  -webkit-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.site-footer__menu {
  background: #c10000;
  color: #fff;
}
.site-footer__menu__wrap {
  width: calc(100% - 60px);
  margin-inline: auto;
}
.site-footer__menu__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-footer__menu__logo-img {
  width: 80px;
}
.site-footer__menu__logo-text {
  font-family: "Josefin Sans", sans-serif;
  font-weight: var(--font-weight-bold, 700); /* 2026-09-24 DADS対応: 500→700 */
  margin-left: 17px;
  padding-left: 15px;
  border-left: 2px solid #fff;
}
.site-footer__menu__list {
  margin-top: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
}
@media screen and (min-width: 768px) {
  .site-footer__menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.site-footer__menu__list-item:not(:first-child) {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .site-footer__menu__list-item:not(:first-child) {
    margin-top: 0;
    margin-left: 30px;
  }
}
.site-footer__menu__list-item a {
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
}
.site-footer__menu__address {
  margin-top: clamp(1.563rem, 1.183rem + 1.62vw, 3.125rem);
}
@media screen and (min-width: 768px) {
  .site-footer__menu__address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.site-footer__menu__address .address__block:nth-child(2) {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .site-footer__menu__address .address__block:nth-child(2) {
    margin-top: 0;
    margin-left: 40px;
  }
}
.site-footer__menu__address .address__block-text {
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  .site-footer__menu__address .address__block-text {
    font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  }
}
.site-footer__menu__address .address__block-text a {
  color: #fff;
}
.site-footer__menu__policy {
  margin-top: 16px;
  font-size: var(--font-size-min, 14px);
}
.site-footer__menu__policy a {
  color: #fff;
  text-decoration: underline;
}
.site-footer__menu__tel {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .site-footer__menu__tel {
    margin-top: 30px;
  }
}
.site-footer__menu .other {
  margin-top: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.site-footer__menu .other .cp {
  font-family: "Josefin Sans", sans-serif;
}
.site-footer__menu .other .kk-mark img {
  width: 150px;
}
@media screen and (min-width: 768px) {
  .site-footer__menu .other .kk-mark img {
    width: 250px;
  }
}

/*
drawer
================================*/
.drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  background: #c10000;
  width: 90%;
  max-width: 600px;
  height: 100svh;
  height: 100vh;
  overflow-y: auto;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  /* 2026-09-24 本人決定: 閉じている間はページを横に広げないようにする。
     position:fixed + transform だけだと、オフスクリーンにしていても document の scrollWidth を広げてしまう
     ブラウザの挙動があったため、visibility も併用して閉じている間はレイアウトの計算から外す。
     閉じるときは transform のアニメーション(0.3s)が終わってから visibility を hidden にする（見た目のアニメーションは変えない）。
     body への overflow-x:hidden では position:sticky が効かなくなるため使わない。 */
  visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0.3s;
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0.3s;
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0.3s;
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0.3s, -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.drawer.is-open {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0s;
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0s;
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0s;
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), visibility 0s linear 0s, -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.drawer__content {
  position: relative;
}
.drawer__close {
  position: absolute;
  top: 56px;
  right: 40px;
}
@media screen and (min-width: 768px) {
  .drawer__close {
    right: 50px;
  }
}
.drawer__close-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100vh;
  border: 1px solid #fff;
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .drawer__close-btn {
    width: 35px;
    height: 35px;
  }
}
.drawer__close-btn button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
.drawer__close-btn button img {
  height: 20px;
  width: auto;
}
@media screen and (min-width: 1024px) {
  .drawer__close-btn button img {
    height: 25px;
  }
}
.drawer__nav {
  padding: 116px 40px 40px;
}
@media screen and (min-width: 768px) {
  .drawer__nav {
    padding: 116px 50px 50px;
  }
}
@media screen and (min-width: 1024px) {
  .drawer__nav {
    padding: 116px 50px 50px;
  }
}
.drawer__logo {
  position: absolute;
  top: 56px;
  left: 40px;
}
@media screen and (min-width: 768px) {
  .drawer__logo {
    left: 50px;
  }
}
.drawer__logo img {
  height: 20px;
}
@media screen and (min-width: 1024px) {
  .drawer__logo img {
    height: 25px;
  }
}
.drawer__menu__list-item:not(:first-child) {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .drawer__menu__list-item:not(:first-child) {
    margin-top: 40px;
  }
}
.drawer__menu__list-item a {
  color: #fff;
  display: inline-block;
}
.drawer__menu__list-item-en {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(1.25rem, 0.947rem + 1.29vw, 2.5rem);
  letter-spacing: 0;
}
.drawer__menu__list-item-ja {
  display: block;
  margin-top: clamp(0.313rem, 0.237rem + 0.32vw, 0.625rem);
  font-size: clamp(14px, 0.704rem + 0.19vw, 0.938rem); /* 2026-09-24 DADS対応: 最小12px→14px */
}
.drawer__menu__buttons {
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .drawer__menu__buttons {
    margin-top: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .drawer__menu__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 1024px) {
  .drawer__menu__buttons .button {
    width: calc(50% - 12.5px);
    margin-right: 25px;
  }
}
.drawer__menu__buttons .button:nth-child(2) {
  margin-top: 20px;
}
@media screen and (min-width: 1024px) {
  .drawer__menu__buttons .button:nth-child(2) {
    margin-top: 0;
    margin-right: 0;
  }
}
.drawer__menu__buttons .button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
  width: 100%;
  background: #fff;
  border-radius: 100vh;
  border: 2px solid #c10000;
}
.drawer__menu__buttons .button__icon {
  width: 20px;
  margin-right: 15px;
}
.drawer__menu__buttons .button__text {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  width: auto;
}

.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/*===============================
module
================================*/
/*
title-style
================================*/
.title-style1 {
  margin-bottom: clamp(1.563rem, 1.183rem + 1.62vw, 3.125rem);
}
.title-style1-en {
  color: #212121;
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(1.563rem, 1.183rem + 1.62vw, 3.125rem);
  letter-spacing: 0;
  line-height: 1.1em;
}
.title-style1-ja {
  display: block;
  margin-top: clamp(0.313rem, 0.237rem + 0.32vw, 0.625rem);
  font-size: clamp(0.875rem, 0.704rem + 0.19vw, 0.938rem); /* 2026-09-24 DADS対応: 最小12px→14px */
}

/* page-title1 の見た目は assets/styles/css/parts/page-title1.css に移した（2026-09-24） */

/*
btn-style
================================*/
.btn-style1 {
  margin-top: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
}
.btn-style1 a {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-top: 1px solid #efefef;
  border-radius: 100vh;
  padding: 15px 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1024px) {
  .btn-style1 a {
    padding: 15px 30px;
  }
}
.btn-style1-text {
  margin-top: 1px;
  font-family: "Josefin Sans", sans-serif;
  margin-right: 30px;
}
.btn-style1-arrow {
  position: relative;
  width: 30px;
  height: 30px;
  background: #c10000;
  border-radius: 100vh;
}
.btn-style1-arrow svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 6px;
}
.btn-style1-arrow svg path {
  fill: #fff;
}

/*
page-style
================================*/
.page-style1 .site-main__block {
  /* 2026-09-24 余白の決まり: セクションの上下の余白。現状このクラスは会社概要ページだけが使うため、
     ここを直しても他ページには効かない（他ページは .pad-tb を使っている） */
  padding: var(--space-section-y) 0;
}
.page-style1 .site-main__block:nth-child(even) {
  background: #c10000;
}
.page-style1 .site-main__block:nth-child(even) .title-style1-en, .page-style1 .site-main__block:nth-child(even) .title-style1-ja {
  color: #fff;
}

/*
space
================================*/
.pad-tb {
  padding: clamp(3.125rem, 2.367rem + 3.24vw, 6.25rem) 0;
}

.pad-t {
  padding-top: clamp(3.125rem, 2.367rem + 3.24vw, 6.25rem);
}

.pad-b {
  padding-bottom: clamp(3.125rem, 2.367rem + 3.24vw, 6.25rem);
}

/*
align
================================*/
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/*
font
================================*/
.gothic {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.en {
  font-family: "Josefin Sans", sans-serif;
}

/*
font-weight
================================*/
/*
color
================================*/
/*
paragraph
================================*/
.ps p {
  line-height: 1.7em; /* 2026-09-24 DADS対応: 1.8→1.7（本文行間は1.5〜1.7） */
}
.ps p:not(:first-child) {
  margin-top: 15px;
}

/*
pagination
================================*/
.pagination {
  margin-top: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
}
.pagination .page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.pagination .page-numbers li:not(:first-child) {
  margin-left: 8px;
}
@media screen and (min-width: 1024px) {
  .pagination .page-numbers li:not(:first-child) {
    margin-left: 15px;
  }
}
.pagination .page-numbers li span, .pagination .page-numbers li a {
  display: block;
  padding: 10px 12px;
}
@media screen and (min-width: 1024px) {
  .pagination .page-numbers li span, .pagination .page-numbers li a {
    padding: 17px 20px;
  }
}
.pagination .page-numbers li a {
  border: 1px solid #fff;
  background: #fff;
}
.pagination .page-numbers li .current {
  color: #c10000;
  background: #fff;
  border: 1px solid #fff;
}

/* ---- /assets/styles/css/page-top.css ---- */
/* ====================================================
トップへ戻るボタン（2026-09-23 追加）
値は 2026-09-23 本人が見て決定。色が目立ちすぎる場合は白い丸・黒い矢印・灰色の線に替える。
==================================================== */
:root {
  /* 2026-09-23 決定 */
  --page-top-size: 48px;
  --page-top-gap-sp: 16px;
  --page-top-gap-pc: 24px;
  --page-top-bg: #212121;
  --page-top-fade: 0.2s;
}

.page-top {
  position: fixed;
  right: var(--page-top-gap-sp);
  bottom: var(--page-top-gap-sp);
  z-index: 90; /* ヘッダー・ドロワー（100）より下。メニューを開いたときはメニューの下に隠れる */
  width: var(--page-top-size);
  height: var(--page-top-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--page-top-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--page-top-fade) ease, visibility var(--page-top-fade) ease;
}

@media screen and (min-width: 768px) {
  .page-top {
    right: var(--page-top-gap-pc);
    bottom: var(--page-top-gap-pc);
  }
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

.page-top__icon {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: none;
  }
}

/* ---- /assets/styles/css/parts/phrase.css ---- */
/* ことばのまとまり（句）の途中では改行しない部品（全ページ共通。2026-10-07）
   HTML は inc/phrase.php の fiz_phrases_html() / fiz_title_phrases_html() が出す <span class="fiz-phrase">。
   改行は句と句のあいだでだけ起きる。1行に収まれば1行。句ひとつが幅より長いときは inline-block の中で折れる */
.fiz-phrase {
  display: inline-block;
}

/* inc/phrase.php の fiz_ph() が出す句（2026-10-21・サービスページ・サービス一覧・トップと FIZについての STORY FLOW・沿革・会社概要の事業内容・トップの NEWS の説明）。
   スマホの幅（767px 以下）でだけ句の途中で折らない。パソコンでは普通の文字（inline）に戻し、今までと同じ所で折れる（パソコンの見た目を変えないため）。
   パソコンでも句で折るなら、下の指定を消す（パソコンでも2行以上になる文の折れる位置が変わり、ページが少し伸びる所がある） */
@media screen and (min-width: 768px) {
  .fiz-phrase--sp {
    display: inline;
  }
}

/* ---- /assets/styles/css/parts/breadcrumb.css ---- */
/* ============================================================
   パンくずリスト（全ページ共通・2026-09-29）。組み方は template-parts/common/breadcrumb.php。
   それまでの3つ（svc-breadcrumb・wk-breadcrumb・column-breadcrumb）を1つにまとめた。
   見た目は、2026-09-24 に本人が「パンくずの見た目を統一」と決めたサービス・実績の詳細の形にそろえた
   （コラムだけ英字の書体・区切りの間隔・色が少し違っていた）。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。
   ============================================================ */
.fiz-breadcrumb {
  font-family: var(--font-jp);
  font-size: var(--font-size-min, 14px);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-muted, #595959);
  line-height: var(--line-height-body);
  text-align: left; /* 共通の CSS が全要素を両端揃えにしているのを戻す（それまでは text-align.css が svc-breadcrumb に付けていた） */
  letter-spacing: 0;
}

/* ヘッダーのすぐ下に置くとき：本番のヘッダーは画面の上に浮いているので、その下に出るぶんの余白を取る（余白の決まり） */
.fiz-breadcrumb--header {
  padding-top: calc(var(--header-bottom-sp) + var(--space-after-header));
}

/* 写真の帯の題名のすぐ下に置くとき（余白の決まり・2026-09-29）：帯下端 → パンくず上端は --space-band-to-breadcrumb、
   パンくず下端 → 最初の中身は --space-title-to-content（帯が題名の役なので、題名の下と同じ） */
.fiz-breadcrumb--band {
  padding-top: var(--space-band-to-breadcrumb);
}
.fiz-breadcrumb--band + .pad-tb {
  padding-top: var(--space-title-to-content); /* .pad-tb（50〜100px）の上の余白を決まりの値にする */
}
.fiz-breadcrumb--band + .column-archive {
  padding-top: var(--space-title-to-content); /* コラムの一覧・カテゴリ */
}
.fiz-breadcrumb--band + .page-style1 > .site-main__block:first-child {
  padding-top: var(--space-title-to-content); /* FIZについて・会社概要は最初の段の上の余白 */
}

.fiz-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fiz-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--color-border);
}

.fiz-breadcrumb a {
  color: var(--color-muted, #595959);
  text-decoration: none;
}

.fiz-breadcrumb a:hover {
  color: var(--color-text, #212121); /* 2026-09-24 本人決定：飾りの赤を減らす */
}

@media (min-width: 1024px) {
  .fiz-breadcrumb--header {
    padding-top: calc(var(--header-bottom-pc) + var(--space-after-header));
  }
}

/* ---- /assets/styles/css/parts/fade-in.css ---- */
/* スクロールで区画が「ふわっと」現れる動き（全ページ共通の部品。2026-10-06）
   使い方：現れてほしい区画に class="fiz-fade" を付けるだけ。画面に15%入ると、下から20px浮きながら0.6秒で現れる（1回出たらそのまま）。
   動かす JS は assets/js/fade-in.js（is-visible を付ける）。直すときはこの CSS と JS の2つだけを直す。
   隠すのは「JS が動いている」印（html.js-fade）があるときだけ。印は functions.php が <head> で付ける。
   JS が動かない・読み込みに失敗したときは印が付かない（付いても4秒で外れる）ので、中身は最初から見える。
   :where() で隠す条件の強さを 0 にして、従来の .svc-fade と同じ強さ（クラス1つ）に保っている（部品側の transform 等を上書きしないため） */
.fiz-fade {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
:where(html.js-fade) .fiz-fade {
  opacity: 0;
  transform: translateY(20px);
}
:where(html.js-fade) .fiz-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らす設定の人には動かさず、最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .fiz-fade {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---- /assets/styles/css/service-nav.css ---- */
/* ヘッダーの SERVICE 展開メニュー（PC はカーソルを載せると開く／スマホはハンバーガーの中に常時表示）。2026-09-21 開発サイトに組み込み */
.svc-nav-has-sub { position: relative; }
.svc-nav-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 16px; display: none; z-index: 200; }
.svc-nav-has-sub:hover .svc-nav-sub, .svc-nav-has-sub:focus-within .svc-nav-sub { display: block; }
.svc-nav-sub ul { list-style: none; margin: 0; padding: 10px 0; min-width: 280px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.svc-nav-sub li a { display: block; padding: 10px 24px; color: #111 !important; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.svc-nav-sub li a small { display: block; font-family: "Josefin Sans", sans-serif; font-size: var(--font-size-min, 14px); font-weight: 700; letter-spacing: .06em; color: #c10000; margin-bottom: 2px; } /* 2026-09-24: 11px→14px・600→700。赤は差し色として戻す（本人決定） */
.svc-nav-sub li a:hover, .svc-nav-sub li a:focus { background: #fff7f7; color: #c10000 !important; }
.svc-drawer-sub { list-style: none; margin: 14px 0 0; padding: 0 0 0 16px; border-left: 2px solid rgba(255,255,255,.35); }
/* スマホのタップ領域を広げるため a を display:block・上下12pxの余白にする。そのぶん li+li の間隔は詰めて、ドロワー全体の高さが増えすぎないようにする（2026-09-21 指摘17） */
.svc-drawer-sub li + li { margin-top: 0; }
.svc-drawer-sub a { display: block; padding: 12px 0; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: 14px; text-decoration: none; }

/* ---- /assets/styles/css/header-menu.css ---- */
/* ヘッダーの見た目替え（2026-09-21 本人指示）。
   1) PCメニューを「上に小さく英語・下に主役の日本語」の2段に
   2) お問い合わせボタンをメールのアイコンから「FIZに相談する」の文字ボタンに
   common.css は SCSS から作られるファイルなので直接は書き換えず、こちらに追記する形にする。
   common.css 側の指定より後に読み込むことで、詳細度をそろえたまま上書きする（!important は使わない） */

/* ---- 1) PCメニューの2段化 ---- */
/* 元の a はテキストがそのまま流れるだけだったので、上下2段に積む箱にする。
   1024px 未満（ハンバーガーのみの幅）ではメニュー自体が display:none なので影響しない */
.site-header__menuList > .site-header__menuList-item > a { /* 直下のリンクだけ。展開メニューの中のリンクに当てない（レビュー指摘 2026-09-21） */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hd-menu__en {
  /* 2026-09-24 DADS対応: 11px→14px（最小14px。装飾文字でも下限は守る） */
  font-family: "Josefin Sans", sans-serif;
  font-size: var(--font-size-min, 14px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.hd-menu__ja {
  /* 日本語が主役：太字(700)・白 */
  display: block;
  margin-top: 3px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; /* 同上。折り返すと2段×2行になって縦に間延びするので、横幅は文字なりに広げる */
}

/* 1024〜1279px は6項目＋ボタンが窮屈になりやすいので、項目間隔と文字サイズを少し詰める。
   表の言葉（プロジェクト実績など）はそのまま変えない（本人が「表のままでOK」と決めている） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .site-header__menuList-item:not(:first-child) {
    margin-left: 10px;
  }
  /* 2026-09-24 DADS対応: 文字を14px未満に縮めて詰める案はやめた（最小14pxを守るため）。
     この幅では文字を縮めず、メニュー全体をたたんでハンバーガーボタンだけにする（下の「メニューの折りたたみ」ブロック）。 */
  /* お問い合わせボタンの左右余白も詰めて、メニューとの間を確保する（1024〜1279px だけ。実測で「プロジェクト実績」を含む6項目がボタンと重なったための調整・2026-09-21） */
  .site-header__buttons .contact-button__link {
    padding: 0 14px;
  }
}

/* ---- メニューの折りたたみ（2026-09-24 DADS対応） ----
   ラベルを14px未満に縮めて詰め込むのをやめたため、1024〜1279px は6項目が入りきらない。
   この幅ではスマホと同じ「ハンバーガーボタンだけ」にし、1280px以上でフルの横並びメニューを出す。
   common.css 側の「1024px以上でメニューを表示・ハンバーガーは常時表示」を、この幅だけ上書きする。 */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .site-header__menuList {
    display: none;
  }
}
/* 2026-09-24 本人決定: 1280px以上ではフルメニューだけにし、ハンバーガーボタンは隠す
   （直す前は common.css 側にハンバーガーを隠す指定が無く、1024px以上でも両方出ていた不具合） */
@media screen and (min-width: 1280px) {
  .site-header__buttons .menu-button {
    display: none;
  }
}

/* SERVICE の展開メニュー（service-nav.css）は、2段になったメニューの下に出る。
   .svc-nav-sub は親要素 .svc-nav-has-sub の下端（top:100%）基準なので、2段化の影響は自動で追従する */

/* ---- 2) お問い合わせボタン：アイコンの丸ボタン → 文字の角丸ボタン ---- */
/* 汎用の .button（アイコンを中央に丸く置く仕組み）は使わず、専用の見た目をここで組み立てる */
.site-header__buttons .contact-button {
  width: auto;
  height: 40px;
  border-radius: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .contact-button {
    height: 40px;
  }
}
.site-header__buttons .contact-button__link {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .site-header__buttons .contact-button__link {
    transition: none;
  }
}
.contact-button__text {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: 13px→14px */
  line-height: 1;
  color: #c10000; /* 白地に赤（#C10000）はコントラスト比 4.5:1 以上（DADS基準） */
  white-space: nowrap;
}
/* PCはフル文言「FIZに相談する」、スマホ（ハンバーガーのみの幅＝1024px未満）は「相談する」に短縮。
   読み上げは a の aria-label「FIZに相談する」で1本化しているので、見た目の切り替えだけでよい */
.contact-button__text-short {
  display: inline;
}
.contact-button__text-full {
  display: none;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .contact-button__link {
    padding: 0 24px;
  }
  .contact-button__text {
    font-size: 14px;
  }
  .contact-button__text-short {
    display: none;
  }
  .contact-button__text-full {
    display: inline;
  }
  /* カーソルを載せたときの動きは、サービスページの赤い帯の上の白いボタンと同じにする（2026-09-21 本人指示。その白いボタンは 2026-09-24 に使う場所が無くなり削除。動きの値はこのファイルにある）。
     白地を抜いて、白い枠線と白い文字に反転する。以前の「赤で塗りつぶす」は、赤い帯の上でボタンが帯に溶けて消えて見えた */
  .site-header__buttons .contact-button {
    transition: background-color 0.3s cubic-bezier(0.4, 0.4, 0, 1), box-shadow 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  }
  .site-header__buttons .contact-button:hover,
  .site-header__buttons .contact-button:focus-within {
    background: transparent;
    box-shadow: inset 0 0 0 2px #fff;
  }
  .site-header__buttons .contact-button:hover .contact-button__text,
  .site-header__buttons .contact-button:focus-within .contact-button__text {
    color: #fff;
  }
  .site-header__buttons .contact-button .contact-button__text {
    transition: color 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header__buttons .contact-button,
    .site-header__buttons .contact-button .contact-button__text { transition: none; }
  }
}

/* ボタン（高さ40px）とハンバーガー（30〜35px）の縦の中心をそろえる。common.css は上ぞろえのままなので、ここで中央ぞろえにする（レビュー指摘 2026-09-21） */
.site-header__buttons { align-items: center; }
/* キーボードで来たときのフォーカスの枠を、ボタンの丸さに合わせる（四角くはみ出していた） */
.site-header__buttons .contact-button__link { border-radius: inherit; }
/* ハンバーガーのボタンを「相談する」ボタンと同じ高さ 40px にそろえる（2026-09-21 本人指示。スマホも PC も同じ）。
   元は スマホ 30px・PC 35px。中の三本線の絵は、丸に対する比率（元は 20/30・25/35 ≒ 0.7）を保って 28px にする。
   絵の置き方（丸の中央に絶対配置）は common.css のまま変えない。flex にすると、幅の決まっていない SVG が丸いっぱいに引き伸ばされた */
.site-header__buttons .menu-button.button { width: 40px; height: 40px; }
.site-header__buttons .menu-button.button button img { height: 28px; width: auto; }

/* ---- スマホ（1024px未満）は帯の高さを元の60pxに戻す ----
   理由：70pxは実機で見ると画面を取りすぎて邪魔だった（2026-09-21・本人が実機で確認）。
   上下の余白 12px ＋ ボタン 36px ＝ 60px。PCは70pxのまま */
@media screen and (max-width: 1023px) {
  .site-header { padding-top: 12px; padding-bottom: 12px; }
  .site-header__buttons .contact-button { height: 36px; }
  .site-header__buttons .contact-button__link { padding: 0 14px; }
  .site-header__buttons .menu-button.button { width: 36px; height: 36px; }
  .site-header__buttons .menu-button.button button img { height: 24px; }
}

/* ---- /assets/styles/css/contact-card.css ---- */
/* ====================================================
お問い合わせのカード（見た目を持つファイルは、このファイル1つだけ）
2026-10-20 追加。使う場所は2つ：
  1. コラム記事の本文に置くショートコード [お問い合わせ]（inc/contact-card.php。記事に「> [!contact] お問い合わせ」と書くと道具が変換する）
  2. 開発サイトのフッター（CONTACT のカード。資料ダウンロードのカードと2枚並ぶ）
HTML は template-parts/contact-card.php を共用する。クラス名が footer-cta__* のままなのは、資料ダウンロードのカード（開発サイトのフッター）も
同じクラスで同じ見た目を使うため。

2026-10-20 に、カード1枚の見た目（枠・余白・文字・赤いボタン・乗せたときの動き）を doc-download.css（資料ダウンロード用。開発サイトだけにある）から
このファイルへ移した。理由：資料ダウンロードを本番に出せない間に、お問い合わせのカードだけを先に本番に出すため。
doc-download.css に残したのは、フッターの帯・2枚の並び・資料のカードの白抜きボタンだけ。doc-download.css はこのファイルの後に読み込む。

色・文字・余白・角丸は fiz-tokens.css の値。赤は英字ラベルとボタンだけ（赤い帯・赤い背景は置かない）。
==================================================== */

/* ---- カード1枚 ---- */
.footer-cta__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.footer-cta__label {
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-primary); /* 英字ラベルは赤でよい */
}
.footer-cta__title {
  margin: var(--space-8) 0 0;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}
.footer-cta__desc {
  margin: var(--space-16) 0 var(--space-24);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text);
}
.footer-cta__button {
  margin-top: auto; /* 高さの違いを吸収して、ボタンをカードの下端にそろえる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 56px;
  padding: 0 var(--space-24);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transition: background-position .8s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.footer-cta__button--primary { color: var(--color-white); }
.footer-cta__arrow { width: 10px; height: 16px; flex: none; }

/* 赤いボタン：サイトの主ボタン（サービスページ .svc-btn--primary・2026-09-24 本人決定）と同じ「赤のグラデーションが左→右へ流れる＋影＋少し浮く」
   （2026-10-11 本人指摘「アニメーションが悪い」「FIZに相談するのボタンだけ動きがないのが違和感」）。指で触る端末では動かさない（押した後に色が残るため） */
.footer-cta__button--primary {
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
}

/* 乗せたときの動き（2026-10-11 本人決定）：カード全体が黒に反転。ボタンは赤のまま。
   理由＝動きが小さいとどのカードを選んでいるか分からない。マウスは :hover、キーボードは :focus-visible、指で触る端末は押している間（:active）だけ反転 */
@media (hover: hover) {
  .footer-cta__card:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
  .footer-cta__card:hover .footer-cta__title,
  .footer-cta__card:hover .footer-cta__desc,
  .footer-cta__card:hover .footer-cta__label { color: var(--color-white); }
  .footer-cta__card:hover .footer-cta__button--primary {
    background-position: 0 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    transform: translateY(-2px);
  }
}
.footer-cta__label, .footer-cta__title, .footer-cta__desc { transition: color .3s var(--ease); }
.footer-cta__card:focus-visible,
.footer-cta__card:active { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
.footer-cta__card:focus-visible .footer-cta__title,
.footer-cta__card:focus-visible .footer-cta__desc,
.footer-cta__card:focus-visible .footer-cta__label,
.footer-cta__card:active .footer-cta__title,
.footer-cta__card:active .footer-cta__desc,
.footer-cta__card:active .footer-cta__label { color: var(--color-white); }
@media (prefers-reduced-motion: reduce) {
  .footer-cta__card, .footer-cta__button { transition: none; }
}
@media screen and (min-width: 768px) {
  .footer-cta__card { padding: var(--space-40); }
}

/* ---- コラム記事の本文の中だけ要る直し ----
  1. カードの上下の余白（本文の段落・見出しとの間）
  2. 本文の決まり（column.css の .column-editor-output）を、カードの中では受けないようにする
     - リンクの下線・太字（.column-editor-output a）
     - 行間 1.7（.column-editor-output）。英字ラベルだけ行間の指定が無く、フッターでは 1 になるため、そろえる */
.fiz-contact-card {
  margin: var(--space-40, 40px) 0;
}

.column-editor-output .fiz-contact-card a.footer-cta__card {
  text-decoration: none;
  font-weight: var(--font-weight-normal, 400);
}

.fiz-contact-card .footer-cta__label {
  line-height: 1;
}

/* ---- /assets/styles/css/doc-download.css ---- */
/* 資料ダウンロード（会社概要＆実績資料）の見た目（2026-10-11・開発サイトだけ）。全ページ共通で読み込む。
   要件書: fiz-サイト運用/08-資料ダウンロードの要件書.md の 2-1
   色・余白・角丸の値は fiz-tokens.css の変数を使う（直書きしない）。common.css は SCSS から作られるので直接は変えず、こちらに足す。
   赤の使い方（fiz-tokens.css 冒頭の決まり）：文字に赤は使わない。赤はボタン・英字ラベル・アイコンの丸だけ。
   載せる場所：ヘッダーのボタン／スマホのメニューのボタン／フッターの CONTACT の右半分（資料ダウンロードのページでは出さない）／共通ブロック（template-parts/doc-download-block.php。meta-ads と sns-marketing のサービスページ・実績・実績のカテゴリの一覧）／コラムの記事のまとめの資料のカード（2026-10-21）／コラムの記事の左の列（目次の下）の導線（2026-10-21） */

.doc-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

/* ---- ヘッダーのボタン（PC・1024px以上だけ。スマホはメニューの中） ---- */
.site-header__buttons .doc-button {
  display: none;
}
@media screen and (min-width: 1024px) {
  .site-header__buttons .doc-button {
    display: flex;
    align-items: center;
    height: 40px;
    margin-right: 10px;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 2px var(--color-white); /* 白い線で囲む */
    transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .site-header__buttons .doc-button__link {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 100%;
    padding: 0 18px 0 16px;
    border-radius: inherit;
    color: var(--color-white);
    font-family: var(--font-jp);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-min);
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s var(--ease);
  }
  .site-header__buttons .doc-button__text {
    display: block;
    white-space: nowrap;
  }
  /* カーソルを載せると白地に赤の文字（「FIZに相談する」の動きと反対向き。2つが並ぶので、白地のボタンと線のボタンで役割が分かれる） */
  .site-header__buttons .doc-button:hover,
  .site-header__buttons .doc-button:focus-within {
    background: var(--color-white);
  }
  .site-header__buttons .doc-button:hover .doc-button__link,
  .site-header__buttons .doc-button:focus-within .doc-button__link {
    color: var(--color-primary);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  /* ハンバーガーだけの幅（1024〜1279px）。3つ（資料・相談・メニュー）が1行に収まるよう左右を詰める */
  .site-header__buttons .doc-button { margin-right: 8px; }
  .site-header__buttons .doc-button__link { padding: 0 14px 0 12px; gap: 6px; }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  /* フルメニューが出る 1280〜1439px では、資料のボタンが増えたぶん、メニューと右のボタンが重なる（1280px で約56px）。
     メニューの項目の間隔を 40px → 28px に詰め、足りない幅のぶんだけ左に寄せる（1364px 以上は寄せない）。メニューの文字の大きさは変えない */
  .site-header__menuList-item:not(:first-child) {
    margin-left: 28px;
  }
  .site-header__menuList {
    transform: translate(calc(-50% - max(0px, (1364px - 100vw) / 2)), -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__buttons .doc-button,
  .site-header__buttons .doc-button__link { transition: none; }
}

/* ---- スマホのメニュー（ハンバーガーを開いた中）のボタン：赤い地に白い線 ---- */
.drawer__menu__buttons .button-doc a {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.drawer__menu__buttons .button-doc .button__icon {
  display: flex;
  align-items: center;
}
.drawer__menu__buttons .button-doc .doc-icon {
  width: 20px;
  height: 20px;
}
/* 文字の太さは隣の「お問い合わせ」（本番からあるボタン。普通の太さ）にそろえる（2026-10-21。以前は太字で、2つの太さが違った） */

/* ---- ページ下の帯（フッターの CONTACT／DOCUMENT）：白地のセクションに、同じ大きさのカードを2枚（スマホは縦） ----
   2026-10-20：カード1枚の見た目（枠・余白・文字・赤いボタン・乗せたときの動き）は contact-card.css に移した
   （お問い合わせのカードを先に本番に出すため、資料DLの CSS から切り離した。カードの見た目を持つファイルは contact-card.css の1つだけ）。
   ここに残すのは、帯・2枚の並び・資料DLのカード（白抜きのボタン・ダウンロードのアイコン）だけに要るもの。
   このファイルは contact-card.css の後に読み込む（functions.php で依存に指定）。 */
.footer-cta {
  background: var(--color-white);
  padding: var(--space-40) 0;
}
.footer-cta__inner {
  width: calc(100% - 60px);
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
.footer-cta__button--outline { background: var(--color-white); color: var(--color-primary); }
.footer-cta__button .doc-icon { width: 24px; height: 24px; flex: none; }
/* 押したときの動き（2026-10-11 本人指摘「アニメーションが悪い」）：サイトの主ボタン（サービスページ .svc-btn--primary・2026-09-24 本人決定）と同じ
   「赤のグラデーションが左→右へ流れる＋影＋少し浮く」。資料のページのボタン（.doc-block__btn・.fdd-submit）にも同じ背景を使う。一覧のカードのボタン（.dl-card__btn）は白地の線のボタン（page/download.css。2026-10-21 本人決定）。
   フッターの赤いボタン（.footer-cta__button--primary）の分は contact-card.css にある。白いボタンは浮くだけ。指で触る端末では動かさない（押した後に色が残るため） */
.doc-block__btn,
.fdd-submit {
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
}
@media (hover: hover) {
  .doc-block__btn:hover,
  .fdd-submit:hover {
    background-position: 0 0;
    color: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
    transform: translateY(-2px);
  }
}
/* 資料のカード（2026-10-11 本人決定）：乗せるとカード全体が黒に反転するのは contact-card.css と同じ。
   白いボタンは、黒に反転したとき背景に紛れないよう赤く塗る（赤のままのボタンは contact-card.css 側）。
   マウスは :hover、キーボードは :focus-visible、指で触る端末は押している間（:active）だけ反転 */
@media (hover: hover) {
  /* 資料の札は赤く塗ったうえで、赤いボタンと同じく浮く（2026-10-11） */
  .footer-cta__card:hover .footer-cta__button--outline {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    transform: translateY(-2px);
  }
}
.footer-cta__card:focus-visible .footer-cta__button--outline,
.footer-cta__card:active .footer-cta__button--outline { background: var(--color-primary); color: var(--color-white); }
@media screen and (min-width: 768px) {
  .footer-cta { padding: var(--space-64) 0; }
  .footer-cta__inner { grid-template-columns: 1fr 1fr; }
  /* お問い合わせのカード1枚を横いっぱいに出す形。資料DLのスイッチを切っているとき（2026-10-20）と、資料ダウンロードのページ（2026-10-21。inc/footer.php）で使う */
  .footer-cta__inner--single { grid-template-columns: 1fr; }
}

/* ---- コラム記事のまとめ：お問い合わせのカードの横に資料のカード（2026-10-21 本人決定） ----
   HTML は inc/contact-card.php（ショートコード [お問い合わせ] の本文の最後の1つ）が、お問い合わせのカード（左）と資料のカード（右。template-parts/doc-card.php）を .fiz-contact-card--with-doc に入れて出す。
   ページ下の CONTACT（.footer-cta__inner）と同じ並び方：768px 以上は横に2枚・同じ幅、スマホは縦（お問い合わせが上）。
   カード1枚の見た目は contact-card.css（ページ下と共通）。ここは並べ方だけ。上下の余白は .fiz-contact-card（contact-card.css）のまま。
   記事の本文の幅は、目次が左に出る 1024〜1279px で最も狭く（1024px でカード1枚が約 308px）、そのままの 40px だと内側が約 228px になり、「資料をダウンロード」のボタン（約 224px）がぎりぎりで、
   ブラウザの違いで2行に折れるおそれがある。そのため 768px 以上 1279px 以下ではカードの内側の余白を 24px に詰める（実測：768px で348px・900px で414px・1024px で308px・1100px で346px・1280px 以上で420px）。
   1280px 以上はページ下のカードと同じ 40px */
.fiz-contact-card--with-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}
@media screen and (min-width: 768px) {
  .fiz-contact-card--with-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .fiz-contact-card--with-doc .footer-cta__card { padding: var(--space-24); }
}

/* ---- コラム記事の左の列（目次の下）の資料の導線（2026-10-21 本人決定） ----
   HTML は template-parts/column/toc-doc.php が、資料のカードの部品（template-parts/doc-card.php）に modifier=aside で出す（.footer-cta__card--aside）。
   カード1枚の見た目（枠・角丸・英字ラベル・白抜きのボタン・乗せたときの黒い反転）は contact-card.css とこのファイルの上のものをそのまま使い、ここは左の列（幅 280px）に収める分だけ。
   中身（上から）：表紙（カードの幅いっぱい・16:9。上端にそろえる）→ 資料名 → 線のボタン「資料をダウンロード」。説明の文は入れない。
   英字ラベル DOCUMENT は出さない（2026-10-21 本人決定。理由：高さを取りすぎていた。表紙とボタンで資料だと分かる。部品は同じなので HTML には残り、ここで隠す）。
   出す・出さない（パソコン 1024px 以上だけ）と追従は page/column.css の .column-side と .column-side__doc が決める。ここには書かない。
   値の理由：
     - 内側の余白 16px（8の倍数）：列の幅 280px の内側を 246px 取り、ボタンの中に「アイコン＋資料をダウンロード」（約 176px）が1行で収まる幅を残すため。ページ下のカードの 24〜40px は広すぎる
     - 資料名 16px・行の高さ 1.5（2026-10-21 本人指摘「タイトルが大きすぎる・高さを取りすぎ」で 20px から下げた。本文の最小 16px。表紙に資料名が大きく出ているので、ここは添える大きさでよい）
     - ボタン：列の幅いっぱい・高さ 40px・左右 16px・折り返さない（white-space: nowrap）。パソコンだけで出すのでマウスで押せる高さで足り、画面が低いときに目次の見える行を減らさないため（2026-10-21 に 48px から下げた） */
.footer-cta__card.footer-cta__card--aside {
  width: 100%;
  padding: var(--space-16);
  overflow: hidden; /* 表紙の上の角を、カードの角丸で切る */
}
.footer-cta__card--aside .footer-cta__cover {
  display: block;
  align-self: stretch;
  margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) var(--space-16); /* カードの内側の余白を打ち消して、上・左右の端にそろえる */
}
.footer-cta__card--aside .footer-cta__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.footer-cta__card--aside .footer-cta__label {
  display: none; /* 2026-10-21 本人決定（上のコメント） */
}
.footer-cta__card--aside .footer-cta__title {
  margin-top: 0;
  font-size: var(--font-size-body);
  line-height: 1.5;
}
.footer-cta__card--aside .footer-cta__button {
  align-self: stretch;
  margin-top: var(--space-16);
  min-height: 40px;
  padding: 0 var(--space-16);
  white-space: nowrap; /* 「資料をダウンロード」を折り返さない */
}

/* ---- 共通ブロック（サービスページ・実績の詳細・実績のカテゴリの一覧。2026-10-21 に、その資料の中身を出す形に） ----
   背景は薄いグレー（--color-bg-neutral）。赤はボタンと英字ラベルだけ（ページ途中の赤い帯は使わない決まり） */
.doc-block {
  width: calc(100% - 60px);
  max-width: var(--max-width-content);
  margin: var(--space-section-y) auto;
  font-family: var(--font-jp);
  color: var(--color-text);
}
.wrap .doc-block,
.wk-wrap .doc-block {
  width: 100%;
}
.doc-block__in {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  background: var(--color-bg-neutral);
  border-radius: var(--radius-card);
}
.doc-block__cover {
  flex: none;
}
.doc-block__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--color-border);
}
.doc-block__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.doc-block__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-min);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-primary); /* 英字ラベルは赤でよい */
}
.doc-block__title {
  margin: var(--space-8) 0 0;
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  line-height: var(--line-height-heading);
  color: var(--color-text);
}
.doc-block__desc {
  margin: var(--space-16) 0 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text);
}
.doc-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  /* 背景は上の「押したときの動き」の規則で指定（赤のグラデーション） */
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
@media screen and (min-width: 768px) {
  .doc-block__in {
    flex-direction: row;
    align-items: center;
    gap: var(--space-48);
    padding: var(--space-48);
  }
  .doc-block__cover {
    width: min(40%, 400px);
  }
  .doc-block__title {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .doc-block__btn { transition: none; }
}

/* ---- 資料のブロックに資料が2つ以上のとき（実績の詳細だけ。2026-10-21 本人決定） ----
   ブロックは1つのまま（薄いグレーの面 .doc-block__in）。その中に資料のカード（template-parts/doc-card.php・modifier=block）を並べる。
   パソコン（2つなら 768px 以上で2列、3つなら 1024px 以上で3列）は横に、それより狭い幅とスマホは縦。並びは資料の一覧の順。資料が1つのブロックの見た目は変えない（上の .doc-block の規則のまま）。
   カード1枚の見た目（白い面・枠・角丸・DOCUMENT・資料名・線のボタン・乗せたときの黒い反転）は contact-card.css とこのファイルの上のものをそのまま使い、ここは並べ方と、
   表紙を上端いっぱいに出す分だけ（コラムの左の列の .footer-cta__card--aside と同じ作り）。
   値の理由：面の内側の余白 24px（スマホ）・40px（パソコン）、カードのあいだ 24px、カードの内側 24px（8の倍数）。3列のとき1200px の面でカード1枚が約 340px で、
   ボタンの中に「アイコン＋資料をダウンロード」（約 176px）が1行で収まる */
.doc-block--multi .doc-block__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-24);
  padding: var(--space-24);
}
@media screen and (min-width: 768px) {
  .doc-block--multi .doc-block__in { padding: var(--space-40); }
  .doc-block--cols-2 .doc-block__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 1024px) {
  .doc-block--cols-3 .doc-block__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3列は 1024px 以上だけ。768〜1023px で3列にすると、カード1枚が約 190px になり、資料名が「インフルエンサ／ー」のように語の途中で折れる。その幅では縦に並べる */
}
.footer-cta__card.footer-cta__card--block {
  width: 100%;
  padding: var(--space-24);
  overflow: hidden; /* 表紙の上の角を、カードの角丸で切る */
}
.footer-cta__card--block .footer-cta__cover {
  display: block;
  align-self: stretch;
  margin: calc(-1 * var(--space-24)) calc(-1 * var(--space-24)) var(--space-24); /* カードの内側の余白を打ち消して、上・左右の端にそろえる */
}
.footer-cta__card--block .footer-cta__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.footer-cta__card--block .footer-cta__label {
  line-height: 1;
}
.footer-cta__card--block .footer-cta__title {
  font-size: 20px;
}
.footer-cta__card--block .footer-cta__button {
  align-self: stretch;
  white-space: nowrap; /* 「資料をダウンロード」を折り返さない */
}

/* ---- /assets/styles/css/page/service-common.css ---- */
/* ============================================================
   サービスページ（一覧・SNS・meta・インフルエンサー・クリエイティブ）の土台（2026-09-24 部品ごとの整理）
   ここにあるのは、どの部品にも属さない土台だけ：ページ全体の余白・見出し・ボタン・スクロール連動フェードインなど。
   パンくず・ヒーロー・アンカーナビ・課題カード・選ばれる理由・CTA帯・提供価値・流れ・料金・関連実績・FAQ の
   部品ごとの見た目は assets/styles/css/service-parts/ に分けた（形は template-parts/service/ の同名 php）。
   色・文字サイズ・太さ・余白・角丸などの決まりの値は fiz-tokens.css（src/tokens.css の写し）を使う。
   ============================================================ */

/* ---- ページ基礎（svc- プレフィックスで既存CSSと衝突回避） ---- */
.svc {
  /* font-weight は 2026-09-24 に外した: common.css の html が 400 になったので重複だった */
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 15px;
  line-height: var(--line-height-body);
}

.svc-wrap {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 20px;
}

/* セクション上下余白: Figma（PC-meta要素一覧）は各セクション余白60px基準 */
.svc-section {
  padding: var(--space-40) 0;
  scroll-margin-top: 100px; /* 浮いた本番ヘッダー（下端 約85px）に見出しが隠れないよう、ジャンプの着地をずらす */
}

.svc a:focus-visible,
.svc button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- 見出しセット（eyebrow → H2 →（必要なら）リード文） ---- */
.svc-eyebrow {
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（見出し上の英字ラベル） */
  margin: 0 0 8px;
}

.svc-h2 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin: 0 0 16px;
}

.svc-lead {
  font-weight: var(--font-weight-bold);
  margin: 0 0 24px;
  font-size: var(--font-size-body);
}

/* ---- 文中リンク（選ばれる理由・よくある質問の文の後ろ。2026-09-27 追加）
   赤は文字に使わない決まり（tokens.css）なので、色は本文のまま・下線で示す ---- */
.svc-textlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-textlink:hover {
  text-decoration: none;
}

.svc-br-sp {
  display: inline; 
}

/* ---- ボタン ---- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 40px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-min);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.svc-btn--primary {
  /* Figma の指定：横向きグラデーション #3a3838 → #7d1c1c（50%）→ #c10000、角丸 999、余白 14px 40px、文字 白 20px 900（2026-09-13 本人指摘で修正） */
  /* カーソルオンで「グラデーションを流す」ため、背景を2倍の幅（黒→赤→黒）にして左半分だけ見せる。
     見た目は元の 黒→赤 と同じ。見比べ（ボタンのホバー案.html）で本人が案2を選択（2026-09-13） */
  /* 2026-09-24 本人指示：流れる向きを左→右に（先に進む印象）。背景を 赤→黒→赤 にして右半分（黒→赤）を見せ、カーソルオンで左端へ動かす */
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%); /* 2026-09-24 本人指摘：明るい所が2本あり縞に見えたため、山を1つにしてなだらかに */ /* 2026-09-24 本人決定：黒→赤は重く不穏に見えるため、赤→明るい赤に。黒い帯の上でも形が分かる */
  background-size: 200% 100%;
  background-position: 100% 0;
  /* 2026-09-24 本人指示：影を付けて押せるボタンだと分かるようにする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
  transition: background-position .8s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  border: 0; /* 透明の枠線の下にグラデーションが回り込み、左端に赤いふちが見えていたので枠線をなくした（2026-09-13 本人指摘） */
  color: var(--color-white);
  padding: var(--space-16) var(--space-40); /* 枠線 1px ぶんを余白に足して、大きさは同じに保つ */
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  min-height: 0;
  line-height: 1.25;
}

.svc-btn--primary:hover {
  /* 背景の位置を右端へ動かし、黒→赤の境目が右へ流れる。載せている間は赤が左に来る並びになる。
     案1「反転（白地に赤文字）」は試作したが、本人が案2を選んだので捨てた（2026-09-13） */
  background-position: 0 0;
  color: var(--color-white);
  /* 2026-09-24 本人指示：グラデーションをゆっくり流す（.5s→.8s）。カーソルオンで少し浮かせて影を広げる */
  box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
  transform: translateY(-2px);
  transition: background-position .8s var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.svc-btn--primary:active {
  /* 押した瞬間は沈める */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
  transform: translateY(0);
}
/* 2026-09-24 本人指示：動きを強く見せる。カーソルオンで白い光の帯が左から右へ横切る（止まっているときは見えない） */
.svc-btn--primary {
  position: relative;
  overflow: hidden;
}
.svc-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.svc-btn--primary:hover::after {
  left: 125%;
  transition: left 1.2s var(--ease); /* 2026-09-24 本人指摘：光が速すぎるので .8s→1.2s */
}

/* スクロールで現れる動き（旧 .svc-fade）は全ページ共通の部品に移した（parts/fade-in.css・2026-10-06） */

.svc-section, .svc-cta {
  scroll-margin-top: 166px; 
}


@media (prefers-reduced-motion: reduce) {
  .svc-btn--primary:hover::after { transition: none; left: -75%; }}



@media (min-width: 768px) {
  .svc {
      font-size: var(--font-size-body);
    
  }

  .svc-section {
      padding: var(--space-48) 0;
    
  }

  .svc-h2 {
      font-size: 32px;

  }}



@media (min-width: 1024px) {
  .svc-wrap {
      padding: 0 40px;
    
  }

  .svc-section {
      padding: var(--space-64) 0;
    
  }

  .svc-br-sp {
    display: none; 
  }

  .svc-h2 {
      font-size: 42px;
      margin-bottom: var(--space-24);
    
  }

  .svc-eyebrow {
      font-size: 20px;
    
  }

  .svc-lead {
      font-size: var(--font-size-body);
    
  }

  .svc-btn {
      min-height: 56px;
      font-size: 15px;
    
  }

  .svc-btn--primary {
      min-height: 0;
      font-size: 20px; /* PC のメディアクエリで .svc-btn が 15px に上書きするので、主ボタンは Figma の 20px を保つ */
    
  }

  .svc-flowchart {
      max-width: 600px;
      margin: 0 auto;
    
  }

  .svc-section, .svc-cta {
    scroll-margin-top: 166px; 
  }}



@media (max-width: 1023px) {

  .svc-section, .svc-cta {
    scroll-margin-top: 106px; 
  }}



@media (prefers-reduced-motion: reduce) {
  .svc * {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    
  }}

/* ---- /assets/styles/css/service-parts/hero.css ---- */
/* ============================================================
   サービス各ページの1枚目の帯（見出し＋画像）の見た目。組み方は template-parts/service/hero.php。
   SNS・meta・インフルエンサー・クリエイティブ・SEOコンサルティングの5ページで使う（サービス一覧の1枚目の帯は形が違うため別。service-service.css 側）。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   見出し（.svc-hero__title）と画像の入れ方（.svc-hero__visual img）は、5ページのうち値が同じ所をここに集約した
   （2026-09-24 SEOコンサルティングページ追加時、書き写しに気づいて整理）。値が違う所だけ、そのページの CSS に残る：
   - インフルエンサーだけ word-break: keep-all（見出しの折り返し位置を <wbr> だけに絞るため）
   - meta だけ画像の切り抜き位置が独自（Figma の割合指定のクロップ）
   ============================================================ */
/* ---- ヒーロー ---- */
.svc-hero {
  /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端（PCは変数が自動で切り替わる）。
     題名のすぐ下は .svc-section ではなく .svc-subnav（ページ内メニュー）で、
     svc-subnav 側に上の余白が無いため、二重にはならない（/service/ページのような0上書きは不要） */
  padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
}

.svc-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 画像の枠（形・角丸・比率・最大幅）は4ページで同じ。中の画像の切り抜き位置と、読み込み待ちの背景色は
   ページごとに違うため service-<名前>.css に残す（2026-09-24 部品ごとの整理でここへ移動）。
   横スクロール修正（2026-09-24）: 768px からの横並びで、この枠だけ縮められない指定（flex: none; width: 45%;）が
   service-common.css に残っていて、ページ側の width:100%/max-width:500px と合わずタブレット幅ではみ出していた。
   その指定を削除。ここでは幅を固定せず、他の要素と同じく必要なら縮められるようにする */
.svc-hero__visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 500 / 370;
  width: 100%;
  max-width: 500px;
}

/* 画像の入れ方。SNS・インフルエンサー・クリエイティブ・SEOコンサルティングの4ページで同じ（切り抜きなし・そのままcover）。
   meta だけ Figma の割合指定でクロップするため service-meta.css に独自の指定が残る */
.svc-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-hero__title {
  font-size: 30px; /* SP-meta-要素一覧.md のヒーロー見出しサイズ(30px)に合わせる */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--color-text);
  /* 本番の共通 CSS が全要素を両端揃え（text-align: justify）にしているため、2行に折れると1行目の文字間が
     引き伸ばされていた。見出しは左揃え・文字間固定にし、改行位置は <br class="svc-br-sp"> で決める（2026-09-17 本人指摘） */
  text-align: left;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal; /* インフルエンサーだけ keep-all で上書き（service-influencer.css） */
}

.svc-hero__en {
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 1px;
}

/* スマホだけ改行。PC では消す */
.svc-hero__copy {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 10px;
  color: var(--color-text);
}

.svc-hero__desc {
  font-size: var(--font-size-body);
  margin: 0 0 24px;
  color: var(--color-text);
}



@media (min-width: 768px) {

  .svc-hero__inner {
      flex-direction: row;
      align-items: center;
    
  }

  .svc-hero__body {
      flex: 1;
    
  }}



@media (min-width: 1024px) {

  .svc-hero__en {
      font-size: var(--font-size-body);
    
  }

  .svc-hero__title {
      font-size: 30px; /* 2026-09-24：42px の指定は各ページの 30px に上書きされ一度も効いていなかったため、実際の見た目の 30px にそろえた */
  }

  .svc-hero__copy {
      font-size: 18px;
    
  }

  .svc-hero__desc {
      max-width: 680px;
    
  }}

/* ---- /assets/styles/css/service-parts/subnav.css ---- */
/* ============================================================
   ページ内の目次（アンカーナビ）の見た目。組み方は template-parts/service/subnav.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- アンカーナビ（デザインシステム6-8） ---- */
.svc-subnav {
  /* 追従（sticky）はやめた。本番に無い挙動で、浮いたヘッダーと重なるため（2026-09-11） */
  position: static;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gray-light);
  overflow: visible; /* スクロールは内側の箱で行う。下線までぼけないように（2026-09-17） */
  position: sticky;
  top: 100px;
  z-index: 20;
  transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.svc-subnav__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none; /* 目次はぼかしで「続き」を示すので、スクロールバーは出さない（PC のブラウザで太い線が出るのを防ぐ） */
  display: flex;
  gap: var(--space-8);
  height: 56px;
  align-items: center;
  white-space: nowrap;
}

.svc-subnav__link {
  flex: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.svc-subnav__link:hover {
  background: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす（現在地の表示は is-active に残す） */
  color: var(--color-white);
}

/* ---- 目次（スマホ）：右端をぼかして「続きがある」と見せる ----
   スクロールできることが分かりにくいと本人指摘（2026-09-17）。案1「右端のぼかし」を採用（案2 スクロールバー常時表示・案3 2段折り返しは捨てた：線が増える／Figma の1行から離れる）。
   ぼかしは mask で描く（スクロールする箱自体に掛けるので、動いても端に留まる）。左端にも出すかは JS が data-fade で切り替える */
.svc-subnav__inner[data-fade="right"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); 
}

.svc-subnav__inner[data-fade="left"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); 
}

.svc-subnav__inner::-webkit-scrollbar {
  display: none; 
}

.svc-subnav.is-header-hidden {
  top: 0; 
}

.svc-subnav__link.is-active {
  background: var(--color-primary); color: var(--color-white); 
}



@media (min-width: 1024px) {

  .svc-subnav__inner {
      padding: 0 40px;
    
  }

  .svc-subnav__inner[data-fade] {
    -webkit-mask-image: none; mask-image: none; 
  }

  .svc-subnav {
    top: 100px; 
  }}



@media (max-width: 1023px) {
  .svc-subnav {
      position: sticky;
      top: 90px; /* JS が動かないときの備え：ヘッダーの下（90px）に並べて出す。JS が動いたら下の .is-auto-hide に切り替わる */
      z-index: 20;
      /* 本番ヘッダーは下スクロールで隠れ（.is-hidden、0.3s）、上スクロールで出る。隠れている間は目次を画面上端に上げ、
         出たらヘッダー分（90px）下がる。JS がヘッダーの class を見て .is-header-hidden を付け替える（2026-09-17 本人指摘：隙間が空くだけで気持ち悪い） */
      transition: top 0.3s cubic-bezier(0.4, 0.4, 0, 1);
    
  }

  /* 2026-09-21 本人決定：スマホではヘッダーと目次を同時に出さない（2つ並ぶと画面の上が約150px埋まり、浮いた帯と白い帯が並んで違和感があった）。ヘッダーが出ている間は目次を画面の外（上）に置き、ヘッダーが隠れたら .is-header-hidden の top:0 で出す。ヘッダーは60px（下端90px）。PCは従来どおり並べて出す */
  .svc-subnav.is-auto-hide:not(.is-header-hidden) {
    top: -100px; 
  }

  .svc-subnav.is-header-hidden {
      top: 0;
    
  }

  .svc-subnav__link.is-active {
      background: var(--color-primary);
      color: var(--color-white);
    
  }}

/* ---- /assets/styles/css/service-parts/challenges.css ---- */
/* ============================================================
   「こんな課題はありませんか」課題カードの見た目。組み方は template-parts/service/challenges.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 課題カード ---- */
.svc-cards {
  display: grid;
  gap: var(--space-16);
  counter-reset: card;
}

.svc-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  padding: var(--space-24);
}

.svc-card__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Figmaの課題カードは連番でなくアイコン表示のため、アイコンありのカードは装飾番号を出さない */
.svc-card--icon .svc-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.svc-card--numbered .svc-card__title::before {
  counter-increment: card;
  content: counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（課題カードの番号） */
  letter-spacing: 1px;
  margin-bottom: var(--space-8);
}

.svc-card__desc {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.svc-card__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
}

.svc-card__chips li {
  font-size: var(--font-size-min);
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}



@media (min-width: 768px) {

  .svc-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-24);
    
  }}



@media (min-width: 1024px) {

  .svc-cards {
      grid-template-columns: repeat(3, 1fr);
    
  }

  .svc-cards--five {
      grid-template-columns: repeat(3, 1fr);
    
  }}

/* ---- /assets/styles/css/service-parts/reasons.css ---- */
/* ============================================================
   「選ばれる理由」の見た目。組み方は template-parts/service/reasons.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。ページだけの図（改善フロー図など）は各ページの CSS に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 選ばれる理由 ---- */
.svc-reason {
  background: var(--color-bg-soft);
}

.svc-reason__points {
  display: grid;
  gap: var(--space-16);
  margin-bottom: 32px;
}

.svc-reason__point {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1); /* Figma の note カードの影（DROP_SHADOW 0,2 / ぼかし8 / 黒10%）。抜けていたと本人指摘（2026-09-17） */
}

.svc-reason__point h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-reason__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-reason__point p {
  margin: 0;
  font-size: var(--font-size-body);
}



@media (min-width: 768px) {

  .svc-reason__points {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
  }

  /* 3つ横並びのとき、見出しの行と本文の行をカードどうしでそろえる（見出しが1行と2行で混ざっても本文の始まりがそろう。2026-09-27 本人指示） */
  .svc-reason__point {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
  }}

/* ---- /assets/styles/css/service-parts/cta.css ---- */
/* ============================================================
   お問い合わせの帯（ダーク）の見た目。組み方は template-parts/service/cta.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- CTA帯 ---- */
.svc-cta {
  /* 2026-09-24 本人決定: 赤は差し色として絞る。帯は背景#F2F2F2・文字#212121に。ボタンは赤のまま残す */
  background: var(--color-bg-neutral, #F2F2F2);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-40) 0;
}

.svc-cta--dark {
  background: var(--color-text);
  color: var(--color-white); /* 2026-09-24 本人決定: 帯を#F2F2F2にしたぶん、ダーク帯側は白文字を明示 */
}

.svc-cta__title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 16px;
}

.svc-cta__desc {
  margin: 0 0 24px;
  font-size: var(--font-size-body);
}



@media (min-width: 1024px) {

  .svc-cta__title {
      font-size: 32px;
    
  }}

/* ---- /assets/styles/css/service-parts/values.css ---- */
/* ============================================================
   提供価値カード（アイコン＋見出し＋説明＋タグ）の見た目。組み方は template-parts/service/values.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 提供価値（横長カード：アイコン＋見出し＋説明＋#タグ） ---- */
.svc-values-section {
  background: var(--color-bg-neutral, #F2F2F2); /* 2026-09-24 本人決定: うすいピンク→決まりの薄背景色 */
}

.svc-values {
  display: grid;
  gap: var(--space-16);
}

.svc-value {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（カードの枠線） */
  padding: 24px 20px;
}

.svc-value__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.svc-value__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-value__title {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text);
}

.svc-value__desc {
  margin: 0 0 12px;
  font-size: var(--font-size-body);
}

.svc-value__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
}

.svc-value__tags li {
  /* Figma：#タグは 16px・太さ400・色 #666666（本文より薄い灰色）。本文と同じ濃さ・太さになっていて文章量が多く見えると本人指摘（2026-09-17） */
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-normal);
  color: #666666;
}



@media (min-width: 1024px) {

  .svc-value__tags li {
      font-size: var(--font-size-body); /* Figma の PC 指定 */
      font-size: var(--font-size-body);
    
  }

  /* 5枚のカードで左の列の幅を共有する（subgrid）。一番長い見出しに合わせた幅を全カードで使うので、右の説明文の始点がそろう
       （2026-09-17 本人指摘：カードごとに幅が変わって右側の始点がガタガタになった） */
  .svc-values {
      display: grid;
      grid-template-columns: minmax(287px, max-content) 1fr;
      column-gap: 32px;
    
  }

  .svc-value {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      row-gap: 10px;
      align-items: start;
      padding: 36px 32px 37px;
      border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    
  }

  .svc-value__head {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      margin: 0;
      gap: 11px;
    
  }

  .svc-value__icon {
      width: 40px;
      height: 40px;
    
  }

  .svc-value__title {
      font-size: 24px;
      line-height: 1.3;
      white-space: nowrap;
    
  }

  .svc-value__desc {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      font-size: var(--font-size-body);
      line-height: 1.6;
    
  }

  .svc-value__tags {
      grid-column: 2;
      grid-row: 2;
      gap: 6px 16px;
    
  }}

/* ---- /assets/styles/css/service-parts/flow.css ---- */
/* ============================================================
   プロジェクトの流れ（お問い合わせ〜レポート納品の8ステップ）の見た目。組み方は template-parts/service/flow.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。グリッド型の見た目は meta だけ違うため、meta 用の指定は service-meta.css に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 流れ（ol・順序に意味あり／meta専用: グリッド型8ステップ） ---- */
.svc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-16);
  counter-reset: flow;
}

.svc-flow li {
  border-left: 3px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  padding: 4px 0 4px 20px;
}

.svc-flow h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 4px;
}

.svc-flow p {
  margin: 0;
  font-size: var(--font-size-body);
}

.svc-flow--grid {
  counter-reset: flowgrid;
  gap: 20px;
}

.svc-flow--grid li {
  /* スマホ（Figma SP-meta の SP flow）：カード 350×126・白・角丸なし・余白 18/17/19/16。
     左に丸枠の番号 45px、間隔 16、右に CONTACT（12px 赤）→ 見出し（16px）→ 説明（12px #666666）。カード間 20px
     （2026-09-17 本人指摘：4ページとも縦積みでデザインと違う） */
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: var(--space-16);
  align-items: start;
  border-radius: 0;
  background: var(--color-white);
  border: 0.5px solid #dedede;
  padding: 18px 17px 19px 16px;
  position: relative;
}

.svc-flow--grid li::before {
  counter-increment: flowgrid;
  content: counter(flowgrid, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（流れの丸番号） */
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  line-height: 1;
  padding-top: 3px; /* Josefin Sans は字が行の上寄りに置かれるため、上に 3px 足して丸の中央に見せる（2026-09-17 本人指摘・4ページ共通） */
  margin: 0;
  grid-row: 1 / span 3;
}

/* Figma SP：丸（45px）の上下 ＝ CONTACT（12px・行高15）＋間6＋見出し（16px・行高20）＝41px。行の高さを合わせて丸と見出しの高さをそろえる（2026-09-17 本人指摘） */
.svc-flow--grid .svc-flow__en {
  grid-column: 2; margin: 2px 0 6px; line-height: 15px; 
}

.svc-flow--grid li h3 {
  grid-column: 2; margin: 0 0 16px; font-size: var(--font-size-body); line-height: 20px; 
}

.svc-flow--grid li p:not(.svc-flow__en) {
  grid-column: 2; margin: 0; font-size: var(--font-size-body); color: #666666; 
}

.svc-flow__en {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
  margin: 0 0 4px;
  letter-spacing: 1px;
}



@media (min-width: 768px) {

  .svc-flow--grid {
      grid-template-columns: repeat(2, 1fr);

  }}

/* PC（1024px〜）のグリッド型の見た目は SNS・インフルエンサー・クリエイティブ・SEOコンサルティング・インバウンド集客支援の5ページで共通（メタだけ別の見た目のため service-meta.css に残す）。
   各ページとも <main> に svc-page--sns / svc-page--influencer / svc-page--creative / svc-page--seo-consulting / svc-page--inbound が付く前提で絞る（2026-09-24 部品ごとの整理でここへ移動。元は各ページの CSS に3回重複していた。SEOコンサルティングページ追加で4ページに。2026-10-20 インバウンド集客支援ページ追加で5ページに）。 */
@media (min-width: 1024px) {
  .svc-page--sns .svc-flow--grid,
  .svc-page--influencer .svc-flow--grid,
  .svc-page--creative .svc-flow--grid,
  .svc-page--seo-consulting .svc-flow--grid,
  .svc-page--inbound .svc-flow--grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 14px;
    padding: 0 20px; /* Figma は行の内側 1160px */
  }

  .svc-page--sns .svc-flow--grid li,
  .svc-page--influencer .svc-flow--grid li,
  .svc-page--creative .svc-flow--grid li,
  .svc-page--seo-consulting .svc-flow--grid li,
  .svc-page--inbound .svc-flow--grid li {
    display: block;
    position: relative;
    z-index: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-height: 102px;
    padding: 13px 24px 12px 48px;
  }

  .svc-page--sns .svc-flow--grid li::before,
  .svc-page--influencer .svc-flow--grid li::before,
  .svc-page--creative .svc-flow--grid li::before,
  .svc-page--seo-consulting .svc-flow--grid li::before,
  .svc-page--inbound .svc-flow--grid li::before {
    counter-increment: none;
  }

  .svc-page--sns .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--influencer .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--creative .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--seo-consulting .svc-flow--grid li p:not(.svc-flow__en),
  .svc-page--inbound .svc-flow--grid li p:not(.svc-flow__en) {
    margin: 0;
    font-size: var(--font-size-min);
    line-height: 1.35;
    color: #121212;
  }

  .svc-page--sns .svc-flow--grid li h3,
  .svc-page--influencer .svc-flow--grid li h3,
  .svc-page--creative .svc-flow--grid li h3,
  .svc-page--seo-consulting .svc-flow--grid li h3,
  .svc-page--inbound .svc-flow--grid li h3 {
    position: relative;
    margin: 0 0 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: #212121; /* 2026-09-24 本人決定: 飾りの赤を減らす */
    line-height: 1.25;
  }

  /* 箱の形：赤い層の上に、1px 内側の白い層を重ねて枠線に見せる */
  .svc-page--sns .svc-flow--grid li::before, .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::before, .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::before, .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::before, .svc-page--seo-consulting .svc-flow--grid li::after,
  .svc-page--inbound .svc-flow--grid li::before, .svc-page--inbound .svc-flow--grid li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow--grid li::after,
  .svc-page--influencer .svc-flow--grid li::after,
  .svc-page--creative .svc-flow--grid li::after,
  .svc-page--seo-consulting .svc-flow--grid li::after,
  .svc-page--inbound .svc-flow--grid li::after {
    inset: 1px 1px 1px 1px;
    background: var(--color-white);
    clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 0 100%);
  }

  .svc-page--sns .svc-flow__en,
  .svc-page--influencer .svc-flow__en,
  .svc-page--creative .svc-flow__en,
  .svc-page--seo-consulting .svc-flow__en,
  .svc-page--inbound .svc-flow__en {
    display: none;
  }

  .svc-page--sns .svc-flow--grid li h3::before,
  .svc-page--influencer .svc-flow--grid li h3::before,
  .svc-page--creative .svc-flow--grid li h3::before,
  .svc-page--seo-consulting .svc-flow--grid li h3::before,
  .svc-page--inbound .svc-flow--grid li h3::before {
    counter-increment: flowgrid;
    content: counter(flowgrid);
    position: absolute;
    left: -32px;
    top: -2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う */
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    padding-top: 2px; /* Josefin Sans の上寄りを補正 */
  }
}

/* ---- /assets/styles/css/service-parts/price.css ---- */
/* ============================================================
   料金の見た目。組み方は template-parts/service/price.php。
   1つの箱（single）と、プランごとの表（table）の2つの形がある。
   2026-09-28 仮の3プラン（ライト・スタンダード・カスタム）は、全ページの料金が決まって使う所が無くなったので消した。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* 1つの箱で出す料金（price.php の single 引数）。プランに分けられないサービス用（2026-09-24 追加） */
.svc-price-single {
  border: 0;
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); /* Figma の料金カードの影（0,12 / ぼかし32 / 黒30%） */
  max-width: 480px;
  margin: 0 auto;
}

.svc-price-single p {
  margin: 0 0 8px;
  font-size: var(--font-size-body);
}

.svc-price-single p:last-child {
  margin-bottom: 0;
}

.svc-price-single p:nth-child(2) {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
}

/* ---- プランごとの料金を1つの箱に表で出す（price.php の table 引数。2026-09-27 AIO対策ページで追加） ---- */
.svc-price-table {
  border-radius: var(--radius-card);
  padding: 32px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); /* Figma の料金カードの影（0,12 / ぼかし32 / 黒30%） */
  max-width: 640px;
  margin: 0 auto;
}

.svc-price-table__lead {
  text-align: center;
  margin: 0 0 var(--space-16);
}

.svc-price-table__rows {
  margin: 0;
}

.svc-price-table__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
}

.svc-price-table__row:first-child {
  border-top: 1px solid var(--color-border);
}

.svc-price-table__row dt {
  font-weight: var(--font-weight-bold);
}

.svc-price-table__row dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.svc-price-table__note {
  text-align: center;
  margin: var(--space-16) 0 0;
}

/* ---- /assets/styles/css/service-parts/works.css ---- */
/* ============================================================
   関連実績カードの見た目。組み方は template-parts/service/works.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 関連実績 ---- */
.svc-works {
  background: var(--color-gray-light);
}

.svc-works__grid {
  display: grid;
  gap: var(--space-16);
}

.svc-work-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.svc-work-card__img {
  aspect-ratio: 4 / 3;
  /* サムネは実データ未確定のため赤系グラデーションで代用（Figmaも仮の赤グラデーション） */
  background: linear-gradient(135deg, #f2c9c9, var(--color-primary));
 overflow: hidden; 
}

.svc-work-card__body {
  padding: var(--space-24);
}

.svc-work-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

.svc-work-card__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（実績タグ） */
  margin: 0;
}

.svc-work-card__date {
  font-family: var(--font-en);
  font-size: var(--font-size-min);
  font-weight: var(--font-weight-bold);
  color: #6a6a6a;
}

.svc-work-card h3 {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-heading);
}

.svc-work-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover; 
}



@media (min-width: 768px) {

  .svc-works__grid {
      grid-template-columns: repeat(3, 1fr);
    
  }}

/* ---- /assets/styles/css/service-parts/faq.css ---- */
/* ============================================================
   よくある質問の見た目。組み方は template-parts/service/faq.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- FAQ（質問=H3 + 回答=p） ---- */
.svc-faq {
  display: grid;
  gap: var(--space-16);
}

.svc-faq__item {
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: var(--space-16);
}

.svc-faq__item h3 {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  display: flex;
  gap: 12px;
}

.svc-faq__item h3::before {
  content: "Q";
  font-family: var(--font-en);
  color: var(--color-primary); /* 2026-09-24 本人決定: 赤は差し色として使う（FAQのQ） */
  flex: none;
}

.svc-faq__item p {
  margin: 0;
  font-size: var(--font-size-body);
  padding-left: var(--space-24);
  color: var(--color-muted);
}

/* ---- /assets/styles/css/service-parts/text-align.css ---- */
/* ============================================================
   サービス各ページ・サービス一覧の「文字揃えの固定」。1つの部品ファイルに収まらず、
   breadcrumb・hero・subnav・challenges・reasons・cta・values・flow・price・works・faq の
   複数の部品ファイルにまたがるクラスを一括で指定するため、部品と同じ場所に専用ファイルとして置く
   （2026-09-24 SEOコンサルティングページ追加時、5ページに同じブロックが書き写されていたのに気づいて整理）。
   読み込み順は「部品の CSS の後・ページの CSS の前」（functions.php）。ページ側で同じクラスに別の指定が
   無いことを確認したうえでこの位置にした。値が違う所（クリエイティブの追加クラス）はそのページの CSS に残す。
   ============================================================ */
/* ---- 文字揃えの固定 ----
   本番の共通 CSS は全要素を両端揃え（text-align: justify）にしている。複数行の見出し・ラベル類は、
   英字（meta / SNS / PDCA / Instagram など）が混じると行内の文字間が引き伸ばされる。
   見出し・リード・ボタン・ラベルは左揃えに固定し、本文の段落は本番サイトと同じ両端揃えのまま残す
   （2026-09-17 本人指示：文字間が動的に変わらないよう固定する。両ページ・PC/スマホの洗い出し結果に基づく） */
.svc h1, .svc h2, .svc h3, .svc h4,
.svc-eyebrow, .svc-lead, .svc-hero__copy, .svc-hero__desc, .svc-hero__title,
.svc-card__title, .svc-value__title, .svc-work-card__body h3,
.svc-flowchart__step, .svc-flowchart__step strong, .svc-flowchart__parallel li,
.svc-reason__flow-badge, .svc-reason__flow-lead, .svc-subnav__link, .svc-btn,
.svc-faq__q, .svc-flow__title, .svc-flow__num, .svc-flow__en {
  text-align: left;
  letter-spacing: 0;
  text-justify: none;
}

/* 中央揃えに戻す指定。上のうち、実際は中央揃えのままにしたい要素だけ text-align: center で戻す */
.svc-flowchart__step, .svc-flowchart__parallel li, .svc-reason__flow-badge, .svc-reason__flow-lead, .svc-btn {
  text-align: center;
}