@charset "UTF-8";
.top_back {
background:  linear-gradient(180deg, #FFF 0%, #FFF 30%, #03C 30%, #03C 100%);
padding: 0 0 8% 0;
}
.swiper-container img,
.swiper-container video,
.swiper-container iframe {
    width: 100%;
    height: auto;
}

.swiper-custom-parent{
  width: 100%;
  position: relative;
}
.swiper-container {
  width: 84%;
}

.swiper-button-prev,
.swiper-button-prev2 {
  height: 20px;
  width: 20px;
	left:2px;
}
.swiper-button-next,
.swiper-button-next2 {
  height: 20px;
  width: 20px;
	right:2px;
}
.swiper-button-prev2,
.swiper-button-next2 {
	top:70%;
}
.slider2 {
width: 84%;
}
main {
	margin: 25px 0 0 0;
	 }

/*	 h4
/* ------------------------------------- */
.news h4,
.topics h4,
.naruhodo h4 {
	font-size: 110%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.news h4::before,
.news h4::after,
.naruhodo h4::before,
.naruhodo h4::after {
	content: '';
	width: 3px;
	height: 30px;
	background-color: #03C;
}
.topics h4::before,
.topics h4::after {
	content: '';
	width: 3px;
	height: 30px;
	background-color: #FFF;
}
h4::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
h4::after {
	margin-left: 30px;
	transform: rotate(35deg)
}


/*	 news
/* ------------------------------------- */
.news {
box-sizing:border-box;
background: url(../img/top/news01.jpg) no-repeat left top;
	background-size: 20%;
width:100%;
margin: 0 auto;
text-align: center;
	color: #03C;
}
.news2 {
padding: 8% 0;
box-sizing:border-box;
background: url(../img/top/news02.jpg) no-repeat right bottom;
	background-size: 20%;
width:100%;
margin: 0 auto;
text-align: center;
}
.news_box0 {
	width:84%;
	margin: 4% auto;
}
.news_box {
	margin: 0px 0px 5% 0px;
 line-height:1.4em;
 font-size:100%;
	text-align: left;
}

.day {
 color: #000;
 font-weight: normal;
 font-size:80%;
	float: left;
}
.news_box a {
 width: 100%;
	display: block;
	clear: both;
}
.news_box a h5 {
 color: #000;
 font-weight: normal;
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.news_box a:hover h5 {
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
	text-decoration: none;
}
/*	 topics
/* ------------------------------------- */
.topics {
background:#03C;
width:100%;
margin: 0 auto;
	padding: 8% 0;
text-align: center;
}
.topics h4 {
	color: #FFF;
}
.topics ul {
	margin: 4% 0;
}
.topics_box a {
	color:#FFF;
}

/*	 magazine
/* ------------------------------------- */
.magazine {
width:100%;
margin: 0 auto;
	padding: 8% 0;
text-align: center;
	color: #03C;
}
.magazine2 {
margin: 0px 8%;
box-sizing:border-box;
width:84%;
}
.ma01,
.ma02,
.ma03 {
	padding: 0 0 20px 0;
}
.magazine h4 {
width:100%;
box-sizing:border-box;
	padding: 7px 0;
	background: #03C;
	color: #FFF;
	font-size: 100%;
}
.ma01 h5 {
	margin: 10px 0 0 0;
	font-size: 150%;
	font-weight: normal;
}
.ma01 p {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	width:100%;
	border-bottom: 1px #03C dotted;
}
.ma02_box {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	width:100%;
	border-bottom: 1px #03C dotted;
}
.ma02 dl {
	margin: 10px 0 0 0;
}
.ma02 dt {
	float: left;
	width: 70%;
	text-align: left;
}
.ma02 dd {
	float: right;
	text-align: right;
	width: 30%;
	font-size: 130%
}
.ma03 {
	border-top: 1px #03C solid;
	padding: 20px 0 0 0;
}
.ma03 img {
	width: 50%;
	margin: 0 0 10px 0;
}

/*	 naruhodo
/* ------------------------------------- */
.naruhodo {
box-sizing:border-box;
background: url(../img/top/naruhodo.jpg) no-repeat center;
	background-size: 200%;
width:100%;
margin: 0 auto;
text-align: center;
color: #03C;
padding: 8%;
}
.naruhodo2 {
padding: 8%;
box-sizing:border-box;
background:rgba(255,255,255,0.7);
width:100%;
}
.naruhodo img {
width:100%;
}
.naruhodo a img {
	border: 0;
transition: 0.3s;
}

.naruhodo a:hover img {
opacity: 0.5;
}
.naruhodo_box01,
.naruhodo_box03 {
width:48%;
	float: left;
	margin: 4% 0 0 0;
}
.naruhodo_box02,
.naruhodo_box04 {
width:48%;
	float: right;
	margin: 4% 0 0 0;
}

/*	 link
/* ------------------------------------- */
.link {
	padding: 8% 0;
	background: #03C;
}
.link a img {
	border: 0;
transition: 0.3s;
}

.link a:hover img {
opacity: 0.5;
}
.link2 {
	padding: 8% 0 6% 0;
}

/* ------------------------------------- */
/*	 resposive768
/* ------------------------------------- */
@media screen and (min-width: 768px) {
.swiper-container {
  width: 85%;
}
.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev2,
.swiper-button-next2 {
  height: 30px;
  width: 30px;
}
.swiper-button-prev,
.swiper-button-prev2 {
	left:10px;
}
.swiper-button-next,
.swiper-button-next2 {
	right:10px;
}
.swiper-button-prev2,
.swiper-button-next2 {
	top:55%;
}
.slider2 {
width: 85%;
}
main {
	margin: 45px 0 0 0;
	 }
/*	 h4
/* ------------------------------------- */
.news h4,
.topics h4,
.naruhodo h4 {
	font-size: 160%;
}

/*	 info
/* ------------------------------------- */
.news {
background: url(../img/top/news01.jpg) no-repeat left top;
	background-size: 20%;
}
.news2 {
padding: 5% 10%;
background: url(../img/top/news02.jpg) no-repeat right bottom;
	background-size: 25%;
}
.news_box0 {
	margin: 2% auto;
}
.news_box {
	margin: 0px 0px 2% 0px;
}
.day {
 color: #000;
 font-weight: normal;
 font-size:80%;
	float: left;
width: 13%;
}
.news_box a {
 width: 70%;
	float: left;
	clear: none;
}
.news_box a h5 {
 color: #000;
 font-weight: normal;
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
/*	 topics
/* ------------------------------------- */
.topics {
	padding: 5% 0;
}
/*	 magazine
/* ------------------------------------- */
.magazine {
width:100%;
margin: 0 auto;
	padding: 8% 0;
text-align: center;
	color: #03C;
}
.magazine2 {
	background: #03C;
	width: 85%;
	margin: auto;
}
.magazine3 {
box-sizing:border-box;
	padding: 0px 3%;
	margin: 0px 1px;
	background: #FFF;
}

.ma01 {
	box-sizing:border-box;
	padding: 0 3% 0 0;
	margin: 0 3% 0 0;
	width: 22%;
	float: left;
	border-right: 1px #03C solid;
}
.ma02 {
	box-sizing:border-box;
	padding: 0 3% 0 0;
	margin: 0 3% 0 0;
	width: 44%;
	float: left;
	border-right: 1px #03C solid;
}
.ma03 {
	box-sizing:border-box;
	padding: 0;
	margin: 0;
	width: 28%;
	float: left;
	border-right: none;
	border-top: none;
}
.ma01 h5 {
	margin: 28px 0 0 0;
}
.ma01 p {
	margin: 0 0 3px 0;
	padding: 0 0 28px 0;
}
.ma02_box {
	margin: 0 0 3px 0;
	padding: 0 0 3px 0;
}
.ma02 dl {
	margin: 10px 0 0 0;
}
.ma02 dt {
	float: left;
	width: 70%;
	text-align: left;
}
.ma02 dd {
	float: right;
	text-align: right;
	width: 30%;
	font-size: 130%
}
.ma03 img {
	width: 100%;
}
/*	 naruhodo
/* ------------------------------------- */
.naruhodo {
background: url(../img/top/naruhodo.jpg) no-repeat center;
	background-size: 100%;
padding: 7.5%;
}
.naruhodo2 {
padding: 5%;
}
.naruhodo_box01,
.naruhodo_box02,
.naruhodo_box03 {
width:23%;
	float: left;
	margin: 5% 2% 0 0;
}
.naruhodo_box04 {
width:23%;
	float: right;
	margin: 5% 0 0 0;
}

/*	 link
/* ------------------------------------- */
.link {
	padding: 5% 0;
	background: #03C;
}
.link2 {
	padding: 5% 0;
}
.link2_1 {
		width: 24%;
	margin: 0 1.333% 0 0;
	float:left;
}
.link2_2 {
		width: 24%;
	float:left;
}
}
/* ------------------------------------- */
/*	 resposive1100
/* ------------------------------------- */
@media screen and (min-width: 1100px) {
.top_back {
padding: 0 0 6% 0;
}
.swiper-container img,
.swiper-container video,
.swiper-container iframe {
    width: 960px;
}
@media screen and (min-width: 1300px) {
.swiper-container img,
.swiper-container video,
.swiper-container iframe {
    width: 1100px;
	}
	}

.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev2,
.swiper-button-next2 {
  height:50px;
  width: 50px;
}
.swiper-button-prev,
.swiper-button-prev2 {
	left: auto;
	right:95%;
}
.swiper-button-next,
.swiper-button-next2 {
	right: auto;
	left:95%;
}
.swiper-button-prev2,
.swiper-button-next2 {
	top:40%;
}
.slider2 {
width: 1100px;
}
.slider2 img {
width: 100%;
}
main {
	margin: 75px 0 0 0;
	}
/*	 news
/* ------------------------------------- */
.news {
	background-size: 18%;
}
.news2 {
padding: 5% 0;
	background-size: 18%;
}
.news_box0 {
	width:700px;
}
.day {
width: 12%;
}
.news_box a {
 width: 73%;
}
/*	 topics
/* ------------------------------------- */
.topics ul {
	margin: 2% auto;
}
/*	 magazine
/* ------------------------------------- */
.magazine {
width:1100px;
margin: 0 auto;
padding: 5% 0;
text-align: center;
color: #03C;
}
.magazine2 {
	background: #03C;
	width:100%;
}
.magazine3 {
box-sizing:border-box;
padding: 0px 7%;
margin: 0px 1px;
	background: #FFF;
}

.ma01 {
	box-sizing:border-box;
	padding: 0 7% 0 0;
	margin: 0 7% 0 0;
	width: 22%;
	float: left;
	border-right: 1px #03C solid;
}
.ma02 {
	box-sizing:border-box;
	padding: 0 7% 0 0;
	margin: 0 7% 0 0;
	width: 40%;
	float: left;
	border-right: 1px #03C solid;
}
.ma03 {
	box-sizing:border-box;
	padding: 0;
	margin: 0;
	width: 24%;
	float: left;
	border-right: none;
	border-top: none;
}
.ma01 h5 {
	margin: 28px 0 0 0;
}
.ma01 p {
	margin: 0 0 3px 0;
	padding: 0 0 28px 0;
}
.ma02_box {
	margin: 0 0 3px 0;
	padding: 0 0 3px 0;
}
.ma02 dl {
	margin: 10px 0 0 0;
}
.ma02 dt {
	float: left;
	width: 70%;
	text-align: left;
}
.ma02 dd {
	float: right;
	text-align: right;
	width: 30%;
	font-size: 130%
}
.ma03 img {
	width: 100%;
}
/*	 naruhodo
/* ------------------------------------- */
.naruhodo {
background: url(../img/top/naruhodo.jpg) no-repeat center;
	background-size: 100%;
}
.naruhodo2 {
	width: 1100px;
padding: 5%;
	margin: auto;
}
.naruhodo_box01,
.naruhodo_box02,
.naruhodo_box03 {
width:23%;
	float: left;
	margin: 5% 2% 0 0;
}
.naruhodo_box04 {
width:23%;
	float: right;
	margin: 5% 0 0 0;
}
	
/*	 link
/* ------------------------------------- */
.link01_h {
	height: 70px !important;
}

}


/*	 button
/* ------------------------------------- */
	
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more,
button.learn-more2 {
  width: 10rem;
  height: auto;
}
button.learn-more .circle,
button.learn-more2 .circle2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: #03C;
  border-radius: 1.625rem;
}
button.learn-more2 .circle2 {
  background: #FFF;
}
button.learn-more .circle .icon_b,
button.learn-more2 .circle2 .icon_b2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more2 .circle2 .icon_b2 {
  background: #03C;
}
button.learn-more .circle .icon_b.arrow,
button.learn-more2 .circle2 .icon_b2.arrow2{
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 0rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon_b.arrow::before,
button.learn-more2 .circle2 .icon_b2.arrow2::before{
  position: absolute;
  content: "";
  top: -0.3rem;
  right: -0.8rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more2 .circle2 .icon_b2.arrow2::before{
  border-top: 0.125rem solid #03C;
  border-right: 0.125rem solid #03C;
}
button.learn-more .button-text,
button.learn-more2 .button-text2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4rem 0;
  margin: 0 0 0 20px;
  color: #03C;
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
  text-transform: uppercase;
}
button.learn-more2 .button-text2 {
  color: #FFF;
}
button:hover .circle,
button:hover .circle2 {
  width: 100%;
}
button:hover .circle .icon_b.arrow {
  background: #fff;
  transform: translate(.5rem, 0);
}
button:hover .circle .icon_b2.arrow2 {
  background: #03C;
  transform: translate(.5rem, 0);
}
button:hover .button-text {
  color: #fff;
}	
button:hover .button-text2 {
  color: #03C;
}

section {max-width: 100%;margin: 0 auto;  padding: 0px 0px 10px 0px;}
a.btn_01 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #03C;
  border: 1px solid #03C;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_01:hover {background: #fff;color: #03C;}
a.btn_03 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #fff;
  border: 1px solid #03C;
  box-sizing: border-box;
  color: #03C;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_03:hover {background: #03C;color: #fff;}
a.btn_l01 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #0099E2;
  border: 1px solid #0099E2;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_l01:hover {background: #fff;color: #0099E2;}
a.btn_l02 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #F69;
  border: 1px solid #F69;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_l02:hover {background: #fff;color: #F69;}
a.btn_l03 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #090;
  border: 1px solid #090;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_l03:hover {background: #fff;color: #090;}
a.btn_l04 {
  display: flex;margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
background: #FF8300;
  border: 1px solid #FF8300;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  transition-duration: 0.4s;
}
a.btn_l04:hover {background: #fff;color: #FF8300;}

*, *:before, *:after {
	box-sizing: border-box;
}