@charset "UTF-8";

/*================================= common =================================*/

html {
  height: 100%;
  font-size: 62.5%;
  background: #f0f2f5;
}

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
  letter-spacing: -0.01px;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  width: 100%;
  height: 100%;
  min-width: 1366px;
}

a {
  color: #0973ac;
  text-decoration: underline;
}

a:hover {
  color: #0973ac;
  text-decoration: none;
}

a:active,
a:focus {
  outline: 0;
}

a img:hover {
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  opacity: 0.85;
}

/*-- Position --*/

.TL {
  text-align: left !important;
}

.TC {
  text-align: center !important;
}

.TR {
  text-align: right !important;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
  height: 0;
}

.cf {
  zoom: 1;
}

.B {
  font-weight: bold;
}

.red {
  color: #ff0202;
}

.noscriptError {
  width: 100%;
  padding-top: 50px;
  *padding: 20px 0 50px;
  margin: -4px 0 -40px;
}

.noscriptError > p {
  color: #f33;
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: bold;
  text-align: center;
}

/******************************* global.css ************************************
外枠：1366px
サイドコンテンツの幅 280px
コンテンツの幅 710px
******************************* / global.css **********************************/

/*================================= Wrapper =================================*/

.l_wrapper:after {
  display: block;
  clear: both;
  content: '';
  height: 0;
}

.l_wrapper {
  width: 100%;
  height: 100%;
  background: #3C3C3C;
}

/* ログイン画面の時のみ使用 */

.l_wrapper-login {
  background: none;
}

/*============================== globalHeader ==============================*/

.l_header {
  z-index: 4;
  width: 100%;
  height: 46px;
  position: fixed;
}

/* ログイン後以降に使用 */

.header {
  zoom: 1;
  min-width: 1366px;
  background: #3C3C3C;
}

/* ログイン画面の時のみ使用 */

.header-login {
  margin-bottom: 150px;
  border-bottom: 5px solid #F01826;
}

/* headerロゴ */

.header_logo {
  padding: 2px 0 0 17px;
}

.header_logoOff {
  z-index: 1;
  position: absolute;
}

.header_info_item {
  float: left;
  text-align: center;
}

.header_info_item-text {
  color: #fff;
  white-space: nowrap;
  padding: 17px 8px 13px;
}

.header_info_item a {
  color: #fff;
  display: block;
  min-width: 100px;
  text-decoration: none;
  padding: 17px 10px 13px;
}

.header_info_item .fas {
  margin-right: 5px;
}

.header_info_item.header_info_item-login a
.header_info_item.header_info_item-logout a {
  color: #fff;
  display: block;
  min-width: 60px;
  position: relative;
  text-decoration: none;
  padding: 17px 8px 13px;
}

.header_info_item a:hover {
  color: #ff9a2d;
  transition: all 0.3s;
}

.header_info_itemText {
  display: block;
  margin-left: 18px;
}

/* headerに設置しているログアウトbtnに設置するicon */

.header_info_itemIcon {
  top: 16px;
  left: 28px;
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
}

/* メニュー選択時の色 */

.header_info-navEnneagram .header_info_itemAnchor1,
.header_info-navEgogram .header_info_itemAnchor2,
.header_info-navBehavior .header_info_itemAnchor3,
.header_info-navMaster .header_info_itemAnchor4,
.header_info-navIQ .header_info_itemAnchor5,
.header_info-navDashboard .header_info_itemAnchor6,
.header_info-navSkill .header_info_itemAnchor7 {
  color: #ff9a2d;
  text-shadow: 1px 0.5px 1px #17344f;
}

.header:after {
  display: block;
  clear: both;
  content: '';
  height: 0;
}

/*============================== Contents Layer ============================*/

.l_frame {
  height: 100%;
  background: #f0f2f5;
}

.b_contents {
  padding-top: 46px;
  height: calc(100% - 46px);
}

/* ログイン画面の時のみ使用 */

.b_contents-login {
  float: none;
}

/*=========================== HPContents Common ===========================*/

/*-------------------------------- inner ----------------------------------*/

.inner {
  padding: 10px 10px 50px 10px;
}

.inner-sizeS {
  width: 800px;
  margin: 0 auto;
}

.inner-sizeM {
  width: 850px;
  margin: 0 auto;
}

.inner-sizeL {
  width: 940px;
  margin: 0 auto;
}

.inner-size2L {
  width: 1344px;
  margin: 0 auto;
}

