/* ============================================================
   himawari lab.. 共通デザイン
   - ヘッダー / フッター / トップページ
   - 写真まとめるくんLP（header-shashin.php使用ページ）では読み込まない

   命名: l- = レイアウト / c- = 部品 / p- = トップページ固有 / u- = 汎用
   余白: 8px を基準単位とする（--space-*）
   動き: 400〜700ms / 移動距離16px / --ease-out。prefers-reduced-motion では無効
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --c-white:      #FFFFFF;
  --c-navy:       #172B45;
  --c-navy-deep:  #0F1F33;
  --c-navy-soft:  #24395A;
  --c-yellow:     #F0C14B; /* ロゴの黄色 */
  --c-gray:       #F5F6F8;
  --c-gray-deep:  #ECEFF3;
  --c-line:       #DDE1E7;
  --c-line-dark:  #B9C1CC;
  --c-text:       #263238;
  --c-muted:      #5B6670;

  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  --font-en: "Inter", "Noto Sans JP", system-ui, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  --section-y: clamp(96px, 11vw, 160px);
  --head-gap:  clamp(48px, 6vw, 88px);
  --gutter:    clamp(20px, 5vw, 48px);
  --container: 1200px;
  --header-h:  64px;

  --radius: 2px;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}

/* ---------- Base ---------- */
html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* 既存 style.css の overflow-x:hidden は position:sticky を無効にするため上書き */
html,
body {
  overflow-x: visible;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.p-front *,
.p-page *,
.l-header *,
.l-footer * {
  box-sizing: border-box;
}

/* 日本語の文節単位で改行（対応ブラウザのみ） */
.p-front,
.p-page,
.l-footer {
  word-break: auto-phrase;
}

/* リセットは :where() で詳細度0にし、各部品の指定が必ず優先されるようにする */
:where(.p-front, .p-page) :where(h1, h2, h3, p, ul, ol, dl, dd, figure),
:where(.l-header) :where(ul),
:where(.l-footer) :where(p, ul, dl, dd) {
  margin: 0;
  padding: 0;
}

:where(.p-front, .p-page, .l-header, .l-footer) :where(ul, ol) {
  list-style: none;
}

.p-front img,
.p-page img,
.l-header img,
.l-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-front a,
.p-page a,
.l-header a,
.l-footer a {
  color: inherit;
}

:where(.p-front, .p-page, .l-header, .l-footer) a:focus-visible,
:where(.p-front, .p-page, .l-header, .l-footer) button:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}

/* ---------- Utility ---------- */
.u-ib { display: inline-block; }

.u-pc { display: none; }
@media (min-width: 768px) {
  .u-pc { display: inline; }
}

.c-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.c-skip-link:focus {
  transform: none;
  outline: 2px solid var(--c-yellow);
}

/* ---------- Layout ---------- */
/* 画面端まで広げる要素（裁ち落とし）の基準幅。100vw はスクロールバー幅を含み
   横スクロールの原因になるため、セクション幅（cqw）を基準にする */
.p-hero,
.p-pagehead {
  container-type: inline-size;
}

.l-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Components
   ============================================================ */

/* ---------- Button ----------
   ホバー時は背景色が左から静かに満ちる。矢印は4px移動 */
.c-btn {
  --btn-bg: var(--c-navy);
  --btn-fg: var(--c-white);
  --btn-hover-bg: var(--c-navy-deep);
  --btn-hover-fg: var(--c-white);
  --btn-border: transparent;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60px;
  padding: 0 36px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.c-btn:hover { color: var(--btn-hover-fg) !important; }
.c-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.c-btn__icon {
  flex: none;
  transition: transform .4s var(--ease-out);
}
.c-btn:hover .c-btn__icon { transform: translateX(4px); }

.c-btn--navy {
  --btn-bg: var(--c-navy);
  --btn-hover-bg: var(--c-navy-soft);
}

.c-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  --btn-border: var(--c-navy);
  --btn-hover-bg: var(--c-navy);
  --btn-hover-fg: var(--c-white);
}

.c-btn--white {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-navy);
  --btn-hover-bg: var(--c-yellow);
  --btn-hover-fg: var(--c-navy);
}
.c-btn--white:focus-visible { outline-color: var(--c-yellow) !important; }

.c-btn--sm {
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
  letter-spacing: .08em;
}

.c-btn--wide { min-width: min(100%, 340px); justify-content: space-between; }

@media (max-width: 767px) {
  .c-btn { min-height: 56px; padding: 0 20px; font-size: 14px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .c-btn::before,
  .c-btn__icon { transition: none; }
}

/* ---------- Text link ---------- */
.c-link {
  color: var(--c-navy) !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(23, 43, 69, .3);
  transition: text-decoration-color .3s var(--ease);
}
.c-link:hover { text-decoration-color: var(--c-navy); }

/* ---------- Section heading ----------
   [番号] ── [英字ラベル] / 和文見出し */
.c-heading__en {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-3) !important;
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.c-heading__en::before,
.c-heading__num::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--c-yellow);
  box-shadow: 0 .5px 0 var(--c-yellow);
}
/* 番号付きの場合は「番号 ── ラベル」 */
.c-heading__en:has(.c-heading__num)::before { display: none; }
.c-heading__num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: .08em;
}

.c-heading__title {
  color: var(--c-navy);
  font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.625rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
}

.c-heading--invert .c-heading__en,
.c-heading--invert .c-heading__title {
  color: var(--c-white);
}
.c-heading--invert .c-heading__num { color: rgba(255, 255, 255, .6); }

/* ---------- Scroll reveal ----------
   html.js-reveal は functions.php の head 内スクリプトで付与（動きを減らす設定では付与しない） */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity .7s var(--ease-out) var(--d, 0ms),
      transform .7s var(--ease-out) var(--d, 0ms);
  }
  html.js-reveal [data-reveal="image"] {
    transform: none;
  }
  html.js-reveal [data-reveal="image"] img {
    transform: scale(1.03);
    transition: transform .7s var(--ease-out) var(--d, 0ms);
  }
  html.js-reveal [data-reveal].is-inview {
    opacity: 1;
    transform: none;
  }
  html.js-reveal [data-reveal="image"].is-inview img {
    transform: none;
  }
}

/* ============================================================
   Header
   ============================================================ */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.admin-bar .l-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .l-header { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .l-header { top: 0; }
}

.l-header.is-scrolled { border-bottom-color: var(--c-line); }

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--header-h);
}

.l-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-navy) !important;
  text-decoration: none;
}
.l-header__logo img {
  width: auto;
  height: 36px;
}
.l-header__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l-header__name {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
}
.l-header__tagline {
  color: var(--c-muted);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .08em;
}

.l-header__menu a {
  text-decoration: none;
}

/* --- Toggle (SP / Tablet) --- */
.l-header__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  cursor: pointer;
}
.l-header__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.l-header__toggle-icon,
.l-header__toggle-icon::before,
.l-header__toggle-icon::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), background-color .2s;
}
.l-header__toggle-icon { position: relative; }
.l-header__toggle-icon::before,
.l-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.l-header__toggle-icon::before { top: -7px; }
.l-header__toggle-icon::after  { top: 7px; }

.l-header__toggle[aria-expanded="true"] .l-header__toggle-icon { background: transparent; }
.l-header__toggle[aria-expanded="true"] .l-header__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.l-header__toggle[aria-expanded="true"] .l-header__toggle-icon::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Nav: SP / Tablet (drawer) --- */
@media (max-width: 1023px) {
  .l-header__nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) var(--gutter) var(--space-6);
    overflow-y: auto;
    background: var(--c-white);
    border-top: 1px solid var(--c-line);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), visibility 0s linear .2s;
  }
  .admin-bar .l-header__nav { top: calc(var(--header-h) + 46px); }

  .l-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s var(--ease), visibility 0s;
  }

  .l-header__menu li { border-bottom: 1px solid var(--c-line); }
  .l-header__menu a {
    display: flex;
    align-items: center;
    min-height: 60px;
    color: var(--c-navy);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .06em;
  }

  .l-header__cta { width: 100%; min-height: 56px; font-size: 15px; }
}

/* --- Nav: Desktop --- */
@media (min-width: 1024px) {
  .l-header__toggle { display: none; }

  .l-header__logo img { height: 40px; }
  .l-header__name { font-size: 20px; }

  .l-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .l-header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .l-header__menu a {
    position: relative;
    display: block;
    padding: 8px 0;
    color: var(--c-text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    transition: color .2s var(--ease);
  }
  .l-header__menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--c-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .l-header__menu a:hover { color: var(--c-navy); }
  .l-header__menu a:hover::after,
  .l-header__menu .current-menu-item > a::after { transform: scaleX(1); }
}

body.is-nav-open { overflow: hidden; }

/* ============================================================
   Footer
   ============================================================ */
.l-footer {
  padding-top: var(--space-10);
  background: var(--c-gray);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.8;
}

.l-footer__main {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}

.l-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-navy) !important;
  text-decoration: none;
}
.l-footer__logo img { width: auto; height: 36px; }
.l-footer__name {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .02em;
}

.l-footer__lead {
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-weight: 500;
}

