:root {
    --color-background-ex-light-gray: #f2f3f4;
    --color-background-ex-light-gray-box: #EAEBEC;
    --color-background-gray-line: #efefef;
    --color-background-light-gray: #d5d5d5;
    --color-background-gray: #b6b6b6;
    --color-background-back-gray: #a1a1a1;
    --color-background-dark-gray: #767676;
    --color-background-ex-dark-gray: #505050;
    --color-light-black: #212121;
    --color-light-black-edit: #414549;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-link-text: #094b97;
    --color-save: #328DC9;
    --color-save-pale: #ecf5fa;
    --color-caution: #f52929;
    --color-caution-pale: #ffdddd;
    --color-favorite: #eb5f89;
    --color-favorite-pale: #fae5ec;
    --color-accent-back: #36A78D;
    --color-accent-point: #EE497B;
    --color-accent-point-pale: #CD7575;
    --color-accent-light: #EDD308;
    --color-careerevent-back: #E4EDF1;
    --color-recruitinfo-back: #F8E9E7;
    --color-primary: #2D287F;
    --color-primary-opacity: #2D287Fdd;
    --color-primary-light: #1c3ba0;
    --color-primary-pale: #A5A1E5;
    --color-primary-ex-pale: #E9E8FF;
    --color-notice-cate1:  #4642A6;
    --color-notice-cate2:  #3158B0;
    --color-notice-cate3:  #2D724E;
    --color-notice-cate4:  #3D9A5D;
    --color-notice-cate5:  #58B770;
    --color-notice-cate6:  #C25B00;
    --color-notice-cate7:  #D38F00;
    --color-notice-cate8:  #F3C111;
    --color-notice-cate9:  #A72B2B;
    --color-notice-cate10: #C04040;
    --color-notice-cate11: #D15A77;
    --color-notice-cate12: #2A6E78;
    --color-notice-new: #EE497B;
    --color-jojo: #aa9c37;
    --color-ce01: #0A7C9F;
    --color-ce02: #0A9F57;
    --color-ce03: #A0B211;
    --color-ce04: #C37015;
    --color-ce05: #B01549;
    --color-ce06: #6E23B5;
    --color-ce07: #2E2E8F;
    --color-fundamental-skills1: #e63946;
    --color-fundamental-skills2: #ff9f1c;
    --color-fundamental-skills3: #2ec4b6;
    --color-fundamental-skills4: #3a86ff;
    --color-fundamental-skills5: #8338ec;
    --color-fundamental-skills6: #ff006e;
    --color-mypage-not-selected: #E7AA1B; /* 参加/不参加 未選択 */
    --color-mypage-not-posted: #36A78D; /* 未投稿 */
    --color-mypage-tmp: #CACBCC; /* 一時保存 */
    --color-mypage-applying: #9d20ab; /* 投稿申請中 */
    --color-mypage-remand: #EE0C31; /* 差し戻し */
    --color-mypage-posted: #2041AB; /* 投稿済 */
    /* --font-main: 'Noto Sans JP', sans-serif; */
    /* --font-en: 'Fira Sans', sans-serif; */
    --width-wide: 1600px;
    --width-wide-max: calc(100% - 40px);
    --width-wide-sp: 100%;
    --width-wide-sp-inner: 94vw;
    --width-content-main: 1200px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease-in-out, border-color 0.25s ease-in-out;
    --filter-primary: invert(17%) sepia(29%) saturate(4256%) hue-rotate(229deg) brightness(92%) contrast(102%);
    --filter-primary-light: invert(16%) sepia(91%) saturate(2282%) hue-rotate(220deg) brightness(92%) contrast(94%);
    --filter-link: invert(18%) sepia(28%) saturate(7251%) hue-rotate(203deg) brightness(89%) contrast(93%);
    --filter-light-black-edit: invert(25%) sepia(13%) saturate(256%) hue-rotate(169deg) brightness(95%) contrast(91%);
    --filter-light-gray: invert(70%) sepia(0%) saturate(3146%) hue-rotate(340deg) brightness(88%) contrast(104%);
    --filter-accent-back: invert(57%) sepia(40%) saturate(607%) hue-rotate(116deg) brightness(90%) contrast(88%);
    --filter-caution: invert(21%) sepia(84%) saturate(4082%) hue-rotate(351deg) brightness(103%) contrast(92%);
    --filter-fb-status1: invert(69%) sepia(93%) saturate(492%) hue-rotate(346deg) brightness(94%) contrast(92%);
    --filter-white: brightness(0) invert(1);
    --font-main: "Zen Kaku Gothic New", sans-serif;
    --font-en: 'Roboto Mono', monospace;
    --font-noto: "Noto Sans JP", sans-serif;
    --font-mix: "ibmnumber", "Zen Kaku Gothic New", sans-serif;
}

/* ----------------------------- */
/* common */
/* ----------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-snap-type: y proximity;
    scroll-padding-top: 76px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-weight: 500;
    color: var(--color-light-black);
}

body.no-scroll {
    overflow: hidden;
}

ol, ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: inherit;
    position: relative;
    color: var(--color-link-text);
}

a.both-margin {
    margin: 0 3px;
}

button {
    position: relative;
}

a:after,
button:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--color-link-text);
    bottom: -2px;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.3s;
}

a.caution:after,
button.caution:after {
    background: var(--color-caution);
}

a.white,
button.white {
    color: var(--color-white);
}

a.white.under:after,
button.white.under:after {
    transform: scale(1, 1);
}

a.white::after,
button.white::after {
    background: var(--color-white);
}

a.noline {
    transition: var(--transition);
}

a.noline::after {
    content: none;
}

a:hover::after {
    transform: scale(1, 1);
    transform-origin: left top;
}

a.external:before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    top: 50%;
    right: -28px;
    background-image: url(../image/arr_other.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-link);
    background-size: 100%;
    background-repeat: no-repeat;
}

.inline {
    display: inline-block;
}

button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none
}

.pointer {
    cursor: pointer;
}

p {
    font-size: 1.6rem;
    margin-bottom: 16px;
    line-height: 26px;
}

p:last-child {
    margin-bottom: 0;
}

.pagination {
    background-color: var(--color-background-ex-light-gray);
    padding: 24px 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 1.6rem;
}

.pagination .pagination-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.pagination .pagination-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
}

.pagination .pagination-list li {
    color: var(--color-primary);
}

.pagination .pagination-list li a {
    padding: 5px 8px 6px;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    min-width: 30px;
    display: block;
    text-align: center;
    transition: var(--transition);
    box-sizing: border-box;
}

.pagination .pagination-list li a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination .pagination-list li.move a {
    border: 1px solid var(--color-primary-ex-pale);
    background-color: var(--color-primary-ex-pale);
    position: relative;
    width: 100%;
    height: 35px;
}

.pagination .pagination-list li.move a:hover {
    border: 1px solid var(--color-primary);
}

.pagination .pagination-list li.move.prev a::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 16px;
    top: 50%;
    left: 50%;
    background-image: url(../image/prev.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pagination .pagination-list li.move.prev-max a::before {
    content: "";
    position: absolute;
    width: 10.5px;
    height: 16px;
    top: 50%;
    left: 50%;
    background-image: url(../image/prev-max.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pagination .pagination-list li.move.next a::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 16px;
    top: 50%;
    left: 50%;
    background-image: url(../image/next.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pagination .pagination-list li.move.next-max a::before {
    content: "";
    position: absolute;
    width: 10.6px;
    height: 16px;
    top: 50%;
    left: 50%;
    background-image: url(../image/next-max.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pagination .pagination-list li.active a {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.pagination.top {
    margin-top: 40px;
    margin-bottom: 32px;
}

.pagination.bottom {
    margin-top: 32px;
    margin-bottom: 40px;
}

.caution {
    color: var(--color-caution);
}

.c-label.rest {
    border: 1px solid var(--color-caution);
    color: var(--color-caution);
    background-color: var(--color-white);
    margin-left: 4px;
}

/* ----------------------------- */
/* header */
/* ----------------------------- */

header {
    width: 100%;
    background-color: var(--color-white);
}

header > .container {
    width: var(--width-wide);
    max-width: var(--width-wide-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    transition: var(--transition);
}

header > .container .logo,
#sp-menu-body > .sp-menu-logo .logo  {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 20px;
    height: 42px;
}

header > .container .logo img,
#sp-menu-body > .sp-menu-logo .logo img {
    flex-basis: 180px;
    width: 180px;
    filter: var(--filter-primary);
    transition: var(--transition);
}

header > .container .logo .site-title,
#sp-menu-body > .sp-menu-logo .logo .site-title {
    font-size: 1.5rem;
    line-height: 20px;
    background-color: var(--color-primary-ex-pale);
    border-radius: 30px;
    padding: 3px 16px 4px;
    transition: var(--transition);
}

#sp-menu-body > .sp-menu-logo .logo .site-title {
    background-color: var(--color-primary);
    color: var(--color-white);
}

header > .container .menu-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 16px;
}

header > .container .sp-menu-wrap {
    display: none;
}

header > .container .menu-icons .menu-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    font-size: 1.1rem;
    color: var(--color-primary);
    min-width: 55px;
    position: relative;
}

header > .container .menu-icons .menu-item.on:after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-accent-point);
  position: absolute;
  top: -1px;
  right: 0;
  left: unset;
  border: 1px solid var(--color-white);
  transform: unset;
  transform-origin: initial;
}

header > .container .menu-icons .menu-item img {
    width: 24px;
    height: 24px;
    filter: var(--filter-primary);
    transition: var(--transition);
}

header > .container .menu-icons .menu-item:hover {
    color: var(--color-primary-light);
}

header > .container .menu-icons .menu-item:hover img {
    filter: var(--filter-primary-light);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-list .info-list-tr {
    display: flex;
    flex-direction: row;
    gap: 2px;
    line-height: 19px;
}

.info-list .info-list-tr .info-list-th,
.info-list .info-list-tr .info-list-td {
    padding: 6px 16px;
}

.info-list .info-list-tr .info-list-td.title,
.info-list .info-list-tr .info-list-th.title {
    text-align: center;
    background-color: var(--color-primary-ex-pale);
    flex-basis: 180px;
    width: 180px;
    min-width: 100px;
}

.info-list .info-list-tr .info-list-th.title {
    background-color: var(--color-primary-pale);
    color: var(--color-white);
}

.info-list .info-list-tr .info-list-th.title.data {
    min-width: unset;
}

.info-list .info-list-tr .info-list-th.title.full {
    min-width: unset;
    width: 180px;
}

.info-list .info-list-tr .info-list-td.data {
    text-align: center;
    background-color: var(--color-background-ex-light-gray);
    flex-basis: 180px;
}

.info-list .info-list-tr .info-list-td.data.full {
    text-align: left;
    flex-grow: 1;
}


/* ----------------------------- */
/* グロナビ */
/* ----------------------------- */

.global-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--color-primary);
    font-size: 1.6rem;
    margin-bottom: 40px;
}
.global-nav.top {
    margin-bottom: 70px;
}

.global-nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    width: var(--width-wide);
    max-width: var(--width-wide-max);
    margin: 0 auto;
}

.global-nav li {
    margin: 0;
    border-left: 1px solid var(--color-white);
    flex-basis: calc(100% / 4);
    text-align: center;
    line-height: 20px;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.global-nav li:last-child {
    border-right: 1px solid var(--color-white);
}

.global-nav a {
    color: #fff;
    text-decoration: none;
    padding: 16px;
    display: block;
    transition: var(--transition);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-nav a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-background-ex-light-gray);
}

.global-nav li span.label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: default;
}

.global-nav li .submenu {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    top: calc(100% + 1px);
    left: 0;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, visibility 0.3s ease-in-out;
    background-color: var(--color-primary-ex-pale);
    padding: 0 10px;
    border-radius: 0 0 16px 16px;
    max-height: 0;
    overflow: hidden;
}

.global-nav li .submenu a {
    color: var(--color-light-black);
    border-radius: 8px;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, background-color 0.3s;
    opacity: 0;
}

.global-nav li:hover .submenu {
    max-height: 400px;
    padding: 10px;
}

.global-nav li:hover .submenu a {
    opacity: 1;
}

.global-nav li .submenu a:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* ----------------------------- */
/* font */
/* ----------------------------- */

.font-en-100 {
    font-family: var(--font-en);
    font-weight: 100;
    font-style: normal;
}

.font-en-200 {
    font-family: var(--font-en);
    font-weight: 200;
    font-style: normal;
}

.font-en-300 {
    font-family: var(--font-en);
    font-weight: 300;
    font-style: normal;
}

.font-en-400 {
    font-family: var(--font-en);
    font-weight: 400;
    font-style: normal;
}

.font-en-500 {
    font-family: var(--font-en);
    font-weight: 500;
    font-style: normal;
}

.font-en-600 {
    font-family: var(--font-en);
    font-weight: 600;
    font-style: normal;
}

.font-en-700 {
    font-family: var(--font-en);
    font-weight: 700;
    font-style: normal;
}

.font-en-800 {
    font-family: var(--font-en);
    font-weight: 800;
    font-style: normal;
}

.font-en-900 {
    font-family: var(--font-en);
    font-weight: 900;
    font-style: normal;
}

.font-en-italic {
    font-style: italic;
}

/* ----------------------------- */
/* Layout */
/* ----------------------------- */

main {
    width: 100%;
}

.container-main-wide {
    width: var(--width-wide);
    max-width: var(--width-wide-max);
    margin: 0 auto;
}

.container-main {
    width: var(--width-content-main);
    max-width: var(--width-wide-max);
    margin: 0 auto;
}

.container-full {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
}

.container-inner {
    display: flex;
    flex-direction: row;
    column-gap: 32px;
    margin-top: 40px;
}

.container-inner.mb {
    margin-bottom: 70px;
}

.container-inner.side-margin {
    margin: 40px 32px;
}

.container-inner .anker-wrap {
    flex-basis: 250px;
    width: 250px;
}

.container-inner .anker-wrap .anker-wrap-inner {
    position: sticky;
    top: 76px;
}

.container-inner .section-wrap {
    flex-basis: calc(100% - 282px);
    width: calc(100% - 282px);
}

.container-inner .section-wrap.full {
    flex-basis: 100%;
    width: 100%;
}

.anker-wrap .anker-list {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

.anker-wrap .anker-list > li {
    display: flex;
}

.anker-wrap .anker-list > li > a {
    padding: 8px 24px 9px;
    text-align: left;
    font-size: 1.6rem;
    line-height: 24px;
    border-radius: 0 40px 40px 0;
    width: 100%;
    text-decoration: none;
    color: var(--color-black);
}

.anker-wrap .anker-list > li > a:hover {
    background-color: var(--color-primary-ex-pale);
}

.anker-wrap .anker-list.black > li > a:hover {
    background-color: var(--color-background-ex-light-gray);
}

.anker-wrap .anker-list > li > a.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.anker-wrap .anker-list.black > li > a.active {
    background-color: var(--color-black);
}

.anker-wrap.edit .anker-list.black > li > a.active {
    background-color: var(--color-light-black-edit);
}

.anker-wrap .anker-list > li a.sub {
    padding-left: 26px;
    color: var(--color-background-ex-dark-gray);
    font-size: 1.5rem;
}

.anker-wrap .anker-list > li a.sub:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    margin-right: 8px;
    color: var(--color-black);
}

.anker-wrap .anker-list > li a.sub.active {
    color: var(--color-white);
}

.anker-wrap .anker-list > li a.sub.active:before {
    color: var(--color-white);
}

.global-nav + .breadcrumbs {
    margin-top: -40px;
    margin-bottom: 40px;
    background-color: var(--color-background-ex-light-gray);
    overflow: auto;
    white-space: nowrap;
}

.breadcrumbs > ul {
    width: var(--width-wide);
    max-width: var(--width-wide-max);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 24px;
    line-height: 22px;
    font-size: 1.3rem;
    padding: 3px 0;
}

.breadcrumbs > ul > li {
    position: relative;
}

.breadcrumbs > ul > li > a {
    color: var(--color-primary) !important;
}

.breadcrumbs > ul > li:not(:last-child):before {
    content: "/";
    position: absolute;
    top: 50%;
    right: -14.5px;
    transform: translate(0, -50%);
}

.breadcrumbs > ul > li.current {
    opacity: .5;
}

#sp-menu-body {
    display: none;
}

/* ----------------------------- */
/* utility */
/* ----------------------------- */

.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-56 { margin-top: 56px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-48 { margin-bottom: 48px !important; }

.w-100 { width: 100%; }

.w-220px { width: 220px; }
.w-300px { width: 300px; }
.w-480px { width: 480px; }

.ta-center { text-align: center; }
.ta-left { text-align: left; }

.b1w { border: 1px solid var(--color-white); }

.br-4 { border-radius: 4px; }
.br-6 { border-radius: 6px; }
.br-8 { border-radius: 8px; }
.br-12 { border-radius: 12px; }
.br-16 { border-radius: 16px; }
.br-24 { border-radius: 24px; }

.bg-gray { background-color: var(--color-background-ex-light-gray); }

.p-24-32 { padding: 24px 32px;}

.pc-item { display: block; }
.pc-item-il { display: inline-block; }
.sp-item { display: none; }
.sp-item-flex { display: none !important; }

/* ----------------------------- */
/* button */
/* ----------------------------- */

.btn-common01 {
    font-size: 1.6rem;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 40px;
    padding: 15px 24px 16px;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    transition: var(--transition);
}

.btn-common01.white {
    color: var(--color-primary);
    background-color: var(--color-white);
}

.btn-common01:hover {
    background-color: var(--color-primary-light);
}

.btn-common01.white:hover {
    color: var(--color-white);
}

.btn-common01 span.external {
    position: relative;
    padding-right: 8px;
    margin-right: 18px;
}

.btn-common01 span.external::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: -16px;
    background-image: url(../image/arr_other.svg);
    transform: translate(0, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: var(--transition);
}

.btn-common01:hover span.external::before {
    filter: var(--filter-white);
}

.btn-common02 {
    font-size: 1.6rem;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 40px;
    padding: 15px 24px 16px;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    transition: var(--transition);
}

.btn-common02.condition-edit {
    padding: 15px 42px 16px 24px;
    position: relative;
}

.btn-common02.condition-edit::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 21px;
    top: 50%;
    left: calc(50% + 56px);
    background-image: url(../image/search_history.svg);
    transform: translate(0, -50%);
    filter: var(--filter-primary);
    background-size: 100%;
    background-repeat: no-repeat;
}

