@charset "UTF-8";

:root {
    --color-primary: #0ABAB5;
    --color-primary-container: #F2F8FE;
    --bg-color-secondary-container: #DCF5F4;
    --bg-color-line: #04C755;
    --bg-color-contact: #08BAB5;
    --bg-color-input: #F5F5F5;
    --bg-color-copyright: #78DED8;
    --bg-color-gradation: linear-gradient(to right, #f7c76c 0%, #e0409d 100%);
    --bg-color-gradation-reverse: linear-gradient(to right, #e0409d 0%, #f7c76c 100%);

    --padding-inline-sp: min(5.2vw, 20px);

    --font-size-43: 2.6875rem;
    --font-size-32: 2rem;
    --font-size-26: 1.625rem;
    --font-size-23: 1.4375rem;
    --font-size-22: 1.375rem;
    --font-size-20: 1.25rem;
    --font-size-19: 1.1875rem;
    --font-size-18: 1.125rem;
    --font-size-17: 1.0625rem;
    --font-size-15: 0.9375rem;
    --font-size-14: 0.875rem;
    --font-size-13: 0.8125rem;
    --font-size-12: 0.75rem;
    --font-size-11: 0.6825rem;
    --font-size-10: 0.625rem;
}

html {
    font-size: 100%;
    scrollbar-gutter: stable;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #525252;
    margin: 0 auto;
    max-inline-size: 100%;
    position: relative;
    transition: filter 0.2s;
}

a {
    text-decoration: none;
}

img {
    max-inline-size: 100%;
}

li {
    list-style: none;
}

dialog {
    padding: 0;
    margin: 0;
}

::backdrop {
    background-color: rgba(51, 51, 51, 0.8);
}

summary {
    display: block;
    list-style: none;
}

/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
    display: none;
}

/* ==============================================
   common
   ============================================== */

.c-head {
    margin-block-end: 16px;
}

.c-head-title {
    display: grid;
    align-items: center;
    grid-template-columns: max-content auto;
    gap: 7px;
    font-weight: 700;
    font-size: var(--font-size-18);
    margin-bottom: 0.89em;
}

.c-head-title:before {
    content: "";
    display: block;
    background-color: var(--color-primary);
    block-size: 12px;
    inline-size: 12px;
    border-radius: 50%;
}

.c-job-card-list {
    display: grid;
    gap: 16px;
}

.c-job-card {
    display: block;
    background-color: #FAFAFA;
    border-radius: 12px;
    overflow: hidden;
}
.c-job-card .c-job-img {
    transition: opacity 0.2s;
}
.c-job-card:hover .c-job-img {
    opacity: 0.6;
}
.c-job-card .c-job-img img {
    object-fit: cover;
}

.c-job-thumbnail {
    position: relative;
}

.c-job-salary {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 999px;
    min-block-size: 26px;
}

.c-job-salary-head {
    display: grid;
    place-content: center;
    color: #fff;
    background-color: var(--color-primary);
    border-radius: 999px;
    font-size: var(--font-size-12);
    align-self: stretch;
    padding: 3px 9px;
}

.c-job-salary-body {
    font-size: var(--font-size-13);
    padding: 3px 16px 3px 8px;
}

.c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background-color: var(--color-primary);
    border-radius: 999px;
    inline-size: min(294px, 90%);
    margin: 40px auto 0;
    padding-block: 13px 14px;
    text-align: center;
    transition: opacity 0.2s;
}

.c-button:hover {
    opacity: 0.6;
}

.num {
    font-weight: 700;
}

.c-job-keep {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    display: grid;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid #D9D9DA;
    border-radius: 50%;
    background-color: #fff;
    transition: 0.2s background-color;
    cursor: pointer;
}
.c-job-keep:has(input:checked) {
    background-color: #FAECF4;
}

.c-job-keep:hover~.c-job-img {
    opacity: 1;
}

.c-job-keep input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    appearance: none;
    -ms-progress-appearance: none;
}

.c-job-icon {
    position: absolute;
    inset: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s opacity;
    inline-size: 20px;
    block-size: 16px;
}

.c-icon-button:hover .c-job-icon,
input:checked~.c-job-icon {
    opacity: 0;
}

.c-icon-button:hover .c-job-icon--active,
input:checked~.c-job-icon--active {
    opacity: 1;
}

.c-job-icon--active {
    opacity: 0;
}

.c-job-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c-job-feature-list--card {
    position: absolute;
    left: 16px;
    bottom: 14px;
}

.c-job-feature-item {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px;
    font-size: var(--font-size-10);
    font-weight: 700;
    background-color: #fff;
    border: 1px solid #E9E9E9;
    border-radius: 999px;
    padding: 5px 8px 6px;
}

.c-job-feature-item:before {
    content: "#";
    color: #FD84A1;
}

.c-job-body {
    padding: 10px 16px 18px;
}

.c-job-address {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 4px;
    font-size: var(--font-size-12);
    color: #656565;
}

.c-job-title {
    font-weight: bold;
    font-size: var(--font-size-18);
    color: #333;
    margin-block-start: 6px;
}

.c-job-pr {
    font-size: var(--font-size-12);
    line-height: 1.5;
    color: #333;
    margin-block-start: 8px;
}

.c-details {
    border-radius: 8px;
    background: #f4f4f4;
}
.c-details:last-of-type {
    margin-block-end: 80px;
}

.c-details+.c-details {
    margin-block-start: 16px;
}

.c-question {
    display: grid;
    grid-template-columns: max-content auto max-content;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s;
    padding: 24px 16px;
}
.c-question:hover {
    opacity: 0.6;
}

.c-details-head {
    display: grid;
    place-content: center;
    block-size: 28px;
    inline-size: 28px;
    padding-block-end: 2px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50%;
}

.c-details-head-text {
    font-size: var(--font-size-14);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #333;
    padding-inline: 10px 16px;
}

.c-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.c-details[open] .c-answer {
    position: relative;
    grid-template-rows: 1fr;
    padding: 24px 16px;
}

