@charset "UTF-8";
/* CSS Document */

@font-face{
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-style:normal;
}



html{
  font-size: 62.5%; /* 62.5％ X 16px=10px */
}

body{
  color: #000000;
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;;
  font-size: 1.6rem;
  font-feature-settings: "palt" 1;
}

a{
  color: #000000;
}

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

.inner{
  max-width: 1040px;
  margin: 0 auto;
}

.clearfix:after{
  content: "";    /* 擬似要素を実体化 */
  clear: both;    /* floatを解除する */
  display: block; /* ブロック要素にする */
}

.text-center{
  text-align: center;
}  

.sp_img{
  display: none;
}

.pc_br{
  display: none;
}



/*------------------共通------------------*/
.headline{
  font-size: 5rem;
  font-family: serif;
  font-weight: 100;	  
  padding-bottom: 7px;	
}

.head_text{
  font-size: 1.8rem;
}

.head_area{
  position: relative; /*--親--*/
  margin-bottom: 70px;  	
}

.text_area{
  position: absolute; /*--子--*/
  top: 40%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  z-index: 100;
  color: #fff;
  text-align: center;
}

.anno{
  font-size: 1.5rem;
  line-height: 1.5;
  padding-top: 12px;
  text-align: center;
}



/*------------------表組み------------------*/
table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 900px; /*--横幅--*/
  table-layout: auto;  
}
table tr {
  border-bottom: solid 6px #fff;
  background-color: #e6f2f5;
}
table th{
  border-right: 6px solid #fff;
}
table td{
  border-right: 6px solid #fff;
}
table th:last-child,
table td:last-child{
  border: none;
}
.non{
  background:#fff
}
tbody th {
  padding: 50px;
  font-size: 2rem;
  font-weight: 500;	
  line-height: 1.3;
  color: #18943b;
}
.txt{
  font-size: 2rem; 
  padding: 30px 30px;  
  text-align: center;
  vertical-align: middle;  /* 中央揃え */  
}
.price{
  font-size: 2rem;
  line-height: 1.3;
  padding: 30px 50px;  
  text-align: center;
  vertical-align: middle;  /* 中央揃え */
}
.price>span{
  font-size: 1.6rem;
}
.txt_low{
  font-size: 1.8rem; 
  padding: 20px 30px;  
  text-align: center;
  vertical-align: middle;  /* 中央揃え */
  color: #18943b;  
}



/*------------------ヘッダー部分------------------*/
.header_logo{
  margin: 30px 0 20px;
}
/*------------------ナビゲーション------------------*/
.nav ul{
  display: flex;
}

.nav li{
  width: 25%; /*--1つの幅--*/
  text-align: center;
}

.nav li a{
  display: block;
  padding: 20px 0 20px;
  font-size: 1.8rem;
  font-weight: 500;
}
/*------------------マウスが乗った時の色------------------*/
.nav li{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.nav li::after{
  position: absolute;
  bottom: 10px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #c70044;
  transform: scale(0, 2);
  transform-origin: center top;
  transition: transform .4s;
}
.nav li:hover::after{
  transform: scale(1, 1);
}
/*------------------ヘッダー途中から固定------------------*/
.header_area{
  position: absolute; /*--子--*/
  width: 100%;
  z-index: 1000;
  background: #fff;
}

.header_area.fixed{
  position: fixed;
  top: 0;
}



/*------------------ヒーローイメージ部分------------------*/
.hero_area{
  position: relative; /*--親--*/
}

.header_title{
  position: absolute; /*--子--*/
  top: 40px;
  left: 40px;
  z-index: 100;
  font-size: 6.4rem;
  font-weight: 700;  
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 0 10px #6E6E6E;
}



/*------------------スクロール------------------*/
.scroll_area{
  position: absolute; /*--子--*/
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 100;
}

.click p{
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
/*------------------ページ内リンク------------------*/
#head{
  margin-top: -0px;
  padding-top: 0px;   
}

#facility{
  margin-top: -180px;
  padding-top: 180px;   
}

