@charset "UTF-8";
.pc {
  display: none;
}

body.mask {
  position: relative;
}

body.mask::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  margin: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #EAEAEA;
  z-index: 10000;
}

body.mask::after {
  z-index: 10001;
  display: block;
  content: "";
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-0.5em, 0);
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  text-indent: -9999em;
  animation: load5 1.1s infinite ease;
}

#widewrapper {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}
#widewrapper a:hover {
  opacity: 0.8;
}
#widewrapper img {
  vertical-align: bottom;
}

#contents {
  /* background-color: #f3f3f3; */
  margin: 0 auto;
  position: relative;
}

h1 {
  padding: 12px;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  background-color: #fff;
  z-index: 9999;
  position: sticky;
  top: 0;
}
h1 img {
  width: 100%;
}

#TOPBNR {
  position: relative;
}
#TOPBNR .swiper-pagination {
  top: 68%;
  height: 4px;
}
#TOPBNR .swiper-slide {
  object-fit: cover;
}
#TOPBNR .swiper-slide a {
  display: block;
}
#TOPBNR .swiper-slide a:hover {
  opacity: 1;
}
#TOPBNR .swiper-slide img {
  width: 100%;
}
#TOPBNR .swiper-pagination-bullet {
  background-color: #fff;
  border-radius: 4px;
  height: 2px;
  width: 30px;
}

.parts {
  /* box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); */
  background-color: #fff;
  margin: 0 auto;
  padding-top: 25px;
  padding-bottom: 16px;
  margin-top: 20px;
}
.parts h2 {
  text-align: center;
  font-weight: 500;
  font-family: YuGothic, "Yu Gothic", sans-serif;
  color: #bf0000;
  font-size: 20px;
}
.parts h2 em {
  font-size: 20px;
  font-style: normal;
}
.parts h2 b {
  display: block;
  font-size: 18px;
  color: #333;
  padding-top: 2px;
}
.parts h2 img {
  vertical-align: top;
  margin-right: 10px;
  margin-top: 1px;
}
.parts h3 {
  border-left: 2px solid #bf0000;
  padding-left: 8px;
  font-weight: 400;
  font-size: 18px;
}

.feature-box {
  font-family: YuGothic, "Yu Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 16px 0;
}
.feature-box li {
  border-radius: 4px;

}
.feature-box li .title {
  margin: 16px;
  letter-spacing: 1.2px;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  align-items: center;
}
.feature-box li .title img {
  width: 48px;
  margin-right: 8px;
  height: 48px;
}
.feature-box li .image {

  display: flex;
  justify-content: center;
}
.feature-box li .image img {
  width: 100%;
}
.feature-box li .text {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  text-align: right;
  padding: 16px;
}
.feature-box li .text a{position: relative;text-decoration: underline;color: #333;}
.feature-box li .text a:after{content: "";position: absolute;width: 5px;height: 5px; display: block;border-right: 1px solid #333;border-bottom: 1px solid #333;right: -10px;top: 5px;transform: rotate(-45deg);}
#FEATURES h2 img {
  width: 28px;
  padding-bottom: 3px;
  margin-right: 4px;
}

.links {
  font-size: 14px;
  padding: 20px 16px;
  text-align: center;
  color: #767676;
  font-weight: 300;
  line-height: 1.6;
}
.links a {
  color: #767676;
  border-bottom: 1px solid #767676;
  padding-bottom: 1px;
}
.links a:hover {
  text-decoration: none;
  border-bottom: none;
}

#FROMISSUE {
  margin-top: 0;
  padding-bottom: 10px;
}

