/* FONTFACE:START */
/* build-fonts.py が生成。直接編集しない */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-500.3ab236ad.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600.7a869488.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500.3081be77.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-600.b35a999f.woff2) format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/notosansjp-400.fbcb8fef.woff2) format('woff2')}
@font-face{font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/notoserifjp-600.f84b69f1.woff2) format('woff2')}
/* FONTFACE:END */
/* ===================================================================
   このCSSは index/index-en/work/work-en の <style> に直接埋め込まれます。
   ここを編集したら必ず  python3 build-fonts.py  を実行してください。
   実行しないとページに反映されません。
   (build-fonts.py は 使う文字だけのフォント生成 → @font-face 差し込み
    → HTML への CSS 埋め込み まで一括で行います)
   =================================================================== */
/* =========================================================
   AKIE FUNAHASHI — Portfolio
   Design tokens per design_handoff_akie_portfolio/README.md
   ========================================================= */

:root {
  /* Color */
  --beige:        #F7F4EF;
  --beige-2:      #EFE8DE;
  --white:        #FFFFFF;
  --purple:       #5B3F8C;
  --purple-light: #8B6BBF;
  --lavender:     #C8B8E8;
  --ink:          #0D0D0D;
  --ink-2:        #444444;
  --aubergine:    #493B52;
  --hairline:     rgba(13, 13, 13, 0.08);
  --hairline-soft: rgba(13, 13, 13, 0.06);

  /* Type */
  --f-display: 'Playfair Display', 'Times New Roman', serif;
  --f-jp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --f-label: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;

  /* Layout */
  --wrap: 1040px;
  --gutter: 32px;
  --section-y: 62px;
  --header-y: 22px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
a:hover { color: var(--purple); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--lavender); }

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

/* ---------- Skip link (a11y) ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: 12px 20px;
  font-family: var(--f-label); font-size: 12px; letter-spacing: .14em;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

/* ---------- Shared layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--white { background: var(--white); border-top: 1px solid var(--hairline-soft); }
.section--sand  { background: var(--beige-2); border-top: 1px solid var(--hairline-soft); }

/* ---------- Type utilities ---------- */
.eyebrow {
  font-family: var(--f-label); font-size: 11px; font-weight: 600;
  letter-spacing: .28em; color: var(--purple); line-height: 1.8;
}
.label {
  font-family: var(--f-label); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; color: var(--ink); line-height: 1.8;
}
.h-display {
  font-family: var(--f-display); font-weight: 500; line-height: 1;
  font-size: clamp(30px, 3.6vw, 52px); letter-spacing: .01em;
}
.h-section { margin-bottom: 34px; }
.lead { font-size: 15px; line-height: 2; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--f-label); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; padding: 15px 28px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn--ghost { border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--beige); }
.btn--solid { background: var(--purple); color: var(--white); }
.btn--solid:hover { background: var(--purple-light); color: var(--white); }
.btn--dark { background: var(--ink); color: var(--beige); padding: 18px 44px; font-size: 12.5px; letter-spacing: .18em; }
.btn--dark:hover { background: var(--purple); color: var(--white); }

