@charset "utf-8";

/* ---------- ページ全体の設定 ---------- */
html{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
body{
	width:100%;
	height:100%;
	margin:0;
	padding:0px;
}


/* ---------- ヘッダー ---------- */
div.header{
	min-width: 723px;
	height: 97px;
	background-color: #c4e6fa;
	padding : 0px ;
	border: 1px #c0c0c0 solid;
}
/* --- ヘッダーのロゴ --- */
div.header .logo {
	width: 232px;
}
/* --- ヘッダーのシステム名 --- */
div.header .system {
	width: 100%;
}
/* --- ヘッダーのログイン情報 --- */
/*
div.header .login {

}
*/
/* --- ヘッダーのパンくずリスト --- */
div.header .pankuzu {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	border:1px solid;
}
div.header .pankuzu li{
  display:inline;/*横に並ぶように*/
  list-style: none;

}
div.header .pankuzu li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
}
div.header .pankuzu li:last-child:after{/* 終端は表示無し */
  content: '';
}
div.header .pankuzu li a {
    text-decoration: underline;
}
div.header .pankuzu li a:hover {
    font-weight: bold;/*太字*/
}




/* ---------- サイドメニューとメイン部分の分割表示 ---------- */
/* --- サイドメニュー --- */
div.side_menu {
	float:left;
	/* width:220px; */
	width:230px;
	height:calc(100% - 99px); /*ヘッダ高さ97px*/
	overflow-y:auto;
	padding: 0px;
	margin:0px;
	border-right:2px solid #666;
}
/* --- メイン部分 --- */
div.main_contents {
	float:right;
	width: calc(100% - 240px); /*サイドメニュー幅222px + メイン部左マージン8px*/
	height:calc(100% - 99px);
	overflow-y:auto;
	padding:0px;
	margin:0px 0px 0px 8px
}


/* --- 主機能グループ ---------- */
div.fields {
	/* min-width: 723px; */
	margin-bottom: 20px; /* 部品グループの下マージン */
	padding: 2px; /* 部品グループのパディング */
	background-color: #fafafa; /* 部品グループの背景色 */
	border: 1px #c0c0c0 solid; /* 部品グループの境界線 */
}
/* --- 主機能グループ内の機能タイトル --- */
div.fields div.title{
	margin-bottom: 2px; /* タイトルの下マージン */
	padding: 10px 8px; /* タイトルのパディング（上下、左右） */
	background: #fafafa; /* タイトルの背景 */
	border: 1px solid; /* タイトルの境界線 */
	border-color: #A0A0A0; /* タイトルの境界線色（上右下左） */
	text-align: left;
	color: #808080; /* タイトルの文字色 */
	font-weight: bold;
	font-size:200%;
}
/* --- 主機能グループ内の説明文 --- */
div.fields div.manual {
	line-height: 200%;
	text-align:left;
	font-size: 100%;
	padding:5px 0px 20px 20px; /* 説明文のパディング（上右下左）*/
}
/* --- 主機能グループ内説明文内の協調文字 --- */
div.fields div.manual span.caution {
	vertical-align:sub; /* 説明文では位置を下げる */
	color: #FF0000;
	font-size:150%;
}
/* --- 主機能グループ内ボタン --- */
div.fields p.button {
	margin-bottom: 25px;
	text-align: center;
}
/* --- 主機能、完了メッセージ --- */
div.fields div.complete{
	text-align:center;
	font-size:150%;
	margin-top:50px;
	margin-bottom:50px;
}
/* --- 主機能、セキュリティ規定通知メッセージ --- */
div.fields div.notice{
	background-color: #ffffff;
	margin-top:20px;
	padding: 5px;
}
/* --- 主機能、汎用テーブル --- */
div.fields div.generic_table table {
	margin: 0px 0px 15px 0px;
	width: 100%; /* テーブルの幅 */
	border: 1px solid; /* テーブルの境界線 */
	border-collapse: collapse; /* テーブルの境界線タイプ */
}

/* --- 主機能、汎用テーブル (tr) --- */
div.fields div.generic_table tr {
	background-color: #ffffff;  /* データセルの背景色 */
}

/* --- 主機能、汎用テーブル見出しセル（th） --- */
div.fields div.generic_table th {
	padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
	background-color: #f5f5f5; /* 見出しセルの背景色 */
	border: 1px solid; /* テーブルの境界線 */
	text-align: left;
	line-height: 120%;
}
/* --- 主機能、汎用テーブルデータセル（td） --- */
div.fields div.generic_table td {
	padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
	border: 1px solid; /* データセルの下境界線 */
}
/* --- 主機能、汎用テーブルデータセル（td）警告表示 --- */
div.fields div.generic_table td.alert{
	background-color:#FF9999;
}
/* --- 主機能、エラーメッセージ --- */
div.fields div.error{
	text-align:center;
	font-size:150%;
	color: #FF0000;
}
/* --- エラーメッセージ_内部整形(左揃え) --- */
div.fields div.error div.error_inner{
	text-align: left;
	display:inline-block;
}
/* --- 主機能、warningメッセージ(青文字) --- */
div.fields div.warning{
	text-align:center;
	font-size:120%;
	color: #0000ff;
}
/* --- warning内部整形(左揃え) --- */
div.fields div.warning div.warning_inner{
	text-align: left;
	display:inline-block;
}
/* --- ログイン画面、エラーメッセージ --- */
div.login div.error{
	text-align:center;
	font-size:150%;
	color: #FF0000;
}

