@charset "UTF-8";
/* common */
.sp { display: none !important; }
#contents { background-color: #fff; position: relative; }
#widewrapper { width: 100%; font-family: 'Noto Sans JP', sans-serif; color: #333; }
#mainContents { background-color: #fff; }
#mainContents img { width: 100%; display: block; }
#mainContents a:hover { text-decoration: none !important; opacity: 0.8; }
.notice { color: #fff; font-size: 16px; line-height: 2.6; text-align: center; padding: 64px 24px; letter-spacing: 2px; }
.notice b { font-size: 28px; display: block; margin-bottom: 24px; font-weight: 500;}
.mainTitle { width: fit-content; margin: 0 auto 40px; font-size: 32px; font-weight: 700; text-align: center; color: #262626; }
.mainTitle p { letter-spacing: 8px; color: #808080; position: relative; }
.contentsInner { width: 1280px; margin: 0 auto 40px; }
.contentsInner:last-child { margin-bottom: 0; }
.btnWithArrow { width: 254px; display: block; margin: 0 auto; padding: 17px 24px; position: relative; text-align: center; color: #fff !important; font-weight: 700; background-color: #000; cursor: pointer; }
.btnWithArrow::after { content: ''; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 24px; height: 10px; background: url(https://img.travel.rakuten.co.jp/select/hotelr9/202504/images/arrow_right.svg) no-repeat; }
.btnWithArrow:hover { color: #fff; }
.btnWithArrow:link { color: #fff; }
.hotelYard .btnWithArrow, .hotelYard .hotelArea { background: #000; }
.hotelPremiu .btnWithArrow, .hotelPremiu .hotelArea { background: linear-gradient(90deg, #464646 12.25%, #020202 100%); }
.hotelSanofujioka .btnWithArrow, .hotelSanofujioka .hotelArea { background: #4A4542; }
.hotel99 .btnWithArrow, .hotel99 .hotelArea { background: #E3081E; }
.hotelTubeSq .btnWithArrow, .hotelTubeSq .hotelArea { background: #84754D; }
.hotelR9Hostel .btnWithArrow, .hotelR9Hostel .hotelArea { background: #A08ABF; }
.swiper-container .swiper-button-prev:after { content: ''; background: url(https://img.travel.rakuten.co.jp/select/hotelr9/202504/images/slide_arrow.svg) 100% 100%/100% 100% no-repeat; width: 18px; height: 40px; transform: rotate(180deg); }
.swiper-container .swiper-button-next:after { content: ''; background: url(https://img.travel.rakuten.co.jp/select/hotelr9/202504/images/slide_arrow.svg) 100% 100%/100% 100% no-repeat; width: 18px; height: 40px; }
.swiper-pagination-bullet { background: rgba(255, 255, 255, 1); }
/* .swiper-pagination-bullets {
bottom: 0 !important;
} */
.swiper-pagination-bullet7 { width: 10px; height: 10px; }
/* ---------------------------
kv 
----------------------------*/
.kv { background-color: #262626; }
.kv img { width: 100%; }
.kv .swiper-container { line-height: 0; }
/* ---------------------------
导航 
----------------------------*/
.navHtl { width: 100%; height: 90px; background-color: #FFF; display: flex; align-items: center; justify-content: center; 
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.26);}
.navHtl li { padding: 10px 30px; font-weight: 500; font-size: 20px; letter-spacing: 2px; }
.navHtl a { color: #262626 !important; }
.navHtl.active { margin-top: 0; background-color: #FFF; z-index: 100; }
/* ---------------------------
期間限定クーポン
----------------------------*/
#couponWrapper { padding: 60px 0 0; background-color: #F3F3F3; }
#couponWrapper .couponBox { width: 100%; padding: 0px 0 32px; }
#couponWrapper .couponBox .coupon__filter__guide { margin: 0; }
#couponWrapper .couponBox .coupon__box__holder { justify-content: center; }
/* ---------------------------
ホテル一覧
----------------------------*/
#hotels { padding: 80px 0 60px; background: #F3F3F3; }
#hotels .mainTitle { margin-bottom: 40px; }
#hotels .tab { margin: 0 auto; display: flex; align-items: center; margin-bottom: 24px; }
#hotels .tab li { width: calc((100% - 48px) / 10); margin-right: 8px; box-sizing: border-box; background-color: #fff; color: #000; border: 1px solid #000; text-align: center; padding: 8px 0; cursor: pointer; transition: all 0.2s linear; font-size: 14px; font-weight: 700; border-radius: 50px; }
#hotels .tab li:last-child { margin-right: 0; }
#hotels .tab li.active { background-color: #000; color: #fff; }
#hotels .tab li:hover { opacity: 0.8; }
#hotels .hotelsBox { display: flex; align-content: center; flex-wrap: wrap; }
#hotels .hotelsBox .swiper-wrapper { flex-wrap: wrap; }
#hotels .hotelsBox .hotelInfo { width: calc((100% - 44px) / 4); margin: 0 8px 20px 0; background-color: #fff; border: 1px solid #9B9B9B; }
#hotels .hotelsBox .hotelInfo img { aspect-ratio: 16 / 12; object-fit: cover; cursor: pointer; }
#hotels .hotelsBox .hotelInfo img:hover { opacity: 0.8; }
#hotels .hotelsBox .hotelInfo:nth-of-type(4n) { margin-right: 0; }
#hotels .hotelsBox .hotelInfo section { padding: 20px 10px 8px; line-height: 1.5; position: relative; }
#hotels .hotelsBox .hotelInfo section .hotelArea { width: fit-content; min-width: 70%; padding: 0 0 8px; color: #424242; font-size: 12px; }
#hotels .hotelsBox .hotelInfo section .hotelDetail { display: block; box-sizing: border-box; cursor: pointer; }
#hotels .hotelsBox .hotelInfo section .hotelDetail:hover { opacity: 0.8; color: #424242; }
#hotels .hotelsBox .hotelInfo section .hotelName { font-size: 14px; }
#hotels .hotelsBox .hotelInfo section .hotelDec { display: block; font-size: 12px; margin: 8px 0; }
#hotels .hotelsBox .hotelInfo section .detailBtn { display: block; width: 100%; text-align: center; border: 1px solid #262626; color: #262626; padding: 8px 0; margin: 8px 0; border-radius: 50px; }
#hotels .hotelsBox .hotelInfo section .btnGroup { display: flex; align-items: center; justify-content: space-between; }
#hotels .hotelsBox .hotelInfo section .btnGroup a { display: block; width: calc(50% - 5px); margin-right: 8px; padding: 8px 0; font-size: 14px; font-weight: 400; border: 1px solid #262626; color: #262626; text-align: center; border-radius: 50px; }
#hotels .hotelsBox .hotelInfo section .btnGroup a:last-child { margin-right: 0; }
#hotels .hotelsBox .hotelInfo section .btnGroup a::after { right: 8px; }
#hotels .hotelsBox .hotelInfo section::before { content: ""; height: 12px; position: absolute; top: 0; left: 0; right: 0; }
#hotels .hotelsBox .hotelInfo .comfortInn::before { background: #FFCC00; }
#hotels .hotelsBox .hotelInfo .comfort::before { background: #000066; }
#hotels .hotelsBox .hotelInfo .comfortERA::before { background: #FF9933; }
#hotels .hotelsBox .hotelInfo .comfortSuites::before { background: #CC3333; }
#hotels .hotelsBox .hotelInfo .ascend::before { background: #262626; }
/* ---------------------------
日付検索
----------------------------*/
#searchContent { padding: 80px 0; background: #fff; }
#searchContent #search-box { border: none; padding: 8px 24px 24px 24px; }
#searchContent #search-box p.searchSubmit a { height: 50px; line-height: 50px; background-color: #000 !important; text-indent: 0; border-radius: 50px; }
#searchContent #search-box p.searchSubmit a:hover { color: #fff; }
#searchContent #searchSwitchArea1 .line.sibori { left: -10px; top: -114px; }
#searchContent #searchSwitchArea1 .line.sibori li label { font-size: 15px !important; margin-right: 0; }
.toPpageTop { position: fixed; width: 50px; height: 50px; bottom: 50px; right: 16px; z-index: 99; }
.hotelColor { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.hotelColor li { padding: 8px 0; margin-right: 20px; }
.hotelColor li:last-child { margin-right: 0; }
.hotelColor li:nth-of-type(2) span::before { background: #FFCC00; }
.hotelColor li:nth-of-type(3) span::before { background: #FF9933; }
.hotelColor li:nth-of-type(4) span::before { background: #CC3333; }
.hotelColor li:nth-of-type(5) span::before { background: #262626; }
.hotelColor span { position: relative; display: block; padding-left: 17px; }
.hotelColor span::before { width: 12px; height: 12px; display: block; content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #000066; }
#ServBox.contentsInner { margin-top: 0; }
/* ---------------------------
Osaka Umeda Stories / Stay
----------------------------*/
#stories, #stay { padding: 60px 0 0; background-color: #fff; }
#stories .mainTitle, #stay .mainTitle { margin-bottom: 40px; }
#stories .storiesBox, #stay .stayBox { width: 100%; margin: 0 auto; max-width: 1980px; }
#stories .storyRow, #stay .stayRow { display: flex; align-items: stretch; width: 100%; min-height: 500px; }
#stay .stayRow { flex-direction: row-reverse; }
#stay .stayRow.reverse { flex-direction: row; }
#stories .storyRow .storyImg, #stay .stayRow .stayImg { width: 50%; overflow: hidden; }
#stories .storyRow .storyImg img, #stay .stayRow .stayImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
#stories .storyRow .storyText, #stay .stayRow .stayText { width: 50%; box-sizing: border-box; padding: 60px 80px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
#stories .storyRow .storyText { background-color: #262626; color: #fff; }
#stay .stayRow .stayText { background-color: #fcf9f3; color: #262626; }
#stories .storyTitle, #stay .stayTitle { font-size: 28px; font-weight: 500; line-height: 1.45; letter-spacing: 5.6px; margin: 0; }
#stories .storyDesc, #stay .stayDesc { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 2.56px; margin: 0; }

.notice a{display: table; margin: 24px auto 0; color: #fff !important; font-size: 20px; border:1px solid #fff; border-radius:50px; padding: 6px 32px; letter-spacing: 5.4px;}
.notice a:hover{ opacity: 0.8; text-decoration: none !important;}