.issue-box {
  margin: 24px 16px 0;
}
.issue-box:not(:last-child) {
  margin: 24px 16px 32px;
}
.issue-box.active .btn:after {
  transform: rotate(225deg);
  margin-top: -2px;
}
.issue-box.active .btn:before {
  content: "閉じる";
}
.issue-box .btn {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  position: relative; z-index: 1;
  padding: 10px 0; border: 1px solid #C0C0C0; border-radius: 3px; background: #F6F6F6;
}
.issue-box .btn:hover {
  opacity: 0.8;
}
.issue-box .btn:before {
  padding-right: 8px;
  display: block;
  content: "もっと見る";
}
.issue-box .btn:after {
  position: absolute;
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  right: calc(50% - 46px);
  top: calc(50% + 1px);
  margin-top: -6px;
  transform: rotate(45deg);
}
.issue-box ul {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.issue-box ul li {
  width: calc(50% - 4px);
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
}

.issue-box ul li img {
  width: 100%;
}
#FROMPLAN{margin-top: 0;}
#FROMPLAN .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 8px;
  margin-top: 24px;
}
#FROMPLAN .tabs li {
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  width: calc((100% - 12px) / 5);
  box-sizing: border-box;
}
#FROMPLAN .tabs li:hover {
  opacity: 0.8;
}
#FROMPLAN .tabs li.active {
  background-color: #00b900;
  color: #fff;
  border-color: #00b900;
}
#FROMPLAN .hotel-box {
  min-height: 380px;
  padding-top: 24px;
  padding: 24px 16px 16px;
}
#FROMPLAN .hotel-box .noNewArival {
  padding-bottom: 50px;
  padding-top: 30px;
  text-align: center;
  font-weight: 300;
}
#FROMPLAN .hotel-box h3 {
  margin-bottom: 16px;
}
#FROMPLAN .hotel-box .swiper-scrollbar {
  display: none;
}
#FROMPLAN .tab-holder .swiper:last-child .hotels {
  margin-bottom: 4px;
}
#FROMPLAN .tab-holder .swiper:not(:last-child) .hotels {
  margin-bottom: 50px;
}
#FROMPLAN .hotels li {
  width: 200px;
  border: 1px solid #eee;
  line-height: 1.6;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
  border-radius: 3px;
}
#FROMPLAN .hotels li a:hover {
  text-decoration: none;
}
#FROMPLAN .hotels li .photo {
  position: relative;
}
#FROMPLAN .hotels li .photo img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}
#FROMPLAN .hotels li .name {
  display: flex;
  position: absolute;
  width: calc(100% - 16px);
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  padding: 8px;
  color: #fff;
}
#FROMPLAN .hotels li .box {
  padding: 8px;
  font-size: 12px;
}
#FROMPLAN .hotels li .down a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#FROMPLAN .hotels li .down a .badge {
  box-sizing: border-box;
  padding-bottom: 3px;
  width: 58px;
  height: 58px;
  background-size: 58px;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}
#FROMPLAN .hotels li .down a .badge span {
  color: #fff;
  font-weight: 300;
}
#FROMPLAN .hotels li .down a .badge span:last-child {
  letter-spacing: -1px;
}
#FROMPLAN .hotels li .down a .badge span em {
  font-style: normal;
  font-weight: 500;
  font-size: 150%;
}
#FROMPLAN .hotels li .area {
  color: #767676;
}
#FROMPLAN .hotels li .price-box {
  color: #bf0000;
  padding-top: 6px;
}
#FROMPLAN .hotels li .price-box span {
  font-size: 14px;
  font-weight: bold;
}
#FROMPLAN .hotels li .condition {
  color: #333;
}
#FROMPLAN .hotels li .point span {
  font-size: 20px;
}
#FROMPLAN .hotels .review a .num {
  color: #bf0000;
  font-size: 14px;
  font-weight: bold;
}
#FROMPLAN .hotels .review .stars {
  font-size: 13px;
  letter-spacing: 3px;
  margin-right: 7.5px;
  width: 80px;
  text-align: center;
  display: inline-block;
  position: relative;
}
#FROMPLAN .hotels .review .stars .review-base {
  padding-left: 1.5px;
  color: #eaeaea;
  width: 100%;
  box-sizing: border-box;
}
#FROMPLAN .hotels .review .stars .review-rst {
  padding-left: 1.5px;
  color: #ffba00;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  box-sizing: border-box;
}
#FROMPLAN .all-plan,#gensen .all-plan {
  width: 70%;
  height: 64px;
  margin: 24px auto 0;
}
#FROMPLAN .all-plan a,#gensen .all-plan a {
  text-align: center;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #00b900;
  color: #fff;
  position: relative;
  font-size: 14px;
}
#FROMPLAN .all-plan a:hover {
  text-decoration: none;
}
#FROMPLAN .all-plan a:after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  right: 20px;
  top: 50%;
  margin-top: -5px;
  transform: rotate(-45deg);
}

