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

	MAIN VISUAL

--------------------------------------------------*/
#mv {
	position: relative;
	height: 60rem;
	margin-top: 8rem;
	background: url("../img/mv/img01_pc.jpg") no-repeat top right / 1460px;
}
#mv .container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 114px;
	z-index: 1;
	width: 100%;
	max-width: 728px;
	height: 100%;
	background: linear-gradient(90deg, #072D5D 50%, transparent 100%);
}
#mv .content {
	position: absolute;
	left: 20px;
	bottom: 50%;
	transform: translate(0, 50%);
	width: 100%;
	max-width: 648px;
}
#mv .content .speech {
	position: relative;
	max-width: 459px;
	margin-bottom: 6.4rem;
	padding: 2.8rem 1.8rem 2rem;
	border-radius: 20px;
	background: #fff;
}
#mv .content .speech::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -34px;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-top: 35px solid #fff;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
}
#mv .content .speech p {text-align: center;}
#mv .content .speech p:nth-of-type(1) {margin-bottom: 1rem;font-size: 2.6rem;}
#mv .content .speech p:nth-of-type(2) {background: linear-gradient(transparent 55%, #FFDFF1 55%);color: #033575;font-size: 3.4rem;}
#mv .content .speech p span {font-size: 1.5em;}
#mv .content h1 {max-width: 90%;margin: 0 auto 3rem;}
#mv .content h1 svg {
	stroke-width: 1px;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: stroke 3s ease-in-out, fade 2s ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes stroke {
	0% {
	    stroke-dashoffset: 2000;
	    stroke: #fff;
	}
	100% {
	    stroke-dashoffset: 0;
	    stroke: #fff;
	}
}
@keyframes fade {
	0% {
	    fill: transparent;
	    stroke: #fff;
	}
	80% {
		fill: transparent;
		stroke: #fff;
	}
	100% {
	    fill: #fff;
	    stroke: #fff;
	}
}
#mv .content .border_box {margin-bottom: 5rem;}
#mv .content .border {position: relative;}
#mv .content .border::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
	width: 0;
	height: 1.5px;
	background: #fff;
	transition: all 2s;
}
#mv .content .border:nth-of-type(2)::before {top: 5px;}
#mv .content .border.isActive::before {width: 100%;}
#mv .content h2 {
	color: #C7D0DF;
	font-weight: 900;
	font-size: 3.5rem;
	text-align: center;
}
#mv figure.img1 {display: none;}
#mv figure.img2 {
	position: absolute;
	right: 10%;
	bottom: -188px;
	width: 100%;
	max-width: 480px;
}
@media only screen and ( max-width : 1024px ) {
	#mv {height: 88rem;margin-top: 7rem;background: url("../img/mv/img01_pc.jpg") no-repeat bottom / 1024px;}
	#mv .container {
		max-width: 100%;
		height: 60%;
		background: linear-gradient(180deg, #072D5D 0%, #072E60 85%, transparent 100%);
	}
	#mv .content {
		top: 2rem;
		left: 50%;
		bottom: inherit;
		transform: translate(-50%, 0);
	}
	#mv .content .speech {margin: 0 auto 3.5rem;}
	#mv figure.img1 {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#mv figure.img2 {bottom: -133px;max-width: 300px;}
}
@media only screen and ( max-width : 767px ) {
	#mv {height: 80rem;background: url(../img/mv/img01_sp.jpg) no-repeat 50% 169% / 767px;}
	#mv .content h2 {font-size: 4.6vw;}
	#mv .content .border_box {padding: 0 2rem;}
}
@media only screen and ( max-width : 480px ) {
	#mv {height: 55rem;background-size: 540px;}
	#mv .content .speech {max-width: 234px;padding: 1rem;}
	#mv .content .speech p:nth-of-type(1) {font-size: 1.2rem;}
	#mv .content .speech p:nth-of-type(2) {font-size: 1.6rem;}
	#mv figure.img2 {right: 5%;bottom: -95px;max-width: 200px;}
}
/*-------------------------------------------------

	ABOUT

--------------------------------------------------*/
#about .container1 {margin-bottom: 10rem;}
#about .container1 h3 {margin-bottom: 5.5rem;font-size: 3rem;text-align: center;}
#about .container1 h3 span {
	color: #033575;
	font-weight: 700;
	font-size: 1.33em;
	line-height: 1.4;
}
#about .container1 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 800px;
	margin: 0 auto 6rem;
	padding: 3rem 5rem;
	border-radius: 20px;
	background: #EEF1F9;
}
#about .container1 ul li img {width: auto;height: 212px;}
#about .container1 p {margin-bottom: 3rem;font-size: 3rem;text-align: center;}
#about .container1 p span {
	color: #033575;
	font-weight: 700;
	font-size: 1.6em;
	line-height: 1.4;
}
#about .container1 p img {display: block;max-width: 250px;margin: 4rem auto 0;}
#about .container1 figure {max-width: 820px;margin: 0 auto 4rem;}
#about .container1 h4 {
	font-weight: 700;
	font-size: 3rem;
	line-height: 2;
	text-align: center;
}
#about .container1 h4 span {font-size: 1.2em;}
/*-----02-----*/
#about .container2 .subttl {
	width: 100%;
	max-width: 500px;
	margin: 0 auto 3rem;
	padding: 2rem 1.8rem;
	font-weight: 700;
	font-size: 3rem;
}
#about .container2 .subttl::after {bottom: -29px;border-top: 31px solid #6E7AA2;}
#about .container2 .flexbox {flex-wrap: nowrap;align-items: flex-end;margin-bottom: 4rem;}
#about .container2 .leftbox .container {display: flex;}
#about .container2 .leftbox .txtbox {
	margin-bottom: 1rem;
	padding: 1.5rem 1rem;
	width: 250px;
	height: 240px;
	border-radius: 10px;
	background: #EEF1F9;
}
#about .container2 .leftbox .txtbox.under {height: 310px;}
#about .container2 .leftbox .txtbox.under ul{font-size: 1.4rem;list-style-type: disc;display: flex;flex-wrap: wrap;max-width: 200px;margin: 20px auto;}
#about .container2 .leftbox .txtbox.under ul li{margin-left: 30px;}
#about .container2 .txtbox h5 {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px dotted #2B488D;
	color: #2B488D;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}
