html{
	font-size:12px;	
}

body{
	margin:0;
	width:100%;
	padding-bottom:50px;
	position:relative;
}

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

body.index .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{
	background:hsl(var(--themes-color),0%,95%);
	padding:2vh 1vw;
	justify-content:space-between;
}

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

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

body > .wrapper > nav{
	width:200px;
	background:hsl(var(--themes-color),0%,95%);
	min-height:1000px;
	height:100%;
	flex-grow:0;
	padding:0;
}

body > .wrapper > nav > span{
	font-weight: bold;
}

body > .wrapper > nav > ul{
	margin-top: -8px;
}

body > .wrapper > nav > ul > li{
	display: block;
	padding:.4px 8px 4px 16px;
}

body > .wrapper > nav > ul > li::before{
	content: "・";
}

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

body > .wrapper > nav > *:not(ul){
	border-top:1px dotted hsl(var(--themes-color),0%,80%);
}

body > .wrapper > nav .focus,
body > .wrapper > nav .a
{
	font-weight: bold;
}

body > .wrapper > nav .focus a,
body > .wrapper > nav a.focus
{
	color: red;
	text-decoration: none;
}

body > .wrapper > nav .focus::before{
	color: red;
	content: "☑";
}


body > .wrapper > main{
	padding-right:2vw;	
	width:70vw;
	flex-grow:1;
}

body > .wrapper > * > h1{
	border-left:8px solid hsl(var(--themes-color),0%,70%);
	padding-left:1vw;
	font-size:1.2rem;
}

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


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

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

body > .wrapper > main > .administrator_list,
body > .wrapper > main > .cat_cost_list,
body > .wrapper > main > .store_group_list,
body > .wrapper > main > .store_list
{
	border:1px solid hsl(var(--themes-color),0%,90%);	
}

body > .wrapper > main > .administrator_list > *,
body > .wrapper > main > .cat_cost_list > *,
body > .wrapper > main > .store_group_list > *,
body > .wrapper > main > .store_list > *
{
	padding:1vh 1vw;
	gap:1vh 1vw;
}

body > .wrapper > main > .administrator_list > *:nth-of-type(even),
body > .wrapper > main > .cat_cost_list > *:nth-of-type(even),
body > .wrapper > main > .store_group_list > *:nth-of-type(even),
body > .wrapper > main > .store_list > *:nth-of-type(even)
{
	background:hsl(var(--themes-color),0%,98%);
	width:100%;
}

body > .wrapper > main > .administrator_list > * > *,
body > .wrapper > main > .cat_cost_list > * > *,
body > .wrapper > main > .store_group_list > * > *
{
	width:15%;
}

body > .wrapper > main > .store_list * {
	font-size:.9rem;
}

body > .wrapper > main > .store_list > *:hover{
	background: hsl(var(--themes-color),0%,95%);
}

body > .wrapper > main > .store_list > * > *{
	width:16%;
}

body > .wrapper > main > .store_list > * > span{
	width:5%;
	font-size:.8rem;
}

body > .wrapper > main > .store_list > * > * a:first-of-type{
	width:24%;
}

body > .wrapper > main > .store_list > * > * a:last-of-type{
	width:4%;
}

body > .wrapper > main > .administrator_list > * > *:first-of-type{
	width:40%;
}

.form_administrator .checkbox *{
	font-size:1rem;
}

.form_administrator .checkbox P{
	font-weight: bold;
}

.form_administrator .checkbox div{
	display: flex;
	gap:1vh 1vw;
	flex-wrap: wrap;
}

.form_administrator .checkbox div label{
	border:1px solid hsl(var(--themes-color),0%,90%);
	padding: .5vh 1vw;
}

.form_administrator .checkbox div .w100{
	width:100%;
}

body > .wrapper > main > .cat_cost_list > * > .child,
body > .wrapper > main > .store_group_list > * > .child
{
	width:80%;
	flex-grow:1;
	gap:1vh 1vw;
	flex-wrap:wrap;
}