#hours{
  margin-top: -180px;
  padding-top: 180px;   
}

#price{
  margin-top: -180px;
  padding-top: 180px;   
}

#access{
  margin-top: -180px;
  padding-top: 180px;   
}



/*------------------感染予防------------------*/
.img_area{
  margin-top: 240px;
}

.reed{
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.9;
  margin: 20px 0 100px;
  text-align: center;
}

.guide{
  margin-bottom: 160px;
}

.guide_title{
  font-size: 2.7rem;
  font-weight: 500;  
  color: #18943b;
  padding-bottom: 10px;
  border-bottom: solid 1px #18943b;
}

.guide_text{
  font-size: 1.7rem;
  line-height: 2.2;
  padding: 15px 0 30px;
}

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

.pict_area>li{
  text-align: center;
  padding-right: 50px;
}
.pict_area>li:last-child{
  padding-right: 0;
}

.pict_text>p{
  font-size: 1.7rem;
  line-height: 1.4;
  padding-top: 10px;
}



/*------------------施設紹介------------------*/
.facility_area{
  margin-bottom: 160px
}

.facility_img{ /*--施設紹介画像--*/
  width: 100%;
  height: 0;
  padding-top: calc(220 / 1200 * 100%); /* calc(画像高さ÷画像横幅×100%) */
  background: url("../img/facility_main.jpg") center / cover no-repeat;
}

.facility_text>p{
  font-size: 1.8rem;
  line-height: 1.4;
  padding-top: 6px;
}

.facility_info{
  display: flex;
  justify-content: space-between; /*--両端に配置、均等に間隔をあけて--*/
  flex-wrap: wrap; /*--子を折り返し--*/
}

.facility_info>li{
  margin-bottom: 48px;
}

.blank{
  width: 315px;
}



/*------------------営業時間------------------*/
.hours_img{ /*--営業時間画像--*/
  width: 100%;
  height: 0;
  padding-top: calc(220 / 1200 * 100%); /* calc(画像高さ÷画像横幅×100%) */
  background: url("../img/hours.jpg") center / cover no-repeat;
}

.hours_area{ /*--施設紹介画像--*/
  margin-bottom: 160px
}



/*------------------料金------------------*/
.price_img{ /*--料金案内画像--*/
  width: 100%;
  height: 0;
  padding-top: calc(220 / 1200 * 100%); /* calc(画像高さ÷画像横幅×100%) */
  background: url("../img/price.jpg") center / cover no-repeat;
}

.price_area{ 
  margin-bottom: 160px
}

.subheading{
  width: 900px;
  font-size: 1.8rem;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  background: #18943b;
  border-radius: 38px;
  margin: 0 auto;
}
.subheading_block{
  margin-bottom: 20px;
}

.spacing{
  padding-bottom: 80px;
}



