/* 共通 */
h2.wp-block-heading {
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
  font-size: 2em;
  position: relative;
}
.wp-block-buttons {
  margin-top: 30px;
  justify-content: center;
}
.wp-block-buttons .wp-block-button__link {
  background-color: #fff;
  color: var(--color-primary-sub);
  border: 2px solid var(--color-primary-sub);
  padding: .4em 2em;
  transition: all .3s;
}
.wp-block-buttons .wp-block-button__link:hover {
  background-color: var(--color-primary-sub);
  color: #fff;
}

.entry-content section.wp-block-group > .wp-block-group__inner-container {
  padding-left: 15px;
  padding-right: 15px;
}

/* MainVisual */
section.kv {
  background-color: #000;
  container-type: inline-size;
}
section.kv .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
section.kv .kvtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-size: 2em;
  text-align: center;
  line-height: 1;
}
section.kv .kvtitle strong {
  font-size: 1.5em;
}
section.kv .kvtitle a.btn {
  background-color: #e94d31;
  font-size: 20px;
  margin-top: 30px;
  padding: .5em 1em;
  border-radius: 90px;
  color: #fff;
  font-weight: 700;
  border: 2px solid #fff;
}
section.kv .kvmovie video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
@container (max-width: 960px){
  section.kv .grid-container {
    grid-template-columns: 40% 60%;
  }
  section.kv .kvtitle {
    font-size: 3vw;
  }
  section.kv .kvtitle a.btn {
    font-size: 2vw;
    margin-top: 20px;
  }
}
@container (max-width: 600px){
  section.kv .grid-container {
    grid-template-columns: 1fr;
  }
  section.kv .kvtitle {
    padding: 5vw 0;
    font-size: 5vw;
  }
  section.kv .kvtitle a.btn {
    font-size: 3.5vw;
  }
}


/* News */
section.news .news-list {
  max-width: 800px;
  margin: 0 auto;
}
section.news .news-list li {
  display: flex;
  gap: 20px;
  line-height: 1.4;
}
section.news .news-list li + li {
  margin-top: .5em;
}

/* About */
section.about {
  text-align: center;
  background: url(../images/home/background-1.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ブランド/協賛/協力 共通 */
section.brand h2.wp-block-heading::before,
section.sponsor h2.wp-block-heading::before,
section.support h2.wp-block-heading::before {
  content: "";
  display: block;
  top: calc(50% - 1px);
  height: 2px;
  max-width: 400px;
  width: 100%;
  position: absolute;
  background-color: #e9904b;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: -2;
}
section.brand h2.wp-block-heading::after,
section.sponsor h2.wp-block-heading::after,
section.support h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 6em;
  height: 100%;
  position: absolute;
  background-color: #fff;
  left: calc((100% - 6em) / 2);
  top: 0;
  z-index: -1;
}
section.brand h2.wp-block-heading::after {
  width: 6em;
  left: calc((100% - 6em) / 2);
}
section.sponsor h2.wp-block-heading::after,
section.support h2.wp-block-heading::after {
  width: 7em;
  left: calc((100% - 7em) / 2);
}
/* ブランド */
section.brand .wp-block-group__inner-container {
  container-type: inline-size;
}
ul.brand-list {
  display: flex;
  justify-content: center;
  gap: 30px 20px;
  align-items: center;
}
ul.brand-list li {
  max-width: 260px;
  /* width: 100%; */
  text-align: center;
}
ul.brand-list li img {
  max-height: 150px;
}
@container (max-width: 500px){
  ul.brand-list {
    flex-wrap: wrap;
  }
  ul.brand-list li {
    width: calc((100% - 20px) / 2);
  }
}

/* 協賛 */
section.sponsor {
  text-align: center;
}
section.sponsor .wp-block-group__inner-container {
  container-type: inline-size;
}
ul.sponsor-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
ul.sponsor-list li {
  max-width: 260px;
  /* width: 100%; */
  text-align: center;
}
ul.sponsor-list li img {
  max-height: 150px;
}
@container (max-width: 500px){
  ul.sponsor-list {
    flex-wrap: wrap;
  }
  ul.sponsor-list li {
    width: calc((100% - 20px) / 2);
  }
}

/* 協力 */
section.support .wp-block-group__inner-container {
  container-type: inline-size;
}
ul.support-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
ul.support-list li {
  max-width: 200px;
  /* width: 100%; */
  text-align: center;
}
ul.support-list li img {
  max-height: 150px;
}
@container (max-width: 500px){
  ul.support-list {
    flex-wrap: wrap;
  }
  ul.support-list li {
    width: calc((100% - 20px) / 2);
  }
}
