/* ------------------------------------------------------ */
/* DSR-H                                                  */
/* 業務システム                                           */
/*  CSS : 共通(dsrhcommon)                                  */
/* ------------------------------------------------------ */
@charset "UTF-8";

/* ------------------------------------------------------ */
/* Setting                                                */
/* ------------------------------------------------------ */
html, body, form {
  margin: 0;
  padding: 0;
}

.clearfix, #container header #headerBox, #container #contents, #leftBox, #centerBox, #rightBox, #container #contents #detail {
  *zoom: 1;
}

  .clearfix:after, #container header #headerBox, #container #contents, #leftBox, #centerBox, #rightBox, #container #contents #detail {
    content: "";
    display: block;
    clear: both;
  }

html {
  /*	font-size: 62.5%; */ /* 10px 8ptとなる */
  /*	font-size: 68.8%; */ /* 11px 8ptとなる */
  /*	font-size: 75%; */ /* 12px 9ptとなる */
  /*	font-size: 81.3%; */ /* 13px 10ptとなる */
  font-size: 0.95rem; /* 1rem=16px程度 */
}

html, body {
  min-width: 320px;
  width: 100%;
  overflow-x: hidden;
}

* {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "Meiryo UI", "メイリオ", sans-serif;
}

/* ------------------
* body
* ------------------*/
body {
  height: 100%;
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
}

  /* ------------------
  * 標準背景色
  * ------------------ */
  body {
    background-color: #F8FAFC;
  }
  /* ------------------
  * Manager Tool Page
  * ------------------ */
  body.manage {
    background-color: #666666;
  }
/* ------------------
 * flexbox
 * ------------------
 */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

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

  .flex.reverse {
    flex-direction: row-reverse;
  }
/* ------------------
 * table
 * ------------------
 */
table {
  /* borderとpaddingをwidthに含める */
  -webkit-box-sizing: border-box; /* Safari, Chrome系 */
  -moz-box-sizing: border-box; /* Mozilla系 */
  box-sizing: border-box; /* CSS3, IE8~, Opera8~ */
  border-collapse: collapse;
}
/* ------------------
 * image
 * ------------------
 */
img {
  border: 0;
}
/* ------------------
 * anchor
 * ------------------
 */
a {
  text-decoration: none;
}

/* ------------------
 * input type=text
 * ------------------
 */
input[type="text"],
input[type="password"],
input[type="number"] {
  outline: none;
  height: 28px;
  padding-top:0;
  padding-bottom:0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  /*  border: 1px solid #00C1F6; */
  border: 1px solid #ADB9CA;
}
  /* TextBox placeholder */
  input[type="text"]::placeholder,
  input[type="password"]::placeholder,
  input[type="number"]::placeholder {
    color:#ACACAC;
    font-size: 12px;
  }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus {
    border: 1px solid #00C1F6;
    box-shadow: 0px 0px 2px #339999;
    -moz-box-shadow: 0px 0px 2px #339999;
    -webkit-box-shadow: 0px 0px 2px #339999;
  }
  /* 使用可能TextBox */
  input[type="text"]:enabled,
  input[type="password"]:enabled,
  input[type="number"]:enabled {
    background-color: #FFFFFF;
  }
  /* 読取り専用 */
  input[type="text"]:read-only,
  input[type="password"]:read-only,
  input[type="number"]:read-only {
    background-color: #F8FAFC;
  }
  /* 使用不可TextBox */
  input[type="text"]:disabled,
  input[type="password"]:disabled,
  input[type="number"]:disabled {
    background-color: #ECECEC;
    color: #AAAAAA !important;
  }
  /* type=numberのときにスピンボックス非表示 */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
  }
/* ------------------
 * Field Label
 * ------------------
 */
td.field-label,
label.field-label,
span.field-label {
  background-color: transparent ; /* 基本は透明(背景色) */
  color: #333333;
  font-size: 0.9rem;
}
/* splanとlabelはサイズを100%にする */
label.field-label,
span.field-label {
  display: block;
  width: 100px;
  height: 100%;
  margin-right:2px; /* 隣の項目との間隔 */
  text-align:center;
  line-height: 30px; /* 各フォームで調整してください */
  /* ここは各フォームのほうがいい? */
  /* text-align-last: justify; */ /* Chrome・Firefox用 */
  /* text-justify: inter-ideograph; */ /* IE・Edge用 */
}
/* 必須項目のラベル(検証中) */
td.required,
label.required,
span.required {
  background-color: #A4AAC3;
  color: #ffffff;
}
/* 小さめのFont */
td.lbl-small,
label.lbl-small,
span.lbl-small {
  font-size: 0.8rem;
}
/* ------------------
 * textarea
 * ------------------
 */
textarea {
  outline: none;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #ADB9CA;
  resize: none;
}

  textarea:enabled {
    background-color: #FFFFFF;
  }

  textarea:read-only {
    background-color: #FFFFFF;
  }

  textarea:focus {
    border: 1px solid #00C1F6;
    box-shadow: 0px 0px 3px #339999;
    -moz-box-shadow: 0px 0px 3px #339999;
    -webkit-box-shadow: 0px 0px 3px #339999;
  }

  textarea:disabled {
    background-color: #ECECEC;
    color: #AAAAAA !important;
  }
/* ------------------
 * select
 * ------------------
 */
select {
  outline: none;
  height: 26px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #ADB9CA;
}
  /* select placeholder */
  select::placeholder {
    color: #ACACAC;
    font-size: 12px;
  }
  /* select focus */
  select:focus {
    border: 1px solid #00C1F6;
    box-shadow: 0px 0px 3px #339999;
    -moz-box-shadow: 0px 0px 3px #339999;
    -webkit-box-shadow: 0px 0px 3px #339999;
  }
/* ------------------
 * CheckBox 
 * WebControlでCssClassを設定するとspan要素で囲まれる
 * ------------------
 */
/* Default CheckBox */
span.check-default {
  display: flex;
  justify-content: flex-start;
  font-size: 1rem;
  padding-left: 5px;
  position: relative;
}
  /* Default CheckBox */
  span.check-default input[type=checkbox] {
    display: none;
  }
    /* Default CheckBox Label To CheckBox */
    span.check-default input[type=checkbox] + label {
      display: block;
      color: #333333;
      font-size: 0.9em;
      line-height: 30px;
      width: auto;
      height: 28px;
      padding-left: 22px;
      background-color: #FFFFFF;
      transition: all 0.25s linear;
      -webkit-transition: all 0.25s linear;
      -moz-transition: all 0.25s linear;
      cursor: pointer;
      position: relative;
    }
      /* チェックボックス風 */
      span.check-default input[type=checkbox] + label::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 1px;
        width: 14px;
        height: 14px;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
      }
    /* チェックされたとき */
    span.check-default input[type=checkbox]:checked + label {
      color: #333333;
      position: relative;
    }
      /* チェックされたとき チェック */
      span.check-default input[type=checkbox]:checked + label::before {
        border: 1px solid #999999;
        background-color: #999999;
      }
      /* チェックされたとき チェック */
      span.check-default input[type=checkbox]:checked + label::after {
        content: '';
        display: block;
        position: absolute;
        top: 9px;
        left: 4px;
        width: 7px;
        height: 4px;
        border-top: 0;
        border-right: 0;
        border-left: 3px solid #FFFFFF;
        border-bottom: 3px solid #FFFFFF;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
      }
