@charset "UTF-8";
/*reset---------------------------*/
.pane-contenst-container {
  max-width: none;
  min-width: none;
  width: auto;
  margin-top: 0;
  display: block;
  padding: 0;
}
.pane-main {
  width: auto !important;
}
#machine p {
  font-size: 1em !important;
  line-height: 1.7;
  margin-bottom: 1em;
}
#machine a:hover {
  opacity: 0.7;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
/*set---------------------------*/
#machine {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  max-width: none;
}
.inbox {
  padding: 0 5%;
  max-width: 1700px;
  margin: 0 auto;
}
#machine section {
  padding: 4em 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1)50%, rgba(250, 250, 250, 1));
}
#machine section section {
  background: none;
  padding: 0;
  margin-bottom: 3em;
}
#machine h2, #machine h3, #machine h4 {
  font-weight: bold;
  text-align: center;
}
#machine h2 {
  text-align: center;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  margin: 0 auto 2em;
  border-radius: 2em;
  display: block;
  width: 20em;
  max-width: 100%;
  padding: 0.3em;
  background: #fff;
  position: relative;
}
#machine h2 img {
  width: 4em;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
:is(#price, #flow, #faq) h2 img {
  left: 0.3em;
}
#form h2 img {
  right: -0.5em;
}
#machine h3, #machine h4 {
  background: #efefef;
  margin-bottom: 1em;
  padding: 0.5em;
  border-radius: 3em;
}
#machine span {
  display: inline-block;
}
#machine picture {
  display: block;
  text-align: center;
  margin: 1em auto;
}
.name {
  font-family: "Anta", sans-serif;
  letter-spacing: 0.05em;
}
.comment {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  padding: 0.7em 1.3em;
  border: 2px solid #000000;
  border-radius: 2em;
  background-color: #ffffff;
  color: #000000;
}
.comment::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
}
.comment::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15.5px 7.8px 0 7.8px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
.list_normal li {
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}
.attention {
  font-size: 0.85em;
  opacity: 0.7;
}
@media screen and (min-width:769px) {
  #machine h2 {
    font-size: 2em;
  }
  #machine h3 {
    font-size: 1.5em;
  }
  #machine h4 {
    font-size: 1.2em;
  }
}
@media screen and (max-width:768px) {
  * div {
    max-width: none !important;
  }
  #machine section {
    padding: 3em 0;
  }
  #machine h2 img {
    width: 3em;
  }
}
/*kv---------------------------*/
#kv {
  text-align: center;
  position: relative;
  padding-top: 3em;
}
#kv h1 {
  font-size: 2em;
  font-weight: bold;
}
#kv h1 img {
  display: block;
  margin: 0 auto 0.5em;
}
.maru {
  width: 21%;
}
.lineup {
  margin-bottom: 1em;
  position: relative;
  text-align: center;
}
.lineup dl {
  border: 3px solid #ccc;
  position: relative;
  padding: 1em;
  border-radius: 0.5em;
  overflow: hidden;
}
.lineup dt {
  margin-bottom: 0.5em;
}
.lineup .name {
  display: block;
  font-weight: bold;
  color: #fff;
  border-radius: 3em;
  padding: 0.1em 2em;
  margin-bottom: 0.5em;
}
.lineup dt span, .lineup dt strong {
  display: block;
}
.lineup strong {
  font-size: 1.2em;
}
.lineup dd a {
  position: absolute;
  top: 0;
  left: 0;
  text-indent: -9999em;
  width: 100%;
  height: 100%;
}
.lineup dd a:hover {
  background: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width:769px) {
  #kv {
    padding-bottom: 7em;
  }
  #kv h1 img {
    width: 55%;
  }
  .maru {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #machine .lineup .comment {
    width: 22em;
    position: absolute;
    top: -4.4em;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    font-size: 1.2em !important;
  }
  .lineup {
    display: flex;
    gap: 3%;
  }
  .lineup dl {
    flex: 1;
  }
  .lineup .name {
    font-size: 1.3em;
  }
  .lineup strong {
    font-size: 1.35em;
  }
  .lineup img {
    width: 30%;
  }
}
@media screen and (max-width:768px) {
  .maru {
    width: 55%;
  }
  .lineup dl {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1em;
  }
  .lineup img {
    height: 10em;
  }
}
/*nav---------------------------*/
.nav {
  font-size: 1.1vw;
  background: #fff;
  width: 100%;
  display: flex;
  position: sticky;
  top: 0;
  line-height: 1;
  z-index: 100;
}
.nav li {
  width: 16%;
}
.nav li a {
  display: block;
  background: #f5f5f5;
  padding: 1em 0;
  border: 1px solid #333;
  color: #333;
  text-decoration: none;
  text-align: center;
}
.nav li a.active {
  font-weight: bold;
  background: #fff;
}
@media screen and (min-width:769px) {
  .nav {
    justify-content: center;
    padding-top: 1em;
    gap: 3px;
    border-bottom: 1px solid #333;
  }
  .nav li a {
    border-radius: 0.5em 0.5em 0 0;
    border-bottom: none;
  }
  .nav li a.active {
    font-size: 1.2em;
    margin: -0.45em 0;
  }
}
@media screen and (max-width:768px) {
  .nav {
    font-size: 3.3vw;
    line-height: 1.3;
    flex-wrap: wrap;
  }
  .nav li {
    width: 33.3%;
  }
}
/*course---------------------------*/
.vt-s, #machine section#vt-s, .nav li.vt-s a.active, table.vt-s th {
  background: #edffc2;
}
.vt-b, #machine section#vt-b, .nav li.vt-b a.active, table.vt-b th {
  background: #ffe8d7;
}
.vt-g, #machine section#vt-g, .nav li.vt-g a.active, table.vt-g th {
  background: #e9f5ff;
}
.vt-s .name, #vt-s h2 {
  background: #4b7c26;
}
.vt-b .name, #vt-b h2 {
  background: #ea5c2a;
}
.vt-g .name, #vt-g h2 {
  background: #154997;
}
#kv .vt-s {
  border-color: #4b7c26;
}
#kv .vt-b {
  border-color: #ea5c2a;
}
#kv .vt-g {
  border-color: #154997;
}
.course dl {
  border: 3px solid #666;
  border-radius: 0.2em;
  margin: 1em 0;
  background: #fff;
  padding-bottom: 0.1em;
  position: relative;
}
.course dt:before {
  content: "";
  display: block;
  width: 100%;
  height: 5.5em;
  position: absolute;
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 25% auto;
}
.self dt:before {
  background-image: url("self.png");
  background-position: bottom left;
}
.glory dt:before {
  background-image: url("glory.png");
  background-position: bottom right;
}
.course dt, .course dd {
  text-align: center;
}
.course dt {
  font-weight: bold;
  background: #666;
  color: #fff;
  padding: 0.6em 5%;
  position: relative;
}
.self dt {
  padding-left: 4em;
}
.glory dt {
  background: #111987;
  padding-right: 5em;
}
.course dd {
  margin: 1.5em 5%;
}
.plan_list {
  display: flex;
  margin-top: 0.5em;
}
.plan_list li {
  flex: 1;
}
.course p.comment {
  margin-bottom: -0.2em !important;
}
.movie {
  position: relative;
  padding-top: 45%;
  margin: 0 auto;
}
.movie video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glory h4 {
  background: #dcdef9 !important;
}
a.question:before{content:"";display:inline-block;width:1.2em;height:1.2em;background:url("mark_question.png") no-repeat center center;background-size:contain;vertical-align:-0.2em;margin-right:0.3em;}
.glory .price {
  font-size: 1.6em;
}
.course .list_normal {
  display: inline-block;
}
.btn_box a {
  font-size: 1.2em;
}
.btn_list li {
  margin: 0.5em 0;
}
a.btn_entry {
  display: block;
  background: #f5c242;
  color: #000;
  text-decoration: none;
  text-align: center;
  padding: 1em;
  margin: 0.5em auto;
  width: 14em;
  border-radius: 0.5em;
  box-shadow: 0.2em 0.3em 0.3em rgba(0, 0, 0, 0.2);
}
.glory a.btn_entry {
  font-size: 1.25em;
}
.btn_dl {
  display: inline-block;
  padding: 1em 1.5em;
  margin: 0 auto;
  border-radius: 0.5em;
  text-align: center;
}
a.btn_dl {
  background: #4fad5b;
  box-shadow: 0.2em 0.3em 0.3em rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: #fff;
}
span.btn_dl {
  border: 1px solid #ccc;
  color: #ccc;
}
a.btn {
  display: block;
  text-decoration: none;
  padding: 1em 1em;
  margin: 0 auto;
  border-radius: 0.5em;
  text-align: center;
  background: #fff;
  color: #333;
  box-shadow: 0.2em 0.3em 0.3em rgba(0, 0, 0, 0.2);
}
.btn_dl img,.btn_list a img{
  width: 2em;
  vertical-align: -0.5em;
  margin-right: 0.5em;
}
span.btn_dl img {
  opacity: 0.3;
}
.spec h2 {
  margin-bottom: 1em !important;
  color: #fff;
  width: 15em;
  max-width: 100%;
}
@media screen and (min-width:769px) {
  .spec {
    justify-content: center;
    display: flex;
    gap: 5%;
    margin: 0 auto;
  }
  .course {
    display: flex;
    gap: 4%;
  }
  .course dl {
    flex: 1;
  }
  .course dt {
    font-size: 1.35em;
  }
  .btn_list {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: center;
    margin-top: 2em;
  }
  .btn_list li {
    min-width: 25%;
  }
  .movie {
    width: 80%;
  }
}
@media screen and (max-width:768px) {
  .spec {
    text-align: center;
  }
  .spec .btn_list {
    margin-bottom: 2em;
  }
  .spec > img {
    height: 25vh;
  }
}
/*flow---------------------------*/
#flow table {
  margin: 0 auto;
  text-align: center;
  border-collapse: separate;
  border-spacing: 0.5em 0;
}
#flow td.step {
  background: #fff9d8;
  border-radius: 0.5em;
  vertical-align: middle;
  padding: 1em 0.5em;
  width: 33.3%
}
#flow td.step.strong{background: #fff3b3;}
#flow td.arrow {
  background: url("step_arrow.png") no-repeat center bottom;
  backgrouns-size: 1em auto;
  vertical-align: top;
}
#flow td strong {
  display: inline-block;
  font-size: 1.3em;
  position: relative;
}
#flow td strong img {
  width: 4em;
}
#machine #flow p {
  margin: 0;
}
#machine #flow td.arrow p {
  display: inline-block;
  margin: 1em 0 2em;
  padding: 0.5em 1em;
  background: #fff;
  border: 3px solid #f5c242;
}
.plan {
  background: #d8523f;
  color: #fff;
  padding: 0.2em 0.8em;
}
#flow .plan {
  margin-top: 0.2em;
  font-size: 1.2em;
}
.cost {
  border: 1px solid #d8523f;
  color: #d8523f;
  padding: 0 0.5em;
  /*font-size: 13px;*/
  background: #fff;
  /*vertical-align: -0.05em;*/
  margin-left: 0.5em;
}
#flow .btn_list {
  margin-top: 1.5em;
}
#flow .btn_list li {
  margin: 0.5em;
}
#flow .btn_list li a {
  width: 14em;
}
#flow .btn_list li a.btn {
  border: 1px solid #ccc;
}
@media screen and (min-width:769px) {
  #flow .btn_list {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
  }
  #machine #flow p {
    margin: 0 1em;
  }
  #flow td strong img {
    position: absolute;
    right: -4.3em;
    bottom: 0;
  }
}
@media screen and (max-width:768px) {
  #flow .inbox {
    padding: 0 !important;
  }
  #flow table {
    font-size: 3vw;
  }
  #flow td strong img {
    display: block;
    margin: 0 auto 0.5em;
  }
}
/*price---------------------------*/
.table_scroll {
  margin: 1em 0 1.5em;
}
#price table {
  border: 2px solid #666;
  margin: 0 auto;
}
#price tr {
  border-top: 2px solid #666;
}
#price th, #price td {
  text-align: center;
  padding: 0.5em;
  border-left: 1px dotted #666;
}
#price th.name {
  color: #fff;
  width: 10em;
}
#price .price {
  border-left: 2px solid #666;
}
#price td {
  background: #fff;
}
#price td.price {
  background: #FFFCEA;
}
#price table img {
  height: 5em;
  display: block;
  margin: 0 auto 0.5em;
}
.price {
  font-weight: bold;
}
.price strong {
  font-size: 1.35em;
  font-family: "Anta", sans-serif;
  margin: 0 0.1em;
}
/*faq---------------------------*/
#faq dl {
  margin-bottom: 1em;
}
#faq dl + dl {
  border-top: 1px solid #ccc;
  padding-top: 1em;
}
#faq dt:before, #faq dd:before {
  font-weight: bold;
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1.2em;
  height: 1em;
  font-family: "Anta", sans-serif;
}
#faq dt:before {
  content: "Q.";
  color: #27a43e;
}
#faq dd:before {
  content: "A.";
  left: -1.6em;
  color: #ee6a65;
}
#faq dt {
  position: relative;
  padding-right: 2em;
  padding-left: 2.5em;
  font-weight: bold;
}
#faq dt:after {
  content: "▼";
  color: #f5c242;
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#faq dt.active:after {
  content: "▲";
}
#faq dd {
  display: none;
  position: relative;
  margin-left: 2.5em;
  margin-top: 1em;
  background: #FFFCEA;
  padding: 1em;
}
@media screen and (min-width:769px) {
  #faq dt:before {
    margin-top: -0.3em;
  }
}
/*form---------------------------*/
#machine section#form {
  background: #fff2d2;
}
#form p {
  margin-bottom: 2em;
  text-align: center;
}
#form a.btn_entry {
  width: 20em;
  color: #fff;
}
#form iframe {
  display: block;
  margin: 0 auto;
  border: none;
  width: 640px;
  height: 50vh;
  max-width: 100%;
  max-height: 100vh;
  border: 1px solid #fff;
}
@media screen and (max-width:768px) {
  #form h2 {
    letter-spacing: 0;
  }
  #form h2 span {
    display: block;
  }
}
/*
スマホ用テーブルスクロール
----------------------------------------*/
@media screen and (max-width:768px) {
  .table_scroll {
    overflow: auto;
    padding-top: 0.5em;
  }
  .table_scroll {
    overflow: auto;
    position: relative;
  }
  .table_scroll:before {
    display: inline-block;
    content: "スクロール >>";
    background: #ccc;
    padding: 0.2em 0.5em;
    color: #fff;
    font-size: 0.6em;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
  .table_scroll {
    white-space: nowrap;
  }
  .table_scroll::-webkit-scrollbar {
    height: 0.5em;
  }
  .table_scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  .table_scroll::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
  }
  .table_scroll th, .table_scroll td {
    white-space: nowrap;
  }
  .table_scroll th:first-child, .table_scroll td:first-child {
    position: sticky;
    left: 0;
  }
}
/*
非会員
----------------------------------------*/
#machine p.nomember {
  margin-top: 1em;
  margin-bottom: -0.8em !important;
}
#machine p.nomember strong {
  display: inline-block;
  margin: 0 0.5em;
}
#machine p.nomember a {
  color: #FC71A6;
  text-decoration: none;
}
/*modal
----------------------------------------*/
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 70%);
  overflow: auto;
  opacity: 0;
  display: none;
  /*visibility: hidden;*/
  transition: .3s;
  box-sizing: border-box;
  z-index:999999!important;
}
.modal-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.modal-container.active {
  opacity: 1;
  display: block;
  /*visibility: visible;*/
}
.modal-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 640px;
  max-width: 90%!important;
  height: 85vh;
}
.modal-body iframe {
  width: 100%;
  height: 100% !important;
}
.modal-close {
  position: absolute;
  display: block;
  top: -1.4em;
  right: -0.6em;
  width: 2em;
  height: 2em;
  font-size: 3em;
  color: #fff;
  cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content {
  background: #fff;
  height:100%;
}