@charset "UTF-8";
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
}

p,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, figure {
  margin: 0;
}

h1, h2, h3, h4, button, input, textarea {
  font-family: inherit;
  font-weight: inherit;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  appearance: none;
}

/* base
----------------------------------------*/
html {
  height: 100%;
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
  overflow-x: hidden;
}

img,
video,
object {
  height: auto;
}

img {
  width: 100%;
  vertical-align: bottom;
}

a {
  color: #004798;
}

/* .c-hero
----------------------------------------*/
@media screen and (min-width: 768px) {
  .c-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 375px);
    height: 100vh;
    z-index: 1;
    pointer-events: none;
  }
}
.c-hero .c-hero-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 449px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.c-hero .c-hero-ttl {
  width: min(54.6rem, 50.5555555556vh);
  margin: 0 auto;
}
.c-hero .c-hero-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  width: min(45rem, 41.6666666667vh);
  margin: 3.5rem auto 0;
}
.c-hero .c-hero-nav.-quiz a {
  background-image: url(../img/btn_hero_01.png);
  color: #004798;
}
.c-hero .c-hero-nav.-receipt {
  margin-top: 0.8rem;
}
.c-hero .c-hero-nav.-receipt a {
  background-image: url(../img/btn_hero_02.png);
  color: #10873F;
}
.c-hero .c-hero-head {
  flex-shrink: 0;
  width: 39.5555555556%;
  border-radius: 10px;
  box-shadow: 3px 3px 6px rgba(0, 54, 67, 0.6);
}
.c-hero .c-hero-item {
  width: min(26.3rem, 24.3518518519vh);
  height: min(4rem, 3.7037037037vh);
  border-radius: 10px;
  box-shadow: 2px 2px 6px rgba(0, 116, 144, 0.7);
  line-height: 1;
}
.c-hero .c-hero-item + .c-hero-item {
  margin-top: 0.6rem;
}
.c-hero .c-hero-item a {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: min(1.2rem, 1.1111111111vh);
  padding-left: min(2.3rem, 2.1296296296vh);
  background-position: left top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: min(1.8rem, 1.6666666667vh);
}

/* js
----------------------------------------*/
.js-fadein {
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.025, 0.905, 0.31, 1.08);
}
.js-fadein.-show {
  opacity: 1;
  transform: translateY(0) rotate(0) !important;
}

.simplebar-scrollbar::before {
  background-color: rgba(0, 71, 152, 0.2);
}

/* utility
----------------------------------------*/
@media screen and (min-width: 768px) {
  .u-onlySP {
    display: none !important;
  }
}

@media screen and (max-width: 767.9px) {
  .u-onlyPC {
    display: none !important;
  }
}

.u-pl0 {
  padding-left: 0 !important;
}

.u-pl-1em {
  padding-left: 1em;
}

.u-indent-minus {
  padding-left: 1em;
  text-indent: -1em;
}

.u-indent {
  text-indent: 1em;
}

.u-indent-reset {
  text-indent: 0;
}

