/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *: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-width: 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 */ /* 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; } /* 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; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-family: "Noto Sans JP"; } .l-wrap { max-width: 89%; margin: 0 auto; } @media screen and (min-width: 1536px) { .l-wrap { max-width: 1228px; } } @media screen and (max-width: 374px) { .l-wrap-min { padding: 40px 8px; } } @media screen and (min-width: 375px) { .l-wrap-min { padding: 40px 16px; } } @media screen and (min-width: 768px) { .l-wrap-min { padding: 40px 16px; max-width: 62%; margin: 0 auto; } } .u-displaySp { display: block; } @media screen and (min-width: 768px) { .u-displaySp { display: none; } } .u-displayPc { display: none; } @media screen and (min-width: 768px) { .u-displayPc { display: block; } } .form { color: #252525; letter-spacing: 0.03em; font-weight: medium; line-height: 1.4; padding-top: 40px; } .form ::placeholder { color: #aaaaaa; } .bg { background-color: #fff; border-radius: 10px 10px 10px 10px; box-shadow: 0 3px 38px rgba(25, 126, 150, 0.18); } .f-header { padding-top: 20px; } @media screen and (min-width: 1024px) { .f-header { padding-top: 40px; } } .f-header__logo { height: 30x; display: block; margin: 0 auto 32px; } @media screen and (min-width: 768px) { .f-header__logo { height: 42px; } } .fixedbg { display: block; position: fixed; top: 0; width: 100%; height: 100vh; } .top { margin-bottom: 8px; } .top__about { text-align: center; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; margin-top: 12px; } @media screen and (min-width: 576px) { .top__about { font-size: 16px; } } @media screen and (min-width: 1024px) { .top__about { font-size: 20px; } } @media screen and (min-width: 768px) { .top { margin-bottom: 24px; } } .form { position: relative; background: url(../images/form_bg.png) no-repeat top center/cover; } .form__head { text-align: center; font-size: 18px; font-weight: 700; background-color: #5cb6be; color: #fff; padding: 8px 0; border-radius: 10px 10px 0 0; } @media screen and (min-width: 576px) { .form__head { font-size: 28px; } } @media screen and (min-width: 1024px) { .form__head { font-size: 38px; padding: 12px 0; } } .formUnit:not(:first-child) { margin-top: 24px; } @media screen and (min-width: 768px) { .formUnit:not(:first-child) { margin-top: 40px; } } .formUnit__head { display: flex; justify-content: start; align-items: center; font-size: 14px; font-weight: 700; margin-bottom: 8px; } @media screen and (min-width: 1024px) { .formUnit__head { font-size: 20px; } } .formUnit__head_mark_must { font-size: 10px; color: #fff; background-color: #52adb6; padding: 2px 4px; margin-left: 4px; } @media screen and (min-width: 1024px) { .formUnit__head_mark_must { font-size: 12px; margin-left: 8px; } } .formUnit__head_mark_note { font-size: 10px; font-size: 10px; color: #7c7c7c; margin-left: 4px; } @media screen and (min-width: 1024px) { .formUnit__head_mark_note { font-size: 12px; margin-left: 8px; } } .formUnit__head_type_checkbox { align-items: flex-start; } .formUnit__head_type_checkbox > h3 > small { font-size: 12px; } @media screen and (min-width: 768px) { .formUnit__head_type_checkbox > h3 > small { font-size: 16px; } } @media screen and (min-width: 1024px) { .formUnit__head_type_checkbox > h3 > small { font-size: 18px; } } .formUnit__text { font-weight: 400; padding-left: 4px; } @media screen and (min-width: 1024px) { .formUnit__text { font-size: 18px; } } .formUnit__about { position: relative; margin-top: 6px; } @media screen and (min-width: 768px) { .formUnit__about { width: 100%; margin-top: 0; } } .formUnit__about .inputItem:not(:first-child) { margin-top: 12px; } .formUnit__about .inputItem { position: relative; width: 100%; } .formUnit__about .inputItem__radio { opacity: 0; position: absolute; top: 0; left: 0; } .formUnit__about .inputItem__radio + label { cursor: pointer; font-size: 16px; padding-left: 24px; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__radio + label { font-size: 20px; padding-left: 32px; } } .formUnit__about .inputItem__radio + label::before { position: absolute; left: 0; top: calc(50% - 11px); content: ""; width: 20px; height: 20px; border: solid 2px #ed596f; border-radius: 4px; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__radio + label::before { width: 24px; height: 24px; top: calc(50% - 12px); left: 0; } } .formUnit__about .inputItem__radio:checked + label::before { background-color: #ed596f; border: solid 2px rgba(255, 255, 255, 0.38); } .formUnit__about .inputItem__radio:checked + label::after { position: absolute; left: 4px; top: 4px; content: ""; width: 12px; height: 8px; border-left: solid 3px #fff; border-bottom: solid 3px #fff; rotate: -45deg; } @media screen and (min-width: 768px) { .formUnit__about .inputItem__radio:checked + label::after { width: 16px; height: 10px; } } .formUnit__about .inputItem__radio_type_other[type=text] { width: 100%; padding: 12px 20px; border: solid 1px #707070; border-radius: 4px; font-size: 16px; display: none; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__radio_type_other[type=text] { font-size: 20px; } } .formUnit__about .inputItem__checkbox:not(:first-child) { margin-top: 12px; } .formUnit__about .inputItem__checkbox { opacity: 0; position: absolute; top: 0; left: 0; } .formUnit__about .inputItem__checkbox + label { display: block; background-color: #efefef; padding: 12px 20px; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); cursor: pointer; font-size: 16px; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__checkbox + label { font-size: 20px; } } .formUnit__about .inputItem__checkbox:checked + label { background-color: #ce2628; color: #fff; } .formUnit__about .inputItem__checkbox_type_other[type=text] { width: 100%; padding: 12px 20px; border: solid 1px #707070; border-radius: 4px; font-size: 16px; display: none; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__checkbox_type_other[type=text] { font-size: 20px; } } .formUnit__about .inputItem__text { width: 100%; padding: 12px 20px; border-radius: 4px; border: solid 1px #707070; font-size: 16px; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__text { font-size: 20px; } } .formUnit__about .inputItem__text_type_address:not(:first-child) { margin-top: 4px; } .formUnit__about .inputItem__text_state_readonly { background-color: #f2f2f2; } .formUnit__about .inputItem__telNote { position: absolute; right: 0; top: -20px; font-size: 10px; color: #7c7c7c; margin-left: auto; } @media screen and (min-width: 768px) { .formUnit__about .inputItem__telNote { position: static; font-size: 18px; } } .formUnit__about .inputItem__zipcode { width: 50%; padding: 12px 20px; border-radius: 4px; border: solid 1px #707070; font-size: 16px; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__zipcode { font-size: 20px; } } .formUnit__about .inputItem__zipcodeNote { position: absolute; right: 0; top: -20px; font-size: 10px; color: #7c7c7c; margin-left: auto; } @media screen and (min-width: 768px) { .formUnit__about .inputItem__zipcodeNote { position: static; font-size: 18px; } } .formUnit__about .inputItem__select { border: solid 1px #707070; border-radius: 4px; padding: 12px 20px; width: 100%; font-size: 16px; color: #757575; } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__select { font-size: 20px; } } .formUnit__about .inputItem__selectWrap { position: relative; border-radius: 4px; } .formUnit__about .inputItem__selectWrap::after { z-index: -1; position: absolute; content: ""; top: calc(50% - 4px); right: 3%; border-top: solid #252525 12px; border-left: solid transparent 8px; border-right: solid transparent 8px; border-bottom: solid transparent 8px; } .formUnit__about .inputItem__textarea { width: 100%; border: solid 1px #707070; resize: none; height: 240px; font-size: 16px; padding: 12px 20px; } @media screen and (min-width: 768px) { .formUnit__about .inputItem__textarea { height: 200px; } } @media screen and (min-width: 1024px) { .formUnit__about .inputItem__textarea { font-size: 20px; } } .formUnit__about .inputItem__error { display: none; font-size: 12px; color: #db0000; } @media screen and (min-width: 768px) { .formUnit__about .inputItem__error { font-size: 18px; } } .formUnit__about .privacyWrap { margin: 0 auto; border: solid 1px #707070; padding: 12px 20px; height: 160px; overflow-y: scroll; background-color: #e8e8e8; font-size: 12px; } @media screen and (min-width: 1024px) { .formUnit__about .privacyWrap { font-size: 16px; } } .submitWrap { margin-top: 24px; } .submitWrap_text { font-size: 12px; text-align: center; } @media screen and (min-width: 1024px) { .submitWrap_text { font-size: 16px; } } .submitWrap_text > a { text-decoration: underline; color: #3ca2ba; } .submitWrap__button { display: block; position: relative; font-size: 16px; text-align: center; background-color: #ed596f; color: #fff; width: 80%; margin: 4px auto 0; padding: 12px 0; border-radius: 8px; letter-spacing: 0.1em; font-weight: 700; cursor: pointer; } .submitWrap__button > span { display: inline-block; position: relative; } .submitWrap__button > span::after { background: url(../images/cta_btnArrow.png) no-repeat top center/contain; position: absolute; content: ""; width: 24px; height: 24px; top: calc(50% - 12px); right: -40px; } @media screen and (min-width: 768px) { .submitWrap__button > span::after { width: 28px; height: 28px; top: calc(50% - 14px); right: -64px; } } @media screen and (min-width: 768px) { .submitWrap__button { width: 52%; margin: 12px auto 0; } } @media screen and (min-width: 1024px) { .submitWrap__button { padding: 20px 0; font-size: 20px; } } .f-footer { background-color: #2db6ac; color: #fff; text-align: center; padding: 8px 0; margin-top: 56px; font-size: 10px; } .thanks { max-width: 520px; margin: 0 auto; line-height: 1.6; } @media screen and (min-width: 768px) { .thanks { max-width: 1228px; } } .thanks .head { max-width: 60%; margin: 0 auto; } @media screen and (min-width: 768px) { .thanks .head { max-width: 40%; } } .thanks .head__image { width: 100%; } .thanks .contents { margin-top: 24px; } .thanks .contents .main { text-align: center; margin-top: 16px; font-size: 16px; } @media screen and (min-width: 768px) { .thanks .contents .main { font-size: 20px; } } .thanks .contents .note { max-width: 92%; margin-left: auto; margin-right: auto; background-color: #eff8f2; padding: 12px 0; text-align: center; margin-top: 16px; font-size: 16px; } @media screen and (min-width: 768px) { .thanks .contents .note { font-size: 20px; margin-top: 32px; } } .thanks .contents .alert { max-width: 92%; margin-left: auto; margin-right: auto; text-align: center; margin-top: 16px; font-size: 16px; } @media screen and (min-width: 768px) { .thanks .contents .alert { font-size: 20px; margin-top: 32px; } } .thanks .contents .alert__email { padding-top: 12px; padding-bottom: 12px; margin-top: 12px; margin-bottom: 12px; border-top: dotted 1px #d0d0d0; border-bottom: dotted 1px #d0d0d0; } @media screen and (min-width: 768px) { .thanks .contents .alert__email { margin-top: 24px; padding-top: 24px; padding-bottom: 24px; } } @media screen and (min-width: 768px) { #unique_label { font-size: 20px !important; } } @media screen and (max-width: 374px) { #unique_label { font-size: 11px; } } @media screen and (min-width: 768px) { #unique_label { font-size: 16px; font-weight: 700; } } @media screen and (max-width: 374px) { #unique_text { font-size: 10px; } } @media screen and (min-width: 375px) { #unique_text { font-size: 12px; } } @media screen and (min-width: 375px) and (min-width: 576px) { #unique_text { font-size: 12px; } } @media screen and (min-width: 375px) and (min-width: 768px) { #unique_text { font-size: 18px; } } .sp-gap { gap: 0; }/*# sourceMappingURL=form.css.map */