* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family:'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff; 
  padding-top: 70px;
}

img { display: block; width: 100%; }

/* ===== ヘッダー ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;

  background: #fff;
  height: 70px;
  padding: 18px 40px;

  display: flex;
  align-items: center;
}
.site-header img {
  width: 200px;
  height: auto;
}

/* ==========================
   HERO
========================== */

.hero{
    position:relative;
    height:680px;
    overflow:visible;
}

.hero-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ==========================
   青帯
========================== */

.hero-caption{

    position:absolute;

    left:0;
    bottom:-50px;

    width:568px;

    background:#324EBB;

    padding:10px 90px 25px;

    box-sizing:border-box;

    z-index:10;

}

/* TICKET */
.hero-ticket{
    display:flex;
    align-items:center;
    gap:5px;
    width:100%;
}

.hero-line{
    flex:1;
    width:263px;
    height:2px;
    background:#fff;
}

.hero-ticket span{
  color:#fff;
  font-size:28px;
  font-weight:700;
  letter-spacing:.08em;
}

/* タイトル */
.hero-title{
  margin:0;
  color:#fff;
  font-size:45px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.05em;
}

.hero-title span{
  display:inline-block;
  margin-left:18px;
}

.hero-corner{
    position:absolute;
    pointer-events:none;
    z-index:2;
}

/* ==========================
   タブレット
========================== */
@media (max-width: 1024px){
   body {
    padding-top: 60px;
  }

  .site-header{
    height: 60px;
    padding: 12px 24px;
  }

  .site-header img{
    width: 160px;
  }

  .hero{
    height: 520px;
  }

  .hero-caption{
    width: 460px;
    height: auto;
    bottom: -40px;
    padding: 18px 40px;
  }

  .hero-ticket span{
    font-size: 22px;
  }

  .hero-title{
    font-size: 36px;
  }

}


/* ==========================
   スマホ
========================== */
@media (max-width: 767px){
  body {
    padding-top: 40px;
  }

  /* ヘッダー */
  .site-header{
    height: 40px;
    padding: 7px 14px;
  }

  .site-header img{
    width: 146px;
  }

  /* HERO */
  .hero{
    height: 430px;
  }

  .hero-caption{
    left: 0;
    bottom: -30px;

    width: calc(100% - 20px);
    max-width: 207px;
    height: auto;

    padding: 10px 20px;
  }

  .hero-ticket{
    gap: 5px;
  }

  .hero-ticket span{
    font-size: 12px;
  }

  .hero-line{
    height: 1px;
  }

  .hero-title{
    font-size: 15px;
    line-height: 2;
  }

}


/* ===== 当日券（窓口購入） ===== */
.counter-section {
  padding: 100px 20px 30px;
  background: #fff;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 396px);
  justify-content: center;
  gap: 23px;

   align-items: start;
}

.counter-card {
  margin: 0 auto;
  width: 396px;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  background: #fff;
  border: 3px solid;
  border-color: #549CEF;
}

.counter-card-head {
  background: #549CEF;
  color: #fff;
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 20px;
}

.counter-card-body {
  padding: 15px 24px 8px;
}

.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 20px;
}

.counter-label {
  font-weight: 700;
  color: #222;
}
.counter-label small {
  font-weight: 700;
  font-size: 15px;
  color: #000;
}

.counter-price {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 27px;
  color: #549CEF;
  white-space: nowrap;
}

.counter-price .yen {
  font-weight: 700;
  font-size: 17px;
  margin-left: 2px;
}

.counter-group-btn {
  width: 298px;
  background: #549CEF;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin: 20px auto 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);

}

.counter-group-btn::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.counter-btn-spacer{
  width: 298px;      /* ボタンと同じ幅 */
  height: 44px;      /* ボタンの高さ */
  margin: 8px auto;  /* ボタンと同じ余白 */
  visibility: hidden;
}

/* ===== 注意事項アコーディオン ===== */
.counter-note {
  list-style: none;
  text-align: center;
  color: #FF0000;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 0 20px;
  cursor: pointer;
  user-select: none;
}
.counter-note::-webkit-details-marker { display: none; }

