@charset "UTF-8";

/* ==== color ========================== */
:root {
  --color-black: #000;
  --color-white: #ffffff;

  --din-2014: "din-2014-narrow", sans-serif;
  --source-han-sans: "source-han-sans-japanese",
    sans-serif;
}


/*================================================
 *  一般・共通設定
 ================================================*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  /* font-family: "Noto Sans JP", sans-serif; */
  font-family: var(--source-han-sans);
  font-weight: 500;
  font-size: 1.6rem;
  background: var(--color-white);
  color: var(--color-black);
  letter-spacing: 0.05em;
}

main {
  overflow: hidden;
}

.wrap {
  width: 38.6%;
  min-width: 740px;
  margin: 0 auto;
  position: relative;
}

a {
  text-decoration: none;
  transition: all .4s;
}

a:hover {
  opacity: .6;
}

img {
  max-width: 100%;

  display: block;
}

strong {
  font-weight: bold;
}

small {
  font-size: smaller;
}

ul,
ol,
dl {
  margin: 0;
}

ul li {
  list-style: none;
}

ol li {
  list-style: decimal;
}

li {
  margin-left: 0;
}

/* タイトル */
h2.hd {
  font-size: 1.25em;
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
  color: var(--color-white);
  line-height: 1.5;
}

h2.hd span {
  font-family: var(--din-2014);
  font-size: 2.25em;
  display: block;
  text-transform: uppercase;
}

h2.hd.bk {
  color: var(--color-black);
}

@media screen and (max-width:767px) {
  body {
    /* font-size 24px 750px */
    font-size: 3.2vw;
  }

  .wrap {
    width: 92%;
    padding: 0;
    min-width: unset;
  }

  h2.hd {
    font-size: 0.91em;
  }

  h2.hd span {
    font-size: 2.27em;
  }
}

/*================================================
 *  section btn
 ================================================*/
section {
  position: relative;
}


/*================================================
 *  banner
 ================================================*/
#banner {
  position: fixed;
  top: 25%;
  right: 0;
  z-index: 10;
}

#banner ul li {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

#banner ul li a {
  padding: 1em 1.5em 3em 1.5em;
  height: 15.33em;
  display: grid;
  place-content: center;
  /* background: #808080; */
  background: #316C0F;
  font-size: 0.9375em;
  color: var(--color-white);
  border-radius: 10px 0 0 0;
  position: relative;
  width: 5em;
}

#banner ul li:nth-child(2) a {
  background: #0067ea;
  border-radius: 0 0 0 10px;
}

#banner ul li a::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/banner_arrow.png);
  width: 1em;
  height: 0.62em;
  bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
}

#banner ul li a span {
  font-size: 0.5em;
}

@media screen and (max-width:767px) {
  #banner {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  #banner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #banner ul li {
    -webkit-writing-mode: unset;
    -ms-writing-mode: unset;
    writing-mode: unset;
    -webkit-text-orientation: unset;
    text-orientation: unset;
    text-align: center;
  }

  #banner ul li a {
    padding: 1.2em 0;
    width: 100%;
    height: 4em;
    font-size: 1.166em;
    color: var(--color-white);
    border-radius: 0 !important;
  }

  #banner ul li a span {
    font-size: 0.6em;
  }

  #banner ul li a::before {
    content: none;
  }
}



/*================================================
*  campaign
================================================*/

#campaign {
  background: url(../images/campaign_bg.png) no-repeat center/cover;
  height: 100%;
  padding: 2em 0;
}

#campaign img {
  width: 66.21%;
  margin: 0 auto;
}

@media screen and (max-width:767px) {
  #campaign {
    padding: 1.5em 0;
  }

  #campaign img {
    width: 71%;
  }
}

/*================================================
* ground
================================================*/
#ground {
  background: url(../images/ground_bg.webp) no-repeat center top/cover;
  /* background: linear-gradient(40deg, #FA1C42 0%, #CD0D42 100%); */
  /* background: #000; */
}

#ground>div {
  padding: 6.76% 0;
  display: block;
  width: 72.6%;
}

#ground img {
  width: 100%;
  margin: 0 auto;
}

.ground_btn {
  margin-top: 2rem;
}

.ground_btn01 {
  margin-top: 4rem;
}

/* ↓ground_txt-after 後半↓ */
/* #ground img {
  width: 77.5%;
} */

