@charset "UTF-8";
:root {
    --color-main: #0068b6;
    --color-fur: #f2ba5c;
    --color-fur-dark: #d49e5c;
    --color-spot: #F9584C;
    --color-snout: #544258;
    --color-collar: #aa4343;
    --color-light: #fff5d6;
    --duration: .7s;
    --semi-duration: calc(var(--duration) / 2);
    --easing: cubic-bezier(.5, 0, .5, 1);
    --stagger: calc(-1 * var(--semi-duration) / 2);
}



.mainvisual{
  position: relative;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.top-area::before {
  content: "";
  background: url(../../images/bg-mainimage.jpg) center / cover no-repeat;
  width: 150%; /* 小さな範囲 */
  height: 150%;
  position: absolute;
  top: -50%; /* オフセットをリセット */
  left: -50%; /* オフセットをリセット */
  animation: works-slider 30s linear infinite;
  transform: rotate(2deg) translate(0, 0);
  z-index: 0; /* オーバーレイの下 */
}

.top-area::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #122C5A;
  opacity: 0.5;
  z-index: 1; /* 画像の上 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #122C5A;
  opacity: 0.7;
  z-index: 2; /* 画像の上、コンテンツの下 */
}

/* 斜めスライドのキーフレーム（小さな範囲） */
@keyframes works-slider {
  0% {
    transform: rotate(2deg) translate(0, 0);
  }
  100% {
    transform: rotate(2deg) translate(15%, 15%); /* 小さな移動 */
  }
}

/* パーティクルアニメーションのスタイル（CodePen から引用） */
#particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ecf3f3;
    z-index: 0; /* 背景として最背面 */
}

.particle {
  position: absolute;
  border-radius: 50%;
}

@-webkit-keyframes particle-animation-1 {
  100% {
    transform: translate3d(59vw, 29vh, 36px);
  }
}

@keyframes particle-animation-1 {
  100% {
    transform: translate3d(59vw, 29vh, 36px);
  }
}
.particle:nth-child(1) {
  -webkit-animation: particle-animation-1 60s infinite;
          animation: particle-animation-1 60s infinite;
  opacity: 0.29;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  transform: translate3d(10vw, 36vh, 76px);
  background: #d92680;
}

@-webkit-keyframes particle-animation-2 {
  100% {
    transform: translate3d(85vw, 46vh, 31px);
  }
}

@keyframes particle-animation-2 {
  100% {
    transform: translate3d(85vw, 46vh, 31px);
  }
}
.particle:nth-child(2) {
  -webkit-animation: particle-animation-2 60s infinite;
          animation: particle-animation-2 60s infinite;
  opacity: 0.33;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  transform: translate3d(34vw, 14vh, 9px);
  background: #26d985;
}

@-webkit-keyframes particle-animation-3 {
  100% {
    transform: translate3d(34vw, 48vh, 78px);
  }
}

@keyframes particle-animation-3 {
  100% {
    transform: translate3d(34vw, 48vh, 78px);
  }
}
.particle:nth-child(3) {
  -webkit-animation: particle-animation-3 60s infinite;
          animation: particle-animation-3 60s infinite;
  opacity: 0.6;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  transform: translate3d(39vw, 70vh, 86px);
  background: #8026d9;
}

@-webkit-keyframes particle-animation-4 {
  100% {
    transform: translate3d(52vw, 27vh, 33px);
  }
}

@keyframes particle-animation-4 {
  100% {
    transform: translate3d(52vw, 27vh, 33px);
  }
}
.particle:nth-child(4) {
  -webkit-animation: particle-animation-4 60s infinite;
          animation: particle-animation-4 60s infinite;
  opacity: 0.88;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  transform: translate3d(64vw, 51vh, 82px);
  background: #26b8d9;
}

@-webkit-keyframes particle-animation-5 {
  100% {
    transform: translate3d(82vw, 35vh, 85px);
  }
}

