@charset "UTF-8";

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

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


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

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  /* font-size 18px */
  font-size: 1.25vw;
  background: var(--color-white);
  color: var(--color-black);
}

.wrap {
  width: 76.388%;
  margin: 0 auto;
  position: relative;
}

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

a:hover {
  opacity: 1;
}

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;
}

/* タイトル */


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

  .wrap {
    width: 92%;
    padding: 0;
    box-sizing: border-box;

  }
}

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

/*================================================
 *  header
 ================================================*/
header {
  background: #020202;
  color: #fff;
  padding: 0.7vw 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

header .wrap {
  width: 90%;
}

header h1 {
  width: 21.3vw;
  transition: .4s;
}

header.changenav h1 {
  width: 15vw;
}

header h2 {
  letter-spacing: 0.05em;
  line-height: 1.75;
  font-weight: 400;
  font-feature-settings: "palt";
}

header h2 span {
  display: inline-block;
  margin-left: 1em;
}

header .wrap div {
  transition: .4s;
}

header.changenav .wrap div {
  opacity: 0;
}

header ul {
  gap: 1em;
}

header ul li a {
  display: block;
  border: 1px solid;
  padding: 0.5em 1em;
  border-radius: 1000px;
  width: 13em;
  text-align: center;
}

header ul li a:hover {
  background: var(--color-white);
  color: #009844;
}

@media screen and (max-width:767px) {
  header {
    padding: 2vw 0;
  }

  header.changenav {
    padding: 1vw 0 2vw;
  }

  header .wrap {
    width: 89.33%;
    justify-content: center;
    gap: 2vw;
  }

  header .wrap div {
    display: none;
  }

  header h1 {
    width: 38.9vw;
  }

  header.changenav h1 {
    width: 30vw;
  }

  header h2 {
    font-size: 0.9em;
  }

  header h2 span {
    display: block;
    margin-left: 0;
  }

  header div>h2:nth-of-type(2) {
    display: none;
  }


}





/*================================================
 *  mv
 ================================================*/
#mv {
  margin-top: -1vw;
}

#mv .inner {
  background: url(../images/mv_open_bg.png) no-repeat center top/cover;
  height: 100%;
}

#mv .open {
  width: 90%;
  margin: 3.8vw auto 0;
}

#mv .open ul {
  width: 66.66%;
  margin: 4.5vw auto 0;
  padding-bottom: 5vw;
  display: grid;
  gap: 3.125vw;
  grid-template-columns: repeat(3, 1fr);
}

#mv .open ul li {
  height: 19vw;
  border: 0.7vw solid var(--color-white);
  border-radius: 2vw;
  background: #009a3a;
  color: #fff;
  text-align: center;
  line-height: 1.45;
  display: grid;
  place-content: center;
}

#mv .open ul li:nth-child(even) {
  background: #000;
}

#mv .open ul li h3 {
  font-size: 1.388em;
  font-feature-settings: "palt";
}

#mv .open ul li h3 span {
  display: block;
  font-size: 0.37em;
  margin-top: 0.7vw;
}


#mv .open ul li p {
  font-family: var(--din-Condensed);
  color: #000;
  font-size: 2.277em;
  font-weight: bold;
}

#mv .open ul li:first-child img {
  width: 14.3vw;
  margin: 0.7vw auto;
}

#mv .open ul li:nth-child(2) img {
  width: 15vw;
  margin: 0.7vw auto;
}

#mv .open ul li:nth-child(3) img {
  width: 15vw;
  margin: 0.7vw auto;
}

#mv .open ul li:nth-child(4) img {
  width: 14vw;
  margin: 0.7vw auto;
}


#mv .open ul li:nth-child(5) {
  place-content: normal;
  position: relative;
}

#mv .open ul li:nth-child(5) h3 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin: 1.7vw 0 0 1.7vw;
}

#mv .open ul li:nth-child(5) h4 {
  text-align: left;
  width: 10vw;
  margin-left: auto;
}

#mv .open ul li:nth-child(5) img.img01 {
  width: 3.8vw;
  position: absolute;
  top: 1vw;
  right: 1.5vw;
}

#mv .open ul li:nth-child(5) img.img02 {
  width: 4.9vw;
  position: absolute;
  bottom: 1.38vw;
  left: 1vw;
}

#mv .open ul li:nth-child(6) img {
  width: 11.8vw;
  margin: 0.7vw auto;
}

#mv .open ul li:nth-child(6) h3:first-of-type {
  font-size: 1.5em;
}


