@charset "utf-8";

/* --------------------
	main
--------------------*/
#main #mv{
	width: 100%;
	height: 100vh;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position:relative;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
}
#main #mv #mvin{
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#main #mv #mvin .swiper-slide{
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 0;
}
#main #mv #mvin .swiper-slide#cut1{
	background: url("../img/top/main_img01.jpg") center center/cover no-repeat;
}
#main #mv #mvin .swiper-slide#cut2{
	background: url("../img/top/main_img02.jpg") center center/cover no-repeat;
}
#main #mv #mvin .swiper-slide#cut3{
	background: url("../img/top/main_img03.jpg") center center/cover no-repeat;
}
#main #mv #mvin .swiper-slide#cut4{
	background: url("../img/top/main_img04.jpg") center center/cover no-repeat;
}
#main #mv #mvin .swiper-slide#cut5{
	background: url("../img/top/main_img05.jpg") center center/cover no-repeat;
}
#main #mv #mvin .swiper-slide#cut6{
	background: url("../img/top/main_img06.jpg") center center/cover no-repeat;
}

#main #mv #mvin .swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	text-align: center;
	opacity: 1 !important;
	background: rgba(45,45,45,0.60) !important;
	box-sizing: border-box;
	border-radius: 15px;
	margin: 0 10px !important;
	cursor: pointer;
}
#main #mv #mvin .swiper-pagination-bullet-active {
	background: #FFF !important;
}
#main #mv #mvin .swiper-pagination {
	display: block;
	bottom: 36px !important;
}



#main #mv #cover{
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	background: rgba(0,0,0,0.30);
	pointer-events: none;
}
#main #mv #mv_copy{
	width: auto;
	position: absolute;
	bottom: 50px;
	left: 50px;
	text-align: left;
	z-index: 99;
}
#main #mv #mv_copy h2{
	color: #FFF;
	font-size: 2.875rem;
	letter-spacing: 0.13em;
	line-height: 1.8;
	padding: 0 0 0.8em 0;
}
#main #mv #mv_copy h6{
	color: #FFF;
	font-size: 0.875rem;
	letter-spacing: 0.13em;
}

@media only screen and (max-width: 1200px) {
	#main #mv #mv_copy h2{
		font-size: 3.4vw;
	}
	#main #mv #mv_copy h6{
		font-size: 1.05vw;
	}
}
@media only screen and (max-width: 768px) {
	#main #mv #mvin .unit{
		opacity: 0.6;
		background: url("../img/top/main_img01.jpg") center center/cover no-repeat;
	}
	#main #mv #mv_copy{
		width: 80%;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: auto;
		left: 50%;
		margin: 0 0 0 -40%;
		text-align: left;
		z-index: 99;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
	}
	#main #mv #mv_copy h2{
		font-size: 2.25rem;
	}
	#main #mv #mv_copy h6{
		font-size: 0.688rem;
	}
}
@media only screen and (max-width: 480px) {
	#main #mv #mv_copy{
	}
	#main #mv #mv_copy h2{
		font-size: 7.8vw;
	}
	#main #mv #mv_copy h6{
		font-size: 2.4vw;
	}
}


/* ----------------------------------------------------------------------------
	concept
---------------------------------------------------------------------------- */
#concept {
	width: 100%;
	overflow: hidden;
	position: relative;
}

#concept .img_area{
	width: 1280px;
	position: relative;
}
#concept .img_area::before{
	content: "";
	display: block;
}
#concept .img_area figure{
	position: absolute;	
}
#concept .img_area#img_top{
	margin: 90px auto 60px auto;
}
#concept .img_area#img_top::before{
	padding-top: 78.125%;
}
#concept .img_area#img_under{
	margin: 125px auto 135px auto;
}
#concept .img_area#img_under::before{
	padding-top: 56.5625%;
}