.btn-common02:hover {
    background-color: var(--color-primary-ex-pale);
}

.btn-more {
    font-size: 1.6rem;
    border: solid 1px var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 6px 40px 7px;
    min-width: 240px;
    display: inline-block;
    text-align: center;
}

.btn-more:hover {
    border: solid 1px var(--color-primary);
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 6px;
    padding: 6px 40px 7px;
    min-width: 240px;
    display: inline-block;
    text-align: center;
}

.btn-edit {
    font-size: 1.6rem;
    border: solid 1px var(--color-black);
    color: var(--color-black);
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 12px 24px 13px 52px;
    display: inline-block;
    text-align: center;
}

.btn-edit:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translate(0, -50%);
    background-image: url(../image/ico-edit.svg);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    transition: var(--transition);
}

.btn-edit:hover {
    border: solid 1px var(--color-black);
    color: var(--color-white);
    background-color: var(--color-black);
}

.btn-edit:hover:before {
    filter: var(--filter-white);
}

.btn-outline {
    font-size: 1.6rem;
    border: solid 1px var(--color-black);
    color: var(--color-black);
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 12px 24px 13px;
    display: inline-block;
    text-align: center;
}

.btn-outline:hover {
    border: solid 1px var(--color-black);
    color: var(--color-white);
    background-color: var(--color-black);
}

.btn-delete {
    font-size: 1.6rem;
    border: solid 1px var(--color-black);
    color: var(--color-black);
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 12px 24px 13px 50px;
    min-width: 200px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-delete:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translate(0, -50%);
    background-image: url(../image/ico-trash.svg);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    transition: var(--transition);
}

.btn-delete:hover {
    border: solid 1px var(--color-black);
    color: var(--color-white);
    background-color: var(--color-black);
}

.btn-delete:hover:before {
    filter: var(--filter-white);
}

.btn-delete:active {
  transform: scale(0.95);
}

.btn-delete.deleted {
  opacity: 0;
  transform: scale(0);
}

.trash-wrap button {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-add {
    font-size: 1.4rem;
    border: solid 1px var(--color-light-black-edit);
    color: var(--color-light-black-edit);
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 7px 80px 8px;
    display: inline-block;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}

.btn-add span {
    position: relative;
    padding-left: 12px;
}

.btn-add span em {
    font-style: normal;
}

.btn-add span:before {
    content: "";
    position: absolute;
    top: 53%;
    left: -12px;
    transform: translate(0, -50%);
    background-image: url(../image/ico-add.svg);
    background-repeat: no-repeat;
    filter: var(--filter-light-black-edit);
    width: 15px;
    height: 15px;
    transition: var(--transition);
}

.btn-add:hover {
    border: solid 1px var(--color-light-black-edit);
    color: var(--color-white);
    background-color: var(--color-light-black-edit);
}

.btn-add:hover span:before {
    filter: var(--filter-white);
}

.btn-white-line {
    border: 1px solid var(--color-white);
    padding: 6px 24px 7px;
    border-radius: 20px;
    color: var(--color-white);
    transition: var(--transition);
}

.btn-white-line:hover {
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
    color: var(--color-light-black);
}

.btn-card-action {
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
    padding: 6px 24px 7px;
    border-radius: 20px;
    transition: var(--transition);
    font-size: 1.5rem;
}

.btn-card-action.basic {
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.btn-card-action:hover {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-favorite {
    border: 1px solid var(--color-background-back-gray);
    color: var(--color-background-gray);
    background-color: var(--color-white);
    font-size: 1.6rem;
    line-height: 24px;
    padding: 10px 32px 11px;
    border-radius: 10px;
    transition: var(--transition);
    position: relative;
    height: 36px;
}

.btn-favorite::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 20px;
    top: 50%;
    left: 50%;
    background-image: url(../image/ico-clip.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-light-gray);
    background-size: 100%;
    background-repeat: no-repeat;
}

.btn-favorite-wrap {
    display: flex;
    align-items: flex-start;
}

.btn-favorite.active {
    border: 1px solid var(--color-favorite);
    background-color: var(--color-favorite);
    color: var(--color-white);
}

.btn-favorite:hover {
    background-color: var(--color-favorite-pale);
    color: var(--color-white);
}

.btn-favorite.active:hover {
    background-color: var(--color-favorite);
}

.btn-favorite.active::before {
    filter: var(--filter-white);
}

.btn-back {
    font-size: 1.6rem;
    border: solid 1px var(--color-background-back-gray);
    color: var(--color-white);
    background-color: var(--color-background-back-gray);
    border-radius: 6px;
    padding: 12px 24px 13px;
    display: inline-block;
    text-align: center;
    width: 160px;
    transition: var(--transition);
}

.btn-back:hover {
    border: solid 1px var(--color-background-gray);
    background-color: var(--color-background-gray);
}

.btn-save {
    font-size: 1.6rem;
    border: solid 1px var(--color-save);
    color: var(--color-white);
    background-color: var(--color-save);
    border-radius: 6px;
    padding: 12px 24px 13px;
    display: inline-block;
    text-align: center;
    width: 160px;
    transition: var(--transition);
    cursor: pointer;
}

.btn-tmp-white {
    font-size: 1.6rem;
    border: solid 1px var(--color-white);
    color: var(--color-light-black);
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 12px 24px 13px;
    display: inline-block;
    text-align: center;
    width: 160px;
    transition: var(--transition);
    cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-background-light-gray);
  color: var(--color-background-dark-gray);
  border-color: var(--color-background-gray);
  pointer-events: none;
}

button:disabled:hover {
  background-color: #ccc;
  color: #666;
  border-color: #bbb;
}

.btn-save:hover {
    border: solid 1px #4fa7e1;
    background-color: #4fa7e1;
}

.btn-tmp-white:hover {
  opacity: 0.95;
}

.btn-save.outline {
    border: solid 1px var(--color-save);
    color: var(--color-save);
    background-color: var(--color-white);
}

.btn-save.outline:hover {
    background-color: var(--color-save-pale);
}

.btn-set {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-set.center {
    justify-content: center;
}

/* ----------------------------- */
/* セクション（共通） */
/* ----------------------------- */

section {
    width: 100%;
    margin-top: 70px;
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

section.data {
    margin-top: 40px;
}

section.narrow {
    width: 800px;
    margin: auto;
    margin-top: 48px;
    margin-bottom: 70px;
}

section.data:first-child {
    margin-top: 0;
}

section.last {
    margin-bottom: 70px;
}

section.side {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.section-inner {
    margin-top: 32px;
}

section .section-title {
    color: var(--color-primary);
    background-color: var(--color-primary-ex-pale);
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    text-align: center;
    padding: 12px 0;
    border-radius: 100px;
    margin: 0 auto;
    width: 810px;
    margin-bottom: 40px;
}

section .section-title .jp {
    font-size: 3.0rem;
    font-weight: 800;
}

section .section-title .en {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

section .section-title .en:before,
section .section-title .en:after {
    content: '';
    width: 16px;
    height: 1px;
    background-color: var(--color-primary);
}

section.side .section-title {
    flex-basis: 350px;
    width: 350px;
    border-radius: 0 100px 100px 0;
    margin-left: 0;
    margin-right: 0;
}

section.side .section-content {
    flex-grow: 1;
}

/* ----------------------------- */
/* セクション（ポートフォリオ） */
/* ----------------------------- */

.portfolio-wrap {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
}

.portfolio-wrap .left {
    width: calc((100% - 64px) / 3);
    min-width: 300px;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.portfolio-wrap .right {
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
}

.portfolio-wrap .right-top {
    width: 100%;
}

.progress-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.progress-wrap .progress-view {
    position: relative;
    width: 100%;
    height: 77px;
}

.progress-wrap .progress-view .bar {
    border: 1px solid var(--color-white);
    height: 12px;
    border-radius: 6px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.progress-wrap .progress-view .bar.base {
    background-color: var(--color-background-gray);
    width: 100%;
}

.progress-wrap .progress-view .bar.progress {
    background-color: var(--color-accent-point);
}

.progress-wrap .progress-view .number {
    color: var(--color-white);
    background-color: var(--color-accent-point);
    padding: 12px 16px;
    border-radius: 8px;
    display: inline-block;
    position: absolute;
    bottom: 24px;
    left: 0;
    transform: translateX(calc(-50% - 20px));
    white-space: nowrap;
}

.progress-wrap .progress-view .number {
    color: var(--color-white);
    background-color: var(--color-accent-point);
    padding: 12px 16px;
    border-radius: 8px;
    display: inline-block;
    position: absolute;
    bottom: 24px;
    left: 0;
    transform: translateX(calc(-50% - 20px));
    white-space: nowrap;
}

.progress-wrap .progress-view .number .number-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-wrap .progress-view .number .number-inner:after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--color-accent-point);
    transform: translate(-50%,55%) rotate(45deg);
    transform-origin:center center;
}

.progress-wrap .progress-view .number .num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 25px;
}

.progress-wrap .progress-view .number .percent {
    font-size: 1.6rem;
    font-weight: 600;
}

.progress-average {
    margin: 0 auto;
    font-size: 1.4rem;
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 4px 24px 8px;
}

.progress-average .ratio {
    font-size: 2.2rem;
    font-weight: 600;
    background-color: var(--color-white);
}

.progress-average .percent {
    font-weight: 600;
}

.fundamental-skills-wrap {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.fundamental-skills-wrap .fundamental-skills-detail {
    border-radius: 8px;
    background-color: var(--color-white);
    padding: 24px;
    flex-basis: 50%;
    width: 50%;
    min-width: 460px;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.fundamental-skills-wrap .fundamental-skills-data {
    border-radius: 8px;
    background-color: var(--color-white);
    padding: 20px 24px;
    flex-grow: 1;
    width: calc(50% - 24px);
    height: 420px;
}

.fundamental-skills-wrap .fundamental-skills-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 16px;
}

.fundamental-skills-wrap .fundamental-skills-list .fundamental-skills-card {
    background-color: var(--color-primary-ex-pale);
    padding: 16px;
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.fundamental-skills-wrap .fundamental-skills-list .fundamental-skills-card .number {
    background-color: var(--color-white);
    padding: 5px 12px 6px;
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 1.8rem;
    line-height: 25px;
    font-weight: 600;
    text-align: center;
}

.fundamental-skills-wrap .fundamental-skills-list .fundamental-skills-card .number.red {
    color: var(--color-accent-point);
}

#fundamental-skills-chart {
    padding: 16px;
    height: 480px;
}

#fundamental-skills .trash-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

#fundamental-skills .trash-wrap .btn-delete .date {
  color: var(--color-primary);
  margin-right: 3px;
  transition: .3s;
}

#fundamental-skills .trash-wrap .btn-delete:hover .date {
  color: var(--color-accent-light);
}

.search-btn-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.search-btn-wrap .search-btn {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 60px 40px;
    text-align: center;
    border-radius: 24px;
    transform: var(--transition);
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.search-btn-wrap .search-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.search-btn-wrap .search-btn .inner {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.search-btn-wrap .search-btn .inner .ttl {
    font-size: 3.2rem;
    font-weight: 700;
}

.search-btn-wrap .search-btn .inner .num-box {
    font-size: 1.6rem;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.search-btn-wrap .search-btn .inner .num-box .text {
    margin-bottom: 12px;
}

.search-btn-wrap .search-btn .inner .num-box .num {
    font-size: 5.6rem;
}

/* ----------------------------- */
/* 共通コンポーネント */
/* ----------------------------- */

.c-notice-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.c-notice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-notice-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background-color: var(--color-background-ex-light-gray);
    padding: 16px 20px;
    border-radius: 8px;
}

.c-notice-list .date-wrap {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.date-wrap .label {
    padding: 1px 16px;
    border-radius: 12px;
    line-height: 16px;
    color: var(--color-white);
    font-size: 1rem;
}

.date-wrap .label.cate1 {
    background-color: var(--color-notice-cate1);
}

.date-wrap .label.cate2 {
    background-color: var(--color-notice-cate2);
}

.date-wrap .label.cate3 {
    background-color: var(--color-notice-cate3);
}

.date-wrap .label.cate4 {
    background-color: var(--color-notice-cate4);
}

.date-wrap .label.cate5 {
    background-color: var(--color-notice-cate5);
}

.date-wrap .label.cate6 {
    background-color: var(--color-notice-cate6);
}

.date-wrap .label.cate7 {
    background-color: var(--color-notice-cate7);
}

.date-wrap .label.cate8 {
    background-color: var(--color-notice-cate8);
}

.date-wrap .label.cate9 {
    background-color: var(--color-notice-cate9);
}

.date-wrap .label.cate10 {
    background-color: var(--color-notice-cate10);
}

.date-wrap .label.cate11 {
    background-color: var(--color-notice-cate11);
}

.date-wrap .label.cate12 {
    background-color: var(--color-notice-cate12);
}

.date-wrap .label.new {
    border: 1px solid var(--color-notice-new);
    color: var(--color-notice-new);
    background-color: #fdffa3;
    border-radius: 0;
    padding: 1px 8px;
    line-height: 15px;
}

.c-notice-list .date-wrap .label.type {
    padding: 1px 8px;
    border-radius: 0;
    background-color: var(--color-background-dark-gray);
}

.c-notice-list .date-wrap .date {
    font-size: 1.3rem;
    color: var(--color-light-black);
    line-height: 17px;
    margin-top: 1px;
}

.c-page-title.c-notice-list .date-wrap .date {
    font-size: 1.4rem;
}

.c-page-title.c-notice-list .date-wrap .label {
    font-size: 1.2rem;
    padding: 1px 16px;
    line-height: 16px;
}

.c-page-title.c-notice-list .date-wrap .label.new,
.c-page-title.c-notice-list .date-wrap .label.type {
    padding: 1px 8px;
}

.c-notice-list .title {
    font-size: 1.4rem;
}

.c-gray-box {
    background-color: var(--color-background-ex-light-gray);
    padding: 24px 32px;
    font-size: 1.6rem;
}

.c-gray-box.center {
    text-align: center;
}

.c-gray-box.radius {
    border-radius: 16px;
}

.c-gray-box .c-gray-box-title {
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-bottom: 24px;
}

.c-checklist {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.c-checklist li {
    background-color: var(--color-white);
    font-size: 1.6rem;
    padding: 6px 24px 7px;
    text-align: left;
    border-radius: 20px;
}

.c-page-title {
    border: 1px solid var(--color-primary);
    border-radius: 24px;
    position: relative;
}

.c-page-title.notice {
    border: none;
    background-color: var(--color-background-ex-light-gray);
    border-radius: 16px;
    position: relative;
    padding: 48px 100px;
}

.c-page-title.notice h1 {
    font-size: 4.0rem;
    line-height: 48px;
}

.container-main.black .c-page-title {
    border: 1px solid var(--color-black);
}

.c-page-title.edit {
    border: none;
    background-color: var(--color-background-ex-light-gray);
}

.c-page-title .title {
    font-size: 3.2rem;
    padding: 56px 50px 60px 96px;
    line-height: 42px;
    color: var(--color-primary);
}

.c-page-title.edit .title {
    padding: 45px 64px 49px 146px;
}

.c-page-title.labeled .title {
    padding-top: 80px;
    padding-bottom: 44px;
    padding-left: 312px;
}

.c-page-title.labeled {
    position: relative;
    min-height: 208px;
}

.c-page-title.labeled .c-label {
    position: absolute;
    top: 44px;
    left: 282px;
    font-size: 1.6rem;
    padding: 4px 12px 5px;
}

.c-page-title.labeled .c-label.fy {
    padding: 4px 32px 5px;
}

.c-page-title.labeled .charm-img-title {
    position: absolute;
    top: 44px;
    left: 50px;
    width: 200px;
    height: 120px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.c-page-title.labeled .charm-img-title img {
    width: 100%;
}

.container-main.black .c-page-title .title {
    color: var(--color-black);
}

.c-page-title.edit .title {
    color: var(--color-light-black);
}

.c-page-title:before {
    content: "";
    position: absolute;
    left: 64px;
    top: calc(50% + 2px);
    transform: translate(0, -50%);
    height: calc(100% - 114px);
    width: 6px;
    border-radius: 3px;
    background-color: var(--color-primary);
}

.c-page-title.notice:before {
    content: none;
}

.c-page-title.labeled:before {
    top: calc(50% + 19px);
    height: calc(100% - 125px);
    left: 282px;
}

.c-page-title.edit:before {
    content: "";
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translate(0, -50%);
    height: 62px;
    width: 62px;
    border-radius: 6px;
    background-color: var(--color-light-black-edit);
}

.c-page-title.edit:after {
    content: "";
    position: absolute;
    width: 32px;
    height: 29px;
    top: 50%;
    left: 79px;
    background-image: url(../image/ico-edit.svg);
    transform: translate(0, -50%);
    filter: var(--filter-white);
    background-size: 100%;
    background-repeat: no-repeat;
}

.container-main.black .c-page-title:before {
    background-color: var(--color-black);
}

.title01 {
    font-size: 2.2rem;
    font-weight: 600;
    padding: 10px 24px 11px;
    line-height: 30px;
    color: var(--color-light-black);
    background-color: var(--color-primary-ex-pale);
    margin-top: 40px;
    margin-bottom: 32px;
    letter-spacing: 1px;
}

.section.data:first-child .title01 {
    margin-top: 0;
}

.title03 {
    font-size: 1.8rem;
    font-weight: 600;
    padding-left: 16px;
    position: relative;
    line-height: 21px;
    color: var(--color-primary);
}

.title03:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    border-radius: 2px;
    background-color: var(--color-primary);
}

.title03.b {
    font-size: 2.0rem;
    padding-left: 18px;
    line-height: 28px;
}

.title03.b:before {
    width: 6px;
    border-radius: 3px;
}

.title01.black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.title03.black:before {
    background-color: var(--color-black);
}

.title03.black {
    color: var(--color-black);
}

.title04 {
    font-size: 2.4rem;
    line-height: 32px;
    margin-bottom: 32px;
    color: var(--color-light-black);
    background: var(--color-background-ex-light-gray);
    padding: 30px 30px 33px 50px;
    border-radius: 16px;
    position: relative;
}
.title04:after {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 32px;
    width: 6px;
    height: calc(100% - 60px);
    content: '';
    opacity: .2;
    border-radius: 3px;
    background: #5f7276;
}

.table {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 1.4rem;
    line-height: 24px;
    margin-top: 24px;
}

.table span.sub {
    margin-top: 16px;
    display: block;
}

.container-full .section-inner {
    width: calc(100% - 32px);
}

.table .table-tr {
    display: flex;
    flex-direction: row;
    gap: 0;
    border-top: 1px solid var(--color-background-light-gray);
}

.table .table-tr .tr-inner {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.table .table-tr.col2,
.table .table-tr.col3  {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.table .table-tr.col2 .tr-inner  {
    flex-basis: 50%;
    min-width: 50%;
}

.table .table-tr.col3 .tr-inner  {
    flex-basis: calc(100% / 3);
    min-width: calc(100% / 3);
}

.table .table-tr:last-child {
    border-bottom: 1px solid var(--color-background-light-gray);
}

.table .table-th {
    flex-basis: 180px;
    width: 180px;
    background-color: var(--color-background-ex-light-gray);
    padding: 16px;
    text-align: center;
    color: var(--color-background-dark-gray);
}

.table .table-th.short {
    flex-basis: 150px;
    width: 150px;
    background-color: var(--color-background-ex-light-gray);
    padding: 16px;
    text-align: center;
    color: var(--color-background-dark-gray);
}

.table .table-td {
    flex-basis: calc(100% - 160px);
    width: calc(100% - 160px);
    flex-grow: 1;
    padding: 16px 24px;
}

.table .hosoku {
    display: block;
    font-size: 1.3rem;
    line-height: 19px;
    margin-top: 6px;
    color: var(--color-background-dark-gray);
}

.c-company-base-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
}

.c-company-base-info .content-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.c-company-base-info .company-name {
    font-size: 3.0rem;
    font-weight: 600;
}

.c-company-base-info .label-wrap {
    display: flex;
    flex-direction: row;
    gap: 4px 10px;
    flex-wrap: wrap;
}

.c-company-base-info .industry {
    font-size: 1.4rem;
    line-height: 22px;
}

.c-label {
    font-size: 1.3rem;
    line-height: 18px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: var(--color-white);
}

.c-label.jojo {
    background-color: var(--color-jojo);
}

.c-label.ce01 { background-color: var(--color-ce01); }
.c-label.ce02 { background-color: var(--color-ce02); }
.c-label.ce03 { background-color: var(--color-ce03); }
.c-label.ce04 { background-color: var(--color-ce04); }
.c-label.ce05 { background-color: var(--color-ce05); }
.c-label.ce06 { background-color: var(--color-ce06); }
.c-label.ce07 { background-color: var(--color-ce07); }

.c-label.fy {
    font-size: 1.3rem;
    line-height: 19px;
    padding: 1px 24px;
    border-radius: 30px;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.process {
    padding: 16px;
    background-color: #a1a1a1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.process > li {
    background-color: var(--color-white);
    border-radius: 4px;
    padding: 7px 24px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.process > li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 40px;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--color-accent-light);
    width: 0;
    height: 0;
}

.process > li > span.text {
    font-size: 1.4rem;
    line-height: 22px;
}

.process > li > span.subtext {
    font-size: 1.3rem;
    color: var(--color-background-dark-gray);
    margin-top: 0;
    line-height: 18px;
}

/* ----------------------------- */
/* フォーム */
/* ----------------------------- */

.cbx {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}
.cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid var(--color-background-dark-gray);
    transition: all 0.2s ease;
}
.cbx span:first-child svg {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 6px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-accent-back);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
    transition-delay: 0.2s;
}
.cbx span:last-child {
    margin-left: 8px;
}
.cbx span:last-child:after {
    content: "";
    position: absolute;
    top: 11px;
    left: -5px;
    height: 1px;
    width: calc(100% + 10px);
    background: #b8c3c1;
    transform-origin: 0 0;
    transform: scaleX(0);
}
.cbx:hover span:first-child {
    border-color: var(--color-accent-back);
}

.inp-cbx:checked + .cbx span:first-child {
    border-color: var(--color-accent-back);
    background: var(--color-accent-back);
    animation: check 0.6s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
    transform: scale(2.2);
    opacity: 0;
    transition: all 0.6s ease;
}
.inp-cbx:checked + .cbx span:last-child {
    color: var(--color-background-dark-gray);
    transition: all 0.3s ease;
}
.inp-cbx:checked + .cbx span:last-child:after {
    transform: scaleX(1);
    transition: all 0.3s ease;
}

@keyframes check {
    50% {
        transform: scale(1.2);
    }
}

.inp-txt {
    position: relative;
}
.inp-txt input[type='text'],
.inp-txt input[type='password'],
.inp-date input[type='date'] {
    font-size: 1.6rem;
    font-weight: 500;
    font-family: var(--font-main);
    box-sizing: border-box;
    width: 100%;
    padding: 11px 16px 13px;
    color: var(--color-light-black);
    border: 1px solid var(--color-background-light-gray);
    border-radius: 4px;
    line-height: 24px;
    box-sizing: border-box;
}
input[invalid], select[invalid], textarea[invalid] {
    border: 1px solid var(--color-caution) !important;
    background-color: var(--color-caution-pale) !important;
}
.inp-txt input[type='text']:disabled {
    color: var(--color-background-dark-gray);
    border: 1px solid var(--color-background-gray-line);
    background-color: var(--color-background-gray-line);
}
input[type='text']:focus, input[type='password']:focus {
    border: 2px solid var(--color-black);
    outline: none;
    padding: 10px 15px 12px;
}
.c-flex-box-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 24px;
}

.inp-txt textarea {
    font-size: 1.6rem;
    font-weight: 500;
    font-family: var(--font-main);
    box-sizing: border-box;
    width: 100%;
    padding: 11px 16px;
    color: var(--color-light-black);
    border: 1px solid var(--color-background-light-gray);
    border-radius: 4px;
    line-height: 1.5;
    min-height: 160px;
    resize: vertical;
    background-color: var(--color-white);
    outline: none;
}

/* フォーカス時のスタイル */
.inp-txt textarea:focus {
    border: 2px solid var(--color-black);
}

.inp-txt.password {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
}

.inp-txt.password label {
    flex-grow: 1;
}

.inp-txt.password #toggle-password {
    padding: 14px 24px;
    text-align: center;
    font-size: 1.4rem;
    background-color: var(--color-light-black-edit);
    border-radius: 6px;
    line-height: 19px;
    color: var(--color-white);
    width: 90px;
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid var(--color-background-light-gray);
    border-radius: 4px;
    line-height: 24px;
    padding: 11px 26px 13px 16px;
    font-size: 1.6rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='0,0 20,0 10,10' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    width: 100%;
    transition: background-color 1s ease;
}

.select-flash {
  background-color: #ffff99 !important;
}

/* 全体のスタイル */
.checkbox-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 0;
    background-color: var(--color-background-ex-light-gray);
}

.checkbox-container[invalid] {
    background-color: var(--color-caution-pale);
}

/* ホバー時の背景変更 */
.checkbox-container:hover {
    color: var(--color-primary);
}

.checkbox-container:has(input[type="checkbox"]:checked) {
    background-color: var(--color-primary-ex-pale);
    color: var(--color-primary);
}

/* 実際のチェックボックスを隠す */
.checkbox-container input[type="checkbox"] {
    display: none;
}

/* カスタムチェックボックス */
.checkbox-container .custom-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid var(--color-background-dark-gray);
    border-radius: 3px;
    margin-right: 10px;
    position: relative;
    vertical-align: middle;
    background-color: var(--color-white);
}

/* チェックされた状態 */
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox,
.checkbox-container input[type="checkbox"]:indeterminate + .custom-checkbox {
    background-color: var(--color-white);
    border-color: var(--color-primary);
}

/* チェックマークの表示 */
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 1px;
    width: 4px;
    height: 11px;
    border: solid var(--color-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 半チェックマークの表示 */
.checkbox-container input[type="checkbox"]:indeterminate + .custom-checkbox::after {
    content: '';
    position: absolute;
    left: 4px;
    top: calc(50% - 2.5px);
    width: 12px;
    height: 2px;
    border: 2px solid var(--color-primary);
    border-width: 0 0 2px 0;
}

/* ラベルテキスト */
.checkbox-container .label-text {
    vertical-align: middle;
    display: inline-block;
    font-size: 1.6rem;
    line-height: 21px;
}

/* 実際のラジオボタンを隠す */
.radio-container input[type="radio"] {
    display: none;
}

.radio-container .label-text {
    vertical-align: middle;
    display: inline-block;
    font-size: 1.6rem;
    line-height: 21px;
}

.radio-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 10px 16px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 0;
    background-color: var(--color-background-ex-light-gray);
}

.radio-container.vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.radio-container label {
    position: relative;
    cursor: pointer;
    padding-left: 30px;
}

.radio-container label::before,
.radio-container label::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}

.radio-container label::before {
    background-color: #fff;
    border: 1px solid var(--color-background-dark-gray);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    left: 0;
    box-sizing: border-box;
}

.radio-container label::after {
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    width: 13px;
    height: 13px;
    left: 3.5px;
}

.radio-container input:checked + label::after {
    opacity: 1;
}

.radio-container input:checked + label {
    color: var(--color-primary);
}

.radio-container input:disabled + label {
    color: var(--color-text-light-gray); /* テキストを薄く */
    cursor: not-allowed;
    opacity: 0.6;
}

.radio-container input:disabled + label::before {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
}

.radio-container input:disabled:checked + label::after {
    background-color: #999;
    opacity: 1;
}

.radio-container[invalid] {
  border: 1px solid var(--color-caution);
  background-color: var(--color-caution-pale);
}

/* ----------------------------- */
/* ログイン */
/* ----------------------------- */

#login-wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#login-wrap > .inner {
    width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

#login-wrap .logo-wrap .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#login-wrap .logo-wrap .site-title {
    color: var(--color-primary);
    font-size: 1.6rem;
}

