:root{
  /* === Figma Theme Colors === */
  
  /* Primary Colors (Magenta系) */
  --color-primary-90: #F2D0DE;
  --color-primary-80: #E8ABC4;
  --color-primary-70: #DD86AA;
  --color-primary-60: #D36190;
  --color-primary-50: #C83B76;
  --color-primary-40: #BE165C;
  --color-primary-30: #A2134E;
  --color-primary-20: #850F40;
  --color-primary-10: #5B0429;
  --color-primary-5: #360318;
  
  /* Accent Colors (Pink系) */
  --color-accent-90: #FFE1ED;
  --color-accent-80: #FFCADE;
  --color-accent-70: #FFB2CF;
  --color-accent-60: #FF9AC0;
  --color-accent-50: #FF83B2;
  --color-accent-40: #FF6BA3;
  --color-accent-30: #FF5193;
  --color-accent-20: #FA2977;
  --color-accent-10: #DB1661;
  --color-accent-5: #AB134C;
  
  /* Neutral Colors (Gray系) */
  --color-neutral-100: #FFFFFF;
  --color-neutral-90: #FBFBFB;
  --color-neutral-80: #F4F4F4;
  --color-neutral-70: #E0E0E0;
  --color-neutral-60: #C2C2C2;
  --color-neutral-50: #9E9E9E;
  --color-neutral-40: #757575;
  --color-neutral-30: #5C5C5C;
  --color-neutral-20: #474747;
  --color-neutral-10: #333333;
  --color-neutral-5: #1F1F1F;
  
  /* === Semantic Colors === */
  
  /* Background Colors (default = dark) */
  --bg-primary: var(--color-neutral-5);
  --bg-secondary: var(--color-neutral-10);
  --bg-tertiary: var(--color-neutral-20);
  --bg-surface: var(--color-neutral-100);
  
  /* Text Colors */
  --text-primary: var(--color-neutral-80);
  --text-secondary: var(--color-neutral-60);
  --text-muted: var(--color-neutral-50);
  --text-inverse: var(--color-neutral-10);
  
  /* Interactive Colors */
  --interactive-primary: var(--color-accent-20);
  --interactive-hover: var(--color-accent-30);
  --interactive-active: var(--color-accent-10);
  --interactive-disabled: var(--color-neutral-50);
  
  /* Border Colors */
  --border-default: var(--color-neutral-60);
  --border-subtle: var(--color-neutral-70);
  --border-emphasis: var(--color-accent-40);
  
  /* === Legacy Variables (Semantic bridge) === */
  --bg: var(--bg-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--interactive-primary);
  --max:1920px;
  --g:clamp(24px,5vw,80px);
  --nav-padding:clamp(20px,3vw,40px);
  
  /* Spacing System */
  --space-xs: clamp(4px, 0.4vw, 8px);
  --space-sm: clamp(8px, 0.8vw, 12px);
  --space-md: clamp(12px, 1.2vw, 16px);
  --space-lg: clamp(16px, 1.6vw, 24px);
  --space-xl: clamp(24px, 2.4vw, 32px);
  --space-2xl: clamp(32px, 3.2vw, 48px);
  --space-3xl: clamp(48px, 4.8vw, 64px);
  
  /* Shadow System */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Border Radius System */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Figma Typography System */
  --headline-1: clamp(3.8rem, 4.5vw, 5.2rem);
  --headline-2: clamp(3.2rem, 3.8vw, 4.4rem);
  --headline-3: clamp(2.8rem, 3.2vw, 3.8rem);
  --headline-4: clamp(2.4rem, 2.8vw, 3.2rem);
  --headline-5: clamp(2.0rem, 2.4vw, 2.8rem);
  --headline-6: clamp(1.6rem, 2.0vw, 2.4rem);
  --body-1: clamp(17px, 1.7vw, 19px);  /* Figma: 17-19px range */
  --body-2: clamp(14px, 1.4vw, 16px);
  --button-xl: clamp(20px, 2.0vw, 21px);  /* Figma: Button xl - 21 */
  --button-lg: clamp(18px, 1.8vw, 19px);  /* Figma: Button lg - 18/19 */
  --button-md: clamp(16px, 1.6vw, 17px);  /* Figma: Button md - 17 */
  --button-sm: clamp(14px, 1.4vw, 14px);  /* Figma: Button sm - 14 */
  --button-xs: clamp(12px, 1.2vw, 12px);  /* Figma: Button xs - 12 */
  
  /* Extended Figma Typography System */
  --subtitle-3: clamp(14px, 1.4vw, 15px);
  --subtitle-4: clamp(13px, 1.3vw, 14px);
  --headline-7: clamp(1.4rem, 1.8vw, 2.2rem);
  --headline-8: clamp(1.3rem, 1.7vw, 2.0rem);
  --headline-9: clamp(1.2rem, 1.6vw, 1.8rem);
  --headline-10: clamp(1.1rem, 1.5vw, 1.6rem);
  --headline-11: clamp(1.0rem, 1.4vw, 1.5rem);
  --headline-12: clamp(0.9rem, 1.3vw, 1.4rem);
  --headline-13: clamp(0.8rem, 1.2vw, 1.3rem);
  --headline-14: clamp(0.75rem, 1.1vw, 1.2rem);
  --headline-15: clamp(0.7rem, 1.0vw, 1.1rem);
  --headline-16: clamp(0.65rem, 0.9vw, 1.0rem);
  --headline-17: clamp(0.6rem, 0.8vw, 0.9rem);
  --headline-18: clamp(0.55rem, 0.7vw, 0.8rem);
  --headline-19: clamp(0.5rem, 0.6vw, 0.7rem);
  --headline-20: clamp(0.45rem, 0.5vw, 0.6rem);
  --headline-21: clamp(2.2rem, 2.6vw, 3.0rem);
  --headline-22: clamp(2.0rem, 2.4vw, 2.8rem);
  --headline-23: clamp(1.8rem, 2.2vw, 2.6rem);
  --headline-24: clamp(1.6rem, 2.0vw, 2.4rem);
  --headline-25: clamp(1.5rem, 1.9vw, 2.2rem);
  --headline-26: clamp(1.4rem, 1.8vw, 2.0rem);
  --headline-27: clamp(1.3rem, 1.7vw, 1.8rem);
  --headline-28: clamp(1.2rem, 1.6vw, 1.6rem);
  --headline-29: clamp(1.1rem, 1.5vw, 1.4rem);
  --headline-30: clamp(1.0rem, 1.4vw, 1.2rem);
}

