:root {
  /* --outside-width: 100%; */
  --font-size-sp: 16px;
}
*:focus {
  outline: none;
}
body{
  font-size: 18px;
  font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
  background: #ebebeb;
}
p{
  margin: 0;
}
h2{
  margin-top: 10px;
}
li{
  list-style: none;
}
span.font_bold{
  font-weight: bold;
}
.center{
  text-align: center;
}
/* #top{
  background: rgb(255,255,255,.2);
} */
#header{
  width: 86%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
#gnavi{
  position: initial;
  margin-bottom: 10px;
}
#news{
  float: initial;
  width: 100%;
}
#menu{
  margin-bottom: 0;
  float: initial;
  width: initial;
}
#menu li a{
  background:#312010;
}
/* #menu li a:hover{
  background:#fff;
  opacity: .5;
} */
#gnavi a, .sp_gnavi a{
  padding-left: 15px;
  background: url(../images/bg_gnavi.gif) 0 50% no-repeat;
  color: #000000;
}
#main{
  width: initial;
  float: initial;
  background: none;
}
#main h2{
  background: #98534B;
  font-size: 24px;
  color: #fff;
  padding: 2px 5px 0px 5px;
  border-bottom: 3px solid #823C34;
}
#main h4{
  background: none;
  /* font-size: 16px;
  color: initial; */
  padding: 0;
  margin: 0;
}
#main ul{
  margin: 0;
  padding: 0;
}
#main img{
  width: 100%;
  height: auto;
  margin:0 auto;
}
#main p{
  margin: 0;
}
#contents{
  background: none;
  width: 86%;
}
#info{
  float: initial;
  width: 100%;
}
/* #info h2{
  border:none;
  color:#98534B;
  background:none;
  padding:none;
  position:relative;
} */
/* #info h2:before{
  position:absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #98534B;
} */

.tabipro .right-box a{
  width: 100%;
}
.tabipro .right-box a img{
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
}
.koiya img{
  width: 100%;
  height: auto;
  margin: 0;
}
.koiya p{
  margin: 5px auto;
}

.reserve .right-box img{
  width: 100%;
  margin: 0;
}

.covid img{
  margin: 0 auto
}

.news a img{
  width: 100%;
  margin: 10px 0;
}

/* .link a:first-child img, .link a:nth-child(2) img{
  width: 70px;
  height: auto;
} */
.link a img{
  width: 100%;
  height: auto;
  margin: 0;
}
/* .reserve a{
  display: inline-block;
} */
.semi-trans:hover{
  opacity:.5;
}
#footer{
  background:#312010;
  color:#FFF1A4;
  padding: 10px;
  text-align: left;
  width: initial;
}
#footer #pr a{
  color:#FFF1A4;
}
#footMenu{
  border: none;
  padding: 0;
  width: 86%;
  margin: 0 auto;
}
.sister_icon{
  display: flex;
}
.name{
  font-size: 24px;
}
.copyright{
  padding: 5px 0;
}
#contents iframe{
  width: 100%;
}
.access img{
  width: 100%;
  height: auto;
}
.reserve img{
  width:180px !important;
  height: auto;
}
#pageTop a{
  background: none !important;
}
#main .avail_left h4, .avail_h4{
  color: #000 !important;
}
iframe{
  margin: 20px auto;
}
.avail_note{
  margin-bottom: 20px !important;
}

