/* 宿泊施設案内 --------------------------------------------- */
.dsp-none {
  display: none;
}
main h1 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #61b88c;
}
main h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #61b88c;
    text-indent: 0.4em;
}
main h3 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #61b88c;
}

.hotel-link {
    padding-bottom: 2em;
}
.hotel-list {
    font-size: 2.5em;
    display: flex;
    background-color: #61b88c;
    margin: auto;
    padding: 0.7em;
}

.hotel-list ul li {
    display: inline-block;
    line-height: 28px;
}
.hotel-list span {
    color: #ffffff;
    margin-right: 40px;
}
.hotel-menu {
  display: inline-block;
  vertical-align: middle;
}

/* 宿泊施設名 */
.hotel-name {
    margin: auto;
    text-align: left;
    font-size: 20px;
    letter-spacing: 2px;
    border-bottom: 2px solid #61b88c;
}
.hotel-name h2 {
    padding-bottom: 0.5em;
}
.hotel-title {
    color: #61b88c;
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 1em;
}
.hotel-comment p {
    font-size: 1.3rem;
    font-weight: 600;
}
.hotel-name span {
    color: #61b88c;
    font-weight: bold;
}
.hotel-title h2 {
    color: #61b88c;
    font-weight: bold;
}
.hotel-text p {
    font-size: 1.3rem;
}
.hotel-name, .hotel-text p {
    font-weight: bold;
}

.hotel-container {
    display: table;

}
.hotel {
  position: relative;
  background-color: #fff;
  max-width: 830px;
  width: 94%;
  margin: 70px auto 70px;
  padding: 60px 70px;
  box-sizing: border-box;
}
.hotel-s-container {
    display: table;

}
.hotel-s-block {
    display: table-cell;
    text-align: left;
    width: 25%;
    padding: 0.2em;
}
.hotel-picture {
    margin: 1.5em auto;
    display: flex;
    flex-direction: column;
    position: relative;
}



.hotel-text {
    vertical-align: top;
    padding-left: 2em;
    padding-right: 2em;
    margin: 0 0 0 auto;
    width: 50%;
    min-height: 200px;
}
.hotel-comment {
    margin-bottom: 1em;
}
.hotel-comment span {
    font-weight: bold;
}
.hotel-address {
    font-weight: bold;
    margin-top: 5em;
}
.hotel-address dl {
    font-size: 1.3rem;
    margin-bottom: 0.2em;
}
.hotel-address dt {
    display: inline-block;
    background-color: #61b88c;
    color: #ffffff;
    padding: 1px 9px;
    border-radius: 7px;
    margin-right: 1em;
    margin-bottom: 0.2em;
}
.hotel-address dd {
    display: inline-block;
}
.hotel-picture-s {
    display: table;
    width: 82%;
    margin: auto;
}
.picture-s {
    display: table-cell;
    width: 25%;
}


/* 画像切り替え */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cp_cssslider {
    padding-top: 195px;
    margin: -20.5em 0 2em;
    display: flex;
    justify-content: space-between;
}
.cp_cssslider > img {
    position: absolute;
    left: 0;
    top: 0;
    /*transition: all 0.5s;*/
    width: 50%
}
.cp_cssslider input[name='cp_switchA'],
.cp_cssslider input[name='cp_switchB'],
.cp_cssslider input[name='cp_switchC'] {
    display: none;
}
/* サムネイル */
.cp_cssslider label {
    margin: 15px 0 0 0;
    display: inline-flex;
    cursor: pointer;
    flex-direction: column;
    /*transition: all 0.5s ease;*/
    width: 24.5%;
}
.cp_cssslider label:hover {
    opacity: 0.7;
}
.cp_cssslider label img {
    display: inline-block;
   max-width: 170px;
}
.cp_cssslider input[name='cp_switchA'] ~ img,
.cp_cssslider input[name='cp_switchB'] ~ img,
.cp_cssslider input[name='cp_switchC'] ~ img {
    opacity: 0;
}
.cp_cssslider input[name='cp_switchA']:checked + label + img,
.cp_cssslider input[name='cp_switchB']:checked + label + img,
.cp_cssslider input[name='cp_switchC']:checked + label + img
 {
    opacity: 1;
}

span.figcap {
    text-align: left;
    font-weight: bold;
    font-size: 1.4rem;
}


/* 宿泊施設情報 上下に線*/
.hotel-info {
    margin: auto;
    text-align: left;
    letter-spacing: 2px;
    color: #61b88c;
    border-top: 1px solid #61b88c;
    border-bottom: 1px solid #61b88c;
    margin: 3em auto;
    padding: 0.7em 0;
}
.hotel-info span {
    font-weight: bold;
}

/* 施設情報表 */
.facility-table {
    max-width: 768px;
    margin: auto;
    color: #000000;
    border: 2px solid #61b88c;
    border-collapse: collapse;
}
.facility-table tr {
    vertical-align: middle;
}
.facility-table, td, th {
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
}

.facility-table .table-left {
    color: #000000;
    background-color: #ceeadc;
    border: 1px solid #61b88c;
    font-size: 2em;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
}
.facility-table .table-right {
    background-color: #ffffff;
    border: 1px solid #61b88c;
    font-size: 2em;
    width: 80%;
    padding-right: 10px;
    padding-left: 10px;
}
/* 注意 文字赤 */
.facility p {
    margin-left: 1em;
    font-size: 13px;
    font-weight: bold;
    color: red;
}

