@charset "UTF-8";
html {
  font-size: 100%;
}

a[href^=tel] {
  text-decoration: none;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* 強調をなくす */
}

a:hover {
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto; /* アスペクト比保持（テンプレ既定 height:100%; object-fit:cover の引き伸ばし/クロップ事故を回避 / 観点S1）。クロップが必要な画像は要素側で object-fit:cover + height を個別指定する */
}

:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
  cursor: pointer;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

:focus:not(:focus-visible) {
  outline: none;
}

input[type=text] {
  font-size: 1rem;
  /* = 16px */
}

textarea {
  field-sizing: content;
}

body {
  font-family: var(--base-font-family);
  font-weight: var(--fw-regular);
  color: var(--color-text-base); /* kurodafolio トークンに統一（テンプレ既定 --color-text 廃止 / ダークモード追従） */
}

html {
  box-sizing: border-box;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  tab-size: 4;
  text-size-adjust: 100%;
}

*,
::before,
::after {
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
     # General elements
     # ================================================================= */
hr {
  /* Show the overflow in Edge and IE */
  height: 0;
  overflow: visible;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */
}

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: none;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  border-color: inherit;
  /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
     # Forms
     # ================================================================= */
input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  appearance: textfield;
  appearance: none;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
  appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
input,
select,
textarea {
  appearance: none;
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  appearance: none;
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentcolor;
  /* Internet Explorer 11+ */
}

legend {
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  border: 0;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  font: inherit;
  color: inherit;
  /* Correct the inability to style clickable types in iOS and Safari */
  appearance: button;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
     # Specify media element style
     # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
     # Accessibility
     # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
  list-style: "";
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

@property --root-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}
/* ============================================================
   §1. 共通トークン（案ごとに値変動なし）
   ============================================================ */
:root {
  /* ---- Font Family ---- */
  --font-family-sans: "Noto Sans JP", -apple-system, blinkmacsystemfont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-family-en: "Inter", "Noto Sans JP", -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", menlo, monaco, consolas, monospace; /* 案 B 多用 */
  --font-family-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif; /* 将来案件用 補助 */
  /* ---- Font Size（Perfect Fourth = 1.333 ベース / 16px = 1rem） ---- */
  --fs-xs: 0.75rem; /* 12px - キャプション */
  --fs-sm: 0.875rem; /* 14px - 補助テキスト */
  --fs-base: 1rem; /* 16px - 本文 */
  --fs-lg: 1.125rem; /* 18px - リード文 */
  --fs-xl: 1.333rem; /* 21.3px - H4 */
  --fs-2xl: 1.777rem; /* 28.4px - H3 */
  --fs-3xl: 2.369rem; /* 37.9px - H2 */
  --fs-4xl: 3.157rem; /* 50.5px - H1 PC */
  --fs-5xl: 4.209rem; /* 67.3px - ヒーロー PC（必要時） */
  --fs-6xl: 6rem; /* 96px - 404 数字専用 */
  /* ---- Font Weight ---- */
  --fw-light: 300; /* static-template 既定 / 将来用に維持 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  /* ---- Line Height ---- */
  --lh-tight: 1.3;
  --lh-base: 1.75;
  --lh-relax: 1.85;
  /* ---- Letter Spacing ---- */
  --ls-tight: -0.01em;
  --ls-base: 0;
  --ls-wide: 0.04em;
  /* ---- Spacing（4px / 8px グリッド） ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-30: 7.5rem;
  --space-32: 8rem;
  /* ---- Container Max Width ---- */
  --container-narrow: 800px;
  --container-base: 1100px;
  --container-wide: 1200px;
  --container-max: 1280px; /* ヘッダー / フッター用最大幅 */
  --container-padding-pc: 2rem;
  --container-padding-sp: 1rem;
  /* ---- Inner / Padding（static-template 既定 / レイアウト系で参照） ---- */
  --inner: min(1080px, 100%);
  --inner-sp: min(500px, 100%);
  --padding-inner: 20px;
  /* ---- Breakpoint（参考値 / メディアクエリは _breakpoints.scss の $breakpoints map を使う） ---- */
  --bp-sp-max: 767px;
  --bp-tb-min: 768px;
  --bp-tb-max: 1023px;
  --bp-pc-min: 1024px;
  /* ---- Border Radius ---- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px; /* 標準 / カード */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  /* ---- Border Width ---- */
  --border-width-thin: 1px;
  --border-width-base: 2px;
  /* ---- Shadow（ライトモード基準） ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-sm: 0 2px 8px rgb(15 40 73 / 6%);
  --shadow-md: 0 4px 16px rgb(15 40 73 / 8%);
  --shadow-lg: 0 8px 24px rgb(15 40 73 / 10%);
  /* ---- Transition ---- */
  --transition-zero: 0 ease-out;
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  --duration: 0.3s; /* static-template 既定 transition duration */
  /* ---- Z-index ----
     ※ static-template 既定の --z-index-header: 900 とは用途が異なるため両立。
        kurodafolio 側は --z-* 命名で完結。
  */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 800;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-index-header: 900; /* static-template 既定 */
  /* ---- Header / Footer Height ---- */
  --header-height-pc: 80px;
  --header-height-sp: 64px;
  /* ---- Header height（static-template 既定 / 単一値版） ---- */
  --header-height: 64px;
  /* ---- Touch Target（WCAG 2.5.5 / Step 12 ダーク切替トグル padding 拡張等で参照） ---- */
  --touch-target-min: 44px;
  /* ---- Focus Ring ---- */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  /* ---- Icon Size（Lucide + SimpleIcons 採用 / Step 12 で使用） ---- */
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-base: 20px; /* 標準 / フッター SNS 等 */
  --icon-size-md: 24px; /* カード装飾アイコン */
  --icon-size-lg: 32px; /* 発信活動カード等の大サイズ */
  --icon-size-xl: 48px; /* thanks ページ 完了アイコン等 */
  --icon-stroke-width: 1.75; /* Lucide ストローク標準 */
  /* ---- Font Family（static-template 既定 / 構造系で参照） ---- */
  --base-font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  --title-font-family: "Lato", sans-serif;
  --to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem);
  /* ---- CTA セクション 背景画像 + 黒フィルター（Step 5 top.html 等で使用） ----
     - cta-bg は dev/src/assets/images/ 配下に圧縮配置済（cta-bg.webp / cta-bg.png）
     - image-set() で WebP 優先 + PNG フォールバック。_p-cta.scss 側で overlay 層と多層合成する
  */
  --bg-cta-image: image-set(url("../images/cta-bg.DiecJLer.webp") type("image/webp"), url("../images/cta-bg.Dmj0rrQy.png") type("image/png"));
  --color-cta-overlay-light: rgb(15 22 32 / 70%); /* ライト時 = ヒーロー ライト時と同等 */
  --color-cta-overlay-dark: rgb(3 5 10 / 70%); /* ダーク時 = ヒーロー ダーク 0.70 と整合 */
  /* ---- フローティングハンバーガー（画面右下 / SP のみ / Step 12） ---- */
  --fab-size: 56px; /* 円形ボタン直径 */
  --fab-offset: 20px; /* 画面端からのオフセット */
  --fab-shadow: 0 4px 12px rgb(0 0 0 / 40%); /* base（ダーク時）影 */
  --fab-shadow-hover: 0 6px 16px rgb(0 0 0 / 50%); /* hover（ダーク時）影 */
  /* ---- 円形展開ナビ（snippets-free 007_hamburger-expand-corner 踏襲）----
     JS（_drawer.js）のタイミング定数は下記 transition 値と一致させること。
     - --expand-transition-bg : 第1段階 円形背景の拡大（開く時 / _drawer.js PHASE1_DURATION）
     - --expand-transition-nav: 第2段階 リンクのフェードイン（開く時 / _drawer.js）
     - --expand-close-*       : 閉じる時は 1 段階・短時間で同時に閉じる（_drawer.js CLOSE_DURATION）
  */
  --expand-transition-bg: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --expand-transition-nav: 0.4s ease;
  --expand-item-delay: 0.08s; /* スタッガード 1 項目あたりの遅延 */
  /* 閉じる用（開く値とは独立 / 短く＝0.22s。JS の CLOSE_DURATION=220ms と一致させること） */
  --expand-close-bg: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --expand-close-nav: 0.22s ease;
  /* ---- 円形展開ナビ専用オーバーレイ / テキスト（モード非依存で固定）----
     - 背景は常に暗いダークオーバーレイ（90% / Hero 用 --color-bg-overlay とは独立）。
       共有トークンを暗くすると Hero/CTA に波及するため別トークンで分離。
     - リンク文字は背景が常に暗いため、ライト/ダーク問わず白系で固定
       （--color-text-inverse はダーク時に暗色化するため使用不可）。
  */
  --color-nav-overlay: rgb(3 5 10 / 90%);
  --color-nav-text: #fff;
  /* ---- 常に白で固定する前景色（モード非依存）----
     用途: 常にアクセント色（ティール）バッジ／ボタン上に乗る前景要素で、
     ライト/ダーク問わず白系を保ちたいもの。
     - service-card 円バッジ内 SVG（accent 背景上）
     - フローティングハンバーガー三本線（accent 背景上）
     --color-text-inverse はダーク時に暗色（#03050a）へ反転し、accent 背景上で
     同化してしまうため、それらの用途には本トークン（常に白）を使用する。
  */
  --color-fixed-white: #fff;
  /* ---- 常にライト accent（ティール）で固定する背景色（モード非依存）----
     用途: accent 背景の上に白前景（--color-fixed-white）が乗る UI で、
     ライト/ダーク問わず背景を同じティール（#2ba89c）に保ちたいもの。
     - c-btn--primary 背景（お問い合わせ / もっと詳しく見る）
     - service-card 円バッジ背景
     - フローティングハンバーガー（FAB）背景
     --color-accent はダーク時に明色（#5dd9cb）へ変化し白前景とのコントラストが
     きつくなるため、これらの用途には本トークン（常にライト値）を使用する。
     hover はライト accent-hover（#239084）固定の --color-accent-fixed-hover を併用。
  */
  --color-accent-fixed: #2ba89c;
  --color-accent-fixed-hover: #239084;
}
@media screen and (width >= 768px) {
  :root {
    --header-height: 80px;
  }
}