#login-wrap .logo-wrap .logo img {
    filter: var(--filter-primary);
    width: 240px;
}

#login-wrap .form-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
}

#login-wrap .form-wrap .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

#login-wrap .form-wrap .item .ttl {
    font-size: 1.6rem;
    text-align: right;
}

#login-wrap .form-wrap .item .inp-txt {
    width: 296px;
}

#login-wrap .form-wrap .item.e-mail .ttl {
    width: 120px;
}

#login-wrap .form-wrap .item.e-mail .inp-txt {
    width: 400px;
}

#login-wrap .btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: stretch;
    width: calc(100% - 80px);
    max-width: 360px;
    gap: 16px;
    font-size: 1.4rem;
    text-align: center;
}

#form-login {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

#form-login #validation-message {
    margin-bottom: 0;
}

button[type="submit"] {
    cursor: pointer;
}

#login-wrap .msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: stretch;
    width: 100%;
    gap: 16px;
    font-size: 1.4rem;
    text-align: center;
    padding: 32px;
    background-color: #f1f2f3;
    border-radius: 12px;
}

#login-wrap .msg .login-title {
    font-size: 2.2rem;
    line-height: 1.4;
    text-align: center;
}

#login-wrap .msg .text {
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-background-dark-gray);
}

/* ----------------------------- */
/* 検索ページ */
/* ----------------------------- */

#history {
    margin-top: 40px;
}

.c-search-history-title {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 1.3rem;
    column-gap: 12px;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.c-search-history-title img {
    filter: var(--filter-primary);
}

.c-search-history-list {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

.c-search-history-list .c-search-history-single {
    display: flex;
    flex-direction: row;
    font-size: 1.4rem;
}

.c-search-history-list .c-search-history-single .title {
    width: 100px;
    flex-basis: 100px;
    background-color: var(--color-primary-ex-pale);
    color: var(--color-primary);
    padding: 16px;
    text-align: center;
}

.c-search-history-list .c-search-history-single .detail {
    width: calc(100% - 100px);
    flex-basis: calc(100% - 100px);
    flex-grow: 1;
    background-color: var(--color-white);
    color: var(--color-primary);
    padding: 16px 24px;
}

.c-search-history-list .c-search-history-single .detail .detail-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 24px;
}

.c-search-history-list .c-search-history-single .detail .detail-inner .detail-inner-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 24px;
}

.c-search-history-list .c-search-history-single .detail .condition-wrap {
    flex-basis: calc(100% - 252px);
    width: calc(100% - 252px);
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.c-search-history-list .c-search-history-single .detail .condition-wrap .condition-list {
    color: var(--color-background-ex-dark-gray);
    font-size: 1.3rem;
    line-height: 1.5;
}

.c-search-history-list .c-search-history-single .detail .condition-edit {
    flex-grow: 1;
}

.c-search-history-list .c-search-history-single .detail .condition-research {
    flex-basis: 220px;
    width: 220px;
}

.c-search-word .inp-txt {
    width: 480px;
}

.c-search-word .search-word {
    width: 220px;
}

.c-search-condition {
    display: flex;
    flex-direction: column;
}

.c-search-condition .condition-wrap {
    margin-top: -13px;
    border-top: 4px solid var(--color-primary);
}

.c-search-condition.black .condition-wrap {
    border-top: 4px solid var(--color-black);
}

.c-search-condition .search-tab-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none; /* Firefoxのスクロールバーを非表示 */
    -ms-overflow-style: none; /* IE/Edgeのスクロールバーを非表示 */
    height: 101px;
}

.c-search-condition .search-tab-wrap::-webkit-scrollbar {
    display: none; /* Chrome/Safariのスクロールバーを非表示 */
}

.c-search-condition .search-tab-wrap .search-tab-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-width: 100%;
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab {
    width: 170px;
    height: 88px;
    border: 1.5px solid var(--color-primary);
    border-right: none;
    border-bottom: none;
    padding: 0;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 1.6rem;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: -0.75px;
}

.c-search-condition.black .search-tab-wrap .search-tab-list .search-tab {
    border: 1.5px solid var(--color-black);
    border-bottom: none;
    background-color: var(--color-white);
    color: var(--color-black);
}

.c-search-condition.black .search-tab-wrap .search-tab-list .search-tab a {
    color: var(--color-black);
}

