:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #64748b;
  --light: #f8fafc;
  --border: #e2e8f0;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  line-height: 150%;
  font-style: normal;
  word-break: break-all;
}

/* header */

 header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

.header{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background: #20375b;
  z-index: 100;
  justify-content: space-between;
  transition: all 0.5s ease;
}


.dark .header{
  background: #1d1d1d;
}

.header .logo-details {
  height: 60px;
  width: 50%;
  display: flex;
  align-items: center;
}

@media (max-width: 950px) {
  .header .logo-details {
    
    width: calc(100% - 480px);
    overflow: hidden;
    white-space: nowrap;
  }
}

.header .logo-details img {
  width: 30px;
  height: 30px;
  margin-left: 20px;
}
.logo_name {
  cursor: pointer;
}
.header .logo-details .logo_name {
  font-size: 22px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  margin-left: 10px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.header .topMenu{
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 20px;
}
.header .topMenu i{
  width: 70px;
  display: block;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}
.header .topMenu i:hover{
  opacity: 0.6;
}
.header .topMenu i div{
  padding-top: 5px;
  font-size: 11px;
}

.rightBtn{
  position: fixed;
    bottom: 0%;
    border: none;
    display: flex;
    right: 20px;
    font-size: 14px;
    width: 140px;
    background: #fff;
    text-align: center;
    padding: 10px 2px;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
}

.linkHeader{
  font-size: 14px;
  margin-left: 20px;
  margin-top: 20px;
  color: #a3a3a3;
}

.linkHeader:hover{
  background-color: none!important;
}

.bx-happy-heart-eyes {
  animation: spin 2s linear infinite;
  font-size: 26px;
  margin: 0 2px;
  color:#20375b;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#bottomContent {
  position: fixed;
  right: 15px;
  bottom: 0;
  width: 450px;
  overflow-x:hidden;
  overflow-y: scroll;
  height: 750px;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  background: #fff;
  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(100%); /* 初始状态在屏幕外 */
  transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */
}
#bottomContent #closeBtn{
  font-size: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

 .container {
  width: 800px;
     margin: 0 auto;
   padding: 20px 20px 100px 20px;
     max-width: 100%;
     background: #f1f5f9;
     min-height: calc(100vh - 50px);
    overflow-x: hidden;
  }
        

/* 当内容应该显示时的样式 */
#bottomContent.visible {
  transform: translateY(0); /* 移动到可视区域 */
}

.enterMission{
  margin: 40px auto 20px auto;
  display: flex;
  width: 400px;
}
#missionInput{
  width: calc(100%- 50px);
}
.enterMission button{
  font-size: 30px;
  background: transparent;
  border: none;
  margin-left: 10px;
  color: #20375b;
  cursor: pointer;
  margin-top: -5px;
}
/* 下拉菜单内容 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 0;
  padding: 5px 10px;
  top: 48px;
  font-size: 14px;
}
.dropdown{
  position: relative;
}

.dropdown-header {
  background-color: #4e73df;
  border: 1px solid #4e73df;
  padding:10px 0;
  color: #fff;
  position: relative;
}

.dropdown span{
  padding: 2px 5px;
  border-radius: 50vh;
  position: absolute;
  transform: scale(.8);
  transform-origin: top right;
  right:15px;
  top:0;
  margin-top: -0.25rem;
  color: #fff;
  background-color: #e74a3b;
}

.noteHeader{
  padding: 0px!important;
  max-width: 300px;
  overflow-wrap: break-word;
}
.noteHeader a{
  display: flex!important;
  padding: 10px!important;
  margin: 0!important;
}
.dropdown-list-image{
  width: 40px;
}

.dropdown-list-image img{
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50vh;
}


.noteMessage {
  width:180px;
 
}
.noteMessage .f1{
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dropdown-content a {
  margin: 5px 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  opacity: 0.6;
}


/* sidebar */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  height: 100%;
  width: 180px;
  background: #ffff;
  z-index: 100;
  padding-bottom: 100px;
  transition: all 0.5s ease;
}
.dark .sidebar {
  background: #10233e;
}
.sidebar .quickMenu{
padding: 10px 0;
}
.sidebar .quickMenu a{
  position: relative;
  cursor: pointer;
  width: 25%;
  display: inline-block;
  text-align: center;
  font-size: 22px;
  color: #000;
}
.dark .quickMenu a{
  color: #fff;
}
.sidebar .quickMenu i .tooltiptext{
  visibility: hidden;
  width: 55px;
  background-color:#20375b;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 10px;
  position: absolute;
  z-index: 1;
  bottom: -20px;
  left: 5px;
}
.sidebar .quickMenu i:hover{
  opacity: 0.6;
}

.sidebar .quickMenu i:hover .tooltiptext {
  visibility: visible;
}

.sidebar .nav-links {
  height: 100%;
  padding: 0px 0 150px 0;
  overflow: auto;
}

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}
.sidebar .nav-links li {
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
  background: #f3f1f6;
}

.dark .sidebar .nav-links li:hover {
  background: #25364e;
}

.sidebar .sub-menu li:hover {
  background: none;
  color: #77619e;
}
.sidebar .nav-links li .icon-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar .nav-links li i {
  height: 50px;
  min-width: 60px;
  text-align: center;
  line-height: 50px;
  color: #20375b;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li.noshowMenu i.arrow {
  transform: rotate(180deg);
}

.sidebar .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-links li a .link_name {
  font-size: 16px;
  font-weight: 400;
  color: #20375b;
  font-weight: 600;
  transition: all 0.4s ease;
}

.dark .sidebar .nav-links li a .link_name,.dark .sidebar .nav-links li i{
  color: #d6d6d6;
}

.sidebar .nav-links li .sub-menu {
  padding: 0px 6px 0px 60px;
  margin-top: 0px;
  display: block;
}
.sidebar .nav-links li.noshowMenu .sub-menu {
  display: none;
}
.sidebar .nav-links li .sub-menu a {
  color: #3f3f3f;
  font-size: 14px;
  padding: 5px 0;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.dark .sidebar .nav-links li .sub-menu a {
  color: #bbbbbb;
}


.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details {
  position: fixed;
  height: 80px;
  bottom: 0;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f1f6;
  padding: 5px 0;
  transition: all 0.5s ease;
}

.sidebar .nav-links li .sub-menu a.active,.sidebar .nav-links li .sub-menu a:hover {
  color: rgb(78, 78, 172); /* 设置活动链接颜色 */
  font-weight: 600;
}

.sidebar .nav-links li .sub-menu a:hover {
  transform: scale(1.1);
}


.sidebar .profile-details .profile-content {
  display: flex;
  align-items: center;
}
.sidebar .profile-details img {
  height: 50px;
  margin: 0 14px 0 12px;
}

.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
  color: #77619e;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 5s ease;
}

.sidebar .profile-details .job {
  font-size: 12px;
}

.home-section {
  position: relative;
  background: #e4e9f7;
  left: 180px;
  width: calc(100% - 180px);
  transition: all 0.5s ease;
}
@media (max-width: 900px) {
  .home-section{
    overflow-x: scroll;
  }
  .content{
    width: 1200px;
  }
}

.dark .home-section {
  background: #25364e;
}
.breadcrumb{
  margin-top: 55px;
  font-size: 14px;
  padding:20px;
  position: relative;
  color: #3f3f3f;
}
.breadcrumbLink{
  color: #000;
  text-decoration: none;
}
.dark .breadcrumb{
  color: #ccc;
}
.dark .breadcrumbLink{
  color: #ffffff;
}
.breadcrumbLink:hover{
  opacity: 0.6;
  cursor: pointer;
}
.home-section .home-content {
  padding: 20px 20px 100px 20px;
  min-height: calc(100VH - 75px);
}
.home-section .home-content .bx-menu,
.home-section .home-content .text {
  color: #77619e;
  font-size: 35px;

}
.home-section .home-content .bx-menu {
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-content .text {
  font-size: 26px;
  font-weight: 600;
}
.subBottom {
  padding: 30px 6px 0px 60px;
}
.subBottom a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  color: #000;
}
.subBottom a :hover{
  opacity: 0.6;
}

.mode-switch {
  width: 25%;
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items:start;
  padding-top:5px ;
  cursor: pointer;
}
.dark .mode-switch {
  color: #fff;
}


