@charset "UTF-8";
/* ============================================================
 * 既存共通部品・確認画面のフッター
 * トップページの新デザインは後半の .site-footer で管理する。
 * ============================================================ */
/*------------------------*/

/*フッター*/

/*-----------------------*/
/* ページトップへ戻る */
#page-top-scroll{
    width: 60px;
    height: 100px;

    position: fixed;
    bottom: 60px;
    right: var(--mp-lr-reg);
    opacity: 0;
    visibility: hidden;

    transition: transform .3s var(--easeOutSine);
    z-index: 5;
}
#page-top-scroll > a{
    border-radius: 6px;
    width: 100%;
    height: 100%;
    background-color: var(--c-gold-light);
    color: var(--c-white);
    border: solid 1px var(--c-gold-light);

    font-size: var(--txt-md);
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1em;

    transition: background-color .3s var(--easeOutSine),
    color .3s var(--easeOutSine);

    cursor: pointer;

    position: relative;
}
#page-top-scroll > a > svg{
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);

    height: 12px;
    fill: var(--c-white);

    transition: top .3s var(--easeOutSine),
    fill .3s var(--easeOutSine);
}
/* ホバー */
@media(any-hover:hover){
    #page-top-scroll > a.link-hover,
    #page-top-scroll > a:focus{
        background-color: var(--c-white);
        color: var(--c-gold-light);
    }
    #page-top-scroll > a.link-hover > svg,
    #page-top-scroll > a:focus > svg{
        top: 10px;
        fill: var(--c-gold-light);
    }
}
/* アニメーション トップへ戻る */
#footer__wrapper.is-change #page-top-scroll{
    position: fixed;
    bottom: 60px;
    right: var(--mp-lr-reg);
    opacity: 1;

    animation-duration: .8s;
    animation-timing-function: var(--easeOutSine);
    animation-fill-mode: forwards;
    z-index: 5;
}
#footer__wrapper.is-change[data-is-change="true"] #page-top-scroll{
    animation-name: footer-on;
}
#footer__wrapper.is-change[data-is-change="false"] #page-top-scroll{
    animation-name: footer-off;
}
@keyframes footer-on{
    from{
        opacity: 0;
        visibility: hidden;
    }
    to{
        opacity: 1;
        visibility: visible;
    }
}
@keyframes footer-off{
    from{
        opacity: 1;
        visibility: visible;
    }
    to{
        opacity: 0;
        visibility: hidden;
    }
}
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
    /* ページトップへ戻る */
    #page-top-scroll{
        width: 48px;
        height: 72px;
    }
    #footer__wrapper.is-change #page-top-scroll{
        bottom: calc(120px + env(safe-area-inset-bottom));
    }
    #page-top-scroll > a{
        border-radius: 6px;
        font-size: var(--txt-reg);
    }
    #page-top-scroll > a > svg{
        top: 12px;
        height: 10px;
    }
}


