@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
/* ------------------------------------------------
 vars
------------------------------------------------ */
:root {
  --nvw: 1vw;
  --ff-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --ff-display: YakuHanJP, "M PLUS 1p", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --ff-en: "Fustat", "Inter", sans-serif;
  --font-base: YakuHanJP, "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --color-black: #303030;
  --color-blue: #0265B7;
  --color-dblue: #003D62;
  --grade-lblue: linear-gradient(180deg, #EEF3F9 0%, #E4F1FA 100%);
  --drop-shadow-gray: drop-shadow(0 0 1em rgb(61, 72, 81));
  --drop-shadow-blue: drop-shadow(0 0 1.4285714286em rgba(33, 122, 170, 0.6));
}
/* ------------------------------------------------
 reset
------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  font-size: 1em;
  margin: 0;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

input, button,
textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

img {
  vertical-align: top;
}

/* -------------------------------------------------------
 base
---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  position: relative;
}
html.is-locked {
  touch-action: none;
  overflow: hidden;
}

body {
  color: var(--color-black);
  font-family: var(--ff-base);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
}

#contents {
  position: relative;
}
#contents img {
  max-width: 100%;
  height: auto;
}
#contents sup {
  font-size: 0.5em;
}
@media screen and (min-width: 770px) {
  .sp_show {
    display: none;
  }
}
@media screen and (max-width: 769.9px) {
  body .pc_show {
    display: none;
  }
  body sup {
    font-size: 8px;
  }
}
/* ------------------------------------------------
 font-size
------------------------------------------------ */
body {
  font-size: min(21.504px, 3.7333333333vw);
}

/* ------------------------------------------------
 utility
------------------------------------------------ */
.note {
  font-size: 0.7142857143em;
  font-weight: 500;
  line-height: 1.5;
}

p.note,
.note li {
  text-indent: -1em;
  padding-left: 1em;
}

.note.nums > li {
  text-indent: -2em;
  padding-left: 2em;
}

/* ------------------------------------------------
 footer
------------------------------------------------ */
.footer {
  --color-background--white: #fff;
}
.footer__wrap {
  width: 100%;
  background: var(--color-background--white);
}
.footer__wrap img {
  width: 100%;
  height: 100%;
}
.footer__wrap a {
  color: #000;
}
.footer__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: min(8.5333333333vw, 49.152px);
}
.footer__contents__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(90.4vw, 520.704px);
  margin-bottom: min(5.3333333333vw, 30.72px);
}
.footer__contents__links > li > a {
  display: block;
  width: min(28vw, 161.28px);
  height: min(7.2vw, 41.472px);
}
.footer__contents__top {
  display: flex;
  justify-content: center;
  width: min(82.1333333333vw, 473.088px);
  padding-bottom: min(3.2vw, 18.432px);
  border-bottom: 1px solid #e6e6e6;
}
.footer__contents__top > li:nth-child(1) {
  width: min(39.4666666667vw, 227.328px);
  height: min(6.6666666667vw, 38.4px);
  padding-right: min(4vw, 23.04px);
  margin-right: min(4vw, 23.04px);
  border-right: 1px solid #ccc;
}
.footer__contents__top > li:nth-child(2) {
  width: min(21.3333333333vw, 122.88px);
  height: min(5.8666666667vw, 33.792px);
}
.footer__contents__middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-black);
  font-size: min(2.6666666667vw, 15.36px);
  font-weight: 700;
  padding: min(5.3333333333vw, 30.72px) 0 min(6.4vw, 36.864px);
}
.footer__contents__middle > li:not(:last-child) {
  margin-bottom: min(2.1333333333vw, 12.288px);
}
.footer__contents__middle > li:nth-child(1) {
  color: #c00;
}
.footer__contents__middle > li > a {
  text-decoration: underline;
}
.footer__contents__btm {
  display: flex;
  justify-content: center;
  width: 100%;
  background: #eee;
}
.footer__contents__btm > p {
  padding: min(4vw, 23.04px) 0;
  font-size: min(2.6666666667vw, 15.36px);
  text-align: center;
  color: var(--color-text-black);
}
@media screen and (min-width: 768px) {
  .footer__container {
    padding-top: 49.152px;
  }
  .footer__contents__links {
    width: 520.704px;
    margin-bottom: 30.72px;
  }
  .footer__contents__links > li > a {
    width: 161.28px;
    height: 41.472px;
  }
  .footer__contents__top {
    width: 473.088px;
    padding-bottom: 18.432px;
  }
  .footer__contents__top > li:nth-child(1) {
    width: 227.328px;
    height: 38.4px;
    padding-right: 23.04px;
    margin-right: 23.04px;
  }
  .footer__contents__top > li:nth-child(2) {
    width: 122.88px;
    height: 33.792px;
  }
  .footer__contents__middle {
    font-size: 15.36px;
    padding: 30.72px 0 36.864px;
  }
  .footer__contents__middle > li:not(:last-child) {
    margin-bottom: 12.288px;
  }
  .footer__contents__btm > p {
    padding: 23.04px 0;
    font-size: 15.36px;
  }
}

