/*
Theme Name: Magical Remix
Description: 株式会社マジカルリミックス オリジナルテーマ
Version: 1.0.0
Author: Magical Remix
*/

/* ============================================
   1. CSS Custom Properties
   ============================================ */
:root {
  /* --- 地・主色。サイト全体でアクセントはこの濃紺1色 --------------- */
  --color-primary:      #0B2340;
  --color-primary-dark: #061829;
  --color-primary-mid:  #123058;
  --color-accent:       #0B2340;   /* リンクも濃紺。別系統の青は持たない */
  --color-accent-light: #1F4E86;

  /* --- 柱の差し色 ---------------------------------------------------
     柱（ウェブ制作／業務改善・DX）の見分けにだけ使う。
     ボタン・セクション背景・カード枠・グラデーション・発光には使わない。 */
  --color-pillar-web:      #9E4D44;  /* ウェブ制作・運用（赤煉瓦） */
  --color-pillar-web-tint: #FBF1EF;
  --color-pillar-web-dark: #7A342D;
  --color-pillar-dx:       #007B7E;  /* 業務改善・DX（青緑） */
  --color-pillar-dx-tint:  #EBF6F6;
  --color-pillar-dx-dark:  #00575E;

  /* --- 文字・面・罫線 ----------------------------------------------- */
  --color-text:          #101828;
  --color-text-muted:    #5A6472;
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F4F7FA;
  --color-border:        #E4E7EC;
  --color-border-strong: #DCE3EB;
  --color-navy-footer:   #0B2340;
  --color-on-navy:       #C7D6E8;   /* 濃紺の上の本文 */
  --color-on-navy-dim:   #7FA8D8;   /* 濃紺の上のラベル・アイコン */

  /* リンクの hover 色。既定は濃紺だが、濃紺地のブロックでは白に切り替える
     （下の「濃い地の中のリンク」を参照。切り替えないと文字が地と同化して消える） */
  --color-link-hover:    var(--color-primary);

  /* --- 旧変数の読み替え ---------------------------------------------
     既存セレクタを壊さずに配色だけを差し替えるための別名。
     新規実装では上の変数を直接使う。 */
  --gradient-brand: linear-gradient(0deg, #0B2340, #0B2340); /* グラデは廃止 */
  --color-cyan:       var(--color-primary);
  --color-cyan-light: var(--color-on-navy-dim);
  --color-amber:      var(--color-pillar-web);
  --color-orange:     var(--color-pillar-web);
  --color-purple:     var(--color-pillar-dx);
  --color-emerald:    var(--color-pillar-dx);
  --color-rose:       var(--color-pillar-web-dark);

  --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* 角丸は使わない。区切りは罫線と色面だけで作る */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-full: 0;

  /* 影も使わない。浮かせずに、面と余白で階層を作る */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --transition: 0.25s ease;
  --container-width: 1140px;     /* 全幅セクションの最大幅 */
  --content-width: 1000px;       /* 読み物コンテナ */
  --header-height: 78px;
}

/* ============================================
   2. Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px)  { html { font-size: 18px; } :root { --header-height: 88px; } }
@media (min-width: 1280px) { html { font-size: 19px; } }

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-base); }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-link-hover); }

/* --- 濃い地の中のリンク ---
   既定の hover 色（濃紺）は濃紺地の上だと背景と同化してリンクが消える。
   2026-09-01、トップの事実の帯「◯件を公開しています」が hover で読めなくなっていた。
   個別のリンクごとに直すと必ず取りこぼすので、**濃い地のブロック側**で変数を切り替える。
   濃い背景のセクションを新しく作ったら、必ずこの一覧に足すこと。 */
.bg-navy,
.cta-strip,
.page-hero,
.fp-finder,
.fp-facts,
.fp-contact,
.works-stats,
.works-archive-hero,
.ws-hero,
.ws-side-cta,
.svc-cta {
  --color-link-hover: #fff;
}

/* ============================================
   3. Typography
   ============================================ */
h1,h2,h3,h4,h5,h6 { font-weight: 800; line-height: 1.28; letter-spacing: -.02em; color: var(--color-text); word-break: auto-phrase; }
h1 { font-size: clamp(2.25rem,  5.5vw, 4rem);    font-weight: 900; }
h2 { font-size: clamp(1.75rem,  4vw,   2.75rem); font-weight: 900; }
h3 { font-size: clamp(1.25rem,  3vw,   1.75rem); }
h4 { font-size: 1.375rem; }
/* 流し込みテキストのポリシー: 幅は固定せず、日本語は意味（フレーズ）単位で改行する。
   word-break:auto-phrase は対応ブラウザで自然な意味改行、非対応では通常改行に劣化する。 */
p  { margin-bottom: 1rem; text-wrap: pretty; word-break: auto-phrase; }
p:last-child { margin-bottom: 0; }

/* ============================================
   4. Layout
   ============================================ */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main    { flex: 1; padding-top: var(--header-height); }
.front-page .site-main { padding-top: 0; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section    { padding: var(--space-20) 0; }
.section--sm{ padding: var(--space-12) 0; }
.section--lg{ padding: var(--space-24) 0; }

.section-header { margin-bottom: var(--space-12); }

/* ラベルは濃紺の縦バーとセットで左に置く（中央寄せの飾りは使わない） */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: block;
  width: 8px;
  height: 1.5rem;
  background: var(--color-primary);
  flex-shrink: 0;
}
/* .section-label にアイコンは付けない（縦バーと併用しないため）。
   アイコンは柱見出し・カード・ボタンなど、バーのない場所で使う。 */

.section-title {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* 見出し下のグラデーション下線は廃止（2026-08-25 デザイン刷新） */

.section-desc {
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  line-height: 2;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
  max-width: 46em;
}

.bg-alt  { background: var(--color-bg-alt); }
.bg-navy { background: var(--color-primary); color: #fff; }

/* ============================================
   5. Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.site-header > .container { height: 100%; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-branding { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.site-branding:hover { opacity: .85; }
.site-logo-mark { display: block; width: 44px; height: 44px; flex-shrink: 0; }

.site-name {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: -.02em;
  line-height: 1.25;
}
.site-name small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: .02em;
  margin-top: .15rem;
}

/* ============================================
   6. Navigation
   ============================================ */
.primary-nav { display: none; }

@media (min-width: 768px) {
  .primary-nav { display: flex; align-items: center; gap: .25rem; }
}

.primary-nav ul { display: flex; align-items: center; gap: .25rem; }

.primary-nav a {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-text);
  border-radius: var(--radius-full);
  transition: all var(--transition);
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav .current-menu-item a,
.primary-nav .current_page_item a {
  color: var(--color-accent);
  background: var(--color-bg-alt);
}

.nav-contact-btn a {
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: .5rem 1.5rem !important;
}
.nav-contact-btn a:hover {
  background: var(--color-primary-dark) !important;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  padding: .25rem;
}
@media (min-width: 768px) { .hamburger { display: none; } }

.hamburger span {
  display: block;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: all .3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 999;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { padding: .5rem 0; }
.mobile-menu ul li { border-bottom: 1px solid var(--color-border); }
.mobile-menu ul li:last-child { border-bottom: none; }
.mobile-menu ul a {
  display: block;
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.mobile-menu ul a:hover { color: var(--color-accent); background: var(--color-bg-alt); }

/* --- ドロップダウン（サービス サブメニュー）--- */
@media (min-width: 768px) {
  .primary-nav .menu-item-has-children { position: relative; }
  /* 親項目にキャレット */
  .primary-nav .menu-item-has-children > a::after {
    content: "";
    width: .95em; height: .95em;
    margin-left: .3em;
    background-color: currentColor;
    -webkit-mask: var(--icon-expand-more) center / contain no-repeat;
    mask: var(--icon-expand-more) center / contain no-repeat;
    transition: transform var(--transition);
  }
  .primary-nav .menu-item-has-children:hover > a::after,
  .primary-nav .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
  }
  /* サブメニュー本体 */
  .primary-nav .sub-menu {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%) translateY(.4rem);
    display: block;
    min-width: 230px;
    padding: .5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 1000;
  }
  /* ホバー領域が途切れないよう橋渡し */
  .primary-nav .menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 1rem;
  }
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .primary-nav .sub-menu li { width: 100%; }
  .primary-nav .sub-menu a {
    display: block;
    width: 100%;
    padding: .6rem .9rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-md);
    white-space: nowrap;
  }
  .primary-nav .sub-menu a:hover,
  .primary-nav .sub-menu .current_page_item > a {
    color: var(--color-accent);
    background: var(--color-bg-alt);
  }
}

/* モバイル: サブメニューはインデントして展開表示 */
.mobile-menu .sub-menu { background: var(--color-bg-alt); }
.mobile-menu .sub-menu a {
  padding-left: 2.75rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.mobile-menu .sub-menu a::before {
  content: "";
  display: inline-block;
  width: .9em; height: .9em;
  margin-right: .4rem;
  vertical-align: -.12em;
  color: var(--color-cyan);
  --mr-icon: var(--icon-chevron-right);
}

/* ============================================
   7. Hero
   ============================================ */
.hero {
  background: var(--color-bg);
  position: relative;
}


.hero__inner {
  position: relative;
  z-index: 1;
  padding: 5.5rem 0 4.5rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-primary);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .22em;
  padding: 0;
  margin-bottom: 2rem;
}
.hero__eyebrow-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.hero__title {
  font-size: clamp(2.25rem, 4.6vw, 3.625rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.34;
  letter-spacing: -.015em;
  margin-bottom: 1.75rem;
}

.hero__title .accent { color: var(--color-text); }

/* ヒーローの装飾レイヤー（浮遊オーブ・グリッド柄）は 2026-08-25 に撤去。
   マークアップ側も削除済み。万一残っていても出さないため非表示にしておく。 */
.hero__decor { display: none; }

.hero__desc {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 2.05;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  max-width: 34em;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}

.hero__tag {
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .8125rem;
  padding: .3rem .875rem;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}

/* ============================================
   8. Buttons
   ============================================ */
/* ボタンは角のある矩形。押す場所を1種類に保つため、色は全ページ濃紺で固定し、
   柱の差し色は使わない。高さは 56px（下限44pxを満たす）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  font-family: var(--font-base);
  font-size: .9375rem;
  font-weight: 700;
  padding: .75rem 2.25rem;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  letter-spacing: .04em;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.btn-white:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
}

.btn-outline-navy {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-navy:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn-lg { min-height: 60px; padding: .875rem 2.75rem; font-size: 1rem; }
.btn-center { display: flex; margin: 0 auto; width: fit-content; }

/* ============================================
   9. Cards
   ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* カードは浮かせない。区切りは1pxの罫線、状態の変化は地の色だけで示す */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 2rem;
  transition: background-color var(--transition);
  position: relative;
}
.card:hover {
  background: var(--color-bg-alt);
}

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 0;
  background: var(--color-primary);
  color: #fff; transition: none;
}
.card-svg { width: 26px; height: 26px; }
.card-title { font-size: 1.1875rem; color: var(--color-primary); margin-bottom: .75rem; }
.card-desc  { font-size: .875rem; color: var(--color-text-muted); line-height: 1.85; margin: 0; }

