@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600|Raleway:500,700,800");


	body {
		background-color: #f3f1ee;
	}

	#herotrain {
		background-color: #f3f1ee;
		background-image: none;
	}

	#header.alt {
		background-color: #0a4664;
		color: #fff;
		-moz-animation: none;
		-webkit-animation: none;
		-ms-animation: none;
		animation: none;
		box-shadow: none;
		overflow: hidden;
		position: absolute;
		top: 0;
	}

	#header .navPanelToggle:before {
		top: 0.5rem;
	}

	.wrapper + .wrapper {
	    border-top: solid 1px #0a4664;
	}

	#about {
		border-top: none;
		background: url(images/bg-about.png) no-repeat;
		background-position-y: center;
		background-size: cover;
		background-position-x: 10rem;
	}

	#about ul li {
		color: #041d2a;
		font-weight: bold;
		font-size: 1.25rem;
		line-height: 1.75;
	}

	#contact {
		background-image: url(images/the-intern.jpg);
		position: relative;
		width: 100%;
		background-size: cover;
		background-position: center;
		border-top: none !important;
		padding: 4rem 0 16rem;
		margin-top: 0rem;
	}

		#contact h1 {
			font-family: "Anton", sans-serif;
			font-weight: 900;
			font-style: normal;
			color: #FFF;
			font-size: 3.25rem;
			letter-spacing: 4px;
			padding: 0;
			margin-bottom: 1rem;
		}

		#contact h1::after {
			border-bottom: 0;
		}

		#contact h2 {
			color: #FFF;
			font-size: 2em;
			font-weight: 400;
			margin: 0;
			padding-bottom: 0.5em;
		}

		#contact p {
			color: #FFF;
		}

		.wrapper.content-pad .sub-content {
			padding: 4em 0 0 0;
		}

		.hi-lite {
			border-left: 8px solid #0a4664;
			margin-bottom: 1rem;
		}

		.hi-lite h4 {
			color: #0a4664;
			font-family: "Anton", sans-serif;
			font-size: 1.5rem;
			text-transform: uppercase;
			padding: 0;
			margin-left: 0.5rem;
			margin-bottom: 0.25rem;
		}

		.hi-lite h4::after {
			border-bottom: 0;
		}

		.wrapper.content-pad .sub-content .hi-lite h2 {
			margin-left: 0.5rem;
			padding-bottom: 0.25rem;
		}

		.illust {
			padding: 0 0rem;
			margin-bottom: 1rem;
		}

		.wrapper.content-pad .illust-content {
			padding: 0;
			padding-bottom: 2rem;
		}

		.features > section:before {
			background-color: #0a4664;
		}

		#mission {
			display: flex;
			background-color: #0a4664;
			color: #FFF;
			padding: 0;
		}

		#mission .left {
			flex: 1;
			width: 50%;
			padding: 4rem 8rem;
		}

		#mission .left span {
			font-family: "Anton", sans-serif;
			display: block;
			font-size: 1.5rem;
			letter-spacing: 1px;
			text-align: center;
			text-transform: uppercase;
			background-color: #041d2a;
			border-radius: 4px;
			width: 8rem;
			border-top: none;
			margin-bottom: 1rem;
			padding: 0.5rem 0;
		}

		#mission .left h3::after {
			border-bottom: none;
		}

		#mission .left h3 {
			color: #FFF;
			font-size: 2.5rem;
			font-weight: 900;
			margin: 0;
		}

		#mission .right {
			background-image: url(images/load.jpg);
			position: relative;
			width: 50%;
			background-size: cover;
			background-position: center;
			border-top: none !important;
			padding: 4rem 0 16rem;
		}

		#service .content {
			display: flex;
		}

		#service .content .left,
		#service .content .right {		
			width: 50%;
		}

		#service .content .left .image, 
		#service .content .left.point {
			border-radius: 3rem 0 0 3rem;			
		}

		#service .content .right .image,
		#service .content .right.point {	
			border-radius: 0 3rem 3rem 0;
		}

		#service .content .image {
			width: 100%;
			height: 100%;
			background-image: url(images/service01.jpg);
			position: relative;
			background-size: cover;
			background-position: center;
			border-top: none !important;
		}

		#service .content .image.second {
			width: 100%;
			height: 100%;
			background-image: url(images/service02.jpg);
			position: relative;
			background-size: cover;
			background-position: center;
			border-top: none !important;
		}

		#service .content .point {
			background-color: #FFF;
			height: 34rem;
			padding: 3rem 0 3rem 3rem;
		}

		#service .content .point h6 {
			background-color: #0a4664;
			font-size: 1.5rem;
			font-weight: 500;
			color: #FFF;
			border-radius: 4px 0 0 4px;
			padding: 0.25rem 1rem;
			margin-bottom: 0.5rem;
		}

		#service .content .point h6::after {
			border-bottom: none;
		}

		#service .content .point h3 {
			font-size: 1.5rem;
			font-weight: bold;
			color: #0a4664;
			padding-bottom: 0px;
			padding-right: 3rem;
		}

		#service .content .point h3::after {
			content: none;
		}

		#service .content .point .data {
			display: flex;
			padding-right: 3rem;
		}

		#service .content .point .data span {
			color: #FFF;
			background-color: #0a4664;
			font-size: 1.5rem;
			padding: 0.5rem 1rem;
			font-weight: bold;
			height: 2.75rem;
			border-radius: 4px;
		}

		#service .content .point .data h4 {
			color: #0a4664;
			font-size: 1.5rem;
			font-weight: 500;
			padding-left: 0.5rem;
			padding-bottom: 0;
			margin-bottom: 1rem;
		}

		#service .content .point .data h4::after {
			content: none;
		}
		
		#service .content .point p {
			padding-right: 3rem;
		}

		#service .flow-box ul {
			display: flex;
			justify-content: space-between;
			padding: 0;
			margin: 1rem 0 3rem;
		}

		#service .flow-box ul li {
			position: relative;
			background-color: #FFF;
			width: 17.5%;
			height: 12rem;
			list-style: none;
			border-radius: 0 3rem;
			padding: 0;
		}

		#service .flow-box ul li .header {
			background-color: #cfd7db;
			border-radius: 0 3rem 0 0;
			text-align: center;
			padding: 0.75rem 0;
		}

		#service .flow-box ul li .header.option {
			background-color: #e0bc16;
		}

		#service .flow-box ul li span {
			color: #0a4664;
			font-weight: 900;
			font-size: 1rem;
		}

		#service .flow-box ul li h6 {
			color: #0a4664;
			font-weight: bold;
			font-size: 1.25rem;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		#service .flow-box ul li h6::after {
			content: none;
		}

		#service .flow-box ul li .footer {
			padding: 1rem;
		}

		#service .flow-box ul li .arrow {
			display: block;
			width: 0;
			height: 0;
			border-top: 1.75rem solid transparent;
			border-bottom: 1.75rem solid transparent;
			border-left: 2rem solid #FFF;
			position: absolute;
			bottom: 1.25rem;
			right: -1.5rem;
		}

		#service .matching {
			position: relative;	
			height: 0;
		}

		#service .matching span {
			text-align: center;
			display: block;
			color: #0a4664;
			font-size: 6rem;
			font-weight: 100;
		}

		#service .matching img {
			position: absolute;
			top: -1rem;
			right: 0;
			width: 32rem;
		}

		#service .matching .matching-sp {
			display: none;
		}

		#service .answer {
			background-color: #7c1515;
			text-align: center;
			padding: 6rem 0 3rem;
			margin-top: -6rem;
		}

		#service .answer h4 {
			color: #FFF;
			font-family: "Anton", sans-serif;
			font-size: 1.5rem;
			text-transform: uppercase;
			padding: 0;
			margin-left: 0.5rem;
			margin-bottom: 0.25rem;
		}

		#service .answer h4::after {
			content: none;
		}

		#service .answer h2 {
			color: #FFF;
			font-size: 2.25em;
			font-weight: bold;
			margin: 0 0 0 0;
			padding-bottom: 0.5em;
		}

		#price .detail {
			display: flex;
			justify-content: space-between;
			margin-top: 3rem;
			margin-bottom: 4rem;
		}

		#price .detail .header {
			background-color: #cfd7db;
		}

		#price .detail .header h6 {
			font-size: 1.5rem;
			color: #0a4664;
			font-weight: 500;
			margin-bottom: 0;
			padding: 1rem 0;
		}		

		#price .detail .header h6::after {
			content: none;
		}

		#price .detail .body  {
			padding: 3rem;
		}

		#price .detail .left {
			width: 48%;
			background-color: #FFF;
			text-align: center;
		}

		#price .detail .left .body span {
			padding-top: 3rem;
			font-size: 1.25rem;
			font-weight: 500;
			color: #0a4664;
		}

		#price .detail .left .body h2 {
			font-size: 8rem;
			font-weight: 900;
			color: #0a4664;
			padding-left: 1.25rem;
			padding-bottom: 0;
		}

		#price .detail .left .body h2 small {
			font-size: 1.25rem;
			font-weight: 500;
		}

		#price .detail .left .body p {
			font-size: 1.25rem;
			font-weight: 500;
			color: #0a4664;
			text-align: center;
		}

		#price .detail .right {
			width: 48%;
			background-color: #FFF;
			text-align: center;
		}

		#price .detail .right .body span {
			padding-top: 3rem;
			font-size: 1.25rem;
			font-weight: 500;
			color: #0a4664;
		}

		#price .detail .right .body h2 {
			font-size: 2rem;
			font-weight: 900;
			color: #0a4664;
			padding-bottom: 1rem;
		}

		#price .detail .right .body h2 small {
			font-size: 1.25rem;
			font-weight: 500;
			padding-left: 0.25rem;
		}

		.under-line {
			display: block;
			border-bottom: 1px solid #0a4664;
			margin-bottom: 1.25rem;
		}

		.accordion-002 {
			max-width: 100%;
			padding: 4rem 0 0;
		}

		.accordion-002 summary {
			display: block;
			align-items: center;
			position: relative;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			margin-bottom: 4rem !important;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			-moz-transition: 0.3s;
			-o-transition: 0.3s;
		}

		.accordion-002 summary::-webkit-details-marker {
			display: none;
		}


		.accordion-002[open] summary::after {
			transform: rotate(225deg);
		}

		.accordion-002 summary:hover {
			opacity: 0.7;
		}

		.accordion-002 summary .arrow-btn img {
			width: 8rem;
		}

		.accordion-002 summary h2 {
			font-size: 2.25em;
			font-weight: normal;
			margin-left: 0.5rem;
			margin-bottom: 0;
			padding-bottom: 0.25rem;

		}

		.accordion-002 .wrapper.content-pad .sub-content {
			padding: 0em 0 0 0;
		}

		.accordion-002 #comparizon.wrapper.content-pad .sub-content {
			padding: 4em 0 0 0;
		}

		.separator-line {
			border-bottom: 1px solid #0a4664;
		}

		.the-intern {
			border-top: none!important;
			background-image: url(images/bg-contact.jpg);
			background-position: center;
			padding: 6rem 0;
			margin-top: 8rem;
		}

		.the-intern .inner h2 {
			font-weight: bold;
			padding-bottom: 1em
		}

		.the-intern .inner ul {
			display: flex;
			justify-content: center;
		}

		.the-intern .inner ul li {
			padding: 0 1rem;
		}

		.the-intern .inner .button-2 {
			background: none;
			color: #FFF !important;
			font-size: 1rem;
			opacity: 1;
			width: 14rem;
			padding: 1rem 0;
		}

		.the-intern .inner .button-2:hover {
			background: #cf000d;
			border-color:#cf000d;
		}

		table , td, th {
			border: 1px solid #0a4664;
			border-collapse: collapse;
		}

		table th {
			color: #FFF;
			background: #0a4664;
			text-align: center;
			padding: 0.75rem 0 0.75rem;
			font-size: 1rem;
		}
		
		table td {
			text-align: center;
		}

		table .bold {
			font-weight: bold;
		}

		.even {
			background: #fbf8f0;
		}

		.odd {
			background: #fefcf9;
		}

		.tabel-box {
			position: relative;
			margin-top: 2rem;
			margin-bottom: 2rem;
		}

		.balloon-005 {
			display: flex;
			justify-content: center;
			position: absolute;
			top: 0rem;
			left: 2rem;
			max-width: 80px;
			margin-bottom: 15px;
			padding: .8em 1.2em;
			border: 3px solid #7c1515;
			border-radius: 2rem;
			background-color: #FFF;
			color: #7c1515;
			font-weight: 500;
			font-size: 1rem;
		}

		.balloon-005::before,
		.balloon-005::after {
			position: absolute;
			bottom: -15px;
			width: 30px;
			height: 15px;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			content: '';
		}

		.balloon-005::before {
			background-color: #7c1515;
		}

		.balloon-005::after {
			bottom: -11px;
			background-color: #FFF;
		}

		.balloon-006 {
			display: flex;
			justify-content: center;
			position: absolute;
			top: 0rem;
			right: 2rem;
			max-width: 80px;
			margin-bottom: 15px;
			padding: .8em 1.2em;
			border: 3px solid #e0bc16;
			border-radius: 2rem;
			background-color: #FFF;
			color: #e0bc16;
			font-weight: 500;
			font-size: 1rem;
		}

		.balloon-006::before,
		.balloon-006::after {
			position: absolute;
			bottom: -15px;
			width: 30px;
			height: 15px;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			content: '';
		}

		.balloon-006::before {
			background-color: #e0bc16;
		}

		.balloon-006::after {
			bottom: -11px;
			background-color: #FFF;
		}



