:root {
    /*色設定*/
    /*ラベル背景*/
    --label-color: #eaeaea;
    /*ニュートラルボタン*/
    --neu-color: #80375e;
    /*タブ用カラー*/
    --tab-color: #2a8ac3;
    /*ベースカラー*/
    --base-color: #1c4ee2;
    /*アクセントカラー*/
    --accent-color: #a2a600;
    /* --hover-color: #467c9b; */
    --hover-color: #004384;
    /*基本白*/
    --white: #ffffff;
    /*基本黒*/
    --black: #131313;
    /* 基本赤 */
    --red: #ff0000;
    /*ポジティブボタン*/
    --posi-color: #dc4e9b;
    /* ポジティブカラー2 */
    --posi-2-color: #d5636a;
    /*罫線などの区切り線など*/
    --gray1: #cdd6dd;
    /*単体アイコンカラーなど*/
    --gray2: #98a6b5;
    /*キャプションなど*/
    --gray3: #869caa;
    /*主に文字要素に使用*/
    --gray4: #3b4043;
    --gray5: #fff8eb;
    --gray6: #666;
    /*基本リンクカラー*/
    --link-color: #4e6abb;
    /*ボーダーカラー*/
    --border-color: #dddddd;
    /* テキストカラー */
    --text-color: #3b4043;
    /* ACTアイコンカラー（お知らせ） */
    --act-color: #fffbe8;
    /* ALERTアイコンカラー（お知らせ） */
    --alert-color: #ffd0d9;
    /* エラーカラー */
    --err-color: #ff0400;
    /* ブルー１ */
    --blue1-color: #028ed0;
    /* --blue3-color: #01a4cb; */
    --blue3-color: #2ab9ff;
    /*追加色*/
    --header-color: #111;
    --tab-header-color: #555555;
    --contents-outer-color: #ffffff;
    --global-sub-menu-color: #efefef;
    --tab-header-not-link-color: #bfbfbf;
    /* 申請管理状態による色の追加 */
    --applying-color: #007fff;
    --approved-color: #00ac97;
    --unapplied-color: #ef857d;
    --self-denial-color: #0000ff;
    --denial-color: #8b0000;
    --withdrawal-color: #a9a9a9;
    /* レコード内で予実の差異表現用の色 */
    --difference-color: #EDBFBE;
    /* グローバルメニューカラー */
    --global-menu-color: #23282AFF;
    --global-menu-text-color: #ffffff;
    /* 編集/訂正ボタンカラー */
    --edit-color: #51c04b;
    /* td見出しカラー */
    --td-headline-color: #a5a5a5;
    /* トグル系thカラー */
    --toggle-th-color: #a2a6a8;
    /* tdを親として使用する場合のカラー */
    --parent-td-fixed: #e6e6e6;
    /* thカラー */
    --th-color: #808080;
    /* rgba-black */
    --rgba-black: rgba(0, 0, 0, 0.87);
    /*状態:在庫カラー*/
    --status-stock: #e1e1e1;
    /*状態:入荷予定カラー*/
    --status-arrival-plan: #d97ad5;
    /*適用済みカラー*/
    --individual-color: #ffd945;
    /*帳票系ボタンカラー*/
    --yellow-color: #e1a03a;
    /*modalカラー*/
    --modal-header-color: #305496;

    /* ヘッダー+明細 高さ */
    --default-height: calc(100vh - 16em) !important;
    /* 照会 高さ */
    --default-list-height: calc(100vh - 28em) !important;
    /*font size */
    --font-size: 13px;
  }

  /* _wで始まるclassを使用する際にwidthを初期化する */
  [class^="_w"] {
    width: 0;
  }

  /* width 1%から100% */
  ._w001 {
    width: 1%;
  }

  ._w002 {
    width: 2%;
  }

  ._w003 {
    width: 3%;
  }

  ._w004 {
    width: 4%;
  }

  ._w005 {
    width: 5%;
  }

  ._w006 {
    width: 6%;
  }

  ._w007 {
    width: 7%;
  }

  ._w008 {
    width: 8%;
  }

  ._w009 {
    width: 9%;
  }

  ._w010 {
    width: 10%;
  }

  ._w011 {
    width: 11%;
  }

  ._w012 {
    width: 12%;
  }

  ._w013 {
    width: 13%;
  }

  ._w014 {
    width: 14%;
  }

  ._w015 {
    width: 15%;
  }

  ._w016 {
    width: 16%;
  }

  ._w017 {
    width: 17%;
  }

  ._w018 {
    width: 18%;
  }

  ._w019 {
    width: 19%;
  }

  ._w020 {
    width: 20%;
  }

  ._w021 {
    width: 21%;
  }

  ._w022 {
    width: 22%;
  }

  ._w023 {
    width: 23%;
  }

  ._w024 {
    width: 24%;
  }

  ._w025 {
    width: 25%;
  }

  ._w026 {
    width: 26%;
  }

  ._w027 {
    width: 27%;
  }

  ._w028 {
    width: 28%;
  }

  ._w029 {
    width: 29%;
  }

  ._w030 {
    width: 30%;
  }

  ._w031 {
    width: 31%;
  }

  ._w032 {
    width: 32%;
  }

  ._w033 {
    width: 33%;
  }

  ._w034 {
    width: 34%;
  }

  ._w035 {
    width: 35%;
  }

  ._w036 {
    width: 36%;
  }

  ._w037 {
    width: 37%;
  }

  ._w038 {
    width: 38%;
  }

  ._w039 {
    width: 39%;
  }

  ._w040 {
    width: 40%;
  }

  ._w041 {
    width: 41%;
  }

  ._w042 {
    width: 42%;
  }

  ._w043 {
    width: 43%;
  }

  ._w044 {
    width: 44%;
  }

  ._w045 {
    width: 45%;
  }

  ._w046 {
    width: 46%;
  }

  ._w047 {
    width: 47%;
  }

  ._w048 {
    width: 48%;
  }

  ._w049 {
    width: 49%;
  }

  ._w050 {
    width: 50%;
  }

  ._w051 {
    width: 51%;
  }

  ._w052 {
    width: 52%;
  }

  ._w053 {
    width: 53%;
  }

  ._w054 {
    width: 54%;
  }

  ._w055 {
    width: 55%;
  }

  ._w056 {
    width: 56%;
  }

  ._w057 {
    width: 57%;
  }

  ._w058 {
    width: 58%;
  }

  ._w059 {
    width: 59%;
  }

  ._w060 {
    width: 60%;
  }

  ._w061 {
    width: 61%;
  }

  ._w062 {
    width: 62%;
  }

  ._w063 {
    width: 63%;
  }

  ._w064 {
    width: 64%;
  }

  ._w065 {
    width: 65%;
  }

  ._w066 {
    width: 66%;
  }

  ._w067 {
    width: 67%;
  }

  ._w068 {
    width: 68%;
  }

  ._w069 {
    width: 69%;
  }

  ._w070 {
    width: 70%;
  }

  ._w071 {
    width: 71%;
  }

  ._w072 {
    width: 72%;
  }

  ._w073 {
    width: 73%;
  }

  ._w074 {
    width: 74%;
  }

  ._w075 {
    width: 75%;
  }

  ._w076 {
    width: 76%;
  }

  ._w077 {
    width: 77%;
  }

  ._w078 {
    width: 78%;
  }

  ._w079 {
    width: 79%;
  }

  ._w080 {
    width: 80%;
  }

  ._w081 {
    width: 81%;
  }

  ._w082 {
    width: 82%;
  }

  ._w083 {
    width: 83%;
  }

  ._w084 {
    width: 84%;
  }

  ._w085 {
    width: 85%;
  }

  ._w086 {
    width: 86%;
  }

  ._w087 {
    width: 87%;
  }

  ._w088 {
    width: 88%;
  }

  ._w089 {
    width: 89%;
  }

  ._w090 {
    width: 90%;
  }

  ._w091 {
    width: 91%;
  }

  ._w092 {
    width: 92%;
  }

  ._w093 {
    width: 93%;
  }

  ._w094 {
    width: 94%;
  }

  ._w095 {
    width: 95%;
  }

  ._w096 {
    width: 96%;
  }

  ._w097 {
    width: 97%;
  }

  ._w098 {
    width: 98%;
  }

  ._w099 {
    width: 99%;
  }

  ._w100 {
    width: 100%;
  }

  /* width px 1 ~ 100 */
  ._w001px { width: 1px; }
  ._w002px { width: 2px; }
  ._w003px { width: 3px; }
  ._w004px { width: 4px; }
  ._w005px { width: 5px; }
  ._w006px { width: 6px; }
  ._w007px { width: 7px; }
  ._w008px { width: 8px; }
  ._w009px { width: 9px; }
  ._w010px { width: 10px; }
  ._w011px { width: 11px; }
  ._w012px { width: 12px; }
  ._w013px { width: 13px; }
  ._w014px { width: 14px; }
  ._w015px { width: 15px; }
  ._w016px { width: 16px; }
  ._w017px { width: 17px; }
  ._w018px { width: 18px; }
  ._w019px { width: 19px; }
  ._w020px { width: 20px; }
  ._w021px { width: 21px; }
  ._w022px { width: 22px; }
  ._w023px { width: 23px; }
  ._w024px { width: 24px; }
  ._w025px { width: 25px; }
  ._w026px { width: 26px; }
  ._w027px { width: 27px; }
  ._w028px { width: 28px; }
  ._w029px { width: 29px; }
  ._w030px { width: 30px; }
  ._w031px { width: 31px; }
  ._w032px { width: 32px; }
  ._w033px { width: 33px; }
  ._w034px { width: 34px; }
  ._w035px { width: 35px; }
  ._w036px { width: 36px; }
  ._w037px { width: 37px; }
  ._w038px { width: 38px; }
  ._w039px { width: 39px; }
  ._w040px { width: 40px; }
  ._w041px { width: 41px; }
  ._w042px { width: 42px; }
  ._w043px { width: 43px; }
  ._w044px { width: 44px; }
  ._w045px { width: 45px; }
  ._w046px { width: 46px; }
  ._w047px { width: 47px; }
  ._w048px { width: 48px; }
  ._w049px { width: 49px; }
  ._w050px { width: 50px; }
  ._w051px { width: 51px; }
  ._w052px { width: 52px; }
  ._w053px { width: 53px; }
  ._w054px { width: 54px; }
  ._w055px { width: 55px; }
  ._w056px { width: 56px; }
  ._w057px { width: 57px; }
  ._w058px { width: 58px; }
  ._w059px { width: 59px; }
  ._w060px { width: 60px; }
  ._w061px { width: 61px; }
  ._w062px { width: 62px; }
  ._w063px { width: 63px; }
  ._w064px { width: 64px; }
  ._w065px { width: 65px; }
  ._w066px { width: 66px; }
  ._w067px { width: 67px; }
  ._w068px { width: 68px; }
  ._w069px { width: 69px; }
  ._w070px { width: 70px; }
  ._w071px { width: 71px; }
  ._w072px { width: 72px; }
  ._w073px { width: 73px; }
  ._w074px { width: 74px; }
  ._w075px { width: 75px; }
  ._w076px { width: 76px; }
  ._w077px { width: 77px; }
  ._w078px { width: 78px; }
  ._w079px { width: 79px; }
  ._w080px { width: 80px; }
  ._w081px { width: 81px; }
  ._w082px { width: 82px; }
  ._w083px { width: 83px; }
  ._w084px { width: 84px; }
  ._w085px { width: 85px; }
  ._w086px { width: 86px; }
  ._w087px { width: 87px; }
  ._w088px { width: 88px; }
  ._w089px { width: 89px; }
  ._w090px { width: 90px; }
  ._w091px { width: 91px; }
  ._w092px { width: 92px; }
  ._w093px { width: 93px; }
  ._w094px { width: 94px; }
  ._w095px { width: 95px; }
  ._w096px { width: 96px; }
  ._w097px { width: 97px; }
  ._w098px { width: 98px; }
  ._w099px { width: 99px; }
  ._w100px { width: 100px; }
  ._w115px { width: 115px; }
  ._w120px { width: 120px; }
  ._w138px { width: 138px; }
  ._w150px { width: 150px; }
  ._w200px { width: 200px; }
  ._w212px { width: 212px; }
  ._w225px { width: 225px; }
  ._w230px { width: 230px; }
  ._w250px { width: 250px; }
  ._w268px { width: 265px; }
  ._w285px { width: 285px; }
  ._w300px { width: 300px; }
  ._w400px { width: 400px; }
  ._w500px { width: 500px; }
  ._w600px { width: 600px; }
  ._w700px { width: 700px; }

  /* 全体用CSS */

  body {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: var(--white);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
    /*  font-family: "游ゴシック Medium", "ヒラギノ角ゴ Pro";*/
    font-size: 13px;
  }

  .ipad{
    position: relative;
    width: 1194px;
    max-width: 1194px;
  }

  input,
  select,
  button,
  textarea {
    font-family: inherit;
    letter-spacing: inherit;
    min-height: 28px !important;
  }

  input,
  select,
  button,
  textarea,
  .font-weight {
    font-weight: 800;
    /*font-weight: 400;*/
  }

  /* ｝｝electはselect-initial_colorで設定しているのでweightを戻す際はそちらも合わせて */
  input::placeholder,
  button::placeholder,
  textarea::placeholder {
    font-weight: 400;
  }

  /*　テーブルinput,select高さ設定　*/
  td input,
  td select {
    height: 30px !important;
  }

  /*　input,select,textarea背景色　*/
  input:not([type="button"]):not([disabled]):not(:read-only),
  select:not(#per_page):not([disabled]),
  textarea {
    background: #fffce8 !important;
  }

  /* inputのplaceholderカラー */
  input::placeholder {
    color: #ccc;
  }

  /* type=numberのspin-button非表示 */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  /* 右よせ */
  .ui.form .vd-number,
  .ui.input .vd-number,
  .vd-number,
  .right,
  .text-right,
  .input-right,
  input[type="number"] {
    text-align: right;
  }

  /* 中央よせ */
  .center {
    text-align: center;
  }

  /* リンクカラー */
  a {
    color: var(--link-color);
  }

  /* 全体設定 */
  .ui.two.column.grid {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    margin: 0;
  }

  .ui.grid > .column:not(.row) {
    padding: 0;
  }

  .ui.column.grid > [class*="one wide"].column,
  .ui.grid > .column.row > [class*="one wide"].column,
  .ui.grid > .row > [class*="one wide"].column,
  .ui.grid > [class*="one wide"].column {
    min-width: 12em;
    height: 100vh;
  }

  .ui.two.column.grid > .one.wide.column > .sp-menu {
    display: none;
  }

  .ui.two.column.grid > .fifteen.wide.column {
    display: flex;
    flex: 1;
    width: 100% !important;
    height: 100%;
    flex-direction: column;
    padding: 0;
    background-color: var(--contents-outer-color);
  }

  /* 改行 */
  .line-break {
    white-space: normal;
  }

  /* semantic uiのCSSを上書き
    親クラスであるtwo wide columnに引っ張られ、サイドメニューのホバー範囲が制限されたため、
    これを回避するため、position: relative;に上書きしている。 */
  .ui.grid > .column:not(.row),
  .ui.grid > .row > .column {
    position: static;
  }

  /* margin-leftの3pxを指定 */
  .mgr-5 {
    margin-left: 3px;
  }

  /* margin-leftで文字前にスペースを作成 */
  .mgr-lft-indent {
      margin-left: 9px;
  }

  /* margin-rightで文字後ろにスペースを作成 */
  .mgr-rgt-indent {
      margin-right: 9px !important;
  }

  .mgr-btm-9 {
    margin-bottom: 9px;
  }

  /* ヘッダーメニュー */
  .header-menu-area {
    list-style-type: none;
    width: 100%;
    height: 2.7em;
    position: relative;
    padding: 0;
    margin: 0 auto 0 0;
    color: var(--white);
    background-color: var(--header-color);
  }

  /* ヘッダータイトル */
  .header-title {
    width: 100%;
    height: 2.7em;
  }

  /* ヘッダータイトル テキスト */
  .header-title p {
    top: 50%;
    width: 100%;
    position: absolute;
    margin-left: 1em;
    font-size: 1.25em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* ヘッダーメニュー 右側 */
  .header-menu-object {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    list-style-type: none;
    top: -1px;
    right: 0;
    position: absolute;
    padding: 0;
    margin: 0;
  }

  /* ヘッダーメニュー 個別 */
  .header-menu {
    cursor: pointer;
    text-align: center;
    margin: 0;
    padding: 0 0.75em;
    color: var(--border-color);
    border-left: 1px solid;
  }

  /* ヘッダーメニュー　アイコン */
  .header-menu-area i {
    line-height: 1.9em;
    margin: 0;
    color: var(--white);
    font-size: 1.5em;
  }

  /* ヘッダーメニュー aタグ */
  .header-menu-object a {
    margin: 0;
  }

  /* ヘッダーメニュー用ツールチップ */
  .tooltip1 {
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 11;
  }

  /* ツールチップ テキスト */
  .description {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #3b4043;
    width: 100px;
    text-align: center;
  }

  /* ツールチップ テキスト before */
  .description:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 60%;
    border: 15px solid transparent;
    border-top: 15px solid #3b4043;
    margin-left: -15px;
    transform: rotateZ(180deg);
  }

  /* ツールチップ ホバー時の位置 */
  .tooltip1:hover .description {
    display: inline-block;
    top: 30px;
    left: -9px;
  }

  /* / ヘッダーメニュー用ツールチップ */

  /* ヘッダーメニュー アイコン設定 */
  .header-icon {
    cursor: pointer;
    display: flex;
    height: 2.7em;
    width: 100%;
    justify-content: center;
    margin-top: -1px;
    transition: background-color 0.3s linear;
  }

  /* ヘッダーメニュー アカウント */
  .header-account {
    display: inline-block;
    margin: 0;
    align-items: center;
    border-top: 1px solid;
    border-left: 1px solid;
    width: 200px;
  }

  /* ヘッダーメニュー　アカウント　アイコン */
  .header-account-image {
    display: flex;
    list-style-type: none;
    margin: 0 0.36em;
    padding: 0;
  }

  /* ヘッダーメニュー アカウント テキスト */
  .account-text {
    width: 154px;
    display: inline-block;
    text-align: center;
    padding: 0;
  }

  /* ヘッダーメニュー アカウント ログイン時部署 width */
  .account-text-first {
    width: 154px;
  }

  /* ヘッダーメニュー アカウント ログイン時部署 */
  .account-text p {
    margin-top: 0.72em;
    font-size: 0.75em;
    margin-left: 0;
    padding: 0;
    line-height: 0.5em;
    white-space: nowrap;
  }

  /* ヘッダーメニュー アカウント 部署選択 エリア  */
  .account-text-select {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* ヘッダーメニュー アカウント 部署選択 テキスト  */
  .account-text-select p {
    width: auto;
    margin-top: 0.72em;
    margin-left: 0;
    padding: 0;
    line-height: 0.5em;
  }

  /* ヘッダーメニュー　アカウント カラー */
  .account-color {
    display: flex;
    justify-content: end;
    width: 6px;
    height: 100%;
  }

  /* ヘッダーメニュー アカウント ドロップダウン アイコン エリア */
  .dropdown-icon {
    display: inline-block;
    margin: 0;
  }

  /* ヘッダーメニュー　アカウント　aリンク */
  .account-menu {
    width: 100%;
    list-style-type: none;
    cursor: pointer;
    border-bottom: 1px solid;
    transition: background-color 0.3s linear;
  }

  /* アラートカラー (不要かも) */
  .alert {
    background-color: var(--alert-color);
  }

  /* ヘッダーメニュー アカウント */
  .sub-select {
    display: none;
    right: 0;
    width: 200px;
    height: 100vh;
    position: absolute;
    z-index: 150;
    padding: 0;
    background-color: var(--white);
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    overflow: auto;
    box-shadow: -2px 0 3px 0 var(--gray1);
  }

  .account-menu-header {
    display: flex;
    cursor: auto;
    width: 100%;
    height: 2.7em;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border-bottom: 1px solid;
    border-color: var(--border-color);
    background-color: #333;
    font-weight: bold;
  }

  .header-account .sub-select a {
    display: flex;
    height: 2.7em;
    /* justify-content: center; */
    align-items: center;
    background-color: var(--white);
    color: var(--border-color);
    opacity: 1;
  }

  .sub-select .account-text-select {
    display: inline-block;
    vertical-align: center;
    text-align: center;
    padding: 0;
    color: var(--text-color);
  }

  .sub-select .account-blank {
    border-bottom: 1px solid var(--border-color);
    height: 2.7em;
  }

  .header-account .sub-select a:hover {
    border-color: var(--border-color);
    background-color: var(--border-color);
  }

  /* クリップ機能 */
  .ui.modal.clip {
    max-height: 900px;
  }

  .clip-btn_des {
    display: block;
    width: 15em;
  }

  .clip-modal-header {
    background-color: var(--base-color);
  }

  .times.circle.outline.icon.cancel-btn.clip-icon {
    padding-top: 6px;
    color: var(--white);
  }

  /* / クリップ機能 */

  .modal-header {
    background-color: var(--base-color);
  }

  .modal-content-segment1 {
    width: 100%;
    background-color: var(--base-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 1.5em;
  }

  .modal-content-segment2 {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    background-color: var(--white);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .modal-content-segment3 {
    width: 100%;
    height: auto;
    /*padding: 5px 3%;*/
    flex-direction: column;
    display: none;
  }

  /*フォームパーツ*/

  #registClip input {
    width: 50%;
    display: inline-block;
  }

  #form-input1 {
    width: 50%;
    display: inline-block;
    float: right;
    background-color: var(--label-color);
  }

  #registClip .form-input3 {
    max-width: 160px !important;
  }

  #registClip label {
    width: 30%;
    background-color: var(--label-color);
    display: inline-block;
    vertical-align: middle;
    padding: 0.67857143em 1em;
    float: left;
    text-align: center;
  }

  .form-parts-clip {
    display: flex;
    margin: 6px 3px;
    overflow: auto;
    height: 100%;
  }

  .form-parts-clip .option-key {
    height: auto;
    background-color: var(--white);
    display: flex;
    justify-self: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

  .modal-content-segment3 .modal-content-segment3-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px 0 6px 0;
  }

  .modal-content-segment3 .modal-content-segment3-button .clip-regist {
    margin-right: 9px;
  }

  /* クリップ済みの者のテーブル */
  .modal-content-segment4 {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: auto;
  }

  /* / クリップ機能 */

  /* main-area */
  .main-area {
    background: var(--contents-outer-color);
    width: 100%;
    height: calc(100% - 2.7em);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
  }

  /* ボタンカラー */

  /* ネガティブ系カラー */
  .negative-2,
  .ui.button.negative-2 {
    background-color: var(--gray3);
    color: var(--white);
  }

  /* ポジティブ系カラー */
  .positive-1,
  .ui.button.positive-1 {
    background-color: var(--posi-color);
    color: var(--white);
  }

  .positive-2 {
    background-color: var(--posi-2-color) !important;
    color: var(--white) !important;
  }

  /* 遷移系カラー */
  .blue3,
  .ui.button.blue3 {
    background-color: var(--blue3-color);
    color: var(--white);
  }

  /* 帳票ボタンカラー */
  .yellow-1,
  .ui.button.yellow-1 {
    background-color: var(--yellow-color);
    color: var(--white);
  }

  /* 編集/訂正ボタンカラー */
  .edit-green,
  .ui.button.edit-green {
    background-color: var(--edit-color);
    color: var(--white);
  }

  /* ベースカラー */
  .base,
  .ui.button.base {
    background-color: var(--base-color);
    color: var(--white);
  }

  .contents-header {
    padding: 18px 9px 2px 9px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--contents-outer-color);
  }

  .contents-header:not(.tab-in-button) {
    border-bottom: solid 0 #000;
    margin-bottom: 8px;
    min-height: 67px
  }

  .btn-wrap {
    width: 60%;
    text-align: left;
  }

  .left-btn-wrap {
    width: 40%;
    text-align: center;
  }

  .right-btn-wrap {
    width: 40%;
    text-align: right;
  }

  .heading,
  .ui.label.heading {
    background-color: var(--label-color);
    font-weight: normal;
    vertical-align: middle;
    display: block;
    border-radius: 0;
    border-bottom: solid 1px #ccc;
  }

  .head-label {
    height: 35px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  .data-label,
  .ui.label.data-label {
    background-color: var(--label-color);
    font-weight: normal;
    vertical-align: middle;
    display: block;
    border-radius: 0;
    border-bottom: solid 1px #ccc;
  }

  .form-parts.ui.labeled.input > .form-span {
    padding: 0.7em 0 0 1em;
  }

  input:not([type="button"]):not([type="submit"]),
  select,
  textarea,
  .border-radius-none {
    border-radius: 0 !important;
  }


  .ui.form,
  .ui.checkbox {
    font-size: 1em;
  }

  .ui.checkbox {
    cursor: pointer;
  }

  .ui.checkbox label,
  .ui.checkbox label:after {
    color: var(--gray4);
    cursor: pointer;
  }

  .ui.form .fields {
    margin: 0 -0.5em 0;
  }

  .form-parts {
    display: block;
    overflow: auto;
  }

  h2 {
    font-size: medium;
    border-bottom: 1px solid var(--gray1);
    padding-left: 9px;
    padding-bottom: 3px;
    margin: 9px 0;
  }

  h3 {
    font-size: 1.1em;
    border-bottom: solid 1px var(--base-color);
    border-left: solid 4px var(--base-color);
    padding: 0.25em 0.25em 0.25em 0.5em;
  }

  h4 {
    font-size: 1em;
    background-color: var(--label-color);
    color: var(--black);
    padding-left: 0.7em;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: bold;
  }

  .x-btn {
    display: inline-block;
    border: 1px solid Black;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    background-color: var(--white);
    padding: 0.1rem;
  }

  .x-btn::before {
    content: "×";
    color: var(--gray4);
    /* vertical-align: middle; */
    font-weight: bold;
  }

  .center-flex {
    display: flex;
    justify-content: center;
  }

  .left {
    text-align: left;
  }

  label.mandatory {
    border-left: solid 4px #f00 !important;
  }

  /* フォームのエラー時の枠設定 */

  .err {
    background-color: #fff6f6 !important;
    border-color: #9f3a38 !important;
  }

  .hidden {
    display: none !important;
  }

  .visibility-hidden {
    visibility: hidden;
    position: absolute;
  }

  .label-bg {
    background-color: var(--label-color);
  }

  .contents-box {
    background: var(--white);
    padding: 0.7em;
  }

  .ui.error.message {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    min-height: 1em;
    max-height: 100%;
    border-radius: initial;
    z-index: 100;
    margin: 0;
    overflow-y: auto;
    opacity: 0.95;
  }

  .ui.success.message {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    min-height: 1em;
    max-height: 100%;
    border-radius: initial;
    z-index: 100;
    margin: 0;
    overflow-y: auto;
    opacity: 0.95;
  }

  /* テーブル設定 */

  table {
    border-collapse: separate;
    border-spacing: 0;
    overflow-y: auto;
    margin: 0;
    width: auto;
  }

  /* 列幅の設定 */

  .col-indent {
    min-width: 9px;
    width: 3px;
  }

  .col-25 {
    min-width: 25px;
  }

  .col-25-fixed,
  .col-25-kotei {
    width: 25px;
    min-width: 25px;
  }

  .col-30 {
    min-width: 30px;
  }

  .col-30-kotei {
    width: 30px;
    min-width: 30px;
  }

  .col-35 {
    min-width: 35px;
  }

  .col-35-kotei {
    width: 35px;
    min-width: 35px;
  }

  .col-40 {
    min-width: 40px;
  }

  .col-40-kotei {
    width: 40px;
    min-width: 40px;
  }

  .col-45 {
    min-width: 45px;
  }

  .col-45-kotei {
    width: 45px;
    min-width: 45px;
  }

  .col-50 {
    min-width: 50px;
  }

  .col-50-kotei {
    width: 50px;
    min-width: 50px;
  }

  .col-55 {
    min-width: 55px;
  }

  .col-55-kotei {
    width: 55px;
    min-width: 55px;
  }

  .col-60 {
    min-width: 60px;
  }

  .col-60-kotei {
    width: 60px;
    min-width: 60px;
  }

  .col-65 {
    min-width: 65px;
  }

  .col-65-kotei {
    width: 65px;
    min-width: 65px;
  }

  .col-70 {
    min-width: 70px;
  }

  .col-70-kotei {
    width: 70px;
    min-width: 70px;
  }

  .col-75 {
    min-width: 75px;
  }

  .col-75-kotei {
    width: 75px;
    min-width: 75px;
  }

  .col-80 {
    min-width: 80px;
  }

  .col-80-kotei {
    width: 80px;
    min-width: 80px;
  }

  .col-85 {
    min-width: 85px;
  }

  .col-85-kotei {
    width: 85px;
    min-width: 85px;
  }

  .col-90 {
    min-width: 90px;
  }

  .col-90-kotei {
    width: 90px;
    min-width: 90px;
  }

  .col-95 {
    min-width: 95px;
  }

  .col-95-kotei {
    width: 95px;
    min-width: 95px;
  }

  .col-100 {
    min-width: 100px;
  }

  .col-100-kotei {
    width: 100px;
    min-width: 100px;
  }

  .col-105 {
    min-width: 105px;
  }

  .col-105-kotei {
    width: 105px;
    min-width: 105px;
  }

  .col-110 {
    min-width: 110px;
  }

  .col-110-kotei {
    width: 110px;
    min-width: 110px;
  }

  .col-115 {
    min-width: 115px;
  }

  .col-115-kotei {
    width: 115px;
    min-width: 115px;
  }

  .col-120 {
    min-width: 120px;
  }

  .col-120-kotei {
    width: 120px;
    min-width: 120px;
  }

  .col-125 {
    min-width: 125px;
  }

  .col-125-kotei {
    width: 125px;
    min-width: 125px;
  }

  .col-130 {
    min-width: 130px;
  }

  .col-130-kotei {
    width: 130px;
    min-width: 130px;
  }

  .col-135 {
    min-width: 135px;
  }

  .col-135-kotei {
    min-width: 135px;
    width: 135px;
  }

  .col-140 {
    min-width: 140px;
  }

  .col-140-kotei {
    width: 140px;
    min-width: 140px;
  }

  .col-145 {
    min-width: 145px;
  }

  .col-145-kotei {
    width: 145px;
    min-width: 145px;
  }

  .col-150 {
    min-width: 150px;
  }

  .col-150-kotei {
    width: 150px;
    min-width: 150px;
  }

  .col-155 {
    min-width: 155px;
  }

  .col-155-kotei {
    width: 155px;
    min-width: 155px;
  }

  .col-160 {
    min-width: 160px;
  }

  .col-160-kotei {
    width: 160px;
    min-width: 160px;
  }

  .col-165 {
    min-width: 165px;
  }

  .col-165-kotei {
    width: 165px;
    min-width: 165px;
  }

  .col-170 {
    min-width: 170px;
  }

  .col-170-kotei {
    width: 170px;
    min-width: 170px;
  }

  .col-175 {
    min-width: 175px;
  }

  .col-175-kotei {
    width: 175px;
    min-width: 175px;
  }

  .col-180 {
    min-width: 180px;
  }

  .col-180-kotei {
    width: 180px;
    min-width: 180px;
  }

  .col-185 {
    min-width: 185px;
  }

  .col-185-kotei {
    width: 185px;
    min-width: 185px;
  }

  .col-190 {
    min-width: 190px;
  }

  .col-190-kotei {
    width: 190px;
    min-width: 190px;
  }

  .col-195 {
    min-width: 195px;
  }

  .col-195-kotei {
    width: 195px;
    min-width: 195px;
  }

  .col-200 {
    min-width: 200px;
  }

  .col-200-kotei {
    width: 200px;
    min-width: 200px;
  }

  .col-205 {
    min-width: 205px;
  }

  .col-205-kotei {
    width: 205px;
    min-width: 205px;
  }

  .col-210 {
    min-width: 210px;
  }

  .col-210-kotei {
    width: 210px;
    min-width: 210px;
  }

  .col-215 {
    min-width: 215px;
  }

  .col-215-kotei {
    width: 215px;
    min-width: 215px;
  }

  .col-220 {
    min-width: 220px;
  }

  .col-220-kotei {
    width: 220px;
    min-width: 220px;
  }

  .col-225 {
    min-width: 225px;
  }

  .col-225-kotei {
    width: 225px;
    min-width: 225px;
  }

  .col-230 {
    min-width: 230px;
  }

  .col-230-kotei {
    width: 230px;
    min-width: 230px;
  }

  .col-235 {
    min-width: 235px;
  }

  .col-235-kotei {
    width: 235px;
    min-width: 235px;
  }

  .col-240 {
    min-width: 240px;
  }

  .col-240-kotei {
    width: 240px;
    min-width: 240px;
  }

  .col-245 {
    min-width: 245px;
  }

  .col-245-kotei {
    width: 245px;
    min-width: 245px;
  }

  .col-250 {
    min-width: 250px;
  }

  .col-250-kotei {
    width: 250px;
    min-width: 250px;
  }

  .col-280 {
    min-width: 280px;
  }

  .col-280-kotei {
    width: 280px;
    min-width: 280px;
  }

  .col-300 {
    min-width: 300px;
  }

  .col-300-kotei {
    width: 300px;
    min-width: 300px;
  }

  .col-320 {
    min-width: 320px;
  }

  .col-320-kotei {
    width: 320px;
    min-width: 320px;
  }

  .col-350 {
    min-width: 350px;
  }

  .col-350-kotei {
    width: 350px;
    min-width: 350px;
  }

  .col-380 {
    min-width: 380px;
  }

  .col-400 {
    min-width: 400px;
  }

  .col-440 {
    min-width: 440px;
  }

  .col-450 {
    min-width: 450px;
  }

  .col-500 {
    min-width: 500px;
  }

  .col-600 {
    min-width: 600px;
  }

  .col-700 {
    min-width: 700px;
  }

  .col-750 {
    min-width: 750px;
  }

  .col-800 {
    min-width: 800px;
  }

  .col-850 {
    min-width: 850px;
  }

  /* 商品 width */
  .col-item {
    min-width: 320px;
  }

  .col-item-short {
    min-width: 250px;
  }

  .col-item-mini {
    min-width: 200px;
  }

  .col-item-long {
    min-width: 450px;
  }

  /* 付帯情報 width */
  .col-spec {
    min-width: 450px;
  }

  .col-spec-short {
    min-width: 320px;
  }

  .col-spec-long {
    min-width: 550px;
  }

  /* 取引先など width */
  .col-client {
    min-width: 300px;
  }

  .col-client-short {
    min-width: 200px;
  }

  .col-client-mini {
    min-width: 150px;
  }

  .col-client-long {
    min-width: 400px;
  }

  /* tableのtheadカラーを決めている 変更したらth-koteiも変更する*/

  tbody tr:first-child td {
    border-top: solid 2px var(--gray1);
  }

  td,
  th {
    border-bottom: 1px solid var(--gray1);
    border-right: 1px solid var(--gray1);
    border-left: 1px solid var(--gray1);
    padding: 0.24em 0.24em;
    overflow: auto;
    position: relative;
    width: auto;
    letter-spacing: 0.1em;
    /* box-shadow: 5px 0px 3px 0px var(--gray1); */
  }

  /*灰色*/
  th {
    background: var(--th-color);
    color: var(--white);
    border-color: var(--white);
    text-align: center;
    font-weight: 400;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  td {
    background: var(--white);
    border-color: var(--gray1);
    /*  padding: 0.25em 0.5em; */
    /*  padding:0;*/
    padding: .25em 0;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  td > span:not(.edit-span):not(.ui-state-default):not(.not-inline) {
    display: inline-block;
  }

  td > span:not(.unit-span):not(.ui-state-default):not(.not-inline):not(.unit),
  td > a,
  td > div > span {
    display: inline-block;
    padding-left: .3em;
  }

  td a,
  td button:not(.attached):not(.product-search-btn) {
    margin-left: .3em !important;
  }

  td .mini.button {
    padding: 0.65em;
  }

  td i.icon:not(.not-block) {
    display: block;
    width: auto;
    margin: 0;
  }

  td i.icon-not-margin,
  td i.icon-not-margin::before {
    margin: 0 !important;
  }

  tr:not(.non-hover):hover td,
  .rowspan-tbl tbody:not(.none-hover):hover td,
  .panel-area__frame:hover {
    background-color: var(--gray5);
    color: var(--black);
  }

  .table-1st-hidden th:nth-child(2),
  .table-1st-hidden td:nth-child(2) {
    display: none;
  }

  /* rowspan使う場合（2行毎） */
  .rowspan-tbl-2 tr:nth-child(4n + 1) td,
  .rowspan-tbl-2 tr:nth-child(4n + 2) td {
    background: #f5f5f5;
  }

  .rowspan-tbl-2 tr:nth-child(4n + 3) td,
  .rowspan-tbl-2 tr:nth-child(4n + 4) td {
    background: var(--white);
  }

  .yoko-kotei {
    z-index: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
  }

  .tate-kotei {
    z-index: 2;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .tateyoko {
    z-index: 3;
  }

  .fix-last {
    box-shadow: 1px 0 0 0 #666;
  }

  .table-wrap {
    overflow: auto;
  }

  .fixed-table-wrap {
    overflow: auto;
    max-height: 350px;
    border-right: 1px solid var(--gray1);
    border-bottom: 1px solid var(--gray1);
  }

  .full-table,
  .w-100 {
    width: 100%;
  }

  .res {
    display: none;
  }

  /* テーブルのページング */

  .bottom-space {
    width: 100%;
    text-align: center;
    padding-top: 0.5em;
  }

  .bottom-space button.button {
    padding: 0.5em 1em;
    border: solid 1px #fff;
  }

  /*タブ*/
  .head-tab {
    vertical-align: bottom;
    background-color: var(--tab-header-color);
  }

  .other-page {
    background-color: var(--base-color);
    border-bottom: none;
    color: var(--white);
  }

  .other-page a {
    color: var(--white);
  }

  .other-page:hover {
    background: var(--blue1-color);
    color: var(--white);
  }

  .now-page {
    background-color: var(--contents-outer-color);
    border-bottom: none;
  }

  .now-page a {
    color: var(--base-color);
  }

  .head-nav {
    list-style: none;
    display: flex;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0.25em 0 0;
    bottom: -1px;
    position: relative;
    margin-left: 9px;
  }

  .head-nav li {
    text-align: center;
    width: 10em;
    border-bottom: none;
    cursor: pointer;
  }

  .head-nav li a {
    display: block;
    padding: 0.5em 1.5em;
  }

  .other-page.center {
    display: block;
    padding: 0.5em 1.5em;
  }

  /* 明細用nav */
  .none-bottom {
    bottom: 0;
  }

  .head-tab-detail {
    margin: -10px -9px 10px -10px;
  }

  .tab-not-link {
    background-color: var(--tab-header-not-link-color);
  }

  .head-nav li span {
    display: block;
    padding: 0.5em 1.5em;
  }

  .pointer {
    cursor: pointer !important;
  }

  .ui.button.negative-2:hover,
  .ui.button.base:hover,
  .ui.button.edit-green:hover,
  .ui.button.positive-1:hover,
  .ui.button.blue3:hover {
    filter: contrast(140%);
  }

  .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:hover {
    border-color: var(--blue1-color);
  }

  .ui.form select {
    padding: 0.25em 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
  }

  .ui select {
    padding: 0.25em 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
  }

  .ui.form select:hover {
    border-color: var(--blue1-color);
  }

  .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + select:hover {
    border-color: var(--blue1-color);
  }

  .ui.input > input:hover,
  .tbl-input:hover,
  .ui .checkbox:hover {
    border-color: var(--blue1-color);
  }

  /* semantic uiのCSSを上書き
    label要素内の文字を上下左右中央寄せにするため */

  .ui.label {
    border-left: solid 4px var(--label-color);
    padding: 0.3em;
  }

  .ui.checkbox.none-border {
    height: auto;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: default;
  }

  td .ui.checkbox.none-border {
    margin-right: 0 !important;
  }

  .ui.checkbox.none-border label {
    padding-left: 1em !important;
  }

  /* datepicker */

  /* 文字サイズ */

  .ui-datepicker {
    font-size: 1rem;
    z-index: 100 !important;
  }

  .ui-datepicker table {
    font-size: 1em;
  }

  /* tableのcss設定の影響を受けてしまうため、不要な部分を初期化する。 */

  .ui-datepicker tr:nth-child(even) td,
  .ui-datepicker tr:nth-child(odd) td {
    background: var(--white);
  }

  .ui-datepicker tr:hover td {
    background-color: var(--white);
    border-bottom: 0;
  }

  /* 土日のカラー設定（日曜始まり） */

  /* 日曜日のカラー設定 */

  td.ui-datepicker-week-end:first-child a.ui-state-default {
    background-color: #ffecec;
    color: #f00 !important;
  }

  /* 土曜日のカラー設定 */

  td.ui-datepicker-week-end:last-child a.ui-state-default {
    background-color: #eaeaff;
    color: #00f !important;
  }

  /* ホバー時の動作 */

  td.ui-datepicker-week-end a.ui-state-hover {
    opacity: 0.8;
  }

  /* 当日を示す色はそのまま */

  td.ui-datepicker-week-end a.ui-state-highlight {
    background-color: #fffa90 !important;
  }

  /* function.cssの内容で表示が崩れてしまうため、上書き */

  @media (max-width: 750px) {
    .ui-datepicker thead {
      display: table-header-group;
    }

    .ui-datepicker td {
      display: table-cell;
      width: auto;
    }
  }

  /* readonlyとdisabledの見た目 */

  .ui.form .disabled.fields .field,
  .ui.form .disabled.field,
  .ui.form .field :disabled,
  .ui.form .field input:read-only,
  .ui.input :disabled,
  .ui.input input:read-only,
  input[type="radio"]:disabled,
  input[type="checkbox"]:disabled {
    pointer-events: none;
    background-color: #f1f1f1;
    color: #000000;
    opacity: 1;
  }

  /* ラジオ、チェックボックスがdisabled時の文字色　白 */
  .ui.checkbox:checked input[disabled] ~ label {
    color: var(--white) !important;
  }

  .st-invalid {
    color: var(--red);
  }

  /* 12分割box */

  .column-box-1-12 {
    width: calc(100% / 12);
  }

  .column-box-2-12 {
    width: calc(100% / 6);
  }

  .column-box-3-12 {
    width: calc(100% / 4);
  }

  .column-box-4-12 {
    width: calc(100% / 3);
  }

  .column-box-5-12 {
    width: calc(100% / 12 * 5);
  }

  .column-box-6-12 {
    width: calc(100% / 2);
  }

  .column-box-7-12 {
    width: calc(100% / 12 * 7);
  }

  .column-box-8-12 {
    width: calc(100% / 3 * 2);
  }

  .column-box-9-12 {
    width: calc(100% / 4 * 3);
  }

  .column-box-10-12 {
    width: calc(100% / 6 * 5);
  }

  .column-box-11-12 {
    width: calc(100% / 12 * 11);
  }

  .column-box-12-12 {
    width: 100%;
  }

  /* 固定boxとレスポンシブbox */

  .box-50px {
    width: 50px;
  }

  .subtract-box-50px {
    width: calc(100% - 50px);
  }

  .box-100px {
    width: 100px;
  }

  .subtract-box-100px {
    width: calc(100% - 100px);
  }

  .box-150px {
    width: 150px;
  }

  .subtract-box-150px {
    width: calc(100% - 150px);
  }

  .box-200px {
    width: 200px;
  }

  .subtract-box-200px {
    width: calc(100% - 200px);
  }

  .box-250px {
    width: 250px;
  }

  .subtract-box-250px {
    width: calc(100% - 250px);
  }

  .box-300px {
    width: 300px;
  }

  .subtract-box-300px {
    width: calc(100% - 300px);
  }

  .box-350px {
    width: 350px;
  }

  .subtract-box-350px {
    width: calc(100% - 350px);
  }

  .box-400px {
    width: 400px;
  }

  .subtract-box-400px {
    width: calc(100% - 400px);
  }

  .box-450px {
    width: 450px;
  }

  .subtract-box-450px {
    width: calc(100% - 450px);
  }

  .box-500px {
    width: 500px;
  }

  .subtract-box-500px {
    width: calc(100% - 500px);
  }

  .box-550px {
    width: 550px;
  }

  .subtract-box-550px {
    width: calc(100% - 550px);
  }

  .box-600px {
    width: 600px;
  }

  .subtract-box-600px {
    width: calc(100% - 600px);
  }

  .box-650px {
    width: 650px;
  }

  .subtract-box-650px {
    width: calc(100% - 650px);
  }

  .box-700px {
    width: 700px;
  }

  .subtract-box-700px {
    width: calc(100% - 700px);
  }

  .box-750px {
    width: 750px;
  }

  .subtract-box-750px {
    width: calc(100% - 750px);
  }

  .box-800px {
    width: 800px;
  }

  .subtract-box-800px {
    width: calc(100% - 800px);
  }

  .box-850px {
    width: 150px;
  }

  .subtract-box-850px {
    width: calc(100% - 150px);
  }

  .box-900px {
    width: 900px;
  }

  .subtract-box-900px {
    width: calc(100% - 900px);
  }

  .box-950px {
    width: 950px;
  }

  .subtract-box-950px {
    width: calc(100% - 950px);
  }

  .box-1000px {
    width: 1000px;
  }

  .subtract-box-1000px {
    width: calc(100% - 1000px);
  }

  .box-1050px {
    width: 1050px;
  }

  .subtract-box-1050px {
    width: calc(100% - 1050px);
  }

  .box-1100px {
    width: 1100px;
  }

  .subtract-box-1100px {
    width: calc(100% - 1100px);
  }

  .box-1150px {
    width: 1150px;
  }

  .subtract-box-1150px {
    width: calc(100% - 1150px);
  }

  .box-1200px {
    width: 1200px;
  }

  .subtract-box-1200px {
    width: calc(100% - 1200px);
  }

  .box-1250px {
    width: 1250px;
  }

  .subtract-box-1250px {
    width: calc(100% - 1250px);
  }

  .box-1300px {
    width: 1300px;
  }

  .subtract-box-1300px {
    width: calc(100% - 1300px);
  }

  .box-1350px {
    width: 1350px;
  }

  .subtract-box-1350px {
    width: calc(100% - 1350px);
  }

  .box-1400px {
    width: 1400px;
  }

  .subtract-box-1400px {
    width: calc(100% - 1400px);
  }

  .box-1450px {
    width: 1450px;
  }

  .subtract-box-1450px {
    width: calc(100% - 1450px);
  }

  .box-1500px {
    width: 1500px;
  }

  .subtract-box-1500px {
    width: calc(100% - 1500px);
  }

  /* placeholderの初期色変更 */

  .ui.labeled.input:not([class*="corner labeled"]) input::placeholder,
  textarea::placeholder {
    color: rgba(191, 191, 191, 0.87);
  }

  .ui.labeled .option[value=""] select {
    border-left-color: var(--blue1-color);
    color: var(--blue1-color);
  }

  /* optionの文字色変更 */

  .form-parts.ui.labeled.input select option,
  td > select > option {
    color: rgba(0, 0, 0, 0.87);
  }

  /* selectの一番目のみ薄くなる */

  .form-parts.ui.labeled.input select option:first-child,
  td > select > option:first-child,
  .select-initial_color {
    color: rgba(191, 191, 191, 0.87) !important;
    font-weight: 400;
  }

  /* selectの見た目が通常カラーになる */
  .select-selection_color {
    color: rgba(0, 0, 0, .87);
  }

  /*search-fields*/

  .search-fields .ui.label.heading {
    width: 100px;
    padding: 0.2em;
  }

  .search-box input[type="text"],
  .search-box select {
    width: calc(100% - 100px);
    padding-left: 1.3em;
  }

  /*フラッシュテキスト*/

  .flash_message {
    position: fixed !important;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 20px;
    padding: .8em;
    z-index: 9999;
    width: 100%;
  }

  .flash_message .error-close {
    padding: .2em .2em .2em .5em;
    font-size: 1.2em;
  }

  .flash_message_success {
    background-color: #4ece4e;
    color: white;
  }

  .flash_message_error {
    background-color: #e5285a;
    color: white;
  }

  .flash_message_info {
    position: fixed !important;
    top: auto;
    bottom: 33px;
    left: 0;
    margin: 0;
    font-size: 20px;
    padding: .8em .8em .8em 1.6em !important;
    width: auto;
    z-index: 9999;
    animation: slideIn 1s ease-in-out 0.5s forwards;
    background-color: #fcf8e2;
    color: var(--black);
    border: solid 2px #fdefd6
  }

  .flash_message__ul {
    line-height: 1.4285em;
  }

  button {
    cursor: pointer;
  }

  /* 登録系商品付帯情報のボタンの角丸を無効化 */
  td button.product-info {
    border-radius: 0 !important;
  }

  td span.t-product-info {
    padding-top: 4px !important;
  }

  table a {
    text-decoration: underline;
    font-weight: 600;
  }

  table a:hover {
    text-decoration: underline;
    color: var(--hover-color);
  }

  table td .names {
    position: relative;
    width: 100%;
    height: 20px;
    display: inline-block;
    overflow: hidden;
  }

  table td .names:after {
    position: absolute;
    top: 0;
    right: -10px;
    content: "...";
    display: inline-block;
    border: solid 1px #f00;
  }

  .header-area {
    width: 100%;
    background-color: var(--alert-color);
    margin-bottom: 10px;
  }

  .footer-area {
    width: 100%;
    background-color: var(--alert-color);
  }

  /*header con-panel*/

  .header-area .control-panel {
    background: #d7d7d7;
    height: 20px;
    position: relative;
  }

  .header-area .control-panel > div {
    display: inline-block;
    width: 49.5%;
    height: 100%;
    vertical-align: middle;
  }

  .header-area .control-panel > div:last-child {
    text-align: left;
    padding-top: 0.35em;
  }

  .header-area .control-panel > div ul {
    display: inline-block;
    max-width: 100%;
    margin: 0 0.5em;
  }

  .header-area .control-panel > div ul li {
    display: inline-block;
  }

  .header-area .control-panel > div ul li a {
    display: inline-block;
    border: solid 1px #999;
    padding: 0.25em 0.75em;
  }

  .header-area .control-panel > div ul li:not(.active-page) > a {
    color: #111;
    background: #ececec;
  }

  .header-area .control-panel > div ul li a:hover {
    background: #fff;
  }

  /*footer con-panel*/

  .footer-area .control-panel {
    background: #d7d7d7;
    height: 34px;
    position: relative;
  }

  .footer-area .control-panel > div {
    display: inline-block;
    width: 49.5%;
    height: 100%;
    vertical-align: middle;
  }

  .footer-area .control-panel > div:last-child {
    text-align: left;
    padding-top: 0.35em;
  }

  .footer-area .control-panel > div ul {
    display: inline-block;
    max-width: 100%;
    margin: 0 0.5em;
  }

  .footer-area .control-panel > div ul li {
    display: inline-block;
  }

  .footer-area .control-panel > div ul li a {
    display: inline-block;
    border: solid 1px #999;
    padding: 0.25em 0.75em;
  }

  .footer-area .control-panel > div ul li:not(.active-page) > a {
    color: #111;
    background: #ececec;
  }

  .footer-area .control-panel > div ul li a:hover {
    background: #fff;
  }

  .footer-area .control-panel button {
    border: solid 1px #999;
    background: #ececec;
    display: inline-block;
    height: 100%;
    margin: 0;
  }

  .footer-area .control-panel button:hover {
    background: #fff;
  }

  .pagination,
  .global-ul
  {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

  /* 申請管理の状態による文字色 */

  /* 申請中の場合の文字色 */
  .status-applying,
  .status-role-3 {
    color: var(--applying-color);
  }

  /* 承認済の場合の文字色 */
  .status-approved,
  .status-role-0 {
    color: var(--approved-color);
  }

  /* 未申請の場合の文字色 */
  .status-unapplied,
  .status-role-5 {
    color: var(--unapplied-color);
  }

  /* 自己承認の場合の文字色 */
  .status-self-denial,
  .status-role-4 {
    color: var(--self-denial-color);
  }

  /* 否認の場合の文字色 */
  .status-denial,
  .status-role-2 {
    color: var(--denial-color);
  }

  /* 取り下げまたは無効の場合の文字色 */
  .status-withdrawal,
  .status-role-1 {
    color: var(--withdrawal-color);
  }

  /* 申請管理の状態によるボタン色 */

  .applying-button,
  .ui.button.applying-button {
    background-color: var(--applying-color);
    color: var(--white);
  }

  .approved-button,
  .ui.button.approved-button {
    background-color: var(--approved-color);
    color: var(--white);
  }

  .unapplied-button,
  .ui.button.unapplied-button {
    background-color: var(--unapplied-color);
    color: var(--white);
  }

  .self-denial-button,
  .ui.button.self-denial-button {
    background-color: var(--self-denial-color);
    color: var(--white);
  }

  .denial-button,
  .ui.button.denial-button {
    background-color: var(--denial-color);
    color: var(--white);
  }

  .withdrawal-button,
  .ui.button.withdrawal-button {
    background-color: var(--withdrawal-color);
    color: var(--white);
  }

  /************************** header-toggle **************************/

  .shrink-open .icon,
  .shrink-close .icon {
    font-size: 200%;
  }

  .shrink-open .icon,
  .shrink-open button {
    cursor: pointer;
  }

  .shrink-close .icon,
  .shrink-close button {
    cursor: pointer;
  }

  .shrink-open,
  .shrink-close {
    margin-top: 10px;
    margin-bottom: 10px;
    width: auto;
  }

  .shrink-data-header span {
    font-weight: bold;
  }

  .shrink-data-span {
    margin-bottom: 10px;
  }

  .shrink-margin-bottom,
  .shrink-data {
    margin-bottom: 5em !important;
  }

  /************************** / header-toggle **************************/

  /************************** 検索内のコンボボックス **************************/

  .search-box .ui.input .select2-wrap-div {
    max-width: none;
  }

  /************************** / 検索内のコンボボックス **************************/

  /*********** 作業中の機能のサイドメニューを常時反転する ***********/

  .global-nav .sub-menu.under-operation .select-area {
    color: var(--base-color);
    background-color: var(--white);
  }

  .global-nav .sub-menu.under-operation .select-area a {
    color: var(--base-color);
  }

  /*********** / 作業中の機能のサイドメニューを常時反転する ***********/

  .w_main_menu {
    display: table;
    table-layout: fixed;
    width: 100%;
    /* ブルー系 */
    background: var(--global-menu-color);
  }

  .global-menu-parent__li--table-cell {
    display: table-cell;
  }

  .global-menu-parent__li--center {
    text-align: center;
  }

  .global-menu-parent__li--blue-border {
    border-left: solid 1px var(--global-menu-color);
  }

  .w_sub_menu {
    position: fixed;
    display: none;
    width: 170px;
    background: var(--global-sub-menu-color);
    border: solid 1px #000;
    z-index: 100;
  }

  .w_main_menu li a,
  .w_sub_menu li a,
  .w_sub_menu li span {
    display: block;
    padding: .5em;
  }

  .global-menu-parent__a--color-white {
    color: #fff;
  }

  .global-menu-parent__a--color-transparent {
    border-top: solid 2px rgba(0, 0, 0, 0);
  }

  .global-menu-parent__a--hover:hover,
  .global-menu-parent__a--hover.menu-active {
    background: var(--contents-outer-color);
    color: #333;
    border-top: solid 2px #0b276e;
  }

  .global-menu-parent__span--display-block {
    display: block;
  }

  .global-menu-child__a {
    color: var(--global-menu-color);
    margin: 0.25em;
    border-radius: 6px;
    text-align: left;
  }

  .global-menu-child__a.menu-active {
    background: #fff;
  }

  .global-menu-child__a:hover {
    text-decoration: underline;
    background: #fff;
  }

  .global-menu-child__a-hover:hover {
    color: var(--link-color);
  }

  .global-menu-child__ul--border {
    border-top: none;
  }

  .global-menu-child__ul--margin-left {
    margin-left: -1px;
  }

  .w_sub_menu_wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .sub-search-open {
    margin-left: -4px;
  }

  /* 右端の共通管理のためのドロップダウンメニューを右側に出すCSS */
  .global-menu-child_ul--right {
    position: fixed;
    right: 0;
    margin-right: -1px;
    width: 170px;
  }

  /* / クリック時サブメニュー起動 */

  /* add 20220808*/
  .modal-content {
    background-color: white;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 1em;
  }

  .modal-msg-area {
    border: solid 1px #aaa;
    padding: .5em;
    margin-bottom: 1em;
  }

  .modal-contents-split {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .modal-contents-split li {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    padding: 0 .5em 0 0;
  }

  .modal-contents-split li .item-setting {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .modal-contents-split li .item-setting > *:first-child {
    display: table-cell;
    width: 35%;
    background: var(--label-color);
    padding: .5em;
  }

  .modal-contents-split li .item-setting > input[type="text"] {
    width: 100%;
    padding: .25em;
  }

  /**************** ヘッダー部・明細部 制御 *******************/

  /* 共通部 */

  /*　コンテンツの説明エリア　*/
  .contents-msg-area {
    background: #f8f8d3 !important;
    border: solid 1px rgba(237, 166, 42, .4);
    color: #7D5411;
    width: 100%;
    padding: .75em;
    margin-bottom: 1em;
    line-height: 1.5;
  }

  .main-area-2 {
    background: var(--contents-outer-color);
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    /* overflow-y: auto; */
  }

  .default-six-height {
    max-height: 550px;
    overflow: auto;
  }

  /* ヘッダー部 */
  .ui.form.left-h {
    overflow-y: auto;
    height: calc(100vh - 13em) !important;
    margin-bottom: 0;
  }

  /* ヘッダーの高さを要素の高さにしたい場合 */
  .ui.form.left-h-max {
    overflow-y: auto;
    max-height: calc(100vh - 13em);
    margin-bottom: 0;
  }

  .ui.form div.field.space-bottom {
    margin-bottom: 7em;
  }

  /* / ヘッダー部 */

  /* 明細部のmargin-buttonを消す */
  .detail-area {
    margin-bottom: 0 !important;
  }

  /* / 明細部のmargin-buttonを消す */

  /* フッターエリア */
  .footer-fixed-left {
    /* width: 405px; */
    position: fixed;
    max-height: 4.5em;
    bottom: 0;
    /* left: 0; */
    margin-left: 0.7em;
    z-index: 10;
  }

  .footer-fixed-right {
    position: fixed;
    /* height: 5.5em; */
    bottom: 0;
    right: 0;
    z-index: 10;
    padding-left: 10px;
  }

  .footer-fixed-right-only {
    position: fixed;
    width: calc(100% - 150px);
    bottom: 0;
    right: 0;
    z-index: 10;
    padding-left: 15px;
  }

  .boder-shadow {
    border-color: var(--border-color);
    box-shadow: -1px 0 6px 0 #999;
  }

  .button-translucent {
    background-color: rgba(255, 255, 255, 0.7);
    height: 5.5em;
  }

  .button-white {
    background-color: #ffffff;
    height: 5.5em;
  }

  .ui.button.detail-regi {
    margin: 15px;
    padding: 10px 150px;
  }

  /**************** / ヘッダー部・明細部 制御 *******************/

  /**************** 新しいh3要素 *******************/
  div.shrink-open.margin-top-area,
  div.shrink-close.margin-top-area {
    margin-top: 2em;
  }

  div.shrink-close.margin-top-area-2 {
    margin-top: 2em;
  }

  .h3-list-1 {
    margin-right: auto;
  }

  .h3-list-1 h3 {
    padding-top: 0.3em;
    border: 0;
  }

  .h3-list-2 {
    margin-left: auto;
    margin-right: 1em;
  }

  .h3-list-1 {
    width: auto;
    margin-bottom: 0.4em;
  }

  /* flexedしたh3の下に項目が隠れないようにmarginをとる */
  .ui.form .field.h3-header-hold,
  .h3-header-hold{
    margin-top: 2.3em;
  }

  .ui.button.h3-button:hover,
  .ui.button.h3-button.now-btn,
  .ui.button.h3-button-toggle.now-btn {
    max-height: 29px;
    background-color: #fff;
    color: black;
  }

  /**************** / 新しいh3要素 *******************/

  /***** 12/14追加 *****/
  /* プレースホルダー左よせ */
  .placeholder-left::placeholder {
    text-align: left;
  }

  /* / プレースホルダー左よせ */

  /* 備考エリア表示用アイコン */
  .remarks-down:not(.up) {
    padding-top: 1em;
  }

  .remarks-down {
    cursor: pointer;
  }

  /* / 備考エリア表示用アイコン */

  /* 削除ボタン用アイコン */
  .delete-icon {
    cursor: pointer;
  }

  .delete-row-btn {
    border: none;
    background-color: transparent;
    width: 25px !important;
  }

  /* / 削除ボタン用アイコン */

  /**************** 新しいinput+button *******************/
  /* input側に設定する */
  .input-to-btn {
    width: calc(100% - 32px) !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* button側に設定する */
  .ui.mini.button.btn-to-search {
    position: absolute;
    margin-left: 0;
    height: 30px;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
  }

  /* buttonが二つあった場合 */
  .input-to-btn-2 {
    width: calc(100% - 60px) !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ui.mini.button.btn-to-search-2 {
    float: right;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 10px;
  }

  /* 検索内とヘッダー部の商品のbuttonに設定する */
  .ui.mini.button.btn-to-search-3 {
    min-width: 0;
    margin-left: -1px;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
  }

  /* 付帯情報 */
  .ui.mini.button.btn-to-search-4 {
    margin-left: -2px;
    color: #fff;
    cursor: pointer;
  }

  /* focus時の枠のラインを統一する */
  input.input-to-btn:focus,
  td:focus {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: rgba(0, 0, 0, 0.87);
  }

  /* focus時の枠のラインを統一する */
  input.input-to-btn:focus-visible,
  td:focus-visible {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: rgba(0, 0, 0, 0.87);
  }

  /* hover時の枠のラインを統一する */
  input.input-to-btn:hover {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: rgba(0, 0, 0, 0.87);
  }

  /**************** / 新しいinput+button *******************/

  /* 明細内buttonの新色 */
  .row-button,
  .ui.button.row-button {
    background-color: var(--blue3-color);
    color: var(--white);
  }

  .ui.button.row-button:hover {
    opacity: 0.75;
  }

  /* / 明細内buttonの新色 */

  /*********** 単位 ***********/

  /* 単位を設定するunitクラスのCSS */
  span.unit > input,
  span.unit:not(.two-unit) > span {
    width: calc(100% - 2.3em) !important;
    overflow-y: hidden !important;
  }

  .unit-span-num {
    display: block;
    width: calc(100% - 2em);
  }

  .unit-span-after {
    display: block;
    width: 2em;
  }

  .input-two-unit {
    width: calc(100% - 4.8em) !important;
  }

  .two-unit-td {
    display: flex;
    align-items: center;
  }

  .two-unit-input {
    width: calc(100% - 4.5em);
  }

  .two-unit-after {
    padding-left: 5px;
  }

  .two-unit-span {
    display: inline-block;
    width: calc(100% - 4.4em);
    padding-right: 4px;
  }

  .right-padding-none {
    padding-right: 0;
  }

  /* / 単位を設定するunitクラスのCSS */

  /* 表示なしの場合 */
  .unit-::after,
  .unit-98::after,
  .unit-none:after {
    content: "";
    display: inline-block;
    width: 1.8em;
  }

  .unit-currency-:after,
  .unit-currency:after {
    content: "";
    display: inline-block;
    width: 1.3em;
  }

  .unit-price-none:after {
    content: "\5186";
    display: inline-block;
    width: 4em;
  }

  /* 重量単位 */
  .unit-kg::after {
    content: "\006b\0067";
    display: inline-block;
    width: 1.8em;
  }

  /* / 重量単位 */

  /* 数量単位 */

  /* カートン ct */
  .unit-01::after,
  .unit-ct::after {
    content: "\0063\0074";
    display: inline-block;
    width: 1.8em;
  }

  /* ケース cs */
  .unit-02::after,
  .unit-cs::after {
    content: "\0063\0073";
    display: inline-block;
    width: 1.8em;
  }

  /* パック pc */
  .unit-03::after,
  .unit-pc::after {
    content: "\0070\0063";
    display: inline-block;
    width: 1.8em;
  }

  /* ピース ps */
  .unit-04::after,
  .unit-ps::after {
    content: "\0070\0073";
    display: inline-block;
    width: 1.8em;
  }

  /* 本 hn */
  .unit-05::after,
  .unit-hn::after,
  .unit-本::after {
    content: "\672C";
    display: inline-block;
    width: 1.8em;
  }

  /* 枚 mi */
  .unit-06::after,
  .unit-mi::after,
  .unit-枚::after {
    content: "\679A";
    display: inline-block;
    width: 1.8em;
  }

  /* 個	ko */
  .unit-07::after,
  .unit-ko::after,
  .unit-個::after {
    content: "\500B";
    display: inline-block;
    width: 1.8em;
  }

  /* パレット　パレ */
  .unit-08::after,
  .unit-pa::after,
  .unit-パレ::after {
    content: "\FF8A\FF9F\FF9A";
    display: inline-block;
    width: 1.8em;
  }

  /* G */
  .unit-09::after,
  .unit-G::after {
    content: "\0047";
    display: inline-block;
    width: 1.8em;
  }

  /* cm */
  .unit-10::after,
  .unit-cm::after {
    content: "\0063\006d";
    display: inline-block;
    width: 1.8em;
  }

  /* 銭 */
  .unit-11::after,
  .unit-銭::after {
    content: "\92AD";
    display: inline-block;
    width: 1.8em;
  }

  /* / 数量単位 */

  /* 通貨単位 */

  /* 円 */
  .unit-currency-01::after {
    content: "\5186";
    display: inline-block;
    width: 1.3em;
  }

  /* ドル $ */
  .unit-currency-02::after {
    content: "\0024";
    display: inline-block;
    width: 1.3em;
  }

  /* ユーロ € */
  .unit-currency-03::after {
    content: "\20ac";
    display: inline-block;
    width: 1.3em;
  }

  /* 元 $ */
  .unit-currency-04::after {
    content: "\5143";
    display: inline-block;
    width: 1.3em;
  }

  /* ウォン $ */
  .unit-currency-05::after {
    content: "\20a9";
    display: inline-block;
    width: 1.3em;
  }

  /* / 通貨単位 */

  /* 通貨単位 英語表記 */

  /* 円 */
  .unit-currency-eng-01::after {
    content: "JPY";
  }

  /* ドル $ */
  .unit-currency-eng-02::after {
    content: "USD";
  }

  /* ユーロ € */
  .unit-currency-eng-03::after {
    content: "EUR";
  }

  /* 元 $ */
  .unit-currency-eng-04::after {
    content: "CHN";
  }

  /* ウォン $ */
  .unit-currency-eng-05::after {
    content: "KRW";
  }

  /* / 通貨単位 英語表記 */

  /* グレーズ % */
  .unit-glaze::after {
    content: "\0025";
  }

  /* / グレーズ */

  /* パーセント % */
  .unit-percent::after,
  .unit-per::after {
    content: "\0025";
    display: inline-block;
    width: 1.8em;
  }

  /* パーセント % */

  /* 単位（例:cs/nwなど） */
  .unit-space input.tbl-input {
    width: calc(100% - 4.2em) !important;
  }

  /* 単価単位(master.php登録分 詳細や一覧表示用?)  (数量単位パターンを元)*/

  /* 単価単位 input用width */
  span.unit-price-01 > input,
  span.unit-price-02 > input,
  span.unit-price-03 > input,
  span.unit-price-04 > input,
  span.unit-price-05 > input,
  span.unit-price-06 > input,
  span.unit-price-07 > input {
    width: calc(100% - 3.5em) !important;
  }

  .unit-price-:after {
    content: "\5186";
    display: inline-block;
    width: 1.8em;
  }

  /* 円/kg */
  .unit-price-01:after,
  .unit-price-02:after,
  .unit-price-03:after,
  .unit-price-04:after {
    content: "\5186/kg";
    display: inline-block;
    width: 3em;
  }

  /* 円/個数 */
  .unit-price-05:after,
  .unit-price-07:after {
    content: "\5186/\500B\6570";
    display: inline-block;
    width: 3.8em;
  }

  /* 円/入数 */
  .unit-price-06:after {
    content: "\5186/\5165\6570";
    display: inline-block;
    width: 3.8em;
  }

  /* / 単価単位(master.php登録分 詳細や一覧表示用?) */

  /* / 単位（例:cs/nwなど） */
  /*********** / 単位 ***********/

  /***** / thのアイコン設定 *****/

  /* ヘッダー部 */
  .ui.form.left-h {
    overflow-y: auto !important;
    max-height: calc(100vh - 13em);
    margin-bottom: 0;
  }

  .ui.form div.field.space-bottom {
    margin-bottom: 7em;
  }

  /* / ヘッダー部 */

  /* 明細部 */
  .flex div.right-h {
    overflow-y: hidden;
    height: calc(100vh - 13em);
    margin-bottom: 0;
  }

  /* 明細部の高さをmax指定 */
  .flex div.right-h-max {
    overflow-y: hidden;
    max-height: calc(100vh - 13em);
    margin-bottom: 0;
  }

  /* すでにフッターがあった場合の合計備考エリア */
  .footer-fixed-right-2 {
    position: fixed;
    bottom: 2.7em;
    right: 0;
    z-index: 10;
    padding-left: 17px;
  }

  /* / 明細部 */

  /* フッターエリア */
  .footer-fixed-left {
    position: fixed;
    max-height: 4.5em;
    bottom: 0;
    margin-left: 0.7em;
    z-index: 10;
  }

  .button-translucent {
    background-color: rgba(255, 255, 255, 0.7);
    height: 5.5em;
  }

  .button-white {
    background-color: #ffffff;
    height: 5.5em;
  }

  .ui.button.detail-regi {
    margin: 15px;
    padding: 10px 150px;
  }

  /**************** / ヘッダー部・明細部 制御 *******************/

  /**************** 新しいh3要素 *******************/
  /* 見出しとして使用するh3 */
  .h3-list-header {
    margin: -10px -9px 9px -10px;
    display: flex;
    flex-wrap: wrap;
    background-color: #cfd6dc;
    max-height: 29px;
  }

  /* ヘッダー部などで使用するfixedさているh3 */
  .h3-list-header-fixed,
  .h3-header__def {
    position: fixed;
    z-index: 2;
    margin: -10px -9px 9px -10px;
    display: flex;
    flex-wrap: wrap;
    background-color: #cfd6dc;
    max-height: 29px;
  }

  h3.h3-shrink-close {
    position: fixed;
    margin: -10px -10px 9px -10px;
    background-color: #cfd6dc;
    width: 148px;
    border: 0;
    height: 29px;
  }

  .h3-list-1 {
    width: auto;
    margin-bottom: 0.4em;
    margin-right: auto;
  }

  .h3-list-1 h3 {
    padding-top: 0.3em;
    border: 0;
  }

  .h3-list-2 {
    margin-left: auto;
    margin-right: 1em;
  }

  /* flexedしたh3の下に項目が隠れないようにmarginをとる */
  .ui.form .field.h3-header-hold {
    margin-top: 2.3em;
  }

  /* h3+button */
  .ui.button.h3-button,
  .ui.button.h3-button-toggle {
    border-radius: 0;
    padding-right: 0.2em;
    padding-left: 0.2em;
    margin: 0 -0.5em 0 0;
    border-style: none solid;
    border-width: 2px;
    border-color: white;
    background-color: #cfd6dc;
    max-height: 29px;
  }

  .ui.button.h3-button:hover,
  .ui.button.h3-button.now-btn,
  .ui.button.h3-button-toggle.now-btn {
    max-height: 29px;
    background-color: var(--white);
    color: var(--black);
  }

  /**************** 新しいinput+button *******************/
  /* input側に設定する */
  .input-to-btn {
    width: calc(100% - 32px) !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* button側に設定する */
  .ui.mini.button.btn-to-search {
    position: absolute;
    margin-left: 0;
    height: 30px;
    color: var(--white);
    border-radius: 0;
    cursor: pointer;
  }

  /* buttonが二つあった場合 */
  .input-to-btn-2 {
    width: calc(100% - 60px) !important;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ui.mini.button.btn-to-search-2 {
    float: right;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 10px;
  }

  /* focus時の枠のラインを統一する */
  input.input-to-btn:focus {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: var(--rgba-black);
  }

  /* focus時の枠のラインを統一する */
  input.input-to-btn:focus-visible {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: var(--rgba-black);
  }

  /* hover時の枠のラインを統一する */
  input.input-to-btn:hover {
    outline-offset: -1px;
    outline: var(--blue3-color) solid 1px;
    color: var(--rgba-black);
  }

  /**************** / 新しいinput+button *******************/

  /* 明細内buttonの新色 */
  .row-button,
  .ui.button.row-button {
    background-color: var(--blue3-color);
    color: var(--white);
  }

  .ui.button.row-button:hover {
    opacity: 0.75;
  }

  /* / 明細内buttonの新色 */

  /* tableのtheadカラー thのbackgroundカラーをコメントアウトしている*/
  thead {
    background-image: linear-gradient(2deg, rgba(0, 85, 165, 1) 10%, rgba(80, 138, 193, 1) 90%);
  }

  /* save系が大きので登録に遷移する場合 */
  .positive-1-mini,
  .ui.button.positive-1-mini {
    background-color: var(--posi-color);
    color: var(--white);
  }

  /* head-tabとボタンが共存する場合のCSS */
  .tab-in-button {
    padding: 0;
    margin-right: 9px;
    background-color: var(--tab-header-color) !important;
  }

  /* アイコンを中央寄せにする */
  .icon-center {
    margin: 0 !important;
  }

  /*********** disabled,readonly時のマウスカーソル ***********/

  :disabled,
  input:read-only:not([type="button"]):not([type='submit']),
  .ui.checkbox.readonly,
  .ui.checkbox input.hidden + label {
    cursor: default !important;
  }

  /*********** / disabled,readonly時のマウスカーソル ***********/

  /***** 一覧用高さ設定 *****/
  .list-height {
    height: calc(100% - 4.2em);
  }

  /***** / 一覧用高さ設定 *****/

  /*** テキストの折り返し ***/
  .text-break {
    word-break: break-all;
  }

  /* お知らせ */
  .notice-push-icon {
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: none;
    background: red;
    color: white;
    margin-right: -18px;
    margin-top: 15px;
    position: fixed;
  }

  .notice-box {
    list-style-type: none;
    cursor: default;
    top: calc(2.7em - 1px);
    right: -500px;
    width: 40em;
    height: calc(100vh - 2.7em);
    position: absolute;
    z-index: 100;
    overflow-y: auto;
    padding: 0;
    color: var(--gray2);
    border: 1px solid;
    border-color: var(--border-color);
    background-color: rgba(255, 255, 255, 1);
    max-height: 100vh;
    box-shadow: -1px 0 6px 0 #999;
    margin: 0;
  }

  .notice-fields {
    margin: 9px;
  }

  .notice-fields__header {
    display: flex;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--gray1);
  }

  .notice-fields__header--title {
    align-items: flex-start;
    display: flex;
    width: 50%;
  }

  .notice-fields__header--atag {
    padding-top: 10px;
    text-decoration: none;
  }

  .notice-fields__header--atag:hover {
    text-decoration: underline;
  }

  .notice-add__main {
    border-bottom: solid var(--gray1) 1px;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 15px;
    padding-top: 15px;
    background: white;
  }

  .notice-add__main:hover {
    background: #fff8eb;
  }

  .notice-add__main--date {
    font-weight: bold;
    color: #3b4043;
  }

  .notice-add__main--plain-txt {
    color: rgba(0, 0, 0, 0.87);
  }

  .notice-add__main--url {
    text-decoration: none;
  }

  .notice-add__main--url:hover {
    text-decoration: underline;
  }

  /* 検索ボタンなどがあるエリアに項目を配置するCSS */
  .list-button__item--left {
    margin-right: 9px;
  }

  .list-button__item--right {
    margin-left: auto;
  }

  .list-button-child__date {
    width: 80px;
  }

  .list-button__item--center {
    margin-top: -5px;
  }

  .list-button__item--left,
  .list-button__item--right {
    width: auto;
    margin-bottom: 0.7em;
  }

  /* 要素を横並びにする時のmargin */
  .label-input__item--margin-right {
    margin-right: 0.25em;
  }

  /* buttonのCSS  */
  .datalist-delete-btn {
    position: absolute;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    z-index: 9999;
    width: 2em;
    height: 2.3em;
  }

  .product-delete-btn {
    position: absolute;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    z-index: 9999;
    width: 2em;
    height: 2.3em;
    right:30px;
  }

  /* datalistの逆三角のmargin-leftを設定 */
  input::-webkit-calendar-picker-indicator {
    margin-left: 1.5em !important;
  }

  /* checkboxホバー時の制御 */
  .ui.checkbox label:hover,
  .ui.checkbox + label:hover {
  }

  /* datalistの×ボタンをアイコンへ変更 */
  .datalist-delete-icon {
    font-size: 0.8em;
    color: #545454;
  }

  .w-50-percent {
    width: 50%;
  }

  .break-word {
    word-break: break-word;
  }

  .span-right {
    margin-left: auto !important;
    width: auto !important;
  }

  /* 買契約進行ゲージボタン */
  .gauge-button-look {
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .gauge-button-look:not(:last-child) {
    border-right: solid 1px white;
  }

  .gauge-area__position {
    justify-content: center;
    margin-bottom: 0.7em;
  }

  .product-modal-input {
    width: 45% !important;
  }

  .margin-right-9 {
    margin-right: 9px;
  }

  .cursor-pointer {
    cursor: pointer !important;
  }

  .product-modal__table--max-height {
    max-height: 600px !important;
  }

  button:focus,
  a[type="button"]:focus,
  td:focus,
  li:focus,
  input[type="button"]:focus {
    outline: 2px solid var(--blue1-color) !important;
  }

  /* ボタン押下による枠線を無くす処理 */
  .calendar-button-focus:focus {
    outline: none !important;
  }

  td:focus {
    outline-offset: -2px;
  }

  .active-page,
  .active-page a {
    background-color: var(--th-color) !important;
    color: var(--white) !important
  }

  .modal-contents-split li {
    padding-right: 0 !important;
  }

  .product-info-modal {
    width: 950px !important;
  }

  .product-info__span--color {
    background-color: var(--gray6);
    color: var(--white);
  }

  .product-info__span--color-margin:not(:first-child) {
    margin-left: 3px;
    margin-right: 9px;
  }

  /* 詳細画面用備考対応  */
  .six-designation-1 {
    max-height: calc(100vh - 22em) !important;
  }

  .icon-none-padding {
    padding: 0 !important;
  }

  /* h3検索条件ログ */
  .h3-span {
    padding: 0.4em 1em 0 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /* width設定 */

  .width-80-percent {
    width: 80% !important;
  }

  .max-width-100 {
    max-width: 100% !important;
  }

  .width-150 {
    width: 150px !important;
  }

  .max-width-250 {
    max-width: 250px !important;
  }

  .width-300 {
    width: 300px !important;
  }

  .width-500 {
    width: 500px !important;
  }

  /* / width設定 */

  /* headerボタン用 */
  .header-button__margin {
    margin-left: 9px !important;
    height: 35px !important;
  }

  .header-button__right-margin {
    margin-left: 90% !important;
    height: 35px !important;
  }

  .header-menu-env {
    cursor: default;
    width: 35px !important;
    margin: 0;
    padding: 0 0.75em;
    color: var(--border-color);
    border: 2px solid var(--white);
  }

  /* QS開発環境カラー */
  .header-menu-env-color-local {
    background-color: var(--white) !important;
  }

  /* QS開発環境表記用文字 */
  .header-menu-env-color-local:before {
    content: 'QS';
    color: var(--black);
    position: absolute;
    bottom: 9px;
  }

  /* TR開発環境カラー */
  .header-menu-env-color-testing {
    background-color: fuchsia !important;
  }

  /* ステージング環境カラー */
  .header-menu-env-color-staging {
    background-color: var(--white) !important;
  }
  .header-menu-env-color-staging:before {
    content: 'jsf';
    color: var(--black);
    position: absolute;
    bottom: 9px;
  }

  /* 本番環境カラー */
  .header-menu-env-color-production {
    background-color: green !important;
  }

  /* ラジオボタンフォーカス時に文字色を変えれないようにする */
  .ui.checkbox.checked input[type="radio"]:focus ~ label {
    color: var(--white) !important;
  }

  /* プリンタ系 */
  .print-header {
    padding: 0 9px 2px 9px;
    width: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--contents-outer-color);
  }

  .preview-button-area {
    text-align: center;
  }

  /*add 230523*/
  .overf-h {
    overflow: hidden;
  }

  .overfx-h {
    overflow-x: hidden;
  }

  .overfy-h {
    overflow-y: hidden;
  }

  /* autocompleteで背景色を変えないように追加 */
  input:-webkit-autofill:not(:disabled):not(:read-only) {
    box-shadow: 0 0 0 1000px #fffce8 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }

  .print-area__display {
    display: inline-block;
  }

  input:-webkit-autofill:disabled,
  input:-webkit-autofill:read-only {
    box-shadow: 0 0 0 1000px #ddd inset !important;
    -webkit-text-fill-color: #999 !important;
  }

  /* 登録、詳細、編集系ヘッダー */
  .header-toggle__div {
    position: fixed;
    left: 130px;
    top: 20%;
    /*height: 200px;*/
    height: calc(100vh - 17.3em) !important;
    border: solid 1px black;
    z-index: 1;
  }

  .header-toggle__div-default {
    position: fixed;
    left: 130px;
    top: 45%;
    /*height: 200px;*/
    height: 100%;
    border: solid 1px black;
    z-index: 1;
  }

  .header-toggle__button {
    line-height: 200px;
    height: 199px;
    width: 25px;
    background-color: var(--white);
    border: none;
  }

  .header-toggle__i {
    font-size: 2.5em !important;
    margin: 0 !important;
    width: auto !important;
  }

  .header-toggle__height {
    position: relative;
    height: calc(100vh - 15em) !important;
  }

  /* / 登録、詳細、編集系ヘッダー */

  /* no-wrap */
  .text-nowrap {
    white-space: nowrap;
  }

  .headline__color {
    background-color: var(--td-headline-color) !important;
    color: var(--white) !important;
  }

  .default-header__max-height {
    overflow-y: auto;
    max-height: calc(100vh - 15em);
    margin-bottom: 0;
  }

  .disabled-link-button {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    background-color: var(--gray3) !important;
    opacity: 0.45;
  }


  .table__max-height--100per {
    max-height: 100% !important;
  }

  /* チェックボックスのみで枠ありのものをcenterにする */
  .check-center::before,
  .check-center::after {
    margin-top: 1px;
    margin-left: 3px;
  }

  /* modalボタンを中央よせにする */
  .modal__button-center {
    display: flex;
    justify-content: center;
  }

  /* modalヘッダーの×ボタンのpaddingを調整 */
  .modal-cancel-button {
    padding-top: 6px !important;
    color: white;
  }

  /* modal下部のbuttonのpaddingを調整*/
  .modal-content__padding {
    padding-bottom: 0.3em !important;
  }

  /* headerにlabel+span */
  .global-header-label {
    background-color: #cfd6dc !important;
    color: black !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: none !important;
  }

  .data-label {
    background-color: #ffffff !important;
    color: black !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: none !important;
  }

  /* list-buttonエリアのボタン以外のwidth */
  .list-button-header-1 {
    width: 80%4;
  }

  .transparent-button {
    background-color: transparent !important;
  }

  /* h3検索条件ログ */
  .h3-span {
    padding: 0.4em 1em 0 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /* paddingを外す */
  .not-padding {
    padding: 0 !important;
  }

  .not-margin {
    margin: 0 !important;
  }

  /* td区切り */
  .table-delimiter__line {
    padding: 0 !important;
    border: #a5b1bc 1px solid;
  }

  /* ローディング */

  /*全画面ローディング*/
  .loading-post:before,
  .loading-get:before {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 100000;
    color: white;
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    text-indent: -9999em;
    -webkit-animation: load1 1.3s infinite linear;
    animation: load1 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

  .loading-post:after,
  .loading-get:after {
    content: '';
    background-color: var(--rgba-black);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99999;
  }

  @-webkit-keyframes load1 {
    0%,
    100% {
      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    50% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
    }
  }

  @keyframes load1 {
    0%,
    100% {
      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    50% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
    }
  }

  /* / ローディング */

  /* ヘッダー部の商品ボタンwidth */
  .product-button__input-width {
    width: calc(100% - 12em - 100px) !important
  }

  .product-button__button-width-half {
    padding: 0.78571429em 0.75em 0.78571429em !important;
    width: 30px !important;
  }

  .td-icon__button {
    padding: 0.78571429em 1.5em 0.78571429em !important;
    margin-right: 0 !important;
    width: 80%;
  }

  /* th下のthのカラーを薄い灰色に変更 */
  .toggle-head th,
  .toggle-head-2 th,
  .toggle-head-2-1 th,
  .tbl-total-head {
    background-color: var(--toggle-th-color) !important;
  }

  .parent-open-color, .parent-open-color:hover {
    background-color: var(--parent-td-fixed) !important;
  }

  /* CSVアップロード */
  .file-name {
    font-size: 1.5em !important;
  }

  /* head-tabを細くする場合のクラス */
  .head-tab__thin {
    margin-left: 1px !important;
    height: 27px !important;
  }

  .accrual-item-box {
    margin-top: 18px;
  }

  /* アイコンのカーソルをポインターに変更 */
  .arrows.alternate {
    cursor: pointer;
  }

  .btn-bottom {
    margin-bottom: 0.7em !important;
  }

  .button-list {
    display: flex;
    flex-direction: column;
  }

  .close-error-area {
    display: flex;
    justify-content: flex-end;
    font-size: large;
  }

  .close-success-area {
    display: flex;
    justify-content: flex-end;
    font-size: large;
  }

  .cnd-keep-center {
    justify-content: center;
  }

  .cnd-keep-center .ui.checkbox {
    border: none;
  }

  .input-box {
    height: 38px;
    width: 550px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-color: var(--border-color);
    padding: 0.8em;
  }

  .biko-area {
    height: 5em;
  }

  .dep-list-wrap {
    max-height: 500px;
  }

  .detail-file-text {
    width: 150px;
    background-color: var(--border-color);
    display: table;
    position: relative;
  }

  .detail-file-text span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .detail-line {
    border: 1px dashed var(--gray1);
  }

  .drop-area-text {
    vertical-align: middle;
    margin: auto;
  }

  .edit-cell button.mate-search,
  .edit-cell button.pro-search,
  .edit-cell button.location-search {
    width: 4em;
    float: right;
  }

  .edit-cell.unit {
    vertical-align: middle;
  }

  .edit-cell.unit input[type="text"] {
    width: calc(100% - 3em);
    padding: 6px;
    vertical-align: middle;
  }

  .error-business-id {
    margin: 0 0 1rem 0;
  }

  .error-close {
    cursor: pointer;
  }

  .success-close {
    cursor: pointer;
  }

  .error-message {
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1.1em;
    margin: 0 0 1rem 0;
  }

  .error-message p {
    font-weight: normal;
  }

  .error-title {
    width: 100%;
    text-align: left;
    font-weight: bold;
    text-decoration-color: #9f3a38;
    font-size: 14px !important;
    text-decoration: underline;
  }

  .success-title {
    width: 100%;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #2c662d;
  }

  .file-upload-drop-area {
    border: 1px solid;
    height: 10em;
    width: calc(100% + 150px);
    /* height: 10em; */
    border-color: var(--border-color);
    text-align: center;
  }

  .file-upload-drop-area p {
    margin-top: 1em;
  }

  .fin-table-button,
  .ui.mini.button.positive-1.fin-table-button {
    margin: 0;
  }

  .flex {
    display: flex;
  }

  .flex-area {
    display: flex;
  }

  .flex-between {
    justify-content: space-between;
  }

  .flex-end {
    justify-content: flex-end;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-space-around {
    justify-content: space-around;
  }

  .flex-align-items {
    align-items: center;
  }

  .disp-inline {
    display: inline;
  }

  .form-parts.ui.labeled.input {
    width: 100%;
    margin-bottom: 0.2em;
  }

  .form-parts.ui.labeled.input select.form-input {
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.67857143em 1em;
  }

  .form-parts.ui.labeled.input.remarks-input-area {
    width: calc(100% - (130px + 46px));
  }

  .form-input-parts.ui.labeled.input {
    width: 100%;
    margin-bottom: 0.2em;
  }

  .form-span {
    padding: 0.7em 0 0 1em;
  }

  .form-span.statistics-code {
    margin-right: 18px;
  }

  .form-span.with-right-btn {
    width: 100%;
  }

  .half-input-bridge {
    margin: auto 4px;
  }

  .head-search {
    display: flex;
    align-items: center;
    vertical-align: middle;
    width: 100%;
  }

  .heading {
    width: 100px;
    font-size: 13px !important;
  }
  .size8 {
    width: 110px;
  }

  .size9 {
    width: 125px;
  }

  .size10 {
    width: 150px;
  }

  .size15 {
    width: 210px;
  }

  .size20 {
    width: 285px;
  }

  .icon-margin i.icon {
    margin: 0;
  }

  .in-search-button input[type="text"],
  .in-search-button select,
  .ui.form .field .in-search-button input[type="text"],
  .ui.form .field .in-search-button select {
    width: calc(100% - 6em - 100px);
  }

  .in-search-button .ui.button {
    min-width: 6em;
  }

  .input-area {
    border: 1px solid var(--gray1);
    margin: 0 0 9px 9px;
    /* padding: 9px; */
  }

  .input-area .field {
    margin-bottom: 0;
  }

  .input-area .heading {
    width: 100px;
  }

  .input-area-10-6 .field {
    margin-bottom: 0;
  }

  .input-area-10-6.ui.form .field {
    margin: 0;
  }

  .input-area-10-6.ui.form .fields {
    margin: 0 0 12px;
  }

  .input-area-10-6.ui.form .fields > .field {
    padding-left: 0;
  }

  .input-unit {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    height: 2.8em;
    line-height: 1.21428571em;
    padding: 0.67857143em 1em;
  }

  .list-area {
    display: flex;
    border-top: 1px solid var(--gray1);
    border-bottom: 1px solid var(--gray1);
    border-left: 1px solid var(--gray1);
    margin: 0 0 9px 0;
  }

  .list-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .list-body-area {
    width: 100%;
    padding: 0 9px 0 0;
  }

  .list-body-area-1 {
    width: 265px;
    padding: 0 9px 0 0;
  }

  .list-body-area-1 tbody {
    cursor: pointer;
  }

  .list-body-area-2 {
    /* margin-left: auto; */
    padding: 0 9px 0 0;
    width: calc(100% - 265px);
  }

  .list-bottom {
    display: flex;
    margin-top: 9px;
  }

  .ovf-auto {
    overflow: auto !important;
  }

  /* 商品検索 */
  .product-modal-input {
    height: 35px !important;
  }

  ._h-100 {
    height: 100%;
  }

  .product-info-modal__label {
    width: 110px !important;
  }

  .list-button-1 {
    /* display: flex; */
    margin-right: auto;
  }

  .list-button-2 {
    margin-left: auto;
  }

  .list-button-1,
  .list-button-2 {
    width: auto;
    margin-bottom: 0.7em;
  }

  .list-button-3 {
    /* display: flex; */
    margin-left: 0;
    margin-right: auto;
  }

  .list-button-svf {
    display: flex !important;
  }

  .list-button-svf__div {
    padding: 4px 0 4px 0 !important;
  }

  .list-footer {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    min-height: 3em;
  }

  .list-header {
    display: flex;
    flex-wrap: wrap;
    min-height: 3em;
  }

  .margin-top-none {
    margin-top: 0;
  }

  .middle-input {
    width: 25% !important;
  }

  .modal .content {
    padding: 1em;
    height: 400px;
  }

  .modal .content.search-condition,
  .modal .content.search-result {
    padding: 1em;
    height: auto;
  }

  .modal .header {
    background-color: var(--base-color);
    color: var(--white);
    padding: 0.5em 0.7em;
  }

  .modal-btn-area {
    margin: auto;
    padding: 0.5em;
  }

  .modal-btn-left {
    width: auto;
    margin-top: 0.7em;
    margin-right: auto;
  }

  .modal-btn-right {
    width: auto;
    margin-top: 0.7em;
    margin-left: auto;
  }

  .modal-dep-header {
    width: 100%;
    background-color: var(--modal-header-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
  }

  .modal-dep-header-text {
    width: 100%;
    text-align: center;
  }

  .modal-drop-area {
    text-align: center;
    margin: 0.7em auto;
    padding: 3em;
    width: 80%;
    height: 200px;
    border: 2px dotted var(--gray1);

    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .modal-text {
    padding: 0 1em;
  }

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

  .modal-x-btn {
    float: right;
  }

  .no-border {
    border: 0;
  }

  .order-up {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    font-size: 0.5em;
    height: 50%;
    cursor: default;
  }

  .output-select {
    width: 400px !important;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .prosessing-instruction-header,
  .prosessing-header {
    overflow-y: auto;
    max-height: calc(100vh - 10em);
    margin-bottom: 0;
  }

  .processing-list-bottom {
    margin-top: 9px;
    text-align: right;
  }

  .purchase-contract-page .field select {
    width: 100%;
  }

  .purchase-contract-page label {
    white-space: nowrap;
  }

  .purchase-contract-wrap-divider-buying,
  .fixed-table-wrap.no-adjustment-h.purchase-contract-wrap-divider-buying {
    max-height: calc(100% - 10em);
  }

  .purchase-footer-total .field {
    display: flex;
  }

  .purchase-footer-total .footer-btn-box {
    margin-top: 3px;
  }

  .purchase-footer-total .footer-btn-box button {
    margin-left: auto;
  }

  .range-search input[type="text"],
  .ui.form .field .ui.input.range-search input[type="text"] {
    width: 30%;
  }

  .rec-num-list-1,
  .rec-num-list-2 {
    float: left;
    margin-right: 9px;
    margin-top: 5px;
  }

  .remarks-area {
    max-width: 130px;
  }

  .remarks-area-head-btn {
    width: auto;
    margin-bottom: 0.7em;
    margin-left: auto;
    margin-right: 0.1em;
  }

  .remarks-btn {
    height: 37px;
    margin-bottom: 0.3em;
  }

  .remarks-select-label {
    width: 127px;
  }

  .requester-field,
  .field.requester-field {
    margin-bottom: 0 !important;
  }

  .right-button {
    margin-left: auto !important;
  }

  .sales-header {
    overflow-y: auto;
    max-height: calc(100vh - 15em);
    margin-bottom: 0;
  }

  .sales-total-area-btn {
    width: 70px;
  }

  .salses-new-footer-button {
    float: right;
  }

  .search-box {
    /* display: none; */
    list-style-type: none;
    cursor: default;
    top: calc(2.7em - 1px);
    right: -500px;
    width: 40em;
    height: calc(100% - 2.7em);
    text-align: unset;
    position: absolute;
    z-index: 100;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    color: var(--gray2);
    border: 1px solid;
    border-color: var(--border-color);
    background-color: rgba(255, 255, 255, 1);
    max-height: 100vh;
    box-shadow: -1px 0 6px 0 #999;
  }

  .search-box .field {
    height: 100%;
    margin-bottom: 0;
  }

  .search-box .heading {
    width: 30%;
  }

  .search-box input.half-input,
  .field input.half-input {
    width: 20%;
  }

  .search-button-area {
    padding: 0 9px 9px;
    text-align: center;
  }

  .search-close {
    text-align: right;
    font-size: 1.5em;
    cursor: pointer;
  }

  .search-fields {
    margin: 9px;
  }

  .search-header {
    display: flex;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--gray1);
  }

  .search-header p {
    font-size: 1em;
  }

  .search-header-close {
    width: 50%;
    text-align: right;
    font-size: 1.5em;
  }

  .search-header-title {
    display: flex;
    width: 50%;
  }

  .search-open {
    padding: 6px 12px;
  }

  .second-contents-box {
    background: var(--white);
    padding-left: 0.7em;
  }

  .six-designation-h {
    /* overflow-y: hidden; */
  }

  .slide-number {
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
  }

  .ovf-auto {
    overflow: auto !important;
  }

  .span-center {
    display: table;
  }

  .span-center-c {
    display: table-cell;
    vertical-align: middle;
  }

  .stock-detail {
    margin-right: 1em;
  }

  .stock-info-list-footer {
    display: flex;
    flex-wrap: wrap;
    height: 3em;
    margin-top: 9px;
  }

  .stock-info-list-footer-button-1 {
    /* display: flex; */
    margin-right: auto;
    margin-left: 9px;
  }

  .stock-info-list-footer-button-2 {
    margin-left: auto;
    margin-right: calc(9px - 0.25em);
  }

  .stock-info-list-footer-button-1,
  .stock-info-list-footer-button-2 {
    width: auto;
    margin-bottom: 0.7em;
  }

  .stock-info-modal-header {
    width: 100%;
    background-color: var(--base-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
  }

  .stock-info-modal-header-text {
    width: 100%;
    text-align: center;
  }

  .sub-box {
    /* padding: 0.5em 1em; */
    top: 50%;
    left: 50%;
    width: auto;
    text-align: center;
    position: absolute;
    padding: 0.5em 1em;
    transform: translate(-50%, -50%);
  }

  .submit-button {
    text-align: center;
  }

  .tate-scroll button {
    white-space: nowrap;
  }

  .tate-scroll,
  .input-area.contents-box.tate-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 10em);
  }

  .tbl-h-300 {
    height: 300px;
  }

  .tbl-input:disabled,
  input.tbl-input:read-only {
    background: #ddd;
    color: #999;
  }

  .tbl-input {
    width: 100%;
    border: 1px solid rgba(34, 36, 38, 0.15);
    padding: 0.5em;
    padding-left: 1.3em !important;
  }

  .tbl-tate-button button {
    display: block !important;
    width: 80%;
    margin: 3px auto !important;
  }

  .tbl-vertical-btn button,
  .tbl-vertical-btn a,
  .tbl-vertical-btn input {
    width: 90%;
  }

  .td-data-list-btn {
    /* width: calc(100% - 40px); */
    width: calc(100% - 38px);
  }

  .text-450-over {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;
  }

  .text-450-over > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline !important;
    max-width: 200px;
  }

  .text-center {
    text-align: center;
    white-space: nowrap;
  }

  .text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
  }

  .total-label {
    max-height: 2.7em
  }

  .two.fields {
    margin: 2em;
  }

  .ui .checkbox {
    /* height: 30px; */
    height: auto;
    padding: 6px;
    margin-left: 9px;
    border-radius: 0.28571429rem;
    border: 1px solid var(--gray1);
    cursor: pointer;
    outline: 1px solid transparent;
  }

  .ui-tooltip {
    min-width: auto;
    max-width: 50%;
    letter-spacing: 0.1em;
    word-break: break-all
  }

  .ui.input.search-in-search .form-input {
    width: calc(100% - 6em - 150px);
  }

  .ui.labeled.input .heading.parent-label {
    margin-right: 1px;
  }

  .ui.mini.button.remarks-box {
    margin-top: 0.3em;
  }

  .ui.mini.button.sales-contract-inside-input,
  .ui.mini.button.sales-contract-inside-history {
    height: 30px;
    padding: 6px;
    margin: 0 0 0 9px;
  }

  .ui.mini.button.search-in-search-btn {
    width: 75px;
  }

  .ui.mini.button.table-button {
    width: auto;
    margin-top: 3px;
  }

  .ui.modal {
    font-size: 1em;
  }

  /* 商品検索 */
  .product-modal-input {
    height: 35px !important;
  }

  ._h-100 {
    height: 100%;
  }

  .product-info-modal__label {
    width: 110px !important;
  }

  .ui.form .field .form-parts input[type="text"],
  .ui.form .field .form-parts input[type="email"],
  .ui.form .field .form-parts select {
    width: calc(100% - 100px);
    padding-left: 1.3em;
  }

  .ui.form.input-area input,
  .ui.form.input-area select {
    max-width: 400px;
    display: inline-block;
    float: left;
  }

  .ui.form.input-area input.qty-input {
    max-width: 100px;
  }

  .unit-span {
    padding: 0.5em 0 0 0.1em;
  }

  .up-confirm-tbl {
    width: calc(150px * 11);
  }

  .up-type label {
    margin-right: 1em;
  }

  .arrival-schedule-header .field input[type="text"],
  .field select {
    width: calc(100% - 100px);
  }

  .warehouse-in-footer-area {
    margin-top: 6px;
  }

  .warehousing-wrap-2,
  .fixed-table-wrap.no-adjustment-h.warehousing-wrap-2 {
    max-height: calc(100vh - 28em);
  }


  .float-left {
    float: left !important;
  }

  .tfoot-fixed {
    position: sticky;
    z-index: 2;
    bottom: 0;
  }

  .tfoot-border td,
  .tfoot-border th {
    border-top: 2px solid var(--gray2) !important;
  }

  /* モーダル画面だとdatepickerが背面にいってしまうので、最前面に */
  #ui-datepicker-div {
    z-index: 9999 !important;
  }

  a.bottom-line {
    border-bottom: 1px solid;
    cursor: pointer;
  }

  /* table表示用 */
  div.tooltip {
    margin: 0;
    padding: 10px;
    max-height: 480px;
    max-width: 720px;
    display: block;
    background-color: #fff;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.1em;
    word-break: break-all;
    border-radius: 2px;
    min-height: 30px;
    top: 100px;
    left: 20px;
    position: absolute;
    z-index: 999;
  }

  div.ui-datepicker {
    z-index: 1005 !important;
    -webkit-filter: none !important;
    filter: none !important;
  }

  i.circle.outline.cancel-btn {
    font-size: 1.5em;
    cursor: pointer;
  }

  label p {
    padding: 0;
    margin: 0;
    line-height: 1em;
  }

  select.detail-select {
    width: 100%;
  }

  span.note-title {
    font-weight: bold;
  }

  td div.ui.checkbox input[readonly] + label::before,
  td div.ui.checkbox input[disabled] + label::before {
    content: "";
    background: #ddd;
    color: #999;
  }

  tr {
    width: 100%;
  }

  .ui select {
    padding: 0.25em 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
  }

  .checkbox.radio > label,
  .checkbox.radio > label:before,
  .checkbox.radio > label:before,
  .checkbox.radio > input {
    cursor: pointer !important;
  }

  .checkbox.radio > input {
    pointer-events: none !important;
  }

  /* モーダル画面だとdatepickerにボカシがかかってしまう（semantic.cssが原因）ので、修正 */

  .blurring.dimmed.dimmable > :not(.dimmer) {
    -webkit-filter: none;
    filter: none;
  }

  /* functionから */
  .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
  }

  .up-confirm-tbl th,
  .up-confirm-tbl td {
    width: 150px;
  }

  div.ui.checkbox.checked:not(.none-border),
  .ui.checkbox.checked:not(.none-border) label {
    background: var(--blue3-color);
    color: var(--white);
  }

  .ui.form .field .ui.labeled.input input,
  .ui.form .field .ui.labeled.input select {
    width: calc(100% - 100px);
  }

  p.tooltip {
    margin: 0;
    padding: 10px;
    max-width: 320px;
    background-color: #fff;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.1em;
    word-break: break-all;
    border-radius: 2px;
    min-height: 30px;
    top: 100px;
    left: 20px;
    position: absolute;
    z-index: 999;
  }

  select.tbl-input:disabled,
  select.tbl-input[disabled],
  select.tbl-input:disabled > option {
    background: #ddd;
    color: #ccc !important;
    opacity: 1;
  }

  span input.input-unit-btn__width {
    width: calc(100% - 4.7em) !important;
  }

  /* td内のチェックボックスがdisabledかreadonly時に灰色にする */
  td div.ui.checkbox input[readonly] + label::before,
  td div.ui.checkbox input[disabled] + label::before {
    content: "";
    background: #ddd;
    color: #999;
  }

  td.sales-new-tbl-select2,
  .sales-root-btn {
    height: 3em;
    overflow: hidden;
  }

  .request-area-2 .field input[type="text"],
  .field select {
    width: 100%;
  }

  /*********  スマホ版検索条件  *********/

  @media (max-width: 750px) {
    .search-box {
      width: 100%;
      bottom: 5em;
      /* height: 50vh; */
      height: 40vh;
      text-align: center;
      position: absolute;
      z-index: 99;
      overflow-y: scroll;
    }

    .ui.input {
      flex-wrap: wrap;
    }

    .search-box .heading {
      width: 35% !important;
    }

    .heading {
      width: 100px;
    }

    .search-box input[type="text"],
    .search-box select {
      width: 65% !important;
    }

    .field input[type="text"],
    .field input[type="password"],
    .field select {
      width: 65% !important;
    }
  }

  /********* / スマホ版検索条件  *********/

  /*********  10:6分割に関するモバイル表示対応  *********/
  @media (max-width: 750px) {
    .grid-10-6 {
      display: block;
    }

    .grid-6-10 {
      display: block;
    }
  }

  /********* / 10:6分割に関するモバイル表示対応 *********/

  /*********   notification_list   *********/
  @media (max-width: 750px) {

    .contents-header {
      position: static;
    }

    .contents-header {
      grid-template-columns: 1fr;
    }

    .main {
      height: calc(100vh - 3.6em - 5em);
    }

    .bottom-space {
      height: 60px;
      display: block;
    }

    /*テーブルの見た目変える*/
    table {
      width: 100%;
    }

    thead {
      display: none;
    }

    tr {
      width: 100%;
    }

    td,
    .res {
      display: block;
      text-align: right;
      width: 100%;
    }

    tr:nth-child(odd) td.res,
    tr:nth-child(even) td.res {
      background-color: var(--base-color);
      color: var(--white);
      font-weight: bold;
      text-align: center;
    }

    td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      margin-right: 10px;
      color: var(--base-color);
    }

    .res-hidden {
      display: none;
    }

    .tbl-input,
    .ui.form.tbl-form input,
    .ui.form.tbl-form select {
      width: 60%;
      display: inline-block;
    }

    .ui.form input[name="show-order"] {
      width: calc(60% - 1.5em);
    }

    .input-area .heading {
      width: 150px;
    }

    .input-area input,
    .input-area select {
      width: calc(100% - 150px);
    }

    .ver-content {
      width: 100%;
      margin: auto;
    }

    /* *********** dashboard ************ */
    .content-info-area {
      flex-direction: column;
      height: calc(100% + 27px);
      justify-content: initial;
    }

    .content-info-index {
      height: 12em;
      margin-bottom: 0;
    }

    /* *********** / dashboard ********** */
    /* *********** notification_list ********** */
    .mail-status-box {
      width: 2em;
    }

    .mail-status-box p {
      margin-top: 1em;
      font-size: 0.36em;
      color: var(--white);
    }

    .mail-kind-box {
      width: 3em;
    }

    .label-110__width {
      width: 110px !important;
    }

    .label-115__width {
      width: 115px !important;
    }

    .mail-kind-box p {
      margin-top: 0.05em;
      font-size: 0.8em;
    }
  }

  /********* / notification_list   *********/

  select {
    cursor: pointer !important;
  }

  /* テーブルの選択商品 */
  .selection-item > td {
    background-color: #fffce8 !important;
    color: var(--black);
  }

  .selection-item > td:nth-child(2) {
    border-left: solid 4px var(--posi-2-color) !important;
  }

  .not-selection-item > td {
    padding-left: 3px;
  }

  .flex-datalist {
    position: relative;
  }

  .h3-btn__def {
    border: solid 1px var(--gray2);
    min-width: 100px;
    text-align: center;
    cursor: pointer;
  }

  .shrink-open .edit-open__shortcut .icon,
  .shrink-close .edit-open__shortcut .icon {
    font-size: 110%;
  }

  /*  アイコン付きボタン  */

  .btn-icon {
    font-size: 120% !important;
    vertical-align: -7%;
  }

  .calendar-icon {
    font-size: 220% !important;
  }

  i.icon.external.alternate {
    margin-right: 0.5em;
  }

  .iconbtn-flex-center {
    display: inline-block;
    align-items: center;
  }

  td div.iconbtn-flex-center {
    vertical-align: -0.2em;
  }

  div.iconbtn-flex-center i {
    opacity: 0.8;
  }


  td button i.icon.external.alternate,
  td button i.icon.cut {
    display: inline-block;
    margin-right: 0em;
  }

  td button i.icon.trash.alternate,
  td button i.icon.print {
    display: inline-block;
    margin-left: 0.2em !important;
    margin-right: 0em !important;
  }

  button.ui.mini.button i.icon.plus.square {
    margin-right: 0.2em;
    margin-left: 0.2em;
  }

  a .iconbtn-flex-center i.icon.edit {
    margin-right: 0.4em;
  }

  /* / アイコン付きボタン */

  input[type="radio"].vd-radio-target.err {
    -webkit-appearance: none;
  }

  input[type="radio"].vd-radio-target.err::after {
    content: '';
    position: absolute;
    height: 13px;
    width: 13px;
    top: 30%;
    right: 41%;
    border: solid 1px #9f3a38;
    border-radius: 50% !important;
    box-sizing: border-box;
    display: block;
  }

  input[type="radio"].vd-radio-target.err:checked::before {
    content: "";
    display: block;
    position: absolute;
    background: red;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    top: 36%;
    right: 44%;
    opacity: 1;
  }

  .control-panel button{
    height: 100% !important;
    min-height: 34px !important;
  }

  .mrg-btm-9 {
    margin-bottom: 9px;
  }

  input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  .field-box-3 {
    display: flex;
  }

  .field-box-3 > div {
    padding-right: 9px;
  }

  .icon-top-0 {
    top: 0 !important;
  }

  .rubber-area {
    overflow-y: hidden;
  }

  a[type="button"]:disabled,
  button.ui.mini.button:disabled {
    background-color: var(--gray3);
    color: #FFF
  }

  .footer-total-area {
    display: flex;
    justify-content: flex-end;
    margin: 1em 1em 1em auto;
  }

  .modal-svf > .print-header {
    background-color: var(--white) !important;
  }

  .blink-text > span,
  .blink-text > i {
    animation: blinking 1s ease-in-out infinite alternate;
  }

  @keyframes blinking {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  /* / テキストボックスのサイズ */
  .width20 {
    width: 21%;
  }

  .width30 {
    width: 29%;
  }

  .width50 {
    width: 41%;
  }

  /* / 横並びフォーム */
  .form-inline {
    margin-left: 18px;
  }

  .form-inline-min {
    margin-left: 5px;
  }

  /* / 縦並びフォーム */
  .form-vertical {
    margin-top: 5px;
  }

  .form-vertical-table {
    margin-top: 30px;
  }

  .form-vertical-button {
    margin-top: 30px;
  }

  .form-vertical-button .submit-btn {
    margin-left: 70px;
  }

  .form-vertical-button .next-btn {
    margin-left: 70px;
  }

  /* / 画面下部固定ボタン */
  .bottom-fixed-btn {
    position:fixed;
    bottom: 20%;
  }

  /* / ラジオボタン */
  .form-radio-parent {
    display: flex;
    font-size: 13px;
  }

  .form-radio-child {
    margin-left: 5px;
  }

  .form-radio {
    position: relative;
    top: 6px;
  }

  .radio-label {
    position: relative;
    bottom: 3px;
  }

  /* / モーダルエリア */
  .search-test {
    background-color: var(--global-menu-color);
    color: var(--white);
  }

  .search-modal .form-child-mgr {
    margin-right: 18px !important;
  }

  .search-modal .form-vertical {
    margin-top: 0.2rem;
  }

  .search-modal .btn-wrapper {
    background: var(--white);
    padding: 0.7em 0;
    display: flex;
    justify-content: space-between;
  }

  .search-modal .result-table td {
    border-bottom: 1px solid var(--gray1);
    border-right: 1px solid var(--gray1);
    border-left: 1px solid var(--gray1);
    padding: 0.24em 0.24em;
    overflow: auto;
    position: relative;
    width: auto;
    letter-spacing: 0.1em;
  }

  .search-modal .fixed-table-wrap {
    overflow: auto;
    max-height: 350px !important;;
    border-right: 1px solid var(--gray1);
    border-bottom: 1px solid var(--gray1);
  }

  .search-modal .form-radio {
    pointer-events: auto !important;
  }

  .search-modal .overflow-visible {
    overflow: visible;
  }


  /* / チェックボックス */
  .form-checkbox-list-parent {
    display: flex;
    font-size: 13px;
  }

  .form-checkbox-list-child {
    margin-left: 5px;
  }

  .form-checkbox-list {
    position: relative;
    top: 6px;
  }

  .checkbox-list-label {
    position: relative;
    bottom: 3px;
  }

  /* / メニュー */
  .menu-title {
    font-size: 25px;
  }

  .menu-btn-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 30px;
  }

  .basis10 {
    flex-basis: 10%;
  }

  .basis15 {
    flex-basis: 17%;
  }

  .basis22 {
    flex-basis: 22%;
  }

  .basis26 {
    flex-basis: 26%;
  }

  .basis28 {
    flex-basis: 28%;
  }

  .basis30 {
    flex-basis: 30%;
  }

  .basis33 {
    flex-basis: 33%;
    align-self: stretch;
  }

  .basis40 {
    flex-basis: 40%;
  }

  .basis42 {
    flex-basis: 42%;
  }

  .basis45 {
    flex-basis: 45%;
  }

  .basis48 {
    flex-basis: 48%;
  }

  .basis50 {
    flex-basis: 50%;
  }

  .basis66 {
    flex-basis: 66%;
  }

  .basis100 {
    flex-basis: 100%;
  }

  .menu-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .menu-btn {
    width: 125px;
    text-align: center ;
    border-radius: 10px;
    /* height: 50px; */
    padding: 8px;
    overflow: hidden;
  }

  .menu-vertical {
    margin-top: 30px;
  }

  .menu-row-2,
  .menu-row-3 {
    margin-top: 30px;
  }
  .form-menu-inline-column1 {
    margin-left: 12.2vw;
  }

  .form-menu-inline-column2 {
    margin-left: 5vw;
  }

  .form-menu-inline-column3 {
    margin-left: 1.8vw;
  }
  /* モニターに繋いだ際のメニュー表示 */
  @media (min-width: 1580px) {
    .form-menu-inline-column1 {
      margin-left: 40%;
    }

    .form-menu-inline-column2 {
      margin-left: 19.7%;
    }

    .form-menu-inline-column3 {
      margin-left: 9.7%;
    }
  }

  /* 受付NOなどのthのスタイル */
  .parent-th {
    color: black;
    background-color: #cfd6dc;
  }

  /* ラベルエリアのスタイル */
  .child-header {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  /* １つ行を開けたい時のスタイル */
  .skip-column {
    margin-top: 40px;
  }

  /* ページング部分のスタイル */
  .page td {
    border: none;
  }

  /* モーダルのスクロール */
  .modal-scrolling {
    max-height: 215px;
    overflow-y: auto;
  }

  .modal-scrolling table {
    width: 100%;
  }

  /* ここからWEB情報用に追加 */
  /* グローバルヘッダ内のスタイル調整 */
  .logout-button {
    border: none;
    width: 100%;
  }
  .logout-button:hover {
    background-color: var(--border-color);
  }
  .account-text {
    color: aliceblue;
  }
  .empty-keep {
    width: 300px;
  }
  .empty-keep-2 {
    width: 200px;
  }
  .empty-keep-3 {
    width: 150px;
  }

  /* テーブルカラムの横幅 */
  .js-col-w-25 {
    width: 25px !important;
  }
  .js-col-w-50 {
    width: 50px !important;
  }
  .js-col-w-70 {
    width: 70px !important;
  }
  .js-col-w-75 {
    width: 75px !important;
  }
  .js-col-w-80 {
    width: 80px !important;
  }
  .js-col-w-100 {
    width: 100px !important;
  }
  .js-col-w-120 {
    width: 120px !important;
  }
  .js-col-w-130 {
    width: 130px !important;
  }
  .js-col-w-150 {
    width: 150px !important;
  }
  .js-col-w-170 {
    width: 170px !important;
  }
  .js-col-w-200 {
    width: 200px !important;
  }
  .js-col-w-240 {
    width: 240px !important;
  }
  .js-col-w-250 {
    width: 250px !important;
  }

  /* モーダル内のスタイル調整 */
  i.circle.outline.cancel-btn-on-modal {
    font-size: 1.5em;
    cursor: pointer;
  }

  #modal-result-area {
    max-height: 350px !important;
    overflow-y: auto;
  }

  .calender-button-on-modal {
    position: relative;
    top: 10px;
    padding-left: 3px;
  }

  .modal-message {
    padding:  0 10px 10px  10px;
  }

  .buttons-on-modal {
    display: flex;
    padding: 0.5em 0 0.5em;
    justify-content: flex-end;
  }

  .distance-hide-on-modal th {
    background-color: #e3e3e3;
    color: black;
  }

  .margin-top-on-modal {
    margin-top: 5px;
  }