.l-footer__business {
  margin-top: var(--space-2) !important;
  color: var(--c-muted);
  font-size: 13px;
}
.l-footer__business dt {
  display: inline;
  margin-right: 1em;
  font-weight: 500;
}
.l-footer__business dd { display: inline; }

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.l-footer__nav-label {
  margin-bottom: var(--space-2) !important;
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.l-footer__menu li + li { margin-top: 4px; }
.l-footer__menu a {
  display: inline-block;
  padding: 6px 0;
  color: var(--c-text);
  text-decoration: none;
}
.l-footer__menu a:hover {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.l-footer__bottom {
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-line);
}
.l-footer__copyright {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .06em;
}
.l-footer__copyright small { font-size: inherit; }

@media (min-width: 768px) {
  .l-footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-8);
  }
  .l-footer__nav { gap: var(--space-6); }
}

/* ============================================================
   Front page
   背景の流れ: Hero(白) → Service(白) → 写真まとめるくん(グレー)
             → Works(白＋ネイビーの結果パネル) → News(白) → Flow(グレー)
             → About(白) → Contact(ネイビー)
   ============================================================ */
.p-section {
  padding-block: var(--section-y);
}

/* --- セクション見出しブロック --- */
.p-head {
  margin-bottom: var(--head-gap);
}
.p-head__lead {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 15px;
  line-height: 2;
}
@media (min-width: 960px) {
  .p-head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: end;
  }
  .p-head--split .p-head__lead { margin-top: 0 !important; padding-bottom: 10px; }
}

/* --- 見出し + 本文の2カラム（News / About） --- */
.p-split {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .p-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: start;
  }
  .p-split .c-heading__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
}

/* ---------- Hero ---------- */
.p-hero {
  padding-top: clamp(32px, 5vw, 72px);
}

.p-hero__grid {
  display: grid;
  gap: var(--space-6);
}

.p-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-4) !important;
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
}
.p-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-yellow);
  box-shadow: 0 .5px 0 var(--c-yellow);
}

.p-hero__title {
  color: var(--c-navy);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.375rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
}

.p-hero__lead {
  margin-top: var(--space-4) !important;
  color: var(--c-text);
  font-size: clamp(16px, .95rem + .35vw, 19px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .06em;
}

.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* メインビジュアルの背景面：SPは画面幅いっぱい、PCは右端まで */
.p-hero__media {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-5) var(--gutter);
  background: #EEF2F7;
}

/* 事業領域インデックス */
.p-hero__index {
  position: relative;
  z-index: 1;
  background: var(--c-white);
}
.p-hero__index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.p-hero__index-list li {
  border-bottom: 1px solid var(--c-line);
}
.p-hero__index-list li:nth-child(odd) { border-right: 1px solid var(--c-line); }
.p-hero__index-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 64px;
  padding: 20px 16px;
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .3s var(--ease);
}
.p-hero__index-list li:nth-child(odd) a { padding-left: 0; }
.p-hero__index-num {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-hero__index-label {
  background: linear-gradient(var(--c-navy), var(--c-navy)) left bottom / 0 1px no-repeat;
  transition: background-size .4s var(--ease-out);
}
.p-hero__index-list a:hover .p-hero__index-label { background-size: 100% 1px; }

@media (min-width: 960px) {
  .p-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
  }
  .p-hero__title { font-size: clamp(2.25rem, 1rem + 2.2vw, 3.25rem); }
  .p-hero__media {
    /* コンテナ右端から画面右端まで広げる */
    margin-inline: 0 calc((min(100cqw, var(--container) + var(--gutter) * 2) - 100cqw) / 2 - var(--gutter));
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
  }
  .p-hero__index { margin-top: clamp(40px, 5vw, 72px); }
  .p-hero__index-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--c-line);
  }
  .p-hero__index-list li { border-bottom: 0; }
  .p-hero__index-list li + li { border-left: 1px solid var(--c-line); }
  .p-hero__index-list li:nth-child(odd) { border-right: 0; }
  .p-hero__index-list a,
  .p-hero__index-list li:nth-child(odd) a {
    min-height: 80px;
    padding: 28px 28px;
    font-size: 15px;
  }
  .p-hero__index-list li:first-child a { padding-left: 0; }
}
@media (max-width: 959px) {
  .p-hero__media { margin-top: var(--space-2); }
  .p-hero__index { margin-top: 0; }
}

/* ---------- Main visual ----------
   設計座標（PC 640×560 / SP 360×560）を --u（1設計px）で縮尺する。
   左：バラバラな現場の情報 → 中央：自動で整理 → 右：整った業務画面 */
.mv {
  --mv-blue: #2D5FA8;
  --mv-line: #9AAAC0;
  container-type: inline-size;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.mv__stage {
  --u: calc(100cqi / 640);
  position: relative;
  aspect-ratio: 640 / 560;
  font-family: var(--font-ja);
  letter-spacing: .02em;
}

.mv__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mv__lines path {
  fill: none;
  stroke: var(--mv-line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.mv__lines .mv__line-out {
  stroke: var(--mv-blue);
  stroke-dasharray: none;
  stroke-width: 1.5;
}
.mv__lines--sp { display: none; }

/* 共通：カード */
.mv-card {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
  background: var(--c-white);
  border: 1px solid #DCE2EA;
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) rgba(23, 43, 69, .28);
  transform: rotate(var(--r));
}

/* 写真カード（プリント写真のような白フチ） */
.mv-photo { padding: calc(5 * var(--u)) calc(5 * var(--u)) 0; }
.mv-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mv-photo figcaption {
  padding: calc(4 * var(--u)) 0 calc(5 * var(--u));
  color: #7A8796;
  font-family: var(--font-en);
  font-size: calc(9 * var(--u));
  line-height: 1.3;
  letter-spacing: .02em;
}

/* 書類カード */
.mv-doc {
  height: calc(var(--h) * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u));
}
.mv-doc__title {
  margin-bottom: calc(10 * var(--u)) !important;
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px solid #DCE2EA;
  color: var(--c-navy);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-align: center;
}
.mv-doc__line {
  display: block;
  height: calc(4 * var(--u));
  margin-bottom: calc(9 * var(--u));
  background: #E6EAF0;
}
.mv-doc__line--short { width: 62%; }
.mv-doc__stamp {
  position: absolute;
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border: 1px solid #C46A5A;
  border-radius: 50%;
  color: #C46A5A;
  font-size: calc(10 * var(--u));
  line-height: 1;
}

/* 表計算カード */
.mv-sheet { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
.mv-sheet__title {
  margin-bottom: calc(6 * var(--u)) !important;
  color: #3D6B4F;
  font-family: var(--font-en);
  font-size: calc(9.5 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}
.mv-sheet__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 1px;
  background: #DCE2EA;
  border: 1px solid #DCE2EA;
}
.mv-sheet__grid span {
  height: calc(13 * var(--u));
  background: var(--c-white);
}
.mv-sheet__grid span.is-mark { background: #FBEFC8; }

/* 配置（PC） */
.mv-i1 { --x: 20;  --y: 62;  --w: 156; --r: -5deg; }
.mv-i2 { --x: 152; --y: 22;  --w: 106; --r: 6deg; z-index: 1; }
.mv-i3 { --x: 132; --y: 168; --w: 120; --h: 152; --r: 4deg; }
.mv-i4 { --x: 12;  --y: 296; --w: 148; --r: 4deg; }
.mv-i5 { --x: 110; --y: 404; --w: 150; --r: -4deg; }

/* 整理ノード（AIは控えめに） */
.mv-node {
  position: absolute;
  left: calc(276 * var(--u));
  top: calc(256 * var(--u));
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  display: grid;
  place-items: center;
  background: var(--c-white);
  border: 1px solid var(--mv-blue);
  border-radius: 50%;
  color: var(--mv-blue);
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(45, 95, 168, .08);
}
.mv-node__icon svg {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.mv-node__label {
  position: absolute;
  top: calc(100% + 10 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-navy);
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 業務画面（タブレット） */
.mv-device {
  position: absolute;
  left: calc(340 * var(--u));
  top: calc(48 * var(--u));
  width: calc(290 * var(--u));
  height: calc(464 * var(--u));
  padding: calc(9 * var(--u));
  background: var(--c-navy);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(28 * var(--u)) calc(48 * var(--u)) calc(-24 * var(--u)) rgba(23, 43, 69, .45);
}
.mv-screen {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  height: 100%;
  padding: calc(14 * var(--u)) calc(14 * var(--u));
  overflow: hidden;
  background: #F8FAFC;
  border-radius: calc(10 * var(--u));
}
.mv-screen__bar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid #E3E8EF;
}
.mv-screen__mark {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--c-navy);
  box-shadow: inset calc(-6 * var(--u)) calc(-6 * var(--u)) 0 var(--c-yellow);
}
.mv-screen__app {
  flex: 1;
  color: var(--c-navy);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
}
.mv-screen__user {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: #D5DDE8;
}
.mv-screen__notice {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  background: #E8F0FB;
  border-radius: calc(4 * var(--u));
  color: var(--mv-blue);
  font-size: calc(9.5 * var(--u));
  font-weight: 500;
  line-height: 1.4;
}
.mv-screen__notice svg {
  flex: none;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.mv-screen__tabs {
  display: flex;
  gap: calc(14 * var(--u));
  border-bottom: 1px solid #E3E8EF;
  color: #7A8796;
  font-size: calc(9.5 * var(--u));
  line-height: 1;
}
.mv-screen__tabs span { padding-bottom: calc(7 * var(--u)); }
.mv-screen__tabs .is-active {
  color: var(--c-navy);
  font-weight: 700;
  box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--c-navy);
}

.mv-screen__list {
  display: grid;
  gap: calc(6 * var(--u));
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.mv-row {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u));
  background: var(--c-white);
  border: 1px solid #E3E8EF;
  border-radius: calc(4 * var(--u));
}
.mv-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(3 * var(--u));
}
.mv-row__body { display: grid; gap: calc(3 * var(--u)); min-width: 0; }
.mv-row__title {
  overflow: hidden;
  color: var(--c-navy);
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mv-row__meta {
  color: #7A8796;
  font-size: calc(8.5 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}
.mv-chip {
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #EEF2F7;
  color: var(--c-navy);
  font-size: calc(8.5 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}
.mv-chip--done { background: var(--mv-blue); color: var(--c-white); }

.mv-screen__button {
  display: grid;
  place-items: center;
  margin-top: auto;
  height: calc(34 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--c-navy);
  color: var(--c-white);
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: .1em;
}

/* 報告書プレビュー */
.mv-report {
  padding: calc(10 * var(--u));
  background: var(--c-white);
  border: 1px solid #E3E8EF;
  border-radius: calc(4 * var(--u));
}
.mv-report__head {
  display: flex;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-bottom: calc(8 * var(--u)) !important;
  color: var(--c-navy);
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}
.mv-report__file {
  color: #7A8796;
  font-family: var(--font-en);
  font-size: calc(8.5 * var(--u));
  font-weight: 500;
}
.mv-report__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6 * var(--u));
}
.mv-report__cell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(2 * var(--u));
}
.mv-report__line {
  display: block;
  height: calc(3 * var(--u));
  margin-top: calc(5 * var(--u));
  background: #E6EAF0;
}

/* 配置（SP）：上に情報 → 中央で整理 → 下に業務画面 */
@media (max-width: 599px) {
  .mv { max-width: 400px; }
  .mv__stage {
    --u: calc(100cqi / 360);
    aspect-ratio: 360 / 560;
  }
  .mv__lines--pc { display: none; }
  .mv__lines--sp { display: block; }

  .mv-i1 { --x: 6;   --y: 18;  --w: 112; --r: -6deg; }
  .mv-i2 { --x: 126; --y: 6;   --w: 92;  --r: 4deg; }
  .mv-i3 { --x: 240; --y: 10;  --w: 100; --h: 122; --r: 6deg; }
  .mv-i4 { --x: 34;  --y: 112; --w: 104; --r: 3deg; }
  .mv-i5 { --x: 152; --y: 96;  --w: 118; --r: -3deg; }

  .mv-node { left: calc(156 * var(--u)); top: calc(198 * var(--u)); }
  .mv-node__label { top: 50%; left: calc(100% + 12 * var(--u)); transform: translateY(-50%); }

  .mv-device {
    left: calc(30 * var(--u));
    top: calc(260 * var(--u));
    width: calc(300 * var(--u));
    height: calc(296 * var(--u));
  }
  .mv-screen { gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); }
  .mv-screen__tabs,
  .mv-report,
  .mv-screen__button { display: none; }
}

