html{
	font-size:10px;	
}

*{
	font-size:1.2rem;	
}
body{
	margin:0;
	height: auto;
	position:relative;
}

body.domain{
	background-color: hsl(var(--col),0%,90%);
}

body.domain .outer{
	min-width: 500px;
	width:30%;
	margin: 50px auto;
	padding:2vh 2vw;
	background-color: #fff;
}

body > header{
	padding:2vh 1vw;
	justify-content:space-between;
}

body > header:first-of-type{
	z-index: 99999;
	width:100%;
	background:hsl(var(--col),0%,40%);
	padding:2vh 1vw;
	justify-content:space-between;
	position: fixed;
	top: 0;
	left: 0;
	height: 5vh;
}

body > header:first-of-type *{
	color: #fff;
}

body > .wrapper{
	gap:2vh 2vw;
}



body > .wrapper > *{
	flex-grow:1;
	padding-top:2vh;
	padding-bottom:2vh;
}

body > .wrapper:first-of-type{
	height: 100%;
	padding-bottom: 100px !important;
	align-items:stretch
}

body > .wrapper > nav{
	position: fixed;
	left:0;
	top:5vh;
	width:200px;
	background:hsl(var(--col),0%,40%);
	flex-grow:0;
	padding:0;
	min-height: 1500px;
}

body > .wrapper > nav *{
	color: #fff;
	font-size:1.4rem;
}

body > .wrapper > nav > *{
	display:block;
	width:100%;
	margin:0;
}

body > .wrapper > nav > ul > .child_outer{
	padding:0;
	color:var(--col-link);
	cursor:pointer;
	position:relative;
}

body > .wrapper > nav > ul > li:first-of-type,
body > .wrapper > nav > ul > .child_outer
{
	border-bottom:1px dotted hsl(var(--col),0%,80%);
}

body > .wrapper > nav .focus{
	background:hsl(var(--col),0%,20%);
	color:#fff;
}

body > .wrapper > nav > ul > li:first-of-type,
body > .wrapper > nav > ul > .child_outer > *{
	padding:.5vh .5vw;
}

body > .wrapper > nav > ul > .child_outer .child_item{
	display: none;
}

body > .wrapper > nav > ul > .child_outer .child_item a{
	text-decoration: underline;
}

body > .wrapper > nav > ul > .child_outer .child_item > li > a{
	display: block;
	text-align: left;
}

body > .wrapper > nav > ul > .child_outer > *.child_btn{
	text-decoration: none;
}

body > .wrapper > nav > ul > .child_outer > .child_inner{
	min-width: 500px;
	max-width: 800px;
	position:absolute;
	top:0;
	left:110%;
	width:300%;
	padding:1vh 1vw !important;
	z-index:99999;
	border:1px solid hsl(var(--col),0%,90%);
	background:#fff;
	display:none;
	margin: 0;
	padding: 0;
}


body > .wrapper > nav > ul > .child_outer > .child_inner *{
	color: hsl(var(--col),0%,40%);
}

body > .wrapper > nav > ul > .child_outer > .child_inner a{
	color: var(--col-link);
	text-decoration: underline;
}

body > .wrapper > nav > ul > .child_outer > .child_open{
	display:block;
}

body > .wrapper > nav .child_inner > *{
	padding-left:1.5vw;
	font-size:1.4rem;
}

body > .wrapper > nav .child_inner > h1{
	font-size:1.6rem;
	font-weight:bold;
	padding:0;
	margin:0 0 1vh;
}

body > .wrapper > nav .child_inner > div.flex{
	border:1px solid hsl(var(--col),0%,95%);
	border-top-width:4px;
	margin:0 0 1.5vh;
	padding:0
}

body > .wrapper > nav .child_inner > div.flex:last-of-type{
	margin:0;
}

body > .wrapper > nav .child_inner > div.flex > *{
	padding:1vh 1vw;
	width:100%;
}

body > .wrapper > nav .child_inner > div.flex > *.company{
	background: hsl(var(--col),0%,97%);
}

body > .wrapper > nav .child_inner > div.flex > .flex{
	gap:1vh 1vw;
}

body > .wrapper > nav .child_inner > div.flex > .flex > *{
	flex-grow:0;
}

