@charset "UTF-8";

/* ==========================================================================
   Wedding only
========================================================================== */

body,
#siteHeader .inner-header::before {
    background: #F5F4F4;
}

/* content */
#content.has-mv #main {
    color: var(--color1);
}

@media (min-width: 992px) {
    body:has(#content.has-mv) #siteHeader:not(.fixed) {
        color: var(--white);
    }

    #content.has-mv {
        padding-top: 0;
    }
}

/* ttl */
.en_ttl {
    font-family: var(--font1);
    font-weight: 700;
    letter-spacing: .1em;
}

/* btn */
#main .btn.btn-b {
    color: var(--color1);
}

#main .btn.btn-white {
    color: var(--color1);
}

/* copy */
.copy {
    font-weight: 600;
}

/* page__header */
.page__header .ttl {
    font-family: var(--gothic);
}

@media (min-width: 992px) {
    #content:not(.has-mv) .page__header {
        padding-top: 3rem;
    }
}

/* page__thumbnail */
.page__thumbnail {
    position: relative;
}

.page__thumbnail .main-img img {
    width: 100%;
}

.page__thumbnail .headline {
    margin: 5em auto -1.5em;
    display: inline-block;
    position: relative;
}

.page__thumbnail .headline picture.subttl_img {
    width: 119px;
    margin-left: -22.5%;
    margin-bottom: -1.5%;
}

.page__thumbnail .headline .ttl {
    font-family: var(--mincho);
    font-weight: 600;
    text-align: center;
}

.page__thumbnail .headline picture+.ttl {
    margin-top: 1em;
}

@media (min-width: 576px) {
    .page__thumbnail .headline {
        margin: 0;
        color: var(--white);
        padding-right: 30px;
        position: absolute;
        left: 50%;
        bottom: 10%;
        z-index: 2;
    }

    .page__thumbnail .headline picture.subttl_img {
        width: 260px;
        margin-left: -90px;
        margin-bottom: -2.5%;
    }

    .page__thumbnail .headline .ttl {
        font-weight: 700;
        text-align: left;
    }
}

/* hero */
.hero-wrap {
    position: relative;
}

.hero-img {
    position: relative;
    z-index: 1;
}

.hero-caption {
    position: absolute;
    left: -10px;
    z-index: 2;
}

.hero-caption .ttl {
    color: var(--white);
    font-family: var(--mincho);
    font-weight: 600;
    margin-top: .5em;
}

.hero-caption._t {
    top: 15%;
}

.hero-caption._c {
    top: 50%;
    transform: translateY(-50%);
}

.hero-caption._b {
    bottom: 15%;
}

@media (min-width: 576px) {
    .hero-caption._r {
        right: -10px;
        left: auto;
    }

    .hero-caption._l {
        left: -10px;
    }
}

@media (min-width: 992px) {
    .hero-caption._r {
        right: -90px;
    }

    .hero-caption._l {
        left: -90px;
    }
}

@media (min-width: 992px) {
    .justify-r {
        padding-left: 90px;
    }

    .justify-l {
        padding-right: 90px;
    }
}


/* siteHeader */
@media (min-width: 992px) {
    #siteHeader .inner-header {
        padding-right: calc(9vw + 30px);
    }

    #siteHeader .inner-header::before {
        background: transparent;
    }
}

/* roll-menu */
.roll-menu em {
    font-weight: 400;
}