/*------------------アクセス------------------*/
.google-maps {
  position: relative;
  padding-bottom: 52%;  /*ここが縦横比*/
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acc_title{
  color: #18943b;
  padding: 40px 0 30px;
}

.traffic_area{
  display: flex;
  justify-content: center; /*--センター揃え--*/
  padding-bottom: 24px;
}

.traffic>p{
  font-size: 2rem;
  padding: 10px 20px;
  color: #fff;
  background: #ff0000;
  border-radius: 30px;
}

.traffic{
  margin-right: 20px;
}

.traffic:last-child{
  margin-right: 0;
}

.acc_area{
  display: flex;
  justify-content: center; /*--センター揃え--*/
  align-items: flex-end; /*--下揃え--*/
}

.board{
  padding-right: 20px
}

.info>p{
  font-size: 1.6rem;
}

.info{
  padding-bottom: 10px;
}

.info:last-child{
  padding-bottom: 0;
}

.landmark{
  font-size: 3rem;
  font-weight: 600;  
  padding-bottom: 20px;
  color: #ff0000;
}



/*------------------ページトップボタン------------------*/
.PageTopBtn{
  font-size: 1.4rem;
  position: fixed; /*配置場所を固定*/
  bottom: 20px; /*下からの位置*/
  right: 20px; /*右からの位置*/
}

.PageTopBtn a{
  display: block; /*配置の調整*/
  color: #ff7f00;
  background: #fff;
  border: solid 1px #ff7f00;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px; /*高さheightと同じに*/
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  transition: 0.6s;
}

.PageTopBtn a:hover{
  color: #fff;
  background: #e60039; /*マウスオーバー時の背景色*/
  border: solid 1px #e60039;
}



/*------------------フッター------------------*/
.footer-area{
  background-color: #f5f5f5;
  padding: 37px 0 20px;
  margin-top: 150px;
}

.f_name{
  font-size: 2rem;
  padding-bottom: 10px;
}

.f_add{
  font-size: 1.5rem;
  padding-bottom: 7px;	
}

.f_tel{
  font-size: 1.8rem;
  padding-bottom: 20px;	
}

.copyright{
  font-size: 1.2rem;
  font-weight: 200;
}



/*------------------SP版------------------*/
@media screen and (max-width:768px){
  
  .inner{
    padding: 0 20px;
  }
  
  .img{
    max-width: 100%;
    height: auto;
  }
  
  .pc_img{
    display: none;
  }

  .sp_img{
    display: block;
  }
 
  .pc_br{
    display: block;
  }
  
  .sp_br{
    display: none;
  }
  
  
   
  /*------------------共通------------------*/
  .headline{
    font-size: 4rem;
    padding-bottom: 1px;
    line-height: 1.2;
  }

  .head_text{
    font-size: 1rem;
  }

  .head_area{
    position: relative; /*--親--*/
    margin-bottom: 20px;  	
  }

  .text_area{
    position: absolute; /*--子--*/
    top: 28%;
    left: 50%;
  }
  
  .text_area_sp{
    position: absolute; /*--子--*/
    top: 14%;
    left: 50%;
  }

  .anno{
    font-size: 1rem;
    padding-top: 7px;
  }



  /*------------------表組み------------------*/
  table {
    width: 100%; /*--横幅--*/
  }
  table tr {
    border-bottom: solid 3px #fff;
  }
  table th{
    border-right: 3px solid #fff;
  }
  table td{
    border-right: 3px solid #fff;
  }
  tbody th {
    padding: 10px;
    font-size: 1.4rem;
    vertical-align: middle;  /* 中央揃え */  
  }
  .txt{
    font-size: 1.4rem; 
    padding: 10px 10px;  
  }
  .price{
    font-size: 1.4rem;
    padding: 15px 15px;  
  }
  .price>span{
    font-size: 1rem;
  }
  .txt_low{
    font-size: 1.3rem; 
    padding: 10px 10px;  
  }



  /*------------------ヘッダー部分------------------*/
  .header_logo{
    width: 80%;
    margin: 20px auto 10px;
  }
  
 
  
  /*------------------ナビゲーション------------------*/
  .nav ul{
    display: flex;
  }

  .nav li{
    width: 25%; /*--1つの幅--*/
    text-align: center;
  }

  .nav li a{
    display: block;
    padding: 15px 10px 10px;
    font-size: 1.6rem;
  }
  /*------------------マウスが乗った時の色------------------*/
  .nav li:hover::after{
    display: none;
  }
  /*------------------ヘッダー途中から固定------------------*/
  .header_area{
    position: fixed; /*--固定--*/
    top: 0;
  }



  /*------------------ヒーローイメージ部分------------------*/
  .header_title{
    position: absolute; /*--子--*/
    top: 15px;
    left: 15px;
    z-index: 100;
    font-size: 2.6rem;
    line-height: 1.3;
  }

  .sp_hero{
    margin-top: 110px;
  }
  
  

  /*------------------ページ内リンク------------------*/
  #facility{
    margin-top: -100px;
    padding-top: 100px;   
  }

  #hours{
    margin-top: -100px;
    padding-top: 100px;   
  }

  #price{
    margin-top: -100px;
    padding-top: 100px;   
  }

  #access{
    margin-top: -100px;
    padding-top: 100px;   
  }



  /*------------------感染予防------------------*/
  .img_area{
    margin-top: 30px;
  }

  .reed{
    font-size: 2rem;
    line-height: 1.6;
    margin: 10px 0 40px;
  }

  .guide{
    margin-bottom: 35px;
  }

  .guide_title{
    font-size: 1.8rem;
    line-height: 1.4;
    padding-bottom: 8px;
  }

  .guide_text{
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph; /*--edge--*/
    padding: 8px 0 24px;
  }

  .pict_area{
    justify-content: space-between;
    flex-wrap: wrap; /*--子を折り返し--*/  
  }

  .pict_area>li{
    padding-right: 0;
    width: 45%;
    padding-bottom: 15px;
  }

  .pict_text>p{
    font-size: 1.4rem;
    line-height: 1.5;
    padding-top: 8px;
  }



  /*------------------施設紹介------------------*/
  .facility_area{
    margin-bottom: 35px
  }

  .facility_img{ /*--施設紹介画像--*/
    width: 100%;
    height: 0;
    padding-top: calc(300 / 768 * 100%); /* calc(画像高さ÷画像横幅×100%) */
    background: url("../img/facility_main_sp.jpg") center / cover no-repeat;
  }

  .facility_text>p{
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .facility_info>li{
    margin-bottom: 15px;
    width: 47%;
  }


  
  /*------------------営業時間------------------*/
  .hours_img{ /*--営業時間画像--*/
    width: 100%;
    height: 0;
    padding-top: calc(300 / 768 * 100%); /* calc(画像高さ÷画像横幅×100%) */
    background: url("../img/hours_sp.jpg") center / cover no-repeat;
  }

  .hours_area{ /*--施設紹介画像--*/
    margin-bottom: 30px
  }



  /*------------------料金------------------*/
  .price_img{ /*--料金案内画像--*/
    width: 100%;
    height: 0;
    padding-top: calc(300 / 768 * 100%); /* calc(画像高さ÷画像横幅×100%) */
    background: url("../img/price_sp.jpg") center / cover no-repeat;
  }

  .price_area{ 
    margin-bottom: 70px
  }

  .subheading{
    width: auto;
    font-size: 1.6rem;
    padding: 8px 0;
    border-radius: 38px;
  }
  .subheading_block{
    margin-bottom: 10px;
  }

  .spacing{
    padding-bottom: 30px;
  }



  /*------------------アクセス------------------*/
  .google-maps {
    padding-bottom: 80%; /*--ここが縦横比--*/
  }

  .acc_title{
    padding: 20px 0 18px;
  }

  .traffic_area{
    display: block; /*--解除--*/
    padding-bottom: 13px;
  }

  .traffic>p{
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 5px 0;
    border-radius: 10px;
  }

  .traffic{
    margin-right: 0;
    padding-bottom: 10px;
    text-align: center;
  }

  .acc_area{
    display: block; /*--解除--*/
    text-align: center;
  }

  .board{
    padding-right: 0
  }

  .info>p{
    font-size: 1.4rem;
  }

  .info{
    padding-bottom: 6px;
  }

  .landmark{
    font-size: 2.8rem;
    padding-top: 8px;    
    padding-bottom: 15px;
  }
 
    

  /*------------------フッター------------------*/
  .footer-area{
    padding: 15px 0 15px;
    margin-top: 50px;
  }

  .f_name{
    font-size: 1.8rem;
    padding-bottom: 6px;
  }

  .f_add{
    font-size: 1.2rem;
    padding-bottom: 8px;	
  }

  .f_tel{
    font-size: 1.4rem;
    padding-bottom: 15px;	
  }

  .copyright{
    font-size: 1.2rem;
  }

  
  
 }