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

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

section.more-content {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.more-content {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);}
}

/* 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;}

@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 (max-width:1100px) and (min-width:735px) {
    .wrap-flex {gap:16px!important;}
}

@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;}
}

/* section01 */
section.section01 .section-item {margin:16px 0;}
section.section01 .layout-inner {max-width: 1441px;margin-left: 0;}
section.section01 .layout02 .wrap-flex {justify-content: flex-end;}
@media (max-width:734px) {
    section.section01 .section-item {margin:12px 0}
    section.section01 .box-text {padding-right: 8px;}
}

/* section02 */
.wrap-content section.section02 {padding:24px 48px;}
section.section02 .layout01 .wrap-flex {align-items: flex-start;justify-content: flex-start;gap:228px}
section.section02 .layout01 .box-img {width: 40%;}

section.section02 .layout02 .wrap-quot {margin-top: 20px;padding-bottom: 30px;}
section.section02 .layout02 .box-quot {background-color: rgba(255,255,255,0.6);padding:40px 20px 45px;border-radius: 24px;
    position: relative;font-size: 25px;line-height: 180%;color:#1f1c1d;font-weight: 600;display: inline-block;box-sizing: border-box;
    width: 100%;max-width: 750px;}
section.section02 .layout02 .box-quot::before,
section.section02 .layout02 .box-quot::after {content:"\201E";font-size: 100px;position: absolute;color:#a1c750;font-weight: 500;}
section.section02 .layout02 .box-quot::before {transform: rotate(180deg);top:20px;left:0;}
section.section02 .layout02 .box-quot::after {bottom:20px;right:0;}

section.section02 .layout03 .wrap-flex {align-items: flex-start;justify-content: flex-start;gap:158px}
section.section02 .layout03 .box-img {width: 45%;}

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

@media (min-width:1101px) {
    section.section02 .layout01 .box-text {margin-top: 177px;}
    section.section02 .layout03 .box-text {margin-top: 119px;}
}

@media (min-width:735px) {
    section.section02 .layout02 {text-align: center;}
}

@media (max-width:734px) {
    .wrap-content section.section02 {padding:10px 10px 30px}
    section.section02 .layout01 .box-img {width: 65%;}
    section.section02 .layout01 .box-text {padding: 0 10px 0 28px;}

    section.section02 .layout02 .wrap-quot {padding-bottom: 15px;}
    section.section02 .layout02 .box-quot {padding:12px 15px;font-size: 18px;line-height: 160%;}
    section.section02 .layout02 .box-quot::before,
    section.section02 .layout02 .box-quot::after {font-size: 70px;}
    section.section02 .layout02 .box-quot::before {top:12px;}
    section.section02 .layout02 .box-quot::after {bottom:12px;}

    section.section02 .layout03 .wrap-flex {flex-direction: column-reverse;}
    section.section02 .layout03 .box-img {width: 100%;}
    section.section02 .layout03 .box-text {padding: 0 18px 0 10px;}

    section.section02 .section-item .wrap-flex {gap: 16px;}
}

/* section03 */
section.section03 .layout01 .wrap-flex {justify-content: flex-end;}
section.section03 .layout02 .wrap-flex {justify-content: space-between;align-items: flex-start;gap:60px}

@media (min-width:1101px) {
    section.section03 .layout02 .box-text {margin-top: 191px;}
}

@media (min-width:735px) {
    section.section03 .layout-inner {margin-left: 24px;max-width: 1440px;}
}

@media (max-width:734px) {
    .wrap-content section.section03 .section-item {margin:12px 0;}
    section.section03 .layout02 .wrap-flex {gap:12px;}
    section.section03 .box-text {padding-right: 8px;}
}