@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Noto+Sans+JP:wght@100..900&display=swap'); /* * { outline: 2px solid blue; } */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html { font-family: "Noto Sans JP", serif; background-color: #F3F4F6; } .pc { display: block !important; margin: 0 auto; } .sp { display: none !important; } .section1 { background-image: url(../img/section1/section1_bg2.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; } .section1-title { width: 750px; margin: 0 auto; } .section1-text1bg { width: 768px; text-align: center; margin: 0 auto; } .section1-text1 { position: absolute; top: 170px; left: 125px; } .section1-text2bg { width: 768px; } .section1-text1 p { font-size: 40px; font-weight: 900; color: #fff; text-shadow: 3px 3px 1px #000000 } .section1-text2 { position: absolute; top: 445px; left: 122px; } .section1-text2 p { font-size: 30px; font-weight: 900; color: #000; text-align: center; line-height: 1.7; } .height{ line-height: 0.6; } .red { color: #FD0002; font-size: 55px; } .liner { background: linear-gradient(transparent 70%, #fafe00 70%); } .tier-zu { margin: 0 auto; width: 758px; padding-left: 30px; } .tier-hukidashi { position: absolute; top: 935px; width: 300px; } .tier-example { margin: 0 auto; padding-top: 50px; padding-bottom: 50px; width: 750px; } .section2 { background-image: url(../img/section2/section2_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; } .section2-title { width: 750px; margin: 0 auto; } .section2-sp { position: relative; height: 3200px; } .section2-pc { position: relative; height: 1750px; } .section2-hukidasi1 { position: absolute; top: 200px; width: 600px; } .section2-emphasis-line1 { position: absolute; top: 150px; width: 100px; right: 140px; } .section2-emphasis-line2 { position: absolute; top: 220px; width: 100px; right: 120px; } .section2-yellow-star { position: absolute; width: 50px; top: 160px; right: 60px; } .section2-ktkr1 { position: absolute; width: 250px; top: 300px; right: 15px; } .ts { text-shadow: 1px 5px #000, 1px -5px #000, -1px 5px #000, -1px -5px #000, 2px 4px #000, 2px -4px #000, -2px 4px #000, -2px -4px #000, 3px 3px #000, 3px -3px #000, -3px 3px #000, -3px -3px #000, 4px 2px #000, 4px -2px #000, -4px 2px #000, -4px -2px #000, 5px 1px #000, 5px -1px #000, -5px 1px #000, -5px -1px #000, 2px 6px #fff, 2px -6px #fff, -2px 6px #fff, -2px -6px #fff, 3px 5px #fff, 3px -5px #fff, -3px 5px #fff, -3px -5px #fff, 4px 4px #fff, 4px -4px #fff, -4px 4px #fff, -4px -4px #fff, 5px 3px #fff, 5px -3px #fff, -5px 3px #fff, -5px -3px #fff, 6px 2px #fff, 6px -2px #fff, -6px 2px #fff, -6px -2px #fff; } .fs { font-size: 40px; color: #fff; font-weight: 900; } .section2-text1 { position: absolute; top: 580px; left: 30px; } .sp1-img { position: absolute; top: 720px; left: 109px; width: 550px; } .is { box-shadow: 7px 7px 2px #000000; border: solid 2px #000000; } .section2-text2 { position: absolute; top: 1850px; left: 30px; } .sp2-img { position: absolute; top: 2000px; left: 109px; width: 550px; } .section2-text3 { position: absolute; top: 3130px; left: 30px; } .section2-hukidasi2 { position: absolute; top: 200px; width: 600px; } .pc1-img { position: absolute; top: 720px; left: 24px; width: 720px; } .section2-pctext2 { position: absolute; top: 1110px; left: 30px; } .pc2-img { position: absolute; top: 1250px; left: 24px; width: 720px; } .section2-pctext3 { position: absolute; top: 1540px; left: 30px; } .section3 { background-image: url(../img/section3/section3_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; height: 1120px; } .section3-title { width: 750px; margin: 0 auto; } .section3-hukidashi { position: absolute; width: 500px; top: 170px; left: 20px; } .section3-emphasis-line1 { position: absolute; top: 140px; width: 120px; right: 160px; } .section3-emphasis-line2 { position: absolute; top: 220px; width: 120px; right: 130px; } .section3-text { position: absolute; font-size: 36px; color: #000; font-weight: 900; top: 245px; left: 85px; } .section3-bomb { position: absolute; width: 180px; top: 270px; right: 20px; } .section3-yellowstar { position: absolute; width: 50px; top: 500px; left: 270px; } .section3-bluestar { position: absolute; width: 80px; top: 600px; left: 200px; } .section3-purplestar { position: absolute; width: 60px; top: 520px; left: 80px; } .section3-mic { position: absolute; width: 171px; top: 620px; left: 50px; } .section3-pinkchonchon { position: absolute; width: 148px; top: 750px; left: 250px; } .section3-ktkr-rocket { position: absolute; width: 400px; top: 400px; left: 365px; } .appollo-link-btn { position: absolute; width: 620px; top: 960px; left: 74px; } @media screen and (min-width:768px) { #wrapper { max-width: 768px; margin: 0 auto; } } @media screen and (max-width:768px) { .sp { display: block !important; } .pc { display: none !important; } .section1-text1bg { width: calc(768 / 768 * 100vw); text-align: center; margin: 0 auto; } .section1-text1 { top: calc(170 / 768 * 100vw); left: calc(125 / 768 * 100vw); } .section1-text1 p { font-size: calc(40 / 768 * 100vw); text-shadow: 3px 3px 1px #000000 } .section1-title { width: calc(750 / 768 * 100vw); } .section1-text2 { top: calc(445 / 768 * 100vw); left: calc(122 / 768 * 100vw); } .section1-text2bg { width: calc(768 / 768 * 100vw); } .section1-text2 p { font-size: calc(30 / 768 * 100vw); } .red { font-size: calc(50 / 768 * 100vw); } .tier-zu { margin: 0 auto; width: calc(758 / 768 * 100vw); padding-left: calc(30 / 768 * 100vw); } .tier-hukidashi { top: calc(935 / 768 * 100vw); width: calc(300 / 768 * 100vw); } .tier-example { margin: 0 auto; padding-top: calc(50 / 768 * 100vw); padding-bottom: calc(50 / 768 * 100vw); width: calc(750 / 768 * 100vw); } .section2-title { width: calc(750 / 768 * 100vw); } .section2-sp { position: relative; height: calc(3200 / 768 * 100vw); } .section2-pc { position: relative; height: calc(1750 / 768 * 100vw); } .section2-hukidasi1 { top: calc(200 / 768 * 100vw); width: calc(600 / 768 * 100vw); } .section2-emphasis-line1 { top: calc(150 / 768 * 100vw); width: calc(100 / 768 * 100vw); right: calc(140 / 768 * 100vw); } .section2-emphasis-line2 { top: calc(220 / 768 * 100vw); width: calc(100 / 768 * 100vw); right: calc(120 / 768 * 100vw); } .section2-yellow-star { width: calc(50 / 768 * 100vw); top: calc(160 / 768 * 100vw); right: calc(60 / 768 * 100vw); } .section2-ktkr1 { width: calc(250 / 768 * 100vw); top: calc(300 / 768 * 100vw); right: calc(15 / 768 * 100vw); } .fs { font-size: calc(40 / 768 * 100vw); } .section2-text1 { top: calc(580 / 768 * 100vw); left: calc(30 / 768 * 100vw); } .sp1-img { top: calc(720 / 768 * 100vw); left: calc(109 / 768 * 100vw); width: calc(550 / 768 * 100vw); } .is { box-shadow: 7px 7px 2px #000000; border: solid 2px #000000; } .section2-text2 { top: calc(1850 / 768 * 100vw); left: calc(30 / 768 * 100vw); } .sp2-img { top: calc(2000 / 768 * 100vw); left: calc(109 / 768 * 100vw); width: calc(550 / 768 * 100vw); } .section2-text3 { top: calc(3130 / 768 * 100vw); left: calc(30 / 768 * 100vw); } .section2-hukidasi2 { top: calc(200 / 768 * 100vw); width: calc(600 / 768 * 100vw); } .pc1-img { top: calc(720 / 768 * 100vw); left: calc(24 / 768 * 100vw); width: calc(720 / 768 * 100vw); } .section2-pctext2 { top: calc(1110 / 768 * 100vw); left: calc(30 / 768 * 100vw); } .pc2-img { top: calc(1250 / 768 * 100vw); left: calc(24 / 768 * 100vw); width: calc(720 / 768 * 100vw); } .section2-pctext3 { top: calc(1540 / 768 * 100vw); left: calc(30 / 768 * 100vw); } .section3 { height: calc(1120 / 768 * 100vw); } .section3-title { width: calc(750 / 768 * 100vw); } .section3-hukidashi { width: calc(500 / 768 * 100vw); top: calc(170 / 768 * 100vw); left: calc(20 / 768 * 100vw); } .section3-emphasis-line1 { top: calc(140 / 768 * 100vw); width: calc(120 / 768 * 100vw); right: calc(160 / 768 * 100vw); } .section3-emphasis-line2 { top: calc(220 / 768 * 100vw); width: calc(120 / 768 * 100vw); right: calc(130 / 768 * 100vw); } .section3-text { font-size: calc(36 / 768 * 100vw); top: calc(245 / 768 * 100vw); left: calc(85 / 768 * 100vw); } .section3-bomb { width: calc(180 / 768 * 100vw); top: calc(270 / 768 * 100vw); right: calc(20 / 768 * 100vw); } .section3-yellowstar { width: calc(50 / 768 * 100vw); top: calc(500 / 768 * 100vw); left: calc(270 / 768 * 100vw); } .section3-bluestar { width: calc(80 / 768 * 100vw); top: calc(600 / 768 * 100vw); left: calc(200 / 768 * 100vw); } .section3-purplestar { width: calc(60 / 768 * 100vw); top: calc(520 / 768 * 100vw); left: calc(80 / 768 * 100vw); } .section3-mic { width: calc(171 / 768 * 100vw); top: calc(620 / 768 * 100vw); left: calc(50 / 768 * 100vw); } .section3-pinkchonchon { width: calc(148 / 768 * 100vw); top: calc(750 / 768 * 100vw); left: calc(250 / 768 * 100vw); } .section3-ktkr-rocket { width: calc(400 / 768 * 100vw); top: calc(400 / 768 * 100vw); left: calc(365 / 768 * 100vw); } .appollo-link-btn { width: calc(620 / 768 * 100vw); top: calc(960 / 768 * 100vw); left: calc(74 / 768 * 100vw); } } @media screen and (max-width:640px) { .ts { text-shadow: 0px 4px #000, 0px -4px #000, 0px 4px #000, 0px -4px #000, 1px 3px #000, 1px -3px #000, -1px 3px #000, -1px -3px #000, 2px 2px #000, 2px -2px #000, -2px 2px #000, -2px -2px #000, 3px 1px #000, 3px -1px #000, -3px 1px #000, -3px -1px #000, 4px 0px #000, 4px 0px #000, -4px 0px #000, -4px 0px #000, 1px 5px #fff, 1px -5px #fff, -1px 5px #fff, -1px -5px #fff, 2px 4px #fff, 2px -4px #fff, -2px 4px #fff, -2px -4px #fff, 3px 3px #fff, 3px -3px #fff, -3px 3px #fff, -3px -3px #fff, 4px 2px #fff, 4px -2px #fff, -4px 2px #fff, -4px -2px #fff, 5px 1px #fff, 5px -1px #fff, -5px 1px #fff, -5px -1px #fff; } }