@charset "utf-8";

.c-img {
  position: relative;
  background-color: #fff;
}
.c-img.is-nobg {
  background-color: transparent;
}
.c-img__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s cubic-bezier(0.455, 0.030, 0.515, 0.955) .3s;
  display: block;
  backface-visibility: hidden;
}
.c-img__body.c-target__imgBody {
  transition: opacity .4s cubic-bezier(0.455, 0.030, 0.515, 0.955) .3s, transform .4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.c-img__body[data-loaded="true"] {
  opacity: 1;
  visibility: visible;
}
.c-img__body.is-nodelay {
  transition-delay: 0s;
}
img.c-img__body {
  object-fit: cover;
}

.c-target {
  display: block;
}
@media (any-hover: hover) {
  .c-target__img {
    /* 拡大や角丸などではみ出ないようにつけておく */
    overflow: hidden;
  }
  .c-target__imgBody {
    transition: transform .5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    will-change: transform;
  }
  .c-target:hover .c-target__imgBody {
    transform: scale(1.03);
    will-change: auto;
  }
}

.c-btn {
  margin: 0 auto;
  height: calc(72em/16);
  border-radius: calc(36em/16);
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, .15);
}
.c-btn__target {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #44c09b;
  background: linear-gradient(225deg, rgba(68,192,155,1) 0%, rgba(16,83,19,1) 100%);
}
.c-btn__target::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.c-btn__targetTxt {
  color: #fff;
  font-size: calc(20em/16);
  letter-spacing: .04em;
}
@media (any-hover: hover) {
  .c-btn__target:hover::before {
    animation: glow .7s;
  }
}
@keyframes glow {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

.c-title {
  position: relative;
  letter-spacing: .04em;
  margin-right: -.04em;
}
.c-title.is-left {
  text-align: left;
}
.c-title.is-center {
  text-align: center;
}
.c-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: calc(80em/36);
}
.c-title.is-left::after {
  margin: 0 auto 0 0;
}
.c-title.is-center::after {
  margin: 0 auto;
}

.c-txtbox,
.c-txtarea {
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  outline: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font:  inherit;
  width: 100%;
}
.c-txtbox {
  padding:  0 calc(12em/16);
  width: 100%;
  height: calc(52em/16);
}
.c-txtbox.is-s {
  max-width: calc(400em/16);
}
@media screen and (max-width: 430px) {
  .c-txtbox {
    padding:  0 calc(12em/16*.8);
    height: calc(52em/16*.8);
  }
  .c-txtbox.is-s {
    max-width: inherit;
  }
}
.c-txtarea {
  padding:  calc(12em/16);
  line-height: 1.8;
}
@media screen and (max-width: 430px) {
  .c-txtarea {
    padding:  calc(12em/16*.8);
  }
}