body > .wrapper > main > .cat_cost_list > * > .child > *,
body > .wrapper > main > .store_group_list > * > .child > *
{
	border:1px dotted hsl(var(--themes-color),0%,70%);
	background:hsl(var(--themes-color),0%,93%);
	padding:.5vh 1vw;
	gap:2vw;
}

body > .wrapper > main > .store_group_list *{
	font-size:.9rem;
}

body > .wrapper > main > .store_group_list > * > .w100{
	width:100%;
}

body > .wrapper > main > .store_group_list > * > .store_detail{
	gap:1vh 1vw;
}

body > .wrapper > main > .store_group_list > * > .store_detail > *{
	width:5%;
	flex-grow: 1;
}

body > .wrapper > main > .store_group_list > * > .store_detail > a:first-of-type{
	width:15%;
}

body > .wrapper > main > .select-type{
	gap:1vh 1vw;	
}

body > .wrapper > main > .select-type > *{
	border-top:.5vh solid hsl(var(--themes-color),0%,0%);
	background:hsl(var(--themes-color),0%,95%);
	padding:.5vh 1.5vw;
}

body > .wrapper > main > .select-type > *.focus{
	border-top:.5vh solid hsl(var(--themes-color-red),100%,30%) !important;
	background:hsl(var(--themes-color-red),100%,50%);
	color:#FFF;
}

body > .wrapper > main > .plan_select_group{
	gap: 1vw;
}

body > .wrapper > main > .plan_select_group > *{
	position: relative;
}

body > .wrapper > main > .plan_select_group > * > a,
body > .wrapper > main > .plan_select_group > * > select,
body > .wrapper > main > .plan_select_group > * > .submit
{
	display: inline-block;
	padding:1vh 1vw;
	border: 1px solid hsl(var(--themes-color),0%,90%);
	cursor: pointer;
}

body > .wrapper > main > .plan_select_group > * > .submit
{
	padding:.5vh 1vw;
	background: hsl(var(--themes-color),0%,0%);
	color: #fff;
}

body > .wrapper > main > .plan_select_group > * > select option{
	display: inline-block;
	padding:1vh 0;
}



body > .wrapper > main > .plan_select_group > * > ul{
	position: absolute;
	display: none;
	top:99%;
	left: 0;
	background: #fff;
	border: 1px solid hsl(var(--themes-color),0%,90%);
	min-width: 200px;
	z-index: 99999;
}

body > .wrapper > main > .plan_select_group > * > ul > li a{
	display: block;
	padding:1vh 1vw;
	border-bottom: 1px solid hsl(var(--themes-color),0%,90%);
}

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

body > .wrapper > main > * > .plan_list > .flex > *.store,
body > .wrapper > main > * > .goal_save_list > *
{
	width:100%;
}

body > .wrapper > main > * > .plan_list > .flex > *.t
{
	width:15%;
}

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

body > .wrapper > main > * > .goal_save_list > *
{
	border:1px solid hsl(var(--themes-color),0%,95%);
	background: hsl(var(--themes-color),0%,90%);
	padding:.5vh 1vw;
}

body > .wrapper > main > * > .goal_save_list > .flex
{
	border-style:none;
	background: none;
	padding:.0;
}

body > .wrapper > main > * > .goal_save_list > .flex:hover
{
	background: hsl(var(--themes-color),0%,90%);
}

body > .wrapper > main > * > .goal_save_list > .sat{
	background: hsl(var(--themes-color-green),75%,90%);
}

body > .wrapper > main > * > .goal_save_list > .sun{
	background: hsl(var(--themes-color-orange),75%,90%);
}


body > .wrapper > main > .cost_fix_controll > div{
	gap:0;
	border:1px solid hsl(var(--themes-color),0%,90%);
	margin-top: -1px;
	cursor: pointer;
}

