@charset "UTF-8";
#jquery-ui-sortable {
    max-width: 1280px;
    margin: 0 auto;
}
/* アプリ内のカラーパレット */
/* ロゴカラー(Light) */
.cl-brand1 {
    color: #1bb1ee;
}
.bcl-brand1 {
    background-color: #1bb1ee;
}
/* ロゴカラー（Dark） */
.ifad_label .cl-brand2 {
    color: #005e8f;
}
/* アクセントカラー色 */
.cl-accent1 {
    color: #afbcc1;
}
.bcl-accent1 {
    background-color: #afbcc1;
}
/*========================================================================================
  swfhome.cssの上書き
========================================================================================*/
/* gridデザイン */
.grid {
    padding: 8px;
}
@media only screen and (max-width: 1020px) and (min-width: 768px) {
    .grid {
        float: none;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 12px;
    }
}
/* カテゴリ内のリンクボタンデザイン */
.swfhome_parts_menu a {
    display: inline-block;
    margin: 0 6px;
    padding: 0 4px;
    height: auto;
    background-color: transparent;
    color: #595959;
    font-size: 12px;
}
.swfhome_parts_menu a:hover {
    background-color: transparent;
    color: #838383;
}
/* カテゴリ内リンクボタンの左側に「＞」アイコンを追加する */
.category_header_link:before {
    font-family: FontAwesome;
    content: "\f138";
    letter-spacing: 6px;
}
/* カテゴリの開閉アイコン「＋」「－」の位置がセンターにくるよう微調整 */
.swfhome_parts_head_frame img {
    margin-top: 4px;
}
/* トップページに表示されるユーザ名 */
#viewUserNameArea .emUserName {
    font-size: 16px;
    font-weight: 600;
}
/* トップページに表示されるユーザの所属名 */
#viewUserNameArea .buName {
    color: #8C8C8C;
}
/*========================================================================================
  ajaxlist.cssの上書き
========================================================================================*/
.topAnnai dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    border-bottom: 6px solid rgba(0,0,0,0.1);
}
.topAnnai dt {
    float: none;
    clear: none;
    min-width: auto;
}
.topAnnai dd {
    float: none;
    flex-basis: 100%;
    margin: 0;
}
.colCreateDate {
    order: 1;
    margin-right: 1em;
    height: 21px;
    line-height: 21px;
    color: #999;
}
.colCreateDate span {
    font-size: 14px !important;
}
.colStatus {
    order: 2;
}
.colStatus img {
    margin-top: 0;
    height: 21px;
}
.topAnnai .colDetail {
    order: 3;
    margin-bottom: 8px;
    line-height: 1.3;
    font-size: 16px;
}
.topAnnai .listTitle a {
    color: #021039;
    text-decoration: none;
    font-weight: normal;
    font-size: 16px !important;
}
.topAnnai .listTitle a:hover {
    color: #4286f4;
}
.colLink {
    order: 4;
}
.colLink a {
    display: inline-block;
    margin: 4px 0 16px;
    padding: 6px 16px;
    border: double 3px #4286f4;
    border-radius: 5px;
    font-size: 14px;
    color: #4286f4;
}
.colLink a:before {
    font-family: FontAwesome;
    margin-right: 0.5em;
    display: inline-block;
    font-weight: 400;
    content: "\f138";
}
.colLink a:hover {
    opacity: 1;
    background-color: #4286f4;
    text-decoration: none;
    color: #fff;
}
.swfliststatusicon {
    background-size: contain;
    margin-bottom: 6px;
}
/*========================================================================================
  sccstyle.cssの上書き
========================================================================================*/
/* webアイコンの余白を2から1.65へ */
.fa-fw {
    width: 1.65em;
}
/* ヘッダーの機能アイコンサイズ */
.fa-font-size {
    margin-bottom: 4px;
    font-size: 24px;
}
.icon-print:before {
    content: "\f02f";
}
.icon-angle-double-right:before {
    content: "\f101";
}
.icon-angle-double-right-after:after {
    content: "\f101";
}
.icon-caret-right:before {
    content: "\f0da";
}
.icon-left:before {
    content: "\f053";
}
.icon-right:after {
    content: "\f054";
}
.icon-trash-o:before {
    content: "\f014";
}
.icon-link-external:after {
    content: "\f08e";
}
.icon-circle-o:before {
    content: "\f10c";
}
.icon-clecle-p:before {
    content: "\f111";
}
.icon-peke:before {
    content: "\f00d";
}
.icon-repeat:before {
    content: "\f01e";
}
/*============================================
　ストレスチェックメニューボタン用CSS 2015/06/18追加
============================================*/
/*=================
　受検者用メニューボタン
===================*/
.menu-button {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    margin: 4px;
    padding: 12px 24px;
    background-image: linear-gradient(-90deg, #4286f4, #373B44);
    background-size: 200%;
    transition: .5s;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
}
a.menu-button:hover {
    background-position: right center;
    opacity: 1;
    text-decoration: none;
    color: #fff;
}
/* 受検者用ボタンのアイコン */
.menu-icon {
    float: left;
    font-size: 26px;
}
/* 受検者用ボタンのラベル */
.menu-text {
    float: left;
    font-size: 20px;
}
.menu-text p {
    margin: 0;
    padding: 0;
}
.menu-text .eng-name {
    font-size: 14px;
}
/* 受検者操作ガイドボタン */
.menu-button-book {
    display: inline-block;
    margin: 4px;
    padding: 12px 0 8px 20px;
    width: calc(100% - 20px);
    max-width: 500px;
    border-radius: 5px;
    font-weight: normal;
    border: solid 1px #6489ae;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    background: none;
    color: #225588;
    text-shadow: none;
    text-align: left;
}
.menu-button-book:hover {
    background-color: #dfebff;
}
/*=================
　グレーボタン
===================*/
.menu-button-gray {
    display: block;
    margin: 8px 0;
    padding: 12px;
    border: solid 1px #595959;
    border-radius: 5px;
    color: #595959;
    font-size: 14px;
}
a.menu-button-gray:hover {
    opacity: 1;
    background-color: rgba(89, 89, 89, 0.3);
    text-decoration: none;
}
/*=================
　ボタン下注記
===================*/
.menu-box-admin .menu-description {
    margin: 0;
    width: 100%;
    padding: 0 10px 1em 10px;
    font-size: 12px;
    text-align: left;
    color: #595959;
}
/*=================
　管理メニュー共通グレーボタン
===================*/
.menu-button-kanri {
    display: block;
    margin: 8px 0;
    padding: 12px 0 12px 20px;
    border-radius: 5px;
    color: #254B5F;
    font-size: 14px;
    text-decoration: none;
}
.hover-orange {
    border: 1px solid #FBCA94;
}
.hover-green {
    border: 1px solid #8DCE91;
}
.hover-blue {
    border: 1px solid #4bb6d7;
}
.hover-red {
    border: 1px solid #EA919D;
}
a.hover-orange:hover {
    opacity: 1;
    text-decoration: none;
    color: #ffffff;
    background: #FBCA94;
}
a.hover-green:hover {
    opacity: 1;
    text-decoration: none;
    color: #ffffff;
    background: #8DCE91;
}
a.hover-blue:hover {
    opacity: 1;
    text-decoration: none;
    color: #ffffff;
    background: #4bb6d7;
}
a.hover-red:hover {
    opacity: 1;
    text-decoration: none;
    color: #ffffff;
    background: #EA919D;
}
.second_title {
    font-weight: normal;
    margin: 10px 0 0 0;
    font-size: 16px;
}
.category_base {
    font-size: 16px;
    font-weight: normal;
}
.category_base_white {
    color: white;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}
.category_header_button {
    height: auto;
    font-size: 11.5px;
    display: inline-block;
    color: #444;
    background: #F6F6F6;
    padding: 4px 25px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: rgba(0, 0, 0, .05) -1px 1px 0, rgba(255, 255, 255, 1) -1px 1px 0 inset;
}
.category_haeder_link {
    height: auto;
    display: inline-block;
    color: white;
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
    float: none;
}
.category_inner_box {
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0px 10px 10px 10px;
    background-color: #DFF1E0;
    margin-top: 10px;
    margin-bottom: 20px;
}
/* webアイコン差し込んだので、機能名の位置合わせ */
.function-name {}
/* 全ボタン共通のhoverアクション */
.btn:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
/* 実行ボタン */
.btn-submit {
    border: solid 1px #4285f4;
    background-color: #4285f4;
}
.btn-submit:hover {
    background-color: #4285f4;
    border: solid 1px #4285f4;
}
.btn-update {
    min-width: auto;
    border: solid 1px #ff6d01;
    background-color: #ff6d01;
}
.btn-update:hover {
    border: solid 1px #ff6d01;
    background-color: #ff6d01;
}
.btn-action {
    min-width: auto;
}
.btn-action-o {
    border: solid 1px #1fb0bb;
    background-color: transparent;
    color: #1fb0bb;
}
.btn-action-o:hover {
    border: solid 1px #1fb0bb;
    background-color: #1fb0bb;
    color: #fff;
}
.btn-update-o {
    border: solid 1px #ff6d01;
    background-color: transparent;
    color: #ff6d01;
}
.btn-update-o:hover {
    border: solid 1px #ff6d01;
    background-color: #ff6d01;
    color: #fff;
}
/* キャンセルボタン */
.csbtn {
    background-color: transparent;
    border: solid 1px #707477;
    color: #707477;
}
.csbtn:hover {
    background-color: #f3f4f6;
    border: solid 1px #707477;
}
.ufad-datagrid td {
    white-space: normal;
}
/*
.btn-sm {
  margin: 5px 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 14px;
}
.btn-mn {
  margin: 2px 4px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.btn-lg {
  margin: 10px;
  padding: 16px 48px;
  border-radius: 10px;
  font-size: 18px;
}
*/
.btn-wide {
    padding-left: 4em;
    padding-right: 4em;
}
/*========================================================================================
  swfnote.cssの上書き
========================================================================================*/
.swfNoteProgramMainCnt .h3 {
    font-size: 20px;
}
.swfNoteInfoTbl .formItemSeparatorLeft, .swfNoteInfoTbl .formItemSeparatorRight {
    vertical-align: middle;
}
#search-container .swfNoteWrapper {
    width: calc(100% - 20px);
}
.swfNoteWrapper @media only screen and (min-width: 768px) and (max-width: 959px) {
    .swfNoteWrapper {
        width: 98%;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .swfNoteWrapper {
        width: 98%;
    }
}
@media only screen and (max-width: 479px) {
    .swfNoteWrapper {
        width: 98%;
    }
    .swfCol {
        padding: 0;
    }
}
/*========================================================================================
  swfglmaster.cssの上書き
========================================================================================*/
table#MasterTable .th-header td {
    padding: 3px 8px;
}
.ufad-datagrid-c-line {
    margin-bottom: 16px;
    border: solid 1px #ccc;
    border-radius: 10px;
}

