@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Mohave:ital,wght@0,300..700;1,300..700&display=swap');

/* CSS Document */
/* diversity common style
**************************************/
#body section {
    font-family: "Noto Sans JP", sans-serif;
    position: relative;
}
#body.full-width .content .inner {
    width: 1160px;
}
#body section .row_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
} 
#body section a {
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
}
#body section a:hover {
    opacity: 0.7;
}
#body section .pc {
    display: block;
}
#body section .sp {
    display: none;
}
#body section .top_mv_link {
    background: #ffffff;
    padding: 0 37.5px;
    border-radius: 50vw;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
    position: absolute;
    top: -34px;
    right: -87px;
    z-index: 1;
}
#body section .top_mv_link ul {
    gap: 0 10px;
}
#body section .top_mv_link ul::after {
    display: none;
}
#body section .top_mv_link li {
    padding: 5.5px 0;
    position: relative;
}
#body section .top_mv_link li::after {
    content: "";
    display: none;
    background: #C21B1B;
    width: calc(100% - 30px);
    height: 2px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 1;
}
#body section .top_mv_link a {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 19px 10px;
    position: relative;
    transition: 0.3s;
}
#body section .top_mv_link li:nth-of-type(1) a {
    font-size: 1.25rem;
    font-family: "Mohave", serif;
    font-weight: 700;
    line-height: 1;
    color: #C21B1B;
    padding: 25.5px 10px 23.5px;
}
#body section .top_mv_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #C21B1B;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: -2px;
    opacity: 0;
    z-index: -1;
    transition: 0.3s;
}
#body section .top_mv_link a:hover::after {
    opacity: 1;
}
#body section .top_mv_link li:nth-of-type(n+2) a {
    font-size: 0.7rem;
    padding: 33px 18.9px 5px;
    border-radius: 10px;
}
#body section .top_mv_link li:nth-of-type(2) a {
    background: #FFE6E6;
}
#body section .top_mv_link li:nth-of-type(3) a {
    background: #FFFCD1;
}
#body section .top_mv_link li:nth-of-type(4) a {
    background: #EDFFE3;
}
#body section .top_mv_link li:nth-of-type(5) a {
    background: #E3F8FF;
}
#body section .top_mv_link li:nth-of-type(6) a {
    background: #F0E0FF;
}
#body section .top_mv_link li a::before {
    content: "";
    display: block;
    font-size: 1.25rem;
    font-family: "Mohave", serif;
    font-weight: 700;
    line-height: 1.17;
    text-align: center;
    color: #C21B1B;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1;
}
#body section .top_mv_link li:nth-of-type(2) a::before {
    content: "ABOUT";
}
#body section .top_mv_link li:nth-of-type(3) a::before {
    content: "ACTIVE";
}
#body section .top_mv_link li:nth-of-type(4) a::before {
    content: "SYSTEM";
}
#body section .top_mv_link li:nth-of-type(5) a::before {
    content: "VOICE";
}
#body section .top_mv_link li:nth-of-type(6) a::before {
    content: "DATA";
}
#nav_sp {
    display: none;
}
@media screen and ( max-width:1360px) {
    #body section .top_mv_link {
        right: 0;
    }
}
@media screen and ( max-width:959px) {
    #body.full-width .content {
        min-width: 100%;
    }
    #body.full-width .content .inner {
        width: 80.5%;
    }
    #body section .pc {
        display: none;
    }
    #body section .sp {
        display: block;
    }    
    #body section .top_mv_link {
        display: none;
    }
    #nav_sp {
        display: block;
        position: relative;
    }
    #nav_sp .btn_container,
    #nav_sp .overlay {
        display: block;
    }
    #nav_sp .btn_container {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #333333;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 75px;
        right: 0;
        transition: opacity 0.3s;
        z-index: 1000;
        cursor: pointer;
    }
    #nav_sp .btn_container .btn_wrapper {
        width: 24px;
        height: 16px;
        position: relative;
    }
    #nav_sp .btn_container .btn_wrapper span {
        display: block;
        background: #ffffff;
        width: 100%;
        height: 2px;
        border-radius: 10px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.3s;
        cursor: pointer;
    }
    #nav_sp .btn_container .btn_wrapper span.ct {
        bottom: 0;
    }
    #nav_sp .btn_container .btn_wrapper span.bm {
        top: auto;
        bottom: 0;
    }
    #nav_sp .btn_container.active .btn_wrapper .tp {
        top: -3px;
        transform: translateY(11px) translateX(0) rotate(45deg);
    }
    #nav_sp .btn_container.active .btn_wrapper .ct {
        opacity: 0;
    }
    #nav_sp .btn_container.active .btn_wrapper .bm {
        top: 3px;
        transform: translateY(-1px) translateX(0) rotate(-45deg);
    }
    #nav_sp .overlay {
        background: rgba(255, 255, 255, 0.9);
        width: 100vw;
        min-height: 100svh;
        height: 100vh;
        opacity: 0;
        visibility: hidden;
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 998;
        transition: opacity 0.3s, visibility 0.3s;
    }
    #nav_sp .overlay.open {
        opacity: 1;
        visibility: visible;
    }
    #nav_sp .overlay .overlay_menu {
        width: calc(100% - 90px);
        padding-bottom: 50px;
        margin: auto;
        position: relative;
        top: 90px;
        left: 0;
        right: 0;
    }
    #nav_sp .overlay .overlay_menu li:not(:last-of-type) {
        margin-bottom: 18px;
    }
    #nav_sp .overlay .overlay_menu li:first-of-type {
        margin-bottom: 10px;
    }
    #nav_sp .overlay .overlay_menu li a {
        display: block;
        font-size: 0.75rem;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        color: #000000;
        background: #ffffff;
        width: 100%;
        padding: 19.5px 0;
        border-radius: 50vw;
        position: relative;    
    }
    #nav_sp .overlay .overlay_menu li:not(:first-of-type) a {
        font-size: 0.75rem;
        padding: 33.5px 0 10.5px;
    }
    #nav_sp .overlay .overlay_menu li a::before {
        content: "";
        display: block;
        font-size: 1.25rem;
        font-family: "Mohave", serif;
        font-weight: 700;
        line-height: 1.17;
        text-align: center;
        color: #C21B1B;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        z-index: 1;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(1) a {
        text-align: left;
        background: none;
        text-decoration: underline;
        width: max-content;
        padding: 10.5px 0 10.5px 20px;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(1) a::before {
        display: none;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(1) a::after {
        content: '';
        width: 6px;
        height: 6px;
        border-top: solid 1px #000000;
        border-right: solid 1px #000000;
        margin: auto;
        position: absolute;
        top: 2px;
        right: -17px;
        bottom: 0;
        transform: rotate(45deg);
        z-index: 1;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(2) a {
        background: #FFE6E6;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(2) a::before {
        content: "ABOUT";
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(3) a {
        background: #FFFCD1;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(3) a::before {
        content: "ACTIVE";
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(4) a {
        background: #EDFFE3;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(4) a::before {
        content: "SYSTEM";
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(5) a {
        background: #E3F8FF;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(5) a::before {
        content: "VOICE";
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(6) a {
        background: #F0E0FF;
    }
    #nav_sp .overlay .overlay_menu li:nth-of-type(6) a::before {
        content: "DATA";
    }
}