/* CSS Document */
/*
============================================================
*	form.css
============================================================
*/

.formAreaBG {
  background:#fff8f3;
  padding:30px 0 40px;
}
.formAreaBG02 {
  background:#fff8f3;
  padding:15px 0 40px 0;
}
.formArea {
  background:#fff;
  border:1px solid #fdbe8c;
  border-radius:4px;    /* CSS3草案 */
  -webkit-border-radius:4px;  /* Safari,Google Chrome用 */
  -moz-border-radius:4px; /* Firefox用 */
  margin-top:20px;
  padding:20px 29px;
  color: #333333;
}
.experience .formArea {
  padding:20px 0 0 0!important;
}

.formArea .inner{
  margin-bottom:10px;
  padding:20px 0;
  overflow: hidden;
}
.formArea .inner { border-bottom:1px dotted #ccc; }
.formArea .inner.noborder {border-bottom: none;}
.formArea .inner .ttl{
  margin-bottom:20px;
  font-size:18px;
  font-weight:bold;
  color:#333;
}
.formArea .inner .ttl_note{
  font-size:13px;
  font-weight: normal;
  color:#333;
  padding:0 10px 0 ;
}
.formArea .inner .subTtl{
  font-size:16px;
  font-weight: bold;
  color:#333;
  margin:0 0 15px;
}

.formArea .inlineForms{
  overflow:hidden;
  font-size:16px;
}
.formArea .inlineForms li{
  margin-left:10px;
  float:left;
}
.formArea .inlineForms li:first-child{
  margin-left: 0;
}
.formArea .inlineForms li.txt{
  padding:10px 5px 0;
}
.formArea .inlineFormsType02{
      width:690px;
}
.formArea .inlineFormsType02 li{
      width:340px;
      margin:0;
}

/* ============================================
	CHECKBOX
============================================ */
.carea{
	position:relative;
}
.checkbox_input{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	position: absolute;
}
.checkbox_label{
	background:url(/registration/img/common/ico_form_check01.jpg) no-repeat 10px center #f8f8f8;
	display:inline-block;
	padding: 8px 15px 8px 35px;
	border:1px solid #ababab;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size:16px;
	cursor:pointer;
}
.checkbox_label_selected{
	background:url(/registration/img/common/ico_form_check01_on.jpg) no-repeat 10px center #6dc6e5;
	border:1px solid #6dc6e5;
	color:#fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.checkbox_label.type02{
      width:100%;
      box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-position: 380px center;
    text-align:center;
    color:#333;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    font-size:13px;
    padding:14px 15px 14px 35px;
}
.checkbox_label_selected.type02{
      color:#fff;
}

/* ============================================
	INPUTBOX
============================================ */
input{
  ime-mode:active;
}

input[type="text"], #loginContents input[type="password"] {
	border: 1px solid #ccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	line-height: 30px;
	height: 38px;
	margin: 0;
	padding: 2px 15px;
	font-size:16px;
	background-color:#f8f8f8;
	width: 286px;
}
.before_box {
	border: none!important;
	border-radius: 0px!important;
	-moz-border-radius: 0px!important;
	-webkit-border-radius: 0px!important;
	line-height: 30px!important;
	height: 30px!important;
	margin: 0;
	padding: 2px 15px!important;
	width: 765px!important;
	font-size:16px!important;
	background-color:#E2F3F9!important;
	color:333!important;
}
input.arw{
	background: #f8f8f8 url("/registration/img/common/ico_form_arrow.png") no-repeat scroll 270px 2px;
}

/* ============================================
	SELECTBOX CSS
============================================ */

.select-box-css{
	border: 1px solid #b1b1b1;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-align:left;
	font-size:16px;
	color:#0c2245;
	background-color:#f8f8f8;
	/*background: url(/registration/img/common/ico_form_arrow.png) no-repeat 270px 2px;*/
	width: 316px;
  padding: 10px 10px 10px;
	height: 40px;
	line-height:40px;	
}