.c-details[open] .c-answer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    block-size: 1px;
    inline-size: calc(100% - 32px);
    background-image: linear-gradient(to right, #0C0C0C, #0C0C0C 4px, transparent 4px);
    background-size: 8px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

.c-answer-inner {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: var(--font-size-14);
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #333;
    overflow: hidden;
}

/* ==============================================
   breadcrumb
   ============================================== */
.breadcrumb-nav {
    padding: 8px var(--padding-inline-sp) 9px;
    border-top: 1px solid rgba(0, 0, 0, 0.16);

}

.breadcrumb-nav ul {
    display: flex;
    gap: 4px;
}

.breadcrumb-nav li {
    font-size: var(--font-size-12);
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    flex-shrink: 0;
    
}
.breadcrumb-nav li:last-child {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-nav a {
    text-decoration: underline;
    margin-inline-end: 4px;
    transition: 0.2s opacity;
}
.breadcrumb-nav a:hover {
    opacity: 0.6;
}

/* ==============================================
   pagination
   ============================================== */

.pagination-list {
    inline-size: fit-content;
    margin-block-start: 64px;
    margin-inline: auto;
}

.page-numbers {
    display: inline-grid;
    place-content: center;
    font-weight: 700;
    background-color: #f5f5f5;
    border-radius: 50%;
    inline-size: 38px;
    block-size: 38px;
    padding-block-end: 2px;
}

.page-numbers:not(.dots, .current):hover {
    color: rgba(82, 82, 82, 0.6);
}

.page-numbers.current {
    background-color: var(--color-primary);
    color: #fff;
}

/* ==============================================
   pc-background
   ============================================== */

.pc-background {
    position: fixed;
    inset: 0;
    max-inline-size: 1920px;
    margin-inline: auto;
}

.top-bg-video {
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    inline-size: min(100vw, 1920px);
    block-size: 100vh;
    object-fit: cover;
}

@media screen and (max-width: 384px) {
    .top-bg-video {
        display: none;
    }
}

.pc-background-inner {
    display: grid;
    grid-template-areas:
        "logo ."
        "nav cta2"
        "cta1 cta2"
        "cta1 cta2";
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: max-content minmax(auto, 54vh) 1fr 1fr;
    justify-content: space-between;
    max-inline-size: 1366px;
    padding-block-start: min(3.5vw, 49px);
    padding-inline-start: min(3.7vw, 51px);
    padding-inline-end: min(2.8vw, 39px);
    margin-inline: auto;
}

@media screen and (max-width: 900px) {
    .pc-background-inner {
        padding-inline-start: min(12.7vw, 90px);
    }
}

@media screen and (max-width: 768px) {
    .pc-background-inner {
        display: none;
    }
}

.top-logo {
    grid-area: logo;
    display: grid;
    grid-template-columns: 56px 134px;
    align-items: center;
    gap: 16px;
}

.pc-background-sidebar {
    grid-area: nav;
    overflow-y: auto;
    margin-block-start: min(8.3vh, 64px);
}

.pc-background-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: min(3.12vh, 24px);
    font-size: var(--font-size-15);
    font-weight: 500;
}

.pc-background-sidebar-list-item {
    line-height: 21px;
    transition: font-size 0.2s;
}

.pc-background-sidebar-list-item:hover {
    font-size: var(--font-size-17);
}

.pc-background-cta-area {
    grid-area: cta1;
    display: grid;
    grid-auto-rows: minmax(48px, max-content);
    inline-size: fit-content;
    gap: 16px;
}

.pc-background-cta-area--first {
    margin-block-start: min(3.12vh, 24px);
}

.pc-background-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 40px;
    font-size: var(--font-size-18);
    font-weight: 700;
    transition: opacity 0.2s;
}

.pc-background-cta:hover {
    opacity: 0.6;
}

.rounded {
    border-radius: 999px;
}

.line-link {
    background-color: var(--bg-color-line);
    color: #fff;
}

.icon-line {
    margin-left: -6px;
}

.contact-link {
    background-color: var(--bg-color-contact);
    color: #fff;
}

.pc-background-cta-area--second {
    grid-area: cta2;
    margin-block-start: auto;
}

@media screen and (max-width: 900px) {
    .pc-background-cta-area--second {
        display: none;
    }
}

.pc-background-for-smartphone {
    display: grid;
    grid-template-areas:
        "en qr"
        "jp qr";
    background-color: #fff;
    border-radius: 20px;
    padding: 16px;
    column-gap: 14px;
}

.for-smartphone-en {
    grid-area: en;
    color: #de7c9e;
    font-size: var(--font-size-10);
    font-weight: 500;
    margin-block-start: auto;
}

.for-smartphone-jp {
    grid-area: jp;
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 1.45;
}

.for-smartphone-qr {
    grid-area: qr;
}

.pc-background-cta--keep {
    background-color: #8C8B8B;
    font-weight: 700;
    color: #fff;
}

.pc-background-cta--search {
    position: relative;
    color: #fff;
    overflow: hidden;
}
.pc-background-cta--search:before,
.pc-background-cta--search:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: 999px;
}
.pc-background-cta--search:before {
    background: var(--bg-color-gradation);
    opacity: 1;
}

.pc-background-cta--search:after {
    background: var(--bg-color-gradation-reverse);
    opacity: 0;
}

.pc-background-cta--search:hover {
    opacity: 1;
}
.pc-background-cta--search:hover:before {
    opacity: 0;
}
.pc-background-cta--search:hover:after {
    opacity: 1;
}

.pc-background-cta-text--search {
    position: relative;
    z-index: 1;
}

.pc-background-bottom-text-wrapper {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    inline-size: max-content;
    overflow-x: auto;
}

.pc-background-bottom-text {
    font-size: 80px;
    font-weight: 700;
    color: #fff;
    opacity: 0.6;
    line-height: 0.9;
    text-transform: uppercase;
    padding-inline: min(1.3vw, 18px);
    margin-inline-start: max(calc((100vw - 1366px) / 2), 0px);
}

/* ==============================================
   drawer-menu
   ============================================== */
.drawer-menu {
    display: none;
    inline-size: 100%;
    block-size: calc(100dvh - 200px);
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    border: none;
    padding: 0;
    background-color: #fff;
    top: 50px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.drawer-menu[open] {
    display: block;
    z-index: 2;
}

.drawer-menu-title {
    font-weight: 700;
    text-align: center;
    padding-inline: var(--padding-inline-sp);
    margin-block: 24px 14px;
}

.drawer-menu-head {
    font-weight: 700;
    padding-block-end: 14px;
    padding-inline: var(--padding-inline-sp);
}

.drawer-menu-head:not(:first-of-type) {
    padding-block-start: 14px;
    border-top: 1px solid #EDEDED;
}

.drawer-menu-link {
    position: relative;
    display: grid;
    align-items: center;
    font-size: var(--font-size-14);
    block-size: 48px;
    inline-size: 100%;
    padding-inline: var(--padding-inline-sp);
}
.drawer-menu-link:hover {
    background-color: #F0F0F0;
}

.drawer-menu-link:after {
    content: "";
    position: absolute;
    right: 29px;
    top: 50%;
    transform: translateY(-50%);
    inline-size: 6px;
    block-size: 10px;
    background: url(../images/icon_chevron.svg) no-repeat center / contain;
}

/* ==============================================
   sp-content
   ============================================== */
.sp-content {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    inline-size: min(384px, 100%);
    border-radius: 24px 24px 0px 0px;
    background: #fff;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
    margin-block: 50px 100px;
    overflow: clip;
}

@media screen and (max-width: 900px) {
    .sp-content {
        position: absolute;
        left: calc(50% + 192px);
    }
}

@media screen and (max-width: 768px) {
    .sp-content {
        left: 50%;
    }
}

@media screen and (max-width: 384px) {
    .sp-content {
        border-radius: 0;
        box-shadow: none;
        margin-block-start: 0;
    }
}

.single-jobs .sp-content {
    margin-block-end: 67px;
}

.sp-header {
    position: relative;
    z-index: 3;
    block-size: 50px;
    padding: 8px 20px 7px;
    background-color: #ffff;
    border-radius: 24px 24px 0px 0px;
}

/* ==============================================
   search-form
   ============================================== */
#job-search-dialog {
    max-inline-size: 384px;
    margin: 10.8dvh auto 0;
    max-block-size: 100dvh;
    border-radius: 8px;
    overflow: visible;
}