.counter-note::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1px solid #e60033;
  border-bottom: 1px solid #e60033;
  transition: transform 0.2s ease;
  vertical-align: 2px;
  transform: rotate(-45deg);
}
.counter-accordion[open] .counter-note::after {
  transform: rotate(45deg);
  vertical-align: 0px;
}

.counter-notes {
  padding: 0 0 24px;
  font-size: 12px;
  line-height: 1.9;
  color: #000;
}
.counter-notes p { margin: 0; }


/* ==========================
   Tablet
========================== */
@media (max-width: 1024px) {

  .counter-section {
    padding: 70px 20px 40px;
  }

  .counter-grid {
    gap: 20px;
  }

}

/* ==========================
   Smartphone
========================== */
@media (max-width: 768px) {

  .counter-section {
    padding: 60px 20px 10px;
  }

  .counter-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .counter-card {
    width: 100%;
    max-width: 396px;
  }

  .counter-card-head {
    font-size: 17px;
    padding: 15px 20px;
  }

  .counter-card-body {
    padding: 10px 25px 5px;
  }

  .counter-row {
    padding: 5px 0;
    font-size: 16px;
  }

  .counter-label {
    font-size: 18px;
  }

  .counter-label small {
    margin: 2px 0 0;
    font-size: 11px;
  }

  .counter-price {
    font-size: 22px;
  }

  .counter-price .yen {
    font-size: 13px;
  }

  .counter-group-btn {
    width: 100%;
    max-width: 302px;
    padding: 7px;

    font-size: 14px;
    border-radius: 10px;
  }

  .counter-btn-spacer {
    display: none;
  }

  .counter-note {
    font-size: 11px;
    padding: 5px 0 10px;
  }

  .counter-notes {
    padding: 0 0 20px;
    font-size: 11px;
    line-height: 1.8;
  }

  .counter-note::after {
     border-right: 1px solid #e60033;
    border-bottom: 1px solid #e60033;
    vertical-align: 1px;
  }

}

/* ===== セクション共通 ===== */
.section-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 1234px;      /* cafe-titleと同じ数値に揃える */
  max-width: 92%;
  margin: 0 auto 50px;

  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #324EBB;
  letter-spacing: 0.12em;
}
.section-title .heading-line{
  flex: 1;
  height: 2px;
  background: currentColor;
}

/* ===== 前売券・当日券（WEB購入） ===== */
.web-ticket-section {
  padding: 50px 16px 100px;
  background: #fff;
}

.web-ticket-notice-wrap {
  text-align: center;
  margin-bottom: 10px;
}

.web-ticket-notice {
  position: relative;
  display: inline-block;
  background: #324EBB;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.05em;
  
  margin-bottom: 11px;
  padding: 7px 32px;
  border-radius: 999px;
}

.heading-text small{
  font-size: 30px;
  font-weight: 700;
}

/* 下の三角 */
.web-ticket-notice::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid #324EBB;
}

.web-ticket-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  max-width: 1234px;
  margin: 40px auto 0;
  align-items: start;
}

.web-ticket-card {
  width: 577px;
  max-width: 100%;
  position: relative;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
  border: 2px solid;
  margin: 26px auto 0;
}
.web-ticket-card.blue { border-color: #324EBB; }
.web-ticket-card.teal { border-color: #1F979F; }

.web-ticket-tag {
  width: 415px;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);

  background: #FFF44A;
  color: #324EBB;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  padding: 5px 50px;

  border: 2px solid #324EBB; /* 枠線 */
  border-radius: 999px;

  z-index: 5;
}
.web-ticket-tag2 {
  width: 415px;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);

  background: #FFF44A;
  color: #1F979F;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  padding: 5px 50px;

  border: 2px solid #1F979F;
  border-radius: 999px;

  z-index: 5;
}
.web-ticket-tag strong {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 31px;
  line-height: 1;
  vertical-align: -2px;
  transform: skewX(-12deg);
}