/* === Unified Typography Tokens === */
:root{
  /* Hero */
  --hero-catchcopy: var(--headline-1);

  /* Common sections */
  --section-title: var(--headline-4);
  /* rem基準（Figma: 17–19px / 14–16px 換算） */
  --body-text: clamp(1.0625rem, 1.7vw, 1.1875rem);
  --body-small: clamp(0.875rem, 1.4vw, 1rem);

  /* Privacy Policy（rem化） */
  --policy-title: 2.5rem;      /* 40px */
  --policy-h2: 2.5rem;         /* 40px */
  --policy-h3: 1.25rem;        /* 20px */
  --policy-h4: 1rem;           /* 16px */
  --policy-text: 1rem;         /* 16px */
  --policy-lh: 1.625rem;       /* 26-28px帯 */
  --policy-li-lh: 1.5rem;      /* リスト専用行間 */
}

/* Theme overrides: light mode mapping */
html[data-theme="light"]{
  --bg-primary: var(--color-neutral-90);
  --bg-secondary: var(--color-neutral-80);
  --bg-tertiary: var(--color-neutral-70);
  --bg-surface: var(--color-neutral-100);

  --text-primary: var(--color-neutral-5);
  --text-secondary: var(--color-neutral-30);
  --text-muted: var(--color-neutral-50);
  --text-inverse: var(--color-neutral-100);

  --interactive-primary: var(--color-accent-20);
  --interactive-hover: var(--color-accent-10);
  --interactive-active: var(--color-accent-5);
  --interactive-disabled: var(--color-neutral-50);

  --border-default: var(--color-neutral-50);
  --border-subtle: var(--color-neutral-60);
  --border-emphasis: var(--color-accent-20);
}
*{box-sizing:border-box}
html,body{height:100%}
a{color:var(--color-text-linkcolor);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--color-text-linkcolor)}
a:visited{color:var(--color-text-linkcolor)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP","Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,".SFNSDisplay-Regular","Hiragino Sans","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,system-ui,"メイリオ",Urbanist,sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  padding-top:100px;
  letter-spacing:0.05em;
  animation: background-shift 60s ease-in-out infinite;
}

/* ライトモードではダーク系の背景アニメを無効化し、明色背景を保持 */
html[data-theme="light"] body{
  background:var(--bg);
  animation: background-shift-light 60s ease-in-out infinite;
}

/* ライト用のごく僅かな背景アニメーション */
@keyframes background-shift-light{
  0%   { background-color: var(--color-background-default); }
  25%  { background-color: #ffffff; }
  50%  { background-color: #f6f6f6; }
  75%  { background-color: #ffffff; }
  100% { background-color: var(--color-background-default); }
}
.wrap{max-width:var(--max);margin:0 auto;padding:var(--g);position:relative;z-index:2}
.nav-wrap{max-width:var(--max);margin:0 auto;padding:var(--nav-padding);position:relative;z-index:2}

/* ===== Navigation ===== */
.main-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in oklab, var(--color-background-default) 92%, transparent);backdrop-filter:blur(10px);height:100px;width:100%}
.nav-content{display:flex;align-items:center;justify-content:space-between;padding:0;min-height:60px;height:60px}
.nav-logo{display:flex;align-items:center}
.nav-logo-img{width:clamp(120px,15vw,180px);height:auto}
.nav-menu{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--space-md)}
.nav-menu a{color:var(--muted);text-decoration:none;font-size:clamp(12px,1.2vw,14px);font-weight:400;transition:color 0.2s ease}
.nav-menu a:hover{color:var(--ink)}

/* Color Mode Switcher */
.color-mode-switcher{display:flex;align-items:center;margin-left:0}
.color-mode-button{
  appearance:none;border:0;background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-full);
  padding:0;line-height:0;
  cursor:pointer;transition:color .2s, background .2s;
  background-position:center; background-repeat:no-repeat; background-size:16px 16px;
}
.color-mode-button:hover{color:var(--ink); background:color-mix(in oklab, var(--color-text-default) 12%, transparent)}
.color-mode-button:active{background:color-mix(in oklab, var(--color-text-default) 18%, transparent)}
.color-mode-button:focus{outline:none}

/* テーマ別アイコン（currentColorではなく背景画像で切替） */
html[data-theme="dark"] .color-mode-button{ background-image:url('/images/icons/lightMode.svg'); }
html[data-theme="light"] .color-mode-button{ background-image:url('/images/icons/darkMode.svg'); }

/* Language Switcher */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

/* 自動区切りは無効化（HTMLの .nav-divider を使用） */
.language-switcher .current-lang::after { content:''; }

/* ナビ区切り要素 */
.nav-divider{ color: var(--color-text-default); opacity:.4; padding: 0 4px; }

.language-switcher a,
.language-switcher .current-lang {
  font-size: var(--button-sm);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-transform: lowercase;
}

/* 固定区切り: / は非クリック要素 */
.lang-sep{display:inline-block;padding: 0 4px;opacity:.8;user-select:none}

.language-switcher a { color: var(--muted); }
.language-switcher a:hover { color: var(--ink); background:color-mix(in oklab, var(--color-text-default) 12%, transparent) }

/* 選択状態の視認性を控えめに */
.language-switcher .current-lang { color: var(--ink); background: transparent; border: 1px solid transparent; }

