@charset "utf-8";

section {
	position: relative;
	width: 100%;
	padding: 80px 20px;
}

section.upper {
	padding-top: 60px;
}

section.lower {
	padding-bottom: 60px;
}

section.upper::before{
	content: "";
	position: absolute;
	top: -9.8vw;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;

	border-width: 10vw 100vw 0 0;
	border-color: transparent #FFFFFF transparent transparent;
}

section.lower::after{
	content: "";
	position: absolute;
	bottom: -9.8vw;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;

	border-width: 0 0 10vw 100vw ;
	border-color: transparent transparent transparent #FFFFFF;
}
/* ------------------------------------------------ */
.leadBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.leadBox dl {
	width: 46.875%;
	padding: 3.645%;
	background-color: rgba(255,255,255,.7);
	border-radius: 10px;
	color: #304779;
}

.leadBox dt {
	position: relative;
	margin: 0 0 8px;
	padding-bottom: calc(1.2em + 16px);
	text-align: center;
	font-size: 1.8rem;
}

.leadBox dt strong {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
}

.leadBox dt img {
	width: 100%;
	max-width: 200px;
	height: auto;
}

.leadBox dd.txt {
	margin: 34px 0 0;
	line-height: 1.8;
	font-size: 1.4rem;
}
/* ------------------------------------------------ */
.voice {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.voice li {
	width: 22.917%;
}

.voice .comment {
	position: relative;
	margin-bottom: 1.5em;
}

.comment::after,.comment::before{
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 50%;
}
.comment::after{
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 14px;
	border-bottom-width: 14px;
	border-left-width: 8px;
	border-right-width: 8px;
	margin-left: -6px;
	border-top-color: #304779;
}
.comment::before{
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 16px;
	border-bottom-width: 16px;
	border-left-width: 10px;
	border-right-width: 10px;
	margin-left: -8px;
	border-top-color: #FFFFFF;
}

.comment p {
	position: relative;
	padding: 0 0 .5em;
	text-align: center;
	font-weight: bold;
	line-height: 1.8;
}

.comment p::after {
	content: "";
	display: block;
	width: 90%;
	height: 1px;
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}

.voice img {
	border-radius: 50%;
}

/* ------------------------------------------------ */
.imgBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
}
/* ------------------------------------------------ */
section#sec01 {
}

.about {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width : 900px;
	margin: 0 auto 72px;
}

.about > figure {
	width: 44.445%;
}

.about > div {
	width: 44.445%;
}

.about h2 {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 20px 0;
	text-align: left;
}

.about h2 + p {
	line-height: 1.8;
	font-weight: bold;
	color: #304779;
}

/* ------------------------------------------------ */
section#sec02 {
	margin-bottom: calc(20vw + 60px);
	background-color: #304779;
	color: #ffffff;
}

section#sec02.lower::after{
	border-color: transparent transparent transparent #304779;
}

section#sec02 h2 {
	color: #FFFFFF;
}
/* ------------------------------------------------ */
section#sec03 {
	background-color: #ffffff;
	color: #000000;
}

section#sec03 h2 span {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 0 auto 20px;
}

.melit {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

.melit .item {
	width: 45.162%;
	margin-bottom: 14.6%;
}
.melit .item:last-of-type {
	margin-bottom: 0;
}

.item dl {
	position: relative;
	width:100%;
	max-width: 200px;
	margin: 0 auto 30px;
	line-height: 1.8;
}

.item dl::after,.item dl::before{
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 50%;
}
.item dl::after{
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 14px;
	border-bottom-width: 14px;
	border-left-width: 8px;
	border-right-width: 8px;
	margin-left: -6px;
	border-top-color: #FFFFFF;
}
.item dl::before{
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 16px;
	border-bottom-width: 16px;
	border-left-width: 10px;
	border-right-width: 10px;
	margin-left: -8px;
	border-top-color: #A6A6A6;
}

.item dt {
	position: relative;
	margin: 0;
	padding: .5em;
	background-color: #304779;
	border-radius: 10px;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
}

.item dd {
	position: relative;
	padding: .75em 0;
	text-align: center;
	font-weight: bold;
}

.item dd::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #A6A6A6;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}

/* ------------------------------------------------ */
section#sec04 {
}
/* ------------------------------------------------ */
section#sec05 {
	margin-bottom: calc(20vw + 60px);
	background-color: #ffffff;
	color: #000000;
}

section#sec05 figure {
	width: 100%;
	max-width: 572px;
	margin: 0 auto 120px;
}

section#sec05 figure figcaption {
	display: block;
	margin-top: 60px;
	line-height: 1.8;
	color: #304779;
}

section#sec05 .imgBox li:nth-of-type(1) {
	width: 46.576%;
}
section#sec05 .imgBox li:nth-of-type(2) {
	width: 50.137%;
}
/* ------------------------------------------------ */
section#sec06 {
	margin-bottom: calc(20vw + 60px);
	background-color: #ffffff;
	color: #000000;
}

section#sec06 figure {
	width: 100%;
	max-width: 710px;
	margin: 0 auto;
	margin: 0 auto 120px;
}

section#sec06 figure figcaption {
	display: block;
	margin-top: 60px;
	line-height: 1.8;
	text-align: center;
	color: #304779;
}

section#sec06 .imgBox {
	max-width: 690px;
}

section#sec06 .imgBox li:nth-of-type(1) {
	width: 42.609%;
}
section#sec06 .imgBox li:nth-of-type(2) {
	width: 45.073%;
}
/* ------------------------------------------------ */
section#sec07 {
	background-color: #ffffff;
	color: #000000;
}

section#sec07 .voice {
	margin-bottom: 120px;
}

section#sec07 .voice .comment p {
	min-height: 5.8em;
}

section#sec07 .comment::after{
	border-top-color: #FFFFFF;
}
section#sec07 .comment::before{
	border-top-color: #000000;
}

section#sec07 .comment p::after {
	background-color: #000000;
	position: absolute;
}

.msg {
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	text-align: center;
}

.msg p {
	display: inline-block;
	text-align: left;
	line-height: 1.8;
	font-weight: bold;
	font-size: 2.0rem;
	color: #304779;
}

/* ------------------------------------------------ */
section#sec08 {
}
/* ------------------------------------------------ */

/* ================================================ */

@media (max-width: 767px) {
section {
	padding: 10.42% 20px;
}

section.upper {
	padding-top: 7.8%;
}

section.lower {
	padding-bottom: 7.8%;
}

/* ------------------------------------------------ */
.voice {
	flex-flow: row wrap;
	max-width: 620px;
}

.voice li {
	width: 44.394%;
}

.voice li:nth-of-type(n+3) {
	margin-top: 11.212%;
}

}

/* ================================================ */

@media (max-width: 479px) {

.leadBox {
	display: block;
}

.leadBox dl {
	width: 100%;
	padding: 5%;
}

.leadBox dl:first-of-type {
	margin-bottom: 7.8%;
}

/* ------------------------------------------------ */
section#sec07 .voice {
	margin-bottom: 15.6%;
}

.msg p {
	font-size: 1.8rem;
}


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

}