body {
    background-image: url(../image/bk.svg);
    background-position: 100%;
    background-size: 100%;
    background-repeat: repeat;
    font-family: 'Noto Sans JP', 'Hiragino Gothic';
    color: #fff;
    width: 100%;
}

@media screen and (min-width:751px) {

    .border-gradation br,
    h4 br,
    .sp,
    .Menu {
        display: none;
    }

}


/*-------PC-ヘッダー------*/

header {
    background-color: #fff;
    position: fixed;
    width: 100%;
    margin: 0 auto;
    z-index: 99;
}

.header_inr {
    display: flex;
    margin: 0 calc((50/1440)*100vw);
    justify-content: space-between;
    align-items: center;
}

.header_inr img {
    width: calc((200/1440)*100vw);
}

.pc_menu {
    display: flex;
    gap: calc((40 / 1440)* 100vw);
    align-items: center;
}

.pc_menu ul {
    display: flex;
    gap: calc((40/1440)*100vw);
    align-items: center;
}

.header_inr li {
    position: relative;
    list-style: none;
}

@media screen and (min-width:751px) {
    .header_inr li {
        height: calc((80/1440)*100vw);
        display: flex;
        align-items: center;
    }
}

.header_inr .contact {
    display: flex;
    gap: calc((40/1440)*100vw);
    border-radius: calc((3/1440)*100vw);
    padding: 0;
    border: none;
    display: inline-block;
}

.header_inr .contact a {
    font-size: calc((14/1440)*100vw);
    font-weight: bold;
    letter-spacing: 0;
    text-decoration: none;
    padding: calc((13/1440)*100vw) calc((20/1440)*100vw);
    color: #fff;
    display: flex;
    align-items: center;
    gap: calc((10/1440)*100vw);
    justify-content: center;
}

.pc_menu a {
    font-size: max((16/1440)*100vw,11px);
    text-decoration: none;
    color: #171B2E;
    font-weight: bold;
}

.pc_menu li a {
    display: inline-block;
    transition: all .3s ease 0s;
    text-decoration: none;
}

.pc_menu li a:hover {
    cursor: pointer;
    color: #066FC8;
}

.pc_menu li a::after {
    background: -webkit-linear-gradient(-45deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1)); /* 下線の色 */
    bottom: 0;
    content: "";
    height: calc((3/1440)*100vw);
    left: 0;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
    width: 100%;
}
  /* リンクにホバーした際の下線の表示 */
.pc_menu li a:hover::after {
    opacity: 1;
}

@media screen and (max-width:1100px) {
    .header_inr {
        margin: 0 10px;
    }
    .pc_menu {
        gap: calc((20 / 1440)* 100vw);
    }
    .pc_menu ul {
        gap: calc((20 / 1440)* 100vw);
    }
}

/*-------PC-fv------*/