/* CheckBox Swutch風 */
span.check-switch {
  display: flex;
  justify-content: flex-start;
  font-size: 1rem;
  padding-left: 3px;
  position: relative;
}

  span.check-switch input[type=checkbox] {
    display: none;
  }

    span.check-switch input[type=checkbox] + label {
      display: inline-block;
      position: relative;
      padding: 4px 0 2px 55px;
      line-height: 22px;
      font-size: 0.9em;
    }
    /* CheckBox Cursor */
    span.check-switch input[type=checkbox]:enabled + label {
      cursor: pointer;
    }
      /* Switch */
      span.check-switch input[type=checkbox]:enabled + label::before,
      span.check-switch input[type=checkbox]:enabled + label::after {
        position: absolute;
        content: "";
        border-radius: 50%;
        -webkit-border-radius: 50%;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
      /* Switch 外観 */
      span.check-switch input[type=checkbox]:enabled + label::before {
        position: absolute;
        content: "OFF";
        padding-left: 22px;
        color: #999999;
        font-size: 0.7em;
        line-height: 22px;
        background-color: #EFEFEF;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        border: 1px solid #A9A9A9;
        height: 20px;
        width: 23px; /* padding-left込みで45px */
        left: 5px;
      }
      /* Switch ボタン */
      span.check-switch input[type=checkbox]:enabled + label::after {
        position: absolute;
        background-color: #A8B2BC;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        opacity: 1;
        height: 18px;
        width: 18px;
        left: 7px;
      }
    /* Switch Checked Text */
    span.check-switch input[type=checkbox]:checked + label {
      font-weight: bold;
    }
      /* Switch Checked ボタン */
      span.check-switch input[type=checkbox]:checked + label::before {
        content: "ON";
        padding-left: 5px;
        color: #0066FF;
        font-size: 0.7em;
        line-height: 22px;
        width: 40px; /* padding-left込みで45px */
        background-color: #E1F0FF;
      }
      /* Switch On */
      span.check-switch input[type=checkbox]:checked + label::after {
        background-color: #3399FF;
        left: 32px;
      }
    /* Switch Disabled */
    span.check-switch input[type=checkbox]:disabled + label {
      color: #AAAAAA;
    }

      span.check-switch input[type=checkbox]:disabled + label::before,
      span.check-switch input[type=checkbox]:disabled + label::after {
        position: absolute;
        content: "";
        border-radius: 50%;
        -webkit-border-radius: 50%;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
      /* Disabled Switch 外観 */
      span.check-switch input[type=checkbox]:disabled + label::before {
        position: absolute;
        content: "";
        padding-left: 18px;
        color: #CCCCCC;
        font-size: 0.6em;
        line-height: 20px;
        background-color: #EFEFEF;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        border: 1px solid #CCCCCC;
        height: 18px;
        width: 20px; /* padding-left込みで40px */
        left: 5px;
      }
      /* Disabled Switch ボタン */
      span.check-switch input[type=checkbox]:disabled + label::after {
        position: absolute;
        background-color: #CCCCCC;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        opacity: 1;
        height: 16px;
        width: 16px;
        left: 7px;
      }
    /* Switch Checked ボタン */
    span.check-switch input[type=checkbox]:checked:disabled + label::before {
      content: "";
    }
    /* Switch On */
    span.check-switch input[type=checkbox]:checked:disabled + label::after {
      left: 27px;
    }
/* ------------------
 * Button 
 * 主に住宅メーカー専用コンテンツ内配置ボタン
 * ------------------
 */
input[type=submit].btn-mblue,
input[type=button].btn-mblue {
  outline: none;
  display: block;
  width: 80px;
  height: 30px;
  margin-left: 3px;
  font-size: 0.92rem;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  background-color: #5F879F;
  border: 1px solid #476375;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  cursor: pointer;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
}
  /* Hover */
  input[type=submit].btn-mblue:hover,
  input[type=button].btn-mblue:hover {
    border: 1px solid #587C92;
    background-color: #FFFFFF;
    color: #476375;
  }
  /* Focus */
  input[type=submit].btn-mblue:focus,
  input[type=button].btn-mblue:focus {
    border: 1px solid #0066FF;
    background-color: #FFFFFF;
    color: #476375;
  }
  /* Disabled */
  input[type=submit].btn-mblue:disabled,
  input[type=button].btn-mblue:disabled {
    border: 1px solid #BBBBBB;
    background-color: #E8E8E8;
    color: #999999;
    cursor: not-allowed;
  }
/* --------------------------------------------------------------------------- */
/* Common                                                                      */
/* --------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------
  Container
------------------------------------------------------------------------------------------------------------*/
#container {
  height: 100%;
  padding-top: 40px; /* Header分(Headerの高さ変えたら変更してください) */
  padding-bottom: 35px; /* Footer分(Footerの高さ変えたら変更してください) */
}

/* ----------------------------------------------------------------------------------------------------------
  HEAD
------------------------------------------------------------------------------------------------------------*/
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 200;
  font-size:1rem;
}
  /* 既定ヘッダー */
  header #pnlHeader {
    width: 100%;
    height: 40px;
    padding: 0 10px 0 20px;
    background-color: #244062;
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 1em;
  }
    /* 例外ページ ヘッダー */
    header #pnlHeader.exception {
      background-color: #CD5C5C;
    }
    /* 左サイド(機能名または処理名) */
    header #pnlHeader #pnlFuncName {
      height: 35px;
      padding-top: 3px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
    }
      /* 機能名(処理名)・モード名 */
      header #pnlHeader #pnlFuncName a span,
      header #pnlHeader #pnlFuncName span {
        display: block;
        color: #FFFFFF;
        font-weight: bold;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
      }
        /* 機能名または処理名 */
        header #pnlHeader #pnlFuncName span.job {
          font-size: 1.5rem;
          line-height: 36px;
        }
        /* 処理モード名 */
        header #pnlHeader #pnlFuncName span.mode {
          font-size: 1.1rem;
          line-height: 30px;
        }
    /* 右サイド */
    header #pnlHeader #pnlHeadRight {
      height: 36px;
      font-size: 1rem;
      display: flex;
      justify-content: right;
      flex-direction: column;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
    }
      /* 処理日 */
      header #pnlHeader #pnlHeadRight .date {
        height: auto;
        font-size: 0.9em;
        color: #FFFFFF;
      }
    /* アカウント */
    header #pnlHeader #pnlUseAccount {
      position: relative;
      height: 36px;
      display: flex;
      justify-content: right;
      flex-direction: column;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
      cursor: pointer;
    }
      /* アカウントボックス */
      header #pnlHeader #pnlUseAccount .account {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 2px;
        padding-right: 30px; /* Toggleボタン用 */
        font-size: 1em;
      }
        /* 会社名・利用者名 */
        header #pnlHeader #pnlUseAccount .account span {
          display: block;
          color: #FFFFFF;
        }
          /* 会社名 */
          header #pnlHeader #pnlUseAccount .account span.corp {
            min-height: 12px;
            font-size: 0.8em;
            line-height: 14px;
          }
          /* 利用者名 */
          header #pnlHeader #pnlUseAccount .account span.user {
            font-size: 0.9em;
            line-height: 22px;
          }
   /* 住宅メーカー専用ヘッダー */
    header #pnlHeader.maker-portal {
      width: 100%;
      height: 39px;
      background-color: #4080C4;
      border-bottom: 1px solid #1E90FF;
      padding: 0 0 0 20px;
      margin-bottom: 3px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1em;
      cursor: pointer;
    }
      /* 住宅メーカー専用ポータル アカウントボックス */
      header #pnlHeader.maker-portal #pnlUseAccount .account {
        position: relative;
        padding-right: 30px; /* Toggleボタン用 */
      }
        /* 住宅メーカー名 */
        header #pnlHeader.maker-portal #pnlUseAccount .account span.corp {
          min-height: 12px;
          font-size: 0.8em;
          line-height: 14px;
        }
        /* 住宅メーカー利用者名 */
        header #pnlHeader.maker-portal #pnlUseAccount .account span.user {
          font-size: 0.9em;
          height: 18px;
          line-height: 22px;
          text-align: right;
          padding-right: 16px;
          position: relative;
        }
          /* 住宅メーカー利用者名 */
          header #pnlHeader.maker-portal #pnlUseAccount .account span.user::before {
            content: '様';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            color: #FFFFFF;
            font-size: 0.8em;
          }
    /* ナビボタン*/
    header #pnlHeader #pnlUseAccount .navi {
      position: absolute;
      display: block;
      top: 12px;
      right: 3px;
      width: 18px;
      height: 2px;
      background: #FFFFFF;
    }

      header #pnlHeader #pnlUseAccount .navi::before,
      header #pnlHeader #pnlUseAccount .navi::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 18px;
        height: 2px;
        background: #FFFFFF;
      }

      header #pnlHeader #pnlUseAccount .navi::before {
        top: 7px;
      }

      header #pnlHeader #pnlUseAccount .navi::after {
        top: 14px;
      }