#company-detail-wrap .c-search-condition .search-tab-wrap .search-tab-list .search-tab {
    width: 250px;
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab:first-child {
    border-radius: 10px 0 0 0;
    margin-left: 0;
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab:last-child {
    border-right: 1.5px solid var(--color-primary);
    border-radius: 0 10px 0 0;
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-search-condition.black .search-tab-wrap .search-tab-list .search-tab.active {
    background-color: var(--color-black);
    color: var(--color-white);
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab.on:after,
.c-search-condition .condition-inner .condition-category > ul > li.on:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-accent-point);
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid var(--color-white);
}

.c-search-condition .condition-inner .condition-category > ul > li.on:after {
    top: 11px;
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab:not(.active):hover {
    background-color: var(--color-primary-ex-pale);
}

.c-search-condition.black .search-tab-wrap .search-tab-list .search-tab:not(.active):hover {
    background-color: var(--color-background-gray-line);
}

.c-search-condition .search-tab-wrap .search-tab-list .search-tab.active:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 13px;
    height: 13px;
    background: var(--color-primary);
    transform: translate(-50%, 55%) rotate(45deg);
    transform-origin: center center;
}

.c-search-condition.black .search-tab-wrap .search-tab-list .search-tab.active:before {
    background: var(--color-black);
}

.c-search-condition .search-tab .tab {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-search-condition .search-tab span {
    padding: 32px 16px;
}

.c-search-condition .condition-category-tab button {
    width: 100%;
    text-align: center;
    padding: 24px 16px 24px 1px;
    line-height: 21px;
    cursor: pointer;
}

.c-search-condition .condition-panel,
.c-search-condition .setting-panel {
    display: none;
    padding: 24px 32px;
    background-color: var(--color-background-ex-light-gray);
}

.c-search-condition.visible .condition-panel {
    display: block;
}

.c-search-condition .condition-panel.white {
    padding: 0;
    padding-top: 40px;
    background-color: var(--color-white);
}

.c-search-condition .condition-panel {
    font-size: 1.6rem;
}

.c-search-condition .setting-panel {
    background-color: var(--color-white);
}

.c-search-condition .condition-panel.active,
.c-search-condition .setting-panel.active {
    display: block;
}

.c-search-condition .condition-inner {
    display: flex;
    flex-direction: row;
}

.c-search-condition .condition-inner .condition-category {
    flex-basis: 316px;
    width: 316px;
    background-color: var(--color-primary-pale);
    padding: 24px 0 24px 16px;
}

.c-search-condition .condition-inner .condition-category > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 0;
    width: 300px;
}

.c-search-condition .condition-inner .condition-category > ul > li {
    border-bottom: 1px solid var(--color-white);
    color: var(--color-white);
    padding: 0;
    text-align: center;
    font-size: 1.6rem;
    width: calc(100% - 6px);
    position: relative;
    margin-top: -1px;
}

.c-search-condition .condition-inner .condition-category > ul > li:first-child {
    border-top: 1px solid var(--color-white);
}

.c-search-condition .condition-inner .condition-category > ul > li.active {
    border: 1px solid var(--color-white);
    color: var(--color-primary);
    background-color: var(--color-white);
    border-radius: 6px 0 0 6px;
    width: 100%;
}

.c-search-condition .condition-inner .condition-category > ul > li.active button {
    padding-left: 6px;
}

.c-search-condition .condition-inner .condition-setting {
    flex-basis: calc(100% - 316px);
    width: calc(100% - 316px);
    background-color: var(--color-white);
}

.c-search-condition .setting-panel-inner {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    font-size: 1.6rem;
}

.c-search-condition .setting-detail {
    font-size: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-search-condition .setting-detail .setting-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-search-condition .setting-detail .setting-block .parent label {
    width: 100%;
}

.c-search-condition .setting-detail .setting-block .child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 32px;
}

.c-search-condition .setting-detail .setting-block .child label {
    width: calc((100% - 8px) / 2);
}

.c-search-btn-sticky {
    position: sticky;
    bottom: 0;
    background-color: #000000cc;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 1px;
}

.c-search-btn-sticky > .inner {
    width: var(--width-content-main);
    max-width: var(--width-wide-max);
    padding: 24px 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1.4rem;
    color: white;
}

.c-search-btn-sticky > .inner > .btn-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.c-search-btn-sticky > .inner > .btn-wrap > a {
    display: inline-block;
    width: 400px;
    max-width: 100%;
}

.c-search-btn-sticky > .inner > .condition-text {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.c-search-btn-sticky > .inner > .condition-text .ttl {
    white-space: nowrap;
}

.c-search-btn-sticky > .inner > .condition-text .text {
    display: block;
    max-height: 60px;
    overflow-y: auto;
    line-height: 20px;
    box-sizing: border-box;
    flex-grow: 1;
}

.c-search-btn-sticky > .inner > .bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.c-search-btn-sticky > .inner > .bottom > .left {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.c-search-btn-sticky > .inner > .bottom > .left > .text {
    font-size: 1.8rem;
}

.c-search-btn-sticky > .inner > .bottom > .left > .num {
    font-size: 5.4rem;
    color: var(--color-accent-light);
    font-weight: 600;
    margin-bottom: -9px;
}

.c-search-btn-sticky > .inner > .bottom > .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 10px;
}

.c-search-condition-detail {
    border: 1px solid var(--color-primary);
}

.c-search-condition-detail .c-search-history-single .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 24px;
    min-width: 130px;
}

.c-search-condition-detail .c-search-history-single .title .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.c-search-condition-detail .c-search-history-single .title .inner .num {
    font-size: 2.4rem;
}

.c-search-condition-detail .c-search-history-single .title .inner .text {
    margin-bottom: -7px;
    margin-left: 4px;
}

.page-search-result #freeword,
.page-search-result #condition,
.page-search-result ~ .c-search-btn-sticky {
    display: none;
}

.list-search-result a:not(.btn-favorite) {
    color: var(--color-primary);
}

.list-search-result .company-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.list-search-result .company-list .company-box {
    border: 1.5px solid var(--color-background-light-gray);
    border-bottom: 4px solid var(--color-background-light-gray);
    padding: 32px;
}

.list-search-result .top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.list-search-result .top .content-name-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px 12px;
    justify-content: space-between;
}

.list-search-result .top .content-name-wrap .content-name-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.list-search-result .top .content-name-wrap .company-name {
    font-size: 2.4rem;
    line-height: 33px;
}

#search-company-result.list-search-result .top .content-name-wrap .company-name {
    font-size: 2.8rem;
    line-height: 33px;
}

.list-search-result .top .content-name-wrap .jojo {
    white-space: nowrap;
}

.list-search-result .top .company-info-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.list-search-result .top .company-info-wrap .company-image {
    flex-basis: 270px;
    width: 270px;
    height: 160px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-search-result .top .company-info-wrap .company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-search-result .top .company-info-wrap .table {
    margin-top: 0;
}

.list-search-result .top .company-detail-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex-basis: 100%;
}

#search-company-result.list-search-result .top .company-detail-wrap {
    flex-basis: calc(100% - 294px);
    align-items: flex-end;
}

.list-search-result .top .company-detail-wrap .table {
    width: 100%;
}

.list-search-result .top .company-detail-wrap .link-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    font-size: 1.6rem;
}

.list-search-result .top .company-detail-wrap .link-box .text-link-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.sublist-search-result {
    padding: 24px;
    border-radius: 12px;
}

.sublist-search-result.careerevent {
    background-color: var(--color-careerevent-back);
}

.sublist-search-result.recruitinfo {
    background-color: var(--color-recruitinfo-back);
}

.sublist-search-result > .inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sublist-search-result > .inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sublist-search-result > .inner > .sublist > .sublist-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sublist-search-result > .inner > .sublist > .sublist-inner > .contents {
    background-color: var(--color-white);
    padding: 24px 32px;
    border-radius: 8px;
    font-size: 1.4rem;
}

.sublist-search-result > .inner > .sublist > .sublist-inner > .btn {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-end;
    font-size: 1.4rem;
}

.list-search-result .sublist .top .company-image {
    flex-basis: 256px;
    min-width: 256px;
}

.list-search-result .sublist .top .company-image a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-search-result .sublist .top .company-detail-wrap {
    flex-basis: unset;
    flex-grow: 1;
}

.list-search-result .sublist .top .content-name-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.list-search-result .sublist .top .content-name-wrap .content-name-inner {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column-reverse;
}

.list-search-result .sublist .top .content-name-wrap.row-reverse .content-name-inner {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.list-search-result .sublist .top .content-name-wrap .company-name {
    font-size: 2.0rem;
    line-height: 28px;
}

.c-search-condition .setting-panel-inner .inp-date {
    width: 200px;
}

.c-search-condition .setting-panel-inner .setting-block.date-from-to {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}

.recruitinfo-salary .salary-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recruitinfo-salary .salary-form .ttl {
    border-bottom: 1px solid var(--color-background-gray-line);
    padding-bottom: 4px;
    font-weight: 600;
}

.recruitinfo-salary .salary-form .salary-detail {
    padding: 10px 0 0 12px;

}

.recruitinfo-salary .remarks {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.qualification-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qualification-list > li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qualification-list > li > .ttl {
    font-weight: 600;
    border-bottom: 1px solid var(--color-background-gray-line);
    padding-bottom: 4px;
}

.qualification-list > li > .qualification-detail > .item {
    padding-left: 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: 13px;
}

.qualification-list > li > .qualification-detail > .item > .ttl {
    color: var(--color-background-back-gray);
}

/* ----------------------------- */
/* mypage */
/* ----------------------------- */

#basic {
    margin-top: 0;
}

#basic .inner-box {
    display: flex;
    flex-direction: row;
    column-gap: 32px;
    margin-top: 24px;
}

#basic.edit {
    display: unset;
}

#basic .personal-photo-wrap {
    flex-basis: 180px;
    min-width: 180px;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0;
    margin-top: 24px;
}

#basic .personal-detail-wrap {
    flex-grow: 1;
}

#basic .personal-detail-wrap > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#basic .personal-detail-wrap > ul > li.left {
    flex-basis: 140px;
    width: 140px;
}

#basic .personal-detail-wrap > ul > li.right {
    flex-basis: calc(100% - 164px);
    width: calc(100% - 164px);
}

#basic .personal-detail-wrap > ul > li dt {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-background-gray);
}

#basic .personal-detail-wrap > ul > li dd {
    font-size: 1.6rem;
    color: var(--color-black);
    margin-top: 3px;
    overflow-wrap: break-word;
    line-height: 19px;
}

.table-fundamental-skills {
    font-size: 1.6rem;
    margin-top: 24px;
}

.table-fundamental-skills ul {
    display: flex;
    width: 100%;
    text-align: center;
}

.table-fundamental-skills ul:last-child {
    border-bottom: 1px solid var(--color-background-light-gray);
}

.table-fundamental-skills ul .ttl {
    width: 160px;
    min-width: 160px;
}

.table-fundamental-skills ul .col {
    width: calc((100% - 160px) / 6);
    border-top: 1px solid var(--color-background-light-gray);
}

.table-fundamental-skills .header {
    font-size: 1.4rem;
}

.table-fundamental-skills .header li {
    padding: 10px 16px 11px;
    background-color: var(--color-background-gray);
    color: var(--color-white);
}

.table-fundamental-skills .body li {
    padding: 20px 16px 21px;
}

.table-fundamental-skills .body li.ttl {
    background-color: var(--color-background-ex-light-gray);
    color: var(--color-background-dark-gray);
}

.table-fundamental-skills .header li .date {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 1px 6px 2px;
    font-size: 1.3rem;
    border-radius: 4px;
}

.table-fundamental-skills .header li .date.d1 {
    border: 2px solid var(--color-fundamental-skills1);
}
.table-fundamental-skills .header li .date.d2 {
    border: 2px solid var(--color-fundamental-skills2);
}
.table-fundamental-skills .header li .date.d3 {
    border: 2px solid var(--color-fundamental-skills3);
}
.table-fundamental-skills .header li .date.d4 {
    border: 2px solid var(--color-fundamental-skills4);
}
.table-fundamental-skills .header li .date.d5 {
    border: 2px solid var(--color-fundamental-skills5);
}
.table-fundamental-skills .header li .date.d6 {
    border: 2px solid var(--color-fundamental-skills6);
}

.table .base-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.table .base-info > li {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.table .base-info > li .ttl {
    font-weight: 600;
}

.section .bg-gray {
    padding: 24px 32px;
    border-radius: 16px;
    margin-top: 24px;
}

#mypage-edit {
    margin-top: 48px;
}

#basic.edit .personal-photo-wrap .personal-photo-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-bottom: 8px;
    margin-top: 4px;
}

#basic.edit .personal-photo-wrap .personal-photo-options label {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#basic.edit .personal-photo-wrap .personal-photo-options input {
    display: none;
}

#basic.edit .personal-photo-wrap .personal-photo-options img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid transparent;
    padding: 7px;
    opacity: .6;
    box-sizing: border-box;
}

#basic.edit .personal-photo-wrap .personal-photo-options input:checked + img {
    opacity: 1;
    padding: 4px;
    border: 4px solid var(--color-accent-light);
    box-shadow: 0 0 12px var(--color-accent-light);
}

section.edit .edit-item-title {
    min-width: 144px;
    text-align: center;
    border-radius: 6px 6px 0 0;
    padding: 4px 16px 5px;
    background-color: var(--color-light-black-edit);
    font-size: 1.3rem;
    color: var(--color-white);
    display: inline-block;
    margin-bottom: 6px;
}

section.edit .edit-item-title[data-tooltip] {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 5px;
}

section.edit .edit-item-title[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
  word-break: break-word;
  box-sizing: border-box;
  text-align: left;
  width: auto;
}

section.edit .edit-item-title[data-tooltip]:hover::after {
  opacity: 1;
}

section.edit ul.col1 {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 24px !important;
    margin-top: 24px;
}

section.edit ul.col2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-top: 24px;
}

section.edit ul dd.col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

section.edit ul.col3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-top: 24px;
}

section.edit .check-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 8px;
}

section.edit .check-list label.checkbox-container {
    width: auto;
}

section.edit ul .txt-date-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
}

section.edit ul .txt-date-box .inp-txt {
    width: 144px;
    flex-basis: 144px;
}

section.edit ul .txt-date-box.gpa .inp-txt {
    width: 200px;
    flex-basis: 200px;
}

section.edit ul .txt-date-box.qualification .inp-txt {
    width: 180px;
    flex-basis: 180px;
}

section.edit ul .txt-date-box .label {
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 1.4rem;
}

section.edit ul .txt-date-box .inp-date {
    flex-grow: 1;
}

section.edit .title01.black {
    background-color: var(--color-light-black-edit);
}

section.edit .title03.black {
    color: var(--color-light-black-edit);
}

section.edit .title03.black::before {
    background-color: var(--color-light-black-edit);
}

.add_btn_wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.editable-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
}

.editable-list .list-item {
    border: 1px solid var(--color-background-light-gray);
    background-color: var(--color-background-ex-light-gray);
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.editable-list .list-item.template {
    display: none;
}

.editable-list .list-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.editable-list .list-item-inner .header {
    display: flex;
    gap: 8px;
    width: 100%;
}

.editable-list .list-item-inner .header .header-text {
    flex-basis: calc(100% - 49px);
    width: calc(100% - 49px);
    border-radius: 6px;
    color: var(--color-light-black);
    background-color: #e1e2e3;
    line-height: 26px;
    font-size: 1.4rem;
    padding: 7px 16px 8px;
    height: 41px;
}

.editable-list .list-item-inner ul {
    width: 100%;
}

.handle {
    cursor: move;
    color: var(--color-background-light-gray);
    padding: 0 5px;
    font-size: 1.4rem;
    position: absolute;
    top: 1.5px;
    left: calc(50% - 10px);
}

.delete-btn {
    margin-left: auto;
    cursor: pointer;
    color: var(--color-light-black);
    font-size: 2.5rem;
    padding: 0px 11.5px 4px;
    border-radius: 6px;
    background-color: #e1e2e3;
    flex-basis: 41px;
    width: 41px;
    height: 41px;
    display: inline-block;
    position: relative;
}

.delete-btn.no-wrap {
    padding: 0;
    border-radius: 0;
    background-color: unset;
    flex-basis: 20px;
    width: 20px;
    height: 20px;
}

.delete-btn::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 20px;
    top: 50%;
    left: 50%;
    background-image: url(../image/ico-trash.svg);
    transform: translate(-50%, -50%);
    filter: var(--filter-light-black-edit);
    background-size: 100%;
    background-repeat: no-repeat;
}

#fundamental-skills-list {
    position: relative;
}

#qualification-list .delete-btn,
#fundamental-skills-list .delete-btn {
    position: absolute;
    top: 24px;
    right: 24px;
}

#fundamental-skills-list .title03 {
    width: 100%;
    margin-top: 24px;
    margin-bottom: -4px;
}

#fundamental-skills-list .title03:first-child {
    margin-top: 0;
}

#fundamental-skills #selfCheckBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 82px;
  font-size: 1.6rem;
  line-height: 1.5;
  border: 1px solid var(--color-primary);
  border-radius: 60px;
  background-color: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: .3s;
}

#fundamental-skills #selfCheckBtn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

#validation-message {
    font-size: 1.6rem;
    line-height: 22px;
    padding: 24px 32px 24px 46px;
    border-radius: 12px;
    margin-bottom: 32px;
}

#validation-message.failure {
    background-color: var(--color-caution-pale);
    color: var(--color-caution);
}

#validation-message.success {
    background-color: #e8f1ff;
    color: #1b4ea9;
    padding: 24px 32px 24px;
}

#validation-message.data-none {
    background-color: var(--color-background-ex-light-gray);
    color: var(--color-background-dark-gray);
    padding: 120px 32px;
}

#validation-message .message-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: disc;
}

#validation-message.success .message-list,
#validation-message.data-none .message-list {
    align-items: center;
    list-style: none;
}

#validation-message.mr {
  margin-right: 32px;
}

#mypage-detail-wrap {
  margin-top: 40px;
  padding: 40px 0;
}

#mypage-detail-wrap .container-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

#mypage-detail-wrap .c-search-condition .search-tab-wrap .search-tab-list .search-tab {
  width: 220px;
}

#mypage-detail-wrap .container-inner .anker-wrap .anker-wrap-inner {
  position: sticky;
  top: 112px;
}

#mypage-detail-wrap .anker-wrap .btn-edit,
#mypage-detail-wrap .anker-wrap .btn-outline {
  margin-left: 24px;
}

#mypage-detail-wrap .condition-panel {
  padding-bottom: 40px;
}

#mypage-detail-wrap #basic-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

#mypage-detail-wrap #basic-wrap > .title {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#mypage-detail-wrap #basic-wrap.full-content-header .title {
  margin: 0 32px;
  width: calc(100% - 64px);
}

.breadcrumbs.mypage > ul {
  width: unset;
  max-width: unset;
  font-size: 1.6rem;
  color: var(--color-light-black);
  gap: 32px;
}

.breadcrumbs.mypage > ul > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.breadcrumbs.mypage > ul > li:not(:last-child):before {
  top: 50%;
  right: -20px;
}

.breadcrumbs.mypage > ul > li.current {
  background-color: var(--color-background-ex-light-gray-box);
  padding: 16px 24px;
  border-radius: 6px;
  opacity: 1;
  line-height: 19px;
}

#mypage-detail-wrap .condition-panel .container-inner.side-padding {
  padding-left: 32px;
  padding-right: 32px;
}