/* gNav */
@media (max-width: 991px) {
    #siteHeader .book-menu {
        display: none;
    }

    .gNav.wedding .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .gNav.wedding .nav-row {
        padding-top: 2em;
        padding-bottom: 1em;
        max-width: 28em;
        margin: 0 auto;
    }

    .gNav.wedding .main-nav {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 992px) {
    #siteHeader .nav-right {
        height: 100%;
        display: flex;
        align-items: center;
    }

    #siteHeader .book-menu {
        height: 100%;
        display: flex;
        align-items: center;
    }

    #siteHeader .book-menu li a {
        padding: .5em 1.5vw;
    }

    .gNav.wedding {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        display: none;
    }

    .gNav.wedding .gNav__inner {
        background: var(--white);
        padding-top: 135px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        opacity: 0;
        height: 0;
        transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), height 1s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .gNav.wedding .nav-row {
        margin: 3em -1.5vw 1.5em;
    }

    .gNav.wedding .nav-row ul {
        padding: 0 1.5vw;
    }

    .gNav.wedding nav {
        flex-direction: column;
        justify-content: flex-start;
    }

    .gNav.wedding .navBar_inner {
        height: 100%;
        overflow-y: auto;
        padding: 0 4.5vw;
    }

    .gNav.wedding nav ul {
        flex-direction: column;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 1s 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .gNav.wedding .navBar_inner .main-nav>li>a {
        margin-bottom: 1.5em;
        padding: 1.5em 0;
    }

    .gNav.wedding .navBar_inner ul.nav-book .btn {
        width: 100%;
    }

    .gNav.wedding .nav-book-row dd.txt p.tel-txt {
        color: var(--color2);
    }

    /* OPEN */
    .gNav.wedding.on {
        display: block;
    }

    .gNav.wedding.on .gNav__inner {
        opacity: 1;
        height: 100dvh;
    }

    .gNav.wedding.on ul {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .gNav.wedding .navBar_inner ul.nav-book {
        padding: 0 1vw;
    }

    .gNav.wedding .navBar_inner ul.nav-book .buttons {
        display: flex;
        margin: 3em 0 .5em;
    }

    .gNav.wedding .navBar_inner ul.nav-book .buttons p {
        flex-basis: 100%;
        padding: 0 .5vw;
    }
}

@media (min-width: 1200px) {
    .gNav.wedding .navBar_inner ul.nav-book {
        margin-left: 1.5vw;
        max-width: 30em;
        padding-top: 1em;
    }

    .gNav.wedding .nav-book-row dd.txt p {
        line-height: 1.8;
        text-align: left;
    }
}

/* Bridal fair */
#fair-cont * {
    color-scheme: normal;
}


/* book row */
.nav-book-row dl {
    text-align: center;
    max-width: 100%;
}

.nav-book-row dt {
    display: none;
}

.nav-book-row dd {
    margin-bottom: .5em;
}

.nav-book-row dd.txt .tel-txt {
    order: -1;
    font-size: 1.846em;
}

#footer-info .nav-book-row .ttlBox {
    display: none;
}

#footer-info .nav-book-row dd.txt {
    display: flex;
    flex-direction: column;
}

#footer-info .nav-book-row dd.txt h5 {
    display: none;
}

#footer-info .nav-book-row dd.txt .reception {
    font-family: var(--gothic);
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    #footer-info .nav-book-row dd.buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-right: -5px;
        margin-left: -5px;
    }

    #footer-info .nav-book-row dd.buttons>p {
        flex: 0 0 50%;
        padding-right: 5px;
        padding-left: 5px;
    }
}

@media (min-width: 992px) {
    .bookNav .nav-book-row {
        padding: 3.5em 3em 5em;
    }

    #footer-info .nav-book-row dd.buttons>p {
        flex: 0 0 25%;
    }

    #footer-info .nav-book-row dd.buttons>p .btn {
        width: 100%;
    }
}

.roll-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0.5em 0;
    cursor: pointer;
}

.book-btn {
    color: var(--color2);
    white-space: nowrap;
    height: 100%;
    padding-right: 1.5vw;
    padding-left: 1.5vw;
    position: relative;
}

@media (max-width: 991px) {
    .book-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: auto;
        height: 70px;
        padding: 0;
        margin-right: 0;
        position: fixed;
        top: 0;
        right: 70px;
        z-index: 2;
    }
}

.book-btn {
    background: var(--color2);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    width: 70px;
    font-size: .923em;
    line-height: 1.375;
    padding-right: 1.5vw;
    padding-left: 1.5vw;
    cursor: pointer;
    transition: background .2s;
    height: 70px;
    position: fixed;
    top: 0;
    right: 70px;
    z-index: 2;
}

@media (max-width: 991px) {
    .book-btn svg {
        display: block;
        margin: 0.5em auto 0.25em;
    }
}
.book-btn svg {
    fill: currentColor;
}

@media (max-width: 991px) {
    .book-btn > span {
        padding: 0;
    }
}
.roll-menu > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    position: relative;
}