@charset "utf-8";
/*--------------------------------------
	copyright :
--------------------------------------*/

@import url(normalize.css);
@import url(common_parts.css);
@import url(common.css);


/* index ==============================*/
/* 共通 */
body { counter-reset:number1 number2; }

/* レイアウト */
.btn { margin-bottom: 3rem; }
.btn p { border-radius: 5px; }
.btn p span { color: #fff; }
.form_header { margin-bottom: 5rem; padding: 0 2rem; }

/* フォーム関連 */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], textarea { width: 100%; padding: 1rem; border-radius: 3px; }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus { background: rgba(247, 247, 197, 0.5); }
button { display: block; width: 100%; padding: 1rem 0; background: none; border: none; }
select { display: inline-block; width: 100%; padding: 1rem; line-height: 1.42857143; background-color: #fff; background-image: none; border: 1px solid #E4E4E4; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;  }
input.p-postal-code { width: 10em; margin-left: 1em; vertical-align: middle; }

/* main  ----------*/
/* form */
#form h2 { font-size: 2.4rem; }
#form h3 { font-size: 1.8rem; }
#form h4 { margin-bottom: 2rem; }
#form #add_btn { cursor: pointer; }
#form #add_btn p { padding: 1rem 0; }
#form .unit_title::before { content: counter(number1); counter-increment: number1; }

/* 固定項目 */
.personal_data { padding: 2rem; border: 1px solid #ddd; border-radius: 3ppx; }

/* 複製項目 */
.form_area { margin-bottom: 3rem; }
.personal_data { margin-bottom: 3rem; }
.unit { padding: 2rem; border: 1px solid #ddd; border-radius: 3ppx; }
.unit:not(:nth-of-type(1)) { margin-top: 3rem; }
.unit .del { margin-top: 3rem; }
.unit:nth-of-type(1) .del { display: none; }
#form dt,
#form dd { margin-bottom: 1rem; }
#form dt > span { display: block; }
#form dd Ul { display: flex; flex-wrap: wrap; }
#form dd li:not(:nth-last-of-type(1)) { margin-right: 1rem; }
#form dd li label { cursor: pointer; }
#form dd li label input { vertical-align: middle; }
@media screen and ( min-width: 419px ) {
	#form dl { display: flex; flex-wrap: wrap; }
	#form dt { width: 100%; max-width: 12em; }
	#form dd { width: calc( 99.999% - 12em ); }
}