/* ============================================
	EASY SELECTBOX
============================================ */
.easy-select-box{
	background: #f8f8f8;
	border: 1px solid #b1b1b1;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-align:left;
	font-size:16px;
	color:#0c2245;
}
.easy-select-box:focus {
	outline: none;
}
.easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 165px 2px;
	color:#0c2245;
	cursor: default;
	height: 40px;
	line-height:40px;
	padding:0 15px;
	text-indent: 5px;
	width: 195px;
}
.easy-select-box .esb-displayer:hover {
	filter: alpha(opacity=80);
	-ms-filter: 'alpha(opacity=80)';
	opacity: .8;
}
.easy-select-box:hover .esb-displayer{
	text-decoration:none;
}
/* .easy-select-box.disabled .esb-displayer,
.easy-select-box:hover.disabled .esb-displayer{
	background-position: 0 -36px;
} */
.easy-select-box .esb-dropdown{
	background: #fff;
	border: 1px solid #ccc;
	display: none;
	max-height: 500px;
	overflow: auto;
	position: absolute;
	z-index: 999;
	width: 200px;
}
.easy-select-box  .esb-item{
	padding:3px;
	background:#f8f8f8;
	color:#0c2245;
	cursor:default;
}
.easy-select-box .esb-item:hover{
	background:#ccc;
	color:#FFFFFF;
	text-decoration:none;
}

/* ============================================
	SELECTBOX タイプ03
============================================ */
.select03 .easy-select-box .esb-displayer{
  	width: 55px;
}
.select03 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 40px 2px;
}

/* ============================================
	SELECTBOX タイプ04
============================================ */
.select04 .easy-select-box .esb-displayer{
  	width: 78px;
}
.select04 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 63px 2px;
}

/* ============================================
	SELECTBOX タイプ02
============================================ */
.select02 .easy-select-box .esb-displayer{
  	width: 150px;
}
.select02 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 135px 2px;
}

/* ============================================
	SELECTBOX タイプ01
============================================ */
.select01 .easy-select-box .esb-displayer{
  	width: 246px;
}
.select01 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 230px 2px;
}

/* ============================================
	SELECTBOX タイプ05
============================================ */
.select05 .easy-select-box .esb-displayer{
  	width: 286px;
  	cursor: pointer;
}
.select05 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 270px 2px;
}

.select06 .easy-select-box .esb-displayer{
  	width: 87px!important;
  	cursor: pointer;
}
.select06 .easy-select-box .esb-displayer{
	background: url(/registration/img/common/ico_form_arrow.png) no-repeat 72px 2px!important;
}


.easy-select-box .esb-displayer,
.esb-dropdown .esb-item{
	cursor: pointer;
}

/* ============================================
	TEXTAREA
============================================ */
textarea {
    border: 1px solid #cabebe;
    height: 110px;
    padding: 10px;
    width: 780px;
	font-size:16px;
}
.textareaForm{
	background: #f8f8f8;
	border: 1px solid #ababab;
	border-radius: 4px;
	font-size: 15px;
	height: 150px;
	padding:15px;
      overflow:auto;
}
.textareaForm.type02{
      height:200px;
      font-size:13px;
      color:#666;
      background:#fff;
      border-radius: 0;
}
/* ============================================
	RADIOBTN
============================================ */
.rarea{
	position:relative;
}
.radiobtn_input{
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	position: absolute;
}
.radiobtn_label{
	background:url(/registration/img/common/ico_form_radio01.png) no-repeat 10px center #f8f8f8;
	display:inline-block;
	padding: 2px 15px 2px 35px;
	border:1px solid #ababab;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size:16px;
	cursor:pointer;
	line-height: 34px;
	height: 34px;
}
/*非活性ボタン*/
.radiobtn_label.inactive{
		cursor: default!important;
	background:url(/registration/img/common/ico_form_radio01.png) no-repeat 10px center #ddd;
	color: #bbb;
}

