@charset "utf-8";


/*--------------------
   numbers
----------------------*/
.mainTitle{
 display: block;
 background: url("../images/numbers_mv.jpg") no-repeat left top/cover;
 height: 559px;
 padding-top: 230px;
 padding-bottom: 124px;
}
.mainTitle *{
 color: #fff;
}
.mainTitle h1{
	width: 88.3%;
 max-width: 1240px;
 margin: 0 auto 52px;
 font-size: 48px;
 text-align: center;
}
.mainTitle .en{
 display: block;
	margin-bottom: 30px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.3em;
 text-align: center;
}
.mainTitle p{
 font-size: 16px;
 text-align: center;
 line-height: 1.875;
}
@media screen and (max-width: 768px) {/* SP */
.mainTitle{
 height: auto;
 padding-top: calc(80px + 30vw);
}
.mainTitle h1{
 margin-bottom: 40px;
 font-size: min(8vw,48px);
 text-align: center;
}

}/*-SP only-*/


main section{
 padding-top: 150px;
 padding-bottom: 150px;
}
@media screen and (max-width: 768px) {/* SP */
main section{
 padding-top: 80px;
 padding-bottom: 80px;
}
}/*-SP only-*/
main .inner{
 max-width: 1225px;
}
.h2TitEn .num,
.h2TitEn .en{
 color: var(--blue2);
}


/****/
#people .inner{
 max-width: 1260px;
}
.ttlArea p{
 font-size: 20px;
 font-weight: 700;
}
@media screen and (min-width: 769px) {
 .ttlArea{
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 105px;
 }
 .ttlArea h2{
  width: 48%;
  max-width: 600px;
  margin-bottom: 0;
 }
 .ttlArea p{width: 52%;}
}/*-PC only-*/
#people dl {
 padding-top: 48px;
}
#people dl dt{
 margin-bottom: 10px;
 font-size: 24px;
 font-weight: 700;
 line-height: 1;
}
#people dl dd{
 font-size: 35px;
 font-weight: 700;
 line-height: 1;
}
#people dl dd span{
 font-size: 96px;
}
#people .graph{}
#people .graph .graphimg{
 position: relative;
 line-height: 0;
}
#people .graph .graphimg .pie-chart{
  width: 100%;
 aspect-ratio:1/1;
  }
.bg-ring {
  fill: none;
  stroke: #d9d9d9;
  stroke-width: 10;
}
.data-ring {
  fill: none;
  stroke: #0054b4;
  stroke-width: 10;
  /*stroke-linecap:round;*/
  stroke-dasharray: 282.6;
  stroke-dashoffset: 231.732;      /* 25% 非表示 = 282.6 × (1 - 0.75) */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease;
}

#people .graph li:nth-of-type(2) .data-ring{
  stroke-dashoffset: 223.254; 
}
#people .graph li:nth-of-type(3) .data-ring{
  stroke-dashoffset: 141.3; 
}
#people .graph li:nth-of-type(4) .data-ring{
  stroke-dashoffset: 93.258;
}

#people .graph .graphimg p{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size:min(3vw, 40px);
 font-weight: 900;
 white-space: nowrap;
}
#people .graph .graphimg p span{
 display: inline-block;
 min-width: min(8vw,90px);
 margin-right: 5px;
 font-size:min(6vw, 70px);
 font-weight: 700;
 text-align: center;
}
#people .graph li h3{
 margin-top: 20px;
 text-align: center;
 font-size: 20px;
 font-weight: 900;
 line-height: 1;
}

@media screen and (min-width: 769px) {
 #people dl{
  max-width: 192px;
 }
 #people .graph{
  width: 82.1%;
  max-width: 1034px;
  justify-content: space-between;
 }
 /*#people .graph img{
  width: min(49%,506px);
 }
 #people .graph img + img{
  width: min(48.3%,499px);
 }*/
 #people .graph li{
  width: min(22.8%,235px);
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {/* SP */
 .ttlArea{
  margin-bottom: 40px;
 }
.ttlArea p{
 font-size:18px;
 line-height: 1.5;
}
#people dl {
 padding-top: 40px;
 margin-bottom: 40px;
}
#people dl dt{
 margin-bottom: 10px;
 font-size: 20px;
}
#people dl dd{
 font-size: 30px;
}
#people dl dd span{
 font-size: 80px;
}
 #people .graph {
  justify-content: space-between;
  flex-flow: row wrap;
  gap:30px 0;
 }
 #people .graph li{
  width: 48%;
 }