@media screen and (max-width:767px) {
  #mv {
    margin-top: 8vw;
  }

  #mv .inner {
    background: none;
  }

  #mv .inner .open {
    background: url(../images/mv_open_bg_sp.png) no-repeat center top/cover;
    width: 100%;
    margin: 0 auto;
  }

  #mv .inner .open picture {
    display: block;
    width: 96%;
    padding-top: 3.33vw;
    margin: 0 auto;
  }

  #mv .open ul {
    width: 85.33%;
    margin: 5.33vw auto 0;
    gap: 3.33vw 4.666vw;
    grid-template-columns: repeat(2, 1fr);
  }

  #mv .open ul li {
    height: 36vw;
    border: 1.333vw solid var(--color-white);
    border-radius: 2vw;
  }

  #mv .open ul li h3 {
    font-size: 1.188em;
  }

  #mv .open ul li p {
    font-size: 2.5em;
    line-height: 1;
  }

  #mv .open ul li:first-child img {
    width: 28.66vw;
    margin: 0 auto 1vw;
  }

  #mv .open ul li:nth-child(2) img {
    width: 32vw;
    margin: 0.7vw auto;
  }

  #mv .open ul li h3 span {
    font-size: 0.5em;
  }

  #mv .open ul li:nth-child(3) img {
    width: 30vw;
    margin: 1vw auto 0;
  }

  #mv .open ul li:nth-child(4) img {
    width: 28vw;
    margin: 2vw auto 0;
  }

  #mv .open ul li:nth-child(5) h3 {
    margin: 2vw 0 0 5vw;
  }

  #mv .open ul li:nth-child(5) h4 {
    width: 25vw;
  }

  #mv .open ul li:nth-child(5) img.img01 {
    width: 7.2vw;
    top: 1vw;
    right: 5.5vw;
  }

  #mv .open ul li:nth-child(5) img.img02 {
    width: 10vw;
    bottom: 2vw;
    left: 2vw;
  }

  #mv .open ul li:nth-child(6) img {
    width: 23.6svw;
    margin: 2vw auto;
  }


  #mv .open ul li:nth-child(3) {
    order: 4;
  }

  #mv .open ul li:nth-child(4) {
    order: 3;
  }

  #mv .open ul li:nth-child(5) {
    order: 5;
  }

  #mv .open ul li:nth-child(6) {
    order: 6;
  }
}

/*================================================
* cta
================================================*/
#cta {
  background: var(--color-black);
  padding: 5.55vw 0;
}

#cta a {
  width: 26vw;
  height: 4.16vw;
  display: grid;
  place-content: center;
  border-radius: 1.74vw;
  border: 0.12vw solid #00a65a;
  background-color: #00a65a;
  font-size: 1.22em;
  color: var(--color-white);
  margin: 3.125vw auto 0;
  animation: btn 1s ease-in-out infinite;
}

@keyframes btn {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }

  100% {
    transform: scale(1)
  }
}

#cta a:hover {
  background: var(--color-white);
  color: #000;
}

@media screen and (max-width:767px) {
  #cta {
    padding: 13.33vw 0;
  }

  #cta a {
    width: 52.22vw;
    height: 8.26vw;
    border-radius: 3.33vw;
    border: 0.248vw solid var(--color-white);
    font-size: 1.045em;
    margin: 4vw auto 0;
  }
}

/*================================================
* about
================================================*/
#scroll {
  font-family: var(--din-Condensed);
  text-align: center;
  padding: 1.4vw 0;
}

#scroll img {
  width: 3.47vw;
  margin: 0 auto 0.7vw;
}

@media screen and (max-width:767px) {
  #scroll {
    padding: 6vw 0;
    font-size: 0.81em;
  }

  #scroll img {
    width: 7vw;
  }

}

/*================================================
* about
================================================*/

#about .about__map {
  background: url(../images/about_bg.png) no-repeat center top/cover;
  height: 100%;
  padding: 3.125vw 0 23.6vw;
  position: relative;
}

#about .about__map .inner {
  width: 66%;
  margin: 0 auto;
  position: relative;
}

#about .about__map .inner h2 {
  font-family: var(--source-han-sans);
  font-weight: bold;
  padding-left: 1.73vw;
  border-left: 0.7vw solid #009a3a;
  font-size: 2.11em;
  line-height: 1.53;
  margin-bottom: 3.125vw;
}

#about .about__map .inner p {
  width: 46.5%;
  line-height: 2.11;
  font-feature-settings: normal;
  letter-spacing: 0.02em;
  margin-bottom: 1em;
}

#about .about__map .inner ul {
  width: 50.5%;
}

