@charset "UTF-8";

:root {
  --header-color: #1A853C;
  --white-color: #FFFFFF;
  --heading-color: #525D78;
  --text-color: #000000;
  --gold-color: #CEB583;
  --shiba-color: #57B464;
  --line-color: #06C755;
  --border-radius: 20px;
  --light-gray-color: #F5F6F7;
  --light-gold-color: #FEF9E9;


  --sp-breakpoint: 768;
  --pc-breakpoint: 1024;
  --normalized-factor: calc((100vw - (var(--sp-breakpoint) * 1px)) / (var(--pc-breakpoint) - var(--sp-breakpoint)));
}

@property --formula {
  syntax: '<length>';
  initial-value: 0;
  inherits: false;
}

*,
::before,
::after {
  box-sizing: border-box;
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
  font-size: var(--clamp);

  --formula: var(--clamp);
  --clamp-font-size-number: calc(10000 * tan(atan2(var(--formula), 10000px)));
  --clamp-font-size-number-for-line-height: clamp(
    var(--clamp-min),
    var(--clamp-font-size-number),
    var(--clamp-max)
  );
  --max-line-height: 1.8;
  --font-size-of-max-line-height: 14;
  --min-line-height: 1.25;
  --font-size-of-min-line-height: 50;
  --line-height-diff: calc(var(--max-line-height) - var(--min-line-height));
  --fonf-size-of-line-height-diff: calc(var(--font-size-of-min-line-height) - var(--font-size-of-max-line-height));
  --line-height-slope: calc(var(--line-height-diff) / var(--fonf-size-of-line-height-diff));
  --line-height: clamp(
    var(--min-line-height),
    calc((var(--line-height-diff) - ((var(--clamp-font-size-number-for-line-height) - var(--font-size-of-max-line-height)) * var(--line-height-slope))) + var(--min-line-height)),
    var(--max-line-height)
  );
  line-height: var(--line-height);
}

html {
  font-family: 'Zen Maru Gothic', sans-serif;
}

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 18;
  background-color: var(--white-color);
  margin: 0;
  color: var(--text-color);
}

/* 使い方 */
/* .title {
  --clamp-min: 20;
  --clamp-max: 24;
} */

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: bold;
}

ul, ol {
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
  color: var(--heading-color);
  font-weight: bold;
}

.sports-section {
  padding-block: 5em;
  padding-inline: 1em;
}

.bg-white {
  background-color: var(--white-color);
}

.bg-light-gray {
  background-color: var(--light-gray-color);
}

.bg-light-gold {
  background-color: var(--light-gold-color);
}

/*
  MARK: Header
*/
.sports-header {
  background-color: var(--header-color);
  color: var(--white-color);
  text-align: center;
  --clamp-min: 20;
  --clamp-max: 32;
  font-weight: bold;
}

/*
  MARK: Footer
*/
.sports-footer {
  display: block grid;
  gap: 1.5em;
  padding-block: 4em;
  @media (max-width: 767px) {
    padding-inline: 1em;
  }

  .sports-footer__logo {
    @media (max-width: 767px) {
      text-align: center;
    }
  }

  .sports-footer__inner {
    display: block grid;
    @media (min-width: 768px) {
      grid-template-columns: 2fr 3fr;
    }
    max-width: 705px;
    margin-inline: auto;
    width: 100%;
  }
  .sports-footer__info {
    display: block grid;
    justify-items: center;
    gap: .25em;
  }
  .sports-footer__tel {
    color: var(--heading-color);
    font-weight: bold;
  }
  .sports-footer__tel-text {
    --clamp-min: 24;
    --clamp-max: 24;
  }
  .sports-footer__tel-number {
    --clamp-min: 46;
    --clamp-max: 46;
  }
  .sports-footer__business-hours {
    --clamp-min: 20;
    --clamp-max: 20;
    width: 100%;
    background-color: var(--gold-color);
    color: var(--white-color);
    font-weight: bold;
    border-radius: 3em;
    padding-inline: 1em;
    text-align: center;
  }
  .sports-footer__text {
    text-align: center;
    --clamp-min: 16;
    --clamp-max: 16;
    @media (min-width: 768px) {
      br { display: none; }
    }
  }
}

/*
  MARK: MV
*/
.sports-mv {
  position: relative;
  overflow: hidden;
  display: block grid;
  place-items: center;
  min-height: 100svh;
  min-height: calc(100svh - 1em);

  --clamp-min: 20;
  --clamp-max: 32;
  
}
.has-adminbar .sports-mv {
  min-height: calc(100svh - 1lh - 32px);
  @media screen and (max-width: 782px) {
    min-height: calc(100svh - 1lh - 46px);
  }
}
.sports-mv__inner {
  display: block grid;
  place-items: center;
  font-size: 1rem;
  gap: 1em;
  max-width: 1100px;
  margin-inline: auto;

  padding: 3rem 5vw 2rem;
  @media (min-width: 768px) {
    padding: 3rem 1em 2rem;
  }
}
.sports-mv__logo {
  text-align: center;
  @media (max-width: 767px) {
    width: 60vw;

    img {
      height: auto;
      max-width: 100%;
    }
  }

  img {
    vertical-align: bottom;
  }
}
.sports-mv__title {
  display: block grid;
  place-items: center;
  gap: .5rem;
  margin-block-end: 1rem;
  color: var(--white-color);
}
.sports-mv__title__top {
  font-size: 5vw;
  white-space: nowrap;
  @media (min-width: 768px) {
    font-size: min(4vw, 32px);
  }
  border-bottom: 2px solid var(--white-color);
  text-shadow: 0 0 22px #034B11;
}
.sports-mv__title__bottom {
  font-size: 18vw;
  line-height: 1.1;
  @media (min-width: 768px) {
    font-size: min(9vw, 102px);
  }
  text-shadow: 0 0 22px #034B11;
}
.sports-mv__caution {
  white-space: nowrap;
  color: var(--white-color);
  font-size: 1rem;
}
.sports-mv__list {
  display: block flex;
  gap: 4vw;
  @media (min-width: 768px) {
    gap: 3rem;
  }
  margin-inline: auto;
  img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
.sports-mv__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    inset: 0;
    top: 0;
    left: 0;
    position: absolute;
  }
}

