@charset "utf-8";

/* ==========================================================================
   SeventySevenOffice — Apple Web Style
   トークンとレイアウトは apple-web-style スキルに準拠
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --c-bg:           #ffffff;
  --c-bg-dark:      #000000;
  --c-surface-dark: #161617;
  --c-text:         #1d1d1f;
  --c-text-sub:     #6e6e73;
  --c-text-inv:     #f5f5f7;
  --c-text-inv-sub: #a1a1a6;
  --c-accent:       #0071e3;
  --c-accent-hover: #0077ed;
  --c-scrim:        rgba(250, 250, 252, 0.8);
  --c-hairline:     #d2d2d7;

  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro JP", "SF Pro Text",
    "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;

  --gutter: 12px;
  --container: 1024px;
  --nav-h: 44px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Motion
   fillinglife.co の動きの質を参考にした構成。
   ・背景 … 大きな光のかたまりが数十秒かけて漂う（参考サイトの2%スケールドリフト相当）
   ・入場 … opacity 0→1 ＋ translateY、0.6〜0.7s、要素ごとに少しずつ遅らせる
   JSが動いたときだけ html.js-motion が付く。JSが無い環境では全部そのまま見える。
   ========================================================================== */

/* --- 背景のドリフト ------------------------------------------------------ */
.hero,
.tile--dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero > *,
.tile--dark > * { position: relative; z-index: 1; }

.hero::before, .hero::after,
.tile--dark::before, .tile--dark::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.hero::before,
.tile--dark::before {
  top: -40%;
  left: -25%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 100%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.hero::after,
.tile--dark::after {
  bottom: -45%;
  right: -30%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 100%);
  animation: drift-b 47s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-11%, -8%, 0) scale(1); }
}

