html {
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  color: #212121;
  background-color: #ffffff;
  line-height: 1.8;
  font-optical-sizing: auto;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


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

a {
  text-decoration: none;
  color: #212121;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.inner {
  width: 90%;
  margin: 0 auto;
}

/* 共通 */
#wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

header,
#top_main,
footer {
  width: 100%;
}

header {
  line-height: 20%;
}

header #mainlogo {
  width: 200px;
  margin: 35px;
}




/* フェードインのCSS */
.fadeIn,
.fadeIn_left,
.fadeIn_bottom {
  transition: 0.2s;
  opacity: 0;

}

.fadeIn.animated,
.fadeIn_left.animated,
.fadeIn_bottom.animated {
  opacity: 1;
}



/* ハンバーガーメニュークリック前 */
/* クリックエリアと位置を指定 ---------------------- */
.btnHamburger {
  position: absolute;
  top: 35px;
  right: 2%;
  width: 28px;
  /* クリックエリアの横幅*/
  height: 20px;
  /* クリックエリアの高さ*/
  z-index: 15000;
  transform: translate(-50%, -50%);

}

/* 3本線の1本ごとに共通するスタイルを指定 ---------------------- */
.btnHamburger .line {
  position: absolute;
  top: 0;
  left: -20px;
  display: block;
  /* width: 25px; */
  width: 140%;
  /* 横幅 */
  height: 3px;
  /* 1本辺りの高さ */
  background: #fff;
  /* 線の色 */
  /* 適用するプロパティ、変化する時間、変化する速度 */
  transition: 0.3s;
  z-index: 1000;
}


.btnHamburger .line_01 {
  top: 28px;
}

.btnHamburger .line_02 {
  top: 38px;
}

.btnHamburger .line_03 {
  top: 48px;
}

.hum_bg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #0099A9;
  top: 50%;
  right: 50%;
  transform: translate(-50%);
}

/* #coverlayerクリック前 */
#coverlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  background: #0099A9;
  opacity: 0;
  height: 100vh;
  /* transition: 0.2s; */


}




/* navクリック前 */
nav {
  position: absolute;
  top: 145px;
  right: -35%;
  visibility: hidden;

}

nav li a {
  color: #fff;
  padding-bottom: 10px;
  display: block;
  font-size: 1.4rem;
  -webkit-text-size-adjust: 100%;
  font-weight: 500;
  line-height: 1.5;
}

/* snsbtnクリック前 */
nav ul.sns_btn {
  display: flex;
  width: 240px;
  justify-content: space-between;
  margin-bottom: 70px;
  visibility: hidden;

}






/* ハンバーガーメニュークリック後 */
/* 最上部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_01 {
  top: 38px;
  /* 上から2番目の線の位置に変更 */
  background: #fff;
  /* 線を45度回転 */
  transform: rotate(45deg);
}

/* 上から2番目の線のスタイル ---------------------- */
.btnHamburger.is-active .line_02 {
  opacity: 0;
  /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_03 {
  top: 38px;
  /* 上から2番目の線の位置に変更 */
  background: #fff;
  /* 線を135度回転 */
  transform: rotate(135deg);
}

/* #coverlayerクリック後 */
#coverlayer.is-active {
  width: 100%;
  opacity: 1;
  padding: 40px 28px;

}

/* navクリック後 */
nav.is-active {
  left: 35px;
  /* opacity: 1; */
  visibility: visible;

}

/* headerのSNSボタンクリック後 */
nav ul.sns_btn.is-active {
  visibility: visible;

}

nav ul.sns_btn li {
  width: 20px;
}

#modal nav #header_logo {
  width: 300px;
  margin-bottom: 30px;
}














/* 詳細ボタンのcss */
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.9rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border {
  border: 2px solid #fff;
  border-radius: 50px;
  color: #fff;
  position: absolute;
  right: 10%;
  font-weight: 600;
  transition: 0.5s;

}




/* 予約ラインボタン */
.btn--green,
a.btn--green {
  color: #fff;
  background-color: #06C755;
  display: block;
  width: 300px;
  text-align: left;
  font-size: 4.545vw;
  /* margin-bottom: 20px; */
}

.btn--green,
a.btn--green:first-child {
  margin-bottom: 15px;
}

.btn--green:hover,
a.btn--green:hover {
  color: #fff;
  background: #05a246;
}

.btn--radius,
a.btn--radius,
button.btn--radius {
  border-radius: 100vh;
}


a.btn--top {
  width: 80%;
  padding: 0 2em 0 2em;
  color: #212121;
  background:#ffd814;
  /* border: 2px solid #212121; */

  border-radius: 3em;
  font-weight: 500;
  line-height: 3;
  position: fixed;
  text-align:left;
  transition: all 0.4s ease-in-out;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  transition: all 0.3s;

}

