@charset "utf-8";
/* hotel css */

/*-------------------------------------------------
ページタイトル
-------------------------------------------------*/

#page_hotel .page_titlebox::before {
content: "HOTEL";
}
body#page_hotel::before {
content: "";
background-image: url("../img/hotel/body_bg.jpg");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
opacity: .25;
}


/*-------------------------------------------------
intro
-------------------------------------------------*/

.intro_txt {
font-size: 1.5rem;
line-height: 200%;
letter-spacing: 0.2em;
display: block;
text-align: center;
margin-bottom: 50px;
}
.intro_txt a {
text-decoration: underline;
color: #B29458;
}
.intro_txt a:hover {
text-decoration: none;
}

@media all and (max-width : 767px ){
.intro_txt {
font-size: 1.2rem;
line-height: 180%;
letter-spacing: 0.08em;
margin-bottom: 25px;
}
}


/*-------------------------------------------------
hotel_box
-------------------------------------------------*/

.hotel_box {
padding: 30px;
background: transparent;
border: 1px solid #8E7742;
margin-bottom: 50px;
}
.hotel_title {
padding: 0 10px 10px 5px;
border-bottom: solid 1px #85723D;
font-weight: 500;
font-size: 2.2rem;
letter-spacing: 0.2em;
color: #8E7742;
margin-bottom: 30px;
}

@media screen and (max-width:767px) {
.hotel_box {
padding: 15px 15px 25px 15px;
margin-bottom: 20px;
}
}

.hotel_inner {
display: flex;
justify-content: space-between;
}
.hotel_txtbox {
width: 55%;
}
.hotel_info_txt {
font-size: 1.5rem;
font-weight: 400;
line-height: 200%;
margin-bottom: 30px;
}
.hotel_link {
display: flex;
justify-content: space-between;
}
.hotel_link .btn {
width: 48%;
}

@media all and (max-width : 820px ){
.hotel_title {
font-size: 2.0rem;
}
.hotel_inner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hotel_txtbox {
width: 100%;
}
.hotel_info_txt {
font-size: 1.4rem;
font-weight: 400;
line-height: 180%;
margin-bottom: 25px;
}
}

@media screen and (max-width: 767px) {
.hotel_txtbox {
margin-top: 15px;
font-size: 1.2rem;
}
.hotel_title {
font-size: 1.5rem;
margin-bottom: 15px;
}
.hotel_info_txt {
font-size: 1.2rem;
margin-bottom: 20px;
}
.hotel_link {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.hotel_link .btn {
padding: 8px 20px 8px 20px;
}
.btn-arrow-r::after {
right: 10px;
}
}

.hotel_outline {
display: none;
}


/* swiper
-------------------------------------------------- */

.swiper_ex_wrap {
position: relative;
width: 40%;
overflow: hidden;
padding-bottom: 30px;
}
.swiper_ex_wrap .swiper-wrapper {
z-index: 5;
}
.swiper-img {
width: 100%;
display: block;
}
.swiper-img img {
width: 100%;
height: auto;
transform: scale(1.1);
display: block;
}
.swiper_ex_wrap .swiper-pagination-bullet {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: #ddd;
opacity: .2;
margin-right: 10px;
}
.swiper_ex_wrap .swiper-pagination-bullet:last-child {
margin-right: 0px;
}
.swiper_ex_wrap .swiper-pagination-bullet-active {
opacity: 1;
background: #B29458;
}
.swiper_ex_wrap .swiper-pagination {
position: absolute;
bottom: 0;
text-align: right;
}
.swiper_ex_wrap .swiper-pagination-bullet:hover {
cursor: pointer;
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: imgSlide 7s linear 0s normal both;
}

@keyframes imgSlide {
0% {
transform: translate(0px);
}
100% {
transform: translateX(-30px);
}
}

@media all and (max-width : 820px ){
.swiper_ex_wrap {
width: 100%;
margin-bottom: 10px;
}
.swiper-img img {
transform: scale(1.15);
}
}

@media all and (max-width : 767px ){
.swiper_ex_wrap {
padding-bottom: 25px;
margin-bottom: 0px;
}
.swiper-img img {
transform: scale(1.2);
}
.img_cap {
padding: 8px 5px;
font-size: 1.1rem;
}
}

/* リンクボタン
-------------------------------------------------- */

.hotel_link {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.btn {
position: relative;
display: inline-block;
padding: 16px 52px;
border: solid 1px #999;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: 0.2em;
color: #fff;
text-align: center;
cursor: pointer;
line-height: 1;
transition: all 0.5s;
}

@media all and (max-width : 820px ){
.btn {
font-size: 1.0rem;
white-space: nowrap;
letter-spacing: 0.1em;
}
}

.btn::after {
content: "";
position: absolute;
top: 50%;
display: block;
width: 5px;
height: 5px;
-webkit-transition: all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn:hover {
background-color: #8E7742;
color: #fff;
border: solid 1px #8E7742;
transition: all 0.5s;
}
.btn-arrow-l::after, .btn-arrow-r::after {
border-top: 1px solid #fff;
}
.btn-arrow-l::after {
left: 15px;
border-right: 1px solid #fff;
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.btn-arrow-r::after {
right: 15px;
border-right: 1px solid #fff;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.btn-arrow-b::after {
transform: translateY(-50%) rotate(135deg);
}
.btn-arrow-b:hover::after {
right: 15px;
}

/* ホテル基本情報
-------------------------------------------------- */

.hotel_outline table {
width: 100%;
table-layout: fixed;
margin-top: 20px;
border-collapse: collapse;
border-top: 1px solid #666;
}
.hotel_outline table th, 
.hotel_outline table td {
padding: 20px 10px 20px 10px;
border-bottom: 1px solid #666;
font-size: 1.4rem;
font-weight: 400;
}
.hotel_outline table th {
width: 82px;
letter-spacing: 0.2em;
vertical-align: middle;
}
.hotel_outline table td {
display: table-cell;
word-wrap: break-word;
overflow-wrap: break-word;
}
.hotel_outline table td a {
font-family: "EB Garamond", serif;
color: #B29458;
text-decoration: underline;
}
.hotel_outline table td a:hover {
text-decoration: none;
}

@media screen and (max-width: 767px) {
.hotel_outline table th, 
.hotel_outline table td {
padding: 5px;
font-size: 1.2rem;
}
.hotel_outline table th {
width: 70px;
}
}