@charset "UTF-8";
/* ======================
slideshow
====================== */

.slideshow-container {
  position: relative;
  width: 100%;
  height: 64.6vh;
  overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.slide:nth-child(1) {
    background-image: url(../images/firstview-sp.jpg);
}

.slide:nth-child(2) {
    background-image: url(../images/firstview-sp02.jpg);
}

.slide:nth-child(3) {
    background-image: url(../images/firstview-sp03.jpg);
}

.slide:nth-child(4) {
    background-image: url(../images/firstview-sp04.jpg);
}

.slide:nth-child(5) {
    background-image: url(../images/firstview-sp05.jpg);
}

.slide.active {
    opacity: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* slideshow pc */
@media screen and (min-width: 769px){
   .slideshow-container {
        height: 94.6vh;
   } 

   .slide:nth-child(1) {
        background-image: url(../images/firstview.jpg);
    }

    .slide:nth-child(2) {
        background-image: url(../images/firstview02.jpg);
    }

    .slide:nth-child(3) {
        background-image: url(../images/firstview03.jpg);
    }

    .slide:nth-child(4) {
        background-image: url(../images/firstview04.jpg);
    }

    .slide:nth-child(5) {
        background-image: url(../images/firstview05.jpg);
    }
}

/* ======================
about
====================== */
.section-about {
    background-image: url(../images/background-sp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.section-about::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 54%;
    transform: translateX(-50%);
    width: 93.5%;
    height: 1px;
    background-color:var(--primary-white);
}

.section-about::after {
    content: ''; 
    position: absolute; 
    top: 0;
    right: 6%; 
    width: 1px; 
    height: 88%; 
    background-color: var(--primary-white);
}

.inner-about {
    display: flex;
}

.about-title {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    order: 2;
    padding: 84px 20px 0 19px;
    row-gap: 6px;
}

.about-ja {
    color: var(--primary-white);
    font-size: 2.2rem;
    line-height: 1; 
    letter-spacing: 0.4rem;
    order: 1;
    position: relative;
}

.about-ja::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 4px;
    background-color:var(--primary-white);
}

.about-en {
    color: var(--primary-white);
    font-family: "Jost", sans-serif;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.4rem;
    text-orientation: upright;
    padding-top: 15px;
}

.about-txt {
    color: var(--primary-white);
    font-size: 1.6rem;
    line-height: 2.1; 
    order: 1;
    padding: 88px 0;
}

.pcBr {
    display: none;
}

/* about pc */
@media screen and (min-width: 769px){
    .section-about {
        background-image: url(../images/background.jpg);
    }

    .section-about::before {
        width: 96.6%;
        top: 85px;
    }

    .section-about::after {
        height: 95%;
        right: 5%;
    }

    .about-title {
        padding: 132px 75px 0 75px;
        row-gap: 9px;
    }

    .about-ja {
        font-size: 2.8rem;
    }

    .about-ja::before {
        width: 35px;
    }

    .about-en {
        font-size: 1.4rem;
    }

    .about-txt {
        font-size: 1.8rem;
        padding: 227px 0 277px 0;
    }

    .pcBr {
        display: block;
    }
}

@media screen and (min-width: 1000px){
    .section-about::after{
        right: 3%;
    }

    .about-title {
        padding: 132px 16px 0 115px;
    }
}

/* ======================
menu
====================== */
.section-menu,
.section-gallery,
.section-access {
    padding-bottom: 72px;
}

.menu-title,
.gallery-title,
.access-title {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    row-gap: 6px;
    padding-top: 89px;
    margin: 0 auto;
}

.wrap-img-menu,
.wrap-img-gallery,
.wrap-img-access {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    margin-top: 64px;
    position: relative;
    z-index: 2;
}

.wrap-img-menu::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 39%;
    transform: translateX(-50%);
    width: 52.5%;
    height: 20.7%;
    background-image: url(../images/menu.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.menu-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 38%;
    transform: translateX(-50%);
    width: 99%;
    height: 124%;
    background-color: rgba(244, 244, 244, 0.55);
    z-index: -99;
}

.menu-img::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 29%;
    transform: translateX(-50%);
    width: 94.2%;
    height: 106.5%;
    background-color: rgba(143, 156, 136, 0.4);
    z-index: -1;
}

.menu-img,
.access-img {
    width: 84.7%;
    margin-left: auto;
    position: relative;
}

.menu-img img,
.gallery-img img,
.access-img img {
    aspect-ratio: 145/109;
}

/* menu pc */
@media screen and (min-width: 769px){
    .section-menu,
    .section-gallery {
        padding-bottom: 100px;
    }

    .section-access {
        padding-bottom: 136px;
    }

    .menu-title,
    .access-title {
        padding-top: 117px;
        margin-left: 49px;
        row-gap: 9px;
    }

    .gallery-title {
        padding-top: 117px;
        margin-right: 49px;
        row-gap: 9px;
        order: 1;
    }

    .inner-menu,
    .inner-gallery,
    .inner-access {
        display: flex;
    }

    .wrap-img-menu,
    .wrap-img-gallery,
    .wrap-img-access {
        margin-top: 100px;
        width: 83.1%;
    }

    .wrap-img-menu::after {
        transform: rotate(-90deg);
        bottom: 35px;
        left: -18%;
        width: 38.2%;
        height: 16.7%;
    }

    .menu-img::after {
        width: 113%;
        height: 121.5%;
        left: 44%;
    }

    .menu-img::before {
        top: 205px;
        left: 10%;
        height: 85.8%;
    }

    .menu-img,
    .access-img  {
        width: 77.1%;
    }
}

/* ======================
gallery
====================== */
.wrap-img-gallery::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 58%;
    transform: translateX(-50%);
    width: 71%;
    height: 17.5%;
    background-image: url(../images/gallery.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 58%;
    transform: translateX(-50%);
    width: 99%;
    height: 124%;
    background-color: rgba(244, 244, 244, 0.55);
    z-index: -99;
}

.gallery-img::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 69%;
    transform: translateX(-50%);
    width: 98%;
    height: 106.5%;
    background-color: rgba(143, 156, 136, 0.4);
    z-index: -1;
}