/* --- 読み込み時の入場（ヒーロー／ページ見出し） -------------------------- */
.js-motion .hero-eyebrow,
.js-motion .hero-headline,
.js-motion .hero-subhead,
.js-motion .hero-note,
.js-motion .hero .tile-ctas,
.js-motion .pagehead-title,
.js-motion .pagehead-lead {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-motion.is-loaded .hero-eyebrow,
.js-motion.is-loaded .hero-headline,
.js-motion.is-loaded .hero-subhead,
.js-motion.is-loaded .hero-note,
.js-motion.is-loaded .hero .tile-ctas,
.js-motion.is-loaded .pagehead-title,
.js-motion.is-loaded .pagehead-lead {
  opacity: 1;
  transform: none;
}
.js-motion .hero-headline,  .js-motion .pagehead-lead { transition-delay: 0.08s; }
.js-motion .hero-subhead  { transition-delay: 0.16s; }
.js-motion .hero-note     { transition-delay: 0.24s; }
.js-motion .hero .tile-ctas { transition-delay: 0.32s; }

/* --- スクロールに合わせた入場 -------------------------------------------- */
.js-motion .sections .tile,
.js-motion .work,
.js-motion .work-card,
.js-motion .stats > div,
.js-motion .principle,
.js-motion .plan,
.js-motion .steps li,
.js-motion .timeline li,
.js-motion .faq details,
.js-motion .prose > h2 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* 隠す側のセレクタと詳細度を揃える必要があるので、.is-in を個別に付ける */
.js-motion .sections .tile.is-in,
.js-motion .work.is-in,
.js-motion .work-card.is-in,
.js-motion .stats > div.is-in,
.js-motion .principle.is-in,
.js-motion .plan.is-in,
.js-motion .steps li.is-in,
.js-motion .timeline li.is-in,
.js-motion .faq details.is-in,
.js-motion .prose > h2.is-in {
  opacity: 1;
  transform: none;
}

/* --- 写真のゆるやかな拡大（画像を入れると効く） -------------------------- */
.js-motion .tile-media {
  animation: kenburns 20s ease-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .hero-eyebrow,
  .js-motion .hero-headline,
  .js-motion .hero-subhead,
  .js-motion .hero-note,
  .js-motion .hero .tile-ctas,
  .js-motion .pagehead-title,
  .js-motion .pagehead-lead,
  .js-motion .sections .tile,
  .js-motion .work,
  .js-motion .work-card,
  .js-motion .stats > div,
  .js-motion .principle,
  .js-motion .plan,
  .js-motion .steps li,
  .js-motion .timeline li,
  .js-motion .faq details,
  .js-motion .prose > h2 {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero::before, .hero::after,
  .tile--dark::before, .tile--dark::after { animation: none; }
  .js-motion .tile-media { animation: none; }
}

/* --- Layout ------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* minmax(0, 1fr) と min-width: 0 の両方が要る。
   前者がないと列が max-content になり、後者がないとグリッドアイテムの
   min-width: auto（= min-content）が効いて、比較表のような
   min-width を持つ子がページ全体を押し広げる。 */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.section > *,
.sections > * { min-width: 0; }

.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

/* --- Global nav --------------------------------------------------------- */
.globalnav {
  position: sticky;
  top: 0;
  z-index: 9999;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* すりガラスは ::before に持たせる。
   .globalnav 自身に backdrop-filter を付けると、それが position:fixed の
   基準（containing block）になってしまい、中の全画面メニューが
   ヘッダーの高さに閉じ込められる。 */
.globalnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-scrim);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .globalnav::before { background: #fafafc; }
}

.globalnav-inner {
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ヘッダーは筆記体ワードマーク（アウトライン化済みSVG、縦横比 6.32:1）。
   44pxのバーに収めるため高さ28pxで置いている。 */
.globalnav-brand {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.globalnav-brand img {
  height: 28px;
  width: auto;
  display: block;
}

/* 全画面オーバーレイメニュー（全幅共通）
   crazy.co.jp と同じく、デスクトップでも横並びナビは置かずメニューに集約する。 */
.globalnav-list {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 96px 38vw 48px 10vw;   /* 右はダイヤルのぶん空ける */
  background: var(--c-bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms;
}

.globalnav[data-open="true"] .globalnav-list {
  opacity: 1;
  visibility: visible;
}

/* 項目は左から順に入ってくる（参考サイトと同じ 0.07秒刻み） */
.globalnav-list li {
  width: 100%;
  max-width: 640px;
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms ease;
}
.globalnav[data-open="true"] .globalnav-list li {
  opacity: 1;
  transform: none;
}
.globalnav-list li:nth-of-type(1) { transition-delay: 0.07s; }
.globalnav-list li:nth-of-type(2) { transition-delay: 0.14s; }
.globalnav-list li:nth-of-type(3) { transition-delay: 0.21s; }
.globalnav-list li:nth-of-type(4) { transition-delay: 0.28s; }
.globalnav-list li:nth-of-type(5) { transition-delay: 0.35s; }
.globalnav-list li:nth-of-type(6) { transition-delay: 0.42s; }

.globalnav-list a {
  display: flex;
  align-items: center;
  min-height: 64px;
  font-size: 32px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-text);
}

/* リンクの前に短い罫線（参考サイトの 10×1px） */
.globalnav-list a::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 1px;
  margin-right: 16px;
  background: var(--c-hairline);
  transition: width 400ms ease, background-color 400ms ease;
}
.globalnav-list a[aria-current="page"]::before { width: 32px; background: var(--c-text); }
@media (hover: hover) {
  .globalnav-list a:hover::before { width: 32px; background: var(--c-text); }
}

/* --- 回転ダイヤル --------------------------------------------------------
   crazy.co.jp の navi-switch と同じ作り。
   半径 513px（狭い画面は 350px）の円周上に項目を等間隔で並べ、
   円の左端（180°）に来たものを「現在地」として拡大する。
   円の右側は画面外にはみ出していて、左の一部だけが見える。
   マークアップは js/nav-dial.js が生成する（HTML側には何も置かない）。 */
.globalnav-dial {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 34vw;
  height: calc(100% - 140px);
  z-index: 10000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
}
.globalnav-dial:active { cursor: grabbing; }

.globalnav[data-open="true"] .globalnav-dial {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s;
}

/* 目印の円 */
.globalnav-dial-ring {
  position: absolute;
  left: 0;
  top: 50%;
  border: 1px solid var(--c-hairline);
  border-radius: 50%;
  pointer-events: none;
}

/* 参考サイトと同じく、項目の「左端」を円周に乗せる。
   中央に乗せると overflow: hidden で左半分が切れる。 */
.globalnav-dial-item {
  position: absolute;
  left: 0;
  top: 50%;
  width: 168px;
  text-align: center;
  will-change: transform;
}

.globalnav-dial-item button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--c-text-sub);
  opacity: 0.45;
  transform: scale(0.67);
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms ease, color 400ms ease;
}

.globalnav-dial-item.is-current button {
  transform: scale(1);
  opacity: 1;
  color: var(--c-text);
}

.globalnav-dial-item .dial-en {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-text-sub);
  margin-top: 6px;
}