/* ------------------------------------------------
 contents
------------------------------------------------ */
.footer__wrap,
.main-contents {
  background-color: #fff;
  margin: 0 auto;
  max-width: 576px;
  width: 100%;
}

@media screen and (min-width: 770px) {
  .main-contents {
    position: relative;
  }
}

/* ------------------------------------------------
 rayout
------------------------------------------------ */
.section {
  width: 100%;
  position: relative;
  z-index: 1;
  scroll-snap-align: start;
}
.section img {
  max-width: unset;
  width: 100%;
}
.section .ff_mincho {
  letter-spacing: 0.2em;
}
.section .ff_mincho .kana {
  letter-spacing: 0.05em;
}
.section [class$=__inner] {
  padding-left: 1.5714285714em;
  padding-right: 1.5714285714em;
  box-sizing: border-box;
  position: relative;
}
@media screen and (min-width: 770px) {
  .section {
    margin: 0 auto;
    width: 100%;
  }
}

/* ------------------------------------------------
 basicStyle.
------------------------------------------------ */
.message,
.wla,
.fairness,
.contribution,
.partnership,
.lottery {
  margin-top: 4.2857142857em;
}
.message__header__title,
.wla__header__title,
.fairness__header__title,
.contribution__header__title,
.partnership__header__title,
.lottery__header__title {
  color: var(--color-blue);
  font-family: var(--ff-display);
  font-size: 1.8571428571em;
  font-weight: 800;
  line-height: 1.4;
}
.message__header__lead,
.wla__header__lead,
.fairness__header__lead,
.contribution__header__lead,
.partnership__header__lead,
.lottery__header__lead {
  color: var(--color-dblue);
  line-height: 1.7;
  margin-top: 0.8571428571em;
}
.message__body,
.wla__body,
.fairness__body,
.contribution__body,
.partnership__body,
.lottery__body {
  margin-top: 2.1428571429em;
}

