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

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

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

/* common */
.box-text p.sub {font-size: 16px;color:#373737;font-weight: 500;}
.box-text small {font-size: 16px;display: block;}
.box-text .box-sub {text-align: right;margin-top: 16px;}
.box-text .box-sub .small {font-weight: 500;}
.box-text .box-sub p {font-size: 20px;font-weight: 600;line-height: 140%;}

@media (max-width:734px) {
    .box-text .box-sub .small {font-size: 15px;}
    .box-text .box-sub p {font-size: 18px;}
    .box-text small {font-size: 15px;line-height: 160%;}
}

/* section01 */
.section01 {padding:60px 0 24px;margin:56px 0;}
.section01 .section-item {margin:64px 0;}
.section01 .layout01 .wrap-flex {align-items: center;gap:108px;justify-content: center;}
.section01 .layout01 .box-img {max-width:584px;}
.section01 .layout01 .box-text {max-width: 577px;}
.section01 .layout01 .box-caption {margin-top: 40px;}

@media(min-width:1101px) {
    .section01 .layout-inner {padding:0 6px}
    .section01 .layout01 .wrap-flex {justify-content: flex-start;}
    .section01 .layout01 .box-img {min-width: 200px;}
}

@media (max-width:1100px) {
    .section01 {padding:10px; margin:32px 0 24px;}
    .section01 .section-item {margin:24px 0}
    .section01 .layout01 .box-img {margin:12px 0;}
    .section01 .layout01 .box-text .m-spacing {padding:0 10px 0 28px;}
    .section01 .layout01 .box-caption {margin-top: 24px;}
}


/* section02 */
.section02 {margin:56px 0;}
.section02 .section-item {margin:56px 0}
.section02 .layout01 {display: flex;flex-direction: column;align-items: center;gap:40px}
.section02 .layout01 .box-text {max-width: 640px;}

.section02 .layout02 {display: flex;flex-direction: column;align-items: center;gap:40px}
.section02 .layout02 .wrap-text {display: flex;box-sizing: border-box;width: 100%;justify-content: center;}
.section02 .layout02 .box-text {max-width: 565px;}

@media(min-width:1101px) {
    .section02 .layout02 .wrap-text {justify-content: end;padding-right: 288px;}
}
@media (max-width:1100px) {
    .section02 {margin:24px 0;}
    .section02 .section-item {margin:24px 0}
}

@media (max-width:734px) {
    .section02 {margin:12px 0;}
    .section02 .layout01,
    .section02 .layout02 {gap:12px;}
    .section02 .layout02 .wrap-text {padding:0;}
}


/* layout04 */
.layout04 {display: flex;}
.layout04 .box-text {max-width: 575px;}
@media(min-width:1101px) {
    .layout04 .spacing-item {width:876px}
}
@media (max-width:1100px) {
    .layout04 .inner {display: grid;}
    .layout04 .inner .box-img {justify-self: flex-end;}
}

/* section03 */
.section03 {margin:56px 0;padding:48px;}
.section03 .section-inner {max-width: 1145px;margin:0 auto;display: flex;flex-wrap: wrap;}
.section03 .section-item {margin:16px 0}
.section03 .layout01 {display: flex;flex-direction: column;gap:30px;}

@media (max-width:1100px) {
    .section03 {margin:24px 0;padding:10px 10px 20px;}
    .section03 .section-inner {justify-content: center;}
}

@media(min-width:735px) {
    .section03 .box-img {max-width: 565px;}
}

@media (max-width:734px) {
    .section03 .layout01 {gap:12px;}
    .section03 .section-item {margin:12px 0}
    .section03 .box-text {padding:0 14px;}
}


/* section04 */
.section04 {margin:56px 0;}
@media (max-width:1100px) {
    .section04 {margin:24px 0;}
}