/* ============================================================
   ユージント商店 | yujinto.com — Bento Lab
   ライトグレー地 × 白タイル × コバルト / ライム / オレンジ
   ============================================================ */

:root {
  --bg: #F1F2F5;
  --tile: #FFFFFF;
  --ink: #15171C;
  --sub: #585E69;
  --cobalt: #2B5CFF;
  --lime: #B8E926;
  --orange: #FF7A1A;
  --border: #E3E5EA;
  --jp: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --en: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--jp);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.container { width: min(1200px, 94%); margin-inline: auto; }
.en { font-family: var(--en); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(241, 242, 245, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner {
  width: min(1200px, 94%); margin-inline: auto;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.header-logo img { height: 40px; width: auto; transition: transform 0.3s var(--spring); }
.header-logo:hover img { transform: scale(1.04) rotate(-1.5deg); }
.gnav { display: flex; align-items: center; gap: 8px; }
.gnav a {
  font-weight: 700; font-size: 0.93rem; padding: 10px 18px; border-radius: 999px;
  transition: background 0.25s, transform 0.25s var(--spring);
}
.gnav a:hover { background: #fff; transform: translateY(-2px); }
.gnav-cta { background: var(--ink); color: #fff; }
.gnav-cta:hover { background: var(--cobalt) !important; color: #fff; }

/* Hamburger（モバイル） */
.menu-btn {
  display: none; position: relative;
  width: 48px; height: 48px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--border);
  transition: transform 0.25s var(--spring);
}
.menu-btn:active { transform: scale(0.92); }
.menu-btn span {
  position: absolute; left: 50%; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink); translate: -50% 0;
  transition: transform 0.35s var(--spring), top 0.35s var(--spring), opacity 0.25s;
}
.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 23px; }
.menu-btn span:nth-child(3) { top: 29px; }
body.nav-open .menu-btn span:nth-child(1) { top: 23px; transform: rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2) { opacity: 0; }
body.nav-open .menu-btn span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
@media (max-width: 768px) {
  .gnav { display: none; }
  .menu-btn { display: block; }
}

/* モバイルメニュー（白カードのドロップパネル） */
.mnav {
  position: fixed; z-index: 90;
  left: 3%; right: 3%; top: 86px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 24px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(21, 23, 28, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.98);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--spring), visibility 0.35s;
}
body.nav-open .mnav { opacity: 1; visibility: visible; transform: none; }
.mnav a {
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 900; font-size: 1.15rem; padding: 16px 18px; border-radius: 16px;
  transition: background 0.25s;
}
.mnav a:hover { background: var(--bg); }
.mnav a .en { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sub); }
.mnav a.mnav-cta { background: var(--ink); color: #fff; margin-top: 6px; justify-content: center; gap: 12px; }
.mnav a.mnav-cta .en { color: rgba(255, 255, 255, 0.7); }

/* ---------- Bento grid ---------- */
.bento {
  display: grid; gap: 16px; padding: 20px 0 0;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(96px, auto);
}
.tile {
  position: relative; overflow: hidden;
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 40px);
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--ease);
  --mx: 50%; --my: 50%;
}
.tile:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -28px rgba(21, 23, 28, 0.28); }
.tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(43, 92, 255, 0.07), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
}
.tile:hover::before { opacity: 1; }
.tile-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--en); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sub); margin-bottom: 14px;
}
.tile-tag::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--cobalt); flex: none; }
.tile-tag.t-lime::before { background: var(--lime); }
.tile-tag.t-orange::before { background: var(--orange); }

/* トップページのタイル配置 */
.t-hero { grid-column: span 8; grid-row: span 4; }
.t-mascot { grid-column: span 4; grid-row: span 2; }
.t-clock { grid-column: span 4; grid-row: span 2; }
.t-svc1, .t-svc2 { grid-column: span 6; grid-row: span 4; }
.t-auto { grid-column: span 5; grid-row: span 2; }
.t-marquee { grid-column: span 7; grid-row: span 2; }
.t-works { grid-column: span 7; grid-row: span 3; }
.t-owner { grid-column: span 5; grid-row: span 3; }
/* About ページのタイル配置 */
.t-ownerhero { grid-column: span 8; grid-row: span 3; }
.t-mascot-sub { grid-column: span 4; grid-row: span 3; }
.t-profile { grid-column: span 7; grid-row: span 4; }
.t-quote { grid-column: span 5; grid-row: span 4; }
.t-strength { grid-column: span 4; grid-row: span 1; }
.t-history { grid-column: span 12; }
.t-cta { grid-column: span 12; grid-row: span 2; }
@media (max-width: 960px) {
  .bento > * { grid-column: span 12 !important; grid-row: auto !important; }
}