#about .container2 .leftbox .txtbox dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 200px;
	margin: 0 auto;
}
#about .container2 .leftbox .txtbox dl dt {font-weight: 700;font-size: 1.6rem;}
#about .container2 .leftbox .txtbox dl dt span {color: #ff7d89;font-size: 2rem;}
#about .container2 .leftbox .txtbox dl dd {font-weight: 700;font-size: 2.4rem;}
#about .container2 .leftbox .txtbox dl dd span {font-size: 1.4em;}
#about .container2 .leftbox .txtbox span.small{font-size: 1.2rem; color: #777;font-weight: 400;line-height:1.5; margin-top: 5px;}
#about .container2 .leftbox .content:nth-of-type(2) .txtbox dl dd:nth-of-type(1) {background: linear-gradient(transparent 45%, #FFDFF1 45%);}
#about .container2 .leftbox .txtbox p {
	position: relative;
	margin-top: 2.5rem;
	padding: 1rem 5px;
	background: #6E7AA2;
	color: #fff;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
}
#about .container2 .leftbox .txtbox p::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%,0);
    width: 0;
    height: 0;
    border-right: 9px solid transparent;
    border-bottom: 16px solid #6E7AA2;
	border-left: 9px solid transparent;
}
#about .container2 .leftbox p span {font-size: 1.56em;}
#about .container2 h4 {
	margin-bottom: 1rem;
	color: #033575;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}