/* ============================================================
   §2. b-tech-cool ライトモード（採用案 / デフォルト）

   主軸サブメッセージ: 「コードに運用の優しさを。」
   キーカラー: チャコールネイビー #1A2B3C
   アクセント: ティールグリーン #2BA89C

   ★ data-theme 属性は付与してもしなくても適用される（二重指定）
   ============================================================ */
:root[data-theme=b-tech-cool],
:root:not([data-theme]) {
  /* ---- Primary（チャコールネイビー） ---- */
  --color-primary: #1a2b3c;
  --color-primary-hover: #2a3d52;
  --color-primary-lighten: #3d5066;
  /* ---- Secondary（クールグレー） ---- */
  --color-secondary: #4a5868;
  /* ---- Accent（ティールグリーン + くすみブルー） ---- */
  --color-accent: #2ba89c;
  --color-accent-hover: #239084;
  --color-accent-bg: rgb(43 168 156 / 8%);
  --color-accent-strong: #5b7fb8;
  /* ---- Neutral / Background ---- */
  --color-bg-base: #fff;
  --color-bg-alt: #f4f6f8;
  --color-bg-section: #f4f6f8;
  --color-bg-elevated: #fff;
  --color-bg-code: #f0f3f6;
  --color-bg-overlay: rgb(15 22 32 / 70%); /* Hero 写真 overlay 用 */
  /* ---- Border ---- */
  --color-border: #dde2e7;
  --color-border-strong: #bfc6ce;
  /* ---- Text ---- */
  --color-text-base: #0f1620;
  --color-text-muted: #586674;
  --color-text-inverse: #fff;
  --color-text-link: #5b7fb8;
  --color-text-link-hover: #4a6fa8;
  /* ---- Semantic ---- */
  --color-success: #2a9d6e;
  --color-warning: #d4923a;
  --color-warning-bg: rgb(212 146 58 / 12%); /* warning 系バッジ背景（warning 12%） */
  --color-error: #c4444a;
  --color-error-bg: rgb(196 68 74 / 12%); /* error 系 focus ring 背景（error 12% / contact インラインバリデーション） */
  --color-info: #5b7fb8;
  /* ---- Focus Ring ---- */
  --color-focus-outline: #2ba89c;
  /* ---- Section gap ---- */
  --section-gap-pc: var(--space-28);
  --section-gap-sp: var(--space-16);
  /* ---- Radius default ---- */
  --radius-card: var(--radius-md);
  /* ---- Font assignment ---- */
  --font-heading: var(--font-family-en); /* Inter Bold 優先 */
  --font-body: var(--font-family-sans);
  --lh-body: var(--lh-base);
}

/* ============================================================
   §3. b-tech-cool ダークモード

   発動条件:
     1. <html data-color-scheme="dark"> 明示時（ユーザー選択 / localStorage 復元）
     2. prefers-color-scheme: dark + ユーザー未指定（§4 自動追従ブロック）

   設計指針:
     - WCAG AA 4.5:1 確保（H QA で Lighthouse 検証）
     - shadow は弱める or none（ダーク背景下では見えにくい）
     - accent はライト基準よりやや明度上げ（視認性確保）
     - currentColor 連動アイコン（Lucide）は自動追従
   ============================================================ */
:root[data-theme=b-tech-cool][data-color-scheme=dark],
:root:not([data-theme])[data-color-scheme=dark] {
  /* ---- Primary（彩度上げ版） ---- */
  --color-primary: #4a6fa8;
  --color-primary-hover: #5b82bc;
  --color-primary-lighten: #6f95c8;
  /* ---- Secondary ---- */
  --color-secondary: #8b97a3;
  /* ---- Accent（ダーク背景で視認性確保 / 明度を 53% 程度に） ---- */
  --color-accent: #5dd9cb;
  --color-accent-hover: #7ae3d7;
  --color-accent-bg: rgb(93 217 203 / 12%);
  --color-accent-strong: #7ab4f0;
  /* ---- Neutral / Background（near-pure-black / 案 B ネイビー最暗部） ---- */
  --color-bg-base: #03050a; /* 最深部 = body 背景 / ヘッダー透過 */
  --color-bg-alt: #0a0e14; /* セクション alt 背景 */
  --color-bg-section: #0a0e14; /* 同上 */
  --color-bg-elevated: #131922; /* カード / elevated UI */
  --color-bg-code: #0a0e14; /* コードブロック */
  --color-bg-overlay: rgb(3 5 10 / 70%); /* Hero overlay（写真を見せる方向） */
  /* ---- Border ---- */
  --color-border: #232e40;
  --color-border-strong: #3d4d60;
  /* ---- Text（白系統徹底） ---- */
  --color-text-base: #e6edf6;
  --color-text-muted: #a8b3be;
  --color-text-inverse: #03050a;
  --color-text-link: #7ab4f0;
  --color-text-link-hover: #92c4f5;
  /* ---- Semantic ---- */
  --color-success: #5dd9a8;
  --color-warning: #f0b065;
  --color-warning-bg: rgb(240 176 101 / 14%); /* warning 系バッジ背景（ダーク warning 14%） */
  --color-error: #e07480;
  --color-error-bg: rgb(224 116 128 / 16%); /* error 系 focus ring 背景（ダーク error 16%） */
  --color-info: #7ab4f0;
  /* ---- Focus Ring ---- */
  --color-focus-outline: #5dd9cb;
  /* ---- Shadow（ダーク時は弱める / 黒影は背景に溶ける） ---- */
  --shadow-xs: none;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 50%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 60%);
}

