@charset "utf-8";

/* =========================================================
    フッター（WordPress 化のときは footer.php の部分）
    ※文字は rem（カンプ「標準」= 1rem 16px）、それ以外は px 固定
========================================================= */
/* 上端が小数点の位置（10796.125px など）になる画面幅では、上の白い部分との継ぎ目に 1px の線が出る。
    線が出ても目立たないよう、継ぎ目の後ろ（上 50px）は黒ではなく白にする */
#footer {
    background: linear-gradient(var(--white) 50px, var(--footer) 50px);
    color: var(--white);
}

/* 山の絵：1920px で左右中央、はみ出しは切る（.wide-image）
    画像の下半分（白いロゴの後ろ）は透過なので、地面の黒い帯から下を黒にする
    （帯の位置は画像の高さに対する割合。PC 252/469px、SP 146/581px）
    box-shadow：上の白い部分に 2px 重ねて白で塗り、継ぎ目のすき間（地色のベージュ）も見えないようにする */
.footer-visual {
    position: relative;
    background: linear-gradient(var(--white) 53.7%, var(--footer) 53.7%);
    box-shadow: 0 -2px 0 var(--white);
}

.footer-visual img {
    width: 1920px;
}

/* 画像の中のロゴの上に重ねる透明のリンク
    位置・大きさは画像の高さに対する割合（ロゴの範囲を画像から実測。PC 257〜467/469px） */
.footer-logo-link {
    position: absolute;
    top: 53%;
    left: 50%;
    height: 47%;
    aspect-ratio: 150 / 220;
    transform: translateX(-50%);
}

.footer-main {
    padding: 46px 20px 68px;
}

.footer-insta {
    display: block;
    width: 31px;
    margin-inline: auto;
}

.footer-cols {
    display: flex;
    align-items: flex-start;
    width: min(1200px, 100%);
    margin: 55px auto 0;
}

.footer-info {
    flex-shrink: 0;
    width: 23.25rem; /* 372px。文字が大きくなったら枠も広げる */
    font-size: 0.9375rem; /* 15px */
    line-height: 1.87;
}

.footer-links {
    flex: 1;
    min-height: 138px;
    padding-left: 76px;
    border-left: 1px solid var(--white);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px; /* 最小の間隔。7 項目が 1 行に入るよう 20px（768px・1200px の画面で枠がいちばん狭くなる） */
}

.footer-nav a {
    font-size: 1.125rem; /* 18px */
    white-space: nowrap;
}

.footer-btns {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    margin-top: 32px;
}

/* 大・特大：ボタンが広がって 3 つ入りきらないときは次の行へ（標準は折り返さず、狭いときは縮む） */
html:is([data-text-size="large"], [data-text-size="xlarge"]) .footer-btns {
    flex-wrap: wrap;
}

/* ボタン：幅は 235px。画面が狭くて 3 つ入りきらないときは縮む（はみ出すと画面が横にずれるため）
    ただし文字と矢印より狭くはならない（特大などで中身が 235px を超えるときはボタンを広げ、入りきらなければ次の行へ） */
.footer-btns li {
    flex: 0 1 235px;
    min-width: min-content;
}

.footer-btns .btn {
    width: 100%;
}


/* 系列館のロゴ：3 つずつ 2 段
    列の幅を揃えてロゴは枠の中央に置き、見た目の大きさが揃うようにロゴごとに幅を指定（見本から実測） */
.footer-group {
    padding: 70px 20px 50px;
    border-radius: 50px 50px 0 0;
    background: var(--bg);
    color: var(--text);
}

.footer-group-list {
    display: grid;
    grid-template-columns: repeat(3, 270px);
    justify-content: center;
    justify-items: center;
    align-items: center;
    row-gap: 50px;
}

.footer-group-list .logo-hamazen {
    width: 126px;
}

.footer-group-list .logo-koyama {
    width: 122px;
}

.footer-group-list .logo-capsule {
    width: 220px;
}

.footer-group-list .logo-shiroyoshi {
    width: 153px;
}

.footer-group-list .logo-buono {
    width: 162px;
}

.footer-group-list .logo-hajime {
    width: 220px;
}

.footer-copy {
    margin-top: 60px;
    text-align: center;
}

.footer-copy small {
    font-size: 0.875rem; /* 14px */
}

/* タブレット：住所とリンクを縦に並べる
    PC でも文字サイズ大・特大のときは、横に並べると入りきらず画面が横にずれるので縦に並べる */
@media (min-width: 1200px) {
    html:is([data-text-size="large"], [data-text-size="xlarge"]) .footer-cols {
        flex-direction: column;
        align-items: center;
    }

    html:is([data-text-size="large"], [data-text-size="xlarge"]) .footer-info {
        width: auto;
    }

    html:is([data-text-size="large"], [data-text-size="xlarge"]) .footer-links {
        flex: none;
        width: min(751px, 100%);
        min-height: 0;
        margin-top: 40px;
        padding: 30px 0 0;
        border-top: 1px solid var(--white);
        border-left: none;
    }
}

@media (max-width: 1199px) {
    .footer-cols {
        flex-direction: column;
        align-items: center;
    }

    .footer-info {
        width: auto;
    }

    .footer-links {
        flex: none;
        width: min(751px, 100%);
        min-height: 0;
        margin-top: 40px;
        padding: 30px 0 0;
        border-top: 1px solid var(--white);
        border-left: none;
    }

    .footer-group-list {
        grid-template-columns: repeat(3, 230px);
    }
}

@media (max-width: 767px) {
    /* 画面幅いっぱいに広げる（533px より狭い画面では左右を切る） */
    .footer-visual {
        background: linear-gradient(var(--white) 26%, var(--footer) 26%);
    }

    .footer-visual img {
        width: max(100%, 533px);
    }

    /* SP の画像（1066×581px）ではロゴが 204〜579px */
    .footer-logo-link {
        top: 34%;
        height: 66%;
        aspect-ratio: 210 / 385;
    }

    .footer-main {
        padding: 30px 20px 50px;
    }

    .footer-cols {
        align-items: stretch;
        margin-top: 45px;
        padding-inline: 20px;
    }

    .footer-links {
        width: 100%;
        border-top-width: 2px;
    }

    .footer-nav ul {
        display: block;
    }

    .footer-nav a {
        display: block;
        padding: 7px 2px;
    }

    .footer-btns {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }

    .footer-btns li {
        flex: none;
    }

    .footer-group {
        padding: 45px 20px 50px;
        border-radius: 20px 20px 0 0;
    }

    /* SP：PC の約 0.5 倍。画面が広くても 3 列の幅は SP カンプ（390px）のときより広げない（1 列 最大 117px） */
    .footer-group-list {
        grid-template-columns: repeat(3, minmax(0, 117px));
        row-gap: 30px;
    }

    .footer-group-list .logo-hamazen {
        width: 64px;
    }

    .footer-group-list .logo-koyama {
        width: 61px;
    }

    .footer-group-list .logo-capsule {
        width: 105px;
    }

    .footer-group-list .logo-shiroyoshi {
        width: 77px;
    }

    .footer-group-list .logo-buono {
        width: 82px;
    }

    .footer-group-list .logo-hajime {
        width: 105px;
    }

    .footer-copy {
        margin-top: 40px;
    }
}

/* 500px 以下：右下の「ご予約はこちら」（横長のタブ）とチャットが、いちばん下までスクロールしたときに
    コピーライトに重ならないよう、下に余白をとる */
@media (max-width: 500px) {
    .footer-group {
        padding-bottom: 60px;
    }
}