a {
  display: inline-flex;
  align-items: center;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
  a:hover {
    color: #F6E500;
  }
  a:hover .icon-arrow {
    transform: rotate(45deg);
  }
}
a.link-color {
  color: #F6E500;
}
@media screen and (min-width: 769px) {
  a.link-color:hover {
    color: #F6E500;
    opacity: 0.7;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.9444444444vw;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  :is(h1, h2, h3, h4, h5, h6) {
    font-size: 5.1282051282vw;
  }
}

main {
  padding-top: 70px;
}
@media screen and (max-width: 767px) {
  main {
    padding-top: 60px;
  }
}
main .mv {
  position: relative;
}
main .mv img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
main .mv-movie {
  background: #000;
}
main .mv-movie__container {
  aspect-ratio: 16/9;
  height: auto;
  position: relative;
  width: 100%;
}
main .mv-movie__video {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}
main .mv-movie__mask {
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 2;
}
main .mv-movie__bottom {
  padding: 1.6666666667vw 2.2222222222vw 6.1111111111vw;
  text-align: right;
}
@media screen and (max-width: 767px) {
  main .mv-movie__bottom {
    padding: 4.1025641026vw 7.6923076923vw 16.4102564103vw;
  }
}
main .mv-movie__bottom .btn-movie {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: max(1.25vw, 1.125rem);
  font-weight: 500;
  color: #fff;
  transition: all 0.2s ease-in;
}
@media screen and (min-width: 769px) {
  main .mv-movie__bottom .btn-movie:hover {
    color: #F6E500;
  }
  main .mv-movie__bottom .btn-movie:hover::before {
    background: #F6E500;
  }
  main .mv-movie__bottom .btn-movie:hover::after {
    border-color: #F6E500;
  }
}
@media screen and (max-width: 767px) {
  main .mv-movie__bottom .btn-movie {
    font-size: 4.1025641026vw;
  }
}
main .mv-movie__bottom .btn-movie::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.4em;
  width: 0.4em;
  height: 0.5196152423em;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
  transition: all 0.2s ease-in;
}
main .mv-movie__bottom .btn-movie::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  margin-left: 1em;
  border: 1px solid #fff;
  border-radius: 100%;
  transition: all 0.2s ease-in;
}
main #history {
  position: relative;
  padding: 10vw 0 0;
  background: url(../img/bg.png) right -13.5vw no-repeat;
  background-size: 37.5vw;
}
@media screen and (max-width: 767px) {
  main #history {
    background-position: right 175vw;
    background-size: 66.66vw;
  }
}
@media screen and (max-width: 767px) {
  main #history {
    padding: 9vw 0;
  }
}
main #history::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 59.16vw;
  height: 56.8vw;
  /*background: #EBEBEB;*/
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #history::before {
    bottom: auto;
    top: 0;
    width: 65.89vw;
    height: 155vw;
  }
}
@media screen and (min-width: 768px) {
  main #history .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
main #history .row:first-child {
  margin-bottom: 8.68vw;
}
main #history .introduction .founder {
  /*width: 31.66%;*/
  width: 51.66%;
  margin: 0;
  margin-right: 4.833vw;
}
@media screen and (max-width: 767px) {
  main #history .introduction .founder {
    width: 83%;
    margin: 0 auto 10.25vw;
  }
}
main #history .introduction-txt {
  width: 36%;
  margin: 0 auto;
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  main #history .introduction-txt {
    width: 100%;
    margin-bottom: 20.51vw;
  }
}
main #history .introduction-txt p {
  font-size: max(0.9722222222vw, 0.875rem);
  line-height: 1.76em;
}
@media screen and (max-width: 767px) {
  main #history .introduction-txt p {
    font-size: 3.3333333333vw;
    text-align: center;
  }
}
main #history .introduction-txt p.lead {
  margin-bottom: 1em;
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1em;
}
@media screen and (max-width: 767px) {
  main #history .introduction-txt p.lead {
    font-size: 6.1538461538vw;
  }
}
main #history .introduction .tyre {
  align-self: flex-end;
  width: 20.66%;
}
@media screen and (max-width: 767px) {
  main #history .introduction .tyre {
    width: 100%;
  }
}
main #history .media picture {
  width: 48%;
}
@media screen and (max-width: 767px) {
  main #history .media picture {
    width: 100%;
  }
}
main #history .media .movie {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  background: #000;
}
@media screen and (max-width: 767px) {
  main #history .media .movie {
    width: 100%;
    margin-top: 7.17vw;
  }
}
main #history .media .movie-wrapper {
  aspect-ratio: 16/9;
  height: auto;
  position: relative;
  width: 100%;
}
main #history .media .movie-wrapper iframe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main #event {
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  background: #000;
  border-top: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  main #event {
    border-bottom: 1px solid #fff;
  }
}
main #event .event-bnr {
  position: relative;
}
main #event .event-bnr .label {
  position: absolute;
  top: 50%;
  left: 8.33vw;
  display: inline-block;
  font-size: 2.3166666667vw;
  font-weight: 700;
  line-height: 1.2em;
  z-index: 1;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  main #event .event-bnr .label {
    top: auto;
    top: 10%;
    font-size: 7.1794871795vw;
    transform: translateY(0);
  }
}
main #event .event-bnr .label-date {
  display: block;
  margin-top: 0.8em;
  font-size: 1.6666666667vw;
  font-weight: 500;
  line-height: 1.2em;
}
@media screen and (max-width: 767px) {
  main #event .event-bnr .label-date {
    margin-top: 0.2em;
    font-size: 4.6153846154vw;
  }
}
main #event .event-link {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  width: 84.62vw;
}
@media screen and (min-width: 768px) {
  main #event .event-link {
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16.5277777778vw;
    transform: translate(50%, -50%);
  }
}
@media screen and (max-width: 767px) {
  main #event .event-link {
    padding: 6.1538461538vw 0;
  }
}
main #event .event-link a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  font-size: 1.25vw;
  font-weight: 500;
  color: #fff;
  line-height: 1em;
  background: #000;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}