#mypage-detail-wrap #basic-wrap > .search {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#mypage-detail-wrap #basic-wrap > .search > .title {
  background-color: var(--color-black);
  color: var(--color-white);
  height: 72px;
  padding: 24px 32px;
  white-space: nowrap;
}

#mypage-detail-wrap #basic-wrap > .search > .condition {
  background-color: var(--color-background-ex-light-gray);
  height: 72px;
  padding: 11px 24px;
  flex-grow: 1;
}

#mypage-detail-wrap #basic-wrap > .search > .condition > .inner {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

#mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
}

#mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col1 {
  flex-basis: 380px;
}

#mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col2 {
  flex-grow: 1;
}

#mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col1 > .inp-select,
#mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col2 > .inp-select {
  flex-grow: 1;
}

#mypage-detail-wrap .list > ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#mypage-detail-wrap .list > ul > li {
  padding: 24px;
  border-radius: 12px;
  background-color: var(--color-background-ex-light-gray-box);
}

#mypage-detail-wrap .list > ul > li > .list-inner {
  background-color: var(--color-white);
  padding: 24px;
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-tmp {
  background-color: var(--color-mypage-tmp);
  color: var(--color-background-ex-dark-gray);
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-yet {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-request {
  background-color: var(--color-mypage-applying);
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-remand {
  background-color: var(--color-mypage-remand);
  padding-left: 22px;
  position: relative;
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-remand:before {
  content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-accent-point);
    position: absolute;
    top: 5.5px;
    left: 8px;
    border: 1px solid var(--color-white);
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-other {
  background-color: var(--color-black);
  position: relative;
  border-radius: 0;
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-other.no {
  background-color: var(--color-background-dark-gray);
}

#mypage-detail-wrap .list > ul > li > .list-inner .c-label.mypage-approval {
  background-color: var(--color-mypage-posted);
}

#mypage-detail-wrap .list > ul > li > .list-inner .top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

#mypage-detail-wrap .list > ul > li > .list-inner .top .label-wrap {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

#mypage-detail-wrap .list > ul > li > .list-inner .top .label-wrap a {
  line-height: 19px;
  font-size: 1.4rem;
}

#mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap {
  display: flex;
  flex-direction: row;
  gap: 24px;
  font-size: 1.3rem;
}

#mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

#mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box .ttl {
  font-weight: 600;
}

#mypage-detail-wrap .list > ul > li > .list-inner .fb-info-wrap {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

#mypage-detail-wrap .list > ul > li > .list-inner .fb-info-wrap .inner-left {
  width: calc(100% - 256px);
  flex-basis: calc(100% - 256px);
}

#mypage-detail-wrap .list > ul > li > .list-inner .fb-info-wrap .inner-right {
  width: 240px;
  flex-basis: 240px;
  background-color: var(--color-background-ex-light-gray);
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
}

#mypage-detail-wrap .list > ul > li.status1 > .list-inner .fb-info-wrap .inner-right {
  border: 2px solid var(--color-mypage-not-selected);
}

#mypage-detail-wrap .list > ul > li.status2 .btn-card-action.theme {
  border: 1px solid var(--color-accent-back);
  background-color: var(--color-accent-back);
  color: var(--color-white);
}

#mypage-detail-wrap .list > ul > li.status3 .btn-card-action.theme {
  border: 1px solid var(--color-caution);
  color: var(--color-caution);
}

#mypage-detail-wrap .list > ul > li > .btn-wrap {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: flex-end;
}

.fb-status-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.fb-status-wrap .status-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.fb-status-wrap .status-box .ttl {
  font-size: 1.4rem;
  padding-left: 22px;
  position: relative;
}

.fb-status-wrap .status-box .ttl:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background-image: url(../image/ico-fb-status.svg);
  background-repeat: no-repeat;
  width: 16px;
  height: 20px;
  transition: var(--transition);
}

.fb-status-wrap .status-box.status1 .ttl:before {
  filter: var(--filter-fb-status1);
}

.fb-status-wrap .status-box.status2 .ttl:before {
  filter: var(--filter-accent-back);
}

.fb-status-wrap .status-box.status5 .ttl:before {
  filter: var(--filter-caution);
}

.fb-status-wrap .status-box.status1 .ttl {
  color: var(--color-mypage-not-selected);
}

.fb-status-wrap .status-box.status2 .ttl {
  color: var(--color-mypage-not-posted);
}

.fb-status-wrap .status-box.status5 .ttl {
  color: var(--color-mypage-remand);
}

.fb-status-wrap .status-box .cnt {
  padding: 9px 16px 10px;
  border-radius: 6px;
  line-height: 21px;
  color: var(--color-white);
}

.fb-status-wrap .status-box .cnt .num {
  margin-right: -3px;
}

.fb-status-wrap .status-box.status1 .cnt {
  background-color: var(--color-mypage-not-selected);
}

.fb-status-wrap .status-box.status2 .cnt {
  background-color: var(--color-mypage-not-posted);
}

.fb-status-wrap .status-box.status5 .cnt {
  background-color: var(--color-mypage-remand);
}

.fb-status-box {
  height: 51px;
  border-radius: 6px;
  background-color: var(--color-primary-pale);
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}

.fb-status-wrap.tmp .fb-status-box {
  background-color: var(--color-mypage-tmp);
}

.fb-status-wrap.applying .fb-status-box {
  background-color: var(--color-mypage-applying);
}

.fb-status-wrap.remand .fb-status-box {
  background-color: var(--color-mypage-remand);
}

.fb-status-wrap.remand .fb-status-box .data {
  color: var(--color-mypage-remand);
}

.fb-status-wrap.posted .fb-status-box {
  background-color: var(--color-mypage-posted);
}

.fb-status-box .ttl {
  color: var(--color-white);
}

.fb-status-box .data {
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--color-white);
  border-radius: 4px;
}

#submission-items-list {
  margin-top: 24px;
}

.submission-items-list-item {
  background-color: var(--color-white) !important;
}

.submission-items-list-item .title {
  display: flex;
  flex-direction: row;
  width: calc(100% + 48px);
  background-color: var(--color-background-ex-light-gray);
  margin-top: -24px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--color-background-light-gray);
  justify-content: space-between;
  padding: 12px 24px;
  align-items: center;
  font-size: 1.6rem;
  line-height: 20px;
}

.submission-items-list-item .title .left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.submission-items-list-item .title .left .text {
  margin-left: 16px;
}

.submission-items-list-item .title .delete {
  font-size: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hamburger-btn {
  position: relative;
  display: inline-block;
  width: 21px;
  height: 16px;
  cursor: grab;
}

.hamburger-btn::before,
.hamburger-btn::after,
.hamburger-btn span {
  content: "";
  position: absolute;
  left: 0;
  width: 21px;
  height: 3px;
  background-color: var(--color-background-light-gray);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-btn::before { top: 0; }
.hamburger-btn span { top: 6px; }   /* 中央バー */
.hamburger-btn::after { top: 12px; }

.hamburger-btn:hover { cursor: grab; }
.hamburger-btn:active { cursor: grabbing; }

dd.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

em.count {
  font-style: normal;
}

/* ----------------------------- */
/* company-detail */
/* ----------------------------- */

#company-base-info {
    margin-bottom: 40px;
}

#company-detail-wrap .container-main {
    margin: 40px auto;
}

#company-detail-wrap .c-search-condition .condition-panel.white {
    padding-top: 8px;
    padding-bottom: 48px;
}

#company-detail-wrap .container-inner .section-wrap {
    margin-bottom: 0;
}

#company-image {
    height: 460px;
    width: calc(100% - 32px);
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
}

#company-image img {
    width: 100%;
}

#company-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#company-history li {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

#company-history li .yyyymm {
    width: 68px;
    text-align: right;
    white-space: nowrap;
}

.charm-wrap {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.charm-wrap .charm-img-wrap {
    flex-basis: 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 0;
}


.charm-wrap .charm-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.charm-wrap .charm-img img {
    width: 100%;
}

.charm-wrap .charm-box {
    flex-basis: calc(100% - 304px);
    width: calc(100% - 304px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* .charm-wrap.big .charm-img-wrap {
    flex-basis: 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 0;
}

.charm-wrap.big .charm-img {
    height: 210px;
}

.charm-wrap.big .charm-box {
    flex-basis: calc(100% - 374px);
    width: calc(100% - 374px);
} */

.charm-wrap .charm-box .ttl {
    font-size: 2.0rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* ----------------------------- */
/* careerevent-detail */
/* ----------------------------- */

.company-content-flex {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.category-switcher {
    display: flex;
    flex-direction: row;
    gap: 10px 24px;
    flex-wrap: wrap;
}

.category-switcher a {
    padding: 3px 12px 4px;
    border-radius: 4px;
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 23px;
    transition: var(--transition);
    position: relative;
}

.category-switcher a.active,
.category-switcher a:hover {
    background-color: var(--color-primary-ex-pale);
}

.category-switcher > li:not(:last-child) > a:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 2px);
    top: 1px;
    right: -13px;
    background-color: var(--color-light-black);
    color: var(--color-primary);
}

#notice-list {
  margin-top: 40px;
  margin-bottom: 70px;
}

#notice-list .category-switcher.main {
  margin-bottom: 40px;
}

/* ----------------------------- */
/* クリップ済みリスト・閲覧履歴 */
/* ----------------------------- */
#clip-list {
    margin-top: 40px;
    margin-bottom: 70px;
}

#clip-list .category-switcher.main {
    margin-bottom: 40px;
}

/* ----------------------------- */
/* footer */
/* ----------------------------- */

#banner-area {
    background-color: var(--color-primary-ex-pale);
    padding: 40px 0;
    width: 100%;
}
#banner-area > .inner {
    width: var(--width-content-main);
    max-width: var(--width-wide-max);
    margin: 0 auto;
}

#banner-area > .inner .banner-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    font-size: 0;
}

#banner-area > .inner .banner-list li {
    overflow: hidden;
}

#banner-area > .inner .banner-list li a img {
    width: 100%;
    transition: var(--transition);
}

#banner-area > .inner .banner-list li a img:hover {
    opacity: .8;
}

.c-footer {
    background-color: var(--color-primary);
    margin-top: 0;
    font-size: 1.4rem;
}

.c-footer .c-footer-inner {
    width: var(--width-wide);
    max-width: var(--width-wide-max);
    margin: 0 auto;
    padding: 40px 0;
    color: var(--color-white);
}

.c-footer .contact-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.c-footer .contact-list .contact-box {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 16px 24px;
}

.c-footer .contact-list .contact-box .name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 10px;
}

.c-footer .contact-list .contact-box span {
    display: block;
    color: var(--color-light-black);
    font-size: 1.4rem;
    margin-top: 1px;
}

.c-footer .c-footer-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.c-footer .c-footer-bottom .left img {
    width: 150px;
    filter: var(--filter-white);
}

.c-footer .c-footer-bottom .left .link-pages {
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
}

.c-footer .c-footer-bottom .left .link-pages li {
    padding: 0 24px;
    line-height: 15px;
}

.c-footer .c-footer-bottom .left .link-pages li:first-child {
    padding-left: 0;
    border-right: 1px solid var(--color-white);
}

.c-footer .c-footer-bottom .right .link-contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 10px;
}

.c-footer .copy {
    width: 100%;
    text-align: center;
    color: var(--color-light-black);
    background-color: var(--color-primary-ex-pale);
    color: var(--color-primary);
    padding: 3px 0;
}

.c-footer .copy p {
    font-size: 1.2rem;
}

#full {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  background-color: var(--color-background-ex-light-gray);
}

span.block {
  display: block;
}

/* ----------------------------- */
/* モーダル */
/* ----------------------------- */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  width: 90%;
  max-width: 1000px;
  max-height: 80vh;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1001; /* オーバーレイより上に */
}

.modal-header,
.modal-footer {
  padding: 12px 16px;
  flex-shrink: 0;
  font-size: 1.6rem;
}

.modal-header {
  background: var(--color-primary);
  color: var(--color-white);
}

.modal-footer {
  background: var(--color-background-ex-light-gray);
}

.modal-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex-grow: 1;
}

.modal-body .description {
  font-size: 1.4rem;
  line-height: 1.5;
}

