@charset "UTF-8";
/* CSS Document */
#contents > div > .inner01 > #section01 .txt01 {
	color: #d93129;
	font-size: 150%;
	font-family: "Hiragino Kaku Gothic W5 JIS2004";
	line-height: 2;
	margin-bottom: 1em;
}
#contents > div > .inner01 > #section01 .txt02 {
	margin-bottom: 3em;
}
#contents > div > .inner01 > #section02 {
	margin-bottom: 3em;
}
#contents > div > .inner01 > #section02 table tr {
	background-image: linear-gradient(to right, #b2b2b2, #b2b2b2 2px, transparent 2px, transparent 5px);
	background-size: 9px 2px;
	background-position: bottom;
	background-repeat: repeat-x;
}
#contents > div > .inner01 > #section02 table tr:nth-last-child(1),
#contents > div > .inner01 > #section02 table tr:nth-last-child(2) {
	background: none;
}
#contents > div > .inner01 > #section02 table tr th,
#contents > div > .inner01 > #section02 table tr td {
	padding: 1em 0;
}
#contents > div > .inner01 > #section02 table tr th {
	text-indent: 0.2em;
	font-style: italic;
	font-family: 'Roboto', sans-serif;
}
#contents > div > .inner01 > #section02 table tr td:nth-of-type(1) {
	width: 5em;
	position: relative;
}
#contents > div > .inner01 > #section02 table tr td:nth-of-type(1):after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 5px;
	border: 1px solid #b2b2b2;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
#contents > div > .inner01 > #section02 table tr td:nth-of-type(1):before {
	content: '';
	display: block;
	width: 2px;
	height: calc(100% + 4em);
	background: #b2b2b2;
	position: absolute;
	top: 7.5em;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
#contents > div > .inner01 > #section02 table tr:nth-last-child(2) td:nth-of-type(1):before {
	top: 0.9em;
	bottom: 0;
}
#contents > div > .inner01 > #section02 table tr:last-child td:nth-of-type(1) {
}
#contents > div > .inner01 > #section02 table tr:last-child td:nth-of-type(1):after,
#contents > div > .inner01 > #section02 table tr:last-child td:nth-of-type(1):before {
	content: '';
	display: block;
	width: 2px;
	height: 1.5em;
	background: #b2b2b2;
	position: absolute;
	top: 0.1em;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