#about .about__map .inner ul li {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7vw 1.4vw;
  border: 0.09375vw solid var(--color-black);
  font-size: 0.88em;
  border-radius: 0.55vw;
}


#about .about__map .inner .circle {
  text-align: center;
  width: 30vw;
  height: 30vw;
  display: grid;
  place-content: center;
  position: absolute;
  z-index: 1;
  left: 2vw;
  top: 31vw;
}

#about .about__map .circle::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/about_circle.png);
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

#about .about__map .circle h4 {
  font-size: 1.57em;
  margin-bottom: 1em;
  line-height: 1.3;
  transform: rotate(-7.31deg);
}

#about .about__map .circle h3 {
  font-size: 2.5em;
  font-weight: bold;
  font-family: var(--source-han-sans);
  transform: rotate(-7.31deg);
  line-height: 1.28;
}

#about .about__map .map__img {
  width: 36.8vw;
  position: absolute;
  top: 12.1vw;
  right: 13.2vw;
}


@media screen and (max-width:767px) {
  #about .about__map {
    background: url(../images/about_bg_sp.png) no-repeat center top / cover;
    padding: 8.66vw 0 46vw;
  }

  #about .about__map .inner {
    width: 92.66%;
  }

  #about .about__map .inner h2 {
    padding-left: 1vw;
    border-left: 1.33vw solid #009a3a;
    font-size: 1.54em;
    margin-bottom: 4vw;
  }

  #about .about__map .inner p {
    width: 100%;
    margin-bottom: 88vw;
  }

  #about .about__map .map__img {
    width: 79.33vw;
    top: 52.1vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  #about .about__map .inner ul {
    width: 73.33vw;
    margin: 0 auto;
  }

  #about .about__map .inner ul li {
    padding: 0.7vw 1.4vw;
    border: 0.24vw solid var(--color-black);
    font-size: 1em;
    border-radius: 1.46vw;
    font-feature-settings: "palt";
  }

  #about .about__map .inner .circle {
    width: 63vw;
    height: 63vw;
    left: 50%;
    transform: translateX(-50%);
    top: 139vw;
  }

  #about .about__map .circle h3 {
    font-size: 2.22em;
  }

  #about .about__map .circle h4 {
    font-size: 1.4em;
    margin-bottom: 0.5em;
  }
}


/*================================================
* evol
================================================*/
#evol {
  background: url(../images/ev_bg.png) no-repeat center top/cover;
  height: 100%;
  padding-top: 4.86vw;
  padding-bottom: 8vw;
  color: var(--color-white);
}

#evol .inner {
  width: 66.5%;
  margin: 0 auto;
}

#evol .inner h2 {
  width: 36.18vw;
  margin-left: auto;
}

#evol .inner h3 {
  text-align: center;
  font-weight: bold;
  font-family: var(--source-han-sans);
  font-size: 2.11em;
  margin-top: 0.5em;
  padding-bottom: 17.7vw;
  font-feature-settings: normal;
}

#evol .inner ul {
  height: 100%;
  width: 37vw;
  height: 33vw;
  display: grid;
  place-content: center;
  position: relative;
  /* z-index: 1; */
}

#evol .inner ul::before,
#evol .inner ul::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#evol .inner ul::before {
  background: #009844;
  mix-blend-mode: multiply;
}

#evol .inner ul::after {
  background: #009844;
  opacity: 0.65;
}

#evol .inner ul li {
  position: relative;
  z-index: 1;
  width: 32vw;
}

#evol .inner ul li:first-child {
  font-size: 2em;
  line-height: 1.44;
  font-weight: bold;
  margin-bottom: 1em;
}

#evol .inner ul li:nth-child(2) {
  font-size: 1.05em;
  line-height: 2.36;
}


@media screen and (max-width:767px) {
  #evol {
    background: url(../images/ev_bg_sp.png) no-repeat center top / cover;
    padding-top: 26.66vw;
    padding-bottom: 13.33vw;
  }

  #evol .inner {
    width: 100%;
  }

  #evol .inner h2 {
    width: 69.6vw;
    margin-right: auto;
  }

  #evol .inner h3 {
    font-size: 1.81em;
    text-align: center;
    padding-bottom: 56vw;
    line-height: 1.55;
    margin-top: 1em;
  }

  #evol .inner ul {
    width: 73.5vw;
    height: 66vw;
    margin: 0 auto;
  }

  #evol .inner ul li {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  #evol .inner ul li:first-child {
    font-size: 1.72em;
    margin-bottom: 1em;
    text-align: center;
  }

  #evol .inner ul li:nth-child(2) {
    font-size: 0.95em;
    width: 60vw;
    font-feature-settings: "palt";
  }
}