/* リンクカード（トップのサービス一覧） */
a.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.card .card-desc { flex-grow: 1; }
.card-more { display: inline-block; margin-top: 1rem; font-size: .875rem; font-weight: 700; color: var(--color-accent); }

/* ============================================
   10. Reasons
   ============================================ */
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .reasons-grid { grid-template-columns: repeat(3, 1fr); } }

.reason {
  padding: 1.75rem 0 0;
  border-top: 4px solid var(--color-primary);
}
.reason-num {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--color-primary);
  margin: 0 0 .75rem;
}
.reason-title { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 800; color: var(--color-primary); margin-bottom: .75rem; }
.reason-desc  { font-size: 1rem; color: var(--color-text-muted); line-height: 1.9; }

/* ============================================
   11. CTA Strip
   ============================================ */
.cta-strip {
  padding: 5rem 0;
  background: var(--color-primary);
}
.cta-strip-title { font-size: clamp(1.5rem,4vw,2.25rem); color: #fff; margin-bottom: 1rem; }
.cta-strip-desc  { font-size: 1rem; color: rgba(255,255,255,.72); margin-bottom: 2rem; }

/* ============================================
   12. Post Card
   ============================================ */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 600px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .posts-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* --- お知らせ一覧（news-list） ---
   2026-08-31: カード＋16:9プレースホルダ画像をやめた。お知らせにはアイキャッチが
   無いのが基本で、カードで並べるとグレーの箱だけが延々と続く見た目になるため。
   日付・カテゴリ・タイトルの一覧を主にし、アイキャッチは「あれば右に添える」扱い。 */
.news-list { border-top: 2px solid var(--color-primary); }

.news-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  transition: background-color var(--transition);
}
.news-row:hover { background: var(--color-bg-alt); color: inherit; }

