@charset "UTF-8";
/* 1126 */
/*
==========================================================

* -: RESET

==========================================================
*/

* {
  margin:0;
  padding:0;
}

p {
	line-height: 1.6;
}

::-ms-reveal {
	display: none;
}

@-moz-document url-prefix() {
  input[type^=password] {
    font-size: 20px !important;
  }
}

/*
==========================================================

* 0: page-setting

==========================================================
*/

/* ----- 0-1: body ----- */
body {
	font-family:'Noto Sans JP', 'メイリオ', Meiryo,'Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	margin:0px;
	padding:0px;
	background: #FFF;
	color:#191919;
}

body {
	padding: 0px;
}

body * {
	box-sizing: border-box;
}

body [id$=DispBody_Header],
body [id$=DispBody_Header] * {
	box-sizing: initial;
}

/* ----- 0-2: header ----- */
[id$=DispBody_Header] {
	height: 60px;
	display: block;
	background: #FFF;
	border-top: 5px solid #10563b;
	width: auto;
	margin: -20px calc((100vw - 980px) / -2) 20px;
}

[id$=DispBody_Header] img {
	padding: 10px 30px;
	width: 170px;
}

@media screen and (min-width: 1081px) {
	[id$=DispBody_Header] {
		width: 100vw;
	}
}

@media screen and (max-width: 1080px) {
	[id$=DispBody_Header]{
		margin: -20px 0px;
	}
	[id$=DispBody_Header] img {
		padding: 10px;
	}
}

@media screen and (max-width: 640px) {
	[id$=DispBody_Header] {
		width: auto;
		margin-bottom: 30px;
	}
}

/* ----- 0-3: main-body ----- */
[id$=DispBody] {
	border: none;
	margin: 0 auto;
	padding: 10px 0 0 0;
	background: none;
	margin-top: 10px;
	width: 100%;
	position: relative;
}

@media screen and (min-width: 641px) and (max-width: 1080px) {
	[id$=DispBody] {
		width: 100%;
	}
}

@media screen and (min-width: 1081px) {
	[id$=DispBody] {
		width: 1000px;
	}
}

/* ----- 0-4: wrapper ----- */
[id$=DispBody_FormWrapper] {
	padding: 0px;
}

[id$=DispBody_FormWrapper] * {
	box-sizing: border-box;
}

@media screen and (min-width: 641px) {
	[id$=DispBody_FormWrapper] {
		padding: 0px 20px;
	}
}

[id$=_FormWrapper_ErrorMessage] > p {
	text-align: center;
	color: #EB4D4D;
	line-break: auto;
}

@media screen and (max-width:641px) {
	[id$=_FormWrapper_ErrorMessage] > p {
		text-align: left;
	}
}

/* ----- 0-5: title ----- */
h1 {
	text-align: center;
	background: #FFF;
	font-size: 22px;
	line-height: 1;
	height: auto;
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}

.h1_subtitle {
	font-weight: normal;
	font-size: 16px;
}

h2 {
	font-size: 20px;
	margin-left: 10px;
}