#job-search-form {
    color: #333;
    padding: 0 16px;
    /* 下部固定フッターの被りを防ぐ余白 */
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    max-inline-size: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 各セクションの見出し */
.search-section {
    margin-bottom: 28px;
}

.search-section h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 12px 0;
}

/* キーワード入力欄 */
#search-keyword {
    inline-size: 100%;
    padding: 16px;
    font-size: 14px;
    background-color: var(--bg-color-input);
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
}

#search-keyword::placeholder {
    color: #a8a8a8;
}

/* エリア選択フィールド（ボタン） */
.trigger-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    inline-size: 100%;
    padding: 16px;
    background-color: var(--bg-color-input);
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
}

#selected-area-text {
    font-size: 14px;
    color: #a8a8a8;
}

/* エリアが選択されたら文字色を濃くする */
#selected-area-text.is-selected {
    color: #333;
}

.trigger-field .arrow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--color-primary);
}

/* 職種チップス（複数選択UI） */
.chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
}

.chip-label {
    cursor: pointer;
}

.chip-label input {
    display: none;
    /* 本物のチェックボックスは隠す */
}

.chip-label span {
    display: inline-block;
    padding: 10px 18px;
    font-size: 14px;
    color: #a8a8a8;
    background-color: #fff;
    border: 1px solid #a8a8a8;
    border-radius: 24px;
    transition: all 0.2s ease;
}

/* 職種が選択された時のスタイル（お好みで背景塗りにしてもOK） */
.chip-label input:checked+span {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--bg-color-secondary-container);
    font-weight: bold;
}

/* ==========================================================================
   下部固定フッター（メイン画面・モーダル共通）
   ========================================================================== */
.search-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    inline-size: 100%;
    max-inline-size: 384px;
    background-color: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom)) 16px;
    /* iOSのバー対策 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    z-index: 1000;
}

.count-display {
    display: grid;
    place-items: center;
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 1.4;
    color: #444;
}

.count-display span {
    color: var(--color-primary);
    margin: 0 2px;
}

.submit-btn {
    position: relative;
    flex: 1;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 14px 0;
    font-size: var(--font-size-14);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.submit-btn:before {
    display: block;
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    block-size: 24px;
    inline-size: 24px;
    background: url(../images/icon_search.svg) no-repeat center / contain;
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   ボトムシート（モーダル）
   ========================================================================== */
.bottom-sheet {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    inline-size: 384px;
    block-size: 100dvh;
    z-index: 999;
    visibility: hidden;
    transition: visibility 0.3s;
}

.bottom-sheet:before {
    content: "";
    position: absolute;
    inline-size: 100vw;
    block-size: 100vh;
    z-index: 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(51, 51, 51, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s opacity;
}

.bottom-sheet.is-active {
    visibility: visible;
}

.bottom-sheet.is-active:before {
    opacity: 1;
    visibility: visible;
}

/* 下からせり上がる白いシート */
.bottom-sheet-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    inline-size: 100%;
    max-inline-size: 600px;
    block-size: 85vh;
    /* 画面高サの85% */
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.1, 1, 0.1, 1);
    box-sizing: border-box;
}

.bottom-sheet.is-active .bottom-sheet-content {
    transform: translate(-50%, 0);
}

/* シート最上部のグレーの「つまみバー」 */
.bottom-sheet-content::before,
#job-search-form::before {
    position: absolute;
    content: "";
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    inline-size: 50px;
    block-size: 7px;
    background-color: #D9D9D9;
    border-radius: 3px;
    margin: 12px auto 8px;
}

/* モーダルのヘッダー */
.bottom-sheet-header {
    display: grid;
    grid-template-columns: 66.6% 33.3%;
    align-items: center;
    padding: 18px 16px 18px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bottom-sheet-header:has(> :nth-child(3)) {
    display: flex;
    justify-content: space-between;
}

.bottom-sheet-header h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    justify-self: end;
}

.bottom-sheet-header:has(> :nth-child(3)) h2 {
    justify-self: center;
}

.bottom-sheet-header .back-btn,
.bottom-sheet-header .reset-btn {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px;
}

.bottom-sheet-header .back-btn {
    color: #333;
    rotate: 180deg;
    filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(1952%) hue-rotate(167deg) brightness(103%) contrast(87%);
}

.bottom-sheet-header .reset-btn {
    color: var(--color-primary);
    justify-self: end;
}

.bottom-sheet-header:has(> :nth-child(3)) .reset-btn {
    justify-self: center;
}

/* モーダル内のスクロール領域 */
.bottom-sheet-body {
    flex: 1;
    overflow-y: auto;
    block-size: 89.2dvh;
    padding: 0 20px 170px;
}

/* エリア選択の行リスト */
.area-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f7f7f7;
    cursor: pointer;
}

.area-name {
    font-size: 16px;
    transition: color 0.2s;
}

/* ラジオボタンのカスタム見た目 */
.area-row input[type="radio"] {
    display: none;
    /* デフォルトのポチは消す */
}

.radio-circle {
    inline-size: 24px;
    block-size: 24px;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    transition: all 0.2s;
}

/* ラジオボタンがチェックされたら、その行の文字を緑にする */
.area-row:has(input:checked) .area-name {
    color: var(--color-primary);
    font-weight: bold;
}

/* ラジオボタンがチェックされたら、円を緑にする */
.area-row:has(input:checked) .radio-circle {
    border-color: var(--color-primary);
}

/* 内側に緑のポチを入れる場合（画像1枚目は外枠だけのようにも見えますが、一応中ポチも実装しています。不要なら削ってください） */
.area-row:has(input:checked) .radio-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 12px;
    block-size: 12px;
    background-color: var(--color-primary);
    border-radius: 50%;
}


/* ==============================================
   front-page
   ============================================== */