/* 共通CSS */
/* text */
.t-center {
	text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.t-right {
	text-align: right;
}

.t-left {
	text-align: left;
}

.t-just {
	text-align: justify;
}

.t-vt {
  vertical-align: top;
}
.t-vm {
  vertical-align: middle;
}
.t-vb {
  vertical-align: bottom;
}

/* text 関連追加分*/

.f0 {
	font-size: 10px;
}

.f1 {
	font-size: 12px;
}

.f2 {
	font-size: 14px;
}

.f3 {
	font-size: 16px;
}

.f4 {
	font-size: 18px;
}

.f5 {
	font-size: 20px;
}

.f6 {
	font-size: 22px;
}

.f7 {
	font-size: 24px;
}

.f8 {
	font-size: 28px;
}
.f9 {
	font-size: 32px;
}
.f10 {
	font-size: 40px;
}


.fw-b {
	font-weight: bold;
}
.fw-n {
	font-weight: normal;
}

.lh3 {
	line-height: 1.3;
}

.lh5 {
	line-height: 1.5;
}

.lh8 {
	line-height: 1.8;
}

.lh2 {
	line-height: 2;
}

/* padding/margin */

.paddingSbtn {
	padding: 5px 10px;
  cursor: pointer;
}

.paddingMbtn {
	padding: 10px 20px;
	cursor: pointer;
}

.paddingBbtn {
	padding: 15px 30px;
  cursor: pointer;
}

.paddingSbtn:hover,
.paddingMbtn:hover,
.paddingBbtn:hover {
	opacity: 0.8;
}

.padding5 {
	padding: 5px;
}
.padding10 {
	padding: 10px;
}
.padding15 {
	padding: 15px;
}

.padding-l5 {
	padding-left: 5px;
}
.padding-l10 {
	padding-left: 10px;
}
.padding-l15 {
	padding-left: 15px;
}

.padding-r5 {
	padding-right: 5px;
}
.padding-r10 {
	padding-right: 10px;
}
.padding-r15 {
	padding-right: 15px;
}

.padding40 {
	padding: 40px;
}

.padding10 {
	padding: 10px;
}

.padding20 {
	padding: 20px;
}

.padding40 {
	padding: 40px;
}


@media (max-width: 860px) {
	.padding40 {
		padding: 20px;
	}
}


.margin20 {
	margin: 20px;
}

.margin10 {
	margin: 10px;
}

.margin-t5 {
	margin-top: 5px;
}

.margin-t10 {
	margin-top: 10px;
}
.margin-t15 {
	margin-top: 15px;
}
.margin-t20 {
	margin-top: 20px;
}
.margin-t30 {
	margin-top: 30px;
}
.margin-t40 {
	margin-top: 40px;
}
.margin-t50 {
	margin-top: 50px;
}
.margin-t60 {
	margin-top: 60px;
}


.margin-b5 {
	margin-bottom: 5px;
}

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

.margin-b20 {
	margin-bottom: 20px;
}

.margin-b30 {
	margin-bottom: 30px;
}

.margin-r5 {
	margin-right: 5px;
}
.margin-r10 {
	margin-right: 10px;
}
.margin-r15 {
	margin-right: 15px;
}
.margin-r20 {
	margin-right: 20px;
}
.margin-r25 {
	margin-right: 25px;
}
.margin-r30 {
	margin-right: 30px;
}
.margin-r40 {
	margin-right: 40px;
}
.margin-r50 {
	margin-right: 50px;
}

.margin-l5 {
	margin-left: 5px;
}
.margin-l10 {
	margin-left: 10px;
}
.margin-l15 {
	margin-left: 15px;
}
.margin-l20 {
	margin-left: 20px;
}
.margin-l25 {
	margin-left: 25px;
}
.margin-l30 {
	margin-left: 30px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.mr5{
  margin-right: 5px;
}

/* color */
.font-w {
	color: #fff;
}

.font-purle {
	color: #7969E9;
}
.font-yellow {
	color: #ffd903;
}

.font-gray {
	color: #8A8A8A;
}

.font-black {
	color: #000;
}

.font-pink {
	color: #EC467E;
}

.font-blue {
	color: #00C4CC;
}

/* bg-color */
.bg-purple {
	background: #7969E9;
}

.bg-w {
	background: #fff;
}

.bg-yellow {
	background: #F8C835;
}

.bg-pink {
	background: #EC467E;
}

.bg-red {
	background: #FF0000;
}

.bg-gray {
	background: #8A8A8A;
}

.bg-Lgray {
	background: #F7F7F7;
}

.bg-darkpurple {
	background: #A06EA0;
}

.bg-orange {
	background: #F68712;
}

.bg-darkorange {
	background: #FF5621;
}

.bg-green {
	background: #00BF63;
}

.bg-blue {
	background: #00C4CC;
}

.bg-Rgray {
	background: #EEEEEE;
}

.bg-black{
  background: #000000;
}

.bg-blackBlue{
  background: #20375b;
}


.boxshadow {
	box-shadow: 0px 0px 10px #DBDBDB;
}

/* radius */
.radius5 {
	border-radius: 5px;
}

.radius10 {
	border-radius: 10px;
}

.radius20 {
	border-radius: 20px;
}
.radius100 {
	border-radius: 100px;
}
.radiusCircle {
	border-radius:50vh;
}

.paddingSBtn{
  padding: 2px 5px;
}

.paddingMBtn{
  padding: 5px 10px;
}

.paddingBBtn{
  padding: 10px 15px;
}
/* layout */
.flex {
	display: flex;
	box-sizing: border-box;
  flex-direction: row;
}

.flex-r {
	display: flex;
	box-sizing: border-box;
  flex-direction: row;
}
.flex-c {
	display: flex;
	box-sizing: border-box;
  flex-direction: column;
}

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

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

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

.just-center {
	justify-content: center;
}
.just-start {
	justify-content: start;
	margin: 0px;
}
.just-content {
	justify-content: space-between
}
.just-sb {
	justify-content: space-between
}
.just-end{
  justify-content: end;
}


.gap5{gap: 5px;} .gap10{gap: 10px;} .gap15{gap: 15px;} .gap20{gap: 20px;}
.gap25{gap: 25px;} .gap30{gap: 30px;} .gap35{gap: 35px;} .gap40{gap: 40px;}



.col00{
  width: 100%;
}
.col25Gap10{
  width:calc(25% - 10px);
}

.col33Gap10{
  width:calc(33.3% - 10px);
}
.col33Gap20{
  width:calc(33.3% - 20px);
}

.col50Gap10{
  width:calc(50% - 10px);
}

.col50Gap20{
  width:calc(50% - 20px);
}
.col30{
  width:calc(30% - 10px);
}
.col70{
  width:calc(70% - 10px);
}

/* From */




input[type="text"],
input[type="tel"],
input[type="mail"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="month"],
input[type="datetime-local"]{
 font-size: 13px;
  padding: 12px 8px;
  border-radius: 6px;
  border: 1px solid #c4dfff;
  background: #ffffff;
}
select{
 font-size: 13px;
  padding: 12px 8px;
  border-radius: 6px;
  border: 1px solid #c4dfff;
  background: #ffffff;
}

textarea{
 font-size: 13px;
  padding: 12px 8px;
  border-radius: 6px;
  border: 1px solid #c4dfff;
  background: #f9fafb;
}
input[type="text"]:focus,
textarea:focus,
input[type="tel"]:focus,
input[type="url"]:focus,select:focus{
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}
input[type="radio"]{
  margin-right: 5px;
}
label{
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.category-options {
  display: none;
}
.col33Gap10 div{
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #5680a7;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #5680a7;
  border-bottom: 2px solid #5680a7;
  content: '';
}


.link {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
  font-weight: 600;
  font-size: 14px;
}
.link:hover {
  color: rgb(99, 99, 223);
}



.link_white {
  cursor: pointer;
  text-decoration: underline;
  color: silver;
}
.link_white:hover {
  color: white;
}


.btn{
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.7rem 2rem;
  line-height: 1.5;
  font-size: 16px;
  border-radius: 0.35rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}


.btn:hover{
  opacity: 0.8;
  transform: scale(1.02);
}
.btn40{
  width: 40px;
  padding: 5px 0;
}
.btn50{
  width: 50px;
  padding: 5px 0;
}
.btn60{
  width: 60px;
  padding: 5px 0;
}
.btn70{
  width: 70px;
  padding: 5px 0;
}
.btn80{
  width: 80px;
  padding: 5px 0;
}
.btn100{
  width: 100px;
  padding: 5px 0;
}
.btn120{
  width: 120px;
  padding: 10px 0;
}
.btn160{
  width: 160px;
  padding: 10px 0;
}
.btn200{
  width: 200px;
  padding: 10px 0;
}
.addrSearch{
  background: #e4e9f7;
  margin-left: 10px;
  
}
.save{
  background: #20375b;
  color: #fff;
}
.green{
  background: #449b09;
  color: #fff;
}

.lightGreen{
  background: #ddfcdc;
}

.edit{
  background: #62aed7;
  color: #fff;
}
.gotolist{
  background: #8d8d8d;
  color: #fff;

}

.delete{
  background: #d76299;
  font-size: 12px;
  color: #fff;
}

.red{
  background: #ce1b1b;
  color: #fff;
}

.pink{
  background: pink;
  color: #fff;
}

/* Table */

table{
  border: 1px solid #d9e3f1;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
  width: 100%;
  vertical-align: middle;
}
@media (max-width: 1100px) {
  table{
    width:100%; 
  }
  
  
  .pageTitle{
    font-size:28px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 150px;
  }
  table.clientTable{
    width: 100%;
    max-width: 100%;
    margin-left: 150px;
  }
  table.clientTable td:nth-child(1){
    text-align: right;
    font-size:14px;
    background: #d9e3f1;
    /* width: 120px; */
  }
  table.clientTable td:nth-child(3){
    text-align: right;
    font-size:14px;
    background: #d9e3f1;
    /* width: 120px; */
  }
}

table.w100Table,table.customerTable{
width: 100%;
}
table.w100Table td:nth-child(1){
  text-align: left!important;
  width: 20%!important;
}
table.w100Table td:nth-child(2),table.w100Table td:nth-child(3){
  width: 40%!important;
}

#sortable-table tr.drag-over {
  border: 2px solid #bce8f1; 
}
#sortable-table td{
text-align: right;
}
#sortable-table td i{
  margin-left: 20px;
  }





