@charset "UTF-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.9 (last updated 19.6.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):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 */ ::-webkit-input-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::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; } /*chromeの補完機能OFF*/ input:-webkit-autofill { -webkit-transition: background-color 5000s ease-in-out 0s !important; transition: background-color 5000s ease-in-out 0s !important; } 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%; } /* ======================================= lp ======================================= */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: #fff; color: #302c2b; font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1; width: 100%; } @media only screen and (max-width: 750px) { body { font-size: 3.467vw; } } @media only screen and (min-width: 751px) { body { font-size: 26px; } } img { max-width: 100%; vertical-align: bottom; } .wrapper { background: url(../img/bg_02.jpg) no-repeat, url(../img/bg_01.jpg) no-repeat #d3e0fb; background-position: 0 25em, 0 0; background-size: 100% auto; margin: auto; max-width: 750px; overflow: hidden; position: relative; } .kv { padding-top: 11.154em; } .lead { margin: 0 auto; width: 90.4%; } .title { margin: 1.538em auto 0; width: 90.4%; } .trouble { margin-top: 1.154em; position: relative; } .trouble-list { background: linear-gradient(30deg, rgb(209, 233, 255) 0%, rgb(210, 234, 255) 2.42%, rgb(243, 249, 255) 65.33%, rgb(255, 255, 255) 100%); border: 0.167em solid #fff; border-radius: 0.833em; box-shadow: 0.292em 0.292em 0.208em rgba(64, 86, 196, 0.3); font-size: 92.308%; font-weight: 500; line-height: 1.667; margin: 0 auto 0 2.667%; padding: 0.833em; width: 84%; } .trouble-em { color: #285e94; font-weight: 700; } .trouble-item { padding-left: 1.25em; position: relative; width: 17.542em; } .trouble-item:not(:last-child) { background: url(../img/border.png) 0 100%/100% auto no-repeat; } .trouble-item::before { background: url(../img/check_01.png) 0 0/contain no-repeat; content: ""; display: inline-block; height: 1em; left: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1em; } .solve { left: 63.067%; position: absolute; top: -0.577em; width: 37.6%; } .feature { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.346em; } .feature-item { align-items: center; background: linear-gradient(30deg, rgb(255, 249, 217) 0%, rgb(255, 251, 230) 12.44%, rgb(255, 253, 244) 33.09%, rgb(255, 255, 252) 58.22%, rgb(255, 255, 255) 100%); border: 0.154em solid #fff; border-radius: 0.769em; box-shadow: 0.269em 0.269em 0.192em rgba(64, 86, 196, 0.3); display: flex; height: 6.462em; justify-content: center; margin: 0.769em 0.867% 0; position: relative; text-align: center; width: 30.4%; } .feature-item::before { background: url(../img/check_02.png) 0 0/contain no-repeat; content: ""; display: inline-block; height: 1.385em; left: 50%; position: absolute; top: -0.577em; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1.538em; } .feature-text { font-size: 107.692%; font-weight: 600; line-height: 1.357em; padding-top: 0.5em; } .feature-text .text-l { color: #ff6803; font-size: 128.571%; } .form { margin-top: 1.538em; width: 100%; } .step7 { margin: auto; width: 89.333%; } .form-lead { letter-spacing: 0.2em; margin: -0.962em auto 0; text-align: center; } .form-text { font-size: 115.385%; line-height: 1.867em; margin: 1.867em auto 0; text-align: center; } form { nav-index: auto; overflow: hidden; position: relative; } form.section1-active { height: 20.462em; } form.section2-active { height: 31.923em; } form.section3-active { height: 31.923em; } form.section4-active { height: 27.462em; } form.section5-active { height: 18.538em; } form.section6-active { height: 47.923em; } form.section7-active { height: 35.846em; } .form-area { display: flex; } @media only screen and (max-width: 750px) { .form-area { width: 700vw; } } @media only screen and (min-width: 751px) { .form-area { width: 5250px; } } .form-section { padding: 1.923em 0 2.692em; width: 14.2857142857%; } .form-cards { background: linear-gradient(30deg, rgb(209, 233, 255) 0%, rgb(210, 233, 255) 0.53%, rgb(230, 243, 255) 17.67%, rgb(244, 250, 255) 37.09%, rgb(252, 254, 255) 60.71%, rgb(255, 255, 255) 100%); border: 0.154em solid #fff; border-radius: 0.769em; box-shadow: 0.269em 0.269em 0.192em rgba(64, 86, 196, 0.3); margin: auto; padding: 1.731em 0 2.5em; position: relative; width: 25.769em; } .form-num { height: 3.692em; left: -0.385em; position: absolute; top: -0.615em; width: 3.692em; } .form-title { font-size: 123.077%; padding-left: 1em; text-align: center; } .form-section-list { display: flex; flex-wrap: wrap; margin: 1.154em 0 0 0.385em; } .form-section-item { margin: 0.5em 0.423em; width: 11.538em; } input[type=radio] { display: none; } .form-radio-label { background: #fff; border: 0.115em solid; border-radius: 0.769em; cursor: pointer; display: block; font-size: 107.692%; letter-spacing: 0.025em; line-height: 3; text-align: center; } input[type=radio]:checked + .form-radio-label { color: #fff; } .form-section-group { margin: 1.538em auto 0; position: relative; width: 20em; } .form-label { font-size: 107.692%; letter-spacing: 0.025em; position: relative; } .form-label::after { content: "※必須"; color: #f98363; font-size: 82.143%; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } select, .required-input { background: #f1f2f2; border: 0.133em solid #c3c4c4; border-radius: 0.333em; font-size: 115.385%; line-height: 1; margin-top: 0.4em; width: 100%; } select::-webkit-input-placeholder, .required-input::-webkit-input-placeholder { color: #838383; } select:-ms-input-placeholder, .required-input:-ms-input-placeholder { color: #838383; } select::-ms-input-placeholder, .required-input::-ms-input-placeholder { color: #838383; } select::placeholder, .required-input::placeholder { color: #838383; } select:focus-visible, .required-input:focus-visible { outline: none; } select.errors, .required-input.errors { border-color: red; } .required-input { padding: 0.833em 0.667em; } select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2020%22%3E%20%3Cpath%20fill%3D%22%23afafb0%22%20d%3D%22M12%2020%2024%200H0l12%2020z%22%2F%3E%3C%2Fsvg%3E"); background-position: 95% 50%; background-size: 0.8em auto; background-repeat: no-repeat; cursor: pointer; padding: 1.067em 0.667em; } .errors + .required { background: red; color: #fff; font-size: 88.462%; padding: 0.3em 0.5em; position: absolute; right: 0; top: -0.2em; } .errors + .required::after { border-color: red transparent transparent; border-style: solid; border-width: 0.4em 0.4em 0; bottom: 1px; content: ""; display: block; height: 0; left: 50%; position: absolute; -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); width: 0; } .privacy { color: #838383; font-size: 96.154%; letter-spacing: 0.025em; margin-top: 2.8em; text-align: center; } .privacy a { color: #c46ba7; text-decoration: underline; } @media (any-hover: hover) { .privacy a:hover { text-decoration: none; } } .form-section-btns { text-align: center; } .form-section-btn { cursor: pointer; } .form-section-btn.btn-back { color: #838383; letter-spacing: 0.025em; margin-top: 1.538em; } .form-section-btn.btn-next, .form-section-btn.btn-submit { border-radius: 0.667em; color: #fff; display: block; font-size: 115.385%; font-weight: 600; line-height: 4; width: 13.333em; } .section1 .form-radio-label { border-color: #f9a063; color: #f9a063; } .section1 input[type=radio]:checked + .form-radio-label { background: #f9a063; } .section2 .form-radio-label { border-color: #86ba00; color: #86ba00; } .section2 input[type=radio]:checked + .form-radio-label { background: #86ba00; } .section3 .form-radio-label { border-color: #42b9b8; color: #42b9b8; } .section3 input[type=radio]:checked + .form-radio-label { background: #42b9b8; } .section4 .form-radio-label { border-color: #2c9cff; color: #2c9cff; } .section4 input[type=radio]:checked + .form-radio-label { background: #2c9cff; } .section5 .form-radio-label { border-color: #4056c4; color: #4056c4; } .section5 input[type=radio]:checked + .form-radio-label { background: #4056c4; } .section6 .form-title { padding-left: 2.2em; } .section6 .form-section-btn.btn-next { background: #8856a9; margin: 2.333em auto 0; } .section7 .form-section-btn.btn-submit { background: #c46ba7; margin: 0.667em auto 0; } /*thanks*/ .wrapper.thanks { background: url(../img/bg_03.jpg) 0 0/100% auto no-repeat #d3e0fb; height: 100vh; height: 100dvh; min-height: 46.154em; padding: 3.654em 0 3.846em; } .thanks-title { margin: auto; width: 89.333%; } .thanks-text { font-weight: 300; letter-spacing: 0.025em; line-height: 2.231em; margin: 1em auto 0; text-align: center; } .thanks-text p + p { margin-top: 2em; } .line { display: block; margin: 3.077em auto 0; width: 21.333%; } @media (any-hover: hover) { .line:hover { opacity: 0.8; } }/*# sourceMappingURL=style.css.map */