@charset "UTF-8";

:root {
  --c_main: #6eb42f;
  --red: #EF1E1E;
  --mainTxt: #5c5c5c;
  --subTxt: #8b8b8b;
  --base: #a37dac;
  --gray: #fafafc;
  --swiper-navigation-size: 14px;
}
@media (width < 969px) {
  :root {
  --gray: #f5f5f5;
  }
}

html.modal-open {
  overflow: hidden;
}

.yakuhan{
  font-family: YakuHanJP, sans-serif;
}

/* display changer */
.disp_pc {
	display: block!important;
}
.disp_sp {
	display: none!important;
}
@media screen and (max-width:969px){
	.disp_pc {
		display: none!important;
	}
	.disp_sp {
		display: block!important;
	}
}

.red{
  color: var(--red);
  transition: all .3s;
}

.highlight-price .red{
  color: #f6fe3c;
  transition: all .3s;
}

.highlight-em{
  color: #f6fe3c;
  transition: all .3s;
}

.txt-r{
  text-align: right;
}

#top-search * {
  box-sizing: border-box;
}

#search * {
  box-sizing: border-box;
}

.just_sp{
  display: none;
}
@media (width < 640px) {
  .just_sp{
    display: block;
  }
}

/*!!!!! Loading Animation !!!!!*/

.loading-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: 1;
  visibility: visible;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background-color: #fff;
}

.loading-wrapper.loaded {
  opacity: 0;
  visibility: hidden;
  z-index: -100;
  transition: all .5s linear;
  animation: none 0.5s linear;
}

.rubik-loader {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  justify-content: center;
  align-items: end;
  width: 64px;
  height: calc(64px + 3em);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url(/images/common/loading.gif);
  background-repeat: no-repeat;
  background-position: center;

}

@keyframes none {
  0% {
    width: 100%;
    height: 100vh;
  }

  100% {
    width: 0;
    height: 0;
  }
}
/*!!!!! Loading Animation !!!!!*/

#quote{
  margin-top: 60px;
}
@media (width < 969px) {
  #quote{
    margin-top: 40px;
  }
}

/*!!!!!!!!!!!!!!!!!!! #top_quote, #quote !!!!!!!!!!!!!!!!!!*/
#top_quote,
#quote {
color: #424242;
font-family: YakuHanJP, "Noto Sans JP", sans-serif;

input, select, textarea{
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}


/*!!!!! common !!!!!*/

ul li{
  list-style: none;
}

@media (width < 969px) {
  .list-note{
    width: 100%;
  }
}

.list-indent{
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 1em;
}

.list-note{
  position: relative;
  width: 100%;
}

.list-note li{
    list-style:  none;
    text-indent: -1em;
    padding-left: 1em;
    font-size: clamp(12px, 2.6vw, 14px);
    text-align: justify;
    margin-bottom: 5px;
}

.list-note li:last-of-type{
  margin-bottom: 0;
}

.list-note li::before{
  content:  "※";
  position:  relative;
  top: -1px;
}

article{
  position: relative;
}

.bg_gray{
  background: var(--gray);
  padding: 45px 20px 25px;
  box-sizing: border-box;
  /* border-radius: 7px; */
  position: relative;
  z-index: 1;
}
@media (width < 969px) {
  .bg_gray{
    padding: 30px 10px 30px;
    box-sizing: border-box;
    /* border-radius: 30px 30px 0 0; */
    width: 100% !important;
  }
}

.column{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.oen-column{
  width: 100%;
}

.two-column{
  width: calc(100% / 2 - 20px);
}

.three-column{
  width: calc(100% / 3 - 10px);
}

.four-column{
  width: calc(100% / 4 - 50px);
}

@media (769px <= width < 970px)  {
  .four-column{
    width: calc(100% / 4 - 30px);
  }
}

@media (200px <= width < 768px)  {
  .three-column,
  .four-column{
    width: calc(100% - 20px);
  }
}

@media (width < 969px) {
  .order01_sp{
    order: 1;
  }

  .order02_sp{
    order: 2;
  }

  .order03_sp{
    order: 3;
  }

  .order04_sp{
    order: 4;
  }
}


.inside{
  padding-inline: 10px;
}

.temp{
  width: 100%;
  height: 330px;
  background: #eee;
  /* border-radius: 7px; */

  iframe{
    width: min(100%, 610px);
    /* border-radius: 7px; */
  }
  @media (width < 969px) {
    iframe{
      width: 100%;
      height: 300px;
    }
  }
}
@media (width < 969px) {
.temp{
  width: 100%;
  height: 300px;
  }
}

.gap5{
  gap: 5px;
}

.gap10{
  gap: 10px;
}

.gap15{
  gap: 15px;
}

.gap20{
  gap: 20px;
}

.gap25{
  gap: 25px;
}

.gap30{
  gap: 30px;
}

.f-small{
  font-size: .8em;
  line-height: 1.4;
  padding-top: 3px;
  display: inline-block;
}

.price-loading-container span{
  font-size: 1.2em;
  line-height: 1.4;
  padding-top: 3px;
  display: inline-block;
}

.price-loading-container span:is(.f-small__time){
  font-size: .95em;
}


.gradation{
  background: linear-gradient(90deg, rgb(92, 196, 0) 18%, rgb(53, 190, 150) 40%, rgb(141, 133, 224) 100%) padding-box text;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/*!!!!! button !!!!!*/

.note-button button {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 230px;
    /* padding: 10px 0px 10px 25px; */
    font-family: "Noto Sans Japanese";
    /* line-height: 1.8; */
    text-decoration: none;
    color: #333;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    background: transparent;
    /* margin-top: 20px; */
    z-index: 1;
}

.note-button button:before, .note-button button:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.note-button button:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f4ad";
  left: 1rem;
  transition: all 0.3s;
  color: #fff;
  top: 48%;
  z-index: 2;
  transform: translateY(-50%) rotate(0deg);
  transition: all 0.3s;
}
.note-button button:after {
  left: .5em;
  background: #833ab4;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  /* border-radius: 4em; */
  transform: translateY(-50%);
  transition: all 0.5s;
}
.note-button button span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
  font-size: 14px;
  left: -3em;
  transition: all 0.5s;
}

.note-button button:hover span {
  color: #fff;
  left: 0;
  transition: all 0.5s;
}
.note-button button:hover:before {
  left: 2.5rem;
  transform: translateY(-50%) rotate(0deg);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f4ad";
  color: #fff;
}
.note-button button:hover:after {
  right: 0;
  width: 100%;
  /* background: #333; */
  /* background: linear-gradient(90deg, rgb(92, 196, 0) 18%, rgb(53, 190, 150) 40%, rgb(141, 133, 224) 100%); */
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);

}
.search_result{
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #EF1E1E;
  text-align: right;
  /* margin-top: -10px; */

  span{
    letter-spacing: 1px;
  }
}

/*!!!!! modal !!!!!*/

  /* モーダルを開くボタン */
  .modal-open{
    font-size: 16px;
    font-weight: bold;
    width: 300px;
    /* height: 60px; */
    /* color: #fff;
    background: #000; */
    border: none;
    cursor: pointer;
  }

  /* モーダルと背景の指定 */
  .modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 15px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 100000;
  }

  /* モーダルの擬似要素の指定 */
  .modal:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.2em;
  }

  /* クラスが追加された時の指定 */
  .modal.is-active{
    opacity: 1;
    visibility: visible;
  }

  /* モーダル内側の指定 */
  .modal-container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    width: min(100%, 660px);
    padding: 30px 0;
  }

  /* モーダルを閉じるボタンの指定 */
  .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -20px;
    right: -10px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
  }

  /* モーダルのコンテンツ部分の指定 */
  .modal-content{
    background: #fff;
    text-align: left;
    line-height: 1.8;
    padding-inline: 10px;
    height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  @media (width < 969px) {
   .modal-content{
      height: 400px;
   }
  }

  .modal-content__inner{
    padding-inline: 2em 0;
  }

.manual_image{
  padding-inline: 10px;
  margin-bottom: 1em;
}

  /* モーダルのコンテンツ部分のテキストの指定 */
  .modal-content p{
    font-size: 11px;
    line-height: 1.2;
    margin-left: 1em;
  }

  .modal-title{
    font-size: clamp(18px, 2.6vw, 22px);
    font-weight: 600;
    margin-bottom: 10px;
  }

.modal-title{
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  color: #fff;
  width: 100%;
  font-weight: 700;
  text-align: center;
  font-size: 22px;
  /* border-radius: 10px; */
  padding-block: 2px 5px;
  letter-spacing: 1px;
  margin-block: 24px 16px;
  position: relative;
  border: solid 1px #5cc400;
  box-sizing: border-box;
  background: #5cc400;
  transition: ease .3s;
  z-index: 0;

}
@media (width < 969px) {
  .modal-title{
    font-size: 18px;
    margin: auto auto 20px;
  }
}

.modal-list__first{
  font-size: 1.2em;
  font-weight: 700;
}

.modal-list__first + li{
  i{
    position: relative;
    width: 16px;
  }
  i::before{
    position: relative;
    left: 1em;
  }
}

.modal-list__first-green{
  font-size: 1.2em;
  font-weight: 700;
  i{
    color: #5cc400;
  }
}

.modal-list__first-orange{
  font-size: 1.2em;
  font-weight: 700;
  i{
    color: #f0a200;
  }
}

.modal-list__first-blue{
  font-size: 1.2em;
  font-weight: 700;
  i{
    color: #0075ff;
  }
}

/*!!!!! flow !!!!!*/

.flow02 {
  margin: 20px auto 20px;
  width: 100%;
  display: flex;
  gap: 20px;
  background: #f5f5f5;
  padding: 20px 40px 20px 20px;
  box-sizing: border-box;
}
@media (width < 969px) {
 .flow02 {
    margin: 20px auto 20px;
    width: 100%;
    display: flex;
    gap: 20px 30px;
    background: #f5f5f5;
    padding: 20px 0 20px 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
}

.flow02 .box {
    padding-top: 25px;
    width: 24%;
    height: 85px;
    background: #fff;
    float: left;
    position: relative;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.4;
    box-shadow: 6px 17px 11px -19px #777777;
}
@media (width < 969px) {
  .flow02 .box {
      width: 40%;
  }
}


@media (970px <= width) {
  .flow02 .box.box0{
    width: 22%;
  }

  .flow02 .box:first-of-type::before{
    border: none;
    content: "";
  }

  .flow02 .box.box01 .box__content{
    padding-left: 0;
  }
}

.flow02 .box:before {
  border-left: 20px solid #f5f5f5;
  border-top: 55px solid transparent;
  border-bottom: 55px solid transparent;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

.flow02 .box01:after,
.flow02 .box02:after,
.flow02 .box03:after,
.flow02 .box04:after {
    border-left: 20px solid #fff;
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
}
.flow02 .box .box__content {
  padding-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  h4{
    font-size: 24px;
    color: #EF1E1E;
    line-height: 1;
    margin-bottom: 7px;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: right;
  }

  h4::after{
    content: "step";
    text-transform: uppercase;
    position: absolute;
    top: -21%;
    left: 40%;
    transform: translate(-50%);
    color: #ff9898;
    z-index: -2;
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
  }


  p{
    font-size: 11px;
    line-height: 1.2;
    margin-left: 5px;
    background: #ff9898;
    color: #fff;
    padding: 5px 6px 8px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 30px;
  }
}

.flow02 .box.box01 .box__content {
    h4{
      width: calc(100% - 20px);
    }
  }
  @media (width < 380px) {
  .flow02 .box.box01 .box__content,
  .flow02 .box.box02 .box__content,
  .flow02 .box.box03 .box__content,
  .flow02 .box.box04 .box__content{
      h4{
        width: calc(100% + 10px);
      }
  }
  }

/*!!!!! title !!!!!*/

.section__title{
  position: relative;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 100px auto 0;
  color: #fff;
  width: min(calc(100% - 20px), 1260px);
  font-weight: 900;
  text-align: center;
  font-size: 48px;
  letter-spacing: 1px;
  line-height: .5;
  z-index: 3;

  span{
    line-height: .6;
  }

  .small{
    font-size: .9em;
    font-style: normal;
    font-weight: 900;
  }
}
@media (width < 969px) {
  .section__title{
    margin: 20px auto 0;
    font-size: 32px;

    span{
      line-height: 1;
    }
  }
}

.section__sub-title{
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  position: absolute;
  transform: translate(-50%);
  left: 255px;
  top: -50px;
  font-size: 120px;
  font-weight: 900;
  color: #f4f4f4;
  z-index: 2;
  letter-spacing: -2px;
  line-height: 1;
}
@media (width < 969px) {
  .section__sub-title{
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -97%;
    font-size: 62px;
    font-weight: 900;
    color: #e9e9e9;
    z-index: 2;
    letter-spacing: 0;
  }
}

.contens-title{
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  color: #5cc400;
  width: 100%;
  font-weight: 700;
  text-align: center;
  font-size: 22px;
  /* border-radius: 10px; */
  padding-block: 2px 5px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  position: relative;
  border: solid 1px #5cc400;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(92,196,0,1) 90%);
  transition: ease .3s;
  z-index: 0;

  .small{
    font-size: .8em;
    font-weight: 900;
    padding-left: .3em;
  }

  span{
    position: relative;
    z-index: 2;
  }
}
@media (width < 969px) {
  .contens-title{
    font-size: 18px;
    margin: auto auto 20px;
    width: calc(100% - 10px);
  }
}

.contens-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f04b";
  font-size: 12px;
  color: #fff;
  position: absolute;
  z-index: 2;
  top: 28%;
  right: 3%;
  transition: ease .3s;
  transform: translate(-50%);
}

.contens-title::after {
  content: "";
  /* border-radius: 10px; */
  background: linear-gradient(90deg,  rgba(92,196,0,1)90%, rgba(255,255,255,1) 90%);
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}

/*!!!!!!!!!!!!! icon !!!!!!!!!!!!!*/

.calc-icon{
  color: #fff;
  background: #333;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  line-height: 1.9;
  margin-right: .3em;
  border-radius: 50%;
}

.calc-icon_s{
  color: #fff;
  background: rgb(92, 196, 0);
  text-align: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 2;
  border-radius: 50%;
  position: relative;
  left: 0;
  bottom: 0;
  margin-right: 9px;
}
@media (width < 969px) {
  .calc-icon_s{
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 2;
    border-radius: 50%;
    position: relative;
    left: 0;
    bottom: 3px;
  }
}

.note-icon{
  color: #fff;
  position: relative;
  transition: ease .3s;
}

.note-icon::before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f4ad";
    font-size: 24px;
    position: absolute;
    transform: translate(-50%);
    top: 0;
    left: -.8em;
}
@media (width < 969px) {
  .note-icon::before{
    font-size: 22px;
  }
}

/*!!!!!!!!!!!!! icon !!!!!!!!!!!!!*/


.contens-title:hover{
  color: #fff;
  transition: ease .3s;

  .book-icon_s{
    color: #fff;
    z-index: 2;
    transition: ease .3s;
  }
}

.contens-title:hover::before{
  color: #5cc400;
  right: 2%;
  transition: ease .3s;
}

 .contens-title:hover::after {
    opacity: 1;
    z-index: 0;
    transition: ease .3s;
 }


.title-line{
  position: relative;
  width: min(calc(100% - 20px), 1260px);
  margin: auto;
}
@media (width < 969px) {
 .title-line{
    width: 100%;
    margin: auto;
  }
}

.search_title{
  font-size: 16px;
  font-weight: 700;
  color: #52ae01;
  border-radius: 30px;
  margin: auto 10px 15px;
  background: #eff8e7;
}
@media (width < 969px) {
  .search_title{
    font-size: 15px;
  }
}


.time-start__title{
  font-size: 16px;
  font-weight: 700;
  color: #f0a200;
  position: relative;
  background: #fff4dc;
  border-radius: 30px;
  line-height: 2;

  .fa-clock{
    font-size: 30px;
    position: relative;
    top: 4px;
    line-height: 0;
    margin-right: 7px;
  }
}
@media (width < 969px) {
  .time-start__title {
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.66;

    .fa-clock{
      font-size: 23px;
      position: relative;
      top: 2px;
    }
  }
}

.result__title{
  color: rgb(53, 190, 150);
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-top: 20px;
}
@media (width < 969px) {
  .result__title{
    font-size: 18px;
  }
}


/*!!!!! contens 幅指定 !!!!!*/
.quote-detail{
  width: min(calc(100% - 20px), 1260px);
  margin: auto;
}
@media (width < 969px) {
  .quote-detail{
    margin-top: -10px;
  }
}

@media (width < 969px) {
  .two-column.order01_sp{
      width: 100%;
  }

  .two-column.order02_sp{
      width: 100%;

    .two-column{
      width: calc(100% / 2 - 10px);
      }
    }
  }

.priceTableWrapper{
  overflow-x: auto;
}
.wrapper {
  overflow-y: auto;
  height: 100%;
}

@media (1259px <= width) {
  .scroll-y{
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    /* height: calc(100vh - 108px); */
    height: calc(108px * 9);
    height: 600px;
  }
}

@media (width < 1260px) {
  .scroll-y{
    /* overflow-y: scroll; */
    overflow-x: scroll;
    height: 600px;
  }
}

.wrapper::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  background: #f9f8f6;
  width: 10px;
  height: 10px;
  }
.wrapper::-webkit-scrollbar-thumb {
  background-color: #6eb42f;
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb{
  background-color: #aeaeae;
  border-radius: 10px;
}

.priceTableWrapper{
  overflow-x: hidden;
}

.loading{
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 200;
   font-size: 18px;
   text-align: center;
   padding-block: 50px 0;
    color: #8b8b8b;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;

  img{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
  }
}

.loading__bottom{
  height: 80px;
}

/*!!!!! table !!!!!*/

.floatThead-container{
  overflow-x: visible!important;
}

.priceTable{
  text-align: center;
  width: 1260px;
  margin: auto;
  color: var(--mainTxt);
  box-sizing: border-box;

  select{
    color: var(--mainTxt);
    border: solid 1px var(--mainTxt);
  }
}

.priceTable thead tr th {
  border: solid 1px #eeeeee;
  border-bottom: none;
  text-align: center;
  background: var(--gray);
  line-height: 1.2;
  transition: ease .3s;
  letter-spacing: 1px;
  box-sizing: border-box;
  position: relative;
}

.priceTable thead{
  position: sticky;
  top:0;
  left: 0;
  z-index: 10;
}

.priceTable thead,
.priceTable tbody{
  display: block;
}

.priceTable thead tr th.seat{
  padding-block: 6px 4px;
}

.priceTable thead tr th.w-photo,
.priceTable tbody tr td.w-photo{
  width: 171px;
}

.priceTable thead tr th.w-room_name,
.priceTable tbody tr td.w-room_name{
  width: 130px;
}


.priceTable thead tr th.w-detail,
.priceTable tbody tr td.w-detail {
  width: 70px;
  padding-top: 8px;
}

.priceTable thead tr th.w-center,
.priceTable tbody tr td.w-center {
  width: 170px;
}

.priceTable thead tr th.w-time,
.priceTable tbody tr td.w-time{
  width: 120px;
}

.priceTable thead tr th.w-price,
.priceTable tbody tr td.w-price{
  width: 170px;
}

.priceTable thead tr th.w-pickup,
.priceTable tbody tr td.w-pickup{
  /* width: 8em; */
  width: 130px;
}

td.w-room_name:hover,
td.w-detail:hover,
td.w-price:hover,
td.w-pickup:hover {
  cursor: pointer;
}


.priceTable tbody tr{
  box-sizing: border-box;
  transition: ease .3s;
  background: #fff;
}

.priceTable tbody tr:hover {
  background-color: #fffee4;
  transition: ease .3s;
}

.priceTable tbody tr td{
  border: solid 1px #eee;
  transition: ease .3s;
  box-sizing: border-box;
}

.priceTable tbody tr td:not(.in-room) {
  padding: 5px;
}

.priceTable tbody tr.no-data{
  background: transparent;
  font-weight: 500;
}

.priceTable tbody tr.no-data td{
  /* border-bottom: none; */
    width: 1260px;
    border: none;
    padding-top: 30px;
    opacity: 0;
    animation: fadeside 1s forwards;
}

.priceTable tbody tr:last-of-type{
  border-radius: 0 0 30px 30px;
}

.priceTable thead tr th.highlight{
  /* background: #a37dac; */
  background: rgb(92, 196, 0);
  color: #fff;
  transition: ease .3s;
}

.priceTable thead tr th.highlight-price{
  background: rgb(240, 162, 0);
  color: #fff;
  transition: ease .3s;
  font-size: 1.2em;
}

.table_sortBtn{
  position: relative;
  display: block;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  transition: all .3s;
  color: #333;
}

.table_sortBtn.up{
  transform: rotate(-180deg);
}

.table_sortBtn:hover{
  cursor: pointer;
}

.table_sortBtn::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
}