/*
  MARK: 画像
*/

.sports-images {
  display: block grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr 1fr;
  width: 100%;

  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .sports-image {
    width: 100%;
    aspect-ratio: 862 / 338;
  }

  .sports-image:first-child {
    grid-column: span 2;
    aspect-ratio: 862 / 676;
    @media (min-width: 768px) {
      grid-column: unset;
      grid-row: span 2;
    }
  }

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/*
  MARK: CV設定
*/
.sports-cv {
  position: relative;
  @media (max-width: 767px) {
    padding-inline: 1em;
  }

  .sports-cv__image {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    @media (max-width: 767px) {
      display: none;
    }

    img {
      max-width: none;
      width: 100%;
      background-color: var(--light-gray-color);
    }
  }

  .sports-cv__inner {
    display: block grid;
    place-items: center;
    gap: 1em;
    position: relative;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    max-width: 980px;
    margin-inline: auto;
    padding: 2em;
    @media (min-width: 768px) {
      padding: 2em 4em;
    }
  }

  .sports-cv__title {
    --clamp-min: 28;
    --clamp-max: 32;
  }

  .sports-cv__sample {
    width: 100%;
    text-align: center;
    --clamp-min: 20;
    --clamp-max: 24;
    font-weight: bold;
    background-color: var(--shiba-color);
    color: var(--white-color);
    border-radius: 3em;
  }

  .sports-cv__lead {
    --clamp-min: 16;
    --clamp-max: 16;
  }

  .sports-cv__buttons {
    display: block grid;
    gap: 1em;
    width: 100%;
    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      gap: 2em;
    }

    .sports-cv__button {
      --clamp-min: 18;
      --clamp-max: 24;
      display: block flex;
      align-items: center;
      justify-content: center;
      gap: 1em;
      color: var(--white-color);
      padding: .5em;
      border-radius: var(--border-radius);
      font-weight: bold;
      transition: opacity .1s ease-in-out;

      &:hover {
        opacity: .5;
      }
    }

    .sports-cv__button--line {
      background-color: var(--line-color);
      @media (max-width: 767px) {
        img {
          width: auto;
          height: 2em;
        }
      }
    }
    .sports-cv__button--mail {
      background-color: var(--gold-color);
      @media (max-width: 767px) {
        img {
          width: auto;
          height: 1.2em;
          margin-block: .4em;
        }
      }
    }
  }
}

/*
  MARK: その他
*/
.floating {
  display: none !important;
}

/*
  MARK: 見出し
*/
.sports-heading {
  display: block grid;
  place-items: center;
  gap: 1em;
  position: relative;
  font-size: 1rem;
  padding-block-end: 2em;
  margin-block-end: 2em;

  &::after {
    content: '';
    display: block flow-root;
    width: 124px;
    height: 5px;
    background-color: var(--shiba-color);
    border-radius: 1em;
    margin-block-start: 2em;
  }
}
.sports-heading__ja {
  --clamp-min: 32;
  --clamp-max: 50;
}
.sports-heading__en {
  --clamp-min: 16;
  --clamp-max: 16;
  color: var(--shiba-color);
}
.sports-sub-heading {
  --clamp-min: 28;
  --clamp-max: 28;
  text-align: center;
  margin-block: 1em 2em;
}

/*
  MARK: main
*/

/*
  MARK: FAQ
*/
.sports-faq-list {
  display: block grid;
  gap: 1em;
  max-width: 1100px;
  margin-inline: auto;
}
.sports-faq-list__item {
  display: block grid;
  gap: 1em;
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  padding: 1.5em;
}
.sports-faq-question,
.sports-faq-answer {
  display: block grid;
  grid-template-columns: 3rem auto;
  gap: 1em;
  text-align: left;

  &::before {
    display: block grid;
    place-items: center;
    font-weight: bold;
    color: var(--white-color);
    width: 3rem;
    height: 3rem;
    line-height: 1;
    font-size: 2rem;
    text-align: center;
    border-radius: 3px;
  }
}
.sports-faq-question {
  color: var(--text-color);
  --clamp-min: 20;
  --clamp-max: 20;

  &::before {
    content: 'Q';
    background-color: var(--gold-color);
  }
}
.sports-faq-answer {
  &::before {
    content: 'A';
    background-color: var(--shiba-color);
  }
}
.sports-faq-answer__text,
.sports-faq-question__text {
  padding-block: .5rem;
}

/*
  MARK: メンテナンス
*/