/*================================================
* area__contents
================================================*/
.area__contents {
  padding-top: 4.16vw;
  text-align: center;
}

.area__contents h2 {
  text-align: center;
  font-family: var(--din-Condensed);
  font-size: 2.5em;
  border-top: 0.34vw solid #000;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7vw 0.7vw 1.73vw 0.7vw;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: 0.15em;
}

.area__contents h2 span {
  display: block;
  font-size: 0.35em;
  font-family: var(--source-han-sans);
  margin-top: 1.187em;
  letter-spacing: 0.05em;
}

.area__contents h3 {
  margin: 1em 0 1.77em;
}

.area__contents ul {
  display: grid;
  padding-bottom: 4.166vw;
  margin: 0 auto 7vw;
}

.area__contents ul li p {
  font-size: 0.77em;
}

@media screen and (max-width:767px) {
  .area__contents {
    padding-top: 10.66vw;
  }

  .area__contents h2 {
    font-size: 2.27em;
    border-top: 0.66vw solid #000;
    padding: 1.2vw 4vw 2.5vw 4vw;
  }

  .area__contents h2 span {
    font-size: 0.4em;
    margin-top: 1.187em;
  }

  .area__contents h3 {
    margin: 1.36em 0;
  }

  .area__contents ul {
    padding-bottom: 6.66vw;
    margin: 0 auto 6.66vw;
  }

  .area__contents ul li p {
    font-size: 0.72em;
    font-feature-settings: "palt";
  }
}

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

#freeArea.area__contents ul {
  grid-template-columns: repeat(3, 1fr);
  width: 45.2%;
}



@media screen and (max-width:767px) {
  #freeArea.area__contents {
    background: url(../images/freeweight_bg_sp.png) no-repeat center top / cover;
  }

  #freeArea.area__contents ul {
    grid-template-columns: repeat(3, 1fr);
    width: 86.66%;
  }

}


/*================================================
* training_m_Area
================================================*/
#training_m_Area.area__contents {
  background: #e6e6e6;
  height: 100%;
}

#training_m_Area.area__contents ul {
  grid-template-columns: repeat(6, 1fr);
  width: 81.5%;
}

@media screen and (max-width:767px) {
  #training_m_Area.area__contents ul {
    grid-template-columns: repeat(3, 1fr);
    width: 86.66%;
    gap: 2vw 0;
  }
}

/*================================================
* cardio_m_Area
================================================*/
#cardio_m_Area.area__contents {
  background: #e6e6e6;
  height: 100%;
}

#cardio_m_Area.area__contents ul {
  grid-template-columns: repeat(2, 1fr);
  width: 32%;
}

@media screen and (max-width:767px) {
  #cardio_m_Area.area__contents ul {
    width: 60%;
  }
}

/*================================================
* evlo__point
================================================*/
#evlo__point {
  padding: 0 0 5.55vw;
}

#evlo__point img.point {
  width: 15.6vw;
  margin: 2vw auto;

}

#evlo__point h2 {
  font-size: 1.88em;
  text-align: center;
  font-weight: bold;
}

#evlo__point h2:first-of-type {
  position: relative;
  padding: 0 4vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

#evlo__point h2:first-of-type::before,
#evlo__point h2:first-of-type::after {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  width: 2.77vw;
  height: 3.33vw;
  top: 50%;
  transform: translateY(-50%);
}

#evlo__point h2:first-of-type::before {
  left: 0;
  background-image: url(../images/evol_point_l.png);
}

#evlo__point h2:first-of-type::after {
  right: 0;
  background-image: url(../images/evol_point_r.png);
}


#evlo__point ul {
  width: 58%;
  margin: 2.4vw auto 0;
}

#evlo__point ul li:first-child {
  width: 9.166vw;
}

#evlo__point ul li:nth-child(2) {
  width: 26vw;
  line-height: 2.11;
}

#evlo__point ul li:nth-child(3) {
  width: 18.9vw;
}

