/* 人事院特集専用。共通の feature.css は変更しない。 */
sup {
    vertical-align: super;
    font-size: smaller;
}
#jinjiin #feature_company_main {
    margin-top: 0;
}

#jinjiin .jinjiin-about {
    padding: 56px 0 0;;
}

#jinjiin .jinjiin-about {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    font-size: 16px;
    line-height: 1.89;
}

#jinjiin .feature_company_main_logo {
    width: 248px;
    border: 0;
    border-radius: 0;
}

#jinjiin #feature_company_contents .feature_company_main_logo img {
    width: 100%;
    height: auto;
    padding: 0;
}

#jinjiin .jinjiin-about-content {
    border-left: 1px solid #dedede;
    padding-left: 56px;
}

#jinjiin .jinjiin-about-content p{
    font-size: 18px;
}

#jinjiin .jinjiin-about h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 16px;
}

#jinjiin .jinjiin-intro {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

#jinjiin .jinjiin-eyebrow {
    color: #0b8b42;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

#jinjiin .jinjiin-intro h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.55;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

#jinjiin .jinjiin-intro h1 span {
    color: #0b8b42;
}

#jinjiin .jinjiin-lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.89;
    font-weight: 500;
}

#jinjiin .jinjiin-toc {
    background: #f2f8f1;
    border-radius: 12px;
    padding: 24px 24px;
}

#jinjiin .jinjiin-toc h2 {
    font-size: 18px;
    font-weight: 600;
    border-left: 4px solid #0b8b42;
    padding-left: 12px;
    margin-bottom: 20px;
    line-height: 1.5;
}

#jinjiin .jinjiin-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

#jinjiin .jinjiin-toc li + li {
    margin-top: 10px;
}

#jinjiin .jinjiin-toc a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}

#jinjiin .jinjiin-toc-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b552, #008a3e);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

#jinjiin .jinjiin-toc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #009d45;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 4px;
    padding-left: 2px;
}

#jinjiin .feature_company_main_body_parts {
    scroll-margin-top: 24px;
    padding-left: 0;
}

#jinjiin .feature_company_main_body_parts_title {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 32px);
    font-weight: 700;
}

#jinjiin .jinjiin-section-number {
    position: relative;
    flex: 0 0 auto;
    color: #009d45;
    font-family: Arial, sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    padding-right: 22px;
    margin-right: 18px;
    letter-spacing: -.04em;
}

#jinjiin .jinjiin-section-number::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 30px;
    background: #009d45;
    transform: translateY(-50%);
}

#jinjiin .jinjiin-section-heading {
    min-width: 0;
}

#jinjiin .feature_company_text {
    margin-top: 0;
}

#jinjiin .jinjiin-point {
    margin-top: 32px;
    background: #eff9f2;
    padding: 32px 40px;
    border-radius: 12px;
}

#jinjiin .jinjiin-point-label {
    color: #009d45;
    font-size: 17px;
    letter-spacing: .08em;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}

#jinjiin .jinjiin-point-title {
    color: #0B8B42;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0;
}

#jinjiin .jinjiin-point-head {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#jinjiin .jinjiin-point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b552, #008a3e);
    color: #fff;
}

#jinjiin .jinjiin-point-icon svg {
    width: 30px;
    height: 38px;
    display: block;
    overflow: visible;
}

#jinjiin .jinjiin-note {
    font-size: 14px;
    line-height: 1.75;
    margin-top: 16px;
}

#jinjiin .jinjiin-example {
    margin-top: 24px;
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 14px;
}

#jinjiin .jinjiin-note a,
#jinjiin .jinjiin-example a {
    color: #235c82;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jinjiin a:focus-visible {
    outline: 3px solid #0b8b42;
    outline-offset: 3px;
}

#jinjiin .feature_company_sub_backbtn {
    margin: 32px auto 30px;
}

