@charset "utf-8";
/* ==========================================================================
   header.css — logo lockup, PC global nav (.gnav), SP drawer.
   ========================================================================== */

/* HEADER / HERO */
.header { position:relative; }
.header_bar {
    position:absolute; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between; padding:26px 40px 0;
    background: transparent;
    width: 100%;           
    max-width: 1400px;
    margin: 0 auto;
}

/* Subpages header bar on PC (Hidden on PC because gnav is used) */
@media only screen and (min-width:768px){
    body:not(.page_top_body) .header_bar { display:none; }
}

.header_logo { display:flex; align-items:center; }
.header_logo a, .gnav_logo a { display:inline-flex; align-items:center; }
.header_logo_img { width:212px; height:auto; }
.gnav_logo_img { width:196px; height:auto; }
.logo_sub { font-size:14px; line-height:1; color:var(--sub14-color); margin-left:14px; white-space:nowrap; font-family: var(--font-notoseriif); }

/* Hamburger (Base) */
.header_hamburger { width:46px; height:38px; background:transparent; position:relative; cursor:pointer; border:none; }
.header_hamburger span { position:absolute; left:6px; right:6px; height:3px; background:#ffffff; border-radius:2px; }
.header_hamburger span:nth-child(1) { top:8px; }
.header_hamburger span:nth-child(2) { top:17px; }
.header_hamburger span:nth-child(3) { top:26px; }

/* PC Global Nav */
.gnav { background:var(--sub3-color); box-shadow:0 3px 8px rgba(0,0,0,.06); position: relative; z-index: 9; }

/* Subpage global nav follows the scroll on PC (下層ヘッダー追従). TOP keeps the static nav. */
@media only screen and (min-width:768px){
    body:not(.page_top_body) .gnav { position:sticky; top:0; z-index:1000; }
}

/* Subpage in-page tab nav follows the scroll too: it pins just below the sticky
   gnav (PC) or the fixed header bar (SP). --subnav-top and --vw are set live in
   subpage.js so the pin offset and the band width stay exact across breakpoints. */
body:not(.page_top_body) .sub_anchor_nav {
    position: sticky;
    top: var(--subnav-top, 0px);
    z-index: 900; /* below gnav (1000) and drawer (9999), above page content */
}
/* Full-width white band behind the centered nav so page content doesn't show
   through beside it once pinned. Over the white page in normal flow it's invisible. */
body:not(.page_top_body) .sub_anchor_nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--vw, 100vw);
    background: #ffffff;
}
.gnav_inner { display:flex; align-items:center; max-width:1405px; margin:0 auto; padding:20px 40px; gap:36px; }
.gnav_logo { flex:none; }
.gnav_list { display:flex; align-items:center; }
.gnav_list li { padding:0 16px; }
.gnav_list li + li { border-left:1px solid var(--sub13-color); }
.gnav_list li:first-child { border-left:1px solid var(--sub13-color); }
.gnav_list li:last-child { border-right:1px solid var(--sub13-color); }
.gnav_list li a { display:block; text-align:center; }
.gnav_list .ja { display:block; font-size:18px; font-weight:400; color: #1E264A;font-family: var(--font-notoseriif); }
.gnav_list .en { display:block; font-family:"futura-pt",sans-serif; font-size:11px; color:var(--home-en-green); letter-spacing:1px; margin-top:6px; }
.gnav_cta { display:flex; align-items:center; gap:16px; margin-left:auto; }

/* ==========================================================================
   SP Drawer (Menu Open Modal with Smooth Animation)
   ========================================================================== */

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4); /* Soft backdrop overlay */
    -webkit-overflow-scrolling: touch;

    /* Transition Setup (Replaces display:none) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Open State Transition */
.drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.is-drawer-open { 
    overflow: hidden !important; 
}