.highlight-price .table_sortBtn::after,
.highlight .table_sortBtn::after{
  color: #fff;
  transition: all .3s;
}

.priceTable select{
  padding-block: 3px;
  font-size: 14px;
}

.priceTable tbody tr td a.name-link{
  color: #333;
  transition: ease .3s;
}
.priceTable tbody tr td a.name-link:hover{
  color: #0c59b8;
  transition: ease .3s;
}

.priceTable tbody tr td a.map-link{
    background: #0c59b8;
    border: solid 1px #0c59b8;
    color: #fff;
    padding: 1px 12px 3px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
    margin-top: 8px;
    transition: ease .3s;
    line-height: 1.5;
    letter-spacing: 1px
}

.priceTable tbody tr td a.map-link:hover{
  color: #0c59b8;
  background: #fff;
  transition: ease .3s;
  text-decoration: none;
}

.checkbox{
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
  cursor: pointer;
}

#bt_contact a{
  background: #333;
  border: solid 1px #333;
  color: #fff;
  border-radius: 10px;
  /* width: 90px; */
  width: clamp(4.375rem, 0.625rem + 4.17vw, 5.625rem);
  padding: 10px 5px;
  text-align: center;
  display: none;
  position: fixed;
  /* top: calc(100% - 45px); */
   top: calc(40% + 45px);
  /* left: calc(100% - 100px); */
  right: 5px;
  transform: translateY(-50%);
  transition: all .5s;
  line-height: 1.3;
  letter-spacing: 1px;
  z-index: 10000;
  box-sizing: border-box;
  transition: all .3s;
  justify-content: center;
}

@media (200px <= width < 640px)  {
  #bt_contact a{
    /* width: 110px; */
    top: auto;
    right: auto;
    bottom: 15px;
    left: 15px;
    transform: translateY(0);
  }
}

#bt_contact a:hover{
  background: #fff;
  color: #333;
  text-decoration: none;
  transition: all .3s;
}

#bt_contact.active a{
  display: flex;
  animation: fade .5s ease forwards;
}

.contact-text{
  font-size: 14px;
}


.contact-text.text-active{
  position: relative;
  /* transition: all .3s; */
  display: block;
  font-size: clamp(0.625rem, -0.125rem + 0.83vw, 0.875rem);
}

  .contact-text.text-active::after{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00c";
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6d6b69;
    transition: all .3s;
  }

  .contact-text{
    position: relative;
    z-index: 1;

    .text-inline{
      position: relative;
      z-index: 2;
    }
  }

  #bt_contact a:hover .contact-text.text-active::after{
    color: #d5d4d3;
    transition: all .3s;
  }