.top-hero {
    position: relative;
    z-index: 1;
}

.top-hero-title {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: var(--font-size-18);
    font-weight: 500;
    writing-mode: vertical-rl;
}

.top-hero-title-line {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 12px 7px 0px;
    letter-spacing: 0.2em;
}

.top-hero-title-line:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    block-size: 100%;
    inline-size: calc(100% - 0.25em);
    z-index: -1;
    background: #fff;
}

br+.top-hero-title-line {
    margin-block-start: 5px;
}

.top-hero-subtitle {
    position: relative;
    z-index: 0;
    background: var(--bg-color-gradation);
    inline-size: 100%;
    padding: 11px 9px 9px;
    color: #fff;
    text-align: center;
    margin-block-start: -24px;
}

.top-hero-subtitle--main {
    font-size: var(--font-size-14);
    font-weight: 700;
}

.top-hero-subtitle--sub {
    font-size: var(--font-size-10);
    font-weight: 500;
    margin-block-start: 5px;
}

.top-banner {
    transition: 0.2s opacity;
}

.top-banner:hover {
    opacity: 0.6;
}

.top-link-area {
    padding: 24px var(--padding-inline-sp) 20px;
}

.top-link-list {
    margin-block-start: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(14px, 3.64vw);
    place-content: center;
}

.top-link {
    display: grid;
    gap: 4px;
    transition: 0.2s opacity;
}
.top-link:hover {
    opacity: 0.6;
}

.top-link-text {
    font-size: var(--font-size-12);
    font-weight: 500;
    color: #333;
    text-align: center;
}

.top-flow-link {
    position: relative;
    gap: 8px;
    inline-size: min(294px, 75%);
    margin: 0 auto 24px;
}

.top-flow-link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    inline-size: 5px;
    block-size: 7px;
    clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
    background: #ffffff;
}

.c-strength {
    background-color: var(--color-primary-container);
    padding: 60px var(--padding-inline-sp) 80px;
}

.c-strength-card-list {
    display: grid;
    gap: 30px;
}

.c-strength-card-item {
    position: relative;
}

.c-strength-card-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 24px auto;
    gap: 6px;
    place-content: center;
    place-items: center;
    background-color: #F4F4F4;
    border-radius: 999px;
    inline-size: min(78.9vw, 302px);
    block-size: 42px;
    padding: 11px;
    margin-inline: auto;
    font-size: var(--font-size-14);
    font-weight: 900;
}

.c-strength--training {
    --strength-color: #F9D067;
    --strength-bg: url("../images/top_bg_training.png") no-repeat top right / 42.4%;
    --strength-offset-right: 13px;
    --strength-offset-top: 5px;
}

.c-strength--reward {
    --strength-color: #F28FA9;
    --strength-bg: url("../images/top_bg_reward.png") no-repeat top right / 53.9%;
    --strength-offset-right: 5px;
    --strength-offset-top: 0px;
}

.c-strength--matching {
    --strength-color: #0ABAB5;
    --strength-bg: url("../images/top_bg_matching.png") no-repeat top right / 55.6%;
    --strength-offset-right: -6px;
    --strength-offset-top: 7px;
}

.c-strength--support {
    --strength-color: #B19CD9;
    --strength-bg: url("../images/top_bg_support.png") no-repeat top right / 55.6%;
    --strength-offset-right: -4px;
    --strength-offset-top: 10px;
}

.c-strength-card-body {
    position: relative;
    z-index: 0;
    background-color: #fff;
    border-radius: 16px;
    margin-block-start: -21px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding: 45px var(--padding-inline-sp) 24px;
}

.c-strength-card-body-inner {
    position: relative;
}

.c-strength-card-body-inner:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--strength-offset-top);
    right: var(--strength-offset-right);
    background: var(--strength-bg);
    inline-size: 100%;
    block-size: 100%;
}

.c-head-title--ja {
    display: grid;
    grid-template-columns: 10px auto auto;
    gap: 8px;
    place-items: center;
    inline-size: fit-content;
    font-weight: 700;
}

.c-head-title--ja:before {
    content: "";
    background-color: var(--strength-color, var(--color-primary));
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
}

.c-head-title--en {
    font-size: var(--font-size-43);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--strength-color, var(--color-primary));
    line-height: 1.3;
}

.c-strength-card-sub-strength-list {
    display: grid;
    gap: 8px;
    margin-block-start: 24px;
}

.c-strength-card-sub-strength-item {
    display: grid;
    grid-template-columns: 21px auto;
    align-items: center;
    gap: 8px;
    background-color: var(--strength-color);
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-14);
    border-radius: 999px;
    inline-size: fit-content;
    min-block-size: 36px;
    padding-inline: 10px 12px;
}

.c-strength-card-sub-strength-item-icon {
    max-inline-size: 21px;
    max-block-size: 21px;
    margin: auto;
}

.c-strength-card-text {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.c-strength-card-sub-strength-list+.c-strength-card-text {
    margin-block-start: 24px;
}

.c-agents-banner {
    display: block;
    margin-block-start: 40px;
    transition: 0.2s opacity;
}

.c-agents-banner:hover {
    opacity: 0.6;
}

.c-text--not-found {
    font-size: var(--font-size-14);
    margin-block-start: 32px;
    margin-block-end: 64px;
}

.c-button--circle {
    display: grid;
    place-content: center;
    place-items: center;
    font-size: var(--font-size-11);
    font-weight: 500;
    inline-size: 51px;
    block-size: 51px;
    border: 1px solid #d9d9da;
    border-radius: 50%;
    background-color: #fff;
    flex: 1 0 auto;
    cursor: pointer;
    transition: 0.2s background-color;
}

.c-button--circle:hover {
    background-color: #FBEBF3;
}

.c-button-icon-wrapper {
    place-content: center;
    block-size: 20px;
    inline-size: 17px;
}

.c-keep-icon-wrapper {
    position: relative;
    display: grid;
    place-items: center;
}
.c-keep-icon-wrapper :where(img) {
    position: absolute;
    inset: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s opacity;
}

.fixed-job-search-bar {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    inline-size: 100%;
    min-block-size: 65px;
    background-color: #fff;
    padding: 15px var(--padding-inline-sp);
    margin-top: -65px;
}

.job-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #F4F4F4;
    border-radius: 999px;
    padding: 8px 8px 8px 16px;
    cursor: pointer;
}

.job-search-bar-text {
    flex: 1;
    font-size: var(--font-size-13);
    font-weight: 700;
    color: #929292;
}

.job-search-bar-btn {
    font-size: var(--font-size-13);
    font-weight: 700;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
}

.top-job {
    padding: 80px var(--padding-inline-sp);
}