/*-------------------------------*/
/* contact */
/*------------------------------*/
#footer-contact.content__wrapper{
    width: 100%;
    width: calc(1280rem/16);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 0 var(--mp-lr-reg);
}
#footer-contact.content__wrapper .txt{
    margin-top: calc(40rem/16);
    text-align: center;
}
#footer__wrapper{
    width: 100%;
    margin: 0 auto;
    background-color: var(--c-main);
}
/*===========================================*/
/* gridインナー */
#footer__inner{
    width: var(--fx-width);
    height: 100%;
    margin: 0 auto;
    padding: var(--mp-tb-xl) 0;

    --footer-grid-width: min(30%, calc(480rem/16));
    display: grid;
    grid-template-columns: var(--footer-grid-width) 1fr;
    place-content: center;
    grid-template-areas:
    "logo sitemap"
    "copy contact"
    ;
}
#footerLogo{
    grid-area: logo;
}
#footer__sitemap{
    grid-area: sitemap;
}
.contact-square{
    grid-area: contact;
}
#bottom-box{
    grid-area: copy;
}
/*===========================================*/
/* 社名 */
/* #footerLogo{
width: calc(280rem / 16);
} */
#footerLogo > a
{
    display: inline-block;
    font-size: var(--txt-3xl);
    font-weight: 700;
    font-style: normal;
    font-family: vdl-logojrblack, sans-serif;
    line-height: 1;
    color: var(--c-white);
    white-space: nowrap;

    margin-bottom: 0.3em;
    padding-bottom: 0.3em;
    border-bottom: solid 1px var(--c-white);

    transition: opacity .3s var(--easeOutCubic);
}
#footerLogo a.link-hover{
    opacity: 0.7;
}
/* 住所 */
.place-address__wrapper{
    width: 100%;
}
.place-address__wrapper p{
    color: var(--c-white);
    line-height: 1.3;
    white-space: nowrap;
}
/* サイトマップ */
#footer__sitemap{
    margin-top: 1em;
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#footer__sitemap li + li{
    margin-left: 2.5em;
}
#footer__sitemap li:last-of-type{
    margin-right: 0;
}
#footer__sitemap li > a{
    color: var(--c-white);
    font-size: var(--txt-reg);
}
/* コンタクトボタン */
.contact-square{
    width: 100%;

    display: flex;
    justify-content: end;
    align-items: center;
}
.contact-square > a.button.-footer-contact{
    width: 100%;
    max-width: calc(280rem/16);
    height: calc(64rem/16);
    background-color: var(--c-white) !important;
    border: 2px solid var(--c-white) !important;

    color: var(--c-main) !important;
    font-size: var(--txt-reg);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity .3s var(--easeOutCubic);
}
/* 受付時間 */
.contact-square .footer-tel{
    font-size: var(--txt-md);
    color: var(--c-bk);
    margin-right: 1em;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-square .footer-tel p{
    line-height: 1.2;
}
/* 電話番号 */
.contact-square .footer-tel .footer-tel_number{
    text-decoration: none;
    font-size: var(--txt-xl);
    font-weight: 700 !important;
    font-family: var(--baseFonts);
    color: var(--c-white);
    line-height: 1;

    font-family: "Lato", sans-serif;
    font-style: normal;
}
.contact-square .footer-tel .footer-tel_number > span{
    font-size: var(--txt-md);
}
.contact-square .footer-tel .footer-tel_time{
    font-feature-settings: "palt";
    font-size: var(--txt-reg);
    letter-spacing: 0.07em;
    line-height: 1;
    color: var(--c-white);
}
/* hover設定 */
@media(any-hover:hover){
    .contact-square a.button.-footer-contact.link-hover,
    .contact-square a.button.-footer-contact:focus{
        opacity: 0.7;
    }
}
/* コピーライト */
#bottom-box{
    margin-top: auto;
}
#copyright{
    color: var(--c-white);
    font-size: var(--txt-sm);
}



/*-------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media(max-width: 1023px){
    /*===========================================*/
    /* gridインナー */
    #footer__inner{
        place-content: center;
        grid-template-areas:
        "sitemap sitemap"
        "logo contact"
        "copy copy"
        ;
        gap: calc(60rem/16);
    }
    /*===========================================*/
    /*===========================================*/
    /* ロゴ */
    #footerLogo{
        width: calc(200rem / 16);
    }
    /* サイトマップ */
    #footer__sitemap{
        gap: 1em;
        width: 100%;
        border-bottom: solid 1px var(--c-white);
        padding-bottom: 2em;
    }
    /* コンタクトボタン */
    .contact-square{
        margin-top: calc(40rem/16);
        width: 100%;

        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex-direction: column;
        gap: 1em;
    }
    .contact-square .footer-tel{
        margin-right: 0;
    }
    #footer__inner > .contact-square > a{
        height: 64px;
    }
    /* 電話番号 */
    #footer__inner .contact-square .footer-tel .footer-tel_time{
        letter-spacing: 0.03em;
    }
    /* お問い合わせ */
    #footer__inner > .contact-square{
        margin-top: 0;
    }
    /* コピーライト */
    #bottom-box{
        margin-top: calc(40rem/16);
    }
}/*Tablet END*/