.inner-animePosition {
  top: 30%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

/*---------------------------------- title ----------------------------------*/

.title {
  width: 100%;
}

/* titleの間隔調整 */

.title-spaceS {
  margin-top: 10px;
}

.title-spaceM {
  margin-top: 20px;
}

.title-spaceL {
  margin-top: 30px;
}

.title-bgColor1 {
  background: #f13757;
}

/* titleの下にLineを付ける */

.title_bottomMark {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #555;
}

/* titleの左横にLineを付ける */

.title_leftMark {
  padding: 3px 0 5px 15px;
  border-left: 6px solid #3e73af;
}

.title_leftMark-color1 {
  border-left: 6px solid #ffccd0;
}

/* ブルー */

.title_leftMark-color2 {
  border-left: 6px solid #2293ea;
}

/* グリーン */

.title_leftMark-color3 {
  border-left: 6px solid #5cb85c;
}

/* オレンジ */

.title_leftMark-color4 {
  border-left: 6px solid #ff9a2d;
}

/* パープル */

.title_leftMark-color5 {
  border-left: 6px solid #9370b6;
}

/* title_text */

.title_text {
  margin-top: 3px;
  font-size: 1.6rem;
}

/* titleの幅調整 */

.title_text-sizeM {
  font-size: 2.4rem;
}

/* 白 */

.title_text-color1 {
  color: #fff;
}

/* 青 */

.title_text-color2 {
  color: #2293ea;
}

/* 緑 */

.title_text-color3 {
  color: #5cb85c;
}

/* オレンジ */

.title_text-color4 {
  color: #ff9a2d;
}

/* パープル */

.title_text-color5 {
  color: #9370b6;
}

.title_text-inline {
  display: inline-block;
}

/*---------------------------------- table ----------------------------------*/

.table {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

/* tableの間隔調整 */

.table-spaceS {
  margin-top: 10px;
}

.table-spaceM {
  margin-top: 20px;
}

.table-spaceL {
  margin-top: 30px;
}

/* tableの背景色 */

/* 赤 */

.table-bgColor1 {
  background-color: #ffccd0;
}

/* 青 */

.table-bgColor2 {
  background-color: #d5ebf6;
}

.table_title,
.table_data {
  font-size: 1.3rem;
  border-bottom: 1px solid #d9d9d9;
}

.table_title {
  color: #fff;
  padding: 5px 4px;
  background: #3f3f3f;
  letter-spacing: -0.1rem;
}

/* センター寄せ */

.table_title-positionCenter,
.table_data-positionCenter {
  text-align: center;
}

/* 右寄せ */

.table_title-positionRight,
.table_data-positionRight {
  text-align: right;
}

.table_data {
  padding: 8px 4px;
  word-break: break-all;
}

.table_data-bold {
  font-weight: bold;
}

/* 検索用 */

.table-search {
  background: #f0f2f5;
}

.table-search,
.table-search .table_data {
  border-bottom: none;
}

.table-search .table_title,
.table-search .table_data {
  padding: 0;
}

.table-search .table_data {
  position: relative;
}

.table-search .table_data_label {
  top: -5px;
  left: 10px;
  z-index: 2;
  padding: 0 5px;
  position: absolute;
  background: #f0f2f5;
  display: inline-block;
}

.table-search input {
  padding: 12px 2px 10px 10px;
}

.table-search select {
  padding: 11px 2px 9px 10px;
}

.table-search input,
.table-search select {
  border-color: #9d9d9d;
}

.table-search input {
  background: #f0f2f5;
}

/* 左の余白調整 */

.table-search .table_data-leftSpaceM {
  padding-left: 10px;
}

.table-search .table_data-leftSpaceM .table_data_label {
  left: 25px;
}

/* 面接日のカレンダー用 */

.table-calendar .table_title,
.table-calendar .table_data {
  text-align: center;
}

.table-calendar .table_data {
  height: 74px;
}

.table-calendar .table_data div {
  top: -5px;
  position: relative;
}

.table-calendar .table_data ul li:nth-child(even) {
  margin-top: 5px;
}

/* 詳細ページで使用 */

.table-design1 .table_title {
  color: #333;
  background: #fff;
  letter-spacing: 0;
  font-weight: bold;
  border-color: #3a75b1;
}

.table-design1 .table_title,
.table-design1 .table_data {
  padding: 12px 8px;
}

/* 入力formで使用 */

.table-form {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.08);
}

.table-form .table_title {
  color: #333;
  background: #fff;
  letter-spacing: 0;
}

.table-form .table_title,
.table-form .table_data {
  border: none;
  padding: 10px 8px;
}

/* 下線 */

.table-form .table_title-borderBottom,
.table-form .table_data-borderBottom {
  border-bottom: 1px solid #ccc;
}

.table-form .table_data input {
  border: none;
  padding: 8px 5px;
  border-bottom: 1px solid #ccc;
  transition: all 0.4s;
}

.table-form .table_data input:focus {
  border-color: #f13757;
  transition: all 0.4s;
}

.table-form .table_data select {
  border: none;
  padding: 8px 5px;
  border-bottom: 1px solid #ccc;
  transition: all 0.4s;
}

.table-form .table_data select:focus {
  border-color: #f13757;
  transition: all 0.4s;
}

/* 入力非活性の箇所 */

.table-form .table_data-disabled input:disabled {
  background: #fff;
}

.table-form.table-conf .table_title,
.table-form.table-conf .table_data {
  border-bottom: 1px solid #ccc;
}

/*---------------------------------- list ----------------------------------*/

.list {
  width: 100%;
}

.list_item {
  float: left;
  width: 200px;
  padding: 15px 8px;
  margin-left: 20px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid #bfbfbf;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

.list_item:first-child {
  margin-left: 0;
}

/* 左に余白 */

.list_item-leftSpaceS {
  margin-left: 10px;
}

.list_item-leftSpaceM {
  margin-left: 20px;
}

.list_item-leftSpaceL {
  margin-left: 30px;
}

/* 空間の調整 */

.list_item-innerSpaceM {
  padding: 10px 8px;
}

/* borderの枠線 レッド */

.list_item-borderColor1 {
  border: 2px solid #f13757;
}

/* borderの枠線 ブルー */

.list_item-borderColor2 {
  border: 2px solid #3a75b1;
}

/* borderの枠線 グリーン */

.list_item-borderColor3 {
  border: 2px solid #46a127;
}

/* borderの枠線 オレンジ */

.list_item-borderColor4 {
  border: 2px solid #ff9a2d;
}

/* borderの枠線 パープル */

.list_item-borderColor5 {
  border: 2px solid #9370b6;
}

/* タイトル */

.list_item_title {
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px dashed #555;
}

/* タイトルのサイズ調整 */

.list_item_title-sizeM {
  font-weight: 800;
  font-size: 1.6rem;
}

/* アイコンの調整 */

.list_item_icon {
  width: 30px;
  height: 30px;
  padding-right: 10px;
  vertical-align: middle;
}

/*---------------------------------- block ----------------------------------*/

.block {
  width: 100%;
}

/* blockの間隔調整 */

.block-spaceXS {
  margin-top: 5px;
}

.block-spaceS {
  margin-top: 10px;
}

.block-spaceM {
  margin-top: 20px;
}

.block-spaceL {
  margin-top: 30px;
}

.block_inner {
  padding: 10px 20px 20px;
}

.block-border {
  background: #fff;
  border: 1px solid #ccc;
}

/* センター寄せ*/

.block-positionCenter {
  text-align: center;
}

/* blockの左、右置き指定 */

.block_left {
  float: left;
}

/* block_leftの間隔調整 */

.block_left-spaceS {
  margin-left: 10px;
}

.block_left-spaceM {
  margin-left: 20px;
}

.block_left-spaceL {
  margin-left: 30px;
}

.block_right {
  float: right;
}

/* block_leftの間隔調整 */

.block_right-spaceS {
  margin-right: 10px;
}

.block_right-spaceM {
  margin-right: 20px;
}

.block_right-spaceL {
  margin-right: 30px;
}

/*---------------------------------- textBox ----------------------------------*/

.textBox {
  width: 100%;
}

.textBox-spaceXS,
.textBox_text-spaceXS {
  margin-top: 5px;
}

.textBox-spaceS,
.textBox_text-spaceS {
  margin-top: 10px;
}

.textBox-spaceM,
.textBox_text-spaceM {
  margin-top: 20px;
}

.textBox-spaceL,
.textBox_text-spaceL {
  margin-top: 30px;
}

.textBox_text {
  font-size: 1.4rem;
  line-height: 1.75;
  text-align: justify;
}

.textBox_text-sizeM {
  font-size: 1.8rem;
}

/* 赤 */

.textBox_text-color1 {
  color: #f00;
}

/* 青 */

.textBox_text-color2 {
  color: #2293ea;
}

/* 緑 */

.textBox_text-color3 {
  color: #5cb85c;
}

/* オレンジ */

.textBox_text-color4 {
  color: #ff9a2d;
}

.textBox_text-bold {
  font-weight: bold;
}

.textBox_text-borderBottom {
  border-bottom: 1px solid #fff;
}

/* テキスト文字にリストスタイルを適用 */

.textBox_text-listStyle {
  list-style-type: disclosure-closed;
  margin-left: 15px;
}

.textBox_text-positionCenter {
  text-align: center;
}

.textBox_text-positionRight {
  text-align: right;
}

/* block内で使用するinput select etc */

.textBox_text_input {
  width: 100%;
  padding: 6px 3px 7px;
}

.textBox_text_item {
  line-height: 1.5;
  margin: 0 0 6px 20px;
  list-style-type: disc;
}

/*---------------------------------- btn ----------------------------------*/

/* btn(デフォルトカラー：赤) */

.btn,
.btn button {
  width: 100px;
  text-align: center;
  transition: all 0.5s;
}

/* btnのサイズ */

.btn-sizeXXS {
  width: 35px;
}

.btn-sizeXS,
.btn-sizeXS button {
  width: 50px;
}

.btn-sizeS,
.btn-sizeS button {
  width: 70px;
}

.btn-sizeM,
.btn-sizeM button {
  width: 130px;
}

.btn-sizeL,
.btn-sizeL button {
  width: 170px;
}

.btn-size2L,
.btn-size2L button {
  width: 190px;
}

/* ボタンを真ん中に寄せる */

.btn-positionAuto {
  margin: 0 auto;
}

/* btnの間隔調整 */

.btn-spaceXS {
  margin-top: 5px;
}

.btn-spaceS {
  margin-top: 10px;
}

.btn-spaceM {
  margin-top: 20px;
}

.btn-leftSpaceS {
  margin-left: 10px;
}

.btn-leftSpaceM {
  margin-left: 20px;
}

.btn-leftSpaceL {
  margin-left: 30px;
}

.btn-leftSpace2L {
  margin-left: 100px;
}

/* btn横並べにする場合 */

.btn-inline {
  display: inline-block;
}

.btn_link {
  color: #fff;
  padding: 7px 8px 9px;
  display: block;
  background: #f13757;
  text-decoration: none;
  border: 1px solid #f13757;
  border-radius: 3px;
  transition: all 0.5s;
}

.btn_link-sizeS {
  padding: 5px;
}

/* btn(input ver)の調整 */

.btn-button .btn_link {
  width: 100%;
  padding: 6px 8px;
}

/* ブルー */

.btn-color1 .btn_link {
  background: #2293ea;
  border: 1px solid #2293ea;
}

/* オレンジ */

.btn-color2 .btn_link {
  background: #ff9a2d;
  border: 1px solid #ff9a2d;
}

/* グリーン */

.btn-color3 .btn_link {
  background: #5cb85c;
  border: 1px solid #5cb85c;
}

/* グレー */

.btn-color4 .btn_link {
  background: #a5a4a4;
  border: 1px solid #a5a4a4;
}

/* ダークグレー */

.btn-color5 .btn_link {
  background: #676565;
  border: 1px solid #676565;
}

/* 薄いグレー */

.btn-color6 .btn_link {
  background: #cbcbcb;
  border: 1px solid #cbcbcb;
}

/* パープル */

.btn-color7 .btn_link {
  background: #9370b6;
  border: 1px solid #9370b6;
}

/* btnのホバー */

.btn_link:hover,
.btn_link:focus {
  color: #f13757;
  background: #fff;
  transition: all 0.4s;
}

/* ブルー */

.btn-color1 .btn_link:hover,
.btn-color1 .btn_link:focus {
  color: #2293ea;
}

/* オレンジ */

.btn-color2 .btn_link:hover,
.btn-color2 .btn_link:focus {
  color: #ff9a2d;
}

/* グリーン */

.btn-color3 .btn_link:hover,
.btn-color3 .btn_link:focus {
  color: #5cb85c;
}

/* グレー */

.btn-color4 .btn_link:hover,
.btn-color4 .btn_link:focus {
  color: #a5a4a4;
}

/* ダークグレー */

.btn-color5 .btn_link:hover,
.btn-color5 .btn_link:focus {
  color: #676565;
}

/* ダークグレー */

.btn-color7 .btn_link:hover,
.btn-color7 .btn_link:focus {
  color: #9370b6;
}

/* btnの非活性 */

.btn-disable:hover,
.btn-disable .btn_link:hover {
  color: #fff;
  background: #cbcbcb;
}

/* iconデフォルト設定 */

.btn_link-icon:before {
  width: 2.16rem;
  font-weight: 900;
  font-size: 1.8rem;
  font-style: normal;
  text-align: center;
  line-height: 0.75rem;
  font-variant: normal;
  text-rendering: auto;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: -0.3rem;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
}

/* 登録、編集 */

.btn_link-iconPen:before {
  content: "\f304";
}

/* 確認 */

.btn_link-iconCheck:before {
  content: "\f00c";
}

/* 削除 */

.btn_link-iconDelete:before {
  content: "\f2ed";
}

/* 戻る */

.btn_link-iconBack:before {
  content: "\f30a";
}

/* 進む */

.btn_link-iconMoveOn:before {
  content: "\f30b";
}

/* 閉じる */

.btn_link-iconClose:before {
  content: "\f00d";
}

/* 検索 */

.btn_link-iconSearch:before {
  content: "\f002";
}

/* クリア */

.btn_link-iconClear:before {
  content: "\f00d";
}

/* ダウンロード */

.btn_link-iconDownload:before {
  content: "\f019";
}

/* アップロード */

.btn_link-iconUpload:before {
  content: "\f093";
}

/* 印刷 */

.btn_link-iconPrint:before {
  content: "\f02f";
}

/* 送信 */

.btn_link-iconSend:before {
  content: "\f1d8";
}

/* pdf */

.btn_link-iconPdf:before {
  content: "\f1c1";
}

/* ファイル */

.btn_link-iconFile:before {
  content: "\f07c";
}

/* 画像 */

.btn_link-iconImg:before {
  content: "\f03e";
}

/* MAP */

.btn_link-iconMap:before {
  content: "\f3c5";
}

/* ログイン */

.btn_link-iconLogin:before {
  content: "\f2f6";
}

/* 請求書 */

.btn_link-iconInvoice:before {
  content: "\f15c";
  vertical-align: -0.3rem;
}

/* 保存 */

.btn_link-iconSave:before {
  content: "\f0c7";
}

/* プラス */

.btn_link-iconPlus:before {
  content: "\f067";
}

/* 注意 */

.btn_link-iconNote:before {
  content: "\f071";
}

/*---------------------------------- iconBtn ----------------------------------*/

.iconBtn .fas {
  color: #f13757;
  transition: all 0.4s;
}

/* ブルー */

.iconBtn-color1 .fas {
  color: #2293ea;
}

/* オレンジ */

.iconBtn-color2 .fas {
  color: #ff9a2d;
}

/* グリーン */

.iconBtn-color3 .fas {
  color: #5cb85c;
}

/* グレー */

.iconBtn-color4 .fas,
.iconBtn-color6 .fas {
  color: #a5a4a4;
}

/* ダークグレー */

.iconBtn-color5 .fas {
  color: #676565;
}

/* btnのホバー */

.iconBtn .fas:hover {
  color: #d70f30;
  transition: all 0.4s;
}

/* ブルー */

.iconBtn-color1 .fas:hover {
  color: #147fd2;
}

/* オレンジ */

.iconBtn-color2 .fas:hover,
.iconBtn-color6 .fas:hover {
  color: #ffa94d;
}

/* グリーン */

.iconBtn-color3 .fas:hover {
  color: #46a046;
}

/* グレー */

.iconBtn-color4 .fas:hover {
  color: #676565;
}

/* ダークグレー */

.iconBtn-color5 .fas:hover {
  color: #cbcbcb;
}

/*--------------------------------- pager -----------------------------------*/

.pager {
  width: 100%;
  text-align: center;
}

.pager-spaceS {
  margin-top: 10px;
}

.pager-spaceM {
  margin-top: 20px;
}

.pager-spaceL {
  margin-top: 30px;
}

.pager_list {
  height: 35px;
  padding: 0 8px;
  border-radius: 35px;
  display: inline-block;
  background-color: #eee;
  box-shadow: 0 0 1px 1px #ccc, 1px 1px 1px 0 #b3b3b3;
}

.pager_item {
  float: left;
  font-size: 1.3rem;
}

.pager_item a {
  display: block;
  color: #595959;
  padding: 0 20px;
  line-height: 35px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 400ms ease;
}

.page_item_num,
.pager_item_prevNone,
.pager_item_nextNone {
  display: block;
  color: #595959;
  padding: 0 20px;
  line-height: 35px;
  letter-spacing: 0.1em;
  transition: 400ms ease;
}

.page_item_num:hover,
.page_item_num.current {
  color: #fff;
  background-color: #5cb85c;
}

.page_item_num.prev:hover,
.page_item_num.next:hover {
  color: #5cb85c;
  background-color: transparent;
}

.pager_item_prevNone,
.pager_item_nextNone {
  color: #ccc;
}

.pager_item-period .page_item_num:hover {
  color: #595959;
  background-color: #eee;
}

/*+++++++++++++++++++++++++++++++++ login ++++++++++++++++++++++++++++++++++*/

/* loginページで使用 */

.login_body {
  min-width: 100%;
}

.login {
  width: 100%;
}

/* ロゴ,ログインテキスト */

.login_outSide {
  text-align: center;
}

.login_outSide_logo {
  margin-bottom: 20px;
}

.login_outSide_text {
  color: #F04853;
  font-size: 3.2rem;
  margin-bottom: 30px;
}

.login_error {
  color: #f00;
  text-align: center;
  margin-bottom: 10px;
}

/* ログインbox */

.login_box {
  text-align: left;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #dedede;
}

.login_box-small {
  width: 400px;
  margin: 0 auto;
}

.login_box_inner {
  padding: 15px 32px 30px;
}

.login_box_innerItem {
  width: 100%;
  margin-bottom: 30px;
}

.login_box_innerItem dt {
  margin-bottom: 5px;
}

.login_box_innerItem input {
  width: 95%;
  padding: 8px 5px;
  border: 1px solid #e5e5e5;
}

/* ログインbtn */

.login_box_innerBtn {
  font-weight: bold;
  text-align: center;
}

.login_box_innerBtn input {
  width: 100%;
  color: #fff;
  cursor: pointer;
  border: 0 solid;
  padding: 15px 0;
  font-weight: bold;
  background: #3577b4;
  border-radius: 4px;
}

/* ログインbtnの色変更&ホバー色 */

.login_box_innerBtn input:hover {
  background: #2e689e;
  transition: all 0.6s;
}

/*+++++++++++++++++++++++++++++++++ error ++++++++++++++++++++++++++++++++++*/

.error {
  color: #f00;
}

/*---------------------------- 403 / 404 / 500 error -------------------------*/

.codeBox {
  left: 0;
  right: 0;
  top: 40%;
  position: absolute;
  transform: translateY(-50%);
}

.codeBox_title {
  font-size: 7.2rem;
  text-align: center;
}

.codeBox_text {
  font-size: 3.2rem;
  text-align: center;
  margin-top: 20px;
}

/*+++++++++++++++++++++++++++++++++ modal ++++++++++++++++++++++++++++++++++*/

/* モーダルウィンドウ */

.overlay {
  display: none;
}

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  z-index: 100;
}

.overlay-1,
.overlay-2 {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal_box {
  position: absolute;
  top: 80px;
  left: 30%;
}

.modal_box-position1 {
  position: absolute;
  top: 200px;
  left: 39%;
}

.modal_box {
  display: none;
}

.popBox {
  display: none;
}

/*---------------------------- disabled -------------------------*/

:disabled {
  background-color: #ddd;
}

/*---------------------------- input -------------------------*/

.input {
  width: 100%;
  padding: 3px 3px 4px;
}

/* input type="text"の幅調整 */

.input-size05 {
  width: 5%;
}

.input-size1 {
  width: 10%;
}

.input-size1half {
  width: 15%;
}

.input-size2 {
  width: 20%;
}

.input-size2half {
  width: 25%;
}

.input-size3 {
  width: 30%;
}

.input-size3half {
  width: 35%;
}

.input-size4 {
  width: 40%;
}

.input-size4half {
  width: 45%;
}

.input-size5 {
  width: 50%;
}

.input-size5half {
  width: 55%;
}

.input-size6 {
  width: 60%;
}

.input-size6half {
  width: 65%;
}

.input-size7 {
  width: 70%;
}

.input-size7half {
  width: 75%;
}

.input-size8 {
  width: 80%;
}

.input-size8half {
  width: 85%;
}

.input-size9 {
  width: 90%;
}

.input-size9half {
  width: 95%;
}

/* input type="text"のmarginLeft指定 */

.input-marginLeft {
  margin-left: 10px;
}

/* inputの値を中央寄せにする */

.input-positionCenter {
  text-align: center;
}

/* input type="text"の空間調整 */

.input-spaceS {
  margin-top: 10px;
}

.input-spaceM {
  margin-top: 20px;
}

.input-spaceL {
  margin-top: 30px;
}

/*---------------------------- select -------------------------*/

.select {
  width: 100%;
  padding: 2px 2px 3px;
}

/* selectの幅調整 */

.select-size05 {
  width: 5%;
}

.select-size07 {
  width: 7%;
}

.select-size08 {
  width: 8%;
}

.select-size09 {
  width: 9%;
}

.select-size1 {
  width: 10%;
}

.select-size1half {
  width: 15%;
}

.select-size2 {
  width: 20%;
}

.select-size2half {
  width: 25%;
}

.select-size3 {
  width: 30%;
}

.select-size3half {
  width: 35%;
}

.select-size4 {
  width: 40%;
}

.select-size4half {
  width: 45%;
}

.select-size5 {
  width: 50%;
}

.select-size5half {
  width: 55%;
}

.select-size6 {
  width: 60%;
}

.select-size6half {
  width: 65%;
}

.select-size7 {
  width: 70%;
}

.select-size8 {
  width: 80%;
}

/* selectの間隔調整 */

.select-spaceS {
  margin-top: 10px;
}

.select-spaceM {
  margin-top: 20px;
}

.select-spaceL {
  margin-top: 30px;
}

/*---------------------------- textArea -------------------------*/

.textArea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  padding: 3px 3px 4px;
  vertical-align: middle;
}

.textArea-small {
  min-height: 60px;
}

.textArea-midium {
  min-height: 80px;
}

.textArea-large {
  min-height: 120px;
}

.textArea:disabled {
  width: 100%;
  background-color: #fff;
}

/* リサイズ機能の停止 */

.textArea-resize {
  resize: none;
}

/*---------------------------- radio -------------------------*/

/* 四角タイプのラジオボタン */

.radioBox {
  width: 100%;
}

.radioBox_list {
  list-style: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  border: solid 1px #ddd;
}

.radioBox_list_label {
  display: block;
  min-width: 4em;
  text-align: center;
  padding: 4px 6px 6px;
  border: solid 1px rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: #eee;
  background: -moz-linear-gradient(top, #fff, #eee);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
  transition: all 0.4s;
}

.radioBox_list_label-small {
  min-width: 2em;
}

.radioBox_list input[type=radio] {
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
}

.radioBox_list input[type=radio]:checked {
  cursor: auto;
}

.radioBox_list input[type=radio]:checked + label {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.radioBox_list input[type=radio]:checked + label {
  background: #0070c0;
  background: -moz-linear-gradient(top, #0070c0, #0086cd);
  background: -webkit-gradient(linear, left top, left bottom, from(#0086cd), to(#0070c0));
  transition: all 0.4s;
}

.radioBox_list input[type=radio]:focus {
  background: #f53b57;
  background: -moz-linear-gradient(top, #f53b57, #cc001f);
  background: -webkit-gradient(linear, left top, left bottom, from(#cc001f), to(#f53b57));
}

.radioBox_list input[type=radio]:focus + label {
  background: #f53b57;
  background: -moz-linear-gradient(top, #f53b57, #cc001f);
  background: -webkit-gradient(linear, left top, left bottom, from(#cc001f), to(#f53b57));
}

@media screen and (max-width: 1599px) {
  .radioBox_list_label {
    min-width: 3em;
  }
}

/* サークルタイプのラジオボタン */

.radioCircle {
  cursor: pointer;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  display: inline-block;
  -webkit-user-select: none;
}

.radioCircle:not(:first-child) {
  margin-left: 10px;
}

.radioCircle .radioCircle_input,
.table-form .radioCircle .radioCircle_input {
  width: 1px;
  height: 1px;
  padding: 0;
  border: none;
  display: none;
}

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

  .radioCircle:not(:first-child) {
    margin-left: 0;
    margin-top: 15px;
  }
}

.radioCircle_input:checked + .radioCircle_svg path {
  transition: all 0.4s ease;
}

.radioCircle_input:checked + .radioCircle_svg path.radioCircle_svg_inner {
  stroke-dashoffset: 38;
  transition-delay: 0.3s;
}

.radioCircle_input:checked + .radioCircle_svg path.radioCircle_svg_outer {
  stroke-dashoffset: 0;
}

.radioCircle_svg {
  fill: none;
  vertical-align: middle;
}

.radioCircle_svg_circle {
  stroke-width: 2;
  stroke: #C8CCD4;
}

.radioCircle_svg path {
  stroke: #008FFF;
}

.radioCircle_svg path.radioCircle_svg_inner {
  stroke-width: 6;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
}

.radioCircle_svg path.radioCircle_svg_outer {
  stroke-width: 2;
  stroke-dasharray: 57;
  stroke-dashoffset: 57;
}

.radioCircle span {
  display: inline-block;
  vertical-align: middle;
}

/* ラジオボタンにフォーカス */

.radioCircle_input:focus ~ span {
  color: #f13757;
}

/*---------------------------- checkBox -------------------------*/

/* 四角タイプのチェックボックス */

.checkbox,
.table-form .table_data .checkbox {
  padding: 0;
  width: 1px;
  height: 1px;
  display: none;
  border-bottom: none;
}

.checkbox_label {
  margin: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  cursor: pointer;
}

.checkbox_label span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox_label span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 2px solid #C8CCD4;
  transition: all 0.2s ease;
}

.checkbox_label span:first-child svg {
  position: absolute;
  top: 4px;
  left: 3px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.checkbox_label span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506EEC;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}

.checkbox_label:hover span:first-child {
  border-color: #C8CCD4;
}

.checkbox:checked + .checkbox_label span:first-child {
  background: #3e73af;
  border-color: #3e73af;
  -webkit-animation: wave 0.4s ease;
          animation: wave 0.4s ease;
}

.checkbox:checked + .checkbox_label span:first-child svg {
  stroke-dashoffset: 0;
}

.checkbox:checked + .checkbox_label span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@-webkit-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

/*---------------------------------- step ----------------------------------*/

.step {
  margin: 0;
  padding: 0;
  z-index: 0;
  width: 300px;
  position: relative;
  margin: 10px auto 0;
  counter-reset: step;
}

.step-sizeM {
  width: 500px;
}

.step-sizeL {
  width: 600px;
}

.step_item {
  color: #333;
  float: left;
  width: 100px;
  font-size: 1.2rem;
  position: relative;
  text-align: center;
}

.step_item-sizeM {
  width: 120px;
}

.step_item:before {
  width: 30px;
  height: 30px;
  display: block;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background-color: #eee;
  content: counter(step);
  counter-increment: step;
  margin: 0 auto 10px auto;
}

.step_item:after {
  top: 5px;
  left: -50%;
  z-index: -1;
  color: #aaa;
  width: 100%;
  content: '';
  font-weight: 900;
  content: "\f101";
  font-size: 1.8rem;
  position: absolute;
  font-family: "Font Awesome 5 Free";
}

.step_item:first-child:after {
  content: none;
}

.step_item-active:before {
  background-color: #2293ea;
  color: #fff;
}

.step_item-active + .step_item:after {
  color: #2293ea;
}

.step_item .fas {
  color: #5cb85c;
  margin-right: 5px;
}

/*---------------------------------- form Icon ----------------------------------*/

.iconBox {
  position: relative;
}

.iconBox .input {
  padding-left: 30px;
}

.iconBox_item {
  top: 9px;
  left: 5px;
  color: #dbdbdb;
  position: absolute;
}

.login_box_innerItem .iconBox input:focus,
.iconBox input:focus {
  border-color: #f1a510;
  transition: all 0.5s;
}

.login_box_innerItem .iconBox input:focus ~ .iconBox_item,
.iconBox input:focus ~ .iconBox_item {
  color: #333;
  transition: all 0.5s;
}

/*---------------------------------- 必須アイコン ----------------------------------*/

.fa-asterisk {
  float: right;
  color: #f53b57;
  margin-top: 3px;
}

/*---------------------------------- 背景色 ----------------------------------*/

#canvas {
  width: 100%;
  height: 100vh;
  position: relative;
  height: calc(100% - 0px);
}

/******************************* レスポンシブ対応 ************************************
 iPad仕様(iPad Pro11まで対応)
外枠：1194px
******************************* / レスポンシブ対応 **********************************/

@media screen and (max-width: 1194px) {
  /*------ header ------*/

  /* pc用のメニュー非表示 */

  .header_menu {
    display: none;
  }

  .header_logo {
    margin-left: 0;
  }

  /* タブレット用のメニュー表示 */

  .header_slideMenu {
    float: left;
    z-index: 100;
    min-width: 19px;
    cursor: pointer;
    display: inline-block;
    padding: 12px 0 12px 12px;
  }

  .header_slideMenu:before {
    color: #fff;
    content: "\f0c9";
    font-weight: 900;
    font-size: 1.8rem;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    transition: all 0.5s;
  }

  .header_slideMenu.active:before {
    content: "\f00d";
    transition: all 0.5s;
  }

  .contentOverlay {
    left: 0;
    width: 0;
    height: 0;
    z-index: 3;
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity .5s;
  }

  .contentOverlay.active {
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  /*------ side ------*/

  .side {
    left: 0;
    top: 46px;
    z-index: 10;
    position: fixed;
    transform: translate(-250px);
    transition: all .5s;
  }

  .side.open {
    transform: translateZ(0);
  }

  /*------ b_contents ------*/

  .b_contents,
  .b_contents.active {
    margin-left: 0;
  }
}

/*---------------------------------- 採点結果 ----------------------------------*/

.problemBox {
  width: 100%;
}

.problemBox-spaceTopSizeS {
  margin-top: 20px;
}

.problemBox-spaceTopSizeM {
  margin-top: 70px;
}

.problemBox_title {
  padding: 10px 20px;
  background: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2.5rem;
}

.problemBox_answer_bar {
  padding-top: 10px;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 20px 0 10px;
  border-top: 3px solid #3577b4;
}

.problemBox_answer_text {
  width: 100%;
  height: 250px;
  resize: vertical;
  padding: 10px;
  background: #eee;
}

.problemBox .container {
  width: 100px;
}

.problemBox .radio {
  margin-top: 20px;
  cursor: pointer;
}

.problemBox .radio:first-child {
  margin-top: 0px;
}

.problemBox .radio input[type=radio] {
  position: absolute;
  opacity: 0;
}

.problemBox .radio input[type=radio] + .radio-label {
  cursor: pointer;
}

.problemBox .radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.problemBox .radio input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.problemBox .radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}

.problemBox .radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}

.problemBox .radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

/*---------------------------------- スキルチェック ----------------------------------*/

.skill {
  font-family: source sans pro,helvetica neue,Helvetica,Arial,sans-serif;
  font-weight: normal;
}

.skill_title {
  padding: 10px 0;
  font-weight: bold;
  font-size: 3.0rem;
}

.skill_subTitle {
  padding: 10px 0;
  font-weight: bold;
  font-size: 2.4rem;
}

.skill_text {
  margin-top: 10px;
  line-height: 3.5rem;
  margin-bottom: 20px;
}

.skill_list {
  width: 100%;
  margin-top: 10px;
}

.skill_list_item {
  line-height: 1.5;
  margin: 0 0 6px 15px;
  list-style-type: disc;
}

blockquote {
  margin: 0;
}

blockquote p {
  padding-top: 10px;
  font-style: italic;
  padding: 5px 10px 10px;
  border-left: 3px solid #a0aabf;
}

.skill_text-bgColor {
  padding: 15px;
  background: #d3daea;
}