@charset "UTF-8";
section#businessInfo{
  padding-top: 144px;

  .h3-wrap{
    margin-bottom: 48px;
  }
  >p.text{
    width: min(800px,100%);
    padding: 0 16px;
    margin-bottom: 64px;
    margin-inline: auto;

    font-weight: 700;
    line-height: 2;
  }
  .businessLinkCON{
    margin-bottom: 80px;
  }
}
.swiper{
  margin-bottom: 80px;
}
section#flow{
  width: min(1120px,100%);
  padding: 0 16px;
  padding-bottom: 80px;
  margin-inline: auto;

  .h3-wrap{
    margin-bottom: 48px;
  }
  ul.flowCON{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 32px;
    row-gap: 64px;

    overflow-x: hidden;

    li.item{
      --dot-width: 21px;
      container-type: inline-size;

      .picture-wrap{
        margin-bottom: 32px;

        div.numbering{
          position: relative;
          z-index: 3;

          display: flex;
          flex-direction: column;
          align-items: center;

          margin-bottom: -32px;

          color: var(--tc);
          font-weight: 700;

          p{
            font-size: 31px;
          }
          p.number{
            font-size: 66px;
            line-height: 1;
          }
        }
        picture{
          position: relative;
          z-index: 1;
        }
        picture::before{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 2;

          display: inline-block;
          width: 100cqw;
          height: 100cqw;

          border-radius: 50%;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        }
      }
      div.jcc{
        position: relative;
      }
      .dot{
        position: relative;
        z-index: 3;

        display: inline-block;
        width: var(--dot-width);
        height: var(--dot-width);
        margin-bottom: 16px;

        background: radial-gradient(circle,#267238 0%, #267238 40%,#8AC198 40%, #8AC198 100%);
        border-radius: 50%;
      }
      .line{
        position: absolute;
        top: calc(calc(var(--dot-width)/2) - 4px);
        left: 0;
        z-index: 2;

        display: inline-block;
        width: calc(100cqw + 32px);
        height: 8px;

        background: #C3C3C3;
      }
      div.textContent{
        p.title{
          margin-bottom: 8px;

          font-size: 18px;
          font-weight: 700;
          line-height: 1.4;
          text-align: center;
        }
        p.text{
          line-height: 1.6;
        }
      }
    }
    li.item:last-child{
      .line{
        position: absolute;
        top: calc(calc(var(--dot-width)/2) - 4px);
        left: 0;
        z-index: 2;

        display: inline-block;
        width: 50cqw;
        height: 8px;

        background: #C3C3C3;
      }
    }
  }
}
#mid-eyecatch{
  margin-bottom: 64px;

  img{
    width: 100%;
    max-width: none;
  }
}
section#faq{
  padding-bottom: 112px;

  .h3-wrap{
    margin-bottom: 48px;
  }
  ul.faqCON{
    width: min(1120px,100%);
    padding: 0 16px;
    margin-inline: auto;
  
    >*+*{
      margin-block-start: 16px;
    }
    li.faq-item label{
    position: relative;
  
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 32px;
    align-items: center;
  
    width: 100%;
    padding: 32px 24px;

    background: #fff;
    border-radius: 20px;
  
    .icon{
      font-size: 24px;
      font-weight: 700;
      color: var(--tc);
    }
    .title{
      color: #333;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.4;
    }
    .arrow{
      position: absolute;
      top: 50%;
      right: 16px;

      width: 24px;
      height: 24px;

      border-radius: 50%;
      background: var(--tc);
      color: #fff;
      font-weight: 700;
      line-height: 1;
    
      transform: translateY(-50%);
      transition: 0.3s all linear;

      i{
        position: relative;

        display: inline-block;
        width: 24px;
        height: 24px;
      }
      i::before,i::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        display: inline-block;
        background: #fff;
      }
      i::before{
        width: 12px;
        height: 3px;
      }
      i::after{
        width: 3px;
        height: 12px;
      }
    }
  }
  li.faq-item:has(input[type="checkbox"]:checked) label{
    border-radius: 20px 20px 0 0;
  }
  li.faq-item:has(input[type="checkbox"]:checked) .arrow{
    transform: translateY(-50%)rotate(180deg);
    transition: 0.3s all linear;

    i::after{
      display: none;
    }
  }
  li.faq-item input[type="checkbox"]{
    display: none;
  }
  li.faq-item .content-wrap{
    display: grid; 
    grid-template-rows: 0fr;
    transition: 0.3s all linear;
  
    background: #D9EDDF;
    border-radius: 0 0 20px 20px;
  
    >div{
      overflow: hidden;
    }
  }
  li.faq-item:has(input[type="checkbox"]:checked) .content-wrap{
    grid-template-rows: 1fr;
    transition: 0.3s all linear;
  }
  li.faq-item .content-wrap .content{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 32px;
    width: 100%;
    padding: 48px 24px;
    padding-right: 64px;

    .icon{
      font-size: 24px;
      font-weight: 700;
      color: var(--tc);
    }
  }
  }
}
a#linkToWorks{
  position: relative;

  display: block;
  width: 80%;
  min-height: 1px;
  aspect-ratio: 4.45 / 1;
  margin-left: 20%;
  margin-bottom: 160px;

  picture{
    img{
      width: 100%;
      max-width: auto;
      border-radius: 20px 0 0 20px;
    }
  }
  div.content-wrap{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    }
  div.content{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-left: 92px;
    padding-right: 48px;
    height: 100%;

    p.title{
      font-size: 45px;
      font-weight: 700;
      color: #fff;
    }
    p.title-ENG{
      font-size: 68px;
      font-weight: 700;
      color: #fff;

      opacity: 0.2;
    }
    span.arrow{
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 72px;
      height: 72px;

      font-size: 48px;
      font-weight: 700;
      color: var(--tc);

      background: #fff;
      border-radius: 8px;
    }
  }
}
a#linkToWorks:hover{
  div.content{
    p.title{
      visibility: hidden;
      display: none;
    }
    p.title-ENG{
      font-size: 180px;

      opacity: 1;
    }
    span.arrow{
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 72px;
      height: 72px;

      font-size: 48px;
      font-weight: 700;
      color: var(--tc);

      background: #fff;
      border-radius: 8px;
    }
  }
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
}