#about .container2 .rigthbox p.txt {background: #FFDFF1;}
#about .container2 p.txt span {font-size: 1.5em;}
#about .container2 figure {margin: 0 1rem;}
#about .container2 .rigthbox {max-width: 320px;}
#about .container2 .rigthbox .txtbox {
	margin-bottom: 1rem;
	padding: 1rem;
	background: #EEF1FB;
	border: 5px solid #9BAFD1;
	border-radius: 10px;
}
#about .container2 .rigthbox .txtbox h5 {font-size: 2.5rem;}
#about .container2 .rigthbox .txtbox p {
	margin-bottom: 7px;
	font-weight: 700;
	font-size: 2.2rem;
	text-align: center;
}
#about .container2 .rigthbox .txtbox h6 {
	margin-bottom: 1.5rem;
	color: #6E7AA2;
	font-weight: 700;
	font-size: 3rem;
	text-align: right;
}
#about .container2 .rigthbox .txtbox h6 span {font-size: 1.27em;}
#about .container2 .rigthbox .txtbox .boxmin {padding: 5px 1rem 1rem;background: #FFDFF1;}
#about .container2 .rigthbox .txtbox .boxmin h6 {margin-bottom: 0;color: #333;}
#about .container2 .bottombox {background: #EEF1FB;border-radius: 10px;}
#about .container2 .leftbox .bottombox {width: 592px;padding: 1.5rem 2rem;}
#about .container2 .rigthbox .bottombox {padding: 2rem 3rem;}
#about .container2 .bottombox h6 {margin-bottom: .5rem;font-weight: 700;text-align: center;}
#about .container2 .leftbox .bottombox ul {display: flex;flex-wrap: wrap;}
#about .container2 .leftbox .bottombox ul li {position: relative;width: 50%;padding-left: 1rem;}
#about .container2 .leftbox .bottombox ul li::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #333;
}
#about .container2 .bottombox p {text-align: right;}
#about .container2 p.txt {
	margin-bottom: 2rem;
	padding: 10px 10px 0;
	background: #EEF1F9;
	color: #506095;
	border-radius: 10px;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}
