@charset "utf-8";

html, body {
	font-family: source-han-sans-japanese, sans-serif;
	text-align: center;
	background-color: #FFF;
	font-size: 18px;
	color: #333;
	line-height: 1.3;
	height: auto !important;
	-webkit-text-size-adjust: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
	text-autospace: normal; /* 和文中の英数字に余白 */
}
body.dark_mode
{
	background: #222;
	color: #eee;
}

body.dark_mode a
{
	color: #8ec5ff;
}

body.dark_mode .contents
{
	background: #222;
	color: #eee;
}

body.dark_mode .list_table
{
	background: #2b2b2b;
	color: #eee;
}

body.dark_mode .list_table th
{
	background: #3a3a3a;
	color: #fff;
}

body.dark_mode .list_table td
{
	background: #2b2b2b;
	color: #eee;
	border-color: #555;
}

body.dark_mode input,
body.dark_mode select,
body.dark_mode textarea,
body.dark_mode button
{
	background: #333;
	color: #eee;
	border: 1px solid #666;
}

body.dark_mode #search_area,
body.dark_mode #customer_data
{
	background: #2b2b2b;
	color: #eee;
}

#dark_mode_toggle
{
	width: 80px;
	height: 30px;
	position: relative;
	cursor: pointer;
	display: none;
}

body.dark_mode #dark_mode_toggle
{
	
}


.red {
	color: #F00;
}
.blue {
	color: #03C;
}

.green {
	color: #0C0;
}
.t2 {
	margin-right: -1em;
	display: inline-block;
	letter-spacing: 1em;
}
.fieldset {
	text-align: left;
	padding-left: 20px;
	padding-top: 50px;
	padding-right: 20px;
	padding-bottom: 50px;
	border-radius: 20px;
	border: 1px solid #43A0BD;
	margin-bottom: 50px;
}
.legend {
	line-height: 1;
	font-size: 22px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 500;
}




.pc, .pctb, .pcmo {
	display: inline;
}

.tb, .tbmo, .mo {
	display: none;
}

#upload_ex {
	position: fixed;
	top: 0px;
	width: 500px;
	left: 50%;
	margin-left: -250px;
	height: 70px;
	border-left: 1px solid hsla(35,100%,50%,1.00);
	border-right: 1px solid hsla(35,100%,50%,1.00);
	border-bottom: 1px solid hsla(35,100%,50%,1.00);
	border-top: 1px solid hsla(35,100%,50%,1.00);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	font-size: 25px;
	font-family: kozuka-gothic-pro, sans-serif;
	padding-top: 22px;
	background-color: hsla(36,100%,95%,1.00);
	-webkit-box-shadow: inset 3px 3px 10px hsla(0,0%,0%,0.20);
	box-shadow: inset 3px 3px 10px hsla(0,0%,0%,0.20);
	color: hsla(24,100%,50%,1.00);
	text-shadow: 2px 1px 2px hsla(0,0%,0%,0.41);
	font-weight: bold;
	z-index: 9000;
	display: none;
	text-align: center;
}
.icon_link {
	height: 25px;
	display: inline-block;
	border: 1px solid hsla(0,0%,0%,1.00);
	border-radius: 5px;
	margin-right: 10px;
	vertical-align: middle;
	width: 25px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-top: 1px;
}
.icon_link svg {
	width: 100%;
	display: inline-block;
	height: 100%;
}
.icon_link:hover {
	background-color: #0000000;
}
.icon_link .st0 {
	transition: 0.5;
}
.icon_link:hover .st0{
	fill: #ff0000;
}
.link_box  {
}
.link_box a {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid hsla(0,0%,61%,1.00);
	border-radius: 5px;
	background-color: hsla(0,0%,93%,1.00);
	display: inline-block;
	font-size: 16px;
}
.link_box a:hover {
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}
.link_box button {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid hsla(0,0%,61%,1.00);
	border-radius: 5px;
	background-color: hsla(0,0%,93%,1.00);
	display: inline-block;
	font-size: 16px;
	transition: 0.5s;
	cursor: pointer;
}
.link_box button:hover {
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}



