@charset "utf-8";
/*共通設定*/
/*終わり*/  


/*<section class="under-fv">*/
.under-fv {
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(../img/about/fv.png);
}
/*終わり*/


/*<section class="design">*/
.design {
    background-color: #f9f9f9;
}

.design-h2 {
    font-weight: 600;
    font-size: 32px;
    color: #19A199;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.design-h2::before,
.design-h2::after {
    content: "";
    width: 48px;
    height: 1px;
    background: #81CBC7;
}

.design-lead-txt {
    margin-top: 64px;
    text-align: center;
}

.design-flex {
    margin-top: 64px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}

.design-con {
    max-width: 300px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    border-radius: 8px;
}

.design-h3 {
    background-color: #81CBC7;
    color: #fff;
    text-align: center;
    border-radius: 8px 8px 0 0;
    font-size: 18px;
    font-weight: 600;
    padding: 8px;
}

.design-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px;
}

.design-icon {
    max-width: 120px;
    width: 100%;
}

.design-txt {
    padding: 16px;
    font-size: 16px;
}
/*終わり*/


/*<section class="message">*/
.message {
    background-color: #f9f9f9;
}

.message-in {
    padding: 64px 40px;
    background-color: #fff;
    border-radius: 16px;
}

.message-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.message-img-wrap {
    width: 30%;
}

.message-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.message-txt-wrap {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message-name {
    margin-top: 24px;
    text-align: right;
}
/*終わり*/


/*<section class="staff">*/
.staff-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.staff-con-l {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.staff-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.hobby-txt-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: solid 2px #81CBC7;
    border-radius: 8px;
    padding: 16px;
}

.hobby-title {
    font-weight: 600;
    font-size: 18px;
    color: #81CBC7;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.hobby-title::before,
.hobby-title::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #81CBC7;
}

.hobby-ul {
    margin-top: 8px;
}

.hobby-ul li {
    font-size: 16px;
    display: flex;
}

.staff-con-r {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.staff-name-01 {
    font-size: 16px;
}

.staff-name-02 {
    color: #81CBC7;
    font-weight: 600;
    font-size: 32px;
}

.staff-name-02 small {
    font-size: 24px;
    padding-left: 16px;
}

.staff-txt-01 {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 16px;
}

.staff-txt-02 {
    font-size: 16px;
}
/*終わり*/


/*<section class="company">*/
.company {
    background-color: #f9f9f9;
}

.company-in {
    max-width: 1000px;
}

.company-dl-wrap {
    background-color: #fff;
    border-radius: 16px;
    padding: 40px;
}

.company-dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.company-dl dt {
    width: 25%;
    padding: 16px 24px;
    background-color: #f9f9f9;
    margin-bottom: 24px;
    border-radius: 8px 0 0 8px;
    color: #81CBC7;
    font-weight: 600;
}

.company-dl dd {
    width: 75%;
    padding: 16px;
    background-color: #f9f9f9;
    margin-bottom: 24px;
    border-radius: 0 8px 8px 0;
}

.access-wrap {
    background-color: #f9f9f9;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.access-txt-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.access-txt-01 {
    color: #81CBC7;
    font-size: 20px;
    font-weight: 600;
}

.map-wrap {
    width: 50%;
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
/*終わり*/


/*<section class="mission">*/
.mission-in {
    max-width: 1000px;
    padding: 64px 40px;
    background: linear-gradient(135deg, #81CBC7 4%, #19A199 80%);
    border-radius: 16px;
}

.mission .h2-txt {
    color: #fff;
}

.mission .h2-title {
    color: #fff;
}

.mission .h2-title::before {
    border-bottom: solid 3px #fff;
}

.mission-txt {
    text-align: center;
    color: #fff;
    font-size: 20px;
}
/*終わり*/


/*<section class="action">*/
.action {
    padding: 0 5vw 80px 5vw;
}

.action-in {
    max-width: 1000px;
    padding: 64px 40px;
    background: #EEFBFA;
    border-radius: 16px;
}

.action-ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-ul li {
    display: flex;
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
/*終わり*/


/*<section class="design">*/
    .design-h2 {
        font-size: clamp(24px, 32vw / 10.24, 32px);
    }

    .design-con {
        max-width: 250px;
    }
/*終わり*/


/*<section class="message">*/
    .message-flex {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .message-img-wrap {
        width: 100%;
    }

    .message-txt-wrap {
        width: 100%;
    }

    .message-name {
        margin: 24px auto 0 auto;
        max-width: 600px;
        width: 100%;
    }
/*終わり*/


/*<section class="staff">*/
    .staff-flex {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        gap: 40px;
    }

    .staff-con-l {
        width: 100%;
        display: contents;
    }

    .staff-img-wrap {
        order: 1;
    }

    .hobby-txt-area {
        order: 3;
        width: 100%;
    }

    .staff-con-r {
        width: 100%;
        order: 2;
    }
/*終わり*/


/*<section class="company">*/
    .company-dl {
        flex-direction: column;
    }

    .company-dl dt {
        width: 100%;
        padding: 16px;
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .company-dl dd {
        width: 100%;
        padding: 0 16px 16px 16px;
        margin-bottom: 16px;
        border-radius: 0 0 8px 8px;
    }

    .access-wrap {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .access-txt-wrap {
        width: 100%;
    }

    .map-wrap {
        width: 100%;
        height: clamp(240px, 320vw / 10.24, 320px);
    }
/*終わり*/


/*<section class="mission">*/
/*終わり*/


/*<section class="action">*/
/*終わり*/
}


/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
/*終わり*/


/*<section class="design">*/
    .design-h2 {
        font-size: clamp(20px, 32vw / 5.99, 24px);
        text-align: center;
    }

    .design-lead-txt {
        text-align: left;
        margin-top: clamp(40px, 64vw / 5.99, 64px);
    }

    .design-flex {
        margin-top: clamp(40px, 64vw / 5.99, 64px);
        gap: clamp(24px, 40vw / 5.99, 40px);
    }

    .design-con {
        max-width: none;
    }

    .design-icon {
        max-width: clamp(100px, 120vw / 5.99, 120px);
    }
/*終わり*/


/*<section class="message">*/
    .message-in {
        padding: clamp(40px, 64vw / 5.99, 64px) clamp(16px, 32vw / 5.99, 32px);
    }
/*終わり*/


/*<section class="staff">*/
    .staff-name-02 {
        font-size: clamp(24px, 32vw / 5.99, 32px);
    }

    .staff-name-02 small {
        font-size: clamp(18px, 24vw / 5.99, 24px);
    }

    .staff-txt-01 {
        font-size: clamp(18px, 24vw / 5.99, 24px);
    }
/*終わり*/


/*<section class="company">*/
    .company-dl-wrap {
        padding: clamp(16px, 40vw / 5.99, 40px) clamp(8px, 32vw / 5.99, 32px);
    }

    .company-dl dt {
        padding: 16px;
    }

    .access-wrap {
        padding: 16px;
    }
/*終わり*/


/*<section class="mission">*/
    .mission-in {
        padding: clamp(40px, 64vw / 5.99, 64px) clamp(16px, 32vw / 5.99, 32px);
    }

    .mission-txt {
        font-size: clamp(16px, 20vw / 5.99, 20px);
    }
/*終わり*/


/*<section class="action">*/
    .action-in {
        padding: clamp(40px, 64vw / 5.99, 64px) clamp(16px, 32vw / 5.99, 32px);
    }
/*終わり*/
}