@keyframes particle-animation-5 {
  100% {
    transform: translate3d(82vw, 35vh, 85px);
  }
}
.particle:nth-child(5) {
  -webkit-animation: particle-animation-5 60s infinite;
          animation: particle-animation-5 60s infinite;
  opacity: 0.25;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  transform: translate3d(56vw, 42vh, 3px);
  background: #d92691;
}

@-webkit-keyframes particle-animation-6 {
  100% {
    transform: translate3d(53vw, 7vh, 84px);
  }
}

@keyframes particle-animation-6 {
  100% {
    transform: translate3d(53vw, 7vh, 84px);
  }
}
.particle:nth-child(6) {
  -webkit-animation: particle-animation-6 60s infinite;
          animation: particle-animation-6 60s infinite;
  opacity: 0.79;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  transform: translate3d(78vw, 34vh, 6px);
  background: #9ad926;
}

@-webkit-keyframes particle-animation-7 {
  100% {
    transform: translate3d(69vw, 27vh, 37px);
  }
}

@keyframes particle-animation-7 {
  100% {
    transform: translate3d(69vw, 27vh, 37px);
  }
}
.particle:nth-child(7) {
  -webkit-animation: particle-animation-7 60s infinite;
          animation: particle-animation-7 60s infinite;
  opacity: 0.7;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  transform: translate3d(9vw, 34vh, 64px);
  background: #d926b2;
}

@-webkit-keyframes particle-animation-8 {
  100% {
    transform: translate3d(66vw, 59vh, 25px);
  }
}

@keyframes particle-animation-8 {
  100% {
    transform: translate3d(66vw, 59vh, 25px);
  }
}
.particle:nth-child(8) {
  -webkit-animation: particle-animation-8 60s infinite;
          animation: particle-animation-8 60s infinite;
  opacity: 0.68;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
  transform: translate3d(18vw, 59vh, 24px);
  background: #d9d626;
}

@-webkit-keyframes particle-animation-9 {
  100% {
    transform: translate3d(64vw, 60vh, 93px);
  }
}

@keyframes particle-animation-9 {
  100% {
    transform: translate3d(64vw, 60vh, 93px);
  }
}
.particle:nth-child(9) {
  -webkit-animation: particle-animation-9 60s infinite;
          animation: particle-animation-9 60s infinite;
  opacity: 0.77;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  transform: translate3d(39vw, 33vh, 91px);
  background: #2fd926;
}

@-webkit-keyframes particle-animation-10 {
  100% {
    transform: translate3d(69vw, 79vh, 49px);
  }
}

@keyframes particle-animation-10 {
  100% {
    transform: translate3d(69vw, 79vh, 49px);
  }
}
.particle:nth-child(10) {
  -webkit-animation: particle-animation-10 60s infinite;
          animation: particle-animation-10 60s infinite;
  opacity: 0.93;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  transform: translate3d(73vw, 26vh, 82px);
  background: #2682d9;
}

@-webkit-keyframes particle-animation-11 {
  100% {
    transform: translate3d(75vw, 72vh, 66px);
  }
}

@keyframes particle-animation-11 {
  100% {
    transform: translate3d(75vw, 72vh, 66px);
  }
}
.particle:nth-child(11) {
  -webkit-animation: particle-animation-11 60s infinite;
          animation: particle-animation-11 60s infinite;
  opacity: 0.78;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
  transform: translate3d(3vw, 38vh, 84px);
  background: #26bbd9;
}

@-webkit-keyframes particle-animation-12 {
  100% {
    transform: translate3d(44vw, 71vh, 68px);
  }
}

@keyframes particle-animation-12 {
  100% {
    transform: translate3d(44vw, 71vh, 68px);
  }
}
.particle:nth-child(12) {
  -webkit-animation: particle-animation-12 60s infinite;
          animation: particle-animation-12 60s infinite;
  opacity: 0.21;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  transform: translate3d(68vw, 53vh, 19px);
  background: #266ed9;
}