main #event .event-link a:last-child {
  margin-top: 1.3888888889vw;
}
@media screen and (max-width: 767px) {
  main #event .event-link a {
    width: 48.5%;
    margin: 0 !important;
    font-size: 3.8461538462vw;
    border: 1px solid #fff;
  }
}
@media screen and (min-width: 769px) {
  main #event .event-link a:hover {
    color: #000;
    background: #fff;
  }
  main #event .event-link a:hover .arrow::before {
    filter: brightness(1) invert(1);
  }
}
main #event .event-link a .arrow {
  display: inline-block;
}
main #event .event-link a .arrow::before {
  content: "";
  display: inline-block;
  width: 0.7638888889vw;
  height: 0.5555555556vw;
  vertical-align: middle;
  background: url(../img/common/icon-arrow.svg) center no-repeat;
  background-size: contain;
  transition: filter 0.2s ease-in;
}
@media screen and (max-width: 767px) {
  main #event .event-link a .arrow::before {
    width: 2.8205128205vw;
    height: 2.0512820513vw;
  }
}
main #topics {
  padding: 7.7777777778vw 0;
  color: #fff;
  background: #000;
}
@media screen and (max-width: 767px) {
  main #topics {
    padding: 21.2820512821vw 0;
  }
}
@media screen and (min-width: 768px) {
  main #topics .topics-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
main #topics .topics-inner h2 {
  margin-bottom: 0.8em;
  font-size: 3.3333333333vw;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  main #topics .topics-inner h2 {
    width: 19.0972222222vw;
  }
}
@media screen and (max-width: 767px) {
  main #topics .topics-inner h2 {
    font-size: 9.7435897436vw;
  }
}
@media screen and (min-width: 768px) {
  main #topics .topics-list {
    width: calc(100% - 19.0972222222vw);
  }
}
main #topics .topics-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2.0833333333vw 1.3888888889vw;
  border-top: 1px solid #878787;
}
@media screen and (max-width: 767px) {
  main #topics .topics-list > li {
    padding: 5.1282051282vw;
  }
}
main #topics .topics-list > li:last-child {
  border-bottom: 1px solid #878787;
}
main #topics .topics-list > li .ttl-topics {
  font-size: max(1.1111111111vw, 1rem);
}
@media screen and (min-width: 768px) {
  main #topics .topics-list > li .ttl-topics {
    width: min(100% - 10.4166666667vw, 100% - 150px);
  }
}
@media screen and (max-width: 767px) {
  main #topics .topics-list > li .ttl-topics {
    margin-bottom: 1em;
    font-size: max(0.9722222222vw, 0.875rem);
  }
}
main #topics .topics-list > li .ttl-topics > span {
  display: block;
  line-height: 1.5em;
}
main #topics .topics-list > li .ttl-topics > span.date {
  margin-bottom: 0.5em;
  font-size: 0.875em;
  color: #B2B2B2;
}
main #topics .topics-list .btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}
@media screen and (min-width: 768px) {
  main #topics .topics-list .btns {
    width: max(7.6388888889vw, 110px);
  }
}
main #topics .topics-list .btns a {
  display: inline-block;
  width: 4em;
  padding: 0.7em 1em;
  font-size: max(0.8333333333vw, 0.75rem);
  color: #fff;
  text-align: center;
  line-height: 1em;
  border: 1px solid #fff;
  border-radius: 9999px;
  transition: background 0.3s ease-out;
}
@media screen and (min-width: 769px) {
  main #topics .topics-list .btns a:hover {
    color: #000;
    background: #F6E500;
    border-color: #F6E500;
  }
}
main .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main .bnr {
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  background: #000;
  border-top: 1px solid #fff;
  transition: all 0.3s ease-out;
}
@media screen and (min-width: 769px) {
  main .bnr:hover .arrow {
    background: #F6E500;
    border-color: #F6E500;
  }
  main .bnr:hover .arrow::before {
    filter: brightness(1) invert(1);
  }
}
main .bnr img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
main .bnr .label {
  position: absolute;
  top: 50%;
  left: 10%;
  display: inline-block;
  font-size: 3.4722222222vw;
  font-weight: 700;
  line-height: 1.2em;
  z-index: 1;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  main .bnr .label {
    font-size: 10.2564102564vw;
  }
}
main .bnr .label-sub {
  display: block;
  font-size: 0.4em;
  line-height: 1.2em;
  color: #F6E500;
}
main .bnr .label-main {
  display: block;
  line-height: 1.2em;
}
main .bnr .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2638888889vw;
  height: 1.8055555556vw;
  margin-top: 1.3888888889vw;
  border: 1px solid #fff;
  border-radius: 9999px;
  transition: background 0.3s ease-out;
}
@media screen and (max-width: 767px) {
  main .bnr .arrow {
    width: 9.4871794872vw;
    height: 5.3846153846vw;
  }
}
main .bnr .arrow::before {
  content: "";
  display: inline-block;
  width: 0.7638888889vw;
  height: 0.5555555556vw;
  vertical-align: middle;
  background: url(../img/common/icon-arrow.svg) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  main .bnr .arrow::before {
    width: 2.8205128205vw;
    height: 2.0512820513vw;
  }
}
main .bnr-half {
  width: 50%;
}
@media screen and (min-width: 769px) {
  main .bnr-half:hover::before {
    opacity: 0.4;
  }
}
@media screen and (max-width: 767px) {
  main .bnr-half {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  main .bnr-half::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    transition: all 0.3s ease-out;
    z-index: 0;
  }
}
@media screen and (min-width: 768px) {
  main .bnr-story {
    border-left: 1px solid #fff;
  }
}
@media screen and (min-width: 768px) {
  main .bnr-story::before {
    opacity: 0.3;
  }
}
@media screen and (min-width: 769px) {
  main .bnr-story:hover::before {
    opacity: 0;
  }
}/*# sourceMappingURL=styles.css.map */