@charset "utf-8";
body {
    font-family: "Noto Sans JP", sans-serif !important;
}
.achieve-wrapper {
    width: min(92%, 1166px);
    margin: auto;
}

.achieve-wrapper h1 {
    font-size: clamp(26px, 3.8vw, 38px);
    color: #054ea1;
    text-align: center;
    margin: 100px 0;
}

.achieve-wrapper h2 {
    font-size: clamp(26px, 3.0vw, 42px);
    font-weight: 900;
    line-height: 1.6;
    text-align: center;
    margin: 30px 0;
}

.achieve-wrapper h2 span {
    font-size: 120%;
}


/* achieve01 */

.achieve01 h2 {
    color: #172a88;
}

.achieve-container {
    padding: 50px 0;
    border-radius: 30px;
}

.achieve01 .achieve-container {
    background-color: #d3edfb;
}

.achieve-container p {
    color: #333;
    font-size: clamp(14px, 2.4vw, 16px);
    font-weight: 500;
    line-height: 1.7;
    padding: 0 50px 30px;
    margin: 0;
}

.achieve01 .achieve-img {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    margin: 0 auto;
}

.achieve-img img {
    width: 100%;
}

@media (max-width: 480px) {
    .achieve-wrapper h1 {
        margin: 60px 0;
    }
    .achieve-container {
        padding: 30px 0;
    }
    .achieve-container p {
        padding: 0 20px 20px;
    }
    .achieve01 .achieve-img {
        width: 70%;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
}

/* achieve02 */

.achieve02 h2 {
    color: #e77600;
}

.achieve02 .achieve-container {
    background-color: #ffeec0;
}

.achieve02 .achieve-img {
    width: 80%;
    margin: 0 auto;
}

/* achieve03 */

.achieve03 h2 {
    color: #67468f;
}

.achieve03 .achieve-container {
    background-color: #fde9d9;
}
.achieve03 .achieve-img {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    margin: 0 auto;
}

.achieve-list ul {
    font-weight: 600;
    font-size: 2rem;
    margin: 0;
}

.achieve-list ul li:not(:last-child) {
    margin-bottom: 20px;
}

.achieve-list ul li span {
    font-weight: 900;
    font-size: 2.5rem;
}

.achieve03 .achieve-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 10% 0;
}

.achieve03 .achieve-list img {
    width: 12%
}

.achieve03 .achieve-list ul li::marker{
    color: #67468f;
}

.achieve03 .achieve-list ul li span {
    color: #67468f;
}

.achieve-list ul li span.f-small {
    color: #333;
    font-size: 70%;
    font-weight: 500;
}

@media (max-width: 480px) {
    .achieve03 .achieve-img {
        width: 70%;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
    .achieve03 .achieve-list {
        flex-direction: column;
        justify-content: center;
        align-items: end;
        gap: 0;
        margin: 30px 10px 0;
    }
    .achieve03 .achieve-list img {
        width: 25%;
        margin-right: 20px;
        margin-top: 20px;
    }
    .achieve-list ul {
        font-size: 1.5rem;
        margin: 0;
        padding: 0 10px 0 20px;
    }
    .achieve-list ul li span {
        font-size: 1.8rem;
    }
}

/* achieve04 */
.achieve04 h2 {
    color: #009b91;
}

.achieve04 .achieve-container {
    background-color: #fbf9c6;
}

.achieve04 .achieve-list ul li::marker{
    color: #009b91;
}

.achieve04 .achieve-list ul li span {
    color: #009b91;
}

.achieve04 .achieve-list {
    margin: 0 50px 30px;
}

.achieve04 .achieve-img {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto;
}

.achieve04 .achieve-img figcaption {
    margin: 5px 0 0 40px;
}

@media (max-width: 480px) {
    .achieve04 .achieve-img {
        width: 70%;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
        margin-top: 30px;
    }
    .achieve04 .achieve-list {
        font-size: 1.5rem;
        margin: 0;
        padding: 0 10px 0 20px;
    }
}

/* achieve05 */
.achieve05 h2 {
    color: #006934;
}

.achieve05 .achieve-container {
    background-color: #ecf3cf;
}

.achieve05 .achieve-list ul li::marker{
    color: #006934;
}

.achieve05 .achieve-list ul li span {
    color: #006934;
}

.achieve05 .achieve-list {
    margin: 0 50px 30px;
}

.achieve05 .achieve-img {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 20px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.achieve05 .achieve-img img {
    width: 45%;
}

@media (max-width: 480px) {
    .achieve05 .achieve-img {
        width: 70%;
        flex-direction: column;
        gap: 20px;
    }
    .achieve05 .achieve-list {
        font-size: 1.5rem;
        margin: 0;
        padding: 0 10px 0 20px;
    }
    .achieve05 .achieve-img img {
        width:100%;
    }
}