/* 合同会社ルメトリア — 共通スタイル
   方針：墨の闇に、灯（金）がひとつ。製品は端末ごと大きく見せ、余白で品を出す。
   色はブランドの指定（15_ブランド素材/logo/README.md）。金は点・細線・光だけに使う。 */
@import url('fonts/fonts.css'); /* 書体はサイト内から配信（外部のGoogleフォントに頼らない） */

:root {
  --paper: #F5F3EC;   /* 生成り */
  --ink: #2E2D33;     /* 墨 */
  --night: #24232A;   /* 墨を一段沈めた夜の地 */
  --gold: #C79A45;    /* 灯 */
  --ink-soft: #6E6A5F;/* 鈍色 */
  --rule: #D6D2C6;
  --rikyu: #8A8578;   /* 利休 */
  --seiji: #3D5A5B;   /* 青磁 */
  --seiji-deep: #2C4344;
  --bengara: #9C4A38; /* 弁柄 */
  --card: #FBFAF6;
  --on-night: #EEEBE2;
  --on-night-soft: #A9A498;
  --on-night-rule: rgba(238, 235, 226, 0.14);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --latin: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand: "Klee One", "Hiragino Maru Gothic ProN", "Yu Kyokasho", "Klee", cursive;
  --measure: 36rem;
}

* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.95; font-feature-settings: "palt"; }
img, svg { display: block; }
a { color: var(--seiji); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--seiji-deep); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1.2em; max-width: var(--measure); }
p, li, td, dd { line-break: strict; text-wrap: pretty; }
.note { color: var(--ink-soft); font-size: 0.9rem; }
.wrap { width: min(100% - 3rem, 72rem); margin-inline: auto; }

/* ---------- 夜の地：見出しの帯・最初の画面・足元 ---------- */
.masthead { background: var(--night); color: var(--on-night); position: relative; z-index: 3; }
header.site { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; }
header.site .brand { display: inline-flex; flex-direction: column; gap: 0.2rem; color: var(--on-night); text-decoration: none; }
header.site .brand svg { height: 24px; width: auto; }
header.site .brand span { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--on-night-soft); padding-left: 2px; }
header.site nav { display: flex; gap: 2rem; font-size: 0.88rem; }
header.site nav a { color: var(--on-night-soft); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
header.site nav a:hover { color: var(--on-night); }
header.site nav a[aria-current="page"] { color: var(--on-night); border-bottom-color: var(--gold); }

.hero { background: var(--night); color: var(--on-night); position: relative; padding: 6.5rem 0 0; isolation: isolate; display: flow-root; }
/* 製品の画面では見出しの帯を最初の画面に重ね、光が途切れないようにする */

.hero::before { /* 遠くの光だまり（下の端末のまわり） */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 40rem at 50% 115%, rgba(199, 154, 69, 0.07), transparent 70%);
}
.headline { position: relative; padding-top: 3.2rem; }
.headline::before { /* 灯の光が、見出しの文字に落ちる */
  content: ""; position: absolute; left: -8rem; right: -8rem; top: -8rem; height: 36rem; z-index: -1; pointer-events: none;
  background: radial-gradient(42rem 26rem at 7.5rem 9rem, rgba(199, 154, 69, 0.22), rgba(199, 154, 69, 0.06) 50%, transparent 100%);
}
.lamp { position: absolute; left: -0.5rem; top: 0.6rem; width: 14px; height: 14px; border-radius: 50%; background: #E8C77A;
  box-shadow: 0 0 10px 3px rgba(232, 199, 122, 0.9), 0 0 36px 10px rgba(199, 154, 69, 0.45), 0 0 120px 40px rgba(199, 154, 69, 0.18); }
