.title > p {
  inset-inline-start: clamp(
    8px * var(--fluid-min-ratio),
    8 * var(--fluid),
    8px
  );
}
.title h2 {
  font-size: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
}

.fv-wrapper {
  position: relative;
  aspect-ratio: 1440 / 550;
  background-image: url(../image/about/fv-about.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fv-wrapper h1 {
  position: absolute;
  inset-block-end: clamp(
    128px * var(--fluid-min-ratio),
    128 * var(--fluid),
    128px * var(--fluid-max-ratio)
  );
  inset-inline-end: 6.25vw;
  aspect-ratio: 532 / 76;
  max-inline-size: clamp(
    532px * var(--fluid-min-ratio),
    532 * var(--fluid),
    532px * var(--fluid-max-ratio)
  );
  inline-size: 100%;
  margin: 0;
  background-image: url(../image/about/ttl-about.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.breadcrumb {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-block-start: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
  margin-inline: auto;
}

.content-guide {
  display: flex;
  align-items: center;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  inline-size: fit-content;
  margin-block-start: clamp(
    64px * var(--fluid-min-ratio),
    64 * var(--fluid),
    64px
  );
  margin-inline: auto;
  padding-block: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  padding-inline: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px);
  border-radius: 100vmax;
  box-shadow: 0 0 24px 0 rgba(151, 151, 151, 0.1);
  background-color: var(--color-primaryWhite);
}

.content-guide a {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.content-guide a img {
  inline-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
}

/* ============== environment ============== */
#environment {
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    80 * var(--fluid),
    80px
  );
}
#environment .sec-inner {
  display: flex;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-inline: auto;
}

#environment .title-content {
  flex-direction: column;
  align-items: flex-start;
}

#environment .title-content .text-summary {
  line-height: 1.8;
}

#environment .slide-area {
  display: block;
}

#environment .slide-area .env-main-slider {
  max-inline-size: clamp(
    584px * var(--fluid-min-ratio),
    584 * var(--fluid),
    584px
  );
}

#environment .slide-area .env-main-slider .slide-item {
  aspect-ratio: 584 / 389;
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  overflow: hidden;
}

#environment .slide-area .env-thumb-slider {
  display: flex;
  gap: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  max-inline-size: clamp(
    544px * var(--fluid-min-ratio),
    544 * var(--fluid),
    544px
  );
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px
  );
}

#environment .slide-area .env-thumb-slider .slide-item {
  aspect-ratio: 1 / 1;
  inline-size: clamp(96px * var(--fluid-min-ratio), 96 * var(--fluid), 96px);
  border-radius: clamp(12px * var(--fluid-min-ratio), 12 * var(--fluid), 12px);
  overflow: hidden;
  cursor: pointer;
}
#environment .slide-area .env-thumb-slider .slide-item:focus-visible {
  outline: 3px solid var(--color-primaryOrange);
  outline-offset: 3px;
}

#environment .slide-area .slide-item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ============== growth ============== */
#growth {
  position: relative;
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    80 * var(--fluid),
    80px
  );
  padding-block: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px)
    clamp(280px * var(--fluid-min-ratio), 280 * var(--fluid), 280px);
  background-color: var(--color-primaryWhite);
}

#growth .sec-inner {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-inline: auto;
}

.growth-container {
  display: flex;
  align-items: center;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  margin-block-start: clamp(
    40px * var(--fluid-min-ratio),
    40 * var(--fluid),
    40px
  );
  margin-inline-start: clamp(
    56px * var(--fluid-min-ratio),
    56 * var(--fluid),
    56px
  );
}

.growth-container .img-area {
  aspect-ratio: 400 / 372;
  max-inline-size: clamp(
    400px * var(--fluid-min-ratio),
    400 * var(--fluid),
    400px
  );
  inline-size: 100%;
}

.growth-container .text-area {
  inline-size: 100%;
}

.growth-container .text-area .list-item {
  padding-block: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  border-bottom: 1px solid var(--color-borderGray);
}

.growth-container .text-area .list-item dt {
  margin-block-end: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px
  );
  color: var(--color-primaryOrange);
  font-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
}
.growth-container .text-area .list-item dd {
  font-weight: 500;
  line-height: 1.8;
}

#growth .slide-area {
  position: absolute;
  inset-block-end: calc(-160 * var(--fluid));
  inset-inline-start: 50%;
  translate: -50%;
  aspect-ratio: 1440 / 320;
  inline-size: 100%;
}

#growth .slide-area .slide-inner {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 100%;
}

