@charset "UTF-8";


main {
	padding-top: 90px;
}

@media screen and (max-width: 767px){
	
	main {
		padding-top: 70px;
	}
	
}

/*　スライダー　*/

.mv {
	background-color: #f7f7f7;
}
.mv .inner {
	position: relative;
	width: 1280px;
	margin: 0 auto;
}
.mv .inner::after {
	content: '';
	display: inline-block;
	position: absolute;
	right: 30px;
	bottom: 0px;
	z-index: 999;
	width: 19px;
	height: 152px;
	background: url("../img/scroll.svg") no-repeat left top;
	animation: sdl 2s ease infinite;
}
@keyframes sdl {
	0% {
		bottom: 0px;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		bottom: -30px;
		opacity: 0;
	}
}
.swiper-container {
	width: 100%;
	height: 640px;
	position: relative;
}
.swiper-wrapper, .swiper-slide {
	width: 100%;
	height: 100%;
}	

.slide01 {
	background: url("../img/slider_1.jpg") no-repeat 50% 50%;
	background-size: cover;
}

/*english*/
body.en .slide01 {
	background: url("../img/slider_1_en.jpg") no-repeat 50% 50%;
	background-size: cover;
}




.swiper-pagination {
	position: absolute;
	left: 60px !important;
	bottom: 40px !important;
	display: inline-block !important;
	width: auto !important;

}
.swiper-pagination-bullet {
    width: auto !important;
    height: auto !important;
    border-radius: none !important;
    background: transparent !important;
    opacity: 1 !important;
}
.swiper-pagination-bullet::after {
	content: '';
	display: block;
	width: 50px;
	height: 5px;
	background-color: #999999;
}
.swiper-pagination-bullet-active::after {
    background: #29abe2;
}

