/* =========================================================
   Design tokens — palette, type scale and spacing follow the
   approved Figma (PC 1728 / SP 440). Values are authored at a
   1920px base (1rem = 16px) and scale with the viewport.
   ========================================================= */
:root {
  --navy: #1e2677;
  --navy-rgb: 30, 38, 119;
  --navy-2-rgb: 12, 18, 79;
  --blue-rgb: 47, 60, 183;
  --cyan-rgb: 137, 219, 255;
  --navy-2: #0c124f;
  --blue: #2f3cb7;
  --cyan: #89dbff;
  --sky: #e4f3ff;
  --sky-2: #c6dbff;
  --blue-2: #4357e3;
  --orange: #ee8a18;
  --orange-dark: #cd720b;
  --orange-light: #ffb637;
  --ink: #404044;
  --muted: #7a7a81;
  --placeholder: #cccccc;
  --light: #f7f7f7;
  --pale: #f7f9fc;
  --pale-2: #e0e7f1;
  --line: #e0e7f1;
  --line-2: #cccccc;
  --white: #ffffff;
  --grad-text: linear-gradient(62deg, #1e2677 15.03%, #89dbff 84.97%);
  --grad-brand: linear-gradient(62deg, #1e2677 15.03%, #2f3cb7 84.97%);
  --grad-brand-light: linear-gradient(62deg, #1e2677 15.03%, #2f3cb7 84.97%);
  --grad-footer: linear-gradient(90deg, #151c5d 0%, #080b2c 100%);
  --grad-orange: linear-gradient(90deg, #dc7805 0%, #ee8a18 50%, #ffb637 100%);
  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --radius-sm: 0.5rem;
  --radius-max: 62.5rem;
  --transit: all 0.4s ease-out;
  --shadow: 0 0 2.5rem 0 rgba(var(--navy-2-rgb), 0.1);
  --font-jp: "Noto Sans JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Outfit", "Montserrat", sans-serif;
  --font-en-text: "Montserrat", "Outfit", sans-serif;
  --font-en-display: "Oswald", "Outfit", sans-serif;
  --font-jp-serif: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* 2026-10-14: 読みやすさを優先し、明朝の見出しもサイト共通の Noto Sans JP に統一（変数名は互換のため維持） */
  --pdg-lg: 11.25rem;
  --pdg-md: 8.75rem;
  --pdg-sm: 6.25rem;
  --loop-h: 20.5rem;
  --inner: 100rem;
  --inner-sm: 67.5rem;
  --inner-xs: 45rem;
  --fs-display-lg: 10rem;
  --fs-display-md: 7rem;
  --fs-display-sm: 4.5rem;
  --fs-h1: 4rem;
  --fs-h2: 3rem;
  --fs-h3: 2.5rem;
  --fs-h4: 2rem;
  --fs-h5: max(22px, 1.5rem);
  --fs-h6: max(18px, 1.25rem);
  --fs-lg: max(16px, 1.125rem);
  --fs-md: max(14px, 1rem);
  --fs-sm: max(12px, 0.875rem);
  --header-h: max(64px, 6rem);
  --mark-a: var(--navy);
  --mark-b: var(--orange);
  --icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 11h12.17l-5.59-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z'/></svg>");
  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.4 5 8 6.4l5.6 5.6L8 17.6 9.4 19l7-7z'/></svg>");
  --icon-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/></svg>");
}

@media (max-width: 1080px) {
  :root { --header-h: max(56px, 5.1428571429rem); }
}
@media (max-width: 767px) {
  :root {
    --pdg-lg: 5.7142857143rem;
    --pdg-md: 4.2857142857rem;
    --pdg-sm: 2.8571428571rem;
    --loop-h: 11.7142857143rem;
    --radius-lg: 1.1428571429rem;
    --fs-display-lg: 5rem;
    --fs-display-md: 3.5rem;
    --fs-display-sm: 2.5rem;
    --fs-h1: 2.2857142857rem;
    --fs-h2: 2rem;
    --fs-h3: 1.7142857143rem;
    --fs-h4: 1.4285714286rem;
    --fs-h5: 1.2857142857rem;
    --fs-h6: 1.1428571429rem;
    --fs-lg: 1.1428571429rem;
    --fs-md: 1rem;
    --fs-sm: 0.8571428571rem;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { font-size: clamp(10.5px, 0.8333333333vw, 1rem); scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: hidden; }
@media (max-width: 767px) { html { font-size: min(3.5897435897vw, 0.875rem); scroll-padding-top: 4.5rem; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-jp);
  font-size: clamp(15.9375px, 0.9375vw, 1.125rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
}
@media (max-width: 767px) { body { font-size: 1rem; -webkit-text-size-adjust: none; } }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.font-en { font-family: var(--font-en); letter-spacing: 0; }
.font-en-text { font-family: var(--font-en-text); letter-spacing: 0.03em; }
.skip-link { position: fixed; z-index: 10000; left: 16px; top: -60px; background: white; color: var(--navy); padding: 12px 18px; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.skip-link:focus { top: 16px; }
@media (min-width: 768px) { .pc-none { display: none !important; } }
@media (max-width: 767px) { .sp-none { display: none !important; } }
.pc-none-inline { display: none; }
@media (max-width: 767px) { .pc-none-inline { display: inline; } }

/* ---------- Containers & spacing ---------- */
.inner { width: 90%; max-width: var(--inner); margin-inline: auto; }
.inner-sm { max-width: var(--inner-sm); }
.inner-xs { max-width: var(--inner-xs); }
@media (max-width: 767px) { .inner { width: 87.6923076923%; max-width: 87.6923076923%; } }
.section_pdg { padding-block: var(--pdg-md); }
.section_pdg-sm { padding-block: var(--pdg-sm); }
.section_pdg-lg { padding-block: var(--pdg-lg); }
.lps_sec { position: relative; z-index: 1; }

/* ---------- Arrows & buttons ---------- */
.arrow { display: flex; justify-content: center; align-items: center; flex: none; border-radius: var(--radius-max); transition: var(--transit); }
.arrow::before { content: ""; display: block; width: 1rem; aspect-ratio: 1; mask-image: var(--icon-arrow); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: currentColor; transition: var(--transit); }
.arrow-simple::before { mask-image: var(--icon-chevron); }
.btn { display: flex; }
.btn > a, .btn > button {
  position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 1.5rem;
  width: fit-content; min-width: min(15rem, 100%); padding: 0.75rem 1rem 0.75rem 2.5rem; border: 0; border-radius: var(--radius-max);
  color: var(--white); background-color: var(--navy); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.08em; line-height: 1.6;
  text-decoration: none; cursor: pointer; transition: var(--transit);
}
.btn > a > span:not(.arrow), .btn > button > span:not(.arrow) { display: block; flex: 1; text-align: center; }
.btn .arrow { width: 2.5rem; height: 2.5rem; color: var(--white); background-color: var(--navy-2); }
.btn > a:hover, .btn > button:hover { background-color: var(--blue); }
.btn-cta > a, .btn-cta > button { background-image: var(--grad-orange); background-size: 200% 100%; background-position-x: 0; }
.btn-cta > a:hover, .btn-cta > button:hover { background-position-x: 99%; }
.btn-cta .arrow { background-color: var(--orange-dark); }
.btn-lg > a, .btn-lg > button { min-width: min(22.5rem, 100%); }
.btn-wh > a { color: var(--navy); background-color: var(--white); }
.btn-wh .arrow { color: var(--white); background-color: var(--navy); }
.btn-wh > a:hover { background-color: var(--sky); }
@media (max-width: 767px) {
  .btn > a, .btn > button { gap: 0.8571428571rem; min-width: 100%; padding: 0.8571428571rem 1.1428571429rem 0.8571428571rem 2.8571428571rem; font-size: var(--fs-lg); }
  .btn .arrow { width: 2.8571428571rem; height: 2.8571428571rem; }
  .btn-sp-lft > a { justify-content: space-between; text-align: left; }
}
/* Legacy button classes used by sub pages */
.button { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 1.5rem; min-width: min(15rem, 100%); min-height: 3.5rem; padding: 0.75rem 1.25rem 0.75rem 2.5rem; border: 0; border-radius: var(--radius-max); color: var(--white); background-color: var(--navy); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.08em; line-height: 1.6; cursor: pointer; transition: var(--transit); }
.button:hover { background-color: var(--blue); }
.button svg { flex: none; }
.button-primary { background-color: var(--navy); }
.button-dark { margin-top: 2.75rem; background-color: var(--navy-2); }
.text-link { display: inline-flex; align-items: center; gap: 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid currentColor; color: var(--navy); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Headings ---------- */
.ttl-01, .ttl-02, .ttl-03 { position: relative; margin: 0; font-weight: 500; }
.ttl-01 { font-family: var(--font-en); font-size: var(--fs-display-sm); line-height: 1; letter-spacing: 0; }
.ttl-01 > span:not(.subtitle) { display: block; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); }
.ttl-01 .subtitle:not(:first-child) { margin-top: 1.2em; }
.ttl-01 .subtitle:first-child { margin-bottom: 1.2em; }
.ttl-02 { font-family: var(--font-jp); font-size: var(--fs-h2); line-height: 1.4; letter-spacing: 0.03em; }
.ttl-03 { font-family: var(--font-jp); font-size: var(--fs-h5); line-height: 1.4; letter-spacing: 0.03em; }
.subtitle { position: relative; display: block; width: fit-content; font-family: var(--font-jp); }
.subtitle-ic { padding-left: 2rem; color: var(--navy); font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; letter-spacing: 0.08em; }
.subtitle-ic::before { content: ""; position: absolute; top: calc((1lh - 1rem) / 2); left: 0; width: 1rem; height: 1rem; background-image: linear-gradient(to right, var(--navy-2) 50%, var(--orange) 50%); }
.subtitle-ic-lgt { color: var(--white); }
.subtitle-ic-lgt::before { background-image: linear-gradient(to right, var(--orange) 50%, var(--cyan) 50%); }
.subtitle-md { color: var(--navy); font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; text-transform: uppercase; }
.subtitle-gr { color: transparent !important; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); }
@media (max-width: 767px) { .subtitle-ic { padding-left: 1.5714285714rem; } }
.ttl-shine span { display: block; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: radial-gradient(circle 34rem, var(--cyan), var(--white)); background-repeat: no-repeat; background-position: 100%; background-size: 400%; animation: txt_shine 16s ease-out infinite; }
.ttl-shine span:nth-child(2) { animation-delay: 2s; }
.ttl-shine span:nth-child(3) { animation-delay: 4s; }
.ttl-shine span:nth-child(4) { animation-delay: 6s; }
.ttl-shine-dark span { background-image: radial-gradient(circle 34rem, var(--cyan), var(--navy-2)); }
@keyframes txt_shine { 0% { background-position: 100%; } 100% { background-position: 0%; } }

/* ---------- Marquee loops ---------- */
.loop { display: flex; width: 100vw; overflow: hidden; white-space: nowrap; }
.loop .loop-slide { display: flex; justify-content: center; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.loop .loop-slide:first-child { animation: loop_1st 96s -48s linear infinite; }
.loop .loop-slide:last-child { animation: loop_2nd 96s linear infinite; }
.loop-rgt { transform: scaleX(-1); }
.loop-rgt .loop-slide { flex-direction: row-reverse; }
.loop-rgt .loop-slide > * { transform: scaleX(-1); }
.loop-en { font-family: var(--font-en); font-size: var(--fs-display-lg); font-weight: 400; line-height: 1.1; }
.loop-en .loop-slide { padding-inline: 0.75rem; }
.loop-en li { display: flex; align-items: center; gap: 1.5rem; }
.loop-en span { display: block; flex: 1; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); letter-spacing: 0; }
.loop-en img { display: block; width: 11.125rem; min-width: 11.125rem; height: auto; aspect-ratio: 178 / 122; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 767px) { .loop-en .loop-slide { padding-inline: 0.4285714286rem; } }
@media (min-width: 768px) {
  .loop-y { flex-direction: column; width: auto; height: 100%; }
  .loop-y .loop-slide { flex-direction: column; }
  .loop-y .loop-slide:first-child { animation: loop_y_1st 96s -48s linear infinite; }
  .loop-y .loop-slide:last-child { animation: loop_y_2nd 96s linear infinite; }
  .loop-y.loop-rgt { transform: scaleY(-1); }
  .loop-y.loop-rgt .loop-slide { flex-direction: column-reverse; }
  .loop-y.loop-rgt .loop-slide > * { transform: scaleY(-1); }
}
@keyframes loop_1st { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes loop_2nd { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }
@keyframes loop_y_1st { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } }
@keyframes loop_y_2nd { 0% { transform: translateY(0); } 100% { transform: translateY(-200%); } }

/* Sections that start with a marquee: the marquee overlaps the previous
   section and the background fades in underneath it. */
.has_loop { position: relative; z-index: 1; margin-top: calc(var(--loop-h) * -1); padding-top: calc(var(--loop-h) + 14.75rem); }
.has_loop::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--loop-bg, var(--pale-2)); mask-image: linear-gradient(to bottom, rgba(0,0,0,0), #000 var(--loop-h), #000); }
.has_loop > .lps_sec--loops { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; }
.before-loop { padding-bottom: calc(var(--pdg-md) + var(--loop-h)) !important; }
@media (max-width: 767px) { .has_loop { padding-top: calc(var(--loop-h) + 8.4285714286rem); } }
.has_loop-flat { margin-top: 0; }
.has_loop-flat::before { mask-image: none; }

/* Decorative ring that hangs below a section */
.has_ring { position: relative; z-index: 1; }
.has_ring::before { content: ""; position: absolute; left: 0; bottom: -34.3125rem; z-index: -1; width: 31.125rem; aspect-ratio: 498 / 998; background: url(../img/ring01.svg) no-repeat center / contain; pointer-events: none; }
@media (max-width: 767px) { .has_ring::before { width: 13.0714285714rem; bottom: -14.4rem; } }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; width: clamp(9rem, 10vw, 11rem); padding: 0; background-color: transparent; transition: opacity 0.3s ease-out; }
.logo img { display: block; width: 100%; height: auto; }
.logo:hover { opacity: 0.72; }
@media (max-width: 1080px) { .logo { width: 10.5rem; } }

/* ---------- Header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 9000; color: var(--navy); background-color: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: var(--transit); }
.header--inner { height: 100%; padding-left: 3.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.header--logo { position: relative; z-index: 9999; display: block; }
.header-wht .logo { background-color: transparent; box-shadow: none; }
/* 参考: pegasus-group.com。通常は透過、ホバー／フォーカス／メニュー展開中だけ薄い白を敷く */
.header { transition: background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out; }
/* スクロール後は薄い白、ホバー／フォーカス／メニュー展開中はもう少し濃い白 */
.header-scrolled { background-color: rgba(255,255,255,.82); border-bottom-color: rgba(var(--navy-2-rgb),.08); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); }
.header:hover, .header:focus-within, .header.is-open { background-color: rgba(255,255,255,.94); border-bottom-color: rgba(var(--navy-2-rgb),.08); box-shadow: 0 0.5rem 2.25rem rgba(var(--navy-2-rgb),.07); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); }
.logo img { transition: filter 0.3s ease-out; }
/* 透過のまま濃色セクションに重なっている時だけ、ロゴと文字を白にする */
.header-wht:not(.header-scrolled):not(:hover):not(:focus-within):not(.is-open) .logo img { filter: brightness(0) invert(1); }
.header-wht:not(.header-scrolled):not(:hover):not(:focus-within):not(.is-open) .gnav--link { color: var(--white); }
.gnav_btn { display: none; }
.gnav { position: relative; display: flex; justify-content: flex-end; align-items: center; align-self: stretch; height: 100%; margin-left: auto; padding-inline: 0.5rem; background-color: transparent; transition: var(--transit); }
.gnav--menu { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.gnav--menu > li { height: 100%; }
.gnav--link { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; padding-inline: clamp(0.75rem, 1.15vw, 1.4rem); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.055em; white-space: nowrap; color: var(--ink); transition: color 0.2s ease-out; }
.gnav--link::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 0.25rem; background: var(--grad-orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease-out; }
.gnav--link > span { display: flex; align-items: center; gap: 0.5rem; }
.has-children > .gnav--link > span::after { content: ""; display: block; width: 1.1428571429rem; aspect-ratio: 1; mask-image: var(--icon-plus); mask-size: contain; mask-repeat: no-repeat; background-color: currentColor; }
.gnav--menu > li:hover > .gnav--link, .gnav--menu > li:focus-within > .gnav--link, .gnav--menu > li.is-current > .gnav--link { color: var(--navy); }
.gnav--menu > li:hover > .gnav--link::before, .gnav--menu > li:focus-within > .gnav--link::before { transform: scaleX(1); }
.gnav_sub_toggle { display: none; }
.head_sub_nav--wrap { position: absolute; top: 100%; left: 50%; z-index: 100; width: max(100%, min(60rem, calc(100vw - 8rem))); padding: 1.5rem 2.5rem 2.5rem; transform: translate(-50%, 0.5rem); border-top: 1px solid var(--pale-2); border-radius: 0 0 1rem 1rem; background-color: rgba(255,255,255,.98); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); box-shadow: 0 1.25rem 2.5rem rgba(var(--navy-2-rgb),.12); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s; pointer-events: none; }
.gnav--menu > li:hover > .head_sub_nav--wrap, .gnav--menu > li:focus-within > .head_sub_nav--wrap { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.head_sub_nav--inner { display: flex; gap: 2.5rem; }
.head_sub_nav--inner > p { display: flex; flex-direction: column; gap: 0.75rem; min-width: 15rem; margin: 0; padding-right: 2.5rem; border-right: 1px solid var(--pale-2); }
.head_sub_nav--inner > p .en { font-family: var(--font-en); font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: 0; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); text-transform: capitalize; }
.head_sub_nav--inner > p .jp { color: var(--navy); font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; }
.head_sub_nav { flex: 1; display: grid; grid-template-columns: repeat(2, max-content); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.head_sub_nav a { display: block; padding: 0.5rem 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.6; color: var(--ink); white-space: nowrap; transition: var(--transit); }
.head_sub_nav a:hover { color: var(--navy); padding-left: 0.5rem; }
.header--cta { align-self: stretch; display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.header--cta .btn, .header--cta .btn > a { height: 100%; }
.header--cta .btn > a { min-width: 13rem; padding: 0.75rem 1.25rem 0.75rem 2rem; border-radius: 0; font-size: max(14px, 1rem); font-weight: 700; }
.header--cta .btn .arrow { width: 2.5rem; height: 2.5rem; background-color: rgba(var(--navy-2-rgb),.32); }
.gnav--cta { display: none; margin: 0; padding: 0; list-style: none; }
.gnav--cta .btn > a { min-width: 0; padding: 0.75rem 0.9rem 0.75rem 2.25rem; }
.gnav--cta .btn .arrow { width: 2.25rem; height: 2.25rem; }
.gnav_btm { display: none; }
@media (max-width: 1080px) {
  .header--inner { padding-inline: 1.7142857143rem var(--header-h); }
  .gnav_btn { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; width: var(--header-h); height: var(--header-h); z-index: 9999; border: 0; background: var(--navy); cursor: pointer; }
  .gnav_btn--lines { position: relative; width: 2.2857142857rem; height: 1.1428571429rem; }
  .gnav_btn--lines span { position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--white); transition: var(--transit); }
  .gnav_btn--lines span:nth-of-type(1) { top: 0; }
  .gnav_btn--lines span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
  .gnav_btn--lines span:nth-of-type(3) { bottom: 0; }
  .gnav_btn.is-active .gnav_btn--lines span:nth-of-type(1) { transform: translateY(0.5rem) rotate(-35deg); }
  .gnav_btn.is-active .gnav_btn--lines span:nth-of-type(2) { opacity: 0; }
  .gnav_btn.is-active .gnav_btn--lines span:nth-of-type(3) { transform: translateY(-0.5rem) rotate(35deg); }
  .header-wht:not(.header-scrolled):not(.is-open) .gnav_btn--lines span { background-color: var(--white); }
  .gnav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: block; height: 100%; padding: 4.5rem 1.7142857143rem 2rem; border-radius: 0; background-color: var(--white); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; pointer-events: none; overflow: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .gnav.is-active { opacity: 1; pointer-events: auto; }
  body:has(.gnav.is-active) { overflow: hidden; }
  .gnav--menu { flex-direction: column; height: auto; margin-bottom: 1.1428571429rem; }
  .gnav--menu > li { position: relative; height: auto; width: 100%; }
  .gnav--link { display: block; height: auto; padding: 0.8571428571rem 0; font-size: max(16px, 1.1428571429rem); color: var(--ink); }
  .gnav--link::before { display: none; }
  .has-children > .gnav--link > span::after { display: none; }
  .gnav_sub_toggle { display: block; position: absolute; top: 0; right: -0.75rem; width: 3.5714285714rem; height: 3.5714285714rem; border: 0; background: transparent; color: var(--navy); cursor: pointer; }
  .gnav_sub_toggle::before, .gnav_sub_toggle::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.75rem; height: 1px; border-bottom: 1px solid; transition: var(--transit); }
  .gnav_sub_toggle::after { transform: rotate(90deg); }
  .is-open > .gnav_sub_toggle::after { transform: rotate(0); }
  .head_sub_nav--wrap { position: static; display: none; width: auto; padding: 0 0 0.5rem; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .head_sub_nav { grid-template-columns: 1fr; }
  .head_sub_nav a { white-space: normal; }
  .is-open > .head_sub_nav--wrap { display: block; }
  .head_sub_nav--inner > p { display: none; }
  .head_sub_nav { grid-template-columns: 1fr; padding-left: 1.1428571429rem; border-left: 1px solid var(--pale-2); }
  .head_sub_nav a { padding: 0.5rem 0; font-size: max(14px, 1rem); }
  .header--cta { display: none; }
  .gnav--cta { display: flex; justify-content: center; }
  .gnav--cta .btn { width: 100%; }
  .gnav--cta .btn > a { width: 100%; min-width: 100%; padding: 0.8571428571rem 1.1428571429rem 0.8571428571rem 2.8571428571rem; }
  .gnav_btm { display: flex; flex-direction: column; gap: 1.1428571429rem; padding-top: 1.1428571429rem; border-top: 1px solid var(--line-2); }
  .gnav_btm .fnav--menu2 { justify-content: center; gap: 0.5714285714rem 1.7142857143rem; }
  .gnav_btm .fnav--menu2 .fnav--link { color: var(--muted); }
  .gnav_btm .copyright { text-align: center; color: var(--placeholder); font-family: var(--font-en-text); font-size: max(12px, 0.8571428571rem); }
}

/* ---------- Page top ---------- */
.pagetop { position: fixed; bottom: 0; right: 2rem; z-index: 8000; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; height: 6rem; padding-inline: 2rem; border-radius: var(--radius-max) var(--radius-max) 0 0; background-color: rgba(255,255,255,.75); box-shadow: var(--shadow); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); color: var(--navy); font-family: var(--font-en-text); font-size: max(12px, 0.9375rem); font-weight: 700; line-height: 1; letter-spacing: 0.03em; transform: translateY(6rem); transition: var(--transit); }
.pagetop::before { content: ""; display: block; width: 1rem; height: 1rem; mask-image: var(--icon-arrow); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--navy); transform: rotate(-90deg); }
.pagetop.active { transform: translateY(0); }
.pagetop:hover { opacity: 0.7; }
@media (max-width: 767px) { .pagetop { right: 1.5714285714rem; gap: 0.4285714286rem; height: 4.7857142857rem; padding-inline: 1.5714285714rem; transform: translateY(4.7857142857rem); } .pagetop::before { width: 0.7857142857rem; height: 0.7857142857rem; } }

/* ---------- Contact band (shared) ---------- */
.cta { position: relative; z-index: 1; margin-top: -7.5rem; padding-block: 7.5rem; overflow: hidden; color: var(--light); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 7.5rem 7.5rem 0 0; background-image: var(--grad-brand); }
.cta::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 66.5rem; aspect-ratio: 1064 / 720; background: url(../img/cta-circle.svg) no-repeat / contain; }
.cta > .inner { display: flex; flex-direction: column; gap: 4rem; }
.cta--cont { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; }
.cta--ttl { margin: 0; font-family: var(--font-en); font-size: var(--fs-display-md); font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--white); }
.cta--ttl .subtitle-ic { margin-bottom: 1rem; padding-left: 2.5rem; font-size: var(--fs-h4); }
.cta--ttl .subtitle-ic::before { width: 1.5rem; height: 1.5rem; top: calc((1lh - 1.5rem) / 2); }
.cta--txtarea { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; width: 49.25rem; max-width: 55%; }
.cta--txtarea p { margin: 0; font-size: max(15px, 1.25rem); line-height: 2; letter-spacing: 0.03em; }
.cta--cols { display: flex; justify-content: center; border-top: 1px solid rgba(255,255,255,.25); }
.cta--cols > * { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 4rem 3rem; }
.cta--cols > * + * { border-left: 1px solid rgba(255,255,255,.25); }
.cta--areas { gap: 1.5rem; }
.cta--areas p { margin: 0; font-size: max(15px, 1.25rem); line-height: 1.6; letter-spacing: 0.03em; }
.cta--areas strong { display: block; font-family: var(--font-en-text); font-size: max(20px, 1.875rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; }
.cta--areas strong .keep { white-space: nowrap; }
.cta--areas strong small { display: block; font-family: var(--font-jp); font-size: var(--fs-md); font-weight: 400; margin-top: 0.5rem; }
.cta--contact { gap: 2rem; align-items: center; }
.cta--contact p { margin: 0; font-size: max(18px, 2rem); line-height: 1.4; letter-spacing: 0.03em; text-align: center; }
.cta--contact .btn > a { min-width: min(22.5rem, 100%); }
.section:has(+ .cta) { padding-bottom: calc(clamp(94px, 11vw, 160px) + 7.5rem); }
.cta-spacer:has(+ .cta) { padding-bottom: calc(var(--pdg-sm) + 7.5rem); }
@media (max-width: 767px) {
  .cta { margin-top: -4.2857142857rem; padding-block: 4.2857142857rem; }
  .cta::before { border-radius: 2.8571428571rem 2.8571428571rem 0 0; }
  .cta::after { width: 27.8571428571rem; }
  .cta > .inner { gap: 2.2857142857rem; }
  .cta--cont { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cta--ttl .subtitle-ic { margin-bottom: 1.1428571429rem; padding-left: 2.2857142857rem; font-size: var(--fs-h5); }
  .cta--ttl .subtitle-ic::before { width: 1.1428571429rem; height: 1.1428571429rem; top: calc((1lh - 1.1428571429rem) / 2); }
  .cta--txtarea { width: 100%; max-width: none; }
  .cta--txtarea p { font-size: 1rem; }
  .cta--cols { flex-direction: column; }
  .cta--cols > * { padding: 1.7142857143rem 0; }
  .cta--cols > * + * { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }
  .cta--areas strong { font-size: 1.5714285714rem; }
  .cta--contact { align-items: flex-start; }
  .cta--contact p { font-size: 1.2857142857rem; text-align: left; }
  .section:has(+ .cta) { padding-bottom: calc(88px + 4.2857142857rem); }
  .cta-spacer:has(+ .cta) { padding-bottom: calc(var(--pdg-md) + 4.2857142857rem); }
}

/* ---------- Footer ---------- */
.footer { padding-block: 10rem; background-image: var(--grad-footer); color: var(--white); }
.footer > .inner { display: flex; flex-direction: column; gap: 7.5rem; }
.footer--ttl { margin: 0; font-size: 4rem; font-weight: 500; line-height: 1.28; letter-spacing: 0.09em; }
.footer--cont > *:not(:last-child) { padding-bottom: 3.5rem; margin-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.footer_top { display: flex; justify-content: space-between; gap: 5rem; }
.footer--info { display: flex; flex-direction: column; gap: 3rem; width: 18rem; flex: none; }
.footer--logo .logo { width: 13rem; padding: 0.75rem 1rem; background-color: rgba(255,255,255,.96); box-shadow: 0 0.75rem 2rem rgba(0,0,0,.12); }
.footer--logo .logo:hover { opacity: 0.7; }
.footer--address { margin: 0; font-style: normal; font-size: var(--fs-sm); line-height: 1.7; color: var(--placeholder); }
.footer--address .keep { white-space: nowrap; }
.fnav--menu { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.fnav--menu > li { position: relative; display: flex; flex-direction: column; gap: 0.875rem; }
.fnav--menu > li > .fnav--link { display: block; color: var(--sky-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; }
.fnav--menu > li > a.fnav--link:hover { opacity: 0.7; }
.fnav--menu .sub-menu { margin: 0; padding: 0; list-style: none; font-size: max(13px, 0.875rem); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; }
.fnav--menu .sub-menu:has(> li:nth-child(8)) { column-count: 2; column-gap: 2rem; }
.fnav--menu .sub-menu > li { break-inside: avoid; }
.fnav--menu .sub-menu .fnav--link { display: block; padding-block: 0.125rem; margin-inline-start: 1.5rem; color: var(--light); }
.fnav--menu .sub-menu .fnav--link::before { content: ""; float: inline-start; inline-size: 1rem; margin-block: 0.5lh; margin-inline-start: -1.5rem; border-bottom: 1px solid var(--muted); }
.fnav--menu .sub-menu .fnav--link:hover { opacity: 0.7; }
.fnav_sub_toggle { display: none; }
.footer_md { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.footer_md--cont { display: flex; flex-direction: column; gap: 1.5rem; }
.fnav--menu2 { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.fnav--menu2 .fnav--link { display: block; color: var(--placeholder); font-size: max(13px, 0.875rem); line-height: 1.6; letter-spacing: 0.03em; }
.footer small { font-size: max(12px, 0.75rem); }
.fnav--menu2 .fnav--link:hover { color: var(--light); }
.footer_md .btn > a { width: 20rem; }
.footer_btm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--placeholder); font-family: var(--font-en-text); font-size: var(--fs-sm); letter-spacing: 0.03em; }
.footer_btm p { margin: 0; }
@media (max-width: 767px) {
  .footer { padding-block: 4.2857142857rem; }
  .footer > .inner { gap: 4.2857142857rem; }
  .footer--ttl { font-size: 2.2857142857rem; }
  .footer--cont > *:not(:last-child) { padding-bottom: 1.4285714286rem; margin-bottom: 1.4285714286rem; }
  .footer_top { flex-direction: column; gap: 2.8571428571rem; margin-bottom: 0 !important; border-bottom: 0 !important; }
  .footer--info { width: auto; gap: 2.2857142857rem; }
  .fnav--menu { flex-direction: column; gap: 0; }
  .fnav--menu > li { gap: 0; border-top: 1px solid rgba(255,255,255,.25); }
  .fnav--menu > li:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
  .fnav--menu > li > .fnav--link { padding-block: 0.8571428571rem; color: var(--white); font-size: var(--fs-lg); }
  .fnav_sub_toggle { display: block; position: absolute; top: 0; right: -0.75rem; width: 3.5714285714rem; height: 3.5714285714rem; border: 0; background: transparent; color: var(--white); cursor: pointer; }
  .fnav_sub_toggle::before, .fnav_sub_toggle::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.75rem; height: 1px; border-bottom: 1px solid; transition: var(--transit); }
  .fnav_sub_toggle::after { transform: rotate(90deg); }
  .is-open > .fnav_sub_toggle::after { transform: rotate(0); }
  .fnav--menu .sub-menu { display: none; padding-bottom: 1.1428571429rem; font-size: var(--fs-md); }
  .fnav--menu > li.is-open .sub-menu { display: block; }
  .fnav--menu .sub-menu:has(> li:nth-child(8)) { column-count: 1; }
  .fnav--menu .sub-menu .fnav--link { margin-inline-start: 1.7142857143rem; padding-block: 0.4285714286rem; }
  .fnav--menu .sub-menu .fnav--link::before { inline-size: 1.1428571429rem; margin-inline-start: -1.7142857143rem; }
  .footer_md { flex-direction: column; align-items: stretch; }
  .fnav--menu2 { justify-content: center; gap: 0.5714285714rem 1.7142857143rem; }
  .footer_md .btn > a { width: 100%; }
  .footer_btm { flex-direction: column; text-align: center; }
}

/* ---------- Sub-page shared blocks (light page title, breadcrumbs, section helpers) ---------- */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 4rem) 0 5rem; background-color: var(--pale); color: var(--ink); }
.page-hero-grid { display: none; }
.page-hero-ring { position: absolute; right: -6rem; top: -12rem; width: 31.125rem; aspect-ratio: 498 / 998; background: url(../img/ring01.svg) no-repeat center / contain; transform: rotate(180deg); opacity: 0.8; pointer-events: none; }
.page-hero-inner { position: relative; z-index: 1; width: 90%; max-width: var(--inner); margin-inline: auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 4rem; }
.page-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.page-hero h1 { margin: 0; font-size: var(--fs-h1); font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); }
.page-hero-inner > p:last-child { margin: 0 0 0.5rem; max-width: 36rem; color: var(--ink); font-size: var(--fs-md); line-height: 2; }
.hero-content, .page-hero-inner { animation: page-enter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.breadcrumbs { padding: 1rem 0; border-bottom: 1px solid var(--line); background: white; }
.breadcrumbs ol { width: 90%; max-width: var(--inner); margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; color: #5f5f66; font-size: var(--fs-sm); letter-spacing: 0.06em; }
.breadcrumbs a { display: inline-block; padding: 0.3rem 0; }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs li:last-child { color: var(--ink); }
.section { padding: clamp(94px, 11vw, 160px) max(24px, calc((100vw - 1220px) / 2)); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; }
.section-number { margin: 0; color: var(--muted); font: 500 12px/1 var(--font-en-text); }
.eyebrow { position: relative; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; color: var(--navy); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.08em; }
.eyebrow span { width: 1rem; height: 1rem; background-image: linear-gradient(to right, var(--navy-2) 50%, var(--orange) 50%); }
.eyebrow.light { color: var(--white); }
.eyebrow.light span { background-image: linear-gradient(to right, var(--orange) 50%, var(--cyan) 50%); }
.business-list { border-top: 1px solid var(--line-2); }
.business-row { display: grid; grid-template-columns: 4.5rem 1.05fr 1fr 3.5rem; align-items: center; gap: 1.75rem; min-height: 9.5rem; border-bottom: 1px solid var(--line-2); transition: var(--transit); }
.business-row:hover { padding-inline: 1.25rem; background: var(--pale); }
.business-row.featured { border-left: 3px solid var(--navy); }
.business-number { font: 600 var(--fs-md)/1 var(--font-en-text); color: var(--orange); }
.business-name small { display: block; margin-bottom: 0.75rem; color: var(--navy); font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.business-name strong { font-size: var(--fs-h5); font-weight: 500; }
.business-text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.9; }
.circle-arrow { width: 3.5rem; height: 3.5rem; color: white; background: var(--navy-2); border-radius: 50%; display: grid; place-items: center; transition: var(--transit); }
.business-row:hover .circle-arrow { transform: translateX(5px); }
.business-list-light .business-row { color: var(--ink); }
@media (max-width: 767px) {
  .page-hero { padding: calc(var(--header-h) + 2.5rem) 0 3rem; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .page-hero-ring { right: -10rem; top: -6rem; width: 18rem; }
  .section { padding: 88px 22px; }
  .section-heading { margin-bottom: 2rem; }
  .business-row { grid-template-columns: 2.5rem 1fr 3rem; gap: 1rem; min-height: 8rem; }
  .business-text { display: none; }
  .circle-arrow { width: 3rem; height: 3rem; }
}
.desktop-only { display: inline; }
@media (max-width: 767px) { .desktop-only { display: none; } }

/* =========================================================
   Sub pages (component styles)
   ========================================================= */
/* Home */

.marketing-services { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { position: relative; min-height: 340px; padding: 34px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; transition: transform .25s, box-shadow .25s; }
a.service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(11,31,51,.08); }
.service-card-head { display: flex; align-items: center; justify-content: space-between; }
.service-card-head > span { color: var(--blue); font: 700 12px/1 monospace; }
.service-card-head small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.service-card h3 { margin: 72px 0 20px; font-size: 22px; line-height: 1.55; }
.service-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.service-card-link { position: absolute; left: 30px; bottom: 32px; display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 12px; font-weight: 700; }
.cycle-section { background: var(--navy); color: white; }
.cycle-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; align-items: end; }
.cycle-intro h2 { margin: 0; font-size: clamp(34px, 3.78vw, 53px); line-height: 1.35; letter-spacing: -.045em; }
.cycle-intro p { margin: 0; max-width: 460px; color: rgba(255,255,255,.78); line-height: 2; font-size: 14px; }
.cycle { position: relative; width: min(760px, 66vw); aspect-ratio: 1; margin: 90px auto 50px; }
.cycle-ring { position: absolute; inset: 17%; display: grid; place-items: center; border: 1px solid rgba(81,214,245,.5); border-radius: 50%; box-shadow: 0 0 0 76px rgba(81,214,245,.06), 0 0 0 77px rgba(81,214,245,.18), 0 0 0 152px rgba(81,214,245,.025), 0 0 0 153px rgba(81,214,245,.1); }
.cycle-ring::before { content: ''; position: absolute; inset: 7%; border: 1px dashed rgba(81,214,245,.33); border-radius: 50%; }
.cycle-ring span { text-align: center; color: var(--cyan); font: 700 12px/1.65 monospace; letter-spacing: .18em; }
.cycle-item { position: absolute; width: 150px; min-height: 100px; padding: 16px; background: var(--navy-2); border-top: 2px solid var(--blue); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.cycle-item small { display: block; color: var(--cyan); font: 700 11px/1 monospace; }
.cycle-item strong { display: block; margin: 12px 0 7px; font-size: 14px; letter-spacing: .04em; }
.cycle-item span { color: rgba(255,255,255,.78); font-size: 12px; }
.cycle-item-1 { left: 50%; top: 0; transform: translateX(-50%); }
.cycle-item-2 { right: 0; top: 29%; }
.cycle-item-3 { right: 14%; bottom: 2%; }
.cycle-item-4 { left: 14%; bottom: 2%; }
.cycle-item-5 { left: 0; top: 29%; }
.cycle-mobile { display: none; }

.values-intro, .case-heading, .services-title, .process-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 64px; }
.values-intro h2, .case-heading h2, .services-title h2, .process-heading h2 { margin: 0; font-size: clamp(33px, 3.44vw, 48px); letter-spacing: -.045em; }
.values-intro p, .case-heading p, .services-title p, .process-heading p { margin: 0; max-width: 480px; color: var(--muted); font-size: 14px; line-height: 2; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.value-card { min-height: 300px; padding: 34px 30px; border-right: 1px solid var(--line); }
.value-card:last-child { border-right: 0; }
.value-card > span { color: var(--blue); font: 700 12px/1 monospace; }
.value-card h3 { margin: 78px 0 22px; font-size: 20px; line-height: 1.6; }
.value-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.case-section { background: var(--pale-2); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-placeholder { aspect-ratio: 1.45; padding: 22px; background: linear-gradient(145deg, var(--navy), #0a63b8); display: flex; align-items: end; }
.case-placeholder::before { content: ''; position: absolute; }
.case-placeholder span { color: var(--cyan); font: 700 11px/1 monospace; letter-spacing: .16em; }
.case-card > p { margin: 20px 0 10px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.case-card h3 { margin: 0; font-size: 16px; }

.company-en { margin: 0 0 38px; color: #e8eff7; font-size: clamp(58px, 7vw, 92px); line-height: .92; font-weight: 800; letter-spacing: -.07em; }
.company-teaser h2, .profile-grid h2 { margin: 0 0 48px; font-size: clamp(32px, 3.44vw, 46px); line-height: 1.45; letter-spacing: -.04em; }
.company-profile { margin: 0; border-top: 1px solid var(--line); }
.company-profile > div { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.company-profile dt { color: var(--muted); font-size: 12px; }
.company-profile dd { margin: 0; font-size: 14px; font-weight: 600; }

/* About and business pages */
.statement { padding-top: 16px; }
.statement > p { color: var(--blue); font: 700 12px/1 monospace; letter-spacing: .18em; }
.statement h2 { margin: 34px 0 70px; font-size: clamp(39px, 5.16vw, 71px); line-height: 1.25; letter-spacing: -.055em; }
.statement-body { width: 54%; margin-left: auto; }
.statement-body p { color: var(--muted); font-size: 15px; line-height: 2.2; }
.mvv-section, .marketing-menu, .detail-features, .representative-section, .onestop-flow { background: var(--navy); color: white; }
.mvv-list article { display: grid; grid-template-columns: 150px 1.2fr .8fr; gap: 40px; align-items: start; padding: 48px 0; border-top: 1px solid rgba(255,255,255,.17); }
.mvv-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.mvv-list small { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.mvv-list h2 { margin: 0; font-size: clamp(27px, 3vw, 42px); line-height: 1.5; letter-spacing: -.035em; }
.mvv-list p { margin: 6px 0 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 2; }
.message-grid, .representative-grid { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.message-portrait { margin: 0; max-width: 400px; overflow: hidden; border-radius: 22px; background: var(--pale); }
.message-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 760; object-fit: cover; }
.message-grid h2 { margin: 0 0 42px; font-size: clamp(30px, 3.18vw, 43px); line-height: 1.5; letter-spacing: -.04em; }
.message-grid > div:last-child > p { color: var(--muted); line-height: 2.1; font-size: 14px; }
.message-grid .signature { margin-top: 38px; color: var(--ink) !important; }
.signature strong { margin-left: 16px; font-size: 20px; }
.business-overview-title, .detail-lead-grid, .profile-grid, .fit-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; margin-bottom: 82px; }
.business-overview-title h2, .detail-lead-grid h2, .fit-grid h2 { margin: 0; font-size: clamp(33px, 3.61vw, 50px); line-height: 1.4; letter-spacing: -.045em; }
.business-overview-title p, .detail-lead-grid > p, .detail-lead-grid > div p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 2.1; }
.services-title { color: white; }
.services-title p { color: rgba(255,255,255,.78); }
.marketing-menu .marketing-services { border-color: rgba(255,255,255,.18); }
.marketing-menu .service-card { background: transparent; border-color: rgba(255,255,255,.18); }
.marketing-menu .service-card > p { color: rgba(255,255,255,.78); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.feature-card { min-height: 360px; padding: 42px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.feature-card > small { color: var(--cyan); font: 700 12px/1 monospace; }
.feature-card h2 { margin: 60px 0 20px; font-size: 27px; }
.feature-card > p { color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.9; }
.feature-card ul, .flow-list ul { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.feature-card li, .flow-list li { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); font-size: 12px; }
.flow-list { counter-reset: cycle; }
.flow-list article { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; padding: 42px 0; border-top: 1px solid rgba(255,255,255,.18); }
.flow-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.flow-list article:not(:last-child)::after { content: '↓'; position: absolute; left: 34px; bottom: -13px; z-index: 2; color: var(--cyan); background: var(--navy); padding: 3px 10px; }
.flow-list article > div { display: grid; grid-template-columns: 60px 1fr; align-items: center; }
.flow-list small { color: var(--cyan); font: 700 12px/1 monospace; }
.flow-list strong { font-size: 24px; }
.flow-list article > div span { grid-column: 2; margin-top: 8px; color: rgba(255,255,255,.75); font-size: 12px; }
.fit-grid { margin-bottom: 0; }
.fit-grid ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fit-grid li { position: relative; padding: 22px 10px 22px 34px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.fit-grid li::before { content: ''; position: absolute; left: 4px; top: 29px; width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }

/* Company, contact and information */
.profile-grid { margin-bottom: 0; }
.representative-grid { color: white; }
.representative-grid small { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.representative-grid h2 { margin: 16px 0 34px; font-size: 46px; }
.representative-grid p { max-width: 580px; color: rgba(255,255,255,.8); font-size: 14px; line-height: 2.1; }
.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 10vw; align-items: start; }
.contact-layout > div:first-child h2 { margin: 0 0 34px; font-size: clamp(32px, 3.44vw, 46px); line-height: 1.4; letter-spacing: -.04em; }
.contact-layout > div:first-child > p { color: var(--muted); font-size: 14px; line-height: 2; }
.contact-layout dl { margin: 54px 0 0; }
.contact-layout dl div { padding: 20px 0; border-top: 1px solid var(--line); }
.contact-layout dl div:last-child { border-bottom: 1px solid var(--line); }
.contact-layout dt { margin-bottom: 9px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.contact-layout dd { margin: 0; font-size: 13px; }
.contact-form { padding: clamp(30px, 4vw, 56px); background: var(--pale-2); }
.form-row { margin-bottom: 28px; }
.form-row label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.form-row label span { margin-left: 8px; color: var(--orange); font-size: 11px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; background: white; padding: 15px 16px; color: var(--ink); font-size: 14px; outline: none; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,138,210,.12); }
.form-row textarea { resize: vertical; }
.privacy-check { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 34px 0; color: var(--muted); font-size: 12px; }
.privacy-check a { color: var(--blue); text-decoration: underline; }
.contact-form > .button { width: 100%; border: 0; cursor: pointer; }
.form-success { min-height: 420px; padding: 60px 36px; background: var(--pale-2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.form-success > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; }
.form-success h2 { margin: 28px 0 12px; }
.form-success p { color: var(--muted); }
.form-success button { margin-top: 20px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--blue); cursor: pointer; }
.privacy-section { max-width: 920px; margin: 0 auto; }
.privacy-lead { margin: 0 0 68px; font-size: 15px; line-height: 2.1; }
.privacy-section article { padding: 32px 0; border-top: 1px solid var(--line); }
.privacy-section article h2 { margin: 0 0 16px; font-size: 18px; }
.privacy-section article p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 2; }
.privacy-date { margin-top: 42px; text-align: right; color: var(--muted); font-size: 12px; }
.coming-soon { text-align: center; min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.coming-soon > p { color: var(--blue); font: 800 12px/1 monospace; letter-spacing: .2em; }
.coming-soon h2 { margin: 30px 0 20px; font-size: clamp(34px, 4.3vw, 55px); line-height: 1.4; letter-spacing: -.045em; }
.coming-soon span { color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .marketing-services, .values-grid, .case-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 300px; }
  .value-card { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .value-card h3 { margin-top: 48px; }
  .case-grid { gap: 46px; }
  .case-placeholder { aspect-ratio: 2; }
  .feature-grid, .sitemap-detail-points .feature-grid { grid-template-columns: 1fr; }
}

/* Sitemap hierarchy */
.solution-catalog-list article > a { color: var(--cyan); font: 700 11px/1.5 monospace; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 4px; }
.section-directory { background: var(--pale-2); }
.section-directory.is-dark { background: var(--navy); color: white; }
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.directory-grid > a { min-height: 152px; display: grid; grid-template-columns: 38px 1fr auto; gap: 22px; align-items: start; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s, color .2s; }
.directory-grid > a:nth-child(even) { border-right: 0; }
.directory-grid > a:hover { background: var(--blue); color: white; }
.directory-grid small { color: var(--blue); font: 700 12px/1 monospace; }
.directory-grid > a:hover small { color: var(--cyan); }
.directory-grid h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.45; }
.directory-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.directory-grid > a:hover p { color: rgba(255,255,255,.85); }
.sitemap-detail-points .feature-grid { grid-template-columns: repeat(3, 1fr); }
.sitemap-detail-points .feature-card { min-height: 260px; }
.sitemap-detail-points .feature-card h2 { margin-top: 42px; }
.sibling-navigation > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sibling-navigation a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.sibling-navigation a:nth-child(odd) { padding-right: 28px; border-right: 1px solid var(--line); }
.sibling-navigation a:nth-child(even) { padding-left: 28px; }

@media (max-width: 900px) {
  .directory-grid, .sibling-navigation > div:last-child { grid-template-columns: 1fr; }
  .directory-grid > a, .directory-grid > a:nth-child(even) { border-right: 0; }
  .sibling-navigation a:nth-child(odd), .sibling-navigation a:nth-child(even) { padding-inline: 0; border-right: 0; }
}

@media (max-width: 900px) {
  .focus-copy, .cycle-intro, .company-teaser-grid, .statement-body, .message-grid, .representative-grid, .business-overview-title, .detail-lead-grid, .profile-grid, .fit-grid, .contact-layout { grid-template-columns: 1fr; width: 100%; gap: 42px; }
  .message-portrait { max-width: 260px; border-radius: 16px; }

  .marketing-services { margin-top: 54px; }
  .cycle { display: none; }
  .cycle-mobile { display: block; margin-top: 56px; border-top: 1px solid rgba(255,255,255,.18); }
  .cycle-mobile article { position: relative; display: grid; grid-template-columns: 48px 1fr; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .cycle-mobile article:not(:last-child)::after { content: '↓'; position: absolute; left: 13px; bottom: -9px; z-index: 1; color: var(--cyan); background: var(--navy); }
  .cycle-mobile small { color: var(--cyan); font: 700 12px/1 monospace; }
  .cycle-mobile strong { display: block; font-size: 17px; }
  .cycle-mobile span { display: block; margin-top: 7px; color: rgba(255,255,255,.75); font-size: 12px; }

  .values-intro, .case-heading, .services-title, .process-heading { align-items: start; flex-direction: column; gap: 24px; margin-bottom: 44px; }
  .company-en { font-size: 56px; }
  .company-profile > div { grid-template-columns: 92px 1fr; gap: 18px; }
  .statement h2 { margin-bottom: 48px; font-size: 43px; }
  .mvv-list article { grid-template-columns: 1fr; gap: 20px; padding: 38px 0; }
  .mvv-list h2 { font-size: 29px; }
  .message-grid h2 { font-size: 34px; }
  .business-overview-title, .detail-lead-grid { margin-bottom: 54px; }

  .feature-card { min-height: auto; padding: 34px 24px; }
  .feature-card h2 { margin-top: 42px; }
  .flow-list article { grid-template-columns: 1fr; gap: 24px; }
  .flow-list article > div { grid-template-columns: 46px 1fr; }
  .contact-form { padding: 30px 20px; }
}

/* Extended navigation */

/* Breadcrumbs and shared editorial systems */

.split-statement { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; }
.split-statement h2 { margin: 0; font-size: clamp(33px, 3.61vw, 50px); line-height: 1.45; letter-spacing: -.045em; }
.split-statement p { margin: 0 0 24px; color: var(--muted); line-height: 2.1; font-size: 14px; }
.challenge-section { background: var(--pale-2); }
.editorial-list { border-top: 1px solid var(--line); }
.editorial-list article { display: grid; grid-template-columns: 70px .75fr 1.25fr; gap: 34px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line); }
.editorial-list small { color: var(--blue); font: 700 12px/1 monospace; }
.editorial-list h3 { margin: 0; font-size: 21px; }
.editorial-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.marketing-proposition, .support-flow, .solution-catalog, .development-areas, .why-three { background: var(--navy); color: white; }
.proposition-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }
.display-word { margin: 0; color: rgba(var(--cyan-rgb),.18); font-family: var(--font-en); font-size: clamp(48px, 6.2vw, 96px); line-height: .9; font-weight: 700; letter-spacing: -.04em; word-break: keep-all; overflow-wrap: normal; }
.proposition-grid h2 { margin: 0 0 30px; font-size: clamp(32px, 3.61vw, 50px); line-height: 1.45; letter-spacing: -.045em; }
.proposition-grid > div > p { margin: 0 0 35px; color: rgba(255,255,255,.8); font-size: 14px; line-height: 2; }
.solutions-index-head, .flow-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; margin-bottom: 64px; }
.solutions-index-head h2, .flow-heading h2 { margin: 0; font-size: clamp(33px, 3.44vw, 48px); line-height: 1.45; letter-spacing: -.045em; }
.solutions-index-head p { color: var(--muted); line-height: 2; font-size: 14px; }
.solutions-lines { border-top: 1px solid var(--line); }
.solutions-lines article { display: grid; grid-template-columns: 55px .85fr 1.15fr 150px; gap: 28px; align-items: center; min-height: 125px; border-bottom: 1px solid var(--line); }
.solutions-lines article > small { color: var(--blue); font: 700 12px/1 monospace; }
.solutions-lines strong { color: var(--blue); font-size: 11px; letter-spacing: .13em; }
.solutions-lines h3 { margin: 9px 0 0; font-size: 18px; }
.solutions-lines article > p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.solutions-lines article > a { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; font-weight: 700; }
.solutions-lines article > a:hover { color: var(--navy); }
.strength-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; }
.strength-grid > h2 { margin: 0; font-size: clamp(33px, 3.44vw, 47px); line-height: 1.45; letter-spacing: -.045em; }
.strength-grid article { display: grid; grid-template-columns: 48px 1fr; padding: 28px 0; border-top: 1px solid var(--line); }
.strength-grid article:last-child { border-bottom: 1px solid var(--line); }
.strength-grid article > span { color: var(--blue); font: 700 12px/1 monospace; }
.strength-grid h3 { margin: 0; font-size: 20px; }
.strength-grid p { grid-column: 2; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.steps-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.steps-list li { display: grid; grid-template-columns: 70px 1fr; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.steps-list li > span { color: var(--cyan); font: 700 12px/1 monospace; }
.steps-list h3 { margin: 0 0 10px; font-size: 21px; }
.steps-list p { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.9; }
.faq-section { background: var(--pale-2); }
.faq-heading { display: grid; grid-template-columns: .4fr 1.6fr; margin-bottom: 50px; }
.faq-heading > p { margin: 0; color: var(--blue); font: 800 12px/1 monospace; letter-spacing: .16em; }
.faq-heading h2 { margin: 0; font-size: clamp(33px, 3.44vw, 48px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: grid; grid-template-columns: 68px 1fr; align-items: center; padding: 28px 0; cursor: pointer; font-size: 15px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; grid-column: 3; color: var(--blue); font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary span { color: var(--blue); font: 700 12px/1 monospace; }
.faq-list details > div { display: grid; grid-template-columns: 68px 1fr; padding: 0 0 30px; }
.faq-list details > div span { color: var(--blue); font: 700 12px//1 monospace; }
.faq-list details > div p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.business-navigation { background: white; }
.business-navigation > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.business-navigation > div > a { min-height: 190px; padding: 28px; display: grid; grid-template-columns: 1fr auto; align-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.business-navigation a[aria-current="page"] { background: var(--pale); }
.business-navigation small { grid-column: 1 / -1; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.business-navigation strong { max-width: 230px; font-size: 17px; line-height: 1.5; }

/* Service detail additions */
.reason-section, .engagement-section, .transform-pillars, .future-section { background: var(--pale-2); }
.related-services .marketing-services { grid-template-columns: repeat(2, 1fr); }
.solution-catalog-list { border-top: 1px solid rgba(255,255,255,.18); }
.solution-catalog-list article { display: grid; grid-template-columns: 1fr 1fr 150px; gap: 42px; align-items: center; padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.solution-catalog-list article > div > small { color: var(--cyan); font: 700 12px/1 monospace; }
.solution-catalog-list article > div > strong { display: block; margin: 12px 0 7px; color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .12em; }
.solution-catalog-list h2 { margin: 0; font-size: 24px; }
.solution-catalog-list p { color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.8; }
.solution-catalog-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.solution-catalog-list li { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.06); font-size: 12px; }
.solution-catalog-list article > span { color: var(--cyan); font: 700 11px/1.5 monospace; letter-spacing: .1em; }
.management-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 24px; }
.management-grid article { min-height: 260px; padding: 30px; background: var(--pale-2); border-top: 3px solid var(--blue); }
.management-grid > span { color: var(--blue); font-size: 28px; }
.management-grid small { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.management-grid h2 { margin: 72px 0 15px; font-size: 23px; }
.management-grid p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillar-grid article { min-height: 280px; padding: 30px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.pillar-grid article:last-child { border-right: 0; }
.pillar-grid article > p { color: var(--blue); font: 800 12px/1 monospace; letter-spacing: .16em; }
.pillar-grid h2 { margin: 78px 0 16px; font-size: 22px; }
.pillar-grid span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.development-areas > div { border-top: 1px solid rgba(255,255,255,.18); }
.development-areas article { display: grid; grid-template-columns: .55fr 1fr .8fr; gap: 50px; padding: 46px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.development-areas article > small { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.development-areas h2 { margin: 0 0 17px; font-size: 28px; }
.development-areas p { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.9; }
.development-areas ul { margin: 0; padding: 0; list-style: none; }
.development-areas li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); font-size: 12px; }
.why-three-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; }
.why-three-grid h2 { margin: 0; font-size: clamp(33px, 3.61vw, 50px); line-height: 1.45; }
.why-three-grid p { margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 2; }
.three-loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 75px; }
.three-loop > span { padding: 30px; border: 1px solid rgba(255,255,255,.2); color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.three-loop small { display: block; margin-top: 12px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 500; }
.three-loop i { color: var(--cyan); font-style: normal; }

/* Archives, articles, and empty states */
.archive-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-bottom: 70px; }
.archive-lead h2 { margin: 0; font-size: clamp(33px, 3.44vw, 48px); line-height: 1.45; }
.archive-lead p { color: var(--muted); font-size: 14px; line-height: 2; }
.empty-collection { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 24px; text-align: center; border: 1px solid var(--line); background: linear-gradient(145deg, white, var(--pale-2)); }
.empty-collection > p { color: var(--blue); font: 800 11px/1 monospace; letter-spacing: .18em; }
.empty-collection h2 { margin: 24px 0 16px; font-size: clamp(28px, 3.5vw, 45px); }
.empty-collection > span { max-width: 540px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.empty-collection .text-link { margin-top: 32px; }
.case-archive-grid, .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-archive-card small, .article-grid a > small { display: block; margin: 17px 0 10px; color: var(--blue); font-size: 11px; font-weight: 800; }
.case-archive-card h2, .article-grid h2 { margin: 0 0 18px; font-size: 20px; line-height: 1.5; }
.case-archive-card > span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.news-list { border-top: 1px solid var(--line); }
.news-list a { display: grid; grid-template-columns: 110px 120px 1fr 24px; gap: 20px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.news-list time { color: var(--muted); font: 500 12px/1 monospace; }
.news-list small { color: var(--blue); font-size: 11px; font-weight: 800; }
.news-list strong { font-size: 14px; }
.article-header { min-height: 560px; padding: 190px max(24px, calc((100vw - 1040px) / 2)) 90px; background: var(--grad-brand); color: white; display: flex; flex-direction: column; justify-content: end; }
.article-header > p { color: var(--cyan); font: 800 12px/1 monospace; letter-spacing: .16em; }
.article-header h1 { max-width: 920px; margin: 25px 0 38px; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.35; letter-spacing: -.045em; }
.article-header time { margin-right: 25px; color: rgba(255,255,255,.75); font: 500 12px/1 monospace; }
.article-layout { display: grid; grid-template-columns: 180px 1fr; gap: 10vw; max-width: 1040px; margin: 0 auto; }
.article-layout aside { position: sticky; top: 30px; align-self: start; }
.article-layout aside p { color: var(--blue); font: 800 11px/1 monospace; letter-spacing: .14em; }
.article-layout aside strong, .article-layout aside a { display: block; margin-top: 14px; font-size: 12px; }
.article-body { max-width: 690px; }
.article-description { font-size: 18px !important; font-weight: 600; }
.article-body section { margin-top: 60px; }
.article-body h2 { margin: 0 0 24px; font-size: 28px; line-height: 1.5; }
.article-body p { color: var(--muted); font-size: 15px; line-height: 2.1; }
.case-detail { max-width: 920px; margin: 0 auto; }
.case-detail dl { margin: 0 0 90px; border-top: 1px solid var(--line); }
.case-detail dl div { display: grid; grid-template-columns: 160px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.case-detail dt { color: var(--muted); font-size: 12px; }
.case-detail dd { margin: 0; font-size: 14px; }
.case-detail section { padding: 55px 0; border-top: 1px solid var(--line); }
.case-detail section small { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.case-detail section h2 { margin: 17px 0 23px; font-size: 31px; }
.case-detail section p { color: var(--muted); font-size: 15px; line-height: 2.1; }
.not-found { position: relative; min-height: 100svh; padding: 160px 24px 90px; display: grid; place-items: center; overflow: hidden; background: var(--grad-brand); color: white; }
.not-found-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 72px 72px; }
.not-found > div:last-child { position: relative; z-index: 1; text-align: center; }
.not-found > div > p { color: var(--cyan); font: 800 12px/1 monospace; letter-spacing: .18em; }
.not-found h1 { margin: 30px 0 22px; font-size: clamp(45px, 6vw, 80px); line-height: 1.35; letter-spacing: -.05em; }
.not-found > div > span { color: rgba(255,255,255,.78); font-size: 13px; }
.not-found > div > div { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 35px; }
.not-found .button { color: var(--navy); background-color: var(--white); }
.not-found .button:hover { background-color: var(--sky); }
.not-found .text-link, .not-found > div > p { color: var(--white); }
.not-found > div > span { color: rgba(255,255,255,.85); }

/* Form validation */
.form-row > div > input, .form-row > div > select, .form-row > div > textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; background: white; padding: 15px 16px; color: var(--ink); font-size: 14px; outline: none; }
.form-row > div > textarea { resize: vertical; }
.form-row > div > input:focus, .form-row > div > select:focus, .form-row > div > textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,138,210,.12); }
.form-row [aria-invalid="true"] { border-color: #c94b22; }
.form-row label .optional { color: var(--muted); }
.field-error { margin: 8px 0 0; color: #b43d19; font-size: 12px; }
.privacy-field { margin: 34px 0; }
.privacy-field .privacy-check { margin: 0; }
.privacy-field .field-error { text-align: center; }
.form-alert { display: flex; gap: 12px; margin-bottom: 28px; padding: 16px; border-left: 3px solid var(--orange); background: #fff5eb; color: #6d3010; }
.form-alert p { margin: 0; font-size: 12px; line-height: 1.7; }
.contact-form button:disabled { cursor: wait; opacity: .65; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .philosophy-axis, .business-navigation > div, .pillar-grid, .case-archive-grid, .article-grid { grid-template-columns: 1fr; }
  .management-grid { grid-template-columns: 1fr; }
  .management-grid > span { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 900px) {

  .home-media-head, .split-statement, .proposition-grid, .solutions-index-head, .strength-grid, .archive-lead, .why-three-grid, .article-layout { grid-template-columns: 1fr; gap: 38px; }
  .display-word { font-size: 69px; }
  .editorial-list article { grid-template-columns: 42px 1fr; gap: 16px; }
  .editorial-list article p { grid-column: 2; }
  .solutions-lines article { grid-template-columns: 38px 1fr; padding: 28px 0; }
  .solutions-lines article > p, .solutions-lines article > a { grid-column: 2; margin: 0; }
  .business-navigation > div > a { min-height: 150px; }
  .solution-catalog-list article, .development-areas article { grid-template-columns: 1fr; gap: 24px; }
  .solution-catalog-list article > span { display: none; }
  .related-services .marketing-services { grid-template-columns: 1fr; }
  .pillar-grid article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pillar-grid h2 { margin-top: 46px; }
  .three-loop { grid-template-columns: 1fr; }
  .three-loop i { transform: rotate(90deg); justify-self: center; }
  .news-list a { grid-template-columns: 86px 1fr 22px; gap: 12px; }
  .news-list small { grid-column: 2; grid-row: 1; }
  .news-list strong { grid-column: 1 / 3; }
  .article-header { min-height: 500px; padding-top: 150px; }
  .article-layout aside { position: static; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
  .case-detail dl div { grid-template-columns: 100px 1fr; }
  .not-found > div > div { flex-direction: column; }
}


/* =========================================================
   Top page
   ========================================================= */
.home { overflow-x: clip; }

/* First view: three diagonal photo panels, translucent oversized typography and a NEWS box */
.fv { --fv-edge: 0.15%; position: relative; z-index: 1; height: 100svh; min-height: 54rem; max-height: 78rem; overflow: hidden; color: var(--white); background-color: var(--navy-2); }
.fv--panels { position: absolute; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 0; }
.fv--panel { position: absolute; inset: 0; }
.fv--panel img { width: 100%; height: 100%; object-fit: cover; }
.fv--panel::after { content: ""; position: absolute; inset: 0; }
.fv--panel-l { clip-path: polygon(0 0, calc(35% - var(--fv-edge)) 0, calc(25% - var(--fv-edge)) 100%, 0 100%); }
.fv--panel-l img { object-position: 18% center; }
.fv--panel-l::after { background: linear-gradient(160deg, rgba(var(--navy-rgb),.48) 0%, rgba(var(--navy-2-rgb),.26) 60%, rgba(var(--navy-2-rgb),.54) 100%); }
.fv--edge { position: absolute; inset: 0; background: rgba(255,255,255,.85); clip-path: polygon(35% 0, 71.5% 0, 62% 100%, 25% 100%); }
.fv--panel-c { clip-path: polygon(calc(35% + var(--fv-edge)) 0, calc(71.5% - var(--fv-edge)) 0, calc(62% - var(--fv-edge)) 100%, calc(25% + var(--fv-edge)) 100%); }
.fv--panel-c img { object-position: 60% center; }
.fv--panel-c::after { background: linear-gradient(180deg, rgba(var(--blue-rgb),.18) 0%, rgba(var(--navy-rgb),.28) 70%, rgba(var(--navy-2-rgb),.58) 100%); }
.fv--panel-r { clip-path: polygon(calc(71.5% + var(--fv-edge)) 0, 100% 0, 100% 100%, calc(62% + var(--fv-edge)) 100%); }
.fv--panel-r img { object-position: 85% center; }
.fv--panel-r::after { background: linear-gradient(200deg, rgba(var(--navy-rgb),.16) 0%, rgba(var(--navy-rgb),.3) 55%, rgba(var(--navy-2-rgb),.72) 100%); }
.fv--shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--navy-2-rgb),.28) 0%, rgba(var(--navy-2-rgb),0) 24%, rgba(var(--navy-2-rgb),0) 58%, rgba(var(--navy-2-rgb),.58) 100%); }
.fv--copy { position: absolute; z-index: 2; left: 50%; top: calc(var(--header-h) + (100% - var(--header-h)) * 0.39); transform: translate(-50%, calc(-50% + 20px)); display: flex; flex-direction: column; align-items: center; max-width: 90%; text-align: center; pointer-events: none; }
.fv--en { margin: 0; font-family: var(--font-en-display); font-size: clamp(10rem, min(16.5vw, 25.5svh), 22rem); font-weight: 700; line-height: 0.82; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,.62); mix-blend-mode: screen; white-space: nowrap; }
.fv--en span { display: block; }
.fv--en span + span { margin-top: 0.12em; }
.fv--catch { margin: 2.25rem 0 0; font-family: var(--font-jp-serif); font-size: clamp(2rem, 2.65vw, 3.5rem); font-weight: 600; line-height: 1.45; letter-spacing: 0.07em; color: var(--white); text-shadow: 0 0.125rem 1.5rem rgba(var(--navy-2-rgb),.65); white-space: nowrap; }
.fv--news { position: absolute; z-index: 2; left: 5%; bottom: 2rem; width: 38%; min-width: 24rem; max-width: 42rem; }
.fv--news-ttl { display: flex; justify-content: flex-start; margin: 0 0 0.75rem; font-family: var(--font-en-display); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; }
.fv--news-ttl a { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--white); transition: var(--transit); }
.fv--news-ttl a:hover { opacity: 0.7; }
.fv--news-ttl img { width: 2.25rem; height: 2.25rem; object-fit: contain; padding: 0.2rem; border-radius: 0.4rem; background: rgba(255,255,255,.92); }
.fv--news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.4); }
.fv--news-list li { border-bottom: 1px solid rgba(255,255,255,.4); }
.fv--news-list a, .fv--news-empty { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.8rem 0; color: var(--white); transition: var(--transit); }
.fv--news-list a:hover { padding-left: 0.5rem; color: var(--cyan); }
.fv--news-list time { font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.fv--news-cat { padding: 0.25em 0.9em; border-radius: 0.25rem; background-color: rgba(var(--navy-2-rgb),.85); color: var(--white); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fv--news-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-md); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; }
.fv--news-empty .fv--news-title { font-weight: 500; }
/* 背の低い画面（1366×768 など）では見出しを少し上げる */
@media (min-width: 1081px) and (max-height: 820px) {
  .fv--copy { top: calc(var(--header-h) + (100% - var(--header-h)) * 0.36); }
}
/* 横長で背の低い画面（1920×900 など）では見出しを少し上げ、左下の NEWS と重ねない */
@media (min-width: 1081px) and (min-aspect-ratio: 9/5) {
  .fv--copy { top: calc(var(--header-h) + (100% - var(--header-h)) * 0.35); }
  .fv--en { font-size: clamp(10rem, min(16.5vw, 22.5svh), 22rem); }
}
@media (max-width: 1080px) {
  .fv--copy { max-width: 92%; }
  .fv--en { font-size: clamp(8rem, 17vw, 13rem); }
  .fv--news { width: 42%; }
}
@media (max-width: 767px) {
  .fv { --fv-edge: 0.4%; height: 100svh; min-height: 44rem; max-height: 60rem; }
  .fv--panels { top: var(--header-h); bottom: 30%; }
  .fv--copy { top: calc(var(--header-h) + (70% - var(--header-h)) * 0.5); max-width: 94%; }
  .fv--en { font-size: 19vw; line-height: 0.84; letter-spacing: 0.02em; color: rgba(255,255,255,.58); }
  .fv--catch { margin-top: 1.5rem; font-size: 1.55rem; line-height: 1.6; white-space: normal; }
  .fv--news { right: 0; bottom: 0; left: 0; width: auto; min-width: 0; padding: 1.5rem 6% 2rem; background: linear-gradient(to top, rgba(var(--navy-2-rgb),.98), rgba(var(--navy-2-rgb),.86)); }
  .fv--news-ttl { font-size: 1.5rem; }
  .fv--news-list a, .fv--news-empty { grid-template-columns: auto auto; padding: 0.85rem 0; gap: 0.6rem 0.75rem; }
  .fv--news-title { grid-column: 1 / -1; }
}

/* Mission: serif headline and check list on the left, slanted photo bleeding to the right */
.home_mission { position: relative; padding-top: 7.5rem; background-color: var(--pale); overflow: clip; }
.mission--wrap { position: relative; min-height: 64.9rem; }
.mission--img { position: absolute; top: 0; left: 43%; right: 0; height: 64.9rem; clip-path: url(#mission-clip); background-color: var(--pale-2); }
.mission--img img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
.mission--txt { position: relative; z-index: 1; width: 50.25rem; max-width: 55%; margin-left: 15rem; padding-top: 4.875rem; }
.mission--eyebrow { margin: 0; font-family: var(--font-en-display); font-size: max(13px, 1.25rem); font-weight: 500; line-height: 1.6; letter-spacing: 0.064em; text-transform: uppercase; color: var(--navy); }
.mission--eyebrow span { display: block; }
.mission--ttl { margin: 2rem 0 0; font-family: var(--font-jp-serif); font-size: 3.5rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; color: var(--ink); }
.mission--ttl span { display: block; white-space: nowrap; }
.mission--sub { display: flex; align-items: center; gap: 0.5rem; margin: 3.5rem 0 0; font-size: max(18px, 2rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--navy); }
.mission--sub img { width: 3.625rem; height: 3.333rem; object-fit: contain; flex: none; }
.mission--body { max-width: 42rem; margin: 1.5rem 0 0; font-size: max(15px, 1.125rem); font-weight: 500; line-height: 2.2; letter-spacing: 0.07em; color: var(--ink); }
.mission--points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0; width: 58rem; max-width: none; margin: 2.5rem 0 0; padding: 1.5rem 1.5rem 1rem; list-style: none; border-radius: 0.5rem; background-color: var(--white); box-shadow: 0 0.5rem 2rem rgba(var(--navy-2-rgb), 0.04); }
.mission--points li { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; font-size: max(14px, 1rem); font-weight: 700; line-height: 1.8; letter-spacing: 0.07em; color: var(--ink); }
.mission--check { width: 1.8125rem; height: 1.8125rem; flex: none; color: var(--orange); }
@media (min-width: 768px) and (max-width: 1400px) { .mission--points { grid-template-columns: 1fr; width: 48rem; } }
.mission--ticker { margin-top: 0; padding-block: 0 1rem; opacity: 0.3; color: var(--blue); font-family: var(--font-en); font-size: 8.25rem; font-weight: 700; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.mission--ticker li { padding-inline: 1.5rem; }
@media (max-width: 1080px) {
  .mission--txt { margin-left: 8%; max-width: 52%; }
  .mission--img { left: 50%; }
}
@media (max-width: 767px) {
  .home_mission { padding-top: var(--pdg-md); }
  .mission--wrap { min-height: 0; display: flex; flex-direction: column; }
  .mission--img { position: relative; left: auto; right: auto; width: 94%; height: auto; aspect-ratio: 4 / 3; margin-left: 6%; margin-bottom: 2.5rem; clip-path: none; border-radius: 0 3rem 0 2.5rem; overflow: hidden; }
  .mission--txt { width: 100%; max-width: none; margin-left: 0; padding: 0 6%; }
  .mission--eyebrow { font-size: 1rem; }
  .mission--ttl { margin-top: 1.25rem; font-size: 2rem; }
  .mission--ttl span { white-space: normal; }
  .mission--sub { margin-top: 2rem; font-size: 1.15rem; letter-spacing: 0.02em; }
  .mission--sub img { width: 2.6rem; height: 2.4rem; }
  .mission--body { font-size: 1rem; line-height: 2; }
  .mission--points { grid-template-columns: 1fr; width: 100%; margin-top: 1.75rem; padding: 1.25rem 1.25rem 1rem; }
  .mission--points li { font-size: 0.95rem; }
  .mission--ticker { font-size: 4rem; padding-top: 2rem; }
}

/* News */
.home_news { padding-block: var(--pdg-md); }
.home_news > .inner { display: flex; justify-content: space-between; gap: 3rem; }
.news--ttlarea { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.posts-news { width: 67.5%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.posts-news .post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: 1.5rem; padding-right: 4rem; border-bottom: 1px solid var(--line-2); }
.post--txtarea { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; }
.post--info { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.post--date { margin: 0; color: var(--muted); font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; }
.cat_list span, .cat_list a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 0.25rem; background-color: var(--pale-2); color: var(--muted); font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; }
.post--ttl { margin: 0; font-size: var(--fs-h6); font-weight: 500; line-height: 1.6; letter-spacing: 0.03em; }
.post--link::before { content: ""; position: absolute; inset: 0; cursor: pointer; }
.post--link:hover { color: var(--navy); }
.posts-news .arrow { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 3.375rem; height: 3.375rem; color: var(--white); background-color: var(--navy-2); }
.post-empty .post--ttl { color: var(--muted); font-weight: 400; }
@media (max-width: 767px) {
  .home_news > .inner { flex-direction: column; gap: 2.2857142857rem; }
  .news--ttlarea { gap: 0; }
  .posts-news { width: 100%; }
  .posts-news .post { padding-right: 3.5rem; }
  .posts-news .arrow { width: 2.8571428571rem; height: 2.8571428571rem; }
}

/* Business (horizontal scroll) */
.home_service { display: flex; flex-direction: column; padding-block: var(--pdg-md) var(--pdg-sm); background-color: var(--pale-2); overflow: hidden; }
.service--ttlarea { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 5rem; }
.service--list_wrap { position: relative; }
.service--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; width: 90%; max-width: var(--inner); margin-inline: auto; }
.service--item { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; min-height: 36rem; padding: 14rem 2rem 2.5rem 2rem; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); }
.service--item::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(var(--navy-2-rgb),0) 0%, rgba(var(--navy-2-rgb),.72) 100%); }
.service--item > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease-out; }
.service--item:hover > img { transform: scale(1.05); }
.service--txtarea { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding-right: 4rem; }
.service--ttl { position: relative; margin: 0; padding-left: calc(max(22px, 1.5rem) + 0.5rem); color: var(--white); font-size: var(--fs-h4); font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; }
.service--ttl .num { position: absolute; top: 0.5lh; left: 0; color: var(--orange); font-family: var(--font-en-text); font-size: max(13px, 1.125rem); font-weight: 600; line-height: 1; letter-spacing: 0; transform: translateY(-50%); }
.service--txtarea p { margin: 0; font-size: var(--fs-md); line-height: 1.8; }
.service--item .arrow { position: absolute; bottom: 2rem; right: 2rem; width: 4rem; height: 4rem; color: var(--navy); background-color: var(--white); }
.service--item .arrow::before { width: 1.5rem; }
.service--item:hover .arrow { color: var(--white); background-color: var(--navy); }
.service--progress { display: none; }
.progressbar { position: relative; width: 100%; max-width: 30.5625rem; }
.progressbar--line { position: absolute; top: 50%; left: 0; width: calc(100% - 1px); height: 2px; background-color: var(--muted); transform: translateY(-50%); }
.progressbar--line .fill { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--navy); transition: width 0.4s ease; }
.progressbar--steps { position: relative; z-index: 2; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.progressbar--steps li { display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border: 2px solid var(--muted); border-radius: 50%; color: var(--muted); background-color: var(--pale-2); font-family: var(--font-en-text); font-size: var(--fs-h6); font-weight: 600; letter-spacing: 0.05em; transition: var(--transit); }
.progressbar--steps li.active { border-color: var(--navy); color: var(--navy); }
.service--more { display: none; }
@media (max-width: 767px) {
  .home_service { padding-bottom: var(--pdg-md); }
  .service--ttlarea { flex-direction: column; align-items: flex-start; padding-bottom: 2.2857142857rem; }
  .service--ttlarea .btn { display: none; }
  .service--list { display: flex; gap: 1.1428571429rem; width: 100%; max-width: none; margin: 0; padding: 0 6.1538461538% 1.4285714286rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6.1538461538%; scrollbar-width: none; will-change: auto; -webkit-overflow-scrolling: touch; }
  .service--list::-webkit-scrollbar { display: none; }
  .service--item { flex: none; width: 84vw; min-height: 26rem; padding: 12rem 1.7142857143rem 1.7142857143rem; scroll-snap-align: start; }
  .service--txtarea { padding-right: 3rem; }
  .service--ttl { font-size: var(--fs-h4); }
  .service--txtarea p { font-size: var(--fs-md); }
  .service--ttl .num { top: 0.3lh; }
  .service--item .arrow { bottom: 1.7142857143rem; right: 1.7142857143rem; width: 2.8571428571rem; height: 2.8571428571rem; }
  .service--item .arrow::before { width: 1.1428571429rem; }
  .progressbar--steps li { width: 2.8571428571rem; height: 2.8571428571rem; font-size: var(--fs-h6); }
  .service--progress { display: block; padding-top: 1rem; }
  .service--more { display: flex; margin-top: 2.2857142857rem; }
}

/* Link sections (About / Media) */
.home_links { padding-block: var(--pdg-md); }
.home_links > .inner { display: flex; flex-direction: column; gap: 7.5rem; }
.links--ttlarea { display: flex; justify-content: space-between; align-items: center; gap: 3rem; }
.links--txtarea p { margin: 0; font-size: var(--fs-h5); font-weight: 500; line-height: 1.8; letter-spacing: 0.03em; }
.links--cont { display: grid; grid-template-columns: 42.5rem minmax(0, 1fr); gap: 7.5rem; }
.links--imgarea { position: relative; aspect-ratio: 680 / 800; }
.links--imgarea::before { content: ""; position: absolute; inset: 0; margin: auto; width: 32.3125rem; aspect-ratio: 517 / 690; border-radius: var(--radius-lg); background-image: var(--grad-text); box-shadow: var(--shadow); transform: rotate(-15deg); }
.links--img { position: absolute; inset: 0; margin: auto; width: 32.5rem; aspect-ratio: 520 / 690; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transition: var(--transit); }
.links--img img { width: 100%; height: 100%; object-fit: cover; }
.links--img.active { opacity: 1; }
.links--list { margin: 0; padding: 0; list-style: none; }
.links--list li { position: relative; border-bottom: 1px solid var(--line-2); }
.links--list li:first-child { border-top: 1px solid var(--line-2); }
.links--list a { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.5rem; padding-right: 4rem; font-size: var(--fs-h5); font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; transition: var(--transit); }
.links--list a:hover { padding-left: 1.5rem; color: var(--navy); }
.links--list .subtitle { font-size: var(--fs-md); }
.links--list .arrow { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 3.5rem; height: 3.5rem; color: var(--white); background-color: var(--navy-2); pointer-events: none; }
@media (max-width: 767px) {
  .home_links > .inner { gap: 2.8571428571rem; }
  .links--ttlarea { flex-direction: column; align-items: flex-start; gap: 1.7142857143rem; }
  .links--txtarea p { font-size: var(--fs-h6); }
  .links--cont { grid-template-columns: minmax(0, 1fr); gap: 2.8571428571rem; }
  .links--imgarea { display: none; }
  .links--list a { padding-right: 3.5rem; }
  .links--list .arrow { width: 2.8571428571rem; height: 2.8571428571rem; }
}

/* Media (card slider on navy, after speelead.com MERITS) */
.home_media { position: relative; z-index: 1; padding-block: var(--pdg-md); color: var(--white); background-color: var(--navy); overflow: clip; }
.home_media--deco { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.home_media--deco .particle { position: absolute; right: -6rem; top: -16rem; width: 82rem; aspect-ratio: 1312 / 800; background: url(../img/particle.svg) no-repeat center / contain; }
.home_media .ttl-01 { margin-bottom: 5rem; }
.ttl-01-wh > span:not(.subtitle) { color: var(--white); background-image: none; }
.ttl-01-wh .subtitle-ic { color: var(--white); }
.ttl-01-wh .subtitle-ic::before { background-image: linear-gradient(to right, var(--orange) 50%, var(--cyan) 50%); }
.media_slider.swiper { overflow: visible; }
.media_slide.swiper-slide { width: 100%; max-width: 37.5rem; height: auto; display: block; color: var(--white); }
.media_slide--img { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 9; margin-bottom: 2rem; overflow: hidden; background-color: var(--pale-2); }
.media_slide--img > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease-out; }
.media_slide:hover .media_slide--img > img { transform: scale(1.05); }
.media_slide--num { position: absolute; left: 0; top: 0; z-index: 1; padding: 1rem 0 0 1.375rem; color: var(--cyan); font-size: 3.75rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; }
.media_slide--num::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 6.25rem; aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 0 100%); background-color: var(--blue-2); }
.media_slide--label { margin: 0 0 0.5rem; color: var(--cyan); font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; }
.media_slide--ttl { margin: 0; font-size: max(16px, 1.5rem); font-weight: 700; line-height: 1.7; letter-spacing: 0.05em; transition: var(--transit); }
.media_slide:hover .media_slide--ttl { color: var(--cyan); }
.media_controls { display: flex; align-items: center; gap: 7.5rem; margin-top: 5rem; }
.media_scrollbar.swiper-scrollbar { position: relative !important; left: auto !important; bottom: auto !important; flex: 1; width: auto !important; height: 8px !important; padding: 1px 2px; background-color: var(--blue-2); border-radius: 9999px; }
.media_scrollbar .swiper-scrollbar-drag { height: 6px; background-color: var(--white); border-radius: 9999px; }
.media_buttons { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.media_button { position: relative; width: 3.5rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; color: var(--navy); background-color: var(--white); cursor: pointer; transition: var(--transit); }
.media_button .arrow { width: 100%; height: 100%; }
.media_button .arrow::before { width: 0.8125rem; }
.media_button-prev .arrow { scale: -1 1; }
.media_button:hover { color: var(--white); background-color: var(--cyan); }
.media_button.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; }
@media (max-width: 767px) {
  .home_media--deco .particle { width: 61.4285714286rem; right: -8rem; top: -9rem; }
  .home_media .ttl-01 { margin-bottom: 2.8571428571rem; }
  .media_slide--img { margin-bottom: 1.4285714286rem; }
  .media_slide--num { padding-left: 0.625rem; font-size: 2.5rem; }
  .media_slide--num::before { width: 4.5rem; }
  .media_slide--ttl { font-size: 1.2857142857rem; }
  .media_controls { gap: 1.1428571429rem; margin-top: 2.8571428571rem; }
  .media_buttons { gap: 0.5714285714rem; }
  .media_button { width: 3.2857142857rem; }
}

/* Card lists */
.cards { display: flex; flex-wrap: wrap; gap: 3.125rem; margin: 0 auto; padding: 0; list-style: none; }
.cards > li { width: calc(50% - 3.125rem / 2); }
.cards-3 > li { width: calc(33.3333333333% - 3.125rem / 3 * 2); }
@media (min-width: 768px) and (max-width: 1080px) { .cards-3 > li { width: calc(50% - 3.125rem / 2); } }
.card-link { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 3.5rem 6rem 3.5rem 3rem; border-radius: var(--radius-lg); background-color: var(--pale); transition: var(--transit); }
.card-link.bg-wht { background-color: var(--white); }
.card-link h3 { margin: 0; font-size: var(--fs-h5); font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; transition: var(--transit); }
.card-link h3 .subtitle { margin-top: 0.5rem; }
.card-link h3 .lead { display: block; margin-top: 0.25rem; font-size: var(--fs-lg); font-weight: 700; }
.card-link h3 + p { margin: 1.5rem 0 0; font-size: var(--fs-md); line-height: 1.8; }
.card-link .arrow { position: absolute; top: 0; bottom: 0; right: 2rem; margin: auto; width: 3.5rem; height: 3.5rem; color: var(--white); background-color: var(--navy); }
.card-link:hover { color: var(--white); background-color: var(--navy) !important; }
.card-link:hover h3, .card-link:hover p { color: var(--white); }
.card-link:hover .subtitle-gr { color: var(--cyan) !important; background-image: none; }
.card-link:hover .arrow { color: var(--navy); background-color: var(--white); }
@media (max-width: 767px) {
  .cards { gap: 1.1428571429rem; }
  .cards > li, .cards-3 > li { width: 100%; }
  .card-link { padding: 1.7142857143rem 5.1428571429rem 1.7142857143rem 1.7142857143rem; }
  .card-link .arrow { right: 1.7142857143rem; width: 2.8571428571rem; height: 2.8571428571rem; }
}

/* Why Archlyst (image panel) */
.home_strength { padding-block: var(--pdg-md); background-color: var(--pale); }
.strength--panel { position: relative; padding-top: 12.5rem; border-radius: var(--radius-lg); background: url(../img/strength-1536.webp) center / cover no-repeat; }
@media (max-width: 767px) { .strength--panel { background-image: url(../img/strength-768.webp); } }
.strength--txtarea { position: relative; width: fit-content; max-width: 62%; min-height: 31.25rem; padding: 6.25rem 5rem 0 0; border-radius: 0 var(--radius-lg) 0 0; background-color: var(--pale); }
.strength--txtarea > p { margin: 2.5rem 0; font-size: var(--fs-lg); line-height: 2; }
.strength--cards { margin-top: 3.125rem; justify-content: center; }
@media (max-width: 767px) {
  .strength--panel { padding-top: 7.1428571429rem; }
  .strength--txtarea { width: calc(100% - 1.7142857143rem); max-width: none; min-height: 17.8571428571rem; padding: 1.7142857143rem 1.7142857143rem 0 0; }
  .strength--txtarea > p { margin: 1.5rem 0; font-size: var(--fs-md); }
  .strength--cards { margin-top: 1.7142857143rem; }
}

/* Message (vertical photo loops) */
.home_message { padding-block: var(--pdg-sm) var(--pdg-md); background-color: var(--pale-2); }
.message--cont { position: relative; z-index: 1; padding-block: var(--pdg-md) var(--pdg-sm); border-radius: 7.5rem 7.5rem 0 0; overflow: hidden; }
.message--cont::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--white); mask-image: linear-gradient(to top, rgba(0,0,0,0), #000 var(--loop-h), #000); }
.message--cont > .inner { position: relative; }
.message--txtarea { max-width: 48rem; }
.message--txtarea .ttl-01 { margin-bottom: 4rem; }
.message--txtarea .ttl-02 { margin-bottom: 2.5rem; }
.message--txtarea > p { margin: 0 0 4rem; font-size: var(--fs-md); line-height: 2; }
.message--imgarea { position: absolute; top: calc(var(--pdg-md) * -1); bottom: calc(var(--pdg-sm) * -1); right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 50.25rem; mask-image: linear-gradient(to top, rgba(0,0,0,0), #000 var(--loop-h), #000); pointer-events: none; }
.message--loop { overflow: hidden; }
.posts-portrait { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0; padding: 0.75rem 0; list-style: none; }
.posts-portrait li { position: relative; width: 24.5rem; aspect-ratio: 392 / 520; border-radius: var(--radius-lg); overflow: hidden; background: var(--pale-2); }
.posts-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .message--cont { padding-block: var(--pdg-md) 0; border-radius: 2.8571428571rem 2.8571428571rem 0 0; }
  .message--txtarea { max-width: none; }
  .message--txtarea .ttl-01 { margin-bottom: 2.2857142857rem; }
  .message--txtarea .ttl-02 { margin-bottom: 1.7142857143rem; }
  .message--txtarea > p { margin-bottom: 2.2857142857rem; }
  .message--imgarea { position: static; display: block; width: 100vw; margin-top: 2.8571428571rem; margin-inline: calc(50% - 50vw); mask-image: linear-gradient(to top, rgba(0,0,0,0), #000 11.3571428571rem, #000); }
  .message--loop:last-child { display: none; }
  .posts-portrait { grid-auto-flow: column; padding: 0 0.4285714286rem; }
  .posts-portrait li { width: 14rem; }
}

/* ---------- 下層ページ共通（sub-*）: 私たちについて／事業内容。参考: Figma 4431-4823 ---------- */
.sub-hero { position: relative; overflow: hidden; min-height: 30rem; padding: calc(var(--header-h) + 5rem) 0 7.5rem; background: linear-gradient(105deg, var(--white) 0%, var(--sky) 58%, var(--pale-2) 100%); }
/* 斜めのドット模様（濃淡の帯）と、右側の折れ線グラフィック */
.sub-hero--dots { position: absolute; inset: -45% -20%; background-image: radial-gradient(circle, rgba(var(--blue-rgb), .22) 1.5px, transparent 2.3px); background-size: 14px 14px; transform: rotate(-30deg); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,.9) 0 9rem, rgba(0,0,0,.15) 9rem 16rem, rgba(0,0,0,.5) 16rem 22rem); pointer-events: none; }
.sub-hero--art { position: absolute; right: 0; bottom: 0; z-index: 0; height: 100%; width: auto; max-width: 48%; pointer-events: none; }
.sub-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2.5rem; border-radius: 2.5rem 2.5rem 0 0; background: var(--white); }
.sub-hero--inner { position: relative; z-index: 2; }
.sub-hero--txt { width: 52%; }
.sub-hero--en { display: flex; align-items: center; gap: 0.875rem; margin: 0; color: var(--navy); font-family: var(--font-en-text); font-size: max(14px, 1.25rem); font-weight: 600; letter-spacing: 0.04em; }
.sub-hero--en::before { content: ""; width: 1.5rem; height: 2px; background: var(--orange); }
.sub-hero--ttl { margin: 0.75rem 0 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; color: var(--navy); }
.sub-hero--lead { margin: 1.25rem 0 0; max-width: 36rem; font-size: var(--fs-lg); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }


.sub-section { padding-block: var(--pdg-sm); }
.sub-section.is-pale { background: var(--pale-2); }
.sub-h2 { position: relative; margin: 0 0 3.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-2); font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; color: var(--ink); }
.sub-h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3.625rem; height: 1px; background: var(--orange); }
.sub-h2 small { display: block; margin-bottom: 0.5rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase; }
.sub-arrow { flex: none; display: inline-flex; width: 2.25rem; height: 1.5rem; border-radius: 999px; background: var(--orange); transition: var(--transit); }
.sub-arrow::before { content: ""; margin: auto; width: 0.8rem; height: 0.8rem; background-color: var(--white); mask-image: var(--icon-arrow); mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
.sub-check { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--orange); }

/* ハブ: コンセプト + ページカード */

/* 私たちの強み: 3つの強み */
.reasons { margin: 0; padding: 0; list-style: none; }
.reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; padding: 4rem 0; border-top: 1px solid var(--line-2); }
.reason:last-child { border-bottom: 1px solid var(--line-2); }
.reason:first-child { border-top: 0; }
.reason:nth-child(even) .reason--img { order: -1; }
.reason--num { display: block; font-family: var(--font-en); font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--blue); opacity: 0.35; }
.reason--en { display: block; margin-top: 0.75rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase; }
.reason h3 { margin: 1rem 0 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; color: var(--navy); }
.reason--lead { margin: 1.5rem 0 0; font-size: var(--fs-lg); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.reason--points { margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; list-style: none; border-radius: var(--radius-md); background: var(--white); }
.reason--points li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; letter-spacing: 0.03em; color: var(--ink); }
.reason--img { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.reason--img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* 私たちの強み: お悩みカード（参考: Figma 4436-5378 の SOLUTION） */
.solution--head { margin-bottom: 3.5rem; text-align: center; }
.solution--en { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.14em; color: var(--blue); text-transform: uppercase; }
.solution--en::before, .solution--en::after { content: ""; display: block; height: 1rem; border-right: 2px solid currentColor; rotate: 25deg; }
.solution--head h2 { margin: 1rem 0 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; color: var(--ink); }
.solution--lead { max-width: 52rem; margin: 2rem auto 0; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.04em; color: var(--ink); }
.solution--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.solution-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2.25rem 2.25rem 0; border-radius: 0.25rem; background: var(--white); box-shadow: 0 0 0.75rem rgba(var(--navy-2-rgb), .15); text-align: center; }
.solution-card--badge { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; background: var(--navy); color: var(--cyan); }
.solution-card--badge svg { width: 1.6rem; height: 1.6rem; }
.solution-card--icon { width: 5.5rem; height: 5.5rem; margin-top: 0.5rem; color: var(--blue); }
.solution-card--problem { position: relative; margin: 1.75rem 0 0; padding: 0 1.5rem; font-size: var(--fs-h6); font-weight: 700; line-height: 1.7; letter-spacing: 0.05em; color: var(--ink); }
.solution-card--problem::before, .solution-card--problem::after { position: absolute; top: -0.35em; font-family: var(--font-en); font-size: 2.6em; line-height: 1; color: var(--pale-2); }
.solution-card--problem::before { content: "\201C"; left: -0.25rem; }
.solution-card--problem::after { content: "\201D"; right: -0.25rem; top: auto; bottom: -0.65em; }
.solution-card--pill { margin: 1.25rem 0 0; padding: 0.35em 1.5em; border-radius: 999px; background: var(--sky); color: var(--navy); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; }
.solution-card--answers { width: 100%; margin: 1.5rem 0 2rem; padding: 0; list-style: none; text-align: left; }
.solution-card--answers li { position: relative; padding: 0.3rem 0 0.3rem 1.8rem; font-size: var(--fs-md); line-height: 1.7; letter-spacing: 0.03em; color: var(--ink); }
.solution-card--answers li::before { content: ""; position: absolute; left: 0; top: 0.75rem; width: 1rem; height: 0.6rem; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.solution-card--btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: calc(100% + 4.5rem); min-height: 3.6rem; margin: auto -2.25rem 0; padding: 1rem; border-radius: 0 0 0.25rem 0.25rem; background: var(--navy); color: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.1em; transition: var(--transit); }
.solution-card--btn:hover { background: var(--blue); }
.solution-card--btn small { font-family: var(--font-en-text); font-size: var(--fs-sm); letter-spacing: 0.1em; }
.arrow-mini { display: block; width: 0.75rem; height: 0.75rem; background-color: currentColor; mask-image: var(--icon-arrow); mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
@media (max-width: 1080px) { .solution--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .solution--head { margin-bottom: 2.25rem; }
  .solution--head h2 { font-size: var(--fs-h3); }
  .solution--cards { grid-template-columns: 1fr; gap: 2rem; }
  .solution-card { padding: 2rem 1.5rem 0; }
  .solution-card--btn { width: calc(100% + 3rem); margin-inline: -1.5rem; }
}

/* 会社概要: Mission / Vision / Values + 企業情報 */
.about-mvv--lead { margin-bottom: 3rem; text-align: center; }
.about-mvv--lead h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; color: var(--navy); }
.about-mvv--lead p { margin: 0.75rem 0 0; font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.05em; color: var(--ink); }
.mvv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.mvv-cards > li { padding: 2.5rem 2rem; border-radius: var(--radius-md); background: var(--pale); }
.mvv-cards small { display: block; font-family: var(--font-en); font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0.02em; line-height: 1; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--grad-text); }
.mvv-cards h4 { margin: 1.25rem 0 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; color: var(--navy); }
.mvv-cards > li > p { margin: 1rem 0 0; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.mvv-cards ul { margin: 1.25rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--line-2); }
.mvv-cards ul li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; color: var(--ink); }
.about-info--grid { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: 4rem; align-items: start; }
.about-info--img { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--white); }
.about-info--img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about-info .company-profile > div { grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-color: var(--line-2); }
.about-info .company-profile { border-top: 0; }
.about-info .company-profile dt { font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
.about-info .company-profile dd { font-size: var(--fs-md); font-weight: 500; line-height: 1.8; color: var(--ink); }

/* 代表メッセージ */
.about-message { display: grid; grid-template-columns: minmax(16rem, 22.25rem) minmax(0, 1fr); gap: 3.875rem; align-items: start; }
.about-message figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--pale-2); }
.about-message img { display: block; width: 100%; height: auto; aspect-ratio: 356 / 416; object-fit: cover; }
.about-message--txt p { margin: 0 0 1.6em; font-size: var(--fs-lg); line-height: 1.8; letter-spacing: 0.05em; color: var(--ink); }
.about-message--sign { margin-top: 2rem; text-align: right; }
.about-message--sign span { display: block; font-size: var(--fs-lg); letter-spacing: 0.05em; }
.about-message--sign strong { display: block; margin-top: 0.25rem; font-size: max(18px, 1.5rem); font-weight: 700; letter-spacing: 0.08em; }

/* ページ一覧とパンくず（見出しなし） */
.sub-dir ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 2.25rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1080px) { .mvv-cards, .sub-dir ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sub-dir a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.8rem; padding: 1.5rem 1.75rem; border-radius: 0.5rem; background: var(--white); color: var(--navy); font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.05em; transition: var(--transit); }
.sub-dir a:hover { background: var(--navy); color: var(--white); }
.sub-dir a:hover .sub-arrow { background: var(--white); }
.sub-dir a:hover .sub-arrow::before { background-color: var(--navy); }
.sub-dir a[aria-current="page"] { background: var(--sky-2); color: var(--navy-2); }
.sub-crumbs { background: var(--white); }
.sub-dir, .sub-section:has(+ .cta) { padding-bottom: calc(var(--pdg-sm) + 7.5rem); }
.sub-crumbs .breadcrumbs { padding: 1.5rem 0 0.5rem; border-bottom: 0; }

