/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/pc/assets/css/hotelplan.scss ***!
  \**************************************************************************************************************************************************************/
@charset "UTF-8";
/* breadcrumb
-------------------------*/
.breadcrumb {
  padding-block: 15px;
}
.breadcrumb + .base {
  margin-top: 20px;
}

/* base
-------------------------*/
.base {
  width: 100%;
}

/* base-contents
-------------------------*/
.base-contents {
  width: 1032px;
  margin-inline: auto;
  padding-inline: 20px;
}
.base-contents + .selected-plans {
  margin-top: 20px;
}

/* selected-plans
-------------------------*/
.selected-plans {
  width: 992px;
  margin-inline: auto;
}
.selected-plans + .base-contents {
  margin-top: 30px;
}

/* section
-------------------------*/
.section__heading {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.section__heading--jp {
  font-size: 1.875rem;
  width: 100%;
}
.section__heading + .section__contents {
  margin-top: 10px;
}
.section__heading--plan {
  color: #fff;
  font-weight: normal;
  background-color: #47c40c;
  padding: 10px 16px;
}
.section__heading--plan + .section__contents {
  margin-top: 0;
}
.section + .section {
  margin-top: 20px;
}

/* hotel-award
-------------------------*/
.hotel-award {
  display: flex;
  gap: 40px;
}
.hotel-award__item {
  transition: all 0.3s;
  cursor: pointer;
}
.hotel-award__item:hover {
  opacity: 0.8;
}
.hotel-award__contents {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hotel-award__icon {
  flex-shrink: 0;
  max-width: 45px;
  padding-top: 4px;
}
.hotel-award__icon img {
  width: 100%;
  height: auto;
}
.hotel-award__text {
  font-size: 15px;
  color: #554738;
  line-height: 1.2;
  border-image-source: linear-gradient(45deg, #FEE9A0 0%, #ecd453 45%, #FFF1A6 70%, #ecd453 85%, #FEE9A0 90% 100%);
  border-image-slice: 1;
  border-bottom: 4px solid;
  padding-bottom: 3px;
  width: fit-content;
  text-align: center;
}
.hotel-award__text span {
  color: #554738;
  font-weight: bold;
  font-size: 24px !important;
  padding: 0 8px;
}
.hotel-award--blue .hotel-award__text {
  color: #19448e;
  border-image-source: linear-gradient(45deg, #d3d3d8 0%, #efefef 45%, #E8E8E8 70%, #c9caca 85%, #d3d3d8 90% 100%);
}
.hotel-award--blue .hotel-award__text span {
  color: #19448e;
}
.hotel-award .item-wrap__award {
  padding: 8px;
}

/* hotel
-------------------------*/
.hotel__info-row {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
* + .hotel__info-row {
  margin-top: 10px;
}
.hotel__info-row--top {
  gap: 10px;
  align-items: center;
}
.hotel__info-name {
  font-size: 0.75rem;
  color: #888;
}
.hotel__stars {
  display: flex;
}
.hotel__service-link {
  font-size: 0.75rem;
}
.hotel__images {
  margin-top: 10px;
}
.hotel__location-map {
  flex-shrink: 0;
  width: 65%;
}
.hotel__landmarks {
  width: 100%;
}
.hotel__address {
  font-size: 0.75rem;
  margin-top: 6px;
}

/* hotel-images
-------------------------*/
.hotel-images {
  display: flex;
  gap: 5px;
  height: 413px;
}
.hotel-images__main {
  flex-shrink: 0;
  width: 65%;
}
.hotel-images__other {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hotel-images__list {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: calc(100% - 37px);
}
.hotel-images__list-item {
  width: 100%;
  overflow: hidden;
}
.hotel-images__list-item img {
  aspect-ratio: 169/122;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hotel-images__more-button {
  height: 32px;
}

/* hotel-location
-------------------------*/
.hotel-location {
  position: relative;
}
.hotel-location__map {
  width: 100%;
  height: 140px;
}
.hotel-location__detail-button {
  width: 235px;
  border-radius: 50px;
  position: absolute;
  right: 0;
  bottom: 12px;
}
.hotel-location__modal {
  padding: 0;
  height: 100%;
}
.hotel-location__modal--inner {
  height: 100%;
}

/* hotel-landmarks
-------------------------*/
.hotel-landmarks {
  border: 1px solid #707070;
}
.hotel-landmarks:has(.hotel-landmarks__item:nth-of-type(5)) .hotel-landmarks__list {
  padding-bottom: 0;
}
.hotel-landmarks:has(.hotel-landmarks__item:nth-of-type(5)) .hotel-landmarks__more-button {
  display: flex;
}
.hotel-landmarks__title {
  display: block;
  width: 100%;
  background-color: #f7f7f7;
  padding: 5px 10px;
}
.hotel-landmarks__title, .hotel-landmarks__item {
  font-size: 0.75rem;
}
.hotel-landmarks__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  padding: 8px 10px;
}
.hotel-landmarks__list.is-show .hotel-landmarks__item:nth-of-type(n + 5) {
  display: flex;
}
.hotel-landmarks__item {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 8px;
  border-bottom: 1px solid #939dad;
}
.hotel-landmarks__item:nth-of-type(n + 5) {
  display: none;
}
.hotel-landmarks__name {
  max-width: 100px;
}
.hotel-landmarks__distance {
  text-align: right;
}
.hotel-landmarks__more-button {
  display: none;
  margin-top: 16px;
}
.hotel-landmarks__more-button.is-show .c-square-button__icon {
  transform: rotate(180deg);
}

/* hotel-rooms
-------------------------*/
.hotel-rooms__room + .hotel-rooms__room {
  margin-top: 10px;
}

/* hotel-room
-------------------------*/
.hotel-room {
  border: 1px solid #707070;
}
.hotel-room__heading {
  display: flex;
  gap: 15px;
  font-size: 1.125rem;
  font-weight: bold;
  padding: 10px 20px;
}
.hotel-room__contents {
  display: flex;
  gap: 30px;
  margin-top: 10px;
  background-color: #f7f7f7;
  padding: 20px 30px;
}
.hotel-room__info {
  flex-shrink: 0;
  width: 45%;
}
.hotel-room__plans {
  width: 100%;
}
.hotel-room__plans:has(.hotel-room__plan-item:nth-of-type(3)) .hotel-room__more-plans {
  display: flex;
}
.hotel-room__images {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.hotel-room__image-wrapper {
  width: calc((100% - 6px) / 3);
  position: relative;
  background-color: #fff;
}
.hotel-room__image-wrapper:first-of-type {
  width: 100%;
  position: relative;
}
.hotel-room__image {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hotel-room__expansion-images {
  margin-top: 6px;
}
.hotel-room__facilities-list {
  margin-top: 6px;
}
.hotel-room__facilities-item {
  font-size: 0.75rem;
}
.hotel-room__more-facilities {
  margin-top: 6px;
}
.hotel-room__plan-list.is-show .hotel-room__plan-item:nth-of-type(n + 3) {
  display: block;
}
.hotel-room__plan-item {
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.25);
}
.hotel-room__plan-item:nth-of-type(n + 3) {
  display: none;
}
.hotel-room__plan-item + .hotel-room__plan-item {
  margin-top: 20px;
}
.hotel-room__more-plans {
  display: none;
  margin-top: 20px;
}
.hotel-room__more-plans.is-show .c-square-button__icon {
  transform: rotate(180deg);
}

/* hotel-room-plan
-------------------------*/
.hotel-room-plan {
  padding: 8px;
  background-color: #fff;
  border: 1px solid #707070;
}
.hotel-room-plan.is-selected {
  padding-top: 20px;
  border: 3px solid #47c40c;
  position: relative;
}
.hotel-room-plan.is-selected::before {
  content: "選択中";
  width: fit-content;
  font-size: 0.875rem;
  color: #fff;
  background-color: #47c40c;
  padding: 4px 8px;
  position: absolute;
  top: -15px;
  right: 10px;
}
.hotel-room-plan__heading {
  font-size: 0.75rem;
  font-weight: bold;
}
* + .hotel-room-plan__detail {
  margin-top: 6px;
}

/* bottom-box
-------------------------*/
.bottom-box {
  padding-inline: 20px;
}
.bottom-box:last-of-type {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 30px;
}
.bottom-box + .bottom-box {
  margin-top: 20px;
}
.bottom-box__container {
  display: flex;
  justify-content: space-between;
}
.bottom-box__title {
  width: 23%;
  font-size: 1rem;
  font-weight: bold;
  color: #707070;
  border-top: 1px solid #eaeaea;
  padding-top: 20px;
}
.bottom-box__title--no-border {
  border: none;
}
.bottom-box__contents {
  width: 75%;
  border-top: 1px solid #eaeaea;
  padding-top: 20px;
}
.bottom-box__contents--no-border {
  border: none;
}
.bottom-box__more-contents {
  display: none;
  margin-top: 20px;
}
.bottom-box__more-contents--consecutive {
  margin-top: 0;
}
.bottom-box__more-contents--consecutive .bottom-box__title,
.bottom-box__more-contents--consecutive .bottom-box__contents {
  padding-top: 10px;
}
.bottom-box__list {
  padding-left: 10px;
}
.bottom-box__more-container {
  text-align: center;
  margin-top: 20px;
}
.bottom-box__more {
  display: inline-block;
  font-size: 0.6875rem;
  color: #4f97fc;
  padding-right: 20px;
  position: relative;
  cursor: pointer;
}
.bottom-box__more::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #4f97fc;
  clip-path: polygon(50% 80%, 0 20%, 100% 20%);
  position: absolute;
  right: 0;
}
.bottom-box__more[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.bottom-box__card {
  background-color: #f8f7f9;
  padding: 20px 10px;
}
.bottom-box__card-title {
  font-size: 0.875rem;
  font-weight: bold;
  color: #707070;
}
.bottom-box__card-title + .bottom-box__card-text {
  border-top: 1px solid #eaeaea;
  padding-top: 10px;
}
.bottom-box__card-text {
  font-size: 0.75rem;
  color: #707070;
  margin-top: 10px;
}
.bottom-box__annotation {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 20px;
}
.bottom-box__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #4f97fc;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 10px;
  margin-left: 10px;
}
.bottom-box__button-text {
  font-size: 0.75rem;
  color: #fff;
}
@media (hover: hover) {
  .bottom-box__button-text:not(.is-disabled-hover):hover {
    opacity: 0.8;
  }
}

/* bottom-box-list
-------------------------*/
.bottom-box-list--col2 {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.bottom-box-list--col2 .bottom-box-list__row + .bottom-box-list__row {
  margin-top: 0;
}
.bottom-box-list__row + .bottom-box-list__row {
  margin-top: 20px;
}
.bottom-box-list__title {
  font-size: 0.875rem;
  font-weight: bold;
  color: #707070;
}
.bottom-box-list__title + .bottom-box-list__content {
  margin-top: 10px;
}
.bottom-box-list__content {
  display: grid;
  row-gap: 10px;
}
.bottom-box-list__content--col3 {
  gap: 2px 12px;
  grid-template-columns: repeat(3, 1fr);
}
.bottom-box-list__text {
  font-size: 0.75rem;
  color: #707070;
}
.bottom-box-list__table {
  margin-top: 10px;
}

/* bottom-box-spot
-------------------------*/
.bottom-box-spot__row {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 0.75rem;
  color: #707070;
}
.bottom-box-spot__row + .bottom-box-spot__row {
  margin-top: 10px;
}
.bottom-box-spot__name + .bottom-box-spot__distance {
  display: flex;
  gap: 4px;
  align-items: center;
}
.bottom-box-spot__name + .bottom-box-spot__distance::before {
  content: "-";
}
.bottom-box-spot__distance {
  flex-shrink: 0;
}

/* bottom-box-table
-------------------------*/
.bottom-box-table__header {
  font-size: 0.875rem;
  font-weight: bold;
  color: #707070;
  background: #f8f7f9;
  border: 1px solid #eaeaea;
  padding: 20px;
}
.bottom-box-table__header--width30 {
  width: 30%;
}
.bottom-box-table__header--width70 {
  width: 70%;
}
.bottom-box-table__data {
  font-size: 0.75rem;
  color: #707070;
  vertical-align: top;
  border: 1px solid #eaeaea;
  padding: 20px;
}
.bottom-box-table__data--bold {
  font-weight: bold;
}

/* prev-link
-------------------------*/
.prev-link {
  padding-top: 20px;
}

/* block-error
-------------------------*/
* + .block-error {
  margin-top: 10px;
}

/* Swiper
-------------------------*/
.swiper-container--main {
  height: 413px;
}
.swiper-container--main .swiper-image {
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background-color:rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.swiper-container--modal-main .swiper-image {
  height: 458px;
  aspect-ratio: 4/3;
  object-fit: contain;
  background-color: #fff;
}
.swiper-container--modal-thumb {
  margin-top: 10px;
}
.swiper-container--modal-thumb .swiper-slide {
  border: 2px solid #000;
  opacity: 0.5;
  overflow: hidden;
}
.swiper-container--modal-thumb .swiper-slide-thumb-active {
  border: 2px solid #fff;
  opacity: 1;
}
.swiper-container--modal-thumb .swiper-image {
  aspect-ratio: 4/3;
}
.swiper-container--room-modal-main .swiper-image {
  height: 458px;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.swiper-container--room-modal-thumb {
  margin-top: 10px;
}
.swiper-container--room-modal-thumb .swiper-slide {
  opacity: 0.5;
  overflow: hidden;
}
.swiper-container--room-modal-thumb .swiper-slide-thumb-active {
  opacity: 1;
}
.swiper-container--room-modal-thumb .swiper-image {
  aspect-ratio: 4/3;
  object-fit: contain;
}
.swiper-container--plan .swiper-image {
  aspect-ratio: 4/3;
}

.swiper-button-prev, .swiper-button-next {
  top: 45%;
  width: 100px;
  height: 100px;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev::after, .swiper-button-next::after {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #000;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("../images/icon/arrow-left.svg");
  mask-image: url("../images/icon/arrow-left.svg");
}
.swiper-button-prev--white::after, .swiper-button-next--white::after {
  background-color: #fff;
}

.swiper-button-prev {
  left: -10px;
}

.swiper-button-next {
  right: -10px;
}
.swiper-button-next::after {
  transform: rotate(180deg);
}

.swiper-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.swiper-pagination {
  width: 100px;
  font-size: 1rem;
  color: #fff;
  left: auto;
  background-color: rgba(0, 0, 0, 0.6);
  top: 420px;
  position: absolute;
  height: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-slide-text {
  font-size: 1rem;
  color: #000;
  position: relative;
  margin-top: 10px;
}

/* Modal
-------------------------*/
.re-search__tab-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.re-search__tab-buttons + .re-search__row {
  margin-top: 10px;
}
.re-search__airline-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.re-search__route-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.re-search__route-buttons[aria-hidden=true] {
  display: none;
}
.re-search__tab-button {
  display: flex;
  justify-content: center;
  min-width: 175px;
  font-size: 0.75rem;
  background-color: #f2f2f2;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #f2f2f2;
}
.re-search__tab-button--route {
  min-width: 80px;
}
.re-search__tab-button[aria-selected=true] {
  font-weight: bold;
  background-color: #fff;
  border-color: #888;
}
.re-search__row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.re-search__row[aria-hidden=true] {
  display: none;
}
.re-search__row--selected-hotel {
  align-items: center;
  justify-content: space-between;
  padding-inline: 10px;
}
.re-search__row--rental-car {
  justify-content: center;
}
.re-search__row + .re-search__row {
  margin-top: 16px;
}
.re-search__input-wrap {
  width: 100%;
  display: inline-flex;
  gap: 20px;
  border: 1px solid #707070;
  border-radius: 5px;
}
.re-search__input-wrap:has([data-status=error]) {
  border-color: #FF0000;
}
.re-search__input-wrap--age {
  margin-top: 14px;
}
.re-search__input {
  position: relative;
}
.re-search__selected-hotel {
  display: flex;
  gap: 2px;
  flex-direction: column;
}
.re-search__hotel-text {
  font-size: 0.75rem;
  color: #888;
}
.re-search__hotel-name {
  font-size: 1rem;
  font-weight: bold;
}
.re-search__hotel-checkbox {
  flex-shrink: 0;
}
.re-search__room + .re-search__room {
  margin-top: 16px;
}
.re-search__room-wrap:has(*) {
  margin-top: 16px;
}
.re-search__room-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.re-search__room-row--age {
  gap: 0;
  flex-direction: column;
  align-items: flex-end;
}
.re-search__room-number {
  font-size: 0.875rem;
}

.search-button {
  width: 180px;
}

.about-class-icon__list {
  display: flex;
  gap: 10px 30px;
  flex-wrap: wrap;
}
.about-class-icon__row {
  display: flex;
  align-items: center;
}
.about-class-icon__icon {
  display: flex;
  gap: 2px;
  align-items: center;
}
.about-class-icon__icon::after {
  content: "…";
  font-size: 0.75rem;
}
.about-class-icon__icon-image {
  flex-shrink: 0;
}
.about-class-icon__description {
  font-size: 0.75rem;
}

.lodging-name-suggestion {
  display: none;
  position: absolute;
  width: inherit;
  max-height: 170px;
  border: 1px solid #333;
  background-color: #fff;
  overflow-y: auto;
  padding: 0;
  z-index: 10;
  top: 100%;
  left: 0;
}
.lodging-name-suggestion__item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0;
  padding: 10px;
  transition: opacity 0.3s;
  cursor: pointer;
}
@media (hover: hover) {
  .lodging-name-suggestion__item:not(.is-disabled-hover):hover {
    opacity: 0.7;
  }
}
.lodging-name-suggestion__item::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #333;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("../images/icon/bed.svg");
  mask-image: url("../images/icon/bed.svg");
}
.lodging-name-suggestion__item + .lodging-name-suggestion__item {
  border-top: 1px solid #ccc;
}
.lodging-name-suggestion.is-active {
  display: block;
}

.hotel-more-images__item[aria-hidden=true] {
  display: none;
}

.google-map {
  width: 100%;
  height: 100%;
}

.facilities-lists {
  display: flex;
  gap: 40px;
}
.facilities-lists__list {
  width: 100%;
}
.facilities-lists__list + .facilities-lists__list {
  position: relative;
}
.facilities-lists__list + .facilities-lists__list::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #888;
  position: absolute;
  left: -20px;
}

.facilities-list__row {
  display: flex;
  gap: 5px 10px;
  flex-wrap: wrap;
}
.facilities-list__row + .facilities-list__row {
  margin-top: 10px;
}
.facilities-list__heading {
  width: 100%;
  font-size: 0.875rem;
  font-weight: bold;
}
.facilities-list__item {
  width: calc((100% - 10px) / 2);
  font-size: 0.8125rem;
}
.facilities-list__item:nth-of-type(-n + 2) {
  margin-top: 5px;
}

.plan-detail-modal__heading {
  font-size: 1rem;
  font-weight: bold;
}
.plan-detail-modal__heading span {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
  color: #848484;
  margin-top: 5px;
}
.plan-detail-modal__heading + .plan-detail-modal__contents {
  margin-top: 20px;
}
.plan-detail-modal__text {
  margin-top: 20px;
  font-size:0.875rem;
}

.plan-slide__caption {
  font-size: 0.75rem;
  margin-top: 4px;
}

.plan-detail-modal__contents .swiper-button-prev,
.plan-detail-modal__contents .swiper-button-next {
  top: 65px;
}
/*# sourceMappingURL=hotelplan.css.map*/