@charset "utf-8";

@media screen and (max-width: 768px) {
  :root {
    --header-height: 13vw;
  }
  /*-------------------------------------------
  共通CSS
-------------------------------------------*/
  .wrapper {
    padding: 0 4.26666vw;
  }
  .btn {
    height: 8.53333vw;
    gap: 1.33333vw;
    /* padding: 1.33333vw 2.13333vw 1.33333vw 3.2vw; */
    font-size: 4vw;
  }
  /* ボタンの●背景 */
  .btn__icon {
    width: 4.26666vw;
    height: 4.26666vw;
    right: 2.1333333vw;
  }
  /* ボタンの▶ */
  .btn__icon::after {
    border-top: 0.8vw solid transparent;
    border-bottom: 0.8vw solid transparent;
    border-left: 1.33333vw solid #123f75;
  }
  /* ヘッダー、メインビジュアルのボタン */
  .btn--yellow .btn__icon::after {
    border-left: 1.33333333vw solid #fccf00;
  }
  .br-sp {
    display: block;
  }
  .br-pc {
    display: none;
  }

  .btn__text {
    white-space: nowrap;
   }
  /*-------------------------------------------
  ヘッダー
-------------------------------------------*/
  .header {
    height: var(--header-height);
    padding: 0 2.66667vw;
  }
  .header__logo {
    width: 42.66667vw;
  }
  .header__nav-pc {
    display: none;
  }
  .header .btn {
    display: none;
  }
  /* SPナビゲーション */
  .header__menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 8vw;
    height: 2.93333vw;
    gap: 1.06667vw;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .header__menu-btn.is-open {
    width: 8vw;
    height: 8vw;
    gap: 0;
    border-radius: 50%;
    background-color: #fff;
  }
  .header__menu-btn span {
    display: block;
    width: 7vw;
    height: 0.26667vw;
    border-radius: 999px;
    background-color: #fff;
    transition:
      transform 0.3s,
      opacity 0.3s;
  }
  .header__menu-btn.is-open span {
    width: 2.66667vw;
    background-color: #6c9bd2;
  }
  .header__menu-btn.is-open span:nth-child(1) {
    transform: translateY(0.26667vw) rotate(45deg);
  }
  .header__menu-btn.is-open span:nth-child(2) {
    opacity: 0;
  }
  .header__menu-btn.is-open span:nth-child(3) {
    transform: translateY(-0.26667vw) rotate(-45deg);
  }
  .sp-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 8.66666666666666666vw;
    z-index: 90;
    overflow-y: auto;
    background-color: #6c9bd2;
  }
  .sp-nav-overlay.is-open {
    display: block;
  }
  .sp-nav__body {
    padding: 16vw 9.33333vw;
  }
  .sp-nav__heading {
    font-size: 6.93333vw;
    line-height: 1;
    font-weight: 700;
    color: #123f75;
    margin-bottom: 12vw;
  }
  .sp-nav__item {
    border-bottom: 2px solid #123f75;
  }
  .sp-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5.33333vw 2.66667vw 1.33333vw 2.66667vw;
    font-size: 3.73333vw;
    width: 100%;
    color: #fff;
    font-weight: 700;
  }
  .sp-nav__icon {
    position: relative;
    flex-shrink: 0;
    width: 4.26667vw;
    height: 4.26667vw;
    border-radius: 50%;
    background-color: #fff;
  }
  .sp-nav__icon::after {
    content: "";
    position: absolute;
    left: 55%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-top: 0.86667vw solid transparent;
    border-bottom: 0.86667vw solid transparent;
    border-left: 1.33333vw solid #6c9bd2;
  }
  /*-------------------------------------------
  メインビジュアル
-------------------------------------------*/
  .mainvisual {
    margin-top: 13vw;
  }
  .mainvisual .btn {
    justify-content: center;
    width: 92.44791666vw;
    height: 11vw;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    transform: translateY(50%);
    border: 0.4vw solid #6c9bd2;
  }
  /*-------------------------------------------
  リード文
-------------------------------------------*/
  .lead {
    padding: 8vw 0 8vw;
  }
  .lead__title {
    font-size: 6vw;
    padding-bottom: 2.13333vw;
    border-bottom: 0.26667vw solid #123f75;
  }
  .lead__description {
    margin-top: 2.66667vw;
    font-size: 3vw;
  }
  .lead__memo {
    font-size: 2.6vw;
    margin-top: 1.33333vw;
  }
  .lead__btns {
    gap: 2.66667vw;
    margin-top: 5.33333vw;
  }
  .lead__btns .btn {
    width: 47vw;
    padding-left: 3.46667vw;
    padding-right: 7vw;
  }

  /*-------------------------------------------
  セクション共通
-------------------------------------------*/
  .section {
    padding: 4vw 0 8vw;
  }
  .section__number {
    font-size: 14vw;
  }
  .section__content {
    margin-top: 2.666666666vw;
  }
  .section__lead {
    font-size: 3vw;
  }
  .section__titles {
    gap: 4vw;
    border-bottom: 0.26667vw solid #123f75;
    padding-bottom: 2.4vw;
  }
  .section__title {
    font-size: 6vw;
    line-height: 1.1;
  }
  /*-------------------------------------------
  sec01 Swiper
-------------------------------------------*/
  .section01__swiper {
    /* overflow: hidden; */
  }
  .section01__cards {
    align-items: stretch;
    gap: 0;
  }
  .section01__card.swiper-slide {
    flex: 0 0 auto;
    height: auto;
  }
  /*-------------------------------------------
  sec01シーズンチケット3つのお得ポイント!
-------------------------------------------*/
  .section01 .section__titles-logo {
    width: 20vw;
    bottom: -2vw;
    right: 0;
  }
  .section01__card {
    border-radius: 2.66667vw;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
  }
  .section01__card-img {
  aspect-ratio: 588 / 220;
}
  .section01__card-icon {
    position: absolute;
    top: 1.6vw;
    left: 1.6vw;
    width: 8.26667vw;
    height: 8.26667vw;
  }
  .section01__card-body {
    padding: 2.66667vw;
  }
  .section01__card-title {
    font-size: 4.8vw;
  }
  .section01__card-title::before {
    left: -2.13333vw;
    width: 1.06667vw;
  }
  .section01__card-lead {
    font-size: 3.4vw;
    margin-top: 1.33333vw;
  }
  .section01__card-desc {
    margin-top: 1.33333vw;
    font-size: 3vw;
  }
  .section01__card .btn {
    width: 72vw;
    margin-top: 1.33333vw;
    justify-content: center;
  }

  /*-------------------------------------------
  sec02購入特典一覧
-------------------------------------------*/
  .section02 .section__titles-logo {
    width: 18vw;
    bottom: -2.13333vw;
    right: 1.2vw;
  }
  .section02__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.13333vw;
    margin-top: 2.66667vw;
  }
  .section02__card {
    border-radius: 2.66667vw;
    border-top-left-radius: 0;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
  }
  .section02__card-img {
    min-height: auto;
    height: 28vw;
  }
  .section02__card-img--1 img {
    width: 14.93333vw;
  }
  .section02__card-img--2 img {
    width: 22.4vw;
  }
  .section02__card-img--3 img {
    width: 17.6vw;
  }
  .section02__card-img--4 img {
    width: 25.86667vw;
  }
  .section02__card-img--5 img {
    width: 13.46667vw;
  }
  .section02__card-img--6 img {
    width: 12vw;
  }
  .section02__card-img--7 img {
    width: 13.06667vw;
  }
  .section02__card-img--8 img {
    width: 14.13333vw;
  }
  .section02__card-img--9 img {
    width: 12.93333vw;
  }
  .section02__card-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.33333vw;
    height: 5.33333vw;
    background: #123f75;
    color: #fff;
    font-size: 2.66667vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section02__card-body {
    padding: 2.66667vw;
    min-height: auto;
  }
  .section02__card-title {
    font-size: 4.3vw;
  }
  .section02__card-title::before {
    left: -2.66667vw;
    width: 1.06667vw;
  }
  .section02__card-desc {
    margin-top: 1.33333vw;
    font-size: 3vw;
  }
  .section02 .btn {
    margin: 5.33333vw auto 0;
    width: 72vw;
  }
  /*-------------------------------------------
  sec03 座種・価格情報
-------------------------------------------*/

  .section03 .section__titles-logo {
    width: 24.26667vw;
    bottom: 3.46667vw;
    right: 0.93333vw;
  }
  .section03__sub-title {
    font-size: 5.2vw;
    padding-left: 3.2vw;
  }
  .section03__sub-title::before {
    width: 1.06667vw;
  }
  .section03__map-header .btn {
    margin: 2.66667vw auto 0;
    width: 72vw;
    justify-content: center;
    padding-left: 3.46667vw;
  }
  /* シーズンシート座席図 */
  .section03__map-header {
    margin-top: 2.66667vw;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
  }
  .section03__map-img {
    margin-top: 2.66667vw;
    padding: 2.66667vw;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
    border-radius: 2.66667vw;
  }
  .section03__map-note {
    font-size: 1.33333vw;
    margin-top: 2.66667vw;
  }
  /* 各シート一覧 */
  .section03__seats {
    margin-top: 4vw;
  }
  .section03__seats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.33333vw;
  }
  .section03__seats-header-text {
    font-size: 3vw;
  }
  .section03__seats-cards {
    margin-top: 2.66667vw;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
  .section03__seat-card {
    border-radius: 2.66667vw;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
  }
  .section03__seat-card-head {
    padding: 1.33333vw 2.66667vw;
  }
  .section03__seat-card-name {
    font-size: 3.5vw;
  }

  .section03__seat-card-name.--border:before{
  -webkit-text-stroke: 3px #0075c2;
}

  .section03__seat-card-body {
    padding: 2.13333vw 2.66667vw;
  }
  .section03__seat-card-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.06667vw;
  }
  .section03__seat-card-price {
    border-radius: 3.2vw;
    padding: 1.06667vw;
  }
  .section03__seat-card-price-label {
    font-size: 3vw;
  }
  .section03__seat-card-price-value {
    font-size: 4vw;
  }
  .section03__seat-card-btn {
    margin-top: 2vw;
    border: 0.26667vw solid #000;
    padding: 0;
    height: 6.4vw;
    font-size: 3.4vw;
  }
  .section03__seat-card-btn .btn__icon  {
    width: 3.2vw;
    height: 3.2vw;

  }
  .section03__seat-card-btn .btn__icon::after {
    width: 1.5vw;
    height: 1.5vw;

    background:
      linear-gradient(currentColor, currentColor) center / 100% 0.26667vw
        no-repeat,
      linear-gradient(currentColor, currentColor) center / 0.26667vw 100%
        no-repeat;
  }
  /*-------------------------------------------
  シート詳細モーダル
-------------------------------------------*/
  .seat-modal {
    border-radius: 2.66667vw;
  }
  .seat-modal__header {
    padding: 4vw 2.66667vw;
    gap: 2.13333vw;
  }
  .seat-modal__title {
    font-size: 4.8vw;
  }
  .seat-modal__close {
    width: 4.8vw;
    height: 4.8vw;
    font-size: 2.66667vw;
  }
  .seat-modal__body {
    padding: 2.66667vw;
  }
  .seat-modal__prices {
    /* flex-direction: column; */
    gap: 1vw;
  }
  .seat-modal__prices.--quarter .seat-modal__price-box{
    flex: none;
    width: 100%;
  }

  .seat-modal__prices.--quarter .seat-modal__price-label,
  .seat-modal__price-box.--half .seat-modal__price-label{
    font-size: clamp(1.23333rem, calc(12 / 1400 * 100vw), 2rem);
  }
  .seat-modal__price-box.--half02 .seat-modal__price-label{
    font-size: clamp(1.1rem, calc(12 / 1400 * 100vw), 2rem);
  }
  .seat-modal__price-box {
    border-radius: 2.66667vw;
    padding: 2vw;
    width: 100%;
  }

  .seat-modal__price-box.--half,
  .seat-modal__price-box.--half02{
    width: 49%;
  }
  .seat-modal__price-label {
    font-size: 2.4vw;
  }
  .seat-modal__price-value {
    margin-top: 0.66667vw;
    font-size: 4.26667vw;
  }
  .seat-modal__desc {
    margin-top: 2.66667vw;
    border-left: 1.06667vw solid #123f75;
    padding-left: 3.2vw;
  }
  .seat-modal__desc-title {
    font-size: 3.4vw;
  }
  .seat-modal__desc-body {
    font-size: 2.8vw;
    margin-top: 2.66666666666666vw;
  }
  /*-------------------------------------------
  sec04販売スケジュール
-------------------------------------------*/
  .section04 .section__titles-logo {
    width: 17.06666666666666vw;
    bottom: 0.8vw;
    right: 2.2666666666666vw;
  }
  .section04__cards {
    margin-top: 2.66667vw;
    display: flex;
    flex-direction: column;
    gap: 2.66667vw;
  }
  .section04__card {
    border-radius: 0 2.66667vw 2.66667vw 2.66667vw;
    padding: 6.66667vw 1.6vw 2.66667vw;
    box-shadow: 0.53333vw 0.53333vw 0.53333vw rgba(0, 0, 0, 0.5);
  }
  .section04__card--new {
    border: 0.4vw solid #123f75;
  }
  .section04__card--new::before {
    top: -1.33333vw;
    width: 8.26667vw;
    height: 8.26667vw;
    font-size: 3.2vw;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
  }
  .section04__card-phase {
    font-size: 2.13333vw;
    padding: 1.33333vw;
  }
  .section04__card-title {
    padding-left: 2vw;
    margin-top: 1.33333vw;
    font-size: 4.8vw;
  }
  .section04__card-title::before {
    left: -1.6vw;
    width: 1.06667vw;
  }
  .section04__card-date {
    margin-top: 2vw;
    border-radius: 1.33333vw;
    padding: 1.33333vw 2vw;
  }
  .section04__card-detail {
    margin-top: 2.13333vw;
  }
  .section04__card-date-label,
  .section04__card-detail-label {
    font-size: 3vw;
  }
  .section04__card-date-value {
    font-size: 4vw;
  }
  .section04__card-detail-value {
    font-size: 4vw;
    margin-top: 0.66667vw;
  }
  .section04__notes {
    margin-top: 1.33333vw;
  }
  .section04__note {
    font-size: 3vw;
  }
  /*-------------------------------------------
  sec05お申し込み方法
-------------------------------------------*/
  .section05 .section__titles-logo {
    width: 20vw;
    bottom: 1.86667vw;
    right: 0;
  }
  .section05__steps {
    gap: 1.6vw;
  }
  .section05__step {
    border-radius: 1.6vw;
    padding: 2.66667vw 1.86667vw;
    gap: 2.66667vw;
    box-shadow: 0.53333vw 0.53333vw 0.53333vw rgba(0, 0, 0, 0.5);
  }
  .section05__step-number {
    font-size: 7.46667vw;
  }
  .section05__step-title {
    font-size: 4vw;
  }
  .section05__step-desc {
    font-size: 3vw;
  }
  .section05__info {
    gap: 1.6vw;
    margin-top: 4vw;
  }
  .section05__info-card {
    border: 0.26667vw solid #6c9bd2;
    border-radius: 2.66667vw;
    padding: 1.33333vw 2vw;
    gap: 2vw;
  }
  .section05__info-icon {
    width: 6.66667vw;
  }
  .section05__info-texts {
    font-size: 4.3vw;
  }
  .section05__info-desc {
    font-size: 2.4vw;
  }
  .section05__cta {
    margin-top: 4vw;
  }
  .section05__cta .btn {
    width: 72vw;
  }
  .section05__note{
    font-size: 3vw;
  }
  /*-------------------------------------------
  sec06観戦をもっと自由にするサービス
-------------------------------------------*/
  .section06 .section__titles-logo {
    width: 18vw;
    bottom: -1vw;
    right: -2.73333vw;
  }
  .section06__cards {
    margin-top: 5.33333vw;
    display: flex;
    flex-direction: column;
    gap: 2.66667vw;
  }
  .section06__card {
    position: relative;
    border-radius: 2.66667vw;
    padding: 2.66667vw 3.2vw;
    box-shadow: 0.93333vw 0.93333vw 0.93333vw rgba(0, 0, 0, 0.5);
  }
  .section06__card-header {
    gap: 1.33333vw;
  }
  .section06__card-icon img {
    width: 5.6vw;
  }
  .section06__card-title {
    font-size: 6vw;
  }
  .section06__card-desc {
    margin-top: 1.33333vw;
    font-size: 3vw;
  }
  .section06__card-badge {
    font-size: 3vw;
    padding: 0.4vw;
    position: absolute;
    right: 12vw;
    top: 3.4vw;
    width: 18.06667vw;
    height: 6.26667vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section06_card-desc__flex {
    font-size: 3vw;
    gap: 0;
  }
  .section06__card-img {
    min-height: 51.2vw;
    height: auto;
    margin-top: 2.66667vw;
    border-radius: 2.66667vw;
    padding: 2.66667vw;
  }
  .section06__card-img--1 img {
    width: 77.73333vw;
  }
  .section06__card-img--2 img {
    width: 79.46667vw;
  }
  .section06__card-img--3 img {
    width: 78.8vw;
  }
  .section06__btn {
    width: 72vw !important;
    margin: 2.66667vw auto 0;
  }
  .section06__btn--hidden {
    display: none;
  }
  /*-------------------------------------------
  サービス詳細モーダル（sec06）
-------------------------------------------*/
  .service-modal {
    /* width: 100%; */
    width: 93.6vw;
    border-radius: 2.66667vw;
    padding: 2.66667vw;
    box-shadow: 1.86667vw 1.86667vw 1.86667vw rgba(0, 0, 0, 0.5);
  }
  .service-modal__close {
    position: absolute;
    top: 1.6vw;
    right: 1.6vw;
    width: 4.8vw;
    height: 4.8vw;
    font-size: 2.4vw;
  }
  .service-modal__header {
    gap: 1.6vw;
  }
  .service-modal__header-icon {
    width: 4.8vw;
    height: 4.8vw;
  }
  .service-modal__title {
    font-size: 5.4vw;
  }
  .service-modal__img-wrap {
    min-height: 51.06667vw;
    max-width: 100%;
    margin-top: 4vw;
    border-radius: 2.66667vw;
    padding: 2.66667vw;
    height: auto;
  }
  .service-modal__body {
    margin-top: 4vw;
  }
  .service-modal__summary {
    border-left: 1.06667vw solid #123f75;
    padding-left: 2.13333vw;
  }
  .service-modal__summary-title {
    font-size: 4vw;
  }
  .service-modal__summary-text {
    font-size: 3vw;
    line-height: 1.5;
    margin-top: 2.13333vw;
  }
  .service-modal__points {
    margin-top: 2.13333vw;
    /* display: flex; */
    display: none;
    flex-direction: column;
    gap: 2.66667vw;
  }
  .service-modal__point {
    background: #deeaf7;
    border-radius: 2.66667vw;
    padding: 2.66667vw;
  }
  .service-modal__point-label {
    font-size: 2.4vw;
  }
  .service-modal__point-title {
    font-size: 3.2vw;
    margin-top: 1.33333vw;
  }
  /*-------------------------------------------
  sec07 よくあるご質問
-------------------------------------------*/
.section.section07 {
padding: 6.6666666666666vw 0 12vw;
}
  .section07 .section__titles-logo {
    width: 20.13333vw;
    bottom: -2.66667vw;
    right: 0.26667vw;
  }
  .section07__faq-list {
    gap: 2vw;
  }
  .section07__faq-item {
    border-radius: 1.33333vw;
  }
  .section07__faq-question {
    gap: 2.66667vw;
    padding: 1.6vw 2.4vw;
  }
  .section07__faq-question::after {
    right: 3.2vw;
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
    border-top: 2vw solid #fff;
  }
  .section07__faq-q-label {
    font-size: 5.6vw;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
  }
  .section07__faq-q-text {
    font-size: 3.2vw;
  }
  .section07__faq-answer {
    gap: 2.66667vw;
    padding: 1.6vw 2.4vw;
  }
  .section07__faq-a-label {
    font-size: 6.4vw;
  }
  .section07__faq-answer p {
    font-size: 3vw;
  }
  /*-------------------------------------------
  フッター
-------------------------------------------*/
  .footer {
    padding: 5.33333vw 0 13vw;
  }
  .footer__texts {
    margin-top: 5.33333vw;
  }
  .footer__title {
    font-size: 3.4vw;
  }
  .footer__desc {
    font-size: 3vw;
  }
  .footer__logo {
    width: 33.33333vw;
  }
  .footer__phone {
    margin-top: 1.33333vw;
    font-size: 7.2vw;
  }
  .footer__hours {
    margin-top: 1.33333vw;
    font-size: 1.33333vw;
  }

  .btn--fixed{
    right: 0!important;
    left: 0!important;
    bottom: calc(30/375*100vw)!important;
    margin: 0 auto!important;
  }

  .service-modal__note li{
    font-size: calc(10/375*100vw);
  }
  
  .service-modal__note li:nth-child(1){
    margin-top: calc(10/375*100vw);
  }
}