:root {
  color-scheme: light;
  /*
    見出し周りの和文ゴシック。本文の明朝と対にして使う。
    Web フォントは持たせない (和文は 1 書体で数 MB になり、
    紹介ページ 1 枚のために背負う量ではない)。
    macOS はヒラギノ、Windows は游ゴシック、無ければ BIZ UD へ。
  */
  --gothic: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', YuGothic,
    'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
  --paper: #fbf9f5;
  --paper-deep: #f4efe8;
  --ink: #23211e;
  --ink-soft: #625c53;
  --rule: #d8d0c4;
  --accent: #74472d;
  --cta-shadow: #bcbab6;
  --measure: 37.75rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 16px;
  line-height: 1.85;
  line-break: strict;
  text-autospace: normal;
  text-spacing-trim: trim-start;
  font-feature-settings: 'palt' 0;
}

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.22em;
}

/*
  キーボードで辿ったときの現在位置。
  :where() で詳細度を 0 にしてあるので、
  ボタンなど個別に指定してある側が勝つ。
*/
:where(a, button):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.bar,
main,
footer {
  width: min(100% - 2.8rem, var(--measure));
  margin-inline: auto;
}

.bar {
  display: flex;
  align-items: center;
  min-height: 3.8rem;
  border-bottom: 1px solid var(--rule);
}