/* ハンバーガーメニューボタン */
.hamburger{display:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;background:transparent;border:none;cursor:pointer;padding:0;z-index:101;position:relative}
.hamburger-line{width:100%;height:3px;background:var(--ink);transition:all 0.3s ease;transform-origin:center}
/* active時は中央に重ねて完全なXを描く */
.hamburger.active .hamburger-line{position:absolute;left:0;top:50%;}
.hamburger.active .hamburger-line:nth-child(1){transform:translateY(-50%) rotate(45deg)}
.hamburger.active .hamburger-line:nth-child(2){opacity:0}
.hamburger.active .hamburger-line:nth-child(3){transform:translateY(-50%) rotate(-45deg)}

/* スマホ用ナビゲーション */
@media (max-width:834px){
  :root{
    /* Hero */
    --hero-catchcopy: clamp(2.2rem, 6.5vw, 3.2rem);

    /* Common sections（rem化・やや縮小） */
    --section-title: var(--headline-5);
    --body-text: clamp(0.8125rem, 1.3vw, 0.9375rem);
    --body-small: clamp(0.75rem, 1.2vw, 0.8125rem);

    /* Privacy Policy（さらに小さく／本文はトップと同一） */
    --policy-title: 1.5rem;
    --policy-h2: 1.5rem;
    --policy-h3: 1rem;
    --policy-h4: 0.875rem;
    --policy-text: var(--body-text);
    --policy-lh: 1.5rem;
    --policy-li-lh: 1.4rem;
  }
  .main-nav{height:60px}
  .nav-content{min-height:60px;height:60px}
  body{padding-top:60px}
  .nav-wrap{padding:0 var(--nav-padding)}
  .nav-logo-img{height:36px;width:auto;display:block}
  .hamburger{display:flex}
  .hamburger{
    width:26px;height:26px;justify-content:center;gap:6px;position:relative;
  }
  .hamburger::after{content:"";position:absolute;inset:-9px}
  .hamburger-line{height:1.5px;border-radius:1px;background:var(--text-secondary)}
  .nav-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:color-mix(in oklab, var(--color-background-default) 98%, transparent);
    backdrop-filter:blur(1.25rem);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:var(--space-2xl);
    transition:right 0.3s ease;
    padding:var(--space-3xl) 0 var(--space-xl);
    z-index:99;
    overflow:hidden;
  }
  .nav-menu.active{right:0}
  .nav-menu a{font-size:1.125rem;color:var(--ink);font-weight:500}
  .nav-menu a:hover{color:var(--accent)}
  /* モバイルでは縦線の区切りを非表示 */
  .nav-divider{display:none}
  /* 言語切替を横並び「jp / en」に（固定の区切り要素を使用） */
  .language-switcher{flex-direction:row;align-items:center;gap:8px}
  .language-switcher .current-lang::before,
  .language-switcher .current-lang::after{content:''}
  .language-switcher a::before{content:''}
  
  /* モバイル版言語切り替え調整（横並びを維持） */
  .language-switcher {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
  
  /* モバイル向けテキスト調整 */
  p{ font-size:var(--body-text); line-height:1.75; margin:0 0 1.2em; word-break:normal; overflow-wrap:normal; hyphens:auto; }
  .postscript p{ font-size:var(--body-small); line-height:1.6; }
}
@media (max-width:375px){
  .nav-logo-img{height:32px;width:auto}
  .nav-menu{width:100%;right:-100%}
  .hamburger{width:24px;height:24px;gap:5px}
  .hamburger::after{inset:-10px}
}

/* ロゴ */
header{margin-bottom:clamp(24px,4vw,48px);}
.logo{display:flex;align-items:center;gap:var(--space-md);font-weight:700}
.logo-img{width:160px;height:auto}
@media (min-width:835px){
  .logo-img{width:220px}
}

/* レイアウト */
.cols{
  display:grid;
  grid-template-columns:minmax(20rem,1fr) 1fr;
  align-items:start;
  gap:var(--space-3xl);
  height: clamp(600px, 80vh, 600px);
  max-height: 600px;
  overflow: visible;
}
.catchcopy{
  font-weight:50;
  line-height:1.1;
  font-size:var(--hero-catchcopy);
  letter-spacing:0.15em;
  text-transform:uppercase;
  max-width: 22ch;
  word-break: keep-all;
  text-wrap:balance;
  hyphens:auto;
  opacity:0.95;
  word-spacing: 0.05em;
}

/* Figma Typography Classes */
.headline-1 { font-size: var(--headline-1); font-weight: 700; line-height: 1.1; }
.headline-1-regular { font-size: var(--headline-1); font-weight: 400; line-height: 1.1; }
.headline-2 { font-size: var(--headline-2); font-weight: 700; line-height: 1.2; }
.headline-2-regular { font-size: var(--headline-2); font-weight: 400; line-height: 1.2; }
.headline-3 { font-size: var(--headline-3); font-weight: 700; line-height: 1.2; }
.headline-3-regular { font-size: var(--headline-3); font-weight: 400; line-height: 1.2; }
.headline-4 { font-size: var(--headline-4); font-weight: 700; line-height: 1.3; }
.headline-4-regular { font-size: var(--headline-4); font-weight: 400; line-height: 1.3; }
.headline-5 { font-size: var(--headline-5); font-weight: 700; line-height: 1.3; }
.headline-5-regular { font-size: var(--headline-5); font-weight: 400; line-height: 1.3; }
.headline-6 { font-size: var(--headline-6); font-weight: 700; line-height: 1.4; }
.headline-6-regular { font-size: var(--headline-6); font-weight: 400; line-height: 1.4; }

.body-1 { font-size: var(--body-1); font-weight: 400; line-height: 1.7; }
.body-1-bold { font-size: var(--body-1); font-weight: 700; line-height: 1.7; }
.body-2 { font-size: var(--body-2); font-weight: 400; line-height: 1.6; }
.body-2-bold { font-size: var(--body-2); font-weight: 700; line-height: 1.6; }

