@charset "UTF-8";



.main1 {
    background: linear-gradient(90deg, #D3BAA1 0%, #EAEAEA 49.52%, #D3BAA1 100%);
    
}

.main2 {

  background: linear-gradient(90deg, rgba(194, 213, 255, 0.70) 0%, #EAEAEA 49.52%, rgba(194, 213, 255, 0.89) 100%);

}

.main3 {
  background: linear-gradient(90deg, #B3CDAB 0%, #EAEAEA 49.52%, #B3CDAB 100%);
}

.main4 {
  background: linear-gradient(90deg, #CED1D2 0%, #EAEAEA 49.52%, #CED1D2 100%);
}

.portfolio__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 135px 5.3% 100px;
}

.portfolio__title {
        display: inline-block;
        padding-bottom: 3px;
        border-bottom: 1px solid #000;

        color: #535353;
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.portfolio__image {
    padding-top: 70px;
    padding-bottom: 90px;
}

.portfolio__text {
    border-radius: 10px;
border: 0.5px solid #FFF;
background: rgba(255, 255, 255, 0.29);
padding: 30px 5%;
}

.portfolio__about--top {
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.6px;
margin-top: 30px;
}

.portfolio__about--text {
font-size: 1.3rem;
font-weight: 350;
line-height: 18px; /* 150% */
letter-spacing: 0.6px;
padding-top: 10px;
padding-bottom: 30px;

}


.wave-divider {
    width: 95%;
    height: 10px;
    border-top: 1px dashed #000;
    margin: 0 auto;

  }

  .portfolio__url {
    padding-top: 70px;
    text-align: right;
    font-weight: 600;

  }


  .view-site {
    position: relative;
    display: inline-block;
    font-size: 1.6rem;
    color: #000;
    letter-spacing: 0.6px;
    text-decoration: none;
    padding-bottom: 6px;
    transition: transform 0.3s ease;
    padding-right: 10px;
  }
  
  /* 左にはみ出る下線 */
  .view-site::after {
    content: "";
    position: absolute;
    left: -35px;          /* ← はみ出し量 */
    bottom: 0;
    width: calc(100% + 24px);
    height: 1px;
    background: #000;
  }
  
  /* hover */
  .view-site:hover {
    transform: scale(1.15);
    transform-origin: left center;
  }


  .portfolio__img {
    background-color: #f8f8f8;;
    padding: 100px 10% 150px;
    max-width: 1440px;
    margin: 0 auto;

    
  }

  .portfolio__img p {
    font-size: 1rem;
    letter-spacing: normal;
    padding-bottom: 30px;

  }

  .portfolio__img img {
    display: block;
    margin: 0 auto;
  }


  @media screen and (min-width: 1024px) {



    
    .portfolio__inner {
        padding: 250px 10.4% 140px;
    }
    
    .portfolio__title {
            display: inline-block;
            padding-bottom: 3px;
            border-bottom: 1px solid #000;
    
            color: #535353;
    font-size: 2.2rem;
    font-weight: 500;

    }
    .portfolio__Pcflex {
        display: flex;
        gap: 50px;
        align-items: flex-end;
        
    }
    
    .portfolio__image {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    
    .portfolio__text {
        border-radius: 10px;
    border: 0.5px solid #FFF;
    background: rgba(255, 255, 255, 0.29);
    padding: 30px 5%;
    }
    
    .portfolio__about--top {
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.6px;
    margin-top: 30px;
    }
    
    .portfolio__about--text {
    font-size: 1.4rem;
    font-weight: 350;
    line-height: 20px; /* 150% */
    letter-spacing: 0.6px;
    padding-top: 10px;
    padding-bottom: 30px;
    
    }
    
    
    .wave-divider {
        width: 95%;
        height: 10px;
        border-top: 1px dashed #000;
        margin: 0 auto;
    
      }
    
      .portfolio__url {
        padding-top: 70px;
        text-align: right;
        font-weight: 600;
    
      }
    
    
      .view-site {
        position: relative;
        display: inline-block;
        font-size: 2.2rem;
        color: #000;
        letter-spacing: 0.6px;
        text-decoration: none;
        padding-bottom: 6px;
        transition: transform 0.3s ease;
        padding-right: 10px;
      }
      
      /* 左にはみ出る下線 */
      .view-site::after {
        content: "";
        position: absolute;
        left: -35px;          /* ← はみ出し量 */
        bottom: 0;
        width: calc(100% + 24px);
        height: 1px;
        background: #000;
      }
      
      /* hover */
      .view-site:hover {
        transform: scale(1.15);
        transform-origin: left center;
      }
    
    
      .portfolio__img {
        background-color: #f8f8f8;;
        padding: 200px 10% 200px;
      }
    
      .portfolio__img p {
        font-size: 1.4rem;
        letter-spacing: normal;
        padding-bottom: 30px;
    
      }
    
      .portfolio__spimg {
        padding-top: 130px;
        padding-left: 50px;
        padding-right: 50px;
      }

  }


  .portfolio__image img {
    width: 100%;
    display: block;
  
    /* 初期状態 */
    opacity: 0;
    transform: scale(0.4);
    animation: scaleUp 1.6s ease-out forwards;
  }

  @keyframes scaleUp {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }