/** フォーム部品 */

/**
  チェックボックス

1.ラベル表示がない場合
<label class="f-checkbox">
  <input type="checkbox" />
  <span></span>
</label>

2.ラベルを表示する場合
<label class="f-checkbox">
  <input type="checkbox" />
  <span class="note">ここにラベル名</span>
</label>

*/
.f-checkbox input[type="checkbox"] {
  display: none;
}
.f-checkbox span {
  position:relative;
  margin-right: 20px;
}
.f-checkbox span::before {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 1px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.f-checkbox input[type="checkbox"]:checked + span::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 6px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}
.f-checkbox input[type="checkbox"]:disabled {
  opacity: .6;
}
.f-checkbox span.note {
  padding-left: 25px;
}
.f-checkbox span.note::before {
 top: 3px;
}
.f-checkbox input[type="checkbox"]:checked + span.note::after {
 top: -3px;
}
.f-checkbox input[type="checkbox"]:checked + span.note {
  color: #009a9a;
}

/** ラジオボタン

1.ラベル表示がない場合
<label class="f-radio">
    <input type="radio" name="hoge"/>
    <span class="note">ここにラベル</span>
</label>

2.ラベルを表示する場合
<label class="f-radio">
    <input type="radio" name="hoge"/>
    <span class="note">ここにラベル</span>
</label>

*/
.f-radio input[type="radio"] {
  display: none;
}
.f-radio span{
  position: relative;
  margin-right: 20px;
}
.f-radio span::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.f-radio input[type="radio"]:checked + span::after{
  content: "";
  display: block;
  position: absolute;
  top: 5.75px;
  left: 3px;
  width: 9px;
  height: 9px;
  background: #FFD700;
  border: 1px solid #999;
  border-radius: 50%;
}
.f-radio input[type="radio"]:disabled {
  opacity: .6;
}
.f-radio span.note {
  padding-left: 20px;
}
.f-radio input[type="radio"]:checked + span {
/**  color: #009a9a; */
}

/** ボタン */
.f-button {
  color: #6a6a6a;
  min-width: 100px;
  background-color: #F3F3F3;
}
.f-button-small {
  color: #6a6a6a;
  width: 75px;
  background-color: #F3F3F3;
}

.f-button-red {
  color: #6a6a6a;
  min-width: 100px;
  background-color: #ffb1b1;
}

.f-button:disabled, .f-button-red:disabled, .f-button-small:disabled {
  background-color: #F3F3F3;
  opacity: .6;
}
.system-button:disabled {
  background: #ddd;
  opacity: .6;
}

/** テキストボックス */
.f-textbox {
/* height: 24px; */
  width: 100%;
  height: 30px;
  border-radius: 3px;
  border: 1px #6a6a6a solid;
  padding: 0 9px;
}
.f-textbox::-ms-clear,
.f-textbox::-ms-reveal {
  display: none;
}

/** セレクトボックス */
.f-select {
/* height: 24px; */
  width:100%;
  height: 30px;
  border-radius: 3px;
  border: 1px #6a6a6a solid;
  padding: 2px 3px 2px 7px;
}

.f-textbox:disabled,
.f-select:disabled,
.f-textarea:disabled {
  background: #ddd;
  opacity: 1.0;
}

/** テキストエリア */
.f-textarea {
  width:100%;
  overflow-y: scroll;
  box-sizing: border-box;
  font-family: Meiryo;
}

/** ソートアイコン */
.sort-icon {
  float: right
}
/** 検索結果表示テーブル */
.grid-table {
  color: #6a6a6a;
  width: 100%;
  border: 1px #6a6a6a solid;
  border-collapse: collapse;
}
.grid-table tr {
  height : 30px;
}
.grid-table th {
  border: 1px #6a6a6a solid;
}
.grid-table td {
  border: 1px #6a6a6a solid;
  padding: 2px 2px;
}

.grid-table .f-textbox{
  box-sizing: border-box;
}