.top-column {
    background-color: var(--bg-color-secondary-container);
    padding-block: 64px;
}
.top-column .c-head {
    padding-inline: var(--padding-inline-sp);
}
.splide-wrap {
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
}

.overflow-right {
    padding-block-start: 30px;
}

.overflow-right__heading {
    font-size: 24px;
    font-weight: 700;
}

.inner {
    margin-inline: auto;
    max-inline-size: 1060px;
    padding: 0 30px;
}

.column-card {
    display: grid;
    background-color: #fff;
    border-radius: 24px;
    padding: 19px;
}

.column-thumbnail-wrapper {
    display: grid;
    align-content: center;
    background-color: #E4E4E4;
    aspect-ratio: 344 / 206;
    border-radius: 7px;
    overflow: hidden;
    margin-block-end: 8px;
}

.column-thumbnail-wrapper.column-thumbnail-wrapper--small {
    aspect-ratio: 264 / 158;
}

.column-thumbnail-wrapper.column-thumbnail-wrapper--full {
    border-radius: 0;
    aspect-ratio: 384 / 230;
}

.column-thumbnail-wrapper img {
    object-fit: cover;
}

.column-time {
    font-weight: 700;
    font-size: var(--font-size-15);
    line-height: 1.6;
    color: var(--color-primary);
    margin-block-end: 4px;
    flex-shrink: 0;
}

.column-title {
    font-weight: 700;
    font-size: var(--font-size-15);
    line-height: 1.6;
    color: #333;
}

/* ==============================================
   contact
   ============================================== */

.contact {
    position: relative;
}

.contact:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: url('../images/c_bg_contact.svg');
    background-repeat: repeat;
    background-size: 48px;
    background-color: #fff;
}

.contact-inner {
    position: relative;
    z-index: 0;
    padding: 64px var(--padding-inline-sp);
}

.page-head,
.contact-head {
    margin-block-end: 24px;
}

.page-head--en,
.contact-head--en {
    font-weight: 700;
    font-size: var(--font-size-32);
    text-align: center;
    color: #333;
    text-transform: uppercase;
    line-height: 1.437;
}

.page-head--ja,
.contact-head--ja {
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

.contact-detail {
    font-weight: 500;
    font-size: var(--font-size-14);
    letter-spacing: 0.05em;
    line-height: 1.7;
    text-align: center;
    color: #333;
}

.contact-button {
    padding: 0;
    min-block-size: 51px;
}

.contact-button.contact-link {
    margin-block-start: 16px;
}

/* ==============================================
   footer
   ============================================== */

.footer {
    background-color: var(--color-primary);
}

@media screen and (max-width: 900px) {
    .footer {
        padding-block-end: 72px;
    }

    .single-jobs .footer {
        padding-block-end: 66px;
    }
}

.footer-inner {
    padding: 40px var(--padding-inline-sp);
}

.footer-area-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    padding-block-end: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.footer-area--first {
    position: relative;
}

.footer-area--first:after {
    content: "";
    position: absolute;
    top: 0;
    right: -24px;
    display: block;
    inline-size: 1px;
    block-size: 100%;
    background-color: rgba(255, 255, 255, 0.4);
}

.footer-area-item:first-child {
    padding-block-start: 24px;
}

.footer-area-item:last-child {
    padding-block-end: 24px;
}

.footer-area-item+.footer-area-item {
    margin-block-start: 64px;
}

.footer-area-head {
    font-weight: 700;
    font-size: var(--font-size-18);
    color: #fff;
    margin-block-end: 24px;
}

.footer-area-link {
    display: block;
    font-weight: 500;
    font-size: var(--font-size-14);
    color: #fff;
    transition: opacity 0.2s;
}

.footer-area-link:hover {
    opacity: 0.6;
}

.footer-area-link+.footer-area-link {
    margin-block-start: 20px;
}

.footer-logo-link {
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-start: 64px;
}

.footer-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    inline-size: fit-content;
    margin: 40px auto 0;
}

.footer-meta-link {
    font-weight: 500;
    font-size: var(--font-size-12);
    color: #fff;
    transition: opacity 0.2s;
}

.footer-meta-link:hover {
    opacity: 0.6;
}

.footer-meta-link+.footer-meta-link:before {
    content: "/";
    margin-inline-end: 8px;
}

.footer-copyright-area {
    display: grid;
    place-content: center;
    font-size: var(--font-size-10);
    background-color: var(--bg-color-copyright);
    color: #fff;
    padding: 5px 0 10px;
}

.bottom-nav-wrapper {
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    block-size: 100px;
    inline-size: min(384px, 100%);
    background-color: #FAFAFA;

    @media screen and (max-width: 900px) {
        left: calc(50% + 192px);
    }

    @media screen and (max-width: 768px) {
        left: 50%;
    }
}


.bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    inline-size: min(384px, 100%);
}

.bottom-nav-link {
    position: relative;
    display: grid;
    grid-template-rows: 24px auto;
    place-items: center;
    padding-block: 16px 6px;
    cursor: pointer;
}

.bottom-nav-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    inline-size: 0;
    block-size: 3px;
    transition: 0.2s inline-size;
}

.bottom-nav-link:hover:after,
.bottom-nav-link.current:after {
    inline-size: 58px;
    background-color: var(--color-primary);
}

.bottom-nav-text {
    font-weight: 700;
    font-size: var(--font-size-11);
    line-height: 2.1;
    text-align: center;
    color: #959595;
    transition: 0.2s color;
}

.bottom-nav-link:hover .bottom-nav-text,
.bottom-nav-link.current .bottom-nav-text {
    color: var(--color-primary);
}
.bottom-nav-link:hover img,
.bottom-nav-link.current img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(97%) saturate(424%) hue-rotate(129deg) brightness(91%) contrast(92%);
}

.fixed-jobs-nav {
    position: sticky;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 2;
}

.bottom-nav--job {
    display: flex;
    align-items: center;
    block-size: 100%;
    gap: 8px;
    padding-inline: 20px;
}

.bottom-nav-line-button {
    font-size: var(--font-size-12);
    max-block-size: 39px;
    margin: 0;
    box-shadow: 0px 2px 10px rgba(4, 199, 85, 0.4);
}

.bottom-nav-line-icon {
    margin-inline: 0 4px;
}

.columns-wrapper {
    padding: 40px var(--padding-inline-sp) 80px;
}

.found-posts {
    place-self: end;
    font-weight: 700;
    font-size: var(--font-size-12);
    color: var(--color-primary);
}

.job-line-text {
    font-weight: 500;
    font-size: var(--font-size-12);
    line-height: 1.5;
    text-align: center;
    color: #333;
    margin-block-start: 40px;
}

.job-line-button {
    inline-size: 100%;
    margin-block-start: 16px;
}