.link-underline {
  font-family: var(--f-label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; border-bottom: 1px solid var(--purple-light);
  padding-bottom: 4px; align-self: flex-start;
}
.link-underline--muted { border-bottom-color: rgba(13, 13, 13, .2); }

/* =========================================================
   Photo placeholders
   Drop a file into images/ with the matching name and it
   appears automatically. Missing files fall back to the
   dashed placeholder (img removes itself on error).
   ========================================================= */
.ph {
  position: relative; display: grid; width: 100%;
  background: linear-gradient(135deg, #EDE8E0, #E4DED4);
  border: 1px dashed rgba(91, 63, 140, .28);
  border-radius: 6px; overflow: hidden;
}
.ph > * { grid-area: 1 / 1; }
.ph img { width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph__note {
  align-self: center; justify-self: center; text-align: center;
  padding: 16px; font-family: var(--f-label); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em; color: rgba(91, 63, 140, .55);
  line-height: 2;
}
.ph--pill { border-radius: 200px; }
.ph--soft { border-radius: 12px; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 239, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  padding-block: var(--header-y);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding-block .3s ease;
}
.site-header.is-scrolled .wrap { padding-block: 12px; }

.logo {
  font-family: var(--f-display); font-size: 19px; font-weight: 600;
  letter-spacing: .06em; white-space: nowrap; flex-shrink: 0;
}
.logo span { color: var(--purple-light); }

.nav { display: flex; align-items: center; gap: 28px; font-family: var(--f-label); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; }
.nav a[aria-current="page"] { color: var(--purple); font-weight: 600; border-bottom: 1px solid var(--purple-light); padding-bottom: 3px; }
.nav__lang { display: flex; gap: 6px; align-items: center; padding-left: 20px; border-left: 1px solid rgba(13, 13, 13, .15); }
.nav__lang b { color: var(--purple); font-weight: 600; }
.nav__lang span { color: #999; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; margin: -8px -8px -8px 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
}
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   First view
   ========================================================= */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: 56px var(--gutter) 72px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 64px; align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 24px; }
.hero__id { display: flex; flex-direction: column; gap: 10px; }
".hero__name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.hero__name { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .28em; color: var(--purple); }
.hero__name-jp { font-family: var(--f-jp-serif); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-2); margin-left: 10px; }
.hero__tagline { font-family: var(--f-label); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; color: var(--purple-light); }
.hero__role { font-family: var(--f-label); font-size: 13px; letter-spacing: .05em; color: var(--ink-2); }
.hero__intro { font-size: 14.5px; line-height: 2.05; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.hero__sub { font-size: 13px; color: var(--ink-2); }
.hero h1 {
  font-family: var(--f-jp-serif); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.45;
  letter-spacing: .02em; text-wrap: pretty;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.hero__figure { position: relative; justify-self: end; width: 100%; max-width: 330px; }
.hero__figure .ph { height: 380px; }
.hero__blob, .hero__blob-2 { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__blob { top: -36px; right: -28px; width: 180px; height: 180px; background: radial-gradient(circle at 35% 35%, #E3D9F5, var(--lavender)); opacity: .8; }
.hero__blob-2 { bottom: -28px; left: -32px; width: 120px; height: 120px; background: #D9CDBF; opacity: .55; }
.hero__badge {
  position: absolute; bottom: 24px; left: -14px; z-index: 2;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 10px 16px; font-family: var(--f-label); font-size: 10px;
  letter-spacing: .18em; color: var(--purple); font-weight: 600;
  box-shadow: 0 8px 24px rgba(91, 63, 140, .12);
}

/* =========================================================
   About
   ========================================================= */
.about__grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }
.about__left { display: flex; flex-direction: column; gap: 28px; }
.about__left h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; }
.about__left .ph { height: auto; aspect-ratio: 1044 / 870; }  /* 写真そのものの比率。これ以上切り取られない */
.about__body { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.about__title { display: flex; flex-direction: column; gap: 6px; }
.about__title .en { font-family: var(--f-display); font-size: 20px; letter-spacing: .04em; }
.about__title .role { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--purple); }
.about__title .sub { font-size: 13px; color: var(--ink-2); }
/* CV ボタン — ラベンダーのハイライト。ABOUT で埋もれないよう面で置く */
.about__cvs {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-self: flex-start; margin-top: 6px;
}
.about__cv {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--ink); background: var(--lavender);
  padding: 11px 18px 10px; border-bottom: 2px solid var(--purple);
  transition: background .2s ease, color .2s ease;
}
.about__cv-lang { font-size: 10px; letter-spacing: .16em; opacity: .68; }
.about__cv-arrow { font-size: 12px; line-height: 1; }
.about__cv--alt { background: rgba(200, 184, 232, .4); }
.about__cv:hover { background: var(--purple); color: #FFF; }
.about__cv:hover .about__cv-lang { opacity: .85; }
.about__body p { font-size: 15.5px; line-height: 2.1; color: var(--ink-2); max-width: 560px; text-wrap: pretty; }
.about__body p:first-of-type { color: var(--ink); }
.about__motto {
  margin-top: 14px; font-family: var(--f-label); font-size: 12px;
  font-weight: 600; letter-spacing: .3em; color: var(--lavender); line-height: 2.4;
}

/* =========================================================
   Experience
   ========================================================= */
.exp__grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.4fr); gap: 56px; align-items: start; }
.exp__aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 120px; }
.exp__count { font-family: var(--f-display); font-size: clamp(58px, 6.2vw, 92px); line-height: .95; color: var(--purple); }
.exp__count span { color: var(--lavender); }
.exp__count-label { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .22em; line-height: 1.9; }
.exp__note { font-size: 14px; color: var(--ink-2); }
.exp__london { font-size: 13px; line-height: 1.9; color: var(--ink-2); margin-top: 18px; }

.timeline { position: relative; padding-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 4px; right: 4px; top: 55px; height: 1px; background: var(--lavender); }
.timeline__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tl { display: flex; flex-direction: column; }
.tl svg { margin-bottom: 14px; }
.tl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); margin: 0 0 22px 9px; }
.tl__cat {
  font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  line-height: 1.7; margin-bottom: 12px; overflow-wrap: anywhere;
}
.tl__list { font-size: 13px; line-height: 2; color: var(--ink-2); }

/* =========================================================
   What I Do
   ========================================================= */
.services__intro { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin-bottom: 40px; }
.services__intro .jp { font-family: var(--f-jp-serif); font-size: 17px; letter-spacing: .06em; }
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: var(--white); border-radius: 4px; padding: 32px 34px;
  display: flex; flex-direction: column; gap: 16px;
}
.card--wide { grid-column: 1 / -1; }
.card h3 { font-family: var(--f-display); font-size: 22px; font-weight: 500; color: var(--purple); }
.card p { font-size: 14.5px; line-height: 2; color: var(--ink-2); text-wrap: pretty; }
.card p strong { color: var(--ink); }
.card__meta { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--purple); }
.card__list { font-size: 13px; color: var(--ink-2); line-height: 1.9; }
.card__jp { font-size: 13px; color: var(--purple); }

