/* PC・SP共通 */
:root {
  --container-w: 1280px;
  --content-w: 960px;
  --wave-sz: 40px;
  --dot-h: 155px;

  --primary-c: #0bb3bf;
  --deep-c: #0ba4b5;
  --light-c: #7cd1de;
  --body-c: #455d5e;
  --bg-c: #d1fafc;
  --bg-y-c: #ffef9e;
  @media (width <= 640px) {
    font-size: 0.9375rem;

    --wave-sz: 20px;
    --dot-h: 78px;
  }
}

*:not(footer *),
::before,
::after {
  box-sizing: border-box;
}

.container-inner {
  width: var(--content-w);
  @media (width <= 640px) {
    width: 100%;
  }
}

.opacity02 a:hover {
  text-decoration: none;
}

p:has(img) {
  margin-bottom: 0;
  line-height: 1;
}

p:last-of-type {
  margin-bottom: 0;
}

span {
  transition: none;
}

a {
  transition: 0.2s;
}

a:hover {
  transition: 0.2s;
  opacity: 0.75;
}

body.kidsworkfes {
  color: var(--body-c);
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.125rem;
}

.title-extra,
.title-bold {
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
}
.title-extra {
  font-weight: 800;
}
.title-bold {
  font-weight: 700;
}

#content {
  background-color: transparent;
  background-image: none;
}

#content #content-wrapper {
  background-image: none;
  padding: 0;
}

#content .container-inner {
  width: var(--content-w);
  box-sizing: border-box;
  padding: 0 20px;
}

.title-common {
  font-size: 2.25rem;
  color: var(--primary-c);
  line-height: 1.4;
  @media (width <= 640px) {
    font-size: 2rem;
  }
}

