@charset "utf-8";
  

/*---------------------------------------
  メイン画像切替
---------------------------------------*/
.wrap{
  height: 50%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

@media screen and (min-width: 1800px) {
.slide-img img{
  width: 100%;
}	
}
.slide-img img{
  display: block;
  max-width: 100%;
}
@media screen and (min-width:600px) and (max-width:1200px){
.slide-img img{
  max-width: 100%;
}	
}
.main_img{
	position:relative;
}
.main_img .leaflet,
.main_img .illast1,
.main_img .illast2,
.main_img .illast3,
.main_img .title{
	position:absolute;
	z-index: 5;
}
.main_img .illast1{
	top:5%;
	left:50%;
	width:7%;
}
.main_img .illast2{
	top:30%;
	right:3%;
	width:9%;
}
.main_img .illast3{
	top:20%;
	left:3%;
	width:11%;
}
.main_img .leaflet{
	bottom:20%;
	right:3%;
	width:11%;
	max-width:150px;
	min-width:90px;
	z-index:10;
}
@media screen and (max-width: 600px) {
.main_img .leaflet{
	top:5%;
	right:5%;
}
}
.main_img .title{
	bottom:0;
	width:100%;
}
.swiper-container{
	max-height: 1000px;
}



@media screen and (max-width: 600px) {
.wrap{
  padding-bottom:110px;
}
.main_img .illast1{
	width:18%;
}
.main_img .illast2{
	top:45%;
	width:18%;
}
.main_img .illast3{
	width:24%;
}
}

@media screen and (max-width: 500px) {
.wrap{
  padding-bottom:100px;
}
}
@media screen and (max-width: 450px) {
.wrap{
  padding-bottom:80px;
}
}







/*---------------------------------------
  greetings
---------------------------------------*/
.greetings{
	background:#cbdd99;
}
.greetings .waku img{
	float:left;
	width:250px;
}
.greetings .inner{
	position:relative;
	overflow:initial;
}
.greetings .check{
	position:absolute;
	right:-42px;
	top:7rem;
}
.greetings .txt{
	margin-left:280px;
}
.greetings .btn_w{
	float:right;
}

@media screen and (max-width: 600px) {
.greetings .waku img{
	float:none;
	width:60%;
	margin:0 20% 1rem;
}
.greetings .txt{
	margin-left:0;
}
.greetings .inner{
	margin-right: 48px;
}
.greetings .btn_w{
	float:none;
}
}

/*---------------------------------------
  news
---------------------------------------*/

.news{
	background:#f5f1e6;
	position: relative;
	overflow: hidden;
	padding-top:5rem;
}
.news::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #cbdd99;  /* 三角を白にする */ 
  border-right: 100vw solid transparent;
}
.bg_img1{
	position:absolute;
	left:1%;
	width:11%;
	max-width: 183px;
}
.bg_img2{
	position:absolute;
	right:1%;
	top:20%;
	width:11%;
	max-width: 165px;
}
.news dl:first-child{
	border-top:1px dashed #bbaaa2;
}
.news dl{
	border-bottom:1px dashed #bbaaa2;
	padding:15px 0;
}
.news dt{
	width:150px;
	padding-left:10px;
	float:left;
}
.news dd{
	margin-left:160px;
}
.news dd a{
	position: relative;
	display:block;
	padding-right:30px;
}
.news dd a::before { /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  width: 23px; /* 横幅 */
  height: 23px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  background: #3f9543;
}
 
