@charset "utf-8";

html {
	scroll-behavior: smooth;
}
/*======================================
catch copy title
========================================*/
.catchcopy {
    text-align: center;
    padding-inline: 30px;
}
.catchcopy h1 {
    font-size: 1.6rem;
    margin-bottom: 20px;
}
.catchcopy p {
    font-size: 1.4rem;
    margin-top: 15px;
}
@media screen and (min-width: 1200px) {
    .catchcopy h1  {
        font-size: 2rem;
    }
    .catchcopy p {
        font-size: 1.8rem;
    }
}

/*======================================
works wrapper
========================================*/
.works {
    text-align: center;
}
.works__img {
    max-width: 900px;
    margin-top: 80px;
    margin-bottom: 20px;
    width: 83vw;
}
.works__ttl {
    font-size: 1.6rem;
}
.works__lead {
    font-size: 1.3rem;
    color: #878787;
}
@media screen and (min-width: 768px) {
    .works__ttl {
        font-size: 1.8rem;
    }
    .spnone {
        font-size: 1.6rem;
    }
}

/*======================================
profile
========================================*/
.profile {
    text-align: center;
    padding-inline: 30px;
}

.profile img {
    margin-top: 40px;
    width: 83vw;
}
.profile h4 {
    margin-block: 40px;
    text-align: left;
    font-size: 1.6rem;
}
.profile h4 span {
    padding-left: 15px;
    font-size: 1.3rem;
    color: #878787;
    letter-spacing: 0.6rem;
}
.profile p {
    margin-block: 10px;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2;
}
.profile__wrapper {
    background-image: url(../images/aboutbacksp.webp);
    background-size: contain;
    background-repeat: no-repeat;
    padding-inline: 30px;
}
@media screen and (min-width: 500px) {
    .profile__inner {
        margin-block: auto;
    }
  
}
@media screen and (min-width: 700px) {
    .profile__wrapper {
        background-image: url(../images/aboutback.webp);
    }
}
@media screen and (min-width: 900px) {
    .profile {
        display: flex;
        flex-direction: row-reverse;
        gap: 50px;
        padding-inline: 34px;
        justify-content: space-evenly;
    }
    .profile img {
       max-width: 499px;
    } 
    .profile__inner {
        margin-block: 30px;
        padding-inline: 30px;
    }
    .profile h4 {
        font-size: 1.8rem;
    }
    .profile p {
        font-size: 1.6rem;
    }

}

/*==========================
slick
==========================*/
.sliderArea {
    overflow: visible;
    margin: 0 auto 64px;
    width: 90%;
    max-width: 1200px;
  }
  
 .slide-item {
    width: 300px; /* 1枚の幅をここで固定 */
    margin: 0 auto;
  }
  
  .slick-slide img {
    width: 100%;  /* 横幅をスライダーの親要素に合わせる */
    max-width: 80%;  /* 最大幅を80%に制限（好みに合わせて調整） */
    margin: 0 auto;  /* 画像を中央に配置 */
  }
  @media screen and (min-width: 769px) {
    .slick-slide img {
        width: 50%;  /* 横幅をスライダーの親要素に合わせる */
}
  }