.radiobtn_label_selected{
	background:url(/registration/img/common/ico_form_radio01_on.png) no-repeat 10px center #6dc6e5;
	border:1px solid #6dc6e5;
	color:#fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.inlineForms .labelType02{
      background:url(/registration/img/common/ico_form_radio01.png) no-repeat left center;
      border:none;
      color:#666;
      padding:0 15px 0 25px;
}

.radiobtn_label_selected.labelType02{
	background:url(/registration/img/common/ico_form_radio02_on.png) no-repeat left center;

}


/* ============================================
	必須アイコン
============================================ */
.hissu{
	background-color:#ea4040;
	border-radius:3px;		/* CSS3草案 */
	-webkit-border-radius:3px;	/* Safari,Google Chrome用 */
	-moz-border-radius:3px;	/* Firefox用 */
	padding: 2px 3px;
	font-size:10px;
	color:#fff;
	vertical-align: top;
	margin-top: 4px;
	margin-left: 5px;
	display: inline-block;
}


/* ============================================
	任意アイコン
============================================ */
.nini{
	border:1px solid #ccc;
	border-radius:3px;		/* CSS3草案 */
	-webkit-border-radius:3px;	/* Safari,Google Chrome用 */
	-moz-border-radius:3px;	/* Firefox用 */
	padding: 2px 3px;
	font-size:10px;
	color:#999;
	vertical-align: top;
	margin-top: 4px;
	margin-left: 5px;
	display: inline-block;
}

/* ============================================
	郵便番号から探すボタン
============================================ */
.addressNo{
  display: inline-block;
}

/* ============================================
	外部リンク
============================================ */
.outerLink a:link,
.outerLink a:hover,
.outerLink a:visited{
	color: #0da8d8;
	text-decoration:underline;
}


/* ============================================
  adding another form area
============================================ */
.experience .addFormArea {
    border: 1px solid #23aee2;
    margin:auto 29px;
}
.addFormArea {
    border: 1px solid #23aee2;
    margin-top:9px;

}
.addFormArea .inArea {
      padding: 20px 29px 0;
}
.addFormArea .formBlockTitle{
      padding:7px 10px 8px;
      color:#fff;
      background-color:#23AEE2;
      font-size:14px;
}
.addForm {
    margin: 20px 0 0;
    text-align: center;
}
.addForm img {
  cursor:pointer;
}
/* ============================================
  file Uploader
============================================ */
.fileUploder{
  float: left;
  position:relative;
  margin-right: 10px;
  color: #333;
}
.fileUploder input::-webkit-input-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder input:-ms-input-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder input::-moz-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder input{
  background: url(/registration/img/common/ico_form_arrow2.png) no-repeat right;
  background-color:af8f8f8;
  color:#0c2245;
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
    /*
    box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  */
}
.fileUploder .btn{
  position:absolute;
  top:0;
  left:177px;
  z-index:1;
  display:block;
  width:138px;
  height:31px;
  text-indent:-99999px;
  overflow:hidden;
  border:none;
  background:url(img/btn.gif) no-repeat 0 0;
}
.fileUploder .btn:hover{
  background-position:0 100%;
}
#registration .fileUploder .uploader{
  height: 40px;
  position:absolute;
  top:0;
  /*↓leftからrightに。ボタンが右にあるので、rightにしないとだめ。IE対策。*/
  right:0;
  /*↓念のため*/
  z-index:99;
  width:100%;
  /*↓ここでフォームアイテムの大きさを調整。IE対策*/
  opacity:0;
  cursor: pointer;
}
.fileThumb{
  float: left;
  margin-right: 10px;
}
.fileReset{
  display: none;
  cursor: pointer;
  float: left;
}
.fileUploder02{
  float: left;
  position:relative;
  margin-right: 10px;
  color: #333;
}
.fileUploder02 input::-webkit-input-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder02 input:-ms-input-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder02 input::-moz-placeholder {
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
}
.fileUploder02 input{
  background: url(/registration/img/common/ico_form_arrow2.png) no-repeat right;
  background-color:af8f8f8;
  color:#0c2245;
    opacity: 1;
    height: 40px;
    font-size: 16px;
    color: #333;
    /*
    box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  */
}
.fileUploder02 .btn{
  position:absolute;
  top:0;
  left:177px;
  z-index:1;
  display:block;
  width:138px;
  height:31px;
  text-indent:-99999px;
  overflow:hidden;
  border:none;
  background:url(img/btn.gif) no-repeat 0 0;
}
.fileUploder .btn:hover{
  background-position:0 100%;
}
#registration .fileUploder02 .uploader02{
  height: 40px;
  position:absolute;
  top:0;
  /*↓leftからrightに。ボタンが右にあるので、rightにしないとだめ。IE対策。*/
  right:0;
  /*↓念のため*/
  z-index:99;
  width:100%;
  /*↓ここでフォームアイテムの大きさを調整。IE対策*/
  opacity:0;
  cursor: pointer;
}
.fileThumb02{
  float: left;
  margin-right: 10px;
}
.fileReset02{
  display: none;
  cursor: pointer;
  float: left;
}

