/* 「LOGACYのサイトを見る」：黒背景・白枠（.btn--outline の背景を黒にする） */
.work-head__link .btn--outline {
  background: var(--color-bg);
}

/* 画像は拡大して覆う（cover）のではなく、全体が見えるように引いて表示する（contain）。
   位置は、画像の上端をパネルの上端から約300px下に置く（::beforeはパララックスの余白300pxぶん上に出ているので600px）。
   パララックスで±300pxずれても、画像の上端がパネルの外へ切れない。画面幅によらず同じ。余った下は黒 */
@charset "UTF-8";

/* ==========================================================================
   目次
   1. カスタムプロパティ
   2. リセット
   3. ベース
   4. レイアウト
   5. 共通パーツ（ヘッダー / フッター / ボタン / テーブル / アコーディオン / フォーム）
   6. ページ固有
   7. ユーティリティ
   ========================================================================== */

/* ==========================================================================
   1. カスタムプロパティ
   ========================================================================== */
:root {
  /* 色：黒背景・白文字を基本とする（無彩色。LOGACYのデザインを土台に反転） */
  --color-bg: #040504;
  --color-invert: #f5f6f6;
  --color-text: #f5f6f6;
  --color-muted: #c2c2c2;
  --color-surface: #1a2540;
  --color-line: rgba(245, 246, 246, 0.15);
  --color-focus: #4d9fff;
  /* 変色・描画のアクセント色（青） */
  --color-accent: #47c2dd;

  /* タイプフェイス：欧文を先に指定し、和文を後段に置く */
  --font-base: "Inter Tight", "Zen Kaku Gothic New", sans-serif;

  /* タイプスケール（1.25倍） */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
  --fs-4xl: 3.052rem;

  /* 行送り */
  --lh-body: 1.8;
  --lh-heading: 1.4;

  /* レイアウト寸法 */
  --container-w: 1200px;
  --gutter: 20px;
  --section-gap: 80px;

  /* 動き：操作に応答する場合のみ使う（150〜250ms） */
  --duration: 200ms;

  /* ブレイクポイント（メディアクエリ内で数値として直書きする際の目安） */
  --bp-md: 768px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-gap: 140px;
  }
}

/* ==========================================================================
   2. リセット
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* 操作に応答する動き（ナビ開閉・アコーディオン等）はすべて --duration 経由のため、
   ここで値を潰すだけで !important なしに全体を無効化できる */
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0.001ms; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   3. ベース
   ========================================================================== */
/* ページ内リンク（右のページ内ナビ等）のクリックは、瞬間移動ではなく滑らかにスクロールする。
   帯や見出しを画面外から現れさせる演出（transform）が右方向にはみ出た分だけ、横スクロール
   を生まないようここでクリップする */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* overflow-x: hiddenだとhtml/bodyがスクロールコンテナ化し、position:stickyが
     画面全体で効かなくなる（Chrome/Safari共通の既知の挙動）ため、スクロールを
     生まないoverflow-x: clipを使う */
  overflow-x: clip;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
}

p { max-width: 34em; }

a { text-decoration: none; }
a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. レイアウト
   ========================================================================== */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクション間の余白はこの1系統にのみ集約し、要素セレクタと重複させない。
   背景を明示しておくことで、固定表示の背景映像より確実に手前に重なる */
.section {
  padding-block: var(--section-gap);
  background: var(--color-bg);
}

.section-head {
  margin-bottom: calc(var(--section-gap) * 0.4);
}

.section-head p { color: var(--color-muted); }

/* 見出しの左右に線を添える。横幅は見出しを含めたコンテナの全幅で固定し、
   ::before/::afterがflex:1で余り幅を均等に埋めるため、見出し文字の長さに応じて
   自動的に左右のマージン（線の長さ）が決まる。見出し文字自体は常に表示したまま、
   線だけを画面に入ったタイミングで中央から左右へ一度だけ伸ばす
   （initHeadingLineReveal）。見出しテキストをJS・アニメーションに依存させて
   隠すと、何らかの理由で発火しなかった場合に読めなくなるため、文字は隠さない */
.section-head h2,
.concept-diagram__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}

.section-head h2::before,
.section-head h2::after,
.concept-diagram__heading::before,
.concept-diagram__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(245, 246, 246, 0.4);
  transform: scaleX(0);
  transition: transform 0.8s ease 0.3s;
}

.section-head h2::before,
.concept-diagram__heading::before {
  transform-origin: right;
}

.section-head h2::after,
.concept-diagram__heading::after {
  transform-origin: left;
}

.section-head h2.is-revealed::before,
.section-head h2.is-revealed::after,
.concept-diagram__heading.is-revealed::before,
.concept-diagram__heading.is-revealed::after {
  transform: scaleX(1);
}

/* 「ウェブ×映像を一括で制作するメリット」は2行表示。2行目「一括で制作するメリット」の
   左右に、文字からマージンを取って線を添える（他の見出しと同じ構造） */
.service-heading__line1,
.service-heading__line2 {
  display: block;
}

.service-heading__line2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}

.service-heading__line2::before,
.service-heading__line2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(245, 246, 246, 0.4);
  transform: scaleX(0);
  transition: transform 0.8s ease 0.3s;
}

.service-heading__line2::before {
  transform-origin: right;
}

.service-heading__line2::after {
  transform-origin: left;
}

.service-heading.is-revealed .service-heading__line2::before,
.service-heading.is-revealed .service-heading__line2::after {
  transform: scaleX(1);
}

/* 「制作のご相談」は白背景で展開されるため、線は白ではなくグレーにする */
#contact-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}

#contact-heading::before,
#contact-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #888;
  transform: scaleX(0);
  transition: transform 0.8s ease 0.3s;
}

#contact-heading::before {
  transform-origin: right;
}

#contact-heading::after {
  transform-origin: left;
}

#contact-heading.is-revealed::before,
#contact-heading.is-revealed::after {
  transform: scaleX(1);
}

/* 左右の線の長さは、JS（initHeadingSpan）が文字をコンテンツ中央に置けるよう個別に指定する。
   未指定（JS無し・モバイル）のときは左右均等に伸ばす */
.section-head h2::before,
.concept-diagram__heading::before,
#contact-heading::before {
  flex: var(--hl-flex, 1);
}

.section-head h2::after,
.concept-diagram__heading::after,
#contact-heading::after {
  flex: var(--hr-flex, 1);
}

@media (prefers-reduced-motion: reduce) {
  .section-head h2::before,
  .section-head h2::after,
  .concept-diagram__heading::before,
  .concept-diagram__heading::after,
  .service-heading__line2::before,
  .service-heading__line2::after,
  #contact-heading::before,
  #contact-heading::after {
    transition: none;
  }
}

.grid {
  display: grid;
  gap: var(--gutter);
}

/* 見出し・本文・ボタンを縦に積む定型パターン（余白はここだけで管理する）。
   コンテンツ全体をセンタリングする */
.cta {
  text-align: center;
}

/* pには全体でmax-width（34em）があるため、.cta内ではそのまま中央寄せする */
.cta p {
  margin-inline: auto;
}

.cta > * + * {
  margin-top: 1.2em;
}

/* 本文とボタンの間だけ、他ページのボタン前マージン（3em）に合わせて広げる */
.cta .btn {
  margin-top: 3em;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.media-16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
}

/* 「実績」のサムネイルは、画像が表示される前の背景を紺（--color-surface）ではなく黒にする */
#works .media-16-9 {
  background: var(--color-bg);
}

.media-16-9 img, .media-16-9 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 2000;
  padding: 0.8em 1.2em;
  background: var(--color-invert);
  color: var(--color-bg);
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   5. 共通パーツ
   ========================================================================== */

/* ---- ヘッダー ---- */
/* 常に画面上部に浮かせ、TOPのヒーロー画像に重なって見えるようにする。
   その分のスペースは body 側で確保する（page-index だけヒーローを画面最上部まで伸ばす） */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: none;
}

/* 白いフォーム（.hides-header。お問い合わせ）にスクロールして重なっている間は、ヘッダー全体が
   上へ流れながらフェードアウトする（initHeaderBar）。消えている間は操作も見えなくなる */
.site-header {
  transition: transform 0.45s ease, opacity 0.45s ease, visibility 0s linear 0s;
}

.site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.45s ease, opacity 0.45s ease, visibility 0s linear 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-hidden {
    transition: none;
  }
}

/* ロゴ・右上メニューを含む最上部のエリアに、透過の黒背景を敷く。初期は上に隠れていて、
   ヒーローをスクロールで超えたら上から降りてくる（.is-past-hero。initHeaderBar）。
   ヘッダーが白背景のセクションに重なっている間（.is-on-light）は、上へ消える */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 5, 4, 0.7);
  transform: translateY(-100%);
  transition: transform 0.45s ease;
  pointer-events: none;
}

.site-header.is-past-hero:not(.is-on-light)::before {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before {
    transition: none;
  }
}

/* ロゴの10px下の高さで、ロゴからは離した位置から右端まで線を引く。
   色は左のSCROLLレールの線（--color-line）と同じにする */
.site-header::after {
  content: "";
  position: absolute;
  left: 180px;
  right: 0;
  top: 59px;
  height: 1px;
  background: var(--color-line);
}

@media (min-width: 768px) {
  .site-header::after {
    top: 78px;
  }
}

/* 文字色が黒に切り替わる（.is-on-light）ときは、線も同じ濃さの黒に合わせる */
.site-header.is-on-light::after {
  background: rgba(4, 5, 4, 0.15);
}

body {
  padding-top: 72px;
}

body.page-index {
  padding-top: 0;
}

/* ロゴは左端、ナビ（＋モバイルはハンバーガー）は右端。
   ヘッダーだけは 1200px の中央カラムに縛らず、画面の実際の端に寄せる */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: none;
}

/* ヘッダーの縦幅はPCのみ大きくする（モバイルは72pxのまま） */
@media (min-width: 768px) {
  .site-header .container {
    height: 110px;
  }

  body {
    padding-top: 110px;
  }

  body.page-index {
    padding-top: 0;
  }
}

.site-logo img {
  display: block;
  height: 26px;
  width: auto;
  transition: filter var(--duration) ease;
}

/* ヘッダーロゴが12秒に1回、左から右へマスクされて見えなくなり、
   戻るときも同じく左から右へ向かって現れる（約71.7%地点で無自覚に基準辺を入れ替える）。
   動き始めるタイミング（周期の70%＝8.4秒）は変えず、マスクの動きは当初の9倍の速さ
   （隠れる0.2秒・現れる0.2秒）にしてある */
.site-logo-mask {
  animation: siteLogoMask 12s ease-in-out infinite;
}

@keyframes siteLogoMask {
  0%, 70% { clip-path: inset(0 0 0 0%); }
  71.67% { clip-path: inset(0 0 0 100%); }
  71.7% { clip-path: inset(0 100% 0 0); }
  73.4%, 100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo-mask { animation: none; }
}

.site-header__right {
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--duration) ease, opacity var(--duration) ease, background-color var(--duration) ease;
}

.nav-toggle::before { top: 11px; }
.nav-toggle span { top: 16px; }
.nav-toggle::after { top: 21px; }

.nav-toggle[aria-expanded="true"]::before {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"]::after {
  transform: translateY(-5px) rotate(-45deg);
}
.nav-toggle[aria-expanded="true"] span { opacity: 0; }

.site-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--color-bg);
  padding: var(--gutter);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) ease, transform var(--duration) ease, visibility var(--duration);
}

.site-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  font-size: calc(var(--fs-lg) * 0.8);
  letter-spacing: 0.04em;
}

.site-nav__link {
  display: inline-block;
  transition: color var(--duration) ease;
}

.site-nav__link[aria-current="page"] {
  color: var(--color-muted);
}

/* メイン背景が白いセクション（.u-invert）にヘッダーが重なったら、自動で黒文字に切り替える */
.site-header.is-on-light .site-logo img { filter: invert(1); }
.site-header.is-on-light .site-nav__link { color: #000; }
.site-header.is-on-light .nav-toggle span,
.site-header.is-on-light .nav-toggle::before,
.site-header.is-on-light .nav-toggle::after { background: #000; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 2em;
    height: 26px;
    font-size: calc(var(--fs-sm) * 0.8);
    background: none;
    border-radius: 0;
    padding: 0 1.6em;
  }
}

/* ---- ナビ文字のフリップ演出（オンマウスで1文字ずつ回転する）＋下線 ---- */
.site-nav__link {
  position: relative;
  display: inline-block;
  perspective: 240px;
}

.nav-char {
  display: inline-block;
  backface-visibility: hidden;
  transition: transform 0.4s ease;
}

.site-nav__link:hover .nav-char,
.site-nav__link:focus-visible .nav-char {
  transform: rotateY(360deg);
}

/* HOMEの右の縦線。上端は左のロゴ（.site-logo）の上端に合わせ、そこから、ヘッダーの横線（.site-header::after、上から78px）
   まで届かせ、色も横線と同じにする（768px以上のみ） */
@media (min-width: 768px) {
  .site-nav__link--home::before {
    content: "";
    position: absolute;
    top: -2.9px;
    right: -1em;
    bottom: -14px;
    width: 1px;
    background: var(--color-line);
  }

  .site-header.is-on-light .site-nav__link--home::before {
    background: rgba(4, 5, 4, 0.15);
  }
}

/* 右上メニューだけ：マウスオーバーで、日本語（サービス・実績など）が英字の上に、下線と同じ
   速さ・向きで（左から右へ）マスク表示される。外すと左へ縮んで消える（JS：initNavJa が付ける） */
.site-nav__ja {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 0.5em;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s ease;
}

.site-nav__link:hover .site-nav__ja,
.site-nav__link:focus-visible .site-nav__ja {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 767px) {
  .site-nav__ja {
    display: none;
  }
}

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

/* 下線：オンマウスで左から右に伸び、外すと左へ縮んで消える。今いるページのメニューは、オンマウスと同じ下線を常に引いておく */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nav-char { transition: none; }
  .site-nav__link::after { transition: none; }
}

/* ---- フッター ---- */
/* サイト全体が黒背景のため、フッターは反転させず一段明るい面色で区切るだけにする */
/* 暗めのオーバーレイを重ね、上の文字の視認性を保つ */
/* 背景は画像ではなく、各ページのヒーローの背景映像（画面に固定）が透けて見える。
   position:relativeにして、固定映像（サブページではヒーローの重なり順の中にある）より手前に
   重ね、ロゴ・コピーライトが映像の下に隠れないようにする */
.site-footer {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--color-line);
}

/* トップの映像は明るい場面もあるため、文字が読めるよう薄く暗くする（サブページの映像は暗くしてある） */
.page-index .site-footer {
  background: rgba(4, 5, 4, 0.4);
}

.footer-top {
  padding-block: calc(var(--section-gap) * 0.5) var(--section-gap);
  display: flex;
  justify-content: flex-end;
}

.footer-brand {
  text-align: right;
}

/* .site-logo imgはdisplay:blockのため、親のtext-align:rightは効かない
   （text-alignはインライン要素にしか作用しない）。marginで individually右寄せにする */
.footer-brand .site-logo img {
  margin-left: auto;
}

.footer-nav {
  margin-top: 1.2em;
}

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6em 1.6em;
  font-size: calc(var(--fs-base) * 0.8);
  letter-spacing: 0.04em;
}

