@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - shop.css
   店舗案内・アクセスページ
======================================== */

/* ========================================
   店舗ギャラリー
======================================== */
.shop-atmosphere-section {
    /* 地色はbodyの共通背景（crepe-color-bg.webp、common.css）に任せる。 */
    background: none;
}

/* 上パディングをなくす（.section--pad本来の値を上書き）。page-heroの直後なので、上に余白を持たせない。 */
.shop-atmosphere-section.section--pad {
    padding-top: 0;
}

/* セクション一番上のゴールドの文字ロゴ。中央配置で、下の見出しバー（.shop-gallery-head）との間に余白を持たせる。 */
.shop-atmosphere-section__logo {
    display: block;
    width: auto;
    height: 4.5rem;
    margin: 0 auto 2rem;
}

@media (min-width: 768px) {
    .shop-atmosphere-section__logo {
        margin-bottom: 2.5rem;
    }
}

/* セクション構造を他ページ（company.php・recruit.phpなど）と揃え、外側（.section--pad）=パディング、
   内側（.inner）=max-width・中央寄せの役割分担にしている（common.cssの.section--pad参照）。
   ※ .inner--narrow（固定880px）を付与しているので、ここでの上書きは不要。 */

/* ギャラリー上の見出しバー。左端=英字タイトル、右端=日本語タイトル、
   間をゴールドの一本線でつなぐ。 */
.shop-gallery-head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.shop-gallery-head__en {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--color-gold);
}

.shop-gallery-head__line {
    flex: 1;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.6;
}

.shop-gallery-head__ja {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--color-title-brown);
}

@media (min-width: 576px) {
    .shop-gallery-head__en {
        font-size: 1.25rem;
    }

    .shop-gallery-head__ja {
        font-size: 1.375rem;
    }
}

@media (min-width: 768px) {
    .shop-gallery-head {
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .shop-gallery-head__en {
        font-size: 1.5rem;
    }

    .shop-gallery-head__ja {
        font-size: 1.75rem;
    }
}

/* モバイルファースト（min-width）。ベースは576px未満の縦積み構成（3列のベント型だと
   各タイルが狭くなりすぎるため）。
     01 … 全幅（1行目）
     02 … 全幅（2行目）
     03・04 … 横並び（3行目）
   576px以上は3列のベント型（01=左縦長、02=右上横長、03・04=右下1マスずつ）に切り替える。 */
.shop-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 13rem 13rem 11rem;
    gap: 0.5rem;
}

.shop-gallery__item:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.shop-gallery__item:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.shop-gallery__item:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.shop-gallery__item:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
}

@media (min-width: 576px) {
    .shop-gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 11rem);
    }

    .shop-gallery__item:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .shop-gallery__item:nth-child(2) {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .shop-gallery__item:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .shop-gallery__item:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
    }
}

/* カード化：画像＋下のテキストボックスを、外周をゴールドの枠線で囲った
   １枚のカードとして見せる。
   ※ 画像=flex:1で残り高さいっぱい、テキストボックス=自然の高さぶんだけ下に確保。
   ※ グリッド自体の行の高さ（grid-template-rows）は変えず、その中で画像を
     わずかに縮めてテキストボックス分のスペースを作る。
   ※ ゴールドの枠線の値（rgba(191,160,106,0.45)）は店舗情報テーブルなど
     サイト内の他のゴールド縁と同じ。 */
.shop-gallery__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.shop-gallery__fig {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.shop-gallery__fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-gallery__item:hover .shop-gallery__fig img {
    transform: scale(1.05);
}

/* 店内（1枚目）の写真は、見せたい部分に合わせてフォーカス位置を調整 */
.shop-gallery__item:nth-child(1) .shop-gallery__fig img {
    object-position: 25% center;
}

/* ※ 以前のお席写真（shop-inside02.webp）は見せたい部分が左下に寄っていたため object-position を調整していたが、
   2026/09 に inside-sub02.webp に差し替えた際に不要になったので削除済み。
   実際の見え方を確認して、切れ方が気になれば .shop-gallery__item:nth-child(4) .shop-gallery__fig img に
   object-position を再設定すること。 */

/* 写真切り替え式のタイル（イートインなど、1枚以外の写真を抱えるマスで使う。
   画像を全て position: absolute で重ねておき、.is-active のみ opacity: 1 にすることでクロスフェードさせる（shop.jsがtoggle）。 */
.shop-gallery__fig--switchable img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.shop-gallery__fig--switchable img.is-active {
    opacity: 1;
    pointer-events: auto;
}

.shop-gallery__switch-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 0.375rem;
    transform: translateX(-50%);
}

