/* シフトル 公式サイト ─ 2.4.0「手帳」デザイン
   やわらかいマーカーの手帳：空色の見出し、紙、色の四角、平塗りの金貨。
   影・つや・グラデーションは使わない（印刷物のような平らさ）。
   余白と角丸は黄金比の段 5 / 8 / 13 / 21 / 34 / 55。 */

@font-face {
  font-family: 'Shiftru Rounded';
  src: url('../fonts/rounded-800.51c36fce08.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Shiftru Rounded';
  src: url('../fonts/rounded-700.fd6d3db3a6.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root {
  /* 紙・面 */
  --paper: #fbf8f1;
  --paper-2: #f5f0e5;
  --card: #fffdfa;
  --cell: #efe9dd;
  --line: #e8e0d2;
  /* 文字 */
  --ink: #3a3035;
  --ink-2: #756c67;
  /* 操作色（ボタン・リンク） */
  --primary: #306a99;
  --on-primary: #ffffff;
  --link: #306a99;
  /* 見出し・ヒーロー（空色） */
  --sky: #b8d8ec;
  --sky-ink: #244f68;
  --sky-line: rgba(36, 79, 104, 0.2);
  --ring: #7fa8c4;
  /* 勤務先のマーカー色（飾りの四角） */
  --m-coral: #f4b6ac;
  --m-mint: #a6dcc6;
  --m-sky: #b7d7ef;
  --m-peach: #f7c49a;
  --m-lilac: #cdbef0;
  --m-pink: #f2b5cc;
  --m-lemon: #f0d77a;
  --m-leaf: #bfd8a2;
  --on-marker: #3a3035;
  /* 金貨（平塗り） */
  --coin: #f5c34b;
  --coin-ring: #d59d27;
  --coin-ink: #72520d;
  /* 計算結果の状態 */
  --ok: #2e7a5c;
  --caution: #b9861a;
  --warn: #b0601a;
  --over: #b5473a;
  /* 段 */
  --s1: 5px;
  --s2: 8px;
  --s3: 13px;
  --s4: 21px;
  --s5: 34px;
  --s6: 55px;
  --r-tile: 8px;
  --r-card: 21px;
  --r-hero: 34px;
  --r-font: 'Shiftru Rounded', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  --b-font: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #17151a;
    --paper-2: #1c1a20;
    --card: #221f26;
    --cell: #312d36;
    --line: #38333e;
    --ink: #efe9e5;
    --ink-2: #b3aaa5;
    --primary: #8ebbf0;
    --on-primary: #17151a;
    --link: #8ebbf0;
    --sky: #2a4558;
    --sky-ink: #e4f0f8;
    --sky-line: rgba(228, 240, 248, 0.18);
    --ring: #4d6c82;
    --ok: #7fd3b0;
    --caution: #f0d77a;
    --warn: #f2b880;
    --over: #f4a196;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #17151a;
  --paper-2: #1c1a20;
  --card: #221f26;
  --cell: #312d36;
  --line: #38333e;
  --ink: #efe9e5;
  --ink-2: #b3aaa5;
  --primary: #8ebbf0;
  --on-primary: #17151a;
  --link: #8ebbf0;
  --sky: #2a4558;
  --sky-ink: #e4f0f8;
  --sky-line: rgba(228, 240, 248, 0.18);
  --ring: #4d6c82;
  --ok: #7fd3b0;
  --caution: #f0d77a;
  --warn: #f2b880;
  --over: #f4a196;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--b-font);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  max-width: 100%;
}
a {
  color: var(--link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--coin-ring);
  outline-offset: 3px;
  border-radius: 5px;
}
p {
  margin: 0 0 1em;
}
h1,
h2,
h3 {
  font-family: var(--r-font);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.02em;
  margin: 0;
  word-break: auto-phrase;
  text-wrap: pretty;
}
b,
strong {
  font-weight: 700;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--card);
  color: var(--ink);
  padding: 8px 13px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  z-index: 10;
}
.skip:focus {
  top: 12px;
}
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .wrap {
    padding: 0 34px;
  }
}
.br-sp {
  display: inline;
}
@media (min-width: 720px) {
  .br-sp {
    display: none;
  }
}