.footer-nav__list--sub {
  margin-top: 0.8em;
}

.footer-bottom {
  border-top: 1px solid rgba(245, 246, 246, 0.15);
  padding-block: 1.6em;
  font-size: var(--fs-xs);
  color: rgba(245, 246, 246, 0.5);
  text-align: right;
}

/* pには全体でmax-width（34em）があるため、右寄せにはmargin-leftもautoにする必要がある */
.footer-bottom p {
  margin-left: auto;
}

/* ---- ページ内ナビ（左側・スクロール連動） ---- */
/* 画面が狭いとハンバーガーメニューと役割が重複するため、デスクトップのみ表示する */
.page-rail {
  display: none;
}

@media (min-width: 1024px) {
  .page-rail {
    position: fixed;
    /* 左のSCROLLレール（幅44px）を避けて、その右側に配置する */
    left: 64px;
    top: 42%;
    /* ブラウザのアドレスバー等の増減で画面の高さが変わっても位置がぶれないよう、
       動的ではない基準の高さ（lvh）で中央よりやや上の位置を計算する */
    top: 42lvh;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
  }
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: calc(var(--fs-xs) * 0.8);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  white-space: nowrap;
}

.rail-link[hidden] {
  display: none;
}

.rail-link::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-muted);
  transition: width var(--duration) ease, background-color var(--duration) ease;
}

.rail-link.is-active,
.rail-link:hover {
  color: var(--color-text);
}

.rail-link.is-active::before,
.rail-link:hover::before {
  width: 28px;
  background: var(--color-text);
}

/* 白背景セクション（.u-invert）に重なっている間だけ、文字色を黒系に切り替える
   （initPageRailContrastがpage-railに.is-on-lightを付ける） */
.page-rail.is-on-light .rail-link {
  color: rgba(4, 5, 4, 0.5);
}

.page-rail.is-on-light .rail-link::before {
  background: rgba(4, 5, 4, 0.5);
}

.page-rail.is-on-light .rail-link.is-active,
.page-rail.is-on-light .rail-link:hover {
  color: var(--color-bg);
}

.page-rail.is-on-light .rail-link.is-active::before,
.page-rail.is-on-light .rail-link:hover::before {
  background: var(--color-bg);
}

/* ---- サイドレール（左端・HOMEと先頭へ戻る／スクロール） ---- */
/* ロゴ付近には線を出さず、HOMEのちょっと上から下端まで（擬似要素）だけ表示する */
.side-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 500;
  width: 44px;
  padding-top: 92px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.side-rail::before {
  content: "";
  position: absolute;
  top: 76px;
  right: 0;
  bottom: 0;
  width: 1px;
  /* 白背景セクションと重なる区間だけ黒系にする（initSideRailLineContrast） */
  background: var(--rail-line-bg, var(--color-line));
}

@media (min-width: 768px) {
  .side-rail {
    padding-top: 130px;
  }

  .side-rail::before {
    top: 114px;
  }
}

.scroll-top-btn__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.scroll-top-btn__label {
  position: relative;
  display: inline-block;
  perspective: 240px;
}

/* SCROLL/TOPも、ヘッダーナビと同じ1文字ずつ回転するホバー演出を効かせる（下線は無し） */
.scroll-top-btn:hover .nav-char,
.scroll-top-btn:focus-visible .nav-char {
  transform: rotateY(360deg);
}

.scroll-top-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  border: none;
  background: none;
  color: var(--color-muted);
  font-family: "Inter Tight", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* 白背景のセクション（.u-invert。制作のご相談・お問い合わせフォームなど）に重なっている間は、
   黒文字に変わる（initScrollBtnContrast） */
.scroll-top-btn {
  transition: color var(--duration) ease;
}

.scroll-top-btn.is-on-light {
  color: var(--color-bg);
}

.scroll-top-btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration) ease;
}

/* ページ最上部にいる間は「先頭へ戻る」ではなく、下向き矢印で
   スクロールを促す。上下にゆっくり揺れ続ける */
.scroll-top-btn.is-idle {
  animation: scrollHintBob 1.8s ease-in-out infinite;
}

.scroll-top-btn.is-idle svg {
  transform: rotate(180deg);
}

@keyframes scrollHintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn.is-idle { animation: none; }
}

/* 左のサイドレールはHOME・区切り線・縦線・SCROLL／TOPボタンすべて含めてスマホでは非表示 */
@media (max-width: 767px) {
  .side-rail {
    display: none;
  }
}

/* ---- ボタン ---- */
/* LOGACYのボタン挙動（スライドして塗りが反転する）を踏襲。
   塗りは疑似要素で表現し、ラベルは span に包んで常に前面に出す */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.8em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-invert);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  transition: transform var(--duration) ease;
}

.btn span {
  position: relative;
  z-index: 1;
  transition: color var(--duration) ease;
}

.btn--primary {
  background: var(--color-invert);
}
.btn--primary span { color: var(--color-bg); }
.btn--primary::before { background: var(--color-bg); }
.btn--primary:hover::before { transform: translateX(0); }
.btn--primary:hover span { color: var(--color-invert); }

.btn--outline {
  background: transparent;
}
.btn--outline span { color: var(--color-invert); }
.btn--outline::before { background: var(--color-invert); }
.btn--outline:hover::before { transform: translateX(0); }
.btn--outline:hover span { color: var(--color-bg); }

/* 「よくあるご質問を見る」（.btn--outline）と同じ色・背景にする */
.btn--light {
  background: transparent;
}
.btn--light span { color: var(--color-invert); }
.btn--light::before { background: var(--color-invert); }
.btn--light:hover::before { transform: translateX(0); }
.btn--light:hover span { color: var(--color-bg); }

/* ---- テーブル ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table th, .data-table td {
  text-align: left;
  padding: 1em;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.data-table th {
  color: var(--color-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ---- アコーディオン（FAQ） ---- */
/* マウスオーバーで、項目下の区切り線（border-bottom）をなぞるように
   白線を左から右へ引く（実線の上に重ねたscaleXの線を0→100%にアニメーション） */
.faq-item {
  position: relative;
  border-bottom: 1px solid var(--color-line);
}

.faq-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  pointer-events: none;
}

.faq-item:hover::after {
  transform: scaleX(1);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding-block: 1.4em;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--fs-lg);
  color: var(--color-muted);
  transition: transform 0.4s ease;
}

.faq-item[open] summary::after {
  content: "−";
}

/* マウスオーバーで「+」が1回転しながら少し拡大する */
.faq-item summary:hover::after {
  transform: rotate(360deg) scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after,
  .faq-item::after {
    transition: none;
  }
}

.faq-item p {
  max-width: none;
  padding-bottom: 1.4em;
  color: var(--color-muted);
}

/* FAQの階層ページ：質問の見出し（h2/h3）は summary の文字そのまま。回答内のリンクは下線つき */
.faq-item summary :is(h2, h3) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.faq-item p a,
.work-detail__section p a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.work-detail__section .data-table th {
  white-space: normal;
}

/* FAQの階層ページ：見出しと本文の間隔、カテゴリ末尾のリンクの余白 */
.page-faq #hero h1 {
  margin-bottom: 0.6em;
}

/* パンくず（よくあるご質問 ／ カテゴリ）と見出しの間隔は、見出しと下の文章の間隔（h1の0.6em）と同じ */
.page-faq #hero .container > p:first-child + h1 {
  margin-top: 0.6em;
}

.page-faq .work-detail__section h2 {
  margin-bottom: 0.8em;
}

.page-faq .work-detail__section .data-table {
  margin-block: 1em 1.4em;
}

/* ---- フォーム ---- */
.form-field {
  margin-bottom: 1.6em;
}

.form-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.form-required {
  color: var(--color-muted);
  font-size: var(--fs-xs);
  margin-left: 0.4em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--color-muted);
  background: var(--color-bg);
  font-family: inherit;
  font-size: var(--fs-base);
}

.form-textarea { min-height: 10em; resize: vertical; }

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1.6em;
}

.form-radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.form-error {
  display: none;
  margin-top: 0.5em;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.form-field.has-error .form-error { display: block; }
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea {
  border-color: var(--color-text);
  border-width: 2px;
}

/* ==========================================================================
   6. ページ固有
   ========================================================================== */

/* ---- トップ：ファーストビュー ---- */
/* 初期スクロール中は背景映像を固定表示にするため、可視領域より長めの高さを確保する */
.page-index .hero {
  position: relative;
  min-height: 200vh;
}

/* 画面に完全固定し、サービスの帯が現れる間もスクロールに関係なく表示し続ける。
   z-index:-1のため、背景を明示していない通常コンテンツは自動的にその上に重なる */
.page-index .hero-media {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-bg);
}

.page-index .hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2本の動画を同じ位置に重ね、切り替え時はopacityでクロスフェードする */
.hero-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-video.is-current {
  opacity: 1;
}

/* top00.mp4（2つ目の映像）は、白黒にして暗めに見せる（このあと青系の膜を重ねる） */
.hero-video--b {
  filter: grayscale(1) brightness(0.38);
}

/* top00.mp4（2つ目の映像）が表示されている間だけ、その上に、青系モノクロにする色の膜（::before。
   映像の明暗はそのままに、色だけを青にする）と、黒い透過の膜（::after。50%）を重ねる。
   どちらも、切り替えのクロスフェード（1秒）と同じ速さで現れる */
.page-index .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* ティール寄りの青（参考：コードを映した暗い画面の、青緑がかった青） */
  background: rgb(40, 130, 165);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.page-index .hero-media:has(.hero-video--b.is-current)::before {
  opacity: 1;
}

.page-index .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.page-index .hero-media:has(.hero-video--b.is-current)::after {
  opacity: 1;
}

/* ---- ヒーロー動画のローディング演出 ---- */
.hero-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity 0.6s ease;
}

.hero-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ロゴ自体がバーのように左から満ちていく演出。
   薄いベース（輪郭）の上に、同じロゴをclip-pathで左から徐々に見せる */
.hero-loader-logo {
  position: relative;
  width: 120px;
  height: 36px;
}

.hero-loader-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-loader-logo__base {
  opacity: 0.25;
}

.hero-loader-logo__fill {
  clip-path: inset(0 100% 0 0);
  animation: heroLoaderFill 1.8s linear infinite;
}

@keyframes heroLoaderFill {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-loader-logo__fill { animation: none; clip-path: inset(0 0 0 0); }
}

/* ---- ヒーロー中央：光沢の縦線＋リード文 ---- */
/* 動画読み込み完了の2秒後、中央の細い光沢の縦線が画面下の見えない位置を起点に上端まで
   伸びて消え、しばらくしたら同じ場所でリード文が現れるように一度だけ変化する（ループしない）。
   リード文はE・P・Xの3文字が中心に重なって現れたあと、それぞれ本来の位置へ
   散らばりながら統合され、最後にleadtext.webp（全文）にクロスフェードする */
.hero-scanline {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 150vh;
  background: #f5f6f6;
  box-shadow: 0 0 2px rgba(245, 246, 246, 0.6);
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  transition: transform 1.5s ease-out, opacity 0.4s ease;
  pointer-events: none;
}

.hero-scanline.is-active {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.hero-scanline.is-hidden {
  opacity: 0;
}

.hero-leadtext {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* #heroが画面から完全に外れたら消す。以降のセクション側で背景動画だけを覗かせたい
   隙間（.service-bodyの上マージンなど）に、固定表示のリード文が写り込まないようにする */
.hero-leadtext.is-past {
  opacity: 0;
}

/* leadtext.webpと、入れ替わりで下から現れるリード文を同じ位置に重ねておく。
   スクロールを始めるとJSが1つ目を上へ移動させながら消し、2つ目を下から運ぶ
   （initHeroLeadScenesがスクロール量に応じてopacity・transformを直接更新する） */
.hero-leadtext__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, 70%);
  text-align: center;
  pointer-events: none;
}

