@charset "utf-8";



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){
	.pageTtlBox .jpTtlTxt{
		transform:translateX(-0.8vw);
	}
	/* ============================================ */
	.leadTxt{
		font-size:3.5vw;
		line-height:1.5;
	}
	/* ============================================ */
	.groupLinksBox{
		display:flex;
		margin-top:8%;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
	}
	.groupLinksBox > li:nth-child(1){
		/*width:calc(100% / 3);*/
		width:25%;
		/*background-color:#fcc;*/
	}
	.groupLinksBox > li:nth-child(2){
		width:37%;
		/*background-color:#cfc;*/
	}
	.groupLinksBox > li:nth-child(3){
		width:38%;
		/*background-color:#ccf;*/
	}
	.groupLinksBox > li > a{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		padding:15px 0;
		color:#333;
		transition:all 0.3s ease-in-out;
	}
	.groupLinksBox > li > a p{
		position:relative;
		padding-right:1.2em;
		font-size:3.5vw;
	}
	.groupLinksBox > li > a p::before{
		content:"→";
		display:flex;
		justify-content:center;
		align-items:center;
		width:3vw;
		height:3vw;
		font-size:2.2vw;
		color:#333;
		border:0.5px solid #333;
		position:absolute;
		right:-0.2vw;
		top:50%;
		opacity:1;
		transform:translateY(-45%);
		transition:all 0.3s ease-in-out;
	}

/* ============================================ */
	.block.second .dataBox{
		display:flex;
		flex-wrap:wrap;
		margin-top:4%;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items{
		display:flex;
		width:49%;
		min-height:35vw;
		margin-top:2%;
		margin-right:2%;
		padding:3%;
		border:1px solid #333;
	}
	.block.second .dataBox .items:nth-child(-n+2){
		margin-top:0;
	}
	.block.second .dataBox .items:nth-child(even){
		margin-right:0;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items h4{
		display:flex;
		align-items:start;
		justify-content:center;
		width:5.5vw;
		max-width:60px;
		font-weight:600;
		font-size:4vw;
		/*font-style:italic;*/
		writing-mode:vertical-lr;
		letter-spacing:1px;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items .dtlBox{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items .dtlBox .innerBox p{
		font-size:8vw;
		font-weight:600;
		line-height:1;
		font-style:italic;
	}
	.block.second .dataBox .items .dtlBox .innerBox p span{
		display:inline-block;
		position:relative;
		top:0px;
		font-weight:300;
	}
	.block.second .dataBox .items .dtlBox .innerBox p .minChara{
		padding-right:0.2em;
		font-size:4vw;
	}
	.block.second .dataBox .items .dtlBox .innerBox p .unit{
		padding-left:0.2em;
		font-size:3.6vw
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.employees .dtlBox .innerBox p{
		text-align:center;
	}
	.block.second .dataBox .items.employees .dtlBox .innerBox p.notes{
		font-size:3.6vw;
		font-weight:400;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.job .dtlBox .innerBox p{
		text-align:right;
		margin-top:2%;
	}
	.block.second .dataBox .items.job .dtlBox .innerBox p:first-child{
		margin-top:0;
	}
	.block.second .dataBox .items.job .dtlBox .innerBox p .minChara{
		font-size:3.4vw;
		letter-spacing:-0.5px;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox{
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox p .unit{
		top:0;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox p .minChara{
		font-size:clamp(0.8rem, 1.4vw, 1.25rem);
		padding-right:0.4em;
		top:-1px;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		margin-top:3%;
		width:26vw;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p{
		width:50%;
		font-size:6vw;
		padding:0.2em;
		text-align:center;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p .minChara{
		display:block;
		font-size:3.5vw;
		font-weight:300;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p .unit{
		font-size:4vw;
	}
	/* ============================================ */
	.block.third .employeeBenefitsBox{
		display:flex;
		flex-wrap:wrap;
		margin-top:4%;
	}
	.block.third .employeeBenefitsBox .items{
		display:flex;
		flex-direction:column;
		width:50%;
		padding:3.5%;
		border-right:1px solid #333;
		border-bottom:1px solid #333;
		position:relative;
	}
	.block.third .employeeBenefitsBox .items:nth-child(2n){
		border-right:0;
	}
	.block.third .employeeBenefitsBox .items:nth-last-child(1){
		border-bottom:0;
	}
	.block.third .employeeBenefitsBox .items .ttlTxt{
		font-size:4.0vw;
		font-weight:500;
		line-height:1.2;
		position:relative;
		z-index:2;
	}
	.block.third .employeeBenefitsBox .items .descTxt{
		margin-top:2%;
		font-size:3.5vw;
		line-height:1.3;
		position:relative;
		z-index:2;
	}
	.block.third .employeeBenefitsBox .items .iconBox{
		position:absolute;
		top:50%;
		right:0;
		transform: translateY(-50%);
		position:absolute;
		z-index:1;
	}
	.block.third .employeeBenefitsBox .items .iconBox span{
		color:#f5f5f5;
		font-size:clamp(6rem, 8vw, 8rem);
	}


	/* ============================================ */
	.block.fourth .employeeMeetingBox{
		margin-top:4%;
	}
	.block.fourth .employeeMeetingBox .descTxt{
		font-size:3.5vw;
		line-height:1.5;
	}
	.block.fourth .employeeMeetingBox .imgBox{
		margin-top:20px;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	.pageTtlBox .jpTtlTxt{
		transform:translateX(-10px);
	}
	/* ============================================ */
	.leadTxt{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.5;
	}
	/* ============================================ */
	.groupLinksBox{
		display:flex;
		margin-top:50px;
		border-top:0.5px solid #333;
		border-bottom:0.5px solid #333;
	}
	.groupLinksBox > li{
		width:calc(100% / 3);
	}
	.groupLinksBox > li > a{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		padding:15px 0;
		color:#333;
		transition:all 0.3s ease-in-out;
	}
	.groupLinksBox > li > a p{
		position:relative;
		padding-right:0.5em;
		font-size:clamp(1.1rem, 2vw, 1.7rem);
	}
	.groupLinksBox > li > a p::before{
		content:"→";
		display:flex;
		justify-content:center;
		align-items:center;
		width:2vw;
		height:2vw;
		max-width:30px;
		max-height:30px;
		font-size:clamp(0.2rem, 1vw, 1rem);
		color:#333;
		border:1px solid #333;
		position:absolute;
		right:-1.5vw;
		top:50%;
		opacity:1;
		transform:translateY(-45%);
		transition:all 0.3s ease-in-out;
	}
	.groupLinksBox > li > a:hover{
		opacity:0.6;
	}
	.groupLinksBox > li > a:hover p::before{
		right:-1.9vw;
	}

	/* ============================================ */
	.block.second .dataBox{
		display:flex;
		flex-wrap:wrap;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items{
		display:flex;
		width:31%;
		min-height:17vw;
		margin-top:35px;
		margin-right:3.5%;
		padding:20px;
		border:1px solid #333;
	}
	.block.second .dataBox .items:nth-child(3n){
		margin-right:0;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items h4{
		display:flex;
		align-items:start;
		justify-content:center;
		width:3.6vw;
		max-width:60px;
		font-weight:500;
		font-size:clamp(1.0rem, 1.8vw, 1.5rem);
		font-style:italic;
		writing-mode:vertical-lr;
		letter-spacing:2px;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items .dtlBox{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items .dtlBox .innerBox p{
		font-size:clamp(1.9rem, 3.9vw, 3.4rem);
		font-weight:600;
		line-height:1;
		/*font-style:italic;*/
	}
	.block.second .dataBox .items .dtlBox .innerBox p span{
		display:inline-block;
		position:relative;
		top:-3px;
		font-weight:300;
	}
	.block.second .dataBox .items .dtlBox .innerBox p .minChara{
		padding-right:0.2em;
		font-size:clamp(0.8rem, 2.2vw, 1.8rem);
	}
	.block.second .dataBox .items .dtlBox .innerBox p .unit{
		padding-left:0.2em;
		font-size:clamp(0.7rem, 2.2vw, 1.8rem);
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.employees .dtlBox .innerBox p{
		text-align:center;
	}
	.block.second .dataBox .items.employees .dtlBox .innerBox p.notes{
		font-size:clamp(0.7rem, 1.8vw, 1.3rem);
		font-weight:400;
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.job .dtlBox{}
	.block.second .dataBox .items.job .dtlBox .innerBox p{
		text-align:right;
		margin-top:7px;
	}
	.block.second .dataBox .items.job .dtlBox .innerBox p:first-child{
		margin-top:0;
	}
	.block.second .dataBox .items.job .dtlBox .innerBox p .minChara{
		font-size:clamp(0.7rem, 1.8vw, 1.3rem);
	}
	/* ------------------------------------ */
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox{
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox p .unit{
		top:-2px;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .topBox p .minChara{
		font-size:clamp(0.8rem, 1.4vw, 1.25rem);
		padding-right:0.4em;
		top:-2px;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		width:15vw;
		max-width:210px;
		margin-top:15px;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p{
		width:50%;
		font-size:clamp(1.0rem, 2.3vw, 1.7rem);
		padding:0.2em;
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p:nth-child(odd){
		/*text-align:right;
		padding-right:0.6em;*/
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p .unit{
		font-size:clamp(0.5rem, 1.2vw, 1.1rem);
	}
	.block.second .dataBox .items.age .dtlBox .innerBox .btmBox p .minChara{
		font-size:clamp(0.5rem, 1.1vw, 1.0rem);
		width:3em;
		padding-right:0;
	}

	/* ============================================ */
	.block.third .employeeBenefitsBox{
		display:flex;
		flex-wrap:wrap;
		margin-top:35px;
	}
	.block.third .employeeBenefitsBox .items{
		display:flex;
		flex-direction:column;
		width:calc(100% / 3);
		padding:35px 30px;
		border-right:1px solid #333;
		border-bottom:1px solid #333;
		position:relative;
	}
	.block.third .employeeBenefitsBox .items:nth-child(3n){
		border-right:0;
	}
	.block.third .employeeBenefitsBox .items:nth-last-child(-n+3){
		border-bottom:0;
	}
	.block.third .employeeBenefitsBox .items .ttlTxt{
		font-size:clamp(1.2rem, 1.5vw, 1.5rem);
		font-weight:500;
		line-height:1.2;
		position:relative;
		z-index:2;
	}
	.block.third .employeeBenefitsBox .items .descTxt{
		margin-top:10px;
		font-size:clamp(1.0rem, 1.3vw, 1.3rem);
		line-height:1.3;
		position:relative;
		z-index:2;
	}
	.block.third .employeeBenefitsBox .items .iconBox{
		position:absolute;
		top:50%;
		right:30px;
		transform: translateY(-50%);
		z-index:1;
	}
	.block.third .employeeBenefitsBox .items .iconBox span{
		color:#f5f5f5;
		font-size:clamp(6rem, 8vw, 8rem);
	}

	.block.third .employeeBenefitsBox .items.ojt .iconBox{
		transform: translateY(-55%);
	}
	.block.third .employeeBenefitsBox .items.ojt .iconBox span{
		font-size:clamp(6rem, 13vw, 13rem);
	}

	/* ============================================ */
	.block.fourth .employeeMeetingBox{
		margin-top:35px;
	}
	.block.fourth .employeeMeetingBox .descTxt{
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
		line-height:1.5;
	}
	.block.fourth .employeeMeetingBox .imgBox{
		margin-top:20px;
	}
}