.news-row__main {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "date cat  ."
    "text text text";
  align-items: center;
  gap: .5rem .75rem;
}
.news-row__date { grid-area: date; font-size: .8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* 2026-08-31: 枠を外した。四角囲みは「押せるもの」だけの語彙にする。
   カテゴリは押せないラベルなので、左の縦バーと濃紺の太字で示す。 */
.news-row__cat  {
  grid-area: cat;
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .1em;
  color: var(--color-primary);
  justify-self: start;
  white-space: nowrap;
}
/* 2026-08-31: 2px の縦バーは文字の横で中途半端に見えたので外した。
   濃紺・太字・字間の広さで、グレーの日付と十分に区別できる。
   縦バーはセクション見出し（8×24px）の記号なので、ここでは使わない。 */
.news-row__text { grid-area: text; min-width: 0; }
.news-row__title {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.6;
  color: var(--color-text); margin: 0;
}
/* 2026-08-31: 下線は要素の幅に引かれるため、タイトルが2行になると
   文字のない部分まで線が伸びる。下の罫線が濃紺で引き直される演出（33節）と
   地の色の変化で反応は十分伝わるので、下線はやめた。 */
.news-row:hover .news-row__title { color: var(--color-primary); }
.news-row__excerpt {
  margin: .375rem 0 0;
  font-size: .875rem; line-height: 1.7;
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* アイキャッチは添え物。無い行と並んでも、日付・カテゴリ・タイトルの位置は動かない */
.news-row__thumb { flex: 0 0 96px; }
.news-row__thumb img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: top center;
  background: var(--color-bg-alt);
}

@media (min-width: 768px) {
  .news-row { gap: 1.5rem; padding: 1.5rem 0; }
  .news-row__main {
    grid-template-columns: 5.75rem 7rem 1fr;
    grid-template-areas: "date cat text";
    align-items: start;
    gap: 1.25rem;
  }
  .news-row__date { line-height: 1.7; }
  .news-row__thumb { flex-basis: 160px; }
}

/* ============================================
   13. Page Hero
   ============================================ */
/* 下層ページのヒーロー。2026-08-25: グラデーション・シアンのグロー・
   ドットグリッドを撤去し、濃紺の単色面にした。 */
.page-hero {
  position: relative;
  background: var(--color-primary);
  padding: clamp(3rem, 5vw, 4.25rem) 0 clamp(2.5rem, 3.5vw, 3rem);
  color: #fff;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title { font-size: clamp(1.875rem,5vw,3rem); color: #fff; margin-bottom: .75rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8125rem; color: var(--color-on-navy); }
.breadcrumb a { color: var(--color-on-navy); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { color: var(--color-on-navy-dim); }

/* ============================================
   14. Entry Content (Page / Single)
   ============================================ */
.page-content { padding: 4rem 0; }

.entry-wrap { max-width: var(--content-width); margin: 0 auto; }

.entry-content { line-height: 1.95; }
.entry-content h2 {
  font-size: 1.375rem; color: var(--color-primary);
  margin: 3rem 0 1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--color-accent);
}
.entry-content h3 { font-size: 1.2rem; color: var(--color-primary); margin: 2rem 0 .75rem; }
.entry-content p { margin-bottom: 1rem; }
.entry-content ul, .entry-content ol { list-style: revert; margin: 1rem 0 1rem 1.5rem; }
.entry-content li { margin-bottom: .5rem; }
.entry-content a { color: var(--color-accent); text-decoration: underline; }

/* スペックテーブル（会社情報など label×value 型）— 角丸カード＋横罫線 */
.entry-content table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  font-size: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.entry-content table th,
.entry-content table td {
  padding: 1.25rem 1.5rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
  border: 0;
  border-bottom: 1px solid var(--color-border);
}
.entry-content table tr:last-child th,
.entry-content table tr:last-child td { border-bottom: 0; }
.entry-content table td { overflow-wrap: break-word; }
.entry-content table th {
  /* ラベル列は折り返さない。幅は中身に合わせ、余りを値列に渡す */
  width: 1%;
  white-space: nowrap;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .01em;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
}
/* 2026-08-31: 表の行ホバーを外した。会社概要のような読み取る表で
   行が反応すると、押せるものと誤解される（ホバー＝押せる、に統一） */

@media (max-width: 600px) {
  /* 狭幅では縦積みにして窮屈さを解消 */
  .entry-content table th,
  .entry-content table td { display: block; width: auto; white-space: normal; }
  .entry-content table th { border-right: 0; border-bottom: 0; padding: .9rem 1.25rem .2rem; }
  .entry-content table td { padding: .2rem 1.25rem 1rem; }
  .entry-content table tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }
}

/* ============================================
   15. Single Post
   ============================================ */
.post-page-header { margin-bottom: 2rem; }

.post-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.post-cat {
  font-size: .75rem; font-weight: 700;
  background: var(--color-accent); color: #fff;
  padding: 3px .875rem; border-radius: var(--radius-full); text-decoration: none;
}

.post-title { font-size: clamp(1.5rem,4vw,2.25rem); color: var(--color-primary); line-height: 1.4; margin-bottom: 1rem; }
.post-meta { font-size: .8125rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.post-thumb { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 2rem; aspect-ratio: 16/7; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--color-border);
}
.post-nav-link {
  display: block; padding: 1rem 1.25rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.post-nav-link:hover { border-color: var(--color-accent); background: var(--color-bg); box-shadow: var(--shadow-sm); }
.post-nav-link.prev { text-align: left; }
.post-nav-link.next { text-align: right; }
.post-nav-label { font-size: .7rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 2px; }
.post-nav-title { font-size: .875rem; font-weight: 700; color: var(--color-text); line-height: 1.5; }

/* ============================================
   16. Archive
   ============================================ */
.archive-header { margin-bottom: 3rem; }
.archive-title  { font-size: clamp(1.5rem,4vw,2.25rem); color: var(--color-primary); }

.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 600px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }

.pagination {
  display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 .75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 700; color: var(--color-text); transition: all var(--transition);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================
   17. Footer
   ============================================ */
/* フッターは白地。直前のお問い合わせ節が濃紺なので、面を替えて区切る */
.site-footer {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
}

.footer-brand-name  { font-size: 1.0625rem; font-weight: 900; color: var(--color-text); margin-bottom: .375rem; }
.footer-brand-catch { font-size: .8125rem; color: var(--color-primary); margin-bottom: 1.25rem; }
.footer-brand-desc  { font-size: .8125rem; line-height: 1.9; color: var(--color-text-muted); margin: 0; }

.footer-col-title {
  font-size: .75rem; font-weight: 700; color: var(--color-text);
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.footer-nav { display: flex; flex-direction: column; gap: .75rem; }
.footer-nav > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.footer-nav > ul > li { padding: 0; margin: 0; }
.footer-nav a {
  font-size: .8125rem; color: var(--color-text-muted); transition: color var(--transition);
  display: flex; align-items: center; gap: .5rem; min-height: 32px;
}
/* .footer-nav a::before の見た目はセクション29（Material Symbols）で定義 */
.footer-nav a:hover { color: var(--color-primary); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
}
.footer-copy { font-size: .75rem; color: var(--color-text-muted); letter-spacing: .08em; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .75rem; color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-primary); }

/* ============================================
   18. Animations & Utilities
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.text-center { text-align: center; }
.mt-8 { margin-top: 2rem; }

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

/* ============================================
   19. Responsive
   ============================================ */
@media (max-width: 767px) {
  .hero { padding: 2rem 0; align-items: flex-start; }
  .hero__inner { padding: 5rem 0 4rem; }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; justify-content: center; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { text-align: left; }
}

/* ============================================
   20. WordPress Admin Bar 対応
   ============================================ */
@media screen {
  .admin-bar .site-header { top: 32px; }
  .admin-bar .mobile-menu { top: calc(32px + var(--header-height)); }
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .mobile-menu { top: calc(46px + var(--header-height)); }
}


/* 27節 ヒーロー実績スタッツ は 2026-08-25 のデザイン刷新で削除（指標帯は 32節 .fp-facts に置き換え） */

/* ============================================
   28. スクロール演出（entry reveal）
   ============================================ */
/* JSフォールバック（footer.php の IntersectionObserver が .visible を付与） */
/* スクロール駆動アニメーション対応ブラウザでは、よりリッチな entry 演出に置き換え */
@media (prefers-reduced-motion: no-preference) {

/* トップSVGアイキャッチ は 2026-08-25 のデザイン刷新で削除（2ゾーン分割SVG・理由アイコンSVGは廃止） */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .card-grid > .fade-in,
    .reasons-grid.fade-in > .reason,
    .fade-in {
      opacity: 1; transform: none;
    }
    /* 2026-08-31: 移動量を 40px → 16px に、範囲も entry 60% → 45% に詰めた。
       「動いた」と気づかせずに、現れ方だけ和らげるのが狙い。
       グリッドの各要素は画面に入る順にずれるので、遅延を書かなくても
       自然に少しずつ現れる。 */
    .card-grid .card,
    .reasons-grid .reason,
    .svc2-cards .svc2-card,
    .news-list .news-row,
    .fp-works .fp-work,
    .works-archive-grid .works-card {
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ============================================
   29. Material Symbols アイコン
   inc/icons.php の mr_msym() が出力する SVG の共通スタイル。
   viewBox="0 -960 960 960" / fill=currentColor なので、
   親の color と font-size にそのまま追従する。
   ============================================ */
.mr-svg {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.135em;
  fill: currentColor;
  flex: none;
}

/* CSS疑似要素用（SVGを直接書けない箇所は mask で描く） */
:root {
  --icon-chevron-right: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
  --icon-expand-more:   url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
  --icon-expand-less:   url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z'/%3E%3C/svg%3E");
  --icon-arrow-forward: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E");
  --icon-check-circle:  url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}

/* mask で描くアイコンの共通形。--mr-icon に上記の変数を渡して使う */
.mr-mask-icon,
.footer-nav a::before,
.mobile-menu .sub-menu a::before,
.svc-expert-records li::before,
.svc-mode-card__list li::before,
.svc-check-list li::before,
.svc-cta-points li::before,
.svc-cta-primary::after,
.svc-faq-q::after {
  background-color: currentColor;
  -webkit-mask: var(--mr-icon) center / contain no-repeat;
  mask: var(--mr-icon) center / contain no-repeat;
}

/* ボタン・リンク内のアイコン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.btn-icon { width: 1.15em; height: 1.15em; transition: transform var(--transition); }
.btn:hover .btn-icon--end,
.card:hover .btn-icon--end,
a:hover > .btn-icon--end { transform: translateX(4px); }

/* パンくず */
.breadcrumb-sep { display: inline-flex; align-items: center; color: rgba(255,255,255,.35); }
/* 2026-08-31: 実績詳細のパンくずはヒーローの下（白地）に置かれているが、
   .breadcrumb-sep の色は濃紺地むけの白だったため、区切りが見えず
   語がただ並んでいるだけに見えていた。白地用に定義し直す。 */
.page-breadcrumb { padding: 1rem 0; }
.page-breadcrumb nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--color-text-muted);
}
.page-breadcrumb a { color: var(--color-text-muted); position: relative; }
.page-breadcrumb a:hover { color: var(--color-primary); }
.page-breadcrumb .breadcrumb-sep { color: var(--color-border-strong); }
.breadcrumb-sep .mr-svg { width: 1.1em; height: 1.1em; }

/* セクションラベル（Services / Why Us / News / Contact） */
.section-label { display: inline-flex; align-items: center; gap: .45em; }
.section-label-icon { width: 1.15em; height: 1.15em; }

/* ヒーロー実績スタッツ */
.hero__stat-icon { width: 1.5rem; height: 1.5rem; color: var(--color-cyan-light); margin-bottom: .35rem; }

/* サービスカード（トップ） */
.card-svg { width: 30px; height: 30px; }
.card-more { display: inline-flex; align-items: center; gap: .4em; }

/* 記事カードのメタ */
.post-card-cat { display: inline-flex; align-items: center; gap: .3em; }
.post-card-cat-icon { width: .95em; height: .95em; }
.post-card-date { display: flex; align-items: center; gap: .4em; }
.post-card-date-icon { width: 1em; height: 1em; opacity: .7; }
.post-cat { display: inline-flex; align-items: center; gap: .3em; }
.post-meta span { display: inline-flex; align-items: center; gap: .4em; }

/* 前後ナビ */
.post-nav-label { display: inline-flex; align-items: center; gap: .4em; }

/* ページャ */
.pagination .mr-svg { width: 1.1em; height: 1.1em; }

/* フッター */
.footer-col-title { display: flex; align-items: center; gap: .5em; }
.footer-col-icon { width: 1.2em; height: 1.2em; color: var(--color-cyan); }
.footer-links a { display: inline-flex; align-items: center; gap: .4em; }
.footer-link-icon { width: 1.1em; height: 1.1em; }

/* フッターナビの先頭マーク（旧 '›'） */
.footer-nav a::before {
  content: '';
  width: .85em; height: .85em;
  color: var(--color-accent);
  --mr-icon: var(--icon-chevron-right);
}

@media (prefers-reduced-motion: reduce) {
  .btn-icon { transition: none; }
  .btn:hover .btn-icon--end,
  .card:hover .btn-icon--end,
  a:hover > .btn-icon--end { transform: none; }
}

/* ============================================
   32. フロントページ コンポーネント
   2026-08-25 デザイン刷新（課題起点構成）で追加。
   差し色は柱の見分けにだけ使い、ボタン・面・枠には使わない。
   ============================================ */

/* --- ヒーロー2カラム（左：見出し／右：お困りごとから探す） --- */
.fp-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 900px) {
  .fp-hero-grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-16); align-items: start; }
}

