@charset "utf-8";


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

/* l-form-message */
.l-form-message {
	font-size: 1.8rem;
	text-align: center;
    margin: 0 0 2em;
}

.l-form-message p { margin: 0 0 0.6em; }
.l-form-message p:last-child { margin: 0; }


/* l-form-message-caution */
.l-form-message-caution {
  background: #f8f8f8;
  padding: 40px 50px;
  margin: 0 0 60px;
}

.l-form-message-caution ul li {
  font-size: 1.4rem;
  text-indent: -1em;
  margin: 0 0 0.6em 1em;
}

.l-form-message-caution ul li:last-child { margin-bottom: 0; }

@media screen and (max-width: 990px) {
    .l-form-message {
		font-size: 1.6rem;
		text-align: left;
	}
	
	.l-form-message-caution {
	  padding: 20px;
	  margin: 0 0 40px;
	}

}




/* l-form */
.l-form { margin: 0 0 160px; }

.l-form-reserve { margin: 0 0 120px; }

.l-form__inner { border-top: 1px solid #ddd; }

.l-form__item {
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ddd;
}

.l-form__item dt {
	font-weight: bold; 
	padding: 20px 20px 20px 0;
	width: 300px;
	display: flex;
	justify-content: space-between;
}

.l-form__item dt span {
	background: #af3a3a;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
	line-height: 1;
	padding: 6px 0;
	width: 42px;
	border-radius: 5px;
	
}

.l-form__item dd {
	padding: 20px 0 20px 20px;
	width: 100%;
}

.l-form__item input[type="text"],
.l-form__item input[type="email"],
.l-form__item input[type="tel"],
.l-form__item textarea {
	padding: 10px;
	height: 50px;
	border: 1px solid #eee;
	box-sizing: border-box;
}

.l-form__item input[type="text"],
.l-form__item input[type="email"],
.l-form__item input[type="tel"],
.l-form__item textarea { width: 600px; }

.l-form__item textarea {
    width: 100%;
    height: 200px;
}

.l-form__item select {
	height: 40px;
	box-sizing: border-box;
}

.l-form__item.l-form__item-zip input[type="text"] { width: 160px; }

.l-form__item dd .error,
.l-form__privacy .error {
	color: #af3a1e;;
	margin-top: 0.6em;
	display: block;
}

.l-form__item-ymd {
	display: flex;
	gap: 10px;
}

.l-form__item-ymd select { width: 120px; }

.l-form-vertical-label label {
	text-align: left;
	padding: 12px 15px;
	margin: 0 0 20px;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	border-radius: 5px;
	width: 360px; 
	cursor: pointer;
	transition: 0.7s;
	box-sizing: border-box;
}

.l-form-vertical-label label:last-child { margin: 0; }


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

.l-form-column-label--reserve label { width: calc((100% - 20px) / 2); }

.l-form-column-label label {
	background: #fff;
	padding: 16px 20px 16px 20px;
    font-feature-settings: "palt";
	display: flex;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 5px;
	transition: 0.4s;
}

.l-form-vertical-label label.checked,
.l-form-vertical-label label:hover,
.l-form-column-label label.checked,
.l-form-column-label label:hover {
	background: #f8f8f8;
	border: 1px solid #444;
}

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

.l-form__item label { cursor: pointer; }

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

.l-form__privacy {
	text-align: center;
	padding:  50px 0;
	border-bottom: 1px solid #ddd;
	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 {
	background: #fff;
	text-align: center;
	padding: 12px 0;
	margin: 0 auto;
	width: 200px;
	display: block;
	box-sizing: border-box;
	border: 1px solid #ddd;
	cursor: pointer;
	transition: 0.7s;
    border-radius: 1000px;
}

.l-form__privacy label.checked,
.l-form__privacy label:hover {
	background: #f8f8f8;
	border: 1px solid #444;
}

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

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


@media screen and (max-width: 990px) {
    .l-form { margin: 0 0 80px; }
	
	.l-form-reserve { margin: 0 0 60px; }
	
	.l-form__item,
	.l-form__item dt,
	.l-form__item dd { width: 100%; }
	
    .l-form__item { display: block; }
	
	.l-form__item dt { padding: 20px 0; }
	.l-form__item dd { padding: 0 0 20px; }
	
	.l-form__item input[type="text"],
	.l-form__item input[type="email"],
	.l-form__item input[type="tel"],
	.l-form__item textarea { width: 100%; }
	
	.l-form__item-year select { width: 26vw!important; }
	.l-form__item-month select,
	.l-form__item-day select { width: 18vw!important; }
	
	.l-form-vertical-label label { width: 100%; }
	
	.l-form-column { gap: 10px; }
    
    .l-form-column label { width: 100%; }

	.l-form-column-label--reserve { gap: 15px 0; }
	.l-form-column-label--reserve label { width: 100%; }
	
	.l-form__privacy {
        text-align: center;
        padding:  30px 0;
        margin: 0 0 40px;
    }
    
    .l-form__privacy dl dd { text-align: left; }
    
    .l-form__privacy dl dd span { display: inline; }
}


/* l-form__send */
.l-form__send {
    display: flex;
    justify-content: center;
}

.l-form__send form { display: inline; }

.l-form__send-submit {
	background: #a67c49;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
	width: 260px;
	height: 52px;
	margin: 0 15px;
	border: none;
	border-radius: 26px;
}

.l-form__send-back { background: #333; }
.l-form__send input[type="submit"].green { background: #809c0d; }
.l-form__send input[type="submit"]:hover {
	opacity:0.8;
	transition: 0.7s;
}

@media screen and (max-width: 990px) {
    .l-form__send { display: block; }
    
	.l-form__send input[type="submit"] {
		width: 100%;
		margin: 0 0 1em;
	}
}


/* ----------------------------------------------------------------------
	thanks
---------------------------------------------------------------------- */

.l-form-thanks {
	margin: 0 auto 120px;
    width: 900px;
}

.l-form-thanks__ttl {
    font-size: 2rem;
    text-align: center;
    margin: 0 0 0.4em;
}

.l-form-thanks__txt p { margin: 0 0 0.6em; }
.l-form-thanks__txt p:last-child { margin: 0; }

.l-form-thanks__btn {
    text-align: center;
	margin: 3em 0 0;
}

@media screen and (max-width: 990px) {
   .l-form-thanks {
        margin: 0 auto 60px;
        width: auto;
    }
    
    .l-form-thanks__btn { margin: 2em 0 0; }
}

@media screen and (max-width: 321px) {
    .l-form-thanks__ttl span { display: block; }
}


/* focus */
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; }


/* ----------------------------------------------------------------------
	reserve
---------------------------------------------------------------------- */


/* l-reserve-form__course */
.l-reserve-form__course-wrap {
    gap: 40px;
    padding: 0 0 30px;
    margin: 0 0 30px;
    border-bottom: 1px dashed #ccc;
}

.l-reserve-form__course { width: 380px; }

.l-reserve-form__course-name {
    background: #a67c49;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    padding:  10px 0;
}

.l-reserve-form__course-ttl {
    background: url("../img/bg_asanoha.gif") center center;
    background-size: 60px 105px;
    color: #a67c49;
    border: 2px solid #a67c49;
    font-size: 1.8rem;
    text-align: center;
    padding: 14px 0 12px;
}

 .l-reserve-form__course-ttl--night {
     background-image: url("../img/bg_asanoha_gray.gif");
     background-size: 60px 105px;
     color: #444;
     border: 2px solid #444;
}

 .l-reserve-form__course-ttl--other {
     background: #f8f8f8;
     color: #444;
     border: 2px solid #ddd;
}

.l-reserve-form__course label {
    border-top: none;
    border-radius: 0;
}

.l-reserve-form__course-txt-bold {
    color: #af3a3a;
    font-weight: bold;
}

@media screen and (max-width: 990px) {
	.l-reserve-form__course-wrap {
		gap: 20px;
		padding: 0 0 30px;
		margin: 0 0 30px;
	}
}




/* l-reserve-form__caution */
.l-reserve-form__caution {
    color: #af3a3a;
    font-weight: bold;
    text-align: center;
    margin: 0 auto 50px;
    padding: 15px;
    width: 620px;
    border: 2px solid #af3a3a;
}


@media screen and (max-width: 990px) {
    .l-reserve-form__caution {
        text-align: left;
        margin: 0 auto 40px;
        width: auto;
    }
}





/* l-reserve-form */
.l-form-reserve__visit-txt {
    font-weight: bold;
    margin: 0 0 0.6em;
}

.l-form-reserve input[type="text"].l-form-reserve__visit-year,
.l-form-reserve select { width: 120px; }

.l-form-reserve__youto  dd select { width: 250px; }

.l-form-reserve__course-plan-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.l-form-reserve__course-plan { width: 400px; }

.l-form-reserve__course-plan-ttl {
    background: #381004;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

.l-form-reserve__course-plan-vertical-item {
    border: 1px solid #ddd;
    border-top: none;
    display: block;
}

.l-form-reserve__course-plan label {
	background: #fff;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    padding: 14px 10px;
    width: 100%;
    cursor: pointer;
    display: flex;
	align-items: center;
    box-sizing: border-box;
	transition: 0.4s;
}

.l-form-reserve__course-plan label.checked,
.l-form-reserve__course-plan label:hover { background: #f8f8f8; }

.l-form-reserve__course-plan label.checked { font-weight: bold; }

.l-form-reserve__caution {
    color: #bf2510;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    width: 700px;
    padding: 10px 15px;
    margin: 40px auto;
    border: 2px solid #c00;
    box-sizing: border-box;
}


@media screen and (max-width: 990px) {
	 .l-form-reserve__course-plan-wrap {
        justify-content: space-between;
        gap: 20px 0;
    }
	
	.l-form-reserve input[type="text"].l-form-reserve__visit-year,
	.l-form-reserve select { width: 30%; }

    .l-form-reserve .l-form-reserve__tel input[type="text"] { width: 80px; }
  
	.l-form-reserve__youto  dd select { width: 80%; }
	
    .l-form-reserve__course-plan { width: 100%; }

	.l-form-reserve__caution {
		text-align: left;
		width: auto;
	}
}