/* White Card Container (Animated Entry) */
.drawer_inner {
    margin: .3rem .24rem;
    background: #ffffff;
    border: 1px solid #B7B7B7;
    box-shadow: 0 .10rem .40rem rgba(0, 0, 0, .2);
    overflow: hidden;
    position: relative;

    /* Card Entry Animation (Scale & Slide down) */
    transform: translateY(-20px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-open .drawer_inner {
    transform: translateY(0) scale(1);
}

/* Drawer Header & Logo */
.drawer_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .36rem .32rem 0;
}

.drawer_head .header_logo_img {
    width: 3.2rem;
    height: auto;
}

/* Close Button (✕) */
.drawer_close {
    cursor: pointer;
    width: .64rem;
    height: .64rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .28rem;
    right: .28rem;
    z-index: 1000;
    border: 1px solid #D5D5D5;
    background: #ffffff;
    border-radius: .08rem;
    color: #999999;
    font-size: .36rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.drawer_close:active {
    background-color: #f0f0f0;
    color: #333333;
}

/* Main Navigation Links */
.drawer_list {
    padding: .4rem .4rem .2rem;
}

.drawer_list li {
    margin-bottom: .36rem;
}

.drawer_list li a {
    display: block;
    position: relative;
    padding-left: .28rem;
    text-decoration: none;
}

/* Single Gradient Accent Bar for Links */
.drawer_list li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: .04rem;
    bottom: .04rem;
    width: .08rem;
    background: linear-gradient(180deg, #7AD300 0% 50%, #B3B3B3 50% 100%);
    border-radius: .02rem;
}

.drawer_list li a::after {
    display: none;
}

.drawer_list .ja {
    display: block;
    font-family: var(--font-notoseriif);
    font-size: .38rem;
    font-weight: 500;
    color: #353679;
    line-height: 1.3;
}

.drawer_list .en {
    display: block;
    font-family: "futura-pt", sans-serif;
    font-size: .22rem;
    color: var(--home-en-green, #4E9E3E);
    margin-top: .04rem;
    letter-spacing: .01rem;
}

/* Sublink: 病院長メッセージ */
.drawer_sublink {
    padding: 0 .4rem .4rem;
}

.drawer_sublink a {
    font-family: var(--font-notoseriif);
    font-size: .3rem;
    color: #353679;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* SVG Icon Alignment & Size */
.drawer_sublink .ico_window {
    width: .20rem;
    height: .20rem;
    margin-right: .12rem;
    margin-left: 0;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Drawer Footer (CTA Area) */
.drawer_foot {
    display: flex;
    gap: .2rem;
    background: linear-gradient(0deg, #B8F4D6 0%, #A2EAEF 100%);
    padding: .36rem .24rem;
}

.drawer_foot_col {
    width: 50%;
    text-align: center;
}

.drawer_foot_label {
    font-size: .22rem;
    font-weight: 700;
    color: #0B2C66;
    line-height: 1.3;
    margin-bottom: .16rem;
    min-height: .56rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons in Drawer Footer */
.drawer_foot .btn_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .2rem 0;
    font-size: .26rem;
    font-weight: bold;
    color: #0B2C66;
    background: #ffffff;
    border: 1px solid #0B2C66;
    border-radius: .08rem;
    text-decoration: none;
}

.drawer_foot .btn_recruit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .2rem 0;
    font-size: .26rem;
    font-weight: bold;
    color: var(--sub3-color);
    background: #0B2C66;
    border: 1px solid #ffffff;
    border-radius: .08rem;
    text-decoration: none;
}

.drawer_foot .arrow {
    margin-left: .08rem;
    font-size: .24rem;
}
@media only screen and (min-width: 768px) and (max-width: 1350px) {
   .header_bar {
        padding: .26rem .40rem 0;
    }

    .header_logo_img { width: 2.12rem; }
    .gnav_logo_img { width: 1.96rem; }
    .logo_sub { font-size: .14rem; margin-left: .14rem; }

    /* Hamburger (Base) */
    .header_hamburger { width: .46rem; height: .38rem; }
    .header_hamburger span { left: .06rem; right: .06rem; height: .03rem; border-radius: .02rem; }
    .header_hamburger span:nth-child(1) { top: .08rem; }
    .header_hamburger span:nth-child(2) { top: .17rem; }
    .header_hamburger span:nth-child(3) { top: .26rem; }

    /* PC Global Nav */
    .gnav { box-shadow: 0 .03rem .08rem rgba(0,0,0,.06); }
    .gnav_inner { max-width: 14.05rem; padding: .20rem .40rem; gap: .36rem; }
    .gnav_list li { padding: 0 .16rem; }
    .gnav_list li + li { border-left: .01rem solid var(--sub13-color); }
    .gnav_list .ja { font-size: .18rem; line-height: 1.2;}
    .gnav_list .en { font-size: .11rem; letter-spacing: .01rem; margin-top: .06rem; }
    .gnav_cta { gap: .16rem; }

    /* SP Drawer */
    .drawer_inner { border-radius: .06rem; box-shadow: 0 .10rem .40rem rgba(0,0,0,.15); }
    .drawer_close { width: .40rem; height: .40rem; border: .01rem solid var(--sub13-color); font-size: .24rem; } 
}
/* --------------------------------------------------------------------------
   SP Responsive Settings
   -------------------------------------------------------------------------- */
@media only screen and (max-width:767px){
    /* Fixed header bar: transparent over the MV, gains a background once the
       page is scrolled past the MV (body.is-header-solid, toggled in header.php)
       so the logo + hamburger stay legible over white content. */
    .header_bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .3rem;
        background: transparent;
        box-shadow: none;
        transition: background-color .25s ease, box-shadow .25s ease;
    }

    body.is-header-solid .header_bar {
        background: #ffffff;
        box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .12);
    }
    /* Dark logo text + hamburger lines once the bar is white */
    body.is-header-solid .logo_sub { color: #1E264A; }

    .header_logo_img {
        width: 3.4rem;
        height: auto;
    }

    .logo_sub {
        font-size: .20rem;
        margin-left: .16rem;
    }

    /* White Hamburger lines for dark MV photos */
    .header_hamburger span {
        background: #ffffff;
    }
    body.is-header-solid .header_hamburger span {
        background: #1E264A;
    }
}