#growth .slide-area .slide-inner .slick-track {
  display: flex;
}

#growth .slide-area .slide-inner .slick-slide {
  margin-inline-end: clamp(
    32px * var(--fluid-min-ratio),
    32 * var(--fluid),
    32px
  );
}

#growth .slide-area .slide-inner .slide-item {
  inline-size: 100%;
}

#growth .slide-area .slide-inner .slide-item img {
  inline-size: 100%;
}

#growth .slide-area .slide-inner .slick-list {
  margin-inline-end: clamp(
    -32px * var(--fluid-min-ratio),
    -32 * var(--fluid),
    -32px
  );
}

/* ============== benefits ============== */
#benefits {
  margin-block-start: clamp(
    280px * var(--fluid-min-ratio),
    280 * var(--fluid),
    280px * var(--fluid-max-ratio)
  );
}

#benefits .sec-inner {
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-inline: auto;
}

.benefits-container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  margin-block-start: clamp(
    40px * var(--fluid-min-ratio),
    40 * var(--fluid),
    40px
  );
  margin-inline-start: clamp(
    56px * var(--fluid-min-ratio),
    56 * var(--fluid),
    56px
  );
}

.benefits-container .list-item {
  display: flex;
  align-items: center;
  gap: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  inline-size: calc(
    100% / 3 - clamp(22px * var(--fluid-min-ratio), 22 * var(--fluid), 22px)
  );
  padding-block: clamp(35px * var(--fluid-min-ratio), 35 * var(--fluid), 35px);
  padding-inline: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px)
    clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  background-color: var(--color-primaryWhite);
}

.benefits-container .list-item .img-area {
  aspect-ratio: 1 / 1;
  max-inline-size: clamp(
    80px * var(--fluid-min-ratio),
    80 * var(--fluid),
    80px
  );
  inline-size: 100%;
}

