@charset "utf-8";

/* Contents
 * ****************************
 *
 * 0: base
 * 0-1: footer
 * 1: heading
 * 2: paragraph
 * 3: list
 * 4: table
 * 5: box
 * 6: form
 * 7: link
 * 8: other
 * 9: 個人情報の取扱インライン
 * 10: 利用規約インライン
 * 11: 追従バナー
 * ****************************
 */


/*======= 0: base ========================================================*/
body {
	/*padding-bottom: 50px;*/
	color: #222;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ ゴシック',Osaka,sans-serif;
	font-size: 88%;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}
	body.sp_bodyBg01 {
		background: #FFF;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

/* PC */
@media screen and (max-width: 1060px) {
  body#index #hNav {
    font-size:13px;
  }
}

/* tablet */
@media screen and (max-width: 980px) {
	#hNav {
		font-size:12px;
	}
  #hNav li a{
    padding-right: 5px !important;
  }
}
/* tablet */
@media screen and (max-width: 900px) {
  #hNav {
		font-size:10px;
	}
  #hNav li a{
    padding-right: 3px !important;
  }
}

/* SP*/
@media screen and (max-width: 768px) {
	#hNav {
		display: none !important;
	}
}



/*======= 0-1: footer ========================================================*/
@media screen and (min-width: 769px) { /* for PC */
    #footerNav .footerInner01__list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto -10px;
        /**/
        max-width: 700px;
    }
    #footerNav .footerInner01__list li{
        margin-bottom: 10px;
        float: none;
    }
    #footerNav .footerInner01__list li:first-child,
    #footerNav .footerInner01__list li:nth-child(6){
        border-left:none;
    }
    #footerNav .footerInner01__list li a{

    }
}
/* SP*/
@media screen and (max-width: 768px) {
    #footerNav .footerInner01__list li:last-child{
        border-right: 1px solid #ADADAD !important;
    }
    #footerNav .footerInner01__list li a{
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        line-height: 1.65;
    }
}


/*======= 1: heading =====================================================*/

/* [h1] --------------------------------------------*/


/* [h3] --------------------------------------------*/
.ttlType02,
h3.ttlType02 {
	position: relative;
	font-size: 143%;
	padding: 2px 5px 2px 15px;
	border-left: 5px solid #2E3E9E;
	margin-bottom: 20px;
	box-sizing: border-box;
}
h3.ttlType02 span::after {
	content: "：";
}
@media screen and (max-width: 768px) {
	.ttlType02,
	h3.ttlType02 {
		position: relative;
		font-size: 133%;
		padding: 0 5px 0 10px;
		border-left: 5px solid #2E3E9E;
		margin-bottom: 15px;
	}
}

/* [h4] --------------------------------------------*/
h4.sttlTypeLine01 {
	font-size: 142%;
	font-weight: normal;
	margin-bottom: .5em;
	font-weight: bold;
}
h4.sttlTypeLine01::before {
	content: "■";
	padding-right: 5px;
	color: #2E3E9E;
}
h4.sttlTypeBg01 {
	margin-bottom: 10px;
	padding: 5px;
	background: #F1F2F6;
}

/* [other] -----------------------------------------*/
.sttlBgType01 {
	margin-bottom: 10px;
	padding: 5px;
	background: #F1F2F6;
}
/*-- ttlTypeForm --------------------*/
.ttlTypeForm {
	position: relative;
	padding: 10px 60px 10px 10px;
	background: #F1F1F1;
}
.sttlMarker01 {
	margin-bottom: 60px;
	text-align: center;
	font-size: 173%;
	font-weight: bold;
}
.sttlMarker01 span {
	display: inline-block;
	padding: 0 10px;
	background: linear-gradient(transparent 65%, #FFF491 0%);
}
@media screen and (max-width: 768px) {
	.sttlMarker01 {
		margin-bottom: 20px;
		font-size: 133%;
	}
}

/*======= 2: paragraph ===================================================*/


/* [indent] ----------------------------------------*/

/*-- boxIdt01 -----------------------*/
.boxIdt01 p {
	margin-left: 1em;
	text-indent: -1em;
}

/*-- txtIdt01 -----------------------*/
.txtIdt01 {
	margin-left: 1em;
	text-indent: -1em;
}


/*======= 3: list ========================================================*/

/* [ul] --------------------------------------------*/
ul li {
	list-style: none;
}

/*-- listArw01 ----------------------*/
.listArw01 li {
	margin: 5px 0 0 12px;
	text-indent: -12px;
	text-align: left;
}
.listArw01 li:first-child {
	margin-top: 0;
}
/* for triangle icon */
.listArw01 li:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left: 5px solid #5162C4;
}

/*-- listDevice ---------------------*/
.listDevice {
	margin-bottom: 20px;
}
.listDevice li {
	float: left;
	margin-left: 34px;
}
.listDevice li:first-child {
	margin-left: 0;
}

.listLine li {
	display: inline-block;
	padding-right: 15px;
	line-height: 2;
}
.listLine li:last-child {
	padding-right: 0;
}

@media screen and (max-width: 980px) {
	.listDevice {
		margin-bottom: 5px;
	}
	.listDevice li {
		float: none;
		width: auto;
		margin: 0 0 10px;
	}
}

/* [ol] --------------------------------------------*/
ol.list_number{
	padding:0 0 0 5px;
	margin:0;
}
ol.list_number li {
	list-style-type:none;
	list-style-position:inside;
	counter-increment: num;
	text-indent: -1.2em;
	padding-left: 1.2em;
	margin-bottom: 5px;
}
ol.list_number li:before{
	display: marker;
	content: counter(num) ". ";
}
ol.list_number li ul {
	padding: 10px 0 5px;
}
ol.list_number li ul li {
	list-style-type:none;
	list-style-position:inside;
	text-indent: -2em;
	padding-left: 2em;
	margin-bottom: 5px;
}
	ol.list_number li ul li:before{
		content: "";
	}

ol.list_parentheses{
	padding:0 0 0 5px;
	margin:0;
}
ol.list_parentheses li {
	list-style-type:none;
	list-style-position:inside;
	counter-increment: cnt;
	text-indent: -1.7em;
	padding-left: 1.7em;
	margin-bottom: 5px;
}
ol.list_parentheses li:before{
	display: marker;
	content: "(" counter(cnt) ") ";
}


/*-- upload_data_list ---------------------*/
#upload_data_list{
  position: relative;
  border:1px solid #ddd;
  margin-bottom: 15px;
  background: #f9f9f9;
}
#upload_data_list li{
  position: relative;
}
#upload_data_list li{
  border-bottom:1px solid #ddd;
}
#upload_data_list li:last-child{
  border-bottom:none;
}
.upload_data_list__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
}
.upload_data_list__inner p{
  width: 100%;
  padding-right: 15px;
  margin: 0;
  box-sizing: border-box;
}
.upload_data_list__inner .delete_upload_data_button{
  min-width: 50px;
  max-width: 50px;
  height: 30px;
  border-radius: 4px;
  line-height: 1;
  background: #555;
  color:#fff;
  font-size:13px;
  border:none;
  padding-top: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.uploadBox{
  
}
.tblBase01 td #upload_data_list{
  /*margin: -25px -28px 25px;*/
}

/* [dl] --------------------------------------------*/


/*======= 4: table =======================================================*/
table {
	width: 100%;
}

/*-- tblBase01 ----------------------*/
.tblBase01 {
	margin-bottom: 30px;
	border: 2px solid #D9DAE4;
	background: #FFF;
}
.tblBase01 th,
.tblBase01 td {
	padding: 25px 28px;
	text-align: left;
	border-top: 1px solid #D9DAE4;
}
.tblBase01 tr:first-child th,
.tblBase01 tr:first-child td {
	border-top: none;
}
.tblBase01 tbody:not(:first-child) tr th,
.tblBase01 tbody:not(:first-child) tr td {
	border-top: 1px solid #D9DAE4;
}
.tblBase01 th {
	padding-right: 10px;
	background: #F1F1F1;
}
.tblBase01 th div {
	position: relative;
	padding-right: 60px;
}
.tblBase01 td div.possibleDay {
	max-height: 150px;
	overflow: auto;
}
/* 2021-12-01 yamaoka school history と異なる layout 間隔になること、企業により許容 job_history の数が異なることを理由に comment out。問題ない？
#job_history1.tblBase01,
#job_history2.tblBase01,
#job_history3.tblBase01,
#job_history4.tblBase01{
	margin-bottom: 5px;
}
*/
@media screen and (max-width: 768px) {
	.tblBase01 {
		margin-bottom: 15px;
		border: none !important;
	}
	.tblBase01 th,
	.tblBase01 td {
		display: block;
		width: 100% !important;
		padding: 15px 10px;
		box-sizing: border-box;
		border-top: none;
	}
	.tblBase01 th {
		padding: 8px 0 8px 10px;
		color: #FFF;
		font-size: 13px;
		background: #2F3E9E;
	}
	.subContents  th {
		color: #2C2C37;
		background: #F1F1F1;
	}
	.tblBase01 th a {
		color: #AAB1DD;
	}
	.tblBase01 th br {
		display: none;
	}
	.tblBase01 td div.possibleDay {
		min-height: 100%;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.careerBox .tblBase01 {
		margin-bottom: 0;
	}
	.careerBox .tblBase01:last-child {
		margin-bottom: 15px;
	}
}


/*-- tblTest01 --------------------*/
.tblTest01 {
	border: 2px solid #CCC;
	border-right-width: 1px;
	border-bottom-width: 1px;
	background: #ffffff;
}
.tblTest01 th,
.tblTest01 td {
	position: relative;
	padding: 15px 20px;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	height: 100%;
}
.tblTest01 thead th {
	white-space: nowrap;
	background: #E5E5E5;
}

.tblTest01 thead th:nth-child(1){ width: 20%; }
.tblTest01 thead th:nth-child(2){ width: 15%; }
.tblTest01 thead th:nth-child(3){ width: 3%; }
.tblTest01 thead th:nth-child(4){ width: 50%; }

.tblTest01 th {
	text-align: left;
	white-space: nowrap;
}
.tblTest01 th strong {
	margin-right: 10px;
	color: #2D3E9E;
	font-size: 115%;
	vertical-align: middle;
}
.tblTest01 th span {
	display: inline-block;
	vertical-align: middle;
}
.tblTest01 span.check:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-top: -17px;
	margin-left: -17px;
	vertical-align: middle;
	border: 1px solid #AAA;
	border-radius: 50%;
	background-color: #FFF;
}
.tblTest01 span.check.icon01:before {
	border: 1px solid #4389FE;
	background: #4389FE url(/img/common/ico_check01.png) no-repeat 50% 50%;
	background-size: 16px;
}
.tblTest01 span.check.icon02:before {
	border: 1px solid #ECA25C;
	background: #ECA25C url(/img/common/ico_check02.png) no-repeat 50% 50%;
	background-size: 16px;
}
.tblTest01 span.check.icon03:before {
	border: 1px solid #BE2E59;
	background: #BE2E59 url(/img/common/ico_check03.png) no-repeat 50% 50%;
	background-size: 16px;
}
.tbl_wrap_over .tblTest01 th,
.tbl_wrap_over .tblTest01 td{
	padding: 15px 15px;
}