/* ── 空色の見出し（ヘッダー）＝手帳の綴じ具 ── */
.band {
  position: relative;
  background: var(--sky);
  color: var(--sky-ink);
  border-radius: 0 0 var(--r-card) var(--r-card);
  margin: 0 8px;
}
.band__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@media (min-width: 720px) {
  .band {
    margin: 0 16px;
  }
  .band__inner {
    padding: 13px 21px 18px;
  }
}
/* 下の紙に食い込むリング（平塗り） */
.band__ring {
  position: absolute;
  bottom: -11px;
  width: 9px;
  height: 22px;
  border-radius: 5px;
  background: var(--ring);
  z-index: 1;
}
.band__ring--l {
  left: 28%;
}
.band__ring--r {
  right: 28%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.brand__icon {
  border-radius: var(--r-tile);
  display: block;
}
.brand__name {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
}
.band__nav {
  display: flex;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
}
.band__nav a {
  color: var(--sky-ink);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--r-tile);
  white-space: nowrap;
}
.band__nav a:hover {
  background: var(--sky-line);
}
.band__nav a[aria-current='page'] {
  background: var(--card);
  color: var(--ink);
}
@media (min-width: 720px) {
  .band__nav {
    font-size: 15px;
    gap: 5px;
  }
  .band__nav a {
    padding: 5px 13px;
  }
}
@media (max-width: 359px) {
  .brand__name {
    display: none;
  }
}

/* ── 見出し・ボタン共通 ── */
.h2 {
  font-size: clamp(1.5rem, 4.4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.7em;
}
.h2--sub {
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  margin-top: 1.8em;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 16px;
  color: var(--on-primary);
  background: var(--primary);
  padding: 13px 21px;
  border-radius: 13px;
  border: 2px solid var(--primary);
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(1px);
}
.btn--ghost {
  background: transparent;
  color: var(--link);
  border-color: currentColor;
}
.pro {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: 0.15em;
  padding: 0 8px;
  border-radius: 5px;
  color: var(--coin-ink);
  background: var(--coin);
  border: 1px solid var(--coin-ring);
  letter-spacing: 0.06em;
}

/* App Store バッジ：ライトは黒、ダークは白 */
.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
}
.badge__img--white {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge__img--black {
    display: none;
  }
  :root:not([data-theme='light']) .badge__img--white {
    display: block;
  }
}
:root[data-theme='dark'] .badge__img--black {
  display: none;
}
:root[data-theme='dark'] .badge__img--white {
  display: block;
}

/* ── 手帳のモチーフ：4×3 の四角（アプリアイコンと同じ並び） ── */
.motif {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-hero);
  padding: 13% 9% 9%;
  aspect-ratio: 1;
}
.motif__rings {
  position: absolute;
  top: -6%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 38%;
}
.motif__rings i {
  width: 7%;
  aspect-ratio: 9 / 26;
  border-radius: 99px;
  background: var(--sky-ink);
}
.motif__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5%;
}
.motif__grid span {
  aspect-ratio: 1;
  border-radius: 24%;
  background: var(--cell);
}
.motif__grid .t-coral {
  background: var(--m-coral);
}
.motif__grid .t-mint {
  background: var(--m-mint);
}
.motif__grid .t-sky {
  background: var(--m-sky);
}
.motif__grid .t-lilac {
  background: var(--m-lilac);
}
.motif__grid .t-coin {
  border-radius: 50%;
  background: var(--coin);
  box-shadow: inset 0 0 0 1px var(--coin-ring), inset 0 0 0 7px var(--coin), inset 0 0 0 8.5px var(--coin-ring);
}