.benefits-container .list-item p {
  font-size: clamp(14px * var(--fluid-min-ratio), 14 * var(--fluid), 14px);
  line-height: 1.5;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.benefits-container .list-item p strong {
  display: block;
  margin-block-end: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
  color: var(--color-primaryOrange);
  font-size: clamp(18px * var(--fluid-min-ratio), 18 * var(--fluid), 18px);
}

/* ============== interviews ============== */
#interviews {
  position: relative;
  aspect-ratio: 1440 / 623;
  background-image: url(../image/about/bg-interview.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#interviews::before {
  position: absolute;
  content: "";
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: clamp(
    334px * var(--fluid-min-ratio),
    334 * var(--fluid),
    334px * var(--fluid-max-ratio)
  );
  block-size: clamp(
    380px * var(--fluid-min-ratio),
    380 * var(--fluid),
    380px * var(--fluid-max-ratio)
  );
  background-image: url(../image/about/img-interviews_people.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#interviews h2 {
  aspect-ratio: 228 / 111;
  max-inline-size: clamp(
    228px * var(--fluid-min-ratio),
    228 * var(--fluid),
    228px * var(--fluid-max-ratio)
  );
  inline-size: 100%;
  margin-block-start: clamp(
    116px * var(--fluid-min-ratio),
    116 * var(--fluid),
    116px * var(--fluid-max-ratio)
  );
  margin-inline: auto;
  background-image: url(../image/about/ttl-interviews.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.bubble-container .bubble-item {
  position: absolute;
  inset-block-start: calc(114 * var(--fluid));
  inset-inline-start: calc(133 * var(--fluid));
  aspect-ratio: 327 / 174;
  max-inline-size: calc(327 * var(--fluid));
  inline-size: 100%;
  background-image: url(../image/about/img-bubble01.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bubble-container .bubble-item.item02 {
  inset-block-start: auto;
  inset-inline-start: calc(64 * var(--fluid));
  inset-block-end: calc(113 * var(--fluid));
  aspect-ratio: 465 / 174;
  max-inline-size: calc(465 * var(--fluid));
  background-image: url(../image/about/img-bubble02.webp);
}
.bubble-container .bubble-item.item03 {
  inset-inline-start: auto;
  inset-inline-end: calc(64 * var(--fluid));
  inset-block-start: clamp(
    48px * var(--fluid-min-ratio),
    48 * var(--fluid),
    48px
  );
  aspect-ratio: 419 / 179;
  max-inline-size: calc(419 * var(--fluid));
  background-image: url(../image/about/img-bubble03.webp);
}
.bubble-container .bubble-item.item04 {
  inset-inline-start: auto;
  inset-block-start: auto;
  inset-inline-end: calc(158 * var(--fluid));
  inset-block-end: calc(230 * var(--fluid));
  aspect-ratio: 279 / 150;
  max-inline-size: calc(279 * var(--fluid));
  background-image: url(../image/about/img-bubble04.webp);
}
.bubble-container .bubble-item.item05 {
  inset-inline-start: auto;
  inset-block-start: auto;
  inset-inline-end: calc(64 * var(--fluid));
  inset-block-end: calc(48 * var(--fluid));
  aspect-ratio: 467 / 166;
  max-inline-size: calc(467 * var(--fluid));
  background-image: url(../image/about/img-bubble05.webp);
}

@container (max-width: 600px) {
  .fv-wrapper {
    aspect-ratio: 393 / 515;
    background-image: url(../image/about/fv-about_sp.webp);
  }
  .fv-wrapper h1 {
    inset-block-end: 0;
    inset-block-start: clamp(
      146px,
      calc(146 * var(--fluid-sp)),
      calc(146px * var(--fluid-max-ratio))
    );
    inset-inline-end: 0;
    inset-inline-start: clamp(
      46px,
      calc(46 * var(--fluid-sp)),
      calc(46px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      287px,
      calc(287 * var(--fluid-sp)),
      calc(287px * var(--fluid-max-ratio))
    );
  }

  .breadcrumb {
    inline-size: auto;
    max-inline-size: none;
    margin: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .content-guide {
    flex-wrap: wrap;
    gap: clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      )
      clamp(
        28px,
        calc(28 * var(--fluid-sp)),
        calc(28px * var(--fluid-max-ratio))
      );
    margin-block-start: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
    padding: clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      )
      clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      );
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .content-guide a {
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  .content-guide a img {
    inline-size: clamp(
      20px,
      20 * var(--fluid-sp),
      20px * var(--fluid-max-ratio)
    );
  }

  .title > p {
    inset: 0;
  }

  #environment {
    margin-block-start: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      calc(48px * var(--fluid-max-ratio))
    );
  }
  #environment .sec-inner {
    flex-direction: column;
    gap: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
    max-inline-size: none;
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  #environment .slide-area .env-main-slider {
    max-inline-size: none;
    inline-size: 100%;
  }
  #environment .slide-area .env-thumb-slider {
    margin-block-start: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      calc(12px * var(--fluid-max-ratio))
    );
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    max-inline-size: none;
  }

  #environment .slide-area .env-thumb-slider .slide-item {
    inline-size: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      calc(64px * var(--fluid-max-ratio))
    );
    border-radius: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
  }

  #growth {
    margin-block-start: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      calc(64px * var(--fluid-max-ratio))
    );
    padding-block: clamp(
        40px,
        calc(40 * var(--fluid-sp)),
        calc(40px * var(--fluid-max-ratio))
      )
      clamp(
        164px,
        calc(164 * var(--fluid-sp)),
        calc(164px * var(--fluid-max-ratio))
      );
  }
  #growth .sec-inner {
    max-inline-size: none;
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .growth-container {
    flex-direction: column;
    margin-block-start: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
    margin-inline-start: 0;
  }
  .growth-container .img-area {
    aspect-ratio: 360 / 240;
    max-inline-size: fit-content;
    inline-size: 100%;
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    overflow: hidden;
  }
  .growth-container .img-area img {
    object-fit: cover;
    inline-size: 100%;
    block-size: 100%;
  }
  .growth-container .text-area .list-item {
    padding-block: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .growth-container .text-area .list-item dt {
    margin-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      calc(18px * var(--fluid-max-ratio))
    );
  }
  #growth .slide-area {
    aspect-ratio: 393 / 200;
    inset-block-end: calc(-100 * var(--fluid-sp));
  }
  #growth .slide-area .slide-inner .slick-slide {
    margin-inline-end: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      calc(20px * var(--fluid-max-ratio))
    );
  }
  #growth .slide-area .slide-inner .slick-list {
    margin-inline-end: clamp(
      -20px,
      calc(-20 * var(--fluid-sp)),
      calc(-20px * var(--fluid-max-ratio))
    );
  }
  #growth .slide-area img {
    max-inline-size: 76.335vw;
  }

  #benefits {
    margin-block-start: clamp(
      164px,
      calc(164 * var(--fluid-sp)),
      calc(164px * var(--fluid-max-ratio))
    );
  }
  #benefits .sec-inner {
    max-inline-size: none;
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .benefits-container {
    flex-direction: column;
    gap: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      calc(12px * var(--fluid-max-ratio))
    );
    margin-block-start: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
    margin-inline-start: 0;
  }
  .benefits-container .list-item {
    gap: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
    inline-size: 100%;
    padding: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .benefits-container .list-item .img-area {
    max-inline-size: clamp(
      80px,
      calc(80 * var(--fluid-sp)),
      calc(80px * var(--fluid-max-ratio))
    );
  }
  .benefits-container .list-item p {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  .benefits-container .list-item p strong {
    margin-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      calc(18px * var(--fluid-max-ratio))
    );
  }

  #interviews {
    aspect-ratio: 393 / 1253;
    margin-block-start: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      calc(64px * var(--fluid-max-ratio))
    );
    background-image: url(../image/about/bg-interview_sp.webp);
  }
  #interviews::before {
    inset-block-end: 0;
    inset-block-start: clamp(
      174px,
      calc(174 * var(--fluid-sp)),
      calc(174px * var(--fluid-max-ratio))
    );
    inline-size: clamp(
      246px,
      calc(246 * var(--fluid-sp)),
      calc(246px * var(--fluid-max-ratio))
    );
    block-size: clamp(
      280px,
      calc(280 * var(--fluid-sp)),
      calc(280px * var(--fluid-max-ratio))
    );
  }
  #interviews h2 {
    max-inline-size: clamp(
      196px,
      calc(196 * var(--fluid-sp)),
      calc(196px * var(--fluid-max-ratio))
    );
    margin-block-start: clamp(
      54px,
      calc(54 * var(--fluid-sp)),
      calc(54px * var(--fluid-max-ratio))
    );
  }
  .bubble-container .bubble-item {
    aspect-ratio: 279 / 143;
    inset-block-start: clamp(
      600px,
      calc(600 * var(--fluid-sp)),
      calc(600px * var(--fluid-max-ratio))
    );
    inset-inline-start: clamp(
      17px,
      calc(17 * var(--fluid-sp)),
      calc(17px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      280px,
      calc(280 * var(--fluid-sp)),
      calc(280px * var(--fluid-max-ratio))
    );
    background-image: url(../image/about/img-bubble01_sp.webp);
  }
  .bubble-container .bubble-item.item02 {
    aspect-ratio: 293 / 164;
    inset-block-start: auto;
    inset-block-end: clamp(
      168px,
      calc(168 * var(--fluid-sp)),
      calc(168px * var(--fluid-max-ratio))
    );
    inset-inline-start: clamp(
      17px,
      calc(17 * var(--fluid-sp)),
      calc(17px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      293px,
      calc(293 * var(--fluid-sp)),
      calc(293px * var(--fluid-max-ratio))
    );
    background-image: url(../image/about/img-bubble02_sp.webp);
  }
  .bubble-container .bubble-item.item03 {
    inset-inline-end: clamp(
      15px,
      calc(15 * var(--fluid-sp)),
      calc(15px * var(--fluid-max-ratio))
    );
    inset-block-start: clamp(
      447px,
      calc(447 * var(--fluid-sp)),
      calc(447px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      340px,
      calc(340 * var(--fluid-sp)),
      calc(340px * var(--fluid-max-ratio))
    );
  }
  .bubble-container .bubble-item.item04 {
    inset-inline-end: clamp(
      15px,
      calc(15 * var(--fluid-sp)),
      calc(15px * var(--fluid-max-ratio))
    );
    inset-block-end: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      215px,
      calc(215 * var(--fluid-sp)),
      calc(215px * var(--fluid-max-ratio))
    );
  }
  .bubble-container .bubble-item.item05 {
    aspect-ratio: 325 / 161;
    inset-inline-end: clamp(
      15px,
      calc(15 * var(--fluid-sp)),
      calc(15px * var(--fluid-max-ratio))
    );
    inset-block-start: auto;
    inset-block-end: clamp(
      340px,
      calc(340 * var(--fluid-sp)),
      calc(340px * var(--fluid-max-ratio))
    );
    max-inline-size: clamp(
      325px,
      calc(325 * var(--fluid-sp)),
      calc(325px * var(--fluid-max-ratio))
    );
    background-image: url(../image/about/img-bubble05_sp.webp);
  }
}

@media screen and (max-width: 370px) {
  .content-guide {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    max-inline-size: clamp(
      250px,
      calc(250 * var(--fluid-sp)),
      calc(250px * var(--fluid-max-ratio))
    );
    inline-size: 100%;
    margin-inline: auto;
  }
}