﻿@charset "utf-8";
/*-------------------------------------------------------------------------
/* reset
---------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-family: inherit;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5;
	/* vertical-align: baseline; */
	box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
	display: block;
}

/*-------------------------------------------------------------------------
/* root
---------------------------------------------------------------------------*/
:root {
	/* text */
	--sw-text-color-0: #ffffff;
	--sw-text-color-1: #000000;
	--sw-text-color-2: #333333;
	--sw-text-color-3: #666666;
	--sw-text-color-4: #9d9d9d;
	/* border */
	--sw-border-color-0: #ffffff;
	--sw-border-color-1: #cccccc;
	--sw-border-color-2: #999999;
	--sw-border-color-3: #000000;
	/* background */
	--sw-background-color-0: #ffffff;
	--sw-background-color-1: #efefef;
	--sw-background-color-2: #999999;
	--sw-background-color-3: #666666;

	/* text-size *デフォルト100%≒16px* */
	--sw-text-size-ss: 11px;
	--sw-text-size-s: 12px;
	--sw-text-size-m: 14px;
	--sw-text-size-l: 19px;

	/* disabled */
	--sw-disabled-color: #cccccc;

	/* corporate-color */
	--sw-corporate-color: #17448a;
	--sw-corporate-color-alpha80: #17438aCC;
	--sw-corporate-color-alpha60: #17438a99;
	--sw-corporate-color-alpha40: #17438a66;

	/* margin */

	/* padding */
	--sw-inner-padding: 0 18px;
}

@media (max-width:768px) {
	:root {
		/* text-size */

		/* margin */

		/* padding */
	}
}

/*-------------------------------------------------------------------------
/* common
---------------------------------------------------------------------------*/
* {
	letter-spacing: 0;
}
html, body {
	font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, sans-selif;
	color: var(--sw-text-color-2);
}
input, textarea, select, button { 
	outline: none;
	background: none;
	border: none;
}
label, input[type='checkbox'], input[type='radio'], input[type='submit']{
	cursor: pointer;
}
input, select, textarea {
	font-size: 100%;
}
input[type='checkbox'], input[type='radio'] {
	margin: 1px 5px 1px 0;
	padding: 0;
}
select {/* firefox */
	/* -moz-appearance: none; */
	text-indent: 0.01px;
	text-overflow: '';
}
button {
	background-color: transparent;
	border: none;
	padding: 0;
	appearance: none;
}
button:hover {
	cursor: pointer;
}
input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-moz-placeholder {
	font-weight: normal;
}
a, a:link, a:hover, a:visited {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
a:focus-visible,input:focus-visible{/*Accessibility*/
	z-index:100;
}
ul, ol {
	list-style: none;
}
table {
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.main-container .inner {
	margin-bottom: 1rem;
}

/* --------------------------------------------------
   chart
-------------------------------------------------- */
.chart {
    height: 400px;
}
.chartLegend {
	display: flex;
	gap: 3px 30px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.chartLegend li {
	cursor: pointer;
	font-size: var(--sw-text-size-s);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.chartLegend li >* {
	display: inline-block;
}
.chartLegend li > span:not(.seriesName) {
	margin-right: 6px;
}
.chartLegend li .seriesName {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.chartLegend .symbol {
    width: 12px;
    height: 12px;
    border-radius: 1px;
}
.chartLegend .symbolLine {
    position: relative;
    width: 12px;
    height: 2px;
}
.chartLegend .symbolLine::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 2px;
	background-color: inherit;
	transform: translateY(-50%);
}
.chartLegend .symbolLine::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	background-color: inherit;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.chartLegend .symbolLineS {
    width: 10px;
    height: 10px;
    border-radius: 1px;
}

/* chart inactive */
.is-inactive {
	color: var(--sw-disabled-color) !important;
}
.is-inactive >*:not(.seriesName) {
	background-color: var(--sw-disabled-color) !important;
}

/* --------------------------------------------------
   highcharts
-------------------------------------------------- */
.highcharts-background,
.highcharts-plot-background {
	fill: #ffffff00;
}
.highcharts-axis-labels text {
	color: var(--sw-text-color-3) !important;
	fill: var(--sw-text-color-3) !important;
	font-size: var(--sw-text-size-s) !important;
}
.highcharts-axis-title,
.highcharts-yaxis-labels text {
	font-size: var(--sw-text-size-ss) !important;
}
.highcharts-xaxis .highcharts-axis-line,
.highcharts-xaxis .highcharts-tick {
	stroke: var(--sw-border-color-1);
}
.highcharts-yaxis .highcharts-axis-line {
	stroke: var(--sw-border-color-1);
}
.highcharts-yaxis-grid .highcharts-grid-line {
	stroke-width: 1;
	stroke: var(--sw-border-color-1);
}
.highcharts-minor-grid-line {
	stroke-dasharray: 2, 2;
	stroke: var(--sw-border-color-1);
}
.highcharts-tooltip .tooltip-date {
	font-size: var(--sw-text-size-ss);
}

/* --------------------------------------------------
   menu
-------------------------------------------------- */
.menu-container {
    width: 99%;
    margin: 5px auto 0;
}

/* --------------------------------------------------
   table
-------------------------------------------------- */
table th.fixed {
	width: 200px;
}

/* --------------------------------------------------
   ohter
-------------------------------------------------- */
.icon-excel {
	display: flex;
	gap: 0 0.3rem;
}
.icon-excel::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/icon_xlsx.svg) center no-repeat;
	background-size: contain;
}

/* --------------------------------------------------
   for Print
-------------------------------------------------- */
@media print {
	.menu-container {
		display: none;
	}
}
