@charset "UTF-8";

main{
  background-color: #fff;
}

.mv{
  position: relative;
}
.mv .tit{
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}
.mv .tit img{
  display: block;
  max-width: 560px;
  margin: 0 auto 20px;
}
.mv .tit span{
  color: #fff;
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1.6;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}
.mv .img span{
  bottom: 0;
  right: 0;
  display: block;
  padding: 5px 30px;
  background: linear-gradient(to right,  rgba(51,51,51,0) 0%,rgba(51,51,51,0.5) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media screen and (max-width: 767px) {
  .mv .tit{
    top: 25px;
  }
  .mv .tit img{
    max-width: 200px;
    margin: 0 auto 10px;
  }
  .mv .tit span{
    position: relative;
    bottom: initial;
    left: initial;
    text-align: center;
    font-size: clamp(14px, 4vw, 22px);
  }
  .mv .img span{
    bottom: 0;
    right: 0;
    display: block;
    padding: 5px 20px;
  }
}

.kukakuzu {
  max-width: 1100px;
  width: 96%;
  margin: 0 auto;
  padding: 0 0 2%;
  position: relative;
}
.kukakuzu .img{
  width: 100%;
  margin: 0 0 0 auto;
  position: relative;
}
.kukakuzu .text{
  color: #142f5a;
  font-size: clamp(14px, 1.8vw, 28px);
  line-height: 2.2;
  width: 100%;
  position: absolute;
  top: 20%;
  left: -5%;
  z-index: 1;
}
.kukakuzu .btn{
  display: flex;
  position: absolute;
  width: 22.5%;
  border-radius: 5px;
  border: solid 2px #fff;
  background: linear-gradient(to bottom, #85b168 0%, #638b36 100%);
  cursor: pointer;
  z-index: 1;
  transition: .3s;
  bottom: 22%;
  right: 12%;
}
.kukakuzu .btn img{
  vertical-align: bottom;
}
.kukakuzu .btn:hover{
  opacity: .7;
}
@media screen and (max-width: 767px) {
  .kukakuzu {
    width: 100%;
    padding: 5% 0;
  }
  .kukakuzu .img{
    width: 100%;
    margin: 0 0 0 auto;
  }
  .kukakuzu .text{
    position: relative;
    top: initial;
    left: initial;
    text-align: center;
    line-height: 1.8;
    margin: 0 0 3%;
  }
  .kukakuzu .btn{
    border: solid 1px #fff;
  }
}

.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100001;
}
.modal_bg{
  background: rgba(0,0,0,0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal_content{
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 900px;
  width: 90%;
  border-radius: 5px;
  padding: 30px 20px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #85b168 0%, #638b36 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
.modal_content .txt1{
  font-size: clamp(16px, 3.8vw, 40px);
  line-height: 1.4;
  border: solid 2px #fff;
  padding: 15px 20px;
  width: 32%;
  margin: 0 0 10px;
}
.modal_content .txt1 span{
  display: block;
  font-size: clamp(12px, 2vw, 28px);
}
.modal_content .img01{
  margin: 0 0 20px;
  width: 65%;
}
.modal_content .img02{
  width: 65%;
}
.modal_content .txt2{
  font-size: clamp(11px, 2vw, 22px);
  line-height: 1.6;
  width: 32%;
}
.closeBtn{
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transform: translate(50%,-50%);
}
.closeBtn:before,
.closeBtn:after {
  content: '';
  position: absolute;
  height: 1px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
}
.closeBtn:before {
  transform: rotate(45deg);
}
.closeBtn:after {
  transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .modal_content{
    max-width: 320px;
    padding: 10px 15px;
  }
  .modal_content .txt1{
    padding: 15px;
    width: 100%;
    text-align: center;
    margin: 0 0 10px;
  }
  .modal_content .img01{
    margin: 0 0 10px;
    width: 100%;
  }
  .modal_content .img02{
    margin: 0 0 10px;
    width: 100%;
  }
  .modal_content .txt2{
    width: 100%;
    text-align: center;
  }
  .closeBtn{
    width: 30px;
    height: 30px;
  }
}