#content {
  .pc { display: inline-block !important; }
  .sp { display: none !important; }
  @media (width < 960px) {
    .pc { display: none !important; }
    .sp { display: inherit !important; }
  }

  .heading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 251px;
    background-image: image-set(
      url('../../img/seikatsuchishin2026/data/head_bg.jpg') 1x,
      url('../../img/seikatsuchishin2026/data/head_bg@2x.jpg') 2x
    );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    @media (width < 960px) {
      height: 167px;
      background-image: image-set(
        url('../../img/seikatsuchishin2026/data/head_bg-sp.jpg') 1x,
        url('../../img/seikatsuchishin2026/data/head_bg-sp@2x.jpg') 2x
      );
      background-position: center left 45%;
    }
    .heading-content {
      width: 100%;
      max-width: 626px;
      @media (width < 960px) {
        margin-top: -5px;
        padding: 0 25px;
      }
      .text {
        max-width: 301px;
        margin-left: auto;
        color: #fff;
        @media (width < 960px){
          width: calc(142 / 325 * 100%);
        }
      }
      h1 {
        margin-bottom: 17px;
        line-height: 1.7;
        letter-spacing: 0.11em;
        @media (width < 960px) {
          font-size: 19px;
          line-height: 1;
        }
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        @media (width < 960px) {
          gap: 8px 12px;
        }
      }
      li {
        font-size: 15px;
        letter-spacing: 0.08em;
        @media (width < 960px) {
          font-size: 11px;
          line-height: 1.6;
        }
      }
    }
  }

  .link-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 53px;
    @media (width < 960px) {
      max-width: 600px;
      margin: 0 auto;
      padding: 34px 25px 188px;
      justify-content: flex-start;
    }
  }
  .data-section {
    position: relative;
    display: flex;
    align-items: center;
    height: 386px;
    box-sizing: content-box;
    @media (width < 960px) {
      height: auto;
    }
    + .data-section {
      border-top: solid 2px #E3E3E3;
    }
    .head {
      margin-bottom: 24px;
      font-size: 32px;
      font-feature-settings: 'palt';
      line-height: 1.6;
      letter-spacing: 0.08em;
      @media (width < 960px) {
        margin-bottom: 20px;
        font-size: 22px;
        text-align: center;
      }
    }
    .lead {
      max-width: 258px;
      font-size: 13px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      @media (width < 960px) {
        max-width: unset;
        font-size: 14px;
      }
      + ul {
        max-width: 258px;
        margin-top: 15px;
        @media (width < 960px) {
          max-width: unset;
          margin-top: 13px;
        }
      }
    }
    li {
      padding-left: 0px;
      font-size: 11.5px;
      font-feature-settings: 'palt';
      line-height: 1.8;
      letter-spacing: 0.08em;
      @media (width < 960px) {
        text-align: justify;
        font-size: 14px;
      }
      &::before {
        content: '■';
        margin-right: 4px;
      }
    }
    .button {
      position: absolute;
      right: 30px;
      bottom: 30px;
      display: flex;
      padding: 21px 39px 20px 90px;
      border-radius: 100px;
      background: var(--pink);
      color: #fff;
      font-size: 18px;
      font-feature-settings: 'palt';
      letter-spacing: 0.08em;
      @media (width < 960px) {
        right: 0;
        left: 0;
        bottom: 22px;
        justify-content: center;
        max-width: fit-content;
        margin: 0 auto;
        padding: 14px 37px 12px 89px;
        width: 100%;
        font-size: 15px;
      }
      svg {
        margin-left: 42px;
        margin-top: 4px;
        @media (width < 960px) {
          margin-left: 44px;
          margin-top: 2px;
          width: 16.8px;
        }
      }
    }

  }

  .data-library {
    background-image: image-set(
      url('../../img/seikatsuchishin2026/data/data_bg.jpg') 1x,
      url('../../img/seikatsuchishin2026/data/data_bg@2x.jpg') 2x
    );
    background-position: left;
    @media (width < 960px) {
      background-image: image-set(
        url('../../img/seikatsuchishin2026/data/data_bg-sp.png') 1x,
        url('../../img/seikatsuchishin2026/data/data_bg-sp@2x.png') 2x
      );
      background-position: bottom;
    }
  }

  .time-line {
    background-image: image-set(
      url('../../img/seikatsuchishin2026/data/time-line_bg.jpg') 1x,
      url('../../img/seikatsuchishin2026/data/time-line_bg@2x.jpg') 2x
    );
    background-position: left;
    @media (width < 960px) {
      background-image: image-set(
        url('../../img/seikatsuchishin2026/data/time-line_bg-sp.png') 1x,
        url('../../img/seikatsuchishin2026/data/time-line_bg-sp@2x.png') 2x
      );
      background-position: bottom;
    }
    .head {
      margin-top: -14px;
      @media (width < 960px) {
        margin-top: auto;
      }
    }
  }
  .overview {
    padding: 61px 26px 57px;
    border: 51px solid #F0F0F0;
    @media (width < 960px) {
      padding: 32px 26px 24px;
      border-width: 22px;
    }
    h2 {
      margin-bottom: 51px;
      font-size: 20px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      text-align: center;
      @media (width < 960px) {
        margin-bottom: 24px;
        font-size: 16px;
      }
    }
    .overview-wrap {
      max-width: 412px;
      margin: 0 auto;
      h3 {
        padding-bottom: 9px;
        border-bottom: solid 1px var(--pink);
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.08em;
        @media (width < 960px) {
          padding-bottom: 7px;
          font-size: 11px;
        }
      }
      .data-list {
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.08em;
        @media (width < 960px) {
          margin-top: 6px;
          font-size: 11px;
        }
        dt {
          float: left;
          margin-right: 6px;
          @media (width < 960px) {
            margin-right: 4px;
          }
        }
      }
      .overview-detail + .overview-detail {
        margin-top: 39px;
        @media (width < 960px) {
          margin-top: 28px;
        }
      }
    }
  }
}