body > .wrapper > nav .child_inner > div.flex > *.company > *:last-of-type{
	flex-grow: 0;
}



body > .wrapper > nav > ul > .child_outer > .child_inner .cancel{
	display: block;
	text-align: center;
	width:20px;
	height:auto;
	line-height: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	position:absolute;
	right:-10px;
	top:-10px;
	font-size:2rem;
	padding:0;
	margin: 0;
	color: #fff;
}


body > .wrapper > main{
	margin-top: 10vh;
	padding:0 2vw 0 220px;	
	width:10%;
	flex-grow:1;
}

body > .wrapper > main h1
{
	border-left:8px solid hsl(var(--col),0%,70%);
	padding-left:1vw;
	font-size:2rem;
	font-weight:bold;
}

body > .wrapper > main > .cost > h1{
	margin-top: 1vh;
}

body > .wrapper > * > *{
	margin-bottom:1.5vh;
}


body > .wrapper > * > .btn-wrap{
	gap:2vw;
	padding:.5vh 1vw;
	background:hsl(var(--col),0%,95%);
}

body > .wrapper > * > .btn-wrap *{
	color:var(--col-link);
	text-decoration:underline;
	cursor:pointer;
}

main > * > h1{
	font-weight:bold;
	font-size:2rem;
}

main > .realtime_list > div{
	padding:1vh 1vw;
}

main > .realtime_list > div:nth-of-type(even){
	background:hsl(var(--col),0%,97%);
}

main > .realtime_list > div > .flex > *{
	width:10%;
	flex-grow:1;
}

main > .sales .select_calendar,
main > .cost .select_date
{
	gap:1.5vw;
	background:hsl(var(--col),0%,97%);
	padding:.5vh .5vw;
	align-items:flex-end;
}

main > .sales .select_calendar > *,
main > .cost .select_date > *
{
	flex-direction: column;
}

main > .sales .select_calendar input[type="text"]{
	display: block;	
	padding:.3vw .3vh;
	border: 1px solid hsl(var(--col),0%,90%);
}

main > .sales .select_calendar input[type="text"]:focus{
	background: hsl(var(--col),0%,95%);
}


main > .sales .select_calendar > *::before{
	display: block;
	font-size:1rem;
	font-size: 1.2rem;
}

main > .sales .select_calendar > *:nth-of-type(1)::before{
	content: "期間選択";
}

main > .sales .select_calendar > *:nth-of-type(2)::before{
	content: "比較期間-1";
}

main > .sales .select_calendar > *:nth-of-type(3)::before{
	content: "比較期間-2";
}

main > .sales .select_calendar .btn,
main > .cost > .select_date .btn{
	margin-top: auto;
	background: hsl(var(--col),100%,35%);
	padding:.5vh 1vw;
	color: #fff;
}

main > .cost > .select_date select{
	padding: .5vh 1vw;
}

main > .sales .loading_wrap > *{
	display: inline-block;
	text-align: center;
}

main > .sales .disp_graph{
	height:300px;
}

main > .sales .disp_graph canvas{
	height: 300px;
}

main .sales .total_wrap{
	margin-top: 2vh;
	border:1px solid hsl(var(--col),0%,90%) ;
}

main .sales .total_wrap > *{
	border-bottom: 1px solid hsl(var(--col),0%,90%);
}

main .sales .total_wrap > *:last-of-type{
	border: none;
}

main .sales .total_wrap > *:nth-of-type(even){
	background: hsl(var(--col),0%,98%);
}

main .sales .total_wrap > .flex > *{
	width:15%;
	padding:1vh 1vw;
	border-right:1px solid hsl(var(--col),0%,90%) ;
	margin:-1px 0 0 -1px;
}

main .sales .total_wrap > .flex > span:first-of-type{
	width:10%;
	flex-grow: 0;
}

main > .sales .data_list{
	padding-bottom:100px;
}

main > .sales .data_list > *{
	width:100%;
}


main > .sales .data_list > *:nth-of-type(odd){
	background: hsl(var(--col),0%,98%);
}


main > .sales .data_list > *.sun{
	background-color: hsl(var(--col-red),80%,90%);
}

