@charset "utf-8";
/* ===================================================================

 file name  :index.css
 style info :トップページ

=================================================================== */

/* =============================

	overwrite

=============================== */
@media screen and (min-width: 768px){/* 768以上 */
	#headerWrap #header{
		width: 100%;
		background: none;
		box-shadow: none;
	}
	#headerWrap.fixed #header{
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,0.1);
	}
	#headerWrap #header #logo img.mvout{
		display: none;
	}
	#headerWrap.fixed #header #logo img.mvon{
		display: none;
	}
	#headerWrap.fixed #header #logo img.mvout{
		display: inline-block;
	}
	#headerWrap .gnav{
		display: none;
	}
	#headerWrap.fixed .gnav{
		display: block;
	}
	#mv .gnav{
		max-width: 870px;
		width: 100%;
		position: absolute;
		left: 50%;
		bottom: 40px;
		transform: translateX(-50%);
		z-index: 9999999;
	}
	#mv .gnav ul li a{
		color: #fefefe;
	}
	#mv .gnav ul li a::before{
		background: #fefefe;
	}
}

@media screen and (max-width: 768px){
	#headerWrap #header #logo img.mvout{
		display: inline-block !important;
	}
	#headerWrap #header #logo img.mvon{
		display: none !important;
	}
	#content{
		padding-top: 50px;
	}
	#mv .gnav{
		display: none !important;
	}
	#main{
		padding: 70px 0 0;
	}
}
/* =================================== */

/* 
	#mv
----------------------------------------------------------------------------*/
#mv{
	height: 100vh;
	min-height: 600px;
	background: #444;
	position: relative;
}
#mvlogo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 99;
}

#mv .swiper-container{
	width: 100%;
	height: 100%;
}
#mv .swiper-slide{
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#mv .swiper-slide .swiper-bgimg{
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
#mv .swiper-slide .swiper-in{
	opacity: 0;
	transition: opacity 1s ease 0.8s;
}
#mv .swiper-slide.swiper-slide-active .swiper-in{
	opacity: 1;
}

#mv .swiper-button-prev,
#mv .swiper-button-next{
	width: 40px;
	height: 40px;
	position: absolute;
	top: auto !important;
	left: auto !important;
	bottom: 50px;
	transition: all ease 0.4s;
}
#mv .swiper-button-prev{
	background: url(../images/index/mv/btn_prev02.png) no-repeat 50% 50% / 100% auto;
	right: 86px;
}
#mv .swiper-button-next{
	background: url(../images/index/mv/btn_next02.png) no-repeat 50% 50% / 100% auto;
	right: 30px;
}
#mv .swiper-button-prev:hover,
#mv .swiper-button-next:hover{
	opacity: 0.6;
	cursor: pointer;
}

/* slide05 
----------------------*/
#mv .slide05 .catch{
	position: absolute;
	top: 69.2%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}
#mv .slide05 .btn-more{
	width: 330px;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}
#mv .slide05 .btn-more a{
	display: block;
	border: solid 1px rgba(255,255,255,0.65);
	border-radius: 7px;
	text-align: center;
	color: #fefefe;
	font-size: 2.2rem;
	line-height: 50px;
	background: rgba(25,16,9,0.2);
}
#mv .slide05 .btn-more a:hover{
	background: rgba(25,16,9,0.5);
}
#mv .slide05 .btn-more a::before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 18px;
	margin: -4px 0 0;
	transition: all ease 0.4s;
}
#mv .slide05 .btn-more a:hover::before{
	right: 13px;
}

@media screen and (max-width: 767px){
	#mv{
		height: auto;
		min-height: 0;
		background: #444;
		position: relative;
	}
	#mvlogo{
		width: 120px;
		margin: -20px 0 0;
	}
	#mv .swiper-container{
		width: 100%;
		height: auto;
	}

	#mv .swiper-slide{
		padding: 90% 0 0;
	}
	#mv .swiper-button-prev,
	#mv .swiper-button-next{
		width: 30px;
		height: 30px;
		bottom: 15px;
	}
	#mv .swiper-button-prev{
		right: 52px;
	}
	#mv .swiper-button-next{
		right: 15px;
	}

	/* slide05 
	----------------------*/
	#mv .slide05 .catch{
		width: 168px;
		top: 64%;
	}
	#mv .slide05 .btn-more{
		width: 165px;
		top: 72%;
	}
	#mv .slide05 .btn-more a{
		border-radius: 3px;
		font-size: 1.1rem;
		line-height: 25px;
	}
	#mv .slide05 .btn-more a::before{
		width: 4px;
		height: 4px;
		right: 9px;
		margin: -2px 0 0;
	}
	#mv .slide05 .btn-more a:hover::before{
		right: 13px;
	}


}