.info {
	position: absolute;
	right: 100px;
	top: -12px;
	z-index: 999;
	width: 315px;
	height: 640px;
}
.info::after {
	content: '';
	display: inline-block;
	background-color: rgba(14,81,119,0.08);
	width: 100%;
	height: 100%;
	height: calc( 100% + 12px );
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
.info .img {
	background-color: #fff;
}
.info .img a {
	display: block;
	width: 100%;
	height: 100%;
}
.info img {
	width: 100%;
}
.info_wrap {
	padding: 30px 20px;
}
.info h2 {
	font-size: 20px;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: bold;
	color: #005bab;
	padding-bottom: 5px;
	border-bottom: 1px dashed #808080;
	margin-bottom: 20px;
}
.info .date {
	font-size: 13px;
	color: #4d4d4d;
	margin-bottom: 15px;
}
.info .ttl {
	color: #005bab;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 15px;
}

.info .txt {
	font-size: 11px;
	line-height: 1.8;
	margin-bottom: 20px;
}
.info .txt span {
	font-weight: bold;
}
.info a {
	transition: opacity 0.3s ease;
}
.info_wrap a {
	margin-left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 28px;
	font-size: 12px;
	text-decoration: none;
	color: #005bab;
	border: 1px solid #005bab;
	letter-spacing: 0.1em;
	transition: opacity 0.3s ease;
}
.info a:hover {
	opacity: 0.6;
}

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

	.mv .inner {
		width: auto;
	}
	.mv .inner::after {
		display: none;
	}
	.swiper-container {
		width: 100%;
		height: 75vw;
		min-height: auto;
	}
	.slide01 {
		background: url("../img/slider_1.jpg") no-repeat 0% 50%;
		background-size: cover;
	}
	
	/*english*/
	body.en .slide01 {
		background: url("../img/slider_1_en.jpg") no-repeat 0% 50%;
		background-size: cover;
	}
	
	.swiper-pagination {
		left: 20px !important;
		bottom: 20px !important;

	}
	.swiper-pagination-bullet::after {
		width: 26px;
		height: 4px;
	}
	
	.info {
		position: relative;
		right: auto;
		top: auto;
		z-index: auto;
		width: 100%;
		height: auto;
		background-color: rgba(14,81,119,0.08);
		display: flex;
		justify-content: space-between;
		padding: 30px 20px;
	}
	.info::after {
		display: none;
	}
	.info .img {
		width: 28%;
		background-color: transparent;
	}
	.info .img a {
		height: auto;
	}
	.info_wrap {
		width: 66%;
		padding: 0px;
	}
	.info h2 {
		font-size: 18px;
		padding-bottom: 10px;
		margin-bottom: 25px;
	}
	.info .date {
		font-size: 11px;
		margin-bottom: 10px;
	}
	.info .ttl {
		font-size: 14px;
		margin-bottom: 15px;
	}
	.info .txt {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.info_wrap a {
		width: 100px;
		height: 28px;
		font-size: 12px;
	}


}

.main {
	background: #cce8ed url("../img/bg_a.jpg") no-repeat 50% top;
	background-size: 1902px;
	min-width: 1280px;
}
.main .sec_a {
	width: 1280px;
	padding: 100px 80px 0;
	margin: 0 auto;
}
.sec_a .inner {
	width: 570px;
	margin-left: auto;
	color: #333;
}
.main h2 {
	font-size: 28px;
	line-height: 1.5;
	margin-bottom: 40px;
}
.main .mid {
	font-size: 18px;
	line-height: 1.8;
	margin-bottom: 3em;
}
.main .sml {
	font-size: 15px;
	line-height: 2.4;
	margin-bottom: 40px;
}
.sec_a .popup {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 40px 70px;
}
.sec_a .popup div {
	width: 170px;
}
.sec_a .popup div img {
	width: 100%;
	margin-bottom: 15px;
}
.sec_a .popup .ttl {
	color: #808080;
	font-size: 16px;
	margin-bottom: 10px;
	padding-top: 8px;
}
.sec_a .popup .ttl.left {
	color: #0071bc;
	font-size: 24px;
	margin-bottom: 10px;
	padding-top: 0;
}
.sec_a .popup .caption {
	font-size: 12px;
	line-height: 1.5;
}
.sec_a .img {
	display: none;
}
@media screen and (max-width: 767px){
	
	.main {
		background: #cce8ed url("../img/bg_a_sp.jpg") no-repeat 50% 0;
		background-size: 768px;
		min-width: auto;
	}
	.main .sec_a {
		width: 100%;
		max-width: 600px;
		padding: 40px 40px;
		margin: 0 auto;
	}
	.sec_a .inner {
		width: 100%;
		margin-left: 0;
	}
	.main h2 {
		font-size: 18px;
		margin-bottom: 30px;
	}
	.main .mid {
		font-size: 16px;
		margin-bottom: 0em;
	}
	.main .sml {
		font-size: 13px;
		line-height: 2.2;
		margin-bottom: 0px;
	}
	.sec_a .popup {
		padding: 20px;
	}
	.sec_a .popup div {
		width: 45%;
	}
	.sec_a .popup .ttl {
		font-size: 14px;
		margin-bottom: 10px;
		padding-top: 6px;
	}
	.sec_a .popup .ttl.left {
		color: #0071bc;
		font-size: 20px;
		margin-bottom: 10px;
		padding-top: 0;
	}
	.sec_a .popup .caption {
		font-size: 11px;
		line-height: 1.5;
	}
	.sec_a .img {
		display: block;
		margin: 20px auto 0;
		width: 100%;
	}
}


.sec_bc {
	width: 1280px;
	padding: 220px 80px 140px;
	margin: 0 auto;
}
.sec_b {
	width: 780px;
}
.sec_b img {
	width: 100%;
	margin-bottom: 300px;
}

@media screen and (max-width: 767px){
	
	.sec_bc {
		width: 100%;
		background: url("../img/bg_c_sp.png") no-repeat 50% 0%;
		background-size: 1400px;
		padding: 80px 40px 100px;
	}
	.sec_b {
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
	.sec_b img {
		margin-top: 30px;
		margin-bottom: 150px;
	}
}

.sec_c {
	width: 1120px;
	padding: 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.sec_c .txt {
	width: calc( 100% - 600px );
}
.sec_c .img {
	width: 550px;
}
.sec_c img {
	width: 100%;
}

@media screen and (max-width: 767px){
	
	.sec_c {
		width: 100%;
		padding: 0;
		max-width: 520px;
		margin: 0 auto;
		display: block;
	}
	.sec_c .txt {
		width: auto;
	}
	.sec_c .img {
		width: auto;
		margin-top: 30px;
	}

}



.sec_d {
	width: 800px;
	padding: 60px 0 0;
	margin: 0 auto;
}
.sec_d .youtube {
	position: relative;
	width: 100%;
 	padding-top: 56.25%;
}
.sec_d iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px){
	
	.sec_d {
		width: 100%;
		max-width: 520px;
	}

}



.sec_option {
	background-color: #fff;
	position: relative;
	z-index: 0;
}
.sec_option::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	/*四角形を傾けます*/
	transform: skewY(-5deg);
	transform-origin: top left;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #fff;
}
.sec_option .inner {
	width: 1280px;
	padding: 60px 80px 180px;
	margin: 0 auto;
}
.sec_option h2 {
	color: #333;
	font-size: 60px;
	margin-bottom: 60px;
	font-weight: normal;
}
.sec_option .option_wrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}
.sec_option .option_wrap > div {
	width: 41%;
}
.sec_option .option_wrap img {
	height: 210px;
	margin-bottom: 25px;
}
.sec_option .option_wrap .lead {
	font-size: 18px;
	line-height: 1.5;
	color: #0071bc;
	font-weight: bold;
	margin-bottom: 20px;
}
.sec_option .option_wrap .caption {
	font-size: 15px;
	line-height: 1.8;
}
.sec_option .option_other {
	display: flex;
	justify-content: space-between;
}
.sec_option .option_other .txt {
	width: 38%;
	order: -1;
}
.sec_option .option_other .lead {
	font-size: 28px;
	line-height: 1.5;
	color: #0071bc;
	margin-bottom: 25px;
	font-weight: bold;
}
.sec_option .option_other .caption {
	font-size: 20px;
	line-height: 1.8;
}
.sec_option .option_other .img {
	width: 50%;
}
.sec_option .option_other .img img {
	width: 100%;
}