@media screen and (max-width: 1480px) {

}

@media screen and (max-width: 1280px) {

	.accordion-002.wrapper > .inner {
		width: 90%;
		padding: 0;
	}
	.accordion-002 .wrapper > .inner {
		width: 90%;
		padding: 0;
	}
	.accordion-002 summary h2 {
		font-size: 1.25em;
	}
	.accordion-002 .wrapper .sub-content p {
		margin-bottom: 2rem;
	}
	#mission .left {
		padding: 4rem 3rem;
	}
	#service .content .point h6 {
		font-size: 1rem;
	}
	#service .content .point h3 {
		font-size: 1rem;
	}
	#service .content .point .data h4 {
		font-size: 1rem;	
	}
	#service .content .point .data span {
		font-size: 1rem;
		padding: 0.05rem 0.6rem;
		height: 1.75rem;
	}
	#service .content .point p {
		margin-bottom: 1.5rem;	
	}
	#service .flow-box ul li h6 {
		font-size: 1rem;
	}
	#service .flow-box ul li {
		height: 13rem;
	}
	#service .matching img {
		top: -1rem;
		width: 28rem;
	}
	#price .detail .header h6 {
		font-size: 1rem;
	}
	#price .detail .left .body span {
		font-size: 1rem;
	}
	#price .detail .left .body h2 {
		font-size: 6rem;
	}
	#price .detail .left .body p {
		font-size: 1rem;
	}
	#price .detail .right .body span {
		font-size: 1rem;
	}
	#price .detail .right .body h2 {
		font-size: 1.25rem;
	}
	.the-intern .inner h2 {
        line-height: 1.5;
	}
	.wrapper.content-pad .content {
        padding: 1em 0 1em 0;
    }
	#service .matching span {
		font-size: 3rem;
	}
	#service .answer h2 {
		padding: 0 3rem 0.5rem;
	}
	.balloon-005 {
        top: -0.5rem;
		left: 0.75rem;
	    max-width: 70px;
		padding: .6em 1em;
		font-size: 14px;
	}
	.balloon-006 {
        top: -0.5rem;
		right: 0.75rem;
		max-width: 70px;
		padding: .6em 1em;
		font-size: 14px;
	}
}

