/* =========================================================
   Access page — 2026/10 update   (append to clinic.css)
   1) section headings (所在地 / アクセス)  ← matches clinic .hours__title
   2) transport tabs  (電車 / 車 / バイク・自転車)
   3) zoomable access map (image modal, PC + SP)
   4) Google mapで見る button (beside ビナガーデンズ button)
   All scoped under .current-access, カラダテラス green = #426c12.
   ========================================================= */

/* ---------- 1) section headings (same style as clinic 診療時間 .hours__title) ---------- */
.current-access .access_ttl {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    padding: 0 0 12px;
    margin: 0 0 30px;
    border-bottom: 1px solid #cfcfcf;
}
.current-access .access_ttl::before {       /* ▮ square marker */
    content: "";
    -webkit-flex: none;
            flex: none;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    background: #426c12;
}
.current-access .access_ttl__sub {          /* sub text sits just under the underline */
    margin: -20px 0 28px;
    font-size: 15px;
    color: #464646;
}

/* ---------- 2) tabs (shape mirrors plaza, themed to green) ---------- */
.current-access .access_tab_sec { margin: 0 0 60px; }

.current-access .tab {
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
}
.current-access .tab .tab_links {
    -webkit-flex: 1 1 0;
            flex: 1 1 0;
    background: #f1f4ea;
    border: 1px solid #426c12;
    border-bottom: 2px solid #426c12;
    color: #426c12;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: 20px 10px;
    cursor: pointer;
    -webkit-transition: background .2s, color .2s;
            transition: background .2s, color .2s;
}
.current-access .tab .tab_links + .tab_links { border-left: none; }
.current-access .tab .tab_links:hover { background: #e4ecd4; }
.current-access .tab .tab_links.active { background: #426c12; color: #fff; }

.current-access .tab_content {
    display: none;          /* JS toggles to block */
    padding: 60px 0 0;
}

/* steps / transport cards sit flush inside a tab */
.current-access .tab_content .ebina_way_sec,
.current-access .tab_content .teleport_sec { margin: 0; }

/* car tab = one centered card; bike+bicycle tab = two centered cards */
.current-access .tab_content .teleport_sec ul {
    -webkit-justify-content: center;
            justify-content: center;
}
.current-access .teleport_sec.single ul li { width: 520px; max-width: 100%; margin: 0; }
.current-access .teleport_sec.duo ul li { margin: 0 10px; }
.current-access .teleport_sec.duo ul li:last-child { margin-right: 10px; }

/* ---------- 3) zoomable access map ----------
   PC: image keeps its natural size (do NOT force width:100%, that stretched it).
   SP: scales to the column, centered — same as the original map behaviour.      */
.current-access .left_img_sec .map_zoom {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    margin-bottom: 1.5em;
}
.current-access .map_zoom img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #c2c2c2;
}
.current-access .map_zoom__hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 14px 6px 32px;
    background: rgba(66, 108, 18, .9);
    color: #fff;
    font-size: 13px;
    border-radius: 999px;
    pointer-events: none;
}
.current-access .map_zoom__hint:before {      /* magnifier ring */
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.current-access .map_zoom__hint:after {       /* magnifier handle */
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    margin-top: 3px;
    width: 7px;
    height: 2px;
    background: #fff;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* image modal — shared, not scoped so it can be reused elsewhere */
.img-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9999;
    display: none;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .8);
}
.img-modal.is-open { display: -webkit-flex; display: flex; }
.img-modal__img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.img-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.img-modal__close:before,
.img-modal__close:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background: #333;
}
.img-modal__close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }
.img-modal__close:after  { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 4) two buttons in the info box (Google left / ビナ right) ---------- */
.current-access .examination_sec ul .left_img_sec .btn_cover--2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 10px;
}
.current-access .examination_sec ul .left_img_sec .btn_cover--2 .btn_more_detail {
    -webkit-flex: 1 1 0;
            flex: 1 1 0;
    width: auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    padding: 14px 26px 14px 8px;
}

/* ---------- SP ---------- */
@media only screen and (max-width: 768px) {
    .current-access .access_ttl { font-size: 18px; }   /* keeps border + square, like .hours__title SP */
    .current-access .access_ttl__sub { margin: -14px 0 22px; font-size: 14px; }

    .current-access .access_tab_sec { margin: 0 0 40px; }
    .current-access .tab .tab_links { font-size: 14px; padding: 14px 4px; }
    .current-access .tab_content { padding: 36px 0 0; }

    .current-access .teleport_sec.single ul li,
    .current-access .teleport_sec.duo ul li { width: 100%; margin: 0 0 16px; }
    .current-access .teleport_sec.duo ul li:last-child { margin-bottom: 0; }

    /* map: scale to column, centered (the original SP behaviour) */
    .current-access .left_img_sec .map_zoom {
        display: block;
        width: 100%;
        max-width: 570px;
        margin: 0 auto 20px;
    }
    .current-access .map_zoom img { width: 100%; }
    .current-access .map_zoom__hint { font-size: 11px; bottom: 26px;}

    /* two buttons stack full width on SP */
    .current-access .examination_sec ul .right_info_sec .btn_cover--2 { -webkit-flex-direction: column; flex-direction: column; gap: 12px; }
    .current-access .examination_sec ul .right_info_sec .btn_cover--2 .btn_more_detail { width: 100%; font-size: 15px; padding: 15px 0; }

    .current-access .examination_sec ul .left_img_sec .btn_cover--2 .btn_more_detail{
        width: 100%;
        display: inline-block;
        flex: auto;
    }

}