@media screen and (max-width: 767px) {
    #jinjiin #feature_company_main {
        margin-top: 0;
    }

    #jinjiin .jinjiin-about {
        padding: 32px 0 0;
    }

    #jinjiin .jinjiin-about {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #jinjiin .feature_company_main_logo {
        margin: 0 auto;
        width: 200px;
    }

    #jinjiin .jinjiin-about-content {
        border-left: 0;
        border-top: 1px solid #dedede;
        padding: 28px 0 0;
    }

    #jinjiin .jinjiin-about h2 {
        font-size: 24px;
    }

    #jinjiin .jinjiin-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    #jinjiin .jinjiin-intro h1 {
        font-size: 28px;
    }

    #jinjiin .jinjiin-eyebrow {
        font-size: 14px;
    }

    #jinjiin .jinjiin-toc {
        padding: 20px 16px;
    }

    #jinjiin .feature_company_main_body_parts_title {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        max-width: calc(100% - 12px);
        padding-right: 12px;
    }

    #jinjiin .jinjiin-section-number {
        font-size: 44px;
        padding-right: 0;
        margin-right: 0;
    }

    #jinjiin .jinjiin-section-number::after {
        content: none;
    }

    #jinjiin .jinjiin-point-head {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
    }

    #jinjiin .jinjiin-point-icon {
        width: 48px;
        height: 48px;
    }

    #jinjiin .jinjiin-point-icon svg {
        width: 25px;
        height: 32px;
    }

    #jinjiin .jinjiin-point-label {
        font-size: 14px;
    }

    #jinjiin .jinjiin-toc a {
        grid-template-columns: 40px minmax(0, 1fr) 18px;
        gap: 10px;
        padding: 12px 8px;
    }

    #jinjiin .jinjiin-toc-number {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    #jinjiin .jinjiin-point {
        padding: 20px 16px;
        margin-top: 28px;
    }

    #jinjiin .jinjiin-point-title {
        font-size: 19px;
    }

    #jinjiin .jinjiin-example {
        padding: 16px;
    }

    #jinjiin .feature_company_sub_backbtn {
        width: auto;
    }

    #jinjiin .jinjiin-about-content p{
        font-size: 17px;
    }

    #jinjiin .jinjiin-note{
        font-size: 13px;
    }

}

/* 図表はHTMLで構成し、SPでは意味のまとまりごとに縦積みする。 */
#jinjiin .jinjiin-diagram {
    margin-top: 24px;
    line-height: 1.89;
}

#jinjiin .jinjiin-diagram-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    color: #235c82;
}

#jinjiin .jinjiin-blue {
    --diagram-color: #176197;
    --diagram-pale: #f0f6fb;
    --diagram-border: #c8dce9;
}

#jinjiin .jinjiin-green {
    --diagram-color: #287046;
    --diagram-pale: #f2f8f1;
    --diagram-border: #cddfce;
}

#jinjiin .jinjiin-category-group {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    border: 1px solid var(--diagram-border);
    border-radius: 8px;
    overflow: hidden;
}

#jinjiin .jinjiin-category-group + .jinjiin-category-group {
    margin-top: 16px;
}

#jinjiin .jinjiin-category-overview {
    padding: 24px 20px;
    background: var(--diagram-pale);
}

#jinjiin .jinjiin-category-overview h4 {
    font-size: 21px;
    font-weight: 700;
    color: var(--diagram-color);
    margin-bottom: 8px;
}

#jinjiin .jinjiin-category-overview p {
    font-size: 15px;
    line-height: 1.75;
}

#jinjiin .jinjiin-category-exams {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    background: #fff;
}

#jinjiin .jinjiin-exam {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#jinjiin .jinjiin-exam-label {
    background: var(--diagram-color);
    color: #fff;
    border-radius: 4px;
    padding: 6px 8px 8px;
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
    font-size: 17px;
}

#jinjiin .jinjiin-category {
    padding: 16px 12px;
    border: 1px solid var(--diagram-border);
    border-radius: 6px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#jinjiin .jinjiin-exam .jinjiin-category {
    margin-top: 8px;
}

#jinjiin .jinjiin-exam-other .jinjiin-category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    background: var(--diagram-pale);
}

#jinjiin .jinjiin-category h5 {
    color: var(--diagram-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 5px;
}

