/* Marukiplix 仮サイト
   「帳簿の罫線が回路になる」。白い用紙に薄い方眼、借方＝青・貸方＝青緑の2色。
   借方と貸方がそろうと丸が閉じる（ロゴとヒーローの印） */

:root {
  --paper: #ffffff;      /* 地 */
  --panel: #f5f8fa;      /* 面（パネル） */
  --line: #d5dfe6;       /* 罫線 */
  --grid: rgba(29, 95, 160, .055);
  --grid-major: rgba(29, 95, 160, .1);
  --ink: #0f1a22;        /* 本文 */
  --muted: #44566a;      /* 補足 */
  --dim: #56697a;        /* 等幅の飾りラベル */
  --debit: #1d5fd1;      /* 借方（青） */
  --credit: #087168;     /* 貸方（青緑） */
  --focus: #1d5fd1;

  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --cell: 32px;          /* 方眼の1マス（canvas と合わせる） */
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.85;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { color: var(--debit); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: .5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 20;
}
.skip:focus { top: 1rem; }

/* ロゴの色（ヘッダー・ヒーローの印で共通） */
.arc-dr { stroke: var(--debit); }
.arc-cr { stroke: var(--credit); }
.t-mark { stroke: var(--ink); }

/* ───────── ヘッダー ───────── */
.site-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}
.brand {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.brand-mark {
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
}
.brand-name {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: .04em;
}
.site-nav {
  display: flex;
  gap: .25rem 1.5rem;
  font-size: .875rem;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--debit);
}

/* ───────── ヒーロー ───────── */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
/* 方眼（4マスごとに少し濃い線＝帳簿の行のまとまり） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size:
    calc(var(--cell) * 4) calc(var(--cell) * 4),
    calc(var(--cell) * 4) calc(var(--cell) * 4),
    var(--cell) var(--cell),
    var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 70% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 85% 90% at 70% 45%, #000 30%, transparent 85%);
}
/* 右上から差す、ごく弱い光 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(40rem 26rem at 78% 30%, rgba(29, 95, 209, .07), transparent 70%),
    radial-gradient(30rem 22rem at 95% 85%, rgba(8, 113, 104, .05), transparent 70%);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* 写真の枠: 四隅のかぎ（左上＝借方、右下＝貸方）は仕訳パネルと同じ */
.photo {
  position: relative;
  margin: 0;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel);
}
.photo::before,
.photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 0 solid var(--debit);
  pointer-events: none;
}
.photo::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.photo::after { bottom: -1px; right: -1px; border-color: var(--credit); border-bottom-width: 2px; border-right-width: 2px; }

/* ヒーローの右: 写真の左下に仕訳パネルを重ねる */
.hero-visual { position: relative; }
.hero-photo {
  box-shadow: 0 28px 60px -36px rgba(29, 95, 209, .38);
}
.hero-visual .journal {
  width: 22rem;
  max-width: calc(100% + 2.5rem);
  margin: -5rem 0 0 -2.5rem;
}

.hero-tag,
.section-tag,
.row-code,
.status {
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--dim);
}
.hero-tag {
  margin: 0 0 1.5rem;
  color: var(--debit);
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
/* 見出しは句ごとに改行する（語の途中で切らない） */
h1 .phrase {
  display: block;
  word-break: auto-phrase;
}

.founding {
  margin: 2rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .9rem .35rem .75rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}
.founding-node {
  width: .55rem;
  height: .55rem;
  background: var(--credit);
  box-shadow: 0 0 0 3px rgba(8, 113, 104, .15);
  flex: none;
}
.lead {
  margin: 1.25rem 0 0;
  color: var(--muted);
  max-width: 32em;
}

/* ダミーの仕訳パネル */
.journal {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 248, 250, .96));
  box-shadow: 0 0 0 4px rgba(29, 95, 209, .04), 0 24px 60px -28px rgba(29, 95, 209, .28);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* 四隅のかぎ */
.journal::before,
.journal::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--debit);
}
.journal::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.journal::after { bottom: -1px; right: -1px; border-color: var(--credit); border-bottom-width: 2px; border-right-width: 2px; }

