/* リセット関連 */
ul {
    list-style:none;
    padding-inline-start: 0;
}

button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

html {
overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: '';
}
object,embed {
vertical-align: top;
}
hr,legend {
display: none;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}
img,abbr,acronym,fieldset {
border: 0;
}
li {
list-style-type: none;
}
sup {
vertical-align: super;
font-size: 0.5em;
}
img {
vertical-align: top;
}
i {
font-style: normal;
}
a {
  text-decoration:none;
  color: black;
}

/* リセット関連 ここまで*/

/* baseページ */
body {
  display: flex;
}

.dn {
  display: none;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333333;
  width: 100px;
  min-height: 100vh;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side-menu ul li {
  padding: 2.5em 0;
  position: relative;
  border-bottom: #666666 1px solid;
}

.side-menu ul li i {
  position: absolute;
  top: 1.25em;
  left: 50%;
  transform: translateX(-50%);
}

.side-menu ul li .side-menu-ttl {
  font-size: 14px;
  position: absolute;
  bottom: 0.75em;
  left: 50%;
  transform: translateX(-50%);
}

.side-menu ul a {
  color:#FFF;
  display: block;
  width: 100%;
  height: 100%;
}

.side-menu ul li:hover {
  background-color: #666666;
  transition: 0.5s;
}

.side-menu .side-footer-menu li {
  border-top: #666666 1px solid;
}

.main {
  margin-left: 100px;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  border-bottom: #ddd 1px solid;
  box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
  -webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
  -moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}

.header-btn-area {
  width: 20%;
  padding-top : 0.5em;
}

.header-btn {
  background-color: #01188B;
  border-radius: 5px;
  color: #fff;
  padding: 0.5rem 1rem;
  margin-left: 1em;
}

.header-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.header-search-area {
  width: 60%;
  padding-top : 0.5em;
}

.header-form {
  display: flex;
  justify-content: space-evenly;
}

.header-menu-area {
  width: 15%;
  padding-top : 0.5em;
  margin-right: 0.5em;
  text-align: right;
}

.hamburger {
  cursor: pointer;
}

.right-menu {
  background: rgb(63, 63, 63);
  position: absolute;
  z-index: 1;
  top: 3.125rem;
  right: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: center;
  width: 0;
  height: 50px;
  line-height: 50px;
  transition: .5s;
}

.right-menu a {
  color:#FFF   
}

.right-menu.open-menu {
  width: 15%;
}

.container {
  margin-left: 1rem;
  width: 90%;
}

.flex {
  display: flex;
}

/* sales */

#listView {
  display: none;
}

.phase-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
}

.potential-phase, .suggestion-phase,
.estimate-phase, .consideration-phase,
.contract-phase {
  width: 18%;
}

.phase-summary ,.phase-summary-last {
  background-color: #f0f0f0;
  padding: 10px;
  position: relative;
  border-radius: 5px;
  text-align: center;
}

.phase-summary::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8%;
  width: 10px;
  height: 10px;
  border-top: 3px solid #AAA;
  border-right: 3px solid #AAA;
  transform: rotate(45deg);
}

.phase-summary::after:last-child {
  display: none;
}

.phase-list {
  margin-top: 1em;
}

.phase-list li {
  position: relative;
  margin-top: 0.5rem;
  border: #c2c2c2 1px solid;
  border-radius: 0.3rem;
  background-color: #fff;
  padding: 5px;
  width: 96%;
}

.phase-list li .arrow-mark-green {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  color:#167700;
}

.phase-list li:hover {
  opacity: 0.7;
  transition: 0.5s;
}

.phase-list-gray {
  color: gray;
  font-size: 0.8rem;
}

.new-mark {
  background-color: #d04040;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.existing-mark {
  background-color: #2241db;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.mnp-mark {
  background-color: #3a9f2a;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.other-mark {
  background-color: #666666;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.contract-mark {
  background-color: #FFD700;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.lost-mark {
  background-color: #222222;
  color: #FFFFFF;
  font-size: 0.8em;
  border-radius: 5px;
  padding: 0 0.25em;
  text-align: center;
}

.sales-list-table {
  width:95%;
  border: none;
  margin-top: 1em;
}

/* 上部ヘッダー（背景：パステルカラー） */
.sales-list-table thead th {
  color: #FFF; 
  font-weight: bold;
  background:#01188B;
  text-align: center;
}

/* 上部ヘッダーの丸み */
.sales-list-table thead th:first-of-type {
  border-radius: 5px 0 0 0;
}
.sales-list-table thead th:last-of-type  {
  border-radius: 0 5px  0 0;
}