a.btn--top {
  width: 310px;


}

a.btn--top:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #212121;
  /* 矢印の色 */
  border-right: 2px solid #212121;
  /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 52%;
  right: 25px;
  margin-top: -6px;
}

a.btn--top:hover{
  color: #212121;
  background: #fff;
  border: 2px solid #212121;
  
}
a.btn--top:hover::before {
  border-top: 2px solid #212121;   /* 矢印の上線 */
  border-right: 2px solid #212121; /* 矢印の右線 */
}




/* 背景イラスト */

.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}



















header {
  /* background: #fff; */
  z-index: 10;
  position: fixed;
}


#top_main {
  background-size: cover;
  position: relative;
  /* padding-top: 40px; */
}



#top_main ul li img {
  filter: brightness(0.8);
}

#top_main h2 {
  font-size: 2rem;
  color: #fff;
  letter-spacing: 0.05em;
  padding-left: 1em;
  white-space: nowrap;
  position: absolute;
  bottom: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.txt {
  display: flex;
}

.txt p {
  transform: translateY(2em);
  animation: textanimation 1s both;
}

/* 1文字目 */
.txt p:nth-child(1) {
  animation-delay: 0.2s
}

/* 2文字目 */
.txt p:nth-child(2) {
  animation-delay: 0.3s
}

/* 3文字目 */
.txt p:nth-child(3) {
  animation-delay: 0.4s
}

/* 4文字目 */
.txt p:nth-child(4) {
  animation-delay: 0.5s
}

/* 5文字目 */
.txt p:nth-child(5) {
  animation-delay: 0.6s
}

/* 6文字目 */
.txt p:nth-child(6) {
  animation-delay: 0.7s
}

/* 7文字目 */
.txt p:nth-child(7) {
  animation-delay: 0.8s
}

/* 8文字目 */
.txt p:nth-child(8) {
  animation-delay: 0.9s
}

/* 9文字目 */
.txt p:nth-child(9) {
  animation-delay: 1s
}

/* 10文字目 */
.txt p:nth-child(10) {
  animation-delay: 1.1s
}

/* 11文字目 */
.txt p:nth-child(11) {
  animation-delay: 1.2s
}

/* 12文字目 */
.txt p:nth-child(12) {
  animation-delay: 1.2s
}

/* 13文字目 */
.txt p:nth-child(13) {
  animation-delay: 1.4s
}

@keyframes textanimation {
  0% {
    transform: translateY(2em);
    opacity: 0;
  }

  50% {
    transform: translateY(-1em);
    opacity: 1;
  }


  100% {
    transform: translateY(0);

  }
}








#top_main #logo_white {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  animation: logoanimation 1s both;
}

@keyframes logoanimation {
  0% {

    opacity: 0;
  }



  100% {
    opacity: 1;


  }
}





main article {
  padding-top: 45px;
}

main article h3 {
  font-size: 5rem;
  color: #0099A9;
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: bold;
  line-height: 1.4;
}

main article small {
  font-size: 1.4rem;
  color: #0099A9;
}

main article p {
  line-height: 2;
  font-weight: 500;

}


/* #aboutus(What's KOROMO?) */

#aboutus {
  margin-bottom: 90px;
}

.aboutus_erea {
  margin-bottom: 40px;
}



#aboutus_title {
  margin-bottom: 60px;
}

#aboutus_item .aboutus_title {
  font-weight: 500;
  border-bottom: 1px solid #212121;
  font-size: 1.6rem;
}

#aboutus_item h4 {
  margin: 55px 0 40px;
  font-weight: 500;
  border-bottom: 1px solid #212121;

}

#aboutus_item h5 {
  font-size: 2.4rem;
  font-weight: 600;


  color: #0099A9;

}




/* 私たちができること */
#support_item h4 {
  margin: 55px 0 40px;
  font-weight: 500;
  font-size: 2.2rem;

}




/* vision */
#vision .inner h4 {
  margin: 60px 0;
  font-weight: 500;
  line-height: 2;

}

#vision {
  position: relative;
  margin-bottom: 120%;
}

#vision .circle {
  width: 100%;
  position: absolute;
  right: -6%;
  /* bottom: -128%; */
  bottom: -155%;
}

/* 予約エリア */
.booking {
  background-color: #e9e9e9;
  height: 425px;
  position: relative;
  background-image: url(../images/page1/photo/booking@1320tate.jpg);
  color: #fff;
  background-size: cover;
}

.booking .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.booking h3 {
  font-size: 6rem;
  font-weight: 700;
  line-height: 0.8;
  font-family: "Josefin Sans", serif;
  margin-top: 25px;
}