@media screen and (min-width:641px) {
  #top{
    width:initial;
  }
  #header h1{
    flex-basis: 18%;
  }
  #header h1 img{
    width: 90%;
    height: auto;
  }
  #gnavi{
    flex-basis: 12%;
  }
  .link{
    flex-basis: 70%;
  }
  #menu{
    height: 74px;
  }
  #menu ul{
    display: flex;
    justify-content: space-around;
    float: initial;
  }
  #menu li{
    width: calc(100%/5);
  }
  #menu li a{
    width: 100%;
  }
  .sp_gnavi{
    display: none;
  }
  .tabipro{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
  }
  .tabipro .left-box{
    width: 50%;
  }
  .tabipro .left-box h4{
    margin-bottom: 10px; 
  }
  .tabipro .left-box a img{
    margin: 20px auto;
  }
  .tabipro .right-box{
    width: 45%;
  }
  .reserve{
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
  }
  .reserve div{
    text-align: center;
    width: 40%;
  }
  .reserve div p{
    text-align: left;
  }
  .reserve .left-box{
    width: 50%;
  }
  .reserve .right-box{
    width: 45%;
  }
  .online, .form{
    position: relative;
    height: 290px;
    background: #e0d4c7;
    padding: 10px;
    border-radius: 10px;
  }
  .online2{
    position: relative;
    height: 290px;
    background: #e0d4c7;
    padding: 10px;
    border-radius: 10px;
  }
  .online h4, .form h4, .online2 h4{
    /* margin-bottom: 10px; */
    color: #98534B !important;
    font-size: 1.2em !important;
  }
  .online p, .form p, .online2 p{
    font-size: .9em;
    line-height: 1.3;
  }
  .online a, .form a, .online2 a{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
  }


  .covid{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .covid p{
    width: 50%;
  }
  .link{
    display: flex;
    justify-content: end;
    width: 12%;
    align-items: center;
    margin-bottom: 16px;
  }
  .name_flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
  }
  .link a,.sister_icon a{
    width: 30px;
    margin-left: 20px;
  }
  .sister_icon a img{
    width: 100%;
    height: auto;
  }
  #icatch{
    height: 600px;
    /* height: 453px; */
    width: initial;
  }
  .news{
    width: 50%;
    margin: 20px auto;
  }
  #icatch img{
    /* max-height: 670px; */
    object-fit: cover;
    height: 600px;
  }
  #icatch:after{
    content: "";
    display: block;
    background: url(http://koiya-kyoto.com/images/koiyalogo2.gif) no-repeat;
    background-size: contain;
    width: 200px;
    height: 456px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #info h2{
    margin-top: 50px;
    font-size: 22px;
    text-align: center;
  }
  .content_margin{
    margin: 20px auto;
  }
  .bath_flex{
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
  .bath_flex .right_box{
    width: 42%;
  }
  #main .breakfast_flex, #main .machiya_flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  #main .breakfast_flex img, #main .machiya_flex img{
    width: 33%;
  }
  #main h3{
    font-size: 1em;
  }
  #main table td{
    font-size: 1em;
  }
  .room_imgs{
    display: flex;
    justify-content: start;
  }
  .room_imgs img{
    width: 33% !important;
  }
  .room p:first-child{
    margin: 20px !important;
  }
  .flex_2{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex_2 img{
    width: 48% !important;
    margin-bottom: 10px !important;
  }
  #contents h2{
    background: #98534B;
    font-size: 16px;
    color: #fff;
    padding: 2px 5px 0px 5px;
    border-bottom: 3px solid #823C34;
    margin: 50px auto 20px;
    font-size: 22px;
    text-align: center;
  }
}


