@charset "utf-8";

/* 共通 */
h2{
	position:relative;
	font-size:1.8rem;
	padding:0 0 75px 20px;
	letter-spacing:0;
}
h2::before{
	position:absolute;
	content:'';
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:50%;
	background-color:#C9007F;
	top:8px;
	left:0;
}

h2::after{
	position:absolute;
	content:attr(data-en);
	display:block;
	font-size:6rem;
	line-height:8rem;
	letter-spacing:0;
	font-family:'Oswald';
	font-weight:300;
	left:0;
	bottom:0;
}
p{
	font-size:1.8rem;
	line-height:3.4rem;
	letter-spacing:0;
}
li{list-style:none;}
a{text-decoration:none;}

.link_btn a{
	display:block;
	width:200px;
	border-radius:4px;
	border:1px solid #535978;
	position:relative;
	padding:9px 30px 9px 15px;
	font-size:1.5rem;
	letter-spacing:0;
	font-family:'Oswald';
	transition:color 0.3s;
	transition:border 0.3s,background 0.3s,color 0.3s;
}
.link_btn a::after{
	position:absolute;
	content:"";
	display:inline-block;
	width:12px;
	height:6px;
	background:#333;
	clip-path:polygon(0 0, 0 100%, 100% 50%);
	top:0;
	bottom:0;
	right:13px;
	margin:auto;
	transition:background 0.3s;
}
.link_btn a:hover{
	border:1px solid #C9007F;
	background:#C9007F;
}
.link_btn a:hover::after{background:#fff;}
.index_bg{
	background:url(/img/index/bg.jpg) no-repeat top center/cover;
	padding-bottom:120px;
	position:relative;
}

/* ヘッダー */
#header_wrap{background-color:#000;}
.menu_link{
	color:#fff !important;
}

/* mv */
#index_wrap{margin-top:60px;}
.mv_area{
	position:relative;
	z-index:10;
}
.mv_area::before{
	position:absolute;
	content:'';
	display:inline-block;
	background:url(/img/index/bg_mv_line.png)no-repeat center bottom/contain;
	width:100%;
	height:100%;
	z-index:-10;
}
.mv_box{
	max-width:1240px;
	margin:0 auto 85px;
	padding:60px 20px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.mv_copy{width:37%;margin-bottom:45px;}
.mv_slide{width:55%;}
.mv_slide_item{background:#000;}

/* service */
.service_area{
	color:#fff;
	max-width:1040px;
	margin:0 auto;
	padding:0 20px;
}
.service_h2{
	margin-top:100px;
	margin-bottom:28px;
}
.service_list{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-top:40px;
	z-index:10;
	overflow:visible;
}
.service_list::before{
	content:'';
	position:absolute;
	top:-10%;
	margin:0 calc(50% - 55vw);
	width:110vw;
	height:100%;
	background:url(/img/index/bg_service.png) no-repeat center / cover;
	pointer-events:none;
	z-index:-10;
}
.service_item{width:20%;}
.service_name{
	display:block;
	font-size:1.8rem;
	line-height:3.4rem;
	letter-spacing:1.5px;
	text-align:center;
	margin-top:17px;
}
.service_btn{
	margin-top:50px;
}
.service_btn a{
	color: #fff;
}
.service_btn a{color:#fff !important;}
.service_btn a::after{background:#fff;}

/* company */
.company_area{
	background:#ECECEC url(/img/index/bg_company.png)no-repeat top right / contain;
}
.company_box{
	max-width:1040px;
	margin:auto;
	padding:120px 20px 108px;
	display:flex;
	justify-content:space-between;
}

.company_txt{width:calc(100% - 580px);}
.company_h2{margin-bottom:42px;}
.company_p{margin-bottom:50px;}
.company_img{width:540px;}
.company_btn a{border:1px solid #BBB;}
.company_btn a:hover{color:#FFF;}

@media screen and (max-width:1023px){
/* service */
.service_name{font-size:1.5rem;}
.service_list::before {
	margin:0 calc(50% - 50vw);
	width:100vw;
	background-size:contain;
}

/* company */
.company_box{padding:80px 20px;}
.company_txt{width:calc(100% - 430px);}
.company_img{width:400px;}
}

@media screen and (max-width:767px){
/* 共通 */
h2{
	font-size:1.6rem;
	padding:0 0 66px 20px;
	margin-bottom:12px;
}
h2::after{
	font-size:5rem;
	line-height:7.4rem;
}
p{
	font-size:1.4rem;
	line-height:2.9rem;
}
.link_btn a{padding:10px 30px 11px 8px;}
/* ヘッダー */
.toggle_btn::before, .toggle_btn::after, .toggle_txt::before{background:#fff;}

/* service */
.index_bg{padding-bottom:80px;}
.service_list{
	margin-bottom:43px;
	padding:0 20px;
}
.service_list::before{
	width:110vw;
	height:calc((100% - 121px) / 2);
	background-position:top left -20px;
	background-size:cover;
	top:0;
	margin:0 calc(50% - 55vw) ;
}
.service_list::after{
	content:'';
	position:absolute;
	bottom:39px;
	width:110vw;
	height:calc((100% - 121px) / 2);
	margin:0 calc(50% - 55vw);
	background:url(/img/index/bg_service.png)no-repeat center left 20px / cover;
	transform:rotate(180deg);
	pointer-events:none;
	z-index:-10;
}

.service_item{width:44%;margin-bottom:43px;}
.service_item:nth-child(3),.service_item:last-child{margin-bottom:0;}
.service_name{
	font-size:1.4rem;
	margin-top:5px;
	letter-spacing:0;
}
.service_btn{
	margin:0 auto;
}

/* company */
.company_area{background:#ECECEC url(/img/index/bg_company.png)no-repeat top right / contain;}
.company_box{
	padding:45px 20px 130px;
	display:block;
	position:relative;
}

.company_txt{width:100%;}
.company_h2{margin-bottom:12px;}
.company_p{margin-bottom:12px;}
.company_btn{
	position:absolute;
	bottom:50px;
	left:20px;
	right:0;
	margin:auto;
}
.company_img{width:100%;margin-top:20px;}

}
@media screen and (max-width:600px){
/* mv */
.mv_area::before{display:none;}
.mv_box{
	flex-direction:column;
	align-items:flex-start;
	padding:33px 20px 90px;
	position:relative;
}
.mv_box::before{
	display:inline-block;
	content:'';
	position:absolute;
	background:url(/img/index/bg_mv_line.png)no-repeat center bottom/800px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0 calc(50% - 50vw);
	width:100vw;
	height:100%;
}
.mv_txt{width:240px;}
.mv_copy{margin-bottom:30px;width:240px;}
.mv_slide{
	min-width:200px;
	width:100%;
	padding-left:55px;
	margin:30px 0 0 auto;
}
/* service */
.service_h2{margin-top:70px;}
}

@media screen and (max-width:500px){
.mv_slide::before{background:url(/img/index/bg_mv_line.png)no-repeat center bottom/855px;}
.service_list_box::before{top:-20%;}
}