@charset 'utf-8';
/* ==========================================

 園の行事

========================================== */
/*---------------- ▽sub main MV用▽ ----------------*/
.sub_mv{
  width: 100%;
  height: 270px;
  position: relative;
  background: url(image/2025_event_header_img.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sub_mv .sub_mv_content{
  width: 386px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.sub_mv .sub_mv_content img{
  width: 100%;
}
@media screen and (max-width: 760px){
  .sub_mv{
    height: 21.09vw;
  }
  .sub_mv .sub_mv_content{
    width: 37.81%;
  }
}
/*---------------- △sub main MV枠用△ ----------------*/
/*---------------- ▽園の行事用スライダー▽ ----------------*/
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

/*---------------- △園の行事用スライダー△ ----------------*/

.headertop:after {
  content: "";
  display: block;
  clear: both;
}

.usuki {
 float: left;
 width: 50%;
     }

.menu {
  float: left;
  width: 50%;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li a {
 display: block;
 padding: 5px;
 color: #603813;
 font-size: 20px;
 text-decoration: none;
}

.menu ul:after {
  content: "";
  display: block;
  clear: both;
}

.menu li {
  float: left;
}

.menu li a:hover {
  background-color: #
}

.accessjoboffer:after {
  content: "";
  display: block;
             }

.headerinfo {
  padding-top: 27px;
  padding-right: 152px;
  line-height: 39px;
}

.joboffer {
  display: block;
  border-radius: 8px;
  padding: 0 13px;
  margin: 4px;
  color: #603813;
  font-size: 22px;
  background-color: #a5d264;
}

.access {
  display: block;
  border-radius: 8px;
  padding: 0 13px;
  margin: 4px;
  color: #603813;
  font-size: 22px;
  background-color: #fac766;
}

.access a  {
 display: block;
 text-decoration: none;
}

.joboffer a {
  display: block;
  text-decoration: none;
}


.headerphone {
 color: #603813;
 font-size: 35px;
 display: block;
 text-decoration: none;
}

.boxA {
  clear: both;
}

.usuki {
  float: left;
}

.headerinfo {
  float: right;
}

.accessjoboffer {
  clear: both;
}

.access {
  float: left;
}

.joboffer {
  float: left;
}


#menu {
  display: none;
}

#menubtn {
 background-color: #;
 position: absolute;
 top: 47px;
 right: 90px;
 border: solid 0;
 background-color: initial;
 cursor: pointer;
}

#menubtn span {
  display: inline-block;
  text-indent: -9999px;
}

#menubtn i {
  color: #603813;
  font-size: 35px;
}

#menubtn:focus {
  outline: none;
}

.main_mv {
  margin-bottom: 50px;
}
.box1{
  width: 100%;
  margin: 0 auto;
}
.each {
 margin-bottom: 70px;
}
.season{
  width: 190px;
}
.season img{
  width: 100%;
}
.allseason {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 100px;
}
.allseason a:hover {
  /* background: #000; */
  /* width: 100px;
  height: 100px; */
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.event-ttl img {
  width: 100%;
}

.event-line img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 40px;
}

.contents {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

}

.btn10 img {
  width: 155px;
  margin-left: 75px;
}

.btn11 {
position: relative;
}

.btn11 img {
  width: 155px;
  position: absolute;
  left: 4px;
  top: -20px;
}

.month img {
  width: 250px;
  padding-right: 15px;
}

.event-min {
  font-size: 14px;
  line-height: 1.3em;
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  text-align: center;

}

.event-min.event5{
  width: 50%;
}

.event-min.event6 {
  width: 65%;
}

.event-min.event7 {
   width: 50%;
}

.event-min.event8 {
  width: 35%;
}

.event-min.event9 {
  width: 65%;
}

.event-min.event10 {
  width: 35%;
}

.event-min.event11 {
  width: 50%;
}

.event-min.event12 {
  width: 65%;
}

.event-min.event1 {
  width: 35%;
}

.event-min.event2 {
  width: 65%;
}

.event-min.event3 {
  width: 60%;
}

