.page40 {
  overflow: hidden;
}
.page40 .c01 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  position: relative;
  color: transparent;
}
@media print, screen and (min-width: 768px) {
  .page40 .c01 {
    font-size: 75px;
  }
}
.page40 .c01::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0%;
  right: 100%;
  bottom: 0%;
  left: 0%;
  background: var(--color-mu07);
}
.page40 .c01.active {
  animation-name: kf_c01a;
  animation-duration: 0s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
.page40 .c01.active::before {
  animation-name: kf_c01b;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes kf_c01a {
  100% {
    color: inherit;
  }
}
@keyframes kf_c01b {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}
.page40 .c02 {
  --page40-c02-1: rgba(51, 51, 51, 0);
  --page40-c02-2: rgba(51, 51, 51, 1);
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  background-image: linear-gradient(to bottom, var(--page40-c02-1) 0%, var(--page40-c02-2) 50%);
  background-size: 100% 200%;
  background-position: 0% -100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .page40 .c02 {
    --page40-c02-1: rgba(204, 204, 204, 0);
    --page40-c02-2: rgba(204, 204, 204, 1);
  }
}
@media print, screen and (min-width: 768px) {
  .page40 .c02 {
    font-size: 75px;
  }
}
.page40 .c02.active {
  animation-name: kf_c02;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes kf_c02 {
  100% {
    background-position: 0% 100%;
  }
}
.page40 .c03 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 0.1em 0.1em;
  color: var(--color-mu06);
  background: var(--color-mu07);
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
}
@media print, screen and (min-width: 768px) {
  .page40 .c03 {
    font-size: 75px;
  }
}
.page40 .c03.active {
  animation-name: kf_c03;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes kf_c03 {
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}
.page40 .c04 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 0.1em 0.1em;
  position: relative;
  color: var(--color-mu07);
  background: var(--color-mu06);
}
@media print, screen and (min-width: 768px) {
  .page40 .c04 {
    font-size: 75px;
  }
}
.page40 .c04::after {
  content: attr(data-text);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.1em 0.1em;
  color: var(--color-mu06);
  background: var(--color-mu07);
  clip-path: circle(0% at 50% 50%);
}
.page40 .c04.active::after {
  animation-name: kf_c04b;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
@keyframes kf_c04b {
  100% {
    clip-path: circle(75% at 50% 50%);
  }
}
.page40 .c05 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  position: relative;
  color: var(--color-mu07);
}
@media print, screen and (min-width: 768px) {
  .page40 .c05 {
    font-size: 75px;
  }
}
.page40 .c05::before, .page40 .c05::after {
  content: attr(data-text);
  position: absolute;
}
.page40 .c05::before {
  z-index: -1;
  top: 0.03em;
  left: 0.03em;
  color: var(--color-mu06);
}
.page40 .c05::after {
  z-index: -2;
  top: 0.08em;
  left: 0.08em;
  background-image: repeating-linear-gradient(45deg, transparent 0 1px, var(--color-mu02) 1px 4px);
  background-size: 125% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation-name: kf_c05;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes kf_c05 {
  100% {
    background-position: 0 0;
  }
}
.page40 .c06 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1.25;
  background-image: linear-gradient(to top, var(--color-mu07) 3px, transparent 3px);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
@media print, screen and (min-width: 768px) {
  .page40 .c06 {
    font-size: 75px;
  }
}
.page40 .c06.active {
  animation-name: kf_c06a, kf_c06b;
  animation-duration: 1s, 0s;
  animation-delay: 0s, 0.5s;
  animation-fill-mode: forwards;
}
@keyframes kf_c06a {
  50% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 0% 100%;
  }
}
@keyframes kf_c06b {
  100% {
    background-position: right bottom;
  }
}
.page40 .c07 {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 26px 26px;
  background-image: linear-gradient(to bottom, transparent 10px, var(--color-mu07) 10px, var(--color-mu07) 13px, transparent 13px), linear-gradient(to left, transparent 10px, var(--color-mu07) 10px, var(--color-mu07) 13px, transparent 13px), linear-gradient(to top, transparent 10px, var(--color-mu07) 10px, var(--color-mu07) 13px, transparent 13px), linear-gradient(to right, transparent 10px, var(--color-mu07) 10px, var(--color-mu07) 13px, transparent 13px);
  background-repeat: no-repeat;
  background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
  background-position: top left, top left, right bottom, right bottom;
}
@media print, screen and (min-width: 768px) {
  .page40 .c07 {
    font-size: 75px;
  }
}
.page40 .c07.active {
  animation-name: kf_c07a, kf_c07b;
  animation-duration: 1.5s, 0s;
  animation-delay: 0s, 0.75s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes kf_c07a {
  50% {
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }
  100% {
    background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
  }
}
@keyframes kf_c07b {
  100% {
    background-position: right bottom, right bottom, top left, top left;
  }
}
.page40 .s01 {
  --page40-s01: #333;
  font-size: 75px;
  font-weight: bold;
  text-anchor: start;
  dominant-baseline: hanging;
}
@media (prefers-color-scheme: dark) {
  .page40 .s01 {
    --page40-s01: #ccc;
  }
}
.page40 .s01.active {
  stroke-dasharray: 500;
  stroke: var(--page40-s01);
  animation-name: kf_s01;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes kf_s01 {
  0% {
    stroke-dashoffset: 500;
    stroke-width: 1px;
    fill: transparent;
  }
  40% {
    fill: transparent;
  }
  60% {
    stroke-width: 1px;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-width: 0px;
    fill: var(--page40-s01);
  }
}
.page40 .s02t {
  font-size: 75px;
  font-weight: bold;
  text-anchor: start;
  dominant-baseline: hanging;
}
.page40 .s02u {
  fill: transparent;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 80 169;
  stroke-dashoffset: 0;
  animation-name: kf_s02;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.page40 .s02u:nth-child(3n+1) {
  stroke: var(--color-ww01);
  animation-delay: -2.6666666667s;
}
.page40 .s02u:nth-child(3n+2) {
  stroke: var(--color-ww03);
  animation-delay: -5.3333333333s;
}
.page40 .s02u:nth-child(3n+3) {
  stroke: var(--color-ww09);
  animation-delay: -8s;
}
@keyframes kf_s02 {
  100% {
    stroke-dashoffset: -249;
  }
}
.page40 .s03-text {
  font-size: 75px;
  font-weight: bold;
  text-anchor: start;
  dominant-baseline: hanging;
}
.page40 .s03-fill {
  fill: #e7d4e3;
}
.page40 .s03-mbm {
  mix-blend-mode: multiply;
}
.page40 .s04_wrap {
  max-width: 400px;
  margin: 0 auto;
}
.page40 .s04tp {
  font-weight: bold;
  text-anchor: start;
  dominant-baseline: hanging;
}
.page40 .s04 {
  --page40-s04: #333;
  fill: var(--page40-s04);
}
@media (prefers-color-scheme: dark) {
  .page40 .s04 {
    --page40-s04: #ccc;
  }
}
.page40 .s04.active {
  transform: rotate(0deg);
  transform-origin: center center;
  animation-name: kf_s04;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.page40 .s0401 {
  font-size: 75px;
  animation-delay: 0.5s;
}
.page40 .s0402 {
  font-size: 50px;
  animation-delay: 0.25s;
}
.page40 .s0403 {
  font-size: 30px;
  animation-delay: 0s;
}
@keyframes kf_s04 {
  100% {
    transform: rotate(360deg);
  }
}
.page40 .wrap {
  display: flex;
  flex-wrap: wrap;
}
.page40 .char {
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
}
@media print, screen and (min-width: 768px) {
  .page40 .char {
    font-size: 75px;
  }
}
.page40 .re {
  font-size: 13px;
  width: 5em;
  margin: 20px 0 0;
}
@media print, screen and (min-width: 768px) {
  .page40 .re {
    font-size: 14px;
  }
}