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

/*-------------------------------
	btn-arr
--------------------------------*/
.btn-arr-wrap {
	padding:40px 20px;
	background:#2B8DD3;
	overflow:hidden;
}
.btn-arr-wrap h2 {
	color:#FFF;
	font-size:32px;
}
.btn-arr {
	width:1100px;
	margin:30px auto 0;
}
.btn-arr a {
	height:80px;
	display:block;
	float:left;
	position: relative;
	overflow: hidden;
}
.btn-arr-01 a {
	width:220px;
	background:url(../images/btn-arr-01.png) no-repeat left -80px / 220px 160px;
}
.btn-arr-02 a {
	width:250px;
	margin-left:-25px;
	background:url(../images/btn-arr-02.png) no-repeat left -80px / 250px 160px;
}
.btn-arr-03 a {
	width:250px;
	margin-left:-25px;
	background:url(../images/btn-arr-03.png) no-repeat left -80px / 250px 160px;
}
.btn-arr-04 a {
	width:250px;
	margin-left:-25px;
	background:url(../images/btn-arr-04.png) no-repeat left -80px / 250px 160px;
}
.btn-arr-05 a {
	width:230px;
	margin-left:-25px;
	background:url(../images/btn-arr-05.png) no-repeat left -80px / 230px 160px;
}
.active a {
	background-position: left top ;
}
.btn-arr a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	background-position: left top;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.btn-arr a:hover::after {
	opacity: 1;
}
@media only screen and (max-width:1099px){
.btn-arr-wrap {
	padding:40px 0;
}
.btn-arr {
	width:670px;
	margin:30px auto 0;
	display:block;
	background:#EEE;
}
.btn-arr  a {
	margin-bottom:5px;
}
.btn-arr-br {
	width:450px;
	margin:0 auto;
}
}
@media only screen and (max-width:690px){
.btn-arr-wrap {
	padding:20px 0;
	background:#2B8DD3;
	overflow:hidden;
}
.btn-arr-wrap h2 {
	color:#FFF;
	font-size:18px;
}
.btn-arr {
	width:336px;
	margin:15px auto 0;
}
.btn-arr a {
	height:40px;
	display:block;
	float:left;
	position: relative;
	overflow: hidden;
}
.btn-arr-01 a {
	width:110px;
	margin-bottom:5px;
	background:url(../images/btn-arr-01.png) no-repeat left -40px / 110px 80px;
}
.btn-arr-02 a {
	width:125px;
	margin-left:-12px;
	margin-bottom:5px;
	background:url(../images/btn-arr-02.png) no-repeat left -40px / 125px 80px;
}
.btn-arr-03 a {
	width:125px;
	margin-left:-12px;
	margin-bottom:5px;
	background:url(../images/btn-arr-03.png) no-repeat left -40px / 125px 80px;
}
.btn-arr-04 a {
	width:125px;
	margin-left:0;
	background:url(../images/btn-arr-04.png) no-repeat left -40px / 125px 80px;
}
.btn-arr-05 a {
	width:115px;
	margin-left:-12px;
	background:url(../images/btn-arr-05.png) no-repeat left -40px / 115px 80px;
}
.active a {
	background-position: left top ;
}
.btn-arr-br {
	width:228px;
	margin:0 auto;
	display:block;
}
}
@media only screen and (max-width:374px){
.btn-arr-wrap {
	margin-left:-6px;
}
}

/*-------------------------------
	pager
--------------------------------*/
.pager {
  width: 100%;
  max-width: 1000px;
  margin: 150px auto 50px;
  display: flex;
  align-items: center;
}
.pager-prev,
.pager-next {
  width: 380px; 
}
.pager-prev {
  margin-right: auto;
}
.pager-next {
  margin-left: auto;
}
.pager-prev:empty,
.pager-next:empty {
  display: none;
}
.pager img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width:760px){
  .pager {
    width: 90%;
    margin: 60px auto 10px;
	flex-direction:column;
	justify-content:center;
	gap:10px;
  }
  .pager-prev,
  .pager-next {
    width: 280px;
	margin:auto;
  }
}