@-webkit-keyframes particle-animation-13 {
  100% {
    transform: translate3d(12vw, 90vh, 27px);
  }
}

@keyframes particle-animation-13 {
  100% {
    transform: translate3d(12vw, 90vh, 27px);
  }
}
.particle:nth-child(13) {
  -webkit-animation: particle-animation-13 60s infinite;
          animation: particle-animation-13 60s infinite;
  opacity: 0.34;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
  transform: translate3d(80vw, 77vh, 39px);
  background: #d95f26;
}

@-webkit-keyframes particle-animation-14 {
  100% {
    transform: translate3d(40vw, 26vh, 7px);
  }
}

@keyframes particle-animation-14 {
  100% {
    transform: translate3d(40vw, 26vh, 7px);
  }
}
.particle:nth-child(14) {
  -webkit-animation: particle-animation-14 60s infinite;
          animation: particle-animation-14 60s infinite;
  opacity: 0.12;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
  transform: translate3d(59vw, 40vh, 62px);
  background: #26d926;
}

@-webkit-keyframes particle-animation-15 {
  100% {
    transform: translate3d(83vw, 62vh, 94px);
  }
}

@keyframes particle-animation-15 {
  100% {
    transform: translate3d(83vw, 62vh, 94px);
  }
}
.particle:nth-child(15) {
  -webkit-animation: particle-animation-15 60s infinite;
          animation: particle-animation-15 60s infinite;
  opacity: 0.51;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  transform: translate3d(13vw, 47vh, 6px);
  background: #d9a026;
}

@-webkit-keyframes particle-animation-16 {
  100% {
    transform: translate3d(25vw, 44vh, 45px);
  }
}

@keyframes particle-animation-16 {
  100% {
    transform: translate3d(25vw, 44vh, 45px);
  }
}
.particle:nth-child(16) {
  -webkit-animation: particle-animation-16 60s infinite;
          animation: particle-animation-16 60s infinite;
  opacity: 0.72;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
  transform: translate3d(64vw, 21vh, 97px);
  background: #29d926;
}

@-webkit-keyframes particle-animation-17 {
  100% {
    transform: translate3d(59vw, 4vh, 70px);
  }
}

@keyframes particle-animation-17 {
  100% {
    transform: translate3d(59vw, 4vh, 70px);
  }
}
.particle:nth-child(17) {
  -webkit-animation: particle-animation-17 60s infinite;
          animation: particle-animation-17 60s infinite;
  opacity: 0.32;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
  transform: translate3d(83vw, 37vh, 13px);
  background: #d9268e;
}

@-webkit-keyframes particle-animation-18 {
  100% {
    transform: translate3d(33vw, 16vh, 15px);
  }
}

@keyframes particle-animation-18 {
  100% {
    transform: translate3d(33vw, 16vh, 15px);
  }
}
.particle:nth-child(18) {
  -webkit-animation: particle-animation-18 60s infinite;
          animation: particle-animation-18 60s infinite;
  opacity: 0.76;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
  transform: translate3d(33vw, 38vh, 50px);
  background: #2656d9;
}

@-webkit-keyframes particle-animation-19 {
  100% {
    transform: translate3d(26vw, 9vh, 23px);
  }
}

@keyframes particle-animation-19 {
  100% {
    transform: translate3d(26vw, 9vh, 23px);
  }
}
.particle:nth-child(19) {
  -webkit-animation: particle-animation-19 60s infinite;
          animation: particle-animation-19 60s infinite;
  opacity: 0.88;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -3.8s;
          animation-delay: -3.8s;
  transform: translate3d(69vw, 37vh, 83px);
  background: #26d9b2;
}

@-webkit-keyframes particle-animation-20 {
  100% {
    transform: translate3d(71vw, 8vh, 74px);
  }
}