#concept .img_area#img_top .c_i_01{
	width: 380px;
	top: 0;
	right: 0;
}
#concept .img_area#img_top .c_i_02{
	width: 390px;
	top: 111px;
	left: 0;
}
#concept .img_area#img_top .c_i_03{
	width: 620px;
	top: 332px;
	left: 50%;
	margin: 0 0 0 -136px;
}
#concept .img_area#img_top .c_i_04{
	width: 382px;
	top: 637px;
	left: 0;
}
#concept .img_area#img_top .c_i_05{
	width: 382px;
	top: 731px;
	right: 0;
}

#concept .img_area#img_under .c_i_01{
	width: 606px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -303px;
}
#concept .img_area#img_under .c_i_02{
	width: 434px;
	top: 392px;
	left: 0;
}
#concept .img_area#img_under .c_i_03{
	width: 320px;
	top: 447px;
	right: 0;
}

#concept h3{
	width: 100%;
	font-size: 2.125rem;
	letter-spacing: 0.02em;
	line-height: 1.8;
	text-align: center;
	padding: 0 0 2em 0;
}
#concept p{
	width: 100%;
	letter-spacing: 0.02em;
	text-align: center;
}
@media only screen and (max-width: 1280px) {
	#concept .img_area{
		width: 100%;
		position: relative;
	}

	#concept .img_area#img_top::before{
		padding-top: 78.125%;
	}
	#concept .img_area#img_under{
		margin: 125px auto 135px auto;
	}
	#concept .img_area#img_under::before{
		padding-top: 56.5625%;
	}


	#concept .img_area#img_top .c_i_01{
		width: 29.6875%;
		top: 0;
		right: 0;
	}
	#concept .img_area#img_top .c_i_02{
		width: 30.46875%;
		top: 11.1%;
		left: 0;
	}
	#concept .img_area#img_top .c_i_03{
		width: 48.4375%;
		top: 33.2%;
		left: 50%;
		margin: 0 0 0 -10.625%;
	}
	#concept .img_area#img_top .c_i_04{
		width: 29.84375%;
		top: 63.7%;
		left: 0;
	}
	#concept .img_area#img_top .c_i_05{
		width: 29.84375%;
		top: 73.1%;
		right: 0;
	}

	#concept .img_area#img_under .c_i_01{
		width: 47.34375%;
		top: 0;
		left: 50%;
		margin: 0 0 0 -23.671875%;
	}
	#concept .img_area#img_under .c_i_02{
		width: 33.90625%;
		top: 54.67224%;
		left: 0;
	}
	#concept .img_area#img_under .c_i_03{
		width: 25%;
		top: 62.34309%;
		right: 0;
	}

	#concept h3{
		font-size: 2.125rem;
	}
	#concept p{
	}
}
@media only screen and (max-width: 919px) {
	#concept .img_area{
	}
	#concept .img_area#img_top{
		margin: 70px auto 60px auto;
	}
	#concept .img_area#img_top::before{
		padding-top: 78.125%;
	}
	#concept .img_area#img_under{
		margin: 105px auto 115px auto;
	}
	#concept .img_area#img_under::before{
		padding-top: 56.5625%;
	}


	#concept h3{
		font-size: 1.875rem;
	}
	#concept p{
	}
}
@media only screen and (max-width: 768px) {
	#concept .img_area{
		padding: 40px 0 0 0;
	}
	#concept .img_area{
	}
	#concept .img_area#img_top{
		margin: 50px auto 40px auto;
	}
	#concept .img_area#img_under{
		margin: 75px auto 85px auto;
	}

	#concept h3{
		font-size: 1.500rem;
	}
	#concept p{
		text-align: left;
	}
	#concept p br{
		display: block;
	}
}
@media only screen and (max-width: 480px) {
	#concept .img_area#img_top{
		margin: 40px auto 40px auto;
	}
	#concept .img_area#img_under{
		margin: 60px auto 70px auto;
	}

	#concept h3{
		font-size: 1.250rem;
	}
}



/* ----------------------------------------------------------------------------
	projact
---------------------------------------------------------------------------- */
#projact {
	width: 100%;
	position: relative;
	background: #141418;
	padding: 120px 0 140px 0;
}

