@charset "utf-8";

:root {
  --main-bg-color: rgb(30 64 175);
  --sub-bg-color: rgb(222 240 255);
  --base-font-color: dimgray;
}

body *{
  font-family: Arial,Helvetica,sans-serif;
  line-height: 180%;
  color: var(--base-font-color);
}

.table td {
  color: var(--base-font-color) !important;
}

h1,h2,h3,h4,h5,h6 {
  color: black;
  svg path {
    color:var(--main-bg-color);
  }
  * {
    color: black;
  }
}

img {
  border-radius: 0.5rem;
}

.navbar-brand img {
  max-width: 255px;
  max-height: 100px;
}
.carousel-inner canvas {
  border-radius: 3rem;
}
.top-image {
  border-radius: 3rem;
}

a {
  text-decoration:none;
}

h2 svg {
    width: 30px;
    height: 30px;
}

footer {
    background-color: var(--main-bg-color);
    color: white !important;

    * {
        color: white !important;
    }
}


.btn {
    font-weight: bold;
    border-radius: 0.5rem;
    padding: 1rem;
}
.plus-minus {
  background-color:white;
  border-color:#a9a9a9;
  width: 2rem;
  height: 2rem;
  border-width: 2px;
}

.plus-minus:hover {
  background-color:white !important;
  border-color:#a9a9a9 !important;
}
.plus-minus:active {
  background-color: #e6e6e6 !important;
  border-color: #767676 !important;
}

svg {
    width: 20px;
    height: 20px;
}

.nav-link {
  cursor: pointer;
}

.nav-tabs {
  .nav-link {
    border-color: var(--bs-border-color);
    
  }

  .nav-link.active {
    color: white;
    background-color: var(--main-bg-color);
    border-color: var(--bs-nav-tabs-link-active-border-color);

    svg path {
        color:white;
    }
  }
}

.card {
    margin: 0.5rem;
    text-align: left;
    .tag {
        font-size: 0.6rem;
    }
}

.card-header, .modal-header {
  font-weight: bold;
  background-color: var(--sub-bg-color);

  * {
      font-weight: bold;
  }
}

.card-img-top {
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
}