/* ============================================================
   §4. prefers-color-scheme: dark での自動追従

   ユーザーが data-color-scheme を明示していない場合のみ、OS 設定に追従。
   <html data-color-scheme="light"> 明示時は本ブロックを発動しない。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root[data-theme=b-tech-cool]:not([data-color-scheme=light], [data-color-scheme=dark]),
  :root:not([data-theme], [data-color-scheme=light], [data-color-scheme=dark]) {
    --color-primary: #4a6fa8;
    --color-primary-hover: #5b82bc;
    --color-primary-lighten: #6f95c8;
    --color-secondary: #8b97a3;
    --color-accent: #5dd9cb;
    --color-accent-hover: #7ae3d7;
    --color-accent-bg: rgb(93 217 203 / 12%);
    --color-accent-strong: #7ab4f0;
    --color-bg-base: #03050a;
    --color-bg-alt: #0a0e14;
    --color-bg-section: #0a0e14;
    --color-bg-elevated: #131922;
    --color-bg-code: #0a0e14;
    --color-bg-overlay: rgb(3 5 10 / 70%);
    --color-border: #232e40;
    --color-border-strong: #3d4d60;
    --color-text-base: #e6edf6;
    --color-text-muted: #a8b3be;
    --color-text-inverse: #03050a;
    --color-text-link: #7ab4f0;
    --color-text-link-hover: #92c4f5;
    --color-success: #5dd9a8;
    --color-warning: #f0b065;
    --color-warning-bg: rgb(240 176 101 / 14%);
    --color-error: #e07480;
    --color-error-bg: rgb(224 116 128 / 16%);
    --color-info: #7ab4f0;
    --color-focus-outline: #5dd9cb;
    --shadow-xs: none;
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 40%);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 50%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 60%);
  }
}
/* ============================================================
   §5. color-scheme プロパティ（ブラウザ標準 UI のダーク化）

   defensive 設計:
     - フォーム要素のデフォルト色 / スクロールバー等のブラウザ UI を
       適切なテーマに合わせる
     - inline script が CSP 等で動かなかった場合の保険
   ============================================================ */
:root {
  color-scheme: light;
}

