/* =========================================================
   ACCESS HERO
========================================================= */

.page-hero--access::before{
    background:
        linear-gradient(
            rgba(25,40,60,.45),
            rgba(25,40,60,.45)
        ),
        url("../images/access/hero.jpg") center center / cover no-repeat;
}



/* =========================================================
   ACCESS COMMON
========================================================= */

.access-container{
    width:min(1180px,calc(100% - 80px));
    margin:0 auto;
}

.access-container--narrow{
    width:min(940px,calc(100% - 80px));
    margin:0 auto;
}

.access-intro,
.access-information,
.access-map,
.access-route,
.access-hours,
.access-faq,
.access-cta{
    position:relative;
    padding:120px 0;
}

.access-information{
    background:#f8f6f2;
}

.access-map{
    background:#fff;
}

.access-hours{
    background:#f8f6f2;
}

.access-section-heading{
    margin:0 auto 60px;
    text-align:center;
}

.access-section-heading--left{
    margin-left:0;
    text-align:left;
}

.access-section-heading__english{
    margin-bottom:8px;
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:1.3rem;
    font-weight:500;
    letter-spacing:.22em;
}

.access-section-heading__title{
    color:#2f2f2f;
    font-family:"Noto Serif JP",serif;
    font-size:4rem;
    font-weight:500;
    line-height:1.5;
    letter-spacing:.08em;
}

.access-section-heading__lead{
    max-width:760px;
    margin:20px auto 0;
    color:#666;
    font-size:1.6rem;
    line-height:2;
}

.access-section-heading--left .access-section-heading__lead{
    margin-left:0;
}

/* =========================================================
   STATION
========================================================= */

.access-station-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:36px;
}

.access-station-card{
    position:relative;
    padding:42px;
    background:#fff;
    border:1px solid #ebe5dc;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.access-station-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#b49661;
}

.access-station-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.access-station-card__number{
    margin-bottom:22px;
    color:#d8cab3;
    font-family:"Noto Serif JP",serif;
    font-size:4.8rem;
    line-height:1;
}

.access-station-card__type{
    color:#8d8d8d;
    font-size:1.3rem;
    letter-spacing:.08em;
}

.access-station-card__title{
    margin-top:10px;
    color:#2f2f2f;
    font-family:"Noto Serif JP",serif;
    font-size:3.2rem;
    font-weight:500;
    line-height:1.4;
}

.access-station-card__exit{
    display:inline-flex;
    margin-top:18px;
    padding:7px 18px;
    color:#fff;
    background:#b49661;
    font-size:1.3rem;
    font-weight:500;
}

.access-station-card__text{
    margin-top:22px;
    color:#666;
    font-size:1.5rem;
    line-height:2;
}
/* =========================================================
   CLINIC INFORMATION
========================================================= */

.access-information__layout{
    display:grid;
    grid-template-columns:540px 1fr;
    gap:70px;
    align-items:center;
}

.access-information__image-wrap{
    position:relative;
}

.access-information__image{
    width:100%;
    border:1px solid #ebe5dc;
}

.access-information__floor{
    position:absolute;
    right:-24px;
    bottom:24px;
    display:flex;
    align-items:center;
    padding:18px 24px;
    background:#fff;
    border-left:4px solid #b49661;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.access-information__floor-number{
    margin-right:16px;
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:3.4rem;
    line-height:1;
}

.access-information__floor-text{
    color:#555;
    font-size:1.3rem;
    line-height:1.6;
}

.access-information__english{
    margin-bottom:8px;
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:1.3rem;
    letter-spacing:.22em;
}

.access-information__title{
    color:#2f2f2f;
    font-family:"Noto Serif JP",serif;
    font-size:4rem;
    font-weight:500;
    line-height:1.5;
}

.access-information__name{
    margin-top:22px;
    color:#333;
    font-family:"Noto Serif JP",serif;
    font-size:2.5rem;
    line-height:1.7;
}

.access-information-list{
    margin-top:34px;
}

.access-information-list__row{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:24px;
    padding:18px 0;
    border-bottom:1px solid #ebe5dc;
}

.access-information-list__row:first-child{
    border-top:1px solid #ebe5dc;
}

.access-information-list__row dt{
    color:#8b6c3c;
    font-weight:600;
}