/* ---------- 運用ポータル_承認系画面、ボタンの表示位置調整 ---------- */
/**
* 以下２つのクラスを持つタグは「<div class="fields">」の外に出す
**/

.adjust_fix_footer{
	height: 40px; /* fix_footerの height,padding に合わせて調整 */
}

.fix_footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 35px;
	margin: 0px;
	padding: 15px;
	background-color: #fafafa; /* 部品グループの背景色 */
	border: 1px #c0c0c0 solid; /* 部品グループの境界線 */
	text-align: center;
}

/* ---------- ステップバー表示 ---------- */
#step_bar_box {
    width:100%;
    text-align: left;
    overflow: hidden;
    /*margin-bottom: 30px;*/
    white-space: nowrap;
}
.step_bar {
    list-style: none;
}
.step_bar li {
    width:15%;
    min-width:10px;
    /* width:auto; */
    line-height: 46px;
    color: #a6a6a6;
    text-decoration: none;
    padding: 0 15px 0 35px;
    background: #eee;
    display: inline-block;
}
.step_bar li small {
    font-size: 80%;
}
.step_bar li::after {
    position: relative;
    display: block;
    margin-top: -23px;
    margin-left: auto;
    margin-right: -25px;
    height: 23px;
    width: 20px;
    content: " ";
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    transform: skewX(-30deg);
    background: #eee;
    border-right: 1px solid white;
}
.step_bar li::before {
    float: right;
    display: block;
    margin-bottom: -23px;
    margin-left: auto;
    margin-right: -25px;
    height: 23px;
    width: 20px;
    content: " ";
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
    background: #eee;
    border-right: 1px solid white;
}
.step_bar li:first-child {
    padding-left: 20px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}
.step_bar li:last-child {
    padding-left: 35px;
    padding-right: 20px;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -ms-border-radius: 0 5px 5px 0;
    -o-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}
.step_bar li:last-child::before {
    border: 0;
    background: transparent !important;
}
.step_bar li:last-child::after {
    border: 0;
    background: transparent !important;
}
.step_bar li.current {
    background: #F97C78;
    color: #333;
}
.step_bar li.current::before {
    background: #F97C78;
}
.step_bar li.current::after {
    background: #F97C78;
}
.step_bar li.current:last-child {
    margin-right: -35px;
}
.step_bar li.current:last-child::before {
    border: 0;
    background: transparent !important;
}
.step_bar li.current:last-child::after {
    border: 0;
    background: transparent !important;
}


/* ---------- 申請系フォームエリア ---------- */
div.apply {
	font-size: 80%;
	margin:5px 5px 25px 5px;
}
/* --- 申請系フォームのテーブル --- */
div.apply table.frame {
	margin: 0px 0px 15px 0px;
	width: 100%;  /*テーブルの幅 */
	border-color: #c0c0c0; /* テーブルの境界線色（上右下左） */
	border-collapse: collapse; /* テーブルの境界線タイプ */
	font-size: medium;
}
/* --- 申請系フォームの見出しセル（th） --- */
div.apply th {
	width: 160px; /* 見出しセルの幅 */
	padding: 8px; /* 見出しセルのパディング */
	background-color: #f0f0ff; /* 見出しセルの背景色 */
	border-top: 2px #c0c0c0 solid;/* 見出しセルの上境界線 */
	border-bottom: 2px #c0c0c0 solid;/* 見出しセルの下境界線 */
	border-left: 2px #c0c0c0 solid;/* 見出しセルの左境界線 */
	text-align: left;
	line-height: 120%;
}

