@charset "UTF-8";

/* CSS変数========================================================= */
:root {
    /* サイズ */
    --2px: 0.125px;
    --4px: 0.25rem;
    --6px: 0.375rem;
    --8px: 0.5rem;
    --10px: 0.625rem;
    --12px: 0.75rem;
    --14px: 0.875rem;
    --16px: 1rem;
    --18px: 1.125rem;
    --20px: 1.25rem;
    --24px: 1.5rem;
    --28px: 1.75rem;
    --32px: 2rem;
    --36px: 2.25rem;
    --40px: 2.5rem;
    --48px: 3rem;
    --56px: 3.5rem;
    --64px: 4rem;
    --80px: 5rem;
    --96px: 6rem;
    --100px: 6.25rem;
    --120px: 7.5rem;
    --140px: 8.75rem;
    --160px: 10rem;
    --180px: 11.25rem;
    --200px: 12.5rem;
    --250px: 15.625rem;
    --270px: 16.785rem;
    --360px: 22.5rem;
    --480px: 30rem;
    --560px: 35rem;
    --640px: 40rem;
    --800px: 50rem;
    --960px: 60rem;

    /* 色 */
    --white: #FFFFFF;
    --light-gray: #F4F4F4;
    --gray: #CCCCCC;
    --dark-gray: #3E3E3E;
    --black: #000000;
    --red: #96000F;
}

/* ================================================================ */