.close-btn {
  float: right;
  cursor: pointer;
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  background-image: url(../image/close-white.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1.6rem;
}

.question-list .question {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.question-list .question .question-title {
  padding: 10px 16px;
  background-color: var(--color-primary-ex-pale);
}

.c-status-info {
  margin-bottom: 32px;
}

.c-status-info > .inner {
  border-radius: 12px;
  padding: 16px;
}

.c-status-info.not-selected > .inner {
  background-color: var(--color-mypage-not-selected);
}

.c-status-info.not-posted > .inner {
  background-color: var(--color-mypage-not-posted);
}

.c-status-info.tmp > .inner {
  background-color: var(--color-mypage-tmp);
}

.c-status-info.applying > .inner {
  background-color: var(--color-mypage-applying);
}

.c-status-info.remand > .inner {
  background-color: var(--color-mypage-remand);
}

.c-status-info.posted > .inner {
  background-color: var(--color-mypage-posted);
}

.c-status-info > .inner .ttl {
  color: var(--color-white);
}

.c-status-info > .inner .ttl {
  color: var(--color-white);
  font-size: 1.4rem;
}

.c-status-info > .inner .text {
  background-color: var(--color-white);
  font-size: 1.6rem;
  line-height: 24px;
  padding: 16px 24px;
  border-radius: 8px;
}

.c-status-info.remand > .inner > .text {
  color: var(--color-mypage-remand);
}

.c-status-info > .inner ul.text {
  padding-left: 42px;
  list-style-type: disc;
}

.c-status-info .data-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-status-info .title-wrap {
  white-space: nowrap;
  min-width: 250px;
  flex-basis: 250px;
}

.c-status-info > .data-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (max-width:1640px) {
    section.side .section-title {
        margin-left: -20px;
        flex-basis: 370px;
        width: 370px;
    }
}

/* ----------------------------- */
/* PC狭（1280px以下） */
/* ----------------------------- */

@media screen and (max-width:1280px) {

    .fundamental-skills-wrap .fundamental-skills-data {
        width: 100%;
        height: 350px;
    }

    .fundamental-skills-wrap {
        flex-direction: column-reverse;
    }
}

/* ----------------------------- */
/* タブレット */
/* ----------------------------- */

@media (max-width: 1024px) {

    header > .container {
        padding: 16px 20px;
        background-color: var(--color-primary);
        width: var(--width-wide-sp);
        max-width: var(--width-wide-sp);
    }

    header > .container .logo img {
        filter: var(--filter-white);
    }

    header > .container .logo .site-title {
        background-color: var(--color-white);
    }

    header > .container.sp-menu-open {
        padding: 16px 20px;
        background-color: var(--color-white);
    }

    header > .container.sp-menu-open .logo img {
        filter: var(--filter-primary);
    }

    header > .container.sp-menu-open .logo .site-title {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .menu-icons,
    .global-nav {
        display: none !important;
    }

    a:after,
    button:after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: var(--color-link-text);
        bottom: -2px;
        transform: unset;
        transform-origin: unset;
    }

    a.sp-noline:after,
    button.sp-noline:after {
        content: none !important;
    }

    button.white.under:after {
        background: var(--color-white);
    }

    section .section-title {
        width: 100%;
    }

    .global-nav + .breadcrumbs {
        margin-top: 0;
    }

    .portfolio-wrap {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }

    .portfolio-wrap .left {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        gap: 24px;
    }

    .portfolio-wrap .left .left-bottom {
        flex-grow: 1;
    }

    .fundamental-skills-wrap .fundamental-skills-detail {
        flex-basis: 100%;
        width: 100%;
        row-gap: 32px;
    }

    section.side {
        gap: 24px;
    }

    section {
        margin-top: 48px;
    }

    section .section-title .jp {
        font-size: 2.4rem;
    }

    section .section-title .en {
        font-size: 1.4rem;
    }

    header > .container .sp-menu-wrap {
        display: flex;
        position: fixed;
        top: 0;
        right: 20px;
        background-color: var(--color-primary);
        width: 60px;
        height: 73px;
        justify-content: center;
        align-items: center;
        z-index: 301;
        transition: var(--transition);
    }

    header > .container .sp-menu-wrap .sp-menu-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding-top: 4px;
    }

    header > .container .sp-menu-wrap .menu-dot {
        display: block;
        position: relative;
        width: 6px;
        height: 6px;
        background-color: var(--color-white);
        border-radius: 50%;
        transition: var(--transition);
    }

    header > .container .sp-menu-wrap .menu-dot::before,
    header > .container .sp-menu-wrap .menu-dot::after {
        position: absolute;
        top: 0;
        content: "";
        width: 6px;
        height: 6px;
        background-color: var(--color-white);
        border-radius: 50%;
        transition: var(--transition);
    }

    header > .container .sp-menu-wrap .menu-dot::before {
        left: 14px;
    }

    header > .container .sp-menu-wrap .menu-dot::after {
        right: 14px;
    }

    header > .container .sp-menu-wrap .menu-text {
        font-size: 1.4rem;
        color: var(--color-white);
    }

    header > .container.sp-menu-open .sp-menu-wrap {
        background-color: var(--color-white);
    }

    header > .container.sp-menu-open .sp-menu-wrap .sp-menu-inner {
        gap: 4px;
        padding-top: 1px;
    }

    header > .container.sp-menu-open .sp-menu-wrap .menu-dot {
        background-color: var(--color-primary);
        width: 12px;
        height: 12px;
    }

    header > .container.sp-menu-open .sp-menu-wrap .menu-dot::before,
    header > .container.sp-menu-open .sp-menu-wrap .menu-dot::after {
        content: none;
    }

    header > .container.sp-menu-open .sp-menu-wrap .menu-text {
        color: var(--color-primary);
    }

    #sp-menu-body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        display: none;
        background: var(--color-white);
        justify-content: center;
        align-items: center;
        z-index: 300;
    }

    #sp-menu-body .sp-menu-logo {
        padding: 16px 20px;
    }

    #sp-menu-body .inner {
        width: 100%;
        min-height: calc(100vh - 74px);
        padding: 100px 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--color-primary-ex-pale);
        border-radius: 0 80px 0 0;
    }

    #sp-menu-body.on .inner {
        transform: translateX(300px);
    }

    #sp-menu-body .inner a {
        color: var(--color-primary);
    }

    #sp-menu-body .inner .sp-menu-list {
        font-size: 3.2rem;
        font-weight: 900;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 624px);
        max-height: 400px;
        justify-content: space-between;
    }

    #sp-menu-body .inner .sp-menu-list li .label {
        color: var(--color-primary-pale);
        font-size: 2.1rem;
        font-weight: 600;
        margin-bottom: 10px;
        display: block;
    }

    #sp-menu-body .inner .sp-menu-list li .submenu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 24px;
        font-size: 3.0rem;
    }

    #sp-menu-body .inner .sp-icon-menu-list {
        font-size: 2.0rem;
        font-weight: 600;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    #sp-menu-body .inner .sp-icon-menu-list li {
        display: flex;
    }

    #sp-menu-body .inner .sp-icon-menu-list li .sp-icon-menu-link {
        background-color: var(--color-white);
        padding: 24px 32px;
        border-radius: 12px;
        width: 100%;
        display: flex        ;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    #sp-menu-body .inner .sp-icon-menu-list li .sp-icon-menu-link img {
        height: 36px;
        filter: var(--filter-primary);
    }

    #sp-menu-body .inner .logout-wrap {
        width: 100%;
        text-align: right;
        font-size: 1.8rem;
    }
    .c-page-title .title {
        font-size: 3.0rem;
        padding: 46px 56px 50px 76px;
        line-height: 38px;
    }
    .c-page-title.labeled .title {
        padding-top: 74px;
        padding-bottom: 40px;
        padding-left: 278px;
        padding-right: 40px;
    }
    .c-page-title.labeled .c-label {
        top: 40px;
        left: 254px;
        font-size: 1.4rem;
        padding: 3px 10px 4px;
    }
    .c-page-title.labeled .c-label.fy {
        padding: 2px 16px 3px;
    }
    .c-page-title.labeled {
        min-height: 188px;
    }
    .c-page-title.labeled:before {
        top: calc(50% + 17px);
        height: calc(100% - 125px);
        left: 254px;
    }
    .c-page-title:before {
        left: 52px;
        top: calc(50% + 1px);
        height: calc(100% - 94px);
    }
    .c-search-history-list .c-search-history-single .detail .detail-inner {
        flex-direction: column;
        justify-content: flex-start;
        gap: 16px;
    }
    .c-search-history-list .c-search-history-single .detail .detail-inner .detail-inner-bottom {
        justify-content: flex-end;
        column-gap: 16px;
        width: 100%;
    }
    .c-search-history-list .c-search-history-single .detail .condition-wrap,
    .page-search-result .c-search-history-list .c-search-history-single .detail .condition-wrap {
        flex-basis: unset;
        width: 100%;
        row-gap: 6px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-edit {
        flex-grow: unset;
    }
    .c-search-history-list .c-search-history-single .detail .condition-research {
        flex-basis: 200px;
        width: 200px;
    }
    .btn-common01, .btn-common02 {
        font-size: 1.5rem;
        padding: 12px 24px 13px;
        line-height: 21px;
    }
    .btn-common02.condition-edit {
        padding: 12px 42px 13px 24px;
    }
    .btn-common02.condition-edit::before {
        left: calc(50% + 52px);
    }
    .pc-item,.pc-item-il { display: none; }
    .c-search-word .inp-txt {
        width: calc(100% - 224px);
    }
    .c-search-word .search-word {
        width: 200px;
    }
    .inp-txt input[type='text'] {
        font-size: 1.6rem;
        padding: 11px 16px 12px;
        line-height: 22px;
    }
    .c-search-condition .search-tab-wrap .search-tab-list .search-tab {
        width: 120px;
        border: 1px solid var(--color-primary);
        font-size: 1.6rem;
    }
    #company-detail-wrap .c-search-condition .search-tab-wrap .search-tab-list .search-tab {
        width: 220px;
    }
    .c-search-condition .search-tab-wrap .search-tab-list .search-tab.wide {
        width: 180px;
        max-width: 33%;
    }
    .c-search-condition .condition-panel, .c-search-condition .setting-panel {
        padding: 24px 20px;
    }
    .c-search-condition .condition-inner .condition-category {
        flex-basis: 226px;
        width: 226px;
        background-color: var(--color-primary-pale);
        padding: 16px 0 16px 16px;
    }
    .c-search-condition .condition-inner .condition-category > ul {
        width: 210px;
    }
    .c-search-condition .condition-inner .condition-setting {
        flex-basis: calc(100% - 226px);
        width: calc(100% - 226px);
    }
    .c-search-btn-sticky > .inner {
        padding: 16px 0;
        gap: 10px;
    }
    .c-search-btn-sticky > .inner > .bottom > .left > .num {
        font-size: 5.0rem;
    }
    .search-btn-wrap {
        gap: 16px;
    }
    .search-btn-wrap .search-btn {
        padding: 40px 24px;
        border: 1px solid var(--color-primary);
        background-color: var(--color-primary);
        color: var(--color-white);
    }
    .search-btn-wrap .search-btn .inner .ttl {
        font-size: 2.4rem;
    }
    .search-btn-wrap .search-btn .inner .num-box {
        gap: 4px;
    }
    .search-btn-wrap .search-btn .inner .num-box .text {
        margin-bottom: 8px;
    }
    .search-btn-wrap .search-btn .inner .num-box .num {
        font-size: 4.2rem;
    }
    .container-inner {
        column-gap: 24px;
    }
    .container-inner .anker-wrap {
        flex-basis: 230px;
        width: 230px;
        margin-bottom: 60px;
    }
    .container-inner .section-wrap {
        flex-basis: calc(100% - 254px);
        width: calc(100% - 254px);
        margin-bottom: 60px;
    }
    #basic {
        gap: 24px;
        align-items: flex-start;
    }
    #basic .personal-photo-wrap {
        flex-basis: 160px;
        min-width: 160px;
        max-width: 160px;
        height: 160px;
    }
    #basic.edit .personal-photo-wrap {
        flex-basis: unset;
        min-width: unset;
        max-width: unset;
        height: unset;
        width: 100%;
    }
    .container-inner .anker-wrap .anker-wrap-inner {
        top: 24px;
    }
    .table .table-th {
        flex-basis: 160px;
        width: 160px;
    }
    #basic .personal-detail-wrap > ul {
        gap: 12px;
        flex-direction: column;
    }
    #basic .personal-detail-wrap > ul > li.left {
        flex-basis: unset;
        width: 100%;
    }
    #basic .personal-detail-wrap > ul > li.right {
        flex-basis: unset;
        width: 100%;
    }
    #basic .personal-detail-wrap {
        flex-basis: calc(100% - 184px);
        width: calc(100% - 184px);
    }
    .table .base-info {
        gap: 0 20px;
    }
    .c-search-condition .condition-panel.white {
        padding-top: 32px;
    }
    #company-history {
        gap: 12px;
    }
    #company-history li {
        flex-direction: column;
        gap: 4px;
        line-height: 18px;
    }
    #company-history li .yyyymm {
        width: unset;
        text-align: left;
        white-space: nowrap;
        color: var(--color-background-dark-gray);
    }
    .charm-wrap {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .charm-wrap .charm-img-wrap {
        flex-basis: unset;
        width: 100%;
        gap: 16px;
        align-items: center;
        margin-bottom: 8px;
    }
    .charm-wrap.big .charm-img-wrap {
        flex-basis: unset;
        width: 100%;
        gap: 20px;
    }
    .charm-wrap.big .charm-img {
        height: 180px;
    }
    .charm-wrap.big .charm-box {
        flex-basis: unset;
        width: 100%;
    }
    .charm-wrap .charm-img {
        flex-basis: unset;
        width: 300px;
    }
    .charm-wrap .charm-box {
        flex-basis: unset;
        width: 100%;
        gap: 16px;
    }
    .container-full .section-inner {
        width: calc(100% - 24px);
    }
    #company-image {
        height: unset;
        width: calc(100% - 24px);
    }
    .pagination {
        padding: 16px 24px;
        gap: 24px;
        font-size: 1.4rem;
    }
    .pagination .pagination-info {
        flex-direction: column;
    }
    .pagination .pagination-info .separate {
        display: none;
    }
    .list-search-result .top .company-info-wrap {
        gap: 16px;
    }
    .list-search-result .top .company-info-wrap .company-image {
        flex-basis: 200px;
        width: 200px;
        height: 120px;
    }
    .list-search-result .top .company-detail-wrap {
        gap: 24px;
        flex-basis: 100%;
        width: 100%;
    }
    #search-company-result.list-search-result .top .company-detail-wrap {
        gap: 24px;
        flex-basis: calc(100% - 216px);
    }
    .list-search-result .top .company-detail-wrap .table-th.short {
        flex-basis: 150px;
        width: 150px;
    }
    .list-search-result .top .company-detail-wrap .table-th.ex-short {
        flex-basis: 120px;
        width: 120px;
    }
    .list-search-result .top .company-detail-wrap .link-box {
        gap: 24px;
        font-size: 1.6rem;
        width: calc(100% + 200px);
        justify-content: flex-end;
    }
    .list-search-result .top .content-name-wrap .company-name {
        font-size: 2.0rem;
        line-height: 24px;
    }
    #search-company-result.list-search-result .top .content-name-wrap .company-name {
        font-size: 2.6rem;
        line-height: 29px;
    }
    .list-search-result .sublist .top {
        gap: 16px;
    }
    .list-search-result .sublist .top .company-info-wrap {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .list-search-result .sublist .top .company-info-wrap .company-image {
        flex-basis: unset;
        min-width: 270px;
        height: 161px;
        display: flex;
        align-items: center;
        border-radius: 8px;
    }
    .sublist-search-result > .inner > .sublist > .sublist-inner > .contents {
        padding: 24px;
    }
    .pagination .pagination-list li a:hover {
        background-color: var(--color-white);
        color: var(--color-primary);
    }
    .pagination .pagination-list li.move a:hover {
        border: 1px solid var(--color-primary-ex-pale);
        background-color: var(--color-primary-ex-pale);
    }
    .table .table-tr.col2 {
        flex-direction: column;
    }
    .table .table-tr.col2 .tr-inner:first-child {
        border-bottom: 1px solid var(--color-background-light-gray);
    }
    .table .table-td {
        padding: 16px;
    }
    .c-search-btn-sticky > .inner > .btn-wrap {
        gap: 16px;
    }
    section.edit ul.col1,
    section.edit ul.col2,
    section.edit ul.col3 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 16px !important;
        margin-top: 16px !important;
    }
    section#fundamental-skills.edit .editable-list ul.col2,
    section#fundamental-skills.edit .editable-list ul.col3,
    section#lifelog.edit .editable-list ul.col2,
    section#lifelog.edit .editable-list ul.col3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .c-page-title.edit:before {
        left: 46px;
        height: 56px;
        width: 56px;
    }
    .c-page-title.edit:after {
        width: 29px;
        height: 28px;
        left: 60px;
    }
    .c-page-title.edit .title {
        padding: 34px 48px 37px 120px;
    }
    #basic.edit .personal-photo-wrap .personal-photo-options {
        grid-template-columns: repeat(4, 1fr);
    }
    #basic.edit .personal-detail-wrap {
        flex-basis: unset;
        width: unset;
    }
    .inp-txt textarea {
        min-height: 240px;
    }
    .btn-add:hover {
        border: solid 1px var(--color-light-black-edit);
        color: var(--color-light-black-edit);
        background-color: var(--color-white);
    }
    .btn-add:hover span:before {
        filter: var(--filter-light-black-edit);
    }
    section.narrow {
        width: calc(100% - 64px);
        max-width: 800px;
    }
    .c-page-title.notice {
        padding: 48px 80px;
    }
    .c-page-title.notice h1 {
        font-size: 3.6rem;
        line-height: 44px;
    }
    .btn-favorite:hover {
        border: 1px solid var(--color-background-light-gray);
        background-color: var(--color-white);
        color: var(--color-background-gray);
    }
    .btn-favorite.active:hover {
        border: 1px solid var(--color-favorite);
        background-color: var(--color-favorite);
    }
    .btn-favorite:hover::before {
        filter: var(--filter-light-gray);
    }
    .btn-favorite.active::before {
        filter: var(--filter-white);
    }
    .recruitinfo-salary .remarks {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .qualification-list {
        gap: 16px;
    }
    .qualification-list > li {
        gap: 8px;
    }
    .qualification-list > li > .ttl {
        padding-bottom: 8px;
        line-height: 16px;
    }
    .qualification-list > li > .qualification-detail {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .qualification-list > li > .qualification-detail > .item {
        padding-left: 16px;
        flex-direction: column;
        gap: 0;
    }
    .qualification-list > li > .qualification-detail > .item > .ttl {
        font-size: 10px;
        line-height: 12px;
    }
    .qualification-list > li > .qualification-detail > .item > .text {
        font-size: 13px;
    }
    .c-page-title.labeled .charm-img-title {
        top: 40px;
        left: 40px;
        width: 190px;
        height: 114px;
        font-size: 0;
        border-radius: 8px;
    }
    #mypage-detail-wrap.container-full .section-inner {
        width: 100%;
    }
    #mypage-detail-wrap .condition-panel .container-inner.side-padding {
        padding-left: 24px;
        padding-right: 24px;
    }
    .table-fundamental-skills ul .col {
        width: 90px;
        min-width: 90px;
    }
    .table-fundamental-skills {
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
      min-width: 0;
    }
    #mypage-detail-wrap .es-list .table-th.short {
      flex-basis: 100px;
      width: 100px;
      padding: 12px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .title {
      padding: 16px 24px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      height: unset;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      height: unset;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box {
      gap: 12px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box > .label {
      display: block;
      width: 80px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner {
      flex-direction: column;
      gap: 8px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col1 {
      flex-basis: unset;
    }
    #mypage-detail-wrap #basic-wrap > .search {
      align-items: stretch;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap {
      flex-direction: column;
      gap: 2px;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box .ttl {
      width: 85px;
    }
}

/* ----------------------------- */
/* SP */
/* ----------------------------- */

@media (max-width: 480px) {
    .container-main, .container-main-wide {
        width: var(--width-wide-sp-inner);
        max-width: var(--width-wide-sp-inner);
    }
    #mypage-detail-wrap .condition-panel {
        padding: 24px 12px;
    }
    header > .container {
        padding: 8px 3vw;
    }
    .c-footer .c-footer-inner {
        width: var(--width-wide-sp-inner);
        max-width: var(--width-wide-sp-inner);
    }
    .c-footer .contact-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 3vw;
    }
    header > .container .logo, #sp-menu-body > .sp-menu-logo .logo {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        height: unset;
        flex-direction: column-reverse;
    }
    header > .container .logo .site-title, #sp-menu-body > .sp-menu-logo .logo .site-title {
        font-size: 1.1rem;
        line-height: 16px;
        border-radius: 30px;
        padding: 0 12px 1px;
    }
    section:first-child {
        margin-top: 32px;
    }
    section.side .section-title {
        margin-left: unset;
        flex-basis: unset;
        width: 100%;
    }
    section .section-title {
        margin-bottom: 24px;
        background-color: unset;
        padding: 0;
    }
    section .section-title .jp {
        font-size: 2.2rem;
    }
    section.side {
        display: flex;
        align-items: flex-start;
        gap: 0;
        flex-direction: column;
    }
    .portfolio-wrap .left {
        flex-direction: column;
    }
    .c-gray-box {
        padding: 16px;
        font-size: 1.3rem;
    }
    .c-gray-box.radius {
        border-radius: 8px;
    }
    .fundamental-skills-wrap .fundamental-skills-detail {
        padding: 16px;
        flex-basis: 100%;
        width: 100%;
        min-width: unset;
        row-gap: 24px;
    }
    .fundamental-skills-wrap .fundamental-skills-list {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 8px;
    }
    .search-btn-wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    header > .container .sp-menu-wrap {
        right: 3vw;
        width: 50px;
        height: 73px;
        background-color: var(--color-primary-opacity);
    }
    header > .container .logo img, #sp-menu-body > .sp-menu-logo .logo img {
        flex-basis: 133px;
        width: 133px;
    }
    header > .container .sp-menu-wrap .menu-dot {
        width: 5px;
        height: 5px;
    }
    header > .container .sp-menu-wrap .menu-dot::before, header > .container .sp-menu-wrap .menu-dot::after {
        width: 5px;
        height: 5px;
    }
    header > .container .sp-menu-wrap .menu-dot::before {
        left: 12px;
    }
    header > .container .sp-menu-wrap .menu-dot::after {
        right: 12px;
    }
    header > .container .sp-menu-wrap .menu-text {
        font-size: 1.3rem;
    }
    #sp-menu-body .sp-menu-logo,
    header > .container.sp-menu-open {
        padding: 8px 3vw;
    }
    #sp-menu-body .inner {
        min-height: calc(100vh - 74px);
        padding: 56px 40px;
    }
    #sp-menu-body .inner .sp-menu-list {
        font-size: 2.08rem;
        gap: unset;
        height: calc(100vh - 400px);
        max-height: 280px;
        justify-content: space-between;
    }
    #sp-menu-body .inner .sp-menu-list li .label {
        font-size: 1.4rem;
        margin-bottom: 9px;
    }
    #sp-menu-body .inner .sp-menu-list li .submenu {
        gap: 8px;
        margin-left: 16px;
        font-size: 1.9rem;
    }
    #sp-menu-body .inner .sp-icon-menu-list {
        font-size: 1.4rem;
        gap: 8px;
    }
    #sp-menu-body .inner .sp-icon-menu-list li .sp-icon-menu-link {
        padding: 12px 16px;
        border-radius: 8px;
        gap: 8px;
    }
    #sp-menu-body .inner .sp-icon-menu-list li .sp-icon-menu-link img {
        height: 18px;
    }
    #sp-menu-body .inner .logout-wrap {
        font-size: 1.4rem;
    }
    #banner-area > .inner {
        width: var(--width-wide-sp-inner);
        max-width: var(--width-wide-sp-inner);
    }
    #banner-area > .inner .banner-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        font-size: 0;
    }
    .c-notice-list .title {
        font-size: 1.3rem;
        line-height: 19px;
    }

    .sp-ta-center { text-align: center; }
    .sp-item { display: block; }
    .sp-item-flex { display: flex !important; }

    .c-footer .c-footer-bottom {
        margin-top: 40px;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .c-footer .c-footer-bottom .left {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .c-footer .c-footer-bottom .left .link-pages {
        margin-top: 24px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
    }
    .c-footer .c-footer-bottom .right .link-contents {
        column-gap: 12px;
        row-gap: 10px;
        text-align: center;
    }
    .c-footer .c-footer-bottom .left .link-pages li {
        padding: 0 16px;
        line-height: 15px;
    }
    .c-footer .copy {
        padding: 2px 0;
    }
    .c-footer .copy p {
        font-size: 1.1rem;
        padding: 0;
    }
    .c-gray-box .c-gray-box-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .c-checklist li {
        font-size: 1.4rem;
        padding: 6px 24px 7px;
    }
    .title03 {
        font-size: 1.6rem;
        padding-left: 12px;
        line-height: 20px;
    }
    .btn-edit {
      font-size: 1.4rem;
      padding: 10px 16px 11px 44px;
    }
    .btn-edit:before {
      left: 16px;
    }
    .btn-back, .btn-save {
        font-size: 1.4rem;
        padding: 10px 16px 11px;
    }
    .search-btn-wrap .search-btn {
        padding: 32px 24px;
        border-radius: 16px;
    }
    .search-btn-wrap .search-btn .inner .ttl {
        font-size: 2.4rem;
    }
    .search-btn-wrap .search-btn .inner .num-box .num {
        font-size: 4.2rem;
    }
    .search-btn-wrap .search-btn .inner {
        row-gap: 6px;
    }
    .c-search-btn-sticky > .inner {
        padding: 16px 0;
        gap: 6px;
        font-size: 1.1rem;
        width: var(--width-wide-sp-inner);
        max-width: var(--width-wide-sp-inner);
    }
    .c-search-btn-sticky > .inner > .condition-text {
        flex-direction: column;
        gap: 4px;
    }
    .c-search-btn-sticky > .inner > .condition-text .text {
        max-height: 48px;
        line-height: 14px;
    }
    .c-search-btn-sticky > .inner > .bottom > .left {
        gap: 0;
    }
    .c-search-btn-sticky > .inner > .bottom > .left > .num {
        font-size: 2.6rem;
        margin-bottom: 2px;
    }
    .c-search-btn-sticky > .inner > .bottom > .left > .text {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }
    .c-search-btn-sticky > .inner > .bottom {
        gap: 8px;
    }
    .c-search-btn-sticky > .inner > .bottom > .right {
        gap: 12px;
        margin-top: 4px;
    }
    .btn-common01, .btn-common02 {
        font-size: 1.2rem;
        padding: 6px 16px 7px;
        line-height: 20px;
    }
    .btn-common02.condition-edit {
        padding: 6px 32px 7px 16px;
    }
    .btn-common02.condition-edit::before {
        width: 13px;
        height: 18px;
        left: calc(50% + 39px);
    }
    .c-search-condition-detail .c-search-history-single .title .inner .num {
        font-size: 2.0rem;
    }
    .c-search-condition-detail .c-search-history-single .title .inner .text {
        margin-bottom: -5px;
        margin-left: 2px;
    }
    .breadcrumbs > ul {
        width: var(--width-wide-sp-inner);
        max-width: var(--width-wide-sp-inner);
        gap: 19px;
        line-height: 18px;
        font-size: 1.1rem;
        padding: 3px 0;
    }
    .breadcrumbs > ul > li:not(:last-child):before {
        right: -12.5px;
    }
    .global-nav + .breadcrumbs {
        margin-bottom: 24px;
    }
    .c-page-title {
        border-radius: 16px;
    }
    .c-page-title .title {
        font-size: 2.2rem;
        padding: 36px 32px 38px 50px;
        line-height: 28px;
    }
    .c-page-title.labeled .title {
        padding-top: calc(45vw + 76px);
        padding-bottom: 30px;
        padding-left: 50px;
        padding-right: 32px;
    }
    .c-page-title.labeled:before {
        top: calc(45vw + 78px);
        left: 32px;
        height: calc(100% - 45vw - 108px);
        transform: translate(0, 0);
    }
    .c-page-title.labeled .c-label {
        top: calc(45vw + 48px);
        left: 32px;
        font-size: 1.2rem;
        padding: 1px 8px;
    }
    .c-page-title.labeled .charm-img-title {
        top: 32px;
        left: 32px;
        width: calc(100% - 64px);
        height: 45vw;
        font-size: 0;
        border-radius: 8px;
    }
    .c-page-title:before {
        left: 32px;
        top: 50%;
        height: calc(100% - 74px);
        width: 5px;
    }
    #history {
        margin-top: 24px;
    }
    .c-search-history-list .c-search-history-single {
        flex-direction: column;
        font-size: 1.3rem;
        align-items: stretch;
    }
    .c-search-history-list .c-search-history-single .title {
        width: 100%;
        flex-basis: 100%;
        font-size: 1.3rem;
        padding: 6px 3vw;
    }
    .c-search-history-list .c-search-history-single .detail {
        width: 100%;
        flex-basis: 100%;
        padding: 10px 3vw;
    }
    .c-search-history-list {
        row-gap: 16px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-wrap .condition-list {
        column-gap: 8px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-wrap .condition-list .condition-title {
        flex-basis: 80px;
        min-width: 80px;
        font-size: 1.1rem;
        padding: 1px 2px 2px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-wrap .condition-list .condition-text {
        font-size: 1.1rem;
        line-height: 14px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-research {
        flex-basis: 140px;
        width: 140px;
    }
    .c-search-history-list .c-search-history-single .detail .detail-inner .detail-inner-bottom {
        column-gap: 12px;
        font-size: 1.2rem;
    }
    .c-flex-box-left {
        column-gap: 8px;
    }
    .c-search-word .search-word {
        width: 120px;
    }
    .c-search-word .inp-txt {
        width: calc(100% - 128px);
    }
    .inp-txt input[type='text'],
    .inp-txt input[type='password'],
    .inp-date input[type='date'],
    select {
        font-size: 1.4rem;
        padding: 8px 26px 9px 12px;
        line-height: 19px;
    }
    .inp-txt textarea {
        font-size: 1.4rem;
        padding: 8px 12px 9px;
        line-height: 1.5;
    }
    input[type='text']:focus, .inp-txt textarea:focus {
        padding: 7px 11px 8px;
    }
    .c-search-history-title {
        font-size: 1.2rem;
        column-gap: 8px;
        margin-bottom: 12px;
    }
    .c-search-history-title img {
        width: 18px;
    }
    .title03.b {
        font-size: 1.7rem;
        padding-left: 12px;
        line-height: 20px;
        margin-bottom: 16px !important;
    }
    .title03.b:before {
        width: 4px;
    }
    .c-search-condition .search-tab-wrap .search-tab-list .search-tab.active:before {
        width: 11px;
        height: 11px;
        bottom: -1px;
    }
    .c-search-condition .condition-panel, .c-search-condition .setting-panel {
        padding: 16px 0 0;
        background-color: var(--color-white);
    }
    #company-detail-wrap .c-search-condition .search-tab-wrap .search-tab-list {
        justify-content: space-between;
    }
    .c-search-condition .search-tab-wrap .search-tab-list .search-tab {
        width: 84px;
        min-width: 84px;
        height: 55px;
        font-size: 1.2rem;
        line-height: 16px;
    }
    .c-search-condition .search-tab-wrap .search-tab-list .search-tab.on:after, .c-search-condition .condition-inner .condition-category > ul > li.on:after {
        width: 6px;
        height: 6px;
        top: 6px;
        right: 6px;
    }
    .c-search-condition .search-tab .tab {
        padding: 12px 8px;
        line-height: 15px;
    }
    .c-search-condition .search-tab span {
        padding: 12px 8px;
        line-height: 15px;
    }
    .c-search-condition .condition-category-tab button {
        padding: 16px 8px 16px 1px;
        line-height: 16px;
    }
    .c-search-condition .condition-inner .condition-category > ul > li.on:after {
        top: 7px;
    }
    .c-search-condition .condition-inner .condition-category {
        flex-basis: calc(120px + 3vw);
        width: calc(120px + 3vw);
        padding: 16px 0 16px 3vw;
    }
    .c-search-condition .condition-inner .condition-category > ul {
        width: 120px;
    }
    .c-search-condition .condition-inner .condition-setting {
        flex-basis: calc(100% - 120px - 3vw);
        width: calc(100% - 120px - 3vw);
    }
    .c-search-condition .condition-inner .condition-category > ul > li {
        font-size: 1.2rem;
    }
    .c-search-condition .setting-panel {
        padding: 0;
        padding-left: 12px;
        padding-bottom: 16px;
    }
    .c-search-condition .setting-panel-inner {
        font-size: 1.2rem;
    }
    .radio-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .checkbox-container .label-text,
    .radio-container .label-text {
        font-size: 1.2rem;
        line-height: 16px;
    }
    .radio-container .label-text {
        padding-left: 22px;
    }
    .checkbox-container,
    .radio-container {
        padding: 6px 10px;
    }
    .radio-container label::before {
        width: 16px;
        height: 16px;
    }
    .radio-container label::after {
        width: 10px;
        height: 10px;
    }
    .c-search-condition .setting-detail .setting-block .child label {
        width: 100%;
    }
    .c-search-condition .setting-detail .setting-block,
    .c-search-condition .setting-detail .setting-block .child {
        gap: 4px;
    }
    .c-search-condition .setting-detail .setting-block .child {
        padding-left: 16px;
    }
    .checkbox-container .custom-checkbox {
        width: 16px;
        height: 16px;
        min-width: 16px;
        margin-right: 6px;
    }
    .checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
        left: 4.5px;
        top: 1px;
        width: 3.5px;
        height: 8px;
    }
    .checkbox-container input[type="checkbox"]:indeterminate + .custom-checkbox::after {
        left: 2.5px;
        width: 10px;
    }
    .c-search-btn-sticky {
        margin-top: 32px;
    }
    .c-search-condition .setting-panel-inner {
        row-gap: 20px;
    }
    .container-inner .anker-wrap {
        display: none;
    }
    .container-inner .section-wrap {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 32px;
    }
    #basic .personal-detail-wrap > ul {
        gap: 8px;
        flex-direction: column;
    }
    #basic .personal-detail-wrap > ul > li.left {
        flex-basis: unset;
        width: 100%;
    }
    #basic .personal-detail-wrap > ul > li.right {
        flex-basis: unset;
        width: 100%;
    }
    #basic {
        gap: 16px;
    }
    #basic .personal-photo-wrap {
        flex-basis: 100px;
        min-width: 100px;
        max-width: 100px;
        height: 100px;
        margin-top: 0;
    }
    #basic .personal-detail-wrap > ul > li dd {
        font-size: 1.4rem;
        margin-top: 1px;
    }
    #basic .personal-detail-wrap > ul > li dt {
        font-size: 1.2rem;
    }
    .title01 {
        font-size: 1.8rem;
        padding: 8px 16px 9px;
        line-height: 26px;
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .section-inner {
        margin-top: 24px;
    }
    .table {
        font-size: 1.2rem;
        line-height: 19px;
        margin-top: 16px;
    }
    .table .table-th {
        flex-basis: 110px;
        width: 110px;
        padding: 12px;
    }
    .table .table-td {
        flex-basis: calc(100% - 120px);
        width: calc(100% - 120px);
        padding: 12px;
    }
    .container-inner {
        margin-top: 32px;
    }
    section.data {
        margin-top: 32px;
    }
    #fundamental-skills-chart {
        padding: 16px;
        height: calc(100vw - 30px);
    }
    #preparation .bg-gray {
        padding: 16px 24px;
        border-radius: 12px;
        margin-top: 16px;
    }
    #preparation .bg-gray p {
        font-size: 1.3rem;
        line-height: 21px;
    }
    .table-fundamental-skills {
        font-size: 1.3rem;
        margin-top: 16px;
        overflow-x: auto;
    }
    .table-fundamental-skills .header {
        font-size: 1.3rem;
    }
    .table-fundamental-skills .header li {
        padding: 9px 12px 10px;
        width: 120px;
        min-width: 120px;
        background-color: var(--color-background-gray);
    }
    .table-fundamental-skills .header li .date {
        font-size: 1.2rem;
    }
    .table-fundamental-skills ul {
        border-top: none;
    }
    .table-fundamental-skills ul:last-child {
        border-bottom: none;
    }
    .table-fundamental-skills ul .col {
        width: 80px;
        min-width: 80px;
    }
    .table-fundamental-skills ul li {
        border-top: 1px solid var(--color-background-light-gray);
    }
    .table-fundamental-skills ul:last-child li {
        border-bottom: 1px solid var(--color-background-light-gray);
    }
    .table-fundamental-skills .body li {
        padding: 15px 12px 16px;
    }
    .table-fundamental-skills .body li.ttl {
        width: 120px;
        min-width: 120px;
    }
    .table-fundamental-skills .body li.col {
        width: 80px;
        min-width: 80px;
    }
    #mypage-edit {
        margin-top: 32px;
    }
    .c-company-base-info {
        flex-direction: column-reverse;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 24px;
    }
    .btn-favorite-wrap {
        justify-content: flex-end;
    }
    .btn-favorite {
        padding: 2px 12px;
        line-height: 20px;
        height: 26px;
        border-radius: 4px;
    }
    .btn-favorite:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background-color: var(--color-white);
    }
    .btn-favorite::before {
        width: 13px;
        height: 14px;
    }
    .c-company-base-info .company-name {
        font-size: 2.4rem;
        line-height: 28px;
        margin-bottom: 2px;
    }
    .c-label {
        font-size: 1.1rem;
        line-height: 17px;
        padding: 1px 8px;
        border-radius: 3px;
    }
    .table .base-info > li {
        flex-direction: column;
        gap: 0;
    }
    .table .base-info {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .table .base-info > li .ttl {
        font-size: 1.2rem;
        color: var(--color-background-gray);
    }
    #company-base-info {
        margin-bottom: 32px;
    }
    #company-detail-wrap .container-main {
        margin: 32px auto;
    }
    #company-detail-wrap .c-search-condition .search-tab-wrap .search-tab-list .search-tab.wide {
        width: calc(100% / 3);
        max-width: unset;
    }
    #company-detail-wrap .condition-wrap .tab-content .condition-panel {
        padding: 32px 12px;
    }
    #company-detail-wrap .condition-wrap .tab-content .condition-panel .container-inner:first-child {
        margin-top: 0;
    }
    #company-detail-wrap .condition-wrap .tab-content .condition-panel #company-image {
        margin-top: 0;
    }
    #company-detail-wrap .condition-wrap .tab-content .condition-panel #company-image img {
        width: 100%;
    }
    p {
        font-size: 1.3rem;
        margin-bottom: 16px;
        line-height: 23px;
    }
    #company-detail-wrap.container-full .section-inner {
        width: 100%;
    }
    .charm-wrap .charm-img {
        width: 86%;
        margin: 0 auto;
    }
    .charm-wrap .charm-box .ttl {
        font-size: 1.6rem;
    }
    #company-image {
        width: 100%;
    }
    #company-image img {
        border-radius: 8px;
    }
    #banner-area {
        padding: 32px 0;
    }
    #login-wrap > .inner {
        width: 94vw;
        gap: 40px;
    }
    #login-wrap .logo-wrap .logo {
        gap: 12px;
    }
    #login-wrap .logo-wrap .site-title {
        font-size: 1.3rem;
    }
    #login-wrap .logo-wrap .logo img {
        width: 180px;
    }
    #login-wrap .form-wrap {
        gap: 16px;
    }
    #login-wrap .form-wrap .item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        justify-content: center;
        width: 280px;
    }
    #login-wrap .form-wrap .item .ttl {
        font-size: 1.3rem;
        text-align: left;
        width: auto;
    }
    #login-wrap .form-wrap .item .inp-txt,
    #login-wrap .form-wrap .item.e-mail .inp-txt {
        width: 100%;
    }
    #login-wrap .btn-wrap {
        gap: 16px;
        font-size: 1.4rem;
        width: 280px;
    }
    #login-wrap .msg {
        gap: 16px;
        padding: 32px 24px;
        border-radius: 8px;
        width: 320px;
        max-width: 100%;
    }

    #login-wrap .msg .login-title {
        font-size: 1.8rem;
        line-height: 1.4;
    }

    #login-wrap .msg .text {
        font-size: 1.3rem;
        line-height: 1.6;
    }
    .pagination {
        background-color: unset;
        padding: 0;
        flex-direction: column-reverse;
        gap: 8px;
        font-size: 1.3rem;
    }
    .pagination .pagination-list {
        justify-content: center;
        align-items: center;
        gap: 0;
        font-size: 1.3rem;
    }
    .pagination .pagination-list li a {
        padding: 4px 6px 5px;
        border: 1px solid var(--color-primary);
        border-left: none;
        min-width: 27px;
    }
    .pagination .pagination-list li.move a {
        border: 1px solid var(--color-white);
    }
    .pagination .pagination-list li.continue {
        margin: 0 4px;
    }
    .pagination .pagination-list li.continue + li a {
        border-left: 1px solid var(--color-primary);
    }
    .pagination .pagination-info .separate {
        display: block;

    }
    .pagination .pagination-info {
        flex-direction: row;
        gap: 8px;
        font-size: 1.2rem;
    }
    .pagination .pagination-list li.move a {
        height: 31px;
    }
    .pagination .pagination-list li.move.prev a::before,
    .pagination .pagination-list li.move.next a::before {
        width: 6px;
        height: 11.5px;
    }
    .pagination .pagination-list li.move.prev-max a::before,
    .pagination .pagination-list li.move.next-max a::before {
        width: 7.8px;
        height: 11.5px;
    }
    .list-search-result .company-list .company-box {
        border: 1px solid var(--color-background-light-gray);
        border-bottom: 4px solid var(--color-background-light-gray);
        padding: 16px;
    }
    .list-search-result .top {
        gap: 16px;
    }
    .list-search-result .top .content-name-wrap {
        gap: 6px 10px;
    }
    .list-search-result .top .content-name-wrap .company-name {
        font-size: 1.8rem;
        line-height: 22px;
    }
    #search-company-result.list-search-result .top .content-name-wrap .company-name {
        font-size: 1.8rem;
        line-height: 22px;
    }
    .list-search-result .top .company-info-wrap {
        flex-direction: column;
        gap: 16px;
    }
    .list-search-result .top .company-info-wrap .company-image {
        flex-basis: unset;
        width: 70vw;
        min-width: 250px;
        margin: 0 auto;
        height: 42vw;
        border-radius: 8px;
    }
    .list-search-result .top .company-detail-wrap .table-th {
        max-width: 100px;
    }
    .list-search-result .top .company-detail-wrap .table-th,
    .list-search-result .top .company-detail-wrap .table-td {
        padding: 10px;
    }
    .list-search-result .top .company-detail-wrap .link-box {
        flex-direction: column;
        gap: 20px;
        font-size: 1.3rem;
        width: 100%;
        justify-content: unset;
    }
    .list-search-result .top .company-detail-wrap {
        gap: 16px;
        flex-basis: unset;
    }
    .list-search-result .top .company-detail-wrap .table .base-info {
        gap: 6px;
    }
    .list-search-result .top .company-detail-wrap .table .base-info > li {
        gap: 0;
    }
    .list-search-result .top .company-detail-wrap .table .base-info > li .ttl {
        font-size: 1.1rem;
        line-height: 14px;
    }
    .pagination.top {
        margin-top: 32px;
        margin-bottom: 24px;
    }
    .list-search-result .company-list {
        gap: 24px;
    }
    .title04 {
        font-size: 2.0rem;
        line-height: 28px;
        margin-bottom: 24px;
        padding: 24px 24px 27px 40px;
        border-radius: 12px;
    }
    .title04:after {
        left: 24px;
        width: 5px;
        height: calc(100% - 50px);
    }
    .sublist-search-result {
        padding: 12px;
        border-radius: 8px;
    }
    .sublist-search-result > .inner {
        gap: 24px;
    }
    .sublist-search-result > .inner > .sublist > .sublist-inner {
        gap: 12px;
    }
    .sublist-search-result > .inner > .sublist > .sublist-inner > .contents {
        padding: 12px;
    }
    .list-search-result .sublist .top .content-name-wrap .company-name {
        font-size: 1.6rem;
        line-height: 21px;
    }
    .list-search-result .sublist .top .content-name-wrap {
        gap: 8px;
    }
    .list-search-result .sublist .top {
        gap: 12px;
    }
    .list-search-result .sublist .top .company-info-wrap {
        gap: 16px;
    }
    .list-search-result .sublist .top .company-info-wrap .company-image {
        width: 240px;
        min-width: unset;
        max-width: 100%;
        height: 140px;
        border-radius: 6px;
    }
    .table .table-th.short {
        flex-basis: 100px;
        min-width: 100px;
        padding: 12px;
    }
    .list-search-result .sublist .top .company-detail-wrap .table-td {
        width: calc(100% - 100px);
        flex-grow: 1;
    }
    .sublist-search-result > .inner > .sublist > .sublist-inner > .btn {
        gap: 16px;
        flex-direction: column;
        justify-content: center;
        font-size: 1.4rem;
    }
    .container-inner.side-margin {
        margin: 0;
    }
    .category-switcher {
        gap: 4px;
    }
    .category-switcher a {
        display: block;
        padding: 2px 6px 3px;
        font-size: 1.2rem;
        line-height: 17px;
        background-color: var(--color-background-ex-light-gray);
    }
    .c-search-condition .condition-wrap {
        margin-top: -11px;
        border-bottom: 3px solid var(--color-primary);
    }
    .c-search-condition .search-tab-wrap {
        height: 65px;
    }
    .category-switcher > li:not(:last-child) > a:before {
        content: none;
    }
    .company-content-flex {
        gap: 24px;
    }
    .process {
        padding: 6px;
        border-radius: 8px;
        gap: 18px;
    }
    .process > li {
        border-radius: 4px;
        padding: 5px 10px 6px;
    }
    .process > li > span.text {
        font-size: 1.2rem;
        line-height: 18px;
    }
    .process > li > span.subtext {
        font-size: 1.1rem;
        line-height: 15px;
    }
    .process > li:not(:last-child)::after {
        bottom: -12px;
        left: calc(50% - 3.5px);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid var(--color-accent-light);
    }
    .c-company-base-info .industry {
        font-size: 1.2rem;
        line-height: 18px;
    }
    .list-search-result .sublist .top .content-name-wrap.row-reverse {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }
    .c-label.fy {
        font-size: 1.1rem;
        line-height: 14px;
        padding: 1px 12px;
    }
    .info-list {
        gap: 1px;
    }
    .info-list .info-list-tr .info-list-th, .info-list .info-list-tr .info-list-td {
        padding: 6px 8px;
    }
    .info-list .info-list-tr {
        gap: 1px;
        line-height: 16px;
    }
    .info-list .info-list-tr .info-list-td.title, .info-list .info-list-tr .info-list-th.title {
        flex-basis: 80px;
        width: 80px;
        min-width: 80px;
    }
    .info-list .info-list-tr .info-list-th.title.full {
        width: unset;
        flex-grow: 1;
    }
    .table .hosoku {
        font-size: 1.1rem;
        line-height: 16px;
        margin-top: 6px;
    }
    .table span.sub {
        margin-top: 12px;
    }
    .c-search-btn-sticky > .inner > .btn-wrap {
        gap: 8px;
    }
    .btn-common01 span.external::before {
        width: 12px;
        height: 12px;
        right: -12px;
    }
    section.edit ul .txt-date-box.gpa .inp-txt,
    section.edit ul .txt-date-box.qualification .inp-txt {
        width: 120px;
        flex-basis: 120px;
    }
    #basic.edit .personal-photo-wrap .personal-photo-options img {
        padding: 5px;
    }
    #basic.edit .personal-photo-wrap .personal-photo-options input:checked + img {
        opacity: 1;
        padding: 3px;
        border: 3px solid var(--color-accent-light);
        box-shadow: 0 0 8px var(--color-accent-light);
    }
    section.edit .edit-item-title {
        min-width: 120px;
        padding: 2px 12px 3px;
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    #validation-message {
        font-size: 1.3rem;
        line-height: 18px;
        padding: 20px 24px 20px 38px;
        border-radius: 8px;
        margin-bottom: 24px;
    }
    #validation-message.success {
        padding: 20px 24px 20px;
    }
    section.edit .check-list {
        gap: 6px;
    }
    .btn-add {
        font-size: 1.3rem;
        padding: 7px 50px 8px;
    }
    .btn-add span {
        padding-left: 20px;
    }
    .btn-add span:before {
        left: -2px;
    }
    .c-page-title.edit .title {
        padding: 24px 24px 27px 74px;
    }
    .c-page-title.edit:before {
        left: 24px;
        width: 40px;
        height: 40px;
    }
    .c-page-title.edit:after {
        left: 34px;
        width: 21px;
        height: 20px;
    }
    .editable-list .list-item {
        padding: 12px;
        padding-top: 24px;
        border-radius: 8px;
        gap: 8px;
    }
    #fundamental-skills .editable-list .list-item {
        padding-top: 12px;
    }
    section.edit ul.col1, section.edit ul.col2, section.edit ul.col3 {
        gap: 12px !important;
        margin-top: 16px !important;
    }
    .delete-btn {
        font-size: 2.0rem;
        padding: 0px 9px 4px;
        border-radius: 4px;
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }
    .delete-btn::before {
        width: 12px;
        height: 15px;
    }
    #fundamental-skills-list .delete-btn {
        top: 12px;
        right: 12px;
    }
    .editable-list .list-item-inner .header .header-text {
        flex-basis: calc(100% - 39px);
        width: calc(100% - 39px);
        border-radius: 4px;
        line-height: 22px;
        font-size: 1.3rem;
        padding: 4px 16px 5px;
        height: 31px;
    }
    section.edit ul .txt-date-box .label {
        font-size: 1.3rem;
    }
    section.narrow {
        width: 100%;
        max-width: 100%;
        margin-top: 32px;
    }
    .c-page-title.notice {
        padding: 24px 32px;
    }
    .c-page-title.notice h1 {
        font-size: 2.4rem;
        line-height: 32px;
    }
    .c-notice-list .date-wrap {
        gap: 6px;
    }
    .c-page-title.c-notice-list .date-wrap .date {
        font-size: 1.3rem;
    }
    .c-page-title.c-notice-list .date-wrap .label {
        font-size: 1.1rem;
        line-height: 15px;
        padding: 1px 12px;
    }
    .c-search-history-list .c-search-history-single .detail .condition-wrap .condition-list {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    #notice-list .category-switcher.main,
    #clip-list .category-switcher.main {
        margin-top: 24px;
        margin-bottom: 24px;
    }
    #notice-list, #clip-list {
        margin-top: 24px;
        margin-bottom: 32px;
    }
    .recruitinfo-salary .salary-form {
        gap: 16px;
    }
    .recruitinfo-salary .salary-form .ttl {
        padding-bottom: 3px;
    }
    .recruitinfo-salary .salary-form .salary-detail {
        padding: 8px 0 0 8px;
    }
    .qualification-list > li {
        gap: 8px;
    }
    .qualification-list > li > .ttl {
        padding-bottom: 6px;
        line-height: 16px;
    }
    .qualification-list > li > .qualification-detail {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .qualification-list > li > .qualification-detail > .item {
        padding-left: 12px;
        flex-direction: column;
        gap: 2px;
    }
    .qualification-list > li > .qualification-detail > .item > .ttl {
        font-size: 10px;
        line-height: 12px;
    }
    .qualification-list > li > .qualification-detail > .item > .text {
        font-size: 12px;
        line-height: 16px;
    }
    .inp-txt.password #toggle-password {
        padding: 9.5px 16px;
        font-size: 1.3rem;
        border-radius: 4px;
        line-height: 17px;
        width: 74px;
    }
    #validation-message.data-none {
      padding: 72px 32px;
    }
    .btn-delete {
        font-size: 1.4rem;
        border: solid 1px var(--color-black);
        color: var(--color-black);
        background-color: var(--color-white);
        border-radius: 6px;
        padding: 8px 16px 9px 40px;
        min-width: 200px;
        display: inline-block;
        text-align: center;
    }
    .btn-delete:before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(50% - 107px);
        transform: translate(0, -50%);
        background-image: url(../image/ico-trash.svg);
        background-repeat: no-repeat;
        width: 17px;
        height: 17px;
        transition: var(--transition);
    }
    #fundamental-skills .trash-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    #fundamental-skills .trash-wrap .btn-delete {
      width: calc(100% - 60px);
    }
    #fundamental-skills #selfCheckBtn {
      height: unset;
      font-size: 1.3rem;
      padding: 8px 16px 7px;
    }
    .btn-set {
        gap: 8px;
    }
    .modal-header {
        font-size: 1.4rem;
    }
    .close-btn {
        width: 17px;
        height: 17px;
    }
    .modal-body .description {
        font-size: 1.3rem;
    }
    .question-list .question .question-title {
        padding: 6px 10px;
        font-size: 1.2rem;
    }
    .question-list {
      gap: 10px;
      font-size: 1.2rem;
    }
    .modal {
      width: 94vw;
      top: 50%;
      transform: translate(-50%, -50%);
      max-height: calc(100vh - 40px);
    }
    section.edit .edit-item-title[data-tooltip]::after {
      width: 155px;
      top: 105%;
      left: 0;
      transform: translateX(0);
      white-space: normal;
    }
    #mypage-detail-wrap {
      margin-top: 24px;
      padding: 24px 0;
    }
    #mypage-detail-wrap .condition-panel .container-inner.side-padding {
      padding-left: 0;
      padding-right: 0;
    }
    #mypage-detail-wrap #basic-wrap {
      gap: 24px;
    }
    #mypage-detail-wrap #basic-wrap > .title {
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    #mypage-detail-wrap #basic-wrap.full-content-header .title {
      margin: 0;
      width: 100%;
    }
    .breadcrumbs.mypage {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      width: 100%;
    }
    .breadcrumbs.mypage > ul {
      width: 100%;
      max-width: unset;
      font-size: 1.1rem;
      color: var(--color-light-black);
      gap: 32px;
    }
    .breadcrumbs.mypage > ul > li.current {
      padding: 6px 10px;
      border-radius: 3px;
      line-height: 14px;
    }
    #mypage-detail-wrap #basic-wrap > .search {
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    #mypage-detail-wrap #basic-wrap > .search > .title {
      width: 100%;
      justify-content: center;
      padding: 6px 12px;
      font-size: 1.2rem;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition {
      width: 100%;
      padding: 12px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box {
      gap: 8px;
      font-size: 1.2rem;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box > .label {
      width: unset;
      max-width: 70px;
      flex-basis: 70px;
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col1 > .inp-select,
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box.col2 > .inp-select {
      max-width: calc(100% - 80px);
      flex-basis: calc(100% - 80px);
    }
    #mypage-detail-wrap #basic-wrap > .search > .condition > .inner > .box > .inp-select {
      flex-grow: 1;
    }
    #mypage-detail-wrap .es-list .table-tr.col3 {
      flex-direction: column;
    }
    #mypage-detail-wrap .es-list .table-tr.col3 .tr-inner:not(:last-child) {
      border-bottom: 1px solid var(--color-background-light-gray);
    }
    #mypage-detail-wrap .es-list .table-th.short {
      flex-basis: 100px;
      width: 100px;
      padding: 12px;
    }
    #mypage-detail-wrap .list > ul > li {
      padding: 12px;
      border-radius: 8px;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner {
      padding: 16px;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap {
      gap: 4px;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box {
      flex-direction: column;
      gap: 0;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box .ttl {
      width: 100%;
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 11px;
      color: var(--color-background-back-gray);
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .date-wrap .date-box .txt {
      font-size: 1.1rem;
      line-height: 14px;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .label-wrap {
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }
    #mypage-detail-wrap .list > ul > li > .list-inner .top .label-wrap a {
      line-height: 15px;
      font-size: 1.2rem;
    }
    #mypage-detail-wrap .list > ul > li > .btn-wrap {
        margin-top: 12px;
        gap: 10px;
    }
    .btn-card-action {
      padding: 4px 16px 5px;
      border-radius: 20px;
      font-size: 1.2rem;
    }
    .fb-status-box {
      height: unset;
      border-radius: 6px;
      gap: 12px;
      align-items: center;
      padding: 6px 8px 6px 12px;
      width: 100%;
    }
    .fb-status-box .ttl {
      font-size: 1.2rem;
    }
    .fb-status-box .data {
      font-size: 1.2rem;
      line-height: 14px;
      padding: 6px 12px;
      justify-content: center;
      flex-grow: 1;
    }
    .fb-status-wrap {
      width: 100%;
    }
    .fb-status-wrap.sp-item-flex {
      margin-bottom: 16px;
    }
    .btn-outline {
      font-size: 1.4rem;
      padding: 10px 16px 11px;
    }
    .c-status-info {
      margin-bottom: 24px;
    }
    .c-status-info > .inner {
        border-radius: 6px;
        padding: 12px 8px;
    }
    .c-status-info > .data-wrap {
      gap: 12px;
    }
    .c-status-info .data-inner {
      gap: 6px;
    }
    .c-status-info > .inner .ttl {
      font-size: 1.2rem;
    }
    .c-status-info > .inner .text {
      font-size: 1.2rem;
      line-height: 19px;
      padding: 10px 16px;
      border-radius: 4px;
    }
    .c-status-info > .inner ul.text {
      padding-left: 30px;
    }
}