/* =====================================================================
   AI AGENT FACTORY — トップページ デザイン修正案 (塊C / あさモ)
   方向性: 白ベース / ポップ / カラフル / Bento Grid / 大人かわいい / 少し毒舌
   既存 style.css とは独立。index-factory.html 専用。
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #FFFDF8;
  --white: #ffffff;

  --pink: #FF5C9A;        --pink-soft: #FFE6F0;   --pink-ink: #B83A6E;
  --lav:  #A78BFA;        --lav-soft:  #EEE9FE;   --lav-ink:  #6D4FD0;
  --mint: #5EEAD4;        --mint-soft: #DCFBF4;   --mint-ink: #1B9E89;
  --yellow: #FDE68A;      --yellow-soft: #FEF6D6; --yellow-ink: #A9821B;
  --orange: #FDBA74;      --orange-soft: #FFEBD6; --orange-ink: #C5701C;
  --sky:  #93C5FD;        --sky-soft:  #E2EEFF;   --sky-ink:  #2D72C9;

  /* hover tints — ふわっと色づく（淡め・原色不可） */
  --h-pink: #FFE4F0; --h-lav: #EDE9FE; --h-mint: #CCFBF1;
  --h-yellow: #FEF3C7; --h-sky: #DBEAFE; --h-orange: #FFEDD5; --h-gray: #F3F4F6;

  --ink: #111827;
  --sub: #6B7280;
  --line: #F3DDE8;
  --line2: #E9E7EF;

  --r-sm: 14px;
  --r: 22px;
  --r-lg: 30px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(40,22,52,.05);
  --shadow: 0 14px 34px rgba(40,22,52,.08), 0 2px 6px rgba(40,22,52,.04);
  --shadow-lift: 0 26px 54px rgba(40,22,52,.16), 0 4px 10px rgba(40,22,52,.06);

  --maxw: 1200px;
  --gutter: clamp(18px, 4.5vw, 44px);

  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Outfit", "Zen Maru Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--lav); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink-soft); color: var(--pink-ink); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  line-height: 1.8;
  font-size: clamp(15px, .9rem + .25vw, 16.5px);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* やわらかいパステルの光 + 細かなドットテクスチャ */
  background-image:
    radial-gradient(620px 420px at 88% -4%, rgba(255,92,154,.10), transparent 60%),
    radial-gradient(560px 460px at -6% 12%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(680px 520px at 50% 118%, rgba(94,234,212,.10), transparent 60%),
    radial-gradient(rgba(180,160,210,.10) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px;
  background-attachment: fixed, fixed, fixed, scroll;
}

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); position: relative; }
.eyebrow {
  font-family: var(--font-en);
  font-weight: 700; font-size: .82rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--pink-ink);
  display: inline-flex; align-items: center; gap: .5em;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--lav)); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.25; letter-spacing: .01em; margin-top: .35em;
}
.section-head .lead { color: var(--sub); margin-top: .9em; max-width: 56ch; }

/* ---------- doodles / stickers ---------- */
.doodle { position: absolute; pointer-events: none; opacity: .9; z-index: 0; }
.doodle svg { width: 100%; height: 100%; }
.tape {
  position: absolute; width: 86px; height: 26px; border-radius: 4px;
  background: repeating-linear-gradient(45deg, rgba(253,230,138,.7) 0 7px, rgba(253,230,138,.45) 7px 14px);
  box-shadow: var(--shadow-sm); pointer-events: none;
}

/* =====================================================================
   Header
   ===================================================================== */
.fh {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 248, .82);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}
.fh__inner { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.fh__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.fh__robot { width: 38px; height: 38px; flex: none; }
.fh__brandtext { display: flex; flex-direction: column; line-height: 1.15; }
.fh__name { font-family: var(--font-en); font-weight: 800; letter-spacing: .04em; font-size: 1.02rem; }
.fh__name b { color: var(--pink); }
.fh__sub { font-family: var(--font-jp); font-size: .68rem; color: var(--sub); letter-spacing: .04em; }

.fh__nav { display: flex; align-items: center; gap: 4px; }
.fh__nav a {
  font-family: var(--font-jp); font-weight: 500; font-size: .9rem;
  padding: 9px 13px; border-radius: var(--r-pill); color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.fh__nav a:hover { background: var(--lav-soft); color: var(--lav-ink); }
.fh__nav a.is-active { color: var(--pink-ink); background: var(--pink-soft); }
.fh__nav a.cta {
  background: var(--ink); color: #fff; font-weight: 700; margin-left: 6px;
  box-shadow: 0 6px 16px rgba(17,24,39,.22);
}
.fh__nav a.cta:hover { background: var(--pink); color: #fff; }

.fh__status {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 6px;
  font-family: var(--font-en); font-size: .72rem; font-weight: 600; color: var(--mint-ink);
  background: var(--mint-soft); padding: 6px 11px; border-radius: var(--r-pill);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); position: relative; }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mint); animation: ping 2.1s var(--ease) infinite; }