#jinjiin .jinjiin-category p {
    font-size: 15px;
    line-height: 1.75;
}

#jinjiin .jinjiin-span-all {
    grid-column: 1 / -1;
}

#jinjiin .jinjiin-comparison {
        width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid #d5dfe5;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    margin-top: 40px;
    line-height: 1.6;
}

#jinjiin .jinjiin-comparison th,
#jinjiin .jinjiin-comparison td {
    padding: 16px 20px;
    vertical-align: middle;
}

#jinjiin .jinjiin-comparison thead th {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: #176197;
}

#jinjiin .jinjiin-comparison thead th:first-child {
    width: 24%;
    color: #354b3c;
    background: #fff;
    font-size: 15px;
}

#jinjiin .jinjiin-comparison thead th:last-child {
    background: #287046;
}

#jinjiin .jinjiin-comparison tbody th {
    font-weight: 600;
    background: #f0f6fb;
}

#jinjiin .jinjiin-comparison tbody td {
    background: #fff;
    border-left: 1px solid #d5dfe5;
}

#jinjiin .jinjiin-comparison tbody tr + tr > * {
    border-top: 1px solid #d5dfe5;
}

#jinjiin .jinjiin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#jinjiin .jinjiin-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

#jinjiin .jinjiin-option {
    border: 1px solid var(--diagram-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

#jinjiin .jinjiin-option > h4 {
    background: var(--diagram-color);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 8px 16px;
}

#jinjiin .jinjiin-option-body {
    padding: 20px;
}

#jinjiin .jinjiin-option-copy {
    font-size: 17px;
    font-weight: 600;
    color: var(--diagram-color);
    margin-bottom: 16px;
}

#jinjiin .jinjiin-option dl {
    margin: 0;
}

#jinjiin .jinjiin-option dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--diagram-border);
}

#jinjiin .jinjiin-option dt {
    font-size: 14px;
}

#jinjiin .jinjiin-option dd {
    color: var(--diagram-color);
    font-weight: 600;
    margin: 0;
}

#jinjiin .jinjiin-option dd strong {
    font-size: 20px;
}

#jinjiin .jinjiin-option-recommend {
    margin-top: 8px;
    padding: 16px;
    background: var(--diagram-pale);
    border-radius: 6px;
}

#jinjiin .jinjiin-option-recommend h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

#jinjiin .jinjiin-option-recommend p {
    font-size: 14px;
}

#jinjiin .jinjiin-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#jinjiin .jinjiin-diagram .jinjiin-flow{
    margin-top: 40px;
}
#jinjiin .jinjiin-diagram.jinjiin-cases .jinjiin-flow{
    margin-top: 16px;
}

#jinjiin .jinjiin-flow > li {
    position: relative;
    min-width: 0;
    border: 1px solid #c8dce9;
    border-radius: 8px;
    padding: 16px 20px 20px;
    background: #fff;
}

#jinjiin .jinjiin-flow > li + li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #7194ad;
    border-right: 2px solid #7194ad;
    transform: translateY(-50%) rotate(45deg);
}

#jinjiin .jinjiin-flow-step {
    display: block;
    color: #617786;
    letter-spacing: .05em;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

#jinjiin .jinjiin-flow h4,
#jinjiin .jinjiin-flow h5 {
    color: #235c82;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 60px;
    margin-bottom: 8px;
}

#jinjiin .jinjiin-flow p {
    font-size: 15px;
    line-height: 1.75;
}

#jinjiin .jinjiin-case + .jinjiin-case {
    margin-top: 40px;
}

#jinjiin .jinjiin-case-title {
    display: flex;
    align-items: baseline;
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

#jinjiin .jinjiin-case-title span {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 4px;
    background: #0B8B42;
    color: #fff;
    font-size: 15px;
}

#jinjiin .jinjiin-cases .jinjiin-flow {
    gap: 24px;
}

#jinjiin .jinjiin-diagram.jinjiin-cases{
    margin-top: 40px;
}

/*#jinjiin .jinjiin-cases .jinjiin-flow > li {
    padding: 16px 12px;
}
*/
#jinjiin .jinjiin-cases .jinjiin-flow > li + li::before {
    left: -18px;
}