/* 表示時の動き：情報が集まり → 整理され → 画面に並ぶ（各700ms以内） */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal [data-reveal="visual"] { opacity: 1; transform: none; }
  html.js-reveal .mv-card,
  html.js-reveal .mv-node,
  html.js-reveal .mv__lines,
  html.js-reveal .mv-device,
  html.js-reveal .mv-row,
  html.js-reveal .mv-report,
  html.js-reveal .mv-screen__notice {
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-card {
    opacity: 0;
    transform: rotate(var(--r)) translate3d(calc(-12 * var(--u)), calc(10 * var(--u)), 0);
  }
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv__lines,
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-node,
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-row,
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-report,
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-screen__notice { opacity: 0; }
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-device {
    opacity: 0;
    transform: translate3d(0, calc(16 * var(--u)), 0);
  }
  html.js-reveal [data-reveal="visual"]:not(.is-inview) .mv-row { transform: translate3d(0, calc(8 * var(--u)), 0); }

  .mv-i1 { transition-delay: 100ms !important; }
  .mv-i2 { transition-delay: 160ms !important; }
  .mv-i3 { transition-delay: 220ms !important; }
  .mv-i4 { transition-delay: 280ms !important; }
  .mv-i5 { transition-delay: 340ms !important; }
  .mv-device { transition-delay: 300ms !important; }
  .mv__lines { transition-delay: 600ms !important; }
  .mv-node { transition-delay: 700ms !important; }
  .mv-screen__notice { transition-delay: 1000ms !important; }
  .mv-row:nth-child(1) { transition-delay: 1100ms !important; }
  .mv-row:nth-child(2) { transition-delay: 1180ms !important; }
  .mv-row:nth-child(3) { transition-delay: 1260ms !important; }
  .mv-report { transition-delay: 1360ms !important; }
}

/* ---------- Service ---------- */
.p-service__list {
  display: grid;
  gap: clamp(64px, 9vw, 120px);
}
.p-service__item {
  display: grid;
  gap: var(--space-4);
}
.p-service__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-gray-deep);
}
.p-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-service__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.p-service__num {
  font-size: 13px;
  letter-spacing: .08em;
}
.p-service__en { color: var(--c-muted); font-weight: 500; }

.p-service__title {
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}
.p-service__text {
  margin-top: var(--space-2) !important;
  font-size: 15px;
  line-height: 2.1;
}
.p-service__related {
  margin-top: var(--space-3) !important;
  font-size: 14px;
}
.p-service__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
@media (max-width: 767px) {
  .p-service__more .c-btn { width: 100%; }
}
.p-service__note {
  margin-top: 0 !important;
  color: var(--c-muted);
  font-size: 12px;
}

@media (min-width: 960px) {
  .p-service__item {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: center;
  }
  /* 偶数番は写真を右に */
  .p-service__item:nth-child(even) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .p-service__item:nth-child(even) .p-service__media { order: 2; }
  .p-service__media { aspect-ratio: 3 / 2; }
  .p-service__body { max-width: 26em; }
  .p-service__item:nth-child(even) .p-service__body { justify-self: end; width: 100%; }
}

/* ---------- 写真まとめるくん ---------- */
.p-product {
  background: var(--c-gray);
}
.p-product__grid {
  display: grid;
  gap: var(--space-8);
}

.p-product__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-block: var(--space-2);
  border-block: 1px solid var(--c-line);
}
.p-product__logo {
  flex: none;
  width: 48px;
  height: 48px;
}
.p-product__category {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
}
.p-product__name {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
}

.p-product__text {
  margin-top: var(--space-4) !important;
  font-size: 15px;
  line-height: 2.1;
}

.p-product__points {
  margin-block: var(--space-4) var(--space-5) !important;
}
.p-product__points li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 15px;
  line-height: 1.7;
}
.p-product__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(10px + .55em);
  width: 11px;
  height: 6px;
  border-left: 1.5px solid #1F5FBF;   /* 写真まとめるくんのブランドカラー */
  border-bottom: 1.5px solid #1F5FBF;
  transform: rotate(-45deg);
}

/* 実際の画面（既存素材から切り出し） */
.p-product__visual {
  position: relative;
}
.p-product__screen {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(40px, 6vw, 72px) var(--space-4) 0;
  overflow: hidden;
  background: var(--c-white);
  border-top: 2px solid #1F5FBF;
}
.p-product__screen picture { width: min(72%, 320px); }
.p-product__screen img { width: 100%; }
.p-product__caption {
  margin-top: var(--space-1);
  color: var(--c-muted);
  font-size: 12px;
  text-align: right;
}

@media (min-width: 960px) {
  .p-product__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-12);
    align-items: center;
  }
}

/* ---------- Works ---------- */
.p-case {
  display: grid;
  gap: var(--space-6);
}

.p-case__meta {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}
.p-case__title {
  margin-top: var(--space-2) !important;
  color: var(--c-navy);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}

.p-case__story {
  margin-top: var(--space-5) !important;
  border-top: 1px solid var(--c-navy);
}
.p-case__story-row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}
.p-case__story-row dt {
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .1em;
}
.p-case__story-row dd {
  font-size: 15px;
  line-height: 1.9;
}

/* 結果パネル（ネイビー） */
.p-case__result {
  padding: var(--space-5) var(--space-3);
  background: var(--c-navy);
  color: var(--c-white);
}
.p-case__result-label {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  letter-spacing: .12em;
}

