@charset "utf-8";
/* form_wrap
-----------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

}
@media screen and (min-width: 768px) {
	body:not(#catalog) .form_wrap {
	margin-top: 50px;
	}
}

/*　dl.form_item
-----------------------------------------------------------------------------*/
.form_item {
	margin-bottom:1em;
	}
.form_item dt {

	}
@media screen and (max-width: 767px) {
	.form_item {
	margin-bottom:1.5em;
	}
	.form_item dt {
	margin-bottom: 5px;
	}
}	
@media screen and (min-width: 768px) {
	.form_item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
	}
	.form_item dt {
	width: 22%;
	padding-top:9px;
	}
	.form_item dd {
	width: 77%;
	}
}

/*　form
-----------------------------------------------------------------------------*/
input, textarea, select { 
	outline:none;
	border: none;
	border-radius: 0;
	font: inherit;
	font-size: 16px;
	font-family: inherit;
	line-height: inherit;
	vertical-align:middle;
	color: #333;
	}
.form_wrap input:not([type=radio]):not([type=checkbox]),
.form_wrap textarea,
.form_wrap select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width:100%;
	}
.form_wrap input:not([type=radio]):not([type=checkbox]) {	width: 100%;}
.form_wrap textarea { width: 100%; /*height:100px;*/ resize: vertical;}

.form_wrap input:not([type=radio]):not([type=checkbox]):not([type=file]),
.form_wrap textarea,
.form_wrap select {
	border:1px solid #ccc;
	background-color:#fff;
	border-radius:4px;
	margin:0;
	padding: 8px 10px;
	}
	@media screen and (max-width: 767px) {
	.form_wrap input:not([type=radio]):not([type=checkbox]):not([type=file]),
	.form_wrap textarea,
	.form_wrap select {
	padding: 8px 10px;
	}
	}

	.form_wrap textarea { 
	padding: 10px;
	line-height:1.4;
	}
	.form_wrap input:focus,
	.form_wrap textarea:focus,
	.form_wrap select:focus {
	border-color:#777 !important;
	transition: border-color 0.3s ease;
	}
/*　select　*/
.form_wrap select {
	display:inline-block;
	position: relative;
	padding-right:25px;
	padding-left:15px;
	width:100%;
	}
.form_wrap select::-ms-expand {
	display: none;
	}
.form_wrap label.type_select {
	position:relative;
	display:block;
	}
	.form_wrap label.type_select::after {
	content: '';
	position: absolute;
	top: 16px;
	margin: auto 0;
	right: 12px;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
	transform:rotate(45deg);
	pointer-events: none;
	}
/*　checkbox ＆ radio　*/
.type_radio,
.type_checkbox {
	position:relative;
	display: inline-block;
	padding: 10px 0;
	}
	.type_radio label,
	.type_checkbox label {
	display: inline-block;
	font-size: 110%;
	}
	.type_radio label + label { margin-left: 1.5em;}
.type_radio input,
.type_checkbox input {
	display:none;
	}
.type_radio input + span,
.type_checkbox input + span {
	position: relative;
	padding-left: 25px;
	display:inline-block;
	line-height:1.3;
	}
	.type_radio input + span::before,
	.type_checkbox input + span::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	background-color:#fff;
	transition:all 0.3s ease;
	}
		.type_checkbox input + span::before { border-radius: 2px;}
		.type_radio input + span::before { border-radius: 50%;}
/*　checked　*/
	.type_radio input:checked + span,
	.type_checkbox input:checked + span {
/*	color:#079292;
	font-weight: 600;*/
	}
	.type_checkbox input:checked + span::before {
	border: none;
	background-color:#079292;
	}
	.type_checkbox input:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 7px;
	width: 7px;
	height: 13px;
	-webkit-transform:rotate(-40deg);
	transform: rotate(40deg);
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	}
	.type_radio input:checked + span {
	}
	.type_radio input:checked + span::before {
	border-color: #079292;
	}
	.type_radio input:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color:#079292;
	}
	.type_checkbox span:hover,
	.type_radio span:hover { cursor:pointer;}

/* catalog_item & catalog_checkbox
-----------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.catalog_item dt {
	font-size: 115%;
	}
}
@media screen and (min-width: 768px) {
	.catalog_item {
	display: block;
	}
	.catalog_item dt {
	width: 100%;
	font-size: 120%;
	margin-bottom: 5px;
	}
	.catalog_item dd { width: 100%;}
}

.catalog_checkbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.catalog_checkbox label {
	font-size: 100%;
	width: 18%;
	margin: 0 0 30px;
	}
	.catalogImg {
	}
	.catalogImg img {
	width: 70%;
	border: 1px solid #ccc;
	margin-bottom: 8px;
	}
	.catalog_checkbox input:checked + span {
	color:#079292;
	font-weight: 600;
	}
@media screen and (max-width: 767px) {
	.catalog_checkbox label {
	font-size: 90%;
	width: 31%;
	margin: 0 0 20px;
	}
	.catalogImg img {
	width: 80%;
	}
}
@media screen and (min-width: 768px) {
	.catalog_checkbox::after {
	content: '';
	width: 18%;
	height: 0;
	}
}

/* zipcode
-----------------------------------------------------------------------------*/
.zipcode_wrap {
	font-size: 16px;
	}
