@charset "UTF-8";
html {
  scroll-behavior: smooth; }

/* bread-crumb */
#detail-page {
  top: 0;
  padding-top: 4px;
  margin-bottom: 0;
  overflow: hidden; }

.bread-crumb-wrap {
  position: relative;
  width: 960px;
  margin: 0 auto; }

.bread-crumb::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: ' '; }

.bread-crumb > #home {
  padding-left: 12px;
  background: url(/common/images/bread-clumb-home-bg-01.png) left 1px no-repeat; }

.bread-crumb li {
  display: inline;
  color: #666; }

/* Reset */
.main {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  color: #171c61;
  font-size: 6.6px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .main {
      min-width: 960px; } }
  .main :where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0; }
  .main ul[class],
  .main ol[class] {
    padding-right: 0;
    padding-left: 0;
    list-style: none; }
  .main picture {
    z-index: 1;
    display: block; }
  .main figure {
    display: block;
    margin: 0; }
  .main img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: bottom; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

body {
  color: #222;
  line-height: 1.6;
  background: #fff; }

a {
  color: inherit;
  text-decoration: none; }

/* kv */
.kv {
  width: 100%; }
  @media screen and (min-width: 768px) {
    .kv {
      height: 894px;
      overflow: hidden; } }
  .kv__image {
    display: block;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .kv__image {
        height: 100%; } }
    @media screen and (min-width: 768px) {
      .kv__image img {
        width: 100%;
        height: 100%;
        object-fit: cover; } }

/* CTA */
.cta {
  width: 100%;
  position: relative;
  background: #fff000;
  z-index: 3; }
  @media screen and (min-width: 768px) {
    .cta {
      padding: 60px 0 80px; } }
  @media screen and (max-width: 768px) {
    .cta {
      padding: calc((70 / 750) * 100vw) 0 calc((209 / 750) * 100vw); } }
  .cta__stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    position: relative;
    z-index: 1; }
    @media screen and (min-width: 768px) {
      .cta__stack {
        gap: 30px; } }
    @media screen and (max-width: 768px) {
      .cta__stack {
        gap: 35px; } }
  .cta__ano {
    position: absolute;
    margin: 0;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 3; }
    @media screen and (min-width: 768px) {
      .cta__ano {
        bottom: -63px;
        left: calc(50% - 363px);
        width: 347px;
        height: 243px; } }
    @media screen and (max-width: 768px) {
      .cta__ano {
        bottom: calc((-65 / 750) * 100vw);
        left: 50%;
        width: calc((400 / 750) * 100vw);
        height: calc((249 / 750) * 100vw); } }
  .cta__link {
    display: block;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .cta__link {
        width: 414px;
        height: 111px; } }
    @media screen and (max-width: 768px) {
      .cta__link {
        width: calc((517 / 750) * 100vw);
        max-width: 517px;
        height: auto;
        aspect-ratio: 517 / 138; } }

/* Menu */
.menu {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding: 0;
  background-color: #171c61;
  z-index: 2; }
  .menu__list {
    display: grid;
    gap: calc((17 / 750) * 100vw);
    grid-auto-flow: column;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    border: none;
    background: none;
    list-style: none;
    padding-top: calc((100 / 750) * 100vw); }
    @media screen and (min-width: 768px) {
      .menu__list {
        gap: calc((35 / 940) * 100vw);
        padding-top: 100px; } }
    @media screen and (min-width: 940px) {
      .menu__list {
        gap: 35px;
        padding-top: 100px; } }
  .menu__link {
    display: block; }