.j-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
}
.j-grid { padding: .35rem 0; }
.j-row {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) 6.6em 6.6em;
  gap: .75em;
  padding: .42rem 1rem;
  border-bottom: 1px dashed var(--line);
  white-space: nowrap;
}
.j-row > span { overflow: hidden; text-overflow: clip; }
.j-cols {
  color: var(--dim);
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.j-no { color: var(--dim); }
.j-indent { padding-left: 1.2em; }
.num { text-align: right; }
.dr { color: var(--debit); }
.cr { color: var(--credit); }
.j-total {
  border-top: 1px solid var(--muted);
  border-bottom: 3px double var(--muted); /* 締切の二重線 */
  font-weight: 700;
  margin-top: -1px;
}
.j-next { border-bottom: 0; }
.cursor {
  display: inline-block;
  width: .6em;
  height: 1.1em;
  vertical-align: -.2em;
  background: var(--debit);
}

.j-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem 1rem;
  border-top: 1px solid var(--line);
}
.seal {
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  filter: drop-shadow(0 0 5px rgba(29, 95, 209, .22));
}
.seal-track { stroke: var(--line); }
.seal-arc {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  stroke-linecap: butt;
}
.j-status {
  display: flex;
  align-items: center;
}
.j-state {
  color: var(--ink);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .06em;
}
.j-state::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .55em;
  vertical-align: .1em;
  background: var(--debit);
}

/* 読み込み時の一度だけの流れ: 行が入る → 数字がそろう → 丸が閉じる */
@media (prefers-reduced-motion: no-preference) {
  h1 .phrase { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  h1 .phrase:nth-child(2) { animation-delay: .1s; }
  h1 .phrase:nth-child(3) { animation-delay: .2s; }
  .hero-tag { animation: fade .6s ease-out both; }
  .founding,
  .lead { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .35s both; }

  .journal { animation: fade .6s ease-out .2s both; }
  .j-grid .j-row[style] { animation: row-in .35s ease-out both; animation-delay: calc(.5s + var(--i) * .25s); }
  .seal-arc { animation: close-ring .8s cubic-bezier(.6, .05, .3, 1) 2.25s both; }
  .seal-t { animation: fade .3s ease-out 3s both; }
  .j-status { animation: fade .4s ease-out 3s both; }
  .j-next { animation: fade .3s ease-out 3.2s both; }
  .cursor { animation: blink 1.1s steps(1, end) 3.2s infinite; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes close-ring {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* ───────── セクション共通 ───────── */
.section {
  padding: clamp(4rem, 9vw, 6.5rem) 0 0;
}
.section-tag {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .6rem;
}
.section-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
  font-feature-settings: "palt";
}
.section p {
  margin: 0;
  max-width: 38em;
}

/* ───────── 事業: 帳簿の行を回路の線がつなぐ ───────── */
.ledger-wrap {
  position: relative;
  padding-left: 2.25rem;
}
.rail {
  position: absolute;
  left: .5rem;
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: var(--line);
  overflow: hidden;
  transform-origin: top;
}
.rail-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0, transparent 70%, var(--debit) 92%, transparent 100%);
  transform: translateY(-100%);
}
.ledger {
  margin: 0;
  border-top: 1px solid var(--line);
}
/* 行ごとに写真を付ける。パソコン幅では写真の左右を交互にする */
.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "photo title"
    "photo text";
  gap: .6rem 2.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  grid-template-areas:
    "title photo"
    "text photo";
}
.ledger-row.is-lead { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
.ledger-row > dt { grid-area: title; align-self: end; }
.ledger-row > dd { grid-area: text; align-self: start; }
.ledger-row > dd.row-photo { grid-area: photo; align-self: center; max-width: none; }
/* 回路の分岐: レールから行へ伸びる線と節 */
.ledger-row::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 2.35rem;
  width: 1.25rem;
  height: 1px;
  background: var(--line);
}
.ledger-row::after {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 4px);
  top: calc(2.35rem - 4px);
  width: 9px;
  height: 9px;
  border: 1px solid var(--debit);
  background: var(--paper);
}
.ledger-row.is-lead::after {
  border-color: var(--credit);
  background: var(--credit);
}
.ledger dt {
  word-break: auto-phrase;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6;
}
.row-code {
  display: block;
  margin-bottom: .35rem;
  font-weight: 400;
}
.ledger dd {
  margin: 0;
  color: var(--muted);
  max-width: 36em;
}
.section .photo-note {
  margin: 1rem 0 0 2.25rem;
  color: var(--dim);
  font-size: .75rem;
  line-height: 1.6;
}
.ledger-row.is-lead dt { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.ledger-row.is-lead .row-code { color: var(--credit); }
.ledger-row.is-lead dd { color: var(--ink); }

/* ───────── 会社概要: 試算表のような罫線。最後は締切の二重線 ───────── */
.profile {
  margin: 0;
  border-top: 2px solid var(--debit);
  border-bottom: 3px double var(--credit);
  background: linear-gradient(90deg, var(--panel), rgba(245, 248, 250, .3));
}
.profile-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.profile-row:last-child { border-bottom: 0; }
.profile dt,
.profile dd {
  margin: 0;
  padding: 1rem 1.25rem;
}
.profile dt {
  color: var(--muted);
  font-size: .9375rem;
  border-right: 1px solid var(--line);
}
.profile dd.pending { color: var(--muted); }
.profile dd.pending::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: 1px;
  margin-right: .6em;
  vertical-align: .3em;
  border-top: 1px dashed var(--dim);
}
.biz-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.biz-list li {
  position: relative;
  padding-left: 1.1em;
}
.biz-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: .4em;
  height: .4em;
  border: 1px solid var(--debit);
}
.biz-list li:first-child::before {
  border-color: var(--credit);
  background: var(--credit);
}

