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

section.top-banner {background-image: url('../images/kiumi-and-banner-L.png');}
@media (max-width:734px) {
    section.top-banner {background-image: url('../images/kiumi-and-banner-s.png');}
}

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

section.video {margin: 80px 0;}
section.video .box-video {max-width: 1400px;border-radius: 24px;overflow: hidden;margin:0 auto;}
section.video video {width: 100%;display: block;}

@media (max-width:734px) {
    section.video .box-video {border-radius: 8px;}
    section.video {margin: 32px 0 24px}
}

section.layout01 {background: #F4EDD1;border-radius: 32px;margin:56px 0;padding:56px 50px;}
section.layout01 .inner {max-width: 1408px;margin: 0 auto;}
section.layout01 h3 {font-size: 40px;color:#1f1c1d;font-weight: 600;line-height: 130%;}
section.layout01 h3 span.serif {font-size: 24px;font-weight: 700;color:#373737;letter-spacing: -0.48px;line-height: 180%;}
section.layout01 .box-content {margin-top: 24px;}
section.layout01 .image {max-width: 700px;border-radius: 24px;overflow: hidden;}
section.layout01 .desc {font-size: 18px;font-weight: 500;line-height: 168%;}

@media(min-width:735px) {
    section.layout01 .box-content {display: flex;flex-direction: row-reverse;justify-content: space-between;gap:30px;align-items: flex-start;}
    section.layout01 h3 {max-width: 591px;}
    section.layout01 h3:not(.no-spacing) {position: relative;padding-left: 50px;}
    section.layout01 h3 span.serif {position: absolute;left:0;top:0;}
    section.layout01 .desc {max-width: 512px;}
}

@media (max-width:734px) {
    section.layout01 {border-radius: 16px;margin:24px 0;padding:16px 10px 30px;}
    section.layout01 h3 {font-size: 20px;}
    section.layout01 h3 span.serif {font-size: 16px;line-height: 130%;margin-bottom: 4px;display: block;}
    section.layout01 .box-content {margin-top: 12px;}
    section.layout01 .image {border-radius: 12px;}
    section.layout01 .desc {font-size: 15px;margin-top:12px;}
}

section.layout02 {background: #FBE5E9;border-radius: 32px;margin:56px 0;padding:48px 50px;}
section.layout02 .inner {max-width: 1145px;margin:0 auto;}
section.layout02 .box-img {border-radius: 24px;overflow: hidden;margin-bottom: 16px;}
section.layout02 .box-text .title {font-size: 20px;color:#1f1c1d;font-weight: 600;}
section.layout02 .box-text .desc {max-width: 640px;font-size: 16px;font-weight: 500;line-height: 168%;color:#373737;margin-top: 4px;}

@media(min-width:735px) {
    section.layout02 .box-img {max-width: 565px;}
    section.layout02 .box-text {display: flex;justify-content: flex-end;}
}

@media (max-width:734px) {
    section.layout02 {border-radius: 16px;margin:24px 0;padding:10px 10px 40px;}
    section.layout02 .box-img {margin-bottom: 12px;border-radius: 12px;}
    section.layout02 .box-text {padding:0 24px;}
    section.layout02 .box-text .desc {margin-top:2px;}
}