#mainVisual{ width:100vw; max-height:100vH; background-color:#FFF; padding:0 !important; position:relative; z-index:1; transition:all 1s; margin-bottom:100vh; } #mainVisual > div{ max-width:100vw; min-width:1280px; width:auto; max-height:100vh; aspect-ratio: 1280/630; position:relative; margin-left:auto; margin-right:auto; overflow:hidden; } @media only screen and (max-width:1280px){ #mainVisual > div{ min-width:100%; } } @media only screen and (max-height:640px) and (orientation: landscape) and (min-width:1000px) { #mainVisual{ min-height:640px; max-height:max-content; } #mainVisual > div{ max-height:100%; max-width:1280px; } } #mainVisual img{ width:100%; } #main1{ position:relative; left:0%; top:0%; width:48%; line-height:0; } #main2{ position:absolute; left: 44%; top: 3%; width: 21%; line-height:0; } #main3{ position:absolute; left: 60%; top: 23%; width: 15%; line-height:0; } #main4{ position:absolute; left: 75%; top: 6%; width: 22%; line-height:0; } #mainTxt{ position:absolute; left: 19%; top: 54%; width: 81%; line-height:0; } @media only screen and (max-width:750px) and (orientation: portrait) { #mainVisual{ max-height:100vh; aspect-ratio: 570/675; } #mainVisual > div{ width:100%; height:100%; } #main1{ position:relative; left:0%; top:0%; width:100%; line-height:0; } #main1 img.pc, #main2 img, #main3 img, #main4 img{ display:none; } #mainTxt{ position:absolute; left: 0%; top:auto; bottom: 16vw; width: 97%; line-height:0; } } #mainVisual p img{ position: relative; z-index:1; opacity:0; transition:all 1s; } #mainVisual p img.visible{ opacity:1; }