/* ==============================================
   single-job
   ============================================== */
.single-jobs-nav {
    background-color: #fff;
    padding: 15px var(--padding-inline-sp);
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-14);
    line-height: 1.5;
    font-weight: 700;
    color: #a8a8a8;
    padding: 15px var(--padding-inline-sp) 0;
    transition: 0.2s opacity;
}

.back-btn:hover {
    opacity: 0.6;
}

.chevron-back {
    rotate: 180deg;
}

.single-jobs-nav-list {
    display: flex;
    inline-size: fit-content;
    padding: 8px 4px 8px;
    margin-inline: auto;
    margin-top: 12px;
}

.single-jobs-nav-item {
    font-size: var(--font-size-12);
    font-weight: 700;
    border-radius: 999px;
    color: #676767;
    padding: 9px 8px 10px;
    transition: 0.2s background-color, 0.2s opacity;
}

.single-jobs-nav-item:not(.active):hover {
    opacity: 0.6;
}

.single-jobs-nav-item.active {
    color: #fff;
    background-color: var(--color-primary);
}

.splide__pagination__page {
    background-color: #D4D4D4;
    opacity: 1;
}

.splide__pagination__page.is-active {
    background-color: var(--color-primary);
}

.splide-wrap--jobs {
    position: relative;
    z-index: 3;
}

.splide-jobs .splide__slide {
    display: grid;
    place-content: center;
}

.splide-jobs .splide__arrow,
.splide-service .splide__arrow {
    background: transparent;
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s;
    visibility: visible;
}
.splide-jobs .splide__arrow img,
.splide-service .splide__arrow img {
    filter: brightness(0) invert(1);
}

.splide-service .splide__arrow {
    top: 91px;
}

.splide-service .splide__arrow:disabled {
    opacity: 0;
    visibility: hidden;
}


.splide-service .splide__arrow--prev {
    left: 55px;
}

.splide-service .splide__arrow--next {
    right: 55px;
}

.splide__arrow--prev img {
    rotate: 180deg;
}

.splide-jobs .splide__slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.jobs-thumbnail-slider {
    background-color: #fff;
    padding: 8px 0 10px 0;
}

.jobs-thumbnail-slider .splide__track {
    padding-inline: 8px !important;
}

.splide__track--nav>.splide__list>.splide__slide {
    border-radius: 8px;
    overflow: hidden;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 3px solid var(--color-primary);
}

.single-job-content {
    padding-inline: var(--padding-inline-sp);
}

.single-job-catch-copy {
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 1.6;
    color: #3c3c3c;
    margin-block-start: 16px;
}

.single-job-pr-text {
    font-size: var(--font-size-14);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-block-start: 16px;
}

.single-job-areas-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-block-start: 30px;
}

.single-job-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.single-job-area {
    font-size: var(--font-size-13);
    font-weight: 500;
}

.single-job-area:first-of-type {
    font-weight: 700;
}

.single-job-area:not(:first-of-type):before {
    content: "/";
    margin-inline-end: 4px;
}

.single-job-store-name {
    font-size: var(--font-size-23);
    font-weight: 700;
    margin-block-start: 8px;
}

.single-job-type {
    font-weight: 700;
    font-size: var(--font-size-14);
    line-height: 1.642;
    color: var(--color-primary);
    margin-block-start: 4px;
}

.single-job-salaries {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 8px;
    margin-block-start: 10px;
}

.single-job-salaries-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: var(--font-size-12);
    min-block-size: 24px;
    border-radius: 999px;
    color: #fff;
    padding: 3px 11px 4px 8px;
}

.single-job-salaries-head:before {
    content: "";
    block-size: 12px;
    inline-size: 7px;
    background: url(../images/icon_yen.svg) no-repeat center 2px / contain;
}

.single-job-salaries-head--salary {
    background-color: var(--color-primary);
}

.single-job-salaries-head--trial-salary {
    background-color: #FD84A1;
}

.single-job-salaries-head--opening-hour {
    background-color: #575757;
}

.single-job-salaries-body {
    font-size: var(--font-size-17);
    font-weight: 500;
}

.single-job-salaries-body--salary {
    font-weight: 700;
    color: var(--color-primary);
}

.single-job-salaries-body--trial-salary {
    color: #FD84A1;
}

.single-job-salaries-body--opening-hour {
    color: #575757;
}

.single-job-head-title,
.page-head-title {
    gap: 6px;
    margin-block-start: 24px;
}
.single-job-head-title:before,
.page-head-title:before{
    block-size: 8px;
    inline-size: 8px;
}

.single-job-feature-list {
    position: relative;
    gap: 4px;
    padding-block-end: 24px;
}

.single-job-feature-list:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    block-size: 1px;
    inline-size: calc(100% + (var(--padding-inline-sp) * 2));
    margin-left: calc(-1 * var(--padding-inline-sp));
    background-color: #DEDEDE;
}

.single-job-agent-report {
    position: relative;
    background: #f4f4f4;
    border: 1px solid #7bdedb;
    border-radius: 8px;
    padding: 16px 16px 24px;
    margin-block-start: 8px;
}

.single-job-agent-report:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 11.6%;
    inline-size: 20px;
    block-size: 10px;
    background: url(../images/speech-bubble_triangle.svg) no-repeat center top / cover;
}

.single-job-agent-last-modified {
    font-size: var(--font-size-13);
    font-weight: 500;
    line-height: 1.615;
    text-align: right;
    color: #9a9b9b;
    border-bottom: 1px solid #7BDEDB;
    padding-block-end: 8px;
    margin-block-end: 16px;
}

.single-job-agent-title {
    font-weight: 700;
    font-size: var(--font-size-14);
    line-height: 1.5;
    color: #3c3c3c;
    margin-block-end: 8px;
}

.single-job-agent-text {
    font-size: var(--font-size-14);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-block-end: 24px;
}

.single-job-agent-barometer-head {
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 1.5;
    color: #3c3c3c;
    margin-block-end: 8px;
}

.single-job-agent-barometer {
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    padding: 16px;
}

.single-job-agent-barometer-item-text {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-11);
    font-weight: 700;
    line-height: 1.9;
    color: #737373;
}

.range-display {
    position: relative;
    inline-size: 100%;
    block-size: 6px;
    border-radius: 999px;
    background: #eee;
    margin-block-start: 8px;
}

.range-display:not(:last-of-type) {
    margin-block-end: 11px;
}

.range-display-point {
    position: absolute;
    top: 50%;
    left: var(--value);
    transform: translate(-50%, -50%);
    inline-size: 17px;
    block-size: 17px;
    background: var(--color-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.08));
}

.single-job-agent-note {
    font-size: var(--font-size-11);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: right;
    color: #a6a7a8;
    margin-block-start: 8px;
}

