@charset "utf-8";
/*
¡¡middle css
--------------------------------------------------------
   Creation date : 2024.05.01
   Last up date   : 2024.05.01
*/
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');

/*--------------------------------------------------------
¡¡#contents
--------------------------------------------------------*/
#contents {
}


/*--------------------------------------------------------
¡¡¹²Í¨ÔO¶¨ 
--------------------------------------------------------*/
.ir {}
@media screen and (max-width:768px) {
.ir {
	margin:0;
	padding-right:10px;
	padding-left:10px;
}
}
.ir a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}


/*--------------------------------------------------------
¡¡middle 
--------------------------------------------------------*/
.middle {}

.middle h4 {
	border-bottom: 2px solid var(--color-blue2);
	color: var(--color-blue2);
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

.middle h5 {
	border-left: 5px solid var(--color-blue2);
	color: var(--color-blue2);
	font-size: 18px;
	font-weight: bold;
	padding-left: 5px;
	margin-top: 50px;
	margin-bottom: 0;
}
.middle ul.midashi {
	
}
.middle ul.midashi li {
	font-weight: bold;
	font-size: 18px;
	text-indent: -1em;
	padding-left: 1em;
	padding-bottom: 10px;
	line-height: 1.3;
}
@media screen and (max-width:768px) {
.middle ul.midashi li {
	font-size: 16px;
}
}
.middle ul.midashi li span {
	color: var(--color-blue2);
}


.middle table.tableKpi {
  margin: 20px 0 10px 0;
}
@media screen and (max-width:768px) {
.middle table.tableKpi {
	width: 746px;
  margin: 5px 0 0px 0;
}
}
.middle table.tableKpi td {
	font-size: 16px;
	line-height: 1;
	padding: 5px 5px 5px 5px;
	font-weight: bold;
	vertical-align: middle;
}
.middle table.tableKpi th {
	padding: 10px 5px 10px 0;
	text-align: center;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
	font-weight: 900;
	background: var(--color-blue5);
	color: #FFF;
	font-family: "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.middle table.tableKpi th span {
	font-size: 12px;
}

@media screen and (max-width:768px) {
.middle table.tableKpi td {
	font-size: 14px;
}
.middle table.tableKpi th {
	font-size: 20px;
}
}

.middle table.tableKpi td.plan {
	background:#EEE;
	overflow: hidden;
	vertical-align: middle !important;
	font-family: "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-size: 16px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--color-blue5);
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}

.middle table.tableKpi td.plan span {
	display: block;
	text-align: center;
	background: #FFF;
	padding: 5px 10px 3px 10px;
	font-size: 12px;
	line-height: 1.3;
	font-weight: normal;
	border-radius: 50px;
	vertical-align: middle;
	color: #000;
}
.middle table.tableKpi td.plan span.w100 {
	width: 100%;
}
.middle table.tableKpi td.plan > strong {
	display: block;
	vertical-align: middle !important;
	height: 100%;
	padding: 0px;
}
.middle table.tableKpi td.plan em {
	font-size: 24px;
	font-style: normal;
}
.middle table.tableKpi td.plan span.small {
	font-size: 14px !important;
}
.middle table.tableKpi td.plan p.small {
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: normal;
}
.middle table.tableKpi td.plan p.small2 {
	font-size: 14px !important;
	line-height: 1.3 !important;
	font-weight: bold;
	text-align: center !important;
	width: 100%;
	display: block;
}
.middle table.tableKpi td.plan p.small3 {
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: normal;
	text-align: center !important;
	color: #333;
	width: 100%;
	display: block;
}
.middle table.tableKpi td.w20 {
	width: 23%;
}
.middle table.tableKpi td.w30 {
	width: 25%;
}
.middle table.tableKpi td.w35 {
	width: 35%;
}
.middle table.tableKpi td.wideP {
	padding-left: 15px !important;
	padding-right: 15px !important;
	width: 300px !important;
}

.middle table.tableKpi td.plan2 {
	background: #D0F4FA;
	border-right: 3px solid #FFF;
	width: 22%;
	letter-spacing: 0;
	line-height: 1.3;
	font-weight: normal;
}
.middle table.tableKpi .lineA { border-bottom: 2px solid #666; }
.middle table.tableKpi .lineB { border-bottom: 1px solid #999; }
.middle table.tableKpi .lineC { border-bottom: 1px solid #CCC; }
.middle table.tableKpi .lineD { border-top: 1px solid #CCC; border-size:50px;}
.middle table.tableKpi .lineR { border-right: 3px solid #FFF; }
.middle table.tableKpi .lineRS { border-right: 2px solid #FFF; }

.middle table.tableA .bgGrayHalf {
	background: #EEE;
	padding-bottom: 10px;
}

.middle table.tableKpi td table.inTable {
	
}
.middle table.tableKpi td table.inTable td{
	padding: 0 !important;
}
.middle table.tableKpi td.bgGray {
	background: #DDD;
	color: #000;
	font-weight: normal;
	text-align: center;
	font-size: 16px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
	border-right: 2px solid #FFF;
}
.middle table.tableKpi td.bgBlue {
	background: var(--color-blue5);
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
}
.middle table.tableKpi td.bgBlueHalf {
	background: #4CB8CD;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
	border-right: 2px solid #FFF;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.middle table.tableKpi td.bgGray span, 
.middle table.tableKpi td.bgBlue span, 
.middle table.tableKpi td.bgBlueHalf span {
	font-size: 12px;
	display: block;
	margin-top: 10px;
}
.middle table.tableKpi td span.smallA {
	font-size:14px;
	font-weight: normal;
}
.middle table.tableKpi td span.smallB {
	font-size:12px;
	font-weight: normal;
}
.middle table.tableKpi td span.small {
	font-size:12px;
}

@media screen and (max-width:768px) {
.middle table.tableKpi td span.small {
	font-size:10px;
}
}






.middle table.tableA {
/*  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;*/
  margin: 20px 0 10px 0;
}
@media screen and (max-width:768px) {
.middle table.tableA {
	width: 746px;
  margin: 5px 0 0px 0;
}
}
.middle table.tableA td {
	font-size: 16px;
	line-height: 1;
	padding: 5px 5px 5px 5px;
	font-weight: bold;
	vertical-align: middle;
}
.middle table.tableA td.cap {
	font-weight: normal;
	font-size: 14px;
	vertical-align: bottom;
}
.middle table.tableA td.vtop {
	vertical-align: top;
	padding-top: 10px;
}
.middle table.tableA th {
	padding: 10px 5px 10px 0;
	text-align: right;
	font-size: 22px;
	line-height: 1;
	vertical-align: middle;
	font-weight: 900;
	font-family: "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

@media screen and (max-width:768px) {
.middle table.tableA td {
	font-size: 14px;
}
.middle table.tableA td.cap {
	font-size: 12px;
}
.middle table.tableA th {
	font-size: 20px;
}
}

.middle table.tableA th.plan {
	background: var(--color-blue4);
}
.middle table.tableA th.plan2 {
	background: #D0F4FA;
	border-right: 1px solid #FFF;
}
.middle table.tableA .lineA { border-bottom: 2px solid #666; }
.middle table.tableA .lineB { border-bottom: 1px solid #999; }
.middle table.tableA .lineC { border-bottom: 1px solid #CCC; }
.middle table.tableA .lineD { border-top: 1px solid #CCC; border-size:50px;}

.middle table.tableA .bgGrayHalf {
	background: #EEE;
	padding-bottom: 10px;
}

.middle table.tableA td.bgGray {
	background: var(--color-gray2);
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
	border-right: 2px solid #FFF;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.middle table.tableA td.bgBlue {
	background: var(--color-blue5);
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.middle table.tableA td.bgBlueHalf {
	background: #4CB8CD;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	padding: 10px 5px 10px 5px;
	border-right: 2px solid #FFF;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.middle table.tableA td.bgGray span, 
.middle table.tableA td.bgBlue span, 
.middle table.tableA td.bgBlueHalf span {
	font-size: 12px;
	display: block;
	margin-top: 10px;
}
.middle table.tableA td span.smallA {
	font-size:14px;
	font-weight: normal;
}
.middle table.tableA td span.smallB {
	font-size:12px;
	font-weight: normal;
}
.middle table.tableA td span.small {
	font-size:12px;
}

@media screen and (max-width:768px) {
.middle table.tableA td span.small {
	font-size:10px;
}
}

.middle table.tableA td.text {
	font-size: 12px;
	line-height: 1.5;
	width: 22%;
	font-weight: normal;
}
.middle table.tableA td.text p {
	font-size: 12px !important;
	line-height: 1.3 !important;
	text-indent: -1em;
	padding-left: 1em;
	letter-spacing: -0.01em !important;
}
.middle table.tableA td.text sup {
	font-size: 11px;
	top: -0.2em;
	display:inline;
}

.tableSeparateBlock {
	overflow: hidden;
	width: 100%;
}
.tableSeparateBlock ul {
	overflow: hidden;
	width: 100%;
	display: block;
}
.tableSeparateBlock ul li.box1 {
	float: left;
	width: 52%;
	padding: 0;
}
.tableSeparateBlock ul li.box3 {
	float: left;
	width: 44%;
	padding: 0;
}
.tableSeparateBlock ul li.arrow {
	float: left;
	width: 4%;
	padding: 0;
}
.tableSeparateBlock ul li.arrow img {
	width: 80%;
	margin: 120px 10%;
}
@media screen and (max-width:750px) {
.tableSeparateBlock ul li.box1 {
	float: none;
	width: 100%;
	padding: 0;
}
.tableSeparateBlock ul li.box3 {
	float: none;
	width: 100%;
	padding: 0;
}
.tableSeparateBlock ul li.arrow {
	float: none;
	width: 20%;
	padding: 10px 0 10px 0;
	margin: 0px auto;
}
.tableSeparateBlock ul li.arrow img {
	width: 100%;
	margin: 0 auto;
}
}


.tableSeparateBlock table {
	width: 100%;
}
.tableSeparateBlock table.grayBox {
	margin-top: 20px;
}
.tableSeparateBlock table.grayBox th {
	background: #DDD;
	vertical-align: middle;
	font-size: 14px;
	border-bottom: 2px solid #FFF;
}
.tableSeparateBlock table.grayBox th,
.tableSeparateBlock table.grayBox td {
	padding: 10px 5px;
	line-height: 1.3;
	font-size: 14px;
	vertical-align: middle;
}
@media screen and (max-width:750px) {
tableSeparateBlock table.grayBox th {
	width: 28% !important;
}
.tableSeparateBlock table.grayBox td {
	width: 72% !important;
}
}
.tableSeparateBlock table.grayBox td {
	border-bottom: 1px solid #CCC;
}
.tableSeparateBlock table.grayBox td.grayHead {
	background: #999;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.tableSeparateBlock table.grayBox th.none {
	background: none;
	border: none;
}
.tableSeparateBlock table.blueBox th,
.tableSeparateBlock table.blueBox td {
	padding: 10px;
	line-height: 1.3;
	font-size: 14px;
	vertical-align: middle;
}

.tableSeparateBlock table.blueBox td {
	background: var(--color-blue4);
	border-bottom: 1px solid #CCC;
	font-weight: bold;
}
.tableSeparateBlock table.blueBox td.blueHead {
	background: var(--color-blue2);
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.tableSeparateBlock table.blueBox th {
	display: none;
}

.tableSeparateBlock .line01 { height: 5em; }
.tableSeparateBlock .line02 { height: 5em; }
.tableSeparateBlock .line03 { height: 4em; }
.tableSeparateBlock .line04 { height: 5.2em; }
.tableSeparateBlock .etc { text-align: center; }
@media screen and (max-width:750px) {
.tableSeparateBlock table.blueBox th.none {
	background: #FFF;
}
.tableSeparateBlock table.blueBox th {
	display: table-cell;
	border-bottom: 1px solid #CCC;
	background: #EEE;
	vertical-align: middle;
	width: 28%;
}
.tableSeparateBlock .line01 { height: 5em !important; }
.tableSeparateBlock .line02 { height: 5em !important; }
.tableSeparateBlock .line03 { height: 4em !important; }
.tableSeparateBlock .line04 { height: 4em !important; }
}

.red {
	color: #E00;
}

.middle table.tableB {
	margin: 0px 0 10px 0;
	width: 100%;
}
@media screen and (max-width:750px) {
.middle table.tableB {
	width: 746px;
}
}
.middle table.tableB td {
	font-size: 12px;
	padding: 5px 3px 5px 3px;
	text-align: right;
	vertical-align: middle;
}
.middle table.tableB td.grayA {
	background: #CCC;
	text-align: left;
}
.middle table.tableB td.grayB {
	background: #EEE;
	text-align: left;
}
.middle table.tableB td.whiteA {
	background: #FFF;
	text-align: left;
}

.middle table.tableB th {
	background: var(--color-blue2);
	color: #FFF;
	text-align: center;
	font-size: 12px;
	padding: 3px 3px 3px 3px;
	vertical-align: middle;
	line-height: 1.3;
	letter-spacing: 0;
}
.middle table.tableB th.low {
	height: 5px;
	font-size: 5px;
}
.middle table.tableB th.lineR {
	border-right: 2px solid #FFF;
}
.middle table.tableB th.lineRW,
.middle table.tableB td.lineRW {
	border-right: 5px solid #FFF;
}
.middle table.tableB th.colorB {
	background: var(--color-blue4);
	color: var(--color-blue1);
	font-size: 12px;
	text-align: center;
}
.middle table.tableB th.colorA {
	background: #FFF;
	color: var(--color-blue1);
	font-size: 12px;
	text-align: center;
}
.middle table.tableB span.small {
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 0;
}
.middle table.tableB td.text {
	font-size: 12px;
	text-align: left !important;
	padding-left: 8px;
	letter-spacing: 0;
	line-height: 1.5;
}
.middle table.tableB .txR {
	text-align: right !important;
	font-size: 14px;
}
.middle table.tableB .lineTop {
	border-top: 1px solid #CCC;
}
.middle table.tableB .bold {
	font-weight: bold;
	font-size: 16px;
}

.middle p.cap {
	font-size: 12px !important;
	line-height: 1.3 !important;
	padding: 0 0 0 2em !important;
	margin: 0 !important;
	text-indent: -2em;
}
.middle p.cap a {
	color: var(--color-blue5);
	text-decoration: underline;
}
.middle p.cap a:hover {
	background-color: var(--color-blue5);
	color: #FFF;
}