/* --- お困りごとから探す --- */
.fp-finder { background: var(--color-primary); color: #fff; padding: var(--space-8); }
.fp-finder__title { font-size: 1.1875rem; font-weight: 900; margin-bottom: .375rem; }
.fp-finder__note  { font-size: .8125rem; color: var(--color-on-navy-dim); line-height: 1.9; margin-bottom: var(--space-4); }
.fp-finder__list  { display: flex; flex-direction: column; gap: .5rem; }
.fp-finder__row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 56px; padding: .625rem 1rem;
  background: var(--color-primary-mid); color: #fff;
  font-size: .9375rem; font-weight: 500; line-height: 1.6;
  transition: background-color var(--transition);
}
.fp-finder__row:hover { background: var(--color-accent-light); color: #fff; }
.fp-finder__label { display: flex; align-items: center; gap: .75rem; }
.fp-finder__icon  { width: 1.25rem; height: 1.25rem; color: var(--color-on-navy-dim); }
.fp-finder__arrow { width: 1.125rem; height: 1.125rem; color: var(--color-on-navy-dim); }

/* --- 事実の帯（2026-09-01 に指標帯 .fp-stats から差し替え） ---
   巨大な数字を3つ並べる型をやめ、ラベル＋値の定義リストにしてある。
   数字で盛らず、会社の素性が一目で分かることを優先する。 */
.fp-facts { background: var(--color-primary); color: #fff; }
.fp-facts__grid {
  display: grid; grid-template-columns: 1fr;
  padding: var(--space-6) 0;
}
@media (min-width: 768px) {
  .fp-facts__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); padding: var(--space-8) 0; }
}
/* 狭い幅ではラベルを値の上に置く。
   ラベル列を左に固定すると値の幅が足りず、末尾の数文字だけが次行に落ちるため。 */