@media screen and (max-width: 768px) {
	.tbl_wrap_over{
		overflow:auto;
	}
	.tblTest01 th,
	.tblTest01 td {
		position: relative;
		vertical-align: top;
	}
	.tblTest01 span.check:before {
		content: "";
		position: absolute;
		top: 10px;
		left: 50%;
		width: 32px;
		height: 32px;
		margin-top: 0;
		margin-left: -17px;
		vertical-align: middle;
		border: 1px solid #AAA;
		border-radius: 50%;
		background-color: #FFF;
	}

}


/*-- tblStatus01 --------------------*/
.tblStatus01 {
  width: 80%;
  margin: 0 auto;
	border: 2px solid #CCC;
	border-right-width: 1px;
	border-bottom-width: 1px;
	background: #ffffff;
}
.tblStatus01 caption {
  margin-bottom: 10px;
  font-size: 173%;
  font-weight: bold;
}
.tblStatus01 caption small {
  display: block;
  font-size: 61%;
  font-weight: normal;
}
.tblStatus01 th,
.tblStatus01 td {
	position: relative;
	padding: 10px 15px;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	height: 100%;
}
.tblStatus01 thead th {
	white-space: nowrap;
	background: #E5E5E5;
}
.tblStatus01 td {
  line-height: 1.3;
}
.tblStatus01 td.checkStatus div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 36px;
  margin: 0 auto;
	border-radius: 4px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}
.tblStatus01 td.checkStatus.ok div { background: #74bb2e; }
.tblStatus01 td.checkStatus.ng div { background: #BE2E59; }
.tblStatus01 td.checkStatus.standby div { background: #d9c835; }

.tblStatus01 thead th:nth-child(1){ width: 5%; text-align: center; }
.tblStatus01 thead th:nth-child(2){ width: 20%; }
.tblStatus01 thead th:nth-child(3){ width: 3%; text-align: center; }

.tblStatus01 th {
	text-align: left;
	white-space: nowrap;
}
.tblStatus01 th span {
	display: inline-block;
	vertical-align: middle;
}
.tblStatus01 span.check:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-top: -17px;
	margin-left: -17px;
	vertical-align: middle;
	border: 1px solid #AAA;
	border-radius: 50%;
	background-color: #FFF;
}
.tblStatus01 span.check.icon01:before {
	border: 1px solid #4389FE;
	background: #4389FE url(/img/common/ico_check01.png) no-repeat 50% 50%;
	background-size: 16px;
}
.tblStatus01 span.check.icon02:before {
	border: 1px solid #ECA25C;
	background: #ECA25C url(/img/common/ico_check02.png) no-repeat 50% 50%;
	background-size: 16px;
}
.tblStatus01 span.check.icon03:before {
	border: 1px solid #BE2E59;
	background: #BE2E59 url(/img/common/ico_check03.png) no-repeat 50% 50%;
	background-size: 16px;
}



@media screen and (max-width: 768px) {
	.tblStatus01 {
    width: 96%;
    margin: 0 auto;
    border: 2px solid #CCC;
    border-right-width: 1px;
    border-bottom-width: 1px;
    background: #ffffff;
  }
  .tblStatus01 th,
  .tblStatus01 td {
    padding: 8px 12px;
  }
  .tblStatus01 td.checkStatus div {
    display: block;
    width: 80%;
    height: inherit;
    padding: 2.5% 6% 4%;
    margin: 0 auto;
    text-align: center;
  }
}

/* tbl_privacy */
.tbl_privacy{
	width:100%;
	margin-top: 10px;
	margin-bottom:50px;
	border-collapse: collapse;
	border:1px solid #dddddd;
}
	.tbl_privacy tr th{
		padding:10px 10px;
		border:1px solid #dddddd;
		background: #eeeeee;
		font-weight: normal;
		text-align: center;
		font-size:13px;
	}
	.tbl_privacy thead tr th{
		background: #eeeeee;
		text-align: center;
		font-size:13px;
	}
	.tbl_privacy tr th:nth-of-type(1){
		width:200px;
	}
	.tbl_privacy td{
		padding:10px 10px;
		border:1px solid #dddddd;
		text-align:left;
		font-size:13px;
	}

@media screen and (max-width: 768px) {
	.tbl_privacy{
		margin-top: 7px;
		margin-bottom:30px;
	}
		.tbl_privacy tr th{
			padding:5px;
			font-size:11px;
		}
		.tbl_privacy thead tr th{
			text-align: center;
			font-size:11px;
		}
		.tbl_privacy tr th:nth-of-type(1){
			width:120px;
			white-space:nowrap;
		}
		.tbl_privacy td{
			padding:5px 5px;
			font-size:11px;
		}
}

/*-- limit --------------------------*/
.limit {
	font-size: 86%;
	font-weight: normal;
}

/*-- required -----------------------*/
.required {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -1em;
	padding: 1px 6px 0;
	color: #ED1F24;
	font-size: 93%;
	line-height: normal;
	border: 2px solid #EF3A3F;
	border-radius: 2px;
	background: #FFF;
}
@media screen and (max-width: 768px) {
	.required {
		font-size: 12px;
	}
}


/*-- tblPlanOption ----------------------*/
.tblPlanOption {
	margin-bottom: 80px;
	background: #FFF;
	border-top: 1px solid #D9DAE4;
  border-bottom: 1px solid #D9DAE4;
}

.tblPlanOption caption {
	padding: 15px 10px;
	text-align: left;
	background: #5162C4;
	color: #fff;
	font-size: 128%;
	font-weight: bold;
}
.tblPlanOption thead th,
.tblPlanOption thead td {
	padding: 15px 20px;
	text-align: left;
	border-top: 1px solid #D9DAE4;
}
.tblPlanOption tbody th,
.tblPlanOption tbody td {
	padding: 15px 20px;
	text-align: left;
	border-top: 1px solid #D9DAE4;
}
.tblPlanOption tr:first-child th,
.tblPlanOption tr:first-child td {
	border-top: none;
}
.tblPlanOption tbody:not(:first-child) tr th,
.tblPlanOption tbody:not(:first-child) tr td {
	border-top: 1px solid #D9DAE4;
}

.tblPlanOption th div {
	position: relative;
	padding-right: 60px;
}
.tblPlanOption thead th {
	background: #F1F1F1;
}
.tblPlanOption thead.bgBlue th {
  background: #5162C4;
  color: #fff;
}
.tblPlanOption tbody th {
	width: 30%;
	background: #ffffff;
}

@media screen and (max-width: 768px) {
	.tblPlanOption {
		margin-bottom: 60px;
		background: #FFF;
		border-top: 1px solid #D9DAE4;
	}
  .tblPlanOption thead th,
  .tblPlanOption thead td,
  .tblPlanOption tbody th,
  .tblPlanOption tbody td {
    padding: .5rem;
  }
	.tblPlanOption tbody th {
		width: 38%;
		background: #ffffff;
	}
}

/*-- tblThWid (with .tblBase01) -----*/
.tblThWid01 th { width: 240px; }
.tblThWid02 th { width: 270px; }
.tblThWid03 th { width: 130px; }
.tblThWid03 td p { line-height: 3 !important; }
.tblThWid03 td p.qtxt {
  line-height: 1.6 !important;
  margin-bottom: 10px;
  font-size: 113%;
  font-weight: bold;
}

.tblThWid_questionnaire th { width: 65%; }


/*======= 5: box =========================================================*/

/*-- boxTerms -----------------------*/
.boxTerms {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	height: 370px;
	margin-bottom: 30px;
	padding: 20px 20px 0;
	border: 1px solid #E2E4E4;
	background: #F9F9F9;
}
.boxTerms p {
	margin-bottom: 20px;
}
.boxTerms h4 {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 113%;
}
.boxTerms h5 {
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
	.boxTerms {
		height: 290px;
		margin-top: 10px;
		padding: 10px 10px 0;
		border-color: #E2E4E4 !important;
	}
  .boxTerms h4 {
    font-size: 13px;
  }
}


.boxTermsList01,.boxTermsList02,.boxTermsList03 {
  margin-bottom: 20px;
}
.boxTermsList01 p {
  margin-bottom: 5px;
  margin-left: 2.3em;
  text-indent: -2.3em;
}
.boxTermsList02 p {
  margin-bottom: 5px;
  margin-left: 1.9em;
  text-indent: -1.9em;
}
.boxTermsList03 p {
  margin-bottom: 5px;
  margin-left: 1em;
  text-indent: -1em;
}

/*-- sp_bg (for SP) -----------------*/

@media screen and (max-width: 768px) {
	.sp_bg01 {
		background: #FFF;
	}
	.sp_bg01 .fcW01 {
		color: #222;
	}
}

/*-- Modal -----------------*/
#move_overlay {
  z-index:1000;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color: rgba(0,0,0,0.5);
}
#modal,#modal01,#modal02 {
	display: none;
	position: fixed;
	z-index: 1100;
	padding: 30px 20px;
	width: 40%;
	text-align: center;
	background: #fff;
	border: 1px solid #ccc;
}
.modalTemp {
	display: none;
	position: fixed;
	z-index: 1100;
	padding: 0;
	width: 980px;
	background: #fff;
	border: 1px solid #ccc;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 980px) {
	#modal,#modal01,#modal02 {
		width: 80%;
	}
  #modal01,#modal02 {
    padding: 4% 3%;
  }
  .modalTemp {
    display: none;
    position: fixed;
    z-index: 1100;
    padding: 0;
    width: 90%;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-overflow-scrolling: touch;
  }
}