#OVERVIEW .holder {
  margin: 24px 16px 0;
  padding: 16px;
  padding-bottom: 0;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}
#OVERVIEW .holder .title {
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 16px;
  font-weight: bold;
}
#OVERVIEW .holder .title span {
  display: block;
  font-size: 14px;
  padding-bottom: 8px;
}
#OVERVIEW .holder dl {
  line-height: 1.6;
  padding-bottom: 4px;
}
#OVERVIEW .holder dl:not(:last-child) {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 16px;
}
#OVERVIEW .holder dl dt {
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}
#OVERVIEW .holder dl dd span {
  display: inline-block;
  font-weight: bold;
  padding: 4px 8px;
  background: #ebebeb;
  font-weight: 400;
}
#OVERVIEW .holder dl dd p {
  padding: 4px 0 14px;
  font-weight: 300;
}
#OVERVIEW .holder dl dd p em {
  font-style: normal;
  text-decoration: underline;
}
#OVERVIEW .holder dl dd a {
  text-decoration: underline;
}
#arealink .bottom-area-link{gap:3px;padding: 0;margin: 8px;justify-content: flex-start;}
#arealink .bottom-area-link a{ border: 1px solid #ccc;border-radius: 4px;height: 36px;display: flex; justify-content: center;align-items: center;width: calc((100% - 12px) / 5);padding: 0;margin: 0;box-sizing: border-box;font-size: 12px;}
.bottom-area-link {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  justify-content: center;
  font-size: 12px;
}
.bottom-area-link a:not(:last-child) {
  margin-bottom: 6px;
  border-right: 1px solid #767676;
  padding-right: 8px;
  margin-right: 7px;
}

.bottom-bnr {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
}
.bottom-bnr li {
  width: calc((100% - 16px) / 3);
}
.bottom-bnr li img {
  width: 100%;
}

.pagetop {
/* display: none !important; */
  width: 56px;
  height: 56px;
  position: fixed !important;
  bottom: 78px;
  right: 8px;
  z-index: 9999;
}
.pagetop img {
  width: 100%;
}

@keyframes load5 {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
.crown:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 4px;
  width: 36px;
  height: 32px;
  background: url(https://img.travel.rakuten.co.jp/superdeal/fuseco/202303/images/icon_rank.svg) no-repeat;
  background-position: 0 0px;
  background-size: auto 36px;
}

.crown:nth-of-type(1):after {
  background-position: -2px 0px;
}

.crown:nth-of-type(2):after {
  background-position: -50px 0px;
}

.crown:nth-of-type(3):after {
  background-position: -98px 0px;
}

.crown:nth-of-type(4):after {
  background-position: -145px 0px;
}

.crown:nth-of-type(5):after {
  background-position: -193px 0px;
}

.crown:nth-of-type(6):after {
  background-position: -241px 0px;
}

.crown:nth-of-type(7):after {
  background-position: -289px 0px;
}

.crown:nth-of-type(8):after {
  background-position: -336px 0px;
}

.crown:nth-of-type(9):after {
  background-position: -384px 0px;
}

.crown:nth-of-type(10):after {
  background-position: -432px 0px;
}

p#seeMore{ margin:0 10px 0 0; clear: both;}
p#seeMore a{display: block; margin-top: 8px;
font-size: 14px;
font-weight: 400;
text-align: right;
cursor: pointer;
position: relative;
padding: 6px;}
p#seeMore a:before {
  padding-right: 8px;
  display: block;
  content: "もっと見る";
}
p#seeMore a:after{
position: absolute;
display: block;
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
right: 0;
top: 50%;
margin-top: -6px;
transform: rotate(45deg);   
}
p#seeMore.active a:before {
content: "閉じる";
}
p#seeMore.active a:after {
transform: rotate(225deg);
margin-top: -2px;
}
#featureBox.feature-box li{ margin-bottom: 15px;}