table td {
  vertical-align: middle;
  padding: 15px 10px;
  border: 1px solid #bec7d3;
  background: #fff;
}


.tableFrame table tr:nth-child(2n) td{
  background-color: #eaecf1;
}

.bgEven td{
   background-color: #eaecf1!important;
}
.negotiationTable{
  width: 870px;
}
.negotiationTable td{
  padding: 5px;
}
.negotiationTable td:nth-child(2n+1){
  width: 15%!important;
  text-align: center;
}
table th{
  font-size:14px;
  background: #d9e3f1;
  font-weight: 500;
  padding: 10px 0;
  border: 1px solid #bec7d3;
}

table.normal td:nth-child(1){
  text-align: right;
  font-size:14px;
  background: #d9e3f1;
}
table.normal td:nth-child(2){
  width: 75%;
}


table.clientTable td:nth-child(1){
  text-align: right;
  font-size:14px;
  background: #d9e3f1;
  width: 120px;
}
table.clientTable td:nth-child(3){
  width: 120px;
  text-align: right;
  font-size:14px;
  background: #d9e3f1;
}

.note{
  margin-top: 5px;
  font-size: 12px;
  color: #686868;
}
.addrDetail{
  display: flex;
  align-items: center;
  font-size: 12px;
  margin:5px 0 ;
}
.addrDetail span{
  width: 100px;
}
.sortable {
  cursor: move;
}



/* popup */
#pop-up,#notice{
	display: none;
}

.overlay,.overlayNotcie{
	display: none;
}

#pop-up:checked+.overlay {
	display: block;
	z-index: 9999;
	background-color: #000000bb;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

#notice:checked+.overlayNotcie {
	display: block;
	z-index: 9999;
	background-color: #000000bb;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.window {
	max-width: 90%;
  min-width: 100px;
	overflow-y: scroll;
	min-height: 100px;
	max-height: 70%;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	transform: translate(-50%, -50%);
	z-index: 10000;
}
.dark .window {
  background-color: #1d1d1d;
}

.windowNotice {
	max-width:80%;
  width: 350px;
	min-height: 100px;
	max-height: 70%;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	transform: translate(-50%, -50%);
	z-index: 10000;
}

#pop-up_progress {
	display: none;
	/* label でコントロールするので input は非表示に */
}
.overlay_progress {
	display: none;
	/* input にチェックが入るまでは非表示に */
}
#pop-up_progress:checked+.overlay_progress {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window_progress {
	overflow-y: hidden;
	overflow-x: hidden;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



#pop-up_image {
	display: none;
}

.overlay_image {
	display: none;
}

#pop-up_image:checked+.overlay_image {
	display: block;
	z-index: 9999;
	background-color: #000000bb;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.window_image {
	max-width: 80%;
	width: 750px;
	overflow-y: scroll;
	min-height: 250px;
	max-height: 90%;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	transform: translate(-50%, -50%);
	z-index: 10000;
}



.window::-webkit-scrollbar {
	display: none;
  }


.close{
  cursor: pointer;
  position: absolute;
  top: 10px;
  border-radius: 50vh;
  right: 10px;
  font-size: 24px;
  color: rgb(105, 105, 105);
  z-index: 1000;
}



/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 30px;
  padding-bottom: 40px;
  max-width: 800px;
  width: 100%;
}

.tab_item {
  width: 100px;
  height: 40px;
  border-bottom: 3px solid #20375b;
  background-color: #ffffff;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}

.tab_content {
  background: #fff;
  display: none;
  clear: both;
  overflow: hidden;
}


#irai:checked ~ #irai_content,
#seikyu:checked ~ #seikyu_content {
  display: block;
}

.tabs input:checked + .tab_item {
  background-color: #20375b;
  color: #fff;
}



/* content */
.pageTitle{
  font-size:28px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dark .pageTitle{
  color: #fff;
}

.section{
  width: 100%;
}

.tipsmessage{
  color: #666;
    background-color: #eef9ff;
    border-color: #bce8f1;
    padding: 15px;
    border: 1px solid #a9cdd4;
    font-size: 14px;
}
.disabled-option,.disabled {
  color: rgb(204, 204, 204);
}

.delete-button {
  font-size: 10px;
  position: absolute;
  cursor: pointer;
  background-color: rgb(255, 0, 0);
  color: #fff;
  border-radius: 50vh;
  width: 35px;
  text-align: center;
  right: 0;
  margin-left: 5px;
}
#memberOutput{
  position: relative;
  width: calc(100% - 180px);
}
.searchArea{
  background-color: #eef9ff;
  border-color: #bce8f1;
  padding: 15px;
  border: 1px solid #a9cdd4;
  margin: 10px 0;
}

.customerHistory{
  width: calc(100% - 820px);
}

.tableFrame,.TableArea,.tablePay,.tableEarn{
  word-wrap: break-all;
}

.tableFrameOver,.tableFrame,.TableArea,.tablePay,.tableEarn,.tableFrameBOver{
  width: 100%;
  overflow-x: scroll;
}



.tableFrameOver table {
  width: 1500px;
}



@media (min-width: 1600px) {
  .tableFrameOver table{
    width: 100%;
  }
}




.tableFrameBOver table {
  width: 1700px;
}



@media (min-width: 1800px) {
  .tableFrameBOver table{
    width: 100%;
  }
}

/* 捲軸軌道背景 */
.tableFrameOver::-webkit-scrollbar,
.tableFrame::-webkit-scrollbar,
.TableArea::-webkit-scrollbar,
.tablePay::-webkit-scrollbar,
.tableEarn::-webkit-scrollbar {
  height: 12px;
  background-color: #eef9ff;
}

/* 滑塊（thumb）樣式 */
.tableFrameOver::-webkit-scrollbar-thumb,
.tableFrame::-webkit-scrollbar-thumb,
.TableArea::-webkit-scrollbar-thumb,
.tablePay::-webkit-scrollbar-thumb,
.tableEarn::-webkit-scrollbar-thumb {
  background: #20375b;
}


.tableFrame table,.tablePay table,.tableEarn table{
  table-layout: fixed;
  width: 100%;
  text-wrap: wrap;
}

@media (max-width: 1500px) {
  .tableFrame,.TableArea,.tablePay,.tableEarn{
    overflow-x: scroll;
  }
  .tableFrame table,.TableResult,.tablePay table,.tableEarn table{
    width:1500px;
  }
}
.tableFrame table tr:nth-child(2n+1){
  background: #eef9ff;
}

.tableEarn table tr:nth-child(2n+1){
  background: #f1ffee;
}

.tableEarn table th{
  background: #a0e39f;
}

.tablePay table tr:nth-child(2n+1){
  background: #ffeeee;
}

.tablePay table th{
  background: #ff9a9a;
}
.pageChangeBtn{
  border: none;
  background:#eef9ff;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  font-size: 22px;
  line-height: 22px;
  border-radius: 50vh;
  cursor: pointer;
}
.clientLogo{
  width: 35px;
  height: 35px;
  padding: 5px;
  object-fit: contain;
  margin-right: 5px;
  background: #fff;

}

.clientBLogo{
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 10px;
  background: #fff;
}

.progressbar {
  display: flex;
  flex-wrap: wrap;
}
.progressbar .item {
    position: relative;
    width: calc(100% / 6);
    font-size: 12px;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    line-height: 1.5;
    background: #f1f1f1;
    color: #b1b1b1;
    border: 1px solid #f1f1f1;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 15px solid transparent;
    border-left: 10px solid #f1f1f1;
    margin: auto;
}
.progressbar .item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

.progressbar .item.active {
  z-index: 1;
  background: #20375b;
  color: #FFF;
  border: 1px solid #20375b;
}
.progressbar .item.active:nth-child(6) {
  z-index: 1;
  background: #868686;
  color: #FFF;
  border: 1px solid #868686;
}