.fh__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; }
.fh__toggle span { display: block; width: 22px; height: 2.4px; background: var(--ink); border-radius: 2px; margin: 4px auto; transition: transform .25s var(--ease), opacity .2s; }
body.nav-open .fh__toggle span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
body.nav-open .fh__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .fh__toggle span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-jp); font-weight: 700; font-size: .98rem;
  padding: 14px 24px; border-radius: var(--r-pill);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--pink); color: #fff; box-shadow: 0 12px 26px rgba(255,92,154,.36); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(255,92,154,.46); }
.btn--ghost { background: #fff; color: var(--ink); border: 2px solid var(--line2); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--lav); color: var(--lav-ink); box-shadow: var(--shadow); }
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero { padding-top: clamp(34px, 5vw, 60px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4rem); line-height: 1.18; letter-spacing: .005em;
}
.hero h1 .accent { color: var(--pink); position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpath d='M3 11 C 60 4, 180 4, 237 9' stroke='%23FDE68A' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  z-index: -1;
}
.hero__sub { color: #4b5563; margin-top: 22px; max-width: 46ch; font-size: 1.04rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; color: var(--sub); font-size: .82rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 16px; height: 16px; }

.hero__visual { position: relative; aspect-ratio: 1 / 1; max-width: 480px; margin-inline: auto; width: 100%; }
.hero__blob {
  position: absolute; inset: 6% 4% 4% 6%; border-radius: 48% 52% 47% 53% / 52% 46% 54% 48%;
  background: linear-gradient(150deg, var(--lav-soft), var(--pink-soft) 55%, var(--mint-soft));
  animation: blob 14s ease-in-out infinite;
}
.hero__photo {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  border: 7px solid #fff; box-shadow: var(--shadow-lift); background: #fff;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* floating stickers */
.sticker { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--shadow); z-index: 3; }
.sticker--status {
  top: -2%; right: -4%; padding: 12px 14px; border-radius: 18px; min-width: 150px;
  border: 1px solid var(--line2);
}
.sticker--status .label { font-family: var(--font-en); font-size: .62rem; letter-spacing: .18em; color: var(--sub); }
.sticker--status .state { display: flex; align-items: center; gap: 7px; font-family: var(--font-en); font-weight: 800; color: var(--mint-ink); margin-top: 2px; }
.sticker--status .count { margin-top: 8px; font-family: var(--font-jp); font-size: .72rem; color: var(--sub); }
.sticker--status .count b { font-family: var(--font-en); font-size: 1.42rem; color: var(--ink); display: block; line-height: 1; margin-top: 3px; }
.sticker--status .bar { height: 6px; border-radius: 4px; background: var(--mint-soft); margin-top: 8px; overflow: hidden; }
.sticker--status .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint), var(--sky)); border-radius: 4px; }

.bubble {
  position: absolute; z-index: 4; background: #fff; color: var(--ink);
  font-family: var(--font-jp); font-weight: 500; font-size: .86rem;
  padding: 11px 15px; border-radius: 18px 18px 18px 5px; box-shadow: var(--shadow);
  border: 1.5px solid var(--pink-soft); max-width: 230px;
}
.bubble b { color: var(--pink-ink); }
.bubble--1 { top: 14%; left: -10%; }
.bubble--2 { bottom: 9%; right: -8%; border-radius: 18px 18px 5px 18px; border-color: var(--lav-soft); }

.sticker--coffee, .sticker--note, .sticker--bot {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px;
}
.sticker--coffee { bottom: 2%; left: 2%; background: var(--orange-soft); }
.sticker--note { top: 40%; right: -7%; background: var(--yellow-soft); transform: rotate(7deg); width: 72px; height: 72px; }
.sticker--bot { bottom: 16%; left: -8%; width: 78px; height: 78px; background: var(--sky-soft); }
.float { animation: floatY 6s ease-in-out infinite; }
.float--slow { animation-duration: 8s; }
.float--rev { animation: floatY2 7s ease-in-out infinite; }

/* =====================================================================
   PROCESS
   ===================================================================== */