.button-lg { font-size: var(--button-lg); font-weight: 500; }
.button-md { font-size: var(--button-md); font-weight: 500; }
.button-sm { font-size: var(--button-sm); font-weight: 500; }
.button-xs { font-size: var(--button-xs); font-weight: 500; }

/* Figma Checkbox Component - 正確なFigma仕様 */
.checkbox-component {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-default);
  user-select: none;
  line-height: 1.36;
}

/* Checkbox input - Figma正確仕様 */
.checkbox-component input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  background: var(--color-background-default);
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 2px;
}

/* Checked state - Figma色 #be165c */
.checkbox-component input[type="checkbox"]:checked {
  background: var(--color-background-primary-action-enabled);
  border-color: var(--color-background-primary-action-enabled);
}

/* Check mark - Figmaスタイル */
.checkbox-component input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Hover state */
.checkbox-component:hover input[type="checkbox"]:not(:checked) {
  border-color: var(--color-border-emphasis);
  opacity: 0.8;
}

/* Focus state */
.checkbox-component input[type="checkbox"]:focus {
  outline: 2px solid var(--color-border-emphasis);
  outline-offset: 2px;
}

/* Label text */
.checkbox-component span {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  line-height: 24px;
  letter-spacing: 0.8px;
}

/* Subtitle styles */
.subtitle-1 { font-size: clamp(18px, 1.8vw, 20px); font-weight: 500; line-height: 1.5; }
.subtitle-2 { font-size: clamp(16px, 1.6vw, 18px); font-weight: 500; line-height: 1.5; }
.subtitle-3 { font-size: var(--subtitle-3); font-weight: 500; line-height: 1.5; }
.subtitle-4 { font-size: var(--subtitle-4); font-weight: 500; line-height: 1.5; }

/* Extended Headline styles */
.headline-7 { font-size: var(--headline-7); font-weight: 700; line-height: 1.4; }
.headline-7-regular { font-size: var(--headline-7); font-weight: 400; line-height: 1.4; }
.headline-8 { font-size: var(--headline-8); font-weight: 700; line-height: 1.4; }
.headline-8-regular { font-size: var(--headline-8); font-weight: 400; line-height: 1.4; }
.headline-9 { font-size: var(--headline-9); font-weight: 700; line-height: 1.4; }
.headline-9-regular { font-size: var(--headline-9); font-weight: 400; line-height: 1.4; }
.headline-10 { font-size: var(--headline-10); font-weight: 700; line-height: 1.4; }
.headline-10-regular { font-size: var(--headline-10); font-weight: 400; line-height: 1.4; }
.headline-11 { font-size: var(--headline-11); font-weight: 700; line-height: 1.4; }
.headline-11-regular { font-size: var(--headline-11); font-weight: 400; line-height: 1.4; }
.headline-12 { font-size: var(--headline-12); font-weight: 700; line-height: 1.4; }
.headline-12-regular { font-size: var(--headline-12); font-weight: 400; line-height: 1.4; }
.headline-13 { font-size: var(--headline-13); font-weight: 700; line-height: 1.4; }
.headline-13-regular { font-size: var(--headline-13); font-weight: 400; line-height: 1.4; }
p{margin:0 0 1em;color:var(--muted);font-size:var(--body-text);line-height:1.7;word-break:normal;overflow-wrap:normal;}
.postscript{margin-top:clamp(28px,6vw,56px)}
.postscript p{font-size:clamp(12px,1.2vw,13.5px); color:var(--muted)}

/* ===== 背景の円（テキストの背面） ===== */
.stage{
  position:relative;
  min-height: clamp(380px, 70vw, 1000px);
  overflow:hidden;        /* 横スクロールを防ぐ */
  display:flex;
  align-items:center;
  justify-content:center;
}
.particles{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;        /* 横スクロールを防ぐ */
  z-index:0;              /* テキストより背面へ */
}
.orb{
  position:absolute;
  border-radius:50%;
  will-change:transform;
  transform:translate3d(0,0,0);
  pointer-events:auto;           /* 波紋のポインターイベントを拾う */
  overflow:visible;
  /* ripple 用の座標（デフォルトは中心） */
  --rx:50%;
  --ry:50%;
}
/* 円の波紋（擬似要素） */
.orb::after{
  content:"";
  position:absolute;
  left:var(--rx);
  top:var(--ry);
  width:32%;
  height:32%;
  transform:translate(-50%,-50%) scale(0.8);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.16) 35%,
    rgba(255,255,255,0.00) 70%);
}
@keyframes orb-ripple {
  0%   { opacity:.32; transform:translate(-50%,-50%) scale(0.7); }
  60%  { opacity:.18; }
  100% { opacity:0;    transform:translate(-50%,-50%) scale(3.3); }
}
.orb.is-rippling::after{ animation:orb-ripple 820ms ease-out; }
/* 大きい円（右上寄り - 上下位置調整） */
.orb--big{
  width:min(45vw,350px);
  height:min(45vw,350px);
  right:clamp(5vw,8vw,12vw);
  top:clamp(25vh,30vh,35vh);
  background:#e8e8e8; /* keep animation-related color as-is (excluded) */
}
/* 小さい円（大きい円に近い位置・右下寄り - 上下位置調整） */
.orb--small{
  width:min(28vw,180px);
  height:min(28vw,180px);
  right:clamp(15vw,20vw,25vw);
  top:clamp(45vh,50vh,55vh);
  background:#c9c9c9; /* keep animation-related color as-is (excluded) */
  animation-delay:.6s;
}

