@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");
main {
  overflow: unset;
  overflow-x: clip;
}

.page-beyond {
  font-weight: 900;
  letter-spacing: 0;
}

.yellow-title {
  width: fit-content;
  box-sizing: border-box;
  padding: 0.15em 0;
  background-color: #ebff00;
  color: #1300ff;
  font-size: clamp(4rem, 10vw, 14.3rem);
  font-weight: 900;
  font-family: "Lato", sans-serif;
  font-style: italic;
  line-height: 100%;
  text-transform: uppercase;
}

dl.flex-table dt,
dl.flex-table dd {
  font-size: clamp(1.6rem, 2vw, 2rem);
  letter-spacing: 0;
}
dl.flex-table dt {
  padding: 1em 0 0;
}
dl.flex-table dd {
  padding: 0 0 1em;
}
@media screen and (min-width: 651px) {
  dl.flex-table dt,
dl.flex-table dd {
    padding: 1.25em 0;
  }
  dl.flex-table .table-row dt {
    width: 23%;
    padding-right: 0;
  }
  dl.flex-table .table-row dt.full {
    width: 100%;
  }
}

section.beyond-title {
  gap: clamp(4rem, 5vw, 8rem);
  padding-top: clamp(10rem, 12vw, 18rem);
  background: url(../img/beyond/deco-yellow-1.svg) top left no-repeat;
  background-size: 78%;
  margin-bottom: clamp(8rem, 10vw, 12rem);
}
section.beyond-title h1 {
  width: 79.2%;
}
section.beyond-title h1 picture,
section.beyond-title h1 img {
  width: 100%;
  max-width: clamp(32rem, 50vw, 90rem);
}
section.beyond-title h1 .uptitle {
  font-size: 2rem;
  line-height: 300%;
}
section.beyond-title h1 .uptitle:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 2px;
  background-color: #121212;
  margin-right: 5px;
  vertical-align: middle;
}
section.beyond-title .content-container {
  gap: 2.25em;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 250%;
}

section.by-purpose {
  padding-top: 6rem;
  background: url(../img/beyond/deco-yellow-2.svg) top no-repeat;
  background-size: cover;
  margin-bottom: clamp(6rem, 7vw, 10rem);
}
section.by-purpose .content-container {
  width: 96%;
  max-width: 172rem;
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  row-gap: 4rem;
}
section.by-purpose .left-col {
  grid-column: 1/3;
  grid-row: 1/2;
  width: 100%;
  max-width: 75.5rem;
}
section.by-purpose .left-col h2,
section.by-purpose .left-col img {
  width: 100%;
}
section.by-purpose .right-col {
  grid-column: 2/3;
  grid-row: 2/3;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2rem;
}
section.by-purpose .beyond-borders {
  grid-column: 1/2;
  grid-row: 2/3;
  width: 100%;
  max-width: 70rem;
  margin: auto auto 0;
}
section.by-purpose ul,
section.by-purpose li,
section.by-purpose li .eng {
  display: flex;
  flex-direction: column;
  width: 100%;
}
section.by-purpose ul {
  gap: 6rem;
  font-size: clamp(1.4rem, 1.33em, 1.6rem);
}
section.by-purpose ul li {
  gap: clamp(1.6rem, 2.5vw, 3rem);
}
section.by-purpose ul li p {
  line-height: 200%;
}
section.by-purpose ul li .title .eng {
  font-size: clamp(1.5em, 4vw, 5rem);
  font-family: "Lato", sans-serif;
  line-height: 100%;
  gap: 0.2em;
  margin-bottom: 0.2em;
}
section.by-purpose ul li .title .eng:after {
  content: "";
  display: block;
  width: 80%;
  max-width: 24rem;
  height: 2px;
  background-color: #121212;
}
section.by-purpose ul li .title .jp {
  font-size: clamp(1.2em, 2vw, 2.5rem);
}
section.by-purpose .seatle-img,
section.by-purpose .seatle-img picture,
section.by-purpose .seatle-img img {
  width: 100%;
}
@media screen and (min-width: 1001px) {
  section.by-purpose {
    background-size: contain;
  }
  section.by-purpose .content-container {
    column-gap: clamp(4rem, 5vw, 8rem);
    row-gap: 0;
    width: 89.5%;
    grid-template-columns: clamp(10rem, 40%, 75.5rem) 1fr;
    grid-template-rows: auto 1fr;
  }
  section.by-purpose .right-col {
    padding-right: 0;
    grid-row: 1/3;
  }
  section.by-purpose .left-col {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.by-purpose .beyond-borders {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0 auto auto 25%;
  }
}

section.by-concept,
section.by-schedule {
  width: 100%;
  max-width: 100%;
  gap: clamp(4rem, 5vw, 7rem);
}
section.by-concept .content-wrapper,
section.by-schedule .content-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr clamp(10rem, 84.6vw, 120rem) 1fr;
  grid-template-rows: auto;
}
section.by-concept .content-wrapper .content-container,
section.by-schedule .content-wrapper .content-container {
  display: flex;
  flex-direction: column;
  grid-column: 2/3;
  gap: clamp(4rem, 5vw, 6rem);
}
section.by-concept .content-wrapper .moon,
section.by-schedule .content-wrapper .moon {
  display: none;
  width: 84%;
  max-width: 36rem;
}
section.by-concept .content-wrapper .moon-left,
section.by-schedule .content-wrapper .moon-left {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: auto auto auto 0;
}
section.by-concept .content-wrapper .moon-right,
section.by-schedule .content-wrapper .moon-right {
  grid-column: 3/4;
  grid-row: 1/2;
  margin: auto 0 auto auto;
}
section.by-concept .point-container,
section.by-schedule .point-container {
  margin-top: clamp(6rem, 13.33vw, 16rem);
}
@media screen and (min-width: 1201px) {
  section.by-concept .content-wrapper .moon,
section.by-schedule .content-wrapper .moon {
    display: block;
  }
}