/* ============================================
  jQuery UI datePicker override
============================================ */

#jquery-ui-datepicker::-webkit-input-placeholder{
  color: #333;
  opacity: 1;
}

#jquery-ui-datepicker:-ms-input-placeholder {
  color: #333;
  opacity: 1;
}

#jquery-ui-datepicker::-moz-placeholder {
  color: #333;
  opacity: 1;
}

#jquery-ui-datepicker {
  color: #333;
  opacity: 1;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 4px;
    background: #dadada url("../img/jquery_ui/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50%;
    border: 1px solid #999999;
    color: #212121;
    font-weight: normal;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
.ui-datepicker-title select {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: 1px solid #ababab;
  border-radius: 3px;
  color: #333333;
  padding: 7px 5px ;
  text-align: left;
  background: url(../img/ico_arw_btm.png) 97% 50% no-repeat;
  background-size: 8px 7px;
  -webkit-background-size: 8px 7px;
  -moz-background-size: 8px 7px;
  background-color: #f8f8f8;
  font-size: 14px;
  line-height: 14px;
}
.checkList li{
  float: left;
  margin: 0 10px 10px 0;
  white-space: nowrap;
}


/* profile
--------------------------------------------------------------------------------*/
form a.lk_insite {
	font-size:13px;
	color:#11a7d7;
	text-decoration:underline;
  background-image: none;
  padding-right: 0;
}
form .lk_insite.blankIcon {
padding-right:19px;
  background:url(/img_n/ico_link_foot.png) no-repeat scroll 100% 0;
}
form .lk_insite.blankIcon:hover {
padding-right:19px;
  background:url(/img_n/ico_link_foot.png) no-repeat scroll 100% 0;
}
form a:hover.lk_insite{
  background-image: none;
  text-decoration: none;
  cursor: pointer;
}

#registration input {
	line-height:34px;
	height:34px;
    cursor: pointer;
}
#registration .disable input {
	color: #999;
}


/* desire.html
--------------------------------------------------------------------------------*/
.change02{
      display: none;
    }

/* 職務履歴 */
.experience .parentSection {
  background: #fff8f3;
}
.experience .formArea {
  overflow: hidden;
}
.experience .formArea .radioArea > .inner,
.experience .formArea .addFormArea {
  width: 960px;
  background: #fff;
  margin: auto;
  box-sizing: border-box;
}
.experience .formArea {
  background: none;
  border: none;
  padding: 0 !important;
  margin-top: 0;
}

.experience .formArea .radioArea {
  padding: 15px 0;
}
.experience .formArea .radioArea >.inner {
  border-radius: 4px;
  padding: 20px 29px;
}
.experience .formArea .radioArea >.inner .radiobtn_label {
  width: 70px;
}

.experience .addFormArea {
  margin: 0;
}
.experience .addFormArea .inArea {
  padding-top: 10px;
}