#projact #topics_wrap{
	
}

#projact #topics_wrap.unit_wrap{
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 30px 0 30px 0;
}
#projact #topics_wrap.unit_wrap .unit{
	width: 46%;
	display: block;
	position: relative;
	margin: 0 0 60px 0;
}
#projact #topics_wrap.unit_wrap .unit a{
	display: block;
	position: relative;
	color: #FFF;
}

#projact #topics_wrap.unit_wrap .unit figure{
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	background: #232323;
	margin: 0 0 18px 0;
}
#projact #topics_wrap.unit_wrap .unit figure img{
	width: 100%;
	display: block;
}

#projact #topics_wrap.unit_wrap .unit .txt_area{
	width: 100%;
	display: block;
	position: relative;
	border-bottom: rgba(255,255,255,0.40) 1px solid;
	padding: 0 0 26px 0;
}
#projact #topics_wrap.unit_wrap .unit .txt_area h3{
	width: 100%;
	text-align: left;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	line-height: 1.6;
	padding: 0 0 0 60px;
	background: url("../img/common/i_arror_r.svg") center left/23px auto no-repeat;
	box-sizing: border-box;
}
#projact .more{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}
#projact .more a{
	width: auto;
	text-align: right;
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	line-height: 1.1;
	color: #FFF;
	padding: 0 0 0.9em 0;
	border-bottom: rgba(255,255,255,0.40) 1px solid;
}


@media only screen and (max-width: 919px) {
	#projact {
		padding: 100px 0 120px 0;
	}

	#projact #topics_wrap{

	}

	#projact #topics_wrap.unit_wrap{
		padding: 30px 0 30px 0;
	}
	#projact #topics_wrap.unit_wrap .unit{
		width: 46%;
		margin: 0 0 50px 0;
	}

	#projact #topics_wrap.unit_wrap .unit figure{
		margin: 0 0 18px 0;
	}

	#projact #topics_wrap.unit_wrap .unit .txt_area{
		padding: 0 0 26px 0;
	}
	#projact #topics_wrap.unit_wrap .unit .txt_area h3{
		font-size: 1.25rem;
		padding: 0 0 0 60px;
		background: url("../img/common/i_arror_r.svg") center left/23px auto no-repeat;
	}
}
@media only screen and (max-width: 768px) {
	#projact {
		padding: 80px 0 100px 0;
	}

	#projact #topics_wrap.unit_wrap{
		padding: 30px 0 30px 0;
	}
	#projact #topics_wrap.unit_wrap .unit{
		width: 100%;
		margin: 0 0 30px 0;
	}

	#projact #topics_wrap.unit_wrap .unit figure{
		margin: 0 0 18px 0;
	}

	#projact #topics_wrap.unit_wrap .unit .txt_area{
		padding: 0 0 24px 0;
	}
	#projact #topics_wrap.unit_wrap .unit .txt_area h3{
		font-size: 1.125rem;
		padding: 0 0 0 50px;
		background: url("../img/common/i_arror_r.svg") center left/21px auto no-repeat;
	}
	
	#projact .more a{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 480px) {
	#projact {
		padding: 60px 0 80px 0;
	}

	#projact #topics_wrap.unit_wrap{
		padding: 20px 0 20px 0;
	}
	#projact #topics_wrap.unit_wrap .unit{
		margin: 0 0 30px 0;
	}

	#projact #topics_wrap.unit_wrap .unit figure{
		margin: 0 0 16px 0;
	}

	#projact #topics_wrap.unit_wrap .unit .txt_area{
		padding: 0 0 22px 0;
	}
	#projact #topics_wrap.unit_wrap .unit .txt_area h3{
		font-size: 1.000rem;
		padding: 0 0 0 48px;
		background: url("../img/common/i_arror_r.svg") center left/19px auto no-repeat;
	}
	#projact .more a{
		font-size: 0.938rem;
	}
}