@media (max-width: 1080px) {
}
@media (max-width: 767px) {
  .sub-hero { min-height: 0; padding: calc(var(--header-h) + 2.5rem) 0 4.5rem; }
  .sub-hero--art { height: 62%; max-width: 72%; right: -10%; opacity: 0.32; }
  .sub-hero--dots { background-size: 11px 11px; }
    .sub-hero--txt { width: 100%; }
  .sub-hero--ttl { font-size: var(--fs-h2); }
  .sub-h2 { margin-bottom: 2.25rem; padding-bottom: 1rem; }
  .reason { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .reason--img, .reason:nth-child(even) .reason--img { order: -1; }
  .reason h3 { font-size: var(--fs-h4); }
  .mvv-cards, .about-message, .sub-dir ul { grid-template-columns: 1fr; }
  .about-message { gap: 2rem; }
  .about-message figure { max-width: 16rem; }
  .about-info--grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-info .company-profile > div { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0; }
  .sub-dir, .sub-section:has(+ .cta) { padding-bottom: calc(var(--pdg-sm) + 4.2857142857rem); }
}

/* ---------- 事業内容: サービスブロック（sub-* の共通部品に重ねる） ---------- */
.svc-block--head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 2rem 4rem; align-items: end; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-2); }
.svc-block--num { display: block; font-family: var(--font-en); font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--blue); opacity: 0.35; }
.svc-block--en { display: block; margin-top: 0.75rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase; }
.svc-block--head h2 { margin: 0.75rem 0 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--navy); }
.svc-block--lead { margin: 0; font-size: var(--fs-lg); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.svc-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.svc-item { padding: 1.75rem 1.75rem 1.5rem; border-radius: var(--radius-md); background: var(--white); box-shadow: 0 0 0.75rem rgba(var(--navy-2-rgb), .08); }
.svc-item small { display: block; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.svc-item h3 { margin: 0.5rem 0 0; font-size: var(--fs-h6); font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; color: var(--navy); }
.svc-item p { margin: 0.75rem 0 0; font-size: var(--fs-md); line-height: 1.9; letter-spacing: 0.03em; color: var(--ink); }
.svc-items.is-pills { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.svc-items.is-pills .svc-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem 0.75rem 1.1rem; border-radius: 999px; border: 1px solid var(--navy); box-shadow: none; }
.svc-items.is-pills .svc-item h3 { margin: 0; font-size: var(--fs-md); }
.svc-items.is-pills .sub-check { margin-top: 0; width: 1.3rem; height: 1.3rem; }
@media (max-width: 1080px) { .svc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .svc-block--head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.75rem; }
  .svc-block--head h2 { font-size: var(--fs-h4); }
  .svc-items { grid-template-columns: 1fr; gap: 1rem; }
  .svc-item { padding: 1.5rem 1.25rem 1.25rem; }
}

/* 一覧系（支援事例・メディア・お問い合わせ） */
.col-links .svc-item { padding: 0; }
.col-links .svc-item > a { display: block; height: 100%; padding: 1.75rem 1.75rem 1.5rem; color: inherit; transition: var(--transit); }
.col-links .svc-item > a:hover { background: var(--navy); color: var(--white); }
.col-links .svc-item > a:hover small, .col-links .svc-item > a:hover h3, .col-links .svc-item > a:hover p { color: var(--white); }
.col-links .svc-item h3 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.col-links .svc-item > a:hover .sub-arrow { background: var(--white); }
.col-links .svc-item > a:hover .sub-arrow::before { background-color: var(--navy); }
.svc-items.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sub-dir.is-4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sub-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3.5rem 2rem; border-radius: var(--radius-md); background: var(--white); box-shadow: 0 0 0.75rem rgba(var(--navy-2-rgb), .08); text-align: center; }
.sub-empty small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; color: var(--blue); text-transform: uppercase; }
.sub-empty--ttl { margin: 0; font-size: var(--fs-h5); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.sub-empty > p { margin: 0; font-size: var(--fs-md); line-height: 1.9; color: var(--ink); }
.sub-empty .btn { margin-top: 1rem; }
.contact-section .sub-h2 { margin-bottom: 3rem; }
.contact-section .contact-layout { gap: 5rem; }
.contact-section .contact-layout > div:first-child h2 { font-size: var(--fs-h3); letter-spacing: 0.03em; color: var(--navy); }
.contact-section .contact-layout > div:first-child > p { font-size: var(--fs-md); color: var(--ink); }
.contact-section .contact-layout dt { font-size: var(--fs-sm); }
.contact-section .contact-layout dd { font-size: var(--fs-md); }
.contact-section .contact-form { border-radius: var(--radius-md); }
@media (max-width: 1080px) { .svc-items.is-4, .sub-dir.is-4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .svc-items.is-4, .sub-dir.is-4 ul { grid-template-columns: 1fr; }
  .sub-empty { padding: 2.5rem 1.25rem; }
  .contact-section .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- メディア（マーケティング施策研究所）。参考: financial-create.co.jp/column/ ---------- */
.media-hero { padding: calc(var(--header-h) + 4.5rem) 0 2.5rem; background: var(--navy); color: var(--white); }
.media-hero--ttl { display: flex; align-items: baseline; gap: 1.5rem; margin: 0; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.4); font-family: var(--font-jp-serif); font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; }
.media-hero--ttl span { font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.media-hero--lead { margin: 1.25rem 0 0; font-size: var(--fs-md); line-height: 1.9; letter-spacing: 0.04em; color: rgba(255,255,255,.85); }
.media-hero .breadcrumbs { margin-top: 1.25rem; padding: 0; border: 0; background: transparent; }
.media-hero .breadcrumbs ol { width: auto; }
.media-hero .breadcrumbs li { color: rgba(255,255,255,.6); }
.media-hero .breadcrumbs a:hover, .media-hero .breadcrumbs li:last-child { color: var(--white); }
.media-body { padding-block: var(--pdg-sm) calc(var(--pdg-sm) + 7.5rem); background: var(--white); }
.media-archive { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 4rem; align-items: start; }
.media-archive--filter { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.media-archive--filter button, .media-archive--reset { padding: 0.3em 1em; border: 1px solid var(--navy); border-radius: 999px; background: transparent; color: var(--navy); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: var(--transit); }
.media-archive--filter button:hover, .media-archive--reset:hover { background: var(--navy); color: var(--white); }
.media-archive--reset { margin-top: 0.5rem; }
.posts-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.post--link { display: block; color: inherit; }
.post--img { position: relative; overflow: clip; aspect-ratio: 460 / 260; border-radius: var(--radius-sm); background: var(--pale-2); }
.post--img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease-out; }
.post--link:hover .post--img img { transform: scale(1.04); }
.post--placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); }
.post--placeholder img { width: 3rem; height: 3rem; object-fit: contain; padding: 0.4rem; border-radius: 0.5rem; background: rgba(255,255,255,.92); transform: none !important; }
.post--placeholder span { display: none; }
.post--info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0.6rem; }
.post--date { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.03em; color: var(--muted); }
.post--info .cat_list { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat_list span { display: inline-block; padding: 0.25em 1em; border-radius: 999px; background: var(--navy); color: var(--white); font-size: max(10px, 0.75rem); font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; }
.post--ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; color: var(--ink); transition: var(--transit); }
.post--link:hover .post--ttl { color: var(--blue); }
.media-side .side_section + .side_section { margin-top: 3rem; }
.side--ttl { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--line-2); font-family: var(--font-jp-serif); font-size: var(--fs-h6); font-weight: 600; letter-spacing: 0.15em; line-height: 1; white-space: nowrap; color: var(--ink); }
.side--ttl span { font-family: var(--font-en-text); font-size: max(10px, 0.75rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; }
.media-side ul { margin: 0; padding: 0; list-style: none; }
.media-side li + li { margin-top: 0.25rem; }
.media-side button { display: block; width: 100%; padding: 0.4em 0.5em; border: 0; border-radius: 0.25rem; background: transparent; color: var(--navy); font: inherit; font-size: var(--fs-md); font-weight: 700; text-align: left; letter-spacing: 0.03em; cursor: pointer; transition: var(--transit); }
.media-side button:hover { background: var(--pale); }
.media-side button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.side--note { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--muted); }
@media (max-width: 1080px) { .posts-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .media-archive { gap: 2.5rem; } }
@media (max-width: 767px) {
  .media-hero { padding: calc(var(--header-h) + 2.5rem) 0 1.75rem; }
  .media-hero--ttl { flex-direction: column; gap: 0.5rem; font-size: var(--fs-h3); }
  .media-body { padding-bottom: calc(var(--pdg-sm) + 4.2857142857rem); }
  .media-archive { grid-template-columns: 1fr; gap: 3rem; }
  .posts-column { grid-template-columns: 1fr; gap: 2rem; }
  .media-side ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .media-side li + li { margin-top: 0; }
  .media-side button { width: auto; padding: 0.4em 1em; border: 1px solid var(--line-2); border-radius: 999px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loop .loop-slide, .ttl-shine span, .ttl-shine-dark span { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .hero-content, .page-hero-inner { animation: none; }
}

/* ---------- マーケティング支援TOP（page-marketing.php の .mk-*） ----------
   白を基本に、紺（主）・青（補助）・オレンジ（CTA と「起点」の印だけ）。写真を使わず、帯（.mk-cells）と文字組みで支援範囲を見せる。
   帯は 5 工程（戦略設計 / 施策設計・実行 / 計測・可視化 / 分析・改善 / 次の戦略）。.is-on=担当、.is-dir=ディレクション（統括）、.is-start=起点 */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.btn-line > a { color: var(--navy); background-color: transparent; box-shadow: inset 0 0 0 1px var(--navy); }
.btn-line .arrow { color: var(--white); background-color: var(--navy); }
.btn-line > a:hover { color: var(--white); background-color: var(--navy); }

.mk-section { padding-block: var(--pdg-md); }
.mk-section.is-pale { background: var(--pale); }
.mk-eyebrow { display: flex; align-items: center; gap: 0.875rem; margin: 0; color: var(--blue); font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mk-eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--orange); }
.mk-title { margin: 1.25rem 0 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; color: var(--navy); }
.mk-lead { margin: 0; font-size: var(--fs-lg); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.mk-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 5rem; align-items: end; margin-bottom: 4.5rem; }
.mk-head.is-center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.mk-head.is-center .mk-eyebrow { justify-content: center; }
.mk-head--btn { justify-self: end; }
.mk-head.is-solo { grid-template-columns: 1fr; }

/* スクロールで表示（site.js が .is-in を付ける。JS が無い環境では最初から表示） */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 帯 */
.mk-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; }
.mk-cell { position: relative; display: block; height: 0.625rem; border-radius: 999px; background: var(--pale-2); }
.mk-cell.is-on { background: var(--navy); }
.mk-cell.is-dir { background: repeating-linear-gradient(90deg, var(--blue-2) 0 0.5rem, transparent 0.5rem 0.875rem); }
.mk-cell.is-start::before { content: ""; position: absolute; left: -0.125rem; top: 50%; z-index: 1; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--white); translate: 0 -50%; }
.mk-cells--labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.5rem; }
.mk-cells--labels i { font-style: normal; font-size: max(11px, 0.75rem); letter-spacing: 0.04em; color: var(--muted); text-align: center; }
.js [data-reveal] .mk-cell.is-on, .js [data-reveal] .mk-cell.is-dir { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d, 0) * 220ms + var(--i, 0) * 110ms + 250ms); }
.js [data-reveal].is-in .mk-cell.is-on, .js [data-reveal].is-in .mk-cell.is-dir { transform: scaleX(1); }