/* ----- 0-6: input ----- */
input, button {
	font-family:'Noto Sans JP', 'メイリオ', Meiryo,'Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

textarea {
	font-size: 100%;
	font-family:'Noto Sans JP', 'メイリオ', Meiryo,'Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

/*
==========================================================

* 1: margin

==========================================================
*/

/* ----- 1-1: margin-center ----- */
.mgc {
	margin: 0 auto !important;
}

/* ----- 1-2: margin-top ----- */
.mgt0 { 
	margin-top:0px !important;
}

.mgt5 {
	margin-top:5px !important;
}

.mgt10 {
	margin-top:10px !important;
}

.mgt15 {
	margin-top:15px !important;
}

.mgt20 {
	margin-top:20px !important;
}

.mgt25 {
	margin-top:25px !important;
}

.mgt30 {
	margin-top:30px !important;
}

.mgt35 {
	margin-top:35px !important;
}

.mgt40 {
	margin-top:40px !important;
}

.mgt45 {
	margin-top:45px !important;
}

.mgt50 {
	margin-top:50px !important;
}

@media screen and (max-width: 640px) {
	.sp_mgt20 {
	    margin-top: 20px;
	}
}

/* ----- 1-3: margin-right ----- */
.mgr0 {
	margin-right:0px !important;
}

.mgr5 {
	margin-right:5px !important;
}

.mgr10 {
	margin-right:10px !important;
}

.mgr15 {
	margin-right:15px !important;
}

.mgr20 {
	margin-right:20px !important;
}

.mgr25 {
	margin-right:25px !important;
}

.mgr30 {
	margin-right:30px !important;
}

.mgr35 {
	margin-right:35px !important;
}

.mgr40 {
	margin-right:40px !important;
}

.mgr45 {
	margin-right:45px !important;
}

.mgr50 {
	margin-right:50px !important;
}

/* ----- 1-4: margin-bottom ----- */
.mgb0 {
	margin-bottom:0px !important;
}

.mgb5 {
	margin-bottom:5px !important;
}

.mgb10 {
	margin-bottom:10px !important;
}

.mgb15 {
	margin-bottom:15px !important;
}

.mgb20 {
	margin-bottom:20px !important;
}

.mgb25 {
	margin-bottom:25px !important;
}

.mgb30 {
	margin-bottom:30px !important;
}

.mgb35 {
	margin-bottom:35px !important;
}

.mgb40 {
	margin-bottom:40px !important;
}

.mgb45 {
	margin-bottom:45px !important;
}

.mgb50 {
	margin-bottom:50px !important;
}

.mgb80 {
	margin-bottom:80px !important;
}

/* ----- 1-5: margin-left ----- */
.mgl0 {
	margin-left:0px !important;
}

.mgl5 {
	margin-left:5px !important;
}

.mgl10 {
	margin-left:10px !important;
}

.mgl15 {
	margin-left:15px !important;
}

.mgl20 {
	margin-left:20px !important;
}

.mgl25 {
	margin-left:25px !important;
}

.mgl30 {
	margin-left:30px !important;
}

.mgl35 {
	margin-left:35px !important;
}

.mgl40 {
	margin-left:40px !important;
}

.mgl45 {
	margin-left:45px !important;
}

.mgl50 {
	margin-left:50px !important;
}

@media screen and (min-width: 641px) {
	.pc_mgl50 {
	    margin-left: 50px !important;
	}
}

/* ----- 1-6: margin-all ----- */
.mga0 { 
	margin:0px !important;
}

.mga5 {
	margin:5px !important;
}

.mga10 {
	margin:10px !important;
}

.mga15 {
	margin:15px !important;
}

.mga20 {
	margin:20px !important;
}

.mga25 {
	margin:25px !important;
}

.mga30 {
	margin:30px !important;
}

.mga35 {
	margin:35px !important;
}

.mga40 {
	margin:40px !important;
}

.mga45 {
	margin:45px !important;
}

.mga50 {
	margin:50px !important;
}

/*
==========================================================

* 2: padding

==========================================================
*/

/* ----- 2-1: padding-top ----- */
.pdt0 {
	padding-top:0px !important;
}

.pdt5 {
	padding-top:5px !important;
}

.pdt10 {
	padding-top:10px !important;
}

.pdt15 {
	padding-top:15px !important;
}

.pdt20 {
	padding-top:20px !important;
}

.pdt25 {
	padding-top:25px !important;
}

.pdt30 {
	padding-top:30px !important;
}

.pdt35 {
	padding-top:35px !important;
}

.pdt40 {
	padding-top:40px !important;
}

.pdt45 {
	padding-top:45px !important;
}

.pdt50 {
	padding-top:50px !important;
}

/* ----- 2-2: padding-right ----- */
.pdr0 {
	padding-right:0px !important;
}

.pdr5 {
	padding-right:5px !important;
}

.pdr10 {
	padding-right:10px !important;
}

.pdr15 {
	padding-right:15px !important;
}

.pdr20 {
	padding-right:20px !important;
}

.pdr25 {
	padding-right:25px !important;
}

.pdr30 {
	padding-right:30px !important;
}

.pdr35 {
	padding-right:35px !important;
}

.pdr40 {
	padding-right:40px !important;
}

.pdr45 {
	padding-right:45px !important;
}

.pdr50 {
	padding-right:50px !important;
}

/* ----- 2-3: padding-bottom ----- */
.pdb0 {
	padding-bottom:0px !important;
}

.pdb5 {
	padding-bottom:5px !important;
}

.pdb10 {
	padding-bottom:10px !important;
}

.pdb15 {
	padding-bottom:15px !important;
}

.pdb20 {
	padding-bottom:20px !important;
}

.pdb25 {
	padding-bottom:25px !important;
}

.pdb30 {
	padding-bottom:30px !important;
}

.pdb35 {
	padding-bottom:35px !important;
}

.pdb40 {
	padding-bottom:40px !important;
}

.pdb45 {
	padding-bottom:45px !important;
}

.pdb50 {
	padding-bottom:50px !important;
}

/* ----- 2-4: padding-left ----- */
.pdl0 {
	padding-left:0px !important;
}

.pdl5 {
	padding-left:5px !important;
}

.pdl10 {
	padding-left:10px !important;
}

.pdl15 {
	padding-left:15px !important;
}

.pdl20 {
	padding-left:20px !important;
}

@media screen and (min-width: 641px) {
	.pc_pdl20 {
		padding-left:20px !important;
	}
}

.pdl25 {
	padding-left:25px !important;
}

.pdl30 {
	padding-left:30px !important;
}

.pdl35 {
	padding-left:35px !important;
}

.pdl40 {
	padding-left:40px !important;
}

.pdl45 {
	padding-left:45px !important;
}

.pdl50 {
	padding-left:50px !important;
}

/* ----- 2-5: padding-all ----- */
.pda0 {
	padding:0px !important;
}

.pda5_half {
	padding:2.5px !important;
}

.pda5 {
	padding:5px !important;
}

.pda10 {
	padding:10px !important;
}

.pda15 {
	padding:15px !important;
}

.pda20 {
	padding:20px !important;
}

.pda25 {
	padding:25px !important;
}

.pda30 {
	padding:30px !important;
}

.pda35 {
	padding:35px !important;
}

.pda40 {
	padding:40px !important;
}

.pda45 {
	padding:45px !important;
}

.pda50 {
	padding:50px !important;
}

/* ----- 2-6: padding-left&right ----- */
.pdlr10 {
	padding-left:10px !important;
	padding-right:10px !important;
}


/*
==========================================================

* 3: width

==========================================================
*/

/* ----- 3-1: width-px ----- */
.wid_015 {
	width:15px;
	padding:1px;
}

.wid_020 {
	width:20px;
	padding:1px;
}

.wid_025 {
	width:25px;
	padding:1px;
}

.wid_030 {
	width:30px;
	padding:1px;
}

.wid_035 {
	width:35px;
	padding:1px;
}

.wid_040 {
	width:40px;
	padding:1px;
}

.wid_045 {
	width:45px;
	padding:1px;
}

.wid_050 {
	width:50px;
	padding:1px;
}

.wid_055 {
	width:55px;
	padding:1px;
}

.wid_060 {
	width:60px;
	padding:1px;
}

.wid_065 {
	width:65px;
	padding:1px;
}

.wid_070 {
	width:70px;
	padding:1px;
}

.wid_075 {
	width:75px;
	padding:1;
}

.wid_080 {
	width:80px;
	padding:1px;
}

.wid_085 {
	width:85px;
	padding:1;
}

.wid_090 {
	width:90px;
	padding:1px;
}

.wid_095 {
	width:95px;
	padding:1;
}

.wid_100 {
	width:100px;
	padding:1px;
}

.wid_105 {
	width:105px;
	padding:1px;
}

.wid_110 {
	width:110px;
	padding:1px;
}

.wid_115 {
	width:115px;
	padding:1px;
}

.wid_120 {
	width:120px;
	padding:1px;
}

.wid_125 {
	width:125px;
	padding:1px;
}

.wid_130 {
	width:130px;
	padding:1px;
}

.wid_135 {
	width:135px;
	padding:1px;
}

.wid_140 {
	width:140px;
	padding:1px;
}

.wid_145 {
	width:145px;
	padding:1px;
}

.wid_150 {
	width:150px;
	padding:1px;
}

.wid_155 {
	width:150px;
	padding:1px;
}

.wid_160 {
	width:160px;
	padding:1px;
}

.wid_165 {
	width:165px;
	padding:1px;
}

.wid_170{
	width:170px;
	padding:1px;
}

.wid_200{
	width:200px;
	padding:1px;
}

.wid_240{
	width:240px;
	padding:1px;
}

.wid_254{
	width:254px;
	padding:1px;
}

.wid_320{
	width:320px;
	padding:1px;
}

.wid_460{
	width:460px;
	padding:1px;
}

.wid_750{
	width:750px;
	padding:1px;
}

.wid_500_74{
	width:500px;
	height:74px;
}

.wid_550_150{
	width:550px;
	height:150px;
}

/* ----- 3-2: width-per ----- */
.wid_5p {
	width: 5%;
}

.wid_10p {
	width: 10%;
}

.wid_15p {
	width: 15%;
}

.wid_20p {
	width: 20%;
}

.wid_25p {
	width: 25%;
}

.wid_30p {
	width: 30%;
}

.wid_35p {
	width: 35%;
}

.wid_40p {
	width: 40%;
}

.wid_45p {
	width: 45%;
}

.wid_50p {
	width: 50%;
}

.wid_55p {
	width: 55%;
}

.wid_60p {
	width: 60%;
}

.wid_65p {
	width: 65%;
}

.wid_70p {
	width: 70%;
}

.wid_75p {
	width: 75%;
}

.wid_80p {
	width: 80%;
}

.wid_85p {
	width: 85%;
}

.wid_90p {
	width: 90%;
}

.wid_95p {
	width: 95% !important;
}

.wid_100p {
	width: 100% !important;
}

/* 検証 */
@media screen and (max-width:641px) {
	.sp_wid_100p {
		width: 100%;
	}
}

.conf_card_size {
	width: 140px;
}

/* ----- 3-3: width-responsive ----- */
.wid_360rp {
	width: 360px;
	max-width: 100%;
}

.wid_720rp{
	width: 720px;
	max-width: 100%;
}

/* ----- 3-4: min-width ----- */
.min_wid_80 {
	min-width: 80px;
}

.min_wid_85 {
	min-width: 85px;
}

.min_wid_90 {
	min-width: 90px;
}

/* ----- 3-5: custom width ----- */
@media screen and (max-width:641px) {
	.sp_wid_capital {
		width: 60vw;
		max-width: 180px;
	}
}

@media screen and (max-width:641px) {
	.sp_wid_business_content {
		width: 250px;
	}
}

/*
==========================================================

* 4: font-setting

==========================================================
*/

/* ----- 4-1: font_color ----- */
.font_black {
	color:#000000;
}

.font_green {
	color:#597506;
}

.font_dark_gray {
	color: #333333;
}

.font_gray {
	color:#666666;
}

.font_yellow {
	color:#FFD502;
}

.font_red {
	color:#FA0000;
}

.font_attention {
	color: #EB4D4D;
}

.font_white {
	color: #FFFFFF;
}

.font_strong_green {
	color:#1A4B32;
}

.font_default_green {
	color:#00846D;
}

.font_moss_green {
	color: #788883;
}

.annotation_gray {
	color: #999999;
	font-size: 16px;
}

.notes_color {
	color: #666666;
}

/* ----- 4-2: font_weight ----- */

.font_normal {
	font-weight:normal;
}

.font_bold {
	font-weight:bold;
}

/* ----- 4-3: font_size ----- */

.font_size10p {
	font-size: 10px;
}

.font_size12p {
	font-size: 12px !important;
}

.font_default {
	font-size: 16px;
}

.font_size16p {
	font-size: 16px;
}

.font_size18p {
	font-size: 18px;
}

.font_size20p {
	font-size: 20px;
}

.font_size22p {
	font-size: 22px;
}

.font_size24p {
	font-size: 24px;
}

.font_size26p {
	font-size: 26px;
}

.font_size28p {
	font-size: 28px;
}

.font_size30p {
	font-size: 30px;
}

.ol_error_message {
	font-size: 16px;
	color: #EB4D4D;
}

/*
==========================================================

* 5: icon

==========================================================
*/

/* ----- 5-1: alert-icon ----- */
.triangle_wrap {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.triangle_outer {
	position: absolute;
	top: 15px;
	left: 15px;
	transform: translate(-12.5px, -11px);
	width: 100%;
	height: 100%;
}

.triangle {
  position: relative;
  height: 17px;
  width: 17px;
  background-color: #EB4D4D;
  transform: rotate(30deg) skewY(30deg) scaleX(.86666);
  border-top-left-radius: 6px;
}

.triangle.green_frame {
  background-color: #00846D;
}

.triangle_text {
	position: absolute;
	transform: translate(-1.5px,13%);
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
}

.alert_area .triangle_text {
	transform: translate(-2.5px,13%);
}

.triangle::before,
.triangle::after{
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
}

.triangle::before {
  background-color: #EB4D4D;
  transform: translateX(50%) skewX(-45deg);
  border-top-right-radius: 6px;
}

.triangle::after{
  background-color: #EB4D4D;
  transform: translateY(50%) skewY(-45deg);
  border-bottom-left-radius: 6px;
}

.triangle.green_frame::before {
  background-color: #00846D;
  transform: translateX(50%) skewX(-45deg);
  border-top-right-radius: 6px;
}

.triangle.green_frame::after{
  background-color: #00846D;
  transform: translateY(50%) skewY(-45deg);
  border-bottom-left-radius: 6px;
}

/* white_back */
.triangle.inner_triangle {
	background: #FFF;
	width: 12px;
	height: 12px;
	border-top-left-radius: 2px;
	top: 4px;
	position: absolute;
	left: 2.5px;
}

.triangle.inner_triangle:before,
.triangle.inner_triangle:after {
	background: #FFF;
	width: 12px;
	height: 12px;
}

.triangle.inner_triangle:before {
	border-top-right-radius: 2px;
}

.triangle.inner_triangle:after {
	border-bottom-left-radius: 2px;
}

.triangle_text.green_frame {
	font-size: 18px;
	left: 9px;
	color: #00846D;
}

.triangle_text.attention {
	font-size: 18px;
	left: 1px;
	bottom: -1px;
	color: #EB4D4D;
}

.triangle_text.attention_green_frame {
	font-size: 18px;
	left: 1px;
	bottom: -1px;
	color: #00846D;
}

/* ----- 5-2: question-icon ----- */
.question_icon {
	background: #1A4B32;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	height: 20px;
	width: 20px;
	cursor: pointer;
}
@media screen and (min-width: 641px) {
	.question_icon {
		margin-top: 3px;
	}
}

.question_icon.sub_icon {
	margin-top: 0px;
}

.question_icon:after {
	content: "?";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	color:#FFF;
}

/* ----- 5-3: green_check_icon ----- */
.green_check_icon {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	min-width: 24px;
}

.green_check_icon:before,
.green_check_icon:after {
	content:"";
	position: absolute;
}

.green_check_icon:before {
	border: solid 2px #00846D;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	display: inline-block;
	box-sizing: border-box;
}

.green_check_icon:after {
	width: 9px;
	height: 6px;
	top: 45%;
	left: 50%;
	border-left: solid 2.5px #00846D;
	border-bottom: solid 2.5px #00846D;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.green_check_icon + p {
	margin-top: 2px;
}

/* ----- 5-4 password_eye_icon ----- */
.input_password_field input[type^=password]{
	position: relative;
}

.input_password_field .field-icon {
	position: absolute;
}

.mdi-eye,
.mdi-eye-off {
	display: block;
	cursor: pointer;
}

.mdi-eye:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_off.svg);
	background-size: contain;
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 12px;
	right: 8px;
}

.mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_on.svg);
	background-size: contain;
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 12px;
	right: 8px;
}

