@charset "UTF-8";
html, body {
  margin: 0 !important;
  padding: 0 !important; }

img {
  vertical-align: bottom; }

.wrap {
  margin: 0 !important;
  padding: 0 !important; }

.inner_wrap {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #4b2200;
  margin: 0;
  padding: 0 !important;
  z-index: 1; }

@media screen and (min-width: 1024px) {
  .inner_wrap::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh !important;
    background-image: url("../img/dot1.png"), url("../../assets/img2/home/pc_mv1.webp");
    background-position: center top,center center;
    background-repeat: repeat, no-repeat;
    background-size: 4px 4px,cover; } }
header {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background: #fdffd6 url("../img/mv.webp") center top no-repeat;
  background-size: 100% auto; }
  header h1 {
    width: 80%;
    max-width: 800px;
    margin: 0 auto; }

.inner__box {
  display: block;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative; }

.lead {
  display: block;
  width: 100%;
  max-width: 1024px;
  background: #fdffd6;
  margin: 0 auto;
  padding: 20px 0 0 0;
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500; }

@media screen and (min-width: 1024px) {
  .lead {
    font-size: 1.7rem;
    line-height: 1.9; } }
.howto {
  display: block;
  width: 100%;
  max-width: 1024px;
  background: #7adbe9 url("../img/wave01.webp") center top no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500; }
  .howto .howto_title {
    display: block;
    width: 90%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    padding: 0 0 4% 0;
    position: relative; }
  .howto .step {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    padding: 0 0 16px 0;
    position: relative; }

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .howto {
    font-size: 1.56rem;
    line-height: 1.8; } }
@media screen and (min-width: 1024px) {
  .howto {
    font-size: 1.7rem;
    line-height: 1.9; } }
.charaBox {
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative; }
  .charaBox img {
    padding: 0 6%; }
  .charaBox img.hu {
    padding: 0 4%; }

.subline {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  padding: 0 0 4% 0;
  position: relative; }
  .subline .subtxt {
    display: block;
    width: 80%;
    max-width: 400px;
    height: auto;
    margin: 3% auto;
    padding: 0;
    position: relative; }

.ylw {
  color: #fff600; }

.soda {
  color: #5cffc4; }

.notes_box {
  display: block;
  width: 100%;
  max-width: 1024px;
  background: #33c3d8 url("../img/wave02.webp") center top no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
  font-size: 1.36rem;
  line-height: 1.6;
  font-weight: 500; }
  .notes_box .midashi::first-letter {
    color: #f0ff00; }
  .notes_box .midashi {
    display: block;
    width: 100%;
    border-top: 3px dotted #f0ff00;
    border-bottom: 3px dotted #f0ff00;
    font-size: 1.5rem;
    color: #8c3500;
    font-weight: 600;
    line-height: 1;
    padding: 2% 0;
    margin-bottom: 1%; }

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .notes_box {
    font-size: 1.5rem;
    line-height: 1.6; }
    .notes_box .midashi {
      font-size: 1.6rem; } }
@media screen and (min-width: 1024px) {
  .notes_box {
    font-size: 1.6rem;
    line-height: 1.8; }
    .notes_box .midashi {
      padding: 1.5% 0;
      font-size: 1.7rem; } }
.qa_box {
  display: block;
  width: 100%;
  max-width: 1024px;
  background: #0a8bc1 url("../img/wave03.webp") center top no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
  font-size: 1.36rem;
  line-height: 1.6;
  font-weight: 500; }
  .qa_box .qa_list {
    padding-top: 15px;
    border-bottom: 1px dotted #fff; }
    .qa_box .qa_list .text_q {
      color: #fff600;
      margin-bottom: 5px; }
    .qa_box .qa_list .text_a {
      color: #fff;
      padding-bottom: 15px;
      font-weight: 400; }
    .qa_box .qa_list a, .qa_box .qa_list a:visited {
      color: #5cfffd;
      text-decoration-style: dotted;
      text-underline-offset: 3px;
      font-weight: 600; }

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .qa_box {
    font-size: 1.45rem;
    line-height: 1.65; } }
@media screen and (min-width: 1024px) {
  .qa_box {
    font-size: 1.5rem;
    line-height: 1.7; } }
.rule_box {
  display: block;
  width: 100%;
  max-width: 1024px;
  background: #0068dd url("../img/wave04.webp") center top no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
  font-size: 1.36rem;
  line-height: 1.5;
  font-weight: 400;
  color: #fff; }
  .rule_box a, .rule_box a:visited {
    color: #5cfffd;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    font-weight: 600; }
  .rule_box ul.inside li::marker {
    color: #fff600; }

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .rule_box {
    font-size: 1.45rem;
    line-height: 1.55; } }
@media screen and (min-width: 1024px) {
  .rule_box {
    font-size: 1.5rem;
    line-height: 1.6; } }
.siren {
  display: block;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  position: relative; }

.spitem_foot2 {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  padding: 0 0 2vw 0;
  background: #7adbe9;
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative; }
  .spitem_foot2 .footlogo {
    display: block;
    width: 50%;
    max-width: 200px;
    margin: 0 auto;
    padding: 2% 0;
    position: relative; }
  .spitem_foot2 .footer_copyright {
    display: block;
    text-align: center;
    width: 100%;
    margin: 10px 0 30px 0;
    padding: 0;
    color: #000;
    font-size: 11px; }
    .spitem_foot2 .footer_copyright img {
      width: 60%;
      max-width: 300px; }
  .spitem_foot2 .policy {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 96%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 11px;
    line-height: 1.0; }
    .spitem_foot2 .policy li {
      margin: 5px 10px;
      white-space: nowrap；; }
    .spitem_foot2 .policy a {
      color: #000;
      text-decoration: none; }
    .spitem_foot2 .policy a:hover {
      color: #026700;
      text-decoration: underline;
      text-decoration-color: #026700;
      text-decoration-style: dotted;
      text-underline-offset: 0.5ex; }