/* ── ヒーロー：空色の大きな面（見出しと続けて 1 枚の綴じ具に） ── */
.hero {
  padding: 13px 0 var(--s6);
}
.hero__grid {
  max-width: none;
  width: auto;
  margin: 0 8px;
  background: var(--sky);
  color: var(--sky-ink);
  border-radius: var(--r-hero);
  padding: var(--s5) 21px var(--s5);
  display: grid;
  gap: var(--s5);
  align-items: center;
  overflow: hidden;
}
@media (min-width: 720px) {
  .hero__grid {
    margin: 0 16px;
    padding: var(--s6) max(34px, calc((100% - 1056px) / 2));
  }
}
@media (min-width: 900px) {
  .hero {
    padding-bottom: 89px;
  }
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s6);
    padding-top: 89px;
    padding-bottom: 89px;
  }
}
.seals {
  display: flex;
  gap: 13px;
  margin-bottom: 21px;
}
.seal {
  --c: var(--sky-ink);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid var(--c);
  box-shadow: inset 0 0 0 3px var(--sky), inset 0 0 0 4px var(--c);
  color: var(--c);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  transform: rotate(-7deg);
  animation: seal 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both;
}
.seal b {
  display: block;
  font-weight: 800;
}
.seal--b {
  transform: rotate(5deg);
  animation-delay: 0.32s;
}
@keyframes seal {
  from {
    opacity: 0;
    transform: scale(1.7) rotate(-14deg);
  }
}
.hero__h1 {
  font-size: clamp(2rem, 8.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.02em;
  margin-bottom: 21px;
  color: var(--sky-ink);
}
.hero__lead {
  font-size: 16.5px;
  color: var(--sky-ink);
  max-width: 34em;
  margin-bottom: 34px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 21px;
}
.hero__note {
  margin: 0;
  font-size: 14px;
  color: var(--sky-ink);
}
/* 右側：手帳（4×3）の後ろから iPhone をのぞかせる。上 2 段と金貨が見える高さに */
.hero__art {
  position: relative;
  display: grid;
  justify-items: end;
  padding-top: 31%;
}
.hero__art .motif {
  position: absolute;
  left: 0;
  top: 4%;
  width: 52%;
}
.hero__art .phone {
  margin: 0;
}
@media (max-width: 899px) {
  .hero__art {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding-top: 40%;
  }
  .hero__art .motif .t-coin {
    box-shadow: inset 0 0 0 1px var(--coin-ring), inset 0 0 0 5px var(--coin), inset 0 0 0 6.5px var(--coin-ring);
  }
}
/* トップでは見出しとヒーローをつなげて、1 枚の空色の綴じ具にする */
.home .band {
  border-radius: 0;
}
.home .band__ring {
  display: none;
}
.home .hero {
  padding-top: 0;
}
.home .hero__grid {
  border-radius: 0 0 var(--r-hero) var(--r-hero);
  padding-top: 21px;
}
@media (min-width: 900px) {
  .home .hero__grid {
    padding-top: 55px;
  }
}

/* ── iPhone（CSS で描く。アプリのライト表示の見本なので色は固定） ── */
.phone {
  margin: 0 auto;
  width: min(330px, 76vw);
  position: relative;
}
.phone__body {
  border-radius: 48px;
  padding: 9px;
  background: #3a3035;
}
.phone__screen {
  border-radius: 39px;
  overflow: hidden;
  background: #fbf8f1;
  color: #3a3035;
  padding: 0 0 13px;
  aspect-ratio: 9 / 18.6;
  display: flex;
  flex-direction: column;
}
.phone__status {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--r-font);
  background: #b8d8ec;
  color: #244f68;
}
.phone__island {
  width: 92px;
  height: 26px;
  border-radius: 13px;
  background: #17151a;
}
.phone__sig {
  width: 24px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid #244f68;
  position: relative;
}
.phone__sig::after {
  content: '';
  position: absolute;
  inset: 1.5px 5px 1.5px 1.5px;
  background: #244f68;
  border-radius: 1px;
}
.clip {
  position: relative;
  background: #b8d8ec;
  color: #244f68;
  padding: 5px 18px 16px;
  border-radius: 0 0 21px 21px;
}
.clip__ring {
  position: absolute;
  bottom: -10px;
  width: 8px;
  height: 21px;
  border-radius: 5px;
  background: #7fa8c4;
  z-index: 1;
}
.clip__ring--l {
  left: 30%;
}
.clip__ring--r {
  right: 30%;
}
.clip__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}
.clip__month {
  font-family: var(--r-font);
  font-size: 14px;
}
.clip__total {
  margin: 2px 0 0;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.cal {
  padding: 18px 13px 0;
}
.cal__dow,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal__dow {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #756c67;
  margin-bottom: 5px;
}
.cal__dow .sun {
  color: #c0665a;
}
.cal__dow .sat {
  color: #306a99;
}
.cal__d,
.cal__pad {
  aspect-ratio: 1;
  border-radius: 8px;
}
.cal__d {
  position: relative;
  background: #efe9dd;
}
.cal__d i {
  position: absolute;
  left: 5px;
  top: 2px;
  font-style: normal;
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 9.5px;
  color: #8a817b;
}
.cal__d--on i {
  color: rgba(58, 48, 53, 0.72);
}
.cal__d--cafe {
  background: #f4b6ac;
}
.cal__d--juku {
  background: #a6dcc6;
}
.cal__d--night {
  background: #b7d7ef;
}
.cal__d--on {
  animation: stamp 0.46s cubic-bezier(0.2, 1.45, 0.4, 1) both;
  animation-delay: calc(var(--i) * 52ms + 520ms);
}
@keyframes stamp {
  from {
    opacity: 0;
    transform: scale(1.65) rotate(-9deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.9) rotate(2deg);
  }
  to {
    transform: none;
  }
}
.cal__d--coin {
  background: transparent;
}
.cal__d--coin::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: #f5c34b;
  box-shadow: inset 0 0 0 1px #d59d27;
  animation: coin 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: 1.85s;
}
.cal__d--coin i {
  z-index: 1;
  inset: 0;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #72520d;
}
@keyframes coin {
  from {
    opacity: 0;
    transform: translateY(-26px) scale(0.6);
  }
  50% {
    opacity: 1;
  }
}
.cal__d--today {
  outline: 2px solid #306a99;
  outline-offset: -2px;
}
.payday {
  margin: 13px 13px 0;
  background: #fffdfa;
  border: 1px solid #e8e0d2;
  border-radius: 16px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: rise 0.6s cubic-bezier(0.2, 1, 0.3, 1) 2.2s both;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.payday__coin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: #f5c34b;
  box-shadow: inset 0 0 0 1px #d59d27, inset 0 0 0 4.5px #f5c34b, inset 0 0 0 6px #d59d27;
}
.payday__txt,
.payday__amt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.payday__amt {
  margin-left: auto;
  text-align: right;
}
.payday__k {
  font-size: 10.5px;
  color: #756c67;
  font-weight: 700;
}
.payday__days {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 13px;
}
.payday__days b {
  font-size: 24px;
  margin-right: 1px;
}
.payday__amt b {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 18px;
  color: #3a3035;
}
.next {
  list-style: none;
  margin: 13px 13px 0;
  padding: 0;
}
.next li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px dashed #e8e0d2;
  font-size: 11.5px;
  color: #756c67;
}
.next__d {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 15px;
  color: #3a3035;
  width: 34px;
  line-height: 1;
}
.next__d small {
  font-size: 9.5px;
  margin-left: 2px;
  color: #8a817b;
}
.next__k {
  color: #3a3035;
  font-weight: 700;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 5px;
}
.next__k--juku {
  background: #a6dcc6;
}
.next__k--night {
  background: #b7d7ef;
}
.next__t {
  font-variant-numeric: tabular-nums;
}
.next b {
  margin-left: auto;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 13px;
  color: #3a3035;
}
.legend {
  margin: auto 13px 0;
  display: flex;
  gap: 13px;
  font-size: 10.5px;
  color: #756c67;
  font-weight: 700;
}
.legend span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  margin-right: 5px;
  vertical-align: 0;
}
.legend__cafe::before {
  background: #f4b6ac;
}
.legend__juku::before {
  background: #a6dcc6;
}
.legend__night::before {
  background: #b7d7ef;
}