.process__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.step {
  position: relative; background: #fff; border-radius: var(--r-lg); padding: 28px 24px;
  box-shadow: var(--shadow); border: 1px solid var(--line2);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.step__no { font-family: var(--font-en); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.step__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 14px 0 16px; }
.step__role { font-family: var(--font-en); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.step__title { font-family: var(--font-jp); font-weight: 700; font-size: 1.3rem; margin: 2px 0 10px; }
.step__desc { color: var(--sub); font-size: .94rem; }
.step--1 { } .step--1 .step__no { color: var(--lav); } .step--1 .step__icon { background: var(--lav-soft); }
.step--2 .step__no { color: var(--pink); } .step--2 .step__icon { background: var(--pink-soft); }
.step--3 .step__no { color: var(--mint-ink); } .step--3 .step__icon { background: var(--mint-soft); }
.step__arrow { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; color: var(--lav); }
.step:last-child .step__arrow { display: none; }

/* =====================================================================
   11 BUNCH
   ===================================================================== */
.bunch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.bcard {
  position: relative; border-radius: var(--r); padding: 20px 18px 18px;
  background: var(--white); border: 1.5px solid var(--line2); box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
  display: flex; flex-direction: column; min-height: 168px;
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.bcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bcard__letter {
  font-family: var(--font-en); font-weight: 800; font-size: 1.15rem; color: #fff;
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
}
.bcard__name { font-family: var(--font-jp); font-weight: 700; font-size: 1.06rem; }
.bcard__desc { color: var(--sub); font-size: .86rem; margin-top: 4px; flex: 1; }
.bcard__lead { font-family: var(--font-en); font-size: .72rem; color: var(--sub); margin-top: 12px; letter-spacing: .02em; }
.bcard__lead b { font-weight: 600; color: var(--ink); font-family: var(--font-body); }

.badge {
  font-family: var(--font-en); font-weight: 700; font-size: .62rem; letter-spacing: .1em;
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.badge--live { background: var(--mint-soft); color: var(--mint-ink); }
.badge--building { background: var(--pink); color: #fff; }
.badge--idea { background: #F3F4F6; color: var(--sub); }
.badge--designing { background: var(--lav-soft); color: var(--lav-ink); }
.badge--frozen { background: var(--sky-soft); color: var(--sky-ink); }
.badge--skeleton { background: var(--yellow-soft); color: var(--yellow-ink); }
.badge--beta { background: var(--orange-soft); color: var(--orange-ink); }

/* color themes per bunch letter (left accent + letter chip) */
.bcard[data-c="pink"]   .bcard__letter { background: var(--pink); }
.bcard[data-c="lav"]    .bcard__letter { background: var(--lav); }
.bcard[data-c="mint"]   .bcard__letter { background: var(--mint-ink); }
.bcard[data-c="yellow"] .bcard__letter { background: var(--yellow-ink); }
.bcard[data-c="orange"] .bcard__letter { background: var(--orange-ink); }
.bcard[data-c="sky"]    .bcard__letter { background: var(--sky-ink); }

.bcard.is-here {
  border: 2.5px solid var(--pink); background: linear-gradient(180deg, #fff, var(--pink-soft) 220%);
  box-shadow: 0 18px 40px rgba(255,92,154,.22);
  grid-column: span 1;
}
.bcard.is-here::before {
  content: "YOU ARE HERE"; position: absolute; top: -12px; left: 16px;
  font-family: var(--font-en); font-weight: 800; font-size: .6rem; letter-spacing: .12em;
  background: var(--pink); color: #fff; padding: 5px 10px; border-radius: var(--r-pill);
  box-shadow: 0 6px 14px rgba(255,92,154,.4);
}
.bcard.is-here .bcard__hint { font-family: var(--font-jp); font-size: .8rem; color: var(--pink-ink); font-weight: 700; margin-top: 8px; }

/* =====================================================================
   29 AGENTS
   ===================================================================== */
.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.tcard {
  border-radius: var(--r); padding: 24px 20px; background: #fff;
  border: 1.5px solid var(--line2); box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tcard__head { display: flex; align-items: center; gap: 12px; }
.tcard__icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.tcard__en { font-family: var(--font-en); font-weight: 800; font-size: 1.04rem; line-height: 1.1; }
.tcard__jp { font-family: var(--font-jp); font-size: .8rem; color: var(--sub); }
.tcard__count { margin-left: auto; font-family: var(--font-en); font-weight: 800; font-size: 1.5rem; }
.tcard__role { color: var(--sub); font-size: .86rem; margin: 14px 0 12px; }
.tcard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--font-en); font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: #F6F4FA; color: #4b5563; }

.tcard[data-team="gov"] { background: linear-gradient(180deg,#fff, var(--lav-soft)); }
.tcard[data-team="gov"] .tcard__icon { background: var(--lav); color:#fff; } .tcard[data-team="gov"] .tcard__count { color: var(--lav-ink); }
.tcard[data-team="inf"] { background: linear-gradient(180deg,#fff, var(--sky-soft)); }
.tcard[data-team="inf"] .tcard__icon { background: var(--sky); color:#fff; } .tcard[data-team="inf"] .tcard__count { color: var(--sky-ink); }
.tcard[data-team="eng"] { background: linear-gradient(180deg,#fff, var(--mint-soft)); }
.tcard[data-team="eng"] .tcard__icon { background: var(--mint-ink); color:#fff; } .tcard[data-team="eng"] .tcard__count { color: var(--mint-ink); }
.tcard[data-team="con"] { background: linear-gradient(180deg,#fff, var(--orange-soft)); }
.tcard[data-team="con"] .tcard__icon { background: var(--orange-ink); color:#fff; } .tcard[data-team="con"] .tcard__count { color: var(--orange-ink); }
.tcard[data-team="biz"] { background: linear-gradient(180deg,#fff, var(--pink-soft)); }
.tcard[data-team="biz"] .tcard__icon { background: var(--pink); color:#fff; } .tcard[data-team="biz"] .tcard__count { color: var(--pink-ink); }

/* =====================================================================
   TODAY'S OUTPUT
   ===================================================================== */
.output__card {
  position: relative; background: #fff; border-radius: var(--r-lg); border: 1.5px solid var(--line2);
  box-shadow: var(--shadow); padding: clamp(20px, 3vw, 34px); overflow: hidden;
}
.output__card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--pink), var(--lav), var(--mint));
}
.output__win { display: flex; gap: 7px; margin-bottom: 18px; }
.output__win i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.output__win i:nth-child(1){ background: var(--pink); } .output__win i:nth-child(2){ background: var(--yellow); } .output__win i:nth-child(3){ background: var(--mint); }
.log { display: flex; align-items: baseline; gap: 16px; padding: 11px 4px; border-bottom: 1px dashed var(--line2); }
.log:last-child { border-bottom: 0; }
.log__time { font-family: var(--font-en); font-weight: 700; font-size: .84rem; color: var(--lav-ink); flex: none; min-width: 52px; }
.log__tag { font-family: var(--font-jp); font-weight: 700; font-size: .78rem; padding: 2px 9px; border-radius: var(--r-pill); background: var(--pink-soft); color: var(--pink-ink); flex: none; }
.log__txt { color: var(--ink); font-size: .94rem; }
.output__bot { position: absolute; right: 18px; bottom: 12px; width: 72px; opacity: .92; }
.output__note { margin-top: 14px; font-size: .76rem; color: var(--sub); }

/* =====================================================================
   CTA
   ===================================================================== */
.cta__panel {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--lav-soft), var(--pink-soft) 60%, var(--yellow-soft));
  border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px) var(--gutter);
  border: 1.5px solid var(--line);
}
.cta__panel h2 { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem); }
.cta__panel p { color: #4b5563; max-width: 48ch; margin: 16px auto 28px; }

/* =====================================================================
   Footer
   ===================================================================== */
.ft { border-top: 1px solid var(--line); padding-block: 40px; margin-top: 30px; }
.ft__inner { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.ft__brand { font-family: var(--font-en); font-weight: 800; letter-spacing: .04em; }
.ft__brand span { color: var(--pink); }
.ft__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.ft__nav a { font-family: var(--font-jp); font-size: .85rem; color: var(--sub); }
.ft__nav a:hover { color: var(--pink-ink); }
.ft__copy { width: 100%; color: var(--sub); font-size: .76rem; }

/* =====================================================================
   reveal / motion
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(18px); }
[data-stagger].in > * { animation: pop .6s var(--ease) forwards; }

@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(10px) rotate(7deg); } }
@keyframes blob { 0%,100% { border-radius: 48% 52% 47% 53% / 52% 46% 54% 48%; } 50% { border-radius: 54% 46% 53% 47% / 46% 54% 47% 53%; } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.1); opacity: 0; } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.robot__eyes { transform-origin: center; animation: blink 5s infinite; }

/* hero load-in stagger */
.hero__copy > * { opacity: 0; animation: pop .7s var(--ease) forwards; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .15s; }
.hero__copy > *:nth-child(3) { animation-delay: .25s; }
.hero__copy > *:nth-child(4) { animation-delay: .35s; }
.hero__copy > *:nth-child(5) { animation-delay: .45s; }
.hero__visual { opacity: 0; animation: pop .9s var(--ease) .3s forwards; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
  .process__flow { grid-template-columns: 1fr; }
  .step__arrow { right: 50%; top: auto; bottom: -22px; transform: translateX(50%) rotate(90deg); }
  .step:last-child .step__arrow { display: none; }
}
@media (max-width: 860px) {
  .fh__toggle { display: block; }
  .fh__status { display: none; }
  .fh__nav {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255,253,248,.98); backdrop-filter: blur(12px);
    padding: 16px var(--gutter) 26px; border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .25s var(--ease), opacity .25s;
    max-height: calc(100vh - 70px); overflow: auto;
  }
  body.nav-open .fh__nav { transform: none; opacity: 1; pointer-events: auto; }
  .fh__nav a { padding: 13px 16px; font-size: 1rem; }
  .fh__nav a.cta { margin-left: 0; text-align: center; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; order: 2; }
  .hero__eyebrow, .hero__cta, .hero__trust { justify-content: center; }
  .hero__sub { margin-inline: auto; }
  .hero__visual { order: 1; max-width: 360px; }
  .bubble--1 { left: -2%; } .bubble--2 { right: -2%; }
}
@media (max-width: 520px) {
  .bunch__grid { grid-template-columns: 1fr 1fr; }
  .bcard { min-height: 0; }
  .bcard__desc { display: none; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .sticker--note, .sticker--bot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
  .hero__copy > *, .hero__visual { opacity: 1; }
}

/* =====================================================================
   Hover interactions — 「触って楽しい」工場見学インタラクション (追加)
   index-factory.html 専用。レイアウト・文字サイズ・構成は変更しない。
   方針: 淡く色づく / 枠線が少し濃く / 影が少し強く / -4px ふわっと浮く / 0.25s
   ===================================================================== */

/* 色・枠・影・浮きをなめらかに遷移させる */
.bcard, .step, .tcard, .output__card, .cta__panel {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.bcard__letter, .badge, .step__icon, .tcard__icon,
.sticker--coffee, .sticker--note, .sticker--bot {
  transition: filter .25s var(--ease), transform .25s var(--ease);
}

/* ---- ナビ / ゴーストボタン（淡ラベンダー） ---- */
.btn--ghost:hover { background: var(--h-lav); }

/* ---- PROCESS 3カード ---- */
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.step--1:hover { background: var(--h-lav);  border-color: var(--lav); }
.step--2:hover { background: var(--h-pink); border-color: var(--pink); }
.step--3:hover { background: var(--h-mint); border-color: var(--mint-ink); }
.step:hover .step__icon { transform: scale(1.06) rotate(-3deg); }

/* ---- 11 BUNCH（各カードを per-letter で色づけ） ---- */
.bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bcard:hover .bcard__letter { filter: brightness(1.08) saturate(1.12); transform: scale(1.05); }
.bcard:hover .badge { filter: brightness(1.05); }
.bcard[data-hover="pink"]:hover   { background: var(--h-pink);   border-color: var(--pink); }
.bcard[data-hover="lav"]:hover    { background: var(--h-lav);    border-color: var(--lav); }
.bcard[data-hover="orange"]:hover { background: var(--h-orange); border-color: var(--orange); }
.bcard[data-hover="yellow"]:hover { background: var(--h-yellow); border-color: var(--yellow-ink); }
.bcard[data-hover="sky"]:hover    { background: var(--h-sky);    border-color: var(--sky); }
.bcard[data-hover="mint"]:hover   { background: var(--h-mint);   border-color: var(--mint-ink); }
.bcard[data-hover="gray"]:hover   { background: var(--h-gray);   border-color: #D1D5DB; }

/* 塊C = YOU ARE HERE: hoverでピンク〜ラベンダーの淡グラデ */
.bcard.is-here:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--h-pink), var(--h-lav));
  border-color: var(--pink);
  box-shadow: 0 22px 46px rgba(255, 92, 154, .26);
}

/* ---- 29 AGENTS（チームカラーで色づく） ---- */
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tcard[data-team="gov"]:hover { background: var(--h-lav);    border-color: var(--lav); }
.tcard[data-team="inf"]:hover { background: var(--h-sky);    border-color: var(--sky); }
.tcard[data-team="eng"]:hover { background: var(--h-mint);   border-color: var(--mint-ink); }
.tcard[data-team="con"]:hover { background: var(--h-orange); border-color: var(--orange); }
.tcard[data-team="biz"]:hover { background: var(--h-pink);   border-color: var(--pink); }
.tcard:hover .tcard__icon { filter: brightness(1.08); transform: scale(1.05); }

/* ---- TODAY'S OUTPUT カード ---- */
.output__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--lav); }

/* ---- お仕事相談CTA パネル ---- */
.cta__panel:hover { box-shadow: var(--shadow-lift); }

/* ---- 小さなアイコンカード（ヒーローの小物） ---- */
.sticker--coffee:hover, .sticker--note:hover, .sticker--bot:hover { filter: brightness(1.06); transform: scale(1.04); }

/* 控えめモードでは浮きを止める（色づきは維持） */
@media (prefers-reduced-motion: reduce) {
  .bcard:hover, .step:hover, .tcard:hover, .output__card:hover { transform: none; }
}

/* =====================================================================
   Cursor glow — カーソル追従の淡い光（要素はfactory.jsが生成）
   PC/マウス時のみ。multiplyブレンドで白地に淡く乗り、文字は暗いまま読める。
   ===================================================================== */
.cursor-glow {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  mix-blend-mode: multiply;
  background:
    radial-gradient(200px circle at var(--mx, -200px) var(--my, -200px), rgba(255, 92, 154, .20), transparent 60%),
    radial-gradient(300px circle at var(--mx, -200px) var(--my, -200px), rgba(167, 139, 250, .16), transparent 62%),
    radial-gradient(440px circle at var(--mx, -200px) var(--my, -200px), rgba(94, 234, 212, .12), transparent 68%);
  will-change: background-position;
}
.cursor-glow.is-on { opacity: 1; }

/* タッチ環境・粗いポインタ・控えめモードでは完全に無効 */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
}

/* =====================================================================
   Sub-page components (about / process / logs / works / 記事詳細)
   既存トークン・hover方針を流用した共通追加。
   ===================================================================== */

/* compact page hero (下層ページ共通) */
.page-hero { padding-top: clamp(26px, 5vw, 52px); padding-bottom: clamp(6px, 2vw, 14px); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); line-height: 1.2; }
.page-hero .lead { color: var(--sub); margin-top: 14px; max-width: 60ch; }

/* 汎用インフォカード */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.info-card {
  background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: var(--h-lav); border-color: var(--lav); }
.info-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lav-soft); margin-bottom: 14px; color: var(--lav-ink); }
.info-card h3 { font-family: var(--font-jp); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; }
.info-card p { color: var(--sub); font-size: .92rem; }
.info-card[data-c="pink"]:hover{background:var(--h-pink);border-color:var(--pink);} .info-card[data-c="pink"] .info-card__icon{background:var(--pink-soft);color:var(--pink-ink);}
.info-card[data-c="mint"]:hover{background:var(--h-mint);border-color:var(--mint-ink);} .info-card[data-c="mint"] .info-card__icon{background:var(--mint-soft);color:var(--mint-ink);}
.info-card[data-c="orange"]:hover{background:var(--h-orange);border-color:var(--orange);} .info-card[data-c="orange"] .info-card__icon{background:var(--orange-soft);color:var(--orange-ink);}
.info-card[data-c="sky"]:hover{background:var(--h-sky);border-color:var(--sky);} .info-card[data-c="sky"] .info-card__icon{background:var(--sky-soft);color:var(--sky-ink);}

/* 初心者向け補足 callout */
.note-callout { background: var(--sky-soft); border: 1.5px solid #cfe2ff; border-radius: var(--r); padding: 15px 18px; display: flex; gap: 12px; align-items: flex-start; }
.note-callout .tag { flex: none; font-family: var(--font-en); font-weight: 800; font-size: .6rem; letter-spacing: .1em; color: #fff; background: var(--sky-ink); padding: 4px 9px; border-radius: var(--r-pill); margin-top: 3px; }
.note-callout p { color: #374151; font-size: .9rem; }
.note-callout b { color: var(--ink); }

/* profile (about) */
.profile { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; }
.profile__photo { border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow); aspect-ratio: 1 / 1; background: var(--lav-soft); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__role { font-family: var(--font-en); font-size: .76rem; letter-spacing: .14em; color: var(--pink-ink); text-transform: uppercase; margin: 0 0 8px; }
.profile__body h2 { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); }
.profile__body p { color: #4b5563; margin-top: 12px; }
@media (max-width: 640px) { .profile { grid-template-columns: 1fr; text-align: center; } .profile__photo { max-width: 150px; margin-inline: auto; } }

/* チェックリスト（できること / スタンス / 次にやること） */
.check-list { display: grid; gap: 10px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r-sm); padding: 13px 16px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.check-list li:hover { border-color: var(--mint-ink); background: var(--h-mint); }
.check-list li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-ink); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.check-list b { color: var(--ink); } .check-list span { color: var(--sub); }
.check-list.todo li::before { content: "→"; background: var(--lav-soft); color: var(--lav-ink); }

/* 縦フロー（process詳細） */
.flow { display: grid; gap: 14px; }
.flow__step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.flow__step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--lav); }
.flow__num { font-family: var(--font-en); font-weight: 800; font-size: 1.5rem; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--lav-soft); color: var(--lav-ink); }
.flow__step h3 { font-family: var(--font-jp); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.flow__step p { color: var(--sub); font-size: .93rem; }

/* timeline（logs 更新ログ / 改善履歴） */
.timeline { position: relative; display: grid; gap: 18px; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--pink), var(--lav), var(--mint)); border-radius: 2px; }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: -26px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); }
.tl__date { font-family: var(--font-en); font-weight: 700; font-size: .8rem; color: var(--lav-ink); }
.tl__title { font-family: var(--font-jp); font-weight: 700; margin: 2px 0 4px; }
.tl__desc { color: var(--sub); font-size: .92rem; }

/* 記事リスト（logs 動的読込・factory配色） */
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; list-style: none; padding: 0; }
.article-card { list-style: none; }
.article-card__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.article-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--pink); background: var(--h-pink); }
.article-card__date { font-family: var(--font-en); font-weight: 700; font-size: .76rem; color: var(--lav-ink); }
.article-card__title { font-family: var(--font-jp); font-weight: 700; font-size: 1.08rem; margin: 6px 0 8px; }
.article-card__summary { color: var(--sub); font-size: .9rem; flex: 1; }
.article-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; list-style: none; padding: 0; }
.articles-empty { grid-column: 1 / -1; list-style: none; padding: 1.25rem; color: var(--sub); background: var(--bg); border: 1px dashed var(--line2); border-radius: var(--r); }

/* works（作品集） */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.work-card { background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.work-card__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; }
.work-card h3 { font-family: var(--font-jp); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.work-card p { color: var(--sub); font-size: .9rem; }
.work-card__status { display: inline-block; margin-top: 12px; }
.work-card[data-c="pink"] .work-card__icon{background:var(--pink);} .work-card[data-c="pink"]:hover{background:var(--h-pink);border-color:var(--pink);}
.work-card[data-c="lav"] .work-card__icon{background:var(--lav);} .work-card[data-c="lav"]:hover{background:var(--h-lav);border-color:var(--lav);}
.work-card[data-c="mint"] .work-card__icon{background:var(--mint-ink);} .work-card[data-c="mint"]:hover{background:var(--h-mint);border-color:var(--mint-ink);}
.work-card[data-c="orange"] .work-card__icon{background:var(--orange-ink);} .work-card[data-c="orange"]:hover{background:var(--h-orange);border-color:var(--orange);}
.work-card[data-c="sky"] .work-card__icon{background:var(--sky-ink);} .work-card[data-c="sky"]:hover{background:var(--h-sky);border-color:var(--sky);}
.work-card[data-c="yellow"] .work-card__icon{background:var(--yellow-ink);} .work-card[data-c="yellow"]:hover{background:var(--h-yellow);border-color:var(--yellow-ink);}

/* 記事詳細ページ（logs/*.html） */
.article { max-width: 760px; padding-block: clamp(36px, 6vw, 68px); }
.article__date { font-family: var(--font-en); font-weight: 700; color: var(--lav-ink); font-size: .85rem; }
.article__title { font-family: var(--font-jp); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.3; margin: 6px 0 14px; }
.article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; list-style: none; padding: 0; }
.article__body { font-size: 1.02rem; line-height: 1.95; }
.article__body h2 { font-family: var(--font-jp); font-weight: 700; font-size: 1.4rem; margin: 1.6em 0 .5em; }
.article__body h3 { font-family: var(--font-jp); font-weight: 700; font-size: 1.15rem; margin: 1.4em 0 .4em; }
.article__body p { margin: 1em 0; }
.article__body ul, .article__body ol { margin: 1em 0; padding-left: 1.4em; }
.article__body li { margin: .4em 0; }
.article__body blockquote { border-left: 4px solid var(--pink); background: var(--pink-soft); margin: 1.2em 0; padding: .6em 1.1em; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: #4b3340; }
.article__body code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f3f0fa; padding: .1em .4em; border-radius: 6px; font-size: .92em; }
.article__body pre { background: #1f2030; color: #e8e6f0; padding: 16px; border-radius: var(--r-sm); overflow: auto; }
.article__body pre code { background: none; color: inherit; padding: 0; }
.article__body a { color: var(--pink-ink); text-decoration: underline; }
.article__body hr { border: 0; border-top: 1px dashed var(--line2); margin: 1.8em 0; }
.article__back { display: inline-block; margin-top: 28px; font-family: var(--font-jp); font-weight: 700; color: var(--lav-ink); }

@media (max-width: 520px) {
  .flow__step { grid-template-columns: 52px 1fr; gap: 12px; padding: 18px; }
  .flow__num { width: 52px; height: 52px; font-size: 1.2rem; }
}

/* contact form (about #contact) */
.contact-form { display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 6px; text-align: left; }
.field label { font-family: var(--font-jp); font-weight: 700; font-size: .9rem; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line2);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.form-note { font-size: .8rem; color: var(--sub); margin-top: 4px; }

/* =====================================================================
   Clickable cards（カードを<a>化）＋ カード内の誘導キュー
   ===================================================================== */
a.bcard, a.tcard, a.work-card { text-decoration: none; color: inherit; cursor: pointer; }
.card-cue {
  margin-top: 14px; display: flex; justify-content: flex-end; align-items: center; gap: 5px;
  font-family: var(--font-en); font-weight: 700; font-size: .76rem; color: var(--pink-ink);
}
.card-cue svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
a.bcard:hover .card-cue svg, a.tcard:hover .card-cue svg, a.work-card:hover .card-cue svg { transform: translateX(4px); }
a.bcard:focus-visible, a.tcard:focus-visible, a.work-card:focus-visible { outline: 3px solid var(--lav); outline-offset: 3px; }

/* アンカー着地が固定ヘッダーに隠れないように */
section[id], article[id] { scroll-margin-top: 88px; }

/* 詳細セクション（process下部の塊/チーム詳細・works下部の作品詳細） */
.detail-list { display: grid; gap: 16px; }
.detail { background: #fff; border: 1.5px solid var(--line2); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.detail__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.detail__head h3 { font-family: var(--font-jp); font-weight: 700; font-size: 1.2rem; }
.detail__letter { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; color: #fff; flex: none; }
.detail__meta { display: grid; gap: 10px; margin: 0; }
.detail__meta > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; }
.detail__meta dt { font-family: var(--font-jp); font-weight: 700; font-size: .85rem; color: var(--pink-ink); }
.detail__meta dd { margin: 0; color: #4b5563; font-size: .93rem; }
.detail__back { margin-top: 14px; font-size: .85rem; }
.detail__back a { color: var(--lav-ink); font-weight: 700; }
@media (max-width: 560px) { .detail__meta > div { grid-template-columns: 1fr; gap: 2px; } }

/* =====================================================================
   SNS リンク（ヘッダー/フッターは factory.js が注入・about/CTA は静的）
   ===================================================================== */
a.info-card, a.output__card { text-decoration: none; color: inherit; cursor: pointer; }
.fh__social { display: inline-flex; align-items: center; gap: 2px; }
.fh__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink); transition: background-color .2s var(--ease), color .2s var(--ease); }
.fh__social a:hover { background: var(--pink-soft); color: var(--pink-ink); }
.ft__social { width: 100%; font-family: var(--font-jp); font-size: .85rem; color: var(--sub); display: flex; align-items: center; gap: 10px; }
.ft__social a { display: inline-flex; align-items: center; gap: 5px; color: var(--pink-ink); font-weight: 700; }
.ft__social a:hover { text-decoration: underline; }
.sns-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sns-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: #fff; font-family: var(--font-jp); font-weight: 700; font-size: .92rem; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.sns-link:hover { transform: translateY(-2px); border-color: var(--pink); background: var(--h-pink); }
.sns-link svg { width: 18px; height: 18px; flex: none; }
.output__more { text-align: right; margin-top: 14px; }
.output__more a { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-en); font-weight: 700; font-size: .8rem; color: var(--pink-ink); }
.output__more svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.output__more a:hover svg { transform: translateX(4px); }