.hpci-02_block {
    width: 100%;
}

.hpci-02_pc {
    display: block;
}

.hpci-02_sp {
    display: none;
}

.hpci-02_menu_area {
    background-color: #08875A;
    padding: 0;
}

.hpci-02_menu_ul {
    display: table;
    position: relative;
    padding: 0 128px;
    max-width: var(--pc-max-width);
    min-width: var(--pc-min-width);
    margin: 0 auto;
}

.hpci-02_menu_li {
    height: 48px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.hpci-02_menu_li:hover {
    /* position: static; */
}


.hpci-02_menu_li:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;/*線の長さ*/
    height: 80%;/*線の太さ*/
    top: 10%;
    left: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    opacity: 0.3;
}
/* 意図しない区切り線非表示 */
.hpci-02_menu_li_active:before,
.hpci-02_menu_li_moving:before
{
   display : none;
}

.hpci-02_menu_li:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;/*線の長さ*/
    height: 80%;/*線の太さ*/
    top: 10%;
    right: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    opacity: 0.3;
    visibility: visible;
}
/* 意図しない区切り線非表示 */
.hpci-02_menu_li_active:after,
.hpci-02_menu_li_moving:after
{
    display : none;
}


.hpci-02_menu_li_vr {
    display: table-cell;
    position: relative;
    width: 1px;
}

.border_vr {
    position: absolute;
    top: 15%;
    background: #fff;
    width: 1px;
    height: 70%;
    opacity: 0.3;
}

.hpci-02_menu_li:only-child {
    width: 100vw;
}

.hpci-02_menu_li:first-child:nth-last-child(2),
.hpci-02_menu_li:first-child:nth-last-child(2) ~ .hpci-02_menu_li {
    width: calc(100vw / 2);
}

.hpci-02_menu_li:first-child:nth-last-child(3),
.hpci-02_menu_li:first-child:nth-last-child(3) ~ .hpci-02_menu_li {
    width: calc(100vw / 3);
}

.hpci-02_menu_li:first-child:nth-last-child(4),
.hpci-02_menu_li:first-child:nth-last-child(4) ~ .hpci-02_menu_li {
    width: calc(100vw / 4);
}

.hpci-02_menu_li:first-child:nth-last-child(5),
.hpci-02_menu_li:first-child:nth-last-child(5) ~ .hpci-02_menu_li {
    width: calc(100vw / 5);
}

.hpci-02_menu_li:first-child:nth-last-child(6),
.hpci-02_menu_li:first-child:nth-last-child(6) ~ .hpci-02_menu_li {
    width: calc(100vw / 6);
}

.hpci-02_menu_li:first-child:nth-last-child(7),
.hpci-02_menu_li:first-child:nth-last-child(7) ~ .hpci-02_menu_li {
    width: calc(100vw / 7);
}

.hpci-02_menu_li:first-child:nth-last-child(8),
.hpci-02_menu_li:first-child:nth-last-child(8) ~ .hpci-02_menu_li {
    width: calc(100vw / 8);
}

.hpci-02_menu_li:first-child:nth-last-child(9),
.hpci-02_menu_li:first-child:nth-last-child(9) ~ .hpci-02_menu_li {
    width: calc(100vw / 9);
}

.hpci-02_menu_li:first-child:nth-last-child(10),
.hpci-02_menu_li:first-child:nth-last-child(10) ~ .hpci-02_menu_li {
    width: calc(100vw / 10);
}

.hpci-02_menu_li_span {
    font-size: 1.6rem;
    font-weight: bold;
}



.hpci-02_menu_li .hpci-02_menu_li_span p {
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    display: block;
    line-height: 4.5rem;
    text-decoration: none;
    position: relative;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
}

.hpci-02_menu_li_span p:visited {
    color: #fff;
}

.hpci-02_menu_li_span p:hover {
    color: #222222 !important;
    background-color: #f7fff7 !important;
}
.hpci-02_menu_li_active .hpci-02_menu_li_span p {
    color: #222222;
    background-color: #f7fff7;
}

.hpci-02_menu_li_span > p::after {
    position: absolute;
    left: calc((100% - 50%) / 2);
    content: '';
    width: 50%;
    height: 2px;
    background: #08875A;
    bottom: 7px;
    /*visibility: hidden;*/
    visibility: visible;
}

.hpci-02_menu_li_span :hover::after {
    visibility: visible;
}

.hpci-02_menu_li:hover > a {
    height: 48px;
}



.hpci-02_add_menu_area {
    display: block;
    text-align: left;
    width: 100%;
    position: absolute;
    top: 48px;
    left: 0px;
    background-color: #f7fff7;
    box-shadow: 8px 8px 20px #0000001c;
    z-index: 10000;
    transition: max-height 0.6s;
    overflow: hidden;
    max-height: 0;
}
.hpci-02_add_menu_area.is-open {
    max-height: var(--max-height);
}
.hpci-02_add_menu_area.is-close {
    opacity: 0;
}