/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
    /* ロゴ */
    #footerLogo{
        width: 100%;
    }
    #footerLogo::before{
        height: 84px;
    }
    #footerLogo > a{
        display: block;
        width: calc(200rem / 16);
    }
    #footer-contact.content__wrapper .txt{
        text-align: justify;
    }
    /* 住所 */
    .place-address__wrapper{
        margin-top: 0.5em;
        padding-left: 0;
    }
    /*===========================================*/
    /* gridインナー */
    #footer__inner{
        display: flex;
        flex-direction: column;
    }
    /*===========================================*/
    /* サイトマップ */
    #footer__sitemap{
        border-top: solid 1px var(--c-white);
        border-bottom: solid 1px var(--c-white);
        padding-top: 1em;
        padding-bottom: 1em;

        flex-direction: column;
    }
    #footer__sitemap li{
        width: 100%;
    }
    #footer__sitemap li + li{
        margin-left: 0;
        border-top: solid 1px var(--c-gray-light);
    }
    #footer__sitemap li > a{
        display: block;
        line-height: 1;
        width: 100%;
        height: 100%;
        padding-top: 1.3em;
        padding-bottom: 1.3em;
    }
    /* コンタクトボタン */
    #footer__inner > .contact-square{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    #footer__inner > .contact-square > a{
        height: 64px;
        width: 200px;
    }
    /* 電話番号 */
    #footer__inner .contact-square .footer-tel .footer-tel_time{
        letter-spacing: -0.01em;
    }
    /* コピーライト */
    #bottom-box{
        margin-top: calc(24rem/16);
    }
}/*Smartphone END*/

/* ============================================================
 * トップページのフッター
 * .site-footer をブロックとし、各エリアを __要素名 で管理する。
 * ロゴ・営業案内／サイト内ナビ／予約・Instagram／著作権表示
 * ============================================================ */
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
    box-sizing: border-box;
}

.site-footer {
    color: var(--c-white);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 64px;
    width: var(--fx-width);
    margin-inline: auto;
    padding-block: 80px;
}

.site-footer__brand,
.site-footer__content {
    min-width: 0;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    transition: opacity .3s var(--easeOutSine);
}

.site-footer a:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 5px;
}

/* ------------------------------------------------------------
 * ブランド・営業案内：SVGロゴを白で表示
 * ------------------------------------------------------------ */
.site-footer__logo {
    display: block;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-white);
    font-size: 59px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.site-footer__logo .start-up-font {
    display: block;
    font-size: inherit;
    color: var(--c-white);
    width: 100%;
}

.site-footer__tagline {
    margin-top: 12px;
    font-size: var(--txt-reg);
    line-height: 1.6;
}

/* 営業案内：曜日別の営業時間と定休日 */
.site-footer__hours {
    margin-top: 36px;
    font-size: var(--txt-reg);
    line-height: 1.8;
	font-feature-settings: "palt";
}

.site-footer__hours-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
}

/* 営業案内：同じ幅で文字を均等配置し、括弧の左右両端をそろえる */
.site-footer__hours-row dt {
    flex: 0 0 6em;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
}

.site-footer__hours-row dd {
    margin: 0;
}

/* ------------------------------------------------------------
 * サイト内ナビゲーション：PCは右寄せの横並び
 * ------------------------------------------------------------ */
.site-footer__nav-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__nav-link {
    display: inline-block;
    font-size: var(--txt-reg);
    line-height: 1.7;
    white-space: nowrap;
}