.input_password_field input:not(.input_error) + .field-icon .mdi-eye:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_inactive_off.svg);
}

.input_password_field input:not(.input_error) + .field-icon .mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_inactive_on.svg);
}

.input_password_field input:not(.input_error):focus + .field-icon .mdi-eye:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_off.svg);
}

.input_password_field input:not(.input_error):-webkit-autofill + .field-icon .mdi-eye:before,
.input_password_field input:not(.input_error):autofill + .field-icon .mdi-eye:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_off.svg);
}

.input_password_field input:not(.input_error):focus + .field-icon .mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_on.svg);
}

.input_password_field input:not(.input_error):-webkit-autofill + .field-icon .mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_on.svg);
}
.input_password_field input:not(.input_error):autofill + .field-icon .mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_on.svg);
}

.input_password_field input.input_error:not(.typing) + .field-icon .mdi-eye:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_off_error.svg);
}

.input_password_field input.input_error:not(.typing) + .field-icon .mdi-eye-off:before {
	background: url(../../vp_imgs/newform/new_images/ic_pass_on_error.svg);
}

/* ----- 5-5 exuramation_icon ----- */
.exurametion {
	position: relative;
	font-weight: bold;
	color: #00846d;
	padding-left: 27px !important;
	margin-right: 40px;
}
@media screen and (max-width:641px) {
	.exurametion {
		margin-right: 0px;
	}
}

.exurametion:before {
	content : "!";
	background-color: #FFF;
	border : solid 1px #00846d;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 3px;
}

/* ----- 5-6 success_icon ----- */
.success_icon {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.success_icon:before,
.success_icon:after {
	content:"";
	position: absolute;
}

.success_icon:before {
	border: solid 2px #00846D;
	background-color: #00846D;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	display: inline-block;
	box-sizing: border-box;
}

.success_icon:after {
	width: 9px;
	height: 6px;
	top: 45%;
	left: 50%;
	border-left: solid 2.5px #FFF;
	border-bottom: solid 2.5px #FFF;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.success_icon + p {
	margin-top: 2px;
}

/*
==========================================================

* 6: text-align

==========================================================
*/
.text_right {
	text-align: right;
}

.text_center {
	text-align: center;
}

.text_left {
	text-align: left;
}

@media screen and (max-width:640px) {
	.sp_text_left {
		text-align: left;
	}
}
/*
==========================================================

* 7: input

==========================================================
*/

/* ----- 7-1: default ----- */
input,
select {
	font-family: 'Noto Sans JP', 'メイリオ', Meiryo,'Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

select {
	overflow-x: hidden;
}

input[type^=text],
input[type^=email],
input[type^=tel],
input[type^=password],
select {
	border: solid 1px #CCC;
	border-radius: 4px;
	height: 50px;
	min-width: 70px;
	padding: 1px 1px 1px 4px;
	background-color: #FFFDDD;
	font-size: 18px;
	box-sizing: border-box;
}

input[type^=text]:focus,
input[type^=email]:focus,
input[type^=tel]:focus,
select:focus {
	border-color: #00846D;
	border-width: 2px;
	outline:none;
	padding: 0px 0px 0px 3px;
}

input[type^=password].masked {
	letter-spacing: 0.5em;
	padding-left: 0.5em;
}

input[type^=password]:focus {
	border-color: #00846D;
	border-width: 2px;
	outline:none;
}

input[readonly^=readonly] {
	pointer-events: none;
}

textarea:focus {
	border-color: transparent;
	border-radius: 2px;
	outline:none;
	box-shadow: 0px 0px 0px 2px #00846D;
	padding-left: 5px;
}

input.bg_ctrl_wht,
select.bg_ctrl_wht {
	background-color: #FFF !important;
}

/* ----- 7-2: disabled(text) ----- */
input[type^=text][class*=disabled],
input[type^=tel][class*=disabled] {
	opacity: 0.5;
}

/* ----- 7-3: error ----- */
input[type^=text][class*=input_error]:not(.typing),
input[type^=email][class*=input_error]:not(.typing),
input[type^=tel][class*=input_error]:not(.typing),
input[type^=password][class*=input_error]:not(.typing),
.radio_btn_box.activate.selection.input_error,
.check_box.activate.selection.input_error,
select.input_error {
	border: solid 2px #EB4D4D;
	background: #fef6f6 !important;
}

input[type^=text][class*=input_error]:not(.typing),
input[type^=email][class*=input_error]:not(.typing),
input[type^=tel][class*=input_error]:not(.typing) {
	padding: 0px 0px 0px 3px;
}

/* ----- 7-4: radio_btn & check_box ----- */
.radio_btn_box,
.check_box {
	border: solid 1px #C4C4C4;
	border-radius: 4px;
	/* min-width: calc(50% - 5px); */
	min-height: 50px;
	background: #FFFDDD;
	display: flex;
	align-items: center;
	cursor: pointer;
	box-sizing: border-box;
	padding: 1px 1px 1px 1px;
}

@media screen and (max-width: 640px) {
	.radio_btn_box,
	.check_box {
		min-width: calc(50% - 5px);
	}
}

.radio_btn_box.normal,
.check_box.normal {
	background: #FFFFFF;
}

.radio_btn_box.activate,
.check_box.activate {
	background: #FFFFFF;
	border-width: 1px;
}

.radio_btn_box.activate.selection,
.check_box.activate.selection {
	background: #FFFFFF;
	border-width: 2px;
	border-color: #00846D;
	padding: 0;
}

.radio_btn_box.no_border,
.check_box.no_border {
	border: none;
	background: #FFFFFF;
}

.radio_btn_box input {
	margin: 0px 10px;
}

.radio_btn_box input,
.check_box input {
	background: #FFFDDD;
}

.radio_label_text,
.check_label_text {
	display: inline-block;
	border-radius: 4px;
	width: auto;
	padding: 5px 10px 7px 0px;
	padding-right: 0.5em;
	font-size: 18px;
}

.activate .radio_label_text,
.activate .check_label_text {
	margin-top: 0px;
	margin-left: 0px;
}

.mgl1_radio {
	margin-left: -1px !important;
}

/* ----- 7-4-1: radio_check ----- */
input[type^=radio] {
	background: #FFF;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: solid 1px #C4C4C4;
	position: relative;
	cursor: pointer;
}

input[type="radio"]:checked:after {
	content: "";
	width: 9px;
	height: 9px;
	display: block;
	background: #00846D;
	border-radius: 50%;
	position: absolute;
	top: calc(50% + 0.5px);
	left: calc(50% + 0.5px);
	transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));
}

input[type="radio"]:checked {
	border-color: #707070;
	box-shadow: none;
}

/* ----- 7-4-2: disabled(radio) ----- */
.radio_btn_box.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.check_box:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* ----- 7-4-3: checkbox ----- */
input[type^=checkbox] {
	appearance: none;
	border: solid 1px #C4C4C4;
	background: #FFF;
	width: 24px;
	height: 24px;
	position: relative;
	margin: 0px 10px;
	cursor: pointer;
}

input[type^=checkbox]:after {
	position: absolute;
	width: 12px;
	height: 5px;
	top: 40%;
	left: 50%;
	border-left: solid 3px #C4C4C4;
	border-bottom: solid 3px #C4C4C4;
	transform: translate(-50%, -50%) rotate(-45deg);
}

input[type^=checkbox]:checked {
	border-color:#00846D;
	background: #00846D;
}

input[type^=checkbox]:checked:after {
	content: "";
	border-color: #FFF;
}

/* ----- 7-5: panel_radio ----- */
.newbank_style .bank_image_left {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	justify-content: space-between;
}

.newbank_style .bank_image_mergin {
	margin-top: 5px;
}

span img.set_pointer.bank_image_mergin:not(.bank_selected) {
	box-shadow: none;
}

.card_brand_select,
.card_design_select {
	display: flex;
	flex-wrap: wrap;
}

.card_brand_select span img {
	max-width:140px;
	max-height:90px;
	margin: 8px auto 0px;
}

.card_design_select span img {
	max-width:140px;
	max-height:90px;
	/* margin: 10px auto 0px; */
	margin: 8px auto 0px;
}

.first_card_wrapper {
	text-align: left;
	display: block;
	margin: 0px;
	font-size: 100%;
}

.first_card_wrapper > ul {
	margin: 20px 0px;
}

.first_card_design,
.card_brand_select span,
.newbank_style .bank_image_left span {
	border-radius: 2px;
	text-align: center;
	position: relative;
	display: inline-block;
	height: auto;
	margin: 10px 7.5px;
	width: calc(50% - 15px);
	max-width: 210px;
}
@media screen and (min-width:641px) {
	.first_card_design,
	.card_brand_select span,
	.newbank_style .bank_image_left span {
		min-width: 160px;
	}
}
@media screen and (max-width:321px) {
	.newbank_style .bank_image_left span {
		width: 100%;
	}
}

