.btn_list{
	margin-top:30px;
	opacity:0;
}

.open .btn_list{
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
}




.btn_list_wrap{
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	max-width: 980px;
	margin:0 auto;
	padding: 0 120px;
}


.btn_list_wrap > div{
	width:8%;
	position:relative;
	cursor: pointer;
		-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}

.btn_list_wrap > div:hover{
	z-index:99;
	opacity:0.6;
		-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}



.btn_list_wrap > div a:after{
	content:"";
	position:absolute;
	width:100%;
	height:3px;
	background:#574542;
	left:0;
	bottom:-20px;
	-webkit-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	transition: .2s cubic-bezier(0.78, .18, .34, .98);
}

.btn_list_wrap > div:hover a:after{
	height:9px;
	bottom:-22px;
	-webkit-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .2s cubic-bezier(0.78, .18, .34, .98);
	transition: .2s cubic-bezier(0.78, .18, .34, .98);
}




#main_content{
	margin-top:150px;
}




.top_img{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 80px;
}



.top_img{
	display: flex;
	justify-content: space-between;
}

.top_img > div{
	width:48%;
	display: flex;
	justify-content: space-between;
}

.top_img > div.main_copy{
	display:none;
}



.top_img > div > div{
	width:46%;
	overflow:hidden;
}

.top_img > div > div img{
	opacity:0;
	transform: scale(1.12);
}



.open .top_img > div.top_img01  > div:nth-child(1) img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}

.open .top_img > div.top_img01  > div:nth-child(2) img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
}

.open .top_img > div.top_img02  > div:nth-child(1) img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.open .top_img > div.top_img02  > div:nth-child(2) img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
}



.main_copy{
	text-align:center;
	margin-top:40px;
}


.main_copy p{
	display:inline-block;
	width:600px;
	opacity:0;
}


.open .main_copy p{
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
}






















.content_index{
	margin-top: 122px;
}


.content_index_inner {
    max-width: 1180px;
    padding: 0 120px;
    margin: 0 auto;
}


.content_box{
	position:relative;
	margin-bottom:100px;
}


.content_box:last-child{
	margin-bottom:0px;
}





.c_sec_top{
	display: flex;
	justify-content: space-between;
}



.c_sec01{
	width:60%;
	position:relative;
}

.c_sec01_img{
	padding-left:120px;
	overflow:hidden;
}

.c_sec01_img img{
	opacity:0;
	transform: scale(1.12);
}

.content_box.active .c_sec01_img img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .4s;
}


.c_sec01_subimg{
	position:absolute;
	width:40%;
	top:20%;
	overflow:hidden;
}

.c_sec01_subimg img{
	opacity:0;
	transform: scale(1.12);
}

.content_box.active .c_sec01_subimg img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .6s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .6s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .6s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .6s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .6s;
}



.c_sec01_point{
	position:absolute;
	background:#dfff00;
	padding:25px;
	bottom:5%;
	overflow: hidden;
    white-space: nowrap;
	width: 0%;
	opacity:0;
}

.content_box.active .c_sec01_point{
	animation: obi_ani 0.8s forwards cubic-bezier(0.78, .18, .34, .98) 1s;
}


@keyframes obi_ani {
  0% {
    width: 0%;
  }
  100% {
		width: 40%;
		opacity:1;
  }
}

.c_sec01_point span{
	position:absolute;
	width:10px;
	top:5px;
	left:5px;
}

.c_sec01_point p{
	text-align:center;
	font-size:9pt;
	line-height:160%;
	opacity:0;
}

.content_box.active .c_sec01_point p{
	opacity:1;
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.6s;
}



.c_sec02{
	width:30%;
	margin-top: 30px;
}


.c_sec02 .c_sec02_img{
	overflow:hidden;
}


.c_sec02 .c_sec02_img img{
	opacity:0;
	transform: scale(1.12);
}

.content_box.active .c_sec02 .c_sec02_img img{
	opacity:1;
	transform: scale(1);
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .8s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .8s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .8s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .8s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) .8s;
}



.c_sec02_detail{
	margin-top:30px;
		opacity:0;
}

.content_box.active .c_sec02_detail{
	opacity:1;
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
}


.c_sec02_detail .title p{
	font-size:20px;
	font-weight:bold;
	color: #574542;
	word-wrap: break-word;
}

.c_sec02_detail .title p span{
	font-size:16px;
	font-weight:bold;
	display:block;
	color: #ff4242;
}

.c_sec02_detail .note{
	margin-top:10px;
}

.c_sec02_detail .note p{
	font-size:14px;
}

.c_sec02_detail .staff{
	margin-top:6px;
}



.c_detail{
	margin:40px auto 0;
	width:550px;
		opacity:0;
}

.content_box.active .c_detail{
	opacity:1;
	-webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
	-moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
	-ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
	-o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
	transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}

.c_detail p{
	font-size:14px;
}






















@media screen and (max-width: 640px){
	
	
	
	.btn_list_wrap {
		padding: 0 20px;
	}
	
	
	
	.btn_list_wrap > div {
		width: 9.5%;
		margin-bottom:0px;
	}
	
	.btn_list_wrap > div:hover a:after{
	height:6px;
	bottom:-22px;
}

	
	
	.content_index {
		margin-top: 100px;
	}
	
	
	.content_index_inner {
		padding: 0 0px;
	}
	
	.content_box {
		display: block;
		padding: 0 0 0 0;
		margin-bottom: 70px;
	}
	
	
	#main_content {
		margin-top: 60px;
	}
	
	

	
	
	.top_img {
		padding: 0 20px;
		display: block;
	}
	
	.top_img > div {
		width: 100%;
	}
	
	.top_img > div > div {
		width: 47%;
	}
	
	
	
	.open .top_img > div.top_img01  > div:nth-child(1) img{
			-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .7s;
}

	.open .top_img > div.top_img01  > div:nth-child(2) img{
	-webkit-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-moz-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-ms-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	-o-transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1) .4s;
	}
	
	
	.main_copy {
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	
	.top_img > div.main_copy{
		display:block;
	}
	
	
	.main_copy p {
		display: block;
		width: 100%;
		padding:0 20px;
	}
	
	
	
	.c_sec_top {
		display: block;
	}
	
	
	.c_sec01 {
		width: 100%;
		padding-left: 25px;
	}
	
	.c_sec01_subimg {
		width: 36%;
		top: 10%;
	}
	
	
	
	.c_sec01_point {
		padding: 15px;
	}
	.c_sec01_point p {
		font-size: 7pt;
	}
	
	.c_sec01_point span {
		width: 8px;
	}
	
	
	
	.c_sec02 {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		padding: 0 25px;
		align-items: center;
	}
	
	
	.c_sec02_img{
		width:45%;
	}
	
	
	.c_sec02_detail {
		margin-top: 0px;
		width:45%;
	}
	
	.c_detail {
		width: 100%;
		margin: 30px auto 0;
		padding: 0 25px;
	}
	
	
	.c_detail p {
		font-size: 11px;
		line-height: 160%;
	}
	
	
	.c_sec02_detail .title p span {
		font-size: 13px;
	}
	
	
	
}