/* ── できること：罫線リスト ── */
.feat {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}
.feat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .feat__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s6);
  }
}
.feat__item {
  position: relative;
  padding: 21px 0 16px 42px;
  border-bottom: 1px solid var(--line);
}
.feat__item p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.85;
}
.feat__h {
  font-size: 19px;
  font-weight: 700;
}
.mark {
  position: absolute;
  left: 0;
  top: 27px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--cell);
}
.mark--cafe {
  background: var(--m-coral);
}
.mark--juku {
  background: var(--m-mint);
}
.mark--night {
  background: var(--m-sky);
}
.mark--coin {
  border-radius: 50%;
  background: var(--coin);
  box-shadow: inset 0 0 0 1px var(--coin-ring), inset 0 0 0 4px var(--coin), inset 0 0 0 5.5px var(--coin-ring);
}
.mark--empty {
  background: var(--m-lilac);
}
.mark--split {
  background: var(--m-peach);
  box-shadow: inset -12px 0 0 var(--m-pink);
}

/* ── 働いた月 → 支払われる月 ── */
.flow {
  padding: var(--s6) 0;
}
.flow__grid {
  display: grid;
  gap: var(--s5);
  align-items: center;
}
@media (min-width: 900px) {
  .flow__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}
.flow__copy p {
  color: var(--ink-2);
}
.flow__small {
  font-size: 14px;
}
.flow__fig {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
}
.flow__arrow {
  width: 56px;
  height: auto;
}
.mini {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 13px 13px;
  position: relative;
  overflow: hidden;
}
.mini__cap {
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 13px;
  margin: 0 -13px 13px;
  padding: 8px 13px;
  background: var(--sky);
  color: var(--sky-ink);
  line-height: 1.3;
}
.mini__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mini__d {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--cell);
}
.mini__d--cafe {
  background: var(--m-coral);
}
.mini__d--coin {
  border-radius: 50%;
  background: var(--coin);
  box-shadow: inset 0 0 0 1px var(--coin-ring);
  transform: scale(1.35);
}