.first_card_design,
.card_brand_select span {
	max-width: 170px;
}

.card_brand_select span,
.newbank_style .bank_image_left span {
	padding: 0;
	min-height: 80px;
}

.first_card_design img {
	display: block;
	width: 100%;
	height: auto;
}

.first_card_design input,
.card_brand_select input,
.newbank_style .bank_image_left span input {
	position: absolute;
	top: 12px;
	left: 10px;
	appearance: none;
	width: 15px;
	height: 15px;
	border: solid 1px #CCC;
	border-radius: 50px;
	outline: none;
	background: #FFF;
}

.first_card_design input[type="radio"]:checked:after,
.card_brand_select input[type="radio"]:checked:after,
.newbank_style .bank_image_left input[type="radio"]:checked:after {
	content: "";
	width: 9px;
	height: 9px;
	display: block;
	background: #00846D;
	border-radius: 50%;
	position: absolute;
	top: calc(50% + 0.5px);
	left: calc(50% + 0.5px);
	transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));
}

.first_card_design input[type="radio"]:checked,
.card_brand_select input[type="radio"]:checked,
.newbank_style .bank_image_left input[type="radio"]:checked {
	border: solid 1px #707070;
	box-shadow: none;
}

.first_card_design label,
.card_brand_select label,
.newbank_style .bank_image_left span label {
	min-width: 140px;
	padding: 7px 10px 10px;
	text-align: center;
	box-shadow: 0 0 0 1px #CCC;
	top: 0;
	left: 0;
	color: #000;
	border-radius: 3px;
	margin-left: 0;
	display: inline-block;
	/* height: 100%; */
	height: auto;
	width: 100%;
	cursor: pointer;
}

.card_brand_select .first_card_design label,
.card_design_select .first_card_design label {
	font-size: 16px;
	background: #FFFDDD;
}

.newbank_style .bank_image_left label {
	font-size: 14px;
	background: #FFFDDD;
}

.first_card_design label img,
.card_brand_select label img,
.newbank_style .bank_image_left label img {
	pointer-events: none;
}

.first_card_design input[type="radio"]:checked + label,
.card_brand_select input[type="radio"]:checked + label,
.newbank_style .bank_image_left input[type="radio"]:checked + label {
	box-shadow: 0 0 0 2px #00846D;
}

.first_card_design input, .card_brand_select input, .newbank_style .bank_image_left span input {
	z-index: 1;
	background: #FFF;
}

.newbank_style .bank_image_mergin {
	margin-bottom: 0px;
}

.other_bank_title {
	width: 130px;
	background: #004831;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	padding: 9px 0px 5px;
}

.other_bank_annotation {
	border: 3px solid rgb(0, 72, 49);
	color: rgb(0, 0, 0);
	font-weight: bold;
	position: relative;
	width: 490px;
	padding: 10px;
	font-size: 13px;
	min-height: 40px !important;
	margin-right: auto;
	box-sizing: border-box;
}

.newbank_style .bank_image_left label::before,
.card_brand_select .first_card_design label::before,
.card_design_select .first_card_design label::before {
	content: '';
	margin-left: 15px;
}

.first_card_design label.input_error {
	box-shadow: 0 0 0 1px #EB4D4D;
	background: #fef6f6;
}

/* error */
.first_card_design input[type="radio"]:checked + label.input_error,
.card_brand_select input[type="radio"]:checked + label.input_error,
.newbank_style .bank_image_left input[type="radio"]:checked + label.input_error {
	box-shadow: 0 0 0 2px #EB4D4D;
	background: #fef6f6 !important;
}

/*
==========================================================

* 8: button

==========================================================
*/

/* ----- 8-1: popup-button ----- */
.ol_pop_btn {
	border:none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	background: #1A4B32;
	height: 50px;
	font-size: 16px;
	padding: 0px 30px;
	cursor: pointer;
}

/* ----- 8-2: submit-button ----- */
.ol_submit_btn {
	border: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	background: #F68213;
	height: 80px;
	font-size: 20px;
	position: relative;
	cursor: pointer;
}
@media screen and (min-width:641px) {
	.ol_submit_btn {
		max-width: 355px;
	}
}

.ol_submit_btn:before,
.ol_submit_btn:after {
	content: "";
	position: absolute;
	background: #FFF;
	display: block;
	width: 4px;
	height: 15px;
	top: calc(50% - 5.5px);
	right: 15px;
	border-radius: 4px;
	transform: translateY(-50%) rotate(-45deg);
}

.ol_submit_btn:after {
	top: calc(50% + 3px);
	transform: translateY(-50%) rotate(45deg);
}

.ol_submit_btn input {
	background: none;
	border: none;
	height: 100%;
	color: #FFF;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
}

.ol_submit_btn a {
	background: none;
	border: none;
	height: 100%;
	color: #FFF;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* ----- 8-3: next_btn(no_icon) ----- */
.address_next_btn,
.ol_next_btn {
	border: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	background: #F68213;
	height: auto;
	font-size: 20px;
	display: inline-block;
	text-decoration: none;
	padding: 10px 0px;
	width: 100%;
	cursor: pointer;
}

.ol_next_btn.disabled {
	background-color: #BBBBBB;
	cursor: default;
	pointer-events: none;
}

@media screen and (min-width: 641px) {
	.ol_next_btn {
		max-width: 355px;
	}
}
@media screen and (max-width: 640px) {
	.ol_next_btn {
		max-width: 85%;
	}
}
@media screen and (min-width: 641px) {
	.address_next_btn {
		width: 50%;
	}
}
@media screen and (max-width: 640px) {
	.address_next_btn {
		max-width: 85%;
	}
}

/* ----- 8-4: close_btn(no_icon) ----- */
.address_close_btn,
.ol_close_btn {
	background: #FFF;
	color: #1A4B32;
	font-weight: bold;
	text-align: center;
	height: auto;
	font-size: 16px;
	border-radius: 4px;
	border: solid 1px #1A4B32;
	display: inline-block;
	padding: 10px 0px;
	width: 100%;
	cursor: pointer;
	text-decoration: none;
}
@media screen and (min-width: 321px) {
	.ol_close_btn {
		max-width: 355px;
	}
}
@media screen and (max-width: 641px) {
	.ol_close_btn {
		max-width: 85%;
	}
}
@media screen and (min-width: 641px) {
	.address_close_btn {
		width: 50%;
		max-width: 355px;
	}
}
@media screen and (max-width: 640px) {
	.address_close_btn {
		max-width: 85%;
	}
}

/* ----- 8-5: input_confirm_btn ----- */
.ol_inputconf_btn {
	background: #1A4B32;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	height: 80px;
	font-size: 20px;
	border-radius: 4px;
	border: none;
	position: relative;
	cursor: pointer;
}
@media screen and (min-width:641px) {
	.ol_inputconf_btn {
		max-width: 355px;
	}
}

.ol_inputconf_btn:before,
.ol_inputconf_btn:after {
	content: "";
	position: absolute;
	background: #FFF;
	display: block;
	width: 4px;
	height: 15px;
	top: 50%;
	right: 15px;
	border-radius: 4px;
	transform: translateY(-50%) rotate(-135deg);
}

.ol_inputconf_btn:before {
	right:23px;
}

.ol_inputconf_btn:after {
	transform: translateY(-50%) rotate(-45deg);
}

/* ----- 8-6: tmp_save_btn ----- */
.ol_tmpsaved_btn {
	background: #FFF;
	color: #1A4B32;
	font-weight: bold;
	text-align: center;
	height: 60px;
	font-size: 20px;
	border-radius: 4px;
	border: solid 1px #1A4B32;
	position: relative;
}
@media screen and (min-width:641px) {
	.ol_tmpsaved_btn {
		max-width: 355px;
	}
}
.ol_tmpsaved_btn:before,
.ol_tmpsaved_btn:after {
	content: "";
	position: absolute;
	background: #1A4B32;
	display: block;
	width: 2px;
	height: 10px;
	top: calc(50% - 3px);
	right: 15px;
	border-radius: 4px;
	transform: translateY(-50%) rotate(-45deg);
}

.ol_tmpsaved_btn:after {
	top: calc(50% + 3px);
	transform: translateY(-50%) rotate(45deg);
}

.ol_tmpsaved_btn input {
	background: none;
	border: none;
	height: 100%;
	color: #1A4B32;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

/* ----- 8-7: back_btn(link) ----- */
.ol_back_link {
	text-align: left;
	color: #888888;
	position: relative;
	padding-left: 20px;
	font-size: 18px;
	cursor: pointer;
}

.ol_back_link:before,
.ol_back_link:after {
	content: "";
	position: absolute;
	width: 2px;
	height: 10px;
	background: #888888;
	top: calc(50% - 2.5px);
	left: 10px;
	transform: translateY(-50%) rotate(45deg);
}

.ol_back_link:before {
	top: calc(50% + 3.5px);
	transform: translateY(-50%) rotate(135deg);
}

.ol_back_link:hover {
	opacity: 0.5;
}

/* ----- 8-8: bank_search_btn ----- */
.bank_search_btn {
	border: none;
	background: #10563b;
	color: #FFF;
	font-weight: bold;
	appearance: none;
	width: 220px;
	height: 50px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}
@media screen and (min-width:641px) {
	.bank_search_btn {
		margin-left:0;
	}
}

.bank_search_btn.disabled {
	background-color: #BBBBBB;
	cursor: default;
	pointer-events: none;
}

/* ----- 8-9: item_correction_btn ----- */
.item_correction_btn {
	background:#FFF;
	color: #1A4B32;
	border: solid 1px #1A4B32;
	border-radius: 4px;
	font-size: 14px;
	padding: 6px 8px;
	text-decoration: none;
	font-weight: bold;
	margin-left:auto;
}
@media screen and (min-width:641px) {
	.item_correction_btn {
		margin-left:0;
	}
}

/* ----- 8-10: implement_modal_btn ----- */
#ImplementModalButton {
	padding: 10px;
	border: solid 1px #00846D;
	border-radius: 4px;
	min-width: 150px;
	font-weight: bold;
	color: #00846D;
	background: #f2f9f8;
	cursor: pointer;
}

#ImplementModalNotButton {
	padding: 10px;
	border: solid 1px #888888;
	border-radius: 4px;
	min-width: 150px;
	font-weight: bold;
	color: #888888;
	background: #F1F1F1;
	cursor: pointer;
}