@media screen and (max-width:767px) {
  #ground {
    background: url(../images/ground_bg_sp.webp) no-repeat center top/cover;
  }

  #ground>div {
    width: 92%;
  }

  #ground img {
    width: 100%;
  }

  .ground_btn {
    margin-top: 1rem;
  }

  .ground_btn01 {
    margin-top: 2rem;
  }


}

/*================================================
* seminar
================================================*/
#seminar {
  background: url(../images/seminar_bg.png) no-repeat center/cover;
  height: 100%;
}

#seminar .wrap {
  position: relative;
}

#seminar img {
  width: 108%;
  margin: 0 auto 0 10%;
}

#seminar a {
  display: block;
  width: 40%;
  height: auto;
  position: absolute;
  bottom: 7%;
  left: 10%;
}

#seminar a img {
  width: 100%;
  margin: 0;
}

@media screen and (max-width:767px) {

  #seminar .wrap {
    width: 100%;
  }

  #seminar img {
    width: 99%;
    margin: 0 auto 0 6%;
    padding-top: 5%;
  }

  #seminar a {
    left: 30%;
  }
}

/*================================================
* slide
================================================*/
#slide {
  background: #000;
  padding: 5vw 0 10vw;
}

#slide h2 {
  text-align: center;
  color: var(--color-white);
  font-size: 2em;
  font-weight: bold;
  padding: 0.5em 0;
  margin-bottom: 1em;
  border-top: 0.2em solid #316C0F;
}

#slide .swiper-pagination {
  bottom: -2vw;
}

#slide .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.5em;
}

#slide .swiper-pagination-bullet-active {
  background: #316C0F;
  opacity: 1;
}

@media screen and (max-width:767px) {
  #slide {
    background: #000;
    padding: 10vw 0 20vw;
  }

  #slide .wrap {
    width: 100%;
  }

  #slide .swiper-pagination {
    bottom: -8vw;
  }

  #slide .swiper-pagination-bullet {
    width: 0.8em;
    height: 0.8em;
  }
}


/*================================================
* about
================================================*/
#about {
  background: url(../images/about_bg.png) no-repeat center/cover;
  height: 24.4vw;
  display: grid;
  place-content: center;
  min-height: 469px;
}

#about p {
  text-align: center;
  font-weight: bold;
  text-shadow: 0.1em 0.1em 0 #fff, -0.1em -0.1em 0 #fff,
    -0.1em 0.1em 0 #fff, 0.1em -0.1em 0 #fff,
    0.1em 0 0 #fff, -0.1em 0 0 #fff,
    0 0.1em 0 #fff, 0 -0.1em 0 #fff;
  line-height: 1.69;
  position: relative;
  z-index: 1;
}

#about p span {
  font-size: 1.5em;
  color: #316C0F;
  font-weight: bold;
  display: block;
}

#about p::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/about_circle.png) no-repeat center/cover;
  height: 100%;
  width: 40%;
  padding-bottom: 40%;
  z-index: -1;
}

@media screen and (max-width:767px) {
  #about {
    background: url(../images/about_bg.png) no-repeat center right 55% / cover;
    height: 56vw;
    min-height: unset;
  }

  #about .wrap {
    width: 100%;
  }

  #about p {
    font-size: 0.95em;
  }

  #about p::before {
    /* width: 125%;
    padding-bottom: 125%; */
    content: none;
  }
}

/*================================================
* strong
================================================*/
#strong {
  background: url(../images/strong_bg.png) no-repeat center/cover;
  height: 100%;
}

#strong h2 {
  padding-top: 8%;
}

#strong ul {
  width: 66.5%;
  margin: 0 auto;
  padding-bottom: 19%;
}

#strong ul li {
  background: rgb(255 255 255 / 80%);
  border-radius: 5px;
  position: relative;
  padding: 3% 0 3% 17%;
  margin-bottom: 3%;
  font-weight: bold;
}

#strong ul li p.num {
  position: absolute;
  top: 31%;
  left: 3%;
  font-family: var(--din-2014);
  font-weight: bold;
  font-size: 1.875em;
}

#strong ul li p:not(.num) {
  font-size: 1.25em;
  font-weight: bold;
}

#strong ul li p span {
  font-size: 3em;
  color: #978339;
  font-family: var(--din-2014);
  font-weight: bold;
  margin-right: 0.1em;
}

