@charset "utf-8";

.main{ --inner-padding: .9375%; --radius: clamp(30rem, calc(100 / var(--inr) * 100vw), 100rem); padding-block: 2.6041667%; background: url('/images/main/bg.png') repeat-y 50% / 100%;
    &, .inr{ display: grid; gap: 70rem; }
    :where([class*="sec"]:not(.sec7, .sec8, .sec9)){ position: relative; display: grid; place-items: center; padding: var(--inner-padding); background: no-repeat 50% / cover; border-radius: var(--radius); }
    .sec1{ aspect-ratio: 1920/1080; background-image: url('/images/main/sec1-content.webp');  --inner-padding: 0; --radius: clamp(30rem, calc(100 / var(--inr) * 100vw), 100rem); padding-block: 0; }
    .sec2{ aspect-ratio: 1868/681; background-image: url('/images/main/sec2-content.webp');  --inner-padding: 0; --radius: clamp(30rem, calc(100 / var(--inr) * 100vw), 100rem); padding-block: 0;}
    /*.sec2::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/sec2-top.webp') no-repeat 50% / contain; pointer-events: none; }*/
    .sec3{ aspect-ratio: 1848/1622; background-image: url('/images/main/sec3-bg.webp'); }
    .sec4{ aspect-ratio: 1848/3146; background-image: url('/images/main/sec4-bg.webp'); }
    .sec5{ aspect-ratio: 1848/1369; background-image: url('/images/main/sec5-bg.webp'); }
    .sec6{ aspect-ratio: 1848/1927; background-image: url('/images/main/sec6-bg.webp'); }
    .img{ display: block; max-width: 100%; }
    @media(max-width:1620px){
        [class*="sec"]{ aspect-ratio: auto; }
    }
	@media(max-width:767px){
		&, .inr{ display: grid; gap: 10rem; }
	}
}

footer .img{ display: block; width: 100%; }