/* ── 年収の壁：物差し ── */
.wall {
  padding: var(--s6) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .wall {
    padding: 89px 0;
  }
}
.wall__grid {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .wall__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
    align-items: start;
  }
}
.wall__copy p {
  color: var(--ink-2);
}
.wall__src {
  font-size: 13px;
}
.ruler {
  list-style: none;
  margin: 0;
  padding: 5px 0;
  position: relative;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  /* 左端にミリ目盛り（模様。グラデーションの飾りではない） */
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px);
  background-size: 13px 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.ruler__row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 13px;
  align-items: baseline;
  padding: 13px 16px 13px 34px;
  position: relative;
  border-bottom: 1px dashed var(--line);
}
.ruler__row:last-child {
  border-bottom: 0;
}
.ruler__row::before {
  /* 目盛りの太線 */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 21px;
  background: var(--primary);
  transform-origin: left;
}
.ruler.is-armed .ruler__row::before {
  transform: scaleX(0);
}
.ruler.is-in .ruler__row::before {
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  transition-delay: calc(var(--n, 0) * 70ms);
}
.ruler__amt {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ruler__amt small {
  font-size: 13px;
  margin-left: 2px;
  color: var(--ink-2);
  font-weight: 700;
}
.ruler__txt {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.ruler__row[data-kind='incomeTaxSelf'] .ruler__amt,
.ruler__row[data-kind='dependentDeduction'] .ruler__amt {
  color: var(--link);
}

/* ── 夜勤：時間の帯 ── */
.night {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
  display: grid;
  gap: 8px;
}
@media (min-width: 900px) {
  .night {
    padding-top: 89px;
    padding-bottom: 89px;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--s6);
    align-items: center;
  }
  .night .receipt {
    margin: 0;
  }
}
.night__cta {
  margin: 0 0 34px;
}
.night__lead {
  color: var(--ink-2);
  max-width: 40em;
}
.tape {
  margin: 34px 0 21px;
  max-width: 720px;
}
.tape__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 5px;
  /* 22:00 の位置（5/9）に合わせるため実際の比率で並べる */
  position: relative;
  height: 1.4em;
}
.tape__scale span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.tape__scale span:nth-child(1) {
  left: 0;
  transform: none;
}
.tape__scale span:nth-child(2) {
  left: 33.33%;
}
.tape__scale span:nth-child(3) {
  left: 55.55%;
}
.tape__scale span:nth-child(4) {
  left: 77.77%;
}
.tape__scale span:nth-child(2) {
  display: none;
}
@media (min-width: 560px) {
  .tape__scale span:nth-child(2) {
    display: block;
  }
}
.tape__scale span:nth-child(5) {
  right: 0;
  left: auto;
  transform: none;
}
.tape__bar {
  display: flex;
  gap: 3px;
  height: 34px;
}
.tape__normal {
  flex: 5;
  background: var(--m-coral);
  border-radius: var(--r-tile) 0 0 var(--r-tile);
}
.tape__deep {
  flex: 4;
  background: var(--m-lilac);
  border-radius: 0 var(--r-tile) var(--r-tile) 0;
  position: relative;
}
.tape__deep::after {
  content: '深夜 25%増し';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--on-marker);
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.receipt {
  max-width: 460px;
  margin: 0 0 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 8px 21px;
  font-variant-numeric: tabular-nums;
}
.receipt div {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.receipt dt {
  color: var(--ink-2);
}
.receipt dd {
  margin: 0;
  font-family: var(--r-font);
  font-weight: 700;
  white-space: nowrap;
}
.receipt__total {
  border-bottom: 0 !important;
}
.receipt__total dt {
  color: var(--ink);
  font-weight: 700;
}
.receipt__total dd {
  font-weight: 800;
  font-size: 20px;
}

/* ── データの置き場所：空色の面 ── */
.keep {
  background: var(--sky);
  color: var(--sky-ink);
  padding: var(--s6) 0;
  margin: 0 8px;
  border-radius: var(--r-hero);
  position: relative;
}
@media (min-width: 720px) {
  .keep {
    margin: 0 16px;
  }
}
@media (min-width: 900px) {
  .keep {
    padding: 89px 0;
  }
}
.keep a {
  color: var(--sky-ink);
}
.keep__grid {
  display: grid;
  gap: 21px;
}
@media (min-width: 900px) {
  .keep__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s6);
  }
  .keep__more {
    grid-column: 2;
  }
}
.keep__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.keep__list li {
  padding: 13px 0 13px 34px;
  position: relative;
  border-bottom: 1px solid var(--sky-line);
  color: var(--sky-ink);
  font-size: 15px;
}
.keep__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23306A99' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/16px no-repeat;
}
.keep__list b {
  color: var(--sky-ink);
  display: block;
  font-family: var(--r-font);
  font-size: 17px;
}

