/*------------------------------------------------------------------------------
||  PSC_HP共通スタイルシート
||  UPDATE  :   2016/05/28
||              2022/02
||                  新ロゴに合わせてヘッダー、ベースカラー等を変更
||                  前景色、背景色変更
||                      #08e    →   #004ea2
||                      #06c    →   #004ea2
||                      #09f    →   #00b6ec
------------------------------------------------------------------------------*/
/* background: -moz-linear-gradient(left top, #f8f8f8 0%, #d0d0ff 100%); /*FF3.6+*/
/* background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f8f8f8), color-stop(100%, #d0d0ff)); /*Chrome,Safari4+*/
/* background: -webkit-linear-gradient(left top, #f8f8f8 0%, #d0d0ff 100%); /*Chrome10+,Safari5.1+*/
/* background: -o-linear-gradient(left top, #f8f8f8 0%, #d0d0ff 100%); /*Opera 11.10+*/
/* background: linear-gradient(to right bottom, #f8f8f8 0%, #d0d0ff 100%); /*W3C*/

/*------------------------------------------------------------------------------
文字コード指定
------------------------------------------------------------------------------*/
@charset "utf-8";

/*------------------------------------------------------------------------------
ブラウザリセット
------------------------------------------------------------------------------*/
* {
    /* ブラウザや要素ごとにバラバラなmarginとpaddingを統一 */
    margin: 0;
    padding: 0;
    /*
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    */
    box-sizing: border-box;
}
a {
    /* テキストの下線・上線・打ち消し線・点滅：なし（本来の初期値） */
    text-decoration: underline;
}
ul, ol {
    /* 先頭の「・」や数字を無くす */
    list-style-type: none;
    list-style-image: none;
}
img {
    /* 縦方向の揃え位置：中央揃え */
    vertical-align: middle;
    max-width: 100%;
}
:focus {
    outline: 0;
}
address {
    font-style: normal;
}
/*------------------------------------------------------------------------------
ベーススタイル
------------------------------------------------------------------------------*/
html {
    /*
    font-family: sans-serif;
    */
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", verdana, Sans-Serif;
    font-size: 80%;
    line-height: 2;
    color: #222;
}
a {
    color: #222;
}
/*------------------------------------------------------------------------------
フルードイメージ
------------------------------------------------------------------------------*/
.fluid-img {
    /*ブラウザのサイズ変更に連動して拡大縮小させる*/
    max-width: 80%;
}
/*------------------------------------------------------------------------------
ラッパー
------------------------------------------------------------------------------*/
.l-wrap-area {
    max-width: 1880px;
    margin: 0 auto;
}
/*------------------------------------------------------------------------------
ヘッダー
------------------------------------------------------------------------------*/
.header-area {
    background: #fff;
    border-bottom: solid 1px #004ea2;
}
.l-header-area {
    /*202202 upd
    height: 4em;
    */
    height: 6.5em;
}
.l-header {
    position: relative;
}
/*----------------------------------------------------------社名*/
.l-cname-area {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 420px;
    height: 6.5em;
}
.l-clogo {
    clear: both;
    height: 100%;
    padding: 3px;
}
.cname-link {
    color: #111;
    width: 100%;
}
.cname-link:hover, .l-outer-kaisha-joho a:hover, .l-outer-saiyo a:hover, .l-outer-saikoyo a:hover {
    color: #00b6ec;
}
/*----------------------------------------------------------ヘッダーメニュー*/
.l-hmenu-area {
    text-align: center;
    margin-left: 420px;
    font-weight: bold;
}
.l-hmenu-link-area {
    width: 100%;
    margin-bottom: 0;
}
.l-hmenu-item {
    width: 25%;
    /*202202 upd
    height: 4em;
    */
    height: 6.5em;
    border-right: solid 1px #fff;
    float: left;
    background: #004ea2;
}
.l-hmenu-link {
    display: block;
    /*202202 upd
    padding: 12px 0;
    */
    padding: 2.25em 0;
}
.hmenu-link {
    color: #eee;
}
.hmenu-link:hover, .hmenu-link-on {
    color: #fff;
}
/*202202 upd
.l-hmenu-item:hover, .l-hmenu-item-on, .l-cname-area:hover {
*/
.l-hmenu-item:hover, .l-hmenu-item-on {
    background: #00b6ec;
}
/*------------------------------------------------------------------------------
インフォナビ・バー
------------------------------------------------------------------------------*/
.info-area {
    color: #999;
}
.l-info-area {
    position: static;
    display: block;
    float: none;
    margin-bottom: 8px;
}
.l-info {
    margin-left: 0.8%;
}
.info-link {
    color: #999;
}
.info-link:hover {
    color: #000;
}
/*------------------------------------------------------------------------------
コンテナー
------------------------------------------------------------------------------*/
.l-ctnr-area {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid transparent;  /* これがあるとサイズを確保がしやすい */
}
/*------------------------------------------------------------------------------
左部バー
------------------------------------------------------------------------------*/
.l-lbar-btn-area {
    position: relative;
    float: left;
    display: none;
}
.l-lbar-btn {
    display: none;
}
.l-lbar-area {
    /*
    width: 20%;
    */
    display: block;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    /*
    margin-right: 0.8%;
    padding: 1px 1px 0;
    background: rgba(96,96,96,0.5);
    */
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
}
.l-lbar-title {
    display: relative;
    margin: 0;
}
.l-lbar-link-area {
    clear: both;
}
.l-lbar-title-link {
    display: block;
    font-size: 120%;
    /*W3C*/
    background: linear-gradient(to left, #00b6ec 0%, #004ea2 100%);
    color: #eee;
    padding : 0.5em 0;
    /*
    border-radius: 3px;
    margin: 2px;
    border: 2px solid transparent;
    */
    border: 2px solid rgba(192,192,192,0.5);
}
.l-lbar-title-link:hover {
    color: #fff;
}
.l-lbar-link:hover,
.lbar-link-on {
    color: #00b6ec;
}
.l-lbar-item {
    margin: 0;
}
.l-lbar-link-grp {
    position: relative;
    width: 100%;
}
.l-lbar-link,
.l-lbar-guide {
    display: block;
    /*
    border-radius: 3px;
    margin: 0 2px;
    */
    border-right: 2px solid rgba(96,96,96,0.5);
    border-bottom: 2px solid rgba(96,96,96,0.5);
    border-left: 2px solid rgba(96,96,96,0.5);
    padding : 0.5em 0;
    /*
    background-color: #f2f2f2;
    */
    background-color: rgba(242,242,242,0.9);
    color: #222;
}
.l-lbar-link-sub {
    background-color: rgba(224,240,255,0.9);
}
#lbsub1, #lbsub2, #lbsub3 {
/*    position: absolute; */
    display: none;
    /*
    background: rgba(96,96,96,0.5);
    */
    border-radius: 3px;
}
/*
#lbsub1, #lbsub2, #lbsub3 {
    animation-name: slidein;
    animation-duration: 1s;
}
@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
}
@keyframes slideout {
    from {
      margin-left: 0%;
      width: 300%
    }
    to {
      margin-left: 100%;
      width: 100%;
    }
}
*/