#about .container2 .bottombox span {font-size: 1.4rem;}
#about .container2 .bottombox:nth-of-type(1) p {margin-right: 2.5rem;}
#about .container2 h3 {
	color: #033575;
	font-size: 3rem;
	line-height: 1.8;
	text-align: center;
}
#about .container2 h3 span {background: linear-gradient(transparent 65%, #FFDFF1 65%);font-weight: 700;font-size: 1.34em;}
#about .container2 h3 span.bad {background: linear-gradient(transparent 65%, #eef1fb 65%);font-weight: 700;font-size: 1em;}
@media only screen and ( max-width : 1024px ) {
	#about {padding-top: 16rem;}
	#about .container1 {margin-bottom: 5rem;}
	#about .container1 h3 {font-size: 2.4rem;}
	#about .container1 ul {justify-content: center;max-width: 500px;margin-bottom: 3rem;}
	#about .container1 ul li {margin: 0 2.5rem 2rem;}
	#about .container1 ul li:nth-of-type(4),
	#about .container1 ul li:nth-of-type(5) {margin-bottom: 0;}
	#about .container1 p {font-size: 2rem;}
	#about .container1 p img {margin-top: 3rem;}
	#about .container2 .flexbox {display: block;}
	#about .container2 .leftbox .container {justify-content: center;}
	#about .container2 .leftbox {justify-content: center;}
	#about .container2 .leftbox .bottombox {margin: 0 auto 2rem;}
	#about .container2 figure.arrow {max-width: 350px;margin: 0 auto 2rem;}
	#about .container2 .rigthbox {margin: 0 auto;}
	#about .container2 .rigthbox .txtbox {margin: 0 auto 1rem;}
	#about .container2 .bottombox .content:nth-of-type(2) {padding: 1.5rem 2rem;}
	#about .container2 figure img.pc{max-height: 240px;}
}
@media only screen and ( max-width : 767px ) {
	#about .container1 ul li {margin: 0 1rem 2rem;}
	#about .container1 h4 {font-size: 2.4rem;}
	#about .container2 .subttl {max-width: 100%;font-size: 2rem;}
	#about .container2 h3 {font-size: 2.4rem;}
	#about .container2 .leftbox {display: block;}
	#about .container2 .leftbox .container {display: block;margin: 0 0 1rem;}
	#about .container2 .leftbox .txtbox {width: 100%;height: auto;}
	#about .container2 .leftbox .bottombox {width: 100%;}
	#about .container2 figure {max-width: 350px;margin: 0 auto 2rem;}
	#about .container2 .rigthbox .txtbox {width: 100%;}
	#about .container2 .rigthbox .txtbox p {font-size: 1.8rem;}
	#about .container2 .rigthbox .txtbox h6 {font-size: 2.4rem;}
	#about .container2 .bottombox {display: block;}
	#about .container2 .bottombox .content:nth-of-type(1) {width: 100%;margin-bottom: 2rem;}
	#about .container2 .bottombox .content:nth-of-type(2) {width: 100%;margin-left: 0;}
	#about .container2 .bottombox .content:nth-of-type(1) p {margin-right: 0;}
	#about .container2 .bottombox .content:nth-of-type(2) ul {max-width: 150px;margin: 0 auto;}
}
@media only screen and ( max-width : 480px ) {
	#about {padding-top: 12rem;}
	#about .container1 {margin-bottom: 3rem;}
	#about .container1 h3 {margin-bottom: 3rem;font-size: 1.7rem;}
	#about .container1 ul {padding: 3rem 1rem;}
	#about .container1 ul li img {height: 150px;}
	#about .container1 p {font-size: 1.8rem;}
	#about .container1 h4 {font-size: 2rem;}
	#about .container1 figure {margin-bottom: 3rem;}
	#about .container2 h4 {font-size: 2.4rem;}
	#about .container2 .bottombox .content:nth-of-type(1) ul {display: block;}
	#about .container2 .bottombox .content:nth-of-type(1) ul li {width: 100%;}
	#about .container2 h3 {font-size: 2rem;}
}
/*-------------------------------------------------

	RECRUITMENT COST

--------------------------------------------------*/
#cost {padding-bottom: 5rem;background: #F1F3FC;}
#cost .ttl {margin-bottom: 3rem;font-size: 1.8rem;text-align: center;}
#cost .container {
	max-width: 980px;
	margin: 0 auto 2rem;
	padding: 4rem 9rem;
	border-radius: 10px;
	background: #fff;
}
#cost .container:nth-of-type(2) {margin-bottom: 5rem;}
#cost .container h3 {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	color: #033575;
	font-weight: 700;
	font-size: 3rem;
	text-align: center;
}
#cost .bottomBorder::before {
	z-index: 1;
	height: 4px;
	border-radius: 10px;
	background: #6E7AA2;
}
#cost .bottomBorder.isActive::before {max-width: 100px;}
#cost .container p {margin-bottom: 2rem;font-size: 2rem;text-align: center;}
#cost .container p span {color: #033575;font-weight: 700;font-size: 1.2em;}
#cost .container .flexbox {max-width: 760px;margin: 0 auto;}
#cost .container .flexbox figure {width: 100%;max-width: 360px;margin: 0 auto;}
#cost .container:nth-of-type(2) figure {max-width: 500px;margin: 0 auto;}
#cost table {
	max-width: 980px;
	margin: 0 auto 5rem;
	border: 3px solid #333;
	background: #fff;
}
#cost table th {
	padding: 1rem;
	background: #EEF1FB;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	font-size: 2rem;
	text-align: center;
}
#cost table tr:nth-of-type(1) th:nth-of-type(2) {border-right: 1px solid #333;}
#cost table td {
	padding: 1.5rem 1rem;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align: center;
	font-size: 1.8rem;
	vertical-align: middle;
}
#cost table tr:nth-of-type(1n + 1) td:nth-of-type(1) {border-right: 3px solid #333;font-size: 1.6rem;}
#cost table td span {font-size: 1.34em;}
#cost .txtbox {margin-bottom: 10rem;}
#cost .txtbox p {margin-bottom: 4.5rem;font-size: 2rem;text-align: center;}
#cost .txtbox p:last-child {margin-bottom: 0;}
#cost ul li {position: relative;width: 32%;margin-top: 12.5rem;}
#cost ul li h3 {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 168px;
	height: 168px;
	padding-top: 2rem;
	border-radius: 50%;
	background: #033575;
	color: #fff;
	font-weight: 900;
	font-size: 2.3rem;
	text-align: center;
}
#cost ul li p {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 194px;
	border: 3px solid #033575;
	border-radius: 25px;
	background: #fff;
	font-weight: 500;
	font-size: 2.8rem;
	text-align: center;
}
#cost ul li .triangle,
#cost ul li .triangle span {
	position: absolute;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, 0);
}
#cost ul li .triangle {
    bottom: -34px;
	border-top: 35px solid #033575;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
}
#cost ul li .triangle span {
	bottom: 6px;
    border-top: 32px solid #fff;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
}
@media only screen and ( max-width : 1024px ) {
	#cost .container {padding: 3rem 2rem;}
	#cost .container .flexbox figure {max-width: 320px;}
	#cost ul li {width: 49%;}
}
@media only screen and ( max-width : 767px ) {
	#cost .ttl {font-size: 1.6rem;}
	#cost .container h3 {margin-bottom: 2rem;padding-bottom: 2rem;font-size: 2.4rem;}
	#cost .container p {font-size: 1.6rem;}
	#cost .container .flexbox figure:nth-of-type(1) {margin-bottom: 3rem;}
	#cost table {margin-bottom: 3rem;}
	#cost table th {padding: 1rem 0;font-size: 1.4rem;}
	#cost table td {padding: 1rem 0;font-size: 1.6rem;}
	#cost table tr:nth-of-type(1n + 1) td:nth-of-type(1) {font-size: 1.4rem;}
	#cost .txtbox {margin-bottom: 5rem;}
	#cost .txtbox p {font-size: 1.8rem;}
	#cost ul li {width: 100%;}
	#cost ul li:nth-of-type(1) {margin-top: 8rem;}
	#cost ul li p {height: auto;padding: 2rem 0;font-size: 2.4rem;}
}
@media only screen and ( max-width : 480px ) {
	#cost .txtbox p {margin-bottom: 3rem;font-size: 1.6rem;}
	#cost ul li {margin-top: 10rem;}
	#cost ul li h3 {
		top: -50px;
		width: 120px;
		height: 120px;
		padding-top: 2rem;
		font-size: 2rem;
	}
	#cost ul li p {font-size: 2rem;}
}
/*-------------------------------------------------

	SERVICE PLAN

--------------------------------------------------*/
#svc {padding-top: 10rem;}
#svc .flexbox .content {
	position: relative;
	width: 48.5%;
	height: 300px;
	margin-bottom: 6.5rem;
	padding: 3.5rem;
	background: #fff no-repeat center / cover;
	border: 1px solid #6E7AA2;
	border-radius: 10px;
}
#svc .flexbox .content:nth-of-type(1) {background-image: url("../img/svc/bg01.png");}
#svc .flexbox .content:nth-of-type(2) {background-image: url("../img/svc/bg02.png");}
#svc .flexbox .content:nth-of-type(3) {background-image: url("../img/svc/bg03.png");}
#svc .flexbox .content:nth-of-type(4) {background-image: url("../img/svc/bg04.png");}
#svc .flexbox .content h3 {
	margin-bottom: 2rem;
	color: #033575;
	font-weight: 700;
	font-size: 3rem;
	text-align: center;
}
#svc .flexbox .content ul {display: grid;justify-content: center;}
#svc .flexbox .content li {position: relative;padding-left: 1rem;font-size: 2rem;}
#svc .flexbox .content li::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #333;
}
#svc .flexbox .content p {font-size: 2rem;text-align: center;}
#svc .flexbox .content a {
	position: absolute;
	left: 50%;
	bottom: -25px;
	z-index: 1;
	transform: translate(-50%, 0);
	width: 100%;
	max-width: 300px;
	padding: 2rem 0;
	border-radius: 30px;
	box-shadow: 0 5px 20px rgba(3, 53, 117, .5);
	background: #033575;
	color: #fff;
	letter-spacing: .3em;
	text-align: center;
}
#svc .flexbox .content a:hover {transform: translate(-50%, 0) translate3d(0, 0.75rem, -1rem);box-shadow: none;}
#svc .flexbox .content a span {position: relative;padding-right: 4.5rem;}
#svc .flexbox .content a span::before,
#svc .flexbox .content a span::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 50%;
}
#svc .flexbox .content a span::before {
	transform: translate(0, 50%);
    width: 15px;
    height: 1px;
    background: #fff;
}
#svc .flexbox .content a span::after {
	transform: translate(0, 50%) rotate(45deg);
	width: 5px;
	height: 5px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