.mini {
  font-size: 16px;
  height: 30px;
  color: #ffffff;
  background-color: #FC6A8A;
  padding: 5px 8px 5px 8px;
  margin: 3px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mini.mini5 {
 background-color: #E9522A;
}

.mini.mini6 {
 background-color: #E95295;
}

.mini.mini7 {
 background-color: #9DC04C;
}

.mini.mini8 {
 background-color: #009854;
}

.mini.mini9 {
 background-color: #005842;
}

.mini.mini10 {
 background-color: #F15A24;
}

.mini.mini11 {
 background-color: #BF7834;
}

.mini.mini12 {
 background-color: #E9474D;
}

.mini.mini01 {
 background-color: #278BC7;
}

.mini.mini02 {
 background-color: #6C9BD2;
}

.mini.mini03 {
 background-color: #00AFCC;
}


.seasonpic {
  width: 100%;
  margin-bottom: 85px;
  display: flex;
  justify-content: space-around;
}

.left-picture {
  margin-right: 10px;
}

.right-pic {
  margin-bottom: 10px;
}

.left-pic img {
width: 500px;
}

.right-pic img {
  width: 290px;
}

.flag-img {
  text-align: center;
  margin-bottom: 50px;
}

.flag-img img {
  width:750px;
}
.event_box{
  background: url(image/bg_suisai_undoukai.png);
  border-top: solid;
  border-bottom: solid;
  -moz-border-image: url(../common/images/header_frame.png) 30 repeat round;
  -webkit-border-image: url(../common/images/header_frame.png) 30 repeat round;
  -ms-border-image: url(../common/images/header_frame.png) 30 repeat round;
  border-image: url(../common/images/header_frame.png) 30 repeat round;
  border-width: 30px 0 30px 0;
}

.happyou{
  background: url(image/bg_suisai_hapyou.png);
}
/* 全体の横幅 */
.Y800 {
 color: #603813;
 width: 800px;
 margin: 26px auto 0;
}

.events {
  width: 800px;
  margin: 10px auto 40px;
}

@media screen and (max-width: 800px){
  .box1{
    width: 90%;
    margin: 0 auto;
  }
  .Y800{
    width: 100%;
  }
  .season{
    width: 20vw;
  }
  .event-ttl{
    width: 90%;
    margin: 0 auto;
  }
  .event-line{
    width: 90%;
    margin: 0 auto;
  }
  .contents{
    width: 90%;
    margin: 0 auto 2.5vw;
  }
  .seasonpic{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 6vw;
  }
  .seasonpic img{
    width: 100%;
  }
  .btn10 img{
    width: 18.75vw;
    margin: 0;
  }
  .event-min.event12{
    width: 60%;
  }
  .mini{
    font-size: 0.889em;
   line-height: 1.2em;
   padding: 0.63vw 1vw;
    margin: 0.38vw;
  }
  .btn11 img{
    width: 19.38vw;
    position: absolute;
    left: 2vw;
    top: -2.5vw;
  }
  .events{
    width: 90%;
    margin: 1.25vw auto 5vw;
  }
  .flag-img{
    margin: 0 auto 5vw;
    width: 90vw;
  }
  .flag-img img{
    width: 100%;
  }
  .month img{
    width: 100%;
  }
  .month{
    width: 40%;
  }
  .allseason{
    margin-bottom: 10vw;
  }
  .each{
    margin-bottom: 8.75vw;
    overflow: hidden;
  }
  .left-picture{
    margin-right: 1.25vw;
  }
  .right-pic{
    margin-right: 1.25vw;
  }
	
	.left-pic img{
    width: 56vw;
  }
  .right-pic img{
    width: 31.5vw;
  }
}
@media screen and (max-width: 660px){
  .contents{
    display: block;
    position: relative;
  }
  .month{
    width: 60%;
    margin: 0 auto 2vw;
  }
  .event-min{
    width: 100%;
    justify-content: center;
  }
	
  .event-min.event5,
  .event-min.event6,
  .event-min.event7,
  .event-min.event8,
  .event-min.event9,
  .event-min.event10,
  .event-min.event11,
  .event-min.event12,
  .event-min.event1,
  .event-min.event2,
  .event-min.event3{
    width: 100%;
  }
  .mini{
    font-size: 2vw;
  }
  .btn10{
    position: absolute;
    top: 8vw;
    right: 0;
  }
}
@media screen and (max-width: 460px){
  .season{
    width: 40vw;
  }
  .event-ttl{
    width: 200%;
    margin-bottom: 8.75vw;
    position: relative;
    left: -52vw;
  }
  .event-line img{
    display: none;
  }
  .mini{
    font-size: 3vw;
  }
  .btn10{
    position: absolute;
    top: 0;
    right: 0;
  }
  .btn10 img{
    width: 20vw;
    margin: 0;
  }
  .each{
    position: relative;
  }
  .btn11{
    position: static;
  }
  .btn11 img{
    width: 20vw;
    position: absolute;
    left: 4vw;
    top: 0;
  }
}
@media screen and (max-width: 380px){
  .mini{
    font-size: 4vw;
  }
}