.card-img img {
  height: 165px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.card-img div {
  height: 165px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.recommend-card-title {
  font-size: 1rem;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height:5rem;
}
.card-title {
  font-size: 1rem;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card-tag {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

nav, .nav a, a .hash-change-link {
    font-weight: bold;
    color: dimgray;
}   


.section {
    background-color: var(--sub-bg-color);
    border-radius: 0.375rem;
}

.btn-group label {
    font-size: 0.8rem;
    margin-left: 0.1rem !important;
}

.description {
    font-size: 1.1rem;
}

.booking-detail {
    font-size: 0.9rem;
}

.btn-group {
    display: block;

    .btn {
        border-radius: 0.5rem !important;
        margin: 0.25rem;
    }
}

.btn-outline-primary, .plan-select .nav-pills {
    background-color: white;
    color: var(--main-bg-color);
    border-color: var(--main-bg-color);
    svg path {
        color:var(--main-bg-color);
    }
}

.btn-check:checked+ .btn, .plan-select .btn.active, .read-more-open:active {
    background-color:var(--main-bg-color) !important;
    color: white !important;
    border-color: var(--main-bg-color);
}

.btn-primary {
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
    color: white;
}

.plan-select .btn:active,.plan-select .btn:hover, #share-button.btn:hover, .read-more-open:hover {
  color: var(--bs-btn-color);
  background-color: var(--sub-bg-color);
  border-color: var(--bs-btn-border-color);
}

.btn-secondary {
    background-color: #b4b4b4;
    border-color: #b4b4b4;
}

.form-check-input:checked {
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color);
}

.tag a {
    font-size: 0.6rem;
}

.external-link {
    color: var(--main-bg-color);
    a svg path, svg path {
        color: var(--main-bg-color);
    }
}

::placeholder {
  color: silver !important;
}

c-booking-mode-badge[data-booking-mode="1"] .border-booking-mode {
    border-color: rgb(222 240 255) !important;
 }
c-booking-mode-badge[data-booking-mode="1"] .text-booking-mode {
    color: dimgray;
    background-color: rgb(222 240 255);
 }

c-booking-mode-badge[data-booking-mode="2"] .border-booking-mode {
  border-color: #ffffff !important;
 
}
c-booking-mode-badge[data-booking-mode="2"] .text-booking-mode {
  color: #ffffff;
  background-color: #a9a9a9;
}

.input-label {
  width: 60px;
}

.plan-footer {
  opacity: 0.7;
  * {
    visibility: hidden;
  }
}

/*----- スクロールをTOPに戻すボタン(ここから) -----*/
#top-scroll-button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  cursor: default;
}

.fadein {
  animation: fadein 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  cursor: pointer !important;
}
@keyframes fadein {
  0% {opacity: 0.0}
  100% {opacity: 1.0}
}
.fadeout {
  animation: fadeout 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeout {
  0% {opacity: 1.0}
  100% {opacity: 0.0}
}
/*----- スクロールをTOPに戻すボタン(ここまで) -----*/


/* ----- swiper ----- */
.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10rem;
  margin-bottom: 2rem;
}

.l-section {
  border-top: 1px solid #eee;
}

[class*=swiper]:focus {
  outline: none;
}

.swiper-wrapper {
  height: auto;
}

.swiper-button-prev, .swiper-button-next {
  display: grid;
  place-content: center;
  --color-gray: #ddd;
  width: 3.2rem;
  height: 3.2rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.swiper-button-prev::before, .swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-radius: 50%;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}
.swiper-button-prev::after, .swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid var(--color-gray);
  border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.recommend {
  overflow: hidden;
}
.swiper {
  overflow: visible;
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.swiper-button-prev::before, .swiper-button-next::before {
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: var(--box-shadow-dark);
          box-shadow: var(--box-shadow-dark);
}
.swiper-button-prev::after, .swiper-button-next::after {
  border-color: #fff;
}
.swiper-button-prev {
  right: calc(100% - 1.6rem);
}
.swiper-button-next {
  left: calc(100% - 1.6rem);
}
.slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 4px;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}

.swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  opacity: 0.3;
}
/* ----- swiper ----- */

.no-image-content {
  background-color: #ccc;
  color: #999;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 追加タグの非表示設定 */
div #tags-group > label[class~='add-tag-none'][name='tagsLabel']{
  display: none!important;
}

/* 続きを見るデザイン */
input.read-more-toggle {
  display: none;
}

.read-more:not(.read-more-invalid) input.read-more-toggle:checked~.read-more-open::before {
  content: attr(data-close);
}

.read-more:not(.read-more-invalid) input.read-more-toggle:not(checked)~.read-more-open::before {
  content: attr(data-open);
}

.read-more:not(.read-more-invalid) .read-more-open {
  padding: 0.4rem;
  font-size: 0.7rem;
  width: 5rem;
}

.read-more.read-more-invalid .read-more-open {
  padding: 0;
  border: 0;
}

.read-more:not(.read-more-invalid) input.read-more-toggle:not(:checked)~.read-more-body {
  position: relative;
  background: linear-gradient(to bottom, transparent, white);
  overflow: hidden;
  max-height: calc(3.5em * 1.5); /* 3.5行分（1.5は行間を含める） */
}

.read-more:not(.read-more-invalid) input.read-more-toggle:not(:checked)~.read-more-body .read-more-text {
  position: relative;
  z-index: -1;
}

.read-more .read-more-body .read-more-text {
  white-space: break-spaces;
  word-break: break-word;
}

