/* 
/home/gk_mesh/chroot/www/medical/app/webroot/css common.cssより抜粋 
*/

/* ------------------------------------------
	gnav 2023.10  ここから
--------------------------------------------- */

    /*----------------------------------------
        gnav--fonts
    ----------------------------------------*/
    @font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans CJK JP Regular"), url("../fonts/NotoSans_Regular.woff2") format("woff2"), url("../fonts/NotoSans_regular.woff") format("woff"), url("../fonts/NotoSans_regular.otf") format("opentype");
    }
    @font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    src: local("Noto Sans CJK JP Medium"), url("../fonts/NotoSans_Medium.woff2") format("woff2"), url("../fonts/NotoSans_medium.woff") format("woff"), url("../fonts/NotoSans_medium.otf") format("opentype");
    }
    @font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    src: local("Noto Sans CJK JP Bold"), url("../fonts/NotoSans_Bold.woff2") format("woff2"), url("../fonts/NotoSans_bold.woff") format("woff"), url("../fonts/NotoSans_bold.otf") format("opentype");
    }
    @font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/YakuHanJP-Regular.woff2") format("woff2"), url("../fonts/YakuHanJP-Regular.woff") format("woff");
    }
    @font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/YakuHanJP-Medium.woff2") format("woff2"), url("../fonts/YakuHanJP-Medium.woff") format("woff");
    }
    @font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/YakuHanJP-Bold.woff2") format("woff2"), url("../fonts/YakuHanJP-Bold.woff") format("woff");
    }
 
    /*----------------------------------------
        gnav--header common
    ----------------------------------------*/
    .gothic, .header_txt {
    font-family: "YakuHanJP", "Work Sans", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "メイリオ", sans-serif;
    }

    .header_txt li {
    list-style: none;
    }
    .header_txt a {
    text-decoration: none;
    color: #fff;
    }

    .header_txt {
    width: 100%;
    height: 60px;
    /* background-color: #f3f3f3; */
    display: block;
    margin-top: 10px;
    }
    /*----------------------------------------
        header SP
    ----------------------------------------*/
    @media screen and (max-width: 599px) {
        .forPC {
        display: none;
        }
        .sp-menu-btn {
        display: flex;
        position: fixed;
        top: 10px;
        right: 12px;
        z-index: 120;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        background: #333;
        color: white;
        cursor: pointer;
        }
        .sp-menu-btn img {
        width: 15px;
        height: 17px;
        }
        .header_txt {
        height: 40px;
        }
        .company {
        width: 88px;
        padding-left: 10px;
        }
        nav.is-active {
        display: flex;
        opacity: 1;
        }
        nav {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        background: rgba(68, 68, 68, 0.9);
        text-align: center;
        }
        nav .gnav {
        margin-top: 80px;
        }
        nav .gnav > li {
        margin-top: 20px;
        }
        nav a {
        color: #fff;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        }
        nav .haschild > a {
        display: inline-block;
        font-size: 13px;
        color: #ddd;
        border: 1px solid #ddd;
        padding: 0 5px;
        margin-top: 10px;
        pointer-events: none;
        }
        nav .child-nav {
        margin-top: 7px;
        }
        nav .child-nav li {
        margin-top: 8px;
        }
    }
    /*----------------------------------------
        gnav--header PC
     ----------------------------------------*/
    
    @media screen and (min-width:600px){
        .only-sp{
            display: none;
        }
        .sp-menu-btn{
            display: none;
        }
        .header_txt {
            font-weight: 500;
            line-height: 1.2;
            margin-top: 33px;
        }
        .header_txt:hover {
            font-weight: 400;
        }
        .header_txt .company {
            /* width: 88px;
            padding-left: 10px; */
            display: none;
        }
        ul.gnav {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
        }
        ul.gnav li {
            position: relative;
        }
        ul.gnav li::after, ul.gnav li:first-child::before {
            content: "";
            width: 1px;
            height: 30px;
            background-color: #cdcdcd;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        ul.gnav li::after {
            right: -0.3rem;
        }
        ul.gnav li:first-child::before {
            left: -0.25rem;
        }
        ul.gnav li a {
            display: grid;
            place-items: center;
            text-align: left;
            color: #333;
            transition: background-color 0.3s;
            height: 48px;
            padding: 0 12px 0 23px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 700;
        }
        ul.gnav li a:hover {
            background-color: #21873E;
            color: #fff !important;
        }
        ul.gnav .haschild {
            position: relative;
            z-index: 130;
        }
        ul.gnav .haschild .child-nav {
            display: none;
        }
        ul.gnav .haschild:hover .child-nav {
            display: block;
        }
        ul.gnav ul.child-nav {
            position: absolute;
            top: 48px;
            left: -0.25rem;
            padding-top: 4px;
        }
        ul.gnav ul.child-nav li {
            background-color: #eee;
            width: 123px;
            border-top: 1px solid #ccc;
        }
        ul.gnav ul.child-nav li::after, ul.gnav ul.child-nav li:first-child::before {
            width: 0;
        }
        ul.gnav ul.child-nav li a {
            padding: 0;
            font-size: 15px;
        }
        ul.gnav ul.child-nav li a:hover {
            background-color: #f25185;
            border-radius: 0;
        }
        /*----------------------------------------
            gnav-- header PC parts
        ----------------------------------------*/
        .arrow {
            position: relative;
            color: #000;
            font-size: 15px;
        }
        .arrow::before, .arrow::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 5px;
            margin: auto;
            content: "";
            vertical-align: middle;
            transition: 0.3s;
        }
        .arrow::before {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #21873E;
        }
        .arrow::after {
            left: 7px;
            background: #fff;
            height: calc(tan(60deg) * 4.5px / 2);
            width: 10px;
            -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
                    clip-path: polygon(50% 0, 100% 100%, 0 100%);
            transform: rotate(90deg);
        }
        .arrow:hover::before {
            background: #fff;
        }
        .arrow:hover::after {
            background: #21873E;
        }
        /*----------------------------------------
            gnav--header PC pink
        ----------------------------------------*/
        ul.gnav li.pink a:hover {
            background-color: #f25185;
            color: #fff;
        }
        ul.gnav li.pink .arrow::before {
            background: #f25185;
        }
        ul.gnav li.pink .arrow::after {
            background: #fff;
        }
        ul.gnav li.pink .arrow:hover::before {
            background: #fff;
        }
        ul.gnav li.pink .arrow:hover::after {
            background: #f25185;
        }
        /*----------------------------------------
            gnav--header PC haschild
        ----------------------------------------*/
        ul.gnav .haschild {
            position: relative;
            z-index: 140;
        }
        ul.gnav .haschild .child-nav {
            display: none;
        }
        ul.gnav .haschild:hover .child-nav {
            display: block;
        }
        ul.gnav ul.child-nav {
            position: absolute;
            top: 48px;
            left: -0.25rem;
            padding-top: 4px;
        }
        ul.gnav ul.child-nav li {
            background-color: #eee;
            width: 123px;
            border-top: 1px solid #ccc;
        }
        ul.gnav ul.child-nav li::after, ul.gnav ul.child-nav li:first-child::before {
            width: 0;
        }
        ul.gnav ul.child-nav li a {
            padding: 0;
        }
        ul.gnav ul.child-nav li a:hover {
            background-color: #f25185;
            border-radius: 0;
        }

    }    
/* ------------------------------------------
    gnav 2023.10  ここまで
--------------------------------------------- */