/* ------------------------------------------------------------
 * WEB予約・Instagram：予約先はHTML、アイコンの寸法はここで調整
 * ------------------------------------------------------------ */
.site-footer__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 310px;
    max-width: 100%;
    margin-top: 44px;
    margin-left: auto;
}

.site-footer .site-footer__reservation {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    column-gap: 12px;
    min-height: 60px;
    padding: 14px 20px;
    border-radius: 8px;
    background: var(--c-accent-yellow);
    color: var(--c-main);
    font-size: var(--txt-reg);
    line-height: 1.5;
    text-align: center;
}

.site-footer__external-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* 営業時間の下に、短いSNSリンクを横並びで配置。 */
.site-footer__sns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 24px;
}
.site-footer__sns > a{
    transition: opacity .3s var(--easeOutSine);
}
.site-footer .reserve__sns-link {
    grid-template-columns: 24px auto;
    gap: 4px;
    height: auto;
    min-height: 44px;
    font-size: var(--txt-sm);
    line-height: 1.5;
}

.site-footer .reserve__sns-icon {
    width: 24px;
    height: 24px;
}

/* ------------------------------------------------------------
 * 著作権表示：右下に配置
 * ------------------------------------------------------------ */
.site-footer__copyright {
    margin-top: 40px;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.site-footer__copyright small {
    font-size: inherit;
}

/* ------------------------------------------------------------
 * リンク操作：マウスとキーボードで位置が動かないシンプルな表示
 * ------------------------------------------------------------ */
@media (any-hover: hover) {
    .site-footer a:hover {
        opacity: .75;
    }
    .site-footer #page-top-scroll a:hover{
        opacity: unset;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a {
        transition: none;
    }
}

/* ------------------------------------------------------------
 * 中間幅：ロゴとナビゲーションの間隔を調整
 * ------------------------------------------------------------ */
@media (max-width: 1279px) {
    .site-footer__inner {
        grid-template-columns: 320px minmax(0, 1fr);
        column-gap: 40px;
    }

    .site-footer__logo {
        font-size: 54px;
    }

    .site-footer__nav-list {
        column-gap: 24px;
    }
}

/* ------------------------------------------------------------
 * タブレット：ブランド・リンクエリアを縦並びにする
 * ------------------------------------------------------------ */
@media (max-width: 959px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        row-gap: 40px;
        padding-block: 64px;
    }

    .site-footer__brand {
        width: min(360px, 100%);
    }

    .site-footer__nav-list {
        justify-content: flex-start;
		gap: 0 40px;
    }
	.site-footer__nav-link{
		width: calc(310rem/16);
		max-width: 100%;
		padding-block: 1em;
		border-bottom: solid 1px var(--c-white);
		gap: 0;
	}
    .site-footer__nav-item:first-child > .site-footer__nav-link {
        border-top: solid 1px var(--c-white);
    }
    .site-footer__nav-item:nth-child(2) > .site-footer__nav-link {
        border-top: solid 1px var(--c-white);
    }

    .site-footer__actions {
        margin-top: 32px;
        margin-left: 0;
    }

    .site-footer__copyright {
        text-align: left;
    }
}

/* ------------------------------------------------------------
 * スマートフォン：ナビゲーションは2列、長い項目は1行分を使う
 * ------------------------------------------------------------ */
@media (max-width: 559px) {
    .site-footer__inner {
        padding-block: 48px;
    }

    .site-footer__logo {
        font-size: clamp(40px, 12vw, 54px);
    }

    .site-footer__tagline {
        font-size: 13px;
    }

    .site-footer__hours {
        margin-top: 28px;
    }

    .site-footer__nav-list {
        display: block;
    }
    .site-footer__nav-item:last-child {
        grid-column: 1 / -1;
    }
    .site-footer__nav-item:nth-child(2) > .site-footer__nav-link {
        border-top: none;
    }

    .site-footer__copyright {
        margin-top: 32px;
    }
}