/* ── FAQ ── */
.faq {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}
.faq__list {
  border-top: 1px solid var(--line);
  max-width: 820px;
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 42px 16px 0;
  position: relative;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.65;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 21px;
  height: 21px;
  margin-top: -10.5px;
  border-radius: 6px;
  background: var(--cell)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9h8M9 5v8' stroke='%23306A99' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/14px no-repeat;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after {
  transform: rotate(45deg);
}
.faq__a {
  padding: 0 0 13px;
  color: var(--ink-2);
  font-size: 15px;
}

/* ── 最後の案内 ── */
.end {
  padding: var(--s6) 0 89px;
}
.end__inner {
  display: grid;
  justify-items: start;
  gap: 5px;
}
.end__icon {
  border-radius: 22px;
  margin-bottom: 13px;
}
.end p {
  color: var(--ink-2);
  margin-bottom: 21px;
}

/* ── フッター ── */
.foot {
  border-top: 2px dashed var(--line);
  padding: var(--s5) 0 var(--s4);
  font-size: 14px;
  color: var(--ink-2);
}
.foot__grid {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 760px) {
  .foot__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.brand--ink {
  color: var(--ink);
  margin-bottom: 8px;
}
.foot__brand p {
  margin-bottom: 13px;
}
.foot__nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.foot__h {
  font-family: var(--r-font);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px;
}
.foot__nav a {
  color: var(--ink-2);
  text-decoration: none;
}
.foot__nav a:hover {
  color: var(--link);
  text-decoration: underline;
}
.foot__legal {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.75;
}
.foot__legal p {
  margin-bottom: 5px;
}

/* ── 計算ページ ── */
.crumbs {
  font-size: 13px;
  color: var(--ink-2);
  padding-top: 21px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.crumbs a {
  color: var(--ink-2);
}
.tool {
  padding-top: 21px;
  padding-bottom: 21px;
}
.tool__head {
  max-width: 820px;
}
.tool__h1 {
  font-size: clamp(1.85rem, 7vw, 2.9rem);
  font-weight: 700;
  margin-bottom: 21px;
}
.tool__h1 small {
  display: block;
  font-size: 0.48em;
  color: var(--ink-2);
  font-weight: 700;
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.answer {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 13px;
  padding: 13px 21px 8px;
  margin-bottom: var(--s5);
}
.answer p {
  margin-bottom: 0.6em;
}
.answer b {
  /* 黄色いマーカーで引いた線 */
  background: linear-gradient(transparent 60%, rgba(240, 215, 122, 0.7) 60%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .answer b {
    background: linear-gradient(transparent 60%, rgba(240, 215, 122, 0.3) 60%);
  }
}
:root[data-theme='dark'] .answer b {
  background: linear-gradient(transparent 60%, rgba(240, 215, 122, 0.3) 60%);
}
.calc {
  display: grid;
  gap: 21px;
  margin-bottom: var(--s6);
}
@media (min-width: 900px) {
  .calc {
    grid-template-columns: 420px 1fr;
    gap: var(--s5);
    align-items: start;
  }
  .calc__out {
    position: sticky;
    top: 16px;
  }
}
.calc__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 16px 8px;
  position: relative;
  overflow: hidden;
}
/* 手帳の綴じ具（空色の帯）を上端に */
.calc__form::before {
  content: '';
  display: block;
  height: 13px;
  margin: 0 -16px 21px;
  background: var(--sky);
}
@media (min-width: 720px) {
  .calc__form {
    padding: 0 21px 13px;
  }
  .calc__form::before {
    margin: 0 -21px 21px;
  }
}
.field {
  border: 0;
  margin: 0 0 21px;
  padding: 0;
  min-width: 0;
}
.field > label,
.field legend,
.field--pair label {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 5px;
}
.field__help {
  font-size: 13px;
  color: var(--ink-2);
  margin: 5px 0 0;
  line-height: 1.65;
}
.money {
  display: flex;
  align-items: center;
  background: var(--cell);
  border-radius: 13px;
  padding: 0 13px;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.money:focus-within {
  border-color: var(--primary);
}
.money input,
input[type='time'],
select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
}
.money input {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 24px;
  padding: 10px 0;
  font-variant-numeric: tabular-nums;
}
.money span {
  font-weight: 700;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
  margin-left: 5px;
}
.money--sm input {
  font-size: 19px;
  padding: 8px 0;
}
input[type='time'],
select {
  background: var(--cell);
  border-radius: 13px;
  padding: 10px 13px;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 19px;
  border: 2px solid transparent;
  min-height: 48px;
}
input[type='time']:focus,
select:focus {
  border-color: var(--primary);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23756c67' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  padding-right: 34px;
}
.field--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  align-items: end;
}
.field--pair:has(.pair__sep) {
  grid-template-columns: 1fr auto 1fr;
}
.pair__sep {
  padding-bottom: 13px;
  color: var(--ink-2);
  font-weight: 700;
}
.field--inline {
  display: flex;
  align-items: center;
  gap: 13px;
}
.field--inline label {
  margin: 0;
  flex: none;
}
.field--inline select {
  max-width: 180px;
}
.quick {
  margin-top: 13px;
  display: grid;
  gap: 5px;
}
.quick label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.seg {
  display: grid;
  gap: 5px;
}
.seg__opt {
  position: relative;
  display: block;
}
.seg__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.seg__opt span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 13px;
  background: var(--cell);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  border: 2px solid transparent;
}
.seg__opt span::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 5px;
  border: 2px solid var(--ink-2);
}
.seg__opt input:checked + span {
  border-color: var(--primary);
  background: var(--card);
}
.seg__opt input:checked + span::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 2px var(--card);
}
.seg__opt input:focus-visible + span {
  outline: 3px solid var(--coin-ring);
  outline-offset: 2px;
}

