@media screen and (max-width: 500px) {
  html {
    color: #5b4020;
  }
  header {
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  #contents {
    max-width: 100vw;
    margin: 0 auto;
  }

  #floatingBtn {
    position: fixed;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 100%;
    max-width: 87.5vw; }

  aside.researve-btn {
    margin: 10px auto 0; }

  p.researve-message.text-center {
    font-size: 2.917vw; }
  
  .pT20 {
    padding-top: 20px !important;
  }
  
  .pB15 {
    padding-bottom: 15px !important;
  }
  /** LP
  ****************************************************************************/
  .header-mv {
    width: 100%; }

  .header-mv img {
    width: 100%; }

  p.header-message {
    margin-top: 1.25vw;
    font-size: 3.125vw; }

  section.sec01 {
    max-width: 141.667vw;
    margin: 40px auto 0; }

  .sec01-title {
    margin-top: 4.167vw; }

  ul.sec01-select-list {
    margin-top: 6.25vw;
    justify-content: center;
    gap: 2.083vw; }

  .sec01-message {
    margin-top: 2.083vw;
    font-size: 3.125vw; }
    .sec01-message span {
      margin-left: 3.125vw; }

  section.sec02 {
    position: relative;
    /*margin-top: 10.417vw;*/
    /*padding-bottom: 12.5vw;*/ }

  section.sec02::before {
    content: "";
    display: block;
    background-image: url(../../img/shop/240520/sec02-bg.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; }

  .sec02-top {
    position: relative;
    padding-top: 15px;
    width: 90%;
    margin: 0 auto; }

  .sec02-top-300 {
    position: absolute;
    top: 14.583vw;
    right: 2.083vw; }

  .sec02-item-area {
    background-color: #fff;
    border-radius: 2.083vw;
    width: 90%;
    margin: 30px auto 0;
    padding: 6.25vw 3.125vw; }

  .sec02-item-flex {
    justify-content: center;
    gap: 6.25vw; }

  .sec02-item {
    margin-top: 6.25vw; }

  .sec02-last-area {
    background-color: #fff;
    border-radius: 2.083vw;
    width: 90%;
    margin: 70px auto 0;
    padding: 6.25vw 3.125vw;
    position: relative; }

  .sec02-item-6 {
    position: absolute;
    top: -8.333vw;
    left: 50%;
    transform: translateX(-50%);
    width: -moz-max-content;
    width: max-content; }

  .sec02-last-head {
    padding-top: 4.167vw;
    font-size: 7.917vw;
    font-weight: bold; }

  .sec02-item-7 {
    margin-top: 2.083vw; }
    .sec02-item-7 img {
      margin-top: -14.583vw; }

  .sec02-last-message {
    padding: 0 4.6vw 10px 4.6vw;
  }

  .sec02-last-message p {
    font-size: 2.917vw; }

  .layout-right {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto 0 auto auto; }

  section.sec03 {
    margin-top: 6.25vw; }

  .sec03-main {
    margin: -16% auto 0; }

  .sec04-main {
    position: relative; }

  .sec05-list-1 {
    position: relative; }

  .sec05-bg-1 {
    position: relative;
    padding: 65% 0 90px; }

  .sec05-bg-1::before {
    content: "";
    display: block;
    background-image: url("../../img/sec05-bg-1.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

  .sec05-bg-2 {
    position: relative;
    padding: 65% 0 90px; }

  .sec05-bg-2::before {
    content: "";
    display: block;
    background-image: url("../../img/sec05-bg-2.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

  .sec05-bg-3 {
    position: relative;
    padding: 65% 0 90px; }

  .sec05-bg-3::before {
    content: "";
    display: block;
    background-image: url("../../img/sec05-bg-3.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

/*  .sec05-bg-4 {
    position: relative;
    padding: 65% 0 90px; }

  .sec05-bg-4::before {
    content: "";
    display: block;
    background-image: url("../../img/sec05-bg-4.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}*/

  .sec05-bg-5 {
    position: relative;
    padding: 65% 0 90px; }

  .sec05-bg-5::before {
    content: "";
    display: block;
    background-image: url("../../img/sec05-bg-5.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

  .sec05-list-area {
    padding: 0 0 10%;
    width: 93%;
    background-color: #fff;
    border-radius: 11.25vw 0 0 0; }

  .sec05-list-area img {
    z-index: 2;
    position: relative;
    margin-left: -0.208vw;
    margin-top: -0.208vw; }

  .open-btn-1, .open-btn-2, .open-btn-3, .open-btn-4, .open-btn-5 {
    position: absolute;
    width: 42px;
    top: 52px;
    right: -2px; }

  .close-btn-1, .close-btn-2, .close-btn-3, .close-btn-4, .close-btn-5 {
    position: absolute;
    width: 42px;
    top: 52px;
    right: -2px;
    z-index: -1; }

  .open {
    z-index: 2; }

  .list-1 {
    margin: auto 0 auto auto;
    position: relative; }

  .list-1::before {
    content: "";
    display: block;
    /*background-color: #469bcf;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 2.083vw;
    z-index: 1; }

  .list-1::after {
    content: "";
    display: block;
    /*background-color: #469bcf;*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.083vw;
    z-index: 1; }

  .list-2 {
    position: relative;
    margin: auto 0 auto auto; }

  .list-2::before {
    content: "";
    display: block;
    /*background-color: #AF62A2;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 2.083vw;
    z-index: 1; }

  .list-2::after {
    content: "";
    display: block;
    /*background-color: #AF62A2;*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.083vw;
    z-index: 1; }

  .list-3 {
    position: relative;
    margin: auto 0 auto auto; }

  .list-3::before {
    content: "";
    display: block;
    /*background-color: #EF8200;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 2.083vw;
    z-index: 1; }

  .list-3::after {
    content: "";
    display: block;
    /*background-color: #EF8200;*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.083vw;
    z-index: 1; }

  .list-4 {
    position: relative;
    margin: auto 0 auto auto; }

  .list-4::before {
    content: "";
    display: block;
    /*background-color: mediumpurple;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 2.083vw;
    z-index: 1; }

  .list-4::after {
    content: "";
    display: block;
    /*background-color: mediumpurple;*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.083vw;
    z-index: 1; }

  .list-5 {
    position: relative;
    margin: auto 0 auto auto; }

  .list-5::before {
    content: "";
    display: block;
    /*background-color: darkolivegreen;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 2.083vw;
    z-index: 1; }

  .list-5::after {
    content: "";
    display: block;
    /*background-color: darkolivegreen;*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.083vw;
    z-index: 1; }

  .list-top-tag {
    width: 80%;
    margin: 10px auto 0; }

  .list-text {
    width: 95%;
    margin: 20px 0 auto auto; }

  .fade-area {
    display: none; }

  section.sec06 {
    position: relative;
    padding: 14.583vw 0; }

  section.sec06::before {
    content: "";
    display: block;
    background-image: url("../../img/sec06-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; }

  .sec06-top {
    width: 86%;
    margin: 0 auto; }

  .sec06-main {
    width: 95%;
    height: 125vw;
    margin: 50px auto 0;
    overflow-y: scroll;
    background-color: #fff;
    border-radius: 16.667vw;
    padding: 6.25vw 0px 6.25vw 10.417vw; }

  p.sec06-message {
    font-size: 2.917vw;
    color: #fff;
    width: 95%;
    margin: 12px auto 0; }

  /*section.sec07 {
    margin-top: 10.417vw; }*/

  .sec07-top {
    max-width: 56.25vw;
    margin: 0 auto; }

  /*.sec07-main {
    margin-top: 6.25vw; }*/

  /*section.sec08 {
    margin-top: 10.417vw; }*/

  /*section.sec10 {
    margin-top: 8.333vw; }*/

  h2.select-list-top {
    padding-left: 5%;
    width: 65%; }

  ul.select-tab {
    position: sticky;
    top: 4.167vw;
    flex-wrap: nowrap;
    margin-top: 2.083vw;
    z-index: 10; }

  li.select-1-btn, li.select-2-btn, li.select-3-btn {
    width: 33.3%; }

  li.select-1-btn img, li.select-2-btn img, li.select-3-btn img {
    cursor: pointer; }

  .hide {
    opacity: 0;
    display: none; }

  .shop-text {
    padding: 0 5% 40px;
    border-bottom: dotted 2px #747474; }

  .text-last {
    border-bottom: none; }

  h3.shop-name {
    font-size: 20px;
    font-weight: bold;
    margin-top: 7.5vw;
    align-items: center; }

  h3.shop-name span {
    margin-left: 2.917vw;
    width: 20px; }

  ul.shop-info {
    margin-top: 7.5vw; }

  ul.shop-info iframe {
    width: 100%;
    height: 79.167vw; }

  li.shop-list-head {
    font-size: 18px;
    font-weight: bold;
    margin-top: 6.25vw; }

  li.shop-list-text {
    font-size: 16px;
    margin-top: 5vw;
    line-height: 1.6; }

  li.shop-contact {
    font-size: 4.167vw;
    margin-top: 5vw;
    line-height: 1.6;
    color: #747474; }
    li.shop-contact a {
      text-decoration: underline; }

  .contact-btn {
    margin: 40px auto 0; }

  .field-trip {
    width: 100%;
    height: 125vw;
    margin: 40px auto;
    background-color: #dadada;
    height: 125vw; }

  ul.select-1-nav {
    justify-content: center;
    gap: 2.917vw;
    margin-top: 6.25vw; }

  ul.select-1-nav li {
    font-size: 2.917vw;
    padding-right: 2.083vw;
    border-right: solid 1px #000; }

  ul.select-1-nav li:last-child {
    border-right: none;
    padding-right: 0; }
  
  .btn_text {
    font-size: 1.2em;
}


  .footer-area, .last-footer {
    margin-top: 6.25vw; } 


.sec03-abtn {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 17%;
}
  
 /*================20240123リニューアル　広瀬=====================*/ 
  
  .cta_area {
    background: none;
    padding: 0;
    position: relative;
}
  
  .researve_kengaku_btn {
    position: absolute;
    bottom: 0;
    left: 3%;
    width: 94%;
  }  
  
  .hacomono_note {
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    margin-bottom: 1.5%;
  } 
  
.sec02-top {
    position: relative;
    padding-top: 0px;
    width: 100%;
    margin: 0 auto;
}  
.go_experience_block {
    position: relative;
}
.go_experience_block .list {
    position: absolute;
    list-style: none;
    overflow: hidden;
    padding-left: 8%;
    padding-bottom: 18%;
    bottom: -2em;
}
.go_experience_block .list li {
    width: 42.03%;
    margin-right: 4.35%;
    margin-bottom: 4.35%;
    float: left;
}
  
.open-btn-1, .open-btn-2, .open-btn-3, .open-btn-4, .open-btn-5 {
    position: absolute;
    width: 42px;
    top: 28px;
    right: 18px;
}
  
.close-btn-1, .close-btn-2, .close-btn-3, .close-btn-4, .close-btn-5 {
    position: absolute;
    width: 42px;
    top: 28px;
    right: 18px;
    z-index: -1;
}  
 
.list-1::after,.list-2::after,.list-3::after,.list-4::after,.list-5::after {
    display: none;
}  
  
.sec05-list-area {
    padding: 0 0 2%;
} 
  
  .comment {
    font-size: .80em;
  }
  
  .things_necessary {
    width: 76%;
    margin: 0 auto;
    display: block;
    padding-bottom: 1em;  
  } 
  
.faq_title {
  position: relative;
}
.faq_icon2 {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 10%;
  transition: transform 0.3s;
  z-index: 10;
}
.faq_answer {
  margin-top: -3%;
  position: relative;
}
.add-rotate {
  transform: rotate(-180deg);
  transition: transform 0.3s;
}
.faq_answer {
  margin-top: -3%;
  position: relative;
}
.text_link {
  position: absolute;
  background: #fff;
  bottom: 0%;
  left: 5%;
  width: 95%;
  word-break: break-all;
}
  


  .norikae {
    width: 90%;
    margin: 2em auto 0;
  }  
  
    .first_note {
  font-size: .9em;
}


  
  p.countdown_box_text_02 {
    width: 93%;
    left: 7%;
    margin: 10px 0;
}
  
/*#footer {
    padding-bottom: 10em;
} */ 
  }

/*Slickのためのcss*/

.slick-arrow_prev,
.slick-arrow_next{
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}
.slick-arrow_prev{
  left: 6px;
}
.slick-arrow_next{
  right: 6px;
}
@media screen and (max-width: 750px) {
.slick-arrow_prev,
.slick-arrow_next{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 200;
}
}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
/*    width:94%;*/
    margin:0 auto;
}

.slider img {
    height:auto;
}

.slider .slick-slide {
	transform: scale(0.9);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*
===============================================================================
■ 予約システムの使い方
===============================================================================
*/

.reserve_system_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.reserve_system_ttl img {
    width: 80%;
    padding: 25px 0 0;
}

@media (min-width:751px){
.reserve_system_ttl img {
    padding: 70px 0 0;
}
}

.reserve_system_qa_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.reserve_system_qa_ttl img {
    width: 65%;
    padding: 50px 0 0;
}

@media (min-width:751px){
.reserve_system_qa_ttl img {
    padding: 80px 0 0;
}
}


.reserve_system_qa_content {
  max-width: 960px;
  padding: 0 20px;
  margin: 20px auto 40px auto;
    color: #585757;
}

#ac-menu .detail dd a {
  color: #5381c2;
  border-bottom: solid 1px #5381c2;
}


#ac-menu li {
  border-top: solid 1px #585757;
}
#ac-menu li:last-child {
  border-bottom: solid 1px #585757;
}
#ac-menu .label {
  cursor:pointer;
  font-size: 1.4rem;
  padding: 30px 30px;
  position: relative;
  transition: .5s;
}

@media (min-width:751px){
#ac-menu .label {
  font-size: 1.6rem;
  padding: 30px  60px 30px 30px;
}
}


/*
ラベル右側のアイコン「＋」を設定
beforeが横棒
afterが縦棒
*/
#ac-menu .label::before,
#ac-menu .label::after {
  content: '';
  width: 13px;
  height: 1px;
  background: #585757;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}
#ac-menu .label::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}
/*
アコーディオンメニューが開いている場合
*/
#ac-menu .label.open {
  /* ラベルの背景色を変更 */
  background-color: #a3bce2;
  color: #fff;
}
#ac-menu .label.open::before {
  /* ラベルアイコンの横棒を非表示 */
  opacity: 0;
}
#ac-menu .label.open::after {
  /* ラベルアイコンの縦棒を横向きに回転 */
  transform: rotate(180deg);
}
/*
アコーディオンメニューのコンテンツ部分は、「display: none;」で非表示にしておく。
ラベルクリック時にjQueryの「  $(this).next().slideToggle();」で表示に切り替わる
*/
#ac-menu .detail {
  border-top: solid 1px #ccc;
  padding: 20px 0 30px 0;
  display: none;
}
#ac-menu .detail dl {
  display: flex;
  flex-wrap: wrap;
}
#ac-menu .detail dt {
  width: 20%;
  font-weight: bold;
  margin-bottom: 40px;
}
#ac-menu .detail dd {
  width: 80%;
  font-size: 1.3rem;
  padding-top: 10px;
}

@media (min-width:751px){
#ac-menu .detail dd {
  font-size: 1.6rem;
}
  
}

/*---SP---*/
@media screen and (max-width: 600px) {
  #ac-menu .label {
    padding: 20px 35px 20px 10px
  }

  #ac-menu .detail dl {
    flex-direction: column;
  }
  #ac-menu .detail dt {
    width: 100%;
    margin-bottom: 10px;
  }
  #ac-menu .detail dd {
    width: 100%;
    padding-left: 10px;
    
  }
}

@media screen and (max-width: 750px) {

.kirikae_note {
    position: absolute;
    top: 49.2%;
    font-size: 3vw;
  left: 14%;

}
.kirikae .tab__buttons {
    margin: 0;
}

.kirikae .tab__contents {
    margin-top: -2px;
}  
  
  }

/*既存店LP制作*/
@media screen and (max-width: 750px) {
.rules_list {
    width: 88%;
	margin: 0px auto;
	padding: 20px 0px;
	color: #333333;
}
.rules_list li {
    font-size: clamp(10px,3.1vw,10px);
    line-height: 1.8;
}
.rules_title{
	font-size: 1.1em;
	font-weight: 500;
	margin: 0 3px;
	padding-bottom: 16px;
}
}