@media screen and (max-width: 767px){
	
	.sec_option .inner {
		width: auto;
		padding: 30px 40px 100px;
		max-width: 600px;
	}
	.sec_option h2 {
		font-size: 30px;
		text-align: center;
		margin-bottom: 40px;
	}
	.sec_option .option_wrap {
		display: block;
		margin-bottom: 60px;
	}
	.sec_option .option_wrap > div {
		width: 100%;
		margin-bottom: 60px;
	}
	.sec_option .option_wrap img {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}
	.sec_option .option_wrap .lead {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.sec_option .option_wrap .caption {
		font-size: 16px;
	}
	.sec_option .option_other {
		display: block;
	}
	.sec_option .option_other .txt {
		width: 100%;
	}
	.sec_option .option_other .lead {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.sec_option .option_other .caption {
		font-size: 16px;
	}
	.sec_option .option_other .img {
		width: 100%;
		margin-bottom: 20px;
	}

}





.sec_app {
	background-color: #eee;
	position: relative;
	z-index: 0;
}
.sec_app::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	/*四角形を傾けます*/
	transform: skewY(-5deg);
	transform-origin: top left;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #eee;
}
.sec_app .inner {
	width: 1280px;
	padding: 60px 80px 180px;
	margin: 0 auto;
}
.sec_app h2 {
	color: #333;
	font-size: 60px;
	margin-bottom: 60px;
	font-weight: normal;
}
.sec_app .app_wrap {
	display: flex;
	justify-content: space-between;
}
.sec_app .app_box {
	width: 41%;
	font-size: 18px;
	line-height: 1.8;
}
/*english*/
body.en .sec_app .app_box {
	width: 100%;
}

.sec_app ul, .sec_app p {
	margin-bottom: 40px;
}
.sec_app ul {
	padding-left: 1em;
}
.sec_app li {
	margin-bottom: 10px;
	list-style-type: disc;
}
.sec_app a {
	font-size: 16px;
	color: #005bab;
    border: 1px solid #005bab;
	text-decoration: none;
	max-width: 240px;
	height: 50px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
}
.sec_app a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px){
	
	.sec_app .inner {
		width: auto;
		padding: 30px 40px 100px;
		max-width: 600px;
	}
	.sec_app h2 {
		font-size: 30px;
		text-align: center;
		margin-bottom: 40px;
	}
	.sec_app .app_wrap {
		display: block;
	}
	.sec_app .app_box {
		width: 100%;
		font-size: 16px;
	}
	.sec_app .app_box:first-of-type {
		margin-bottom: 60px;
	}
	.sec_app ul, .sec_app p {
		margin-bottom: 30px;
	}
	.sec_app a {
		font-size: 16px;
		max-width: 240px;
		height: 40px;
		margin: 0 auto;
	}
}