#people .graph .graphimg p{
 font-size: min(10vw,40px);
}
#people .graph .graphimg p span{
 min-width: inherit;
 margin-right: 5px;
 font-size: min(14vw,70px);
}
#people .graph li h3{
 margin-top: 10px;
 line-height: 1.4;
}

}/*-SP only-*/

/****/
#jobtype .graph{
 justify-content: space-around;
}
#jobtype .graph li{
 background: #B1DEFF;
 width: 46%;
 height: 150px;
 padding: 30px 15px 0 15px;
 color: var(--blue2);
 font-size: 28px;
 font-weight: 900;
 font-family: "Poppins", sans-serif;
 line-height: 1;
 text-align: center;
}
#jobtype .graph li:nth-of-type(2){
 background: #D8EEFF;
	 width: 16%;
}
#jobtype .graph li:nth-of-type(3){
	 width: 12%;
}
#jobtype .graph .other{
 background: #F4F4F4;
 width: 26%;
}
#jobtype .graph li h3{
 margin-bottom: 15px;
 color: var(--Dblue);
 font-size: 20px;
 font-family: 'Noto Sans JP', sans-serif;
 text-align: center;
}
#jobtype .graph li span{
 display: inline-block;
 margin-right: 0.1em;
 font-size: min(4.2vw,46px);
 font-weight: 700;
}


@media screen and (max-width: 768px) {/* SP #jobtype*/
	#jobtype .graph{
		flex-direction: column;
	}	
#jobtype .graph li{
 height: auto;
 min-height: auto;
 padding:10px 10px 5px;
 font-size:min(4vw, 30px);
	background: none !important;
	position: relative;
	width: 100% !important;
 text-align: left;
}
	#jobtype .graph li::before{
		position: absolute;
		left:0;
		top:0;
		height: 100%;
		display: block;
		content: '';
		z-index: -1
	}
	#jobtype .graph li:nth-of-type(1):before{
		width: 46%;
		background: #B1DEFF;
		
	}
	#jobtype .graph li:nth-of-type(2):before{
 background: #D8EEFF;
	 width: 16%;
}
#jobtype .graph li:nth-of-type(3):before{
	 width: 12%;
	background: #B1DEFF;
}
#jobtype .graph .other:before{
 background: #F4F4F4;
 width: 26%;
}/*
	
#jobtype .graph .other{
 padding: 20px 0 15px 2%;
}*/
#jobtype .graph li h3{
 margin-bottom: 10px;
 font-size:min(4.2vw, 18px);
	display: inline-block;
	margin-right: .5em
}
#jobtype .graph li span{
 margin-right: .1em;
 font-size: min(8vw,69.3px);
}

}/*-SP only-*/

/****/
#environment{
 background: #F4F4F4;
}
#environment h2{
 margin-bottom: 75px;
}
#environment ul{}
#environment ul li{
 background: #fff;
 border-radius: 10px;
 padding: 35px 20px 40px 24px;
}
#environment ul li h3{
 display: inline-block;
	border-radius: calc(infinity * 1px);
 background: #D8EEFF;
 margin-bottom: 28px;
 padding: 9px 14px 11px;
 color: var(--blue2);
 font-size: 15px;
 line-height: 1;
}
#environment ul li p{
 font-size: 14px;
 font-weight: 700;
}
#environment ul li p.num{
 margin-bottom: 15px;
 color: var(--blue2);
 font-size: 35.6px;
 line-height: 1;
}
#environment ul li .num span{
 font-size: 83.1px;
 font-family: "Poppins", sans-serif;
}
#environment ul li .num span.note{
	 font-size:14px;
}

@media screen and (min-width: 769px) {
 #environment ul{
  gap:30px 0;
 }
 #environment ul li{
  width: 48%;
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {/* SP #environment*/
#environment h2{
 margin-bottom: 40px;
}

 #environment ul li + li{
  margin-top: 20px;
 }
}/*-SP only-*/

/****/
#growth h2{
 margin-bottom: 80px;
}

@media screen and (min-width: 769px) {
 .qualification{
  width: 40%;
 }
 .career{
  width: 54%;
  padding-right:10%/* 131px*/;
 }
}/*-PC only-*/