/* DefSize */
@media screen and (max-width: 1050px) {
  /* 機能名または処理名 */
  header #pnlHeader #pnlFuncName span {
    font-size: 1.2rem;
  }
}
/* Tablet */
@media screen and (max-width: 820px) {
  /* 機能名または処理名 */
  header #pnlHeader #pnlFuncName span {
    font-size: 1.2rem;
  }
  /* 住宅メーカー名 */
  header #pnlHeader.maker-portal #pnlUseAccount .account span.corp {
    white-space: nowrap;
    max-width: 380px;
    font-size: 0.7em;
    overflow: hidden;
  }
}
/* Tablet */
@media screen and (max-width: 720px) {
  /* 住宅メーカー名 */
  header #pnlHeader.maker-portal #pnlUseAccount .account span.corp {
    max-width: 280px;
  }
}
/* SmartPhone */
@media screen and (max-width: 600px) {
  /* 機能名または処理名 */
  header #pnlHeader #pnlFuncName span {
    font-size: 1.1rem;
  }
  /* 住宅メーカー名 */
  header #pnlHeader.maker-portal #pnlUseAccount .account span.corp {
    font-size: 0.65em;
    max-width: 220px;
    height: 15px;
    overflow: hidden;
  }
}
/* ----------------------------------------------------------------------------------------------------------
  NAVIGATION
------------------------------------------------------------------------------------------------------------*/
header #pnlLocalNavi {
  position: fixed;
  z-index: 200;
  width: auto;
  height: auto;
  top: 42px;
  right: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}
/* Local Navigation */
  header #pnlLocalNavi ul#lstLocalNavi {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #FFFFFF;
    z-index: 200;
    overflow: hidden;
    width: 180px;
  }

    header #pnlLocalNavi ul#lstLocalNavi li {
      position: relative;
      border-bottom: 1px #ccc solid;
    }

      header #pnlLocalNavi ul#lstLocalNavi li::before {
        display: block;
        content: "";
        margin: auto;
        position: absolute;
        top: 12px;
        right: 10px;
        width: 10px;
        height: 10px;
        border-top: 2px solid #CCCCCC;
        border-right: 2px solid #CCCCCC;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      header #pnlLocalNavi ul#lstLocalNavi li a {
        display: block;
        padding: 8px 10px;
        background-image: url(../images/menu_icon.png);
        background-repeat: no-repeat;
        background-size: 14px auto;
        background-position: right 10px center;
        color: #666666;
      }

        header #pnlLocalNavi ul#lstLocalNavi li a:hover {
          background-color: #E6E6FA;
        }
/* ----------------------------------------------------------------------------------------------------------
  Contents
------------------------------------------------------------------------------------------------------------*/
section#contents {
  height:auto;
  position:relative;
}
/* Tablet SmartPhone */
@media screen and (max-width: 820px) {
}
/* ----------------------------------------------------------------------------------------------------------
  DSR-h Symbol
------------------------------------------------------------------------------------------------------------*/
section#contents #pnlCompanySymbol {
  position:absolute;
  top:1px;
  right:10px;
  width: 80px;
  height: 18px;
  font-size: 1rem;
  background-image: url(../image/img-symbol.png);
  background-repeat: no-repeat;
  background-size: auto 16px;
  background-position: right;
  opacity: 0.6;
}
/* Tablet SmartPhone */
@media screen and (max-width: 600px) {
  section#contents #pnlCompanySymbol {
    position: absolute;
    top: 1px;
    right: unset;
    left: 50%;
    height: 24px;
    margin: auto;
    background-size: auto 22px;
    background-position: center;
    opacity: 0.9;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
  }
}
/* ----------------------------------------------------------------------------------------------------------
  HousingMaker Poratl SmartNavi
------------------------------------------------------------------------------------------------------------*/
section#contents #pnlSmartNavi {
  position: absolute;
  top: 1px;
  right: 5px;
}
/* Tablet SmartPhone */
@media screen and (max-width: 500px) {
}
/* ----------------------------------------------------------------------------------------------------------
  Work State (幅は個別に各ページで設定)
------------------------------------------------------------------------------------------------------------*/
#pnlWorkState {
/*  height: 20px;
  margin: 0 auto;
  background: #FFFFFF;
*/
display:none;
}
/* ----------------------------------------------------------------------------------------------------------
  Job Date
------------------------------------------------------------------------------------------------------------*/
section#contents #pnlNowDate {
  display: flex;
  justify-content: right;
  align-items:center;
  width: auto;
  height: 20px;
  font-size: 1rem;
}
  /* Maker MasterPage */
  section#contents #pnlNowDate.maker-today {
    padding-right: 60px; /* シンボル分 */
  }
  /* 処理日 */
  section#contents #pnlNowDate .today {
    text-align: right;
  }
    /* 処理日 */
    section#contents #pnlNowDate .today span {
      font-size: 0.9em;
      color: #808080;
    }
