/* sp-btn */
.sp-btn {
  margin-top: 1rem;
}
.sp-btn .arw-wo {
  padding-top: 0.2rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.8rem;
}
.sp-btn span {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
@media (max-width: 789px) {
  .sp-btn {
    margin-top: 0;
    padding-top: 0;
  }
  .sp-btn .arw-wo {
    padding-top: 0.5rem;
    font-size: 1.8rem;
    line-height: 1.6rem;
  }
  .sp-btn span {
    font-size: 0.9rem;
  }
}
@media (max-width: 599px) {
  .sp-btn {
    margin-top: 0;
    padding-top: 0;
  }
  .sp-btn .arw-wo {
    padding-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.2rem;
  }
  .sp-btn span {
    font-size: 0.7rem;
  }
}
/* cover-image */
.cover {
  margin: -3rem auto 2rem;
  padding: 0 1rem;
}
.cover .cover-image {
  position: relative;
  margin: 3rem auto;
  width: 92vw;
  height: 110vh;
  background-image: url("cover-image.jpg");
  background-position: center center;
  background-repeat: repeat;
  background-size: cover;
  color: #374149;
  border-radius: 40px;
}
.cover .cover-image .pickup {
  position: absolute;
  bottom: 1rem;
  margin-bottom: 0;
  margin-left: -48px;
  width: 100%;
}
.cover .cover-image .pickup .btn-ylw {
  margin-left: 24px;
}
.cover .cover-image .pickup {
  margin-left: -24px;
}
.cover .cover-image .pickup .btn-ylw {
  margin-left: 12px;
}
.cover h1 {
  margin-top: 3rem;
  margin-left: 3rem;
  font-weight: 600;
  font-size: clamp(21px, 4vw, 4rem);
  line-height: 150%;
}
.cover p {
  margin-top: 2rem;
  margin-left: 3rem;
  font-weight: 600;
  font-size: 2rem !important;
  line-height: 2rem;
}
@media (max-width: 789px) {
  .cover {
    margin: -3rem auto 1rem;
    padding: 0 0;
  }
  .cover .cover-image {
    margin: 0 auto 1rem;
    width: 100vw;
    height: 100vh;
  }
  .cover h1 {
    margin-top: 2rem;
    margin-left: 0.5rem;
    text-align: center;
  }
  .cover p {
    margin-top: 1rem;
    margin-left: 0.5rem;
    font-size: 1.2rem !important;
    line-height: 1.3rem;
    text-align: center;
  }
  .cover .btn-ylw {
    margin-top: 0;
  }
}
@media (max-width: 599px) {
  .cover {
    margin: -3rem auto 1rem;
    padding: 0 0;
  }
  .cover .cover-image {
    margin: 0 auto 1rem;
    width: 100vw;
    height: 100vh;
  }
  .cover h1 {
    margin-top: 3rem;
    margin-left: 0.5rem;
    text-align: center;
  }
  .cover p {
    margin-top: 1rem;
    margin-left: 0.5rem;
    font-size: 0.9rem !important;
    line-height: 1.3rem;
    text-align: center;
  }
  .cover .btn-ylw {
    margin-top: 0;
  }
}
/* about */
.about {
  position: relative;
  top: 5rem;
  margin-right: 30px;
  padding-right: 0;
  height: auto;
}
.about::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 52rem;
  background-color: #ef821a;
  border-radius: 0 40px 40px 0;
  z-index: -1;
}
@media (max-width: 789px) {
  .about {
    margin: -5rem auto 0;
    padding: 15px;
    height: auto;
  }
  .about::after {
    width: 100%;
    height: 75rem;
    border-radius: 0 0 0 0;
  }
}
.about .daru-base {
  display: block;
  margin-top: -3rem;
  margin-left: 3rem;
  width: 160px;
  height: auto;
}
@media (max-width: 599px) {
  .about .daru-base {
    margin: -4rem auto 0;
    padding-top: 2.5rem;
  }
}
.about h2 {
  margin-top: 0.5rem;
  padding-bottom: 1rem;
  padding-right: 5rem;
  border: 0 none;
  text-align: left;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0.1rem;
}
.about h2::after {
  display: none;
}
.about h2::before {
  border: 0 none;
  display: none;
}
.about h2 .fook {
  display: block;
  white-space: nowrap;
  font-size: 1rem;
}
@media (max-width: 599px) {
  .about h2 {
    padding: 1.5rem 0 0.5rem;
    font-size: 2rem;
  }
}
.about p {
  margin-bottom: 2rem;
  color: #fff;
}
.about .photo {
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 992px) {
  .about .photo {
    margin: 0 15px;
  }
}
.about .link {
  margin-top: -3rem;
  margin-bottom: 7rem;
  padding-top: 1rem;
  background-image: url("../images/daru-chan/daru-walk-lr.png");
  background-position: left 25% top;
  background-repeat: no-repeat;
  overflow: visible;
}
@media (max-width: 992px) {
  .about .link {
    background-image: none;
  }
}
/* recruit-info */
.recruit-info {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 4rem;
  background-color: #fff;
  z-index: 1;
}
.recruit-info::before {
  content: "";
  position: absolute;
  top: 26%;
  right: 0;
  width: 80%;
  height: 70vh;
  background-image: url("../images/dotpat-ylw-light.svg");
  background-repeat: repeat;
  background-size: 30px;
  background-color: #f0f047;
  border-radius: 40px 0 0 40px;
  z-index: -1;
}
@media (max-width: 992px) {
  .recruit-info::before {
    height: 30rem;
  }
  .recruit-info .daru-chan {
    margin-bottom: 0;
    padding-top: 5rem;
    padding-bottom: 0;
  }
}
@media (max-width: 599px) {
  .recruit-info::before {
    height: 16rem;
  }
}
.recruit-info .visual-image {
  margin-top: -2rem;
}
.recruit-info .recruit-action {
  margin-top: -8rem;
}
@media (max-width: 599px) {
  .recruit-info .recruit-action {
    margin-top: 0;
  }
}
.recruit-action p {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ef821a;
}
.recruit-action img {
  margin-top: 1rem;
}
@media (max-width: 599px) {
  .recruit-info .recruit-action .col-6 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .recruit-info .recruit-action img {
    margin-top: -5rem;
    width: 100%;
    height: auto;
  }
}
/* flow */
.flow {
  position: relative;
  background-color: #ef821a;
  color: #fff;
}
.flow h3 {
  width: 100%;
  height: 100px;
  padding-top: 1.8rem !important;
  background-image: url("../images/daru-chan/front.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 100px;
  color: #f3f3d9;
}
@media (max-width: 599px) {
  .flow h3 {
    padding-bottom: 110px;
    background-position: center bottom;
    background-size: 80px;
  }
}
.flow h4 {
  width: 240px;
  height: 240px;
  margin: 0 auto 1rem;
  padding-top: 164px;
  background-color: #f3f3d9;
  border-radius: 50%;
  color: #ef821a;
  font-size: 1.2rem;
}
.flow h4.step-01 {
  background-image: url("ico-01.png");
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: 40%;
}
.flow h4.step-02 {
  background-image: url("ico-02.png");
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: 45%;
}
.flow h4.step-03 {
  background-image: url("ico-03.png");
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: 60%;
}
.flow .arrow {
  display: block;
  margin: 88px auto 1rem;
  padding: 32px;
  width: 64px;
  height: 64px;
  background-image: url("../images/arrow-orange.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 48px;
  border-radius: 50%;
}
@media (max-width: 992px) {
  .flow .arrow {
    transform: rotateZ(90deg);
    margin: 0.5rem auto 1rem;
  }
}
.flow .arrow img {
  display: none;
}
.flow .btn {
  margin: 0.5rem auto 1rem;
}
/*prd-info*/
.prd-info .lnk-prd .icon, .prd-info .lnk-customer .icon, .lnk-zine .icon {
  display: block;
  margin: 0 auto -3rem;
  width: 240px;
  height: 240px;
  text-align: center;
  background-color: #f0f047;
  border-radius: 50%;
}
.prd-info .lnk-prd .icon {
  padding-top: 16%;
}
.prd-info .lnk-customer .icon {
  padding-top: 20%;
}
.prd-info .lnk-zine .icon {
  padding-top: 20%;
}
.prd-info .lnk-prd .icon img, .prd-info .lnk-customer .icon img, .prd-info .lnk-zine .icon img {
  display: block;
}
.prd-info .lnk-prd .icon img {
  width: 48%;
  height: auto;
}
.prd-info .lnk-customer .icon img {
  width: 40%;
  height: auto;
}
.prd-info .lnk-zine .icon img {
  width: 43%;
  height: auto;
}
.prd-info .lnk-zine a {
  padding-top: 1rem;
  line-height: 1.5rem;
}
@media (max-width: 992px) {
  .prd-info .lnk-zine a {
    padding-top: 0.4rem;
  }
}
@media (max-width: 992px) {
  .prd-info .lnk-prd .icon, .prd-info .lnk-customer .icon, .prd-info .lnk-zine .icon {
    margin: 0 auto -3rem;
    padding-top: 50px;
    width: 210px;
    height: 210px;
  }
  .prd-info .lnk-prd .icon img {
    margin-top: -1rem !important;
    width: 60%;
    height: auto;
  }
  .prd-info .lnk-customer .icon img {
    margin-top: -1rem !important;
    width: 46%;
    height: auto;
  }
  .prd-info .lnk-zine .icon img {
    margin-top: -1rem !important;
    width: 46%;
    height: auto;
  }
}

/* motion setting */
/* fadeIn */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeDown */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeLeft */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeRight */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールで出現する要素に透過0を指定 */
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}
/* flipDown */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* flipLeft */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}
@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* flipLeftTop */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* flipRight */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}
@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* flipRightTop */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールで出現する要素に透過0を指定 */
.flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger, .flipRightTrigger, .flipRightTopTrigger {
  opacity: 0;
}
/* rotateX */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/* rotateY */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* rotateLeftZ */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/* rotateRightZ */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールで出現する要素に透過0を指定 */
.rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger {
  opacity: 0;
}
/* blur */
.blur {
  animation-name: blurAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0;
}

/* アニメーションスタートの遅延時間*/
.delay-time01 {
  animation-delay: 0.1s;
}
.delay-time02 {
  animation-delay: 0.2s;
}
.delay-time03 {
  animation-delay: 0.3s;
}
.delay-time04 {
  animation-delay: 0.4s;
}
.delay-time05 {
  animation-delay: 0.5s;
}
.delay-time06 {
  animation-delay: 0.6s;
}
.delay-time07 {
  animation-delay: 0.7s;
}
.delay-time08 {
  animation-delay: 0.8s;
}
.delay-time09 {
  animation-delay: 0.9s;
}
.delay-time1 {
  animation-delay: 1s;
}
.delay-time12 {
  animation-delay: 1.2s;
}
.delay-time15 {
  animation-delay: 1.5s;
}
.delay-time2 {
  animation-delay: 2s;
}
.delay-time25 {
  animation-delay: 2.5s;
}