.sales-list-table th {
  border-right: 1px dotted #eeeeee;
}

.sales-list-table td {
  border: 0 none !important;
  padding: 0.25em 0 0.25em 5px;
  text-align: center;
}

.sales-list-table td:nth-of-type(1),.sales-list-table td:nth-of-type(2) {
  text-align: left;
  padding-left: 5px;
}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */
.sales-list-table tr:nth-of-type(odd),
.activity-table tr:nth-of-type(odd),
.company-table tr:nth-of-type(odd) { 
  background: #ffffff; 
} 
.sales-list-table tr:nth-of-type(even), 
.activity-table tr:nth-of-type(even), 
.company-table tr:nth-of-type(even) {
  background: #eeeeee; 
}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */
.sales-list-table tbody th,
.sales-list-table tfoot th,
.sales-list-table thead {
  background:none;
  color:#666;
  font-weight: bold;
  line-height:2.5em;
}

.sales-list-table a {
  color: #4444ff;
}

/* createページ */
i {
  margin-right: 10px;
}

.contract-result {
  display: none;
}

/* メインエリア */
.detail-area {
  display: flex;
  background-color: #f0f0f0;
  padding-bottom: 2em;
}

.sales-main {
  width: 70%;
}

.sales-main .sales-info,.sales-main .sales-act {
  width: 95%;
  background-color: #FFF;
  border: #f0f0f0 1px solid;
  border-radius: 5px;
  margin: 10px auto;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.sales-main .sales-info-head,.sales-main .sales-info-body {
  width: 95%;
  margin: 0 auto;
  border-bottom: #EEE 1px solid;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.sales-table {
  width: 99%;
  background-color: #FFF;
  border-radius: 5px;
  margin: 5px auto;
  border-collapse: separate;
  border-spacing: 5px 10px;
}

.sales-table th {
  width: 100px;
  font-size: 14px;
  background-color: #EEE;
  border-radius: 5px;
  text-align: center;
}

.sales-table tr {
  height: 40px;
}

.sales-table td {
  width: 200px;
  font-size: 14px;
  word-wrap: break-word;
}

.activity-table {
  width: 100%;
  background-color: #FFF;
  border-radius: 5px;
  margin: 1em auto;
  table-layout: fixed;
  font-size: 14px;
}

.activity-table th {
  background-color: #478b78;
  color: #ffffff;
  text-align: center;
  padding: 0.5em;
  border-right: #ffffff 1px dotted;
}

.activity-table th:first-of-type {
  border-radius: 0.5em 0 0 0;
}

.activity-table th:last-of-type {
  border-radius: 0 0.5em 0 0;
  border-right: none;
}

.activity-table td {
  padding: 0.5em 0.25em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  border: #CCCCCC 1px solid;
}

.activity-table tr td:nth-of-type(2), .activity-table tr td:nth-of-type(3){
  text-align: center;
}

.list-area .activity-table tr td:nth-of-type(3) {
  text-align: left;
}

.list-area .activity-table tr td:nth-of-type(4) {
  text-align: center;
}

.activity-table td:last-of-type {
  text-align: center;
  vertical-align: middle;
}

.asc-desc-area button {
  width: 0.5em;
  height: 1em;
}

.asc-desc-area i {
  color: #FFF;
}

.product-info {
  width: 100%;
}

.sales-main .main-ttl, .sales-main .sub-ttl {
  font-size: 14px;
  font-weight: 900;
  color: #01188B;
}

.base-info {
  display: flex;
}

.create-update-at {
  font-size: 14px;
  color: #000000;
  font-weight: normal !important;
  margin-left: 5em;
  padding-top: 2px;
}

.company-kind {
  margin-left: 1em;
}

.num {
  text-align: right;
}

/* サブエリア */
.sales-sub {
  width: 30%;
}

.sales-sub a {
  color: #4444ff;
}

.sales-sub .sales-company,.sales-sub .sales-person {
  width: 95%;
  background-color: #FFF;
  border: #f0f0f0 1px solid;
  border-radius: 5px;
  margin: 10px auto 10px 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.sales-sub .sales-sub-head,.sales-sub .sales-sub-info {
  width: 90%;
  margin: 0 auto;
  border-bottom: #EEE 1px solid;
  padding: 10px;
}

.sales-sub .sales-sub-head {
  display: flex;
  justify-content: space-between;
}

.sales-sub-table {
  margin-left: 10%;
  font-size: 14px;
}

.sales-sub-table td {
  height: 14px;
  padding: 10px;
}

.sales-sub .main-ttl,.sales-sub .sub-ttl {
  font-size: 14px;
  font-weight: 900;
  color: #01188B;
}

.payment-type {
  background-color: #01188B;
  border-radius: 5px;
  color:#FFF;
  font-size: 14px;
  padding: 5px;
}

/*タブエリア*/
.tabs {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
}

/*タブのスタイル*/
.tab-item {
  height: 1em;
  line-height: 1em;
  font-size: 1em;
  color: #565656;
  display: block;
  font-weight: bold;
  transition: all 0.2s ease;
  padding: 0.5em 1em;
  cursor: pointer;
  border: #CCCCCC 1px solid;
}

.tab-item i {
  margin: 0 auto;
}

.tab-item:first-of-type {
  border-radius: 5px 0 0 5px;
  border-right: none;
}

.tab-item:last-of-type {
  border-radius: 0 5px 5px 0;
  border-left: none;
}

.tab-item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab-item"] {
  display: none;
}

.tab-content {
  display: none;

}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab-item {
  background-color: #eeeeee;
  color: #01188B;
  border: #01188B 1px solid;
}

select {
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

input[type="text"],[type="number"],[type="email"],[type="password"]{
  width: 90%;
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

input[type="date"]{
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.modal-content [type="checkbox"]{
  text-align: center;
  accent-color: #f00;
  transform: scale(2);
}

textarea {
  width: 95%;
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
}

.textbox-sale {
  width: 80%;
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.textbox-product {
  width: 100%;
  padding: 8px 0px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.btn-area {
  display: flex;
  justify-content: space-evenly;
  min-width: 5em;
}

.btn-area a {
  text-decoration: none;
}

.form-btn-area {
  display: flex;
  justify-content: space-evenly;
  margin: 2em;
}

.form-btn-area a {
  text-decoration: none;
}

.form-btn-area .create-btn, .form-btn-area .cancel-btn, .form-btn-area .update-btn, .form-btn-area .delete-btn{
  width: 150px;
}

.modal-btn {
  position: absolute;
  bottom: 1em;
  left: 30%;
}

.button-create {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 150px;
  padding: 5px 20px;
  border-radius: 5px;
  background-color: #167700;
  border-color: #0f5300;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.button-02 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 150px;
  padding: 5px 20px;
  border-radius: 5px;
  background-color: #000000;
  border-color: #fa0404;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.total-amount {
  position: absolute;
  left: 60%;
  bottom: 5em;
}

/* detailページ */
i {
  margin-right: 10px;
}
/* サマリ、フェーズエリア */
.sales-summary, .phase-visual {
  margin: 10px auto;
  width: 100%;
}

.phase-visual ul {
  display: flex;
}

.phase-visual li {
  width: 19%;
  background-color: #f0f0f0;
  text-align: center;
  padding: 10px 0;
  position: relative;
  margin-left: 25px;
  border-radius: 5px;
}

.phase-visual li::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -15px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #999999;
  border-right: 2px solid #999999;
  transform: rotate(45deg);
}
.phase-visual li:last-of-type::after {
  display: none;
}

.phase-visual li:first-of-type {
  margin-left: 0;
}

.phase-visual li:nth-of-type() {
  color: white;
}


/* BIエリア */

.bi-area img {
  /* width: 250px; */
  height: 400px;
  object-fit: cover;
  object-position: -110px 0;
}

.create-btn {
  background-color: #01188B;
  border-radius: 5px;
  color: #fff;
  padding: 0.25rem 0.5rem;
}

.create-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.cancel-btn {
  background-color: #666666;
  border-radius: 5px;
  color: #fff;
  padding: 0.25rem 0.5rem;
}

.cancel-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.modal-content .create-btn ,.modal-content .cancel-btn,.modal-content .update-btn {
  width: 10em;
}

.detail-btn {
  background-color: #1c2e53;
  border-radius: 5px;
  color: #fff;
  padding: 0.25rem 0.5rem;
}

.detail-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.update-btn {
  background-color: #167700;
  border-radius: 5px;
  color: #fff;
  padding: 0.125rem 0.25rem;
}

.update-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.delete-btn {
  background-color: #bf1c1c;
  border-radius: 5px;
  color: #fff;
  padding: 0.125rem 0.25rem;
}

.delete-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.request-create-btn {
  background-color: #4d0a74;
  border-radius: 5px;
  color: #fff;
  padding: 0.25rem 0.5rem;
  margin-top: 1em;
}

/* モーダルのスタイル */
.modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景の半透明効果 */
}
.modal-content {
  position: relative;
  background-color: #fff;
  margin: 3% auto;
  padding: 20px;
  border-radius: 8px;
  width: 40%;
  max-width: 60%;
  min-height: 60%;
  max-height: 80%;
}
.close-btn ,.activity-close-btn, .pic-close-btn, .file-close-btn, .activity-update-close-btn, .pic-update-close-btn, .file-update-close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.25em;
  font-weight: normal;
}

.modal-content table {
  border-collapse: separate;
  border-spacing: 0.5em;
  margin-bottom: 1em;
}

.modal-content table th {
  background-color: #01188B;
  color: #FFF;
  text-align: center;
  padding: 0.5em;
  border-radius: 0.25em;
}

.delete-check {
  background-color: #bf1c1c;
}

.modal-btn-area {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  width: 40%;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
}

/* activityテーブル */

/* #activityFormTable th, #activityFormTable td {
  display: block;
} */

table#activityFormTable ,table#activityUpdateTable {
  position: relative;
  border-collapse: separate;
  width: 95%;
  margin: 3em auto;
}

table#picFormTable, table#picUpdateTable, table#fileFormTable, table#fileUpdateTable {
  position: relative;
  border-collapse: separate;
  width: 95%;
  margin: 3em auto;
}

table#activityFormTable th, table#activityFormTable td,
table#picFormTable th, table#picFormTable td,
table#fileFormTable th, table#fileFormTable td {
  border-spacing: 10px;
}