.hpci-02_add_menu_area_padding {
    padding: 0 128px;
}

.hpci-02_add_menu_body {
    display: flex;
    justify-content: space-between;
    padding-bottom: 28px;
}

.hpci-02_add_menu_links {
    margin-left: 20px;
/*
background-color: #ffffcc;
*/
}

.hpci-02_add_menu_banners {
    padding-left: 27px;
    width: 270px;
    border-left: 1px solid #D1D1D1;
/*
background-color: #ccccff;
*/
}

.hpci-02_add_menu_banners_ul li {
    margin-bottom: 10px;
    text-align: right;
}

.hpci-02_add_menu_banners_image {
    width: 232px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #D6D6D6;
    box-shadow: 8px 8px 20px #0000001C;
    opacity: 1;
}

.hpci-02_add_menu_banners_image {
    display: inline;
    width: 230px
}

.hpci-02_add_menu_banners_image:hover {
    opacity: 0.8;
}

.hpci-02_add_menu_banners_image_sp {
    display: none;
}




.hpci-02_add_menu_area_close {
    padding-bottom: 25px;
    text-align: center;
}

.hpci-02_add_menu_area_close a {
    font-size: 1.4rem;
    text-decoration: none;
}

.hpci-02_add_menu_area_close a:visited {
    color: #222222;
}

.hpci-02_add_menu_area_close a:hover {
    color: #B06201;
}



.hpci-02_add_menu_header {
    width: 100%;
    display: contents;
    position: absolute;
    font-size: 2rem;
    line-height: 3rem;
background-color: #ffcccc;
}

.hpci-02_add_menu_header a {
    position: relative;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: 48px;
    text-decoration: none;
    font-weight: bold;
}

.hpci-02_add_menu_header a:visited {
    color: #222222;
}

.hpci-02_add_menu_header a:link {
    color: #222222;
}

.hpci-02_add_menu_header a:hover
 {
    color: #B06201;
}

.hpci-02_add_menu_header a:before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #08875A;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 20px;
    margin-top: -9px;
}

.hpci-02_add_menu_header a:hover:before {
    background-color: #B06201;
}

.hpci-02_add_menu_header a:after {
    content: '';
    width: 4px;
    height: 4px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 17px;
    left: 26px;
    margin-top: -4px;
    transform: rotate(45deg);
}

.hpci-02_add_menu_header_hr {
    margin-left: 20px;
    box-sizing: border-box;
    margin-block-start: 0px;
    margin-block-end: 28px;
    border-top: 1px solid #08875A;
    opacity: 0.3;
}

.hpci-02_add_menu_links_ul li a {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    padding-left: 29px;
    text-decoration: none;
    font-weight: bold;
}

/*
.hpci-02_add_menu_links_ul li a:visited {
    color: #222222;
}
*/

.hpci-02_add_menu_links_ul li a:link {
    color: #333333;
}

.hpci-02_add_menu_links_ul li a:hover {
    color: #B06201;
    text-decoration: underline;
}

.hpci-02_add_menu_links_ul li a:before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: #08875A;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    left: 0px;
    margin-top: -9px;
}

.hpci-02_add_menu_links_ul li a:hover:before {
    background-color: #B06201;
}

.hpci-02_add_menu_links_ul li a:after {
    content: '';
    width: 4px;
    height: 4px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 14px;
    left: 4px;
    margin-top: -4px;
    transform: rotate(45deg);
}

.hpci-02_add_menu_body_split {
    background-color: #D1D1D1;
    width: 2px;
    height: 100%;
}
















.hpci-02_add_menu_area_close_cross {
    margin-right: 15px;
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    transform: matrix(0, 1, -1, 0, 0, 0);
    opacity: 1;
}

.hpci-02_add_menu_area_close_cross::before, .hpci-02_add_menu_area_close_cross::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 9px;
    width: 2px;
    height: 19px;
    background: #1F7974;
}

.hpci-02_add_menu_area_close_cross::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.hpci-02_add_menu_area_close_cross::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.hpci-02_add_menu_area_close a:hover span:before, .hpci-02_add_menu_area_close a:hover span:after {
    background: #B06201;
}

.hpci-02_menu_li .hpci-02_menu_open p {
    color: #222222;
    background-color: #f7fff7;
}

