@charset "utf-8";



/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 690px){
	

	
/**************************************************
 visualHanger
**************************************************/
#visualHanger{
	height: 70vh;
	min-height: auto;
}
#visualHanger::before{
	/*width: 35vw;
	height: 35vw;*/
	min-width: auto;
	min-height: auto;
}

.visualCopy{
	font-size: calc(6.3vw);
	letter-spacing: 2px;
	height: 52%;
	padding-left: 30px;
}



/**************************************************
 main
**************************************************/
article h2{position: relative;}

article h2.common{
	height: 60px;
	font-size: 2.2rem;
	letter-spacing: 2px;
	padding: 0 20px;
}
article h2.common::before{
	width: 60px;
	height: 60px;
}
article h2 span{
	position: relative;
	z-index: 1;
}

article h3{
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.3;
	padding-left: 20px;
	margin-top: 50px;
	border-left: 5px solid #002870;
}

article p{
	font-size: 1.4rem;
	padding-top: 20px;
}

article table{margin-top: 10px;}
article table th{
	font-size: 1.4rem;
	border-bottom: 1px solid #000000;
}
article table td{
	font-size: 1.4rem;
	padding: 10px 0 10px 15px;
	border-bottom: 1px solid #000000;
}

.spacer{height: 40vh;}
.spacer img{display: none;}
.spacer:first-of-type{
	background: url("../img/bg1.jpg") no-repeat left 32% center;
	background-size: cover;
	background-attachment: scroll;
}
.spacer:last-of-type{
	background: url("../img/bg2.jpg") no-repeat right 24% center;
	background-size: cover;
	background-attachment: scroll;
}

.btn{
	width: 70%;
	margin: 35px auto 0 auto;
}



/**************************************************
 philosophy
**************************************************/
#philosophy{padding: 50px 20px 40px 20px;}
#philosophy::before{
	width: 80vw;
	height: 70vw;
	left: 25%;
	top: -20vw;
}

#philosophy h2{
	font-size: 2.5rem;
	letter-spacing: 2px;
	padding-bottom: 40px;
}
#philosophy h2::before{
	width: 40px;
	height: 4px;
	left: calc(50% - 20px);
}

#philosophy p{
	font-size: 2.2rem;
	letter-spacing: 2px;
	padding-top: 20px;
}



/**************************************************
 greeting
**************************************************/
#greeting section{
	width: 100%;
	max-width: 100%;
	padding: 40px 20px;
}

#greeting h2{
	width: 100%;
	font-size: 2.2rem;
	text-align: center;
}

#greeting p{
	width: 100%;
	margin-top: 25px;
	padding: 20px 0 0 0;
	border: none;
	border-top: 1px solid #002870;
}
#greeting p span{
	padding-top: 10px;
	font-size: 1.8rem;
}
#greeting p span small{font-size: 1.3rem;}



/**************************************************
 business & company
**************************************************/
.twoColumn{
	width: 100%;
	max-width: 100%;
	padding: 40px 20px;
}

#business,
#company{width: 100%;}
#company{margin: 50px 0 0 0;}

#business dl{margin-top: 20px;}
#business dl dt{font-size: 1.8rem;}
#business dl dd{
	padding-top: 0;
	font-size: 1.4rem;
}
#business dl dd span{
	width: 30%;
	margin-top: 10px;
}
#business dl dd span:nth-of-type(3n+2){margin: 10px 5% 0 5%;}

#company table th{
	width: auto;
	white-space: nowrap;
}



/**************************************************
 works
**************************************************/
#works{
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	/*padding: 40px 20px;*/
	padding: 20px 20px 40px 20px;
}
#works dl{
	width: 100%;
	margin-top: 30px;
}
#works dl:nth-of-type(3n+2){margin: 30px 0 0 0;}
#works dl dt{
	font-size: 1.6rem;
	padding-bottom: 10px;
}
#works dl dt img{
	margin-bottom: 15px;
}
#works dl dd{
	font-size: 1.4rem;
	padding-top: 12px;
}
#works dl dd span:first-of-type{padding-left: 57px;}
#works dl dd span:last-of-type{padding-left: 43px;}



/**************************************************
 sdgs
**************************************************/
#sdgs section{
	width: 100%;
	max-width: 100%;
	padding: 40px 20px;
}

.iconHanger{margin-top: 30px;}
.iconHanger img{
	width: 21%;
	margin: 0 2%;
}

.goals{margin-top: 30px;}
.goals img{width: 96%;}

#sdgs p{
	padding-top: 30px;
	font-size: 1.8rem;
}

.report{margin-top: 30px;}
.report img{width: 100%;}



/**************************************************
 recruit
**************************************************/
#recruit{
	width: 100%;
	max-width: 100%;
	padding: 40px 20px;
}
	
#recruit table th{white-space: nowrap;}
	
	
	
/**************************************************
 bannerHanger
**************************************************/
.bannerHanger{padding: 30px 20px;}
.bannerHanger img{width: 250px;}
	
	
	
}