.experience .checkList,
.experience .checkList li,
.experience .checkList li .checkbox_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
}
.experience .checkList {
  border-top: 1px solid #ababab;
  border-left: 1px solid #ababab;
}
.experience .checkList li {
  width: calc(100% / 5);
  margin: 0;
  white-space: normal;
}
.experience .checkList li .checkbox_label {
  width: 100%;
  min-height: 50px;
  border-top: none;
  border-left: none;
  border-radius: 0;
  font-size: 13px;
	padding: 5px 10px 5px 35px;
  box-sizing: border-box;
}
.experience .checkList li .checkbox_label span {
  display: block;
  width: 100%;
}
.experience .checkbox_label_selected {
  border-top: none;
  border-left: none;
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #ababab;
}

.experience .salary + .fadeArea {
  display: flex;
  align-items: center;
}
.experience .salary + .fadeArea .select05 {
  margin-right: 10px;
}

.experience .addForm {
  display: none;
  margin-top: 40px;
  border-top: 1px solid #fff;
}
.experience .addForm span:not(.displayBlock) {
  display: block;
  width: 350px;
  background: #1a76d3 url("/registration/img/icon_plus.gif") no-repeat 40px center;
  background-size: 20px; 
  border: 1px solid #0a5caf;
  border-radius: 4px;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding: 15px 0 15px 20px;
  margin: auto;
  box-sizing: border-box;
  cursor: pointer;
}

/* ============================================
  一時保存
============================================ */
.headerBtn.break.fixed {
  position: fixed;
  top: -3px;
  right: calc(50% - 480px);
  z-index: 1;
}
.headerBtn.break a {
  display: inline-block;
  background: #fff4e9;
  border: 3px solid #ff790b;
  border-radius: 10px;
  color: #ff790b;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding: 12px 15px 10px;
  margin-right: 20px;
}
.headerBtn.break.fixed a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.headerBtn.break a:hover {
  opacity: .8;
}

