@charset "utf-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.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 - 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, input[type=radio], input[type=checkbox]):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; } /* 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; } /* ======================================= base ======================================= */ h1, h2, h3, h4, h5, h6, ul, ol, li, p, dl, dt, dd { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } 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; } a { color: var(--font_color); text-decoration: none; } img { height: auto; max-width: 100%; vertical-align: bottom; } strong { font-weight: 700; } :root { --font_color: #1a1a1a; --strong_color: #000; --primary_color: #f88700; --secondary_color: #f76f00; --tertiary_color: #f15a24; --font-noto-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif; --font-noto-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",serif; } /* ======================================= layout ======================================= */ body { background: #fff; color: var(--font_color); font-family: var(--font-noto-sans); font-size: 18px; font-weight: 400; line-height: 1; margin: auto; min-width: 1080px; width: 100%; } .inner { margin: auto; width: 1000px; } .btn { align-items: center; background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #ff8300 0%, #ec184a 100%); background-repeat: no-repeat; color: #fff; cursor: pointer; display: flex; justify-content: center; outline: none; padding: 0; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } @media (any-hover: hover) { .btn:hover { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #ec184a 0%, #ec184a 100%); } } /* ======================================= header ======================================= */ .header { background: var(--primary_color); box-shadow: 6px 6px 6px rgba(51, 51, 51, 0.2); left: 0; position: sticky; top: 0; width: 100%; z-index: 100; } .header__contents { align-items: center; display: flex; height: 80px; justify-content: space-between; } .logo { width: 276px; } .btn--header { background-position: 86.538% 50%, 0 0; border: 2px solid #fff; background-size: 8px auto, 100% 100%; border-radius: 25px; font-size: 21px; font-weight: 700; letter-spacing: 0.18em; height: 50px; width: 260px; } /* ======================================= kv ======================================= */ .kv { background: url(../images/kv_bg.jpg) 50% 0 no-repeat; height: 740px; text-align: center; } .inner--kv { padding-top: 75px; position: relative; } .kv__text-wrap { color: #fff; font-weight: 500; line-height: 1.35; margin: 60px auto 0; width: 500px; } .kv__text01 { font-size: 29px; letter-spacing: 0.08em; } .kv__text02 { font-size: 31px; letter-spacing: 0.12em; } .kv__text02__em { color: #ff0; font-size: 135%; font-weight: 400; } .kv__title { margin-top: 15px; } .repeat { align-items: center; background: url(../images/repeat_bg.png) 0 no-repeat; display: flex; flex-direction: column; gap: 15px; height: 226px; justify-content: center; padding-left: 54px; position: absolute; right: 0; top: 208px; width: 280px; } .repeat__term { color: var(--strong_color); font-size: 28px; font-weight: 500; } .btn--kv { background-position: 92% 50%, 0 0; border: 2px solid #fff; background-size: 8px auto, 100% 100%; border-radius: 40px; box-shadow: 15px 15px 8px rgba(0, 0, 0, 1); font-size: 24px; font-weight: 500; height: 80px; letter-spacing: 0.14em; margin: 26px auto 0; width: 400px; } /* ======================================= feature ======================================= */ .feature { background: url(../images/feature_bg.jpg) 50% 0 no-repeat; padding: 96px 0 196px; } .feature__header { align-items: center; display: flex; gap: 15px; justify-content: center; padding-right: 5px; } .feature__lead { background: #ffdb00; border-radius: 14px; border-bottom-right-radius: 0; color: var(--strong_color); font-size: 26px; font-weight: 500; letter-spacing: 0.05em; line-height: 2.3846; text-align: center; width: 348px; } .feature__title { color: var(--strong_color); font-family: var(--font-noto-serif); font-size: 65px; font-weight: 700; } .feature__title__em { color: var(--primary_color); } .feature__text { color: var(--strong_color); font-size: 22px; letter-spacing: 0.05em; line-height: 1.954; margin-top: 25px; text-align: center; } .point { position: relative; text-align: center; } .point::before, .point::after { content: ""; display: block; position: absolute; } .point::before { border: solid var(--strong_color); height: 78px; top: 0; width: calc(50% + 425px); } .point::after { background: var(--strong_color); border-radius: 50%; height: 8px; left: 50%; top: 74px; width: 8px; } .inner--point { padding-top: 75px; position: relative; } .point__title { color: var(--strong_color); font-size: 42px; font-weight: 700; letter-spacing: 0.025em; position: relative; z-index: 1; } .point__lead { background: var(--font_color); border: 3px solid #fff; border-radius: 30px; color: #fff; font-size: 24px; font-weight: 500; line-height: 2.077; margin: 15px auto 0; position: relative; width: 620px; z-index: 1; } .point__lead-em { color: #ff0; font-size: 26px; } .point__lead::after { bottom: -2px; content: url(../images/point_deco.png); left: 50%; position: absolute; transform: translate(-50%, 100%); } .point__num { position: absolute; top: 104px; } .point__image { position: absolute; } .solution { display: flex; justify-content: space-between; margin-top: 55px; } .solution__card { align-items: center; background: #fff; border: 2px solid var(--primary_color); display: flex; justify-content: center; min-height: 450px; padding: 90px 0 165px; position: relative; width: 320px; } .solution__title { align-items: center; background: url(../images/solution_bg.png) 50% 0 no-repeat; color: #fff; display: flex; flex-direction: column; font-size: 24px; font-weight: 500; gap: 8px; height: 90px; justify-content: center; left: 50%; letter-spacing: 0.12em; position: absolute; top: -2px; transform: translateX(-50%); width: 164px; } .solution__text { color: var(--strong_color); font-size: 26px; font-weight: 500; line-height: 1.69; } .solution__text--fz25 { font-size: 25px; } .solution__text__em { color: var(--primary_color); font-size: 30px; font-weight: 500; line-height: 1.467; } .solution__image { bottom: 0; left: 0; position: absolute; } .point--01 { margin-top: 60px; } .point--01::before { border-width: 1px 0 0 1px; right: 0; } .point--01::after { transform: translateX(-429px); } .point--01 .point__num { left: 0; } .point--01 .point__image { right: -32px; top: 30px; } .solution__card--point01-02 { padding-bottom: 140px; } .point--02 { margin-top: 80px; } .point--02::before { border-width: 1px 1px 0 0; left: 0; } .point--02::after { transform: translateX(420px); } .point--02 .point__num { right: 0; } .point--02 .point__image { left: 0; top: 12px; } .point--03 { margin-top: 78px; } .point--03::before { border-width: 1px 0 0 1px; right: 0; } .point--03::after { transform: translateX(-429px); } .point--03 .point__num { left: 0; } .point--03 .point__image { right: -10px; top: -15px; } /* ======================================= strength ======================================= */ .strength { background: linear-gradient(120deg, #ff8300 0%,#ec184a 100%); position: relative; } .inner--strength { padding: 105px 0 208px; position: relative; } .strength__title__wrap { align-items: center; display: flex; height: 136px; justify-content: center; left: 50%; position: absolute; top: -78px; transform: translateX(-50%); width: 982px; } .strength__title__wrap::before { background: var(--font_color); box-shadow: 0 15px 8px rgba(241, 90, 36, 0.7); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; transform: skew(-10deg); width: 100%; } .strength__title { color: #ff0; font-family: var(--font-noto-serif); font-size: 60px; font-weight: 700; position: relative; z-index: 1; } .strength__title__fz75 { font-size: 75%; } .strength__title__white { color: #fff; } .strength__outer { overflow: hidden; position: relative; } .strength__content { position: relative; } .strength__content::before { background-image: linear-gradient(to bottom, #fff 2px, transparent 3px); background-repeat: repeat-y; background-size: 2px 8px; content: ""; display: block; height: 100%; left: 50%; position: absolute; top: 0; transform: translateX(-2px); width: 3px; } .strength__list { color: #fff; display: flex; text-align: center; } .strength__item { padding-bottom: 28px; position: relative; width: 50%; } .strength__item::before { content: url(../images/strength_icon.png); position: absolute; } .strength__lead { font-size: 40px; font-weight: 700; line-height: 1.35; position: relative; z-index: 1; } .strength__lead-fz80 { font-size: 80%; } .strength__text { font-size: 18px; letter-spacing: 0.05em; line-height: 2; margin: 25px auto 0; width: 450px; } .strength__image { margin: 25px auto 0; width: 450px; } .strength__list--top { background-image: linear-gradient(to right, #fff 2px, transparent 3px); background-repeat: repeat-x; background-position: 0 100%; background-size: 8px 2px; } .strength__item--01, .strength__item--02 { padding-top: 10px; } .strength__item--01::before { left: 72px; top: -12px; } .strength__item--02::before { left: 48px; top: -12px; } .strength__item--03, .strength__item--04 { padding-top: 58px; } .strength__item--03::before { left: 72px; top: 32px; } .strength__item--04::before { left: 48px; top: 32px; } .strength__item--03 .strength__lead, .strength__item--04 .strength__lead { letter-spacing: 0.05em; } .partner { background: url(../images/partner_bg.png) no-repeat; color: var(--strong_color); height: 340px; margin: 65px auto 0; padding-top: 130px; position: relative; text-align: center; width: 920px; z-index: 1; } .partner__lead { left: 50%; position: absolute; top: -18px; transform: translateX(-50%); } .partner__text01 { font-size: 30px; font-weight: 500; letter-spacing: 0.05em; } .partner__text02 { font-family: var(--font-noto-serif); font-size: 40px; font-weight: 700; line-height: 1.55; margin-top: 15px; } .partner__text__em { color: var(--primary_color); } .partner-images { bottom: 12px; display: flex; gap: 12px; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); width: 2000px; } .partner-images__item { width: 390px; } /* ======================================= plan ======================================= */ .plan { background: url(../images/plan_bg_01.jpg) 50% 0 no-repeat; padding: 100px 0 55px; text-align: center; } .plan__lead { color: var(--strong_color); font-size: 26px; font-weight: 500; letter-spacing: 0.1em; } .plan__title { color: var(--strong_color); font-family: var(--font-noto-serif); font-size: 54px; font-weight: 700; } .plan__title__em { color: var(--primary_color); } .plan__title__fz150 { font-size: 150%; } .plan__title__fz85 { font-size: 85%; } .plan-common { background: url(../images/plan_bg_02.png) 50% 0 no-repeat; height: 184px; margin: 50px auto 0; padding-bottom: 28px; width: 840px; } .plan-common__title { border-bottom: 1px solid #fff; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.05em; margin: auto; padding: 20px 0; width: 770px; } .plan-common__content { align-items: center; display: flex; gap: 15px; justify-content: center; margin: 20px 0 0 4px; } .plan-common__cost { background: #ff0; border-radius: 18px; color: var(--strong_color); font-size: 18px; font-weight: 500; letter-spacing: 0.08em; line-height: 36px; text-align: center; width: 240px; } .plan-common__cost-num { font-size: 24px; } .plan-common__detail { color: #fff; font-size: 19px; } .plan-list { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 60px; } .plan-list__header { filter: drop-shadow(0 6px 7px rgba(241, 90, 36, 0.4)); height: 158px; padding-top: 20px; position: relative; transform: translateZ(0); } .plan-list__header::after { bottom: -30px; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; display: block; height: 30px; left: 0; position: absolute; width: 100%; } .plan-list__title { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; } .plan-list__cost { background: #ff0; border-radius: 18px; color: var(--strong_color); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; line-height: 36px; margin: 10px auto 0; width: 200px; } .plan-list__cost__num { font-size: 24px; } .plan-list__content { margin-top: 55px; } .plan-list__item { background: #fef1df; padding-bottom: 30px; } .plan-list__term { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.05em; line-height: 2; margin: 25px auto 0; width: 260px; } .plan-list__data { color: var(--strong_color); font-size: 19px; font-weight: 500; line-height: 1.684; margin: 10px auto 0; width: 260px; } .plan-list__item--01 { border: 3px solid var(--primary_color); } .plan-list__item--01 .plan-list__header, .plan-list__item--01 .plan-list__header::after, .plan-list__item--01 .plan-list__term { background: var(--primary_color); } .plan-list__item--01 .plan-list__data__em { color: var(--primary_color); } .plan-list__item--02 { border: 3px solid var(--secondary_color); } .plan-list__item--02 .plan-list__header, .plan-list__item--02 .plan-list__header::after, .plan-list__item--02 .plan-list__term { background: var(--secondary_color); } .plan-list__item--02 .plan-list__data__em { color: var(--secondary_color); } .plan-list__item--03 { border: 3px solid var(--tertiary_color); } .plan-list__item--03 .plan-list__header, .plan-list__item--03 .plan-list__header::after, .plan-list__item--03 .plan-list__term { background: var(--tertiary_color); } .plan-list__item--03 .plan-list__data__em { color: var(--tertiary_color); } .plan__text { color: var(--strong_color); font-size: 26px; letter-spacing: 0.05em; line-height: 1.538; margin: 35px auto 0; width: 900px; } /* ======================================= benefits ======================================= */ .benefits { background: #feecd5; padding: 40px 0 50px; } .benefits__title-wrap { align-items: center; display: flex; gap: 28px; justify-content: center; } .benefits__title-wrap::before, .benefits__title-wrap::after { background: var(--primary_color); content: ""; display: block; height: 1px; width: calc(50% - 283px); } .benefits__title { background: url(../images/benefits_title_bg.png) 50% 0 no-repeat; color: var(--strong_color); letter-spacing: 0.05em; font-size: 40px; font-weight: 700; line-height: 126px; text-align: center; width: 510px; } .benefits__title__fz80 { font-size: 80%; } .benefits__title__em { color: var(--secondary_color); } .benefits__list { display: flex; justify-content: space-between; margin-top: -3px; position: relative; } .benefits__list::before, .benefits__list::after { content: url(../images/benefits_text.png); position: absolute; top: 30px; z-index: 5; } .benefits__list::before { left: 305px; } .benefits__list::after { right: 305px; } .benefits__item { color: var(--strong_color); filter: drop-shadow(0 15px 8px rgba(241, 90, 36, 0.3)); font-size: 28px; font-weight: 500; letter-spacing: 0.05em; line-height: 111px; text-align: center; transform: translateZ(0); width: 327px; } .benefits__item--01 { background: url(../images/benefits01_bg.png) 0 0 no-repeat; } .benefits__item--02 { background: url(../images/benefits02_bg.png) 0 0 no-repeat; } .benefits__item--03 { background: url(../images/benefits03_bg.png) 0 0 no-repeat; } /* ======================================= contact, confirm, thanks ======================================= */ .contact { background: url(../images/contact_bg.png) 50% 0 no-repeat var(--secondary_color); padding: 100px 0 25px; } .contact__title { color: #fff; font-family: var(--font-noto-serif); font-size: 54px; font-weight: 700; letter-spacing: 0.08em; text-align: center; } .contact__box { background: #fff; border: 4px solid #faa02c; margin: 60px auto 0; padding: 40px 0 70px; width: 890px; } .contact__text { font-size: 18px; letter-spacing: 0.04em; line-height: 1.67; margin: auto; text-align: center; width: 660px; } .form-table { font-size: 100%; letter-spacing: 0.04em; line-height: 1.778; margin: 0 120px 0 auto; width: 660px; } .form-table__head, .form-table__data { vertical-align: top; } .form-table__head { padding: 22px 24px 22px 0; text-align: right; width: 180px; } .form-table__data { padding: 20px 0; width: 480px; } .form-table__input { background: #fff; border: 1px solid #ccc; border-radius: 0; color: var(--font_color); font-size: 100%; line-height: 1.778; padding: 3px 14px; width: 100%; } .form-table__input:focus-visible { outline: 2px solid var(--primary_color); } .form-table__input::-webkit-input-placeholder { color: #b3b3b3; } .form-table__input:-ms-input-placeholder { color: #b3b3b3; } .form-table__input::-ms-input-placeholder { color: #b3b3b3; } .form-table__input::placeholder { color: #b3b3b3; } .form-table__input--select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%20%3Cpath%20fill%3D%22333%22%20d%3D%22M0%202h16L8%2014z%22%2F%3E%3C%2Fsvg%3E"); background-position: 97.9% 50%; background-repeat: no-repeat; background-size: 12px auto; cursor: pointer; } .form-table .wpcf7-not-valid-tip { color: #ec184a; display: block; font-size: 80%; margin: 0.5em 0 0; } .contact__btn-wrap { align-items: center; display: flex; gap: 20px; justify-content: center; margin: 30px 0 0; padding-left: 44px; } .contact__btn-wrap .wpcf7-spinner { margin: 0; } .contact__btn { background-repeat: no-repeat; border: 2px solid #fff; box-shadow: 6px 6px 6px rgba(51, 51, 51, 0.2); background-size: 8px auto, 100% 100%; border-radius: 40px; color: #fff; cursor: pointer; display: block; font-size: 24px; font-weight: 700; letter-spacing: 0.18em; line-height: 76px; outline: none; padding: 0; text-align: center; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .contact__btn--confirm { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #ff8300 0%, #ec184a 100%); background-position: 91.25% 50%, 0 0; width: 400px; } .contact__btn--submit { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #ff8300 0%, #ec184a 100%); background-position: 89.394% 50%, 0 0; width: 330px; } .contact__btn--confirm:focus-visible, .contact__btn--submit:focus-visible { outline: 4px solid #ec184a; } @media (any-hover: hover) { .contact__btn--confirm:hover, .contact__btn--submit:hover { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #ec184a 0%, #ec184a 100%); } } .contact__btn--back, .contact__btn--top { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #b6b6b6 0%, #767676 30%); background-position: 88.235% 50%, 0 0; width: 340px; } .contact__btn--back:focus-visible, .contact__btn--top:focus-visible { outline: 4px solid #767676; } @media (any-hover: hover) { .contact__btn--back:hover, .contact__btn--top:hover { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #b6b6b6 0%, #b6b6b6 100%); } } .contact--confirm .contact__box { padding-top: 40px; } .contact--confirm .form-table { margin-top: 30px; } .contact--confirm .form-table__data__text { padding: 3px 12px 8px 12px; } .contact--confirm tr:not(:last-child) .form-table__data__text { border-bottom: 1px solid var(--font_color); } /* ======================================= footer ======================================= */ .footer { background: var(--secondary_color); color: #fff; } .footer__links { padding: 25px 0; } .footer__links ul { display: flex; justify-content: center; } .footer__links li { border-left: 1px solid #fff; letter-spacing: 0.12em; line-height: 1.22; padding: 0 1.6em; } .footer__links li:last-child { border-right: 1px solid #fff; } .footer__links li a { color: #fff; } @media (any-hover: hover) { .footer__links li a:hover { text-decoration: underline; } } .copyright { align-items: center; border: 1px solid #fff; color: #fff; display: flex; font-size: 12px; letter-spacing: 0.12em; justify-content: center; padding: 20px 0 15px; text-align: center; } /* ======================================= error404 ======================================= */ .error404__content { padding: 100px 0; } .error404__lead { font-family: var(--font-noto-serif); font-size: 54px; font-weight: 700; letter-spacing: 0.08em; text-align: center; } .error404__text { font-size: 18px; letter-spacing: 0.04em; line-height: 1.67; margin: 50px auto 0; text-align: center; width: 900px; } .error404__text p { margin-top: 1.5em; } .error404__btn { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #b6b6b6 0%, #767676 30%); background-position: 88.235% 50%, 0 0; background-repeat: no-repeat; border: 2px solid #fff; box-shadow: 6px 6px 6px rgba(51, 51, 51, 0.2); background-size: 8px auto, 100% 100%; border-radius: 40px; color: #fff; display: block; font-size: 24px; font-weight: 700; letter-spacing: 0.18em; line-height: 76px; margin: 50px auto 0; text-align: center; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; width: 340px; } @media (any-hover: hover) { .error404__btn:hover { background-image: url(../images/icon_arrow.svg), linear-gradient(to right, #b6b6b6 0%, #b6b6b6 100%); } }