@charset "UTF-8";

/* -------------------------------------------------------------
レスポンシブ(スマホ) Breakpoints:～599px;
------------------------------------------------------------- */

.PC_only {
  display: none;
}

/* -------------------------------------------------------------
header
------------------------------------------------------------- */
header {
  width: 100%;

}

#topimage {
  background-image: url(../img/topimg.png);
  background-size: cover;
  margin-top: 10%;
}

#toprogo {
  margin: -5% 25% 0 25%;
  width: 50%;
}

#topcoment {
  margin-top: 70%;
  background-color: rgba(0, 10, 255, 0.3);
}

#topcoment img {
  margin: 5% 5% 3% 5%;
  width: 90%;
}

.migisita {
  position: fixed;
  left: 2vw;
  bottom: 15vw;
  display: flex;
  flex-flow: column;
  z-index: 30;
  transform: translateZ(1px);
}

.linebox {
  width: 23vw;
}

.linebox img {
  width: 100%;
}

.pagetop {
  height: 15vw;
  width: 15vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25;
}

.pagetop img {
  width: 100%;
  margin-left: 8vw;
  margin-top: 5vw;
}


/* -------------------------------------------------------------
main (index.html)
------------------------------------------------------------- */

#topcomment {
  background-image: url(../img/topcomment_img.png);
  background-size: cover;
  width: 100%;
}

#monorogo {
  width: 30%;
}

#topcomeabox {
  display: flex;
}

.hosi {
  width: 2%;
  margin: 10% 10%;
}

#topcomebbox {
  text-align: center;
  margin: 5% -5% 0 -5%;

}

#topcomebbox p {
  width: 100%;
  font-size: 2.3vw;
  color: white;
  margin: 0 auto;
}

/* -------------------------------------------------------------
器具
------------------------------------------------------------- */
.kiguwaku {
  width: 90%;
  margin-top: -10%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background-color: white;
  padding: 0.5%;
  position: relative;
  z-index: 20;
}

.comtop {
  width: 90%;
  background-color: #8B8BFF;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4% auto;
  padding: 3%;
}

.comtop img {
  width: 10%;
}

.comtop p {
  font-size: 5vw;
  color: white;
  margin-left: 10%;
}

#kiguimg {
  padding: 5%;
  margin-top: -5%;
  display: flex;
  flex-wrap: wrap;
}

#kiguimg img {
  width: 50%;
  padding: 2%;
}

.kigutai {
  width: 100%;
}

#kigucome {
  font-size: 3vw;
  margin-left: 5%;
  margin-bottom: 5%;
}


/* -------------------------------------------------------------
トレーニング画像
------------------------------------------------------------- */

#trainingimg {
  position: relative;
  top: -8vw;
  z-index: 10;
}

#trainingimg1 {
  width: 100%;
  z-index: 10;
}

#trainingimgyoko {
  display: flex;
  margin-top: -1%;
}

#trainingimgyoko img {
  width: 50%;
}

.rogosiro {
  position: absolute;
  top: 45%;
  left: 35%;
  width: 30%;
}


/* -------------------------------------------------------------
営業時間
------------------------------------------------------------- */

#time {
  width: 90%;
  margin-top: -15%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background-color: white;
  padding: 0.5%;
  padding-bottom: 5vw;
  position: relative;
  z-index: 20;
}

.comtitle {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin: 10vw 0 2vw 0;
}

.comtitle .triangle1 {
  background: #8B8BFF;
  height: calc(tan(60deg) * 7vw / 2);
  width: 7vw;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-right: 3vw;
}

.comtitle p {
  color: #0092E5;
  font-size: 5vw;
}

.comtitle .triangle2 {
  background: #8B8BFF;
  height: calc(tan(60deg) * 7vw / 2);
  width: 7vw;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  margin-left: 3vw;
}

#timeimg {
  width: 90%;
  margin: auto;
  display: block;
}

#timeimg2 {
  width: 90%;
  margin: auto;
  display: block;
}

.yokosenbox {
  text-align: center;
  font-size: 0;
  margin-top: 5vw;
}

.yokosenbox::before,
.yokosenbox::after {
  content: '';
  background-color: #0092E5;
  height: 1px;
  width: 20%;
  display: inline-block;
}

.yokosen {
  padding: 0 10px;
  font-size: 4vw;
  color: #0092E5;
}

.yokosenbox .yokosen,
.yokosenbox::before,
.yokosenbox::after {
  vertical-align: middle;
}