.access-information-list__row dd{
    color:#555;
    line-height:1.9;
}

.access-information-list a{
    color:#173f5b;
    font-weight:600;
}

.access-information-list a:hover{
    text-decoration:underline;
}

.access-information-list__sub{
    display:block;
    margin-top:4px;
    color:#888;
    font-size:1.3rem;
}

.access-information__buttons{
    display:flex;
    gap:16px;
    margin-top:40px;
}

.access-button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    min-width:240px;
    min-height:62px;
    padding:0 24px;
    border:1px solid #b49661;
    transition:.3s;
}

.access-button span:first-child{
    font-size:1.5rem;
    font-weight:500;
}

.access-button__arrow{
    margin-left:24px;
    font-size:2rem;
}

.access-button--map{
    color:#b49661;
    background:#fff;
}

.access-button--map:hover{
    color:#fff;
    background:#b49661;
}

.access-button--tel{
    color:#fff;
    background:#b49661;
}

.access-button--tel:hover{
    background:#8f7446;
    border-color:#8f7446;
}

/* =========================================================
   GOOGLE MAP
========================================================= */

.access-map__frame{
    overflow:hidden;
    border:1px solid #e6e0d7;
}

.access-map__frame iframe{
    display:block;
}

.access-map__address{
    display:flex;
    align-items:center;
    margin-top:22px;
    border:1px solid #ebe5dc;
}

.access-map__address-label{
    display:flex;
    align-items:center;
    justify-content:center;
    width:180px;
    min-height:72px;
    color:#fff;
    background:#b49661;
    font-family:"Noto Serif JP",serif;
    letter-spacing:.15em;
}

.access-map__address-text{
    flex:1;
    padding:0 28px;
    color:#555;
}
/* =========================================================
   ROUTE
========================================================= */

.access-route-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:36px;
}

.access-route-card{
    background:#fff;
    border:1px solid #ebe5dc;
}

.access-route-card__head{
    padding:34px 36px;
    border-bottom:1px solid #ebe5dc;
    background:#f8f6f2;
}

.access-route-card__label{
    display:block;
    margin-bottom:8px;
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:1.2rem;
    letter-spacing:.22em;
}

.access-route-card__title{
    color:#2f2f2f;
    font-family:"Noto Serif JP",serif;
    font-size:2.8rem;
    font-weight:500;
    line-height:1.5;
}

.access-route-steps{
    padding:0 36px;
}

.access-route-step{
    display:flex;
    gap:20px;
    padding:30px 0;
    border-bottom:1px solid #ebe5dc;
}

.access-route-step:last-child{
    border-bottom:none;
}

.access-route-step__number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    flex-shrink:0;
    color:#fff;
    background:#b49661;
    border-radius:50%;
    font-family:"Noto Serif JP",serif;
    font-size:1.3rem;
    font-weight:600;
}

.access-route-step__content{
    flex:1;
}

.access-route-step__content h4{
    margin:0 0 10px;
    color:#2f2f2f;
    font-size:1.8rem;
    font-weight:600;
    line-height:1.7;
}

.access-route-step__content p{
    color:#666;
    font-size:1.5rem;
    line-height:2;
}

/* =========================================================
   HOURS
========================================================= */

.access-hours__layout{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:60px;
    align-items:start;
}

.access-hours__english{
    margin-bottom:8px;
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:1.3rem;
    letter-spacing:.22em;
}

.access-hours__title{
    color:#2f2f2f;
    font-family:"Noto Serif JP",serif;
    font-size:4rem;
    font-weight:500;
    line-height:1.5;
}

.access-hours__text{
    margin-top:20px;
    color:#666;
    font-size:1.5rem;
    line-height:2;
}

.access-hours__notice{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:30px;
    padding:14px 20px;
    border-left:4px solid #b49661;
    background:#fff;
}

.access-hours__notice span{
    color:#888;
    font-size:1.3rem;
}

.access-hours__notice strong{
    color:#b49661;
    font-family:"Noto Serif JP",serif;
    font-size:3rem;
    font-weight:500;
}

.access-hours__table-wrap{
    overflow:hidden;
    border:1px solid #e6e0d7;
    background:#fff;
}

.access-hours-table thead th{
    padding:16px;
    color:#fff;
    background:#8a7048;
    border:1px solid #e6e0d7;
    font-size:1.3rem;
    font-weight:500;
}

