@charset "utf-8";

.p-casestudydtl__profile {
  --block-w: 1020;
  --block-title-w: 1;
  --block-img-w: 1;
  --block-img-mt: 1;
  --block-img-ml: 1;
  --block-fukidashi-w: 152;
  --block-fukidashi-mt: 72;
  --block-fukidashi-mr: -12;
  position: relative;
  z-index: 1;
  margin-top: calc(76em/16);
  .p-casea & {
    --block-w: 910;
    --block-title-w: 109;
    --block-img-w: 174;
    --block-img-mt: 43;
    --block-img-ml: 55;
  }
  .p-caseb & {
    --block-w: 910;
    --block-title-w: 104;
    --block-img-w: 225;
    --block-img-mt: 48;
    --block-img-ml: 16;
  }
  .p-casec & {
    --block-title-w: 104;
    --block-img-w: 166;
    --block-img-mt: 18;
    --block-img-ml: 64;
    --block-fukidashi-w: 158;
    --block-fukidashi-mt: 75;
  }
  .p-cased & {
    --block-title-w: 103;
    --block-img-w: 171;
    --block-img-mt: 32;
    --block-img-ml: 64;
  }
  .p-casee & {
    --block-title-w: 103;
    --block-img-w: 169;
    --block-img-mt: 20;
    --block-img-ml: 68;
  }
  .p-casef & {
    --block-title-w: 103;
    --block-img-w: 191;
    --block-img-mt: 48;
    --block-img-ml: 48;
  }
  @media screen and (max-width: 880px) {
    --block-fukidashi-w: 147;
    --block-fukidashi-mt: 25;
    --block-fukidashi-mr: 30;
    margin-top: calc(80em/16);

    .p-casea & {
      --block-img-w: 102;
      --block-img-mt: 19;
      --block-img-ml: 52;
    }
    .p-caseb & {
      --block-img-w: 127;
      --block-img-mt: 26;
      --block-img-ml: 32;
    }
    .p-casec & {
      --block-img-w: 94;
      --block-img-mt: 10;
      --block-img-ml: 48;
      --block-fukidashi-w: 142;
      --block-fukidashi-mt: 25;
      --block-fukidashi-mr: 40;
    }
    .p-cased & {
      --block-img-w: 101;
      --block-img-mt: 8;
      --block-img-ml: 60;
    }
    .p-casee & {
      --block-img-w: 94;
      --block-img-mt: 10;
      --block-img-ml: 68;
    }
    .p-casef & {
      --block-img-w: 102;
      --block-img-mt: 31;
      --block-img-ml: 58;
    }
  }
}
.p-casestudydtl__profileBlock {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: calc(64/862*100%);
  margin-inline: auto;
  padding: calc(20em/16);
  width: min(calc(var(--block-w)*1em/16), 100%);
  background-color: #fff;
  border: calc(4em/16) solid;
  border-radius: calc(50em/16);
  overflow: hidden;
  @media screen and (max-width: 1024px) {
    gap: calc(64/862*80%);
  }
  @media screen and (max-width: 880px) {
    flex-direction: column-reverse;
    gap: calc(25em/16);
    padding: calc(8em/16) calc(8em/16) calc(30em/16);
    border: calc(2em/16) solid;
    border-radius: calc(25em/16);
  }
}
.p-casestudydtl__profileBlockBody {
  flex: 1;
  @media screen and (max-width: 880px) {
    padding: 0 calc(4em/16) 0 calc(20em/16);
  }
  & .title {
    display: flex;
    flex-direction: column-reverse;
    gap: min(calc(28em/16), calc(28/1150*90vw));
    @media screen and (max-width: 880px) {
      gap: calc(22em/16);
    }
  }
  & .title__main {
    display: flex;
    flex-direction: column;
    gap: calc(7em/16);
  }
  & .title__mainPosition {
    font-size: calc(18em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(14em/16);
    }
  }
  & .title__mainName {
    width: calc(var(--block-title-w)*1em/16);
    @media screen and (max-width: 880px) {
      width: calc(var(--block-title-w)*.65em/16);
    }
  }
  & .title__sub {
    padding: calc(8em/20) calc(16em/20);
    width: fit-content;
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--main-color);
    border-radius: calc(5em/20);
    @media screen and (max-width: 880px) {
      padding: calc(7em/15) calc(10em/15);
      font-size: calc(15em/16);
    }
  }
  & .list {
    display: flex;
    flex-direction: column;
    gap: calc(4em/16);
    margin-top: min(calc(34em/16), calc(34/1150*90vw));
    @media screen and (max-width: 880px) {
      margin-top: calc(25em/16);
    }
  }
  & .list__item {
    display: flex;
    gap: calc(10em/16);
    @media screen and (max-width: 880px) {
      gap: calc(7em/16);
    }
  }
  & .list__itemIcon {
    margin-top: .7em;
    width: calc(18em/16);
    @media screen and (max-width: 880px) {
      margin-top: .5em;
      width: calc(14em/16);
    }
  }
  & .list__itemTxt {
    line-height: 2.1;
    font-size: calc(18em/16);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: .5em;
    .p-casee & {
      letter-spacing: 0;
    }
    & .u-pcNone {
      display: none;
    }
    @media screen and (max-width: 880px) {
      font-size: calc(14em/16);
      & .u-pcNone {
        display: block;
      }
    }
  }
}
.p-casestudydtl__profileBlockImg {
  position: relative;
  flex-shrink: 0;
  width: calc(380em/16);
  height: calc(360em/16);
  @media screen and (max-width: 1024px) {
    font-size: .9em;
  }
  @media screen and (max-width: 880px) {
    width: 100%;
    height: auto;
    aspect-ratio: 340/200;
    font-size: 1em;
  }
  & .fukidashi {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin: calc(var(--block-fukidashi-mt)/380*100%) calc(var(--block-fukidashi-mr)/380*100%) auto auto;
    width: calc(var(--block-fukidashi-w)/380*100%);
    @media screen and (max-width: 880px) {
      margin: calc(var(--block-fukidashi-mt)/340*100%) calc(var(--block-fukidashi-mr)/340*100%) auto auto;
      width: calc(var(--block-fukidashi-w)/340*100%);
      opacity: 1;
    }
  }
  & .img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: calc(var(--block-img-mt)/380*100%) auto auto calc(var(--block-img-ml)/380*100%);
    width: calc(var(--block-img-w)/380*100%);
    @media screen and (max-width: 880px) {
      margin: calc(var(--block-img-mt)/340*100%) auto auto calc(var(--block-img-ml)/340*100%);
      width: calc(var(--block-img-w)/340*100%);
      .p-casea & {
        scale: -1 1;
      }
    }
  }
  & .bg {
    --graphbg-w: 36;
    --graphbg-h: 37;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: calc(40em/16);
    overflow: hidden;
    @media screen and (max-width: 880px) {
      border-radius: calc(20em/16);
    }
  }
}
.p-casestudydtl__profileList {
  margin: calc(100em/16) auto 0;
  max-width: calc(1100em/16);
  @media screen and (max-width: 880px) {
    margin: calc(48em/16) auto 0;
  }
  & .cm-conversation__itemBody.is-left {
    --conversation-body-border-color: transparent;
  }
}