@charset "UTF-8";

.alignment-section-title {
    margin-bottom: clamp(10px, calc(48 / 1440 * 100vw), 48px);
    font-size: clamp(10px, calc(40 / 1440 * 100vw), 40px);
    font-weight: 700;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    .alignment-section-title {
        margin-bottom: 32px;
        font-size: 24px;
    }
}

.cloud-alignment .alignment {
    padding: calc((40/393)*100vw) 0 calc((64/393)*100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment {
        padding: clamp(10px, calc(100 / 1440 * 100vw), 100px) 0;
    }
}
.cloud-alignment .alignment-ttl {
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-ttl {
        margin-bottom: clamp(10px, calc(56 / 1440 * 100vw), 56px);
    }
}
.cloud-alignment .alignment-ttl .caution{
    font-size: calc((24/750)*100vw);
    vertical-align: text-top;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-ttl .caution{
        font: var(--caption-sm-bold);
    }
}
.cloud-alignment .operation-wrap {
    position: relative;
    padding: calc((46/750)*100vw) calc((46/750)*100vw) calc((56/750)*100vw);
    border: solid #C7D8EF calc((4/750)*100vw);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap {
        padding: calc(22 / 393 * 100vw) calc(17 / 393 * 100vw);
        border-width: 3px;
    }
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        padding: clamp(10px, calc(54 / 1440 * 100vw), 54px) clamp(10px, calc(70 / 1440 * 100vw), 70px) clamp(10px, calc(62 / 1440 * 100vw), 62px);
        gap: clamp(10px, calc(40 / 1440 * 100vw), 40px);
        border: solid #C7D8EF 4px;
    }
}
.cloud-alignment .operation-wrap:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc( 46/ 750 * 100vw) calc( 42/ 750 * 100vw) 0 calc( 42/ 750 * 100vw);
    border-color:#C7D8EF transparent transparent transparent;
    bottom: calc((-46/750)*100vw);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.cloud-alignment .operation-wrap:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc( 42/ 750 * 100vw) calc( 38/ 750 * 100vw) 0 calc( 38/ 750 * 100vw);
    border-color:#FFF transparent transparent transparent;
    bottom: calc((-40/750)*100vw);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap:before {
        border-width: 36px 32px 0 32px;
        bottom: -36px;
    }
    .cloud-alignment .operation-wrap:after {
        border-width: 32px 28px 0 28px;
        bottom: -31px;
    }
}

.cloud-alignment .operation-wrap .ico-cross {
    position: absolute;
    top: clamp(10px, calc(169 / 1440 * 100vw), 169px);
    left: 50%;
    display: block;
    width: clamp(10px, calc(40 / 1440 * 100vw), 40px);
    height: clamp(10px, calc(40 / 1440 * 100vw), 40px);
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap .ico-cross {
        top: calc(293 / 393 * 100vw);
        width: calc(30 / 393 * 100vw);
        height: calc(30 / 393 * 100vw);
    }
}

.cloud-alignment .operation-wrap .ap-mttl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(40 / 393 * 100vw);
    margin-bottom: calc(16 / 393 * 100vw);
    font: var(--display-md-bold);
    background-color: #EDF6FF;
}
.cloud-alignment .operation-wrap .ap-mttl.--cloud {
    background-color: var(--ep-color-bg-accent);
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap .ap-mttl {
        height: clamp(10px, calc(48 / 1440 * 100vw), 48px);
        margin: 0 0 clamp(10px, calc(42 / 1440 * 100vw), 42px);
        font: var(--display-lg-bold);
        font-size: clamp(10px, calc(18 / 1440 * 100vw), var(--fz-lg));
    }
}

.cloud-alignment .operation-wrap .logo {
    width: calc((358/750)*100vw);
    margin: 0 auto calc((48/750)*100vw);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap .logo {
        width: calc((235/393)*100vw);
        margin: 0 auto calc((16/393)*100vw);
    }
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap .logo {
        width: clamp(10px, calc(400 / 1440 * 100vw), 400px);
        margin: 0 auto clamp(10px, calc(50 / 1440 * 100vw), 50px);
    }
}
.cloud-alignment .operation-wrap .cont-deep .logo {
    width: calc((543/750)*100vw);
    margin: 0 auto calc((26/750)*100vw);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap .cont-deep .logo {
        width: calc((235/393)*100vw);
        margin: 0 auto calc((16/393)*100vw);
    }
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap .cont-deep .logo {
        width: clamp(10px, calc(380 / 1440 * 100vw), 380px);
        margin: 0 auto clamp(10px, calc(48 / 1440 * 100vw), 48px);
    }
}

.cloud-alignment .operation-wrap .feature-list01 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: calc(6 / 393 * 100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap .feature-list01 {
        gap: clamp(5px, calc(10 / 1440 * 100vw), 10px);
    }
}