.pickup_message{
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  margin-top: 5px;
  transition: all .3s;

  i,
  span{
    line-height: 1.3;
  }
}

.contact-aroow {
  display: flex;
}
.contact-aroow::after {
  content: '';
  width: 100px;
  height: 15px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
}

@media (width < 969px) {
.priceTable tbody tr td.no-data{
  text-align: left;
  padding-left: 4em;
}
}

/** 新contact **/
.nav_contact{
  width: min(calc(100% - 20px), 586px);
  position: sticky;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 16px;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
@media (width < 640px) {
  .nav_contact{
    bottom: 20px;
  }
}
.nav_contact.visible{
  opacity: 1;
  visibility: visible;
  transition: all .3s;
}
.nav_contact a {
  color: #fff;
  background: rgba(192, 192, 192, 0.9);
  border-radius: 30px;
  width: 100%;
  margin: auto;
  min-height: 45px;
  pointer-events: none;
  display: block;
  text-align: center;
  line-height: 3;
  transition: all .6s;

  span{
     line-height: 3;
  }
}
.nav_contact.active a {
  color: #fff;
  /* background: linear-gradient(70deg, #6eb42f 13%, #6eb42f 42%, #72b337 67%, rgb(205 244 102) 100%); */
  background: linear-gradient(90deg, rgb(92, 196, 0) 18%, rgb(53, 190, 150) 40%, rgb(141, 133, 224) 100%);
  pointer-events: all;
}

.nav_contact a:hover {
  text-decoration: none;
}

@media (820px <= width) {
  .nav_contact.visible.is-bottom{
    width: min(calc(100% - 20px), 700px);
    left: 50%;
    transform: translateX(-50%);
  }
  .nav_contact.visible.is-bottom a{
    border-radius: 50px;
    transition: all .6s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25em;
  }
}


/* .contact-box__text{
  display: none;
}
.nav_contact.visible.is-bottom a .contact-box__text{
  display: inline-block;
} */



/*!!!!! 簡単検索 !!!!!*/

.search-box{
  width: min(calc(100% - 20px), 1260px);
  margin: 20px auto 10px;
}
@media (width < 969px) {
  .search-box{
    margin: -20px auto auto;
  }
}

.search-box__column{
  position: relative;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 30px;
    background: #f2f2f2;
    padding-block: 32px 30px;
    padding-inline: 10px;
    /* border-radius: 10px; */
    /* z-index: 0; */

    .four-column:nth-of-type(1){
      /* margin-left: 20px; */
      margin-left: 10px;
    }
}
@media (821px <= width < 969px)  {
.search-box__column{
    padding-block: 24px;
  }
}
@media (width < 820px) {
  .search-box__column{
      padding-inline: 0;
      justify-content: center;
      gap: 10px;
    .four-column:nth-of-type(1){
      margin-left: 0;
    }
  }
}

#trigger-btn a{
  width: 100%;
  height: 100%;
  background: #EF1E1E;
  color: #fff;
  padding: 10px 0 10px;
  /* border-radius: 7px; */
  transition: all .3s;
  display: block;
  text-align: center;
  letter-spacing: 1px;
}
@media (width < 969px) {
  #trigger-btn a{
    padding: 9px 0 9px;
  }
}
#trigger-btn a:hover{
  background-color: #FF4D4D;

  text-decoration: none;
  transition: all .3s;
}

.column{
  align-items: flex-start;
}

.search-title{
  width: 100%;
  display: block;
  text-align: center;
  margin-block: 30px 5px;
}

#top_search {
  position: relative;

  .site_message {
      font-family: YakuHanJP, "Noto Sans JP", sans-serif;
      font-size: 36px;
      font-weight: 900;
      display: inline-block;
      color: #5cc400;
      line-height: 1.3;
      letter-spacing: 2px;
      background: linear-gradient(90deg, #5cc400 18%, #35be96 40%, #8d85e0 100%);
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
      position: relative;
      top: 17px;
      left: 22px;
      z-index: 2;
      /* opacity: 0; */
      /* animation: fadevertical .6s forwards;
      animation-delay: .6s; */

      em{
        font-size: 1.3em;
        letter-spacing: 0;
        padding-inline: 6px;
        line-height: 1;
        display: inline-block;
        font-weight: 800;

        .f-meirio{
        font-family: meirio;
        line-height: 0;
        }
      }
  }
  @media (width < 969px) {
    .site_message {
      width: 16em;
      font-size: 21px;
      top: 11px;
      left: 7px;
    }
  }

.top-search-title{
  width: 100%;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
@media (width < 969px) {
  .top-search-title{
    margin-left: 10px;
    font-size: 18px;
  }
}

.top-search-title::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f002";
    font-size: 24px;
    padding-right: 10px;
    color: #4ab0a8;
}
@media (width < 969px) {
  .top-search-title::before {
    font-size: 20px;
  }
}

.sort_select{
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    border: none;
    padding-block: 9px 11px;
}

}
/*** #top_search ***/

.top_search-bg{
  background-color: #f2f2f2;
  /* border-radius: 10px; */
  box-sizing: border-box;
}

/*** #top_search-border ***/

.sort_select{
  width: 100%;
  /* text-align: center;
  text-align-last: center; */
  padding-block: 9px;
  /* border-radius: 7px; */
  border: solid 1px #aeaeae;
  background-color: #fff;
  letter-spacing: 1px;
  overflow: hidden;
}

.focus_green{
  .sort_select{
    border: solid 1px #5cc400;
    background-color: #eff8e7;
  }
}

.focus_orange{
.sort_select{
    border: solid 1px #f0a200;
    background-color: #fff4dc;
  }
}

select.layout_focus{
  background-color: #ffebeb!important;
  border: 1px solid #f01;
}

.layout_focus-em{
  visibility: hidden;
  font-size: 14px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #EF1E1E;
  margin-left: 1em;
  transition: all .3s;
}

select.layout_focus + .layout_focus-em{
  visibility: visible;
  transition: all .3s;
}

