@charset "utf-8";
/* CSS Document */

/*全体*/
body {
	width: 100%;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', meiryo, sans-serif, -apple-system, BlinkMacSystemFont, 'Helvetica Neue';
	color: #2d6086;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

a {
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

.float-l {
	float: left
}

.float-r {
	float: right;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.flexbox {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.sp {
	display: none;
}

/* ヘッダー */
header {
	height: 70vh;
	min-height: 600px;
	background: linear-gradient(rgba(45, 96, 134, .6), rgba(45, 96, 134, .8)), url("../images/main-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

h1 {
	text-align: center;
}

h1 img {
	width: 60vw;
	max-width: 800px;
	margin-left: -50px;
}

/* sec1 */
.sec1 {
	margin-bottom: 50px;
}

.number {
	font-family: 'Jost', sans-serif;
	color: #2d6086;
	font-size: 120px;
	font-weight: 600;
	position: absolute;
	right: 15px;
	bottom: 0;
	line-height: 1;
}

.box1 {
	border: solid 20px #2d6086;
	text-align: center;
	position: relative;
}

h2 {
	font-size: 42px;
	font-weight: 700;
	/*padding: 100px 0;*/
	padding: 40px 0;
}

.box2 {
	position: relative;
	background-color: #2d6086;
	color: #fff;
	text-align: center;
	padding: 60px 0 20px;
}

.box2:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 50%;
	/*border: 15px solid transparent;
	border-top: 15px solid #2d6086;*/
	width: 0;
	height: 0;
}

h3 {
	font-size: 38px;
	font-weight: 600;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}

.text1 {
	font-size: 18px;
	margin-top: 10px;
}
.text1f {
	color: #fff;
	text-align: center;
	font-size: 18px;
}
.text1fb {
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}
.text1lb {
	text-align: left;
	font-size: 22px;
	font-weight: 600;
	margin-left: 390px;
}
.text1l {
	text-align: left;
	font-size: 18px;
	margin-left: 410px;
}

.text1y {
	text-align: center;
	font-size: 20px;
	margin-top: 20px;
	color: #ffff00;
}
.text1p {
	text-align: center;
	font-size: 20px;
	margin-top: 0px;
	color: #ff69b4;
}
.text1p30 {
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	margin-top: 0px;
	color: #ff69b4;
}

.text1 span {
	font-size: 20px;
	color: #2d6086;
	/*background-color: #fdf100;*/
	font-weight: 600;
	padding: 0 2px;
	margin: 0 2px;
}

.text2 {
	text-align: center;
	padding: 20px 3%;
	font-size: 30px;
	font-weight: 600;
}

.text2y {
	text-align: center;
	padding: 5px 3%;
	font-size: 20px;
	color: #ffff00;
}
.text2yb {
	text-align: center;
	padding: 5px 3%;
	font-size: 30px;
	font-weight: 600;
	color: #ffff00;
}
.text2yb20 {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: #ffff00;
}

/* sec2 */
.underline {
	background: -webkit-linear-gradient(transparent 50%, #fbf002 0%);
	background: -o-linear-gradient(transparent 50%, #fbf002 0%);
	background: linear-gradient(transparent 50%, #fbf002 0%);
	padding: 0 3px 2px 3px;
	font-weight: 600;
}

.text3 {
	color: #000;
	text-align: left;
	font-size: 20px;
	margin-left: 60px;
	margin-top: 30px;
	margin-bottom: 30px;
}

ol {
	padding: 0 3%;
}

.ol1 {
	max-width: 810px;
	margin: 30px auto 80px;
}

ol li {
	color: #000;
	font-size: 22px;
	border-bottom: solid 1px #ccc;
}

ol li:last-child {
	border: none;
}

ol li span {
	font-family: 'Jost', sans-serif;
	color: #2d6086;
	font-size: 32px;
	font-weight: 700;
	margin-right: 10px;
}

.ol2 {
	max-width: 600px;
	margin: 30px auto;
}

.ol2 li {
	font-size: 30px;
	font-weight: 700;
	color: #2d6086;
}

.ol2 li span {
	font-size: 40px;
}

.box3 {
	border: solid 40px #4a7195
}

/* sec3 */
.box4 {
	background-image: url("../images/back1.png");
	background-size: 100% 100%;
	position: relative;
	padding: 30px 3% 50px;
	margin-bottom: 50px;
}

.text4 {
	color: #fff;
	font-size: 34px;
	margin-bottom: 80px;
	position: relative;
	z-index: 1;
	padding-left: 31vw;
	line-height: 1.5;
}

.text5 {
	color: #fff;
	font-size: 34px;
	position: relative;
	z-index: 1;
	padding-left: 31vw;
	line-height: 1.5;
}

.number2 {
	position: absolute;
	color: #6486a4;
	font-family: 'Jost', sans-serif;
	font-size: 200px;
	top: 0;
	left: 20px;
	line-height: 1;
	font-weight: 500;
}

.number3 {
	position: absolute;
	color: #6486a4;
	font-family: 'Jost', sans-serif;
	font-size: 200px;
	bottom: 0;
	right: 20px;
	line-height: 1;
	font-weight: 500;
}

.sec3 h2 {
	position: relative;
}

.number4 {
	position: absolute;
	color: #6486a4;
	font-family: 'Jost', sans-serif;
	font-size: 120px;
	bottom: -36px;
	left: 20px;
	line-height: 1;
	font-weight: 500;
	z-index: -1;
}

.box5 {
	position: relative;
	background-color: #4a7195;
	color: #fff;
	text-align: center;
	padding: 40px 0 50px;
}

.box5:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 50%;
	border: 15px solid transparent;
	border-top: 15px solid #2d6086;
	width: 0;
	height: 0;
}

.sec3 .ol1 {
	max-width: 600px;
}

/* sec4 */
.sec4 .ol1 {
	max-width: 880px;
}

/* sec5 */
.sec5 {
	background: linear-gradient(rgba(45, 96, 134, .8), rgba(45, 96, 134, .8)), url("../images/main-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	color: #fff;
	padding: 60px 0;
}

.sec5 h2 {
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	line-height: 1.5;
	padding: 0;
	margin-bottom: 40px;
}

.btn1 {
	text-align: center;
}

.btn1 a {
	background-color: #fff;
	color: #2d6086;
	font-size: 24px;
	font-weight: 800;
	padding: 10px 70px 10px 40px;
	border-radius: 10px;
	border-bottom: solid 5px #9ab1c0;
	display: inline-block;
	background-image: url("../images/arrow.svg");
	background-repeat: no-repeat;
	background-position: 93% 50%;
	-webkit-background-size: 25px auto;
	background-size: 25px auto;
}

.btn1 a:hover {
	border: none;
	margin-top: 5px;
}

/* フッター */
footer .inner {
	padding: 50px 3%;
}

.logo {
	text-align: center;
	margin-bottom: 40px;
}

footer table {
	color: #000;
	table-layout: fixed;
	width: 100%;
	max-width: 570px;
	margin: 0 auto;
}

footer th {
	width: 23%;
	font-weight: 600;
}

footer td {
	padding: 10px 0;
}

footer td a {
	color: #000;
}

.tel img {
	width: 33px;
	margin-right: 7px;
	position: relative;
	bottom: -5px;
}

.mail img {
	width: 30px;
	margin-right: 10px;
	position: relative;
	bottom: -5px;
}

.tel a,
.mail a {
	font-size: 26px;
	font-weight: 600;
	color: #2d6086;
}

.copyright {
	background-color: #2d6086;
	color: #fff;
	text-align: center;
	font-size: 14px;
	padding: 10px;
}

/*------------------------------------------------------------
ここからスマホ用
-------------------------------------------------------------*/
@media screen and (max-width:1000px) and (min-width:769px) {
	header {
		min-height: 500px;
	}
}

@media screen and (max-width:768px) {
	.sp {
		display: block;
	}

	img.sp {
		display: inline;
	}

	.pc {
		display: none;
	}

	/* SP:ヘッダー	*/
	header {
		height: 100vw;
		min-height: auto;
	}

	h1 img {
		width: 90%;
		margin-left: 0;
	}

	/* SP：コンテンツ */
	h2 {
		font-size: 6.5vw;
		padding: 12vw 0 18vw;
	}

	.number {
		font-size: 15vw;
		letter-spacing: -0.05em;
	}

	h3 {
		font-size: 6vw;
	}

	.text1 {
		font-size: 4vw;
		padding: 0 3%;
	}
	.text1f {
		color: #fff;
		font-size: 4vw;
		padding: 0 3%;
	}
	.text1fb {
		color: #fff;
		font-size: 4vw;
		padding: 0 3%;
	}
	.text1lb {
		text-align: left;
		font-size: 4vw;
		padding: 0 3%;
	 	margin-left: 5px;
	}
	.text1l {
		text-align: left;
		font-size: 4vw;
		padding: 0 3%;
		margin-left: 10px;
	}
	.text1y {
		color: #ffff00;
		text-align: center;
		font-size: 4vw;
		padding: 0 3%;
	}
	.text1p {
    color: #ff69b4;
    text-align: center;
		font-size: 4vw;
		padding: 0 3%;
	}
	.text1p30 {
    color: #ff69b4;
    text-align: center;
		font-size: 6vw;
		padding: 0 3%;
	}

	.text2 {
		font-size: 6vw;
		padding: 7vw 3%;
	}
	.text2y {
		color: #ffff00;
		font-size: 6vw;
		padding: 7vw 3%;
	}
	.text2yb {
		color: #ffff00;
		font-size: 6vw;
		padding: 7vw 3%;
	}
	.text2yb20 {
		color: #ffff00;
		font-size: 6vw;
		padding: 7vw 3%;
	}

	.text3 {
		margin-left: 5px;
		font-size: 4.2vw;
		padding: 0 3%;
	}

	ol li {
		font-size: 4.2vw;
		text-indent: -2.3em;
		padding-left: 2.3em;
		line-height: 1.5;
		padding-bottom: 10px;
	}

	ol li span {
		font-size: 6vw;
	}

	.box3 {
		border: solid 25px #4a7195;
	}

	.ol2 {
		margin: 0;
		padding: 10px 3%;
	}

	.ol2 li {
		font-size: 18px;
		text-indent: -2em;
		padding-left: 2em;
	}

	.ol2 li span {
		font-size: 26px;
	}

	.box4 {
		padding: 10vw 3%;
	}

	.text4 {
		margin-bottom: 15vw;
		font-size: 6vw;
		padding-left: 10vw;
	}

	.text5 {
		font-size: 6vw;
		padding-left: 10vw;
	}

	.number2,
	.number3 {
		font-size: 26vw;
	}

	.number4 {
		font-size: 20vw;
		bottom: -2vw;
		z-index: -1;
	}

	.sec3 .box2 .number4 {
		bottom: -7vw;
	}

	.sec5 h2 {
		margin-bottom: 10vw;
	}

	.btn1 a {
		line-height: 1.5;
		font-size: 5vw;
	}

	.box2:after {
		top: 99%;
		left: 46vw;
		border: 4vw solid transparent;
		border-top: 4vw solid #2d6086;
	}

	.box5:after {
		top: 99%;
		left: 46vw;
		border: 4vw solid transparent;
		border-top: 4vw solid #4a7195
	}

	/* SP：フッター */
	footer th {
		display: block;
		width: 100%;
		text-align: center;
	}

	footer td {
		display: block;
		width: 100%;
		padding: 10px 0 30px;
		text-align: center;
	}

	.tel,
	.mail {
		text-align: center;
	}

}