/* Participation outer */
.participation-outer {
  position: relative;
  width: 100%;
  background-color: #171c61;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  z-index: 1; }
  @media screen and (min-width: 768px) {
    .participation-outer {
      background-image: url("/cp/36th/images/participation-bg_pc.png");
      background-size: cover; } }
  @media screen and (max-width: 768px) {
    .participation-outer {
      background-image: url("/cp/36th/images/participation-bg_sp.png");
      background-size: cover;
      margin-top: calc((-270 / 750) * 100vw); } }
  @media screen and (min-width: 768px) {
    .participation-outer__content {
      max-width: 1120px;
      padding-top: 367px;
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    .participation-outer__content {
      padding: calc((640 / 750) * 100vw) calc((35 / 750) * 100vw) 0;
      margin-inline: auto; } }

/* Participation */
.participation__title {
  margin-inline: auto; }
  @media screen and (min-width: 768px) {
    .participation__title {
      width: 520px; } }
  @media screen and (max-width: 768px) {
    .participation__title {
      width: calc((450 / 750) * 100vw); } }

.participation__bubble {
  margin-inline: auto; }
  @media screen and (min-width: 768px) {
    .participation__bubble {
      width: 220px;
      margin-top: 35px; } }
  @media screen and (max-width: 768px) {
    .participation__bubble {
      margin-top: calc((40 / 750) * 100vw);
      width: calc((230 / 750) * 100vw); } }

.participation__step-list {
  display: grid;
  padding: 0;
  margin: 0 auto;
  list-style: none; }
  @media screen and (min-width: 768px) {
    .participation__step-list {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 910px;
      gap: 4px;
      margin-top: 23px; } }
  @media screen and (max-width: 768px) {
    .participation__step-list {
      grid-template-columns: 1fr;
      gap: calc((15 / 750) * 100vw);
      margin-top: calc((28 / 750) * 100vw);
      width: calc((550 / 750) * 100vw); } }

.participation__step-item {
  margin-bottom: 0;
  position: relative; }
  @media screen and (min-width: 768px) {
    .participation__step-item {
      display: flex;
      align-items: center;
      width: 308px; }
      .participation__step-item:last-child {
        width: 280px; } }
  @media screen and (max-width: 768px) {
    .participation__step-item {
      width: 100%;
      max-width: 550px;
      margin-inline: auto; } }
  @media screen and (min-width: 768px) {
    .participation__step-item:not(:last-child)::after {
      content: '';
      display: block;
      width: 21px;
      height: 35px;
      background-color: #e63828;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      flex: 0 0 21px;
      margin-left: 7px; } }
  @media screen and (max-width: 768px) {
    .participation__step-item:not(:last-child)::after {
      content: '';
      display: block;
      width: calc((53 / 750) * 100vw);
      height: calc((34 / 750) * 100vw);
      background-color: #e63828;
      clip-path: polygon(50% 100%, 0 0, 100% 0);
      margin: calc((15 / 750) * 100vw) auto 0; } }

@media screen and (min-width: 768px) {
  .participation__step-item--notice {
    align-items: flex-start; } }

.participation__step-note {
  position: absolute;
  bottom: 4.5%;
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: left;
  color: #161c60;
  line-height: 1.4;
  pointer-events: none; }
  @media screen and (min-width: 768px) {
    .participation__step-note {
      left: 9.5%;
      right: 7.5%;
      bottom: 5%;
      font-size: 13px; } }
  @media screen and (max-width: 768px) {
    .participation__step-note {
      left: 5.9%;
      right: 5.5%;
      bottom: 6%;
      font-size: calc((16 / 750) * 100vw); } }

.participation__step-note-item {
  margin-bottom: 0;
  list-style: none; }

@media screen and (max-width: 768px) {
  .participation__step-note-break {
    display: none; } }

.participation__entry {
  margin-inline: auto; }
  @media screen and (min-width: 768px) {
    .participation__entry {
      width: 477px;
      height: auto;
      margin-top: 65px; } }
  @media screen and (max-width: 768px) {
    .participation__entry {
      width: calc((500 / 750) * 100vw);
      height: auto;
      margin-top: calc((55 / 750) * 100vw); } }

/* Download */
.download {
  width: 100%; }
  @media screen and (min-width: 768px) {
    .download {
      padding: 15px 0 100px; } }
  @media screen and (max-width: 768px) {
    .download {
      padding: calc((27 / 750) * 100vw) 0 calc((100 / 750) * 100vw); } }
  .download__content {
    display: grid;
    align-items: center;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .download__content {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 27px;
        max-width: 920px;
        margin: 0 auto;
        width: 545px; } }
    @media screen and (max-width: 768px) {
      .download__content {
        grid-template-columns: calc((215 / 750) * 100vw) calc((244 / 750) * 100vw);
        gap: calc((31 / 750) * 100vw);
        width: calc((490 / 750) * 100vw); } }
  .download__store-link {
    display: block;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .download__store-link {
        align-self: center; }
        .download__store-link:first-of-type {
          width: 187px; }
        .download__store-link:last-of-type {
          width: 212px; } }
    @media screen and (max-width: 768px) {
      .download__store-link {
        max-width: none; } }
  @media screen and (min-width: 768px) {
    .download__qrcode {
      width: 91px;
      height: 91px; } }
  @media screen and (max-width: 768px) {
    .download__qrcode {
      display: none;
      grid-column: 1 / -1; } }
  .download__pc-note {
    margin-top: 20px;
    font-size: 13px;
    text-align: center;
    color: #171c61; }
    @media screen and (max-width: 768px) {
      .download__pc-note {
        display: none; } }

/* Bookmark */
.bookmark {
  background-image: url("/cp/36th/images/bookmark-bg_sp.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .bookmark {
      background-image: url("/cp/36th/images/bookmark-bg_pc.png");
      background-size: cover; } }
  .bookmark__title {
    margin-inline: auto; }
    .bookmark__title > picture {
      display: block;
      width: 100%; }
    @media screen and (min-width: 768px) {
      .bookmark__title {
        padding-top: 383px;
        width: 741px; } }
    @media screen and (max-width: 768px) {
      .bookmark__title {
        width: calc((534 / 750) * 100vw);
        padding-top: calc((282 / 750) * 100vw);
        transform: translateX(calc((26 / 750) * 100vw)); } }
  .bookmark__image {
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .bookmark__image {
        margin-top: 23px;
        width: 856px;
        transform: translateX(-15px); } }
    @media screen and (max-width: 768px) {
      .bookmark__image {
        width: calc((666 / 750) * 100vw);
        transform: translateX(calc((-15 / 750) * 100vw)); } }
  .bookmark__note-list {
    text-align: left;
    font-weight: normal;
    line-height: 1.5; }
    @media screen and (min-width: 768px) {
      .bookmark__note-list {
        width: 680px;
        margin: 10px auto 0;
        padding-bottom: 100px; } }
    @media screen and (max-width: 768px) {
      .bookmark__note-list {
        width: calc((530 / 750) * 100vw);
        margin: calc((20 / 750) * 100vw) auto 0;
        padding-bottom: calc((93 / 750) * 100vw); } }
  @media screen and (min-width: 768px) {
    .bookmark__note-item {
      font-size: 14px; } }
  @media screen and (max-width: 768px) {
    .bookmark__note-item {
      font-size: calc((16 / 750) * 100vw); } }

/* Campaign */
.campaign {
  position: relative;
  width: 100%;
  background-color: #171c61; }
  .campaign__title {
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .campaign__title {
        width: 355px;
        padding-top: 109px; } }
    @media screen and (max-width: 768px) {
      .campaign__title {
        width: calc((309 / 750) * 100vw);
        padding-top: calc((100 / 750) * 100vw); } }
  .campaign__sns {
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .campaign__sns {
        width: 740px;
        margin-top: 40px; } }
    @media screen and (max-width: 768px) {
      .campaign__sns {
        width: calc((550 / 750) * 100vw);
        margin-top: calc((34 / 750) * 100vw); } }
  .campaign img {
    display: block;
    width: 100%;
    border-radius: 2px; }
  .campaign__link-btn {
    height: auto;
    margin-inline: auto;
    display: block; }
    @media screen and (min-width: 768px) {
      .campaign__link-btn {
        width: 370px;
        margin-top: 40px;
        padding-bottom: 100px; } }
    @media screen and (max-width: 768px) {
      .campaign__link-btn {
        width: calc((519 / 750) * 100vw);
        margin-top: calc((45 / 750) * 100vw);
        padding-bottom: calc((222 / 750) * 100vw); } }
  .campaign__visual {
    position: absolute;
    bottom: 0; }
    @media screen and (min-width: 768px) {
      .campaign__visual {
        width: 263px;
        height: auto;
        left: calc(50% + 325px); } }
    @media screen and (max-width: 768px) {
      .campaign__visual {
        width: calc((257 / 750) * 100vw);
        left: 50%;
        transform: translateX(calc(-50% + (18 / 750) * 100vw)); } }

/* Bookoff */
.bookoff {
  background-image: url("/cp/36th/images/bookoff-bg_sp.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .bookoff {
      background-image: url("/cp/36th/images/bookoff-bg_pc.png");
      background-size: auto; } }
  .bookoff__title {
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .bookoff__title {
        width: 720px;
        padding-top: 109px; } }
    @media screen and (max-width: 768px) {
      .bookoff__title {
        width: calc((450 / 750) * 100vw);
        padding-top: calc((78 / 750) * 100vw); } }
  .bookoff__bnr {
    display: block;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .bookoff__bnr {
        width: 740px;
        margin-top: 30px; } }
    @media screen and (max-width: 768px) {
      .bookoff__bnr {
        width: calc((550 / 750) * 100vw);
        margin-top: calc((23 / 750) * 100vw); } }

/* Movie */
.movie {
  width: 100%;
  margin-inline: auto; }
  @media screen and (min-width: 768px) {
    .movie {
      max-width: 1040px;
      margin-top: 388px; } }
  @media screen and (max-width: 768px) {
    .movie {
      margin-top: calc((330 / 750) * 100vw); } }
  .movie__title {
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .movie__title {
        width: 206px; } }
    @media screen and (max-width: 768px) {
      .movie__title {
        width: calc((206 / 750) * 100vw); } }
  .movie__container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; }
    @media screen and (min-width: 768px) {
      .movie__container {
        margin-top: 103px;
        padding-bottom: 154px;
        gap: 65px 37px;
        flex-wrap: wrap; } }
    @media screen and (max-width: 768px) {
      .movie__container {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: calc((57 / 750) * 100vw);
        padding-bottom: calc((177 / 750) * 100vw);
        gap: calc((40 / 750) * 100vw); } }
  .movie__item {
    position: relative;
    width: 291px; }
    @media screen and (max-width: 1040px) and (min-width: 768px) {
      .movie__item {
        width: calc((291 / 1040) * 100vw); } }
    @media screen and (max-width: 768px) {
      .movie__item {
        width: calc((382 / 750) * 100vw); } }
    .movie__item::after {
      content: '';
      display: block;
      position: absolute;
      background: url("/cp/36th/images/movie-dot.png") no-repeat center/contain; }
      @media screen and (min-width: 768px) {
        .movie__item::after {
          width: 98px;
          height: 36px; } }
      @media screen and (max-width: 768px) {
        .movie__item::after {
          width: calc((127 / 750) * 100vw);
          height: calc((47 / 750) * 100vw); } }
    @media screen and (min-width: 768px) {
      .movie__item:nth-of-type(1)::after {
        bottom: 95px;
        left: -43px;
        transform: rotate(180deg); } }
    @media screen and (max-width: 768px) {
      .movie__item:nth-of-type(1)::after {
        bottom: calc((20 / 750) * 100vw);
        right: calc((-60 / 750) * 100vw);
        transform: rotate(180deg); } }
    @media screen and (min-width: 768px) {
      .movie__item:nth-of-type(2)::after {
        bottom: 45px;
        left: -7px; } }
    @media screen and (max-width: 768px) {
      .movie__item:nth-of-type(2)::after {
        bottom: calc((110 / 750) * 100vw);
        left: calc((-61 / 750) * 100vw); } }
    @media screen and (min-width: 768px) {
      .movie__item:nth-of-type(3)::after {
        bottom: 100px;
        right: -46px;
        transform: rotate(180deg); } }
    @media screen and (max-width: 768px) {
      .movie__item:nth-of-type(3)::after {
        bottom: calc((50 / 750) * 100vw);
        right: calc((-57 / 750) * 100vw); } }
    @media screen and (min-width: 768px) {
      .movie__item:nth-of-type(4)::after {
        bottom: 65px;
        left: -45px; } }
    @media screen and (max-width: 768px) {
      .movie__item:nth-of-type(4)::after {
        bottom: calc((30 / 750) * 100vw);
        left: calc((-61 / 750) * 100vw); } }
    @media screen and (min-width: 768px) {
      .movie__item:nth-of-type(5)::after {
        bottom: 100px;
        right: -47px;
        transform: rotate(180deg); } }
    @media screen and (max-width: 768px) {
      .movie__item:nth-of-type(5)::after {
        bottom: calc((115 / 750) * 100vw);
        right: calc((-60 / 750) * 100vw);
        transform: rotate(180deg); } }

/* Campaign Terms */
.campaign-terms {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  background-color: #171c61;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif; }
  @media screen and (min-width: 768px) {
    .campaign-terms {
      padding: 100px 44px 110px; } }
  @media screen and (max-width: 768px) {
    .campaign-terms {
      padding: calc((100 / 750) * 100vw) calc((65 / 750) * 100vw) calc((216 / 750) * 100vw); } }
  .campaign-terms__inner {
    width: 100%;
    max-width: calc((620 / 750) * 100vw); }
    @media screen and (min-width: 768px) {
      .campaign-terms__inner {
        max-width: 650px; } }
  .campaign-terms__card {
    background: #fff;
    border-radius: 20px; }
    @media screen and (min-width: 768px) {
      .campaign-terms__card {
        padding: 32px 70px 36px; } }
    @media screen and (max-width: 768px) {
      .campaign-terms__card {
        padding: calc((40 / 750) * 100vw) calc((60 / 750) * 100vw) calc((21 / 750) * 100vw); } }
  .campaign-terms__title {
    text-align: center;
    color: #e73828;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      .campaign-terms__title {
        font-size: 1.75rem;
        margin-bottom: 30px; } }
  .campaign-terms__section {
    margin-bottom: 25px;
    color: #161c60; }
    @media screen and (min-width: 768px) {
      .campaign-terms__section {
        margin-bottom: 30px; } }
  .campaign-terms__section-title {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 0.5rem; }
    @media screen and (min-width: 768px) {
      .campaign-terms__section-title {
        font-size: 1.2rem;
        margin-bottom: 0.75rem; } }
  .campaign-terms__text {
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.4;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .campaign-terms__text {
        font-size: 1rem; } }
  .campaign-terms__list {
    list-style: none;
    padding: 0;
    margin: 0; }
  .campaign-terms__list-item {
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.4;
    padding-left: 1em;
    text-indent: -1em; }
    @media screen and (min-width: 768px) {
      .campaign-terms__list-item {
        font-size: 1rem; } }
    .campaign-terms__list-item a {
      color: #161c60;
      font-weight: bold;
      text-decoration: underline; }
    .campaign-terms__list-item + .campaign-terms__list-item {
      margin-top: 4px; }
      @media screen and (min-width: 768px) {
        .campaign-terms__list-item + .campaign-terms__list-item {
          margin-top: 8px; } }
    .campaign-terms__list-item::before {
      content: '※'; }
  .campaign-terms__ano {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2; }
    @media screen and (min-width: 768px) {
      .campaign-terms__ano {
        left: calc(50% + 347px);
        width: 251px; } }
    @media screen and (max-width: 768px) {
      .campaign-terms__ano {
        width: calc((251 / 750) * 100vw);
        transform: translateX(calc(-50% - (23 / 750) * 100vw)); } }

/* Footer */
.footer {
  width: 100%;
  background-color: #e73828; }
  .footer__lead {
    display: block;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .footer__lead {
        padding-top: 80px;
        width: 520px; } }
    @media screen and (max-width: 768px) {
      .footer__lead {
        padding-top: calc((80 / 750) * 100vw);
        width: calc((418 / 750) * 100vw); } }
  .footer__link {
    display: block;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .footer__link {
        width: 414px;
        margin-block: 50px 80px; } }
    @media screen and (max-width: 768px) {
      .footer__link {
        width: calc((522 / 750) * 100vw);
        margin-block: calc((46 / 750) * 100vw) calc((82 / 750) * 100vw); } }
  .footer__copyright {
    width: 100%;
    text-align: center;
    background-color: #ffef00; }
    @media screen and (min-width: 768px) {
      .footer__copyright {
        padding-block: 29px;
        font-size: 11px; } }
    @media screen and (max-width: 768px) {
      .footer__copyright {
        padding-block: calc((23 / 750) * 100vw) calc((31 / 750) * 100vw);
        font-size: calc((14 / 750) * 100vw); } }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.3s; }

.has-modal .modal {
  visibility: visible;
  opacity: 1; }

.modal-container {
  position: relative;
  width: 90%;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .modal-container {
      width: 700px; } }

.modal-close {
  position: absolute;
  top: -35px;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer; }
  @media screen and (min-width: 768px) {
    .modal-close {
      top: -55px;
      width: 40px;
      height: 40px; } }

.modal-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden; }
  .modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.youtube {
  pointer-events: none;
  opacity: 0; }
  .youtube.is-active {
    pointer-events: auto;
    opacity: 1; }