.l-lbar-title-btn,
.l-lbar-link-btn {
    position: absolute;
    left: 160px;
    width: 2.5em;
    height: 2.5em;
    font-size: 120%;
    border: 1px solid transparent;
}
.l-lbar-title-btn { /* l-lbar-title に従属 */
    top: 0.4em;
}
.l-lbar-link-btn { /* l-lbar-link に従属 */
    top: 0em;
}

.l-lbar-title-btn-mark,
.l-lbar-link-btn-mark {
    position: absolute;
    top: 0.9em;
    left: 0.7em;
    width: 1em;
    border-right: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
}
.l-lbar-title-btn-mark {
    border-top: 0 solid #eee;
    border-bottom: 0 solid #eee;
}
.l-lbar-title-btn-mark:hover {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.l-lbar-link-btn-mark {
    border-top: 0 solid #777;
    border-bottom: 0 solid #777;
}
.l-lbar-link-btn-mark:hover {
    border-top-color: #00b6ec;
    border-bottom-color: #00b6ec;
}
.l-lbmark1,
.l-lbmark2,
.l-lbmark3 {
    border-top-width: 0.6em;
    border-bottom-width: 0;
}
/*------------------------------------------------------------------------------
コンテンツ・レイアウト枠
------------------------------------------------------------------------------*/
.l-cont-area {
    clear: both;
    /*
    width: 80%;
    margin-left: 20%;
    */
    margin-left: 200px;
    top: 0;
    left: 0;
    border: 1px solid transparent;  /* これがあるとサイズを確保がしやすい */
}
.l-cont-left, .l-cont-l {
    text-align: left;
    clear: both;
    margin-bottom: 16px;
    border: 1px solid transparent;  /* これがあるとサイズを確保がしやすい */
}
.l-cont-left65 {
    width: 65%;
    float: left;
}
.l-cont-center, .l-cont-c {
    text-align: center;
    clear: both;
    margin-bottom: 16px;
    border: 1px solid transparent;  /* これがあるとサイズを確保がしやすい */
}
.l-cont-right, .l-cont-r {
    text-align: right;
    clear: both;
    margin-bottom: 16px;
    border: 1px solid transparent;  /* これがあるとサイズを確保がしやすい */
}
.l-cont-sub-all, .l-cont-sub-a {
    padding: 0 0 0 16px;
    clear: both;
}
.l-cont-sub-left, .l-cont-sub-l {
    padding: 0 4px 0 16px;
    float: left;
}
.l-cont-sub-right, .l-cont-sub-r {
    padding: 0 0 0 4px;
    float: right;
}
.l-cont-fl {
    float: left;
}
.l-cont-fr {
    float: right;
}
/*------------------------------------------------------------------------------
イメージ
------------------------------------------------------------------------------*/
.top-img {
    width: 100%;
    padding-right: 1.6%;
    margin-bottom: 16px;
}
/*------------------------------------------------------------------------------
幅
------------------------------------------------------------------------------*/
.l-cont-w35 {width: 34%;}
.l-cont-w65 {width: 65%;}
.l-cont-w70 {width: 70%;}
.l-cont-w80 {width: 80%;}
.l-cont-w90 {width: 90%;}
/*------------------------------------------------------------------------------
マージン
------------------------------------------------------------------------------*/
.l-cont-margin24   {margin: 24px 2.4%;}
.l-cont-margin24-t {margin-top: 24px;}
.l-cont-margin24-b {margin-bottom: 24px;}
.l-cont-margin24-l {margin-left: 2.4%;}
.l-cont-margin36   {margin: 36px 3.6%;}
.l-cont-margin36-t {margin-top: 36px;}
.l-cont-margin48-t {margin-top: 48px;}
/*------------------------------------------------------------------------------
横位置
------------------------------------------------------------------------------*/
.l-cont-align-c {
    margin-left: auto;
    margin-right: auto;
}
.l-cont-posl, .l-posl {
    text-align: left;
}
.l-cont-posc, .l-posc {
    text-align: center;
}
.l-cont-posr, .l-posr {
    text-align: right;
}
/*------------------------------------------------------------------------------
段落
------------------------------------------------------------------------------*/
.l-paragraph {
    padding-bottom: 1em;
}
/*------------------------------------------------------------------------------
Information(Content Header)
------------------------------------------------------------------------------*/
.l-cont-info-area {
    clear: both;
    margin: 24px auto;
}
.l-cont-info {
    height: 2em;
    padding: auto 3%;
    border-radius: 3px;
    /*W3C*/
    background: linear-gradient(to right, #00b6ec 0%, #004ea2 100%);
    color: #fff;
    font-weight: bold;
}
.l-cont-info-mark {
    display: inline-block;
    margin: auto 0.5em;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    /*
    */
}
/*------------------------------------------------------------------------------
リンク関連
------------------------------------------------------------------------------*/
.cont-link:hover, .l-list-info a:hover {
    color: #00b6ec;
}
/*------------------------------------------------------------------------------
求人：外部リンク
------------------------------------------------------------------------------*/
.l-kyujin-link-area {
    margin: 1em;
    padding: 1em;
    width:360px;
    background: rgba(216,216,216,0.5);
    border-radius: 5px;
}
.l-kyujin-link {
    display: inline-block;
    margin-right: 2em;
}
.l-kyujin-link-mynavi {
    padding: 2px 0.2%;
}
.l-kyujin-link-tsunoru {
    padding: 2px 0.2%;
}
/*------------------------------------------------------------------------------
フォント関連
------------------------------------------------------------------------------*/
.l-cont-fb {font-weight: bold;}

.l-height-25, .l-cont-lh25 {line-height: 2.5;}
.l-height-20, .l-cont-lh20 {line-height: 2;}
.l-height-15, .l-cont-lh15 {line-height: 1.5;}

/*------------------------------------------------------------------------------
背景色
------------------------------------------------------------------------------*/
.l-bg-lbar-sub {
    color: inherit;
}
/*----------------------------------------------------------理念*/
.l-radius-rinen {
    clear: both;
    padding: 24px 3.6%;
    margin: 36px auto 0;
    background: linear-gradient(to right bottom, #fff 0%, #eee 100%); /*W3C*/
    border-radius: 10px;
    width: 90%;
}
.l-bg-rinen {
    background: linear-gradient(to right bottom, #fff 0%, #eee 100%); /*W3C*/
}
/*------------------------------------------------------------------------------
表レイアウト
------------------------------------------------------------------------------*/
/*----------------------------------------------------------会社情報*/
.l-outer-kaisha-joho {
    display: table;
    width: 90%;
    margin: 48px auto;
}
.l-inner-kaisha-joho {
    display: table-row;
}
.l-cols-kaisha-joho-head,
.l-cols-kaisha-joho-data {
    display: table-cell;
    padding: 1em 20px;
    border-bottom: 1px solid #f6f6f6;
}
.l-cols-kaisha-joho-head {
    vertical-align: middle;
    width: 25%;
    text-align: center;
    font-weight: bold;
    /*W3C*/
    background: linear-gradient(to left, #00b6ec 0%, #004ea2 100%);
    color: #fff;
}
.l-cols-kaisha-joho-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------開発実績*/
.l-outer-jisseki {
    display: table;
    margin: 2em 0;
}
.l-inner-jisseki {
    display: table-row;
}
.l-cols-jisseki-head,
.l-cols-jisseki-data {
    display: table-cell;
    padding: 0.5em 1em;
    border-bottom: 1px solid #f6f6f6;
    vertical-align: middle;
}
.l-cols-jisseki-head {
    width: 20%;
    text-align: center;
    color: #fff;
    background: linear-gradient(to left, #3b3 0%, #080 100%); /*W3C*/
    font-weight: bold;
}
.l-cols-jisseki-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------求人情報*/
.l-kyujin-title {
    font-weight: bold;
    border-left: 0.5em solid #a00;
    border-bottom: 1px solid #a00;
    padding-left: 0.5em;
    margin-bottom: 0.5em;
}
.l-outer-kyujin {
    display: table;
    width: 100%;
    margin-bottom: 1.5em;
}
.l-inner-kyujin {
    display: table-row;
}
.l-cols-kyujin-h,
.l-cols-kyujin-d {
    display: table-cell;
    vertical-align: middle;
    border-bottom: 2px solid #f6f6f6;
    padding: 0.5em;
}
.l-cols-kyujin-h {
    width: 20%;
    text-align: center;
    font-weight: bold;
    /*W3C*/
    background: linear-gradient(to left, #00b6ec 0%, #004ea2 100%);
    color: #fff;
}
.l-cols-kyujin-d {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------採用情報*/
.l-outer-saiyo {
    display: table;
    width: 90%;
    margin: 24px auto;
}
.l-inner-saiyo {
    display: table-row;
    line-height: 2.5;
}
.l-cols-saiyo-head,
.l-cols-saiyo-data {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
    border-bottom: 2px solid #f6f6f6;
}
.l-cols-saiyo-head {
    text-align: center;
    width: 20%;
    background: linear-gradient(to left, #3b3 0%, #080 100%); /*W3C*/
    font-weight: bold;
    color: #fff;
}
.l-cols-saiyo-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------配属*/
.l-outer-logic {
    display: table;
}
.l-inner-logic {
    display: table-row;
}
.l-cols-logic-head, .l-cols-logic-data {
    display: table-cell;
    font-weight: bold;
    padding-bottom: 0.5em;
}
.l-cols-logic-head {
    width: 22%;
}
.l-cols-logic-data {
    color: inherit;
}
.l-outer-logic-step {
    display: table;
}
.l-inner-logic-step {
    display: table-row;
}
.l-cols-logic-step-head, .l-cols-logic-step-data {
    display: table-cell;
    padding: 0.5em 1em;
    vertical-align: middle;
    border-bottom: 1px solid #f6f6f6;
}
.l-cols-logic-step-head {
    width: 20%;
    text-align: center;
    background: linear-gradient(to left, #3b3 0%, #080 100%); /*W3C*/
    font-weight: bold;
    color: #fff;
}
.l-cols-logic-step-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------再雇用*/
.l-outer-saikoyo {
    display: table;
    margin: 0 auto;
}
.l-inner-saikoyo {
    display: table-row;
}
.l-cols-saikoyo-head,
.l-cols-saikoyo-data {
    display: table-cell;
    vertical-align: middle;
    padding: 1em 20px;
    border-bottom: 1px solid #f6f6f6;
}
.l-cols-saikoyo-head {
    width: 25%;
    /*W3C*/
    background: linear-gradient(to left, #00b6ec 0%, #004ea2 100%);
    text-align: center;
    font-weight: bold;
    color: #fff;
}
.l-cols-saikoyo-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
/*----------------------------------------------------------クールビズ*/
.l-outer-coolbiz {
    display: table;
    width: 90%;
    margin: 24px auto;
}
.l-inner-coolbiz {
    display: table-row;
}
.l-cols-coolbiz-head,
.l-cols-coolbiz-data {
    display: table-cell;
    border: 1px solid #e6e6e6;
    font-weight: bold;
    padding: 0.3em 0;
    text-align: center;
}
.l-cols-coolbiz-head {
    /*W3C*/
    background: linear-gradient(to left, #00b6ec 0%, #004ea2 100%);
    color: #fff;
    width: 30%;
}
.l-cols-coolbiz-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
}
.l-cols-coolbiz-data span {
    display: inline-block;
}
/*------------------------------------------------------------------------------
角丸枠（幅70% 罫線幅3px）
------------------------------------------------------------------------------*/
.l-radius-range-area {
    clear: both;
    padding: 24px 3%;
    margin: 36px auto 0;
    border-radius: 10px;
    border: 2px solid #f6f6f6;
    width: 90%;
}
.l-rr-header {
    margin-bottom: 1em;
    border-bottom: 1px dotted #4169E1;
}
/*------------------------------------------------------------------------------
アドレス情報
------------------------------------------------------------------------------*/
.l-address-area {
    clear: both;
    width: 90%;
    margin: 8px 0 0;
    padding: 25px 2.5%;
    border-radius: 25px;
    border: solid 3px #e7e7e7;
    line-height: 1.5;
}
.l-address-title {
    font-weight: bold;
}
.l-address-data {
    padding-left: 1em;
}
/*------------------------------------------------------------------------------
リスト
------------------------------------------------------------------------------*/
/*----------------------------------------------------------*/
.l-list-area {
    padding: 0 0 1em 0;
    line-height: 2;
}
.l-list-dec {
    list-style-type: decimal;
    margin-left: 2em;
}
.l-list-dec ul {
    list-style-type: circle;
    margin-left: 1em;
}
/*----------------------------------------------------------*/
.l-list-rinen {
    margin-left: 1em;
    line-height: 1.75;
    font-size: 130%;
    font-weight: bold;
    color: #444;
}
.l-list-rinen li {
    margin-bottom: 1em;
}
.l-list-rinen li:before {
    margin-left: -1em;
    content: '・';
}
/*----------------------------------------------------------*/
.l-kyujin-kyuyo {
    color: inherit;
}
.l-kyujin-kyuyo li {
    padding-left: 1em;
}
.l-kyujin-kyuyo-h {
    display: inline-block;
    width: 13em;
}
.l-kyujin-kyuyo-d {
    display: inline-block;
    /*
    width: 25%;
    text-align: right;
    */
}
/*------------------------------------------------------------------------------
トップ・メッセージ
------------------------------------------------------------------------------*/
.l-top-msg {
    padding-top: 1em;
    line-height: 3;
}
/*------------------------------------------------------------------------------
コラム
------------------------------------------------------------------------------*/
.l-column-area {
    float: right;
    width: 70%;
    padding: 36px 3.6%;
    border-radius: 10px;
    background: linear-gradient(to right bottom, #fff 0%, #eee 100%); /*W3C*/
    line-height: 2;
}
.l-column {
    text-align: left;
}
/*------------------------------------------------------------------------------
社長挨拶
------------------------------------------------------------------------------*/
.l-ceomsg-area {
    clear: both;
}
.l-ceomsg-msg-area {
    clear: both;
    font-family: 'ＭＳ Ｐ明朝', serif;
    margin-bottom: 48px;
    line-height: 2;
    border-bottom: 5px solid #a00;
}
.l-ceomsg-msg {
    clear: both;
    font-size: 180%;
}
.l-ceomsg-name-area {
    float: right;
}
.l-ceomsg-ceo {
    font-size: 60%;
    padding-right: 1em;
}
.l-ceomsg-name {
    font-size: 150%;
}
.l-ceomsg-title-area {
    clear: both;
    margin-bottom: 36px;
}
.l-ceomsg-title-img {
    display: block;
    margin: 0 auto;
}
.l-ceomsg-title-line {
    clear: both;
    background: linear-gradient(to right, #a00 0%, #fff 100%); /*W3C*/
    height: 5px;
    border-radius: 2.5px;
    margin: 24px 0;
}
.l-ceomsg-img-area {
    display: block;
    float: right;
    margin-bottom: 24px;
}
.l-ceomsg-body-line {
    clear: both;
    background: #999999;
    height: 1px;
    margin-bottom: 1em;
}
.l-ceomsg-list-area {
    padding: 0 0 1em 0;
}
.l-ceomsg-list-lv1 {
    margin-left: 1em;
    line-height: 1.75;
}
.l-ceomsg-list-lv1 li:before {
    margin-left: -1em;
    content: '・';
}
.l-ceomsg-list-lv2 {
    margin-left: 1em;
}
.l-ceomsg-list-lv2 li:before {
    margin-left: -1em;
    content: '- ';
}
.l-ceomsg-list-title {
    display: inline-block;
    font-weight: bold;
    width: 15%;
}
/*------------------------------------------------------------------------------
事例紹介
------------------------------------------------------------------------------*/
.l-cols-jirei-head, .l-cols-jirei-data {
    clear: both;
    width: 100%;
    vertical-align: middle;
    padding: 4px 1.6%;
    line-height: 1.75;
}
.l-cols-jirei-head {
    background: #080;
    color: #fff;
    margin-top: 2em;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.l-cols-jirei-data {
    background: linear-gradient(to right, #fff 0%, #eee 100%); /*W3C*/
    border: 1px solid #080;
    border-radius: 0 0 5px 5px;
}
/*------------------------------------------------------------------------------
汎用系システム
------------------------------------------------------------------------------*/
.l-hanyo-title {
    display: inline-block;
    background: #080;
    color: #fff;
    padding: 0.3em 1.5em;
    margin: 0.2em 0;
    font-weight: bold;
}
.l-list-hanyo {
    margin-left: 2em;
}
.l-list-hanyo li:before {
    margin-left: -1em;
    content: '・';
}
.l-list-hanyo p {
    margin-left: -1em;
    margin-top: 0.5em;
}
/*------------------------------------------------------------------------------
社外研修，採用関連
------------------------------------------------------------------------------*/
.l-kenshu-area {
    clear: both;
    margin-top: 1em;
}
.l-kenshu-title {
    border-bottom: 1px solid #a00;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.l-kenshu-title-head {
    display: inline-block;
    background: #a00;
    border-radius: 0.5em 0.5em 0 0;
    color: #fff;
    padding: 0 1em;
    margin-right: 0.5em;
}
.l-kenshu-cont-left {
    float: left;
    width: 60%;
}
.l-kenshu-cont-right {
    float: right;
    width: 38%;
    margin-bottom: 2em;
}
.l-kenshu-cont-reset {
    clear: both;
}
.l-kenshu-img {
    width: 95%;
}
.l-kenshu-flow {
    margin-top: 1em;
    text-align: center;
    margin-bottom: 2em;
}
.l-haizoku-flow {
    margin-top: 1em;
    text-align: center;
}
.l-kenshu-sub-area {
    padding-top: 1em;
    padding-left: 1em;
}
.l-kenshu-sub-title {
    border-bottom: 1px solid #090;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.l-kenshu-sub-title-head,
.l-kenshu-sub-title-detail,
.l-kenshu-sub-title-keitai,
.l-kenshu-sub-title-footer {
    padding: 0 1em;
}
.l-kenshu-sub-title-head {
    display: inline-block;
    border-radius: 0.5em 0.5em 0 0;
    background: #090;
    color: #fff;
}
.l-kenshu-sub-title-detail {
    display: inline-block;
}
.l-kenshu-sub-title-footer {
    float: right;
    border-radius: 0.5em 0 0 0;
    background: #3b3;
    color: #fff;
}
.l-kenshu-sub-title-keitai {
    float: right;
    border-radius: 0 0.5em 0 0;
    border: 1px solid #090;
    border-bottom: 0;
    border-left: 0;
    color: #090;
}
.l-kenshu-radius-head {
    clear: both;
    border-radius: 1em 1em 0 0;
    background: #090;
    color: #fff;
    padding: 0 1.5em;
    font-weight: bold;
    line-height: 2em;
}
.l-kenshu-radius-area {
    clear: both;
    border-radius: 0 0 1em 1em;
    border: 1px solid #090;
    padding: 1em 1.5em;
    margin-bottom: 2em;
    background: linear-gradient(to bottom, #fff 0%, #efe 100%); /*W3C*/
}
.l-flow-area {
    clear: both;
    margin: 0 1em;
}
.l-flow-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.l-flow-sub-area {
    display: table;
    width: 100%;
    line-height: 2;
}
.l-flow-h,
.l-flow-d {
    display: table-cell;
    vertical-align: top;
    padding-left: 0.5em;
    border: 1px solid #6a6;
}
.l-flow-h {
    width: 19%;
    background: #6a6;
    color: #fff;
    font-weight: bold;
}
.l-flow-d {
    width: 80%;
    background: linear-gradient(to right, #fff 0%, #f9f9f9 100%); /*W3C*/
}
.l-flow-arrow {
    float: left;
    width: 0.8em;
    margin: 0 0 4px 1px;
    border-top: 0.8em solid #6a6;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
}
/*----------------------------------------------------------1日のスケジュール*/
.l-1day-area {
    clear: both;
    width: 100%;
    margin-bottom: 0.5em;
    border: 2px solid #6a6;
    background: linear-gradient(to right, #fff 0%, #f9f9f9 100%); /*W3C*/
    vertical-align: center;
}
.l-1day-h {
    display: table-cell;
    min-width: 60px;
    background: #6a6;
    border-bottom: 1px solid #6a6;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.l-1day-d {
    display: table-cell;
    width: 100%;
}
.l-1day-d1 {
    display: cell;
    border-bottom: 1px solid #6a6;
    width: 100%;
    padding: 0 0.5em;
}
.l-1day-d2 {
    display: cell;
    width: 100%;
    padding: 0 0.5em;
}
/*----------------------------------------------------------「道しるべ」*/
.l-guidepost-area {
    clear: both;
    text-align: center;
    border-top: 1px solid #a00;
}
.l-guidepost-link-back,
.l-guidepost-link-next {
    display: block;
    /*
    margin: 0 1em;
    */
    padding: 0 1em;
    border-radius: 0 0 0.5em 0.5em;
    background: #a00;
    color: #fff;
}
.l-guidepost-link-back:hover,
.l-guidepost-link-next:hover {
    background: #00b6ec;
}
.l-guidepost-link-back {
	float: left;
}
.l-guidepost-link-next {
	float: right;
}
.l-guidepost-back,
.l-guidepost-next {
    display: inline-block;
    margin-top: -1px;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    vertical-align: middle;
}
.l-guidepost-back {
    margin-right: 0.5em;
    border-right: 1em solid #fff;
}
.l-guidepost-next {
    margin-left: 0.5em;
    border-left: 1em solid #fff;
}
/*------------------------------------------------------------------------------
先輩社員の声
------------------------------------------------------------------------------*/
.l-voice-area {
    clear: both;
    border-radius: 10px;
    padding: 12px 1.2%;
    margin-bottom: 2em;
    background: linear-gradient(to right bottom, #fcfffc 0%, #f2fff2 100%); /*W3C*/
}
.l-voice-l {
    float: left;
}
.l-voice-r {
    float: right;
}
.l-voice-margin-l30 {
    margin-left: 30%;
    margin-right: 1.5em;
}
.l-voice-margin-r30 {
    margin-left: 1.5em;
    margin-right: 30%;
}
.l-shain-face {
    margin: 0 1.3em;
    text-align: center;
}
.l-shain-voice {
    color: inherit;
}
.l-shain-voice li {
    color: inherit;
}
.l-voice-q {
    border-radius: 5px 0 0 0;
    background: linear-gradient(to left, rgba(255,255,255,0.0) 0%, #080 100%); /*W3C*/
    font-weight: bold;
    color: #fff;
    padding-left: 1em;
}
.l-voice-a {
    margin-bottom: 1em;
}
.l-voice-link, .l-voice-link a {
    color: #444;
}
.l-voice-link {
    text-align: right;
}
.l-voice-link a:hover {
    color: #00b6ec;
}
/*------------------------------------------------------------------------------
職種紹介
------------------------------------------------------------------------------*/
/*----------------------------------------------------------*/
.l-shokai-chart {
    clear: both;
    padding: 1em;
}
/*----------------------------------------------------------*/
.l-shokai-flow-area {
    clear: both;
    width: 100%;
    background: linear-gradient(to bottom, #f0f9ff 0%, #99d0ff 100%); /*W3C*/
}
/*----------------------------------------------------------*/
.l-shokai-flow-link-area {
    margin: 1em;
    padding: 1em;
    border-radius: 5px;
    background: rgba(255,255,255,0.5);
}
/*----------------------------------------------------------*/
.l-shokai-flow {
    clear: both;
    display: table;
    width: 100%;
}
.l-shokai-flow-row1,
.l-shokai-flow-row2,
.l-shokai-flow-row3 {
    display: table-row;
}
.l-shokai-flow-box11,
.l-shokai-flow-box12,
.l-shokai-flow-box13,
.l-shokai-flow-box21,
.l-shokai-flow-box22,
.l-shokai-flow-box23,
.l-shokai-flow-box24,
.l-shokai-flow-box25,
.l-shokai-flow-box31,
.l-shokai-flow-box32,
.l-shokai-flow-box33,
.l-shokai-flow-box34,
.l-shokai-flow-box40 {
    display: table-cell;
}
/*----------------------------------------------------------*/
.l-shokai-flow-row1 {
    color: inherit;
}
.l-shokai-flow-row2 {
    height: 0.75em;
}
.l-shokai-flow-row3 {
    height: 1.75em;
}
/*----------------------------------------------------------*/
.l-shokai-flow-box11,
.l-shokai-flow-box40 {
    width: 100%;
    background: transparent;
    border-top: 2px solid #004ea2;
    border-right: 2px solid #004ea2;
    border-left: 2px solid #004ea2;
}
.l-shokai-flow-box40 {
    border-bottom: 2px solid #004ea2;
}
/*----------------------------------------------------------*/
.l-shokai-flow-box21 {
    width: 44%;
    background: #fff;
    border-top: 2px solid #004ea2;
}
.l-shokai-flow-box22 {
    width: 3.5%;
    background: #fff;
    border-top: 2px solid #004ea2;
    border-right: 2px solid #004ea2;
    border-bottom: 2px solid #004ea2;
}
.l-shokai-flow-box23 {
    width: 5%;
    background: transparent;
}
.l-shokai-flow-box24 {
    width: 3.5%;
    background: #fff;
    border-top: 2px solid #004ea2;
    border-left: 2px solid #004ea2;
    border-bottom: 2px solid #004ea2;
}
.l-shokai-flow-box25 {
    width: 44%;
    background: #fff;
    border-top: 2px solid #004ea2;
}
/*----------------------------------------------------------*/
.l-shokai-flow-box31 {
    width: 44%;
    background: #fff;
}
.l-shokai-flow-box32 {
    width: 6%;
    background: linear-gradient(to left bottom, transparent, transparent 40%, #004ea2 50%, #fff 50%, #fff);
}
.l-shokai-flow-box33 {
    width: 6%;
    background: linear-gradient(to right bottom, transparent, transparent 40%, #004ea2 50%, #fff 50%, #fff);
}
.l-shokai-flow-box34 {
    width: 44%;
    background: #fff;
}
/*----------------------------------------------------------*/
.l-shokai-msg {
    width: 100%;
    text-align: center;
    padding: 0.5em;
}
.l-shokai-head {
    font-weight: bold;
    font-size: 130%;
    padding: 0.25em;
}
.l-shokai-data {
    font-weight: bold;
    font-size: 95%;
}
.l-shokai-comment {
    font-size: 95%;
}
/*----------------------------------------------------------*/
.l-kenshu-flow-table {
    display: table;
    width: 100%;
}
.l-kenshu-flow-left {
    display: table-cell;
    width: 12%;
}
.l-kenshu-flow-right {
    display: table-cell;
    width: 88%;
    padding-left: 0.5em;
}
.l-kenshu-flow-bar-10,
.l-kenshu-flow-bar-11 {
    background: #fff0f9;
    border-right: 2px solid #a00;
    border-left: 2px solid #a00;
}
.l-kenshu-flow-bar-10 {
    border-top: 2px solid #a00;
}
.l-kenshu-flow-bar-12 {
    position: relative;
    background: linear-gradient(to bottom, #a00 0%, #090 100%); /*W3C*/
}
.l-kenshu-flow-bar-12-mask {
    position: absolute;
    top: 0;
    left: 2px;
    width: calc(100% - 4px);
    height: 100%;
    background: linear-gradient(to bottom, #fff0f9 0%, #f9fff0 100%); /*W3C*/
}
.l-kenshu-flow-bar-21 {
    background: #f9fff0;
    border-right: 2px solid #090;
    border-left: 2px solid #090;
}
.l-kenshu-flow-bar-22 {
    background: #f9fff0;
    border-right: 2px solid #090;
    border-bottom: 2px solid #090;
    border-left: 2px solid #090;
}
/*------------------------------------------------------------------------------
お知らせ
------------------------------------------------------------------------------*/
.l-info-area {
  clear: both;
}
.l-info-title-area {
  margin: 0.5em 0;
  padding: 0.1em 1em;
  font-size: 12pt;
  border-left: 0.5em solid #a00;
  border-bottom: 1px solid #a00;
  max-width: 65%;
}
.l-info-list li {
    position: relative;
    padding: 1.5em 0 0 1em;
    font-size: 100%;
}
.l-info-list li:before {
    content: '';
    display: block;
    position: absolute;
    top: 1.9em;
    left: 0%;
    height: 0;
    width: 0;
    border-top: 6px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #00b6ec;
}
.l-info-list a {
  text-decoration: underline;
}
.l-info-date {
  display: inline-block;
  width: 9em;
  vertical-align: top;
}
.l-info-msg {
    display: inline-block;
}
@media screen and (max-width : 767px){
  .l-info-msg {
    display: block;
  }
}
/*------------------------------------------------------------------------------
お問い合わせ
------------------------------------------------------------------------------*/
.l-contact-svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 20px;
    width: auto;
    height: auto;
    overflow: visible;
}
.l-contact-address {
    padding: 5px; 
    background-color: #004ea2; 
    color: #fff; 
    text-align: right; 
    font-size: 11pt; 
    line-height: 1.5em;
}
.btn-contact {
    display: inline-block;
    max-width: 400px;
    text-align: left;
    border: 2px solid #1af;
    font-size: 16px;
    color: #1af;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
    transition: .4s;
    font-size: 2em;
}
.btn-contact-s {
    font-size: 15.5px;
}
.btn-contact:hover {
    background-color: #1af;
    border-color: #1af;
    color: #FFF;
}
/*------------------------------------------------------------------------------
更新履歴
------------------------------------------------------------------------------*/
/*----[2020-02-18 DEL]
.l-hist-area {
    clear: both;
}
.l-hist-title-area {
    margin: 0.5em 0;
}
.l-hist-title {
    display: inline-block;
    background: #06c;
    color: #fff;
    padding: 0.5em 1.5em;
}
.l-hist-img {
    padding-right: 0.8%;
}
.hist-text {
    clear: both;
    width: 100%;
    height: 76px;
    margin: 0 auto;
    background-color: #f2f2f2;
    border: 1px solid transparent;  / * これがあるとサイズを確保がしやすい * /
    overflow: auto;
}
.l-hist-inner {
    clear: both;
    padding: 0 8px;
    width: 100%;
    vertical-align: top;
    border: 1px solid transparent;  / * これがあるとサイズを確保がしやすい * /
}
.l-hist-inner-area {
    clear: both;
    width: 100%;
}
.l-hist-inner-day {
    float: left;
    padding-right: 1em;
}
.l-hist-inner-moji {
    float: left;
}
----*/
/*------------------------------------------------------------------------------
Page Top Jump
------------------------------------------------------------------------------*/
.l-topjump-area {
    position: relative;
    clear: both;
    width: 100%;
    height: 80px;
    border: 1px solid transparent; /* これがあることで高さを確保できる。。。 */
}
.topjump {
    display: none;
}
.l-topjump {
    float: right;
    margin-top: 48px;
    padding: 4px 1.5em;
    border-radius: 3px;
    background-color: rgba(48,48,48,0.8);
    text-align: center;
    position: fixed;
    right: 2em;
    bottom: 4em;
    z-index: 9999;
}
.topjump-mark {
    color: #fa0;
    padding-right: 0.5em;
}
.topjump-link {
    color: #eee;
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    transition: all 0.3s ;
}
.topjump-link:hover {
    opacity: 0.85 ;
}
/*------------------------------------------------------------------------------
サイトマップ
------------------------------------------------------------------------------*/
.sm-area {
    font-size: 90%;
    background: linear-gradient(to right bottom, #222 0%, #111 100%); /*W3C*/
    color: #eee;
}
.sm-area a {
    color: #eee;
}
.sm-area a:hover {
    color: #fff;
    border-bottom: 1px solid #a00;
}
.sm-title {
    font-weight: bold;
    border-left: solid 6px #fa0;
    border-bottom: solid 1px #fa0;
    padding-left: 6px;
    padding-right: 12px;
}
.l-sm-area {
    display: table;
    clear: both;
    width: 100%;
    padding: 12px 12px 24px;
}
.l-sm-row {
    display: table-row;
}
.l-sm-top {
    line-height: 2;
    margin-bottom: 8px;
}
.l-sm-grp {
    line-height: 2;
    width: 25%;
    float: left;
    padding: 0 12px;
}
.l-sm-sub {
    line-height: 1.5;
    margin-left: 12px;
}
.l-sm-grp li, l-sm-sub li {
    margin-left: 12px;
}
.l-sm-vline {
    color: inherit;
}
/*------------------------------------------------------------------------------
フッター
------------------------------------------------------------------------------*/
.l-footer-area {
    width: 100%;
    clear: both;
    background-color: #111;
    border-top: 1px solid #eee;
}
.footer-cr {
    color: #fff;
    text-align: center;
    padding: 4px 1.2%;
}
/*------------------------------------------------------------------------------
確認用ボーダー
------------------------------------------------------------------------------*/
.l-test {
    border: 1px solid #000;
}
/*------------------------------------------------------------------------------
メディアクエリー（ブラウザの横幅が指定の幅以下の場合に追加適用されるスタイル群）
------------------------------------------------------------------------------*/
@media screen and (max-width : 910px){
    .l-kenshu-sub-title {
        border-bottom: 0;
    }
    .l-kenshu-sub-title-footer {
        float: none;
        display: block;
        border-radius: 0 0 0.5em 0.5em;
    }
    .l-kenshu-sub-title-keitai {
        float: none;
        display: block;
        border-radius: 0 0.5em 0 0;
        border: 1px solid #090;
    }
}
@media screen and (max-width : 767px){
    .l-header-area {
        height: 8.5em;
        background-color: #fff;
    }
    .l-cname-area {
        position: static;
        margin-left: 0;
        border: none;
    }
    .l-hmenu-area  {
        margin-left: 2.5em;
    }
    .l-hmenu-item {
        height: 2em;
        background-color: #004ea2;
    }
    .l-hmenu-item-e {
        border-right: 0px;
    }
    .l-hmenu-link {
        padding: 0;
    }
    .l-cont-area {
        clear: both;
        width: 100%;
        margin-left: 0%;
        top: 0;
        left: 0;
        border: 1px solid transparent;
    }
    /*
    .l-cont-left,
    .l-cont-l,
    .l-cont-center,
    .l-cont-c,
    */
    .l-cont-right,
    .l-cont-r {
        text-align: center;
    }
    .l-cont-sub-left, .l-cont-sub-l {
        padding: 0;
        float: none;
        margin: 0 auto;
    }
    .l-cont-sub-right, .l-cont-sub-r {
        padding: 0;
        float: none;
        margin: 0 auto;
    }
    .l-cont-w90,
    .l-cont-w80,
    .l-cont-w70,
    .l-cont-w65,
    .l-cont-w35 {
        width: 98%;
    }
    .l-cont-margin24 {
        margin: 24px 1%;
    }
    .l-cont-margin24-l {
        margin-left: 1%;
    }
    .l-cont-margin36 {
        margin: 36px 1%;
    }
    /*.l-info-area {
        display: none;
    }*/
    .l-lbar-area {
        display: none;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    #lbar-menu.fixed {
        position: fixed;
        top: 2em;
        left: 0;
    }
    .l-column-area {
        width: 90%;
    }
    .l-outer-kaisha-joho,
    .l-outer-saiyo,
    .l-radius-range-area {
        width: 100%;
    }
    .l-sm-grp {
        width: 240px;
    }
    /*LBar View Button*/
    .l-lbar-btn-area {
        display: block;
    }
    .l-lbar-btn {
        clear: both;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 2.5em;
        height: 2em;
        /*vertical-align: middle;*/
        z-index: 1;
        background-color: #004ea2;
    }
    /*
    #lbar-btn.fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
    */
    .l-lbar-btn-mark {
        position: relative;
        width: 20px;
        height: 16px;
        margin: 4px auto 0;
    }
    .l-lbar-btn-mark-on {
        background: url('../images/touch0.png');
    }
    .l-lbar-btn-mark-on:hover {
        background: url('../images/touch1.png');
    }
    .l-lbar-btn-mark-off {
        background: none;
    }
    #map {
        width: 100%;
    }
}
@media screen and (max-width : 720px){
}
@media screen and (min-width : 768px){
}