section.by-concept {
  margin-bottom: clamp(4rem, 7vw, 10rem);
}
section.by-concept .concept-text {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.6rem, 2vw, 2rem);
  gap: 1em;
  max-width: 80rem;
}
section.by-concept .circle-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  gap: 5rem;
  padding-bottom: 4rem;
}
section.by-concept .circle-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1/1;
}
section.by-concept .circle-container .label-wrapper {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 10rem;
  justify-content: center;
}
section.by-concept .circle-container .label-wrapper span.blue:nth-child(even) {
  margin-top: -0.1em;
  z-index: 2;
}
section.by-concept .circle-container .label-wrapper.twist span.blue:nth-child(even) {
  align-self: flex-end;
}
section.by-concept .circle-container span,
section.by-concept .circle-container h3,
section.by-concept .circle-container p {
  position: relative;
  z-index: 10;
}
section.by-concept .circle-container span.blue {
  position: relative;
  z-index: 10;
  align-self: flex-start;
  color: #ffffff;
  background-color: #1300ff;
  width: fit-content;
  padding: 0.1em 0.2em;
  border-radius: 1rem;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 4.4rem;
  letter-spacing: 0;
  line-height: 100%;
}
section.by-concept .circle-container h3,
section.by-concept .circle-container p {
  align-self: flex-start;
  padding-left: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 180%;
}
section.by-concept .circle-container h3 {
  font-size: clamp(2rem, 1.5vw, 2.5rem);
  margin-bottom: 0.5em;
}
section.by-concept .circle-container p {
  font-weight: 700;
}
section.by-concept .circle-container .circle {
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: clamp(24rem, 92vw, 40rem);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #1300ff;
}
@media screen and (min-width: 651px) {
  section.by-concept .circle-wrapper {
    margin-top: 10rem;
  }
  section.by-concept .circle-container {
    align-self: stretch;
  }
}

