@charset "utf-8";

body{
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  background-color: #fff;
}

.visual_img h2, .inner h3, .inner h4, .inner p, section#access h3{
  font-family: 'Noto Serif JP', serif;
}


.reserve_schedule h2, .reserve_outer .reserve_numberofpersons h2, .reserve_schedule ul li .reserve_info dt, .reserve_schedule ul li .reserve_info dd, .reserve_outer .reserve_numberofpersons form tr th{
  font-family: 'Noto Sans JP', sans-serif;
 }

/* toggle */
.btn{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
.btn span{
  display: block;
  height: 2px;
  width: 20px;
  margin-bottom: 6px;
  background-color: #fff;
  transition: 0.5s;
}
.btn.active span:nth-child(1){
  transform: rotate(45deg) translate(5.5px,5.5px);
background-color: #fff;
}
.btn.active span:nth-child(2){
  opacity: 0;
}
.btn.active span:nth-child(3){
  transform: rotate(-45deg) translate(5.5px,-5.5px);
  background-color: #fff;
}

div.btn#index_btn{
  padding: 15px 35px 10px 15px;
  margin: 20px 20px 0 0;
  width: 35px;
  background-color: #225E20;
  border-radius: 50px;
}



/* 出てくるナビゲーション */
nav.glonav {
  background-color: #EDFFED;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 100%;
  right: 0;
  z-index: 9998;
  transition: 0.5s;
}
nav.glonav.active{
  bottom: 0;
}

div.glonav_item{
  margin-top: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.glonav_item ul{
  width: 20%;
}
div.glonav_item ul li{
  padding-bottom: 25px;
  list-style-type: none;
  text-align: start;
}
div.glonav_item ul li:nth-child(7){
  padding-bottom: 0;
}

div.glonav_item ul li a{
  color: #222;
  text-decoration: none;
  font-size: 1.6rem;
}

nav.glonav h1 a{
  width: 100px;
}
div.glonav_info{
  width: 20%;
}

div.glonav_info dl dt{
  padding-bottom: 5px;
  color: #fff;
  font-size: 1.6rem;
}

div.glonav_info dl dd a{
  padding-bottom: 20px;
  color: #fff;
  font-size: 1.6rem;
}

div.glonav_info p{
  color: #fff;
  font-size: 1.6rem;
}
div.glonav_info h3{
  margin: 0 auto;
  width: 170px;
  border-radius: 5px;
  line-height: 50px;
  background-color: #9D1E3C;
  text-align: center;
}

div.glonav_info h3 p a{
  color: #fff;
}
div.glonav_item ul{
  width: 100%;
}

div.glonav_contact{
  margin: 0 auto;
  padding: 30px;
  margin-bottom: 50px;
  width: 250px;
  background-color: #225E20;
  text-align: start;
}

.visual_img h2{
  width: 100%;
  padding: 200px 0;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size: 3.2rem;
  text-align: center;
}


/* visual_img */
div.visual_img{
  background-image: url(../images/main_bg.jpg);
  background-size: cover;
  height: 768px;
}

/* nav */
main.wrapper #top header{
  /* padding-top: 50px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main.wrapper #top header h1{
  /* margin-left: 20px; */
}
main.wrapper #top header h1 a{
  width: 100px;
}

main.wrapper #top header h3{
  margin: 100px 20px 0 0;
  width: 100px;
  position: relative;
}

main.wrapper #top header h3 a{
  line-height: 40px;
  color: #fff;
  font-size: 1.6rem;
  background-color: #9D1E3C;
  border-radius: 5px;
  text-align: center;
}


/* outer */
div.outer{
  display: flex;
  align-items: center;
}

div.outer p.text{
  color: #000;
  font-size: 1.6rem;
  line-height: 4rem;
}

div.outer p.text#guestroom_text, p.text#hotspring_text, p.text#meal_text{
  color: #fff;
}

/* greeting */

div.outer p#greeting_photo{
  width: 500px;
}


div.outer#greeting_content{
  padding: 100px 0;
  justify-content: center;
  flex-direction: row-reverse;
}

/* guestroom */
section#guestroom{
background-color: #225E20;
  align-items: flex-end;
}

div.outer#guestroom_content{
  justify-content: flex-end;
}


/* hotspring */
section#hotspring{
background-color: #225E20;
  justify-content: start;
}

div.outer#hotspring_content{
  justify-content: flex-end;
  flex-direction: row-reverse;
}

/* meal */
section#meal{
  background-color: #225E20;
}

div.outer#meal_content{
  justify-content: flex-end;
}

/* news */
section#news{
  display: block;
  margin: 150px 0;
  text-align: center;
}

