@layer pages {

   /* ===== common ===== */
   /* moreボタン */
   .map-more {
      color: var(--color-text);
      font-family: var(--font-family-oswald);
      width: 145px;
      display: flex;
      text-align: center;
      justify-content: space-between;
      font-size: 1.8rem;
      padding: 12px 20px;
      border: 1px solid #d4d0de;
      border-radius: 999px;
      overflow: hidden;

      &:hover {
         background: #e9edf5;

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

   .map-more__arrow {
      display: inline-block;
      width: 53px;
      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);
      }
   }

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

   /* ===== ヘッダー ===== */
   .map-header {
      background: #f2ece7;
      padding: 50px 0;
      margin-top: 80px;

   }

   .map-header__inner {
      position: relative;
      container-type: inline-size;
   }

   .map-header__ttl {
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-medium);
      font-size: clamp(2.5rem, 3cqw, 3rem);
      line-height: 1.6;
      margin: 0;
      letter-spacing: .1em;
      position: absolute;
      left: 0;
      top: 5%;
      left: -1em;
   }

   @media (max-width: 768px) {
      .map-header {
         padding: 30px 0;
         margin-top: 60px;
      }

      .map-header__inner {
         padding: 0;
      }

      .map-header__ttl {
         position: static;
         padding: 0 5%;
      }
   }

   /* ===== 番号 ===== */
   .map-num {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0 40px;
   }

   .map-num__item {
      font-weight: var(--font-weight-bold);
      border-bottom: 1px solid #d4d0de;
   }

   .map-num__item:not(:has(.map-num__link)) {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 26px 0 10px;
   }

   .map-num__link {
      color: var(--color-text);
      align-items: center;
      display: flex;
      gap: 12px;
      width: 100%;
      height: 100%;
      padding: 26px 0 10px;

      &:hover {
         color: var(--color-main);

         .map-num__icon {
            background: var(--color-main);
            border-color: var(--color-main);

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

   .map-num__no {
      flex-shrink: 0;
      line-height: 1;
      width: 28px;
      aspect-ratio: 1/1;
      text-align: center;
      place-content: center;
      border-radius: 50%;
      font-size: 1.2rem;
      color: #fff;
      background: var(--color-text);
   }

   .map-num__name {
      font-size: 1.8rem;
      line-height: 1.3;
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-semibold);

      small {
         font-size: 0.85em;
      }
   }

   .map-num__icon {
      margin-left: auto;
      flex-shrink: 0;
      width: 35px;
      aspect-ratio: 1/1;
      border: 1px solid #d4d0de;
      border-radius: 50%;
      position: relative;
      transition: 0.3s;

      &::before {
         content: "";
         position: absolute;
         top: 45%;
         left: 50%;
         width: 8px;
         height: 8px;
         border-right: 2px solid var(--color-text);
         border-bottom: 2px solid var(--color-text);
         transform: translate(-50%, -50%) rotate(45deg);
      }
   }

   @media (max-width: 768px) {
      .map-num {
         grid-template-columns: repeat(2, 1fr);
         gap: 0 15px;
      }

      .map-num__name {
         font-size: 1.4rem;
      }

      .map-num__no {
         width: 24px;
      }

      .map-num__item:not(:has(.map-num__link)),
      .map-num__link {
         /* padding: 12px 0; */
         gap: 12px;
      }

      .map-num__item br {
         display: none;
      }

      .map-num__icon {
         width: 24px;

         &::before {
            width: 6px;
            height: 6px;
         }
      }
   }

   /* ===== 施設紹介 ===== */
   .map-facility {
      display: flex;
      flex-direction: column;
      gap: 80px;
   }

   .map-facility__item {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 60px;
      align-items: center;
      padding: 60px 0;
      position: relative;

      &:not(:first-child)::before {
         content: "";
         display: block;
         width: 100%;
         border-top: 1px solid #d4d0de;
         position: absolute;
         top: 0;
         left: 0;
      }

      &:nth-child(even) {
         .map-facility__thumb {
            order: 2;
         }

         .map-facility__body {
            margin-left: auto;
         }
      }

      &:first-child {
         padding-top: 0;
      }

      &:last-child {
         padding-bottom: 0;
      }
   }

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

   .map-facility__ttl {
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-semibold);
      font-size: 2.8rem;
      letter-spacing: .1em;
      gap: 10px;

      &::before {
         content: "";
         display: inline-block;
         flex-shrink: 0;
         width: 10px;
         aspect-ratio: 1/1;
         background: var(--color-main);
         vertical-align: middle;
         margin-bottom: 2px;
         margin-right: 10px;
      }

      small {
         font-size: .7em;
      }
   }

   .map-facility__txt p {
      margin-top: 2em;
      text-align: justify;
      line-height: 2;

   }

   .map-facility__body {
      width: 90%;
      max-width: 550px;
   }

   .map-facility__btn {
      margin-top: 50px;

      .map-more {
         margin: 0 auto;
      }
   }

   @media (max-width: 768px) {
      .map-facility__item {
         grid-template-columns: 1fr;
         padding: 70px 0 50px;

         &:not(:first-child)::before {
            width: 88%;
            left: 6%;
         }

         &:nth-child(odd) {
            .map-facility__thumb {
               order: 2;
            }
         }
      }

      .map-facility__body {
         margin: 0 auto;
      }

      .map-facility__ttl {
         font-size: 2.3rem;
      }

      .map-facility__btn {
         margin-top: 30px;
      }
   }


   /* ===== 付属施設 ===== */
   #annex {
      margin-bottom: 40px;
   }

   .map-ttl {
      font-size: 2.8rem;
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-semibold);
      letter-spacing: .1em;
      border-bottom: 1px solid #c6c6c6;
      padding-bottom: .8em;
      position: relative;

      &::after {
         content: "";
         display: inline-block;
         width: 5.5em;
         height: 2px;
         background: var(--color-main);
         position: absolute;
         left: 0;
         bottom: 0;
      }
   }

   .map-annex {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 20px;
   }

   .map-annex__item {
      padding: 40px;
      position: relative;

      &:not(:nth-child(3n + 1)) {
         &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 30px;
            bottom: 30px;
            width: 1px;
            background: #c6c6c6;
         }
      }

      &::after {
         content: "";
         position: absolute;
         left: 30px;
         right: 30px;
         bottom: 0;
         height: 1px;
         background: #c6c6c6;
      }
   }

   .map-annex__ttl {
      font-family: var(--font-family-mincho);
      font-weight: var(--font-weight-semibold);
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      gap: 10px;

      &::before {
         content: "";
         flex-shrink: 0;
         width: 10px;
         height: 10px;
         background: var(--color-main);
      }
   }

   .map-annex__btn {
      margin-top: 30px;

      .map-more {
         font-size: 1.8rem;
         margin-left: auto;
      }
   }

   @media (max-width: 768px) {
      .map-ttl {
         font-size: 2rem;
      }

      .map-annex {
         grid-template-columns: 1fr;
      }

      .map-annex__item {
         padding: 30px 0;

         &:not(:nth-child(3n + 1)) {
            &::before {
               display: none;
            }
         }

         &::after {
            left: 0;
            right: 0;
         }
      }

      .map-annex__ttl {
         font-size: 1.8rem;
      }
   }
}