.sort_select-box{
  position: relative;

  select {
  -webkit-appearance: none;
  appearance: none;
  /* text-align: center; */
  color: #333;
  background-color: #fff;
  padding-left: 3.25em;
  font-size: 13px;

    option{
      font-weight: 300;
    }
  }
    @media (width < 640px) {
    select {
      font-size: 13px;
    }
  }
  @media (width < 640px) {
    select {
      padding-left: 2.5em;
    }
  }

  select.invalid_select{
    background-color: #ffebeb;
  }

  summary.sort_select{
    padding-left: 0;
    box-sizing: border-box;
  }

  summary span{
    overflow: hidden;
    display: block;
    white-space: nowrap;
    padding-left: 3.25em;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
    box-sizing: border-box;
  }
  @media (width < 640px) {
    summary span{
      padding-left: 2.5em;
      width: 100%;
    }
  }
}
/** .sort_select-box **/

  .four-column[data-category="top_search"]{
    .sort_select-box summary span{
        line-height: 1.66;
    }
  }

@media (width < 640px) {
  .four-column[data-category="top_search"]{
    .sort_select-box select,
    .sort_select-box summary span{
        padding-left: 3.25em;
    }
  }
}

.sort_select-box::after{
  content: "\f0d7";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 2px;
  top: 20px;
  transform: translateY(-50%);
  width: 30px;
  text-align: center;
  /* background: #fff; */
}
@media (width < 969px) {
  .sort_select-box::after{
    width: 20px;
  }
}

.icon-address.sort_select-box::after{
  right: 0;
}

.sort_select-box.icon-time_start::after,
.sort_select-box.icon-time_end::after{
  background-color: transparent;
}
.sort_select-detail{
    width: 100%;
    font-size: 14px;
    font-weight: 300;
    border: solid 1px #333;
    position: absolute;
    z-index: 3;
    background: #fff;
    top: 39px;
    left: 0;
    box-shadow: 0px 0px 15px -5px #777777;

    li{
      padding-block: 2px;
      position: relative;
      transition: all .15s;
    }
    li:hover .detail_areas{
      color: var(--red);
      transition: all .15s;
    }

    li:first-of-type{
      margin-top: 5px;
    }

    input{
      margin-right: 5px;
    }

    label{
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding-left: 2em;
      font-size: 13px;
    }
    @media (width < 969px) {
      label{
        padding-left: 1em;
      }
    }

    label:last-of-type{
      padding-bottom: 2px;
    }

    @media (970px <= width) {
      label:hover{
        cursor: pointer;
     }
    }
    .close_button{
      background: #eee;
      width: calc(100% - 57px);
      margin: auto auto 5px;
      box-sizing: border-box;
      text-align: center;
      padding-left: 0;
    }
  }
  /** .sort_select-detail **/
  @media (width < 640px) {
    .sort_select-detail{
      width: 16em;
      .close_button{
        width: calc(100% - 10px);
      }
    }
  }

  .sort_select-detail__dropDown{
    display: none;
    transition: all .15s;
  }

  .sort_select-detail li:hover .sort_select-detail__dropDown{
    display: block;
    box-shadow: 0px 3px 8px -2px #777;
    position: absolute;
    top: 0;
    left: 200px;
    background-color: #fff;
    display: block;
    width: 190px;
    padding: 5px 0 10px;
    z-index: 10;
  }

.sort_select-detail__dropDown li:hover{
    color: var(--red);
    transition: all .15s;
  }

 details[open] summary{
    border: solid 2px #333;
    /* border-radius: 7px; */
  }
  summary {
    display: block;
    list-style: none;

    span{

      em{
        font-size: .8em;
        color: #ef1e1e;
        font-weight: bold;
      }
    }
  }

  /* 一部ブラウザで消えなかった場合は以下も追記 */
  summary::-webkit-details-marker {
    display:none;
  }

  @media (970px <= width) {
     @supports (-ms-ime-align:auto) {
        label:hover{
          background-color: #576371;
          color: #fff;
        }
    }
  }

.erase{
  display: none;
}

.erase.showing{
  display: block;
}

/* エラー時のラベルのスタイル */
.invalid {
  color: #f01; /* 例: 赤文字 */
}

/* エラー時のselectのスタイル */
.invalid_select {
    border: 1px solid #f01;
}

.warning{
  color: #f01;
  margin: 4px auto 0;
  height: 1em;
  width: 23em;
  font-size: 12px;
  line-height: 1.3;
}
.warning__inner{
  display: none;
}
.warning__inner.invalid{
  display: block;
  height: 1em;
}
@media (width < 969px) {
.warning{
    position: absolute;
    left: -11%;
    top: 145%;
    transform: translate(-50%);
  }
}

.contact-box{
  width: min(100% - 20px, 1260px);
  margin: 30px auto auto;
  position: relative;
  z-index: 20;
}

.contact-box a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 140px;
  width: 100%;
  background: #333;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 50px 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  line-height: 1.2;
  transition: ease .3s;
  overflow: hidden;

.contact-title{
  width: auto;
  position: relative;
  z-index: 1;

    i{
      margin-right: 4px;
    }

    .font-big{
      font-size: 5em;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      margin-left: -7px;
    }
    @media (width < 969px) {
      .font-big{
        font-size: 4em;
      }
    }
  }
}
@media (width < 969px) {
  .contact-box a{
    gap: 10px;
    padding: 30px;
    font-size: 16px;
    /* margin-left: -3px; */
  }
}
/*** .contact-title a ***/

.contact-box__text{
  width: auto;
  margin-top: 40px;
  text-align: justify;
  line-height: 1.7;
  font-size: 26px;
  position: relative;
  z-index: 2;
  letter-spacing: 1px;

  .fa-arrow-up-right-from-square{
    font-size: .95em;
    margin-left: 2px;
  }
}
@media (width < 969px) {
  .contact-box__text{
    width: 100%;
    margin-top: 0;
    font-size: 16px;
    text-align: justify;
  }
}
/*** .contact-text ***/

/**** .contact-box a ****/

.contact-box a{
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
}


