@charset "UTF-8";

/* =============================================================================

CSR CSS

・CSRページ用CSS「.social-×××」

上記はここに記述する

============================================================================= */


/* ヘッダー
============================================================================= */
.social-header {
  position:relative;
  @media (width > 640px) {
    display:flex;
    flex-direction: column;
    margin-bottom:20.0rem;
    height:calc(100dvh - var(--header-height));
  }
  @media (width <= 640px) {
    padding-block:3.6rem 7.2rem;
    padding-inline:var(--body-pd);
  }
  .img {
    z-index: -1;
    @media (width > 640px) {
      width:calc(50% + 25.6rem);
      height:calc(100% - 22.0rem);
      position:absolute;
      top:22.0rem;
      right:var(--body-pd);
    }
    @media (width <= 640px) {
      position:relative;
    }
  }
  .text {
    margin-top:12.6rem;
    @media (width > 640px) {
      padding-left:var(--body-pd);
    }
    @media (width <= 640px) {
      margin-top:-3.2rem;
    }
  }
  .text-title {
    margin-bottom:4.4rem;
    @media (width <= 640px) {
      margin-bottom:2.4rem;
    }
  }
  .l-tag_text-A {
    margin-bottom:2.0rem;
    @media (width <= 640px) {
    }
  }
  .text-desc {
    font-size:1.5rem;
    letter-spacing: .2em;
    @media (width <= 640px) {
      font-size:1.4rem;
    }
  }

  .l-inpage_navi {
    @media (width > 640px) {
      margin-top:4.0rem;
      padding-left:var(--body-pd);
    }
    @media (width <= 640px) {
      margin-top:5.2rem;
    }
  }
}


/* CSR活動について
============================================================================= */
.social-contents {
  padding-bottom:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }
  .l-heading-A {
    @media (width > 640px) {
      margin-bottom:5.2rem;
    }
    @media (width <= 640px) {
      margin-bottom:2.8rem;
    }
  }

  .contents-item {

    & + .contents-item {
      margin-top:10.0rem;
      @media (width <= 640px) {
        margin-top:7.6rem;
      }
    }
    .l-line_heading-A {
      margin-bottom:6.0rem;
      font-size:4.2rem;
      letter-spacing: .2em;
      @media (width <= 640px) {
        margin-bottom:2.8rem;
        font-size:3.0rem;
        line-height:calc(82/54);
      }
    }

    > .inner {
      display:grid;
      @media (width > 640px) {
        grid-template-columns:44.0rem 1fr;
        column-gap:7.2rem;
      }
      @media (width <= 640px) {
        row-gap:2.4rem;
      }
    }
    .text {

    }
    .text-desc1 {
      margin-top:calc(.5em - .5lh);
      font-size:1.6rem;
      line-height:2;
      letter-spacing: .18em;
      text-align: justify;
      font-weight:600;
      .is-ftest & {
        font-weight:700;
      }
      @media (width <= 640px) {
        font-size:1.5rem;
      }
    }
    .text-heading {
      display:flex;
      gap:.8rem;
      margin-block:4.4rem 1.2rem;
      padding-bottom:.8rem;
      font-size:1.7rem;
      font-weight:700;
      line-height:calc(48/34);
      letter-spacing: .15em;
      border-bottom:2px solid var(--cc-blue-A);
      @media (width <= 640px) {
      }

      &::before {
        flex-shrink: 0;
        content:"";
        margin-top:calc(.5lh - .75rem);
        width:2.0rem;
        height:1.5rem;
        background-color:var(--cc-blue-A);
        clip-path:polygon(0 0,100% 50%,0 100%);
      }
    }
    .text-desc2 {
      font-size:1.4rem;
      line-height:calc(26/14);
      letter-spacing: .18em;
      text-align: justify;
      @media (width <= 640px) {
        line-height:calc(52/28);
      }
    }
    .text-link {
      margin-top:3.6rem;
      font-size:1.6rem;
      line-height:2;
      letter-spacing: .18em;
      text-align: justify;
      font-weight:600;
      .is-ftest & {
        font-weight:700;
      }
      @media (width <= 640px) {
        margin-top:2.4rem;
        font-size:1.5rem;
        letter-spacing: .15em;
      }
      > a {
        text-decoration: underline;
        @media (hover:hover) {
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
    .text-note {
      margin-top:.8rem;
      font-size:1.1rem;
      line-height:calc(16/11);
      letter-spacing: .18em;
      @media (width <= 640px) {
        line-height:calc(32/22);
      }
    }
    .text-dl {
      margin-top:2.0rem;
      @media (width <= 640px) {
        margin-top:1.6rem;
      }
      > dt {
        font-size:1.4rem;
        line-height:calc(26/14);
        letter-spacing: .16em;
        @media (width <= 640px) {
          font-size:1.3rem;
          line-height:calc(48/26);
        }
      }
      > dd {
        font-size:1.3rem;
        line-height:calc(23/13);
        letter-spacing: .16em;
        text-align: justify;
        @media (width <= 640px) {
          font-size:1.3rem;
          line-height:calc(48/26);
        }
      }
    }
  }
}

/* Sample
============================================================================= */
.social-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}