.qualification{
 border-radius: 10px;
 padding: 55px 0 55px 30px;
}
.qualification *{
 color: #fff;
}
.qualification h3{
 margin-bottom: 25px;
 font-size: 32px;
}
.qualification ul li{
 display: flex;
 flex-flow: row wrap;
 font-size: 20px;
 line-height: 1.6;
}
.qualification ul li > span{
 position: relative;
 width: 144px;
}
.qualification ul li > span::after{
 content: "：";
 position: absolute;
 right: 0;
 top: 0;
}
.qualification ul li .note{
 display: block;
 padding-left: 1em;
	font-size: 12px;
}
.qualification ul li p{
 width: calc(100% - 144px);
 padding-left: 1em;
 font-size: 20px;
 text-indent: 0;
 line-height: 1.6;
}
.qualification h4{
 margin-top: 20px;
 margin-bottom: 20px;
 color: #97E8FF;
 font-weight: 900;
}
.qualification >p{
 font-size: 20px;
 font-weight: 900;
 line-height: 1;
}
.qualification .num{
 display: block;
 margin-bottom: 20px;
 font-size: 26px;
 font-weight: 800;
 line-height: 1;
}
.qualification .num span{
 display: inline-block;
 margin-right: 7px;
 font-size: 69.3px;
 font-weight: 700;
 font-family: "Poppins", sans-serif;
 vertical-align:-0.05em;
}
.career{
 padding-top: 28px;
}
.career h3{
 margin-bottom: 40px;
 font-size: 28px;
}
.career dl{
 position: relative;
 padding: 30px 0 0 47px;
}
.career dl::before{
 content: "";
 display: block;
 background: #ACACAC;
 width: 1px;
 height: 100%;
 position: absolute;
 top: 0;
 left: 8px;
}
.career dl dt{
 position: relative;
 margin-bottom: 30px;
 font-size: 24px;
 font-weight: 700;
 line-height: 1;
}
.career dl dt::before{
 content: "";
 display: block;
 border-radius: 50%;
 background: var(--blue);
 width: 20px;
 height: 20px;
 position: absolute;
 left: -48px;
 top: 2px;
}
.career dl dd{
 font-weight: 700;
}
.career dl dd + dt{
 margin-top: 40px;
}
.career dl dd + dt::before{
 background: #fff;
 border: 6px var(--blue) solid;
 left: -54px;
 top: -2px;
}

.career p{
 background: #EFEFEF;
 margin-top: 40px;
 padding: 15px 20px;
 font-weight: 700;
 line-height: 1.3;
}

@media screen and (max-width: 768px) {/* SP #growth*/
#growth h2{
 margin-bottom: 40px;
}
.qualification{
 padding: 40px 5% 40px;
}
.qualification h3{
 margin-bottom: 30px;
 font-size: 28px;
}
.qualification ul li{
 font-size: 17px;
}
 .qualification ul li > span{
  width: 120px;
 }
.qualification ul li p{
 width: calc(100% - 120px);
 font-size: 17px;
}
.qualification h4{
 margin-top: 50px;
 margin-bottom: 20px;
}
.qualification >p{
 font-size: 18px;
}
.qualification .num{
 margin-bottom: 20px;
 font-size: 22px;
}
.qualification .num span{
 margin-right: 7px;
 font-size: 55px;
}
 
.career{
 padding-top: 50px;
}
.career h3{
 margin-bottom: 30px;
 font-size: 24px;
}
.career p{
 margin-top: 30px;
 padding: 10px 20px;
 line-height: 1.4;
}
}/*-SP only-*/

/****/
#welfare{
 background: #EAF6FB;
 padding-top: 110px;
 padding-bottom: 120px;
}
#welfare h2{
 margin-bottom: 80px;
}
@media screen and (min-width: 769px) {
 #welfare .pcFlex dl{
  width: 33%;
 }
 #welfare .pcFlex > div{
  width: 53.5%;
  max-width: 632px;
 }
}/*-PC only-*/

#welfare dl{
 padding-top: 50px;
}
#welfare dl dt{
 margin-bottom: 25px;
 font-size: 20px;
 font-weight: 900;
 line-height: 1;
}
#welfare dl dd{
 font-size: 35px;
 font-weight: 800;
 line-height: 1;
}
#welfare dl dd >span{
 color: var(--blue2);
 font-size: 93px;
 font-weight: 700;
}
#welfare dl dd ul{
 margin-top: 65px;
}
#welfare dl dd li{
 background: url("../images/ic_check.svg") no-repeat left top/31px auto;
 padding: 0 0 0 52px;
 margin-bottom: 30px;
 font-size: 26px;
 font-weight: 700;
 line-height: 1.1;
}

 #welfare .pcFlex > div{
  padding: 46px 51px 45px;
 }