/* customer */

.customer-main {
  width: 70%;
}

.customer-main .main-ttl, .customer-main .sub-ttl {
  font-size: 14px;
  font-weight: 900;
  color: #987d2a;
}

.customer-info, .customer-act {
  width: 95%;
  background-color: #FFF;
  border: #f0f0f0 1px solid;
  border-radius: 5px;
  margin: 10px auto;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.customer-info-head,.customer-info-body {
  width: 95%;
  margin: 0 auto;
  border-bottom: #EEE 1px solid;
  padding: 10px;
}

.customer-info-head {
  display: flex;
  justify-content: space-between;
}

.device-table {
  width: 99%;
  font-size: 14px;
  margin: 10px auto;
  border-collapse: separate;
  border-spacing: 10px;
  border-radius: 5px;
}

.device-table th {
  text-align: center;
  border: #ccc 1px solid;
  padding: 0.5em;
}

.device-table td {
  text-align: center;
  border: #ccc 1px solid;
  padding: 0.5em;
}

.device-table td:first-of-type {
  width: 20%;
}

.device-table td:nth-of-type(2) {
  width: 20%;
}
.device-table td:last-of-type {
  width: 60%;
  text-align: left;
}

.customer-table {
  width: 99%;
  background-color: #FFF;
  border-radius: 5px;
  margin: 10px auto;
  border-collapse: separate;
  border-spacing: 10px;
}

.customer-table th {
  width: 100px;
  font-size: 14px;
  background-color: #EEE;
  border-radius: 5px;
  text-align: center;
}

.customer-table tr {
  height: 40px;
}

.customer-table td {
  width: 200px;
  font-size: 14px;
}

.customer-sub {
  width: 30%;
}

.customer-sub .customer-company, .customer-person, .file-area {
  width: 95%;
  background-color: #FFF;
  border: #f0f0f0 1px solid;
  border-radius: 5px;
  margin: 10px auto 10px 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.customer-sub .customer-sub-head,.customer-sub-info, .file-ttl, .file-list {
  width: 90%;
  margin: 0 auto;
  border-bottom: #EEE 1px solid;
  padding: 10px;
}

.customer-sub-head {
  display: flex;
  justify-content: space-between;
}

.customer-sub-table {
  margin-left: 10%;
  font-size: 14px;
}

.customer-sub-table td {
  height: 14px;
  padding: 10px;
}

/* button#openPicModal {
  margin-top: 10px;
} */

.file-table {
  width: 100%;
  font-size: 14px;
}

.file-table tr th {
  text-align: center;
}

.file-table tr td {
  padding: 0.5em 0;
  border-bottom: #666 1px dotted;
  text-align: center;
}

.file-table tr td:first-of-type {
  text-align: left;
}

.file-table a {
  color: #4444ff;
}

.file-table a:hover {
  opacity: 0.7;
}


/* company */
.search-area {
  width: 100% - 2em;
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #EEEEEE;
  border-radius: 5px;
}

.search-summary {
  display: flex;
  align-items: flex-start;
}

.search-summary h3{
  display: inline-block;
}

.search-row {
  margin: 0.5em 0 0.25em 0;
}

.search-area label, .header-search-area label {
  margin-left: 0.5em;
}

.search-area input, .header-search-area input {
  padding: 0.375em;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.search-area input[type="text"] {
  width: 10%;
}

.search-area input[type="number"] {
  width: 5%;
}

.search-area [type="checkbox"], .header-search-area [type="checkbox"] {
  text-align: center;
  transform: scale(1.5);
  margin-left: 1em;
}

.search-btn {
  width: 150px;
  background-color: #333333;
  border-radius: 5px;
  color: #fff;
  padding: 0.375rem;
  margin-left: 2em;
}

.search-btn:hover {
  opacity: 0.7;
  transition: .3s;
}

.company-table {
  width: 100%;
  border: none;
}

/* 上部ヘッダー（背景：パステルカラー） */
.company-table thead th {
  color: #FFF; 
  font-weight: bold;
  background:#987d2a;
  text-align: center;
}

/* 上部ヘッダーの丸み */
.company-table thead th:first-of-type {
  border-radius: 5px 0 0 0;
}
.company-table thead th:last-of-type  {
  border-radius: 0 5px  0 0;
}

.company-table th {
  border-right: 1px dotted #eeeeee;
}

.company-table td {
  border: 0 none !important;
  text-align: center;
  padding: 0.25em 0;
}

.company-table td:nth-of-type(1),.company-table td:nth-of-type(2),.company-table td:nth-of-type(3) {
  text-align: left;
  padding-left: 5px;
}

.company-table td:nth-of-type(3) {
  width: 500px;
}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */
.company-table tbody th,
.company-table tfoot th,
.company-table thead {
  background:none;
  color:#666;
  font-weight: bold;
  line-height:2.5em;
}

.company-table a, .customer-table a {
  color: #4444ff;
}

.error-word {
  color: #bf1c1c;
  font-weight: bold;
}

.exist-mark {
  font-size: 1.25em;
  color: #bf1c1c;
  font-weight: bold;
  text-align: center;
}

.len-display-sales {
  background-color: #CCCCCC;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.25em;
  margin: auto;
}

.len-display-company, .len-display-activity {
  font-weight: bold;
  margin-left: 1em;
}

.relational_sales {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.25em;
  background-color:#333333;
  border-radius: 5px;
  font-size: 12px;
}

.relational_sales a {
  color: #ffffff;
}

.relational_sales i {
  margin:0 0 0 0.25em;
}

/* ログインForm Layout */
.form-wrapper {
  background: #fafafa;
  margin: 1.5rem auto;
  padding: 0 1em;
  max-width: 370px;
}

.form-wrapper h1 {
  text-align: center;
  padding: 1em 0;
}

.form-wrapper form {
  padding: 0 1.5em;
}

.form-item {
  margin-bottom: 0.75em;
  width: 100%;
}

.form-item input {
  background: #fafafa;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
}

.form-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}

.button-panel {
  margin: 2em 0 0;
  width: 100%;
  padding: 0 0 2em 0;
}

.button-panel .button {
  background: #3e4a88;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
}

.button:hover {
  background: #01188B;
}

.form-footer {
  font-size: 1em;
  padding: 2em 0;
  text-align: center;
}

.form-footer a {
  color: #8c8c8c;
  text-decoration: none;
  transition: border-color 0.3s;
}

.form-footer a:hover {
  border-bottom: 1px dotted #8c8c8c;
}

/* request */
.request-table {
  width: 100%;
  background-color: #FFF;
  border-radius: 5px;
  margin: 1em auto;
  table-layout: fixed;
  font-size: 14px;
}

.request-table th {
  background-color: #666666;
  color: #ffffff;
  text-align: center;
  padding: 0.5em;
  border-right: #ffffff 1px dotted;
}

.request-table th:first-of-type {
  border-radius: 0.5em 0 0 0;
}

.request-table th:last-of-type {
  border-radius: 0 0.5em 0 0;
  border-right: none;
}

.request-table th:nth-of-type(-n+8) {
  background-color: #4d0a74;
}

.request-table td:nth-of-type(1),
.request-table td:nth-of-type(2),
.request-table td:nth-of-type(6),
.request-table td:nth-of-type(7),
.request-table td:nth-of-type(8),
.request-table td:nth-of-type(9),
.request-table td:nth-of-type(11),
.request-table td:nth-of-type(12),
.request-table td:nth-of-type(13)
{
  text-align: center;
}

.request-table td {
  padding: 0.5em 0.25em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  border: #CCCCCC 1px solid;
}