@charset "UTF-8";

main {
	margin: 17px 0 0 0;
	z-index: 10;
	width: 100%;
	 }
.wrap-video {
position: relative;
    width: 100vw;
    overflow: hidden;
}
.wrap-video video {
  width: 100%;
  object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/
display: block;
}
.wrap-video img {
  width: 100%;
}
.rslides {
	display:none;
}
.rslides2 {
	display: block;
}
.message_box {
	background: linear-gradient(180deg, #FFFDE5 0%, #FFFDE5 70px, #FFF 70px, #FFF 100%);
	width: 100%;
}
.message {
	background: url("../img/top/back01s.png") no-repeat;
	background-size: 128%;
	width: 100%;
}
.message0 {
	padding: 15% 8% 30px 8%;
}
.message_t {
	margin: 13px auto 0 auto;
	text-align: center;
}
.message_t h4 {
	font-size: 130%;
	font-weight: normal;
	line-height: 1.6;
}
.message_t p {
	font-size: 90%;
	line-height: 1.6;
	padding: 5px 0 0 0;
	text-align: justify;
}
.message_i {
width:100%;
}
.message_i img {
width:100%;
border-radius: 30px;
}

/*	 news
/* ------------------------------------- */
.news {	
	background: url("../img/top/back02s.png") no-repeat;
	background-size: 100%;
	width: 100%;
	padding: 6% 0 3% 0;
	box-sizing: border-box;
}
.news_l {
	width: 84%;
	padding: 0 0 6% 0;
	margin:  0 auto 6% auto;
	border-bottom: 1px solid #09F;
	text-align: center;
}
.news h4 {
	text-align: center;
	color: #09F;
	font-size: 160%;
	font-weight: normal;
	margin: 30px 0 10px 0;
}

.news_box {
	width: 84%;
	margin: 0px auto 5% auto;
 line-height:1.4em;
 font-size:100%;
	text-align: left;
}

.day {
 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;
}

.banner {
	width: 84%;
	margin: 0 auto 8% auto;
}
.banner img {
	width: 100%;
	border-radius: 30px;
}
.banner a img {
transition: 0.3s;
}
.banner a:hover img {
opacity: 0.5;
}
/*	 insta
/* ------------------------------------- */
.insta {
	background: #FFFDE5;
	padding: 8% 0;
}
.insta h4 {
	font-size: 200%;
	margin: 0 auto 20px auto;
	text-align: center;
}
/*	 link
/* ------------------------------------- */
.link {
padding: 8% 0 0 0;
}
.link a img {
transition: 0.3s;
	border-radius: 30px;
}
.link a:hover img {
opacity: 0.5;
}
/* ------------------------------------- */
/*	 resposive480
/* ------------------------------------- */
@media screen and (min-width: 430px) {
.wrap-video {
	text-align: center;
}
.wrap-video video {
	width: 100%;
}
.message {
	background: url("../img/top/back01s.png") no-repeat;
	background-size: 113%;
}
}

/* ------------------------------------- */
/*	 resposive768
/* ------------------------------------- */
@media screen and (min-width: 768px) {
main {
	margin: 30px 0 0 0;
	 }

.message {
	background: url("../img/top/back01.png") no-repeat;
	background-size: 100%;
	width: 100%;
}
.message0 {
	padding: 8% 8% 30px 8%;
}
.message_t h4 {
	font-size: 150%;
	line-height: 1.6;
	text-align: left;
}
.message_t {
width:48%;
	margin: 0;
	float: left;
}
.message_i {
width:48%;
	float: right;
}
/*	 news
/* ------------------------------------- */
.news {
	background: url("../img/top/back02.png") no-repeat;
	background-size: 100%;
	padding: 10% 0 0 8%;
}
.news0 {
	padding: 0 0 6% 0;
}
.news_l {
	width: 22%;
	padding: 3% 0;
	margin:  0 5% 0 0;
	border-bottom: none;
	border-right: 1px solid #09F;
	text-align: left;
	float: left;
}
.news h4 {
	font-size: 200%;
	margin: 10px 0 20px 0px;
	float: left;
}
.news_r {
	width: 64%;
	float: left;
	margin:  1% 0 0 0;
}
.news_box {
	margin: 0px 0px 2% 0px;
	width: 100%;
}
.day {
 font-weight: normal;
 font-size:90%;
	float: left;
width: 25%;
}
.news_box a {
 width: 75%;
	float: left;
	clear: none;
}
.banner {
	width: 70%;
	margin: 0 auto 8% auto;
}
	
/*	 insta
/* ------------------------------------- */
.insta {
	padding: 6% 0;
}
.insta h4 {
	font-size: 230%;
}

/*	 link
/* ------------------------------------- */
.link {
padding: 6% 0;
}
	
}
/* ------------------------------------- */
/*	 resposive980
/* ------------------------------------- */
@media screen and (min-width: 980px) {
main {
	margin: 50px 0 0 0;
	 }
.message {
	padding: 0;
}
.message0 {
	width: 980px;
	margin: auto;
	padding: 7% 0 4% 0;
}
.message_t h4{
	font-size: 200%;
	line-height: 1.8;
}
.message p {
	font-size: 100%;
	line-height: 2.2;
}
/*	 news
/* ------------------------------------- */
.news {
	padding: 7% 0 0 0;
}
.news0 {
	width: 800px;
	margin: auto;
	padding: 0 0 3% 0;
}
.news_l {
	width: 19%;
	margin:  0 4% 0 0;
}
.news_r {
	width: 74%;
	float: left;
	margin:  1% 0 0 0;
}

.day {
width: 19%;
}
.news_box a {
 width: 77%;
}
	
.banner {
	width: 800px;
	margin: 0 auto 4% auto;
}

/*	 insta
/* ------------------------------------- */
.insta,
.link {
	padding: 4% 0;
}
}

/*	 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 {
  width: 9.5rem;
  height: auto;
}
button.learn-more .circle {
  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: #09F;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon_b {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #09F;
}
button.learn-more .circle .icon_b.arrow {
  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 {
  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-more .button-text {
  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: #09F;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon_b.arrow {
  background: #09F;
  transform: translate(.5rem, 0);
}
button:hover .button-text {
  color: #FFF;
}