/* ----------------------------
共通
------------------------------ */
h2.midashi{
  width: calc(100% - 32px);
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 12px;
  position: relative;
}

h2.midashi::after{
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

h2.midashi + p{
  text-align: center;
  margin: 0 auto 24px;
}

.ticket-box-wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ticket-box{
  width: 100%;
  border: 1px solid #B3B3B3;
  padding: 16px;
  margin: 0 auto;
  border-radius: 8px;
}

.ticket-box h5{
font-size: 1.6rem;
line-height: 1.35;
font-weight: 700;
margin: 0 auto 12px;
text-align: center;
}

.ticket-box .price{
  font-size: 1.4rem;
  text-align: center;
  margin: 0 auto 20px;
}

.cart-btn-mini{
  width: 100%;
  max-width: 196px;
  align-self: center;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  color: #fff;
  padding: 12px 36px 12px 16px;
  border-radius: 4px;
  background:#BBA53D url(../images/arrow_right-w.svg)no-repeat;
  background-position: right;
}

@media screen and (min-width:768px) {
h2.midashi{
  width: 100%;
  font-size: 3.2rem;
}

.ticket-box{
  padding: 16px 16px 16px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "ttl btn"
                        "price btn";
  gap: 12px 16px;
}

.ticket-box h5{
margin: 0;
text-align: left;
}

.ticket-box .price{
  grid-area: price;
  text-align: left;
  margin: 0;
}

.cart-btn-mini{
  grid-area: btn;
  justify-self: end;
}
}

/* ----------------------------
floating-menu
------------------------------ */
.floating-menu {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background: #BBA53D;
  z-index: 2;
  border-radius: 10px 10px 0 0 ;
}

.floating-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.floating-menu ul li{
  text-align: center;
  position: relative;
}

.floating-menu ul li:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background: #fff;
}

.floating-menu ul li a {
  display: block;
  padding:5.128vw 5.5vw;
}