/* menu */
#menu_overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(80,98,196,0.95);
}
#menu_modal {
	display: none;
	position: fixed;
	z-index: 1100;
	text-align: center;
}
#menu_modal a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 22px;
	width:100%;
	display: block;
}
#menu_modal li {
	line-height: 2.5;
}
#menu_modal li.anchor {
	line-height: 2;
}
#menu_modal li.anchor a {
	font-size: 16px;
}
@media screen and (max-width: 980px) {
	#menu_modal {

	}
}

/* [interviewer]マイページ初期説明画面 */
#firsthelp {
	display: none;
	position: fixed;
	z-index: 1100;
	width: 630px;
	background: #6473CA;
	color: #fff;
	box-sizing: border-box;
}
#firsthelp .content {
	padding: 25px 50px;
	text-align: center;
}
#first_overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.50);
}
#firsthelp h1 {
	padding: 25px 10px 15px;
	text-align: center;
	background: #5162C4;
	color: #fff;
	font-size: 26px;
	box-sizing: border-box;
}
#firsthelp h3 {
	display: block;
	font-size: 24px;
}
#firsthelp h3 img {
	display: inline-block;
	padding: 0 5px;
}
#firsthelp .content p.imgBox {
	overflow: hidden;
	height: auto;
}
#firsthelp .pointBox {
	background: #FF9226;
	padding: 5px;
	color: #fff;
}
#firsthelp a.link {
	color: #fff;
	text-decoration: none;
}
#firsthelp a.link:hover {
	text-decoration: underline;
}
@media screen and (max-width: 980px) {
	#firsthelp h1 {
		font-size: 20px;
	}
	#firsthelp h3 {
		display: block;
		font-size: 24px;
	}
	#firsthelp {
		width: 90%;
	}
	#firsthelp .content {
		padding: 20px;
	}
	#firsthelp p img {
		width: 100%;
	}
	#firsthelp .btnBack01 {
		width: 60%;
		margin-top: 5px;
	}
}


/* ブラウザチェック判定用 */
.browserBox {
	width: 720px;
	margin: 0 auto 20px;
}
.browserBox h3 {
	margin-bottom: 20px;
	padding: 15px;
	text-align: center;
	border-bottom: 1px dotted #ccc;
}
.browserBox .ie {
	float: left;
	width: 350px;
	padding: 0 10px 10px;
	margin-right: 20px;
	border: 3px solid #ccc;
}
.browserBox .notIe {
	float: right;
	width: 350px;
	padding: 0 10px 10px;
	border: 3px solid #ccc;
}
@media screen and (max-width: 768px) {
	.browserBox {
		width: 100%;
		margin: 0 auto 20px;
	}
	.browserBox .ie {
		float: none;
		width: 94%;
		padding: 10px;
		margin: 0 auto 20px;
	}
	.browserBox .notIe {
		float: none;
		width: 94%;
		padding: 10px;
		margin: 0 auto 20px;
	}
}


#modal_overlay {
  z-index:1000;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color: rgba(0,0,0,0.5);
}
.browserCheck {
	display: none;
	position: fixed;
	z-index: 1100;
	width: 770px;
	background: #fff;
	box-sizing: border-box;
}
.browserCheck .browser {
	position: relative;
	padding: 50px 70px;
	width: 100%;
	box-sizing: border-box;
}
.browserCheck .sttlBlue {
	margin-bottom: 20px;
	text-align: left;
	color: #505fc7;
	font-size: 180%;
	font-weight: bold;
	letter-spacing: -.03em;
}
.browserCheck .btnClose {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
  cursor: pointer;
}
.browserCheck .btnClose span {
	position: relative;
	display: block;
	width: 70px;
	height: 70px;
	background: #4f5fc6
}
.browserCheck .btnClose span:before,.btnClose span:after{
	position: absolute;
	top: 50%;
	right: 50%;
	display: block;
	content: '';
	width: 2px;
	height: 50px;
	margin-top: -25px;
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background-color: #fff;
}
.browserCheck .btnClose span:after{
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.browserCheck input#copyurl {
	width: 473px;
	font-size: 10px;
}
.browserCheck .btn01 {
	width: 120px;
}

.btnBrowser a,
.btnBrowser button {
	position: relative;
	display: block;
	width: 300px;
	height: 100px;
	padding: 25px;
	box-sizing: border-box;
	border: 1px solid #cccccc;
	border-radius: 4px;
	background-color: #f9f9f9;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #333;
}
.btnBrowser button {
	padding: 15px;
	display: inline-block;
	box-sizing: border-box;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}
.btnBrowser a span,
.btnBrowser button span {
	display: inline-block;
	padding-left: 80px;
	font-weight: bold;
	text-align: left;
}
.btnBrowser a.chrome {
	background-image: url(/img/interviewee/icon_chrome.png);
	background-position: 20px 50%;
}
.btnBrowser a.firefox {
	background-image: url(/img/interviewee/icon_ff.png);
	background-position: 20px 50%;
}
.btnBrowser button.ie {
	background-image: url(/img/interviewee/icon_ie.png);
	background-position: 20px 50%;
}

.txtResult {
	display: none;
	border: 2px solid #EB3639;
	padding: 5px;
	margin-bottom: 10px;
}

@media screen and (max-width: 980px) {
	.browserCheck {
		width: 90%;
		overflow-y: scroll;
    transform: translateZ(0);
	}
  .browserCheck::-webkit-scrollbar{
    width: 6px;
  }
  .browserCheck::-webkit-scrollbar-thumb{
    background: #a0a0a0;
  }
  .browserCheck::-webkit-scrollbar-track{
    background:#dcdcdc;
  }
  .browserCheck::-webkit-scrollbar-track-piece{
    background: #efefef;
  }
	.browserCheck .browser {
		padding: 35px 4% 20px;
	}
 
  
	.browserCheck .sttlBlue {
		margin-bottom: 15px;
		font-size: 141%;
	}
	.browserCheck .btnClose span {
		width: 30px;
		height: 30px;
	}
	.browserCheck .btnClose span:before,.btnClose span:after{
		position: absolute;
		top: 50%;
		right: 50%;
		display: block;
		content: '';
		width: 2px;
		height: 16px;
		margin-top: -8px;
	}
	.browserCheck input#copyurl {
		width: 100%;
		box-sizing: border-box;
	}
	.browserCheck .btn01 {
		width: 100%;
		margin-top: 1%;
		box-sizing: border-box;
	}
	.browserCheck .btnBrowser a,
	.browserCheck .btnBrowser button {
		width: 100%;
		height: 60px;
		padding: 10px;
		text-align: left;
	}
	.btnBrowser a.chrome {
		background-size: 36px;
	}
	.btnBrowser a.firefox {
		background-size: 36px;
	}
	.btnBrowser button.ie {
		background-size: 36px;
	}
	.btnBrowser a span,
	.btnBrowser button span{
		padding-left: 60px;
	}
	.btnBrowser.leftBox {
		margin-bottom: 10px;
	}
	.btnBrowser.leftBox,
	.btnBrowser.rightBox {
		float: none;
	}
	.btnBrowser button.ie .sp_disNon {
		display: none;
	}
  #forwardButtonSpan .btnSend01{
    min-width: 100%;
    margin: 0;
  }
}


/* copy＆paste for modal&error */
#modal_on_overlay {
  z-index:1001;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color: rgba(0,0,0,0);
}
.browserCheck .errorCheck {
	position: relative;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.browserCheck .errorCheck .ngMsg {
	margin-bottom: 15px;
}
.copyurlMessage {
  padding: 25px 30px;
  margin-bottom: 2rem;
  background: #e3e8f7;
  border-radius: 8px;
}
.browserCheck .errorCheck .copyurlMessage,
.browserCheck .errorCheck .ngMsgBox dl{
  margin-bottom: 0;
}
.copyurlMessage .inputCopy {
  display: flex;
}
.copyurlMessage .inputCopy input {
  width: 60%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.copyurlMessage .inputCopy .btn01 {
  flex-shrink:0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  width: 120px;
  margin-top: 0;
  box-sizing: border-box;
}

.instructText {
  margin-bottom: 15px;
  font-size: 106%;
}
.browserCheck .txtResult {/*Error*/
	display: none;
	border: 2px solid #EB3639;
	padding: 5px 10px;
	margin-bottom: 10px;
  color: #EB3639;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .copyurlMessage {
    padding: .6rem;
    margin-bottom: 1rem;
    background: #e3e8f7;
    border-radius: 8px;
  }
  .copyurlMessage .inputCopy input {
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }
  .copyurlMessage .instructText {
    font-size: 14px;
  }
  .copyurlMessage .inputCopy .btn01 {
    width: inherit;
  }
}
.guideline {
  margin-bottom: 2rem;
}
.guideline p.sttlLine {
  position: relative;
  margin-bottom: 1em;
  padding-bottom: .4em;
  border-bottom: 2px solid #D9DAE4;
  color: #2D3E9E;
  font-size: 133%; /* 28px */
}
.guideline p.sttlLine::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 2px;
  background-color: #2F3E9E;
}
@media screen and (max-width: 768px) {
  .guideline img {
    width: 100%;
  }
  .guideline p.sttlLine {
    font-size: 133%; /* 20px */
    font-weight: bold;
  }                    
}
/* / */


/* INFO */
.contentInfo section {
	margin-bottom: 50px;
	padding-bottom: 50px;
    border-bottom: 1px dashed #ccc;
}
.contentInfo h2 {
	margin-bottom: 15px;
	padding-bottom:5px;
	font-size: 171%;
	line-height: 1.4;
}
.contentInfo p.data {
	margin-bottom: 5px;
}
.blank {
	display: inline-block;
	margin-top: 5px;
	padding-right: 20px;
	background: url(/img/common/external_link.png) no-repeat 100% center;
}
.blank_r::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	background: url(/img/common/external_link.png) no-repeat 100% 50%;
}
/* info icon */
span.iconMedia,
span.iconInfo,
span.iconFunction {
	width: 100px;
	display: inline-block;
	padding: 3px 4px;
	border: 1px solid #ccc;
	margin-right: 15px;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
}
span.iconMedia{  }
span.iconInfo {  }
span.iconFunction {  }
@media screen and (max-width: 768px) {
	span.iconMedia,
	span.iconInfo,
	span.iconFunction {
		width: 80px;
		margin-right: 10px;
	}
}