@media screen and (max-width: 640px){
  #top, #header,#pr, #menu, #icatch, #icatch img, #contents, #footMenu, #footer{
    width: initial;
  }
  #header h1 a{
    display: block;
    width: 76%;
  }
  #top{
    width: 100%;
    margin: 0  auto;
  }
  #menu ul, #menu li{
    float: initial;
  }
  #gnavi{
    /* position: initial; */
    /* background: #FFFACD; */
    display: none;
  }
  #gnavi ul{
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  #gnavi li{
    margin: 0 5px;
    font-size: 16px;
    float: initial;
  }
  .sp_gnavi{
    margin: 24px 0 24px 24px;
  }
  .sp_gnavi a{
    color:#FFF1A4;
  }
  #header h1{
    /* width: 36%; */
    text-align: center;
  }
  #header h1 img{
    width: 100%;
    height: auto;
  }
  #menu ul{
    margin-top: 56px;
  }
  #menu li{
    width: 100%;
  }
  #menu li a{
    width: 100%;
  }
  .sp_gnavi{
    color: #FFF1A4;
  }
  #main h3{
    font-size: 1.2em;
  }
  #main img{
    width: 100%;
    height: auto;
    margin:0 auto;
  }
  #main table td{
    font-size: 1em;
  }
  .news{
    width: 100%;
    margin: 20px auto;
  }
  #icatch{
    height: 252px;
  }
  #icatch img{
    width: 100%;
    max-height: 252px;
  }
  #icatch:after{
    content: "";
    display: block;
    background: url(http://koiya-kyoto.com/images/koiyalogo2.gif) no-repeat;
    background-size: contain;
    width: 75px;
    height: 168px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #info h2{
    margin-top: 10px;
  }
  .koiya{
    margin: 20px auto;
  }
  .tabipro{
    display: block;
    width: 100%;
    margin: 20px auto;
  }
  .tabipro .left-box{
    width: 100%;
  }
  .tabipro .left-box a{
    display: block;
    text-align: center;
  }
  .tabipro .right-box{
    width: 100%;
  }
  .reserve{
    display: block;
    margin-top: 10px;
    text-align: center;
  }
  .reserve p{
    text-align: left;
  }
  .reserve .left-box{
    width: 100%;
  }
  .reserve .left-box a{
    display: block;
    text-align: center;
  }
  .reserve .right-box{
    width: 100%;
  }
  .online, .form{
    position: relative;
    height: 280px;
    background: #e0d4c7;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .online2{
    position: relative;
    height: 210px;
    background: #e0d4c7;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .online h4, .form h4, .online2 h4{
    margin-bottom: 10px;
    color: #98534B !important;
    font-size: 1.3em !important;
  }
  .online p, .form p, .online2 p{
    font-size: .9em;
    line-height: 1.3;
  }
  .online a, .form a{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .online2 p{
    width: 100%;
  }
  .covid{
    display: block;
    margin: 20px auto;
  }
  .covid img{
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  .covid p{
    width: 100%;
  }
  .name_flex {
    display: block;
    width: 100%;
  }
  .link{
    display: block;
    width: 100%;
    margin: 16px auto;
  }
  .link a,.sister_icon a{
    width: 24px;
    margin-left: 10px;
    display: inline-block;
  }
  .sister_icon a img{
    width: 100%;
    height: auto;
    margin: 10px 0;
  }
  #info{
    width: 90%;
    margin: 0 auto;
  }
  #info{
    font-style: var(--font-size-sp);
    float: initial;
    width: 100%;
  }
  #info h2{
    font-size: 18px;
  }
  #info h4{
    font-size: var(--font-size-sp);
  }
  #info a{
    font-style: 1.8em;
  }
  #news{
    float: initial;
    width: 100%;
  }
  #main .breakfast_flex, #main .machiya_flex{
    display: block;
    margin: 20px auto;
  }
  #main .bath_flex{
    margin: 20px auto;
  }
  #main .breakfast_flex img, #main .machiya_flex img{
    width: 100%;
    margin-bottom: 10px;
  }
  .room p:first-child{
    margin: 0 0 20px !important;
  }
  .room_detail{
    margin-top: 10px;
  }
  .room_detail p{
    font-size: 1em;
  }
  #contents h2{
    background: #98534B;
    font-size: 16px;
    color: #fff;
    padding: 2px 5px 0px 5px;
    border-bottom: 3px solid #823C34;
    margin: 0 auto 20px;
    font-size: 16px;
    text-align: center;
  }
}


/*+++++***************************************************
ハンバーガー
**********************************************************/
@media screen and (min-width:641px){
  #hamburger{
    display: none;
  }
}

@media screen and (max-width:640px){
  #hamburger {
    display: block;
    position: fixed;
    top: 8px;
    right: 10px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: 1s;
    /* background: #FB2312; */
    background: #c8473c;
    border-radius: 50%;
    z-index: 2;
  }
  #menu{
    position: fixed;
    height: 100%;
    width: 42%;
    left: -42%;
    top: 0;
    background: #312010;
    transition: .5s;
    z-index: 90;
  }
  .inner_line {
    display: block;
    position: absolute;
    left: calc( 100% / 4 );
    width: calc(100% / 2 );
    height: 2px;
    background-color: #fff;
    transition: .3s;
    border-radius: 4px;
  }
  #line1 {
    top: 16px;
  }
  #line2 {
    bottom: 16px;
  }
  /* #line3 {
    bottom: 0px;
  } */
  .in{
    transform: translateX(100%);
  }
  /* .line_1,.line_2,.line_3{
    background: #000;
  } */
  .line_1 {
    transform: translateY(5px) rotate(-45deg);
    top: 0;
  }
  .line_2 {
    transform: translateY(-5px) rotate(45deg);
    bottom: 0;
  }
  .room img{
    margin-bottom: 10px !important;
  }
}
  /* .line_3 {
    transform: translateY(-20px) rotate(45deg);
    bottom: 0;
  } */