/* --- 申請系フォームのデータセル（td） --- */
div.apply td.frame {
	padding: 5px; /* データセルのパディング */
	background-color: #ffffff; /* データセルの背景色 */
	border-top: 2px #c0c0c0 solid; /* データセルの上境界線 */
	border-bottom: 2px #c0c0c0 solid; /* データセルの下境界線 */
	border-right: 2px #c0c0c0 solid; /* データセルの右境界線 */
	border-left: 2px #c0c0c0 solid; /* データセルの左境界線 */
}
/* --- 申請系フォームのセル内のグレーコメント --- */
div.apply td span.glay_comment {
	color: #808080;
}
/* --- 申請系フォームの必須項目セル --- */
div.apply td.required {
	width: 12px; /* 必須項目セルの幅 */
	padding: 10px 3px; /* 必須項目セルのパディング（上下、左右） */
	background-color: #f0f0ff; /* 必須項目セルの背景色 */
	color: #FF0000;
	font-size:150%;
	text-align: center;
}
/* --- 申請系フォームの任意項目セル --- */
div.apply td.arbitrary {
	width: 12px; /* 任意項目セルの幅 */
	background-color: #f0f0ff; /* #e0f1fc任意項目セルの背景色 */
}
/* --- 申請系フォーム各部品 --- */
div.apply input,
div.apply select,
div.apply textarea {
	margin-bottom: 2px; /* フォーム部品の下マージン */
}
/* --- 申請系フォームのボタン --- */
div.apply p.button {
	margin: 0;
	text-align: center;
}
/* --- 申請系フォームの読み取り専用(readonly)部分の背景色を白から灰に変更 --- */
div.apply input[readonly], form.contact textarea[readonly]{
	background-color:#CCC;
}
/* --- 申請系フォーム、チェックボックスによる表示切替 デフォルトを非表示に設定 --- */
div.apply .user_foreign_hidden{
	display:none;
}
div.apply .represent_foreign_hidden{
	display:none;
}
/* ---申請系フォームで枠を表示する場合--- */
div.apply div.apply_waku{
	margin: 5px 5px 25px 5px; /*枠のマージン(上右下左)*/
	padding: 10px;
	background-color: #f9f9e3;
	border: 2px #c0c0c0 solid;/* #c0c0c0 */
}


/* ---------- 利用者一覧 ---------- */
/* ---利用者一覧を表示するときの枠--- */
.riyousha_kubun_waku{
	margin: 5px 5px 25px 5px; /*枠のマージン(上右下左)*/
	padding: 10px;
	background-color: #f9f9e3;
	border: 2px #c0c0c0 solid;/* #c0c0c0 */
}
/* ---利用者一覧を表示するときのタイトル枠--- */
.riyousha_kubun_title_bar{
	padding: 2px 10px; /* タイトルのパディング（上下、左右） */
	border: 1px solid; /* タイトルの境界線 */
	text-align: left;
	font-weight: bold;
	font-size:150%;
	background-color: #f0f0ff;
}
/* --- 利用者一覧タイトル内の協調文字 --- */
.riyousha_kubun_title_bar span.caution {
	color: #FF0000;
	font-size:100%;
}
/* --- 利用者一覧テーブル --- */
.riyousha_kubun_waku table {
	margin: 0px 0px 15px 0px;
	width: 100%; /* テーブルの幅 */
	border: 1px solid; /* テーブルの境界線 */
	border-collapse: collapse; /* テーブルの境界線タイプ */
}
/* --- 利用者一覧テーブル見出しセル（th） --- */
.riyousha_kubun_waku th {
	padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
	background-color: #f5f5f5; /* 見出しセルの背景色 */
	border: 1px solid; /* テーブルの境界線 */
	text-align: left;
	line-height: 120%;
}
/* --- 利用者一覧テーブルデータセル（td） --- */
.riyousha_kubun_waku td {
	padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
	background-color: #ffffff; /* データセルの背景色 */
	border: 1px solid; /* データセルの下境界線 */

}



/* --- 利用者機能、公開鍵 --- */
div.public_key1{
	width:98%;
	border:2px solid #c0c0c0;
	margin:auto;
	background-color:#f0f0ff;
	display:none;
}
div.public_key1 td{
	padding:0px;
}
div.public_key1 textarea{
	width:100%;
	height:200px;
	margin:0px;
}
div.public_key1 p.button{
	margin:0px;
}
div.public_key2{
	width:98%;
	border:2px solid #c0c0c0;
	margin:auto;
	background-color:#f0f0ff;
	display:none;
}
div.public_key2 p.button{
	margin:0px;
}


/* --- 利用者機能、利用グループ参照クレジット使用率 --- */
td.gauge_td{
	width: 110px;
}
div.gauge_waku {
    /*background: -moz-linear-gradient(top, #555, #222);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));*/
    background-color: #D8D8D8;
    border: solid 1px #c0c0c0;
    width: 100px;
    height: 23px;
}
div.gauge_main {
    /* background: -moz-linear-gradient(top, #9FF, #0FF);
    background: -webkit-gradient(linear, left top, left bottom, from(#9FF), to(#0FF)); */
    background-color: #2E9AFE;
    height: 22px;
}



/* --- 非表示でpostのみを行う欄 --- */
div.hidden_form{
	display:none;
}


.head_en{
	color: #000080;
}



