/* Banto Apps: 藍染の暖簾と帳面。色は 4 色だけ。 */
:root {
  --ai: #17375e;        /* 藍: 暖簾、見出し、リンク */
  --ai-usu: #e9eef6;    /* 薄藍: 帯、表の見出し */
  --sumi: #1b1e24;      /* 墨: 本文 */
  --nezu: #5b6472;      /* 鼠: 補足 */
  --yamabuki: #e9a20c;  /* 山吹: 主ボタンだけ */
  --kami: #ffffff;
  --sen: #cfd6e2;       /* 罫線 */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kami); color: var(--sumi);
  font-family: var(--gothic); font-size: 1rem; line-height: 1.9;
  font-feature-settings: "palt";
}
a { color: var(--ai); text-underline-offset: 0.2em; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--yamabuki); outline-offset: 3px; }
.wrap { width: min(100% - 2rem, 60rem); margin-inline: auto; }

/* 上の帯 */
.bar { border-bottom: 1px solid var(--sen); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ai); font-family: var(--mincho); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; }
.crest { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ai); color: var(--kami); display: grid; place-items: center; font-family: var(--mincho); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.bar nav { display: flex; gap: 1.4rem; font-size: 0.95rem; }
.bar nav a { text-decoration: none; color: var(--sumi); }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ai); text-decoration: underline; }

/* 暖簾 */
.noren { padding-top: 1.1rem; }
.noren-rod { height: 0.55rem; background: var(--sumi); border-radius: 0.3rem; }
.noren-cloth { margin-inline: 1.2rem; }
.noren-top { background: var(--ai); color: var(--kami); padding: clamp(1.6rem, 5vw, 2.6rem) clamp(1.1rem, 3vw, 1.6rem) 1.6rem; }
.noren-top h1 { margin: 0; font-family: var(--mincho); font-weight: 700; font-size: clamp(1.5rem, 5.2vw, 3.2rem); line-height: 1.45; letter-spacing: 0.06em; word-break: auto-phrase; text-wrap: balance; }
.noren-top p { margin: 1rem 0 0; max-width: 34em; font-size: 1.02rem; color: #dbe4f2; }
.noren-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.noren-panels span { display: block; height: clamp(4.5rem, 11vw, 7.5rem); background: var(--ai); transform-origin: top center; animation: sway 1.8s ease-out 0.15s 1 both; }
.noren-panels span:nth-child(2) { animation-delay: 0.28s; display: grid; place-items: center; }
.noren-panels span:nth-child(3) { animation-delay: 0.4s; }
.noren-panels .crest { width: clamp(2.6rem, 6vw, 4rem); height: clamp(2.6rem, 6vw, 4rem); background: var(--kami); color: var(--ai); font-size: clamp(1.3rem, 3.2vw, 2.1rem); }
@keyframes sway { 0% { transform: skewX(-5deg) scaleY(0.96); } 45% { transform: skewX(2.5deg); } 75% { transform: skewX(-1deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .noren-panels span { animation: none; } }

/* 見出しと本文 */
main section { padding-block: 3.2rem 0.4rem; }
h2 { font-family: var(--mincho); font-weight: 700; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.05em; color: var(--ai); margin: 0 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ai); }
h3 { font-size: 1.08rem; margin: 1.8rem 0 0.3rem; }
p { margin: 0 0 1rem; max-width: 40em; }
.lead { font-size: 1.08rem; }
.note { color: var(--nezu); font-size: 0.92rem; }

/* 帳面（アプリ一覧・料金など） */
.ledger { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 1rem 0.9rem; border-bottom: 1px solid var(--sen); }
.ledger thead th { background: var(--ai-usu); color: var(--ai); font-weight: 700; font-size: 0.9rem; border-bottom: 2px solid var(--ai); }
.ledger .name { font-family: var(--mincho); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.ledger td:last-child, .ledger th:last-child { white-space: nowrap; }
.ledger .name a { text-decoration: none; }
.ledger .name a:hover { text-decoration: underline; }
.ledger .soon { color: var(--nezu); }
@media (max-width: 40rem) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--sen); }
  .ledger td { display: block; border: 0; padding: 0.15rem 0; }
  .ledger .name, .ledger td:last-child { white-space: normal; }
}

/* 約束・機能の並び */
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.4rem 2.4rem; margin: 0; padding: 0; list-style: none; }
.pairs li { padding: 0.9rem 0; border-bottom: 1px solid var(--sen); }
.pairs strong { display: block; color: var(--ai); font-size: 1.05rem; }

/* 手順（実際に順番があるものだけ番号を振る） */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: 42em; }
.steps li { counter-increment: step; position: relative; padding: 0.2rem 0 1.4rem 3.2rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--ai); color: var(--ai); display: grid; place-items: center; font-family: var(--mincho); font-weight: 700; }
.steps strong { display: block; }

/* よくある質問 */
details { border-bottom: 1px solid var(--sen); max-width: 44em; }
summary { cursor: pointer; padding: 1rem 0; font-weight: 700; list-style-position: outside; }
details p { padding: 0 0 1rem 1.2rem; margin: 0; }

.button { display: inline-block; background: var(--yamabuki); color: var(--sumi); font-weight: 700; text-decoration: none; padding: 0.85rem 1.6rem; border-radius: 0.3rem; }
.button:hover { filter: brightness(0.95); }
.button[aria-disabled="true"] { background: var(--ai-usu); color: var(--nezu); cursor: default; }
.actions { display: flex; gap: 1rem 1.4rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* 文書ページ（ポリシーなど） */
.doc h1 { font-family: var(--mincho); color: var(--ai); font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.5; margin: 2.6rem 0 0.4rem; }
.doc h2 { font-size: 1.25rem; margin-top: 2.4rem; border-bottom-width: 1px; }
.doc ul { max-width: 40em; padding-left: 1.3rem; }

footer { margin-top: 4rem; background: var(--ai); color: #dbe4f2; font-size: 0.92rem; }
footer .wrap { padding-block: 2rem; display: flex; gap: 1rem 2rem; justify-content: space-between; flex-wrap: wrap; }
footer a { color: var(--kami); }
footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* アプリのアイコン */
.ledger .name a.app { display: inline-flex; align-items: center; gap: 0.7rem; }
.ledger .name img { border-radius: 22%; }
.noren-top h1 .app-icon { display: block; border-radius: 22%; margin-bottom: 1rem; border: 2px solid rgba(255,255,255,0.35); }