section#news h3{
  margin-bottom: 20px;
  font-size: 1.6rem;
  color: #225E20;
}

section#news h5 a{
  margin: 0 auto;
  font-size: 1.6rem;
  width: 170px;
  line-height: 50px;
  color: #fff;
  background-color: #225E20;
  border-radius: 5px;
  text-align: center;
}


ul.news_content{
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul.news_content li{
  padding: 50px;
}


ul.news_content img{
  max-width: 300px;
}

ul.news_content li a dl{
  padding: 10px 0 0 20px;
}

ul.news_content li a dl dt{
  color: #000;
  font-size: 1.6rem;
  text-align: start;
}
ul.news_content li a dl dd{
  color: #000;
  font-size: 1.6rem;
  text-align: start;
}



/* access */
section#access{
  margin: 150px 0 100px 0;
  text-align: center;
}

section#access h3{
  margin-bottom: 80px;
  font-size: 1.6rem;
  color: #225E20;
}
section#access p{
  padding-top: 50px;
  text-align: center;
  font-size: 1.6rem;
}
section#access p span{
  display: block;
}

/* map */

.map-wrap {
  max-width: 50%;
}
 
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
}

.map iframe {
  padding: 0 100px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

/* outer */
div.outer h3{
  margin-bottom: 20px;
  font-size: 1.6rem;
  color: #225E20;
}

div.outer h4{
  color: #000;
  margin-bottom: 30px;
  font-size: 2.4rem;
}

div.outer h4.section_text{
  color: #fff;
}



div.outer p#guestroom_photo, p#hotspring_photo, p#meal_photo{
  width: 800px;
}
/* inner */
div.inner{
  padding: 0 20px;
  width: 500px;
}

div.inner a{
  font-size: 1.6rem;
  width: 170px;
  line-height: 50px;
  color: #225E20;
  background-color: #EDFFED;
  border-radius: 5px;
  text-align: center;
}


div.inner h5{
  margin-top: 80px;
}


/* footer */
footer{
  padding: 50px 0 30px 0;
  background-color: #EDFFED;
  text-align: end;
}
footer h5{
  margin: 0 0 30px 50PX;
  width: 100px;
}
footer h3 p a{
  margin: 0 auto;
  width: 170px;
  line-height: 50px;
  color: #fff;
  background-color: #9D1E3C;
  text-align: center;
  border-radius: 5px;
}

footer ul{
  width: 400px;
}

footer ul li{
  list-style-type: none;
  text-align: center;
}

footer ul li a{
  padding-bottom: 30px;
  color: #000;
  text-decoration: none;
  font-size: 1.6rem;
}

div.footer_item{
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}

div.footer_1.info{
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

div.footer_content{
  padding: 30px 40px;
  margin-bottom: 50px;
  width: 250px;
  background-color: #225E20;
  text-align: start;
}
div.footer_content dl dt{
  padding-bottom: 5px;
    color: #fff;
    font-size: 1.6rem;
}

div.footer_content dl dd a{
  padding-bottom: 20px;
  color: #fff;
  font-size: 1.6rem;
}

div.footer_content p{
  color: #fff;
  font-size: 1.6rem;
}

footer small{
  padding-right: 30px;
  font-size: 1.6rem;
}

/* 下層ページ */
/* room.html */

/* visual_img */
div.visual_img#room_img{
  background-image: url(../images/room.jpg);
  background-size: cover;
  height: 768px;
}

div.btn#room_btn{
  padding: 15px 35px 10px 15px;
  margin-top: -15px;
  width: 35px;
  background-color: #225E20;
  border-radius: 50px;
}


/* section */
.outer{
  margin: 0 auto;
}
.outer p{
  max-width: 800px;
  color: #000;
  font-size: 1.6rem;
}
.outer h4{
  font-size: 1.6rem;
}
.outer h3{
  margin: 0 auto;
  color: #225E20;
  font-size: 1.6rem;
}

.outer h3 span{
  display: block;
  font-size: 3rem;
}

.outer div.label{
  margin: 0 auto;
  padding: 40px 0;
  width: 200px;
  display: flex;
  justify-content: space-between;
}
.outer .room_text{
  margin: 0 auto;
  padding-bottom: 20px;
  max-width: 800px;
}
.outer .box{
  width: 60%;
  margin: 0 auto;
}

.outer .room_detail{
  padding: 30px 0 50px 0;
}

.outer .room_detail dl{
  margin: 0 auto;
}
.outer .room_detail dl dd{
  padding-bottom: 10px;
    font-size: 1.6rem;
    width: 170px;
    text-align: start;
}
.outer .room_detail dl dt{
  font-size: 1.6rem;
  text-align: start;
    max-width: 230px;
}

