@charset "utf-8";

.sub-page-top .sub-tit2 {line-height: 1.8;}
.sub-page-top .sub-tit3 {font-size: 1.5em; font-weight: 400; line-height: 1.5; overflow: hidden;}

.monitoring-wrap {margin-top: 100px; display: flex; align-items: center; justify-content: center; padding: 0 40px;}
.monitoring-wrap .monitoring-img {width: 100%; max-width: fit-content;}
.monitoring-wrap .monitoring-dot-img {margin: 0 62px 0 54px;}
.monitoring-wrap .monitoring-box {width: 100%; max-width: 420px; box-shadow: 0px 3px 6px rgba(0,0,0,0.1); border-radius: 30px;}
.monitoring-wrap .monitoring-box .box-top {background-color: #F7F7F7; display: flex; align-items: center; justify-content: center; border-radius: 30px 30px 0 0; padding: 28px 0;}
.monitoring-wrap .monitoring-box .box-top p {font-size: 1.5em; font-weight: 700; margin-left: 12px;}
.monitoring-wrap .monitoring-box .monitoring-txt {text-align: center; padding: 47px 0;}
.monitoring-wrap .monitoring-box .monitoring-txt p {font-size: 1.25em; font-weight: 500; line-height: 1.5;}
.monitoring-wrap .monitoring-box .monitoring-txt p + p {margin-top: 14px;}
.monitoring-wrap .monitoring-box .monitoring-txt p span {color: var(--color-blue); font-weight: 700;}

@media (max-width: 1280px) {
    .monitoring-wrap {flex-direction: column;}
    .monitoring-wrap .monitoring-dot-img {margin: 90px 0 75px;}
    .monitoring-wrap .monitoring-box {max-width: 656px;}
}

@media (max-width: 768px) {
    .sub-page-top .sub-tit3 {font-size: 1.125em;}
    .monitoring-wrap {padding: 0 20px; margin-top: 50px;}
    .monitoring-wrap .monitoring-dot-img {margin: 60px 0 50px;}
    .monitoring-wrap .monitoring-box .box-top {padding: 24px 0;}
    .monitoring-wrap .monitoring-box .box-top p {font-size: 1.5em;}
    .monitoring-wrap .monitoring-box .monitoring-txt {padding: 40px 0;}
}