/* 1. FIRST VIEW */
.mk-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 5.5rem) 0 5.5rem; background: var(--white); }
.mk-hero--inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem 6rem; align-items: center; }
.mk-hero--ttl { margin: 1.5rem 0 0; font-size: max(34px, 4.75rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; color: var(--navy); }
.mk-hero--ttl span { display: block; }
.mk-hero--ttl span:nth-child(3) { color: var(--blue); }
.mk-hero--lead { margin: 2.25rem 0 0; font-size: var(--fs-lg); line-height: 2.1; letter-spacing: 0.04em; color: var(--ink); }
.mk-hero--btns { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2.75rem; }
.mk-hero--art { margin: 0; padding: 0; list-style: none; }
.mk-hero--art li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; column-gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.mk-hero--art li:last-child { border-bottom: 1px solid var(--line); }
.mk-hero--art .mk-cells--labels { grid-column: 2; }
.mk-hero--art .mk-cell { height: 1rem; }
.mk-hero--bar-label { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.mk-hero--art li:nth-child(3) .mk-hero--bar-label { color: var(--blue); }

/* 2. INTRODUCTION */
.mk-intro--inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 6rem; align-items: start; }
.mk-intro--lead { margin: 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; color: var(--navy); }
.mk-intro--problems { margin: 2rem 0 0; padding: 0; list-style: none; }
.mk-intro--problems li { position: relative; padding: 0.9rem 0 0.9rem 2rem; border-top: 1px solid var(--line-2); font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.mk-intro--problems li:last-child { border-bottom: 1px solid var(--line-2); }
.mk-intro--problems li::before { content: ""; position: absolute; left: 0.25rem; top: calc(50% - 1px); width: 1rem; height: 2px; background: var(--orange); }
.mk-intro--text { margin: 2rem 0 0; font-size: var(--fs-lg); line-height: 2.1; letter-spacing: 0.03em; color: var(--ink); }

/* 3. MARKETING FUNCTION MAP（PC: 横に一本の流れ＋3本の帯 / SP: 縦の流れ＋縦の帯） */
.mk-map--diagram { --mk-label: 19rem; position: relative; }
.mk-stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin: 0 0 1.5rem var(--mk-label); padding: 0 0 1.75rem; list-style: none; border-bottom: 1px solid var(--line-2); }
.mk-stages::before { content: ""; position: absolute; left: 1.25rem; right: calc((100% - 1.5rem) / 5 - 1.25rem); top: 1.25rem; height: 2px; background: var(--line-2); }
.mk-stage { position: relative; }
.mk-stage--num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-en); font-size: max(12px, 0.9375rem); font-weight: 600; letter-spacing: 0.04em; }
.mk-stage:first-child .mk-stage--num { background: var(--orange); }
.mk-stage.is-next .mk-stage--num { background: var(--white); color: var(--navy); border: 2px dashed var(--navy); }
.mk-stage--en { display: block; margin-top: 1rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.mk-stage--ja { display: block; margin-top: 0.25rem; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.mk-bands { margin: 0; padding: 0; list-style: none; }
.mk-band { display: grid; grid-template-columns: var(--mk-label) minmax(0, 1fr); grid-template-areas: "head cells" "head note"; align-items: center; padding: 1.5rem 0; }
.mk-band + .mk-band { border-top: 1px solid var(--line-2); }
.mk-band--head { grid-area: head; display: flex; flex-direction: column; gap: 0.2rem; padding-right: 2rem; color: var(--navy); }
.mk-band--head small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.mk-band--head strong { font-size: max(15px, 1.125rem); font-weight: 700; letter-spacing: 0.04em; }
.mk-band--head:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.mk-band--short { display: none; }
.mk-band--cells { grid-area: cells; }
.mk-band .mk-cell { height: 2.75rem; border-radius: 0.25rem; }
.mk-band .mk-cell.is-dir { background: transparent; border: 2px dashed var(--blue-2); }
.mk-band .mk-cell.is-dir em { position: absolute; left: calc(var(--span, 1) * 50% + (var(--span, 1) - 1) * 0.1875rem); top: 50%; padding: 0.1em 0.75em; translate: -50% -50%; background: var(--pale); font-style: normal; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--blue); white-space: nowrap; }
.mk-band .mk-cell.is-start::before { left: -0.625rem; width: 1.25rem; height: 1.25rem; box-shadow: 0 0 0 3px var(--pale); }
.mk-band--note { grid-area: note; margin: 0.75rem 0 0; font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); }
.mk-band--note b { display: none; }
.mk-map--note { margin: 2rem 0 0; padding-left: var(--mk-label); font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); }

