/*縦書き*/
.content-title {
    font-size: calc(var(--responsive-val) * 4.8);
    font-weight: 500;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: var(--gray-title-color);
    position: absolute;
}


.kv-container::before,
.Achievements-area::before,
.strengths-area::before {
    content: "";
    width: 1px;
    background-color: #555555;
    position: absolute;
    top: 0;
    right: 7.5%;
    height: 100%;
}

.Achievements-area::after,
.strengths-area::after,
.Support-area::after {
    content: "";
    width: 1px;
    background-color: #555555;
    position: absolute;
    top: 0;
    left: 8%;
    height: 100%;
}

.kv-container::before {
    top: auto;
    bottom: 0;
    height: 38%;
}

.strengths-area::before {
    display: none;
}

.Achievements-area::after {
    height: 54%;
    bottom: 0;
    top: auto;
}

.Support-area::after {
    height: 64%;
}

.bg-container::after {
    content: "";
    width: 1px;
    background-color: #555555;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.top-area {
    position: relative;
}

.top-area::after {
    content: "";
    width: 1px;
    height: 25%;
    position: absolute;
    top: 0;
    left: 8%;
    z-index: 100;
    background: #000;
}

.top-area::before {
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    top: 0;
    width: 100%;
    height: 53%;
    z-index: -1;
}

.kv-container .content-title,
.strengths-area .content-title {
    right: 5%;
}

.kv-container .content-title {
    top: 11rem;
}

.strengths-area .content-title {
    bottom: 10rem;
}

.top-title {
    width: 76%;
    margin: 0 auto;
    padding: 0 0 4%;
    max-width: 1440px;
    position: relative;
}

.top-title h2 {
    font-weight: 500;
    margin-bottom: 1rem;
}

.top-title p {
    font-size: calc(var(--responsive-val)*1.6);
}

.kv-area {
    display: flex;
    gap: calc(var(--responsive-val)*7);
    width: 90%;
}

.kv-container {
    border-top: 1px solid #555;
    padding: 11rem 0 12rem;
    position: relative;
}

.kv-container .content-title p {
    padding: 0% 0 12%;
    height: 100%;
    box-sizing: content-box;
}

.kv-photo {
    width: 54%;
}

.text-detail {
    width: 46%;
}

.text-detail h1 {
    font-weight: 500;
    margin-bottom: 2rem;
}

.text-detail p {
    font-size: calc(var(--responsive-val)*1.6);
    width: 78%;
}

.text-detail p span {
    margin-bottom: 1.5rem;
    display: block;
}

/*実績*/

.Achievements-area {
    border-top: 1px solid;
    padding: 10rem 0 7rem;
    position: relative;
}

.Achievements-bg,
.Support-bg {
    position: relative;
}

.Achievements-bg::after,
.Support-bg::after {
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    top: 0;
    width: 90%;
    height: 43%;
    z-index: -1;
}

.Support-bg::after {
    right: 0;
}

.Achievements-width {
    display: flex;
    justify-content: center;
    position: relative;
    gap: calc(var(--responsive-val)*9);
    width: 80%;
    margin: 0 auto;
    padding-left: 5rem;
}

.Achievements-area .content-title {
    position: absolute;
    left: 5%;
    transform: scale(-1, -1);
}

