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

/* Set core root defaults */
html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
fieldset {
  border: 0;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

article,
header,
footer,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

ol,
ul {
  list-style: none;
  list-style-type: none;
}

figure {
  margin: 0;
}

a {
  color: inherit;
  display: block;
  text-decoration: none;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

html {
  font-size: 62.5%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 0.9541984733vw;
  }
}
@media (min-width: 1048px) {
  html {
    font-size: 10px;
  }
}

body {
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  width: 100%;
}

.fixed {
  height: 100%;
  position: fixed;
  width: 100%;
}

.wrap {
  overflow: hidden;
  position: relative;
}

.main {
  margin-top: 9.2rem;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1096px;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}
/* ==============================================================
*  セクション
* ============================================================ */
.btn__img {
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: 54rem;
}
.btn__img:hover {
  opacity: .5;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.btn.-item {
  margin-top: 5rem;
}
.btn.-commission {
  margin-top: 8rem;
}
.btn.-company {
  margin-top: 8rem;
}
.btn.-schedule {
  margin-top: 8rem;
}
.btn.-contact {
  margin-top: 10rem;
}

.section {
  margin-top: 20rem;
}

.section-title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 80%;
}

.section-intro {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
}
.section-intro.-what {
  width: 88%;
}
.section-intro.-items {
  width: 85%;
}
.section-intro.-commission {
  width: 55%;
}
.section-intro.-hybrid {
  width: 90%;
}
.section-intro.-schedule {
  width: 100%;
}
.section-intro.-account {
  width: 100%;
}

.section-intro-offline {
  font-size: 5rem;
  line-height: 1.5;
  margin-top: 8rem;
  text-align: center;
}

.section-desc {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  width: 82%;
}

.section-note {
  font-size: 1.2em;
  margin-top: 3rem;
  text-align: center;
}

/* 右下に固定 */
#scroll-btn {
  bottom: 9rem;
  position: fixed;
  right: 2rem;
}

/* 背景色、文字色、paddingで幅と高さ */
#scroll-btn .page-top {
  background-color: #ccc;
  border-radius: 50%;
  height: 7rem;
  margin-left: auto;
  position: relative;
  width: 7rem;
}
#scroll-btn .page-top::before {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  bottom: 0;
  content: "";
  height: 2rem;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 10%;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  width: 2rem;
}

#line-btn {
  bottom: 0;
  position: fixed;
  right: 0;
  width: 40rem;
}

.js-fadeUp {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity 1.2s, -webkit-transform .8s;
  transition: opacity 1.2s, -webkit-transform .8s;
  transition: opacity 1.2s, transform .8s;
  transition: opacity 1.2s, transform .8s, -webkit-transform .8s;
}

/*拡大してから縮小*/
.js-scale {
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
  -webkit-transition: 0.4s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
  transition: 0.4s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
  transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.4s linear opacity;
  transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.4s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
  opacity: 0;
}

.is-scale {
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
  opacity: 1 !important;
}

/*下からフェードイン*/
.js-fadeInUp {
  opacity: 0;
  -webkit-transform: translate(0, 40px);
          transform: translate(0, 40px);
  -webkit-transition: .8s;
  transition: .8s;
}