/* 4. SUPPORT STYLES（カード3枚ではなく、罫線で区切った3段。右に担当範囲の帯） */
.mk-styles--list { border-top: 1px solid var(--line-2); }
.mk-style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem 4rem; padding: 3.5rem 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 6rem; }
.mk-style--num { display: block; font-family: var(--font-en); font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--blue); opacity: 0.35; }
.mk-style--en { display: block; margin-top: 0.75rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.mk-style--name h3 { margin: 0.75rem 0 0; font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: var(--navy); }
.mk-style--text { margin: 0; font-size: var(--fs-lg); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.mk-style--fit-label { margin: 1.75rem 0 0.5rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.mk-style--fit { margin: 0; padding: 0; list-style: none; }
.mk-style--fit li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; letter-spacing: 0.03em; color: var(--ink); }
.mk-style--side { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.mk-style--range-label { margin: 0 0 1rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.mk-style--range .mk-cell { height: 0.875rem; }
.mk-style--btn > a { min-width: 100%; }

/* 5. HOW TO CHOOSE */
.mk-choose--head { margin-bottom: 3.5rem; text-align: center; }
.mk-choose--head .mk-eyebrow { justify-content: center; }
.mk-choose--list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.mk-choose--list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line-2); }
.mk-choose--if { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.mk-choose--then { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.mk-choose--then:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.mk-choose--cta { display: flex; justify-content: center; margin-top: 3rem; }

/* 6. SUPPORT AREAS（4つのまとまり。カードにしない） */
.mk-areas--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.mk-area { padding-top: 1.5rem; border-top: 2px solid var(--navy); }
.mk-area--ttl { margin: 0; }
.mk-area--en { display: block; font-family: var(--font-en); font-size: max(20px, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; color: var(--navy); }
.mk-area--ja { display: block; margin-top: 0.5rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.mk-area--items { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mk-area--items li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.03em; color: var(--ink); }

/* 7. FEATURES */
.mk-features--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.mk-feature { padding: 0 3rem; }
.mk-feature:first-child { padding-left: 0; }
.mk-feature:last-child { padding-right: 0; }
.mk-feature + .mk-feature { border-left: 1px solid var(--line-2); }
.mk-feature--num { display: block; font-family: var(--font-en); font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--blue); opacity: 0.35; }
.mk-feature h3 { margin: 1.25rem 0 0; font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: var(--navy); }
.mk-feature p { margin: 1rem 0 0; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }

/* 8. SUPPORT FLOW（PC: 横のタイムライン / SP: 縦） */
.mk-flow--steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.mk-flow--steps::before { content: ""; position: absolute; left: 1.5rem; right: calc((100% - 7.5rem) / 6 - 1.5rem); top: 1.5rem; height: 2px; background: var(--line-2); }
.mk-step { position: relative; }
.mk-step--num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-en); font-size: max(12px, 1rem); font-weight: 600; letter-spacing: 0.04em; }
.mk-step:first-child .mk-step--num { background: var(--orange); }
.mk-step h3 { margin: 1.25rem 0 0; font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.mk-step p { margin: 0.5rem 0 0; font-size: var(--fs-sm); line-height: 1.8; letter-spacing: 0.03em; color: var(--muted); }
.js [data-reveal] .mk-step { opacity: 0; transition: opacity 0.6s ease calc(var(--i, 0) * 120ms + 200ms); }
.js [data-reveal].is-in .mk-step { opacity: 1; }

/* 9. CASE STUDY（マーケティング支援の事例があるときだけ） */
.mk-cases--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.mk-case { display: flex; flex-direction: column; padding-top: 1.75rem; border-top: 2px solid var(--navy); }
.mk-case--meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.mk-case--meta span { padding: 0.2em 0.8em; border: 1px solid var(--line-2); border-radius: 0.25rem; background: var(--white); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.mk-case--name { margin: 1rem 0 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.5; color: var(--navy); }
.mk-case--name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mk-case--rows { margin: 1.25rem 0 0; }
.mk-case--rows div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--line-2); font-size: var(--fs-md); line-height: 1.8; }
.mk-case--rows dt { font-weight: 700; color: var(--blue); }
.mk-case--rows dd { margin: 0; color: var(--ink); }
.mk-case--more { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: 1.5rem; font-size: var(--fs-md); font-weight: 700; color: var(--navy); }

/* 10. CONTACT（共通の帯に見出しを足す） */
.cta--txtarea .cta--heading { font-size: var(--fs-h4); font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; color: var(--white); }

@media (max-width: 1080px) {
  .mk-hero--inner { grid-template-columns: 1fr; gap: 3rem; }
  .mk-hero--art { max-width: 40rem; }
  .mk-intro--inner, .mk-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .mk-head--btn { justify-self: start; }
  .mk-style { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-style--side { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; }
  .mk-style--range { flex: 1; max-width: 28rem; }
  .mk-style--btn > a { min-width: min(22.5rem, 100%); }
  .mk-areas--grid, .mk-cases--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-features--list { grid-template-columns: 1fr; gap: 2rem; }
  .mk-feature { padding: 0; }
  .mk-feature + .mk-feature { padding-top: 2rem; border-left: 0; border-top: 1px solid var(--line-2); }
  .mk-flow--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .mk-flow--steps::before { display: none; }
}
@media (max-width: 767px) {
  .mk-hero { padding: calc(var(--header-h) + 2.5rem) 0 3rem; }
  .mk-hero--inner { gap: 2.5rem; }
  .mk-hero--ttl { margin-top: 1.25rem; font-size: max(30px, 2.4rem); line-height: 1.4; letter-spacing: 0.04em; }
  .mk-hero--lead { margin-top: 1.5rem; }
  .mk-hero--btns { margin-top: 2rem; }
  .mk-hero--btns .btn, .mk-hero--btns .btn > a { width: 100%; }
  .mk .btn > a { font-size: var(--fs-md); } /* 「マーケティングについて相談する」が1行で収まる大きさ */
  .mk-hero--art li { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0; }
  .mk-hero--art .mk-cell { height: 0.75rem; }
  .mk-head { margin-bottom: 2.5rem; }
  .mk-title { font-size: var(--fs-h3); }
  .mk-intro--lead { font-size: var(--fs-h6); }
  .mk-intro--problems li { font-size: var(--fs-md); }
  .mk-intro--text, .mk-lead, .mk-style--text { font-size: var(--fs-md); }
  /* 全体図を縦に組み替える（左: 流れ、右: 3本の縦帯） */
  .mk-map--diagram { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 2.6rem); column-gap: 0.5rem; }
  .mk-stages { grid-row: 2; grid-column: 1; grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(5.5rem, 1fr)); margin: 0; padding: 0; border-bottom: 0; }
  .mk-stages::before { left: calc(1.125rem - 1px); right: auto; top: 1.125rem; bottom: 1.125rem; width: 2px; height: auto; }
  .mk-stage { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; align-content: center; }
  .mk-stage--num { grid-row: 1 / 3; width: 2.25rem; height: 2.25rem; font-size: 11px; }
  .mk-stage--en { margin-top: 0; font-size: 11px; }
  .mk-stage--ja { margin-top: 0.1rem; font-size: var(--fs-sm); }
  .mk-bands, .mk-band { display: contents; }
  .mk-band--head { grid-row: 1; grid-column: var(--col); justify-content: flex-end; align-items: center; padding: 0 0 0.75rem; }
  .mk-band--head small, .mk-band--head strong { display: none; }
  .mk-band--short { display: block; writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--navy); }
  .mk-band--cells { grid-row: 2; grid-column: var(--col); }
  .mk-band--cells .mk-cells { grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(5.5rem, 1fr)); height: 100%; }
  .mk-band .mk-cell { height: auto; }
  .mk-band .mk-cell.is-dir em { left: 50%; top: calc(var(--span, 1) * 50% + (var(--span, 1) - 1) * 0.1875rem); padding: 0.75em 0.1em; translate: -50% -50%; writing-mode: vertical-rl; font-size: 11px; }
  .mk-band .mk-cell.is-start::before { left: 50%; top: -0.5rem; width: 1rem; height: 1rem; translate: -50% 0; }
  .mk-band--note { grid-row: calc(3 + var(--d, 0)); grid-column: 1 / -1; margin: 1.25rem 0 0; }
  .mk-band--note b { display: inline-block; margin-right: 0.5em; color: var(--navy); }
  .mk-map--note { grid-row: 6; grid-column: 1 / -1; margin-top: 1.5rem; padding-left: 0; }
  .js [data-reveal] .mk-band .mk-cell.is-on, .js [data-reveal] .mk-band .mk-cell.is-dir { transform: scaleY(0); transform-origin: center top; }
  .js [data-reveal].is-in .mk-band .mk-cell.is-on, .js [data-reveal].is-in .mk-band .mk-cell.is-dir { transform: scaleY(1); }
  .mk-style { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .mk-style--side { flex-direction: column; align-items: stretch; }
  .mk-style--range { max-width: none; }
  .mk-style--btn > a { width: 100%; }
  .mk-choose--head { margin-bottom: 2rem; }
  .mk-choose--list li { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem 0; }
  .mk-choose--if { font-size: var(--fs-md); }
  .mk-choose--then { font-size: var(--fs-md); }
  .mk-areas--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .mk-area--en { font-size: max(16px, 1.2rem); }
  .mk-area--items li { font-size: var(--fs-sm); }
  .mk-flow--steps { grid-template-columns: 1fr; gap: 0; }
  .mk-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.75rem; }
  .mk-step::before { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0; width: 2px; background: var(--line-2); }
  .mk-step:last-child::before { display: none; }
  .mk-step--num { grid-row: 1 / 3; }
  .mk-step h3 { margin-top: 0.6rem; }
  .mk-step p { grid-column: 2; }
  .mk-cases--list { grid-template-columns: 1fr; gap: 2rem; }
  .cta--txtarea .cta--heading { font-size: var(--fs-h5); }
}

