@charset "utf-8";

/* index.css
------------------------------------------ */
/* HEADER
------------------------------------------ */




/* TITLE
------------------------------------------ */
#TITLE{width:auto;margin:0 auto;background-color:#f0efef;}
#TITLE .divA{width:1200px;margin:0 auto 0 auto;}


/* VISUAL */
#TITLE #VISUAL li{position:relative;font-size:0;line-height:0;zoom:1;}
#TITLE #VISUAL li p.link{position:absolute;font-size:0;line-height:0;right:125px;bottom:0px;z-index:3;zoom:1;}



/* BODY
------------------------------------------ */
body {
	background: #f6f6f6;
}
#TOP .main {
	height: 600px;
	position: relative;
}
#TOP .main::before {
    width: 100%;
    height: 100%;
    background-image: url(/common/img/top-main-box.png);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    transform-origin: right;
	z-index: 1;
}
#TOP .main .box-main {
	position: absolute;
    z-index: 2;
    border: none;
    font-size: 38px;
    left: 2em;
    top: 100px;
}
#TOP .main .box-main h1{
    border: none;
    font-size: 38px;
	font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    font-style: normal;
	color: #014099;
}
.non-border::after{
    content: none;
}
#TOP .main .box-main p{
    font-size: 20px;
	font-weight: bold;
}
/*#TOP #main::after{
  position: absolute;
  content: '';
  left:0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  transform: skewY(-5deg);
  transform-origin: bottom left;
}*/
#TOP .main .slider {
	position: relative;
	overflow: hidden;
	background: #fff;
	height: 100%;
}

#TOP .main .slider .slide01{
	content: '';
	width: 100px;
	background: url(/common/img/slide-1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
	outline: none;
	height: 600px;
}
#TOP .main .slider .slide02{
	content: '';
	width: 100px;
	background: url(/common/img/slide-2.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
	outline: none;
	height: 600px;
}
#TOP .main .slider .slide03{
	content: '';
	width: 100px;
	background: url(/common/img/slide-3.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
	outline: none;
	height: 600px;
}
#TOP .main .slider .slide04{
	content: '';
	width: 100px;
	background: url(/common/img/slide-4.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
	outline: none;
	height: 600px;
}
#TOP .main .slider .slide05{
	content: '';
	width: 100px;
	background: url(/common/img/slide-5.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
	outline: none;
	height: 600px;
}
#TOP .main .icon {
	position: absolute;
	top: 130px;
    right: 15vw;
	width: 365px;
}
#TOP .main .slider .slide-inner{
	width: 100%;
	margin: 0 auto;
	position: absolute;
    bottom: 0;
    right: 0;
}
#TOP .main .slider .slide-inner h2 {
	font-size: 100px;
	font-family: brandon-grotesque, sans-serif;
	font-weight: 500;
	font-style: normal; 
	color: #fff;
	margin-top: 3em;
	text-align: right;
	opacity: 0.8;
}

#TOP #Sustainability {
	position: relative;
  	z-index: 2;
}

#TOP #Business .img-flex{
	justify-content: center;
}
#TOP #Business p{
	position: relative;
}
#TOP #Business .cap{
	font-size: 20px;
	position: absolute;
	color: #fff;
	font-weight: bold;
	top: 50%;
    right: 0;
    left: 0;
}
#TOP .img-flex .buisiness{
	width: 33%;
}
#TOP::after {
	content: "";
	width: 100%;
	height: 1600px;
	background: url(/common/img/bg-bus.png) no-repeat;
    background-size: cover;
	    position: absolute;
    top: 900px;
	z-index: -1;
}

@media (max-width: 1250px) {
	#TOP .main {
	height: 500px;
}
	#TOP .main .slider .slide01,#TOP .main .slider .slide02,#TOP .main .slider .slide03{height: 500px;}
	#TOP .main .slider .slide-inner h2 {font-size: 50px}
	#TOP .main .box-main {
    top: 50px;
}#TOP .img-flex p{
	width: 19%;
}#TOP .img-flex .buisiness{
	width: 33%;
}
}
@media (max-width: 786px) {
#TOP .main::before {
    content: none;
}
	
	#TOP .main .box-main {
	padding: 0.5em;
    position: absolute;
    z-index: 2;
    border: none;
    left: 0;
    top: 30px;
}#TOP .main .box-main h1{
    font-size: 0.8em;
}	#TOP .img-flex p{
	width: 48%;
}
	#TOP .img-flex .buisiness {
    width: 100%;
}