@charset "UTF-8";

/* 「初めての方へ」 */

/* =======================
タイトル（カバー）
*/

.introduction #main{
  overflow: hidden;
}

.introduction #cover{
  /* min-height: 100vh; */
  background: url(../assets/bg-ao-corner.jpg) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

.introduction #cover::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(27, 106, 167, 0.5);
  position: absolute;
  top:0;
  left: 0;
}

.introduction #cover .inner{
  width: 1000px;
  /* 2024年11月〜　宿泊ビジター無料キャンペーン中は外す
  height: 100%;
  padding-bottom: 80px; */
  position: relative;
  display: flex;
  align-items: center;
}
.introduction #cover .msg{
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.introduction #cover .msg a{
  max-width: 1000px;
  margin: 2rem auto 0;
  display: block;
  text-align: center;
  color: #ED2323;
  background-color: #ffff5c;
  border-radius: 1.5rem;
  padding: 2rem;
}

.introduction #cover .block{
  padding: 30px;
}

/* ===============
セクション：見出し
*/

.introduction .section-heading,
.introduction #greeting .copy
{
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  font-family: "M PLUS Rounded 1c";
  color: #1B6AA5;
}

.introduction .section-heading{
  margin-bottom: 30px;
}

/* ===============
セクション：挨拶
*/

.introduction #greeting{
  background: #F5EF4A;
}

.introduction #greeting .cloud{
  background: url(../assets/introduction-cloud.svg) no-repeat 50% 50%;
  background-size: contain;
  position: relative;
  top:-50px;
  left: 0;
  height: 300px;
  width: 90%;
  margin: 0 auto;
}
.introduction #greeting .copy{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #4DAA4D;

}




/* ===============
セクション：ヘッダー
*/

.introduction .section-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
}

.introduction .section-header .block-photo{
  order: 2;
  width: 460px;
}
.introduction .section-header .block-photo figure{
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  transform: rotate(5deg);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  position: relative;
}
.introduction .section-header .block-photo figure figcaption{
  position: absolute;
  bottom: -25px;
  right: 0;
  text-align: right;
}

.introduction .section-header .block-info{
  order: 1;
  width: 500px;
  text-align: center;
}

.introduction .section-header .description{
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 2rem;
}

.introduction .section-header .feature,
.introduction .section-footer .block
{
  text-align: left;
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem 1rem;
  margin-top: 1.5rem;
}
.introduction .section-footer .block{
  margin-top: 0;
}

.introduction .section-header .feature .heading{
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin: 0 0 .5em;
}

/* ===============
セクション：フッター
*/

.introduction .section-footer{
  padding: 50px 0;
  position: relative;
}
.introduction .section-footer::after{
  content: '';
  display: table;
  clear: both;
}

.introduction .section-footer .heading{
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin: 0 0 .5em;
  color: #1B6AA5;
}

.introduction .section-footer .block-info{
  padding-right: 45%;
}

.introduction .section-footer .block-photo{
  position: absolute;
  bottom: 0;
  right: 0;
  background: none;
  padding: 20px;
  max-width: 400px;
}
.introduction .section-footer figure{
  margin: 0;
}
.introduction .section-footer figure img{
  border-radius: 15px;
}

/* ===============
セクション：内容
*/

.introduction .section-content{
  overflow: hidden;
  padding-bottom: 30px;
}


/* ------------
スポット紹介
*/

.introduction .spot-container{
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-right: -10px;
}

.introduction .spot{
  float: left;
  min-height: 200px;
  /* background-color: rgba(74, 142, 201, 0.269); */
  margin: 0;
  padding: 10px;
}
.introduction .spot figcaption{
  margin-top: .5rem;

}

.introduction .spot img{
  width: 215px;
  height: 145px;
  object-fit: cover;
}
.introduction section:not(#safety) .spot:first-of-type {
  min-height: 400px;
}
.introduction section:not(#safety) .spot:first-of-type img{
  width: 530px;
  height: 345px;
}


/* =======================
温泉
*/

.introduction #spa{
  background: #F5EF4A url(../assets/introduction-spa-bg.svg);
  background-size: 50%;
}
.introduction #spa .section-header .feature .heading{
  color: #DE6464;
}

/* .introduction #spa .section-footer{
  padding-top: 60px;
}

.introduction #spa .section-footer .block-info{
  padding-right: 45%;
}
*/

.introduction #spa .section-footer .block-photo{
  padding: 0;
} 

.introduction #spa .section-footer .block-photo figure{
  margin: 0;
}
.introduction #spa .section-footer figure img{
  border-radius: 0;
}