.web-ticket-head {
  border-radius: 22px 22px 0 0;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 32px 16px 28px;
}
.web-ticket-card.blue .web-ticket-head { background: #324EBB; }
.web-ticket-card.teal .web-ticket-head { background: #1F979F; }

.web-ticket-body {
  padding: 15px 36px 26px;
}

.web-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 20px;
}

.web-ticket-label {
  font-size: 30px;
  font-weight: 700;
  color: #222;
}
.web-ticket-label small {
  font-weight: 700;
  font-size: 23px;
  color: #000000;
}

.web-ticket-price {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 40px;
  white-space: nowrap;
}
.web-ticket-card.blue .web-ticket-price { color: #324EBB; }
.web-ticket-card.teal .web-ticket-price { color: #1F979F; }

.web-ticket-price .yen {
  font-weight: 700;
  font-size: 25px;
  margin-left: 4px;
}

.web-ticket-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 503px;
  max-width: 100%;
  height: 89px;
  box-sizing: border-box;

  color: #fff;
  text-align: center;
  padding: 18px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  margin: 18px auto 20px;
}

.web-ticket-btn::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

.web-ticket-card.blue .web-ticket-btn {
  background: linear-gradient(100deg, #3549B9, #069CCB);
}
.web-ticket-card.teal .web-ticket-btn {
  background: linear-gradient(100deg, #26849B, #06CBA5);
}
.web-ticket-btn span { font-size: 22px; }


/* ==========================
   Tablet
========================== */
@media (max-width: 1024px) {

  .section-title{
    width: 100%;
    max-width: 92%;
    font-size: 32px;
    gap: 16px;
    margin-bottom: 40px;
  }

  .heading-text small{
    font-size: 24px;
  }

  .web-ticket-grid{
    gap: 40px;
    max-width: 650px;
    grid-template-columns: 1fr;
  }

  .web-ticket-card{
    width: 100%;
    max-width: 577px;
  }

}

/* ==========================
   Smartphone
========================== */
@media (max-width: 768px) {

  .section-title{
    font-size: 17px;
    gap: 10px;
    margin-bottom: 30px;
    letter-spacing: .05em;
  }
  .section-title .heading-line{
  height: 1px;
  }

  .heading-text small{
    font-size: 14px;
  }

  .web-ticket-section{
    padding: 35px 20px 50px;
  }

  .web-ticket-notice{
    font-size: 13px;
    padding: 5px 25px;
    margin-bottom: 20px;
  }

  .web-ticket-notice::after{
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #324EBB;
    bottom: -12px;
  }

  .web-ticket-grid{
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 420px;
    margin-top: 30px;
  }

  .web-ticket-card{
    border-radius: 10px;
    width: 100%;
    margin-top: 20px;
  }

  .web-ticket-tag,
  .web-ticket-tag2{
    width: calc(100% - 32px);
    max-width: 300px;
    top: -20px;
    font-size: 15px;
    padding: 5px 16px;
  }

  .web-ticket-tag strong{
    font-size: 18px;
  }

  .web-ticket-head{
    border-radius: 8px 8px 0 0;
    font-size: 17px;
    padding: 26px 16px 15px;
  }

  .web-ticket-body{
    padding: 10px 25px 5px;
  }

  .web-ticket-row{
    padding: 5px 0;
  }

  .web-ticket-label{
    font-size: 18px;
  }

  .web-ticket-label small{
    margin: 2px 0 0;
    font-size: 11px;
  }

  .web-ticket-price{
    font-size: 22px;
  }

  .web-ticket-price .yen{
    font-size: 13px;
  }

  .web-ticket-btn{
    width: 100%;
    height: 60px;
    font-size: 14px;
    border-radius: 14px;
    margin: 20px auto 10px;
  }

}



/* ===== 空背景 ===== */

.ticket-bg {
  position: relative;
  overflow: hidden;
  padding-bottom: 150px;

  background: url("image/back.png") center top / cover no-repeat;
}
.ticket-cloud {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.ticket-cloud-1{
  background-image: url("image/cloud.png");
  width:707px;
  height:117px;
  top:200px;
  right:-500px;
}

.ticket-cloud-2{
  background-image: url("image/cloud2.svg");
  width:565px;
  height:86px;
  top:520px;
  left:-400px;
}

.ticket-cloud-3{
  background-image: url("image/cloud3.svg");
  width:294px;
  height:77px;
  bottom:1580px;
  left:10px;
}

.ticket-cloud-4{
  background-image: url("image/cloud4.svg");
  width:584px;
  height:88px;
  bottom:900px;
  right:-150px;
}

.ticket-cloud-5{
  background-image: url("image/cloud5.svg");
  width:618px;
  height:117px;
  bottom:760px;
  left:-400px;
}

.ticket-cloud-6{
  background-image: url("image/cloud6.svg");
  width:315px;
  height:61px;
  bottom:460px;
  right:450px;
}

.ticket-bg > .event-section,
.ticket-bg > .experience-section {
  position: relative;
  z-index: 2;
}

/* ==========================
   Tablet
========================== */
@media (max-width: 1024px){

  .ticket-bg{
    padding-bottom: 100px;
  }

  .ticket-cloud-1{
    width:420px;
    height:70px;
    top:180px;
    right:-220px;
  }

  .ticket-cloud-2{
    width:360px;
    height:55px;
    top:500px;
    left:-180px;
  }

  .ticket-cloud-3{
    width:180px;
    height:48px;
    bottom:1450px;
    left:0;
  }

  .ticket-cloud-4{
    width:360px;
    height:55px;
    bottom:760px;
    right:-120px;
  }

  .ticket-cloud-5{
    width:380px;
    height:72px;
    bottom:650px;
    left:-220px;
  }

  .ticket-cloud-6{
    width:190px;
    height:38px;
    bottom:380px;
    right:180px;
  }

}

/* ==========================
   Smartphone
========================== */
@media (max-width: 768px){

  .ticket-bg{
    padding-bottom: 70px;
  }
  

  .ticket-cloud-1{
    width:220px;
    height:36px;
    top:70px;
    right:-120px;
  }

  .ticket-cloud-2{
    width:220px;
    height:34px;
    top:420px;
    left:-70px;
  }

  .ticket-cloud-3{
    width:220px;
    height:32px;
    top:950px;
    bottom: auto;
    right:-50px;
    left: auto;
  }

  .ticket-cloud-4{
    width:220px;
    height:34px;
    bottom:1820px;
    right:auto;
    left:-60px;
  }

  .ticket-cloud-5{
    width:240px;
    height:45px;
    bottom:1000px;
    left:auto;
    right:-50px;
  }

  .ticket-cloud-6{
    width:120px;
    height:24px;
    bottom:300px;
    right:auto;
    left:-50px;
  }

}

/* ===== イベントチケット ===== */
.event-section {
  padding: 75px 16px 10px;
}
.event-section .section-title {
  color: white;
}
.event-section .section-title::before,
.event-section .section-title::after {
  background: white;
}

.event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 67px;
  max-width: 1027px;
  margin: 0 auto;
  align-items: start;
  justify-items: center;
}

.event-card {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;

  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.event-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #c8e4f0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.event-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% top;
  display: block;
}


.event-card-name {
  background: #324EBB;
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.72px;
  padding: 10px 0;
}

.event-card-body {
  padding: 15px 28px 8px;
}

.event-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-size: 25px;
}

.event-label {
  font-weight: 700;
  color: #222;
}
.event-label small {
  font-weight: 500;
  font-size: 18px;
  color: #000;
  margin-left: 4px;
}

.event-price {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 35px;
  color: #324EBB;
  white-space: nowrap;
}
.event-price .yen {
  font-size: 22px;
  font-weight: 700;
  margin-left: 2px;
}

/* ダミー行 */
.event-price-row.is-spacer {
  visibility: hidden;
}

.event-badge-wrap {
  text-align: center;
  margin: 20px 0 20px;
}

.event-badge {
  position: relative;
  display: inline-block;

  width: 274px;
  max-width: 100%;
  background: #FFF44A;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 24px;
}
.event-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #FFF44A;
}

.event-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  width: 418px;
  max-width: 100%; 

  margin: 4px auto 16px; 

  background: linear-gradient(100deg, #324EBB, #069CCB);
  color: #fff;
  text-align: center;
  padding: 23px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}
.event-btn::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

/* ==========================
   Tablet
========================== */
@media (max-width: 1024px){

  .event-section{
    padding: 60px 16px;
  }

  .event-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 480px;
  }

  .event-card{
    width: 100%;
  }

  .event-price-row.is-spacer{
    display: none;
  }

}

/* ==========================
   Smartphone
========================== */
@media (max-width: 768px){

  .event-section{
    padding: 40px 20px 15px;
  }

  .event-grid{
    gap: 40px;
    max-width: 420px;
  }

  .event-card{
    border-radius: 10px;
  }

  .event-card-img {
  border-radius: 10px 10px 0 0;
}
  
  .event-card-name{
    font-size: 16px;
    padding: 10px 16px;
    line-height: 1.4;
  }

  .event-card-body{
    padding: 10px 25px 10px;
  }

  .event-price-row{
    padding: 10px 0;
  }

  .event-label{
    font-size: 16px;
  }

  .event-label small{
    margin: 2px 0 0;
    font-size: 11px;
  }

  .event-price{
    font-size: 22px;
  }

  .event-price .yen{
    font-size: 13px;
  }

  .event-badge{
    width: 100%;
    max-width: 190px;
    font-size: 14px;
    padding: 5px 0;
    box-sizing: border-box;
  }

  .event-btn{
    width: 100%;
    height: 52px;
    padding: 0;
    border-radius: 14px;
    font-size: 17px;
  }

}

/* ==========================
   Small Smartphone
========================== */
@media (max-width: 480px){

  .event-card-name{
    font-size: 17px;
  }

  .event-label{
    font-size: 16px;
  }

  .event-price{
    font-size: 22px;
  }

  .event-price .yen{
    font-size: 13px;
  }

  .event-btn{
    font-size: 15px;
  }

}

/* ===== おすすめ体験チケット ===== */
.experience-section {
  padding: 60px 16px 60px;
}
.experience-section .section-title {
  color: white;
}
.experience-section .section-title::before,
.experience-section .section-title::after {
  background: white;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 67px;
  max-width: 1027px;
  margin: 0 auto;
  align-items: start;
  justify-items: center; 
}

.exp-card {
  position: relative;
  width: 480px;
  max-width: 100%;
  margin: 0 auto;

  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.exp-bubble {
  position: absolute;
  top: -66px;
  left: 0;
  right: 0;
  margin: 0 auto;

  width: 432px;
  max-width: calc(100% - 32px);
  text-align: center;

  background: #fff;
  border: 2px solid #324EBB;
  color: #324EBB;
  font-size: 20px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;

  box-sizing: border-box;
}
.exp-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #324EBB;
}
.exp-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6.5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #fff;
  z-index: 1;
}