/* ----- booking-step ----- */
li.step {
  position: relative;
  list-style-type: none;
  text-align: center;
  color: #999999;
  font-weight: bold;
  counter-increment: steps;
}
li.step:before {
  display: block;
  width: 30px;
  height: 30px;
  margin: 7px auto 10px auto;
  content: '';
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  background-color: #cccccc;
  content: counter(steps);
}
li.step:after {
  position: absolute;
  z-index: -1;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 3px;
  content: '';
  background-color: #cccccc;
}
li.step:first-child:after {
  content: none;
}
li.step.active, li.step.complete{
  color: var(--main-bg-color);
}
li.step.active:before, li.step.complete:before {
  background-color: var(--main-bg-color);
  color: #FFF;
}
li.step.active:after, li.step.complete:after {
  background-color: var(--main-bg-color);
}

/* ----- validation errors ----- */
*[data-error-of] {
  display: none;
}
.show-errors *[data-error-of].show {
  display: block;
}
.show-errors .form-control:invalid {
  border: 1px solid #f00;
}
.show-errors .form-control:invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,0,0,.25);
}


/* ----- loading ----- */
.overlay {
  position: fixed;
  z-index: 99;
  background: rgba(255, 255, 255, 0);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: none;
}
.overlay.op_on {
  display: block;
}
.overlay_cnt {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 78vmin;
  height: 44vmin;
  margin: auto;
  background: #fff;
  border-radius: 0.6vmin;
}
.loading.overlay.op_on {
  background-color: rgba(255,255,255,0.5);
}
.loading.overlay .overlay_cnt {
  background-color: transparent;
  text-align:center;
}
.loading.overlay .spinner-border {
  width: 15rem;
  height: 15rem;
  border-width: 0.8rem;
}

/* ----- flatpickr ----- */
.flatpickr-day.today {
  border-color: transparent;
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  background: #e6e6e6;
  border-color: #e6e6e6;
  color: #393939;
}

.flatpickr-day.today.selected:hover, .flatpickr-day.today.selected:focus {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.today.flatpickr-disabled:hover, .flatpickr-day.today.flatpickr-disabled:focus, .flatpickr-day.today.flatpickr-disabled:active {
  background: transparent;
  border-color: transparent;
  color: rgba(57,57,57,0.1);
  cursor: not-allowed;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{
  content: none;
}
/* ----- flatpickr ----- */

/* bootstrap-datepicker disabled day */
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
  color: #CCC;
}

/* tags-group の画面サイズ別ボタン表示個数制御 */
/* n+99形式で記述、(99部分の数字-43)個を画面に表示する（＋全て） */
div #tags-group > label[class~='tag-auto-none'][name='tagsLabel']:nth-child(n+83){
  display: none!important;
}

/* ----- レスポンシブ制御（ここから） ----- */

/* max-width: 1199px */
@media only screen and (max-width: 1199px) {
  /* tags-group の画面サイズ別ボタン表示個数制御*/
  /* n+99形式で記述、(99部分の数字-33)個を画面に表示する（＋全て）*/
  div #tags-group > label[class~='tag-auto-none'][name='tagsLabel']:nth-child(n+63){
    display: none!important;
  }
}

