@charset "UTF-8";
/*----------------------------------------

	index CSS

	- common

-----------------------------------------*/

/*----------------------------------------
	#sec01
-----------------------------------------*/

#sec01 {
	display: table;
	background-repeat: no-repeat;
	background-position: 15% top;
	background-size: cover;
	width: 100%;
}
#sec01 .title {
	margin: 74% 4.4% 14.8% 39%;
}
#sec01 .title img {
	width: 100%;
}

/* tb  835 - # */
@media screen and (min-width:835px) {
	#sec01 {
		height: 750px;
		background-size: cover;
		background-position: 40% -14px;
	}
	#sec01 .inner {
		display: table-cell;
		position: relative;
		margin: 0 auto;
		padding: 0 40px;
		vertical-align: middle
	}
	#sec01 .inner .title_wrap {
		max-width: 1210px;
		margin: 55px auto 0;
	}
	#sec01 .inner .title_wrap_inner {
		text-align: right;
		padding: 0;
	}
	#sec01 .title {
		margin: 0;
	}
	#sec01 .title img {
		width: 592px;
	}
}

@media screen and (min-width:1600px) {
	#sec01 {
		height: 1000px;
	}
}

@media screen and (min-width:835px) and ( max-width:1210px) {
	#sec01 {
		height: 550px;
	}
	#sec01 .inner .title_wrap {
		margin: 4.5% auto 0;
	}
	#sec01 .title img {
		width: 49%;
	}
}

/*----------------------------------------
	#sec01_ex
-----------------------------------------*/

#sec01_ex {
	padding: 12% 0 13.3%;
	text-align: center;
}
#sec01_ex h3 {
	line-height: 1.2;
	padding: 0 0 8%;
}

@media screen and (min-width:835px) {
	#sec01_ex {
		padding: 90px 0 100px;
	}
	#sec01_ex h3 {
		padding: 0 0 37px;
	}
}


/*----------------------------------------
	#sec02
-----------------------------------------*/

#sec02 {
	background: url(../img/sec02_pic01@sp.jpg) no-repeat;
	background-size: cover;
	width: 100%;
	padding-bottom: 9.3%;
}
#sec02 .inner .title_wrap_inner {
	text-align: center;
}
#sec02 .title {
	padding: 66% 0 4.8%;
}
#sec02 .title img {
	width: 55.4%;
}
#sec02 .title + .txt {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 5.3%;
}

/* tb  835 - # */
@media screen and (min-width:835px) {
	#sec02 {
		background: url(../img/sec02_pic01.jpg) no-repeat;
		background-size: cover;
		background-position: bottom left;
		height: 850px;
		padding: 0;
	}
	#sec02 .outer {
		background: url(../img/sec02_pic02.png) no-repeat;
		background-size: 695px auto;
		background-position: right -116px;
		max-width: 1180px;
		margin: 0 auto;
		position: relative;
	}
	#sec02 .title_wrap_outer {
		display: flex;
		justify-content: left;
		align-items: center;
		height: 850px;
		width: 590px;
	}
	#sec02 .inner {
		position: relative;
		padding-left: 70px;
	}
	#sec02 .inner .title_wrap {
		text-align: left;
	}
	#sec02 .inner .title_wrap_inner {
		text-align: left;
		padding: 0;
	}
	#sec02 .title {
		padding: 0 0 25px;
	}
	#sec02 .title img {
		width: 416px;
	}
	#sec02 .title + .txt {
		width: 430px;
		margin: 0;
		padding-bottom: 50px;
	}
	#sec02 .btn_more a {
    margin: inherit;
	}
}

@media screen and (min-width:835px) and ( max-width:1100px) {
	#sec02 {
		height: 680px;
	}
	#sec02 .outer {
		background-size: auto 930px;
		background-position: right -90px;
	}
	#sec02 .title_wrap_outer {
		height: 680px;
	}
}


/*----------------------------------------
	#sec03
-----------------------------------------*/
#sec03 {
	padding: 10% 0 0;
}
#sec03 .title {
	position: relative;
	text-align: center;
	line-height: 1.2;
	padding-bottom: 10px;
}
#sec03 .title:after {
	content: '';
	position: absolute;
	bottom: -10%;
	left: 50%;
	width: 32px;
	margin: 0 0 0 -16px;
	border-bottom: 5px solid #00a6cf;
}
#sec03 .inner {
	padding: 12% 5.3% 15%;
}
#sec03 .inner > div > article {
	position: relative;
	float: left;
	width: 47%;
	box-sizing: content-box;
}
#sec03 .inner > div > article a {
	display: block;
}
#sec03 .inner > div > article:nth-child(even) {
	margin-left: 3%;
}
#sec03 .inner > div > article:nth-child(odd) {
	margin-right: 3%;
}
#sec03 .inner > div > article > a > div {
	padding-bottom: 15.8%;
}
#sec03 .inner > div > article > a > .pic {
	padding-bottom: 4.7%;
}
#sec03 .inner > div > article > a > .title_cate {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 6px;
	color: #ffffff;
}
#sec03 .inner > div > article > a > .title_cate.video {
	background: #99a1da;
}
#sec03 .inner > div > article > a > .title_cate.interview {
	background: #8bc04c;
}
#sec03 .inner > div > article > a .title_s {
	padding-bottom: 3%;
}
#sec03 .inner > div > article > a .name {
	display: none;
}

/* tb  835 - # */
@media screen and (min-width:835px) {
	#sec03 {
		padding: 80px 0 0;
	}
	#sec03 .title {
		margin-bottom: 74px;
	}
	#sec03 .title:after {
		bottom: -14px;
		width: 44px;
		margin: 0 0 0 -22px;
		border-bottom: 5px solid #00a6cf;
	}
	#sec03 .inner {
		max-width: 1120px;
		margin: 0 auto;
		padding: 0 40px;
	}
	#sec03 .inner > div {
		margin: 0;
		padding: 0 0 10px 0;
	}
	#sec03 .inner > div > article {
		width: calc(320 / 1040 * 100%);
		padding: 0 3.8% 0 0;
	}
	#sec03 .inner > div > article:nth-child(even) {
		margin-left: 0;
	}
	#sec03 .inner > div > article:nth-child(odd) {
		margin-right: 0;
	}
	#sec03 .inner > div > article:nth-child(3n) {
		padding: 0;
	}
	#sec03 .inner > div > article > a > div {
		padding-bottom: 50px;
	}
	#sec03 .inner > div > article > a > .pic {
		padding-bottom: 20px;
	}
	#sec03 .inner > div > article > a > .title_cate {
		position: absolute;
		top: 0;
		left: 0;
		padding: 3px 16px;
		color: #ffffff;
	}
	#sec03 .inner > div > article > a .title_s {
		padding-bottom: 5px;
	}
}

@media screen and (min-width:1140px) {
	#sec03 .inner > div > article {
		width: 320px;
		padding: 0 40px 0 0;
		box-sizing: content-box;
	}
}


@media screen and (min-width:835px) {
.footer {
	margin: 195px 0 0;
}
}