/* 
	.ttl
----------------------------------------------------------------------------*/
#main .ttl{
	margin: 0 0 40px;
}
#main .ttl span{
	display: inline-block;
	vertical-align: middle;
}
#main .ttl .en{
	margin: 0 18px 0 0;
	font-size: 3rem;
}
#main .ttl .ja{
	font-size: 1.4rem;
}

@media screen and (max-width: 768px){
	#main .ttl{
		margin: 0 0 20px;
		line-height: 1;
	}
	#main .ttl .en{
		margin: 0 18px 0 0;
	}
}


/* 
	#news
----------------------------------------------------------------------------*/
#news{
	margin: 0 0 154px;
	position: relative;
}
#feed{
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
#feed ul{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	border-left: solid 1px #ccc;
}
#feed ul li{
	width: 33.33333%;
	min-height: 280px;
	padding: 34px 40px;
	flex-grow: 1;
	border-right: solid 1px #ccc;
	font-size: 1.4rem;
	line-height: 2;
}
#feed ul li dl dt{
	margin: 0 0 16px;
	color: #989898;
}
#feed ul li a{
	color: #27427a;
	text-decoration: underline;
}
#feed ul li a:hover{
	text-decoration: none;
}
#news .btn-view{
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 420px;
}

@media screen and (max-width: 767px){
	#news{
		margin: 0 0 90px;
	}
	#feed{
		margin: 0 0 30px;
		border-top: solid 1px #ccc;
		border-bottom: none;
	}
	#feed ul{
		width: 100%;
		display: block;
		border-left: none;
	}
	#feed ul li{
		width: 100%;
		min-height: auto;
		padding: 23px 20px;
		border-right: none;
		border-bottom: solid 1px #ccc;
	}
	#feed ul li dl dt{
		margin: 0 0 5px;
	}
	#news .btn-view{
		position: static;
		margin: 0 0 0 20px;
	}
}


/* 
	#project
----------------------------------------------------------------------------*/
#secProject{
	margin: 0 0 116px;
	padding: 0 0 116px;
	position: relative;
}
#secProject::before{
	content: "";
	display: block;
	width: 100%;
	height: 568px;
	background: #f6f6f6;
	position: absolute;
	bottom: 0;
	z-index:-1;
}
#secProject .sec-inner-1200{
	position: relative;
}

#secProject .p-slider{
	position: relative;
}
#secProject .p-slider .prev-arrow,
#secProject .p-slider .next-arrow{
	position: absolute;
	top: -50px;
}
#secProject .p-slider .prev-arrow{
	right: 140px;
}
#secProject .p-slider .next-arrow{
	right: 0;
}
#secProject .p-slider .slick-counter{
	position: absolute;
	top: -45px;
	right: 70px;
}
#secProject .p-slider{
	margin: 0 0 0 -20px;
}
#secProject .p-slider ul li{
	position: relative;
	margin: 0 0 0 20px;
}
#secProject .p-slider ul li figure{
	margin: 0 0 15px;
}
#secProject .p-slider ul li dl{
	width: 990px;
}
#secProject .p-slider ul li dl dt{
	font-size: 2rem;
	line-height: 1.4;
}
#secProject .p-slider ul li dl dd{
	font-size: 1.4rem;
	line-height: 2;
}
#secProject .p-slider ul li .btn-view{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
}
#secProject .btn-all{
	position: absolute;
	top: 5px;
	right: 10px;
}