.fp-fact {
  padding: .75rem 0;
  border-top: 1px solid var(--color-primary-mid);
}
.fp-fact:first-child { border-top: none; }
@media (min-width: 768px) {
  .fp-fact {
    display: grid; grid-template-columns: 5.5em 1fr;
    align-items: baseline; gap: .75rem;
    padding: .625rem 0;
  }
  /* 2列組みなので、左右それぞれの1行目だけ罫線を消す */
  .fp-fact:nth-child(2) { border-top: none; }
}
.fp-fact__label {
  display: block; margin-bottom: .25rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  color: var(--color-on-navy-dim); white-space: nowrap;
}
@media (min-width: 768px) { .fp-fact__label { margin-bottom: 0; } }
.fp-fact__value { font-size: 1rem; line-height: 1.6; }
.fp-fact__link {
  display: inline-flex; align-items: center; gap: .25rem;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--color-primary-mid);
  transition: border-color var(--transition);
}
.fp-fact__link:hover { color: #fff; border-bottom-color: #fff; }
.fp-fact__arrow { width: 1rem; height: 1rem; color: var(--color-on-navy-dim); }

/* --- よくあるご相談（悩み → 担当サービス） --- */
.fp-troubles {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--color-border-strong);
  border: 1px solid var(--color-border-strong);
}
@media (min-width: 600px) { .fp-troubles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fp-troubles { grid-template-columns: repeat(3, 1fr); } }
.fp-trouble {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--color-bg); padding: var(--space-6) var(--space-6) var(--space-6);
  color: inherit; transition: background-color var(--transition);
}
.fp-trouble:hover { background: var(--color-bg-alt); color: inherit; }
.fp-trouble__icon { font-size: 1.625rem; line-height: 1; }
.fp-trouble__text { font-size: 1.0625rem; font-weight: 700; line-height: 1.75; margin: 0; flex-grow: 1; }
.fp-trouble__svc  { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 700; }
.fp-trouble__arrow { width: 1.125rem; height: 1.125rem; }
/* 柱の差し色はここで見分けにだけ使う */
.fp-trouble--web .fp-trouble__icon,
.fp-trouble--web .fp-trouble__svc { color: var(--color-pillar-web); }
.fp-trouble--dx  .fp-trouble__icon,
.fp-trouble--dx  .fp-trouble__svc { color: var(--color-pillar-dx); }