@media screen and (max-width: 980px) {
	#contact h2 {
		font-size: 1.5em;
		margin-bottom: 0.5rem;
	}
	.illust img {
        width: 100%;
		margin-bottom: 1.5rem;
	}
	.arrow-btn {
		text-align: right;
	}
	#mission {
		display: block;
	}
	#mission .left {
        padding: 4rem 2rem;
        width: auto;
    }
	#mission .right {
		width: 100%;
		padding: 4rem 0 20rem;
	}
	#service .content {
		display: block;
	}
	#service .content .left, 
	#service .content .right {
		width: 100%;
	}
	#service .content .left {
	    height: 24rem;
	}
	#service .content .left .image, 
	#service .content .left.point {
		border-radius: 3rem 3rem 0 0;
	}
	#service .content .right .image, 
	#service .content .right.point {
		border-radius: 0 0 3rem 3rem;
	}
	#service .content .right {
		height: 24rem;
	}
	#service .content .right.point,
	#service .content .left.point {
		height: auto;
	}

	#service .content .point {
		padding: 3rem 0 1rem 1.5rem;
	}

	#service .content .point p {
		padding-right: 1.5rem;
	}

    #service .matching span {
		display: none;	
	}

	#service .matching img {
		display: none;
	}

	#service .matching .matching-sp {
		display: block;
	}

	#service .flow-box ul {
		flex-wrap: wrap;
		margin-bottom: 1rem;
	}

	#service .flow-box ul li {
        width: 48%;
        margin-bottom: 1rem;
	}

	#service .flow-box ul li .arrow {
		display: none;
	}

	#service .matching {
		height: auto;
	}

	#service .matching img {
        width: 100%;
        position: relative;
		top: 2rem;
    }
	#service .answer h2 {
        padding: 0 1rem 0.5rem;
        font-size: 1.25em;
    }
	.tabel-box {
		margin-top: 3rem;
	}

}