.hero-leadtext__scene--1 {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.hero-leadtext__scene--2 {
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-leadtext__tagline {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-leadtext__tagline.is-visible {
  opacity: 1;
}

.hero-leadtext__phrase {
  font-size: calc(var(--fs-lg) * 2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.hero-leadtext__phrase-line {
  display: block;
}

/* 文字1つずつ、「非表示→輪郭線→塗りつぶし」の3段階で現れる。
   出現はスクロールで一度だけ発火し、以降はスクロール量に関係なくランダムな順で
   一気に最後まで再生する（initHeroLeadScenesのplayEnter）。
   その後さらにスクロールすると、今度は「塗りつぶし→輪郭線→非表示」と逆順に、
   スクロール量に応じて連続的に消えていく */
.hero-leadtext__phrase-char,
.concept-text__char {
  display: inline-block;
  color: rgba(245, 246, 246, 0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(245, 246, 246, 0);
}

/* E・P・Xの3文字を、統合後のleadtext.webp内での実際の文字位置と同じ座標系
   （幅min(600px,70%)・縦横比1088:61）に重ねて配置しておく */
.hero-leadtext__assemble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 70%);
  aspect-ratio: 1088 / 61;
}

.hero-leadtext__letter {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.8);
  transition: opacity 0.5s ease, left 0.9s ease, top 0.9s ease, transform 0.9s ease;
}

.hero-leadtext__letter.is-visible {
  opacity: 1;
}

.hero-leadtext__letter.is-hidden {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* leadtext.webp内でのE・P・Xそれぞれの実際の文字位置（%）に合わせる */
.hero-leadtext__letter--e {
  width: 3.4%;
}

.hero-leadtext__letter--p {
  width: 3.13%;
}

.hero-leadtext__letter--x {
  width: 4.04%;
}

.hero-leadtext__letter--e.is-assembled {
  left: 1.75%;
  top: 40.16%;
  transform: translate(-50%, -50%) scale(1);
}

.hero-leadtext__letter--p.is-assembled {
  left: 38.55%;
  top: 40.16%;
  transform: translate(-50%, -50%) scale(1);
}

.hero-leadtext__letter--x.is-assembled {
  left: 69.72%;
  top: 40.16%;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-leadtext,
  .hero-scanline,
  .hero-leadtext__tagline,
  .hero-leadtext__letter {
    transition: none;
  }

  /* スクロール連動のズームアウト／固定演出は行わず、通常のスクロールに戻す */
  .page-index .hero {
    min-height: 0;
  }

  .page-index .hero-media {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 70vh;
  }

  /* スクロール連動の入れ替え演出を行わないため、最終状態（リード文側）を最初から見せておく */
  .hero-leadtext__scene--1 {
    opacity: 0;
  }

  .hero-leadtext__scene--2 {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .hero-leadtext__phrase-char {
    color: var(--color-text);
  }
}

/* ---- トップ／実績：1本ずつ大きく並べる ---- */
.work-feature + .work-feature {
  margin-top: var(--section-gap);
}

/* トップページの実績（LOGACY・ZEILY）だけは横2列にし、縦の余白はグリッドの gap に任せる */
.work-features .work-feature + .work-feature {
  margin-top: 0;
}

.work-feature__body {
  margin-top: 1.2em;
}

/* トップページの実績（LOGACY・ZEILY）だけ：カード全体がリンクになっている
   （<a class="work-feature">）ため、リンクの既定スタイルを打ち消し、四隅に
   小さな「かぎ括弧」状の枠を置く。ホバー（フォーカス）で辺が伸びて
   1本の四角い枠になる。枠はカードの端ぴったりではなく内側にパディング分
   余白を取り、コンテンツもその分小さく（内側に）収める */
.work-features .work-feature {
  position: relative;
  display: block;
  padding: calc(1.5em + 20px) calc(1.5em + 5px) calc(1.5em - 4px);
  color: inherit;
  text-decoration: none;
}

.work-features .work-feature__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--color-text);
  pointer-events: none;
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 2;
}

.work-features .work-feature__corner--tl {
  top: 0.6em;
  left: 0.6em;
  border-top-width: 1px;
  border-left-width: 1px;
}

.work-features .work-feature__corner--tr {
  top: 0.6em;
  right: 0.6em;
  border-top-width: 1px;
  border-right-width: 1px;
}

.work-features .work-feature__corner--bl {
  bottom: 0.6em;
  left: 0.6em;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.work-features .work-feature__corner--br {
  bottom: 0.6em;
  right: 0.6em;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.work-features .work-feature:hover .work-feature__corner,
.work-features .work-feature:focus-visible .work-feature__corner {
  width: calc(100% - 1.2em);
  height: calc(100% - 1.2em);
}

@media (prefers-reduced-motion: reduce) {
  .work-features .work-feature__corner {
    transition: none;
  }
}

/* LOGACY・ZEILYの間のマージンをやや狭くする。grid-template-columns:
   repeat(2, 1fr)により、その分だけ各カードの幅は自動的に広がる */
.work-features {
  gap: calc(var(--gutter) * 1.5);
}

/* トップページの実績（LOGACY・ZEILY）だけ：タイトル・制作内容をサムネイルの左に置く。
   サムネイルは行の60%を占める。タグは各項目を四角で囲んだチップにし、
   1行ごとに改行して縦に並べる */
.work-features .work-feature__head {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
}

.work-features .work-feature__intro {
  flex: 1;
  min-width: 0;
}

/* タイトル（映像サービスサイト制作など）はサムネイルの上の行に置き、ブランド名
   （LOGACY／ZEILY）はサムネイルの左・タグの上に置く。ブランド名の大きさは、下のタグ（サイトデザインなど）と同じ（太字のまま） */
.work-features .work-feature > h3 {
  margin-bottom: 0.8em;
  font-size: calc(var(--fs-xl) * 0.8);
}

.work-features .work-feature__brand {
  font-size: var(--fs-xs);
}

.work-features .work-feature__thumb {
  flex: 0 0 60%;
  max-width: 60%;
}

/* LOGACY・ZEILYのサムネイル：画像（透過あり・約1.94:1）を、切り取らず・黒い背景なしで、全体を表示する */
#works .work-features .work-feature__thumb--full {
  aspect-ratio: 1914 / 985;
  background: transparent;
}

.work-feature__thumb--full img {
  object-fit: contain;
}

.work-features .work-feature__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  margin-top: 0.5em;
}

.work-features .work-feature__tag-chip {
  display: inline-block;
  border: 1px solid var(--color-line);
  padding: 0.3em 0.8em;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* 実績の黒背景内の小見出し（ウェブ × 映像実績／ウェブ実績／映像実績）。センタリングし、
   文字サイズはZEILYの見出しと同じにする */
.works-sub-heading {
  text-align: center;
  font-size: calc(var(--fs-xl) * 0.8);
  margin-bottom: 1em;
}

/* ウェブ実績・映像実績の画像を、黒背景内で左から右へ流してループする。
   画像の高さはZEILYのサムネイルと同じ（--reel-h、initWorksReelがJSで実測して設定） */
.works-reel {
  margin-top: 3em;
}

.works-reel__item + .works-reel__item {
  margin-top: 2em;
}

.works-reel__marquee {
  overflow: hidden;
}

.works-reel__track {
  display: flex;
  width: max-content;
  animation: works-reel 60s linear infinite;
}

.works-reel__track img {
  display: block;
  flex-shrink: 0;
  max-width: none;
  width: auto;
  height: var(--reel-h, 200px);
}

@keyframes works-reel {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* 映像実績は右から左へ流す */
.works-reel__track--rtl {
  animation-name: works-reel-rtl;
}

@keyframes works-reel-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .works-reel__track {
    animation: none;
  }
}

/* ---- トップ：サービス（3つの要点を「三」のように横長の帯で積む） ---- */
/* 帯が並ぶ間は透過させ、固定表示の背景映像をそのまま見せる */
#service {
  position: relative;
  background: transparent;
}

/* 図解より先の通常コンテンツの土台。以前はここに不透明な黒背景を敷いて映像を完全に
   覆っていたが、現在は黒背景をフロー図本体（.flow-panel）だけに絞り、ウェブ制作／
   映像制作の左右エリアは映像が透けたままにするため、ここ自体は透過のまま何もしない */
.service-body {
  position: relative;
  margin-top: var(--section-gap);
}

@media (min-width: 768px) {
  .service-body {
    margin-top: 0;
  }
}

/* コンセプト（トップのヒーロー直後の新エリア）：見出しはサービス節の見出しと同じ作り。
   その下に、映像（横長2.99:1・画面幅の100%）、さらにその下に本文2行（中央、見出しに合わせた大きさ） */
.concept-video {
  width: 100%;
  /* 映画サイズ（2.39:1）より縦を20%減らした表示（2.39 ÷ 0.8 ≒ 2.99:1） */
  aspect-ratio: 2.99 / 1;
  margin: 2.4em auto 0;
  background: var(--color-bg);
}

/* 映像（top02.mp4）：元の色のまま、全体を暗くし、ごく薄い青緑の色味と、横の走査線（細い横縞）を重ねる。
   （以前のコントラスト・ビネット・黒のグラデーションは外した）
   重ねる順は、上から 走査線 → 青緑の色味（18%）→ 黒い膜（40%） */
.concept-video {
  position: relative;
  isolation: isolate;
}

.concept-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0,
      rgba(0, 0, 0, 0.18) 2px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 4px
    ),
    linear-gradient(rgba(20, 110, 140, 0.18), rgba(20, 110, 140, 0.18)),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

/* 映像は見出しがヒーローの文字とぴったり重なった瞬間に、本文は画面の下から20%の位置まで上がったときに、
   中央から左右へ開くマスクで現れる（JSが動いたときだけ隠す。.is-armed→.is-revealed） */
/* 自動再生がブロックされたとき（initLazyVideos）に、動画の中央へ出す再生ボタン */
.media-16-9 {
  position: relative;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 246, 246, 0.5);
  border-radius: 50%;
  background: rgba(4, 5, 4, 0.55);
  cursor: pointer;
  transition: background var(--duration) ease, border-color var(--duration) ease;
}

.video-play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--color-text);
}

.video-play-btn:hover,
.video-play-btn:focus-visible {
  border-color: var(--color-text);
  background: rgba(4, 5, 4, 0.8);
}

.concept-video.is-armed {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s ease;
}

.concept-video.is-armed.is-revealed {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .concept-video.is-armed {
    transition: none;
  }
}

/* 柱（最大1200px）より広い、画面幅の100%（左右いっぱい） */
@media (min-width: 768px) {
  .concept-video {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }
}

/* 本文2行は、上の映像と、下の「一括で制作するメリット」の見出しの、ちょうど中間に置く。
   映像の下の余白と、見出しの上の余白（#serviceの上余白）を、どちらもセクション余白（140px）にそろえる
   （#conceptの下余白はなくす） */
.concept-text {
  max-width: none;
  margin: var(--section-gap) auto 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-heading);
  text-align: center;
}

.concept-text__accent {
  color: var(--color-accent);
}

/* サービス節の見出し */
.service-heading {
  margin-top: -200px;
  margin-bottom: 0.6em;
  text-align: center;
  font-size: var(--fs-2xl);
}

/* ヒーローの直後ではなくなった（直前に#conceptがある）ため、上へ引き上げる負のマージンは使わない */
#service .service-heading,
.concept-heading {
  margin-top: 0;
}

/* コンセプトの見出しは、ヒーローで最初に出る「ウェブ×映像で／感情に届けるビジュアル体験を」
   （.hero-leadtext__phrase）と文字の大きさ・太さ・行間・中央を合わせる。ヒーローの文字は輪郭線だけ残って
   画面の縦中央に固定されており、この見出しが上がってきてぴったり重なる。背景は黒を敷かない（透過） */
#concept {
  background: transparent;
  padding-bottom: 0;
  /* 上の余白を200px減らす（エリア全体が200px上へ。ヒーローの下端に少し重なる） */
  margin-top: -200px;
}

.concept-heading {
  font-size: calc(var(--fs-lg) * 2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

@media (min-width: 768px) {
  .service-heading.concept-heading {
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }
}

@media (min-width: 768px) {
  /* 黒背景パネル・図解と同じレール基準のセンタリングに揃える */
  .service-heading {
    margin-left: calc(50% - 50vw + 44px);
    width: calc(100vw - 44px);
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) {
  /* コンセプト本文は、下の「ウェブ × 映像 を一括で制作するメリット」と中心を合わせる */
  .concept-text {
    margin-left: calc(50% - 50vw + 44px);
    width: calc(100vw - 44px);
    /* 通常の3倍（60px）。画面が狭いときは、2行目が折り返さないよう画面幅に比例して縮める */
    font-size: min(calc(var(--fs-lg) * 3), 3.125vw);
  }
}

/* 黒いパネル（3つの要点）・STRENGTHラベル・ベン図の行 */
.service-row {
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: stretch;
}

@media (min-width: 768px) {
  /* 図（左）〜黒背景パネル（右、.service-bars。JSで右端をCONTACTリンクに合わせる）を、
     左のSCROLLレールの線（44px）に実測せず常に左端から開始する（center にすると
     .service-barsの幅計算がその都度ずれるため、flex-startで固定する） */
  .service-row {
    margin-left: calc(50% - 50vw + 44px);
    width: calc(100vw - 44px);
    justify-content: flex-start;
  }
}

/* スマホ：VALUEは非表示にして、「一括で制作するメリット」の帯は、制作フローなどと同じ両端
   （左右のコンテナ余白の内側）に揃える。デスクトップ用の画面左端までのはみ出しはやめる */
@media (max-width: 767px) {
  .service-bars__strength {
    display: none;
  }

  .service-row {
    margin-left: 0;
    width: auto;
  }
}

/* 3つの要点をひとつの黒いパネルにまとめる。モバイルは残り幅いっぱいに広がるが、
   デスクトップでは幅を固定し、STRENGTH・ベン図と合わせた全体をセンタリングできるようにする。
   背景は透過させず、単色の黒にする（.flow-panelと同じ扱い） */
.service-bars {
  flex: 1;
  min-width: 0;
  order: 1;
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  color: var(--color-text);
}

.service-bars__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  min-width: 0;
}

/* 黒背景パネルは一貫性の図の右隣に配置（order: 1）。右端いっぱいまで伸ばした分、
   パディングで右のSCROLLレールの線から20px程度離す。左側（図との境界）には、
   見出し＋本文をまとめて縦に貫く下地の線（常時薄く表示）と、その上に重なる
   青い縦線を添える。青い線はスクロール進捗（--line-progress、JSで設定）に合わせて
   上から少しずつ伸び、伸び切った後はそのまま留まり、スクロールを戻したときだけ縮んで消える */
.service-bar {
  position: relative;
  padding: 1.28em var(--gutter) 1.28em 1.6em;
}

.service-bar__row {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.service-bar__thumb {
  flex-shrink: 0;
  width: 138px;
  height: 92px;
  object-fit: cover;
  border-radius: 0;
}

/* 768px以上は、縦（92px）はそのままで、幅を倍（276px）に */
@media (min-width: 768px) {
  .service-bar__thumb {
    width: 276px;
  }
}

.service-bar h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  font-size: calc(var(--fs-xl) * 0.8 - 2px);
}

/* 見出しの左の「一貫性／体験向上／効率化」。左の図（ベン図）の対応する円と同じタイミングで、
   白から青文字に変わる（initServiceVennが.service-barに.is-activeを付ける） */
/* 見出し行の下線。以前の縦線と同じ進捗（--line-progress）・同じ速さで、左から右へ紫の線を引く */
.service-bar__head {
  position: relative;
  padding-bottom: 0.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.8em;
  margin-bottom: 0.8em;
}

.service-bar__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  filter: drop-shadow(0 0 6px var(--color-accent));
  transform: scaleX(var(--line-progress, 0));
  transform-origin: left;
}

.service-bar__tag {
  padding: 0.1em 0.6em;
  border: 1px solid currentColor;
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color var(--duration) ease;
}

.service-bar.is-active .service-bar__tag {
  color: var(--color-accent);
}

.service-bar p { color: var(--color-muted); }

/* VALUEラベルはパネルの外（右）に置き、黒背景（.service-bars）の上端に合わせる */
.service-bars__strength {
  flex-shrink: 0;
  align-self: flex-start;
  order: 2;
  margin-left: 1.2em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--color-text);
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: var(--fs-lg);
}

/* VALUEラベルと同じ縦書きの英語タグを、制作フロー・実績・よくあるご質問・お問い合わせの
   各セクションにも設置する（initSectionTags）。コンテンツ右端（CONTACTリンクの左端に
   揃えている）のすぐ外側、同じX位置に、それぞれのコンテンツ上端に合わせて配置する */
.section-tag {
  display: none;
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--color-text);
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: var(--fs-lg);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .section-tag {
    display: block;
  }
}

/* 「お問い合わせ」のCONTACTタグは、マスク展開後（白背景）の見え方を優先し、
   常に黒文字にする（展開前は背景が暗いため多少見えづらくなるが許容する） */
.home-cta .section-tag {
  color: var(--color-bg);
}

/* 3つの要点に対応する円が均等に重なるベン図。3円が重なる中心にロゴを重ね、
   対応するコンテンツが画面に入っている間だけ、その円と見出しラベルを青く光らせる */
.service-venn {
  display: none;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  width: 320px;
  order: -1;
  margin-right: calc(var(--gutter) * 2);
}

/* 1024px以上では、左端を「制作フロー」の左端（レール線44px＋ページ内ナビを
   避ける150px）に揃える */
@media (min-width: 1024px) {
  .service-venn {
    margin-left: 150px;
  }
}

.service-venn__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 常に薄く見えている下地の円 */
.service-venn__circle-base {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
}

/* 青い円は、対応する要点のスクロール進捗に合わせて少しずつ描画する（stroke-dashoffsetはJSで直接更新）。
   一度描き終えたら、スクロールを戻したときだけ再び消えていく */
