* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif;
  font-size: 18px; line-height: 1.8; color: #2F3A3A; background: #FBF7EF;
  overflow-wrap: anywhere;
}
#app { max-width: 640px; margin: 0 auto; padding: 16px 16px 56px; }
.notice, .pr {
  font-size: 15px; line-height: 1.6; background: #F1ECE0; padding: 8px 12px; border-radius: 10px; margin-bottom: 16px;
}
.pr { margin-top: 32px; margin-bottom: 8px; font-weight: bold; }
h1 { font-size: 24px; line-height: 1.5; margin: 8px 0 16px; }
h2 { font-size: 18px; line-height: 1.5; margin-bottom: 8px; color: #24786E; }
.intro, .box, .offer {
  background: #fff; border: 1px solid #E5DECF; border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
.intro p + p { margin-top: 8px; }
ul { padding-left: 22px; }
li + li { margin-top: 6px; }
.btn {
  display: block; width: 100%; min-height: 56px; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 2px solid #BFDAD5; border-radius: 16px; padding: 12px 16px; margin: 12px 0; cursor: pointer;
}
.btn:active { background: #E9F4F2; border-color: #2F8F83; }
a.btn { text-decoration: none; }
.btn:focus-visible, .back:focus-visible, a:focus-visible { outline: 3px solid #E8A33D; outline-offset: 2px; }
.primary { background: #24786E; border-color: #24786E; color: #fff; text-align: center; font-weight: bold; }
.primary:active { background: #1D6159; border-color: #1D6159; }
.again { margin-top: 40px; }
.progress { font-size: 15px; margin-bottom: 8px; color: #566161; }
.question { font-size: 20px; font-weight: bold; line-height: 1.6; margin-bottom: 8px; }
.back {
  min-height: 44px; font: inherit; font-size: 16px; color: #566161; background: none; border: 0;
  text-decoration: underline; cursor: pointer; margin-top: 8px;
}
.result-name {
  font-size: 22px; font-weight: bold; line-height: 1.5; border-left: 6px solid #E8A33D; background: #fff;
  padding: 12px 14px; border-radius: 0 12px 12px 0; margin-bottom: 16px;
}
.offer { border: 2px solid #E8A33D; }
.offer-link {
  display: block; min-height: 52px; margin-top: 14px; padding: 12px; text-align: center; font-weight: bold;
  color: #2F3A3A; background: #F6D79E; border-radius: 14px; text-decoration: none;
}
button.offer-link { width: 100%; border: 0; font: inherit; font-weight: bold; cursor: pointer; }
button.offer-link:focus-visible { outline: 3px solid #E8A33D; outline-offset: 2px; }
.pending { margin-top: 14px; padding: 10px 12px; text-align: center; border: 1px dashed #A99C7E; border-radius: 12px; font-size: 16px; }
footer { font-size: 15px; line-height: 1.7; margin-top: 28px; padding-top: 14px; border-top: 1px solid #E5DECF; }
footer a { display: inline-block; min-height: 44px; padding: 10px 0; color: #24786E; }
.manga { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.menu { display: block; color: inherit; text-decoration: none; font-weight: bold; }