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

	+ content
		- pageTitle
		- innerBox
		- box01
		- box02
		- box03
		- box04

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

/*----------------------------------------
	pageTitle
-----------------------------------------*/

#pageTitle {
	height: 300px;
	background: transparent url(../../img/c_example_tit02.jpg) no-repeat center center;
	background-size: cover;
}

.pageTitle_inner {
	width: 1100px;
	padding: 60px 0 0;
	margin: 0 auto;
	text-align: right;
}

.pageTitle_inner>span {
	display: block;
	letter-spacing: 0.2rem;
}

.pageTitle_inner>span.pageTitle_eng {
	color: #242c3e;
	letter-spacing: -0.3rem;
	opacity: .3;
}

@media screen and (max-width: 767px) {
	#pageTitle {
		height: 29.33vw;
		background: transparent url(../../img/c_example_tit02_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.pageTitle_inner {
		width: 89.3vw;
		padding: 11.1vw 0 0;
	}

	.pageTitle_inner>span {
		margin-right: -3px;
		letter-spacing: 0.3rem;
	}

	.pageTitle_inner>span.pageTitle_eng {
		margin: 1px -1px 0 0;
		color: #242c3e;
		letter-spacing: -0.1rem;
		opacity: .4;
	}
}

/*----------------------------------------
	innerBox
-----------------------------------------*/
#innerBox {
	margin-top: -120px;
}

@media screen and (max-width: 767px) {
	#innerBox {
		margin-top: 0;
		padding: 0;
	}
}

/*----------------------------------------
	breadcrumb
-----------------------------------------*/
#breadcrumb {
	border-bottom: 1px solid #fff;
}

/*----------------------------------------
	box01
-----------------------------------------*/
#box01>#box01_01 {
	margin-bottom: 30px;
	background: linear-gradient(to left, #276aac, #0086cd);
}

#box01>#box01_01>div {
	display: flex;
}

#box01>#box01_01>div>figure {
	padding: 20px 40px 20px 20px;
}

#box01>#box01_01>div>div {
	width: 620px;
	padding-top: 30px;
}

#box01>#box01_01>div>div>h1 {
	margin-bottom: 50px;
}

#box01>#box01_01>div>div>h1>span {
	display: block;
}

#box01>#box01_01>div>div>h1>span:first-child {
	padding-bottom: 10px;
	border-bottom: 4px solid #93d5f4;
}

#box01>#box01_01>div>div>h1>span:nth-child(2) {
	padding-top: 5px;
}

#box01>p.font18_14 {
	padding: 23px 23px 24px;
	border: 1px solid #0086cd;
	box-sizing: border-box;
	text-align: center;
}

@media (max-width: 767px) {
	#box01 {
		width: 100%;
		padding-top: 40px;
	}

	#box01>#box01_01 {
		margin-bottom: 32px;
	}

	#box01>#box01_01>div {
		display: inherit;
	}

	#box01>#box01_01>div>figure {
		margin: 0 -1.3vw;
		padding: 20px 0;
	}

	#box01>#box01_01>div>div {
		width: 100%;
		padding: 0 0 28px;
	}

	#box01>#box01_01>div>div>h1 {
		margin-bottom: 24px;
	}

	#box01>#box01_01>div>div>h1>span:first-child {
		padding-bottom: 10px;
		border-bottom: 2px solid #93d5f4;
	}

	#box01>p.font18_14 {
		padding: 15px 19px 13px;
		text-align: left;
		line-height: 1.75;
	}
}

/*----------------------------------------
	box02
-----------------------------------------*/
#box02 {
	margin-top: 50px;
}

#box02>div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 29px 0 30px;
}

#box02>div figure {
	height: 452px;
	width: 540px;
}

#box02>div p {
	width: 502px;
	margin-top: -5px;
}

@media (max-width: 767px) {
	#box02>div {
		padding: 10px 0 15px;
	}

	#box02>div figure {
		height: auto;
		width: 100%;
	}

	#box02>div p {
		width: 100%;
		margin-top: 15px;
		letter-spacing: -0.01em;
	}
}