.progressbar .item.active:not(:last-child)::after {
  border-left-color: #20375b;
}
.progressbar .item.active:not(:last-child)::before {
  border-left: none;
}

.negotiationInfo{
  background: #fff;
  flex-wrap: wrap;
  padding:20px;
  position: relative;
  border: 1px solid #bec7d3;
  margin: 10px 0;
}
.negotiationInfo div{
  width:50%;
  margin-bottom: 15px;
}
.negotiationInfo div:last-child,.negotiationInfo div:first-child{
  width:100%;
}
.negotiationInfo div:last-child{
  margin-bottom: 0px;
}
.negotiationInfo div span{
  margin-right: 5px;
  width:60px;
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  background: #bce8f1;
  font-weight:500;
  
}
.negotiationTitle{
  width:calc(100% - 280px);
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position: relative;
    padding-top: 15px;
}
.negotiationTitle span{
  position: absolute;
  left: 0;
  top: 0px;
  padding: 0px 5px;
  color: #fff;
}

.contactStatu{
  position: absolute;
  left: 0;
  top:0;
}

#overview{
  width: 100%;
}
.chartArea{
  width: 100%;
}

#overview .leftContent,#clientAdd .leftContent{
  width: 750px;
}
#overview .rightContent,#clientAdd .rightContent,#calendar .rightContent{
  width: calc(100% - 760px);
}

@media (max-width: 1400px) {
  #overview .leftContent,#clientAdd .leftContent,#overview .rightContent,#clientAdd .rightContent,#calendar .rightContent{
    width: 100%;
  }
}

#dropdown7 img{
  width: 40px;
  height: 40px;
  margin-right: 10px;

}
#dropdown7 a{
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}


#calendarList_title{
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 0 0;
  background: #e4e9f7;
  justify-content: flex-start;
  height: 50px;
}

#calendarList{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  justify-content: flex-start;
}
.calendar-day {
    font-size: 18px;
    display: block;
    padding: 0 5px;
    margin-bottom: 5px;
    width: 35px;
    height: 35px;
    text-align: center;
}

.date-container {
  width:calc(100% / 7);
  display: flex;
  min-height: 120px;
  flex-wrap: wrap;
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid #eee;
  position: relative;
}

.week-container{
  width:calc(100% / 7);
  text-align: center;
}

.memoAdd{
  position: absolute;
  right: 0px;
  top: 0px;
}

.date-container{
  display: block;
  padding: 0 10px;
}

.week-day {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px; 
}

.weekend{
  color: #ccc; 
}

#monthNavigation {
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.today {
  color:#ffffff!important;
  font-weight: bold;
  background-color: #20375b;
  
}

#prevMonth, #nextMonth, #returnToToday{
  background: #20375b;
  color: #fff;
  padding: 5px 20px;
  cursor: pointer;
  border: none;
}
#currentMonth{
  font-size: 30px;
}


@media (max-width: 1200px) {

  .date-container {
    max-width: calc(100% / 7);
    width: 150px;
  }
}


.completed,.incomplete,.missionFrom ,.missionTo {
  padding: 2px 10px;
  border-radius: 20px;
  display: block;
}

.missionFrom{
  background-color: #ebebeb;
  margin-right: 10px;
}
.missionTo{
  background-color: #ffebf7;
  margin-left: 10px;
}

.completed{
  background-color: #42ca89;
  width: 60px;
}

.incomplete{
  background-color: #c71616;
  width: 60px;
}

.has-todos {
  position: relative;
  color: #ff0000; /* 有待办事项的日期显示红色 */
}

.unoDonecount {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #c71616;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:10px;
  color: #fff;
}

.yesDonecount {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: #42ca89;
  width: 100%;
  height: 15px;
  text-align: center;
  font-size:10px;
}
.image404{
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}

.progress-container {
  width: calc(100% - 850px);
  background-color: #e0e0e0;
  position: relative;

}

.progress-bar {
  width: 0%;
  height: 25px;
  background-color: #42ca89;
  width: 60px;
  text-align: center;
  line-height: 20px;
  color: white;
}
#progressText{
  position:absolute;
  top: 0;
  left: 10px;
}
#progressText::before{
  content: "進行状況";
}
.btnNo{
  background: transparent;
  border: none;
  cursor: pointer;
}
.calendarMenu{
  background: #384e72;
}

.search_container{
  position: relative;
  box-sizing: border-box;
}

.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container{
  position: relative;
  border: 2px solid #3879D9;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
  color: #384e72;
}
.search_container i{
  color: #384e72;
  position: absolute;
  padding: 5px;
  font-size: 24px;
  right:0px;
  top: 4px;
}
.search_container ::-webkit-input-placeholder {
  color: #3879D9;
}

#todoListContainer li{
  margin-bottom: 5px;
    list-style-type:none;
    display: flex;
  justify-content: space-between;
    padding-inline-start: 0px;
    align-items: center;
}
#todoListContainer span:nth-child(1){
  display: inline-block;
  font-size: 12px;
  width: 70px;
  color: #8A8A8A;
  text-align:justify;
}
#todoListContainer span:nth-child(2){
  width: 220px;
  color: #8A8A8A;
}
#todoListContainer strong{
  text-align: center;
  width: 50px;
  font-size: 12px;
  background:#e6e6e6;
  padding: 2px 10px;
  border-radius: 20px;
}

.steps-container {
  display: flex;
  flex-direction: column;
}
.stepArea{
  position: relative;
  min-height: 80px;
  margin-left: 30px;
  border-left: 1px solid #384e72;
}
.stepArea:nth-child(3){
  border-left: 0px solid #384e72;
}

.step {
  padding: 20px 0px 20px 40px;
  display: none; 
}

.stepArea::before{
  position: absolute;
  background: #384e72;
  width: 50px;
  border-radius: 50vh;
  display: block;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  left: -25px;
  top: 0;
  letter-spacing: 3px;
  padding: 10px 0px 10px 2px;
}
.stepArea:nth-child(1):before{
  content: "アポ管理";
}
.stepArea:nth-child(2):before{
  content: "社内依頼";
}
.stepArea:nth-child(3):before{
  content: "請求設定";
}


/* 預設顯示 Step 1 */
#step1 {
  display: block;
}

/* 激活時顯示 */
.active {
  display: block;
}

.stepTitle{
  margin-left: 50px;
  margin-top: 12px;
  font-size: 22px;
  color: #384e72;
}
.doneCount{
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50vh;
  line-height: 40px;
  margin: 0 5px;
  cursor: pointer;
}
.btnToGroup{
  display: flex;
}
.btnToGroup button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 3);
  border: 1px solid #384e72;
  cursor: pointer;
  background: #f5f5f5;
  font-size: 20px;
}

.btnToGroupActive{
  background: #384e72!important;
  color: #fff!important;
}
.pageButton{
  width: 18px;
  height: 18px;
  line-height: 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-right: 5px;
  border-radius: 50vh;
  background:#62aed7;
  border: none;
  cursor: pointer;
  color: #fff;
}

.pageButton.selected {
  background-color: black!important;
  color: white!important;
}

#loadingAnimation{
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 999999999;
  background: #e4e9f7ef;
  top: 0;
  left: 0;
}
#loadingAnimation img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}

.tabsCompany{
  width: 100%;
}

.tabCompany,.tabCateCompany {
  color: #20375b;
  background-color: #f8faff;
  border: none;
  outline: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  min-width: 140px;
  padding: 10px 25px;
  transition: 0.3s;
  font-size: 16px;
}

.tabCompany:hover,.tabCateCompany:hover {
  background-color: #20375b;
  color: #ffffff;
}

.tabCompany.activeCilent,.tabCateCompany.activeCilent {
  background-color: #20375b;
  color: #ffffff;
}

.tabCompany_act {
  background-color: #20375b;
  color: #ffffff;
}

/* Style the tab content */


.sortBar button{
  background: transparent;
  border: none;
}

.disabledBtn{
  background: transparent;
  border: none;
  pointer-events: none;
}
.unreadCountNote{
  position: absolute;
  top: -10px;
  right: 10px;
  background: #c71616;
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 50vh;
}
.clientTag{
  background-color: #d0f7ff;
  font-size: 12px;
  padding: 2px 25px 2px 10px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
}
.clientTag:hover{
  opacity: 0.8;
}
.clientTag::after{
  content: "x";
  background-color: #ff0000;
  color: #fff;
  font-size: 10px;
  position: absolute;
  right:5px;
  top:3px;
  border-radius: 50vh;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 12px;
}
#negotiationDetail td{
  vertical-align: top;
}
#negotiationDetail td:nth-child(5){
  vertical-align: middle;
  text-align: center;
}
#negotiationDetail td:nth-child(1) input[type="time"] {
 margin-top: 10px;
}
#negotiationDetail td:nth-child(2) textarea {
  margin-top: 10px;
  height: 80px;
  resize: none;
 }
 #negotiationDetail td:nth-child(3) input[type="number"] {
  width: calc(100% - 20px);
 }
 #negotiationDetail td:nth-child(4) textarea {
  height: 150px;
  resize: none;
 }
 .editable{
  overflow-wrap: break-word;
 }