/* ----- 8-11: general_second_btn ----- */
.ol_second_btn {
	background: #FFF;
	color: #1A4B32;
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	border: solid 1px #1A4B32;
	text-decoration: none;
	padding: 15px;
	display: inline-block;
	cursor: pointer;
	position: relative;
}
@media screen and (min-width:641px) {
	.ol_second_btn {
		max-width: 355px;
	}
}
@media screen and (max-width:640px) {
	.ol_second_btn {
		/* width: 100%; */
	}
}

.ol_second_btn.chevron {
	padding: 15px 30px 15px 15px;
}

.ol_second_btn.chevron:before,
.ol_second_btn.chevron:after {
	content: "";
	position: absolute;
	background: #1A4B32;
	display: block;
	width: 2px;
	height: 10px;
	top: calc(50% - 3px);
	right: 15px;
	border-radius: 4px;
	transform: translateY(-50%) rotate(-45deg);
}

.ol_second_btn.chevron:after {
	top: calc(50% + 3px);
	transform: translateY(-50%) rotate(45deg);
}

.ol_second_btn.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.ol_second_btn.thin {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* ----- 8-12: correct_btn ----- */
.correct_btn {
	background: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #1A4B32;
	font-weight: bold;
	text-align: center;
	height: auto;
	font-size: 16px;
	border-radius: 4px;
	border: none;
	position: relative;
	cursor: pointer;
	border: solid 1px #1A4B32;
	padding: 5px 0px;
	width: 150px;
}

/* ----- 8-13: ol_green_btn ----- */
.ol_green_btn {
	background: #1A4B32;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	height: auto;
	font-size: 20px;
	border-radius: 4px;
	border: none;
	position: relative;
	cursor: pointer;
	padding: 15px 40px 15px 20px;
}

.ol_green_btn.chevron:before,
.ol_green_btn.chevron:after {
	content: "";
	position: absolute;
	background: #FFF;
	display: block;
	width: 4px;
	height: 15px;
	top: calc(50% + (15px - (13px / 1.4142)));
	right: 23px;
	border-radius: 4px;
	transform: translateY(-50%) rotate(-135deg);
}

.ol_green_btn.chevron:after {
	transform: translateY(-50%) rotate(-45deg);
	top: calc(50% - (15px - (16px / 1.4142)));
}

/* ----- 8-14: logout_btn ----- */
.ol_logout_btn {
	background: #FFF;
	color: #1A4B32;
	font-weight: bold;
	text-align: center;
	border-radius: 4px;
	border: solid 1px #1A4B32;
	text-decoration: none;
	padding: 5px 10px;
	display: inline-block;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 10px;
}
@media screen and (max-width: 641px) {
	.ol_logout_btn {
		top: 0px;
		right: 5px;
		font-size: 14px;
	}
}
/*
==========================================================

* 9: vertical

==========================================================
*/
.ver_align_base {
	vertical-align: baseline;
}

.ver_align_mid {
	vertical-align: middle;
}

.ver_align_top {
	vertical-align: top;
}

.ver_align_btm {
	vertical-align: bottom;
}

.ver_align_sup {
	vertical-align: super;
}

.ver_align_sub {
	vertical-align: sub;
}

/*
==========================================================

* 10: border

==========================================================
*/

/* ----- 10-1: default ----- */
.border_top_gray {
	border-top: solid 2px #e8e8e8;
}

.border_bottom_lgray {
	border-bottom: solid 2px #e8e8e8;
}

.border_bottom_gray {
	border-bottom: solid 2px #e8e8e8;
}

.border_right_gray {
	border-right: solid 2px #e8e8e8;
}

.border_left_gray {
	border-left: solid 2px #e8e8e8;
}

.border_all_gray {
	border : solid 2px #e8e8e8;
}

.border_top {
	border-top: solid 1px;
}

.border_bottom {
	border-bottom: solid 1px;
}

.border_right {
	border-right: solid 1px;
}

.border_left {
	border-left: solid 1px;
}

.border_all {
	border : solid 1px;
}

/* ----- 10-2: remove ----- */
.border_top_rm {
	border-top: none !important;
}

.border_bottom_rm {
	border-bottom: none !important;
}

.border_right_rm {
	border-right: none !important;
}

.border_left_rm {
	border-left: none !important;
}

.border_rm {
	border: none !important;
}

/* ----- 10-3: unique ----- */
.glow_border {
	flex-grow: 0.9;
	margin: 0px 2.5% 0px auto;
}

/*
==========================================================

* 11: display

==========================================================
*/

.disp_block {
	display: block;
}

.disp_none {
	display: none !important;
}

.disp_inline_block {
	display: inline-block;
}

.disp_flex {
	display: flex;
}

.disp_inline {
	display: inline;
}

.disp_in_flex {
	display: inline-flex;
}

.sp_disp {
	display: block;
}
@media screen and (min-width:641px) {
	.sp_disp {
		display: none;
	}
}

.pc_disp {
	display: none;
}
@media screen and (min-width:641px) {
	.pc_disp {
		display: block;
	}
}

@media screen and (max-width:640px) {
	.sp_disp_block {
         display: block;
	}
}

.visible_hidden {
	visibility: hidden;
}

/*
==========================================================

* 12: flex-box

==========================================================
*/

/* ----- 12-1: direction ----- */
.flex_direction_row {
	flex-direction: row;
}

.flex_direction_row-r {
	flex-direction: row-reverse;
}

.flex_direction_colum {
	flex-direction: column;
}

.flex_direction_colum-r {
	flex-direction: column-reverse;
}

/* ----- 12-2: align ----- */
.flex_align_start {
	align-items: flex-start;
}

.flex_align_center {
	align-items: center;
}

.flex_align_end {
	align-items: flex-end;
}

/* ----- 12-3: justify ----- */
.flex_justify_start {
	justify-content: flex-start;
}

.pc_flex_justify_start {
	justify-content: flex-start;
}

@media screen and (max-width: 641px) {
	.pc_flex_justify_start {
		justify-content: center;
	}
}

.flex_justify_center {
	justify-content: center;
}

.flex_justify_end {
	justify-content: flex-end;
}

.flex_justify_around {
	justify-content: space-around;
}

.flex_justify_between {
	justify-content: space-between;
}

.flex_justify_evenly {
	justify-content: space-evenly;
}

/* ----- 12-4: wrap ----- */
.flex_wrap_wrap {
	flex-wrap: wrap;
}

.flex_wrap_reverse {
	flex-wrap: wrap-reverse;
}

.flex_wrap_nowrap {
	flex-wrap: nowrap;
}

/* ----- 12-5: gap ----- */
.gap_all_10 {
	gap: 10px;
}

.gap_row_5 {
	gap: 0px 5px;
}

.gap_row_10 {
	gap: 0px 10px;
}

.gap_col_10 {
	gap: 10px 0px;
}

/* ----- 12-6: glow ----- */
.flex_glow_100 {
	flex-grow: 1;
}

@media screen and (max-width: 641px) {
	.sp_flex_glow_100 {
		flex-grow: 1;
	}
}

.flex_glow_50 {
	flex-grow: 0.5;
}

/* ----- 12-7: flex ----- */
.sp_flex_1 {
	flex: 1;
}
@media screen and (min-width: 641px) {
	.sp_flex_1 {
		flex: 0 0 auto;
	}
}

.flex_half {
	flex: 0.5;
}
@media screen and (max-width: 641px) {
	.flex_half {
		flex: 1 1 auto;
	}
}
.pc_flex_1 {
	flex: 1;
}
@media screen and (max-width: 641px) {
	.pc_flex_1 {
		flex: 1 1 auto;
	}
}
.pc_flex_2 {
	flex: 2;
}
@media screen and (max-width: 641px) {
	.pc_flex_2 {
		flex: 1 1 auto;
	}
}

.flex_1 {
	flex: 1;
}

/*
==========================================================

* 13: step_nav

==========================================================
*/
.defect_arrow_step {
	display: flex;
	width: calc(100% - 50px);
	margin: 0 auto;
	padding: 15px 0px;
	justify-content: space-between;
	height: 50px;
}

.defect_arrow_map {
	display: flex;
	width: 100%;
	position: relative;
	flex-direction: row-reverse;
}

.defect_arrow_map:first-child {
	width: auto;
}

.defect_arrow_text:first-child {
	width: 40px;
}

.defect_arrow_text {
	position: relative;
}

.defect_arrow_text p {
	text-align: center;
	font-weight: bold;
	color: #d5dedb;
	font-size: 11px;
	margin-top: 8px;
	margin-bottom: 0px;
	position: absolute;
	transform: translateX(-50%);
	left:50%;
}

.defect_arrow_map:before {
	position: absolute;
	top: 5px;
	left: -16px;
	width: calc(100% - 8px);
	height: 1.5px;
	content: "";
	background-color: #d5dedb;
	z-index: -50;
}

.defect_arrow_map:first-child:before {
	content:none;
}

.defect_arrow_text:first-child:before {
	content: '';
	display: block;
	background-color: #d5dedb;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin: 0 auto;
}

.defect_arrow_map.comp.stay .defect_arrow_text p {
	color:#10563b;
	width: 90px;
}

.defect_arrow_map.comp .defect_arrow_text::before,
.defect_arrow_map.comp::before {
	background-color: #10563b;
}

@media screen and (min-width:641px) {
	.defect_arrow_step {
		display: flex;
		width: 65%;
		margin: 0 auto;
		padding: 15px 0px;
		justify-content: space-between;
	}
	
	.defect_arrow_map {
		display: flex;
		width: 100%;
		position: relative;
		flex-direction: row-reverse;
	}
	
	.defect_arrow_map:first-child {
		width: auto;
	}
	
	.defect_arrow_text:first-child {
		width: 100px;
	}
	
	.defect_arrow_text p {
		text-align: center;
		font-weight: bold;
		color: #d5dedb;
		font-size: 13px;
		margin-top: 8px;
	}
	
	.defect_arrow_map:before {
		position: absolute;
		top: 6px;
		left: -42.5px;
		width: 100%;
		height: 3px;
		content: "";
		background-color: #d5dedb;
	}
	
	.defect_arrow_map:first-child:before {
		content:none;
	}
	
	.defect_arrow_text:first-child:before {
		content: '';
		display: block;
		background-color: #d5dedb;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin: 0 auto;
	}
	
	.defect_arrow_map.comp.stay .defect_arrow_text p {
		color:#10563b;
		width: 130px;
	}
	
	.defect_arrow_map.comp .defect_arrow_text::before,
	.defect_arrow_map.comp::before {
		background-color: #10563b;
	}
}

/*
==========================================================

* 14: label

==========================================================
*/
/* ----- 14-1: required ----- */
.required_label {
	border-radius: 3px;
	background-color: #Af2424;
	color: #FFF;
	font-size: 12px;
	padding: 2px 12px;
	text-align: center;
	width: 50px;
	margin-right: 8px;
	line-height: 18px;
}

.required_label:after {
	content:"必須";
}

/* ----- 14-2: optional ----- */
.optional_label {
	border-radius: 3px;
	background-color: #888888;
	color: #FFF;
	font-size: 12px;
	padding: 2px 12px;
	text-align: center;
	width: 50px;
	margin-right: 8px;
	line-height: 18px;
}

.optional_label:after {
	content:"任意";
}

/* ----- 14-3: tool_tip ----- */
.tool_tip_box {
	position: relative;
}

.tool_tip_label {
	position:absolute;
	width: auto;
	height: auto;
	display: inline-block;
	background:rgba(0,0,0,0.7);
	padding:8px;
	text-align:center;
	color:#FFFFFF;
	font-size:14px;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	/* transition: all 3s; */
}

.tool_tip_label:after {
	border: solid transparent;
	content:'';
	height:0;
	width:0;
	pointer-events:none;
	position:absolute;
	border-color: rgba(0,0,0,0);
	border-top-width:10px;
	border-bottom-width:10px;
	border-left-width:10px;
	border-right-width:10px;
	margin-left: -10px;
	border-top-color:rgba(0,0,0,0.7);
	top:100%;
	left:35px;
}

@media screen and (max-width: 641px) {
	.tool_tip_label {
		max-width: 40%;
	}
}

.tool_tip_label.typing {
	display: none !important;
}

.tool_tip_special {
	opacity: 1;
	animation: fadeout 10s;
	animation-fill-mode: forwards;
}

@keyframes fadeout {
	from { opacity: 1; }
  to { opacity: 0; }
}

/*
==========================================================

* 15: modal

==========================================================
*/

.modal_background {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.7;
	background: #333;
	z-index: 10000;
	touch-action: none;
}

/* ----- 15-1: finance_search ----- */
.financial_modal_contents {
	width: 95%;
	height: 80%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
}

.financial_modal_header {
	background: #DDD;
	width: auto;
	height: auto;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 10px;
}

.financial_modal_body {
	width: 100%;
	height: 100%;
	background: #FFF;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.financial_result_wrap {
	overflow-y: scroll;
	box-shadow: 0px 0px 10px -3px #777777;
	border-radius: 8px;
}

.financial_search_result {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
}

.financial_search_result.select_institution {
	background-color: #d6f1e6;
}

/* ----- 15-2: general_iframe ----- */
.iframe_modal_inner {
	width: 90%;
	max-width: 600px;
	height: 600px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	background-color: #FFF;
}

.iframe_modal_inner iframe {
	width: 100%;
	height: 505px;
	overflow: hidden auto;
	border: none;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

/* ----- 15-3: general_popup ----- */
.ol_pop_contents {
	width: 80%;
	max-width: 800px;
	height: auto;
	max-height: 90%;
	overflow-y: auto;
	z-index: 10001;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
	border-radius: 8px;
}
@media screen and (max-width:641px) {
	.ol_pop_contents {
		width: 95%;
		overflow-y: scroll;
		justify-content: flex-start;
	}
}

.ol_pop_header {
	background: #DDD;
	width: auto;
	height: auto;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 10px;
}

.ol_pop_body {
	width: calc(100% - 20px);
	height: 100%;
	margin: 0 auto;
	background: #FFF;
	display: flex;
	flex-direction: column;
	padding: 0px 10px;
}

.ol_pop_body div:has(.ol_second_btn) {
	margin-bottom: 10px !important;
}

.ol_pop_wrap {
	overflow-y: scroll;
	box-shadow: 0px 0px 10px -3px #777777;
	border-radius: 8px;
  width: 95%;
	min-height: 50%;
	height: auto;
  margin: 20px auto 40px auto;
  padding: 10px 5px 10px 0px;
	overflow: auto;
	max-height: 30vh;
}

.ol_pop_inner {
	overflow-y: auto;
	height: 430px;
	width: 100%;
	box-sizing: border-box;
}

.ol_pop_inner::-webkit-scrollbar {
	position: absolute;
	right: 0;
	width: 6px;
}

.ol_pop_inner::-webkit-scrollbar-track {
	background-color: #ccc;
	border-radius: 6px;
	position: absolute;
	right: 0;
}

.ol_pop_inner::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 6px;
	position: absolute;
	right: 0;
}

.ol_pop_inner_contents {
	background-color: #FFF;
	max-height: calc(80% - (45px + 175px));
}

@media screen and (max-width:641px) {
	.ol_pop_inner_contents {
		max-height: 100%;
	}
}

.ol_pop_inner_contents:has(+ .ol_btn_box) {
	padding-bottom: 10px !important;
}

.ol_pop_box {
  position: relative;
  margin: 5px 0px;
}

.ol_btn_box {
	bottom: 0px;
	width: 100%;
	background: #FFF;
	padding-top: 20px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

input[type^=radio][class*=ol_pop_radio] {
  position: absolute;
  top:50%;
  left:25px;
  transform: translate(-50%, -50%);
  background: #FFF;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 1px #C4C4C4;
}

.ol_pop_radio:checked:after {
  content: "";
  width: 9px;
  height: 9px;
  display: block;
  background: #00846D;
  position: absolute;
  top: calc(50% + 0.5px);
  left: calc(50% + 0.5px);
  transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));
  border-radius: 50%;
}