/** アコーディオンコンテンツ */
.acc-contents {
  width: 96%;
  margin :auto;
}

/** 注意内容 */
.attention {
  color: #ff0000;
  font-weight: bold;
}
/** 必須入力項目 */
.required {
  background-color: #ffcccc;
  color: #ff0000;
}
.required::after {
  content:"『必須』"
}
.required-note-only::after {
  content:"『必須』"
}

/** ポップアップ（G050103）レイアウト制御 */
.popup-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
}
.popup-inner {
  border: 1px #6a6a6a solid;
  border-radius: 20px;
  width: 300px;
  height: 360px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
}
/** G060103用 */
.popup-inner.small {
  width: 320px;
  height: 290px;
}

/** G070101用 */
.popup-inner.small2 {
  width: 320px;
  height: 220px;
}

/**- 2023-02-15 藤咲 ユーザ情報修正機能 add start */
/** G070101本省用 */
.popup-inner.small3 {
  width: 320px;
  height: 250px;
}
/** 2023-02-15 藤咲 ユーザ情報修正機能 add end */

.popup-layout {
  width: 80%;
  mergin: auto;
}

/** メール本文 */
.mailText {
  width: 100%;
  box-sizing: border-box;
}

/** ヘッダーパーツ */
.orange-header {
  color: #FFF;
  background-color: #ffa500;
}
.gray-header {
  color: #FFF;
  background-color: #666052;
}
.blue-header {
  color: #FFF;
  background-color: #4169e1;
}
.green-header {
  color: #FFF;
  background-color: #6bb324;
}

/** ポップアップ（G050700）レイアウト制御 */
.text-contents {
  border:1px solid;
  height: 250px;
  overflow-y: scroll;
}

/** サイズ調整 */
.width-full {
  width: 100%;
}
.width-three-quarters {
  width: 75%
}
.width-harf {
  width: 50%;
}
.width-quarter {
  width: 25%;
}

/** レイアウト調整 */
.align-right {
  text-align: right;
}
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.vertical-top {
  vertical-align: top;
}

/** テキスト色指定 */
.black-text {
  color: #000;
}
.gray-text {
  color: #6a6a6a;
}
.blue-text {
  color: #0000FF;
}
/** 2022.08.03 漆沢 add start ログイン画面の文言を多要素認証に関する文言に差し替える */
.red-text {
  color: #FF0000;
}
/** 2022.08.03 漆沢 add end ログイン画面の文言を多要素認証に関する文言に差し替える */
.error-text {
  color: #ff0000;
}
/** 2022.08.03 漆沢 add start ログイン画面の文言を多要素認証に関する文言に差し替える */
.black-text, .gray-text, .blue-text, .red-text, .error-text {
  vertical-align: middle;
}
/** .black-text, .gray-text, .blue-text, .error-text { */
/**   vertical-align: middle; */
/** } */
/** 2022.08.03 漆沢 add end ログイン画面の文言を多要素認証に関する文言に差し替える */

.margin-y {
  margin-bottom: 10px;
}

.margin-y-double {
  margin-bottom: 20px;
}

/** モーダル画面 */
.modal-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity : .5;
  z-index: 2000;
}
.modal-contents {
  width: 75%;
  height: 80%;
  position: fixed;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 3000;
  overflow-y: scroll;
}
.modal-wrapper {
  display: none;
}

.modal-close-button{
 float: right;
 width:50px;
 height: 30px;
 background: linear-gradient(#ccc, #aaa);
 font-size: 24px;
 padding-top: 0;
 padding-bottom: 0;
 display:block;
 text-align:center;
 color:#666;
 border:1px solid #666;
 border-radius: 0;
}

.modal-margin-top {
  height: 30px;
}

/** 2重送信制御用メッセージ */
#loading {
  display: block;
}
.loading-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity : .2;
  z-index: 5000;
}
.loading-contents {
  border: 1px #6a6a6a solid;
  border-radius: 5px;
  background-color: #ddd;
  width: 250px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  margin: auto;
  z-index: 6000;
}
.loading-note {
  transform: translateY(50%);
  margin-left: 2em;
}

