@charset "UTF-8";
/* =========================================================================
   HOTEL PATIO フォトギャラリー専用CSS（page_gallery.php からのみ読み込む）
   -------------------------------------------------------------------------
   配色トークン（--ptp-ink 等）は common/css/patio.css の :root が正本。
   見出し帯は共通クラス .pt-hero（patio.css）を使う。
   クラスはすべて .ptGal__ 名前空間で、既存CSS・SWELLと衝突しない。
   ライトボックスは外部ライブラリ非依存（素の DOM API のみ）。
   2026-08-29 作成
   ========================================================================= */

.ptGal {
    color: var(--ptp-ink);
    background: #fff;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ptGal__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 0 88px;
}

/* ---- リード ------------------------------------------------------------ */
.ptGal__lead {
    font-size: 16px;
    line-height: 2.05;
    color: var(--ptp-sub);
    margin: 0;
    text-align: center;
}

.ptGal__count {
    display: flex;
    justify-content: center;
    margin: 24px 0 0;
}

.ptGal__count span {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--ptp-acc);
    background: var(--ptp-acc-soft);
    border: 1px solid #ece1cc;
    border-radius: 999px;
    padding: 7px 18px;
    line-height: 1;
}

/* ---- マソンリー（CSS columns） ------------------------------------------
   高さのそろわない写真をきれいに敷き詰めるため grid ではなく columns を使う。
   break-inside: avoid で1枚が段をまたがないようにする。 */
.ptGal__grid {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    columns: 4;
    column-gap: 18px;
}

.ptGal__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 18px;
}

.ptGal__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--ptp-soft);
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    line-height: 0;
    box-shadow: 0 6px 18px rgba(34, 31, 29, .07);
    transition: box-shadow .3s, transform .3s;
}

.ptGal__btn img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .3s;
}

.ptGal__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(34, 31, 29, 0);
    transition: background .3s;
    pointer-events: none;
}

.ptGal__btn:hover {
    box-shadow: 0 14px 32px rgba(34, 31, 29, .16);
    transform: translateY(-3px);
}

.ptGal__btn:hover img { transform: scale(1.05); }
.ptGal__btn:hover::after { background: rgba(34, 31, 29, .12); }

.ptGal__btn:focus-visible {
    outline: 2px solid var(--ptp-acc);
    outline-offset: 3px;
}

/* ---- ライトボックス ---------------------------------------------------- */
.ptGal__lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(16, 14, 13, .94);
    padding: 64px 5% 88px;
}

.ptGal__lb.is-open { display: flex; }

.ptGal__lbFig {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ptGal__lbFig img {
    max-width: 100%;
    max-height: calc(100vh - 152px);
    width: auto;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* 閉じる・前後ボタン */
.ptGal__lbBtn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color .25s, border-color .25s;
}

.ptGal__lbBtn:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.ptGal__lbBtn:focus-visible { outline: 2px solid var(--ptp-acc); outline-offset: 3px; }

.ptGal__lbClose {
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
}

.ptGal__lbClose::before,
.ptGal__lbClose::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 1.5px;
    background: #fff;
}

.ptGal__lbClose::before { transform: rotate(45deg); }
.ptGal__lbClose::after { transform: rotate(-45deg); }

.ptGal__lbPrev,
.ptGal__lbNext {
    top: 50%;
    margin-top: -26px;
    width: 52px;
    height: 52px;
}

.ptGal__lbPrev { left: 18px; }
.ptGal__lbNext { right: 18px; }

.ptGal__lbPrev::before,
.ptGal__lbNext::before {
    content: "";
    width: 13px;
    height: 13px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
}

.ptGal__lbPrev::before { transform: rotate(-135deg); margin-left: 4px; }
.ptGal__lbNext::before { transform: rotate(45deg); margin-right: 4px; }

.ptGal__lbCounter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    letter-spacing: .14em;
}

/* ライトボックスを開いている間は背面をスクロールさせない */
body.ptGal-lbOpen { overflow: hidden; }

/* ---- CTA --------------------------------------------------------------- */
.ptGal__cta {
    margin-top: 64px;
    padding: 40px 5%;
    background: var(--ptp-soft);
    border: 1px solid var(--ptp-line);
    border-radius: 18px;
    text-align: center;
}

.ptGal__ctaLead {
    font-size: 16px;
    line-height: 1.9;
    color: var(--ptp-sub);
    margin: 0 0 18px;
}

.ptGal__tel {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    color: var(--ptp-ink);
    text-decoration: none;
}

.ptGal__tel small {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: .16em;
    color: var(--ptp-acc);
    margin-right: 10px;
    vertical-align: 5px;
}

.ptGal__telNote {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ptp-sub);
    margin: 12px 0 0;
}

.ptGal__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.ptGal__cta .ptGal__btnLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: 17px 32px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color .25s, color .25s, border-color .25s;
}

.ptGal__btnLink.-solid {
    background-color: var(--ptp-ink);
    color: #fff;
    border: 1px solid var(--ptp-ink);
}

.ptGal__btnLink.-solid:hover { background-color: #453f3a; border-color: #453f3a; color: #fff; }

.ptGal__btnLink.-ghost {
    background-color: #fff;
    color: var(--ptp-ink);
    border: 1px solid #d8d1c9;
}

.ptGal__btnLink.-ghost:hover { background-color: #efeae4; color: var(--ptp-ink); }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media only screen and (max-width: 1200px) {
    .ptGal__inner { padding: 56px 5% 88px; }
}

@media only screen and (max-width: 1000px) {
    .ptGal__inner { padding: 44px 5% 72px; }
    .ptGal__grid { columns: 3; column-gap: 14px; }
    .ptGal__item { margin-bottom: 14px; }
}

@media only screen and (max-width: 767px) {
    .ptGal__inner { padding: 32px 4% 60px; }

    .ptGal__lead { font-size: 14px; line-height: 1.95; text-align: left; }
    .ptGal__count { justify-content: flex-start; margin-top: 18px; }
    .ptGal__count span { font-size: 12px; padding: 6px 14px; }

    .ptGal__grid { columns: 2; column-gap: 10px; margin-top: 26px; }
    .ptGal__item { margin-bottom: 10px; }
    .ptGal__btn { border-radius: 8px; }

    .ptGal__lb { padding: 56px 3% 72px; }
    .ptGal__lbFig img { max-height: calc(100vh - 128px); }
    .ptGal__lbClose { top: 10px; right: 10px; width: 40px; height: 40px; }
    .ptGal__lbPrev, .ptGal__lbNext { width: 42px; height: 42px; margin-top: -21px; }
    .ptGal__lbPrev { left: 8px; }
    .ptGal__lbNext { right: 8px; }
    .ptGal__lbCounter { bottom: 22px; font-size: 13px; }

    .ptGal__cta { margin-top: 46px; padding: 30px 6%; border-radius: 14px; }
    .ptGal__ctaLead { font-size: 14px; }
    .ptGal__tel { font-size: 27px; }
    .ptGal__tel small { font-size: 12px; margin-right: 8px; vertical-align: 4px; }
    .ptGal__telNote { font-size: 12px; }
    .ptGal__btns { gap: 10px; margin-top: 22px; }
    .ptGal__cta .ptGal__btnLink { min-width: 0; width: 100%; padding: 16px 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ptGal *,
    .ptGal *::before,
    .ptGal *::after { transition: none !important; }
    .ptGal__btn:hover { transform: none; }
    .ptGal__btn:hover img { transform: none; }
}