@charset "utf-8"; 

body {
  color: rgba(0, 0, 0, 0.678);
}

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

/* header */
  header{
    width: 100%;
    margin-bottom: 30px;
  /* width: 100%; */
  /* background-color: #3fb2f0; */
  /* height: 200px;  */
  /* margin: 0 auto; */
  /* padding:  30px auto 60px; */
}
.logo{
  width: 100%;
}

/* もともとのヘッダー↓↓ */
/* .head{
  box-sizing: border-box; 
  max-width: 1000px;
  text-align: center;
  align-items: center;
  margin:  0 auto ;
  /* outline: 1px solid black; */
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  /* background-color: #bae3f9c0 ; */
/* } */
.head-left{
  /* outline: 1px solid red; */
  background-color: white;
  margin-top: 30px;
  margin-bottom: 50px;
  border-radius: 10px;

}
.head-left img{
  width: 50%;
}
.head-right{
  /* outline: 1px solid blue; */
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: white;
  border-radius: 10px;
}
.head-right p{
  margin-bottom: 10px;
}
.head-right p:last-child{
  font-size: 1.5rem;
  margin-bottom: 0;
  font-weight: bold;
}

 /* .head {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}  */
 .logo {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
} 
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* もともとのヘッダー↑↑ */

/* h1 */

.h1{
  /* outline: 1px solid rgb(156, 155, 155); */
  margin: 30px auto ;
  text-align: center;
  color: rgba(0, 0, 0, 0.678);
}

.h1 h1{
  font-size: 3rem;
  font-weight: bold;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.678);
}

/* menu */

   
/* .menu ol{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgb(115, 158, 168); */
  /* padding: 0 100px; */
  /* font-size: 1.5rem; */
  /* font-weight: bold;} */

.menu ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgb(115, 158, 168); */
  padding: 0 100px;
  font-size: 1.5rem;
  font-weight: bold;
}


.menu ul li a{
  /* color: #5ebff3; */
  color: rgba(0, 0, 0, 0.678);
  text-decoration: none;
  width: 200px;
  height: 50px;
  box-shadow: 6px 6px 2px 1px #3fb2f0;
}
.menu ul li a:hover{
  transition: .5s ;
  /* font-size: 2rem; */
  color: #3fb2f0;
  /* color: rgba(0, 0, 0, 0.678); */
  box-shadow: none;
}

/* top */

.t-detail{
  background: url(../img/background.jpg);
}
.t-detail img{
  /* max-width: 90%; */
  border-radius: 20%;
}
#top .h2{
  margin: 60px auto ;
  text-align: center;
  color: #3fb2f0;
  font-weight: bold;
  
}
#top .h2 h2{
  font-size: 2rem;
  /* border-top: 2px dotted rgba(0, 0, 0, 0.678); */
  padding-top: 20px;
}

#top .t-h3{
  text-align: center;
  margin:0 auto 40px;
  font-size: 1.5rem;
  border-bottom: 2px solid #034d75c0;
  max-width: 1000px;
}

#top .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 100px;
}
#top .flex2{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 100px;
}

.t-img{
  width: 50%;
  padding: 10px;
}

.t-text{
  width: 50%;
  padding: 10px;
}

/* d-list */

#d-list{
  background: url(../img/background2.jpg);
}

.list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  max-width: 1000px;
  
}

#d-list h2{
  margin: 60px auto ;
  text-align: center;
  color: #3fb2f0;
  font-weight: bold;
  /* border-top: 2px dotted rgba(0, 0, 0, 0.678); */
  font-size: 2rem;
  padding-top: 20px;
}

.d-h3{
  text-align: center;
  margin:0 auto ;
  font-size: 1.5rem;
  max-width: 1000px;
}
.d-img{
  text-align: center;
  margin-bottom: 30px;
}
.d-img img{
  width: 100px;
  height: 100px;
  border-radius: 10px;
}



/* company */
#company{
  margin: 0 auto 30px;
  background: url(../img/background.jpg);
}
#company .detail{
  max-width: 1000px;
  margin: 0 auto ;
}


#company h2{
  margin: 60px auto ;
  text-align: center;
  color: #3fb2f0;
  font-weight: bold;
  /* border-top: 2px dotted rgba(0, 0, 0, 0.678); */
  font-size: 2rem;
  padding-top: 20px;
}
#company dl{
  padding: 20px 0;
  border-bottom: 2px solid #bae3f9c0;
}
#company dl:last-child{
  border-bottom: 2px solid #bae3f9c0;
}
#company dt{
  float: left;
  padding-left: 10px;
}
#company dd{
  padding-left: 200px;
}

