@charset "UTF-8";


.mv_section {
  height: 500px;
  position: relative;
  padding: 0;
}

.mv_section::before {
  position: absolute;
  content: "";
  width: 193px;
  height: 500px;
  background: url(../img/top/mg_left_triangle.png) center / contain no-repeat;
  z-index: 1;
  left: 0px;
  top: 0;
}

.mv_section::after {
  position: absolute;
  content: "";
  width: 205px;
  height: 500px;
  background: url(../img/top/mg_right_triangle.png) center / contain no-repeat;
  z-index: 1;
  right: 0px;
  top: 0;
}

.mv_section .mv_inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mv_section .h1 {
  width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  position: relative;
  z-index: 9;
  margin-top: 2em;
  position: absolute;
  top: 17%;
}

.mv_section .h1:before {
  position: absolute;
  content: "";
  width: 61px;
  height: 56px;
  background: url(../img/top/kirakira.png) center / contain no-repeat;
  z-index: 1;
  right: -11px;
  top: -16px;
  transform: translate(-50%, -50%);
}

.mv_section .h1:after {
  position: absolute;
  content: "";
  width: 600px;
  height: 127px;
  background: url(../img/top/h1_back.png) center/contain no-repeat;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mv_section .h1 span {
  font-size: 4.6rem;
  color: #333;
  transform: rotate(-3.7deg);
  letter-spacing: .1em;
  margin-left: 0.6em;
}

.mv_section .mv_inner .lead_text {
  font-size: 2.8rem;
  color: #fff;
  text-shadow: 3px 3px 3px#333;
  margin-top: 1.7em;
  text-align: center;
  position: absolute;
  z-index: 9;
  top: 39%;
}

.mv_area {
  height: 100%;
}

.mv_area img{
  height: 500px;
  width: 100vw;
  object-fit: cover;
}

.menu_area {
  padding-top: 20px;
  position: relative;
}

.menu_area::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 55%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #dbf2d6;
  z-index: -1;
}

.menu_area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.menu_area ul li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6px solid #3aa201;
  border-radius: 15px;
  margin-bottom: 15px;
  background: #fff;
}

.menu_area ul li::before {
  position: absolute;
  content: "";
  width: 41px;
  height: 11px;
  background: url(../img/common/black_arrow.png) center / contain no-repeat;
  bottom: 5px;
  right: 5px;
  z-index: 2;
}

.menu_area ul li::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 24px solid transparent;
  border-left: 24px solid transparent;
  border-bottom: 24px solid #3aa201;
  border-top: 0;
  transform: rotate(135deg);
  bottom: -5px;
  right: -18px;
  z-index: 1;
}

.menu_area ul li a {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu_area li.vertical {
  width: 24%;
  height: 200px;
  padding-bottom: 20px;
  align-items: flex-end;
}

.menu_area ul li.vertical a {
  flex-direction: column;
  justify-content: flex-end;
}

.menu_area li.horizontal {
  width: 24%;
  height: 120px;
}

.menu_area li.horizontal a {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.menu_area ul li img {
  width: auto;
  height: 80px;
  object-fit: contain;
}

.menu_area ul .horizontal img {
  width: auto;
  height: 60px;
  object-fit: contain;
}

.menu_area ul li p {
  font-weight: bold;
  text-align: center;
}

.menu_area li.vertical p {
  padding-top: 10px;
}

.about_section {
  position: relative;
  z-index: 1;
  border-top: 7px solid #3aa201;
  background: #dbf2d6;
  padding: 60px 0 20px;
}

.about_section::before {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/top/about_bg.jpg) left/cover no-repeat;
  top: 0;
  left: 0;
  z-index: -1;
}

.about_section::after {
  position: absolute;
  content: "";
  width: 51%;
  height: 110%;
  background: url(../img/top/about_img.png) right / cover no-repeat;
  top: -10%;
  right: 0;
  z-index: 2;
}

.about_section .title {
  font-size: 3rem;
  font-weight: bold;
  background: #fff;
  padding: .2em 1em;
  width: fit-content;
  margin-bottom: 1em;
}

.pamphlet_section .text {
  text-align: center;
  margin-bottom: 3em;
}

.pamphlet_section .flex_box {
  max-width: 1000px;
  justify-content: space-between;
  margin: 0 auto;
}

.pamphlet_section .flex_item {
  width: 22%;
  margin-bottom: 3em;
  position: relative;
}

.pamphlet_section .flex_item::after {
  position: absolute;
  content: "";
  bottom: 60px;
  right: -6px;
  width: 40px;
  height: 40px;
  background: url(../img/common/download_icon.png) center / contain no-repeat;
}

.pamphlet_section .flex_item.kara::after {
  display: none;
}

.pamphlet_section .flex_item .caption {
  padding-top: 1em;
}







@media screen and (min-width: 768px) {}

@media screen and (max-width: 768px) {

  main {
    position: relative;
  }

  section {
    padding: 60px 0 40px;
  }

  .mv_section {
    height: 80vw;
  }

  .mv_section .h1 {
    width: 100%;
    height: auto;
  }

  .mv_area img{
    height: 100%;
    
  }

  .mv_section .h1 span {
    font-size: 6.5vw;
    display: block;
    margin-left: 5%;
  }

  .mv_section .h1:before {
    width: 12vw;
    height: 11vw;
    right: 0;
    top: -3vw;
  }

  .mv_section .h1:after {
    width: 90vw;
  }

  .mv_section .mv_inner .lead_text {
    font-size: min(5vw, 2rem);
  }

  .mv_section::before {
    width: 31vw;
    height: 80vw;
  }

  .mv_section::after {
    width: 33vw;
    height: 80vw;
  }

  .bx-wrapper img{
    height: 80vw;
    object-position: left;
  }

  .menu_area li.vertical {
    width: 48%;
    height: 40vw;
    letter-spacing: -0.1rem;
  }

  .menu_area li.horizontal {
    width: 100%;
    height: 24vw;
  }

  .menu_area ul li img {
    height: 50px;
  }

  .news_section {
    padding-bottom: 70px;
  }

  .about_section {
    padding-top: 29vw;
  }

  .about_section::before {
    width: 100%;
    background-position: bottom;
  }

  .about_section::after {
    width: 80vw;
    height: 50vw;
  }

  .about_section .title {
    position: relative;
    z-index: 92;
    font-size: min(7vw, 3rem);
  }

  .about_section::text {
    padding: 0 3%;
  }

  .pamphlet_section .flex_box {
    justify-content: space-around;
  }

  .pamphlet_section .flex_item {
    width: 44%;
    margin-bottom: 1.5em;
  }

  .pamphlet_section .flex_item::after {
    bottom: 75px;
    right: -4px;
    width: 34px;
    height: 34px;
  }






















}

@media screen and (max-width: 375px) {

  body{
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  }

  p{
    line-height: 1.3;
  }

  .menu_area li.vertical {
    padding-bottom: 15px;
  }

  .info-detail__text,.info-detail__date,.info-detail__icon{
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  }

  .about_section .title {
    font-size: clamp(2rem, 5vw, 2.3rem);
  }

  .menu_area ul li.vertical a {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  }


}