@keyframes particle-animation-20 {
  100% {
    transform: translate3d(71vw, 8vh, 74px);
  }
}
.particle:nth-child(20) {
  -webkit-animation: particle-animation-20 60s infinite;
          animation: particle-animation-20 60s infinite;
  opacity: 0.29;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  transform: translate3d(19vw, 82vh, 47px);
  background: #c426d9;
}

@-webkit-keyframes particle-animation-21 {
  100% {
    transform: translate3d(48vw, 33vh, 31px);
  }
}

@keyframes particle-animation-21 {
  100% {
    transform: translate3d(48vw, 33vh, 31px);
  }
}
.particle:nth-child(21) {
  -webkit-animation: particle-animation-21 60s infinite;
          animation: particle-animation-21 60s infinite;
  opacity: 0.29;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
  transform: translate3d(19vw, 58vh, 33px);
  background: #be26d9;
}

@-webkit-keyframes particle-animation-22 {
  100% {
    transform: translate3d(49vw, 56vh, 93px);
  }
}

@keyframes particle-animation-22 {
  100% {
    transform: translate3d(49vw, 56vh, 93px);
  }
}
.particle:nth-child(22) {
  -webkit-animation: particle-animation-22 60s infinite;
          animation: particle-animation-22 60s infinite;
  opacity: 0.87;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
  transform: translate3d(55vw, 82vh, 18px);
  background: #d926a9;
}

@-webkit-keyframes particle-animation-23 {
  100% {
    transform: translate3d(30vw, 73vh, 1px);
  }
}

@keyframes particle-animation-23 {
  100% {
    transform: translate3d(30vw, 73vh, 1px);
  }
}
.particle:nth-child(23) {
  -webkit-animation: particle-animation-23 60s infinite;
          animation: particle-animation-23 60s infinite;
  opacity: 0.75;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
  transform: translate3d(61vw, 4vh, 93px);
  background: #a0d926;
}

@-webkit-keyframes particle-animation-24 {
  100% {
    transform: translate3d(13vw, 70vh, 97px);
  }
}

@keyframes particle-animation-24 {
  100% {
    transform: translate3d(13vw, 70vh, 97px);
  }
}
.particle:nth-child(24) {
  -webkit-animation: particle-animation-24 60s infinite;
          animation: particle-animation-24 60s infinite;
  opacity: 0.08;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
  transform: translate3d(3vw, 28vh, 41px);
  background: #26d93e;
}

@-webkit-keyframes particle-animation-25 {
  100% {
    transform: translate3d(34vw, 37vh, 11px);
  }
}

@keyframes particle-animation-25 {
  100% {
    transform: translate3d(34vw, 37vh, 11px);
  }
}
.particle:nth-child(25) {
  -webkit-animation: particle-animation-25 60s infinite;
          animation: particle-animation-25 60s infinite;
  opacity: 0.81;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  transform: translate3d(75vw, 19vh, 45px);
  background: #3bd926;
}

@-webkit-keyframes particle-animation-26 {
  100% {
    transform: translate3d(46vw, 65vh, 97px);
  }
}

@keyframes particle-animation-26 {
  100% {
    transform: translate3d(46vw, 65vh, 97px);
  }
}
.particle:nth-child(26) {
  -webkit-animation: particle-animation-26 60s infinite;
          animation: particle-animation-26 60s infinite;
  opacity: 0.55;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -5.2s;
          animation-delay: -5.2s;
  transform: translate3d(57vw, 22vh, 76px);
  background: #26b5d9;
}

@-webkit-keyframes particle-animation-27 {
  100% {
    transform: translate3d(9vw, 35vh, 88px);
  }
}

@keyframes particle-animation-27 {
  100% {
    transform: translate3d(9vw, 35vh, 88px);
  }
}
.particle:nth-child(27) {
  -webkit-animation: particle-animation-27 60s infinite;
          animation: particle-animation-27 60s infinite;
  opacity: 0.16;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
  transform: translate3d(55vw, 46vh, 17px);
  background: #26d980;
}