/*#jinjiin .jinjiin-cases .jinjiin-flow h5 {
    font-size: 16px;
    min-height: 48px;
}*/

#jinjiin section.jinjiin-case .jinjiin-flow h5{
    min-height: auto;
}

@media screen and (max-width: 767px) {
    #jinjiin .jinjiin-diagram-title {
        text-align: left;
        font-size: 17px;
    }

    #jinjiin .jinjiin-category-group,
    #jinjiin .jinjiin-category-exams,
    #jinjiin .jinjiin-options,
    #jinjiin .jinjiin-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    #jinjiin .jinjiin-category-overview {
        padding: 16px;
    }

    #jinjiin .jinjiin-category-exams {
        padding: 16px;
        gap: 16px;
    }

    #jinjiin .jinjiin-category {
        padding: 16px;
    }

    #jinjiin .jinjiin-category h5 br,
    #jinjiin .jinjiin-category p br {
        display: none;
    }

    #jinjiin .jinjiin-category p {
        font-size: 15px;
    }

    #jinjiin .jinjiin-comparison,
    #jinjiin .jinjiin-comparison tbody,
    #jinjiin .jinjiin-comparison tr,
    #jinjiin .jinjiin-comparison th,
    #jinjiin .jinjiin-comparison td {
        display: block;
        width: auto;
    }

    #jinjiin .jinjiin-comparison {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    #jinjiin .jinjiin-comparison thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #jinjiin .jinjiin-comparison tbody tr {
        border: 1px solid #d5dfe5;
        border-radius: 8px;
        overflow: hidden;
    }

    #jinjiin .jinjiin-comparison tbody tr + tr {
        margin-top: 20px;
    }

    #jinjiin .jinjiin-comparison tbody tr + tr > * {
        border-top: 0;
    }

    #jinjiin .jinjiin-comparison th,
    #jinjiin .jinjiin-comparison td {
        padding: 16px;
    }

    #jinjiin .jinjiin-comparison tbody th {
        font-size: 16px;
    }

    #jinjiin .jinjiin-comparison tbody td {
        border-left: 0;
    }

    #jinjiin .jinjiin-comparison tbody td + td {
        border-top: 1px solid #d5dfe5;
    }

    #jinjiin .jinjiin-comparison td::before {
        content: attr(data-label);
        display: block;
        color: #176197;
        font-weight: 700;
        margin-bottom: 6px;
    }

    #jinjiin .jinjiin-comparison td:last-child::before {
        color: #287046;
    }

    #jinjiin .jinjiin-option-body {
        padding: 16px;
    }

    #jinjiin .jinjiin-option dl > div {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    #jinjiin .jinjiin-flow,
    #jinjiin .jinjiin-cases .jinjiin-flow {
        gap: 28px;
    }

    #jinjiin .jinjiin-flow > li,
    #jinjiin .jinjiin-cases .jinjiin-flow > li {
        padding: 20px;
    }

    #jinjiin .jinjiin-flow > li + li::before,
    #jinjiin .jinjiin-cases .jinjiin-flow > li + li::before {
        top: -20px;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    #jinjiin .jinjiin-flow h4,
    #jinjiin .jinjiin-flow h5,
    #jinjiin .jinjiin-cases .jinjiin-flow h5 {
        min-height: 0;
        margin-bottom: 10px;
        font-size: 20px;
    }

    #jinjiin .jinjiin-flow p {
        font-size: 15px;
    }

    #jinjiin .jinjiin-case-title {
        display: block;
    }

    #jinjiin .jinjiin-case-title span {
        display: table;
        margin-bottom: 8px;
        line-height: 1.5;
        font-size: 14px;
    }

}

/* PPTXから切り出した透過PNG。背景色は各カードのCSSで指定。 */
#jinjiin .jinjiin-art {
    display: inline-block;
    flex-shrink: 0;
    max-width: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
}