section.partner {
  margin-bottom: clamp(6rem, 10vw, 12rem);
}
section.partner h2 {
  color: #0b0098;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 7vw, 10rem);
  font-style: italic;
  line-height: 100%;
  margin-bottom: -0.15em;
}
section.partner .content-container {
  width: 100%;
  box-sizing: border-box;
  padding: 5rem 0 3.5rem;
  color: #ffffff;
  background-color: #0b0098;
}
section.partner .content-container .content-inner {
  gap: 4.5rem;
  width: 1200px;
  max-width: 86.4%;
  margin: auto;
}
section.partner .content-container .content-inner p {
  line-height: 200%;
  letter-spacing: 0.1em;
}
section.partner .content-container .content-inner img {
  width: 50%;
  max-width: 45rem;
  min-width: 24rem;
  object-fit: contain;
}
section.partner a.btn-white {
  margin: 2em auto 0;
  width: fit-content;
  background-color: #ffffff;
  color: #1300ff;
  line-height: 100%;
  font-size: 2rem;
  padding: 0.7em 2.5em;
  background-image: url(../img/beyond/arrow-r-b.svg);
  background-position: center right 1em;
  background-repeat: no-repeat;
  background-size: 0.5em;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1201px) {
  section.partner .content-container .content-inner img {
    min-width: 45rem;
    margin-bottom: 10rem;
  }
}

section.by-about {
  gap: clamp(8rem, 10vw, 13rem);
}
section.by-about h2 {
  width: 89.5%;
  max-width: 172rem;
  color: #1300ff;
  font-size: clamp(4rem, 10vw, 18rem);
  font-weight: 900;
  font-style: italic;
  line-height: 100%;
}
section.by-about .content-wrapper {
  width: 92%;
  max-width: 142rem;
  gap: clamp(6rem, 15vw, 21rem);
}
section.by-about .content-wrapper .content-container {
  padding: calc(1.6 * clamp(2.4rem, 5vw, 8rem)) clamp(2rem, 3vw, 4rem) clamp(4rem, 5vw, 7rem) clamp(2rem, 3vw, 4rem);
  position: relative;
  width: 100%;
  border: 1px solid #1300ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 2rem;
  column-gap: clamp(4rem, 5vw, 6.6rem);
  overflow: visible;
}
section.by-about .content-wrapper .content-container .img-container {
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 3/2;
}
section.by-about .content-wrapper .content-container .img-container img,
section.by-about .content-wrapper .content-container .img-container picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.by-about .content-wrapper .content-container .text-container {
  width: 100%;
  max-width: 66rem;
}
section.by-about .content-wrapper .content-container .text-container p {
  letter-spacing: 0.1em;
  line-height: 200%;
}
section.by-about .content-wrapper h3 {
  position: absolute;
  top: calc(clamp(2.4rem, 5vw, 8rem) * -0.85);
  left: clamp(2rem, 3vw, 4rem);
  color: #1300ff;
  font-size: clamp(2.4rem, 5vw, 8rem);
  line-height: 120%;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1201px) {
  section.by-about .content-wrapper h3 {
    position: absolute;
  }
  section.by-about .content-wrapper .content-container {
    flex-direction: row;
  }
  section.by-about .content-wrapper .content-container:nth-child(even) {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1601px) {
  section.by-about .content-wrapper .content-container .img-container {
    align-self: flex-end;
    margin-bottom: calc(-1 * (4.5rem + clamp(4rem, 5vw, 7rem)));
  }
}

section.by-schedule {
  margin-top: clamp(16rem, 20vw, 25rem);
}
section.by-schedule .content-container {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 5vw, 6rem);
  padding-bottom: clamp(6rem, 15vw, 19rem);
}
section.by-schedule dl.flex-table {
  width: 100%;
  max-width: 100rem;
  align-self: flex-end;
}
section.by-schedule dl.flex-table dd {
  font-weight: 900;
}
section.by-schedule .content-wrapper .moon-right {
  margin: auto 0 0 auto;
}
@media screen and (min-width: 1601px) {
  section.by-schedule .content-container {
    padding-right: 10rem;
  }
}

section.by-information .content-container {
  padding-bottom: 0;
}
section.by-information dl.flex-table {
  width: 100%;
  max-width: 100rem;
  align-self: flex-end;
}
section.by-information dl.flex-table dd {
  font-weight: 500;
}
@media screen and (min-width: 651px) {
  section.by-information dl.flex-table .table-row dt {
    width: 30%;
  }
}

/*# sourceMappingURL=beyond.css.map */