.gallery-img {
    width: 84.7%;
    margin-right: auto;
    position: relative;
}

.gallery-btn {
    padding: 170px 0 0 28px;
    text-align: left;
}

.gallery-label {
    position: relative;
    display: block;
    font-size: 1.4rem;
    line-height: 1; 
    margin-left: -28px;
}

/* gallery pc */
@media screen and (min-width: 769px ){
    .wrap-img-gallery::after {
        bottom: -235px;
        left: 71%;
        width: 61.6%;
        height: 17.9%;
    }

    .gallery-img::before {
        top: 225px;
        left: 92%;
        width: 103%;
        height: 105.3%;
    }

    .gallery-img::after {
        left: 56.5%;
        width: 112.9%;
        height: 121.5%;
    }

    .gallery-img {
        width: 77.1%;
    }

    .gallery-btn {
        padding: 194px 0 0 80px;
    }

    .gallery-label {
        font-size: 1.6rem;
        margin-left: -20px;
    }
}

/* ======================
access
====================== */
.wrap-img-access::after {
    content: "";
    position: absolute;
    bottom: -98px;
    left: 41%;
    transform: translateX(-50%);
    width: 62.8%;
    height: 17.5%;
    background-image: url(../images/access.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.access-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 38%;
    transform: translateX(-50%);
    width: 99%;
    height: 124%;
    background-color: rgba(244, 244, 244, 0.55);
    z-index: -99;
}

.access-img::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 31%;
    transform: translateX(-50%);
    width: 98%;
    height: 106.5%;
    background-color: rgba(143, 156, 136, 0.4);
    z-index: -1;
}

/* access pc */
@media screen and (min-width: 769px){
    .wrap-img-access::after {
        transform: rotate(-90deg);
        width: 54.4%;
        height: 16.7%;
        bottom: -70px;
        left: -33%;
    }

   .access-img::after {
        width: 112.9%;
        height: 121.5%;
        left: 43.5%;
   }

   .access-img::before {
        top: 230px;
        left: 5%;
        width: 102.3%;
        height: 113.8%;
   }
     
}