h1 {font-family: "Oswald", sans-serif; font-size: 64px; color: #333; margin-top: 
    20px; display: flex; justify-content: center; text-transform: uppercase; letter-spacing: 10px;}
.header-content{position: relative; display: flex;}
.header-content h1{position: absolute; left: 50%; transform: translateX(-50%);}
.header-content a{z-index: 10; top: 45px; right: 0; position: absolute; font-weight: 500;
   font-family: "Noto Sans JP",
     sans-serif; font-size: 24px; color: #333; padding: 10px 10px; 
     border-radius: 100px; border-color: #333; border-style: solid; border-width:
       1px; transition: transform 0.1s ease; text-decoration: none; position: fixed; 
       background-color: #FFFFFF; margin-right: 20px;}
       .header-content a:hover{transform: scale(1.05);}
.main-image {width: 100%; height: auto; margin-top: 160px;}
.title-p{top: 100px; font-family: "Noto Sans JP", sans-serif; font-size: 27px; 
    color:#000000; text-align: center; width: 100%; font-weight: bold;
    letter-spacing: 5px;}
.hero{position: relative; width: 100%;}
.oval{position: absolute;
  top: 50%;
  left: 17%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 250px;
  background-color: #d2ff08;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;}
h2 {font-family: "Noto Sans JP", sans-serif; font-size: 48px; color: #000;
margin-top: 30px; display: flex; justify-content: center; letter-spacing: 5px; font-weight: bold;
}
h3{font-family: "Noto Sans JP", sans-serif; font-size: 30px; color: #000;
margin-top: 20px; display: flex; justify-content: center; letter-spacing: 5px; font-weight: regular;}
ul{justify-content: center; display: flex; margin-top: 20px; background-color: #42DAC8;
    height:70px; align-items: center; border: 1px solid #000; padding: 10px 0;}
li{justify-content: space-between; display: flex; margin-right: 20px; 
    font-family: "Noto Sans JP", sans-serif; font-size: 24px; color: #000;
}   
.gym-pics{display: flex; justify-content: center; margin-top: 20px; justify-content: space-between; padding: 0 20px;}
.A{display: flex; justify-content: center; font-family: "Noto Sans JP", sans-serif; 
    font-size: 30px; margin-top: 20px; font-weight: regular; letter-spacing: 2px;}
.machine-small{display: flex; justify-content: center; gap: 210px; border: 1px solid #000; border-radius: 100px;
     padding: 10px 10px; transition: transform 0.3s ease;
      background-color: #42DAC8; margin-top: 20px; width: 60%; margin: auto;}
.machines{display: flex; justify-content: center;
    gap: 200px; margin: 20px; padding: 0 70px; letter-spacing: 2px;}
.detail-a{display: flex; justify-content: center;  font-family: "Noto Sans JP", sans-serif;
     font-size: 24px; font-weight: 400; border:#000 solid 1px;
      border-radius: 100px; padding: 10px 10px; transition: transform 0.3s ease; background-color: #42DAC8; 
      width: 100px; text-align: center; text-decoration: none; color: #000;}
.detail-a:hover{transform: scale(1.05);}
.name{margin-left: 80px; text-align: center; font-family: "Noto Sans JP", sans-serif;
     font-size: 24px; color: #000;
    margin-top: 20px; letter-spacing: 2px;}
.detail{display: flex; justify-content: center; margin-top: 20px;}
.flow{display: flex; justify-content: center; 
    border: 1px solid #000; border-radius: 100px; padding: 10px 10px; transition:
     transform 0.3s ease; background-color: #42DAC8; text-decoration: none; color: 
     #000; width: 50%; text-align: center; margin: 40px auto;}
.flow1{display: flex; justify-content: center;
    border: 1px solid #000; border-radius: 100px; padding: 10px 10px; transition:
     transform 0.3s ease; background-color: #42DAC8; text-decoration: none; color:
      #000; width: 50%; text-align: center; margin: 40px auto;}
.arrow{
    width: 40px;
    height: 60px;
    margin: 0px auto;
    background-color: #333;
    clip-path: polygon(35% 0, 65% 0, 65% 55%, 100% 55%, 50% 100%, 0 55%, 35% 55%);
}
.info-details{flex: 1;
    margin: 0; margin-left: 30px;
    text-align: left;}
.info{width: 200px;
    margin: 0;
    text-align: left; justify-content: flex-start; margin-left: 100px;
}
.time{display: flex;
    width: 70%;
    margin: 20px auto;
    align-items: flex-start; align-items: center;
}
.address{display: flex;
    width: 70%;
    margin: 20px auto;
    align-items: flex-start; align-items: center;
}
.number{display: flex;
    width: 70%;
    margin: 20px auto;
    align-items: flex-start; align-items: center;
}
.guide{display: flex;
    width: 70%;
    margin: 20px auto;
    align-items: flex-start; align-items: center;
}
.kome{justify-content: center; display: flex; align-items: center; 
    text-align: center; width: 80%; margin: auto;}
.intro{display: flex; flex-direction: column !important; justify-content: center; align-items: center !important;}
.personal-trainers{display: flex; justify-content: space-around;}
.trainer-pic{width: 300px;}
.questions-faq{position: relative; display: flex; flex-direction: column; align-items: center;}
.Q&A{position: absolute; left: 200px;}
.faq{margin-bottom: 50px; margin-left: 100px;}
.question-p{width: 300px; text-align: left;}
nav{display: flex !important; justify-content: center !important; gap: 20px; 
    align-items: center; margin-top: 20px; margin-bottom: 20px;}
details{cursor: pointer;}
.join-item{align-items: center;}
.join{left: 200px;}
.join-div{display: flex; justify-content: center;}
.v{color: red; font-weight: bold;}
.join-text{text-align: center; font-size: 20px;}
.join-order{display: flex; flex-direction: column; gap: 10px; margin-top: 20px; 
    justify-content: center;
    align-items: center; }
.join1{display: flex; justify-content: center; gap: 20px; margin-top: 20px; margin-right: 450px;}
.join-imp{border: 1px solid #000; padding: 20px; margin-top: 20px;
    width: 50%; text-align: center; border-radius: 10px; background-color: #c5c1e0;
     display: flex;
     justify-content: center; margin: auto; text-align: center; flex-direction: column;
      margin-bottom: 20px;}
.form{display: flex; flex-direction: column; 
    margin-top: 90px; justify-content: center; font-weight: bold; font-family: 
    "Noto Sans JP", sans-serif; font-size: 24px; gap: 20px;
    align-items: center; border: 1px solid #000; padding: 20px; width: 50%; 
    border-radius: 10px; background-color: #f5f2f0; margin: auto;}
li{list-style-type: decimal; 
    margin-left: 20px;  display:list-item;}
.machine-list{display: flex; justify-content: center;  padding: 0 90px; gap: 90px;
    margin-top: 20px; flex-wrap: wrap; text-align: center; margin-bottom: 40px;}
.machine-pics{display: flex; justify-content: center; gap: 20px; margin-top: 40px; 
    text-align: center; margin-bottom: 70px;}
.name-of-machine{gap:80px;}
.question-item{display: flex; justify-content: center; gap: 20px; margin-top: 20px;
     font-weight: bold; text-align: center; font-family: "Noto Sans JP", sans-serif; font-size: 24px; color: #000;}
.question-div{display: flex; flex-direction: column; 
    justify-content: center; gap: 20px; margin-top: 20px; border: 1px solid #000; padding: 20px; width: 60%; 
    border-radius: 10px; background-color: #9edd7a; margin: auto;}
.question-answer{display: flex; justify-content: center; gap: 20px; margin-top: 20px;
     font-family: "Noto Sans JP", sans-serif; font-size: 20px;}
.inquiry{display: flex; justify-content: center; gap: 20px; margin-top: 20px;
     font-family: "Noto Sans JP", sans-serif; font-size: 20px; font-weight: bold; color: #2bb41f;}
.inquiry-form{display: flex; flex-direction: column; justify-content: center; 
    text-align: center;
    gap: 20px; margin-top: 20px; border: 1px solid #000; padding: 20px; width: 30%; 
    border-radius: 10px; background-color: #a8aeb6; margin: auto; margin-top: 40px;}
form{display: flex; flex-direction: column; justify-content: center; gap: 20px; margin-top: 20px;
width: 40%; margin: auto;}
.form-input{height: 40px; padding: 5px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc;}
.form-textarea{height: 100px; padding: 5px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc;}
.form-submit{height: 40px; padding: 5px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc;
background-color: #42DAC8; cursor: pointer; transition: background-color 0.3s;}
.inquiry-p{font-family: "Noto Sans JP", sans-serif;
     font-size: 24px; color: #000; font-weight: bold;}
.contact-info{display: flex; flex-direction: column; 
    justify-content: center; margin: 20px auto; text-align: center;
border: 1px solid #000; padding: 20px; width: 30%;}
.store-p{border: 1px solid #000;padding-bottom: 40px; width: 70%; text-align: center; 
    border-radius: 10px; background-color: #f5f2f0; margin: auto;
}
html{scroll-behavior: smooth;}

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

.hamburger,
.nav{
  display: none !important;
}


.intro2{display: flex; flex-direction: row; height:
     auto; width: auto; gap: 200px; text-align: center; align-items: center;}

.f {display: flex; flex-direction: row; align-items: center; gap:20px}

.form-item{display: contents;}


.g{display: contents}



.reserve-container {
  text-align: center;
  margin-top: 150px !important;
}


@media (max-width: 768px) {
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }






.reserve-container {
  text-align: center;
  margin-top: -50px !important;
}


html, body {
  overflow-x: hidden;
  width: 100%;
}
body {display: flex; flex-direction: column; 
     margin: auto;}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}







.sub-header + * {
  height: auto !important;
  margin-top: 0 !important;
 padding-top: 0px !important;

}


.join-page .sub-header + * {
  padding-top: 60px !important;
}

.header-content h1 {
  position: static !important;
  transform: none !important;
  margin: 0;
 font-size: 20px;        /* スマホに収まるよう少しサイズ変更 */
  letter-spacing: 2px;    /* 文字間隔を調整 */
  line-height: 1;/* スマホ用にサイズを小さく調整 */
}


.sub-header .header-content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
}

.sub-header h1.join {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  white-space: nowrap;
}
.sub-header .header-content a {
  margin-left: auto !important;
  position: relative !important;
  z-index: 2;
}


/* 4. ハンバーガーボタンがあれば前面へ */
.sub-header .hamburger {
  position: relative !important;
  z-index: 2;
}





.nav.active {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 9999;
}



.hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 20px !important;
  z-index: 99999;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0; height: 16px !important;/* 線が上下中央に収まる高さに調整 */
  margin: 0;
  }

.hamburger span{display: block; width: 20px; background: rgb(31, 25, 25); height: 2px;            /* 線の太さをスッキリ調整 */
  border-radius: 1px;
}

.nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
  }



.header-content a{width: auto; position: static !important; font-size: 13px;        /* ボタンの文字サイズ調整 */
  padding: 6px 14px;      /* ボタン内の余白を微調整 */
  line-height: 1;         /* 高さを他の要素と揃える */
  margin: 0 !important;
font-size: 15px; padding: 5px 5px;}

    .header-content{display: flex; justify-content: space-between; align-items: center; position: relative; 
  padding: 12px 16px;}










    li{font-size: 5px;}
.main-image {width: 100%; height: 200px; object-fit: cover; position: relative;
}
h1{font-size: 24px; text-align: center; height: 20px;}
   .oval{width: 30%; height: 17%; 
    top: 200px;}
   h2{font-size: 20px; margin-top: 10px;}
   h3{font-size: 16px; margin-top: 10px;}
.title-p{width: 100%; font-size: 9px;
height: 20px; letter-spacing: 0px; 
position: absolute; top: 3px; text-align: center;}

span{font-size: 12px;}
ul{font-size: 10px;}
.hero{margin-top: -150px; position: relative;}
.A{font-size: 10px; display: flex; justify-content: center; 
    margin-top: 20px; font-weight: regular; letter-spacing: 2px;}

.gym-pics{display: flex;
    flex-direction: column; /* 縦並び */
  margin-top: 0px !important;/* 中央に寄せる */
    width: 100%;    gap: 0px;
  }
.pic{
    width: 120px;       
    height: 100px;     
    object-fit: cover;     
    flex-shrink: 0;  display: block; 
  }

.g{
    display: flex !important; height: auto; position: relative;
    width: 100% !important; 
  * はみ出たものを隠さない（消えるのを防ぐ） */

  }
.text-group{/* 残りの横幅をすべて使う */
    display: flex !important; position: absolute; left: 115px;
 flex-direction: column; gap: 0 !important; text-align: center;}


.machine-small {
    display: flex !important;
    gap: 10px !important; width: 60%; ;
  }

  .machine-small .A {
    font-size: 11px !important;
    font-weight: bold !important;
    margin: 0 !important;
  }

  .machines {
    display: flex !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .machines .name {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 !important; width: 60px;
  }

.store-p,
  .store-p * {
    writing-mode: horizontal-tb !important; /* 横書きに強制変更 */
    direction: ltr !important;               /* 文字を左から右へ */
    text-align: left !important;            /* 全て左寄せ */ 
  }

  /* ② 全体の枠組みの幅調整 */
  .store-p {
    width: 100% !important;
    padding: 30px 15px !important;
    box-sizing: border-box !important;
  }

  /* ③ 各項目（営業時間・住所・電話番号・駐車場）を横並びの行にする */
  .time,
  .address,
  .number,
  .guide {
    display: flex !important;
    flex-direction: row !important;      /* 見出しと文章を横に並べる */
    align-items: flex-start !important;  /* 上揃え */
    justify-content: flex-start !important; /* 左詰め */
    margin-bottom: 20px !important;     /* 行ごとのすき間 */
    width: 100% !important;
  }

  /* ④ 見出し部分（「営業時間」「住所」などの文字）の幅を揃える */
  .store-p .info {
    width: 110px !important;    /* 見出しの幅を固定して右側の文章のスタート位置を整える */
    flex-shrink: 0 !important;  /* 幅が潰れるのを防ぐ */
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: bold !important; 
  }

  /* ⑤ 右側の文章部分 */
  .store-p .info-details {
    flex-grow: 1 !important;
    font-size: 14px !important;
    line-height: 1.6 !important; /* 行間を広げて見やすくする */ margin-left: 10px;
  }

  /* ⑥ タイトル（FITNESS GYM）の調整 */
  .small-title {
    margin-bottom: 25px !important;
    font-size: 18px !important;
  }
.kome{font-size: 10px; gap: 5px;}

.intro2{display: flex; flex-direction: column; gap: 0px !important;}

.intro{display: flex !important; flex-direction: column !important; text-align: center !important;}

.text-personal{width: 60%; height: auto; margin: 10px 40px; margin-bottom: 20px;}

.machine-pics{display: flex; height: 90%; flex-direction: column; margin: auto;
     width: 90%; }
.name-of-machine{margin: -10px -10px;}

.m{display: flex; width: 100%; height: 120px; object-fit: cover; flex-shrink: 0;
align-items: center; justify-content: center; 
}

.machine-name{margin: auto;}


.question-div{width: 90%; align-items: center; text-align: center;}

.inquiry-form{display: flex; width: 70%; align-items: center; flex-direction: column; margin: auto;}

input{width: 170px; box-sizing: border-box;}

.contact-info{width: 70%; text-align: center;}

form{display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; margin: auto;}

.form-textarea{width: 200px; box-sizing: border-box;
}

.form-item{display: flex;
  flex-direction: column; /* 上にラベル、下に入力欄 */
  align-items: center;     /* 入力欄とラベルを中央揃え */
  width: 100%;
  margin-bottom: 15px;}


nav {
    flex-direction: column !important;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 15px;
  }



.footer-text {
  text-align: center;
  color: #666;
  font-size: 14px;
}


.join-text{width: 80%; font-size: 13px;}

.join-order{display: flex; align-items: center; justify-content: center; margin: auto; padding-left: 0px;}


.join-order li{font-size: 12px; margin-bottom: 15px;}


.join-imp{display: flex; flex-direction: column; text-align: center; align-items: center; box-sizing: border-box;}


.join1{margin: auto;}


.form{text-align: center; margin-bottom: 20px;}
















}