@charset "utf-8";


body{
	margin:0px;
	padding:0px;
	position:relative;
	display:flex;
	flex-wrap:wrap;
}

body > header{
	display:flex;
	gap:2vw;
	padding:2vh 2vw;
	background:hsl(var(--themes-color),100%,20%);
	width:100%;
	justify-content: space-between;
}

body > header *,
body > header *:visited
{
	color:#fff;
}

body > main{
	width:89%;
	min-height:1000px;
	flex-grow:1;
	padding:0 2vw;
}


body > main > *{
	width:100%;
	padding:1vh 0;
}


body > main > h1{
	font-size:1.2rem;
	text-align:center;
	margin-top:2vh;
}

body > main > h2,
body > main > div,
body > main > p
{
	margin-top:1vh;	
}

.display-center{
	position:fixed;
	width:40%;
	height:auto;
	padding:20px;
	top:300px;
	left:30%;
}

body > nav.side{
	width:8%;
	height:100%;
	background:hsl(var(--themes-color),100%,20%);
	min-height:1000px;
}

body > nav.side > *{
	text-align:center;
	border-bottom:solid 1px #fff;
	padding:2vh 1vw;
	text-decoration:none;
	display:block;
}

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

body > nav.side > *[class*="icon"]{
	font-size:2.0rem;	
}

body > nav.side > .focus{
	color:hsl(var(--themes-color-yellow),100%,50%) !important;
}

.btn-wrap{
	display:flex;
	gap:1.5vw;
	justify-content:center;
}

.btn-wrap > *{
	padding:.5vh 2vw;
	background:hsl(var(--themes-color-orange),75%,50%);
	color:#fff;
}

/*-----------------------------------*/
/* list-style */


.content-nav{
	display:flex;
	justify-content: center;
	gap:1vw;
}

.content-nav > *{
	font-size:.9rem;
	padding:.5vh 1vw;
	border:solid 1px hsl(var(--themes-color),0%,80%);
	border-top-width:4px;
}
.content-nav *{
	color:var(--themes-color-link);
}

.content-nav .focus{
	border-top-color:red;
}


.nosave-wrap{
	gap:1vw;
	display:flex;
}

.nosave-wrap > *{
	border:1px solid hsl(var(--themes-color),0%,80%);
	border-top-width:4px;
	padding:1vh 1vw;
	width:40%;
	flex-grow:1;
}

.nosave-wrap > * > div {
	padding:1vh 1vw;
	display:flex;
}

.nosave-wrap > * > div:nth-of-type(odd){
	background:hsl(var(--themes-color),0%,97%);
}

.nosave-wrap > * > div > .w100{
	width:100%;	
}

.nosave-wrap > * > div > *:first-of-type{
	width:10%;
}

.nosave-wrap > * > div > *:not(:first-of-type){
	flex-grow:1;
}

.chart-wrap > div:not(:first-of-type){
	display:none;
}


.chart-wrap > div:nth-of-type(2){
	display:block;	
}



.output-graph{
	display:flex;
	gap:1vw;
	flex-wrap:wrap;
}

.output-graph > *{
	width:49%;
}

.graph-grid{
	margin:32px auto;
	grid-gap:32px;
}

.graph-select-type{
	display:flex;
	gap:1vw;
	justify-content:center;
	margin-top:1.5vh;
	margin-bottom:1.5vh;

}

.graph-select-type > *{
	border:1px solid hsl(var(--themes-color),0%,90%);
	border-top:4px solid hsl(var(--themes-color),0%,90%);
	padding:1vh 2vw;
	color:var(--themes-color-link);
	text-decoration:underline;
	cursor:pointer;
}

.graph-select-type > *.focus,
.graph-select-type > *:first-of-type
{
	border-top-color:hsl(var(--themes-color-red),50%,50%) !important;
}



.graph-text{
	border:1px solid hsl(var(--themes-color),0%,95%);
	margin-top:2vh;
}

.graph-text > *{
	display:flex;
	gap:1vh 1vw;
}

.graph-text > *:nth-of-type(even){
	background:hsl(var(--themes-color),0%,95%);
}