@media screen and (max-width:767px) {
  #evlo__point {
    padding-top: 6.6vw;
    padding-bottom: 12vw;
  }

  #evlo__point h2 {
    font-size: 1.545em;
  }

  #evlo__point h2:nth-of-type(2) {
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 12vw;
    margin-left: auto;
    font-size: 1.2727em;
    line-height: 1.71;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
  }

  #evlo__point img.point {
    width: 30vw;
    margin: 2vw auto 10vw;
  }

  #evlo__point ul {
    width: 91.33%;
    margin: 7vw auto 0;
  }

  #evlo__point ul li:first-child {
    width: 17.6vw;
    position: absolute;
    top: 28vw;
    left: 12vw;
  }

  #evlo__point ul li:nth-child(2) {
    width: 48.1vw;
    font-size: 1.045em;
  }

  #evlo__point ul li:nth-child(3) {
    width: 40vw;
  }

  #evlo__point h2:first-of-type {
    padding: 0 8vw;
  }

  #evlo__point h2:first-of-type::before,
  #evlo__point h2:first-of-type::after {
    width: 5.77vw;
    height: 7.33vw;
  }
}

/*================================================
* other
================================================*/
#other {
  background: url(../images/other.png) no-repeat center/cover;
  height: 100%;
  text-align: center;
  padding: 8.33vw 0;
}

#other .inner {
  width: 52.5%;
  margin-left: 15vw;
}

#other h3 {
  color: #1a1a1a;
  font-size: 1.44em;
  font-family: var(--source-han-sans);
  margin-bottom: 1.3em;
  font-weight: bold;
  line-height: 1.7;
}

#other h2 {
  color: #1a1a1a;
  font-size: 1.77em;
  font-family: var(--source-han-sans);
  margin-top: 1.1em;
  font-weight: bold;
}

#other ul {
  display: grid;
  gap: 1.4vw;
  grid-template-columns: repeat(4, 1fr);
}

#other ul li {
  font-size: 0.88em;
  color: #323333;
  background: rgb(255 255 255 / 76%);
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  border-radius: 1vw;
}

#other ul li img {
  width: 7.7vw;
  margin: 0 auto 0.7vw;
}

@media screen and (max-width:767px) {
  #other {
    background: url(../images/other_sp.png) no-repeat center / cover;
    padding: 7.33vw 0 7.5vw;
  }

  #other h3 {
    font-size: 1.31em;
  }

  #other .inner {
    width: 92%;
    margin: 0 auto;
  }

  #other ul.pc {
    display: none;
  }

  #other ul {
    gap: 3.33vw;
    grid-template-columns: repeat(3, 1fr);
  }

  #other ul:nth-of-type(2) {
    width: 61.6vw;
    margin: 3.33vw auto;
    grid-template-columns: repeat(2, 1fr);
  }

  #other ul li {
    font-size: 0.9em;
    aspect-ratio: 1 / 0.91;
    border-radius: 2.4vw;
  }

  #other ul li img {
    width: 18vw;
    margin: 0 auto 0.7vw;
  }

  #other h2 {
    font-size: 1.54em;
    margin-top: 64.66vw;
  }
}

/*================================================
* lifestyle
================================================*/
#lifestyle {
  background: url(../images//lifestyle_bg.png) no-repeat center top 40%/cover;
  height: 100%;
  padding: 7vw 0 12.85vw;
}

#lifestyle ul {
  width: 64%;
  margin-left: 14.6vw;
}

#lifestyle ul li:first-child {
  width: 23.12vw;
}

#lifestyle ul li:nth-child(2) {
  width: 34.5vw;
}

#lifestyle ul li:nth-child(2) h2 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: rgb(0 166 90 / 70%);
  color: var(--color-white);
  font-size: 1.66em;
  font-weight: bold;
  font-family: var(--source-han-sans);
  padding: 0.3em 0.7em 0.4em;
  margin-top: 0.7em;
}


@media screen and (max-width:767px) {
  #lifestyle {
    background: url(../images//lifestyle_bg_sp.png) no-repeat center top /cover;
    padding: 9.33vw 0;
  }

  #lifestyle ul {
    width: 65.7%;
    margin-left: 7.33vw;
  }

  #lifestyle ul li:first-child {
    width: 40vw;
  }

  #lifestyle ul li:nth-child(2) {
    width: 100%;
    margin-top: 11.33vw;
  }

  #lifestyle ul li:nth-child(2) h2 {
    font-size: 1.36em;
    padding: 0.3em 0.7em 0.4em;
    margin-top: 0.7em;
  }
}

/*================================================
* case
================================================*/
#case {
  background: url(../images/case_bg.png) no-repeat center top/cover;
  height: 100%;
  margin-bottom: 6.6vw;
}

#case picture {
  width: 78.88vw;
  display: block;
  margin: 0 auto;
  padding-top: 4.86vw;
}


#case h2 picture {
  width: 50vw;
  padding-bottom: 4.86vw;
}

