/* グレージュの地に、墨の文字と朱の差し色 */
:root {
  --paper: #dedad4;
  --panel: #cfcac2;
  --ink: #2a2622;
  --muted: #6e675e;
  --line: #c2bcb3;
  --frame: #2a2622;
  --shu: #be4a2f;
  --shadow: rgba(50, 40, 30, .35);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.mincho { font-family: "Shippori Mincho", serif; font-weight: 500; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

header { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; }
.me { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.me img { width: 34px; height: 34px; border-radius: 50%; }
.me span::after { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--shu); margin-left: 6px; vertical-align: 2px; }
nav { display: flex; gap: 28px; font-size: 13px; color: var(--muted); }
nav a:hover { color: var(--ink); }

.hero { padding: 36px 0 112px; }
.hero .eyebrow { font-size: 12px; letter-spacing: .3em; color: var(--shu); margin-bottom: 28px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 54px); line-height: 1.5; letter-spacing: .1em; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--shu); }
.hero p { margin-top: 32px; color: var(--muted); font-size: 14px; max-width: 30em; }

/* アプリ：画面の枠と説明を左右交互に並べる */
.app { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; padding-bottom: 140px; }
.app:nth-of-type(even) .shot { order: 2; }
.shot { aspect-ratio: 5 / 5.4; display: grid; place-items: center; position: relative; background: var(--panel); overflow: hidden; }
.shot > * { position: relative; z-index: 1; }
.shot .phone {
  width: 40%; border-radius: 26px; border: 7px solid var(--frame);
  box-shadow: 0 30px 50px -20px var(--shadow);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.shot .big-icon { width: 34%; border-radius: 22%; box-shadow: 0 24px 40px -18px var(--shadow); }
.app:hover .shot .phone { transform: translateY(-6px); }
.shot .num { position: absolute; left: 22px; top: 14px; font-size: 13px; color: var(--shu); letter-spacing: .2em; }
.text .kind { font-size: 12px; color: var(--muted); letter-spacing: .2em; display: flex; align-items: center; gap: 12px; }
.text .new { font-size: 10px; color: #fff; background: var(--shu); letter-spacing: .15em; padding: 0 7px; line-height: 1.8; }
.text h2 { display: flex; align-items: center; gap: 14px; font-size: 30px; margin: 14px 0 4px; letter-spacing: .1em; }
.text h2 img { width: 40px; height: 40px; border-radius: 10px; }
.text .sub { font-size: 13px; color: var(--muted); }
.text .desc { margin-top: 26px; font-size: 14px; }
.text .tags { margin-top: 18px; font-size: 12px; color: var(--muted); }
.text .tags span + span::before { content: "／"; margin: 0 .6em; opacity: .6; }

/* リンク：下線だけ。カーソルを乗せると朱の下線が左から引かれる */
.links { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 13px; }
.links a, .links .soon { padding-bottom: 4px; display: inline-flex; gap: 18px; }
.links a {
  --lc: var(--ink);
  background: linear-gradient(var(--shu), var(--shu)) left bottom / 0 1px no-repeat,
              linear-gradient(var(--lc), var(--lc)) left bottom / 100% 1px no-repeat;
  transition: background-size .45s cubic-bezier(.2, .7, .2, 1), color .3s;
}
.links a.sub { --lc: var(--line); color: var(--muted); }
.links a span { color: var(--shu); }
.links a:hover { color: var(--shu); background-size: 100% 1px, 100% 1px; }
.links .soon { color: var(--muted); border-bottom: 1px dashed var(--line); }

.contact { border-top: 1px solid var(--line); padding: 72px 0 96px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.contact h2 { font-weight: 600; font-size: 22px; letter-spacing: .12em; margin-bottom: 10px; }
.contact p { font-size: 13px; color: var(--muted); }
.contact .links { margin-top: 0; }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ── アニメーション（JavaScriptが動くときだけ） ── */
/* 各段がスクロールでふわっと出る */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* 見出し：墨がにじむように一文字ずつ */
.hero h1 .ch { display: inline-block; white-space: pre; opacity: 0; filter: blur(10px); transform: translateY(6px);
  animation: ink 1.1s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes ink { to { opacity: 1; filter: blur(0); transform: none; } }
/* 朱の点：はんこを押すように */
.js .hero h1 em { display: inline-block; opacity: 0; transform: scale(2.4);
  animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--n, 12) * 70ms + 650ms); }
@keyframes stamp { to { opacity: 1; transform: scale(1); } }
/* 枠の上をカーソルの光がなでる */
.shot::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 70%); }
.shot:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .hero h1 .ch, .js .hero h1 em { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
  .shot .phone { transition: none; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  nav { gap: 18px; }
  nav .hide-sp { display: none; }
  .hero { padding: 20px 0 72px; }
  .app { grid-template-columns: 1fr; gap: 32px; padding-bottom: 96px; }
  .app:nth-of-type(even) .shot { order: 0; }
  .shot .phone { width: 48%; }
  .text h2 { font-size: 26px; }
}