* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  color: #2C2420;
  background: #FDFBF9;
  line-height: 1.9;
}

.container { max-width: 720px; margin: 0 auto; padding: 40px 24px 64px; }

.breadcrumb { font-size: 13px; color: #8D847E; margin-bottom: 28px; }
.breadcrumb a { color: #8D847E; }
.breadcrumb span { margin: 0 6px; }

h1 { font-size: 27px; line-height: 1.5; color: #2C2420; margin-bottom: 12px; }
.lead { font-size: 15px; color: #5C544E; margin-bottom: 36px; }

h2 {
  font-size: 19px; color: #2C2420; margin-top: 44px; margin-bottom: 14px;
  border-bottom: 2px solid #F2D0D6; padding-bottom: 6px;
}
h3 { font-size: 16px; color: #2C2420; margin-top: 26px; margin-bottom: 8px; }

p, li { font-size: 15px; color: #2C2420; }
p { margin-bottom: 14px; }
ul, ol { padding-left: 22px; margin-bottom: 14px; }
li { margin-bottom: 8px; }

a { color: #D4687A; text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 600; }

.card {
  background: #fff; border: 1px solid #EDE8E3; border-radius: 12px;
  padding: 20px 24px; margin: 20px 0;
}
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.card-label { font-size: 13px; color: #8D847E; margin-bottom: 8px; }

.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li {
  position: relative; padding-left: 38px; margin-bottom: 14px;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #F2D0D6; color: #A8465A;
  font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
th, td { border: 1px solid #EDE8E3; padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: #FAF6F3; font-weight: 600; }

.faq-item { margin-bottom: 22px; }
.faq-q { font-weight: 600; margin-bottom: 6px; }
.faq-a { color: #5C544E; }

.disclaimer {
  background: #FAF6F3; border: 1px solid #EDE8E3; border-radius: 12px;
  padding: 18px 22px; margin-top: 44px;
  font-size: 13px; color: #5C544E; line-height: 1.8;
}
.disclaimer p { font-size: 13px; color: #5C544E; margin-bottom: 0; }

/* Apple 配布のバッジ。改変不可なので、拡縮と周囲の余白だけを指定する。 */
.app-store-badge { display: inline-block; line-height: 0; }
.app-store-badge img { height: 48px; width: auto; margin: 8px 8px 8px 0; }
.app-store-badge:hover img { opacity: .85; }

.trademark { font-size: 11px; color: #8D847E; margin-top: 8px; }

.guide-list { list-style: none; padding-left: 0; }
.guide-list li { margin-bottom: 16px; }
.guide-list .guide-title { font-size: 16px; font-weight: 600; }
.guide-list .guide-desc { font-size: 14px; color: #5C544E; }

.related { margin-top: 44px; }

.footer {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid #EDE8E3;
  font-size: 13px; color: #8D847E; text-align: center;
}
.footer a { color: #8D847E; }

@media (max-width: 480px) {
  h1 { font-size: 23px; }
  .container { padding: 32px 20px 56px; }
}