@charset "utf-8";

#mv {
    position: relative;
}

#mv .slick-list {
    width: 100%;
}

.mv_slider li {
	background-size: cover;
	background-position: center;
	background-color: #000;
	height: 100%;
}

.mv_slider li img {
    width: 100%;
}

.mv_slider li img.sp-bl {
    display: none;
}

.mv_slider li a:hover {
    opacity: 0.85;
    display: block;
}

#youtube {
    /*background: url(../../img/home/pc/bg_youtube.jpg) no-repeat center;*/
    background-size: cover;
}

#youtube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .3;
    z-index: 1;
}

#youtube .buttonBar {
    display: none;
}


#topMessage{
	background: #fff;
	padding-top: 80px;
	padding-bottom: 30px;
}
	#topMessage h3{
		text-align: center;
		font-size: 39px;
		font-weight: bold;
		margin-bottom: 45px;
	}
	#topMessage p.topMessageP{
		line-height: 1.875;
		text-align: center;
		font-size: 16px;
	}
	#topMessage p+p{
		margin-top: 40px;
	}


#topWorks{
	width: 100%;
	position: relative;
	background: #4d4d4d;
	padding-bottom: 100px;
}
	.top-before,
	.top-after{
		width: 100%;
		height: 100px;
		z-index: 10;
		background-size: cover;
		position: absolute;
	}
	@media screen and (min-width: 1500px) {
		.top-before,
		.top-after{
			height: 200px;
		}
	}
	.top-before{
		background: url(../../img/home/pc/top-before.png) no-repeat top right;
		top: 0;
		left: 0;
	}
	.top-after{
		background: url(../../img/home/pc/top-after.png) no-repeat bottom left;
		bottom: 0;
		right: 0;
	}	
	.worksMain{
		background: #4d4d4d;
		width: 100%;
		padding-top: 100px;
		position: relative;
		z-index: 5;
		text-align: center;
	}
		.worksMain h3{
			padding-top: 45px;
			padding-bottom: 45px;
		}
		.worksMain ul li{
			float: left;
			width: 25%;
			position: relative;
		}
		.worksMain ul li img{
			width: 100%;
		}

		.worksList > li .figure {
		    background: no-repeat center;
		    background-size: cover;
		}

		.worksList > li .figure a {
		    display: block;
		    position: relative;
		}
			.tip,
			.works_img {
			    position: absolute;
			    top: 0;
			    left: 0;
			}
			.works_img {
			    -webkit-transition: all .3s;
			    -moz-transition: all .3s;
			    -ms-transition: all .3s;
			    -o-transition: all .3s;
			    transition: all .3s;
			    opacity: 0;
			}
			.worksList > li .figure a:hover .works_img {
			    opacity: 1;
			}

		.graffitiBnr{
			margin-top: 45px;
			margin-bottom: 25px;
		}
		.all-works{
			margin-bottom: 55px;
			position: relative;
			z-index: 20;
			text-align: center;
		}

#topFlow{
	margin-top: 35px;
	margin-bottom: 40px;
}
	#topFlow h3{
		margin-bottom: 45px;
		text-align: center;
	}
	#topFlow .topFlowBox{
		max-width: 900px;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		margin-bottom: 40px;
	}
		#topFlow .topFlowBox ul li{
			float: left;
			width: 28.89%;
			max-width: 260px;
			background: #fff;
			box-shadow: 0px 20px 20px rgba(0,0,0,0.1);
			border-radius: 5px;
		}
		#topFlow .topFlowBox ul li + li{
			margin-left: 6.665%;
		}
		#topFlow .topFlowBox ul li div {
		    padding: 15px 30px;
		    min-height: 150px;
		    text-align: left;
		    text-align: justify;
		    font-size: 16px;
		}
		.more-flow {
		    text-align: center;
		}

#topProfile{
	background: url(../../img/home/pc/topProfileBg.jpg) no-repeat center ;
	background-size: cover;
	width: 100%;
	height: 810px;
	position: relative;
	z-index: 5;
}
	#topProfile .topProfileMain{
		position: relative;
		z-index: 100;
		padding-top: 150px;
	}
		#topProfile .topProfileMain h3{
			margin-bottom: 45px;
			text-align: center;
		}
		#topProfile .topProfileBox{
			max-width: 900px;
			width: 95%;
			margin-left: auto;
			margin-right: auto;
			position: relative;
		}
			#topProfile .topProfileBox .self-portrait{
				float: left;
				width: 380px;
			}
			#topProfile .topProfileBox .profTxtBox{
				float: right;
				width: 41.12%;
				max-width: 370px;
			}
				#topProfile .topProfileBox .profTxtBox p{
					font-size: 16px;
					line-height: 2.375;
					text-align: justify;
				}

				.profLink {
				    margin-top: 1em;
				}
				.profLink::before {
					content: '';
					display: inline-block;
					width: .4em;
					height: .4em;
					border-right: 1px solid;
					border-bottom: 1px solid;
					-webkit-transform: rotate(-45deg);
					   -moz-transform: rotate(-45deg);
					    -ms-transform: rotate(-45deg);
					     -o-transform: rotate(-45deg);
					        transform: rotate(-45deg);
				    margin-right: .5em;
				    position: relative;
				    top: -2px;
				}
			#topProfile .topProfileBox .prof-sub{
				position: absolute;
			    bottom: -8%;
			    right: -5%;
			}