#testB {width: calc(100% - 32px); padding: 24px 16px 0;}
#FEATURES.parts { position: initial !important; margin-bottom: 0 !important; margin-top: -42px !important;padding-top:0 !important;}

.issue-box { position: relative;}
.coverBn { position: absolute; left: 0; width: 100%; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, rgba(255, 255, 255,0.6) 15%, rgba(255, 255, 255, 0.89) 30%, #FFF 60.94%); display: block;
}
.issue-box.active .coverBn { display: none;}
#OVERVIEW.parts { box-shadow: none;margin-top: 0;}
.bottomBnrParts { background: #fff; padding-top: 14px;}
.bottomBnr1 { margin: 0 16px 20px 16px;}
.bottomBnr1 img { width: 100%;}
body #survey { padding-top: 4px;}

#gensen .hotels li {box-sizing: border-box;width: 200px;
  width: 200px;
  border: 1px solid #eee;
  line-height: 1.6;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
  border-radius: 3px;
}
#gensen .hotels li a:hover {
  text-decoration: none;
}
#gensen .hotels li .photo {
  position: relative;
}
#gensen .hotels li .photo img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}
#gensen .hotels li .name {z-index: 20;
  display: flex;
  position: absolute;
  width: calc(100% - 16px);
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  padding: 8px;
  color: #fff;
}
#gensen .hotels li .box {
  padding: 8px;
  font-size: 12px;
}
#gensen .hotels li .down a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#gensen .hotels li .down a .badge {
  box-sizing: border-box;
  padding-bottom: 3px;
  width: 58px;
  height: 58px;
  background-size: 58px;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}
#gensen .hotels li .down a .badge span {
  color: #fff;
  font-weight: 300;
}
#gensen .hotels li .down a .badge span:last-child {
  letter-spacing: -1px;
}
#gensen .hotels li .down a .badge span em {
  font-style: normal;
  font-weight: 500;
  font-size: 150%;
}
#gensen .hotels li .area {
  color: #767676;
}
#gensen .hotels li .price-box {
  color: #bf0000;
  padding-top: 6px;
}
#gensen .hotels li .price-box span {
  font-size: 14px;
  font-weight: bold;
}
#gensen .hotels li .condition {
  color: #333;
}
#gensen .hotels li .point span {
  font-size: 20px;
}
#gensen .hotels .review a .num {
  color: #bf0000;
  font-size: 14px;
  font-weight: bold;
}
#gensen .hotels .review .stars {
  font-size: 13px;
  letter-spacing: 3px;
  margin-right: 7.5px;
  width: 80px;
  text-align: center;
  display: inline-block;
  position: relative;
}
#gensen .hotels .review .stars .review-base {
  padding-left: 1.5px;
  color: #eaeaea;
  width: 100%;
  box-sizing: border-box;
}
#gensen .hotels .review .stars .review-rst {
  padding-left: 1.5px;
  color: #ffba00;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  width: 0;
  box-sizing: border-box;
}
#gensen .all-plan a:hover {
  text-decoration: none;
}
#gensen .all-plan a:after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  right: 20px;
  top: 50%;
  margin-top: -5px;
  transform: rotate(-45deg);
}

#gensen .whatsgensen a{display: flex;color: #333;font-size: 14px; align-items: center;font-weight: 500; justify-content: flex-end;padding: 10px;}
#topLogo{position: relative;}
#topLogo a{display: flex;color: #333;font-size: 14px; align-items: center;font-weight: 500; justify-content: flex-end;padding: 10px 0 0 0;}
#topLogo a img{width: auto;}
#gensen .hotel-box .swiper{padding-bottom: 20px;}
#gensen .hotel-box {
  min-height: 380px;
  padding-top: 24px;
  padding: 24px 16px 16px;
}
#gensen .jdsSlides{position: relative;overflow: hidden;}

