.block_usecase {
  --circleSize:120px;
  --blockMargin:60px; }
  .block_usecase:not(:last-child) {
    position: relative;
    margin-bottom: var(--blockMargin); }
    .block_usecase:not(:last-child)::after {
      width: calc( 100% + var(--cont_margin) * 2 );
      height: 1px;
      background: var(--baseBorderColor);
      content: "";
      position: absolute;
      top: calc( 100% + var(--blockMargin) / 2 );
      left: calc( -1 * var(--cont_margin) ); }
  .block_usecase .head {
    display: flex;
    grid-gap: var(--space1) var(--space3);
    align-items: center; }
    .block_usecase .head .target_wrap {
      width: var(--circleSize);
      height: var(--circleSize);
      position: relative; }
      .block_usecase .head .target_wrap::before {
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background: var(--colorLightGray);
        border-radius: 50%; }
      .block_usecase .head .target_wrap .name,
      .block_usecase .head .target_wrap .target {
        position: absolute; }
      .block_usecase .head .target_wrap .name {
        text-align: center;
        width: 120%;
        bottom: var(--space2);
        left: -10%; }
      .block_usecase .head .target_wrap .target {
        left: 0;
        right: 0;
        bottom: calc( var(--space2) + var(--space1) + 1rem );
        margin: auto; }
        .block_usecase .head .target_wrap .target .icon {
          width: 100%;
          height: 100%; }
    .block_usecase .head .kakeru {
      width: 28px;
      height: 28px; }
      .block_usecase .head .kakeru .icon {
        width: 100%;
        height: 100%;
        background-image: url("../images/usecase/kakeru.png"); }
    .block_usecase .head .logo {
      width: 158px;
      aspect-ratio: 302/119; }
      .block_usecase .head .logo .icon {
        width: 100%;
        height: 100%;
        background-image: url("../images/usecase/logo_epi.png"); }
  .block_usecase .boxes {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space3); }
    .block_usecase .boxes .box {
      display: flex;
      flex-direction: column;
      grid-gap: var(--space1);
      line-height: 1.8; }
      .block_usecase .boxes .box .label {
        width: fit-content;
        height: 34px;
        border-radius: 18px;
        padding: 0 var(--space2);
        background: var(--colorLightGray);
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box; }
      .block_usecase .boxes .box .cont {
        text-align: justify;
        text-justify: inter-ideograph; }
  .block_usecase#case1 .head .target_wrap .target {
    width: 33px;
    aspect-ratio: 100/262; }
    .block_usecase#case1 .head .target_wrap .target .icon {
      background-image: url("../images/usecase/img_target_1.png"); }
  .block_usecase#case2 .head .target_wrap .target {
    width: 64px;
    aspect-ratio: 186/254; }
    .block_usecase#case2 .head .target_wrap .target .icon {
      background-image: url("../images/usecase/img_target_2.png"); }
  .block_usecase#case3 .head .target_wrap .target {
    width: 94px;
    aspect-ratio: 274/181; }
    .block_usecase#case3 .head .target_wrap .target .icon {
      background-image: url("../images/usecase/img_target_3.png"); }
  @media (min-width: 521px) {
    .block_usecase {
      --blockMargin:120px; }
      .block_usecase:not(:last-child)::after {
        width: 100%;
        left: 0; } }
  @media (min-width: 768px) {
    .block_usecase {
      --circleSize:172px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      grid-gap: var(--space4); }
      .block_usecase .boxes .box .label {
        width: 134px; }
      .block_usecase#case1 .head .target_wrap .target {
        width: 50px; }
      .block_usecase#case2 .head .target_wrap .target {
        width: 93px; }
      .block_usecase#case3 .head .target_wrap .target {
        width: 137px;
        margin-bottom: var(--space1); }
      .block_usecase .head {
        width: var(--circleSize);
        flex-direction: column; }
      .block_usecase .body {
        width: calc( 100% - ( var(--circleSize) + var(--space4) ) ); } }
  @media (min-width: 1280px) {
    .block_usecase {
      grid-gap: var(--space5); }
      .block_usecase .body {
        width: calc( 100% - ( var(--circleSize) + var(--space5) ) ); } }

@media (max-width: 520px) {
  .section_page {
    padding-top: var(--space3) !important; }
    .section_page hr {
      margin: var(--space3) 0;
      width: calc( 100% + var(--cont_margin) * 2 );
      position: relative;
      left: calc( -1 * var(--cont_margin) ); } }