.ol_pop_radio:checked + label {
  background-color: #d6f1e6;
}

.ol_pop_result {
  display: inline-block;
  padding: 5px 0px 5px 50px;
  width: calc(100% - 50px);
  line-height: 1.6em;
	cursor: pointer;
}

.ol_pop_disp {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgb(0 0 0 / 50%);
	z-index: 99998;
}

.ol_pop_win {
	position: absolute;
	width: 95%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: inline-block;
	border-radius: 8px;
	max-height: 675px;
	margin: auto;
	border: none;
}
@media screen and (min-width:641px) {
	.ol_pop_win {
		width: 50%;
	}
}
@media screen and (max-width:767px) {
	.ol_pop_win {
		width: 95%;
		max-height: 675px;
	}
}

div.iframe_modal_inner > * ,
div#AddressSearchDispBody > * ,
div#FinancialInstitutionPopArea > * {
	touch-action: pan-y;
	overscroll-behavior: contain;
}


html:has(div.modal_background) {
	overscroll-behavior: none;
}

/* ----- 15-4: implement_modal ----- */
.implement_modal {
	width: 65%;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #FFF;
	border-radius: 10px;
	z-index: 10001;
	padding: 15px;
}

.modal_searchError {
	padding: 5px;
	border: 1px solid #ff7a57;
	background: #ffeeee;
}

/*
==========================================================

* 16: field

==========================================================
*/

/* ----- 16-1: default ----- */

/* ----- 16-1-1: general ----- */
.w125f {
	width: 125px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w125f {
		min-width: auto;
	}
}
.w155f {
	width: 155px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w155f {
		min-width: auto;
	}
}
.w160f {
	width: 160px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w160f {
		min-width: auto;
	}
}
.w220f {
	width: 220px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w220f {
		min-width: auto;
	}
}
.w240f {
	width: 240px;
	max-width: 100%;
}
@media screen and (max-width: 640px) {
	.w240f {
		min-width: auto;
	}
}
.w260f {
	width: 260px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w260f {
		min-width: auto;
	}
}
.w300f {
	width: 300px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w300f {
		min-width: auto;
	}
}
.w330f {
	width: 330px;
	max-width: 100%;
}
@media screen and (max-width: 641px) {
	.w330f {
		min-width: 100%;
	}
}
.w400f {
	width: 400px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w400f {
		min-width: auto;
	}
}
.w420f {
	width: 420px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w420f {
		min-width: auto;
	}
}
.w440f {
	width: 440px;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	.w440f {
		min-width: auto;
	}
}
/* ----- 16-1-2: radio_field ----- */
.w150r {
	width: auto;
}
@media screen and (min-width: 641px) {
	.w150r {
		width: 150px;
		min-width: auto;
	}
}
.w155r {
	width: auto;
}
@media screen and (min-width: 641px) {
	.w155r {
		width: 155px;
		min-width: auto;
	}
}
.w160r {
	width: auto;
}
@media screen and (min-width: 641px) {
	.w160r {
		width: 160px;
		min-width: auto;
	}
}
.w175r {
	width: auto;
}
@media screen and (min-width: 641px) {
	.w175r {
		width: 175px;
		min-width: auto;
	}
}

