@charset "UTF-8"; /*** 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; 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; -moz-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 */ ::-moz-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; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 1.6rem; font-weight: 400; background-color: #F3F5FA; overflow-x: hidden; } a { cursor: pointer; text-decoration: none; } input { cursor: pointer; } img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .l-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; padding: 0 20px; height: 75px; background-color: rgba(46, 125, 50, 0.8); color: #ffffff; z-index: 100; } .l-header__hamburger { display: flex; margin-left: auto; } .l-header__nav { background-color: rgba(46, 125, 50, 0.8); position: fixed; top: 75px; left: 0; width: 100%; height: 0%; padding: 0 32px; overflow-y: hidden; transition: all 0.3s ease-out; } .l-header__nav.active { height: 100dvh; } @media (min-width: 1200px) { .l-header { padding: 0 0 0 32px; } .l-header__hamburger { display: none; } .l-header__nav { position: relative; display: block; top: initial; left: initial; overflow-y: initial; width: -moz-fit-content; width: fit-content; height: 100%; margin-left: auto; background-color: initial; padding: initial; } .l-header__nav.active { height: 100%; } } .section-margin, .l-main__store, .l-main__uservoice, .l-main__plan, .l-main__solution, .l-main__problem, .l-main__campaign { margin: 64px 0; } @media (min-width: 768px) { .section-margin, .l-main__store, .l-main__uservoice, .l-main__plan, .l-main__solution, .l-main__problem, .l-main__campaign { margin: 80px 0; } } .l-main { position: relative; } .l-main__kv { position: relative; width: 100%; height: calc(100svh - 75px); background-position: top center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .l-main__campaign { position: relative; width: 100%; height: auto; background-color: #81C784; } .l-main__problem { background-image: url("../images/problem/bg-sp.jpeg"); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; } @media (min-width: 768px) { .l-main__problem { background-image: url("../images/problem/bg-pc.jpg"); background-position: center; } } .l-main__solution { padding: 0 20px; } .l-main__solution img { display: block; margin: 0 auto; width: 100%; max-width: 500px; } .l-main__reason { padding: 64px 20px; background-color: #2E7D32; } .l-main__plan { padding: 64px 20px; } .l-main__uservoice { padding: 64px 20px; background-color: #ffffff; } .l-main__store { padding: 64px 20px; } @media (min-width: 768px) { .l-main__store { padding: 64px 32px; } } @media (min-width: 1200px) { .l-main__store { padding: 64px 100px; } } .l-footer { background-color: #81C784; padding: 40px 20px 60px 20px; position: relative; } .l-footer__logo { display: block; width: min(100%, 350px); margin: 0 auto 40px; } .l-footer__copyrights { position: absolute; bottom: 0px; left: 0px; display: block; width: 100%; padding: 8px 0; background-color: #000000; color: #ffffff; text-align: center; font-size: 1.4rem; } .l-footer__icons { position: absolute; top: -49px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; } @media (min-width: 768px) { .l-footer { padding: 40px 80px 60px 80px; } .l-footer__icons { top: -69px; padding: 0 120px; } } .c-hamburger { flex-direction: column; justify-content: space-between; } .c-hamburger span { display: block; width: 100%; height: 2px; background-color: #ffffff; transition: all 0.3s ease-in; } .c-hamburger span:nth-child(1) { transform-origin: right top; } .c-hamburger span:nth-child(3) { transform-origin: right bottom; } .c-hamburger.active span:nth-child(1) { rotate: -45deg; } .c-hamburger.active span:nth-child(2) { opacity: 0; } .c-hamburger.active span:nth-child(3) { rotate: 45deg; } .c-link-btn { display: flex; justify-content: center; align-items: center; } .c-link-btn::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 8px; margin-top: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid currentColor; } .p-header-logo { width: 200px; } .p-header-hamburger { width: 50px; aspect-ratio: 1/1; padding: 12.5px 8px; } .p-header-list { display: flex; flex-direction: column; margin-top: 32px; } .p-header-list__item { position: relative; padding: 16px 0; } .p-header-list__item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #FFCA28; } .p-header-list__item--cta { width: 280px; margin: 32px auto; font-weight: bold; background-color: #FFCA28; } .p-header-list__link { font-size: 2rem; } .p-header-list__link-wrapper { display: flex; align-items: center; justify-content: space-between; } .p-header-list__link-wrapper button { width: 15px; height: 20px; transition: all 0.3s ease-out; margin-left: 8px; } .p-header-list__link-wrapper button.active { rotate: 180deg; } @media (min-width: 1200px) { .p-header-list { flex-direction: row; align-items: center; height: 100%; margin-top: initial; } .p-header-list__item { display: flex; align-items: center; justify-content: center; padding: 0 16px; height: 100%; } .p-header-list__item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #FFCA28; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .p-header-list__item:hover::after { transform: scaleX(1); } .p-header-list__item--cta { margin: initial; } .p-header-list__link { font-size: 1.6rem; } .p-header-list__link--cta { font-size: 2rem; } } .p-header-sublist { display: flex; flex-direction: column; max-height: 0; overflow-y: hidden; transition: all 0.7s ease-in-out; } .p-header-sublist.active { max-height: 100dvh; } .p-header-sublist__item { position: relative; padding: 16px 0; } .p-header-sublist__link { font-size: 1.8rem; padding-left: 8px; } .p-header-sublist__link::before { content: "-"; padding-right: 4px; } @media (min-width: 1200px) { .p-header-sublist { position: absolute; top: 75px; left: 0; width: -moz-max-content; width: max-content; background-color: rgba(46, 125, 50, 0.8); } .p-header-sublist__item { padding: 16px; } .p-header-sublist__item:last-child { padding: 16px; } .p-header-sublist__item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #FFCA28; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .p-header-sublist__item:hover::after { transform: scaleX(1); } .p-header-sublist__link { font-size: 1.6rem; padding-left: 0px; } } .p-footer { width: -moz-fit-content; width: fit-content; color: #ffffff; display: flex; flex-direction: column; gap: 32px; margin: 0 auto; } .p-footer__nav { grid-area: navi; } .p-footer__company { grid-area: company; } .p-footer__actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: 24px; } @media (min-width: 768px) { .p-footer { display: grid; align-items: start; -moz-column-gap: 32px; column-gap: 32px; row-gap: 40px; grid-template-areas: "navi company" "navi actions"; } } @media (min-width: 1200px) { .p-footer { grid-template-areas: "navi company actions"; -moz-column-gap: 64px; column-gap: 64px; } } .p-footer-list { display: flex; flex-direction: column; gap: 8px; } .p-footer-sublist { display: flex; flex-direction: column; gap: 6px; } .p-footer-sublist__item { padding-left: 8px; } .p-footer-sublist__item::before { content: "-"; padding-right: 4px; } .p-footer-btn { width: 280px; height: 75px; font-weight: bold; background-color: #FFCA28; } .p-footer-sns { width: -moz-fit-content; width: fit-content; text-align: center; } .p-footer-sns span { display: block; font-size: 1.4rem; margin-bottom: 8px; } .p-footer-sns__icons { display: flex; gap: 16px; } .p-footer-sns img { width: 30px; aspect-ratio: 1/1; } @media (min-width: 768px) { .p-footer-sns__icons { gap: 24px; } .p-footer-sns img { width: 40px; } } .p-footer__icon { width: 50px; aspect-ratio: 1/1; } @media (min-width: 768px) { .p-footer__icon { width: 70px; } } .p-kv { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 20px; } .p-kv__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .p-kv__heading { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; margin-top: -200px; } .p-kv__heading span { font-size: 2rem; font-weight: bold; color: #ffffff; margin-bottom: 8px; } .p-kv__heading img { width: 100%; max-width: 350px; } .p-kv__features { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); padding: 16px 20px; z-index: 10; } @media (min-width: 768px) { .p-kv span { font-size: 4rem; margin-bottom: 8px; } .p-kv img { width: 500px; } } .p-kv-features { display: flex; flex-direction: row; justify-content: center; gap: 16px; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .p-kv-features__item { flex: 0 0 calc(25% - 16px); } .p-kv-features__item img { max-width: 120px; } @media (min-width: 768px) { .p-kv-features { gap: 32px; } .p-kv-features__item { flex: 0 0 calc(25% - 32px); } .p-kv-features__item img { max-width: 150px; } } .p-campaign { position: relative; width: 100%; height: 500px; background-image: url("../images/campaign/concentration.png"); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 10; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 20px; } .p-campaign__heading { font-size: 1.8rem; font-weight: bold; color: #ffffff; } .p-campaign__img { position: relative; width: 100%; max-width: 320px; min-width: 280px; } .p-campaign__btns { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .p-campaign__icon { position: absolute; top: -10px; right: 0px; width: 60px; rotate: 5deg; } @media (min-width: 768px) { .p-campaign__heading { font-size: 2.4rem; font-weight: bold; color: #ffffff; } .p-campaign__btns { flex-direction: row; gap: 32px; } .p-campaign__icon { width: 90px; top: -10px; right: -50px; } } .p-campaign-btn { width: 280px; height: 75px; background-color: #ffffff; color: #81C784; font-weight: bold; font-size: 1.8rem; transition: all 0.3s ease-out; box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0); } .p-campaign-btn:hover { background-color: #2E7D32; color: #ffffff; box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45); transform: translate(-4px, -4px); } .p-campaign-btn--cta { background-color: #FFCA28; color: #ffffff; } .p-new-open { position: relative; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; } .p-new-open__swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-new-open__bg-img { position: absolute; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .p-new-open__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; } .p-new-open__logo { position: relative; z-index: 10; width: 100%; max-width: 300px; } .p-new-open__heading { position: relative; z-index: 10; font-size: 1.8rem; color: #ffffff; font-weight: bold; } .p-new-open__btn { position: absolute; z-index: 10; width: 280px; height: 75px; background-color: rgba(255, 202, 40, 0.8); font-size: 1.8rem; color: #ffffff; font-weight: bold; bottom: 0%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } .p-new-open__btn:hover { background-color: rgba(255, 255, 255, 0.8); color: #000000; } @media (min-width: 768px) { .p-new-open__heading { font-size: 3.2rem; } } .p-problem { padding: 0 5%; display: flex; flex-direction: column; justify-content: center; margin-top: 90px; height: 500px; position: relative; color: #ffffff; } .p-problem__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .p-problem__heading { position: relative; z-index: 10; font-size: 2rem; font-weight: bold; margin-bottom: 24px; } .p-problem__list { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 8px; } .p-problem__item { position: relative; z-index: 10; display: flex; align-items: center; } .p-problem__item::before { content: ""; display: inline-block; min-width: 30px; height: 26px; background-image: url("../images/problem/check.png"); background-size: cover; background-repeat: no-repeat; background-position: center; margin-right: 8px; } @media (min-width: 768px) { .p-problem { padding: 0 10%; } .p-problem__heading { font-size: 2.8rem; } } @media (min-width: 1200px) { .p-problem { padding: 0 15%; } .p-problem__list { gap: 16px; } } @media (min-width: 1440px) { .p-problem { padding: 0 20%; } } .p-about { background-color: rgba(0, 0, 0, 0.8); } .p-about__bg-img { position: relative; width: 100%; height: 300px; background-position: center; background-repeat: no-repeat; background-size: cover; } .p-about__desc { position: relative; z-index: 10; width: calc(100% - 40px); max-width: 1200px; padding: 32px 8px; margin: -100px auto 0; display: flex; flex-direction: column; align-items: center; border: 2px solid #ffffff; color: #ffffff; background-color: rgba(46, 125, 50, 0.8); text-align: center; gap: 24px; } .p-about__desc img { width: 250px; } .p-about__desc p { width: 100%; max-width: 600px; line-height: 1.5; } .p-about__gallary { position: relative; z-index: 10; width: 100%; height: 300px; padding: 32px 0; } @media (min-width: 768px) { .p-about__desc img { width: 400px; } .p-about__gallary { height: 400px; padding: 40px 0; } } .p-gallary__swiper { width: 100%; height: 100%; } .p-gallary__slide { width: 300px !important; border: 2px solid #ffffff; } .p-gallary__img { width: inherit; height: inherit; background-position: center; background-repeat: no-repeat; background-size: cover; } @media (min-width: 768px) { .p-gallary__slide { width: 500px !important; } } .p-reason { display: flex; flex-direction: column; align-items: center; gap: 40px; margin: 0 auto; width: min(100%, 800px); } .p-reason__heading { display: flex; flex-direction: column; align-items: center; color: #ffffff; } .p-reason__heading h2 { width: clamp(200px, 100%, 350px); } .p-reason__heading p { line-height: 1.5; } .p-reason__list { display: flex; flex-direction: column; align-items: center; gap: 40px; width: min(100%, 500px); } @media (min-width: 1200px) { .p-reason { width: min(100%, 1040px); } .p-reason__list { width: 100%; flex-wrap: wrap; flex-direction: row; align-items: initial; } } .p-reason-card { position: relative; color: #ffffff; display: flex; flex-direction: column; gap: 8px; width: min(100%, 500px); } .p-reason-card__img { width: 100%; aspect-ratio: 3/2; background-position: center; background-repeat: no-repeat; background-size: cover; } .p-reason-card__heading { font-size: 1.8rem; font-weight: bold; } .p-reason-card__desc { line-height: 1.5; } .p-reason-card__icon { position: absolute; top: 0; left: 0; font-size: 2rem; background-color: #ffffff; color: #2E7D32; padding: 8px 16px; font-weight: 900; } @media (min-width: 1200px) { .p-reason-card__heading { font-size: 2.4rem; } .p-reason-card__icon { font-size: 1.8rem; } } .p-plan__heading { font-size: 2rem; font-weight: bold; text-align: center; color: #000000; margin-bottom: 40px; } .p-plan__heading::after { content: ""; display: block; width: 100px; height: 4px; background-color: #000000; margin: 0 auto; margin-top: 4px; } .p-plan__body { display: flex; flex-direction: column; gap: 40px; } .p-plan__header { display: flex; width: min(100%, 320px); border-radius: 40px; font-size: 1.6rem; background-color: #ffffff; overflow: hidden; margin: 0 auto; } .p-plan__btn { display: block; width: 100%; padding: 16px 0; border-radius: 40px; white-space: nowrap; text-align: center; } .p-plan__btn.active { background-color: #2E7D32; color: #ffffff; } .p-plan__list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; } .p-plan__item { width: min(100%, 400px); height: auto; } @media (min-width: 1200px) { .p-plan__heading { font-size: 2.8rem; } .p-plan__list { flex-direction: row; align-items: stretch; } .p-plan__item { width: min(100%, 300px); } } .p-paln-card { position: relative; display: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #ffffff; } .p-paln-card.active { display: block; } .p-paln-card__header { display: flex; justify-content: center; align-items: center; padding: 20px 0; background-color: #2E7D32; font-size: 2rem; color: #ffffff; font-weight: bold; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; } .p-paln-card__price { text-align: center; padding: 16px 0; } .p-paln-card__emphasis { font-size: 3.2rem; font-weight: 700; } .p-paln-card__body { padding: 0 16px 32px; } .p-paln-card__table { display: flex; flex-direction: column; gap: 8px; } .p-paln-card__label { font-size: 1.4rem; } .p-paln-card__value p::before { content: "・"; } .p-paln-card__recommend { position: absolute; width: 70px; aspect-ratio: 1/1; top: -20px; left: 0; rotate: -5deg; } @media (min-width: 1200px) { .p-paln-card__recommend { top: -20px; left: -10px; } } .p-uservoice { width: min(100%, 1040px); margin: 0 auto; } .p-uservoice__heading { font-size: 2rem; font-weight: bold; text-align: center; color: #2E7D32; margin-bottom: 40px; } .p-uservoice__heading::after { content: ""; display: block; width: 100px; height: 4px; background-color: #2E7D32; margin: 0 auto; margin-top: 4px; } .p-uservoice__list { display: flex; flex-direction: column; align-items: center; gap: 40px; } @media (min-width: 768px) { .p-uservoice__list { justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: stretch; } } @media (min-width: 1200px) { .p-uservoice { font-size: 2.8rem; } } .p-uservoice-card { display: flex; flex-direction: column; align-items: center; background-color: #81C784; border-radius: 10px; padding: 16px 24px; gap: 16px; color: #ffffff; width: min(100%, 500px); } .p-uservoice-card__profile { display: flex; flex-direction: column; width: -moz-fit-content; width: fit-content; } .p-uservoice-card__img { width: 120px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; } .p-uservoice-card__info { display: flex; flex-direction: column; align-items: center; font-size: 1.4rem; } .p-uservoice-card__review { display: flex; flex-direction: column; align-items: center; gap: 8px; } .p-uservoice-card__review img { width: 150px; height: auto; } .p-uservoice-card__star { display: flex; align-items: center; gap: 4px; font-size: 1.8rem; font-weight: bold; } .p-uservoice-card__desc { font-size: 1.6rem; line-height: 1.5; } @media (min-width: 768px) { .p-uservoice-card { flex-direction: row; align-items: start; } .p-uservoice-card__review { align-items: start; } } .p-store__heading { font-size: 2rem; font-weight: bold; text-align: center; color: #000000; margin-bottom: 40px; } .p-store__heading::after { content: ""; display: block; width: 100px; height: 4px; background-color: #000000; margin: 0 auto; margin-top: 4px; } .p-store__list { display: flex; flex-direction: column; align-items: center; gap: 32px; } .p-store__item { width: min(100%, 350px); } @media (min-width: 768px) { .p-store__list { flex-direction: row; gap: 0; } } @media (min-width: 1200px) { .p-store__heading { font-size: 2.8rem; } } .p-store-card { display: flex; flex-direction: column; gap: 8px; } .p-store-card__img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 5px; overflow: hidden; } .p-store-card__heading { font-size: 1.8rem; font-weight: bold; } .p-store-card__info { font-size: 1.6rem; } .p-store-card__caption { display: inline-block; width: 70px; } .p-store-card__btn { width: -moz-fit-content; width: fit-content; font-size: 1.6rem; background-color: #2E7D32; color: #ffffff; border-radius: 5px; padding: 12px 24px; margin-left: auto; border: 2px solid transparent; transition: all 0.3s ease-in-out; } .p-store-card__btn:hover { background-color: #ffffff; color: #2E7D32; border: 2px solid #2E7D32; } .store-swiper { overflow: hidden; } .u-zindex-100 { z-index: 100; position: relative; }/*# sourceMappingURL=style.css.map */