.exp-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #c8e4f0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.exp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* バンジーのみ */
.exp-card--vr{
  margin-top: 50px;
}

.exp-img-bungee {
  object-position: center 90%;
}
/* ここまで　バンジーのみ */

.exp-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #324EBB;
  color: #fff;
  width: 188px;
  max-width: 100%;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  z-index: 10;
}

.exp-card-name {
  background: #324EBB;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.72px;
  text-align: center;
  padding: 10px 0;
}

.exp-card-body {
  padding: 18px 20px 20px;
}

.exp-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 25px;
  font-weight: 700;
  color: #222;
  padding: 6px 0;
}
.exp-price-val {
  font-family: "Oswald", sans-serif;
  font-size: 35px;
  font-weight: 500;
  color: #324EBB;
}
.exp-price-val .yen {
  font-size: 22px;
  font-weight: 700;
  margin-left: 2px;
}

.exp-status-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 418px;
  max-width: 100%;
  height: 74px;
  box-sizing: border-box;

  background: #8b8b8b;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border-radius: 20px;
  margin: 30px auto 20px;
}

.exp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  width: 418px;
  max-width: 100%;
  height: 74px;
  box-sizing: border-box;

  background: linear-gradient(100deg, #324EBB, #4aa8dd);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 20px;
  margin: 30px auto 20px;
}
.exp-btn::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}