.shop-gallery__switch-dot {
    width: 0.375rem;
    height: 0.375rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color var(--transition);
}

.shop-gallery__switch-dot.is-active {
    background-color: var(--color-white);
}

/* 画像の下のテキストボックス。上辺のゴールド線で画像と仕切る。
   左に濃茶地（FV・page-heroと同じ#302821）のブロックを置き、中のマークを
   ゴールドにする。右側に日本語のラベルを左寄せで並べる。 */
.shop-gallery__cap {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

.shop-gallery__cap-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background-color: #302821;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-gold);
}

.shop-gallery__cap-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-family: var(--font-family);
    font-size: 0.75rem;
    /* 768px未満は太字にしない。小さい文字だと太字がつぶれて読みにくいため
       （768px以上は下の@mediaで600に戻す）。 */
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .shop-gallery {
        grid-template-rows: repeat(2, 15rem);
        gap: 0.75rem;
    }

    .shop-gallery__cap-mark {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    .shop-gallery__cap-text {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
    }
}

@media (min-width: 1024px) {
    .shop-gallery {
        grid-template-rows: repeat(2, 18rem);
    }
}


.shop-info-inner {
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .shop-info-inner {
        margin-top: 5rem;
    }
}

.shop-info-inner .def-list {
    border-top: none;
    background-color: var(--color-white);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
}

/* 576px未満でもdt（見出し）とdd（内容）の横並びを維持する
   （共通の.def-rowは縦積みが既定なのでここで上書き。dtの幅は狭い画面でも
     項目名が収まるように6.5rem、576px以上で従来の9remに戻す）。 */
.shop-info-inner .def-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

.shop-info-inner .def-row:last-child {
    border-bottom: none;
}

/* dt（見出し列）はFV・page-heroと同じ濃茶地。地が濃いので文字は白系にする
   （.def-row dtの既定色 var(--color-primary-dark) を上書き）。 */
.shop-info-inner .def-row dt {
    flex: 0 0 6.5rem;
    display: flex;
    align-items: center;
    background-color: #302821;
    padding: 0.875rem 1rem;
    color: var(--color-text-white);
}

.shop-info-inner .def-row dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.875rem 1.25rem;
}

@media (min-width: 576px) {
    .shop-info-inner .def-row dt {
        flex: 0 0 9rem;
        padding: 0.875rem 1.25rem 0.875rem 1.75rem;
    }
}

@media (min-width: 768px) {
    .shop-info-inner .def-row dt {
        flex: 0 0 20%;
        padding: 1.125rem 1.5rem 1.125rem 2rem;
    }

    .shop-info-inner .def-row dd {
        padding: 1.125rem 1.5rem;
    }
}

/* ※ ホバーで地図の外周に茶色の枠線を出す。
     border ではなく outline を使う理由は2つ。
       ① border だと共通の .map-wrap（common.css）が持つ枠線指定を上書きしてしまう
       ② ホバー時にだけ border を足すとその分レイアウトがずれる
     outline はボックスの外側に描かれるのでレイアウトに影響せず、border-radius にも追従する。
     ※ 平時は透明の outline を常に持たせておき、色だけを変えてフェードさせる。 */
.shop-info-inner .map-wrap {
    margin-top: 2rem;
    /* 本文幅を 1024px に広げたことで地図も縦に大きくなるので、高さに上限をつける。
       ※ .map-wrap は縦横比で高さが決まる（common.css）ので、親側を押さえれば
         中のiframe（height: 100%）も一緒に縮む。念のためiframe側にも上限を入れている。 */
    max-height: 480px;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color var(--transition);
}

.shop-info-inner .map-wrap iframe {
    max-height: 480px;
}

/* ※ ホバーの検知は地図の上だけに限定する（外側の .shop-info-inner で拾うと
     上の店舗情報テーブルをなぞったときにも枚線が出てしまうため）。 */
.shop-info-inner .map-wrap:hover {
    outline-color: var(--color-title-brown);
}

@media (min-width: 768px) {
    .shop-info-inner .map-wrap {
        margin-top: 2.5rem;
    }
}

/* ========================================
   アクセス
======================================== */
.shop-access {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.shop-access__address {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-style: normal;
    line-height: 1.9;
    letter-spacing: 0.08em;
    color: var(--color-title);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 1024px) {
    .shop-access {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
    }
    .shop-access .map-wrap {
        flex: 1 1 62%;
    }
    .shop-access__body {
        flex: 1 1 38%;
    }
}