/* 余白ラボ v3 — 題の9字を原稿用紙の 3×3 に置く。紙と墨とロゴの升、朱の罫だけ。 */
:root{
  --paper:#F3F0E8;
  --ink:#2F3B40;
  --ink-2:#5A656A;
  --ink-3:#8A9398;
  --shu:#C4472E;                   /* 原稿用紙の朱罫 */
  --rule:rgba(196,71,46,.42);      /* 升の罫（薄い朱） */
  --rule-ink:rgba(47,59,64,.18);   /* 下の段の罫（薄い墨） */
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --pad:28px;
  --gutter:40px;
  --side:min(100vw - 2*var(--gutter), 100svh - 260px, 620px);  /* 升の一辺。下の段と足もとも同じ幅にそろえる */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mincho);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt";
  overflow-x:hidden;
  min-height:100svh;
}
a{color:inherit;text-decoration:none}
h1,h2{font-weight:500}
img{display:block}
.sp{display:none}

/* ---------- 屋号 ---------- */
.top{position:absolute;inset:0 0 auto 0;padding:26px var(--gutter);z-index:2}
.brand{display:inline-flex;align-items:center;gap:12px;line-height:1}
.brand .mark{width:22px;height:22px}
.brand .ja{font-size:19px;letter-spacing:.2em;font-weight:500}
.brand .en{font-family:var(--gothic);font-size:10px;letter-spacing:.34em;font-weight:500;color:var(--ink-2);margin-left:4px}

/* ---------- 一枚目：3×3 の原稿用紙 ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(28px,5vh,48px);
  padding:96px var(--gutter) 56px;
}
.genko{
  width:var(--side);height:var(--side);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  font-size:calc(var(--side) * .145);
  line-height:1;
  font-weight:500;
}
.masu{
  display:grid;place-items:center;
  border:1px solid var(--rule);
  margin:0 -1px -1px 0;       /* 罫を重ねて1本に */
  position:relative;
}
/* ひとマス空いた升＝「白」。太い朱の枠で囲み、字は薄くして「空いている」ことを言う */
.masu.aki{color:rgba(47,59,64,.28);z-index:1}
.masu.aki::after{
  content:"";position:absolute;inset:-1px;
  border:2px solid var(--shu);
  pointer-events:none;
}
.statement{
  font-size:16px;letter-spacing:.12em;color:var(--ink-2);text-align:center;
  line-height:2;
}

/* ---------- 二枚目：升の列をそのまま使う ---------- */
.info{border-top:1px solid var(--rule-ink);width:var(--side);margin:0 auto}
.row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--rule-ink);
}
.row .cell{padding:var(--pad) var(--pad) var(--pad) 0;min-height:calc(var(--side) / 4);min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.row .cell + .cell{border-left:1px solid var(--rule-ink);padding-left:var(--pad)}
.row .span2{grid-column:span 2}

.label{font-family:var(--gothic);font-size:12px;letter-spacing:.26em;font-weight:500;color:var(--ink-3)}
.value{font-size:18px;letter-spacing:.08em;line-height:1.6}
.value .at{display:block;font-family:var(--gothic);font-size:13px;letter-spacing:.04em;color:var(--ink-2);margin-top:4px}
a.value:hover .at{color:var(--ink)}

/* お問い合わせ（details） */
.contact summary{list-style:none;cursor:pointer}
.contact summary::-webkit-details-marker{display:none}
.contact summary .cell{min-height:calc(var(--side) / 4)}
.open{
  font-family:var(--gothic);font-size:18px;letter-spacing:.2em;font-weight:500;
  display:inline-flex;align-items:center;gap:.4em;line-height:1;
  transition:color .25s ease;
}
.contact summary:hover .open{color:var(--shu)}
.plus{position:relative;width:.62em;height:.62em;display:inline-block}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease}
.plus::before{left:0;right:0;top:calc(50% - 1px);height:2px}
.plus::after{top:0;bottom:0;left:calc(50% - 1px);width:2px}
.contact[open] .plus::after{transform:scaleY(0)}

.form .row .cell{min-height:0;padding-top:22px;padding-bottom:22px;justify-content:center}
.form label{font-family:var(--gothic);font-size:12px;letter-spacing:.2em;color:var(--ink-2)}
.form input,.form textarea{
  width:100%;font:inherit;font-size:17px;letter-spacing:.04em;line-height:1.7;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);
  border-radius:0;padding:6px 0;outline:none;
}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form textarea:focus{border-bottom:2px solid var(--shu)}
.send{
  font-family:var(--mincho);font-size:16px;letter-spacing:.3em;text-indent:.3em;
  color:var(--paper);background:var(--ink);border:0;padding:16px 44px;cursor:pointer;
  align-self:flex-start;transition:background .25s ease;
}
.send:hover{background:var(--shu)}

/* ---------- 足もと ---------- */
.foot{
  display:flex;justify-content:space-between;gap:16px;
  width:var(--side);margin:0 auto;
  padding:26px 0 30px;
  font-family:var(--gothic);font-size:11px;letter-spacing:.2em;color:var(--ink-3);
}

/* ---------- 入りの動き（升→字→ひとマス） ---------- */
@media (prefers-reduced-motion:no-preference){
  .genko{animation:fade 1s ease both}
  .masu{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .masu:nth-child(1){animation-delay:.25s}.masu:nth-child(2){animation-delay:.35s}.masu:nth-child(3){animation-delay:.45s}
  .masu:nth-child(4){animation-delay:.55s}.masu:nth-child(5){animation-delay:1.3s}.masu:nth-child(6){animation-delay:.75s}
  .masu:nth-child(7){animation-delay:.85s}.masu:nth-child(8){animation-delay:.95s}.masu:nth-child(9){animation-delay:1.05s}
  .masu.aki::after{animation:fade .6s ease 1.5s both}
  .statement,.brand{animation:fade 1s ease 1.2s both}
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

/* ---------- 狭い画面（スマホ 390px） ---------- */
@media (max-width:720px){
  :root{--pad:18px;--gutter:20px}
  .top{padding:20px var(--gutter)}
  .brand .ja{font-size:17px;letter-spacing:.16em}
  .brand .en{display:none}
  .hero{padding:84px var(--gutter) 48px;gap:28px}
  .genko{font-weight:600}
  :root{--side:min(100vw - 2*var(--gutter), 100svh - 240px, 420px)}
  .info,.foot{width:auto;margin:0 var(--gutter)}
  .statement{font-size:14px;letter-spacing:.08em}
  .sp{display:inline}
  .hero{min-height:92svh}

  .row{grid-template-columns:1fr}
  .row .cell{min-height:0;padding:20px 0}
  .row .cell + .cell{border-left:0;padding-left:0;padding-top:0}
  .row .cell:first-child{padding-bottom:8px}
  .row .span2{grid-column:auto}
  .contact summary .cell{min-height:0}
  .contact summary .cell:first-child{padding-top:22px}
  .open{font-size:17px}
  .form .row .cell{padding-top:14px;padding-bottom:14px}
  .form .row .cell:first-child{padding-bottom:0}
  .form .row .cell:empty{display:none}
  .send{width:100%}
}