.exp-note {
  max-width: 1027px;
  margin: 50px auto 0;
  box-sizing: border-box;
  text-align: left;
  color: #e60033;
  font-size: 15px;
  font-weight: 700;
}

/* ==========================
   Tablet
========================== */
@media (max-width: 1024px){

  .experience-section{
    padding: 60px 16px;
  }

  .experience-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 480px;
  }

  .exp-card{
    width: 100%;
  }

  .exp-card--vr{
    margin-top: 70px;
  }

}

/* ==========================
   Smartphone
========================== */
@media (max-width: 768px){

  .experience-section{
    padding: 40px 20px 20px;
  }

  .experience-grid{
    gap: 36px;
    max-width: 420px;
  }

  .exp-card{
    border-radius: 10px;
  }

  .exp-card-img {
  border-radius: 10px 10px 0 0;
}

  .exp-card-name{
    font-size: 16px;
    padding: 12px 0;
    line-height: 1.4;
  }

  .exp-card-body{
    padding: 10px 20px;
  }

  .exp-price-row{
    font-size: 16px;
    padding: 10px 0;
  }

  .exp-price-val{
    font-size: 22px;
  }

  .exp-price-val .yen{
    font-size: 13px;
  }

  .exp-badge{
    width: 100px;
    font-size: 14px;
    padding: 5px 12px;
  }

  .exp-bubble{
    width: 302px;
    max-width: calc(100% - 24px); /* 画面が302pxより狭い場合ははみ出さない */
    font-size: 15px;
    padding: 8px 12px;
  }

  .exp-card--vr{
    margin-top: 60px;
  }

  .exp-status-btn,
  .exp-btn{
    width: 100%;
    height: 52px;
    margin: 20px auto 24px;
    border-radius: 14px;
    font-size: 14px;
  }

  .exp-note{
    max-width: 420px;
    margin: 20px auto 0;
    font-size: 11px;
    line-height: 1.7;
  }

}

