@charset "UTF-8";
/* Scss Document */


.sp { display: block; }

.sp img { display: block; vertical-align:bottom; }
.columright { margin-top: 16px;}
.pc { display: none; }

.img_sp img { width: 100%; }

.page_h2 { margin: auto auto 10px auto; text-align: center; max-width: 600px; }

.page_h2 img { width: 100%; max-width: 600px; margin: auto; }

.page_btn img { width: 100%; }

.f_m { font-size: 14px; line-height: 1.75; }

.f_left_sp { float: left; }

.f_right_sp { float: right; }

.columright {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
.columright img{vertical-align:bottom;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.columright h2 img {
    width: 100%;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@media screen and (min-width: 620px){
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 620px){
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* Top */
#keyVisual2 { margin-bottom: 10px; }

#keyVisual2 img { width: 100%; }

/* mainContents */
/* Part0 */
#Part0 { margin-bottom: 20px; }

.p0block { margin: 0 12px; text-align: center; font-family:'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.p0block img { width: 100%; max-width: 330px; margin: auto auto 10px auto; }

.p0block .p01 { display: block; text-align: left; color: #451722; font-family: myFont1; }

.pcImg { display: none !important; }

.photosPart1 { background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p2bg.jpg) center bottom no-repeat; }
@keyframes fadein {
from
{ opacity: 0; transform: translateY(20px); }
to
{ opacity: 1; transform: translateY(0); }
}

/* Part1 */
#Part1 { background: #e9d9dd url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p1bgSp.jpg) top right no-repeat; background-size: 720px; }

#Part1 .img_sp { margin-bottom: 5px; }

.p1block { padding: 0 15px 1px 15px; }

.pgtxt { font-size: 14px; line-height: 1.75; margin-bottom: 15px; color: #451722; ffont-family:'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; animation: fadein ; animation-duration: 1s;}
.spMo { animation: fadein ; animation-duration: 1s;}

/* Part2 */
#Part2 { background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p1bg.png) center top no-repeat; background-size: 100%; }

#Part2 .img_sp { margin-bottom: 5px; }

.p2block { padding: 20px 15px 20px 15px; background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p2bg2.png) center bottom no-repeat; background-size: 100%; }

/* Part3 */
#Part3 { background: #fff url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p3bg.jpg) center bottom no-repeat; background-size: 100%; margin-top: -1px; }

.p3block { padding: 20px 15px 20px 15px; }

/* Part4 */
#Part4 { background: #e9d9dd; padding-bottom: 25px; }

.p4block { padding: 20px 15px 0 15px; }

.pageBlockB { background: #27190e; }

.photosPart2 {
  background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p5bg2.jpg)
  center bottom no-repeat; background-size: 1400px; }

/* Part5 */
.p5con { background: #26190e}
#Part5 { background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p4bg.jpg) center top -100px no-repeat; width: 100%; background-size: 1000px; }

.p5block { background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/p4bg2.png) center top no-repeat; background-size: 100%; padding-top: 50px;position: relative;}

.hotel_h2 { text-align: center; margin: 0 auto 15px auto; padding-top: 12px; }

.hotel_h2 img { width: 160px; margin: auto; }

.areaBlock { margin: auto; margin-bottom: 10px; }

.p5sub { font-size: 11px; color:#451722;font-weight: bold;position: absolute; top: 0; margin-bottom: 5px; text-align: center; width: 100%;}

.areacon { margin: 0 15px; padding: 15px 15px 0 15px; background: #ded5c0; }

.areaBox { border-radius: 0 20px 0 20px; border: 1px solid #451722; background: #fff; font-family:'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; position: relative; border: 2px solid #451722; padding: 15px 15px 1px 15px; margin-bottom: 15px; }

.areaBox img { width: 100%; }

.areaBox .jdsSlides { width: 100%; max-width: 280px; margin: auto; }

.areaBox .jdsSlides img { width: 100%; max-width: 280px; }

.areaBox .rslides_tabs { display: flex; justify-content: center; width: 100%; }

.areaBox .rslides_tabs li { margin: 8px 5px 15px 5px; font-size: 0; }

.areaBox .rslides_tabs li a { background: #958d8f; width: 14px; height: 14px; display: block; border-radius: 50%; }

.areaBox .rslides_tabs li a:hover { opacity: 0.8; }

.areaBox .rslides_tabs li.rslides_here a { background: #451722; }

.area { color: #451722; font-size: 16px; text-align:left; font-weight: bold; }

.area span { display: block; font-size: 18px; }

.exp { line-height: 1.55; margin-bottom: 12px; font-size: 14px; }

.photoBox { margin: auto; }

.photoBox img { width: 100%; }

.point { font-size: 16px; background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/pointIcon.png) left center no-repeat; min-height: 30px; line-height: 1.4; padding-left: 38px; margin-bottom: 10px; }

#contentsArea .planBox { box-shadow: 1px 1px 2px #fafafa
; margin-bottom: 15px; border: 2px solid #451722; }

#contentsArea .planBox a { display: block; position: relative; width: 100%; padding: 8px 0; }

#contentsArea .planBox a:before { width: 35px; height: 37px; display: block; content: ""; position: absolute; right: -2px; bottom: -2px; background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/planArrow.png) 0 0 no-repeat; background-size: 35px; }

#contentsArea .planBox a:hover { text-decoration: none; }

#contentsArea .planBox a:hover:before { width: 35px; height: 37px; display: block; content: ""; position: absolute; right: -2px; bottom: -2px; background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/planArrow_o.png) 0 0 no-repeat; background-size: 35px; }

.planName { margin: 0 12px 4px 10px; font-weight: bold; line-height: 1.4; font-size: 14px; }

.price { font-size: 13px; text-align: center; line-height: 1.3; }

.price span { font-size: 20px; }

.price b { color: #451722; }

.areaH3 { background: url(https://img.travel.rakuten.co.jp/select/hankyu-hotel/images/areaH3.png) center top no-repeat; text-align: center; font-size: 20px; color: #451722; background-size: 680px; margin: 0 15px; padding: 0 0 2px 0; }

.areaH3 span { padding-top: 46px; display: block; }

/* Part6 */
#Part6 { background: #ded5c0; padding: 15px 12px 15px 12px; margin-bottom: 20px; }

#Part6 .p6h2 { text-align: center; margin: auto auto 15px auto; }

#Part6 .p6h2 img { width: 100%; max-width: 330px; margin: auto; }

.p6exp { font-family:'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height: 1.75; margin-bottom: 6px; font-size: 14px; }

.p6exp em { font-style: normal; color: #451722; display: block; font-weight: bold; }

.p6img { margin-bottom: 14px; }

.p6h3 { text-align: center; margin: 10px auto 2px auto; text-align: center; }

.p6h3 img { width: 100%; max-width: 330px; margin: auto; }

#contentsArea .pageCtl { width: 100%; position: fixed; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.9); z-index: 300; }

#contentsArea .pageCtl ul li { font-size: 18px; font-weight: bold; text-align: center; }

#contentsArea .pageCtl ul a { padding: 10px 0; border-bottom: 1px solid #451722;}

#contentsArea .pageCtl .goUrl { font-size: 18px; padding: 5px 0; }

#contentsArea .pageCtl .goUrl a { display: block; text-align: center; padding: 6px 0; }

#contentsArea .pageCtl a { color: #451722; display: block; padding: 6px; }

/* #contentsArea .pageCtl a:hover { text-decoration: none; */

  /* background: #451722;  */

  /* color: #fff; } */

.ctlBtn { padding: 12px 25px; position: relative; }

.ctlBtn #closeCtl { width: 25px; height: 25px; display: block; position: absolute; right: 6px; top: 6px; }

.ctlClick { background: #451722; font-size: 18px; font-weight: bold; padding:12px 10px; text-align: center; color: #fff; }

.ctlClick span { position: relative; padding: 0 25px; }

.ctlClick span:before { position: absolute; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #fff; right: 0px; top: 4px; display: block; }

/* .ctlClick:hover { background: #e5a3b6; } */

.ctlClick2 { background: #999; font-size: 18px; font-weight: bold; padding: 12px 10px; text-align: center; color: #fff; }

.ctlClick2 span { position: relative; padding: 0 25px; }

.ctlClick2 span:before { position: absolute; content: ""; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #fff; right: 0px; top: 5px; display: block; }

#CtnTop { display: none !important; }

.pageNavOpen { display: none; }

#Part5 .jdsTabNav { font-size: 0; }

/* ----- search_right -----*/
.search_right { display: none; }

.fixBnr2 { display: none; }

/*# sourceMappingURL=contents_sp.css.map */
.fadein{
  -webkit-transition: all 1.5s linear;
  -o-transition: all 1.5s linear;
  transition: all 1.5s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}


/*============================
#menu-sp
============================*/
#menu-sp {display: block;position: fixed;width: 100%;bottom: 0;z-index: 999;background: #fffaf7;box-sizing: border-box;}
#menu-sp .main-acc {display: none;padding: 15px 10px 1em;position: absolute;bottom: 47px;width: 100%;background: rgba(255, 251, 249, 0.9);box-sizing: border-box;}
#menu-sp .menu-arrow {display: inline-block;width: 10px;height: 10px;border-top: solid 3px #fff;border-right: solid 3px #fff;border-radius: 1px;-webkit-transform: rotateX(0deg) rotate(-45deg);transform: rotateX(0deg) rotate(-45deg);position: relative;top: 1px;left: 7px;transition: 0.4s;}
#menu-sp .is-show .menu-arrow {top: -3px;-webkit-transform: rotateX(-180deg) rotate(-45deg);transform: rotateX(-180deg) rotate(-45deg);}
#menu-sp .ico-close {position: absolute;width: 22px;height: 22px;display: block;top: 8px;right: 8px;cursor: pointer;}
#menu-sp .ico-close:before, #menu-sp span.ico-close:after {content: '';width: 22px;height: 2px;display: block;background: #616161;position: absolute;top: 50%;}
#menu-sp .ico-close:before {transform: rotate(-45deg);}
#menu-sp .ico-close:after {transform: rotate(45deg);}
#menu-sp ul li a {font-size: 1em;font-weight: bold;letter-spacing: 0.05em;}
#menu-sp .menu-list1 li {text-align: center;}
/* 2 column */
#menu-sp .menu-list1.col2 {display: flex;flex-wrap: wrap;justify-content: space-between;padding-top: 12px;}
#menu-sp .menu-list1.col2 li {width: 48%;}
#menu-sp .menu-list1 li a {padding: 0.6em 0;display: inline-block;border-bottom: 1px solid #989898;width: 100%;box-sizing: border-box;}
#menu-sp .menu-list1 li a span {display: block;font-size: 12px;}
#menu-sp .menu-list2 li {text-align: center;}
#menu-sp .menu-list2 li a {padding: 0.7em 0 0;display: inline-block;width: 100%;}
#menu-sp .menu-list2 .ico-info a span {position: relative;}
#menu-sp .menu-list2 .ico-info a span:before {content: '';width: 22px;height: 22px;display: inline-block;position: absolute;top: 0;left: -26px;background: url(https://img.travel.rakuten.co.jp/superdeal/images/base/ico_info.png) no-repeat left center;background-size: 22px;}
#menu-sp p.btn-acc {font-size: 1em;font-weight: bold;color: #fff;text-align: center;text-shadow: 1px 1px 1px #b1b1b1;letter-spacing: 0.05em;width: 100%;height: 47px;line-height: 47px;cursor: pointer;background: #451722;}

#sevInfo {padding-top: 1px;}
.p5bgBottom { position: relative;}
#sevInfo h2 { margin-top: 0; padding-top: 30px;}

.surveyArea { margin-bottom: 50px;}