@charset "UTF-8";
/* ==========================================================================
   合同会社MASAMEDIA トップページ
   参考デザイン（TCD「BLAZE」デモ）のレイアウト・寸法・配色構造を再現したもの。
   デモのテキスト・画像は一切使用していない。外部CDN・Webフォント不使用。
   ========================================================================== */

/* --------------------------------------------------
   1. トークン
   -------------------------------------------------- */
:root {
  --accent: #1080ab;
  --accent-dark: #08475f;        /* CTA・フッター系の濃色 */
  --accent-sub-dark: #0e739a;    /* accent 90% + 黒 10% */
  --accent-light: #4099bc;       /* accent 80% + 白 20% */
  --accent-pale: #e7f2f7;        /* 白 90% + accent 10% */
  --ink: #000000;
  --gray-line: #dddddd;
  --gray-bg: #f7f7f7;
  --gray-bg2: #f6f6f6;
  --font-base: Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
  --font-logo: Palatino, "Yu Kyokasho", "游教科書体", "游明朝", "Hiragino Mincho Pro", Meiryo, serif;
  --container: 1150px;
  --narrow: 920px;
  --header-h: 80px;
  --sec-gap: 120px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------
   2. リセット
   -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 2;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
svg { fill: currentColor; }

/* --------------------------------------------------
   3. レイアウト
   -------------------------------------------------- */
.l-inner {
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}
.l-container {
  display: grid;
  row-gap: var(--sec-gap);
  padding-block: var(--sec-gap) 150px;
}
/* グリッドアイテムの自動最小サイズでカルーセルの中身がはみ出すのを防ぐ */
.l-container > * { min-width: 0; }
.p-sec { min-width: 0; scroll-margin-top: var(--header-h); }

/* --------------------------------------------------
   4. 共通パーツ
   -------------------------------------------------- */
/* ボタン（デモ実測: 300×70 / 角丸ピル / 1px枠 / hoverで反転） */
.c-button {
  display: grid;
  place-items: center;
  width: fit-content;
  min-width: 300px;
  height: 70px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9999px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.c-button--onDark { color: #fff; border-color: #fff; }
.c-button--solid { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
@media (any-hover: hover) {
  .c-button:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
  .c-button--solid:hover { background: var(--accent); }
}

/* セクション見出し（デモ実測: 英字60px → 20px → ピル50px → 70px → 本文） */
.p-sec__head {
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: 70px;
}
.p-sec__title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
}
.p-sec__pill {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 50px;
  margin-top: 20px;
  padding: 10px 15px;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9999px;
}
.p-sec__catch {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.7;
}
.p-sec__pill + .p-sec__catch { margin-top: 70px; }
.p-sec__sub {
  margin-top: 70px;
  font-size: 16px;
  line-height: 2.4;
}
.p-sec__catch + .p-sec__sub { margin-top: 70px; }
.p-sec__head--onDark { color: #fff; }
.p-sec__catch--onDark { color: #fff; }
.p-sec__foot { display: grid; justify-items: center; margin-top: 70px; }

/* スクロール連動フェードイン */
.c-inview {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 1.2s ease, transform 1.2s var(--ease-out);
}
.c-inview.is-active { opacity: 1; transform: none; }
.c-inview .p-sec__title,
.c-inview .p-sec__pill,
.c-inview .p-sec__catch,
.c-inview .p-sec__sub,
.c-inview .p-sec__foot {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active .p-sec__title { opacity: 1; transform: none; transition-delay: 0ms; }
.c-inview.is-active .p-sec__pill { opacity: 1; transform: none; transition-delay: 180ms; }
.c-inview.is-active .p-sec__catch { opacity: 1; transform: none; transition-delay: 120ms; }
.c-inview.is-active .p-sec__sub { opacity: 1; transform: none; transition-delay: 360ms; }
.c-inview.is-active .p-sec__foot { opacity: 1; transform: none; transition-delay: 460ms; }
/* カード類は 0.1s ずつ stagger */
.c-inview .p-icon-list__item,
.c-inview .p-service-card,
.c-inview .p-news__item,
.c-inview .p-flow__card,
.c-inview .p-about__card {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active .p-icon-list__item,
.c-inview.is-active .p-service-card,
.c-inview.is-active .p-news__item,
.c-inview.is-active .p-flow__card,
.c-inview.is-active .p-about__card { opacity: 1; transform: none; }
.c-inview.is-active :is(.p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card):nth-child(1) { transition-delay: .50s; }
.c-inview.is-active :is(.p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card):nth-child(2) { transition-delay: .60s; }
.c-inview.is-active :is(.p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card):nth-child(3) { transition-delay: .70s; }
.c-inview.is-active :is(.p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card):nth-child(4) { transition-delay: .80s; }
.c-inview.is-active :is(.p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card):nth-child(5) { transition-delay: .90s; }

/* --------------------------------------------------
   5. プリローダー
   -------------------------------------------------- */
.c-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity .5s ease, visibility .5s ease;
}
.c-preloader__after {
  display: grid;
  justify-items: center;
  opacity: 0;
  animation: pl-fade 1s ease 1.1s both;
}
.c-preloader__mark { width: 96px; height: 96px; }
.c-preloader__before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  animation: pl-curtain 1s cubic-bezier(.86, 0, .07, 1) .9s both;
}
.c-preloader__logo {
  --logo-mark: 56px;
  --logo-name: 30px;
  --logo-sub: 13px;
  animation: pl-fade 1s ease .15s both;
}
.c-preloader.is-end { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-curtain {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(100% 0 0 0); }
}

/* --------------------------------------------------
   6. ヘッダー
   -------------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  color: #fff;
}
.p-header-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-inline: 40px;
  border-bottom: 1px solid rgba(221, 221, 221, .2);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body.is-scrolled .p-header-bar {
  background: var(--accent);
  border-bottom-color: transparent;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
}
.p-header-logo { z-index: 3; --logo-mark: 32px; --logo-name: 19px; --logo-sub: 10px; }
.p-header-nav {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1.4;
  z-index: 2;
}
.p-header-nav__list { display: flex; height: 100%; }
.p-header-nav__list > li { display: grid; }
.p-header-nav__list > li > a {
  display: grid;
  place-items: center;
  padding-inline: 25px;
  transition: opacity .3s ease;
}
.p-header-cta { margin-left: auto; z-index: 3; }
.p-header-cta__button {
  display: grid;
  place-items: center;
  min-width: 150px;
  height: 44px;
  padding-inline: 20px;
  font-size: 15px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 9999px;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
@media (any-hover: hover) {
  .p-header-nav__list > li > a:hover { opacity: .6; }
  .p-header-cta__button:hover { color: var(--accent); background: #fff; border-color: #fff; }
  body.is-scrolled .p-header-cta__button:hover { color: var(--accent); }
}
.p-header-drawer-open { display: none; }

/* メガメニュー */
.p-megamenu {
  position: absolute;
  inset: 100% 0 auto 0;
  background: var(--accent-sub-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.l-header.is-megamenu-open .p-megamenu { opacity: 1; visibility: visible; transform: none; }
.p-megamenu__inner {
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding-block: 40px;
}
.p-megamenu__item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 20px;
  border-left: 1px solid rgba(255, 255, 255, .25);
  transition: background-color .3s ease;
}
.p-megamenu__item:last-child { border-right: 1px solid rgba(255, 255, 255, .25); }
.p-megamenu__num { font-family: var(--font-logo); font-size: 14px; letter-spacing: .1em; opacity: .7; line-height: 1; }
.p-megamenu__title { font-size: 16px; font-weight: 600; line-height: 1.7; }
.p-megamenu__desc { font-size: 13px; line-height: 1.8; opacity: .8; }
@media (any-hover: hover) {
  .p-megamenu__item:hover { background: var(--accent); }
}

/* --------------------------------------------------
   7. ドロワー（SP）
   -------------------------------------------------- */
.p-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 9500;
  width: min(86vw, 360px);
  padding: 20px 24px 40px;
  color: #fff;
  background: var(--accent-sub-dark);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .4s var(--ease-out), visibility .4s;
}
body.is-drawer-open .p-drawer { transform: none; visibility: visible; }
.p-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.p-drawer__logo { --logo-mark: 26px; --logo-name: 15px; --logo-sub: 9px; }
.p-drawer__close { position: relative; width: 32px; height: 32px; }
.p-drawer__close::before, .p-drawer__close::after {
  content: ""; position: absolute; left: 4px; top: 15px; width: 24px; height: 1px; background: #fff;
}
.p-drawer__close::before { transform: rotate(45deg); }
.p-drawer__close::after { transform: rotate(-45deg); }
.p-drawer__nav { margin-top: 24px; font-size: 15px; }
.p-drawer__nav li { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.p-drawer__nav a { display: block; padding: 14px 4px; }
.p-drawer__nav .is-child a { padding-left: 18px; font-size: 14px; opacity: .85; }
.p-drawer__cta {
  display: grid; place-items: center;
  height: 56px; margin-top: 28px;
  color: var(--accent); background: #fff; border-radius: 9999px;
}
.p-drawer__tel { margin-top: 20px; text-align: center; line-height: 1.6; }
.p-drawer__tel a { font-size: 22px; font-family: var(--font-logo); letter-spacing: .04em; }
.p-drawer__tel span { display: block; font-size: 13px; opacity: .85; }
.p-drawer-overlay {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
body.is-drawer-open .p-drawer-overlay { opacity: 1; visibility: visible; }

/* --------------------------------------------------
   8. ファーストビュー（T01）
   -------------------------------------------------- */
.p-mv {
  position: relative;
  height: 750px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(66, 189, 254, .45) 0%, rgba(16, 128, 171, 0) 55%),
    radial-gradient(90% 80% at 12% 85%, rgba(136, 221, 98, .22) 0%, rgba(16, 128, 171, 0) 60%),
    linear-gradient(140deg, #072c3d 0%, #0b4b65 45%, #1080ab 100%);
}
.p-mv__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-mv__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(4, 28, 39, .72) 0%, rgba(4, 28, 39, .35) 45%, rgba(4, 28, 39, .1) 100%);
}
.p-mv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  inline-size: min(calc(100% - 40px), 1190px);
  margin-inline: auto;
  display: grid;
  align-content: center;
}
.p-mv__content { display: grid; justify-items: start; gap: 34px; color: #fff; }
.p-mv__logo {
  width: 140px;
  height: 140px;
  opacity: 0;
  transform: translateY(24px);
}
.p-mv__name {
  /* 日本語の社名なので本文（--font-base）と同じ書体に揃える。
     セリフ前提の字間（.16em）はゴシックだと広すぎるので詰めている */
  font-family: var(--font-base);
  font-size: 26px;
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(24px);
}
.p-mv__button {
  display: grid;
  place-items: center;
  min-width: 300px;
  height: 70px;
  padding-inline: 24px;
  font-size: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 9999px;
  opacity: 0;
  transform: translateY(24px);
  transition: background-color .3s ease, border-color .3s ease;
}
@media (any-hover: hover) {
  .p-mv__button:hover { background: var(--accent); border-color: var(--accent); }
}
body.is-ready .p-mv__logo { animation: mv-in 1.2s var(--ease-out) .2s both; }
body.is-ready .p-mv__name { animation: mv-in 1.2s var(--ease-out) .45s both; }
body.is-ready .p-mv__button { animation: mv-in 1.2s var(--ease-out) .7s both; }
@keyframes mv-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------
   9. アンカーバー（デモ実測: 高さ120 / padding 10px 75px）
   -------------------------------------------------- */
.p-anchor {
  position: relative;
  height: 120px;
  padding: 10px 75px;
  background: #000;
  --cutL: 6%;
  --cutR: 94%;
  --bleed: 10px;
}
.p-anchor__viewport { position: relative; height: 100%; overflow: hidden; }
.p-anchor__viewport::before,
.p-anchor__viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 26px;
  z-index: 5;
  background: #000;
  pointer-events: none;
}
.p-anchor__viewport::before { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.p-anchor__viewport::after { right: 0; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.p-anchor__track {
  display: flex;
  height: 100%;
  transition: transform .6s var(--ease-out);
}
.p-anchor__slide { flex: 0 0 50%; height: 100%; }
.p-anchor__item {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
}
.p-anchor__item::before,
.p-anchor__item::after {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: calc(-1 * var(--bleed));
}
.p-anchor__item::before {
  background: #fff;
  clip-path: polygon(var(--cutL) 0, 100% 0, var(--cutR) 100%, 0 100%);
  z-index: 0;
}
.p-anchor__item::after {
  background: var(--accent);
  clip-path: polygon(var(--cutL) 0, var(--cutL) 0, 0 100%, 0 100%);
  transition: clip-path .6s var(--ease-out);
  z-index: 1;
}
.p-anchor__text {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  padding-inline: 60px;
  font-size: 16px;
  line-height: 2;
  text-align: center;
  color: #000;
  transition: color .3s ease;
}
.p-anchor__slide.is-active .p-anchor__item::after,
.p-anchor__item:hover::after { clip-path: polygon(var(--cutL) 0, 100% 0, var(--cutR) 100%, 0 100%); }
.p-anchor__slide.is-active .p-anchor__text,
.p-anchor__item:hover .p-anchor__text { color: #fff; }
.p-anchor__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 10;
}
.p-anchor__arrow svg { width: 18px; height: 18px; transition: opacity .3s ease; }
.p-anchor__arrow--prev { left: 50px; }
.p-anchor__arrow--next { right: 50px; }
@media (any-hover: hover) { .p-anchor__arrow:hover svg { opacity: .5; } }
@media (max-width: 1024px) { .p-anchor { display: none; } }

/* --------------------------------------------------
   10. 私たちの約束（T04 / feature）
   -------------------------------------------------- */
.p-icon-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.p-icon-list__item {
  display: grid;
  align-content: start;
  gap: 50px;
  padding: 50px;
  border: 1px solid var(--gray-line);
  margin: -1px 0 0 -1px;
}
.p-icon-list__icon {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--icon-bg, var(--accent));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
}
.p-icon-list__icon svg { width: 50px; height: 50px; fill: #fff; }
.p-icon-list__headline {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}
.p-icon-list__desc { font-size: 16px; line-height: 2.2; }

/* --------------------------------------------------
   11. ラージバナー（デモ実測: aspect 1450/600）
   -------------------------------------------------- */
.p-banner { position: relative; width: 100%; aspect-ratio: 1450 / 600; overflow: hidden; }
.p-banner__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.p-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.p-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(8, 71, 95, .94) 0%, rgba(16, 128, 171, .88) 100%);
}
.p-banner__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 40px;
  padding-inline: 20px;
  text-align: center;
  color: #fff;
}
.p-banner__catch { font-size: 36px; font-weight: 600; line-height: 1.4; }
.p-banner__desc { font-size: 16px; line-height: 2.4; }

/* --------------------------------------------------
   12. できること（T06 / service）
   -------------------------------------------------- */
.p-service-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; }
.p-service-card {
  position: relative;
  display: grid;
  grid-template-rows: 70px auto 1fr;
}
.p-service-card__title {
  display: grid;
  place-items: center;
  height: 70px;
  padding-inline: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-bottom: none;
}
.p-service-card__image { position: relative; aspect-ratio: 550 / 220; overflow: hidden; }
.p-service-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
.p-service-card__body {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 50px;
  background: var(--gray-bg);
}
.p-service-card__catch {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--accent);
}
.p-service-card__desc { font-size: 16px; line-height: 2.2; }
.p-service-card__price { font-size: 14px; line-height: 1.9; color: #555; }
.p-service-card__more {
  justify-self: center;
  position: relative;
  padding-right: 24px;
  font-size: 15px;
  color: var(--accent);
}
.p-service-card__more::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 14px; height: 1px;
  background: currentColor;
  transition: transform .3s ease;
}
.p-service-card__link { position: absolute; inset: 0; z-index: 3; }
@media (any-hover: hover) {
  .p-service-card:hover .p-service-card__image img { transform: scale(1.1); }
  .p-service-card:hover .p-service-card__more::after { transform: translateX(5px); }
}
/* 5本目（AI自動化）は2カラムぶち抜き・画像左／本文右 */
.p-service-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: 550px 1fr;
  grid-template-rows: 70px 1fr;
  grid-template-areas: "title title" "image body";
}
.p-service-card--wide .p-service-card__title { grid-area: title; }
.p-service-card--wide .p-service-card__image { grid-area: image; aspect-ratio: auto; height: 100%; min-height: 300px; }
.p-service-card--wide .p-service-card__body { grid-area: body; align-content: center; }

