@charset "UTF-8";
/*
各キャンペーンページのheadで読み込んで色を変更してください。
:root {
    --primaryColor: #e04b08;
    --hoverColor: #e04b08;
    --mainImage: url("/jp/images/service/main_img_service.png");
}
*/
/**************************
 COMMON
**************************/
.inner {
    box-sizing: content-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 3%;
}
.h2-ttl {
    font-size: 200%;
    margin: 2.5em 0 1.3em;
}
.section-ttl {
    font-size: 271.42%;
    line-height: 1.27;
    margin-bottom: 15px;
    text-align: center;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: block;
}
.clearfix:after {
    clear: both;
}
@media only screen and (max-width: 1024px) {
	.pc-line-break{
		display: none;
	}
}
/**************************
 TOP
**************************/
/* header {
    margin-bottom: 0;
}
.global-nav {
}
footer {
    margin-top: 0;
}
.breadcrumb {
    padding-bottom: 15px;
}
.service-top .breadcrumb {
    margin-top: -40px;
} */

.service-wrapper {
    background: var(--mainImage) no-repeat center top;
    background-size: 100% auto;
}
@media only screen and (min-width: 1750px) {
    .service-wrapper {
        background-position: center -50px !important;
    }
}

.service-top .main-ttl-box {
    margin-bottom: 40px;
    height: 420px;
}

.service-top .main-ttl-box .main-txt {
    font-size: 178.57%;
    text-shadow: 1px 1px 3px #FFF;
    color: #000;
}
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .service-top .main-ttl-box .main-txt {
        line-height: 1.4;
        font-size: 135.71%;
    }
}
.service-top .main-ttl-box .summary {
    font-weight: bold;
    margin-top: 0.5em;
    text-shadow: 0px 0px 5px #FFF;
}

/* MAIN TTL BOX */
.main-ttl-box {
    text-align: center;
    height: 480px;
    width: 100%;
    display: table;
}
.main-ttl-box h1 {
    padding-bottom: 170px;
}
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .main-ttl-box h1 {
        padding-bottom: 27px;
    }
}
/* main-img
--------------------------------------------------------------*/
.service-agss-wrapper,
.service-adss-wrapper,
.service-avss-wrapper,
.service-aw-wrapper {
    margin-top: -100px;
}
.service-agss-wrapper .main-ttl-box {
    background: url("/jp/images/service/main_img_agss.png") center bottom no-repeat #fff;
}
.service-adss-wrapper .main-ttl-box {
    background: url("/jp/images/service/main_img_adss.png") center bottom no-repeat #fff;
}
.service-avss-wrapper .main-ttl-box {
    background: url("/jp/images/service/main_img_avss.png") center bottom no-repeat #fff;
}
.service-aw-wrapper .main-ttl-box {
    background: url("/jp/images/service/main_img_aw.png") center bottom no-repeat #fff;
}
.service-office-wrapper { 
    background: var(--mainImage) no-repeat top center / contain;
    /* margin-top: -100px; */
}
/*------------------------------------ media */
@media screen and (max-width: 1024px) {
    .service-office-wrapper {
        padding-top: calc(20px + 100vw * 240 / 1366);
        margin-top: 0;
    }
}

/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .main-ttl-box {
        height: 270px;
    }
    .service-top .main-ttl-box {
        height: 340px;
    }
    .service-agss-wrapper .main-ttl-box,
    .service-adss-wrapper .main-ttl-box,
    .service-avss-wrapper .main-ttl-box,
    .service-aw-wrapper .main-ttl-box {
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

.main-ttl-box .main-ttl-inner {
    display: table-cell;
    vertical-align: bottom;
}
.service-box .sub-txt {
    font-size: 280%;
    display: block;
    margin-top: 10px;
    margin-bottom: 90px;
    text-align: center;
}
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .service-box .sub-txt {
        margin-bottom: 20px;
    }
}

.service-wrapper .main-ttl-box {
    text-align: center;
    margin-top: -32px;
    padding-bottom: 25px;
    /*height: 360px;*/
    width: 100%;
    display: table;
}
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .service-wrapper .main-ttl-box {
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}
.service-wrapper {
    padding-top: 100px;
    margin-top: -100px;
}
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .service-wrapper {
        padding-top: 0;
        margin-top: 0;
    }
}
.service-wrapper .main-ttl-box h1 {
    padding-bottom: 0;
}

.service-wrapper .main-ttl-box .main-ttl-inner {
    display: table-cell;
    vertical-align: bottom;
}
.service-wrapper .main-ttl-box .main-ttl {
    font-size: 178.57%;
    text-shadow: 1px 1px 3px #FFF;
    color: #000;
}
.service-wrapper .main-ttl-box .sub-txt {
    font-size: 110%;
    color: #333;
    font-weight: bold;
    line-height: 1.7;
    display: block;
    text-shadow: none;
}

