/* --------------------------------
 * detail
 * -------------------------------- */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  background-color: #BDDB98;
  color: #4F4F4F;
  font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  -webkit-text-size-adjust: none;
}
@media all and (-ms-high-contrast: none) {
  body {
    font-family: '游ゴシック体', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, sans-serif;
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}
@media screen and (max-width: 500px) {
  html {
    font-size: 54.0%;
  }
}
img {
  width: 100%;
  height: auto;
  display: block;
}
h1 {
  background-color: #6FBA2C;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 2.2rem;
  padding: 3% 0;
}
main {
  max-width: 650px;
  margin: 0px auto;
  padding: 0 10px 20px;
}
.campaign-wrap {
  background-color: #ffffff;
  padding: 4%;
}
.note01 {
  font-size: 0.9rem;
  text-align: center;
  margin: 0 -4%;
}
.note02 {
  font-size: 0.9rem;
}
.note03 {
  text-align: center;
  font-size: 1.3rem;
  border: 1px solid #4F4F4F;
  padding: 0.5em 0;
  margin-top: 1.3em;
}
@media screen and (max-width: 500px) {
h1 {
  font-size: 5vw;
}
}
/* --------------------------------
 * ttl-wrap
 * -------------------------------- */
.ttl-wrap {
  border-bottom: 3px solid #6FBA2C;
  padding-bottom: 3%;
  margin-bottom: 4%;
}
.ttl-wrap h2 {
  text-align: center;
  color: #E94254;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 -4% 8px;
  line-height: 1.4;
}
.ttl-wrap h2 .ttl-20 {
  font-size: 2.0rem;
}
.ttl-wrap h2 .ttl-22 {
  font-size: 2.2rem;
}
.ttl-wrap h2 .ttl-24 {
  font-size: 2.4rem;
}
.ttl-wrap h2 .ttl-26 {
  font-size: 2.6rem;
}
.ttl-wrap h2 .score {
  display: block;
  font-size: 2.8rem;
  background-image: url("../img/ttl-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 2% 3% 1%;
  width: 90%;
  margin: 5px auto;
  line-height: 1;
  background-position: center center;
}
.period-wrap {
  text-align: center;
  border: dotted 1px #3E3A39;
  border-left: none;
  border-right: none;
  margin: 35px 0 2%;
  font-weight: bold;
  font-size: 1.7rem;
}
.period-wrap h3 {
  position: relative;
  top: -1.2em;
}
.period-wrap h3 span {
  text-align: center;
  background-color: #E94254;
  display: inline-block;
  padding: 5px 2em;
  border-radius: 50px;
  color: #ffffff;
  font-size: 1.8rem;
}
.period-wrap div {
  position: relative;
  top: -0.8em;
}
.period-wrap strong {
  font-size: 2.0rem;
  display: block;
  color: #E94254;
}
@media screen and (max-width: 767px) {
.ttl-wrap h2 .ttl-20 {
  font-size: 2.0rem;
}
.ttl-wrap h2 .ttl-22 {
  font-size: 5.5vw;
}
.ttl-wrap h2 .ttl-24 {
  font-size: 6vw;
}
.ttl-wrap h2 .ttl-26 {
  font-size: 2.6rem;
}
}
/* --------------------------------
 * score-wrap
 * -------------------------------- */
.score-wrap {
  border-bottom: 3px solid #6FBA2C;
  padding-bottom: 3%;
  margin-bottom: 4%;
}
.score-wrap h2 {
  position: relative;
  padding: .3em 0;
  border-radius: 10px;
  background-color: #e94254;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  width: 85%;
  margin: 0 auto 11px;
}
.score-wrap h2::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-top: 11px solid #e94254;
}
.score {
  display: flex;
}
.score-ttl {
  width: 50%;
  padding-bottom: 1em;
}
.score-ttl h3 {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: .8em;
}
.score-ttl h3 strong {
  font-size: 2.6rem;
  color: #e94254;
  display: block;
}
.score-ttl h3 span {
  color: #e94254;
  display: block;
}
.score-img {
  width: 49%;
}
/* --------------------------------
 * list-wrap
 * -------------------------------- */
.list-wrap h2 {
  font-size: 1.5rem;
  margin-bottom: .8em;
  font-weight: bold;
}
.list-wrap ul {
  padding-left: 1.3em;
  list-style-type: square;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: .5em;
}
.list-wrap li {
  margin-bottom: .5em;
  font-size: 1.6rem;
}
.btn-howtouse {
  text-align: center;
  width: 90%;
  margin: 0 auto 2em;
}
.btn-howtouse a {
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.8rem;
  display: block;
  padding: .3em 0;
  border-radius: 5px;
  border: 1px solid #6DB030;
  background-image: linear-gradient(180deg, #6FBA2C 0%, #B4CD91 21.33%, #6AA933 42.94%, #57991C 61.86%, #57991C 100%);
  text-shadow: 1px 1px 2px #51584D;
}
@media screen and (max-width: 767px) {
.list-wrap li {
  font-size: 3.5vw;
}
}
/* for-pc, for-mobile ------------------------ */
.for-pc {
  display: block;
}
.for-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .for-pc {
    display: none;
  }
  .for-mobile {
    display: block;
  }
}