/* =======================
ジム
*/

.introduction #gym{
  background: #A7DCFD url(../assets/introduction-gym-bg.svg);
  background-size: 20%;
  background-position: 50% 50%;
}
.introduction #gym .section-header .feature .heading{
  color: #1B6AA5;
}


/* =======================
サウナ
*/

.introduction #sauna{
  background: #F4C590 url(../assets/introduction-sauna-bg.svg);
  background-size: 20%;
  background-position: 50% 50%;
}
.introduction #sauna .section-header .feature .heading{
  color: #ED2323;
}


/* =======================
安全管理
*/
.introduction #safety{
  background: #A7DCFD;
  padding: 40px 0 0;
}

.introduction #safety .spot{
  width: 340px;
}
.introduction #safety .spot:nth-of-type(3n+1){
  clear: both;
}

.introduction #safety .spot img{
  width: 320px;
  height: 220px;
  object-fit: cover;
}


/* =======================
入会案内
*/
.introduction #admission-info{
  background: #FCF0E0;
  padding: 40px 0 0;
}

.introduction #admission-info .inner{
  padding: 0 100px;
}

.introduction #admission-info .block{
  margin-bottom: 30px;
}

.introduction #admission-info .block-content{
  margin-top: 2rem;
  line-height: 1.8;
}

.introduction #admission-info .block .heading{
  background-color: #1B6AA5;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  font-family: "M PLUS Rounded 1c";
  font-size: 1.5rem;
  padding: .3rem;
  /* margin: 1em 0; */
}

.introduction #admission-info .block dl{
  display: flex;
  align-items: center;
  margin: 30px 0;
  font-size: 1.2rem;
  border-bottom: 1px solid #1B6AA5;
}

.introduction #admission-info .block dt,
.introduction #admission-info .block dd{
  margin-bottom: 30px;
}

.introduction #admission-info .block dt{
  width: 25%;
  padding: 10px;
  color: #1B6AA5;
  border: 1px solid #1B6AA5;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-family: "M PLUS Rounded 1c";
}

.introduction #admission-info .block dd{
  width: 75%;
  padding-left: 50px;
  color: #1B6AA5;
  /* margin-bottom: 0; */
}

.introduction #admission-info .child-table{
  width: 100%;
}

.introduction #admission-info .block th,
.introduction #admission-info .block td{
  padding: 15px 0;
  border-bottom: 1px dashed #1B6AA5;
}
.introduction #admission-info .block tr:last-child th,
.introduction #admission-info .block tr:last-child td{
  border-bottom: 0;
}

.introduction #admission-info .block td{
  padding: 15px 5px;
  padding-left: 30px;
  font-weight: bold;
}

.introduction #admission-info ul.necessities{
  list-style: none;
  color: #1B6AA5;
  font-weight: bold;
  font-family: "M PLUS Rounded 1c";
  margin: 1em 0;
  padding: 0;
}
.introduction #admission-info ul.necessities li{
  margin: .5em 0;
}
.introduction #admission-info ul.necessities li::before{
  content: '●';
  display: inline-block;
  /* width: 1em; */
  /* height: 1em; */
  /* border-radius: 100%; */
  /* background-color: #1B6AA5; */
  font-weight: bold;
  font-family: "M PLUS Rounded 1c";
  color: #1B6AA5;
  margin-right: .5em;
}


/* =======================
申し込み（フォーム）
*/
.introduction #admission-form{
  background: #FFF;
  padding: 40px 0;
}

.introduction #admission-form .inner{
  padding: 0 100px;
}


/* =======================
ビジター料金
*/

.introduction #visitor{
  background: #FCF0E0;
  padding: 40px 0 0;
}

.introduction #visitor .msg{
  padding: 1.5rem;
  border-radius: 1.5rem;
  text-align: center;
  background-color: #fff;
  margin: 2rem 0;
  color: red;
}
.introduction #visitor .msg strong{
  font-size: 1.4rem;
}

.introduction #visitor .inner{
  padding: 0 100px;
}

.introduction #visitor .block .heading{
  background-color: #1B6AA5;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  font-family: "M PLUS Rounded 1c";
  font-size: 1.5rem;
  padding: .3rem;
  margin: 0 0 1rem;
}
.introduction #visitor p{
  font-size: 1.2rem;
}
.introduction #visitor ul{
  padding-left: 1rem;
}

.introduction #visitor table{
  border: 1px solid #1B6AA5;
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
  font-size: 1.2rem;
  background-color: #fff;
}