.outer dl.room_item{
  display: flex;
  max-width: 400px;
  text-align: center;
}

/* room_summary */

.summary_area{
  padding: 50px;
  text-align: center;
}

.room_summary{
  padding-bottom: 50px;
  margin: 0 auto;
  max-width: 800px;
  background-color: #EDFFED;
  text-align: center;
}
.room_summary h3{
  padding: 40px 0;
  font-size: 3rem;
}
.room_summary .room_summary_item{
  margin: 0 auto;
  padding-bottom: 10px;
  max-width: 1000px;
  font-size: 1.6rem;
  display: flex;
  text-align: start;
}

.room_summary .room_summary_item dd{
  text-align: center;
  width: 200px;
}
.room_summary .room_summary_item dt{
  max-width: 800px;
}

/* room_reserve */
.room_reserve{
  padding: 50px 0 100px;
  text-align: center;
}
.room_reserve .room_reserve_item{
  margin: 0 auto;
  
  width: 300px;
}
.room_reserve .room_reserve_item h3{
  margin: 0 auto;
  font-size: 2rem;
  line-height: 3rem;
}
.room_reserve .room_reserve_item h3 a{
  padding: 15px 0;
  color: #fff;
  background-color: #9D1E3C;
  border-radius: 5px;
}
.room_reserve .room_reserve_item h3 a span{
  display: block;
}




/* reserve.html */

/* header */
header h1{
  margin: 50px 0 0 50px;
  text-align: center;
  width: 100px;
}

.reserve_nav{
  text-align: center;
}
.reserve_nav ol.search{
  padding-top: 40px;
  display: flex;
  justify-content: center;
}
.reserve_nav ol.search li{
  padding: 10px;
 
}
.reserve_nav ol.search li.search_1, li.search_2, li.search_3{
  margin: 0 15px;
  font-size: 1.6rem;
  background-color: #EDFFED;
}
.search_1::before{
  content: url(../images/search_1.png);
}
.search_2::before{
  content: url(../images/search_2.png);
}
.search_3::before{
  content: url(../images/search_3.png);
}

.reserve_area h2{
  margin: 0 auto;
  padding: 50px 0 0;
  text-align: center;
}
.reserve_area h2 a{
  padding: 20px 15px;
  color: #fff;
  font-size: 1.6rem;
  background-color: #9D1E3C;
  border-radius: 5px;
}
.reserve_area h3{
  padding-top: 80px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
}
.reserve_area h3 a{
  padding: 20px 15px;
  color: #fff;
  font-size: 1.6rem;
  background-color: #9D1E3C;
  border-radius: 5px;
  width: 200px;
}

div.reserve_area{
  margin: 0 auto;
  padding: 150px 0;
  text-align: center;
  max-width: 1050px;
}
/* reserve_outer */
.reserve_outer{
  display: flex;
  justify-content: space-between;
}
/* reserve_schedule */
.reserve_schedule{
  text-align: center;
  max-width: 500px;
  background-color: #f5f2f2;
}
.reserve_schedule h2{
  padding: 50px 0;
font-size: 2.4rem;
}
.reserve_schedule ul li .reserve_info{
  margin-left: 60px;
  display: flex;
}
.reserve_schedule ul li .reserve_info dt{
  margin: 0 auto;
  padding: 5px 0 0 60px;
  width: 200px;
  font-size: 1.6rem;
  text-align: start;
}
.reserve_schedule ul li .reserve_info dd{
  margin: 0 auto;
  width: 300px;
  font-size: 1.6rem;
  text-align: start;
}
.before_test::before{
  content: "：";
    left: -1.5em;
}

#app{
  padding-top: 30px;
}


/* reserve_numberofpersons */
.reserve_numberofpersons{
  padding: 0 50px 50px;
text-align: center;
max-width: 500px;
background-color: #f5f2f2;
}
.reserve_outer .reserve_numberofpersons h2{
  padding: 50px 0;
  font-size: 2.4rem;
}
.reserve_outer .reserve_numberofpersons form{
  max-width: 300px;
  margin: 0 auto;
}

.reserve_outer .reserve_numberofpersons form tr th{
  padding-top: 10px;
  font-size: 1.6rem;
  text-align: start;
}

.reserve_outer .reserve_numberofpersons form tr td{
  padding-top: 10px;
  text-align: start;
}
.reserve_outer .reserve_numberofpersons form tr td select{
  padding: 15px;
  margin-left:30px;
  width: 100px;

}


/* jquery */
.ui-widget.ui-widget-content {
  margin: 0 auto;
  padding: 10px;
  width: 80%;
  font-size: 1.6rem;
  text-align: center;
}
.ui-widget.ui-widget-content tbody tr{
  width: 100%;
}

