@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+2:wght@100;200;300;400;500;600;700;800;900&family=Mochiy+Pop+P+One&display=swap");
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0; }

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; }

main {
  display: block; }

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0; }

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

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace,monospace;
  font-size: inherit; }

address {
  font-style: inherit; }

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

abbr[title] {
  text-decoration: underlinedotted; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace,monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom; }

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; }

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; }

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default; }

:-moz-focusring {
  outline: auto; }

select:disabled {
  opacity: inherit; }

option {
  padding: 0; }

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0; }

legend {
  padding: 0; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

label[for] {
  cursor: pointer; }

details {
  display: block; }

summary {
  display: list-item; }

[contenteditable]:focus {
  outline: auto; }

table {
  border-color: inherit; }

caption {
  text-align: left; }

td,
th {
  vertical-align: top;
  padding: 0; }

th {
  text-align: left;
  font-weight: bold; }

/*font-family: 'M PLUS 2', sans-serif;*/
/*font-family: 'Mochiy Pop P One', sans-serif;*/
/*font-family: 'Dela Gothic One', cursive;*/
/*######################################################
基本設定
######################################################*/
html {
  height: 100%;
  background: url(../img/bg.jpg); }

body {
  color: #333;
  font-family: 'M PLUS 2', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
  height: 100%;
  font-weight: 500; }

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

a {
  color: #09f;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer; }
  a:hover {
    opacity: 0.5; }
  a[target="_blank"] {
    display: inline-block;
    position: relative;
    padding-right: 14px; }
    a[target="_blank"]:before {
      content: "";
      position: absolute;
      border: solid 1px;
      width: 10px;
      height: 7px;
      background: #FFF;
      right: 0;
      top: 5px; }
    a[target="_blank"]:after {
      content: "";
      position: absolute;
      border: solid 1px;
      width: 10px;
      height: 7px;
      background: #FFF;
      top: 7px;
      right: 2px; }

section {
  padding: 100px calc(50% - 500px); }
  section h2 {
    font-family: 'Dela Gothic One', cursive;
    font-size: 38px;
    text-align: center;
    margin: 0 0 4rem; }
    section h3 {
      font-family: 'Mochiy Pop P One', cursive;
      font-size: 35px;
      text-align: center;
      margin: 0 0 1rem; }
      section h4 {
        font-family: 'Mochiy Pop P One', cursive;
        font-size: 20px;
        text-align: center;
        margin: 0 0 1rem; }
      big {
        color:white; 
        display: block;
        font-size: 120%;
        text-align: center; }
    
  section:nth-of-type(3n-1) {
    background: #F4F4F4;
    color: #000; }
  section:nth-of-type(3n) {
    background: #000;
    color: #FFF; }

p {
  margin: 1rem 0; }

.red {
  color: #E83434; }

a.apps {
  display: flex;
  background: #06C755;
  color:white;         --2023/2/27グレーから白に戻す（入会受付再開のため）
  width: 900px;
  height: 80px;
  text-align: center;
  margin: auto;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  border-radius: 40px; }
  a.apps img {
    height: 60px;
    width: auto;
    display: inline-block;
    margin: 0 20px 0 -20px; }
  a.apps:before {
    content: none; }
  a.apps:after {
    content: none; }

@media (max-width: 768px) {
  body {
    font-size: 14px; }

  section {
    padding: 50px 20px; }
    section h2 {
      font-size: 25px;
      margin: 0 0 2rem; }

  a.apps {
    width: 100%;
    font-size: 20px; }
    a.apps img {
      margin: 0 10px 0 -20px; } }
/*============================
header
============================*/
header {
  background: #E83434;
  padding: 180px calc(50% - 500px) 50px;
  position: relative; }
  header h1 {
    font-family: 'Dela Gothic One', cursive;
    background: #000;
    padding: 10px calc(50% - 500px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #FFF;
    font-size: 32px; }
    header h1 b {
      font-weight: normal;
      margin: 0 0 0 .5rem; }
  header strong {
    font-family: 'Mochiy Pop P One', sans-serif;
    display: block;
    text-align: center;
    color: #000;
    font-size: 76px;
    font-weight: normal;
    margin: 50px 0; }
  header ul {
    display: flex;
    justify-content: space-between;
    color: #FFF;
    font-size: 28px;
    font-weight: 900; }
    header ul li {
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.4;
      border-radius: 50%;
      width: 190px;
      height: 190px; }
      /* メールボックスエリア　*/
      #formWrap {
        width:700px;
        margin:0 auto;
        color:#555;
        line-height:120%;
        font-size:90%;
      }
      header h2 {
        color:hsl(0, 0%, 97%)
      }
      table.formTable{
        width:100%;
        margin:0 auto;
        border-collapse:collapse;
      }
      table.formTable td,table.formTable th{
        border:1px solid rgb(255, 255, 255);
        padding:10px;
        background-color: #f98888;
      }
      font9 {
        color:rgb(57, 29, 170);
      }
      font10 {
        color:red;
      }
      table.formTable th{
        width:30%;
        font-weight:normal;
        background:#e4d3d3;
        text-align:left;
      }
      .box1 {
        float:left;
        left:0;
        height:auto;
        width:100%;
        background-image:url('../img/bk1.gif');		
      }
      
@media (max-width: 768px) {
  header {
    padding: 200px 10px 50px; }
    header h1 {
      padding: 10px;
      font-size: 30px;
      text-align: center;
      line-height: 1.4; }
      header h1 b {
        display: block;
        margin: 0; }
    header strong {
      font-size: 30px;
      margin: 30px 0; }
    header ul {
      flex-wrap: wrap;
      justify-content: center;
      font-size: 20px; }
      header ul li {
        width: 120px;
        height: 120px;
        margin: 5px; } }
/*============================
footer
============================*/
footer {
  background: #000;
  padding: 100px 0; }
  footer a.page_top {
    transition: 1s;
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: block;
    text-indent: -9999px;
    border: 6px #ccc solid;
    border-radius: 50px;
    width: 65px;
    height: 65px;
    float: right;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    z-index: 900; }
    footer a.page_top:before {
      content: '';
      height: 0;
      width: 0;
      display: block;
      border: 12px transparent solid;
      border-bottom-color: #ccc;
      position: absolute;
      top: 0px;
      left: 15px;
      border-radius: 3px; }
    footer a.page_top:after {
      content: '';
      height: 20px;
      width: 10px;
      display: block;
      background: #ccc;
      position: absolute;
      top: 21px;
      left: 22px;
      border-radius: 2px; }
    footer a.page_top.fixed {
      visibility: visible;
      opacity: 1; }
      footer a.page_top.fixed:hover {
        opacity: 0.5; }
  footer img {
    width: 150px;
    display: block;
    margin: 100px auto 20px; }
  footer small {
    color: #FFF;
    display: block;
    text-align: center; }
  footer big {
    color:white; 
    display: block;
    font-size: 120%;
    text-align: center; }
 
@media (max-width: 768px) {
  footer {
    padding: 100px 20px; } }
/*//////////////////////////////////////
ページ要素
//////////////////////////////////////*/
/*============================
#introduction
============================*/
#introduction strong {
  display: block;
  text-align: center;
  color: #E83434;
  font-size: 21px;
  font-weight: 900; }

/*============================
#feature
============================*/
#feature ul {
  display: flex;
  color: #FFF;
  justify-content: space-between; }
  #feature ul li {
    width: calc((100% - 20px)/4);
    background: #E83434;
    padding: 20px;
    border-radius: 10px;
    opacity: 0; }
    #feature ul li:nth-of-type(2) {
      animation-delay: .2s; }
    #feature ul li:nth-of-type(3) {
      animation-delay: .4s; }
    #feature ul li:nth-of-type(4) {
      animation-delay: .6s; }
    #feature ul li img {
      width: 100px;
      display: block;
      margin: 0 auto 1rem; }
    #feature ul li b {
      font-size: 28px;
      font-weight: 900;
      display: block;
      text-align: center;
      color: #000; }