.p-case__chart {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4) !important;
}
.p-case__row dt {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.4;
}
.p-case__row dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.p-case__track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, .1);
}
.p-case__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .45);
  transform: scaleX(var(--ratio));
  transform-origin: left center;
}
.p-case__row--after .p-case__bar { background: var(--c-yellow); }
.p-case__row--after dt { color: var(--c-white); font-weight: 700; }
.p-case__value {
  flex: none;
  min-width: 4.5em;
  color: var(--c-white);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.p-case__row--after .p-case__value { font-weight: 700; }

.p-case__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.p-case__rate-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-case__rate-label:first-child {
  flex-basis: 100%;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.p-case__rate-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.p-case__rate-value strong {
  margin: 0 4px;
  font-family: var(--font-en);
  font-size: clamp(3.5rem, 2.6rem + 3.4vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-case__rate-unit {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
}

.p-case__note {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* 棒グラフは表示時に一度だけ伸びる */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .p-case__bar {
    transition: transform .7s var(--ease-out) .35s;
  }
  html.js-reveal .p-case__result:not(.is-inview) .p-case__bar {
    transform: scaleX(0);
  }
}

@media (min-width: 960px) {
  .p-case {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: stretch;
  }
  .p-case__result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
  }
  .p-case__note { text-align: right; }
}

/* ---------- News ---------- */
.p-news {
  border-top: 1px solid var(--c-line);
}
.p-news__more {
  margin-top: var(--space-3) !important;
  font-size: 14px;
}
.p-news__list {
  border-top: 1px solid var(--c-navy);
}
.p-news__item {
  border-bottom: 1px solid var(--c-line);
}
.p-news__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  text-decoration: none;
  transition: padding .4s var(--ease-out), background-color .4s var(--ease-out);
}
.p-news__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  grid-column: 1;
}
.p-news__date {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.p-news__cat {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--c-line-dark);
  color: var(--c-navy);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap;
}
.p-news__title {
  grid-column: 1;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.7;
}
.p-news__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--c-navy);
  transition: transform .4s var(--ease-out);
}
.p-news__link:hover {
  background: var(--c-gray);
}
.p-news__link:hover .p-news__title { color: var(--c-navy); }
.p-news__link:hover .p-news__arrow { transform: translateX(4px); }

.p-news__empty {
  padding-block: var(--space-4);
  border-top: 1px solid var(--c-navy);
  color: var(--c-muted);
}

@media (min-width: 768px) {
  .p-news__link {
    grid-template-columns: 220px minmax(0, 1fr) 16px;
    padding-block: 30px;
  }
  .p-news__link:hover { padding-inline: var(--space-3); }
  .p-news__title { grid-column: 2; }
  .p-news__arrow { grid-column: 3; grid-row: 1; }
}

/* ---------- Flow ---------- */
.p-flow {
  background: var(--c-gray);
}
.p-flow__list {
  display: grid;
  gap: var(--space-5);
}
.p-flow__item {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-dark);
}
.p-flow__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--c-navy);
}
.p-flow__item:first-child::before { background: var(--c-yellow); }

.p-flow__step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--c-navy);
  font-family: var(--font-en);
  line-height: 1;
}
.p-flow__step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.p-flow__step-num {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.p-flow__title {
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}
.p-flow__text {
  margin-top: var(--space-1) !important;
  font-size: 15px;
  line-height: 2;
}

@media (min-width: 960px) {
  .p-flow__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .p-flow__text { max-width: 20em; }
}

/* ---------- About ---------- */
.p-about__table {
  border-top: 1px solid var(--c-navy);
}
.p-about__row {
  display: grid;
  gap: 4px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
}
.p-about__row dt {
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .p-about__row {
    grid-template-columns: 9em minmax(0, 1fr);
    gap: var(--space-3);
  }
  .p-about__row dt { font-size: 15px; }
}

/* ---------- Contact ---------- */
.p-contact {
  padding-block: var(--section-y);
  background: var(--c-navy);
  color: var(--c-white);
}
.p-contact__inner {
  display: grid;
  gap: var(--space-6);
}
.p-contact__text {
  margin-bottom: var(--space-4) !important;
  color: rgba(255, 255, 255, .86);
  font-size: 16px;
  line-height: 2;
}
.p-contact__mail {
  margin-top: var(--space-3) !important;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}
.p-contact__mail a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, .4);
}
.p-contact__mail a:hover { text-decoration-color: var(--c-white); }
.p-contact a:focus-visible { outline-color: var(--c-yellow); }

@media (max-width: 767px) {
  .p-hero__actions .c-btn,
  .p-product .c-btn,
  .p-contact .c-btn { width: 100%; }
}

@media (min-width: 960px) {
  .p-contact__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: end;
  }
  .p-contact__body {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
}

/* ============================================================
   Service page（page-service.php）
   トップページの部品（c-heading / c-btn / p-head / p-contact）を共用。
   構成: ページ見出し → 分野インデックス → 4サービス → 進め方 → お問い合わせ
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
}
.c-breadcrumb li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--c-line-dark);
}
.c-breadcrumb a {
  text-decoration: none;
}
.c-breadcrumb a:hover {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Status label（実績・開発状況の区別） ---------- */
.c-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--c-navy);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  white-space: nowrap;
}
.c-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.c-status--done {
  background: var(--c-navy);
  color: var(--c-white);
}
.c-status--verify {
  background: var(--c-white);
  color: var(--c-navy);
}
.c-status--verify::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.c-status--dev {
  border-color: #D9B24A;
  background: #FBF1D3;
  color: #5C4708;
}

/* ---------- Page head ---------- */
.p-pagehead {
  padding-top: clamp(24px, 4vw, 48px);
}
.p-pagehead__grid {
  display: grid;
  gap: var(--space-6);
}
.p-pagehead .c-breadcrumb { margin-bottom: clamp(32px, 5vw, 64px); }

.p-pagehead__title {
  color: var(--c-navy);
  font-size: clamp(1.875rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
}
.p-pagehead__lead {
  max-width: 34em;
  margin-top: var(--space-5);
  font-size: 16px;
  line-height: 2.1;
}
.p-pagehead__lead p + p { margin-top: var(--space-2) !important; }
.p-pagehead__note {
  margin-top: var(--space-5) !important;
  padding-left: var(--space-3);
  border-left: 2px solid var(--c-yellow);
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}

/* 共通の進め方（4分野を1本の軸でつなぐ） */
.p-axis {
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-6) var(--gutter);
  background: #EEF2F7;
}
.p-axis__label {
  margin-bottom: var(--space-4) !important;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}
.p-axis__steps li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 0 var(--space-4) 32px;
}
.p-axis__steps li:last-child { padding-bottom: 0; }
.p-axis__steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--c-navy);
  border-radius: 50%;
  background: #EEF2F7;
}
.p-axis__steps li:last-child::before { background: var(--c-navy); }
.p-axis__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(.55em + 13px);
  bottom: 4px;
  width: 1px;
  background: var(--c-line-dark);
}
.p-axis__num {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-axis__text {
  color: var(--c-navy);
  font-size: clamp(18px, 1rem + .5vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
}
.p-axis__domains {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-5) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--c-line-dark);
}
.p-axis__domains li {
  padding: 4px 12px;
  background: var(--c-white);
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

@media (min-width: 960px) {
  .p-pagehead__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: end;
  }
  .p-axis {
    margin-inline: 0 calc((min(100cqw, var(--container) + var(--gutter) * 2) - 100cqw) / 2 - var(--gutter));
    padding: var(--space-8) clamp(32px, 4vw, 64px);
  }
}

/* ---------- 分野インデックス ---------- */
.p-svc-index {
  margin-top: clamp(56px, 7vw, 96px);
}
.p-svc-index__list {
  border-top: 1px solid var(--c-navy);
}
.p-svc-index__list li {
  border-bottom: 1px solid var(--c-line);
}
/* SP：1行に「番号・分野名・状況」 */
.p-svc-index__list a {
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 18px 0;
  color: var(--c-navy);
  text-decoration: none;
  transition: background-color .3s var(--ease);
}
.p-svc-index__list a:hover { background: var(--c-gray); }
.p-svc-index__list .c-status { grid-column: 2; justify-self: start; }
.p-svc-index__num {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
}
.p-svc-index__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}
.p-svc-index__legend {
  margin-top: var(--space-2) !important;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.8;
}

@media (min-width: 960px) {
  .p-svc-index__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .p-svc-index__list li { border-bottom: 0; }
  .p-svc-index__list li + li { border-left: 1px solid var(--c-line); }
  .p-svc-index__list a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    padding: 28px 24px 32px;
  }
  .p-svc-index__list li:first-child a { padding-left: 0; }
  .p-svc-index__name { font-size: 19px; }
}

/* ---------- 4サービス ---------- */
.p-svc-list {
  padding-block: var(--section-y);
}
.p-svc-item + .p-svc-item {
  margin-top: clamp(96px, 12vw, 168px);
}

