@charset "utf-8";


/* ----------------------------------------------------------------------
	form
---------------------------------------------------------------------- */

/* l-form */
.l-contact-message { margin: 0 0 60px; }

.l-contact-message--thanks { margin: 0 0 120px; }

.l-contact-message__catch {
    color: var(--color-red);
    font-size: 2rem;
    text-align: center;
    margin: 0 0 1em;
}

.l-contact-message__caution {
    text-align: center;
    margin: 0 0 1.8em;
}

.l-contact-message__caution ul {
	text-align: left;
    display: inline-block;
}

.l-contact-message__caution ul li { margin: 0 0 0.6em; }
.l-contact-message__caution ul li:last-child { margin: 0; }

.l-contact-tel p { margin: 0 0 0.4em; }

@media screen and (max-width: 990px) {	
    .l-contact-message { margin: 0 0 40px; }

    .l-contact-message__catch { font-size: 1.8rem; }

    .l-contact-message__caution {
        text-align: center;
        margin: 0 0 1.6em;
    }

    .l-contact-tel dl dt { margin: 0 0 0.4em; }
}


.l-form-item {
	width: 100%;
	display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.l-form-item:first-child { border-top: 1px solid var(--color-border); }

.l-form-item dt {
	padding: 20px 0;
	width: 240px;
}

.l-form-item dt span {
	background: var(--color-red);
	color: var(--color-white);
	font-size: 1.2rem;
	text-align: center;
	line-height: 1;
	padding: 6px 0 6px;
	margin-left: 0.5em;
	width: 40px;
	display: inline-block;
    border-radius: 5px;
}

.l-form-item dd { padding: 20px; }

.l-form-item dd .error,
.l-form-privacy .error {
	color: var(--color-red);;
	margin-top: 0.6em;
	display: block;
}

.l-form-item dd input[type="text"],
.l-form-item dd input[type="email"],
.l-form-item dd input[type="tel"],
.l-form-item dd textarea {
	width: 600px;
	padding: 10px;
	border: 1px solid var(--color-border);
	box-sizing: border-box;
}

.l-form-item dd textarea { height: 160px; }

.l-form-column {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.l-form-item dd label input { margin-right: 0.5em; }

.l-form-privacy {
	text-align: center;
	padding:  50px 0;
	border-bottom: 1px solid var(--color-border);
	margin: 0 0 50px;
}

.l-form-privacy dl { margin: 0 0 1.4em; }
.l-form-privacy dl dt {
    font-weight: 600;
    margin: 0 0 0.6em;
}
.l-form-privacy dl dd span { display: block; }

.l-form-privacy label {
	text-align: center;
	padding: 12px 0;
	margin: 0 auto;
	width: 200px;
	display: block;
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: 0.7s;
    border-radius: 1000px;
}

.l-form-privacy label input { margin-right: 0.5em; }

.l-form-send-form { text-align: center; }

.l-form-send-form form { display: inline; }

.l-form-send-form input[type="submit"] {
	background: var(--color-red);
	color: var(--color-white);
	font-size: 1.8rem;
	line-height: 1;
	width: 260px;
	height: 52px;
	border: none;
    border-radius: 26px;
}

.l-form-send-form input[type="submit"].back { background: var(--color-black); }
.l-form-send-form input[type="submit"].yellow { background: var(--color-yellow); }
.l-form-send-form input[type="submit"]:hover {
	opacity:0.8;
	transition: 0.7s;
}

.l-form-caution {
    text-align: center;
    margin: 1.4em 20px 0;
} 

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { color:transparent; }

@media screen and (max-width: 990px) {
    .l-form-item { display: block; }

    .l-form-item dt {
        padding: 20px 20px 0;
        width: 100%;
    }

    .l-form-item dt span {
        background: var(--color-red);
        color: var(--color-white);
        font-size: 1.2rem;
        text-align: center;
        line-height: 1;
        padding: 6px 0 6px;
        margin-left: 0.5em;
        width: 40px;
        display: inline-block;
        border-radius: 5px;
    }

    .l-form-item dd { padding: 20px; }

    .l-form-item dd input[type="text"],
    .l-form-item dd input[type="email"],
    .l-form-item dd input[type="tel"],
    .l-form-item dd textarea { width: 100%; }
    
    .l-form-column { gap: 10px; }
    
    .l-form-column label { width: 100%; }

    .l-form-privacy {
        text-align: center;
        padding:  30px 20px;
        margin: 0 0 40px;
    }
    
    .l-form-privacy dl dd { text-align: left; }
    
    .l-form-privacy dl dd span { display: inline; }
    
    .l-form-send-form { padding: 0 20px; }
    .l-form-send-form input[type="submit"] { width: 100%; }
}