@charset "UTF-8";
/* CSS Document */

/*ライフツアー・ホテル特集用のCSSです*/

/*---------------------------------------------------------
　共通
---------------------------------------------------------*/
.hotel-tokusyu {
 font-size: 16px;
 line-height: 160%;
}
.hotel-tokusyu section {
 width: 100%;
}
.hotel-tokusyu .inner {
 width: 1000px;
 margin: 0 auto;
}
.hotel-tokusyu section {
 padding: 50px 0 100px 0;
}
.hotel-tokusyu h3 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 28px;
 text-align: center;
 margin: 0 0 70px 0;
}
.hotel-tokusyu h3::before {
 display: block;
 content: "別府温泉 杉乃井ホテル";
 color: #917347;
 font-size: 14px;
 font-weight: 400;
 margin: 0 0 20px 0;
 line-height: 100%;
}
.hotel-tokusyu .img-box img {
 width: 100%;
 height: auto;
 padding: 2px;
 border: 1px solid #917347;
}
.hotel-tokusyu table {
 border-collapse: separate;
}
.hotel-tokusyu th, .hotel-tokusyu td {
 padding: 5px 10px;
}
.hotel-tokusyu th {
 background: #ede4cd;
}
.hotel-tokusyu td {
 background: #f8f4e6;
}
.hotel-tokusyu .note {
 font-size: 12px;
 line-height: 140%;
 color: #917347;
}
.pc-none {
 display: none;
}
@media screen and (max-width:750px) {
.hotel-tokusyu .inner {
 width: 95%;
 margin: 0 auto;
}
.pc-none {
 display: inherit;
}
 .sp-none {
  display: none;
 }
}
/*---------------------------------------------------------
　共通｜ツアー導線（tour-box）
---------------------------------------------------------*/
.hotel-tokusyu .tour-box {
 padding: 0 20px 20px 20px;
 background: #c1d8ac;
 border: 5px solid rgba(255,255,255,0.5);
 text-align: center;
}
.hotel-tokusyu .tour-box h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 22px;
 color: #FFF;
 background: #917347;
 margin: -5px auto 30px auto;
 width: fit-content;
 padding: 10px 20px;
 border-radius: 0 0 7px 7px;
}
.hotel-tokusyu .tourlink {
 display: flex;
 justify-content: center;
}
.hotel-tokusyu .tourlink li {
 display: block;
 width: calc(100% / 5 - 10px);
 margin: 0 5px;
 text-align: center;
 font-size: 18px;
 background: #FFF;
 border-radius: 3px;
}
.hotel-tokusyu .tourlink li a {
 display: block;
 background: #e6b422;
 padding: 10px 30px 5px 10px;
 border-radius: 3px;
 position: relative;
 box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);
}
.hotel-tokusyu .tourlink li a .price {
 display: block;
 font-size: 20px;
 font-weight: bold;
 color: #BB0000;
 padding: 5px 0 0 0;
}
.hotel-tokusyu .tourlink li a::after {
 display: block;
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-size: 16px;
 font-weight: bold;
 line-height: 100%;
 position: absolute;
 right: 7px;
 top: calc(50% - 8px);
}
.hotel-tokusyu .tourlink li a:hover {
 opacity: 0.75;
 transition: 0.3s;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .tour-box {
  padding:  0 10px 10px 10px;
 }
 .hotel-tokusyu .tour-box h4 {
  font-size: 18px;
      margin: -5px auto 10px auto;
  padding: 10px 15px;
 }
 .hotel-tokusyu .tourlink {
  flex-wrap: wrap;
 }
 .hotel-tokusyu .tourlink li {
  width: calc(100% / 2 - 10px);
  margin: 5px;
  font-size: 16px;
 }
 
}
/*---------------------------------------------------------
　メインビジュアル（title-are）
---------------------------------------------------------*/
.hotel-tokusyu .title-area {
 background: #f8f4e6;
 padding: 10px 0;
 text-align: center;
 margin: 0 0 2px 0;
}
.hotel-tokusyu .title-area .inner {
 min-height: 400px;
 background: url(../img/main.jpg) no-repeat;
 outline: 5px solid rgba(255,255,255,0.5);
    outline-offset: -5px;
}
.hotel-tokusyu .title-area .inner h2 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 300;
 color: #FFF;
 font-size: 48px;
 padding: 30px 0 0 0;
 line-height: 160%;
}
.hotel-tokusyu .title-area .inner h2 span {
 display: block;
 font-size: 30px;
 line-height: 140%;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .title-area .inner {
  background: url(../img/main.jpg) no-repeat top center;
 }
 .hotel-tokusyu .title-area .inner h2 {
  font-size: 36px;
 }
 .hotel-tokusyu .title-area .inner h2 span {
  font-size: 26px;
 }
}
 /*---------------------------------------------------------
　ページ内ナビ（content-nav）
---------------------------------------------------------*/
.hotel-tokusyu .content-nav {
 background: #ede4cd;
 margin: 0 0 30px 0;
 padding: 0;
}
.hotel-tokusyu .content-nav ul {
 display: flex;
 justify-content: space-between;
 width: 100%;
}
.hotel-tokusyu .content-nav li {
 font-family: 'Noto Serif JP', serif;
 font-weight: 300;
 font-size: 20px;
 width: calc(100% / 5 - 5px);
 display: block;
 text-align: center;
}
.hotel-tokusyu .content-nav li a {
 display: block;
 padding: 20px 0 5px 0;
 color: #000;
}
.hotel-tokusyu .content-nav li a::after {
 display: block;
 font-family: "Font Awesome 5 Free";
 content: "\f0d7";
 font-size: 12px;
 font-weight: bold;
}
.hotel-tokusyu .content-nav li a:hover {
 color: #917347;
 transition: 0.3s;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .content-nav ul {
  flex-wrap: wrap;
  justify-content: center;
 }
.hotel-tokusyu .content-nav li {
 width: calc(100% / 3 - 5px);
 max-width: 140px;
 font-size: 18px;
 }
 .hotel-tokusyu .content-nav li a {
  padding: 10px 0 5px 0;
 }
 .hotel-tokusyu .content-nav li a::after {
  line-height: 100%;
 }
}
/*---------------------------------------------------------
　このホテルについて（about）
---------------------------------------------------------*/
.hotel-tokusyu .about {
 padding: 0 0 100px 0;
}
.hotel-tokusyu .about .box-wrap {
 display: flex;
 justify-content: space-between;
 margin: 0 0 30px 0;
}
.hotel-tokusyu .about .left-box {
 width: 70%;
}
.hotel-tokusyu .about .right-box {
 width: 25%;
}
.hotel-tokusyu .about iframe {
 margin: 20px 0;
}
.hotel-tokusyu .about table {
 width: 100%;
}
/*右カラムバナー*/
.hotel-tokusyu .right-box .img-box {
 margin: 0 0 5px 0;
}
.hotel-tokusyu .right-box .img-box img {
 padding: 0;
 border: none;
}
/*ホテル共通テンプレート（htellist-box）用CSS*/
.hotellist-box {
 margin: 5px 0 0 0;
}
.hotellist-box p {
 text-align: center;
 color: #FFF;
 background: #c9171e;
 padding: 5px 0 3px 0;
 margin: 0 0 2px 0;
}
.hotellist-box .trigger {
 cursor: pointer;
 padding: 5px 0 3px 10px;
 background: #f8f4e6;
 margin: 0 0 2px 0;
}
.hotellist-box .trigger::before {
 font-family: "Font Awesome 5 Free";
 content: "\f0d7";
 font-size: 12px;
 font-weight: bold;
 color: #c9171e;
 margin: 0 7px 0 0;
}
.hotellist-box li a {
 display: block;
 padding: 5px 10px;
 background: #fbfaf5;
 margin: 0 0 2px 0;
 font-size: 14px;
 position: relative;
}
.hotellist-box li a::after {
 font-family: "Font Awesome 5 Free";
 content: "\f138";
 font-weight: bold;
 position: absolute;
 right: 5px;
}
.hotellist-box li a:hover {
 opacity: 0.75;
 transition: 0.3s;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .about .box-wrap {
  flex-direction: column;
 }
 .hotel-tokusyu .about .left-box {
  width: 100%;
 }
 .hotel-tokusyu .about .right-box {
  display: none;
 }
}
/*---------------------------------------------------------
　お部屋（room）
---------------------------------------------------------*/
.hotel-tokusyu .room .box-wrap {
 display: flex;
 justify-content: space-between;
 margin: 0 0 30px 0;
}
.hotel-tokusyu .room .img-box {
 width: 47%;
}
.hotel-tokusyu .room .left-box {
 width: 47%;
}
.hotel-tokusyu .room .right-box {
 width: 47%;
}
.hotel-tokusyu .room .right-box th {
 width: 180px;
 font-size: 14px;
}
.hotel-tokusyu .room .right-box td {
 font-size: 14px;
 line-height: 140%;
}
/*flexslider内*/
.hotel-tokusyu .room .img-box {
 position: relative;
}
.hotel-tokusyu .room .img-box span {
 display: block;
 position: absolute;
 bottom: 10px;
 left: 10px;
 width: calc(100% - 20px);
 text-align: center;
 font-size: 14px;
 background: rgba(255,255,255,0.5);
}
.hotel-tokusyu .flex-control-nav {
 bottom: -20px;
 text-align: center;
 left: 0;
}
.hotel-tokusyu .flex-control-paging li a {
 background: #f8f4e6;
}
.hotel-tokusyu .flex-control-paging li a.flex-active {
 background: #ede4cd;
}
.flex-direction-nav .flex-prev,
.flex-direction-nav .flex-next {
 display: none;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .room .box-wrap {
  flex-wrap: wrap;
 }
 .hotel-tokusyu .room .img-box {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 10px auto;
 }
 .hotel-tokusyu .room .left-box,
 .hotel-tokusyu .room .right-box {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 10px auto;
 }
}
/*---------------------------------------------------------
　レストラン（restaurant）
---------------------------------------------------------*/
.hotel-tokusyu .restaurant .box-wrap {
 display: flex;
 justify-content: space-between;
}
.hotel-tokusyu .restaurant .box {
 width: 47%;
}
.hotel-tokusyu .restaurant .box .img-box {
 margin: 0 0 15px 0;
}
.hotel-tokusyu .restaurant .box h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 400;
 font-size: 20px;
 color: #917347;
 margin: 0 0 10px 0;
 border-bottom: 1px solid #917347;
}
.hotel-tokusyu .restaurant .box h4 span {
 font-size: 16px;
 font-weight: 200;
}
.hotel-tokusyu .restaurant .box h5 {
 margin: 15px 0 0 0;
 color: #917347;
}
.hotel-tokusyu .restaurant .box table {
 width: 100%;
 margin: 0 0 5px 0;
}
.hotel-tokusyu .restaurant .box th, .hotel-tokusyu .restaurant .box td {
 font-size: 14px;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .restaurant .box-wrap {
  flex-wrap: wrap;
 }
 .hotel-tokusyu .restaurant .box {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 10px auto;
 }
}
/*---------------------------------------------------------
　館内施設（facility）
---------------------------------------------------------*/
.hotel-tokusyu .facility .box-wrap {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.hotel-tokusyu .facility .box {
 width: 47%;
 margin: 0 0 30px 0;
}
.hotel-tokusyu .facility .box .img-box {
 margin: 0 0 15px 0;
}
.hotel-tokusyu .facility .box h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 400;
 font-size: 22px;
 color: #917347;
 margin: 0 0 10px 0;
 border-bottom: 1px solid #917347;
}
.hotel-tokusyu .facility .box h4 span {
 font-size: 16px;
 font-weight: 200;
}
.hotel-tokusyu .facility .box table {
 width: 100%;
 margin: 0 0 5px 0;
}
.hotel-tokusyu .facility .box th, .hotel-tokusyu .facility .box td {
 font-size: 14px;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .facility .box-wrap {
  flex-wrap: wrap;
 }
 .hotel-tokusyu .facility .box {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 10px auto;
 }
}
/*---------------------------------------------------------
　周辺観光（kanko）
---------------------------------------------------------*/
.hotel-tokusyu .kanko .box-wrap {
 display: flex;
 justify-content: space-between;
}
.hotel-tokusyu .kanko .img-box {
 width: 37%;
}
.hotel-tokusyu .kanko .txt-box {
 width: 60%;
}
.hotel-tokusyu .kanko .txt-box h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 400;
 font-size: 22px;
 color: #917347;
 margin: 0 0 10px 0;
 border-bottom: 1px solid #917347;
}
.hotel-tokusyu .kanko .txt-box p+p {
 margin: 10px 0 0 0;
}
@media screen and (max-width:750px) {
 .hotel-tokusyu .kanko .box-wrap {
  flex-direction: column;
 }
 .hotel-tokusyu .kanko .img-box {
  width: 100%;
    max-width: 350px;
  margin: 0 auto 10px auto;
 }
.hotel-tokusyu .kanko .txt-box {
  width: 100%;
 }
}
/*---------------------------------------------------------
　ツアー（tour）
---------------------------------------------------------*/
.hotel-tokusyu .tour {
 background: #c1d8ac;
 border-top: 5px solid rgba(255,255,255,0.5);
 text-align: center;
 margin: 0 0 2px 0;
}
.hotel-tokusyu .tour h3 {
 margin: 0 0 40px 0;
}
.hotel-tokusyu .tour h4 {
 font-family: 'Noto Serif JP', serif;
 font-weight: 200;
 font-size: 22px;
 margin: 0 0 20px 0;
}