@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------------

セキュリティ対策マップ common

-------------------------------------------------- */
#contents{
    color: #0F172A;
}

.main{
    margin: 0;
}

.inner-l {
  width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 1380px) {
  .inner-l {
    width: calc(100% - 80px);
    max-width: 1200px;
  }
}

.ttl{
    font-size: 4.2rem;
    font-weight: 500;
    margin-bottom: 4rem;
}
.ttl span{
    color: #2563EB;
    font-size: 2.4rem;
    display: block;
    position: relative;
}
.ttl span:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 2rem;
    margin-bottom: .5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563EB;
    border: 8px solid #D2E0F1;
}

@media only screen and (max-width: 768px) {
    .ttl{
        font-size: 2.6rem;
    }
    .ttl span {
        font-size: 1.8rem;
    }
}

a.btn-base.border{
    min-width: 260px;
    padding: 1.6rem 4.2rem 1.6rem 2.4rem;
    border-radius: 8px;
    text-align: left;
}
a.btn-base.border:after {
    content: "";
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin: 0 0.5em;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 1px solid #0F172A;
    border-bottom: 1px solid #0F172A;
}

a.btn-base.service{
    text-align: left;
    border-radius: 4px;
    padding: 1.4rem 2.4rem 1.4rem 1.6rem;
    min-height: 7.7rem;
    background: #FFF;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}
a.btn-base.service:after {
    content: "";
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin: 0 0.5em;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 1px solid #0F172A;
    border-bottom: 1px solid #0F172A;
}
@media screen and (max-width: 768px) {
    a.btn-base.service:after {
        right: 1rem;
        }
}
a.btn-base.more{
    text-align: left;
    border-radius: 8px;
    padding: 2.4rem 4rem 2.4rem 1.6rem;
    min-width: 260px;
    background: #FFF;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}
a.btn-base.more:before {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: .1rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    background: #000;
}
a.btn-base.more:after {
    content: "";
    display: inline-block;
    width: .1rem;
    height: 1.4rem;
    position: absolute;
    top: 50%;
    right: 2.6rem;
    transform: translateY(-50%);
    background: #000;
}
a.btn-base.more.open:after {
    content: none;
}
/* --------------------------------------------------

セキュリティ対策マップ header（独自）

-------------------------------------------------- */
@media screen and (min-width: 769px) {
    #header{
        padding: 1em;
    }
    #header #navi{
        display: flex;
        background: none;
        width: auto;
        height: auto;
        position: relative;
        padding: 1rem;
        margin-left: auto;
        gap: 2.4rem;
    }
    #header #navi > ul{
        margin: 0;
    }
    #header #navi > ul{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
    }
    #header .header-wrap .logo-h {
        width: 200px;
    }

    #header .header-wrap .function-block {
        position: relative;
        transform: none;
        top: auto;
        right: auto;
    }

    .btn-menu{
        display: none;
    }

}

#header .header-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
}
#header .header-wrap .function-block{
    padding: 0;
    z-index: 21;
}
#header .header-wrap .function-block .sub-navi{
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
#header .header-wrap .function-block .sub-navi li a{
    display: block;
}
#header .header-wrap .function-block .sub-navi li:not(:last-child) a{
    white-space: nowrap;
    color: #fff;
    font-size: 1.6rem;
    font-weight: normal;
    padding: 1.5rem 2.5rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
}
#header .header-wrap .function-block .sub-navi li:first-child a{
    background: #2563EB;
}
#header .header-wrap .function-block .sub-navi li:nth-child(2) a{
    background: #0F172A;
}
#header .header-wrap .function-block .sub-navi li a img{
    width: 170px;
    min-width: 170px;
}
#header #navi > ul > li{
    text-align: center;
}
#header #navi > ul > li a{
    font-size: 1.6rem;
    padding: 1rem;
    display: block;
}
@media screen and (max-width: 1380px) {

    #header .header-wrap .function-block .sub-navi li a img{
        width: 150px;
        min-width: 150px;
    }
    #header #navi > ul{
        gap: 0;
        padding: 0;
    }
    #header #navi > ul li a {
        font-size: 1.4rem;
    }
    #header .header-wrap .function-block .sub-navi li:not(:last-child) a {
        font-size: 1.3rem;
        padding: 1em 1em;
    }
    #header .header-wrap .function-block .sub-navi {
        gap: 1rem;
        max-width: 80vw;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1000px) {
    #header .header-wrap .logo-h {
        width: 24vw;
        min-width: 24vw;
    }
    #header #navi > ul > li a {
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 768px) {
    #header .header-wrap {
        justify-content: space-between;
        flex-wrap: wrap;
        height: 100%;
    }
    #header .header-wrap .logo-h {
        width: 230px;
        min-width: 230px;
    }
    #header .header-wrap .function-block{
        display: none;
    }
    #header .header-wrap .function-block .sub-navi{
        gap: 2rem;
    }
    #header .header-wrap .function-block .sub-navi li:not(:last-child) a{
        padding: 1.5rem 2.5rem;
    }
    #header #navi{
        height: 100svh;
    }
    #header #navi > ul{
        margin: 5rem 0;
    }
}