.cloud-alignment .operation-wrap .feature-list01 li {
    width: 100%;
    padding: 10px 0 12px;
    font: var(--caption-md-bold);
    text-align: center;
    color: var(--aurora-color);
    border: 1px solid var(--aurora-color);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap .feature-list01 li {
        padding: calc(10 / 393 * 100vw) 0 calc(12 / 393 * 100vw);
        font: var(--caption-sm-bold);
        font-size: calc(14 / 393 * 100vw);
    }
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-wrap .feature-list01 li {
        width: 100%;
        padding: clamp(5px, calc(10 / 1440 * 100vw), 10px) 0 clamp(5px, calc(11 / 1440 * 100vw), 11px);
        font: var(--body-lg-bold);
        font-size: clamp(10px, calc(18 / 1440 * 100vw), var(--fz-lg));
    }
}

@media screen and (max-width: 767px) {
    .cloud-alignment .operation-wrap .cont-protect {
        position: relative;
        margin-bottom: calc(62 / 393 * 100vw);
    }
}

.cloud-alignment .operation-wrap .cont-deep .deep-mttl {
    background: #FCE0E2;
}

.cloud-alignment .operation-wrap .cont-deep .feature-list01 li {
    border: #E6171C 1px solid;
    color: #E6171C;
}

.cloud-alignment .operation-wrap .cont-deep .feature-list02 li:before {
    background: #E6171C;
}

.cloud-alignment .alignment-subttl {
    margin-bottom: calc((12/393)*100vw);
    font: var(--display-2xl-bold);
    /*font-size: calc(24 / 393 * 100vw);*/
    text-align: center;
    color: var(--aurora-color);
    margin-top: calc((56/393)*100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-subttl {
        margin: clamp(10px, calc(80 / 1440 * 100vw), 80px) 0 clamp(10px, calc(32 / 1440 * 100vw), 32px);
        font: var(--display-4xl-bold);
        font-size: clamp(10px, calc(40 / 1440 * 100vw), var(--fz-4xl));
    }
}

.cloud-alignment .alignment-lead {
    font: var(--body-sm);
    /*font-size: calc((14/393)*100vw);*/
    text-align: center;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-lead {
        font: var(--body-lg);
        font-size: clamp(10px, calc(18 / 1440 * 100vw), var(--fz-lg));
    }
}

.cloud-alignment .alignment-lead .caution{
    font-size: calc((24/750)*100vw);
    vertical-align: text-top;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-lead .caution{
        font: var(--caption-sm);
    }
}

.cloud-alignment .alignment-blue-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc((355/393)*100vw);
    margin: 24px auto 16px;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-blue-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: clamp(10px, calc(50 / 1440 * 100vw), 50px) auto clamp(10px, calc(16 / 1440 * 100vw), 16px);
    }
}
.cloud-alignment .alignment-blue-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 65px;
    font: var(--body-lg-bold);
    text-align: center;
    color: var(--aurora-color);
    border: var(--aurora-color) 2px solid;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-blue-list li {
        height: 100px;
        font: var(--body-2xl-bold);
        font-size: clamp(10px, calc(24 / 1440 * 100vw), var(--fz-2xl));
    }
}

.cloud-alignment .alignment-cautionArea {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-cautionArea {
        gap: 2px;
    }
}
.cloud-alignment .alignment-caution {
    position: relative;
    font: var(--body-xs);
    color: var(--color-label-secondary);
}
@media screen and (max-width: 767px) {
    .cloud-alignment .alignment-caution {
        padding: 0 0 0 2em;
        text-indent: -2em;
    }
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-caution {
        text-align: right;
        font: var(--body-xs);
    }
}

.cloud-alignment .alignment-caution.caution_2{
    margin-bottom: 0;
    text-align: left;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .alignment-caution.caution_2{
        text-align: right;
    }
}