.booking h4 {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.booking .inner p {
  font-size: 1.4rem;
  margin-bottom: 28px;
}






/* feature */
#feature .feature_inner {
  /* margin-bottom: 60px; */
  /* padding-top: 100px; */
  padding-top: 0px;
}

#feature section {
  background-color: #f9f9f9;
  padding: 40px 0;
  margin: 30px 0 30px;
}


#feature .feature_item h4 {
  font-size: 2.7rem;
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 600;
}

#feature .feature_item p {
  margin-bottom: 25px;
  font-weight: 500;

}

#feature .feature_item img {
  border-radius: 0 30px 0 30px;

}

#feature .feature_img img {
  border-radius: 30px 0 30px 0;
  margin-top: 30px;
}






/* program */
#program .inner h4 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 60px 0;

}

#program section {
  margin: 20px;
  padding: 40px 0 70px;
  background-color: #1f867c;
  color: #fff;
  border-radius: 0 30px 0 30px;
}

.program_inner .program_text {
  font-size: 1.6rem;
}

#program section h5 {
  font-size: 2.1rem;
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 600;
}

#program section h5 {
  font-size: 2.4rem;
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 600;
}

.inner p.target {
  margin-bottom: 70px;
  font-weight: 400;
}

#program .inner figure {
  margin-bottom: 20px;
}

#program .inner figure img {
  border-radius: 0 30px 0 30px;
  opacity: 0.7;
  display: block;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);

}

/* プログラムの画像を触るとふわっと大きくなる */
#program section figure img:hover {
  transform: scale(1.05);
}






/* 人のアイコン */
.dli-user {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  padding-right: 10px;
}

.dli-user::before,
.dli-user::after {
  content: '';
  display: block;
  margin: 0 auto;
  border: 0.2em solid currentColor;
  box-sizing: border-box;
}

.dli-user::before {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-bottom: 0.05em;
}

.dli-user::after {
  width: 1em;
  height: 0.4em;
  border-bottom: 0;
  border-radius: 50% / 100% 100% 0 0;
}

.program_text {
  margin-bottom: 30px;
}








/* staff */
article#staff {
  margin-top: 100px;
}

#staff .inner {
  margin-bottom: 50px;
}

#staff figure img {
  margin: 60px 0 30px;
  border-radius: 0 30px 0 30px;

}

#staff #staff_item h4 {
  font-size: 2.3rem;
  font-weight: 500;
}

#staff #staff_item h5 {
  font-weight: 2.1rem;
  font-weight: 600;
  margin: 5px 0 30px;
  font-size: 2.6rem;
}

#staff #staff_item small {
  color: #ccc;
  font-weight: bold;
}

#staff_item p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

#staff_item .box{
  font-weight: 400;
  font-size: 1.2rem;
}

.staff_desc {
  font-weight: 600;
  font-size: 1.6rem;

}

#staff_item p span {
  background-color: rgba(33.203, 255, 0, 0.5);
}





/* スタッフスライドショー */
#staff .wrap {
  display: flex;
  align-items: center;
  /* height: 340px; */
  margin-bottom: 100px;
}

.slideshow {
  display: flex;
  -webkit-animation: loop-slide 35s infinite linear 1s both;
  animation: loop-slide 35s infinite linear 1s both;
}

.slideshow .content_wrap {
  width: 300px;
}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}






/* よくある質問 */
.faq {
  margin: 60px 0 90px;
}

.qa-7 {
  /* max-width: 500px; */
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
  background-color: #fff;

}

.qa-7 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.6rem;
}

.qa-7 summary::before,
.qa-7 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-7 summary::before {
  color: #333333b3;
  content: "Q";
  font-size: 1.4rem;
}

.qa-7 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 2px solid #333333b3;
  border-right: 2px solid #333333b3;
  content: '';
  transition: transform .5s;
  font-size: 1.4rem;
}

.qa-7[open] summary::after {
  transform: rotate(225deg);
}

.qa-7 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333;
  transition: transform .5s, opacity .5s;
  font-size: 1.6rem;
}

.qa-7[open] p {
  transform: none;
  opacity: 1;
}

.qa-7 p::before {
  color: #333333b3;
  line-height: 1.2;
  content: "A";
}







/* アクセス */
#map {
  margin-bottom: 15px;
}

#map section {
  margin: 60px 0;
}

#access_item {
  margin-top: 30px;
}

#access_item dl dt {
  font-weight: 500;
}

#access_item dl dd {
  margin-bottom: 35px;
  font-size: 1.4rem;
}





/* footer */
footer {
  background: #0099A9;
  padding: 100px 28px 200px;
  position: relative;

}