.p-svc-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--space-3);
  margin-bottom: clamp(32px, 5vw, 64px);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-navy);
}
.p-svc-item__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  color: var(--c-navy);
}
.p-svc-item__num {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
}
.p-svc-item__name {
  font-size: clamp(18px, 1rem + .5vw, 22px);
  font-weight: 700;
  letter-spacing: .08em;
}
.p-svc-item__en {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.p-svc-item__grid {
  display: grid;
  gap: var(--space-5);
}
.p-svc-item__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-gray-deep);
}
.p-svc-item__media picture { display: contents; }
.p-svc-item__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.p-svc-item__title {
  color: var(--c-navy);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
}
.p-svc-item__text {
  margin-top: var(--space-3);
  font-size: 16px;
  line-height: 2.1;
}
.p-svc-item__text p + p { margin-top: var(--space-2) !important; }

/* 取り組み・機能のリスト */
.p-svc-block {
  margin-top: var(--space-5);
}
.p-svc-block__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}
.p-svc-block__sub {
  margin-top: var(--space-2) !important;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-svc-block__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid #D9B24A;
  background: #FBF1D3;
  color: #5C4708;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.p-svc-block__flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.p-svc-block--dev {
  padding: var(--space-3);
  background: #FBF8EE;
  border: 1px solid #EFE2BC;
}
.p-svc-block--dev .p-svc-block__title { border-bottom-color: #E3D3A3; }

.p-svc-points li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
  line-height: 1.7;
}
.p-svc-block--dev .p-svc-points li { border-bottom-color: #EFE2BC; }
.p-svc-points li:last-child { border-bottom: 0; }
.p-svc-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(14px + .55em);
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--c-navy);
  border-bottom: 1.5px solid var(--c-navy);
  transform: rotate(-45deg);
}
.p-svc-points__tag {
  display: inline-block;
  margin-left: 12px;
  padding: 1px 8px;
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: 1px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .p-svc-points--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .p-svc-points--2col li:nth-last-child(2) { border-bottom: 0; }
}

.p-svc-quote {
  margin-top: var(--space-5) !important;
  padding-left: var(--space-3);
  border-left: 2px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
}
.p-svc-note {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* 写真まとめるくん（簡潔な紹介） */
.p-svc-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--c-gray);
  border-top: 2px solid #1F5FBF; /* 写真まとめるくんのブランドカラー */
}
.p-svc-product__logo { width: 56px; height: 56px; }
.p-svc-product__kicker {
  color: var(--c-muted);
  font-size: 12px;
  letter-spacing: .06em;
}
.p-svc-product__name {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
}
.p-svc-product__text {
  margin-top: 4px !important;
  font-size: 14px;
  line-height: 1.8;
}
.p-svc-product__btn { grid-column: 1 / -1; justify-self: start; }

.p-svc-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (max-width: 767px) {
  .p-svc-product__btn,
  .p-svc-item__actions .c-btn { width: 100%; justify-self: stretch; }
}

@media (min-width: 960px) {
  .p-svc-item__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: start;
  }
  .p-svc-item--reverse .p-svc-item__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .p-svc-item--reverse .p-svc-item__media { order: 2; }
  /* 本文が長いため、写真はスクロールに合わせて留まる */
  .p-svc-item__media {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 進め方 ---------- */
.p-approach {
  background: var(--c-gray);
}
.p-approach__list {
  display: grid;
  gap: var(--space-5);
}
.p-approach__item {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-dark);
}
.p-approach__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--c-navy);
}
.p-approach__item:last-child::before { background: var(--c-yellow); }
.p-approach__step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--c-navy);
  font-family: var(--font-en);
  line-height: 1;
}
.p-approach__step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.p-approach__step-num {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.p-approach__title {
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}
.p-approach__text {
  margin-top: var(--space-1) !important;
  font-size: 15px;
  line-height: 2;
}

@media (min-width: 960px) {
  .p-approach__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
  /* ステップ間の小さな矢印 */
  .p-approach__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-8) / -2 - 4px);
    top: -5px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--c-line-dark);
    border-right: 1.5px solid var(--c-line-dark);
    background: var(--c-gray);
    transform: rotate(45deg);
  }
  .p-approach__text { max-width: 20em; }
}

/* ============================================================
   写真まとめるくん（page-shashin-matomerukun.php）
   himawari lab. 共通デザインを基準に、写真まとめるくんのブルーをアクセントとして使用
   ============================================================ */
.p-sm {
  --sm-blue: #1F5FBF;
  --sm-blue-pale: #EAF1FB;
}

/* ---------- 01 First view ---------- */
.p-sm-fv__grid {
  display: grid;
  gap: var(--space-6);
}
.p-sm-fv .c-breadcrumb { margin-bottom: clamp(28px, 4vw, 48px); }

.p-sm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3) !important;
}
.p-sm-brand img { width: 44px; height: 44px; }
.p-sm-brand__text { display: grid; gap: 2px; }
.p-sm-brand__name {
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
}
.p-sm-brand__desc {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
}

.p-sm-fv__title { font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
.p-sm-fv__lead {
  max-width: 32em;
  margin-top: var(--space-4);
  font-size: 16px;
  line-height: 2;
}
.p-sm-fv__lead p + p { margin-top: 12px !important; }
.p-sm-fv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.p-sm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: var(--space-4) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--c-line);
}
.p-sm-trust li {
  position: relative;
  padding-left: 16px;
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.p-sm-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--c-navy);
  border-radius: 50%;
}
.p-sm-trust li:first-child::before { background: var(--c-yellow); border-color: var(--c-yellow); }
.p-sm-trust a {
  text-decoration: underline;
  text-decoration-color: rgba(23, 43, 69, .3);
  text-underline-offset: 4px;
}
.p-sm-trust a:hover { text-decoration-color: var(--c-navy); }

/* ビジュアル：実際の画面＋整理後のフォルダ＋報告書PDF */
.p-sm-fv__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-6) var(--gutter) 0;
  overflow: hidden;
  background: #EEF2F7;
  min-height: 360px;
}
.p-sm-fv__screen {
  width: min(56%, 300px);
  position: relative;
  z-index: 1;
}
.p-sm-fv__screen img { width: 100%; height: auto; }

.p-sm-chip {
  position: absolute;
  z-index: 2;
  background: var(--c-white);
  border: 1px solid #DCE2EA;
  border-radius: 3px;
  box-shadow: 0 12px 28px -16px rgba(23, 43, 69, .35);
}
.p-sm-chip--folder {
  left: 6%;
  top: 22%;
  width: min(40%, 190px);
  padding: 12px 14px;
}
.p-sm-chip__title {
  margin-bottom: 8px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid #E3E8EF;
  color: var(--c-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.p-sm-chip--folder li {
  position: relative;
  padding: 3px 0 3px 18px;
  color: var(--c-text);
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1.5;
}
.p-sm-chip--folder li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 9px;
  border: 1.5px solid var(--sm-blue);
  border-radius: 1px;
  background: var(--sm-blue-pale);
}
.p-sm-chip--pdf {
  right: 6%;
  bottom: 18%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.p-sm-chip__pdf {
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  border: 1px solid #DCE2EA;
  border-top: 3px solid #C0473A;
  color: #C0473A;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
}

@media (min-width: 960px) {
  .p-sm-fv__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }
  .p-sm-fv__visual {
    margin-inline: 0 calc((min(100cqw, var(--container) + var(--gutter) * 2) - 100cqw) / 2 - var(--gutter));
    padding: var(--space-8) var(--space-6) 0;
    min-height: 560px;
  }
  .p-sm-fv__screen { width: min(62%, 300px); }
  .p-sm-chip--folder { left: 5%; top: 18%; }
  .p-sm-chip--pdf { right: 5%; bottom: 14%; }
}

/* ---------- 02 Problem ---------- */
.p-sm-checks {
  border-top: 1px solid var(--c-navy);
  counter-reset: none;
}
.p-sm-checks li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 44px;
  border-bottom: 1px solid var(--c-line);
}
.p-sm-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-3) + 4px);
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--c-navy);
  border-radius: 2px;
}
.p-sm-checks li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(var(--space-3) + 9px);
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  transform: rotate(-45deg);
}
.p-sm-checks__title {
  color: var(--c-navy);
  font-size: clamp(17px, 1rem + .3vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.p-sm-checks__text {
  margin-top: 4px !important;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- 03 What changes ---------- */
.p-sm-change { background: var(--c-gray); }
.p-sm-flow {
  display: grid;
  gap: var(--space-6);
}
.p-sm-flow__item {
  position: relative;
  display: flex;
  flex-direction: column;
}
.p-sm-flow__visual {
  display: grid;
  place-items: center;
  height: 200px;
  padding: var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.p-sm-flow__step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
.p-sm-flow__step span {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.p-sm-flow__compare {
  margin-top: var(--space-2) !important;
  border-top: 1px solid var(--c-line-dark);
}
.p-sm-flow__compare > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line);
}
.p-sm-flow__compare dt {
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .06em;
}
.p-sm-flow__compare dd {
  font-size: 14px;
  line-height: 1.85;
}
.p-sm-flow__compare .is-after dt { color: var(--sm-blue); font-weight: 700; }
.p-sm-flow__compare .is-after dd { color: var(--c-navy); font-weight: 500; }

/* 図：バラバラの写真 */
.p-sm-pile {
  position: relative;
  width: 200px;
  height: 140px;
}
.p-sm-pile__photo {
  position: absolute;
  width: 96px;
  padding: 4px 4px 0;
  background: var(--c-white);
  border: 1px solid #DCE2EA;
  box-shadow: 0 8px 18px -12px rgba(23, 43, 69, .35);
}
.p-sm-pile__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.p-sm-pile__photo span {
  display: block;
  padding: 3px 0 4px;
  color: #7A8796;
  font-family: var(--font-en);
  font-size: 9px;
  line-height: 1.2;
}
.p-sm-pile__photo--1 { left: 0;    top: 6px;  transform: rotate(-7deg); }
.p-sm-pile__photo--2 { left: 54px; top: 30px; transform: rotate(5deg); }
.p-sm-pile__photo--3 { left: 100px; top: 0;   transform: rotate(-3deg); }
.p-sm-pile__photo--4 { left: 70px; top: 62px; transform: rotate(8deg); }
.p-sm-pile__photo--2 img { object-position: 70% 40%; }
.p-sm-pile__photo--3 img { object-position: 20% 80%; }
.p-sm-pile__photo--4 img { object-position: 90% 10%; }

/* 図：整理されたフォルダ */
.p-sm-folders {
  display: grid;
  gap: 8px;
  width: min(100%, 220px);
}
.p-sm-folders li {
  position: relative;
  padding: 8px 12px 8px 36px;
  background: var(--sm-blue-pale);
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.p-sm-folders li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 10px;
  margin-top: -5px;
  border: 1.5px solid var(--sm-blue);
  border-radius: 1px;
}

/* 図：報告書 */
.p-sm-report {
  width: min(100%, 200px);
  padding: 12px;
  background: var(--c-white);
  border: 1px solid #DCE2EA;
  box-shadow: 0 10px 22px -14px rgba(23, 43, 69, .35);
}
.p-sm-report__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid #E3E8EF;
  color: var(--c-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.p-sm-report__pdf {
  padding: 1px 5px;
  background: #C0473A;
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 9px;
}
.p-sm-report__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.p-sm-report__grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.p-sm-report__grid i {
  display: block;
  height: 3px;
  margin-top: 4px;
  background: #E6EAF0;
}

@media (min-width: 960px) {
  .p-sm-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
  /* 工程をつなぐ矢印 */
  .p-sm-flow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-8) / -2 - 6px);
    top: 94px;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid var(--c-navy);
    border-right: 1.5px solid var(--c-navy);
    transform: rotate(45deg);
  }
}

/* ---------- 04 Video ---------- */
.p-sm-video__grid {
  display: grid;
  gap: var(--space-6);
}
.p-sm-video__lead {
  margin-top: var(--space-3) !important;
  font-size: 16px;
  line-height: 2;
}
.p-sm-video__action { margin-top: var(--space-5); }

.p-sm-video__media {
  justify-self: center;
  width: min(78vw, 320px);
}
.p-sm-video__frame {
  padding: 8px;
  background: var(--c-navy);
  border-radius: 22px;
  box-shadow: 0 28px 48px -28px rgba(23, 43, 69, .55);
}
.p-sm-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 15px;
  background: #0F1F33;
  object-fit: cover;
}
.p-sm-video__caption {
  margin-top: 12px;
  color: var(--c-muted);
  font-size: 12px;
  text-align: center;
  letter-spacing: .06em;
}