.contractDataContentFrame {
  height: 185px; /* 设置您希望的最大高度 */
  overflow-y: scroll;  /* 允许在垂直方向上滚动 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  position: relative;
}
.contractDataContentFrame table td,
.contractDataContentFrame table th{
  padding: 2px 5px!important;
}
.low{
  background: transparent!important;
  color: #ff0000;
}

input[type="text"].editInput:disabled,
input[type="tel"].editInput:disabled,
input[type="mail"].editInput:disabled,
input[type="number"].editInput:disabled,
input[type="url"].editInput:disabled,
select.editInput:disabled,
textarea.editInput:disabled {
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px transparent inset;
  color: #000000;
  resize: none;
  height: auto;
  -webkit-appearance: none; /* 针对 Safari 和 Chrome */
  -moz-appearance: none;    /* 针对 Firefox */
  appearance: none;
  opacity: 1;
}

input[type="radio"].editInput:disabled,
input[type="checkbox"].editInput:disabled{
  opacity: 0.6;
}


#seikyuTable td:nth-child(1){
  padding:2px;
}
#seikyuTable tr:nth-child(2) .bg-gray{
  display: none;
}

#dateSeikyu div:first-child .delete {
  display: none !important;
}

#clientLogo img{
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.memberTab{
  width: calc(100% / 5);
  text-align: center;
  background: #f4f9ff;
  padding: 15px 0;
  cursor: pointer;
}

.memberTab.selected{
  background-color: #20375b; 
  color: #fff;
}
.memberArea{
  width: calc(100% / 3);
  border: 2px dotted #3879D9;
  border-radius: 20px;
  background: #fff;
  min-height: 250px;
  word-break: break-all;
  position: relative;
}

.dragging {
  opacity: 0.5;  
}
.highlight {
  border: 2px dashed #e65a5a; 
}
.memberTitle{
  border-radius: 20px 20px 0 0;
  background:#3879D9;
  text-align: center;
  padding: 5px 0;
  color: #fff;
}
.departmentTitle{
  margin: 5px 0;
  padding: 10px;
  background:#f7f9fc;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #dfe0e0;
}
.departmentTitle:hover{
  background:rgb(216, 235, 255);
}

.selectedDepartmentTitle {
  background:rgb(216, 235, 255);
  border-left: 5px solid #3879D9; /* 示例左边框，你可以根据实际设计调整 */
}

.memberList{
  padding:5px 10px;
  position: relative;
  border-bottom:1px solid #dadbdd;
}

.memberTab.activeMember {
  background-color: #ccc; /* 设置被点击状态的背景色 */
}
.delMember{
position: absolute;
font-size: 10px;
top:0;
right: 0;
}

#clientmemberOutput span{
  background: #dfdfdf;
  padding: 5px 30px 5px 10px;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;
  line-height: 12px;
  position: relative;
}

#clientmemberOutput button{
  background: #c71616;
  color: #fff;
  border: none;
  border-radius: 50vh;
  width: 15px;
  height: 15px;
  position: absolute;
  line-height: 12px;
  top: 3px;
  right: 5px;
}
.deleteSeikyuBtn{
  background: #c71616;
  color: #fff;
  font-size: 10px;
  line-height: 10px;
    border: 0;
}

.mainTask {
  background-color: #f2f2f2;
}
.subTask {
  background-color: #d9edf7;
}
.detailTask {
  background-color: #fcf8e3;
}

.productCheckBox{
  width: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0;
}
.productTag{
  background: #c15c5c;
  color: #fff;
  padding: 2px 10px;
  margin-right: 10px;
}
.ProductTagArea{
  position: absolute;
  right: 0;
  top: 0;
}
.statuTag{
  background: #fff;
  font-size: 12px;
  padding: 2px 10px;
  margin-right: 10px;
  border: 1px solid gray;
  cursor: pointer;
}
.statuList div{
width: 50%;
border-bottom: 1px dotted #bec7d3;
padding: 5px;
}

.hide {
  display: none !important;
}
.authorityBtn{
  position: absolute;
  top: 5px;
  right: 15px;
}

.menuBorder::after {
  content: "";
  width:calc(100% - 100px);
  height: 1px;
  background-color: #bec7d3;
  display: flex;
  position: absolute;
  right: 20px;
  top: 10px;
}
.menuBorder{
  position: relative;
}
.deleteMission{
  padding: 2px 5px;
}

.aitab {
  width: 200px;
  padding: 20px 0;
  border: 1px solid #000;
  display: block;
  background: #ffffff;
  text-align: center;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
}
.aitab:hover{
  opacity: 0.8;
}

.aicontent {
  display: none; /* Set to block to show all by default */
  text-align: center;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.aiBtn{
  background: #fff;
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}
.aiBtn i{
  font-size: 22px;
  cursor: pointer;
}

.aiBtn .f3{
  font-weight: 600;
}

.aiBtn img{
  width: 30px;
  height: 30px;
}
.aiBtn a{
  text-decoration: none;
  display: flex;
  text-decoration: none;
  gap: 10px;
  color: #000;
  align-items: center;
}



.containerPDF{
  width: 210mm;
  height: 297mm;
  background: #fff;
  padding: 40px;
  font-size: 12px;
}
.containerPDF p{
font-size: 12px;
}

.bill-title {
  padding-bottom: 1.5em;
  font-size: 30px;
  letter-spacing: 0.5em;
  font-weight: 600;
  border-bottom: 0px double #000;
  text-align: center;
}

.PDFLeft{
  width: 65%;
}
.PDFRight{
  width: 35%;
  padding-left: 5%;
}

.bill-destination {
  justify-content: space-between;
    align-items: center;
    font-size: 1.3em;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #000;
    margin-bottom: 1em;
    width: 100%;
    display: flex;
}

.bill-destination-client,.bill-total dd,.seikyuNote{
  font-size: 18px;
  font-weight: 600;
}
.bill-destination-client{
  width: calc(100% - 50px);
}

.bill-destination-honorific {
  display: table-cell;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
}

.bill-message {
  margin-bottom: 2em;
}

.bill-total {
  align-items: end;
  padding: 5px 0;
  display: flex;
  border-bottom: 1px solid #000;
  width: 100%;
}

.bill-total dt,.seikyuNote span{
width: 150px;
font-size: 12px;
}

.caption {
  font-size: 0.7em;
  margin-left: 1em;
}

.PDFRight .f1 .flex{
  border-bottom: 1px dotted #000;
  padding: 5px 0;
}

.bill-seal {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: auto;
  z-index: 0;
}

.bill-address-own{
  position: relative;
}
.bill-address-own .f1{
  position: absolute;
  z-index: 1;
}
.seikyuPreviewTable td{
font-size: 14px;
}
.seikyuPreviewTable td:nth-child(4),
.seikyuPreviewTable td:nth-child(5){
  text-align: right;
  }

  .seikyuPreviewTable .price{
font-weight: 600;
text-align: right;
  }

  .bill-company {
    margin-top: 50px;
    background-color: #f5f5f5 !important;
    padding: 20px;
    width: 100%;
    -webkit-print-color-adjust: exact;
    display: inline-flex;
}

.bill-company dt {
  width: 25%;
  padding-right: 15px;
  text-align: right;
}

.bill-company dd {
  padding-top: 15px;
}

.header-logo img {
  max-height: 60px;
}
.moveBtnLeft{
  position: fixed;
  padding:8px 10px;
  border-radius: 5px 5px 0 0;
  bottom:0;
  left: 200px;
  text-align: center;
  background: #d76299;
  color: white;
  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  max-width: 700px;
  gap: 5px;
  cursor: pointer;
}
.moveBtnRight{
  position: fixed;
  padding:8px 10px;
  border-radius: 5px 5px 0 0;
  bottom:0;
  left: 300px;
  text-align: center;
  background: #d76299;
  color: white;
  box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  max-width: 700px;
  gap: 5px;
  cursor: pointer;
}

.addToolPage{
  border: 1px dotted #bec7d3;
  color: #20375b;
  padding: 5px;
  font-size: 16px;
  cursor: pointer;
}
.addToolPage:hover{
  transform: scale(1.05);
}

#addToolList .flex{
position: relative;
}

#addToolList .flex .tooltiptext{
  visibility: hidden;
    width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: #20375b;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    top: -30px;
    left: 5px;
}


#addToolList .flex:hover .tooltiptext {
  visibility: visible;
}



.searchInput {
	padding: 2px 10px;
	border-radius: 5px;
    min-height: 34px;
	background: #ffffff;
    border:1px solid #acacac ;
}