/* =========================================================
   Selected work
   ========================================================= */
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-card { display: flex; flex-direction: column; }
.work-card--offset { margin-top: 36px; }
.work-card .ph { height: 235px; }
.work-card__meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; gap: 12px; }
.work-card__title { font-family: var(--f-display); font-size: 19px; }
.work-card__cat { font-family: var(--f-label); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--purple-light); text-align: right; }
.work__all { display: flex; justify-content: center; margin-top: 46px; }
.work__all a {
  font-family: var(--f-display); font-size: clamp(21px, 2.3vw, 32px); font-weight: 500;
  display: flex; align-items: baseline; gap: 20px;
  border-bottom: 2px solid var(--purple-light); padding-bottom: 10px;
}
.work__all span { color: var(--purple-light); }

/* =========================================================
   Contact
   ========================================================= */
.contact { background: linear-gradient(180deg, var(--beige), #EDE6F8); border-top: 1px solid var(--hairline-soft); }
.contact .wrap { padding-block: 78px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; }
.contact h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; }
.contact h2 span { color: var(--purple-light); }
.contact p { font-size: 15px; line-height: 2.2; color: var(--ink-2); text-wrap: pretty; }
.social { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; font-family: var(--f-label); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--ink-2); margin-top: 8px; }
.social a { color: var(--ink-2); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--aubergine); color: var(--beige); }
.site-footer .wrap { padding-block: 46px; display: flex; flex-direction: column; gap: 32px; }
.site-footer a { color: rgba(247, 244, 239, .8); }
.site-footer a:hover { color: var(--lavender); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: 8px; }
.footer__brand .name { font-family: var(--f-display); font-size: 18px; letter-spacing: .05em; }
.footer__brand .name span { color: var(--purple-light); }
.footer__brand .meta { font-size: 12.5px; color: rgba(247, 244, 239, .7); line-height: 1.9; }
.footer__nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-family: var(--f-label); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; }
.footer__nav .lang { color: rgba(247, 244, 239, .5); padding-left: 12px; border-left: 1px solid rgba(247, 244, 239, .2); }
.footer__bottom {
  border-top: 1px solid rgba(247, 244, 239, .15); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-label); font-size: 10px; letter-spacing: .16em; color: rgba(247, 244, 239, .55);
}
.site-footer--slim .wrap { padding-block: 48px; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.site-footer--slim .name { font-family: var(--f-display); font-size: 18px; letter-spacing: .05em; }
.site-footer--slim .name span { color: var(--purple-light); }

/* =========================================================
   Work page
   ========================================================= */
.work-intro { max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 40px; display: flex; flex-direction: column; gap: 24px; }
.work-intro h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; }
.anchor-nav { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--f-label); font-size: 11px; font-weight: 500; letter-spacing: .16em; margin-top: 8px; }
.anchor-nav a { color: var(--ink-2); border-bottom: 1px solid rgba(13, 13, 13, .15); padding-bottom: 4px; }

.wsec { padding-block: 42px; }
.wsec .wrap { display: flex; flex-direction: column; gap: 22px; }
.wsec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.wsec__head h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(25px, 2.8vw, 38px); }
.wsec__cat { font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--purple-light); }
.wsec__pull { font-family: var(--f-jp-serif); font-size: 17px; line-height: 1.9; }
.wsec p { font-size: 14.5px; line-height: 2.1; color: var(--ink-2); text-wrap: pretty; }