#strong ul li p span small {
  font-size: 0.5em;
}

#strong ul li p span.ja {
  font-family: var(--source-han-sans);
  font-size: 2em;
}

#strong ul li:first-child>div>p:first-of-type {
  position: absolute;
  top: 27%;
  left: 14%;
}

#strong ul li:first-child>div>p:nth-of-type(2) {
  padding-right: 0.2em;
  text-align: right;
}

#strong ul li:first-child>div>p:nth-of-type(2) span {
  margin-left: 0.1em;
}

#strong ul li:first-child>div>p:nth-of-type(3) {
  padding-right: 1em;
  text-align: right;
  margin-top: -0.5em;
}

#strong ul li:first-child>div>p:nth-of-type(2) small,
#strong ul li:first-child>div>p:nth-of-type(3) small {
  font-size: 0.7em;
}


#strong ul li:nth-child(3) {
  padding: 5% 0 20% 17%;
}

#strong ul li:nth-child(3) .num {
  top: 15%;
}

#strong ul li img {
  position: absolute;
  top: 45%;
  left: 2.5%;
  width: 95%;
}

@media screen and (max-width:767px) {
  #strong ul {
    width: 89.5%;
  }

  strong ul li:first-child>div>p:first-of-type {
    top: 19%;
  }

  #strong ul li p:not(.num) {
    font-size: 1em;
  }

  #strong ul li p span {
    font-size: 2.5em;
  }

  #strong ul li:first-child>div>p:first-of-type {
    position: static;
  }

  #strong ul li:first-child>div>p:nth-of-type(2) {
    padding-right: 0;
    text-align: left;
  }

  #strong ul li:first-child>div>p:nth-of-type(3) {
    margin-top: -1.4em;
  }
}


/*================================================
* machine
================================================*/
#machine {
  height: 100%;
  padding-bottom: 4%;
}

#machine::before {
  position: absolute;
  content: "";
  top: -49%;
  left: 0;
  width: 100%;
  height: 150%;
  background: url(../images/machine_bg.png) no-repeat center top/cover;
  z-index: -1;
}

#machine h2 {
  width: 83%;
  margin: 0 auto 2%;
}

#machine .map {
  width: 75.7%;
  margin: 0 auto;
  position: relative;
}

#machine .map p {
  width: 43.7%;
  position: absolute;
  z-index: 1;
  top: 5%;
  left: -4%;
  line-height: 1.5;
  font-feature-settings: "palt";
}

#machine h3 {
  text-align: center;
  font-size: 1.93em;
  margin: 1em 0;
  font-weight: bold;
}

#machine .inner {
  width: 56.25%;
  max-width: 1080px;
  margin: 2% auto 1%;
  background: var(--color-white);
  padding: 1em 0;
  box-shadow: 0 0 3px rgb(0 0 0 / 20%);
}

#machine .inner h4 {
  text-align: center;
  font-family: var(--din-2014);
  padding: 0.5em 0 0.2em;
  background: #B0C6B1;
  font-size: 1.625em;
  font-weight: bold;
  width: 92%;
  margin: 0 auto 0.5em;
}

#machine .inner.free h4 {
  background: #DAD7A7;
}

#machine .inner.plate h4 {
  background: #B1CDD3;
}

#machine .inner.cardio h4 {
  background: #D6C7C5;
}

#machine ul li {
  width: 20%;
  text-align: center;
  font-size: 0.875em;
  font-feature-settings: "palt";
}

#machine .free ul li,
#machine .cardio ul li,
#machine .plate ul li:first-child,
#machine .plate ul li:nth-child(2),
#machine .plate ul li:nth-child(3),
#machine .plate ul li:nth-child(4) {
  width: 25%;
}

#machine .free ul li img,
#machine .cardio ul li img,
#machine .plate ul li:first-child img,
#machine .plate ul li:nth-child(2) img,
#machine .plate ul li:nth-child(3) img,
#machine .plate ul li:nth-child(4) img {
  width: 75%;
  margin: 0 auto;
}