#contents > div > .inner01 > #section02 table tr:last-child td:nth-of-type(1):after {
	left: 1.0em;
	transform: rotate(45deg);
}
#contents > div > .inner01 > #section02 table tr:last-child td:nth-of-type(1):before {
	left: -1.0em;
	transform: rotate(-45deg);
}
#contents > div > .inner01 > #section03 .ttl01 {
	color: #d93129;
	font-family: "Hiragino Kaku Gothic W5 JIS2004";
	line-height: 2.5;
	margin-bottom: 2em;
	border-bottom: 1px solid #d93129;
}
#contents > div > .inner01 > #section03 .ttl01:before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 0.5em;
	background: #d93129;
	vertical-align: middle;
}
#contents > div > .inner01 > #section03 table {
	width: 100%;
}
#contents > div > .inner01 > #section03 table tr th,
#contents > div > .inner01 > #section03 table tr td {
	font-style: italic;
	padding: 0.3em 0;
	position: relative;
}
#contents > div > .inner01 > #section03 table tr th:nth-of-type(1) {
	width: 4em;
}
#contents > div > .inner01 > #section03 table tr:last-child th {
	padding: 1em 0 0;
	font-weight: normal;
	font-family: 'Roboto', sans-serif; 
}
#contents > div > .inner01 > #section03 table tr:last-child th:first-child {
	font-weight: 600;
	font-style: normal;
	text-align: right;
	padding-right: 1em;
}
#contents > div > .inner01 > #section03 table tr th span {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	line-height: 1;
	position: absolute;
	right: 1em;
	bottom: -0.5em;
}
#contents > div > .inner01 > #section03 table tr td {
	background: #f1f1f1;
	background-image: linear-gradient(to right, #b2b2b2, #b2b2b2 2px, transparent 2px, transparent 5px);
	background-size: 9px 2px;
	background-position: bottom;
	background-repeat: repeat-x;
}
#contents > div > .inner01 > #section03 table tr:nth-last-child(2) td {
	background-image: none;
	border-bottom: 1px solid #b2b2b2;
}
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:after {
	display: block;
	content: '';
	width: 65%;
	background: linear-gradient(to right, rgb(66, 75, 207), rgb(111, 122, 222) 50%, rgb(66, 75, 207));
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#contents > div > .inner01 > #section03.on table tr:nth-last-of-type(2) td:after {
	animation: bar-animation 1 4s;
	animation-fill-mode: forwards;
}
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(1):after  { max-height: calc(   8% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(2):after  { max-height: calc(  15% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(3):after  { max-height: calc(  30% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(4):after  { max-height: calc(  45% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(5):after  { max-height: calc(  75% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(6):after  { max-height: calc( 115% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(7):after  { max-height: calc( 145% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(8):after  { max-height: calc( 160% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(9):after  { max-height: calc( 190% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(10):after { max-height: calc( 590% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(11):after { max-height: calc( 580% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(12):after { max-height: calc( 615% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(13):after { max-height: calc( 630% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(14):after { max-height: calc( 715% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(15):after { max-height: calc( 825% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(16):after { max-height: calc( 842% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(17):after { max-height: calc( 870% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(18):after { max-height: calc( 942% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(19):after { max-height: calc( 982% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(20):after { max-height: calc(1015% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(21):after { max-height: calc(1060% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(22):after { max-height: calc(1080% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(23):after { max-height: calc(1086% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(24):after { max-height: calc(1072% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(25):after { max-height: calc(1046% + 2px); }
#contents > div > .inner01 > #section03 table tr:nth-last-of-type(2) td:nth-of-type(26):after { max-height: calc(1036% + 2px); }
@keyframes bar-animation{
  0%   { height :    0%; }
  100% { height : 1100%; }
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 960px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
	#contents > div > .inner01 > #section01 .txt01 {
    font-size: 125%;
    text-align: center;
	}
	#contents > div > .inner01 > #section01 .txt02 {
    margin-bottom: 1em;
	}
	#contents > div > .inner01 > #section02 table tr th,
	#contents > div > .inner01 > #section02 table tr td {
    padding: 0.5em 0;
	}
	#contents > div > .inner01 > #section02 table tr td:nth-of-type(1) {
    width: 2em;
	}
	#contents > div > .inner01 > #section02 table tr td:nth-of-type(1):before {
    top: 2.5em;
	}
	#contents > div > .inner01 > #section02 table tr:first-child td:nth-of-type(1):before {
    height: 4em;
	}
	#contents > div > .inner01 > #section02 table tr:nth-last-child(2) td:nth-of-type(1):before {
		top: 1.8em;
    bottom: auto;
    height: 100%;
	}
	#contents > div > .inner01 > #section02 table tr td:nth-of-type(1):after {
    top: 1.05em;
    bottom: auto;
	}
	#contents > div > .inner01 > #section03 .ttl01 {
		font-size: 125%;
		text-align: center;
		margin-bottom: 1em;
    border-top: 1px solid #d93129;
	}
	#contents > div > .inner01 > #section03 .ttl01:before {
		display: none;
	}
	#contents > div > .inner01 > #section03 table {
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
	}
	#contents > div > .inner01 > #section03 table tr th:nth-of-type(1) {
    width: 4.7em;
	}
	#contents > div > .inner01 > #section03 table tr:last-child th {
    padding: 0;
	}
	#contents > div > .inner01 > #section03 table tr:last-child th:not(:first-child) {
		font-size:10px;
		line-height: 1;
		transform:scale(0.8);
	}
	#contents > div > .inner01 > #section03 table tr td {
    background-image: linear-gradient(to right, #b2b2b2, #b2b2b2 1px, transparent 1px, transparent 3px);
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
	}
}
@media (orientation: landscape) and (max-width: 850px) and (min-width: 768px){
	#contents > div > .inner01 > #section02 table tr:first-child td:nth-of-type(1):before {
    height: 7em;
	}
}

/* グラフ全体のスタイリング */
.graph-title {
    text-align: center;
    margin: 40px 0 20px;
    font-size: 24px;
    color: #333;
}

.stacked-bar-chart {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 400px; /* グラフの高さを調整 */
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    padding: 10px;
    margin: 0 auto;
    max-width: 1000px;
    overflow-x: auto;
    flex-wrap: wrap; /* 折り返しを許可 */
}

.bar {
    position: relative;
    width: 40px;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
}

.bar-segment {
    width: 100%;
}

/* 各サービスの色を設定 */
.bar-segment.マンションisp {
    background-color: #4CAF50; /* マンションISPの色（緑） */
}

.bar-segment.ゆいぽた {
    background-color: #2196F3; /* ゆいぽたの色（青） */
}

.bar-segment.インターホンiot {
    background-color: #FF9800; /* インターホンIoTの色（オレンジ） */
}

/* 年度ラベルのスタイリング */
.bar-year {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #333;
}

/* セグメントのホバー時のツールチップ */
.bar-segment:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 5px;
    padding: 5px 10px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 3px;
    pointer-events: none;
}

canvas {
    display: block; /* または他の表示プロパティ */
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 1000px; /* 必要に応じて調整 */
    margin: 0 auto;
}

/* PC版（デフォルト） */
#CHART {
    display: block;
    width: 100%;
    height: 300px;
}

/*スマホ版 */
@media (max-width: 960px) {
    #CHART {
        width: 100%;  /* PC版の幅 */
        height: 600px; /* PC版の高さ */
    }
}