@charset "utf-8";
/* CSS Document */

.txt_ind{
	text-indent: 1em !important;
}

#contentsBlock .flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.container .style_hd01{
	margin-top: 75px;
	margin-bottom: 40px;
	font-size: 2.0rem;
	background: #DDEFF4;
	padding: 10px;
	line-height: 1.5;
}

.container .style_hd02{
	font-size: 1.8rem;
	font-weight: 500;
}

.container .annotation{
	font-size: 1.4rem;
}
@media screen and (max-width: 767px){
	.container .style_hd01{
		font-size: 2rem;
		margin-top: 40px;
		margin-bottom: 20px;
	}
}

/*  #message
/* ------------------------------------------------------------------------ */
#message > p{
	text-align: left;
}
#message .figureBox{
	align-items: flex-start;
	margin: 40px 0 0;
}
#message .figureBox span{
	display: flex;
	align-items: center;
	margin-top: 15px;
	text-align: left;
	line-height: 1.4;
}
#message .figureBox span img{
	vertical-align: bottom;
	margin-left: 15px;
    max-width: 160px;
    width: 50%;
}
#message .figureBox .rightBox{
	margin-left: 20px;
}
@media screen and (max-width: 480px){
	#message .figureBox{
		display: block;
		margin-top: 20px;
	}
	#message .figureBox .leftBox{
		width: 70%;
		margin: 0 auto;
	}
	#message .figureBox .rightBox{
		margin: 20px auto 0;
		width: 80%;
	}
}

/*  #rinen
/* ------------------------------------------------------------------------ */

#rinen .rinenBox{
	flex-wrap: wrap;
	align-items: stretch;
	border-top: solid 1px #707070;
}
#rinen .rinenBox li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 50%;
	border-bottom: solid 1px #707070;
	padding: 20px 0;
	min-height: 170px;
}
#rinen .rinenBox li:nth-child(even){
	border-left: solid 1px #707070;
	padding-left: 17px;
}
#rinen .rinenBox li:nth-child(odd){
	padding-right: 17px;
}

#rinen .rinenBox li .num{
	width: 34px;
	flex-shrink: 0;
	font-size: 3rem;
	font-weight: 700;
	color: #014099;
	text-align: left;
}

#rinen .rinenBox li .txtBox{
	text-align: left;
	font-size: 1.4rem;
	line-height: 24px;
	width: 68%;
}

#rinen .rinenBox li .catBox{
	background: #DDEFF4;
	width: 102px;
	height: 102px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-shrink: 0;
	margin-left: 20px;
}
#rinen .rinenBox li .catBox p{
	line-height: 1.5;
	font-size: 1.1rem;
}

#plan .style_hd01{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#plan h3 span{
	display: flex;
}

#plan h3 span a{
	background: #0b48b5;
	padding: 5px;
	font-size: 1.4rem;
	color: #fff;
}

.plan-box {
	position: relative;
	margin: 20px auto 60px;
	padding: 20px;
	border: solid 3px #0b48b5;
	text-align: left;
}
.plan-box .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #FFF;
	color: #0b48b5;
	font-weight: bold;
}
.plan-box p {
	padding-bottom: 10px;
}
.plan-box h5 {
	font-size: 1.8rem;
}
.plan-box ul.plan-txt li {
	padding: 0 0 10px 1em;
	text-indent: -1em;
	font-weight: bold;
}
.plan-box ul.plan-txt li span{
	font-weight: normal;
}
.plan-box ul.plan-txt li:last-child{
	padding-bottom: 0;
}

.plan-box ul.management {
	display: flex;
	justify-content: space-between;
}

.plan-box ul.management li{
	background: #0b48b5;
	color: #fff;
	padding: 10px;
	width: 24%;
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.4;
}


@media screen and (max-width: 840px){
	#rinen .rinenBox li .txtBox br{
		display: none;
	}
	#rinen .rinenBox li .catBox{
		margin-left: 10px;
	}
}

@media screen and (max-width: 658px){
	.plan-box ul.management li{
		font-size: 1.6rem;
	}
}