.access-hours-table tbody th{
    color:#555;
    background:#f3eee6;
    font-size:1.3rem;
    font-weight:500;
}

.access-hours-table tbody th,
.access-hours-table tbody td{
    padding:16px 12px;
    text-align:center;
    border:1px solid #e6e0d7;
}

.access-hours-table tbody td{
    color:#8d6c37;
    font-size:1.6rem;
    font-weight:600;
}

.access-hours__annotation{
    margin-top:16px;
    color:#777;
    font-size:1.3rem;
    line-height:1.8;
}
/* =========================================================
   FAQ
========================================================= */

.access-faq-list{
    max-width:960px;
    margin:0 auto;
}

.access-faq-item{
    margin-bottom:16px;
    border:1px solid #e6e0d7;
    background:#fff;
}

.access-faq-item:last-child{
    margin-bottom:0;
}

.access-faq-item__question{
    display:flex;
    align-items:center;
    padding:24px 30px;
    cursor:pointer;
    list-style:none;
}

.access-faq-item__question::-webkit-details-marker{
    display:none;
}

.access-faq-item__mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    margin-right:20px;
    color:#fff;
    background:#b49661;
    border-radius:50%;
    font-family:"Noto Serif JP",serif;
    font-size:1.8rem;
}

.access-faq-item__question-text{
    flex:1;
    color:#333;
    font-size:1.7rem;
    font-weight:500;
    line-height:1.8;
}

.access-faq-item__icon{
    position:relative;
    width:18px;
    height:18px;
    margin-left:20px;
}

.access-faq-item__icon::before,
.access-faq-item__icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:18px;
    height:2px;
    background:#b49661;
    transition:.3s;
}

.access-faq-item__icon::after{
    transform:rotate(90deg);
}

.access-faq-item[open] .access-faq-item__icon::after{
    opacity:0;
    transform:rotate(0);
}

.access-faq-item__answer{
    display:flex;
    padding:0 30px 28px;
    border-top:1px solid #ebe5dc;
}

.access-faq-item__answer .access-faq-item__mark{
    margin-top:22px;
    background:#173f5b;
}

.access-faq-item__answer p{
    margin:22px 0 0;
    color:#666;
    font-size:1.5rem;
    line-height:2;
}

/* =========================================================
   CTA
========================================================= */

.access-cta{
    color:#fff;
    background:
        linear-gradient(rgba(48,46,42,.88),rgba(48,46,42,.88)),
        url("../images/common/footer-contact-bg.jpg") center / cover no-repeat;
}

.access-cta__inner{
    max-width:960px;
    margin:0 auto;
    text-align:center;
}

.access-cta__english{
    color:#d5c4a5;
    font-size:1.3rem;
    letter-spacing:.18em;
}

.access-cta__title{
    margin-top:12px;
    font-family:"Noto Serif JP",serif;
    font-size:3.8rem;
    font-weight:500;
    line-height:1.6;
}

.access-cta__text{
    max-width:720px;
    margin:20px auto 0;
    color:rgba(255,255,255,.82);
    font-size:1.5rem;
    line-height:2;
}

.access-cta__buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:46px;
}

