@layer pages {

/* ===== ピックアップ ===== */
   .articles-pickup {
      overflow: hidden;
      position: relative;
      padding-top: 60px;
      margin-bottom: 80px;

      .articles-ttl {
         flex-direction: row;
         column-gap: 24px;
      }
   }

   .articles-pickup__list{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 30px 30px;
      margin-bottom: 50px;
   }

   .articles-pickup__slide {
      height: 400px;
      padding-top: 50px;
      margin-top: 40px;
      border-top: 1px solid var(--color-text);
   }

   .articles-pickup__item {
      transform-origin: left top;
   }

   .articles-pickup__link {
      color: var(--color-text);
   }

   .swiper-initialized .articles-pickup__item {
      transition: 0.4s ease;

      &:hover {
         position: relative;
         z-index: 2;
         transform: scale(1.1);

         .articles-pickup__ttl {
            color: var(--color-main);
         }
      }
   }

   .articles-pickup__thumb {
      aspect-ratio: 16/9;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }

   .articles-pickup__ttl {
      font-weight: var(--font-weight-semibold);
      margin-top: 10px;
      transition: color 0.2s;
   }

   .articles-pickup__excerpt p {
      font-size: 1.4rem;
      line-height: 1.5;
      margin-top: .5em;
      margin-bottom: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
   }

   .articles-pickup__controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      .swiper-pagination {
         transform: translate(0);
         width: auto;
         position: static;
      }
   }

   .swiper-pickup {
      overflow: visible;
   }

   .swiper-pickup-toggle {
      display: inline-block;
      width: 45px;
      aspect-ratio: 1/1;
      border: 1px solid #d4d0de;
      position: relative;
      transition: .2s;

      &::before {
         content: "";
         display: inline-block;
         width: 10px;
         aspect-ratio: 23/31;
         background: url("/assets/img/pages/top/icon-pause.png") no-repeat center/contain;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         transition: .2s;
      }

      &:hover {
         background: var(--color-text);

         &::before {
            background: url("/assets/img/pages/top/icon-pause-wh.png") no-repeat center/contain;
         }
      }

      &.is-paused {
         background: var(--color-text);

         &::before {
            width: 0;
            height: 0;
            border-left: 10px solid #fff;
            border-right: 10px solid transparent;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            transform: translate(-20%, -50%);
         }
      }
   }

   @media (max-width: 768px) {
      .articles-pickup {
         padding-top: 40px;
         margin-bottom: 40px;
      }

      .articles-pickup {
         .articles-ttl {
            flex-direction: column;
         }
      }

      .articles-pickup__slide {
         height: 330px;
         margin-top: 40px;
      }

      .articles-pickup__list{
         grid-template-columns: 1fr;
         gap: 30px;
      }

      .articles-pickup__item {
         transform-origin: center;

         &.swiper-slide-active {
            transform: scale(1.2);
         }

         &:hover {
            transform: none;
         }
      }

      .articles-pickup__ttl {
         font-size: 1.6rem;
      }

      .articles-pickup__excerpt p {
         font-size: 1.2rem;
      }

      .articles-pickup__controls {
         gap: 20px;
      }
}


   /* ===== NEWS ===== */
   /* レイアウト */
   .articles-news {
      margin-bottom: 60px;
   }

   .articles-news__inner {
      display: flex;
      position: relative;
   }

   .articles-news__head {
      width: 42%;
      z-index: 1;
      margin-top: 132px;
      margin-bottom: -60px;
      margin-right: -30px;
      position: relative;

      img {
         height: 100%;
         position: absolute;
         inset: 0;
         object-fit: cover;
      }
   }

   .articles-news__body {
      width: calc(58% + 30px);
   }


   /* タブ */
   .articles-news__tabs {
      display: flex;
      padding: 0 100px;
   }

   .articles-news__tab {
      position: relative;
      padding: 1em 3em;
      font-weight: var(--font-weight-semibold);
      font-size: 1.4rem;

      &::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -2px;
         width: 100%;
         height: 4px;
         background: var(--color-main);
         transform: scaleX(0);
         transform-origin: left;
         transition: transform 0.3s ease;
      }

      &:hover::after,
      &.is-active::after {
         transform: scaleX(1);
      }
   }

   /* NEWS 一覧 */
   .articles-news__box {
      border: 1px solid var(--color-text);
      border-right: none;
      padding: 55px 80px 65px;

   }

   .articles-news__item {
      border-bottom: 1px solid #e9edf5;


      &.is-hidden {
         display: none;
      }

      &:hover .articles-news__arrow {
         background: #e9edf5;
      }
   }

   .articles-news__link {
      display: block;
      color: var(--color-text);
      gap: 3px 24px;
      padding: 24px 64px 24px 24px;
      background-image: none;
      position: relative;
   }

   .articles-news__arrow {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54px;
      aspect-ratio: 1/1;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      transition: .2s;

      &::after {
         content: "";
         display: inline-block;
         width: 16px;
         aspect-ratio: 1/1;
         background: url("/assets/img/pages/top/arrow01.png") no-repeat center/contain;
      }
   }

   .articles-news__meta {
      display: flex;
      align-items: center;
      gap: 20px;
   }

   .articles-news__date {
      font-size: 1.7rem;
      font-family: var(--font-family-oswald);
      font-weight: var(--font-weight-normal);
   }

   .articles-news__cat {
      font-size: 1.4rem;
      padding: 0 20px;
      border-left: 1px solid var(--color-main);
      border-right: 1px solid var(--color-main);
   }

   .articles-news__excerpt {
      font-size: 1.5rem;
      line-height: 1.7;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: 0;
   }

   .articles-news__btn {
      margin-top: 50px;

      .articles-more {
         margin-left: auto;
      }
   }

   @media (max-width: 1280px) {
      .articles-news__tabs {
         padding: 0;
         justify-content: center;
      }

      .articles-news__box {
         padding: 50px;
      }
   }

   @media (max-width: 900px) {
      .articles-news {
         margin: 0;
      }

      .articles-news__inner {
         flex-direction: column;
      }

      .articles-news__head {
         aspect-ratio: 3/2;
         margin: 30px 0 0;
         width: 100%;
         overflow: hidden;

      }

      .articles-news__body {
         width: 100%;
         margin-top: 10px;
      }

      .articles-news__tab {
         padding: 1.2em;
         font-size: 1.2rem;
      }

      .articles-news__box {
         padding: 20px 0 50px;
      }

      .articles-news__btn {
         margin: 30px 5% 0;
      }

      .articles-news__btn .articles-more {
         margin-left: auto;
      }

      .articles-news__arrow {
         right: 20px;
         width: 45px;
      }
   }


   /* ===== EVENT ===== */
   .articles-event {
      overflow: hidden;
   }

   .articles-event__slide {
      width: calc(100% - 200px);
      overflow: hidden;
      margin: 50px auto 0;
      padding: 1px;
   }

   .articles-event__list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 0;
      row-gap: 30px;
      padding-bottom: 20px;
   }

   .articles-event__item {
      height: auto;
      border-right: 1px solid var(--color-text);

      article {
         height: 100%;
      }

      &:nth-child(4n + 1) {
         border-left: 1px solid var(--color-text);
      }

      &:hover .articles-event__box {
         background: var(--color-main);
      }
   }

   .articles-event__link {
      color: var(--color-text);
      display: grid;
      grid-template-rows: 1fr auto auto;
      row-gap: 12px;
      height: 100%;
      padding: 0 30px;
      background-image: none;
   }

   .articles-event__date {
      width: 100%;
   }

   /* 日付 */
   .articles-event__box {
      font-family: var(--font-family-oswald);
      font-weight: var(--font-weight-light);
      background: var(--color-text);
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 14px;
      color: #fff;
      transition: .2s;
   }

   .articles-event__year {
      line-height: 1;
   }

   .articles-event__period {
      font-size: 2.4rem;
      line-height: 1.2;
      margin-top: 3px;

      small {
         font-size: 1.4rem;
      }
   }

   .articles-event__box.is_2days {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: end;
      justify-content: start;
      column-gap: 0;
   }

   .articles-event__box.is_2days .articles-event__year {
      grid-column: 1 / -1;
      margin-bottom: 3px;
   }

   .articles-event__box.is_2days .articles-event__period {
      margin-top: 0;
      display: inline-flex;
      align-items: baseline;
   }

   .articles-event__box.is_2days .articles-event__period+.articles-event__period::before {
      content: "・";
      margin: 0 .3em;
   }


   /* 場所・カテゴリ */
   .articles-event__meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 14px;

      li {
         display: flex;
         align-items: center;
         gap: 10px;

         &::before {
            content: "";
            width: 18px;
            aspect-ratio: 1/1;
         }
      }
   }

   .articles-event__place::before {
      background: url("../../../img/pages/top/icon-pin.png") no-repeat center/contain;
   }

   .articles-event__cat::before {
      background: url("../../../img/pages/top/icon-tag.png") no-repeat center/contain;
   }

   @media (max-width: 768px) {
      .articles-event {
         padding-top: 0;
      }

      .articles-event__slide {
         width: 90%;
      }

      .articles-event__list {
         grid-template-columns: 1fr;
         gap: 30px;
      }
	}
}