@media (max-width: 834px) {
  .globalnav-dial { width: 46vw; height: calc(100% - 100px); }
  .globalnav-dial-item { width: 128px; }
  .globalnav-dial-item button { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .globalnav-dial-item button { transition: none; }
}

/* ハンバーガー（全幅で表示）
   crazy.co.jp の仕様に合わせている：
   「menu」の文字＋2本線 → 開くと文字が消えて2本が中央で±45°のバツになる。
   ボタンはパネルより上に置き、開いている間も押せるようにする。 */
.globalnav-toggle {
  display: block;
  width: 52px;
  margin-right: -8px;
  padding: 2px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-text);
  font-family: inherit;
  position: relative;
  z-index: 10001;
}

.globalnav-toggle-text {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
  transition: transform 400ms ease, opacity 300ms ease, visibility 300ms;
}

.globalnav-bars {
  position: relative;
  display: block;
  width: 24px;
  height: 10px;
  margin-inline: auto;
}
.globalnav-bars span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transform-origin: center center;
  transition: transform 400ms ease, top 400ms ease;
}
.globalnav-bars span:nth-child(1) { top: 0; }
.globalnav-bars span:nth-child(2) { top: 100%; }

/* ホバーで2本が離れる（参考サイトと同じ4px） */
@media (hover: hover) {
  .globalnav-toggle:hover .globalnav-toggle-text { transform: translateY(-4px); }
  .globalnav-toggle:hover .globalnav-bars span:nth-child(2) { transform: translate(-50%, 4px); }
  .globalnav[data-open="true"] .globalnav-toggle:hover .globalnav-bars span:nth-child(1) { transform: translate(-50%, -50%) rotate(65deg); }
  .globalnav[data-open="true"] .globalnav-toggle:hover .globalnav-bars span:nth-child(2) { transform: translate(-50%, -50%) rotate(-65deg); }
}

.globalnav[data-open="true"] .globalnav-toggle-text {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}
.globalnav[data-open="true"] .globalnav-bars span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.globalnav[data-open="true"] .globalnav-bars span:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* メニューを開いたら、バーの小さいブランド名は消して
   パネル側の大きいロゴに主役を渡す（参考サイトと同じ振る舞い）。 */
.globalnav-brand {
  position: relative;
  z-index: 10001;
  transition: opacity 300ms ease, visibility 300ms;
}
.globalnav[data-open="true"] .globalnav-brand {
  opacity: 0;
  visibility: hidden;
}

/* --- 全画面メニューの中のロゴ ------------------------------------------- */
.globalnav-menu-logo {
  position: fixed;
  top: 76px;
  left: 10vw;
  z-index: 10001;
  display: block;
  width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-40px, 0, 0);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 500ms;
}
.globalnav-menu-logo img { width: 100%; height: auto; display: block; }

.globalnav[data-open="true"] .globalnav-menu-logo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.1s;
}

