/*header設定*/

#mv_header {
  position: relative;
  height: 100vh;
  text-align: center;
  color: #fff;
  background: url("../img/room/mv.jpg") no-repeat;
  background-size: cover;
}

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

#mv_header {
  position: relative;
  height: 100vh;
  text-align: center;
  color: #fff;
  background: url("../img/room/mv_sp.jpg") no-repeat;
  background-size: cover;
}
	
	
}



.section_room{
    position: relative;
    margin-top: 5%;
    padding-bottom: 5%;
}

.room_ttl_box {
  position: relative;
padding-top: 0%;
  padding-bottom: 0%;
  width: 100%;
  z-index: 1;
  margin-bottom: 3%;
  text-align: center;
}



.room_copy_header {
  position: relative;
  padding-top: 0%;
  padding-bottom: 0%;
padding-left: 0%;
  width: 100%;
  z-index: 2;
  margin-top: -20%;
	text-align: center;
}

.room_copy_ttl {
 font-size: 95px;
  font-size: 9.5rem;
  line-height: 0.8em;
}

.room_txt {
  padding-top: 3%;
  padding-bottom: 3%;
  font-size: 25px;
  font-size: 2.5rem;
  line-height: 1.5em;
}


.room_cap{
  padding-bottom: 3%;
  font-size: 25px;
  font-size: 2.5rem;
  line-height: 1.5em;	
}


@media only screen and (max-width: 768px) {
  .room_copy_header {
    position: relative;
    padding-top: 0%;
    padding-bottom: 20%;
	  padding-left: 5%;
	  padding-right: 5%;
    width: 100%;
    z-index: 2;
    margin-top: -100%;
  }


  .room_copy_ttl {
    font-size: 55px;
    font-size: 5.5rem;
    line-height: 0.9em;
    padding-bottom: 5%;
	  text-align: center;
  }

  .room_txt {
    padding-top: 3%;
    padding-bottom: 3%;
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 1.5em;
	  text-align: center;
  }
  }




.info_box{
    width: 100%;
    padding-top: 7%;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
	margin-top: 5%;
    margin-bottom: 0%;
    height: auto;
    background-color: #111111;
    border: 2px solid #777777 !important;
    text-align: center;
    font-size: 18px;
    font-size: 1.8rem;
}

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

.info_box{
    width: 100%;
    padding-top: 15%;
    padding-bottom: 10%;
    padding-left: 7%;
    padding-right: 7%;
	margin-top: 10%;
    margin-bottom: 0%;
    height: auto;
    background-color: #111111;
    border: 2px solid #777777 !important;
    text-align: center;
    font-size: 18px;
    font-size: 1.8rem;
}


}

.maptxt{
text-align: center;
}


.google-map {
padding-top: 0%;
padding-bottom: 5%;

}
.google-map iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}


.room_btn_box{
    text-align: center;
	margin-bottom: 5%;
}

.room_btn_box ul{
    padding: 0;
    margin: 0;
}

.room_btn_box li{
    list-style: none;
    display: inline-block;
    font-size: 25px;
    padding: 0 0%;
	margin-left: 10%;
margin-right: 10%;
}





.btntextchange4{
position: relative;
border-radius: 15px;
border: 2px solid #87150c;
width: 380px;
	height: 60px;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 50px;
padding-right: 50px;
margin-bottom: 5%;	
    text-align: center;
	display: block;
background: #000000;
font-weight: bold;
    text-decoration: none;
    color: #87150c;
    outline: none;
    transition: all .2s;
  font-optical-sizing: auto;
}

/*hoverした際の変化*/
.btntextchange4:hover{
  background:#87150c;
  color:#222222;
}

.btntextchange4:visited{
  color:#87150c;
}

/*
.btntextchange:active{
  color:#fff;
}
*/

.btntextchange4 span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange4 span:nth-child(2){
	opacity:0;/*透過0に*/color:#fff;
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange4:hover span:nth-child(1){
	opacity:0;/*透過0に*/color:#fff;
}

.btntextchange4:hover span:nth-child(2){
	opacity:1;/*不透明に*/color:#fff;
}

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

/*表示するテキストが切り替わる*/
.btntextchange4{
position: relative;
border-radius: 15px;
border: 2px solid #87150c;
width: 240px;
	height: 60px;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 50px;
padding-right: 50px;
margin-bottom: 5%;	
    text-align: center;
	display: block;
background: #000000;
font-weight: bold;
    text-decoration: none;
    color: #87150c;
    outline: none;
    transition: all .2s;
  font-optical-sizing: auto;
font-size: 90%;
}	
	
}	




.section_room_center_ttl {
    font-size: 95px;
    font-size: 9.5rem;
    line-height: 0.8em;
    text-align: center;
    padding-top: 0%;
    padding-bottom: 5%;
}

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

.section_room_center_ttl {
        font-size: 45px;
        font-size: 4.5rem;
        line-height: 1.0em;
        text-align: center;
        padding-top: 0%;
        padding-bottom: 7%;
    }
	
}