@media screen and (max-width:767px) {
  #machine .wrap {
    width: 100%;
  }

  #machine .map p {
    width: 100%;
    top: -27%;
    left: 50%;
    transform: translateX(-50%);
  }

  #machine .map img {
    margin-top: 28%;
  }

  #machine h3 {
    font-size: 1.29em;
  }

  #machine>.wrap>img {
    width: 92.7%;
    margin: 0 auto;
  }

  #machine .inner {
    width: 92%;
  }

  #machine .plate ul {
    justify-content: space-between;
  }

  #machine ul li,
  #machine .free ul li {
    width: 25%;
    font-size: 0.7em;
  }

  #machine .weight ul li:nth-child(5),
  #machine .weight ul li:nth-child(6),
  #machine .weight ul li:nth-child(7),
  #machine .weight ul li:nth-child(8),
  #machine .weight ul li:nth-child(9),
  #machine .weight ul li:nth-child(10),
  #machine .cardio ul li,
  #machine .plate ul li {
    width: 33% !important;
  }

  #machine .plate ul li img,
  #machine .weight ul li:nth-child(5) img,
  #machine .weight ul li:nth-child(6) img,
  #machine .weight ul li:nth-child(7) img,
  #machine .weight ul li:nth-child(8) img,
  #machine .weight ul li:nth-child(9) img,
  #machine .weight ul li:nth-child(10) img {
    width: 75% !important;
    margin: 0 auto;
  }

  #machine .inner h4 {
    font-size: 1.0833em;
    width: 97%;
  }
}

/*================================================
* over_bg
================================================*/
#over_bg {
  background: url(../images/over_bg.png) no-repeat center top/cover;
  height: 100%;
}

/*================================================
* price
================================================*/
#price h2 {
  background: #333;
  padding: 1em 0;
}

#price p.ac {
  line-height: 1.5;
  font-weight: bold;
  margin-top: 5%;
  font-feature-settings: "palt";
}

#price .inner {
  width: 84%;
  margin: 0 auto;
}


#price img.price {
  width: 98%;
  margin: 1.5em auto 1em;
}

#price .under__txt {
  margin-top: 1em;
  font-size: 0.75em;
  line-height: 1.65;
  letter-spacing: 0;
  font-feature-settings: "palt";
  background: #fff;
  border-radius: 10px;
  padding: 1em;
}


#price img.server {
  width: 80%;
  margin: -6% auto 0;
  max-width: 940px;
  padding-bottom: 2%;
}

@media screen and (max-width:767px) {
  #price .wrap {
    width: 100%;
  }

  #price .inner {
    width: 100%;
  }

  #price img.price {
    width: 100%;
    margin: 0 auto;
  }

  #price .under__txt {
    background: #fff;
    width: 81.33%;
    margin: 0 auto;
  }


  #price img.server {
    width: 100%;
    margin: -19% auto 0;
  }
}

/*================================================
* form
================================================*/
#form h2 {
  background: #333;
  padding: 1em 0;
}

/*================================================
* faq
================================================*/
#faq {
  padding-bottom: 13.5%;
}

#faq h2 {
  background: #333;
  padding: 1em 0;
}

#accordion {
  padding-top: 4%;
  padding-bottom: 3.5%;
}

#accordion li {
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: 3%;
}

#accordion li:last-child {
  border-bottom: none;
}

#accordion .label {
  cursor: pointer;
  transition: .4s;
  position: relative;
  line-height: 1.45;
  font-size: 1.125em;
  font-weight: bold;
  padding: 2% 2% 2% 10%;
}

#accordion .label::before {
  position: absolute;
  content: "Q";
  top: 1.2em;
  left: 3%;
  color: var(--color-white);
  font-weight: bold;
  font-size: 0.77em;
  background: #316C0F;
  border-radius: 100px;
  width: 3%;
  height: 0;
  padding-bottom: 3%;
  text-align: center;
  line-height: 1.8;
}

#accordion .label::after {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/qa_arrow.png);
  width: 2.7%;
  height: 0;
  padding-bottom: 1.5%;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  transition: .4s;
}

#accordion .label.open::after {
  transform: translateY(-50%) rotate(-180deg);
}

/* open */
#accordion .detail {
  display: none;
  background: transparent;
  margin-bottom: 2em;
  line-height: 1.45;
  font-weight: 400;
  position: relative;
  padding: 2% 2% 2% 10%;
}

#accordion .detail::before {
  position: absolute;
  content: "A";
  top: 1em;
  left: 3%;
  font-size: 0.875em;
  color: var(--color-white);
  background: #6F7074;
  font-weight: bold;
  width: 3%;
  height: 0;
  padding-bottom: 3%;
  border-radius: 100px;
  text-align: center;
  line-height: 1.7;
}