.single-job-requirements {
    margin-block-end: 40px;
}

.single-job-requirements-item {
    display: grid;
    grid-template-columns: 26.5% auto;
    gap: 32px;
    padding: 16px 14px;
    border-bottom: 1px solid #d4d4d4;
}

.single-job-requirements-item:first-of-type {
    padding-block-start: 0;
}

.single-job-requirements-head {
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 1.5;
}

.single-job-requirements-body {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.5;
}

.bordered-btn {
    display: block;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #bebebe;
    font-weight: bold;
    font-size: var(--font-size-12);
    line-height: 1.9;
    text-align: center;
    color: #969696;
    inline-size: 100%;
    padding-block: 12px;
    margin-block: 16px 40px;
}

.single-jobs .bottom-nav-wrapper {
    block-size: 67px;
}

/* ==============================================
   page
   ============================================== */
.l-page {
    margin-block-end: 80px;
}

.l-inner {
    padding-inline: var(--padding-inline-sp);
}

.l-inner--small {
    padding-inline: 40px;
}

.page-head {
    margin-block: 80px 64px;
}

.page-head--en {
    color: var(--color-primary);
}

/* ==============================================
   guide
   ============================================== */
.guide-head {
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 2;
    text-align: center;
    color: #3c3c3c;
    margin-block-end: 64px;
}

.guide-faq {
    padding-inline: var(--padding-inline-sp);
    padding-block-start: 56px;
}

.guide-faq-question {
    position: relative;
    display: block;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border-radius: 8px;
    inline-size: calc(100% - 22px);
    margin-inline-start: auto;
    margin-block-end: 16px;
    padding-block: 16px;
    text-align: center;
}

.guide-faq-question:before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/speech-bubble_triangle--curved.svg) no-repeat center / contain;
    inline-size: 22px;
    block-size: 24px;
}

.guide-faq-answer {
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #3c3c3c;
}

.guide-faq-answer div {
    margin-block-end: 16px;
}

.guide-faq-answer:not(:last-of-type) {
    margin-block-end: 40px;
}

.guide-service {
    background-color: var(--color-primary);
    padding-block: 80px;
}

.guide-logo-area {
    display: grid;
    place-items: center;
    gap: 8px;
}

.guide-service-head {
    font-size: var(--font-size-18);
    font-weight: 700;
    line-height: 1.166;
    text-align: center;
    color: #fff;
    margin-block-start: 8px;
    margin-block-end: 40px;
}

.guide-step-item {
    display: grid;
    place-items: center;
    width: 181px;
    margin: auto;
}

.guide-service-step {
    font-weight: 900;
    font-size: var(--font-size-14);
    line-height: 1.4;
    border-radius: 8px;
    background: #fff;
    color: var(--color-primary);
    margin-block-start: 16px;
    padding: 3px 16px 5px;
}

.guide-service-step-head {
    font-weight: 700;
    color: #fff;
    margin-block-start: 16px;
}

.guide-service-step-body {
    font-weight: 500;
    font-size: var(--font-size-14);
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: #fff;
    margin-block-start: 16px;
    text-align: center;
}

/* ==============================================
   agents
   ============================================== */
.agents-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-inline: var(--padding-inline-sp);
}

.agents-item {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    border: 2px solid #f3f1f1;
    padding: 16px 27px;
}

.agents-position {
    background: #dcf5f4;
    font-weight: 500;
    font-size: var(--font-size-11);
    line-height: 1.63;
    text-align: center;
    color: #333;
    padding: 3px 16px 2px;
    margin-block-start: 8px;
}
.agents-position:empty {
    background-color: transparent;
}

.agents-name {
    font-weight: 500;
    font-size: var(--font-size-17);
    line-height: 1.05;
    text-align: center;
    color: #333;
    margin-block-start: 8px;
}

.agents-more-button {
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-15);
    text-align: center;
    color: var(--color-primary);
    inline-size: 100%;
    padding: 4px 0 5px;
    margin-block-start: 16px;
    transition: background-color 0.2s, color 0.2s;
}
.agents-more-button:hover {
    background-color: var(--color-primary);
    color: #fff;
}

#detail-dialog {
    position: fixed;
    margin: auto;
    background: transparent;
    overflow: hidden;
    max-inline-size: min(702px, 95vw);
}

#detail-dialog::backdrop {
    background-color: rgba(111, 252, 247, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

body:has(.detail-dialog[open]) {
    filter: blur(4px);
}

#close-dialog {
    position: absolute;
    top: 0;
    right: 0;
}

#dialog-content {
    display: grid;
    place-items: center;
    gap: 40px;
    background: #fff;
    margin-block-start: 32px;
    padding: min(64px, 4.68vw);
    max-height: 90vh;
    overflow-y: auto;
}

.agents-dialog-head {
    display: grid;
    place-items: center;
}

.agents-dialog-position {
    background: #dcf5f4;
    font-weight: 500;
    font-size: var(--font-size-13);
    padding: 3px 16px 3px;
    color: #333333;
}
.agents-dialog-position:empty {
    background-color: transparent;
}

.agents-dialog-name {
    font-weight: 500;
    font-size: var(--font-size-26);
    margin-block: 16px 24px;
}

.agents-dialog-img {
    inline-size: 28.49%;
    block-size: auto;
    min-inline-size: 150px;
}

.agents-dialog-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;

    @media screen and (max-width: 768px) {
        grid-template-columns: none;
        gap: 24px;
    }
}

.c-dl-item {
    display: grid;
    grid-template-columns: max-content auto;
}

.agents-dialog-profile-text {
    font-weight: 500;
    font-size: var(--font-size-14);
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.c-dl-item-head {
    display: grid;
    place-content: center;
    border-top: 1px solid var(--color-primary);
    color: var(--color-primary);
    
}
.c-dl-item-head:last-of-type {
    border-bottom: 1px solid var(--color-primary);
}

.c-dl-item-body {
    border-top: 1px solid #CECECE;
    color: #565656;
    padding-inline-start: 6px;
}
.c-dl-item-body:last-of-type {
    border-bottom: 1px solid #CECECE;
}

.c-dl-item-head,
.c-dl-item-body {
    font-weight: 700;
    font-size: var(--font-size-11);
    line-height: 1.4;
    padding-block: 12px;
    align-content: center;
}

/* ==============================================
   column
   ============================================== */
.column-list {
    display: grid;
    gap: 40px;
    padding-inline: var(--padding-inline-sp);
}

.column-item {
    transition: 0.2s opacity;
}
.column-item:hover {
    opacity: 0.6;
}

.column-meta {
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
}

.column-categories {
    display: inline-flex;
    gap: 0 6px;
    flex-wrap: wrap;
}

.column-category {
    display: grid;
    place-content: center;
    color: var(--color-primary);
    background-color: #fff;
    font-size: var(--font-size-12);
    font-weight: 700;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    padding: 6px 16px 6px;
    margin-block-end: 8px;
}

.column-category--primary {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
}

.column-name {
    font-weight: bold;
    font-size: var(--font-size-17);
    line-height: 1.7;
}

.column-page-content {
    background-color: #FBFBFB;
    padding-inline: var(--padding-inline-sp);
    margin-block-start: 16px;
}

.column-page-name {
    margin-block-end: 40px;
}

.column-page-introduction {
    font-weight: 500;
    font-size: var(--font-size-15);
    line-height: 1.6;
    margin-block-end: 40px;
}
.column-page-introduction:empty {
    margin-block-end: 0;
}

.toc-list {
    display: grid;
    gap: 16px;
    inline-size: 100%;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--color-primary);
    padding: 16px;
}