.yokosentext {
  text-align: center
}

#linebotton {
  display: inline-block;
  background-image: linear-gradient(#08EA00 0%, #0E7B09 100%);
  color: #fff;
  width: 90%;
  border-radius: 25vw;
  padding: 3vw;
  text-align: center;
  font-size: 5vw;
  text-decoration: none;
  margin-top: 5%;
  margin-left: 5%;
}

#linebotton:hover {
  color: #fff;
  opacity: 0.6;
}

/* -------------------------------------------------------------
ジム画像
------------------------------------------------------------- */
#gymimg {
  position: relative;
  top: -8vw;
  z-index: 10;
}

#gymimg div {
  display: flex;
}

#gymimg div img {
  width: 50%;
}

.rogosiro2 {
  position: absolute;
  top: 40%;
  left: 35%;
  width: 30%;
}


/* -------------------------------------------------------------
料金
------------------------------------------------------------- */
.fee {
  width: 90%;
  margin-top: -15%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background-color: white;
  padding: 0.5%;
  padding-bottom: 5vw;
  position: relative;
  z-index: 20;
}

.fee .comtop img {
  width: 10%;
}

.groupsetu {
  width: 90%;
  border: solid 1px #2f4f4f;
  border-radius: 100vw;
  padding: 2%;
  margin-left: 5%;
}

.groupsetu p {
  font-size: 2.5vw;
  text-align: center;
}

.feeimg {
  width: 90%;
  margin: 3vw auto;
  display: block;
}

.fee3 {
  width: 80%;
  margin: 3vw auto;
  display: block;
}

.fee4setu {
  font-size: 3vw;
  text-align: center;
  margin: 5%;
}

.visitor {
  text-align: center;
  margin-top: 10vw;
  margin-bottom: 5vw;
  font-size: 4vw;

}

.kaisubox {
  display: flex;
  width: 80%;
  margin-left: 10%;
}

.kaisuinbox {
  width: 50%;
}

.kaisusetu {
  width: 95%;
  text-align: center;
  border: solid 1px #2f4f4f;
  border-radius: 100vw;
  padding: 2%;
  margin-left: 5%;
  margin-bottom: 5%;
}

.kaisusetu p {
  font-size: 2vw;
}


/* -------------------------------------------------------------
トレーナー紹介
------------------------------------------------------------- */
#trainer {
  background-image: url(../img/trainerhai.png);
  background-size: cover;
  width: 100%;
  position: relative;
  top: -8vw;
  z-index: 10;
  padding-top: 15%;
  padding-bottom: 7%;
  text-align: center;
}

#trainertop {
  width: 80%;
  border: solid 1px white;
  border-radius: 15px;
  padding: 2%;
  margin-left: 10%;
  margin-top: -3%;
}

#trainertop p {
  font-size: 5vw;
  color: white;
  text-align: center;
}

#trainerbox {
  display: flex;
}

.hosi2 {
  width: 2%;
  margin: 0 5%;
}

#trainersetu {
  display: flex;
  justify-content: center;
  margin: 5% -3%;
}

.trainerkaobox {
  width: 50%;
}

#trainerkao {
  width: 100%;
  object-fit: contain;
}

#trainersetu p {
  font-size: 2vw;
  color: white;
  margin-left: 3%;
  text-align: left;
  line-height: 4vw;
}

#planbox {
  background-color: white;
  border-radius: 5vw;
  width: 90%;
  padding: 2%;
  margin: 0 auto 5% auto;
}

#plansetu {
  font-size: 3vw;
}


/* -------------------------------------------------------------
インスタ
------------------------------------------------------------- */
#inst {
  width: 90%;
  margin-top: -15%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background-color: white;
  padding: 0.5%;
  padding-bottom: 5vw;
  position: relative;
  z-index: 20;
}

#instrogo {
  width: 40%;
  margin: 5% 0 0 30%;
}

#inst p {
  text-align: center;
  font-size: 4vw;
  margin: 5% auto 5% auto;
}

#instimg {
  width: 90%;
  margin-left: 5%;
}


/* -------------------------------------------------------------
系列ジム
------------------------------------------------------------- */

#gym {
  background-image: url(../img/gymhai.png);
  background-size: cover;
  width: 100%;
  position: relative;
  top: -8vw;
  z-index: 10;
  padding-top: 15%;
  padding-bottom: 10%;
  text-align: center;
}

#gymbox {
  display: flex;
}

#hosi3 {
  width: 2vw;
  margin: 0 5%;
}