/* スマホ タブレット */
@media screen and (max-width: 820px) {
  section#contents #pnlNowDate.maker-today {
    padding-right: 70px; /* シンボル分 */
    height: 18px;
  }
    /* 処理日 */
    section#contents #pnlNowDate .today span {
      font-size: 0.8em;
    }
}
/* スマホ タブレット */
@media screen and (max-width: 600px) {
  section#contents #pnlNowDate {
    padding-right: 10px; /* シンボル分 */
  }
}
/* ----------------------------------------------------------------------------------------------------------
  Action Button
------------------------------------------------------------------------------------------------------------*/
section#action {
  position: relative;
  width: 100%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
}
  /* ActionBox Button Box */
  section#action #pnlMainAction {
    margin-top: 8px;
    display: flex;
    justify-content: center;
  }
    /* ActionBox Button */
    section#action #pnlMainAction input[type=button],
    section#action #pnlMainAction input[type=submit] {
      display: block;
      outline: none;
      font-size: 1.05em;
      min-width: 130px;
      height: 32px;
      margin: 1px 5px;
      padding-left: 16px;
      padding-right: 16px;
      text-align: center;
      letter-spacing: 0.1em;
      text-decoration: none;
      white-space: pre-wrap;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
      -webkit-appearance:none;
      cursor: pointer;
    }
      /* Action Button */
      section#action #pnlMainAction input[type=button].btn-action,
      section#action #pnlMainAction input[type=submit].btn-action {
        color: #FFFFFF;
        background-color: #6C9BD2;
        border: 1px solid #00608D;
      }
      /* Small Font Button */
      section#action #pnlMainAction input[type=button].btn-small,
      section#action #pnlMainAction input[type=submit].btn-small {
        font-size: 0.85em;
        padding-left: 12px;
        padding-right: 12px;
      }
      /* Important Button */
      section#action #pnlMainAction input[type=button].btn-imp,
      section#action #pnlMainAction input[type=submit].btn-imp {
        color: #FFFF00;
      }
      /* Action Button Default(既定) */
      section#action #pnlMainAction input[type=button].btn-default,
      section#action #pnlMainAction input[type=submit].btn-default {
        color: #FFFF00;
      }
      /* Action Button Recept(受付入力系) */
      section#action #pnlMainAction input[type=button].btn-recept,
      section#action #pnlMainAction input[type=submit].btn-recept {
        color: #FFFFFF;
        background-color: #3EB370;
        border: 1px solid #00608D;
      }
      /* Action Button Contract(契約実績系) */
      section#action #pnlMainAction input[type=button].btn-cont,
      section#action #pnlMainAction input[type=submit].btn-cont {
        color: #FFFFFF;
        background-color: #e9967a;
        border: 1px solid #826B42;
      }
      /* Menu Button */
      section#action #pnlMainAction input[type=button].btn-menu,
      section#action #pnlMainAction input[type=submit].btn-menu,
      section#action #pnlMainAction input[type=button].btn-close,
      section#action #pnlMainAction input[type=submit].btn-close,
      section#action #pnlMainAction input[type=button].btn-back,
      section#action #pnlMainAction input[type=submit].btn-back {
        color: #FFFFFF;
        background-color: #6C757D;
        border: 1px solid #6C757D;
      }
      /* Print Button */
      section#action #pnlMainAction input[type=button].btn-print,
      section#action #pnlMainAction input[type=submit].btn-print {
        background-image: url(../image/img-print-w.png);
        background-repeat: no-repeat;
        background-position: 2px 7px;
        padding-left: 22px;
        background-size: 18px;
        font-size: 0.98em;
      }
      /* Close Button */
      section#action #pnlMainAction input[type=button].btn-close,
      section#action #pnlMainAction input[type=submit].btn-close {
        background-image: url(../image/img-close.png);
        background-repeat: no-repeat;
        background-position: right 2px;
        background-size:14px;
      }
      /* Mouse Over  */
      section#action #pnlMainAction input[type=button].btn-action:enabled:hover,
      section#action #pnlMainAction input[type=submit].btn-action:enabled:hover {
        border: 1px solid #00608D;
        background-color: #FFFFFF;
        color: #6C9BD2;
      }
      /* Print Button Mouse Over */
      section#action #pnlMainAction input[type=button].btn-print:enabled:hover,
      section#action #pnlMainAction input[type=submit].btn-print:enabled:hover {
        background-image: url(../image/img-print.png);
      }
      /* Mouse Over Default  */
      section#action #pnlMainAction input[type=button].btn-default:enabled:hover,
      section#action #pnlMainAction input[type=submit].btn-default:enabled:hover {
        border: 1px solid #00608D;
        background-color: #FFFFFF;
        color: #F22E00;
      }
      /* Mouse Over Recept(受付入力系) */
      section#action #pnlMainAction input[type=button].btn-recept:enabled:hover,
      section#action #pnlMainAction input[type=submit].btn-recept:enabled:hover {
        border: 1px solid #00608D;
        background-color: #E8F8F0;
        color: #006400;
      }
      /* Mouse Over Contract(契約実績系) */
      section#action #pnlMainAction input[type=button].btn-cont:enabled:hover,
      section#action #pnlMainAction input[type=submit].btn-cont:enabled:hover {
        border: 1px solid #00608D;
        background-color: #FFF2E5;
        color: #3E1F00;
      }
      /* マウスオーバー menu */
      section#action #pnlMainAction input[type=button].btn-menu:hover,
      section#action #pnlMainAction input[type=submit].btn-menu:hover,
      section#action #pnlMainAction input[type=button].btn-close:hover,
      section#action #pnlMainAction input[type=submit].btn-close:hover,
      section#action #pnlMainAction input[type=button].btn-back:hover,
      section#action #pnlMainAction input[type=submit].btn-back:hover {
        background-color: #F5F5F5;
        color: #6C757D;
      }
      /* Focus */
      section#action #pnlMainAction input[type=button].btn-action:enabled:focus,
      section#action #pnlMainAction input[type=submit].btn-action:enabled:focus {
        color: #3D7AC3;
        border: 1px solid #00608D;
        background-color: #FFFFFF;
        background-image: url(../image/img-focus.png);
        background-repeat: no-repeat;
        background-position: 3px 2px;
      }
      /* Focus Default(既定ボタン) */
      section#action #pnlMainAction input[type=button].btn-default:enabled:focus,
      section#action #pnlMainAction input[type=submit].btn-default:enabled:focus {
        color: #F22E00;
        border: 1px solid #00608D;
        background-color: #FFFFFF;
      }
      /* Print Button Focus */
      section#action #pnlMainAction input[type=button].btn-print:enabled:focus,
      section#action #pnlMainAction input[type=submit].btn-print:enabled:focus {
        color: #3D7AC3;
        border: 1px solid #00608D;
        background-color: #FFFFFF;
        background-image: url(../image/img-focus.png);
        background-repeat: no-repeat;
        background-position: 3px 2px;
        background-size: 13px;
      }
      /* Focus Recept(受付入力系) */
      section#action #pnlMainAction input[type=button].btn-recept:enabled:focus,
      section#action #pnlMainAction input[type=submit].btn-recept:enabled:focus {
        color: #006400;
        border: 1px solid #00608D;
        background-color: #E8F8F0;
      }
      /* Focus Contract(契約実績系) */
      section#action #pnlMainAction input[type=button].btn-cont:enabled:focus,
      section#action #pnlMainAction input[type=submit].btn-cont:enabled:focus {
        color: #3E1F00;
        border: 1px solid #00608D;
        background-color: #FFF2E5;
      }
      /* フォーカス menu */
      section#action #pnlMainAction input[type=button].btn-menu:focus,
      section#action #pnlMainAction input[type=submit].btn-menu:focus,
      section#action #pnlMainAction input[type=button].btn-close:focus,
      section#action #pnlMainAction input[type=submit].btn-close:focus,
      section#action #pnlMainAction input[type=button].btn-back:focus,
      section#action #pnlMainAction input[type=submit].btn-back:focus {
        border: 1px solid #008080;
        background-color: #008080;
        color: #FFFFFF;
      }
      /* ActionBox Button Disabled */
      section#action #pnlMainAction input[type=button]:disabled,
      section#action #pnlMainAction input[type=submit]:disabled {
        border: 1px solid #ACACAC;
        background-color: #E8E8E8;
        color: #AAAAAA;
        cursor: not-allowed;
      }
      /* Print Button Disabled */
      section#action #pnlMainAction input[type=button].btn-print:disabled,
      section#action #pnlMainAction input[type=submit].btn-print:disabled {
        background-image: url(../image/img-print.png);
      }