textarea{
    padding:10px;
    resize:none;
    width: 100%;
	border-radius: 5px;
	background: #ffffff;
    border:1px solid #acacac ;
}

.notePop{
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}

.toolTag{
  padding: 2px 5px;
  border: 1px solid #F68712;
  font-size: 12px;
  color:#F68712;
  display: inline-block;
}

.noticeContent{
	width: calc(100% - 40px);
	margin-left: 10px;
	font-size: 14px;
  }

.buttonGroup{
	display: flex;
	flex-wrap: nowrap;
	column-gap: 10px;
	width: 100%;
	margin-top: 50px;
	justify-content:space-between;
}
.confirmButton,.cancelButton,.ngButton{
  font-size: 16px;
  width: calc(50% - 10px);
  padding: 10px 0;
  border: none;
	cursor: pointer;
}

.confirmPopup{
	width: 400px;
	display: flex;
	margin: 0 auto;
	flex-direction: column;
	justify-content: center;
}

.confirmBigPopup{
	display: flex;
	margin: 0 auto;
	flex-direction: column;
	justify-content: center;
}


.confirmPopup i{
	font-size: 80px;
	text-align: center;
	width: 100%;

	color: rgb(255, 177, 33);
}

.confirmContent{
	text-align: center;
	margin-top:10px;
}

.confirmButton{
  background: rgb(0, 38, 255);
	color: #fff;
}

.confirmButton:hover{
    background: rgb(4, 13, 146);
}

.cancelButton{
    background: #dddddd;
}
.cancelButton:hover{
    background: #f0f0f0;
}

.ngButton{
  background: rgb(255, 150, 0);
	color: #fff;
}

.ngButton:hover{
    background: rgb(255, 50, 0);
}


#noticeText{
  width: 100%;
}

.contentCompany tbody{
  font-size: 14px;
}

.contentCompany,.contentCateCompany{
width: 100%;
}

.messageNote{
  background: #fafcff;
  padding: 10px;
  border: 1px solid #62aed7;
  font-size: 14px;
  margin: 10px 0;
}

.NoteList{
	display: flex;
	margin-bottom: 5px;
	flex-wrap: nowrap;
}
.NoteList i{
	color:#363636;
	font-size: 20px;
	margin-right: 10px;
}

.clientDetailLogo{
  width: 200px;
  height: 100px;
  padding: 10px;
object-fit: contain;
background: #fff;
}

.clientDetail{
  width: calc(100% / 2 - 120px);
  margin-left: 20px;
}

.talentDetail,.projectDetail{
  width: calc(50% - 20px);
  margin-right: 20px;
  position: relative;
  padding: 20px;

 
}

.businessTypeTag{
  background: #c7c7c7;
  font-size: 12px;
  padding: 2px 5px;
  display: inline;
  margin-right: 5px;
  font-weight: 400;
}

.clientDetail .f2,.talentDetail .f2,.projectDetail .f2{
  display: flex;
  margin-bottom: 5px;
}

.clientDetail .f2 span,.talentDetail .f2 span,.projectDetail .f2 span{
 width: 100px;
}

.projectDetail .f2 .detail,.clientDetail .f2 .detail,.talentDetail .f2 .detail{
 width: calc(100% - 100px);
 white-space: pre-line;
}


.searchBar{
  background: #f8faff;
  padding: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #bce8f1;
  border-left: 1px solid #bce8f1;
  border-right: 1px solid #bce8f1;
}

.lianMemberTag{
  background: #eee;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
}
.lianMemberTag span{
  background: #fff;
  border-radius: 50vh;
  padding: 0 2px;
  font-size: 10px;
  margin-left: 5px;
  cursor: pointer;
}
.lianMemberTag span:hover{
  background: #000;
  color: #fff;
}
.clientDetailBtn{
  position: absolute;
  top: 0;
  right:0;
  font-size: 12px;
  background-color: #20375b;
  color: #fff;
  cursor: pointer;
  width: 80px;
  padding: 5px 0;
  text-align: center;
  border-radius: 0.35rem;
}

.seikyuTag{
  font-size: 11px;
  padding: 3px 5px;
  margin-right: 5px;
  border: 1px solid #eee;
  background: #fff;
}

.point{
  font-size: 12px;
  padding: 3px 5px;
  background: #e4e9f7;
  display: inline;
  font-weight: 600;
}

.shiharaTag{
  background: #fbf1ff;
  font-size: 11px;
  padding: 3px 5px;
  margin-right: 5px;
}
.seikyuLeft{
  width: 30%;
}

.seikyuRight{
  width: 70%;
}

.disnone {
  display: none;
}

.labelBtn_100 {
  cursor:pointer; 
  padding:5px; 
  width:100px; 
  display:block; 
  text-align:center;
}

[inert] > * {
	opacity: 0.5;
  /* background: red; */
}

span {
  white-space: nowrap;
}
.dis_none {
  display: none;
}


.tagText {
	display: inline-block;
	height: 26px;
	line-height: 24px;
	color: #fff;
	background: #6e4e6e;
	margin-right: 5px;
	padding: 2px 5px 2px 10px;
	border-radius: 50vh;
	margin-bottom: 5px;
	cursor: pointer;
}

.tagText:hover {
	opacity: 0.6;
}

.tagText::after {
	content: "X";
	background: #fff;
	border-radius: 50vh;
	padding: 0px 5px;
	color: #000;
	margin-left: 5px;
}


.navTitle{
  padding: 20px;
    color: gray;
}
.wechat{
  width: 20px!important;
  height: 20px!important;
}
.yakushoku{
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.syozoku{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wechatList{
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
  width: calc(50% - 10px);
}
.password{
  position: relative;
  /* width:calc(100% - 80px); */
}
.password i{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  box-shadow: none;
  right: 10px;
  top: 8px;
  color: gray;
}
.i{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: gray;
  box-shadow: none;
}
.togglePassword{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: gray;
  box-shadow: none;
}
.password-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-container i{
  cursor: pointer;
}
.password-text {
  font-size: 0;
  position: relative;
}

.password-text::before {
  content: '＊＊＊＊＊';
  font-size: 8px;
  letter-spacing: 2px;
}


.searchBox{
  background: #f1f4f8;
  border-top: 1px solid #bec7d3;
  border-left: 1px solid #bec7d3;
  border-right: 1px solid #bec7d3;
  padding: 20px;
}

.copy-message {
  position: fixed;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999;
}
.copy-message-show {
  display: block;
  opacity: 1;
}

.akenTag{
  position: absolute;
  top: 10px;
  right: 10px;
}

.up,.down{
width: 20px;
height: 20px;
cursor: pointer;
background: #add9f1;
}

.name-job{
  color: #bdbdbd;
  font-size: 12px;
  text-align: right;
  margin-left: 30px;
  margin-top: 5px;
}

.filterArea{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.dark .filterArea,.dark .sortBar button{
  color: #fff;
}

.calendarBlock i{
  width: 60px;
  height: 60px;
  background: #edfdfd;
  text-align: center;
  font-size: 30px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}

.calendarBlock{
  width: 25%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.titleScroll{
  text-wrap: wrap;
}

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #20375b;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
}
#scrollTopBtn:hover {
  background-color: #303f9f;
}

.greenTable th{
background: #a0e39f!important;
}

.pinkTable th{
background: #ff9a9a!important;
}

.position span{
white-space: pre-line;
}

.gray-row {
    color: #aaa; /* 或者 #999、#ccc 視需求 */
}
.text-red {
  color: red;
}

.clientClick{
  gap: 5px; 
  cursor: pointer;
}

.clientClick:hover{
  opacity: 0.8;
}

.searchSticky{
  position: sticky;
  height: auto;
  top: 60px;
  z-index: 99;
  border-bottom: 1px solid #bce8f1;
}

.sortTd i{
  cursor: pointer;
}

.sortTd i:hover{
  transform: scale(1.2);
}


/* showMsgPop */
.message-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 1000;
}

.message-box {
  /* background: rgba(255, 255, 255, 0.95); */
  background: black;
  padding: 20px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  transform: translateY(-20px);
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards, fadeOut 0.5s ease-in 2.5s forwards;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
}

.message-text {
  font-size: 1.5rem;
  font-weight: 500;
  /* color: #333; */
  color: white;
  margin: 0;
  position: relative;
  padding-left: 30px;
}

.message-text::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: bold;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* showMsgPop */



.user-info a{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  text-decoration: none;
  color: var(--primary);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.pointer {
  cursor:pointer; 
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
    display: inline-block;
  }
}

.opa02 {
  opacity: 0.2;
}
.opa03 {
  opacity: 0.3;
}
.opa04 {
  opacity: 0.4;
}
.opa05 {
  opacity: 0.5;
}
.opa10 {
  opacity: 1.0;
}

.app-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9;
  width: 800px;
  max-width: 100%;
}