/* parts
----------------------------------------*/
.p-moveBtn {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-moveBtn:hover {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/* module
----------------------------------------*/
.m-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .m-section {
    border-radius: 1.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-section {
    border-radius: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .m-section + .m-section {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-section + .m-section {
    margin-top: 16vw;
  }
}

.m-section-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #004798;
}
@media screen and (min-width: 768px) {
  .m-section-ttl {
    height: 6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-section-ttl {
    height: 16vw;
  }
}

/* .c-header
----------------------------------------*/
.c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  background: #ffffff;
  box-shadow: 0 1px 20px 0 rgba(0, 71, 99, 0.2);
  z-index: 200;
}
@media screen and (min-width: 768px) {
  .c-header {
    width: 37.5rem;
    padding-left: 2.3rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-header {
    left: 0;
    width: 100%;
    padding-left: 6.1333333333vw;
  }
}

@media screen and (min-width: 768px) {
  .c-header-logo:first-of-type {
    width: 12.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-header-logo:first-of-type {
    width: 33.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-header-logo:last-of-type {
    width: 10.7rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-header-logo:last-of-type {
    width: 28.5333333333vw;
  }
}

/* .c-mv
----------------------------------------*/
.c-mv-schedule {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .c-mv-schedule {
    gap: 1.2rem;
    padding: 2rem 1.35rem 2rem 1.25rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-mv-schedule {
    gap: 3.2vw;
    padding: 5.3333333333vw 3.6vw 5.3333333333vw 3.3333333333vw;
  }
}

.c-mv-anchor {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .c-mv-anchor {
    gap: 1.2rem 0;
    padding: 2rem 1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-mv-anchor {
    gap: 3.2vw 0;
    padding: 5.3333333333vw 2.6666666667vw;
  }
}
.c-mv-anchor li {
  position: relative;
}
@media screen and (min-width: 768px) {
  .c-mv-anchor li {
    width: 16.75rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-mv-anchor li {
    width: 44.6666666667vw;
  }
}
.c-mv-anchor li a {
  display: block;
}
@media screen and (min-width: 768px) {
  .c-mv-anchor li a {
    padding-bottom: 1.8rem;
  }
  .c-mv-anchor li a:hover::after {
    transform: translate(-50%, 5px);
  }
}
@media screen and (max-width: 767.9px) {
  .c-mv-anchor li a {
    padding-bottom: 4.8vw;
  }
}
.c-mv-anchor li a::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  background: url(../img/arrow_anchor_01.png) left top no-repeat;
  background-size: 100% auto;
  transform: translateX(-50%);
  transition: 0.3s ease-out 0s;
  content: "";
}
@media screen and (min-width: 768px) {
  .c-mv-anchor li a::after {
    width: 1.2rem;
    height: 1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-mv-anchor li a::after {
    width: 3.2vw;
    height: 2.6666666667vw;
  }
}

/* .c-points
----------------------------------------*/
.c-points {
  background-color: #10873F;
}
@media screen and (min-width: 768px) {
  .c-points {
    padding: 2.5rem 0 3.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-points {
    padding: 6.6666666667vw 0 9.3333333333vw;
  }
}
.c-points.-receipt .c-points-btn {
  display: none;
}

@media screen and (min-width: 768px) {
  .c-points-ttl {
    padding-left: 1.65rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-points-ttl {
    padding-left: 4.4vw;
  }
}

.c-points-img {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .c-points-img {
    width: 35.5rem;
    margin-top: 0.6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-points-img {
    width: 94.6666666667vw;
    margin-top: 1.6vw;
  }
}

.c-points-btn {
  display: block;
  margin: 0 auto;
  box-shadow: 0 18px 12px rgba(11, 44, 24, 0.24);
}
@media screen and (min-width: 768px) {
  .c-points-btn {
    width: 33.5rem;
    margin-top: 2.9rem;
    border-radius: 5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-points-btn {
    width: 89.3333333333vw;
    margin-top: 7.7333333333vw;
    border-radius: 13.3333333333vw;
  }
}

/* .c-prize
----------------------------------------*/
@media screen and (min-width: 768px) {
  .c-prize-ttl img {
    width: 3.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-prize-ttl img {
    width: 9.3333333333vw;
  }
}

.m-prize {
  position: relative;
}
@media screen and (min-width: 768px) {
  .m-prize {
    padding: 2.8rem 0;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize {
    padding: 7.4666666667vw 0;
  }
}
.m-prize.-quiz {
  background-color: #C3ECFF;
}
@media screen and (min-width: 768px) {
  .m-prize.-quiz .m-prize-txt {
    margin-top: 1.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize.-quiz .m-prize-txt {
    margin-top: 4vw;
  }
}
.m-prize.-quiz .m-prize-img {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .m-prize.-quiz .m-prize-img {
    width: 38.35rem;
    margin-top: 1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize.-quiz .m-prize-img {
    width: 102.2666666667vw;
    margin-top: 2.6666666667vw;
  }
}
.m-prize.-receipt {
  background-color: #B9F2BE;
}
.m-prize.-receipt::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(../img/line_prize_01.png) left center repeat-x;
  background-size: auto 100%;
  transform: translateY(-50%);
  content: "";
}
@media screen and (min-width: 768px) {
  .m-prize.-receipt::before {
    height: 0.35rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize.-receipt::before {
    height: 0.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .m-prize.-receipt .m-prize-txt {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize.-receipt .m-prize-txt {
    margin-top: 5.3333333333vw;
  }
}
.m-prize.-receipt .m-prize-annotation {
  text-align: left;
}

.m-prize-ttl {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .m-prize-ttl {
    width: 33.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize-ttl {
    width: 89.3333333333vw;
  }
}

.m-prize-txt {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .m-prize-txt {
    width: 34.7rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize-txt {
    width: 92.5333333333vw;
  }
}

.m-prize-annotation {
  color: #004798;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .m-prize-annotation {
    margin-top: 0.8rem;
    padding-inline: 2rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize-annotation {
    margin-top: 2.1333333333vw;
    padding-inline: 5.3333333333vw;
    font-size: 3.2vw;
  }
}

.m-prize-btn {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .m-prize-btn {
    width: 33.5rem;
    margin-top: 2.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-prize-btn {
    width: 89.3333333333vw;
    margin-top: 7.4666666667vw;
  }
}

/* .c-products
----------------------------------------*/
.c-products {
  background-color: #FFF776;
}
@media screen and (min-width: 768px) {
  .c-products {
    padding-bottom: 2.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-products {
    padding-bottom: 7.4666666667vw;
  }
}

@media screen and (min-width: 768px) {
  .c-products-ttl img {
    width: 7.6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-products-ttl img {
    width: 20.2666666667vw;
  }
}

.c-products-inner {
  margin: 0 auto;
  background-color: #ffffff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .c-products-inner {
    width: 35.5rem;
    margin-top: 2.8rem;
    padding-block: 2.8rem;
    border: 0.3rem solid #004798;
    border-radius: 0.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-products-inner {
    width: 94.6666666667vw;
    margin-top: 7.4666666667vw;
    padding-block: 7.4666666667vw;
    border: 0.8vw solid #004798;
    border-radius: 1.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-products-inner img {
    width: 31.45rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-products-inner img {
    width: 83.8666666667vw;
  }
}

.c-products-subTtl {
  color: #004798;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .c-products-subTtl {
    margin-bottom: 2.8rem;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-products-subTtl {
    margin-bottom: 7.4666666667vw;
    font-size: 4.2666666667vw;
  }
}

/* .m-howto
----------------------------------------*/
.m-howto {
  color: #004798;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .m-howto {
    padding: 3rem 1rem 2.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto {
    padding: 8vw 2.6666666667vw 7.4666666667vw;
  }
}

.m-howto-lead {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .m-howto-lead {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-lead {
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 768px) {
  .m-howto-container {
    padding: 2.8rem 0rem;
    border-bottom: 0.15rem dotted #004798;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-container {
    padding: 7.4666666667vw 0vw;
    border-bottom: 0.4vw dotted #004798;
  }
}
.m-howto-container.-hagaki {
  padding-bottom: 0;
  border-bottom: none;
}

.m-howto-ttl {
  margin: 0 auto;
  background-position: center top;
  background-size: auto 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .m-howto-ttl {
    min-height: 6.6rem;
    padding-top: 1.6rem;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-ttl {
    min-height: 17.6vw;
    padding-top: 4.2666666667vw;
    font-size: 3.7333333333vw;
  }
}

.m-howto-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .m-howto-steps {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-steps {
    margin-top: 5.3333333333vw;
  }
}
.m-howto-steps li {
  background-color: #ffffff;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .m-howto-steps li {
    width: 11.5rem;
    border-radius: 0.75rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-steps li {
    width: 30.6666666667vw;
    border-radius: 2vw;
  }
}
.m-howto-steps h4 {
  background-color: #fff000;
}
@media screen and (min-width: 768px) {
  .m-howto-steps h4 {
    padding: 0.6rem 0 0.5rem;
    font-size: 1.35rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-steps h4 {
    padding: 1.6vw 0 1.3333333333vw;
    font-size: 3.6vw;
  }
}
.m-howto-steps p {
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .m-howto-steps p {
    padding: 0.8rem 0;
    font-size: 1.35rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-steps p {
    padding: 2.1333333333vw 0;
    font-size: 3.6vw;
  }
}
.m-howto-steps span {
  display: inline-block;
  font-weight: normal;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .m-howto-steps span {
    margin-top: 0.4rem;
    font-size: 1.15rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-steps span {
    margin-top: 1.0666666667vw;
    font-size: 3.0666666667vw;
  }
}

.m-howto-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .m-howto-btn {
    gap: 1.6rem;
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-btn {
    margin-top: 5.3333333333vw;
    gap: 4.2666666667vw;
  }
}
.m-howto-btn::before, .m-howto-btn::after {
  display: block;
  background: url(../img/line_quiz_01.png) left top no-repeat;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .m-howto-btn::before, .m-howto-btn::after {
    width: 1.75rem;
    height: 3.25rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-btn::before, .m-howto-btn::after {
    width: 4.6666666667vw;
    height: 8.6666666667vw;
  }
}
.m-howto-btn::after {
  transform-origin: 50% 50%;
  transform: rotateY(180deg);
}
.m-howto-btn a {
  display: block;
}

@media screen and (min-width: 768px) {
  .m-howto-detail {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-detail {
    margin-top: 5.3333333333vw;
  }
}
.m-howto-detail dt {
  display: inline-block;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .m-howto-detail dt {
    padding: 0.4rem 0.8rem 0.35rem;
    border-radius: 1.5rem;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-detail dt {
    padding: 1.0666666667vw 2.1333333333vw 0.9333333333vw;
    border-radius: 4vw;
    font-size: 3.7333333333vw;
  }
}
.m-howto-detail dd {
  font-weight: normal;
  line-height: 1.7083333333;
}
@media screen and (min-width: 768px) {
  .m-howto-detail dd {
    margin-top: 0.8rem;
    padding-inline: 1rem 2rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-detail dd {
    margin-top: 2.1333333333vw;
    padding-inline: 2.6666666667vw 5.3333333333vw;
    font-size: 3.2vw;
  }
}

.m-howto-txts {
  font-weight: normal;
  line-height: 1.7083333333;
}
@media screen and (min-width: 768px) {
  .m-howto-txts {
    margin-top: 2rem;
    padding-inline: 1rem 2rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-howto-txts {
    margin-top: 5.3333333333vw;
    padding-inline: 2.6666666667vw 5.3333333333vw;
    font-size: 3.2vw;
  }
}

/* .m-requirements
----------------------------------------*/
.m-requirements {
  color: #004798;
}
@media screen and (min-width: 768px) {
  .m-requirements {
    padding: 2.8rem 2rem;
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements {
    padding: 7.4666666667vw 5.3333333333vw;
    font-size: 2.9333333333vw;
  }
}

@media screen and (min-width: 768px) {
  .m-requirements-container {
    height: 33rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-container {
    height: 88vw;
  }
}

.m-requirements-ttl {
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .m-requirements-ttl {
    margin-top: 2rem;
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-ttl {
    margin-top: 5.3333333333vw;
    font-size: 2.9333333333vw;
  }
}
.m-requirements-ttl:first-of-type {
  margin-top: 0;
}
.m-requirements-ttl::before {
  content: "●";
}

.m-requirements-txt {
  padding-left: 1em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .m-requirements-txt {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-txt {
    font-size: 2.9333333333vw;
  }
}

.m-requirements-list {
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .m-requirements-list {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-list {
    font-size: 2.9333333333vw;
  }
}
.m-requirements-list span {
  display: inline-block;
  width: 4em;
}
.m-requirements-list .m-requirements-dashList {
  text-indent: 0;
}
.m-requirements-list .m-requirements-dashList li {
  padding-left: 0.5em;
  text-indent: -0.3em;
}
@media screen and (min-width: 768px) {
  .m-requirements-list + .m-requirements-detail {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-list + .m-requirements-detail {
    margin-top: 5.3333333333vw;
  }
}

.m-requirements-detail dt {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 768px) {
  .m-requirements-detail dt {
    margin-top: 1.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-detail dt {
    margin-top: 4vw;
  }
}
.m-requirements-detail dt:first-of-type {
  margin-top: 0;
}
.m-requirements-detail dd {
  padding-left: 1em;
}
.m-requirements-detail dd span {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .m-requirements-detail p {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-detail p {
    margin-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .m-requirements-detail + .m-requirements-list {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-requirements-detail + .m-requirements-list {
    margin-top: 5.3333333333vw;
  }
}

/* .c-quiz
----------------------------------------*/
.c-quiz {
  background-color: #C3ECFF;
}
@media screen and (min-width: 768px) {
  .c-quiz.-howto .c-quiz-ttl img {
    width: 28.65rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz.-howto .c-quiz-ttl img {
    width: 76.4vw;
  }
}
@media screen and (min-width: 768px) {
  .c-quiz.-requirements .c-quiz-ttl img {
    width: 29.55rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz.-requirements .c-quiz-ttl img {
    width: 78.8vw;
  }
}
@media screen and (min-width: 768px) {
  .c-quiz .m-howto-container.-web .m-howto-btn a {
    width: 20.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz .m-howto-container.-web .m-howto-btn a {
    width: 55.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .c-quiz .m-howto-container.-x .m-howto-btn a {
    width: 21.6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz .m-howto-container.-x .m-howto-btn a {
    width: 57.6vw;
  }
}
@media screen and (min-width: 768px) {
  .c-quiz .m-howto-container.-hagaki .m-howto-btn {
    gap: 0.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz .m-howto-container.-hagaki .m-howto-btn {
    gap: 2.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-quiz .m-howto-container.-hagaki .m-howto-btn a {
    width: 26rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-quiz .m-howto-container.-hagaki .m-howto-btn a {
    width: 69.3333333333vw;
  }
}
.c-quiz .m-howto-ttl {
  background-image: url(../img/bg_quiz_01.png);
}
.c-quiz .m-requirements-ttl::before {
  color: #fff000;
}

/* .c-receipt
----------------------------------------*/
.c-receipt {
  background-color: #B9F2BE;
}
@media screen and (min-width: 768px) {
  .c-receipt.-howto .c-receipt-ttl img {
    width: 30.25rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt.-howto .c-receipt-ttl img {
    width: 80.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .c-receipt.-requirements .c-receipt-ttl img {
    width: 30.35rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt.-requirements .c-receipt-ttl img {
    width: 80.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-receipt .m-howto-container.-web .m-howto-btn {
    gap: 0.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt .m-howto-container.-web .m-howto-btn {
    gap: 2.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-receipt .m-howto-container.-web .m-howto-btn a {
    width: 26.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt .m-howto-container.-web .m-howto-btn a {
    width: 70.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .c-receipt .m-howto-container.-hagaki .m-howto-btn {
    gap: 0.8rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt .m-howto-container.-hagaki .m-howto-btn {
    gap: 2.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .c-receipt .m-howto-container.-hagaki .m-howto-btn a {
    width: 26rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-receipt .m-howto-container.-hagaki .m-howto-btn a {
    width: 69.3333333333vw;
  }
}
.c-receipt .m-howto-ttl {
  background-image: url(../img/bg_receipt_01.png);
}
.c-receipt .m-requirements-ttl::before {
  color: #0CB506;
}

/* .m-receipt ----------*/
.m-receipt {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .m-receipt {
    padding-inline: 1rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt {
    padding-inline: 2.6666666667vw;
  }
}
.m-receipt + .m-receipt .m-receipt-txt:first-of-type {
  text-align: center;
}

.m-receipt-ttl {
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .m-receipt-ttl {
    gap: 0.8rem;
    padding: 0.9rem 1rem 0.8rem;
    border-radius: 0.8rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-ttl {
    gap: 2.1333333333vw;
    padding: 2.4vw 2.6666666667vw 2.1333333333vw;
    border-radius: 2.1333333333vw;
    font-size: 3.2vw;
  }
}
.m-receipt-ttl::before, .m-receipt-ttl::after {
  display: inline-block;
  background-color: #fff000;
  content: "";
}
@media screen and (min-width: 768px) {
  .m-receipt-ttl::before, .m-receipt-ttl::after {
    width: 0.5rem;
    height: 0.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-ttl::before, .m-receipt-ttl::after {
    width: 1.3333333333vw;
    height: 1.3333333333vw;
  }
}

.m-receipt-txt {
  font-weight: normal;
  line-height: 1.7083333333;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .m-receipt-txt {
    margin-top: 2rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-txt {
    margin-top: 5.3333333333vw;
    font-size: 3.2vw;
  }
}

.m-receipt-img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .m-receipt-img {
    gap: 2rem;
    margin-top: 1.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-img {
    gap: 5.3333333333vw;
    margin-top: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .m-receipt-img li {
    width: 16.75rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-img li {
    width: 44.6666666667vw;
  }
}

@media screen and (min-width: 768px) {
  ul.m-receipt-img {
    width: 35.5rem;
    transform: translateX(-1rem);
  }
}
@media screen and (max-width: 767.9px) {
  ul.m-receipt-img {
    width: 94.6666666667vw;
    transform: translateX(-2.6666666667vw);
  }
}

.m-receipt-list {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .m-receipt-list {
    gap: 1.2rem;
    margin-top: 2rem;
    padding: 1.8rem 0 1.8rem 1rem;
    border-radius: 0.75rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-list {
    gap: 3.2vw;
    margin-top: 5.3333333333vw;
    padding: 4.8vw 0 4.8vw 2.6666666667vw;
    border-radius: 2vw;
  }
}
.m-receipt-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .m-receipt-list li {
    gap: 0.5rem;
    font-size: 1.15rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-list li {
    gap: 1.3333333333vw;
    font-size: 3.0666666667vw;
  }
}
.m-receipt-list li::before {
  display: block;
  background-color: #fff000;
  content: "";
}
@media screen and (min-width: 768px) {
  .m-receipt-list li::before {
    width: 0.5rem;
    height: 0.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .m-receipt-list li::before {
    width: 1.3333333333vw;
    height: 1.3333333333vw;
  }
}

/* .c-sns
----------------------------------------*/
.c-sns {
  position: relative;
  background-color: #C3ECFF;
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  .c-sns {
    padding-block: 14rem 6rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-sns {
    padding-block: 37.3333333333vw 16vw;
  }
}
.c-sns::before {
  display: block;
  position: absolute;
  left: 50%;
  background-color: #86D5F8;
  border-radius: 100%;
  transform: translateX(-50%);
  content: "";
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .c-sns::before {
    top: -52.5rem;
    width: 61.85rem;
    height: 61.85rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-sns::before {
    top: -140vw;
    width: 164.9333333333vw;
    height: 164.9333333333vw;
  }
}

.c-sns-list {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .c-sns-list {
    gap: 4rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-sns-list {
    gap: 10.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .c-sns-list li {
    width: 5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-sns-list li {
    width: 13.3333333333vw;
  }
}
.c-sns-list a {
  display: block;
}

/* .c-footer
----------------------------------------*/
.c-footer {
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .c-footer {
    padding-bottom: 3.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-footer {
    padding-bottom: 8.5333333333vw;
  }
}

.c-footer-list {
  border-bottom: 1px solid #A3A3A3;
}
.c-footer-list li {
  border-top: 1px solid #A3A3A3;
}
.c-footer-list a {
  display: block;
}

.c-footer-logo {
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .c-footer-logo {
    width: 16.6rem;
    margin-top: 2.5rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-footer-logo {
    width: 44.2666666667vw;
    margin-top: 6.6666666667vw;
  }
}

.c-footer-copyright {
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .c-footer-copyright {
    width: 33.3rem;
    margin-top: 1.2rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-footer-copyright {
    width: 88.8vw;
    margin-top: 3.2vw;
  }
}

.c-footer-pagetop {
  display: block;
  position: fixed;
  opacity: 0;
  z-index: 100;
  transition: 0.5s ease-out 0s;
}
@media screen and (min-width: 768px) {
  .c-footer-pagetop {
    bottom: 6rem;
    width: 4.65rem;
    margin-left: 32rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-footer-pagetop {
    bottom: 16vw;
    width: 12.4vw;
    margin-left: 85.3333333333vw;
  }
}
.c-footer-pagetop.-show {
  opacity: 1;
}

body {
  position: relative;
}
body::before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_cpn2025.jpg) center center no-repeat;
  background-size: cover;
  content: "";
  z-index: 0;
}

.c-wrapper {
  display: flex;
  justify-content: flex-end;
  max-width: 990px;
  margin: 0 auto;
  text-spacing-trim: space-all;
}
@media screen and (min-width: 768px) {
  .c-wrapper a {
    transition: 0.3s ease-out 0s;
  }
  .c-wrapper a:hover {
    opacity: 0.7;
  }
}

.c-contents {
  position: relative;
}
@media screen and (min-width: 768px) {
  .c-contents {
    width: 37.5rem;
    padding-top: 5.4rem;
  }
}
@media screen and (max-width: 767.9px) {
  .c-contents {
    width: 100%;
    padding-top: 14.4vw;
  }
}
.c-contents main {
  position: relative;
  background-color: #86D5F8;
  z-index: 1;
}