body > .wrapper > main > .cost_fix_controll > div:nth-of-type(even){
	background: hsl(var(--themes-color),0%,98%);
}

body > .wrapper > main > .cost_fix_controll > div:hover{
	background: hsl(var(--themes-color),0%,96%);
}

body > .wrapper > main > .cost_fix_controll > div > *{
	padding:.5vh 1vw;
	width:10%;
	flex-grow: 1;
	border-left: solid 1px hsl(var(--themes-color),0%,90%);
}

body > .wrapper > main > .cost_fix_controll > div > span:first-of-type{
	border: none;
}

#store_select{
	padding:1vh 1vw;
}

.cost_cat_ope_list > div{
	display: flex;
}

.cost_cat_ope_list > div.cat1{
	background: hsl(var(--themes-color-orange),75%,95%);
}

.cost_cat_ope_list > div.cat2{
	background: hsl(var(--themes-color-yellow),75%,95%);
}

.cost_cat_ope_list > div > *{
	border: 1px solid hsl(var(--themes-color),0%,70%);
	margin: -1px 0 0 -1px;
	width:10%;
	padding: .5vh .5vw;
	font-size: .9rem;
}

.cost_cat_ope_list > div > span.note
{
	flex-grow: 2;
}

.cost_cat_ope_list > div > span.exa
{
	flex-grow: 1;
}

.cost_stores > div > span
{
	flex-grow: 1;
}

.data_list *{
	font-size: 12px;
}

.data_list > *{
	display: flex;
	margin-top: -1px;
	border: 1px solid hsl(var(--themes-color),0%,95%);
}

.data_list > *:nth-of-type(even){
	background: hsl(var(--themes-color),0%,98%);
}
.data_list > *:hover{
	background: hsl(var(--themes-color),0%,90%);
}

.data_list > *.head{
	background: hsl(var(--themes-color-orange),0%,90%);
	border-color:hsl(var(--themes-color-orange),0%,60%);
	font-weight: bold;
}

.data_list > *.cat1
{
	background: hsl(var(--themes-color-orange),75%,90%);
	border-color:hsl(var(--themes-color-orange),75%,80%);
}

.data_list > *.cat2{
	background: hsl(var(--themes-color-yellow),75%,90%);
	border-color: hsl(var(--themes-color-yellow),75%,80%);
}

.data_list > * > *{
	border-right:1px solid hsl(var(--themes-color),0%,90%);
	padding:4px 8px;
	width:100px;
}

.data_list > *.head > *{
	border-color:hsl(var(--themes-color-orange),0%,60%);
}


.data_list > *.cat1 > *{
	border-color:hsl(var(--themes-color-orange),75%,80%);
}

.data_list > *.cat2 > *{
	border-color: hsl(var(--themes-color-yellow),75%,80%);
}

.data_list > * > *.w25
{
	width:25px;
}
.data_list > * > *.w50{
	width:50px;
}
.data_list > * > *.w75{
	width:75px;
}

.data_list > * > *.w125{
	width:125px;
}

.data_list > * > *.w150{
	width:150px;
}

.data_list > * > *.w175{
	width:175px;
}

.data_list > * > *.w200{
	width:200px;
}

.data_list > * > *.w225{
	width:225px;
}

.data_list > * > *.w250{
	width:250px;
}

.data_list > * > *.w275{
	width:275px;
}

.data_list > * > *.w300{
	width:300px;
}
.data_list > * > *.w400{
	width:400px;
}
.data_list > * > *.w500{
	width:500px;
}

.data_list > * > *.grow{
	flex-grow: 1;
}

.data_list > * > * input[type=text],
.data_list > * > * input[type=number],
.data_list > * > * input[type=date],
.data_list > * > * select
{
	width: 100%;
	border-color: hsl(var(--themes-color),0%,70%);
	border-width: 1px;
	padding:2px 4px;
	background: #fff;
}