/* 全般
---------------------------------------------- */
.wrapper {
  margin-inline: auto;
  width: 90%;
  max-width: 960px;
}
.fade {
  opacity: 1;
  transition: var(--transition-fade);
}
.fade:hover {
  opacity: 0.75;
}

*[data-device="sp"] {
  display: none;
}
@media screen and (width <= 768px) {
  *[data-device="pc"] {
    display: none;
  }
  *[data-device="sp"] {
    display: block;
  }
}


/* ヘッダー
---------------------------------------------- */
.header {
  margin: 0 auto var(--space-4xl);
  text-align: center;
}
.header__host {
  padding: var(--space-2xl) 0;
  font-weight: 700;
  font-size: var(--font-size-l);
}
.header__hero {
  width: 100%;
  max-width: 1920px;
  border-top: 3px solid var(--bg-secondary);
  border-bottom: 3px solid var(--bg-secondary);
  margin: 0 auto;
}

@media screen and (width <= 576px) {
  .header__host {
    font-size: var(--font-size-s);
  }
}


/* 本文
---------------------------------------------- */
/* イントロ */
.intro {
  padding: 0 0 var(--space-3xl);
}
.intro__heading {
  text-align: center;
}
.intro__heading-img {
  width: 100%;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}
.intro__text {
  margin: 0 auto var(--space-l);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
  font-size: var(--font-size-l);
}
.intro__text:last-of-type {
  margin: 0 auto;
}
.closed__text {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 0 auto var(--space-2xl);
  padding:  var(--space-l) 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
  font-size: var(--font-size-l);
  color: var(--color-primary);
}

@media screen and (width <= 576px) {
  .intro__text {
    text-align: justify;
    text-justify:inter-ideograph;
    word-break: unset;
    line-height: 1.6;
    font-size: var(--font-size-base);
  }
  .intro__text br {
    display: none;
  }
}


/* 賞品 */
.prize {
  padding: var(--space-4xl) 0;
  background: var(--color-secondary);
}
.prize__heading {
  text-align: center;
}
.prize__heading-img {
  width: 100%;
  max-width: 960px;
  margin: 0 auto var(--space-3xl);
}
.prize__text {
  margin: 0 auto var(--space-l);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
  font-size: var(--font-size-l);
  color: var(--text-light);
}
.prize__note {
  margin: 0 auto var(--space-3xl);
  text-align: center;
  line-height: 1.4;
  font-size: var(--font-size-xs);
  color: var(--text-light);
}

.prize__list {
  display: flex;
  justify-content: center;
  gap: var(--space-s-3xl);
  margin: 0 auto var(--space-3xl);
  padding: 0;
}
.prize__item {
  width: calc((100% - (var(--space-s-3xl)) *2) / 3);
  list-style-type: none;
}

.prize__howto {
  border-radius: var(--radius-l);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: linear-gradient(90deg, rgba(243,203,85,1) 0%, rgba(252,250,226,1) 50%, rgba(243,203,85,1) 100%);
  text-align: center;
}
.prize__howto-heading {
  margin-bottom: var(--space-m);
  text-align: center;
}
.prize__howto-heading-img {
  width: 100%;
  max-width: 484px;
  margin: 0 auto 0;
}
.prize__howto-list {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0 auto;
  padding: 0;
}
.prize__howto-item {
  width: calc((100% - (var(--space-xs)) *2) / 3);
  border-radius: var(--radius-l);
  background: var(--bg-primary);
  list-style-type: none;
}
.prize__howto-item img {
  border-radius: var(--radius-l);
}

@media screen and (width <= 768px) {
  .prize__text {
    text-align: justify;
    text-justify:inter-ideograph;
    word-break: unset;
    line-height: 1.6;
  }
  .prize__text br {
    display: none;
  }
  .prize__note {
    text-align: justify;
    text-justify:inter-ideograph;
  }
}
@media screen and (width <= 576px) {
  .prize__text {
    line-height: 1.6;
    font-size: var(--font-size-base);
  }
  .prize__list {
    flex-wrap: wrap;
    gap: 0 var(--space-s-3xl);
  }
  .prize__item {
    width: calc((100% - var(--space-s-3xl)) / 2);
    list-style-type: none;
  }
  .prize__howto-list {
    flex-direction: column;
    gap: var(--space-s);
  }
  .prize__howto-item {
    width: 100%;
    text-align: center;
  }
  .prize__howto-item img {
    width: 75%;
    margin: var(--space-s) auto 0;
  }
}