.ufad-datagrid-c-line dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.ufad-datagrid-c-line dt,
.ufad-datagrid-c-line dd {
    margin: 2px 0;
    padding: 4px;
}
.ufad-datagrid-c-line dt {
    flex-basis: 22%;
    font-weight: bold;
}
.ufad-datagrid-c-line-wrapper dd {
    flex-basis: 78%;
}
@media only screen and (max-width: 768px) {
    .ufad-datagrid-c-line dl {
        flex-direction: column;
    }
    .ufad-datagrid-c-line dt,
    .ufad-datagrid-c-line dd {
        flex-basis: 100%;
    }
    .ufad-datagrid-c-line dt {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .ufad-datagrid-c-line dd {
        margin-top: 0;
        padding-top: 0;
    }
}
/*========================================================================================
  login.cssの上書き
========================================================================================*/
#loginBox h1 {
    margin: 0;
    font-size: 20px;
}

/*========================================================================================
  ifadinputform.cssの上書き
========================================================================================*/
.ifad_label {
    margin-bottom: 0;
    vertical-align: middle;
    color: #2c3e50;
}
.ifad_choice {
    display: inline-block;
}
.ifad_choice .ifad_label {
    margin-right: 1em;
    vertical-align: middle;
}
.ifad_choice img {
    vertical-align: middle !important;
    width: 16px !important;
    margin: 0 8px 0 0 !important;
}