#svc .container {margin-top: 10rem;background: #EEF1FB;}
#svc .container .flexbox2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 957px;
	margin: 0 auto 8rem;
}
#svc .container .flexbox2 .txtbox {max-width: 49%;}
#svc .container .flexbox2 .txtbox h3 {margin-bottom: 4.5rem;color: #033575;font-size: 2.4rem;}
#svc .container .flexbox2 figure {max-width: 412px;}
@media only screen and ( max-width : 1024px ) {
	#svc .container .flexbox2 .txtbox h3 {font-size: 2.2rem;}
}
@media only screen and ( max-width : 767px ) {
	#svc .flexbox .content {width: 100%;height: auto;padding-bottom: 4rem;}
	#svc .flexbox .content li {font-size: 1.8rem;}
	#svc .flexbox .content h3 {font-size: 2.6rem;}
	#svc .container .flexbox2 {display: block;margin-bottom: 5rem;}
	#svc .container .flexbox2 .txtbox {max-width: 100%;margin-bottom: 3rem;}
	#svc .container .flexbox2 .txtbox h3 {margin-bottom: 2rem;font-size: 2rem;}
	#svc .container .flexbox2 figure {margin: 0 auto;}
}
@media only screen and ( max-width : 480px ) {
	#svc .flexbox .content a {max-width: 250px;}
}
/*-------------------------------------------------

	PRICING PLANS

--------------------------------------------------*/
#price {background: #A4ACC5;}
#price .title {color: #fff;}
#price .bottomBorder::before {background: #fff;}
#price .flexbox {margin-bottom: 5rem;}
#price .content {
	width: 32%;
	padding: 3.4rem 2rem;
	border: 5px solid #23DEBE;
	border-radius: 10px;
	background: #fff;
}
#price .content:nth-of-type(2) {border-color: #6DC4FF;}
#price .content:nth-of-type(3) {border-color: #FFABD2;}
#price .content h3 {
	margin-bottom: 3rem;
	font-weight: 700;
	font-size: 2.4rem;
	text-align: center;
}
#price .content:nth-of-type(1) h3 {color: #007460;}
#price .content:nth-of-type(2) h3 {color: #1C6698;}
#price .content:nth-of-type(3) h3 {color: #8F4065;}
#price .content p {
	height: 160px;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px dotted #6E7AA2;
}
#price .content h4 {
	max-width: 240px;
	margin: 0 auto 1rem;
	padding: 1rem 0;
	border-radius: 10px;
	background: #DDEBEB;
	color: #4A4D5A;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
}
#price .content:nth-of-type(2) h4 {background: #DDE0EB;}
#price .content:nth-of-type(3) h4 {background: #EBDDEA;}
#price .content .triangle {display: flex;justify-content: center;margin-bottom: 1rem;}
#price .content .triangle span {
	display: block;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 17px solid #23DEBE;
}
#price .content:nth-of-type(2) .triangle span {border-top: 17px solid #6DC4FF;}
#price .content:nth-of-type(3) .triangle span {border-top: 17px solid #FFABD2;}
#price .content .triangle span:nth-of-type(2) {margin: 0 2rem;}
#price .content dl {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 5px;
	padding: 1rem 1rem;
	border: 3px solid #007460;
	border-radius: 10px;
	background: #007460;
	color: #fff;
	font-weight: 500;
	font-size: 2rem;
}
#price .content:nth-of-type(2) dl {border-color: #1C6698;background: #1C6698;}
#price .content:nth-of-type(3) dl {border-color: #8F4065;background: #8F4065;}
#price .content dl:nth-of-type(2) {background: #fff;color: #007460;}
#price .content:nth-of-type(2) dl:nth-of-type(2) {color: #1C6698;}
#price .content:nth-of-type(3) dl:nth-of-type(2) {color: #8F4065;}
#price .content dl dt {line-height: 1;}
#price .content dl dd {line-height: 1;}
#price .content dl dd span {font-size: 1.5em;}
#price .content li {position: relative;padding-left: 1.5rem;font-size: 1.4rem;}
#price .content li::before {content: '※';position: absolute;left: 0;}
#price p.txt {font-size: 2.4rem;text-align: center;}
@media only screen and ( max-width : 1024px ) {
	#price .content {width: 49%;margin-bottom: 2.5rem;}
	#price .content:last-child {margin: 0 auto;}
	#price .content p {height: auto;}
	#price p.txt {font-size: 2rem;}
}
@media only screen and ( max-width : 767px ) {
	#price .content {width: 100%;}
	#price p.txt {font-size: 1.8rem;}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	FLOW

--------------------------------------------------*/
#flow {padding-bottom: 0;}
#flow ul {display: flex;}
#flow ul li {
	position: relative;
	width: 25%;
	margin-right: 2rem;
	padding: 4rem 2.5rem 2.5rem;
	border-radius: 10px;
	background: #EEF1FB;
}
#flow ul li:last-child {margin-right: 0;}
#flow ul li::before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 50%;
    transform: translate(0, 50%);
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 20px solid #A4ACC5;
}
#flow ul li:last-child::before {display: none;}
#flow ul li h3 {
	margin-bottom: 2.5rem;
	font-style: normal;
	font-weight: 500;
	font-size: 3rem;
	font-family: montserrat, sans-serif;
	text-align: center;
}
#flow ul li img {height: 100px;margin-bottom: 2rem;}
#flow ul li h4 {
	margin-bottom: 4rem;
	color: #033575;
	font-weight: 700;
	font-size: 2.4rem;
	text-align: center;
}
#flow ul li p {text-align: center;}
@media only screen and ( max-width : 1024px ) {
	#flow ul {flex-wrap: wrap;}
	#flow ul li {width: 47%;margin: 0 auto 2rem;padding: 2rem 3rem;}
	#flow ul li:last-child {margin: 0 auto 2rem;}
	#flow ul li h4 {margin-bottom: 2rem;}
}
@media only screen and ( max-width : 767px ) {
	#flow ul {display: block;}
	#flow ul li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 374px;
	}
	#flow ul li::before {
		right: 50%;
		bottom: -20px;
		transform: translate(50%, 0);
		border-top: 20px solid #A4ACC5;
		border-right: 35px solid transparent;
		border-bottom: none;
		border-left: 35px solid transparent;
	}
	#flow ul li:last-child {margin: 0 auto;}
	#flow ul li h4 {margin-bottom: 2rem;}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	FAQ