@media (max-width: 768px) {
  #feature ul {
    flex-direction: column; }
    #feature ul li {
      width: 100%;
      margin: 0 0 20px; }
      #feature ul li b {
        font-size: 28px;
        font-weight: 900;
        display: block;
        text-align: center;
        color: #000; }
        #feature ul li b br {
          display: none; } }
/*============================
#recommend
============================*/
#recommend ul {
  display: table;
  font-family: 'Mochiy Pop P One', sans-serif;
  margin: 0 auto 100px;
  font-size: 36px; }
  #recommend ul li {
    position: relative;
    padding: 0 0 0 45px;
    color: #fe9; }
    #recommend ul li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 15px;
      width: 30px;
      height: 30px;
      border: solid 3px #FFF; }
    #recommend ul li:after {
      content: "✓";
      position: absolute;
      left: 2px;
      top: -3px;
      font-weight: bold;
      color: #E83434; }

@media (max-width: 768px) {
  #recommend ul {
    font-size: 24px; }
    #recommend ul li {
      margin: 0 0 20px; }
      #recommend ul li:after {
        font-size: 36px; } }
/*============================
#detail
============================*/
#detail {
  counter-reset: num; }
  #detail dl {
    position: relative;
    border: solid 3px #000;
    margin: 0 0 2rem; }
    #detail dl:before {
      counter-increment: num;
      content: "特徴 その" counter(num);
      position: absolute;
      left: -20px;
      top: -20px;
      font-weight: 900;
      background: #E83434;
      color: #000;
      padding: 4px 10px;
      border-radius: 15px; }
    #detail dl dt {
      background: #000;
      color: #FFF;
      padding: 20px;
      font-size: 20px; }
    #detail dl dd {
      padding: 20px; }
      #detail dl dd ol {
        margin: 0 1rem 1rem;
        display: flex;
        flex-direction: column; }
        #detail dl dd ol > li {
          padding: 1rem;
          position: relative;
          border-bottom: dotted 1px; }
          #detail dl dd ol > li:before {
            content: "■";
            position: absolute;
            left: 0; }
          #detail dl dd ol > li p {
            margin: 10px 0 0;
            border: solid 1px #999;
            background: #F4F4F4;
            padding: 10px 20px; }
      #detail dl dd ul {
        list-style: disc;
        margin: 0 0 0 2rem; }
      #detail dl dd .cash_area {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px 0 0; }
        #detail dl dd .cash_area div {
          border: solid 3px #000;
          margin: 0 10px 10px 0;
          width: calc((100% - 40px)/4); }
          #detail dl dd .cash_area div b {
            background: #000;
            color: #FFF;
            display: block;
            padding: 2px 5px 5px; }
          #detail dl dd .cash_area div ul {
            margin: 0 0 0 1.5rem;
            padding: 10px; }