.zipcode_set {
	position: relative;
	display: flex;
	}
	.zipcode_prepend {
	color: #666;
	background-color: #e9ecef;
	border: 1px solid #ccc;
	padding: 0 10px;
	border-radius: 4px 0 0 4px;
	margin: 0;
	margin-right: -1px;
	display: flex;
	align-items: center;
	}
	.zipcode_input {
	border-top-left-radius: 0  !important;
	border-bottom-left-radius: 0  !important;
	}
.zipcode_btn {
	border:1px solid transparent;
	background-color:#607d8b;
	padding: 8px 15px;
	border-radius:4px;
	margin:0;
	display: inline-block;
	text-align: center;
	color: #fff;
	transition: 0.2s ease;
	}
input#addr { margin-top: 15px;}
@media screen and (max-width: 767px) {
	.zipcode_prepend {
	}
	.zipcode_btn {
	margin-top: 10px;
	}
}
@media screen and (min-width: 768px) {
	.zipcode_wrap {
	display: flex;
	}
	.zipcode_set { width: 35%; margin-right: 3%; }
	.zipcode_btn:hover {
	background-color:#455a64;
	cursor: pointer;
	}
}

/*　placeholder 　*/
/* Edge */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	color: #ccc;
	}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#ccc;
	}
::placeholder{ /* Others */
	color:#ccc;
	}
	
/* auto complete(chrome) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
	  /* 文字色(colorではなく-webkit-text-fill-color) */
  -webkit-text-fill-color: #222 !important;
}

/*　button
-----------------------------------------------------------------------------*/
.form_btn {
	text-align: center;
	}
.form_btn button {
	font-family: inherit;
	display: inline-block;
	vertical-align:middle;
	text-decoration:none;
	text-align:center;

	border: none;
	background-color: #079292;
	line-height: 1;
	color: #fff;
	
	font-size: 133%;
	padding: 3% 0;
	width: 450px;
	margin: 40px auto 0;
	
	transition: 0.2s ease;
}

@media screen and (max-width: 767px) {
	.form_btn button {
	font-size: 17px;
	padding: 25px 0;
	width: 100%;
	max-width: 350px;
	margin: 20px auto 0;
	}
}
@media screen and (min-width: 768px) {
	.form_btn button:hover {
		background-color:#262626;
		color:#fff;
		cursor:pointer;
		}
}
@media screen and (min-width: 1600px) {
	.btn_base {
	font-size: 145%;
	}
}

.form_btn .btn_back {
	font-weight:normal;
	background-color: #fff;
	color: #777;
	box-shadow: 0 0 0 1px #ccc inset;
	width:150px;
	}
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) {
	.form_btn .btn_back:hover {
	box-shadow: none;
	background-color: #666;
	}
}

/*　form　その他
-----------------------------------------------------------------------------*/
.form_wrap .error {
	color:#e60039;
	}
.form_wrap .form_note {
	font-size:90%;
	color:#333;
	margin-top: 0.3em;
	}

/*　必須　*/
.icon_hissu {
	font-weight:normal;
	display:inline-block;
	font-size:80%;
	line-height:17px;
	background-color:#dc3545;
	color:#fff;
	padding:0 3px;
	letter-spacing:1px;
	border-radius:3px;
	margin:0 8px;
	}

#powered_by_me {
	display: inline-block;
	margin-top: 40px;
	}
#powered_by_me, #powered_by_me a {
	color: #bbb;
	font-size: 10px;
	text-decoration: none;
	}
	@media screen and (max-width: 767px) {
	}

/*　alert
-----------------------------------------------------------------------------*/
.alert-danger {
	color: #e50012;
	font-size: 95%;
	 }
.alert-warning {
	margin: 0 -8px 30px;
	padding: 10px 8px;
	border-radius: 4px;
	background-color: #f2f4f5;
	border: 1px solid #e7ebed;
}
#error_message {
	font-weight: 600;
	color: #bf1020;
	background-color: #f8d7da;
	border: 1px solid  #f5c6cb;
	padding: 10px 20px;
	border-radius: 4px;
	margin:0 -8px 2em;
	}
@media screen and (max-width: 767px) {
	.alert-warning {
	margin: 0 -8px 1.5em;
	}
}

/* confirm
-----------------------------------------------------------------------------*/
.confirm .form_item dt {
	padding-top: 0;
	}
.confirm .form_item dd {
	font-size: 17px;
	border-bottom: 1px solid #eee;
	}
.confirm .form_item {
	margin-bottom: 2em;
	}
#confirm_message,
#thanks_message{
	color: #079292;
	font-size: 120%;
	font-weight: 600;
	margin-bottom: 3em;
}