/*--------------------------------
header
--------------------------------*/
header{
	background-color:#20B2D3;
	margin: 0px;
	overflow: hidden;
	position:relative;
}
header .text-white{
	position:absolute;
	right:5%;
	bottom:5%;
	text-align:end;
}

/*--------------------------------
body
--------------------------------*/
.main{
	position:relative;
	padding-top:60px;
}
.main::before{
	background:url("../images/green.png")repeat-x top center/60px;
	content:"";
	position:absolute;
	width:100%;
	height:60px;
	top:0;
	left:0;
}
main .container{
	max-width:1000px;
}
/* CONTENT01 ******************/
.content1{
	background:url("../images/blackbg.png")repeat top left;
	padding-top:150px;
}
.whiteBox{
	background:url("../images/bg01.png")no-repeat top left/100% 100%;
	position:relative;
	display:flex;
}
.whiteBox::before{
	background:url("../images/line.png")no-repeat top left/100%;
	content:"";
	height:10px;
	width:40%;
	top:-20px;
	left:12%;
	position:absolute;
}
.txtBox{width:50%;}
.ttls{
	font-weight:bold;
	border-bottom:2px solid #20B2D3;
}
.imgBox{
	position: relative;
	top: -5rem;
	right: -3rem;
	width:calc(110% - 50%);
}
/* CONTENT02 ******************/
.content2{
	background:#FFF;
	padding-top:150px;
	padding-bottom:200px;
	position:relative;
}

/* CONTENT03 ******************/
.content2 .swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}
.content2 .swiper-wrapper{
	transition-timing-function: linear;
}
.content2 .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
	padding:0 10px;
}

/*--------------------------------
PARALUX
--------------------------------*/
.para01,.para02,.para03,.para04,.para05,
.para06,.para07,.para08,.para09,.para10,
.para11,.para12,.para13{
	position:absolute;
	z-index:5;
}
/* CONTENT01 ******************/
.para01{top:0;right:-25%;max-width:229px;margin:auto;}
/* CONTENT02 ******************/
.para02{top:0;left:0;max-width:198px;margin:auto;}
.para03{top:0;left:10%;max-width:151px;margin:auto;}
.para04{top:0;left:0;right:0;max-width:311px;margin:auto;}
.para05{top:0;right:10%;max-width:120px;margin:auto;}
.para06{top:0;right:0;max-width:60px;margin:auto;}
/* CONTENT02 ******************/
.para07{bottom:0;left:10%;max-width:151px;margin:auto;}
.para08{bottom:0;right:10%;max-width:198px;margin:auto;}

/*--------------------------------
media
--------------------------------*/

@media (max-width: 991px) {
	/** CONTENT2 **/
	.head{width:30%;margin-right:1rem;}
	.body{padding:0;width:calc(70% - 1rem);}
	.body td,.body th{width:100%;display:block;}
	.min{width:auto!important;min-width:145px;}
}
@media (max-width: 767px) {
	header{padding-top:2rem;}
	/** CONTENT1 **********************/
	.content1 .container{}
	.whiteBox{
		background:none;
		flex-wrap:wrap;
		position:relative;
	}
	.whiteBox::before{
		height:20px;
		width:80%;
		top:-20px;
		left:inherit;
		right:0;
	}
	.txtBox{
		background:url("../images/bg01_sp.png")no-repeat top center/100% 100%;
		width:100%;
		padding:3rem 1rem;
		margin-left:1rem;
	}
	.imgBox{
		top:-1rem;
		right: inherit;
		left:0;
		width:90%;
	}
	/** CONTENT2 **********************/
	.content2 .d-flex li:first-child{padding-top:0!important;}
	/** Paralux ************************/
	.para01{}
	.para02{max-width:30%;}
	.para03{max-width:20%;}
	.para04{max-width:60%;}
	.para05{max-width:23.75%;}
	.para06{max-width:11.375%;}
	.para07{max-width:30%;}
	.para08{max-width:25%;}
}
@media (max-width: 575px) {
}