/* 既定サイズ以下 */
@media screen and (max-width: 1200px) {
  section#action #pnlMainAction {
    flex-wrap: wrap;
  }
    /* ActionBox Button */
    section#action #pnlMainAction input[type=button],
    section#action #pnlMainAction input[type=submit] {
      font-size: 0.9em;
      min-width: 120px;
      margin: 1px 3px;
    }
}
/* タブレット サイズ */
@media screen and (max-width: 820px) {
  section#action {
    position: relative;
    bottom: 0;
  }
    section#action #pnlMainAction {
      width:100%;
      margin-top: 1px;
      background: #FFFFFF;
      flex-wrap: wrap;
    }
      /* ActionBox Button */
      section#action #pnlMainAction input[type=button],
      section#action #pnlMainAction input[type=submit] {
        font-size: 0.8em;
        min-width: 90px;
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;
        margin: 1px 1px 0 0;
        cursor: pointer;
      }
        /* Action Button */
        section#action #pnlMainAction input[type=button].btn-action,
        section#action #pnlMainAction input[type=submit].btn-action {
          width: 19% !important;
          border: 0;
        }
        /* Print Button */
        section#action #pnlMainAction input[type=button].btn-print,
        section#action #pnlMainAction input[type=submit].btn-print {
          font-size: 0.8em;
        }
        /* Small Font Button */
        section#action #pnlMainAction input[type=button].btn-small,
        section#action #pnlMainAction input[type=submit].btn-small {
          font-size: 0.7em;
        }
        /* PageBack Button small */
        section#action #pnlMainAction input[type=button].btn-back,
        section#action #pnlMainAction input[type=submit].btn-back {
          min-width: 50px;
          width: 50px;
        }
        /* Menu Button Delete */
        section#action #pnlMainAction input[type=button].btn-menu,
        section#action #pnlMainAction input[type=submit].btn-menu {
          display: none;
        }
        /* フォーカス */
        section#action #pnlMainAction input[type=button].btn-action:focus,
        section#action #pnlMainAction input[type=submit].btn-action:focus {
          background-position: 1px center;
        }
}
/* スマホ サイズ */
@media screen and (max-width: 500px) {
  /* ActionBox Button */
  section#action #pnlMainAction input[type=button],
  section#action #pnlMainAction input[type=submit] {
    font-size: 0.75em;
    height: 40px;
    margin: 1px 1px 1px 0;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
  }
    /* Action Button */
    section#action #pnlMainAction input[type=button].btn-action,
    section#action #pnlMainAction input[type=submit].btn-action {
      width: 18% !important;
      border: 0;
    }
    /* Print Button */
    section#action #pnlMainAction input[type=button].btn-print,
    section#action #pnlMainAction input[type=submit].btn-print {
      font-size: 0.75em;
      padding-left: 0;
      background-position: 2px 2px;
      background-size: 14px;
    }
}
/* ----------------------------------------------------------------------------------------------------------
  FOOTER
------------------------------------------------------------------------------------------------------------*/
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index:50;
}

  footer #pnlFooter {
    height: 30px;
    background-color: #F8FAFC;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    /* アプリケーション名 */
    footer #pnlFooter .appName {
      font-size: 12px;
      color: #778899;
      line-height: 30px;
      margin-right: 8px;
    }
    /* CopyRight */
    footer #pnlFooter .copyright {
      font-size: 12px;
      color: #778899;
      line-height: 30px;
    }
/* Footer - Mobile Size */
@media screen and (max-width: 800px) {
  /* アプリケーション名 */
  footer #pnlFooter .appName {
    font-size: 0.7rem;
  }
  /* CopyRight */
  footer #pnlFooter .copyright {
    font-size: 0.7rem;
  }
}
/* ----------------------------------------------------------------------------------------------------------
  Entry Validate Error 
------------------------------------------------------------------------------------------------------------*/
input[type="text"].validateErr,
input[type="password"].validateErr,
input[type="number"].validateErr,
textarea.validateErr,
select.validateErr,
input[type=radio] + label.validateErr,
input[type=checkbox] + label.validateErr {
  background-color: #FFCECD;
}
/* ----------------------------------------------------------------------------------------------------------
  Exception Page
------------------------------------------------------------------------------------------------------------*/
section#exContents {
  display: flex;
  justify-content: center;
}

  section#exContents #blkErrBody {
    width: 600px;
    height: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #FF0000;
    box-shadow: 0px 0px 6px #FF0000;
    -moz-box-shadow: 0px 0px 6px #FF0000;
    -webkit-box-shadow: 0px 0px 6px #FF0000;
    background: #fdeff2;
    padding: 20px;
    margin: 30px 10px;
  }

    section#exContents #blkErrBody table {
      table-layout: fixed;
      width: 100%;
    }

      section#exContents #blkErrBody table td {
        height: 40px;
        font-size: 16px;
      }
        /* 例外件名 */
        section#exContents #blkErrBody table td.subject {
          font-size: 18px;
        }
        /* トレース */
        section#exContents #blkErrBody table td.trace {
          font-size: 14px;
        }
/* 例外ページ ボタン */
section#exAction {
  position: fixed;
  bottom: 30px;
  width: 100%;
  height: auto;
}

  section#exAction #pnlExAction {
    width: 100%;
    height: 40px;
    padding-top: 5px;
    background-color: #CFCFCF;
    display: flex;
    justify-content: center;
    font-size: 14px;
  }

    section#exAction #pnlExAction input[type=submit],
    section#exAction #pnlExAction input[type=button] {
      width: 140px;
      height: 32px;
      margin: 0 5px;
      padding: 0 0 0 0.3em;
      background: #336699;
      border: 1px solid #336699;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      color: #FFFFFF;
      font-size: 0.9em;
      text-align: center;
      letter-spacing: 0.3em;
      line-height: 1.3;
      cursor: pointer;
      transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
    }

      section#exAction #pnlExAction input[type=submit]:hover,
      section#exAction #pnlExAction input[type=button]:hover {
        background: #FFFFFF;
        color: #336699;
      }

/* Exception - Mobile Size */
@media screen and (max-width: 800px) {
  section#exAction #pnlExAction {
    padding-top: 5px;
    background-color: #FFFFFF;
    font-size: 12px;
  }

    section#exAction #pnlExAction input[type=submit],
    section#exAction #pnlExAction input[type=button] {
      width: 120px;
    }
}
/* Exception - PrintPage */
@media print {
  section#exContents #blkErrBody {
    border: 2px solid #000000;
    background: #FFFFFF;
  }
  /* 例外ページ ボタン */
  section#exAction {
    display: none;
  }
}
/* ----------------------------------------------------------------------------------------------------------
   Loading 
------------------------------------------------------------------------------------------------------------*/
.pageloading {
  z-index: 20000;
  position: fixed;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
}

  .pageloading .loader {
    margin-top: -50px;
    margin-left: -20px;
  }

  .pageloading .prog {
    display: block;
    color: #FFFFFF;
    font-weight: bold;
    position: relative;
    width: auto;
    height: 30px;
    left: -50%;
    padding-right: 8px; /* ...分 */
  }

    .pageloading .prog::after {
      display: inline-block;
      content: "...";
      width: 30px;
      height: 20px;
      -moz-animation: progress-period 1.5s infinite linear;
      -webkit-animation: progress-period 1.5s infinite linear;
      animation: progress-period 1.5s infinite linear;
    }

