@charset "UFT-8";

/* ========================
common
======================== */
:root {
    --primary-white: #EEF2FB;
    --primary-black: #101113;
    --primary-pitchBlack: #000;
    --primary-gray: #3E424B;
    --primary-lightGray: #737D96;
    --contentPadding__pc: 3.9%;
    --contentPadding__sp: 6.6%;
}



/* ========================
profile
======================== */
/* 背景イラスト */
.body__profile {
    background-image: url("../img/bg_love02.png"), url("../img/screenTone02.png");
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ヘッダー */
.section__header {
    padding: 282px var(--contentPadding__pc) 216px;
}

.section__header .section__subtitle {
    margin-top: 12px;
}

@media screen and (max-width: 768px) {
    .section__header {
        padding: 183px var(--contentPadding__sp) 100px;
    }

    .section__header .section__title {
        font-size: 3.6rem;
    }

    .section__header .section__subtitle {
        margin-top: 6px;
    }

}

/* sp 768px */


/* プロフィール */
.profile {
    padding: 20px 10vw 75px;
}

.profile__container {
    margin: 0 auto;
    border-bottom: 1px solid var(--primary-gray, #3E424B);
}

.profile__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;

}

.profile__img {
    width: 230px;
    height: 230px;
}

.profile__inner {
    margin-left: min(5vw, 100px);
}

.illustrator {
    margin-left: 5px;
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
}

.taiju {
    font-size: 3.6rem;
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
}

.profile__txt {
    margin-top: 50px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
}

.award__wrapper {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-left: min(15vw, 250px);
}

.award__container {
    margin-left: min(10vw, 100px);
}

.award__title,
.award__item {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1rem;
}

.award__list:last-of-type {
    margin-top: 40px;
}

.award__name {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    margin-top: 10px;
}


@media screen and (max-width: 768px) {

    /* プロフィール */
    .profile {
        padding: 20px var(--contentPadding__sp) 50px;
    }

    .profile__container {
        width: 100%;
    }

    .profile__wrapper {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
    }

    .profile__img {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    .profile__inner {
        margin: 20px 0 0;
    }

    .illustrator {
        text-align: center;
    }

    .taiju {
        margin-top: 10px;
        text-align: center;
    }

    .profile__txt {
        font-size: 1.4rem;
        margin: 0 auto;
        padding: 50px 0 70px;
    }

    .txt__pc {
        display: none;
    }

    .award__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 70px 0;
    }

    .award__container {
        margin: 50px 0 0;
    }

    .award__item {
        font-size: 1.4rem;
    }

    .award__name {
        font-size: 1.4rem;
    }

}

/* sp 768px */


/* ========================
コンタクトボタン
======================== */
.contactBtn {
    padding: 200px var(--contentPadding__pc) 100px;
    background-color: transparent;
}

.contactBtn__container {
    padding: 55px;
    background-color: rgba(62, 66, 75, 0.7);
    text-align: center;
}

.title__contact {
    font-size: 4.8rem;
    position: relative;
    letter-spacing: 0.2rem;
}

.subtitle__contact {
    margin: 10px 0 0;
}

.contactBtn__wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

/* btn sp */
@media screen and (max-width: 768px) {

    /* コンタクト */
    .contactBtn {
        padding: 0 var(--contentPadding__sp) 50px;
    }

    .contactBtn__container {
        padding: 35px;
    }

    .title__contact {
        font-size: 2.6rem;
    }

    .contactBtn__wrapper {
        margin-top: 30px;
    }
}

/* sp 768px */