.fv {
    background-image: url(../image/fv_bk.jpg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: calc((90/1440)*100vw) 0;
}

.fv_inr {
    width: calc((820/1440)*100vw);
    text-align: center;
    margin-left: calc((135/1440)*100vw);
    position: relative;
    z-index: 1;
}

.fv_inr::after {
    content: "";
    background-image: url(../image/fv_right_img.svg);
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: 90%;
    width: calc((800/1440)*100vw);
    height: calc((700/1440)*100vw);
    bottom: calc((-40/1440)*100vw);
    right: calc((-460/1440)*100vw);
    position: absolute;
    z-index: -1;
}

.title_img {
    width: calc((810/1440)*100vw);
}

.fv_inr p {
    font-size: calc((30/1440)*100vw);
    font-weight: bold;
    line-height: normal;
}

.hexagon_img {
    width: calc((810/1440)*100vw);
    margin: calc((25/1440)*100vw) 0;
}

.contact-wrap {
    text-align: center;
}

.contact {
    position: relative;
    background: linear-gradient(90deg, #00C4D5, #066FC8);
    border-radius: calc((10/1440)*100vw);
    padding: 0;
    border: none;
    box-shadow: 0 0 calc((5/1440)*100vw) #fff;
    transition: all 0.2s ease;
    outline: none;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
}

.contact:hover {
    border-color: transparent;
}

.contact.navy {
    background: #2F3968;
}

.pushdown:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc((4/1440)*100vw);
    left: 0;
    width: 100%;
    height: 100%;
}

.pushdown:hover {
    color: #fff;
    transform: translateY(calc((4/1440)*100vw));
}

.contact::before {
    content: '';
    /*絶対配置でキラッと光るの位置を決める*/
    position: absolute;
    top: 0;
    left: -75%;
    /*キラッと光る形状*/
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.contact:hover::before {
    animation: shine 1s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.contact a {
    position: relative;
    font-size: calc((30/1440)*100vw);
    font-weight: bold;
    letter-spacing: calc((5/1440)*100vw);
    text-decoration: none;
    padding: calc((57/1440)*100vw) calc((105/1440)*100vw);
    color: #fff;
    display: flex;
    align-items: center;
    gap: calc((20/1440)*100vw);
    justify-content: center;
    transition: all 0.3s ease;
}

.sp_menu {
    display: none;
}

.dli-chevron-round-right {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    position: relative;
    width: calc((18/1440)*100vw);
    height: calc((18/1440)*100vw);
    transform: translateX(-25%) rotate(45deg);
}

.pc_menu .dli-chevron-round-right {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    position: relative;
    width: calc((10/1440)*100vw);
    height: calc((10/1440)*100vw);
    transform: translateX(-25%) rotate(45deg);
}

.pc_menu .dli-chevron-round-right::before {
    top: 0;
    left: 0;
    right: 0;
    height: calc((3/1440)*100vw);
}

.pc_menu .dli-chevron-round-right::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: calc((3/1440)*100vw);
}

/*--------->-----------*/
.dli-chevron-round-right {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    position: relative;
    width: calc((18/1440)*100vw);
    height: calc((18/1440)*100vw);
    transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-round-right::before,
.dli-chevron-round-right::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 0.1em;
}

.dli-chevron-round-right::before {
    top: 0;
    left: 0;
    right: 0;
    height: calc((4/1440)*100vw);
}

.dli-chevron-round-right::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: calc((4/1440)*100vw);
}


/*-------PC-悩み訴求------*/

.content_top {
    position: relative;
    margin-top: calc((100/1440)*100vw);
    padding-top: calc((100/1440)*100vw);
}

h3 {
    letter-spacing: calc((2/1440)*100vw);
    font-size: calc((30/1440)*100vw);
    font-weight: normal;
    text-align: center;
}

h3 span {
    font-size: calc((35/1440)*100vw);
    font-weight: bold;
}

.border-gradation {
    border-bottom: calc((5/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
    line-height: calc((40/1440)*100vw);
    margin: 0 auto;
    width: 50%;
}

.worry_inr {
    display: flex;
    gap: calc((30/1440)*100vw);
    justify-content: center;
    margin-top: calc((45/1440)*100vw);
    align-items: flex-end;
}

.worry_inr_box {
    width: calc((300/1440)*100vw);
}

.worry_inr_box img {
    width: calc((150/1440)*100vw);
    display: block;
    margin: 0 auto;
}

.worry_box {
    display: grid;
    place-items: center;
    width: calc((267/1440)*100vw);
    height: calc((125/1440)*100vw);
    padding: calc((10/1440)*100vw) calc((20/1440)*100vw);
    background-color: #171B2E;
    border: calc((2/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.worry_box p {
    text-align: center;
    line-height: normal;
    font-weight: bold;
    font-size: calc((20/1440)*100vw);
}


.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/*-------PC-三角3つ------*/
.triangle_box {
    margin: calc((40/1440)*100vw) 0;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: calc((16/1440)*100vw) solid transparent;
    border-left: calc((16/1440)*100vw) solid transparent;
    border-top: calc((21/1440)*100vw) solid #ffffff;
    border-bottom: 0;
    margin: 0 auto;
}

.triangle:nth-of-type(2) {
    margin: calc((10/1440)*100vw) auto;
}

/*-------PC-おまかせください！------*/
.worry_last {
    text-align: center;
    position: relative;
}

.worry_last p {
    font-size: calc((30/1440)*100vw);
    font-weight: bold;
}

h4 {
    font-size: calc((40/1440)*100vw);
    font-weight: bold;
}

h4 span {
    font-size: calc((56/1440)*100vw);
    font-weight: bold;
    margin: calc((50/1440)*100vw) 0;
}

.OSTech {
    font-size: calc((80/1440)*100vw);
    font-weight: bold;
    display: inline-block;
    background: -webkit-linear-gradient(-45deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.worry_line {
    position: relative;
    width: calc((550/1440)*100vw);
    height: calc((20/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1));
    transform: scaleY(1.0) perspective(.8em) rotateX(-3deg);
    transform-origin: bottom left;
    top: calc((20/1440)*100vw);
}

.under {
    transform: scaleY(1.0) perspective(0.8em) rotateX(3deg);
    transform-origin: right bottom;
    display: block;
    margin: 0 0 0 auto;
}

/*-------PC-サービス一覧------*/
.content_title_box {
    text-align: center;
}

.content_title {
    font-weight: bold;
}

.content_title_en {
    text-align: center;
    margin: 0 auto calc((10/1440)*100vw);
    font-family: "Quantico", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc((20/1440)*100vw);
    display: inline-block;
    background: -webkit-linear-gradient(0, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 80%, rgba(255, 160, 233, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service_content {
    margin-top: calc((70/1440)*100vw);
}

/*-------------サービス形態・セキュリティ運用支援タイトル部分----------*/
.details_title {
    position: relative;
    display: block;
    padding: calc((30/1440)*100vw) 0;
    color: #fff;
    font-size: calc((26/1440)*100vw);
    font-weight: bold;
    text-align: center;
    border-radius: calc((10/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 0.8), rgba(138, 199, 255, 0.8) 70%, rgba(204, 188, 255, 0.8) 85%, rgba(255, 160, 233, 0.8));
}

/*-------------セキュリティ運用支援部分----------*/
.security_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc((50/1440)*100vw) calc((40/1440)*100vw);
    margin: calc((50/1440)*100vw) 0 0;
}

.security_box {
    width: calc((450/1440)*100vw);
}

.security_box img {
    width: calc((450/1440)*100vw);
    border-radius: calc((10/1440)*100vw) calc((10/1440)*100vw) 0 0;
}

.accordion-004 {
    margin-bottom: calc((7/1440)*100vw);
    border: calc((2/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 70%, rgba(204, 188, 255, 1) 85%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.accordion-004 summary {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    gap: calc((10/1440)*100vw);
    padding: calc((15/1440)*100vw) calc((10/1440)*100vw);
    font-weight: 600;
    cursor: pointer;
    font-size: calc((17/1440)*100vw);
}

.accordion-004 summary::-webkit-details-marker {
    display: none;
}

.accordion-004 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 0;
    height: 0;
    border-bottom: calc((6/1440)*100vw) solid #fff;
    border-right: calc((6/1440)*100vw) solid #fff;
    border-top: calc((6/1440)*100vw) solid transparent;
    border-left: calc((6/1440)*100vw) solid transparent;
    content: '';
    transition: transform .2s;
    top: calc((-2/1440)*100vw);
    position: relative;
}

.accordion-004[open] summary::after {
    transform: rotate(225deg);
    top: calc((3/1440)*100vw);
}

.accordion-004 p {
    transform: translateY(calc((-10/1440)*100vw));
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    transition: transform .5s, opacity .5s;
    font-size: calc((17/1440)*100vw);
    color: #fff;
    text-align: left;
    line-height: max((22/1440)*100vw,22px);
}

.accordion-004 span {
    font-size: max((13/1440)*100vw,13px);
}

.accordion-004[open] p {
    transform: none;
    opacity: 1;
}


/*--------------アコーディオン共通部分------------*/

.details {
    width: calc((1100/1440)*100vw);
    margin: 0 auto calc((50/1440)*100vw);
}

.details-summary {
    position: relative;
    display: block;
    padding: calc((30/1440)*100vw) 0;
    color: #fff;
    font-size: calc((26/1440)*100vw);
    font-weight: bold;
    text-align: center;
    border-radius: calc((10/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 0.8), rgba(138, 199, 255, 0.8) 57%, rgba(204, 188, 255, 0.8) 80%, rgba(255, 160, 233, 0.8));
}

.details-summary:hover {
    cursor: pointer;
    opacity: 0.8;
}

.details-summary .btn {
    position: absolute;
    top: 37%;
    right: 10%;
    width: calc((25/1440)*100vw);
    height: calc((25/1440)*100vw);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.details-summary .btn:before,
.details-summary .btn:after {
    content: "";
    background-color: #fff;
    border-radius: calc((10/1440)*100vw);
    width: calc((25/1440)*100vw);
    height: calc((5/1440)*100vw);
    position: absolute;
    top: calc((10/1440)*100vw);
    right: 0;
    transform-origin: center center;
}

.details-summary .btn:before {
    width: calc((5/1440)*100vw);
    height: calc((25/1440)*100vw);
    top: 0;
    left: calc((10/1440)*100vw);
}

.details-summary.is-active .btn {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.details-summary.is-active .btn:before {
    content: none;
}

.details-summary::-webkit-details-marker {
    display: none;
}

.details-content {
    padding: calc((50/1440)*100vw) 0;
}

/*-------------セキュリティ製品導入展開支援-------------*/

.security_accordion_inr {
    display: flex;
    justify-content: center;
    gap: calc((160/1440)*100vw);
}

.service_security {
    text-align: center;
}

.service_security p {
    font-size: calc((24/1440)*100vw);
    font-weight: bold;
    text-align: center;
    line-height: calc((40/1440)*100vw);
}

.service_security span {
    border-bottom: calc((10/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.service_security img {
    width: calc((345/1440)*100vw);
    height: calc((230/1440)*100vw);
    margin: calc((30/1440)*100vw) auto;
}

.security_accordion_last {
    margin: calc((25/1440)*100vw) auto 0;
    width: calc((885/1440)*100vw);
    padding: calc((3/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((10/1440)*100vw);
}

.security_accordion_last div {
    background-color: #171B2E;
    padding: calc((20/1440)*100vw) calc((2/1440)*100vw);
    border-radius: calc((9/1440)*100vw);
    width: calc((880.8/1440)*100vw);
}

.security_accordion_last p {
    text-align: center;
    font-size: calc((25/1440)*100vw);
    font-weight: bold;
    line-height: calc((40/1440)*100vw);
}

/*-------------インシデント時の支援-------------*/

.incident_accordion_inr {
    position: relative;
}

.work_content_title {
    position: absolute;
    margin: calc((25/1440)*100vw) auto 0;
    width: calc((190/1440)*100vw);
    padding: calc((2/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((50/1440)*100vw);
    top: 0;
    left: calc((100/1440)*100vw);
    z-index: 2;
}

.work_content_title div {
    background-color: #171B2E;
    padding: calc((10/1440)*100vw) calc((2/1440)*100vw);
    border-radius: calc((50/1440)*100vw);
    width: calc((185.8/1440)*100vw);
}

.work_content_title p {
    text-align: center;
    font-size: calc((25/1440)*100vw);
    font-weight: bold;
}

.work_content_box {
    position: relative;
    margin: calc((25/1440)*100vw) auto 0;
    width: calc((970/1440)*100vw);
    padding: calc((2/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((9/1440)*100vw);
    top: calc((50/1440)*100vw);
}

.work_content_box div {
    background-color: #171B2E;
    padding: calc((20/1440)*100vw) calc((2/1440)*100vw);
    border-radius: calc((9/1440)*100vw);
    width: calc((966/1440)*100vw);
}

.work_content_box ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: calc((765/1440)*100vw);
    height: calc((220/1440)*100vw);
    margin: calc((40/1440)*100vw) auto 0;
    gap: calc((30/1440)*100vw);
}

.work_content_box li {
    text-align: left;
    font-size: calc((18/1440)*100vw);
    position: relative;
    line-height: 1.8;
}

.work_content_box li span {
    display: block;
    font-size: calc((14/1440)*100vw);
    line-height: calc((20/1440)*100vw);
    margin: calc((10/1440)*100vw) calc((10/1440)*100vw) 0;
}

.work_content_box li::after {
    content: '';
    display: block;
    position: absolute;
    top: .5em;
    left: -1.5em;
    width: calc((13/1440)*100vw);
    height: calc((6/1440)*100vw);
    border-left: calc((4/1440)*100vw) solid #77BBFF;
    border-bottom: calc((4/1440)*100vw) solid #77BBFF;
    transform: rotate(-45deg);
}



.incident_flow_box {
    position: relative;
    margin-top: calc((150/1440)*100vw);
}

.flow_title {
    top: calc((-10/1440)*100vw);
    width: calc((570/1440)*100vw);
}

.flow_title div {
    width: calc((566/1440)*100vw);
    padding: calc((21/1440)*100vw) calc((2/1440)*100vw);
}

.flow_box {
    position: relative;
    margin: calc((25/1440)*100vw) auto 0;
    width: calc((970/1440)*100vw);
    padding: calc((2/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((9/1440)*100vw);
    top: calc((50/1440)*100vw);
}

.flow_box div {
    background-color: #171B2E;
    padding: calc((50/1440)*100vw) calc((2/1440)*100vw) calc((20/1440)*100vw);
    border-radius: calc((9/1440)*100vw);
    width: calc((966/1440)*100vw);
}

.flow_box img {
    width: calc((960/1440)*100vw);
}

/*-------------セキュリティ以外のヘルプデスク対応-------------*/

.help_desk_img {
    display: flex;
    gap: calc((40/1440)*100vw);
    justify-content: center;
}

.help_desk_img img {
    width: calc((220/1440)*100vw);
}

.help_desk_img img:nth-of-type(2),
.help_desk_img img:nth-of-type(4) {
    margin-top: calc((100/1440)*100vw);
}

.advance_service_box {
    margin: calc((100/1440)*100vw) auto calc((30/1440)*100vw);
}

.advance_service_box p {
    font-size: calc((24/1440)*100vw);
    font-weight: bold;
    text-align: center;
    line-height: calc((30/1440)*100vw);
}

.advance_service_box span {
    border-bottom: calc((10/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.advance_service_inr {
    display: flex;
    justify-content: center;
    gap: 0 calc((50/1440)*100vw);
}

.advance_service {
    width: calc((450/1440)*100vw);
    top: calc((-50/1440)*100vw);
}

.advance_service div {
    background-color: #171B2E;
    width: calc((445/1440)*100vw);
}

.advance_service ul {
    flex-direction: column;
    flex-wrap: inherit;
    margin: 0 auto;
    width: auto;
    height: calc((220/1440)*100vw);
    gap: calc((15/1440)*100vw);
    padding: calc((30/1440)*100vw) calc((42/1440)*100vw) calc((10/1440)*100vw);
}

.advance_service li::after {
    border-left: calc((4/1440)*100vw) solid #fff;
    border-bottom: calc((4/1440)*100vw) solid #fff;
}

.technical {
    position: relative;
    left: 0;
}

/*-------------オンサイト対応-------------*/

.onsite_flow {
    width: calc((1020/1440)*100vw);
    margin: calc((60/1440)*100vw) calc((40/1440)*100vw);
}

.merit,
.demerit {
    background: #171B2E;
}

.merit p,
.merit_box li {
    color: #F0A8F0;
}

.merit_box {
    background: #F0A8F0;
}

.merit_box div,
.demerit_box div {
    background: #171B2E;
    height: calc((180/1440)*100vw);
}

.demerit_box {
    background: #77BBFF;
}

.demerit p,
.demerit_box li {
    color: #77BBFF;
}

.merit_box li::after {
    border-left: calc((4/1440)*100vw) solid #F0A8F0;
    border-bottom: calc((4/1440)*100vw) solid #F0A8F0;
}

.demerit_box li::after {
    border-left: calc((4/1440)*100vw) solid #77BBFF;
    border-bottom: calc((4/1440)*100vw) solid #77BBFF;
}

/*-------------ご希望に沿ったITエンジニアの派遣-------------*/

.engineer_accordion_inr {
    display: flex;
    gap: calc((20/1440)*100vw);
    justify-content: center;
}

.engineer_box {
    display: grid;
    place-items: center;
    width: calc((250/1440)*100vw);
    height: calc((80/1440)*100vw);
    padding: calc((25/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 0.3), rgba(138, 199, 255, 0.3) 57%, rgba(204, 188, 255, 0.3) 79%, rgba(255, 160, 233, 0.3));
    border: calc((2/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.engineer_box p {
    text-align: center;
    line-height: normal;
    font-size: calc((18/1440)*100vw);
    font-weight: bold;
}


.view_more {
    font-weight: normal;
    font-size: calc((18/1440)*100vw);
    position: relative;
    display: inline-block;
    padding: 0 calc((20/1440)*100vw);
    color: #fff;
    text-decoration: none;
    outline: none;
    left: 83%;
    top: calc((50/1440)*100vw);
}

.view_more::before {
    content: '';
    position: absolute;
    bottom: calc((-8/1440)*100vw);
    left: 15%;
    width: 85%;
    height: calc((2/1440)*100vw);
    background: #fff;
    transition: all .3s;
}

.view_more::after {
    content: '';
    position: absolute;
    bottom: calc((-2.5/1440)*100vw);
    right: -2%;
    width: calc((15/1440)*100vw);
    height: calc((2/1440)*100vw);
    background: #fff;
    transform: rotate(45deg);
    transition: all .3s;
}

.view_more:hover::before {
    left: 30%;
}

.view_more:hover::after {
    right: -17%;
}

/*-------------実績-------------*/
.slider {
    width: 70%;
    margin: calc((50/1440)*100vw) auto 0;
}

.slider .slick-slide {
    margin: 0 calc((10/1440)*100vw);
}

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: calc((3/1440)*100vw) solid #fff;
    border-right: calc((3/1440)*100vw) solid #fff;
    height: calc((15/1440)*100vw);
    width: calc((15/1440)*100vw);
}

.slick-prev {
    left: -5%;
    transform: rotate(-135deg);
}

.slick-prev::before {
    content: none !important;
}

.slick-next {
    right: -5%;
    transform: rotate(45deg);
}

.slick-next::before {
    content: none !important;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align: center;
    margin: calc((20/1440)*100vw) 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 calc((5/1440)*100vw);
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: calc((15/1440)*100vw);
    height: calc((15/1440)*100vw);
    display: block;
    border-radius: 100px;
    background: #fff;
    border: none;
}

.slick-dots .slick-active button {
    background: #77BBFF;
}

/*------------実績内容--------------*/
.slider_box {
    padding: calc((2/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((10/1440)*100vw);
    height: calc((350/1440)*100vw);
}

.slider_box_inr {
    height: calc((309.5/1440)*100vw);
    background-color: #fff;
    padding: calc((15/1440)*100vw) calc((15/1440)*100vw) calc((25/1440)*100vw);
    border-radius: calc((8/1440)*100vw);
    color: #171B2E;
    margin: auto;
}

.slider_box_inr img {
    width: calc((280/1440)*100vw);
    margin-bottom: calc((20/1440)*100vw);
    border-radius: calc((10/1440)*100vw);
}

.white_box_inr_content {
    width: calc((790/1440)*100vw);
    line-height: max((25/1440)*100vw, 25px);
    margin: calc((25/1440)*100vw) auto 0;
}

.slider_box_title {
    font-size: calc((16/1440)*100vw);
    font-weight: bold;
    text-align: center;
}

.slider_box_text {
    font-size: calc((12/1440)*100vw);
    line-height: calc((18/1440)*100vw);
    margin-left: 1em;
    text-indent: -1em;
}

.slider_box_inr hr {
    width: 100%;
    border-bottom: calc((2.5/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
    margin: calc((10/1440)*100vw) auto;
}






/*-------------強み-------------*/

.bk {
    background-image: url(../image/pc_bk.jpg);
    background-position: 100% center;
    background-repeat: no-repeat;
    height: calc((510/1440)*100vw);
    position: absolute;
    width: 100%;
    z-index: -1;
}

.title_bk {
    margin: 0 auto;
    width: calc((560/1440)*100vw);
    padding: calc((10/1440)*100vw);
    font-size: calc((48/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
}

.title_white_box {
    position: relative;
    top: calc((250/1440)*100vw);
}

.white_box {
    position: relative;
    background-color: #fff;
    width: calc((1000/1440)*100vw);
    border-radius: calc((10/1440)*100vw);
    margin: calc((-35/1440)*100vw) auto calc((450/1440)*100vw);
    padding: calc((100/1440)*100vw) 0;
    z-index: -1;
}

h5,
.white_box p {
    color: #171B2E;
}

hr {
    width: calc((50/1440)*100vw);
    border-bottom: calc((2.5/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
    margin-left: 0;
}

h5 {
    font-size: calc((24/1440)*100vw);
    text-align: center;
    line-height: calc((40/1440)*100vw);
}

h5 span {
    border-bottom: calc((3/1440)*100vw) solid;
    border-image: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-image-slice: 1;
}

.logo {
    display: flex;
    align-items: center;
    gap: calc((25/1440)*100vw);
    justify-content: center;
    margin: calc((55/1440)*100vw) auto;
}

.logo img {
    width: calc((385/1440)*100vw);
}

.cross {
    display: inline-block;
    vertical-align: middle;
    color: #171B2E;
    line-height: 1;
    width: calc((50/1440)*100vw);
    height: calc((8/1440)*100vw);
    background: currentColor;
    border-radius: calc((50/1440)*100vw);
    position: relative;
    transform: rotate(45deg);
}

.cross::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}

/*-------------人材育成の流れ-------------*/
.white_box_content {
    display: grid;
    gap: calc((25/1440)*100vw);
}

.flow_inr {
    width: calc((860/1440)*100vw);
    background-color: #e4e4e4;
    border-radius: calc((10/1440)*100vw);
    padding: calc((25/1440)*100vw) calc((30/1440)*100vw);
    margin: 0 auto;
}

.flow_inr_title {
    font-size: calc((18/1440)*100vw);
    font-weight: bold;
    line-height: calc((5/1440)*100vw);
}

.flow_inr_box {
    width: calc((760/1440)*100vw);
    margin: 0 auto;
}

.image_flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc((30/1440)*100vw) auto;
    width: calc((750/1440)*100vw);
}

.cybereason {
    width: calc((300/1440)*100vw);
}

.dli-arrow-right {
    display: flex;
    vertical-align: middle;
    color: #171B2E;
    line-height: 1;
    position: relative;
    width: calc((25/1440)*100vw);
    height: calc((15/1440)*100vw);
    background: currentColor;
}

.dli-arrow-right::after {
    content: "";
    vertical-align: middle;
    color: #171B2E;
    line-height: 1;
    border-style: solid;
    border-color: transparent;
    border-width: calc((15/1440)*100vw);
    border-left-color: currentColor;
    border-right: 0;
    position: absolute;
    top: calc((-7/1440)*100vw);
    right: calc((-10/1440)*100vw);
}

.arrow_img_box {
    display: flex;
    align-items: center;
    gap: calc((20/1440)*100vw);
}

.pink_round,
.blue_round {
    width: calc((160/1440)*100vw);
    height: calc((160/1440)*100vw);
    border-radius: 50%;
    text-align: center;
}

.pink_round {
    background-color: #F0A8F0;
}

.blue_round {
    background-color: #066FC8;
}

.pink_round img,
.blue_round img {
    width: calc((70/1440)*100vw);
    margin: calc((25/1440)*100vw) auto calc((10/1440)*100vw);
}

.pink_round p,
.blue_round p {
    color: #fff;
    font-size: calc((16/1440)*100vw);
}

.blue_round span {
    font-size: calc((10/1440)*100vw);
}

.arrow_box_inr {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.arrow_box {
    display: grid;
    position: relative;
    background: #FFFFFF;
    padding: calc((10/1440)*100vw) calc((20/1440)*100vw);
    text-align: center;
    border: calc((2/1440)*100vw) solid #171B2E;
    color: #171b2e;
    border-radius: calc((10/1440)*100vw);
    -webkit-border-radius: calc((6/1440)*100vw);
    -moz-border-radius: calc((6/1440)*100vw);
    left: calc((-60/1440)*100vw);
    place-items: center;
}

.arrow_box:nth-child(3) {
    left: calc((-4/1440)*100vw);
}

.arrow_box:after,
.arrow_box:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-width: calc((10/1440)*100vw);
    border-bottom-width: calc((10/1440)*100vw);
    border-left-width: calc((10/1440)*100vw);
    border-right-width: calc((10/1440)*100vw);
    margin-left: calc((-10/1440)*100vw);
    border-bottom-color: #FFFFFF;
}

.arrow_box:before {
    border-color: rgba(23, 27, 46, 0);
    border-top-width: calc((11/1440)*100vw);
    border-bottom-width: calc((11/1440)*100vw);
    border-left-width: calc((11/1440)*100vw);
    border-right-width: calc((11/1440)*100vw);
    margin-left: calc((-11/1440)*100vw);
    margin-bottom: calc((1/1440)*100vw);
    border-bottom-color: #171B2E;
}

.arrow_box_left:before {
    border-top-width: calc((11.3/1440)*100vw);
    border-bottom-width: calc((11.3/1440)*100vw);
    border-left-width: calc((11.3/1440)*100vw);
    border-right-width: calc((11.3/1440)*100vw);
    margin-left: calc((-11.3/1440)*100vw);
}


.arrow_box p {
    font-size: calc((13/1440)*100vw);
    line-height: calc((20/1440)*100vw);
}

.skill {
    text-align: right;
    margin-top: calc((10/1440)*100vw);
}

/*-------------取扱セキュリティ製品/保有資格-------------*/
.white_box_inr {
    margin: 0 auto;
    width: calc((916/1440)*100vw);
    padding: calc((2/1440)*100vw);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
    border-radius: calc((10/1440)*100vw);
}

.white_box_inr_bk {
    background-color: #fff;
    padding: calc((25/1440)*100vw) calc((30/1440)*100vw);
    border-radius: calc((8/1440)*100vw);
    width: calc((854/1440)*100vw);
}

/*-------------サイバーリーズン認定資格-------------*/
.four_content_box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc((50/1440)*100vw);
    justify-content: center;
    margin: calc((25/1440)*100vw) auto 0;
}

.support_box {
    width: calc((370/1440)*100vw);
}

.support_box_inr {
    display: flex;
    gap: calc((10/1440)*100vw);
}

.support_box_inr img {
    width: calc((105/1440)*100vw);
}

.support_img {
    margin-top: calc((-18/1440)*100vw);
}

.support_box_text p {
    font-size: calc((16/1440)*100vw);
    font-weight: bold;
    border-bottom: dashed calc((1/1440)*100vw) #171B2E;
    line-height: calc((20/1440)*100vw);
}

.support_box_inr ul {
    margin: calc((10/1440)*100vw) auto 0 calc((5/1440)*100vw);
}

.support_box_inr li {
    color: #171B2E;
    list-style: inside;
    line-height: calc((25/1440)*100vw);
    font-size: calc((16/1440)*100vw);
}

.support_li li {
    list-style: none;
}

.support_under_box {
    display: grid;
    place-items: center;
    background-color: #fff;
    border: solid calc((2/1440)*100vw) #171B2E;
    border-radius: calc((10/1440)*100vw);
    color: #171B2E;
    text-align: center;
    font-size: calc((16/1440)*100vw);
    line-height: calc((21/1440)*100vw);
    margin-top: calc((10/1440)*100vw);
    height: calc((65/1440)*100vw);
}


/*-------------セキュリティ研修内容-------------*/
.content_title span {
    font-size: calc((20/1440)*100vw);
}

.container {
    display: flex;
    justify-content: center;
    gap: calc((50/1440)*100vw);
    margin: calc((70/1440)*100vw) auto calc((50/1440)*100vw);
    align-items: baseline;
}

.hexagon_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((218/1440)*100vw);
    height: calc((190/1440)*100vw);
    clip-path: polygon(25% 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(150deg, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 79%, rgba(255, 160, 233, 1));
}

.hexagon_2 {
    width: calc((210/1440)*100vw);
    height: calc((185/1440)*100vw);
    clip-path: polygon(25% 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #171B2E;
    display: block;
}

.hexagon_inr {
    display: grid;
    justify-content: center;
    text-align: center;
}

.hexagon_inr p {
    font-size: calc((18/1440)*100vw);
    line-height: calc((20/1440)*100vw);
    font-family: "Quantico", sans-serif;
    margin: calc((10/1440)*100vw) auto min((30/1440)*100vw, 30px);
    font-weight: bold;
    display: inline-block;
    background: -webkit-linear-gradient(0, rgba(24, 131, 255, 1), rgba(138, 199, 255, 1) 57%, rgba(204, 188, 255, 1) 80%, rgba(255, 160, 233, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hexagon_inr img {
    width: min((105/1440)*100vw, 110px);
    height: min((105/1440)*100vw, 110px);
}

.hexagon_box p {
    font-size: clamp(15px, (16/1440)*100vw, 18px);
    text-align: center;
    line-height: max((20/1440)*100vw, 20px);
    margin-top: calc((15/1440)*100vw);
}

.hexagon_box {
    display: grid;
    flex-direction: column;
    place-items: center;
}

.security_content_study ul {
    display: flex;
    flex-direction: column;
    flex-wrap: inherit;
    margin: 0 auto;
    width: auto;
    height: auto;
    gap: calc((30/1440)*100vw);
    padding: calc((30/1440)*100vw) calc((42/1440)*100vw) calc((10/1440)*100vw);
}

.security_content_study {
    width: calc((550/1440)*100vw);
}

.security_content_study div {
    width: calc((546/1440)*100vw);
}

/*-------ボタン-------------*/
.last {
    margin: calc((200/1440)*100vw) auto;
    display: inline-block;
}


/*-------フッター-------------*/

footer {
    background-color: #fff;
    color: #171B2E;
    line-height: calc((20/1440)*100vw);
    font-size: calc((16/1440)*100vw);
    padding: calc((80/1440)*100vw) calc((120/1440)*100vw) calc((20/1440)*100vw);
}

.footer_logo_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_logo_nav p {
    margin: min((20/1440)*100vw, 20px) auto 0;
}

.footer_logo_nav img {
    width: calc((350/1440)*100vw);
}

.footer_logo_nav div {
    text-align: center;
}

.footer_logo_nav ul {
    display: flex;
    gap: calc((20/1440)*100vw);
    font-size: calc((16/1440)*100vw);
}

.footer_add_policy {
    display: flex;
    justify-content: space-between;
}

.address {
    margin-top: calc((50/1440)*100vw)
}
.address_title {
    font-size: calc((18/1440)*100vw);
    font-weight: bold;
}

.address_text {
    margin: calc((10/1440)*100vw) 0 0 calc((15/1440)*100vw);
}

.address_text a {
    font-size: calc((18/1440)*100vw);
    text-decoration: none;
    color: #171B2E;
    font-weight: bold;
}

.dli-pin {
    display: inline-block;
    vertical-align: middle;
    color: #171B2E;
    line-height: 1;
    position: relative;
    width: 1em;
    height: 1em;
    border: 1px solid currentColor;
    border-radius: 40% 60% 0% 100% / 40% 100% 0% 60%;
    box-sizing: content-box;
    transform: rotate(45deg);
    top: calc((-3/1440)*100vw);
}

.dli-pin::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 18%;
    width: 0.336em;
    height: 0.336em;
    border: 1px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.footer_policy {
    margin-top: max((35/1440)*100vw,20px);
}

.footer_policy ul {
    display: flex;
    justify-content: center;
    gap: calc((25/1440)*100vw);
    margin: 0 auto;
    text-align: left;
}

.footer_policy a {
    text-decoration: none;
    color: #171B2E;
    display: inline-block;
    transition: all .3s ease 0s;
    font-size: max((14/1440)*100vw,10px);
    line-height: calc((35/1440)*100vw);
    font-weight: normal;
}

.footer_policy li a:hover {
    cursor: pointer;
    color: #066FC8;
    transform: scale(1, 1);
}

.footer_copyright {
    margin-top: calc((100/1440)*100vw);
    display: flex;
    justify-content: center;
}

.footer_copyright-txt {
    line-height: 1;
}