.display {
  font-family: var(--serif); font-weight: 500; color: var(--on-night);
  font-size: clamp(2.5rem, 7vw, 6rem); line-height: 1.28; letter-spacing: 0.04em;
  margin: 0;
}
.intro { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, var(--measure)); gap: 3rem; margin-top: 3.5rem; align-items: start; }
.intro p { color: var(--on-night-soft); font-size: 1rem; margin: 0 0 1rem; }
.intro p:only-child, .intro > p:first-child { grid-column: 2; }
.intro .note { color: var(--on-night-soft); }
.hero a { color: var(--on-night); text-decoration-color: var(--gold); }
.hero a:hover { color: #fff; }
.etym { margin: 0; display: grid; gap: 0.9rem; border-left: 1px solid var(--on-night-rule); padding-left: 1.2rem; }
.etym div { display: flex; align-items: baseline; gap: 1rem; }
.etym dt { font-family: var(--latin); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.06em; color: var(--on-night); min-width: 4.6em; }
.etym dd { margin: 0; font-family: var(--serif); color: var(--on-night); font-size: 1.15rem; }

.scale { /* ものさし：細い基線と目盛り */
  height: 14px; margin-top: 4.5rem;
  background:
    linear-gradient(var(--on-night-rule), var(--on-night-rule)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, rgba(238,235,226,.28) 0 1px, transparent 1px 1.25rem) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(to right, rgba(238,235,226,.5) 0 1px, transparent 1px 6.25rem) left bottom / 100% 14px no-repeat;
}

/* iPad：製品を端末ごと見せる */
.stage { padding-top: 4rem; margin-bottom: -10rem; position: relative; z-index: 2; }
.device {
  margin: 0 auto; max-width: 58rem; padding: clamp(0.7rem, 1.6vw, 1.25rem);
  background: linear-gradient(160deg, #3a3940, #1b1a1f 55%);
  border-radius: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 50px 90px -40px rgba(0,0,0,.75),
    0 0 140px -30px rgba(199,154,69,.22);
}
.device-screen { border-radius: clamp(0.7rem, 1.5vw, 1.2rem); overflow: hidden; background: var(--card); aspect-ratio: 4 / 3; }
.caption { text-align: center; margin: 2.2rem auto 0; max-width: none; font-size: 0.92rem; color: var(--ink-soft); }
.caption a { color: var(--seiji); text-decoration-color: currentColor; }
.caption a:hover { color: var(--seiji-deep); }

/* 手帳の見開き（端末の中） */
.spread { display: grid; grid-template-columns: 1fr 1fr; height: 100%; font-size: clamp(0.5rem, 1.15vw, 0.86rem); color: var(--ink); }
.page { padding: 1.6em 1.8em; position: relative;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2.4em - 1px), rgba(138,133,120,.2) calc(2.4em - 1px) 2.4em); }
.page.left { border-right: 1px solid rgba(138,133,120,.3); box-shadow: inset -1.6em 0 1.6em -1.6em rgba(46,45,51,.12); }
.page.right { box-shadow: inset 1.6em 0 1.6em -1.6em rgba(46,45,51,.1); display: flex; flex-direction: column; gap: 1.5em; padding-top: 4.6em; }
.page-head { display: flex; gap: 0.8em; font-family: var(--serif); color: var(--rikyu); margin-bottom: 1em; }
.page-head span:first-child { color: var(--ink); font-size: 1.5em; line-height: 1; }
.day { display: grid; grid-template-columns: 2.6em 1fr; grid-template-rows: auto 1fr; column-gap: 0.6em; margin-bottom: 1.1em; }
.day b { font-family: var(--serif); font-weight: 500; font-size: 1.9em; line-height: 1; }
.day i { font-style: normal; color: var(--rikyu); font-size: 0.9em; grid-column: 1; grid-row: 2; padding-top: 0.2em; }
.day > div { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; }
.tag { background: rgba(61,90,91,.12); border-left: 3px solid var(--seiji); padding: 0.15em 0.7em; }
.move { background: repeating-linear-gradient(135deg, rgba(138,133,120,.18) 0 4px, transparent 4px 8px); color: var(--ink-soft); padding: 0.1em 0.7em; }
.move.late { color: var(--bengara); background: repeating-linear-gradient(135deg, rgba(156,74,56,.14) 0 4px, transparent 4px 8px); }
.ink { font-family: var(--hand); font-weight: 600; color: #2F4A58; font-size: 1.45em; line-height: 1.3; transform: rotate(-1.4deg); transform-origin: left; letter-spacing: 0.02em; }
.ink:nth-child(2) { transform: rotate(0.6deg); margin-left: 0.6em; }
.ink:nth-child(4) { transform: rotate(-0.4deg); margin-left: 0.3em; }
.ink:nth-child(5) { transform: rotate(1deg); }

/* 製品の最初の画面：紙の地に、家臣が三人立つ（絵は紙に描かれたものなので、夜ではなく紙に置く） */
.hero.product { padding-bottom: 0; overflow: hidden; background: var(--paper); color: var(--ink); }
.hero.product::before { display: none; }
.hero.product .headline::before { background: none; }
.hero.product .lamp { display: none; }
.hero.product .headline { padding-top: 1rem; }
.hero.product .display { color: var(--ink); }
.hero.product .intro p, .hero.product .intro .note { color: var(--ink-soft); }
.hero.product a { color: var(--seiji); text-decoration-color: currentColor; }
.hero.product a:hover { color: var(--seiji-deep); }
.hero.product .retainers::before { /* 足元の影 */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -0.6rem; height: 2.4rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46,45,51,.22), transparent); z-index: 0;
}
.hero.product .retainers img { filter: drop-shadow(0 0 1.5px rgba(46,45,51,.7)) drop-shadow(0 0 1px rgba(46,45,51,.5)) drop-shadow(0 10px 14px rgba(46,45,51,.2)); position: relative; }
.hero.product .retainers::after { /* 家臣の後ろの、少し濃い和紙の面。淡い顔や白髪が地に溶けないように */
  content: ""; position: absolute; left: -10%; right: -8%; top: -12%; bottom: -2rem; z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 48%, rgba(138,133,120,.55), rgba(138,133,120,.40) 55%, rgba(138,133,120,.12) 85%, transparent 100%);
}
.hero.product .wrap { position: relative; z-index: 1; padding-bottom: 5rem; }
.hero.product + .band { border-top: 1px solid var(--rule); }
.hero.product .display { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.hero.product .intro { grid-template-columns: minmax(0, var(--measure)); max-width: 30rem; }
.hero.product .intro > p:first-child { grid-column: auto; }
.retainers { position: absolute; right: max(0px, calc((100% - 72rem) / 2 - 1rem)); bottom: 0; height: min(42rem, 72vh); max-width: 48%; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.retainers img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.retainers .r2 { height: 88%; margin-right: -2.2rem; z-index: 1; }
.retainers .r1 { height: 96%; z-index: 2; }
.retainers .r3 { height: 100%; margin-left: -2.6rem; z-index: 1; }
.hero.product .headline::before { left: -8rem; }

/* 紙の見開き（製品ページ） */
.paper { margin: 0 0 4rem; border: 1px solid var(--rule); background: var(--card); max-width: 60rem;
  box-shadow: 0 1px 0 var(--rule), 0 3px 0 -1px var(--card), 0 4px 0 -1px var(--rule), 0 24px 40px -30px rgba(46,45,51,.4); }
.paper .spread { font-size: clamp(0.6rem, 1.2vw, 0.9rem); aspect-ratio: 16 / 9; height: auto; }
.features .lead-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(10rem, 27rem) minmax(0, 1fr); gap: 1rem 3rem; align-items: start; }
.features .lead-feature h3 { font-size: 1.7rem; margin: 0; }
.features .lead-feature p { max-width: 40rem; }
.features .lead-feature p { color: var(--ink); font-size: 1rem; }

/* ---------- 生成りの地：本文の帯 ---------- */
.band { padding: 6.5rem 0; }
.band + .band { padding-top: 0; }
.band + .band > .wrap { border-top: 1px solid var(--rule); padding-top: 4rem; }
.band.after-stage { padding-top: 16rem; }
.split { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.band h2 { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.5; letter-spacing: 0.04em; }
.band h2.big { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 3rem; }
.band h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.features > div { border-top: 1px solid var(--rule); padding: 1.8rem 0 1.2rem; }
.features h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.55; margin-bottom: 0.8rem; }
.features p { color: var(--ink-soft); font-size: 0.95rem; }

table.spec { border-collapse: collapse; width: 100%; max-width: 44rem; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--rule); font-weight: 400; }
table.spec tr:first-child th, table.spec tr:first-child td { padding-top: 0.2rem; }
table.spec th { width: 8em; color: var(--rikyu); font-size: 0.88rem; white-space: nowrap; letter-spacing: 0.08em; }
table.spec ul.biz { margin: 0; padding-left: 1.1em; }
table.spec ul.biz li { margin: 0 0 0.2em; }
ul.plain { margin: 0; padding-left: 1.2em; max-width: var(--measure); }
ul.plain li { margin-bottom: 0.4em; }