/* 投票期間 */
.voting-period {
  padding: var(--space-3xl) 0 var(--space-4xl);
  background: var(--bg-tertiary);
  text-align: center;
}
.voting-period__heading {
  display: inline-block;
  margin: 0 auto var(--space-l);
  padding: var(--space-xs) var(--space-m);
  background: var(--bg-primary);
  letter-spacing: var(--space-3xs);
  text-indent: var(--space-3xs);
  font-weight: 700;
  font-size: var(--font-size-l);
  color: var(--color-tertiary);
}


/* 動画・投票エリア */
.video {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--space-4xl-6xl) var(--space-l-2xl);
}
.video__item {
	display: grid;
  gap: 0;
	grid-template-rows: subgrid;
	grid-row: span 4;
  box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.15);
  padding: 0 0 var(--space-xl);
  background: var(--bg-quaternary);
  text-align: center;
}
.video__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl);
  background: var(--bg-tertiary);
  line-height: 1.2;
  font-size: var(--font-size-l);
  color: var(--text-light);
}
.video__youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video__youtube iframe {
  width: 100%;
  height: 100%;
}
.video__profile {
  display: grid;
  grid-template-areas:
    "img name"
    "img text";
  gap: var(--space-s);
  padding: var(--space-xl);
}
.video__profile-name {
  grid-area: name;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}
.video__profile-img {
  grid-area: img;
  max-width: 108px;
  border: 2px solid var(--color-secondary);
  border-radius: 100vw;
}
.video__profile-text {
  grid-area: text;
  text-align: justify;
  text-justify:inter-ideograph;
  line-height: 1.6;
  font-size: var(--font-size-s);
}
.video__button-container {
  align-self: end;
}
.video__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--space-4xl);
  border-radius: var(--radius-m);
  margin: 0 auto;
  padding: 0 var(--space-3xl);
  background: var(--color-primary);
  letter-spacing: 2px;
  text-indent: 2px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-l);
  color: var(--text-light);
}
.video__button.inactive {
  background: #ccc;
}

@media screen and (width <= 1280px) {
  .video {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xl);
  }
  .video__item {
    width: calc((100% - var(--space-2xl)) / 2);
  }
  .video__title {
    height: 108px;
    padding: 0 var(--space-xl);
  }
}
@media screen and (width <= 992px) {
  .video {
    flex-direction: column;
  }
  .video__item {
    width: 100%;
  }
}
@media screen and (width <= 576px) {
  .video__title {
    padding: var(--space-m);
    font-size: var(--font-size-m);
  }
  .video__profile {
    grid-template-areas:
      "img"
      "name"
      "text";
    padding: var(--space-l);
  }
  .video__profile-img {
    max-width: 160px;
    margin: 0 auto;
  }
}



/* バナーエリア */
.campaign {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
  text-align: center;
}
.campaign__heading {
  margin: 0 auto var(--space-3xl);
  letter-spacing: 2px;
  text-indent: 2px;
  font-weight: 800;
  font-size: var(--font-size-2xl);
  color: var(--text-light);
}
.campaign__banner-link {
  display: inline-block;
  max-width: 640px;
  background: var(--bg-tertiary);
}
.campaign__banner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

@media screen and (width <= 576px) {
  .campaign__heading {
    margin: 0 auto var(--space-xl);
    font-size: var(--font-size-l);
  }
}


/* 注意事項 */
.disclaimer {
  padding: var(--space-3xl) 0;
}
.disclaimer__text {
  line-height: 2;
  font-size: var(--font-size-s);
}


/* お問い合わせ */
.inquiry {
  border-top: 1px solid var(--text-dark);
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.inquiry__heading {
  margin-bottom: var(--space-m);
}
.inquiry__text {
  margin-bottom: var(--space-s);
  line-height: 1.8;
}
.inquiry__note {
  padding-left: 1em;
  line-height: 1.4;
  list-style-type: "※";
  font-size: var(--font-size-s);
}


/* フッター
---------------------------------------------- */
.footer {
  border-top: 1px solid var(--text-dark);
  padding: var(--space-2xl) 0;
  text-align: center;
}
.footer__host {
  margin: 0 auto var(--space-l);
  line-height: 1.6;
  font-size: var(--font-size-base);
}
.footer__host span {
  display: inline-block;
  padding: 0 var(--space-xs);
}
.footer__copyright {
  font-size: var(--font-size-xs);
}

@media screen and (width <= 576px) {
  .footer__host {
    font-size: var(--font-size-s);
  }
}