.introduction #visitor table th,
.introduction #visitor table td{
  border: 1px solid #1B6AA5;
  padding: .5rem;
  text-align: center;
  font-family: "M PLUS Rounded 1c";
  font-weight: bold;
}
.introduction #visitor table th{
  background-color: #d1e4f0;
  color: #1B6AA5;
}

.introduction #visitor .txt-small-normal{
  font-size: .9rem;
  font-weight: normal;
}

@media screen and ( max-width:520px ){

  .introduction .inner{
    padding: 0;
  }

  .introduction #cover .inner{
    width: 100%;
    display: block;
    padding: 30px 0;
  }
  .introduction #cover {
    height: auto;
    min-height: 100vh;
  }
  .introduction #cover .block {
    padding: 0 30px;
  }

  .introduction #greeting .inner{
    padding: 0;
  }
  .introduction #greeting .cloud{
    height: 200px;
    margin-bottom: -30px;
  }

  .introduction #greeting .copy{
    font-size: 4.5vw;
    width: 100%;
  }

  .introduction #safety .section-heading{
    font-size: 5.5vw;
    margin-bottom: 0;
  }


  .introduction .section-header{
    display: block;
    padding: 30px;
    padding-bottom: 0;
    position: relative;
  }

  .introduction .section-header .block-photo{
    width: 42%;
    position: absolute;
    top: 20px;
    right: 15px;
  }

  .introduction #spa .section-header .block-photo{
    width: 45%;
    position: absolute;
    top: -30px;
    right: 25px;
  }

  .introduction .section-header .block-photo figure {
    padding: 8px;
    border-radius: 5px;
  }

  .introduction #sauna .section-header .section-title {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .introduction #sauna .section-header .block-photo {
    width: 45%;
  }
  .introduction #sauna .section-header .block-photo figure {
    padding: 8px;
    border-radius: 5px;
    transform: rotate(-5deg);
  }
  
  .introduction .section-header .block-info{
    width: 100%;
  }
  .introduction .section-header .section-title{
    width: 45%;
  }
  .introduction .section-header .section-title img{
    width: 100%;
    height: auto;
  }

  .introduction .section-header .heading{
    width: 100%;
  }

  .introduction .section-header .description {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0rem;
  }

  .introduction .section-footer{
    padding: 30px;
  }


  /* ------------
  スポット紹介
  */

  .introduction .spot-container{
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding: 30px;
  }

  .introduction .spot{
    float: left;
    min-height: 0;
    margin: 0;
    padding: 10px;
    width: 50%;
  }
  .introduction .spot img{
    width: 100%;
    height: 75%;
    object-fit: cover;
  }

  .introduction section:not(#safety) .spot:first-of-type {
    min-height: 0;
    width: 100%;
  }
  .introduction section:not(#safety) .spot:first-of-type img{
    width: 100%;
    height: 75%;
  }


  .introduction .section-footer{
    padding-top: 0;
    padding-bottom: 170px;
  }

  .introduction .section-footer .block-info {
    padding: 1rem;
  }

  .introduction .section-footer .block-photo{
    position: absolute;
    bottom: 0;
    right: 0;
    background: none;
    /* padding: 0; */

    width: 70%;
  }

  /* ------------
  安全管理
  */

  .introduction #safety .spot{
    width: 50%;
  }
  .introduction #safety .spot:nth-of-type(3n+1){
    clear: none;
  }
  .introduction #safety .spot:nth-of-type(2n+1){
    clear: both;
  }
  
  .introduction #safety .spot img{
    width: 100%;
    height: 75%;
  }

  /* ------------
  入会案内
  */

  .introduction #admission-info .inner{
    padding: 0 30px;
  }

  .introduction #admission-info .block dl{
    display: block;
    margin: 30px 0;
    /* font-size: 1rem; */
    border-bottom: 0;
  }

  .introduction #admission-info .block dt,
  .introduction #admission-info .block dd{
    margin-bottom: 0;
  }
  
  .introduction #admission-info .block dt{
    width: 100%;
  }
  
  .introduction #admission-info .block dd{
    width: 100%;
    padding: 15px 0 0;
    text-align: center;
  }

  .introduction #admission-info .block table{
    margin: 0 auto;
    text-align: left;
  }


  /* ------------
  入会案内
  */

  .introduction #admission-form .inner{
    padding: 0 30px;
  }

  /* ------------
  ビジター料金
  */

  .introduction #visitor .inner{
    padding: 0 30px;
  }

/* スマホCSS ここまで */
}