.service-venn__circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 717;
  stroke-dashoffset: 717;
  filter: drop-shadow(0 0 6px var(--color-accent)) drop-shadow(0 0 14px rgba(71, 194, 221, 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-venn__circle.is-active {
  opacity: 1;
}

.service-venn__label {
  fill: var(--color-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: fill var(--duration) ease;
}

.service-venn__label.is-active {
  fill: var(--color-accent);
}

/* ロゴは3円が重なる中心（見た目の重心）に合わせる */
.service-venn__logo {
  position: absolute;
  top: 55.8%;
  left: 52.48%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: auto;
}

@media (min-width: 768px) {
  .service-bar {
    padding: 1.92em var(--gutter) 1.92em 3em;
  }

  .service-venn {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-venn__circle,
  .service-venn__label {
    transition: none;
  }
}

/* 「制作フロー」の行。フロー図（.flow-panel、黒背景）を左に置き、キャプション＋
   ウェブ制作／映像制作（.flow-side、黒背景の外）をその右に添える。左端が
   「ブランドの世界観〜」の黒背景（.service-bars）と同じレール線に揃うよう、
   #service .service-body > * の幅上限（var(--container-w)）をここでは外し、
   .service-body自体の全幅（レール線〜画面右端）をそのまま使う */
.flow-row {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

@media (min-width: 768px) {
  /* #service .service-body > * の max-width: var(--container-w) （IDセレクタを含み
     詳細度が高い）より優先させるため、詳細度を上げておく */
  #service .service-body .flow-row {
    max-width: none;
  }

  .flow-row {
    flex-direction: row;
    /* 右側（.flow-side）の先頭を「コンセプト設計」の先頭に縦位置を合わせる */
    align-items: flex-start;
    justify-content: flex-start;
    /* .flow-panel／.flow-sideの左右位置はJS（initFlowAlignment）が実測して
       margin-leftで直接制御するため、flexのgapは使わない（二重に間隔が
       付かないようにするため） */
    gap: 0;
  }
}

.flow-side {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  text-align: left;
}

@media (min-width: 768px) {
  .flow-side {
    flex: 0 1 320px;
  }
}

/* 黒背景はフロー図本体だけに絞る（左右のウェブ制作／映像制作は映像が透けたまま）。
   矢印などの切り抜きはやめ、単純な矩形にする。幅は「ブランドの世界観〜」の
   黒背景（.service-bars、flex:0 1 700px）と揃える */
.flow-panel {
  position: relative;
  min-width: 0;
  background: var(--color-bg);
  /* 左右パディングを30%減らし（2.5em→1.75em）、浮いた分（0.75em）を
     右側コンテンツ（.flow-side）とのマージンに充てる（initFlowAlignment） */
  padding: 2em 1.75em;
}

@media (min-width: 768px) {
  .flow-panel {
    flex: 0 1 700px;
  }
}

/* 図解：コンセプトからウェブ・映像を経て成果物に至る流れを線とテキストだけで表現する */
.concept-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 0.6em;
}

.concept-diagram__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.2em;
  flex-wrap: wrap;
}

.concept-diagram__node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
  min-width: 9em;
  padding: 1em 1.2em;
  border: 1px solid var(--color-line);
}

/* ヒアリング・企画・ウェブ制作・映像制作は文字を太くする
   （補足ラベル.u-mutedは個別にfont-weight:400を持つため影響しない） */
.concept-diagram__node--intro,
.concept-diagram__node--process,
.concept-diagram__node--web,
.concept-diagram__node--video {
  font-weight: 700;
}

/* 「ウェブ」「映像」の枠。対応する「ウェブ制作」「映像制作」の黒背景マスクと
   同時に、同じ左→右のマスクで背景が現れる（initConceptOfferReveal） */
.concept-diagram__node--web,
.concept-diagram__node--video {
  position: relative;
}

.concept-diagram__node--web::before,
.concept-diagram__node--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 5, 4, 0.75);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s ease;
}

.concept-diagram__node--web.is-revealed::before,
.concept-diagram__node--video.is-revealed::before {
  clip-path: inset(0 0 0 0);
}

/* 左側（企画・ウェブ・映像）の文字は、右側の対応する説明（企画・ウェブ制作・映像制作）と
   同時に、30%以上見えたら青文字へ・見えなくなったら白文字に戻る
   （initConceptTextHighlight）。u-mutedの副文言は対象外（各自の色を保つ） */
.concept-diagram__node--process,
.concept-diagram__node--web,
.concept-diagram__node--video {
  transition: color 0.5s ease;
}

.concept-diagram__node--process.is-highlighted,
.concept-diagram__node--web.is-highlighted,
.concept-diagram__node--video.is-highlighted {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .concept-diagram__node--web::before,
  .concept-diagram__node--video::before {
    transition: none;
  }
}

@media (min-width: 768px) {
  /* 「ブランドの世界観〜」の黒背景パネル＋ベン図の全体幅（約1100px）に合わせる */
  .concept-diagram__row--concept .concept-diagram__node {
    width: 1100px;
    max-width: 100%;
  }
}

/* ①企画は、②ウェブ制作と同じ幅の枠で囲む（ウェブ／映像の行と同じ
   grid-template-columns: 1fr 3em 1fr・column-gap: 1.2em の1列分の幅） */
.concept-diagram__node--process {
  border: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .concept-diagram__row--concept .concept-diagram__node--process {
    width: calc((100% - 5.4em) / 2);
  }
}

.concept-diagram__node--process .u-muted {
  font-size: var(--fs-base);
  font-weight: 400;
}

/* 一番上の「ヒアリング」。白文字・枠なしで、企画と同じ見た目にする */
.concept-diagram__node--intro {
  border: none;
  color: var(--color-text);
}

.concept-diagram__node--intro .u-muted {
  font-size: var(--fs-base);
  font-weight: 400;
}

/* 「ウェブ制作」「映像制作」。黒背景の外（映像が透けたエリア）にあるため、
   透過した黒背景を敷いて読みやすくする。背景は::beforeにして、画面に入ったタイミングで
   左端から右へマスクを開くように現れる（initConceptOfferReveal） */
.concept-diagram__offer {
  position: relative;
  /* 黒背景を文章の幅に合わせ、左右の余白（1em）を同じにする。幅いっぱいに
     伸ばすと、一行で収まる文章の右側にだけ大きな余白が残ってしまう */
  width: fit-content;
  max-width: 100%;
  /* 黒背景（::before）は左を1em内側から始めるため、その分を足した左パディングにして、
     黒背景の端から文字までの余白を左右とも1emに揃える */
  padding: 1em 1em 1em 2em;
  text-align: left;
}

.concept-diagram__offer::before {
  content: "";
  position: absolute;
  /* 左の黒背景（.flow-panel）との間にマージンを取る */
  inset: 0 0 0 1em;
  z-index: -1;
  background: rgba(4, 5, 4, 0.75);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s ease;
}

.concept-diagram__offer.is-revealed::before {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .concept-diagram__offer::before {
    transition: none;
  }
}

.concept-diagram__offer h3 {
  font-size: var(--fs-sm);
  margin-bottom: 0.4em;
  text-align: center;
  transition: color 0.9s ease;
}

/* 左側（企画・ウェブ・映像）の文字と同時に、30%以上見えたら青文字へ・
   見えなくなったら白文字に戻る（initConceptTextHighlight） */
.concept-diagram__offer.is-highlighted h3 {
  color: var(--color-accent);
}

.concept-diagram__offer p {
  /* 全体のp{max-width:34em}で本文が右に寄り切らず、右側に大きな余白が残って
     左パディングより広く見えていた。カード幅いっぱいに使い、左右の余白を揃える */
  max-width: none;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* 映像列の5項目は枠線で囲んだノードのまま、対応する区間（同じdata-flow-index）が
   スクロールで描かれている間は枠線を青くして連動を示す */
.concept-diagram__node--sub.is-active {
  border-color: var(--color-accent);
}

/* ウェブ・映像の見出し行の下に、それぞれの制作物を1列で並べる行 */
.concept-diagram__row--columns {
  align-items: flex-start;
}

.concept-diagram__column-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
  min-width: 0;
}

/* 列の見出し（Webコンテンツ／動画コンテンツ）：「脚本・撮影・編集」と同じ大きさ・太さ・色（.u-muted） */
.concept-diagram__column-title {
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
}

.concept-diagram__node--sub {
  min-width: 0;
  padding: 0.6em 0.9em;
  font-size: var(--fs-xs);
}

/* 各行の青線の上に、対応する認知〜共有のラベルを黒背景・青枠のバッジとして乗せる。
   枠線・線と同時にis-activeが付くため、CSSだけで連動する */
.concept-diagram__flow-badge {
  display: none;
}

@media (min-width: 768px) {
  .concept-diagram__flow-badge {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% + 2.7rem);
    transform: translate(-50%, -50%);
    z-index: 1;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    color: var(--color-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.2em 0.7em;
    white-space: nowrap;
    transition: border-color 0.3s ease, color 0.3s ease;
  }

  .concept-diagram__flow-badge.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

@media (min-width: 768px) {
  /* ウェブ⇄映像の行、その下の2本の↓、さらにその下の制作物一覧の行を同じグリッドに
     することで、ウェブ／映像それぞれの横幅・位置を正確に揃える */
  .concept-diagram__row--pair,
  .concept-diagram__row--pair-arrows,
  .concept-diagram__row--columns {
    display: grid;
    grid-template-columns: 1fr 3em 1fr;
    align-items: center;
    column-gap: 1.2em;
  }

  .concept-diagram__row--pair-arrows .concept-diagram__arrow {
    text-align: center;
  }

  .concept-diagram__row--pair-arrows .concept-diagram__arrow:first-child {
    grid-column: 1;
  }

  .concept-diagram__row--pair-arrows .concept-diagram__arrow:last-child {
    grid-column: 3;
  }

  .concept-diagram__row--columns > .concept-diagram__column-list:first-child {
    grid-column: 1;
  }

  .concept-diagram__row--columns > .concept-diagram__column-list:last-child {
    grid-column: 3;
  }

  /* 「ブログ記事 / SNS」と「企業コンセプト動画」など、各行のウェブ側・映像側を
     長い青線で繋ぐ。枠線と同時にis-activeが付くため、CSSだけで連動する */
  .concept-diagram__row--columns > .concept-diagram__column-list:first-child .concept-diagram__node--sub {
    position: relative;
  }

  .concept-diagram__row--columns
    > .concept-diagram__column-list:first-child
    .concept-diagram__node--sub::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    /* .concept-diagram__node--subはfont-sizeが小さい（fs-xs）ため、そのemで幅を
       指定するとグリッド側の実際の間隔（親の通常フォントサイズ基準の1.2em+3em+1.2em）
       より短くなり線が途切れる。remで指定してズレをなくす */
    width: 5.4rem; /* column-gap(1.2em) + 中央列(3em) + column-gap(1.2em)（親基準） */
    height: 2px;
    background: var(--color-line);
    transform: translateY(-50%);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .concept-diagram__row--columns
    > .concept-diagram__column-list:first-child
    .concept-diagram__node--sub.is-active::after {
    background: var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent), 0 0 14px rgba(167, 139, 250, 0.6);
  }
}

/* 認知・関心・検討・行動・共有を結ぶ5角形の図。辺は初期状態で消えており、対応する
   成果物（左、同じdata-flow-index）のスクロール進捗に合わせて青いラインで
   少しずつ描かれる（initFlowPentagon） */
.flow-pentagon {
  width: 100%;
  max-width: 368px;
  /* 文字を1.5倍にした分、左側のラベル（共有など）がはみ出さないよう全体を右へ移動する */
  margin-left: 30px;
}

.flow-pentagon__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.flow-pentagon__base {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.flow-pentagon__edge {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--color-accent)) drop-shadow(0 0 14px rgba(167, 139, 250, 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.flow-pentagon__edge.is-active {
  opacity: 1;
}

.flow-pentagon__vertex {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1.5;
  transition: fill var(--duration) ease, stroke var(--duration) ease;
}

.flow-pentagon__vertex.is-active {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

/* 認知・関心・検討・行動・共有：左図のベン図の「一貫性」（.service-venn__label）と同じ文字
   （フォント・太さ・字間・見た目の大きさ16px）。ベン図は1.067倍、この図は0.92倍に拡大縮小されるため、
   見た目を16pxにそろえるには 16px÷0.92≒17.4px で指定する */
.flow-pentagon__label {
  fill: var(--color-text);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17.4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: fill var(--duration) ease;
}

/* 「なんだろう」など：白文字で、これまでの1.2倍（12px→14.4px） */
.flow-pentagon__label-muted {
  fill: var(--color-text);
  font-size: 14.4px;
  font-weight: 400;
  letter-spacing: normal;
}

.flow-pentagon__label.is-active {
  fill: var(--color-accent);
}

.flow-pentagon__center-label {
  fill: var(--color-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.concept-diagram__heading {
  margin-top: calc(var(--section-gap) * 0.6);
  margin-bottom: calc(var(--section-gap) * 0.3);
  font-size: var(--fs-2xl);
  text-align: center;
}


/* 「ブランドの世界観、ひとつにつながる」（.service-row）以外の主要セクション（私たちについて・
   実績・よくあるご質問の見出し類、およびサービス節内の図解・オファーカード）も、同じ左マージン
   （左のSCROLLレールの線を基準にしたセンタリング）に揃える。
   .service-row と全く同じ手法（レール線〜画面右端いっぱいまでbleedさせ、その中でflexで
   中央寄せする）を使うことで、コンテナ幅がmax-widthに達しない中間幅でも常にズレなく揃い、
   右にはみ出て横スクロールが出ることもない。
   #service > .container 自体は変更しない。.service-row がこのコンテナの通常センタリング
   （margin-inline: auto）を前提にbleed量を打ち消す計算をしているため、ここを変更すると
   .service-row側の計算が崩れてしまう。代わりに.service-bodyの方に同じ手法を適用する */
@media (min-width: 768px) {
  #people > .container,
  #works > .container,
  #faq > .container,
  #service .service-body {
    max-width: none;
    width: calc(100vw - 44px);
    margin-left: calc(50% - 50vw + 44px);
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #people > .container > *,
  #works > .container > *,
  #faq > .container > *,
  #service .service-body > * {
    width: 100%;
    max-width: var(--container-w);
  }
}

.concept-diagram__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--color-muted);
}

.concept-diagram__arrow {
  color: var(--color-muted);
  line-height: 1;
  /* 前後のボックスのpaddingの違いによらず、矢印の上下の余白を常に均等にする */
  margin-block: 0.4em;
}

/* 制作フロー下の「サービスをくわしく見る」。幅は文字の周りに収め、位置はJSが柱の中央に合わせる。
   色・ホバーは .btn--light（実績をすべて見る）と同じ */
.flow-more {
  display: flex;
  width: fit-content;
  margin: 3em auto 0;
}

#service .service-body > .flow-more {
  width: fit-content;
  max-width: none;
}

/* 他のボタンは直前のコンテンツから3em空けているが、ここは行の下端が左の黒背景（.flow-panel）
   の下端で、ボタンの見た目の直前は右の5角形図のラベル（その上）になる。見た目の間隔を
   詰めるため1.5emにする（黒背景と重ならない範囲） */
@media (min-width: 768px) {
  .flow-more {
    margin-top: 1.5em;
  }
}

/* ---- トップ：よくあるご質問／実績のボタン位置 ---- */
#works .works-content > .btn,
#faq > .container > .btn {
  margin-top: 3em;
}

/* 「制作フロー」エリア（#service）の下マージンを半分にし、「実績」との距離を近づける */
#service {
  padding-bottom: calc(var(--section-gap) / 2);
}

/* 「実績」は見出し上のマージンを半分にする（下は通常どおり） */
#works {
  position: relative;
  padding-top: calc(var(--section-gap) / 2);
}

/* 「実績」エリアのみに写真を敷く。background-attachment:fixedはブラウザ・環境に
   よって描画されない（背景が透明のままになる）ことがあるため使わず、通常の
   scroll添付のまま、動きはbackground-positionをJSで実際に動かして
   パララックス（本文よりゆっくり動く視差）を付ける（initParallaxBg） */