/* ----- 16-2: unique ----- */

/* ----- 16-2-1: name ----- */
.name_input_field {
	width: 100%;
	max-width: 240px;
}
@media screen and (min-width: 641px) {
	.name_input_field {
		width: 240px;
	}
}

/* ----- 16-2-2: birth ----- */
.birth_field {
	display: flex;
	align-items: center;
	flex-direction: column;
}
@media screen and (min-width: 641px) {
	.birth_field {
		flex-direction: row;
	}	
}

.birth_field-time {
	width: 100%;
}
@media screen and (min-width: 641px){
	.birth_field-time {
		width: auto;
	}
}

.birth_year_field {
	margin-bottom: 10px;
	width: 100%;
}
@media screen and (min-width: 641px) {
	.birth_year_field {
		margin-bottom: 0px;
		margin-right: 10px;
		width: 220px;
	}
}

.birth_month_field,
.birth_day_field {
	width: 40%;
}
@media screen and (min-width: 641px) {
	.birth_month_field,
	.birth_day_field {
		width: 70px;
	}
}

.tri_number_year_month_day {
	display: flex;
	align-items: center;
	flex-direction: column;
}
@media screen and (min-width: 641px) {
	.tri_number_year_month_day {
		flex-direction: row;
	}
}
.tri_number_year  {
	margin-bottom: 10px;
	width: 100%;
}
@media screen and (min-width: 641px) {
	.tri_number_year  {
		margin-bottom: 0px;
		margin-right: 10px;
		width: 220px;
	}
}
.tri_number_month_day {
	width: 100%;
}
@media screen and (min-width: 641px){
	.tri_number_month_day {
		width: auto;
	}
}
.tri_number_month,
.tri_number_day {
	width: 50%;
}
@media screen and (min-width: 641px) {
	.tri_number_month,
	.tri_number_day {
		width: 50%;
	}
}
.tri_number_month:has(+ .tri_number_day) {
	margin-right: 10px;
}

/* ----- 16-2-3: phone ----- */
.mobile_number_field,
.phone_number_field {
	width: 80px;
}
.extension_number_field {
	margin-top: 10px;
	width: 120px;
}
.entry_number_field {
	width: 80px;
}
@media screen and (min-width: 641px) {
	.mobile_number_field,
	.phone_number_field {
		width: 90px;
	}
	.extension_number_field {
		width: 120px;
	}	
	.entry_number_field {
		width: 90px;
	}
}

/* ----- 16-2-4: company_join ----- */
.joinyear_number_year {
	width: 60vw;
}
@media screen and (min-width: 641px) {
	.joinyear_number_year {
		width: 220px;
	}
}
.joinyear_number_month {
	width: 35vw;
}
@media screen and (min-width: 641px) {
	.joinyear_number_month {
		width: 100px;
	}
}

.bi_number_year_month {
	display: flex;
}
.bi_number_year {
	width: 60vw;
}
@media screen and (min-width: 641px) {
	.bi_number_year {
		margin-bottom: 0px;
		margin-right: 10px;
		width: 220px;
	}
}
.bi_number_month {
	width: 35vw;
}
@media screen and (min-width: 641px) {
	.bi_number_month {
		width: auto;
	}
}
.bi_number_year:has(+ .bi_number_month) {
	margin-right: 10px;
}

/* ----- 16-2-5: branch_search_result ----- */
#branch_search_result {
	pointer-events: none;
}

/* ----- 16-2-6: Accomplish_Field ----- */
.accomplish_area {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.accomplish_title {
	width: 15%;
	display: flex;
	align-items: center;
	justify-content: end;
}

.accomplish_field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	width: 75%;
}

@media screen and (max-width: 641px) {
	.accomplish_area {
		width: 100%;
		flex-direction: column;
		margin-top: 10px;
	}
	.accomplish_title {
		width: auto;
		min-width: 85px;
		justify-content: start;
	}
	.accomplish_field {
		flex-grow: 1;
		width: auto;
	}
}
/* ----- 16-2-7: Address_Input_Field ----- */
input.address_input_field {
	width: 100%;
	border: none;
	pointer-events: none;
}

/*
==========================================================

* 17: section

==========================================================
*/

/* ----- 17-1: general-section ----- */
.ol_member_wrap {
	width: 100%;
}

.ol_member_section {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.ol_member_section.sp_border_leave {
	border-top: solid 2px #e8e8e8;
}
@media screen and (min-width:641px) {
	.ol_member_section {
		flex-direction: row;
		border-top: solid 2px #e8e8e8;
	}
}

/* ----- 17-2: general-section-title ----- */
.ol_member_section__title {
	background-color: #F1F1F1;
	padding: 15px 10px;
	display: flex;
	align-items: center;
	min-width: 151px;
}
@media screen and (min-width:641px) {
	.ol_member_section__title {
		width: 100%;
		max-width: 210px;
		background-color: #F1F1F1;
		padding: 35px 20px;
		flex-direction: column;
		align-items: flex-start;
	}
}
@media only screen and (min-width: 641px) and (max-width: 767px) {
	.ol_member_section__title {
		width: 151px;
	}
}


.ol_member_section__title--inner {
	display: flex;
	width: 100%;
	flex-direction: row;
}
@media screen and (min-width:641px){
	.ol_member_section__title--inner {
		flex-direction: column;
	}
}

.ol_member_section__subtitle {
	display: flex;
	align-items: center;
	margin: 30px 0px;
}

.ol_member_section__subtitle:after {
	content: "";
	border-top: solid 2px #e8e8e8;
	flex-grow: 0.9;
	margin: 0px 2.5% 0px auto;
}

.ol_member_section__subtitle.separator_rm:after {
	content: none;
}

.ol_member_section__title.input_error:not(.hide_title_error, .typing) {
	background-color: #f1b2b2;
}

.ol_member_section__title.server_checked_error:not(.hide_title_error) {
	background-color: #f1b2b2;
}


/* ----- 17-3: general-section-contents ----- */
.ol_member_section__contents {
	width: 100%;
	padding: 20px 10px;
	overflow-wrap: anywhere;
	word-break: break-all;
	line-break: strict;
}
@media screen and (min-width:641px) {
	.ol_member_section__contents {
		min-width: 450px;
		padding: 30px;
	}
}

@media screen and (min-width:641px) {
	.ol_member_section__contents .ol_member_section__contents {
		min-width: auto;
	}
}

.ol_inner_contents {
	padding: 20px 0px 20px 10px;
}
@media screen and (max-width:641px) {
	.ol_inner_contents {
		padding: 20px 0px 20px 0px;
	}
}

.ol_member_section__title--text {
	font-weight: bold;
	font-size: 16px;
	margin-right: 10px;
	display: inline-block;
}
@media screen and (min-width:641px) {
	.ol_member_section__title--text {
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 8px;
		max-width: 100%;
		width: 84%;
	}
}

.wd_85 {
	width: 85%;
}
@media screen and (min-width:641px) {
	.wd_85 {
		width: 85%;
	}
}

/* ----- 17-4: general-section-icon ----- */
.ol_member_section__title--text_cc9 {
	font-weight: bold;
	font-size: 16px;
	margin-right: 10px;
	display: inline-block;
}
@media screen and (min-width:641px) {
	.ol_member_section__title--text_cc9 {
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 8px;
		max-width: 100%;
		width: 85%;
	}
}

.ol_member_section__title--text:has(+ a.question_icon.pc_disp) {
	flex: 1;
}

/* ----- 17-4: general-section-icon ----- */
.ol_member_section__iconbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	flex: 2;
}

.ol_member_section__subtitle .ol_member_section__iconbox {
	flex: 0 0 auto;
}

/* ----- 17-5: custom-section ----- */
.confirm_matters {
	margin-top: 30px;
}
@media screen and (min-width:641px) {
	.confirm_matters {
		margin-top: 50px;
	}
}

/* ----- 17-6: section-border ----- */
div.border_bottom_gray:has(> .ol_member_section) {
	border-bottom: none !important;
}

div.ol_member_section div.border_bottom_gray:not(.disp_none):last-of-type{
	border-bottom: none !important;
}

div > .ol_member_section:not(.disp_none):has(~ .ol_member_section:not(.disp_none)) {
	border-bottom: none !important;
}

div > .ol_member_section:not(.disp_none):last-of-type,
div > .ol_member_section:not(.disp_none):has(+ .ol_member_section.disp_none) {
	border-bottom: solid 2px #e8e8e8;
}

.ruled_line:has(+ .contents_error_area),
.ruled_line:has(+ .ruled_line) {
	border-bottom: solid 2px #e8e8e8;
	margin-bottom: 10px;
}

/*
==========================================================

* 18: area

==========================================================
*/

/* ----- 18-1: input_confirm ----- */
.input_confirm_area {
	background: #f2f9f8;
	border: solid 1px #1A4B32;
	border-radius: 4px;
	padding:20px;
}

div.font_strong_green > .text_center,
p.font_strong_green.text_center {
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left; 
}