/* 計算結果 */
.result__head {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 21px 21px 16px;
  margin-bottom: 13px;
}
.result__k {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 700;
  margin: 0;
}
.result__big {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 2.9rem);
  line-height: 1.15;
  margin: 2px 0 5px;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}
.result__big small {
  font-size: 0.45em;
  margin: 0 5px;
  color: var(--ink-2);
}
.result__sub {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}
.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.lines__group {
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 15px;
  margin: 21px 0 8px;
}
.line {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--ok);
  border-radius: 13px;
  padding: 13px 16px 13px;
}
.line--caution {
  border-left-color: var(--caution);
}
.line--warning {
  border-left-color: var(--warn);
}
.line--exceeded {
  border-left-color: var(--over);
}
.line__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.line__title {
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
}
.line__rest {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.line--exceeded .line__rest {
  color: var(--over);
}
.line--warning .line__rest {
  color: var(--warn);
}
.line__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--cell);
  margin: 10px 0 8px;
  overflow: hidden;
}
.line__bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ok);
  transition: width 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}
.line--caution .line__bar span {
  background: var(--caution);
}
.line--warning .line__bar span {
  background: var(--warn);
}
.line--exceeded .line__bar span {
  background: var(--over);
}
.line__sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
}
.line__note {
  font-size: 13px;
  color: var(--ink-2);
  margin: 5px 0 0;
  line-height: 1.65;
}
.line__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 8px 0 5px;
  font-size: 13.5px;
}
.line__nums b {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.tag {
  display: inline-block;
  font-family: var(--b-font);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--on-marker);
  background: var(--m-lemon);
  border-radius: 5px;
  padding: 0 6px;
  vertical-align: 2px;
  margin-left: 5px;
}
.others {
  margin-top: 8px;
}
.others summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--link);
  padding: 10px 0;
}
.breakdown {
  margin: 13px 0 0;
  font-variant-numeric: tabular-nums;
}
.breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.breakdown dt {
  color: var(--ink-2);
}
.breakdown dd {
  margin: 0;
  font-family: var(--r-font);
  font-weight: 700;
  white-space: nowrap;
}
.hint {
  font-size: 13px;
  color: var(--ink-2);
  margin: 13px 2px 0;
}
.error {
  color: var(--over);
  font-weight: 700;
}