#works {
  background: url("img/bg_top2.webp") center / cover no-repeat;
}

/* よくあるご質問・CTAは写真の対象外。単色をマスクで表示する仕組みが機能するよう、
   （u-surface/u-invertが与える常時表示の単色を打ち消して）ベースは透明に戻す。
   .home-ctaは.u-invertと詳細度が同じでは負けるため、複合セレクタで詳細度を上げる */
#faq {
  background: transparent;
}

.u-invert.home-cta {
  background: transparent;
}

/* 見出しはそれぞれの下のコンテンツ幅に合わせてセンタリングし（initWorksFaqAlignment）、
   コンテンツ（カード・アコーディオン）は「ブログ記事 / SNS発信」の枠左端に揃える。
   ボタンは全体センタリングのまま */
#works .section-head,
#faq .section-head {
  text-align: center;
}

/* 「実績」は見出し以外（.works-content：カード・ボタンをまとめた1つの要素）を
   初期非表示にし、セクションが50%画面に入ったタイミングで左右に広がるマスクで
   一度だけ表示する（initWorksMaskReveal） */
#works .works-content {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1s ease;
}

#works .works-content.is-revealed {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  #works .works-content {
    transition: none;
  }
}

/* 見出し以外のコンテンツ（カード・ボタン）に透過黒背景を敷き、パララックス写真の
   上でも読みやすくする。パディングは「ユーザーを動かす制作フロー」の黒背景
   （.flow-panel）と同じ2em 2.5emにする（initWorksFaqAlignmentで外枠の左端も
   .flow-panelの左端に揃える。右端はCONTACTリンクの左端のまま） */
#works .works-content {
  background: rgba(4, 5, 4, 0.75);
  padding: 2em 2.5em;
  text-align: center;
}

#works .works-content .work-features {
  text-align: left;
}

/* 「よくあるご質問」：質問がすべて表示されてから（最後の.faq-itemが画面に入ったら）、
   背景（黒、var(--color-bg)）を左から右へ一度だけマスクで広げて表示する
   （initFaqBgReveal）。スクロール連動ではなく、その1点で一気に切り替わる。
   マスクが開くまではベース（transparent）が透けて見える */
#faq {
  position: relative;
}

#faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 「実績」の黒パネル（.works-content）と同じ透過率にし、背後の映像を
     うっすら透過させる */
  background: rgba(4, 5, 4, 0.75);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease;
}

#faq.is-revealed::before {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  #faq::before {
    transition: none;
  }
}

/* 背景の横幅をコンテンツ幅ぴったりに合わせたため、質問文がその端に接しないよう
   左右にパディングを設ける（トップページのみ） */
#faq .faq-item summary,
#faq .faq-item p {
  padding-inline: 1.2em;
}

/* 「制作のご相談」（トップページのみ・.home-cta）：よくあるご質問と同じ仕組みで、
   右から左へ一度だけマスクで白背景（.u-invertの単色）を広げて表示する
   （initCtaBgReveal）。マスクが開くまではベース（transparent、実質は暗い背景）の
   ため、その間は文字・ボタンを白背景用ではなく通常（暗い背景用）の配色にし、
   開いたら.u-invertの配色に戻す */
.home-cta {
  position: relative;
}

.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-invert);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.8s ease;
}

.home-cta.is-revealed::before {
  clip-path: inset(0 0 0 0);
}

.home-cta:not(.is-revealed) {
  color: var(--color-text);
}

.home-cta:not(.is-revealed) .btn {
  border-color: var(--color-invert);
}

.home-cta:not(.is-revealed) .btn--primary {
  background: var(--color-invert);
}

.home-cta:not(.is-revealed) .btn--primary span {
  color: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .home-cta::before {
    transition: none;
  }
}

/* 「実績をすべて見る」「よくあるご質問をすべて見る」は幅100%にせず、文字の周りに収める */
#works .works-content > .btn--light,
#faq > .container > .btn--outline {
  width: auto;
}

/* ---- 実績個別ページ ---- */
.work-detail__section + .work-detail__section {
  margin-top: var(--section-gap);
}

/* ---- FAQ：仕様表 ---- */
.faq-category + .faq-category {
  margin-top: var(--section-gap);
}

/* ハブ：カテゴリを2列で並べ、列の間に縦線を引く（色はヘッダーメニューの縦線と同じ --color-line） */
.grid > .faq-category + .faq-category {
  margin-top: 0;
}

.grid > .faq-category {
  margin-bottom: calc(var(--section-gap) * 0.4);
}

.faq-category > .btn {
  margin-top: 1.8em;
}

@media (min-width: 768px) {
  .page-faq .grid--2 {
    position: relative;
    column-gap: calc(var(--gutter) * 3);
  }

  .page-faq .grid--2::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--color-line);
  }
}

/* ==========================================================================
   7. ユーティリティ
   ========================================================================== */
.u-invert {
  background: var(--color-invert);
  color: var(--color-bg);
}

/* 白背景セクション（.u-invert）の上では、ボタンの明暗をさらに反転させる */
.u-invert .btn { border-color: var(--color-bg); }
.u-invert .btn--primary { background: var(--color-bg); }
.u-invert .btn--primary span { color: var(--color-invert); }
.u-invert .btn--primary::before { background: var(--color-invert); }
.u-invert .btn--primary:hover span { color: var(--color-bg); }
.u-invert .btn--outline span { color: var(--color-bg); }
.u-invert .btn--outline::before { background: var(--color-bg); }
.u-invert .btn--outline:hover span { color: var(--color-invert); }

.u-surface {
  background: var(--color-surface);
}

.u-muted {
  color: var(--color-muted);
}

.u-pt-0 {
  padding-top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ==========================================================================
   サービスページ（service/index.html）
   ページ固有のスタイルは body.page-service の配下に書く。色・書体・余白は既存の
   カスタムプロパティだけを使い、新しい値は足さない
   ========================================================================== */

/* ヘッダーはページ最上部の映像に重ねる（トップと同じ）ため、本文の上余白は持たない */
body.page-service,
body.has-page-hero {
  padding-top: 0;
}

/* 縦書きの英語タグ（.section-tag）は position:absolute のため、各セクションを基準にする。
   基準が無いとページ最上部（ヒーロー右上）に全部重なってしまう。
   また、固定のヒーロー映像が、位置指定のない後続セクション（お問い合わせのフォームなど）より
   手前に描かれて隠してしまうため、全セクションを位置指定（relative）にして重なり順を整える */
.page-service .section,
.has-page-hero .section {
  position: relative;
}

/* ---- コンテンツの柱 ----
   1024px以上は、左端をページ内ナビの右（194px）、右端をCONTACTリンクの左端に揃える
   （トップの制作フロー・実績・よくあるご質問と同じ範囲。JS：initServiceLayoutが
   --col-left / --col-w を実測して渡す）。768〜1023pxは左のレール線（44px）を避けるだけ */
@media (min-width: 768px) {
  .page-service .section > .container {
    padding-left: calc(44px + var(--gutter));
  }
}

@media (min-width: 1024px) {
  .page-service .section > .container {
    max-width: none;
    margin-inline: 0;
    margin-left: var(--col-left, 194px);
    width: var(--col-w, calc(100% - 194px - 140px));
    padding-inline: 0;
  }
}

/* トップ用の「#faq > .container」（レール線基準で全幅に広げて中央寄せ）より詳細度を上げ、
   よくあるご質問もほかのセクションと同じ柱に収める */
@media (min-width: 768px) {
  .page-service #faq > .container {
    width: auto;
    max-width: var(--container-w);
    margin-inline: auto;
  }

  .page-service #faq > .container > * {
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .page-service #faq > .container {
    max-width: none;
    margin-inline: 0;
    margin-left: var(--col-left, 194px);
    width: var(--col-w, calc(100% - 194px - 140px));
  }
}

/* ---- ページヘッダー ---- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 72vh;
  min-height: 72svh;
  padding-top: 140px;
  padding-bottom: calc(var(--section-gap) * 0.6);
  overflow: hidden;
}

/* ヘッダー映像の上のコンテナは幅いっぱいに使う（サービス・実績ページの1024px以上は、柱の幅が優先） */
.page-hero > .container {
  width: 100%;
}

/* ヘッダー映像は画面に固定し、背景を透過したエリア（お見積もりについて）からも見えるようにする。
   通常のエリアは背景が不透明なので、映像はヘッダー部分とそのエリアだけに見える */
.page-hero__media {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
}

.page-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 映像全体を少し暗くして文字を読みやすくする */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 4, 0.5);
}

/* ヘッダー部分の下端は、次のセクションの黒へ自然につなぐ */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

/* SERVICE（h1）の上に、少し小さく「サービス」を添える */
.page-hero__eyebrow {
  display: block;
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
}

.page-hero__lead {
  max-width: none;
  margin-top: 1.2em;
  font-size: var(--fs-base);
}

/* ---- 提供範囲（枠・ホバーはトップの実績ZEILYと同じ .work-features/.work-feature を流用） ----
   1024px以上は4つを左から1行に並べ、ほかのコンテンツと同じ柱の幅いっぱいに使う。
   見出しは中央、説明文だけ左寄せ */
.scope-cards {
  display: grid;
}

.scope-card {
  text-align: center;
}

/* 4つの枠は、初期は先頭（企画）の位置に重なり、画面に30%表示されたら本来の位置へ
   右（幅が狭いときは下）へ広がる（initScopeCardsFan。--fan-x/--fan-yをJSが渡し、
   表示されたら0へ戻す）。重なっている間は下の枠の文字が透けないよう背景を塗り、
   先頭が一番手前になるよう重ねる */
.scope-card {
  background: var(--color-bg);
  transform: translate3d(var(--fan-x, 0px), var(--fan-y, 0px), 0);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scope-card:nth-child(1) { z-index: 4; }
.scope-card:nth-child(2) { z-index: 3; }
.scope-card:nth-child(3) { z-index: 2; }
.scope-card:nth-child(4) { z-index: 1; }

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

/* 枠の上余白（見出しの上）は、トップの実績カード（ZEILY）より小さくし、下余白と同じにする */
.page-service .scope-cards .scope-card {
  padding-top: calc(1.5em - 4px);
}

.scope-card h3 {
  margin-bottom: 0.8em;
  font-size: calc(var(--fs-lg) * 0.9);
}

.scope-card__thumb {
  background: var(--color-bg);
}

.scope-card p {
  max-width: none;
  margin-top: 1em;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .scope-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .scope-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 注記の下の余白（セクション下端まで）は通常の半分にする */
.page-service #scope {
  padding-bottom: calc(var(--section-gap) / 2);
}

/* 注記の下の余白（セクション下端まで）は通常の半分にする */
.page-service #scope {
  padding-bottom: calc(var(--section-gap) / 2);
}

.scope-note {
  max-width: none;
  margin-top: 2.4em;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--color-text);
}

/* ---- 成果物ブロック（企画／ウェブ制作／映像制作／運用・保守で共通） ---- */
.offer-block {
  border-top: 1px solid var(--color-line);
}

/* 線で区切られたエリア（サービスページの企画・ウェブ制作・映像制作・運用・保守、aboutページの体制・代表・会社概要）に、
   それぞれ背景写真を敷く。
   写真は疑似要素（::before）に置き、セクションより上下に--px-range分だけ大きくして、
   JS（initServiceParallax）が見える範囲の中でエリアごとに違う量・向きで動かす（パララックス）。
   写真の上には、白文字が読めるようサイトの黒パネルより濃い黒（88%）を重ねる。
   isolationで独立した重なり順を作り、::beforeを背景より上・本文より下に置く */
#plan,
#web,
#film,
#operation,
#projects,
#people,
#company {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
}

#plan::before,
#web::before,
#film::before,
#operation::before,
#projects::before,
#people::before,
#company::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--px-range, 0px) * -1);
  bottom: calc(var(--px-range, 0px) * -1);
  z-index: -1;
  background: linear-gradient(rgba(4, 5, 4, 0.88), rgba(4, 5, 4, 0.88)), var(--bg-url) center / cover no-repeat;
  transform: translate3d(0, var(--px-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

#plan { --bg-url: url("img/bg_01.webp"); }
#web { --bg-url: url("img/bg_02.webp"); }
#film { --bg-url: url("img/bg_03.webp"); }
#operation { --bg-url: url("img/bg_04.webp"); }
/* 実績ページ（#projects：LOGACY・ZEILY・社員密着のパネル）：ウェブ制作（#web）と同じ背景写真（bg_02）。黒の重ねは、下で少し強める。
   見出しの固定表示（sticky）が効くよう、はみ出しは hidden ではなく clip で隠す */
#projects {
  --bg-url: url("img/bg_02.webp");
  overflow: clip;
}

/* 実績ページは、ウェブ制作より少しだけ黒を強める（88%→93%） */
#projects::before {
  background: linear-gradient(rgba(4, 5, 4, 0.93), rgba(4, 5, 4, 0.93)), var(--bg-url) center / cover no-repeat;
}
/* aboutページ：体制と代表（#people）は1枚の bg_05、会社概要は bg_06（サービスページの企画・ウェブ制作などと同じ作り） */
#people { --bg-url: url("img/bg_05.webp"); }
#company { --bg-url: url("img/bg_06.webp"); }

/* 体制と代表は、1つの背景（#people）を共有する。中のセクションは背景なしにして、背景を見せる */
#people > .section {
  background: transparent;
}

.offer-block__head {
  margin-bottom: calc(var(--section-gap) * 0.4);
}

/* 「企画」（ヒーローのSERVICEと同じ大きさ）の右に、キャッチを1行で置く。
   幅が足りないときだけキャッチが下へ折り返す */
.offer-block__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 1em;
  font-size: calc(var(--fs-xl) * 0.8);
}

/* 見出し（企画＋キャッチ）は、画面の下から30%の位置に来たら左から右へマスクで現れる
   （initOfferTitleReveal）。JSが無効・動きを減らす設定のときは隠さない（JSが.is-armedを
   付けたときだけ隠す） */
.offer-block__title.is-armed {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s ease;
}

.offer-block__title.is-armed.is-revealed {
  clip-path: inset(0 0 0 0);
}

.offer-block__name {
  font-size: var(--fs-3xl);
}

/* キャッチの箱は最長のもの（企画の29字）に幅を揃え、4つとも同じ画面幅で
   「名称の右」から「名称の下」へ折り返す（短いキャッチだけ右に残らない） */
.offer-block__catch {
  min-width: 29em;
}

@media (min-width: 768px) {
  .offer-block__name {
    font-size: var(--fs-4xl);
  }
}

@media (min-width: 1280px) {
  .offer-block__title {
    font-size: calc(var(--fs-2xl) * 0.8);
  }
}

.offer-block__head p {
  max-width: none;
  margin-top: 1.4em;
}

/* 「つくるもの」「作業項目」などの小見出し。右へ細い線を引いて区切る */
.offer-block__label {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 3em 0 1.2em;
  font-size: var(--fs-base);
}

