/* ======================================= reset ======================================= */ /*** 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 { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-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 */ ::-webkit-input-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::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; } /* ======================================= layout ======================================= */ :root { --font_color: #333; --primary_color: #8b5fa9; --font_min: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "Noto Serif JP", serif; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { -ms-scroll-chaining: none; overscroll-behavior: none; } :focus-visible { outline: none; } body { background: #fff; color: var(--font_color); font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic Medium", sans-serif; font-weight: 400; line-height: 1; margin: auto; width: 100%; } @media only screen and (max-width: 750px) { body { font-size: 3.2vw; } } @media only screen and (min-width: 751px) { body { font-size: 24px; min-width: 750px; } } a { color: var(--font_color); text-decoration: none; } img { vertical-align: bottom; width: 100%; } strong { font-weight: 700; } .wrapper { overflow: hidden; } @media only screen and (min-width: 751px) { .container { margin: auto; width: 750px; } } /* ======================================= contents ======================================= */ .top-contents { background: url(../images/top_bg_01.jpg) 50% 0 no-repeat, url(../images/top_bg_02.jpg) 0 0 repeat-x; background-size: auto 100%; } @media only screen and (max-width: 750px) { .top-contents { height: 592vw; } } @media only screen and (min-width: 751px) { .top-contents { height: 4440px; } } @media only screen and (max-width: 750px) { .kv { padding-top: 30.4vw; } } @media only screen and (min-width: 751px) { .kv { padding-top: 228px; } } @media only screen and (max-width: 750px) { .kv__title { margin-top: -2.667vw; } } @media only screen and (min-width: 751px) { .kv__title { margin-top: -20px; } } .menu { display: flex; flex-wrap: wrap; } @media only screen and (max-width: 750px) { .menu { gap: 2.667vw; margin: 2.667vw 13.333vw 0 14.267vw; } } @media only screen and (min-width: 751px) { .menu { gap: 20px; margin: 20px 100px 0 107px; } } @media only screen and (max-width: 750px) { .menu__item { width: 22.133vw; } } @media only screen and (min-width: 751px) { .menu__item { width: 166px; } } .kv__button { display: block; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media only screen and (max-width: 750px) { .kv__button { margin: 5.333vw auto 0; width: 80vw; } } @media only screen and (min-width: 751px) { .kv__button { margin: 40px auto 0; width: 600px; } } @media (any-hover: hover) { .kv__button:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } } .about { background: url(../images/about_top.png) 0 0/100% auto no-repeat; } @media only screen and (max-width: 750px) { .about { margin-top: 14.667vw; padding-top: 14vw; } } @media only screen and (min-width: 751px) { .about { margin-top: 110px; padding-top: 105px; } } .about__text { color: #ecdfc5; letter-spacing: 0.12em; line-height: 2; text-align: center; } @media only screen and (max-width: 750px) { .about__text { margin: 7.333vw auto 0; width: 88vw; } } @media only screen and (min-width: 751px) { .about__text { margin: 55px auto 0; width: 660px; } } .about__text p + p { margin-top: 1.5em; } @media only screen and (max-width: 750px) { .about__bottom { margin-top: 6vw; } } @media only screen and (min-width: 751px) { .about__bottom { margin-top: 45px; } } .genre-list { display: flex; flex-wrap: wrap; } @media only screen and (max-width: 750px) { .genre-list { gap: 2.667vw 1.067vw; margin: 8vw 0 0 6.4vw; } } @media only screen and (min-width: 751px) { .genre-list { gap: 20px 8px; margin: 60px 0 0 48px; } } .genre-list__item { background: url(../images/genre_card.png) 0 0/100% 100% no-repeat; } @media only screen and (max-width: 750px) { .genre-list__item { height: 63.867vw; padding-top: 8vw; width: 42.667vw; } } @media only screen and (min-width: 751px) { .genre-list__item { height: 479px; padding-top: 60px; width: 320px; } } .genre-list__title { margin: auto; } @media only screen and (max-width: 750px) { .genre-list__title { width: 29.333vw; } } @media only screen and (min-width: 751px) { .genre-list__title { width: 220px; } } .genre-list__text { color: #333; line-height: 1.75; margin: auto; text-align: center; } @media only screen and (max-width: 750px) { .genre-list__text { width: 34.667vw; } } @media only screen and (min-width: 751px) { .genre-list__text { width: 260px; } } .voice { background: url(../images/voice_bg_01.jpg) 50% 0 repeat-y #e9e1d4; position: relative; } @media only screen and (max-width: 750px) { .voice { padding: 8vw 0 17.333vw; } } @media only screen and (min-width: 751px) { .voice { padding: 60px 0 130px; } } .voice__title { left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (max-width: 750px) { .voice__title { top: -18.667vw; width: 100vw; } } @media only screen and (min-width: 751px) { .voice__title { top: -140px; width: 750px; } } .voice__list { display: flex; flex-direction: column; } @media only screen and (max-width: 750px) { .voice__list { gap: 14vw; } } @media only screen and (min-width: 751px) { .voice__list { gap: 105px; } } .voice__item { background: #fff; position: relative; } @media only screen and (max-width: 750px) { .voice__item { border-radius: 2.667vw; padding: 6.667vw 0; width: 90.667vw; } } @media only screen and (min-width: 751px) { .voice__item { border-radius: 20px; padding: 50px 0; width: 680px; } } .voice__item::after { background: url(../images/voice_fukidashi.svg) 0/contain no-repeat; content: ""; display: block; position: absolute; } @media only screen and (max-width: 750px) { .voice__item::after { bottom: -2.4vw; height: 7.6vw; width: 11.867vw; } } @media only screen and (min-width: 751px) { .voice__item::after { bottom: -18px; height: 57px; width: 89px; } } @media only screen and (max-width: 750px) { .voice__lead, .voice__text, .voice__name { width: 76.8vw; } } @media only screen and (min-width: 751px) { .voice__lead, .voice__text, .voice__name { width: 576px; } } .voice__lead { color: var(--primary_color); font-family: var(--font_min); font-weight: bold; line-height: 1.406; } @media only screen and (max-width: 750px) { .voice__lead { font-size: 4.267vw; } } @media only screen and (min-width: 751px) { .voice__lead { font-size: 32px; } } .voice__text { line-height: 1.75; } @media only screen and (max-width: 750px) { .voice__text { margin-top: 2.667vw; } } @media only screen and (min-width: 751px) { .voice__text { margin-top: 20px; } } .voice__name { color: var(--primary_color); font-family: var(--font_min); font-weight: bold; letter-spacing: 0.08em; margin-top: 1em; } @media only screen and (max-width: 750px) { .voice__name { font-size: 3.6vw; } } @media only screen and (min-width: 751px) { .voice__name { font-size: 27px; } } .voice__image { position: absolute; } @media only screen and (max-width: 750px) { .voice__image { bottom: -8vw; width: 22.667vw; } } @media only screen and (min-width: 751px) { .voice__image { bottom: -60px; width: 170px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n+1) { margin-left: 6.667vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n+1) { margin-left: 50px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n+1)::after { left: 52.533vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n+1)::after { left: 394px; } } .voice__item:nth-child(2n+1) .voice__lead, .voice__item:nth-child(2n+1) .voice__text, .voice__item:nth-child(2n+1) .voice__name { margin-right: auto; } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n+1) .voice__lead, .voice__item:nth-child(2n+1) .voice__text, .voice__item:nth-child(2n+1) .voice__name { margin-left: 7.333vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n+1) .voice__lead, .voice__item:nth-child(2n+1) .voice__text, .voice__item:nth-child(2n+1) .voice__name { margin-left: 55px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n+1) .voice__image { left: 66.4vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n+1) .voice__image { left: 498px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n) { margin-left: 2.667vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n) { margin-left: 20px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n)::after { left: 56.667vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n)::after { left: 425px; } } .voice__item:nth-child(2n) .voice__lead, .voice__item:nth-child(2n) .voice__text, .voice__item:nth-child(2n) .voice__name { margin-left: auto; } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n) .voice__lead, .voice__item:nth-child(2n) .voice__text, .voice__item:nth-child(2n) .voice__name { margin-right: 7.333vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n) .voice__lead, .voice__item:nth-child(2n) .voice__text, .voice__item:nth-child(2n) .voice__name { margin-right: 55px; } } @media only screen and (max-width: 750px) { .voice__item:nth-child(2n) .voice__image { left: 70.4vw; } } @media only screen and (min-width: 751px) { .voice__item:nth-child(2n) .voice__image { left: 528px; } } .bottom-contents { background: url(../images/bottom_bg_01.jpg) 50% 0 no-repeat, url(../images/bottom_bg_02.jpg) 0 0 repeat-x #faf8f5; } @media only screen and (max-width: 750px) { .bottom-contents { background-size: auto 218.8vw; padding-bottom: 10vw; } } @media only screen and (min-width: 751px) { .bottom-contents { background-size: auto 1641px; padding-bottom: 75px; } } .price { color: #fff; text-align: center; } @media only screen and (max-width: 750px) { .price { height: 72vw; padding-top: 11.333vw; } } @media only screen and (min-width: 751px) { .price { height: 540px; padding-top: 85px; } } .price__title { background: #fff; color: var(--primary_color); font-weight: 800; letter-spacing: 0.1em; line-height: 1.4; margin: auto; } @media only screen and (max-width: 750px) { .price__title { border-radius: 4.667vw; font-size: 6.667vw; width: 60vw; } } @media only screen and (min-width: 751px) { .price__title { border-radius: 35px; font-size: 50px; width: 450px; } } .price__lead { border-bottom: solid #fff; font-weight: 600; letter-spacing: 0.14em; } @media only screen and (max-width: 750px) { .price__lead { border-bottom-width: 0.533vw; font-size: 4.533vw; margin: 5.333vw auto 0; padding-bottom: 2.933vw; width: 68vw; } } @media only screen and (min-width: 751px) { .price__lead { border-bottom-width: 4px; font-size: 34px; margin: 40px auto 0; padding-bottom: 22px; width: 510px; } } .price__lead__small { font-size: 80%; } .price__free { font-family: var(--font_min); font-weight: bold; letter-spacing: 0.1em; } @media only screen and (max-width: 750px) { .price__free { font-size: 16.933vw; margin-top: 4vw; } } @media only screen and (min-width: 751px) { .price__free { font-size: 127px; margin-top: 30px; } } @media only screen and (max-width: 750px) { .price__note { font-size: 2.667vw; margin-top: 2.667vw; } } @media only screen and (min-width: 751px) { .price__note { font-size: 20px; margin-top: 20px; } } @media only screen and (max-width: 750px) { .cta { margin-top: 64.667vw; } } @media only screen and (min-width: 751px) { .cta { margin-top: 485px; } } .line { display: flex; justify-content: center; } @media only screen and (max-width: 750px) { .line { gap: 1.333vw; margin-top: 6.667vw; } } @media only screen and (min-width: 751px) { .line { gap: 10px; margin-top: 50px; } } @media only screen and (max-width: 750px) { .line__qr { width: 17.333vw; } } @media only screen and (min-width: 751px) { .line__qr { width: 130px; } } .button { align-items: center; background: linear-gradient(to bottom, #2bcf6e 0%, #00b200 100%); color: #fff; display: flex; position: relative; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media only screen and (max-width: 750px) { .button { border-radius: 8.667vw; box-shadow: 1.333vw 1.333vw 1.333vw rgba(0, 0, 0, 0.2); gap: 5.6vw; height: 17.333vw; padding-left: 6.667vw; width: 73.333vw; } } @media only screen and (min-width: 751px) { .button { border-radius: 65px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); gap: 42px; height: 130px; padding-left: 50px; width: 550px; } } @media (any-hover: hover) { .button:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media only screen and (max-width: 750px) { .button__icon { width: 10.667vw; } } @media only screen and (min-width: 751px) { .button__icon { width: 80px; } } .button__label { font-weight: 800; letter-spacing: 0.08em; line-height: 1.433; text-align: center; } @media only screen and (max-width: 750px) { .button__label { font-size: 4vw; } } @media only screen and (min-width: 751px) { .button__label { font-size: 30px; } } .button__arrow { fill: #fff; } @media only screen and (max-width: 750px) { .button__arrow { margin-left: 2.4vw; width: 2.267vw; } } @media only screen and (min-width: 751px) { .button__arrow { margin-left: 18px; width: 17px; } } .footer { background: #170642; color: #fff; text-align: center; } @media only screen and (max-width: 750px) { .footer { padding: 4vw 0 3.733vw; } } @media only screen and (min-width: 751px) { .footer { padding: 30px 0 28px; } } .sitelink { display: flex; justify-content: center; } @media only screen and (max-width: 750px) { .sitelink__item { font-size: 2.133vw; padding: 0 1.333vw; } } @media only screen and (min-width: 751px) { .sitelink__item { font-size: 16px; padding: 0 10px; } } .sitelink__item:not(:last-child) { border-right: 1px solid #fff; } .sitelink__link { color: #fff; } @media (any-hover: hover) { .sitelink__link:hover { text-decoration: underline; } } @media only screen and (max-width: 750px) { .copyright { font-size: 2.133vw; margin-top: 1.333vw; } } @media only screen and (min-width: 751px) { .copyright { font-size: 16px; margin-top: 10px; } }/*# sourceMappingURL=style.css.map */