:root[data-color-scheme=dark] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) {
    color-scheme: dark;
  }
}
/* ============================================================
   §6. prefers-reduced-motion 対応（A11y / WCAG 2.3.3 / CD-07 横断方針）

   サイト全体方針（handover §8-3）として一括設計し、header 単体の虫食いを避ける。
   2 層構成:
     (1) foundation 層 一括 off（本ブロック）: 装飾系 transition は全て --transition-fast /
         --transition-base / --transition-slow トークン経由で記述させ、ここで 0ms に
         潰す。これでトークン駆動の動き（work-card hover の translateY / FAQ ▶ 回転 /
         color-toggle サムスライド / FAB の × 変形 / body・header の色 transition 等）は
         一括で即時化される。
     (2) コンポーネント個別 off: トークン非依存の literal 値で動くものだけ個別に上書きする。
         - scroll-behavior: smooth → layouts/_l-base.scss で auto に（アンカー/ToC ジャンプ）
         - 円形展開ナビの transform / width スケールアニメ → components/_c-mobile-nav.scss
           （literal の transform / inset を即時全面化）
   方式選定理由: 既存実装が「装飾 transition はトークン経由」で統一済みのため、
   foundation 一括 off が最小差分・最大カバレッジ。literal 値アニメは数が少なく
   コンポーネント個別で閉じる方が意図が読みやすい（全 transition を !important で
   殴る横断ルールより副作用が小さい）。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}
:root {
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body, sans-serif);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body, 1.75);
  color: var(--color-text-base);
  text-rendering: optimizelegibility;
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.is-ready body {
  transition: background-color var(--transition-base), color var(--transition-base);
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-base);
  letter-spacing: var(--ls-tight);
}

h1 {
  font-size: var(--fs-4xl);
}

h2 {
  font-size: var(--fs-3xl);
}

h3 {
  font-size: var(--fs-2xl);
}

h4 {
  font-size: var(--fs-xl);
}

h5 {
  font-size: var(--fs-lg);
}

h6 {
  font-size: var(--fs-base);
}

a {
  color: var(--color-text-link);
  transition: color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-text-link-hover);
  }
}
a:focus-visible {
  border-radius: 2px;
  outline: var(--focus-outline-width) solid var(--color-focus-outline);
  outline-offset: var(--focus-outline-offset);
}

button:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-outline);
  outline-offset: var(--focus-outline-offset);
}

img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.l-container {
  width: 100%;
  max-width: var(--container-base);
  padding-inline: var(--container-padding-sp);
  margin-inline: auto;
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-container--wide {
  max-width: var(--container-wide);
}

.l-container--max {
  max-width: var(--container-max);
}

@media screen and (min-width: 768px) {
  .l-container {
    padding-inline: var(--container-padding-pc);
  }
}
.l-section {
  padding-block: var(--section-gap-sp);
}

.l-section--alt {
  background-color: var(--color-bg-section);
}

@media screen and (min-width: 1024px) {
  .l-section {
    padding-block: var(--section-gap-pc);
  }
}
.c-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  background-color: var(--color-bg-alt);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.c-badge--accent {
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.c-badge--warning {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.c-breadcrumb {
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
}
.c-breadcrumb__list a {
  color: var(--color-text-muted);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-breadcrumb__list a:hover {
    color: var(--color-accent);
  }
}

.c-breadcrumb__sep {
  color: var(--color-border-strong);
}

.c-btn {
  --_btn-color: var(--color-text-base);
  --_btn-bg: transparent;
  --_btn-border: transparent;
  --_btn-color-hover: var(--_btn-color);
  --_btn-bg-hover: var(--_btn-bg);
  --_btn-border-hover: var(--_btn-border);
  --_btn-margin-inline: 0;
  --_btn-backdrop-filter: none;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  margin-inline: var(--_btn-margin-inline);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--_btn-color);
  text-align: center;
  cursor: pointer;
  background-color: var(--_btn-bg);
  backdrop-filter: var(--_btn-backdrop-filter);
  border: var(--border-width-thin) solid var(--_btn-border);
  border-radius: var(--radius-card);
  transition: all var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-btn:hover {
    color: var(--_btn-color-hover);
    background-color: var(--_btn-bg-hover);
    border-color: var(--_btn-border-hover);
  }
}

.c-btn--primary {
  --_btn-color: var(--color-text-inverse);
  --_btn-bg: var(--color-accent);
  --_btn-color-hover: var(--color-text-inverse);
  --_btn-bg-hover: var(--color-accent-hover);
}

:root[data-color-scheme=dark] .c-btn--primary {
  --_btn-color: var(--color-fixed-white);
  --_btn-bg: var(--color-accent-fixed);
  --_btn-color-hover: var(--color-fixed-white);
  --_btn-bg-hover: var(--color-accent-fixed-hover);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .c-btn--primary {
    --_btn-color: var(--color-fixed-white);
    --_btn-bg: var(--color-accent-fixed);
    --_btn-color-hover: var(--color-fixed-white);
    --_btn-bg-hover: var(--color-accent-fixed-hover);
  }
}
.c-btn--outline {
  --_btn-color: var(--color-primary);
  --_btn-bg: transparent;
  --_btn-border: var(--color-primary);
  --_btn-color-hover: var(--color-text-inverse);
  --_btn-bg-hover: var(--color-primary);
}

.c-btn--large {
  min-height: calc(56 * var(--to-rem));
  padding-block: var(--space-4);
  padding-inline: var(--space-8);
  font-size: var(--fs-lg);
}

.c-btn--block {
  display: flex;
  width: 100%;
}

.c-btn--arrow::after {
  display: inline-block;
  content: "→";
  transition: transform var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-btn--arrow:hover::after {
    transform: translateX(3px);
  }
}
.c-btn--arrow:focus-visible::after {
  transform: translateX(3px);
}

.c-cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media screen and (min-width: 600px) {
  .c-cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .c-cert-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.c-cert-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5);
  text-align: center;
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-cert-card:hover {
    box-shadow: var(--shadow-sm);
  }
}

.c-cert-card__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(48 * var(--to-rem));
  height: calc(48 * var(--to-rem));
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}
.c-cert-card__icon svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke-width: var(--icon-stroke-width);
}

.c-cert-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-base);
}

.c-cert-card__date {
  margin-block-start: auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
}

.c-color-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: calc(64 * var(--to-rem));
  height: calc(32 * var(--to-rem));
  padding-block: 0;
  padding-inline: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  background-color: var(--color-bg-alt);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-color-toggle:hover {
    border-color: var(--color-accent);
  }
}
.c-color-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--touch-target-min));
  height: max(100%, var(--touch-target-min));
  content: "";
  transform: translate(-50%, -50%);
}
.c-color-toggle::before {
  position: absolute;
  top: 50%;
  left: 3px;
  z-index: 1;
  width: calc(22 * var(--to-rem));
  height: calc(22 * var(--to-rem));
  content: "";
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: none;
  transform: translateY(-50%);
}

html.is-ready .c-color-toggle::before {
  transition: left var(--transition-base), background-color var(--transition-base);
}

.c-color-toggle__icon {
  position: relative;
  z-index: 2;
  width: calc(16 * var(--to-rem));
  height: calc(16 * var(--to-rem));
  pointer-events: none;
  transition: color var(--transition-base);
}

.c-color-toggle__icon--sun {
  color: var(--color-text-inverse);
}

.c-color-toggle__icon--moon {
  color: var(--color-text-muted);
}

:root[data-color-scheme=dark] .c-color-toggle::before {
  left: calc(100% - 3px - 22 * var(--to-rem));
}
:root[data-color-scheme=dark] .c-color-toggle__icon--sun {
  color: var(--color-text-muted);
}
:root[data-color-scheme=dark] .c-color-toggle__icon--moon {
  color: var(--color-text-inverse);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .c-color-toggle::before {
    left: calc(100% - 3px - 22 * var(--to-rem));
  }
  :root:not([data-color-scheme=light]) .c-color-toggle__icon--sun {
    color: var(--color-text-muted);
  }
  :root:not([data-color-scheme=light]) .c-color-toggle__icon--moon {
    color: var(--color-text-inverse);
  }
}
.c-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-faq-item {
  overflow: hidden;
  background-color: var(--color-bg-base);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-faq-item__summary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-target-min);
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  list-style: none;
  cursor: pointer;
}
.c-faq-item__summary::-webkit-details-marker {
  display: none;
}
.c-faq-item__summary::after {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-accent);
  content: "▶";
  transition: transform var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-faq-item__summary:hover {
    background-color: var(--color-bg-section);
  }
}
.c-faq-item__summary:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus-outline);
  outline-offset: -2px;
}

.c-faq-item[open] .c-faq-item__summary::after {
  transform: rotate(90deg);
}

.c-faq-item__body {
  padding: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-base);
  background-color: var(--color-accent-bg);
}

.c-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-8);
}

.c-filter-tab {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--touch-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-base);
  background-color: var(--color-bg-base);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-filter-tab:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
}
.c-filter-tab[aria-pressed=true] {
  color: var(--color-text-inverse);
  cursor: default;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.c-filter-tab__icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

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

.c-grid--2col,
.c-grid--3col,
.c-grid--4col {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
  .c-grid--2col,
  .c-grid--3col,
  .c-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .c-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}
.c-grid--triad {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 900px) {
  .c-grid--triad {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-hamburger-fab {
  position: fixed;
  right: var(--fab-offset);
  bottom: var(--fab-offset);
  z-index: calc(var(--z-modal) + 10);
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  padding: 0;
  color: var(--color-text-inverse);
  cursor: pointer;
  background-color: var(--color-accent-fixed);
  border: none;
  border-radius: var(--radius-pill);
}

.c-hamburger-fab__line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-fixed-white);
  border-radius: 2px;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  transform-origin: center;
}

.c-hamburger-fab.is-active .c-hamburger-fab__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.c-hamburger-fab.is-active .c-hamburger-fab__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.c-hamburger-fab.is-active .c-hamburger-fab__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (min-width: 1024px) {
  .c-hamburger-fab {
    display: none;
  }
}
:root[data-color-scheme=dark] .c-hamburger-fab {
  background-color: var(--color-accent-fixed);
  box-shadow: var(--fab-shadow);
}
@media (any-hover: hover) and (pointer: fine) {
  :root[data-color-scheme=dark] .c-hamburger-fab:hover {
    background-color: var(--color-accent-fixed-hover);
    box-shadow: var(--fab-shadow-hover);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .c-hamburger-fab {
    background-color: var(--color-accent-fixed);
    box-shadow: var(--fab-shadow);
  }
}
@media (prefers-color-scheme: dark) and (any-hover: hover) and (pointer: fine) {
  :root:not([data-color-scheme=light]) .c-hamburger-fab:hover {
    background-color: var(--color-accent-fixed-hover);
    box-shadow: var(--fab-shadow-hover);
  }
}
.c-link-arrow {
  position: relative;
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  transition: color var(--transition-base);
}
.c-link-arrow::after {
  display: inline-block;
  content: "→";
  transition: transform var(--transition-base), color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-link-arrow:hover {
    color: var(--color-accent-hover);
  }
  .c-link-arrow:hover::after {
    color: var(--color-accent-hover);
    transform: translateX(3px);
  }
}
.c-link-arrow:focus-visible {
  color: var(--color-accent-hover);
}
.c-link-arrow:focus-visible::after {
  color: var(--color-accent-hover);
  transform: translateX(3px);
}

.c-link-arrow--back::after {
  display: none;
  content: none;
}
.c-link-arrow--back::before {
  display: inline-block;
  content: "←";
  transition: transform var(--transition-base), color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-link-arrow--back:hover::before {
    color: var(--color-accent-hover);
    transform: translateX(-3px);
  }
}
.c-link-arrow--back:focus-visible::before {
  color: var(--color-accent-hover);
  transform: translateX(-3px);
}

.c-mobile-nav__bg {
  position: fixed;
  right: calc(var(--fab-offset) + var(--fab-size) / 2);
  bottom: calc(var(--fab-offset) + var(--fab-size) / 2);
  z-index: var(--z-modal-backdrop);
  width: 0;
  height: 0;
  pointer-events: none;
  background-color: var(--color-nav-overlay);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: none;
  transform: translate(50%, 50%) scale(0);
}

.c-mobile-nav__bg.is-expanding {
  width: 300vmax;
  height: 300vmax;
  opacity: 1;
  transform: translate(50%, 50%) scale(1);
}

.c-mobile-nav__bg.is-closing {
  width: 300vmax;
  height: 300vmax;
  opacity: 0;
  transform: translate(50%, 50%) scale(0);
}

html.is-ready .c-mobile-nav__bg {
  transition: transform var(--expand-transition-bg), width 0s, height 0s;
}

html.is-ready .c-mobile-nav__bg.is-closing {
  transition: transform var(--expand-close-bg), opacity var(--expand-close-bg);
}

.c-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: none;
}

html.is-ready .c-mobile-nav {
  transition: opacity var(--expand-close-nav), visibility var(--expand-close-nav);
}

.c-mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

html.is-ready .c-mobile-nav.is-open {
  transition: opacity var(--expand-transition-nav), visibility var(--expand-transition-nav);
}

.c-mobile-nav__panel {
  width: min(86%, 360px);
}

.c-mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.c-mobile-nav__item {
  opacity: 0;
  transition: none;
  transition-delay: 0s;
  transform: translateY(30px);
}

html.is-ready .c-mobile-nav__item {
  transition: opacity var(--expand-close-nav), transform var(--expand-close-nav);
}

html.is-ready .c-mobile-nav.is-open .c-mobile-nav__item {
  transition: opacity var(--expand-transition-nav), transform var(--expand-transition-nav);
}

.c-mobile-nav.is-open .c-mobile-nav__item {
  opacity: 1;
  transform: translateY(0);
}

.c-mobile-nav.is-open .c-mobile-nav__item:nth-child(1) {
  transition-delay: calc(var(--expand-item-delay) * 1);
}

.c-mobile-nav.is-open .c-mobile-nav__item:nth-child(2) {
  transition-delay: calc(var(--expand-item-delay) * 2);
}

.c-mobile-nav.is-open .c-mobile-nav__item:nth-child(3) {
  transition-delay: calc(var(--expand-item-delay) * 3);
}

.c-mobile-nav.is-open .c-mobile-nav__item:nth-child(4) {
  transition-delay: calc(var(--expand-item-delay) * 4);
}

.c-mobile-nav.is-open .c-mobile-nav__item:nth-child(5) {
  transition-delay: calc(var(--expand-item-delay) * 5);
}

.c-mobile-nav__item a:not(.c-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-nav-text);
  letter-spacing: var(--ls-wide);
  transition: color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-mobile-nav__item a:not(.c-btn):hover {
    color: var(--color-accent);
  }
}
.c-mobile-nav__item a:not(.c-btn):focus-visible {
  color: var(--color-accent);
}

.c-mobile-nav__item--contact {
  margin-block-start: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .c-mobile-nav__bg,
  html.is-ready .c-mobile-nav__bg.is-closing {
    transition: opacity var(--transition-base);
  }
  .c-mobile-nav__bg.is-expanding,
  .c-mobile-nav__bg.is-closing {
    transform: none;
  }
  .c-mobile-nav__bg.is-expanding {
    inset: 0;
    width: auto;
    height: auto;
  }
  html.is-ready .c-mobile-nav__item {
    transition: opacity var(--transition-base);
  }
  .c-mobile-nav__item {
    transform: none;
  }
  .c-mobile-nav.is-open .c-mobile-nav__item {
    transition-delay: 0s;
    transform: none;
  }
}
@media screen and (min-width: 1024px) {
  .c-mobile-nav,
  .c-mobile-nav__bg {
    display: none;
  }
}
.c-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media screen and (min-width: 600px) {
  .c-philosophy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .c-philosophy-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.c-philosophy-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-5);
  text-align: center;
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-philosophy-card__icon {
  display: inline-grid;
  place-items: center;
  width: calc(40 * var(--to-rem));
  height: calc(40 * var(--to-rem));
  margin-block-end: var(--space-1);
  color: var(--color-fixed-white);
  background-color: var(--color-accent-fixed);
  border-radius: var(--radius-pill);
}
.c-philosophy-card__icon svg {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  stroke-width: var(--icon-stroke-width);
}

.c-philosophy-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.c-philosophy-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.c-scale-cards {
  display: grid;
  gap: var(--space-4);
}
@media screen and (min-width: 768px) {
  .c-scale-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-scale-card {
  padding: var(--space-6);
  text-align: center;
  background-color: var(--color-accent-bg);
  border: var(--border-width-thin) solid rgba(43, 168, 156, 0.3);
  border-radius: var(--radius-md);
}

.c-scale-card__label {
  margin-block-end: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

:root[data-color-scheme=dark] .c-scale-card__label {
  color: var(--color-text-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .c-scale-card__label {
    color: var(--color-text-base);
  }
}
.c-scale-card__amount {
  margin-block-end: var(--space-2);
  font-family: var(--font-family-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.c-scale-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.c-scale-cards__note {
  margin-block-start: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.c-section__title {
  margin-block-end: var(--space-3);
  font-size: clamp(var(--fs-2xl), 3.7vw, var(--fs-3xl));
  text-align: center;
  letter-spacing: var(--ls-tight);
}
@media screen and (min-width: 768px) {
  .c-section__title {
    text-align: left;
  }
}

.c-section__lead {
  margin-block-end: var(--space-12);
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .c-section__lead {
    text-align: left;
  }
}

.c-section__head {
  margin-block-end: var(--space-12);
}

.c-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  height: 100%;
  padding: var(--space-6);
  text-align: center;
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-service-card__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(48 * var(--to-rem));
  height: calc(48 * var(--to-rem));
  color: var(--color-fixed-white);
  background-color: var(--color-accent-fixed);
  border-radius: var(--radius-pill);
}
.c-service-card__icon svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke-width: var(--icon-stroke-width);
}

.c-service-card__title {
  margin-block-end: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
}

.c-service-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.c-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: 0 0 var(--radius-md) 0;
}
.c-skip-link:focus {
  top: 0;
  color: var(--color-text-inverse);
}

.c-sns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media screen and (min-width: 768px) {
  .c-sns-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-sns-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-6);
  color: var(--color-text-base);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-sns-card:hover {
    color: var(--color-text-base);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .c-sns-card:hover .c-sns-card__handle {
    color: var(--color-text-base);
  }
  .c-sns-card:hover .c-sns-card__desc {
    color: var(--color-text-muted);
  }
}
.c-sns-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.c-sns-card:active {
  box-shadow: var(--shadow-none) !important;
  transition: transform var(--transition-zero);
  transform: translateY(0);
}

.c-sns-card__icon {
  display: inline-grid;
  place-items: center;
  width: calc(56 * var(--to-rem));
  height: calc(56 * var(--to-rem));
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-md);
}
.c-sns-card__icon svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.c-sns-card__handle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.c-sns-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.c-tech-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media screen and (min-width: 768px) {
  .c-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.c-tech-card {
  padding: var(--space-5);
  background-color: var(--color-bg-base);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-tech-card__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-3);
}

.c-tech-card__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(36 * var(--to-rem));
  height: calc(36 * var(--to-rem));
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}
.c-tech-card__icon svg {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  stroke-width: var(--icon-stroke-width);
}

.c-tech-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-primary);
}

:root[data-color-scheme=dark] .c-tech-card__title {
  color: var(--color-text-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .c-tech-card__title {
    color: var(--color-text-base);
  }
}
.c-tech-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-tech-card__item {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--color-text-base);
}
.c-tech-card__item::before {
  flex-shrink: 0;
  font-size: calc(10 * var(--to-rem));
  line-height: 1;
  color: var(--color-accent);
  content: "◆";
}

.c-work-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--color-text-base);
  text-decoration: none;
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .c-work-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.c-work-card:active {
  box-shadow: var(--shadow-none) !important;
  transition: transform var(--transition-zero);
  transform: translateY(0);
}
.c-work-card[hidden] {
  display: none;
}

.c-work-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background-color: var(--color-bg-code);
  border-radius: var(--radius-md);
}

.c-work-card__title {
  margin-block-start: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
}

.c-work-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.c-work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: auto;
}

.p-about-excerpt {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-about-excerpt {
    text-align: left;
  }
}

.p-about-excerpt__photo {
  display: block;
  width: calc(160 * var(--to-rem));
  height: calc(160 * var(--to-rem));
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-pill);
}
.p-about-excerpt__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-about-excerpt__name {
  margin-block-end: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

.p-about-excerpt__text {
  margin-block-end: var(--space-6);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.p-about-excerpt__body {
  --_btn-margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-about-excerpt__body {
    --_btn-margin-inline: 0;
  }
}

@media screen and (min-width: 768px) {
  .p-about-excerpt {
    grid-template-columns: auto 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .p-about-excerpt__photo {
    width: calc(200 * var(--to-rem));
    height: calc(200 * var(--to-rem));
    margin-inline: 0;
  }
}
.p-about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-0);
  align-items: center;
  padding-block: var(--space-16);
}
@media screen and (min-width: 768px) {
  .p-about-hero {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
  }
}

.p-about-hero__text-block {
  display: contents;
}
@media screen and (min-width: 768px) {
  .p-about-hero__text-block {
    display: block;
  }
}

.p-about-hero__keyword {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  order: 0;
  width: max-content;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}

.p-about-hero__title {
  order: 1;
  margin-block-end: var(--space-2);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
}

.p-about-hero__role {
  order: 2;
  margin-block-end: var(--space-4);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
}

.p-about-hero__desc {
  order: 4;
  margin-block-end: var(--space-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.p-about-hero__anchor {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  order: 5;
  padding-block: var(--space-2);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  transition: color var(--transition-base);
}
.p-about-hero__anchor::after {
  display: inline-block;
  content: "→";
  transition: transform var(--transition-base), color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-about-hero__anchor:hover {
    color: var(--color-accent-hover);
  }
  .p-about-hero__anchor:hover::after {
    color: var(--color-accent-hover);
    transform: translateX(3px);
  }
}
.p-about-hero__anchor:focus-visible {
  color: var(--color-accent-hover);
}
.p-about-hero__anchor:focus-visible::after {
  color: var(--color-accent-hover);
  transform: translateX(3px);
}

.p-about-hero__photo {
  display: block;
  order: 3;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  margin-block: var(--space-4);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-bg-code);
  border-radius: var(--radius-md);
}
.p-about-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (min-width: 768px) {
  .p-about-hero__photo {
    margin-block: 0;
    margin-inline: 0;
  }
}

.p-contact-alt {
  margin-block-start: var(--space-8);
}

.p-contact-alt__title {
  margin-block-end: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  text-align: center;
}

.p-contact-alt__card {
  max-width: calc(480 * var(--to-rem));
  margin-inline: auto;
}

.p-contact-aside {
  padding: var(--space-6);
  margin-block-start: var(--space-8);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.p-contact-aside__lead {
  margin-block-end: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.p-contact-aside__link {
  font-size: var(--fs-base);
}

.p-contact-form-wrap {
  margin-block-end: var(--space-24);
}

.p-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background-color: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.p-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-contact-form__fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.p-contact-form__label {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-base);
}

.p-contact-form__required {
  display: inline-block;
  padding-block: 2px 3px;
  padding-inline: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}
[data-color-scheme=dark] .p-contact-form__required {
  color: var(--color-fixed-white);
  background-color: var(--color-accent-fixed);
}

.p-contact-form__optional {
  display: inline-block;
  padding-block: 2px 3px;
  padding-inline: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.p-contact-form__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.p-contact-form__error {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

.p-contact-form__control {
  width: 100%;
  min-height: var(--touch-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text-base);
  background-color: var(--color-bg-base);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.p-contact-form__control:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}
.p-contact-form__control[aria-invalid=true] {
  border-color: var(--color-error);
}
.p-contact-form__control[aria-invalid=true]:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

.p-contact-form__control--textarea {
  min-height: calc(160 * var(--to-rem));
  line-height: var(--lh-base);
  resize: vertical;
}

.p-contact-form__radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.p-contact-form__radio {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--touch-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-size: var(--fs-sm);
  cursor: pointer;
  background-color: var(--color-bg-alt);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.p-contact-form__radio input[type=radio] {
  position: relative;
  flex-shrink: 0;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  appearance: none;
  cursor: pointer;
  background-color: var(--color-bg-base);
  border: var(--border-width-base) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.p-contact-form__radio input[type=radio]::after {
  position: absolute;
  inset: 50%;
  width: 8px;
  height: 8px;
  content: "";
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base);
  transform: translate(-50%, -50%) scale(0);
}
.p-contact-form__radio input[type=radio]:checked {
  border-color: var(--color-accent);
}
.p-contact-form__radio input[type=radio]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-contact-form__radio:hover {
    background-color: var(--color-accent-bg);
    border-color: var(--color-accent);
  }
  .p-contact-form__radio:hover input[type=radio] {
    border-color: var(--color-accent);
  }
}
.p-contact-form__radio:has(input[type=radio]:checked) {
  background-color: var(--color-accent-bg);
  border-color: var(--color-accent);
}
.p-contact-form__radio:has(input[type=radio]:focus-visible) {
  outline: var(--focus-outline-width) solid var(--color-focus-outline);
  outline-offset: 2px;
}

.p-contact-form__consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  cursor: pointer;
  background-color: var(--color-bg-alt);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-sm);
}
.p-contact-form__consent input[type=checkbox] {
  position: relative;
  flex-shrink: 0;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  margin-block-start: 2px;
  appearance: none;
  cursor: pointer;
  background-color: var(--color-bg-base);
  border: var(--border-width-base) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.p-contact-form__consent input[type=checkbox]::after {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  width: 5px;
  height: 10px;
  content: "";
  border-color: var(--color-text-inverse);
  border-style: solid;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: opacity var(--transition-base);
  transform: rotate(45deg);
}
.p-contact-form__consent input[type=checkbox]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.p-contact-form__consent input[type=checkbox]:checked::after {
  opacity: 1;
}
.p-contact-form__consent input[type=checkbox]:focus-visible {
  outline: none;
}
.p-contact-form__consent:has(input[type=checkbox]:focus-visible) {
  border-color: var(--color-accent);
  outline: var(--focus-outline-width) solid var(--color-focus-outline);
  outline-offset: 2px;
}
@media (any-hover: hover) and (pointer: fine) {
  .p-contact-form__consent:hover input[type=checkbox]:not(:checked) {
    border-color: var(--color-accent);
  }
}
.p-contact-form__consent .p-contact-form__consent-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.p-contact-form__consent a {
  color: var(--color-accent);
  text-decoration: underline;
}

.p-contact-form__turnstile {
  display: flex;
  justify-content: center;
}

.p-contact-form__submit {
  display: flex;
  justify-content: center;
}

.p-contact-hero {
  padding-block: var(--space-16) var(--space-8);
}

.p-contact-hero__keyword {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  width: max-content;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}

.p-contact-hero__title {
  margin-block-end: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
}

.p-contact-hero__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.p-cta {
  position: relative;
  padding-block: var(--space-20);
  margin-block-start: 0;
  color: var(--color-text-inverse);
  text-align: center;
  background-color: var(--color-primary);
  background-image: linear-gradient(var(--color-cta-overlay-light), var(--color-cta-overlay-light)), var(--bg-cta-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
.p-cta > * {
  position: relative;
  z-index: 1;
}
.p-cta .c-section__title {
  color: #fff;
  text-align: center;
}

.p-cta__lead {
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.p-cta__action {
  display: flex;
  justify-content: center;
}

:root[data-color-scheme=dark] .p-cta {
  background-image: linear-gradient(var(--color-cta-overlay-dark), var(--color-cta-overlay-dark)), var(--bg-cta-image);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-cta {
    background-image: linear-gradient(var(--color-cta-overlay-dark), var(--color-cta-overlay-dark)), var(--bg-cta-image);
  }
}
.p-footer {
  flex-shrink: 0;
  padding-block: var(--space-12) 0;
  color: #e6edf6;
  background-color: #0a0e14;
}
.p-footer .l-container {
  max-width: var(--container-max);
}

.p-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block-end: var(--space-8);
}

.p-footer__logo {
  font-family: var(--font-heading);
  line-height: 1.15;
  color: #e6edf6;
  letter-spacing: var(--ls-base);
  transition: opacity var(--transition-base);
}
.p-footer__logo a {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  transition: opacity var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-footer__logo a:hover {
    opacity: 0.7;
  }
}
.p-footer__logo a:focus-visible {
  opacity: 0.7;
}

.p-footer__logo-line {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-base);
}

.p-footer__logo-line--2 {
  color: #5dd9cb;
}

.p-footer__nav,
.p-footer__sns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.p-footer__nav a {
  font-size: var(--fs-sm);
  color: #e6edf6;
  white-space: nowrap;
  opacity: 0.85;
  transition: color var(--transition-base), opacity var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-footer__nav a:hover {
    color: var(--color-accent);
    opacity: 1;
  }
}
.p-footer__nav a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.p-footer__sns a {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-2);
  font-size: var(--fs-sm);
  color: #e6edf6;
  opacity: 0.85;
}
@media (any-hover: hover) and (pointer: fine) {
  .p-footer__sns a:hover {
    color: var(--color-accent);
    opacity: 1;
  }
}

.p-footer__sns-icon {
  flex-shrink: 0;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

.p-footer__bottom {
  padding-block: var(--space-5);
  text-align: center;
  border-top: var(--border-width-thin) solid rgba(255, 255, 255, 0.15);
}

.p-footer__copyright {
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: var(--ls-wide);
}

@media screen and (min-width: 1024px) {
  .p-footer__logo-line {
    font-size: var(--fs-xl);
  }
  .p-footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
  .p-footer__inner > .p-footer__brand {
    justify-self: start;
  }
  .p-footer__inner > .p-footer__nav {
    justify-self: center;
  }
  .p-footer__inner > .p-footer__sns {
    justify-self: end;
  }
  .p-footer__nav {
    flex-wrap: nowrap;
    gap: var(--space-3) var(--space-5);
  }
  .p-footer__nav a {
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .p-footer__sns {
    flex-wrap: nowrap;
    gap: var(--space-4);
    align-items: center;
  }
  .p-footer__sns a {
    flex-direction: column;
    gap: var(--space-1);
    min-height: auto;
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
    font-size: var(--fs-xs);
    line-height: 1.2;
    text-align: center;
  }
}
:root[data-color-scheme=dark] .p-footer {
  color: var(--color-text-base);
  background-color: #0a0e14;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-footer {
    color: var(--color-text-base);
    background-color: #0a0e14;
  }
}
.p-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height-sp);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}
.p-header .l-container {
  max-width: var(--container-max);
}

html.is-ready .p-header {
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

:root[data-color-scheme=dark] .p-header {
  background-color: rgba(15, 22, 32, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-header {
    background-color: rgba(15, 22, 32, 0.92);
  }
}
.p-header__inner {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.p-header__inner > .c-color-toggle {
  margin-inline-start: auto;
}

.p-header__logo {
  font-family: var(--font-heading);
  line-height: 1.15;
  color: var(--color-text-base);
  letter-spacing: var(--ls-base);
  transition: opacity var(--transition-base);
}
.p-header__logo a {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  transition: opacity var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-header__logo a:hover {
    opacity: 0.7;
  }
}
.p-header__logo a:focus-visible {
  opacity: 0.7;
}

.p-header__logo-line {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-base);
}

.p-header__logo-line--2 {
  color: var(--color-accent);
}

.p-header__nav {
  display: none;
}

.p-header__contact {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--to-rem));
  min-height: var(--touch-target-min);
  padding-inline: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  white-space: nowrap;
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  transition: background-color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-header__contact:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-accent-hover);
  }
}

:root[data-color-scheme=dark] .p-header__contact {
  color: #fff;
  background-color: #2ba89c;
}
@media (any-hover: hover) and (pointer: fine) {
  :root[data-color-scheme=dark] .p-header__contact:hover {
    color: #fff;
    background-color: #239084;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-header__contact {
    color: #fff;
    background-color: #2ba89c;
  }
}
@media (prefers-color-scheme: dark) and (any-hover: hover) and (pointer: fine) {
  :root:not([data-color-scheme=light]) .p-header__contact:hover {
    color: #fff;
    background-color: #239084;
  }
}
@media screen and (min-width: 1024px) {
  .p-header {
    height: var(--header-height-pc);
  }
  .p-header__inner {
    gap: var(--space-4);
  }
  .p-header__inner > .c-color-toggle {
    margin-inline-start: 0;
  }
  .p-header__logo-line {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
  }
  .p-header__nav {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    margin-inline: auto var(--space-4);
  }
  .p-header__nav a {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-2);
    margin-block-start: 2px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--color-text-base);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-bottom-color var(--transition-base);
  }
}
@media screen and (min-width: 1024px) and (any-hover: hover) and (pointer: fine) {
  .p-header__nav a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}
@media screen and (min-width: 1024px) {
  .p-header__nav a:focus-visible, .p-header__nav a[aria-current=page] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  .p-header__contact {
    height: calc(44 * var(--to-rem));
    font-size: var(--fs-base);
  }
}
@media screen and (min-width: 375px) {
  .p-header__inner {
    gap: var(--space-2);
  }
}
.p-hero {
  position: relative;
  padding-block: var(--space-20) var(--space-24);
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  isolation: isolate;
}

.p-hero--photo {
  background-image: linear-gradient(var(--color-bg-overlay), var(--color-bg-overlay)), image-set(url("../images/top.BFGRNRGa.webp") type("image/webp"), url("../images/top.BsQ4iCHT.jpeg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.p-hero__pill {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #5dd9cb;
  letter-spacing: var(--ls-wide);
  background-color: rgba(93, 217, 203, 0.12);
  border: var(--border-width-thin) solid rgba(93, 217, 203, 0.5);
  border-radius: var(--radius-pill);
}

.p-hero__title {
  margin-block-end: var(--space-4);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  color: #fff;
  letter-spacing: var(--ls-tight);
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-hero__title-accent {
  color: #5dd9cb;
}

.p-hero__sub {
  margin-block-end: var(--space-8);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: var(--ls-base);
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-hero__cta .c-btn--outline {
  --_btn-color: #fff;
  --_btn-bg: rgb(0 0 0 / 28%);
  --_btn-border: rgb(255 255 255 / 70%);
  --_btn-color-hover: #fff;
  --_btn-bg-hover: rgb(0 0 0 / 45%);
  --_btn-border-hover: #fff;
  --_btn-backdrop-filter: blur(2px);
}

.p-hero--no-photo .p-hero__inner {
  grid-template-columns: 1fr;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.p-hero--no-photo .p-hero__cta {
  justify-content: center;
}
.p-hero--no-photo .p-hero__pill {
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .p-hero__cta {
    flex-direction: row;
  }
  .p-hero--no-photo .p-hero__cta {
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  .p-hero {
    padding-block: var(--space-24) var(--space-28);
  }
}
.p-message-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .p-message-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
  }
}

.p-message-grid__photo {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  margin-block-end: var(--space-4);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-bg-code);
  border-radius: var(--radius-md);
}
.p-message-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (min-width: 1024px) {
  .p-message-grid__photo {
    max-width: 100%;
    aspect-ratio: 3/2;
    margin-block-end: 0;
    margin-inline: 0;
  }
}

.p-message-grid__prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.p-message-grid__prose p {
  margin-block-end: var(--space-6);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-message-grid__prose p:last-child {
  margin-block-end: 0;
}
.p-message-grid__prose strong {
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .p-message-grid__prose {
    max-width: none;
    margin-inline: 0;
  }
}

.p-notfound {
  padding-block: var(--space-24);
  text-align: center;
}

.p-notfound__icon {
  display: inline-grid;
  place-items: center;
  inline-size: calc(96 * var(--to-rem));
  block-size: calc(96 * var(--to-rem));
  margin-block-end: var(--space-6);
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}
.p-notfound__icon svg {
  inline-size: calc(56 * var(--to-rem));
  block-size: calc(56 * var(--to-rem));
  stroke-width: var(--icon-stroke-width);
}

.p-notfound__title {
  margin-block-end: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 3.7vw, var(--fs-3xl));
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-notfound__message {
  margin-block-end: var(--space-8);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-notfound__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
@media screen and (min-width: 768px) {
  .p-notfound__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

:root[data-color-scheme=dark] .p-notfound__actions .c-btn--outline {
  --_btn-color: var(--color-fixed-white);
  --_btn-bg: transparent;
  --_btn-border: var(--color-fixed-white);
  --_btn-color-hover: var(--color-fixed-white);
  --_btn-bg-hover: rgb(255 255 255 / 12%);
  --_btn-border-hover: var(--color-fixed-white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-notfound__actions .c-btn--outline {
    --_btn-color: var(--color-fixed-white);
    --_btn-bg: transparent;
    --_btn-border: var(--color-fixed-white);
    --_btn-color-hover: var(--color-fixed-white);
    --_btn-bg-hover: rgb(255 255 255 / 12%);
    --_btn-border-hover: var(--color-fixed-white);
  }
}
.p-privacy__hero {
  padding-block: var(--space-16) var(--space-8);
}

.p-privacy__title {
  margin-block-end: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, var(--fs-4xl));
}

.p-privacy__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
}

.p-privacy__section {
  margin-block-end: var(--space-12);
  scroll-margin-block-start: calc(96 * var(--to-rem));
}

.p-privacy__heading {
  padding-inline-start: var(--space-4);
  font-size: var(--fs-xl);
  text-align: start;
  border-inline-start: 4px solid var(--color-accent);
}
@media screen and (min-width: 768px) {
  .p-privacy__heading {
    text-align: start;
  }
}

.p-privacy__section p {
  margin-block-end: var(--space-3);
  line-height: var(--lh-base);
}

.p-privacy__list {
  margin-block-end: var(--space-3);
  list-style: none;
}
.p-privacy__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block-end: var(--space-2);
  line-height: var(--lh-base);
}
.p-privacy__list li::before {
  position: absolute;
  inset-block-start: calc(3 * var(--to-rem));
  inset-inline-start: 0;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  content: "◆";
}

.p-skills-hero {
  padding-block: var(--space-16);
}

.p-skills-hero__keyword {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  width: max-content;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}

.p-skills-hero__title {
  margin-block-end: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
}

.p-skills-hero__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

#provided-services,
#project-scale,
#tech-stack,
#faq {
  scroll-margin-block-start: calc(96 * var(--to-rem));
}

.p-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-block-start: var(--space-12);
}

.p-thanks {
  padding-block: var(--space-24);
  text-align: center;
}

.p-thanks__icon {
  display: inline-grid;
  place-items: center;
  inline-size: calc(96 * var(--to-rem));
  block-size: calc(96 * var(--to-rem));
  margin-block-end: var(--space-6);
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}
.p-thanks__icon svg {
  inline-size: calc(56 * var(--to-rem));
  block-size: calc(56 * var(--to-rem));
  stroke-width: var(--icon-stroke-width);
}

.p-thanks__title {
  margin-block-end: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 3.7vw, var(--fs-3xl));
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-thanks__message {
  margin-block-end: var(--space-8);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.p-thanks__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
@media screen and (min-width: 768px) {
  .p-thanks__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

:root[data-color-scheme=dark] .p-thanks__actions .c-btn--outline {
  --_btn-color: var(--color-fixed-white);
  --_btn-bg: transparent;
  --_btn-border: var(--color-fixed-white);
  --_btn-color-hover: var(--color-fixed-white);
  --_btn-bg-hover: rgb(255 255 255 / 12%);
  --_btn-border-hover: var(--color-fixed-white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme=light]) .p-thanks__actions .c-btn--outline {
    --_btn-color: var(--color-fixed-white);
    --_btn-bg: transparent;
    --_btn-border: var(--color-fixed-white);
    --_btn-color-hover: var(--color-fixed-white);
    --_btn-bg-hover: rgb(255 255 255 / 12%);
    --_btn-border-hover: var(--color-fixed-white);
  }
}
.p-timeline {
  position: relative;
  padding-inline-start: var(--space-8);
}
.p-timeline::before {
  position: absolute;
  inset-block: 0;
  left: 11px;
  width: 2px;
  content: "";
  background-color: var(--color-border-strong);
}

.p-timeline__item {
  position: relative;
  margin-block-end: var(--space-10);
}
.p-timeline__item::before {
  position: absolute;
  top: 6px;
  left: -27px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  content: "";
  background-color: var(--color-bg-base);
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-pill);
}
.p-timeline__item:last-child {
  margin-block-end: 0;
}

.p-timeline__year {
  margin-block-end: var(--space-1);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
}

.p-timeline__title {
  margin-block-end: var(--space-1);
  font-size: var(--fs-lg);
}

.p-timeline__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

:root[data-color-scheme=dark] .p-timeline__item::before {
  background-color: var(--color-bg-base);
}

.p-work-detail-hero {
  padding-block: var(--space-8) var(--space-0);
}

.p-work-detail-hero__title {
  margin-block-end: var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
  letter-spacing: var(--ls-tight);
}

.p-work-detail-hero__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  margin-block-end: var(--space-12);
  object-fit: cover;
  background-color: var(--color-bg-code);
  border-radius: var(--radius-md);
}

.p-work-detail-meta {
  margin-block: var(--space-8) var(--space-12);
}

.p-work-detail-meta__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-start: var(--border-width-thin) solid var(--color-border);
}
.p-work-detail-meta__row:last-child {
  border-block-end: var(--border-width-thin) solid var(--color-border);
}
@media screen and (min-width: 768px) {
  .p-work-detail-meta__row {
    grid-template-columns: calc(160 * var(--to-rem)) 1fr;
    gap: var(--space-6);
    align-items: baseline;
  }
}

.p-work-detail-meta__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
}

.p-work-detail-meta__value {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-base);
}

.p-work-detail-meta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.p-work-detail-meta__tags li {
  margin: 0;
}

.p-work-detail-meta__url {
  display: inline;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--to-rem));
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color var(--transition-base);
}
@media (any-hover: hover) and (pointer: fine) {
  .p-work-detail-meta__url:hover {
    color: var(--color-accent-hover);
  }
}
.p-work-detail-meta__url:focus-visible {
  color: var(--color-accent-hover);
}

.p-work-detail-meta__note {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-warning);
}

.p-work-detail-body h2 {
  padding-inline-start: var(--space-4);
  margin-block: var(--space-12) var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  border-inline-start: 4px solid var(--color-accent);
}
.p-work-detail-body p {
  margin-block-end: var(--space-4);
  line-height: var(--lh-base);
}
.p-work-detail-body ul {
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-4);
  list-style: none;
}
.p-work-detail-body li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block-end: var(--space-2);
}
.p-work-detail-body li::before {
  position: absolute;
  inset-block-start: calc(3 * var(--to-rem));
  inset-inline-start: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relax);
  color: var(--color-accent);
  content: "◆";
}

.p-work-detail-body__draft-note {
  display: inline-block;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-radius: var(--radius-sm);
}

.p-works-hero {
  padding-block: var(--space-16);
}

.p-works-hero__keyword {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  width: max-content;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-6);
  font-family: var(--font-family-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  background-color: var(--color-accent-bg);
  border-radius: var(--radius-pill);
}

.p-works-hero__title {
  margin-block-end: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-3xl), 4.93vw, var(--fs-4xl));
}

.p-works-hero__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.p-works-list {
  padding-block-end: var(--section-gap-sp);
}

.p-works-list__empty {
  margin-block-start: var(--space-8);
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  text-align: center;
}

.p-center-link {
  margin-block-start: var(--space-8);
  text-align: center;
}

.p-center-link--detail {
  margin-block: var(--space-12);
}

@media (width <= 767px) {
  [data-only-device=md] {
    display: none;
  }
}

@media (width >= 768px) {
  [data-only-device=sm] {
    display: none;
  }
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}