.offer-block__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* つくるもの：名称＋1行説明のカード。価格は書かない */
.deliverable-list {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .deliverable-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px以上は3列 */
@media (min-width: 1024px) {
  .deliverable-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.deliverable {
  padding: 1.2em 1.4em;
  border: 1px solid var(--color-line);
}

.deliverable dt {
  font-weight: 700;
}

.deliverable dd {
  margin: 0.3em 0 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* 成果物カードの画像（16:9）。説明文の下に、カード幅いっぱいで置く */
.deliverable__media {
  margin-top: 1em;
  background: var(--color-bg);
}

/* 画像ファイルがまだ無いカード（initDeliverableMedia）は、画像の枠ごと隠す */
.deliverable__media.is-missing {
  display: none;
}

/* 作業項目チップ。1行に収めようとせず、折り返して並べる（文字は縮めない） */
.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.chip {
  padding: 0.3em 0.9em;
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* 含まれるもの｜追加のお見積もり｜対象外：列どうしに対応関係は無いため、
   見出し付きの3つのリストを並べる。モバイルは見出しを残したまま縦に積む */
.scope-table {
  display: grid;
  gap: 2em;
  margin-top: 3em;
}

@media (min-width: 768px) {
  .scope-table {
    grid-template-columns: 2fr 1fr;
    gap: 12px;
  }

}

.scope-table__col {
  padding: 1.4em 1.4em 1.6em;
  border: 1px solid var(--color-line);
}

.scope-table__col h3 {
  margin-bottom: 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-base);
}

.scope-table__col li {
  padding-block: 0.25em;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.scope-table__col li::before {
  content: "・";
}

/* エリアの一番下の「よくあるご質問」：作業項目などと同じ枠・見出しで、詳しい解説ページへのリンクを並べる */
.scope-table + .scope-table__col {
  margin-top: 12px;
}

.scope-table + .scope-table__col li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--fs-base);
}

/* 「・」の代わりに▶（CSSの三角形） */
.scope-table + .scope-table__col li::before {
  content: "";
  position: absolute;
  top: 1em;
  left: 0.2em;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--color-muted);
}

/* 通常は下線なし。マウスオーバーで、下線が左から右へ引かれる（折り返しても行ごとに引かれる） */
.scope-table + .scope-table__col li a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: background-size 0.3s ease, color var(--duration) ease;
  cursor: pointer;
}

.scope-table + .scope-table__col li a:hover,
.scope-table + .scope-table__col li a:focus-visible {
  color: var(--color-text);
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .scope-table + .scope-table__col li a {
    transition: none;
  }
}

/* ---- 画像のライトボックス（initImageLightbox）。data-lightbox を付けた画像の枠をクリックで、画像を拡大表示 ---- */
[data-lightbox] {
  cursor: zoom-in;
}

.img-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(4, 5, 4, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
}

.img-modal[hidden] {
  display: none;
}

.img-modal.is-open {
  opacity: 1;
}

/* 画像・閉じる・左右の矢印を1つのまとまり（stage）にして、画面の中央に置く。
   画像の枠そのもの（max-width／max-height）で大きさを決める */
.img-modal__stage {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.img-modal__figure {
  position: relative;
  cursor: default;
}

.img-modal__img {
  display: block;
  max-width: 66.6vw;
  max-height: 63vh;
  width: auto;
  height: auto;
  min-width: min(43vw, 100%);
  object-fit: contain;
}

/* 左右の矢印：画像の左右のすぐ外 */
.img-modal__nav {
  flex: none;
  padding: 0.1em 0.3em;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.img-modal__nav:hover,
.img-modal__nav:focus-visible {
  opacity: 1;
}

.img-modal__nav[hidden] {
  display: none;
}

/* 閉じる：画像の右上のすぐ外（上） */
.img-modal__close {
  position: absolute;
  right: 0;
  bottom: 100%;
  padding: 0.1em 0.2em;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

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

/* ---- よくあるご質問のライトボックス（initFaqLightbox）。幅は画面の60%。中はFAQページ（?embed=1） ---- */
.faq-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 4, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.faq-modal[hidden] {
  display: none;
}

.faq-modal.is-open {
  opacity: 1;
}

.faq-modal__panel {
  position: relative;
  width: 92vw;
  height: 88vh;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .faq-modal__panel {
    width: 60vw;
  }
}

.faq-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-bg);
}

.faq-modal__close {
  position: absolute;
  top: 0.5em;
  right: 1.2em;
  z-index: 1;
  padding: 0.2em 0.5em;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

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

/* ライトボックスの中のFAQページ（html.is-embed）：ヘッダー・サイドレール・フッター・お問い合わせ帯・パンくず・関連するご質問を隠し、本文だけにする */
.is-embed .skip-link,
.is-embed .site-header,
.is-embed .side-rail,
.is-embed .site-footer,
.is-embed #contact,
.is-embed #related,
.is-embed #hero .container > p:first-child {
  display: none;
}

.is-embed #hero {
  padding-top: 4rem;
  padding-bottom: 1rem;
}

.is-embed .section.u-pt-0 {
  padding-bottom: 3rem;
}

.is-embed main .container {
  max-width: none;
  padding-inline: 3rem;
}

.is-embed h1 {
  font-size: var(--fs-2xl);
}

.is-embed main p {
  max-width: none;
}

/* サービスページ：「対応サービス」「制作物」のサムネイルは、1行（3列）ごとに、左から右へのマスクで
   3列いっぺんに現れる（0.4秒）（initDeliverableReveal。JSが動いたときだけ隠す）。次の行も同じ */
.offer-block .deliverable__media.is-armed {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s ease;
}

.offer-block .deliverable__media.is-armed.is-revealed {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .offer-block .deliverable__media.is-armed {
    transition: none;
  }
}

/* 左の列（作業項目）は、折り返して並ぶチップ。右の列の「・」付きリストの装飾は付けない */
.scope-table__col .task-chips li {
  padding: 0.3em 0.9em;
}

.scope-table__col .task-chips li::before {
  content: none;
}

/* ---- 制作の進め方 ----
   工程どうしは▶でつなぎ、枠の縦の中央に置く。枠の中の文字（工程名・説明・期間）は中央揃え。
   枠線は、スクロールに合わせて青い線が一周描かれ（initFlowStepsDraw）、描き終わるとその次の▶が青くなる */
.flow-steps {
  display: grid;
  gap: 12px;
}

.flow-steps__item {
  display: grid;
}

.flow-steps__box {
  position: relative;
  padding: 1.2em 1.4em;
  border: 1px solid var(--color-line);
  text-align: center;
}

.flow-steps__title {
  font-size: var(--fs-base);
  transition: color var(--duration) ease;
}

/* スクロールに合わせて描かれる青い枠線（JSがSVGを重ねる）と、描き始めたら青くなる工程名・矢印 */
.flow-steps__stroke {
  position: absolute;
  top: -1px;
  left: -1px;
  overflow: visible;
  pointer-events: none;
}

.flow-steps__stroke rect {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
}

.flow-steps__box.is-lit .flow-steps__title {
  color: var(--color-accent);
}

.flow-steps__text {
  text-align: left;
  max-width: none;
  margin-top: 0.3em;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.flow-steps__term {
  max-width: none;
  margin-top: 0.6em;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* デスクトップは工程を横一列に。番号は枠の上の中央 */
@media (min-width: 768px) {
  .flow-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }

  .flow-steps__item {
    align-items: stretch;
  }

  /* ▶は枠と枠の間（隙間24px）の中央、枠の縦の中央（CSSの三角形。絵文字になる環境差を避ける） */
  .flow-steps__item + .flow-steps__item .flow-steps__box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--color-muted);
    transition: border-left-color var(--duration) ease;
  }

  .flow-steps__item + .flow-steps__item .flow-steps__box.is-arrow-lit::before {
    border-left-color: var(--color-accent);
  }
}

/* お見積もりの「お問い合わせ後の流れ」は、4列のうち、ヒアリングと概算のご提示を1つの枠（2列ぶん）に
   まとめる。枠のデザイン・▶は制作の進め方と同じ（番号なし）。2つの見出しの間に「＋」 */
@media (min-width: 768px) {
  .flow-steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .flow-steps__item--wide {
    grid-column: span 2;
  }
}

.flow-steps__box--pair {
  display: grid;
  gap: 0.6em 1em;
  align-items: start;
}

@media (min-width: 768px) {
  .flow-steps__box--pair {
    grid-template-columns: 1fr auto 1fr;
  }
}

.flow-steps__plus {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-heading);
  text-align: center;
}

/* 768〜1023pxは柱が狭いため、工程の余白を詰めて5つを横一列に収める（隙間16px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .flow-steps {
    gap: 16px;
  }

  .flow-steps__box {
    padding: 0.9em 0.6em;
  }

  .flow-steps__item + .flow-steps__item .flow-steps__box::before {
    left: -13px;
  }
}

.flow-request__list {
  display: grid;
  gap: 0.4em;
}

.flow-request__list li::before {
  content: "・";
}

.flow-request__note {
  max-width: none;
  margin-top: 1.4em;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* ---- お見積もりについて ---- */
.estimate__lower {
  max-width: none;
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* 費用が決まる要素：ウェブ制作／映像制作／共通の3つに分けて並べる（モバイルは縦積み） */
.estimate__factor-cols {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .estimate__factor-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.estimate__factor-col {
  padding: 1.4em 1.4em 1.6em;
  border: 1px solid var(--est-line);
}

.estimate__factor-col h4 {
  margin-bottom: 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--est-line);
  font-size: var(--fs-base);
}

.estimate__factor-col li {
  padding-block: 0.25em;
  font-size: var(--fs-sm);
}

.estimate__factor-col li::before {
  content: "・";
}

.estimate__note {
  max-width: none;
  margin-top: 1em;
  font-size: var(--fs-sm);
  opacity: 0.75;
}

.estimate .offer-block__label::after {
  background: var(--est-line);
}

/* お見積もりについて：背景は#1c212f・白文字。枠線・薄い文字は現在の文字色を基準にする。
   お問い合わせボタンは「よくあるご質問をすべて見る」と同じ枠線白・塗りなし（.btn--outline） */
.estimate {
  --est-line: color-mix(in srgb, currentColor 25%, transparent);
}

/* お見積もりについて：背景色はなし（ヘッダーの固定映像が見える）。映像を隠している黒い幕（::before）が
   右から左へ外れ、中身も同じ向きのマスクで現れる（initAreaReveal。JSが動いたときだけ中身を隠す） */
.estimate-area {
  background: transparent;
  isolation: isolate;
}

.estimate-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s ease;
}

.estimate-area.is-revealed::before {
  clip-path: inset(0 100% 0 0);
}

.estimate-area.is-armed > .container {
  clip-path: inset(0 -100vw 0 100%);
  transition: clip-path 0.9s ease;
}

.estimate-area.is-armed.is-revealed > .container {
  clip-path: inset(0 -100vw 0 -100vw);
}

/* 制作の進め方：エリア全体が上から下へのマスクで現れる（initAreaReveal） */
#flow.is-armed {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s ease;
}

#flow.is-armed.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* よくあるご質問・制作のご相談は、背景を透過したままだと固定映像が透けるため、
   不透明な黒を下地にする（それぞれの表示のしかたはトップと同じ。isolationで、マスクの::beforeを
   この下地より上に置く） */
/* 企画・ウェブ制作・映像制作・運用・保守・お見積もりについて・よくあるご質問は、エリアの上下の余白を
   20%減らす（制作のご相談は通常のまま） */
.page-service .offer-block,
.page-service #estimate,
.page-service #faq {
  padding-block: calc(var(--section-gap) * 0.8);
}

/* サービス内容：背景なし（ヘッダーの固定映像が見える） */
#scope {
  background: transparent;
}

.page-service #faq,
.page-service .home-cta {
  background: var(--color-bg);
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .estimate-area::before,
  .estimate-area.is-armed > .container,
  #flow.is-armed {
    transition: none;
  }
}

/* エリアの下に、センタリングしたお問い合わせボタン */
.estimate__cta {
  margin-top: 3em;
  text-align: center;
}

/* ==========================================================================
   実績ページ（works/index.html）
   body.page-works は body.page-service と併用し、ヘッダー映像・コンテンツの柱・縦書きタグ・
   制作のご相談はサービスページと同じ。ここでは実績ページ固有の部品だけを足す
   ========================================================================== */

/* ---- タブ（実績の切り替え）。実績が4つになっても、タブは等分で並ぶ ---- */
/* リンクで開いたときにタブへ付く、青い枠（ブラウザ標準のフォーカス枠）は出さない。
   キーボードで選んだときは、下の線と文字色の変化（:focus-visible）で分かる */
.works-tab:focus,
.works-tab:focus-visible {
  outline: none;
}

/* リンクで開いたとき（#tab-logacy など）に、タブが上のヘッダーの黒背景に隠れないよう、上に余白を残して止める */
.works-tabs,
.works-tab {
  scroll-margin-top: 160px;
}

.works-tabs {
  display: flex;
  margin-bottom: calc(var(--section-gap) * 0.5);
  /* 区切りの細い線は、枠線ではなく内側の影で引く（横にスワイプできるよう、はみ出しを隠す領域でも線が切れないため） */
  box-shadow: inset 0 -1px 0 var(--color-line);
  /* 幅が足りないときは、右にはみ出した分を隠し、横にスワイプ（またはタブ右の矢印）で見せる（initWorksTabsScroll） */
  overflow-x: auto;
  scrollbar-width: none;
}

.works-tabs::-webkit-scrollbar {
  display: none;
}

/* タブ横の矢印（JSが、はみ出しがあるときだけ表示する） */
.works-tabs-wrap {
  position: relative;
}

.works-tabs__next {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 3.2rem;
  padding: 0;
  border: 0;
  background: linear-gradient(to right, rgba(4, 5, 4, 0), rgba(4, 5, 4, 0.92) 55%);
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1;
  text-align: right;
  padding-right: 0.4rem;
  cursor: pointer;
}

.works-tabs__next[hidden] {
  display: none;
}

.works-tab {
  position: relative;
  flex: 1 1 0;
  /* 幅が足りるときは等分。足りないときは、見出しの2行が収まる幅までで止め、はみ出した分は横にスワイプ */
  min-width: max-content;
  padding: 1em 1.2em;
  text-align: center;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--duration) ease;
}

.works-tab[aria-selected="true"],
.works-tab[aria-current="true"],
.works-tab:hover,
.works-tab:focus-visible {
  color: var(--color-text);
}

/* マウスオーバーで、右上メニュー（.site-nav__link）と同じ動き：文字が1文字ずつ回転し、
   タブの下の線（タブの下端）が左から右へ引かれる（外すと左へ縮んで消える）。
   選んでいるタブは、線が常に引かれたまま（白） */
/* タブの見出しの上に、概要と同じ画像（社員密着は動画）を置く。幅は、見出し1行目「映像制作サービス」（8文字ぶん）と同じ */
.works-tab__thumb {
  display: block;
  width: 8.32em;
  aspect-ratio: 1800 / 926;
  margin: 0 auto 0.7em;
}

.works-tab__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.works-tab__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* 見出しの「＆」は、サービスページのパッケージ名（.package__amp）と同じく、やや小さくする（70%） */
.works-tab__amp,
.works-amp {
  font-size: 0.7em;
}

.works-tab__label {
  position: relative;
  display: inline-block;
  perspective: 240px;
  white-space: nowrap;
  line-height: 1.5;
}

.works-tab:hover .nav-char,
.works-tab:focus-visible .nav-char {
  transform: rotateY(360deg);
}

