@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap"); /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1; word-break: normal; overflow-wrap: anywhere; color-scheme: light dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; line-break: strict; font-synthesis: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #EF858C; } html { scroll-behavior: smooth; } a { display: inline-block; vertical-align: top; color: inherit; text-decoration: none; } img, span { display: inline-block; vertical-align: top; } img { width: 100%; } button { padding: 0; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; border: none; background: transparent; box-shadow: none; cursor: pointer; } @media all and (max-width: 767px) { button { outline: none; } } @media all and (max-width: 767px) { .forPc { display: none; } } @media all and (min-width: 768px) { .forSp { display: none; } } .header { display: flex; align-items: center; justify-content: center; height: 12.8205128205vw; } @media all and (min-width: 768px) { .header { height: 60px; } } .header__logo { width: 15.8974358974vw; } @media all and (min-width: 768px) { .header__logo { width: 80px; } } .kv { position: relative; height: calc(100dvh - 12.8205128205vw); max-height: 157.6923076923vw; background: url("/img/bg_01.png") no-repeat center top/cover; overflow: hidden; } @media all and (min-width: 768px) { .kv { height: calc(100vh - 60px); min-height: 708px; background: url("/img/bg_01_l.png") no-repeat center top/cover; max-height: 796px; } } @media all and (min-width: 1366px) { .kv { max-height: calc(56.149341142vw + 2.1229868228vw); } } .kv::after { position: absolute; bottom: 0; width: 100%; height: 24.6153846154vw; background: url("/img/img_kv_bottom.png") no-repeat center bottom -1px/cover; content: ""; } @media all and (min-width: 768px) { .kv::after { height: 193px; background: url("/img/img_kv_bottom_l.png") no-repeat center bottom -1px/cover; } } .kv__title { position: absolute; top: 3.5897435897vw; left: 7.4358974359vw; width: 86.0512820513vw; height: 51.6025641026vw; } @media all and (min-width: 768px) { .kv__title { top: 10.546875vw; left: calc(50% + 1.953125vw); width: 50.390625vw; height: 30.2734375vw; } } @media all and (min-width: 1024px) { .kv__title { top: 108px; left: calc(50% + 20px); width: 516px; height: 310px; } } @media all and (min-width: 1366px) { .kv__title { top: 7.906295754vw; left: calc(50% + 1.4641288433vw); width: 37.7745241581vw; height: 22.6939970717vw; } } .kv__txt { position: absolute; width: 30.7692307692vw; height: 13.8461538462vw; top: 68.2051282051vw; right: 5.1282051282vw; } @media all and (min-width: 768px) { .kv__txt { top: 42.3828125vw; left: calc(50% + 15.0390625vw); width: 26.7578125vw; height: 5.859375vw; } } @media all and (min-width: 1024px) { .kv__txt { top: 434px; right: auto; left: calc(50% + 154px); width: 274px; height: 60px; } } @media all and (min-width: 1366px) { .kv__txt { top: 31.7715959004vw; left: calc(50% + 11.2737920937vw); width: 20.0585651537vw; height: 4.39238653vw; } } .kv__figure { position: absolute; top: 53.0769230769vw; left: 7.4358974359vw; width: 77.6923076923vw; height: 115.1282051282vw; } @media all and (min-width: 768px) { .kv__figure { top: 29px; left: auto; right: calc(50% - 111px); width: 517px; height: 767px; } } @media all and (min-width: 1366px) { .kv__figure { top: 2.1229868228vw; left: auto; right: calc(50% - 8.1259150805vw); width: 37.8477306003vw; height: 56.149341142vw; } } .section { padding: 7.6923076923vw 5.1282051282vw 10.2564102564vw; } @media all and (min-width: 768px) { .section { padding: 40px 20px 80px; } } @media all and (min-width: 768px) { .section__inner { width: 100%; max-width: 840px; margin-inline: auto; } } .section h1 { color: #fff; font-size: 9.2307692308vw; font-weight: 900; line-height: 1.5; text-align: center; } @media all and (min-width: 768px) { .section h1 { font-size: 58px; line-height: 1.5; } } .section h1 span { color: #FFF100; } .section .list { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 3.5897435897vw; margin-top: 7.6923076923vw; } @media all and (min-width: 768px) { .section .list { grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; } } .section .list a { display: flex; align-items: center; justify-content: center; background-color: #fff; height: 12.8205128205vw; border-radius: 999px; color: #EC6D81; font-size: 3.5897435897vw; font-weight: 700; letter-spacing: 0.1em; transition: 0.6s; } @media all and (min-width: 768px) { .section .list a { height: 78px; font-size: 20px; } } @media (hover: hover) and (pointer: fine) { .section .list a:hover { background-color: #FFF100; } } .footer { display: flex; align-items: center; justify-content: center; height: 15.3846153846vw; background-color: #FDEEF1; color: #EC6D81; font-size: 4.1025641026vw; letter-spacing: 0.1em; } @media all and (min-width: 768px) { .footer { height: 90px; font-size: 20px; } }