*{margin:0px;padding:0px;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body{background:#dddddd;}
a{color:#000000;}

header{
margin:0 auto;
width:1200px;
height:500px;
background:url(image/keyvisual.jpg)center no-repeat;
background-size:cover;
}

.head{
height:60px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#262626+0,969696+100 */
background: #262626; /* Old browsers */
background: -moz-linear-gradient(top,  #262626 0%, #969696 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #262626 0%,#969696 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #262626 0%,#969696 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#969696',GradientType=0 ); /* IE6-9 */
}


.head img{
margin:5px 0 0 100px;
}

.container{
margin:0 auto;
padding:30px 5px 0 5px;
width:1200px;
height:450px;
display:block;
background:#dddddd;
}

ul{
margin:0;
padding:0;
text-align:center;

}

.contents li{
display:inline-block;
width:calc((100% - 100px)/2);
height:150px;
list-style:none;
text-align:left;
}

section .contents li:nth-child(1){
background-size:150px;
margin:0 10px 10px 0;
}

section .contents li:nth-child(2){
background-size:150px;
margin:10px 10px 0 0;
}

section .contents li:nth-child(3){
background-size:150px;
margin:0 10px 0 0;
}

section .contents li:nth-child(4){
background-size:150px;
margin:0 10px 10px 0;
}

/*タブ1番目　外観画像*/
section:nth-of-type(1) .contents li:nth-child(1){
background:url(image/1111.jpg) #ffffff no-repeat;
}

section:nth-of-type(1) .contents li:nth-child(2){
background:url(image/2222.jpg) #ffffff no-repeat;
}

section:nth-of-type(1) .contents li:nth-child(3){
background:url(image/3333.jpg) #ffffff no-repeat;
}

section:nth-of-type(1) .contents li:nth-child(4){
background:url(image/4444.jpg) #ffffff no-repeat;
}

/*タブ2番目　外観画像*/
section:nth-of-type(2) .contents li:nth-child(1){
background:url(image/2222.jpg) #ffffff no-repeat;
}

section:nth-of-type(2) .contents li:nth-child(2){
background:url(image/1111.jpg) #ffffff no-repeat;
}

section:nth-of-type(2) .contents li:nth-child(3){
background:url(image/4444.jpg) #ffffff no-repeat;
}

section:nth-of-type(2) .contents li:nth-child(4){
background:url(image/3333.jpg) #ffffff no-repeat;
}

/*タブ3番目　外観画像*/
section:nth-of-type(3) .contents li:nth-child(1){
background:url(image/4444.jpg) #ffffff no-repeat;
}

section:nth-of-type(3) .contents li:nth-child(2){
background:url(image/3333.jpg) #ffffff no-repeat;
}

section:nth-of-type(3) .contents li:nth-child(3){
background:url(image/2222.jpg) #ffffff no-repeat;
}

section:nth-of-type(3) .contents li:nth-child(4){
background:url(image/1111.jpg) #ffffff no-repeat;
}

.contents li span{
display:block;
margin:0px 10px 10px 220px;
padding-top:10px;
}

.contents li a{
display:block;
width:100%;
height:100%;
text-decoration: none;
}

.contents li a:hover{
display:block;
width:100%;
height:100%;
background-color: rgba(253,174,130,0.5);
text-decoration: none;
}

.hotelname{
font-size:1.2em;
font-weight:bold;
 pointer-events: none;
 cursor: default;
}



.hoteladdress{
 pointer-events: none;
 cursor: default;
 text-decoration: none;
}



footer{
margin:0 auto;
width:1200px;
height:20px;
background:#dddddd;
text-align:center;
}

.copyright{font-size:10px;}

.qr{
width:1200px;
text-align:right;
margin-top:20px;
}

/*タブ設定*/
nav{margin-bottom:10px;}

/*タブの中身を初期非表示に*/
.ChangeElem_Panel {
  display: none;
}
/*タブを横並べに*/
.ChangeElem_Btn_Content {
  display: flex;
  justify-content: space-around;
}
/*通常時のタブ装飾*/
.ChangeElem_Btn {
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 10px;
  color: #666;
  cursor: pointer;
  display: inline-block;
  flex: 1;
  font-size: 1.2rem;
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
  transition: all .3s ease-in-out;
  vertical-align: middle;
}
/*カレントとホバー時のタブ装飾*/
.ChangeElem_Btn:hover,
.ChangeElem_Btn.is-active {
  background: #fcf7f1;
  border: 2px solid #fcbc82;
  box-sizing: border-box;
  color: #333;
}