.split { display: grid; gap: 40px; align-items: center; }
.split--text-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.split--img-first  { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.split__text { display: flex; flex-direction: column; gap: 20px; }
.split .ph { height: 300px; }

.broadcast__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.broadcast__main { height: 380px; }
.broadcast__side { display: flex; flex-direction: column; gap: 24px; }
.broadcast__side .ph { flex: 1; min-height: 200px; }
.panel { background: var(--beige); border-radius: 6px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.panel__label { font-family: var(--f-label); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--purple); }
.panel__list { font-size: 13.5px; line-height: 2.1; color: var(--ink-2); }

/* WORK: 1セクション = 3カラム1行（全体をコンパクトに） */
.wrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.wcol { display: flex; flex-direction: column; gap: 10px; }
.wrow .ph { height: 230px; }
.wcap {
  font-family: var(--f-label); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; color: var(--purple-light); line-height: 1.8;
}
.wcol--text { justify-content: center; gap: 16px; }
.wcol--text .wsec__pull { font-size: 16px; line-height: 1.85; }
.wcol--text p { font-size: 13.5px; line-height: 2; }
.wrow .panel { padding: 22px; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.trio .ph { height: 250px; }
.trio .ph--offset { margin-top: 40px; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.panel--case {
  background: linear-gradient(135deg, #F3ECFF, #E4D9F6); border-radius: 6px;
  padding: 30px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between;
}
.panel--case .title { font-family: var(--f-display); font-size: 20px; line-height: 1.35; }
.panel--case p { font-size: 13.5px; line-height: 2; }
.badge {
  font-family: var(--f-label); font-size: 10px; font-weight: 600; letter-spacing: .2em;
  color: var(--purple-light); border: 1px solid var(--lavender); border-radius: 999px;
  padding: 6px 14px; align-self: flex-start;
}
.work-cta { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.work-cta h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(27px, 3.1vw, 42px); }
.work-cta h2 span { color: var(--purple-light); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  :root { --section-y: 52px; }
  .about__grid, .exp__grid { gap: 48px; }
  .timeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .timeline::before { display: none; }
  .exp__aside { position: static; }
}

@media (max-width: 900px) {
  .wrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--beige); border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 24px;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility .3s;
  }
  .nav.is-open { max-height: 70vh; overflow-y: auto; visibility: visible; }
  .nav a, .nav > span { padding-block: 14px; width: 100%; }
  .nav__lang { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); margin-top: 8px; }
  .site-header .wrap { position: relative; }
}

@media (max-width: 820px) {
  :root { --gutter: 22px; --section-y: 44px; }
  .hero {
    grid-template-columns: 1fr; gap: 40px; padding: 40px var(--gutter) 56px;
  }
  .hero__figure { justify-self: stretch; max-width: 420px; margin-inline: auto; }
  .hero__figure .ph { height: 340px; }
  .about__grid, .exp__grid { grid-template-columns: 1fr; }
  .about__body { padding-top: 0; }
  .services__grid { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .work__grid { grid-template-columns: 1fr; gap: 40px; }
  .work-card--offset { margin-top: 0; }
  .work-card .ph { height: 220px; }
  .contact .wrap { padding-block: 56px; }
  .broadcast__grid { grid-template-columns: 1fr; }
  .broadcast__main { height: 300px; }
  .broadcast__side .ph { min-height: 200px; }
  .split--text-first, .split--img-first { grid-template-columns: 1fr; gap: 32px; }
  .split--img-first .split__text { order: -1; }
  .wrow { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .trio .ph--offset { margin-top: 0; }
  .duo { grid-template-columns: 1fr; }
  .timeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { flex-direction: column; }
}

@media (max-width: 520px) {
  body { font-size: 14.5px; }
  .card { padding: 32px 26px; }
  .panel, .panel--case { padding: 28px 24px; }
  .timeline__grid { grid-template-columns: 1fr; row-gap: 36px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .work-card__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .work-card__cat { text-align: left; }
  .social { gap: 18px 24px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle, .hero__cta, .work__all { display: none; }
  body { background: #fff; }
}

/* =========================================================
   Making — 自分でつくったもの
   ========================================================= */
.making { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.made {
  background: var(--white); border: 1px solid var(--hairline-soft);
  border-radius: 6px; padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.made--art { background: linear-gradient(135deg, #F3ECFF, #E4D9F6); border-color: transparent; }
.made__no { font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--ink); }
.made__title { font-family: var(--f-display); font-size: 20px; line-height: 1.35; color: var(--purple); }
.made__year { font-family: var(--f-label); font-size: 10.5px; letter-spacing: .18em; color: var(--ink-2); margin-top: -8px; }
.made p { font-size: 13.5px; line-height: 2; color: var(--ink-2); text-wrap: pretty; }
.made__tags {
  font-family: var(--f-label); font-size: 10.5px; letter-spacing: .12em;
  color: var(--purple); padding-top: 4px; margin-top: auto;
}
.made__banner {
  width: 100%; aspect-ratio: 700 / 220; object-fit: cover;
  border-radius: 6px; margin-top: 6px;
}
.made__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }

@media (max-width: 820px) {
  .making { grid-template-columns: 1fr; }
  .made { padding: 30px 26px; }
}

/* =========================================================
   切り取らない写真枠
   何が写っているかが構図全体で決まる写真（G7の現地取材など）に使う。
   通常の .ph は枠に合わせて切り取るが、こちらは全体を収める。
   使い方: <div class="ph ph--whole"> … </div>
   ========================================================= */
.ph--whole {
  background: var(--beige-2);
  border-style: solid;
  border-color: var(--hairline-soft);
  height: auto;          /* 枠の高さを写真に合わせる = 切り取りが起きない */
  align-self: start;     /* 隣の列の高さに引き伸ばされないようにする（下の空白を防ぐ） */
}
.ph--whole img { object-fit: contain; width: 100%; height: auto; }

/* =========================================================
   SELECTED WORK — 依頼された仕事 / 自分でつくったもの の2階層
   ========================================================= */
.sw__lead {
  font-family: var(--f-label); font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-2); margin-top: 14px;
}
.sw__group {
  font-family: var(--f-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; color: var(--purple);
  margin: 44px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--purple-light);
}
/* 2つ目のグループ。別セクションにはせず、色の濃さだけで区別する */
.sw__group--alt { color: var(--purple-light); border-bottom-color: var(--lavender); }

.sw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.sw { display: flex; flex-direction: column; gap: 5px; }
/* G7の写真の縦横比に全カードを合わせてある。
   これでG7が切り取られず、かつ4枚の高さが揃う。 */
.sw__img { aspect-ratio: 1100 / 698; height: auto; margin-bottom: 7px; }
/* 文字は写真を邪魔しない大きさに抑える（写真が主役） */
.sw__cat {
  font-family: var(--f-label); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; color: var(--purple-light);
}
.sw__title { font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--purple); }
.sw .link-underline { margin-top: 7px; }
.sw__desc { font-size: 12.5px; line-height: 1.85; color: var(--ink-2); text-wrap: pretty; }

@media (max-width: 820px) {
  .sw__grid { grid-template-columns: 1fr; gap: 26px; }
  .sw__group { margin: 34px 0 14px; }
}

/* 言語切替（実際に動くリンク） */
.nav__lang a { color: #999; }
.nav__lang a:hover { color: var(--purple); }
.footer__nav .lang b { color: var(--beige); font-weight: 600; }
.footer__nav .lang a { color: rgba(247, 244, 239, .55); }
.footer__nav .lang a:hover { color: var(--lavender); }

/* ---- SELECTED WORK：3枚並び。写真も文字も一段小さく ---- */
.sw__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; }
/* G7写真そのものの比率。これでG7は一切切り取られない */
.sw__img { aspect-ratio: 929 / 680; }
.sw__title { font-size: 15.5px; }
.sw__desc { font-size: 11.5px; line-height: 1.85; }
.sw__cat { font-size: 9px; }

/* ---- ファーストビューのポートレート：頭上の余白を詰める ---- */
.hero__figure .ph img { object-position: 50% 66%; }

@media (max-width: 900px) { .sw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sw__grid { grid-template-columns: 1fr; gap: 24px; } }

/* 縦位置で見せるカード（スタジオ写真）。元の縦横比のまま、下まで写す */
.sw__img--tall { aspect-ratio: 533 / 532; }

/* 縦と横の写真が混ざるので、行の高さを揃えない段組みにする。
   これで背の低いカードの下に空白ができない。 */
.sw__grid {
  display: block;
  columns: 3;
  column-gap: 18px;
}
.sw {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 22px;
  display: block;
}
.sw__img { margin-bottom: 7px; }

@media (max-width: 900px) { .sw__grid { columns: 2; } }
@media (max-width: 640px) { .sw__grid { columns: 1; } }

/* =========================================================
   触れる作品カード
   ツールなど、その場で試せるものはカードごとリンクにする。
   写真だけのカードと混ざるので、hover の反応で区別する。
   ========================================================= */
.sw--link { display: block; color: inherit; text-decoration: none; }
.sw--link .ph { overflow: hidden; }
.sw--link img { transition: transform .5s ease; }
.sw--link:hover img { transform: scale(1.03); }
.sw--link:hover .sw__title { color: var(--purple-light); }
.sw__try {
  font-family: var(--f-label); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; color: var(--purple);
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding-bottom: 3px;
  border-bottom: 1px solid var(--lavender);
}
.sw--link:hover .sw__try { border-bottom-color: var(--purple); }

/* =========================================================
   スマホ最適化（実機幅 375 / 390 / 430 での実測にもとづく）
   ========================================================= */

/* ① 横スクロールを止める。
   .hero__blob が right:-28px で 6px はみ出し、全モバイル幅でページが
   横に振れていた。overflow-x:hidden と違い clip は position:sticky を
   壊さないので clip を使う。 */
html, body { overflow-x: clip; }

@media (max-width: 820px) {
  /* ② フッターナビのタップ領域。10.5px の文字だけで高さ 21px しかなく、
     iOS の推奨 44px に対して半分以下だった。 */
  .footer__nav { gap: 8px 20px; }
  .footer__nav a,
  .footer__nav .lang { padding-block: 10px; }
  .footer__nav .lang a { padding: 6px 4px; }

  /* ③ カテゴリラベルが 9px まで縮んでいたので 10px に戻す。
     大文字＋字間広めで 9px は小さすぎる。 */
  .sw__cat { font-size: 10px; }
}

@media (max-width: 820px) {
  /* ④ 細いテキストリンクのタップ領域を拡張する。
     見た目は 19〜28px のままだが、透明な疑似要素で 44px の当たり判定を作る。
     padding を足すと行間がずれるので、レイアウトに影響しない方法を採る。
     （iOS ヒューマンインターフェイスガイドライン 44pt / Android 48dp） */
  .link-underline,
  .anchor-nav a,
  .footer__nav .lang a { position: relative; }

  .link-underline::after,
  .anchor-nav a::after,
  .footer__nav .lang a::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 44px;
    z-index: 1;              /* 後続要素に隠れると当たり判定が効かないため */
  }

  /* 行が詰まっている箇所で当たり判定が重ならないよう、間隔を少し広げる */
  .anchor-nav { gap: 18px 24px; }
}

/* =========================================================
   Soft UI ── レイヤードな二方向シャドウ（neumorphic surfaces）
   面の色と同じ色のカードに、右下に影・左上に光を落として
   面がふわりと浮き上がっているように見せる。
   ========================================================= */
:root {
  --nm-dark:  rgba(73, 59, 82, .18);      /* aubergine を薄く ── 影側 */
  --nm-light: rgba(255, 255, 255, .95);   /* 光側 */
  --nm-ease:  cubic-bezier(.22, .61, .36, 1);
  --nm-raise:  12px 12px 28px var(--nm-dark), -12px -12px 28px var(--nm-light);
  --nm-hover:  18px 18px 40px var(--nm-dark), -18px -18px 40px var(--nm-light);
  --nm-photo:  15px 15px 30px var(--nm-dark), -15px -15px 30px var(--nm-light);
  --nm-btn:    6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);
  --nm-press:  inset 5px 5px 12px var(--nm-dark), inset -5px -5px 12px var(--nm-light);
  --nm-well:   inset 6px 6px 16px rgba(73, 59, 82, .10), inset -6px -6px 16px rgba(255, 255, 255, .9);
}

/* 共通トランジション */
.card, .made, .panel, .panel--case, .hero__badge, .ph {
  transition: box-shadow .55s var(--nm-ease), transform .55s var(--nm-ease);
}

/* Services カード（sand 面の上） */
.card {
  background: var(--beige-2);
  border-radius: 24px;
  box-shadow: var(--nm-raise);
}
.card:hover { box-shadow: var(--nm-hover); transform: translateY(-3px); }

/* Making カード（beige 面の上） */
.made {
  background: var(--beige);
  border-color: transparent;
  border-radius: 24px;
  box-shadow: var(--nm-raise);
}
.made:hover { box-shadow: var(--nm-hover); transform: translateY(-3px); }
.made__banner { border-radius: 14px; }

/* ケースパネル（グラフ面はそのまま、影だけ） */
.panel--case { border-radius: 24px; box-shadow: var(--nm-raise); }
.panel--case:hover { box-shadow: var(--nm-hover); transform: translateY(-3px); }

/* HIGHLIGHTS / SCOPE ── 押し込まれたようなくぼみ */
.panel { border-radius: 20px; box-shadow: var(--nm-well); }

/* ヒーローのバッジ */
.hero__badge {
  background: var(--beige);
  border-color: transparent;
  border-radius: 16px;
  box-shadow: var(--nm-btn);
}

/* 写真フレーム ── 画像が入っているときは破線を消して、板ごと浮かせる */
.ph:not(.ph--pill) { border-radius: 18px; }
.ph { box-shadow: var(--nm-photo); }
.ph:has(img) { border-color: transparent; }
.sw--link:hover .ph { box-shadow: var(--nm-hover); transform: translateY(-3px); }

/* ボタン ── 浮いた状態から、押すと沈む */
.btn {
  box-shadow: var(--nm-btn);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .45s var(--nm-ease), transform .45s var(--nm-ease);
}
.btn--ghost { border-color: transparent; background: var(--beige); }
.btn:hover { transform: translateY(-1px); }
.btn:active { box-shadow: var(--nm-press); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .made:hover, .panel--case:hover, .sw--link:hover .ph, .btn:hover, .btn:active { transform: none; }
}

/* --- Soft UI: ヒーロー周り・ヘッダー・小物にも同じ言語を --- */

/* 装飾の丸 ── 平面の色ムラだったものを、盛り上がった球へ */
.hero__blob, .hero__blob-2 {
  opacity: 1;
  transition: transform .8s var(--nm-ease), box-shadow .8s var(--nm-ease);
}
.hero__blob {
  background: radial-gradient(circle at 32% 28%, #F1EBFB 0%, #DACFF0 45%, var(--lavender) 100%);
  box-shadow: 16px 16px 36px var(--nm-dark), -12px -12px 28px var(--nm-light),
              inset 8px 8px 18px rgba(255, 255, 255, .55), inset -10px -10px 22px rgba(91, 63, 140, .14);
}
.hero__blob-2 {
  background: radial-gradient(circle at 32% 28%, #F4EEE5 0%, #E6DCCE 50%, #D4C6B4 100%);
  box-shadow: 12px 12px 28px var(--nm-dark), -10px -10px 24px var(--nm-light),
              inset 6px 6px 14px rgba(255, 255, 255, .6), inset -8px -8px 18px rgba(73, 59, 82, .10);
}
.hero:hover .hero__blob   { transform: translate(4px, -4px); }
.hero:hover .hero__blob-2 { transform: translate(-4px, 4px); }

/* ヒーローの写真（ピル）── 例と同じ 15px / 30px の落とし方 */
.hero__figure .ph {
  box-shadow: 15px 15px 30px var(--nm-dark), -15px -15px 30px var(--nm-light);
}

/* 色つきボタンは影側を紫寄り／濃いめに */
.btn--solid { box-shadow: 8px 8px 18px rgba(91, 63, 140, .26), -6px -6px 14px var(--nm-light); }
.btn--dark  { box-shadow: 8px 8px 18px rgba(13, 13, 13, .22), -6px -6px 14px var(--nm-light); }
.btn--solid:active, .btn--dark:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .25), inset -4px -4px 10px rgba(255, 255, 255, .12); }

/* ヘッダー ── 罫線の代わりに柔らかい落ち影 */
.site-header { border-bottom-color: transparent; box-shadow: 0 10px 30px rgba(73, 59, 82, .07); }

/* バッジ・ナビトグレー */
.badge { border-color: transparent; background: var(--beige); box-shadow: 4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light); }
/* nav-toggle の円形シャドウは、モバイルで円とアイコンがずれて見えるため撤去 */

/* 白セクションを beige に寄せる ── 白の上だと光側の影が見えなくなるため。
   全セクションを beige に揃えて、写真・カードの浮き上がりを出す */
.section--white { background: var(--beige); border-top-color: transparent; }

/* SELECTED WORK ── 写真だけでなく項目ごとカードとして浮かせる */
.sw {
  background: var(--beige); border-radius: 24px; padding: 16px 16px 20px;
  margin-bottom: 26px;
  box-shadow: var(--nm-raise);
  transition: box-shadow .55s var(--nm-ease), transform .55s var(--nm-ease);
}
.sw:hover { box-shadow: var(--nm-hover); transform: translateY(-3px); }
.sw .ph { box-shadow: none; border-radius: 16px; }
.sw--link:hover .ph { box-shadow: none; transform: none; }
.sw__img { margin-bottom: 12px; }

/* EXPERIENCE タイムライン ── アイコンを丸く浮かせ、点は小さな球、横線は溝に */
.tl svg {
  box-sizing: content-box; width: 26px; height: 26px; padding: 13px;
  align-self: flex-start; background: var(--beige); border-radius: 50%;
  box-shadow: var(--nm-btn); margin-bottom: 18px;
}
.tl__dot {
  position: relative; z-index: 1; width: 14px; height: 14px; margin: 0 0 20px 19px;
  background: radial-gradient(circle at 32% 28%, #C4ADEB 0%, #8B6BBF 45%, #4A3277 100%);
  box-shadow: 3px 3px 7px var(--nm-dark), -2px -2px 5px var(--nm-light),
              inset 2px 2px 3px rgba(255, 255, 255, .35), inset -2px -2px 4px rgba(0, 0, 0, .28);
}
.timeline::before {
  top: 82px; height: 6px; border-radius: 6px; background: var(--beige);
  box-shadow: inset 2px 2px 4px rgba(73, 59, 82, .28), inset -2px -2px 4px rgba(255, 255, 255, .95);
}

/* =========================================================
   Scroll motion（Lenis + GSAP）
   ========================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* GSAP が transform を書いている間は CSS transition を切る（干渉して跳ねないように） */
.has-motion .is-revealing { transition: none !important; }
.has-motion .hero__blob, .has-motion .hero__blob-2 { transition: box-shadow .8s var(--nm-ease); }
.has-motion .hero:hover .hero__blob, .has-motion .hero:hover .hero__blob-2 { transform: none; }
/* SplitText: 行マスクの中で文字を動かすと字面が欠けやすいので、少し余白を持たせる */
.has-motion .st-line { padding-bottom: .08em; margin-bottom: -.08em; }
.has-motion .st-char { will-change: transform; }

/* --- Soft UI の後始末: タイムラインの縦積み時 ---
   .timeline::before（横線）は 1080px 以下で display:none になる。
   .tl__dot はその線の上に乗る前提の点なので、線が無い幅では宙に浮いて
   アイコンと見出しの間に無駄な余白を作ってしまう。縦積みでは隠す。 */
@media (max-width: 1080px) {
  .tl__dot { display: none; }
  .tl svg { margin-bottom: 12px; }
}

/* SELECTED WORK の末尾から WORK ページへ送る導線 */
.sw__all { margin: 34px 0 0; text-align: center; }
.sw__all .btn { display: inline-flex; }
@media (max-width: 640px) {
  .sw__all { margin-top: 26px; }
  .sw__all .btn { width: 100%; justify-content: center; }
}

/* --- 携帯：ヒーローの縦積み順を組み替える ---
   見出しの直後にポートレートを置く。末尾に置いたままだと、
   すぐ下の ABOUT の写真と近接して顔が2つ続いて見えるため。
   .hero__text を display:contents にして、中の要素を .hero の
   グリッド項目に引き上げ、order で並べ替えている。 */
@media (max-width: 820px) {
  .hero { gap: 22px; }
  .hero__text { display: contents; }
  .hero__id      { order: 1; }
  .hero h1       { order: 2; }
  .hero__figure  { order: 3; margin: 8px auto 16px; }
  .hero__tagline { order: 4; }
  .hero__intro   { order: 5; }
  .hero__cta     { order: 6; margin-top: 2px; }
}

/* --- 携帯：残っていたタップ領域と文字サイズの手当て --- */
@media (max-width: 820px) {
  /* ヘッダーのロゴが 38px しかなかった。見た目は変えず 44px に */
  .logo { position: relative; }
  .logo::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px; z-index: 1;
  }
  /* カード内のラベルが 9.5px は携帯では細すぎるので少しだけ上げる */
  .sw__try { font-size: 10.5px; }
}

/* --- 携帯：装飾のボールを文字の後ろへ ---
   .hero__figure には GSAP が transform をかけるため、その時点で
   独自の重なり文脈ができる。中のボールだけ z-index を下げても
   外の文字より後ろには行けないので、図版ブロックごと背面に置く。 */
.hero__figure { z-index: 0; }
.hero__id,
.hero h1,
.hero__tagline,
.hero__intro,
.hero__cta { position: relative; z-index: 1; }

/* --- 作品一覧の並べ方を、段組みから格子へ ---
   段組み（columns）は「上→下→次の列」に流れるため、枚数が3の倍数でないと
   列の途中に穴ができる。読む順番も追いにくい。
   左→右に読める格子にすると、余りは必ず最後尾（右下）に来る。 */
.sw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 18px;
  columns: auto;              /* 段組みの指定を打ち消す */
  align-items: start;         /* 行の高さを揃えず、カードは中身なりの高さに */
}
.sw { margin-bottom: 0; }
@media (max-width: 900px) { .sw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sw__grid { grid-template-columns: 1fr; gap: 24px; } }

/* --- SELECTED WORK の見出しから WORK ページへ送る紫の矢印 ---
   セクション内で強調に使っている紫（--purple）をそのまま使い、
   丸ボタンの矢印にして、押せることが一目で分かるようにする。 */
.sw__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 4px;
}
.sw__head > div { min-width: 0; }
.sw__head .h-display,
.sw__head .sw__lead { margin-top: 0; }

.sw__to {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--purple);
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; white-space: nowrap; padding: 4px 0;
  flex-shrink: 0;
}
.sw__to-txt { border-bottom: 1px solid rgba(91, 63, 140, .3); padding-bottom: 3px; }
.sw__to-arw {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--purple); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(91, 63, 140, .22), 0 10px 22px rgba(91, 63, 140, .20);
  transition: transform .32s var(--nm-ease), background .32s var(--nm-ease),
              box-shadow .32s var(--nm-ease);
}
.sw__to-arw svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .32s var(--nm-ease);
}
.sw__to:hover { color: var(--purple); }
.sw__to:hover .sw__to-txt { border-bottom-color: var(--purple); }
.sw__to:hover .sw__to-arw { background: var(--purple-light); transform: translateY(-2px); }
.sw__to:hover .sw__to-arw svg { transform: translateX(3px); }
.sw__to:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 8px; }