/*-- input[type=file] LOGO Image -----------------*/
@media screen and (max-width: 768px) {
	.logoBox .leftBox,
	.logoBox .rightBox {
		float: none;
	}
	.logoBox .leftBox {
		margin-bottom: 10px;
	}
	.logoBox .rightBox {
		padding: 10px 0;
		text-align: center;
	}
}

/* [box parts] -------------------------------------*/

/* フォーム上部のステップイメージ
--------------------------------------------- */
.stepwizard {
    display: table;
    width: 900px;
    position: relative;
	margin: 0 auto 40px;
    box-sizing: border-box;
}
.stepwizardRow {
    display: table-row;
	width: 100%;
}
.stepwizardRow:before {
    top: 25px;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #C4C9E7;
    z-index: 0;
}
.stepwizardStep p {
    margin-top: 10px;
}
.stepwizardStep {
	display: table-cell;
    text-align: center;
    position: relative;
}

/* 2steps */
.stepCount2 .stepwizardStep {
	width: 50%;
}
.stepCount2 .stepwizardRow:before {
	width: 50%;
	margin-left: 25%;
}

/* 3steps */
.stepCount3 .stepwizardStep {
	width: 33.3%;
}
.stepCount3 .stepwizardRow:before {
	width: 66.7%;
	margin-left: 16.7%;
}

/* 4steps */
.stepCount4 .stepwizardStep {
	width: 25%;
}
.stepCount4 .stepwizardRow:before {
	width: 75%;
	margin-left: 12.5%;
}


/* 5steps */
.stepCount5 .stepwizardStep {
	width: 20%;
}
.stepCount5 .stepwizardRow:before {
	width: 80%;
	margin-left: 10%;
}

/* 6steps */
.stepCount6 .stepwizardStep {
	width: 16.7%;
}
.stepCount6 .stepwizardRow:before {
	width: 83.3%;
	margin-left: 8.3%;
}

/* 7steps */
.stepCount7 .stepwizardStep {
	width: 14.3%;
}
.stepCount7 .stepwizardRow:before {
	width: 85.7%;
	margin-left: 7.1%;
}

/* 8steps */
.stepCount8 .stepwizardStep {
	width: 12.5%;
}
.stepCount8 .stepwizardRow:before {
	width: 87.5%;
	margin-left: 6.3%;
}

/* 9steps */
.stepCount9 .stepwizardStep {
	width: 11.1%;
}
.stepCount9 .stepwizardRow:before {
	width: 88.9%;
	margin-left: 5.6%;
}

/* 10steps */
.stepCount10 .stepwizardStep {
	width: 10.0%;
}
.stepCount10 .stepwizardRow:before {
	width: 90%;
	margin-left: 5.0%;
}

.stepTtl {
	display: inline-block;
	color: #fff;
}
	.stepTtl .stepNum {
		display: table-cell;
		width: 52px;
		height: 52px;
		text-align: center;
		vertical-align: middle;
		font-size: 171%;
		border-radius: 50%;
		background: #C4C9E8;
		font-family: Arial, Helvetica," sans-serif";
		font-weight: normal;
	}
	.current .stepTtl .stepNum {
		background: #506AF9;
	}

	.stepwizardStep .flowName {
		display: inline-block;
		width: 100%;
		color: #C4C9E7;
		font-size: 107%;
	}
	.stepwizardStep.current .flowName {
		color: #000000;
		font-weight: bold;
	}

@media screen and (max-width: 768px) {
	.stepwizard {
		box-sizing: border-box;
		width: 95%;
		margin: 15px auto 20px;
	}
	.stepwizardRow:before {
		top: 20px;
		height: 2px;
	}
	.stepTtl .stepNum {
		display: table-cell;
		width: 26px;
		height: 26px;
		text-align: center;
		vertical-align: middle;
		font-size: 107%;
		border-radius: 50%;
		background: #C4C9E8;
		font-family: Arial, Helvetica," sans-serif";
		font-weight: normal;
	}

	.stepTtl {
		width: 26px;
		padding: 8px 0 0;
		margin: 0 auto;
	}
	.stepwizardStep .flowName {
		display: block;
		color: #ABAEC3;
		margin-top: -5px;
		font-size:9px;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

/*-- bsBox --------------------------*/
.bsbox{
	box-sizing: border-box;
}

/*-- divideBox ----------------------*/
.break {
	overflow: hidden;
	zoom: 1;
}
/*----*/
.clear { clear: both; }
.leftBox { float:left; }
.rightBox { float:right; }
.nofloat { float:none !important; }

@media screen and (max-width: 768px) {
	.sp_nofloat { float:none; }
}

/*-- movieBox[youtube] --------------------------*/
.movieBox a.popup-iframe {
	position: relative;
	display: block;
	border: 1px solid #ccc;
	opacity: 1;
}
.movieBox a.popup-iframe span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 313px;
	height: 198px;
	background: url(/img/index/yb_btn.png) no-repeat 50% 100%;
	opacity: 1;
	transition: all 0.5s;
}
.movieBox a.popup-iframe:hover span {
	background: #fff url(/img/index/yb_btn.png) no-repeat 50% 100%;
	opacity: 0.5;
	transition: all 0.5s;
}
.movieBox span {
	display: inline-block;
	margin-right: 5px;
	padding: 1px 5px;
	color: #fff;
	font-size: 93%;
	font-weight: bold;
}
.movieBox span.iconType01 { background: #1F82E3; }
.movieBox span.iconType02 { background: #E56161; }

@media screen and (max-width: 768px) {
	.movieBox.mh15 {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/*======= 6: form ========================================================*/
input,
label,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	vertical-align: middle;
}
/*----*/
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
textarea {
	padding: 10px 15px;
	border: 1px solid #BBB;
	border-radius: 2px;
	background: #F9F9F9;
}
input[type=text],
input[type=tel],
input[type=email],
input[type=password] {
	width: 260px;
}
	input[type=text].inputTxtS { width: 15%; }
	input[type=text].inputTxtL { width: 95%; }

textarea {
	overflow: auto;
	resize: vertical;
	width: 93%;
	min-height: 130px;
	padding: 10px 15px;
	font-size: 100%;
	/*color: #999;*/
}

/*----*/
input[type=checkbox],
input[type=radio] {
	margin-right: 10px;
	margin-bottom: 3px
}

/* CheckBox */
label.checkbox_text,
span.checkbox_text {
	cursor: pointer;
	position: relative;
	height: 25px;
	vertical-align: middle;
	padding-left: 30px;
	margin-right: 20px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
}
label.checkbox_text.h-auto{
    height: auto;
    overflow:inherit;
}
label.checkbox_text:before,
span.checkbox_text:before {
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	left: 0px;
	top: 0;
	border: 2px solid #D9DAE4;
	z-index: 3;
	border-radius: 4px;
	box-sizing: border-box;
}
label.checkbox_text:after,
span.checkbox_text:after {
	content: '';
	position: absolute;
	top: 0.5em;
	left: 7px;
	display: block;
	margin-top: -6px;
	width: 6px;
	height: 12px;
	border-right: 3px solid #5162C4;
	border-bottom: 3px solid #5162C4;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index: 1;
}
label.checkbox_text.bgBlue:after,span.checkbox_text.bgBlue:after {
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
}
label.checkbox_text input[type="checkbox"],span.checkbox_text input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position: absolute;
	left: -40px;
	width: 24px;
	height: 24px;
	display: block;
	box-shadow: 40px 0px #fff;
	z-index: 2;
	margin: 0px;
	padding: 0px;
	border-radius: 4px;
}
label.checkbox_text input[type="checkbox"]:checked,span.checkbox_text input[type="checkbox"]:checked {
	box-shadow: none;
}
label.checkbox_text input[type="checkbox"]:checked:focus,span.checkbox_text input[type="checkbox"]:checked:focus {
	box-shadow: 40px 0px #F1F1F1;
	opacity: 0.1;
}
label.checkbox_text input[type="checkbox"]:focus,span.checkbox_text input[type="checkbox"]:focus {
	box-shadow: 40px 0px #fff;
}

/* チェックボックスに複数行のテキストが入る場合 */
.multiple_lines{
	display: flex;
	justify-content: center;
}
.multiple_lines p{
	text-align: left;
}
.multiple_lines span.checkbox_text{
	margin-right: 5px;
}

/*----*/
select {
	height: 40px;
	padding: 0 5px;
	border: 1px solid #BBB;
	border-radius: 2px;
	background: #F9F9F9;
}
select.ui-datepicker-year,
select.ui-datepicker-month {
	height: 30px;
	color: #333;
}
select.selectS {
	height: 30px;
}
/*----*/
label img {
	vertical-align: middle;
}

input[type=text].disabled,
input[type=email].disabled,
input[type=tel].disabled{
	color: #6F6F6F;
	background: #dddddd;
	cursor: no-drop;
}

@media screen and (max-width: 768px) {
  label.checkbox_text.longtxt,span.checkbox_text.longtxt {
    height: 38px;
    text-align: left;
    letter-spacing: -.04em;
  }
  label.checkbox_text.longtxt:after,span.checkbox_text.longtxt:after {
    top: 20%;
  }

	label.selectGroup {
		position: relative;
		display: inline-block;
		width: 100%;
		border: 1px solid #bbb;
		border-radius: 2px;
		background: #fff;
	}
		label.selectGroup.min2 {
			width: 45%;
		}
		label.selectGroup.min3 {
			width: 28%;
		}

	label.selectGroup:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		display: block;
		width: 0;
		height: 0;
		margin: -2px 0 0 0;
		border: 3px solid #fff;
		border-top: 7px solid #000;
	}
	label.selectGroup select {
		cursor: pointer;
		position: relative;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		appearance: none;
		display: block;
		width: 100%;
		height: 30px;
		color: #000;
		border: none;
		border-radius: 2px;
		background: transparent;
	}
	::-ms-expand {
		display: none;
	}

	input[type=text],
	input[type=tel],
	input[type=email],
	input[type=password],
	textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 100%;
		padding: 10px;
		border: 1px solid #bbb;
		border-radius: 2px;
		box-sizing: border-box;
	}
	input::-webkit-input-placeholder{
		padding-top: 3px;
		font-size: 12px;
	}
	input:-moz-placeholder{
		padding-top: 3px;
		font-size: 12px;
	}
	input::-moz-placeholder{
		padding-top: 3px;
		font-size: 12px;
	}
	input:placeholder-shown {
    	padding-top: 3px;
		font-size: 12px;
	}
	input:-ms-input-placeholder {
		padding-top: 3px;
		font-size: 12px;
	}
	input[type=date] {
		height: 40px;
		vertical-align: middle;
		padding: 5px;
		border: 1px solid #BBB;
		border-radius: 2px;
		background: #F9F9F9;
	}

	label.checkbox_text,span.checkbox_text {
		font-size: 116%;
	}
	.multiple_lines p{
		font-size: 116%;
	}

	input[type=text].zip {
		width: 50%;
	}
	input[type=text].inputTxtS { width: 30%; }
	input[type=text].inputTxtL { width: 100%; }
	input[type=text].sp_wid_name {
		width: 90%;
	}
	label.checkbox_text.bgBlue:after,span.checkbox_text.bgBlue:after {
		border-right: 3px solid #5162C4;
		border-bottom: 3px solid #5162C4;
	}
	input[type=text].sp_wid_half,
	input[type=tel].sp_wid_half{
		width: 50%;
	}
	input[type=text].sp_wid_s,
	input[type=tel].sp_wid_s{
		width: 30%;
	}
	input[type=text].sp_wid_l01,
	input[type=tel].sp_wid_l01{
		width: 70%;
	}
	input[type=text].sp_wid_period,
	input[type=tel].sp_wid_period{
		width: 45%;
	}
}
input[type=file] {
	display: none;
}

/* [radio] -----------------------------------------*/

/*-- radio01 ------------------------*/
label.radio01,label.radio02 {
	position: relative;
}
label.radio01 > span,
label.radio02 > span{
	display: inline-block;
	padding-left: 45px;
	font-size: 129%;
	font-weight: bold;
	text-align: left;
	line-height: 1.2;
	vertical-align: middle;
}
label.radio01 > span {
	padding-left: 30px;
	font-size: 100%;
	font-weight: normal;
}
/* note */
label.radio01 > span .note01,
label.radio02 > span .note01{
	font-size: 78%;
}
/* radio button custom */
label.radio01 input[type="radio"],
label.radio02 input[type="radio"]{
	display: none;
}
label.radio01 > span:before,
label.radio02 > span:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 32px;
	height: 32px;
	margin-top: -17px;
	vertical-align: middle;
	border: 1px solid #bbb;
	border-radius: 50%;
	background-color: #FFF;
	background: #fcfcfc;
}
label.radio01 > span:before {
	width: 20px;
	height: 20px;
	margin-top: -10px;
	box-shadow:0px 0px 1px 1px #F1F1F1;
	-moz-box-shadow:0px 0px 1px 1px #F1F1F1;
	-webkit-box-shadow:0px 0px 1px 1px #F1F1F1;
}
label.radio01 input[type="radio"]:checked + span:before,
label.radio02 input[type="radio"]:checked + span:before{
	border: 1px solid #4389FE;
	background: #4389FE url(/img/common/ico_check01.png) no-repeat 50% 50%;
	background-size: 16px;
}
label.radio01 input[type="radio"]:checked + span:before {
	background-size: 14px;
}