@media (min-width: 960px) {
  .p-sm-video__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: center;
  }
  .p-sm-video__media { width: 300px; }
}

/* ---------- 05 Before / After ---------- */
.p-sm-ba { border-top: 1px solid var(--c-line); }
.p-sm-ba__grid {
  display: grid;
  gap: var(--space-3);
}
.p-sm-ba__col {
  padding: var(--space-5) var(--space-4);
  background: var(--c-gray);
}
.p-sm-ba__col--after {
  background: var(--c-navy);
  color: var(--c-white);
}
.p-sm-ba__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.p-sm-ba__label span {
  font-family: var(--font-ja);
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
}
.p-sm-ba__col--after .p-sm-ba__label { color: var(--c-yellow); }
.p-sm-ba__col--after .p-sm-ba__label span { color: rgba(255, 255, 255, .75); }

.p-sm-ba__time {
  margin-top: var(--space-2) !important;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line-dark);
  color: var(--c-navy);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
}
.p-sm-ba__col--after .p-sm-ba__time {
  color: var(--c-white);
  border-bottom-color: rgba(255, 255, 255, .18);
}

.p-sm-ba__steps { margin-top: var(--space-3) !important; }
.p-sm-ba__steps li {
  position: relative;
  padding: 12px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.p-sm-ba__steps li + li { margin-top: 26px; }
.p-sm-ba__steps li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -19px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 1.5px solid var(--c-line-dark);
  border-bottom: 1.5px solid var(--c-line-dark);
  transform: rotate(45deg);
}
.p-sm-ba__col--after .p-sm-ba__steps li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: var(--c-white);
}
.p-sm-ba__col--after .p-sm-ba__steps li + li::before {
  border-color: var(--c-yellow);
}
.p-sm-ba__arrow { display: none; }

.p-sm-ba__note {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.8;
}

@media (min-width: 960px) {
  .p-sm-ba__grid {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .p-sm-ba__col { padding: var(--space-6) var(--space-5); }
  .p-sm-ba__arrow {
    display: block;
    position: relative;
  }
  .p-sm-ba__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -9px;
    border-top: 1.5px solid var(--c-navy);
    border-right: 1.5px solid var(--c-navy);
    transform: rotate(45deg);
  }
}

/* ---------- 06 Policy ---------- */
.p-sm-policy { background: var(--c-gray); }
.p-sm-policy__grid {
  display: grid;
  gap: var(--space-6);
}
.p-sm-policy__statement {
  margin-top: var(--space-4) !important;
  padding-left: var(--space-3);
  border-left: 2px solid var(--c-yellow);
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}
.p-sm-policy__list { border-top: 1px solid var(--c-navy); }
.p-sm-policy__list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line-dark);
}
.p-sm-policy__title {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.p-sm-policy__text {
  margin-top: 8px !important;
  font-size: 15px;
  line-height: 1.95;
}
@media (min-width: 960px) {
  .p-sm-policy__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-10);
    align-items: start;
  }
}

/* ---------- 07 Flow ---------- */
.p-sm-timeline {
  display: grid;
  gap: 0;
}
.p-sm-timeline li {
  position: relative;
  padding: 0 0 var(--space-5) 48px;
}
.p-sm-timeline li:last-child { padding-bottom: 0; }
.p-sm-timeline li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: -12px;
  width: 1px;
  background: var(--c-line-dark);
}
.p-sm-timeline li:last-child::before { display: none; }
.p-sm-timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--c-navy);
  border-radius: 50%;
  background: var(--c-white);
}
.p-sm-timeline li:last-child::after { background: var(--c-navy); }
.p-sm-timeline__num {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
}
.p-sm-timeline__title {
  margin-top: 4px !important;
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.p-sm-timeline__text {
  margin-top: 6px !important;
  font-size: 14px;
  line-height: 1.9;
}

.p-sm-usage {
  margin-top: clamp(48px, 6vw, 72px);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--sm-blue);
}
.p-sm-usage__title {
  margin-bottom: var(--space-3) !important;
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}
.p-sm-usage__list {
  display: grid;
  gap: 12px;
}
.p-sm-usage__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.7;
}
.p-sm-usage__list span {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--sm-blue-pale);
  color: var(--sm-blue);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
}

@media (min-width: 960px) {
  .p-sm-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .p-sm-timeline li { padding: 36px 0 0; }
  .p-sm-timeline li::before {
    left: 16px;
    right: calc(var(--space-4) * -1);
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .p-sm-timeline li::after { top: 0; }
  .p-sm-usage { padding: var(--space-5) var(--space-6); }
  .p-sm-usage__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* ---------- 08 経営革新計画 ---------- */
.p-sm-approval { background: var(--c-gray); }
.p-sm-approval__panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-navy);
}
.p-sm-approval__mark {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
}
.p-sm-approval__mark img { width: 100%; height: 100%; object-fit: contain; }
.p-sm-approval__mark-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--c-line-dark);
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.p-sm-approval__kicker {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.p-sm-approval__title {
  margin-top: 8px !important;
  color: var(--c-navy);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}
.p-sm-approval__text {
  margin-top: var(--space-2) !important;
  font-size: 15px;
  line-height: 2;
}
.p-sm-approval__info {
  margin-top: var(--space-4) !important;
  border-top: 1px solid var(--c-line);
}
.p-sm-approval__info > div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
}
.p-sm-approval__info dt {
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
}
.p-sm-approval__todo {
  color: #8A6A00;
  font-size: 13px;
  border-bottom: 1px dashed #D9B24A;
}
.p-sm-approval__note {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.8;
}
@media (min-width: 960px) {
  .p-sm-approval__panel {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-8);
  }
  .p-sm-approval__mark { width: 200px; height: 200px; }
  .p-sm-approval__panel--nomark { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 09 FAQ ---------- */
.p-sm-faq__list { border-top: 1px solid var(--c-navy); }
.p-sm-faq__item { border-bottom: 1px solid var(--c-line); }
.p-sm-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 40px 22px 0;
  position: relative;
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}
.p-sm-faq__q::-webkit-details-marker { display: none; }
.p-sm-faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--c-navy);
  border-bottom: 1.5px solid var(--c-navy);
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
}
.p-sm-faq__item[open] .p-sm-faq__q::after { transform: translateY(4px) rotate(-135deg); }
.p-sm-faq__q:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.p-sm-faq__q:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.p-sm-faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
}
.p-sm-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 24px;
}
.p-sm-faq__a .p-sm-faq__mark {
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
}
.p-sm-faq__a p {
  font-size: 15px;
  line-height: 2;
}

