/* ==========================================================================
   mailing-agency.css
   請求書・帳票の郵送代行サービス｜取引先に郵送する請求書のタイプは2種類
   ========================================================================== */

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.types {
  max-width: 778px;
  margin-inline: auto;
  gap: 24px;
}

.type {
  width: 100%;
}

.type__tit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--value-typography-fontsize16);
  font-weight: 700;
  line-height: 1.5;
}

.type__tit .num {
  color: var(--color-text-accent-primary, #238b3b);
}

.type__tit .tx {
  color: var(--color-text-body, #2a2a2a);
}

.type__img {
  position: relative;
  width: 100%;
  aspect-ratio: 465 / 332;
}

.type__img > a:not(.ico-view) {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* a > img では picture を飛ばせないため picture img に分離 */
.type__img picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ico-view {
  position: absolute;
  right: 2.12%; /* 8px / 377px (column width at max-width: 778px) */
  bottom: 2.97%; /* 8px / 269px (image height at column width 377px) */
  width: 10.50%; /* 36px / 343px (SP column width) */
  aspect-ratio: 1;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
}

.ico-view img {
  display: block;
  width: 100%;
  height: 100%;
}

.info-balloon {
  display: none;
}

@media (width >= 768px) {
  .type {
    flex: 1 0 0;
    min-width: 0;
  }

  .type__tit {
    font-size: var(--value-typography-fontsize18);
  }

  .ico-view {
    width: 9.55%; /* 36px / 377px (column width at max-width: 778px) */
  }

  .info-balloon {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: var(--color-background-accent-primary, #479e5b);
    border-radius: 4px;
    padding: 8px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
    color: var(--color-text-onfill, #fff);
    text-align: center;
    white-space: nowrap;
  }

  .info-balloon--01::before,
  .info-balloon--01::after,
  .info-balloon--02::after {
    content: '';
    position: absolute;
    bottom: -15.5px;
    width: 0;
    height: 0;
    border-top: 16.5px solid var(--color-background-accent-primary, #479e5b);
  }

  .info-balloon--01::before,
  .info-balloon--02::after {
    left: 8px;
    border-right: 11.258px solid transparent;
  }

  .info-balloon--01::after {
    right: 7.74px;
    border-left: 11.258px solid transparent;
  }

  .info-balloon__tx {
    margin: 0;
    font-size: var(--value-typography-fontsize12);
    line-height: 1.5;
  }

  .info-balloon--01 {
    left: 46.42%; /* 175px / 377px (column width at max-width: 778px) */
    top: 47.93%; /* 129px / 269px (image height at column width 377px) */
  }

  .info-balloon--02 {
    left: 31.83%; /* 120px / 377px (column width at max-width: 778px) */
    top: 54.62%; /* 147px / 269px (image height at column width 377px) */
  }
}