#jinjiin .jinjiin-art--general {
    width: 48px;
    aspect-ratio: 46 / 40;
    background-image: url(/img/feature/government/jinjiin/art-general.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--regular {
    width: 48px;
    aspect-ratio: 46 / 40;
    background-image: url(/img/feature/government/jinjiin/art-regular.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--work {
    width: 32px;
    aspect-ratio: 39 / 45;
    background-image: url(/img/feature/government/jinjiin/art-work.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--field {
    width: 32px;
    aspect-ratio: 39 / 43;
    background-image: url(/img/feature/government/jinjiin/art-field.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--exam {
    width: 32px;
    aspect-ratio: 39 / 42;
    background-image: url(/img/feature/government/jinjiin/art-exam.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--engineering {
    width: 32px;
    aspect-ratio: 42 / 40;
    background-image: url(/img/feature/government/jinjiin/art-engineering.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--engineering-main {
    width: 116px;
    aspect-ratio: 132 / 137;
    background-image: url(/img/feature/government/jinjiin/art-engineering-main.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--culture-main {
    width: 116px;
    aspect-ratio: 127 / 130;
    background-image: url(/img/feature/government/jinjiin/art-culture-main.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--blue-exam {
    width: 30px;
    aspect-ratio: 46 / 45;
    background-image: url(/img/feature/government/jinjiin/art-blue-exam.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--blue-person {
    width: 30px;
    aspect-ratio: 47 / 46;
    background-image: url(/img/feature/government/jinjiin/art-blue-person.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--blue-office {
    width: 46px;
    aspect-ratio: 69 / 68;
    background-image: url(/img/feature/government/jinjiin/art-blue-office.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--green-exam {
    width: 30px;
    aspect-ratio: 45 / 45;
    background-image: url(/img/feature/government/jinjiin/art-green-exam.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--green-person {
    width: 30px;
    aspect-ratio: 46 / 46;
    background-image: url(/img/feature/government/jinjiin/art-green-person.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--green-office {
    width: 46px;
    aspect-ratio: 66 / 68;
    background-image: url(/img/feature/government/jinjiin/art-green-office.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--pencil {
    width: 78px;
    aspect-ratio: 84 / 78;
    background-image: url(/img/feature/government/jinjiin/art-pencil.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--pass {
    width: 78px;
    aspect-ratio: 82 / 81;
    background-image: url(/img/feature/government/jinjiin/art-pass.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--visit {
    width: 106px;
    aspect-ratio: 147 / 84;
    background-image: url(/img/feature/government/jinjiin/art-visit.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--office {
    width: 96px;
    aspect-ratio: 124 / 90;
    background-image: url(/img/feature/government/jinjiin/art-office.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--student {
    width: 128px;
    aspect-ratio: 125 / 104;
    background-image: url(/img/feature/government/jinjiin/art-student.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--graduate {
    width: 116px;
    aspect-ratio: 114 / 114;
    background-image: url(/img/feature/government/jinjiin/art-graduate.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--ministry {
    width: 150px;
    aspect-ratio: 180 / 103;
    background-image: url(/img/feature/government/jinjiin/art-ministry.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--hired {
    width: 150px;
    aspect-ratio: 185 / 105;
    background-image: url(/img/feature/government/jinjiin/art-hired.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-art--employee {
    width: 142px;
    aspect-ratio: 149 / 111;
    background-image: url(/img/feature/government/jinjiin/art-employee.png);
    background-size: contain;
    background-position: center;
}

#jinjiin .jinjiin-category-overview > .jinjiin-art {
    display: block;
    margin: 0 auto 16px;
}

#jinjiin .jinjiin-category-overview h4 {
    text-align: center;
}

#jinjiin .jinjiin-table-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

#jinjiin .jinjiin-art-slot {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
}

#jinjiin .jinjiin-cases .jinjiin-art-slot {
    height: 100px;
}

#jinjiin .jinjiin-option-facts {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

#jinjiin .jinjiin-option dt {
    display: flex;
    align-items: center;
    gap: 8px;
}

#jinjiin .jinjiin-option dl > div {
    display: block;
}

#jinjiin .jinjiin-option dd {
    padding-left: 38px;
}

#jinjiin .jinjiin-option-recommend h5 {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 767px) {
    #jinjiin .jinjiin-category-overview > .jinjiin-art {
        float: left;
        margin: 0 12px 8px 0;
    }

    #jinjiin .jinjiin-category-overview h4 {
        text-align: left;
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    #jinjiin .jinjiin-category-overview p {
        clear: both;
    }

    #jinjiin .jinjiin-option-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    #jinjiin .jinjiin-option-facts > .jinjiin-art {
        margin: 0 auto;
    }

    #jinjiin .jinjiin-option dl > div {
        display: flex;
    }

    #jinjiin .jinjiin-option dd {
        padding-left: 0;
    }

}

/* 工学区分・教養区分：元図のアイコンと文章の配置に合わせる */
#jinjiin .jinjiin-options {
    position: relative;
    gap: 48px;
}

#jinjiin .jinjiin-options::before {
    content: "↔";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    color: #46515c;
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

#jinjiin .jinjiin-option.jinjiin-blue {
    --diagram-color: #10458f;
    --diagram-border: #cddff0;
}

#jinjiin .jinjiin-option.jinjiin-green {
    --diagram-color: #477635;
    --diagram-border: #dbe8d2;
}

#jinjiin .jinjiin-option {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
}

#jinjiin .jinjiin-option-copy {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

#jinjiin .jinjiin-option-facts {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
}

#jinjiin .jinjiin-option-facts > .jinjiin-art {
    width: 100%;
    max-width: 150px;
    justify-self: center;
}

#jinjiin .jinjiin-option dl > div {
    position: relative;
    display: block;
    padding: 16px 0 16px 52px;
    border-top: 0;
}

#jinjiin .jinjiin-option dl > div + div {
    border-top: 2px dotted var(--diagram-border);
}

#jinjiin .jinjiin-option dt {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 4px;
}

#jinjiin .jinjiin-option dt > .jinjiin-art {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
}

#jinjiin .jinjiin-option dd {
    padding-left: 0;
    font-size: 16px;
    line-height: 1.5;
}

#jinjiin .jinjiin-option dl > div:first-child dd,
#jinjiin .jinjiin-option dd strong {
    font-size: 24px;
    font-weight: 700;
}

#jinjiin .jinjiin-option-recommend {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 0 0;
    border-top: 2px dotted var(--diagram-border);
    border-radius: 0;
    background: transparent;
}

#jinjiin .jinjiin-option-recommend > .jinjiin-art {
    width: 68px;
}

#jinjiin .jinjiin-option-recommend h5 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 6px;
}

#jinjiin .jinjiin-option-recommend p {
    font-size: 14px;
    line-height: 1.8;
}

@media screen and (max-width: 767px) {
    #jinjiin .jinjiin-options {
        gap: 24px;
    }

    #jinjiin .jinjiin-options::before {
        content: none;
    }

    #jinjiin .jinjiin-option-copy {
        font-size: 17px;
    }

    #jinjiin .jinjiin-option-facts {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: 12px;
    }

    #jinjiin .jinjiin-option dl > div {
        padding: 12px 0 12px 40px;
    }

    #jinjiin .jinjiin-option dt {
        font-size: 13px;
    }

    #jinjiin .jinjiin-option dt > .jinjiin-art {
        width: 32px;
    }

    #jinjiin .jinjiin-option dd {
        font-size: 14px;
    }

    #jinjiin .jinjiin-option dl > div:first-child dd,
    #jinjiin .jinjiin-option dd strong {
        font-size: 20px;
    }

    #jinjiin .jinjiin-option-recommend {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    #jinjiin .jinjiin-option-recommend > .jinjiin-art {
        width: 52px;
    }

    #jinjiin .jinjiin-option-recommend h5 {
        font-size: 15px;
    }

    .feature_company_main_body_parts_head:after{
        top: 20%;
    }
}

#jinjiin .jinjiin-option dl > div + div dd {
    color: #1a1a1a;
}

#jinjiin .jinjiin-option dd strong {
    display: inline-block;
    white-space: nowrap;
    color: var(--diagram-color);
}