.hpci-02_menu_li .hpci-02_menu_close p {
    color: #ffffff;
    background-color: #08875A;
}
/*
.hpci-02_menu_li_active .hpci-02_menu_open p {
    color: #ffffff;
    background-color: #08875A;
}
*/
.hpci-02_menu_li_moving .hpci-02_menu_li_span p {
    color: #222222;
    background-color: #f7fff7;
}
/******************************/
/* スマートフォン表示         */
/******************************/
@media only screen and (max-width: 767px) {

    .hpci-02_pc {
        display: none;
    }

    .hpci-02_sp {
        display: block;
    }

    .hpci-02_menu_ul {
        padding: 0;
        max-width: none;
        min-width: var(--sp-min-width);
        width: 100%;
    }

    .hpci-02_menu_area {
        padding: 0px;
    }

    .hpci-02_menu_li {
        width: 100% !important;
        display: contents;
        text-align: left;
/*
        padding-left: 10px;
*/
        height: 50px;
    }

    .hpci-02_menu_li:before {
        width: 0px;
    }

    .hpci-02_menu_li:after {
        width: 0px;
    }

    .hpci-02_menu_li_span {
        position: relative;
        display: table;
        padding: 0 10px;
/*
        width: 100vw;
*/
        width: 100%;
        border-bottom: 1px solid #ffffff;
    }

    .hpci-02_menu_li_span p {
        display: table-cell;
        text-align: left;
        width: 100vw;
        height: 50px;
        padding-top: 3px;
/*
        pointer-events:none;
*/
    }

    .hpci-02_menu_li_span p:hover {
        color: #fff !important;
        background-color: transparent !important;
    }

    .hpci-02_add_menu_area_btn {
        display: table-cell;
        text-align: right;
        width: 24px;
        height: 24px;
        position: absolute;
        right: 10px;
        top: 13px;
/*
        background-color: blue;
*/
    }

    .hpci-02_add_menu_area_btn_open:before {
        content: "";
        position: absolute;
        top: 6px;
        left: 11px;
        width: 2px;
        height: 13px;
        background: #fff;
        transform: matrix(0, 1, -1, 0, 0, 0);
    }

    .hpci-02_add_menu_area_btn_open:after {
        content: "";
        position: absolute;
        top: 6px;
        left: 11px;
        width: 2px;
        height: 13px;
        background: #fff;
        transform: matrix(1, 0, 0, -1, 0, 0);
    }

    .hpci-02_add_menu_area_btn_close:before {
        content: "";
        position: absolute;
        top: 6px;
        left: 11px;
        width: 2px;
        height: 13px;
        background: #fff;
        transform: matrix(0, 1, -1, 0, 0, 0);
    }

    .hpci-02_add_menu_area_padding {
        padding: 0;
    }

    .hpci-02_add_menu_header {
        font-size: 1.6rem;
    }

    .hpci-02_add_menu_header a {
        display: inline-block;
        padding: 10px 50px 38px 38px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: 50px;
        width: 100%;
    }

    .hpci-02_add_menu_header a:before {
        top: 25px;
        left: 9px;
    }

    .hpci-02_add_menu_header a:after {
        top: 26px;
        left: 14px;
        width: 7px;
        height: 7px;
        box-sizing: border-box;
    }

    .hpci-02_add_menu_header_hr {
        display: none;
    }

    .hpci-02_add_menu_body {
        display: block;
        padding-bottom: 0px;
    }

    .hpci-02_add_menu_area {
        padding-top: 3px;
        position: static;
        display: none;
        transition: none;
        overflow: visible;
        max-height: none;
    }

    .hpci-02_add_menu_area_close {
        display: none;
    }

    .hpci-02_add_menu_links {
        margin: 0;
    }

    .hpci-02_add_menu_links_ul {
        margin-bottom: 20px;
        border-bottom: 1px solid #D1D1D1;
    }

    .hpci-02_add_menu_links_ul li {
/*
        height: 50px;
        line-height: 5rem;
*/
        font-size: 1.4rem;
        border-top: 1px solid #D1D1D1;
    }

    .hpci-02_add_menu_links_ul li a {
        left: 9px;
        padding-top: 4%;
        padding-right: 51px;
        width: 95%;
    }

    .hpci-02_add_menu_links_ul li a:before {
        top: 25px;
        left: 1px;
    }

    .hpci-02_add_menu_links_ul li a:after {
        top: 25px;
        left: 5px;
        width: 6px;
        height: 6px;
        box-sizing: border-box;
    }


    .hpci-02_add_menu_banners {
        margin: 0 auto;
        padding: 0;
        border-left: none;
    }

    .hpci-02_add_menu_banners_ul {
        text-align: center;
    }

    .hpci-02_add_menu_banners_ul li {
        display: inline-block;
        margin: 0 0 16px 0;
        padding: 0;
    }

    .hpci-02_add_menu_banners_ul li:last-child {
        margin-bottom: 20px;
    }

    .hpci-02_add_menu_banners_image {
        display: none;
    }

    .hpci-02_add_menu_banners_image_sp {
        display: inline;
        width: 273px
    }

    .hpci-02_menu_li:hover > .hpci-02_add_menu_area {
        display: none;
    }

    .hpci-02_add_menu_area.is-close {
        opacity: 1;
    }

    .hpci-02_menu_li .hpci-02_menu_open p {
         color: #ffffff;
         background-color: #08875A;
     }
     .hpci-02_menu_li .hpci-02_menu_close p {
         color: #ffffff;
         background-color: #08875A;
     }
}

@media only screen and (max-width: 375px) {
    .hpci-cm_sp .hpci-tp_header_top_sp ul li.hpci-tp_btn_helpdesk {
        padding-left: 0px;
        width: 115px;
    }
}