/* ----------------------------------------------------------------------------------------------------------
  Data Loading Box
------------------------------------------------------------------------------------------------------------*/
.dataloading {
  z-index: 20000;
  position: fixed;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
}

  .dataloading .loader {
    margin-top: -50px;
    margin-left: -20px;
  }

  .dataloading .prog {
    position: absolute;
    color: #FFFFFF;
    font-weight: bold;
    min-width: 300px;
    height: auto;
    padding-left: 20px; /* ...の分 */
    text-align: center;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
  }

    .dataloading .prog::after {
      display: inline-block;
      content: "...";
      width: 30px;
      height: 20px;
      text-align: left;
      -moz-animation: progress-period 1.5s infinite linear;
      -webkit-animation: progress-period 1.5s infinite linear;
      animation: progress-period 1.5s infinite linear;
    }

/* ----------------------------------------------------------------------------------------------------------
  Data Saving Box
------------------------------------------------------------------------------------------------------------*/
.datasaving {
  z-index: 20000;
  position: fixed;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  overflow: visible;
}

    .datasaving .loader {
      margin-top: -50px;
      margin-left: -20px;
    }

    .datasaving .prog {
      display: block;
      color: #FFFFFF;
      font-weight: bold;
      position: relative;
      width: auto;
      height: 30px;
      left: -50%;
      padding-left: 20px; /* ...分 */
    }

      .datasaving .prog::after {
        display: inline-block;
        content: "...";
        width: 30px;
        height: 20px;
        -moz-animation: progress-period 1.5s infinite linear;
        -webkit-animation: progress-period 1.5s infinite linear;
        animation: progress-period 1.5s infinite linear;
      }
  /* ----------------------------------------------------------------------------------------------------------
  Loading Circle
  :not(:required) hides this rule from IE9 and below
------------------------------------------------------------------------------------------------------------*/
  .three-quarters-loader:not(:required) {
    -moz-animation: three-quarters-loader 600ms infinite linear;
    -webkit-animation: three-quarters-loader 600ms infinite linear;
    animation: three-quarters-loader 600ms infinite linear;
    border: 8px solid #B7E7FF;
    border-right-color: transparent;
    border-radius: 20px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
  }

  /* ----------------------------------------------------------------------------------------------------------
  Mask
------------------------------------------------------------------------------------------------------------*/
  /* Dark Mask*/
  .darkMask {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
  }
  /* Light Mask*/
  .lightMask {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.4);
    z-index: 9999;
  }
  /* Selector Mask*/
  .selMask {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.1);
    z-index: 9999;
  }
  /* Dialog Mask*/
  .dialogMask {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
  }
  /* Viewer Mask*/
  .viewerMask {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
  }
/* ------------------------------------------------------ */
/* Warning Box                                              */
/* ------------------------------------------------------ */
#contents #pnlWarning {
  position: fixed;
  width: 300px; /* Padding含めて360px */
  top: 120px;
  right: 10px;
  padding: 16px 30px;
  background-color: #FFFFFF;
  border: 1px solid #CC3300;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; /* for Firefox */
  box-shadow: 0px 0px 3px #FF0000;
  -moz-box-shadow: 0px 0px 3px #FF0000;
  -webkit-box-shadow: 0px 0px 3px #FF0000;
  animation: warning-Alert 0.5s;
  -webkit-animation: warning-Alert 0.5s;
  -moz-animation: warning-Alert 0.5s;
  background-image: url(../image/img-apored.png);
  background-repeat: no-repeat;
  background-position: 8px 18px;
  z-index: 2000;
}
  /* 閉じる */
  #contents #pnlWarning .off {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #AAAAAA; /* 枠の調整 */
    border-radius: 50%; /* 丸みの度合い */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%; /* for Firefox */
    background: #FFFFFF; /* ボタンの背景色 */
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
  }

    #contents #pnlWarning .off::before,
    #contents #pnlWarning .off::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px; /* 棒の幅（太さ） */
      height: 16px; /* 棒の高さ */
      background: #AAAAAA; /* バツ印の色 */
    }

    #contents #pnlWarning .off::before {
      transform: translate(-50%,-50%) rotate(45deg);
      -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -moz-transform: translate(-50%,-50%) rotate(45deg);
    }

    #contents #pnlWarning .off::after {
      transform: translate(-50%,-50%) rotate(-45deg);
      -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -moz-transform: translate(-50%,-50%) rotate(-45deg);
    }
    /* マウスオーバー */
    #contents #pnlWarning .off:hover {
      border: 1px solid #888888; /* 枠の調整 */
      background: #AAAAAA; /* バツ印の色 */
    }

      #contents #pnlWarning .off:hover::before,
      #contents #pnlWarning .off:hover::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px; /* 棒の幅（太さ） */
        height: 16px; /* 棒の高さ */
        background: #FFFFFF; /* バツ印の色 */
      }
  /* warning */
  #contents #pnlWarning #lblWarning {
    display: block;
    width: auto;
    font-size: 14px;
    color: #CC3300;
  }
/* Warning - Smart Size */
@media screen and (max-width: 400px) {
  #contents #pnlWarning {
    width: 260px; /* Padding含めて320px */
  }
}

/* ------------------------------------------------------ */
/* Commitment Box                                              */
/* ------------------------------------------------------ */
section#action .commitment {
  position: fixed;
  width: 350px;
  bottom: 50px;
  right: 10px;
  padding: 16px 30px;
  background-color: #F5FFFA;
  border: 1px solid #20B2AA;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; /* for Firefox */
  box-shadow: 0px 0px 3px #20B2AA;
  -moz-box-shadow: 0px 0px 3px #20B2AA;
  -webkit-box-shadow: 0px 0px 3px #20B2AA;
  animation: warning-Alert 0.5s;
  -webkit-animation: warning-Alert 0.5s;
  -moz-animation: warning-Alert 0.5s;
  background-image: url(../image/img-apogrn.png);
  background-repeat: no-repeat;
  background-position: 8px 18px;
  z-index: 2000;
}
  /* 閉じる */
  section#action .commitment .com-off {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #AAAAAA; /* 枠の調整 */
    border-radius: 50%; /* 丸みの度合い */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%; /* for Firefox */
    background: #FFFFFF; /* ボタンの背景色 */
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
  }

    section#action .commitment .com-off::before,
    section#action .commitment .com-off::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px; /* 棒の幅（太さ） */
      height: 16px; /* 棒の高さ */
      background: #AAAAAA; /* バツ印の色 */
    }

    section#action .commitment .com-off::before {
      transform: translate(-50%,-50%) rotate(45deg);
      -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -moz-transform: translate(-50%,-50%) rotate(45deg);
    }

    section#action .commitment .com-off::after {
      transform: translate(-50%,-50%) rotate(-45deg);
      -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -moz-transform: translate(-50%,-50%) rotate(-45deg);
    }
    /* マウスオーバー */
    section#action .commitment .com-off:hover {
      border: 1px solid #888888; /* 枠の調整 */
      background: #AAAAAA; /* バツ印の色 */
    }

      section#action .commitment .com-off:hover::before,
      section#action .commitment .com-off:hover::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px; /* 棒の幅（太さ） */
        height: 16px; /* 棒の高さ */
        background: #FFFFFF; /* バツ印の色 */
      }
  /* Commitment */
  section#action .commitment .commit {
    display: block;
    width: auto;
    font-size: 14px;
    color: #008080;
  }