.works-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.works-tab[aria-selected="true"]::after,
.works-tab[aria-current="true"]::after,
.works-tab:hover::after,
.works-tab:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .works-tab::after {
    transition: none;
  }
}

/* パネル末尾の切り替え：上のタブと同じ。線だけ下ではなく上に置く（<a>なので中央寄せ） */
.works-tab:is(a) {
  display: block;
  text-align: center;
}

/* 各パネルの末尾「他の事例」：見出しを、タブ（上に罫線）の左上に置く */
.works-others {
  margin-top: calc(var(--section-gap) * 0.5);
}

.works-others__title {
  margin-bottom: 0.8em;
}

.works-others .works-tabs--foot {
  margin-top: 0;
}

.works-tabs--foot {
  margin: calc(var(--section-gap) * 0.5) 0 0;
  box-shadow: inset 0 1px 0 var(--color-line);
}

.works-tabs--foot .works-tab {
  margin-bottom: 0;
}

.works-tabs--foot .works-tab::after {
  top: 0;
  bottom: auto;
}

.work-panel[hidden] {
  display: none;
}

/* ---- 1. ヘッダー（案件名・一行要約・担当範囲タグ・メイン画像） ---- */
.work-head {
  display: grid;
  gap: 2em;
  margin-bottom: calc(var(--section-gap) * 0.4);
}

@media (min-width: 1024px) {
  .work-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: calc(var(--gutter) * 1.5);
  }
}

/* 案件名は、トップの「ウェブ × 映像実績」（.works-sub-heading）と同じ大きさ。
   一行要約は、ヒーローのリード（.page-hero__lead）と同じ大きさ */
.work-head__name {
  font-size: calc(var(--fs-xl) * 0.8);
}

/* 「サービス名：」は、タグ（.chip）と同じ文字（大きさ・太さ・色） */
.work-head__prefix {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-muted);
}

/* 「LOGACYのサイトを見る」：いつもの白ボタン（.btn--primary） */
.work-head__link {
  max-width: none;
  margin-top: 1.6em;
}

.work-head__summary {
  max-width: none;
  margin-top: 1em;
  font-size: var(--fs-base);
}

.work-head .task-chips {
  margin-top: 1.4em;
}

.work-head__media {
  background: var(--color-bg);
}

/* LOGACYの概要：サービス名・要約・リンクの下に、左30%にタグ、右70%に画像（透過あり。切り取らず、背景も付けない） */
.work-overview__row {
  display: grid;
  gap: 24px;
  margin-top: 1.6em;
}

@media (min-width: 768px) {
  .work-overview__row {
    grid-template-columns: 30% minmax(0, 1fr);
    align-items: start;
  }
}

/* 「作業内容」の小見出し（タグの上）と、画像の下に中央で置く「LOGACYのサイトを見る」ボタン */
.work-overview__tags-title {
  margin-bottom: 0.8em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}

.work-overview__link {
  margin-top: 2em;
  text-align: center;
}

/* 紹介映像制作・ドキュメンタリー制作のタグが、2列で1行に収まる幅（20rem）に広げる。その分、画像は小さくなる */
@media (min-width: 1200px) {
  .work-overview__row {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
}

.work-overview__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px; /* ZEILYの画像のモックアップと同じく、角を丸く */
}

.work-overview__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 2〜7. 概要・課題・設計の考え方・制作の流れ・工夫したところ・制作物 ----
   1024px以上は、左に見出し・右に本文の2列。区切りは細い線 */
.work-block {
  display: grid;
  gap: 1em;
  padding-block: calc(var(--section-gap) * 0.4);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
  .work-block {
    grid-template-columns: 14em minmax(0, 1fr);
    gap: calc(var(--gutter) * 1.5);
  }
}

.work-block__label {
  font-size: var(--fs-base);
}

/* 実績ページの見出し「01.概要」：番号は「.」で改行して通常の3倍、見出しは2倍 */
.work-block__num,
.work-block__title {
  display: block;
  line-height: 1.2;
}

.work-block__num {
  font-size: 3em;
}

.work-block__title {
  font-size: 2em;
}

.work-block__body p {
  max-width: none;
}

/* 本文の段落どうしは、1行ぶん空ける */
.work-block__body p + p {
  margin-top: 1.2em;
}

.work-block__statement {
  margin-bottom: 0.8em;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* 制作の流れ：手順なので番号つき。モバイルは縦積みで、番号は左 */
.work-steps li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  column-gap: 0.8em;
  padding-block: 1em;
  border-bottom: 1px solid var(--color-line);
}

.work-steps li:first-child {
  padding-top: 0;
}

.work-steps__num {
  grid-row: 1 / span 2;
  font-family: "Inter Tight", sans-serif;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
}

.work-steps__title {
  font-weight: 700;
}

.work-steps__text {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .work-steps li {
    grid-template-columns: 2.4em 13em minmax(0, 1fr);
    align-items: baseline;
  }

  .work-steps__num {
    grid-row: auto;
  }
}

/* 工夫したところ：デスクトップ2列、モバイル1列。小見出し＋本文（番号なし） */
.work-points {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .work-points {
    grid-template-columns: repeat(2, 1fr);
  }
}

.work-point {
  padding: 1.4em 1.4em 1.6em;
  border: 1px solid var(--color-line);
}

.work-point h4 {
  margin-bottom: 0.6em;
  font-size: var(--fs-base);
}

.work-point p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* 実際のサイトへのリンク（別タブ）。.btn span の指定が読み上げ用の隠しテキストに効かないよう戻す */
.work-link {
  margin-top: 2em;
  text-align: center;
}

/* 外部リンクのアイコン（ボタンの文字色に合わせる） */
.btn__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  vertical-align: -0.15em;
}

.btn .visually-hidden {
  position: absolute;
}

/* ==========================================================================
   aboutページ（about/index.html）
   body.page-about は body.page-service と併用し、ヘッダー映像・コンテンツの柱・見出し・
   縦書きタグ・制作のご相談はサービスページと同じ。ここでは about 固有の部品だけを足す
   ========================================================================== */

/* 考え方：本文は1行32〜40文字で止める。挿絵は柱の幅いっぱい */
.about-intro p {
  max-width: none;
}

.about-intro p + p {
  margin-top: 1.4em;
}

/* 考え方：背景色なし（ヘッダーの固定映像が見える）。「考え方」の英語訳（PHILOSOPHY）を、
   縦書きの大きな輪郭文字にして、柱の右端に置く。装飾なので読み上げ対象外。文字の高さ（約6.5em）ぶん、
   柱の最低の高さを確保する（モバイルは非表示） */
#philosophy {
  --ph-size: clamp(72px, 6.5vw, 125px);
  background: transparent;
}

.about-intro {
  position: relative;
}

@media (min-width: 768px) {
  .about-intro {
    min-height: calc(var(--ph-size) * 6.6);
  }
}

.about-bigword {
  display: none;
}

@media (min-width: 768px) {
  .about-bigword {
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    font-family: "Inter Tight", sans-serif;
    font-size: var(--ph-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(245, 246, 246, 0.75);
    pointer-events: none;
    user-select: none;
  }

  .about-intro > :not(.about-bigword) {
    position: relative;
  }
}

/* 体制：2列（モバイルは1列）。枠・かぎ括弧はトップの実績カード（.work-feature）と同じで、
   リンクではないため、ホバーで枠が伸びる動きは無効にする */
.team-lead {
  max-width: none;
  margin-bottom: 2.4em;
}

/* 枠の「」（かぎ括弧）は付けない。余白もなくし、画像を枠いっぱいに置く */
.work-features .team-card {
  padding: 0;
}

.team-card h3 {
  margin-top: 1em;
  font-size: calc(var(--fs-xl) * 0.8);
}

.team-card p {
  margin-top: 0.6em;
  max-width: none;
  color: var(--color-muted);
}

/* メンバーの役職（タグ）。説明文の下に、折り返して並べる */
.team-card .task-chips {
  margin-top: 1.2em;
}

.work-features .team-card:hover .work-feature__corner {
  width: 22px;
  height: 22px;
}

/* 代表：デスクトップは左に写真（幅の約35%・4:5）、右に本文。モバイルは写真が上 */
.leader {
  display: grid;
  gap: 2em;
}

@media (min-width: 768px) {
  .leader {
    /* 左に写真、右に本文（スマホでは写真が上、本文が下） */
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: calc(var(--gutter) * 1.5);
    align-items: start;
  }
}

/* 写真は、列の幅の70%（以前より30%小さく）。比率は4:5のまま */
.leader__photo {
  width: 70%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg);
}

.leader__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader__name {
  max-width: none;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.leader__role {
  display: block;
  margin-bottom: 0.3em;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-muted);
}

.leader__body p {
  max-width: none;
}

/* 会社概要：項目名と内容を横並び（項目名の幅をそろえる）。モバイルは縦に積む */
.company-list {
  border-top: 1px solid rgba(245, 246, 246, 0.25);
}

.company-list__row {
  display: grid;
  gap: 0.3em;
  padding-block: 1.1em;
  border-bottom: 1px solid rgba(245, 246, 246, 0.25);
}

@media (min-width: 768px) {
  .company-list__row {
    grid-template-columns: 13em minmax(0, 1fr);
    gap: 1.5em;
  }
}

.company-list dt {
  font-weight: 700;
}

.company-list dd {
  margin: 0;
}

.company-note {
  max-width: none;
  margin-top: 1.6em;
  font-size: var(--fs-sm);
}

/* ==========================================================================
   お問い合わせページ（contact/index.html）
   body.page-contact は body.page-service と併用し、ヒーロー映像・コンテンツの柱の幅は
   他のページ（実績・アバウトなど）と同じ。フォームは、柱の幅の白いパネルに黒文字で組む
   ========================================================================== */
.contact-form {
  padding: 5em 2.5em 2.8em;
}

/* フォームの白い背景は透過させる（背後のヒーロー映像が少し見える程度。黒い文字が読める濃さ） */
.contact-form.u-invert {
  background: rgba(245, 246, 246, 0.9);
}

/* フォームの下（セクション）の黒背景は付けず、固定表示のヒーロー映像が、フォームの透過部分・周りに見えるようにする */
.page-contact .section.u-pt-0 {
  background: transparent;
}

/* 項目名（文言）は、各項目のフォーム（入力欄）の上に、左揃えで置く。文言とフォームは、パネル全体の
   50%（左右25%ずつ空ける）。文字の大きさは実績ページの「概要」（.work-block__label）と同じで太字。
   「必須」は黒地に白文字 */
@media (min-width: 768px) {
  .contact-form {
    padding-inline: 25%;
  }
}

.contact-form .form-label {
  display: block;
  margin-bottom: 0.6em;
}

.contact-form .form-label {
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .contact-form {
    padding: 3.2em 1.2em 2em;
  }
}

/* 入力中（フォーカス）の欄：青い線を内側へ3px太くして、黒い枠線が見えなくなる位置まで重ねる */
.contact-form .form-input:focus-visible,
.contact-form .form-select:focus-visible,
.contact-form .form-textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

/* 白いパネルの上の入力欄：白地・黒文字・グレーの枠 */
.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  background: var(--color-invert);
  color: var(--color-bg);
  border-color: rgba(4, 5, 4, 0.45);
}

.contact-form .form-required {
  margin-left: 0.7em;
  padding: 0.15em 0.6em;
  background: var(--color-bg);
  color: var(--color-invert);
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: middle;
}

/* エラー文言は濃いめの赤 */
.contact-form .form-error {
  color: #b3171e;
  font-weight: 500;
}

.contact-form .form-field.has-error .form-input,
.contact-form .form-field.has-error .form-select,
.contact-form .form-field.has-error .form-textarea {
  border-color: var(--color-bg);
}

.contact-form input[type="radio"],
.contact-form input[type="checkbox"] {
  accent-color: var(--color-bg);
}

/* 上限予算：総額／月額のラジオの下に、金額の選択 */
.budget-field__type {
  margin-bottom: 0.8em;
}

/* 送信ボタンは中央（白いパネルの上なので、黒背景ボタン） */
.form-actions {
  margin-top: 2.4em;
  text-align: center;
}

/* 送信ボタンの幅は、hCaptchaの枠（302px）と同じ */
.form-actions .btn {
  width: min(302px, 100%);
}

/* hCaptchaの上：個人情報保護方針への案内（センタリング。本文よりやや薄い黒） */
.contact-form .form-privacy-note {
  max-width: none;
  margin-top: 2em;
  font-size: var(--fs-sm);
  text-align: center;
  color: rgba(4, 5, 4, 0.6);
}

.contact-form .form-privacy-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.form-actions .form-privacy-note {
  margin-top: 1em;
}

.contact-form .form-privacy-note + .form-captcha {
  margin-top: 0.8em;
}

/* 送信（Web3Forms）：hCaptchaの枠、送信エラー、送信完了 */
.form-captcha {
  display: flex;
  justify-content: center;
  margin-top: 1.6em;
}

.contact-form .form-submit-error {
  max-width: none;
  margin-top: 1.2em;
  color: #b3171e;
  font-weight: 500;
  text-align: center;
}

.contact-form .form-submit-error[hidden] {
  display: none;
}

.form-complete {
  padding-block: 2em;
  text-align: center;
}

.form-complete p {
  max-width: none;
  margin-inline: auto;
}

.form-complete__title {
  margin-bottom: 0.8em;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* 会社概要：所在地のGoogleマップ。モノクロにして落ち着いた色にし、所在地（地図の中央）には
   黒いピンを重ねる（ピンは地図の操作を邪魔しない） */
.company-map-wrap {
  position: relative;
  margin-top: 1em;
}

.company-map {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  filter: grayscale(1) contrast(0.95) brightness(1.03);
}

.company-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 48px;
  transform: translate(-50%, -100%);
  fill: var(--color-bg);
  filter: drop-shadow(0 2px 3px rgba(4, 5, 4, 0.4));
  pointer-events: none;
}

.company-map-pin circle {
  fill: var(--color-text);
}

/* 考え方の最後の画像：画面幅の100%（左右いっぱい）。次のエリア（体制）と隙間なく続ける */
#philosophy {
  padding-bottom: 0;
}

/* 画像の上の余白をなくして上へ引き上げ、縦書きの「PHILOSOPHY」の末尾の「HY」あたりに重ねる。
   縦書きの文字（.about-bigword）は、画像より手前に出す（画像が下） */
.about-wide {
  position: relative;
  z-index: 1;
  display: block;
  width: 100vw;
  height: auto;
  margin-top: calc(var(--ph-size) * -1.3);
}

@media (max-width: 767px) {
  .about-wide {
    margin-top: 3em;
  }
}

/* 縦書きの大きな「PHILOSOPHY」：1文字ずつ、輪郭線が現れる（initAboutBigword）。
   JSが分解した文字だけ、最初は輪郭線を透明にしておく */
.about-bigword__char {
  -webkit-text-stroke-color: rgba(245, 246, 246, 0);
}

.about-bigword__char.is-drawn {
  -webkit-text-stroke-color: rgba(245, 246, 246, 0.75);
}

/* aboutページの画像のマスク表示（initAboutReveals。JSが動いたときだけ隠す） */
.about-wide.is-armed {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s ease;
}

.team-card .media-16-9.is-armed {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s ease;
}