/* ==========================
   Small Smartphone
========================== */
@media (max-width: 480px){

  .exp-card-name{
    font-size: 17px;
  }

  .exp-price-row{
    font-size: 16px;
  }

  .exp-price-val{
    font-size: 24px;
  }

  .exp-price-val .yen{
    font-size: 16px;
  }

  .exp-badge{
    width: 120px;
    font-size: 15px;
  }

  .exp-bubble{
    font-size: 13px;
  }

  .exp-status-btn,
  .exp-btn{
    font-size: 15px;
    height: 56px;
  }

}

/* ==========================
   カフェセクション
========================== */

.cafe-section{
    position: relative;
    overflow: visible; /* ← hiddenではなくvisible */
    text-align: center;
    padding: 30px 0 70px;

    /* 全体背景 */
    background: url("image/osaka.png") center top / cover no-repeat;
}

.cafe-section::before{
    content: "";
    position: absolute;
    top: -130px;
    left: 0;
    width: 100%;
    height: 140px;

    background: url("image/bill.png") center top / cover no-repeat;

    z-index: 2;
}

.cafe-section > *{
    position: relative;
    z-index: 2;
}

.cafe-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    width: 1234px;      /* ← 見出し全体の固定幅。ここを揃えたい幅にする */
    max-width: 92%;
    margin: 0 auto 60px;

    font-size:40px;
    font-weight:700;
    color:#324EBB;
    letter-spacing:.08em;
}

.cafe-title .heading-line{
    flex: 1;           /* 残りのスペースを全部埋める＝文章が短いほど線が長くなる */
    height: 2px;
    background: #324EBB;
}

