main {
	border-top:solid 33px var(--color-pink);
}

.narrow {
    max-width:800px;
}

main h1 {
    text-align:center;
    font-size:1.8em;
    font-weight:700;
    color:var(--color-red);
}

.not-null {
    font-size:0.8em;
    color:var(--color-white);
    line-height:1;
    background:#f00;
    border-radius:40px;
    padding:5px 10px;
}

aside.privacy-policy {
    height:200px;
    overflow-y:scroll;
    padding:var(--padding);
    border-radius:var(--radius-inner);
    border:solid 1px var(--color-outline);
}
aside.privacy-policy + label {
    display:flex;
    width:fit-content;
    margin:10px auto;
}
aside.privacy-policy h3 {
    font-size:1.4em;
}
aside.privacy-policy li {
    font-size: 0.8em;
}

form dl.form dt {
    width:200px;
}
form dl.form dd {
    flex:1;
}
form dl.form > div {
    display:flex;
    flex-wrap: nowrap;
    gap:var(--gap);
    align-items: flex-start;
    justify-content: space-between;
}
form dl.form > div:has( .privacy-policy) {
    display:block;
}
form dl.form > div:has( .privacy-policy) dt {
    width:100%;
}
form dl.form dd #postalcode {
    width:8em;
}
form dl.form dd label + label {
    margin-left:20px;
}
form dl.form dd p {
    font-size:0.8em;
}

main .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
    text-align:center;
	padding: 20px calc(35px + 1em) 20px 1em;
	background: var(--color-red);
	color: var(--color-white);
	--clamp-min: 16;
	--clamp-max: 20;
	font-size: var(--clamp);
	font-weight: bold;
	line-height: var(--line-height);
	letter-spacing: 2px;
	border-radius: 12px;
	transition: 0.1s;
	border: none;
	min-width: 360px;
	max-width: 100%;
	transform: translate(-4px, -4px);
	box-shadow: 6px 6px 0 var(--color-gray);
}
main .button::after {
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	background-image: url('../_img/common/button_arrow.svg');
	position: absolute;
	right: 30px;
	transition: 0.1s;
}

main .button:hover {
	filter: unset;
	color: var(--color-white);
	transform: translate(0);
	box-shadow: none;
}

main .button:hover::after {
	transform: translateX(5px);
}

.button-area {
    padding:40px 0;
    text-align:right;
}
.button-download {
    background:#ECDCF1;
    margin-top:60px;
}
.button-download img {
    position:absolute;
    left:0;
    bottom:-40px;
    width:calc(40% - 20px);
}
.button-download .button {
    width:60%;
    background:var(--color-purple);
    margin-top:0;
}

.caution , dd em {
    color:var(--color-red);
    border:solid 1px var(--color-red);
    border-radius:var(--radius-inner);
    font-style: normal;
    display:block;
    padding:5px 10px;
}



@media (width <= 520px) {
    form dl.form > div {
        flex-direction: column;
        gap:5px;
    }
    form dl.form > div :is(dt, dd) {
        width:100%;
    }

    main .button {
        min-width:100%;
    }

    .button-download img {
        left:40px;
        bottom:auto;
        top:-100px;
        width:auto;
        height:100px;
    }
}