@charset "UTF-8";

.contents-header__container{
    background-image: url("/assets/images/manage-dx/manage-dx_title-img_2896x816.webp");
    background-size: cover;
    background-position: center;
}

main {
    background-image: url("/assets/images/manage-dx/bg_map-dot_2324x2676.png");
    background-repeat: no-repeat;
    background-size: clamp(700px, 93vw, 1100px);
    pointer-events: none;
    margin-top: -400px;
    z-index: 2;
}

.manage__content-container {
    padding-top: 400px;
    padding-bottom: clamp(80px, 8.474vw, 100px);
    border-bottom: var(--color__light-gray) solid 1px;
}

.manage__content {
    margin-top: clamp(80px, 8.474vw, 100px);
}

.equipment__header-copyright {
    position: absolute;
    right: 10px;
    bottom:10px;
    font-size: 11px;
    color: var(--color__white);
    z-index: 3;
}

@media print, screen and (min-width: 1252px) {
    main {
        background-position: top 60px right calc(50% - 400px);
    }
}

@media print, screen and (min-width: 768px) and (max-width: 1251px) {
    main {
        background-position: top 120px right -100px;
        background-size: clamp(800px, 84.7vw, 1000px);
    }
}

@media screen and (max-width: 767px) {
    main {
        background-position: top 280px left calc(50% - 100px);
    }
}

@media screen and (max-width: 939px) {
    .equipment__header-copyright {
        color: var(--color__dark-gray);
    }
}

/* ----------------------------------------------
manage-dx outline
*/
.manage__ourline-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(80px, 11.864vw, 140px);
}
.manage__ourline-wrapper h2 span {
    display: block;
}
.manage__ourline-wrapper h2 span:last-child {
    margin-top: 14px;
    font-size: clamp(18px, 1.694vw, 20px);
    font-weight: 500;
    color:  var(--color__navy);
}

.manage__ourline-text {
    font-weight: 500;
}

@media print, screen and (min-width: 1252px) {
    .manage__ourline-wrapper h2 {
        width: 456px;
    }
    .manage__ourline-text {
        width: 560px;
        padding-top: 120px;
    }
}

@media print, screen and (min-width: 600px) and (max-width: 1251px) {
    .manage__content-container {
    padding-bottom: 40px;
    }
    .manage__ourline-wrapper {
        margin-bottom: 80px;
    }
    .manage__ourline-wrapper h2 {
        width: clamp(240px, 38.64vw, 456px);
    }
    .manage__ourline-text {
        width: calc(100% - clamp(290px, 43.22vw, 510px));
        max-width: 560px;
        margin-top: auto;
        font-size: 15px;
    }
}

@media screen and (max-width: 599px) {
    .manage__content-container {
    padding-bottom: 30px;
    }
    .manage__ourline-wrapper {
        flex-direction: column;
    }
    .manage__ourline-wrapper h2 {
        width: 280px;
        margin: 0 auto 60px;
    }
    .manage__ourline-text {
        font-size: 15px;
    }
}

/* ----------------------------------------------
econa location
*/

/* econa location outline ----- */

.manage__title-bar {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: var(--corner__s);
    overflow: hidden;
    margin-bottom: clamp(30px, 5.084vw, 60px);
}
.manage__title-bar span {
    display: flex;
    height: 50px;
    align-items: center;
    line-height: 1;
    font-weight: 700;
}
.manage__title-bar span.num {
    aspect-ratio: 1;
    justify-content: center;
    background-color: var(--color__navy);
    color: var(--color__white);
    font-size: 24px;
}
.manage__title-bar span.title {
    justify-content: flex-start;
    flex-grow: 1;
    padding-left: 20px;
    background-color: rgba(214, 214, 214, 0.4);
    font-size: clamp(20px, 2.033vw, 24px);
    line-height: 1;
    color: var(--color__navy);
}
.location__outline-wrapper {
    display: flex;
    justify-content: space-between;
    padding-bottom: clamp(70px, 10.169vw, 120px);
}
.location__title {
    color: var(--color__navy);
    font-weight: 700;
}
.location__title span,
.location__copy span {
    display: block;
}
.location__title span:first-child {
    font-size: clamp(16px, 1.694vw, 20px);
    line-height: 1.8;
    margin-bottom: 26px;
}
.location__title span:last-child {
    font-size: clamp(22px, 3.050vw, 36px);
}

.location__copy span:last-child {
    font-weight: 400;
}