.is-fadeInUp {
  opacity: 1.0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.header {
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}
.header__inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 9.2rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
.header__logo {
  width: 16rem;
}
.header__list {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.header__item:first-of-type a {
  border-left: none;
}
.header__link {
  border-left: 1px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1.4rem;
  height: 4rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.3;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  text-align: center;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.header__link span {
  display: block;
}
.header__link:hover {
  opacity: .5;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.header__btn {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: 18rem;
}
.header__btn:hover {
  opacity: .5;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.header__toggle {
  cursor: pointer;
  display: none;
  -ms-flex-preferred-size: 22%;
      flex-basis: 22%;
  height: 6vw;
  max-height: 4.4rem;
  max-width: 5rem;
  position: relative;
  z-index: 300;
}

.mv {
  position: relative;
  width: 100%;
}
.mv__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.mv__intro {
  font-size: 7rem;
  font-weight: 700;
  margin-top: 13rem;
}
.mv__img {
  display: block;
  margin: auto;
  max-width: 860px;
  width: 90%;
}

/*スクロールダウンボタン*/
.scrolldown {
  bottom: 1rem;
  color: #000;
  display: inline-block;
  font-size: 1.83rem;
  left: 50%;
  letter-spacing: .1em;
  padding-top: 7.1rem;
  position: absolute;
  text-decoration: none;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  z-index: 2;
}

.scrolldown span {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #000;
  border-radius: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 5.5rem;
  left: 50%;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  width: 5.5rem;
}

.scrolldown span::after {
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  height: 2.4rem;
  left: 50%;
  margin: -1.8rem 0 0 -1.3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 2.4rem;
}

.scrolldown span::before {
  -webkit-animation: sdb 3s infinite;
          animation: sdb 3s infinite;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  height: 5.5rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 5.5rem;
  z-index: -1;
}

@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.top-banner {
  margin-left: auto;
  margin-right: auto;
  margin-top: 8.8rem;
  max-width: 940px;
  width: 86%;
}

.banner__img {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.banner__img.-register {
  margin-left: auto;
  margin-right: auto;
  width: 54rem;
}
.banner__img:hover {
  opacity: .5;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.what__img {
  margin-top: 8rem;
}

.item {
  /* モーダル */
  /* モーダルアニメーション */
}
.item__container:not(:first-of-type) {
  margin-top: 20rem;
}
.item__img {
  margin-top: 8rem;
}
.item__img img {
  max-height: 728px;
  -o-object-fit: contain;
     object-fit: contain;
}
.item__desc {
  font-size: 2rem;
  letter-spacing: .12em;
  margin-top: 3rem;
  text-align: center;
}
.item__slide {
  width: 800px;
}
.item .slider {
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
  max-width: 1056px;
  width: 80%;
}
.item .slider-img img {
  height: auto;
  width: 100%;
}
.item .slide-dots {
  margin-top: 10rem;
  padding: 0;
  text-align: center;
}
.item .slide-dots li {
  display: inline-block;
  margin: 0 2rem;
}
.item .slide-dots li button {
  background-color: #fff;
  border: 2px solid #2d3042;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 2px #fff;
          box-shadow: 0 0 0 2px #fff;
  color: #fff;
  cursor: pointer;
  height: 3rem;
  opacity: 1;
  position: relative;
  text-indent: -9999px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  width: 3rem;
}
.item .slide-dots li.slick-active button {
  background-color: #707070;
  color: #707070;
}
.item button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  outline: none;
  padding: 0 .7rem;
}
.item .slide-arrow {
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: -15%;
  width: 0;
}
.item .prev-arrow {
  border-right: 2px solid #000;
  border-top: 2px solid #000;
  height: 4rem;
  left: -7.2rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  width: 4rem;
}
.item .next-arrow {
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  height: 4rem;
  right: -7.2rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  width: 4rem;
}
.item__modal-group {
  background-image: linear-gradient(-22deg, #f0f0f0 27%, #fafafa 73%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5rem;
  padding-bottom: 5rem;
  padding-top: 4rem;
}
.item__modal {
  padding-left: 2rem;
  padding-right: 2rem;
  width: 50%;
}
.item__modal-title {
  font-size: 3rem;
  text-align: center;
}
.item__modal-img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  width: 60%;
}
.item__modal-desc {
  line-height: 1.5;
  margin-top: 3rem;
  text-align: center;
}
.item .modal__overlay {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.item .modal__container {
  background-color: #fff;
  max-height: 80vh;
  max-width: 120rem;
  overflow-y: auto;
  width: 80%;
}
.item .modal__header {
  position: absolute;
  right: 2rem;
  top: 2rem;
}
.item .modal__close {
  background: transparent;
  border: 0;
}
.item .modal__header .modal__close::before {
  content: "×";
  font-size: 5rem;
}
.item .modal__open {
  border-bottom: 1px solid #000;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  padding: 0 .2rem .5rem .5rem;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.item .modal__open:hover {
  opacity: .5;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes mmslideIn {
  from {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes mmslideIn {
  from {
    -webkit-transform: translateY(15%);
            transform: translateY(15%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes mmslideOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
}
@keyframes mmslideOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
}
.item .micromodal-slide {
  display: none;
}
.item .micromodal-slide.is-open {
  display: block;
}
.item .micromodal-slide[aria-hidden="false"] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.item .micromodal-slide[aria-hidden="false"] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.item .micromodal-slide[aria-hidden="true"] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.item .micromodal-slide[aria-hidden="true"] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.item .micromodal-slide .modal__container,
.item .micromodal-slide .modal__overlay {
  will-change: transform;
}

.commission__wrapper:not(:first-of-type) {
  margin-top: 20rem;
}
.commission__container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5rem;
}
.commission__item {
  font-size: 4rem;
  letter-spacing: .1em;
  position: relative;
}
.commission__item:not(:first-of-type) {
  margin-top: 3.5rem;
}
.commission__item::before {
  background-image: url(../img/check.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  height: 3rem;
  left: -4rem;
  margin: auto;
  position: absolute;
  top: 0;
  width: 3rem;
}
.commission__price {
  margin-left: 5rem;
}
.commission__price .zero {
  font-size: 40rem;
  font-weight: 700;
}
.commission__price .yen {
  font-size: 10rem;
  font-weight: 700;
}
.commission__price .five {
  font-size: 25rem;
  font-weight: 700;
}
.commission__price .percent {
  font-size: 9rem;
  font-weight: 700;
}
.commission__note {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 3rem;
}
.commission__img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 5rem;
  width: 50%;
}

.schedule {
  text-align: center;
}
.schedule__img {
  margin-top: 5rem;
}
.schedule__img img {
  max-height: 835px;
  -o-object-fit: contain;
     object-fit: contain;
}
.schedule__intro {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  width: 55%;
}
.schedule__container:not(:first-of-type) {
  margin-top: 10rem;
}
.schedule__container-title {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  width: 90%;
}
.schedule__txt {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  width: 40%;
}

.company__title {
  text-align: center;
}
.company__table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5.4rem;
  text-align: left;
  width: 45rem;
}
.company__table tr {
  display: block;
}
.company__table th,
.company__table td {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
.company__table th {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 16.6rem;
}
.company__note {
  color: red;
  font-size: 3.4rem;
  font-weight: 700;
  margin-top: 4rem;
  text-align: center;
}

.contact__intro {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  width: 84%;
}
.contact__tel {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  width: 80rem;
}
.contact__line {
  margin-top: 12rem;
  position: relative;
}

.account__flow {
  margin-top: 8rem;
}

.rules {
  line-height: 2;
  letter-spacing: 0.1em;
}
.rules__container {
  border: 1px solid #666;
  height: 29.6rem;
  margin-top: 3.2rem;
  overflow: auto;
  padding: 2.6rem;
  width: 100%;
}
.rules__title {
  font-size: 2.8rem;
  text-align: center;
}
.rules__item:not(:first-of-type) {
  margin-top: 3rem;
}
.rules__item-title {
  font-size: 2rem;
  font-weight: 700;
}
.rules__list-child {
  margin-top: 1rem;
}
.rules__item-child {
  font-weight: 500;
}

.footer {
  background: #323232;
  margin-top: 10rem;
  text-align: center;
}
.footer__copyright {
  display: block;
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.5;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer__copyright span {
  display: block;
}

/* ==============================================================
*  レスポンシブPC
* ============================================================ */
/* ==============================================================
*  レスポンシブSP
* ============================================================ */
@media screen and (max-width: 767px) {
  .main {
    margin-top: 16vw;
  }

  .section {
    margin-top: 20vw;
  }

  .section-title {
    width: 100%;
  }

  .section-intro {
    margin-top: 7vw;
  }
  .section-intro.-what {
    width: 70%;
  }
  .section-intro.-items {
    width: 100%;
  }
  .section-intro.-hybrid {
    width: 85%;
  }
  .section-intro.-commission {
    width: 80%;
  }
  .section-intro.-account {
    width: 90%;
  }

  .btn__img {
    width: 90%;
  }
  .btn.-item {
    margin-top: 10vw;
  }
  .btn.-commission {
    margin-top: 10vw;
  }
  .btn.-company {
    margin-top: 10vw;
  }
  .btn.-contact {
    margin-top: 10vw;
  }
  .btn.-schedule {
    margin-top: 10vw;
  }

  .section-desc {
    margin-top: 10vw;
    width: 100%;
  }
  .section-desc.-items {
    margin-left: -12%;
    width: 125%;
  }

  /* 背景色、文字色、paddingで幅と高さ */
  #scroll-btn {
    bottom: 11vw;
    right: 3vw;
  }

  #scroll-btn .page-top {
    height: 9vw;
    width: 9vw;
  }
  #scroll-btn .page-top::before {
    height: 2.3vw;
    width: 2.3vw;
  }

  #line-btn {
    width: 50vw;
  }
}
@media screen and (max-width: 767px) {
  .header .inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 1px solid #d1d0d0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 4.7vw;
    padding-right: 4.7vw;
  }
  .header__inner {
    height: 16vw;
    padding-left: 0;
    padding-right: 3.7vw;
    width: 100%;
  }
  .header__logo {
    width: 35vw;
  }
  .header__btn {
    width: 41.8vw;
  }

  .header__toggle {
    display: block;
    margin-left: auto;
    max-width: 7vw;
  }

  .header-toggle_line {
    background-color: #b5b5b5;
    height: 0.6vw;
    left: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 100%;
  }

  .header-toggle_line--01 {
    top: 0;
  }

  .header-toggle_line--02 {
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }

  .header-toggle_line--03 {
    bottom: 0;
  }

  .nav-sp {
    background-color: #fff;
    border-bottom: 1px solid #d1d0d0;
    display: none;
    padding-bottom: 0.8vw;
  }

  .nav-sp__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 auto;
    width: 95%;
  }

  .nav-sp-list__item {
    -ms-flex-preferred-size: 31.830986%;
        flex-basis: 31.830986%;
    padding-bottom: 2.13333333vw;
    text-align: center;
  }

  .nav-sp-list__link {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #eee;
    color: #222;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-size: 3vw;
    height: 10vw;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1.27em;
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .mv__scroll-area {
    bottom: 17vw;
    position: absolute;
    right: 11vw;
  }
  .mv__img {
    width: 100%;
  }
  .mv__img img {
    height: calc( var(--vh) * 100 - 16vw);
    -o-object-fit: contain;
       object-fit: contain;
  }

  .scrolldown {
    bottom: -2vw;
    font-size: 3vw;
    padding-top: 7.5vw;
  }
  .scrolldown span {
    height: 7vw;
    width: 7vw;
  }
  .scrolldown span::before {
    height: 7vw;
    width: 7vw;
  }
  .scrolldown span::after {
    height: 3vw;
    margin: -2vw 0 0 -1.5vw;
    width: 3vw;
  }

  @-webkit-keyframes sdb {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      -webkit-box-shadow: 0 0 0 6.5vw rgba(255, 255, 255, 0.1);
              box-shadow: 0 0 0 6.5vw rgba(255, 255, 255, 0.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes sdb {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      -webkit-box-shadow: 0 0 0 6.5vw rgba(255, 255, 255, 0.1);
              box-shadow: 0 0 0 6.5vw rgba(255, 255, 255, 0.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}
@media screen and (max-width: 767px) {
  .top-banner {
    margin-top: 10vw;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .what__img {
    margin-top: 8vw;
  }
}
@media screen and (max-width: 767px) and (min-width: 320px) {
  .item .prev-arrow,
  .item .next-arrow {
    height: calc(1.5rem + ((1vw - 3.2px) * (25 / 4.47)));
    width: calc(1.5rem + ((1vw - 3.2px) * (25 / 4.47)));
  }
}
@media screen and (max-width: 767px) and (min-width: 767px) {
  .item .prev-arrow,
  .item .next-arrow {
    height: 4rem;
    width: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .item__img {
    margin-left: calc(50% - 55vw);
    margin-right: calc(50% - 55vw);
    margin-top: 8vw;
    width: 100vw;
  }
  .item__container:not(:first-of-type) {
    margin-top: 20vw;
  }
  .item__desc {
    font-size: 3vw;
    margin-top: 6vw;
  }
  .item .slider {
    margin-top: 12vw;
    width: 85%;
  }
  .item .slide-dots {
    margin-top: 10vw;
  }
  .item .slide-dots li {
    margin: 0 4vw;
  }
  .item .slide-dots li button {
    border: 1px solid #2d3042;
    -webkit-box-shadow: 0 0 0 1px #fff;
            box-shadow: 0 0 0 1px #fff;
    height: 1.6rem;
    width: 1.6rem;
  }
  .item .prev-arrow {
    left: -7vw;
  }
  .item .next-arrow {
    right: -7vw;
  }
  .item__modal-group {
    display: block;
    margin-top: 8vw;
    padding-bottom: 8vw;
    padding-top: 7vw;
  }
  .item__modal {
    width: 100%;
  }
  .item__modal:not(:first-of-type) {
    margin-top: 13vw;
  }
  .item__modal-title {
    font-size: 8vw;
  }
  .item__modal-img {
    margin-top: 5vw;
  }
  .item__modal-desc {
    font-size: 4vw;
  }
  .item .modal__close {
    position: relative;
    top: -2vw;
  }
  .item .modal__open {
    font-size: 4vw;
  }
  .item .modal__container {
    width: 95%;
  }
  .item .modal__header .modal__close::before {
    font-size: 10vw;
  }
}
@media screen and (max-width: 767px) {
  .commission__wrapper:not(:first-of-type) {
    margin-top: 30vw;
  }
  .commission__container {
    display: block;
    margin-top: 15vw;
  }
  .commission__list {
    width: 55vw;
    margin: auto;
  }
  .commission__item {
    font-size: 4.5vw;
  }
  .commission__price {
    margin-left: 0;
    margin-top: 5vw;
    text-align: center;
  }
  .commission__price .zero {
    font-size: 55vw;
  }
  .commission__price .yen {
    font-size: 15vw;
  }
  .commission__price .five {
    font-size: 55vw;
  }
  .commission__price .percent {
    font-size: 15vw;
  }
  .commission__note {
    text-align: center;
    font-size: 3vw;
    margin-top: 8vw;
  }
  .commission__img {
    width: 100%;
    margin-top: 5vw;
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .schedule__intro {
    margin-top: 6vw;
    width: 85%;
  }
  .schedule__img {
    margin-left: calc(50% - 55vw);
    margin-right: calc(50% - 55vw);
    margin-top: 8vw;
    width: 100vw;
  }
  .schedule__container:not(:first-of-type) {
    margin-top: 20vw;
  }
  .schedule__container-title {
    margin-top: 10vw;
    width: 100%;
  }
  .schedule__txt {
    margin-top: 8vw;
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .company__table {
    margin-top: 10vw;
    width: 92%;
  }
  .company__table th,
  .company__table td {
    font-size: 4vw;
    padding-bottom: 1.5vw;
    padding-top: 1.5vw;
  }
  .company__table th {
    width: 37vw;
  }
  .company__note {
    font-size: 6vw;
    margin-top: 6vw;
  }
}
@media screen and (max-width: 767px) {
  .contact__intro {
    margin-top: 8vw;
    width: 80%;
  }
  .contact__tel {
    font-size: 6vw;
    margin-top: 10vw;
  }
  .contact__line {
    margin-top: 20vw;
  }
  .contact__tel {
    width: 80vw;
  }
}
@media screen and (max-width: 767px) {
  .account__flow {
    margin-top: 10vw;
  }
}
@media screen and (max-width: 767px) {
  .rules__title {
    font-size: 6vw;
  }
  .rules__container {
    height: 45vw;
    margin-top: 5vw;
    padding: 5vw;
  }
  .rules__item:not(:first-of-type) {
    margin-top: 4vw;
  }
  .rules__item-title {
    font-size: 3vw;
  }
  .rules__item-desc {
    font-size: 2.6vw;
  }
}
@media screen and (max-width: 767px) {
  .footer {
    margin-top: 15vw;
  }
  .footer__copyright {
    font-size: 3vw;
    padding-bottom: 4vw;
    padding-top: 4vw;
  }
}

/*# sourceMappingURL=style.css.map */

/**********
 *  add css 
 * *********/

/* headerボタン（新規登録・ログイン）調整 20220313 */
.header__btn {
	width: 7rem;
}

media screen and (max-width: 767px)
.header__btn {
    width: 16.8vw;
}

/***********************
 *  YouTube動画埋め込み *
 * **********************/

/* 動画を中央に移動 */
.video {
	text-align: center;
}
/* 動画幅 */
.video iframe {
	width: 1000px;
	height: 600px; 
}
/* SP動画幅 */
@media ( max-width: 599px ) {
	.video iframe {
		width: 500px;
		height: 250px;
	}
}


/* ***********************
  * PC SNS 固定メニューバー  20220615 *
  ************************/

.cp_snslink01 {
	position: fixed;
	top: 30%;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.cp_snslink01 .cp_link {
	position: relative;
}
.cp_snslink01 .cp_link {
	display: block;
	width: 60px;
	height: 60px;
	padding: 15px 10px;
	cursor: pointer;
}
.cp_snslink01 .cp_link .nav-label {
	line-height: 64px;
	position: absolute;
	z-index: 4;
	top: 0rem;
	display: block;
	height: 60px;
	margin-left: 50px;
	padding: 0 20px;
	white-space: nowrap;
}
.cp_snslink01 .cp_link,
.cp_snslink01 .cp_link a,
.cp_snslink01 .cp_link:hover,
.cp_snslink01 .cp_link .nav-label {
	color: #ffffff;
}
/*facebook*/
.cp_snslink01 .facebook,
.cp_snslink01 .facebook:hover,
.cp_snslink01 .facebook:hover .nav-label {
	background: #3b5998;
}
.cp_snslink01 .facebook .nav-label {
	background: #1e2e4f;
}
/*twitter*/
.cp_snslink01 .twitter,
.cp_snslink01 .twitter:hover,
.cp_snslink01 .twitter:hover .nav-label {
	background: #000;
}
.cp_snslink01 .twitter .nav-label {
	background: #0065d9;
}
/*instagram*/
.cp_snslink01 .instagram,
.cp_snslink01 .instagram:hover,
.cp_snslink01 .instagram:hover .nav-label {
	background: radial-gradient(circle at 0% 90%, #fdf498 0%, #fd5948 5%, #d6249d 45%,#285aea 60%,#285aea 90%);
}
/* effect */
.cp_snslink01 .cp_link.nav-label, .cp_snslink01 .cp_link.cp_link:hover .nav-label {
	-webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
	        transition:         transform 0.4s ease, background 0.4s ease 0.1s;
	-webkit-transition-delay: 0s, 0.1s;
}
.cp_snslink01 .cp_link.cp_link .nav-label {
	-webkit-transition: -webkit-transform 0.4s ease;
	        transition:         transform 0.4s ease;
	-webkit-transform: rotateY(-90deg);
	        transform: rotateY(-90deg);
	-webkit-transform-origin: left 50%;
	        transform-origin: left 50%;
}
.cp_snslink01 .cp_link.cp_link:hover .nav-label {
	-webkit-transform: rotateY(0);
	        transform: rotateY(0);
}


/* ***********************
  *  SP SNS 固定メニューバー 20220615 *
  ************************/

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   bottom: 0px;
   font-size: 0;
}
/* 横を揃える */
#sp-fixed-menu ul{
	 display: flex;
  flex-direction: row;
	 flex-wrap: nowrap;
}
/* 画像の大きさ 調整*/
#sp-fixed-menu ul li {
	max-width: 200px;
}
/* トップスクロールボタンを前面に移動 */
#scroll-btn {
	z-index: 1;
}
/* PC SNSボタン非表示 */
@media ( max-width: 599px ) {	
	.pc_sns {
		display: none;
	}
}
/* SP SNSボタン非表示 */
@media ( min-width: 599px ) {	
	#sp-fixed-menu {
		display: none!important;
	}
}
/* SP LINEボタン非表示 */
@media ( max-width: 599px ) {	
	#line-btn {
		display: none!important;
	}
}

/* YouTube下の余白調整（What） */
.cps-post-main-box {
	margin-bottom:40px!important;
}



/* ────────────────────────────────────
   会員費バナー用スタイル
──────────────────────────────────── */
.membership-banner {
  background-color: #FFC107;     /* 背景色（黄色寄り） */
  border: 4px solid red;     /* 赤い枠線 */
  padding: 8px 12px;             /* 上下8px、左右12px の余白 */
  margin-top: 10px;              /* 上部マージン */
  box-sizing: border-box;
}

.membership-banner__title {
  font-size: 30px;               /* タイトルの文字サイズ */
  font-weight: bold;
  text-align: center;
  color: #000;                   /* 黒文字 */
  margin: 0;                     /* ブラウザデフォルトの余白をリセット */
  line-height: 1.3;
}

.membership-banner__detail {
  font-size: 25px;               /* タイトルの文字サイズ */
  font-weight: bold;
  text-align: center;
  color: #000;                   /* 黒文字 */
  margin: 0;                     /* ブラウザデフォルトの余白をリセット */
  line-height: 1.3;
}

@media ( max-width: 599px ) {	
	.membership-banner__title {
		font-size: 20px;
	}
	.membership-banner__detail{
		font-size: 15px;
	}
}