/* ---------- Hero tile ---------- */
.t-hero { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hero-title {
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.45; letter-spacing: 0.03em;
}
.hero-title .w { display: inline-block; white-space: pre; transition: transform 0.3s var(--spring), color 0.3s; }
.hero-title .w:hover { transform: translateY(-8px) rotate(-2deg); color: var(--cobalt); }
.hero-title .hl { background: linear-gradient(transparent 58%, var(--lime) 58%); }
.hero-lead { margin-top: 18px; color: var(--sub); font-weight: 500; max-width: 38em; }
.hero-lead strong { color: var(--ink); }
.hero-lead p + p { margin-top: 0.7em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.98rem;
  padding: 15px 30px; border-radius: 999px;
  background: var(--ink); color: #fff;
  transition: transform 0.3s var(--spring), background 0.3s, box-shadow 0.3s;
}
.btn:hover { transform: translateY(-3px); background: var(--cobalt); box-shadow: 0 14px 28px -12px rgba(43, 92, 255, 0.55); }
.btn:active { transform: scale(0.95); }
.btn .ar { transition: transform 0.3s var(--spring); }
.btn:hover .ar { transform: translateX(5px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: 0 14px 28px -16px rgba(21, 23, 28, 0.3); border-color: var(--ink); }

/* ---------- Mascot tile（ドラッグ可能） ---------- */
.t-mascot, .t-mascot-sub { display: grid; place-items: center; background: var(--cobalt); border: none; touch-action: none; }
.t-mascot .tile-tag, .t-mascot-sub .tile-tag { position: absolute; top: 22px; left: 24px; color: rgba(255, 255, 255, 0.8); margin: 0; }
.t-mascot .tile-tag::before, .t-mascot-sub .tile-tag::before { background: var(--lime); }
.t-mascot-sub { background: var(--orange); }
.mascot-drag {
  width: min(150px, 52%); aspect-ratio: 1; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  cursor: grab; user-select: none; will-change: transform;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.mascot-drag:active { cursor: grabbing; }
.mascot-drag svg { width: 60%; color: var(--ink); pointer-events: none; }
.t-mascot .hint, .t-mascot-sub .hint {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em;
}

/* ---------- Clock tile ---------- */
.t-clock { display: flex; flex-direction: column; justify-content: center; }
.clock-time { font-family: var(--en); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.clock-date { color: var(--sub); font-weight: 600; font-size: 0.9rem; margin-top: 6px; }
.clock-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-weight: 700; font-size: 0.85rem;
  background: #EEF9D8; border-radius: 999px; padding: 6px 16px; width: fit-content;
}
.clock-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #69B41E; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- Service tiles ---------- */
.svc-icon {
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--cobalt);
  transition: transform 0.4s var(--spring);
}
.tile:hover .svc-icon { transform: rotate(-8deg) scale(1.08); }
.t-svc2 .svc-icon { background: var(--orange); }
.svc-icon svg { width: 30px; height: 30px; stroke: #fff; }
.svc-title { font-weight: 900; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.5; }
.svc-title small { display: block; font-size: 0.68em; font-weight: 700; color: var(--sub); margin-top: 4px; }
.svc-body { margin-top: 14px; color: var(--sub); font-weight: 500; font-size: 0.97rem; }
.svc-body p + p { margin-top: 0.8em; }

/* ---------- Automation demo tile ---------- */
.t-auto { background: var(--ink); color: #fff; border: none; }
.t-auto .tile-tag { color: rgba(255, 255, 255, 0.65); }
.auto-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.auto-task {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px 14px;
  transition: background 0.4s, color 0.4s;
}
.auto-task .st {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: grid; place-items: center; font-size: 10px;
  transition: all 0.4s var(--spring);
}
.auto-task.done { background: rgba(184, 233, 38, 0.18); }
.auto-task.done .st { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.auto-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--lime); color: var(--ink);
  font-weight: 900; font-size: 0.92rem;
  border-radius: 999px; padding: 11px 24px;
  transition: transform 0.3s var(--spring), filter 0.3s;
}
.auto-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.auto-btn:active { transform: scale(0.94); }
.auto-msg { margin-top: 10px; font-weight: 700; font-size: 0.85rem; color: var(--lime); opacity: 0; transition: opacity 0.4s; }
.auto-msg.show { opacity: 1; }

/* ---------- Marquee tile ---------- */
.t-marquee { display: flex; align-items: center; padding: 0; background: var(--lime); border: none; overflow: hidden; }
.marq { overflow: hidden; white-space: nowrap; width: 100%; }
.marq-track { display: inline-flex; animation: marq 22s linear infinite; }
.t-marquee:hover .marq-track { animation-play-state: paused; }
.marq-track span {
  font-family: var(--en); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: 0.04em; text-transform: uppercase;
  padding-right: 34px; display: inline-flex; align-items: center; gap: 34px; color: var(--ink);
}
.marq-track span::after { content: "●"; font-size: 0.5em; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (max-width: 960px) { .t-marquee { padding: 18px 0; } }

/* ---------- Works tile ---------- */
.works-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.wm {
  aspect-ratio: 1 / 1.05; border-radius: 18px;
  border: 1.5px dashed var(--border);
  display: grid; place-items: center; position: relative; overflow: hidden;
  transition: transform 0.35s var(--spring), border-color 0.35s;
  background: #FAFBFC;
}
.wm:hover { transform: translateY(-5px) rotate(-1.5deg); border-color: var(--cobalt); }
.wm::before {
  content: ""; position: absolute; inset: -120% -40%;
  background: linear-gradient(105deg, transparent 45%, rgba(43, 92, 255, 0.08) 50%, transparent 55%);
  animation: shine 4s var(--ease) infinite;
}
.wm:nth-child(2)::before { animation-delay: 0.6s; }
.wm:nth-child(3)::before { animation-delay: 1.2s; }
@keyframes shine { 0% { transform: translateX(-40%); } 60%, 100% { transform: translateX(40%); } }
.wm-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wm-in svg { width: 38px; color: #B9BDC6; }
.wm-in p { font-family: var(--en); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); }
.works-note { margin-top: 16px; color: var(--sub); font-weight: 500; font-size: 0.9rem; }
@media (max-width: 600px) { .works-mini { grid-template-columns: 1fr; } .wm { aspect-ratio: 16 / 7; } }

/* ---------- Owner tile（トップ） ---------- */
.t-owner { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(140deg, #fff, #F4F7FF); }
.owner-top { display: flex; align-items: center; gap: 20px; }
.owner-face {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center;
  transition: transform 0.4s var(--spring);
}
.tile:hover .owner-face { transform: rotate(-8deg) scale(1.06); }
.owner-face svg { width: 56%; color: #fff; }
.owner-name { font-weight: 900; font-size: 1.5rem; letter-spacing: 0.06em; }
.owner-name small {
  font-family: var(--en); display: block; font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.26em; color: var(--sub); text-transform: uppercase;
}
.owner-copy { margin-top: 14px; color: var(--sub); font-weight: 500; font-size: 0.95rem; }
.owner-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cobalt); }
.owner-link .ar { transition: transform 0.3s var(--spring); }
.owner-link:hover .ar { transform: translateX(5px); }

/* ---------- セクション見出し ---------- */
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-kicker {
  font-family: var(--en); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sub);
}
.sec-title { font-weight: 900; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: 0.04em; margin-top: 8px; }

/* ---------- Contact ---------- */
.contact { padding: clamp(70px, 9vw, 110px) 0; }
.contact-lead { text-align: center; color: var(--sub); font-weight: 500; margin-bottom: 40px; }
.contact-form {
  max-width: 760px; margin-inline: auto;
  background: var(--tile);
  border: 1px solid var(--border); border-radius: 28px;
  padding: clamp(28px, 4.5vw, 52px);
}
.form-row { margin-bottom: 26px; }
.form-label { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 10px; }
.form-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 999px;
  background: var(--cobalt); color: #fff;
}
.form-tag--opt { background: var(--bg); color: var(--sub); }
.form-input, .form-textarea {
  width: 100%;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg);
  padding: 14px 18px;
  transition: all 0.3s;
}
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: var(--cobalt); background: #fff;
  box-shadow: 0 0 0 4px rgba(43, 92, 255, 0.14);
}
.form-textarea { min-height: 160px; resize: vertical; }
.radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.radio-pill span {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--border);
  font-weight: 600; font-size: 0.9rem; background: var(--bg);
  transition: all 0.3s var(--spring);
}
.radio-pill input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.radio-pill input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.form-consent { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.form-consent input { width: 19px; height: 19px; accent-color: var(--cobalt); cursor: pointer; }
.form-consent a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 4px; }
.form-note { text-align: center; font-size: 0.84rem; color: var(--sub); margin-top: 12px; }
.form-error { color: #E23B3B; font-size: 0.85rem; font-weight: 700; margin-top: 8px; display: none; }
.form-row.has-error .form-error { display: block; }
.form-row.has-error .form-input, .form-row.has-error .form-textarea { border-color: #E23B3B; }
.form-submit { display: grid; place-items: center; margin-top: 22px; }
.form-submit .btn { padding: 17px 52px; font-size: 1.02rem; }
.form-submit .btn[disabled] { opacity: 0.6; pointer-events: none; transform: none; }
.form-submit-error {
  text-align: center; color: #E23B3B; font-size: 0.9rem; font-weight: 700; margin-top: 16px;
}
.form-submit-error a { text-decoration: underline; text-underline-offset: 4px; }

/* honeypot（ボット対策の隠しフィールド。display:none は使わない） */
.hp-field {
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* 送信完了表示 */
.contact-success { text-align: center; padding: clamp(48px, 7vw, 80px) clamp(28px, 4.5vw, 52px); }
.contact-success-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime); color: var(--ink);
  font-size: 1.6rem; font-weight: 900;
}
.contact-success h3 { font-weight: 900; font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.contact-success p:not(.contact-success-icon) { margin-top: 12px; color: var(--sub); font-weight: 500; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 44px 0; background: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-logo img { height: 38px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 2px 22px; font-weight: 600; font-size: 0.88rem; color: var(--sub); }
.footer-nav a { transition: color 0.3s; }
.footer-nav a:hover { color: var(--cobalt); }
.footer-copy { margin-top: 20px; font-family: var(--en); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--sub); }

/* ============================================================
   About ページ
   ============================================================ */
.page-head { padding: clamp(40px, 6vw, 70px) 0 8px; }
.page-head .sec-head { text-align: left; margin-bottom: 0; }

/* 店長ヒーロータイル */
.t-ownerhero { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(140deg, #fff, #F4F7FF); }
.owner-role {
  display: inline-block; width: fit-content;
  font-family: var(--en); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  border-radius: 999px; padding: 6px 16px;
}
.ownerhero-name { font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: 0.07em; margin-top: 16px; }
.ownerhero-name small { font-family: var(--en); font-weight: 600; font-size: 0.42em; letter-spacing: 0.28em; color: var(--sub); margin-left: 16px; text-transform: uppercase; }
.owner-bio { margin-top: 18px; }
.owner-bio li { position: relative; padding-left: 24px; margin-bottom: 8px; color: var(--sub); font-weight: 500; font-size: 0.97rem; }
.owner-bio li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 10px; border-radius: 4px; background: var(--cobalt);
}
.owner-bio li:nth-child(2)::before { background: var(--orange); }
.owner-bio li:nth-child(3)::before { background: var(--lime); }

/* プロフィールタイル */
.t-profile p { color: var(--sub); font-weight: 500; }
.t-profile p + p { margin-top: 0.9em; }
.t-profile strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(184, 233, 38, 0.55) 62%); }

/* 引用タイル */
.t-quote {
  background: var(--ink); color: #fff; border: none;
  display: flex; flex-direction: column; justify-content: center;
}
.t-quote .tile-tag { color: rgba(255, 255, 255, 0.65); }
.quote-body { font-weight: 900; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.9; letter-spacing: 0.03em; }
.quote-body .hl-lime { color: var(--lime); }
.quote-sub { margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 0.9rem; }

/* 強みタイル */
.t-strength { display: flex; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 0.98rem; }
.strength-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--cobalt);
  transition: transform 0.35s var(--spring);
}
.t-strength:nth-child(3n+1) .strength-icon { background: var(--cobalt); }
.t-strength:nth-child(3n+2) .strength-icon { background: var(--orange); }
.t-strength:nth-child(3n) .strength-icon { background: #69B41E; }
.t-strength:hover .strength-icon { transform: rotate(-8deg) scale(1.1); }
.strength-icon svg { width: 22px; height: 22px; stroke: #fff; }

/* 略歴タイル（年表）
   --yr: 1年あたりの縦の長さ / --gut: 軸のX位置
   区間の縦距離は年数に比例し、目盛りは1年に1本 */
.t-history { --yr: 22px; --gut: 70px; }
.history { position: relative; margin-top: 6px; }
.history .era {
  position: relative;
  min-height: calc(var(--yrs, 4) * var(--yr));
  padding-left: calc(var(--gut) + 34px);
  --era: var(--ink);
  --tick: color-mix(in srgb, var(--ink) 22%, transparent);
}
.history .era.now {
  --era: var(--cobalt);
  --tick: color-mix(in srgb, var(--cobalt) 45%, transparent);
}
/* 軸 */
.history .era::before {
  content: ""; position: absolute; left: var(--gut); top: 8px; bottom: -8px;
  width: 4px; margin-left: -2px; border-radius: 4px;
  background: var(--era);
}
.history .era:last-child::before {
  background: linear-gradient(180deg, var(--era) 0%, transparent 95%);
}
/* 毎年の目盛り（高さ＝年数分で打ち切り。文章が伸びても本数は年数のまま） */
.history .ticks {
  position: absolute; left: calc(var(--gut) + 4px); top: 8px;
  height: calc(var(--yrs, 4) * var(--yr)); width: 9px;
  background: repeating-linear-gradient(to bottom, var(--tick) 0 1.5px, transparent 1.5px var(--yr));
}
/* ノード */
.history .era::after {
  content: ""; position: absolute; left: var(--gut); top: 9px;
  width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--era);
  box-shadow: 0 0 0 4px var(--tile), 0 0 0 5px var(--border);
  z-index: 1;
}
@keyframes now-pulse {
  0% { box-shadow: 0 0 0 4px var(--tile), 0 0 0 5px var(--border), 0 0 0 5px rgba(43, 92, 255, 0.35); }
  70%, 100% { box-shadow: 0 0 0 4px var(--tile), 0 0 0 5px var(--border), 0 0 0 16px rgba(43, 92, 255, 0); }
}
.history .era.now::after { animation: now-pulse 2.6s var(--ease) infinite; }
/* 縦書きの経過年数 */
.history .durv {
  position: absolute; left: 0; top: 8px; width: calc(var(--gut) - 18px);
  height: calc(var(--yrs, 4) * var(--yr) - 16px);
  display: flex; align-items: center; justify-content: flex-end;
}
.history .durv span {
  writing-mode: vertical-rl;
  font-family: var(--en); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.28em; color: var(--sub);
}
.history .era.now .durv span { color: var(--cobalt); }
.year-num {
  font-family: var(--en); font-weight: 700;
  font-size: 1.7rem; line-height: 1.2; letter-spacing: 0.02em;
  color: var(--era);
}
.year-title { font-weight: 900; font-size: 1.02rem; line-height: 1.7; margin-top: 2px; }
.year-body { color: var(--sub); font-weight: 500; font-size: 0.9rem; line-height: 1.9; margin-top: 2px; }
@media (max-width: 760px) {
  .t-history { --yr: 15px; --gut: 52px; }
}

/* CTA タイル */
.t-cta {
  background: var(--cobalt); color: #fff; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px;
  padding: clamp(40px, 6vw, 70px) clamp(24px, 4vw, 48px);
}
.t-cta::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.14), transparent 45%); }
.t-cta h2 { font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: 0.04em; }
.t-cta p { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.t-cta .btn { margin-top: 18px; background: #fff; color: var(--ink); }
.t-cta .btn:hover { background: var(--lime); color: var(--ink); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.35); }

/* ============================================================
   Privacy ページ
   ============================================================ */
.privacy-card {
  background: var(--tile); border: 1px solid var(--border); border-radius: 28px;
  padding: clamp(28px, 5vw, 60px);
  max-width: 860px; margin: 20px auto 0;
}
.privacy-intro { color: var(--sub); font-weight: 500; margin-bottom: 44px; }
.privacy-block { margin-bottom: 44px; }
.privacy-block h2 {
  font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 900; line-height: 1.7; letter-spacing: 0.02em;
  padding-left: 18px; margin-bottom: 14px; position: relative;
}
.privacy-block h2::before {
  content: ""; position: absolute; left: 0; top: 0.28em; bottom: 0.28em;
  width: 5px; border-radius: 3px; background: var(--cobalt);
}
.privacy-block:nth-of-type(3n+2) h2::before { background: var(--orange); }
.privacy-block:nth-of-type(3n) h2::before { background: #69B41E; }
.privacy-block p, .privacy-block li { color: var(--sub); font-weight: 500; font-size: 0.96rem; }
.privacy-block p + p { margin-top: 0.8em; }
.privacy-block ul { margin-top: 0.8em; }
.privacy-block li { position: relative; padding-left: 20px; margin-bottom: 0.5em; }
.privacy-block li::before {
  content: ""; position: absolute; left: 2px; top: 0.78em;
  width: 8px; height: 8px; border-radius: 3px; background: var(--cobalt); opacity: 0.6;
}
.privacy-date { text-align: right; color: var(--sub); font-weight: 600; margin-top: 52px; }

/* ============================================================
   Works 詳細ページ（ケーススタディ）
   ============================================================ */
/* タイル配置 */
.t-cs-hero { grid-column: span 8; grid-row: span 3; display: flex; flex-direction: column; justify-content: center; }
.t-cs-visual { grid-column: span 4; grid-row: span 3; }
.t-cs-challenge, .t-cs-solution { grid-column: span 6; grid-row: span 3; }
.t-cs-features { grid-column: span 12; grid-row: span 3; }
.t-cs-arch { grid-column: span 12; grid-row: span 4; }
.t-cs-stack { grid-column: span 5; grid-row: span 2; }
.t-cs-stats { grid-column: span 7; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }

/* 見出し・リード */
.cs-client { margin-top: 12px; color: var(--sub); font-weight: 700; }
.cs-h { font-weight: 900; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.7; margin-bottom: 12px; }
.cs-lead { color: var(--sub); font-weight: 500; }
.cs-lead strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(184, 233, 38, 0.55) 62%); }