@media print, screen and (min-width: 1252px) {
    .location__title {
        width: 500px;
    }
    .location__copy {
        width: 560px;
        margin-top: 120px;
    }
    .location__copy span:first-child {
        width: 266px;
        margin-left: auto;
        margin-bottom: 36px;
    }
}
@media screen and (min-width: 880px) and (max-width: 1251px) {
    .location__title {
        width: clamp(240px, 38.64vw, 456px);
    }
    .location__copy {
        width: calc(100% - clamp(290px, 43.22vw, 510px));
        margin-top: 50px;
    }
    .location__copy span:first-child {
        width: 266px;
        margin-left: auto;
        margin-bottom: 36px;
    }
}
@media screen and (min-width: 600px) and (max-width: 879px) {
    .location__outline-wrapper {
        flex-direction: column;
        position: relative;
    }
    .location__title {
        display: flex;
        justify-content: space-between;
    }
    .location__title span br {
        display: none;
    }
    .location__title span:first-child {
        width: clamp(240px, 38.64vw, 456px);
        margin-bottom: 6px;
    }
    .location__title span:last-child {
        width: calc(100% - clamp(290px, 43.22vw, 510px));
        line-height: 1;
        text-align: right;
    }
    .location__copy {
        width: 100%;
        margin-top: 100px;
        margin-left: auto;
    }
    .location__copy span:first-child {
        position: absolute;
        width: 270px;
        right: 0;
        top: 40px;
    }
}
@media screen and (max-width: 599px) {
    .location__outline-wrapper {
        flex-direction: column;
        padding-bottom: 40px;
    }
    .location__title span br {
        display: none;
    }
    .location__title span:last-child {
        width: 220px;
        margin: 0 auto 6px;
    }
    .location__copy span:first-child {
        width: 220px;
        margin: 0 auto 30px;
    }
}

/* econa location flow ----- */
.location__flow-wrapper ul {
    display: grid;
}
.location__flow {
    position: relative;
}
.location__flow-title .flow-num {
    display: flex;
    font-size: 24px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    color: var(--color__navy);
    background-color: var(--color__light-blue);
    border-radius: var(--corner__s);
}
.location__flow-title .flow-title {
    display: block;
    font-size: clamp(16px, 1.525vw, 17px);
    letter-spacing: 0em;
    font-weight: 700;
    color: var(--color__navy);
    line-height: 1.8;
}
.location__flow-image {
    display: block;
    border-radius: var(--corner__s);
}


@media print, screen and (min-width: 800px) {
    .location__flow-wrapper ul {
        display: grid;
        gap: clamp(40px, 6.779vw, 80px);
        grid-template-columns: repeat(3, 1fr);
    }
    .location__flow-title .flow-num {
        width: 44px;
        height: 44px;
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        top:-16px;
    }
    .location__flow-title .flow-title {
        padding-top: 60px;
        margin-bottom: 16px;
    }
    .location__flow-image {
    margin-bottom: clamp(20px, 2.542vw, 30px);
    }
    .flow-only-sp {
        display: none;
    }
}
@media screen and (min-width: 800px) and (max-width: 1251px) {
    .location__flow-title .flow-title {
        min-height: clamp(147px, 12.881vw, 152px);
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    .location__flow-wrapper ul {
        grid-template-columns: 1fr;
        border-top: var(--color__light-gray) 1px solid;
        padding-top: 40px;
    }
    .location__flow {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    .location__flow:not(:last-child) {
        border-bottom: var(--color__light-gray) 1px solid;
        padding-bottom: 40px;
    }
    .location__flow-title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        margin-bottom: 20px;
    }
    .location__flow-title .flow-num {
        width: 38px;
        height: 38px;
    }
    .location__flow-title .flow-title {
        width: calc(100% - 58px);
        line-height: 1.5;
    }
    .location__flow-image {
        width: 240px;
    }
    .location__flow-text {
        width: calc(100% - 270px);
        margin-left: 30px;
    }
    .flow-only-sp {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .location__flow-wrapper ul {
        grid-template-columns: 1fr;
        border-top: var(--color__light-gray) 1px solid;
        padding-top: 40px;
    }
    .location__flow {
        margin-bottom: 40px;
    }
    .location__flow:not(:last-child) {
        border-bottom: var(--color__light-gray) 1px solid;
        padding-bottom: 40px;
    }
    .location__flow-title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .location__flow-title .flow-num {
        width: 38px;
        height: 38px;
        margin-top: 6px;
    }
    .location__flow-title .flow-title {
        width: calc(100% - 58px);
        line-height: 1.5;
    }
    .location__flow-image {
        margin-bottom: 20px;
    }
    .location__flow-text {
        font-size: 15px;
    }
}

/* ----------------------------------------------
ending-container
*/

.manage__ending-container {
    padding-top: var(--ub_padding);
    padding-bottom: var(--ub_padding);
}
.manage__ending-illust {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(40px, 5.084vw, 60px);
}
.manage__ending-illust span,
.manage__ending-illust span img {
    height: 72px;
    width: auto;
}
.manage__ending-illust span:last-child {
    margin-left: 20px;
}
.manage__ending-copy {
    font-size: clamp(16px, 1.525vw, 18px);
    font-weight: 700;
    color: var(--color__navy);
}
.manage__ending-wrapper {
    padding-bottom: clamp(100px, 16.949vw, 200px);
}

.dx-news__wrapper {
pointer-events: all;
}

.manage__news-wrapper h4 {
    font-weight: 600;
    line-height: 1;
    margin-bottom: 24px;
    color: var(--color__navy);
}
.manage__news-list {
    border-top: var(--color__light-gray) solid 1px;
}

@media print, screen and (min-width: 768px) {
    .manage__ending-copy {
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .manage__ending-illust {
        flex-direction: column;
        align-items: center;
    }
    .manage__ending-illust span,
    .manage__ending-illust span img {
    height: clamp(60px, 9.387vw, 72px);
    width: auto;
    }
    
}