/* ===== Contact ===== */
.contact{padding:clamp(32px,6vw,80px) 0}
.contact-title{margin:0 0 clamp(16px,2.4vw,24px);font-size:var(--headline-4);font-weight:50;letter-spacing:0.12em;text-transform:uppercase;opacity:0.95}
/* ===== Services ===== */
.services{padding:clamp(24px,6vw,72px) 0}
.services-title{margin:0 0 clamp(12px,2.2vw,20px);font-size:var(--section-title);font-weight:50;letter-spacing:0.12em;text-transform:uppercase;opacity:0.95}
.service-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.service-list li{color:var(--muted);font-size:var(--body-text)}
/* EN-only: avoid overlap of Service heading with previous section */
html[lang="en"] .services{padding-top:clamp(40px,7vw,96px)}
@media (max-width:375px){
  .wrap{padding:clamp(12px,3vw,20px)}
  .service-list{grid-template-columns:1fr}
  .catchcopy{
    font-size:clamp(1.8rem,5.5vw,2.8rem);
    max-width:18ch;
    line-height:1.15;
    letter-spacing:0.06em;
    word-spacing:0.015em;
  }
  .stage{
    min-height:clamp(250px,60vw,500px);
    padding:clamp(6px,1.5vw,12px);
  }
  .orb--big{
    width:min(35vw,180px); height:min(35vw,180px);
    right:clamp(5vw,8vw,12vw); top:12%;
    transform:none;
  }
  .orb--small{
    width:min(20vw,100px); height:min(20vw,100px);
    right:clamp(15vw,18vw,22vw); top:35%;
    transform:none;
  }
  
  /* 小画面向けテキスト調整 */
  p{
    font-size:clamp(13px,1.8vw,15px);
    line-height:1.8;
    margin:0 0 1.3em;
  }
  .postscript p{
    font-size:clamp(10px,1.2vw,11.5px);
    line-height:1.7;
  }
}

/* より小さな画面での調整 */
@media (max-width:480px){
  .wrap{padding:clamp(10px,2.5vw,16px)}
  .catchcopy{
    font-size:clamp(1.6rem,5vw,2.4rem);
    max-width:16ch;
    line-height:1.1;
    letter-spacing:0.05em;
    word-spacing:0.01em;
  }
  .stage{
    min-height:clamp(200px,55vw,450px);
    padding:clamp(4px,1vw,8px);
  }
  .orb--big{
    width:min(30vw,150px); height:min(30vw,150px);
    right:clamp(3vw,6vw,10vw); top:10%;
    transform:none;
  }
  .orb--small{
    width:min(18vw,90px); height:min(18vw,90px);
    right:clamp(12vw,15vw,18vw); top:32%;
    transform:none;
  }
  
  /* 超小画面向けテキスト調整 */
  p{
    font-size:clamp(12px,1.6vw,14px);
    line-height:1.9;
    margin:0 0 1.4em;
    word-break:normal;
    overflow-wrap:normal;
  }
  .profile-carbon{
    font-size:clamp(10px,1vw,12px);
  }
  .postscript p{
    font-size:clamp(9px,1vw,10.5px);
    line-height:1.8;
  }
}
/* ===== Work ===== */
.work{padding:clamp(24px,6vw,72px) 0}
.work-title{margin:0 0 clamp(12px,2.2vw,20px);font-size:var(--section-title);font-weight:50;letter-spacing:0.12em;text-transform:uppercase;opacity:0.95}
.work p{color:var(--muted);font-size:var(--body-text);line-height:1.7;word-break:normal;overflow-wrap:normal;}
/* Work: Logo grid (Figma準拠) */
.work-logos{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:24px;align-items:center;justify-items:center;margin:16px 0 0;padding:0;list-style:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.work-logos li{position:relative}
.work-logos img{max-width:180px;height:auto;opacity:1;-webkit-user-drag:none;user-select:none;pointer-events:none}
/* 画像保存抑止のオーバーレイ（右クリック/長押し等を軽減） */
.work-logos .no-save::before{content:"";position:absolute;inset:0;background:transparent;pointer-events:auto}
/* DATAFLUCTロゴの背景（Figma準拠） */
.work-logos .logo-bg{display:inline-flex;align-items:center;justify-content:center;background:#fbfbfb;border:0;border-radius:2px;padding:8px 16px}
@media (max-width:834px){.work-logos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.work-logos{grid-template-columns:1fr}}

/* Work logos: smaller on mobile with more spacing */
@media (max-width:834px){
  .work-logos{gap:20px}
  .work-logos img{max-width:110px}
  .work-logos .logo-bg{padding:4px 10px}
}
@media (max-width:480px){
  .work-logos{gap:16px}
  .work-logos img{max-width:90px}
  .work-logos .logo-bg{padding:3px 8px}
}

/* Light mode overrides for Work logos */
html[data-theme="light"] .work-logos .logo-bg{background:transparent;border:0}
html[data-theme="light"] .work-logos img[alt="ロゼッタ"],
html[data-theme="light"] .work-logos img[alt="Rozetta"]{filter:brightness(0) saturate(100%)}

/* Work: Texts from Figma */
.work-subtitle{margin:8px 0 12px;color:var(--muted);font-size:var(--body-text)}
.work-note{margin:16px 0 24px;color:var(--muted);font-size:var(--body-text)}
.work-note a{color:var(--color-text-linkcolor);text-decoration:none}
.work-note a:hover{color:var(--color-text-linkcolor)}

/* Work: Cards grid */
.work-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,24px);margin-top:24px}
.work-card{background:transparent;border:0;border-radius:0;padding:16px 0}
.work-card-title{margin:0 0 8px;font-size:clamp(16px,1.8vw,18px);font-weight:400;color:var(--ink);line-height:1.5;min-height:calc(1.5em * 3)}
.work-card-client{margin:0 0 6px;font-size:clamp(12px,1.4vw,14px);color:var(--muted)}
.work-card-desc{margin:0;font-size:clamp(12px,1.4vw,14px);color:var(--muted);line-height:1.7}
.work-card-meta{margin-top:8px;font-size:clamp(12px,1.3vw,13px);color:var(--muted);opacity:.9}
@media (max-width:1024px){.work-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.work-cards{grid-template-columns:1fr}}
/* ===== Company ===== */
.company{padding:clamp(24px,6vw,72px) 0}
.company-title{margin:0 0 clamp(16px,2.4vw,24px);font-size:var(--section-title);font-weight:50;letter-spacing:0.12em;text-transform:uppercase;opacity:0.95}
.company-info{margin:0}
.company-details{display:grid;gap:clamp(8px,1.5vw,12px);margin:0;padding:0}
.company-details dt{color:var(--ink);font-size:var(--body-text);font-weight:300;margin:0;word-break:normal}
.company-details dd{color:var(--muted);font-size:var(--body-text);margin:0;margin-left:clamp(8px,1.5vw,12px);line-height:1.6;word-break:normal;overflow-wrap:normal;}