/* 夜の帯：約束 */
.band.night { background: var(--night); color: var(--on-night); padding: 7rem 0; }
.band + .band.night > .wrap { border-top: none; padding-top: 0; }
.band.night + .band { padding-top: 6.5rem; }
.band.night + .band > .wrap { border-top: none; padding-top: 0; }
.promise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.promise li { color: var(--on-night-soft); font-size: 0.95rem; position: relative; padding-top: 1.6rem; }
.promise li::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 1px; background: var(--gold); }
.promise strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.5; color: var(--on-night); margin-bottom: 0.8rem; }

/* ---------- 文書のページ（サポート・規約） ---------- */
.prose { padding: 5rem 0 6rem; max-width: 46rem; }
.prose h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.45; letter-spacing: 0.04em; margin-bottom: 1.6rem; }
.prose h2 { font-family: var(--serif); font-size: 1.35rem; margin: 3.5rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.prose h3 { font-size: 1rem; font-weight: 700; margin: 2rem 0 0.4rem; }
.prose ul, .prose ol { padding-left: 1.3em; max-width: var(--measure); }
.prose li { margin-bottom: 0.4em; }
.legal h2 { font-size: 1.15rem; margin-top: 2.6rem; }
.legal .updated { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 2rem; }
.contact { border-top: 1px solid var(--ink); padding: 1.6rem 0 0; max-width: 40rem; }
a.button { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 0.8rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; transition: background .2s; }
a.button:hover { background: var(--seiji-deep); color: var(--paper); }

/* ---------- 足元 ---------- */
footer.site { background: var(--night); color: var(--on-night-soft); font-size: 0.82rem; padding: 3rem 0 3.5rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; }
footer.site .mark { display: inline-flex; align-items: center; gap: 0.7rem; }
footer.site .mark img { width: 22px; height: 22px; }
footer.site nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
footer.site a { color: var(--on-night-soft); text-decoration: none; }
footer.site a:hover { color: var(--on-night); }

/* ---------- ひとつだけの動き：灯がともり、ものさしが走る ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: glow 2.4s 0.2s ease-out both; }
  .lamp { animation: light 1.6s 0.1s ease-out both; }
  .scale { transform-origin: left; animation: draw 1.2s 0.7s cubic-bezier(.4,0,.2,1) both; }
  .device { animation: rise 1.1s 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .retainers img { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
  .retainers .r1 { animation-delay: .5s; } .retainers .r2 { animation-delay: .75s; } .retainers .r3 { animation-delay: 1s; }
}
@keyframes glow  { from { opacity: 0; } to { opacity: 1; } }
@keyframes light { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise  { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 小さな画面 ---------- */
@media (max-width: 860px) {
  .intro, .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .intro > p:first-child { grid-column: auto; }
  .features { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; gap: 2.4rem; }
  .features .lead-feature { grid-template-columns: 1fr; gap: 0.4rem; }
  .hero.product .headline { max-width: none; }
  .hero.product .wrap { padding-bottom: 0; }
  .retainers { position: static; height: 20rem; max-width: none; justify-content: center; margin-top: 2.5rem; }
  .retainers .r2 { margin-right: -1.4rem; } .retainers .r3 { margin-left: -1.6rem; }
  .paper .spread { aspect-ratio: auto; }
}
@media (max-width: 640px) {
  html { font-size: 16px; }
  .wrap { width: min(100% - 2rem, 72rem); }
  header.site { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.2rem 0; }
  header.site nav { gap: 0.2rem 1.05rem; flex-wrap: wrap; font-size: 0.8rem; line-height: 1.6; }
  .hero { padding-top: 3rem; }
  .display { margin-top: 1.6rem; }
  .intro { margin-top: 2.4rem; }
  .scale { margin-top: 3rem; }
  .stage { padding-top: 2.5rem; margin-bottom: -6rem; }
  .device-screen { aspect-ratio: auto; }
  .hero.product .display { font-size: 2.05rem; }
  .spread { grid-template-columns: 1fr; font-size: 0.78rem; }
  .page.left { border-right: none; border-bottom: 1px solid rgba(138,133,120,.3); box-shadow: none; }
  .page.right { box-shadow: none; padding-top: 1.6em; }
  .band { padding: 4.5rem 0; }
  .band.after-stage { padding-top: 10rem; }
  .band + .band > .wrap { padding-top: 3rem; }
  .band.night { padding: 5rem 0; }
}