#gymbox2 {
  margin: auto -10%;
}

#maxgymrogo {
  width: 50%;
}

#gym p {
  color: white;
  margin: 3%;
}

#maxgymbotton {
  display: inline-block;
  background-image: linear-gradient(#08EA00 0%, #0E7B09 100%);
  color: #fff;
  width: 80%;
  border-radius: 25vw;
  padding: 3vw;
  text-align: center;
  font-size: 5vw;
  text-decoration: none;
  margin-top: 5%;
}

#maxgymbotton:hover {
  color: #fff;
  opacity: 0.6;
}


/* -------------------------------------------------------------
footer
------------------------------------------------------------- */

footer {
  display: flex;
  flex-flow: column;
}

#footerrogo {
  width: 25%;
  margin: 10% 0 5% 37.5%;
}

#telnam {
  font-size: 10vw;
  text-decoration: none;
  color: black;
  text-align: center;
}

#addr {
  font-size: 3.5vw;
  text-decoration: none;
  color: black;
  text-align: center;
  margin-bottom: 15%;
}

.fee4setu {
  font-size: 3vw;
}



/* -------------------------------------------------------------
レスポンシブ(タブレット) Breakpoints:599px;
------------------------------------------------------------- */
@media screen and (min-width: 599px) {

  .SP_only {
    display: none;
  }

  .PC_only {
    display: block;
  }

  /* -------------------------------------------------------------
header
------------------------------------------------------------- */

  #PCtopimage {
    background-image: none;
  }

  #PC_topimgbox {
    position: relative;
    margin-top: 3%;
  }

  #PC_topimg {
    width: 100%;
    height: 70vw;
    object-fit: cover;
    object-position: 50% 10%;
  }

  #PC_toprogo {
    width: 20%;
    position: absolute;
    left: 40%;
  }

  #PC_topcoment {
    margin: 5%;
    width: 90%;
    background-color: #7E83FF;
  }

  #PC_topcoment img {
    margin: 5% 5% 3% 5%;
    width: 90%;
  }

  .migisita {
    position: fixed;
    left: 2vw;
    bottom: 3%;
    display: flex;
    flex-flow: column;
    z-index: 30;
    transform: translateZ(1px);
  }

  .linebox {
    width: 10vw;
  }

  .linebox img {
    width: 100%;
  }

  .pagetop {
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 25;
  }

  .pagetop img {
    width: 70%;
    margin-left: 0;
    margin-top: 0;
  }

  #topcomeabox {
    width: 100%;
    justify-content: center;
  }

  .hosi {
    width: 2%;
    margin: 10% 8%;
  }

  #topcomeabox #topcomebbox p {
    font-size: 2.5vw;
    margin-top: 10%;
  }

  /* -------------------------------------------------------------
器具
------------------------------------------------------------- */

  .comtop {
    width: 100%;
    padding: 1%;
  }

  .comtop img {
    width: 5%;
  }

  .comtop p {
    font-size: 3vw;
    margin-left: 10%;
  }



  #PC_kigubox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2%;
  }

  .kiguimg {
    width: 45%;
    margin: auto;
  }

  #PC_kigubox img {
    width: 45%;
    margin: 2%;
  }

  .kiguwaku {
    margin-top: 0;
  }

  #PC_kigutai {
    margin-top: 3vw;
    width: 100% !important;
  }

  #kigucome {
    font-size: 1.5vw;
  }

  #PC_trainingimg {
    top: 0;
    display: flex;
  }

  .PC_trainingimgbox {
    width: 35%;
    margin: 0 -1%;
  }

  #PC_trainingimg .PC_trainingimgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



  /* -------------------------------------------------------------
時間
------------------------------------------------------------- */
  #time {
    margin-top: 0;
    padding-bottom: 0;
  }

  .PC_timecome {
    text-align: center;
    font-size: 2vw;
  }

  .timecombox {
    display: flex;
    justify-content: center;
  }

  .timeyokoline {
    background-color: #8B8BFF;
    width: 1%;
    border-radius: 100px;
  }

  .timesetubox {
    width: 70%;
    margin: auto 15%;
  }

  .timesetubox p {
    font-size: 3vw;
  }

  .comtitle {
    margin-top: 5%;
  }

  .comtitle .triangle1 {
    background: #8B8BFF;
    height: calc(tan(60deg) * 3vw / 2);
    width: 3vw;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    margin-right: 3vw;
  }

  .comtitle .triangle2 {
    background: #8B8BFF;
    height: calc(tan(60deg) * 3vw / 2);
    width: 3vw;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    margin-left: 3vw;
  }

  .timesetumeibox {
    width: 50%;
  }

  .yokosentext {
    font-size: 2vw;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .yokosen {
    font-size: 2.2vw;
  }

  .yokosensitabox {
    content: '';
    background-color: #0092E5;
    height: 1px;
    width: 80%;
    display: inline-block;
    margin-left: 10%;
  }

  #linebotton {
    width: 60%;
    font-size: 3vw;
    margin-left: 20%;
  }

  /* -------------------------------------------------------------
gymimg
------------------------------------------------------------- */

  #gymimg {
    top: 0;
    margin-top: 5%;
  }

  #gymimg div img {
    width: 40%;
    margin: auto;
  }

  .rogosiro2 {
    display: none;
  }

  /* -------------------------------------------------------------
fee
------------------------------------------------------------- */

  .fee {
    margin-top: 0;
  }

  .fee .comtop {
    margin-bottom: -1%;
  }

  .fee .comtop img {
    width: 5%;
  }

  .feesetubox {
    display: flex;
    justify-content: center;
  }

  .fee .comtitle {
    margin-top: 15%;
  }

  .fee .comtitle p {
    font-size: 2.5vw;
  }

  .fee .feecombox {
    width: 50%;
  }

  .fee4setu {
    font-size: 1.2vw;
  }

  .groupsetu p {
    font-size: 1.5vw;
  }

  .visitor {
    font-size: 2vw;
    margin-top: 15%;
    margin-bottom: 0;
  }

  .fee3 {
    margin-bottom: 5%;
  }

  .kaisubox {
    display: flex;
    width: 100%;
  }

  .kaisuinbox {
    width: 50%;
  }

  .kaisusetu {
    width: 95%;
    text-align: center;
    border: solid 1px #2f4f4f;
    border-radius: 100vw;
    padding: 2%;
    margin-left: 5%;
    margin-bottom: 5%;
  }

  .kaisusetu p {
    font-size: 1.3vw;
  }

  /* -------------------------------------------------------------
  トレーナー紹介
------------------------------------------------------------- */

  #trainer {
    top: 0;
    background-image: none;
    padding-top: 5%;
    padding-bottom: 0;
  }

  #trainertop {
    background-color: #0092E5;
    border-color: #0092E5;
    width: 90%;
    margin-left: 5%;
    padding: 1%;
  }

  #trainertop p {
    font-size: 3vw;
  }

  #trainersetu {
    width: 100%;
    justify-content: center;
  }

  .trainerkaobox {
    width: 50%;
    padding: 3%;
    border-radius: 15%;
    background-image: url(../img/trainerhai.png);
    background-size: cover;
  }

  #trainerkao {
    width: 100%;
    margin-right: 5vw;
  }

  #trainersetu p {
    color: #000;
    font-size: 2vw;
    line-height: 3.5vw;
  }


  #planbox {
    width: 90%;
    border: solid 1px #2f4f4f;
    border-radius: 1vw;
    padding: 1%;
    margin-left: 5%;
  }

  #plansetu {
    font-size: 2vw;
  }

  /* -------------------------------------------------------------
  インスタ
------------------------------------------------------------- */
  #inst {
    margin-top: 0;
    text-align: center;
  }

  #instrogo {
    width: 20%;
    margin: 0;
  }

  #inst p {
    font-size: 1.5vw;
    margin: 2% auto 2% auto;
  }

  #inst p br {
    display: none;
  }

  #instimg {
    width: 50%;
  }



  /* -------------------------------------------------------------
  系列ジムのご紹介
------------------------------------------------------------- */

  #gym {
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  #gymbox {
    width: 100%;
    justify-content: center;

  }

  #gymbox2 {
    width: 90%;
  }

  #gymbox2 p {
    font-size: 2vw;
  }


  /* -------------------------------------------------------------
  footer
------------------------------------------------------------- */
  footer {
    justify-content: center;
  }



}

/*--------------------------------------------------------------
レスポンシブ(PC) Breakpoints:1024px;
--------------------------------------------------------------*/
@media screen and (min-width: 1024px) {



  /* -------------------------------------------------------------
header
------------------------------------------------------------- */


  /* -------------------------------------------------------------
トップコメント
------------------------------------------------------------- */


  /* -------------------------------------------------------------
footer
------------------------------------------------------------- */

}