footer .sns_btn {
  display: flex;
  width: 240px;
  justify-content: space-between;
  margin-bottom: 80px;
}

footer .sns_btn li {
  width: 20px;
}

footer .footer_logo {
  width: 240px;
  margin-bottom: 60px;
}

footer .footer_nav {
  margin-bottom: 50px;
}

footer .footer_nav li a {
  color: #fff;
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 7px;
}

footer small {
  font-size: 0.8rem;
  color: #fff;
  padding-left: 10px;
}





/* トップへ戻るボタン */
.pagetop {
  position: fixed;
  bottom: 130px;
  right: 20px;
  display: none;
  background-color: #212121;
  color: white;
  font-size: 16px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  margin: 0 0 20px;

}

.pagetop a {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.pagetop::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(-45deg);
  margin-bottom: -11px;
  background-color: transparent;
}

.pagetop a {
  font-size: 2rem;
  color: #fff;

}



/* スクロールすると下からふわっと出現 */
.fadein {
  /* 30px下げる */
  transform: translateY(60px);
  /* 要素を透明にする */
  opacity: 0;
  /* 2秒かけて、変化させる */
  transition: transform 1s, opacity 1s;
}

.fadein.show {
  transform: translateY(0);
  opacity: 1;
}





/* お問い合わせフォームのcss */
input,
textarea {
  margin: 0;
  background: none;
  outline: none;
  padding: 15px 10px 10px;
  width: 100%;
  height: 3em;
  display: inline-block;
  border-radius: 2px;
  width: 100%;
  border: 1px solid #cecece;
}

textarea {
  height: 100px;
}

#contact .inner h3 {
  font-size: 2.4rem;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
  border-bottom: 1px solid #212121;
  padding-top: 110px;
}


#contact dl {
  margin: 60px 0;
}

#contact dl dt {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 5px;
}

#contact dl dd {
  margin-bottom: 30px;

}

#contact .inner section h4 {
  margin: 80px 0 50px;

}

/* 郵便番号の文字入力数制限 */
.size-input-zip3 {
  width: 4em;
}

.size-input-zip4 {
  width: 5em;
}

/* 送信ボタン */
.submit_button {
  background-color: #212121;
  padding: 12px 45px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: .5s;
  transition: .5s;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  color: #fff;
  height: 4em;

}


.submit_button:hover {
  background: #fff;
  color: #212121;
  border: 1px solid #212121;

}

.submit_button:last-child {
  margin-bottom: 90px;
}

/* エラーになった時の色 */
.error {
  color: #f00;
}












/* --------------下層ページ①と②の共通CSS------------------ */


.mainprogram,
.secondprogram,
.thirdprogram {
  padding-top: 0;
}

main .mainprogram h2,
main .secondprogram h2 {
  font-size: 14vw;
  position: absolute;
  bottom: 85px;
  font-style: italic;
  font-weight: 600;
  /* left: 10%; */
  color: #fff;

}


main .page2_topimg img,
main .page3_topimg img {
  height: 95vh;
  width: 100%;
  object-fit: cover;
  opacity: 0.6;
  margin-bottom: 80px;
}



.mainprogram small,
.secondprogram small {
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 10px;
}


.mainprogram .program_erea figure img,
.secondprogram .program_erea figure img {
  width: 80%;
}

.mainprogram .program_erea #aboutus_item h5,
.secondprogram .program_erea #aboutus_item h5 {
  font-size: 3rem;
  line-height: 1.4;
  margin-bottom: 15px;
}

.mainprogram #aboutus_title p,
.secondprogram #aboutus_title p {
  font-size: 1.5rem;
  margin-top: 20px;
}


.mainprogram .program_erea #aboutus_item h5 span,
.secondprogram .program_erea #aboutus_item h5 span {
  background: #fff;
  color: #212121;
  line-height: 2;
  padding: 6px 12px;
  font-size: 3.5rem;


}

.mainprogram .program_erea #aboutus_item p,
.secondprogram .program_erea #aboutus_item p {
  margin-bottom: 75px;
}

.mainprogram .program_erea #aboutus_item ul,
.secondprogram .program_erea #aboutus_item ul {
  display: flex;
  justify-content: space-between;
}

.mainprogram .program_erea #aboutus_item li img,
.secondprogram .program_erea #aboutus_item li img {
  width: 100%;
}


h3#program_title {
  font-optical-sizing: auto;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #fff;
  font-size: 5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.mainprogram #support_item h4,
.secondprogram #support_item h4 {
  font-size: 3.5rem;
  border-bottom: 0;
  margin: 140px 0 0;
  font-family: "Orbitron", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: bold;
}

