@charset "utf-8";


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



/**************************************************
 common
**************************************************/
main{margin-top: -20px;}


/**************************************************
 about
**************************************************/
#about{padding: 0 20px;}

#about p.intro{
	width: 100%;
	/*font-size: calc(3.5vw);*/
	font-size: calc(3.2vw);
	letter-spacing: 0;
	padding: 30px 0 30px 20px;
}
#about p.intro::before{
	width: 1px;
	height: 0;
	top: 0;
	left: 0;
	background: var(--main-txt-color);
}
#about p.intro span{opacity: 0;}
#about p.intro.active::before{animation: border 0.25s ease-in-out forwards;}

.businessHanger{margin-top: 60px;}
.businessObj{
	width: 80vw;
	height: 80vw;
}

.businessHanger p{
	top: -10%;
	right: 0;
}
.businessHanger p span{padding: 0 15px;}
.businessHanger p span small{font-size: calc(3.5vw);}
.businessHanger p span small:last-of-type{font-size: calc(4.8vw);}
	
.businessHanger::before{
	width: 100%;
	left: 5%;
}
	
.aboutLogo{
	top: 7%;
	left: -5px;
	opacity: 0.10;
}
.aboutLogo img{width: 25vw;}
	
.aboutPhoto{
	margin-top: 100px;
	padding: 0 0 10vw 0;
	height: auto;
}
.photoWrapper{
	position: relative;
	height: 50vw;
}
.photoWrapper:first-of-type{
	top: 0;
	left: 0;
}
.photoWrapper:last-of-type{
	top: 0;
	left: 0;
}
.photoWrapper:nth-of-type(2){margin: 40px 0 0 10%;}
@keyframes photoEffect1{
  	0%{
		width: 0;
	}
	100%{
		width: 90%;
	}
}
.aboutPhoto p{
	position: relative;
	width: 94%;
	font-size: calc(3.0vw);
	/*line-height: 2.3;*/
	top: 0;
	right: auto;
	margin: 40px auto 0 auto;
}
.aboutPhoto p strong{padding: 15px;}
.aboutPhoto p strong span{margin-top: 15px;}
	
.aboutPhoto::before{
	width: 100%;
	height: 85%;
	left: -20px;
	bottom: 0;
}
	
.aboutLogo2{
	bottom: auto;
	top: 65%;
	right: -5px;
	opacity: 0.10;
}
.aboutLogo2 img{width: 25vw;}
	
	
	
/**************************************************
 business
**************************************************/
#business{margin-top: 50px;}

.swipe-section .panel{font-size: 1.7rem;}

.swipe-section .panelInner{
	border-radius: 15px;
	top: 10%;
	left: 5%;
	width: 90%;
	height: 80%;
}
	
.swipe-section .panelInner a{
	padding: 0 20px 20px 20px;
	display: block;
}

.objHanger{
	width: 90%;
	margin: 0 auto;
}

.infoHanger{
	width: 100%;
	height: auto;
	padding: 0;
}
.infoHanger h2{font-size: calc(8.0vw);}
.infoHanger p{
	font-size: 1.4rem;
	line-height: 2.3;
	margin-top: 20px;
	padding-bottom: 40px;
}
.infoHanger span{font-size: 2.2rem;}
	
	
	
/**************************************************
 works news company
**************************************************/
.twoColumn{
	margin-top: 60px;
	padding: 0 20px;
	-webkit-box-pack: justify;
	justify-content: space-between;
}

.twoColumn h2{font-size: calc(8.0vw);}

.more{margin-top: 40px;}
.more a{font-size: 2.0rem;}



/**************************************************
 works
**************************************************/
.worksIndex{width: 85%;}
/*.worksIndex ul li{width: 49%;}
.worksIndex ul li:first-of-type{margin-right: 2%;}*/
.worksIndex ul li{width: 100%;}
.worksIndex ul li:first-of-type{margin-right: 0;}
.worksIndex ul li:last-of-type{margin-top: 30px;}
/*.worksPhoto{height: 25vw;}*/
.worksPhoto{height: 48vw;}
.worksIndex ul li a span{
	padding: 10px 0 5px 0;
	font-size: 1.3rem;
}
.worksIndex ul li a small{
	font-size: 1.2rem;
	margin-right: 3px;
	margin-top: 3px;
}



/**************************************************
 news
**************************************************/
#news{padding-bottom: 20vh;}

.newsIndex{width: 85%;}
.newsIndex ul li{font-size: 1.4rem;}
.newsIndex ul li span{
	display: block;
	width: 100%;
	font-size: 1.8rem;
}
.newsIndex ul li a{
	display: block;
	width: 100%;
}



/**************************************************
 company
**************************************************/
#company{margin-top: 10vh;}

.companyIndex{width: 85%;}
.companyIndex ul{padding-right: 0;}
.companyIndex ul li{
	width: 100%;
	margin-right: 0;
	margin-bottom: 15px;
}
.companyIndex ul li:last-of-type{margin-bottom: 0;}
.companyIndex ul li a span{padding: 20px 15px;}
.companyIndex ul li a span strong{font-size: calc(7.5vw);}
.companyIndex ul li a span small{
	font-size: calc(3.0vw);
	margin-top: 20px;
}
.companyIndex ul li a span small::before{
	top: 0;
	height: 100%;
}

.companyPhoto{padding: 20px 15px;}
.companyIndex ul li a .companyPhoto span{height: 35vw;}
.companyIndex ul li a .companyPhoto span::before{width: 65%;}
	
	
	
}