:root {
  --orange: #b16729; --green: #7e8245; --yellow: #e7ba20; --blue: #758b97;
  --gray: #939598; --ink: #4a4c4f; --ink-2: #6d6e71;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { width: 100%; max-width: 36rem; margin: 0 auto; padding: 2rem 1.5rem 2.5rem; flex: 1; }
.back { display: inline-block; min-height: 2.75rem; padding: .6rem 0; color: var(--ink-2); font-size: .9375rem; text-decoration: none; }
.back:hover, .back:focus-visible { color: var(--ink); text-decoration: underline; }
.rule { height: 1px; background: var(--yellow); border: 0; margin: .5rem 0 1.5rem; }
h1 { margin: 0 0 .25rem; font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.1; font-weight: 700; }
.sub { margin: 0 0 2rem; font-size: 1.125rem; color: var(--ink-2); }

.network { border: 1px solid var(--gray); padding: 1rem 1.25rem; margin-bottom: 2.5rem; }
.network dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; }
.network dt { color: var(--ink-2); font-size: .9375rem; }
.network dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.network .en { display: block; font-weight: 400; font-size: .8125rem; color: var(--ink-2); }

section { margin-bottom: 2.25rem; }
h2 { margin: 0 0 .25rem; font-size: 1.25rem; line-height: 1.2; font-weight: 700; padding-left: .75rem; border-left: 4px solid var(--c); }
h2 .en { display: block; font-weight: 400; font-size: .9375rem; color: var(--ink-2); margin-top: .15rem; }
#iphone { --c: var(--blue); }
#android { --c: var(--green); }
ol { margin: 1rem 0 0; padding-left: 1.5rem; }
li { margin-bottom: .9rem; line-height: 1.45; padding-left: .25rem; }
li::marker { color: var(--orange); font-weight: 700; }
li .en { display: block; font-size: .875rem; color: var(--ink-2); margin-top: .1rem; }
.note { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }

.bar { display: flex; height: .75rem; width: 100%; max-width: 36rem; margin: 0 auto; }
.bar i { flex: 1; }
.bar i:nth-child(1) { background: var(--orange); } .bar i:nth-child(2) { background: var(--green); }
.bar i:nth-child(3) { background: var(--yellow); } .bar i:nth-child(4) { background: var(--blue); }