.mainprogram #support_item .support_program_erea h4,
.secondprogram #support_item .support_program_erea h4 {
  margin-bottom: 0;
  line-height: 1.2;
}

.mainprogram .support_program_erea h5,
.secondprogram .support_program_erea h5 {
  margin: 90px 0 20px;
  font-size: 2rem;
  font-weight: 600;
}

.mainprogram #support_item .support_program_erea .program_content h6,
.secondprogram #support_item .support_program_erea .program_content h6 {
  font-weight: 600;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.mainprogram #support_item .support_program_erea .method,
.secondprogram #support_item .support_program_erea .method {
  margin-top: 140px;
}




.mainprogram .support_program_erea .method h6,
.secondprogram .support_program_erea .method h6 {
  margin-bottom: 20px;
  border-bottom: 1px solid #fff;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 2.2;
}

.mainprogram .support_program_erea .method ul,
.secondprogram .support_program_erea .method ul {
  padding-bottom: 100px;
  font-weight: 500;
}

.mainprogram #support_item .method ul li,
.secondprogram #support_item .method ul li {
  margin-bottom: 5px;
  background-color: #fff;
  color: #212121;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 100px;
  font-size: 1.4rem;

}

.program_booking {
  margin-bottom: 0;
}


/* 他のプランへのボタンCSS */
.otherplan {
  text-align: center;
  margin: 0 auto;
  max-width: 350px;
}

.otherplan a {
  border: 2px solid #212121;
  border-radius: 50px;
  padding-right: 40px;
  display: block;
  margin-top: 30%;
  background: #212121;
  color: #fff;
}


.otherplan a:hover{
  border: 2px solid #212121;
  border-radius: 50px;
  padding-right: 40px;
  display: block;
  margin-top: 30%;
  background: #fff;
  color: #212121;
}







/* -----------------------下層ページ①のCSS--------------------------- */
.mainprogram {
  background: #4872E2;
  color: #fff;
}

.mainprogram #support_item .program_content p {
  margin-bottom: 40px;
  color: #fff;
  padding: 8px 0 0 35px;
  font-weight: 500;
  border-radius: 0 30px 0 30px;
  font-size: 1.4rem;

}

/* 料金体制 */
.mainplan small {
  font-size: 2rem;
}

.mainplan #aboutus_title p {
  margin: 30px 0;
  font-size: 1.4rem;
}


.mainplan .program_erea .plan_item {
  margin: 60px 0 100px;
  text-align: center;
}



.mainplan .program_erea .plan_item figure {
  margin-bottom: 20px;
}



.mainplan .program_erea .plan_item h5 {
  font-size: 2rem;
  font-weight: 500;
}

.mainplan .program_erea .plan_item p {
  font-size: 1.4rem;
  font-weight: 500;

}
.mainplan .program_erea .plan_item .box{
  margin-bottom: 50px;
}
.mainplan .program_erea .plan_item .box img{
  margin-bottom: 40px;

}





/* オプションメニューと競合比較をスクロールさせる */
.scroll {
  overflow-x: auto;
  text-align: center;
}

.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  --bg-opacity: 1;
  background-color: #0099A9;
  border-radius: 50px;
}

.scroll img {
  max-width: 135%;
}

/* 他社比較 */
.mainplan .program_erea #competitor h5 {
  font-size: 2rem;
  font-weight: 500;
  border-bottom: 1px solid;
}






/* -----------------------下層ページ②のCSS--------------------------- */


.secondprogram {
  /* background: #fe9c04; */
  /* background: #f9634a; */
  /* background: #ff6900; */
  background: #FF7F3E;
  color: #fff;
}

.secondprogram .program_erea #aboutus_item h5 span {
  background: #fff;
  color: #212121;
  line-height: 2;
  padding: 6px 12px;


}

.program_3_content {
  margin-bottom: 90px;
}

.secondprogram #support_item p.title {
  font-size: 2rem;
  font-weight: 500;
}

.secondprogram #support_item .support_program_erea figure img {
  border-radius: 0 30px 0 30px;
  margin-bottom: 30px;
}

.secondprogram #support_item p {
  margin: 0 0 15px;
  font-size: 1.4rem;
}

.secondprogram #support_item .program_content p span {
  margin-bottom: 80px;
  background: #fff;
  color: #212121;
  font-weight: 600;
  font-size: 1.4rem;
  margin-right: 1em;
  padding: 4px 8px;
  border-radius: 100px;
}


/* 料金体制 */
img.program_3_price {
  margin-top: 50px;

}















/* --------------下層ページ③の共通CSS------------------ */

.mainplan .program_erea .plan_item p.plus{
font-size: 6rem;
color: #0099A9;
text-align: center;

}


main#third .secondprogram {
  background-color: #06C755;
}