/* min-width: 1025px */
@media only screen and (min-width: 1025px) {
  .tab-sp {
    display: none !important;
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .reccomend .slide:hover {
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
    -webkit-box-shadow: var(--box-shadow-hover);
            box-shadow: var(--box-shadow-hover);
  }
  .reccomend .slide:hover img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* max-width: 1024px */
@media only screen and (max-width: 1024px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .carousel-inner canvas {
    border-radius: 1rem;
  }
  .top-image {
    border-radius: 1rem;
  }
  .l-inner {
    padding: 0 4rem;
  }
  .pc {
    display: none !important;
  }
  .swiper {
    padding: 0 3.2rem;
  }
  .swiper-button-prev {
    right: calc(100% - 5.2rem);
  }
  .swiper-button-next {
    left: calc(100% - 5.2rem);
  }
}

/* max-width: 991px */
@media only screen and (max-width:991px) {
  .navbar-collapse {
    background-color: var(--sub-bg-color);
  }
  .navbar-nav li{
    text-align: right;
  }

  /* tags-group の画面サイズ別ボタン表示個数制御*/
  /* n+99形式で記述、(99部分の数字-23)個を画面に表示する（＋全て）*/
  div #tags-group > label[class~='tag-auto-none'][name='tagsLabel']:nth-child(n+43){
    display: none!important;
  }

  .navbar-brand img {
    max-width: 120px;
    max-height: 60px;
  }
}

/* min-width: 768px */
@media only screen and (min-width:768px) {
  .main-img img {
    max-height: 500px;
  }
  .sub-img img {
    max-height: 250px;
  }
  .gallery img {
    max-height: 120px;
    margin: 0.2rem;
    object-fit: cover;
  }
  
  .card-title {
      height:5rem;
  }
  .search div {
      margin-top: 1rem;
      margin-bottom: 1rem;
  }
}

/* max-width: 767px */
@media only screen and (max-width:767px) {
  .main-img img {
    max-height: 200px;
  }
  .gallery img {
    max-height: 80px;
    margin: 0.2rem;
    object-fit: cover;
  }

  /* tags-group の画面サイズ別ボタン表示個数制御*/
  /* n+99形式で記述、(99部分の数字-13)個を画面に表示する（＋全て）*/
  div #tags-group > label[class~='tag-auto-none'][name='tagsLabel']:nth-child(n+23){
    display: none!important;
  }
}

/* min-width: 600px */
@media only screen and (min-width: 600px) {
  .sp {
    display: none !important;
  }
}

/* max-width: 599px */
@media only screen and (max-width: 599px) {
  .pc-tab {
    display: none !important;
  }
  .l-inner {
    padding: 0 2rem;
  }
  .swiper {
    padding: 0 1.5rem;
  }

  .search-btn-group {
    text-align: center;
    margin-bottom: 1rem !important;
  }
}

/* max-width: 424px */
@media only screen and (max-width: 424px) {
  .flatpickr-calendar.inline{
    width: 75% !important;
  }
  .flatpickr-weekdays {
    width: 75% ;
  }

  .dayContainer {
    width: 75% ;
    min-width: 75%;
  }
  .flatpickr-day {
    height: 32px;
    line-height: 32px;
  }
  .flatpickr-current-month {
    font-size: 126.25%;
  }
}

/* ----- レスポンシブ制御（ここまで） ----- */
/*
 * Timepicker stylesheet
 * Version 0.3.3
 * Highly inspired from datepicker
 * FG - Nov 2010 - Web3R 
 *
 * version 0.0.3 : Fixed some settings, more dynamic
 * version 0.0.4 : Removed width:100% on tables
 * version 0.1.1 : set width 0 on tables to fix an ie6 bug
 */

.ui-timepicker-inline { display: inline; }

#ui-timepicker-div { padding: 0.2em; }
.ui-timepicker-table { display: inline-table; width: 0; }
.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; }

.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em;  }

.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; }
.ui-timepicker-table td { padding: 0.1em; width: 2.2em; }
.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; }

/* span for disabled cells */
.ui-timepicker-table td span {
	display:block;
    padding:0.2em 0.3em 0.2em 0.5em;
    width: 1.2em;

    text-align:right;
    text-decoration:none;
}
/* anchors for clickable cells */
.ui-timepicker-table td a {
    display:block;
    padding:0.2em 0.3em 0.2em 0.5em;
    width: 1.2em;
    cursor: pointer;
    text-align:right;
    text-decoration:none;
}


/* buttons and button pane styling */
.ui-timepicker .ui-timepicker-buttonpane {
    background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0;
}
.ui-timepicker .ui-timepicker-buttonpane button { margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
/* The close button */
.ui-timepicker .ui-timepicker-close { float: right }

/* the now button */
.ui-timepicker .ui-timepicker-now { float: left; }

/* the deselect button */
.ui-timepicker .ui-timepicker-deselect { float: left; }