main > .sales .data_list > *.sat{
	background-color: hsl(var(--col-green),80%,90%);
}

main > .sales .data_list > *:hover{
	background: hsl(var(--col),0%,90%);
}


main > .sales .data_list > * > *{
	width:20%;
/*	gap:1vw; */
	flex-grow: 1;
	flex-wrap: nowrap;
}

main > .sales .data_list > * > *:first-of-type{
	width:50%;
}

main > .sales .data_list > * > * > *{
	padding: .5vh .5vw;
	width:7%;
	flex-grow: 1;
	border: 1px solid hsl(var(--col),0%,90%);
	margin: -1px 0 0 -1px;
}
main > .sales .data_list > * > * *{
	font-size: 1.1rem;
}

main > .sales .data_list > * > * > * .low{
	color: indianred;
}

main > .sales .data_list > * > * > * .high{
	color: #000;
	font-weight: bold;
}

main > .staff_list > *{
	width:20%;
	margin: -1px 0 0 -1px;
	padding: 1vh 1vw;
	border:1px solid hsl(var(--col),0%,90%);
	border-right:1px solid hsl(var(--col),0%,90%);
}

main > .plan_list > .flex > *,
main > .goal_list > .flex > *
{
	width:7%;
	flex-grow: 1;
	border:1px solid hsl(var(--col),0%,95%);
	margin:-1px 0 0 -1px;
	padding:.5vh 1vw;
	font-size:.8rem;
}

main > .plan_list > .flex > *.store,
main > .goal_list > .flex > *.store
{
	width:100%;
}

main > .plan_list > .flex > *.t,
main > .goal_list > .flex > *.t
{
	width:15%;
}

main > .goal_list > .flex > *.store
{
	background: hsl(var(--col),0%,90%);;
}

main > .goal_list > .flex:hover{
	background: hsl(var(--col),0%,90%);
}

main > .goal_list > .flex *{
	font-size:1rem;
}

main > .goal_list > .flex *.low{
	color: indianred;
}

main > .goal_list > .flex *.low::before{
	content: "▼";
}

main > .goal_list > .flex *.high{
	color: #000;
	font-weight: bold;
}

main > .goal_list > .flex *.high::before{
	content: "▲";
}

#download{
	width: 100%;
	background: hsla(var(--col),0%,40%,.8);
	position: fixed;
	bottom: 0;
	left:0;
	width:100%;
	padding:1vh;
	text-align: center;
	color: #fff;
}


/* 経費	*/

.cost > .details,
.cost > .details_head
{
	margin: 2vh 0;
}

.cost > .details_head > *{
	display: flex;
	gap:0;
	border: 1px solid hsl(var(--col),0%,90%);
	margin-top: -1px;
	flex-wrap: wrap;
}

.cost > .details_head > * > *{
	display: flex;
	border-right: 1px solid hsl(var(--col),0%,90%);
	width:20%;
	gap:0;
}

.cost > .details_head > * > * > *{
	padding:8px;
}

.cost > .details_head > *:nth-of-type(even){
	background: hsl(var(--col),0%,98%);
}
.cost > .details_head > *:hover{
	background: hsl(var(--col),0%,95%);
}

.cost > .details_head .head *{
	font-weight: bold;
}

.cost > .details > *.head > *{
	font-weight: bold;
}


.cost > .details li{
	display: flex;
	border: 1px solid hsl(var(--col),0%,90%);
	margin-top: -1px;
}

.cost > .details li:hover{
	background: hsl(var(--col),0%,90%);
}

.cost > .details li.head{
	background: hsl(var(--col),100%,98%);
}

.cost > .details li *{
	font-size: 10px;
	text-align: center;
}



.cost > .details li.head > *{
	text-align: center;
}

.cost > .details li > *{
	border-right: 1px solid hsl(var(--col),0%,90%);
	padding:2px;
}

.cost > .details li .w2{
	width:25px;
}

.cost > .details li .w3{
	width:55px;
}
.cost > .details li .w5{
	width:95px;
}
.cost > .details li .w10{
	width:180px;
}

.cost > .details li .payee{
	width: 150px;
}

.cost > .details li .payee_note{
	flex-grow: 2;
	min-width: 150px;
}