.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.4em;
  padding-bottom: 10px;
  line-height: 4rem;
}

.ui-state-default, .ui-widget-content .ui-state-default{
  text-align: center;
}


/* ここからメディアクエリ */
@media (hover:hover){
  /* hoverできるデバイスにのみ適用させるcssを記述する。hoverの記述はすべてこの中に入れる。 */
  div.glonav_info h3 p a:hover{
opacity: 0.8;
}
main.wrapper #top header h3 a:hover{
  opacity: 0.8;
}
div.glonav_item ul li a:hover{
  opacity: 0.5;
}
div.inner a:hover{
  opacity: 0.8;
}
section#news h5 a:hover{
  opacity: 0.8;
}
ul#news_content li a:hover{
  opacity: 0.5;
}
footer h3 p a:hover{
  opacity: 0.8;
  }
  footer ul li a:hover{
    opacity: 0.5;
  }
  .room_reserve .room_reserve_item h3 a:hover{
    opacity: 0.8;
  }
}


/* ブレイクポイント1100pxでデザインを切り替え */
@media screen and (max-width:1100px){

  div.visual_img{
    width: 100%;
    height: 100vh;
  }
  div.btn#index_btn{
    margin-top: 0;
  }
  div.glonav_info{
    width: 40%;
    }
  div.glonav_item ul {
    margin: 0 auto;
    width: 30%;
}
  div.glonav_item ul li{
    margin: 0 auto;
    width: 100%;
  }
  div.glonav_contact{
    /* margin: 50px; */
  width: 250px;
  }
  
  ul.news_content li{
    padding: 10px;
  }
  
  section#greeting{
    margin: 100px 0 100px 0;
  }
  div.outer#greeting_content{
    padding-bottom: 0;
  }
  section#guestroom{
    padding-top: 100px;
  }
  
  section#hotspring{
    padding-top:50px
  }
  section#meal{
    padding: 50px 0 100px 0;
  }
  section#news{
    margin-top: 100px;
  }
  section#news h5 a{
    margin: 30px auto;
  }
  section#access{
    margin: 100px 0;
  }
  div.outer {
    display: block;
  }
  .outer p{
    max-width: 600px;
  }

  div.outer#greeting_content {
    padding-top: 0;
    text-align: center;
  }

  div.inner{
    margin: 0 auto;
  }

  div.inner h5 {
    margin: 20px auto;
    text-align: center;
    width: 170px;
}

  div.outer p#greeting_photo {
    margin: 0 auto;
  }

  div.outer#guestroom_content{
    text-align: center;
  }

  div.outer p#guestroom_photo, p#hotspring_photo, p#meal_photo{
    max-width: 500px;
    padding-top: 10px;
    margin: 0 auto;
  }

  .reserve_outer{
    margin: 0 auto;
    display: block;
    text-align: center;
    max-width: 500px;
}

.reserve_schedule {
  margin-bottom: 50px;
  padding-bottom: 50px;
}

div.reserve_area {
  padding: 50px 0;
}

.outer .room_text{
  width: 600px;
}
}


@media screen and (max-width:768px){
nav.glonav{
  display: block;
}

div.glonav_item{
  margin-top: 30px;
  display: block;
  width: 100%;
}

div.glonav_item ul{
  width: 100%;
}
div.glonav_item ul li {
  margin: 0 auto;
  width: 100px;
}

div.glonav_info{
width: 100%;
}

div.glonav_contact{
  margin: 20px auto;
  width: 250px;
}

div.glonav_info h3{
  /* width: 100%; */
}

header h1{
  margin: 30px 0 0 30px;
}


div.visual_img{
  width: 100%;
  height: 100vh;
}
div.outer p#guestroom_photo, p#hotspring_photo, p#meal_photo{
  width: 90%;
}
div.inner{
  width: 80%;
  text-align: start;
}
.visual_img h2{
  font-size: 2rem;
}
div.outer h4{
  margin-bottom: 10px;
}
main.wrapper #top header h1{
  padding-left: 5px;
}
div.btn#index_btn{
  margin: 10px;
}
main.wrapper #top header h3{
  margin: 60px 20px 0 0;
}

div.outer p#greeting_photo{
  padding-top: 30px;
  width: 100%;
}
div.outer p#greeting_photo {
  max-width: 500px;
  width: 100%;
}
section#access h3{
  margin-bottom: 30px;
}
section#access p{
  padding-top: 0;
}
.map iframe{
  padding: 0 50px;
}
div.footer_item{
  display: block;
}
div.footer_content{
  margin: 20px auto;
}
footer ul{
  margin: 0 auto;
  width: 100px;
}
footer small {
  padding-right: 0;
  font-size: 1.2rem;
}

}