@charset "utf-8";

.p-casestudydtl__style {
  --kakko-border-color: var(--casestudy-kakko-color-darken);
  --kakko-border-lighten-color: var(--casestudy-kakko-color);

  --title-name-w: 1;
  margin-top: calc(168em/16);
  .p-casea & {
    --title-name-w: 147;
  }
  .p-caseb & {
    --title-name-w: 150;
  }
  .p-casec & {
    --title-name-w: 149;
  }
  .p-cased & {
    --title-name-w: 148;
  }
  .p-casee & {
    --title-name-w: 148;
  }
  .p-casef & {
    --title-name-w: 148;
  }
  @media screen and (max-width: 880px) {
    margin-top: calc(78em/16);
  }
}
.p-casestudydtl__styleBody {
  --section-body-width: 1110;
  --section-body-pt: 100;
  --section-body-pb: 100;
  --section-body-width-sp: 360;
  @media screen and (max-width: 880px) {
    --section-body-pt: 75;
    --section-body-pb: 80;
  }
}
.p-casestudydtl__styleBodyTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 880px) {
    flex-direction: column;
    gap: calc(6em/16);
  }
  & .line {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(50em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(32em/16);
    }
  }
  & .line__name {
    margin-top: 0.1em;
    margin-right: calc(16em/50);
    width: calc(var(--title-name-w)*1em/50);
    @media screen and (max-width: 880px) {
      margin-right: calc(6em/32);
    }
  }
}
.p-casestudydtl__styleBodyList {
  display: grid;
  grid-template:
  "block01 block04" auto
  "block02 block05" auto
  "block03 block06" 1fr/
  1fr 1fr;
  column-gap: calc(10em/16);
  margin-top: calc(74em/16);
  @media screen and (max-width: 1024px) {
    display: block;
  }
  @media screen and (max-width: 880px) {
    margin-top: calc(45em/16);
  }
  & .block {
    display: flex;
    margin-top: -1px;
    border: 1px solid;
    &:nth-child(1) {
      grid-area: block01;
    }
    &:nth-child(2) {
      grid-area: block02;
    }
    &:nth-child(3) {
      grid-area: block03;
    }
    &:nth-child(4) {
      grid-area: block04;
    }
    &:nth-child(5) {
      grid-area: block05;
    }
    &:nth-child(6) {
      grid-area: block06;
    }
    @media screen and (max-width: 1024px) {
      &:nth-child(n+2) {
        margin-top: -1px;
      }
    }
  }
  & .block__title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: calc(42em/16) calc(24em/16);
    /* padding: calc(42em/16) calc(32em/16); */
    width: calc(196em/16);
    background: #f4f4f4;
    border-right: 1px solid;
    @media screen and (max-width: 1280px) {
      padding: calc(42em/16) calc(24em/16*.75);
      width: calc(196em/16*.8);
    }
    @media screen and (max-width: 880px) {
      padding: calc(32em/16) calc(15em/16);
      /* padding: calc(32em/16) calc(25em/16); */
      width: calc(140em/16);
    }
  }
  & .block__titleTxt {
    font-size: calc(18em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(14em/16);
    }
  }
  & .block__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: calc(8em/16); */
    padding: calc(24em/16) calc(20/548*100%) calc(24em/16) calc(48/548*100%);
    .p-casef & {
      padding: calc(24em/16) calc(10/548*100%) calc(24em/16) calc(30/548*100%);
    }
    @media screen and (max-width: 1280px) {
      padding: calc(24em/16) calc(48/548*100%*.75);
    }
    @media screen and (max-width: 880px) {
      /* gap: calc(6em/16); */
      padding: calc(16em/16) calc(8em/16) calc(16em/16) calc(18em/16);
    }
  }
  & .block__bodyLine {
    line-height: 1.6;
    font-size: calc(18em/16);
    letter-spacing: 0.06em;
    &.is-em {
      color: var(--casestudy-color);
      text-transform: uppercase;
    }
    &.is-underline {
      text-decoration: underline;
      text-underline-offset: .4em;
    }
    &.is-small {
      font-size: calc(14em/18);
    }
    @media screen and (max-width: 880px) {
      font-size: calc(13em/16);
      letter-spacing: 0.02em;
      &.is-small {
        font-size: calc(11em/16);
      }
    }
  }
}
.p-casestudydtl__styleBodyConversation {
  margin: calc(72em/16) auto 0;
  width: min(calc(1100em/16), 100%);
  @media screen and (max-width: 880px) {
    margin: calc(48em/16) auto 0;
  }
  & .cm-conversation__itemBody.is-left {
    --conversation-body-border-color: transparent;
    --conversation-body-background-color: #ececec;
  }
}