.access-cta-button{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:120px;
    padding:22px;
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.access-cta-button:hover{
    opacity:.9;
    transform:translateY(-3px);
}

.access-cta-button--tel{
    background:#1f1f1f;
}

.access-cta-button--web{
    background:#b49661;
}

.access-cta-button__small{
    font-size:1.1rem;
}

.access-cta-button__main{
    margin-top:4px;
    font-family:"Noto Serif JP",serif;
    font-size:3rem;
    font-weight:500;
    line-height:1.4;
}

.access-cta-button__note{
    margin-top:4px;
    font-size:1.1rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width:767px){

    .access-intro,
    .access-information,
    .access-map,
    .access-route,
    .access-hours,
    .access-faq,
    .access-cta{
        padding:74px 0;
    }

    .access-container,
    .access-container--narrow{
        width:calc(100% - 40px);
    }

    .access-section-heading{
        margin-bottom:38px;
    }

    .access-section-heading__english{
        font-size:1.05rem;
    }

    .access-section-heading__title{
        font-size:2.8rem;
    }

    .access-section-heading__lead{
        font-size:1.3rem;
        text-align:left;
    }

    .access-station-grid,
    .access-route-grid,
    .access-information__layout,
    .access-hours__layout,
    .access-cta__buttons{
        grid-template-columns:1fr;
    }

    .access-information__floor{
        right:16px;
        bottom:16px;
    }

    .access-information__buttons{
        display:block;
    }

    .access-button{
        width:100%;
    }

    .access-button + .access-button{
        margin-top:10px;
    }

    .access-route-card__head,
    .access-route-steps{
        padding-left:24px;
        padding-right:24px;
    }

    .access-hours__table{
        min-width:700px;
    }

    .access-hours__table-wrap{
        overflow-x:auto;
    }

    .access-faq-item__question{
        padding:20px;
    }

    .access-faq-item__answer{
        padding:0 20px 20px;
    }

    .access-cta__title{
        font-size:2.8rem;
    }

    .access-cta-button__main{
        font-size:2.4rem;
    }

}
@media screen and (max-width:767px){

    .access-map__address{
        display:block;
    }

    .access-map__address-label{
        width:100%;
        min-height:52px;
    }

    .access-map__address-text{
        padding:18px 20px;
        font-size:1.3rem;
        line-height:1.8;
    }

    .access-information__name{
        font-size:2.1rem;
    }

    .access-information-list{
        margin-top:28px;
    }

    .access-information-list__row{
        grid-template-columns:90px 1fr;
        gap:14px;
        padding:15px 0;
    }

    .access-information-list__row dt,
    .access-information-list__row dd{
        font-size:1.3rem;
    }

    .access-route-card__title{
        font-size:2.3rem;
    }

    .access-route-step{
        gap:16px;
        padding:22px 0;
    }

    .access-route-step__number{
        width:40px;
        height:40px;
        font-size:1.1rem;
    }

    .access-route-step__content h4{
        font-size:1.6rem;
    }

    .access-route-step__content p{
        font-size:1.35rem;
    }

    .access-hours__notice{
        width:100%;
        justify-content:space-between;
        box-sizing:border-box;
    }

    .access-hours__notice strong{
        font-size:2.6rem;
    }

    .access-faq-item__mark{
        width:36px;
        height:36px;
        margin-right:14px;
        font-size:1.5rem;
    }

    .access-faq-item__question-text{
        font-size:1.5rem;
        line-height:1.7;
    }

}

@media screen and (max-width:480px){

    .access-section-heading__title{
        font-size:2.4rem;
    }

    .access-station-card{
        padding:28px 22px;
    }

    .access-station-card__number{
        font-size:3.8rem;
    }

    .access-station-card__title{
        font-size:2.5rem;
    }

    .access-information__title,
    .access-hours__title{
        font-size:2.8rem;
    }

    .access-information__floor{
        position:static;
        width:100%;
        margin-top:14px;
        justify-content:center;
        box-shadow:none;
    }

    .access-information__buttons{
        margin-top:30px;
    }

    .access-button{
        min-width:0;
        min-height:56px;
        padding:0 18px;
    }

    .access-button span:first-child{
        font-size:1.3rem;
    }

    .access-map__frame iframe{
        height:340px;
    }

    .access-hours__table{
        min-width:620px;
    }

    .access-cta-button{
        min-height:100px;
        padding:18px;
    }

    .access-cta-button__main{
        font-size:2.2rem;
    }

}
@media screen and (max-width:380px){

    .access-container,
    .access-container--narrow{
        width:calc(100% - 30px);
    }

    .access-section-heading__english,
    .access-information__english,
    .access-hours__english,
    .access-route-card__label,
    .access-cta__english{
        font-size:1rem;
        letter-spacing:.12em;
    }

    .access-section-heading__title,
    .access-information__title,
    .access-hours__title,
    .access-cta__title{
        font-size:2.3rem;
        line-height:1.5;
    }

    .access-section-heading__lead,
    .access-station-card__text,
    .access-route-step__content p,
    .access-hours__text,
    .access-faq-item__answer p,
    .access-cta__text{
        font-size:1.3rem;
        line-height:1.9;
    }

    .access-station-card{
        padding:24px 18px;
    }

    .access-station-card__number{
        font-size:3.2rem;
    }

    .access-station-card__title{
        font-size:2.2rem;
    }

    .access-route-card__head{
        padding:24px 18px;
    }

    .access-route-steps{
        padding:0 18px;
    }

    .access-route-card__title{
        font-size:2rem;
    }

    .access-route-step__content h4{
        font-size:1.5rem;
    }

    .access-information__floor-number{
        font-size:2.8rem;
    }

    .access-information__floor-text{
        font-size:1.2rem;
    }

    .access-hours__notice{
        padding:12px 16px;
    }

    .access-hours__notice strong{
        font-size:2.2rem;
    }

    .access-faq-item__question{
        padding:18px 16px;
    }

    .access-faq-item__answer{
        padding:0 16px 18px;
    }

    .access-faq-item__question-text{
        font-size:1.4rem;
    }

    .access-map__frame iframe{
        height:300px;
    }

    .access-cta-button{
        min-height:90px;
    }

    .access-cta-button__small,
    .access-cta-button__note{
        font-size:1rem;
    }

    .access-cta-button__main{
        font-size:2rem;
    }

}
/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width:768px){

    .access-station-card,
    .access-route-card,
    .access-faq-item,
    .access-map__frame,
    .access-hours__table-wrap{
        transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;
    }

    .access-route-card:hover,
    .access-faq-item:hover,
    .access-map__frame:hover,
    .access-hours__table-wrap:hover{
        box-shadow:0 18px 45px rgba(0,0,0,.08);
    }

    .access-information__image{
        transition:
            transform .5s ease,
            opacity .5s ease;
    }

    .access-information__image-wrap{
        overflow:hidden;
    }

    .access-information__image-wrap:hover .access-information__image{
        transform:scale(1.03);
    }

    .access-map__frame{
        overflow:hidden;
    }

    .access-map__frame iframe{
        transition:transform .6s ease;
    }

    .access-map__frame:hover iframe{
        transform:scale(1.02);
    }

}

