@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 html {
     scroll-behavior: smooth;
}
 :root {
     --main-green: #005941;
     --prince-color: #807C64;
     --enoden-color: #00A943;
     --main-blue: #003559;
     --gray-light: #E4E4E4;
     --gray-dark: #C1C1C1;
     --text-color: #33322F;
     --linear-to-right: linear-gradient(90deg, #E25C00 0%, #F2AD3F 100%);
     --linear-to-bottom: linear-gradient(180deg, #E25C00 0%, #F2AD3F 100%);
     --bg-color: #FFFCF1;
     --heading-color: var(--main-green);
     --heading-bg-color: white 
}
/* MARK: BASIC */
 body {
     font-family: "Noto Serif JP";
     background: var(--bg-color);
     color: var(--text-color);
     word-break: break-all;
     overflow-wrap: break-word;
     line-break: strict;
     font-weight: 500;
     line-height: 1.7;
     letter-spacing: 0.0075em;
}
 p {
     white-space: pre-line;
}
 img {
     width: 100%;
}
 a {
     text-decoration: none;
     &:hover {
         opacity: 0.7;
    }
}
/* MARK: COMPONENT */
 .page {
     width: 100%;
     max-width: 1920px;
     margin-inline: auto;
     overflow: hidden;
}
 .container {
     width: 100%;
     max-width: 1120px;
     padding-inline: 20px;
     margin-inline: auto;
}
 .sp-only {
     display: none !important;
     @media screen and (max-width: 767px) {
         display: block !important;
    }
}
 .pc-only {
     display: none !important;
     @media screen and (min-width: 768px) {
         display: block !important;
    }
}
 .heading {
     border: 3px solid var(--heading-wrap-color);
     background: var(--heading-bg-color);
     padding-block: 24px 32px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     text-align: center;
     margin-bottom: 40px;
     & .label {
         background: var(--heading-wrap-color);
         color: white;
         font-size: 20px;
         font-weight: 700;
         padding-block: 3px;
    }
     & .intro {
         color: var(--heading-wrap-color);
         font-size: 32px;
         margin-inline: 20px;
         font-weight: 700;
         & span {
             display: block;
             margin-top: -12px;
             font-size: 20px;
        }
    }
}
 & .container {
     gap: max(7.2%, 80px);
     & .content {
         min-width: 300px;
         max-width: 395px;
         flex-shrink: 0;
         position: relative;
         & mark {
             display: grid;
             place-items: center;
             width: 128px;
             height: 128px;
             border-radius: 50%;
             background: var(--linear-to-bottom);
             color: white;
             font-size: 20px;
             font-weight: 700;
             position: absolute;
             transform: translate(-50%, -50%);
             border: 2px solid var(--bg-color);
        }
         & table {
             --table-padding: 23.5px;
             font-size: 20px;
             font-weight: 700;
             border-collapse: collapse;
             margin-bottom: 16px;
             text-align: left;
             & th, & td {
                 padding-top: 8px;
            }
             & tr:last-child th, & tr:last-child td {
                 padding-bottom: 8px;
            }
             & th {
                 border-right: 1px solid var(--text-color);
                 padding-right: var(--table-padding);
                 vertical-align: baseline;
                 word-break: keep-all;
            }
             & td {
                 padding-left: var(--table-padding);
            }
             & span {
                 font-size: 16px;
                 font-weight: 500;
            }
        }
         & p {
             margin-bottom: 32px;
        }
         & a {
             display: flex;
             text-decoration: none;
             gap: 24px;
             max-width: 334px;
             padding-block: 16px;
             background: var(--linear-to-right);
             border-radius: 132px;
             justify-content: center;
             color: white;
             @media screen and (max-width: 767px) {
                 max-width: 100%;
            }
        }
    }
     & .images {
         width: 100%;
         height: fit-content;
         overflow: hidden;
         & img {
             aspect-ratio: 175/106;
             border-radius: 8px;
        }
    }
     & ul {
         margin-top: 50px;
         max-width: 438px;
         margin-right: 20px;
         list-style: none;
         border: 0.5px solid var(--text-color);
         padding: 24px;
         font-size: 12px;
         font-weight: 400;
         margin-bottom: 40px;
         & li {
             display: flex;
             &::before {
                 content: "※";
            }
        }
    }
}
 .span-left {
     flex-direction: row-reverse;
}
 .col-3 {
     display: grid;
     grid-template-columns: 1fr minmax(0, 1100px) 1fr;
     & .container {
         max-width: 1520px;
         display: flex;
         gap: max(5.2%, 80px);
         & .content {
             padding-left: 70px;
             max-width: 508px;
             & .heading {
                 width: 92%;
                 max-width: 401px;
            }
        }
    }
     .span-left {
         grid-column: 1/3;
         padding-left: 0;
         flex-direction: row-reverse;
         & img {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
        }
    }
     .span-right {
         grid-column: 2/4;
         padding-right: 0;
         & img {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
        }
    }
}
 .logo {
     & .container {
         display: flex;
         padding-block: 44px;
         justify-content: center;
         align-items: center;
         gap: 120px;
         & .item {
             width: fit-content;
             & img {
                 display: block;
                 max-height: 80px;
                 width: auto;
            }
        }
    }
}
 header {
     position: relative;
     .hero {
         line-height: 0;
         clip-path: url(#hero-clip);
         @media screen and (max-width: 767px) {
             overflow: hidden;
        }
         & img {
             width: 100%;
             @media screen and (max-width: 767px) {
                 aspect-ratio: 375/355;
                 object-fit: contain;
                 background: #F4EAB8;
                 transform: scale(1.2);
            }
        }
    }
     nav {
         display: block;
         width: fit-content;
         margin-inline: auto;
         position: absolute;
         left: 50%;
         transform: translate(-50%, -36px);
         bottom: 0;
         z-index: 1;
         background: white;
         border-radius: 100px;
         & .nav-prev, & .nav-next {
             display: none;
        }
         & .container {
             --gap: 40px;
             display: flex;
             justify-content: center;
             padding: 24px 72px;
             gap: var(--gap);
             & a {
                 display: block;
                 width: max-content;
                 color: var(--text-color);
                 text-decoration: none;
                 font-size: 20px;
                 text-align: center;
                 position: relative;
                 &:not(:last-child)::after {
                     --width: 1px;
                     content: "";
                     display: block;
                     width: var(--width);
                     height: 100%;
                     background: var(--text-color);
                     position: absolute;
                     top: 0;
                     right: calc(((var(--gap) / 2) * -1) - (var(--width) / 2));
                }
                 & .en {
                     color: var(--enoden-color);
                     text-transform: uppercase;
                     font-size: 16px;
                }
            }
        }
    }
}
 main {
     & .lead {
         margin-top: 80px;
         text-align: center;
         & strong {
             background: var(--linear-to-right);
             -webkit-text-fill-color: transparent;
             -webkit-background-clip: text;
             background-clip: text;
             font-size: 32px;
             font-weight: 700;
        }
         & p {
             margin-top: 16px;
             font-size: 20px;
             font-weight: 700;
        }
    }
     & .slide {
         margin-top: 52px;
         & .swiper {
             padding-bottom: 36px;
             @media screen and (max-width: 767px) {
                 padding-bottom: 16px;
            }
        }
         & .swiper-pagination {
             bottom: 0;
             & .swiper-pagination-bullet {
                 background: var(--enoden-color);
                 margin-inline: 12px;
            }
        }
         & .swiper-slide img {
             aspect-ratio: 1080/560;
             object-fit: cover;
             border-radius: 0;
             border-radius: 8px;
        }
    }
     & .plan {
         --heading-wrap-color: var(--main-green);
         --heading-bg-color: white;
         margin-top: 175px;
    }
     & .cake {
         --text-color: white;
         --heading-wrap-color: var(--main-green);
         --heading-bg-color: white;
         color: var(--text-color);
         margin-top: 175px;
         position: relative;
        /* margin-bottom: -222px;
         */
         z-index: 2;
         & .cake-bg {
             width: 100%;
             height: 100%;
             position: absolute;
             & img {
                 @media screen and (max-width: 1799px) {
                     height: calc(100% + 362px);
                     object-fit: cover;
                }
                 @media screen and (max-width: 767px) {
                     height: 100%;
                     object-fit: fill;
                }
            }
        }
         & .container {
             position: relative;
             z-index: 1;
        }
    }
     & .restaurant {
         padding-block: 348px 152px;
         --bg-color: #F1FBFF;
         --heading-wrap-color: var(--main-blue);
         --heading-bg-color: white;
         background: var(--bg-color);
         position: relative;
         z-index: 0;
         scroll-margin: -100px;
         & strong {
             grid-column: 1 / 4;
             white-space: pre-line;
             font-size: 32px;
             text-align: center;
             margin-bottom: 80px;
             color: var(--heading-wrap-color);
        }
         & .content {
             display: flex;
             flex-direction: column;
             justify-content: center;
             & ul {
                 margin-block: 0;
                 & a {
                     color: blue;
                     display: inline-block;
                     padding: 0;
                     background: 0;
                     font-size: inherit;
                }
            }
        }
    }
     & .menu {
         --bg-color: #F1FBFF;
         --heading-wrap-color: var(--main-blue);
         --heading-bg-color: white;
         padding-block: 0 120px;
         background: var(--bg-color);
         display: flex;
         flex-direction: column;
         gap: 80px;
         & .container {
             max-width: 1020px;
             display: flex;
        }
    }
     & .lounge {
         --bg-color: #F1FBFF;
         --text-color: white;
         --heading-wrap-color: var(--main-blue);
         --heading-bg-color: var(--text-color);
         background: var(--bg-color);
         & .container {
             max-width: 1080px;
             background: var(--main-blue);
             padding: 40px;
             display: flex;
             flex-direction: column;
             gap: 80px;
             color: var(--text-color);
             & .heading {
                 @media screen and (max-width: 767px) {
                     margin-block: 0 16px;
                }
            }
             & .card:not(:first-child) {
                 display: flex;
                 padding-inline: 36px;
                 gap: 5.2%;
                 & .images-swiper {
                     padding-bottom: 32px;
                     @media screen and (max-width: 767px) {
                         padding-bottom: 16px;
                    }
                     & .swiper-pagination {
                         bottom: 0;
                         & .swiper-pagination-bullet {
                             margin-inline: 6px;
                             background: #E25C00;
                        }
                    }
                }
            }
             & .span-full {
                 display: flex;
                 flex-direction: column-reverse;
                 gap: 40px;
                 & .images {
                     width: 100%;
                }
                 & .content {
                     max-width: none;
                     display: grid;
                     grid-template-columns: minmax(300px, 395px) auto;
                     gap: 5.2%;
                     padding-inline: 36px;
                     & .heading {
                         width: 100%;
                         max-width: 395px;
                         height: fit-content;
                         grid-row: 1 / 9;
                    }
                }
            }
        }
    }
     & .bar {
         --bg-color: #F1FBFF;
         --section-color: var(--main-blue);
         --heading-wrap-color: var(--main-blue);
         --heading-bg-color: white;
         padding-block: 120px 300px;
         background: var(--bg-color);
         position: relative;
         & .heading {
             margin-bottom: 20px;
        }
         & .bar-bg {
             width: 50%;
             position: absolute;
             bottom: 0;
             right: 0;
             & img {
                 display: block;
            }
        }
         & .container {
             position: relative;
             z-index: 1;
             & .content {
                 padding: 0;
            }
        }
         & ul {
             grid-column: 1 / -1;
             max-width: 520px;
             font-size: 12px;
             margin: 40px auto;
             padding: 0 20px;
             position: relative;
             z-index: 1;
             & li {
                 display: flex;
                 &::before {
                     content: "※";
                }
            }
        }
    }
     & .history {
         --bg-color: #F1FBFF;
         position: relative;
        /* padding-block: 0 360px;
         */
         background: var(--bg-color);
         & svg {
             width: 100%;
             height: auto;
             position: absolute;
             top: 0;
             transform: translateY(-100%);
        }
         & .heading {
             background: white;
             & .label {
                 background: var(--main-green);
                 color: white;
            }
             & .intro {
                 color: var(--main-green);
            }
        }
         & p {
             font-size: 20px;
             font-weight: 700;
             text-align: center;
             color: white;
        }
         & .col {
             display: grid;
             grid-template-rows: 1fr;
             grid-template-columns: auto auto auto 3fr;
             margin-top: 40px;
             padding: 40px 40px 0;
             background: white;
             & .row {
                 height: 122px;
                 display: grid;
                 grid-column: span 4;
                 grid-template-columns: subgrid;
                 gap: 20px;
                 align-items: baseline;
                 position: relative;
                 &::before {
                     content: "";
                     display: block;
                     width: 16px;
                     height: 16px;
                     border-radius: 50%;
                     background: var(--main-green);
                     transform: translateX(-50%);
                }
                 &::after {
                     content: "";
                     position: absolute;
                     width: 2px;
                     height: 100%;
                     background: var(--gray-light);
                     z-index: -1;
                     top: 16px;
                     transform: translateX(-50%);
                }
                 & .year {
                     width: max-content;
                     margin-left: 16px;
                     flex-shrink: 0;
                     & .shinreki {
                         font-size: 20px;
                         font-weight: 700;
                    }
                     & .wareki {
                         color: var(--gray-dark);
                    }
                }
                 & .spot {
                     border-radius: 4px;
                     padding: 5px 8px;
                     color: white;
                     font-weight: 700;
                     width: fit-content;
                     &.prince {
                         background: var(--prince-color);
                    }
                     &.enoden {
                         background: var(--enoden-color);
                    }
                }
                 & p {
                     margin-left: 24px;
                     color: var(--text-color);
                     text-align: left;
                }
            }
        }
    }
}
 footer {
     & .logo {
         margin-top: 136px;
    }
     & address {
         margin-top: 70px;
         text-align: center;
         font-style: normal;
         white-space: pre-line;
    }
     & .sns {
         margin-top: 40px;
         & .container {
             display: flex;
             justify-content: center;
             gap: 40px;
             & img {
                 max-height: 48px;
            }
        }
    }
     & nav {
         margin-top: 40px;
         & .container {
             width: fit-content;
             display: flex;
             gap: 0;
             & a {
                 padding-inline: 16px;
                 border-right: 1px solid var(--text-color);
                 text-decoration: none;
                 color: var(--text-color);
                 &:first-child {
                     border-left: 1px solid var(--text-color);
                }
            }
        }
    }
}
 .copyright {
     color: white;
     margin-top: 40px;
     padding-block: 16px;
     text-align: center;
     background: linear-gradient(90deg, var(--enoden-color) 0%, var(--main-green)100%);
}
 .pageTop a {
     width: 50px;
     height: 50px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     right: 20px;
     bottom: 20px;
     z-index: 10;
     rotate: 180deg;
     background-color: white;
     transition: all 0.3s ease, filter 0.3s ease;
     opacity: 0.5;
}
 .pageTop a:hover {
     background-color: var(--main-green);
     filter: drop-shadow(0px 8px 5px #3d260488);
     rotate: 270deg;
     opacity: 1;
}
/* MARK: TABLET (768px - 1023px) */
 @media screen and (min-width: 768px) and (max-width: 1023px) {
     .container {
         max-width: 100%;
         padding-inline: 32px;
    }
    /* Header nav */
     header nav {
         transform: translate(-50%, -24px);
         & .container {
             --gap: 24px;
             padding: 16px 40px;
             & a {
                 font-size: 16px;
                 & .en {
                     font-size: 14px;
                }
            }
        }
    }
    /* Lead section */
     main .lead {
         margin-top: 56px;
         & strong {
             font-size: 24px;
        }
         & p {
             font-size: 16px;
        }
    }
    /* Slide section */
     main .slide {
         margin-top: 40px;
    }
    /* Heading component */
     .heading {
         padding-block: 16px 24px;
         gap: 12px;
         margin-bottom: 28px;
         & .label {
             font-size: 16px;
        }
         & .intro {
             font-size: 24px;
             margin-inline: 16px;
             & span {
                 font-size: 16px;
                 margin-top: -8px;
            }
        }
    }
    /* Content block inside container */
     & .container {
         gap: 40px;
         & .content {
             min-width: 240px;
             max-width: 320px;
             & mark {
                 width: 96px;
                 height: 96px;
                 font-size: 16px;
            }
             & table {
                 font-size: 16px;
                 margin-bottom: 12px;
                 --table-padding: 16px;
                 & span {
                     font-size: 14px;
                }
            }
             & p {
                 margin-bottom: 24px;
                 font-size: 14px;
            }
             & a {
                 gap: 16px;
                 max-width: 280px;
                 padding-block: 12px;
                 font-size: 14px;
            }
        }
         & .images {
             & img {
                 border-radius: 6px;
            }
        }
         & ul {
             margin-top: 32px;
             max-width: 100%;
             margin-right: 0;
             padding: 16px;
             font-size: 11px;
             margin-bottom: 28px;
        }
    }
    /* col-3 sections */
     .col-3 {
         grid-template-columns: 1fr minmax(0, 100%) 1fr;
         & .container {
             max-width: 100%;
             gap: 32px;
             padding-inline: 0;
             & .content {
                 padding-left: 32px;
                 max-width: 340px;
                 & .heading {
                     width: 100%;
                     max-width: 340px;
                }
            }
        }
         .span-left {
             & .content {
                 padding-left: 0;
                 padding-right: 32px;
            }
        }
         .span-right {
             & .content {
                 padding-left: 32px;
                 padding-right: 0;
            }
        }
    }
    /* Plan section */
     main .plan {
         margin-top: 120px;
    }
    /* Cake section */
     main .cake {
         margin-top: 120px;
        /* & .cake-bg img {
             height: calc(100% + 250px);
        }
         */
    }
    /* Restaurant section */
     main .restaurant {
         padding-block: 240px 100px;
         & strong {
             font-size: 24px;
             margin-bottom: 56px;
        }
    }
    /* Menu section */
     main .menu {
         padding-block: 0 80px;
         gap: 56px;
         & .container {
             max-width: 100%;
             gap: 32px;
        }
    }
    /* Lounge section */
     main .lounge {
         & .container {
             max-width: 100%;
             padding: 28px;
             gap: 56px;
             & .card:not(:first-child) {
                 padding-inline: 20px;
                 gap: 4%;
            }
             & .span-full {
                 gap: 28px;
                 & .content {
                     grid-template-columns: minmax(240px, 320px) auto;
                     gap: 4%;
                     padding-inline: 20px;
                     & .heading {
                         max-width: 320px;
                    }
                }
            }
        }
    }
    /* Bar section */
     main .bar {
         padding-block: 80px 200px;
    }
    /* History section */
     main .history {
         & .col {
             padding: 28px 28px 0;
             & .row {
                 height: 100px;
                 gap: 12px;
                 & .year .shinreki {
                     font-size: 16px;
                }
                 & .spot {
                     font-size: 14px;
                }
                 & p {
                     font-size: 16px;
                     margin-left: 16px;
                }
            }
        }
    }
    /* Logo */
     .logo .container {
         gap: 60px;
         padding-block: 32px;
         & .item img {
             max-height: 60px;
        }
    }
    /* Footer */
     footer {
         & .logo {
             margin-top: 80px;
        }
         & address {
             margin-top: 48px;
        }
         & nav .container {
             & a {
                 padding-inline: 12px;
                 font-size: 14px;
            }
        }
    }
}
/* MARK: MOBILE (320px - 767px) */
 @media screen and (max-width: 767px) {
     .container {
         max-width: 100%;
         padding-inline: 20px;
    }
    /* Logo */
     .logo .container {
         gap: 40px;
         padding-block: 24px;
         & .item img {
             max-height: 38px;
        }
    }
    /* Header nav */
     header nav {
         position: absolute;
         left: 50%;
         bottom: 0;
         transform: translate(-50%, 50%);
         width: 280px;
         background: white;
         border-radius: 100px;
         padding: 16px 0;
         z-index: 10;
         & .nav-prev, & .nav-next {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 32px;
             height: 32px;
             border: none;
             background: #0D7234;
             color: white;
             font-size: 12px;
             font-family: "Noto Sans JP", sans-serif;
             font-weight: 700;
             cursor: pointer;
             padding: 0;
             line-height: 1;
             border-radius: 50%;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             transition: background 0.2s, transform 0.2s;
             &:hover {
                 background: #0a5a2a;
            }
             &:active {
                 transform: translateY(-50%) scale(0.9);
            }
        }
         & .nav-prev {
             left: -16px;
        }
         & .nav-next {
             right: -16px;
        }
         & .container {
             --gap: 0;
             padding: 0;
             gap: var(--gap);
             & a {
                 font-size: 20px;
                 font-weight: 700;
                 text-align: center;
                 white-space: nowrap;
                 &:not(:last-child)::after {
                     display: none;
                }
                 & .en {
                     font-size: 16px;
                }
                 & .ja {
                     font-size: 20px;
                }
            }
        }
    }
    /* Heading component */
     .heading {
         padding-block: 24px 32px;
         gap: 16px;
         margin-bottom: 24px;
         & .label {
             font-size: 20px;
        }
         & .intro {
             font-size: 26px;
             margin-inline: 16px;
             line-height: 1.5;
             & span {
                 font-size: 20px;
                 margin-top: -8px;
            }
        }
    }
    /* Content block inside container */
     & .container {
         gap: 24px;
         & .content {
             min-width: 0;
             max-width: 100%;
             & mark {
                 width: 80px;
                 height: 80px;
                 font-size: 14px;
                 line-height: 1.3;
                 margin-bottom: -32px;
                 text-align: center;
            }
             & table {
                 font-size: 20px;
                 margin-top: 24px;
                 --table-padding: 24px;
                 & span {
                     font-size: 16px;
                }
            }
             & p {
                 margin-block: 24px 40px;
                 font-size: 16px;
            }
             & a {
                 gap: 24px;
                 max-width: 100%;
                 padding-block: 16px;
                 font-size: 20px;
            }
        }
         & .images {
             & img {
                 border-radius: 8px;
            }
             ;
             order: 1;
        }
         & ul {
             margin-top: 32px;
             max-width: 100%;
             margin-right: 0;
             padding: 16px;
             font-size: 12px;
             margin-bottom: 40px;
             line-height: 1.5;
        }
    }
    /* col-3 sections - stack to single column */
     .col-3 {
         grid-template-columns: 1fr;
         & .container {
             max-width: 100%;
             display: flex;
             flex-direction: column;
             gap: 24px;
             padding-inline: 20px;
             & .content {
                 padding-left: 0;
                 padding-right: 0;
                 max-width: 100%;
                 & .heading {
                     width: 100%;
                     max-width: 100%;
                }
            }
        }
         .span-left, .span-right {
             grid-column: 1;
            /* padding-left: 0;
             */
            /* padding-right: 0;
             */
             flex-direction: column;
             & img {
                 border-radius: 8px !important;
                 margin-bottom: 24px;
            }
        }
         .span-left {
             flex-direction: column-reverse;
        }
    }
    /* Lead section */
     main .lead {
         margin-top: 82px;
         & strong {
             font-size: 26px;
        }
         & p {
             margin-top: 8px;
             font-size: 20px;
             text-align: left;
        }
    }
    /* Slide section */
     main .slide {
         margin-top: 32px;
         padding-inline: 20px;
    }
    /* Plan section */
     main .plan {
         margin-top: 80px;
         & .container .content mark {
             position: relative;
             transform: none;
        }
    }
    /* Cake section */
     main .cake {
         margin-top: 80px;
         & .cake-bg {
             margin-top: 140px;
        }
         & .container {
             & .content {
                 color: var(--text-color);
                 & mark {
                     position: relative;
                     transform: none;
                }
            }
        }
    }
    /* Restaurant section */
     main .restaurant {
         padding-block: 240px 60px;
         & strong {
             font-size: 26px;
             margin-bottom: 40px;
        }
    }
    /* Menu section */
     main .menu {
         padding-block: 0 60px;
         gap: 64px;
         & .container {
             max-width: 100%;
             flex-direction: column;
             gap: 24px;
             padding-inline: 20px;
        }
    }
    /* Lounge section */
     main .lounge {
         & .container {
             max-width: 100%;
             padding: 20px 20px 40px;
             gap: 40px;
             & .card:not(:first-child) {
                 flex-direction: column-reverse;
                 padding-inline: 0;
                 gap: 24px;
            }
             & .span-full {
                 gap: 24px;
                 & .content {
                     grid-template-columns: 1fr;
                     gap: 0;
                     padding-inline: 0;
                     & .heading {
                         max-width: 100%;
                         grid-row: auto;
                         margin-bottom: 16px;
                    }
                }
            }
        }
    }
    /* Bar section */
     main .bar {
         padding-block: 12px 160px;
         & .bar-bg {
             width: 80%;
        }
    }
    /* History section */
     main .history {
         & svg {
             height: 80px;
             width: auto;
             margin-left: -88px;
        }
         & .col {
             padding: 16px 16px 0;
             grid-template-columns: auto auto 1fr;
             & .row {
                 height: auto;
                 padding-bottom: 16px;
                 gap: 8px;
                 grid-template-columns: auto auto 1fr;
                 grid-column: span 3;
                 &::before {
                     display: none;
                }
                 &::after {
                     display: none;
                }
                 & .year .shinreki {
                     font-size: 14px;
                }
                 & .spot {
                     font-size: 12px;
                }
                 & p {
                     font-size: 14px;
                     margin-left: 0;
                }
            }
        }
    }
    /* Footer */
     footer {
         & .logo {
             margin-top: 40px;
        }
         & address {
             margin-top: 40px;
             font-size: 16px;
             font-weight: 700;
        }
         & .sns {
             margin-top: 40px;
             & .container {
                 gap: 40px;
                 & img {
                     max-height: 48px;
                }
            }
        }
         & nav {
             margin-top: 40px;
             & .container {
                 flex-direction: column;
                 align-items: center;
                 gap: 16px;
                 width: fit-content;
                 & a {
                     padding-inline: 16px;
                     font-size: 16px;
                     font-weight: 700;
                     border-right: none;
                     &:first-child {
                         border-left: none;
                    }
                }
            }
        }
    }
    /* Copyright */
     .copyright {
         font-size: 12px;
         padding-block: 16px;
    }
}
/* Scroll reveal animation */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.9s ease-out, transform 0.9s ease-out;
     will-change: opacity, transform;
}
 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
}
 @media (prefers-reduced-motion: reduce) {
     .reveal {
         opacity: 1;
         transform: none;
         transition: none;
    }
}