@media screen and (max-width:767px) {
  #case {
    background: url(../images/case_bg_sp.png) no-repeat center top/cover;
    margin-bottom: 0;
  }

  #case picture {
    width: 92vw;
    padding-top: 6vw;
  }

  #case h2 picture {
    width: 84.4vw;
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
}

/*================================================
* price
================================================*/
.common__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.common__ttl li:first-child {
  margin-right: 1.4vw;
}

.common__ttl li:first-child h2 {
  font-family: var(--din-Condensed);
  font-size: 5.55em;
  letter-spacing: 0.1em;
  border-right: 0.7vw solid #009a3a;
  padding-right: 0.7vw;
}

.common__ttl li:nth-child(2) {
  font-family: var(--source-han-sans);
  font-size: 2.11em;
  font-weight: bold;
  font-feature-settings: "palt";
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.common__ttl li:nth-child(2) span {
  display: block;
  font-size: 0.52em;
  letter-spacing: 0.05em;
}

#price {
  padding-top: 4.51vw;
  padding-bottom: 13.2vw;
}

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

#price h3 {
  font-weight: 500;
  margin: 2em 0 1em;
}

#price dl dt {
  width: 54.2%;
  background: #eeeeef;
  border: 0.0156vw solid #595757;
  height: 7vw;
  display: grid;
  place-content: center;
  font-size: 1.66em;
  letter-spacing: 0.2em;
  margin-bottom: 0.7vw;
}

#price dl dd {
  width: 45.8%;
  background: #f3f4bb;
  border: 0.0156vw solid #595757;
  border-left: none;
  height: 7vw;
  display: grid;
  place-content: center;
  margin-bottom: 0.7vw;
}

#price dl dd p {
  font-size: 1.33em;
  width: 19vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5vw;
}

#price dl dd p span:first-of-type {
  font-size: 2em;
  margin-left: auto;
  margin-right: 0.1em;
  font-family: var(--din-2014);
}

#price dl dd p span:nth-of-type(2) {
  font-size: 2.91em;
  padding-bottom: 0.5vw;
  font-family: var(--din-2014);
  letter-spacing: 0.05em;
}

#price>.inner>p {
  font-size: 0.88em;
  margin-top: 1.4vw;
  font-weight: 400;
}

#price dl dt span {
  color: red;
}

@media screen and (max-width:767px) {
  .common__ttl {
    margin-left: 5.3vw !important;
    margin-right: 0;
    width: auto !important;
  }

  .common__ttl li:first-child {
    margin-right: 2vw;
  }

  .common__ttl li:first-child h2 {
    font-size: 2.54em;
    border-right: 1.13vw solid #009a3a;
    padding: 2vw 1vw 2vw 0;
  }

  .common__ttl li:nth-child(2) {
    font-size: 1.272em;
  }

  .common__ttl li:nth-child(2) span {
    font-size: 0.85em;
  }

  #price {
    padding-top: 3.33vw;
    padding-bottom: 15.33vw;
  }

  #price .common__ttl {
    margin-left: 4vw !important;
  }

  #price .inner {
    width: 92.66%;
  }

  #price h3 {
    font-size: 1.09em;
  }

  #price dl dt {
    width: 54.2%;
    border: 0.3vw solid #595757;
    height: 13.33vw;
    font-size: 1.27em;
    margin-bottom: 1.3vw;
    letter-spacing: 0;
  }

  #price dl dd {
    width: 45.8%;
    border: 0.3vw solid #595757;
    border-left: none;
    height: 13.33vw;
    margin-bottom: 1.3vw;
  }

  #price dl dd p {
    font-size: 1em;
    width: 36vw;
    padding-top: 0.5vw;
  }

  #price dl dd p span:first-of-type {
    font-size: 2.3em;
  }

  #price dl dd p span:nth-of-type(2) {
    font-size: 3.18em;
  }

  #price>.inner>p {
    font-size: 0.9em;
  }
}

/*================================================
* join
================================================*/
#join {
  background: #e6e6e6;
  text-align: center;
  padding: 8vw 0 6.6vw;
}

#join h2 {
  font-size: 2.11em;
  font-family: var(--source-han-sans);
  font-weight: bold;
}

#join h3 {
  font-size: 1.11em;
  margin-top: 1em;
}

#join ul {
  width: 70.5%;
  margin: 3.8vw auto 0;
  display: grid;
  gap: 1.7vw;
  grid-template-columns: repeat(5, 1fr);
  font-size: 1.11em;
  line-height: 1.7;
}