.service-office-wrapper .global-nav{
    background-color: #f8f8f8;
}

/* SERVICE
**************************/
.service-box {
    /*padding: 100px 0 100px;*/
}
.service-agss-wrapper .service-box,
.service-avss-wrapper .service-box,
.service-adss-wrapper .service-box,
.service-aw-wrapper .service-box {
    padding: 15px 0 100px;
}
.service-box .col2-wrapper {
    width: 100%;
    padding: 0;
    margin: 100px 0 10px;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 100px 0;
}
.service-box .link-btn {
    display: block;
    width: 100%;
    padding: 20px 0 80px;
}
.service-box .link-btn a {
    display: block;
    padding: 25px 42px;
}
.service-box .link-btn span {
    display: block;
    font-size: 230%;
    line-height: 1.7;
}
.service-box .link-btn .small-txt {
    font-size: 120%;
}

/* TOP
**************************/
.service-wrapper .service-box dl {
    font-size: 90%;
    text-align: center;
}
.service-wrapper .service-box dl a {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: center;
}
.service-wrapper .service-box dd {
    margin-top: 8px;
}

/* Active! gate SS
**************************/
.service-agss-wrapper .service-box .link-btn a {
    background-color: #dec14e;
    border-color: #dec14e;
}

/* Active! vault SS
**************************/
.service-avss-wrapper .service-box .link-btn a {
    background-color: #9ccc58;
    border-color: #9ccc58;
}

/* Active! drive SS
**************************/
.service-adss-wrapper .service-box .link-btn a {
    background-color: #4567ad;
    border-color: #4567ad;
}

/* Active! world
**************************/
.service-aw-wrapper .service-box .link-btn a {
    background-color: #cb514a;
    border-color: #cb514a;
}

/* Microsoft 365 / Google apps
**************************/
.service-office-wrapper .service-box {
    padding-top: 20%;
    padding-bottom: 65px;
}
/* .service-ga-wrapper .service-box {
    padding-bottom: 56px;
} */
.service-office-wrapper .service-box .section-ttl {
    margin-bottom: 10px;
    text-align: left;
}
.service-office-wrapper .section-sub-ttl {
    display: block;
    font-size: 40%;
    line-height: 2;
}
.service-office-wrapper .service-box .col2-wrapper {
    padding-top: 0;
}
.service-office-wrapper .service-box .col2-box {
    width: 55%;
    float: left;
}
.service-office-wrapper .service-box .col2-box:nth-child(2n) {
    width: 45%;
    text-align: right;
}
.section-ttl-img img {
    margin-top: -65px;
    margin-left: 35px;
}
/* .service-ga-wrapper .section-ttl-img img {
    margin-top: -50px;
} */
/*------------------------------------ media */
@media screen and ( max-width: 1024px ){
    .section-ttl-img img {
        margin-top: 0;
        margin-left: 0;
    }
}

.lead {
    display: flex;
    margin: 100px 0 0;
}
.lead img {
    margin: 0 0 0 50px;
}
@media screen and (max-width: 1024px) {
    .lead {
        display: block;
        margin: 20px 0 0;
    }
    .lead img {
        display: block;
        margin: 20px 0 0;
        max-width: 100%;
    }
}

/* SECURITY
**************************/
.security-box {
    margin-bottom: 0;
    padding: 100px 0 160px;
    background: #f8f8f8;
    text-align: center;
}
.security-box .section-txt {
    padding-bottom: 30px;
}

/* QUESTION
**************************/
.question-box {
    padding: 0 0 110px;
}
.question-box section {
    padding-bottom: 85px;
}
.question-box .h2-ttl {
    margin: 2.5em 0 0.7em;
    padding-left: 1.9em;
    text-indent: -1.9em;
}
.question-box .question {
    color: var(--primaryColor);
}
.question-box .answer-ttl {
    font-weight: bold;
}
.question-box .answer {
    font-size: 200%;
    font-weight: normal;
    color: #bababa;
}
.question-box .answer-txt {
    padding-bottom: 1em;
    line-height: 1.8;
}