.cafe-title .heading-text{
    white-space: nowrap;
}

/* ==========================
   スライダー（translateXベース）
========================== */

.cafe-slider-wrap{
    position:relative;
    width:100%;
    margin:0 auto;
    height:430px;
    overflow: hidden;

    /* JSはこの変数を直接読まず、内部の設定値と同期させています。
       値を変える場合はJS側の getConfig() も合わせて変更してください。 */
    --slide-spacing: 570px;
    --slide-side-y: 23px;
}

.cafe-slider{
    position:relative;
    width:100%;
    height:100%;
}

/* ==========================
   スライド共通
   ※ position / width / height は固定。
   　 位置・大小はすべて transform(translate + scale) と opacity で制御する。
========================== */

.cafe-slide{
    position:absolute;
    left:50%;
    top:0;

    width:564px;
    height:420px;

    /* 初期値。JSがDOMContentLoaded直後に上書きする */
    transform: translate(-50%, 0) scale(1);
    opacity: 1;

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity   .55s ease;

    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ループ処理時の瞬間移動用（transitionを一時的に無効化） */
.cafe-slide.no-transition{
    transition: none !important;
}

/* ==========================
   カード
========================== */

.cafe-card{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    background:#fff;
    padding:16px;
    box-sizing:border-box;

    text-decoration:none;
    color:inherit;

    transition: transform .2s ease;
}

.cafe-card:hover{
    transform:translateY(2px);
}

.cafe-slide.is-active .cafe-card{
    box-shadow:0 3px 12px rgba(0,0,0,.10);
}

@media (hover: hover) {
  .cafe-card:hover{
      transform:translateY(3px) scale(.98);
      box-shadow:0 4px 12px rgba(0,0,0,.12);
  }
}

/* ==========================
   画像
========================== */

.cafe-card-img{
    flex:1;
    min-height:0;

    overflow:hidden;
    background:#eee;
}

.cafe-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================
   タイトル
========================== */

.cafe-card-label{
    margin-top:15px;
    color:#2453b5;
    font-size:25px;              /* ← 常に「中央（大きい方）」のサイズに固定 */
    font-weight:bold;
    line-height:1.5;
    transform-origin:center center;  /* 拡大縮小の基準点 */
    transform: scale(0.96);      /* 通常時は縮小して見せる（25px×0.96=24px） */
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

/* font-sizeの上書きではなく、scaleを1に戻すだけにする */
.cafe-slide.is-active .cafe-card-label{
    transform: scale(1);
}

/* ==========================
   矢印
========================== */

.cafe-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:57px;
    height:57px;
    border:none;
    border-radius:50%;
    background:#3554d8;
    cursor:pointer;
    z-index:100;
    transition:.3s;
}

.cafe-arrow::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:12px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
}

.cafe-arrow--next::before{
    transform:translate(-70%,-50%) rotate(45deg);
}

.cafe-arrow--prev::before{
    transform:translate(-30%,-50%) rotate(-135deg);
}

.cafe-arrow--prev{
    left:calc(50% - 340px);
}

.cafe-arrow--next{
    left:calc(50% + 283px);
}

.cafe-arrow:hover{
    background:#2542ba;
}

/* ==========================
   ボタン（下部予約ボタン）
========================== */

.cafe-bottom{
    margin-top:60px;
}

.cafe-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:418px;
    height:74px;

    border-radius:20px;
    background:#3355bb;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    text-decoration:none;

    transition:.3s;
}

.cafe-btn:hover{
    background:#2443a5;
}

.cafe-btn::after{
    content:"";
    width:10px;
    height:10px;
    margin-left:20px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:rotate(45deg);
    display:inline-block;
}

/* ==========================
   注釈
========================== */

.cafe-note{
    margin-top:35px;
    color:#FF0000;
    font-size:15px;
    font-weight:bold;
}