/* Commitment - Smart Size */
@media screen and (max-width: 400px) {
  section#action .commitment {
    width: 260px; /* Padding含めて320px */
  }
}
/* ------------------------------------------------------ */
/* Notice Box                                             */
/* ------------------------------------------------------ */
#contents #pnlNotice {
  position: fixed;
  width: 300px; /* Padding含めて360px */
  bottom: 60px;
  left: 10px;
  padding: 16px 30px;
  background-color: #FFFFFF;
  border: 1px solid #2ca9e1;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; /* for Firefox */
  box-shadow: 0px 0px 3px #0095d9;
  -moz-box-shadow: 0px 0px 3px #0095d9;
  -webkit-box-shadow: 0px 0px 3px #0095d9;
  animation: notice-Alert 0.5s;
  -webkit-animation: notice-Alert 0.5s;
  -moz-animation: notice-Alert 0.5s;
  background-image: url(../../Common/image/img-notice.png);
  background-repeat: no-repeat;
  background-position: 8px 18px;
  z-index: 2000;
}
  /* 閉じる */
  #contents #pnlNotice .off {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #AAAAAA; /* 枠の調整 */
    border-radius: 50%; /* 丸みの度合い */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%; /* for Firefox */
    background: #FFFFFF; /* ボタンの背景色 */
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
  }

    #contents #pnlNotice .off::before,
    #contents #pnlNotice .off::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px; /* 棒の幅（太さ） */
      height: 16px; /* 棒の高さ */
      background: #AAAAAA; /* バツ印の色 */
    }

    #contents #pnlNotice .off::before {
      transform: translate(-50%,-50%) rotate(45deg);
      -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -moz-transform: translate(-50%,-50%) rotate(45deg);
    }

    #contents #pnlNotice .off::after {
      transform: translate(-50%,-50%) rotate(-45deg);
      -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -moz-transform: translate(-50%,-50%) rotate(-45deg);
    }
    /* マウスオーバー */
    #contents #pnlNotice .off:hover {
      border: 1px solid #888888; /* 枠の調整 */
      background: #AAAAAA; /* バツ印の色 */
    }

      #contents #pnlNotice .off:hover::before,
      #contents #pnlNotice .off:hover::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px; /* 棒の幅（太さ） */
        height: 16px; /* 棒の高さ */
        background: #FFFFFF; /* バツ印の色 */
      }
  /* Notice */
  #contents #pnlNotice #lblFixNotice {
    display: block;
    width: auto;
    font-size: 14px;
    color: #1E50A2;
  }
/* Notice - Smart Size */
@media screen and (max-width: 400px) {
  #contents #pnlNotice {
    width: 260px; /* Padding含めて320px */
  }
}
/* ----------------------------------------------------------------------------------------------------------
  Request(Confirm) Box
------------------------------------------------------------------------------------------------------------*/
.confirm {
  position: fixed;
  z-index: 10000;
  width: 420px;
  height: auto;
  background: #FFFAFA;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px; /* for Firefox */
  border: 1px solid #CCCCCC;
  box-shadow: 0px 0px 6px #ACACAC;
  -moz-box-shadow: 0px 0px 6px #ACACAC;
  -webkit-box-shadow: 0px 0px 6px #ACACAC;
  padding: 8px 10px 10px 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  font-size: 1rem;
}
  /* Confirm Request Icon */
  .confirm .conf-icon {
    position: absolute;
    top: 10px;
    left: 8px;
    padding: 4px;
    width: 36px;
    height: 36px;
    line-height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
    color: #FFFFFF;
    letter-spacing: 0;
    font-size: 12px;
    background-color: #B0C4DE;
    animation: bubble-rolll 0.5s;
    -webkit-animation: bubble-rolll 0.5s;
    -moz-animation: bubble-rolll 0.5s;
  }
    /* 吹き出しのクチバシ */
    .confirm .conf-icon::before {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      left: 28px;
      top: 30px;
      border-left: 20px solid #B0C4DE;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
    }
    /* ... */
    .confirm .conf-icon::after {
      content: '・・・';
      position: absolute;
      display: block;
      width: 40px;
      height: 20px;
      top: 50%;
      left: 50%;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 20px;
      font-weight: bold;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
    }
  /* Confirm Check */
  .confirm .conf-check {
    position: relative;
    width: auto;
    height: auto;
    min-height: 50px;
    padding: 0 0 0 60px;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Confirm Check Message */
    .confirm .conf-check span {
      width: auto;
      height: auto;
      color: #666666;
      font-size: 1.05em;
      font-weight: bold;
      letter-spacing: 0.1em;
    }
  /* Confirm Request */
  .confirm .conf-req {
    position: relative;
    width: auto;
    height: auto;
    min-height: 80px;
    margin: 10px 5px;
    padding: 5px 10px;
    font-size: 1em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px; /* for Firefox */
    background: #FFFFFF;
    border: 1px solid #B0C4DE;
  }
    /* Request Message */
    .confirm .conf-req span {
      color: #A52A2A;
      font-size: 0.95em;
    }
  /* Request Button */
  .confirm .req-action {
    width: auto;
    height: auto;
    margin-top: 8px;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    /* Request Button */
    .confirm .req-action .btn-req {
      width: 90px;
      height: 32px;
      margin: 0 5px;
      padding: 0 0 0 0.3em;
      background: #47585C;
      border: 1px solid #47585C;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      color: #FFFFFF;
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.3em;
      line-height: 1.3;
      cursor: pointer;
      transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
    }
      /* Request Button Hover */
      .confirm .req-action .btn-req:hover {
        background: #FFFFFF;
        color: #47585C;
      }
/* Confirm - Mobile Size */
@media screen and (max-width: 500px) {
  .confirm {
    width: calc(100vw - 80px) !important;
    height: 190px;
  }
    /* Confirm Check Message */
    .confirm .conf-check span {
      font-size: 1em;
    }
}
/* ----------------------------------------------------------------------------------------------------------
  Alert Message Box
------------------------------------------------------------------------------------------------------------*/
.alertBox {
  position: fixed;
  z-index: 10000;
  width: 420px;
  height: auto;
  background: #FFFAFA;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px; /* for Firefox */
  border: 1px solid #CCCCCC;
  box-shadow: 0px 0px 6px #ACACAC;
  -moz-box-shadow: 0px 0px 6px #ACACAC;
  -webkit-box-shadow: 0px 0px 6px #ACACAC;
  padding: 8px 10px 8px 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}
  /* Sure Or Fail Icon */
  .alertBox .sureicon,
  .alertBox .failicon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }

  .alertBox .sureicon {
    border: 1px solid #007B43;
  }

  .alertBox .failicon {
    border: 1px solid #FF0000;
  }
  /* Sure */
  .alertBox .sureicon::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 36px;
    height: 15px;
    border-left: 4px solid #028760;
    border-bottom: 4px solid #028760;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    animation: sure-check 0.5s;
    -webkit-animation: sure-check 0.5s;
    -moz-animation: sure-check 0.5s;
  }
  /* Fail */
  .alertBox .failicon::before, .alertBox .failicon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 35px;
    background-color: #FF0000;
    animation: fail-check 0.5s;
    -webkit-animation: fail-check 0.5s;
    -moz-animation: fail-check 0.5s;
  }

  .alertBox .failicon::before {
    transform: translate(-50%,-50%) rotate(45deg);
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -moz-transform: translate(-50%,-50%) rotate(45deg);
  }

  .alertBox .failicon::after {
    transform: translate(-50%,-50%) rotate(-45deg);
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    -moz-transform: translate(-50%,-50%) rotate(-45deg);
  }
  /* Success Or Failure Infomation */
  .alertBox .alert {
    width: auto;
    height: auto;
    padding-top: 15px;
    padding-left: 68px;
    padding-right: 24px;
    padding-bottom: 20px;
    font-size: 16px;
  }

    .alertBox .alert span {
      width: auto;
      height: auto;
      color: #666666;
      font-size: 1em;
      line-height: 1em;
    }
  /* Sure Button */
  .alertBox .sure {
    position: relative;
    bottom: 3px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
  }

    .alertBox .sure .sureBtn {
      width: 90px;
      height: 32px;
      margin: 0 5px;
      padding: 0 0 0 0.3em;
      background: #47585C;
      border: 1px solid #47585C;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      color: #FFFFFF;
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.3em;
      line-height: 1.3;
      cursor: pointer;
      transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
    }

      .alertBox .sure .sureBtn:hover {
        background: #FFFFFF;
        color: #47585C;
      }