/* ============================================================
   実績（page-works.php）
   サービスページの部品（p-svc-item / p-svc-block / c-status）と
   トップの事例表（p-case__story）を共用
   ============================================================ */
.c-status--web {
  background: var(--c-gray);
  border-color: var(--c-line-dark);
  color: var(--c-navy);
}
.c-status--web::before { background: var(--c-navy); }

/* ---------- 実績サマリー ---------- */
.p-works-summary {
  margin-top: clamp(56px, 7vw, 96px);
}
.p-works-summary__title {
  margin-bottom: var(--space-2) !important;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}
.p-works-summary__list {
  display: grid;
  border-top: 1px solid var(--c-navy);
}
.p-works-summary__list li { border-bottom: 1px solid var(--c-line); }
.p-works-summary__list a {
  display: grid;
  gap: 6px;
  padding: var(--space-3) 0;
  color: var(--c-navy);
  text-decoration: none;
  transition: background-color .3s var(--ease);
}
.p-works-summary__list a:hover { background: var(--c-gray); }
.p-works-summary__domain {
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}
.p-works-summary__value {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}
.p-works-summary__value strong {
  font-size: clamp(20px, 1.05rem + .6vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
}
.p-works-summary__desc {
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.7;
}
.p-works-summary__note {
  margin-top: var(--space-2) !important;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .p-works-summary__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-works-summary__list li { border-bottom: 0; }
  .p-works-summary__list li + li { border-left: 1px solid var(--c-line); }
  .p-works-summary__list a { height: 100%; padding: var(--space-4) var(--space-3); }
  .p-works-summary__list li:first-child a { padding-left: 0; }
}

/* ---------- CASE ---------- */
.p-works-story {
  margin-top: var(--space-5) !important;
}
.p-works-story .p-case__story-row { grid-template-columns: 5em minmax(0, 1fr); }
.p-works-story__result dt,
.p-works-story__now dt { color: var(--c-navy); }
.p-works-story__result dd { font-weight: 500; color: var(--c-navy); }
.p-works-story__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--c-navy);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 結果の時間比較（控えめに） */
.p-works-time {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--c-muted);
  font-size: 14px;
  font-weight: 500;
}
.p-works-time__arrow {
  width: 28px;
  height: 1px;
  background: var(--c-line-dark);
  position: relative;
}
.p-works-time__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-line-dark);
  border-right: 1px solid var(--c-line-dark);
  transform: rotate(45deg);
}
.p-works-time__after {
  padding: 2px 10px;
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
}

/* 写真まとめるくんの画面 */
.p-works-case__screen {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--space-5) var(--space-4) 0;
  background: #EEF2F7;
}
.p-works-case__screen picture { display: block; width: min(70%, 300px); }
.p-works-case__screen img { height: auto !important; object-fit: contain; }

/* 進行中プロジェクトの表示 */
.p-works-ongoing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2) !important;
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}
.p-works-ongoing::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-navy);
  border-radius: 50%;
}

/* ---------- Web制作事例 ---------- */
.p-works-web {
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
.p-works-web__title {
  margin-bottom: var(--space-4) !important;
  color: var(--c-navy);
  font-size: clamp(18px, 1rem + .5vw, 22px);
  font-weight: 700;
  letter-spacing: .06em;
}
.p-works-web__list {
  display: grid;
  gap: var(--space-6);
}
.p-works-web__img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-line);
  background: var(--c-gray);
}
.p-works-web__img picture { display: contents; }
.p-works-web__img img { width: 100%; height: 100% !important; object-fit: cover; object-position: top; }
.p-works-web__meta { margin-top: var(--space-2) !important; }
.p-works-web__meta > div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 8px;
  padding-block: 8px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 1.7;
}
.p-works-web__meta dt { color: var(--c-muted); font-size: 13px; }
.p-works-web__scope { display: flex; flex-wrap: wrap; gap: 6px; }
.p-works-web__scope span {
  padding: 0 8px;
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 12px;
  line-height: 1.8;
}
.p-works-web__empty {
  padding: var(--space-4) var(--space-3);
  background: var(--c-gray);
  font-size: 15px;
  line-height: 1.9;
}
.p-works-web__slots {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed #D9B24A;
  color: #6B5310;
  font-size: 13px;
  line-height: 1.8;
}
@media (min-width: 640px) {
  .p-works-web__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .p-works-web__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 進め方（4ステップ） ---------- */
@media (min-width: 640px) and (max-width: 959px) {
  .p-approach__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}
@media (min-width: 960px) {
  .p-approach__list--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .p-approach__list--4 .p-approach__item:not(:last-child)::after {
    right: calc(var(--space-5) / -2 - 4px);
  }
}

/* ---------- CTA内の相談例 ---------- */
.p-works-voices {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-3) !important;
}
.p-works-voices li {
  padding: 10px 14px;
  border-left: 2px solid var(--c-yellow);
  background: rgba(255, 255, 255, .06);
  color: var(--c-white);
  font-size: 15px;
  line-height: 1.7;
}
.p-works .p-works-voices + .p-contact__text { margin-bottom: var(--space-4) !important; }
.p-works .p-contact__body > .p-contact__text:first-child { margin-bottom: var(--space-2) !important; }

/* ============================================================
   お問い合わせ（page-contact.php）＋フォーム部品 c-form
   Contact Form 7 の出力HTMLに見た目のみを適用（項目・送信処理は変更しない）
   ============================================================ */
.p-contact-page__main {
  padding-block: clamp(40px, 5vw, 64px) var(--section-y);
}
.p-contact-page__grid {
  display: grid;
  gap: var(--space-6);
}
.p-contact-page__lead {
  font-size: 16px;
  line-height: 2;
}
.p-contact-page__mail {
  margin-top: var(--space-4) !important;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--c-line);
}
.p-contact-page__mail dt {
  color: var(--c-muted);
  font-size: 13px;
  letter-spacing: .06em;
}
.p-contact-page__mail dd {
  margin-top: 4px !important;
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.p-contact-page__mail a {
  color: var(--c-navy);
  text-underline-offset: 5px;
  text-decoration-color: rgba(23, 43, 69, .35);
}
.p-contact-page__note {
  margin-top: var(--space-3) !important;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.8;
}
@media (min-width: 960px) {
  .p-contact-page__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: start;
  }
  .p-contact-page__info {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

/* ---------- Form ---------- */
.c-form {
  padding: var(--space-4) var(--space-3);
  background: var(--c-gray);
  border-top: 2px solid var(--c-navy);
}
@media (min-width: 768px) {
  .c-form { padding: var(--space-6) var(--space-6) var(--space-5); }
}
.c-form .wpcf7-form > p {
  margin: 0 0 var(--space-4);
}
.c-form .hidden-fields-container {
  margin: 0;
  padding: 0;
  border: 0;
}
.c-form label {
  position: relative;
  display: block;
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}
/* 必須項目の表示（CF7の aria-required を利用） */
.c-form label:has([aria-required="true"])::after {
  content: "必須";
  position: absolute;
  top: 1px;
  right: 0;
  padding: 1px 8px;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .08em;
}
.c-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form input[type="url"],
.c-form select,
.c-form textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #C3CBD6;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-ja);
  font-size: 16px; /* iOSで入力時に拡大されないよう16px以上 */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  box-shadow: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.c-form textarea {
  min-height: 200px;
  resize: vertical;
}
.c-form input:hover,
.c-form textarea:hover { border-color: var(--c-line-dark); }
.c-form input:focus,
.c-form textarea:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(23, 43, 69, .14);
}
.c-form input[aria-invalid="true"],
.c-form textarea[aria-invalid="true"] {
  border-color: #B4382C;
  background: #FFF8F7;
}

/* 送信ボタン（c-btn--navy と同じ見た目） */
.c-form .wpcf7-submit {
  display: block;
  width: 100%;
  min-height: 60px;
  margin-top: var(--space-2);
  padding: 0 36px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background-color .3s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.c-form .wpcf7-submit:hover { background: var(--c-navy-soft); }
.c-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}
.c-form .wpcf7-submit:disabled { opacity: .6; cursor: default; }
@media (min-width: 768px) {
  .c-form .wpcf7-submit { width: auto; min-width: 280px; }
}
.c-form .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.c-form .wpcf7-spinner { display: block; margin: 12px 0 0; }

/* エラー・送信結果 */
.c-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #B4382C;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}
.c-form .wpcf7-response-output {
  margin: var(--space-3) 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--c-line-dark) !important;
  background: var(--c-white);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.8;
}
.c-form .wpcf7-form.invalid .wpcf7-response-output,
.c-form .wpcf7-form.unaccepted .wpcf7-response-output,
.c-form .wpcf7-form.failed .wpcf7-response-output {
  border-color: #B4382C !important;
  color: #8E2A20;
}
.c-form .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--c-navy) !important;
  border-left-width: 3px !important;
  color: var(--c-navy);
  font-weight: 500;
}