@media (max-width: 834px) {
  .globalnav-menu-logo { top: 64px; left: 12vw; width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .globalnav-menu-logo { transition: none; transform: none; }
}

/* --- フッターのロゴ ------------------------------------------------------ */
.footer-logo {
  display: block;
  width: 240px;
  margin-bottom: 28px;
}
.footer-logo img { width: 100%; height: auto; display: block; }

@media (max-width: 834px) {
  .footer-logo { width: 200px; margin-bottom: 24px; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn-primary {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.btn-primary:hover { background: var(--c-accent-hover); }
.btn-primary:active { background: #006edb; }

.btn-link {
  display: inline-block;
  color: var(--c-accent);
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
}
.btn-link::after { content: "\203A"; margin-left: 4px; }
.btn-link:hover { text-decoration: underline; }

.tile-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--c-bg-dark);
  color: var(--c-text-inv);
  text-align: center;
  padding: 96px 24px 108px;
}

/* --- スクロール誘導 ------------------------------------------------------
   ヒーロー右端。縦線を点が上から下へ落ちていく。
   参考: codepen.io/hana4525/pen/oNVgOxZ
   本文の邪魔をしない添え物なので、参考より線を細く短くしてある。 */
.hero > .scroll-cue {
  position: absolute;
  right: 30px;
  bottom: 22px;
  z-index: 2;
  width: 30px;
  height: 78px;
  text-decoration: none;
}

/* 線 */
.scroll-cue::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 78px;
  background: rgba(245, 245, 247, 0.28);
}

/* 落ちてくる点 */
.scroll-cue::before {
  content: "";
  position: absolute;
  right: -2.5px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-inv);
  animation:
    scroll-cue-fall 1.6s ease-in-out infinite,
    scroll-cue-fade 1.6s ease-out infinite;
}

@keyframes scroll-cue-fall {
  0%   { bottom: 78px; }
  100% { bottom: 0; }
}
@keyframes scroll-cue-fade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  80%  { opacity: 0.9; }
  100% { opacity: 0; }
}

.scroll-cue-text {
  position: absolute;
  right: 9px;
  bottom: 26px;
  writing-mode: vertical-lr;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-inv-sub);
  transition: color 300ms ease;
}
@media (hover: hover) {
  .scroll-cue:hover .scroll-cue-text { color: var(--c-text-inv); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue::before { animation: none; opacity: 1; bottom: 0; }
}

.hero-eyebrow {
  font-size: 17px;
  color: var(--c-text-inv-sub);
  margin-bottom: 12px;
}

.hero-headline {
  font-size: 68px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.hero-subhead {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.007em;
  margin-top: 12px;
  color: var(--c-text-inv);
}

.hero-note {
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-text-inv-sub);
  max-width: 34em;
  margin: 20px auto 0;
}

/* ページ見出し（下層ページ用の軽いヒーロー） */
.pagehead {
  background: var(--c-bg);
  text-align: center;
  padding: 72px 24px 48px;
}
.pagehead-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.pagehead-lead {
  font-size: 21px;
  line-height: 1.5;
  color: var(--c-text-sub);
  max-width: 36em;
  margin: 16px auto 0;
}

/* --- Tile --------------------------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  background: #fafafa;
  overflow: hidden;
}
/* min-height は全タイルには掛けない。文字だけのタイルが無駄に高くなる。
   写真や図版が入るものだけ .tile--tall で高さを確保する。 */

.tile--dark {
  background: var(--c-surface-dark);
  color: var(--c-text-inv);
}
.tile--dark .tile-subhead { color: var(--c-text-inv); }
.tile--dark .tile-note { color: var(--c-text-inv-sub); }

.tile--tall { min-height: 520px; }
.tile--wide { grid-column: 1 / -1; }
/* リンク1本だけの帯。上下の余白をさらに詰める */
.tile--slim { padding: 26px 24px; }

.tile-content { position: relative; z-index: 2; max-width: 36em; }

.tile-eyebrow {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--c-text-sub);
  margin-bottom: 8px;
}
.tile--dark .tile-eyebrow { color: var(--c-text-inv-sub); }