.ifad_date_container .ifad_dy, .ifad_date_container .ifad_dm, .ifad_date_container .ifad_dd, .ifad_date_container .ifad_th, .ifad_date_container .ifad_tm {
    vertical-align: baseline;
}

/*========================================================================================
  swfpartsdesigntypeflick.cssの上書き
========================================================================================*/
/* ストレスチェック受検画面のフリックデザインのタイトル部分の位置微調整。2行でもきっちりセンターに寄るように。 */
#title .two br {
    display: none;
}
#title .two span {
    display: block;
    margin: 4px;
}
/*========================================================================================
  既存クラスを上書き
========================================================================================*/
.formCaption {
    padding: 2px 4px;
}
.ifad_label, .ifad_label span {
    display: inline-block;
}
/* ストレスチェック用に修正 行内に表示する画像は、高さ制限をかける */
.ufad-datagrid img, #requestList img {
    /*	margin-top:2px; */
    max-height: 21px;
}
/*========================================================================================
  既存クラスで使用していないものを再利用
========================================================================================*/
.category_header_link {
    text-shadow: none;
}
.swfCol hr {
    border: none;
    height: 0;
    margin: 0;
}
/* 線は消すけど自分でindex貼るときの線は残す */
.swfCol .swfNoteIndexBorderDotted {
    border-bottom: dotted 1px #ccc;
}
/* 新着メッセージのステータスアイコン */
#dgAjaxListProgress img {
    height: 21px;
}
/* メールの進捗状況確認のステータスアイコン */
.ufad-datagrid-line img {
    height: 21px;
}
/* STEP1~3のプログレスバー画像 */
#agreement_input_flow01 img, #agreement_input_flow02 img, #agreement_input_flow03 img {
    width: 198px;
    height: 52px;
}
#agreement_flow01 img, #agreement_flow02 img, #agreement_flow03 img {
    width: 198px;
    height: 52px;
}
/* アコーディオン開閉メニュー */
.slideUpDown span {
    padding-left: 8px;
}
/*========================================================================================
  プレースホルダーの色設定
========================================================================================*/
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */ 
/*
:placeholder-shown {
    color: #d3d3d3;
}
*/
::placeholder {
    color: #d3d3d3;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */ 
::-webkit-input-placeholder {
    color: #d3d3d3;
}
/* Firefox 18- */ 
:-moz-placeholder {
    color: #d3d3d3;
    opacity: 1;
}
/* Firefox 19+ */ 
::-moz-placeholder {
    color: #d3d3d3;
    opacity: 1;
}
/* 旧Edge */
::-ms-input-placeholder {
    color: #d3d3d3;
}
/* IE 10+ */ 
:-ms-input-placeholder {
    color: #d3d3d3;
}
/*========================================================================================
  オリジナルクラス
========================================================================================*/

/*ページヘッダーのアイコンラベル（日本語）*/
.description-japanese, .nav-child-description .description-japanese {
    font-size: 11px;
}
/* ページヘッダーのアイコンラベル（英語） */
.description-english, .nav-child-description .description-english {
    font: 10.5px Verdana, Helvetica, Arial, sans-serif;
}
/* 子要素の中央センタリング用クラス */
.nav_nest_list li .vertical-center, .vertical-center {
    display: flex;
    align-items: center;
}
/* 受検者用のメニューエリア */
.menu-box-user {
    width: 100%;
    margin: 0 auto;
    margin-top: 16px;
    text-align: center;
}
/* 管理者用のメニューエリア */
.menu-box-admin {
    width: 80%;
    margin: 0 auto;
    margin-top: 16px;
}
.menu-box-admin .second_title {
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left-style: solid;
    border-left-width: 10px;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-item {
    width: calc(33.33% - 8px);
    margin: 4px;
    padding: 8px;
    text-align: center;
}
.flex-item-half {
    width: calc(50% - 8px);
    margin: 4px 0;
}
.flex-item-quarter {
    width: calc(25% - 8px);
    margin: 4px;
}
.guide-link a {
    display: inline-block;
    margin-bottom: 16px;
}
/* ログイン画面のユーザ操作ガイド */
.custom_button {
    display: inline-block;
    font: normal normal 300 1.3em 'Open Sans';
    text-decoration: none;
    color: rgba(28, 190, 131, 1);
    brackground-color: transparent;
    border: 1px solid rgba(28, 190, 131, 1);
    border-radius: 100px;
    padding: 10px 40px;
    margin: 5px;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
.custom_button:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}
/* マニュアル類のaタグ */
.manual a {
    display: block;
    color: #1b72cd;
    text-decoration: none;
}
.manual .icon {
    line-height: 1.4;
    font-size: 4em;
}
.manual h4 {
    margin-bottom: 17px;
    font-size: 1.5em;
}
.manual h4 .subtext {
    margin-bottom: 4px;
    line-height: 1;
    font-size: 13px;
}
.manual p {
    text-align: left;
}
/* 見出しデザイン（文字だけ） */
.headline-lightblue {
    font-size: 22px;
    font-weight: 600;
    color: #005E8F;
    line-height: 1.3;
}
/* 見出しデザイン（背景ベタ塗り） */
.swfNoteInfoTbl .headline-solidpaint {
    width: calc(100% - 1em);
    padding: 0.5em;
    font-size: 22px;
    color: #fff;
    text-align: center;
}
/* 注意カラー */
.attention-color {
    color: #e60033;
}
/* 要回答アイコン */
.tag-required {
    width: auto;
    padding: 2px 8px;
    margin-right: 0.5em;
    background-color: #e60033;
    color: #fff;
    white-space: nowrap;
}
/* タグ挿入のためだけの隠し項目 */
.stealth-item {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	width: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	border: none !important;
}
