@charset "utf-8";

#main_visual {
	position:relative;
    background-color: aliceblue;
    width: 100%;
    height: auto;
}
#main_visual::after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.4);
	z-index:10;
}
#main_visual .pic_pc {
	display:block;
}
#main_visual .pic_sp {
	display:none;
}

#top_text {
	position:absolute;	
	top:50%;
	left:0%;
	width:100%;
	transform:translateY(-50%);
	z-index:20;
}
#top_text p {
	text-align:center;
	font-size:3.8rem;
	line-height:3.9rem;
	text-shadow:0 0 8px #fff;
}
#top_text p span {
	font-weight:bold;
	animation:blight .8s ease infinite;
}
#top_text p span:last-child small {
	font-size:0.8rem;
}
#top_text p span:last-child {
	position:relative;
	animation-delay:.3s;
}
#top_text p span:last-child::after {
	content:"世界";
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	font-size:1.0rem;
	line-height:1.0rem;
}

@keyframes blight {
	0% {
		text-shadow:0 0 8px #fff;
	}
	20% {
		text-shadow:0 0 16px #fff;
	}
	40% {
		text-shadow:0 0 4px #fff;
	}
	60% {
		text-shadow:0 0 10px #fff;
	}
	80% {
		text-shadow:0 0 14px #fff;
	}
	100% {
		text-shadow:0 0 8px #fff;
	}
}

#main .box {
    position: relative;
    width: 100%;
    height: 520px;
    background-color: #000;
}
#main .box:hover {
	text-shadow:0 0 5px #fff;
}

#main .box:nth-of-type(1)::after, #main .box:nth-of-type(2)::after, #main .box:nth-of-type(3)::after {
	content: "";
	position: absolute;
	top: 0%;
	width: 70%; 
	height: 100%;
	background-size:cover;
	background-repeat:no-repeat;
	opacity: 0;
	z-index: 100;
	transition:all .4s ease;
}
#main .box:nth-of-type(1)::after {
    right: 0%;      
    clip-path: polygon(57% 100%, 0% 0%, 100% 0%, 100% 100%);
	background-image:url(../img/design.jpg);
	background-position:center center;
	transform: translate(50%, 50%);
}
#main .box:nth-of-type(2)::after {    
    left: 0%;
    clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 43% 100%);
	background-image:url(../img/programming.jpg);
	background-position:left center;
	transform: translate(-50%, 50%);
}
#main .box:nth-of-type(3)::after {
    right: 0%;
    clip-path: polygon(57% 100%, 0% 0%, 100% 0%, 100% 100%);
	background-image:url(../img/marketing.jpg);
	background-position:center center;
	transform: translate(50%, 50%);
}
#main .box.js-fade:nth-of-type(1)::after, #main .box.js-fade:nth-of-type(2)::after, #main .box.js-fade:nth-of-type(3)::after {
	transform: translate(0);
	opacity: 1;
}

#main .box p {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	align-content:center;
	height:100%;
	font-size:calc(100vw * 55 / 1200);
	color:#fff;
	padding: 0 calc(100vw * 60 / 1200);
	line-height:calc(100vw * 55 / 1200);
}
#main .box p span {
	width:100%;
	font-size:calc(100vw * 25 / 1200);
}
#main .box:nth-of-type(2) p { 
	justify-content:right;
}
#main .box:nth-of-type(2) p span { 
	text-align:right;
}

#work {
	padding:0 20px;	
}
#work h2 {
	text-align:center;
	font-size:1.3rem;
	line-height: 1.3rem;
	margin: 50px 0 30px;
	color:#fff;
	text-shadow:none;
}

#portfolio {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.folio_box {
	position:relative;
	width:calc(100%/3);
	height:auto;
}
.folio_box a>div {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	width:100%;
	height:100%;
	background-color:rgba(55,55,55,.8);
	opacity:0;
	transition:all .3s ease;
	color:#fff;
}
.folio_box a>div:hover {
	opacity:1;
}

#and_more p {
	font-size:22px;
	line-height:50px;
	text-align:right;
}
#and_more p a {
	color:#fff;	
}
#and_more p a:hover {
	color:#333;	
}


@media screen and (max-width:720px) {
	#top_text p {
		font-size:2.7rem;
		line-height:3.8rem;
	}
	#top_text p span:last-child::after {
		bottom:-6px;
	}
	
	#main_visual .pic_pc {
		display:none;
	}
	#main_visual .pic_sp {
		display:block;
	}
	
	.folio_box {
		width:calc(100%/2);
	}
}


@media screen and (min-width:1200px) {
	#main .box p {
		font-size:55px;
		padding: 0 60px;
		line-height:55px;
	}
	#main .box p span {
		width:100%;
		font-size:25px;
	}
}