@charset "utf-8";

/* --- 入力関係ベース --- */
input, select, textarea, button {
	-webkit-appearance: none;
    appearance: none;
	display: inline-block;
	width: 100%;
	font-size: 1em;
	font-weight: inherit;
    line-height: 1.75;
    vertical-align: middle;
    padding: 0.8125em 0.9375em;
	outline: 0;
    border: solid 1px #cfcfcf;
    border-radius: 0;
    background: #f8f8f8;}

input[type="checkbox"],
input[type="radio"] {display: none !important;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"] {width: 100%;}

/* --- radio --- */
input[type="radio"] + span {
	position: relative;
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.35em;
	background: #cfcfcf;
	border-radius: 20px;
	transform: translateY(0.25em);}
[type="radio"] + span::before,
[type="radio"] + span::after {
	position: absolute;
	content: '';
	display: block;
	border-radius: 20px;}

	[type="radio"] + span::before {
		top: 0.075em; left: 0.075em;
		width: 1.1em;
		height: 1.1em;
		background: #ffffff;}
	[type="radio"] + span::after {
		opacity: 0;
		top: 0.25em; left: 0.25em;
		width: 0.75em;
		height: 0.75em;
		background: #E83015;
		transition: all 0.3s 0s ease-out;}
	[type="radio"]:checked + span::after {opacity: 1;}

	/* --- .radio内 li 調整 --- */
	.radio .hirt {justify-content: flex-start;}
	.radio li {
		padding: 0.5em 0;
		margin-right: 2em;}

	/* --- switch 表示切替 --- */
	.radio + .houjin_detail,
	.radio.close + .houjin_detail {
		display: none;
		height: 0;}
	.radio.open + .houjin_detail {
		display: block;
		height: auto;
		margin-bottom: 3em;}

@media (min-width:641px){}
@media (max-width:640px) {
		.radio .hirt:not(.switch) {display: block;}
}

/* --- hissu --- */
	/* --- hissu sec01 --- */
.input .sec01 span.hissu {
	font-size: 0.8em;
	line-height: 1;
	letter-spacing: 0.5em;
	margin: 0 0.35em;
	padding: 0.25em 0.25em 0.2em 0.75em;
	color: #fff;
	background: #e04646;}

	/* --- hissu sec02 --- */
form .sec02 dt.hissu {position: relative;}
form .sec02 dt.hissu:after {
	position: absolute;
     top: 1.25em; left: 0;
	content: "必 須";
	width: 4em;
	font-size: 0.8em;
	line-height: 1;
	padding: 0.25em 0 0.2em;
	color: #fff;
	text-align: center;
	background: #e04646;}

@media (min-width:641px) {}
@media (max-width:640px) {
	form .sec02 dt.hissu {padding-left: 4em;}
}

/* --- btn --- */
.btn02 {
	display: inline-block;
	border: solid 1px #ccc;}

.btn.submit {
	width: 50%;
	margin: 3em auto 0;
	color: #fff;
	background: #dd634d;
	border: solid 1px #F17C67;}

	.btn.submit:hover {
		color: #dd634d;
		background: #fff;}

.btn.modoru,
.btn.thanks {
	width: 50%;
	margin: 3em auto 0;
	padding: 0.6875em 0.875em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #9f9f9f;
	border: solid 1px #9f9f9f;}

	.btn.modoru:hover {
		color: #9f9f9f;
		background: #e9e9e9;}

.btn.thanks {
	color: #fff;
	background: #dd634d;
	border: solid 1px #F17C67;}

	.btn.thanks:hover {
		color: #dd634d;
		background: #fff;}

@media (min-width:641px) {
	.btn.thanks {width: 25%;}
}

/* --- 個人情報の取扱 --- */

.personal_info {text-align: center;}
.personal_info h4 + p {margin-top: 1em;}


/* --- form common --- */
form {padding: 3em 0;}


	/* --- parts --- */
form .sec02 input[name="電話番号"] {width: 50%;}
form .sec02 input[name="郵便番号"] {
	width: 25%;
	margin-left: 0.5em;}
form .sec02 input[name="都道府県"] {
	width: 25%;
	margin-left: 0.2em;}
form .sec02 input[name="以降の住所"] {
	margin: 0.6em 0;}
form .sec02 textarea {
	min-height: 120px; margin-bottom: 0.7em;}

	/* --- sukima --- */
form .sec02 dl {padding: 0.75em 0;}
form .sec02 dt {padding: 0.5em 0;}

form .sec02 + .sec03 {margin-top: 5em;}

	/* --- datepicker → dtpk --- */
form .dtpk[type="text"] {
	width: 10em;
	text-align: center;}

@media (min-width:641px) {
	form .sec02 dt {padding-left: 4em;}
	
	/* --- case　rows = 1 --- */
	form .rows dl {display: flex; justify-content: space-between;}
	form .rows dt {width: 20.834%;}
	form .rows dd {width: calc(100% - 20.834% - 30px);}
}
@media (max-width:640px) {
	form .sec02 dt {padding-right: 0.5em;}
}

/* --------- sec01/02/03 --------- */
[class^="sec0"] dt,
[class^="sec0"] dd {letter-spacing: 0.03125em;}


[class^="map_"] {
	display: inline-block;
	width: 30px; line-height: 30px;
	text-align: center;
	margin-right: 5px;
	color: #fff;
	border-radius: 50%;}
.map_blue {background: #68acd0;}
.map_pink {background: #cf7fa1;}
.map_purple {background: #9f6e9d;}
.map_green {background: #899e54;}
.map_orange {background: #c79042;}

.sec02 .radio p .map_blue,
.sec02 .radio p .map_purple {
	width: 20px;
	line-height: 20px;
	color: #fff;}


/* --- sec01 --- */
.sec01 p {text-align: center;}
.sec01 b {color: #e04646;}

/* --- sec02 --- */
.sec02 .radio label small {
	display: inline-block;
	font-size: 0.875em;
	margin-left: 0.715em;}
.sec02 .radio ul + p {
	font-size: 0.8125em;
	margin-top: 0.827em;}
.sec02 .radio p b {color: #e04646;}
.sec02 .radio p .btn02 {
	margin-top: 0.904em;
	padding: 0.404em 1.539em;
	background: #f4ebf5;}
.sec02 .radio p .btn02:hover {
	color: #fff;
	background: #9f6e9d;}

/* --- sec03 --- */
.sec03 p {text-align: center;}

/* ------ input ------ */
.input > * {
	width: 93.75%;
	margin: 0 auto;}

@media (min-width:641px) {
	.input > * {margin-top: 2.25em;}
}
@media (max-width:640px) {}

/* ------ error ＆ confirm ------ */

div.error > *,
.confirm > * {
	width: 93.75%;
	margin: 0 auto;}

.error dd,
.confirm dd {
	padding: 0.5em 0.875em;
	border: solid 1px #cfcfcf;
    background: #f8f8f8;}

.error .radio dd,
.confirm .radio dd {
	border: none;
    background: none;}

.error .tel_wk dd,
.confirm .tel_wk dd {width: 50%;}

	.error .radio dd span,
	.confirm .radio dd span {
		position: relative;
		display: inline-block;
		width: 1.25em;
		height: 1.25em;
		margin-right: 0.35em;
		background: #cfcfcf;
		border-radius: 20px;
		transform: translateY(0.25em);}
	.error .radio dd span::before,
	.error .radio dd span::after,
	.confirm .radio dd span::before,
	.confirm .radio dd span::after {
		position: absolute;
		content: '';
		display: block;
		border-radius: 20px;}

		.error .radio dd span::before,
		.confirm .radio dd span::before {
			top: 0.075em; left: 0.075em;
			width: 1.1em;
			height: 1.1em;
			background: #ffffff;}
		.error .radio dd span::after,
		.confirm .radio dd span::after {
			top: 0.25em; left: 0.25em;
			width: 0.75em;
			height: 0.75em;
			background: #E83015;
			transition: all 0.3s 0s ease-out;}

/* --- error --- */
.error .error dd {color: #e04646;}

/* --- confirm --- */
.confirm .sec03 {
	display: flex; flex-wrap: wrap; justify-content: center;}

.confirm .sec03 .btn {
	width: 400px;
	margin-top: 1.75em;}

@media (min-width:641px) {
	div.error > *,
	.confirm > * {margin-top: 2.25em;}
	
	.error .mail_wk dd,
	.error .tel_wk dd,
	.confirm .mail_wk dd,
	.confirm .tel_wk dd {
		width: 37.5%;
		margin: 0 38.542% 0 30px;}

	/* --- confirm --- */
	.confirm .sec03 .btn {max-width: 360px;}

}
@media (max-width:640px) {
	/* --- confirm --- */
	.confirm .sec03 .submit {margin-top: 4.5em;}
}

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

.thanks p + a {margin-top: 2.312em;}

@media (min-width:641px) {}
@media (max-width:640px) {}