.question-box .question-tbl {
    margin-top: 57px;
}
.question-box .question-tbl caption {
    padding: 0.3em;
    font-size: 90%;
    font-weight: bold;
    text-align: left;
}
.question-box .question-tbl tr {
    border-top: 1px solid #ddd;
}
.question-box .question-tbl th {
    padding: 15px 0;
    border-right: 1px dotted #ddd;
    font-size: 90%;
    line-height: 1.5;
    font-weight: bold;
    vertical-align: middle;
}
.question-box .question-tbl td {
    padding: 19px 0;
    border-right: 1px dotted #ddd;
}
.question-box .question-tbl thead tr {
    border-bottom: 3px solid #ddd;
}
.question-box .question-tbl thead th {
    background-color: #f8f8f8;
}
.question-box .question-tbl tbody th {
    width: 25%;
    padding-left: 5px;
    text-align: left;
}
.question-box .question-tbl tbody td {
    width: 15%;
    text-align: center;
}
.question-box .question-tbl tbody .note {
    padding: 5px 0;
    border-right: none;
    font-size: 90%;
    text-align: left;
}

.question-box .col2-wrapper {
    width: 100%;
    margin: 45px 0 20px;
}
.question-box .col2-wrapper .col2-box {
    width: 49%;
    float: left;
}
.question-box .col2-wrapper .col2-box:nth-child(2n) {
    float: right;
}
.question-box .col2-wrapper .agss-link {
    background-color: #e6bd4d;
    text-align: center;
}
.question-box .col2-wrapper .avss-link {
    background-color: #9ccc58;
    text-align: center;
}
.question-box .col2-wrapper .agss-link a,
.question-box .col2-wrapper .avss-link a {
    display: block;
    padding: 2em;
    color: #fff;
}
.question-box .col2-wrapper .agss-link span,
.question-box .col2-wrapper .avss-link span {
    display: block;
    padding-bottom: 1em;
}
.question-box .col2-wrapper .agss-link .link-ttl,
.question-box .col2-wrapper .avss-link .link-ttl {
    font-size: 110%;
    padding-bottom: 0;
}


/**************************************
MEDIA QUERY SP
***************************************/
@media only screen and (max-width: 1024px) {
    /* MAIN TTL BOX */
    .main-ttl-box .main-ttl-inner,
    .service-wrapper .main-ttl-box .main-ttl-inner {
        padding: 0px 3% 10px;
    }
    .main-ttl-box .sub-txt,
    .service-wrapper .main-ttl-box .main-ttl {
        font-size: 171.42%;
        line-height: 1.4;
    }
    .service-wrapper .main-ttl-box .sub-txt {
        font-size: 100%;
        line-height: 1.4;
    }
    .service-office-wrapper .section-sub-ttl{
        font-size: 80%;
        line-height: 1.4;
    }

    /* SERVICE
    **************************/
    .service-box {
        padding: 0;
        margin: 0;
    }
    .service-box .col2-wrapper {
        padding: 0;
        margin: 0;
        display: block;
    }
    .service-box dl {
        padding: 20px 0;
    }
    .service-wrapper .service-box dl a {
        display: block;
        height: auto;
    }
    .service-box dl img {
        zoom: 0.8;
    }
    .service-box .link-btn {
        padding: 20px 0;
    }
    .service-box .link-btn span {
        font-size: 120%;
        line-height: 1.4;
    }
    .service-box .link-btn .small-txt {
        font-size: 90%;
    }

    .service-office-wrapper .service-box{
        padding-top: 0;
    }
    .service-office-wrapper .service-box .col2-box,
    .service-office-wrapper .service-box .col2-box:nth-child(2n){
        width: 100%;
        float: none;
        text-align: left;
    }

    /* SECURITY
    **************************/
    .security-box.section-box:last-of-type {
        margin-bottom: 0;
        padding: 50px 0;
    }
    .security-box .section-txt {
        text-align: left;
    }

    /* QUESTION
    **************************/
    .question-box section {
        padding-bottom: 20px;
    }
    .question-box .answer {
        font-size: 142.85%;
    }
    .question-box .col2-wrapper .col2-box,
    .question-box .col2-wrapper .col2-box:nth-child(2n) {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    .question-box .col2-wrapper .agss-link a,
    .question-box .col2-wrapper .avss-link a {
        padding: 1em;
    }
    .question-box .col2-wrapper .agss-link .link-ttl,
    .question-box .col2-wrapper .avss-link .link-ttl {
        font-size: 110%;
    }
}

/* CATEGORY PAGE LINK */
.category-page-link {
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.category-page-link li {
    display: inline-block;
    vertical-align: top;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    font-size: 85.71%;
}
.category-page-link li a {
    color: #000;
    display: block;
    height: 100%;
    padding: 26px 45px;
}
.category-page-link .current {
    border-color: #f82faa;
    padding: 26px 45px;
}
.category-page-link li a {
    height: 96px;
    padding: 26px 35px;
}

.img-box {
    text-align: center;
}
.zoom-link {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
}
.zoom-link a {
    display: inline-block;
    padding-left: 20px;
    background: url("/jp/common/images/icon_zoom_pink.png") no-repeat left center;
}