.tile-headline {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.tile-subhead {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 10px;
}

.tile-note {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-sub);
  margin-top: 16px;
}

/* 写真差し替え前提のプレースホルダ。
   本番では .tile-media に background-image を指定して置き換える。 */
.tile-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.tile-media--placeholder {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  margin-top: 32px;
  background: #e8e8ed;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #86868b;
}
.tile--dark .tile-media--placeholder { background: #2a2a2c; color: #86868b; }

/* --- Work list ---------------------------------------------------------- */
.work {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  min-height: 380px;
  padding: 40px 32px;
  text-align: left;
}
.work--dark { background: var(--c-surface-dark); color: var(--c-text-inv); }

.work-category {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-text-sub);
  text-transform: uppercase;
}
.work--dark .work-category { color: var(--c-text-inv-sub); }

.work-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: 6px;
}

.work-desc {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 12px;
  color: var(--c-text-sub);
}
.work--dark .work-desc { color: var(--c-text-inv-sub); }

.work-meta {
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  color: var(--c-text-sub);
}
.work--dark .work-meta { color: var(--c-text-inv-sub); }

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.work-tags li {
  font-size: 12px;
  line-height: 1.6;
  padding: 2px 10px;
  border: 1px solid var(--c-hairline);
  border-radius: 9999px;
  color: var(--c-text-sub);
}
.work--dark .work-tags li { border-color: #3a3a3c; color: var(--c-text-inv-sub); }

/* --- Webサイト制作の一覧（サムネイル付き） -------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}
.work-card {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  min-width: 0;
}
.work-thumb {
  border-bottom: 1px solid var(--c-hairline);
  background: #fff;
}
.work-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.work-card-body { padding: 18px 22px 22px; }
.work-card-type {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
}
.work-card-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin-top: 6px;
}
.work-card-industry {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-sub);
  margin-top: 6px;
}

@media (max-width: 1068px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* --- Prose / definition blocks ------------------------------------------ */
/* width: 100% が要る。margin-inline: auto だけだとグリッドの中で
   shrink-to-fit になり、比較表の min-width まで広がってしまう。 */
.prose {
  width: 100%;
  max-width: 44em;
  margin-inline: auto;
  padding: 56px 24px;
}
.prose h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: 48px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 32px;
}
.prose p { margin-top: 12px; line-height: 1.7; }
.prose ul { margin-top: 12px; }
.prose ul li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.7;
  margin-top: 6px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-text-sub);
}

.spec {
  border-top: 1px solid var(--c-hairline);
  margin-top: 24px;
}
.spec div {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-hairline);
}
.spec dt { font-size: 14px; color: var(--c-text-sub); }
.spec dd { margin: 0; }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; margin-top: 24px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 20px 0 20px 56px;
  border-bottom: 1px solid var(--c-hairline);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--c-text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
}
.steps h3 { margin-top: 0; }

/* --- 数字・実績 ---------------------------------------------------------- */
.stats {
  scroll-margin-top: var(--nav-h);   /* 追従ヘッダーに隠れないように */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-hairline);
  border-block: 1px solid var(--c-hairline);
}
.stats > div {
  background: var(--c-bg);
  padding: 40px 24px;
  text-align: center;
}
.stat-value {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
}
.stat-value small { font-size: 24px; font-weight: 400; margin-left: 2px; }
.stat-label { font-size: 14px; color: var(--c-text-sub); margin-top: 10px; }

/* --- カルチャー / 原則 --------------------------------------------------- */
.principles { display: grid; gap: 0; margin-top: 24px; }
.principle {
  display: grid;
  grid-template-columns: 3.5em 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-hairline);
}
.principle:first-child { border-top: 1px solid var(--c-hairline); }
.principle-no {
  font-size: 14px;
  color: var(--c-text-sub);
  padding-top: 4px;
}
.principle h3 { margin-top: 0; }
.principle p { margin-top: 8px; color: var(--c-text-sub); }