/* ===== Profile ===== */
.profile{padding:clamp(24px,6vw,72px) 0}
.profile-title{margin:0 0 clamp(16px,2.4vw,24px);font-size:var(--section-title);font-weight:50;letter-spacing:0.12em;text-transform:uppercase;opacity:0.95}
.profile-content{margin:0}
.profile-header{display:flex;align-items:center;gap:clamp(12px,2vw,20px);margin-bottom:clamp(12px,2vw,16px)}
.profile-image{width:clamp(60px,8vw,80px);height:clamp(60px,8vw,80px);border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.1)}
.profile-name-section{display:flex;flex-direction:column;gap:4px}
.profile-name{margin:0;font-size:clamp(22px,3vw,28px);font-weight:50;color:var(--ink);letter-spacing:0.1em;opacity:0.95}
.profile-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-linkedin{display:flex;align-items:center;gap:6px;font-size:clamp(12px,1.4vw,14px);color:var(--muted);text-decoration:none;transition:color 0.2s ease}
.profile-linkedin:hover{color:var(--ink)}
.profile-linkedin svg{flex-shrink:0}
.profile-carbon{font-size:var(--body-small);color:var(--muted)}
.profile-carbon a{color:var(--muted);text-decoration:none;transition:color 0.2s ease}
.profile-carbon a:hover{color:var(--ink)}
/* プロフィールセクション内のすべてのリンクを統一 */
.profile a{color:var(--color-text-linkcolor);text-decoration:none;transition:color 0.2s ease}
.profile a:hover{color:var(--color-text-linkcolor)}
.profile-subtitle{margin:4px 0 0;font-size:clamp(12px,1.4vw,14px);color:var(--muted);font-weight:400}
.profile p{color:var(--muted);font-size:var(--body-text);margin:0 0 0.8em;line-height:1.8;word-break:normal;overflow-wrap:normal;white-space:normal;}
.skills{margin-top:var(--space-lg);padding:var(--space-md);background:rgba(255,255,255,0.02);border-radius:var(--radius-md)}
.skills h4{margin:0 0 8px;font-size:clamp(14px,1.8vw,16px);font-weight:300;color:var(--ink)}
.skills p{margin:0;color:var(--muted);font-size:clamp(13px,1.4vw,14.5px)}
.skills ul{margin:0;padding-left:20px;color:var(--muted);font-size:clamp(13px,1.4vw,14.5px)}
.skills li{margin-bottom:4px}
@media (max-width:375px){
  .profile-header{flex-direction:column;text-align:center;gap:8px}
  .profile-links{
    justify-content:center;
    flex-direction:column;
    gap:4px;
    white-space:normal;
  }
  .profile-carbon{
    white-space:nowrap;
    font-size:clamp(11px,1.2vw,13px);
  }
  .profile p{
    font-size:clamp(13px,1.8vw,15px);
    line-height:1.8;
    margin:0 0 0.8em;
    word-break:normal;
    overflow-wrap:normal;
    text-align:left;
    white-space:normal;
  }
  .skills{
    margin-top:clamp(20px,3vw,28px);
  }
  .skills h4{
    font-size:clamp(13px,1.6vw,15px);
  }
  .skills ul{
    font-size:clamp(12px,1.4vw,13.5px);
  }
}
/* custom form */
.contact-form{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  align-self:stretch;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.04);
  box-shadow:var(--shadow-xl);
  padding:24px 24px 32px;
}
.contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);width:100%}
.contact-form .field{display:flex;flex-direction:column;gap:var(--space-xs);width:100%}
.contact-form .label{font-size:13px;color:var(--muted)}
.contact-form input,.contact-form textarea{
  appearance:none;outline:none;border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.2);color:var(--ink);
  border-radius:var(--radius-md);padding:var(--space-md);font-size:0.9375rem;
  width:100%;
  box-sizing:border-box;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(255,255,255,0.35)}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-form .actions{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md);width:100%}
.contact-form .btn{
  appearance:none;border:0;border-radius:var(--radius-full);padding:var(--space-sm) var(--space-lg);font-weight:700;
  background:var(--color-background-primary-action-enabled);color:var(--color-text-primary-action);cursor:pointer;
  transition: all 0.3s ease;
}

.contact-form .btn:disabled{
  background:var(--color-background-secondary-action-enabled);
  color:var(--color-text-secondary-action);
  cursor:not-allowed;
  opacity:0.6;
}
.contact-form .btn:hover{filter:brightness(1.06)}
/* .contact-form .note{font-size:12px;color:var(--muted)} */
.contact-form .form-feedback{margin-top:10px;font-size:14px;color:#f4d03f;width:100%;display:none;align-items:center;gap:6px}
.contact-form .form-feedback:not(:empty){display:flex}
.contact-form .form-feedback::before{content:"⚠️";flex-shrink:0;font-size:16px}
@media (max-width:834px){
  .contact-form .grid{grid-template-columns:1fr}
  /* スマホではフォーム背景を不透明にして背面の円を透過させない */
  .contact-form{background:var(--bg)}
}

/* ===== Contact: Theme-specific overrides ===== */
/* Dark mode: keep subtle borders and dark translucent background */
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea{
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink);
}
html[data-theme="dark"] .contact-form input:focus,
html[data-theme="dark"] .contact-form textarea:focus{
  border-color: rgba(255,255,255,0.25);
}

