/* ------------------------------------ 
toiawase
------------------------------------ */
/* ----- index ----- */
.toiawase_list {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.toiawase_list dl {
	border-radius: 4px;
	background: #fff;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	text-align: center;
}
.toiawase_list dt,
.toiawase_list dd {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.toiawase_list dt {
	border-radius: 4px 4px 0 0;
	background: #ccc;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	height: 3.5em;
	padding: 10px;
}
.toiawase_list .color_seifu dt {
	background: #8b62a8;
}
.toiawase_list .color_itsukaichi dt {
	background: #23b97a;
}
.toiawase_list .color_hatsukaichi dt {
	background: #f46a00;
}
.toiawase_list .color_kangobu dt {
	background: #f67081;
}
.toiawase_list .color_saiyo dt {
	background: #0068b7;
}
.toiawase_list dd {
	border-radius: 0 0 4px 4px;
	padding: 10px;
	box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.15);
}
.toiawase_tel {
	display: block;
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	padding: 5px;
}
.toiawase_tel + .toiawase_form {
	margin-top: 8px;
}
.toiawase_form {
	display: block;
	width: 100%;
	-webkit-align-self: flex-end;
	align-self: flex-end;
}
.toiawase_form a {
	display: block;
	width: 100%;
	padding: 10px;
	background: #f2f2f2;
	color: #333;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.color_seifu .toiawase_form a:hover {
	background: #dfd6eb;
}
.color_itsukaichi .toiawase_form a:hover {
	background: #c7dfd1;
}
.color_hatsukaichi .toiawase_form a:hover {
	background: #ecd7ba;
}
.color_kangobu .toiawase_form a:hover {
	background: #fdeef0;
}
.color_saiyo .toiawase_form a:hover {
	background: #c3d6eb;
}
.toiawase_form a::before {
	font-family: 'icomoon';
	content: "\e90f";
	display: inline-block;
	font-size: 2rem;
	margin-right: 5px;
}
.color_seifu .toiawase_form a::before {
	color: #8b62a8;
}
.color_itsukaichi .toiawase_form a::before {
	color: #23b97a;
}
.color_hatsukaichi .toiawase_form a::before {
	color: #f46a00;
}
.color_kangobu .toiawase_form a::before {
	color: #f67081;
}
.color_saiyo .toiawase_form a::before {
	color: #0068b7;
}


@media only screen and (max-width: 767px){
	.toiawase_list dl {
		width: 100%;
	}
	.toiawase_list dl + dl {
		margin-top: 20px;
	}
}

@media print, screen and (min-width: 768px){
	.toiawase_list dl {
		width: calc((100% - 60px) / 3);
	}
	.toiawase_list dl:not(:nth-of-type(3n)) {
		margin-right: 30px;
	}
	.toiawase_list dl:nth-of-type(n+4) {
		margin-top: 30px;
	}
}

/* ----- seifu ----- */
.toiawase .flow {
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 0;
	background: #eeeeee;
}
.toiawase .flow li {
	width:calc(100% / 3);
	padding: 20px 10px;
	text-align: center;
	font-weight: bold;
	background: #eeeeee;
	color: #b6b6b6;
	position: relative;
}
.toiawase .flow li:not(:last-child)::before,
.toiawase .flow li:not(:last-child)::after {
	content: "";
	position: absolute;
	width: 20px;
	right: -10px;
	background: inherit;
	border-right: solid 1px #b6b6b6;
	z-index: 2;
}
.toiawase .flow li:not(:last-child)::before {
	top: 0;
	bottom: 49%;
	transform: skewX(25deg);
}
.toiawase .flow li:not(:last-child)::after {
	top: 49%;
	bottom: 0;
	transform: skewX(-25deg);
}
.toiawase .flow li.active {
	background: #8b62a8;
	color: #FFF;
}
.toiawase section dl {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 20px 0;
}
.toiawase section div.error_wrap {
	border-bottom: solid 1px #dcdcdc;
}
.toiawase section dl + dl {
	border-top: solid 1px #dcdcdc;
}
.toiawase section dl:last-of-type {
	border-bottom: solid 1px #dcdcdc;
}
.toiawase section dt {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 10px;
	font-weight: bold;
}
.toiawase section dd {
	text-align: left;
}
.toiawase .hissu,
.toiawase .nini {
	display: inline-block;
	padding: 5px 7px;
	border-radius: 4px;
	text-align: center;
}
.toiawase .hissu {
	background: #f8e3e5;
	color: #d92239;
}
.toiawase .nini {
	background: #e1ecf4;
	color: #0068b7;
}
.mw_wp_form_preview .hissu,
.mw_wp_form_preview .nini {
	display: none;
}
.toiawase section textarea {
	width: 100%;
	border: solid 2px #d2d2d2;
	padding: 20px;
}
.toiawase section textarea::placeholder {
	color: #b4b4b4;
}
.toiawase section select {
	border: solid 2px #d2d2d2;
	padding: 10px 20px 10px 10px;
}
.toiawase select::-ms-expand {
    display: none;
}
.toiawase .select_wrap {
	position: relative;
}
.toiawase .select_wrap::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 5px 0 5px;
	border-color: #999999 transparent transparent transparent;
	position: absolute;
	top: calc(50% - 3px);
	right: 8px;
}
.mw_wp_form_preview .select_wrap::after {
	display: none;
}
.toiawase section input[type="text"] {
	border: solid 2px #d2d2d2;
	padding: 20px;
	line-height: 1;
	width: 100%;
}
.toiawase section input[type="text"]::placeholder,
.toiawase section input[type="tel"]::placeholder {
	color: #b4b4b4;
}
.toiawase section input[type="checkbox"],
.toiawase section input[type="radio"] {
	display: none;
}
.toiawase section label input[type="checkbox"] + span,
.toiawase section label input[type="radio"] + span {
	display: block;
	position: relative;
	padding-left: 30px;
	padding-top: 3px;
}
.toiawase section label input[type="checkbox"] + span::before,
.toiawase section label input[type="radio"] + span::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	border: solid 2px #d2d2d2;
	position: absolute;
	top: 0;
	left: 0;
}
.toiawase section label input[type="checkbox"]:checked + span::after,
.toiawase section label input[type="radio"]:checked + span::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background: #0068b7;
	position: absolute;
	top: 5px;
	left: 5px;
}
.toiawase section label input[type="radio"] + span::before,
.toiawase section label input[type="radio"]:checked + span::after {
	border-radius: 50%;
}
.toiawase .entry_name dd div,
.toiawase .entry_furigana dd div {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.toiawase .entry_name dd span,
.toiawase .entry_furigana dd span {
	display: block;
	width: 3em;
	text-align: center;
}
.mw_wp_form_preview .entry_name dd span,
.mw_wp_form_preview .entry_furigana dd span {
	display: none;
}
.toiawase .entry_name dd input,
.toiawase .entry_furigana dd input {
	width: calc(100% - 3em);
}
.toiawase section .entry_zip input[type="tel"] {
	border: solid 2px #d2d2d2;
	padding: 20px;
	line-height: 1;
	width: 10em;
}
.toiawase .entry_addr {
	margin-top: 10px;
}
.toiawase .entry_mail dd input,
.toiawase .entry_mail2 dd input,
.toiawase .entry_tel dd input {
	width: 100%;
}
.mw_wp_form_preview .entry_mail2,
.mw_wp_form_preview .entry_mail2 + .error_wrap {
	display: none;
}
.toiawase .entry_privacy {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.toiawase .entry_privacy .hissu {
	white-space: nowrap;
	margin-left: 10px;
	font-weight: bold;
}
.toiawase section .entry_privacy label input[type="checkbox"] + span::before {
	top: 5px;
}
.toiawase section .entry_privacy label input[type="checkbox"]:checked + span::after {
	top: 10px;
}
.mw_wp_form_preview .entry_privacy_area {
	display: none;
}

.toiawase .submit_area {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	padding: 30px 0;
}
.toiawase .submit_area + .submit_area {
	display: none;
}
.toiawase div.mw_wp_form_confirm .submit_area + .submit_area {
	display: -webkit-flex;
	display: flex;
}
.toiawase div.mw_wp_form_confirm .submit_area:nth-of-type(1) {
	display: none;
}
.toiawase .submit_wrap {
	text-align: center;
	width: 100%;
}
.toiawase section button {
	background: #8b62a8;
	border: solid 1px #8b62a8;
	border-radius: 4px;
	display: inline-block;
	padding: 25px;
	margin: 5px 0;
	line-height: 1;
	text-align: center;
	color: #FFF;
	/*display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;*/
	position: relative;
	transition: .5s;
	cursor: pointer;
	width: 100%;
	font-weight: bold;
}
.toiawase section .submit_confirm button::after,
.toiawase section .contact_send button::after {
    font-family: 'icomoon';
    content: "\e907";
    font-size: 1.2rem;
    /*align-self: center;*/
    /*margin-left: 5px;*/
	position: absolute;
	right: 10px;
	top: calc(50% - 5px);
}
.toiawase section .submit_back button {
	background: #FFF;
	color: #727272;
}
.toiawase section .submit_back button::after {
    font-family: 'icomoon';
    content: "\e909";
    font-size: 1.2rem;
	position: absolute;
	left: 10px;
	top: calc(50% - 5px);
}
.toiawase section button:hover {
	background: #5e347c;
}
.toiawase section .submit_back button:hover {
	background: #f2f2f2;
}

.toiawase section .mw_wp_form .error {
	color: #FFF;
	background: #d92239;
	display: block;
	width: 100%;
	text-align: center;
	padding: 5px;
	margin-bottom: 20px;
}

@media only screen and (max-width: 767px){
	.toiawase .entry_name dd div + div,
	.toiawase .entry_furigana dd div + div {
		margin-top: 10px;
	}
}

@media print, screen and (min-width: 768px){
	.toiawase section dt {
		width: 180px;
		padding-bottom: 0;
	}
	.toiawase section dd {
		width: calc(100% - 200px);
	}
	.toiawase .entry_name dd,
	.toiawase .entry_furigana dd {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}
	.toiawase .entry_name dd div,
	.toiawase .entry_furigana dd div {
		width: calc((100% - 10px) / 2);
	}
	.toiawase .entry_name dd div input,
	.toiawase .entry_furigana dd div input {
		width: calc(100% - 3em);
	}
	.toiawase section .submit_wrap {
		width: 330px;
	}
	.toiawase section .contact_send {
		margin-left: 22px;
	}
}