/* 概要メタ情報 */
.cs-meta { margin-top: 22px; display: grid; gap: 8px; }
.cs-meta > div { display: flex; gap: 18px; align-items: baseline; }
.cs-meta dt {
  flex: none; width: 108px;
  font-family: var(--en); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sub);
}
.cs-meta dd { font-weight: 700; font-size: 0.95rem; }

/* ビジュアルタイル（チャットモック） */
.t-cs-visual { display: grid; place-items: center; background: var(--cobalt); border: none; }
.t-cs-visual .tile-tag { position: absolute; top: 22px; left: 24px; color: rgba(255, 255, 255, 0.8); margin: 0; }
.t-cs-visual .tile-tag::before { background: var(--lime); }
.cs-chat { width: min(270px, 100%); margin-top: 26px; }
.csm-bot { fill: #fff; }
.csm-user { fill: var(--lime); }
.csm-doc { fill: #fff; }
.csm-txt { font-family: var(--jp); font-weight: 700; font-size: 11.5px; fill: var(--ink); }
.csm-line { stroke: #D9DCE3; stroke-width: 4; stroke-linecap: round; }
.csm-badge { fill: var(--ink); }
.csm-badge-txt { font-family: var(--en); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; fill: var(--lime); }
.csm-flow { stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.6; stroke-dasharray: 4 4; fill: none; }

/* 課題・解決タイル */
.t-cs-challenge p, .t-cs-solution p { color: var(--sub); font-weight: 500; font-size: 0.97rem; }
.t-cs-challenge p + p, .t-cs-solution p + p { margin-top: 0.8em; }

/* 主な機能 */
.cs-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; margin-top: 10px; }
.cs-feat { display: flex; gap: 14px; align-items: flex-start; }
.cs-feat-icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; background: var(--cobalt);
  transition: transform 0.35s var(--spring);
}
.cs-feat:nth-child(3n+2) .cs-feat-icon { background: var(--orange); }
.cs-feat:nth-child(3n) .cs-feat-icon { background: #69B41E; }
.cs-feat:hover .cs-feat-icon { transform: rotate(-8deg) scale(1.1); }
.cs-feat-icon svg { width: 21px; height: 21px; stroke: #fff; }
.cs-feat h3 { font-weight: 900; font-size: 1rem; line-height: 1.7; }
.cs-feat p { color: var(--sub); font-weight: 500; font-size: 0.88rem; margin-top: 4px; }
@media (max-width: 960px) { .cs-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-feats { grid-template-columns: 1fr; } }

/* アーキテクチャ図 */
.arch-wrap { overflow-x: auto; margin-top: 10px; }
.arch-wrap svg { width: 100%; min-width: 680px; height: auto; }
.arch-node { fill: #fff; stroke: var(--border); stroke-width: 1.5; }
.arch-node--accent { fill: var(--cobalt); stroke: none; }
.arch-node--sub { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 5 4; }
.arch-kicker { font-family: var(--en); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--sub); }
.arch-kicker--inv { fill: rgba(255, 255, 255, 0.75); }
.arch-label { font-family: var(--jp); font-weight: 700; font-size: 14px; fill: var(--ink); }
.arch-label--inv { fill: #fff; }
.arch-sub { font-family: var(--jp); font-weight: 600; font-size: 11.5px; fill: var(--sub); }
.arch-sub--inv { fill: rgba(255, 255, 255, 0.8); }
.arch-arrow { stroke: var(--sub); stroke-width: 1.6; fill: none; }
.arch-arrow--dash { stroke-dasharray: 5 4; }
.arch-head { fill: var(--sub); }
.arch-note { margin-top: 14px; color: var(--sub); font-weight: 500; font-size: 0.9rem; }

/* 技術スタック */
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cs-chips span {
  display: inline-block; padding: 7px 15px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg);
  font-weight: 700; font-size: 0.84rem;
}

/* 規模感 */
.cs-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.stat-num {
  font-family: var(--en); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: 0.02em;
  color: var(--cobalt);
}
.stat-num small { font-family: var(--jp); font-size: 0.45em; font-weight: 900; margin-left: 4px; }
.cs-stat:nth-child(2) .stat-num { color: var(--orange); }
.cs-stat:nth-child(3) .stat-num { color: #69B41E; }
.cs-stat p { color: var(--sub); font-weight: 700; font-size: 0.85rem; margin-top: 4px; }
@media (max-width: 600px) { .cs-stats-row { grid-template-columns: 1fr; gap: 18px; } }

/* 戻りリンク */
.cs-backrow { grid-column: span 12; padding: 6px 4px 0; }
.cs-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cobalt); }
.cs-back .ar { transition: transform 0.3s var(--spring); }
.cs-back:hover .ar { transform: translateX(-5px); }

/* トップページ：実績カード（公開済み） */
.wm--live { border: 1.5px solid var(--border); background: #fff; }
.wm--live::before { content: none; }
.wm--live .wm-in { gap: 5px; padding: 14px; text-align: center; }
.wm--live .wm-thumb svg { width: 42px; height: 42px; color: var(--cobalt); }
.wm--live .wm-cat { font-size: 0.66rem; letter-spacing: 0.12em; }
.wm--live .wm-title {
  font-family: var(--jp); font-weight: 900; font-size: 1.02rem;
  letter-spacing: 0.04em; text-transform: none; color: var(--ink);
}
.wm--live .wm-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 0.8rem; color: var(--cobalt); margin-top: 2px;
}
.wm--live .wm-more .ar { transition: transform 0.3s var(--spring); }
.wm--live:hover .wm-more .ar { transform: translateX(4px); }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px) scale(0.98);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--spring);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}