@media (max-width: 768px) {
  #detail dl dd .cash_area div {
    width: calc((100% - 20px)/2); } }
/*============================
#compare
============================*/
#compare table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px; }
  #compare table tr:nth-of-type(2n) {
    background: #FFF; }
  #compare table tr th {
    padding: 10px;
    text-align: center;
    background: #000;
    color: #FFF;
    font-size: 24px; }
    #compare table tr th:first-of-type {
      background: #F4F4F4;
      width: 260px; }
    #compare table tr th:last-of-type {
      color: #E83434; }
  #compare table tr td {
    padding: 10px;
    vertical-align: middle;
    height: 150px; }
    #compare table tr td:first-of-type {
      text-align: right;
      padding: 10px 40px; }
    #compare table tr td:last-of-type {
      color: #E83434; }
    #compare table tr td strong {
      display: block;
      text-align: center;
      font-size: 24px;
      font-weight: 800; }
    #compare table tr td p {
      border: solid 1px #999;
      background: #fff;
      padding: 10px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
      margin: 0; }
      #compare table tr td p b {
        display: block;
        text-align: center;
        font-weight: 900; }

@media (max-width: 768px) {
  #compare table tr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #ccc;
    padding: 0 1px 1px; }
    #compare table tr:nth-of-type(2n) {
      background: #ccc; }
      #compare table tr:nth-of-type(2n) td {
        background: #fff; }
    #compare table tr th {
      width: calc((100% - 1px)/2);
      font-size: 20px; }
      #compare table tr th:first-of-type {
        display: none; }
    #compare table tr td {
      width: calc((100% - 1px)/2);
      height: auto;
      background: #F4F4F4; }
      #compare table tr td:first-of-type {
        width: 100%;
        text-align: center;
        background: transparent; }
      #compare table tr td p {
        font-size: 12px; } }
