@charset "UTF-8";
/* common */
.pc { 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: 14px; line-height: 2; text-align: center; padding: 32px 24px; }
.notice b { font-size: 24px; display: block; margin-bottom: 16px; font-weight: 500; }
.mainTitle { width: fit-content; margin: 0 auto 12px; font-size: 28px; font-weight: 700; text-align: center; color: #262626; }
.mainTitle p { color: #808080; position: relative; font-size: 26px; }
.contentsInner { width: 100%; box-sizing: border-box; padding: 40px 16px 0; }
.btnWithArrow { box-sizing: border-box; display: block; margin: 0 16px; padding: 16px 0; 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; }
.margin-top-16 { margin-top: 16px !important; }
.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-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
} */
.swiper-pagination-bullet7 { width: 10px; height: 10px; }
/* ---------------------------
kv 
----------------------------*/
.kv { background-color: #262626; }
.kv img { width: 100%; }
.kv .swiper-container { line-height: 0; }
/* ---------------------------
导航 
----------------------------*/
.navHtl { width: 100vw; height: 60px; background-color: #FFF; display: flex; align-items: center; justify-content: center; border-top: 2px solid #EDEFF7; 
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.26);}
.navHtl li { padding: 0 12px 0; height: 40px; font-weight: 700; font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.navHtl li:last-child { border: none; }
.navHtl li a { color: #262626; }
.navHtl.active { margin-top: 0; background-color: #FFF; z-index: 100; }
/* ---------------------------
期間限定クーポン
----------------------------*/
#couponWrapper { background-color: #F3F3F3; }
/* ---------------------------
ホテル一覧
----------------------------*/
#hotels { background: #F3F3F3; }
#hotels .mainTitle { margin-bottom: 12px; }
#hotels .tab { width: 100%; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 24px; font-size: 14px; }
#hotels .tab li { width: calc((100% - 16px) / 3); margin: 0 8px 8px 0; box-sizing: border-box; border: 1px solid #000; background-color: #fff; color: #000; text-align: center; padding: 10px 0; cursor: pointer; font-weight: 700; border-radius: 50px; }
#hotels .tab li:nth-of-type(3n) { margin-right: 0; }
#hotels .tab li.active { background-color: #000; color: #fff; }
#hotels .hotelsBox { display: flex; align-content: center; flex-wrap: wrap; padding-bottom: 24px; position: relative; }
#hotels .hotelsBox .swiper-scrollbar { position: absolute; left: 5%; bottom: 16px; width: 90%; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; z-index: 10; }
#hotels .hotelsBox .swiper-scrollbar-drag { background: #000066; border-radius: 2px; cursor: pointer; }
#hotels .hotelsBox .hotelInfo { box-sizing: border-box; margin-bottom: 8px; background-color: #fff; border: 1px solid #9B9B9B; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); }
#hotels .hotelsBox .hotelInfo img { aspect-ratio: 16 / 12; object-fit: cover; }
#hotels .hotelsBox .hotelInfo section { padding: 20px 10px 10px; line-height: 1.5; font-size: 14px; color: #424242; position: relative; }
#hotels .hotelsBox .hotelInfo section .hotelArea { height: auto; font-size: 12px; font-weight: 500; }
#hotels .hotelsBox .hotelInfo section .hotelName { color: #424242; font-weight: 500; min-height: 42px; }
#hotels .hotelsBox .hotelInfo section .hotelDetail { color: #424242; display: block; }
#hotels .hotelsBox .hotelInfo section .hotelDec { 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: center; }
#hotels .hotelsBox .hotelInfo section .btnGroup a { color: #262626; width: calc(50% - 4px); box-sizing: border-box; padding: 8px 0; font-size: 12px; font-weight: 400; margin: 0 8px 0 0; border: 1px solid #262626; text-align: center; border-radius: 50px; }
#hotels .hotelsBox .hotelInfo section .btnGroup a:last-child { margin-right: 0; }
#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: 40px 0; background: #fff; }
#searchContent .setInput ul { flex-wrap: wrap; }
#searchContent #search-box.verB .searchUndate { margin-bottom: 20px; }
#searchContent #search-box.verB .searchUndate input[type="checkbox"] + label { color: #000; }
.toPpageTop { position: fixed; width: 50px; height: 50px; bottom: 50px; right: 16px; z-index: 99; border-radius: 50%; box-shadow: 0px 0px 7px 2px rgba(255, 255, 255, 0.5); }
.hotelColor { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.hotelColor li { width: calc(50% - 8px); padding: 8px 0; margin-right: 16px; }
.hotelColor li:nth-child(2n) { 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; }
/* ---------------------------
Osaka Umeda Stories / Stay
----------------------------*/
#stories, #stay { background-color: #fff; }
#stories .contentsInner, #stay .contentsInner { padding: 32px 0 16px; }
#stories .mainTitle, #stay .mainTitle { margin-bottom: 0; }
#stories .storiesBox, #stay .stayBox { width: 100%; }
#stories .storyRow, #stay .stayRow { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 12px; box-sizing: border-box; }
#stories .storyRow .storyImg, #stay .stayRow .stayImg { width: 100%; height: 206px; 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: 100%; display: flex; flex-direction: column; gap: 16px; }
#stories .storyRow { height: auto; background-color: #262626; color: #fff; padding-bottom: 40px }
#stay .stayRow { background-color: #fcf9f3; color: #262626; }
#stories .storyTitle, #stay .stayTitle { font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: 4.8px; margin: 0; }
#stories .storyDesc, #stay .stayDesc { font-size: 14px; line-height: 1.5; letter-spacing: 2.56px; margin: 0; }
#swiper8 .swiper-button-next, #swiper8 .swiper-button-prev { top: 25%; }

.notice a{display: table; margin: 24px auto 0; color: #fff !important; font-size: 14px; border:1px solid #fff; border-radius:50px; padding: 6px 32px; letter-spacing: 2.4px;}