@-webkit-keyframes particle-animation-28 {
  100% {
    transform: translate3d(74vw, 10vh, 38px);
  }
}

@keyframes particle-animation-28 {
  100% {
    transform: translate3d(74vw, 10vh, 38px);
  }
}
.particle:nth-child(28) {
  -webkit-animation: particle-animation-28 60s infinite;
          animation: particle-animation-28 60s infinite;
  opacity: 0.12;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -5.6s;
          animation-delay: -5.6s;
  transform: translate3d(59vw, 8vh, 84px);
  background: #2635d9;
}

@-webkit-keyframes particle-animation-29 {
  100% {
    transform: translate3d(54vw, 87vh, 86px);
  }
}

@keyframes particle-animation-29 {
  100% {
    transform: translate3d(54vw, 87vh, 86px);
  }
}
.particle:nth-child(29) {
  -webkit-animation: particle-animation-29 60s infinite;
          animation: particle-animation-29 60s infinite;
  opacity: 0.73;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -5.8s;
          animation-delay: -5.8s;
  transform: translate3d(44vw, 43vh, 51px);
  background: #7dd926;
}

@-webkit-keyframes particle-animation-30 {
  100% {
    transform: translate3d(57vw, 18vh, 16px);
  }
}

@keyframes particle-animation-30 {
  100% {
    transform: translate3d(57vw, 18vh, 16px);
  }
}
.particle:nth-child(30) {
  -webkit-animation: particle-animation-30 60s infinite;
          animation: particle-animation-30 60s infinite;
  opacity: 0.55;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  transform: translate3d(16vw, 62vh, 2px);
  background: #d92647;
}



h1.copy{
    margin: 0 auto;
    padding-top: 10%;
    position: relative;
    top: 25%;
    left: 8rem;
    font-weight: 600;
    color: #ffffff;
    z-index: 2;
    font-size: 4em;
}

.copy-desc{
  position: relative;
  left: 10rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.35em;
  z-index: 2;
}

a.main-btn-contact {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 200px;
  margin: 1.5rem auto;
  padding: 1rem 2rem;
  font-weight: bold;
  border-radius: 0.3rem;
  border-bottom: 7px solid #D0492C;
  background: #FF5733;
  color: #fff;
}
a.main-btn-contact:hover {
  margin: 1.55rem auto;
  border-bottom: 1px solid #D0492C;
  color: #fff;
}

/* 犬アニメーションのコンテナ */
.dog-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 60vh;  ヘッダー内で中央寄せ */
    z-index: 100; /* パーティクルの上に配置 */
    align-items: flex-end; /* 犬を下寄せ */
    position: relative;
    bottom: 0;
}

.dog {
    z-index: 1;
    height: 300px;
    width: 300px;
    transform: scale(0.65);
    transform-origin: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dog *, .dog *:before, .dog *:after {
    animation-timing-function: var(--easing) !important;
    box-sizing: border-box;
    position: relative;
}

.dog * {
    position: absolute;
    will-change: transform;
}

.dog:before {
    content: '';
    position: absolute;
    bottom: 13.3333333333%;
    left: 0;
    width: 100%;
    height: 3.3333333333%;
    background-color: #D3D1D1;
    border-radius: 2px;
    animation: shadow calc(1 * var(--semi-duration)) infinite;
}

@keyframes shadow {
    from, to {
        transform: scaleX(0.75);
    }
    45%, 55% {
        transform: scaleX(0.5);
    }
}

.dog .neck {
    width: 44%;
    height: 100px;
    right: -5px;
    bottom: calc(100% - 10px);
    transform-origin: center bottom;
    transform: rotate(15deg);
    z-index: 2;
}

.dog .neck > .fur {
    border-bottom-left-radius: 10px;
    height: 100%;
    width: 100%;
}

.dog .neck > .fur:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 100%;
    background-color: var(--color-fur-dark);
    z-index: 1;
    transform-origin: right bottom;
    transform: rotate(15deg);
}