#gensen .photo ul{position: relative;overflow: hidden;width: 100%;height: 200px;}
#gensen .photo ul li{width: 100%;height: 200px;position: absolute;  animation: anime 15s 0s infinite;opacity: 0;}
@keyframes anime {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 1;
  }
  60% {
      opacity: 0;

      z-index: 10;
}
  100% {
      opacity: 0;
   
  }
}
#gensen .photo ul li:nth-child(2){  animation-delay:5s;}
#gensen .photo ul li:nth-child(3){  animation-delay: 10s;}
#gensen .photo ul li a{display: block;width: 100%;height: 100%; background-size: cover;position: absolute;}
.topPage #FEATURES.parts{top: 0;margin-top: 0 !important;padding-top: 40px !important;padding-bottom: 40px;}

#arealink{ position: initial !important; margin-bottom: 0 !important; margin-top: 70px !important;padding-top:0 !important;}

/* 0508new */
.pc2{display: none !important;}
.topbnr img{display: block; width: 100%;}
#SEARCH.pars{top: -24px !important;}
#appointment{background: #EEFCFF; padding: 20px 16px; position: relative;}
#appointment h2{color: #00337E; font-size: 20px; text-align: center; margin-bottom:20px; font-weight: 400;}
#appointment h2:last-of-type{text-align: left;}
#appointment .step{margin: 0 auto 40px; padding-bottom: 56px; background: url("https://travel.rakuten.co.jp/superdeal/special/business/images/arrow.png") no-repeat center bottom / 165px 28px;}
#appointment .step li{margin: 0 0 24px;}
#appointment .step li > img{width: 100%; border-radius: 4px; border: 1px solid #ccc; display: block; margin-bottom: 10px;}
#appointment .step li h3{display: flex; align-items: center; margin-bottom: 10px;}
#appointment .step li h3 img{width: 48px; margin-right: 10px;}
#appointment .step li h3 span{font-size: 16px; color: #333;}
#appointment .step li p{font-size: 14px; text-align: right; color: #333;}
#appointment .step li p a{position: relative; color: #333; text-decoration: underline; padding-right: 16px;}
#appointment .step li p a:after{position: absolute; content: ''; width: 6px; height: 6px; border-top: 1px solid #333; border-right: 1px solid #333; right: 6px; top: 50%; transform: rotate(45deg) translateY(-50%);}
/* #appointment .use{margin-bottom: 24px;} */
#appointment .use li{margin: 0 0 24px;}
#appointment .use li > img{display: block; width: 100%; border-radius: 4px;}
#appointment .use li h3{display: flex; align-items: center; margin-bottom: 10px;}
#appointment .use li h3 img{width: 48px; margin-right: 10px;}
#appointment .use li h3 span{font-size: 16px; color: #333;}
#appointment .use li.note{font-size: 20px; color: #333; text-align: center;}
#appointment .use li.close{text-align: right; padding-right: 16px;color: #00337E; font-size: 14px; position: relative;}
#appointment .use li.close:before{position: absolute; content: ''; width: 6px; height: 6px; border-top: 1px solid #00337E; border-right: 1px solid #00337E; right: 0; top: 50%; transform: rotate(-45deg) translateY(-50%);}
#appointment .switch{width: 100%; position: relative; height: 20px; padding-bottom: 24px;}
#appointment .switch.active-submenu{display: none;}
#appointment .switch:before{position: absolute; content: 'もっと見る'; color: #00337E; font-size: 14px; right: 16px;}
#appointment .switch:after{position: absolute; content: ''; border-right: 1px solid #00337E; border-bottom: 1px solid #00337E; top: 6px; right: 0; width: 6px; height: 6px; transform: rotate(45deg);}
#appointment .switch.active-submenu:before{content: '閉じる'; display: none;}
#appointment .switch.active-submenu:after{transform: rotate(-135deg); top: 8px; display: none;}

#Tokusyu .swiper{margin: 30px 10px 0;}
#Tokusyu .swiper-wrapper{flex-wrap: wrap; justify-content: space-between; transform: none !important; transition: none !important;}
#Tokusyu .swiper-slide{width: 49% !important; margin: 0 0 10px !important;}
#Tokusyu .swiper-slide img{display: block; width: 100%;}

#contents{background: #fff !important;}
#Tokusyu{padding-bottom: 0;}

#ui-datepicker-div{position: fixed !important; margin-top: -15% !important;}
#mask{top: 50px !important; height: 102px !important;}