@charset "UTF-8";

/*=================================================================
*==================================================================
base layout
==================================================================*
==================================================================*/
/* ===============================================
etc.
=============================================== */

.sec_error {
    display: none;
    padding: 135px 0 175px 0;
}
@media screen and (max-width: 768px) {
    .sec_error {
        display: none;
        padding: 100px 0 150px 0;
    }
}
/* -----------------------------------------------
pc or sp
----------------------------------------------- */

* {
	border-box: box-sizing;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #f5f5f7;
}

body > #wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > #wrapper > section {
	flex: 1;
}
header {
	background: #fff;
}

.l_pc {
	display: block;
}

.l_sp {
	display: none;
}

.l_i_pc {
	display: inline;
}

.l_i_sp {
	display: none;
}

a {
	transition: all .3s;
}

a:hover {
	opacity: 0.7;
}

/* Start SP--------------------------------------------------*/
@media screen and (max-width: 768px) {
	/* -----------------------------------------------
	pc or sp
	----------------------------------------------- */
	.l_pc {
		display: none;
	}

	.l_sp {
		display: block;
	}

	.l_i_pc {
		display: none;
	}

	.l_i_sp {
		display: inline;
	}
}/* End SP----------------------------------------------------*/


@media screen and (max-width: 768px) {
	header {
		height: 110px;
		border-top: none;
	}
    #wrap_header .hd_main_range h1 {
        width: 45%;
        padding: 0 0 0 0;
		margin: 0 auto;
    }
	footer .copyright {
		background: #000;
	}
}


/* ===============================================
Btn
=============================================== */
.bt_send_submit,
#page_commit .sec_bt .bt_range a {
	display: flex;
	height: 67px;
	background: #ff1d2e;
	color: #fff;
	font-size: 24px;
	letter-spacing: 0.04em;
	position: relative;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 0 40px 0 30px;
	width: 100%;
	max-width: 436px;
	min-width: 300px;
}

.bt_send_submit::before,
#page_commit .sec_bt .bt_range a::before {
	content: '確認画面へ';
}

.bt_send_submit::after,
#page_commit .sec_bt .bt_range a::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 768px) {
	.bt_send_submit,
	#page_commit .sec_bt .bt_range a {
		font-size: 18px;
		max-width: 100%;
		min-width: auto;
		height: 50px;
	}
	.bt_send_submit::after,
	#page_commit .sec_bt .bt_range a::after {
		width: 8px;
		height: 8px;
		right: 15px;
	}
}

.bt_send_submit img,
#page_commit .sec_bt .bt_range a img {
	display: none;
}

.bt_send_submit:hover,
#page_commit .sec_bt .bt_range a:hover {
	opacity: 0.7;
	color: #fff;
}

.back .bt_send_submit {
	padding: 0 30px 0 40px;
	background: #97a6b0;
}

.back .bt_send_submit::before {
	content: '戻る';
}

.back .bt_send_submit::after {
	transform: translateY(-50%) rotate(-135deg);
	right: auto;
	left: 30px;
}

@media screen and (max-width: 768px) {
	.back .bt_send_submit::after {
		left: 15px;
	}
}

.next .bt_send_submit::before {
	content: '送信する';
}

#page_commit .sec_bt .bt_range a::before {
	content: 'トップへ戻る';
}

.d_n_bt .bt_send_submit::before,
.d_n_bt.on a::before {
	content: '入力画面へ';
}

#done_send .bt_send_submit::before {
	content: '送信する';
}

.sec_form .form_range .form_mass .cont_area .input_block .sub_bt .bt_post_code a,
.sec_form .form_range .form_img_upload_mass .add_img_rec_txt_area .txt_link,
.sec_form .form_range .form_img_upload_mass .cont_area .input_block .sub_bt .bt_img_upload a,
.sec_form .sl_ac_range .bt_mass .bt_area a,
.network_error .error_01 .error_bt a
 {
	position: relative;
    display: inline-block;
    min-width: 180px;
    padding: 10px 30px;
	position: relative;
    background: linear-gradient(to bottom, #fff, #ccc);
    color: #231815;
    font-size: 16px;
    text-align: center;
    border: 1px solid #c2bcb9;
    border-radius: 100px;
}

@media screen and (max-width: 768px) {
	.sec_form .form_range .form_mass .cont_area .input_block .sub_bt .bt_post_code a,
.sec_form .form_range .form_img_upload_mass .add_img_rec_txt_area .txt_link,
.sec_form .form_range .form_img_upload_mass .cont_area .input_block .sub_bt .bt_img_upload a,
.sec_form .sl_ac_range .bt_mass .bt_area a,
.network_error .error_01 .error_bt a {
		min-width: 150px;
	}
	.sec_form .form_range .form_img_upload_mass .cont_area .input_block .sub_bt .bt_img_upload a .l_sp{
		display: none;
	}
}
.sec_form .sl_ac_range .bt_mass .bt_area a {
	padding: 10px 10px 10px 26px;
	letter-spacing: 1em;
	text-align: center;
}


/* ===============================================
fra_base
=============================================== */


.fra_base {
	padding: 0 0 80px 0;
	background: #f5f5f7;
}

.fra_base .fra_cont {
	width: 100%;
    max-width: 1040px;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.fra_base .fra_cont {
		padding-right: 12px;
		padding-left: 12px;
	}
}

.fra_flow_wrapper {
	background: #fff;
}
.fra_flow {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 90px 20px 70px 20px;
	background: #fff;
}


.fra_flow ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 85px;
}

.fra_flow li {
	width: 110px;
	height: 110px;
	border: 1px solid #97a6b0;
	border-radius: 55px;
	color: #97a6b0;
	text-align: center;
	display: grid;
	place-content: center;
}