/* --- ご相談の流れ --- */
/* 2026-08-31: 罫線のグリッド（gap:1px ＋ 地に border 色）をやめた。
   四角囲みは「押せるもの」の語彙にしたので、ここは囲まない。
   代わりに、順番であることが伝わるよう細いシェブロンでつなぐ。
   向きは並び方に合わせる:
     1カラム … 各ステップの上に下向き
     2カラム … 1→2 と 3→4 の間だけ右向き（2→3 は改行なので出さない）
     4カラム … 2・3・4 の左に右向き */
.fp-flow {
  display: grid; grid-template-columns: 1fr;
  gap: 2.75rem 3rem;
  background: none; border: 0;
}
@media (min-width: 600px) { .fp-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fp-flow { grid-template-columns: repeat(4, 1fr); } }
.fp-flow__step { background: none; padding: 0; position: relative; }

.fp-flow__step::before {
  content: "";
  position: absolute;
  /* 24px。行間の余白（縦2.75rem／横3rem）のちょうど中央に置く */
  width: 1.5rem; height: 1.5rem;
  background-color: var(--color-text-muted);
  -webkit-mask: var(--icon-expand-more) center / contain no-repeat;
  mask: var(--icon-expand-more) center / contain no-repeat;
  /* 1カラム: 上の余白の中央に下向き。横は画面の中央に置く */
  top: -2.125rem; left: 50%; transform: translateX(-50%);
}
.fp-flow__step:first-child::before { content: none; }

