@charset "utf-8";
/*
■■■■■■■■■■■■■■■■■■■■■■■■■
form (English)
■■■■■■■■■■■■■■■■■■■■■■■■■
*/
p { word-break: normal;}

.form #frame_fixed {
	position: absolute;
	top: 0;
	width: 100%;
}
.form #inner_head {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 64px;
}
.form #inner_head .logo {
	width: 240px;
}
.form .box_blue {
	display: block;
	width: fit-content;
	color: #fff;
	background: #006EBE;
	border-radius: 6px;
	padding: 0.4em 0.8em;
}

.form div.breadcrumbWrap {
	margin-top: 1em;
}

#formContent {
	margin: 40px 0 60px;
}
#formContent h2 {
	border-bottom-style: solid;
	border-bottom-width: 5px;
	position: relative;
	margin-bottom: 15px;
	padding-bottom: 5px;
	font-size: 1.75em !important;
}
#formContent h2:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom-style: solid;
	border-bottom-width: 5px;
	bottom: -5px;
	width: 50%;
}
#formContent h2 { border-bottom-color: rgb(  0,110,190) !important; }
#formContent h2:after { border-bottom-color: rgb(220,240,250) !important; }

/*--- Flow ---*/
#flow {
	margin-bottom: 50px;
}
#flow .flow_block {
	margin-bottom: 30px;
}
#flow .flow_list li {
	display: flex;
	align-items: baseline;
	margin-bottom: 10px;
}
#flow .flow_list li:last-child {
	margin-bottom: 0;
}
#flow .flow_list li p {
	flex: 1;
	padding-left: 20px;
}
#flow .flow_list li .flow_step {
	display: block;
	width: 100px;
	box-sizing: border-box;
	background: #006EBE;
	line-height: 1;
	text-align: center;
	border-radius: 6px;
	padding: 0.45em;
	color: #fff;
}
#flow .flow_list li.act .flow_step {
	background: #142878;
}
#flow .flow_list li.end .flow_step {
	background: #BBBBBB;
}

/* Notes */
#notes {
	margin-bottom: 50px;
}
#notes .notes_list {
	margin: 15px 0;
}
#notes .notes_list li {
	margin-bottom: 5px;
	padding-left: 2.5em;
	position: relative;
}
#notes .notes_list li .notes_list__order {
	position: absolute;
	left: 0;
}
#notes .notes_list li li {
	padding-left: 1.2em;
	position: relative;
}
#notes .notes_list li li::before {
	content: "・";
	position: absolute;
	left: 0;
}
#notes .notes_box_area {
	margin-top: 10px;
}
#notes .notes_box_area .notes_box {
	max-width: 680px;
	background-color: #FCFCFC;
	border: #CCCCCC 1px solid;
	padding: 15px;
}

/*--- Form ---*/
#form * { box-sizing: border-box;}
#form form { margin-top: 20px;}
#form input,
#form textarea,
#form button {
	font-family: 'Noto Sans Japanese' , "メイリオ" , Meiryo , Osaka , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Segoe UI" , Lustria , sans-serif , "ＭＳ Ｐゴシック" , "MS PGothic";
	line-height: 1.5;
	font-size: 16px;
	color: #111;
	appearance: none;
	-webkit-appearance: none;
}
#form .error {
	display: block;
	margin: 5px 0;
	font-weight: bold !important;
	color: #ff0027 !important;
}

#form .w50 { width: 50%;}
#form .w100 { width: 100%;}
#form .link_text { color: #006EBE; text-decoration: underline;}
#form .nomargin { margin: 0 !important;}

/* text */
#form input[type=text] {
	padding: 0.5em 0.8em;
	border: #ccc 1px solid;
  transition: all 0.3s ease;
}
#form input[type=text]:focus {
	outline: none;
	border-color: #006EBE;
}
#form input[type=text]::placeholder {
  color: #C8C7C7;
}

/* Radio button */
#form .input_radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
#form .input_radio input[type=radio] + .radio_label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #ccc;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  margin-right: 0.5em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}
#form .input_radio input[type=radio]:checked + .radio_label:before {
  background-color: #006EBE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

/* Checkbox */
#form .input_check input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
#form .input_check .check_label {
	display: flex;
}
#form .input_check .check_label .check_indicator {
  display: block;
  width: 24px;
  height: 24px;
	margin-right: 10px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
#form .input_check .check_label .check_indicator + * {
	flex: 1;
}
#form .input_check .check_label .check_indicator:after {
  content: "";
	display: block;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	position: absolute;
	top: 3px;
	left: 7px;
	opacity: 0;
	transition: all 0.3s ease;
}