header {
	margin-bottom: 30px;
	
}
#header_contents {
	border-bottom: 1px solid #A7A7A8;
	position: relative;
	height: 70px;
	width: 1300px;
	margin-right: auto;
	margin-left: auto;
	padding-left: 10px;
	padding-right: 10px;
}
#header_logo {
	width: 90px;
	position: absolute;
	top: 15px;
	left: 10px;
}
nav {
	width: 100%;
	min-width: 540px;


}
nav ul {
	position: absolute;
	top: 25px;
	left: 150px;
}
nav ul li {
	display: inline-block;
	margin-right: -5px;
	border-left: 1px solid #787778;
}
nav ul li:last-child {
	border-right: 1px solid #787778;
}
nav ul li a {
	font-size: 18px;
	padding-right: 20px;
	padding-left: 20px;
	color: #333;
}
nav ul li a:hover {
	color: #fff;
	background-color: #333;
}
nav ul li a.now {
	color: #fff;
	background-color: #333;
	/*pointer-events: none;*/
}

.nav_new_project {
	margin-right: 30px;
	border-left-style: none;
}
.nav_new_project a {
	font-size: 18px;
	padding-right: 20px;
	padding-left: 20px;
	color: #D73A3C;
	text-decoration: underline;
}
.nav_new_project a:hover {
	color: #fff;
	background-color: #E53A3D;
}


#user_name {
	position: absolute;
	top: 23px;
	text-align: right;
	width: auto;
	right: 277px;
}
#dark_mode_toggle {
	position: absolute;
	top: 19px;
	right: 142px;
}


.logout {
	right: 0px;
	top: 12px;
	position: absolute;
	width: 130px;
	height: 45px;
	border: 1px solid #000000;
	font-size: 22px;
	color: #971727;
	border-radius: 30px;
	padding-top: 7px;
	background-color: #EBEBEB;
	display: block;
}
.logout:hover {
	background-color: #971727;
	color: #fff;
}
#error_message {
	display: inline-block;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color: hsla(359,91%,54%,1.00);
	border-radius: 5px;
	border: 2px solid hsla(359,100%,50%,1.00);

}

section {

}
.contents {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 1300px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
#customer_data {
	margin-bottom: 50px;
}

.form_area {
	margin-bottom: 40px;
}
.data_title {
	margin-bottom: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: left;
	border-bottom: 1px solid hsla(0,0%,0%,1.00);
}

.input_text {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 18px;
	width: 100%;
	border-radius: 5px;
	text-align: left;
	border: 1px solid hsla(0,0%,50%,1.00);
	background-color: hsla(0,0%,94%,1.00);
}
.input_area {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 18px;
	width: 100%;
	min-height: 300px;
	border-radius: 5px;
	border: 1px solid hsla(0,0%,69%,1.00);
	text-align: left;
	background-color: hsla(0,0%,94%,1.00);
}
.input_area_small {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 18px;
	width: 100%;
	min-height: 100px;
	border-radius: 5px;
	border: 1px solid hsla(0,0%,69%,1.00);
	text-align: left;
	background-color: hsla(0,0%,94%,1.00);
}
input:focus,
textarea:focus,
select:focus {
	background-color: #FFEEEE;
	outline: none;
}
.checkarea {
	text-align: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

label {
	cursor: pointer;
}

.form_area .submit {
	cursor: pointer;
	background-color: #EFEFEF;
	color: #333333;
	border: 1px solid hsla(0,0%,49%,1.00);
	border-radius: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-left: 5px;
	transition: 0.5s;
	width: 300px;
}
.form_area .submit:hover {
	color: #FFFFFF;
	background-color: #333333;
}
.sort_area {
	margin-left: 20px;
}

select  {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 100%;
	border: 1px solid hsla(0,0%,69%,1.00);
	border-radius: 5px;
	background-color: hsla(0,0%,95%,1.00);
	cursor: pointer;
}



.pager {
	font-size: 20px;
	margin-bottom: 30px;
}
.pager a {

}
.pager a:hover {
	color: #FFFFFF;
	background-color: #333333;
	
}
.pager .now, .pager a {
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
.pager .now {
	color: #8C8B51;
	border-bottom: 1px solid #8C8B51;
}


.add_button {
	border: 1px solid #000000;
	border-radius: 5px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: inline-block;
}
.add_button:hover {
	background-color: #333333;
	color: #FFFFFF;
}

footer {
	
}
#footer_contents {
	border-top: 1px solid #A7A7A8;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	width: 1300px;
	position: relative;
}
small {
	font-size: 16px;
}


.list_table_area {
	width: 100%;
	margin-bottom: 30px;
}

.list_table {
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 16px;
	width: 100%;
}
.list_table th  {
	background-color: #43A0BD;
	color: #FFFFFF;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-right: 1px solid #FFFFFF;
}
.list_table td  {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-right: 1px solid #000000;
	line-height: 1.7;
	text-align: left;
	vertical-align: middle;
}
.list_table td:last-child {
	border-right: none;
}
.list_table tr:nth-child(odd) td{
	background-color: #F5F4F4;
}
.list_table td a {
	text-decoration: underline;
	color: #503FE1;
	
}
.list_table td a:hover {
	color: #E43A3D;
	
}
.list_link {
	width: 80px !important;
	white-space: nowrap;
	text-align: center;
}
.list_link a {
	border: 1px solid #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-radius: 5px;
	text-decoration: none !important;
	color: #000000 !important;
}
.list_link a:hover{
	color: #FFFFFF !important;
	background-color: #333;
	text-decoration: none !important;
}
.list_link button {
	border: 1px solid #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-radius: 5px;
	transition: 0.5s;
	cursor: pointer;
}
.list_link button:hover{
	color: #FFFFFF;
	background-color: #333;
}

.list_number{
	width: 100px !important;
}
.list_name{
	width: 200px !important;
}
.list_name2{
	width: 150px !important;
	text-align: left;
}

.list_tel{
	width: 120px !important;
	text-align: left;
}
.list_mail{
	width: 200px;
	text-align: left;
}
.list_dates{
	width: 180px !important;
	white-space: nowrap;
	text-align: right;
}
.list_date{
	display: inline-block;
}

#home_list {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}

#home_list li {
	margin-bottom: 30px;
	width: 300px;
	margin-right: 20px;
	margin-left: 20px;
	display: inline-block;
}
#home_list li a{
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid hsla(0,0%,0%,1.00);
	display: inline-block;
	width: 100%;
	border-radius: 10px;
	transition: 0.5s;
}
#home_list li a:hover{
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}