/* Light mode: use white fields with neutral borders */
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea{
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form textarea:focus{
  border-color: var(--border-emphasis);
}

/* 呼吸アニメ（上品にごく少しだけ） */
@keyframes orb-lifelike {
  0%   { transform: scale(1) translateY(0); opacity: 0.9; }
  20%  { transform: scale(1.004) translateY(-0.6%); opacity: 1; }
  40%  { transform: scale(0.996) translateY(0.6%); opacity: 0.96; }
  60%  { transform: scale(1.006) translateY(-0.3%); opacity: 1; }
  80%  { transform: scale(0.997) translateY(0.3%); opacity: 0.93; }
  100% { transform: scale(1) translateY(0); opacity: 0.9; }
}
/* 呼吸アニメはアクティブ時のみ */
.orbs.is-active .orb { animation: orb-lifelike 6s ease-in-out infinite; }

/* マウスアウト時の戻りをスムーズに */
.orbs.is-relaxing .orb { transition: transform .45s cubic-bezier(.22,.61,.36,1); }

/* 背景色の時間変化アニメーション */
@keyframes background-shift {
  0%   { background-color: var(--color-background-default); }
  25%  { background-color: #0e1619; }
  50%  { background-color: #0f1a20; }
  75%  { background-color: #101e26; }
  100% { background-color: var(--color-background-default); }
}

/* ===== Page Load Animations ===== */
/* 初期状態で要素を非表示 */
.animate-on-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-load.show {
  opacity: 1;
  transform: translateY(0);
}

/* キャッチコピーのタイプライター効果 */
.catchcopy .typewriter-char {
  opacity: 0;
  animation: typewriter-reveal 0.1s ease-out forwards;
}

@keyframes typewriter-reveal {
  to {
    opacity: 1;
  }
}

/* セクションのスライドイン効果 */
.section-slide-in {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-slide-in.show {
  opacity: 1;
  transform: translateX(0);
}

/* パーティクルエリアのフェードイン */
.stage {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

.stage.show {
  opacity: 1;
}

/* ナビゲーションのフェードイン（トップページのみ） */
.home .main-nav {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.home .main-nav.show {
  opacity: 1;
}

/* スクロール連動アニメーション */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* セクションタイトルの特別なアニメーション */
.services-title,
.work-title,
.profile-title,
.company-title,
.contact-title {
  position: relative;
  display: inline-block;
}

.services-title::after,
.work-title::after,
.profile-title::after,
.company-title::after,
.contact-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.8s ease-out;
}

.services-title.visible::after,
.work-title.visible::after,
.profile-title.visible::after,
.company-title.visible::after,
.contact-title.visible::after {
  width: 100%;
}

/* モーション配慮 */
@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .orb::after{animation:none}
  .orbs.is-relaxing .orb{transition:none}
  body{animation:none}
  
  /* アニメーション無効化 */
  .animate-on-load,
  .section-slide-in,
  .stage,
  .main-nav,
  .scroll-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .typewriter-char {
    opacity: 1 !important;
    animation: none !important;
  }
  
  .services-title::after,
  .work-title::after,
  .profile-title::after,
  .company-title::after,
  .contact-title::after {
    width: 100% !important;
    transition: none !important;
  }
}

/* モバイル調整 */
@media (max-width:834px){
  .wrap{padding:clamp(16px,4vw,24px); overflow-x:hidden}
  .cols{
    display:block;
    grid-template-columns:none;
    height: clamp(500px, 70vh, 750px);
    max-height: 750px;
    overflow: visible;
  }
  .catchcopy{
    font-size:clamp(2.2rem,6.5vw,3.2rem);
    max-width:20ch;
    line-height:1.2;
    margin-bottom:clamp(16px,3vw,24px);
    word-wrap:break-word;
    overflow-wrap:break-word;
    letter-spacing:0.08em;
    word-spacing:0.02em;
  }
  .stage{
    min-height:clamp(300px,70vw,600px); 
    margin-top:clamp(16px,3vw,24px);
    padding:clamp(8px,2vw,16px);
    width:100%;
    position:relative;
    overflow:hidden;
  }
  .orb--big{
    width:min(40vw,200px); height:min(40vw,200px);
    right:clamp(5vw,8vw,12vw); top:15%;
    transform:none;
  }
  .orb--small{
    width:min(25vw,120px); height:min(25vw,120px);
    right:clamp(15vw,18vw,22vw); top:40%;
    transform:none;
  }
}

/* 中サイズデスクトップでの調整 */
@media (max-width:1440px) and (min-width:835px){
  .orb--big{
    width:min(40vw,320px);
    height:min(40vw,320px);
    right:clamp(5vw,8vw,12vw);
    top:clamp(23vh,26vh,29vh);
  }
  .orb--small{
    width:min(25vw,160px);
    height:min(25vw,160px);
    right:clamp(18vw,22vw,26vw);
    top:clamp(43vh,47vh,51vh);
  }
}

/* ワイド画面での位置調整（上下位置のみ調整） */
@media (min-width:1000px){
  .orb--small{ 
    right:clamp(18vw,22vw,26vw); 
    top:clamp(44vh,48vh,52vh);
  }
}
@media (min-width:1200px){
  .orb--small{ 
    right:clamp(16vw,20vw,24vw); 
    top:clamp(45vh,49vh,53vh);
  }
}
@media (min-width:1440px){
  .orb--small{ 
    right:clamp(15vw,18vw,22vw); 
    top:clamp(46vh,50vh,54vh);
  }
}

/* 大画面でのキャッチコピー調整 */
@media (min-width:1600px){
  .catchcopy{
    font-size: clamp(3.5rem, 3.5vw, 4.2rem);
    max-width: 32ch;
    letter-spacing: 0.1em;
  }
}
@media (min-width:1920px){
  .catchcopy{
    font-size: var(--headline-1);
    max-width: 36ch;
    letter-spacing: 0.08em;
  }
  
  /* 1920px以上での最適化 */
  .wrap {
    max-width: 1920px;
    padding: clamp(40px, 4vw, 80px);
  }
  
  .cols {
    gap: clamp(56px, 6vw, 120px);
  }
}


/* motion=off のときは CSS アニメーションと transform を強制停止 */
body[data-motion="off"] .orb {
  animation: none;
  transition: none;
  transform: none;
}

/* ===== Footer ===== */
.site-footer{padding:clamp(24px,4vw,36px) 0;color:var(--muted)}
.site-footer small{font-size:12px}
.environmental-info{margin-bottom:clamp(12px,2vw,16px)}
.environmental-info p{font-size:clamp(12px,1.2vw,13.5px);color:var(--muted)}
.environmental-info a{color:var(--color-text-linkcolor);text-decoration:none;transition:color 0.2s ease}
.environmental-info a:hover{color:var(--color-text-linkcolor)}
.environmental-info a:visited{color:var(--color-text-linkcolor)}
.support-info{margin-top:8px;font-size:clamp(11px,1.1vw,12.5px);color:var(--muted);opacity:0.8}

/* ===== Privacy Policy Page ===== */
.privacy-policy-page {
  background: var(--color-background-default);
  color: var(--ink);
  font-family: Urbanist, "Noto Sans JP", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, ".SFNSDisplay-Regular", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, system-ui, "メイリオ", sans-serif;
}

.privacy-policy-main {
  padding-bottom: 60px;
  min-height: 100vh;
}

.page-header {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--g) var(--g) clamp(12px, 2.5vw, 40px) var(--g);
}

.page-header .privacy-section {
  max-width: 100%;
  margin: 0;
  margin-bottom: 0;
}

.page-title {
  font-size: var(--policy-title);
  font-weight: 250;
  font-family: "Urbanist", "Noto Sans JP", sans-serif;
  line-height: 1.2;
  letter-spacing: 4.8px;
  margin-bottom: 28px;
  color: var(--color-text-default);
  text-align: left;
}

.page-subtitle {
  font-size: 1rem;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.625rem;
  letter-spacing: 0.8px;
  color: var(--color-text-subtle);
  margin: 0;
  text-align: left;
}

.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--g);
}

.privacy-section {
  max-width: 100%;
  margin: 0;
  margin-bottom: 40px;
}

.privacy-section h2 {
  font-size: var(--policy-h2);
  font-weight: 250;
  font-family: "Urbanist", "Noto Sans JP", sans-serif;
  line-height: 1.3;
  letter-spacing: 4.8px;
  margin-bottom: 12px;
  color: var(--color-text-default);
}

.privacy-section h3 {
  font-size: var(--policy-h3);
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 32px;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  margin-top: 24px;
  color: var(--color-text-default);
}

.privacy-section h4 {
  font-size: var(--policy-h4);
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 24px;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  margin-top: 16px;
  color: var(--color-text-default);
}

.privacy-section p {
  font-size: var(--policy-text);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: var(--policy-lh);
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  color: var(--color-text-subtle);
}

.privacy-section p:last-child {
  margin-bottom: 0;
}

.privacy-section ol,
.privacy-section ul {
  margin: 12px 0;
  padding-left: 20px;
}

.privacy-section li {
  font-size: var(--policy-text);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: var(--policy-li-lh);
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  color: var(--color-text-subtle);
}

.privacy-section li:last-child {
  margin-bottom: 0;
}

.privacy-section ol ol,
.privacy-section ul ul {
  margin-top: clamp(8px, 1vw, 12px);
  margin-bottom: 0;
}

.contact-info {
  background: rgba(244, 244, 244, 0.05);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
}

.contact-info p { margin-bottom: 0; font-size: var(--policy-text); line-height: 1.6; }

.contact-info strong {
  color: var(--ink);
  font-weight: 700;
}

.contact-info a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info a:hover {
  color: var(--color-text-linkcolor);
  text-decoration: underline;
}

.policy-footer {
  padding: 16px 0;
  text-align: left;
}

.effective-date {
  font-size: 16px;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 28px;
  letter-spacing: 0.8px;
  color: var(--color-text-subtle);
  margin: 0;
  text-align: left;
}

.footer-legal {
  margin-bottom: clamp(12px, 2vw, 16px);
}

.legal-nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.legal-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--button-sm);
  font-weight: 400;
  transition: color 0.2s ease;
  letter-spacing: 0.8px;
}