/*============================
#flow
============================*/
#flow ul {
  counter-reset: num;
  display: flex;
  justify-content: space-between;
  margin: 0 0 100px; }
  #flow ul li {
    position: relative;
    border: solid 10px #E83434;
    background: #FFF;
    width: calc((100% - 160px)/5);
    padding: 10px;
    border-radius: 20px;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center; }
    #flow ul li:nth-of-type(2) {
      animation-delay: .1s; }
    #flow ul li:nth-of-type(3) {
      animation-delay: .2s; }
    #flow ul li:nth-of-type(4) {
      animation-delay: .3s; }
    #flow ul li:nth-of-type(5) {
      animation-delay: .4s; }
    #flow ul li:before {
      counter-increment: num;
      content: counter(num);
      position: absolute;
      top: -20px;
      left: -20px;
      width: 30px;
      height: 30px;
      background: #E83434;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 900;
      color: #FFF; }
    #flow ul li:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: -40px;
      margin: auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 0 20px 20px;
      border-color: transparent transparent transparent #E83434; }
    #flow ul li:last-of-type:after {
      content: none; }
    #flow ul li img {
      display: block;
      width: 70px;
      margin: 0 auto 10px; }

@media (max-width: 768px) {
  #flow ul {
    flex-direction: column; }
    #flow ul li {
      width: 100%;
      flex-direction: initial;
      margin: 0 0 30px; }
      #flow ul li:after {
        top: inherit;
        bottom: -35px;
        right: 0;
        left: 0;
        border-width: 20px 20px 0 20px;
        border-color: #E83434 transparent transparent transparent; }
      #flow ul li:last-of-type:after {
        content: none; }
      #flow ul li.animated {
        animation: none; }
      #flow ul li img {
        margin: 0 10px; } }
/*============================
#faq
============================*/
#faq .tab {
  position: relative;
  margin-bottom: 5px;
  width: 100%;
  color: #FFF;
  overflow: hidden; }
  #faq .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1; }
    #faq .tab input:checked ~ .answer {
      max-height: 100em; }
    #faq .tab input[type=checkbox] + label::after {
      content: "×"; }
    #faq .tab input[type=checkbox]:checked + label {
      background: #E83434; }
    #faq .tab input[type=checkbox]:checked + label::after {
      transform: rotate(0deg); }
  #faq .tab label {
    position: relative;
    display: block;
    padding: 1em 3em 1em 1em;
    background: #000;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s; }
    #faq .tab label:hover {
      background: #E83434; }
    #faq .tab label::after {
      position: absolute;
      right: 1rem;
      top: 0;
      bottom: 0;
      margin: auto;
      display: block;
      width: 1em;
      height: 1em;
      line-height: 1;
      text-align: center;
      transition: all .3s;
      transform: rotate(-45deg); }
  #faq .tab .answer {
    max-height: 0;
    overflow: hidden;
    background: #FFF;
    transition: max-height .3s;
    margin: 2px 0 0; }
    #faq .tab .answer .answer-cnt {
      margin: 1em;
      color: #666; }