#topNews{
	width: 100%;
	margin-top: 60px;
}
	#topNews h3{
		text-align: center;
		margin-bottom: 55px;
	}
	.topNewsBox{
		margin-top: 60px;
		margin-bottom: 40px;
	}
		.topNewsBox ul li{
			float: left;
			width: 45%;
			max-width: 450px;
		}
		.topNewsBox ul li:nth-child(2){
			float: right;
			margin-left: 10%;
		}
			.topNewsBox ul li .figure{
				position: relative;
			}
			.topNewsBox ul li .figure img.borderImg{
				box-sizing: border-box;
				border: 1px solid #eaeaea;
			}
			.topNewsBox ul li .figure img.newMark{
				position: absolute;
		        top: -4%;
		        left: 2.5%;
		        width: 80px;
		        height: 80px;
			}
			.topNewsBox ul li .newsContent{
				margin-top: 10px;
			}
				.newsContent h4{
					font-size: 20px;
					font-weight: bold;
					line-height: 2.05;
				}
				.newsContent p.postDate{
					font-size: 17px;
					font-weight: bold;
					margin-top: 5px;
					margin-bottom: 10px;
				}
				.newsContent p.honbun{
					font-size: 16px;
					line-height: 2.375;
				}
	#topNews .more-news{
		text-align: center;
	}


/*------ arrow ------*/
.slick-arrow {
    top: 42%;
    z-index: 10;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    cursor: pointer;
}
.slick-arrow:hover {
    opacity: .8;
}
.slick-prev {
    position: absolute;
    left: 5%;
}
.slick-next {
    position: absolute;
    right: 5%;
}

/*------ dot ------*/
.slick-dots {
    position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    padding: 0;
    cursor: pointer;
    border: solid 1px #FFF;
    border-radius: 10px;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    border: 0;
    outline: none;
    background: #B3B3B3;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
        outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    content: '';
    text-align: center;
    opacity: .25;
    -ms-filter: "alpha(opacity=25)";  /* ie 8 */
    filter: alpha(opacity=25);    /* ie lt 8 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-filter: "alpha(opacity=25)";
    filter: alpha(opacity=25);    /* ie lt 8 */
    background-color: #000000;
    border-radius: 10px;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    -ms-filter: "alpha(opacity=75)";  /* ie 8 */
    filter: alpha(opacity=70);    /* ie lt 8 */
    color: black;
}


/* =============================================================================
   sp
   ========================================================================== */

@media screen and (max-width: 768px) {

    .mv_slider li img.sp-bl {
        display: block;
    }
    #youtube:before {
        display: none;
    }
    .slick-arrow {
        display: none !important;
    }

    #topMessage h3 {
	    line-height: 1.2;
	}
	#topMessage p.topMessageP{
		text-align: justify;
	}

	/* WORKS */
	#topWorks {
	    padding-bottom: 20vw;
	}
		.worksMain {
		    padding-top: 10vw;
		}
	    .worksMain ul li {
		    width: 50%;
		}

	/* FLOW */
	#topFlow .topFlowBox ul li{
		float: none;
	    width: auto;
	    margin: 0 auto 30px;
	}
	#topFlow .topFlowBox ul li + li{
		margin-left: auto;
	}
		#topFlow .topFlowBox ul li div {
		    min-height: 0;
		    padding: 20px 30px;
		}

	/* PROFILE */
	#topProfile {
	    height: auto;
	    padding-bottom: 20vw;
	}
		#topProfile .topProfileMain {
			padding: 1em;
		    padding-top: 30vw;
		}
		#topProfile .topProfileBox .self-portrait {
		    float: none;
		    width: auto;
		}
		#topProfile .topProfileBox .profTxtBox {
		    float: none;
		    width: auto;
		    max-width: none;
		    margin: 10px auto;
		}
		#topProfile .topProfileBox .profTxtBox p {
		    line-height: 1.8;
		}
		#topProfile .topProfileBox .prof-sub {
		    position: static;
		    text-align: right;
		}

	/* NEWS */
	.topNewsBox ul li {
	    float: none;
	    width: auto;
	    max-width: none;
	}
	.topNewsBox ul li:nth-child(2) {
	    float: none;
	    margin-left: auto;
	    margin-top: 15vw;
	}
	.newsContent h4 {
	    line-height: 1.6;
	    margin-top: 20px;
	}
	.newsContent p.honbun {
	    line-height: 2;
	}

	/* SNS */
	.sns-before, .sns-after {
		width: 100%;
		height: 50px;
	}

}