.footer-item a{
  flex-direction: column;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  text-decoration: none;
}

.footer-item i {
  font-size: 22px;
  margin-bottom: 2px;
}

.logo img{
           width: 200px;
        }
        @media screen and (max-width: 500px) { 
             .logo img{
           width: 150px;
        }
        }
        
        .welcome-section {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: var(--shadow);
        }
        
        .welcome-title {
            font-size: 24px;
            margin-bottom: 8px;
            color: var(--primary);
        }
        
        .welcome-subtitle {
            color: var(--secondary);
            margin-bottom: 16px;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: var(--shadow);
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: #dbeafe;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 16px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .card-description {
            color: var(--secondary);
            margin-bottom: 16px;
            flex-grow: 1;
        }
        
        .card-actions {
            margin-top: auto;
        }
        
      
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .recent-activity {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-top: 32px;
            box-shadow: var(--shadow);
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--primary);
        }
        
        .activity-list {
            list-style: none;
        }
        
        .activity-item {
            display: flex;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background-color: #f1f5f9;
            color: var(--secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex-grow: 1;
        }
        
        .activity-title {
            font-weight: 500;
            margin-bottom: 4px;
        }
        .activity-title-detail {
           font-size: 12px;
           text-align: justify;
        }
        
        .activity-time {
          text-align: right;
            color: var(--secondary);
            font-size: 14px;
        }
        
        /* モバイル対応 */
        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .welcome-title {
                font-size: 20px;
            }
        }
        .opa1 {
            opacity: 0.1;
        }
        .opa3 {
            opacity: 0.3;
        }
        .opa5 {
            opacity: 0.5;
        }
        .opa7 {
            opacity: 0.7;
        }
        .opa9 {
            opacity: 0.9;
        }


        /* ====== 區塊標題 ====== */
    .user-section-title {
      font-size: 14px;
      font-weight: 700;
      margin: 24px 0 8px;
    }

    /* ====== 列表樣式 ====== */
    .user-list {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #f3f4f6;
      background: #ffffff;
      margin-bottom: 20px;
    }

    .user-list-row {
      display: flex;
      align-items: center;
      padding: 12px 12px;
      font-size: 14px;
      border-bottom: 1px solid #f3f4f6;
      text-decoration: none;
      color: #1b3b80;
      cursor: pointer;
    }

    .user-list-row:last-child {
      border-bottom: none;
    }

    .user-list-icon {
      width: 24px;
      text-align: center;
      margin-right: 10px;
      font-size: 18px;
    }

    .user-list-label {
      flex: 1;
    }

    .user-list-right {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }

    .user-list-pill-new {
      background: #f97316;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
    }
  .user-list-pill-ready{
    background: #b6b6b6;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
  }

    .user-list-arrow {
      font-size: 16px;
      color: #9ca3af;
    }


  .btnBlue {
  width: calc(100% - 40px);
  padding: 15px;
  font-size: 16px;
  margin:40px 20px;
  font-weight: 600;
  background:#fff;
  border: 1px solid #3b82f6;
  border-radius: 100px; /* 科技感小圓角 */
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); 
  color: #3b82f6;

}

.btnBlue:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35); /* hover 更亮更安心 */
}

/* ====== 案件列表 ====== */
.user-project-list {
  display: flex;
  flex-direction: column;

}

.user-project-id{
  font-size: 12px;
  text-align: right;
  color: gray;
}

.user-project-id i{
  cursor: pointer;
}

/* 卡片本體 */
.user-project-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px 12px;
  margin-top: 20px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid #e2e8f0;
}

/* 卡片 Header */
.user-project-card-header {
  margin-bottom: 10px;
}

.user-project-title-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.user-project-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-project-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  width: calc(100% - 70px);
  color: #0f172a;
}

.user-project-description{
  font-size: 14px;
}

.user-project-badges {
  flex-shrink: 0;
}

.user-project-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* 実施中 */
.user-project-status--active {
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

/* 完了 */
.user-project-status--done {
  background-color: #e5e7eb;
  color: #4b5563;
}

.user-project-period {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* 卡片 Body 區塊 */
.user-project-body {
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.user-project-section {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  font-size: 14px;
  gap: 20px;
  
}

.user-project-section i{
  display: flex;
  align-items: center;
  gap: 5px;
  color: gray;
  width: 75px;
}
.user-project-section p,.user-progress-barArea,.user-project-links{
  width: calc(100% - 95px);
}

.user-progress-barArea{
  display: flex;
  align-items: center;
  gap: 10px;
}



.user-project-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

/* 進度 */
.user-project-progress-main {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.user-project-progress-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: #6b7280;
}

/* 報酬 */
.user-project-reward {
  font-size: 12px;
  color: #111827;
}

.user-project-reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}

.user-project-reward-row:last-child {
  margin-bottom: 0;
}

.user-project-reward-label {
  font-weight: 600;
  color: #6b7280;
}

.user-project-reward-value {
  flex: 1;
}


/* 作業フロー */
/* Step Flow 基本設定 */
.user-project-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: calc(100% - 95px);
}

/* 每項 Step */
.user-project-flow li {
  position: relative;
  padding-left: 26px;
  padding-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

/* Step 的藍色圓點 */
.user-project-flow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #2563eb;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Step 間的連線 */
.user-project-flow li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  width: 2px;
  height: calc(100% - 6px);
  background-color: #c4dfff;
}

/* 最後一項不要連線 */
.user-project-flow li:last-child::after {
  display: none;
}
/* 進度條數字（上方文字） */
.user-progress-count {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

/* 外框條（背景） */
.user-progress-bar {
  width: 100%;
  height: 10px;
  background-color: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* 內層進度填滿 */
.user-progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
}


/* Tab 區域 */
.user-tab-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.user-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  background-color: #e2e8f0;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.user-tab-active {
  background-color: #2563eb;
  color: #ffffff;
}

.user-no-data{
  margin: 50px auto;
    text-align: center;
    display: flex;
    width: 300px;
    align-items: center;
    flex-direction: column;
}

.user-no-data img{
  width: 250px;
}

.user-project-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.user-project-link {
  color: #2563eb;       /* 藍色科技 */
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.cardFooter{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-right: 10px;
  margin-bottom: -1px;
}

.cardBtn {
  background: #2563eb;
  color: #fff;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  padding: 10px 15px;
}
.cardBtn i{
  font-size: 16px;
}

.backBtn{
  background: #2563eb;
  color: #fff;
   border-radius: 8px!important;
   font-size: 12px!important;
   padding: 5px 12px!important;
   text-decoration: none;
}

/* Tabs 外層 */
.rpt-tabs {
  margin-top: 16px;
}

/* 隱藏 radio 本體 */
.rpt-tab-input {
  display: none;
}

/* Tab 標題列 */
.rpt-tab-header {
  display: flex;
  margin-bottom: 16px;
  justify-content: space-between;
}

/* 每一個 Tab label */
.rpt-tab-label {
  flex: 1;
  text-align: center;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #e2e8f0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    justify-content: center;
  
}


/* Panel 區 */
.rpt-tab-panels {
  border-radius: 12px;
}

/* 預設隱藏所有 panel */
.rpt-tab-panel {
  display: none;
}



/* Panel 內部樣式可依你原本的為主 */
.rpt-tab-panel-form  {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid #e2e8f0;
}

 /* Tabs */
    .todo-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      font-weight: 600;
    }
    .todo-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 14px;
      background-color: #e2e8f0;
      color: #475569;
      cursor: pointer;
      border: none;
      outline: none;
      transition: 0.18s;
    }
    .todo-tab.active {
      background-color: #2563eb;
      color: #fff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    }
    .todo-tab-count {
      padding: 0 5px;
      border-radius: 999px;
      font-size: 10px;
      background-color: rgba(15, 23, 42, 0.08);
    }
    .todo-tab.active .todo-tab-count {
      background-color: rgba(15, 23, 42, 0.25);
    }

    /* Group (案件) */
    .todo-group {
      margin-bottom: 15px;
      border-radius: 10px;
      border: 1px solid #a1badb;
       background-color: #e8f4ff;
      overflow: hidden;
    }
    .todo-group-header {
      display: flex;
      justify-content: space-between;
      align-items: self-start;
      padding: 15px 12px;
      flex-direction: column;
      background-color: #e8f4ff;
      cursor: pointer;
    }
    .todo-group-title {
      font-size: 16px;
      font-weight: 600;
      color: #0f172a;
    }
    .todo-group-time{
      font-size: 10px;
      color: #475569;
    }
    .todo-group-toggle {
      font-size: 12px;
      color: #475569;
      display: flex;
      width: 100%;
      justify-content: end;
      align-items: center;
      gap: 4px;
    }

    .todo-group-toggle .open{
      background-color: #668cdd;
    color: #fff;
    box-shadow: 0 2px 8px ;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    }
   
    /* Task row */
    .todo-item {
      display: grid;
      background: #fff;
      grid-template-columns: 75px 1fr 85px ;
      gap: 5px;
     box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
      font-size: 13px;
      align-items: center;
    }

    .todo-detail-card {
      display: grid;
      background: #fff;
      grid-template-columns: 75px 1fr 45px ;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
      align-items: center;
      margin-bottom: 20px;
      gap:5px;
    }

    .todo-item:first-child {
      border-top: none;
    }

    .todo-status {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      display: inline-block;
      text-align: center;
      min-width: 40px;
    }
    .status-00  { background:#fee2e2; color:#b91c1c; }
    .status-10 { background:#dbeafe; color:#1d4ed8; }
    .status-20 { background:#dbeafe; color:#1d4ed8; }
    .status-30 { background:#dbeafe; color:#1d4ed8; }
    .status-40 { background:#dbeafe; color:#1d4ed8; }
    .status-90   { background:#dcfce7; color:#166534; }

    .todo-id {
      color: #64748b;
      font-size: 8px;
      text-align: center;
      white-space: nowrap;
    }
    .todo-shop {
      font-weight: 600;
      color: #0f172a;
      font-size: 14px;
    }
    .todo-addr {
      color: #6b7280;
      font-size: 12px;
    }

    .todo-log {
      font-size: 10px;
    }
    .todo-log-red {
      font-size: 10px;
      color: red;
    }

    .todo-empty {
      text-align: center;
      padding: 30px 0;
      font-size: 13px;
      color: #6b7280;
    }

    .copy-map{
      background: #e5eaff70;
      font-size: 20px;
    border: none;
    display: flex;
    width: 40px;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #acacac;
    padding: 10px 0;
    cursor: pointer;
    }

    .photo-up{
      background: #002efc70;
      font-size: 20px;
    border: none;
    display: flex;
    width: 40px;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #ffffff;
    padding: 10px 0;
    cursor: pointer;
    }
    .copy-map:hover,.photo-up:hover{
      transform: scale(1.02);
      opacity: 0.8;
    }

    .todoBtn{
      display: flex;
      align-items: baseline;
      justify-content: end;
      
    }


.todo-shell {
  position: relative;
  margin: 0 auto;
  min-height: 100vh;
   
}

.todo-shell.autoHegiht {
 overflow: hidden;   /* detail 模式鎖住外層 */
}

.todo-view{
  width: 100%;
}

#todoListView,
#todoDetailView {
  position: absolute;
  top: 0;
  width: 100%;
  transition: right 0.3s ease;
}



/* 初始：列表在畫面內，詳情在右邊外面 */
#todoListView {
  right: 0;
}
#todoDetailView {
  right: -150%;
}

/* detail-mode 時：列表推到左邊外面，詳情推回畫面內 */
.todo-shell.detail-mode #todoListView {
  right: 150%;
}
.todo-shell.detail-mode #todoDetailView {
  right: 0;
}

#todoDetailView .todo-detail-item {
  display: none;
}

#todoDetailView .todo-detail-item.active {
  display: block;
}


