/* アマキュー 共通（LP・完了・ポリシー） */
/* フォントは自分のサイトに置いたもの（OFL。public/fonts/ にライセンス同梱）。使う文字だけに絞ってある＝scripts/build-fonts.py */
@font-face {
  font-family: "M PLUS 1";
  src: url("/fonts/mplus1-sub.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-900-sub.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #132140;
  --orange: #ff6b4a;
  --cream: #fff8f4;
  --mint: #ddf5ea;
  --peach: #ffdacc;
  --yellow: #ffe27a;
  --gray: #5c6378;
  --gray-l: #9ea6b2;
  --jp: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --en: "Inter", "M PLUS 1", "Helvetica Neue", Arial, sans-serif;
  /* Figma のバネ（spring）。linear() が使えないブラウザは下の @supports で近いベジェにする */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --bez: cubic-bezier(.45, 1.45, .8, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0985, 0.342, 0.6483, 0.9442, 1.1767, 1.3179, 1.364, 1.3302, 1.2427, 1.1314, 1.0233, 0.9377, 0.8853, 0.8675, 0.8791, 0.9105, 0.9509, 0.9904, 1.0219, 1.0414, 1.0482, 1.0443, 1.033, 1.0183, 1.0039, 0.9923, 0.9851, 0.9825, 0.9838, 0.9878, 0.9932, 0.9984, 1.0027, 1.0054, 1.0064, 1.0059, 1.0045, 1.0025, 1.0006, 0.9991, 0.9981, 0.9977, 0.9978, 0.9983, 0.9991, 0.9998, 1.0003, 1.0007, 1.0008, 1.0008);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--jp);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-break: strict;
}
/* 短い1〜2行の文だけ、対応ブラウザでは文節で折り返す（狭い画面で単語の途中で切れないように）。
   長い説明文は Figma と同じ「文字単位」の折り返しのまま */
.phrase { word-break: auto-phrase; }
p, h1, h2, h3, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* PC 幅でも中央に 390〜480 幅で表示する */
.page {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--cream);
}
@media (min-width: 482px) {
  .page { border-left: 2px solid var(--navy); border-right: 2px solid var(--navy); max-width: 484px; }
}

.logo { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; text-decoration: none; color: #fff; }
.logo-en { font-family: var(--en); font-weight: 900; font-size: 22px; line-height: 1.2; letter-spacing: .44px; }
.logo-ja { font-weight: 700; font-size: 11px; line-height: 1.5; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