/* ------------------------------------------------
 左右壁（PCのみ）
------------------------------------------------ */
.hero, .wall {
  color: #fff;
}
.hero__title, .wall__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 2.4285714286em;
  letter-spacing: 0.0294117647em;
  text-align: center;
  line-height: 1.55;
  margin: 0 auto;
  filter: var(--drop-shadow-blue);
}
.hero__title .l1 .s1, .wall__title .l1 .s1 {
  letter-spacing: -0.0411764706em;
}
.hero__title .l1 .s2, .wall__title .l1 .s2 {
  letter-spacing: -0.1294117647em;
}
.hero__title .l2, .wall__title .l2 {
  display: block;
  text-indent: 0.6em;
}
.hero__title .l2 .s1, .wall__title .l2 .s1 {
  letter-spacing: -0.1em;
}
.hero__title .l2 .s2, .wall__title .l2 .s2 {
  letter-spacing: -0.0470588235em;
}
.hero__title .l2 .s3, .wall__title .l2 .s3 {
  letter-spacing: -0.0529411765em;
}
.hero__logos, .wall__logos {
  margin-top: 1.4285714286em;
  display: flex;
  justify-content: center;
  gap: 0.4285714286em;
}
.hero__logos li, .wall__logos li {
  width: 6.2142857143em;
}
.hero__logos li:nth-child(2), .wall__logos li:nth-child(2) {
  background-color: #FFD800;
  align-content: center;
}
.hero__logos li:nth-child(2) a, .wall__logos li:nth-child(2) a {
  align-content: center;
  height: 100%;
  display: block;
}
.hero .note, .wall .note {
  font-size: 0.5714285714em;
  font-weight: 500;
  margin: 3.125em 5.625em 0;
  filter: var(--drop-shadow-gray);
}