.toc-item,
.toc-sub-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 10px;
    font-weight: bold;
    font-size: var(--font-size-15);
    line-height: 1.4;
    color: var(--color-primary);
    inline-size: 100%;
}
.toc-item:before,
.toc-sub-item:before{
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--color-primary);
    flex-shrink: 0;
}

.toc-sub-list {
    display: grid;
    gap: 16px;
    margin-inline-start: 19px;
}

.toc-sub-item {
    color: #565656;
}
.toc-sub-item:before {
    background: #565656;
}

.toc-link {
    inline-size: calc(100% - 19px);
    transition: opacity 0.2s;
}
.toc-link:hover {
    opacity: 0.6;
}

.column-page-body h3.wp-block-heading {
    display: grid;
    grid-template-columns: 7px auto;
    gap: 8px;
    font-weight: 700;
    font-size: var(--font-size-22);
    line-height: 1.27;
    color: #333;
    margin-block: 40px 24px;
}
.column-page-body h3.wp-block-heading:before {
    content: "";
    width: 7px;
    height: 100%;
    border-radius: 3.5px;
    background: #0abab5;
}

.column-page-body h4.wp-block-heading {
    font-weight: 700;
    font-size: var(--font-size-18);
    line-height: 1.55;
    border-radius: 10px;
    background: #efefef;
    padding: 16px;
    margin-block: 40px 24px;
}

.column-page-body h5.wp-block-heading {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-18);
    line-height: 1.55;
    color: #333;
    margin-block: 40px 24px;
}
.column-page-body h5.wp-block-heading:after {
    display: block;
    content: "";
    inline-size: 100%;
    block-size: 1px;
    background: var(--color-primary);
    margin-block-start: 8px;
}

.column-page-body p {
    font-weight: 500;
    font-size: var(--font-size-15);
    line-height: 1.6;
    color: #333;
    margin-block: 24px;
}

.column-page-body {
    margin-block-end: 80px;
}

.column-page-related-articles-title {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: var(--font-size-21);
    line-height: 1.333;
    color: #333;
    margin-block-end: 24px;
}
.column-page-related-articles-title:before {
    content: "";
    background: url(../images/icon_bookmark.svg) no-repeat center / contain;
    inline-size: 16px;
    block-size: 20px;
}

.column-page-related-articles {
    display: grid;
    gap: 40px;
    margin-block-end: 80px;
}

.column-page-categories {
    margin-block-end: 80px;
}

.column-page-categories-title {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--font-size-17);
    line-height: 1.7;
    color: #333;
    margin-block-end: 24px;
}
.column-page-categories-title:after {
    display: block;
    content: "";
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--color-primary);
}

.column-page-categories .category-tree {
    display: grid;
    gap: 16px;
    padding-inline: 20px;
}
.column-page-categories .category-tree .cat-item {
    font-weight: 700;
    color: var(--color-primary);
}
.column-page-categories .category-tree a {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    transition: 0.2s opacity;
}

.column-page-categories .category-tree a:before {
    position: relative;
    top: -2px;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}
.column-page-categories .category-tree a:hover {
    opacity: 0.6;
}

.column-page-categories .category-tree .children {
    display: grid;
    gap: 16px;
    margin-block-start: 16px;
}
.column-page-categories .category-tree .children .cat-item {
    font-size: var(--font-size-15);
    font-weight: 500;
    color: #333;
    margin-inline-start: 19px;
}
.column-page-categories .category-tree .children a:before {
    top: -2px;
    width: 6px;
    height: 6px;
    background-color: #333333;
}

/* ==============================================
   company
   ============================================== */
.page-company-item .c-dl-item-head {
    inline-size: 94px;
}
.page-company-map {
    margin-block-start: 40px;
}

/* ==============================================
   terms
   ============================================== */
.c-terms-intro {
    font-weight: 500;
    font-size: var(--font-size-12);
    line-height: 1.5;
    color: #333;
}

.c-terms-head {
    font-weight: 700;
    color: var(--color-primary);
    margin-block: 40px 22px;
}

.c-terms-head:after {
    content: "";
    display: block;
    inline-size: 100%;
    block-size: 1px;
    background: url(../images/term_head_decoration.png);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: contain;
    padding-block-start: 6px;
}

.c-terms-text,
.c-terms-list {
    font-weight: 500;
    font-size: var(--font-size-12);
    line-height: 1.5;
    color: #333;
    padding-inline: var(--padding-inline-sp);
}
.c-terms-text a,
.c-terms-list a {
    color: #2892FF;
    text-decoration: underline;
    transition: opacity 0.2s;
}
.c-terms-text a:hover,
.c-terms-list a:hover {
    opacity: 0.6;
}

/* ==============================================
   sitemap
   ============================================== */
.sitemap-list {
    display: grid;
    gap: 40px;
}

.sitemap-item {
    display: grid;
    gap: 10px;
}
.sitemap-item .sitemap-text {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-weight: 700;
    transition: 0.2s opacity;
    color: var(--color-primary);
    font-size: var(--font-size-19);
    font-weight: 700;
}
.sitemap-item .sitemap-text:before {
    position: relative;
    top: -2px;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}
.sitemap-item .sitemap-text.sitemap-link:hover {
    opacity: 0.6;
}

.sitemap-sub-list {
    display: grid;
    gap: 10px;
    padding-inline-start: 13px;
}

.sitemap-sub-list > .sitemap-item  .sitemap-text {
    font-size: var(--font-size-17);
    color: #333;
}
.sitemap-sub-list>.sitemap-item .sitemap-text:before {
    background-color: #333;
}

/* ==============================================
   404
   ============================================== */
.page-404 {
    padding-inline: var(--padding-inline-sp);
}
.page-404-text {
    font-weight: 500;
    font-size: var(--font-size-12);
    line-height: 1.5;
    color: #333;
}