#form .input_check input[type=checkbox]:checked + .check_label .check_indicator:after {
	opacity: 1;
}
#form .input_check input[type=checkbox]:checked + .check_label .check_indicator {
  background-color: #006EBE;
	border-color: #006EBE;
}

/* text */
#form .input_text {
	display: flex;
	align-items: baseline;
	margin-bottom: 10px;
}
#form .input_text:last-child {
	margin-bottom: 0 !important;
}
#form .input_text.noflex {
	display: block;
	margin-bottom: 10px;
}
#form .input_text .input_text_label {
	width: 150px;
}
#form .input_text input[type=text] {
	flex: 1;
}
#form .input_text span {
	display: block;
}
/*
#form .input_text.zip {
	align-items: stretch;
	width: calc(50% + 130px);
}
#form .input_text.zip .zip_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	margin-left: 10px;
	background: #111;
	color: #fff;
}
*/

#form .form_box {
	display: flex;
	align-items: start;
	padding: 20px 0;
	border-top: #CCCCCC 1px dotted;
}
#form .form_box.last {
	border-bottom: #CCCCCC 1px dotted;
}

#form .form_box_ttl {
	width: 220px;
	padding-right: 15px;
}
#form:not(.confirm) .form_box_ttl {
	padding-top: 8.66px;
}
#form .form_box_input {
	flex: 1;
}
#form .form_box_input p {
	margin-bottom: 10px;
}
#form .form_box_input p:last-child {
	margin-bottom: 0;
}
#form.confirm .form_box_input p {
	margin-bottom: 5px;
}
#form.confirm .form_box_input p:last-child {
	margin-bottom: 0;
}

#form .radio_list {
	display: flex;
}
#form .radio_list .input_radio {
	margin-right: 20px;
}
#form .check_list:not(:last-child) {
	margin-bottom: 10px;
}
#form .check_list .input_check:not(:last-child) {
	margin-bottom: 5px;
}

/* Drop */
#form input[type=file] {
	display: none;
}
#form .drop_area {
	margin: 15px 0;
  padding: 90px 50px;
	background-color: #FCFCFC;
	border: #CCCCCC 1px dotted;
	text-align: center;
	transition: all 0.3s ease;
}
#form .drop_area.over {
	background-color: #ECF7FF;
}

#form .input_file {
	display: flex;
	align-items: stretch;
	width: 100%;
}
#form .file_name {
	width: 100%;
	background-color: #fff;
	border-right: none;
	flex: 1;
}
#form .file_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 140px;
	background: #111;
	color: #fff;
	cursor: pointer;
}

/* Agree */
#form .agree_block .agree_text {
	width: 100%;
	height: 230px;
	padding: 15px;
	margin-top: 20px;
	overflow-y: scroll;
	border: #ccc 1px solid;
}
#form .agree_block .input_check {
	width: fit-content;
	margin: 20px auto 0;
}

/* Button */
#form .btn_block {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
#form .btn_block .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 260px;
	height: 60px;
	border: none;
	margin: 0 10px;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
}
#form .btn_block .btn.disable {
	opacity: 0.5;
  pointer-events: none;
}
#form .btn_block .send_btn {
	background: #111;
}
#form .btn_block .back_btn {
	background: #888;
}

#info {
	margin-bottom: 30px;
}
#info p {
	margin-bottom: 10px;
}
@media (min-width:	768px) {
	.form .sp { display: none !important;}
}
@media (min-width:	992px) {
	#form .link_text:hover { text-decoration: none;}
	#form .btn_block .btn:hover { opacity: 0.8;}
	#form .file_btn:hover { opacity: 0.8;}

}
@media only screen and (max-width:	767px) {
	.form .pc { display: none !important;}
	#formContent {
		margin: 30px 0 40px;
	}
	#flow {
		margin-bottom: 30px;
	}
	#flow .flow_list li {
		display: block;
	}
	#flow .flow_list li p {
		padding-left: 0;
		padding-top: 5px;
	}
	#flow .flow_list li .flow_step {
		width: 70px;
	}

	#form .form_box {
		display: block;
		padding: 0;
		border: none !important;
	}
	#form .form_box_ttl {
		width: 100%;
		padding: 10px;
		background-color: #DCF0FA;
	}
	#form .form_box_input { padding: 10px 0 15px;	}
	#form .input_text { display: block;	}
	#form .input_text input[type=text] { width: 100%;}
	#form .input_text .input_text_label {
		width: 100%;
		padding-bottom: 5px;
	}
	#form .input_file { margin-top: 15px;}
	#form .file_btn { width: 90px;}

	#form .btn_block { display: block;}
	#form .btn_block .btn { 
		width: 100%;
		margin: 15px 0 0;
	}

}