/* Scss Document */
/*
---------------------------------------
works01
---------------------------------------
*/
#works01 {
  position: relative;
  z-index: 2; }
  @media (max-width: 999px) {
    #works01 {
      width: 100%;
      max-width: 56rem;
      margin: 0 auto 6rem; } }
  #works01 .boxs {
    display: flex;
    align-items: stretch;
    gap: calc(160 / 1980 * 100%);
    width: 100%; }
    #works01 .boxs .picBox {
      flex: 0 0 calc(840 / 1980 * 100%);
      min-width: 0; }
      #works01 .boxs .picBox img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    #works01 .boxs .box {
      flex: 0 0 calc(17.847rem + 26.658vw);
      min-width: 0;
      position: relative; }
    @media (max-width: 999px) {
      #works01 .boxs {
        flex-direction: column;
        gap: 2rem; }
        #works01 .boxs .picBox {
          width: calc(300 / 375 * 100%);
          flex: auto;
          margin: 0 auto 2rem 0;
          overflow: hidden;
          width: 100%; }
          #works01 .boxs .picBox img {
            width: 100%;
            height: auto; }
        #works01 .boxs .box {
          width: 90%;
          flex: auto;
          margin: 0 auto;
          padding-top: 0; } }
  #works01 .reasonBox {
    padding: 4.5rem 6rem;
    background: #F7F7F7; }
    #works01 .reasonBox .reasonTtl {
      margin-bottom: 3rem;
      font-size: 3rem;
      line-height: 1.7;
      text-align: center; }
    #works01 .reasonBox .reasonList {
      width: max-content;
      max-width: 100%;
      margin: 0 auto; }
      #works01 .reasonBox .reasonList li {
        position: relative;
        padding-left: 4rem;
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 2; }
        #works01 .reasonBox .reasonList li + li {
          margin-top: 1.2rem; }
        #works01 .reasonBox .reasonList li::before {
          content: "";
          width: 2.6rem;
          height: 2.6rem;
          position: absolute;
          top: .5rem;
          left: 0;
          background: url("../img/ico_check_grade.svg") center/contain no-repeat; }
    @media (max-width: 999px) {
      #works01 .reasonBox {
        padding: 3rem 2rem; }
        #works01 .reasonBox .reasonTtl {
          margin-bottom: 2.4rem;
          font-size: 2.2rem; }
        #works01 .reasonBox .reasonList {
          width: 100%; }
          #works01 .reasonBox .reasonList li {
            padding-left: 3.4rem;
            font-size: 1.5rem;
            line-height: 1.7; }
            #works01 .reasonBox .reasonList li + li {
              margin-top: 1.4rem; }
            #works01 .reasonBox .reasonList li::before {
              width: 2.2rem;
              height: 2.2rem;
              top: .15rem; } }
  #works01 .decoBox {
    position: relative; }
    @media (max-width: 999px) {
      #works01 .decoBox {
        max-width: 42rem; } }
    #works01 .decoBox .deco {
      text-align: center;
      font-size: 9.6vw;
      display: inline-block;
      background: linear-gradient(90deg, #266EE8 0%, #7E61E4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      position: absolute;
      line-height: 1;
      z-index: 0;
      left: -12vw;
      top: 6vw;
      opacity: .1; }
      @media (max-width: 999px) {
        #works01 .decoBox .deco {
          font-size: 4.8rem;
          top: 2rem;
          right: 0;
          left: -7rem; } }
    #works01 .decoBox .pic2 {
      width: 56rem;
      height: auto;
      padding-top: 13vw; }
      @media (max-width: 999px) {
        #works01 .decoBox .pic2 {
          width: calc(216 / 375 * 100%);
          padding-top: 5.4rem;
          margin: 0 0 0 auto; } }

/*
---------------------------------------
works02
---------------------------------------
*/
#works02 {
  position: relative; }
  @media (max-width: 999px) {
    #works02 {
      margin-bottom: 2rem; } }
  #works02 .icoDeco {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(42.956522vw + 250.43478px);
    height: auto;
    z-index: -1; }
    @media (max-width: 999px) {
      #works02 .icoDeco {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 150%;
        height: auto;
        max-width: clamp(55rem, 140vw, 55rem);
        z-index: -1; } }
  #works02 .boxs {
    width: 100%;
    position: relative;
    padding: 5rem 0;
    border-top: 1px solid #D9D9D9; }
    #works02 .boxs .ico {
      width: 10.4rem;
      height: auto;
      position: absolute;
      top: -5.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2; }
    #works02 .boxs .box {
      width: 100%;
      display: flex;
      align-items: center;
      gap: clamp(5rem, 5.5vw, 10rem); }
      #works02 .boxs .box .pic {
        width: calc(520 / 1400 * 100%);
        height: auto;
        flex-shrink: 0; }
      #works02 .boxs .box .sttlBox {
        flex: 1;
        min-width: 0; }
        #works02 .boxs .box .sttlBox .sttl {
          margin-bottom: 3rem;
          font-size: 3rem;
          font-weight: 500;
          line-height: 1.6; }
        #works02 .boxs .box .sttlBox .stxt {
          font-size: 1.6rem;
          line-height: 2; }
    @media (max-width: 999px) {
      #works02 .boxs {
        padding: 5rem 0 7rem; }
        #works02 .boxs .ico {
          width: 7rem;
          top: -3.5rem; }
        #works02 .boxs .box {
          width: 89.33%;
          margin: 0 auto;
          flex-direction: column;
          align-items: flex-start;
          gap: 3rem; }
          #works02 .boxs .box .pic {
            width: 100%; }
          #works02 .boxs .box .sttlBox {
            width: 100%; }
            #works02 .boxs .box .sttlBox .sttl {
              margin-bottom: 2rem;
              font-size: 2.2rem;
              line-height: 1.6; }
            #works02 .boxs .box .sttlBox .stxt {
              font-size: 1.5rem;
              line-height: 1.9; } }

/*
---------------------------------------
works03
---------------------------------------
*/
@media (max-width: 999px) {
  #works03 {
    padding: 6rem 0; } }
#works03 .boxs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7.5rem; }
  #works03 .boxs .box {
    text-align: center;
    min-width: 0; }
    #works03 .boxs .box .pic {
      display: block;
      width: 100%;
      max-width: 41.6rem;
      aspect-ratio: 1 / 1;
      height: auto;
      margin: 0 auto;
      border-radius: 50%;
      object-fit: cover; }
    #works03 .boxs .box .sttl {
      margin-top: 3.2rem;
      font-size: 3.2rem;
      font-weight: 500; }
    #works03 .boxs .box .stxt {
      margin-top: 2.4rem;
      font-size: 1.6rem; }
  @media (max-width: 999px) {
    #works03 .boxs {
      grid-template-columns: 1fr;
      gap: 4rem; }
      #works03 .boxs .box .pic {
        width: 80%;
        max-width: 32rem; }
      #works03 .boxs .box .sttl {
        margin-top: 1.4rem;
        font-size: 2rem; }
      #works03 .boxs .box .stxt {
        margin-top: .6rem;
        font-size: 1.4rem; } }
#works03 .note {
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.5;
  font-weight: 500; }
  @media (max-width: 999px) {
    #works03 .note {
      font-size: 2rem; } }