@charset "utf-8";

/*=====================================================
COMMON-LAYOUT
======================================================*/


/*sec01*/

.sec01{
	padding-bottom: 60px;
	background-image: url(../images/common/secline.png);
	background-repeat: repeat-x;
	background-position: center bottom;
}


.sec01 .box{
/*	background-color: #f0e6d2;*/
}

.sec01 .box{
	padding: 45px 0px 50px;
}

.sec01 .box .po{
	position: relative;
}

.sec01 .box .ol_01{
	position: relative;
	z-index: 1;
	width: 95%;
}

.sec01 .box .ol_02{
	position: absolute;
	z-index: 10;
	top: 23%;
	right: -9.4%;
	width: 56.9%;
}
/*sec01*/




/*sec02*/
.sec02{
	padding-top: 60px;
	padding-bottom: 60px;
	background-image: url(../images/common/secline.png);
	background-repeat: repeat-x;
	background-position: center bottom;
}
.sec02 .box .lists {
	margin: 0 -20px;
}
.sec02 .box .lists .list{
	width: 50%;
}
.sec02 .box .lists .list:nth-child(1){
	float: left;
}
.sec02 .box .lists .list:nth-child(2){
	float: right;
}

/*sec02*/




/*sec03*/
#s03{
	overflow: hidden;
}
.sec03 {
	padding-top: 60px;
	padding-bottom: 60px;
}
.sec03 .in_conw.kline{
	background-image: url(../images/common/secline.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	padding-bottom: 60px;
}

.sec03 .s01 {
	position: relative;
	padding-bottom: 20px;
	
}
.sec03 .s01:before {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	background-image: url(../images/creation/img19.png);
	background-size: cover;
	opacity: 0.5;

}

.sec03 .s01 .ins_wrap{
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1140px;
	position: relative;
}
.sec03 .s01 .ins_wrap .ss01{
	margin: 0 auto;
	width: 77.54545454545455%;
}
.sec03 .s01 .ins_wrap .icon01{
	position: absolute;
	width: 16.36363636363636%;
	top: 15%;
	left: -4%;
}
.sec03 .s01 .ins_wrap .icon02{
	position: absolute;
	width: 23.45454545454545%;
	bottom: 0;
	right: -9.5%;
}






.sec03 .s03 .area01{
	position: relative;
}

.sec03 .s03 .area01:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	background-image: url(../images/creation/bg24.png);
	background-position: center bottom;
	
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.sec03 .s03 .area01 p{
	padding: 11% 0 5%;
}

.sec03 .s03 .area02{
	position: relative;
}

.sec03 .s03 .area02:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	background-image: url(../images/creation/bg25.png);
	background-position: center bottom;
	
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.sec03 .s03 .area02 p{
	padding: 10.9% 0 5.8%;
}




/*sec03*/





/*sec04*/

.sec04 {
	padding-top: 60px;
	padding-bottom: 60px;
	background-repeat: repeat-x;
	background-position: center bottom;
	position: relative;
}

.sec04{
}
.sec04:before {
    width: 400%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: -100%;
    right: -100%;
    content: "";
    display: block;
	background-color: #d3edfb;
	
	opacity: 0.46;
}










.sec04 .box01{
	position: relative;
	margin-bottom: 45px;
}
.sec04 .box01 .sli01{
	margin-bottom: 13%;
}

.sec04 .box01 .sli02{
}

.sec04 .box01 .ol0001{
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	max-width: 20%;
}






.sec04 ul {
	max-width: 1000px;
	margin: 0 auto;
}
.sec04 ul li:nth-child(1){
	width: 49.227273%;
	float: left;
	margin-bottom: 2%;
}

.sec04 ul li:nth-child(2){
	width: 49.5%;
	float: right;
	margin-bottom: 2%;
}

.sec04 ul li:nth-child(3){
	width: 48.954545%;
	float: left;
	clear: both;
}

.sec04 ul li:nth-child(4){
	width: 49.836364%;
	float: right;
}


/*sec04*/





@media screen and (max-width: 1340px){
	.sec01 .box .ol_02 {
		top: 24%;
		right: 0.6%;
		width: 46.9%;
	}
}


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

.sec04:before {
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
}

}


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


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



@media screen and (max-width: 920px){
	.sec04 .box01 .sli01{
		margin-bottom: 25px;
	}
	.sec04 .box01 .ol0001{
		display: none;
	}
	.sec04 .box01 .sli02 .vpc{
		display: none;
	}
	.sec04 .box01 .sli02 .vsp{
		display: block;
	}
}



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



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




@media screen and (max-width: 750px){
	.sec01 .box .s01 {
		padding: 0 30px;
	}
	.sec01 .box .s02 {
		font-size: 18px;
	}
	
	.sec01 .box .s03 {
		font-size: 14px;
	}
	
	.sec02 .box .lists .list .s03 {
		font-size: 14px;
	}
	
	.sec03 > .s01 {
		font-size: 14px;
	}

	
	
	.sec01 .box {
	padding: 15px 0px 20px;
	}
	
	.sec01 .box .ol_01 {
		width: 100%;
	}
	
	.sec01 .box .ol_02 {
		top: auto;
		right: 12.6%;
		bottom: 9%;
		width: 74.9%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	.sec04 .box .s01 {
		font-size: 14px;
	}
	
	.sec04 ul li {
		font-size: 16px;
		text-align: center;
	}
	
	
	.sec04 ul li:nth-child(1){
		width: 100%;
		float: none;
		margin-bottom: 2%;
	}

	.sec04 ul li:nth-child(2){
		width: 100%;
		float: none;
		margin-bottom: 2%;
	}

	.sec04 ul li:nth-child(3){
		width: 100%;
		float: none;
		margin-bottom: 2%;
	}

	.sec04 ul li:nth-child(4){
		width: 100%;
		float: none;
	}
	
	
}


@media screen and (max-width: 700px){
	.sec04 .box .img_icon {
		bottom: 0;
	}
}


@media screen and (max-width: 650px){
	
	.sec01 {
		padding-bottom: 40px;
	}
	.sec02 {
		padding-top: 30px;
		padding-bottom: 40px;
	}
	.sec03 {
		padding-top: 30px;
		padding-bottom: 40px;
	}
	.sec04 {
		padding-top: 30px;
		padding-bottom: 40px;
	}
	
	
	
	
	.sec02 .box{
		max-width: 500px;
		margin: 0 auto;
	}
	.sec02 .box .lists .list {
		width: 100%;
		padding: 15px;
	}
	
	.sec02 .box .lists .list:nth-child(1) {
		margin-bottom: 20px;
	}
	
	
}


@media screen and (max-width: 500px){
	.sec04 .box .s01 {
		padding: 0;
	}
	
	.sec04 .box .img_icon {
		position: static;
		margin: 0 auto;
		width: 22%;
		margin-top: 20px;
	}
}