.floating-menu ul li a p{
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

@media screen and (min-width:768px) {
.floating-menu {
  width: fit-content;
  border-radius: 10px 0 0 10px;
}

.floating-menu ul {
  flex-direction: column;
}

.floating-menu ul li:not(:last-child)::after{
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background: #fff;
  top: unset;
  bottom: 0;
  right: 8px;
}

.floating-menu ul li a {
  padding: 24px 16px;
}
}

/* ----------------------------
ticket-hero-area
------------------------------ */
.ticket-hero-area{
width: 100%;
margin: 0 auto;
}

.ticket-hero-area-wrapper{
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:"hero-top-txt"
                      "hero-img-A"
                      "hero-center-area"
                      "hero-img-B";
}

.hero-top-txt{
  width: 100%;
  line-height: 1.5;
  color: #FFFDC6;
  font-weight: 700;
  text-align: center;
  padding: 12px 16px;
  background: #006E47;
  grid-area: hero-top-txt;
}

.hero-img-A{
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  grid-area: hero-img-A;
}

.hero-center-area{
  width: 100%;
  grid-area: hero-center-area;
}

.hero-center-area-wrapper{
  width: calc(100% - 32px);
  margin: 24px auto 0;
}

.hero-ttl{
  margin:0 auto 24px;
}

.hero-sub-ttl{
  width: 100%;
  font-size: clamp(1rem, 4.103vw, 1.4rem);
  line-height: 1.5;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  background: #BBA53D;
  border-radius: 50px;
  margin:0 auto 24px;
}

.hero-center-img-wrapper{
  position: relative;
  margin: 0 auto;
}

.hero-img-ezorisu{
  margin: 0 auto;
}

.hero-img-B{
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  grid-area: hero-img-B;
}

@media screen and (min-width:768px) {
.ticket-hero-area-wrapper{
  grid-template-rows: auto auto;
  grid-template-columns: auto auto auto;
  grid-template-areas:"hero-top-txt hero-top-txt hero-top-txt"
                      "hero-img-A hero-center-area hero-img-B";
  gap: 0 24px;
}

.hero-center-area-wrapper{
  width: 100%;
  height: calc(100% - 40px);
  margin: 32px auto 0;
  position: relative;
}

.hero-sub-ttl{
  margin:0 auto 16px;
  max-width: 480px;
}

.hero-center-img-wrapper{
  width: 100%;
  position: absolute;
  bottom: 0;
}

.hero-img-ezorisu{
  width: clamp(220px, 32vw, 400px);
  height: auto;
}
}

@media screen and (min-width:1024px) {
.hero-top-txt{
  font-size: 2.4rem;
}

  .hero-sub-ttl{
    font-size: 1.6rem;
  }
  .hero-img-ezorisu{
    width: clamp(220px, 40vw, 440px);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

/* ----------------------------
ticket-page-sub-headline
------------------------------ */
.ticket-page-sub-headline{
  background:#006E47;
  background-position: center bottom;
  background-size: 124px auto;
  padding: 24px 16px;
}

.ticket-page-sub-headline h2{
  font-size: 3.2rem;
  line-height: 1.45;
  font-weight: 700;
  color: #FFFDC6;
  text-decoration: underline;
  text-align: center;
  margin: 0 auto 16px;
}

.ticket-page-sub-headline p{
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 500;
  color: #FFF;
  text-align: center;
}

@media screen and (min-width:768px) {
.ticket-page-sub-headline{
  padding: 24px;
}
}

@media screen and (min-width:1024px) {

.ticket-page-sub-headline h2{
  font-size: 4rem;
  line-height: 1;
  margin: 0 auto 24px;
}

.ticket-page-sub-headline{
  padding: 32px;
}

.ticket-page-sub-headline p{
  font-size: 3.2rem;
  line-height: 1;
}
}

/* ----------------------------
recommend-ticket-area
------------------------------ */
.recommend-ticket-area{
  background: #FFFDC6;
  padding: 40px 0;
}

.recommend-ticket-area h2{
  font-size: 3.2rem;
  line-height: 1.45;
  font-weight: 700;
  color: #004D32;
  text-align: center;
  margin: 0 auto 16px;
}

.recommend-ticket-checkpoint{
  width: calc(100% - 32px);
  max-width: 880px;
  margin: 0 auto 32px;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
}

.recommend-ticket-checkpoint li{
  font-size: 1.4rem;
  line-height: 2.4;
  padding: 0 0 0 15px;
  background:url(../images/ticket-dounan/icon-check.svg)no-repeat top 12px left 0;
}

.recommend-ticket-box-cover{
  width: calc(100% - 32px);
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 auto;
  align-items: center;
}

.recommend-ticket-box{
max-width: 460px;
background: #fff;
border-radius: 16px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
}

.ticket-headline{
  width: 100%;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  margin: 0 auto 16px;
  border-radius: 16px 16px 0 0 ;
}

.ticket-headline.green{
  font-size: 1.6rem;
  color: #006E47;
  background: #EBF5DC;
}

.ticket-headline.blue{
  font-size: 1.4rem;
  color: #006999;
  background: #ECFCFF;
}

.recommend-ticket-box-wrapper{
  width: calc(100% - 32px);
  margin: 0 auto 24px;
}

.recommend-ticket-note{
  font-size: 1.4rem;
  text-align: center;
  margin: 16px auto;
}

.recommend-ticket-box-wrapper img{
  margin: 0 auto;
}

.recommend-ticket-box-wrapper h5{
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin: 16px auto 12px;
}

.recommend-ticket-price{
  font-weight: 500;
  padding: 4px 8px;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  margin: 0 auto;
  text-align: center;
}

@media screen and (min-width:768px) {
.recommend-ticket-area h2{
  font-size: 4rem;
  margin: 0 auto 32px;
}

.recommend-ticket-checkpoint{
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  margin: 0 auto 40px;
  padding: 16px;
  border-radius: 50px;
}

.recommend-ticket-box-cover{
  flex-direction: row;
  flex-wrap: wrap;
}

.recommend-ticket-box{
width: calc(50% - 20px);
}

.ticket-headline{
  margin: 0 auto 30px;
}

.recommend-ticket-box-wrapper{
  width: calc(100% - 60px);
  margin: 0 auto 24px;
}
}

@media screen and (min-width:1024px) {
  .recommend-ticket-checkpoint{
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
  }

  .ticket-headline.green{
    font-size: 2rem;
  }

  .ticket-headline.blue{
    font-size: 2rem;
  }
}

/* ----------------------------
ticket-page-headline
------------------------------ */
.ticket-page-headline h1{
  width: 100%;
  font-size: 3.2rem;
  line-height:1.45;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 24px 16px 140px;
  background: #006E47 url(../images/ticket-doutou-SB/ezorisu-happy.png) no-repeat bottom center; 
  background-size: 106px 130px;
}

.ticket-page-headline .yellow{
color: #FFFDC6;
}

.ticket-page-headline .dot{
  display: inline-block;
  position: relative;
  padding-top: 0.1em;
}

.ticket-page-headline .dot::before{
  position: absolute;
  content: "";
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background-color: #FFFDC6;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (min-width:768px) {
.ticket-page-headline h1{
  line-height:1;
  padding: 40px;
  background: #006E47 url(../images/ticket-doutou-SB/ezorisu-happy.png) no-repeat bottom right 24px; 
  background-size: 81px 100px;
}

.ticket-page-headline .dot{
  padding-top: 0.3em;
}
}

@media screen and (min-width:1024px) {
.ticket-page-headline h1{
  background: #006E47 url(../images/ticket-doutou-SB/ezorisu-happy.png) no-repeat bottom right 120px; 
  background-size: 91px 110px;
}
}

/* ----------------------------
recommended-for-area
------------------------------ */
.recommended-for-area{
  background: #EBF5DC;
}

.recommended-for-area-wrapper{
  width: calc(100% - 32px);
  max-width:960px;
  margin: 40px auto;
}

.recommended-for-area-wrapper h2{
  font-size: 2.4rem;
  line-height: 1;
  color: #006E47;
  width: fit-content;
  text-align: center;
  margin:0 auto 24px;
  position: relative;
}

.recommended-for-area-wrapper h2::before{
  position: absolute;
  display: inline-block;
  content: '';
  left: -30px;
  bottom: 10px;
  width: 32px;
  height: 3px;
  background-color: #006E47;
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
}

.recommended-for-area-wrapper h2::after{
position: absolute;
    display: inline-block;
    content: '';
    right: -30px;
    bottom: 10px;
    width: 32px;
    height: 3px;
    background-color: #006E47;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
}

.recommended-for-list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.recommended-for-list li{
 width: calc((100% - 16px) / 2);
 background: #fff;
 border-radius: 16px;
}

.recommended-for-list li h3{
  font-size: 1.8rem;
  line-height: 1.65;
  color: #004D32;
  text-align: center;
  margin: 16px auto 8px;
}

.recommended-for-list li img{
  width: 100%;
}

.recommended-for-list li p{
  padding: 16px;
}

@media screen and (min-width:768px) {

.recommended-for-area-wrapper h2{
  font-size: 3.2rem;
}

.recommended-for-list{
  flex-wrap: nowrap;
  gap: 24px;
}

.recommended-for-list li{
 width: 100%;
}
}

/* ----------------------------
message-area 
------------------------------ */
.message-area{
  background:url(../images/ticket-doutou-SB/bg.png)no-repeat;
  background-size: cover;
  background-position: center;
}

.message-area-wrapper{
  width: calc(100% - 32px);
  max-width: 900px;
  margin: 40px auto;
  text-align: center;
}

.message-area-wrapper p{
  line-height: 2;
  font-weight: 500;
}


.message-area-wrapper h2{
  font-size: 2rem;
  color: #006E47;
  font-weight: 700;
  margin: 32px auto;
}

.message-area-wrapper p.strong{
  font-size: 2rem;
  color: #006E47;
  font-weight: 700;
  margin: 32px auto;
}

.message-area-wrapper p .green{
  color: #006E47;
}

/* ----------------------------
trouble-area
------------------------------ */
.trouble-area{
  background: #687E72;
  position: relative;
}

.trouble-area::before{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 20px solid #687E72;;
}

.trouble-area-wrapper{
  width: calc(100% - 32px);
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

.trouble-area-wrapper h2.midashi{
  color: #fff;
  margin: 0 auto 24px;
}

.trouble-area-wrapper h2.midashi::after{
  background: #fff;
}

.trouble-list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.trouble-list li{
  width: calc((100% - 16px) / 2);
  background: #fff;
  border-radius: 16px;
}

.trouble-list li h3{
  font-size: 1.8rem;
  line-height: 1.65;
  color: #687E72;
  text-align: center;
  margin: 16px 16px 8px;
}

.trouble-list li img{
  width: 100%;
}

.trouble-list li p{
  padding: 16px;
}

@media screen and (min-width:768px) {

.trouble-list{
  flex-wrap: nowrap;
  gap: 24px;
}

.trouble-list li{
  width: 100%;
}

.trouble-list li h3{
  margin: 24px auto 16px;
}
}

/* ----------------------------
solve-area
------------------------------ */
.solve-area{
  margin: 40px auto 0;
}

.solve-area-wrapper{
  width: calc(100% - 32px);
  max-width: 960px;
  margin: 0 auto;
}

.solve-area h2{
  font-size: 3.2rem;
  line-height: 1.35;
  font-weight: 700;
  color: #004D32;
  text-align: center;
}

.solve-area h2 .marker{
  background: linear-gradient(transparent 65%, #FFFDC6 65%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.solve-list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px auto 0;
}

.solve-list li{
  width: calc((100% - 16px) / 2);
  background: #F5FFE6;
  border-radius: 16px;
}

.solve-list li h3{
  font-size: 1.8rem;
  line-height: 1.65;
  color: #006E47;
  text-align: center;
  margin: 16px 8px 8px;
}

.solve-list li img{
  width: 100%;
}

.solve-list li p{
  padding: 16px;
}

@media screen and (min-width:768px) {
.solve-list{
  flex-wrap: nowrap;
  gap: 24px;
  margin: 40px auto 0;
}

.solve-list li{
  width: calc(33% - 12px);
}

.solve-list li h3{
  margin: 24px auto 16px;
}

.solve-list li p{
  text-align: center;
}
}

/* ----------------------------
ticket-introduction-area
------------------------------ */
.ticket-introduction-area{
  margin: 80px auto 0;
}

.ticket-introduction-area-wrapper{
  width: calc(100% - 32px);
  max-width: 960px;
  margin: 0 auto;
}

.ticket-introduction-list{
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px auto 0;
}

.ticket-introduction-list li{
  border: 1px solid #006E47;
  border-radius: 16px;
}

.ticket-introduction-list li h3{
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  padding: 8px;
  background: #006E47;
  border-radius: 16px 16px 0 0;
}

.ticket-introduction-list li p{
  width: calc(100% - 32px);
  margin: 16px auto 0;
}

.ticket-introduction-list li .cart-btn-mini{
  margin: 24px auto;
  max-width: 230px;
}

@media screen and (min-width:768px) {
.ticket-introduction-list{
  gap: 16px;
  margin: 40px auto 0;
}

.ticket-introduction-list li{
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
}

.ticket-introduction-list li h3{
  width: 120px;
  padding: 40px 16px;
  border-radius: 16px 0 0 16px;
}

.ticket-introduction-list li p{
  flex: 1;
  width: 100%;
  margin: 0 24px 0 16px;
}

.ticket-introduction-list li .cart-btn-mini{
  margin: 0;
}
}

/* ----------------------------
general-tab / mapエリア以外　タブ切り替えUI共通
------------------------------ */
.general-tab-buttons-wrapper {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.general-tab {
  font-size: 1.6rem;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid #004D32;
  background: #fff;
  color: #004D32;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}

.general-tab:hover {
  background: #004D32;
  color: #fff;
}

.general-tab.active {
  background: #004D32;
  color: #fff;
}

.general-tab-contents-wrapper {
  position: relative;
}

.general-tab-content {
  display: none;
}

.general-tab-content.active{
  display: block;
}

/* ----------------------------
other-ticket-area
------------------------------ */
.other-ticket-area{
  margin: 80px auto 0;
}

.other-ticket-area h2.midashi{
  margin: 0 auto 24px;
}


.other-ticket-area .general-tab-wrapper h3{
  font-size: 2rem;
  line-height: 1;
  color: #004D32;
  background: #F5FFE6;
  padding: 16px 0;
  text-align: center;
  margin: 0 auto 24px;
}

/* ----------------------------
whatyoucando-area
------------------------------ */
.whatyoucando-area{
  width: 100%;
  background: #FFFDC6;
  margin: 40px auto 0;
}

.whatyoucando-area-wrapper{
  margin: 48px auto 40px;
}

.whatyoucando-list{
  width: calc(100% - 32px);
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 24px auto 0;
}

.whatyoucando-list li{
  width: calc((100% - 16px) / 2);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
}

.whatyoucando-list li h3{
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: #004D32;
  text-align: center;
  margin: 0 auto 16px;
}

.whatyoucando-list li img{
  width: auto;
  height: 80px;
  margin: 0 auto 16px;
}

.whatyoucando-list li p{
  line-height: 1.5;
  text-align: center;
}

@media screen and (min-width:768px) {
.whatyoucando-area{
  margin: 80px auto 0;
}
}

@media screen and (min-width:1024px) {
.whatyoucando-list{
  max-width: 1000px;
  flex-wrap: nowrap;
}

.whatyoucando-list li{
  width: calc(25% - 8px);
}
}

/* ----------------------------
sightseeing-spot-area
------------------------------ */
.sightseeing-spot-area{
  width: 100%;
  margin: 40px auto 0;
  overflow: hidden;
}

.sightseeing-spot-area-wrapper h2.midashi{
  margin: 0 auto 32px;
}

.sightseeing-spot-list {
  width: calc(100% - 32px);
  max-width: 460px;
  margin: 0 auto;
}

.sightseeing-spot-list li{
  max-width: 460px;
  margin: 0 auto;
  padding: 0 12px;
}

.sightseeing-spot-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.sightseeing-txt h3{
font-size: 1.6rem;
font-weight: 700;
text-align: center;
margin: 16px auto 12px;
}

.sightseeing-tag{
  font-size: 1.2rem;
  line-height: 1;
  color: #687E72;
  width: 100%;
  padding: 8px;
  text-align: center;
  background: #E7ECE3;
  margin: 0 auto 12px;
  border-radius: 50px;
}

.sightseeing-tag + p{
line-height: 1.5;
}

.slider{
  position: relative;
}

.slick-prev, .slick-next{
  width: 0;
  height: 0;
  top: 30%;
}

.slick-prev:before{
  display: block;
  position: absolute;
  left: 4px;
  z-index: 2;
  content: '';
  width: 48px;
  height: 48px;
  background:  url(../images/ticket-dounan/arrow_left.svg) no-repeat;
}

.slick-next:before{
  display: block;
  position: absolute;
  right: 4px;
  z-index: 2;
  content: '';
  width: 48px;
  height: 48px;
  background: url(../images/ticket-dounan/arrow_right.svg) no-repeat;
}

.slick-dots{
  position: unset;
  margin: 40px auto 0;
}

.slick-dots li{
  padding: 0;
}

.slick-dots li button{
  padding: 0;
}

.slick-dots li button:before{
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  opacity: 1;
  background-color: #BCC7BC;
  border-radius: 50px;
}

.slick-dots li.slick-active button:before{
  opacity: 1;
  background-color: #006E47;
}

@media screen and (min-width:768px) {
.sightseeing-spot-area{
  margin: 80px auto 0;
}

.sightseeing-spot-area-wrapper h2.midashi{
  margin: 0 auto 40px;
}

.sightseeing-spot-list {
  max-width: 1023px;
}
}

@media screen and (min-width:1024px) {
.sightseeing-spot-area{
  margin: 80px auto 0;
}

.sightseeing-spot-list {
  max-width: 1016px;
}

.slick-next:before{
  right: -20px;
}

.slick-prev:before{
  left: -20px;
}
}

/* ----------------------------
map-area
------------------------------ */
.map-area-buttons-wrapper{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.map-area-tab{
  font-size: 1.6rem;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid #004D32;
  background: #fff;
  color: #004D32;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}

.map-area-tab:hover {
  background: #004D32;
  color: #fff;
}

.map-area-tab.active {
  background: #004D32;
  color: #fff;
}

.map-area-contents-wrapper {
  position: relative;
}

.map-area-content{
  display: none;
}

.map-area-content.active{
  display: block;
}

.map-area{
  width: 100%;
  margin: 40px auto 0;
}

.tab-area-wrapper{
  width: calc(100% - 32px);
  max-width: 960px;
  margin: 0 auto;
}

.map-area h2.midashi{
  margin: 0 auto 32px;
}

/* --tabの中身-- */
.map-content-wrapper h3{
  width: 100%;
  font-size: 1.8rem;
  line-height: 1;
  padding: 16px;
  color: #004D32;
  text-align: center;
  background:#F5FFE6;
  margin: 0 auto 24px;
}

.map-content-wrapper h4{
  font-size: 1.8rem;
  line-height: 1.65;
  color: #004D32;
  text-align: center;
  margin: 0 auto 24px;
}

.map-img-wrapper{
  margin: 24px auto;
  text-align: center;
}

.map-img-wrapper img{
  width: 100%;
  border-radius: 8px;
}

.map-img-wrapper .cart-btn{
  margin: 24px auto 0;
}

.map-schedule-wrapper{
  margin: 24px auto 0;
  border: 1px solid #B3B3B3;
  border-radius: 16px;
  padding:16px;
  background: linear-gradient(#B3B3B3, #B3B3B3) no-repeat;
  background-size: 1px 100%;
  background-position: 74px;
}

.schedule-wrapper{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-block{
  display: flex;
  gap: 32px;
}

.schedule-block p{
line-height: 1.25;
}

.schedule-block.strong p{
  color: #E7173A;
  font-weight: 700;
}

@media screen and (min-width:768px) {
/* --tabの中身-- */
.map-content-wrapper{
  display: grid;
  grid-template-columns: 50% auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "h3 h3"
                        "h4 h4"
                        "txt txt"
                        "map schedule";
  gap: 0 24px; 
                             
}

.map-content-wrapper h3{
  font-size: 2.4rem;
  grid-area: h3;
}

.map-content-wrapper h4{
  font-size: 2rem;
  grid-area: h4;
}

.map-content-wrapper h4 + p{
  grid-area: txt;
}

.map-img-wrapper{
  grid-area: map;
}

.map-schedule-wrapper{
  grid-area:schedule ;
}
}

/* ----------------------------
howtouse-area
------------------------------ */
.howtouse-area{
  width: 100%;
  margin: 80px auto 0;
}

.howtouse-area-wrapper{
  width: calc(100% - 32px);
  max-width: 960px;
  margin: 0 auto;
}

.howtouse-list{
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.howtouse-list li{
  width: calc((100% - 16px) / 2);
  aspect-ratio: 1/1;
  background: #FFFDC6;
  border-radius: 50%;
  text-align: center;
  position: relative;
}

.howtouse-list li h3{
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: #004D32;
  margin: 19px auto 0;
}

.howtouse-list li p{
  width: 100%;
  line-height: 1.5;
  font-weight: 500;
  position: absolute;
  top: calc(50% + 8px);
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width:768px) {

.howtouse-list{
  flex-wrap: nowrap;
}

.howtouse-list li{
  width: calc(20% - 8px);
}
}

/* ----------------------------
qa-area
------------------------------ */
.qa-area{
  margin: 64px auto 0;
}

.qa-list dl{
  width: calc(100% - 32px);
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin: 0 auto;
}

.qa-item{
  width: 100%;
  background: #fff;
  padding: 24px 16px;
  border-radius: 4px;
}

.qa-item dt{
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 500;
  padding: 0 0 0 40px;
  color: #004D32;
  position: relative;
}

.qa-item dt::before{
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  background: url(../images/icon-Q.svg) no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.qa-item dd{
  font-size: 1.6rem;
  line-height: 1.7;
  margin: 8px auto 0;
  padding: 0 0 0 40px;
  position: relative;
}

.qa-item dd::before{
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  background: url(../images/icon-A.svg) no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

/* ----------------------------
bottom-message-area
------------------------------ */
.bottom-message-area{
  width: 100%;
  background: #006E47;
}

.bottom-message-area-wrapper{
  width: calc(100% - 32px);
  margin: 40px auto 0;
  padding:0 0 212px 0;
  position: relative;
}

.bottom-message-area-wrapper::after{
  display: block;
  content: '';
  width: 152px;
  height: 180px;
  background: url(../images/ticket-dounan/ezorisu-travel.png) no-repeat;
  background-size: contain;
  position: absolute;
  right: 50%;
  bottom: 0;
  transform: translate(50%, 0%);
}

.bottom-message-area-wrapper h2{
  font-size: 3.2rem;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  color: #FFFDC6;
  margin: 0 auto 24px;
}

.bottom-message-area-wrapper p{
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 32px;
}

@media screen and (min-width:1024px) {

.bottom-message-area-wrapper{
  padding:0;
}

.bottom-message-area-wrapper::after{
  position: absolute;
  right: 0;
  bottom: -40px;
  transform:unset;
}

.bottom-message-area-wrapper h2{
  font-size: 4rem;
}

.bottom-message-area-wrapper p{
  font-size: 2.4rem;
  margin: 0 auto 48px;
}

.bottom-message-area-wrapper .cart-btn{
 margin: 0 auto 40px;
}
}

/* ----------------------------
message-area bottom
------------------------------ */
.message-area.bottom{
  width: 100%;
  max-width: none;
  margin: 0 auto -75px;
}

 .message-area.bottom .message-area-wrapper{
  max-width: 1024px;
}

@media screen and (min-width:1024px) {
 .message-area.bottom{
  margin: 0 auto -120px;
} 
}