#accordion .detail a {
  border-bottom: 1px solid;
}

#accordion .detail img.credit {
  width: 37%;
  margin-top: 2%;
}

#accordion .detail img.gamen {
  width: 46%;
  margin-top: 2%;
}

@media screen and (max-width:767px) {
  #accordion .label {
    font-size: 0.958em;
  }

  #accordion .detail {
    font-size: 0.911em;
  }

  #accordion .label::before {
    top: 0.8em;
    left: 3%;
    width: 5%;
    padding-bottom: 5%;
    line-height: 1.7;
  }

  #accordion .detail::before {
    top: 0.5em;
    left: 3%;
    width: 5%;
    padding-bottom: 5%;
  }
}

#faq p {
  padding: 1em 0;
  background: var(--color-white);
  text-align: center;
  font-size: 1.125em;
}

#faq p a {
  text-decoration: underline;
}

@media screen and (max-width:767px) {
  #faq p {
    font-size: 0.916em;
  }
}

/*================================================
* access
================================================*/
#access iframe {
  display: block;
  width: 100%;
  height: 500px;
  /**-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);*/
}

#access p {
  padding: 1em 0;
  background: var(--color-white);
  text-align: center;
  font-size: 1.125em;
}

#access p a {
  text-decoration: underline;
}

@media screen and (max-width:767px) {
  #access iframe {
    height: 66.66vw;
  }

  #access p {
    font-size: 0.916em;
  }
}

/*================================================
* footer
================================================*/
footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: 2.8em 0 0;
}

footer img {
  width: 33.8%;
  margin: 0 auto;
}

footer p {
  text-align: center;
  font-size: 0.875em;
  margin: 1em 0;
}

footer p a {
  font-size: 0.857em;
  opacity: 0.5;
  display: inline-block;
  padding: 0 1em;
  position: relative;
}

footer p a:nth-of-type(2)::before,
footer p a:nth-of-type(2)::after {
  position: absolute;
  content: "｜";
  top: 0;

}

footer p a:nth-of-type(2)::before {
  left: -0.6em;
}

footer p a:nth-of-type(2)::after {
  right: -0.6em;
}

footer .copy {
  text-align: center;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 0.625em;
  margin-top: 4.5em;
  padding: 1.5em 0 1em;
}

@media screen and (max-width:767px) {
  footer img {
    width: 33.3vw;
  }

  footer p {
    font-size: 0.75em;
  }

  footer p a {
    font-size: 0.77em;
  }

  footer .copy {
    font-size: 0.5em;
  }
}

/*================================================
 *  241026 追加
 ================================================*/
#content .top-pr-anniv {
  padding: 0;
  background: url("../images/intro-bg.png") center center/cover no-repeat;
}

#content .top-pr-anniv .wrap1 {
  position: relative;
  margin: 0 auto;
  padding: 2.5em 2.0em 2.5em 2.0em;
  /**background: rgba(255,255,255,0.8);**/
  max-width: 1100px;
}

#content .top-pr-anniv .wrap1 .btn-wrap {
  position: absolute;
  left: 20%;
  bottom: 5%;
  width: 30%;
}

#content .top-pr-anniv .wrap1 .btn-wrap1 {
  position: absolute;
  right: 20%;
  bottom: 5%;
  width: 30%;
}


#content .introduce__btn {
  padding: 0 !important;
  max-width: unset;
}

#content .introduce__btn a picture {
  display: block;
  width: 100%;
  height: 100%;
}

#content .introduce__btn a {
  display: block;
  width: 100%;
}

#content .introduce__page {
  padding: 15px 20px !important;
}

#flink {
  position: relative;
  z-index: 10;
}

@media screen and (max-width:767px) {
  #content .top-pr-anniv .wrap1 {
    padding: 0;
  }

  #content .top-pr-anniv .wrap1 .btn-wrap {
    position: absolute;
    left: 15%;
    bottom: 18.5%;
    width: 70%;
  }

  #content .top-pr-anniv .wrap1 .btn-wrap1 {
    position: absolute;
    right: 15%;
    bottom: 11.8%;
    width: 70%;
  }

  #top-sec03 .table img {
    width: 100%;
  }

  #content .introduce__btn a {
    width: 100%;
  }

  #content .introduce__page {
    padding: 55px 0 !important;
  }


}