@media (min-width: 600px) {
  /* 横に並ぶところだけ右向きにして、列の間の余白の中央に置く */
  .fp-flow__step::before {
    -webkit-mask-image: var(--icon-chevron-right);
    mask-image: var(--icon-chevron-right);
    /* アイコンの高さではなく、ステップ全体の縦中央に置く。
       grid item は行の高さいっぱいに伸びるので、4つとも同じ高さに揃う */
    top: 50%; transform: translateY(-50%); left: -2.25rem;
  }
  /* 2カラムでは 2→3 が改行なので、奇数番目の左にはシェブロンを出さない */
  .fp-flow__step:nth-child(odd)::before { content: none; }
}
@media (min-width: 960px) {
  .fp-flow__step:nth-child(odd)::before { content: ""; }
  .fp-flow__step:first-child::before { content: none; }
}
.fp-flow__icon  { display: block; font-size: 1.625rem; line-height: 1; color: var(--color-primary); margin-bottom: .875rem; }
.fp-flow__no    { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .18em; color: var(--color-primary); }
.fp-flow__title { font-size: 1.125rem; font-weight: 900; margin: .5rem 0 .625rem; }
.fp-flow__desc  { font-size: .875rem; color: var(--color-text-muted); line-height: 1.95; margin: 0; }

/* --- サービス一覧（2柱の索引） --- */
.fp-svclist { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 900px) { .fp-svclist { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } }

.fp-pillar__head {
  display: flex; align-items: center; gap: .625rem;
  font-size: .9375rem; font-weight: 900;
  padding-bottom: .75rem; margin: 0;
  border-bottom: 2px solid var(--color-primary);
}
.fp-pillar__icon { width: 1.25rem; height: 1.25rem; }
.fp-pillar--web .fp-pillar__head { border-bottom-color: var(--color-pillar-web); }
.fp-pillar--web .fp-pillar__icon { color: var(--color-pillar-web); }
.fp-pillar--dx  .fp-pillar__head { border-bottom-color: var(--color-pillar-dx); }
.fp-pillar--dx  .fp-pillar__icon { color: var(--color-pillar-dx); }

.fp-svc-row {
  display: grid; grid-template-columns: 2.75rem 1fr 1.25rem;
  align-items: baseline; gap: 1rem;
  padding: 1.25rem .5rem 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
  color: inherit; transition: background-color var(--transition);
}
.fp-svc-row:hover { background: var(--color-bg-alt); color: inherit; }
.fp-svc-row__no    { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--color-text-muted); }
.fp-svc-row__name  { display: block; font-size: 1.0625rem; font-weight: 700; }
.fp-svc-row__catch { display: block; font-size: .8125rem; color: var(--color-text-muted); line-height: 1.8; margin-top: .25rem; }
.fp-svc-row__arrow { width: 1.125rem; height: 1.125rem; color: var(--color-text-muted); }
.fp-pillar--web .fp-svc-row:hover .fp-svc-row__arrow { color: var(--color-pillar-web); }
.fp-pillar--dx  .fp-svc-row:hover .fp-svc-row__arrow { color: var(--color-pillar-dx); }

.fp-pillar__note { background: var(--color-bg); padding: var(--space-6); margin-top: var(--space-8); border-left: 4px solid var(--color-pillar-dx); }
.fp-pillar__note-title { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 900; margin-bottom: .5rem; }
.fp-pillar__note-icon  { width: 1.25rem; height: 1.25rem; color: var(--color-pillar-dx); }
.fp-pillar__note-text  { font-size: .875rem; color: var(--color-text-muted); line-height: 2; margin: 0; }

/* --- 選ばれる理由（アイコン） --- */
.reason-icon { display: block; font-size: 1.75rem; line-height: 1; color: var(--color-primary); margin-bottom: .875rem; }

/* --- 制作実績 --- */
.fp-works { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 600px) { .fp-works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fp-works { grid-template-columns: repeat(3, 1fr); } }
.fp-work { display: block; color: inherit; }
.fp-work__thumb { display: block; background: var(--color-border-strong); aspect-ratio: 16 / 10; overflow: hidden; }
.fp-work__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fp-work__noimg { display: block; width: 100%; height: 100%; background: var(--color-border-strong); }
.fp-work__title { font-size: 1.0625rem; font-weight: 700; margin: .875rem 0 .25rem; }
.fp-work__meta  { font-size: .8125rem; color: var(--color-text-muted); margin: 0; }

/* --- お知らせ --- */
.fp-news__row {
  display: grid; grid-template-columns: 1fr; gap: .25rem;
  padding: 1.25rem 0; border-top: 1px solid var(--color-border);
  color: inherit; transition: background-color var(--transition);
}
.fp-news__row:first-child { border-top: 2px solid var(--color-primary); }
.fp-news__row:last-child  { border-bottom: 1px solid var(--color-border); }
.fp-news__row:hover { background: var(--color-bg-alt); color: inherit; }
@media (min-width: 768px) {
  .fp-news__row { grid-template-columns: 7rem 9rem 1fr; align-items: center; gap: 1.5rem; }
}
.fp-news__date  { font-size: .8125rem; color: var(--color-text-muted); }
/* 2026-08-31: 一覧側（.news-row__cat）と同じく枠を外した */
.fp-news__cat   {
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  color: var(--color-primary); justify-self: start; white-space: nowrap;
}
/* 2026-08-31: 一覧側と同じく縦バーを外した */
.fp-news__title { font-size: .9375rem; font-weight: 500; }