/* ハンバーガー開いたとき */
body.fixed-body #header .btn-menu {
    top: 2rem;
}
body.fixed-body #header .header-wrap .function-block{
    display: block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    align-self: flex-start;
}

/* --------------------------------------------------

セキュリティ対策マップ top

-------------------------------------------------- */
/* service-map-top */
.service-map-top{
    position: relative;
    overflow: hidden;
    padding: 4.8rem 0 0;
    margin-bottom: 4rem;
}
.service-map-top:after{
    content: "";
    display: block;
    width: 1220px;
    aspect-ratio: 1220 / 548;
    border-radius: 50%;
    background: url(../img/bg_noise.png) no-repeat center center / cover;
    position: absolute;
    left: -20%;
    top: -5rem;
    z-index: -1;
}
.service-map-top .service-detail-top {
    align-items: center;
}
.service-map-top .service-detail-top .ph-part img{
    width: 50%;
}
.service-map-top .ttl-service-menu{
    margin-bottom: 4rem;
}
.service-map-top .ttl-service-menu h1{
    font-size: 4.2rem;
    font-weight: 500;
}
.service-map-top .ttl-service-menu p{
    color: #2563EB;
    font-size: 1.4rem;
    display: inline-block;
    border-radius: 50px;
    padding: .8rem 2rem;
    background: #EEF2FF;
    position: relative;
}
.service-map-top .ttl-service-menu p:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 2rem;
    margin-bottom: .5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563EB;
}
@media screen and (max-width: 1380px) {
    .service-map-top{
        padding: 14rem 0 0;
    }
}
@media only screen and (max-width: 768px) {
    .service-map-top {
        padding: 4.8rem 0 0;
        margin-bottom: 0;
    }
    .service-map-top .ttl-service-menu h1{
        font-size: 3rem;
    }
    .service-map-top:after {
        background: url(../img/bg_noise.png) no-repeat center center / contain;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}

/* --------------------------------------------------

セキュリティ対策マップ contents

-------------------------------------------------- */
.service-map-contents .inner-l{
    position: relative;
}
.service-map-contents .ttl{
    text-align: center;
}
.service-map-contents .sentence-block p{
    color: #64748B;
    font-weight: 400;
}

.service-map-contents .pht-single >div{
    position: relative;
}

.service-map-contents .pht-single >div map area{
    position: relative;
    z-index: 1;
}
.service-map-contents .pht-single map area:focus {
    outline: none !important;
}
.service-map-contents .pht-single >div map area:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    z-index: 2;
}
/* @media screen and (max-width: 1380px) {
    .service-map-contents .pht-single {
            overflow-x: scroll;
        }
    .service-map-contents .pht-single >div {
        width: 1200px;
        }
}
@media screen and (max-width: 600px) {
    .service-map-contents .pht-single >div {
        width: 540px;
    }
} */
/* ！マーク位置指定 */
.service-map-contents .pht-single{
    position: relative;
    z-index: 1;
}
.service-map-contents .pht-single img{
    width: 100%;
}
.service-map-contents .pht-single .ico_caution{
    position: absolute;
    z-index: 2;
}
.service-map-contents .pht-single .ico_caution.caution01{
    top: 75px;
    left: 400px;
}
.service-map-contents .pht-single .ico_caution.caution02{
    top: 80px;
    right: 208px;
}
.service-map-contents .pht-single .ico_caution.caution03{
    top: 330px;
    left: 240px;
}
.service-map-contents .pht-single .ico_caution.caution04{
    top: 330px;
    right: 440px;
}
.service-map-contents .pht-single .ico_caution.caution05{
    top: 360px;
    right: 85px;
}
.service-map-contents .pht-single .ico_caution.caution06{
    top: 610px;
    left: 450px;
}
.service-map-contents .pht-single .ico_caution.caution07{
    top: 620px;
    right: 230px;
}
.service-map-contents .pht-single .ico_caution.caution08{
    top: 910px;
    left: 230px;
}
.service-map-contents .pht-single .ico_caution.caution09{
    top: 916px;
    left: 708px;
}
.service-map-contents .pht-single .ico_caution span{
    position: relative;
    pointer-events: none;
    /* display: inline-block; */
    display: flex;
}
.service-map-contents .pht-single .ico_caution span img{
    max-width: 50px !important;
    max-height: 50px !important;
}
.service-map-contents .pht-single .ico_caution span:before{
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    background: #FFF89B;
    border-radius: 4px;
    z-index: -1;
}
.service-map-contents .pht-single .ico_caution span:after{
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    border: 2px dashed #ec3910;
    border-radius: 4px;
    z-index: 0;
    animation: moving 1s infinite linear;
}
/* small */
.service-map-contents .pht-single .ico_caution.small span img{
    max-width: 30px !important;
    max-height: 30px !important;
}
.service-map-contents .pht-single .ico_caution.small span:before{
    width: 40px;
    height: 40px;
}
.service-map-contents .pht-single .ico_caution.small span:after{
    width: 40px;
    height: 40px;
}
@keyframes moving {
  from {
    transform: translate(-50%,-50%) rotate(45deg) scale(0.9);
  }
  to {
    transform: translate(-50%,-50%) rotate(45deg) scale(1.1);
  }
}

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

    .service-map-contents .pht-single .ico_caution span img{
        max-width: 15px !important;
        max-height: 15px !important;
    }
    .service-map-contents .pht-single .ico_caution span:before{
        width: 25px;
        height: 25px;
    }
    .service-map-contents .pht-single .ico_caution span:after{
        width: 25px;
        height: 25px;
    }
    /* small */
    .service-map-contents .pht-single .ico_caution.small span img{
        max-width: 10px !important;
        max-height: 10px !important;
    }
    .service-map-contents .pht-single .ico_caution.small span:before{
        width: 20px;
        height: 20px;
    }
    .service-map-contents .pht-single .ico_caution.small span:after{
        width: 20px;
        height: 20px;
    }

    .service-map-contents .pht-single .ico_caution.caution01{
        top: 29px;
        left: 181px;
    }
    .service-map-contents .pht-single .ico_caution.caution02{
        top: 30px;
        right: 95px;
    }
    .service-map-contents .pht-single .ico_caution.caution03{
        top: 143px;
        left: 103px;
    }
    .service-map-contents .pht-single .ico_caution.caution04{
        top: 143px;
        right: 200px;
    }
    .service-map-contents .pht-single .ico_caution.caution05{
        top: 150px;
        right: 45px;
    }
    .service-map-contents .pht-single .ico_caution.caution06{
        top: 275px;
        left: 203px;
    }
    .service-map-contents .pht-single .ico_caution.caution07{
        top: 275px;
        right: 100px;
    }
    .service-map-contents .pht-single .ico_caution.caution08{
        top: 413px;
        left: 105px;
    }
    .service-map-contents .pht-single .ico_caution.caution09{
        top: 416px;
        left: 322px;
    }
}