/* ==========================
   スマホ
========================== */
@media (max-width:768px){

  .cafe-section{
    padding:30px 0 50px;
  }

  .cafe-section::before{
    top:-45px;
    height:55px;
    background-size:cover;
  }

  .cafe-title{
    width:92%;
    font-size:17px;
    gap:10px;
    margin-bottom:35px;
  }

  .cafe-title .heading-line{
    height: 1px;
  }

  .cafe-slider-wrap{
    height:200px;
    overflow:hidden;

    --slide-spacing: 260px;
    --slide-side-y: 17px;
  }

  .cafe-slide{
    width:260px;
    height:195px;

    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity   .35s ease;
  }

  .cafe-card{
    padding:8px;
  }

  .cafe-card-label{
    margin-top:8px;
    font-size:14px;               /* ← 中央（大きい方）のサイズに固定 */
    line-height:1.4;

    transform-origin: center center;
    transform: scale(0.857);      /* 14px × 0.857 ≒ 12px */
    transition: transform .35s cubic-bezier(.4,0,.2,1);
  }

  .cafe-slide.is-active .cafe-card-label{
    transform: scale(1);
  }

  .cafe-arrow{
    width:26px;
    height:26px;
  }

  .cafe-arrow::before{
    width:4px;
    height:4px;
  }

  .cafe-arrow--prev{
    left:32px;
  }

  .cafe-arrow--next{
    left:auto;
    right:32px;
  }

  .cafe-bottom{
    margin-top:24px;
  }

  .cafe-btn{
    width:100%;
    max-width:238px;
    height:42px;
    border-radius:10px;
    font-size:14px;
  }

  .cafe-btn::after{
    margin-left:15px;
  }

  .cafe-note{
    width:90%;
    margin:12px auto 0;
    font-size:11px;
    line-height:1.6;
    text-align:center;
  }

}
/* PCでは改行しない */
.sp-br{
  display: none;
}

/* スマホだけ改行 */
@media (max-width: 768px){
  .sp-br{
    display: inline;
  }
}


/* 無料 */
.free {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 700;
}
/* スマホ */
@media (max-width: 768px) {
  .free {
    font-size: 20px; /* 好きなサイズに変更 */
  }
}

/* ==========================
   ボタン：影 + ホバー時グラデーション左右入れ替え + 押し込み効果
========================== */

.web-ticket-btn,
.event-btn,
.exp-btn,
.counter-group-btn,
.cafe-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 4px 8px rgba(50, 78, 187, 0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.web-ticket-btn::before,
.event-btn::before,
.exp-btn::before,
.counter-group-btn::before,
.cafe-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  border-radius: inherit;
  z-index: -1;
}

.web-ticket-btn:hover::before,
.event-btn:hover::before,
.exp-btn:hover::before,
.counter-group-btn:hover::before,
.cafe-btn:hover::before {
  opacity: 1;
}

.web-ticket-btn:hover,
.event-btn:hover,
.exp-btn:hover,
.counter-group-btn:hover,
.cafe-btn:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 4px rgba(50, 78, 187, 0.25);
}

.web-ticket-btn:active,
.event-btn:active,
.exp-btn:active,
.counter-group-btn:active,
.cafe-btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 2px rgba(50, 78, 187, 0.2);
}

/* WEB前売券ボタン */
.web-ticket-card.blue .web-ticket-btn::before {
  background: linear-gradient(100deg, #069CCB, #3549B9);
}

/* WEB当日券ボタン */
.web-ticket-card.teal .web-ticket-btn::before {
  background: linear-gradient(100deg, #06CBA5, #26849B);
}

/* 期間限定イベントチケットボタン */
.event-btn::before {
  background: linear-gradient(100deg, #069CCB, #324EBB);
}

/* アトラクション＆ツアーボタン */
.exp-btn::before {
  background: linear-gradient(100deg, #4aa8dd, #324EBB);
}


/* お食事プラン予約ボタン（単色→グラデーション化） */
.cafe-btn {
  background: linear-gradient(100deg, #3355bb, #2443a5);
}
.cafe-btn::before {
  background: linear-gradient(100deg, #2443a5, #3355bb);
}