/* --- 料金プラン ---------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 24px;
}

/* 料金カードと比較表は本文幅（44em）では窮屈なので、
   .prose の中にあっても中央基準で外へ広げる。
   ここで transform を使っているため、この2つは入場アニメーション
   （js/motion.js の SELECTOR）の対象に入れないこと。
   .is-in の transform: none が中央寄せを打ち消して右にはみ出す。 */
.plans,
.compare-wrap {
  position: relative;
  left: 50%;
  width: min(62em, calc(100vw - 48px));
  margin-inline: auto;
  transform: translateX(-50%);
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #fafafa;
}
.plan--featured { background: var(--c-surface-dark); color: var(--c-text-inv); }
.plan-name { font-size: 21px; font-weight: 600; }
.plan-price {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
.plan-price small { font-size: 14px; font-weight: 400; color: var(--c-text-sub); }
.plan--featured .plan-price small { color: var(--c-text-inv-sub); }
.plan-desc { font-size: 14px; line-height: 1.6; color: var(--c-text-sub); margin-top: 10px; }
.plan--featured .plan-desc { color: var(--c-text-inv-sub); }
.plan-items { margin-top: 20px; font-size: 14px; }
.plan-items li {
  position: relative;
  padding-left: 1.4em;
  line-height: 1.7;
  margin-top: 8px;
}
.plan-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* --- 比較表 -------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; margin-top: 24px; }
.compare {
  width: 100%;
  min-width: 34em;
  border-collapse: collapse;
  font-size: 14px;
}
.compare th,
.compare td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
}
.compare thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-sub);
  border-bottom: 1px solid var(--c-text);
  white-space: nowrap;
}
.compare tbody th { font-weight: 400; width: 12em; }
.compare td { color: var(--c-text-sub); }
.compare .yes { color: var(--c-text); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: 24px; border-top: 1px solid var(--c-hairline); }
.faq details { border-bottom: 1px solid var(--c-hairline); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17px;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-right: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform 180ms ease-out;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }
.faq .faq-a {
  padding: 0 0 20px;
  color: var(--c-text-sub);
  line-height: 1.7;
  max-width: 42em;
}

/* --- サポート / 問い合わせ後の流れ --------------------------------------- */
.timeline { margin-top: 24px; }
.timeline li {
  position: relative;
  padding: 0 0 28px 28px;
  border-left: 1px solid var(--c-hairline);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}
.timeline h3 { margin-top: 0; font-size: 17px; }
.timeline p { margin-top: 4px; color: var(--c-text-sub); font-size: 15px; }
.timeline .when { font-size: 12px; color: var(--c-text-sub); }

/* --- Form --------------------------------------------------------------- */
.form { max-width: 36em; margin-inline: auto; }
.field { margin-top: 24px; }
.field label {
  display: block;
  font-size: 14px;
  color: var(--c-text-sub);
  margin-bottom: 6px;
}
.field .req { color: #b3261e; margin-left: 4px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  color: var(--c-text);
  background: #fff;
  padding: 12px 14px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  transition: border-color 120ms ease-out;
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}

/* --- 送信結果の表示 ------------------------------------------------------ */

/* 送信完了。フォームと入れ替えて出すので、見落としようがない大きさにする */
.form-done {
  display: none;
  max-width: 36em;
  margin-inline: auto;
  padding: 48px 32px;
  background: #fafafa;
  text-align: center;
}
.form-done.is-shown { display: block; }

.form-done-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.form-done-mark::after {
  content: "";
  width: 18px;
  height: 9px;
  margin-top: -5px;
  border-left: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(-45deg);
}

.form-done h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.form-done p { font-size: 17px; line-height: 1.7; color: var(--c-text-sub); margin-top: 14px; }
.form-done .form-done-sub { font-size: 14px; margin-top: 20px; }
.form-done .tile-ctas { margin-top: 28px; }