@media screen and (max-width: 767px){
	#secProject{
		margin: 0 0 80px;
		padding: 0 0 80px;
		overflow: hidden;
	}
	#secProject::before{
		width: 100%;
		height: 100vh;
		top: 180px;
		bottom: auto;
	}
	#secProject .p-slider{
		margin: 80px 0 0 -20px;
	}
	#secProject .p-slider .prev-arrow,
	#secProject .p-slider .next-arrow{
		width: 30px;
		position: absolute;
		top: -53px;
	}
	#secProject .p-slider .prev-arrow{
		left: 20px;
		right: auto;
	}
	#secProject .p-slider .next-arrow{
		left: 110px;
		right: auto;
	}
	#secProject .p-slider .slick-counter{
		position: absolute;
		top: -50px;
		left: 58px;
		right: auto;
		font-size: 1.6rem;
	}
	#secProject .p-slider ul li figure{
		margin: 0 0 20px;
	}
	#secProject .p-slider ul li dl{
		width: 100%;
	}
	#secProject .p-slider ul li dl dt{
		letter-spacing: -0.05em;
	}
	#secProject .p-slider ul li .btn-view{
		position: static;
		margin: 22px 0 0;
	}
	#secProject .btn-all{
		position: static;
		margin: 30px 0 0;
	}
}

/* 
	#secConcept
----------------------------------------------------------------------------*/
#secConcept{
	margin: 0 0 255px;
}
#secConcept .content-link ul{
	display: flex;
	justify-content: space-between;
}
#secConcept .content-link ul li a{
	display: block;
	position: relative;
	overflow: hidden;
	background: #161616;
}
#secConcept .content-link ul li a figure{
	transition: all ease 0.4s;
}
#secConcept .content-link ul li a:hover figure{
	transform: scale(1.1,1.1);
	opacity: 0.6;
}
#secConcept .content-link ul li a h3{
	padding: 28px;
	border-top: solid 1px rgba(255,255,255,0.6);
	color: #fff;
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 10;
}
#secConcept .content-link ul li a h3::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 24px;
	margin: -4px 0 0;
}

@media screen and (max-width: 767px){
	#secConcept{
		margin: 0 0 150px;
	}
	#secConcept .content-link{
		overflow-x: scroll;
	}
	#secConcept .content-link ul{
		width: 216%;
	}
	#secConcept .content-link ul li{
		width: 30.8%;
	}
	#secConcept .content-link ul li a h3{
		padding: 15px;
		font-size: 1.6rem;
	}
	#secConcept .content-link ul li a h3::before{
		width: 6px;
		height: 6px;
		right: 20px;
		margin: -3px 0 0;
	}
}

/* 
	#secWorks
----------------------------------------------------------------------------*/
#secWorks{
	padding: 1px 0 100px;
	background: #161616;
}
#secWorks .block{
	display: flex;
}
#secWorks .block figure{
	width: 59.8958333333%;
	margin: -80px 0 0;
}
#secWorks .txt-block{
	padding: 180px 0 0 110px;
}
#secWorks .txt-block .ttl{
	color: #fff;
}

@media screen and (max-width: 767px){
	#secWorks{
		padding: 1px 20px 79px;
	}
	#secWorks .block{
		display: block;
	}
	#secWorks .block figure{
		width: 100%;
		margin: -40px 0 0;
	}
	#secWorks .txt-block{
		padding: 40px 0 0;
	}
}


/* 
	#loading
----------------------------------------------------------------------------*/
#loading{
	width: 100%;
	height: 100% !important;
	max-height: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999999;
	background: #161616;
}
#loading.pre-loaded{
	opacity: 0;
	transition: all ease-out 0.6s 1.5s;
}
#loading.loaded{
	display: none;
	position: absolute;
	z-index: -99999;
}
#txtLoading{
	color: #fefefe;
	font-size: 4.8rem;
	white-space: nowrap;
	position: fixed;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%,-50%);
	animation: fadein 1s ease-in-out 1s both;
}
#loading.pre-loaded #txtLoading span{
	display: block;
	animation: fadeout 1.5s ease-out 1s both;
}

@keyframes fadein{
	0%{
		opacity: 0;
		margin-top: 80px;
	}
	100%{
		opacity: 1;
		margin-top: 0;
	}
}
@keyframes fadeout{
	0%{
		opacity: 1;
		transform: scale(1, 1);
	}
	100%{
		opacity: 0;
		transform: scale(100, 100);
	}
}

@media screen and (max-width: 767px){
	#loading{
		height: 100% !important;
	}
	#txtLoading{
		font-size: 4rem;
	}
}