#welfare h3{
 margin-bottom: 35px;
 color: var(--Dblue);
 font-size: 28px;
}
#welfare .bgW ul li{
 display: flex;
 align-items: center;
 gap:0 7px;
 background: #F3F3F3;
 padding: 23px 10px 24px 42px;
}
#welfare .bgW ul li + li{
 margin-top: 18px;
}
#welfare .bgW li >span{
 width: 140px;
 font-size:24px;
 font-weight: 700;
}
#welfare .bgW li p{
 font-weight: 700;
 line-height: 1.625;
}
#welfare .note{
 text-align: right;
 font-size: 12px;
 margin-top: 10px;
}

@media screen and (max-width: 768px) {/* SP #welfare*/
#welfare{
 padding-top: 80px;
 padding-bottom: 80px;
}
#welfare h2{
 margin-bottom: 40px;
}
#welfare dl{
 padding-top: 0px;
 padding-bottom: 50px;
}
#welfare dl dt{
 margin-bottom: 25px;
 font-size: 20px;
}
#welfare dl dd{
 font-size: 30px;
}
#welfare dl dd >span{
 font-size: 80px;
}
#welfare dl dd ul{
 margin-top: 50px;
}
#welfare dl dd li{
 background: url("../images/ic_check.svg") no-repeat left top/28px auto;
 padding: 0 0 0 45px;
 margin-bottom: 30px;
 font-size: 22px;
}

 
 #welfare .pcFlex > div{
  padding: 30px 5% 20px;
 }
#welfare h3{
 margin-bottom: 30px;
 font-size: 26px;
}
#welfare .bgW ul li{
 padding: 20px 10px 20px 4vw;
}
#welfare .bgW ul li + li{
 margin-top: 15px;
}
#welfare .bgW li >span{
 width: 100px;
 font-size:18px;
}

}/*-SP only-*/


/****/
#location{
 padding-top: 135px;
}
#location h2{
 margin-bottom: 80px;
}
@media screen and (min-width: 769px) {
 #location .pcFlex > div{
  width: 50%;
 }
}/*-PC only-*/

#location .access{
 padding: 93px 20px 100px 81px;
}
#location .access *{
 color: #fff;
}
#location .access p:first-of-type{
 margin-bottom: 60px;
 font-size: 32px;
 line-height: 1.625;
}
#location .access h3{
 margin-top: 35px;
 margin-bottom: 10px;
 color: #97E8FF;
}
#location .access p{
 font-size: 20px;
 font-weight: 700;
}
#location .graph{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#location .graph h3{
 margin-bottom: 47px;
 width: 100%;
 max-width: 373px;
 font-size: 28px;
}
#location .graph ul{
 width: 100%;
 gap:0 8px;
 align-items: flex-end;
 justify-content: center;
}
#location .graph ul li{
 width: min(26%,119px);
}
#location .graph ul li p{
 text-align: center;
 font-size: 26px;
 font-weight: 700;
}
#location .graph ul li .en{
 color: #fff;
 font-weight: 800;
 line-height: 1;
}
#location .graph ul li .en span{
 font-size: 40px;
 font-weight: 700;
}
#location .graph ul li.shiga .en{
 background: var(--blue2);
 height: 207px;
 padding-top: 146px;
}
#location .graph ul li.kyoto .en{
 background: #1AAFD8;
 height: 142px;
 padding-top: 80px;
}
#location .graph ul .other .en{
 background: #CECECE;
 height: 95px;
 padding-top: 33px;
}

@media screen and (max-width: 768px) {/* SP loccation */
#location{
 padding-top: 80px;
}
#location h2{
 margin-bottom: 40px;
}
#location .access{
 padding: 40px 5% 50px;
}
#location .access *{
 color: #fff;
}
#location .access p:first-of-type{
 margin-bottom: 40px;
 font-size: min(6.5vw,32px);
}
#location .access h3{
 margin-top: 35px;
}
#location .access p{
 font-size: 18px;
}
 #location .graph{
  padding: 40px 0;
 }
#location .graph h3{
 width: 83%;
 margin: 0 auto 30px;
 font-size: 26px;
}
#location .graph ul li p{
 font-size: 24px;
}
#location .graph ul li .en span{
 font-size: min(8vw,40px);
}
}/*-SP only-*/






@media screen and (min-width: 769px) {

}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP */

}/*-SP only-*/

/* 数字カード：中央揃え＋説明文の幅を絞って全幅流し込みを防ぐ */
#environment ul li{
 text-align: center;
}
#environment ul li p:not(.num){
 max-width: 23em;
 margin-left: auto;
 margin-right: auto;
}
#environment ul li p{
 text-align: center;
}