.dog .collar {
    width: calc(100% + 10px);
    height: 15%;
    background-color: var(--color-collar);
    left: -5px;
    bottom: 30px;
    border-radius: 5px;
    animation: collar var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
    z-index: 2;
}

@keyframes collar {
    from, to {
        transform: none;
    }
    50% {
        transform: translateY(-25%);
    }
}

.dog .head {
    height: 80%;
    width: 145%;
    left: -2%;
    bottom: 50%;
    transform-origin: left center;
    z-index: 2;
    animation: head var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
}

@keyframes head {
    from, to {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(-15deg);
    }
}

.dog .head > .fur {
    width: 150px;
    height: 80px;
    background-color: var(--color-fur);
    clip-path: polygon(0 0, 48% 0, 65% 43%, 85% 46%, 74% 100%, 0 100%);
}

.dog .head > .fur:before {
    content: '';
    position: absolute;
    top: -10%;
    left: 40%;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-color: var(--color-light);
    z-index: 1;
    border-radius: 50%;
}

.dog .snout {
    --color: var(--color-snout);
    width: 25%;
    height: 0;
    padding-top: 25%;
    background-color: var(--color);
    top: 30%;
    right: 0;
    border-bottom-left-radius: 100%;
    z-index: 1;
}

.dog .ears {
    bottom: 40%;
    height: 95%;
    width: 30%;
    left: 0;
    z-index: -1;
}

.dog .ear {
    --color: var(--color-spot);
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    transform-origin: left bottom;
    transform: rotate(-10deg);
    animation: ear-front calc(var(--duration) / 2) infinite;
}

@keyframes ear-front {
    50% {
        transform: rotate(-15deg);
    }
}

.dog .ear:before {
    content: '';
    position: absolute;
    height: 25px;
    width: 15px;
    z-index: 2;
    top: -2px;
    right: -7px;
    border-top-left-radius: 100%;
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
    border-left: 2px solid var(--color-light);
    transform-origin: bottom left;
    animation: ear-mark var(--semi-duration) calc(-1 * var(--semi-duration)) infinite;
}

.dig .ear-mark {
    from, to {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(25deg);
    }
}

.dog .ear > .fur {
    border-top-left-radius: 100%;
    height: 100%;
    width: 100%;
}

.dog .ear:nth-child(2) {
    left: 15px;
    bottom: 5px;
    transform: rotate(-5deg);
    --color: var(--color-fur);
    z-index: -1;
    animation: ear-back calc(var(--duration) / 2) infinite both;
}

@keyframes ear-back {
    from, to {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}

.dog .eye {
    --size: 6%;
    --color: var(--color-snout);
    width: var(--size);
    height: 0;
    padding: var(--size);
    left: 55%;
    top: 45%;
    border-radius: 50%;
    background-color: var(--color);
    z-index: 1;
}

.dog .eye:after {
    content: '';
    position: absolute;
    top: -160%;
    left: -50%;
    width: 120%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-light);
    z-index: 1;
}

.dog .cheek {
    position: absolute;
    top: 50%;
    left: 40%;
    background-color: var(--color-light);
    width: 60px;
    height: 41px;
    border-radius: 50%;
    z-index: 0;
}

.dog .torso {
    width: 56.6666666667%;
    height: 33.3333333333%;
    animation: torso var(--semi-duration) both infinite;
}

@keyframes torso {
    from, to {
        transform: none;
    }
    50% {
        transform: translateY(15%);
    }
}

.dog .torso > .fur {
    height: 95%;
    width: 185px;
    border-top-left-radius: 40px;
    transform-origin: left center;
    transform: rotate(-20deg) translateY(10px);
    z-index: 1;
}