/* ----------------------------
 walls
------------------------------*/
.wall {
  font-size: min(34px, 1.0447761194vw);
  background: url(../images/bg_wrapper.webp) no-repeat;
  background-size: cover;
  width: calc(50% - 288px);
  min-height: 100vh;
  align-content: center;
  position: fixed;
  top: 0;
}
.wall__inner {
  padding: 0 !important;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
.wall__logos {
  gap: 0.4285714286em;
}
.wall__logos li {
  width: 6.8571428571em;
}
.wall .note {
  font-size: 0.5714285714em;
  margin: 3.125em auto 0;
  width: 37.1428571429em;
}
.wall.show .wall__inner {
  opacity: 1;
  pointer-events: all;
}
.wall.left {
  background-position: 0 0;
  left: 0;
}
.wall.left .wall__inner {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
}
.wall.right {
  background-position: 100% 0;
  right: 0;
}
@media screen and (max-width: 1240px) {
  .wall__inner {
    display: none;
  }
}
@media screen and (min-width: 1800px) {
  .wall .note {
    width: 36.4285714286em;
  }
}
@media screen and (min-width: 1920px) {
  .wall .note {
    width: 35.7142857143em;
  }
}

/* ------------------------------------------------
 bg
------------------------------------------------ */
.partnership {
  z-index: 0;
}
.partnership::after {
  content: "";
  background: url(../images/bg_bottom.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 750/5405;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

/* ------------------------------------------------
 hero
------------------------------------------------ */
.hero::before {
  content: "";
  background: url(../images/kv.webp) 0 0 no-repeat;
  background-size: 100% auto;
  width: 100%;
  aspect-ratio: 750/1917;
  position: absolute;
  left: 0;
  top: 0;
}
.hero__inner {
  color: #fff;
  padding: 5.2142857143em 0 0.7142857143em !important;
  position: relative;
}

/* ------------------------------------------------
 message
------------------------------------------------ */
.message {
  margin-top: 5em;
}
.message__header__title {
  color: #fff;
}
.message__header__title * {
  line-height: 1;
  display: block;
}
.message__header__title .en {
  font-family: var(--ff-en);
  font-size: 1.3076923077em;
}
.message__header__title .ja {
  font-size: 0.5384615385em;
}
.message__article {
  color: var(--color-dblue);
  border-radius: 0.5714285714em;
  background: var(--grade-lblue);
  margin-top: 1.5714285714em;
  padding: 1.4285714286em;
  display: grid;
  grid-template-columns: 1fr 7.1428571429em;
  gap: 1.4285714286em;
}
.message__profile {
  font-weight: 800;
  align-content: center;
}
.message__profile__role {
  font-size: 0.9285714286em;
}
.message__profile__name {
  font-size: 1.2857142857em;
}
.message__profile__name i {
  font-size: 0.8333333333em;
  font-style: normal;
}
.message__txt {
  grid-column: 1/span 2;
}

/* ------------------------------------------------
 wla
------------------------------------------------ */
.wla {
  margin-top: 5.7142857143em;
}

.wla__card {
  color: #fff;
  border-radius: 0.5714285714em;
  background: linear-gradient(180deg, #006EB2 35%, #0088C2 100%);
  filter: drop-shadow(0 0.2857142857em 1.0714285714em rgba(193, 203, 213, 0.1));
  padding: 2.4285714286em 1.4285714286em 1.7142857143em;
}
.wla__card a {
  color: #fff;
}
.wla__card a.arrow {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  -moz-column-gap: 0.3571428571em;
       column-gap: 0.3571428571em;
}
.wla__card a.arrow::before {
  content: "";
  background: url(../images/arrow_circle.svg) 0 0/contain no-repeat;
  margin-top: 0.1428571429em;
  width: 1.1428571429em;
  aspect-ratio: 1/1;
  display: block;
}
.wla__card__logo {
  margin: 0 auto;
  width: 17.8571428571em;
}
.wla__card__lead {
  font-size: 1.5714285714em;
  font-weight: 900;
  text-align: center;
  margin-top: 0.9090909091em;
}
.wla__card__txt {
  font-size: 0.8571428571em;
  margin-top: 1em;
}
.wla__card__txt.credentials {
  display: flex;
  align-items: center;
}
.wla__card__txt.credentials .date {
  font-size: 0.75em;
}

/* ------------------------------------------------
 fairness
------------------------------------------------ */
.fairness__card {
  border-radius: 0.5714285714em;
  background-color: #ECF4FB;
  padding: 2.1428571429em 1.4285714286em;
}
.fairness__card + .fairness__card {
  margin-top: 1.0714285714em;
}
.fairness__card__title {
  color: var(--color-blue);
  font-size: 1.5714285714em;
  font-weight: 800;
  text-align: center;
}
.fairness__card__detail {
  color: var(--color-dblue);
  letter-spacing: 0.03em;
  line-height: 1.7;
  margin-top: 0.4285714286em;
}
.fairness__card__icon {
  margin: 0 auto;
  width: 11em;
}
.fairness__card:first-child .fairness__card__icon {
  margin-bottom: 1.0714285714em;
}
.fairness__card:last-child .fairness__card__icon {
  margin-bottom: 0.6428571429em;
}

/* ------------------------------------------------
 contribution
------------------------------------------------ */
.contribution__purpose {
  display: flex;
  flex-direction: column;
  row-gap: 1.0714285714em;
}
.contribution__purpose li {
  color: #fff;
  border-radius: 0.4285714286em;
  background: linear-gradient(180deg, #087ED3 33.65%, #006CB9 100%);
  display: flex;
  overflow: hidden;
}
.contribution__purpose li:nth-child(even) {
  flex-direction: row-reverse;
}
.contribution__purpose li .img {
  width: 13.1428571429em;
}
.contribution__purpose li .txt {
  justify-content: center;
  align-self: center;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
}

/* ----------------------------
 contribution__card
------------------------------*/
.contribution__card {
  border-radius: 0.5714285714em;
  background-color: #fff;
  margin-top: 2.8571428571em;
  padding: 1.4285714286em 1.4285714286em;
}
.contribution__card + .contribution__card {
  margin-top: 1.4285714286em;
}
.contribution__card__title {
  color: var(--color-dblue);
  font-family: var(--ff-display);
  font-size: 1.1428571429em;
  font-weight: 800;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.4375em;
       column-gap: 0.4375em;
}
.contribution__card__title::before {
  content: "";
  width: 0.25em;
  height: 1.125em;
  background: linear-gradient(90deg, #2fafff 0%, #00c9f6 100%);
  display: block;
}
.contribution__card__title + .lead {
  margin-top: 0.5714285714em;
}
.contribution__card__diagram {
  margin-top: 1.5714285714em;
}
.contribution__card__diagram .note {
  font-size: 0.5714285714em;
  margin-top: 1em;
}
.contribution__card__graph {
  color: var(--color-dblue);
  background-color: #F5F5F5;
  margin-top: 0.4285714286em;
  padding-top: 0.7142857143em;
  padding-bottom: 0.7142857143em;
}
.contribution__card__graph .heading {
  color: var(--color-dblue);
  font-size: 0.7142857143em;
}
.contribution__card__graph .img {
  margin: 0 auto;
}
.contribution__card__graph.chart .heading {
  text-align: center;
}
.contribution__card__graph.chart .img {
  width: 19.8571428571em;
}
.contribution__card__graph.chart .note {
  font-size: 0.5em;
  margin-top: 0.7142857143em;
  margin-left: 2em;
}
.contribution__card__graph.cumulative {
  margin-top: 1.4285714286em;
  padding: 1.0714285714em 0.8571428571em 1.0714285714em;
}
.contribution__card__graph.cumulative .heading {
  text-align: center;
}
.contribution__card__graph.cumulative .block {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.3571428571em;
       column-gap: 0.3571428571em;
}
.contribution__card__graph.cumulative .img {
  width: 9.5714285714em;
}
.contribution__card__graph.cumulative .txt {
  flex: 1;
}
.contribution__card__graph.cumulative .txt .legend {
  font-size: 0.6428571429em;
  margin-top: 0.5em;
}
.contribution__card__graph.cumulative .txt .note {
  font-size: 0.5em;
  margin-top: 1em;
}
.contribution__card__banner {
  margin-top: 1.4285714286em;
}
.contribution__card__banner a {
  display: block;
}

/* ------------------------------------------------
 partnership
------------------------------------------------ */
.partnership {
  margin-top: 2.8571428571em;
}
.partnership__inner {
  padding-bottom: 4.2857142857em;
}
.partnership__card {
  border-radius: 0.5714285714em;
  background-color: #fff;
  padding: 2.8571428571em 0;
  display: flex;
  flex-direction: column;
  row-gap: 2.8571428571em;
  align-items: center;
}
.partnership__card + .partnership__card {
  margin-top: 1.0714285714em;
}
.partnership__card.j-league .logo:first-child {
  width: 5.7857142857em;
}
.partnership__card.j-league .logo:last-child {
  width: 16.2142857143em;
}
.partnership__card.b-league .logo:first-child {
  width: 5em;
}
.partnership__card.b-league .logo:last-child {
  width: 6.1428571429em;
}

/* ------------------------------------------------
 lottery
------------------------------------------------ */
.lottery {
  margin-top: 3.5714285714em;
}
.lottery__header__title {
  font-size: 1.5714285714em !important;
  text-align: center;
}
.lottery__body {
  display: flex;
  flex-direction: column;
  row-gap: 0.7142857143em;
}
.lottery__card {
  text-decoration: none;
  background: #F3F3F3;
  padding: 1.0714285714em 0.8571428571em;
  display: flex;
  align-items: center;
  -moz-column-gap: 1em;
       column-gap: 1em;
}
.lottery__card .img {
  width: 9.5714285714em;
  aspect-ratio: 134/97;
  align-content: center;
}
.lottery__card .txt {
  color: var(--color-dblue);
  font-size: 0.9285714286em;
  font-weight: bold;
  line-height: 1.6;
  flex: 1;
}
.lottery__card:nth-of-type(2) .img {
  background-color: #FFD800;
}

/* ------------------------------------------------
 philosophy
------------------------------------------------ */
.philosophy {
  margin-top: 3.5714285714em;
}
.philosophy__inner {
  background: url(../images/philosophy_bg.svg) 0 0/100% 100% no-repeat;
  min-height: 29.2857142857em;
  align-content: center;
}
.philosophy__txt {
  color: #fff;
  font-size: 1.1428571429em;
  font-weight: 800;
  line-height: 2.25;
  text-align: center;
}