@media screen and (max-width: 736px) {
	    
		#header {
			height: 4.25em;
		}

		#mission .left h3 {
			font-size: 1.5rem;
		}

		#service .flow-box ul li {
			width: 100%;
			margin-bottom: 1.5rem;
			height: auto;
		}

		#service .content .left {
			height: 18rem;
		}

		#service .content .right {
			height: 18rem;
		}

		#service .flow-box ul {
			margin-bottom: 0;
		}

		#service .matching .matching-sp {
			top: 1.5rem;
		}

		#price .detail {
			display: block;
		}

		#price .detail .left {
			width: 100%;
			margin-bottom: 3rem;
		}

		#price .detail .right {
			width: 100%;
		}

		#price .detail .body {
			padding: 1.5rem;
		}
		#price .detail .left .body h2 {
			line-height: 1.5;
		}
		.the-intern {
			padding: 3rem 0;
		}

		.the-intern .inner h2 {
			text-align: center;
		}

		.the-intern .inner ul {
			display: block;
		}
		
		.the-intern .inner ul li {
			padding: 1rem 1rem;
		}

		    .accordion-002.wrapper .arrow-btn {
				width: 50%;
			}

		.balloon-005 {
			top: -1.5rem;
		}
		.balloon-006 {
			top: -1.5rem;
		}

}