main#third #aboutus_item p {
  padding-bottom: 40px;
  margin: 0;
  font-weight: 500;
}


main#third article {
  padding: 0;
}

#third article h4 {
  font-size: 3.5rem;
  border-bottom: 0;
  font-weight: bold;
}

#third article h4 span {
  color:#212121;
  background: #fff;
  line-height: 2;
  padding: 6px 14px;
  font-size: 3.5rem;

}

#third article small {
  font-size: 2rem;
}





/* サポーター紹介 */
#profile .trainer {
  margin-bottom: 100px;

}

#profile section h5 {
  font-size: 2.5rem;
  font-weight: 500;
  margin: 10px 0 0;
}

#profile section small {
  font-weight: 500;

  font-size: 1.4rem;
}

#profile section img {
  margin-top: 40px;
  border-radius: 50%;


}

#profile section .text_content {
  margin: 10px 0;
}

#profile section p {
  color: #707070;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  line-height: 2;
  margin-bottom: 12px;
}

#profile section h6 {
  font-size: 2rem;
  margin: 20px 0;
  font-weight: 500;

}

#profile section ul {
  margin: 40px 0 40px;
}

#profile section ul p {
  margin-bottom: 20px;
  border-bottom: 1px solid #212121;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.2;
}

#profile .trainer a {
  border: 2px solid #212121;
  color:#212121;
  padding: 5px 20px;

}


#profile section ul li {
  margin-bottom: 5px;
  color: #fff;
  background-color: #0099A9;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 100px;
  font-size: 1.4rem;
  font-weight: 500;

}



.table p {
  margin-bottom: 20px;
  border-bottom: 1px solid #212121;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.2;
}

table {
  overflow-x: auto;
  display: block;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 500;
  margin-bottom: 10px;

}

table td,
th {
  padding: 15px 10px;
  width: 1000px;
  border: solid 1px #ccc;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 1.6rem;
  -webkit-font-size-adjust: 100%;
}

table th {
  background: #0099A9;
  color: #fff;
}

section p.text {
  font-size: 1.4rem;
  line-height: 1.6;
  border-bottom: 0;

}

table tr td:nth-of-type(1) {
  background: #E5F5F6;
  text-align: left;
}

.mainprogram #aboutus .table {
  position: relative;
}

.mainprogram #aboutus tr th {
  background: #fff;
  border: 0;
  padding: 0;
}

.table .option tr th {
  background: #fff;
  border: 0;
  padding: 0;

}

.table span {
  font-size: 1.2rem;
  padding-left: 2px;
}


#offmark {
  background: yellow;
  display: inline-block;
  padding: 20px;

  z-index: 1000;


}



/* スクロールバー全体を対象にする */
table::-webkit-scrollbar {
  width: 10px;
  /* スクロールバーの幅 */
  height: 10px;
  /* スクロールバーの高さ */
}

/* スクロールバーの背景部分をカスタマイズ */
table::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* スクロールバーの背景色 */
  border-radius: 5px;
  /* 角丸にする */
}

/* スクロールバーの操作部分をカスタマイズ */
table::-webkit-scrollbar-thumb {
  background: #0099A9;
  /* スクロールバーの操作部分の背景色 */
  border-radius: 50px
    /* 角丸にする */
}

/* スクロールバーの操作部分にホバーした時のスタイル */
table::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* ホバー時のスクロールバーの操作部分の背景色 */
}




#third .otherplan {
  margin-bottom: 90px;
}





