/* 「i」アイコンクリック後の吹き出し部分 */
.service-map-contents .map-info .map-info-inner{
    border-radius: 8px;
    padding: 1.6rem;
    background: #EFF0F0;
    position: absolute;
    text-align: left;
    width: 390px;
    display: none;
    z-index: 2;
}
.service-map-contents .map-info .map-info-inner.active{
    display: block;
}
.service-map-contents .map-info:has(.active) {
    position: unset;
}
.service-map-contents .map-info .map-info-inner:after{
    content: "";
    display: inline-block;
    width: 32px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #EFF0F0;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
/* 吹き出し部分位置指定 */
.service-map-contents .map-info .map-info-inner.cloud{
    top: -20px;
    left: 80px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.diagnosis{
    top: -20px;
    left: 650px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.network{
    top: 250px;
    left: 80px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.web{
    top: 250px;
    left: 520px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.mail{
    top: 250px;
    left: 850px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.vulnerability{
    top: 510px;
    left: 80px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.surveillance{
    top: 510px;
    left: 700px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.endpoint{
    top: 740px;
    left: 550px;
    transform: translateY(-100%);
}
.service-map-contents .map-info .map-info-inner.governance{
    top: 810px;
    left: 560px;
    transform: translateY(-100%);
}
@media screen and (max-width: 1380px) {
    .service-map-contents .map-info .map-info-inner.cloud{
        top: 50px;
        left: 80px;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.diagnosis{
        top: 50px;
        left: 650px;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.cloud:after,
    .service-map-contents .map-info .map-info-inner.diagnosis:after {
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
    }
    .service-map-contents .map-info .map-info-inner.mail {
        left: 800px;
    }
}

@media only screen and (max-width: 600px) {
    .service-map-contents .map-info .map-info-inner{
        width: 90%;
    }
    .service-map-contents .map-info .map-info-inner.cloud{
        top: 30px;
        left: 20px;
    }
    .service-map-contents .map-info .map-info-inner.cloud::after{
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.diagnosis{
        top: 30px;
        left: 30px;
    }
    .service-map-contents .map-info .map-info-inner.diagnosis::after{
        left: 77%;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.network{
        top: 395px;
        left: 20px;
    }
    .service-map-contents .map-info .map-info-inner.network::after{
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
        left: 53%;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.web{
        top: 328px;
        left: -25px;
    }
    .service-map-contents .map-info .map-info-inner.web::after{
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
    }
    .service-map-contents .map-info .map-info-inner.mail{
        top: 395px;
        left: 20px;
    }
    .service-map-contents .map-info .map-info-inner.mail::after{
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
        left: 86%;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.vulnerability{
        top: 470px;
        left: 40px;
    }
    .service-map-contents .map-info .map-info-inner.vulnerability::after{
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
    }
    .service-map-contents .map-info .map-info-inner.surveillance{
        top: 535px;
        left: 40px;
    }
    .service-map-contents .map-info .map-info-inner.surveillance::after{
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        top: -10px;
        bottom: auto;
        left: 65%;
        transform: none;
    }
    .service-map-contents .map-info .map-info-inner.endpoint{
        top: 347px;
        left: 60px;
    }
    .service-map-contents .map-info .map-info-inner.governance{
        top: 370px;
        left: -20px;
    }
}
.service-map-contents .map-info .map-info-inner h3{
    color: #2563EB;
    font-size: 2rem;
    font-weight: 700;
    padding-right: 2rem;
    margin-bottom: 1rem;
}
.service-map-contents .map-info .map-info-inner p:not(.btn-close){
    line-height: 1.2;
    border-radius: 6px;
    background: #FFF;
    padding: 1.6rem;
}
.service-map-contents .map-info .map-info-inner p.btn-close{
    position: absolute;
    top: .8rem;
    right: 0;
    text-indent: -200px;
    overflow: hidden;
    width: 48px;
    height: 48px;
    cursor: pointer;
}
.service-map-contents .map-info .map-info-inner p.btn-close:after{
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../img/ico_close.svg) no-repeat center center / cover;
}

@media only screen and (max-width: 600px) {
    .service-map-contents .map-info .map-info-inner h3{
        font-size: 1.8rem;
    }
}

/* セキュリティマップ absoluteVer. */
.pht-single.map-area{
    width: 1200px;
    height: 1100px;
    position: relative;
}
.pht-single.map-area >div{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 25px 20px;
    margin-bottom: 25px;
}
.pht-single.map-area:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/pct_map.png) no-repeat center center / cover;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}
@media screen and (max-width: 1380px) {
    .map-area-wrap{
        overflow-x: scroll;
    }
    .map-area-wrap .pht-single.map-area {
        height: auto;
        padding: 1rem;
    }
    .pht-single.map-area:after {
        width: calc(100% - 3rem);
        height: calc(100% - 3rem);
        top: auto;
        bottom: 23px;
        right: 8px;
    }
}
@media screen and (max-width: 600px) {
    .map-area-wrap .pht-single.map-area {
        width: 540px;
    }
    .map-area-wrap .pht-single.map-area>div {
        gap: 10px 5px;
        margin-bottom: 10px;
    }
    .pht-single.map-area:after {
        bottom: 18px;
    }
}
/* bnr */
.pht-single.map-area >div div {
    position: relative;
}
.pht-single.map-area >div div a img{
    border-radius: 8px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
    transition: .3s;
}
.pht-single.map-area >div div a:hover img{
    outline: 2px solid #000;
    opacity: 1;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
}
.pht-single.map-area >div div.bnr-cloud a img{
    width: 527px;
    height: 236px;
}
.pht-single.map-area >div div.bnr-diagnosis{
    margin-left: 50px;
}
.pht-single.map-area >div div.bnr-diagnosis a img{
    width: 553px;
    height: 236px;
}
.pht-single.map-area >div div.bnr-network a img{
    width: 523px;
    height: 243px;
}
.pht-single.map-area >div div.bnr-web a img{
    width: 336px;
    height: 243px;
}
.pht-single.map-area >div div.bnr-mail a img{
    width: 295px;
    height: 243px;
}
.pht-single.map-area >div div.bnr-vulnerability a img{
    width: 585px;
    height: 208px;
}
.pht-single.map-area >div div.bnr-surveillance{
    margin-left: 50px;
}
.pht-single.map-area >div div.bnr-surveillance a img{
    width: 499px;
    height: 210px;
}
.pht-single.map-area >div div.bnr-endpoint{
    margin-left: auto;
    text-align: right;
}
.pht-single.map-area >div div.bnr-endpoint a img{
    width: 854px;
    height: 329px;
}
.pht-single.map-area >div div.bnr-governance{
    position: absolute;
    bottom: 20px;
    left: 70px;
}
.pht-single.map-area >div div.bnr-governance a img{
    width: 1078px;
    height: 250px;
}
@media screen and (max-width: 600px) {
    .pht-single.map-area>div div a img {
            border-radius: 4px;
        }
    .pht-single.map-area>div div.bnr-diagnosis {
            margin-left: 20px;
        }

        .pht-single.map-area>div div.bnr-surveillance {
            margin-left: 20px;
        }
    .pht-single.map-area >div div.bnr-endpoint a img{
        max-width: 70% !important;
    }
    .pht-single.map-area>div div.bnr-governance {
        position: absolute;
        bottom: 7px;
        left: 28px;
    }
}
/* infoマーク */
.pht-single.map-area >div div >div {
    position: absolute;
    top: 0;
    padding: 10px;
    cursor: pointer;
    transition: .3s;
}
.pht-single.map-area >div div >div:hover {
    outline: 2px solid #000;
}
.pht-single.map-area >div div >div >img{
    width: 24px;
    height: 24px;
}
.pht-single.map-area .map-info-cloud{
    right: 140px;
}
.pht-single.map-area .map-info-diagnosis {
    right: 90px;
}
.pht-single.map-area .map-info-network{
    right: 120px;
}
.pht-single.map-area .map-info-web{
    right: 85px;
}
.pht-single.map-area .map-info-mail{
    right: 60px;
}
.pht-single.map-area .map-info-vulnerability{
    right: 210px;
}
.pht-single.map-area .map-info-surveillance{
    right: 120px;
}
.pht-single.map-area .map-info-endpoint{
    right: 270px;
}
.pht-single.map-area .map-info-governance{
    right: 450px;
}
@media screen and (max-width: 600px) {
    .pht-single.map-area>div div>div {
        padding: 2px 10px;
    }
    .pht-single.map-area >div div >div >img{
        width: 14px;
        height: 14px;
    }
    .pht-single.map-area .map-info-cloud{
        right: 60px;
    }
    .pht-single.map-area .map-info-diagnosis {
        right: 30px;
    }
    .pht-single.map-area .map-info-network{
        right: 45px;
    }
    .pht-single.map-area .map-info-web{
        right: 30px;
    }
    .pht-single.map-area .map-info-mail{
        right: 20px;
    }
    .pht-single.map-area .map-info-vulnerability{
        right: 90px;
    }
    .pht-single.map-area .map-info-surveillance{
        right: 50px;
    }
    .pht-single.map-area .map-info-endpoint{
        right: 110px;
    }
    .pht-single.map-area .map-info-governance{
        right: 190px;
    }
}


/* --------------------------------------------------

セキュリティ対策マップ contact

-------------------------------------------------- */
.service-map-contact{
    color: #fff;
    padding: 5rem 1rem;
    background: #0F172A;
}
.service-map-contact .ttl{
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center;
}
.service-map-contact .ttl span:before{
    content: none;
}
.service-map-contact p{
    font-weight: 400;
}
.service-map-contact.mb{
    margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
    .service-map-contact .ttl{
        font-size: 2.2rem;
    }
}

/* --------------------------------------------------

セキュリティ対策マップ menu

-------------------------------------------------- */
.service-map-menu{
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
    margin-bottom: 8rem;
}
.service-map-menu::before{
    content: "";
    display: block;
    width: 1500px;
    height: 1272px;
    background: url(../img/bg_noise.png) no-repeat center center / contain;
    position: absolute;
    top: -26%;
    left: 50%;
    z-index: -1;
}
.service-map-menu .sttl{
    color: #2563EB;
    font-size: 3.2rem;
    font-weight: 500;
    margin: 8rem 0 2rem;
    padding-left: 6rem;
    position: relative;
}
.service-map-menu .sttl:before{
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* 見出しアイコン */
.service-map-menu .sttl.cloud:before{
    width: 42px;
    height: 26px;
    background: url(../img/ico_cloud.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.network:before{
    width: 40px;
    height: 27px;
    background: url(../img/ico_network.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.mail:before{
    width: 40px;
    height: 30px;
    background: url(../img/ico_mail.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.web:before{
    width: 40px;
    height: 21px;
    background: url(../img/ico_web.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.endpoint:before{
    width: 45px;
    height: 41px;
    background: url(../img/ico_endpoint.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.vulnerability:before{
    width: 40px;
    height: 44px;
    background: url(../img/ico_vulnerability.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.diagnosis:before{
    width: 40px;
    height: 42px;
    background: url(../img/ico_diagnosis.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.surveillance:before{
    width: 40px;
    height: 45px;
    background: url(../img/ico_surveillance.svg) no-repeat center center / cover;
}
.service-map-menu .sttl.governance:before{
    width: 37px;
    height: 37px;
    background: url(../img/ico_governance.svg) no-repeat center center / cover;
}
@media only screen and (max-width: 768px) {
    .service-map-menu {
            padding: 4rem 0;
        }
    .service-map-menu .sttl {
            font-size: 2.2rem;
        }
}

.service-map-menu .list-step{
    display: flex;
    flex-wrap: nowrap;
    gap: 3%;
    overflow-y: auto;
    padding-top: 8rem;
    padding-bottom: 2rem;
}
.service-map-menu .list-step >li{
    min-width: calc(100% / 3 - 3%);
    max-width: calc(100% / 3);
    border-radius: 8px;
    background: #FFFEFE;
    padding: 2.4rem;
    display: grid;
    align-content: start;
    grid-template-rows: auto auto minmax(110px,auto) auto;
    gap: 2.4rem 0;
    border: 24px solid #E6E6E6;
    position: relative;
}
/* liが4つ以上ある時 */
.service-map-menu .list-step:has(li:nth-child(4)) > li {
    min-width: calc(95% / 3 - 3%);
    max-width: calc(95% / 3);
}

.service-map-menu .list-step >li:after{
    content: "";
    display: inline-block;
    width: 40px;
    height: 60px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #E6E6E6;
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.service-map-menu .list-step >li:last-child:after{
    content: none;
}
/* borderと矢印の色設定 */
.service-map-menu .list-step >li:nth-of-type(2){
    border-color: #CCC;
}
.service-map-menu .list-step >li:nth-of-type(2):after{
    background: #CCC;
}
.service-map-menu .list-step >li:nth-of-type(3){
    border-color: #B2B2B2;
}
.service-map-menu .list-step >li:nth-of-type(3):after{
    background: #B2B2B2;
}
.service-map-menu .list-step >li:nth-of-type(4){
    border-color: #999;
}
.service-map-menu .list-step >li:nth-of-type(4):after{
    background: #999;
}

/* borderと矢印の色設定 クラウドセキュリティ */
.service-map-menu .list-step.cloud >li{
    border-color: #F9EBCC;
}
.service-map-menu .list-step.cloud >li:after{
    background: #F9EBCC;
}
.service-map-menu .list-step.cloud >li:nth-of-type(2){
    border-color: #F1D69C;
}
.service-map-menu .list-step.cloud >li:nth-of-type(2):after{
    background: #F1D69C;
}
.service-map-menu .list-step.cloud >li:nth-of-type(3){
    border-color: #E6C06E;
}
.service-map-menu .list-step.cloud >li:nth-of-type(3):after{
    background: #E6C06E;
}
/* borderと矢印の色設定 ネットワークセキュリティ */
.service-map-menu .list-step.network >li{
    border-color: #F7E2E7;
}
.service-map-menu .list-step.network >li:after{
    background: #F7E2E7;
}
.service-map-menu .list-step.network >li:nth-of-type(2){
    border-color: #E9B9C4;
}
.service-map-menu .list-step.network >li:nth-of-type(2):after{
    background: #E9B9C4;
}
.service-map-menu .list-step.network >li:nth-of-type(3){
    border-color: #E18499;
}
.service-map-menu .list-step.network >li:nth-of-type(3):after{
    background: #E18499;
}
.service-map-menu .list-step.network >li:nth-of-type(4){
    border-color: #BC4A64;
}
.service-map-menu .list-step.network >li:nth-of-type(4):after{
    background: #BC4A64;
}
/* borderと矢印の色設定 メールセキュリティ */
.service-map-menu .list-step.mail >li{
    border-color: #F4EAF3;
}
.service-map-menu .list-step.mail >li:after{
    background: #F4EAF3;
}
.service-map-menu .list-step.mail >li:nth-of-type(2){
    border-color: #D7B7D2;
}
.service-map-menu .list-step.mail >li:nth-of-type(2):after{
    background: #D7B7D2;
}
.service-map-menu .list-step.mail >li:nth-of-type(3){
    border-color: #863D76;
}
.service-map-menu .list-step.mail >li:nth-of-type(3):after{
    background: #863D76;
}
/* borderと矢印の色設定 Webセキュリティ */
.service-map-menu .list-step.web >li{
    border-color: #F5F4E6;
}
.service-map-menu .list-step.web >li:after{
    background: #F5F4E6;
}
.service-map-menu .list-step.web >li:nth-of-type(2){
    border-color: #D8D59A;
}
.service-map-menu .list-step.web >li:nth-of-type(2):after{
    background: #D8D59A;
}
.service-map-menu .list-step.web >li:nth-of-type(3){
    border-color: #97920A;
}
.service-map-menu .list-step.web >li:nth-of-type(3):after{
    background: #97920A;
}
/* borderと矢印の色設定 エンドポイントセキュリティ */
.service-map-menu .list-step.endpoint >li{
    border-color: #EAF6F0;
}
.service-map-menu .list-step.endpoint >li:after{
    background: #EAF6F0;
}
.service-map-menu .list-step.endpoint >li:nth-of-type(2){
    border-color: #A9D7C1;
}
.service-map-menu .list-step.endpoint >li:nth-of-type(2):after{
    background: #A9D7C1;
}
.service-map-menu .list-step.endpoint >li:nth-of-type(3){
    border-color: #319B6A;
}
.service-map-menu .list-step.endpoint >li:nth-of-type(3):after{
    background: #319B6A;
}
/* borderと矢印の色設定 脆弱性管理 */
.service-map-menu .list-step.vulnerability >li{
    border-color: #e0d9e9;
}
.service-map-menu .list-step.vulnerability >li:after{
    background: #e0d9e9;
}
.service-map-menu .list-step.vulnerability >li:nth-of-type(2){
    border-color: #42266F;
}
.service-map-menu .list-step.vulnerability >li:nth-of-type(2):after{
    background: #42266F;
}
/* borderと矢印の色設定 脆弱性/ペネトレーションテスト */
.service-map-menu .list-step.diagnosis >li{
    border-color: #E6F4F7;
}
.service-map-menu .list-step.diagnosis >li:after{
    background: #E6F4F7;
}
.service-map-menu .list-step.diagnosis >li:nth-of-type(2){
    border-color: #9FD0DA;
}
.service-map-menu .list-step.diagnosis >li:nth-of-type(2):after{
    background: #9FD0DA;
}
.service-map-menu .list-step.diagnosis >li:nth-of-type(3){
    border-color: #058EA6;
}
.service-map-menu .list-step.diagnosis >li:nth-of-type(3):after{
    background: #058EA6;
}
/* borderと矢印の色設定 セキュリティ監視運用 */
.service-map-menu .list-step.surveillance >li{
    border-color: #F8ECE6;
}
.service-map-menu .list-step.surveillance >li:after{
    background: #F8ECE6;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(2){
    border-color: #E5B6A3;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(2):after{
    background: #E5B6A3;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(3){
    border-color: #CF7A54;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(3):after{
    background: #CF7A54;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(4){
    border-color: #B55126;
}
.service-map-menu .list-step.surveillance >li:nth-of-type(4):after{
    background: #B55126;
}
/* borderと矢印の色設定 ガバナンス */
.service-map-menu .list-step.governance >li{
    border-color: #FBEDE1;
}
.service-map-menu .list-step.governance >li:after{
    background: #FBEDE1;
}
.service-map-menu .list-step.governance >li:nth-of-type(2){
    border-color: #F2B07A;
}
.service-map-menu .list-step.governance >li:nth-of-type(2):after{
    background: #F2B07A;
}
.service-map-menu .list-step.governance >li:nth-of-type(3){
    border-color: #EB8A3C;
}
.service-map-menu .list-step.governance >li:nth-of-type(3):after{
    background: #EB8A3C;
}
.service-map-menu .list-step.governance >li:nth-of-type(4){
    border-color: #E36A00;
}
.service-map-menu .list-step.governance >li:nth-of-type(4):after{
    background: #E36A00;
}
.service-map-menu .list-step >li .step{
    color: #fff;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    background: #2563EB;
    display: inline-block;
    padding: .3rem 3rem;
    justify-self: flex-start;
}

/* stepの色設定 */
.service-map-menu .list-step.cloud >li .step{
    background: #BD8100;
}
.service-map-menu .list-step.network >li .step{
    background: #A93C54;
}
.service-map-menu .list-step.mail >li .step{
    background: #863D76;
}
.service-map-menu .list-step.web >li .step{
    background: #97920A;
}
.service-map-menu .list-step.endpoint >li .step{
    background: #319B6A;
}
.service-map-menu .list-step.vulnerability >li .step{
    background: #42266F;
}
.service-map-menu .list-step.diagnosis >li .step{
    background: #058EA6;
}
.service-map-menu .list-step.surveillance >li .step{
    background: #B55126;
}
.service-map-menu .list-step.governance >li .step{
    background: #E36A00;
}

.service-map-menu .list-step >li .ttl-step{
    font-size: 2.4rem;
    font-weight: 500;
    position: relative;
}
.service-map-menu .list-step >li .ttl-step span{
    font-size: 1.4rem;
}
.service-map-menu .list-step >li .ttl-step:hover .list-step-detail{
    opacity: 1;
}
.service-map-menu .list-step >li .list-step-detail{
    border-radius: 4px;
    padding: 1.6rem 1.3rem;
    background: #535353;
    position: absolute;
    top: -10px;
    left: -20px;
    transform: translateY(-100%);
    opacity: 0;
}

.service-map-menu .list-step >li .list-step-detail:after{
    content: "";
    display: inline-block;
    width: 32px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #535353;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.service-map-menu .list-step >li .list-step-detail >li{
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2;
    padding-left: 2rem;
    position: relative;
}
.service-map-menu .list-step >li .list-step-detail >li:before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 12px;
    left: 0;
}
.service-map-menu .list-step >li p:not(:has(>.btn-base)){
    line-height: 1.25;
    margin-bottom: 0.8rem;
}
.service-map-menu .list-step >li .dl-service dt{
    color: #2563EB;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
/* 見出しの色設定 */
.service-map-menu .list-step.cloud >li .dl-service dt{
    color: #BD8100;
}
.service-map-menu .list-step.network >li .dl-service dt{
    color: #A93C54;
}
.service-map-menu .list-step.mail >li .dl-service dt{
    color: #863D76;
}
.service-map-menu .list-step.web >li .dl-service dt{
    color: #97920A;
}
.service-map-menu .list-step.endpoint >li .dl-service dt{
    color: #319B6A;
}
.service-map-menu .list-step.vulnerability >li .dl-service dt{
    color: #42266F;
}
.service-map-menu .list-step.diagnosis >li .dl-service dt{
    color: #058EA6;
}
.service-map-menu .list-step.surveillance >li .dl-service dt{
    color: #B55126;
}
.service-map-menu .list-step.governance >li .dl-service dt{
    color: #E36A00;
}

.service-map-menu .list-step >li .dl-service dd{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.service-map-menu .list-step >li .dl-service dd p{
    width: 100%;
}
@media only screen and (max-width: 1200px) {
    .service-map-menu .list-step>li {
        min-width: calc(100% / 2 - 3%);
        max-width: none;
     }
    /* liが4つ以上ある時 */
    .service-map-menu .list-step:has(li:nth-child(4)) > li {
        min-width: calc(100% / 2 - 3%);
        max-width: none;
    }
}
@media only screen and (max-width: 768px) {
    .service-map-menu .list-step{
        flex-wrap: wrap;
        gap: 3rem;
        padding-top: 2rem;
        overflow: visible;
    }
    .service-map-menu .list-step>li {
        padding: 2.4rem 1.6rem;
    }
    .service-map-menu .list-step >li:after{
        width: 60px;
        height: 40px;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        right: -50px;
        top: auto;
        bottom: -20px;
        left: 50%;
        transform: translate(-50%,50%);
    }

}

/* --------------------------------------------------

セキュリティ対策マップ faq

-------------------------------------------------- */
.service-map-faq {
    margin-bottom: 8rem;
}
.service-map-faq .list-qa {
    margin-bottom: 8rem;
}
.service-map-faq .list-qa .col-qa{
    margin-bottom: 2rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
}
.service-map-faq .list-qa .col-qa>.col-qa-ttl{
    background: none;
    font-size: 1.8rem;
}
.service-map-faq .list-qa .col-qa>.col-qa-ttl span{
    color: #2563EB;
    font-weight: 700;
}
.service-map-faq .list-qa .col-qa>.col-qa-ttl:after{
    border-right: 1px solid #0F172A;
    border-bottom: 1px solid #0F172A;
}
.service-map-faq .list-qa .col-qa>div{
    border-radius: 4px;
    background: #EEF2FF;
    margin: 0 2.4rem 1.6rem 2.4rem;
}

/* --------------------------------------------------

セキュリティ対策マップ casestudy

-------------------------------------------------- */
.service-map-casestudy{
    margin-bottom: 8rem;
}
.service-map-casestudy .list-thumb li a{
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
    padding: 2.4rem;
}
.service-map-casestudy .list-thumb li a .ph-part{
    border-radius: 4px;
}
.service-map-casestudy .list-thumb li a .txt-part .ttl{
    font-size: 2.4rem;
    font-weight: 500;
}
.service-map-casestudy .list-thumb li a .txt-part .name-company{
    font-size: 2rem;
    font-weight: 500;
    text-align: right;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dt{
    color: #2563EB;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dd .list-circle{
    list-style: none;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dd .list-circle li{
    font-size: 1.4rem;
    display: list-item;
    line-height: 2;
    margin-left: 0;
    margin-bottom: 0;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dd .list-circle li:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563EB;
    margin-right: 1.2rem;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dd .list-icon li span{
    color: #2563EB;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 50px;
    background: #EEF2FF;
    padding: .5rem 1rem;
}
.service-map-casestudy .list-thumb li a .dl-casestudy dd .list-icon li span{
    color: #2563EB;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 50px;
    background: #EEF2FF;
    padding: .5rem 1rem;
}
.service-map-casestudy .list-thumb li a .txt-more{
    color: #000;
    text-align: right;
    padding-right: 3rem;
    position: relative;
}
.service-map-casestudy .list-thumb li a .txt-more:after{
    content: "";
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin: 0 0.5em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 1px solid #0F172A;
    border-bottom: 1px solid #0F172A;
}
@media only screen and (max-width: 768px) {
 .service-map-casestudy .list-thumb li a .txt-part .ttl{
    font-size: 1.8rem;
}
.service-map-casestudy .list-thumb li a .txt-part .name-company{
    font-size: 1.6rem;
}
}

/* --------------------------------------------------

マップに戻る

-------------------------------------------------- */
.back-to-map{
    position: fixed;
    right: 4%;
    bottom: 10%;
    z-index: 10;
}
.back-to-map p{
    text-align: center;
}
.back-to-map p a{
    display: block;
    color: #60A5FA;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
}
.back-to-map p a:after{
    content: "";
    display: block;
    width: 124px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../img/back_to_map.svg) no-repeat center center / cover;
}
.back-to-map p a:hover:after{
    animation: rotation 8s linear infinite;
}
@keyframes rotation {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
@media only screen and (max-width: 768px) {
    .back-to-map {
            bottom: 20%;
        }
    .back-to-map p a{
        font-size: 1rem;
    }
    .back-to-map p a:after {
        width: 62px;
    }
    @media screen and (orientation: landscape) {
        .back-to-map {
                bottom: 6em;
            }
        #footer .page-top a {
            bottom: 1em;
        }
    }
}


/* --------------------------------------------------

共通部分のお問い合わせを非表示

-------------------------------------------------- */
.contact-area{
    display: none;
}