.Achievements-title {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.Achievements-title h2,
.Achievements-detail p:first-child {
    margin: 0 0 0 2%;
}

.Achievements-title h2 {
    font-weight: 500;
}

.Achievements-detail {
    font-size: calc(var(--responsive-val)*1.6);
}

.Achievements-list {
    display: flex;
    max-width: 823px;
    gap: calc(var(--responsive-val)*2);
    flex-wrap: wrap;
}

.Achievements-list li {
    width: calc(50% - calc(var(--responsive-val) * 1));
    background-color: #fff;
    border: 1px solid #C7C7C7;
    padding: 6% 5% 4%;
}

.Achievements-list dt {
    font-size: calc(var(--responsive-val)*2.8);
    font-weight: 500;
    text-align: center;
    margin-bottom: 5%;
}

.Achievements-list dt span {
    font-size: 0.4em;
    vertical-align: text-top;
}

.Achievements-list dd {
    font-size: calc(var(--responsive-val)*1.6);
}

.Achievements-list dd span {
       font-size: calc(var(--responsive-val)*1.1);
}

.Achievements-list dd span .note {
    font-size: 0.8em;
}

.Achievements-list li:nth-child(1) .icon-box {
    width: 18%;
}

.Achievements-list li:nth-child(2) .icon-box {
    width: 20%;
}

.Achievements-list li:nth-child(3) .icon-box {
    width: 23%;
}

.Achievements-list li:nth-child(4) .icon-box {
    width: 20%;
}

.icon-box {
    width: 20%;
    margin: 0 auto 15%;
}

/*strengths*/

.strengths-area {
    border-top: 1px solid #555;
    padding: 11rem 0 10rem;
    position: relative;
}

.strengths-width {
    width: 80%;
    display: flex;
    margin: 0 auto;
    max-width: 1100px;
    gap: calc(var(--responsive-val)*5);
}

.strengths-title {
    width: 40%;
}

.site-container h2 {
    font-weight: 500;
}

.strengths-title p {
    font-size: calc(var(--responsive-val)*1.6);
    line-height: 2;
}

.strengths-list {
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
}

.strengths-list:last-child {
    margin-bottom: 0;
}

.strengths-photo {
    width: 40%;
}

.strengths-list_title {
    background-color: #f5f5f5;
    display: flex;
    align-items: flex-start;
    padding: 0 5%;
    flex-direction: column;
    justify-content: center;
    width: 60%;
}

.strengths-list_title dt {
    font-size: calc(var(--responsive-val)*3);
    font-weight: 500;
    margin-bottom: 1rem;
}

.strengths-list_title dd {
    font-size: calc(var(--responsive-val)*1.6);
}

/*Support*/

.Support-area {
    padding: 5rem 0 12rem;
    border-top: 1px solid #555555;
    position: relative;
}

.Support-area::before {
    left: auto;
    right: 0;
    height: 55%;
}

.Support-area .content-title {
    bottom: 10rem;
    left: 5%;
    transform: scale(-1, -1);
}

.Support-area h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.Support-detail {
    font-size: calc(var(--responsive-val)*1.6);
    width: 50%;
    margin: 0 auto 4rem;
    line-height: 2;
}

.Support-list {
    width: 80%;
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
}

.Support-list ul {
    display: flex;
    gap: calc(var(--responsive-val)*2);
}

.Support-list li {
    width: 100%;
}

.Support-photo {
    margin-bottom: 2rem;
}

.Support-list ul dt {
    font-size: calc(var(--responsive-val)*2.8);
    font-weight: 500;
    text-align: center;
    color: var(--blue-color);
    margin-bottom: 1rem;
}

.Support-list ul dd {
    font-size: calc(var(--responsive-val)*1.6);
}

/*evaluation*/

.evaluation-area {
    background-color: var(--bg-color);
    padding: 5rem 0 10rem;
    position: relative;
}

.evaluation-area h2 {
    text-align: center;
    margin-bottom: 2rem;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
}

.evaluation-detail {
    font-size: calc(var(--responsive-val)*1.6);
    width: 55%;
    margin: 0 auto 3rem;
    line-height: 2;
}

.evaluation-list {
    display: flex;
    max-width: 1100px;
    gap: calc(var(--responsive-val)*2);
    margin: 0 auto;
    width: 80%;
}

.evaluation-list li {
    width: 100%;
    background-color: #fff;
    padding: 4rem 0 2rem;
}

.evaluation-text {
    text-align: center;
    font-size: calc(var(--responsive-val)*2);
}

.evaluation-photo {
    margin: 0 auto 5%;
}

.evaluation-list li:nth-child(1) .evaluation-photo {
    width: 50%;
}

.evaluation-list li:nth-child(2) .evaluation-photo {
    width: 60%;
}

.evaluation-list li:nth-child(3) .evaluation-photo {
    width: 60%;
}


@media screen and (max-width: 768px) {
    .site-container h1, .site-container h2, .site-container h3, .site-container h4 {
        font-size: calc(var(--responsive-val) * 2.5);
        margin-bottom: 1rem;
    }

    .top-title p {
    font-size: calc(var(--responsive-val) * 1.4);
    }
    
    .kv-container {
        padding: 1rem 0 5rem;
    }

    .kv-area {
        gap: calc(var(--responsive-val) * 1);
        width: 90%;
        flex-direction: column;
        margin: 0 0 0 auto;
    }
    
    .Strengths-container .content-title {
        transform: unset;
        top: auto;
        position: unset;
        writing-mode: unset;
        order: 1;
        font-size: calc(var(--responsive-val)*3.5);
        width: 80%;
        margin: auto;
    }

    .kv-container .content-title {
        margin: 0;
    }

    .kv-container .content-title p {
        padding: 0;
    }
    
    .kv-photo {
        width: 100%;
        order: 2;
    }

    .text-detail {
        width: 100%;
        order: 3;
    }

    .text-detail p {
    font-size: calc(var(--responsive-val) * 1.4);
    width: 85%;
}

    .text-detail h1 {
        margin-bottom: 1rem;
        letter-spacing: -1px;
    }

    /*Achievements*/

    .Achievements-area {
        padding: 5rem 0 5rem;
    }

    .Achievements-area::before {
        height: 75%;
    }

    .Achievements-area::after {
        height: 17%;
    }

    .Achievements-bg::after, .Support-bg::after {
        width: 80%;
        height: 90%;
    }

    .Achievements-width {
        gap: calc(var(--responsive-val) * 4);
        width: 80%;
        flex-direction: column-reverse;
        padding: 0;
    }

    .Achievements-title {
        -ms-writing-mode: tb-rl;
        writing-mode: unset;
    }

    .Achievements-list {
        flex-direction: column;
    }

    .Achievements-list li {
        width: 100%;
        padding: 15% 5% 5%;
    }

    .Achievements-detail {
        font-size: calc(var(--responsive-val) * 1.4);
    }

    .Achievements-list dt {
        font-size: calc(var(--responsive-val) * 2);
    }

    .Achievements-list dd {
    font-size: calc(var(--responsive-val) * 1.4);
}

    /*strengths*/

    .strengths-width {
    flex-direction: column;
    gap: 0;
    }

    .strengths-title {
        width: 100%;
        order: 2;
        margin-bottom: 1rem;
    }

    .strengths-content {
        order: 3;
    }

    .strengths-area .content-title {
        order: 1;
        margin: 0;
    }

    .strengths-list_title dt {
        font-size: calc(var(--responsive-val) * 2);
    }

    .strengths-area {
        padding: 5rem 0;
    }

    .strengths-list {
        margin-bottom: 2rem;
        flex-direction: column-reverse;
    }

    .strengths-photo {
        width: 100%;
    }

    .strengths-list_title {
        width: 100%;
        padding: 1rem 5%;
    }

    .strengths-list_title dd {
        font-size: calc(var(--responsive-val) * 1.4);
    }

    /*Support*/

    .Support-area {
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
    }

    .Support-area h2 {
        order: 2;
        width: 80%;
        text-align: left;
        margin: 0 auto;
    }

    .Support-list ul dt {
    font-size: calc(var(--responsive-val) * 2.4);
}

    .Support-area .Support-detail {
        order: 3;
    }

    .Support-area .Support-list {
        order: 4;
    }

    .Support-area .content-title {
        order: 1;
    }

    .Support-detail {
        font-size: calc(var(--responsive-val) * 1.4);
        width: 80%;
        margin: 0 auto 2rem;
    }

    .Support-list ul {
        flex-direction: column;
        gap: calc(var(--responsive-val) * 4);
    }

    .Support-photo {
        margin-bottom: 1rem;
    }

    /*evaluation*/

    .evaluation-area {
        padding: 5rem 0;
    }

    .evaluation-area h2 {
        width: 100%;
        top: -1rem;
    }

    .evaluation-detail {
        font-size: calc(var(--responsive-val) * 1.4);
        width: 80%;
        margin-bottom: 2rem;
    }

    .evaluation-list {
    gap: calc(var(--responsive-val) * 2);
    width: 80%;
    flex-direction: column;
}
}