@media screen and (min-width:600px) {



  .inner {
    width: 70%;
  }

  /* ローディングアニメーション */
  .loading_logo {
    width: 300px;
  }


  #top_main #logo_white {
    top: 50%;
  }

  /* #coverlayer */
  nav li a {
    font-size: 1.4rem;
  }



  /* navクリック後 */
  nav.is-active {
    left: 135px;
    opacity: 1;
  }

  main article {
    margin-bottom: 100px;
  }

  main article h3 {
    font-size: 8rem;
  }

  main article small {
    font-size: 1.8rem;
  }


  .aboutus_erea .inner {
    /* padding-left: 50px; */
    /* width: 70%; */
    background-color: #fff;
    padding: 20px;

  }



  #aboutus_title {
    margin-bottom: 50px;
  }

  #aboutus .inner h4 {
    font-size: 2.4rem;
    /* margin: 0; */
  }

  #aboutus_item h5 {
    font-weight: 600;
  }



  .support_erea figure {
    text-align: center;

  }

  #support_item .inner h4 {
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 2;
  }

  .people {
    display: flex;
    justify-content: space-between;

  }


  .people img.fadeIn_left {
    margin: 210px 30px 0;
  }




  /* #vision */
  #vision {
    margin-bottom: 100px;
  }

  #vision .inner {
    text-align: center;
  }



  #vision .circle {
    position: static;
    margin: 0 auto;

  }

  /* 予約エリア */
  .booking {
    height: 500px;
  }

  .booking #booking_item {
    width: 50%;
  }

  .booking .btn--green {
    max-width: 50%;
  }

  .booking .inner p {
    font-size: 1.6rem;
  }

  .booking .inner a {
    font-size: 2.4rem;
  }

  /* feature */
  #feature section {
    margin-bottom: 20px;
    padding: 40px 0;
    border-radius: 0 80px 0 80px;
  }

  .container {
    display: flex;
    align-items: center;
    /* padding: 30px 10px; */
  }

  .container .feature_item img {
    margin: 10%;
    border-radius: 0 30px 0 30px;
  }

  #feature .feature_inner {
    margin-bottom: 60px;
  }

  #feature .feature_item h4 {
    font-size: 2.5rem;
  }

  #feature .feature_item .number {
    margin-bottom: 5px;
  }

  #feature .feature_item p {
    /* font-size: 1.8rem; */
    line-height: 2;
  }

  .feature_item_1 {
    width: 100%;
  }

  .feature_item_2 {
    width: 140%;
  }

  .feature_item_3 {
    width: 120%;
  }

  .feature_item_4 {
    width: 110%;
  }

  /* program */
  #program .inner_program_section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  #program .inner_program_section section {
    max-width: 500px;
    margin: 15px;
    width: 40%;
  }

  #program .inner h4 {
    font-size: 1.8rem;
  }

  /* staff */
  #staff #staff_pic img {
    width: 80%;
  }

  #staff .inner h4 {
    font-size: 2.4rem;
    margin-top: 20px;
    font-weight: 500;
  }


  /* よくある質問 */
  .qa-7 summary {
    font-size: 1.8rem;
  }

  .qa-7 p {
    font-size: 1.8rem;
  }

  .qa-7 summary::before {
    font-size: 1.8rem;
  }

  .qa-7 summary::after {
    font-size: 1.8rem;
  }

  .qa-7 summary .qa-7 p {
    font-size: 1.6rem;
  }

  /* アクセス */
  .googlemap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
  }

  .googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  dl dt {
    font-size: 1.6rem;

  }

  dl dd {
    font-size: 1.4rem;
  }

  .btn--green img {
    width: 13%;
    margin-right: 5px
  }

  .btn--green,
  a.btn--green {
    display: block;
    font-size: 2.2rem;
  }












  /* ------------------------下層ページ①②共通のCSS------------------------ */
  main .mainprogram h2,
  main .secondprogram h2 {
    font-size: 10vw;
  }

  .mainprogram small,
  .secondprogram small {
    font-size: 2.2rem;
  }

  /* .mainprogram #aboutus_title,
  .secondprogram #aboutus_title {
    margin-bottom: 140px;
  } */

  .mainprogram #aboutus_title h4,
  .secondprogram #aboutus_title h4 {
    font-size: 5rem;
  }

  .mainplan #aboutus_title p,
  .secondplan #aboutus_title p {
    font-size: 1.6rem;
  }

  .mainprogram small,
  .secondprogram small {
    font-size: 2.4rem;

  }


  h3#program_title {
    font-size: 5rem;
  }

  .mainprogram .support_program_erea #aboutus_title p,
  .secondprogram .support_program_erea #aboutus_title p {
    margin-bottom: 90px;

  }

  .secondprogram #support_item p.title {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .mainprogram .program_erea #aboutus_item ul,
  .secondprogram .program_erea #aboutus_item ul {
    display: flex;
    justify-content: center;
  }

  .mainprogram .program_erea figure img,
  .secondprogram .program_erea figure img {
    width: 70%;
    height: 500px;
    object-fit: cover;
    margin-bottom: 190px;
  }

  .mainprogram .program_erea #aboutus_item li img,
  .secondprogram .program_erea #aboutus_item li img {
    width: 100%;
  }

  .mainprogram .program_erea #aboutus_item,
  .secondprogram .program_erea #aboutus_item {
    margin-bottom: 150px;
  }

  .mainprogram #support_item .method ul li,
  .secondprogram #support_item .method ul li {
    font-size: 1.4rem;
    font-weight: 600;
  }




  /* 料金 */
  .mainplan #aboutus_title p,
  .secondplan #aboutus_title p {
    margin: 60px 0;
    font-weight: 600;
  }


  /* オプションメニューと競合比較をスクロールさせる */
  .scroll img {
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 135%;

  }




  /* ------------------------下層①のCSS------------------------------- */
  .mainprogram .program_erea ul {
    display: flex;
  }

  /* 料金体制 */


  .mainplan .program_erea .plan_item h5 {
    font-size: 2rem;
  }

  .mainplan .program_erea .price_item {
    /* max-width: 75%; */
    overflow-x: scroll;

  }

  .mainplan .program_erea .plan_item .box{
    display: flex;
    width:48%;
  }

  .mainplan .program_erea .plan_item .box img:first-child {
   margin-right: 40px;
}
  

  /* 他社比較 */
  #competitor {
    text-align: center;
    max-width: 1600px;
  }

  .mainplan .program_erea #competitor h5 {
    font-size: 2rem;
    font-weight: 500;
  }
  /* .plus {
    position: absolute;
    right: 50%;
    width: 45px;
    top: 28%;
    transform: translate(50%, -50%);
} */



  /* ------------------------下層②のCSS------------------------------- */
  .secondprogram #support_item .program_content p span {
    font-size: 1.6rem;
  }



  /* ------------------------下層③のCSS------------------------------- */
  #third article h2 {
    width: 70%;


  }

  #third #aboutus_item {
    padding-bottom: 80px;
  }

  #profile section img {
    width: 500px;
  }

  #third #aboutus_title {
    margin-bottom: 0;
  }

  #third article h4 {
    font-size: 5rem;

  }









}



