--------------------------------------------------*/
#faq .accordion {width: 100%;margin-bottom: 2rem;}
#faq .accordion:last-child {margin-bottom: 0;}
#faq .accordion .switch {display: flex;cursor: pointer;transition: .3s;}
#faq .accordion .switch::before {
	content: 'Q';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 60px;
	background: #6E7AA2;
	color: #fff;
	border-radius: 5px;
	font-style: normal;
	font-weight: 500;
	font-size: 4rem;
	font-family: montserrat, sans-serif;
	text-align: center;
}
#faq .accordion .switch span {
	width: 100%;
	margin-left: 5px;
	padding: 2rem;
	border: 1px solid #6E7AA2;
	border-radius: 5px;
	background: #EEF1FB;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.4;
}
/*#faq .accordion .switch.open {background: #333;color: #fff;}
#faq .accordion .switch span {position: relative;}
#faq .accordion .switch span::after {
	content: "";
	position: absolute;
	top: 5px;
	right: 0;
	transform: rotate(45deg);
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	transition: all 0.2s ease-in-out;
}
#faq .accordion .switch.open span::after {transform: rotate(-45deg);top: 45%;border-color: #fff;}*/
#faq .accordion .contentWrap {/*display: none;*/margin-top: 5px;}
#faq .accordion .contentWrap .content {display: flex;}
#faq .accordion .contentWrap .content h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 60px;
	border-radius: 5px;
	background: #FFDFF1;
	font-style: normal;
	font-weight: 500;
	font-size: 4rem;
	font-family: montserrat, sans-serif;
	text-align: center;
}
#faq .accordion .contentWrap .content p {
	width: 100%;
	position: relative;
	margin-left: 5px;
	padding: 2rem;
	border: 1px solid #6E7AA2;
	border-radius: 5px;
}
@media only screen and ( max-width : 767px ) {
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	COMPANY

--------------------------------------------------*/
#comp {background: #EEF1FB;}
#comp dl {width: 55%;padding-left: 4rem;}
#comp dl dt {
	float: left;
	clear: both;
	width: 77px;
	margin-bottom: 1.5rem;
}
#comp dl dd {margin-bottom: 1.5rem;}
#comp figure {width: 44%;}
@media only screen and ( max-width : 767px ) {
	#comp dl {width: 100%;margin-bottom: 3rem;padding-left: 0;}
	#comp figure {width: 100%;}
	#comp figure:first-child{margin-bottom: 50px;}
}
@media only screen and ( max-width : 480px ) {
}
/*-------------------------------------------------

	CONTACT

--------------------------------------------------*/
#contact table {max-width: 940px;margin: 0 auto 5rem;}
#contact tr {display: table;margin-bottom: 2rem;}
#contact th {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 266px;
	padding: 1rem 0;
	letter-spacing: .2em;
	vertical-align: top;
}
#contact th span {
	display: inline-block;
	padding: 8px 9px;
	border-radius: 7px;
	background: #6E7AA2;
	color: #fff;
	letter-spacing: .3em;
	text-align: center;
}
#contact th span.any {background: #AAD6FC;}
#contact td {width: 100%;padding-left: 1rem;vertical-align: middle;}
#contact input[type="text"],
#contact input[type="tel"],
#contact input[type="email"],
#contact textarea {
	width: 100%;
	height: 50px;
	padding: 1.2rem 2rem;
	border: 1px solid #EEF1FB;
	border-radius: 5px;
	background: #EEF1FB;
	font-size: 1.6rem;
	letter-spacing: .2em;
	resize: vertical;
	cursor: pointer;
}
::placeholder {color: #ccc;}
#contact input:focus {outline: none;}
#contact textarea {height: auto;margin-bottom: 1rem;}
input[type="checkbox"] {margin-right: 8px;}
.check_btn {padding: 0 1rem;}
.check_btn input[type="checkbox"] {display: none;}
.check_btn label {
	display: inline-block;
	position: relative;
	margin-right: 2.5rem;
	padding-left: 3rem;
	letter-spacing: .2em;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
}
.check_btn input[type="checkbox"]  + label::before,
.check_btn input[type="checkbox"]  + label::after {
	content: '';
	display: block;
	position: absolute;
}
.check_btn input[type="checkbox"]  + label::before {
	top: -1px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid #6E7AA2;
}
.check_btn input[type="checkbox"]  + label::after {
	opacity: 0;
	left: 7px;
	bottom: 50%;
	transform: translate(0, 50%) rotate(45deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid #6E7AA2;
	border-bottom: 2px solid #6E7AA2;
}
.check_btn input[type="checkbox"]:checked + label::after {opacity: 1;}
.privacy h5 {margin-bottom: 1rem;letter-spacing: .2em;}
.privacy ol {
	height: 210px;
	margin-bottom: 2rem;
	padding: 2rem;
	overflow-y: auto;
	background: #EEF1FB;
}
.privacy ol li {list-style-type: decimal;margin: 0 0 2rem  2rem;letter-spacing: .2em;}
.privacy ol li:last-child {margin-bottom: 0;}
.privacy ol li ul li {
	list-style-type: none;
	position: relative;
	margin: 0;
	padding-left: 1rem;
}
.privacy ol li ul li::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #333;
}
.privacy ol li p {margin-top: 2.5rem;}
.privacy .check_btn {padding: 0;}
.privacy .check_btn label {margin-right: 0;}
.submit {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 2rem 0;
	border: 1px solid #033575;
	border-radius: 50px;
	box-shadow: 0 5px 20px rgba(3, 53, 117, .5);
	background: #033575;
	color: #fff;
	font-weight: 300;
	font-size: 1.6rem;
	letter-spacing: .3em;
	text-align: center;
	transition: .3s;
}
.submit:hover {transform: translate3d(0, 0.75rem, -1rem);box-shadow: none;}
@media only screen and ( max-width : 767px ) {
	#contact table {margin-bottom: 3rem;}
	#contact tr {display: block;margin-bottom: 1rem;}
	#contact th {display: block;width: 100%;padding-top: 0;}
	#contact th span {margin-left: 5rem;}
	#contact td {display: block;width: 100%;padding-left: 0;}
	#contact tr:last-child td {margin-bottom: 0;}
	#contact input[type="text"],
	#contact input[type="tel"],
	#contact input[type="email"],
	#contact textarea {font-size: 1.4rem;}
}
@media only screen and ( max-width : 480px ) {
}
/* ------------------------------------------------------------

　   FORM

--------------------------------------------------------------*/
.form {display: block;padding-top: 15rem;}
.form h4 {text-align: center;line-height: 1.8;margin-bottom: 4rem;}
.form .submit {margin: 0 auto;}
.error .errorbox {margin-bottom: 8rem;}
.error .error_messe {color: #C41000;text-align: center;}
#contact.confirm table {margin-bottom: 3rem;}
#contact.confirm th {font-weight: 700;}
.complete p {margin-bottom: 4rem;text-align: center;}
@media only screen and ( max-width : 767px ) {
	#contact.confirm td {border-bottom: 1px solid #000;}
}