.sports-maintenance__inner {
  display: block grid;
  gap: 2em;
  @media (min-width: 768px) {
    grid-template-columns: 9fr 1fr 11fr;
    grid-template-areas: "text . images";
    gap: 0;
  }
  max-width: 1100px;
  margin-inline: auto;
}
.sports-maintenance__text {
  @media (min-width: 768px) {
    grid-area: text;
  }
}
.sports-maintenance__images {
  display: block grid;
  @media (min-width: 768px) {
    grid-area: images;
  }
  gap: 2em;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);

  .sports-maintenance__image {
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    &:last-child {
      grid-column: span 2;
    }
    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .sports-maintenance__image-text {
    --clamp-min: 20;
    --clamp-max: 32;
    display: block grid;
    place-items: center;
    position: absolute;
    font-weight: bold;
    width: 100%;
    height: 100%;
    color: var(--white-color);
    z-index: 1;
  }
}

/*
  MARK: SDGs
*/

.sports-sdgs-list {
  display: block grid;
  gap: 2em;
  max-width: 1100px;
  margin-inline: auto;

  grid-template-columns: auto;
  grid-template-rows: 1fr auto 1fr auto 1fr auto;
  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 3em;
  }
}
.sports-sdgs-list__item {
  display: block grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 1em;
}
.sports-sdgs-list__image {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.sports-sdgs-list__image-text {
  --clamp-min: 32;
  --clamp-max: 32;
  display: block grid;
  place-items: center;
  position: absolute;
  font-weight: bold;
  width: 100%;
  height: 100%;
  color: var(--white-color);
  text-align: center;
  z-index: 1;
}

/*
  MARK: Instagram
*/

.sports-instagram__inner {
  max-width: 1000px;
  margin-inline: auto;
}

/*
  MARK: 施工までの流れ
*/

.sports-flow__list {
  display: block grid;
  gap: 1em;
  max-width: 1100px;
  margin-inline: auto;
  counter-reset: item;
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sports-flow__item {
  display: block grid;
  grid-template-rows: auto auto;
  grid-template-columns: 6rem 1fr;
  gap: 1em;
  padding: 1em;

  @media (min-width: 768px) {
    grid-template-rows: subgrid;
    grid-template-columns: auto;
    grid-row: span 3;
    justify-items: center;
    padding: 3em 1.5em 1.5em;
  }
  background-color: var(--white-color);
  position: relative;
  border-radius: var(--border-radius);

  &::before {
    content: counter(item);
    counter-increment: item;
    font-size: 1.25rem;
    width: 2em;
    height: 2em;
    margin-inline: auto;
    display: block grid;
    place-items: center;
    font-weight: bold;
    color: var(--white-color);
    background-color: var(--shiba-color);
    border-radius: 50%;
  }
  @media (min-width: 768px) {
    &::before {
      position: absolute;
      top: -1em;
      left: calc(50% - 1em);
    }
  }
}

.sports-flow__item-title {
  @media (min-width: 768px) {
    text-align: center;
  }
  color: var(--shiba-color);
  font-weight: bold;
  --clamp-min: 20;
  --clamp-max: 20;
  @media (max-width: 767px) {
    order: 1;
  }
}

.sports-flow__item-icon {
  @media (max-width: 767px) {
    order: 2;
    text-align: center;

    img {
      max-width: 100%;
    }
  }
}

.sports-flow__item-description {
  @media (max-width: 767px) {
    order: 3;
  }
}

/*
  MARK: 料金
*/
.sports-price {
  background-color: var(--white-color);

  @media (min-width: 768px) {
    background-color: var(--light-gray-color);
  }
}
.sports-price__box {
  display: block grid;
  gap: 1em;
  max-width: 1100px;
  margin-inline: auto;
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  @media (min-width: 768px) {
    padding: 2em;
  }
  & > * {
    margin: 0;
  }
}
.sports-price__lead {
  --clamp-min: 20;
  --clamp-max: 20;
  text-align: center;
  color: var(--shiba-color);
  font-weight: bold;
}
.sports-price__caution {
  --clamp-min: 14;
  --clamp-max: 14;
  text-align: center;
  font-weight: bold;
}
.sports-price__table {
  display: block grid;
  grid-template-columns: 2fr 3fr 3fr;
  gap: .5em;
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  font-weight: bold;

  @media (min-width: 768px) {
    grid-template-columns: repeat(5, 1fr);
    .sports-price__head:not(:first-child) {
      display: none;
    }
  }
}

.sports-price__head {
  width: 100%;
  .sports-price__cell {
    border-radius: var(--border-radius);
    background-color: var(--light-gray-color);
    padding: 1em;
  }
}

.sports-price__cell {
  align-content: center;
}

.sports-price__row {
  display: block grid;
  gap: .25em;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.sports-price__image {
  border-radius: var(--border-radius);
  overflow: hidden;

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.sports-price__image-head {
  background-color: var(--shiba-color);
  color: var(--white-color);
}

/*
  MARK: 口コミ・施工実績
*/
.sports-reviews {
  overflow: hidden;
  width: 100%;
}

.sports-cases {
  overflow: hidden;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    var(--light-gray-color) 0%,
    var(--light-gray-color) calc(100% - 18em),
    var(--light-gold-color) calc(100% - 18em),
    var(--light-gold-color) 100%
  );
}

.sports-cases__list-outer,
.sports-reviews__list-outer {
  width: calc(100% + 2rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline-start: -1rem;
}

.sports-cases__list,
.sports-reviews__list {
  display: block flex;
  margin-inline: auto;
  width: fit-content;
}

.sports-cases__item,
.sports-reviews__item {
  --gap: 1em;
  @media (min-width: 768px) {
    --gap: 2em;
  }
  margin-inline-end: var(--gap);
  &:first-child {
    margin-inline-start: var(--gap);
  }
}

.sports-reviews__item {
  display: block grid;
  gap: 1em;
  width: 90vw;
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  --image-half-width: clamp(75px, 12.5vw, 100px);
  padding: calc(var(--image-half-width) + var(--gap)) 1.5em 1.5em;
  @media (min-width: 768px) {
    width: 50vw;
    min-width: 300px;
    max-width: 400px;
    padding: calc(var(--image-half-width) + var(--gap)) 2em 2em;
  }
  margin-block-start: var(--image-half-width);
  position: relative;

  .sports-reviews__item-image {
    position: absolute;
    width: calc(var(--image-half-width) * 2);
    height: calc(var(--image-half-width) * 2);
    top: calc(var(--image-half-width) * -1);
    left: calc(50% - var(--image-half-width));
    border-radius: var(--border-radius);
    overflow: hidden;
  
    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

.sports-reviews__item-title {
  --clamp-min: 24;
  --clamp-max: 24;
}

.sports-reviews__item-name {
  color: var(--shiba-color);
}

.sports-cases__item {
  display: block grid;
  width: 90vw;
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;

  @media (min-width: 768px) {
    grid-template-columns: 8fr 7fr;
    grid-template-areas: "text image";
    width: 80vw;
    min-width: 680px;
    max-width: 880px;
  }

  .sports-cases__item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    @media (min-width: 768px) {
      grid-area: image;
      height: 100%;
      aspect-ratio: unset;
    }
  
    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .sports-cases__item-text {
    padding: 1.5em;
    display: block grid;
    gap: 1em;
    align-content: start;
    @media (min-width: 768px) {
      grid-area: text;
      padding: 2em;
    }
  }
}

.sports-cases__item-image-before {
  position: absolute;
  width: 40%;
  aspect-ratio: 4 / 3;
  top: 1em;
  left: 1em;
  z-index: 1;
  border-radius: var(--border-radius);
  overflow: hidden;

  &::before {
    content: 'Before';
    position: absolute;
    background-color: var(--shiba-color);
    color: var(--white-color);
    font-weight: bold;
    bottom: .5em;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 1em;
    border-radius: 3em;
  }
}

.sports-cases__item-image-after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  &::before {
    content: 'After';
    position: absolute;
    background-color: var(--shiba-color);
    color: var(--white-color);
    font-weight: bold;
    bottom: 1rem;
    left: 1rem;
    padding-inline: 1em;
    border-radius: 3em;
    --clamp-min: 16;
    --clamp-max: 24;
  }
}

.sports-cases__item-category {
  .sports-cases__item-category-ja {
    --clamp-min: 28;
    --clamp-max: 32;
    color: var(--heading-color);
    font-weight: bold;
    display: block flow-root;
  }
  .sports-cases__item-category-en {
    color: var(--shiba-color);
    display: block flow-root;
  }
}

.sports-cases__item-title {
  color: var(--shiba-color);
  --clamp-min: 16;
  --clamp-max: 20;
  border-bottom: 1px solid var(--heading-color);
  margin-block-end: 1em;
  padding-block-end: 1em;
}

/*
  MARK: 選ばれる理由
*/
.sports-reasons {
  position: relative;
  overflow: hidden;
  display: block grid;
  place-items: center;
  padding: 6em 1em;

  @media (min-width: 768px) {
    br {
      display: none;
    }
  }

  .sports-heading {
    margin-block: 0;
    padding-block: 0;
    text-align: center;
    &::after {
      background-color: var(--white-color);
    }
  }
  .sports-heading__ja,
  .sports-heading__en {
    color: var(--white-color);
  }
}
.sports-reasons__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/*
  MARK: バナー
*/
.sports-banners {
  display: block grid;
  place-items: center;
  padding: 5em 1em;
  overflow: hidden;
}
.sports-banners__list {
  display: block flex;
  flex-direction: column;
  @media (min-width: 1400px) {
    flex-direction: unset;
  }
  flex-wrap: nowrap;
  gap: 1em;
  text-align: center;

  a {
    transition: opacity .1s ease-in-out;
    &:hover {
      opacity: .5;
    }
  }

  img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
  }
}
.sports-banners__item {
  @media (min-width: 768px) {
    max-width: 691px;
  }
}

/*
  MARK: お困りごと
*/
.sports-warries {
  display: block grid;
  gap: 3em;
  padding-block: 3em;
  @media (min-width: 768px) {
    gap: 5em;
    padding-block: 5em;
  }
}

.sports-warries__inner {
  display: block grid;
  margin-inline: auto;
  width: 100%;
  @media (min-width: 768px) {
    grid-template-columns: calc((100vw - 1300px) / 2) 1fr 2fr calc((100vw - 1300px) / 2);
    grid-template-areas: 'image image text .';
    gap: 4em;
  }
}

.sports-warries__image {
  @media (min-width: 768px) {
    grid-area: image;
    position: relative;
    display: block grid;
    align-items: end;
    height: 100%;
  }
  overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 768px) {
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      inset: 0;
      top: 0;
      left: 0;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
  }
}

.sports-warries__text {
  display: block grid;
  padding: 3em 1em 0;
  @media (min-width: 768px) {
    grid-area: text;
    padding: 0;
    gap: 2em;
  }
  align-items: start;
  align-self: start;
}

.sports-warries__answer {
  color: var(--shiba-color);
  font-weight: bold;
  --clamp-min: 32;
  --clamp-max: 46;
  text-align: center;
  padding-inline: 1rem;
}

.sports-warries__list {
  display: block grid;
  gap: 1em;
  width: 100%;
  margin-inline: auto;
}

.sports-warries__item {
  display: block grid;
  gap: 1em;
  grid-template-columns: auto 1fr;
  border-bottom: 1px dotted var(--heading-color);
  padding-block-end: 1em;
  align-items: center;
  --clamp-min: 20;
  --clamp-max: 24;
  font-weight: bold;
  color: var(--heading-color);
}

/*
  MARK: 地図
*/

.sports-areas {
  position: relative;
  overflow: hidden;
}

.sports-areas__inner {
  @media (min-width: 768px) {
    display: block grid;
    grid-template-columns: 1fr 700px 1fr;
    gap: 1em;
    align-items: center;
    width: 1920px;
    position: relative;
    left: calc((100vw - 1920px) / 2);
  }
  @media (min-width: 1920px) {
    width: 1920px;
    margin-inline: auto;
    left: auto;
  }
}

.sports-areas__map {
  display: block flow-root;
  text-align: center;
  padding-inline: 1em;

  img {
    width: 100%;
    max-width: none;
    height: auto;
  }
}

.sports-areas__images {
  display: none;
}

@media (min-width: 768px) {
  .sports-areas__images {
    display: block grid;
    gap: 1.5em;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 2fr 1fr 3fr 3fr 1fr 2fr;
    grid-template-areas: ". . . . ."
      ". image2 image2 image2 ."
      ". image2 image2 image2 image4"
      "image1 image1 image3 image3 image3"
      ". . image3 image3 image3"
      ". . . . .";
    &:first-child {
      grid-template-areas: ". . . . ."
      ". image2 image2 image2 ."
      "image4 image2 image2 image2 ."
      "image3 image3 image3 image1 image1"
      "image3 image3 image3 . ."
      ". . . . .";
    }
    overflow: hidden;

    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .sports-areas__image:nth-child(1) {
    grid-area: image1;
  }
  .sports-areas__image:nth-child(2) {
    grid-area: image2;
  }
  .sports-areas__image:nth-child(3) {
    grid-area: image3;
  }
  .sports-areas__image:nth-child(4) {
    grid-area: image4;
  }
}

/*
  MARK: 理由
*/

.sports-reason {
  overflow: hidden;
  background-image: linear-gradient(135deg, rgba(87, 180, 100, 0.30) 0%, rgba(126, 217, 51, 0.30) 5%, rgba(166, 255, 0, 0.30) 10%, rgba(255, 255, 255, 1) 20%);
  padding-block: 10em 5em;
}

.sports-reason-header {
  display: block grid;
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
  }
  max-width: 1200px;
  margin-inline: auto;
}

.sports-reason-heading {
  display: block grid;
  place-items: center;
  position: relative;
  aspect-ratio: 1;
  @media (min-width: 768px) {
    width: min(550px, 50vw);
  }

  img {  
    position: absolute;
    width: 115%;
    height: 115%;
    object-fit: cover;
  }
}

.sports-reason-heading__inner {
  display: block grid;
  gap: 1em;
  text-align: center;
  color: var(--white-color);
  position: relative;
  z-index: 1;
}

.sports-reason-heading__number {
  --clamp-min: 150;
  --clamp-max: 200;
  display: block flow-root;
  line-height: 1;
  position: relative;

  &::after {
    content: '';
    display: block flow-root;
    width: fit-content;
    height: 5px;
    margin-inline: auto;
    background-color: var(--white-color);
    border-radius: 50%;
  }
}

.sports-reason-heading__hr {
  display: block flow-root;
  width: 120px;
  height: 5px;
  margin-inline: auto;
  background-color: var(--white-color);
  border-radius: 5px;
}

.sports-reason-heading__text {
  display: block flow-root;
  --clamp-min: 32;
  --clamp-max: 50;
  font-weight: bold;
  color: var(--white-color);

  span {
    font-size: .8em;
  }
}

.sports-reason-sub-heading {
  --clamp-min: 28;
  --clamp-max: 32;
  margin-block: 0;

  @media (max-width: 767px) {
    br {
      display: none;
    }
  }
}

.sports-reason--1 {
  .sports-reason-sub-heading {
    text-align: center;
  } 
}

.sports-reason--5 {
  .sports-reason-sub-heading {
    --clamp-min: 20;
    --clamp-max: 24;
    margin-block: 0;
  } 
}

.sports-reason-text {
  display: block grid;
  gap: 2em;
  padding-inline: 1em;
  padding-block-start: 6em;
  @media (min-width: 768px) {
    padding-block-start: 15em;
  }
}

.sports-reason-icon {
  text-align: center;
}

.sports-reason-hr {
  height: 1px;
  border-bottom: 1px dotted var(--heading-color); 
}

.sports-reason-main {
  @media (min-width: 768px) {
    position: relative;
  }
}

.sports-reason-bg {
  display: none;
  @media (min-width: 768px) {
    display: block flow-root;
    position: absolute;
    right: 0;
    top: 10em;
    width: calc((100vw - 1200px) / 2);
    overflow: hidden;
    img {
      display: block;
      width: 700px;
      height: auto;
    }
  }
  &.is-upper {
    @media (min-width: 768px) {
      top: -15em;
    }
  }
}

.sports-reason-logo {
  position: relative;

  img {
    vertical-align: bottom;
  }
}

.sports-reason-logo__image {
  display: block grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sports-reason-logo__bg {
  img {
    width: 100%;
    height: 100%;
    min-width: none;
  }
  @media (max-width: 767px) {
    width: 100%;
    height: 500px;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

.sports-reason-box {
  display: block grid;
  gap: 1em;
  background-color: var(--light-gray-color);
  padding: 1.5em 1em;
  @media (min-width: 768px) {
    padding: 1.5em 2em;
  }
  border-radius: var(--border-radius);
}

.sports-reason-box__heading {
  color: var(--shiba-color);
  position: relative;
  padding-bottom: 1em;
  text-align: center;
  --clamp-min: 16;
  --clamp-max: 20;
  &::after {
    content: '';
    display: block flow-root;
    width: 120px;
    height: 2px;
    margin-inline: auto;
    background-color: var(--shiba-color);
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 60px);
  }
}

.sports-reason-list {
  display: block grid;
  gap: 1em;
  width: 100%;
  margin-inline: auto;
  counter-reset: item;
}

.sports-reason-item {
  display: block grid;
  gap: 1em;
  grid-template-columns: auto 1fr;
  border-bottom: 1px dotted var(--heading-color);
  padding-block-end: 1em;
  align-items: center;
  --clamp-min: 20;
  --clamp-max: 24;
  font-weight: bold;
  color: var(--heading-color);

  &::before {
    content: counter(item);
    counter-increment: item;
    font-size: 1.25rem;
    width: 2em;
    height: 2em;
    margin-inline: auto;
    display: block grid;
    place-items: center;
    font-weight: bold;
    color: var(--white-color);
    background-color: var(--shiba-color);
    border-radius: 50%;
  }
}

.sports-reason-answer {
  color: var(--shiba-color);
  text-align: center;
  --clamp-min: 24;
  --clamp-max: 28;
}

.sports-reason--2 {
  .sports-reason-main__inner {
    display: block grid;
    gap: 3em;
    max-width: 1200px;
    margin-inline: auto;
    @media (max-width: 767px) {
      margin-block-start: 3em;
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 4em;
      padding-inline: 2em;
    }
  }
  .sports-reason-container {
    display: block grid;
    gap: 1em;
    padding-inline: 1em;
    justify-items: center;
    text-align: center;
    align-content: start;
    @media (min-width: 768px) {
      gap: 2em;
      padding-inline: 0;
    }
  }
  .sports-reason-container:first-child {
    @media (min-width: 768px) {
      padding-block-end: 10em;
    }
  }
  .sports-reason-container + .sports-reason-container {
    @media (min-width: 768px) {
      padding-block-start: 10em;
    }
  }
  .sports-reason-container__photo {
    border-radius: var(--border-radius);
    max-width: none;
    width: 100%;
    height: auto;
  }
  .sports-reason-container__heading {
    --clamp-min: 24;
    --clamp-max: 24;
  }
}

.sports-reason--3 {
  .sports-reason-main__inner {
    margin-top: 3em;
    @media (min-width: 768px) {
      margin-top: 5em;
    }
  }
  .sports-reason-main__top {
    display: block grid;
    gap: 3em;
    max-width: 1200px;
    margin-inline: auto;
    @media (max-width: 767px) {
      margin-block-start: 3em;
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 5em;
      padding-inline: 2em;
    }
  }
  .sports-reason-container {
    display: block grid;
    padding-inline: 1em;
    align-content: end;
    @media (min-width: 768px) {
      padding-inline: 0;
    }
  }
  .sports-reason-container__photo {
    border-radius: var(--border-radius);
    max-width: none;
    width: 100%;
    height: auto;
  }
  .sports-reason-main__bottom {
    display: block grid;
    gap: 2em;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1em;
    margin-block-start: 3em;
    text-align: center;
    @media (min-width: 768px) {
      margin-block-start: 5em;
      gap: 3em;
      padding-inline: 2em;
    }
  }

  .sports-reason-main__images {
    display: block grid;
    gap: 1em;
    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 2em;
    }
  }

  .sports-reason-main__image {
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;

    & > img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      top: 0;
      left: 0;
    }
  }

  .sports-reason-main__image-text {
    display: block flex;
    align-items: center;
    gap: .25em;
    position: absolute;
    z-index: 1;
    color: #fff;
    font-weight: bold;
    --clamp-min: 32;
    --clamp-max: 32;
    inset: 0;
    width: 100%;
    justify-content: center;

    img {
      width: 1em;
      height: auto;
    }
  }
  .sports-reason-main__heading {
    --clamp-min: 32;
    --clamp-max: 32;
    position: relative;
    padding-block-end: 1em;

    &::after {
      content: '';
      display: block flow-root;
      width: 120px;
      height: 5px;
      margin-inline: auto;
      background-color: var(--shiba-color);
      border-radius: 5px;
      position: absolute;
      bottom: 0;
      left: calc(50% - 60px);
    }
  }
  .sports-reason-main__answer {
    --clamp-min: 20;
    --clamp-max: 28;
  }
}

.sports-reason--4 {
  .sports-reason-main__inner {
    display: block grid;
    gap: 1em;
    max-width: 1200px;
    margin-inline: auto;
    margin-block-start: 3em;
    padding-inline: 1em;
    @media (min-width: 768px) {
      grid-template-columns: 2fr 1fr 2fr;
      gap: 1em;
      padding-inline: 2em;
      margin-block-start: 5em;
    }
    p {
      font-weight: bold;
      --clamp-min: 20;
      --clamp-max: 20;
      text-align: center;
    }
  }
  .sports-reason-main__image {
    display: block grid;
    gap: 1em;

    img {
      border-radius: var(--border-radius);
      max-width: none;
      width: 100%;
      height: auto;
      vertical-align: bottom;
    }
  }
  .sports-reason-main__arrow {
    align-items: center;
    display: block grid;
    gap: 1em;
    align-content: center;
    justify-content: center;
    justify-items: center;
    p {
      color: var(--shiba-color);
    }
    @media (max-width: 767px) {
      p br {
        display: none;
      }
      img {
        transform: rotate(90deg);
        height: 120px;
      }
    }
  }
}

.sports-reason--1 {
  position: relative;

  .sports-reason-main__head {
    display: block grid;
    gap: 2em;
    max-width: 1200px;
    margin-inline: auto;
    margin-block-start: 3em;
    padding-inline: 1em;
    text-align: center;
    @media (min-width: 768px) {
      padding-inline: 2em;
      margin-block-start: 5em;
    }
  }

  .sports-reason-main__head-heading {
    display: block grid;
    gap: 2rem;
    justify-items: center;
    --clamp-min: 36;
    --clamp-max: 50;
    color: var(--shiba-color);

    &::after {
      content: '';
      display: block flow-root;
      width: 8em;
      height: 1px;
      border-bottom: 1px dotted var(--heading-color);
    }

    @media (max-width: 767px) {
      &::after {
        width: 100%;
      }
    }
  }
}

.sports-reason-logotype {
  display: none;
}

@media (min-width: 768px) {
  .sports-reason-logotype {
    display: block flow-root;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 50%;
    width: 100%;

    span {
      white-space: nowrap;
      font-size: 200px;
      color: #EAF8E6;
      line-height: 1;
      font-weight: 200;
    }
  }
}

.sports-reason--1,
.sports-reason--5 {
  .sports-reason-main__inner {
    display: block grid;
    gap: 3em;
    max-width: 1200px;
    margin-inline: auto;
    margin-block-start: 3em;
    padding-inline: 1em;
    @media (min-width: 768px) {
      margin-block-start: 5em;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
    }

    img {
      max-width: none;
      width: 100%;
      height: auto;
    }
  }
  .sports-reason-main__heading {
    --clamp-min: 20;
    --clamp-max: 24;
    text-align: center;
    color: var(--shiba-color);
    border-radius: 3em;
    padding: .1em 1em;
  }
  .sports-reason-main__container:first-child {
    .sports-reason-main__heading {
      background-color: var(--light-gray-color);
      color: var(--text-color);
    }

    .sports-reason-main__answer {
      color: var(--heading-color);
      --clamp-min: 24;
      --clamp-max: 24;
      text-align: center;
    }
  }
  .sports-reason-main__container:last-child {
    .sports-reason-main__heading {
      background-color: var(--gold-color);
      color: var(--white-color);
    }

    .sports-reason-main__answer {
      color: var(--shiba-color);
      --clamp-min: 24;
      --clamp-max: 32;
      text-align: center;
    }
  }
  .sports-reason-main__container {
    display: block grid;
    gap: 3em;
    align-content: start;
    @media (min-width: 768px) {
      padding-inline: 1em;
      &:first-child {
        padding-inline-end: 4em;
        border-right: 2px dotted var(--heading-color);
      }
      &:last-child {
        padding-inline-start: 4em;
      }
    }
  }
}


/*
  MARK: 理由 - 注意事項
*/

.sports-reason-caution {
  padding-block: 5em;
  padding-inline: 1em;
}

.sports-reason-caution__inner {
  display: block grid;
  gap: 2em;
  max-width: 1100px;
  margin-inline: auto;
}

.sports-reason-caution__top {
  display: block grid;
  gap: 2em;
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sports-reason-caution__top-left {
  display: block grid;
  gap: 2em;
  align-content: start;
}

.sports-reason-caution__top-right {
  display: block grid;
  gap: 1em;
  align-content: start;
}

.sports-reason-caution-red {
  display: block grid;
  gap: 1em;
  background-color: #E65858;
  padding: 1.5em;
  text-align: center;
  border-radius: var(--border-radius);
  justify-items: center;
}

.sports-reason-caution-red__text {
  font-weight: normal;
  --clamp-min: 24;
  --clamp-max: 24;
  color: var(--white-color);
}

.sports-reason-caution__answer {
  display: block grid;
  align-items: center;
  justify-items: center;
  gap: 1em;
  @media (min-width: 768px) {
    grid-template-columns: auto 1fr;
    justify-items: unset;
  }
  --clamp-min: 24;
  --clamp-max: 32;
}

.sports-reason-caution__title {
  text-align: center;
  --clamp-min: 24;
  --clamp-max: 24;
}

.sports-reason-caution-box {
  display: block grid;
  gap: .5em;
  background-color: var(--white-color);
  padding: 1.5em 1em;
  border-radius: var(--border-radius);
  @media (min-width: 768px) {
    padding: 1.5em;
  }
}

.sports-reason-caution__heading {
  color: var(--shiba-color);
  --clamp-min: 16;
  --clamp-max: 20;
}

/*
  MARK: アニメーション
*/
:root {
  --animation-duration: 0.35s;
  --animation-timing-function: cubic-bezier(.645, .045, .355, 1);
}

body {
  .sports-mv__logo,
  .sports-mv__title__top,
  .sports-mv__title__bottom {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--animation-timing-function), transform .4s var(--animation-timing-function);
  }
  .sports-mv__logo {
    transition-delay: 0.1s;
  }
  .sports-mv__title__top {
    transition-delay: 0.2s;
  }
  .sports-mv__title__bottom {
    transition-delay: 0.3s;
  }
  .sports-mv__item {
    opacity: 0;
    transform: scale(.9) rotate(-5deg);
    transform-origin: 50% 50%;
    transition: opacity .4s var(--animation-timing-function), transform .4s var(--animation-timing-function);
  }
  .sports-mv__item:nth-child(1) {
    transition-delay: .9s;
  }
  .sports-mv__item:nth-child(2) {
    transition-delay: 1.0s;
  }
  .sports-mv__item:nth-child(3) {
    transition-delay: 1.1s;
  }
  .sports-header__text {
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .sports-mv__caution {
    opacity: 0;
    transition: opacity .5s ease-in-out 1s;
  }
  .sports-mv__bg {
    background-color: var(--header-color);
  }
  .sports-mv__bg img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: scale(1.02) translate3d(0, 0, 0);
    transform-origin: 50% 0%;
    filter: blur(5px);
    transition: transform .9s var(--animation-timing-function), filter .9s var(--animation-timing-function);
  }

  &.is-mv-loaded {
    .sports-mv__logo,
    .sports-mv__title__top,
    .sports-mv__title__bottom {
      opacity: 1;
      transform: translateY(0);
    }
    .sports-mv__item {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    .sports-header__text,
    .sports-mv__caution {
      opacity: 1;
    }
    .sports-mv__bg img {
      transform: scale(1);
      filter: blur(0);
    }
  }
}

.is-slow {
  --animation-duration: 1s;
}

.animation-slideup-list {
  --base-animation-delay: 0.1s;
  & > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
  }
  & > *:nth-child(2) {
    transition-delay: calc(var(--base-animation-delay) * 1);
  }
  & > *:nth-child(3) {
    transition-delay: calc(var(--base-animation-delay) * 2);
  }
  & > *:nth-child(4) {
    transition-delay: calc(var(--base-animation-delay) * 3);
  }
  & > *:nth-child(5) {
    transition-delay: calc(var(--base-animation-delay) * 4);
  }
  & > *:nth-child(6) {
    transition-delay: calc(var(--base-animation-delay) * 5);
  }
  & > *:nth-child(7) {
    transition-delay: calc(var(--base-animation-delay) * 6);
  }

  &.has-scroll-animation.is-scrolled {
    & > * {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.animation-heading {
  img {
    opacity: 0;
    transform: scale(.9) rotate(-5deg);
    transform-origin: 50% 50%;
    transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
  }

  &.has-scroll-animation.is-scrolled {
    img {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }
}

.animation-map {
  --base-animation-delay: 0.5s;
  .sports-areas__map {
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--animation-duration) var(--animation-timing-function) var(--base-animation-delay), transform var(--animation-duration) var(--animation-timing-function) var(--base-animation-delay);
  }
  .sports-areas__images--left {
    .sports-areas__image {
      opacity: 0;
      transform: translateX(5px);
      transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
    }
  }
  .sports-areas__images--right {
    .sports-areas__image {
      opacity: 0;
      transform: translateX(-5px);
      transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
    }
  }
  .sports-areas__images {
    .sports-areas__image:nth-child(1) {
      transition-delay: calc(var(--base-animation-delay) + ((var(--base-animation-delay) / 3) * 1));
    }
    .sports-areas__image:nth-child(2) {
      transition-delay: calc(var(--base-animation-delay) + ((var(--base-animation-delay) / 3) * 2));
    }
    .sports-areas__image:nth-child(3) {
      transition-delay: calc(var(--base-animation-delay) + ((var(--base-animation-delay) / 3) * 3));
    }
    .sports-areas__image:nth-child(4) {
      transition-delay: calc(var(--base-animation-delay) + ((var(--base-animation-delay) / 3) * 4));
    }
    .sports-areas__image:nth-child(5) {
      transition-delay: calc(var(--base-animation-delay) + ((var(--base-animation-delay) / 3) * 5));
    }
  }

  &.has-scroll-animation.is-scrolled {
    .sports-areas__map {
      opacity: 1;
      transform: scale(1);
    }
    .sports-areas__images {
      .sports-areas__image {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

.animation-slideup {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slide-left {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-slide-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-fadein {
  opacity: 0;
  transition: opacity var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.9);
  }
}