@charset "UTF-8";
.chapter {
  padding: 40px;
  border-bottom: 1px solid #cdcdcd;
}

.headhing {
  color: #999;
}

.bl_txt {
  margin: 24px 0;
  font-weight: 700;
  color: #333;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #cdcdcd;
}

.box2 {
  background-color: orange;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}

.box2:hover {
  border-radius: 50%;
}

.box3a {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}

.box3b {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.box3c {
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}

.boxOrange {
  background-color: orange;
  -webkit-transition: .5s;
  transition: .5s;
}

.box4a:hover {
  -webkit-transform: translate(50px, 20px);
          transform: translate(50px, 20px);
}

.box4b:hover {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.box4c:hover {
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}

.box4d01:hover {
  -webkit-transform: translateX(50px) rotate(30deg);
          transform: translateX(50px) rotate(30deg);
}

.box4d02:hover {
  -webkit-transform: rotate(30deg) translateX(50px);
          transform: rotate(30deg) translateX(50px);
}

.box5a:hover {
  -webkit-transform: scale(2, 0.6);
          transform: scale(2, 0.6);
}

.box5b {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

.box5b:hover {
  -webkit-transform: scale(2, 0.6);
          transform: scale(2, 0.6);
}

.box6 {
  -webkit-transition-property: -webkit-transform background;
  transition-property: -webkit-transform background;
  transition-property: transform background;
  transition-property: transform background, -webkit-transform background;
}

.box6:hover {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  background-color: skyblue;
}

.box7 {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

.box7:hover {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  background-color: skyblue;
}

.box9 {
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: cubic-bezier(0.38, 0.37, 0.68, 2.02);
          transition-timing-function: cubic-bezier(0.38, 0.37, 0.68, 2.02);
}

.box9:hover {
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  background-color: skyblue;
}

.box10 {
  -webkit-transition: background .5s, -webkit-transform .3s ease-out 1s;
  transition: background .5s, -webkit-transform .3s ease-out 1s;
  transition: transform .3s ease-out 1s, background .5s;
  transition: transform .3s ease-out 1s, background .5s, -webkit-transform .3s ease-out 1s;
}

.box10:hover {
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  background-color: skyblue;
}

.box12 {
  -webkit-animation-name: move12;
          animation-name: move12;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes move12 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

@keyframes move12 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

.box13a {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.box13b {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}

.box13c {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes move13 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

@keyframes move13 {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

.box14a {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.box14b {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box14c {
  -webkit-animation-name: move13;
          animation-name: move13;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.box14d {
  -webkit-animation-name: move14;
          animation-name: move14;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes move14 {
  0% {
    -webkit-transform: none;
            transform: none;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

@keyframes move14 {
  0% {
    -webkit-transform: none;
            transform: none;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  80% {
    -webkit-transform: translateX(200px) rotate(360deg);
            transform: translateX(200px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(300px) rotate(360deg);
            transform: translateX(300px) rotate(360deg);
  }
}

.box15 {
  -webkit-animation: move13 2s infinite 1s alternate;
          animation: move13 2s infinite 1s alternate;
}

.button {
  padding: 16px 32px;
  background: #0088cc;
  color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgbs(0, 0, 0, 0.1);
          box-shadow: 0 1px 2px rgbs(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-transition: background .3s;
  transition: background .3s;
}

.button:hover {
  background: #0099e6;
}

.loadingIcon {
  width: 40px;
  height: 40px;
  border: 8px solid #ccc;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spin 1.2s infinite linear;
          animation: spin 1.2s infinite linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: none;
            transform: none;
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: none;
            transform: none;
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.chapter18 {
  position: relative;
}

.message {
  width: 300px;
  padding: 8px 16px;
  background: #2c2c2c;
  color: #ddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 32px;
  top: 32px;
  -webkit-animation: popup 2s forwards;
          animation: popup 2s forwards;
}

@-webkit-keyframes popup {
  0% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  20%, 80% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  /* 同じ設定のときはカンマ区切りで指定できる
  80%{
    transform: none;
    opacity: 1;
  }
   */
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes popup {
  0% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  20%, 80% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  /* 同じ設定のときはカンマ区切りで指定できる
  80%{
    transform: none;
    opacity: 1;
  }
   */
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
  }
}

button {
  width: 300px;
  padding: 8px 16px;
  position: absolute;
  right: 32px;
  top: 32px;
}
/*# sourceMappingURL=animation.css.map */