/* =========================================================
   PRINT
========================================================= */

@media print{

    .page-hero,
    .breadcrumb,
    .access-cta{
        display:none;
    }

    .access-intro,
    .access-information,
    .access-map,
    .access-route,
    .access-hours,
    .access-faq{
        padding:30px 0;
        background:#fff !important;
    }

    .access-route-card,
    .access-faq-item,
    .access-map__frame,
    .access-hours__table-wrap,
    .access-station-card{
        box-shadow:none;
        border:1px solid #ccc;
    }

}
/* =========================================================
   ACCESS EFFECT
========================================================= */

@media (prefers-reduced-motion:no-preference){

    .access-station-card,
    .access-route-card,
    .access-faq-item,
    .access-map__frame,
    .access-button,
    .access-cta-button{
        will-change:transform;
    }

}

/* =========================================================
   TABLE
========================================================= */

.access-hours-table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
}

.access-hours-table caption{
    display:none;
}

.access-hours-table tbody tr:nth-child(even){
    background:#fcfbf8;
}

.access-hours-table tbody tr:hover{
    background:#f8f5ef;
}

/* =========================================================
   LINK
========================================================= */

.access-information a,
.access-map a,
.access-route a,
.access-faq a{
    transition:
        color .25s ease,
        opacity .25s ease;
}

.access-information a:hover,
.access-map a:hover,
.access-route a:hover,
.access-faq a:hover{
    opacity:.8;
}

/* =========================================================
   IMAGE
========================================================= */

.access-information img,
.access-route img,
.access-map img{
    display:block;
    max-width:100%;
    height:auto;
}

/* =========================================================
   LAST
========================================================= */

.access-route:last-child,
.access-hours:last-child,
.access-faq:last-child,
.access-cta:last-child{
    margin-bottom:0;
}
/* =========================================================
   ACCESS UTILITIES
========================================================= */

.access-text-center{
    text-align:center;
}

.access-text-left{
    text-align:left;
}

.access-mt-0{
    margin-top:0 !important;
}

.access-mb-0{
    margin-bottom:0 !important;
}

.access-hidden{
    display:none !important;
}

.access-pc{
    display:block;
}

.access-sp{
    display:none;
}

/* =========================================================
   RESPONSIVE UTILITIES
========================================================= */

@media screen and (max-width:767px){

    .access-pc{
        display:none;
    }

    .access-sp{
        display:block;
    }

}