/* トップ：実績一覧への導線 */
.p-works-more {
  margin-top: var(--space-6);
}
@media (max-width: 767px) {
  .p-works-more .c-btn { width: 100%; }
}

/* ヘッダー：お問い合わせページ表示中はボタン下端に黄色の線で現在位置を示す */
.l-header__cta[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--c-yellow);
}

/* 実績 CASE 02：画面キャプチャは画像の高さに合わせる（余白を作らない） */
.p-svc-item__media.p-works-case__screen {
  aspect-ratio: auto;
}
@media (min-width: 960px) {
  .p-svc-item__media.p-works-case__screen { padding: var(--space-8) var(--space-6) 0; }
}

/* ヘッダー（SP）：表示中のページ */
@media (max-width: 1023px) {
  .l-header__menu .current-menu-item > a {
    padding-left: 14px;
    box-shadow: inset 3px 0 0 var(--c-yellow);
    font-weight: 700;
  }
}

/* トップ：事業領域インデックス（小さいスマートフォン）
   2列のまま「ホームページ制作」が収まるよう、番号を上に置き文字の折り返しを許可する */
.p-hero__index-label { min-width: 0; }
@media (max-width: 479px) {
  .p-hero__index-list a,
  .p-hero__index-list li:nth-child(odd) a {
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
  }
  .p-hero__index-list li:nth-child(odd) a { padding-left: 0; }
  .p-hero__index-label { word-break: normal; overflow-wrap: anywhere; }
}

/* サービス：長い語（例「経営シミュレーションシステム」）が狭い画面で列幅を押し広げないようにする */
.p-svc-item__grid > * { min-width: 0; }
.p-svc-block__title { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .p-svc-block--dev { padding: var(--space-2); }
  .p-svc-block__title { word-break: normal; }
}

/* ============================================================
   写真まとめるくん：経営革新計画 承認バッジ
   画像（img/keiei-kakushin-badge.*）が無い間は同じ大きさの枠を表示
   ============================================================ */
.p-sm-badge {
  display: grid;
  place-items: center;
  flex: none;
}
.p-sm-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.p-sm-badge__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--c-line-dark);
  background: var(--c-white);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: center;
}
.p-sm-badge__empty small { font-size: 11px; font-weight: 400; }

/* ファーストビュー：小さなバッジ＋文言 */
.p-sm-trust__approval { padding-left: 0 !important; }
.p-sm-trust__approval::before { display: none; }
.p-sm-trust__approval a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.p-sm-badge--sm {
  width: 52px;
  height: 52px;
}
.p-sm-badge--sm .p-sm-badge__empty { font-size: 10px; letter-spacing: 0; }
.p-sm-trust { align-items: center; }

/* 承認セクション：大きなバッジ */
.p-sm-approval__mark.p-sm-badge {
  width: 160px;
  height: 160px;
}
@media (min-width: 960px) {
  .p-sm-approval__mark.p-sm-badge { width: 200px; height: 200px; }
}

/* ============================================================
   お知らせ（home.php / archive.php / single.php）
   一覧の行はトップページの p-news と共通（件数・カテゴリー欄は表示しない）
   ============================================================ */

/* ---------- 一覧：見出し ---------- */
.p-news-page__head {
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--c-line);
}
.p-news-page__heading {
  display: grid;
  gap: var(--space-3);
}
.p-news-page__lead {
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.9;
}
@media (min-width: 960px) {
  .p-news-page__heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-8);
  }
  .p-news-page__lead { padding-bottom: 10px; }
}

/* ---------- 一覧：本体（カテゴリー＋リスト） ---------- */
.p-news-page__main {
  padding-block: clamp(48px, 6vw, 88px) var(--section-y);
}

/* 件数・リスト */
.p-news-page__list .p-news__link { padding-block: var(--space-4); }
.p-news-page__list .p-news__title { font-size: 16px; font-weight: 500; }
@media (min-width: 768px) {
  .p-news-page__list .p-news__link {
    grid-template-columns: 220px minmax(0, 1fr) 16px;
    padding-block: 32px;
  }
  .p-news-page__list .p-news__link:hover { padding-inline: var(--space-3); }
}
.p-news-page__empty {
  padding: var(--space-6) var(--space-3);
  border-top: 1px solid var(--c-navy);
  background: var(--c-gray);
  color: var(--c-muted);
  text-align: center;
}

/* ページ送り */
.c-pagination { margin-top: var(--space-8); }
.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.c-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius);
  color: var(--c-navy);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.c-pagination .page-numbers.current {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}
.c-pagination a.page-numbers:hover { border-color: var(--c-navy); }
.c-pagination .page-numbers.dots { border: 0; min-width: auto; }
.c-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 詳細 ---------- */
/* 見出しはグレー帯で本文と分ける */
.p-post__head {
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--c-gray);
  border-bottom: 1px solid var(--c-line);
}
.p-post__head .c-breadcrumb { margin-bottom: clamp(32px, 4vw, 48px); }
.p-post__head .c-breadcrumb li:last-child {
  overflow: hidden;
  max-width: 18em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-post__head-inner {
  max-width: 760px;
  margin-inline: auto;
}
.p-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.p-post__date {
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
}
.p-post__meta .p-news__cat {
  background: var(--c-white);
  text-decoration: none;
}
.p-post__title {
  margin-top: var(--space-3) !important;
  color: var(--c-navy);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
}

/* 本文 */
.p-post__main {
  padding-block: clamp(48px, 6vw, 88px) var(--section-y);
}
.p-post__container { max-width: calc(760px + var(--gutter) * 2); }
.p-post__thumb { margin-bottom: clamp(40px, 5vw, 56px) !important; }
/* アイキャッチ：元画像より大きく引き伸ばさない（小さなロゴ・マークがぼやけないように）
   大きな写真も高さを抑えて中央に配置 */
.p-post__thumb {
  display: flex;
  justify-content: center;
}
.p-post__thumb img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(420px, 60vh);
  object-fit: contain;
}

/* 前後のお知らせ */
.p-post__nav {
  display: grid;
  gap: 12px;
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-navy);
}
.p-post__nav a {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.p-post__nav a:hover { border-color: var(--c-navy); background: var(--c-gray); }
.p-post__nav-label {
  color: var(--c-muted);
  font-size: 12px;
  letter-spacing: .08em;
}
.p-post__nav-title {
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.p-post__nav-next { text-align: right; }
@media (min-width: 768px) {
  .p-post__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (max-width: 767px) {
  .p-post__nav-next { text-align: left; }
  .p-post__nav-prev:empty,
  .p-post__nav-next:empty { display: none; }
}
.p-post__back {
  margin-top: var(--space-6) !important;
  text-align: center;
}
@media (max-width: 767px) {
  .p-post__back .c-btn { width: 100%; }
}

/* ---------- 本文（ブロックエディタの出力） ---------- */
.c-prose {
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}
.c-prose > * + * { margin-top: 1.6em !important; }
@media (min-width: 768px) {
  .c-prose { font-size: 17px; }
}
.c-prose h2 {
  margin-top: 2.4em !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line-dark);
  color: var(--c-navy);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.c-prose h3 {
  margin-top: 2em !important;
  padding-left: 14px;
  border-left: 3px solid var(--c-yellow);
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
.c-prose h4 { color: var(--c-navy); font-size: 16px; font-weight: 700; }
.c-prose ul,
.c-prose ol { padding-left: 1.5em !important; }
.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }
.c-prose li + li { margin-top: .4em; }
.c-prose a {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c-prose img { height: auto; }
.c-prose figure { margin-inline: 0; }
.c-prose figcaption { margin-top: 8px; color: var(--c-muted); font-size: 13px; text-align: center; }
.c-prose blockquote {
  margin-inline: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-line-dark);
  background: var(--c-gray);
}
.c-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.c-prose .wp-block-table { overflow-x: auto; }
.c-prose th,
.c-prose td {
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.c-prose th { background: var(--c-gray); color: var(--c-navy); }
.c-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius);
  background: var(--c-navy);
  color: var(--c-white);
  text-decoration: none;
}

/* お知らせ詳細：本文の下・タイトルの上に余白を追加 */
.p-post__head-inner {
  padding-top: clamp(16px, 2.5vw, 32px);
}
.p-post__title {
  margin-top: clamp(20px, 2.5vw, 32px) !important;
}
.p-post__body {
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* お知らせ一覧：カテゴリー欄・件数を外したため、一覧を読みやすい幅で中央に */
.p-news-page__container { max-width: calc(960px + var(--gutter) * 2); }

/* お知らせ詳細：本文下の余白を追加したため、前後リンクの上の余白を詰める */
.p-post__nav { margin-top: 0; }