.contact-box a:hover{
  text-decoration: none;
  clip-path: polygon(1% 0%, 100% 0, 99% 100%, 0 100%);
  transition: ease .3s;
}



/*!!!!! animation !!!!!*/

@keyframes fadeIn {
0% {
  opacity: 0;
  /* transform: translateY(5px); */
  transform: translateX(-35px);
}
100% {
  opacity: 1;
  /* transform: translateY(0px); */
  transform: translateX(0px);
}
}

@keyframes fadeOuto {
0% {
  opacity: 1;
}
100% {
  opacity: 0;

}
}

@keyframes textAnime {
  to {
      transform: translateY(0px);
  }
}

}
/*!!!!!!!!!!!!!!!!!!! #top_quote, #quote !!!!!!!!!!!!!!!!!!*/

#quote{
  .sort_select {
    letter-spacing: 0;
    padding-left: 3em;
    font-weight: 300;
    line-height: 1.4;
  }
  @media (width < 640px) {
  .sort_select {
    padding-left: 2.25em;
    }
  }
}


  #simulator{
    margin-top: 20px;
  }

/*!!!!!!!!!!!!!!!!!!!! icons !!!!!!!!!!!!!!!!!!!*/

.icon-address,
.icon-area,
.icon-seat,
.icon-layout,
.icon-time_start,
.icon-time_end,
.icon-search{
  position: relative;
}

  .icon-address::before{
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 1.25em;
    top: 20%;
    transform: translate(-50%);
    color: #5cc400;
    font-size: 1.25em;
  }

.icon-area::before{
  content: "\f5fd";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: #5cc400;
  font-size: 1.25em;
  z-index: 2;
}

.icon-seat::before{
  content: "\f6c0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: #5cc400;
  font-size: 1.25em;
  z-index: 2;
}

.icon-layout::before{
  content: "\f4ce";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: #5cc400;
  font-size: 1.25em;
  z-index: 2;
}

.icon-time_start::before{
  content: "\f017";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: #f0a200;
  font-size: 1.25em;
  z-index: 2;
}
@media (width < 969px) {
  .icon-time_start::before{
    top: 20%;
  }
}

.icon-time_end::before{
  content: "\f017";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 15%;
  transform: translate(-50%);
  color: #f0a200;
  font-size: 1.25em;
  z-index: 2;
}
@media (width < 969px) {
  .icon-time_end::before{
    top: 20%;
  }
}

.icon-search::before{
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: calc(50% - 3em);
  top: 22%;
  transform: translate(-50%);
  color: #fff;
  font-size: 1.25em;
  z-index: 2;
  font-size: 13px;
}


#top_quote{
  .icon-address::before{
    color: #5cc400;
  }

  .icon-area::before{
    color: #5cc400;
  }

  .icon-layout::before{
    color: #5cc400;
  }

.underline {
  text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(240, 162, 0, 0.4);
  text-decoration-skip-ink: none;
}
}
/*!!!!! #top_quote !!!!!*/


@media (width < 640px) {

.four-column[data-category="top_search"]{
  .icon-address::before,
  .icon-area::before,
  .icon-seat::before,
  .icon-layout::before,
  .icon-time_start::before,
  .icon-time_end::before{
      left: 1.25em;
    }
}

.icon-address::before,
.icon-area::before,
.icon-seat::before,
.icon-layout::before,
.icon-time_start::before,
.icon-time_end::before{
    font-size: 1.15em;
    left: 1em;
  }
}