/* ベース ========================================================= */
html {
    margin: 0;
    padding: 0;
    background: var(--white, #FFFFFF);
    color: var(--black, #000000);
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoodting: antialiased;
    -moz-osx-font-smoodting: grayscale;
    word-break: break-all;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    font-size: var(--16px, 16px);
    line-height: 1.6;
}

/* 見出し */
h1 {
    font-size: var(--40px, 40px);
    font-weight: bold;
}

h2 {
    font-size: var(--32px, 32px);
    font-weight: bold;
}

h3 {
    font-size: var(--28px, 28px);
    font-weight: bold;
}

h4 {
    font-size: var(--24px, 24px);
    font-weight: bold;
}

h5 {
    font-size: var(--20px, 20px);
    font-weight: bold;
}

h6 {
    font-size: var(--18px, 18px);
    font-weight: bold;
}

/* リンク */
a {
    color: var(--red, #FF0000);
    display: inline-block;
    cursor: pointer;
    transition: all .3s ease;
}

a:hover {
    text-decoration: none;
    transition: all .3s ease;
}

/* ボタン */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    padding: var(--8px, 8px);
    background: var(--red, #FF0000);
    border: 1px solid var(--red, #FF0000);
    border-radius: var(--4px, 4px);
    outline: 0;
    color: var(--white, #FFFFFF);
    font-size: var(--16px, 16px);
    cursor: pointer;
    transition: all .3s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: var(--white, #FFFFFF);
    color: var(--red, #FF0000);
    transition: all .3s ease;
}

/* セレクトボックス */
.select--wrap {
    width: 100%;
    position: relative;
    cursor: pointer;
}

.select--wrap::after {
    width: var(--8px, 8px);
    aspect-ratio: 1 / 1;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    position: absolute;
    top: 45%;
    right: var(--8px, 8px);
    transform: translate(0, -45%) rotate(135deg);
    content: "";
    pointer-events: none;
}

.select--wrap select {
    padding: var(--8px, 8px);
    width: 100%;
    height: var(--40px, 40px);
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--black, #000000);
    border-radius: var(--4px, 4px);
    outline: none;
    color: #000000;
    font-size: var(--16px, 16px);
    line-height: 1.4;
    user-select: none;
    cursor: pointer;
}

/* テキストボックス系 */
.text--wrap {
    padding: var(--4px, 4px);
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--black, #000000);
    border-radius: var(--4px, 4px);
    display: block;
}

.text--wrap input[type="text"],
.text--wrap input[type="email"],
.text--wrap input[type="tel"],
.text--wrap input[type="number"],
.text--wrap input[type="password"],
.text--wrap input[type="date"],
.text--wrap input[type="datetime-local"],
.text--wrap input[type="month"],
.text--wrap input[type="time"],
.text--wrap input[type="week"],
.text--wrap input[type="search"],
.text--wrap input[type="url"] {
    width: 100%;
    outline: 0;
    cursor: text;
}

/* テキストエリア */
.textarea--wrap {
    padding: var(--4px, 4px);
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--black, #000000);
    border-radius: var(--4px, 4px);
    display: block;
}

.textarea--wrap textarea {
    width: 100%;
}

.textarea--wrap textarea:focus,
.textarea--wrap textarea:focus-visible {
    outline: none;
}

/* チェックボックス */
.checkbox--wrap {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--8px, 8px);
    position: relative;
    text-align: left;
}

.checkbox--box {
    width: var(--14px, 14px);
    aspect-ratio: 1 / 1;
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--black, #000000);
    border-radius: var(--4px, 4px);
    position: relative;
    flex-shrink: 0;
}

.checkbox--box input[type="checkbox"] {
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    z-index: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* チェックマーク */
.checkbox--box:has(input[type="checkbox"]:checked)::before {
    content: "";
    width: var(--12px, 12px);
    height: var(--8px, 8px);
    border-top: 2px solid var(--red, #FF0000);
    border-right: 2px solid var(--red, #FF0000);
    position: absolute;
    top: 0;
    left: 1px;
    transform: rotate(135deg);
}

/* プレースホルダー */
::placeholder {
    color: var(--gray, #CCCCCC);
}

/* 表 */
table {
    table-layout: fixed;
}

th,
td {
    padding: var(--4px, 4px);
    border: 1px solid var(--black, #000000);
    font-size: var(--16px, 16px);
}

th {
    font-weight: bold;
    text-align: center;
}

/* フレックスボックス */
.flex--box {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex--box__title {
    flex-shrink: 1;
    justify-self: center;
    margin: 0 auto;
    text-align: center;
}

/* グリッドボックス */
.grid--box {
    display: grid;
}

/* アイコン */
.icon {
    flex-shrink: 1;
    margin-left: var(--4px, 4px);
    width: var(--16px, 16px);
    aspect-ratio: 1 / 1;
    color: var(--black, #000000);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon::after {
    width: 100%;
    height: 100%;
    background: no-repeat currentColor center / cover;
    display: inline-block;
    content: "";
}

.icon--close {
    margin: 0;
    width: var(--12px, 12px);
    position: relative;
}

.icon--close::before,
.icon--close::after {
    width: 100%;
    height: 1px;
    background: currentColor;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
}

.icon--close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon--close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.icon--map::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 20.8995L16.9497 15.9497C19.6834 13.2161 19.6834 8.78392 16.9497 6.05025C14.2161 3.31658 9.78392 3.31658 7.05025 6.05025C4.31658 8.78392 4.31658 13.2161 7.05025 15.9497L12 20.8995ZM12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364L12 23.7279ZM12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 15C9.79086 15 8 13.2091 8 11C8 8.79086 9.79086 7 12 7C14.2091 7 16 8.79086 16 11C16 13.2091 14.2091 15 12 15Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon--team::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 10C14.2091 10 16 8.20914 16 6 16 3.79086 14.2091 2 12 2 9.79086 2 8 3.79086 8 6 8 8.20914 9.79086 10 12 10ZM5.5 13C6.88071 13 8 11.8807 8 10.5 8 9.11929 6.88071 8 5.5 8 4.11929 8 3 9.11929 3 10.5 3 11.8807 4.11929 13 5.5 13ZM21 10.5C21 11.8807 19.8807 13 18.5 13 17.1193 13 16 11.8807 16 10.5 16 9.11929 17.1193 8 18.5 8 19.8807 8 21 9.11929 21 10.5ZM12 11C14.7614 11 17 13.2386 17 16V22H7V16C7 13.2386 9.23858 11 12 11ZM5 15.9999C5 15.307 5.10067 14.6376 5.28818 14.0056L5.11864 14.0204C3.36503 14.2104 2 15.6958 2 17.4999V21.9999H5V15.9999ZM22 21.9999V17.4999C22 15.6378 20.5459 14.1153 18.7118 14.0056 18.8993 14.6376 19 15.307 19 15.9999V21.9999H22Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon--file::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon--search::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
}

/* ページネーション */
.pagination--wrap .pagination--list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--16px, 16px);
    list-style: none;
}

/* アニメーション */
@keyframes fade {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bottomText {
    0% {
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, 50);
    }

    100% {
        opacity: 1;
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes bottomTextLine {
    0% {
        width: 100%;
        transform-origin: center top;
        transform: scale(0, 1);
    }

    100% {
        width: 100%;
        transform-origin: center top;
        transform: scale(1, 1);
    }
}

@media all and (max-width: 1279px) {
    body {
        font-size: var(--14px, 14px);
    }

    th,
    td {
        font-size: var(--14px, 14px);
    }

    .icon--close {
        margin: var(--4px, 4px) 0;
    }
}

/* ================================================================ */



/* 採用情報ページ（共通） =========================================== */
.inner {
    width: 86%;
    max-width: 1260px;
    margin: 0 auto;
}

/* tooltip */
.tooltip[title] {
    width: var(--14px);
    height: var(--14px);
    background-color: var(--black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tooltip[title]::before {
    color: var(--white);
    font-size: var(--12px);
    content: "？";
}

.tooltip[title]:hover::after {
    padding: var(--4px);
    width: var(--140px);
    height: auto;
    background-color: #00000099;
    border-radius: var(--4px);
    color: var(--white);
    display: block;
    opacity: 1;
    position: absolute;
    bottom: var(--16px);
    z-index: 1;
    font-size: var(--12px);
    content: attr(title);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 検索条件エリア */
.search--box {
    margin: var(--48px) auto;
    padding: var(--32px, 32px) var(--48px, 48px);
    background: var(--white, #FFFFFF);
    border: 1px solid var(--gray, #CCCCCC);
    box-shadow: 0 0 10px #00000022;
}

.search--box .flex--box:not(:nth-of-type(1)) {
    margin: var(--16px) 0;
}

.search--box .select--wrap {
    width: 30%;
}

.search--box .select--wrap select {
    padding: var(--8px, 8px) var(--8px, 8px) var(--8px, 8px) var(--40px, 40px);
}

.search--box .select--wrap select#occupation option:disabled {
    display: none;
}

.search--box .select--wrap select#occupation option {
    display: block;
}

.search--box .select--wrap .icon {
    color: var(--red, #FF0000);
    position: absolute;
    top: 45%;
    left: var(--8px, 8px);
    transform: translate(0, -45%);
    pointer-events: none;
}

.search--box .feature--wrap {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--4px, 4px);
}

.search--box .feature--wrap .checkbox--wrap {
    margin: 0;
}

.search--box .flex--box:has(.freeword) .flex--box__title {
    cursor: pointer;
}

.search--box .with_tooptip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.freeword--wrap {
    width: 80%;
    cursor: text;
}

.search--button {
    margin-top: var(--28px, 28px);
    padding: var(--4px, 4px);
    border: 1px solid var(--red, #FF0000);
}

.search--button button {
    padding: var(--24px, 24px) 0;
    width: 100%;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-weight: bold;
}

.search--button button::before {
    width: 100%;
    background: var(--white, #FFFFFF);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    content: '';
    transition: transform 0.3s;
}

.search--button button::after {
    width: var(--32px, 32px);
    height: var(--8px, 8px);
    border-bottom: 1px solid var(--white, #FFFFFF);
    border-right: 1px solid var(--white, #FFFFFF);
    display: block;
    position: absolute;
    top: 50%;
    right: var(--24px, 24px);
    transform: translate(0, -50%) skew(45deg);
    content: "";
    transition: 0.3s all ease;
}

.search--button .icon--search {
    margin-right: var(--16px, 16px);
    margin-left: 0;
    color: var(--white, #FFFFFF);
    transition: 0.3s all ease;
}

.search--button .text {
    transform: scale(1, 1);
}

.search--button button:hover {
    border: 1px solid var(--red, #FF0000);
    color: var(--red, #FF0000);
    transition: 0.3s all ease;
}

.search--button button:hover .icon--search {
    color: var(--red, #FF0000);
    transition: 0.3s all ease;
}

.search--button button:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.search--button button:hover::after {
    border-bottom: 1px solid var(--red, #FF0000);
    border-right: 1px solid var(--red, #FF0000);
    transition: 0.3s all ease;
}

/* 採用情報ボックス */
.job--box {
    margin-bottom: var(--48px, 48px);
    background: var(--white, #FFFFFF);
    box-shadow: 0 0 10px #00000022;
}

.job--title {
    padding: var(--20px, 20px) var(--40px, 40px);
    min-height: var(--80px, 80px);
    background: var(--light-gray, #F4F4F4);
    border-top: 2px solid var(--gray, #CCCCCC);
    border-right: 2px solid var(--gray, #CCCCCC);
    border-left: 2px solid var(--gray, #CCCCCC);
    color: var(--red, #FF0000);
    display: flex;
    align-items: center;
    gap: var(--18px, 18px);
    position: relative;
}

.job--ribbon {
    width: var(--64px, 64px);
    height: var(--40px, 40px);
}

.job--ribbon::before,
.job--ribbon::after {
    content: "";
}

.job--ribbon::before {
    border-bottom: var(--80px, 80px) solid transparent;
    border-left: var(--80px, 80px) solid #96000f;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.job--ribbon::after {
    display: block;
    position: absolute;
    top: var(--18px, 18px);
    left: var(--8px, 8px);
    transform: rotate(-45deg);
    font-size: var(--18px, 18px);
    font-weight: bold;
    content: "NEW";
}

.job--ribbon__new::after {
    content: "NEW";
}

.job--ribbon__up::after {
    left: var(--16px, 16px);
    content: "UP";
}

.job--title hgroup {
    display: flex;
    flex-flow: wrap;
    gap: 0.8rem;
}

.job--main_title {
    flex: 1 0 100%;
    font-size: var(--20px, 20px);
    font-weight: bold;
}

.job--sub_title {
    flex: 1 0 100%;
    font-size: var(--14px, 14px);
    font-weight: bold;
}

.job--common {
    padding: var(--20px, 20px) var(--40px, 40px);
    border-right: 2px solid var(--gray, #CCCCCC);
    border-bottom: 2px solid var(--gray, #CCCCCC);
    border-left: 2px solid var(--gray, #CCCCCC);
}

.job--feature {
    margin: var(--16px, 16px) 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    gap: var(--8px, 8px);
}

.job--feature .feature {
    flex-shrink: 1;
    padding: var(--4px, 4px);
    min-width: var(--120px, 120px);
    background: var(--gray, #CCCCCC);
    color: var(--light-gray, #F4F4F4);
    text-align: center;
}

.job--feature .feature.checked {
    background: var(--white, #FFFFFF);
    border-width: 1px;
    box-shadow: 2px 2px 4px #00000077;
    color: var(--black, #000000);
}

.job--table {
    margin-bottom: var(--28px, 28px);
    width: 100%;
}

.job--table th,
.job--table td {
    border: none;
    vertical-align: middle;
}

.job--table tr {
    margin-bottom: var(--10px, 10px);
    padding-bottom: var(--10px, 10px);
    border-bottom: 1px solid var(--gray, #CCCCCC);
    display: block;
}

.job--table tr:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.job--table th {
    padding: var(--12px, 12px) 0;
    min-width: var(--250px, 250px);
    background: var(--light-gray, #F4F4F4);
    font-weight: normal;
}

.job--table td {
    padding-left: var(--32px, 32px);
}

.button--box {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}

.button--box .button {
    margin: 0 auto;
    padding: var(--20px, 20px) 0;
    width: 48%;
    max-width: 100%;
    background: var(--red, #FF0000);
    border: 1px solid var(--red, #FF0000);
    border-radius: var(--32px, 32px);
    color: var(--white, #FFFFFF);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: var(--18px, 18px);
    font-weight: bold;
    text-decoration: none;
}

.button--box .button::before {
    width: 100%;
    background: var(--white, #FFFFFF);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    content: '';
    transition: transform 0.3s;
}

.button--box .button::after {
    width: var(--32px, 32px);
    height: var(--8px, 8px);
    border-bottom: 1px solid var(--white, #FFFFFF);
    border-right: 1px solid var(--white, #FFFFFF);
    display: block;
    position: absolute;
    top: 50%;
    right: var(--24px, 24px);
    transform: translate(0, -50%) skew(45deg);
    content: "";
    transition: 0.3s all ease;
}

.button--box .button .text {
    transform: scale(1, 1);
}

.button--box .button:hover {
    border: 1px solid var(--red, #FF0000);
    color: var(--red, #FF0000);
    transition: 0.3s all ease;
}

.button--box .button:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.button--box .button:hover::after {
    border-bottom: 1px solid var(--red, #FF0000);
    border-right: 1px solid var(--red, #FF0000);
    transition: 0.3s all ease;
}

@media all and (max-width: 1279px) {
    .inner {
        width: 92%;
    }

    .tooltip[title] {
        margin-left: var(--8px);
    }

    .search--box {
        padding: var(--10px, 10px);
    }

    .search--box .flex--box:has(.select--wrap) {
        justify-content: center;
    }

    .search--box .select--wrap {
        width: 100%;
    }

    .search--box .flex--box__title {
        margin: 0 0 var(--4px, 4px);
        text-align: left;
    }

    .search--box .feature--wrap {
        width: 100%;
    }


    .freeword--wrap {
        width: 100%;
    }

    .search--button button {
        padding: var(--20px, 20px) 0;
    }

    .job--title {
        padding: var(--10px, 10px);
    }

    .job--ribbon {
        width: var(--100px, 100px);
    }

    .job--common {
        padding: var(--10px, 10px);
    }

    .job--feature {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr));
        justify-content: center;
        gap: var(--8px, 8px);
    }

    .job--feature .feature {
        min-width: 0;
        font-size: var(--12px, 12px);
    }

    .job--table {
        margin-bottom: var(--10px, 10px);
    }

    .job--table th {
        padding: var(--4px, 4px) 0;
        width: 100%;
        display: block;
        line-height: 1.6;
    }

    .job--table td {
        padding: var(--4px, 4px) var(--10px, 10px) 0;
        width: 100%;
        display: block;
    }

    .button--box .button {
        margin-bottom: var(--10px, 10px);
        padding: var(--14px, 14px) 0;
        width: 100%;
    }
}

/* ================================================================ */

/* アーカイブページ ================================================ */
#archive {
    margin: var(--180px, 180px) 0 var(--100px, 100px);
}

/* タイトル */
.archive--title hgroup {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.archive--title h1 {
    margin-bottom: var(--5px, 5px);
    padding: 0 0 var(--4px, 4px);
    color: var(--black, #000000);
    opacity: 0;
    font-family: urw-din-semi-condensed, sans-serif;
    font-size: var(--36px, 36px);
    font-weight: bold;
    letter-spacing: .15em;
    animation: bottomText .5s ease-out forwards;
}

.archive--title h1::after {
    margin: var(--5px, 5px) 0;
    width: 0;
    height: var(--4px, 4px);
    background: var(--black, #000000);
    border: none;
    outline: 0;
    display: block;
    content: "";
    animation: bottomTextLine 1s .5s ease-out forwards;
}

.archive--title span {
    color: var(--black, #000000);
    text-align: center;
    letter-spacing: .3em;
    animation: fade 1s ease forwards;
}

/* ページネーション */
.archive_pagination--wrap .pagination--item a,
.archive_pagination--wrap .pagination--item span {
    width: var(--32px, 32px);
    aspect-ratio: 1 / 1;
    background: var(--white, #FFFFFF);
    border: 1px solid var(--black, #000000);
    color: var(--black, #000000);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.archive_pagination--wrap .pagination--current a,
.archive_pagination--wrap .pagination--current span {
    background: var(--black, #000000);
    color: var(--white, #FFFFFF);
}

.archive_pagination--wrap .pagination--item a:hover {
    background: var(--black, #000000);
    color: var(--white, #FFFFFF);
}

.archive_pagination--wrap .pagination--first a,
.archive_pagination--wrap .pagination--prev a,
.archive_pagination--wrap .pagination--next a,
.archive_pagination--wrap .pagination--last a {
    font-size: 0;
}

.archive_pagination--wrap .pagination--first a::after,
.archive_pagination--wrap .pagination--prev a::after,
.archive_pagination--wrap .pagination--next a::after,
.archive_pagination--wrap .pagination--last a::after {
    width: var(--8px, 8px);
    height: var(--8px, 8px);
    border-top: 1px solid var(--black, #000000);
    border-right: 1px solid var(--black, #000000);
    content: "";
}

.archive_pagination--wrap .pagination--first a::before,
.archive_pagination--wrap .pagination--last a::before {
    width: var(--4px, 4px);
    height: var(--16px, 16px);
    border-color: var(--black, #000000);
    content: "";
}

.archive_pagination--wrap .pagination--first a::before {
    border-left-width: 1px;
    border-left-style: solid;
}

.archive_pagination--wrap .pagination--first a::after {
    transform: translate(25%, 5%) rotate(-135deg);
}

.archive_pagination--wrap .pagination--prev a::after {
    transform: translate(25%, 5%) rotate(-135deg);
}

.archive_pagination--wrap .pagination--next a::after {
    transform: translate(-25%, 5%) rotate(45deg);
}

.archive_pagination--wrap .pagination--last a::before {
    border-right-width: 1px;
    border-right-style: solid;
}

.archive_pagination--wrap .pagination--last a::after {
    order: -1;
    transform: translate(-25%, 5%) rotate(45deg);
}

.archive_pagination--wrap .pagination--first a:hover::before,
.archive_pagination--wrap .pagination--first a:hover:after,
.archive_pagination--wrap .pagination--prev a:hover::after,
.archive_pagination--wrap .pagination--next a:hover::after,
.archive_pagination--wrap .pagination--last a:hover::before,
.archive_pagination--wrap .pagination--last a:hover::after {
    border-color: var(--white, #FFFFFF);
}

@media all and (max-width: 1279px) {
    #archive {
        margin: var(--140px, 140px) 0 var(--48px, 48px);
    }

    .archive--title {
        margin-bottom: var(--48px, 48px);
    }

    .archive--title h1 {
        margin: 0;
        font-size: var(--28px, 28px);
    }
}

/* ================================================================ */

/* シングルページ ================================================== */
#single {
    margin: var(--180px, 180px) 0 var(--100px, 100px);
}

.job--content {
    margin-bottom: var(--160px, 160px);
    padding: var(--20px, 20px) var(--40px, 40px);
    background: var(--white, #FFFFFF);
    border: 2px solid var(--gray, #CCCCCC);
}

.job--content tr {
    margin-bottom: var(--10px, 10px);
    padding-bottom: var(--10px, 10px);
    border-bottom: 1px solid var(--gray, #CCCCCC);
    display: block;
}

.job--content td {
    padding-left: var(--48px, 48px);
    vertical-align: middle;
}

/* 関連する求人情報 */
.related_job--heading {
    margin-bottom: var(--48px, 48px);
    padding-bottom: var(--14px, 14px);
    border-bottom: 1px solid var(--black, #000000);
    font-weight: 700;
    font-size: var(--24px, 24px);
}

.related_job--list {
    margin-bottom: var(--160px, 160px);
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.related_job--list::after {
    width: 32%;
    display: block;
    content: "";
}

.related_job--item {
    width: 32%;
    min-width: 0;
}

.related_job--title {
    padding: var(--10px, 10px) var(--20px, 20px);
    min-height: var(--80px, 80px);
    background: var(--light-gray, #F4F4F4);
    border-top: 2px solid var(--gray, #CCCCCC);
    border-right: 2px solid var(--gray, #CCCCCC);
    border-left: 2px solid var(--gray, #CCCCCC);
    color: var(--red, #FF0000);
    display: flex;
    align-items: center;
    gap: var(--8px, 8px);
    position: relative;
}

.related_job--ribbon {
    width: var(--100px, 100px);
    height: var(--40px, 40px);
}

.related_job--ribbon::before,
.related_job--ribbon::after {
    content: "";
}

.related_job--ribbon::before {
    border-bottom: var(--80px, 80px) solid transparent;
    border-left: var(--80px, 80px) solid #96000f;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.related_job--ribbon::after {
    position: absolute;
    top: 16px;
    left: 8px;
    display: block;
    transform: rotate(-45deg);
    font-size: var(--18px, 18px);
    font-weight: bold;
    content: "NEW";
}

.related_job--ribbon__new::after {
    content: "NEW";
}

.related_job--ribbon__up::after {
    content: "UP";
}

.related_job--title hgroup {
    display: flex;
    flex-flow: wrap;
    gap: 0.4rem;
}

.related_job--main_title {
    flex: 1 0 100%;
    font-size: var(--20px, 20px);
}

.related_job--sub_title {
    flex: 1 0 100%;
    font-size: var(--14px, 14px);
    font-weight: bold;
}

.related_job--common {
    padding: var(--10px, 10px) var(--20px, 20px);
    background: var(--white, #FFFFFF);
    border-right: 2px solid var(--gray, #CCCCCC);
    border-bottom: 2px solid var(--gray, #CCCCCC);
    border-left: 2px solid var(--gray, #CCCCCC);
}

.related_job--feature {
    margin: var(--12px, 12px) 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    justify-content: center;
    align-items: center;
    gap: var(--8px, 8px);
}

.related_job--feature .feature {
    flex-shrink: 1;
    padding: var(--4px, 4px);
    background: var(--gray, #CCCCCC);
    color: var(--light-gray, #F4F4F4);
    font-size: var(--14px, 14px);
    text-align: center;
}

.related_job--feature .feature.checked {
    background: var(--white, #FFFFFF);
    box-shadow: 2px 2px 4px #00000077;
    color: var(--black, #000000);
}

.related_job--table {
    margin-bottom: var(--18px, 18px);
    width: 100%;
}

.related_job--table tr {
    margin-bottom: var(--6px, 6px);
    padding-bottom: var(--6px, 6px);
    border-bottom: 1px solid var(--gray, #CCCCCC);
    display: block;
}

.related_job--table tr:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.related_job--table th,
.related_job--table td {
    border: none;
    vertical-align: middle;
}

.related_job--table th {
    padding: var(--8px, 8px) 0;
    min-width: var(--100px, 100px);
    background: var(--light-gray, #F4F4F4);
    font-weight: normal;
}

.related_job--table td {
    padding: 0 var(--8px, 8px);
}

.related_job--item .button--box .button {
    padding: var(--14px, 14px);
    width: 70%;
    font-size: var(--16px, 16px);
}

@media all and (max-width: 1279px) {
    #single {
        margin: var(--140px, 140px) 0 var(--48px, 48px);
    }

    .job--content {
        padding: var(--10px, 10px);
    }

    .job--content td {
        padding: 0;
    }

    .related_job--item {
        margin-bottom: var(--48px, 48px);
        width: 100%;
    }

    .related_job--title {
        padding: var(--10px, 10px);
    }

    .related_job--common {
        padding: var(--10px, 10px);
    }

    .related_job--feature {
        justify-content: center;
    }

    .related_job--feature .feature {
        min-width: var(--100px, 100px);
        font-size: var(--12px, 12px);
    }

    .related_job--table {
        margin-bottom: var(--10px, 10px);
    }

    .related_job--table th {
        padding: var(--4px, 4px) 0;
        width: 100%;
        display: block;
    }

    .related_job--table td {
        width: 100%;
        display: block;
    }

    .related_job--item .button--box .button {
        margin-bottom: var(--10px, 10px);
        padding: var(--14px, 14px) 0;
        width: 100%;
    }
}

/* ================================================================ */

/* テーマ ========================================================= */
:root {
    /* サイズ */
    --3px: 0.1875rem;
    --30px: 1.875rem;
}

header {
    padding-left: calc(var(--20px, 20px) + 20 * ((100vw - 375px) / 1545));
    background: var(--white, #FFFFFF);
}

small {
    font-family: Roboto, Arial, Helvetica, Tahoma, Verdana;
}

a {
    color: var(--black, #000000);
}

ul,
li,
th,
td,
dt,
dd {
    line-height: 1.7;
}

footer .flexbox li a {
    font-size: var(--14px, 14px);
}

.page_top #goToTop {
    font-size: 22px;
}

@media all and (max-width: 1279px) {
    footer.page .inner {
        margin: 0 auto;
        width: 86%;
        max-width: 1620px;
    }

    footer .boxR ul li {
        margin-bottom: var(--8px, 8px);
        width: 50%;
    }

    footer.page .flexbox a {
        margin-bottom: var(--8px, 8px);
        border-right: none;
        font-size: var(--12px, 12px);
    }
}

/* ================================================================ */