.experience .addFormArea.hide {
  transition: transform 0.2s ease, opacity 0.2s ease, height 0.4s 0.2s ease, margin-top 0.4s 0.2s, margin-bottom 0.4s 0.2s;
  opacity: 0;
  transform: translateX(-100vw);
  overflow: hidden;
  margin-top: 0!important;
  margin-bottom: 0!important;
}
.experience .addFormArea .formBlockHeader {
  position: relative;
}
.experience .addFormArea .removeButton {
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  background: #ffffff;
  border-radius: 2px;
  color: #11a7d7;
  font-size: 13px;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.experience .addFormArea .removeButton.active {
  pointer-events: auto;
  opacity: 1;
}
.experience .addFormArea .selectModalTrigger {
  cursor: pointer;
  display: inline-block;
}
.experience .addFormArea .selectModalTrigger .selectModalInput {
  pointer-events: none;
}
.experience .addFormArea .selectModalTrigger .easy-select-box {
  pointer-events: none;
}
.experience .experienceModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
  color: #333333;
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
}
.experience .experienceModal.active {
  opacity: 1;
  pointer-events: auto;
}
@media all and (-ms-high-contrast:none){
  .experience .experienceModal {
    display: none;
  }
  .experience .experienceModal.active {
    display: block;
  }
}
.experience .experienceModal .modalScroll {
  display: table;
  width: 100%;
  height: 100%;
  background: rgba(112,201,224,0.4);
}
.experience .experienceModal .modalScrollInner {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: middle;
}
.experience .experienceModal .modalBox {
  background: #ffffff;
  border-radius: 8px;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.25);
  position: relative;
}
.experience .experienceModal .modalBox .button {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.experience .experienceModal .modalBox .button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  margin-right: 10px;
  min-width: 200px;
  height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0px 2px 5px rgba(51,51,51,0.3);
  box-sizing: border-box;
  font-size: 18px;
  color: inherit;
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
  cursor: pointer;
}
.experience .experienceModal .modalHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 5px 15px;
  background: #23aee2;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 18px;
}
.experience .experienceModal .modalContent {
  position: relative;
  padding-top: 20px;
  padding-bottom: 5px;
  background-color: #f3f3f3;
}
.experience .experienceModal .modalHeader strong {
  font-weight: bold;
}
.experience .experienceModal .modalHeader .close {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  background: #ffffff;
  color: #11a7d7;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
}
.experience .experienceModal .modalFooter {
  position: relative;
  margin: 30px 20px 30px;
  text-align: center;
}
.experience .experienceModal .modalFooter .close,
.experience .experienceModal .modalFooter .reset {
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
  color: #11a7d7;
}
.experience .experienceModal .modalFooter .reset {
  position: absolute;
  top: 0;
  left: 0;
}
.experience .experienceModal.removeModal .modalBox {
  padding: 45px 20px 45px;
  overflow: visible;
}
.experience .experienceModal.removeModal .text {
  margin-bottom: 30px;
  font-size: 32px;
  text-align: center;
}
.experience .experienceModal.removeModal .formBlockTitle span {
  display: none;
}
.experience .experienceModal.removeModal .cancel {
  margin-top: 40px;
  color: #11a7d7;
  font-size: 18px;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
.experience .experienceModal.selectModal .selectGroup {
  padding: 10px 20px
}
.experience .experienceModal.selectModal .selectGroupTitle {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.experience .experienceModal.selectModal .selectList {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}
.experience .experienceModal.selectModal .selectList .item {
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(25% - 4px);
  min-height: 40px;
  padding: 5px 15px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 1px 3px rgba(51,51,51, 0.2);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color:rgb(35,147,226, 0.2);
  transition: background-color 0.4s ease;
}
.experience .experienceModal.selectModal .selectList .item:hover {
  background-color: #ecf9fd;
}
.experience .experienceModal.selectModal .selectList .item.active {
  background-color: #ecf9fd;
}
.experience .experienceModal .closeButton .close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  cursor: pointer;
}
.experience .experienceModal .closeButton .close:before,
.experience .experienceModal .closeButton .close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1.5px;
  margin-left: -10px;
  display: block;
  width: 20px;
  height: 3px;
  background: #cccccc;
}
.experience .experienceModal .closeButton .close:before {
  transform: rotate(45deg);
}
.experience .experienceModal .closeButton .close:after {
  transform: rotate(-45deg);
}
/*input.hissu_yellow {
  background-color: #fffbd2;
}
.select05.hissu_yellow .easy-select-box, .inlineForms.hissu_yellow .easy-select-box{
  background: #fffbd2;
}*/

.nearest_station_box{
  background-color: #f8f8f8;
  padding: 20px;
  display: inline-block;
  position: relative;
}
.nearest_station_box #target{
  background-color: #fff;
}
.nearest_station_box .tootiplink{
  background-image: -webkit-linear-gradient( 90deg, #2198C2 0%, #36B2D2 100%); 
  position: absolute; 
  top:23px; 
  right: 23px; 
  height: 34px;
  width: 45px;
}
.nearest_station_box .tootiplink img{
  margin: 5px 0 0 10px;
}
.tooltip {
  position: absolute;
  background-color: #fff;
  color: #333;
  border-radius: 0.3em;
  padding: 0;
  margin: 0.3em 0 0 0;
  display: none;
  top: 65px;
  left: 450px;
  transform: translateX(-50%);
animation-name: fade-in;
animation-duration: 0.5s;
border: 1px solid #ccc;
width: 860px;
z-index: 10;
box-shadow: 0px 3px 5px 0px rgba(4, 0, 0, 0.05);
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 257px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
  transform:rotate(180deg); 

}
.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 265px;
  margin-left: -10px;
  border: 12px solid transparent;
  border-top: 12px solid #ccc;
  transform:rotate(180deg); 
}
/* .tooltip_inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
} */

.tooltip_inner ul {
   display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 20px 15px;
  flex-wrap: nowrap;
}
.tooltip_inner ul li{
float: none!important;
}
.tooltip_inner ul li label{
width: 100%;
}


