@charset "UTF-8";

/*====================

  article header

====================*/

.article__header {
    margin: 0 auto;
}

.mainImg__sp {
    width: 100%;
}

.mainImg__pc {
    display: none;
}

.mainCopy__yellow {
    background: #F8ED00;
}

.mainCopy {
    padding: 80px 4% 0;
}

.mainCopy__name {
    color: #122A88;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.2;
    letter-spacing: 2.4px;
}

.mainCopy__txt {
    margin-top: 70px;
    font-size: 1.6rem;
    line-height: 2.5;
    letter-spacing: 0.8px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mainCopy__first {
    font-family: Caveat;
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 2.5;
    letter-spacing: 1px;
}

.mainCopy__footergroup {
    padding: 50px 0 100px 4%;
    background-image: url(../images/hand.png);
    background-position: right 0px bottom 50px;
    background-repeat: no-repeat;
    background-size: 180px;
}

.mainCopy__footertxt {
    font-size: 1.6rem;
    line-height: 2.5;
    letter-spacing: 0.8px;
}

.mainCopy__signature {
    font-family: Caveat;
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 2.0;
    letter-spacing: 2px;
}

/*-------------------------
  article header pc START  
-------------------------*/

@media screen and (min-width: 769px) {
    .mainImg__sp {
        display: none;
    }

    .mainImg__pc {
        display: block;
    }

    .mainCopy {
        padding: 100px 7.6% 0;
    }

    .mainCopy__name {
        font-size: 3.2rem;
        line-height: 2.3;
        letter-spacing: 3.2px;
    }

    .mainCopy__txt {
        margin-top: 80px;
        font-size: 2.0rem;
        line-height: 2.5;
        letter-spacing: 1.0px;
        gap: 55px;
    }

    .mainCopy__first {
        font-size: 2.4rem;
        line-height: 2.5;
        letter-spacing: 2.4px;
    }

    .mainCopy__footergroup {
        width: 100%;
        padding: 55px 0 100px 7.6%;
        display: flex;
        justify-content: right;
        align-items: center;
        background-position: right -8px bottom 5px;
        background-size: 21.3%;
    }

    .mainCopy__footertxt {
        font-size: 2.0rem;
        letter-spacing: 1.0px;
        margin-right: 12%;
    }

    .mainCopy__signature {
        font-size: 2.4rem;
        letter-spacing: 2.4px;
    }
}
/*-------------------------
  article header pc END  
-------------------------*/


/*====================

  About & Service

====================*/

.section__content {
    padding: 50px 4%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section__pcImg {
    display: none;
}

.section__topic {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section__title {
    font-family: Caveat;
    font-size: 4.0rem;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 8px;
}

.section__subtitle {
    font-size: 1.6rem;
    line-height: 1.0;
    letter-spacing: 3.2px;
}

.section__detail {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.section__txt {
    line-height: 2.2;
    text-align: center;
}

/*-------------------------
  About & Service pc START  
-------------------------*/

@media screen and (min-width: 769px) {
    .section__spImg {
        display: none;
    }

    .section__pcImg {
        display: block;
        width: 56%;
    }

    .section__about,
    .section__service {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6%;
    }

    .section__about {
        padding: 100px 7.6% 40px;
    }

    .section__service {
        padding: 40px 7.6% 60px;
    }

    .about__content,
    .service__content {
        padding: 0 4%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .section__topic {
        gap: 15px;
    }

    .section__title {
        font-family: Caveat;
        font-size: 7.2rem;
        font-weight: 700;
        line-height: 1.0;
        letter-spacing: 14.4px;
    }

    .section__subtitle {
        font-size: 2.4rem;
        letter-spacing: 4.8px;
    }

    .about__subtitle,
    .service__subtitle {
        font-size: 2.0rem;
    }

    .section__detail {
        gap: 60px;
    }
}
/*-------------------------
  About & Service pc END  
-------------------------*/


/*====================

  Works

====================*/

.section__works {
    background-color: #FDFCFC;
}

.works__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.works__txt {
    margin-top: 20px;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.0;
    letter-spacing: 0.6px;
}

.works__name {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 1.6px;
}

.works__detail {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.works__btn {
    display: flex;
    margin: 0 auto;
}

/*--------------------
  Works pc START  
--------------------*/

@media screen and (min-width: 769px) {
    .section__works {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .works__content {
        padding: 60px 7.6%;
        width: 100%;
    }

    .works__detail {
        gap: 70px;
    }    

    .works__list {
        display: flex;
        flex-direction: row;
        gap: 10px; 
        margin-top: 30px;
    }

    .works__txt {
        font-size: 1.4rem;
        letter-spacing: 1.4px;
    }

    .works__name {
        margin-top: 10px;
        font-size: 2.4rem;
        letter-spacing: 2.4px;
    }
}
/*--------------------
  Works pc END  
--------------------*/


/*====================

  Contact

====================*/

.contact__content {
    padding: 50px 4% 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.contact__imgFrame {
    display: flex;
    justify-content: center;
}

.contact__img {
    width: 150px;
}

.contact__detail {
    display: flex;
    gap: 40px;
}

/*--------------------
  Contact pc START  
--------------------*/

@media screen and (min-width: 769px) {
    .contact__content {
        padding: 60px 7.6% 160px;
        gap: 70px;
    }

    .section__contact {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact__img {
        width: 250px;
    }

    .contact__detail {
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }

    .contact__txt {
        text-align: center;
    }
}
/*--------------------
  Contact pc END  
--------------------*/