@charset "UTF-8";

/* ======================================
main
======================================= */
/* article__header */
.mainImage {
    background-image: url(../images/img_bg_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 375px;
    width: 100%;
    padding: 74px 9% 40px 8%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.mainImage__titlePc {
    display: none;
}

.mainImage__titleSp {
    -webkit-text-stroke-width: min(0.5vw, 2px);
    -webkit-text-stroke-color: var(--black);
    font-family: "Avenir Next", sans-serif;
    font-size: min(6.1rem, 16.2vw);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 4px;
    color: transparent;
}

.mainImage__subTitle {
    color: var(--accent);
    font-family: "six-hands-chalk", serif;
    font-size: min(14.6vw, 5.1rem);
    line-height: 1.2;
    letter-spacing: 4px;
    transform: rotate(-12.635deg);
}

.mainCaption {
    padding: 40px 8%;
}

.mainCaption__name {
    color: var(--accent);
    text-align: center;
    font-size: var(--Headline-Medium-Size);
    line-height: var(--Headline-Medium-Line-Height);
    letter-spacing: var(--Headline-Small-Tracking);
}

.mainCaption__group {
    margin-top: 24px;
}

.mainCaption__txt {
    text-align: center;
    font-size: var(--Body-Large-Size);
    line-height: var(--Body-Large-Line-Height);
    letter-spacing: var(--Body-Large-Tracking);
    margin-top: 24px;
}

.mainCaption__txt:first-of-type {
    margin-top: 0;
}

/* pc */
@media screen and (min-width: 769px) {
    .mainImage {
        background-image: url(../images/img_bg_pc.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position:  center;
        width: 100%;
        height: 520px;
        display: flex;
        justify-content: center;
        align-items: center
        ;
        flex-direction: column;
        gap: 1.6vw;
    }

    .mainImage__titleSp {
        display: none;
    }

    .mainImage__titlePc {
        display: block;
        text-align: center;
        -webkit-text-stroke-width: min(0.3vw, 4px);
        -webkit-text-stroke-color: var(--black, #333);
        color: transparent;
        font-family: "Avenir Next", sans-serif;
        font-size: clamp(61px, 7vw, 94px);
        font-weight: 600;
        line-height: 0.6;
        letter-spacing: 4px;
    }

    .mainImage__subTitle {
        font-size: clamp(51px, 7vw, 94px);
        line-height: 0.6;
        transform: rotate(-8deg);
    }

    .mainCaption {
        padding: 48px 10.8%;
        max-width: 1440px;
        margin: 0 auto;
    }

    .mainCaption__txt:last-of-type {
        margin-top: 0;
    }
} /* pc 769px */

/* section__works */
.section--works {
    padding: 48px 8%;
}

.works__item {
    margin-top: 24px;
    border-radius: 8px;
    background: var(--white);
    padding-top: 20px;
    max-width: 602px;
}

.works__item:first-of-type {
    margin-top: 100px;
}

.works__img {
    display: block;
    padding: 0 1.8%;
    text-align: center;
    width: 100%;
    aspect-ratio: 300 / 195;
    -webkit-aspect-ratio: 300 / 195;
    height: auto;
    max-height: 195px;
}

.works__img img {
    display: block;
    max-height: 195px;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.works__content {
    padding: 0 20px 20px;
    margin-top: 20px;
}

.works__name {
    color: var(--accent);
    font-size: var(--Title-Medium-Size);
    font-weight: 500;
    line-height: var(--Title-Medium-Line-Height);
    letter-spacing: var(--Title-Medium-Tracking);
}

.works__category {
    display: inline-block;
    background-color: var(--main);
    font-size: var(--Label-Large-Size);
    font-weight: 600;
    line-height: var(--Label-Large-Line-Height);
    letter-spacing: var(--Label-Large-Tracking);
    padding: 5px 15px;
    margin-top: 15px;
}

.works__txt {
    font-size: var(--Body-Large-Size);
    line-height: var(--Body-Large-Line-Height);
    letter-spacing: var(--Body-Large-Tracking);
    margin-top: 15px;
}

.btn--works {
    margin-top: 15px;
}

/* pc */
@media screen and (min-width: 769px) {
    .section--works {
        padding: 64px 10.8% 100px;
    }

    .works {
        display: flex;
        max-width: 1128px;
        justify-content: center;
        gap: 5.8%;
        margin: 108px auto 0;
    }

    .works__item {
        max-width: 311px;
        margin-top: 0;
    }

    .works__item:first-of-type {
        margin-top: 0;
    }

    .works__img {
        width: 100%;
        height: 13.5vw;
    }

    .works__img img {
        width: 100%;
        height: 100%;
    }

} /*  pc 769px */

/* section__profile */
.portrait {
    display: flex;
    margin: 85px auto 0;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    width: 84vw;
    max-width: 360px;
    height: 84vw;
    max-height: 360px;
}

.portrait img {
    object-fit: cover;
    object-position: center center;
    height: 100%;
}

.title__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.profile__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.title__txt {
    color: var(--accent);
    font-size: var(--Title-Medium-Size);
    font-weight: 500;
    line-height: var(--Title-Medium-Line-Height);
    letter-spacing: var(--Title-Medium-Tracking);
}

.message__group,
.profile__career {
    font-size: var(--Body-Large-Size);
    line-height: var(--Body-Large-Line-Height);
    letter-spacing: var(--Body-Large-Tracking);
    margin-top: 16px;
}

.message__txt {
    margin-top: 24px
}

.message__txt:first-of-type {
    margin-top: 0;
}

.profile__title--career  {
    margin-top: 32px;
}

.carrer__topic {
    margin-top: 20px;
    font-weight: 400;
}

.carrer__topic:first-of-type {
    margin-top: 0;
}

/* pc */
@media screen and (min-width: 769px) {
    .section--profile {
        padding: 64px 10.8% 100px;
    }
    
    .profile__content {
        margin: 125px auto 0;
        max-width: 1128px;
        display: flex;
        justify-content: space-between;
    }
    
    .profile__txt {
        display: flex;
        flex-flow: column;
        width: 62.2%;
    }

    .message__txt,
    .carrer__topic {
        margin-top: 0;
    }

    .message__group {
        margin-top: 10px;
    }

    .profile__career {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .carrer__topic {
        display: inline-block;
        width: 124px;
    }

    .career__txt {
        width: 80.5%;
    }

    .profile__title--career {
        margin-top: 32px;
    }

    .portrait {
        margin: 0;
        width: 25vw;
        height: 25vw;
    }

} /*  pc 769px */

/* section__contact */
.form, 
.confirmation {
    background-color: var(--white);
    margin-top: 106px;
    padding: 6.4vw;
}

.form__category, 
.confirm__category {
    font-size: var(--Label-Large-Size);
    font-weight: 600;
    line-height: var(--Label-Large-Line-Height);
    letter-spacing: var(--Label-Large-Tracking);
    margin-top: 24px;
}

.form__category--name {
    margin-top: 0;
}

.form__category::before {
    content: '必須';
    display: inline-block;
    padding: 3px 9px;
    text-align: center;
    border-radius: 3px;
    background: var(--accent);
    color: var(--white);
    font-size: var(--Label-Medium-Size);
    font-weight: 600;
    line-height: var(--Label-Medium-Line-Height);
    letter-spacing: var(--Label-Medium-Tracking);
    margin-right: 4px;
}

input[type="text"],
textarea, 
.confirm__category span {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 8px 16px 5px;
    border-radius: 2px;
    border: 1px solid #8F9191;
    margin-top: 20px;
    cursor: pointer;
    font-size: var(--Label-Large-Size);
    font-weight: 500;
    line-height: var(--Label-Large-Line-Height);
    letter-spacing: var(--Label-Large-Tracking);
}

.confirmation h3, 
.response {
    color: var(--accent);
    font-size: var(--Title-Medium-Size);
    font-weight: 500;
    line-height: var(--Title-Medium-Line-Height, 24px); /* 150% */
    letter-spacing: var(--Title-Medium-Tracking, 0.15px);
    text-align: center;
}

.confirm__category--name {
    margin-top: 20px;
}

textarea {
    height: 180px;
    vertical-align: top;
}

input[type="text"]:focus,
textarea:focus {
    outline: solid 1px var(--accent);
}

::placeholder {
    color: #C7C9C9;
}

.form__parts--policy {
    text-align: center;
    font-size: var(--Label-Large-Size);
    font-weight: 500;
    line-height: var(--Label-Large-Line-Height);
    letter-spacing: var(--Label-Large-Tracking);
    margin-top: 24px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    outline: solid 1px #8F9191;
    margin-right: 4px;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    outline: solid 1px #8F9191;
    margin-right: 4px;
}

input[type="checkbox"]:checked {
    position: relative;
    outline: none;
    background-color: var(--accent);
}

input[type="checkbox"]:checked::after {
    display: inline-block;
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%) rotate(-45deg)
}

.policy {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn--form {
    margin-top: 24px;
    border: none;
}

.btn--back {
    margin-top: 24px;background-color: var(--white);
    color: var(--accent);
    border: 3px solid var(--accent);
    box-sizing: border-box;
    transition: all 0.4s;
}

.btn--back::after {
    background-image: url(../images/icon_arrow_hover.svg);
}

.btn--back:hover {
    opacity: 0.5;
}

/* pc */
@media screen and (min-width: 769px) {
    .section--contact {
        padding: 64px 10.8% 100px;
    }

    .form, 
    .confirmation {
        max-width: 718px;
        margin: 122px auto 0;
        padding: 24px;
    }

    .form__parts {
        display: flex;
        align-items: end;
    }

    .form__category {
        width: 177px;
        margin-top: 32px;
        flex-shrink: 0;
    }

    input[type="text"],
    textarea {
        margin-top: 32px;
    }

    input[name="name"] {
        margin-top: 0;
    }

    .form__parts--textArea {
        align-items: flex-start;
    }

    .form__parts--policy {
        justify-content: center;
    }
} /*  pc 769px */