.time{
  position: relative;
  margin-right: 25px;
}
.time::after{
  content: "～";
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  position: absolute;
  left: calc(100% + 20px);
  top: 15%;
  transform: translate(-50%);
  color: #f0a200;
  z-index: 2;
  font-size: 18px;
}
@media (width < 969px) {
  .time::after{
    left: calc(100% + 10px);
    font-size: 16px;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.in-room{

    .image-slider {
      position: relative;
    }

    .swiper-container {
      width: 170px !important;
      height: 110px !important;
      overflow: hidden;
      position: relative;
    }

    .swiper-slide {
      width: 170px !important;
      height: 110px !important;
      line-height: 0;
      cursor: grab;
    }

    .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 170 / 110;
      object-fit: cover;
    }
    @media (width < 640px) {
        .swiper-slide img {
          aspect-ratio: 150 / 104;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
      background: rgb(255, 255, 255, .8);
      padding: 5px;
      border-radius: 50%;
      width: 22px;
      height: 22px;
    }
    .swiper-button-next,
    .swiper-button-next:after {
      margin-left: 2px;
    }

    .swiper-button-prev:after {
      margin-right: 2px;
    }

.swiper-button-next, .swiper-button-prev{
  color: #0c59b8;
  z-index: 5;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next{
    left: var(--swiper-navigation-sides-offset, 2px);
    box-sizing: border-box;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 2px);
    box-sizing: border-box;
}

.swiper-pagination-bullet{
  width: 6px;
  height: 6px;
  background-color: #fff;
  opacity: .5;
  transition: all .3s;
}

.swiper-pagination-bullet-active{
  width: 7px;
  height: 7px;
  background-color: #fff;
  opacity: .7;
  transition: all .3s;
}

}
/** in-room **/


@keyframes fadevertical {
  0% {
    /* left:  30px; */
    top: 27px;
    opacity: 0;
  }
  100% {
    /* left:  20px; */
    top: 17px;
    opacity: 1;
  }
}

@keyframes fadeside {
  0% {
    left: -10px;
    /* top: 27px; */
    opacity: 0;
  }
  100% {
    margin-left: 0;
    /* top: 17px; */
    opacity: 1;
  }
}


/*!!!!!!! トップページアコーディオン !!!!!!!*/

.accordion {
  margin-inline: auto;
  margin-top: 30px;
  max-width: 300px;
  position: relative;
  width: 100%;
}

.accordion-title {
  color: #333;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 20px 10px 40px;
}

.accordion-content {
  display: none;
  padding: 0 20px 10px 40px;
}

.accordion-content p {
  font-size: 13px;
  line-height: 1.5;
}

/* タイトルの背景色 */
.accordion-item {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
  border: none;
  /* border-radius: 7px; */
  position: relative;
  background-color: #fff;
  z-index: 10;
}

/* 矢印 */
.accordion-title {
  position: relative;
}

.accordion-title::after {
  border-right: solid 3px #333;
  border-top: solid 3px #333;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 15px;
  top: 15px;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}

.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

.icon-address::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 20px;
  top: 7px;
  transform: translate(-50%);
  color: #5cc400;
  font-size: 1.25em;
}

.icon-area::before,
.icon-layout::before,
.icon-seat::before {
  left: 20px;
  top: 7px;
  z-index: 0;
}

.four-column[data-category="top_search"] {
  position: relative;
  height: 43px;
}

.accordion-link li a {
  color: #333;
  text-decoration: none;
  padding-block: 5px;
  display: block;
}

.accordion-link li:first-of-type a {
  padding-top: 0;
}

.accordion-link li a:hover {
  color: #0c59b8;
  text-decoration: underline;
}



/*!!!!!! 20260310 add !!!!!!*/


.price-simulator__txt-column{
  width: auto;
  /* margin-top: .5em; */
  /* margin-left: 10px; */
  position: relative;
  margin-right: auto;


  .use_time{
    width: 6.5em;
    white-space: nowrap;
    border: solid 1px #aeaeae;
    padding: 9px 8px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 300;
    transition: all .3s;
    height: 37.8px;
    display: block;
    background: #fff;
    position: relative;
  }
  .use_time::after {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -.25em;
    top: 20px;
    transform: translateY(-50%);
    width: 30px;
    text-align: center;
    pointer-events: none;
  }
}
@media (width < 640px) {
  .price-simulator__txt-column{
    /* margin: 0 auto 10px; */

   
    .use_time{
        font-size: 14px;
        height: 44px;
      }
      .use_time::after {
        right: -.5em;
      }
    }
}


.price-simulator__txt-column.focus_orange{

  .use_time{
    border: solid 1px #f0a200;
    background-color: #fff4dc;
    transition: all .3s;
  }
}


.usage-time-select{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* cursor: pointer; */
}
.price-simulator__txt-column select.usage-time-select option{
    font-weight: 300;
    font-size: 13px;
    /* font-size: 15px; */
    text-align: center;
}
@media (width < 640px) {
.price-simulator__txt-column select.usage-time-select option{
    text-align: left;
    font-size: 13px;
}
}








/*!!!!!!! 割引ボタン !!!!!!!*/

.simulator__discount-button{
  width: min(100%, 1260px);
  margin-top: 10px;
}

  .price-simulator__column-r {
  /* width: 400px; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  /* margin-left: 70px; */
}
@media (width < 821px) {
  .price-simulator__column-r {
        width: 100%;
        gap: 10px;
        margin-left: 0;
    }
}
@media (641px <= width < 968px)  {
  .price-simulator__column-r {
        margin-left: 0;
        justify-content: flex-start;
  }
}
@media (width < 640px) {
  .price-simulator__column-r {
    justify-content: center;
  }
}

  .campaign-toggle{
    display: flex;
    gap: 10px;
    align-items: center;
    border: solid 1px #e9e9e9;
    padding: 5px 10px;
    /* background: rgb(250 250 252); */
    background: #fff;
    box-sizing: border-box;
  }
  @media (width < 821px) {
  .campaign-toggle{
      gap: 1px;
      flex-direction: column;
      width: calc(50% - 10px);
      padding: 2px 10px 5px;
    }
  }

   .campaign-toggle p.campaign-toggle__text {
        font-weight: 800;
        display: flex;
        align-items: center;
        color: #6cb430;
        font-size: 18px;
        gap: 5px;
        /* flex-direction: column; */
        /* justify-content: center; */
    }
    @media (width < 821px) {
       .campaign-toggle p.campaign-toggle__text {
          display: block;
       }
    }

  .campaign-toggle p.campaign-toggle__text.butn_special {
      color: #d60927;
  }

  .campaign-toggle__name{
    line-height: 1.2;
  }

  .campaign-toggle__rate{
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
  }
  @media (width < 821px) {
    .campaign-toggle p.campaign-toggle__text {
      font-size: 14px;
    }
    .campaign-toggle__rate{
      font-size: 16px;
    }
  }

  .toggle-button {
      font-size: 10px;
      display: flex;
      align-items: center;
      position: relative;
      width: 80px;
      height: 30px;
      border-radius: 50px;
      box-sizing: content-box;
      background-color: #54545457;
      cursor: pointer;
      transition: background-color .4s;
  }
  @media (width < 821px) {
    .toggle-button {
        width: 100px;
        height: 28px;
        font-size: 11px;
    }
  }

  .toggle-button:has(:checked) {
      background-color: #5cc400;
  }

  .toggle-button::before {
    position: absolute;
    /* top: 2px; */
    left: 4px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    transition: left .4s;
  }

  .toggle-button:has(:checked)::before {
      left: 52px;
      background-color: #fff;
  }
  @media (width < 821px) {
    .toggle-button:has(:checked)::before {
        left: 72px;
    }
  }

  .toggle-text {
      position: absolute;
      top: 49%;
      transform: translateY(-50%);
      transition: opacity .4s;
      pointer-events: none;
  }

  .toggle-text-off {
      right: 12px;
      color: #fff;
      font-size: 1.15em;
      font-weight: 600;
      opacity: 1;
  }

  .toggle-text-on {
    left: 12px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    word-break: keep-all;
    opacity: 0;
  }
  @media (width < 821px) {
    .toggle-text-on {
      font-size: 1em;
      left: 30px;
    }
    .toggle-text-off {
      right: 30px;
      color: #fff;
      font-size: 1em;
    }
  }

  .toggle-button:has(:checked) .toggle-text-off {
      opacity: 0;
  }

  .toggle-button:has(:checked) .toggle-text-on {
      opacity: 1;
  }

  .toggle-button input {
      display: none;
  }