@layer pages {

   /* ===== TOP 共通 ===== */
   /* セクション見出し */
   .top-ttl {
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-semibold);
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      row-gap: 12px;
      padding: 0 100px;
   }

   .top-ttl__en {
      font-size: 6rem;
      font-weight: var(--font-weight-medium);
      flex-shrink: 0;
   }

   .top-ttl__jp {
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      gap: 1em;
      position: relative;

      &::before {
         content: "";
         display: inline-block;
         width: 12px;
         aspect-ratio: 1/1;
         background: var(--color-main);
      }
   }

   @media (max-width: 820px) {
      .top-ttl {
         padding: 0 5%;
      }

   }

   @media (max-width: 768px) {

      .top-ttl__en {
         font-size: 4rem;
      }

      .top-ttl__jp {
         font-size: 1.4rem;
      }
   }

   /* swiper */
   .swiper-button-next,
   .swiper-button-prev {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid #d4d0de;
      border-radius: 50%;
      position: relative;
      right: 0;
      transition: 0.2s;

      &::before {
         content: "";
         width: 30%;
         aspect-ratio: 1/1;
         background: url("/assets/img/pages/top/arrow01.png") no-repeat center/contain;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         mask-image: none;
      }

      &.swiper-button-disabled {
         opacity: 0.3;
         pointer-events: none;
      }

      svg {
         display: none;
      }
   }

   .swiper-button-prev {
      &::before {
         transform: translate(-50%, -50%) scaleX(-1);
      }
   }

   .top-controls__arrow {
      display: flex;
      align-items: center;
      gap: 10px;
   }

   @media (max-width: 768px) {
      .top-now__header {
         height: 450px;
         padding: 30px 0;
      }

      .swiper-button-next,
      .swiper-button-prev {
         width: 40px;
         height: 40px;
      }

      .top-controls {
         margin-top: 30px;
      }
   }

   /* 共通ボタン */
   .top-btn {
      color: var(--color-text);
      font-weight: var(--font-weight-medium);
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      justify-content: space-between;
      padding: 2em;
      border: 1px solid var(--color-text);
      transition: .2s;
      background-image: none;

      &:hover {
         background: #e9edf5;

         .top-btn__arrow {
            animation: btnArrow 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
         }
      }
   }

   .top-btn__arrow {
      display: inline-block;
      width: 65px;
      background: url("/assets/img/global/btn-arrow.png") no-repeat center/contain;
      aspect-ratio: 143/20;
   }

   @keyframes btnArrow {
      0% {
         opacity: 1;
         transform: translateX(0);
      }

      49.9% {
         opacity: 0;
         transform: translateX(10px);
      }

      50% {
         opacity: 0;
         transform: translateX(-10px);
      }

      100% {
         opacity: 1;
         transform: translateX(0);
      }
   }

   /* moreボタン */
   .top-more {
      color: var(--color-text);
      font-family: var(--font-family-oswald);
      font-weight: var(--font-weight-medium);
      letter-spacing: 0.03em;
      width: 170px;
      display: flex;
      text-align: center;
      justify-content: space-between;
      font-size: 2rem;
      padding: 15px 20px;
      border: 1px solid #d4d0de;
      border-radius: 999px;
      overflow: hidden;

      &:hover {
         background: #e9edf5;

         .top-more__arrow {
            animation: btnArrow 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
         }
      }
   }

   .top-more__arrow {
      display: inline-block;
      width: 64px;
      background: url("/assets/img/global/btn-arrow.png") no-repeat center/contain;
      aspect-ratio: 143/20;
   }

   @media screen and (max-width: 768px) {
      .top-more {
         font-size: 1.8rem;
      }
   }

   /* ===== heaader ===== */
   .l-header__inner {
      background: transparent;
      border-bottom-color: #fff;
      transition: background .2s;

      .l-keyword,
      .l-header__sns {
         opacity: 0;
         visibility: hidden;
      }

      .l-header__logoImg[data-logo="normal"] {
         opacity: 0;
      }

      .l-header__logoImg[data-logo="white"] {
         opacity: 1;
      }

      .l-header__menu {
         color: #fff;
      }

      .l-header__link {
         color: #fff;
      }

      .l-header__item {
         border-left-color: #fff;

         &:last-child {
            border-left-color: transparent;
         }

         &.is-request .l-header__link::before {
            background: url("/assets/img/global/icon-request-wh.svg") no-repeat center/contain;
         }

         &.is-mail .l-header__link::before {
            background: url("/assets/img/global/icon-mail-wh.svg") no-repeat center/contain;
         }

         &.is-access .l-header__link::before {
            background: url("/assets/img/global/icon-access-wh.svg") no-repeat center/contain;
         }
      }
   }


   .l-header.is-menu-top,
   .l-header.is-scrolled {
      .l-header__inner {
         background: #fff;
         border-color: var(--color-navy);

         .l-keyword,
         .l-header__sns {
            opacity: 1;
            visibility: visible;
         }
      }

      .l-header__logoImg[data-logo="normal"] {
         opacity: 1;
      }

      .l-header__logoImg[data-logo="white"] {
         opacity: 0;
      }

      .l-header__menu {
         color: var(--color-navy);

         &:hover {
            color: #fff;
         }
      }

      .l-header__link {
         color: var(--color-navy);
      }

      .l-header__item:hover {
         .l-header__link {
            background: var(--color-navy);
            color: #fff;
         }

         &.is-request .l-header__link::before {
            background-image: url("/assets/img/global/icon-request-wh.svg");
         }

         &.is-mail .l-header__link::before {
            background-image: url("/assets/img/global/icon-mail-wh.svg");
         }

         &.is-access .l-header__link::before {
            background-image: url("/assets/img/global/icon-access-wh.svg");
         }
      }

      .l-header__item {
         border-left-color: var(--color-navy);

         &:last-child {
            order-left-color: var(--color-navy);
         }

         &.is-request .l-header__link::before {
            background: url("/assets/img/global/icon-request.svg") no-repeat center/contain;
         }

         &.is-mail .l-header__link::before {
            background: url("/assets/img/global/icon-mail.svg") no-repeat center/contain;
         }

         &.is-access .l-header__link::before {
            background: url("/assets/img/global/icon-access.svg") no-repeat center/contain;
         }
      }
   }

   @media screen and (max-width: 768px) {
      .l-header__inner {
         .l-header__item:last-child {
            border-left-color: #fff;
         }
      }
   }

   /* ===== FV ===== */
   .top-fv {
      position: relative;
   }

   .top-fv__movie {
      position: relative;
   }

   .top-fv__element {
      aspect-ratio: 16/9;
      background: #fafafa;
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.is-sp {
         display: none;
      }
   }

   .top-fv__playBtn {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      border: none;
      padding: 0;
      z-index: 2;
   }

   .top-fv__icon {
      position: relative;
      width: 70px;
      aspect-ratio: 1/1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      opacity: 0.4;
      transition: opacity 0.3s ease;
   }

   .top-fv__movie:not(.is-playing) .top-fv__playBtn:hover .top-fv__icon {
      opacity: 0.8;
   }

   .top-fv__movie.is-playing .top-fv__icon {
      opacity: 0;
      transition: opacity 2s ease;
   }

   .top-fv__movie.is-playing:hover .top-fv__icon {
      opacity: 0.8;
      transition: opacity 0.3s ease;
   }

   .top-fv__icon-play,
   .top-fv__icon-pause {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease, transform 0.3s ease;
   }

   .top-fv__icon-play {
      opacity: 1;
      transform: scale(1) rotate(0deg);
   }

   .top-fv__icon-play::before {
      content: "";
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 14px solid var(--color-text);
      margin-left: 3px;
   }

   .top-fv__icon-pause {
      opacity: 0;
      transform: scale(0.5) rotate(-90deg);
   }

   .top-fv__icon-pause::before {
      content: "";
      width: 16px;
      height: 18px;
      background:
         linear-gradient(var(--color-text) 0 100%) 0 0/6px 100% no-repeat,
         linear-gradient(var(--color-text) 0 100%) 100% 0/6px 100% no-repeat;
   }

   .top-fv__movie.is-playing .top-fv__icon-play {
      opacity: 0;
      transform: scale(0.5) rotate(90deg);
   }

   .top-fv__movie.is-playing .top-fv__icon-pause {
      opacity: 1;
      transform: scale(1) rotate(0deg);
   }

   /* 再生中 + ホバー時だけフワッと表示(これは既存) */
   .top-fv__movie.is-playing:hover .top-fv__icon {
      opacity: 0.8;
      transition: opacity 0.3s ease;
   }

   /* ホバーが続いて動きがない(is-idle)場合は隠す */
   .top-fv__movie.is-playing:hover.is-idle .top-fv__icon {
      opacity: 0;
      transition: opacity 0.5s ease;
   }



   /* スクロール */
   .top-scroll {
      height: 100%;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: #fff;
      border-left: 1px solid #fff;
      position: absolute;
      right: 0;
      top: 0;
   }

   .top-scroll__text {
      width: 11px;
   }

   .top-scroll__line {
      width: 1px;
      height: 80px;
      background: #fff;
      transform-origin: top;
      animation: scrollLine 1.8s ease-in-out infinite;
   }

   @keyframes scrollLine {
      0% {
         transform: scaleY(0);
         transform-origin: top;
      }

      50% {
         transform: scaleY(1);
         transform-origin: top;
      }

      50.1% {
         transform-origin: bottom;
      }

      100% {
         transform: scaleY(0);
         transform-origin: bottom;
      }
   }

   /* リクルート */
   .top-btnRecruit {
      display: flex;
      align-items: center;
      color: var(--color-text);
      background: #fff;
      border-radius: 2px;
      overflow: hidden;
      position: absolute;
      bottom: 50px;
      right: 130px;
      z-index: 10;

      &:hover {

         .top-btnRecruit__arrow::after {
            animation: bannerArrow 0.6s ease;
         }

         .top-btnRecruit__thumb img {
            transform: scale(1.15);
         }
      }
   }

   .top-btnRecruit__thumb {
      width: 180px;
      align-self: stretch;
      overflow: hidden;

      img {
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
      }
   }

   .top-btnRecruit__body {
      font-weight: var(--font-weight-semibold);
      padding: 30px;
      padding-right: 100px;
      position: relative;
   }

   .top-btnRecruit__ttl {
      font-family: var(--font-family-mincho);
      font-size: 2.6rem;
   }

   .top-btnRecruit__sub {
      font-size: 1.4rem;
      margin-top: 10px;
   }

   .top-btnRecruit__arrow {
      display: inline-block;
      width: 40px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      border: 1px solid #d4d0de;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      overflow: hidden;

      &::after {
         content: "";
         display: inline-block;
         width: 45%;
         aspect-ratio: 1/1;
         background: url("/assets/img/pages/top/arrow01.png") no-repeat center/contain;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
      }
   }

   @keyframes bannerArrow {
      0% {
         transform: translate(-50%, -50%);
         opacity: 1;
      }

      45% {
         transform: translate(16px, -50%);
         opacity: 0;
      }

      55% {
         transform: translate(-16px, -50%);
         opacity: 0;
      }

      100% {
         transform: translate(-50%, -50%);
         opacity: 1;
      }
   }

   @media (max-width: 820px) {
      .top-btnRecruit {
         bottom: 30px;
         right: 110px;
      }

      .top-btnRecruit__ttl {
         font-size: 2rem;
      }


      .top-btnRecruit__thumb {
         width: 140px;
      }

      .top-btnRecruit__body {
         padding: 20px;
         padding-right: 50px;
      }
   }

   @media (max-width: 768px) {

      .top-fv__txt {
         top: 15%;
      }

      .top-scroll {
         display: none;
      }

      .top-btnRecruit {
         width: 90%;
         bottom: 20px;
         right: 5%;
      }



      .top-btnRecruit__sub {
         font-size: 1.2rem;
      }

      .top-btnRecruit__arrow {
         width: 30px;
         right: 10px;
      }
   }

   @media (max-width: 600px) {
      .top-fv__element {
         aspect-ratio: 39/70;

         &.is-sp {
            display: block;
         }

         &.is-pc {
            display: none;
         }
      }
   }

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

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

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

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

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

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

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

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

   .top-pickup__thumb {
      aspect-ratio: 3/2;

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

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

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

   .top-pickup__controls {
      width: 100%;
      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-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) {
      .top-pickup {
         padding-top: 40px;
         margin-bottom: 40px;
      }

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

      .top-pickup__slide {
         margin-top: 40px;
      }

      .top-pickup__item {
         transform-origin: center;

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

         &:hover {
            transform: none;
         }
      }

      .top-pickup__ttl {
         font-size: 1.4rem;
      }

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

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


   /* ===== 安田の今 ===== */
   .top-now {
      border-top: 1px solid var(--color-text);
      overflow: hidden;
      padding-bottom: 40px;

      .top-ttl__jp {
         margin-top: 1em;
      }
   }

   .top-now__header {
      background: no-repeat center/cover;
      height: 520px;
      padding: 60px 0;
   }

   .top-now__item {
      border-bottom: 1px solid var(--color-text);

      article {
         height: 100%;
      }

      &:not(:first-child) {
         border-left: 1px solid var(--color-text);
      }
   }

   .top-now__link {
      color: var(--color-text);
      display: grid;
      grid-template-rows: auto auto minmax(calc(1.5em * 3), auto) auto;
      align-content: start;
      height: 100%;
      padding: 20px;
      background-image: none;
   }

   .top-now__thumb {
      aspect-ratio: 3 / 2;
      overflow: hidden;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
      }
   }

   .top-now__date {
      font-family: var(--font-family-oswald);
      font-size: 1.8rem;
      display: block;
      margin-top: 20px;
   }

   .top-now__item:hover {
      .top-now__thumb img {
         transform: scale(1.1);
      }

      .top-now__date {
         color: var(--color-main);
      }
   }

   .top-now__excerpt p {
      font-size: 1.4rem;
      margin-top: 10px;
      margin-bottom: 0;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
   }

   .top-now__cat {
      font-size: 1.4rem;
      margin: 20px 0;

      span {
         display: inline-block;
         padding: 0 12px;
         border-left: 1px solid var(--color-main);

         &:last-child {
            border-right: 1px solid var(--color-main);
         }
      }
   }

   .top-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40px;
   }

   .top-now__arrow:hover {
      background: var(--color-main);

      &::before {
         background: #fff;
      }

      &::after {
         border-color: #fff;
      }
   }

   @keyframes arrowSlide {
      0% {
         translate: 0 0;
         opacity: 1;
      }

      45% {
         translate: 60% 0;
         opacity: 0;
      }

      60% {
         translate: -60% 0;
         opacity: 0;
      }

      100% {
         translate: 0 0;
         opacity: 1;
      }
   }

   @media (max-width: 768px) {
      .top-now__header {
         height: 450px;
         padding: 30px 0;
      }

      .top-controls {
         margin-top: 30px;
      }
   }


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

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

   .top-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;
      }
   }

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


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

   .top-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 一覧 */
   .top-news__box {
      border: 1px solid var(--color-text);
      border-right: none;
      padding: 55px 80px 65px;

   }

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


      &.is-hidden {
         display: none;
      }

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

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

   .top-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;
      }
   }

   .top-news__meta {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 3px;
   }

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

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

   .top-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;
   }

   .top-news__btn {
      margin-top: 50px;
      margin-right: 100px;

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

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

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

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

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

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

      }

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

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

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

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

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

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


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

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

   .top-event__list {
      padding-bottom: 20px;
   }

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

      article {
         height: 100%;
      }

      &:first-child {
         border-left: 1px solid var(--color-text);
      }

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

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

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

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

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

      small {
         font-size: 1.4rem;
      }
   }


   /* 場所・カテゴリ */
   .top-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;
         }
      }
   }

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

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

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

      .top-event__slide {
         width: 90%;
      }
   }


   /* ===== ABOUT ===== */
   .top-about {
      text-align: center;
      position: relative;
      margin-bottom: 40px;

      &::after {
         content: "";
         display: block;
         width: 100%;
         aspect-ratio: 70/23;
         background: url(/assets/img/pages/top/bg-about.png) no-repeat center bottom/contain;
         position: absolute;
         bottom: 40px;
         z-index: 1;
      }

      .top-ttl__en {
         font-size: 5.2rem;
      }

      .top-ttl__jp {
         justify-content: center;
         margin-top: 5px;
      }
   }

   .top-about__box {
      max-width: 90%;
      margin: 0 auto;
      border: 1px solid var(--color-text);
      padding: 0 20px 40px;
      margin-top: -55px;
   }

   .top-about__anime {
      opacity: 0;
      filter: blur(10px);

      &.is-show {
         animation: blurIn 1s ease forwards;
      }
   }

   .top-about__catch {
      font-weight: var(--font-weight-light);
      font-size: 5.2rem;
      letter-spacing: 0.1em;
      margin-top: 1.5em;
      margin-bottom: .5em;

      rt {
         font-size: 1.2rem;
      }
   }

   @keyframes blurIn {
      from {
         opacity: 0;
         filter: blur(10px);
      }

      to {
         opacity: 1;
         filter: blur(0);
      }
   }

   .top-about__text {
      margin-top: 2em;
      margin-bottom: calc(100vw * 23 / 70 * 0.5);

      p {
         line-height: 2.2;
      }
   }

   /* ボタン*/
   .top-about__btn {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 2;

      .top-btn {
         margin: 0 auto;
      }
   }

   @media (max-width: 768px) {
      .top-about {
         .top-ttl__en {
            font-size: 4.8rem;
         }

         .top-ttl__jp {
            margin-top: 12px;
         }
      }

      .top-about__catch {
         font-size: 3.5rem;
         margin-top: 2em;
      }
   }

   /* ===== SYNERGY ===== */
   .top-synergy__layout {
      width: 94%;
      margin-left: auto;
      display: grid;
      grid-template-columns: 350px 1fr;
      align-items: start;
   }

   .top-synergy__body {
      transform: translateX(50px);
      position: relative;
   }

   .top-synergy__head {
      font-size: 6rem;
      font-family: var(--font-en, serif);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .1em;
   }

   .top-synergy__txt {
      margin-top: 40px;
      font-size: 1.4rem;

      p {
         line-height: 2.2;
      }
   }

   .top-synergy__btn {
      margin-top: 40px;
   }

   .top-synergy__imgs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      align-items: start;
      padding-top: 50px;

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

      img:nth-child(2) {
         margin-top: 48px;
      }

      img:nth-child(3) {
         margin-top: 16px;
      }
   }

   /* SP img */
   .top-synergy__sp1 {
      display: none;
      width: 45%;
      position: absolute;
      right: -5%;
      top: 15%;
      z-index: -1;
   }

   .top-synergy__sp2 {
      display: none;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
      transform: translateY(-30px);
      position: relative;
      z-index: -1;

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

      img:first-child {
         grid-row: span 2;
         padding-bottom: 60px;
      }

      img:nth-child(2) {
         width: 60%;
         aspect-ratio: 1/1;
         margin-left: auto;
      }

      img:last-child {
         aspect-ratio: 3/2;
      }
   }


   @media (max-width: 960px) {
      .top-synergy__layout {
         width: 90%;
         display: block;
         margin: 0 auto;
         position: relative;
      }

      .top-synergy__body {
         transform: translateX(0);
      }

      .top-synergy__btn {
         text-align: center;
         margin-top: 20px;
      }

      .top-synergy__imgs {
         display: none;
      }

      .top-synergy__sp1 {
         display: block;
      }

      .top-synergy__sp2 {
         display: grid;
      }
   }

   @media (max-width: 768px) {

      .top-synergy__head {
         font-size: 4.8rem;
      }


   }

   /* ===== ボタン ===== */
   .top-linkBox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 50px auto 100px;
   }

   .top-linkBox__btn {
      color: var(--color-text);
      font-weight: var(--font-weight-medium);
      width: 100%;
      justify-content: space-between;
      padding: 3em;
      border: 1px solid var(--color-text);
      position: relative;
      background-image: none;

      &:not(:first-child) {
         border-left: none;
      }

      &:hover {
         background: #e9edf5;

         .top-linkBox__arrow {
            animation: btnArrow 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
         }
      }
   }

   .top-linkBox__arrow {
      display: inline-block;
      width: 70px;
      background: url("/assets/img/global/btn-arrow.png") no-repeat center/contain;
      aspect-ratio: 143/20;
      position: absolute;
      top: calc(50% - 5px);
      right: 3em;
   }

   @media (max-width: 768px) {
      .top-linkBox {
         grid-template-columns: 1fr;
         margin: 0 auto 80px;
      }

      .top-linkBox__btn {
         padding: 2em;

         &:not(:first-child) {
            border-left: 1px solid var(--color-text);
            border-top: none;
         }
      }

      .top-linkBox__arrow {
         width: 60px;
         right: 2em;
      }
   }


   /* ===== 箱型ボタン（ABOUT YASUDAのものと共通化） ===== */
   .c-btn-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-top: 48px;
      padding: 24px 32px;
      border: 1px solid var(--color-text);
      background: #fff;
      font-weight: 700;
      transition: background-color 0.5s ease;

      &:hover {
         background: #e9edf5;
      }
   }

}