/*+++++***************************************************
スライド
**********************************************************/
#icatch img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 2s;
}
#icatch img.show{
  opacity: 1;
}
#icatch{
  position: relative;
}
#icatch img{
  width: 100%;
}

/*+++++***************************************************
roomview
**********************************************************/
/* .sp-roomview {
  width:100%;
  height:auto;
  position:relative;
} */
.sp-roomview img {
  width:100%;
  height:230px !important;
  object-fit:cover;
}
p.tab-group-note{
  color: #98534B;
} 

@media screen and (min-width:641px) {
 .sp-roomview {
    margin-top: 20px;
  }
 .sp-roomview ul {
     display: flex;
     padding:0;
     margin:0;
     width:100%;
     height:100%;
     justify-content: space-between;
  } 
 .sp-roomview li {
   list-style:none;
   display:inline-block;
   scroll-snap-align:center;
   height:100%;
   padding: 0 2px;
   width: 33%;
 }
 .icon-position{
   display: none;
 }
 .sp_select{
  /* background: #312010; */
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
 .select-note{
  /* color: #FFF1A4; */
  /* text-align: center; */
  color: #98534B;
  font-weight: bold;
}
.select-box select{
  /* width: 100%; */
  font-size: 18px;

}
}

@media screen and (max-width:640px) {
  .sp-roomview{
    margin: 20px -1rem;
    width: initial;
  }
  .sp-roomview ul {
      display: flex;
      padding:0;
      margin:0;
      width:100%;
      height:100%;
      /* overflow:hidden; */
      white-space:nowrap;
      overflow-x:scroll;
      /* animation: scrollAnime 20s infinite linear 1s both;; */


  } 
  .sp-roomview li {
    list-style:none;
    display:inline-block;
    scroll-snap-align:center;
    width:90%;
    height:100%;
    min-width:90%;
    /* padding: 0 10px; */
    box-sizing: border-box;
    border: none;
    margin: 0 5px;
  }
  .sp-roomview li img{
    border-radius: 20px;
  }
  .icon-position{
    position: relative;
  }
  .icon-position img{
    width: 40px !important;
    position: absolute;
    right: 0;
    top: 0;
  }
  .sp_select{
    /* background: #312010; */
    padding: 0 10px;
    margin-bottom: 10px;
    border-radius: 1px;
  }
  .select-note{
    /* color: #FFF1A4; */
    text-align: center;
    color: #98534B;
    font-weight: bold;
  }
  .select-box select{
    width: 100%;
    font-size: 18px;
    color: #555;
  }
  /* @keyframes scrollAnime{
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  } */
}

/*+++++***************************************************
room tabswitch
*+++++***************************************************/
.tab-group{
  display: flex;
  justify-content: center;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
 }
 .tab-group li{
   width:calc(100%/3);
   box-sizing: border-box;
   background:#d2d2d2;
 }
 .tab-group li:hover{
  background:#98534B;
  color:#FFF;
  transition: all 0.2s ease-out;
 }
 .tab{
  flex-grow: 1;
  padding:5px;
  list-style:none;
  border:solid 1px #CCC;
  text-align:center;
  cursor:pointer;
 }
 .panel{
  display:none;
 }
 .tab.is-active{
  background:#98534B;
  color:#FFF;
  transition: all 0.2s ease-out;
 }
 .panel.is-show{
  display:block;
  margin-top: 20px;
 }
 @media screen and (min-width: 641px){
 .panel-group{
  height:510px;
  /* border:solid 1px #CCC; */
  border-top:none;
  background:#eee;
 }

 }
 @media screen and (max-width: 640px){
 .panel-group{
  height:620px;
  /* border:solid 1px #CCC; */
  border-top:none;
  background:#eee;
 }
 }


/*+++++***************************************************
availability
**********************************************************/
@media screen and (min-width:641px){
  .avail_flex{
    /* display: flex;
    justify-content: space-between; */
  }
  .avail_left{
  
  }
  .avail_right{
    width: 20%;
  }
}

@media screen and (max-width:640px){
  .avail_right{
    width: 50%;
    margin: 10px auto;
  }
}

/*+++++***************************************************
availability
**********************************************************/
.access_note{
  font-weight: bold;
}