/* ───────── お問い合わせ ───────── */
.contact-panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.5rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
}
.contact-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--debit);
  border-left: 2px solid var(--debit);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .2rem .65rem;
  border: 1px solid var(--line);
  color: var(--credit);
}
.status-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--credit);
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: breathe 2.4s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ───────── フッター ───────── */
.site-footer {
  margin-top: clamp(4.5rem, 10vw, 7rem);
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer p { margin: 0; }
.site-footer small { font-size: .875rem; }

/* ───────── スクロールに合わせた出現（JS が動くときだけ） ───────── */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  html.js .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(16px);
  }
  html.js .ledger-wrap .rail { transition: transform 1.1s cubic-bezier(.6, .05, .3, 1) .15s; }
  html.js .ledger-wrap:not(.is-in) .rail { transform: scaleY(0); }
  .ledger-wrap.is-in .rail-pulse { animation: pulse-down 4.5s linear 1.4s infinite; }
}
@keyframes pulse-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

/* 画面外では、繰り返しの動きを止める */
.is-offscreen,
.is-offscreen * { animation-play-state: paused !important; }

/* ───────── 幅ごとの調整 ───────── */
@media (max-width: 64rem) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .journal { max-width: 30rem; }
  .hero-visual { max-width: 32rem; }
  /* 1列のときはヒーローが縦に長くなりすぎないよう、写真を少し横長に切る */
  .hero-photo {
    width: 92%;
    margin-left: auto;
  }
  .hero-photo img {
    aspect-ratio: 16 / 10;
    object-position: 70% 55%;
  }
  .hero-visual .journal {
    width: min(24rem, 88%);
    margin: -5rem 0 0;
  }
  .ledger-row,
  .ledger-row:nth-child(even),
  .ledger-row.is-lead {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "photo"
      "title"
      "text";
  }
  .ledger-row > dd.row-photo {
    max-width: 40rem;
    margin-bottom: .5rem;
  }
}
@media (max-width: 48rem) {
  .site-nav { display: none; }
}
@media (max-width: 30rem) {
  .journal { font-size: .75rem; }
  .j-row {
    grid-template-columns: 3.2em minmax(0, 1fr) 6.2em 6.2em;
    gap: .5em;
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .j-head,
  .j-foot { padding-left: .75rem; padding-right: .75rem; }
  .hero-photo { width: 100%; }
  .hero-visual .journal {
    width: calc(100% - 1rem);
    margin-top: -3rem;
  }
  .ledger-wrap { padding-left: 1.75rem; }
  .section .photo-note { margin-left: 1.75rem; }
  .rail { left: .35rem; }
  .ledger-row::before { left: -1.4rem; width: 1rem; }
  .ledger-row::after { left: calc(-1.4rem - 4px); }
  .profile-row { grid-template-columns: minmax(0, 1fr); }
  .profile dt {
    border-right: 0;
    padding-bottom: 0;
    font-size: .875rem;
  }
  .profile dd { padding-top: .2rem; }
}