@charset "UTF-8";

/* === 見出し装飾 =============== */

/* h1装飾  */
.h1_area {
  margin-top: 0rem;
  z-index: 2;
  position: relative;
  background: url(camp/images/camp_top_bg.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: 100% 90%;
}
.h1_haichi {
  text-align: right;
  margin-right: 5%;
}

.h1_haichi02 {
width:30%;
padding-top: 60%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: 5%;
}
.h1_haichi02 img {
width: 100%;
  }

.h1_deco01  {
  position: relative;
  display: inline-block;
  margin: 1em 0 0 15px;
  padding: 0 5px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #000;
  font-size: 21px;
  font-weight: bold;
  background: #fff;
  border: 7px solid #00b298;
  border-radius: 50%;
  box-sizing: border-box;
  }
  
  .h1_deco01::before,
  .h1_deco01::after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  top: 82%;
  left: -53%;
  transform: rotate( -35deg );
  }
  
  .h1_deco01::before {
  border-right: 100px solid #00b298;
  }
  
  .h1_deco01::after {
  margin-top: -21px;
  margin-left: 30px;
  border-right: 100px solid #fff;
  }
  

  @media (min-width:750px) {
    .h1_area {
      margin-top: 0rem;
      z-index: 2;
      position: relative;
      background: none;
    }
  }

    @media (min-width:1000px) {
      .h1_deco01  {
        position: relative;
        display: inline-block;
        margin: 1.5em 0 0 15px;
        padding: 0 5px;
        width: 220px;
        height: 220px;
        line-height: 220px;
        text-align: center;
        color: #000;
        font-size: 25px;
        font-weight: bold;
        background: #fff;
        border: 10px solid #00b298;
        border-radius: 50%;
        box-sizing: border-box;
        }
        
        .h1_deco01::before,
        .h1_deco01::after {
        content: '';
        position: absolute;
        border: 25px solid transparent;
        top: 86%;
        left: -50%;
        transform: rotate( -35deg );
        }
          
  .h1_deco01::before {
    border-right: 100px solid #00b298;
    }
 
    .h1_deco01::after {
    margin-top: -21px;
    margin-left: 30px;
    border-right: 100px solid #fff;
    }
    }

  @media (min-width:1400px) {
    .h1_area {
      margin-top: 0rem;
      z-index: 2;
      position: relative;
    }
    .h1_haichi {
      text-align: right;
      margin-right: 10%;
    }
    .h1_deco01  {
      position: relative;
      display: inline-block;
      margin: 1.5em 0 0em 15px;
      padding: 0 5px;
      width: 300px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      color: #000;
      font-size: 40px;
      font-weight: bold;
      background: #fff;
      border: 10px solid #00b298;
      border-radius: 50%;
      box-sizing: border-box;
      }
      
      .h1_deco01::before,
      .h1_deco01::after {
      content: '';
      position: absolute;
      border: 25px solid transparent;
      top: 82%;
      left: -32%;
      transform: rotate( -35deg );
      }
      
      .h1_deco01::before {
      border-right: 100px solid #00b298;
    
      }
      
      .h1_deco01::after {
      margin-top: -21px;
      margin-left: 30px;
      border-right: 100px solid #fff;
      }
  }

  .annairyokin_naka {
    display: flex;
  }
  .annairyokin_naka_line03 {
    border-left: 7px solid #0093cc;
    border-top: none;
  }

/*  h1英語 */
.hall_en2 {
  position: relative;
}

.hall_en2 img {
  position: absolute;
  top: auto;
  bottom: 5%;
  left: 3%;
  transform: translate(0%, 0%);
  width: 50%;
  height: auto;
}

@media (min-width:750px) {
  .hall_en {
    position: absolute;
    top: 0%;
    right: 0%;
    bottom: auto;
    left: auto;
    transform: translate(-5%,165%);
  }
  
  .hall_en img {
    width: 450px;
    height: 120px;
    margin-right: 0%;
  }
} 
  
@media (min-width:1000px) {
  .hall_en {
    top: 0%;
    right: 0%;
    transform: translate(-5%,200%);
  }
  
  .hall_en img {
    width: 500px;
    height: 130px;
    margin-right: 0%;
  }
}
  
@media (min-width:1400px) {
  .hall_en {
    top: 0%;
    right: 0%;
    transform: translate(-35%,260%);
  }
  
  .hall_en img {
    width: 550px;
    height: 150px;
    margin-right: 20%;
  }
}

/* === ご予約方法 === */
  .hall_yoyaku_area .ryoukin_tyuui {
    display: inline-block;
    place-items: center;
    border: none;
    padding:1rem;
    text-align: left;
  }

@media (min-width:750px) {
  .hall_yoyaku_area .ryoukin_tyuui {
    border: 1px solid #000;
  }
}


/* === 背景イラスト === */

/* 施設概要 */
.hall_shisetsu_area.sc_haikei {
  background-image: url(images/sch_memo2.svg), url(images/sch_ki.svg);
  background-position: 5% 3%, 98% 3%;
  background-size: 20%, 10%;
  padding-top: 7%;
}

/* ご利用料金 */
.hall_ryokin_area.sc_haikei02 {
  background-image: url(images/sch_yama2.svg), url(images/sch_glass.svg), url(images/sch_mori.svg);
  background-position: 5% 50px, 10% 150px, 90% 100px;
  background-size: 20%, 20%, 20%;
  padding-top: 25%;
}

/* ご予約方法 */
.hall_yoyaku_area.sc_haikei {
  background-image: url(images/sch_ki.svg), url(images/sch_memo.svg), url(images/sch_yama2.svg);
  background-position: 10% 5%, 20% 30%, 90% 20%;
  background-size: 10%, 15%, 20%;
  padding-top: 35%;
}

/* 営業時間 */
.hall_jikan_area.sc_haikei02 {
  background-image: url(images/sch_yama2.svg), url(images/sch_open.svg), url(images/sch_hata.svg), url(images/sch_mori.svg), url(images/sch_ki.svg);
  background-position: 5% 10%, 20% 30%, 95% 35%, 95% 15%, 10% 100%;
  background-size: 20%, 15%, 30%, 20%, 10%;
  padding-top:45%;
  padding-bottom: 20px;
}

@media (min-width:750px) {
  /* 施設概要 */
.hall_shisetsu_area.sc_haikei {
  background-image: url(images/sch_mori.svg), url(images/sch_memo2.svg), url(images/sch_yama.svg);
  background-position: 10% 100px, 80% 150px, 90% 0px;
  background-size: 12%, 13%, 13%;
  padding-top: 7%;
}

/* ご利用料金 */
.hall_ryokin_area.sc_haikei02 {
  background-image: url(images/sch_yama2.svg), url(images/sch_glass.svg), url(images/sch_ki.svg);
  background-position: 5% 10%, 10% 50%, 90% 50%;
  background-size: 12%, 10%, 6%;
  padding-top: 5%;
}

/* ご予約方法 */
.hall_yoyaku_area.sc_haikei {
  background-image: url(images/sch_mori.svg), url(images/sch_memo.svg), url(images/sch_yama.svg);
  background-position: 10% 25%, 80% 25%, 90% 5%;
  background-size: 12%, 8%, 13%;
  padding-top: 5%;
}

/* 営業時間 */
.hall_jikan_area.sc_haikei02 {
  background-image: url(images/sch_yama2.svg), url(images/sch_open.svg), url(images/sch_hata.svg), url(images/sch_ki.svg);
  background-position: 5% 15%, 10% 50%, 90% 30%, 90% 10%;
  background-size: 12%, 8%, 20%, 6%;
  padding-top: 5%;
}
}