.abci_sekkei_comment {
	border: 4px;
	border-style: solid;
	border-color: #FF0000;
	background: #FFFFFF;
	color: #000000;
}


.display_none{
	display:none;
}

/* --- ノード予約カレンダーテーブル --- */
.calendar_table {
	margin: 0px 0px 5px 5px;
	/*width: 100%;*/ /* テーブルの幅 */
	border: 1px solid; /* テーブルの境界線 */
	border-collapse: collapse; /* テーブルの境界線タイプ */
}

/* --- ノード予約カレンダーテーブル (tr) --- */
.calendar_table tr {
	background-color: #ffffff;  /* データセルの背景色 */
}

/* --- ノード予約カレンダーテーブル見出しセル（th） --- */
.calendar_table th {
	padding: 5px 5px; /* 見出しセルのパディング（上下、左右） */
	background-color: #f5f5f5; /* 見出しセルの背景色 */
	border: 1px solid; /* テーブルの境界線 */
	text-align: center;
	line-height: 120%;
}
/* --- ノード予約カレンダーテーブルデータセル（td） --- */
.calendar_td {
	padding: 0px 2px 0px 2px; /* データセルのパディング（上、左右、下） */
	/* background-color: #ffffff;  データセルの背景色 */
	border: 1px solid; /* データセルの下境界線 */
	width:40px;
	text-align: right;
}

/* --- ノード予約カレンダーテーブルデータセル（td） --- */
.calendar_td_glay {
	padding: 0px 2px 0px 0px; /* データセルのパディング（上、左右、下） */
	background-color: #E0E0E0;  /* データセルの背景色 */
	border: 1px solid; /* データセルの下境界線 */
	width:40px;
	text-align: right;
}


/* --- ノード予約カレンダーテーブル ノード数の文字 --- */
.calendar_node{
    /* color: #2E9AFE; */
    font-weight: bold;
    /* background-color: #E0E0E0; */
}

/* --- ノード予約カレンダーテーブル 横並びにする --- */
.calendar_div{
  display: inline-block;
  vertical-align: top;
  margin: 0px 20px 0px 0px;
}



/* --- パスワード規約 --- */
div.passwd_policy{
	width:98%;
	border:2px solid #c0c0c0;
	margin:auto;
	background-color:#ffffff;
}

.passwd_policy_ul {
	margin-top: 1px ; /*リスト上の余白*/
	margin-bottom: 2px ; /*リスト上の余白*/
	padding-top: 0px ; /*リスト上の余白*/
	padding-bottom: 0px; /*リスト下の余白*/
}




/* --- マウスオーバー表示、ツールチップ --- */
/*
* 使用方法: divタグ(class=tooltip)中に、pタグとdivタグ(class=description)を使う。
*/
.tooltip{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip p{
    margin:0;
    padding:0;
}
.description {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 300px;
    z-index:1; /*z軸でautoより1手前にする(画面最下段で見切れる対策)*/
}
.description:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 330px;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(270deg);
}
.tooltip:hover .description{
    display: inline-block;
    top: 0px;
    left: -340px;
}

/* --- タブ切り替え --- */
/*
* 2021.08.27 一旦コピペ(https://bagelee.com/design/css/create_tabs_using_only_css/)
* (他の参考サイト)後で現在のポータルに合わせて色々弄る予定()
* https://bagelee.com/design/css/create_tabs_using_only_css/
* https://qiita.com/manbolila/items/1da27b78db5e4ac3523f
* https://web-den.com/tabs-css
* https://hsmt-web.com/blog/tab-switching/
*
*/
/*タブ切り替え全体(div)のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 0px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;/* width: 700px; */
  margin: 0 auto;
}

/*タブ(label)のスタイル*/
.tab_item {
  width: calc(100%/3 - 2px);
  height: 50px;
  border-bottom: 3px solid #565656;
  background-color: #fafafa; /* background-color: #d9d9d9; */
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #c0c0c0;/* color: #565656; */

  display: block;
  float: left;
  text-align: center;
  font-weight: normal;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*対象名のラジオボタンを非表示*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;/* デフォルトは非表示 */
  padding:0px;
  clear: both; /* floatを解除 */
  /*overflow: hidden;*//*タブ内のテーブルとかがスクロールできるように*/
}


/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked ~ #first_content,
#tab_2:checked ~ #second_content,
#tab_3:checked ~ #third_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #fafafa;/* background-color: #5ab4bd; */
  color: #000000;/* color: #fff; */
  font-weight: bold;

  border-top: 3px solid #565656;
  border-left: 3px solid #565656;
  border-right: 3px solid #565656;
  border-bottom: none;

}

/*Salesforce用設定*/
fieldset {
  padding: 0;
}
input:not([type="image" i]), textarea  {
  box-sizing: border-box;
}

/* --- 申請系フォームのセル内の赤字コメント --- */
.red_comment {
	color: #ff0000;
}