.new {
	margin-bottom: 30px;
	text-align: left;
	position: absolute;
	top: 10px;
	left: 11px;
}
#switch {
	position: absolute;
	left: 0px;
	top: 7px;
	z-index: 50;
}
#switch span {
	display: inline-block;
	vertical-align: middle;
}

#contract_type_icon {
	height: 25px;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
#search_area {
	text-align: right;
	margin-bottom: 10px;
	position: relative;
}
#search_form {
	margin-bottom: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	width: 400px;
	background-color: hsla(0,0%,94%,1.00);
	border-radius: 10px;
	border: 1px solid hsla(0,0%,55%,1.00);
}
.sort_area {
	display: inline-block;
	margin-right: 20px;
	text-align: left;
	border-radius: 10px;
}

.sort_area select {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
}
.submit  {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-radius: 10px;
	border: 1px solid hsla(0,0%,59%,1.00);
	cursor: pointer;
}
.new_project {
	margin-bottom: 50px;
	display: inline-block;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #000000;
	border-radius: 10px;
	background-color: #FFEEEE;
	font-size: 20px;
}
.new_project:hover {
	background-color: #FF6467;
	color: #FFFFFF;

}



@media (max-width:1024px){
body {
	margin-top: 70px;
}

.pc, .pcmo, .mo {
	display: none;
}

.tb, .pctb, .tbmo {
	display: inline;
}

#nav_button{
	position: absolute;
	right: 30px;
	top: 5px;
	z-index: 1000;
}

#menuButton {
	display: block;
	width: 55px;
	height: 55px;
	z-index: 3;
	border-radius: 5px;
	border: 1px solid #000000;
	cursor: pointer;
}
#menuButton span {
	display: block;
	background: #000;
	width: 35px;
	height: 2px;
	position: absolute;
	left: 9px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
}
#menuButton span:first-child {
	top: 15px;
}
#menuButton span:nth-child(2) {
	margin-top: -1px;
	top: 50%;
}
#menuButton span:last-child {
	bottom: 15px;
}
#menuButton.active span:first-child {
	-webkit-transform: translateY(10px) rotate(45deg);
	-moz-transform: translateY(10px) rotate(45deg);
	-ms-transform: translateY(10px) rotate(45deg);
	transform: translateY(10px) rotate(45deg);
}
#menuButton.active span:nth-child(2) {
	opacity: 0;
}
#menuButton.active span:last-child {
	-webkit-transform: translateY(-10px) rotate(-45deg);
	-moz-transform: translateY(-10px) rotate(-45deg);
	-ms-transform: translateY(-10px) rotate(-45deg);
	transform: translateY(-10px) rotate(-45deg);
	border-radius: 10px;
	border: 1px solid hsla(0,0%,0%,1.00);
}


.pc{
	display: none;
}
.mo{
	display: inline;
}
header {
	left: 0px;
	top: 0px;
	position: fixed;
	z-index: 100;
	width: 1024px;
}