@media screen and (max-width: 768px) {
	.fra_flow {
		padding: 30px 12px 30px 12px;
	}
	.fra_flow ul {
		gap: 20px;
	}
	.fra_flow li {
		width: 75px;
		height: 75px;
		border-radius: 75px;
		font-size: 13px;
		line-height: 1.4;
	}
}

/*--- page_form ---*/
#page_form .sec_flow li:nth-child(1),
#page_confirm .sec_flow li:nth-child(2),
#page_card .sec_flow li:nth-child(3),
#page_commit .sec_flow li:nth-child(3) {
	background-color: #97a6b0;
	color: #fff;
}

.commit-last #page_commit .sec_flow li:nth-child(3) {
	border: 1px solid #97a6b0;
	border-radius: 55px;
	color: #97a6b0;
	background: transparent;
}
.commit-last #page_commit .sec_flow li:nth-child(4) {
	background-color: #97a6b0;
	color: #fff;
}


.sec_lead,
h3.hl_l {
	margin: 0 65px 20px 65px;
    padding: 70px 0 20px 0;
    color: #000;
    font-size: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
	.sec_lead,
	h3.hl_l {
		margin: 0 10px 20px 10px;
		padding: 40px 0 20px 0;
	}
}

.sec_lead .lead_range {
	margin-top: 30px;
	text-align: left;
}

.sec_lead .lead_range .main_range {
	margin: 0 0 12px 0;
	font-size: 18px;
}

.sec_lead .lead_range .note_range {
	margin: 0 0 0 0;
	font-size: 15px;
}

input[type="text"] {
    width: 100%;
    padding: 10px 8px;
    border: 1px solid #010000;
    color: #666666;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select {
	width: 100%;
    padding: 13px 8px;
    border: 1px solid #010000;
    color: #666666;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
}

textarea {
	padding: 8px 4px;
	border: 1px solid #010000;
	color: #666666;
	font-size: 16px;
}

input[type="text"]::placeholder,
select::placeholder,
textarea::placeholder {
	color: #bbb;
}

input[type="text"]:focus-visible,
select:focus-visible {
	outline: none;
	border-color: #ff7b2e;
}

.form_mass .label_area,
.form_img_upload_mass .label_area {
	padding: 10px 13px 10px 15px;
    background-color: #9aa6af;
    color: #fff;
    font-size: 16px;
    flex-basis: 300px;
    position: relative;
}

@media screen and (max-width: 768px) {
	.form_mass .label_area,
	.form_img_upload_mass .label_area {
		flex-basis: 100%;
		width: 100%;
	}
}

.form_mass .label_area .required,
.form_mass .label_area .any,
.form_img_upload_mass .label_area .required,
.form_img_upload_mass .label_area .any {
    position: absolute;
    right: 13px;
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0 2px 0 6px;
    background-color: #ff7b2e;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.34em;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.form_mass .label_area .any,
.form_img_upload_mass .label_area .any {
	background: #fff;
	color: #8683a1;
}

.form_mass .label_area .required.none,
.form_mass .label_area .any.none {
	display: none;
}

.sec_bt {
    display: block;
    padding: 40px 35px;
    background-color: #ffffff;
    margin: 40px 0;
    border: none;
}

@media screen and (max-width: 768px) {
	.sec_bt {
		padding: 20px;
		margin: 20px 0 0;
	}
}

.sec_bt .attention_range {
    text-align: center;
}

.sec_bt .attention_range .txt_mass {
    font-size: 20px;
    letter-spacing: 0.09em;
    margin: 0;
}

@media screen and (max-width: 768px) {
	.sec_bt .attention_range .txt_mass {
		font-size: 16px;
	}
}

.sec_bt .attention_range + .bt_range {
	margin-top: 30px;
	padding-top: 0;
}

.sec_bt .bt_range ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 100%;
}

.txt_block .attention {
	color: #ff1d2e;
}




.check_mass .check_area {
	margin: 0 auto 0;
	text-align: center;
	max-width: 436px;
	width: 100%;
}

.check_mass .check_area ul {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.check_mass .check_area li {
	font-size: 15px;
}

.check_mass .check_area li:first-child {
	margin: 0 0 0 0;
}

.check_mass .check_area .checkbox_block {
	width: 100%;
	height: auto;
	/* box-sizing */
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	/* flex */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.check_mass .check_area .checkbox_block .check {
	display: block;
}

.check_mass .check_area .check input[type="checkbox"] {
	display: none;
}

.check_mass .check_area label .check:after {
	display: block;
	content: "";
	width: 23px;
	height: 22px;
	background: url(../../../electric/img/page/icon/icon_check.png) no-repeat 0 0;
	background-size: contain;
}

.check_mass .check_area label.active .check:after {
	background: url(../../../electric/img/page/icon/icon_check_on.png) no-repeat 0 0;
	background-size: contain;
}

.check_mass .check_area .txt {
	display: block;
	margin: 0 0 0 12px;
	font-size: 14px;
}


/* -----------------------------------------------
jScrollPane layout
----------------------------------------------- */
.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: -5px;
	width: 16px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #ebecf0;
	width: 6px;
	position: relative;
}

.jspDrag
{
	background: #2d596c;
	position: relative;
	top: 0;
	left: 0;
	width: 6px;
	height: 76px;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}
/*
.jspHorizontalBar .jspTrack
{
	float: left;
	height: 100%;
}
*/

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}


#page_top p {
	width: 55px;
    height: 55px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 5000;
}
#page_top p a {
	display: inline-block;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #2d596c;
	position: relative;
}
#page_top p a::before {
	content: '';
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(-45deg);
	position: absolute;
	top: 55%;
	left: 50%;
}
#page_top a img {
	display: none;
}