/* 送信できなかったとき。小さい注記ではなく、目に入る帯で出す */
.form-alert {
  display: none;
  margin-top: 24px;
  padding: 16px 20px;
  background: #fdf2f1;
  border-left: 2px solid #b3261e;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  text-align: left;
}
.form-alert.is-shown { display: block; }

/* 送信中の経過表示 */
#form-status { font-size: 14px; color: var(--c-text-sub); }
#form-status:empty { display: none; }

@media (max-width: 834px) {
  .form-done { padding: 40px 24px; }
  .form-done h2 { font-size: 24px; }
}

/* 迷惑投稿よけの入力欄。display:none だとボットに見抜かれるので画面外に逃がす */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { margin-top: 32px; text-align: center; }
.form-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-sub);
  margin-top: 16px;
  text-align: center;
}

.notice {
  background: #f5f5f7;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-sub);
  margin-top: 32px;
}

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: #f5f5f7;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-sub);
  padding: 40px 0 24px;
  margin-top: var(--gutter);
}

.footer-dirs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-hairline);
}
.footer-dirs h3 { font-size: 12px; font-weight: 600; color: var(--c-text); }
.footer-dirs ul { margin-top: 10px; }
.footer-dirs li { margin-top: 8px; }
.footer-dirs a { text-decoration: none; }
.footer-dirs a:hover { text-decoration: underline; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1068px) {
  .hero-headline { font-size: 58px; }
  .tile-headline { font-size: 34px; }
  .pagehead-title { font-size: 40px; }
}

@media (max-width: 834px) {
  :root { --nav-h: 48px; }

  .promo-grid,
  .trio-grid { grid-template-columns: 1fr; }

  .globalnav-inner { padding-inline: 16px; gap: 12px; }
  .globalnav-brand img { height: 26px; }

  /* メニュー本体は全幅共通。ここでは狭い画面用の寸法だけ詰める */
  .globalnav-list { padding: 88px 44vw 40px 12vw; }
  .globalnav-list a { min-height: 56px; font-size: 24px; }
  .globalnav-list a::before { margin-right: 12px; }
  .globalnav-list a[aria-current="page"]::before { width: 24px; }
  @media (hover: hover) {
    .globalnav-list a:hover::before { width: 24px; }
  }

  .container { padding-inline: 16px; }

  .hero { padding: 64px 20px 72px; }
  .hero > .scroll-cue { right: 16px; bottom: 16px; height: 58px; }
  .scroll-cue::after { height: 58px; }
  @keyframes scroll-cue-fall {
    0%   { bottom: 58px; }
    100% { bottom: 0; }
  }
  .scroll-cue-text { bottom: 18px; right: 8px; font-size: 9px; }
  .hero-headline { font-size: 44px; }
  .hero-subhead { font-size: 21px; }
  .hero-note { font-size: 16px; }

  .pagehead { padding: 48px 20px 32px; }
  .pagehead-title { font-size: 32px; }
  .pagehead-lead { font-size: 17px; }

  .tile { padding: 44px 20px; }
  .tile--tall { min-height: 400px; }
  .tile--slim { padding: 22px 20px; }
  .tile-headline { font-size: 28px; }
  .tile-subhead { font-size: 17px; }

  .work { min-height: 0; padding: 32px 24px; }
  .work-title { font-size: 24px; }

  .prose { padding: 40px 20px; }
  .prose h2 { font-size: 26px; }

  .spec div { grid-template-columns: 1fr; gap: 4px; }

  .stats { grid-template-columns: 1fr; }
  .stats > div { padding: 28px 20px; }
  .stat-value { font-size: 40px; }

  /* 本文幅が十分に狭いので、はみ出させる必要がない */
  .plans,
  .compare-wrap {
    position: static;
    left: auto;
    width: auto;
    transform: none;
  }

  .plans { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px; }

  .principle { grid-template-columns: 1fr; gap: 4px; padding: 24px 0; }

  .footer-dirs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .globalnav-brand img { height: 22px; }
  .hero-headline { font-size: 36px; }
  .tile-ctas { flex-direction: column; gap: 14px; }
}