.graph-text > * > *{
	width:48%;
	border-right:1px solid hsl(var(--themes-color),0%,90%);
	flex-grow:1;
	padding:1vh 1vw;
}

.toktok > * > *{
	width:20%;
}

.graph-text > * > * > .fluctuation{
	font-size:12px;
}

.graph-text > * > * > .red{
	color:#F00;
}

.profile-list{
	display:flex;
	flex-wrap:wrap;
	gap:2vw 1vh;
}


.profile-list > *{
	display:flex;
	width:48%;
	flex-grow:1;
	border:1px solid hsl(var(--themes-color),0%,90%);
	padding:1vh 1vw;
	gap:2vw 1vh;
	align-items:center;
}

.profile-list-store{
	gap:1vh;
}

.profile-list-store > *,
.profile-list-staff > *,
.profile-ranking-store-select > *

{
	width:100%;
	padding:0;
}

.profile-list-store > *:nth-of-type(even){
	background:hsl(var(--themes-color),0%,95%);
}

.profile-list-store > * > *{
	width:19%;
	border-right:1px solid hsl(var(--themes-color),0%,90%);
	padding:1vh 1vw;
	flex-grow:1;
}

.profile-list-staff > * > *{
	width:16%;
	border-right:1px solid hsl(var(--themes-color),0%,90%);
	padding:1vh 1vw;
	flex-grow:1;
}

.profile-list-staff > *:first-of-type,
.profile-list-staff > *:nth-of-type(16n)
{
	background:hsl(var(--themes-color),0%,95%);
}

.profile-list-staff > * > .sns,
.profile-list-staff > * > .name
{
	width:30%;
}

	
.profile-list-store > * > .name{
	width:40%;
}

.profile-list-staff > * > .sns > *{
	display:block;
	margin-bottom:.5vh;	
}

.profile-list-staff > * > .sns > *:last-of-type{
	margin:0;
}

.profile-list > * > .icon-wrap{
	color:hsl(var(--themes-color),0%,90%);
}

.profile-list > * > .icon-wrap .red{
	color:red;
}

.profile-ranking-store-select{
	flex-wrap:wrap;
	gap:1vw;
}

.profile-ranking-store-select > *:first-of-type{
	background:hsl(var(--themes-color),0%,95%);
	padding:1vh 1vw;
}

.profile-ranking-store-select > *:not(:first-of-type){
	display:flex;
	gap:1vh 1vw;
}

.profile-ranking-store-select > *:not(:first-of-type) > .name{
	width:30%;
}

.profile-ranking-store-select > *:not(:first-of-type) > *{
	padding:1vh 1vw;
	flex-grow:1;
	border-left:1px solid hsl(var(--themes-color),0%,95%);
	text-align:center;
}


.follower-ranking{
	display:flex;
	gap:2vw;
}

.follower-ranking > *{
	width:32%;
	border:1px solid hsl(var(--themes-color),0%,95%);
}

.follower-ranking > div > div{
	display:flex;
	gap:1vw;
	border:1px solid hsl(var(--themes-color),0%,95%);
}

.follower-ranking > div > p{
	padding:1.5vh 1vw;
	text-align:center;	
}

.follower-ranking > div > div > *{
	width:33%;
	padding:1vh 1vw;
	border-right:1px solid hsl(var(--themes-color),0%,95%);
}

.follower-ranking > div > div > *:first-of-type{
	width:15%;	
}

.follower-ranking > div > div > *:last-of-type{
	border-right:none;
}

*[class*="overlay-outer"]{
	background:hsla(var(--themes-color),0%,0%,.8);
	padding:1vh 1vw;
}




*[class*="overlay-outer"] > *
{
	width:100% !important;
	padding:1vh 2vw !important;
	margin:0 0 1.5vh;
	background:#fff;
}

*[class*="overlay-outer"] > * > *[class*="close"]{
	color:var(--themes-color-link);
	text-decoration:underline;
	display:inline-block;
	margin-right:2vw;
}

*[class*="overlay-outer"] > * > *[class*="close"]:after{
	content:"閉じる";
}

*[class*="overlay-outer"] h1{
	font-size:1.2rem;
	text-align:center;
}