/* 方向性：ブラック × ピンク。1カラムに詰めて、スクロール量を最小限にする。 */
:root {
  --ink: #0a0a0b;
  --ink-2: #141416;
  --ink-3: #1e1e22;
  --line: rgb(255 255 255 / 0.09);
  --text: #f4f1f3;
  --muted: #a19ba0;
  --pink: #ff4f9a;
  --pink-hi: #ff8fc0;
  --pink-ink: #1a0710;

  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --text-xs: 0.72rem;
  --text-sm: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --text-base: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);

  --page: 760px;
  --gutter: 16px;
  --space-section: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --radius-s: 4px;
  --radius-l: 12px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-slow: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  overflow-x: hidden;
}
/* 上からうっすらピンクの光 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70vmax 38vmax at 50% -12%, rgb(255 79 154 / 0.2), transparent 62%),
    radial-gradient(40vmax 30vmax at 110% 60%, rgb(255 79 154 / 0.06), transparent 60%);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--pink-hi); outline-offset: 3px; border-radius: var(--radius-s); }

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--pink); color: var(--pink-ink); padding: 0.4rem 0.8rem; z-index: 10;
}
.skip:focus { top: 1rem; }

.hero, main, .foot { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Hero：アイコンから始める ---------- */
.hero {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 1rem 1.25rem; padding-top: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.avatar {
  width: clamp(84px, 70px + 6vw, 120px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--pink), 0 10px 40px -8px rgb(255 79 154 / 0.55);
}
.hero h1 { margin: 0; font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 900; line-height: 1.25; letter-spacing: 0.02em; }
.kana { font-size: 0.6em; font-weight: 400; color: var(--muted); letter-spacing: 0.05em; }
.title { margin: 0.15rem 0 0.55rem; font-size: var(--text-sm); color: var(--pink-hi); font-weight: 700; }
.socials { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill {
  display: inline-flex; gap: 0.35rem; align-items: center;
  padding: 0.2rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--text-sm); font-weight: 700;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}
.pill:hover { border-color: var(--pink); color: var(--pink-hi); background: rgb(255 79 154 / 0.1); }
.pill:active { background: rgb(255 79 154 / 0.2); }

/* ---------- Sections ---------- */
.sec { padding-top: var(--space-section); }
.sec-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.sec-no { color: var(--pink); font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.1em; }
.sec-head h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.6rem; }
.sec-en { font-size: var(--text-lg); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.sec-ja { font-size: var(--text-xs); color: var(--muted); font-weight: 400; letter-spacing: 0.1em; }

.bio p { margin: 0; }

/* 経歴：ピンクの縦線にドット */
.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 0.75rem; bottom: 0.75rem; width: 1px;
  background: linear-gradient(var(--pink), rgb(255 79 154 / 0.15));
}
.timeline li {
  position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 0.6rem;
  padding-block: 0.32rem; font-size: var(--text-sm); line-height: 1.5;
}
.timeline li::before {
  content: ""; position: absolute; left: calc(-1.25rem + 1px); top: calc(0.32rem + 0.75em - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--pink);
}
.timeline li:last-child::before { background: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 10px var(--pink); }
.year { font-weight: 900; color: var(--pink-hi); font-variant-numeric: tabular-nums; }
.timeline p { margin: 0; }

/* 事業：正方形タイルを2列 */
.biz-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.biz-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  transition: border-color 240ms, transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo);
}
a.biz-card:hover { border-color: rgb(255 79 154 / 0.7); transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgb(255 79 154 / 0.45); }
a.biz-card:active { transform: translateY(0); }
.biz-media { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--ink-3); }
/* 横長バナーは切らずに中央へ。上下の余白は同じ画像をぼかして埋める */
.biz-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(0.55) saturate(1.2); transform: scale(1.25); }
.biz-img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms var(--ease-out-expo); }
a.biz-card:hover .biz-img { transform: scale(1.04); }
.biz-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem 0.7rem; flex: 1; }
.chip {
  align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; color: var(--pink-hi);
  border: 1px solid rgb(255 79 154 / 0.45); border-radius: var(--radius-s); padding: 0 0.4rem;
}
.biz h3 { margin: 0.1rem 0 0; font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem); font-weight: 900; line-height: 1.3; }
.biz p { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; flex: 1; }
.cta {
  margin-top: 0.25rem; display: inline-flex; gap: 0.35rem; align-self: flex-start;
  font-size: var(--text-xs); font-weight: 700; color: var(--pink);
}
.cta span { transition: transform 300ms var(--ease-out-expo); }
a.biz-card:hover .cta span { transform: translateX(3px); }

/* 画像が無い事業の代替画像 */
.biz-ph {
  width: 100%; height: 100%; display: grid; place-items: center; padding: 1rem;
  background:
    radial-gradient(110% 80% at 25% 15%, rgb(255 79 154 / 0.35), transparent 60%),
    radial-gradient(90% 80% at 90% 100%, rgb(255 143 192 / 0.15), transparent 60%),
    var(--ink-3);
}
.biz-ph span { font-weight: 900; text-align: center; line-height: 1.2; font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.35rem); color: var(--text); word-break: keep-all; }

/* コンテンツ */
.post {
  display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.8rem;
  padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--line);
  transition: background-color var(--duration-fast);
}
.post:hover { background: rgb(255 79 154 / 0.06); }
.post img, .thumb-empty { width: 6.5rem; aspect-ratio: 1.9; object-fit: cover; border-radius: var(--radius-s); background: var(--ink-3); }
.post-text { display: flex; flex-direction: column; }
.post-src { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; color: var(--pink); text-transform: uppercase; }
.post-title { font-size: var(--text-base); font-weight: 700; line-height: 1.35; }
.post-arrow { color: var(--pink); transition: transform 300ms var(--ease-out-expo); }
.post:hover .post-arrow { transform: translate(2px, -2px); }

/* お問い合わせ */
.contact p { margin: 0 0 0.7rem; font-size: var(--text-sm); }
.btn {
  display: inline-flex; gap: 0.6rem; align-items: center;
  padding: 0.6rem 1.4rem; border-radius: 999px; background: var(--pink); color: var(--pink-ink);
  font-weight: 900; font-size: var(--text-sm); letter-spacing: 0.05em;
  transition: background-color var(--duration-fast), transform 300ms var(--ease-out-expo), box-shadow 300ms;
}
.btn:hover { background: var(--pink-hi); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgb(255 79 154 / 0.7); }
.btn:active { transform: translateY(0); }

.foot {
  margin-top: var(--space-section); padding-block: 0.9rem 1.5rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1.5rem;
}
.foot p { margin: 0; }
.age { color: var(--pink-hi); }

/* ---------- Motion ---------- */
.reveal { transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); }
.reveal.is-pending { opacity: 0; transform: translateY(12px); }

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