@media screen and (max-width:767px) {
  #join {
    padding: 8.66vw 0;
  }

  #join h2 {
    font-size: 1.81em;
  }

  #join h3 {
    font-size: 1.09em;
    margin-bottom: 2vw;
  }

  #join ul {
    width: 80%;
    font-size: 1em;
    line-height: 1.45;
    grid-template-columns: repeat(3, 1fr);
  }

  #join ul:nth-of-type(2) {
    width: 52%;
    grid-template-columns: repeat(2, 1fr);
  }

  #join ul h4 {
    font-size: 3em;
  }

  #join ul img {
    width: 100%;
    margin: 0 auto 0.7vw;
  }
}

/*================================================
* faq
================================================*/
#faq {
  padding: 10vw 0;
}

#faq ul {
  width: 70%;
  margin: 5.55vw auto 0;
}

#faq ul#accordion li {
  margin-bottom: 3.125vw;
}

#faq ul#accordion .label {
  padding-top: 1.7vw;
  padding-bottom: 2vw;
  padding-left: 7.6vw;
  position: relative;
  background: #f2f2f2;
  cursor: pointer;
}

#faq ul#accordion .label::before {
  position: absolute;
  content: "Q";
  font-size: 2.44em;
  font-family: var(--din-2014);
  top: 50%;
  left: 3.1vw;
  transform: translateY(-50%);
}

#faq ul#accordion .detail {
  padding-top: 1.7vw;
  padding-bottom: 2vw;
  padding-left: 8.6vw;
  position: relative;
  font-size: 1.11em;
  color: var(--color-white);
  background: #686767;
  line-height: 1.6;
  display: none;
}

#faq ul#accordion .detail::before {
  position: absolute;
  content: "A";
  font-size: 2.2em;
  font-family: var(--din-2014);
  top: 1vw;
  left: 3.4vw;
  color: var(--color-white);
}

#faq h3 {
  text-align: center;
  font-size: 1.55em;
  font-weight: bold;
  font-family: var(--source-han-sans);
  font-feature-settings: "palt";
}


@media screen and (max-width:767px) {
  #faq {
    padding: 18.66vw 0 16.666vw;
  }

  #faq ul {
    width: 100%;
    margin: 5.55vw auto 0;
  }

  #faq ul#accordion li {
    margin-bottom: 7.33vw;
  }

  #faq ul#accordion .label {
    padding: 4vw 4vw 4vw 18vw;
    font-size: 1.11em;
  }

  #faq ul#accordion .label::before {
    font-size: 2.45em;
    left: 8.1vw;
  }

  #faq ul#accordion .detail {
    padding: 4vw 4vw 7vw 18vw;
    font-size: 1.13em;
    letter-spacing: 0.05em;
  }

  #faq ul#accordion .detail::before {
    font-size: 2.16em;
    left: 8.4vw;
  }

  #faq h3 {
    font-size: 1.27em;
  }
}

/*================================================
* access
================================================*/
#access {
  background: #f2f2f2;
  padding-top: 6vw;
}

#access ul {
  width: 63.3%;
  margin: 0 auto 4.8vw;
}

#access ul li:first-child {
  width: 12.5vw;
}

#access ul li:nth-child(2) {
  width: 48vw;
  text-align: center;
}

#access ul li:nth-child(2) h2 {
  font-size: 2.11em;
}

#access ul li:nth-child(2) h2 small {
  font-size: 0.47em;
  border: 1px solid #000;
  padding: 0.35vw 2vw;
  margin-right: 0.7vw;
  border-radius: 1vw;
  font-weight: 400;
}

#access ul li:nth-child(2) h2 span {
  font-size: 0.55em;
  margin-left: 0.7vw;
}

#access ul li:nth-child(2) h3 {
  font-size: 1.11em;
  font-weight: 400;
  margin: 1em 0;
}

#access ul li:nth-child(2) h3>span {
  font-size: 1.2em;
  margin-left: 1em;
  font-weight: 500;
}

#access ul li:nth-child(2) h3>span>span {
  font-family: var(--din-2014);
}

#access ul li:nth-child(2) p {
  font-size: 1.11em;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  background-image: repeating-linear-gradient(-28deg, #000, #000 3px, transparent 3px, transparent 6px, #000 6px), repeating-linear-gradient(62deg, #000, #000 3px, transparent 3px, transparent 6px, #000 6px), repeating-linear-gradient(152deg, #000, #000 3px, transparent 3px, transparent 6px, #000 6px), repeating-linear-gradient(242deg, #000, #000 3px, transparent 3px, transparent 6px, #000 6px);
  background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  padding: 1vw 0;
  width: 88%;
  margin: 0 auto;
  border-radius: 0.4166vw;
}