@media (max-width: 640px) {
  .sw__head { align-items: flex-start; gap: 14px; }
  .sw__to { font-size: 12.5px; gap: 10px; }
  .sw__to-arw { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw__to-arw, .sw__to-arw svg { transition: none }
}

/* --- PROJECTS & EXPERIMENTS：線の下の一言と、WORK の Making へ飛ぶ小さな矢印 --- */
.sw__note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 20px; flex-wrap: wrap;
  margin: -8px 0 20px;
}
.sw__note p {
  margin: 0; font-size: 12.5px; line-height: 1.95;
  color: var(--ink-2); opacity: .72; letter-spacing: .02em;
}
.sw__to--sm { font-size: 12px; gap: 9px; padding: 6px 0; }  /* 44px相当の押し場を確保 */
.sw__to--sm .sw__to-arw { width: 34px; height: 34px; }
.sw__to--sm .sw__to-arw svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .sw__note { margin: -4px 0 18px; }
}

/* =========================================================
   お問い合わせフォーム
   送信は /api/contact（Cloudflare Pages Functions）が受ける。
   Resend の鍵はサーバー側だけに置くので、ここには出てこない。
   ========================================================= */
.cform { width: 100%; max-width: 620px; text-align: left; display: grid; gap: 16px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfield { display: grid; gap: 7px; }
.cfield__l {
  font-family: var(--f-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; color: var(--ink-2); text-transform: uppercase;
}
.cfield__l b { color: var(--purple); font-weight: 600; }
.cform input, .cform textarea {
  font-family: var(--f-body); font-size: 15px; line-height: 1.9; color: var(--ink);
  background: var(--beige); border: 1px solid transparent; border-radius: 14px;
  padding: 13px 15px; width: 100%; box-shadow: var(--nm-well);
  transition: box-shadow .3s var(--nm-ease), border-color .3s var(--nm-ease);
  -webkit-appearance: none; appearance: none;
}
.cform textarea { resize: vertical; min-height: 132px; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--ink-3, #9A93A3); opacity: .7; }
.cform input:focus, .cform textarea:focus {
  outline: none; border-color: var(--purple-light); box-shadow: var(--nm-press);
}
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"] { border-color: #B4483F; }

/* 罠の欄。読み上げにも視覚にも出さないが、機械には見える */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cform__send { flex-shrink: 0; }
.cform__send[disabled] { opacity: .55; pointer-events: none; }
.cform__note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.cform__note[data-ok="1"] { color: var(--purple); font-weight: 500; }
.cform__note[data-ok="0"] { color: #B4483F; }
.cform__alt { margin: 2px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink-2); opacity: .7; }
.cform__alt a { color: var(--purple); }

/* 送信したあとのお礼。フォームを隠して、同じ場所にこれを出す。
   メールでの自動返信はしない（画面で完結させる）。 */
.cform[hidden] { display: none; }
.cform__done {
  width: 100%; max-width: 620px; margin: 0 auto;
  min-height: 420px; padding: 56px 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--beige);
  border-radius: 28px; box-shadow: var(--nm-raise); outline: none;
  animation: cform-done .9s var(--nm-ease) both;
}
.cform__done::before {
  content: ''; display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--purple); margin: 0 0 30px;
}
.cform__done h3 {
  margin: 0 0 20px; font-family: var(--f-jp-serif); font-weight: 500;
  font-size: clamp(25px, 5vw, 40px); line-height: 1.55;
  letter-spacing: .04em; color: var(--ink);
}
html[lang="en"] .cform__done h3 { font-family: var(--f-display); letter-spacing: .02em; }
.cform__done h3 span { display: inline-block; }   /* 語の途中では折らない */
.cform__done p {
  margin: 0; max-width: 34em; font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 2.1; color: var(--ink-2);
}
@keyframes cform-done { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .cform__done { min-height: 320px; padding: 44px 24px; border-radius: 24px; }
  .cform__done::before { margin-bottom: 24px; }
  .cform__done h3 { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cform__done { animation: none; }
}

@media (max-width: 640px) {
  .cform__row { grid-template-columns: 1fr; gap: 14px; }
  .cform input, .cform textarea { font-size: 16px; }  /* iOS の自動拡大を防ぐ */
  .cform__send { width: 100%; justify-content: center; }
  .cform__foot { gap: 12px; }
}