.news dd a::after { /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 8px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.scroll_waku{
	background:#fff;
	border-radius:5px;
	padding:1rem 5%;
	height: 300px;/*スクロールの高さ*/
	overflow-y: scroll;
}




@media screen and (max-width: 900px) {
.bg_img2{
	top:20%;
}
}
@media screen and (max-width: 600px) {
.bg_img1{
	top:0;
	width:18%;
}
.bg_img2{
	top:10%;
	width:18%;
}
.news{
	padding-top: 2rem;
}
.news dt{
	width:100%;
	float:none;
}
.news dd{
	margin-left:0;
	padding-top:10px;
	padding-left:10px;
}
}

/*---------------------------------------
  activity
---------------------------------------*/

.activity{
  background:#fff;
  position: relative;
  overflow: hidden;
  padding-top:5rem;
}
.activity::before {
  content: '';
  position: absolute;

  top: 0;
  left: 0;
  border-top: 10vw solid #f5f1e6;  /* 三角を白にする */ 
  border-left: 100vw solid transparent;
}

.bg_img3{
	position:absolute;
	left:1%;
	width:11%;
	max-width:230px;
}
.bg_img4{
	position:absolute;
	right:1%;
	top:45%;
	width:11%;
	max-width:194px;
}
.activity .bl_long{
	overflow:hidden;
	padding-bottom: 3rem;
}
.activity .bl_long img{
	width:45%;
}
.activity .left{
	float:left;
	margin:0 5% 20px 0;
}
.activity .right{
	float:right;
	margin:0 0 20px 5%;
}
.activity .bl_long strong{
	display:block;
	font-size:120%;
}
.activity .bl_long span{
	display:block;
	color:#3f9543;
	font-size:90%;
	padding-bottom:15px;
}

.activity .bl{
	width:30%;
	margin:0 1.5% 50px;
	float:left;
	box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
	border-radius:5px;
}
.activity .bl img{
	border-radius:5px 5px 0 0;
	width:100%;
}
.activity .bl dl{
	padding:15px 5%;
}
.activity .bl dt span{
	display:block;
	color:#3f9543;
}
.activity .bl dt strong{
	font-size:120%;
	line-height:2;
}
.activity .bl dd{
	padding-top:10px;
}



@media screen and (max-width: 600px) {
.bg_img3{
	top:0;
	width:18%;
}
.bg_img4{
	top:3%;
	width:18%;
}
.activity{
	padding-top:2rem;
}
.activity .bl_long img{
	width:100%;
	margin:0 0 20px 0;
	float:none;
}
.activity .bl{
	width:90%;
	margin:0 5% 2rem;
}

}


/*---------------------------------------
  kawaraban
---------------------------------------*/

.kawaraban{
  background-image:
    url(../img/bg_tree_right.png), /* 最前面の背景レイヤーの背景画像 */
    url(../img/bg_tree_left.png);
  background-repeat:
    repeat-y, /* 最前面の背景レイヤーに対応 */
	repeat-y;
  background-position:
    right, /* 最前面の背景レイヤーに対応 */
	left;
	position: relative;
	overflow: hidden;
	padding:5rem 0;
	background-size:
	13%;
}
.kawaraban::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #fff;  /* 三角を白にする */ 
  border-right: 100vw solid transparent;
}

.kawaraban .inner{
	width:50%;
	margin:0 25%;
}
.kawaraban .bl{
	width:40%;
	margin:0 5% 50px;
	float:left;
	text-align:center;
}
.kawaraban .bl img{
	width:100%;
	max-width:300px;
	border:1px solid #ccc;
}


@media screen and (max-width: 600px) {
.kawaraban{
	padding:4rem 0;
	background-size:
	25%;
}
.kawaraban .inner{
	margin:0 5%;
	width:90%;
	padding:0;
}
.kawaraban .bl{
	width:42%;
	border:1px solid #ccc;
	margin:0 3.5% 30px;
	float:left;
	text-align:center;
}
}


/*---------------------------------------
  バナーエリア
---------------------------------------*/

#bana_area{
	padding-bottom:5rem;
}
@media (max-width: 600px) {
#bana_area{
	padding-bottom:1rem;
}
}
#bana_area .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* バナーが1個でも中央寄せ */
}

#bana_area .inner a {
  flex: 1 1 calc(25% - 10px); /* 4列表示の基本 */
  max-width: 250px;           /* バナー1個のとき大きくなりすぎない */
  box-sizing: border-box;
  border:1px solid #ccc;
}

#bana_area .inner img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  #bana_area .inner a {
    flex: 1 1 calc(50% - 10px); /* 2列表示 */
    max-width: 150px;            /* スマホでも大きくなりすぎない */
  }
}