/* --------------------------------------------------
   13. 制作実績（T05 / works カルーセル）
   -------------------------------------------------- */
.p-works { position: relative; margin-top: 0; }
.p-works__viewport { overflow: hidden; }
.p-works__track {
  display: flex;
  gap: 24px;
  padding-inline: calc(50% - 432px);
  transition: transform .6s var(--ease-out);
}
.p-works__slide { flex: 0 0 420px; }
.p-works__card { display: grid; grid-template-rows: 70px auto auto auto; height: 100%; background: #fff; }
.p-works__type {
  display: grid;
  place-items: center;
  height: 70px;
  font-size: 16px;
  background: var(--gray-bg2);
  border: 1px solid var(--gray-line);
  border-bottom: none;
}
.p-works__image { position: relative; aspect-ratio: 400 / 240; overflow: hidden; background: #000; }
.p-works__image img, .p-works__image video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .6s var(--ease-out);
}
.p-works__image--video video { object-position: center; }
.p-works__title {
  padding: 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  border: 1px solid var(--gray-line);
  border-top: none;
  border-bottom: none;
}
.p-works__meta {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 25px 20px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  border: 1px solid var(--gray-line);
}
.p-works__meta-label { color: var(--accent); font-weight: 600; }
.p-works__arrow {
  position: absolute;
  top: 215px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  z-index: 5;
  transition: background-color .3s ease;
}
.p-works__arrow svg { width: 22px; height: 22px; }
.p-works__arrow--prev { left: max(16px, calc(50% - 575px)); }
.p-works__arrow--next { right: max(16px, calc(50% - 575px)); }
.p-works__arrow[disabled] { opacity: .3; cursor: default; }
@media (any-hover: hover) {
  .p-works__arrow:not([disabled]):hover { background: var(--accent-dark); }
  .p-works__slide:hover .p-works__image img { transform: scale(1.1); }
}

/* --------------------------------------------------
   14. 最近の更新（T02 / news）
   -------------------------------------------------- */
.p-news { inline-size: min(100%, var(--narrow)); margin-inline: auto; }
.p-news__item {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 70px;
  padding-inline: 30px;
  background: #fff;
  border: 1px solid var(--gray-line);
  margin-top: -1px;
  transition: background-color .3s ease;
}
.p-news__date {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 14px;
  color: #666;
}
.p-news__date svg { width: 14px; height: 14px; }
.p-news__cat {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 120px;
  height: 34px;
  padding-inline: 15px;
  font-size: 13px;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 9999px;
  transition: color .3s ease, background-color .3s ease;
}
.p-news__title {
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .3s ease;
}
@media (any-hover: hover) {
  .p-news__item:hover .p-news__title { color: var(--accent); }
  .p-news__item:hover .p-news__cat { color: #fff; background: var(--accent); border-color: var(--accent); }
}

/* --------------------------------------------------
   15. ご相談から運用まで（T07 / flow）
   -------------------------------------------------- */
.p-sec--flow { position: relative; padding-block: 110px; overflow: hidden; }
.p-flow__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(16, 128, 171, .55) 0%, rgba(7, 44, 61, 0) 60%),
    radial-gradient(70% 70% at 85% 90%, rgba(66, 189, 254, .28) 0%, rgba(7, 44, 61, 0) 60%),
    linear-gradient(135deg, #04212e 0%, #08475f 55%, #0b5d7c 100%);
}
.p-sec--flow .l-inner { position: relative; z-index: 2; }
.p-flow__grid {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--gray-line);
}
.p-flow__card {
  flex: 1 1 0;
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 40px 30px;
  border-right: 1px solid var(--gray-line);
}
.p-flow__card:last-child { border-right: none; }
.p-flow__step {
  font-family: var(--font-logo);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--accent);
}
.p-flow__title { font-size: 20px; font-weight: 600; line-height: 1.6; }
.p-flow__desc { font-size: 15px; line-height: 2.1; }
.p-flow__lists {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 60px;
  color: #fff;
}
.p-flow__list-title { font-size: 16px; font-weight: 600; line-height: 1.6; margin-bottom: 18px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.p-chips li {
  padding: 8px 18px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 9999px;
}

/* --------------------------------------------------
   16. 代表から／会社情報（T08・T09 / about）
   -------------------------------------------------- */
.p-about { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.p-about__card {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 50px;
  background: #fff;
  border: 1px solid var(--gray-line);
}
.p-about__label { font-size: 14px; line-height: 1; color: var(--accent); font-weight: 600; letter-spacing: .08em; }
.p-about__headline { font-size: 22px; font-weight: 600; line-height: 1.8; }
.p-about__text { font-size: 16px; line-height: 2.2; }
.p-about__sign { font-size: 16px; text-align: right; }
.p-about__more {
  justify-self: start;
  position: relative;
  padding-right: 24px;
  font-size: 15px;
  color: var(--accent);
}
.p-about__more::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 14px; height: 1px; background: currentColor; transition: transform .3s ease;
}
@media (any-hover: hover) { .p-about__more:hover::after { transform: translateX(5px); } }
.p-about__table { display: grid; }
.p-about__table > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--gray-line);
}
.p-about__table > div:first-child { border-top: 1px solid var(--gray-line); }
.p-about__table dt { font-size: 15px; line-height: 1.8; color: #555; }
.p-about__table dd { margin: 0; font-size: 15px; line-height: 1.8; }
.p-about__map { color: var(--accent); text-decoration: underline; }

/* --------------------------------------------------
   17. 無料相談（T10 / contact）
   -------------------------------------------------- */
.p-contact { inline-size: min(100%, 880px); margin-inline: auto; }
.p-form { display: grid; gap: 28px; padding: 50px; background: var(--gray-bg2); }
.p-form__row { display: grid; gap: 10px; }
.p-form__row label { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.6; }
.p-form__req, .p-form__opt {
  display: grid; place-items: center;
  min-width: 44px; height: 24px;
  font-size: 12px; line-height: 1;
  color: #fff; background: var(--accent); border-radius: 3px;
}
.p-form__opt { background: #999; }
.p-form input, .p-form textarea {
  width: 100%;
  padding: 0 20px;
  height: 56px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 0;
}
.p-form textarea { height: auto; padding: 16px 20px; line-height: 1.9; resize: vertical; }
.p-form input:focus, .p-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.p-form input::placeholder, .p-form textarea::placeholder { color: #aaa; }
.p-form__note { font-size: 13px; line-height: 1.9; color: #666; }
.p-form__submit { display: grid; justify-items: center; }
.p-contact__other { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.p-contact__tile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  border: 1px solid var(--gray-line);
  transition: border-color .3s ease, background-color .3s ease;
}
.p-contact__tile-icon {
  display: grid; place-items: center;
  flex: 0 0 56px; width: 56px; height: 56px;
  color: #fff; background: var(--accent); border-radius: 50%;
}
.p-contact__tile-icon svg { width: 26px; height: 26px; }
.p-contact__tile-body { display: grid; gap: 4px; min-width: 0; }
.p-contact__tile-title { font-size: 20px; font-weight: 600; line-height: 1.5; }
.p-contact__tile-desc { font-size: 13px; line-height: 1.7; color: #666; }
@media (any-hover: hover) {
  .p-contact__tile:hover { background: var(--accent-pale); border-color: var(--accent); }
}

/* --------------------------------------------------
   18. フッターバナー（デモ実測: 高さ220）
   -------------------------------------------------- */
.p-footer-banners { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.p-footer-banner {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  padding-inline: 40px;
  color: #fff;
  overflow: hidden;
}
.p-footer-banner--a {
  background:
    radial-gradient(70% 90% at 20% 20%, rgba(66, 189, 254, .35) 0%, rgba(8, 71, 95, 0) 60%),
    linear-gradient(120deg, #04212e 0%, #08475f 100%);
}
.p-footer-banner--b {
  background:
    radial-gradient(70% 90% at 80% 20%, rgba(136, 221, 98, .22) 0%, rgba(8, 71, 95, 0) 60%),
    linear-gradient(120deg, #08475f 0%, #1080ab 100%);
}
.p-footer-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 26px);
  pointer-events: none;
}
.p-footer-banner__icon {
  display: grid; place-items: center;
  width: clamp(56px, 6vw, 100px);
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: .5;
  transition: opacity .3s ease;
}
.p-footer-banner__icon svg { width: 40%; height: auto; }
.p-footer-banner > * { position: relative; z-index: 2; }
.p-footer-banner { grid-auto-flow: column; justify-content: center; gap: 30px; align-items: center; }
.p-footer-banner__body { display: grid; gap: 14px; text-align: left; }
.p-footer-banner__title { font-size: 24px; font-weight: 600; line-height: 1.4; }
.p-footer-banner__desc { font-size: 16px; line-height: 1.6; }
@media (any-hover: hover) { .p-footer-banner:hover .p-footer-banner__icon { opacity: 1; } }

/* --------------------------------------------------
   19. フッター
   -------------------------------------------------- */
.l-footer { background: var(--accent); color: #fff; }
.p-footer-main {
  display: flex;
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  font-size: 14px;
}
.p-footer-nav {
  flex: 1;
  display: grid;
  align-content: start;
  row-gap: 30px;
  padding-left: 60px;
  padding-block: 70px;
  line-height: 1.4;
  border-left: 1px solid var(--accent-light);
}
.p-footer-nav:last-of-type { border-right: 1px solid var(--accent-light); }
.p-footer-nav ul { display: grid; row-gap: 30px; }
@media (any-hover: hover) { .p-footer-nav a:hover { opacity: .5; } }
.p-footer-logo { background: var(--accent-sub-dark); }
.p-footer-logo .l-footer-inner {
  display: flex;
  align-items: center;
  height: 80px;
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}
.p-footer-logo .c-logo { --logo-mark: 32px; --logo-name: 19px; --logo-sub: 10px; }
.p-footer-copyright {
  display: grid;
  place-items: center;
  height: 70px;
  font-size: 14px;
  color: #000;
  background: #fff;
}

/* --------------------------------------------------
   20. レスポンシブ
   -------------------------------------------------- */
@media (max-width: 1200px) {
  .p-header-nav__list > li > a { padding-inline: 14px; }
  .p-service-card--wide { grid-template-columns: 45% 1fr; }
}

@media (max-width: 991px) {
  :root { --header-h: 60px; --sec-gap: 40px; }
  .l-container { padding-block: 40px; }

  .p-header-bar { height: 60px; padding-inline: 20px; }
  .p-header-logo { --logo-mark: 26px; --logo-name: 15px; --logo-sub: 9px; }
  .p-header-nav, .p-header-cta, .p-megamenu { display: none; }
  .p-header-drawer-open {
    display: grid;
    align-content: center;
    gap: 6px;
    margin-left: auto;
    width: 32px;
    height: 32px;
    z-index: 3;
  }
  .p-header-drawer-open span { display: block; width: 100%; height: 1px; background: #fff; transition: transform .3s ease, opacity .3s ease; }

  .p-mv { height: calc(100svh - 0px); min-height: 540px; }
  .p-mv__content { gap: 26px; }
  .p-mv__name { font-size: 20px; }
  .p-mv__button { min-width: 240px; height: 60px; font-size: 14px; }

  .p-sec__title { font-size: 42px; }
  .p-sec__catch { font-size: 26px; }
  .p-sec__head { margin-bottom: 40px; }
  .p-sec__sub, .p-sec__pill + .p-sec__catch, .p-sec__catch + .p-sec__sub { margin-top: 40px; }
  .p-sec__foot { margin-top: 40px; }

  .p-icon-list { grid-template-columns: repeat(2, 1fr); }
  .p-icon-list__item { gap: 30px; padding: 30px; }

  .p-service-cards { gap: 20px; }
  .p-service-card__body { padding: 30px; gap: 20px; }
  .p-service-card__title { height: 60px; font-size: 18px; }
  .p-service-card { grid-template-rows: 60px auto 1fr; }
  .p-service-card--wide { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: 60px auto 1fr; grid-template-areas: "title" "image" "body"; }
  .p-service-card--wide .p-service-card__image { aspect-ratio: 550 / 220; min-height: 0; }
  .p-service-card--wide .p-service-card__body { align-content: start; }

  .p-works__track { padding-inline: 20px; gap: 20px; }
  .p-works__slide { flex: 0 0 min(340px, 78vw); }
  .p-works__arrow { width: 44px; height: 44px; top: 170px; }
  .p-works__arrow--prev { left: 8px; }
  .p-works__arrow--next { right: 8px; }

  .p-flow__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .p-flow__card { border-right: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line); }
  .p-flow__card:nth-child(2n) { border-right: none; }
  .p-flow__card:nth-last-child(-n+2) { border-bottom: none; }
  .p-sec--flow { padding-block: 60px; }
  .p-flow__lists { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }

  .p-about { grid-template-columns: 1fr; gap: 20px; }
  .p-about__card { padding: 30px; }

  .p-footer-main { display: none; }
  .p-footer-logo .l-footer-inner { height: 60px; justify-content: center; }
  .p-footer-logo .c-logo { --logo-mark: 26px; --logo-name: 15px; --logo-sub: 9px; }
}

@media (max-width: 767px) {
  .c-button { min-width: 240px; height: 60px; font-size: 14px; }

  .p-sec__title { font-size: 34px; }
  .p-sec__catch { font-size: 20px; line-height: 1.6; }
  .p-sec__pill { min-width: 140px; min-height: 44px; font-size: 14px; }
  .p-sec__sub { font-size: 15px; line-height: 2.2; text-align: left; }

  .p-mv__inner { inline-size: calc(100% - 40px); }
  .p-mv__logo { width: 104px; height: 104px; }
  .p-mv__name { font-size: 18px; letter-spacing: .12em; }

  .p-icon-list { grid-template-columns: 1fr; }
  .p-icon-list__icon { width: 120px; }
  .p-icon-list__headline { font-size: 18px; }
  .p-icon-list__desc { font-size: 15px; }

  .p-banner { aspect-ratio: auto; }
  .p-banner__content { padding-block: 60px; gap: 30px; }
  .p-banner__catch { font-size: 20px; line-height: 1.6; text-wrap: balance; }
  .p-banner__desc { font-size: 14px; line-height: 2.2; text-align: left; }

  .p-service-cards { grid-template-columns: 1fr; }

  .p-news__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 14px;
    height: auto;
    padding: 20px;
  }
  .p-news__title { grid-column: 1 / -1; white-space: normal; font-size: 15px; }
  .p-news__cat { min-width: 100px; height: 30px; font-size: 12px; }

  .p-flow__grid { grid-template-columns: 1fr; }
  .p-flow__card { border-right: none; }
  .p-flow__card:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-line); }
  .p-flow__card:last-child { border-bottom: none; }

  .p-form { padding: 24px 20px; gap: 22px; }
  .p-contact__other { grid-template-columns: 1fr; }

  .p-footer-banners { grid-auto-flow: row; grid-auto-columns: auto; }
  .p-footer-banner { height: 150px; padding-inline: 20px; gap: 20px; }
  .p-footer-banner__icon { width: 70px; }
  .p-footer-banner__title { font-size: 18px; }
  .p-footer-banner__desc { font-size: 13px; }
  .p-footer-copyright { height: 60px; font-size: 12px; }
}

/* --------------------------------------------------
   21. モーションを減らす設定
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .c-inview,
  .c-inview .p-sec__title, .c-inview .p-sec__pill, .c-inview .p-sec__catch,
  .c-inview .p-sec__sub, .c-inview .p-sec__foot,
  .c-inview .p-icon-list__item, .c-inview .p-service-card, .c-inview .p-news__item,
  .c-inview .p-flow__card, .c-inview .p-about__card { opacity: 1; transform: none; }
  .p-mv__logo, .p-mv__name, .p-mv__button { opacity: 1; transform: none; }
  .c-preloader { display: none; }
}

/* ==========================================================================
   22. 下層ページ 共通レイヤー
   参考デモの下層ページ（/tcd120/services/ ・/tcd120/services/<slug>/ ・/tcd120/plan/ ・
   /tcd120/company/ ・/tcd120/news/ ・/tcd120/kiyaku/）の実測値を再現したもの。
   デモのテキスト・画像は使っていない。部品の一覧と使い方は COMPONENTS.md 参照。
   ========================================================================== */

/* --------------------------------------------------
   22-1. 下層ページの土台
   -------------------------------------------------- */
/* 下層はヘッダーを最初からアクセント色で塗る（デモの .p-header-bar--sub 相当）。
   マークアップはトップと同一のまま、body のクラスだけで切り替える。 */
body.is-subpage .p-header-bar {
  background: var(--accent);
  border-bottom-color: transparent;
}
body.is-scrolled.is-subpage .p-header-bar { box-shadow: 0 5px 20px rgba(0, 0, 0, .1); }
/* 固定ヘッダーのぶんだけ本文を下げる */
body.is-subpage main { padding-top: var(--header-h); }

/* カレント表示（aria-current="page"） */
.p-header-nav__list > li > a[aria-current="page"] { position: relative; }
.p-header-nav__list > li > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 25px; right: 25px; bottom: 24px;
  height: 1px;
  background: currentColor;
}
.p-drawer__nav a[aria-current="page"] { font-weight: 600; opacity: 1; }
.p-drawer__nav a[aria-current="page"]::before { content: "— "; }
.p-megamenu__item[aria-current="page"] { background: var(--accent); }
.p-footer-nav a[aria-current="page"] { opacity: .55; }

/* 本文の縦リズム（デモ: 下層はセクション間 120px、最下部 150px） */
.l-sub {
  display: grid;
  row-gap: var(--sec-gap);
  padding-block: 70px 150px;
}
.l-sub > * { min-width: 0; }
.p-sub-sec { min-width: 0; scroll-margin-top: calc(var(--header-h) + 20px); }
/* 全幅で敷く帯（CTA・バナー）はコンテナ外に出す */
.l-sub > .p-sub-sec--bleed { padding-inline: 0; }

/* 汎用ボタン並び */
.c-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.c-button--sm { min-width: 220px; height: 56px; font-size: 15px; }

/* --------------------------------------------------
   22-2. ページヘッダー（タイトル帯）
   デモ実測: 高さ580px（≦991px:400px ／ ≦767px:250px）／見出し60px・line-height2.4（SP32px）／
   白ピル 170×50・16px ／ 下部に高さ80pxの帯（SP60px・border-top 1px rgba(255,255,255,.2)）・
   その中のタイトルは24px/line-height80px（SP16px/60px）／中央ブロックは margin-bottom 50px・gap20px（SP15px）
   写真素材が無いため、背景はトップのFVと同じ系統のグラデーション＋斜線パターンで作る。
   -------------------------------------------------- */
.p-page-header {
  position: relative;
  display: grid;
  height: 580px;
  overflow: hidden;
  color: #fff;
  --ph-a: #072c3d;
  --ph-b: #0b4b65;
  --ph-c: #1080ab;
  --ph-glow: rgba(66, 189, 254, .45);
  --ph-glow2: rgba(136, 221, 98, .18);
  background:
    radial-gradient(120% 90% at 78% 18%, var(--ph-glow) 0%, rgba(16, 128, 171, 0) 55%),
    radial-gradient(90% 80% at 12% 85%, var(--ph-glow2) 0%, rgba(16, 128, 171, 0) 60%),
    linear-gradient(140deg, var(--ph-a) 0%, var(--ph-b) 45%, var(--ph-c) 100%);
}
.p-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 26px);
  pointer-events: none;
}
.p-page-header__inner {
  position: relative;
  z-index: 2;
  place-self: center;
  display: grid;
  justify-items: center;
  gap: 20px;
  width: 100%;
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  margin-bottom: 50px;
}
.p-page-header__headline {
  font-size: 60px;
  font-weight: 600;
  line-height: 2.4;
  letter-spacing: .02em;
  text-align: center;
}
.p-page-header__sub {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 50px;
  padding: 10px 15px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: #000;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 9999px;
}
.p-page-header__bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 80px;
  display: grid;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.p-page-header__title {
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  font-size: 24px;
  font-weight: 600;
  line-height: 80px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* サービス別の色味（同じ設計のまま色相だけ動かす） */
.p-page-header--web     { --ph-a: #04222e; --ph-b: #0a5570; --ph-c: #1484b0; --ph-glow: rgba(66, 189, 254, .40); }
.p-page-header--content { --ph-a: #062a33; --ph-b: #0b5560; --ph-c: #12899d; --ph-glow: rgba(118, 220, 226, .34); --ph-glow2: rgba(136, 221, 98, .22); }
.p-page-header--photo   { --ph-a: #0a2334; --ph-b: #123f63; --ph-c: #2a73a8; --ph-glow: rgba(242, 183, 5, .22); --ph-glow2: rgba(66, 189, 254, .26); }
.p-page-header--ai      { --ph-a: #04202c; --ph-b: #0c4a6b; --ph-c: #1b7fa6; --ph-glow: rgba(136, 221, 98, .26); --ph-glow2: rgba(66, 189, 254, .30); }
/* 登場アニメーション（デモ: fadeSlideIn 1.2s・0.2秒ずつ） */
.p-page-header__headline,
.p-page-header__sub,
.p-page-header__title { opacity: 0; transform: translateY(20px); }
body.is-ready .p-page-header__headline { animation: sub-in 1.2s var(--ease-out) 0s both; }
body.is-ready .p-page-header__sub { animation: sub-in 1.2s var(--ease-out) .2s both; }
body.is-ready .p-page-header__title { animation: sub-in 1.2s var(--ease-out) .4s both; }
@keyframes sub-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------
   22-3. パンくず
   デモ実測: 高さ70px（SP50px）／border-bottom 1px #ddd ／14px（SP12px）／
   列間12px・項目内10px ／最後の項目は #999
   -------------------------------------------------- */
.c-breadcrumb {
  display: flex;
  height: 70px;
  border-bottom: 1px solid var(--gray-line);
  background: #fff;
}
.c-breadcrumb__list {
  display: flex;
  align-items: center;
  column-gap: 12px;
  inline-size: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.c-breadcrumb__item { display: flex; align-items: center; column-gap: 10px; min-width: 0; }
.c-breadcrumb__item:last-of-type { flex: 1; overflow: hidden; color: #999; }
.c-breadcrumb__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-breadcrumb__icon { width: 1.5em; height: 1.5em; margin: -.1em -.2em -.2em; }
.c-breadcrumb__arrow { flex: 0 0 auto; width: 1.5em; height: 1.5em; margin: -.2em; color: #000; }
@media (any-hover: hover) { .c-breadcrumb__item a:hover { color: var(--accent); } }

/* --------------------------------------------------
   22-4. 見出しブロック
   デモ実測: 英字50px（SP32px）＋アクセント色ピル（170×50・16px）、
   その下にキャッチ34px（アクセント色・1100px幅）、本文16px/line-height2.6
   -------------------------------------------------- */
.c-headline {
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: 70px;
}
.c-headline__en {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}
.c-headline__pill {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 50px;
  margin-top: 15px;
  padding: 10px 15px;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9999px;
}
.c-headline__lead {
  inline-size: min(100%, 1100px);
  margin-top: 70px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--accent);
}
.c-headline__desc {
  inline-size: min(100%, 1100px);
  margin-top: 70px;
  font-size: 16px;
  line-height: 2.6;
}
.c-headline__lead + .c-headline__desc { margin-top: 40px; }
.c-headline--left { justify-items: start; text-align: left; }
.c-headline--onDark { color: #fff; }
.c-headline--onDark .c-headline__lead { color: #fff; }
.c-headline--onDark .c-headline__pill { background: #fff; border-color: #fff; color: #000; }

/* --------------------------------------------------
   22-5. 2カラム説明
   -------------------------------------------------- */
.p-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.p-twocol--reverse .p-twocol__figure { order: 2; }
.p-twocol--narrow { grid-template-columns: 1fr 1.2fr; }
.p-twocol__figure { min-width: 0; background: #fff; border: 1px solid var(--gray-line); }
.p-twocol__figure img { width: 100%; height: auto; }
.p-twocol__figure figcaption,
.p-twocol__caption {
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  border-top: 1px solid var(--gray-line);
}
.p-twocol__body { display: grid; align-content: center; gap: 24px; min-width: 0; }
.p-twocol__label { font-size: 14px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--accent); }
.p-twocol__title { font-size: 22px; font-weight: 600; line-height: 1.8; }
.p-twocol__text { font-size: 16px; line-height: 2.2; }

/* 単体の画像枠 */
.c-figure { background: #fff; border: 1px solid var(--gray-line); }
.c-figure__image { overflow: hidden; }
.c-figure__image img { width: 100%; height: auto; }
.c-figure figcaption,
.c-figure__caption {
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  border-top: 1px solid var(--gray-line);
}

/* 引用・コメント例 */
.c-quote {
  display: grid;
  gap: 14px;
  padding: 36px 40px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--accent);
}
.c-quote__label { font-size: 13px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--accent); }
.c-quote__text { font-size: 16px; line-height: 2.1; }

/* 注記 */
.c-note { font-size: 13px; line-height: 1.9; color: #666; }
.c-note--center { text-align: center; }

/* --------------------------------------------------
   22-6. 汎用カードグリッド
   -------------------------------------------------- */
.c-cards { display: grid; grid-template-columns: repeat(var(--cards-col, 3), 1fr); }
.c-cards--2up { --cards-col: 2; }
.c-cards--4up { --cards-col: 4; }
.c-cards__item {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 40px;
  margin: -1px 0 0 -1px;
  background: #fff;
  border: 1px solid var(--gray-line);
}
/* 奇数個のときの最後の1枚は横いっぱいに伸ばす（2カラムのとき） */
.c-cards--2up > .c-cards__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.c-cards__image {
  margin: -40px -40px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--gray-line);
}
.c-cards__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.c-cards__label { font-family: var(--font-logo); font-size: 13px; font-weight: bold; letter-spacing: .14em; line-height: 1; color: var(--accent); }
.c-cards__title { font-size: 20px; font-weight: 600; line-height: 1.7; }
.c-cards__desc { font-size: 15px; line-height: 2.1; }
.c-cards__caption { font-size: 12px; line-height: 1.8; color: #777; }

/* --------------------------------------------------
   22-7. ステップ（進め方・制作の流れ）
   -------------------------------------------------- */
.p-steps { display: grid; background: #fff; border: 1px solid var(--gray-line); }
.p-steps__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--gray-line);
}
.p-steps__item:last-child { border-bottom: none; }
.p-steps__num {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 30px 20px;
  background: var(--gray-bg);
  border-right: 1px solid var(--gray-line);
}
.p-steps__num-label { font-family: var(--font-logo); font-size: 13px; font-weight: bold; letter-spacing: .14em; line-height: 1; color: var(--accent); }
.p-steps__num-value { font-family: var(--font-logo); font-size: 34px; font-weight: bold; line-height: 1; color: var(--accent); }
.p-steps__body { display: grid; align-content: center; gap: 14px; padding: 30px 40px; }
.p-steps__title { font-size: 20px; font-weight: 600; line-height: 1.6; }
.p-steps__desc { font-size: 15px; line-height: 2.1; }
/* 横並び版（トップの FLOW と同じ見た目。3〜4ステップ向け） */
.p-steps--row { display: flex; align-items: stretch; }
.p-steps--row .p-steps__item {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 20px;
  padding: 40px 30px;
  border-bottom: none;
  border-right: 1px solid var(--gray-line);
}
.p-steps--row .p-steps__item:last-child { border-right: none; }
.p-steps--row .p-steps__num {
  grid-auto-flow: column;
  justify-content: start;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  background: none;
  border-right: none;
}
.p-steps--row .p-steps__num-value { font-size: 24px; }
.p-steps--row .p-steps__body { padding: 0; gap: 14px; }

/* --------------------------------------------------
   22-8. 料金表
   デモ実測（プラン料金表）: 枠 1px #ddd ／カード padding40・gap40 ／タイトル20px・line-height2.4 ／
   価格はアクセント色・数字40px（文字のときは34px）・単位16px ／
   特徴ボックスは角丸10px・背景は白90%+アクセント10%・項目14px・チェックアイコン
   -------------------------------------------------- */
.p-pricing { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--gray-line); }
.p-pricing__card {
  flex: 1 1 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 40px;
  padding: 40px;
  border-right: 1px solid var(--gray-line);
}
.p-pricing__card:last-child { border-right: none; }
.p-pricing__head { display: grid; gap: 15px; }
.p-pricing__title { font-size: 20px; line-height: 2.4; text-align: center; }
.p-pricing__price { text-align: center; color: var(--accent); font-weight: 600; line-height: 1; }
.p-pricing__num { font-size: 40px; line-height: 1.2; }
.p-pricing__num--text { font-size: 28px; }
.p-pricing__unit { font-size: 16px; }
.p-pricing__desc { font-size: 16px; line-height: 2.2; }
.p-pricing__features {
  padding: 25px 30px;
  border-radius: 10px;
  background: var(--accent-pale);
}
.p-pricing__list { display: grid; gap: 20px; }
.p-pricing__list li {
  position: relative;
  padding-left: 1.8em;
  font-size: 14px;
  line-height: 1.8;
}
.p-pricing__list li::before {
  content: "";
  position: absolute;
  left: .3em;
  top: .45em;
  width: 1em;
  height: 1em;
  background-color: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>') no-repeat center / contain;
}
.p-pricing__foot { display: grid; justify-items: center; gap: 14px; }

/* 1行で見せる料金ボックス */
.p-pricebox {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 50px;
  text-align: center;
  background: var(--gray-bg2);
  border: 1px solid var(--gray-line);
}
.p-pricebox__label {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 44px;
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  background: var(--accent);
  border-radius: 9999px;
}
.p-pricebox__value { font-size: 32px; font-weight: 600; line-height: 1.5; color: var(--accent); }
.p-pricebox__value small { font-size: 16px; font-weight: 400; }
.p-pricebox__desc { font-size: 16px; line-height: 2.2; }
.p-priceboxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* 定義表（料金一覧・会社概要・仕様の表）
   デモ実測: 行 border-bottom 1px #ddd ／ラベル 240px・背景 #f6f6f6（SP 110px）／本文 padding-inline 35px */
.c-deftable { display: grid; border-top: 1px solid var(--gray-line); background: #fff; }
.c-deftable__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--gray-line); font-size: 16px; }
.c-deftable__th {
  flex: 0 0 240px;
  display: grid;
  place-items: center;
  padding: 22px 20px;
  line-height: 1.6;
  text-align: center;
  background: var(--gray-bg2);
  border-inline: 1px solid var(--gray-line);
}
.c-deftable__td {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 22px 35px;
  line-height: 1.8;
  word-break: break-word;
  border-right: 1px solid var(--gray-line);
}

/* ラベル＋中身の縦積み（対応媒体・使用技術など） */
.c-deflist {
  display: grid;
  gap: 40px;
  padding: 50px;
  background: var(--gray-bg2);
  border: 1px solid var(--gray-line);
}
.c-deflist__row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; }
.c-deflist__label { font-size: 16px; font-weight: 600; line-height: 1.8; }

/* チップ（明るい背景の上） */
.c-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.c-chips li {
  padding: 8px 18px;
  font-size: 14px;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 9999px;
}
.c-chips--accent li { color: var(--accent); border-color: var(--accent); }

/* 控えめな案内ブロック */
.c-callout {
  display: grid;
  gap: 18px;
  padding: 40px 50px;
  background: var(--accent-pale);
  border: 1px solid var(--accent);
}
.c-callout__title { font-size: 20px; font-weight: 600; line-height: 1.7; }
.c-callout__text { font-size: 16px; line-height: 2.2; }
.c-callout__link,
.c-textlink {
  justify-self: start;
  position: relative;
  padding-right: 24px;
  font-size: 15px;
  color: var(--accent);
}
.c-callout__link::after,
.c-textlink::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 14px; height: 1px;
  background: currentColor;
  transition: transform .3s ease;
}
@media (any-hover: hover) {
  .c-callout__link:hover::after,
  .c-textlink:hover::after { transform: translateX(5px); }
}

/* --------------------------------------------------
   22-9. FAQ アコーディオン
   デモ実測: 920px幅 ／枠 1px #ddd・隣接は -1px で重ねる ／質問は白地・16px・padding 25px/30px・右60px ／
   開閉は縦線を消すプラスマイナス（右30px・1em） ／答えは grid-template-rows 0fr→1fr を .3s ease ／
   答えの本文は padding30・border-top 1px #ddd
   -------------------------------------------------- */
.p-faq { inline-size: min(100%, var(--narrow)); margin-inline: auto; }
.p-faq__item { position: relative; background: var(--gray-bg2); border: 1px solid var(--gray-line); }
.p-faq__item + .p-faq__item { margin-top: -1px; }
.p-faq__q {
  position: relative;
  display: block;
  width: 100%;
  padding: 25px 60px 25px 30px;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  background: #fff;
  cursor: pointer;
  transition: color .2s ease;
}
.p-faq__toggle {
  position: absolute;
  inset: 0 30px 0 auto;
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  margin-block: auto;
  color: #000;
  pointer-events: none;
}
.p-faq__toggle::before {
  content: "";
  grid-area: 1 / -1;
  width: 1px; height: 100%;
  background: currentColor;
  transition: height .3s ease;
}
.p-faq__toggle::after {
  content: "";
  grid-area: 1 / -1;
  width: 100%; height: 1px;
  background: currentColor;
}
.p-faq__item.is-open .p-faq__q { color: var(--accent); }
.p-faq__item.is-open .p-faq__toggle { color: var(--accent); }
.p-faq__item.is-open .p-faq__toggle::before { height: 0; }
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.p-faq__item.is-open .p-faq__a { grid-template-rows: 1fr; }
.p-faq__a-inner { overflow: hidden; }
.p-faq__a-text {
  padding: 30px;
  font-size: 15px;
  line-height: 2.2;
  border-top: 1px solid var(--gray-line);
}
.p-faq__a-text > * + * { margin-top: 1em; }
@media (any-hover: hover) { .p-faq__q:hover { color: var(--accent); } }

/* --------------------------------------------------
   22-10. CTAブロック（無料相談）
   -------------------------------------------------- */
.p-cta {
  position: relative;
  overflow: hidden;
  padding: 90px 40px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 18% 15%, rgba(66, 189, 254, .32) 0%, rgba(8, 71, 95, 0) 60%),
    radial-gradient(70% 90% at 85% 90%, rgba(136, 221, 98, .18) 0%, rgba(8, 71, 95, 0) 60%),
    linear-gradient(120deg, #04212e 0%, #08475f 55%, #1080ab 100%);
}
.p-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 26px);
  pointer-events: none;
}
.p-cta__inner {
  position: relative;
  z-index: 2;
  inline-size: min(100%, 880px);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 30px;
  text-align: center;
}
.p-cta__title { font-size: 32px; font-weight: 600; line-height: 1.6; }
.p-cta__text { font-size: 16px; line-height: 2.2; }
.p-cta__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; margin-top: 10px; }
.p-cta__tile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .45);
  transition: background-color .3s ease, border-color .3s ease;
}
.p-cta__tile-icon {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px; height: 56px;
  color: var(--accent-dark);
  background: #fff;
  border-radius: 50%;
}
.p-cta__tile-icon svg { width: 26px; height: 26px; }
.p-cta__tile-body { display: grid; gap: 4px; min-width: 0; }
.p-cta__tile-title { font-size: 20px; font-weight: 600; line-height: 1.5; }
.p-cta__tile-desc { font-size: 13px; line-height: 1.7; opacity: .85; }
@media (any-hover: hover) {
  .p-cta__tile:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
}

/* --------------------------------------------------
   22-11. 記事一覧カード・ページネーション
   デモ実測: 行 padding30・gap40・枠1px #ddd・-1pxで重ねる ／サムネ 300px・300:180 ／
   カテゴリは120×40のピル（#f5f5f5）／日付14px #999 ／タイトル16px・2行で省略
   -------------------------------------------------- */
.p-postcards { display: grid; }
.p-postcards__item {
  display: flex;
  gap: 40px;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--gray-line);
  margin-top: -1px;
  transition: background-color .3s ease;
}
.p-postcards__image {
  flex: 0 0 300px;
  align-self: flex-start;
  aspect-ratio: 300 / 180;
  overflow: hidden;
  background: var(--gray-bg);
}
.p-postcards__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.p-postcards__body { display: grid; align-content: center; gap: 20px; min-width: 0; }
.p-postcards__meta { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.p-postcards__date { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; color: #999; }
.p-postcards__date svg { width: 14px; height: 14px; }
.p-postcards__cat {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 120px;
  height: 40px;
  padding-inline: 15px;
  font-size: 14px;
  line-height: 1.6;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 9999px;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.p-postcards__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s ease;
}
.p-postcards__excerpt {
  font-size: 14px;
  line-height: 2;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (any-hover: hover) {
  .p-postcards__item:hover .p-postcards__title { color: var(--accent); }
  .p-postcards__item:hover .p-postcards__cat { color: #fff; background: var(--accent); border-color: var(--accent); }
  .p-postcards__item:hover .p-postcards__image img { transform: scale(1.1); }
}
/* ページネーション（デモ実測: 50px の円・gap8・SP40px） */
.c-pagination {
  display: grid;
  grid-template-columns: repeat(auto-fit, 50px);
  grid-template-rows: 50px;
  justify-content: center;
  gap: 8px;
  margin-top: 70px;
  font-size: 14px;
  text-align: center;
}
.c-pagination > * {
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--gray-line);
  border-radius: 50%;
}
.c-pagination > .is-current { z-index: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
@media (any-hover: hover) {
  .c-pagination > a:hover { z-index: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
}

/* --------------------------------------------------
   22-12. 記事本文
   -------------------------------------------------- */
.c-entry {
  inline-size: min(100%, var(--narrow));
  margin-inline: auto;
  font-size: 16px;
  line-height: 2.2;
}
.c-entry > * + * { margin-top: 1.8em; }
.c-entry h2 {
  margin-top: 2.4em;
  padding-bottom: 20px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.7;
  border-bottom: 1px solid var(--gray-line);
}
.c-entry h3 { margin-top: 2em; font-size: 20px; font-weight: 600; line-height: 1.8; }
.c-entry h4 { margin-top: 1.8em; font-size: 18px; font-weight: 600; line-height: 1.8; }
.c-entry ul, .c-entry ol { display: grid; gap: 12px; padding-left: 1.6em; }
.c-entry ul > li { list-style: disc; }
.c-entry ol > li { list-style: decimal; }
.c-entry a { color: var(--accent); text-decoration: underline; }
.c-entry img { width: 100%; height: auto; }
.c-entry figure { margin: 0; }
.c-entry figcaption { margin-top: 10px; font-size: 13px; line-height: 1.8; color: #666; }
.c-entry blockquote {
  margin-inline: 0;
  padding: 24px 30px;
  font-size: 15px;
  line-height: 2.1;
  background: var(--gray-bg2);
  border-left: 3px solid var(--accent);
}
.c-entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.c-entry th, .c-entry td { padding: 16px 20px; line-height: 1.8; text-align: left; border: 1px solid var(--gray-line); }
.c-entry th { background: var(--gray-bg2); font-weight: 600; }
.c-entry hr { margin-block: 2.4em; border: none; border-top: 1px solid var(--gray-line); }
.c-entry code {
  padding: 2px 6px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: .9em;
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-radius: 3px;
}
.c-entry pre {
  padding: 20px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.8;
  background: #f3f5f6;
  border: 1px solid var(--gray-line);
}
.c-entry pre code { padding: 0; background: none; border: none; }
/* 記事のメタ情報 */
.c-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 40px; }

/* --------------------------------------------------
   22-13. テキストのみのページ（規約・プライバシーポリシー）
   -------------------------------------------------- */
.c-legal {
  inline-size: min(100%, var(--narrow));
  margin-inline: auto;
  font-size: 16px;
  line-height: 2.2;
}
.c-legal__intro { margin-bottom: 60px; }
.c-legal__sec + .c-legal__sec { margin-top: 60px; }
.c-legal__sec > h2 {
  margin-bottom: 20px;
  padding-left: 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.8;
  border-left: 3px solid var(--accent);
}
.c-legal__sec > * + * { margin-top: 1.4em; }
.c-legal ol, .c-legal ul { display: grid; gap: 10px; padding-left: 1.6em; }
.c-legal ol > li { list-style: decimal; }
.c-legal ul > li { list-style: disc; }
.c-legal a { color: var(--accent); text-decoration: underline; }
.c-legal__meta { margin-top: 60px; font-size: 14px; line-height: 1.9; color: #666; text-align: right; }

/* --------------------------------------------------
   22-14. ページ内ナビ（長いページの目次）
   -------------------------------------------------- */
.c-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  inline-size: min(100%, var(--container));
  margin-inline: auto;
}
.c-anchor-nav a {
  display: grid;
  place-items: center;
  height: 70px;
  padding-inline: 30px;
  margin: -1px 0 0 -1px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  background: #fff;
  border: 1px solid var(--gray-line);
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.c-anchor-nav a.is-current { z-index: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
@media (any-hover: hover) {
  .c-anchor-nav a:hover { z-index: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
}

/* --------------------------------------------------
   22-15. フォームの追加部品
   -------------------------------------------------- */
.p-form__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.p-form select {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 0;
}
.p-form select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.p-form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.9; }
.p-form__check input { width: 18px; height: 18px; margin-top: .45em; flex: 0 0 18px; padding: 0; }
.p-form__check a { color: var(--accent); text-decoration: underline; }
.p-form__consent { padding: 20px 24px; background: #fff; border: 1px solid var(--gray-line); }
.p-form__radios { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.p-form__radio { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.p-form__radio input { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; }
.p-form__error { font-size: 13px; line-height: 1.8; color: #c0392b; }
/* ハニーポット（スパム対策）。人には見せず、読み上げにも出さない空の入力欄。
   ここが埋まっていたら機械の送信とみなして contact/send.php が破棄する。
   opacity は使わない（tools/verify.py の「透明なまま残った要素」に数えられるため）。 */
.p-form__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 送信できなかったときのエラー一覧（contact/send.php が出す画面） */
.c-callout__list { display: grid; gap: 8px; padding-left: 1.4em; font-size: 16px; line-height: 2; }
.c-callout__list > li { list-style: disc; }
/* 完了ページ用 */
.p-thanks {
  display: grid;
  justify-items: center;
  gap: 30px;
  inline-size: min(100%, var(--narrow));
  margin-inline: auto;
  padding: 70px 40px;
  text-align: center;
  background: var(--gray-bg2);
  border: 1px solid var(--gray-line);
}
.p-thanks__icon {
  display: grid;
  place-items: center;
  width: 90px; height: 90px;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}
.p-thanks__icon svg { width: 40px; height: 40px; }
.p-thanks__title { font-size: 26px; font-weight: 600; line-height: 1.6; }
.p-thanks__text { font-size: 16px; line-height: 2.2; }

/* --------------------------------------------------
   22-16. 下層部品のスクロール連動フェードイン
   -------------------------------------------------- */
.c-inview .c-headline__en,
.c-inview .c-headline__pill,
.c-inview .c-headline__lead,
.c-inview .c-headline__desc {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active .c-headline__en { opacity: 1; transform: none; transition-delay: 0ms; }
.c-inview.is-active .c-headline__pill { opacity: 1; transform: none; transition-delay: 180ms; }
.c-inview.is-active .c-headline__lead { opacity: 1; transform: none; transition-delay: 300ms; }
.c-inview.is-active .c-headline__desc { opacity: 1; transform: none; transition-delay: 420ms; }
.c-inview :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item, .p-pricebox, .c-quote, .c-callout, .c-deflist, .c-deftable, .p-twocol__figure, .p-twocol__body, .c-figure, .c-anchor-nav) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item, .p-pricebox, .c-quote, .c-callout, .c-deflist, .c-deftable, .p-twocol__figure, .p-twocol__body, .c-figure, .c-anchor-nav) { opacity: 1; transform: none; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(1) { transition-delay: .30s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(2) { transition-delay: .38s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(3) { transition-delay: .46s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(4) { transition-delay: .54s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(5) { transition-delay: .62s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(6) { transition-delay: .70s; }
.c-inview.is-active :is(.c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item):nth-child(n+7) { transition-delay: .78s; }
.c-inview .p-cta__inner > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active .p-cta__inner > * { opacity: 1; transform: none; }
.c-inview.is-active .p-cta__inner > :nth-child(2) { transition-delay: .12s; }
.c-inview.is-active .p-cta__inner > :nth-child(3) { transition-delay: .24s; }
.c-inview.is-active .p-cta__inner > :nth-child(4) { transition-delay: .36s; }

/* --------------------------------------------------
   22-17. 下層部品のレスポンシブ
   -------------------------------------------------- */
@media (max-width: 1200px) {
  .p-steps__item { grid-template-columns: 160px 1fr; }
  .c-deflist__row { grid-template-columns: 160px 1fr; }
  .c-deftable__th { flex: 0 0 200px; }
}

@media (max-width: 991px) {
  .l-sub { row-gap: 60px; padding-block: 40px 60px; }

  .p-page-header { height: 400px; }
  .p-page-header__inner { gap: 15px; inline-size: calc(100% - 40px); margin-bottom: 55px; }
  .p-page-header__headline { font-size: 44px; line-height: 2; }

  .c-breadcrumb { height: 50px; }
  .c-breadcrumb__list {
    inline-size: 100%;
    padding-inline: 20px;
    font-size: 12px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-breadcrumb__list::-webkit-scrollbar { display: none; }

  .c-headline { margin-bottom: 40px; }
  .c-headline__en { font-size: 40px; }
  .c-headline__lead { margin-top: 40px; font-size: 24px; }
  .c-headline__desc { margin-top: 40px; line-height: 2.2; }
  .c-headline__lead + .c-headline__desc { margin-top: 24px; }

  .p-twocol { grid-template-columns: 1fr; gap: 30px; }
  .p-twocol--narrow { grid-template-columns: 1fr; }
  .p-twocol--reverse .p-twocol__figure { order: 0; }

  .c-cards { grid-template-columns: repeat(2, 1fr); }
  .c-cards--4up { grid-template-columns: repeat(2, 1fr); }
  .c-cards__item { padding: 30px; gap: 16px; }
  .c-cards__image { margin: -30px -30px 0; }

  .p-steps__item { grid-template-columns: 1fr; }
  .p-steps__num {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 10px;
    padding: 16px 20px;
    border-right: none;
    border-bottom: 1px solid var(--gray-line);
  }
  .p-steps__num-value { font-size: 22px; }
  .p-steps__body { padding: 24px 20px; }
  .p-steps__title { font-size: 18px; }
  .p-steps--row { display: grid; grid-template-columns: repeat(2, 1fr); }
  .p-steps--row .p-steps__item { padding: 24px 20px; border-right: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line); }
  .p-steps--row .p-steps__item:nth-child(2n) { border-right: none; }
  .p-steps--row .p-steps__item:nth-last-child(-n+2) { border-bottom: none; }
  .p-steps--row .p-steps__num { padding: 0; border-bottom: none; }

  .p-pricing { display: grid; grid-template-columns: 1fr; }
  .p-pricing__card { padding: 30px; gap: 30px; border-right: none; border-bottom: 1px solid var(--gray-line); }
  .p-pricing__card:last-child { border-bottom: none; }
  .p-pricebox { padding: 30px 20px; }
  .p-pricebox__value { font-size: 24px; }
  .p-priceboxes { grid-template-columns: 1fr; gap: 20px; }

  .c-deftable__row { font-size: 14px; }
  .c-deftable__th { flex: 0 0 110px; padding-inline: 15px; }
  .c-deftable__td { padding: 18px 20px; }

  .c-deflist { gap: 24px; padding: 24px 20px; }
  .c-deflist__row { grid-template-columns: 1fr; gap: 14px; }

  .c-callout { padding: 24px 20px; }

  .c-quote { padding: 24px 20px; }

  .p-postcards__item { flex-direction: column; gap: 20px; padding: 20px; }
  .p-postcards__image { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }

  .c-pagination { grid-template-columns: repeat(auto-fit, 40px); grid-template-rows: 40px; margin-top: 40px; }

  .c-entry h2 { font-size: 22px; }
  .c-entry h3 { font-size: 18px; }

  .c-anchor-nav a { height: 60px; padding-inline: 20px; font-size: 13px; }

  .p-cta { padding: 60px 20px; }
  .p-cta__title { font-size: 24px; }
  .p-cta__tiles { grid-template-columns: 1fr; }

  .p-form__cols { grid-template-columns: 1fr; gap: 22px; }
  .p-thanks { padding: 40px 20px; }
  .p-thanks__title { font-size: 20px; }
}

@media (max-width: 767px) {
  .p-page-header { height: 250px; }
  .p-page-header__headline { font-size: 32px; line-height: 1.8; }
  .p-page-header__sub { min-width: 140px; min-height: 44px; font-size: 14px; }
  .p-page-header__inner { margin-bottom: 40px; }
  .p-page-header__bar { height: 60px; }
  .p-page-header__title { font-size: 16px; line-height: 60px; }

  .c-headline__en { font-size: 32px; }
  .c-headline__pill { min-width: 140px; min-height: 44px; font-size: 14px; }
  .c-headline__lead { font-size: 20px; }
  .c-headline__desc { font-size: 15px; text-align: left; }

  .c-cards { grid-template-columns: 1fr; }
  .c-cards--4up { grid-template-columns: 1fr; }

  .p-steps--row { grid-template-columns: 1fr; }
  .p-steps--row .p-steps__item { border-right: none; }
  .p-steps--row .p-steps__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-line); }
  .p-steps--row .p-steps__item:last-child { border-bottom: none; }

  .p-faq__q { padding: 23px 55px 23px 20px; font-size: 14px; }
  .p-faq__toggle { inset: 0 20px 0 auto; }
  .p-faq__a-text { padding: 20px; font-size: 14px; }

  .p-twocol__title { font-size: 18px; }
  .p-twocol__text { font-size: 15px; }

  .p-pricing__title { font-size: 16px; line-height: 1.8; }
  .p-pricing__num { font-size: 32px; }
  .p-pricing__num--text { font-size: 22px; }
  .p-pricing__desc { font-size: 14px; }
  .p-pricing__features { padding: 20px; }

  .c-entry, .c-legal { font-size: 15px; }
  .c-legal__sec + .c-legal__sec { margin-top: 40px; }
  .c-legal__sec > h2 { font-size: 17px; }

  .p-cta__text { font-size: 15px; text-align: left; }
  .p-cta__tile { padding: 20px; gap: 16px; }
  .p-cta__tile-icon { flex: 0 0 48px; width: 48px; height: 48px; }
  .p-cta__tile-title { font-size: 17px; }
}

/* --------------------------------------------------
   22-18. モーションを減らす設定（下層部品）
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .p-page-header__headline,
  .p-page-header__sub,
  .p-page-header__title { opacity: 1; transform: none; }
  .c-inview .c-headline__en, .c-inview .c-headline__pill,
  .c-inview .c-headline__lead, .c-inview .c-headline__desc,
  .c-inview .c-cards__item, .c-inview .p-steps__item, .c-inview .p-pricing__card,
  .c-inview .p-postcards__item, .c-inview .p-faq__item, .c-inview .p-pricebox,
  .c-inview .c-quote, .c-inview .c-callout, .c-inview .c-deflist, .c-inview .c-deftable,
  .c-inview .p-twocol__figure, .c-inview .p-twocol__body, .c-inview .c-figure,
  .c-inview .c-anchor-nav, .c-inview .p-cta__inner > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------
   22-19. 小見出しブロック・縦積みの間隔
   （セクション内で部品をグループ分けするための最小部品）
   -------------------------------------------------- */
.c-blockhead {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 40px;
  text-align: center;
}
.c-blockhead__title { font-size: 24px; font-weight: 600; line-height: 1.7; }
.c-blockhead__text { font-size: 16px; line-height: 2.2; }
.c-blockhead--left { justify-items: start; text-align: left; }

.c-stack { display: grid; gap: 40px; }
.c-stack > * { min-width: 0; }
.c-stack--sm { gap: 24px; }
.c-stack--lg { gap: 70px; }

.c-inview .c-blockhead__title,
.c-inview .c-blockhead__text {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active .c-blockhead__title { opacity: 1; transform: none; }
.c-inview.is-active .c-blockhead__text { opacity: 1; transform: none; transition-delay: .12s; }

@media (max-width: 991px) {
  .c-blockhead { margin-bottom: 24px; }
  .c-blockhead__title { font-size: 20px; }
  .c-stack { gap: 24px; }
  .c-stack--lg { gap: 40px; }
}
@media (max-width: 767px) {
  .c-blockhead__title { font-size: 18px; }
  .c-blockhead__text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-inview .c-blockhead__title, .c-inview .c-blockhead__text { opacity: 1; transform: none; }
}

/* --------------------------------------------------
   22-20. 余白の重なりを打ち消す調整
   （c-stack の gap と、見出しブロック側の margin-bottom が二重にかからないように）
   -------------------------------------------------- */
.c-stack > .c-headline,
.c-stack > .c-blockhead { margin-bottom: 0; }

/* パンくずのリンクはアイコンと文字を横並びにする */
.c-breadcrumb__item a { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ==========================================================================
   23. 全ページ共通の仕上げ（2026-10-14 全13ページ完成時に追加）
   第2便（A班・B班）から上がった指摘を共通レイヤーへ集約したもの。
   各ページのCSS（assets/css/pages/*.css）にあった重複はここへ移して削除済み。
   ========================================================================== */

/* --------------------------------------------------
   23-1. hidden 属性を確実に効かせる
   display を持つ部品（.p-postcards__item / .c-pagination / .p-form__error など）は
   hidden 属性だけでは消えないため、ここでまとめて打ち消す。
   -------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------
   23-2. JSが無い・読めないときの保険
   `<html class="no-js">` を `<head>` 先頭のスクリプトが `js` に差し替える。
   main.js が読めなかった場合は3秒後に no-js へ戻るので、どちらの場合も本文が出る。
   フェードインで最初に隠している要素を、ここで全部表示に戻す。
   同じ指定を prefers-reduced-motion にも使う（23-3）。
   -------------------------------------------------- */
html.no-js .c-preloader { display: none !important; }
html.no-js .c-inview,
html.no-js .c-inview :is(
  .p-sec__title, .p-sec__pill, .p-sec__catch, .p-sec__sub, .p-sec__foot,
  .p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card,
  .c-headline__en, .c-headline__pill, .c-headline__lead, .c-headline__desc,
  .c-blockhead__title, .c-blockhead__text,
  .c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item,
  .p-pricebox, .c-quote, .c-callout, .c-deflist, .c-deftable,
  .p-twocol__figure, .p-twocol__body, .c-figure, .c-anchor-nav,
  .p-message, .p-case__figure, .p-case__body, .p-media__item),
html.no-js .c-inview .p-cta__inner > *,
html.no-js .p-mv__logo, html.no-js .p-mv__name, html.no-js .p-mv__button,
html.no-js .p-page-header__headline, html.no-js .p-page-header__sub, html.no-js .p-page-header__title {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* --------------------------------------------------
   23-3. モーションを減らす設定（取りこぼしを無くすための総まとめ）
   21節・22-18節の指定を、下層ページ・第2便の部品まで含めて書き直したもの。
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-inview,
  .c-inview :is(
    .p-sec__title, .p-sec__pill, .p-sec__catch, .p-sec__sub, .p-sec__foot,
    .p-icon-list__item, .p-service-card, .p-news__item, .p-flow__card, .p-about__card,
    .c-headline__en, .c-headline__pill, .c-headline__lead, .c-headline__desc,
    .c-blockhead__title, .c-blockhead__text,
    .c-cards__item, .p-steps__item, .p-pricing__card, .p-postcards__item, .p-faq__item,
    .p-pricebox, .c-quote, .c-callout, .c-deflist, .c-deftable,
    .p-twocol__figure, .p-twocol__body, .c-figure, .c-anchor-nav,
    .p-message, .p-case__figure, .p-case__body, .p-media__item),
  .c-inview .p-cta__inner > *,
  .p-mv__logo, .p-mv__name, .p-mv__button,
  .p-page-header__headline, .p-page-header__sub, .p-page-header__title {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------
   23-4. 本文の中のリンク
   表・FAQの答え・フォームの注記・完了ページの本文は、地の文と見分けが付くように
   アクセント色＋下線にする（トップの会社概要の地図リンクと同じ見た目）。
   -------------------------------------------------- */
.c-deftable__td a,
.p-faq__a-text a,
.p-form__note a,
.p-form__check a,
.p-thanks__text a,
.p-steps__desc a,
.c-cards__desc a,
.p-twocol__text a,
.c-quote__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (any-hover: hover) {
  .c-deftable__td a:hover,
  .p-faq__a-text a:hover,
  .p-form__note a:hover,
  .p-form__check a:hover,
  .p-thanks__text a:hover { text-decoration: none; }
}

/* --------------------------------------------------
   23-5. フォームの入力チェック
   -------------------------------------------------- */
.p-form input[aria-invalid="true"],
.p-form textarea[aria-invalid="true"],
.p-form select[aria-invalid="true"] { border-color: #c0392b; }
.p-form input[aria-invalid="true"]:focus,
.p-form textarea[aria-invalid="true"]:focus { outline-color: #c0392b; }

/* --------------------------------------------------
   23-6. ページ送り（button でも a でも同じ見た目にする）
   -------------------------------------------------- */
@media (any-hover: hover) {
  .c-pagination > :is(a, button):hover {
    z-index: 1;
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
}
.c-stack > .c-pagination { margin-top: 0; }

/* --------------------------------------------------
   23-7. 記事ページのタイトル帯（折り返しを許す）
   既定の .p-page-header__title は1行固定で、はみ出すと … で切れる。
   記事タイトルは切れてはいけないので、この修飾子のときだけ折り返す。
   -------------------------------------------------- */
.p-page-header--entry .p-page-header__bar {
  height: auto;
  min-height: 80px;
  padding-block: 16px;
}
.p-page-header--entry .p-page-header__title {
  white-space: normal;
  overflow: visible;
  line-height: 1.6;
}

/* --------------------------------------------------
   23-8. 記事本文・規約の細かい調整
   -------------------------------------------------- */
.c-entry li > ul,
.c-entry li > ol { margin-top: 12px; }
.c-legal .c-deftable { font-size: 15px; }
.c-legal .c-deftable__td a { word-break: break-all; }
.p-thanks strong { font-weight: 600; }
.p-thanks .c-buttons { margin-top: 10px; }

/* --------------------------------------------------
   23-9. 代表のことば（画像を置かず、文章だけで読ませるブロック）
   会社情報ページで使用。920px幅・上辺だけアクセント色。
   -------------------------------------------------- */
.p-message {
  display: grid;
  gap: 28px;
  inline-size: min(100%, var(--narrow));
  margin-inline: auto;
  padding: 60px 70px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-top: 3px solid var(--accent);
}
.p-message__lead { font-size: 24px; font-weight: 600; line-height: 1.9; color: var(--accent); }
.p-message__text { font-size: 16px; line-height: 2.4; }
.p-message__sign { justify-self: end; font-family: var(--font-logo); font-size: 18px; line-height: 1.8; }

/* --------------------------------------------------
   23-10. 縦長の制作物＋説明（スマホ用LP・縦型動画）
   .p-twocol は画像が横長前提のため、縦長の画面はこちらを使う。
   画面は実寸比のまま、幅を360pxで止めて説明と横に並べる。
   -------------------------------------------------- */
.p-case { display: grid; grid-template-columns: 360px 1fr; gap: 60px; align-items: center; }
/* 画面を右に置く回。列幅も入れ替えないと説明側が 360px に潰れる */
.p-case--reverse { grid-template-columns: 1fr 360px; }
.p-case--reverse .p-case__figure { order: 2; }
.p-case__figure { min-width: 0; background: #fff; border: 1px solid var(--gray-line); }
.p-case__figure img,
.p-case__figure video { width: 100%; height: auto; }
.p-case__figure--video { background: #000; }
.p-case__figure figcaption {
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  border-top: 1px solid var(--gray-line);
}
.p-case__body { display: grid; align-content: center; gap: 24px; min-width: 0; }
.p-case__label { font-size: 14px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--accent); }
.p-case__title { font-size: 22px; font-weight: 600; line-height: 1.8; }
.p-case__text { font-size: 16px; line-height: 2.2; }

/* --------------------------------------------------
   23-11. 正方形の制作物を並べる（写真）
   -------------------------------------------------- */
.p-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.p-media__item {
  display: grid;
  align-content: start;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--gray-line);
}
.p-media__frame { aspect-ratio: 1 / 1; overflow: hidden; background: var(--gray-bg); }
.p-media__frame img { width: 100%; height: 100%; object-fit: cover; }
.p-media__caption { display: grid; gap: 12px; padding: 30px 35px; border-top: 1px solid var(--gray-line); }
.p-media__label { font-size: 13px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--accent); }
.p-media__title { font-size: 20px; font-weight: 600; line-height: 1.7; }
.p-media__text { font-size: 15px; line-height: 2.1; }

/* --------------------------------------------------
   23-12. 23-9〜23-11 のスクロール連動フェードイン
   -------------------------------------------------- */
.c-inview :is(.p-message, .p-case__figure, .p-case__body, .p-media__item) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
}
.c-inview.is-active :is(.p-message, .p-case__figure, .p-case__body, .p-media__item) { opacity: 1; transform: none; }
.c-inview.is-active .p-case__body { transition-delay: .12s; }
.c-inview.is-active .p-media__item:nth-child(2) { transition-delay: .12s; }

/* --------------------------------------------------
   23-13. 23-9〜23-11 のレスポンシブ
   -------------------------------------------------- */
@media (max-width: 991px) {
  .p-message { gap: 22px; padding: 40px; }
  .p-message__lead { font-size: 20px; }

  .p-case,
  .p-case--reverse { grid-template-columns: 1fr; gap: 30px; }
  .p-case--reverse .p-case__figure { order: 0; }
  .p-case__figure { max-width: 360px; margin-inline: auto; }
  .p-case__body { gap: 20px; }
  .p-case__title { font-size: 20px; }

  .p-media { grid-template-columns: 1fr; gap: 20px; }
  .p-media__caption { padding: 24px; }
}

@media (max-width: 767px) {
  .p-message { padding: 30px 24px; }
  .p-message__lead { font-size: 18px; }
  .p-message__text { font-size: 15px; line-height: 2.2; }
  .p-message__sign { justify-self: start; font-size: 16px; }

  .p-case__figure { max-width: 100%; }
  .p-case__title { font-size: 18px; }
  .p-case__text { font-size: 15px; }

  .p-media__title { font-size: 18px; }

  .p-page-header--entry .p-page-header__bar { min-height: 60px; padding-block: 12px; }
}

/* ==========================================================================
   24. ロゴ（2026-10-14 差し替え）
   正式なロゴは3色の「m」マーク（masamedia-mark.svg）だけ。
   ヘッダー・ドロワー・フッター・プリローダーは「マーク＋社名テキスト」の組みで使う。
   **3色（#42BDFE / #88DD62 / #FEE165）は加工しない。**
   白く塗る・単色化する・透過度を下げるなどは禁止で、濃色背景の上でもそのまま乗せる。
   大きさは --logo-mark / --logo-name / --logo-sub の3変数で置き場所ごとに変える。
   ========================================================================== */
.c-logo {
  --logo-mark: 32px;
  --logo-name: 19px;
  --logo-sub: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.c-logo__mark {
  flex: 0 0 auto;
  width: var(--logo-mark);
  height: var(--logo-mark);
}
.c-logo__text { display: grid; gap: 3px; }
.c-logo__sub {
  font-family: var(--font-base);
  font-size: var(--logo-sub);
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  margin-right: -.12em;
}
.c-logo__name {
  /* 本文（--font-base）と同じ書体に揃える。
     セリフ前提の字間（.2em）はゴシックだと広すぎるので詰めている */
  font-family: var(--font-base);
  font-size: var(--logo-name);
  font-weight: bold;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  /* letter-spacing が最後の1文字のうしろにも入るぶんを戻す */
  margin-right: -.12em;
}
@media (any-hover: hover) {
  a.c-logo { transition: opacity .3s ease; }
  a.c-logo:hover { opacity: .7; }
}
/* ヒーロー（トップのFV）はマーク単独。社名は直後の h1 が担う */
.p-mv__logo { display: block; }