@charset "UTF-8";

h1 {
  width:1100px;
  height:auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 99;
  text-align: center;
  font-family: "Dela Gothic One";
  font-size: 5em;
  font-weight: 500;
  text-transform: uppercase;
  color: #fa6417;
  text-shadow: 2px 2px 3px #6b1a11;
  padding: 1.5em 0 0 0;
  line-height: 1;
}
h1 small {
  display: block;
  text-transform: lowercase;
  font-size: 0.5em;
  padding: 0em 0 1em 0;
}

@media screen and (max-width:767px){
h1 {width:100%;
	font-size: 2.1em;
	top: 50%;
	}
	
h1 small {
   padding: 1em 0 1em 0;
   font-size: 0.8em;
}	
}

.text__bound {
  animation: key .3s ease infinite alternate;
}
@keyframes key {
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}


/**/
.loop {
 position: relative;
 background-color: #ffffff;
  width: 100%;
  height: 80vh;
  margin: 0 auto;
}

.slick__container {
  padding-top: 0px;
  padding-bottom: 5px;
}

.slide {
    width: 100%;
    margin: 0px;
	/*pointer-events: none;*/
}

.slick__item {
    margin-right: 0px;
    margin-left: 0px;
}

.slick__item img {
  width: 100%;
  height : 100vh;
  /*object-fit: cover;*/
}

.dots-class button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.dots-class {
    display: flex;
    justify-content: space-between;
    margin-top: -180px;
}

