@charset "UTF-8";

div[data-area=formArea],
#formArea {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding-bottom: 100px;
box-sizing: border-box;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
scroll-snap-type: x mandatory;
}
@media screen and (max-width: 750px) {
div[data-area=formArea],
#formArea {
max-width: calc(100% - 40px);
}
}
div[data-area=formArea] *,
#formArea * {
box-sizing: border-box;
}
div[data-area=formArea] a,
#formArea a {
text-decoration: none;
}
div[data-area=formArea] img,
#formArea img {
vertical-align: middle;
border-style: none;
} div[data-area=formArea] .form-ttl-01,
#formArea .form-ttl-01 {
font-size: 24px;
text-align: center;
margin-top: 0;
margin-bottom: 50px;
color: #707478;
line-height: 4.2rem;
font-weight: 500;
scroll-snap-align: start;
} div[data-area=formArea] .form-notes-01,
#formArea .form-notes-01 {
font-size: 12px;
color: #707478;
text-align: right;
margin: 0;
margin-bottom: 10px;
scroll-snap-align: start;
scroll-margin: 1rem;
}
div[data-area=formArea] .form-notes-01 .form-label-mark,
#formArea .form-notes-01 .form-label-mark {
margin-left: 0;
margin-right: 6px;
background: #f35a53;
}
div[data-area=formArea] .formrun,
#formArea .formrun {
scroll-snap-align: start;
scroll-margin: 20rem;
}
div[data-area=formArea] .form-elm,
#formArea .form-elm {
width: 100%;
margin-top: 20px;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-elm,
#formArea .form-elm {
margin-top: 16px;
}
}
div[data-area=formArea] .form-label,
#formArea .form-label {
margin: 0 0 8px;
padding-right: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-label,
#formArea .form-label {
margin-bottom: 6px;
max-width: 100%;
width: 100%;
justify-content: flex-start;
}
}
div[data-area=formArea] .form-label-ttl,
#formArea .form-label-ttl {
display: block;
font-size: 18px;
color: #333333;
margin: 0;
position: relative;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-label-ttl,
#formArea .form-label-ttl {
font-size: 16px;
}
} div[data-area=formArea] .form-label-mark,
#formArea .form-label-mark {
color: #ffffff;
width: 44px;
height: 20px;
font-size: 13px;
line-height: 20px;
font-weight: bold;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
background-color: #707070;
border-radius: 2px;
vertical-align: middle;
box-sizing: border-box;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-label-mark,
#formArea .form-label-mark {
font-size: 12px;
width: 38px;
height: 17px;
margin-left: 8px;
}
} div[data-area=formArea] .required .form-label-mark,
#formArea .required .form-label-mark {
background-color: #f35a53;
} div[data-area=formArea] .form-label-note,
#formArea .form-label-note {
font-size: 13px;
color: #333333;
display: block;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-label-note,
#formArea .form-label-note {
display: inline-block;
margin-left: 12px;
}
} div[data-area=formArea] .form-field,
#formArea .form-field {
width: 100%;
} div[data-area=formArea] .form-field-2col,
#formArea .form-field-2col {
display: flex;
-moz-column-gap: 40px;
column-gap: 40px;
row-gap: 12px;
flex-wrap: wrap;
} div[data-area=formArea] .form-field-2col.checkbox.-sm-2col,
#formArea .form-field-2col.checkbox.-sm-2col {
-moz-column-gap: 18px;
column-gap: 18px;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-field-2col,
#formArea .form-field-2col {
row-gap: 8px;
} div[data-area=formArea] .form-field-2col.radiobtn,
#formArea .form-field-2col.radiobtn {
-moz-column-gap: 17px;
column-gap: 17px;
}
}
div[data-area=formArea] .form-field-col,
#formArea .form-field-col {
flex-basis: calc(50% - 20px);
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-field-col,
#formArea .form-field-col {
flex-basis: 100%;
} div[data-area=formArea] .form-field-2col.radiobtn .form-field-col,
#formArea .form-field-2col.radiobtn .form-field-col {
flex-basis: calc(50% - 8.5px);
} div[data-area=formArea] .form-field-2col.checkbox .form-field-col,
#formArea .form-field-2col.checkbox .form-field-col {
flex-basis: 70%;
} div[data-area=formArea] .form-field-2col.checkbox.-sm-2col .form-field-col,
#formArea .form-field-2col.checkbox.-sm-2col .form-field-col {
flex-basis: calc(50% - 9px);
flex-basis: auto;
}
} div[data-area=formArea] .form-field-ttl,
#formArea .form-field-ttl {
font-size: 14px;
margin: 16px 0 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-field-ttl,
#formArea .form-field-ttl {
font-size: 14px;
margin: 12px 0 4px;
justify-content: flex-start;
}
} div[data-area=formArea] .form-field-note,
#formArea .form-field-note {
font-size: 13px;
} div[data-area=formArea] .form-field-note.block,
#formArea .form-field-note.block {
display: block;
} div[data-area=formArea] .form-field input[type=text],
#formArea .form-field input[type=text],
div[data-area=formArea] .form-field input[type=date],
#formArea .form-field input[type=date],
div[data-area=formArea] .form-field textarea,
#formArea .form-field textarea,
div[data-area=formArea] .form-field select,
#formArea .form-field select {
font-family: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
font-size: 16px;
line-height: 1.5;
padding: 11px 10px;
margin: 0;
border-radius: 4px;
background-color: #f9f9f9;
border: solid 1px #cccccc;
} div[data-area=formArea] .form-field input[type=text],
#formArea .form-field input[type=text],
div[data-area=formArea] .form-field input[type=date],
#formArea .form-field input[type=date] {
height: 48px;
}
div[data-area=formArea] .form-field input[type=date],
#formArea .form-field input[type=date] {
cursor: pointer;
} div[data-area=formArea] .form-field textarea,
#formArea .form-field textarea {
height: 120px;
overflow: auto;
resize: vertical;
} div[data-area=formArea] .form-field .form-select-wrap,
#formArea .form-field .form-select-wrap {
width: 100%;
text-align: center;
position: relative;
border-radius: 4px;
background-color: #f9f9f9;
} div[data-area=formArea] .form-field .form-select-wrap:before,
#formArea .form-field .form-select-wrap:before {
content: "";
position: absolute;
top: 22px;
right: 8px;
width: 0;
height: 0;
padding: 0;
border-left: 4.5px solid transparent;
border-right: 4.5px solid transparent;
border-top: 4px solid #666666;
pointer-events: none;
box-sizing: border-box;
} div[data-area=formArea] .form-field select,
#formArea .form-field select {
display: block;
position: relative;
height: 48px;
cursor: pointer;
text-overflow: ellipsis;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
} div[data-area=formArea] .form-field-check-radio,
#formArea .form-field-check-radio {
display: inline-block;
background: #f9f9f9;
padding: 11px 12px;
border-radius: 4px;
border: 1px solid #cccccc;
width: 100%;
cursor: pointer;
position: relative;
}
div[data-area=formArea] .form-field-check-radio input,
#formArea .form-field-check-radio input {
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
div[data-area=formArea] .form-field-check-radio .form-field-check-radio-ttl,
#formArea .form-field-check-radio .form-field-check-radio-ttl {
position: relative;
font-size: 16px;
padding-left: 24px;
display: block;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-field-check-radio .form-field-check-radio-ttl,
#formArea .form-field-check-radio .form-field-check-radio-ttl {
font-size: 15px;
}
} div[data-area=formArea] .form-field-check-radio.checkbox .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio.checkbox .form-field-check-radio-ttl:before {
position: absolute;
content: "";
left: 0;
top: 50%;
display: block;
width: 20px;
height: 20px;
border-radius: 4px;
border: solid 1px #cccccc;
background-color: #ffffff;
box-sizing: border-box;
transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-field-check-radio.checkbox .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio.checkbox .form-field-check-radio-ttl:before {
width: 18px;
height: 18px;
}
} div[data-area=formArea] .form-field-check-radio input:focus + .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio input:focus + .form-field-check-radio-ttl:before {
box-shadow: 0 0 6px 0px #62d843;
} div[data-area=formArea] .form-field-check-radio.checkbox input[type=checkbox]:checked + .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio.checkbox input[type=checkbox]:checked + .form-field-check-radio-ttl:before {
background: #3ab5dd;
border: none;
} div[data-area=formArea] .form-field-check-radio.checkbox input[type=checkbox]:checked + .form-field-check-radio-ttl:after,
#formArea .form-field-check-radio.checkbox input[type=checkbox]:checked + .form-field-check-radio-ttl:after {
content: "";
left: 3px;
top: 50%;
margin-top: -2px;
position: absolute;
display: block;
background-color: transparent;
z-index: 1;
width: 13px;
height: 8px;
transform: translateY(-50%) rotate(-45deg);
border-bottom: solid 3px #fff;
border-left: solid 3px #fff;
border-radius: 2px;
box-sizing: border-box;
} div[data-area=formArea] .form-field-check-radio.radiobtn .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio.radiobtn .form-field-check-radio-ttl:before {
position: absolute;
content: "";
left: 0;
top: 50%;
display: block;
width: 20px;
height: 20px;
border-radius: 4px;
border: solid 1px #cccccc;
background-color: #ffffff;
border-radius: 50%;
box-sizing: border-box;
transform: translateY(-50%);
} div[data-area=formArea] .form-field-check-radio.radiobtn input[type=radio]:checked + .form-field-check-radio-ttl:before,
#formArea .form-field-check-radio.radiobtn input[type=radio]:checked + .form-field-check-radio-ttl:before {
border: solid 5px #3ab5dd;
} div[data-area=formArea] .form-field-check-radio.radiobtn input[type=radio]:checked + .form-field-check-radio-ttl:after,
#formArea .form-field-check-radio.radiobtn input[type=radio]:checked + .form-field-check-radio-ttl:after {
content: none;
left: 3px;
top: 1px;
position: absolute;
display: block;
background-color: transparent;
z-index: 1;
width: 14px;
height: 9px;
transform: rotate(-45deg);
border-bottom: solid 3px #fff;
border-left: solid 3px #fff;
border-radius: 2px;
box-sizing: border-box;
} div[data-area=formArea] .form-elm_btns,
#formArea .form-elm_btns {
width: 100%;
display: flex;
-moz-column-gap: 40px;
column-gap: 40px;
justify-content: center;
margin-top: 33px;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-elm_btns,
#formArea .form-elm_btns {
flex-direction: row;
-moz-column-gap: 17px;
column-gap: 17px;
}
} div[data-area=formArea] *[class*=form-btn],
#formArea *[class*=form-btn] {
font-size: 18px;
color: #ffffff;
font-weight: bold;
line-height: 1.44;
height: 50px;
padding: 10px 0;
transition: all 0.5s ease 0s;
border: 0;
border-radius: 4px;
} div[data-area=formArea] .form-btn_confirm,
#formArea .form-btn_confirm {
flex-basis: 370px;
margin: 0 auto;
background-color: #12b3cc;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
}
div[data-area=formArea] .form-btn_back.formrun-system-show + .form-btn_confirm,
#formArea .form-btn_back.formrun-system-show + .form-btn_confirm {
margin: 0;
flex-basis: calc(50% - 20px);
max-width: 280px;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-btn_confirm,
#formArea .form-btn_confirm {
height: 42px;
flex-basis: 100%;
}
div[data-area=formArea] .form-btn_back.formrun-system-show + .form-btn_confirm,
#formArea .form-btn_back.formrun-system-show + .form-btn_confirm {
flex-basis: calc(50% - 8.5px);
}
}
div[data-area=formArea] .form-btn_confirm:hover,
#formArea .form-btn_confirm:hover {
color: #12b3cc;
border: solid 2px #12b3cc;
background-color: #ffffff;
} div[data-area=formArea] .form-btn_back.formrun-system-show,
#formArea .form-btn_back.formrun-system-show {
font-weight: 700;
margin: 0;
margin-right: 0;
background-color: #949494;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(50% - 20px);
max-width: 280px;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .form-btn_back.formrun-system-show,
#formArea .form-btn_back.formrun-system-show {
height: 42px;
width: calc(50% - 8.5px);
}
}
div[data-area=formArea] .form-btn_back.formrun-system-show:hover,
#formArea .form-btn_back.formrun-system-show:hover {
color: #949494;
border: solid 2px #949494;
background-color: #fff;
} div[data-area=formArea] small[data-formrun-show-if-error].formrun-system-show,
#formArea small[data-formrun-show-if-error].formrun-system-show {
color: #f00;
font-size: 14px;
font-weight: normal;
display: block;
text-align: left;
} div[data-area=formArea] .form-field .form-field-check-radio.is-disabled,
#formArea .form-field .form-field-check-radio.is-disabled,
div[data-area=formArea] .form-field select[readonly=readonly],
#formArea .form-field select[readonly=readonly],
div[data-area=formArea] .form-field input[readonly=readonly],
#formArea .form-field input[readonly=readonly],
div[data-area=formArea] .form-field textarea[readonly=readonly],
#formArea .form-field textarea[readonly=readonly] {
pointer-events: none;
} div[data-area=formArea] .form-field .form-field-check-radio.is-disabled,
#formArea .form-field .form-field-check-radio.is-disabled,
div[data-area=formArea] .form-field .form-field-check-radio.is-disabled .form-field-check-radio-ttl:before,
#formArea .form-field .form-field-check-radio.is-disabled .form-field-check-radio-ttl:before,
div[data-area=formArea] .form-field select[readonly=readonly],
#formArea .form-field select[readonly=readonly],
div[data-area=formArea] .form-field input[readonly=readonly],
#formArea .form-field input[readonly=readonly],
div[data-area=formArea] .form-field textarea[readonly=readonly],
#formArea .form-field textarea[readonly=readonly] {
background: #ddd;
} div[data-area=formArea] .form-field select[readonly=readonly]:-webkit-autofill,
#formArea .form-field select[readonly=readonly]:-webkit-autofill,
div[data-area=formArea] .form-field input[readonly=readonly]:-webkit-autofill,
#formArea .form-field input[readonly=readonly]:-webkit-autofill,
div[data-area=formArea] .form-field textarea[readonly=readonly]:-webkit-autofill,
#formArea .form-field textarea[readonly=readonly]:-webkit-autofill {
box-shadow: 0 0 0px 999px #ddd inset;
} div[data-area=formArea] .u-mt-10,
#formArea .u-mt-10 {
margin-top: 10px;
}
div[data-area=formArea] .u-mb-10,
#formArea .u-mb-10 {
margin-bottom: 10px;
}
.u-text-align-center,
#formArea .u-text-align-center {
text-align: center;
}
div[data-area=formArea] .u-font-size-16,
#formArea .u-font-size-16 {
font-size: 16px;
}
div[data-area=formArea] .u-link,
#formArea .u-link {
text-decoration: underline;
}
div[data-area=formArea] .is-hidden,
#formArea .is-hidden {
display: none;
}
div[data-area=formArea] .pc-only,
#formArea .pc-only,
.area-thanks .pc-only {
display: block;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .pc-only,
#formArea .pc-only,
.area-thanks .pc-only {
display: none;
}
}
div[data-area=formArea] .sp-only,
#formArea .sp-only,
.area-thanks .sp-only {
display: none;
}
@media screen and (max-width: 750px) {
div[data-area=formArea] .sp-only,
#formArea .sp-only,
.area-thanks .sp-only {
display: initial;
}
} .form-wrap[aria-hidden=true] {
display: none;
} div[data-area=formArea] .form-desc-box__subtitle,
#formArea .form-desc-box__subtitle {
font-size: 16px;
margin: 10px auto 10px;
}
div[data-area=formArea] .form-desc-box,
#formArea .form-desc-box {
font-size: 16px;
border: 1px solid #ccc;
margin: 0 0 20px;
padding: 10px 20px;
width: 100%;
height: 200px;
overflow-y: scroll;
} .thanks-body {
padding: 0;
margin: 0;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.area-thanks {
width: 100%;
border-top: 4px solid #3ab5dd;
color: #333;
}
.area-thanks p {
margin: 0;
padding: 0;
}
.area-thanks .form-thanks-ttl-01 {
font-size: 36px;
font-weight: 500;
width: 100%;
text-align: center;
margin: 0 0 40px;
padding: 56px 0 26px;
color: #444444;
border-bottom: 1px solid #eeeeee;
}
@media screen and (max-width: 750px) {
.area-thanks .form-thanks-ttl-01 {
font-size: 32px;
}
}
.area-thanks .form-thanks-ttl-01 span {
color: #3ab5dd;
font-size: 24px;
text-align: center;
font-weight: bold;
font-family: "Roboto", sans-serif;
opacity: 0.35;
display: block;
}
.area-thanks .form-thanks-cont {
margin: 0 auto;
padding-bottom: 30px;
text-align: center;
}
@media screen and (max-width: 750px) {
.area-thanks .form-thanks-cont {
width: calc(100% - 32px);
}
}
.area-thanks .form-thanks-lead,
.area-thanks .form-thanks-text {
font-size: 18px;
line-height: 2.22;
margin-bottom: 60px;
}
.area-thanks .form-thanks-lead {
font-weight: 500;
}
.area-thanks .form-thanks-text {
font-size: 18px;
color: #333;
}
@media screen and (max-width: 750px) {
.area-thanks .form-thanks-lead,
.area-thanks .form-thanks-text {
font-size: 15px;
}
}
.area-thanks .form-thanks-back-btn {
margin: 0 auto 18px;
box-sizing: border-box;
}
.area-thanks .form-thanks-back-btn a {
width: 100%;
margin: 0 auto;
padding: 16px 10px;
max-width: 320px;
font-size: 16px;
line-height: 1.5;
font-weight: bold;
background: #3ab5dd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
text-decoration: none;
box-sizing: border-box;
transition: all 0.3s;
border: 2px solid transparent;
}
.area-thanks .form-thanks-back-btn a:hover {
color: #3ab5dd;
background: #fff;
border: 2px solid currentColor;
box-sizing: border-box;
}
@media screen and (max-width: 750px) {
.area-thanks .form-thanks-back-btn a {
max-width: calc(100% - 50px);
}
}
.form-thanks-info {
font-size: 15px;
line-height: 1.6;
}
@media screen and (max-width: 750px) {
.form-thanks-info {
font-size: 14px;
}
}