/* ---------- ワンストップマーケティング 詳細（page-onestop.php の .os-*。見出し・工程ノード・領域・特徴・流れ・事例は .mk-* を再利用） ---------- */
.cta--sub { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; color: var(--white); font-size: var(--fs-sm); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgba(255,255,255,.5); }
.cta--sub:hover { text-decoration-color: var(--white); }
.mk-features--list.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; }
.mk-features--list.is-4 .mk-feature { padding: 2.5rem 0; border-top: 1px solid var(--line-2); border-left: 0; }
.mk-features--list.is-4 .mk-feature:nth-child(-n+2) { border-top: 0; padding-top: 0; }

/* 1. FIRST VIEW: 見出しとコピーだけで構成 */
.os-hero--h1 { margin: 1.25rem 0 0; font-size: var(--fs-h5); font-weight: 700; letter-spacing: 0.1em; color: var(--navy); }
.os-hero--copy { margin: 2rem 0 0; font-size: max(32px, 4.25rem); font-weight: 700; line-height: 1.35; letter-spacing: 0.05em; color: var(--navy); }
.os-hero--copy span { display: block; }
.os-hero--copy span:last-child { color: var(--blue); }
.os-hero--foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: center; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.os-hero--foot .mk-hero--lead { margin: 0; }
.os-hero--foot .mk-hero--btns { margin: 0; justify-content: flex-end; }

/* 2. お悩み: 2列の罫線リスト */
.os-problems--list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.os-problems--list li { display: flex; align-items: baseline; gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.7; letter-spacing: 0.03em; color: var(--navy); }
.os-problems--list li small { flex: none; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.os-problems--note { max-width: 56rem; margin: 2.5rem 0 0; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }

/* 3. 循環図: 工程ノード（.mk-stages）＋戻り矢印＋全体を横断する DIRECTION */
.os-concept--head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.os-concept--text .mk-lead + .mk-lead { margin-top: 1.25rem; }
.os-cycle { margin-top: 1rem; }
.os-cycle--direction { display: flex; align-items: center; gap: 1.5rem; margin: 0 0 2.5rem; }
.os-cycle--direction::before, .os-cycle--direction::after { content: ""; flex: 1; height: 1px; background: var(--blue); }
.os-cycle--direction > span { display: flex; align-items: baseline; gap: 0.875rem; }
.os-cycle--direction small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.os-cycle--direction strong { font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.os-cycle--direction em { font-style: normal; font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); }
.os-cycle--body { position: relative; }
.os-cycle .mk-stages { margin: 0; padding: 3.25rem 0 0; border-bottom: 0; }
.os-cycle .mk-stages::before { top: 4.5rem; }
.os-cycle--return { position: absolute; left: 1.25rem; right: calc((100% - 1.5rem) / 5 - 1.25rem); top: 0.75rem; height: 2.5rem; border: 2px dashed var(--blue-2); border-bottom: 0; border-radius: 1.25rem 1.25rem 0 0; }
.os-cycle--return::before { content: ""; position: absolute; left: -0.5rem; bottom: -0.2rem; border: 0.45rem solid transparent; border-top: 0.6rem solid var(--blue-2); border-bottom: 0; }
.os-cycle--return span { position: absolute; left: 50%; top: -0.75em; padding: 0 0.75em; translate: -50% 0; background: var(--pale); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--blue); white-space: nowrap; }
.os-cycle--note { margin: 2.5rem 0 0; font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); }

/* 4. 専門領域の広さ: 3×3 の罫線タイル */
.os-team--inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 6rem; align-items: center; }
.os-team--lead { margin: 2rem 0 1.25rem; font-size: var(--fs-h5); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; color: var(--navy); }
.os-fields--label { margin: 0 0 1rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.os-fields--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.os-fields--grid li { display: flex; align-items: center; justify-content: center; min-height: 5.5rem; padding: 1rem; border: 1px solid var(--line-2); border-radius: 0.25rem; background: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; text-align: center; color: var(--navy); }
.js [data-reveal] .os-fields--grid li { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 70ms + 200ms); }
.js [data-reveal].is-in .os-fields--grid li { opacity: 1; }
.os-fields--sum { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.os-fields--sum i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--line-2), var(--navy)); }
.os-fields--sum strong { color: var(--navy); }

/* 5. 比較表（SP はカードに組み替え） */
.os-compare--wrap { overflow-x: auto; }
.os-compare--table { width: 100%; border-collapse: collapse; }
.os-compare--table th, .os-compare--table td { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line-2); font-size: var(--fs-md); line-height: 1.8; letter-spacing: 0.03em; text-align: left; vertical-align: top; }
.os-compare--table thead th { padding-top: 0; border-bottom: 2px solid var(--navy); font-size: var(--fs-h6); font-weight: 700; color: var(--navy); vertical-align: bottom; }
.os-compare--table thead th small { display: block; margin-bottom: 0.25rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.os-compare--table tbody th { width: 16%; font-weight: 700; color: var(--navy); }
.os-compare--table td { color: var(--ink); }
.os-compare--table .is-hybrid { background: var(--pale); }
.os-compare--note { max-width: 56rem; margin: 2.5rem 0 0; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }

/* 8. 支援体制の図 */
.os-org { display: flex; flex-direction: column; align-items: center; max-width: 72rem; margin: 0 auto; text-align: center; }
.os-org--box { display: flex; flex-direction: column; gap: 0.25rem; min-width: 26rem; padding: 1.5rem 3rem; border-radius: 0.25rem; }
.os-org--box small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.os-org--box strong { font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; }
.os-org--box span { font-size: var(--fs-sm); letter-spacing: 0.03em; }
.os-org--client { border: 1px solid var(--navy); color: var(--navy); }
.os-org--client small { color: var(--blue); }
.os-org--client span { color: var(--muted); }
.os-org--link { position: relative; width: 2px; height: 4.5rem; background: var(--blue); }
.os-org--link::before, .os-org--link::after { content: ""; position: absolute; left: 50%; border: 0.4rem solid transparent; translate: -50% 0; }
.os-org--link::before { top: 0; border-top: 0; border-bottom: 0.55rem solid var(--blue); }
.os-org--link::after { bottom: 0; border-bottom: 0; border-top: 0.55rem solid var(--blue); }
.os-org--link span { position: absolute; top: 50%; white-space: nowrap; font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); translate: 0 -50%; }
.os-org--link span:first-child { right: 1.25rem; }
.os-org--link span:last-child { left: 1.25rem; }
.os-org--hub { position: relative; background: var(--navy); color: var(--white); }
.os-org--hub small { color: var(--cyan); }
.os-org--hub span { color: rgba(255,255,255,.75); }
.os-org--hub::after { content: ""; position: absolute; left: 50%; bottom: -2.5rem; width: 2px; height: 2.5rem; background: var(--blue); translate: -50% 0; }
.os-org--specialists { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; width: 100%; margin: 2.5rem 0 0; padding: 1.5rem 0 0; list-style: none; }
.os-org--specialists::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: var(--blue); }
.os-org--specialists li { position: relative; padding: 1.25rem 1rem; border: 1px solid var(--line-2); border-radius: 0.25rem; background: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.os-org--specialists li::before { content: ""; position: absolute; left: 50%; top: -1.5rem; width: 2px; height: 1.5rem; background: var(--blue); translate: -50% 0; }
.os-org--specialists li small { display: block; margin-bottom: 0.25rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.js [data-reveal] .os-org--specialists li { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 90ms + 400ms); }
.js [data-reveal].is-in .os-org--specialists li { opacity: 1; }
.os-org--partners { width: 100%; margin: 1rem 0 0; padding: 1rem 1.5rem; border: 1px dashed var(--blue-2); border-radius: 0.25rem; font-size: var(--fs-sm); line-height: 1.8; letter-spacing: 0.03em; color: var(--ink); }
.os-org--partners small { display: block; margin-bottom: 0.25rem; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }

/* 9. 事例の「もっと見る」 */
.os-cases--more { display: flex; justify-content: center; margin-top: 3rem; }

/* 11. FAQ（details / summary） */
.os-faq--list { border-top: 1px solid var(--line-2); }
.os-faq--item { border-bottom: 1px solid var(--line-2); }
.os-faq--item summary { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem 0; list-style: none; cursor: pointer; }
.os-faq--item summary::-webkit-details-marker { display: none; }
.os-faq--mark { flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-en); font-size: max(12px, 0.9375rem); font-weight: 600; }
.os-faq--mark.is-a { background: var(--white); color: var(--orange); border: 2px solid var(--orange); }
.os-faq--q { flex: 1; font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; color: var(--navy); }
.os-faq--icon { flex: none; position: relative; width: 1.5rem; height: 1.5rem; }
.os-faq--icon::before, .os-faq--icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; background: var(--navy); translate: -50% -50%; transition: var(--transit); }
.os-faq--icon::after { rotate: 90deg; }
.os-faq--item[open] .os-faq--icon::after { rotate: 0deg; }
.os-faq--item summary:hover .os-faq--q { color: var(--blue); }
.os-faq--a { display: flex; gap: 1.25rem; padding: 0 0 1.75rem; }
.os-faq--a p { margin: 0; padding-top: 0.3rem; font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.os-faq--a a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }
.os-faq--a a { display: inline-block; padding: 0.3em 0; } /* タップ領域を 24px 以上に */

@media (max-width: 1080px) {
  .os-hero--foot { grid-template-columns: 1fr; }
  .os-hero--foot .mk-hero--btns { justify-content: flex-start; }
  .os-problems--list { grid-template-columns: 1fr; gap: 0; }
  .os-team--inner { grid-template-columns: 1fr; gap: 3rem; }
  .mk-features--list.is-4 { grid-template-columns: 1fr; gap: 0; }
  .mk-features--list.is-4 .mk-feature:nth-child(2) { border-top: 1px solid var(--line-2); padding-top: 2.5rem; }
  .os-org--link span { display: none; }
  .os-org--specialists { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
  .os-org--specialists li { padding: 1rem 0.5rem; font-size: var(--fs-sm); }
}
@media (max-width: 767px) {
  .os-hero--h1 { font-size: var(--fs-h6); }
  .os-hero--copy { margin-top: 1.5rem; font-size: max(28px, 2.1rem); line-height: 1.45; letter-spacing: 0.03em; }
  .os-hero--foot { margin-top: 2rem; padding-top: 2rem; gap: 1.5rem; }
  .os-problems--list li { padding: 1.1rem 0; font-size: var(--fs-md); }
  .os-cycle--direction { gap: 1rem; margin-bottom: 1.5rem; }
  .os-cycle--direction > span { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .os-cycle--direction::after { display: none; }
  .os-cycle--return { display: none; }
  .os-cycle .mk-stages { padding-top: 0; }
  .os-cycle .mk-stages::before { top: 1.125rem; }
  .os-fields--grid li { min-height: 4.5rem; padding: 0.75rem 0.5rem; font-size: var(--fs-sm); }
  /* 比較表 → 比較軸ごとのカード */
  .os-compare--table, .os-compare--table thead, .os-compare--table tbody, .os-compare--table tr, .os-compare--table th, .os-compare--table td { display: block; }
  .os-compare--table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .os-compare--table tr { padding: 0 0 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); }
  .os-compare--table tbody th { width: auto; padding: 0 0 0.75rem; border-bottom: 2px solid var(--navy); font-size: var(--fs-h6); }
  .os-compare--table td { padding: 0.75rem 0 0; border-bottom: 0; }
  .os-compare--table td::before { content: attr(data-col); display: block; margin-bottom: 0.1rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--blue); }
  .os-compare--table td.is-hybrid { margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.25rem; }
  /* 体制図 → 縦の幹線 */
  .os-org { align-items: stretch; text-align: left; }
  .os-org--box { min-width: 0; padding: 1.25rem 1.5rem; }
  .os-org--link { height: 3rem; margin-left: 1.5rem; }
  .os-org--hub::after { left: 1.5rem; bottom: -2rem; height: 2rem; translate: none; }
  .os-org--specialists { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 2rem; padding: 0 0 0 2.75rem; }
  .os-org--specialists::before { display: none; }
  .os-org--specialists li { padding: 0.9rem 1rem; font-size: var(--fs-md); }
  .os-org--specialists li::before { left: -1.25rem; top: 50%; width: 1.25rem; height: 2px; translate: 0 -50%; }
  .os-org--specialists li::after { content: ""; position: absolute; left: calc(-1.25rem - 1px); top: -0.75rem; bottom: -0.75rem; width: 2px; background: var(--blue); } /* 幹線（各項目の区間をつなぐ） */
  .os-org--specialists li:last-child::after { bottom: 50%; }
  .os-org--specialists li small { display: inline; margin: 0 0.75em 0 0; }
  .os-org--partners { margin-top: 1rem; }
  .os-faq--item summary { gap: 0.875rem; padding: 1.25rem 0; }
  .os-faq--mark { width: 2rem; height: 2rem; }
  .os-faq--q { font-size: var(--fs-md); }
  .os-faq--a { gap: 0.875rem; padding-bottom: 1.5rem; }
}

/* ---------- マーケティング施策支援 詳細（page-execution.php の .ex-*）
   ワンストップ（循環・ハブ）に対して、こちらは「モジュールを追加する／組み合わせる」。四角いモジュールと格子で見せる ---------- */
/* 1. FV: 左にコピー、右に社内チーム＋追加モジュールの図 */
.ex-hero--inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3rem 6rem; align-items: center; }
.ex-hero--lead { margin-top: 2.25rem; }
.ex-hero--art { padding: 1.75rem; border: 1px dashed var(--line-2); border-radius: 0.25rem; }
.ex-hero--team { margin: 0 0 1.25rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.ex-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ex-mod { word-break: keep-all; overflow-wrap: normal; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; min-height: 6.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line-2); border-radius: 0.25rem; background: var(--white); font-family: var(--font-en); font-size: max(15px, 1.125rem); font-weight: 500; color: var(--muted); }
.ex-mod small { font-family: var(--font-jp); font-size: max(11px, 0.75rem); font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.ex-mod.is-added { border-color: var(--navy); background: var(--navy); color: var(--white); }
.ex-mod.is-added small { color: var(--cyan); }
.js [data-reveal] .ex-mod.is-added { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--i, 0) * 140ms + 500ms); }
.js [data-reveal].is-in .ex-mod.is-added { opacity: 1; transform: none; }

/* 3. 役割分担と、3サービスの違い */
.ex-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); align-items: stretch; margin-top: 1rem; }
.ex-split--side { padding: 2rem 2.25rem; border-radius: 0.25rem; }
.ex-split--side small { display: block; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ex-split--side strong { display: block; margin-top: 0.4rem; font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; }
.ex-split--side ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ex-split--side li { padding: 0.55rem 0; border-top: 1px solid currentColor; font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.03em; }
.ex-split--side.is-client { border: 1px solid var(--navy); background: var(--white); color: var(--navy); }
.ex-split--side.is-client small { color: var(--blue); }
.ex-split--side.is-client li { border-color: var(--line-2); color: var(--ink); }
.ex-split--side.is-archlyst { background: var(--navy); color: var(--white); }
.ex-split--side.is-archlyst small { color: var(--cyan); }
.ex-split--side.is-archlyst li { border-color: rgba(255,255,255,.2); }
.ex-split--links { display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; padding: 0 1.5rem; }
.ex-split--links span { position: relative; display: block; padding-bottom: 0.6rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-align: center; color: var(--blue); }
.ex-split--links span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); }
.ex-split--links span::before { content: ""; position: absolute; bottom: -0.35rem; border: 0.4rem solid transparent; }
.ex-split--links .is-forward::before { right: -0.3rem; border-left: 0.6rem solid var(--blue); border-right: 0; }
.ex-split--links .is-back::after { background: repeating-linear-gradient(90deg, var(--blue) 0 0.5rem, transparent 0.5rem 0.8rem); }
.ex-split--links .is-back::before { left: -0.3rem; border-right: 0.6rem solid var(--blue); border-left: 0; }
.ex-roles { margin-top: 4rem; }
.ex-roles--ttl { margin: 0 0 1rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.ex-roles dl { margin: 0; border-top: 1px solid var(--line-2); }
.ex-roles dl > div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 0.5rem 2rem; padding: 1.25rem 1rem; border-bottom: 1px solid var(--line-2); }
.ex-roles dl > div.is-current { background: var(--white); }
.ex-roles dt { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.ex-roles dt a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.ex-roles dt a:hover { color: var(--blue); text-decoration-color: currentColor; }
.ex-roles dt span { margin-left: 0.75rem; white-space: nowrap; padding: 0.15em 0.6em; border-radius: 0.2rem; background: var(--orange); color: var(--white); font-size: max(11px, 0.75rem); vertical-align: 0.1em; }
.ex-roles dd { margin: 0; font-size: var(--fs-md); line-height: 1.8; letter-spacing: 0.03em; color: var(--ink); }

/* 4. 6つのモジュール */
.ex-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line-2); background: var(--line-2); }
.ex-module { padding: 2rem 2rem 2.25rem; background: var(--white); }
.ex-module--ttl { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 1rem; margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--navy); }
.ex-module--num { grid-row: 1 / 3; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.ex-module--en { font-family: var(--font-en); font-size: max(20px, 1.625rem); font-weight: 500; line-height: 1.2; color: var(--navy); }
.ex-module--ja { margin-top: 0.3rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.ex-module--items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.ex-module--items li { position: relative; padding: 0.45rem 0 0.45rem 0.9rem; font-size: var(--fs-md); line-height: 1.6; letter-spacing: 0.02em; color: var(--ink); }
.ex-module--items li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.35rem; height: 0.35rem; background: var(--blue); }

/* 5. 組み合わせマトリクス */
.ex-matrix { --ex-case: 17rem; border-top: 2px solid var(--navy); }
.ex-matrix--row { display: grid; grid-template-columns: var(--ex-case) repeat(6, minmax(0, 1fr)); gap: 0.5rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--line-2); }
.ex-matrix--row.is-head { padding: 1rem 0; }
.ex-matrix--row.is-head span { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-align: center; color: var(--navy); }
.ex-matrix--case { margin: 0; padding-right: 1rem; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.03em; color: var(--navy); }
.ex-matrix--case small { display: block; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: var(--blue); }
.ex-matrix--cell { display: flex; align-items: center; justify-content: center; height: 3rem; border: 1px dashed var(--line-2); border-radius: 0.2rem; }
.ex-matrix--cell b { display: none; }
.ex-matrix--cell.is-on { border: 0; background: var(--navy); }
.js [data-reveal] .ex-matrix--cell.is-on { transform: scale(0.6); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease; transition-delay: calc(var(--r, 0) * 120ms + var(--i, 0) * 40ms + 200ms); }
.js [data-reveal].is-in .ex-matrix--cell.is-on { transform: none; opacity: 1; }