/* map */
.map{
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto 80px;
  text-align: center;
  overflow: hidden;
}


/* opentime */
.opentime{
  /* width: 1000px; */
  margin: 0 auto  80px;
  text-align:center
  
}
.open-1{
  max-width: 1000px;
  margin: 0 auto 20px;
}
.opentime p{
  font-size: 1.2rem;
  color: rgba(255, 0, 0, 0.746);
}
.time{
  font-size: 1.2rem;
  font-weight: bold;
}

thead{
  background: #bae3f9c0;
}
tr{
  /* background: #bae3f9c0; */
  border-bottom: rgba(56, 56, 56, 0.459) 1px dotted;
}
th{
  padding: 20px 0;
}

.time{
  width: 30%;
}




/* room */

#room{
  margin: 0 auto;
  background: url(../img/background2.jpg);
}

#room h2{
  margin: 60px auto 10px;
  text-align: center;
  color: #3fb2f0;
  font-weight: bold;
  /* border-top: 2px dotted rgba(0, 0, 0, 0.678); */
  font-size: 2rem;
  padding-top: 20px
}

.room-img{
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.r-img img{
  width: 230px;
  height: 230px;
  border-radius: 50%;
  /* margin: auto; */
  padding: 0 5px;

}
.r-text{
padding: 0 10px;
margin:0 auto 20px;
text-align: center;
}

/* form */
#form{
  margin: 0 auto 40px;
  text-align: center;
}

#form h2{
  margin: 60px auto 10px;
  text-align: center;
  color: #3fb2f0;
  font-weight: bold;
  /* border-top: 2px dotted rgba(0, 0, 0, 0.678); */
  font-size: 2rem;
  padding-top: 20px
}
#form p{
margin-bottom: 20px;
font-size: 1.5rem;
}

.telweb{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.telweb a{
  box-sizing: border-box;
  text-decoration: none;
  padding: 0;
}

.tw{
  box-sizing: border-box;
  background-color: #bae3f9c0;
  border-radius: 10px;
  width: 400px;
  height: 100px;
  align-items: center;
}
.tw:hover{
  background-color: hsla(201, 98%, 51%, 0.753);
  transition: 1s;
}
.tw p{
  margin: auto;
  font-size: 1.1rem;
  font-weight: bold;
  padding-top: 30px;
  color: rgba(0, 0, 0, 0.651);
}
.tw p:hover{
  font-size: 1.2rem;
  color: aliceblue;
}


/* pagetop */

#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: hsla(201, 98%, 51%, 0.753);
  opacity: 0.6;

}


#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;

}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: white;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;

}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;

}


/* footer */
.footer{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
  background-color: hsla(201, 98%, 51%, 0.753);
  color: whitesmoke;
  font-weight: bold;
}


/* media850 */

@media (max-width: 850px){
  /* header */
  /* header{
    width: 100%;
    background-color: #bae3f9c0 ;
    height: 100%;
    margin: 0 auto; 
    padding:  30px auto 60px;
  } */
  /* .head{
    flex-direction: column;
  }
  .head-left{
    margin-top: 30px;
    margin-bottom: 0;
  }

  .head-right{
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .h1 h1{
    border-bottom: none;
  } */




  /* menu */
.menu{
  outline: 1px solid black;
  display:none;
}

#top .h2 h2{
  font-size: 2rem;
  border-top:none;
  padding-top: 20px;
}

  .telweb{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
}

  .telweb a{
  padding-bottom: 10px;
}
  .tw{
  background-color: #bae3f9c0;
  border-radius: 10px;
  max-width: 375px;
  /* height: 100px; */
  align-items: center;
}

}


/* media 750 */

@media (max-width: 700px){
  .h1 h1{
    border-bottom: none;
  }
  .list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 375px;
  }
  /* .room-img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-bottom: 10px;
  } */
  /* .r-img img{
    width: 100%;
    height: 100%;
    border-radius: 0;
  } */


}




/* media 600 */

@media (max-width: 600px){

  .h1 h1{
    font-size: 1.8rem;
    border-bottom: none;
  }
  #top .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto 60px;
  }
  #top .flex2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 60px;
  }
  .t-img{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    
  }
  
  .t-text{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
  }

  .h1{
    margin-bottom: 0;
  }
  
  #top .h2{
    margin: 15px auto;
 
  }
  #top .h2 h2{
    font-size: 1.5rem;
 
  }

  #top .t-h3{
    font-size: 1.2rem;
  }


}