/* Confirm - Mobile Size */
@media screen and (max-width: 420px) {
  .alertBox {
    width: calc(100vw - 80px) !important;
  }
}
/* -------------------------------------------------------
  ページトップへ
------------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: 40px;
  right: 10px;
  font-size: 90%;
  z-index:2000;
}

  #page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 40px;
    height: 30px;
    padding: 15px 10px;
    text-align: center;
    display: block;
    line-height: 1.2em;
    border-radius: 40px 40px 40px 40px;
    -webkit-border-radius: 40px 40px 40px 40px;
    -moz-border-radius: 40px 40px 40px 40px;
    opacity: 0.7;
  }

    #page-top a:hover {
      text-decoration: none;
      background: #999;
    }

@media screen and (max-width: 760px) {
  #page-top {
    bottom: 30px;
    right: 4px;
  }
}
/* ------------------------------------------------------ */
/* Animation                                              */
/* ------------------------------------------------------ */
/* 遅れて表示 */
@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}

@keyframes example {
  100% {
    opacity: 1;
  }
}

@-moz-keyframes example {
  100% {
    opacity: 1;
  }
}
/* Loading Circle */
@-webkit-keyframes three-quarters-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes three-quarters-loader {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes three-quarters-loader {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* 吹き出し 回転 */
@-webkit-keyframes bubble-rolll {
  0% {
    -webkit-transform: scale(1) rotate(90deg);
    transform: scale(1) rotate(90deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bubble-rolll {
  0% {
    transform: scale(1) rotate(90deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@-moz-keyframes bubble-rolll {
  0% {
    -moz-transform: scale(1) rotate(90deg);
    transform: scale(1) rotate(90deg);
  }

  100% {
    -moz-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}
/* MessageBoxのチェックマーク */
@-webkit-keyframes sure-check {
  0% {
    width: 0;
    height: 15px;
  }

  100% {
    width: 36px;
    height: 15px;
  }
}

@keyframes sure-check {
  0% {
    width: 0;
    height: 15px;
  }

  100% {
    width: 36px;
    height: 15px;
  }
}

@-moz-keyframes sure-check {
  0% {
    width: 0;
    height: 15px;
  }

  100% {
    width: 36px;
    height: 15px;
  }
}
/* MessageBoxの失敗マーク */
@-webkit-keyframes fail-check {
  0% {
    height: 0px;
  }

  100% {
    height: 35px;
  }
}

@keyframes fail-check {
  0% {
    height: 0px;
  }

  100% {
    height: 35px;
  }
}

@-moz-keyframes fail-check {
  0% {
    height: 0px;
  }

  100% {
    height: 35px;
  }
}
/* 進行文字「.」が増えていく */
@-webkit-keyframes progress-period {
  0% {
    content: ".";
    color: transparent;
  }

  30% {
    content: ".";
  }

  60% {
    content: "..";
  }

  100% {
    content: "...";
  }
}

@keyframes progress-period {
  0% {
    content: ".";
    color: transparent;
  }

  30% {
    content: ".";
  }

  60% {
    content: "..";
  }

  100% {
    content: "...";
  }
}

@-moz-keyframes progress-period {
  0% {
    content: ".";
    color: transparent;
  }

  30% {
    content: ".";
  }

  60% {
    content: "..";
  }

  100% {
    content: "...";
  }
}
/* ボタン点滅 */
@-webkit-keyframes btn-flash {
  0%,50%,100% {
    background-color: #ffd800;
    color: #333333;
  }

  25% {
    background-color: #FFFFFF;
    color: #333333;
  }

  75% {
    background-color: #FFFFFF;
    color: #333333;
  }
}

@keyframes btn-flash {
  0%,50%,100% {
    background-color: #ffd800;
    color: #333333;
  }

  25% {
    background-color: #FFFFFF;
    color: #333333;
  }

  75% {
    background-color: #FFFFFF;
    color: #333333;
  }
}

@-moz-keyframes btn-flash {
  0%,50%,100% {
    background-color: #ffd800;
    color: #333333;
  }

  25% {
    background-color: #FFFFFF;
    color: #333333;
  }

  75% {
    background-color: #FFFFFF;
    color: #333333;
  }
}
/* 警告が横から出現 */
@-webkit-keyframes warning-Alert {
  0% {
    right: -300px;
  }

  90% {
    right: 30px;
  }

  100% {
    right: 6px;
  }
}

@keyframes warning-Alert {
  0% {
    right: -300px;
  }

  90% {
    right: 30px;
  }

  100% {
    right: 6px;
  }
}

@-moz-keyframes warning-Alert {
  0% {
    right: -300px;
  }

  90% {
    right: 30px;
  }

  100% {
    right: 6px;
  }
}
/* 通知が左から出現 */
@-webkit-keyframes notice-Alert {
  0% {
    left: -300px;
  }

  90% {
    left: 30px;
  }

  100% {
    left: 6px;
  }
}

@keyframes notice-Alert {
  0% {
    left: -300px;
  }

  90% {
    left: 30px;
  }

  100% {
    left: 6px;
  }
}

@-moz-keyframes notice-Alert {
  0% {
    left: -300px;
  }

  90% {
    left: 30px;
  }

  100% {
    left: 6px;
  }
}
/* 検証不備(Validate)が下から出現 */
@-webkit-keyframes validate-Alert {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}

@keyframes validate-Alert {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}

@-moz-keyframes validate-Alert {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}