/* identification */
.cloud-alignment .identification{
    background-color: #EBF3FF;
    padding: calc((48/393)*100vw) 0 calc((64/393)*100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .identification{
        padding: clamp(10px, calc(100 / 1440 * 100vw), 100px) 0;
    }
}
.cloud-alignment .identification-ttl {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .identification .alignment-section-title {
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .identification-ttl {
        margin-bottom: clamp(10px, calc(48 / 1440 * 100vw), 48px);
    }
}

.identification-lead {
    margin: 0 0 clamp(10px, calc(61 / 1440 * 100vw), 61px);
    font: var(--display-lg);
    font-size: clamp(10px, calc(18 / 1440 * 100vw), var(--fz-lg));
    text-align: center;
}
@media screen and (max-width: 767px) {
    .identification-lead {
        margin-bottom: 32px;
        font: var(--body-sm);
    }
}

.identification-img {
    margin: 0 0 12px;
}

.identification-img-caption {
    font: var(--body-xs);
    color: var(--color-label-secondary);
}

/* management */
.cloud-alignment .management {
    padding: calc(32 / 393 * 100vw) 0 calc(64 / 393 * 100vw);
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .management {
        padding: clamp(10px, calc(100 / 1440 * 100vw), 100px) 0;
    }
}
.cloud-alignment .management-ttl {
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .management-ttl {

    }
}

.cloud-alignment .management-list{
    display: flex;
    margin: 0 0 48px;
}
@media screen and (max-width: 767px) {
    .cloud-alignment .management-list{
        flex-direction: column;
        gap: 32px;
    }
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list{
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        margin: 0 0 64px;
    }
}
.cloud-alignment .management-list .management-item{

}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .management-item{
        width: 73.03%;
    }
    .cloud-alignment .management-list .management-item:nth-child(2){
        width: 23.69%;
    }
}

.cloud-alignment .management-list .management-logo_l{
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 3px solid var(--ep-color-primary-lower);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .management-logo_l{
        margin: 0 auto 32px;
        padding: 0 0 24px;
        border-bottom-width: 4px;
    }
}

.cloud-alignment .management-list .management-logo_l img{
    width: 235px;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .management-logo_l img{
        width: clamp(10px, calc(282 / 1440 * 100vw), 282px);
    }
}

.cloud-alignment .management-list .management-logo_d{
    position: relative;
    text-align: center;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid #68A7E7;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .management-logo_d{
        margin: 4px auto 32px;
        padding: 0 0 28px;
        border-bottom-width: 4px;
    }
}

.cloud-alignment .management-list .management-logo_d img{
    width: 235px;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .management-logo_d img{
        width: clamp(10px, calc(276 / 1440 * 100vw), 276px);
    }
}

.cloud-alignment .management-list .list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }
}

.cloud-alignment .management-list .item{
    background-color: var(--ep-color-bg-accent);
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
    gap: calc(16 / 393 * 100vw);
    padding: calc(24 / 393 * 100vw);
}
.cloud-alignment .management-list .item:nth-last-child(1){
    margin-bottom: 0;
}
.cloud-alignment .management-list .item.b{
    background-color: #EDF6FF;
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .item{
        display: block;
        padding: 28px 0 32px;
    }
    .cloud-alignment .management-list .item:nth-last-child(1){
        margin-bottom: 0;
    }
}

.cloud-alignment .management-list .item-ttl{
    color: var(--ep-color-primary);
    text-align: left;
    font: var(--display-lg-bold);
    margin-bottom: 8px;
}
.cloud-alignment .management-list .item-ttl.b{
    color: var(--aurora-color);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .item-ttl{
        font: var(--display-2xl-bold);
        text-align: center;
    }
}
.cloud-alignment .management-list .item-txt{
    text-align: left;
    font: var(--body-base);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .item-txt{
        font: var(--body-lg);
        text-align: center;
    }
}
.cloud-alignment .management-list .item-img{
    display: block;
    width: calc(120 / 393 * 100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .management-list .item-img{
        width: 200px;
        margin: 24px auto 0;
    }
}

@media screen and (max-width: 767px) {
    .management .btn-common {
        justify-content: flex-start;
        height: 80px;
        padding: 0 0 0 calc(24 / 393 * 100vw);
        text-align: left;
    }
}
@media screen and (min-width: 768px), print {
    .management .btn-common {
        width: 580px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .management .btn-common:after {
        right: 24px;
    }

.cloud-alignment .operation-btn {
    text-align: center;
    margin-top: calc((50/750)*100vw);
}
@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-btn {
        margin-top: 50px;
    }
}
.cloud-alignment .operation-btn a {
    position: relative;
    font-size: calc((28/750)*100vw);
    display: inline-block;
    width: calc((600/750)*100vw);
    background: #FFF;
    padding: .6em 0;
    border: #009370 2px solid;
    color: #009370;
    font-weight: 700;
    text-align: center;
    line-height: 1.75;
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-btn a {
        width: 510px;
        padding: .5em;
        font-size: 24px;
    }
}

.cloud-alignment .operation-btn a:after {
    position: absolute;
    bottom: calc((5/750)*100vw);
    right: calc((5/750)*100vw);
    content: '';
    width: 0;
    height: 0;
    border: transparent calc((8/750)*100vw) solid;
    border-right: #009370 calc((8/750)*100vw) solid;
    border-bottom: #009370 calc((8/750)*100vw) solid;
}

@media only screen and (min-width: 768px) {
    .cloud-alignment .operation-btn a:after {
        bottom: 5px;
        right: 5px;
        border: transparent 8px solid;
        border-right: #009370 8px solid;
        border-bottom: #009370 8px solid;
    }
}

.cloud-alignment .operation-btn a:hover {
    opacity: .6;
    transition: .5s;
}