/* arguments inittial */
/* font style */
/* site style */
/* [ opacity ]
-------------------------------------------------*/
/* [ display style ]
-------------------------------------------------*/
/* [ background-image ]
-------------------------------------------------*/
/* [ writing-mode ]
-------------------------------------------------*/
/* [ illustrator & photoshop letter spacing ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
/* [ easy transform ]
-------------------------------------------------*/
.inner {
  max-width: 800px;
  margin-inline: auto;
}
@media (max-width: 800px) {
  .inner {
    padding-inline: 15px;
  }
}

main {
  padding-top: 60px;
}
@media (min-width: 768px) {
  main {
    padding-top: 80px;
  }
}

.anchor {
  padding-top: 100px;
  margin-top: -100px;
}
@media (min-width: 768px) {
  .anchor {
    padding-top: 130px;
    margin-top: -130px;
  }
}

.sup {
  font-size: max(50%, 10px);
  vertical-align: top;
}

.asaka03 {
  color: #333;
  font-feature-settings: "palt";
}
.asaka03 .caption {
  color: #515151;
}
.asaka03 .introduction .hero-wrap {
  width: fit-content;
  margin: clamp(0.938rem, -0.74rem + 7.46vw, 5.625rem) auto clamp(7.5rem, 6.829rem + 2.98vw, 9.375rem);
}
.asaka03 .introduction .hero {
  position: relative;
  padding-top: clamp(3.125rem, 1.224rem + 8.45vw, 8.438rem);
}
.asaka03 .introduction .title {
  text-align: center;
  width: 90%;
  height: auto;
  margin-bottom: 20px;
  padding-inline: 15px;
}
@media (min-width: 768px) {
  .asaka03 .introduction .title {
    max-width: 555px;
    text-align: left;
    width: 100%;
    height: auto;
  }
}
.asaka03 .introduction .lead-wrap {
  position: absolute;
  inset: 0 auto auto 0;
}
@media (min-width: 1000px) {
  .asaka03 .introduction .lead-wrap {
    inset: 0 auto auto -100px;
  }
}
.asaka03 .introduction .lead-inner {
  position: relative;
  width: clamp(22.5rem, 9.232rem + 58.97vw, 37.5rem);
  height: auto;
  padding-inline: 15px;
}
@media (min-width: 768px) {
  .asaka03 .introduction .lead-inner {
    width: clamp(36.25rem, 14.578rem + 45.15vw, 53.125rem);
  }
}
.asaka03 .introduction .lead {
  width: clamp(10.625rem, 5.705rem + 21.87vw, 24.375rem);
  height: auto;
  position: absolute;
  inset: 50% auto auto clamp(2.5rem, 1.158rem + 5.96vw, 6.25rem);
  transform: translateY(-50%);
}
.asaka03 .introduction .lead-image-wrap {
  position: absolute;
  inset: 10px 70px auto auto;
}
@media (min-width: 768px) {
  .asaka03 .introduction .lead-image-wrap {
    inset: 10px 40px auto auto;
  }
}
.asaka03 .introduction .lead-image-caption {
  width: clamp(4.375rem, 2.675rem + 7.55vw, 9.125rem);
  height: auto;
}
.asaka03 .introduction .lead-image-inner {
  position: relative;
}
.asaka03 .introduction .cat-image {
  max-width: 150px;
  width: 100%;
  height: auto;
  position: absolute;
  inset: -25px -50px auto auto;
}
@keyframes float-mov {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
.asaka03 .introduction .float-image {
  animation: float-mov 2s ease-in-out infinite;
}
.asaka03 .introduction .sub-text-wrap {
  width: clamp(22.5rem, 18.25rem + 18.89vw, 34.375rem);
  height: auto;
  padding-inline: 15px;
  position: absolute;
  inset: auto 0 -120px auto;
}
@media (min-width: 1150px) {
  .asaka03 .introduction .sub-text-wrap {
    inset: auto -150px -150px auto;
  }
}
.asaka03 .introduction .sub-text-inner {
  position: relative;
}
.asaka03 .introduction .sub-text {
  position: absolute;
  inset: 18% 0 0 15%;
  font-size: clamp(0.563rem, 0.495rem + 0.3vw, 0.75rem);
  line-height: 1.5;
  rotate: -3.957deg;
}
@media (min-width: 768px) {
  .asaka03 .introduction .sub-text {
    inset: 20% 0 0 20%;
    line-height: 1.75;
  }
}
.asaka03 .introduction__text {
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
}
@media (min-width: 768px) {
  .asaka03 .introduction__text {
    line-height: 2;
  }
}
.asaka03 {
  /* ~.introduction */
}
.asaka03 .sec01 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec01 .title {
  margin-bottom: clamp(0.625rem, 0.178rem + 1.99vw, 1.875rem);
  width: clamp(15.625rem, 2.91rem + 56.51vw, 30rem);
  height: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec01 .title {
    width: 100%;
    max-width: 725px;
  }
}
.asaka03 .sec01__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec01__caption-01 {
  margin-top: 30px;
  font-size: 10px;
  line-height: 1.8;
  color: #333;
}
.asaka03 .sec01__caption-02 {
  margin-block: 25px 20px;
  font-size: 10px;
  line-height: 1.8;
  color: #333;
}
@media (min-width: 768px) {
  .asaka03 .sec01__caption-02 {
    margin-block: 45px 40px;
  }
}
.asaka03 .sec01__flex-01 {
  display: block;
  position: relative;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-01 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 40px;
    margin-top: 50px;
  }
}
.asaka03 .sec01__flex-01 .left {
  width: 90%;
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-01 .left {
    width: 100%;
    max-width: 510px;
  }
}
.asaka03 .sec01__flex-01 .left .caption {
  padding-top: 5px;
  color: #333;
  font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
}
@media (max-width: 767px) {
  .asaka03 .sec01__flex-01 .right {
    position: absolute;
    inset: auto 0 0 auto;
    z-index: 2;
  }
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-01 .right {
    padding-bottom: 18px;
  }
}
.asaka03 .sec01__flex-01 .right .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec01__flex-01 .right .paw-container {
  position: relative;
  width: 132px;
  height: 237px;
}
.asaka03 .sec01__flex-01 .right .paw-1 {
  left: 0;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec01__flex-01 .right .paw-2 {
  left: 37px;
  bottom: 15px;
  animation-delay: 0.4s;
}
.asaka03 .sec01__flex-01 .right .paw-3 {
  left: 18px;
  bottom: 57px;
  animation-delay: 0.8s;
}
.asaka03 .sec01__flex-01 .right .paw-4 {
  left: 68px;
  bottom: 67px;
  animation-delay: 1.2s;
}
.asaka03 .sec01__flex-01 .right .paw-5 {
  left: 37px;
  bottom: 104px;
  animation-delay: 1.6s;
}
.asaka03 .sec01__flex-01 .right .paw-6 {
  left: 91px;
  bottom: 124px;
  animation-delay: 2s;
}
.asaka03 .sec01__flex-01 .right .paw-7 {
  left: 52px;
  bottom: 161px;
  animation-delay: 2.4s;
}
.asaka03 .sec01__flex-01 .right .paw-8 {
  left: 116px;
  bottom: 167px;
  animation-delay: 2.8s;
}
.asaka03 .sec01__flex-01 .right .paw-9 {
  left: 101px;
  bottom: 213px;
  animation-delay: 3.2s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec01__flex-02 {
  display: block;
  position: relative;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-02 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 40px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .asaka03 .sec01__flex-02 .right {
    width: 90%;
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-02 .right {
    width: 100%;
    max-width: 510px;
  }
}
.asaka03 .sec01__flex-02 .right .caption {
  padding-top: 5px;
  color: #333;
  font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
}
.asaka03 .sec01__flex-02 .left {
  position: absolute;
  inset: 0 auto auto 0;
}
@media (min-width: 768px) {
  .asaka03 .sec01__flex-02 .left {
    padding-bottom: 18px;
  }
}
.asaka03 .sec01__flex-02 .left .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec01__flex-02 .left .paw-container {
  position: relative;
  width: 155px;
  height: 150px;
}
.asaka03 .sec01__flex-02 .left .paw-10 {
  left: 134px;
  bottom: 121px;
  animation-delay: 0s;
}
.asaka03 .sec01__flex-02 .left .paw-11 {
  left: 99px;
  bottom: 119px;
  animation-delay: 0.4s;
}
.asaka03 .sec01__flex-02 .left .paw-12 {
  left: 88px;
  bottom: 80px;
  animation-delay: 0.8s;
}
.asaka03 .sec01__flex-02 .left .paw-13 {
  left: 57px;
  bottom: 96px;
  animation-delay: 1.2s;
}
.asaka03 .sec01__flex-02 .left .paw-14 {
  left: 45px;
  bottom: 50px;
  animation-delay: 1.6s;
}
.asaka03 .sec01__flex-02 .left .paw-15 {
  left: 2px;
  bottom: 40px;
  animation-delay: 2s;
}
.asaka03 .sec01__flex-02 .left .paw-16 {
  left: 16px;
  bottom: 0px;
  animation-delay: 2.4s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 {
  /* ~.sec01 */
}
.asaka03 .sec02 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec02 .title {
  margin-bottom: clamp(0.625rem, 0.178rem + 1.99vw, 1.875rem);
  width: clamp(11.25rem, 0.193rem + 49.14vw, 23.75rem);
  height: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec02 .title {
    width: 100%;
    max-width: 692px;
  }
}
.asaka03 .sec02__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec02__caption-01 {
  margin-top: 30px;
  font-size: 10px;
  line-height: 1.8;
  color: #333;
}
.asaka03 .sec02__img-01 {
  width: 100%;
  height: auto;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .asaka03 .sec02__img-01 {
    margin-top: 60px;
  }
}
.asaka03 .sec02__caption {
  margin-top: 20px;
  font-size: 10px;
  line-height: 1.8;
  color: #333;
}
@media (min-width: 768px) {
  .asaka03 .sec02__caption {
    margin-top: 40px;
  }
}
.asaka03 .sec02__flex-01 {
  display: block;
  position: relative;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .asaka03 .sec02__flex-01 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .asaka03 .sec02__flex-01 .left {
    position: absolute;
    inset: auto auto 0 0;
  }
}
@media (min-width: 768px) {
  .asaka03 .sec02__flex-01 .left {
    transform: translateX(-100px);
  }
}
.asaka03 .sec02__flex-01 .left .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec02__flex-01 .left .paw-container {
  position: relative;
  width: 135px;
  height: 202px;
}
.asaka03 .sec02__flex-01 .left .paw-17 {
  left: 102px;
  top: 175px;
  animation-delay: 0s;
}
.asaka03 .sec02__flex-01 .left .paw-18 {
  left: 62px;
  top: 158px;
  animation-delay: 0.4s;
}
.asaka03 .sec02__flex-01 .left .paw-19 {
  left: 73px;
  top: 116px;
  animation-delay: 0.8s;
}
.asaka03 .sec02__flex-01 .left .paw-20 {
  left: 26px;
  top: 100px;
  animation-delay: 1.2s;
}
.asaka03 .sec02__flex-01 .left .paw-21 {
  left: 53px;
  top: 62px;
  animation-delay: 1.6s;
}
.asaka03 .sec02__flex-01 .left .paw-22 {
  left: 0;
  top: 46px;
  animation-delay: 2s;
}
.asaka03 .sec02__flex-01 .left .paw-23 {
  left: 20px;
  top: 0;
  animation-delay: 2.4s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .asaka03 .sec02__flex-01 .right {
    width: 90%;
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .asaka03 .sec02__flex-01 .right {
    width: 100%;
    max-width: 525px;
  }
}
.asaka03 {
  /* ~.sec02 */
}
.asaka03 .sec03 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec03 .border {
  width: 100%;
  margin-bottom: 25px;
  padding-block: 15px;
  background-color: #f9e6e2;
}
@media (min-width: 768px) {
  .asaka03 .sec03 .border {
    margin-bottom: 50px;
    padding-block: 30px;
  }
}
.asaka03 .sec03 .border-title {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec03 .border-title {
    max-width: 616px;
  }
}
.asaka03 .sec03 .title {
  margin-bottom: clamp(0.625rem, 0.178rem + 1.99vw, 1.875rem);
  width: clamp(12.5rem, 2.549rem + 44.23vw, 23.75rem);
  height: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec03 .title {
    width: 100%;
    max-width: 630px;
  }
}
.asaka03 .sec03__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec03__img-01 {
  width: 100%;
  height: auto;
  margin-top: 25px;
}
@media (min-width: 768px) {
  .asaka03 .sec03__img-01 {
    margin-top: 50px;
  }
}
.asaka03 .sec03__flex-01 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  margin-top: 35px;
}
@media (min-width: 768px) {
  .asaka03 .sec03__flex-01 {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 75px;
    gap: 40px;
  }
}
.asaka03 .sec03__flex-01 .right {
  flex: 1;
}
.asaka03 .sec03__flex-01 .right .text {
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 2;
}
.asaka03 .sec03__flex-01 .right .caption {
  padding-top: 10px;
  font-size: 10px;
  color: #515151;
}
.asaka03 .sec03__flex-01 .right .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec03__flex-01 .right .paw-container {
  position: relative;
  width: 144px;
  height: 92px;
  margin-left: auto;
}
.asaka03 .sec03__flex-01 .right .paw-24 {
  right: 133px;
  bottom: 77px;
  animation-delay: 0s;
}
.asaka03 .sec03__flex-01 .right .paw-25 {
  right: 127px;
  bottom: 44px;
  animation-delay: 0.4s;
}
.asaka03 .sec03__flex-01 .right .paw-26 {
  right: 100px;
  bottom: 52px;
  animation-delay: 0.8s;
}
.asaka03 .sec03__flex-01 .right .paw-27 {
  right: 104px;
  bottom: 30px;
  animation-delay: 1.2s;
}
.asaka03 .sec03__flex-01 .right .paw-28 {
  right: 78px;
  bottom: 32px;
  animation-delay: 1.6s;
}
.asaka03 .sec03__flex-01 .right .paw-29 {
  right: 62px;
  bottom: 0;
  animation-delay: 2s;
}
.asaka03 .sec03__flex-01 .right .paw-30 {
  right: 51px;
  bottom: 18px;
  animation-delay: 2.4s;
}
.asaka03 .sec03__flex-01 .right .paw-31 {
  right: 30px;
  bottom: 0;
  animation-delay: 2.8s;
}
.asaka03 .sec03__flex-01 .right .paw-32 {
  right: 25px;
  bottom: 24px;
  animation-delay: 3.2s;
}
.asaka03 .sec03__flex-01 .right .paw-33 {
  right: 6px;
  bottom: 30px;
  animation-delay: 3.6s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec03__flex-01 .left {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec03__flex-01 .left {
    max-width: 386px;
  }
}
.asaka03 .sec03__flex-01 .left .caption {
  padding-top: 5px;
  font-size: 10px;
  color: #333;
}
.asaka03 {
  /* ~.sec03 */
}
.asaka03 .sec04 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec04 .border {
  width: 100%;
  margin-bottom: 25px;
  padding-block: 15px;
  background-color: #f9e6e2;
}
@media (min-width: 768px) {
  .asaka03 .sec04 .border {
    margin-bottom: 50px;
    padding-block: 30px;
  }
}
.asaka03 .sec04 .border-title {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec04 .border-title {
    max-width: 618px;
  }
}
.asaka03 .sec04 .title {
  margin-bottom: clamp(0.625rem, 0.178rem + 1.99vw, 1.875rem);
  width: clamp(11.25rem, 1.299rem + 44.23vw, 22.5rem);
  height: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec04 .title {
    width: 100%;
    max-width: 662px;
  }
}
.asaka03 .sec04__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec04__img-01 {
  position: relative;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .asaka03 .sec04__img-01 {
    margin-top: 80px;
  }
}
.asaka03 .sec04__img-01 .text {
  width: 100%;
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
}
@media (max-width: 767px) {
  .asaka03 .sec04__img-01 .text {
    padding-top: 10px;
  }
}
@media (min-width: 768px) {
  .asaka03 .sec04__img-01 .text {
    position: absolute;
    top: 0;
    right: 0;
    width: 47%;
    line-height: 2;
  }
}
.asaka03 .sec04__img-01 .caption {
  padding-top: 5px;
  color: #515151;
  font-size: 10px;
}
.asaka03 .sec04__flex-01 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin-top: 50px;
}
@media (min-width: 768px) {
  .asaka03 .sec04__flex-01 {
    flex-direction: row;
    justify-content: space-between;
    align-items: normal;
    margin-top: 100px;
    gap: 10px;
  }
}
.asaka03 .sec04__flex-01 .left {
  flex: 1;
}
@media (min-width: 768px) {
  .asaka03 .sec04__flex-01 .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
  }
}
.asaka03 .sec04__flex-01 .left .text {
  padding-top: 30px;
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 2;
}
.asaka03 .sec04__flex-01 .left .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec04__flex-01 .left .paw-container {
  position: relative;
  max-width: 415px;
  width: 100%;
  height: 81px;
  margin-top: auto;
}
.asaka03 .sec04__flex-01 .left .paw-34 {
  right: 0;
  bottom: 20px;
  animation-delay: 0s;
}
.asaka03 .sec04__flex-01 .left .paw-35 {
  right: 36px;
  bottom: 38px;
  animation-delay: 0.4s;
}
.asaka03 .sec04__flex-01 .left .paw-36 {
  right: 60px;
  bottom: 9px;
  animation-delay: 0.8s;
}
.asaka03 .sec04__flex-01 .left .paw-37 {
  right: 84px;
  bottom: 40px;
  animation-delay: 1.2s;
}
.asaka03 .sec04__flex-01 .left .paw-38 {
  right: 113px;
  bottom: 0;
  animation-delay: 1.6s;
}
.asaka03 .sec04__flex-01 .left .paw-39 {
  right: 153px;
  bottom: 28px;
  animation-delay: 2s;
}
.asaka03 .sec04__flex-01 .left .paw-40 {
  right: 188px;
  bottom: 0;
  animation-delay: 2.4s;
}
.asaka03 .sec04__flex-01 .left .paw-41 {
  right: 218px;
  bottom: 27px;
  animation-delay: 2.8s;
}
.asaka03 .sec04__flex-01 .left .paw-42 {
  right: 262px;
  bottom: 0;
  animation-delay: 3.2s;
}
.asaka03 .sec04__flex-01 .left .paw-43 {
  right: 300px;
  bottom: 30px;
  animation-delay: 3.6s;
}
.asaka03 .sec04__flex-01 .left .paw-44 {
  right: 324px;
  bottom: 0;
  animation-delay: 4s;
}
.asaka03 .sec04__flex-01 .left .paw-45 {
  right: 348px;
  bottom: 57px;
  animation-delay: 4.4s;
}
.asaka03 .sec04__flex-01 .left .paw-46 {
  right: 392px;
  bottom: 3px;
  animation-delay: 4.8s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec04__flex-01 .right {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec04__flex-01 .right {
    max-width: 380px;
  }
}
.asaka03 .sec04__flex-01 .right .caption {
  padding-top: 5px;
  font-size: 10px;
  color: #333;
}
.asaka03 .sec04 .text.sp {
  line-height: 1.75;
  padding-block: 15px;
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
}
.asaka03 {
  /* ~.sec04 */
}
.asaka03 .sec05 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec05 .border {
  width: 100%;
  margin-bottom: 25px;
  padding-block: 15px;
  background-color: #f9e6e2;
}
@media (min-width: 768px) {
  .asaka03 .sec05 .border {
    margin-bottom: 50px;
    padding-block: 30px;
  }
}
.asaka03 .sec05 .border-title {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec05 .border-title {
    max-width: 692px;
  }
}
.asaka03 .sec05__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec05__img-01 {
  width: 100%;
  height: auto;
  margin-block: 30px 0;
}
@media (min-width: 768px) {
  .asaka03 .sec05__img-01 {
    margin-block: 60px 10px;
  }
}
.asaka03 .sec05__flex-01 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 25px;
}
@media (min-width: 768px) {
  .asaka03 .sec05__flex-01 {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 50px;
  }
}
.asaka03 .sec05__flex-01 .left {
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec05__flex-01 .left {
    max-width: 380px;
  }
}
.asaka03 .sec05__flex-01 .left .caption {
  padding-top: 5px;
  font-size: 10px;
  color: #515151;
}
.asaka03 .sec05__flex-01 .left .caption_inset {
  position: absolute;
  inset: auto 5px 2.5em auto;
  font-size: 10px;
  color: #fff;
  -webkit-text-stroke: 2px #666;
  paint-order: stroke fill;
}
.asaka03 .sec05__flex-01 .right {
  flex: 1;
  width: 100%;
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .asaka03 .sec05__flex-01 .right {
    max-width: 375px;
    white-space: nowrap;
  }
}
.asaka03 .sec05 .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec05 .paw-container {
  position: relative;
  width: 157px;
  height: 126px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec05 .paw-container {
    transform: translate(0, -70px);
  }
}
@media (min-width: 1100px) {
  .asaka03 .sec05 .paw-container {
    transform: translate(100px, -70px);
  }
}
.asaka03 .sec05 .paw-47 {
  right: 141px;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec05 .paw-48 {
  right: 84px;
  bottom: 12px;
  animation-delay: 0.4s;
}
.asaka03 .sec05 .paw-49 {
  right: 73px;
  bottom: 55px;
  animation-delay: 0.8s;
}
.asaka03 .sec05 .paw-50 {
  right: 33px;
  bottom: 46px;
  animation-delay: 1.2s;
}
.asaka03 .sec05 .paw-51 {
  right: 41px;
  bottom: 80px;
  animation-delay: 1.6s;
}
.asaka03 .sec05 .paw-52 {
  right: 2px;
  bottom: 70px;
  animation-delay: 2s;
}
.asaka03 .sec05 .paw-53 {
  right: 0;
  bottom: 110px;
  animation-delay: 2.4s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 {
  /* ~.sec05 */
}
.asaka03 .sec06 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec06 .title {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec06 .title {
    max-width: 663px;
  }
}
.asaka03 .sec06__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec06__img-01 {
  position: relative;
  width: 90%;
  margin: 30px 0 0 auto;
}
@media (min-width: 768px) {
  .asaka03 .sec06__img-01 {
    width: 100%;
    margin: 70px 0 0 0;
  }
}
.asaka03 .sec06__img-01 .caption {
  padding-top: 5px;
  font-size: 10px;
  color: #515151;
}
.asaka03 .sec06__img-01 .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec06__img-01 .paw-wrap {
  position: absolute;
  inset: auto auto -21px -64px;
  z-index: 2;
}
.asaka03 .sec06__img-01 .paw-container {
  position: relative;
  width: 208px;
  height: 257px;
}
.asaka03 .sec06__img-01 .paw-54 {
  right: 0;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec06__img-01 .paw-55 {
  right: 12px;
  bottom: 37px;
  animation-delay: 0.4s;
}
.asaka03 .sec06__img-01 .paw-56 {
  right: 47px;
  bottom: 40px;
  animation-delay: 0.8s;
}
.asaka03 .sec06__img-01 .paw-57 {
  right: 42px;
  bottom: 75px;
  animation-delay: 1.2s;
}
.asaka03 .sec06__img-01 .paw-58 {
  right: 90px;
  bottom: 75px;
  animation-delay: 1.6s;
}
.asaka03 .sec06__img-01 .paw-59 {
  right: 99px;
  bottom: 121px;
  animation-delay: 2s;
}
.asaka03 .sec06__img-01 .paw-60 {
  right: 139px;
  bottom: 132px;
  animation-delay: 2.4s;
}
.asaka03 .sec06__img-01 .paw-61 {
  right: 140px;
  bottom: 170px;
  animation-delay: 2.8s;
}
.asaka03 .sec06__img-01 .paw-62 {
  right: 184px;
  bottom: 191px;
  animation-delay: 3.2s;
}
.asaka03 .sec06__img-01 .paw-63 {
  right: 190px;
  bottom: 237px;
  animation-delay: 3.6s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 {
  /* ~.sec06 */
}
.asaka03 .sec07 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec07 .title {
  width: clamp(17.5rem, 5.338rem + 54.05vw, 31.25rem);
}
@media (min-width: 768px) {
  .asaka03 .sec07 .title {
    width: 100%;
  }
}
.asaka03 .sec07__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec07 .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec07 .paw-container {
  position: relative;
  width: 100%;
  height: 95px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .asaka03 .sec07 .paw-container {
    width: 500px;
    margin-right: 20px;
  }
}
.asaka03 .sec07 .paw-64 {
  right: 0;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec07 .paw-65 {
  right: 14px;
  bottom: 30px;
  animation-delay: 0.3s;
}
.asaka03 .sec07 .paw-66 {
  right: 53px;
  bottom: 13px;
  animation-delay: 0.6s;
}
.asaka03 .sec07 .paw-67 {
  right: 78px;
  bottom: 48px;
  animation-delay: 0.9s;
}
.asaka03 .sec07 .paw-68 {
  right: 109px;
  bottom: 23px;
  animation-delay: 1.2s;
}
.asaka03 .sec07 .paw-69 {
  right: 138px;
  bottom: 58px;
  animation-delay: 1.5s;
}
.asaka03 .sec07 .paw-70 {
  right: 164px;
  bottom: 37px;
  animation-delay: 1.8s;
}
.asaka03 .sec07 .paw-71 {
  right: 184px;
  bottom: 65px;
  animation-delay: 2.1s;
}
.asaka03 .sec07 .paw-72 {
  right: 217px;
  bottom: 42px;
  animation-delay: 2.4s;
}
.asaka03 .sec07 .paw-73 {
  right: 248px;
  bottom: 65px;
  animation-delay: 2.7s;
}
.asaka03 .sec07 .paw-74 {
  right: 288px;
  bottom: 47px;
  animation-delay: 3s;
}
.asaka03 .sec07 .paw-75 {
  right: 340px;
  bottom: 68px;
  animation-delay: 3.3s;
}
.asaka03 .sec07 .paw-76 {
  right: 376px;
  bottom: 48px;
  animation-delay: 3.6s;
}
.asaka03 .sec07 .paw-77 {
  right: 398px;
  bottom: 38px;
  animation-delay: 3.9s;
}
.asaka03 .sec07 .paw-78 {
  right: 440px;
  bottom: 58px;
  animation-delay: 4.2s;
}
.asaka03 .sec07 .paw-79 {
  right: 484px;
  bottom: 76px;
  animation-delay: 4.5s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec07__img-01 {
  position: relative;
  width: 100%;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .asaka03 .sec07__img-01 {
    margin-top: 70px;
  }
}
.asaka03 .sec07__img-01 .caption {
  padding-top: 5px;
  font-size: 10px;
  color: #515151;
}
.asaka03 .sec07__img-01 .paw {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec07__img-01 .paw-wrap {
  position: absolute;
  inset: auto auto -21px -64px;
  z-index: 2;
}
.asaka03 .sec07__img-01 .paw-container {
  position: relative;
  width: 208px;
  height: 257px;
}
.asaka03 .sec07__img-01 .paw-54 {
  right: 0;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec07__img-01 .paw-55 {
  right: 12px;
  bottom: 37px;
  animation-delay: 0.4s;
}
.asaka03 .sec07__img-01 .paw-56 {
  right: 47px;
  bottom: 40px;
  animation-delay: 0.8s;
}
.asaka03 .sec07__img-01 .paw-57 {
  right: 42px;
  bottom: 75px;
  animation-delay: 1.2s;
}
.asaka03 .sec07__img-01 .paw-58 {
  right: 90px;
  bottom: 75px;
  animation-delay: 1.6s;
}
.asaka03 .sec07__img-01 .paw-59 {
  right: 99px;
  bottom: 121px;
  animation-delay: 2s;
}
.asaka03 .sec07__img-01 .paw-60 {
  right: 139px;
  bottom: 132px;
  animation-delay: 2.4s;
}
.asaka03 .sec07__img-01 .paw-61 {
  right: 140px;
  bottom: 170px;
  animation-delay: 2.8s;
}
.asaka03 .sec07__img-01 .paw-62 {
  right: 184px;
  bottom: 191px;
  animation-delay: 3.2s;
}
.asaka03 .sec07__img-01 .paw-63 {
  right: 190px;
  bottom: 237px;
  animation-delay: 3.6s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec07__flex-01 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 768px) {
  .asaka03 .sec07__flex-01 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
}
.asaka03 .sec07__flex-01 .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 25px;
}
@media (min-width: 768px) {
  .asaka03 .sec07__flex-01 .left {
    flex: 1;
    gap: 50px;
  }
}
.asaka03 .sec07__flex-01 .left .text {
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 2;
}
.asaka03 .sec07__flex-01 .right {
  width: 100%;
}
@media (min-width: 768px) {
  .asaka03 .sec07__flex-01 .right {
    max-width: 385px;
  }
}
.asaka03 .sec07__column {
  position: relative;
  margin: clamp(3.125rem, 2.007rem + 4.97vw, 6.25rem) auto auto 10px;
  background-color: #f8e5e2;
}
.asaka03 .sec07__column::before {
  content: "";
  inset: -10px auto auto -10px;
  position: absolute;
  border-left: 2px dashed #f08c8d;
  border-right: 2px dashed #f08c8d;
  border-bottom: 2px dashed #f08c8d;
  width: 100%;
  height: 100%;
}
.asaka03 .sec07__column .title {
  width: clamp(17.5rem, 0.625rem + 75vw, 47.5rem);
  margin-inline: auto;
  transform: translateY(-30px);
}
.asaka03 .sec07__column .inner {
  padding: 0 30px 50px;
}
.asaka03 .sec07__column .text {
  font-size: 14px;
  line-height: 1.7;
}
.asaka03 .sec07__column .image-01 {
  margin-block: 15px;
}
.asaka03 .sec07__column .wide {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: fit-content;
  color: #f08c8d;
  font-weight: bold;
  font-size: 14px;
  margin-inline: auto;
  padding: 12px 20px;
}
.asaka03 .sec07__column .wide::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 24px;
  border-right: 3px solid #f08c8d;
  transform: rotate(-25deg);
  border-radius: 2px;
}
.asaka03 .sec07__column .wide::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 24px;
  border-left: 3px solid #f08c8d;
  transform: rotate(25deg);
  border-radius: 2px;
}
.asaka03 .sec07__column .white-box {
  padding: 10px 25px 15px;
  text-align: center;
  background-color: #fff;
}
.asaka03 .sec07__column .white-box-title {
  color: #f08c8d;
  font-size: 16px;
  font-weight: bold;
}
.asaka03 .sec07__column .white-box .flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-block: 15px;
}
@media (min-width: 768px) {
  .asaka03 .sec07__column .white-box .flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
}
.asaka03 .sec07__column .white-box .flex .gold {
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  background-color: #a99b8b;
}
.asaka03 .sec07__caption {
  padding-top: 20px;
  font-size: 10px;
  color: #515151;
  line-height: 1.5;
}
.asaka03 {
  /* ~.sec07 */
}
.asaka03 .sec08 {
  padding-top: clamp(3.75rem, 3.079rem + 2.98vw, 5.625rem);
}
.asaka03 .sec08 .title {
  width: clamp(17.5rem, 4.398rem + 58.23vw, 32.313rem);
}
@media (min-width: 768px) {
  .asaka03 .sec08 .title {
    width: 100%;
    max-width: 517px;
  }
}
.asaka03 .sec08__text {
  padding-top: clamp(1.563rem, 1.003rem + 2.49vw, 3.125rem);
  font-size: clamp(0.813rem, 0.745rem + 0.3vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.asaka03 .sec08__img-01 {
  position: relative;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .asaka03 .sec08__img-01 {
    margin-top: 80px;
  }
}
.asaka03 .sec08__img-01 .paw {
  position: absolute;
  width: clamp(1.25rem, 0.803rem + 1.99vw, 2.5rem);
  height: clamp(1.25rem, 0.803rem + 1.99vw, 2.5rem);
  opacity: 0;
  animation: loopStep 6s infinite;
}
.asaka03 .sec08__img-01 .paw-wrap {
  position: absolute;
  inset: auto 0 clamp(-1.875rem, -0.98rem - 3.98vw, -4.375rem) auto;
  z-index: 2;
}
.asaka03 .sec08__img-01 .paw-container {
  position: relative;
  width: 256px;
  height: 306px;
  margin-left: auto;
}
@media (min-width: 1100px) {
  .asaka03 .sec08__img-01 .paw-container {
    transform: translateX(100px);
  }
}
.asaka03 .sec08__img-01 .paw-80 {
  left: 0;
  bottom: 0;
  animation-delay: 0s;
}
.asaka03 .sec08__img-01 .paw-81 {
  left: 66px;
  bottom: 23px;
  animation-delay: 0.4s;
}
.asaka03 .sec08__img-01 .paw-82 {
  left: 63px;
  bottom: 88px;
  animation-delay: 0.8s;
}
.asaka03 .sec08__img-01 .paw-83 {
  left: 126px;
  bottom: 88px;
  animation-delay: 1.2s;
}
.asaka03 .sec08__img-01 .paw-84 {
  left: 117px;
  bottom: 170px;
  animation-delay: 1.6s;
}
.asaka03 .sec08__img-01 .paw-85 {
  left: 200px;
  bottom: 193px;
  animation-delay: 2s;
}
.asaka03 .sec08__img-01 .paw-86 {
  left: 214px;
  bottom: 268px;
  animation-delay: 2.4s;
}
@keyframes loopStep {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
.asaka03 .sec08__column {
  position: relative;
  margin: clamp(5rem, 1.869rem + 13.92vw, 13.75rem) auto auto 10px;
  background-color: #f8e5e2;
}
.asaka03 .sec08__column::before {
  content: "";
  inset: -10px auto auto -10px;
  position: absolute;
  border-left: 2px dashed #f08c8d;
  border-right: 2px dashed #f08c8d;
  border-bottom: 2px dashed #f08c8d;
  width: 100%;
  height: 100%;
}
.asaka03 .sec08__column .column-title {
  width: clamp(13.125rem, 1.523rem + 51.56vw, 33.75rem);
  margin-inline: auto;
  transform: translateY(-30px);
}
.asaka03 .sec08__column .inner {
  padding: 0 30px 50px;
}
.asaka03 .sec08__column .text {
  font-size: 14px;
  line-height: 1.7;
}
.asaka03 .sec08__caption {
  margin-block: 35px;
  font-size: 10px;
  color: #515151;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .asaka03 .sec08__caption {
    margin-block: 70px;
  }
}
.asaka03 {
  /* ~.sec08 */
}

/*# sourceMappingURL=interview-asaka.css.map */