html,
  body {
      overflow-x: hidden;
      width: 100%;
  }

  /* ==================================================
       変数
    ================================================== */
  :root {
      --color-his-blue: #10069f;
      --color-red: #DF0D00;
      --color-txt: #2c2a29;
      --color-blue: #3064D5;
  }

  /*設定上書き*/
  .ui-static-heading-subtitle {
      font-size: 18px;
  }

  .ui-static-heading.txt-color-his {
      color: var(--color-his-blue);
  }

  .ui-static-heading-subtitle {
      color: #2c2a29;
  }

  /*設定上書き終了*/
  .ui-static-text-huge {
      font-size: 1.25rem;
      line-height: 32px;
  }

  .ui-static-icon-size-huge {
      font-size: 48px;
  }

  .box-shadow {
      box-shadow: 0px 0px 4px #575757;
      border-radius: 4px;
  }

  .gradient-text {
      background: linear-gradient(140deg, var(--color-soccer-orange) 0% 33.3%, var(--color-soccer-blue) 33.3% 66.6%, var(--color-soccer-orange) 66.6% 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .ui-static-heading-underline::after {
      background: linear-gradient(140deg, var(--color-soccer-orange) 0% 50%, var(--color-soccer-blue) 50% 0%);
  }

  .catch01 {
      font-size: 125%;
  }

  .catch02 {
      font-size: 200%;
      padding-top: 100px;
  }

  .catch03 {
      font-size: 100%;
      display: inline-block;
  }


  .button-huge {
      font-size: 24px;
      line-height: 1;
      min-width: 500px;
      padding-top: 32px;
      padding-bottom: 32px;
  }

  .lp-wrap {
      padding: 20px 0px;
  }

  .inner-wrapper-width {
      padding-right: 20px;
      padding-left: 20px;
      margin: 0 auto !important;
      max-width: 1104px;
  }

  .disnon-pc {}

  .disnon-sp {
      display: none;
  }

  .wrap-bg {
      padding: 6rem 0px;
  }

  .bg-his-blue {
      background: var(--color-his-blue);
      background: linear-gradient(to bottom, #1c428b 0%, transparent 100%), url(/soccer/premier_schedule/assets/images/about_img02.jpg) center / cover no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
  }

  .txt-color-white {
      color: #fff !important;
  }

  .red-waku {
      color: #fff;
      padding: 0px 8px;
      line-height: 1;
      background: var(--color-red);
      border-radius: 4px;
  }

  .width-100 {
      width: 100%;
  }

  .newsletter {
      background: var(--ui-static-gray-30);
  }

  .newsletter .waku.mail {
      padding: 24px;
      width: 70%;
      margin: auto;
      position: relative;
      background: linear-gradient(45deg, #034490, #059acf);
  }

  .newsletter .waku.mail .ui-static-icon {
      right: 24px;
  }

  .newsletter .waku.club {
      background: #fff;
      padding: 60px;
      border-radius: 8px;
  }

  .newsletter .waku.club .img-soccer {
      width: 50%;
      margin: auto;

  }

  .newsletter .mail .ui-static-item-card {
      align-items: center;
  }

  .newsletter .mail .ui-static-item-card-horizontal-sm {
      grid-template-columns: 1fr 20px;

  }

  .newsletter .mail .icon {
      text-align: center;
      line-height: 1;
      padding-right: 8px;
  }

  .newsletter .mail .ui-static-item-card .mail-txt {
      font-size: 28px;
      padding-left: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .disnon-pc {
      display: none;
  }

  .disnon-sp {
      display: block;
  }

  .lp-wrap {
      padding: 60px 0px;
  }

  .inner-wrapper-width {
      max-width: 1104px;
      margin: 0 auto !important;
  }

  /*特典エリア*/

  .tokuten-section .ui-static-item-card {
      grid-template-rows: subgrid;
      grid-row: span 2;
  }

  .discount .icon-pont span {
      padding: 8px;
      font-size: 20px;
      line-height: 1;
      background: var(--color-soccer-yellow);
      color: #0092BF;
      margin-right: 8px;
      display: inline-block;
      font-weight: bold;
  }

  /*対戦エリア*/
  .matches .ui-static-item-card-horizontal {
      grid-template-columns: .5fr 1fr;
  }

  /*スケジュールエリア*/
  .schedule-table td a {
      display: block;
      margin-bottom: 6px;
      color: #2563eb;
      text-decoration: underline;
  }

  .schedule-table th.date,
  .schedule-table th.match {
      white-space: nowrap;
  }


  .schedule-table.ui-static-table.ui-static-table-scrollable-xl .ui-static-table-table-wrapper {
      width: 100%;
  }

  .schedule-table.ui-static-table.ui-static-table-scrollable-xl {
      overflow-x: inherit;
      padding: 4px;
  }

  .schedule-table .point-red {
      background: var(--color-red);
      color: #fff;
  }

  .schedule-table .point-blue {
      background: var(--color-blue);
      color: #fff;
  }

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

      .lp-wrap {
          padding: 40px 0px;
      }

      .inner-wrapper-width {
          padding-right: 48px;
          padding-left: 48px;
          margin: 0 auto !important;
          max-width: 100%;
      }

      .layout-d .ui-static-item-card-horizontal {
          display: grid;
          grid-template-columns: 1fr;

      }

      .layout-d .ui-static-item-card-horizontal-reverse {
          display: grid;
          grid-template-columns: 1fr;
      }

  }

  @media screen and (max-width: 768px) {
      .button-huge {
          font-size: 16px;
          line-height: 1;
          padding: 12px 16px 14px;
          height: 44px;
          min-width: inherit;
          width: 100%;
      }

      .lp-wrap {
          padding: 40px 0px;
      }

      .inner-wrapper-width {
          padding-right: 20px;
          padding-left: 20px;
          margin: 0 auto !important;
          width: 100%;
      }

      .disnon-pc {
          display: block !important;
      }

      .disnon-sp {
          display: none !important;
      }

      .button-100 {
          width: 100%;
      }
  .ui-static-text-huge {
      font-size: 1.125rem;
  }
      .ui-static-icon-size-huge {
          font-size: 36px;
      }

      .reason-section .layout-m .ui-static-item-card-details {
          width: 100%;
      }

      .schedule-table.ui-static-table.ui-static-table-scrollable-xl .ui-static-table-table-wrapper {
          width: 200%;
      }

      .schedule-table.ui-static-table.ui-static-table-scrollable-xl {
          overflow-x: scroll;
          padding: 4px;
      }

      .newsletter .waku.mail {
          width: 100%;
      }

      .newsletter .waku.mail .ui-static-icon {
          right: 16px;
      }

      .newsletter .mail .ui-static-item-card .mail-txt {
          font-size: 20px;
      }

      .ui-static-item-card-buttons .ui-static-button {
          width: 100%;
      }

      .newsletter .waku.mail {
          padding: 16px;
      }

      .newsletter .waku.club {
          padding: 32px;
      }

  }


  .js-inview {
      transition: opacity var(--trd-duration) var(--trd-timing), transform var(--trd-duration) var(--trd-timing);
  }

  .js-inview.is-inview-fade {
      opacity: 0;
  }

  .js-inview.is-inview-up {
      transform: translateY(8%);
  }

  .js-inview.is-inview-down {
      transform: translateY(-8%);
  }

  .js-inview.is-inview-right {
      transform: translateX(8%);
  }

  .js-inview.is-inview-left {
      transform: translateX(-8%);
  }

  .js-inview.is-active {
      opacity: 1;
      transform: translate(0, 0);
  }