@media screen and (max-width: 580px){
	#rinen .rinenBox{
		display: block;
	}
	#rinen .rinenBox li{
		width: 100%;
		padding: 10px 0 !important;
		min-height: inherit;
	}
	#rinen .rinenBox li:nth-child(even){
		border-left: none;
	}
	#rinen .rinenBox li .txtBox{
		width: 76%;
	}
	#rinen .rinenBox li .num{
		font-size: 2.2rem;
		width: 25px;
	}
	.plan-box ul.management {
		display: block;
	}
	.plan-box ul.management li{
		width: 100%;
		margin-bottom: 10px;
	}
	.plan-box ul.management li:last-child{
		margin-bottom: 0;
	}
}

@media screen and (max-width: 500px){
	.plan_lead img{
		width: 100%;
	}
	
	#plan .style_hd01{
		display: block;
		text-align: left;
	}
	
	.plan-box .box-title{
		position: inherit;
		top: inherit;
		left: inherit;
		transform:none;
		background: none;
		display: block;
		font-size: 19px;
		text-align: center;
		padding: 0 0 10px;
		line-height: 1.6;
	}
}


/*  #plan
/* ------------------------------------------------------------------------ */
#plan .planBox{
	align-items: flex-start;
	margin-top: 20px;
}

#plan .planBox li:first-of-type{
	width: 39%;
	margin-right: 3%;
}

#plan .planBox li:last-of-type{
	width: 61%;
}

#plan .planBox .caption{
	font-size: 1.6rem;
	font-weight: 500;
	text-align: left;
	margin-bottom: 5px;
}

#plan .planBox .txtBox{
	background: #F4F4F4;
	padding: 20px;
}
#plan .planBox .txtBox p{
	font-size: clamp(1.8rem, -11rem + 64vw, 2.2rem);
	font-weight: 700;
	text-align: left;
	line-height: 32px;
}

#plan .planBox table{
	table-layout: fixed;
	border-top: solid 1px #707070;
	border-left: solid 1px #707070;
	border-collapse: collapse;
}
#plan .planBox table th,
#plan .planBox table td{
	border-collapse: collapse;
	border-right: solid 1px #707070;
	border-bottom: solid 1px #707070;
	padding: 9.1px 15px;
}
#plan .planBox table th{
	color: #fff;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.2;
}
#plan .planBox table .bg_gry{
	background: #D3D3D3;
}
#plan .planBox table.tbl01{
	position: relative;
	margin-right: 40px;
}
#plan .planBox table.tbl01::after{
	content: "";
	display: block;
	background: url("/kigyou/rinen/img/icon_arrow.svg") no-repeat center / contain;
	width: 19px;
	height: 45px;
	position: absolute;
	top: calc(100% / 2 - 22.5px);
	right: -32px;
}
#plan .planBox table.tbl01 th{
	background: #464646;
}
#plan .planBox table.tbl02 th{
	background: #014099;
}

#plan .pillarBox{
	margin-top: 100px;
	align-items: stretch;
	position: relative;
}
#plan .pillarBox::before{
	content: "";
	display: block;
	background: url("/kigyou/rinen/img/icon_arrow.svg") no-repeat center / contain;
	width: 19px;
	height: 45px;
	position: absolute;
	top: -72px;
	left: calc(100% / 2 - 9.5px);
	transform: rotate(-90deg);
}
#plan .pillarBox > li{
	width: calc(94% / 3);
}
#plan .pillarBox .ttl{
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	line-height: 53px;
}

#plan .pillarBox .sdgsBox{
	margin-top: 20px;
	padding: 0 20px;
	height: 80px;
}
#plan .pillarBox .sdgsBox p{
	text-align: left;
}
#plan .pillarBox .sdgsBox figure{
	margin-left: 20px;
}

#plan .pillarBox .txtBox{
	padding: 20px 20px 16px;
	min-height: 356px;
	margin-top: 20px;
}

#plan .pillarBox .txtBox h5{
	text-align: center;
	font-size: 1.8rem;
}
#plan .pillarBox .txtBox > ul li{
	text-indent: -1em;
	padding-left: 1em;
	text-align: left;
}

#plan .pillarBox > li:nth-child(1) .ttl{
	background: #EC8737;
}
#plan .pillarBox > li:nth-child(1) .txtBox{
	background: #FAE3D9;
}
#plan .pillarBox > li:nth-child(2) .ttl{
	background: #6890BF;
}
#plan .pillarBox > li:nth-child(2) .txtBox{
	background: #E0E3F2;
}
#plan .pillarBox > li:nth-child(3) .ttl{
	background: #469733;
}
#plan .pillarBox > li:nth-child(3) .txtBox{
	background: #E7EBDC;
}


