@charset "UTF-8";

html {
    scroll-behavior: smooth;
}
.detail.interview_archive .middle_maintitle {
    background: #DEFFF4;
    color: #00A282;
    overflow: hidden;
}

.detail.interview_archive .middle_maintitle h2 {
    position: relative;
    height: 300px;
}

.detail.interview_archive .middle_maintitle h2::before {
    content: "";
    max-width: 287px;
    max-height: 205px;
    width: 40%;
    height: 100%;
    background: url("../img/interview/interview_ttl.png") no-repeat center bottom;
    background-size: contain;
    position: absolute;
    bottom: 0%;
    right: -13%;
}

.detail.interview_archive .middle_ttl01 {
    color: #00b3bf;
}

.graph_block .graph_block_dl {
    max-width: 1200px;
    box-shadow: none;
}

.detail.interview_archive .middle_maintitle h2 span span {
    text-align: center;
    display: block;
    font-size: 60%;
}

.detail.interview_archive .middle_ttl01 span::after {
    background: #00b3bf;
}

.page_btn_block .contents_inner span.active_btn {
    width: 23%;
    min-width: 300px;
    max-width: 400px;
    height: 60px;
    line-height: 57px;
    display: block;
    text-align: center;
    font-size: 1.2em;
    text-decoration: none;
    background: #E95383;
    color: #fff;
    border-radius: 50px;
    margin: 1em 0.5em;
    position: relative;
    letter-spacing: 3px;
    border: 3px solid #E95383;
    font-weight: 600;
    letter-spacing: 1px;
}

.detail.interview_archive .middle_ttl01 {
    color: #333;
}

.detail.interview_archive .contents_inner:last-of-type {
    max-width: 1400px;
    flex-wrap: wrap;
}


@media screen and (max-width: 1510px) {
    .detail.interview_archive .middle_maintitle h2::before {
        right: 0%;
        width: 33%;
        max-width: 150px;
    }
}

@media screen and (max-width: 768px) {
    .detail.interview_archive .middle_maintitle h2 {
        position: relative;
        height: auto;
        padding: 2em 0 4em;
    }
    .detail.interview_archive .middle_maintitle h2::before {
        width: 33%;
    }

    .wide_960 {
        width: 100%;
    }

    .graph_block .graph_block_dl {
        padding: 3em 0 2em;
    }
}

.middle_maintitle h2 {
    font-size: 40px;
}

.business_interview .middle_maintitle {
    margin-bottom: 60px;
}

.interview_list.base_green {
  --base-color: #00A282;
}
.interview_list.base_blue {
  --base-color: #00A0C4;
}
.interview_list.base_purple {
  --base-color: #8577A4;
}

.contents_inner {
    padding: 50px 0 90px;
}

.archive_description p {
    font-size: 20px;
}

.business_interview .interview_list:last-of-type {
    border-bottom: 1px solid #CCC;
}

.interview_list .list_ttl {
    background: url('../img/interview/interview_list_ttl_bg_green.png') no-repeat center / cover;
    background-color: rgba(0, 162, 130, 0.10);
}
.interview_list.base_blue .list_ttl {
    background: url('../img/interview/interview_list_ttl_bg_blue.png') no-repeat center / cover;
    background-color: #E4F2F7;
}
.interview_list.base_purple .list_ttl {
    background: url('../img/interview/interview_list_ttl_bg_purple.png') no-repeat center / cover;
    background-color: #EDEBF3;
}

.list_ttl {
    padding: 30px 0 50px;
    font-size: 42px;
    font-weight: 700;
}
.list_ttl span {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding-bottom: 10px;
    border-bottom: 6px solid var(--base-color);
}
.list_label {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--base-color);
    font-size: 26px;
    color: var(--base-color);
}
.interview_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.business_interview .interview_list ul {
    justify-content: center;
}
.interview_list ul:not(:last-of-type) {
    margin-bottom: 50px;
}
.interview_list ul li {
    width: calc((100% - 60px) / 3);
}
.interview_list ul li a {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 30px 17px;
    border-radius: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid rgba(0, 162, 130, 0.30);
}
.interview_list ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 17px;
    height: 18px;
    background: url('../img/common/arrow_green.svg') no-repeat center / cover;
}
.interview_list ul li a span {
    display: inline-block;
}
.interview_list ul li a span.mini {
    font-size: 16px;
}
.interview_list.base_blue ul li a {
    border: 2px solid rgba(0, 160, 196, 0.30);
}
.interview_list.base_purple ul li a {
    border: 2px solid rgba(133, 119, 164, 0.30);
}
.interview_list.base_blue ul li a::before {
    background: url('../img/common/arrow_blue.svg') no-repeat center / cover;
}
.interview_list.base_purple ul li a::before {
    background: url('../img/common/arrow_purple_02.svg') no-repeat center / cover;
}

.pdf_thumb {
    background: #00AF8D;
}
a.pdf_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    height: unset;
    line-height: 1.4;
    max-width: 600px;
}
.pdf_thumb img {
    display: block;
    width: 42vw;
    max-width: 607px;
    margin-inline: auto;
}

@media screen and (min-width: 768px) and (max-width: 1179px) {
    .interview_list ul li {
        width: calc((100% - 30px) / 2);
    }
    .interview_list ul li a {
        font-size: 16px;
    }
}
@media screen and (max-width: 767px) {
    .middle_maintitle h2 {
        font-size: 5vw;
    }
    .list_ttl {
        font-size: 32px;
    }
    .list_label {
        font-size: 22px;
    }
    .archive_description p {
        font-size: 16px;
    }
    .interview_list ul li {
        width: 100%;
    }
    .interview_list ul li a {
        font-size: 14px;
    }
    .pdf_btn {
        border-radius: 80px;
    }
    .pdf_thumb img {
        width: 70%;
    }
}