@media screen and (min-width:960px) {
 

  #third article h4 {
    font-size: 8rem;
  }

 

  .pagetop {
    bottom: 0;
  }





  .inner {
    max-width: 1600px;

  }

  .mainprogram .inner {
    width: 70%;
  }


  a.btn--top {

    margin-right: 0.5em;
  }



  #top_main h2 {
    font-size: 3rem;
  }

  #top_main #logo_white {
    width: 410px;
  }


  /* .aboutus_erea{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 90px;
  } */

  .aboutus_erea #aboutus_item {
    margin-left: 35px;
  }

  .people {
    text-align: center;


  }

  .people img.fadeIn_left {
    margin: 210px 30px 0;
  }





  .support_erea .inner {
    width: 50%;
  }

  /* #vision */
  #vision .inner {
    align-items: center;
  }



  #vision section {
    width: 100%;
  }

  #vision section .circle {
    width: 600px;

    max-width: 1000px;
  }


  #program .inner_program_section section {
    width: 40%;
  }



  /* #staff */
  #staff section {
    display: flex;
    align-items: center;
  }

  #staff_pic {
    margin: 0;
  }

  #staff #staff_pic img {
    width: 90%;
  }

  #staff_item {
    width: 123%;

  }

  #staff_item h4 {
    font-size: 2.5rem;
  }

  #staff_item p {
    font-size: 1.6rem;
  }

  /* staffのスライドショー */
  .wrap .slideshow li {
    width: 480px;
  }

  #contact .inner {
    max-width: 600px;

  }

  /* ------------------------下層ページ①②の共通CSS----------------------------- */
  main .mainprogram h2,
  main .secondprogram h2 {
    font-size: 10rem;

  }

  /* .mainprogram .program_erea #aboutus_item p,
  .secondprogram .program_erea #aboutus_item p {
    font-size: 2.2rem;
  } */

  .mainprogram #support_item .method ul li,
  .secondprogram #support_item .method ul li {
    font-size: 1.6rem;
  }



  /* ------------------------下層ページ①のCSS----------------------------- */

  /* プログラム */


  /* 料金体制 */
  .mainplan .program_erea .plan_item {
    overflow-x: hidden;
    overflow-y: hidden;

  }

  .mainplan .program_erea .plan_item p {
    font-size: 1.4rem;
    margin-bottom: 0;
    text-align: left;
    border: 0;


  }


/* オプションメニューと競合比較をスクロールさせる */
.mainplan .program_erea .plan_item {
  overflow-y: hidden;
  max-width: 100%;
}

.mainplan .program_erea .price_item {
  max-width: 75%;
  overflow-x: scroll;
}

.mainprogram .scroll {
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 75%;
  margin: 0 auto;
  margin-bottom: 20px;
}














/* program③ */
#third article h4 {
  font-size: 8rem;
}

#profile .trainer {
  margin-bottom: 120px;
}

/* #profile .prof {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;


  }

  #profile .prof .text_content {
    width: 60%;
    padding-left: 20px;

  } */



#profile table td,
th {
  /* white-space: normal; */
  width: 1000px;
}







}


@media screen and (min-width:1200px) {
  .aboutus_erea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 90px;
  }

  .aboutus_erea figure img {
    max-width: 460px;


  }


#profile section table {
  overflow-x: hidden;
}


  #profile table td,
th {
  white-space: normal;
  width: 1000px;
}



}