/*----------------------------------------
	box03
-----------------------------------------*/
#box03 {
	margin-top: 27px;
}

#box03>p {
	padding-bottom: 54px;
}

#box03>div {
	padding-bottom: 35px;
	background: linear-gradient(to left, #93d5f4, #f2f2f2);
}

#box03>div>.centering01>h1 {
	padding: 36px 0;
	text-align: center;
	letter-spacing: 0.06em;
}

#box03>div>.centering01>div {
	width: 100%;
}

#box03>div>.centering01>div>p {
	float: left;
	position: relative;
	width: 750px;
	padding: 23px 32px 25px 30px;
	border-radius: 9px;
	background: #fff;
	box-sizing: border-box;
}

#box03>div>.centering01>div>p::after {
	content: '';
	display: block;
	position: absolute;
	right: -20px;
	bottom: 29px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #fff;
}

#box03>div>.centering01>div>figure {
	float: right;
	width: 234px;
	margin: -58px 60px 0 0;
}

#box03>div>.centering01>div>figure figcaption {
	margin-top: 7px;
	text-align: center;
}

@media (max-width: 767px) {
	#box03>div {
		padding-bottom: 30px;
	}

	#box03>div>.centering01>h1 {
		padding: 26px 0 25px;
	}

	#box03>div>.centering01>div>p {
		float: none;
		width: 100%;
		padding: 15px 20px 14px 20px;
		line-height: 1.75;
	}

	#box03>div>.centering01>div>p::after {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		bottom: -20px;
		left: 20px;
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 20px 10px 0 10px;
		border-color: #fff transparent transparent transparent;
	}

	#box03>div>.centering01>div>figure {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row-reverse;
		float: none;
		width: 100%;
		margin: 11px auto 0;
	}

	#box03>div>.centering01>div>figure p {
		height: auto;
		width: 35%;
	}

	#box03>div>.centering01>div>figure figcaption {
		width: auto;
		margin-top: 12px;
		padding-right: 1.5em;
		text-align: right;
	}
}

/*----------------------------------------
	box04
-----------------------------------------*/
#box04>h1 {
	margin-bottom: 23px;
	text-align: center;
}

#box04>#box04_01 {
	background: linear-gradient(to left, #276aac, #0086cd);
}

#box04>#box04_01>.centering01 {
	display: flex;
	justify-content: space-between;
	padding: 30px 0;
}

#box04>#box04_01>.centering01>figure {
	width: 300px;
	/* height: 240px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #fff; */
}

#box04>#box04_01>.centering01>div {
	width: 760px;
}

#box04>#box04_01>.centering01>div>h1 {
	margin-bottom: 25px;
	padding: 4px 0 5px;
	border-bottom: 1px solid #fff;
}

#box04>#box04_01>.centering01>div>p:first-of-type {
	margin-bottom: 25px;
	letter-spacing: 0.06em;
}

#box04>#box04_01>.centering01>div>p:nth-of-type(2)>a.btn03 {
	width: 210px;
	height: 48px;
	background: #fff url(../../../img/c_arrow01.png) no-repeat right 10px center;
	background-size: 10px 16px;
}

.pc #box04>#box04_01>.centering01>div>p:nth-of-type(2)>a.btn03:hover {
	background-color: #93d5f4;
	color: #fff;
}

@media (max-width: 767px) {
	#box04>h1 {
		margin-bottom: 10px;
	}

	#box04>#box04_01>.centering01 {
		display: inherit;
		padding-top: 20px;
	}

	#box04>#box04_01>.centering01>figure {
		width: 100%;
		/* height: 61vw; */
	}

	#box04>#box04_01>.centering01>div {
		width: 100%;
	}

	#box04>#box04_01>.centering01>div>h1 {
		padding: 18px 0 8px;
		border-bottom: 1px solid #fff;
	}

	#box04>#box04_01>.centering01>div>p:nth-of-type(2)>a.btn03 {
		width: 220px;
		height: 50px;
		background-size: 9px 14px;
	}
}