#plan .basisBox{
	margin-top: 10px;
	border-right: solid 2px #707070;
	border-bottom: solid 2px #707070;
	border-left: solid 2px #707070;
	padding: 15px 10px;
}

#plan .basisBox .inner{
	max-width: 950px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
#plan .basisBox > .inner > .flex{
	margin-top: 20px;
}
#plan .basisBox .strengthenList li{
	margin-right: 10px;
}

#plan .financialPolicyBox{
	margin-top: 40px;
}
#plan .financialPolicyBox .style_hd02{
	text-align: left;
}
#plan .financialPolicyBox dl{
	display: flex;
	align-items: center;
	margin-top: 18px;
}
#plan .financialPolicyBox dl dt{
	width: 165px;
	flex-shrink: 0;
	border: solid 1px #707070;
	line-height: 53px;
	margin-right: 20px;
	font-size: 1.6rem;
	font-weight: 500;
}
#plan .financialPolicyBox dl dd{
	text-align: left;
	line-height: 1.625;
}

@media screen and (max-width: 1023px){
	#plan .pillarBox .sdgsBox{
		margin-top: 10px;
		padding: 0 10px;
	}
	#plan .pillarBox .sdgsBox figure {
		margin-left: 10px;
	}
	#plan .pillarBox .txtBox{
		margin-top: 10px;
	}
	#plan .pillarBox .sdgsBox p br,
	#plan .pillarBox .txtBox > ul li br{
		display: none;
	}
}
@media screen and (max-width: 930px){
	#plan .planBox{
		display: block;
	}
	#plan .planBox > li{
		margin-top: 20px;
	}
	#plan .planBox li:first-of-type, #plan .planBox li:last-of-type{
    	width: 100%;
	}
	#plan .planBox .txtBox p br{
		display: none;
	}
	#plan .planBox > li > .flex{
		justify-content: flex-start;
	}
	#plan .basisBox .strengthenList li {
		margin-right: 15px;
	}
}
@media screen and (max-width: 767px){
	#plan .pillarBox{
		display: block;
	}
	#plan .pillarBox > li{
		margin-top: 20px;
		width: 100%;
	}
	#plan .pillarBox .ttl{
		line-height: 40px;
	}
	#plan .pillarBox .txtBox{
		min-height: inherit;
	}
	#plan .basisBox{
		padding: 0 20px 20px;
	}
	#plan .basisBox > .inner > .flex{
		display: block;
		margin-top: 0;
	}
	
	#plan .basisBox .strengthenList {
		display: block;
		margin: 10px 0;
	}
	#plan .basisBox .strengthenList li{
		text-align: left;
		margin-right: 0;
	}
}
@media screen and (max-width: 580px){
	#plan .planBox table th,
	#plan .planBox table td{
		font-size: 1.2rem;
		padding: 5px;
	}
	#plan .planBox table.tbl01::after{
		width: 14px;
		height: 33px;
		top: calc(100% / 2 - 16.5px);
		right: -28px;
	}
	#plan .pillarBox{
		margin-top: 50px;
	}
	#plan .pillarBox::before{
		top: -40px;
		left: calc(100% / 2 - 7px);
		width: 14px;
		height: 33px;
	}
	#plan .financialPolicyBox dl{
		display: block;
	}
	#plan .financialPolicyBox dl dt{
		line-height: 31px;
		margin: 0 0 8px;
		width: 100%;
	}
}

/*  #tgSpirit
/* ------------------------------------------------------------------------ */
#tgSpirit > p{
	text-align: left;
}
#tgSpirit .spiritBox{
	margin-top: 10px;
	text-align: left;
	flex-wrap: wrap;
	align-items: stretch;
}
#tgSpirit .spiritBox > li{
	width: 48%;
	margin-top: 30px;
}
#tgSpirit .spiritBox > li h4,
#tgSpirit .spiritBox > li h5{
	font-size: 1.8rem;
	font-weight: 500;
}
#tgSpirit .spiritBox > li h4{
	color: #014099;
	border-bottom: solid 1px #707070;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
@media screen and (max-width: 600px){
	#tgSpirit .spiritBox{
		display: block;
	}
	#tgSpirit .spiritBox > li{
		width: 100%;
		margin: 20px 0 0;
	}
}