@charset "UTF-8";
@layer component {
  
  /* わっかフェス2025の「つながる、ひろがる、地域のわ。」文字サイズ調整用専用CSS */
  .p-archive-carousel__txt--wakkafes2025 {
    font-size: min(20px, calc(20 / 1920 * 100vw));
    letter-spacing: 0.1em;
  }

  @media screen and (max-width: 767px) {
    .p-archive-carousel__txt {
      font-size: calc(1.5 * var(--base-unit));
    }
    .p-archive-carousel__txt--wakkafes2025 {
      font-size: calc(1.7 * var(--base-unit));
    }
  }
  @media screen and (max-width: 767px) {
    .p-archive-carousel__txt-wrap {
      aspect-ratio: 335/306 !important;
    }
  }
  .p-archive-carousel__txt-inner {
    position: relative;
    height: 100%;
  }
  .p-archive-carousel__txt-inner::after {
    position: absolute;
    content: "";
    display: block;
    aspect-ratio: 1;
    width: calc(35 / 606 * 100%);
    background: url("/assets_r24/images/cmn-mark_arrow_3.svg") no-repeat
      center/contain;
    bottom: 0;
    right: 0;
  }
  @media screen and (max-width: 767px) {
    .p-archive-carousel__txt-inner::after {
      width: calc(2 * var(--base-unit));
    }
  }
  .p-archive-carousel .c-carousel1__image {
    aspect-ratio: 793/442;
  }
  .p-archive-carousel .c-carousel1__image.c-carousel1__image--bd {
    border:1px solid #999;
  }

  .p-archive-carousel .c-carousel1__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  @media screen and (max-width: 1199px) {
    .p-btn03__list--2 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media screen and (max-width: 767px) {
    .p-btn03__list--2 {
      grid-template-columns: 1fr !important;
    }
  }
  .p-panel01__txt--2 {
    font-size: min(20px, 1.0416666667vw) !important;
  }
  @media screen and (max-width: 767px) {
    .p-panel01__txt--2 {
      font-size: calc(1.8 * var(--base-unit)) !important;
    }
  }
  .p-panel01__img--2 img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
    width: 100%;
    aspect-ratio: 16/9 !important;
  }
  @media screen and (min-width: 768px) {
    .p-archive-top-sec__btn-area--hide-pc {
      display: none;
    }
  }

  /* ---------------------------------------------
    *  広告アーカイブ下層
    --------------------------------------------- */
   @media screen and (max-width: 768px) {
    .p-about-archive-content section:not(:first-of-type) {
      margin-top: calc(5 * var(--base-unit));
    }
  }
  .p-about-archive-panel {
    margin: calc(3 * var(--base-unit)) auto 0;
    width: var(--width-contents);
  }
  @media screen and (max-width: 768px) {
    .p-about-archive-panel {
      margin-top: calc(4 * var(--base-unit));
    }
  }
  .p-about-archive-panel__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: calc(2.4 * var(--base-unit));
    column-gap: calc(2.4 * var(--base-unit));
    /* row-gap: calc(2.4 * var(--base-unit)); */
  }
  @media screen and (max-width: 1199px) {
    .p-about-archive-panel__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__list {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  @media print, screen and (min-width: 768px) {
    .p-about-archive-panel__item {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      gap: 0;
    }
    .p-about-archive-panel__item:nth-of-type(n + 5) {
      margin-top: calc(5 * var(--base-unit));
    }
  }
  .p-about-archive-panel__item.p-about-archive-panel__item--data {
    display: block;
  }
  .p-gallery2__items .p-about-archive-panel__item--data {
    border-bottom: none;
  }
  @media screen and (min-width: 768px) and (max-width: 1199px)  {
    .p-about-archive-panel__item:nth-of-type(n + 3) {
      margin-top: calc(5 * var(--base-unit));
    }
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__item:nth-of-type(n + 2) {
      margin-top: calc(5 * var(--base-unit));
    }
  }


  @media screen and (max-width: 767px) {
    .p-about-archive-panel__list-normal {
      grid-template-columns: 1fr;
      gap: var(--mc-layout--offset--of-outer-left);
    }
  }
  @media print, screen and (min-width: 768px) and (max-width: 1199px) {
    .p-about-archive-panel__list-normal {
      gap: var(--mc-layout--gap);
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-about-archive-panel__list-normal {
      gap: var(--mc-layout--gap);
    }
  }
  @media screen and (min-width: 1440px) {
    .p-about-archive-panel__list-normal {
      gap: var(--mc-layout--gap);
    }
  }



  .p-about-archive-panel__img-wrap--bd {
    border:1px solid #d5d5d5;
  }
  .p-about-archive-panel__img {
    width: 100%;
    height: auto;
  }
  .p-about-archive-panel__ttl {
    margin-top: calc(2 * var(--base-unit));
    font-size: calc(1.6 * var(--base-unit));
    letter-spacing: 0.1em;
    line-height: 1.6;
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__ttl {
      margin-top: calc(1 * var(--base-unit));
      font-size: calc(1.8 * var(--base-unit));
    }
  }
  @media print, screen and (min-width: 768px) {
    .p-about-archive-panel__txt-wrap {
      margin-top: calc(1 * var(--base-unit));
      min-height: calc(2.5 * var(--base-unit));
    }
  }
  .p-about-archive-panel__txt {
    margin-top: calc(0.2 * var(--base-unit));
    font-size: calc(1.4 * var(--base-unit));
    letter-spacing: 0.03em;
    line-height: 1.7857142857;
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__txt {
      font-size: calc(1.5 * var(--base-unit));
    }
  }
  .p-about-archive-panel__btn-wrap {
    min-height: calc(5 * var(--base-unit));
    margin-top: calc(1.6 * var(--base-unit));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: calc(1.2 * var(--base-unit));
    column-gap: calc(1.2 * var(--base-unit));
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__btn-wrap {
      min-height: calc(5.4 * var(--base-unit));
      -moz-column-gap: calc(1 * var(--base-unit));
      column-gap: calc(1 * var(--base-unit));
    }
  }
  .p-about-archive-panel button.p-about-archive-panel__btn {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    text-indent: 0.01px;
    text-overflow: "";
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    cursor: pointer;
  }
  .p-about-archive-panel__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(0.4 * var(--base-unit)) 0.5em;
    color: #000;
    font-size: calc(1.2 * var(--base-unit));
    letter-spacing: 0.07em;
    line-height: 1.25;
    font-family: var(--mc--str--of-font-family-name--basic);
    background-color: #bebebe;
    border-color: #bebebe;
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__btn {
      min-height: calc(4.4 * var(--base-unit));
      font-size: calc(1.7 * var(--base-unit));
    }
  }
  .p-about-archive-panel__btn::before {
    content: "";
    display: block;
  }
  .p-about-archive-panel__btn--web {
    -moz-column-gap: calc(0.8 * var(--base-unit));
    column-gap: calc(0.8 * var(--base-unit));
  }
  .p-about-archive-panel__btn--web::before {
    width: calc(2.5 * var(--base-unit));
    height: calc(1.6 * var(--base-unit));
    background: url("/jp/en/about/ad_library/list/assets_r24/images/icon_btn-1.svg")
      no-repeat center/contain;
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__btn--web::before {
      width: calc(2 * var(--base-unit));
      height: calc(2 * var(--base-unit));
    }
  }
  .p-about-archive-panel__btn--movie {
    -moz-column-gap: calc(1.1 * var(--base-unit));
    column-gap: calc(1.1 * var(--base-unit));
  }
  .p-about-archive-panel__btn--movie::before {
    width: calc(2 * var(--base-unit));
    height: calc(2 * var(--base-unit));
    background: url("/jp/en/about/ad_library/list/assets_r24/images/icon-movie.svg")
      no-repeat center/contain;
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel__btn--movie::before {
      width: calc(2 * var(--base-unit));
      height: calc(2 * var(--base-unit));
    }
  }
  .p-about-archive-panel button.p-about-archive-panel__btn,
  .p-about-archive-panel__btn[href] {
    background-color: #fff;
    border: 1px solid #000;
  }
  @media screen and (min-width: 768px) {
    .p-about-archive-panel button.p-about-archive-panel__btn,
    .p-about-archive-panel__btn[href] {
      transition: background-color 0.3s ease 0s, color 0.3s ease 0s,
        border-color 0.3s ease 0s;
    }
    .p-about-archive-panel button.p-about-archive-panel__btn::before,
    .p-about-archive-panel__btn[href]::before {
      transition: filter 0.3s ease 0s;
    }
    .p-about-archive-panel button.p-about-archive-panel__btn:hover,
    .p-about-archive-panel__btn[href]:hover {
      border-color: #a22041;
      background: #a22041;
      color: #fff;
    }
    .p-about-archive-panel button.p-about-archive-panel__btn:hover::before,
    .p-about-archive-panel__btn[href]:hover::before {
      filter: brightness(0) invert(1);
    }
  }
  .p-about-archive-panel .p-link01 {
    margin-top: calc(1.6 * var(--base-unit));
  }
  @media screen and (max-width: 767px) {
    .p-about-archive-panel .p-link01 {
      margin-top: calc(2.3 * var(--base-unit));
      font-size: calc(1.5 * var(--base-unit));
    }
  }
  .p-panel01__list--archive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: calc(2.4 * var(--base-unit));
    column-gap: calc(2.4 * var(--base-unit));
  }
  @media screen and (max-width: 1199px) {
    .p-panel01__list--archive {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media screen and (max-width: 767px) {
    .p-panel01__list--archive {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }
  .p-panel01__img--archive {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: 384/214 !important;
    place-content: inherit !important;
  }
  .p-panel01__img--archive img {
    -o-object-fit: contain;
    object-fit: contain;
    transition: 0.3s ease 0s;
    display: block;
    width: 100%;
    height: auto;
  }


  /* .p-about-archive-panel__btn-wrap-transparent {
    display: none;
  } */
   
  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-about-archive-panel .p-gallery2__items>li:nth-child(n+7) {
      display: block;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-about-archive-panel .p-gallery2__items>li:nth-child(n+7) {
      display: block;
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-about-archive-panel .p-gallery2__items>li:nth-child(n+9) {
      display: none;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-about-archive-panel .p-gallery2__items>li:nth-child(n+9) {
      display: none;
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-about-archive-panel .p-gallery2--active .p-gallery2__items>li:nth-child(n+9) {
      display: block;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-about-archive-panel .p-gallery2--active .p-gallery2__items>li:nth-child(n+9) {
      display: block;
    }
  }

  .p-about-archive-panel__item--data {
  }
  .p-about-archive-panel__item--data_inner {
  }

  .p-about-archive-panel__movie-modal {
    position: relative;
    overflow: hidden;
  }
  .p-about-archive-panel__img-wrap {
    position: relative;
  }
  .p-about-archive-panel__movie-modal__img-wrap::before {
    content: "";
    display: block;
    width: calc(6 * var(--base-unit));
    height: calc(6 * var(--base-unit));
    background: url(/assets_r24/images/cmn-mark_play_4.svg) no-repeat center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }

  a.p-about-archive__modal-link img {
    object-fit: contain;
    transition: 0.3s ease 0s;
    backface-visibility: hidden;
    will-change: transform;
  }
  @media screen and (min-width: 768px) {
    a.p-about-archive__modal-link:hover img {
      transform: scale(1.1);
      transition: 0.3s ease 0s;
    }
  }

  @media screen and (max-width: 767px) {
    .p-gallery2__terminal{
      margin-top: 50px;
    }
  }

  .box-boder {
    border: 1px solid #d5d5d5;
  }

  @media screen and (min-width: 1200px) {
    .p-about-archive-panel__txt-wrap.align_side {
      min-height: calc(10 * var(--base-unit));
    }
  }

}