@charset "utf-8";
h1 {
	max-width: 400px;
	width: 70%;
	margin: 30px 0 30px 0;
}
#h2 {
	background-color: #add686;
	padding: 16px 16px 6px 16px;
	border-radius: 10px;
}
h2 {
	margin: 0 0 10px 0;
	padding: 0 0 8px 0;
	border-bottom: 3px dotted #438349;
}

h3,h4,h5 {
	margin: 30px 0 10px 0;
	padding: 0 0 8px 0;
	border-bottom: solid 3px #add686;
	position: relative;
}

h3:after,h4:after,h5:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #438349;
	bottom: -3px;
	width: 30%;
}
.list1 li {
	margin: 0 0 .5em 0;
}
.list1 li::marker {
	color: #438349;
}
.banner1 ul {
	margin: 0;
	padding: 0;
}
.banner1 ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.banner1 ul li {
	margin: 10px 0 0 0;
}
.banner1 ul li img {
	max-width: 688px;
	width: 100%;
}
@media screen and (min-width:480px){

}
@media screen and (min-width:768px){
		.banner1 ul {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.banner1 ul li {
		margin: 15px 5px 0 5px;
	}
	.banner1 ul li img {
		max-width: 420px;
	}
}

.img-frame{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto 30px auto;
}

.img-frame{
   width: 100%;
   height: 300px;
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url("../img/index/slide01.jpg");
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url("../img/index/slide02.jpg");
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url("../img/index/slide03.jpg");
   animation: slide-animation-03 24s infinite;
}
.img-01 img {
	max-width: 815px;
	width: 100%;
	height: auto;
}
.img-02 img {
	max-width: 706px;
	width: 100%;
	height: auto;
}
.img-03 img {
	max-width: 950px;
	width: 100%;
	height: auto;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
.msg{
	font-size: 20px;
	color: #333;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .7);
}
.msg-03{
   z-index:1;
}