/* 6. 作業代行との違い */
.ex-diff { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); grid-template-areas: "general archlyst" "points points"; gap: 2rem 3rem; }
.ex-diff--col { padding: 2rem 2.25rem; border-radius: 0.25rem; }
.ex-diff--col.is-general { grid-area: general; border: 1px solid var(--line-2); }
.ex-diff--col.is-archlyst { grid-area: archlyst; border: 1px solid var(--navy); }
.ex-diff--label { margin: 0 0 1.5rem; font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.is-general .ex-diff--label { color: var(--muted); }
.ex-diff--steps { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0; padding: 0; list-style: none; }
.ex-diff--steps li { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border: 1px solid var(--line-2); border-radius: 0.2rem; background: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.03em; color: var(--navy); }
.ex-diff--steps li small { font-family: var(--font-en-text); font-size: var(--fs-sm); color: var(--blue); }
.is-archlyst .ex-diff--steps { display: grid; grid-template-columns: repeat(3, max-content); }
.is-archlyst .ex-diff--steps li + li::before { content: ""; position: absolute; left: -1.6rem; top: 50%; width: 1.2rem; height: 2px; background: var(--blue); }
.is-archlyst .ex-diff--steps li:nth-child(3n+1)::before { display: none; } /* 行頭には線を出さない */
.is-general .ex-diff--steps li { color: var(--ink); }
.ex-diff--end { margin: 1.25rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ex-diff--loop { position: relative; margin: 1.5rem 0 0; padding-left: 2rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--blue); }
.ex-diff--loop::before { content: "↻"; position: absolute; left: 0; top: 50%; translate: 0 -50%; font-size: 1.4em; line-height: 1; }
.js [data-reveal] .is-archlyst .ex-diff--steps li { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 110ms + 300ms); }
.js [data-reveal].is-in .is-archlyst .ex-diff--steps li { opacity: 1; }
.ex-diff--points { grid-area: points; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; padding: 2rem 0 0; list-style: none; border-top: 1px solid var(--line-2); }
.ex-diff--points li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; letter-spacing: 0.03em; color: var(--navy); }

/* 8. 体制: 社内チームの枠の中に Archlyst と専門家が入る */
.ex-team { position: relative; max-width: 72rem; margin: 0 auto; padding: 3rem 3rem 2.5rem; border: 2px solid var(--navy); border-radius: 0.25rem; }
.ex-team--label { position: absolute; left: 2rem; top: 0; margin: 0; padding: 0 1rem; translate: 0 -50%; background: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.ex-team--core { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ex-team--box { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 2rem; border-radius: 0.25rem; text-align: center; }
.ex-team--box small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ex-team--box strong { font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; }
.ex-team--box span { font-size: var(--fs-sm); letter-spacing: 0.03em; }
.ex-team--box.is-client { border: 1px solid var(--navy); color: var(--navy); }
.ex-team--box.is-client small { color: var(--blue); }
.ex-team--box.is-client span { color: var(--muted); }
.ex-team--box.is-director { background: var(--navy); color: var(--white); }
.ex-team--box.is-director small { color: var(--cyan); }
.ex-team--box.is-director span { color: rgba(255,255,255,.75); }
.ex-team--link { position: relative; margin: 0; padding: 0 1.5rem; min-width: 12rem; text-align: center; }
.ex-team--link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--blue); }
.ex-team--link span { position: relative; padding: 0 0.6rem; background: var(--white); font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted); }
.ex-team--sub { margin: 2.5rem 0 1rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-align: center; color: var(--blue); }
.ex-team--specialists { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 1.5rem 0 0; list-style: none; border-top: 2px solid var(--blue); }
.ex-team--specialists li { padding: 1rem; border: 1px solid var(--line-2); border-radius: 0.2rem; background: var(--pale); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-align: center; color: var(--navy); }
.ex-team--specialists li small { display: block; margin-bottom: 0.2rem; font-family: var(--font-en); font-size: max(15px, 1.125rem); font-weight: 500; letter-spacing: 0.02em; }
.js [data-reveal] .ex-team--specialists li { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 90ms + 400ms); }
.js [data-reveal].is-in .ex-team--specialists li { opacity: 1; }
.ex-team--partners { max-width: 72rem; margin: 1.25rem auto 0; text-align: center; }

/* 10. 流れ: 「ここから実行」の印。起点のオレンジは実行開始の段に置く */
.ex-flow .mk-step:first-child .mk-step--num { background: var(--navy); }
.ex-flow .mk-step.is-mark .mk-step--num { background: var(--orange); }
.ex-flow--mark { position: absolute; left: 3.5rem; top: 0.85rem; z-index: 1; padding: 0 0.5rem; background: var(--white); font-style: normal; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--orange-dark); white-space: nowrap; }

@media (max-width: 1080px) {
  .ex-hero--inner { grid-template-columns: 1fr; }
  .ex-hero--art { max-width: 36rem; }
  .ex-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-split { grid-template-columns: 1fr; gap: 0; }
  .ex-split--links { flex-direction: row; justify-content: center; gap: 2rem; padding: 1.5rem 0; }
  .ex-split--links span { flex: 1; max-width: 16rem; }
  .ex-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-matrix { --ex-case: 12rem; }
  .ex-diff { grid-template-columns: 1fr; grid-template-areas: "general" "archlyst" "points"; }
  .ex-diff--points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-team--specialists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ex-hero--art { padding: 1.25rem; }
  .ex-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-mod { min-height: 4.5rem; padding: 0.75rem 0.9rem; }
  .ex-split--side { padding: 1.5rem; }
  .ex-split--links { flex-direction: column; gap: 1rem; align-items: center; }
  .ex-split--links span { width: 100%; }
  .ex-roles { margin-top: 3rem; }
  .ex-roles dl > div { grid-template-columns: 1fr; padding: 1rem 0.75rem; }
  .ex-modules { grid-template-columns: 1fr; }
  .ex-module { padding: 1.5rem 1.25rem; }
  .ex-module--items li { font-size: var(--fs-sm); }
  /* マトリクス → CASE ごとに、使うモジュールだけをタグで並べる */
  .ex-matrix--row.is-head { display: none; }
  .ex-matrix--row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.1rem 0; }
  .ex-matrix--case { flex: 0 0 100%; padding: 0 0 0.25rem; }
  .ex-matrix--cell { display: none; }
  .ex-matrix--cell.is-on { display: flex; height: auto; padding: 0.4rem 0.8rem; }
  .ex-matrix--cell.is-on b { display: block; font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--white); }
  .ex-diff--col { padding: 1.5rem 1.25rem; }
  .ex-diff--steps, .is-archlyst .ex-diff--steps { display: flex; flex-direction: column; gap: 0.9rem; }
  .is-archlyst .ex-diff--steps li:nth-child(3n+1)::before { display: block; }
  .is-archlyst .ex-diff--steps li:first-child::before { display: none; }
  .is-archlyst .ex-diff--steps li + li::before { left: 1.5rem; top: -0.9rem; width: 2px; height: 0.9rem; }
  .ex-diff--points { grid-template-columns: 1fr; }
  .ex-team { padding: 2.5rem 1.25rem 1.5rem; }
  .ex-team--label { left: 1rem; font-size: var(--fs-sm); }
  .ex-team--core { grid-template-columns: 1fr; }
  .ex-team--link { min-width: 0; padding: 1.5rem 0; }
  .ex-team--link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ex-team--specialists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .ex-flow--mark { left: 4rem; top: 0.1rem; padding: 0; }
  .ex-flow .mk-step.is-mark h3 { margin-top: 1.6rem; }
}

/* ---------- 外部CMO 詳細（page-cmo.php の .cm-*）
   ワンストップ＝循環、施策支援＝モジュールに対して、こちらは「中心から束ねる」。円・ライン・放射で見せ、紺を強めに使う ---------- */
/* 1. FV: ハブ＆スポーク */
.cm-hero--inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem 5rem; align-items: center; }
.cm-hero--lead { margin-top: 2.25rem; }
.cm-hub { display: block; width: 100%; max-width: 32rem; height: auto; margin-left: auto; overflow: visible; }
.cm-hub--orbit { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; }
.cm-hub--orbit.is-inner { stroke: var(--line); stroke-dasharray: none; }
.cm-hub--line { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-hub--node circle { fill: var(--white); stroke: var(--navy); stroke-width: 1.25; }
.cm-hub--node text { font-family: var(--font-jp); font-size: 14px; font-weight: 700; fill: var(--navy); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.04em; }
.cm-hub--ring { fill: none; stroke: var(--orange); stroke-width: 2; }
.cm-hub--core { fill: var(--navy); }
.cm-hub--en { font-family: var(--font-en); font-size: 30px; font-weight: 500; fill: var(--white); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.06em; }
.cm-hub--ja { font-family: var(--font-jp); font-size: 13px; font-weight: 700; fill: var(--cyan); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.08em; }
.js [data-reveal] .cm-hub--line { stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 90ms + 400ms); }
.js [data-reveal].is-in .cm-hub--line { stroke-dashoffset: 0; }
.js [data-reveal] .cm-hub--node { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 90ms + 800ms); }
.js [data-reveal].is-in .cm-hub--node { opacity: 1; }

/* 2. お悩み: 番号なし、言い切りの文章として並べる */
.cm-problems .os-problems--list li { font-size: max(15px, 1.1875rem); }
.cm-problems--note { margin: 3rem 0 0; font-size: var(--fs-h5); font-weight: 700; line-height: 1.7; letter-spacing: 0.04em; color: var(--navy); }
.cm-problems--note::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; border-radius: 50%; background: var(--orange); vertical-align: 0.1em; }

/* 3. 意思決定スタック: 6層 ＋ CMO が担う範囲（右の縦帯） */
.cm-concept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 6rem; align-items: center; }
.cm-concept--body { margin-top: 2rem; }
.cm-concept--body .mk-lead + .mk-lead { margin-top: 1.25rem; }
.cm-motto { margin: 2.5rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--navy); font-size: var(--fs-h5); font-weight: 700; line-height: 1.7; letter-spacing: 0.04em; color: var(--navy); }
.cm-motto span { display: block; }
.cm-stack { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0 1.25rem; }
.cm-stack--layers { position: relative; margin: 0; padding: 0; list-style: none; }
.cm-stack--layers::before { content: ""; position: absolute; left: 0.6rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--blue); }
.cm-stack--layers li { position: relative; display: grid; grid-template-columns: 1fr; padding: 1rem 1.25rem 1rem 2.5rem; }
.cm-stack--layers li + li { border-top: 1px solid var(--line-2); }
.cm-stack--layers li::before { content: ""; position: absolute; left: calc(0.6rem - 0.4rem + 1px); top: 1.55rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--navy); }
.cm-stack--layers li.is-key::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(238, 138, 24, 0.2); }
.cm-stack--layers small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.cm-stack--layers strong { margin-top: 0.15rem; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.cm-stack--layers em { margin-top: 0.15rem; font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.cm-stack--layers li.is-key { background: var(--white); }
.cm-stack--layers li.is-exec strong { color: var(--muted); }
.cm-stack--span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; margin: 0; border-radius: 999px; background: var(--navy); color: var(--white); writing-mode: vertical-rl; letter-spacing: 0.12em; }
.cm-stack--span strong { font-size: var(--fs-md); font-weight: 700; }
.cm-stack--span span { font-size: var(--fs-sm); color: var(--cyan); }
.js [data-reveal] .cm-stack--layers li { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 110ms + 200ms); }
.js [data-reveal].is-in .cm-stack--layers li { opacity: 1; }
.js [data-reveal] .cm-stack--span { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(0.2, 0.7, 0.2, 1) 300ms; }
.js [data-reveal].is-in .cm-stack--span { clip-path: inset(0 0 0 0); }

/* 4. やる／今はやらない */
.cm-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 6rem; align-items: center; }
.cm-why--body { margin-top: 2rem; }
.cm-why--body .mk-lead + .mk-lead { margin-top: 1.25rem; }
.cm-sort--fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cm-sort--fields li { padding: 0.45rem 1rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.cm-sort--judge { position: relative; display: flex; justify-content: center; height: 6rem; margin: 0; }
.cm-sort--judge::before { content: ""; position: absolute; left: 50%; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--blue); }
.cm-sort--judge span { position: relative; align-self: center; display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--orange); color: var(--white); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; }
.cm-sort--out { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cm-sort--out > div { padding: 1.25rem 1.5rem; border-radius: 0.25rem; }
.cm-sort--out small { display: block; margin-bottom: 0.5rem; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.08em; }
.cm-sort--out ul { margin: 0; padding: 0; list-style: none; }
.cm-sort--out li { padding: 0.3rem 0; font-size: var(--fs-sm); line-height: 1.7; }
.cm-sort--out .is-do { background: var(--navy); color: var(--white); }
.cm-sort--out .is-dont { border: 1px dashed var(--line-2); color: var(--muted); }
.cm-sort--out .is-dont li { text-decoration: line-through; text-decoration-color: var(--line-2); }

/* 5. 4象限（中央に CMO の円） */
.cm-quad { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--navy); background: var(--white); }
.cm-quad--cell { padding: 2.5rem 3rem; }
.cm-quad--cell:nth-of-type(odd) { border-right: 1px solid var(--line-2); }
.cm-quad--cell:nth-of-type(-n+2) { border-bottom: 1px solid var(--line-2); }
.cm-quad--cell:nth-of-type(even) { padding-left: 5.5rem; }
.cm-quad--cell:nth-of-type(odd) { padding-right: 5.5rem; }
.cm-quad--cell h3 { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 1.5rem; }
.cm-quad--en { font-family: var(--font-en); font-size: max(22px, 2rem); font-weight: 500; line-height: 1.1; color: var(--navy); }
.cm-quad--ja { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--blue); }
.cm-quad--cell.is-key .cm-quad--ja { color: var(--orange-dark); }
.cm-quad--cell.is-key .cm-quad--en::after { content: ""; display: inline-block; width: 0.35em; height: 0.35em; margin-left: 0.3em; border-radius: 50%; background: var(--orange); vertical-align: 0.15em; }
.cm-quad--cell ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.cm-quad--cell li { padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: var(--fs-md); letter-spacing: 0.03em; color: var(--ink); }
.cm-quad--core { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem; margin: 0; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 0.6rem var(--white), 0 0 0 calc(0.6rem + 1px) var(--line-2); translate: -50% -50%; }
.cm-quad--core span { font-family: var(--font-en); font-size: max(18px, 1.5rem); font-weight: 500; letter-spacing: 0.08em; color: var(--white); }

/* 6. コンサルとの違い: 同じ起点から、どこまで伸びるか */
.cm-consult { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; align-items: start; }
.cm-consult--label { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--line-2); font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.cm-consult--label small { display: block; margin-top: 0.25rem; font-size: var(--fs-sm); font-weight: 500; }
.is-cmo .cm-consult--label { border-color: var(--navy); color: var(--navy); }
.is-cmo .cm-consult--label small { color: var(--blue); }
.cm-consult ol { position: relative; margin: 0; padding: 0; list-style: none; }
.cm-consult ol::before { content: ""; position: absolute; left: 0.45rem; top: 1.1rem; bottom: 1.1rem; width: 2px; background: var(--line-2); }
.is-cmo ol { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 2rem; }
.is-cmo ol::before { background: var(--blue); }
.cm-consult li { position: relative; padding: 0.65rem 0 0.65rem 2rem; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.03em; color: var(--ink); }
.cm-consult li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); translate: 0 -50%; }
.is-cmo li { color: var(--navy); }
.is-cmo li::before { box-shadow: inset 0 0 0 2px var(--navy); }
.is-cmo li.is-key::before { background: var(--orange); box-shadow: none; }
.is-cmo li:nth-child(n+6)::after { content: ""; position: absolute; left: -1.55rem; top: 50%; width: 1.5rem; height: 2px; background: var(--blue); }
.cm-consult--loop { margin: 1.25rem 0 0; padding-left: 2rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--blue); }
.js [data-reveal] .is-cmo li { opacity: 0; transition: opacity 0.4s ease calc(var(--i, 0) * 80ms + 200ms); }
.js [data-reveal].is-in .is-cmo li { opacity: 1; }

/* 7. 4列の比較表（.os-compare を流用。列が多いので軸の幅を少し狭く） */
@media (min-width: 768px) {
  .cm-compare .os-compare--table tbody th { width: 13%; }
  .cm-compare .os-compare--table th, .cm-compare .os-compare--table td { padding-inline: 1rem; }
}

/* 9. 体制: 上に経営、中央に CMO の円、3方向に放射、下にデータ */
.cm-org { display: flex; flex-direction: column; align-items: center; max-width: 72rem; margin: 0 auto; text-align: center; }
.cm-org--top { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.25rem 2.5rem; border: 1px solid var(--navy); border-radius: 0.25rem; color: var(--navy); }
.cm-org--top small, .cm-org--groups small, .cm-org--data small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.cm-org--top strong { font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; }
.cm-org--top span { font-size: var(--fs-sm); color: var(--muted); }
.cm-org--core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; width: 13rem; height: 13rem; margin-top: 3rem; border-radius: 50%; background: var(--navy); color: var(--white); box-shadow: 0 0 0 0.5rem var(--white), 0 0 0 calc(0.5rem + 2px) var(--orange); }
.cm-org--core::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 3rem; background: var(--blue); translate: -50% -0.5rem; }
.cm-org--core small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.cm-org--core strong { font-family: var(--font-en); font-size: max(22px, 2rem); font-weight: 500; letter-spacing: 0.06em; }
.cm-org--core span { font-size: max(11px, 0.75rem); color: rgba(255,255,255,.75); }
.cm-org--groups { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; width: 100%; margin: 3rem 0 0; padding: 2rem 0 0; list-style: none; }
.cm-org--groups::before { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 0; height: 2px; background: var(--blue); }
.cm-org--groups::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 3.5rem; background: var(--blue); translate: -50% 2px; }
.cm-org--groups > li { position: relative; padding: 1.5rem 1.25rem; border: 1px solid var(--line-2); border-radius: 0.25rem; background: var(--white); }
.cm-org--groups > li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 2rem; background: var(--blue); translate: -50% 0; }
.cm-org--groups > li > p { margin: 0 0 1rem; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.cm-org--groups > li > p small { display: block; margin-bottom: 0.2rem; }
.cm-org--groups ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cm-org--groups ul li { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--pale); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.cm-org--data { position: relative; width: 100%; margin: 3rem 0 0; padding: 1.1rem 1.5rem; border-radius: 0.25rem; background: var(--navy); color: var(--white); font-size: var(--fs-md); letter-spacing: 0.04em; }
.cm-org--data::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 3rem; background: repeating-linear-gradient(180deg, var(--blue) 0 0.4rem, transparent 0.4rem 0.7rem); translate: -50% 0; }
.cm-org--data small { margin-right: 1em; color: var(--cyan); }
.js [data-reveal] .cm-org--groups > li { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 120ms + 400ms); }
.js [data-reveal].is-in .cm-org--groups > li { opacity: 1; transform: none; }

/* 10. 関わり方: 1か月のトラックと3つのリズム */
.cm-track { position: relative; height: 4.5rem; margin-bottom: 3rem; }
.cm-track--label { position: absolute; left: 0; top: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.cm-track--line { position: absolute; left: 0; right: 0; top: 3rem; height: 2px; background: var(--line-2); }
.cm-track i { position: absolute; left: var(--x); top: 3rem; border-radius: 50%; translate: 0 -50%; }
.cm-track .is-monthly { width: 1.5rem; height: 1.5rem; margin-top: 1px; background: var(--orange); z-index: 2; }
.cm-track .is-weekly { width: 0.9rem; height: 0.9rem; margin-top: 1px; margin-left: 0.3rem; background: var(--navy); z-index: 1; }
.cm-track .is-asneeded { width: 0.45rem; height: 0.45rem; margin-top: 1px; background: var(--blue-2); }
.cm-rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
.cm-rhythm > li { padding-top: 1.5rem; border-top: 2px solid var(--navy); }
.cm-rhythm--head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.75rem; margin: 0 0 1.25rem; }
.cm-rhythm--head i { grid-row: 1 / 3; border-radius: 50%; }
.cm-rhythm--monthly .cm-rhythm--head i { width: 1.25rem; height: 1.25rem; background: var(--orange); }
.cm-rhythm--weekly .cm-rhythm--head i { width: 0.9rem; height: 0.9rem; background: var(--navy); }
.cm-rhythm--asneeded .cm-rhythm--head i { width: 0.5rem; height: 0.5rem; background: var(--blue-2); }
.cm-rhythm--head small { font-family: var(--font-en-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.cm-rhythm--head strong { font-size: var(--fs-h6); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.cm-rhythm ul { margin: 0; padding: 0; list-style: none; }
.cm-rhythm ul li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-md); letter-spacing: 0.03em; color: var(--ink); }

/* 12. 流れ: 7ステップ＋3フェーズ */
.cm-flow--phases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.cm-flow--phases span { padding: 0.5rem 0.75rem; border-top: 2px solid var(--navy); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--navy); }
.cm-flow .mk-flow--steps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cm-flow .mk-flow--steps::before { right: calc((100% - 9rem) / 7 - 1.5rem); }
.cm-flow .mk-step:first-child .mk-step--num { background: var(--navy); }
.cm-flow .mk-step h3 { font-size: max(15px, 1.0625rem); line-height: 1.6; }
.cm .mk-case--rows div { grid-template-columns: 6.5rem minmax(0, 1fr); }
/* 長い見出しを単語の途中で折り返さない（Chrome / Edge の文節改行。非対応ブラウザは従来どおり） */
.mk .mk-title, .mk .os-hero--copy, .mk .mk-step h3, .mk .mk-feature h3 { word-break: auto-phrase; }
.cm-flow .mk-step.is-mark .mk-step--num { background: var(--orange); }
.cm-flow--tag { display: none; }

/* 3つの支援の役割 */
.cm-roles--ttl { margin: 0 0 2rem; font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.cm-roles--list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.cm-roles--list > li { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 2.5rem; align-items: center; padding: 1.5rem 1rem; border-bottom: 1px solid var(--line-2); }
.cm-roles--list > li.is-current { background: var(--white); box-shadow: inset 3px 0 0 var(--orange); }
.cm-roles--name { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.cm-roles--name a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.cm-roles--name a:hover { color: var(--blue); text-decoration-color: currentColor; }
.cm-roles--name small { display: block; margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--blue); }
.cm-roles--flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; margin: 0; padding: 0; list-style: none; }
.cm-roles--flow li { display: flex; align-items: center; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.03em; color: var(--navy); }
.cm-roles--flow li + li::before { content: ""; width: 1.5rem; height: 2px; margin: 0 0.6rem; background: var(--blue); }

@media (max-width: 1080px) {
  .cm-hero--inner { grid-template-columns: 1fr; }
  .cm-hub { max-width: 26rem; margin: 0 auto; }
  .cm-concept, .cm-why { grid-template-columns: 1fr; }
  .cm-quad--cell, .cm-quad--cell:nth-of-type(odd), .cm-quad--cell:nth-of-type(even) { padding: 2rem; }
  .cm-quad { padding-top: 0; }
  .cm-quad--core { display: none; }
  .cm-consult { grid-template-columns: 1fr; }
  .cm-org--groups > li { padding: 1.25rem 0.75rem; }
  .cm-rhythm { gap: 0 1.5rem; }
  .cm-flow--phases { display: none; }
  .cm-flow .mk-flow--steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-flow--tag { display: block; margin-bottom: 0.5rem; font-style: normal; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--blue); }
  .cm-flow .mk-step:not(:has(.cm-flow--tag)) { padding-top: calc(var(--fs-sm) * 1.6 + 0.5rem); }
}
@media (max-width: 767px) {
  .cm-hub { max-width: 100%; }
  .cm-problems .os-problems--list li { font-size: var(--fs-md); }
  .cm-problems--note { font-size: var(--fs-h6); }
  .cm-motto { font-size: var(--fs-h6); }
  .cm-stack { grid-template-columns: minmax(0, 1fr) 3rem; gap: 0 0.75rem; }
  .cm-stack--layers li { padding: 0.85rem 0.5rem 0.85rem 2.25rem; }
  .cm-stack--layers strong { font-size: var(--fs-md); }
  .cm-stack--span { gap: 0.5rem; }
  .cm-stack--span span { display: none; }
  .cm-sort--out { grid-template-columns: 1fr; }
  .cm-quad { grid-template-columns: 1fr; }
  .cm-quad--cell, .cm-quad--cell:nth-of-type(odd), .cm-quad--cell:nth-of-type(even) { padding: 1.5rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .cm-quad--cell:last-of-type { border-bottom: 0; }
  .cm-quad--cell ul { grid-template-columns: 1fr; }
  .is-cmo ol { display: block; }
  .is-cmo li:nth-child(n+6)::after { display: none; }
  .cm-org--top { width: 100%; }
  .cm-org--core { width: 11rem; height: 11rem; }
  .cm-org--groups { grid-template-columns: 1fr; gap: 1rem; padding-top: 0; margin-top: 2.5rem; }
  .cm-org--groups::before { display: none; }
  .cm-org--groups::after { height: 2.5rem; }
  .cm-org--groups > li + li::before { height: 1rem; }
  .cm-org--groups > li:first-child::before { display: none; }
  .cm-org--data { text-align: left; }
  .cm-org--data small { display: block; margin: 0 0 0.25rem; }
  .cm-track { margin-bottom: 2rem; }
  .cm-rhythm { grid-template-columns: 1fr; gap: 2rem; }
  .cm-flow .mk-flow--steps { grid-template-columns: 1fr; }
  .cm-flow .mk-step:not(:has(.cm-flow--tag)) { padding-top: 0; }
  .cm-flow--tag { grid-column: 1 / -1; }
  .cm-roles--list > li { grid-template-columns: 1fr; padding: 1.25rem 0.75rem; }
  .cm-roles--flow li + li::before { width: 0.9rem; margin: 0 0.4rem; }
}

/* ---------- マーケティング支援TOP（page-marketing.php の .mt-*）
   デザインラボ（work/marketing-design-lab）の試作を本番化。サイトの色トークンに合わせ、レビュー指摘（SPのはみ出し・見出しの折返し・
   12px 未満の文字・写真の多用・オレンジの面積・ボタン形状）を反映。ヘッダー・フッター・パンくず・CTA帯はサイト共通 ---------- */
.mt { --mt-navy: var(--navy-2); --mt-navy-2: var(--navy); --mt-pale: #f2f5fb; --mt-line: #d9dfec; --mt-ink: #111631; --mt-muted: #545b74; --mt-ease: cubic-bezier(.22, 1, .36, 1); --mt-pad: clamp(22px, 6.6vw, 112px); --mt-section: clamp(88px, 10vw, 168px); color: var(--mt-ink); }
.mt-inner { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--mt-pad); }
.mt-section { padding: var(--mt-section) 0; }
.mt h1, .mt h2, .mt h3, .mt-hero--catch { word-break: auto-phrase; }
.mt-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--mt-navy-2); font: 600 12px/1 var(--font-en-text); letter-spacing: .2em; text-transform: uppercase; }
.mt-eyebrow span { width: 28px; height: 2px; background: var(--orange); }
.mt-index { display: grid; grid-template-columns: 36px auto 1fr; gap: 14px; align-items: center; margin: 0 0 clamp(44px, 6vw, 88px); color: var(--mt-navy-2); }
.mt-index::after { content: ""; height: 1px; background: var(--mt-line); }
.mt-index span { color: var(--orange); font: 600 12px/1 var(--font-en-text); }
.mt-index b { font: 600 12px/1 var(--font-en-text); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.mt-index.is-light { color: rgba(255,255,255,.78); }
.mt-index.is-light::after { background: rgba(255,255,255,.18); }
/* 大見出し: 1行目は紺、最終行は青。上に検索語を含む小見出し（small）を置く */
.mt-title { margin: 0; color: var(--mt-navy); font-size: clamp(36px, 5.6vw, 100px); font-weight: 700; letter-spacing: -.05em; line-height: 1.12; }
.mt-title small { display: block; margin-bottom: clamp(16px, 1.6vw, 26px); color: var(--blue); font-size: max(14px, 1.0625rem); font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.mt-title span { display: block; }
.mt-title .is-accent { color: var(--blue); }
.mt-title.is-light { color: var(--white); }
.mt-title.is-light small, .mt-title.is-light .is-accent { color: var(--cyan); }
.mt-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .6fr); gap: 2rem 7vw; align-items: end; margin-bottom: clamp(52px, 6vw, 84px); }
.mt-head.is-solo { grid-template-columns: 1fr; }
.mt-head--lead { margin: 0 0 10px; color: #646b83; font-size: max(14px, 1rem); line-height: 2; }
.mt-head--lead.is-light { color: rgba(255,255,255,.76); }
.mt-textlink { display: inline-flex; align-items: center; gap: 18px; padding: 10px 0; border-bottom: 1px solid currentColor; color: var(--mt-navy); font-size: max(13px, .875rem); font-weight: 700; letter-spacing: .04em; transition: gap .3s var(--mt-ease); }
.mt-textlink:hover { gap: 26px; }
.mt-textlink.is-light { color: rgba(255,255,255,.92); }

/* FIRST VIEW */
.mt-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(100svh, 980px); padding: calc(var(--header-h) + 64px) 0 96px; color: var(--white); background: var(--mt-navy); }
.mt-hero--grid { position: absolute; inset: 0; z-index: -2; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to right, transparent, #000 35%, #000); }
.mt-hero::after { content: ""; position: absolute; z-index: -1; inset: 0 0 0 52%; background: linear-gradient(145deg, rgba(47,60,183,.55), rgba(137,219,255,.08)); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.mt-hero--inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem 4vw; align-items: center; }
.mt-hero--h1 { display: flex; align-items: center; gap: 14px; margin: 0 0 32px; color: rgba(255,255,255,.86); font-size: max(15px, 1.125rem); font-weight: 700; letter-spacing: .12em; }
.mt-hero--h1 > span { width: 28px; height: 2px; background: var(--orange); }
.mt-hero--h1 small { color: rgba(255,255,255,.6); font: 600 12px/1 var(--font-en-text); letter-spacing: .2em; text-transform: uppercase; }
.mt-hero--catch { margin: 0; font-size: clamp(34px, 4.6vw, 88px); font-weight: 700; letter-spacing: -.06em; line-height: 1.12; }
.mt-hero--catch span { display: block; }
.mt-hero--catch .is-accent { position: relative; width: fit-content; color: var(--cyan); }
.mt-hero--catch .is-accent::after { content: ""; position: absolute; right: -.25em; top: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--orange); }
.mt-hero--lead { margin: clamp(28px, 3.5vw, 56px) 0 0; color: rgba(255,255,255,.82); font-size: max(15px, 1.0625rem); line-height: 2; }
.mt-hero--actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px; margin-top: 40px; }
.mt-hero--visual { position: relative; width: min(100%, 620px); margin-left: auto; padding: clamp(24px, 3.5vw, 60px); }
.mt-orbit { position: absolute; inset: 4% 0 auto 7%; aspect-ratio: 1; pointer-events: none; }
.mt-orbit span { position: absolute; inset: 0; border: 1px solid rgba(137,219,255,.28); border-radius: 50%; }
.mt-orbit .is-one { animation: mtSpin 22s linear infinite; clip-path: polygon(0 0, 55% 0, 55% 100%, 0 100%); }
.mt-orbit .is-two { inset: 13%; border-color: rgba(238,138,24,.35); animation: mtSpin 16s linear infinite reverse; clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%); }
.mt-orbit i { position: absolute; left: 49%; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 10px rgba(238,138,24,.14); }
.mt-hero--label { position: relative; margin: 0 0 24px; color: var(--cyan); font: 600 12px/1 var(--font-en-text); letter-spacing: .18em; text-transform: uppercase; }
.mt-hero--stages { position: relative; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.22); }
.mt-hero--stages li { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 74px; border-bottom: 1px solid rgba(255,255,255,.18); transition: padding .35s var(--mt-ease), background .35s; }
.mt-hero--stages li:hover { padding-left: 14px; background: rgba(255,255,255,.05); }
.mt-hero--stages b { color: var(--orange); font: 500 12px/1 var(--font-en-text); }
.mt-hero--stages span { font: 500 clamp(19px, 1.9vw, 30px)/1 var(--font-en); }
.mt-hero--stages small { color: rgba(255,255,255,.66); font-size: 12px; }