/*
  ロゴタイプ。OGP 画像の描き文字に合わせる。

  どの書体かは、OGP 画像から「Möbius」の輪郭を抜き出して
  候補 5 書体と重ね、食い違った画素の割合で選んだ。Outfit の
  wght 560 が最も近く (食い違い 23%、残差はほぼ字送りの差だけ)、
  次点の Figtree は 35%、Poppins は 47% だった。

  ファイルは「Möbius」に要る 6 グリフだけに絞ってある (2.2KB)。
  他の文字は入っていないので、この 2 か所以外に使わないこと。
  可変軸を残してあるので太さは CSS 側で決められる。

  読めなかったときのために、後ろに各 OS の幾何学的サンセリフを並べる。
  Windows には該当が無く Segoe UI まで落ちるが、字面は近い。
*/
@font-face {
  font-family: 'Outfit Wordmark';
  src: url('/outfit-wordmark.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.wordmark,
.hero-lockup h1 {
  font-family: 'Outfit Wordmark', Futura, 'Century Gothic', 'Avenir Next', Avenir, 'Segoe UI',
    system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

.wordmark {
  font-size: 1.04rem;
  font-weight: 560;
  letter-spacing: 0.005em;
  text-decoration: none;
}

.bar nav {
  display: flex;
  gap: 1.2rem;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.bar nav a {
  text-decoration: none;
}

.bar nav a:hover,
.bar nav a:focus-visible {
  text-decoration: underline;
}

.bar .bar-open {
  color: var(--accent);
}

.hero {
  padding: clamp(5rem, 10vw, 6.8rem) 0 clamp(5.8rem, 10vw, 6.7rem);
}

.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

/*
  級数は、Outfit で組んだ「Möbius」の実寸を測って決めてある。
  メビオとの間合いが Georgia だったときと揃う幅に合わせた。
  字間と太さ (wght 560) は OGP の描き文字に重ねて出した値。
*/
.hero-lockup h1 {
  margin: 0;
  font-size: clamp(5.5rem, 10.5vw, 7.05rem);
  font-weight: 560;
  letter-spacing: 0.005em;
  line-height: 1.04;
  white-space: nowrap;
}

/*
  メビオ。2 コマを重ねて置き、ホバー中だけ入れ替えて手を振らせる。
  2 枚は同じ元画像から同じ切り出し・同じ背景除去で作ってあり、
  腕以外は一致しているので、体が揺れずに腕だけが動く。
*/
.hero-mobio {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 9.65rem;
  transform-origin: 58% 76%;
  transition: transform 160ms ease-out;
}

.hero-mobio img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-mobio-wave {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero-mobio:hover {
  transform: translateY(-2px) rotate(-1deg);
}

/*
  2 枚を逆位相で入れ替える。必ず「どちらか一方だけ」が見えている状態にすること。
  2 枚目を出すだけでは 1 枚目が下に残り、体は隠れても腕は位置が違うので
  透けて見え、腕が 2 本に見える (実際にこれで公開してしまった)。

  steps(2, jump-none) は 0 と 1 の 2 値だけを取らせるためのもの。
  中間の不透明度を挟むと 2 枚が同時に薄く見えるので、
  ここを ease などに変えないこと。
*/
@keyframes mobio-wave-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mobio-wave-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 触覚デバイスでは :hover が張り付くことがあるので、ポインタがある環境だけ。 */
@media (hover: hover) {
  .hero-mobio:hover .hero-mobio-rest {
    animation: mobio-wave-out 480ms steps(2, jump-none) infinite;
  }

  .hero-mobio:hover .hero-mobio-wave {
    animation: mobio-wave-in 480ms steps(2, jump-none) infinite;
  }
}

/*
  導入文と CTA はロゴタイプ側に寄せてゴシックで組む。
  明朝のままだと、上のロゴタイプだけが浮いて見える。
  下の各節の本文は明朝のまま。読ませる量が多いのはそちらなので。
*/
.lead {
  max-width: none;
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-family: var(--gothic);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

/* 404.html 用。紙面の作りは紹介ページに揃え、見出しだけ控えめにする。 */
.notfound {
  padding: clamp(4.5rem, 9vw, 6.2rem) 0 clamp(5rem, 9vw, 6.4rem);
}

.notfound h1 {
  margin: 0 0 1.1rem;
  font-family: Georgia, 'Times New Roman', 'Yu Mincho', serif;
  font-size: clamp(1.65rem, 5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.notfound p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.notfound .hero-note {
  margin-top: 0.55rem;
}

.cta {
  margin: 1.6rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  min-height: 4.25rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 6px 6px 0 var(--cta-shadow);
  color: #fffdf9;
  padding: 0.72em 1.6em;
  /*
    「Möbius」の 6 文字はロゴタイプの書体で出る。それ以外は和文ゴシック。
    ボタンの中で製品名だけが見出しと同じ字面になり、名前として立つ。
  */
  font-family: 'Outfit Wordmark', var(--gothic);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-decoration: none;
  transform: translate(0, 0);
  transition: background-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
}

.btn:hover {
  background: #814e30;
  box-shadow: 4px 4px 0 var(--cta-shadow);
  transform: translate(2px, 2px);
}

.btn:focus-visible {
  background: var(--accent);
  color: #fffdf9;
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.btn:active {
  box-shadow: 1px 1px 0 var(--cta-shadow);
  transform: translate(5px, 5px);
}

.hero-note {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.features,
.details,
.notice {
  border-top: 1px solid var(--rule);
  padding: 3rem 0 2rem;
}

.section-title {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.feature,
.detail {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.45rem 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
}

.feature:first-of-type,
.detail:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.feature h3,
.detail h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.65;
}

.feature p,
.detail p {
  margin: 0;
  font-size: 0.81rem;
  line-height: 1.85;
}

.feature-shot {
  grid-column: 1 / -1;
  margin: 0.75rem 0 0.35rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}

.feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/*
  画面写真を開くためのボタン。lightbox.js が画像を包んで作る。
  見た目は画像のままにしたいので、ボタン既定の枠と余白を全部落とす。
*/
.feature-shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

.feature-shot-open:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/*
  拡大表示。画面いっぱいを枠にする。
  display は [open] のときだけ指定すること。
  .shot-viewer に直接書くと、閉じているときの UA 既定 (display:none) を
  上書きしてしまい、常に開きっぱなしになる。
*/
.shot-viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  overflow: hidden;
}

.shot-viewer[open] {
  display: flex;
  flex-direction: column;
}

.shot-viewer::backdrop {
  background: rgb(28 25 21 / 84%);
}

.shot-viewer-close {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0.7rem 0.9rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 2px;
  background: none;
  color: #f4f0ea;
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: pointer;
}

.shot-viewer-close:hover {
  border-color: rgb(255 255 255 / 78%);
}

.shot-viewer-close:focus-visible {
  outline: 2px solid #f4f0ea;
  outline-offset: 3px;
}

.shot-viewer-scroll {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 0.9rem 0.9rem;
}

/*
  元画像は 3 枚とも 1920×1080。常に画面の中へ収める。
  一度は狭い端末での拡大率を稼ぐために下限を置いて横送りにしたが、
  携帯で画面に収まらないほうが困る、という判断で外した。
  狭い画面での細部は、ブラウザのピンチ操作で見てもらう
  (元画像が表示サイズの 5 倍あるので、拡大しても粗くならない)。

  高さの制限は max-height ではなく幅の式に畳み込んである。
  flex アイテムでは width が確定値として先に決まり、
  そのあと max-height だけが効いて縦横比が崩れるため
  (実際に 16:9 が 1.97 に潰れた)。4/3 の画面写真を足すときは
  ここの 16/9 も直すこと。

  4.6rem は閉じるボタンの行と下余白の実測値 (67px) に少し余裕を足したもの。
*/
.shot-viewer-image {
  flex: 0 0 auto;
  margin: auto;
  width: min(1920px, 100%, calc((100vh - 4.6rem) * 16 / 9));
  width: min(1920px, 100%, calc((100dvh - 4.6rem) * 16 / 9));
  max-width: none;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  cursor: zoom-out;
}

.editorial-lines > span {
  display: block;
}

.keep {
  white-space: nowrap;
}

.lead,
.feature p,
.detail p,
.notice p {
  word-break: normal;
  overflow-wrap: break-word;
}

@supports (word-break: auto-phrase) {
  .lead,
  .feature p,
  .detail p,
  .notice p {
    word-break: auto-phrase;
  }
}

.detail > div p + p {
  margin-top: 0.75rem;
}

/*
  単一HTML版を配る唯一の導線なので、行の高さ (24px) のままだと
  指では狙いにくい。上下に余白を足して当たり判定だけを広げ、
  同じ分を負のマージンで戻して、紙面の行送りは動かさない。
*/
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin-block: -0.6rem;
  padding-block: 0.6rem;
  white-space: nowrap;
}

.download-icon {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.76;
}

.download-link:hover .download-icon,
.download-link:focus-visible .download-icon {
  opacity: 1;
}

.notice {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.notice p {
  max-width: 42rem;
  margin: 0 0 1rem;
}

footer {
  display: flex;
  gap: 1.2rem;
  border-top: 1px solid var(--rule);
  padding: 1.7rem 0 3rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

footer .spacer {
  margin-left: auto;
}

@media (max-width: 42rem) {
  .bar,
  main,
  footer {
    width: min(100% - 2rem, var(--measure));
  }

  .bar nav a:not(.bar-open) {
    display: none;
  }

  .feature,
  .detail {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1.55rem 0;
  }

  .editorial-lines > span {
    display: inline;
  }

  .hero {
    padding-top: 4rem;
  }

  .hero-lockup {
    align-items: center;
    gap: 0.75rem;
  }

  .hero-lockup h1 {
    font-size: clamp(3.3rem, 17vw, 4.95rem);
  }

  .hero-mobio {
    width: clamp(6.3rem, 28vw, 8.25rem);
  }

  footer {
    flex-wrap: wrap;
  }

  footer .spacer {
    flex-basis: 100%;
    order: 1;
  }

  footer a {
    order: 2;
  }
}

@media (max-width: 32rem) {
  .hero-lockup {
    gap: 0.35rem;
  }

  .hero-lockup h1 {
    font-size: clamp(2.9rem, 15.6vw, 4.55rem);
    letter-spacing: 0.005em;
  }

  .hero-mobio {
    width: clamp(4.25rem, 21vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .hero-mobio {
    transition: none;
  }

  .hero-mobio:hover {
    transform: none;
  }

  .hero-mobio:hover .hero-mobio-rest,
  .hero-mobio:hover .hero-mobio-wave {
    animation: none;
  }
}