@charset "UTF-8";
body { background: #d3f4ff; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 1px; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }

main { width: 620px; margin: 0 auto; background: #fff; -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); }

@media screen and (max-width: 768px) { body { width: 100%; background: #fff; }
  main { width: 100%; -webkit-box-shadow: none; box-shadow: none; } }

img { width: 100%; }

.form { position: relative; }

.form .formbtn { position: absolute; top: 67%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; }

.form .formbtn a {
	display: block;
	background: url(../img/submit_btn.png) no-repeat center/contain;
	height: clamp(55px, 17.74194vw, 110px);
	border: 0;
    border-radius: 6px;
    padding: 0;
    margin: 0 auto;
    width: 80%;
    height: 17vw;
    max-height: 110px;
    background-size: 100% 100%;
}

//.form .has-invalid a { pointer-events: none; }

.form-input { position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; right: 0; }

.form-input input { background: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #c2c2c2; height: clamp(45px, 10.32258vw, 64px); text-align: center; display: block; width: 79.6875%; border-radius: 8px; margin: 0 auto; font-size: clamp(16px, 4.19355vw, 26px); }

.form-input input::-webkit-input-placeholder { color: #b4b4b4; }

.form-input input:-ms-input-placeholder { color: #b4b4b4; }

.form-input input::-ms-input-placeholder { color: #b4b4b4; }

.form-input input::placeholder { color: #b4b4b4; }

.has-invalid .form-input::after { content: '正しい郵便番号を入力してください'; display: block; color: red; text-align: center; margin-top: 0.5em; font-size: 1.3em; }

.cta { position: relative; }

.cta a { display: block; position: absolute; width: 79.6875vw; max-width: 510px; bottom: 16%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.form.second .form-input { top: 57%; }

.form.second .formbtn { top: 72%; }

.footerlink { display: -webkit-box; display: -ms-flexbox; display: flex; }

.footerlink a { width: 60.9375%; }

.footerlink a:first-child { width: 39.0625%; }

.footerlink a img { height: 100%; -o-object-fit: cover; object-fit: cover; }

.area-invalid .form-input::after {
	white-space: pre;
	content: '※お客様のお住まいの地域は\A本キャンペーン対象外のため\Aご参加いただけません。';
	display: block;
	color: red;
	text-align: center;
	margin-top: 0.5em;
	font-size: 0.8em;
}

.form .is-close a {
    position: relative;
    pointer-events: none;
}

.form .is-close .error {
    display: block;
}

.form .is-close a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: .4;
}