.about-wide.is-armed.is-revealed,
.team-card .media-16-9.is-armed.is-revealed {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .about-wide.is-armed,
  .team-card .media-16-9.is-armed {
    transition: none;
  }
}

/* ==========================================================================
   利用規約・個人情報保護方針（terms / privacy）
   本文の柱は、お問い合わせの白背景と同じ範囲（左端194px〜右端はCONTACTリンクの左端。
   .page-service の柱をそのまま使う）。見出しは本文と同じ大きさで太字
   ========================================================================== */
.page-terms main p,
.page-privacy main p {
  max-width: none;
}

.page-terms main :is(h2, h3, h4),
.page-privacy main :is(h2, h3, h4) {
  margin-bottom: 0.8em;
  font-size: var(--fs-base);
  font-weight: 700;
}

/* 2つ目以降の見出し（セクション）の上マージンは、通常の1/3 */
.page-terms .work-detail__section + .work-detail__section,
.page-privacy .work-detail__section + .work-detail__section {
  margin-top: calc(var(--section-gap) / 3);
}

/* ==========================================================================
   実績ページ：概要・課題・設計の考え方・制作の流れ・工夫したところ
   右側に画像を置き、スクロールで画像だけがゆっくりずれて動き、次のコンテンツの手前でフェードアウトする
   （initWorksAside）。本文には図（.work-diagram）を入れ、制作の流れは「制作の進め方」と同じ
   ボックス＋▼で縦に流す。制作物（data-block="items"）は従来のまま
   ========================================================================== */
.work-block__aside {
  margin-top: 1.4em;
}

.work-block__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

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

@media (min-width: 1024px) {
  .work-block--aside {
    grid-template-columns: 11.9rem minmax(0, 1fr) minmax(0, 24%);
    align-items: start;
  }

  /* 見出し（01.概要 など）は、ヘッダーの黒背景に重なりそうなとき（上から200px）で固定。
     ブロックの終わりで、次の見出し（02.課題）と入れ替わるように上へ消える */
  .work-block--aside .work-block__label {
    position: sticky;
    top: 200px;
    align-self: start;
  }

  /* 右の画像が無いブロック（01.概要）：本文を右端まで伸ばす */
  .work-block--aside.work-block--wide {
    grid-template-columns: 11.9rem minmax(0, 1fr);
  }

  .work-block--aside .work-block__aside {
    align-self: stretch;
    margin-top: 0;
  }

  .work-block__media {
    will-change: transform, opacity, filter;
  }
}

/* 課題：画像を右に浮かせ、1段落目（2行）の下から置く。3行目以降の文章は、画像の左に回り込む */
.work-issue__media {
  margin: 1em 0;
}

.work-issue__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  [data-block="issue"] .work-block__body {
    display: flow-root;
  }

  .work-issue__media {
    float: right;
    width: 34%;
    margin: 0.4em 0 1em 2em;
  }
}

/* ---- 納品物と活用シーン（01.）：見出しの下に画像・動画。1行目は3列、2行目は2列 ---- */
.work-deliv {
  display: grid;
  gap: 24px;
  margin-top: 2em;
  list-style: none;
}

.work-deliv + .work-deliv {
  margin-top: 36px;
}

/* 活用シーン：小見出しの下に、考えられる活用シーンをタグで並べる */
.work-deliv__scene-title {
  margin: 1.2em 0 0.6em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}

.work-deliv__item > .work-deliv__scene:only-child .work-deliv__scene-title {
  margin-top: 0.4em;
}

.work-deliv__title {
  margin-bottom: 0.6em;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* 企画設計の2つのサムネイルの見出しは、課題の図だった「手法の価値を知ってもらう」と同じ大きさ（本文と同じ16px） */
/* 図と、下のサムネイルとの間：通常（2em）の3倍 */
.work-block[data-block="design"] .work-diagram + .work-deliv {
  margin-top: 6em;
}

.work-block[data-block="design"] .work-deliv__title {
  font-size: var(--fs-base);
}

@media (min-width: 768px) {
  .work-deliv--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-deliv--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 図（枠の色・青い見出し・細い矢印は、サービスの「企画→ウェブ制作⇄映像制作」の図に合わせる） ---- */
.work-diagram {
  display: grid;
  gap: 18px;
  margin-top: 2em;
}

.work-diagram__node {
  padding: 1.6em 1.2em;
  border: 1px solid var(--color-line);
  text-align: center;
}

.work-diagram__title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-accent);
}

.work-diagram__title--white {
  color: var(--color-text);
}

.work-diagram__text {
  display: block;
  margin-top: 0.6em;
  font-size: var(--fs-base);
  color: var(--color-muted);
}

.work-diagram__caption {
  max-width: none;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--color-muted);
}

.work-diagram__col {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.work-diagram__row {
  display: grid;
  gap: 18px;
}

.work-diagram__plus {
  font-size: var(--fs-lg);
  text-align: center;
  color: var(--color-muted);
}

.work-diagram__arrow,
.work-diagram__swap {
  justify-self: center;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .work-diagram__swap {
    transform: rotate(90deg);
  }
}

@media (min-width: 768px) {
  .work-diagram__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .work-diagram__row--pair .work-diagram__title {
    font-size: var(--fs-base);
  }

  /* 課題の図：上に小さな言葉（サービスを売る前に など）、下に太字の見出し。2行の間は通常の3分の1 */
  .work-diagram__row--pair .work-diagram__text {
    margin-top: 0;
    margin-bottom: 0.2em;
  }

  /* 企画設計の図（映像／数字と手法 → 品質の判断／価値の理解）：枠をなくし、各列に上から言葉・見出し・↓・見出しを並べる */
  .work-diagram__row--plain .work-diagram__node {
    padding: 0;
    border: 0;
  }

  /* 見出しは、下のサムネイルの見出し（密着サービスのくわしい紹介）と同じ16px。上の段（映像／数字と手法）は白、下の段（品質の判断／価値の理解）は青 */
  .work-diagram__row--plain .work-diagram__title {
    font-size: var(--fs-base);
  }

  .work-diagram__row--plain .work-diagram__col > .work-diagram__node:first-child .work-diagram__title {
    color: var(--color-text);
  }

  /* 2つの枠のあいだに「×」を置く（枠は、元の幅の80%まで狭め、×に寄せる） */
  .work-diagram__row--2.work-diagram__row--plain {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* 各列（言葉・見出し・↓・見出し）を、薄い白の枠で囲む */
  .work-diagram__row--plain .work-diagram__col {
    width: 80%;
    padding: 1.6em 1.2em;
    border: 1px solid rgba(245, 246, 246, 0.3);
  }

  .work-diagram__row--plain .work-diagram__col:first-child {
    justify-self: end;
  }

  .work-diagram__row--plain .work-diagram__col:last-child {
    justify-self: start;
  }

  .work-diagram__row--plain .work-diagram__text {
    margin-top: 0;
    margin-bottom: 0.2em;
  }

  .work-diagram__row--pair {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

/* 5つのボックス（EPXの担当）：枠の幅は固定せず、中の文字の長さに合わせる。1320px以上は5つを1行に並べ
   （右端が切れないよう、行の幅に合わせて文字を縮める。最大は本文と同じ16px。1320pxなら約12px）、それ未満は折り返す */
.work-diagram__row--5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  container-type: inline-size;
}

@media (min-width: 1320px) {
  .work-diagram__row--5 {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .work-diagram__row--5 .work-diagram__node {
    flex: 0 0 auto;
    padding-inline: 0.8em;
  }

  .work-diagram__row--5 .work-diagram__title {
    font-size: min(var(--fs-base), calc((100cqw - 80px) / 49));
    white-space: nowrap;
  }
}

.work-block__body .work-points {
  margin-top: 2em;
}

/* ---- 制作の流れ：ボックス＋▼で縦に（制作の進め方と同じ枠・青い枠線の描画） ---- */
.flow-steps.flow-steps--vertical {
  grid-template-columns: 1fr;
  gap: 28px;
}

.flow-steps--vertical .flow-steps__text {
  text-align: center;
}

.flow-steps--vertical .flow-steps__item + .flow-steps__item .flow-steps__box::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 6px 0 6px;
  border-color: var(--color-muted) transparent transparent transparent;
  transition: border-top-color var(--duration) ease;
}

.flow-steps--vertical .flow-steps__item + .flow-steps__item .flow-steps__box.is-arrow-lit::before {
  border-color: var(--color-accent) transparent transparent transparent;
}

/* ==========================================================================
   サービスページ：ウェブ × 映像 パッケージ（#packages）
   パッケージの内容はリンクではないため、枠（かぎ括弧）やホバーの動きは付けない。
   3件は1段3列で並べ（1024px以上）、名称（センタリング）とご要望はボックスの外に置き、
   ボックスの中でウェブ・映像を別の枠として縦に積む
   ========================================================================== */
.section-lead {
  max-width: none;
  margin-bottom: 2.4em;
  text-align: center;
  color: var(--color-muted);
}

/* 見出し「映像 ＋ ウェブサイト」は、狭い画面でも、語の途中ではなく空白の位置で改行する */
#packages-heading {
  word-break: keep-all;
}

/* パッケージのリード：白文字 */
#packages .section-lead {
  color: var(--color-text);
}

.package-list {
  display: grid;
  gap: calc(var(--gutter) * 2);
}

/* 1件：名称（ボックスの外・一番上・センタリング）→ ご要望（ボックスの外）→ ボックス（本文・画像・ウェブ・映像） */
.package {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 1024px以上は1段3列。名称・ご要望・ボックスの高さを、3列でそろえる（subgrid） */
@media (min-width: 1024px) {
  .package-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: calc(var(--gutter) * 0.8);
    row-gap: 0;
  }

  .package {
    grid-row: 1 / span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.package__name {
  margin-bottom: 1em;
  font-size: var(--fs-lg); /* 共通の項目の見出し（.package-common__title）と同じ */
  text-align: center;
}

/* 名称の2行目「＆映像制作」は、文字の大きさを小さくする（70%） */
.package__amp {
  font-size: 0.7em;
}

.package__media {
  background: var(--color-bg);
}

/* ご要望：ボックスの外の前置き（枠なし） */
.package__who {
  margin-bottom: 1.2em;
}

.package__body {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  padding: 1.6em 1.4em 1.4em;
  border: 1px solid var(--color-line);
}

.package__col-label {
  margin-bottom: 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-base);
}

.package__who .package__col-label {
  margin-bottom: 0.6em;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* ご要望の箇条書き：先頭の「・」を吹き出しのアイコンに変える */
.package__who ul li {
  position: relative;
  padding-left: 1.7em;
}

.package__who ul li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.package__cols {
  display: grid;
  gap: 12px;
}

/* ウェブ・映像の各欄：枠と内側の余白をなくして、中身を広く使う */
.package__col {
  padding: 0;
}

.package ul li {
  padding-block: 0.25em;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.package ul li::before {
  content: "・";
}

/* ---- パッケージ共通のメリット4件：実績ページの「01.概要」と同じ構成（左に見出し＋図、右に本文、上に細い罫線）。
   図は4件それぞれ別。青い線は、ブロックのスクロールの進み具合（--pc-progress）に合わせて描かれる（initCommonDiagram） ---- */
.package-common-list {
  margin-top: calc(var(--section-gap) * 0.6);
}

/* 1件：図（左）＋見出し・本文（右）。スマホ・タブレットは1列（図が上）で、件のあいだに横線。
   1024px以上は2列×2行で、区切りは十字の線（縦線1本＋横線1本） */
.package-common {
  display: block;
  padding-block: calc(var(--section-gap) * 0.4);
  border-top: 1px solid var(--color-line);
  text-align: left;
}

.package-common__row {
  display: grid;
  gap: 1.6em;
}

.package-common__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.2em;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

/* 見出しの強調部分：青色（アクセント色） */
.package-common__em {
  font-style: normal;
  color: var(--color-accent);
}

/* 番号（1. 〜 4.）：見出しの2倍の大きさ */
.package-common__no {
  font-size: 2em;
  line-height: 1;
}

.package-common__diagram {
  width: 100%;
  max-width: 14rem;
}

.package-common__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.package-common__body {
  max-width: none;
  color: var(--color-muted);
}

/* 図の部品：薄い下地の線／青く描かれる線／頂点の点／丸（ノード）／文字 */
.pcd-line {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.pcd-draw {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--pc-progress, 0));
  filter: drop-shadow(0 0 6px var(--color-accent));
  opacity: 0;
}

.package-common.is-active .pcd-draw {
  opacity: 1;
}

.pcd-dot {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1.5;
  transition: fill var(--duration) ease, stroke var(--duration) ease;
}

.pcd-dot.is-active {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.pcd-node {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--color-accent));
  transition: stroke var(--duration) ease;
}

.pcd-node.is-active {
  stroke: var(--color-accent);
}

.pcd-text,
.pcd-center {
  fill: var(--color-muted);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: fill var(--duration) ease;
}

.pcd-text.is-active {
  fill: var(--color-accent);
}

.pcd-center {
  fill: var(--color-text);
  font-size: 22px;
}

@media (min-width: 1024px) {
  .package-common-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-common__row {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: calc(var(--gutter) * 1.2);
    align-items: start;
  }

  /* 本文は2文字ぶん左へ広げる（左の図の位置は変えない） */
  .package-common__body {
    margin-left: -2em;
  }

  .package-common {
    padding-inline: calc(var(--gutter) * 1.5);
    border-top: 0;
  }

  /* 十字：左の列に縦線、上の行に横線 */
  .package-common:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--color-line);
  }

  .package-common:nth-child(even) {
    padding-right: 0;
  }

  .package-common:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcd-dot,
  .pcd-node,
  .pcd-text {
    transition: none;
  }
}

/* 映像の項目：「・」をやめて、四角で囲んだ2列にする */
.package .package__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.package .package__chips li {
  padding: 0.55em 0.3em;
  border: 1px solid var(--color-line);
  text-align: center;
}

.package .package__chips li::before {
  content: none;
}

/* タブレット（768〜1023px）：1列のまま、ウェブと映像は2列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .package__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   スマホ（767px以下）の表示の調整
   ・トップの実績カード：タグが改行されないよう、サムネイルをタグの右ではなく、タグの上に置く
   ・フッターのメニュー・コピーライトは、途中で改行しない
   ・図（5角形・企画設計の図など）は、中央に置く
   ・画像のライトボックスは使わない（initImageLightboxも、スマホでは開かない）
   ・トップの「よくあるご質問をすべて見る」ボタンは中央に置く
   ========================================================================== */
@media (max-width: 767px) {
  .work-features .work-feature__head {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2em;
  }

  .work-features .work-feature__thumb {
    flex: 0 0 auto;
    order: -1; /* サムネイルは、サービス名・タグの上に置く */
    width: 100%;
    max-width: 100%;
    margin-right: 0 !important;
  }

  .footer-nav__list {
    flex-direction: column;
    align-items: flex-end;
  }

  .footer-nav__list a,
  .footer-bottom p {
    white-space: nowrap;
  }

  .flow-pentagon {
    margin-inline: auto;
  }

  .package-common__diagram {
    margin-inline: auto;
  }

  [data-lightbox] {
    cursor: auto;
  }

  /* トップの「よくあるご質問をすべて見る」ボタンは、中央に置く */
  #faq > .container > .btn--outline {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}