@media screen and (max-width: 768px) {
	label.radio01 > span,
	label.radio02 > span{
		padding-left: 33px;
		font-size: 16px;
	}
	label.radio01 > span {
		padding-left: 28px;
		font-size: 116%;
	}
	label.radio01 > span:before,
	label.radio02 > span:before{
		width: 26px;
		height: 26px;
		margin-top: -13px;
	}
	label.radio01 > span:before {
		width: 20px;
		height: 20px;
		margin-top: -10px;
	}
	label.radio01 input[type="radio"]:checked + span:before,
	label.radio02 input[type="radio"]:checked + span:before{
		background-size: 11px;
	}
}


/* [error] -----------------------------------------*/
input[type=text].error,
input[type=password].error,
input[type=email].error,
input[type=tel].error,
input[type=date].error,
textarea.error,
select.error {
	border-color: #BE2E59;
	background: #ffdddd;
}

/* [errorMessage] ----------------------------------*/
/* errorMsgBar */
.errorMsgBar {
	margin-bottom: 20px;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	background: #BE2E59;
}
.errorMsgBar span {
	display: inline-block;
	padding: 5px 0 5px 30px;
	background: url(/img/common/ico_atten01_pc.png) no-repeat 0 50%;
}

/* errorMsg */
.errorMsg {
	margin-bottom: 5px;
	padding-left: 20px;
	color: #BE2E59;
	font-weight: bold;
	text-align: left;
	background: url(/img/common/ico_atten02_pc.png) no-repeat 0 0.15em;
}
.tblThWid03 td p.errorMsg {
  line-height: 1.6 !important;
}
@media screen and (max-width: 768px) {
	.errorMsgBar span {
		background: url(/img/common/ico_atten01_sp.png) no-repeat 0 50%;
		background-size: 20px;
	}
	/*----*/
	.errorMsg {
		padding-left: 15px;
		background: url(/img/common/ico_atten02_sp.png) no-repeat 0 0.3em;
		background-size: 12px;
	}
}

.errorBg {
	background: #F8DEE6;
}

/* [infoMessage] ----------------------------------*/

/* infoMsgBar */
.infoMsgBar {
	margin-bottom: 20px;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	background: #5162C4;
}

.infoMsgBar span {
	display: inline-block;
	padding: 5px 0 5px 30px;
}

/* infoMsg */
.infoMsg {
	margin-bottom: 5px;
	padding-left: 20px;
	color: #BE2E59;
	font-weight: bold;
	text-align: left;
}

@media screen and (max-width: 768px) {
	.infoMsgBar span {
		background-size: 20px;
	}
	/*----*/
	.infoMsg {
		padding-left: 15px;
		background-size: 12px;
	}
}

/* [Testing stream capabilities] ----------------------------------*/

.prettyBox h2 {
	font-size: 18px;
	margin-bottom: 10px;
}

h3.ngTargetName {
	padding: 10px;
	text-align: center;
	background: #e61958;
	color: #ffffff;
	font-size: 164%;
	font-weight: bold;
}

/* ngMsgBox */
.ngMsgBox {
	padding: 30px 35px;
	border: 2px solid #e61958;
	box-sizing: border-box;
}
.ngMsgBox dl {
	margin-bottom: 2.5em;
}
.ngMsgBox dt {
	margin-bottom: .5em;
	font-size: 133%;
	font-weight: bold;
  color: #e61958;
}
.ngMsgBox dd {
	margin-bottom: 2.5em;
	line-height: 1.8;
}
.ngMsgBox dd:last-child {
	margin-bottom: 0;
}
.ngMsgBox .sttlBlue {
	margin-bottom: .5rem;
	font-size: 142%; /* 20px */
	font-weight: bold;
  color: #000;
}

/*  */
.ngMsg {
	margin-bottom: 35px;
	text-align: center;
	font-size: 160%;
	font-weight: bold;
	color: #e61958;
}
.ngMsg span {
	display: inline-block;
	padding-left: 46px;
	background-image: url(/img/interviewee/test/icon_alert.svg);
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 39px auto;
}
.okMsg p {
	position: relative;
	display: inline-block;
	padding-left: 40px;
	margin-bottom: 15px;
	font-size: 160%;
	font-weight: bold;
	color: #74bb2e;
}
.okMsg p::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 11px;
	z-index: 2;
	display: block;
	width: 6px;
	height: 12px;
	margin-top: -11px;
	border-right: 4px solid #fff;
	border-bottom: 4px solid #fff;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.okMsg p span::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -32px;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: inline-block;
	border-radius: 50%;
	box-shadow: 32px 0px #74bb2e;
	margin-top: -17px;
}
.checkMsg {
	margin-bottom: 15px;
	text-align: center;
	font-size: 160%;
	font-weight: bold;
	color: #5162C4;
}