.dots-class li {
    width: 24%;
    height: 8px;
    background-color: #ccc;
    cursor: pointer;
    position: relative;
}
.dots-class li::before {
    content: "";
    display: inline-block;
    background-color: #000066;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}

.dots-class li.slick-active::before {
    background-color: #000066;
    animation: progressbar-anime 3.5s linear forwards;
}

@keyframes progressbar-anime {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
@media screen and (max-width:1024px){
.loop {
  width: 100%;
  height: 76vh;
  margin: 0 auto;
}

.slick__item img {
  width: 100%;
  height : 80vh;
 object-fit: cover;
}	

.dots-class {
    display: flex;
    justify-content: space-between;
    margin-top: -20px;
}


.dots-class li.slick-active::before {
    background-color: #000066;
    animation: progressbar-anime 4.5s linear forwards;
}	
}
 /*=== 画像の表示エリア ================================= 
.slide {
  position   : relative;
  overflow   : hidden;
  width      : 100%;
  height     : 600px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 
  background : #fff;  
}
 
 === 画像の設定 =======================================
.slide img {
  display    : block;
  position: absolute;
  width: 100%;
  height : 100%;
  width      : inherit;
  height     : inherit;
  object-fit: cover;
  opacity: 0;
  animation-name: anime;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-duration: 20s;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= 
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
.slide img:nth-of-type(5) { animation-delay: 16s }
 
 /*=== スライドのアニメーション ========================= 
@keyframes anime{
   0% { opacity: 0 }
   10% { opacity: 1 }
  20% { opacity: 1 }
  30% { opacity: 0 }
 100% { opacity: 0 }
}*/

/*intoro*/
.intro {
  width:98%;
  height: auto;
  margin: 30px auto;
  padding: 10px;
  background-color: #d9d9d9;
  box-sizing: border-box; 
  border-radius: 10px;
}

.intro .wrap {
  position: relative;
}

.intro h3 {
  font-size: 25px;
  line-height: 1.5;
  margin: 0px 0px 12px 0px;
  text-shadow: 1px 1px 2px #808080;
  text-align: center;
}

.intro p {
  width: 100%;
  max-width: 1100px;
  font-size: 19px;
  color: #000000;
  line-height: 1.5;
  margin: 0px 0px 6px 0px;
  padding: 0px;
  text-align: center;
}

/*フェードイン*/
.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/*スケジュール*/
.sche{
 width: 100%;
 /*max-width: 2000px;*/
 height: auto;
 margin: 0px auto;
padding:0px 0 50px 0px;
 box-sizing:border-box;
}

.sche .wrap {
  position: relative;
}

.sche h2{
font-family: "Dela Gothic One";
font-size:37px; 
line-height:2;
text-align: center;
padding:20px 0 30px 0px;
text-decoration: underline #0EC8D8  8px;
}

*{
  margin:0;
  padding:0;
  line-height: 1.3em;
} 

/* time-schedule */
.time-schedule {
  list-style: none;
  margin: 0 13em 0 13em;
  padding-left: 30px;
  border-left: 6px solid #deeef7;
  box-sizing: border-box;
}

.time-schedule li {
  width: 110%;
  /*min-width: 960px;*/
  margin: 0 0;
  padding: 20px 0;
  position: relative;
}

.time-schedule span.time {
  width: 5em;
  height: auto;
  display: inline-block;
  margin-left: -8em;
  padding:5px;
  margin-top: 15px;
  vertical-align: top;
  position: relative;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box; 
  border-radius: 6px;
  background-color: #3388dd;
  color: #fff;
}

.time-schedule span.time::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 0;
  background: #3388dd;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}


.time-schedule .sch_box {
  display: inline-block;
  width: 100%;
  margin-left: 30px;
  padding: 15px 10px 15px 10px;
  vertical-align: middle;
  background: #efefef;
  box-sizing: border-box;
  border-radius: 6px;
}

.time-schedule .sch_title {
  font-size: 20px;
  font-weight: 700;
}

.time-schedule .sch_tx {
  font-size: 18px;
  font-weight: normal;
}

/*画像サイズ並び調整*/
.b_side{
    display:flex;
    justify-content: center;
	
}
.b_side>div{
    width:100%;
	margin: 10px;
    padding: 5px;
}

/*注釈*/
.cation{font-size:15px; color: #808080; line-height:1; margin: 15px 30px 0px 30px;}
.cation_2{font-size:15px; color: #808080; line-height:1; text-align: right; margin: 5px 150px 0px 0px;}
.cation_3{font-size:15px; color: #808080; line-height:1; text-align: center;margin: 15px 30px 0px 30px;}
.cation_4{font-size:15px; color:#F50110; line-height:1; text-align: center;margin: 5px 30px 10px 30px;}
.cation_5{font-size:20px; font-weight: 600; color:#F50110; line-height:1; text-align: center;margin: 5px 30px 10px 30px;}


/*料金説明*/
.price{
 width: 90%;
  height: 100%;
  margin: 0px auto;
  padding: 0px 0 20px 0px;
}

.price .wrap {
  position: relative;
}

.price h2{
font-family: "Dela Gothic One";
font-size:37px; 
line-height:2;
text-align: center;
padding:10px 0 50px 0px;
text-decoration: underline #0EC8D8 8px;
}

.price p {
  font-size: 18px;
  color: #06348b;
  line-height: 1.8;
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.price .ttl{
    background: #06348b;
    padding: 10px 10px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.price .ttl h3{
background: url("../images/common/sauna_ico.png") left center no-repeat;
background-size: 6%;
    padding: 0 0 0 40px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
line-height: 23px;
}

.price .ttl ul{
display: flex;
    justify-content: space-between;
}


.price .ttl ul li{
    background: #fff;
	color: #06348b;
    padding: 8px 10px;
    margin-left: 5px;
}

/*料金*/
.fee{
   width: 75%;
   height: 100%;
   background: #06348b;
   margin:25px auto 10px auto;
   padding: 20px 0 20px 0;
   border: 5px solid #aaa;
	}
 
.fee p {
  font-size: 30px;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
}

.fee p span{
  font-size: 20px;
  color: #ffffff;
  line-height: -1.0;
  text-align: center; 
}


/*貸し出し品*/
.rental{
 width: 90%;
  height: 100%;
  margin: 0px auto;
  padding: 10px 0 20px 0px;
}

.rental .wrap {
  position: relative;
}

.rental_box {
    border: 1px solid #003912;
    border-radius: 10px;
	padding: 40px 30px 20px;
    margin: 40px 0 30px;
}

.rental_box h3 {
font-size: 2.0rem;
    line-height: 1.1;
    margin: -50px 0 20px;
    text-align: center;
}
.rental_box h3 span {
    display: inline-block;
    background: #fff;
    padding: 0 15px;
}

.rental a:hover{color:#F33C09; text-decoration:underline;}


/*お問い合わせ*/
.contact{
 width: 90%;
  height: 100%;
  margin: 0px auto;
  padding: 0px 0 20px 0px;
}

.contact .wrap {
  position: relative;
}

.contact h2{
font-family: "Dela Gothic One";
font-size:37px; 
line-height:2;
text-align: center;
padding:20px 0 50px 0px;
text-decoration: underline #0EC8D8 8px;
}

.contact p {
  font-size: 18px;
  color: #06348b;
  line-height: 1.8;
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.contact a:hover{color:#F33C09; text-decoration:underline;}



.inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/*注意事項*/
.cat{
 width:100%;
  height: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px 0 50px 0px;
  background-color: #d9d9d9;
  
}

.cat .wrap {
  position: relative;
}

.cat h2{
font-family: "Dela Gothic One";
font-size:37px; 
line-height:2;
text-align: center;
padding:20px 0 5px 0px;
text-decoration: underline #0EC8D8 8px;
}

.cat h3{
font-size:20px; 
line-height:1.5;
padding:25px 0 5px 0px;
}

.cat p {
  font-size: 14px;
  color: #000000;
  line-height: 1.8;
  padding: 5px 5px 5px 5px;
  text-align: left;
}

.cat ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
}
.cat ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.cat ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 13px;
  border-radius: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}



@media screen and (max-width:767px){
  .intro {
    padding: 5px 5px 10px 5px;
  }
  .intro h3 {
    font-size: 19px;
    line-height: 1.5;
    margin: 10px 0 10px 0;
  }
  .intro p {
    width: auto;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
  }
	
	/*スケジュール*/
.sche{
 width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 10px 0 5px 5px;
}

.sche h2{
font-size:30px; 
line-height:1.5;
text-align: center;
padding:10px 0 20px 0px;
}

/* time-schedule */
.time-schedule {
  list-style: none;
  margin: 0 3em 0 3em;
  padding-left: 0px;
  border-left: 2px solid #deeef7;
  box-sizing: border-box;
}

.time-schedule li {
  width: 100%;
  margin: 5px 0px 5px 5px;
  padding: 0px 0px 10px 0px;
  position: relative;
}

.time-schedule span.time {
  margin-left: -2.5em;
  padding:3px;
  margin-top: 15px;
  vertical-align: top;
  position: relative;
  text-align: center;
  box-sizing: border-box; 
  border-radius: 3px;
  background-color: #3388dd;
  color: #fff;
}

.time-schedule span.time::after {
  display: none;
}


.time-schedule .sch_box {
  display: inline-block;
  width: 105%;
  margin: 10px 0px 5px 5px;
  padding: 15px 10px 15px 10px;
  vertical-align: middle;
  background: #efefef;
  box-sizing: border-box;
  border-radius: 6px;
}

.time-schedule .sch_title {
  font-size: 16px;
  font-weight: 700;
  margin: 3px 0px 15px 0px;
}

.time-schedule .sch_tx {
  font-size: 15px;
  font-weight: normal;
  margin: 0px 0px 15px 0px;
}	
	
.b_side{
      flex-wrap: wrap;
	
}
.b_side>div{
    width:100%;
	margin: 5px;
    padding: 0px;
}	
	
	
.price{
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px 0 20px 0px;
 box-sizing:border-box;
}	
	
.price h2{
font-size:30px; 
padding:5px 0 20px 0px;
line-height: 1.5;
}

.price p {
  font-size: 16px;
  color: #06348b;
  line-height: 1.8;
  padding: 5px 5px 5px 5px;
  text-align: left;
}

.price .ttl{
    padding: 10px;
        display: block;
        margin-bottom: 20px;
}

.price .ttl h3{
 
  padding: 0 0 0 30px;
  font-size: 1.2rem;
        line-height: 1.2;
        margin-bottom: 10px;
}

.price .ttl ul{
   justify-content: center;
}

.price .ttl ul li{
    padding: 10px;
    font-size: 1.0rem;
}

/*料金*/
.fee{
   width: 100%;
   height: 100%;
   margin:15px auto 15px auto;
	}
 
.fee p {
  font-size: 20px;
  color: #ffffff;
  line-height: 1.8;
  text-align: center;
}	

.fee p span{
  font-size: 14px;
  color: #ffffff;
  text-align: center; 
}

.cation_2{font-size:15px; color: #808080; line-height:1; text-align: right; margin: 5px 15px 0px 10px;}	
.cation_3{font-size:15px; color: #808080; line-height:1; text-align: center;margin: 15px 10px 0px 10px;}
	
/*貸し出し品*/
.rental{
 width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 10px 0 20px 0px;
}

.rental p{text-align: center;}
.rental_box {
    border: 1px solid #003912;
    border-radius: 10px;
	padding: 20px 10px 20px;
    margin: 40px 0 30px;
}

.rental_box h3 {
font-size: 1.5rem;
    line-height: 1.1;
    margin: -30px 0 5px;
    text-align: center;
}
.rental_box h3 span {
    display: inline-block;
    background: #fff;
    padding: 0 5px;
}
	
/*お問い合わせ*/
.contact{
 width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px 0 10px 0px;
}

.contact h2{
font-size:30px; 
padding:0px 0 20px 0px;
}

.contact p {
  font-size: 16px;
  padding: 5px 20px 10px 20px;
  text-align: center;
}	
	
/*注意事項*/

.cat h2{
font-size:30px;
line-height: 1.5;
padding:10px 0 20px 0px;
}

.cat h3{
font-size:15px; 
}

.cation_4{font-size:13px; color:#F50110; line-height:1; text-align: center;margin: 5px 5px 10px 5px;}	
.cation_5{font-size:18px;font-weight: 600; color:#F50110; line-height:1.5; text-align: center;margin: 5px 5px 10px 5px;}
}