@import url('./page.css');

section.top-banner {background-image: -webkit-image-set(url('../images/life-plus-banner.png') 1x, url('../images/life-plus-banner@2x.png') 2x);
    background-image: image-set(url('../images/life-plus-banner.png') 1x, url('../images/life-plus-banner@2x.png') 2x);}
@media (max-width:734px) {
    section.top-banner {background-image: -webkit-image-set(url('../images/life-plus-banner-s.png') 1x, url('../images/life-plus-banner-s@2x.png') 2x);
        background-image: image-set(url('../images/life-plus-banner-s.png') 1x, url('../images/life-plus-banner-s@2x.png') 2x);}
}

section.more-content {background-image: -webkit-image-set(url('../images/together-esg-banner.png') 1x, url('../images/together-esg-banner@2x.png') 2x);
    background-image: image-set(url('../images/together-esg-banner.png') 1x, url('../images/together-esg-banner@2x.png') 2x);}
@media (max-width:734px) {
    section.more-content {background-image: -webkit-image-set(url('../images/together-esg-banner-s.png') 1x, url('../images/together-esg-banner-s@2x.png') 2x);
        background-image: image-set(url('../images/together-esg-banner-s.png') 1x, url('../images/together-esg-banner-s@2x.png') 2x);}
}

/* common */
.wrap-content section {margin:56px 0;}
.wrap-content section.bg-section {padding:48px;}
.wrap-content section .section-item {margin:64px 0;}
.wrap-content section h3 {margin-bottom: 16px;}

.box-link a {font-size: 16px;color:#373737;line-height: 168%;text-decoration: underline;position: relative;
    text-underline-position:from-font;opacity: 0.8;font-weight: 500;transition: opacity 0.3s;}
.box-link a::after {content: "";display: inline-block;margin-left: 1px;width:19px;height: 19px;vertical-align: middle;
    background: url('../images/arrow-link-gray@2x.png') no-repeat center / 100%;margin-top: -3px;}
.wrap-img .box-link {margin-top: 10px;padding:0 4px 0 20px;}

@media (max-width:1100px) {
    .box-img.small {width:50%;max-width: 300px;}
    .wrap-flex {flex-wrap: nowrap;flex-direction: column;}
    .wrap-flex > div:last-child {align-self: end;}
}

@media (min-width:1101px) {
    .reverse .box-link {text-align: right;}
}

@media (max-width:1100px) and (min-width:735px) {
    .wrap-flex {gap:16px!important;}
}

@media (min-width:735px) {
    .box-link a:hover {opacity: 1;}
}

@media (max-width:734px) {
    .wrap-content section {margin:24px 0;}
    .wrap-content section.bg-section {padding:10px;}
    .wrap-content section .section-item {margin:24px 0;}
    .wrap-content section h3 {margin-bottom: 8px;}

    .box-link a {font-size: 15px;}
    .wrap-img .box-link {margin-top: 6px;padding: 0 5px;}
}


/* section01 */
section.section01 .wrap-flex {justify-content: center;}
section.section01 h3 {text-align: center;font-size: 48px;margin-bottom: 43px;}
@media (max-width:734px) {
    section.section01 h3 {font-size: 20px;margin-bottom: 16px;}
}


/* section02 */
section.section02.bg-section {padding:60px 50px 50px;}
section.section02 h3 {margin-bottom: 50px;}
section.section02 .wrap-flex {gap:180px;align-items: center;justify-content: flex-start;}
section.section02 .section-item {margin:35px 0}
section.section02 .layout-inner {max-width: 1400px;}

@media (max-width:1400px) and (min-width:1101px) {
    section.section02 .wrap-flex {gap:5%;justify-content: space-between;}
}

@media (max-width:1100px) {
    section.section02 .section-item {margin:10px 0;}
    section.section02 .wrap-flex {align-items: flex-start;gap:16px}
    section.section02 .wrap-flex > div:last-child {align-self: flex-start;}
    section.section02 .wrap-img {margin:12px 0}
    section.section02 .box-img {width: 65%;}
    section.section02 .wrap-text {padding:0 10px 0 28px;max-width: 640px;box-sizing: border-box;}

    section.section02.reverse-mo .wrap-img {text-align: right;}
    section.section02.reverse-mo .wrap-img .box-img {margin-left: auto;}
    section.section02.reverse-mo .wrap-text {padding:0 10px;margin-left: auto;}

    section.section02.reverse-mo .wrap-flex > div:last-child {align-self: flex-end;}
}

@media (min-width:1101px) {
    section.section02.reverse h3 {text-align: right;}

}

@media (min-width:735px) {
    section.section02 .box-img {min-width: 400px;}
}

@media (max-width:734px) {
    section.section02.bg-section {padding:20px 10px 30px;}
    section.section02 h3 {margin-bottom: 12px;}
    section.section02 .section-item {margin:8px 0;}
    section.section02:not(.bg-section) p {padding-right: 8px;}
}


/* section03 */
section.section03 .layout-inner {max-width: 1440px;}
section.section03 .layout01 .wrap-flex {justify-content: flex-end;}

@media (min-width:735px) {
    section.section03 {padding:50px 24px;}
}

@media (max-width:734px) {
    section.section03 h3 {margin-bottom: 12px;}
}