.dog .torso > .fur:after {
    height: 100%;
    width: 100%;
    border-bottom-left-radius: 200px 85px;
    border-bottom-right-radius: 100px;
}

.dog .torso > .legs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dog .torso > .tail {
    --color: var(--color-spot);
    bottom: calc(100% - 30px);
    left: -20%;
    transform-origin: center bottom;
    transform: rotate(-45deg);
}

.dog .tail {
    height: 90px;
    width: 120px;
    background-color: var(--color-fur);
    border-top-right-radius: 10px 100%;
    border-top-left-radius: 10px 100%;
    animation: tail var(--semi-duration) infinite;
    clip-path: polygon(23% 77%, 7% 66%, 2% 53%, 2% 33%, 10% 19%, 20% 10%, 39% 7%, 57% 10%, 70% 22%, 71% 35%, 64% 48%, 55% 54%, 45% 53%, 38% 51%, 28% 53%, 35% 65%, 56% 79%, 44% 83%);
}

@keyframes tail {
    from, to {
        transform: rotate(-45deg) translateX(-15%);
    }
    50% {
        transform: rotate(-25deg) translateX(15%);
    }
}

.dog .tail > .tail {
    bottom: calc(90%);
    transform-origin: bottom left;
    transform: rotate(-10deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    animation: tail-inner var(--semi-duration) var(--stagger) infinite;
}

@keyframes tail-inner {
    from, to {
        transform: rotate(-10deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    }
    50% {
        transform: rotate(5deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    }
}

.dog .legs > .leg {
    bottom: 5px;
    --color: var(--color-fur);
}

.dog .legs > .leg:nth-child(1), .dog .legs .leg:nth-child(3) {
    right: 15px;
}

.dog .legs > .leg:nth-child(3), .dog .legs > .leg:nth-child(4) {
    --color: var(--color-fur-dark);
    z-index: -1;
}

.dog .legs > .leg:nth-child(1), .dog .legs .leg:nth-child(4) {
    --delay: 0s;
}

.dog .legs > .leg:nth-child(2), .dog .legs > .leg:nth-child(3) {
    --delay: calc(-1 * var(--duration) / 2);
}

.dog .legs > .leg:nth-child(2) {
    left: 0;
}

.dog .legs > .leg:nth-child(4) {
    left: 0;
}

.dog .leg {
    position: absolute;
    height: 65px;
    width: 45px;
    background-color: var(--color);
    transform-origin: center 5px;
    animation: leg infinite var(--duration) var(--delay, 0s);
}

.dog .leg > .leg-inner {
    animation: leg-inner infinite var(--duration) calc(var(--delay));
    transform: rotate(90deg);
}

@keyframes leg-inner {
    from, to {
        transform: none;
    }
    33% {
        transform: rotate(70deg);
    }
    76% {
        transform: none;
    }
}

@keyframes leg {
    from, to {
        transform: none;
    }
    33% {
        transform: rotate(-55deg);
    }
    66% {
        transform: rotate(-20deg);
    }
}

.dog .leg > .fur {
    width: 0;
    height: 100%;
}

.dog .leg > .fur:after {
    width: 45px;
    bottom: 0;
    top: initial;
    transform: rotate(15deg);
}

.dog .fur {
    position: absolute;
    overflow: hidden;
}

.dog .fur:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left: 0;
    background-color: var(--color-fur, var(--color-fur));
    transform-origin: center bottom;
}

.dog .leg-inner {
    position: absolute;
    height: 65%;
    width: 100%;
    top: calc(100%);
    transform-origin: center top;
}

.dog .leg-inner:before {
    content: "";
    width: 45px;
    height: 45px;
    background-color: var(--color);
    position: absolute;
    border-radius: 50%;
    top: -22.5px;
}

.dog .leg-inner > .fur {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.dog .leg-inner > .fur:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left: 0;
    background-color: var(--color);
    transform-origin: center top;
    transform: rotate(15deg);
}