.mt-marquee { display: flex; overflow: hidden; padding: 18px 0; color: var(--white); background: var(--blue); font: 600 13px/1 var(--font-en-text); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.mt-marquee > div { flex: none; padding-right: 20px; animation: mtMarquee 28s linear infinite; }
.mt-marquee i { margin: 0 20px; color: var(--cyan); font-style: normal; }

/* 01 INTRODUCTION（写真は使わない） */
.mt-intro--layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem clamp(48px, 8vw, 150px); align-items: start; }
.mt-intro--copy { max-width: 620px; padding-top: 8px; }
.mt-intro--kicker { margin: 0 0 32px; color: var(--mt-navy); font-size: clamp(21px, 2.2vw, 36px); font-weight: 700; line-height: 1.6; }
.mt-problems { margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid var(--mt-line); }
.mt-problems li { display: grid; grid-template-columns: 42px 1fr; padding: 18px 0; border-bottom: 1px solid var(--mt-line); font-size: max(15px, 1rem); font-weight: 500; }
.mt-problems span { color: var(--orange); font: 600 12px/1.9 var(--font-en-text); }
.mt-intro--text { margin: 0; color: var(--mt-muted); font-size: max(15px, 1rem); line-height: 2.05; }

/* 02 担当範囲マップ（写真の背景は使わず、格子で奥行きを出す） */
.mt-function { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--mt-navy); }
.mt-function::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .5; background-image: linear-gradient(rgba(137,219,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(137,219,255,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 85% 20%, #000, transparent 70%); }
.mt-lab { display: grid; grid-template-columns: minmax(240px, 28%) 1fr; border: 1px solid rgba(255,255,255,.18); }
.mt-lab--tabs { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.18); }
.mt-lab--tabs button { display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; min-height: 132px; padding: 26px; text-align: left; color: rgba(255,255,255,.62); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); cursor: pointer; transition: color .35s, background .35s; }
.mt-lab--tabs button:last-child { border-bottom: 0; }
.mt-lab--tabs button:hover { color: var(--white); }
.mt-lab--tabs button[aria-selected="true"] { color: var(--white); background: var(--blue); }
.mt-lab--tabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.mt-lab--tabs small { grid-row: 1 / 3; color: var(--orange); font: 600 12px/1.5 var(--font-en-text); }
.mt-lab--tabs span { font: 600 12px/1.3 var(--font-en-text); letter-spacing: .08em; }
.mt-lab--tabs b { font-size: max(16px, 1.0625rem); }
.mt-lab--panel { padding: clamp(28px, 4vw, 60px); background: rgba(6,10,48,.6); }
.mt-lab--panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.mt-lab--guide { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.mt-lab--guide p { margin: 0; }
.mt-lab--guide p span { color: var(--cyan); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.mt-lab--guide p b { display: block; margin-top: 10px; font-size: clamp(22px, 2vw, 32px); }
.mt-lab--guide ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.82); font-size: 12px; }
.mt-lab--guide li { display: flex; align-items: center; gap: 7px; }
.mt-lab--guide i { width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.45); }
.mt-lab--guide i.is-archlyst { background: var(--blue); border-color: var(--blue); }
.mt-lab--guide i.is-direction { background: rgba(137,219,255,.13); border-color: var(--cyan); }
.mt-lab--guide i.is-client { background: rgba(255,255,255,.09); }
/* 工程は縦に並ぶ行（試作の5列カードは文字が細切れになるため） */
.mt-lab--rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mt-lab--rows li { display: grid; grid-template-columns: 44px minmax(0, 13rem) minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.72); background: rgba(255,255,255,.04); transition: background .45s, border-color .45s, color .45s; }
.mt-lab--rows li.is-archlyst { color: var(--white); background: rgba(47,60,183,.95); border-color: rgba(137,219,255,.45); }
.mt-lab--rows li.is-direction { color: var(--white); background: rgba(137,219,255,.1); border-color: var(--cyan); }
.mt-lab--num { color: var(--orange); font: 600 12px/1 var(--font-en-text); }
.mt-lab--rows b { font-size: max(16px, 1.125rem); line-height: 1.5; }
.mt-lab--rows small { font-size: 13px; line-height: 1.7; color: inherit; opacity: .9; }
.mt-lab--rows em { padding: 6px 10px; font-size: 12px; font-style: normal; white-space: nowrap; color: var(--white); background: rgba(0,0,0,.22); }
.mt-lab--rows .is-direction em { color: var(--mt-navy); background: var(--cyan); }
.mt-lab--rows .is-client em { color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); }
.mt-lab--summary { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.mt-lab--summary span { display: block; margin-bottom: 8px; color: var(--orange-light); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.mt-lab--summary p { margin: 0; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.7; }

/* 03 3つの支援スタイル */
.mt-styles { background: var(--mt-pale); }
.mt-style-list { border-top: 1px solid #cbd3e3; }
.mt-style { display: grid; grid-template-columns: 80px minmax(260px, .85fr) 1fr; gap: 24px 42px; padding: 52px 30px; border-bottom: 1px solid #cbd3e3; transition: background .45s, padding .45s var(--mt-ease); }
.mt-style:hover { background: var(--white); }
.mt-style.is-primary { color: var(--white); background: var(--blue); border-color: var(--blue); }
.mt-style.is-primary:hover { background: var(--mt-navy-2); }
.mt-style--num { margin: 0; color: var(--orange); font: 600 13px/1 var(--font-en-text); }
.mt-style--name span { display: block; margin-bottom: 18px; color: var(--blue); font: 600 12px/1 var(--font-en-text); letter-spacing: .14em; text-transform: uppercase; }
.mt-style.is-primary .mt-style--name span { color: var(--cyan); }
.mt-style--name h3 { margin: 0; color: inherit; font-size: clamp(26px, 2.8vw, 46px); line-height: 1.3; letter-spacing: -.03em; }
.mt-style:not(.is-primary) .mt-style--name h3 { color: var(--mt-navy); }
.mt-style--body { display: grid; grid-template-columns: 1fr auto; gap: 22px 40px; align-items: end; }
.mt-style--body > p { grid-column: 1 / -1; margin: 0; font-size: max(15px, 1rem); line-height: 1.9; }
.mt-style--body ul { margin: 0; padding: 0; list-style: none; }
.mt-style--body li { padding: 7px 0; font-size: 14px; }
.mt-style--body li::before { content: "+"; margin-right: 10px; color: var(--orange); }
.mt-style.is-primary .mt-style--body li::before { color: var(--orange-light); }

/* HOW TO CHOOSE */
.mt-chooser--layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem 7vw; align-items: start; }
.mt-chooser--title { margin: 0; color: var(--mt-navy); font-size: clamp(30px, 3.4vw, 56px); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; }
.mt-chooser--cta { margin-top: 36px; }
.mt-chooser--list { border-top: 1px solid var(--mt-line); }
.mt-chooser--list a { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 12px 24px; align-items: center; min-height: 92px; padding: 18px 12px; border-bottom: 1px solid var(--mt-line); transition: background .3s, padding .3s; }
.mt-chooser--list a:hover { padding-left: 24px; background: var(--mt-pale); }
.mt-chooser--list span { color: #5f6880; font-size: 14px; }
.mt-chooser--list b { color: var(--mt-navy); font-size: max(16px, 1.0625rem); }
.mt-chooser--list i { color: var(--orange); font-style: normal; }

/* 04 支援領域（イラストは装飾。srcset で幅に合わせて配信） */
.mt-areas { background: #f5f6f9; }
.mt-area-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mt-line); border-left: 1px solid var(--mt-line); }
.mt-area { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(440px, 36vw, 580px); padding: clamp(30px, 4vw, 60px); color: var(--white); background: var(--mt-navy); border-right: 1px solid rgba(255,255,255,.26); border-bottom: 1px solid rgba(255,255,255,.26); }
.mt-area::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6,11,47,.96) 0%, rgba(6,11,47,.76) 43%, rgba(6,11,47,.16) 100%), linear-gradient(0deg, rgba(6,11,47,.86) 0%, transparent 55%); }
.mt-area--img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mt-ease); }
.mt-area:hover .mt-area--img { transform: scale(1.04); }
.mt-area--num { position: absolute; right: clamp(24px, 3vw, 44px); top: clamp(24px, 3vw, 40px); color: var(--orange); font: 600 12px/1 var(--font-en-text); }
.mt-area--en { margin: 0 0 16px; color: var(--cyan); font: 600 12px/1 var(--font-en-text); letter-spacing: .15em; text-transform: uppercase; }
.mt-area h3 { margin: 0; color: var(--white); font-size: clamp(30px, 3.1vw, 50px); letter-spacing: -.04em; }
.mt-area ul { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.mt-area li { padding: 8px 13px; color: var(--white); background: rgba(12,18,79,.76); border: 1px solid rgba(255,255,255,.24); font-size: 13px; }
.mt-area--media { display: inline-flex; align-items: center; gap: 12px; width: fit-content; margin-top: 20px; color: var(--cyan); font-size: 13px; font-weight: 700; border-bottom: 1px solid rgba(137,219,255,.5); padding-bottom: 4px; }
.mt-area--media:hover { color: var(--white); }

/* 05 WHY ARCHLYST（見出しと3つの特徴を横に並べる） */
.mt-features { position: relative; overflow: hidden; color: var(--white); background: var(--mt-navy); }
.mt-features--layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem 6vw; align-items: start; }
.mt-features .mt-title { font-size: clamp(36px, 4.8vw, 88px); }
.mt-features--list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.mt-features--list li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.mt-features--list li > span { color: var(--orange); font: 600 12px/1.6 var(--font-en-text); }
.mt-features--list small { color: var(--cyan); font: 600 12px/1 var(--font-en-text); letter-spacing: .13em; text-transform: uppercase; }
.mt-features--list h3 { margin: 18px 0 14px; color: var(--white); font-size: clamp(22px, 2vw, 32px); line-height: 1.45; }
.mt-features--list p { margin: 0; color: rgba(255,255,255,.76); font-size: max(15px, 1rem); line-height: 1.9; }

/* 06 SUPPORT FLOW */
.mt-flow { background: var(--mt-pale); }
.mt-flow--line { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.mt-flow--line::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--blue); }
.mt-flow--line li { position: relative; padding: 42px 22px 0 0; }
.mt-flow--line li::before { content: ""; position: absolute; top: 2px; left: 0; width: 13px; height: 13px; border: 2px solid var(--blue); border-radius: 50%; background: var(--white); }
.mt-flow--line span { display: block; margin-bottom: 12px; color: var(--orange); font: 600 12px/1 var(--font-en-text); }
.mt-flow--line b { display: block; color: var(--mt-navy); font-size: max(16px, 1.0625rem); }
.mt-flow--line small { display: block; margin-top: 10px; color: #535e78; font-size: 13px; line-height: 1.7; }

.mt-cases { background: var(--white); }
.mt-cases .mt-title { font-size: clamp(30px, 3.4vw, 56px); }

@keyframes mtMarquee { to { transform: translateX(-100%); } }
@keyframes mtSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mt-marquee > div, .mt-orbit span { animation: none; }
}

@media (max-width: 1080px) {
  .mt-hero--inner, .mt-intro--layout, .mt-chooser--layout, .mt-features--layout { grid-template-columns: 1fr; }
  .mt-hero::after { inset: 54% 0 0 24%; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); }
  .mt-hero--visual { width: 100%; margin: 0; padding: 0; }
  .mt-orbit { display: none; }
  .mt-head { grid-template-columns: 1fr; }
  .mt-lab { grid-template-columns: 1fr; }
  .mt-lab--tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .mt-lab--tabs button { min-height: 110px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.15); }
  .mt-lab--tabs button:last-child { border-right: 0; }
  .mt-style { grid-template-columns: 60px 1fr; }
  .mt-style--body { grid-column: 2; }
  .mt-flow--line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .mt-flow--line::before { display: none; }
  .mt-flow--line li { border-top: 1px solid var(--blue); }
}
@media (max-width: 767px) {
  .mt-hero { min-height: 0; padding: calc(var(--header-h) + 40px) 0 72px; }
  .mt-hero--grid { background-size: 44px 44px; }
  .mt-hero--h1 { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 24px; font-size: 15px; white-space: nowrap; }
  .mt-hero--h1 small { flex-basis: 100%; padding-left: 40px; }
  .mt .btn > a { font-size: var(--fs-md); }
  .mt-hero--catch { font-size: clamp(30px, 9.4vw, 46px); letter-spacing: -.04em; }
  .mt-hero--catch .is-accent::after { right: -.2em; }
  .mt-hero--lead { font-size: 15px; line-height: 1.9; }
  .mt-hero--actions { flex-direction: column; align-items: stretch; }
  .mt-hero--actions .mt-textlink { align-self: flex-start; }
  .mt-hero--stages li { grid-template-columns: 34px 1fr auto; min-height: 58px; }
  .mt-hero--stages span { font-size: 18px; }
  .mt-marquee { padding: 14px 0; font-size: 12px; }
  .mt-title { font-size: clamp(32px, 9vw, 44px); }
  .mt-title small { font-size: 14px; }
  .mt-index { margin-bottom: 40px; }
  .mt-intro--kicker { font-size: 21px; }
  .mt-lab--tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .mt-lab--tabs button { flex: 0 0 72%; min-height: 100px; scroll-snap-align: start; }
  .mt-lab--panel { padding: 24px 18px; }
  .mt-lab--guide { flex-direction: column; align-items: flex-start; }
  .mt-lab--guide ul { justify-content: flex-start; }
  .mt-lab--rows li { grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 16px; }
  .mt-lab--rows b, .mt-lab--rows small, .mt-lab--rows em { grid-column: 2; }
  .mt-lab--rows em { justify-self: start; margin-top: 8px; }
  .mt-lab--summary { grid-template-columns: 1fr; }
  .mt-lab--summary .mt-textlink { justify-self: start; }
  .mt-style { grid-template-columns: 1fr; gap: 16px; padding: 36px 20px; }
  .mt-style--body { grid-column: auto; grid-template-columns: 1fr; }
  .mt-style--body .mt-textlink { justify-self: start; }
  .mt-chooser--list a { grid-template-columns: 1fr 20px; gap: 8px 16px; min-height: 104px; }
  .mt-chooser--list span, .mt-chooser--list b { grid-column: 1; }
  .mt-chooser--list i { grid-column: 2; grid-row: 1 / 3; }
  .mt-chooser--cta .btn > a { width: 100%; }
  .mt-area-grid { grid-template-columns: 1fr; }
  .mt-area { min-height: 460px; }
  .mt-features--list li { grid-template-columns: 36px 1fr; padding: 30px 0; }
  .mt-flow--line { grid-template-columns: 1fr 1fr; gap: 40px 18px; }
  .mt-flow--line li { padding-right: 8px; }
}

/* ---------- マーケティング支援TOP v2（FV: 白ベース＋淡いブルーの光、明朝の大見出し、正円のマーケティングサイクル） ----------
   円は .mt-v2-cycle（正方形）の中に描き、工程の点は PHP が角度から計算した --x / --y で円周上に置く。 */
.mt-v2 { --mt-v2-line: rgba(70, 98, 142, .17); --mt-v2-pale: #f6f9fc; --mt-v2-dot: #3388df; background: var(--white); }
.mt-v2 .mt-hero { min-height: min(100svh, 920px); padding: calc(var(--header-h) + 64px) 0 96px; color: var(--navy-2); background: #fff; }
.mt-v2 .mt-hero--grid { inset: -10% -6%; opacity: 1; background: radial-gradient(circle at 12% 14%, rgba(214,233,250,.75), transparent 22%), radial-gradient(circle at 30% 2%, rgba(222,236,250,.6), transparent 16%), radial-gradient(circle at 68% 52%, rgba(205,227,250,.7), transparent 30%), radial-gradient(circle at 92% 30%, rgba(225,238,251,.6), transparent 20%), radial-gradient(circle at 46% 92%, rgba(228,240,251,.6), transparent 24%); mask-image: none; filter: blur(24px); }
.mt-v2 .mt-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.1) 46%, rgba(255,255,255,.35)); clip-path: none; pointer-events: none; }
.mt-v2 .mt-hero--inner { width: min(100% - 2 * clamp(24px, 5.6vw, 96px), 110rem); grid-template-columns: auto minmax(0, 1fr); gap: 3rem clamp(24px, 3vw, 56px); max-width: none; padding-inline: 0; }
.mt-v2 .mt-hero--copy { position: relative; z-index: 2; }
.mt-v2 .mt-hero--h1 { gap: 14px; margin-bottom: clamp(32px, 3.6vw, 56px); color: var(--navy-2); font-size: max(15px, 1.125rem); letter-spacing: .08em; }
.mt-v2 .mt-hero--h1 > span { width: 30px; background: var(--orange); }
.mt-v2 .mt-hero--h1 small { color: #8a93a6; letter-spacing: .26em; }
.mt-v2 .mt-hero--catch { color: var(--navy-2); font-family: var(--font-jp-serif); font-size: clamp(40px, 3.45vw, 66px); font-weight: 500; letter-spacing: .02em; line-height: 1.5; }
.mt-v2 .mt-hero--catch span { display: block; white-space: nowrap; }
.mt-v2 .mt-hero--catch .is-accent { color: var(--navy-2); }
.mt-v2 .mt-hero--catch .is-accent::after { display: none; }
.mt-v2 .mt-hero--lead { max-width: 35em; margin-top: clamp(26px, 2.6vw, 40px); color: #1b2550; font-size: max(16px, 1.0625rem); font-weight: 500; line-height: 2; }
.mt-v2 .mt-hero--actions { margin-top: clamp(30px, 3vw, 44px); gap: 18px 40px; }
.mt-v2 .mt-hero--actions .mt-textlink.is-light { color: var(--navy-2); border-color: var(--navy-2); }

.mt-v2 .mt-hero--visual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 32px); align-items: center; width: 100%; margin: 0; padding: 0; }
/* 正円のサイクル。ラベルは円の外へはみ出すので、左右に余白を取る */
/* ラベルのはみ出し（左 約100px・右 約150px）を見込んで幅を決め、少し左へ寄せる */
.mt-v2-cycle { position: relative; width: min(100% - 250px, 460px); aspect-ratio: 1; margin: 64px auto; transform: translateX(-25px); }
.mt-v2-cycle--disc { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(64,128,205,.28); }
.mt-v2-cycle--disc i { position: absolute; border-radius: 50%; pointer-events: none; }
/* 太い半透明の帯（右下が少し濃い） */
.mt-v2-cycle--disc i:nth-child(1) { inset: 7%; background: conic-gradient(from 200deg, rgba(150,196,236,.16), rgba(96,160,226,.34) 40%, rgba(150,196,236,.16) 70%, rgba(176,212,242,.12)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); }
/* 中央の白い面と柔らかな光 */
.mt-v2-cycle--disc i:nth-child(2) { inset: 15%; background: radial-gradient(circle, #fff 58%, rgba(255,255,255,.75)); box-shadow: 0 0 60px rgba(120,176,232,.22), inset 0 0 40px rgba(170,206,240,.25); }
/* 外側の細い補助線 */
.mt-v2-cycle--disc i:nth-child(3) { inset: -9%; border: 1px solid rgba(64,128,205,.1); }
.mt-v2-cycle--center { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64%; margin: 0; text-align: center; transform: translate(-50%, -50%); }
.mt-v2-cycle--center span { display: block; margin: 10px 0; color: var(--navy-2); font: 500 11px/1 var(--font-en-text); letter-spacing: .34em; white-space: nowrap; }
.mt-v2-cycle--nodes { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.mt-v2-cycle--nodes li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.mt-v2-cycle--nodes i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--mt-v2-dot); box-shadow: 0 0 0 6px rgba(51,136,223,.1); }
.mt-v2-cycle--nodes div { position: absolute; top: -34px; color: var(--navy-2); white-space: nowrap; }
.mt-v2-cycle--nodes .is-right div { left: 22px; }
.mt-v2-cycle--nodes .is-left div { right: 22px; text-align: right; }
/* 左横の点はラベルを点の左上に置く（参考デザインの Next Strategy と同じ配置） */
.mt-v2-cycle--nodes .is-above-left div { right: -56px; top: auto; bottom: 22px; text-align: right; }
.mt-v2-cycle--nodes b { display: block; margin-bottom: 6px; color: var(--mt-v2-dot); font: 500 14px/1 var(--font-en-text); letter-spacing: .04em; }
.mt-v2-cycle--nodes span { display: block; font: 600 clamp(19px, 1.45vw, 24px)/1.15 var(--font-en); letter-spacing: 0; }
.mt-v2-cycle--nodes small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }

.mt-v2-cycle--aside { align-self: center; padding: 8px 0 8px clamp(18px, 1.8vw, 28px); border-left: 1px solid rgba(60,84,125,.14); }
.mt-v2-cycle--aside p { margin: 0; color: var(--navy-2); font-family: var(--font-jp-serif); font-size: 18px; font-weight: 600; line-height: 2.2; letter-spacing: .06em; white-space: nowrap; }
.mt-v2-cycle--aside > span { display: block; width: 30px; height: 1px; margin: 30px 0 36px; background: #71809b; }
.mt-v2-cycle--aside small { display: block; color: #8a95aa; font: 500 11px/2.8 var(--font-en-text); letter-spacing: .24em; white-space: nowrap; }

.mt-v2 .mt-marquee { display: none; }
.mt-v2 .mt-title { font-family: var(--font-jp-serif); font-size: clamp(38px, 4.4vw, 72px); font-weight: 500; letter-spacing: .015em; line-height: 1.35; }
.mt-v2 .mt-title small { font-family: var(--font-jp); font-weight: 600; }
.mt-v2 .mt-title .is-accent { color: var(--blue); }
.mt-v2 .mt-intro, .mt-v2 .mt-chooser, .mt-v2 .mt-areas, .mt-v2 .mt-cases { position: relative; isolation: isolate; overflow: hidden; }
.mt-v2 .mt-intro::before, .mt-v2 .mt-chooser::before { content: ""; position: absolute; z-index: -1; width: min(62vw, 900px); aspect-ratio: 1.45; border-radius: 50%; opacity: .55; background: repeating-radial-gradient(ellipse at 76% 22%, transparent 0 58px, var(--mt-v2-line) 59px 60px, transparent 61px 96px); mask-image: linear-gradient(120deg, transparent 3%, #000 40%, transparent 100%); pointer-events: none; }
.mt-v2 .mt-intro::before { right: -12vw; top: 3rem; }
.mt-v2 .mt-chooser::before { left: -20vw; top: -4rem; transform: scaleX(-1); }
.mt-v2 .mt-styles, .mt-v2 .mt-flow { background: var(--mt-v2-pale); }
.mt-v2 .mt-style.is-primary { background: var(--navy); }
.mt-v2 .mt-index { color: var(--navy-2); }
.mt-v2 .mt-index.is-light { color: rgba(255,255,255,.78); }

@media (prefers-reduced-motion: reduce) {
  .mt-v2 .mt-hero--grid { filter: none; }
}

@media (max-width: 1519px) {
  .mt-v2-cycle--aside { display: none; }
  .mt-v2 .mt-hero--visual { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .mt-v2 .mt-hero { padding-top: calc(var(--header-h) + 48px); }
  .mt-v2 .mt-hero--inner { grid-template-columns: 1fr; }
  .mt-v2 .mt-hero--copy { max-width: 760px; }
  .mt-v2 .mt-hero--visual { grid-template-columns: minmax(0, 1fr) auto; width: min(100%, 820px); margin: 24px auto 0; }
  .mt-v2-cycle { width: min(100% - 250px, 420px); }
  .mt-v2-cycle--aside { display: block; }
}

@media (max-width: 767px) {
  .mt-v2 .mt-hero { min-height: 0; padding: calc(var(--header-h) + 32px) 0 56px; }
  .mt-v2 .mt-hero--grid { filter: blur(14px); background: radial-gradient(circle at 8% 10%, rgba(214,233,250,.75), transparent 26%), radial-gradient(circle at 90% 70%, rgba(205,227,250,.75), transparent 34%), radial-gradient(circle at 50% 40%, rgba(228,240,251,.6), transparent 26%); }
  .mt-v2 .mt-hero--h1 { margin-bottom: 26px; }
  .mt-v2 .mt-hero--h1 small { flex-basis: auto; padding-left: 0; font-size: 11px; }
  .mt-v2 .mt-hero--catch { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.5; }
  .mt-v2 .mt-hero--lead { margin-top: 22px; font-size: 16px; line-height: 1.9; }
  .mt-v2 .mt-hero--visual { display: block; width: 100%; margin-top: 8px; }
  .mt-v2-cycle { width: min(100% - 150px, 230px); margin: 72px auto 48px; transform: translateX(-12px); }
  .mt-v2-cycle--disc i:nth-child(1) { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); }
  .mt-v2-cycle--center span { margin: 5px 0; font-size: 11px; letter-spacing: .08em; }
  .mt-v2-cycle--nodes i { left: -5px; top: -5px; width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(51,136,223,.1); }
  .mt-v2-cycle--nodes div { top: -24px; }
  .mt-v2-cycle--nodes .is-right div { left: 13px; }
  .mt-v2-cycle--nodes .is-left div { right: 13px; }
  .mt-v2-cycle--nodes .is-above-left div { right: -40px; bottom: 13px; }
  .mt-v2-cycle--nodes b { margin-bottom: 4px; font-size: 11px; }
  .mt-v2-cycle--nodes span { font-size: 15px; }
  .mt-v2-cycle--nodes small { margin-top: 4px; font-size: 11px; }
  .mt-v2-cycle--aside { display: none; }
  .mt-v2 .mt-title { font-size: clamp(34px, 9.4vw, 42px); line-height: 1.4; }
  .mt-v2 .mt-intro::before, .mt-v2 .mt-chooser::before { width: 150vw; opacity: .38; }
}

/* ---------- マーケティング支援 個別サービスページ（改修版 page-sv-*.php の .sv-*）
   .mt-*（マーケティング支援TOP）を土台に、見出しサイズを抑え（PC H1 最大68px / H2 最大60px、SP H1 40px台 / H2 30px台）、本文16px以上、
   クールグレー背景と軌道線・グリッドを加える。担当区分は色＋日本語ラベル（.sv-owner） ---------- */
.sv .mt-title { font-size: clamp(32px, 3.9vw, 60px); letter-spacing: -.04em; }
.sv .mt-title small { font-size: 16px; }
.sv .mt-head--lead { font-size: 16px; color: var(--mt-muted); }
.sv .mt-head--lead.is-light { color: rgba(255,255,255,.8); }
.sv-hero--catch { font-size: clamp(36px, 4.2vw, 68px); letter-spacing: -.045em; line-height: 1.2; }
.sv-hero--catch span { white-space: nowrap; }
.sv-hero--catch .is-accent:not(:last-child)::after { display: none; }
.sv-onestop .sv-hero--catch { font-size: clamp(34px, 3.7vw, 58px); }
.sv-ring--ja { font-size: 13px !important; }
.sv .mk-step p, .sv .mt-flow--line small, .sv .cm-quad--cell li { font-size: 16px; }
.sv .mt-lab--summary p, .sv .mk-case--rows div, .sv .mk-cases .mk-lead { font-size: 16px; }
.sv-model--note, .sv-agenda > p { font-size: 14px; }
.sv .mk-cases > .inner { width: 100%; max-width: 1560px; padding: 0 clamp(22px, 6.6vw, 112px); }
.sv-select--panel dl > div { grid-template-columns: 14rem 1fr; }
.sv-hero--message { margin: 26px 0 0; padding-left: 16px; border-left: 2px solid var(--orange); color: var(--white); font-size: 17px; font-weight: 700; line-height: 1.7; }
.sv .mt-hero--lead { font-size: 16px; }
.sv .mt-hero { min-height: min(100svh, 900px); }
.sv-hero--visual { position: relative; width: min(100%, 560px); margin-left: auto; }
.sv .btn > a { min-height: 48px; }
.sv .mt-textlink { min-height: 44px; font-size: 15px; }
.sv-note { margin: 28px 0 0; color: var(--mt-muted); font-size: 16px; line-height: 1.9; }
/* クールグレー背景＋細い軌道線とグリッド */
.sv-bg { position: relative; isolation: isolate; overflow: hidden; background: #f3f5f9; }
.sv-bg::before { content: ""; position: absolute; z-index: -1; top: -80px; right: -12vw; width: min(70vw, 980px); aspect-ratio: 1.3; opacity: .7; background: repeating-radial-gradient(ellipse at 70% 30%, transparent 0 62px, rgba(112,122,145,.16) 63px 64px, transparent 65px 104px); mask-image: linear-gradient(120deg, transparent 5%, #000 40%, #000 75%, transparent 100%); pointer-events: none; }
.sv-bg::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 46%; height: 50%; opacity: .6; background-image: linear-gradient(rgba(112,122,145,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(112,122,145,.1) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(45deg, #000 10%, transparent 75%); pointer-events: none; }
/* 担当区分ラベル */
.sv-owner { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 10px; font-size: 13px; font-style: normal; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid; }
.sv-owner::before { content: ""; width: 10px; height: 10px; border: 1px solid currentColor; }
.sv-owner.is-archlyst { color: var(--white); background: var(--blue); border-color: var(--blue); }
.sv-owner.is-archlyst::before { background: var(--white); }
.sv-owner.is-direction { color: var(--mt-navy); background: rgba(137,219,255,.25); border-color: #5fbfe6; }
.sv-owner.is-client { color: var(--mt-navy); background: var(--white); border-color: var(--mt-line); }
.sv-owner.is-shared { color: var(--mt-navy); background: #fff4e6; border-color: var(--orange); }
.sv-owner.is-shared::before { background: var(--orange); border-color: var(--orange); }
/* 画像 */
.sv-image { position: relative; margin: 0; overflow: hidden; background: var(--mt-navy); }
.sv-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mt-ease); }
.sv-image:hover img { transform: scale(1.03); }
.sv-image.is-tall { min-height: 420px; }
.sv-image.is-tall img { position: absolute; inset: 0; }

/* 向いている企業＋支援モデル */
.sv-fit--layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 64px; align-items: start; }
.sv-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mt-line); }
.sv-checks li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--mt-line); color: var(--mt-navy); font-size: 17px; font-weight: 700; line-height: 1.7; }
.sv-checks .sub-check { flex: none; width: 22px; height: 22px; margin-top: 3px; }
.sv-model { margin: 0; padding: 32px; background: var(--white); border-top: 3px solid var(--mt-navy); box-shadow: 0 20px 50px rgba(12,18,79,.08); }
.sv-model figcaption { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.sv-model--tag { width: fit-content; padding: 4px 10px; color: var(--white); background: var(--mt-navy); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.sv-model figcaption strong { color: var(--mt-navy); font-size: 20px; line-height: 1.5; }
.sv-model dl { margin: 0; }
.sv-model dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--mt-line); }
.sv-model dt { color: var(--mt-muted); font: 700 13px/1.9 var(--font-en-text); letter-spacing: .08em; }
.sv-model .is-after dt { color: var(--orange-dark); }
.sv-model dd { margin: 0; color: var(--mt-ink); font-size: 16px; line-height: 1.85; }
.sv-model--note { margin: 16px 0 0; color: var(--mt-muted); font-size: 13px; line-height: 1.7; }
/* 問題 → 起きること */
.sv-effects { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mt-line); }
.sv-effects li { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--mt-line); }
.sv-effects b { color: var(--mt-navy); font-size: 17px; line-height: 1.6; }
.sv-effects i { color: var(--orange); font-style: normal; text-align: center; }
.sv-effects span { color: var(--mt-muted); font-size: 16px; line-height: 1.7; }

/* 役割分担 */
.sv-structure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.sv-roles { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mt-line); }
.sv-roles li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 12px; border-bottom: 1px solid var(--mt-line); background: rgba(255,255,255,.6); }
.sv-roles li.is-key { background: var(--white); box-shadow: inset 3px 0 0 var(--orange); }
.sv-roles--who { margin: 0; color: var(--mt-navy); font-size: 17px; font-weight: 700; line-height: 1.5; }
.sv-roles--who small { display: block; margin-top: 2px; color: var(--mt-muted); font-size: 13px; font-weight: 500; }
.sv-roles--what { margin: 0; color: var(--mt-ink); font-size: 16px; line-height: 1.7; }
.sv-structure .sv-roles li { grid-template-columns: 1fr auto; }
.sv-structure .sv-roles--what { grid-column: 1; }
.sv-structure .sv-roles .sv-owner { grid-column: 2; grid-row: 1 / 3; }
.sv-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 28px; padding: 24px 28px; background: #f3f5f9; }
.sv-extend p { flex: 1 1 100%; margin: 0; color: var(--mt-navy); font-size: 17px; font-weight: 700; }

/* 3サービスの違い */
.sv-compare--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mt-line); background: var(--white); }
.sv-compare--list > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 36px 32px; border-right: 1px solid var(--mt-line); }
.sv-compare--list > li:last-child { border-right: 0; }
.sv-compare--list > li.is-current { color: var(--white); background: var(--mt-navy); }
.sv-compare--en { margin: 0; color: var(--blue); font: 600 12px/1 var(--font-en-text); letter-spacing: .14em; text-transform: uppercase; }
.is-current .sv-compare--en { color: var(--cyan); }
.sv-compare--list h3 { margin: 6px 0 0; color: var(--mt-navy); font-size: 22px; line-height: 1.5; }
.is-current h3 { color: var(--white); }
.sv-compare--short { margin: 0; color: var(--orange-dark); font-size: 15px; font-weight: 700; }
.is-current .sv-compare--short { color: var(--orange-light); }
.sv-compare--text { flex: 1; margin: 6px 0 16px; font-size: 16px; line-height: 1.85; }
.sv-compare--here { width: fit-content; padding: 6px 12px; color: var(--mt-navy); background: var(--white); font-size: 14px; font-weight: 700; }
.sv-compare--list .mt-textlink { align-self: flex-start; }

/* ワンストップ: ヒーローの循環リング */
.sv-ring { display: block; width: 100%; height: auto; overflow: visible; }
.sv-ring--track { fill: none; stroke: rgba(137,219,255,.25); stroke-width: 1; }
.sv-ring--flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 18 82; stroke-linecap: round; animation: svRing 9s linear infinite; transform-origin: center; }
.sv-ring--inner { fill: none; stroke: rgba(255,255,255,.12); stroke-dasharray: 3 6; }
.sv-ring--spoke { stroke: rgba(137,219,255,.22); stroke-width: 1; }
.sv-ring--node rect { fill: var(--mt-navy); stroke: rgba(137,219,255,.6); stroke-width: 1; }
.sv-ring--node text { fill: var(--white); font: 600 14px var(--font-en); text-anchor: middle; dominant-baseline: central; letter-spacing: .02em; }
.sv-ring--core { fill: var(--blue); stroke: var(--orange); stroke-width: 2; }
.sv-ring--en { fill: var(--white); font: 600 24px var(--font-en); text-anchor: middle; dominant-baseline: central; }
.sv-ring--ja { fill: var(--cyan); font: 700 14px var(--font-jp); text-anchor: middle; dominant-baseline: central; }
.js [data-reveal] .sv-ring--node { opacity: 0; transition: opacity .5s ease calc(var(--i, 0) * 90ms + 300ms); }
.js [data-reveal].is-in .sv-ring--node { opacity: 1; }
@keyframes svRing { to { stroke-dashoffset: -100; } }
/* ワンストップ: まとめ発注との違い */
.sv-bundle { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; }
.sv-bundle--side { padding: 36px; border: 1px solid var(--mt-line); }
.sv-bundle--side.is-connected { border-color: var(--mt-navy); background: #f3f5f9; }
.sv-bundle--label { margin: 0 0 24px; color: var(--mt-navy); font-size: 19px; font-weight: 700; }
.is-scatter .sv-bundle--label { color: var(--mt-muted); }
.is-scatter ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.is-scatter li { padding: 16px; border: 1px dashed var(--line-2); }
.is-scatter li:nth-child(even) { transform: translateY(14px); }
.is-scatter b { display: block; color: var(--mt-ink); font-size: 16px; }
.is-scatter small { color: var(--mt-muted); font-size: 13px; }
.sv-bundle--note { margin: 28px 0 0; color: var(--mt-muted); font-size: 16px; line-height: 1.7; }
.is-connected .sv-bundle--note { color: var(--mt-navy); font-weight: 700; }
.sv-bundle--hub { position: relative; display: grid; place-items: center; min-height: 300px; }
.sv-bundle--core { position: relative; z-index: 1; display: grid; place-items: center; width: 150px; height: 150px; margin: 0; border-radius: 50%; color: var(--white); background: var(--mt-navy); box-shadow: 0 0 0 8px #f3f5f9, 0 0 0 10px var(--orange); font-size: 16px; font-weight: 700; text-align: center; line-height: 1.5; padding: 20px; }
.sv-bundle--hub ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; border: 1px solid rgba(47,60,183,.35); border-radius: 50%; width: min(100%, 300px); height: 300px; margin: auto; }
.sv-bundle--hub li { position: absolute; left: 50%; top: 50%; padding: 6px 12px; color: var(--white); background: var(--blue); font-size: 14px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg - 90deg)) translate(150px) rotate(calc(var(--i) * -72deg + 90deg)); }
/* ワンストップ: 外部チーム */
.sv-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: stretch; margin-bottom: 56px; }
.sv-team .os-fields--grid li { font-size: 16px; }
.sv-table .os-compare--table th, .sv-table .os-compare--table td { font-size: 16px; }
.sv-table { background: var(--white); }
/* ワンストップ: 最初の90日 */
.sv-days { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.sv-days > li { position: relative; padding: 0 32px 0 0; }
.sv-days > li::before { content: ""; display: block; height: 10px; margin-bottom: 28px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); opacity: calc(.55 + var(--i) * .2); }
.sv-days > li.is-goal::before { background: linear-gradient(90deg, var(--blue-2), var(--orange)); opacity: 1; }
.sv-days--range { margin: 0; color: var(--blue); font: 700 15px/1 var(--font-en-text); letter-spacing: .06em; }
.is-goal .sv-days--range { color: var(--orange-dark); }
.sv-days h3 { margin: 12px 0 16px; color: var(--mt-navy); font-size: 24px; }
.sv-days ul { margin: 0; padding: 0; list-style: none; }
.sv-days ul li { padding: 10px 0; border-top: 1px solid var(--mt-line); font-size: 16px; color: var(--mt-ink); }

/* 外部CMO: ヒーローの意思決定フロー */
.sv-decide { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; text-align: center; }
.sv-decide > li { position: relative; }
.sv-decide > li + li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 30px; background: rgba(137,219,255,.5); transform: translateX(-50%); }
.sv-decide small { display: block; margin-bottom: 4px; color: var(--cyan); font: 600 12px/1 var(--font-en-text); letter-spacing: .14em; text-transform: uppercase; }
.sv-decide--top, .sv-decide--exec, .sv-decide--next { min-width: 260px; padding: 14px 24px; border: 1px solid rgba(255,255,255,.35); color: var(--white); font-size: 16px; font-weight: 700; }
.sv-decide--hub span { display: grid; place-content: center; width: 150px; height: 150px; border-radius: 50%; color: var(--white); background: var(--blue); box-shadow: 0 0 0 8px var(--mt-navy), 0 0 0 10px var(--orange); font-size: 22px; font-weight: 700; }
.sv-decide--spokes ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(137,219,255,.5); }
.sv-decide--spokes li { padding: 10px 8px; color: var(--white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sv-decide--next { border-color: var(--orange); }
.sv-decide--next::after { content: "↻ 次の判断へ"; position: absolute; right: -112px; top: 50%; color: var(--orange-light); font-size: 13px; font-weight: 700; transform: translateY(-50%); white-space: nowrap; }
.js [data-reveal] .sv-decide > li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal].is-in .sv-decide > li { opacity: 1; transform: none; }
.js [data-reveal] .sv-decide > li:nth-child(2) { transition-delay: .15s; } .js [data-reveal] .sv-decide > li:nth-child(3) { transition-delay: .3s; } .js [data-reveal] .sv-decide > li:nth-child(4) { transition-delay: .45s; } .js [data-reveal] .sv-decide > li:nth-child(5) { transition-delay: .6s; }
/* 外部CMO: 4つの問い */
.sv-quad .cm-quad--cell { background: var(--white); }
.sv-quad--q { display: block; margin-top: 8px; color: var(--mt-navy); font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.4; }
.sv-quad .cm-quad--cell li { font-size: 16px; }
/* 外部CMO: 役割分担図 */
.sv-rolemap { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.sv-rolemap > p, .sv-rolemap li { position: relative; margin: 0; padding: 16px 20px; background: var(--white); border: 1px solid var(--mt-line); color: var(--mt-ink); font-size: 16px; line-height: 1.6; }
.sv-rolemap small { display: block; color: var(--mt-navy); font-size: 15px; font-weight: 700; }
.sv-rolemap--top { min-width: 260px; }
.sv-rolemap--hub { min-width: 300px; color: var(--white) !important; background: var(--mt-navy) !important; border-color: var(--mt-navy) !important; box-shadow: 0 0 0 4px #f3f5f9, 0 0 0 6px var(--orange); }
.sv-rolemap--hub small { color: var(--cyan); }
.sv-rolemap > p + p::before, .sv-rolemap > ul::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 28px; background: var(--blue); }
.sv-rolemap > ul { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0; padding: 20px 0 0; list-style: none; border-top: 2px solid var(--blue); }
.sv-rolemap li.is-optional { border-style: dashed; border-color: var(--blue-2); }
/* 外部CMO: 選ばれる理由（コンサル比較に統合） */
.sv-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mt-line); }
.sv-points li { padding: 28px 24px 0 0; }
.sv-points span { color: var(--orange); font: 600 13px/1 var(--font-en-text); }
.sv-points b { display: block; margin: 12px 0 10px; color: var(--mt-navy); font-size: 18px; line-height: 1.5; }
.sv-points p { margin: 0; color: var(--mt-muted); font-size: 16px; line-height: 1.8; }
/* 外部CMO: 会議のアジェンダ */
.sv-meeting { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: stretch; }
.sv-agenda { margin: 0; padding: 36px; background: var(--white); box-shadow: 0 20px 50px rgba(12,18,79,.08); }
.sv-agenda figcaption { margin-bottom: 20px; color: var(--mt-navy); font-size: 20px; font-weight: 700; }
.sv-agenda ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--mt-navy); }
.sv-agenda li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mt-line); }
.sv-agenda li span { color: var(--blue); font: 700 14px var(--font-en-text); }
.sv-agenda li b { color: var(--mt-ink); font-size: 16px; }
.sv-agenda li small { color: var(--mt-muted); font-size: 14px; }
.sv-agenda li.is-key b::after { content: "判断"; margin-left: 10px; padding: 2px 8px; color: var(--white); background: var(--orange); font-size: 12px; vertical-align: 2px; }
.sv-agenda > p { margin: 18px 0 0; color: var(--mt-muted); font-size: 14px; }
/* 外部CMO: 1年の意思決定サイクル */
.sv-year { margin-bottom: 40px; }
.sv-year--label { margin: 0 0 14px; color: var(--mt-muted); font-size: 14px; font-weight: 700; }
.sv-year ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.sv-year li { position: relative; padding-top: 34px; text-align: center; color: var(--mt-muted); font-size: 13px; }
.sv-year li::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--mt-line); }
.sv-year li::after { content: ""; position: absolute; left: 50%; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--mt-navy); transform: translateX(-50%); }
.sv-year li.is-quarter::after { width: 24px; height: 24px; top: 0; background: var(--orange); }
.sv-rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.sv-rhythm li { padding-top: 22px; border-top: 2px solid var(--mt-navy); }
.sv-rhythm li.is-key { border-color: var(--orange); }
.sv-rhythm p { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; margin: 0 0 12px; }
.sv-rhythm i { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: 50%; background: var(--mt-navy); }
.sv-rhythm .is-key i { width: 22px; height: 22px; background: var(--orange); }
.sv-rhythm .is-weekly i { width: 10px; height: 10px; background: var(--blue-2); }
.sv-rhythm small { color: var(--blue); font: 600 12px/1 var(--font-en-text); letter-spacing: .12em; text-transform: uppercase; }
.sv-rhythm b { color: var(--mt-navy); font-size: 20px; }
.sv-rhythm span { color: var(--mt-ink); font-size: 16px; line-height: 1.8; }

/* 施策支援: ヒーローのモジュール図 */
.sv-modfig { padding: 28px; border: 1px dashed rgba(255,255,255,.3); }
.sv-modfig--label { margin: 0 0 18px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.sv-modfig ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-modfig li { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 104px; padding: 16px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.72); }
.sv-modfig li small { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); }
.sv-modfig li b { font-size: 17px; }
.sv-modfig li.is-added { color: var(--white); background: var(--blue); border-color: var(--cyan); }
.sv-modfig li.is-added small { color: var(--cyan); }
.sv-modfig--legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; color: rgba(255,255,255,.75); font-size: 13px; }
.sv-modfig--legend .is-added { color: var(--cyan); }
.js [data-reveal] .sv-modfig li.is-added { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 120ms + 400ms); }
.js [data-reveal].is-in .sv-modfig li.is-added { opacity: 1; transform: none; }
/* 施策支援: モジュール選択 */
.sv-select { display: grid; grid-template-columns: minmax(240px, 30%) 1fr; border: 1px solid var(--mt-line); background: var(--white); }
.sv-select--tabs { display: flex; flex-direction: column; border-right: 1px solid var(--mt-line); }
.sv-select--tabs button { display: grid; grid-template-columns: 44px 1fr; gap: 2px 8px; align-items: center; min-height: 72px; padding: 14px 22px; text-align: left; color: var(--mt-navy); background: transparent; border: 0; border-bottom: 1px solid var(--mt-line); cursor: pointer; transition: background .3s, color .3s; }
.sv-select--tabs button:last-child { border-bottom: 0; }
.sv-select--tabs button:hover { background: #f3f5f9; }
.sv-select--tabs button[aria-selected="true"] { color: var(--white); background: var(--mt-navy); }
.sv-select--tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.sv-select--tabs small { grid-row: 1 / 3; color: var(--orange); font: 700 13px var(--font-en-text); }
.sv-select--tabs b { font-size: 17px; }
.sv-select--tabs span { color: inherit; opacity: .7; font: 600 12px var(--font-en-text); letter-spacing: .08em; }
.sv-select--panel { padding: 40px 44px; }
.sv-select--panel:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.sv-select--panel h3 { margin: 0 0 24px; color: var(--mt-navy); font-size: 28px; }
.sv-select--panel h3 small { display: block; margin-bottom: 6px; color: var(--blue); font: 600 13px var(--font-en-text); letter-spacing: .12em; text-transform: uppercase; }
.sv-select--panel dl { margin: 0; border-top: 2px solid var(--mt-navy); }
.sv-select--panel dl > div { display: grid; grid-template-columns: 11rem 1fr; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--mt-line); }
.sv-select--panel dt { color: var(--blue); font-size: 15px; font-weight: 700; }
.sv-select--panel dd { margin: 0; color: var(--mt-ink); font-size: 16px; line-height: 1.85; }
.sv-select--panel .is-split dt { display: flex; align-items: flex-start; }
.sv-exec .ex-matrix--case { font-size: 16px; }
.sv-exec .ex-matrix--row.is-head span { font-size: 13px; }
/* 施策支援: 改善サイクル（円環） */
.sv-cycle { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; padding: 0; list-style: none; border: 2px solid rgba(47,60,183,.25); border-radius: 50%; }
.sv-cycle > li:not(.sv-cycle--center) { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 124px; height: 124px; border-radius: 50%; color: var(--mt-navy); background: var(--white); border: 1px solid var(--mt-line); box-shadow: 0 10px 30px rgba(12,18,79,.08); font-size: 15px; font-weight: 700; text-align: center; line-height: 1.4; transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / var(--n) - 90deg)) translate(200px) rotate(calc(var(--i) * -360deg / var(--n) + 90deg)); }
.sv-cycle > li span { color: var(--orange); font: 700 12px var(--font-en-text); }
.sv-cycle > li:first-child { border-color: var(--orange); }
.sv-cycle--center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mt-navy); font-size: 18px; font-weight: 700; }
.sv-cycle--center small { color: var(--blue); font: 600 13px var(--font-en-text); letter-spacing: .16em; text-transform: uppercase; }
/* 施策支援: 開始フロー */
.sv-flowline li.is-mark::before { background: var(--orange); border-color: var(--orange); }
.sv-flowline span em { margin-left: 8px; color: var(--orange-dark); font-style: normal; font-family: var(--font-jp); font-size: 13px; }
.sv-flowline small { font-size: 15px; }
.sv-flowline b { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .sv-ring--flow { animation: none; }
  .sv-image img { transition: none; }
}
@media (max-width: 1080px) {
  .sv-hero--visual { width: min(100%, 520px); margin: 0 auto; }
  .sv-fit--layout, .sv-structure, .sv-team, .sv-meeting, .sv-bundle { grid-template-columns: 1fr; }
  .sv-compare--list { grid-template-columns: 1fr; }
  .sv-compare--list > li { border-right: 0; border-bottom: 1px solid var(--mt-line); }
  .sv-points { grid-template-columns: 1fr 1fr; }
  .sv-select { grid-template-columns: 1fr; }
  .sv-select--tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--mt-line); }
  .sv-select--tabs button { border-right: 1px solid var(--mt-line); }
  .sv-decide--next::after { position: static; display: block; margin-top: 6px; transform: none; }
}
@media (max-width: 767px) {
  .sv .mt-title { font-size: clamp(30px, 8.6vw, 36px); }
  .sv-hero--catch { font-size: clamp(32px, 10.4vw, 44px); }
  .sv-onestop .sv-hero--catch { font-size: min(30px, 7.8vw); }
  .sv-hero--message { font-size: 16px; }
  .sv .mt-hero { padding-bottom: 64px; }
  .sv-checks li { font-size: 16px; }
  .sv-model { padding: 24px 20px; }
  .sv-effects li { grid-template-columns: 1fr; gap: 4px; }
  .sv-effects i { display: none; }
  .sv-effects span::before { content: "→ "; color: var(--orange); }
  .sv-roles li, .sv-structure .sv-roles li { grid-template-columns: 1fr; gap: 6px; }
  .sv-structure .sv-roles .sv-owner, .sv-roles .sv-owner { grid-column: 1; grid-row: auto; }
  .sv-compare--list > li { padding: 28px 20px; }
  .sv-ring--node text { font-size: 16px; }
  .sv-bundle--side { padding: 24px 18px; }
  .sv-bundle--hub { min-height: 280px; }
  .sv-bundle--hub ul { width: 250px; height: 250px; }
  .sv-bundle--hub li { font-size: 13px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg - 90deg)) translate(125px) rotate(calc(var(--i) * -72deg + 90deg)); }
  .sv-bundle--core { width: 120px; height: 120px; font-size: 14px; }
  .sv-image.is-tall { min-height: 240px; }
  .sv-days { grid-template-columns: 1fr; gap: 32px; }
  .sv-days > li { padding: 0; }
  .sv-decide { gap: 24px; }
  .sv-decide > li + li::before { height: 24px; }
  .sv-decide--top, .sv-decide--exec, .sv-decide--next { min-width: 0; width: 100%; }
  .sv-decide--spokes ul { grid-template-columns: 1fr 1fr; }
  .sv-decide--hub span { width: 124px; height: 124px; font-size: 19px; }
  .sv-quad--q { font-size: 22px; }
  .sv-rolemap > ul { grid-template-columns: 1fr; }
  .sv-rolemap--hub, .sv-rolemap--top { min-width: 0; width: 100%; }
  .sv-points { grid-template-columns: 1fr; }
  .sv-agenda { padding: 24px 18px; }
  .sv-agenda li { grid-template-columns: 48px 1fr; }
  .sv-agenda li small { grid-column: 2; }
  .sv-year ol { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
  .sv-rhythm { grid-template-columns: 1fr; gap: 28px; }
  .sv-modfig { padding: 18px; }
  .sv-modfig li { min-height: 84px; padding: 12px; }
  .sv-modfig li b { font-size: 16px; }
  .sv-select--tabs { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sv-select--tabs button { flex: 0 0 64%; min-height: 76px; scroll-snap-align: start; }
  .sv-select--panel { padding: 26px 18px; }
  .sv-select--panel h3 { font-size: 23px; }
  .sv-select--panel dl > div { grid-template-columns: 1fr; gap: 6px; }
  .sv-cycle { width: 100%; max-width: 330px; }
  .sv-cycle > li:not(.sv-cycle--center) { width: 92px; height: 92px; font-size: 13px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / var(--n) - 90deg)) translate(120px) rotate(calc(var(--i) * -360deg / var(--n) + 90deg)); }
  .sv-cycle--center { font-size: 16px; }
  .sv-extend { padding: 20px 18px; }
}

@media (max-width: 767px) { .mt-cases .mt-title { font-size: 26px; } } /* 事例見出しが SP で単語の途中で折れないように */

/* ---------- WordPress 固有 ---------- */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
.entry-content > * + * { margin-top: 1.5em; }
.entry-content h2 { margin-top: 2.5em; font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; color: var(--navy); }
.entry-content h3 { margin-top: 2em; font-size: var(--fs-h5); font-weight: 700; line-height: 1.5; color: var(--navy); }
.entry-content p, .entry-content li { font-size: var(--fs-md); line-height: 2; letter-spacing: 0.03em; color: var(--ink); }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.entry-content blockquote { padding: 1rem 1.5rem; border-left: 3px solid var(--orange); background: var(--pale); }
.entry-content a { color: var(--blue); text-decoration: underline; }
.case-profile { margin-bottom: 3rem; }
.case-hero { margin: 0 0 3rem; overflow: hidden; border-radius: var(--radius-md); }
.case-hero img { display: block; width: 100%; height: auto; }
.article-thumb-wrap { margin: 0 0 2rem; overflow: hidden; border-radius: var(--radius-md); }
.article-thumb-wrap img { display: block; width: 100%; height: auto; }
.news-list a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.news-list a:first-child { border-top: 1px solid var(--line-2); }
.news-list time { font-family: var(--font-en-text); font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.news-list small { padding: 0.25em 0.9em; border-radius: 0.25rem; background: var(--navy); color: var(--white); font-size: var(--fs-sm); font-weight: 700; }
.news-list strong { font-size: var(--fs-lg); font-weight: 700; }
.pagination { margin-top: 3rem; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 0.5rem; }
.pagination .page-numbers { display: inline-flex; min-width: 2.5rem; padding: 0.5rem 0.75rem; justify-content: center; border: 1px solid var(--line-2); border-radius: 0.25rem; color: var(--navy); font-weight: 700; }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--white); }
@media (max-width: 767px) { .news-list a { grid-template-columns: auto auto; } .news-list strong { grid-column: 1 / -1; } }