@charset "utf-8";

/*
    ?占쎈㈃???占쎄뎅???占쎈깽????CSS

    ?占쏙옙?蹂댁닔 湲곤옙?:
    - 移댄럹24 ?占쏀뭹 紐⑤뱢???占쎌슜?占쏙옙? ?占쎌뒿?占쎈떎.
    - 紐⑤뱺 ?占쏀깮?占쎈뒗 .branchImageTabList ?占쎌쐞濡쒕쭔 ?占쎌꽦?占쎈땲??
    - ?占쎈낯 /ons/main/main_prd_list_2.css??李멸퀬占??占쎄퀬 ?占쎌젙?占쏙옙? ?占쎌뒿?占쎈떎.
    - 踰꾪듉?占쎈뒗 line-height占?二쇽옙? ?占쎄퀬 flex占?以묒븰 ?占쎈젹?占쎈땲??

    ?占쎌젙 媛€??
    - ??踰꾪듉 ?占쎄린, 移대뱶 媛꾧꺽, ?占쏙옙?吏€ 鍮꾩쑉, ?占쎌뒪???占쎄린
    - 紐⑤컮??移대뱶 ???? ?占쎌껜蹂닿린??2?? ?占쎌뼱占???? 1??湲곤옙?

    ?占쎌젙 湲덌옙?:
    - section, h1, .swiper, .ons_inner, #contents 媛숋옙? ?占쎌뿭 ?占쏀깮??    - branchImageTabList__* ?占쎈옒?占쎈챸
    - data-branch-image-active-tab ?占쎌꽦占?*/

.branchImageTabList {
    margin-top: 80px;
    margin-bottom: 0;
    scroll-margin-top: 120px;
}

.branchImageTabList .branchImageTabList__inner {
    width: 100%;
    max-width: var(--width-max);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.branchImageTabList .branchImageTabList__title {
    margin: 0;
    color: var(--font-color-base);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

.branchImageTabList .branchImageTabList__title span {
    display: inline-block;
}

.branchImageTabList .branchImageTabList__eyebrow{
    color: var(--mono-2-95);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.branchImageTabList__title .title_global{
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
  color: var(--point-color-secondary);
}

.branchImageTabList .branchImageTabList__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

.branchImageTabList .branchImageTabList__tabItem {
    min-width: 0;
}

.branchImageTabList .branchImageTabList__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--mono-4-dd);
    border-radius: var(--radius-6);
    background: var(--mono-ff);
    color: var(--font-color-base);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.branchImageTabList .branchImageTabList__tab.is-active {
    border-color: var(--point-color-primary);
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
}

.branchImageTabList .branchImageTabList__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.branchImageTabList .branchImageTabList__item {
    min-width: 0;
    margin-top: 12px;
}

.branchImageTabList .branchImageTabList__item[hidden] {
    display: none !important;
}

.branchImageTabList .branchImageTabList__card {
    display: block;
    min-width: 0;
    color: var(--font-color-base);
    text-decoration: none;
}

.branchImageTabList .branchImageTabList__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-6);
    background: var(--mono-5-f6);
}

.branchImageTabList .branchImageTabList__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branchImageTabList .branchImageTabList__name[hidden],
.branchImageTabList .branchImageTabList__desc[hidden] {
    display: none !important;
}

.branchImageTabList .branchImageTabList__card:focus-visible {
    outline: 2px solid var(--point-color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-6);
}

.branchImageTabList .branchImageTabList__name:empty,
.branchImageTabList .branchImageTabList__desc:empty {
    display: none;
}

.branchImageTabList .branchImageTabList__name {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--font-color-base);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.branchImageTabList .branchImageTabList__desc {
    margin: 6px 0 0;
    color: var(--mono-2-95);
    font-size: 13px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .branchImageTabList .branchImageTabList__tab:hover {
        border-color: var(--point-color-primary);
        background: var(--point-color-primary);
        color: var(--font-color-base, #000);
    }
}

@media (max-width: 767px) {
    .branchImageTabList {
        margin-top: 60px;
        margin-bottom: 0;
        scroll-margin-top: 150px;
    }

    .branchImageTabList .branchImageTabList__tab {
        height: 36px;
        padding: 0 6px;
        font-size: 12px;
    }

    .branchImageTabList .branchImageTabList__tab.is-active {
        border-color: var(--point-color-primary);
        background: var(--point-color-primary);
        color: var(--font-color-base, #000);
    }

    .branchImageTabList .branchImageTabList__grid {
        grid-template-columns: 1fr;
        gap: 16px 10px;
    }

    .branchImageTabList[data-branch-image-active-tab="all"] .branchImageTabList__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .branchImageTabList .branchImageTabList__name {
        margin-top: 10px;
        font-size: 15px;
    }

    .branchImageTabList .branchImageTabList__desc {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .branchImageTabList .branchImageTabList__grid {
        grid-template-columns: 1fr;
    }

    .branchImageTabList[data-branch-image-active-tab="all"] .branchImageTabList__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* event tab auto visibility: start */
.branchImageTabList[hidden],
.branchImageTabList .branchImageTabList__tabs[hidden],
.branchImageTabList .branchImageTabList__tabItem[hidden],
.branchImageTabList .branchImageTabList__grid[hidden] {
    display: none !important;
}

.branchImageTabList .branchImageTabList__item.is-unavailable {
    display: none !important;
}

.branchImageTabList[data-branch-image-visible-count="1"] .branchImageTabList__grid {
    grid-template-columns: 1fr;
}
/* event tab auto visibility: end */
/* Branch-B hardcoded visibility adapter */
.branchImageTabList .branchImageTabList__tabItem[hidden],
.branchImageTabList .branchImageTabList__tabs[hidden] {
    display: none !important;
}