/* 参考表 */
.ref {
  max-width: 860px;
}
.ref p {
  color: var(--ink-2);
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 8px;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.table caption {
  text-align: left;
  font-weight: 700;
  padding: 0 0 8px;
  caption-side: top;
}
.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  line-height: 1.65;
}
.table thead th {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--paper-2);
}
.table tbody th {
  font-family: var(--r-font);
  font-weight: 800;
  white-space: nowrap;
}
.table td:not(.desc) {
  white-space: nowrap;
}
.table small {
  color: var(--ink-2);
  font-size: 13px;
}
.table--diff td {
  white-space: nowrap;
}
.table--diff tbody th {
  white-space: normal;
}
@media (max-width: 520px) {
  .table {
    font-size: 13.5px;
  }
  .table th,
  .table td {
    padding: 10px 10px;
  }
}
.table tr:last-child th,
.table tr:last-child td {
  border-bottom: 0;
}
.table-note {
  font-size: 13px;
}
.steps {
  padding-left: 1.4em;
  margin: 0 0 21px;
}
.steps li {
  margin-bottom: 5px;
  color: var(--ink-2);
}
.steps b {
  color: var(--ink);
}

/* 出典 */
.sources {
  margin: 8px 0 21px;
  padding: 21px 21px 8px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-card);
  font-size: 13.5px;
  max-width: 860px;
}
.sources__h {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.sources ul {
  padding-left: 1.2em;
  margin: 0 0 10px;
}
.sources li {
  margin-bottom: 5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.sources__meta {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}

/* アプリの案内 */
.nudge {
  padding-top: 8px;
  padding-bottom: var(--s6);
}
.nudge__inner {
  display: grid;
  gap: 13px;
  align-items: center;
  padding: 21px;
  border-radius: var(--r-card);
  background: var(--sky);
  color: var(--sky-ink);
  max-width: 860px;
}
@media (min-width: 760px) {
  .nudge__inner {
    grid-template-columns: auto 1fr auto;
    gap: 21px;
    padding: 21px 34px 21px 21px;
  }
}
.nudge__icon {
  border-radius: 16px;
}
.nudge__h {
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 5px;
  line-height: 1.55;
}
.nudge__text p:last-child {
  margin: 0;
  font-size: 13.5px;
  color: var(--sky-ink);
}

/* ── 文書ページ ── */
.doc {
  padding-top: 21px;
  padding-bottom: 21px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.doc__h1 {
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 8px;
}
.doc__date {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 21px;
}
.doc .h2 {
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  margin: 1.9em 0 0.6em;
  padding-top: 0.9em;
  border-top: 1px solid var(--line);
}
.doc__small {
  font-size: 13.5px;
  color: var(--ink-2);
}
.doc__related {
  max-width: 820px;
  padding-bottom: var(--s6);
}
.page-doc .faq {
  max-width: 820px;
  padding-top: 21px;
}
.list {
  padding-left: 1.3em;
  margin: 0 0 1em;
}
.list li {
  margin-bottom: 5px;
}
.contact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 21px 5px;
  margin: 21px 0 8px;
  overflow: hidden;
}
.contact::before {
  content: '';
  display: block;
  height: 13px;
  margin: 0 -21px 16px;
  background: var(--sky);
}
.contact__k {
  font-weight: 700;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.contact__mail {
  font-family: var(--r-font);
  font-weight: 800;
  font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  margin: 2px 0 8px;
  word-break: break-all;
}
.contact p:last-child {
  font-size: 14px;
  color: var(--ink-2);
}
.lost {
  padding-top: var(--s6);
  padding-bottom: 89px;
}
.lost__cal {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  gap: 8px;
  margin-bottom: var(--s5);
}
.lost__cal span {
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  background: var(--cell);
}
.lost__cal .t-coral {
  background: var(--m-coral);
}
.lost__cal .t-mint {
  background: var(--m-mint);
}
.lost__cal .t-sky {
  background: var(--m-sky);
}
.lost__q {
  background: var(--primary) !important;
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-family: var(--r-font);
  font-weight: 800;
  font-size: 19px;
}

/* ダークモードで、data URI の線の色を明るい青に */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .faq__item summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9h8M9 5v8' stroke='%238EBBF0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  :root:not([data-theme='light']) .keep__list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%238EBBF0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  :root:not([data-theme='light']) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b3aaa5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme='dark'] .faq__item summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9h8M9 5v8' stroke='%238EBBF0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] .keep__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%238EBBF0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b3aaa5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* iPhone が画面に入るまで判子の動きを待つ（JS が動くときだけ。スマホでは iPhone が下にあるため） */
@media (scripting: enabled) {
  .phone:not(.is-play) .cal__d--on,
  .phone:not(.is-play) .cal__d--coin::before,
  .phone:not(.is-play) .payday {
    animation-play-state: paused;
  }
}

/* 動きを減らす設定：すべて止めた完成形で見せる */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .ruler.is-armed .ruler__row::before {
    transform: none;
  }
}