header {
  position: relative;

  .banner {
    line-height: 1.4;
    display: flex;
    width: fit-content;
    font-size: 85.71%;
    /* 12px */
    font-weight: bold;
    padding-block: 0.5em;
    padding-inline: 1.2em 0.8em;
    border-bottom-left-radius: 1em;
    background-color: var(--primary-c);
    color: #fff;
    text-decoration: none;
    z-index: 3;
    transition: opacity 0.3s;
    position: absolute;
    inset: 0 0 auto auto;
    letter-spacing: -0.05em;
    text-decoration: none;
    gap: 0.8em;
    align-items: center;
    @media (width <= 640px) {
      inset: 0 auto auto 0;
      border-radius: 0 0 1em 0;
    }
    &:hover {
      opacity: 0.6;
      text-decoration: none;
    }
    &:after {
      content: "";
      display: inline-block;
      width: 11px;
      height: 8px;
      background-color: #fff;
      clip-path: polygon(0 0, 0 100%, 50% 50%);
      -webkit-clip-path: polygon(0 0, 0 100%, 50% 50%);
    }
  }
}
.hero {
  background: url(../images/home/bg-pattern.svg) left top/200px 200px;
  position: relative;
  &::before {
    inset: auto 0 0;
    position: absolute;
    content: "";
    height: var(--wave-sz);
    background: url(../images/home/wave-w.svg) left
      bottom/calc(var(--wave-sz) * 5.5) var(--wave-sz);
  }
  .inner {
    width: var(--container-w);
    height: 800px;
    position: relative;
    margin: auto;
    @media (width <= 640px) {
      height: 670px;
      --container-w: 100%;
    }
  }
  picture {
    position: absolute;
    inset: auto auto 0 50%;
    translate: -51%;
    width: 1394px;
    height: auto;
    display: block;
    @media (width <= 640px) {
      width: 412px;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}

.top-sec {
  background: linear-gradient(
    to bottom,
    transparent var(--wave-sz),
    var(--bg-c) var(--wave-sz)
  );
  padding-top: var(--wave-sz);
  position: relative;
  margin-top: 50px;
  &::before {
    inset: 0 0 auto;
    position: absolute;
    content: "";
    height: var(--wave-sz);
    background: url(../images/home/wave-b.svg) left
      bottom/calc(var(--wave-sz) * 5.5) var(--wave-sz);
  }
  &::after {
    inset: 390px 0 auto;
    position: absolute;
    content: "";
    height: var(--dot-h);
    background: url(../images/home/dot.svg) left
      bottom/calc(var(--dot-h) * 0.71) var(--dot-h) #fff;
    @media (width <= 640px) {
      background-repeat: repeat-x;
      background-position: top;
      top: 19lh;
      box-sizing: content-box;
      padding-bottom: 3lh;
    }
  }
  .inner {
    width: var(--container-w);
    position: relative;
    margin: auto;
    z-index: 1;
    @media (width <= 640px) {
      --container-w: 100%;
    }
  }
  picture {
    position: absolute;
    inset: calc(var(--wave-sz) * -1 - 30px) auto auto 50%;
    translate: -53%;
    width: min(104%, 1296px);
    height: auto;
    pointer-events: none;
    @media (width <= 640px) {
      width: 412px;
      top: auto;
      bottom: 5lh;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .container-inner {
    display: grid;
    justify-content: center;
    justify-items: center;
    gap: 1em;
    padding-top: 60px;

    @media (width <= 640px) {
      padding-top: 20px;
    }

    time {
      text-align: center;
      display: grid;
      place-items: center;
      color: var(--deep-c);
      width: 100px;
      height: 101px;
      background: url(../images/home/flower.svg) center/contain;

      > span {
        text-align: center;
        font-size: 1.3125rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
        @media (width <= 640px) {
          font-size: 1.15rem;
        }
      }
      .day {
        display: flex;
        align-items: baseline;
        font-size: 2em;
        span {
          letter-spacing: -0.07em;
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 500;
          line-height: 1;
          font-size: 0.9em;
          translate: 0 -10%;
        }
      }
    }
    h2 {
      text-align: center;
      @media (width <= 640px) {
        padding-bottom: 6lh;
      }
      span {
        font-size: 1.3em;
      }
    }
    > p {
      text-align: center;
      @media (width <= 640px) {
      }
    }
  }

  .images {
    background-color: #fff;
    margin-top: 80px;
    position: relative;
    z-index: 1;
    padding-inline: 10px;
    @media (width <= 640px) {
      margin-top: 0;
      padding-top: 40px;
    }

    .img-list {
      width: min(100%, var(--container-w));
      margin-inline: auto;
      display: flex;
      gap: 18px;
      @media (width <= 640px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6em 10px;
      }
    }
    figure {
      flex: 1;
      margin: 0;
      img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 0.3em;
      }
    }
    figcaption {
      color: var(--primary-c);
      text-align: center;
      line-height: 1.4;
      @media (width <= 640px) {
        font-size: 0.9em;
      }
    }
  }
}

.greeting {
  padding-block: 40px 10px;
  .main-treat {
    width: min(94%, 1180px);
    height: auto;
    margin-inline: auto;
    display: block;
  }
  .inner {
    position: relative;
    margin: 20px auto 0;
    height: 469px;
    display: grid;
    place-items: start end;

    @media (width <= 640px) {
      --container-w: 100%;
      place-items: start center;
      height: 517px;
      text-align: center;
    }
  }

  picture {
    position: absolute;
    inset: 0 auto auto 50%;
    translate: -59%;
    width: 1160px;
    height: auto;
    pointer-events: none;
    @media (width <= 640px) {
      width: 300px;
      translate: -50%;
      top: auto;
      bottom: 0;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .inner-box {
    padding-top: 2lh;
    @media (width <= 640px) {
      padding-top: 0;
    }
  }
}

.booth-sec {
  background-color: var(--bg-y-c);
  position: relative;
  padding-block: calc(var(--dot-h) - 2lh) 80px;
  --reception-c: #f3a94e;
  --nurse-c: #f78396;
  --doctor-c: #54c6ec;
  --pharmacy-c: #4cd4a9;
  --reception-deep: #e58545;
  --nurse-deep: #ee566f;
  --doctor-deep: #45a8d6;
  --pharmacy-deep: #2cb89e;
  @media (width <= 640px) {
    padding-block: 2.5lh 50px;
  }
  .reception {
    --c: var(--reception-c);
    --deep: var(--reception-deep);
    --src: url(../images/home/reception/icon.svg);
  }
  .nurse {
    --c: var(--nurse-c);
    --deep: var(--nurse-deep);
    --src: url(../images/home/nurse/icon.svg);
  }
  .doctor {
    --c: var(--doctor-c);
    --deep: var(--doctor-deep);
    --src: url(../images/home/doctor/icon.svg);
  }
  .pharmacy {
    --c: var(--pharmacy-c);
    --deep: var(--pharmacy-deep);
    --src: url(../images/home/pharmacy/icon.svg);
  }

  &::before {
    inset: 0 0 auto;
    position: absolute;
    content: "";
    height: var(--dot-h);
    background: url(../images/home/dot-y.svg) left
      bottom/calc(var(--dot-h) * 0.71) var(--dot-h) #fff;
  }

  .container-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2em;
    @media (width <= 640px) {
      gap: 1.4em;
    }
  }
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (width <= 640px) {
      gap: 0.5em;
    }

    > p {
      text-align: center;
    }
  }

  .title-common {
    display: flex;
    gap: 0.5em;
    align-items: end;
    @media (width <= 640px) {
      font-size: 1.45rem;
    }
    span {
      font-size: 2.4em;
      line-height: 1.1;
    }
  }

  .local-nav {
    ul {
      display: flex;
      gap: 1.6em;
      justify-content: center;
      @media (width <= 640px) {
        gap: 0;
      }
      li {
        position: relative;
        height: fit-content;
        isolation: isolate;
        &::before {
          position: absolute;
          inset: 0;
          aspect-ratio: 1;
          content: "";
          scale: 0.9;
          transform-origin: bottom;
          background-color: var(--deep);
          border-radius: 50%;
          z-index: -1;
        }
        &:nth-child(2),
        &:nth-child(3) {
          margin-top: 2em;
          @media (width <= 640px) {
            margin-top: 1.3em;
          }
        }
        @media (width <= 640px) {
          &:nth-child(1) {
            margin-right: -10px;
            z-index: 4;
          }
          &:nth-child(2) {
            margin-right: -3px;
            z-index: 3;
          }
          &:nth-child(3) {
            margin-left: -3px;
            z-index: 2;
          }
          &:nth-child(4) {
            margin-left: -10px;
          }
        }
      }
      a {
        width: 150px;
        display: inline-block;
        font-size: 1.625rem;
        text-align: center;
        color: #fff;
        text-shadow: 0 2px 2px rgb(0 0 0/0.2);
        border-radius: 50%;
        aspect-ratio: 1;
        background: var(--src) center no-repeat var(--c);
        display: grid;
        place-items: center;
        line-height: 1.4;
        transition: translate 0.2s ease-in-out;
        position: relative;
        text-decoration: none;
        @media (width <= 640px) {
          width: 90px;
          gap: -10px;
          background-size: 70% 80%;
          font-size: 1.15rem;
        }
        @media (any-hover: hover) {
          &:hover {
            translate: 0 -8%;
            text-decoration: none;
            opacity: 1;
          }
        }
        &:hover {
          opacity: 1;
        }
        &::before {
          position: absolute;
          content: "";
          inset: auto 0 0.2em;
          margin-inline: auto;
          width: 12px;
          aspect-ratio: 1;
          background: url(../images/home/arrow.svg) center/contain no-repeat;
        }
      }
    }
  }
  .booth-item {
    margin-top: 70px;
    padding: 0 35px 35px;
    background-color: #fff;
    border-radius: 1.3em;
    border: 5px solid var(--c);
    display: grid;
    gap: 1em;
    @media (width <= 640px) {
      border-width: 3px;
      padding: 0 1em 30px;
      margin-top: 54px;
      border-radius: 0.8em;
    }
    h3 {
      background-color: var(--c);
      font-size: 2.25rem;
      color: #fff;
      padding-block: 0.3em;
      width: min(86%, 11.5em);
      border-radius: 2em;
      text-align: center;
      position: relative;
      overflow: hidden;
      text-shadow: 0 2px 2px rgb(0 0 0/0.2);
      margin: -30px auto 0.8rem;
      isolation: isolate;
      @media (width <= 640px) {
        font-size: 1.8rem;
        padding-block: 0.1em;
      }

      &::before {
        position: absolute;
        width: 26%;
        aspect-ratio: 1;
        background: var(--src) center/contain no-repeat;
        content: "";
        inset: 50% auto auto 6%;
        translate: 0 -50%;
        z-index: -1;
      }
    }
    h4 {
      color: var(--c);
      font-size: 1.625rem;
      text-align: center;
      margin-bottom: 0;
      @media (width <= 640px) {
        line-height: 1.4;
        font-size: 1.3rem;
      }
    }
    .lead {
      text-align: center;
    }
    .images {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 2fr;
      gap: 10px;
      margin-top: 2em;
      @media (width <= 640px) {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        grid-column: span 2;
        @media (width <= 640px) {
          border-radius: 6px;
        }

        &:nth-child(3),
        &:nth-child(5) {
          grid-column: span 1;
        }
        @media (width <= 640px) {
          &:nth-child(n + 2) {
            grid-column: span 1;
          }
        }
      }
    }
    &.reception {
      h3::before {
        rotate: -14deg;
        translate: 0 -54%;
      }
    }
    &.nurse {
      h3::before {
        width: 22%;
        left: 8%;
        translate: 0 -35%;
      }
    }
    &.doctor {
      h3::before {
        width: 25%;
        left: 10%;
        translate: 0 -38%;
      }
    }
    &.pharmacy {
      h3::before {
        width: 23%;
        left: 10%;
        translate: 0 -45%;
      }
    }
  }
}

.certificate {
  padding-block: 80px;
  @media (width <= 640px) {
    padding-block: 50px;
  }

  hgroup {
    display: flex;
    flex-direction: column;
    font-size: 1.625rem;
    gap: 0.6em;
    margin-inline: auto;
    width: fit-content;
    padding-bottom: 0.6em;
    @media (width <= 640px) {
      font-size: 1.2rem;
      padding-bottom: 0;
      gap: 0.8em;
    }
    .talk {
      position: relative;
      background-color: var(--primary-c);
      color: #fff;
      padding-inline: 1em;
      border-radius: 2em;
      width: fit-content;
      @media (width <= 640px) {
        align-self: center;
      }
      &::before {
        --sz: 21px;
        content: "";
        position: absolute;
        inset: auto 0 calc(var(--sz) * -0.85);
        margin-inline: auto;
        width: var(--sz);
        aspect-ratio: 1;
        background: url(../images/home/tail.svg) center top/contain no-repeat;
        @media (width <= 640px) {
          --sz: 0.9em;
        }
      }
    }
    h2 {
      font-size: 1.4em;

      padding-inline: 0.5em;
      color: var(--primary-c);
      line-height: 1.4;
      text-align: center;
    }
  }

  .lead {
    text-align: center;
  }
  .images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em 14px;
    margin-top: 100px;
    @media (width <= 640px) {
      grid-template-columns: 1fr;
      width: 84%;
      margin-inline: auto;
      margin-top: 50px;
    }
    .box {
      position: relative;
      &::before {
        width: 55%;
        height: 36px;
        inset: -20% auto auto -20%;
        rotate: -20deg;
        background: url(../images/home/clap.svg) center/contain no-repeat;
        content: "";
        position: absolute;
        @media (width <= 640px) {
          width: 44%;
          inset: -12% auto auto -6%;
        }
      }
      img {
        border-radius: 10px;
        width: 100%;
        height: auto;
      }
      &:nth-child(2) {
        &::before {
          inset: -10% 28% auto auto;
          rotate: -5deg;
          @media (width <= 640px) {
            inset: -7% auto auto -5%;
          }
        }
      }
      &:nth-child(3) {
        &::before {
          inset: -16% -13% auto auto;
          rotate: 6deg;
          @media (width <= 640px) {
            inset: -12% -7% auto auto;
          }
        }
      }
    }
  }
}

.memory {
  .container-inner {
    text-align: center;
    display: grid;
    gap: 0.6em;
    margin-bottom: 50px;
  }
  .title-common {
    display: flex;
    align-items: baseline;
    justify-content: center;
    @media (width <= 640px) {
      flex-direction: column;
      align-items: center;
    }
    span {
      font-size: 1.3em;
    }
  }
  > img {
    width: 100%;
    height: auto;
  }
}

.present {
  padding-block: 80px;
  @media (width <= 640px) {
    padding-block: 50px;
  }
  h2 {
    text-align: center;
    padding-bottom: 0.4em;
  }
  .lead {
    text-align: center;
  }
  .images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em 14px;
    margin-top: 60px;
    @media (width <= 640px) {
      grid-template-columns: 1fr;
      width: 84%;
      margin-inline: auto;
      margin-top: 50px;
    }
    img {
      border-radius: 10px;
      width: 100%;
      height: auto;
    }
  }
}

.thoughts {
  background: linear-gradient(
    to bottom,
    transparent var(--wave-sz),
    var(--bg-c) var(--wave-sz)
  );
  padding-block: var(--wave-sz) 10px;
  position: relative;

  &::before {
    inset: 0 0 auto;
    position: absolute;
    content: "";
    height: var(--wave-sz);
    background: url(../images/home/wave-b.svg) left
      bottom/calc(var(--wave-sz) * 5.5) var(--wave-sz);
  }

  h2 {
    text-align: center;
  }
  .container-inner {
    padding-top: 80px;
    @media (width <= 640px) {
      padding-top: 50px;
    }
  }

  .body {
    width: min(100%, 860px);

    margin-top: 80px;
    display: grid;
    gap: 40px;
    @media (width <= 640px) {
      margin-top: 50px;
      gap: 30px;
    }

    .child {
      position: relative;
      width: 94%;
      &::before {
        position: absolute;
        inset: -10% auto 0 0;
        translate: 0 -15%;
        content: "";
        aspect-ratio: 1;
        background: url(../images/home/medal.svg) center/contain no-repeat;
        z-index: 1;
        @media (width <= 640px) {
          bottom: auto;
          width: 13%;
        }
      }

      > p {
        border-radius: 1.6em;
        padding: 1.2em 2em 1.2em 4em;
        background-color: #fff;
        line-height: 1.4;
        filter: drop-shadow(4px 4px 0 var(--light-c));
        @media (width <= 640px) {
          border-radius: 1em;
          padding-inline: 3em 1em;
          filter: drop-shadow(2px 2px 0 var(--light-c));
        }
        &::before {
          --sz: 43px;
          content: "";
          position: absolute;
          inset: auto auto calc(var(--sz) * -0.85) 16%;
          margin-inline: auto;
          width: var(--sz);
          aspect-ratio: 1;
          background: url(../images/home/tail-w.svg) center top/contain
            no-repeat;
          @media (width <= 640px) {
            --sz: 1.8em;
          }
        }
      }
    }

    .parent {
      position: relative;
      width: 94%;
      justify-self: end;
      border-radius: 1.6em;
      padding: 1.2em 2em;
      background-color: var(--light-c);
      color: #fff;
      line-height: 1.8;
      @media (width <= 640px) {
        border-radius: 1em;
        padding: 1em 1.4em;
      }

      &::before {
        --sz: 43px;
        content: "";
        position: absolute;
        inset: auto 16% calc(var(--sz) * -0.85) auto;
        margin-inline: auto;
        width: var(--sz);
        aspect-ratio: 1;
        background: url(../images/home/tail-light.svg) center top/contain
          no-repeat;
        @media (width <= 640px) {
          --sz: 1.8em;
        }
      }
      h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1em;
        align-items: start;
        font-weight: 600;
        border-bottom: 2px dashed rgb(255 255 255/0.3);
        padding-bottom: 0.7em;
        &::before {
          font-weight: 500;
          background-color: var(--primary-c);
          padding-inline: 1em;
          border-radius: 2em;
          content: "保護者";
          @media (width <= 640px) {
            font-size: 0.9em;
          }
        }
      }
    }
  }

  .next {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    margin-block: 80px 50px;
    @media (width <= 640px) {
      margin-block: 40px;
      position: relative;
      gap: 1.8em;
      width: fit-content;
      margin-inline: auto;
      .flower {
        position: absolute;
        width: 50px;
        inset: auto auto -8% 22%;
      }
    }

    .doctor {
      border-radius: 50%;
      @media (width <= 640px) {
        width: 100px;
        height: auto;
      }
    }
    > p {
      color: var(--primary-c);
      font-size: 1.625rem;
      line-height: 1.4;
      text-align: center;
      @media (width <= 640px) {
        font-size: 1rem;
        text-align: start;
      }
    }
  }

  .banner {
    display: block;
    picture {
      width: 100%;
      height: auto;
    }
  }

  .images {
    margin-top: 50px;
    position: relative;
    z-index: 1;
    padding-inline: 10px;
    @media (width <= 640px) {
      margin-top: 0;
      padding-top: 40px;
    }

    .img-list {
      width: min(100%, var(--container-w));
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      @media (width <= 640px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }
      img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        @media (width <= 640px) {
          border-radius: 6px;
        }
      }
    }
  }
}