#header_contents {
	border-bottom: 1px solid #A7A7A8;
	position: relative;
	height: 70px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	
}
#header_logo {
	width: 90px;
	position: absolute;
	top: 15px;
	left: 10px;
}
nav {
	display: none;
	position: fixed;
	top: 70px;
	left: 0px;
	width: 1024px;
	background-color: #FFFFFF;
	padding-bottom: 30px;
	min-width: 1024px;
	-webkit-box-shadow: 0px 5px 5px hsla(0,0%,0%,0.26);
	box-shadow: 0px 5px 5px hsla(0,0%,0%,0.26);
}
nav ul {
	position: relative;
	top: 0px;
	left: 0px;
	margin-bottom: 20px;
}
nav ul li {
	display: inline-block;
	margin-right: 10px;
	border-left: 1px solid #787778;
	border-right: 1px solid #787778;
	border-bottom: 1px solid #787778;
	border-top: 1px solid #787778;
	width: 40%;
	margin-bottom: 20px;
	margin-top: 20px;
	border-radius: 5px;
	margin-left: 10px;
}
nav ul li:last-child {
	border-right: 1px solid #787778;
}
nav ul li a {
	font-size: 18px;
	padding-right: 20px;
	padding-left: 20px;
	color: #333;
	padding-top: 10px;
	padding-bottom: 10px;
	display: inline-block;
	width: 100%;
}
nav ul li a:hover {
	color: #fff;
	background-color: #333;
}
nav ul li a.now {
	color: #fff;
	background-color: #333;
	pointer-events: none;
}
nav .logout {
	top: auto;
	bottom: 0px;
	position: relative;
	width: 130px;
	height: 45px;
	border: 1px solid #000000;
	color: #971727;
	border-radius: 30px;
	background-color: #EBEBEB;
	display: block;
	left: 50%;
	margin-left: -65px;
}
#user_name {
	position: absolute;
	top: 23px;
	text-align: right;
	width: auto;
	right: 243px;
}
#dark_mode_toggle {
	position: absolute;
	top: 19px;
	right: 105px;
}
section {
	width: 1024px;

}
.contents {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
footer {
	width: 1024px;
}
#footer_contents {
	border-top: 1px solid #A7A7A8;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	position: relative;
}
small {
	font-size: 16px;
}
}

@media (max-width:540px){
.pc, .tb, .mo {
	display: none;
}

.mo, .pcmo, .tbmo {
	display: inline;
}
header {
	left: 0px;
	top: 0px;
	position: fixed;
	z-index: 100;
	width: 540px;
}

#header_contents {
	border-bottom: 1px solid #A7A7A8;
	position: relative;
	height: 70px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	
}
#header_logo {
	width: 90px;
}
nav {
	display: none;
	position: fixed;
	top: 70px;
	left: 0px;
	width: 540px;
	background-color: #FFFFFF;
	padding-bottom: 30px;
	min-width: 540px;
	box-shadow: 0px 5px 5px hsla(0,0%,0%,0.26);
}
nav ul {
	position: relative;
	top: 0px;
	left: 0px;
	margin-bottom: 20px;
}
nav ul li {
	display: inline-block;
	margin-right: 10px;
	border-left: 1px solid #787778;
	border-right: 1px solid #787778;
	border-bottom: 1px solid #787778;
	border-top: 1px solid #787778;
	width: 40%;
	margin-bottom: 20px;
	margin-top: 20px;
	border-radius: 5px;
	margin-left: 10px;
}
nav ul li:last-child {
	border-right: 1px solid #787778;
}
nav ul li a {
	font-size: 18px;
	padding-right: 20px;
	padding-left: 20px;
	color: #333;
	padding-top: 10px;
	padding-bottom: 10px;
	display: inline-block;
	width: 100%;
}
nav ul li a:hover {
	color: #fff;
	background-color: #333;
}
nav ul li a.now {
	color: #fff;
	background-color: #333;
	pointer-events: none;
}
nav .logout {
	top: auto;
	bottom: 0px;
	position: relative;
	width: 130px;
	height: 45px;
	border: 1px solid #000000;
	color: #971727;
	border-radius: 30px;
	background-color: #EBEBEB;
	display: block;
	left: 50%;
	margin-left: -65px;
}

section {
	width: 540px;

}
.contents {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
footer {
	width: 540px;
}
#footer_contents {
	border-top: 1px solid #A7A7A8;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	position: relative;
}
small {
	font-size: 16px;
}
#home_list {
	margin-bottom: 50px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
}