.input_confirm_area.input_error {
	background: #fef6f6;
	border: solid 1px #EB4D4D;
}

.input_confirm_area.input_error > p {
	color: #EB4D4D;
}

/* ----- 18-2: alert ----- */
.alert_area {
	background: #fef6f6;
	border-radius: 4px;
	padding: 20px;
	word-break: break-all;
	line-break: anywhere;
}

/* ----- 18-3: error-alert ----- */
.error_alert_area {
	background: #EB4D4D1A;
	border: solid 1px #EB4D4D;
	border-radius: 4px;
	padding: 20px;
}

/* ----- 18-4: color-area ----- */
.white_area {
	background-color: #FFF !important;
}

.gray_area {
	background-color: #F1F1F1 !important;
}

.light_green_area {
	background: #00846D0D;
	border-radius: 4px;
	padding: 20px;
}

.light_yellow_green_area {
	background: #D6F1E6;
}

/* ----- 18-5: error-area ----- */
.contents_error_area {
	position: relative;
	min-height: 40px;
	display: flex;
	align-items: flex-start;
}

.generic_alert_icon {
	position: absolute;
	left: 8px;
	/* top: 8px; */
	align-items: center;
	display: flex;
	height: 100%;
	transform: translateY(-5%);
}

.alert_area .triangle_text {
	bottom: 0px;
	left: 1px;
}

.generic_error {
	padding: 4px 0px 10px 40px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6em;
}

/* ----- 18-6: attention-area ----- */
.attention_matter_area {
	background-color: #F1F1F1;
	border-radius: 6px;
}

/* ----- 18-7: income-matrix-area ----- */
.income_matrix_area {
	display: flex;
	flex-direction: column;
	border:solid 1px;
	border-bottom:none;
}

.matrix_header {
	background-color: #f4f4f4;
}

.matrix_cell_1 {
	flex: 1;
	border-right:solid 1px;
	border-bottom: solid 1px;
	padding: 10px;
}

.matrix_cell_2 {
	flex: 2;
	border-bottom: solid 1px;
	padding: 10px;
}

.matrix_cell_3 {
	flex: 3;
	border-bottom: solid 1px;
	padding: 10px;
}

/* complicated matrix */
.income_matrix_area.comp_matrix,
.comp_matrix .matrix_cell_1,
.comp_matrix .matrix_cell_2,
.comp_matrix .matrix_cell_3 {
	border: none;
}

.comp_matrix .matrix_header {
	border: solid 1px;
}

.comp_matrix .comp_cell {
	border: solid 1px;
	border-top: none;
}

.comp_cell .matrix_cell_1 {
	border-right: solid 1px;
}

/* ----- 18-8: green-area ----- */
.green_box_area {
	background: #f2f9f8;
	border: solid 1px #1A4B32;
	border-radius: 4px;
	padding:20px;
}

/* ----- 18-9: ekyc-grid ----- */
.ekyc_img_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.ekyc_img_box img {
	width: 30%;
}

@media screen and (max-width: 640px) {
	.ekyc_img_box {
		flex-direction: column;
		gap: 10px;
	}
	
	.ekyc_img_box img {
		width: 80%;
		margin: 0 auto;
	}
}

.upload_thumbnail_area {
	max-height: 300px;
	overflow: auto;
	scrollbar-gutter: stable;
}

.disabled_area {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.mail_confirm_break_line{
	word-break: break-all;
	line-break: anywhere;
}

.is_header_fixed {
	z-index: 10000;
	position: fixed;
	top: 0;
	width: 100%;
}

/*
==========================================================

* 19: link

==========================================================
*/

/* ----- 19-1: blank-link ----- */
.blank_link01 {
  color: #00846D !important;
  position: relative;
}
.blank_link01::before {
	content: '';
	display: inline-block;
	margin-right: 8px;
	width: 1.0em;
	height: 1.0em;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a,.b,.c{fill:none;}.b,.c{stroke:%2300846d;stroke-linecap:round;stroke-width:2px;}.b{stroke-linejoin:round;}%3C/style%3E%3C/defs%3E%3Crect class='a' width='16' height='16'/%3E%3Cg transform='translate(2.455 2.455)'%3E%3Cpath class='b' d='M12.086,9.711v2.376H1V1H3.376' transform='translate(-1 -1)'/%3E%3Cpath class='b' d='M9,1h4.751V5.752' transform='translate(-2.665 -1)'/%3E%3Cpath class='c' d='M5,1,0,6' transform='translate(5.543 -0.457)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center right;
	background-size: contain;
	vertical-align: -2px;
}

/* ----- 19-2: modal-text-link ----- */
.modal_text_link {
	color: #00846D !important;
	position: relative;
}
.modal_text_link::before {
	content: '';
	display: inline-block;
	margin-right: 8px;
	width: 1.0em;
	height: 1.0em;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a,.b,.c{fill:none;}.b,.c{stroke:%2300846d;stroke-linejoin:round;stroke-width:2px;}.c{stroke-linecap:round;}%3C/style%3E%3C/defs%3E%3Crect class='a' width='16' height='16'/%3E%3Cg transform='translate(2.355 2)'%3E%3Cpath class='b' d='M9,7.088V9H1V1H2.914' transform='translate(-1 2.641)'/%3E%3Crect class='c' width='8' height='8' transform='translate(3.644)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center right;
	background-size: contain;
	vertical-align: -2px;
}

/* ----- 19-3: default-link ----- */
a.ol_link {
	color : #00846D;
	text-decoration: underline;
}
a.ol_link:hover {
	opacity: 0.5;
}

/* ----- 19-4: popup_link ----- */
.popup_link {
	color: #00846D;
	text-decoration: underline;
}
.popup_link::before {
	content: '';
	display: inline-block;
	margin-right: 8px;
	width: 1.0em;
	height: 1.0em;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a,.b,.c{fill:none;}.b,.c{stroke:%2300846d;stroke-linecap:round;stroke-width:2px;}.b{stroke-linejoin:round;}%3C/style%3E%3C/defs%3E%3Crect class='a' width='16' height='16'/%3E%3Cg transform='translate(2.455 2.455)'%3E%3Cpath class='b' d='M12.086,9.711v2.376H1V1H3.376' transform='translate(-1 -1)'/%3E%3Cpath class='b' d='M9,1h4.751V5.752' transform='translate(-2.665 -1)'/%3E%3Cpath class='c' d='M5,1,0,6' transform='translate(5.543 -0.457)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center right;
	background-size: contain;
	vertical-align: -2px;
}

/*
==========================================================

* 20: list

==========================================================
*/

li {
	list-style: none;
}

/* ----- 20-1: notes_list ----- */
.notes_list {
	font-size: 14px;
}

.notes_list li:before {
	content: "※";
	margin-left: -1.2em;
	position: absolute;
}

.notes_list li {
	list-style: none;
	padding: 0px 0px 5px 1.2em;
}

/* ----- 20-2: gray_disc_list -----  */
.gray_disc_list > li {
	font-size: 16px;
	padding-left: 1em;
	position: relative;
	margin-bottom: 5px;
}

.gray_disc_list > li:before {
	content: '';
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: #C4C4C4;
	left: 0px;
	top: 0.5em;
}

/* ----- 20-3: number_disc_list -----  */
.number_disc_list > li {
	font-size: 16px;
	padding-left: 2em;
	position: relative;
	margin-bottom: 10px;
}

.number_disc_list > li:before {
	content: '';
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background-color: #D6F1E6;
	left: 0.3em;
	top: 0.25em;
}

.number_disc_list > li span {
	color: #00846D;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	position: absolute;
	top: 0.2em;
	left: 0.75em;
	font-size: 14px;
}

.number_disc_list > li.gray:before {
	background-color: #999999
}

.number_disc_list > li span.font_white {
	color: #FFFFFF;
}

/*
==========================================================

* 21: chevron

==========================================================
*/

/* ----- 21-1: under_chevron ----- */
.under_chevron:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 8px 0 8px;
	border-color: #00846e transparent transparent transparent;
}

/*
==========================================================

* 22: height

==========================================================
*/

.height_auto {
	height: auto;
}
input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px #fff inset;
}

.hgt_120 {
	height: 120px;
	padding: 1px;
}

/*
==========================================================

accordion

==========================================================
*/

.accordion {
	border: solid 2px #e8e8e8;
	position: relative;
	transition: 0.3s;
}

.accordion_content {
	max-height: 0px;
	transition: all 0.3s;
}
.accordion_toggle {
	background-color: #00846D;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	position: relative;
	cursor: pointer;
	flex: none;
}

.accordion_toggle:before {
	content: '';
	width: 2px;
	height: 12px;
	background-color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.3s;
}

.accordion_toggle:after {
	content: '';
	width: 2px;
	height: 12px;
	background-color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.accordion_toggle.open:before {
	transform: translate(-50%, -50%) rotate(-90deg);
}

@media screen and (min-width:641px) {
	.accordion_content .ol_member_section .ol_member_section__contents {
		min-width: auto;
	}
}

/*
==========================================================

textarea

==========================================================
*/

textarea.input_textarea {
	font-size: 18px;
	height: 5em;
	overflow-y: scroll;
	padding-left: 5px;
}

#EasyAppInputDispBody_FormWrapper #ExistEmploySection_Body_AboutOccupationChangeField_AboutOccupationChangeBlock {
	border-bottom: none;
}

/*
==========================================================

SBI_floating

==========================================================
*/
#sbi_floating {
	display: block;
	position: fixed;
	height: 100px;
	width: 100%;
	bottom: 0px;
	right: 0px;
	left: 0px;
	background-color: rgb(10, 10, 10, 0.5) !important;
	z-index: 99999;
}