.todo-back-btn {
  margin: 10px 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #c4dfff;
  background: #f8fafc;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
}


.todo-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.todo-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.todo-upload-hint {
font-size: 12px;
    color: #305e9c;
    margin-bottom: 20px;
    display: block;
    width: 100%;
}

.todo-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.todo-photo-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-photo-caption {
  font-size: 16px;
  color: #2e333a;
  font-weight: 600;
  margin-top: 20px;
}

/* 漂亮的上傳框 */
.todo-upload-box {
  border: 2px solid #c4dfff;
  border-radius: 10px;
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f8fafc;
  cursor: pointer;
}

.todo-upload-placeholder{
  display: flex;
  align-items: center;
}

.todo-upload-box i {
  font-size: 18px;
  color: #64748b;
}

.todo-upload-box span {
  font-size: 13px;
  color: #475569;
}

/* hover / active 效果（PC 上好看，手機點擊也有反饋） */
.todo-upload-box:hover {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #bfdbfe;
}

.todo-upload-box:active {
  background: #dbeafe;
}

/* 隱藏原生 input */
.todo-upload-box input[type="file"] {
  display: none;
}

/* 如果在桌機寬度比較大，可三欄排 */
@media (min-width: 640px) {
  .todo-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


.todo-question {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}



.todo-section-submit {
  margin-top: 18px;
  text-align: right;
  padding-bottom: 150px;

}

.todo-submit-btn {
  padding: 8px 25px;
  border-radius: 999px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.todo-submit-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

.photoArea{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photoList{
  width: calc(100%/ 3 - 10px);
  position: relative;
}

.photoList img{
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.photoList i{
  position: absolute;
    right: 0;
    top: 0;
    background: #00000070;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50vh;
    color: #fff;
    cursor: pointer;
} 

.user-bill-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
}

.user-bill-header {
  margin-bottom: 16px;
}

.user-bill-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

.user-bill-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 期間タブ（LINEMO 風） */
.user-bill-period-tabs {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 10px;

}

.user-bill-period-tab {
  border: none;
  padding: 2px 12px;
  background: transparent;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  border: 1px solid #d3f3fd;
  background: #fbfeff;
}

.user-bill-period-tab.active {
  color: #0f172a;
  font-weight: 600;
  font-size: 16px;
   background: transparent;
   border:none;
   pointer-events: none;
}

.user-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #475569;
}

/* ご請求案内カード */
.user-bill-summary-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-bill-card {
  border-radius: 12px;
  background: #ffffff;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  border: 1px solid #e2e8f0;
}

.user-bill-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.user-bill-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}

.user-bill-card-sub {
  font-size: 12px;
  color: #64748b;
}

.user-bill-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}

/* 狀態chip */
.user-bill-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.user-bill-status--10 {
  background: #e2e8f0;
  color: #475569;
}

.user-bill-status--20 {
  background: #fef3c7;
  color: #92400e;
}

.user-bill-status--30 {
  background: #dbeafe;
  color: #1d4ed8;
}

.user-bill-status--40 {
  background: #dcfce7;
  color: #166534;
}

.user-bill-status--90 {
  background: #dcfce7;
  color: #166534;
}


/* 金額 */
.user-bill-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 6px;
}

.bill-label {
  font-size: 14px;
  font-weight: normal;
  color: #64748b;
}

.bill-value{
  font-size: 14px;
  font-weight: normal;
  color: #000;
}

.user-bill-amount-main {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.user-bill-amount-main small {
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
  color: #6b7280;
}

/* 内訳 */
.user-bill-breakdown {
  font-size: 11px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 4px;
}

.user-bill-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.user-bill-breakdown-row + .user-bill-breakdown-row {
  margin-top: 2px;
}

.user-bill-breakdown-label {
  white-space: nowrap;
}

.user-bill-breakdown-value {
  text-align: right;
  flex: 1;
}

/* 小計區 */
.user-bill-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
}

/* 卡片 footer */
.user-bill-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
  font-size:14px;
  color: #64748b;
}

.user-bill-pdf-link {
  font-size: 14px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.user-bill-pdf-link:hover {
  text-decoration: underline;
}

.past-history{
  border-top: none;
   border-left: none;
    border-right: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-self: center;
  justify-content: end;
  width: 100%;
      padding-bottom: 16px;
  background: transparent;
  margin-bottom: 20px;
  align-items: center;
  cursor: pointer;
}

.user-bill-breakdown-note{
     background: #fff0f0;
    padding: 10px;
    border: 1px solid #ffb2b2;
    font-size: 13px;
    margin-top: 10px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;

}

.search-wrapper .bx {
  font-size: 20px;
  color: #64748b;
  position: absolute;
  right: 10px;
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100%;
}


.filter-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group input,
.filter-group select {
    flex: 1;
    min-width: 150px;
}


.button-group {
    display: flex;
    gap: 1rem;

    margin-top: 2rem;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
    }
    
    .filter-group {
        flex-direction: column;
    }
    
    .report-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.terms-row {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.terms-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.terms-checkbox {
  width: 16px;
  height: 16px;
}

.terms-label {
  color: #111;
}


.terms-text {
    display: inline-block;    
    max-width: 100%;          
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;      
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
}

.todo-locked-notice,.todo-question-notice{
  margin: 10px 0;
    padding: 10px 12px;
    font-size: 12px;
    color: #ff0000;
    background: #fff7ed;
    border: 1px solid #ff0000;
    border-radius: 6px;
    width: 100%;
}

.iconGreen{
  color: #00BF63;
}

.popContent{
  width: 600px;
  max-width: 100%;
}

.todo-question-notice{
  display: none;
}

@media (max-width: 600px) {
  .sectionSeikyu{
    width: 100%;
    overflow-x: scroll;
  }
  .todo-question-notice{
    display: block;
  }

  .seikyuTable{
    width: 100%; 
    border-collapse: collapse;
    width: 400px;
  }
}