/* ErrorCode */
dl.errorCode dt {
  color: #5162C4;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}
dl.errorCode dd {
  text-align: left;
  font-size: 13px;
}
dl.errorCode dd.error {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 auto 5px;
  padding: 14px 15px 10px;
  border: 2px solid #9D264A;
  position: relative;
}
dl.errorCode dd strong {
  display: inline-block;
  padding: 3px 6px;
  position: absolute;
  top: -15px;
  background: #fff;
  font-size: 15px;
  color: #9D264A;
}
@media screen and (max-width: 768px) {
	h3.ngTargetName {
		padding: 5px;
		font-size: 108%;
	}

	/* ngMsgBox */
	.ngMsgBox {
		padding: 3% 4%;
	}
	.ngMsgBox dl {
		font-weight: normal;
	}
	.ngMsgBox dt {
		font-size: 108%;
		font-weight: bold;
	}
  .ngMsgBox .sttlBlue {
    font-size: 118%;
  }

	.checkMsg,.okMsg p,.ngMsg {
		font-size: 133%;
		margin-bottom: 1em;
	}
	.okMsg p {
		padding-left: 0;
		padding-top: 40px;
	}
	.okMsg p::before {
		top: 0;
		left: 50%;
		margin-top: 6px;
		margin-left: -4px;
	}
	.okMsg p span::before {
		top: 0;
		left: 50%;
		margin-top: 0;
		margin-left: -47px;
	}
	.ngMsg span {
		padding-left: 0;
		padding-top: 46px;
		background-position: 50% 0;
		background-size: 39px auto;
	}
  
  /* ErrorCode */
  dl.errorCode dt {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: left;
  }
  dl.errorCode dd {
    font-size: 11px;
  }
  dl.errorCode dd.error {
    font-size: 13px;
    padding: 14px 10px 10px;
  }
}

/* RESULT ICON CHECK LIST */
.checkResult {
	width: 880px;
	margin: 60px auto;
}
.checkResult li {
	position: relative;
	float: left;
	width: 220px;
	text-align: center;
}
.checkResult li div {
	position: relative;
	padding-top: 60px;
	color: #e2e4e4;
	font-weight: bold;
}
.checkResult li span.iconImg {
	display: inline-block;
	margin-bottom: 10px;
}
.checkResult li.checkOK div {
	color: #74bb2e;
}
.checkResult li.checkNG div {
	color: #e61958;
}
/* 矢印 */
.checkResult li::after {
	content: "";
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	padding-left: 20px;
	border: 8px solid transparent;
	border-left: 12px solid #e2e4e4;
}
.checkResult li:first-child::after {
	content: none;
}
/* OKアイコン */
.checkResult li.checkOK div::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	display: block;
	width: 8px;
	height: 14px;
	margin-top: 0;
	margin-left: -6px;
	border-right: 5px solid #fff;
	border-bottom: 5px solid #fff;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.checkResult li.checkOK div span.iconImg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 40px;
	height: 40px;
	display: inline-block;
	border-radius: 50%;
	box-shadow: -40px 0px #74bb2e;
	margin-top: -7px;
	margin-left: 20px;
}
/* NGアイコン */
.checkResult li.checkNG {
	background-image: url(/img/interviewee/test/icon_alert.svg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 39px auto;
}

/* SVG */
.checkResult li svg.os,
.checkResult li svg.browser,
.checkResult li svg.camera,
.checkResult li svg.com {
	width: 220px;
	height: 100px;
	box-sizing: border-box;
}
.check_os-1,.check_browser-1 { fill:none; }
.check_os-2,.check_browser-2,.check_camera-1,.check_com-1 { fill:#e2e4e4; }
.check_os-3 { fill:#fff; }

.svgNone {
	display: none;
}


@media screen and (max-width: 768px) {
	.checkResult {
		width: 90%;
		margin: 3em auto;
	}
	.checkResult li {
		position: relative;
		float: none;
		width: 100%;
		text-align: left;
	}
	.checkResult li div {
		padding-top: 0;
		padding-bottom: 30px;
	}
	.checkResult li span.iconImg {
		margin-bottom: 0;
	}
	.checkResult li span.iconTxt {
		position: absolute;
		left: 50px;
		font-size: 133%;
	}
	.checkResult li:nth-child(1) span.iconTxt {
		top: 4px;
	}
	/* 矢印 */
	.checkResult li::after {
		top: -22px;
		left: 12px;
		padding-left: 0;
		border: 8px solid transparent;
		border-top: 12px solid #e2e4e4;
	}
	/* OKアイコン */
	.checkResult li.checkOK div::before {
		top: 5px;
		left: inherit;
		right: 8px;
		width: 6px;
		height: 10px;
		border-right: 4px solid #fff;
		border-bottom: 4px solid #fff;
	}
	.checkResult li.checkOK div span.iconImg::before {
		top: 8px;
		left: inherit;
		right: 26px;
		width: 26px;
		height: 26px;
		box-shadow: 26px 0px #74bb2e;
		margin-top: -7px;
		margin-left: 0;
	}

	/* NGアイコン */
	.checkResult li.checkNG {
		background-position: 100% 0;
		background-size: 30px auto;
	}

	/* SVG */
	.checkResult li svg.os,
	.checkResult li svg.browser,
	.checkResult li svg.camera,
	.checkResult li svg.com {
		display: inline-block;
		width: 44px;
		height: 30px;
	}
}
/* [button] ----------------------------------------*/

.btnPlugin {

}

/*-- common -------------------------*/
.btnSend01,
.btnBack01,
.btnRed01,
.btn01,
.btn02,
.btn03,
.btnAudioTest01,
.btnGray01,
.btnAcnt01,
.btnCSV01,
.btnPrint,
.btnPlugin,
.btnCheck01,
.btnMid,.btnMid_light,.btnMid_red {
	display: inline-block;
	box-sizing: border-box;
	color: #FFF;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: none;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-radius: 2px;
}

.btnSend01,
.btnBack01,
.btnGray01,
.btnRed01,
.btnAudioTest01 {
	min-width: 180px;
	margin: 0 10px;
	padding: 15px 15px 12px;
	font-size: 129%;
}
.btn01,
.btn02 {
	padding: 8px 15px 5px;
	font-size: 86%;
}
.btn03 {
	padding: 8px 15px 5px;
	font-size: 100%;
}

.btnAcnt01 {
	width: 400px;
	margin: 0;
	padding: 15px 15px 12px;
	font-size: 157%;
}
.btnAcnt01 span {
	padding: 15px 15px 15px 110px;
	background: url(/img/index/icon_free.png) no-repeat 0 center;
}
.btnCSV01,
.btnPrint,
.btnMid,.btnMid_light,.btnMid_red {
	min-width: 180px;
	margin: 0;
	padding: 10px 15px 8px;
	font-size: 100%;
}
.btnPlugin {
	padding: 8px 15px 5px 35px;
}

.btnEdit {
	position: absolute;
	top: 0;
	right: 0;
}
.btnEdit .btn01 {
	font-size: 13px;
	font-weight: normal;
}
h3.ttlType02 .btnEdit .btn01 span::after {
	content: "";
}

/* option */
.btnWid01 { min-width: 240px; }
.btnWid02 { min-width: 360px; }
.btnWid03 { min-width: 330px; }

@media screen and (max-width: 768px) {
	/* common */
	.btnSend01,
	.btnBack01,
	.btnRed01,
	.btnAudioTest01,
	.btnCSV01,
	.btnPrint {
		min-width: 130px;
		margin: 0 5px;
		font-size: 15px;
	}
  .btnMid,.btnMid_light,.btnMid_red{
		min-width: 130px;
		font-size: 13px;
	}
	.btn01,.btn02,.btn03{
		font-size: 12px;
	}
	.btnAcnt01 {
		width: 100%;
		font-size: 16px;
		text-align: center;
	}
	.btnAcnt01 span {
		padding: 8px 10px 10px 65px;
		background: url(/img/index/icon_free_sp.png) no-repeat 0 center;
		background-size: 55px;
	}
	.btnEntry {
		position: absolute;
		bottom: 10%;
		left: 0;
		padding: 0 4%;
		width: 92%;
	}
	.btnEntry02 {
		padding: 0 4%;
		width: 92%;
	}
	.btnEdit {
		top: -5px;
	}
	.btnEdit .btn01 {
		font-size: 11px;
	}
	.btnEdit .btn01 span {
		display: none;
	}
	/* option */
	.btnWid01 { min-width: 180px; }
	.btnWid02 { min-width: 280px; }
	.btnWid03 { min-width: 90%; }
}

/*-- respective setting -------------*/

/* btnSend, btn01 */
.btnSend01,
.btn01,
.btn03,
.btnMid {
	border-color: #4553AA;
	background: #5162C4;
}
.btnMid_light {
  color: #2D3AA4;
	border-color: #A2A9D3;
	background: #C4C8E8;
}
/* btnBack */
.btnBack01 {
	border-color: #989FD6;
	background: #AAB1DD;
}

/* btnRed01*/
.btnMid_red,
.btnRed01 {
	border-color: #9D264A;
	background: #BE2E59;
}

/* btnGray01*/
.btnGray01 {
	border-color: #bbb;
	background: #ccc;
}

/* btn02 */
.btn02 {
	color: #5162C4;
	border-color: #A2A9D4;
	background: #C4C9E8;
}

/* btnAcnt01 */
.btnAcnt01 {
	border-color: #4553AA;
	background: #5162C4;
}

.btnCSV01 {
	border-color: #185433;
	background: #217346;
}
.btnPrint {
	border-color: #4553AA;
	background: #5162C4;
}
.btnPrint span {
	display: inline-block;
	padding-left: 30px;
	background: url(/img/interview/icon_print.png) no-repeat 0 50%;
}

.btnPlugin {
	border-color: #00b6ea;
	background: #00bbf1 url(/img/help/icon_ie.svg) no-repeat 10px 55%;
	background-size: 18px;
}

/* 動作検証：検証用 */
.btnCheck01 {
	min-width: 330px;
	margin: 0 auto;
	padding: 15px 15px 12px;
	font-size: 171%;
	box-sizing: border-box;
	border-color: #4553AA;
	background: #5162C4 url(/img/interviewee/test/btn_check.svg) no-repeat 40px 50%;
	background-size: 22px 30px;
}

/* 動作検証：面接ができない方 */
.btnCheckFailed {
	display: inline-block;
	min-width: 330px;
	padding: 18px 12px;
	border-radius: 4px;
	box-sizing: border-box;
	background: #eeeeee;
	text-decoration: none;
	color: #000000;
}
.btnCheckFailed strong:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	padding-left: 6px;
	border: 4px solid transparent;
	border-left: 8px solid #5162c4;
}
.btnCheckFailed span {
	color: #5160C4;
	text-decoration: underline;
}
@media screen and (max-width: 768px) {
	/* 動作検証：検証用 */
	.btnCheck01 {
		min-width: 90%;
		padding: 14px 15px 13px;
		font-size: 125%;
		background-position: 24% 50%;
		background-size: 17px 20px;
	}
	.ngMsgBox .btnCheck01 {
		min-width: 100%;
	}
	/* 動作検証：面接ができない方 */
	.btnCheckFailed {
		min-width: 100%;
		padding: 18px 12px;
	}
}

/* btnAudioTest01 */
.btnAudioTest01 {
	margin: 0;
	padding-left: 50px;
	border-color: #4553AA;
	background-color: #5162C4;
	background-repeat: no-repeat;
	background-position: 20px 50%;
	background-image:  url(/img/verification/ico_mic_pc.png);
}
.btnAudioTest01.rec {
	border-color: #9D264A;
	background-color: #BE2E59;
	background-repeat: no-repeat;
	background-position: 20px 50%;
	background-image:  url(/img/verification/ico_mic_pc.png);
}
/* クリック不可の状態（色変更） */
.disabled button, .disabled a {
	border-color: #ccc;
	background: #ddd;
	cursor: not-allowed;
	pointer-events: auto !important;
}
.disabled input.btnSend01 {
	border-color: #ccc;
	background: #ddd;
	cursor: not-allowed;
	pointer-events: auto !important;
}
@media screen and (max-width: 768px) {
	/* btnAudioTest01 */
	.btnAudioTest01 {
		background-image:  url(/img/verification/ico_mic_sp.png);
		background-size: 22px 30px;
	}
}


/*======= 7: link ========================================================*/
a {
	color: #5160C4;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

a.popup {
	text-decoration: none;
}

/* for triangle icon */
a.singleArw {
	text-decoration: none;
	outline: none;
}
a.singleArw:hover {
	text-decoration: underline;
}
a.singleArw:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	padding-left: 6px;
	border: 4px solid transparent;
	border-left: 8px solid #5160C4;
}

/* for pupup icon */
a.iconPopup {
	font-size: 100%;
	color: #2D3E9E;
	outline: none;
}
a.iconPopup span {
	display: inline-block;
	padding-left: 22px;
	background: url(/img/common/icon_popup.svg) no-repeat 0 3px;
	background-size: 16px 16px;
}
a.iconPopup.white span {
	background: url(/img/common/icon_popup_w.svg) no-repeat 0 50%;
	background-size: 14px 14px;
}
a.iconPopup span:hover {
	text-decoration: underline;
}

/* for pupup icon */
a.iconMove {
	font-size: 100%;
	color: #2D3E9E;
	outline: none;
}
a.iconMove span {
	display: inline-block;
	padding-left: 24px;
	background: url(/img/common/icon_youtube.svg) no-repeat 0 2px;
	background-size: 18px 18px;
}
a.iconMove span:hover {
	text-decoration: underline;
}

/*======= 8: other =======================================================*/
/*-- Lazy Load --*/
.afbox {
    opacity: 0;
    zoom: 1;
}

/* [icon] -------------------- */

/* email */
.email {
	display: inline-block;
	position: relative;
	top: 2px;
	width: 18px;
	height: 14px;
	margin: 0 8px 0 0;
	padding: 0;
	background: #5162C4;
}
.email:before, .email:after{
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}
.email:before{
	border: 9px solid transparent;
	border-top-color: #fff;
}
.email:after{
	left: 2px;
	border: 7px solid transparent;
	border-top-color: #5162C4;
}

.btnArw a {
	position: relative;
	display: inline-block;
	padding-left: 1em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}
.btnArw a::after {
	position: absolute;
	top: 50%;
	left: .2em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
	transition: all .3s;
}
.btnArw a:hover {
	color: #fff;
}


/* [img] -------------------- */


/* [hr] --------------------- */
hr.dotLine {
	border: 0;
    height: 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.3);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
hr.solidLine {
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.btn2Column{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 768px) {
  .btn2Column .btnSend01,
  .btn2Column .btnRed01,
	.btn2Column .btnBack01 {
		min-width: 80px;
		margin: 0 5px;
		font-size: 13px;
	}
}
@media screen and (max-width: 320px) {
  .btn2Column .btnSend01,
  .btn2Column .btnRed01,
	.btn2Column .btnBack01 {
		font-size: 12px;
	}
}
/* [display] ---------------- */
.disNon	{ display: none; }
.disB	{ display: block; }
.disI	{ display: inline; }
.disIb	{ display: inline-block; }

@media screen and (min-width: 769px) { /* for PC */
	.pc_disNon	{ display: none !important; }
	.pc_disB	{ display: block !important; }
}
@media screen and (max-width: 768px) {
	.sp_disNon	{ display: none !important; }
	.sp_disB	{ display: block !important; }
}

/* [width] ------------------ */
.wid01 { width: 0px; }

@media screen and (min-width: 769px) {/* for PC */
	/* width-size px */
    .w50{ width: 50px !important; max-width:50px !important;}
    .w100{ width: 100px !important; max-width:100px !important;}
    .w150{ width: 150px !important; max-width:150px !important;}
	.w200{ width: 200px !important; max-width:200px !important;}
    .w250{ width: 250px !important; max-width:250px !important;}
	.w300{ width: 300px !important; max-width:300px !important;}
	.w350{ width: 350px !important; max-width:350px !important;}
    .w400{ width: 400px !important; max-width:400px !important;}
    .w450{ width: 450px !important; max-width:450px !important;}
    .w500{ width: 500px !important; max-width:500px !important;}
    
    /* width-size % */
    .w100p{width: 100% !important; max-width:100% !important;}
    .w75p{width: 75% !important;}
    .w50p{width: 50% !important;}
    .w40p{width: 40% !important;}
    .w33p{width: 33.33% !important;}
    .w25p{width: 25% !important;}
    .w20p{width: 20% !important;}
}
@media screen and (max-width: 768px) {/* for SP */
	/* width-size px */
    .w50_sp{ width: 50px !important; max-width:50px !important;}
    .w100_sp{ width: 100px !important; max-width:100px !important;}
    .w150_sp{ width: 150px !important; max-width:150px !important;}
	.w200_sp{ width: 200px !important; max-width:200px !important;}
    .w250_sp{ width: 250px !important; max-width:250px !important;}
	.w300_sp{ width: 300px !important; max-width:300px !important;}
	.w350_sp{ width: 350px !important; max-width:350px !important;}
    .w400_sp{ width: 400px !important; max-width:400px !important;}
    .w450_sp{ width: 450px !important; max-width:450px !important;}
    .w500_sp{ width: 500px !important; max-width:500px !important;}
    
    /* width-size % */
    .w100p_sp{width: 100% !important; max-width:100% !important;}
    .w75p_sp{width: 75% !important;}
    .w50p_sp{width: 50% !important;}
    .w40p_sp{width: 40% !important;}
    .w33p_sp{width: 33.33% !important;}
    .w25p_sp{width: 25% !important;}
    .w20p_sp{width: 20% !important;}
    
    /* min-width-size px */
    .w100min_sp{ min-width: 100px !important;}
}




/* [word-break] ------------------ */
.wb_all { word-break: break-all; }

/* [font-size] -------------- */

/* default:15px */
.f10 { font-size: 66%; }
.f11 { font-size: 73%; }
.f12 { font-size: 80%; }
.f13 { font-size: 86%; }
.f14 { font-size: 93%; }
.f15 { font-size: 100%; }
.f16 { font-size: 106%; }
.f17 { font-size: 113%; }
.f18 { font-size: 120%; }
.f19 { font-size: 126%; }
.f20 { font-size: 133%; }
.f22 { font-size: 146%; }
.f24 { font-size: 160%; }
.f26 { font-size: 173%; }
.f28 { font-size: 186%; }
.f30 { font-size: 200%; }

@media screen and (max-width: 768px) {
	.f10 { font-size: 10px; }
	.f11 { font-size: 11px; }
	.f12 { font-size: 12px; }
	.f13 { font-size: 13px; }
	.f14 { font-size: 14px; }
	.f15 { font-size: 15px; }
	.f16 { font-size: 16px; }
	.f17 { font-size: 17px; }
	.f18 { font-size: 18px; }
	.f19 { font-size: 19px; }
	.f20 { font-size: 20px; }
	.f22 { font-size: 22px; }
	.f24 { font-size: 24px; }
	.f26 { font-size: 26px; }
	.f28 { font-size: 28px; }
	.f30 { font-size: 30px; }

	.sp_f12 { font-size: 12px; line-height: inherit; }
	.sp_f13 { font-size: 13px; line-height: inherit; }
	.sp_f14 { font-size: 14px; line-height: inherit; }
	.sp_f16 { font-size: 16px; }
  .sp_f18 { font-size: 18px; }
}

/* [font-weight] ------------ */
.fw_n { font-weight: normal !important; }
.fw_b { font-weight: bold !important; }

/* [font-color] ------------- */
.fcW01 { color: #FFF; } /* white */
.fcGr01 { color: #999; } /* gray */
.fcBl01 { color: #2D3E9E; } /* blue */
.fcBl02 { color: #515FC4; } /* blue */
.fcR01 { color: #BE2E59; } /* red */
.fcR02 { color: #D90010; } /* red */
.fcOr01 { color: #ECA25C; } /* orange */
.fcOr02 { color: #FFA31D; } /* orange */

/* [line-height] ------------ */
.lh12 { line-height: 1.2; }
.lh15 { line-height: 1.5; }
.lh18 { line-height: 1.8; }

/* [align] ------------------ */
.al_l { text-align: left !important; }
.al_r { text-align: right !important; }
.al_c { text-align: center !important; }
.vl_t { vertical-align: top !important; }
.vl_m { vertical-align: middle !important; }
.vl_b { vertical-align: bottom !important; }

@media screen and (max-width: 768px) {
	.sp_al_l { text-align: left !important; }
	.sp_al_c { text-align: center !important; }
}

/* [margin,padding] --------- */
.ma0a { margin: 0 auto; }
.mt0, .mv0, .ma0 { margin-top:    0 !important; }
.mr0, .mh0, .ma0 { margin-right:  0 !important; }
.mb0, .mv0, .ma0 { margin-bottom: 0 !important; }
.ml0, .mh0, .ma0 { margin-left:   0 !important; }
.pt0, .pv0, .pa0 { padding-top:   0 !important; }
.pr0, .ph0, .pa0 { padding-right: 0 !important; }
.pb0, .pv0, .pa0 { padding-bottom:0 !important; }
.pl0, .ph0, .pa0 { padding-left:  0 !important; }
.mt5, .mv5, .ma5 { margin-top:    5px !important; }
.mr5, .mh5, .ma5 { margin-right:  5px !important; }
.mb5, .mv5, .ma5 { margin-bottom: 5px !important; }
.ml5, .mh5, .ma5 { margin-left:   5px !important; }
.pt5, .pv5, .pa5 { padding-top:   5px !important; }
.pr5, .ph5, .pa5 { padding-right: 5px !important; }
.pb5, .pv5, .pa5 { padding-bottom:5px !important; }
.pl5, .ph5, .pa5 { padding-left:  5px !important; }
.mt10, .mv10, .ma10 { margin-top:    10px !important; }
.mr10, .mh10, .ma10 { margin-right:  10px !important; }
.mb10, .mv10, .ma10 { margin-bottom: 10px !important; }
.ml10, .mh10, .ma10 { margin-left:   10px !important; }
.pt10, .pv10, .pa10 { padding-top:   10px !important; }
.pr10, .ph10, .pa10 { padding-right: 10px !important; }
.pb10, .pv10, .pa10 { padding-bottom:10px !important; }
.pl10, .ph10, .pa10 { padding-left:  10px !important; }
.mt15, .mv15, .ma15 { margin-top:    15px !important; }
.mr15, .mh15, .ma15 { margin-right:  15px !important; }
.mb15, .mv15, .ma15 { margin-bottom: 15px !important; }
.ml15, .mh15, .ma15 { margin-left:   15px !important; }
.pt15, .pv15, .pa15 { padding-top:   15px !important; }
.pr15, .ph15, .pa15 { padding-right: 15px !important; }
.pb15, .pv15, .pa15 { padding-bottom:15px !important; }
.pl15, .ph15, .pa15 { padding-left:  15px !important; }
.mt20, .mv20, .ma20 { margin-top:    20px !important; }
.mr20, .mh20, .ma20 { margin-right:  20px !important; }
.mb20, .mv20, .ma20 { margin-bottom: 20px !important; }
.ml20, .mh20, .ma20 { margin-left:   20px !important; }
.pt20, .pv20, .pa20 { padding-top:   20px !important; }
.pr20, .ph20, .pa20 { padding-right: 20px !important; }
.pb20, .pv20, .pa20 { padding-bottom:20px !important; }
.pl20, .ph20, .pa20 { padding-left:  20px !important; }
.mt30, .mv30, .ma30 { margin-top:    30px !important; }
.mr30, .mh30, .ma30 { margin-right:  30px !important; }
.mb30, .mv30, .ma30 { margin-bottom: 30px !important; }
.ml30, .mh30, .ma30 { margin-left:   30px !important; }
.pt30, .pv30, .pa30 { padding-top:   30px !important; }
.pr30, .ph30, .pa30 { padding-right: 30px !important; }
.pb30, .pv30, .pa30 { padding-bottom:30px !important; }
.pl30, .ph30, .pa30 { padding-left:  30px !important; }
.mt40, .mv40, .ma40 { margin-top:    40px !important; }
.mr40, .mh40, .ma40 { margin-right:  40px !important; }
.mb40, .mv40, .ma40 { margin-bottom: 40px !important; }
.ml40, .mh40, .ma40 { margin-left:   40px !important; }
.pt40, .pv40, .pa40 { padding-top:   40px !important; }
.pr40, .ph40, .pa40 { padding-right: 40px !important; }
.pb40, .pv40, .pa40 { padding-bottom:40px !important; }
.pl40, .ph40, .pa40 { padding-left:  40px !important; }
.mt50, .mv50, .ma50 { margin-top:    50px !important; }
.mr50, .mh50, .ma50 { margin-right:  50px !important; }
.mb50, .mv50, .ma50 { margin-bottom: 50px !important; }
.ml50, .mh50, .ma50 { margin-left:   50px !important; }
.pt50, .pv50, .pa50 { padding-top:   50px !important; }
.pr50, .ph50, .pa50 { padding-right: 50px !important; }
.pb50, .pv50, .pa50 { padding-bottom:50px !important; }
.pl50, .ph50, .pa50 { padding-left:  50px !important; }
.mt60, .mv60, .ma60 { margin-top:    60px !important; }
.mr60, .mh60, .ma60 { margin-right:  60px !important; }
.mb60, .mv60, .ma60 { margin-bottom: 60px !important; }
.ml60, .mh60, .ma60 { margin-left:   60px !important; }
.pt60, .pv60, .pa60 { padding-top:   60px !important; }
.pr60, .ph60, .pa60 { padding-right: 60px !important; }
.pb60, .pv60, .pa60 { padding-bottom:60px !important; }
.pl60, .ph60, .pa60 { padding-left:  60px !important; }

@media screen and (max-width: 768px) {
	.sp_mh-10 { margin-left: -10px !important; margin-right: -10px !important; }
	.sp_mh10 { margin-left: 10px !important; margin-right: 10px !important; }
	.sp_mh15 { margin-left: 15px !important; margin-right: 15px !important; }

	.sp_mb0 { margin-bottom: 0 !important; }
	.sp_mb10 { margin-bottom: 10px !important; }
	.sp_mb20 { margin-bottom: 20px !important; }
	.sp_mb30 { margin-bottom: 30px !important; }
    .sp_mb40 { margin-bottom: 40px !important; }
    .sp_mb50 { margin-bottom: 50px !important; }

	.sp_mt0 { margin-top: 0 !important; }
	.sp_mt10 { margin-top: 10px !important; }
	.sp_mt20 { margin-top: 20px !important; }
	.sp_mt30 { margin-top: 30px !important; }

	.sp_ml0 { margin-left: 0 !important; }
	.sp_ml5 { margin-left: 5px !important; }
	.sp_ml10 { margin-left: 10px !important; }
    
    .sp_mr0 { margin-right: 0 !important; }
	.sp_mr5 { margin-right: 5px !important; }
	.sp_mr10 { margin-right: 10px !important; }

	.sp_pt0 { padding-top: 0 !important; }
	.sp_pt10 { padding-top: 10px !important; }
	.sp_pt20 { padding-top: 20px !important; }
	.sp_pt30 { padding-top: 30px !important; }

	.sp_pb0 { padding-bottom: 0 !important; }
	.sp_pb50 { padding-bottom: 50px !important; }
}

/* [border] ----------------- */
.bt0, .ba0 { border-top:none !important; }
.br0, .ba0 { border-right:none !important; }
.bb0, .ba0 { border-bottom:none !important; }
.bl0, .ba0 { border-left:none !important; }

/* [clearfix] --------------- */
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 7 (trigger hasLayout) */
.cf {
    zoom:1;
}
/* clearfix end */

/* 9.個人情報の取扱インライン
----------------------------------------------------------- */
.privacy_txt{
	text-align:center;
	font-size:16px;
	font-weight: bold;
}
.privacy_txt.f_col_w{
	color:#fff;
}
#kojin_joho_box{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;

	max-height: 250px;
	padding:20px;
	text-align: left;
	border: 1px solid #E2E4E4;
    background: #F9F9F9;
	font-size:12px;
	margin: 15px 0 30px;
	-webkit-overflow-scrolling: touch;
}
#kojin_joho_box p{
	margin-bottom: 20px;
}
#kojin_joho_box .kojin_ttl{
	font-size:13px;
	font-weight: bold;
	text-align: left;
	margin:0 0 10px 0;
}
table.kojin_tbl{
	width:100%;
	border: 1px solid #dddddd;
	border-collapse: collapse;
}
table.kojin_tbl th,
table.kojin_tbl td{
	padding:10px;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
	border: 1px solid #dddddd;
}
table.kojin_tbl thead th{
}
#kojin_joho_box table.kojin_tbl tbody th{
	width:100px;
}
@media screen and (max-width: 768px) {
	.privacy_txt.f_col_w{
		color:#fff;
		color: #222;
	}
	.privacy_txt {
		text-align: center;
		font-size: 14px;
	}
	#kojin_joho_box{
		max-height: 200px;
		padding:12px;
		font-size:11px;
		margin: 10px 0 15px;
	}
	#kojin_joho_box p{
		margin-bottom: 15px;
	}
	#kojin_joho_box .kojin_ttl{
		font-size:13px;
		margin:0 0 15px 0;
	}
	#kojin_joho_box table.kojin_tbl th,
	#kojin_joho_box table.kojin_tbl td{
		padding:5px;
	}

}
/* 10: 利用規約インライン
----------------------------------------------------------- */
.legalBox h3.sttl_terms{
  font-size: 16px;
  text-align: center;
  margin-bottom: 40px;
}
.legalBox ol.list_parentheses{
  padding-left: 2em;
}
.legalBox ol.list_parentheses li strong{
  position: relative;
}
.legalBox ol.list_parentheses li strong::after{
  content: "…";
  padding: 0 5px;
}
/* インライン内の利用規約領域 */
.boxTerms .legalBox p.pb5,
#kojin_joho_box .legalBox p.pb5{
  margin-bottom: 0;
}
.boxTerms .legalBox h3.sttl_terms,
#kojin_joho_box .legalBox h3.sttl_terms{
  font-size: 12px;
  text-align: left;
  margin-bottom: 10px;
}
.boxTerms .legalBox h4{
  font-size: 12px;
}


/* 11: 追従バナー
----------------------------------------------------------- */
.follow-bnr{
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  left: -300px;
  width: 300px;
  height: 300px;
  transition: .4s all;
}
.follow-bnr.on{
  left: 10px;
  transition: .4s all;
}
.follow-bnr.off,
.follow-bnr.on.off{
  display: none;
}
.follow-close{
  position: absolute;
  right: 0px;
  top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #fff;
  width: 30px;
  height: 30px;
  border: 1px solid #CFD1E3;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1000;
}
.follow-bnr a{
  position: relative;
  z-index: 999;
  display: block;
  opacity: 1;
}
.follow-bnr a:hover{
  opacity: .75;
  transition: .4s all;
}
.follow-bnr a img{
  width: 100%;
}
@media screen and (max-width: 768px) {
  .follow-bnr{
    left: -160px;
    bottom: 5px;
    width: 150px;
    height: 150px;
  }
  .follow-bnr.on{
    left: 5px;
    
  }
}



/* 12: フォーム：BioGraphコネクト追加 2023/06
----------------------------------------------------------- */
.form-price-box{
    display: none;
}
.form-price-box dl{
    
}
.form-price-box dl dt{
    margin-bottom: 0;
    color:#fff;
    font-size:16px;
    font-weight: 700;
    padding: 5px;
    text-align: center;
}
.form-price-box dl dd{
    padding-top: 10px;
}
.form-price-box dl dd h4{
    text-align: center;
    font-size:20px;
    font-weight: 700;
    color:#000;
    margin-bottom: 10px;
}
.form-price-box dl dd h4 span{
    font-size:15px;
    padding-left: 2px;
}
.form-price-box dl dd p{
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 0;
    
}

.form-price-box5 dt{
    background: #75ED2B;
    background: linear-gradient(90deg, #75ED2B 0%, #17F2D1 100%);
}
.form-price-box1 dt{
    background: #ECA25C;
}
.form-price-box2 dt{
    background: #86B6B5;
}
.form-price-box3 dt{
    background: #7EA5C8;
}
.form-price-box4 dt{
    background: #BD5998;
}