@keyframes fade-in {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
.tooltip .near_station {
  border: none;
display: flex;
flex-wrap: wrap;
  margin: 5px 0 0 0;
}

.tooltip .near_station label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  width: auto;
  margin: 0 0 10px 10px;
  padding: .5em .7em;
  border: 1px solid #ababab;
  border-radius: 3px;
  background-color: #f8f8f8;
  cursor: pointer;
font-size: 15px;
}

.tooltip .near_station label:has(:checked) {
  background-color: #6dc6e4;
  color: #fff;
}

.tooltip .near_station label::before,
.tooltip .near_station label:has(:checked)::after {
  border-radius: 50%;
  content: '';
}

.tooltip .near_station label::before {
  width: 14px;
  height: 14px;
  background-color: #fff;
  border: 1px solid #ababab;

}

.tooltip .near_station label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: calc(9px + .65em);
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background-color: #50CAC0;
}

.tooltip .near_station input {
  display: none;
}
.js-required + .easy-select-box ,
.js-required .easy-select-box ,
.js-required {
  background-color: #fffbd2 !important;
}
.js-required.valid + .easy-select-box ,
.js-required.valid ,
.required.valid {
  background-color: #f8f8f8 !important;
}
/*no.4217107 2023.05.01 ここから修正*/
/*---------------------------------
    最寄り駅モーダル表示
---------------------------------*/
#registration.modalstyle01 #cboxClose {
  display: none;
}
/*#registration.modalstyle01 #cboxLoadedContent ,
#registration.modalstyle01 #colorbox ,
#registration.modalstyle01 #cboxContent ,
#registration.modalstyle01  #cboxWrapper {
  width: 700px;
}*/
#registration.modalstyle01 #cboxContent ,
#registration.modalstyle01 .cboxIframe {
  background-color: #f2f2f2;
}
#registration.modalstyle01 #colorbox {
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.station_search_modal {
  margin: 0;
  background: #f2f2f2;
  color: #333;
}
.station_search_modal * {
  box-sizing: border-box;
}
.station_search_modal .modalHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 5px 15px;
  background: #23aee2;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 18px;
}
.station_search_modal .modalContent {
  position: relative;
  padding-top: 20px;
  padding-bottom: 5px;
  background-color: #f3f3f3;
}
.station_search_modal .modalHeader strong {
  font-weight: bold;
}
.station_search_modal .modalHeader .close {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  background: #ffffff;
  color: #11a7d7;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
}
.station_search_modal .lead_text {
  margin-bottom: 14px;
  text-align: left;
  font-weight: bold;
}
.station_search_modal .prev_text {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
/*no.4217107 2023.06.29 ここから修正*/
.station_search_modal .prev_text a {
  color: #38b5d5;
  text-decoration: underline;
  font-size: 17px;
}
.station_search_modal .prev_text a:hover {
  cursor: pointer;
}
/*no.4217107 2023.06.29 ここまで修正*/
/*最寄り駅モーダル表示 駅名（路線名）を選択してください*/
.station_search_modal .list-detail {
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px;
  margin-left: 2px;
}
.station_search_modal .list-detail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(25% - 4px);
  min-height: 40px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 1px 3px rgba(51,51,51, 0.2);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgb(35,147,226, 0.2);
  transition: background-color 0.4s ease;
  position: relative;
  cursor: pointer;
}
.station_search_modal .list-detail li:hover {
  cursor: pointer;
  background-color: #ecf9fd;
}
.station_search_modal .list-detail li label {
  padding: 5px 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  min-height: 65px;
}
.station_search_modal .list-detail .visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
  width: 100%;
  height: 100%;
}
/*最寄り駅モーダル表示 個別設定*/
.station_search_modal.__page01 .modal_cont {
  padding: 30px 56px;
}
.station_search_modal.__page02 .modal_cont {
  padding: 30px 18px;
}
/*no.4217107 2023.05.01 ここまで修正*/