/* 食事スタイル */
.food-style span {
    font-weight: bold;
}
.food-style-container {
    width: 100%;
    display: table;
    margin-top: 0;
}
.food-style-block {
    display: table-cell;
    vertical-align: top;
}

/* 食事スタイル 上下に線*/
.food-info {
    max-width: 800px;
    margin: 2em 0 0 0;
    text-align: left;
    letter-spacing: 2px;
    color: #61b88c;
    border-top: 1px solid #61b88c;
    border-bottom: 1px solid #61b88c;
}
/* 見出し */
.food-style-title {
    color: #61b88c;
    letter-spacing: 1px;

}
.food-left {
    width: 38%;
    padding-right: 2%;
}
.food-right {
    width: 60%;
}

/* 画像 仮サイズ */
.food-style-block img {
    width: 100%;
    max-width: 120px;
}

.food-style-list {
    border: 2px solid #61b88c;
    border-collapse: collapse;
    min-width: 400px;
    font-size: 2em;
}
.food-style-list .table-left {
    background-color: #ceeadc;
}
.food-style-list .table-right {
    border: 1px solid #61b88c;
}
.food-style-list th {
    color: #000000;
    border: 1px solid #61b88c;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
    padding: 7px 0 7px 0;
}
.food-style-list td {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.col-l {
    width: 40%;
}
.col-c {
    width: 40%;
}
.food-photo {
    display: flex;
    justify-content: space-between;
}
.food-photo li {
    width: 49%;
}

/* 周辺情報 */
.around-container {
    display: flex;
    margin: auto;
}
.around-block {
    display: table-cell;
    vertical-align: top;

}
.around-left {
    width: 50%;
    margin-right: 5%;
}
.around-right {
    width: 50%;
    padding-left: 30px;
}
.around-comment {
    margin-top: 0.5em;
    min-height: 90px;
}
.around-comment p {
    font-size: 1.3rem;
    font-weight: 600;
}
.around-link {
    font-size: 2.0rem;
    text-align: center;
    font-weight: bold;
    padding: 1.2em 0.5em;
    background: #ffffff;
    border: 3px solid #61b88c;
    border-radius: 10px;
    box-shadow: 2px 2px 4px grey;
    color: #61b88c;
    transition: all 0.7s;
}
.around-link:hover {
    color: #fff;
    background-color: #61b88c;
    box-shadow: none;
}
.around-link a {
    color: #61b88c;
}
.around-area {
    white-space: nowrap;
    display: flex;
}
.around-list {
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
    padding: 0;
    line-height: normal;
}
.around-list dl {
    display: flex;
}
.around-list dt {
    display: inline-block;
    background-color: #61b88c;
    color: #ffffff;
    padding: 1px 10px;
    border-radius: 3px;
    margin-right: 1em;
    width: 6em;
    margin-bottom: 1em;
}
.around-list dd {
    display: inline-block;
}

/* レスポンシブ時調整 */
@media (max-width: 768px) {
    /*nav-toggle */
    #nav-toggle {
        width: 55px;
        height: 55px;
    }
  /* ページ内リンク */
    .hotel {
      width: 100%;
      margin: 70px auto 0;
      padding: 3%;
      box-sizing: border-box;
    }
    .hotel-list {
        flex-direction: column;
        padding: 0;
    }
    .hotel-list li {
        padding: 1em 0;
        margin: 0 2em;
    }
    /*宿泊施設 写真＆説明 */
    .hotel-text {
        vertical-align: top;
        padding-left: 0;
        padding-right: 0;
        margin: 0 0 0 auto;
        width: 100%;
    }
    .cp_cssslider {
        position: relative;
        padding-top: 60%;
        margin: 2em 0 0 0;
        flex-wrap: wrap;
    }
    .cp_cssslider > img {
        width: 100%;
    }
    .cp_cssslider label {
        margin: 0 0 0 0;
        display: inline-flex;
        cursor: pointer;
        flex-direction: column;
        /*transition: all 0.5s ease;*/
        width: 49%;
    }
    /* IE 調整 */
    .cp_cssslider label img {
        display: inline-block;
        max-width: 100%;
    }

    .facility {
        max-width: 768px;
    }
    .facility-table {
        display: inline-table;
    }

    .food-style-container {
        display: block;
    }
    .food-style-block {
        display: block;
    }
    /* IE 調整　*/
    .food-style-block img {
        max-width: 100%;
    }
    .food-style-block .col-l, .col-c {
        width: 200px;
        min-width: 200px;
    }
    .food-style-block .col-r {
        width: 100px;
        min-width: 100px;
    }
    .food-style-list {
        margin-top: 1em;
        width: 100%;
    }
    .food-left {
        width: 100%;
        padding-right: 0;
    }
    .food-right {
        width: 100%;
    }
    .table-wrap {
        overflow: auto;
        white-space: nowrap;
        margin-bottom: 4em;
    }
    .around-container {
        width: 100%;
        text-align: left;
        flex-direction: column;
    }
    .around-block {
        display: block;
    }
    .around-left {
        width: 100%;
        margin-right: 0;
    }
    .around-right {
        width: 100%;
        margin-top: 5em;
    }
    .around-link {
        display: block;
        width: 70%;
        margin: auto;
    }
}




/* 宿泊施設案内 --------------------------------------------- */