.legal-nav a:hover {
  color: var(--ink);
}

.legal-nav a.current {
  color: var(--accent);
  font-weight: 600;
}

.nav-separator {
  color: var(--color-text-default);
  font-size: clamp(12px, 1.2vw, 13.5px);
  margin: 0 8px;
  font-weight: 300;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .privacy-policy-main { padding-top: 0; }
  .page-header { padding: 12px 16px 16px 16px; }
  .privacy-content { padding: 16px; }
  .page-header .privacy-section { padding: 16px 0 12px 0; }
  
  .privacy-section {
    padding: 16px 0;
  }
  
  .policy-footer {
    padding: 16px 0;
  }
  
  .legal-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: flex-start;
  }
  
  .legal-nav a {
    font-size: clamp(12px, 1.2vw, 13px);
    letter-spacing: 0.6px;
  }
  
  .privacy-section ol,
  .privacy-section ul {
    padding-left: 20px;
  }
}

/* Small mobile optimizations for footer */
@media (max-width: 375px) {
  .footer-legal {
    margin-bottom: var(--space-sm);
  }
  
  .legal-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    align-items: center;
    justify-content: flex-start;
  }
  
  .legal-nav a {
    font-size: 12px;
    letter-spacing: 0.4px;
  }
}

/* Reapply overrides */
.work .work-card-desc{font-size:14px}
.profile p{font-size:14px}
@media (max-width:600px){
  p{font-size:13px}
  .work p{font-size:13px}
  .work .work-card-desc{font-size:12px}
  .profile p{font-size:13px}
}