#access ul li:nth-child(2) p img {
  display: inline-block;
  width: 2.63vw;
  margin: 0 0.4vw 0 0.7vw;
  vertical-align: text-bottom;
}

#access ul li:nth-child(2) p>span>span {
  font-size: 1.25em;
}

#access iframe {
  display: block;
  width: 100%;
  height: 34.7vw;
}



@media screen and (max-width:767px) {
  #access {
    padding-top: 8vw;
  }

  #access ul {
    width: 91.33%;
    margin: 0 auto 10vw;
    position: relative;
    padding-bottom: 11.33vw;
  }

  #access ul li:first-child {
    width: 24vw;
  }

  #access ul li:nth-child(2) {
    width: 64vw;
  }

  #access ul li:nth-child(2) h2 {
    font-size: 1.72em;
    text-align: left;
    line-height: 1.7;
  }

  #access ul li:nth-child(2) h2 small {
    font-size: 0.47em;
    border-radius: 2vw;
    margin-right: 2vw;
  }

  #access ul li:nth-child(2) h2 span {
    font-size: 0.55em;
    display: block;
    margin-left: 18vw;
  }

  #access ul li:nth-child(2) h3>span {
    font-size: 1.09em;
    margin-left: 0;
    display: block;
  }

  #access ul li:nth-child(2) h3>span>span {
    font-size: 2.33em;
    font-weight: bold;
  }

  #access ul li:nth-child(2) p {
    width: 91.33vw;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 1.022em;
    padding: 2vw 0;
  }

  #access ul li:nth-child(2) p img {
    width: 5.73vw;
    margin: 0 0.4vw 0 2vw;
  }

  #access iframe {
    height: 66.66vw;
  }
}

/*================================================
 *  footer
 ================================================*/
footer {
  background: url(../images/ft_bg.png) no-repeat center top/cover;
  height: 100%;
  padding-top: 2.43vw;
}

footer a.cta__btn {
  width: 26vw;
  height: 4.16vw;
  display: grid;
  place-content: center;
  border-radius: 1.74vw;
  border: 0.12vw solid var(--color-white);
  font-size: 1.22em;
  color: var(--color-white);
  margin: 0 auto 3.42vw;
  animation: btn 1s ease-in-out infinite;
}

footer a.cta__btn:hover {
  background: var(--color-white);
  color: #000;
}

footer ul {
  background: rgb(0 0 0 / 50%);
  text-align: center;
  padding: 2vw 0;
}

footer ul li {
  display: inline-block;
  padding: 0.5em 1em;
  border-left: 1px solid var(--color-white);
}

footer ul li:last-child {
  border-right: 1px solid var(--color-white);
}

footer ul li a {
  color: var(--color-white);
}

@media screen and (max-width:767px) {
  footer {
    padding-top: 5.33vw;
  }

  footer a.cta__btn {
    width: 52.22vw;
    height: 8.26vw;
    border-radius: 3.33vw;
    border: 0.248vw solid var(--color-white);
    font-size: 1.045em;
    margin: 0 auto 5.33vw;
  }

  footer ul {
    padding: 3.33vw 0;
  }

  footer ul li {
    font-size: 0.9em;
  }
}



/*================================================
 *  fade
 ================================================*/
/* fadeUp */
.fadeUp,
.fadeUp01,
.fadeUp02,
.fadeUp03,
.fadeUp04,
.fadeUp05,
.fadeUp06 {
  opacity: 0;
  transform: translateY(20px);
  transition: ALL .4s ease;
  -webkit-transition: ALL .4s ease;
  -moz-transition: ALL .4s ease;
  -o-transition: ALL .4s ease;
}

.fadeUp01 {
  transition-delay: .2s;
}

.fadeUp02 {
  transition-delay: .4s;
}

.fadeUp03 {
  transition-delay: .6s;
}


.fadeUp.started,
.fadeUp01.started,
.fadeUp02.started,
.fadeUp03.started {
  opacity: 1;
  transform: translateY(0px);
}

/* fadeRight */
.fadeRight,
.fadeRight01,
.fadeRight02 {
  opacity: 0;
  transform: translateX(20px);
  transition: ALL .4s ease;
  -webkit-transition: ALL .4s ease;
  -moz-transition: ALL .4s ease;
  -o-transition: ALL .4s ease;
}

.fadeRight01 {
  transition-delay: .2s;
}

.fadeRight02 {
  transition-delay: .4s;
}


.fadeRight.started,
.fadeRight01.started,
.fadeRight02.started {
  opacity: 1;
  transform: translateY(0px);
}