@media (width > 640px) {
  body.kidsworkfes .container {
  }

  body.kidsworkfes .section-ls {
    margin-bottom: 100px;
  }

  body.kidsworkfes .section {
    margin-bottom: 75px;
  }

  /* COMMON */

  .c_images-box {
    display: flex;
    gap: 4px;
  }

  .c_images-box:not(.with_cap) .image {
    line-height: 0;
    margin: 0;
  }

  .c_images-box.with_cap .one-block {
    text-align: center;
  }

  .c_images-box.with_cap .image {
    margin-bottom: 5px;
  }

  .c_images-box.with_cap .img-cap {
    display: block;
    line-height: 1.4;
  }

  .vers-text {
    text-align: center;
    margin-bottom: 25px;
  }
}

@media (width <= 640px) {
  .container-inner {
    padding-inline: 1em;
  }

  body.kidsworkfes {
    font-size: 93.75%;
    /* 15px */
  }

  body.kidsworkfes #content img {
    width: 100%;
  }

  body.kidsworkfes .container {
  }

  #content #content-wrapper {
    padding-top: 0;
  }

  body.kidsworkfes #content .container-inner {
    padding: 0px 20px;
    width: auto;
  }

  body.kidsworkfes #sp-menu .tel {
    display: none;
  }

  /* body.kidsworkfes .section{
margin-bottom: 80px;
} */

  /* SP-NAV */
  body.kidsworkfes #sp-nav .nav02 li a,
  body.kidsworkfes #sp-nav .nav02 li span.parent {
    font-size: 12px;
  }

  body.kidsworkfes #sp-nav .nav02 {
    background-color: #00957a;
  }

  body.kidsworkfes #sp-nav .nav02 > li .titles {
    display: block;
    padding: 15px 10px;
  }

  body.kidsworkfes .inlink {
    padding-top: 30px;
    margin-top: -30px;
  }

  /* COMMON */

  /* TITLE */
  .title-block {
    font-size: 167.5%;
    /* 26px */
    letter-spacing: 0.01em;
  }

  .title-block.docorated span::after {
    width: 160px;
  }

  .title-block.icon {
    padding: 42px 0;
    margin-bottom: 15px;
    text-align: center;
    height: 130px;
    box-sizing: border-box;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title-block.icon span::before {
    position: absolute;
    content: "";
    background-image: url(../images/common/title-icon.svg);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    width: 130px;
    height: 130px;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .thumbnail-box {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
  }

  .thumbnail-box p {
    text-align: center;
  }

  .thumbnail-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .thumbnail-box.type03 p span {
    margin-top: 13px;
    display: block;
  }

  .thumbnail-box.type03 p,
  .thumbnail-box.type04 p {
    width: auto;
  }
}