/** ログイン画面レイアウト */
.login-title {
  text-align: center;
  font-size: 14px;
}
.login-contents {
  padding: 20px;
  width: 500px;
  height: 320px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.login-contents-mail {
  padding: 10px;
  width: 560px;
  height: 360px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


.login-contents-ninsho {
  padding: 0px;
  width: 520px;
  height: 320px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.indent {
  margin-left: 1.5em;
}

/** セル着色スタイル */
.now {
  background-color: #87CEEB;
}

/** javascript無効表示スタイル */
#no-script, #no-cookie,#no-edg {
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 9000;
}

/** メインメニュー */
.tableGroup{
  margin: 3px;
  padding: 3px;
  width: calc(100% - 15px);
}
.main-menu-header {
  border-bottom: 3px #666 solid;
}
.main-menu-header[data-color="brown"] {
  background: rgba(79,70,64,0.2);
  border-left: 5px #4f4640 solid;
}
.main-menu-header[data-color="blue"] {
  background: rgba(0,0,255,0.2);
  border-left: 5px #00f solid;
}
.main-menu-header[data-color="yellow"] {
  background: rgba(255,207,124,0.3);
  border-left: 5px #ffcf7c solid;
}
.main-menu-header[data-color="gray"] {
  background: rgba(140,137,135,0.3);
  border-left: 5px #8c8987 solid;
}
.main-menu-header[data-color="green"] {
  background: rgba(155,193,137,0.3);
  border-left: 5px #9bc189 solid;
}
.main-menu-header-icon {
  width: 50px;
  text-align: center;
  padding-top: 5px;
}
.main-menu-header-title {
  color: #1b2e51;
  font-size: x-large;
}
.main-menu-header-note {
  padding: 15px 0;
  color:#595959;
}

/* 2020.07.16 小出 add start 業務カルテ検索ボタン用 */
.main-menu-button-agris2 {
   font-size: 2vw;
   vertical-align: middle;
   width: 95%;
   height:65px;
   border-radius: 5px;
   border: none;
   color: white;
   /** 2022/08/10 渡辺 画面デザイン見直し  赤オレンジ→深緑に変更
   background-color: orangeRed;
   **/
   background-color: #208528;
   
}
/* 2020.07.16 小出 add end 業務カルテ検索ボタン用 */

.main-menu-button {
   font-size: 2vw;
   vertical-align: middle;
   width: 95%;
   height:65px;
   border-radius: 5px;
   border: none;
   color: white;
   background-color: black;
}
.main-menu-button:hover {
   cursor: pointer;
   background-color: cyan !important;
}
.main-menu-button[data-color="brown"] {
  background: #4f4640;
}
.main-menu-button[data-color="blue"] {
  background: #0000ff;
}
.main-menu-button[data-color="yellow"] {
  background: #ffcf7c;
}
.main-menu-button[data-color="gray"] {
  background: #8c8987;
}
.main-menu-button[data-color="green"] {
  background: #9bc189;
}

.main-menu-button-wrapper {
  text-align: center;
  table-layout:fixed;
  width: 49.5%
}

.box-wrapper {
  min-width: 320px;
  vertical-align: top;
}
.box {
 font-size: 14px;
 margin: 5px 0;
 background: white;
 border: 1px solid #421;
}

.box-title {
 font-size: 1.4em;
 background: #8c8987;
 padding: 4px;
 text-align: center;
 color: #FFF;
 font-weight: bold;
 letter-spacing: 0.05em;
}

/** 共通ヘッダ */
.header-menu-table {
  width: 95%;
  margin: 0px 2.5%;
  text-align: center;
  border-collapse: collapse;
 }
.header-menu-table, .header-menu-table th, .header-menu-table td {
   border: solid 1px gray;
}