/* --- お問い合わせ --- */
.fp-contact { background: var(--color-primary); color: #fff; padding: var(--space-20) 0; }
.fp-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) { .fp-contact__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); } }
.fp-contact__label {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .22em;
  color: var(--color-on-navy-dim); margin-bottom: var(--space-4);
}
.fp-contact__label::before {
  content: ''; display: block; width: 8px; height: 1.5rem;
  background: var(--color-on-navy-dim); flex-shrink: 0;
}
.fp-contact__title { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 900; line-height: 1.45; color: #fff; }
.fp-contact__desc  { font-size: .9375rem; line-height: 2.05; color: var(--color-on-navy); margin: var(--space-6) 0 0; }
.fp-contact__actions { display: flex; flex-direction: column; gap: .875rem; }
.fp-contact__actions .btn { width: 100%; }


/* ============================================
   33. さりげない動き（motion）
   2026-08-31: 「洗練された感じは保ちつつ、随所にさりげなく」という
   方針で追加。使う手は4つだけに絞り、要素ごとに使い分ける。
     ① 下線・罫線が左から伸びる（scaleX）… リンク・一覧行
     ② 塗りが左から満ちる（scaleX）      … ボタン
     ③ 数pxの微動・わずかな拡大          … アイコン・画像
     ④ 現れるときだけ少し下から          … カード（28節）
   浮き上がり（カード自体の translateY）・影・発光は使わない。
   すべて --transition（0.25s）で、目で追える速さに揃える。
   ============================================ */

/* --- ① 下線が左から伸びるリンク ---------------------------------- */
/* 対象は「もともと下線を持たないリンク」だけ。本文中のリンクは常時下線の
   ままにする（hoverしないと下線が出ない状態は、リンクだと気づけない） */
.footer-links a,
.breadcrumb a {
  position: relative;
}
.footer-links a::after,
.breadcrumb a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.2em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
.footer-links a:hover::after,
.breadcrumb a:hover::after { transform: scaleX(1); }

/* フッターのサービス／会社情報は a が display:flex で列いっぱいの幅を持つため、
   下線を引くと文字ではなく列の右端まで伸びる。ここは行頭の「›」を右へ送る */
.footer-nav a::before { transition: transform var(--transition); }
.footer-nav a:hover::before { transform: translateX(3px); }

/* --- ① 一覧行は、下の罫線が濃紺で引き直される -------------------- */
.news-row { position: relative; }
.news-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
.news-row:hover::after { transform: scaleX(1); }

/* --- ① トップの柱一覧の行 ---------------------------------------- */
/* このセクションの地は .bg-alt（--color-bg-alt = #F4F7FA）で、
   もとの hover も同じ --color-bg-alt だった。つまり色が1ミリも変わらず、
   ホバーが効いていないのと同じ状態だった。白へ反転させたうえで、
   罫線を柱の色で引き直す（他の一覧行と同じ手に揃える）。 */
.fp-svc-row { position: relative; }
.fp-svc-row:hover { background: #fff; }
.fp-svc-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
.fp-pillar--web .fp-svc-row::after { background: var(--color-pillar-web); }
.fp-pillar--dx  .fp-svc-row::after { background: var(--color-pillar-dx); }
.fp-svc-row:hover::after { transform: scaleX(1); }
.fp-svc-row__no    { transition: color var(--transition); }
.fp-svc-row__arrow { transition: color var(--transition), transform var(--transition); }
.fp-pillar--web .fp-svc-row:hover .fp-svc-row__no { color: var(--color-pillar-web); }
.fp-pillar--dx  .fp-svc-row:hover .fp-svc-row__no { color: var(--color-pillar-dx); }
.fp-svc-row:hover .fp-svc-row__arrow { transform: translateX(3px); }

/* --- ② ボタンは塗りが左から満ちる -------------------------------- */
/* isolation: isolate で .btn 自身に重ね順の器を作り、::before を
   z-index:-1 に置く。こうすると文字とアイコンは常に塗りの前に残る */
.btn { position: relative; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
.btn:hover::before { transform: scaleX(1); }
/* 塗りを ::before に移すので、既存の hover 背景は消す（色だけ残す） */
.btn-primary::before      { background: var(--color-primary-mid); }
.btn-primary:hover        { background: var(--color-primary); border-color: var(--color-primary-mid); }
.btn-white::before        { background: var(--color-bg-alt); }
.btn-white:hover          { background: #fff; }
.btn-outline::before      { background: rgba(255,255,255,.14); }
.btn-outline:hover        { background: transparent; }
.btn-outline-navy::before { background: var(--color-primary); }
.btn-outline-navy:hover   { background: transparent; }

/* --- ③ アイコンと画像のわずかな動き ------------------------------ */
.fp-work__thumb img,
.works-card-thumb img { transition: transform .5s ease; }
.fp-work:hover .fp-work__thumb img,
.works-card-link:hover .works-card-thumb img { transform: scale(1.04); }

.fp-trouble__icon,
.fp-finder__icon { transition: transform var(--transition); }
.fp-trouble:hover .fp-trouble__icon,
.fp-finder__row:hover .fp-finder__icon { transform: translateY(-2px); }

/* --- 動きを控える設定では、足した動きを全部止める ----------------- */
@media (prefers-reduced-motion: reduce) {
  .footer-links a::after,
  .breadcrumb a::after,
  .news-row::after,
  .fp-svc-row::after,
  .fp-svc-row__no,
  .fp-svc-row__arrow,
  .btn::before { transition: none; }
  .fp-svc-row:hover .fp-svc-row__arrow { transform: none; }
  .fp-work__thumb img,
  .works-card-thumb img,
  .fp-trouble__icon,
  .fp-finder__icon,
  .footer-nav a::before { transition: none; }
  .footer-nav a:hover::before,
  .fp-work:hover .fp-work__thumb img,
  .works-card-link:hover .works-card-thumb img,
  .fp-trouble:hover .fp-trouble__icon,
  .fp-finder__row:hover .fp-finder__icon { transform: none; }
}