:root {
    --white: #fff;
    --black: #333;
    --blue: #17A1D4;
    --blue2: #107194;
    --blue3: #6B8791;
    --light-blue: #EDF2F4;
    --light-yellow: #FFFADC;
    --gray: #78797A;
    --light-gray: #F1F1F2;
    --light-gray2: #F8F8F8;
    --light-gray3: #D6D6D9;
    --light-gray4: #ccc;
    --red:#ee5d5d;
    --light-red: #f4eded;
}

/*----------------------------------
common
------------------------------------*/
* {
    color: var(--black);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
}

html {
    height: 100%;
    font-weight: 400;
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; /* 固定された.tab-menuの高さ */
}

body {
    height: 100%;
    color: var(--black);
    font-size: 1.4rem;
}

main {
    flex: 1;
}

a {
    color: var(--blue);
    transition: 0.4s;
}

a:hover {
    opacity: 0.6;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: top;
}

p{
    line-height: 1.8;
}

hr{
    border: 0.1rem dashed var(--light-gray3);
}

@media screen and (min-width: 769px) and (max-width: 999px) {
    html {
        font-size: calc(100vw / 99.9);
    }
}

@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: 6.5rem; /* 固定された.tab-menuの高さ */
        font-size: calc(100vw / 39);
    }
}

/* ------ display------ */
.d-none {
    display: none!important;
}

.d-block {
    display: block!important;
}

.d-inline-block {
    display: inline-block!important;
}

.d-flex {
    display: flex!important;
}

.d-inline-flex {
    display: inline-flex!important;
}

.flex-wrap{
    flex-wrap: wrap;
}

.justify-between{
    justify-content: space-between;
}

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

.align-center{
    align-items: center;
}

.flex-column{
    flex-flow: column;
}

.gap-5{
    gap: 0.5rem;
}

.gap-10{
    gap: 1rem;
}

.column-gap-5{
    column-gap: 0.5rem;
}

@media screen and (min-width: 769px) {
    .d-md-none {
        display: none!important;
    }

    .d-md-block {
        display: block!important;
    }

    .d-md-flex {
        display: flex!important;
    }
}

@media screen and (min-width: 992px) {
    .d-lg-none {
        display: none!important;
    }

    .d-lg-block {
        display: block!important;
    }

    .d-lg-flex {
        display: flex!important;
    }
}

/* ------ spacer ------ */
.spacer-3{
    width: 100%!important;
    height: 0.3rem;
}

.spacer-10{
    width: 100%!important;
    height: 1rem;
}

.spacer-20{
    width: 100%!important;
    height: 2rem;
}

.spacer-26{
    width: 100%!important;
    height: 2.6rem;
}

.spacer-30{
    width: 100%!important;
    height: 3rem;
}

.spacer-50{
    width: 100%!important;
    height: 5rem;
}

.spacer-100{
    width: 100%!important;
    height: 10rem;
}

/* ------ text ------ */
.text-normal {
    font-weight: 400!important;
}

.text-medium {
    font-weight: 500!important;
}

.text-bold {
    font-weight: 700!important;
}

.text-center {
    text-align: center!important;
}

.text-left {
    text-align: left!important;
}

.text-right {
    text-align: right!important;
}

.decoration-none{
    text-decoration: none;
}

.text-red,
.text-error{
    color: var(--red)!important;
}

.text-black{
    color: var(--black)!important;
}

/* ------ margin padding ------ */
.m-0{
    margin: 0!important;
}
.mt-10{
    margin-top: 1rem!important;
}

.p-0{
    padding: 0!important;;
}

/* ------background------ */
.bg-white{
    background-color: var(--white)!important;
}

.bg-blue{
    background-color: var(--blue)!important;
}

.bg-blue2{
    background-color: var(--blue2)!important;
}

.bg-blue3{
    background-color: var(--blue3)!important;
}

.bg-gray{
    background-color: var(--gray)!important;
}

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

.bg-light-gray4{
    background-color: var(--light-gray4)!important;
}

.bg-light-blue{
    background-color: var(--light-blue)!important;
}

.bg-light-red{
    background-color: var(--light-red)!important;
}

/* ------other------ */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    position: relative;
    width: calc(100% - 2rem);
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 0 8rem;
}

.container-2 {
    max-width: 52rem;
}

.container-3 {
    max-width: 76rem;
}

.card{
    max-width: 58rem;
    margin: 3rem auto 0;
    padding: 1rem 3rem 4rem;
    text-align: center;
    background-color: var(--light-gray2);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
}

.card-note{
    margin-top: 4rem;
    padding: 2rem 1.4rem 2.4rem;
    background-color: var(--white);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
}

.card-note ul{
    display: inline-block;
    margin: 0 auto;
    line-height: 1.8;
}

.card-note li{
    padding-left: 1em;
    text-indent: -1em;
    text-align: left;
}

.white-space-nowrap{
    white-space: nowrap;
}

.badge{
    position: absolute;
    top: -0.6rem;
    left: 0;
    padding: 0.2rem 0.4rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    background-color: var(--blue);
}

.ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .card{
        padding: 1rem 2rem 4rem;
    }
}

/*----------------------------------
共通ボタン
------------------------------------*/
.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 2.8rem;
    padding: 0 1.2rem 0.05rem;
    color: var(--white);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    background-color: var(--blue);
    border-radius: 0.2rem;
    transition: 0.4s;
    cursor: pointer;
}

.btn:hover{
    opacity: 0.6;
}

p.btn{
    cursor: default;
}

p.btn:hover{
    opacity: 1;
}

.btn-under-tab{
    position: absolute;
    top: 1rem;
    right: 0;
    height: 2.9rem;
    padding: 0 3rem;
    font-size: 1.2rem;
}

.bottom-btn{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    margin: 3.4rem auto 0;
}

.bottom-btn .btn{
    min-height: 4rem;
    padding: 0.5rem 1.2rem;
    font-size: 1.4rem;
}

.btn-light {
    color: var(--blue);
    background-color: var(--light-blue);
    border: 0.1rem solid var(--blue);
}

.btn-invalid{
    pointer-events: none;
    background-color: var(--light-gray3)!important;
}

.btn-download{
    position: relative;
    width: auto;
    max-width: none;
    padding-right: 2.5rem;
    align-self: flex-start;
}

.btn-download::after{
    content: "";
    position: absolute;
    top: 51%;
    right: 1.1rem;
    transform: translateY(-50%);
    display: block;
    width: 1rem;
    height: 1.188rem;
    background: url(/img/common/icon_download.svg) no-repeat;
    background-size: contain;
}

.btn-download-blue::after{
    width: 0.937rem;
    height: 1.113rem;
    background: url(/img/common/icon_download_blue.svg) no-repeat;
    background-size: contain;
}

.btn-deletion{
    position: relative;
    align-self: self-start;
    height: 1.8rem;
    margin: 0.3rem 0 0 0.5rem;
    padding: 0 0.6rem 0 1.6rem;
    color: var(--gray);
    font-size: 1rem;
    background-color: var(--white);
    border: 0.1rem solid var(--gray);
}

.btn-deletion::before{
    content: "";
    position: absolute;
    top: 51%;
    left: 0.5rem;
    transform: translateY(-50%);
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: url(/img/common/icon_cross.svg) no-repeat;
    background-size: contain;
}

.btn-attachment{
    position: relative;
    width: 8.4rem;
    padding: 0 0.6rem 0 2.6rem;
}

.btn-attachment::before{
    content: "";
    position: absolute;
    top: 51.5%;
    left: 1.8rem;
    transform: translateY(-50%);
    display: block;
    width: 1.285rem;
    height: 1.362rem;
    background: url(/img/common/icon_paperclip.svg) no-repeat;
    background-size: contain;
}

.accordion-contents{
    display: none;
    margin-top: 2rem;
}

@media screen and (min-width: 769px){
    .bottom-btn .btn{
        min-width: 18rem;
    }
}

@media screen and (max-width: 768px){
    .bottom-btn{
        gap: 1rem;
    }

    .bottom-btn .btn{
        flex: 1;
        max-width: 20rem;
        min-height: 4.5rem;

    }

    .btn-under-tab{
        min-width: 7.4rem;
        padding: 0 0.8rem;
    }
}

/*----------------------------------
共通フォーム設定
------------------------------------*/
input {
    font-size: 1.4rem;
    outline: none;
}

select {
    cursor: pointer;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 1.3rem;
}

label{
    font-size: 1.4rem;
    cursor: pointer;
}

input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    pointer-events: none;

}

.custom-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.4rem;
    position: relative;
}

.form .text-error{
    margin-top: 0.3rem;
    text-align: left;
    font-size: 1.2rem;
}

.form-group {
    width: 100%;
    display: flex;
    gap: 1rem;
}

.form-group .form-control::placeholder {
    color: var(--light-gray4);
}

.form-group label{
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.form-group input.form-control,
.form-group select.form-control {
    width: 100%;
    height: 3.2rem;
    padding: 0 0.8rem;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
}

.form-group input.form-control[readonly],
.form-group select.form-control[readonly],
.form-group .read-only{
    background-color: transparent;
    border: none;
}

.card .form-group input.form-control,
.card .form-group select.form-control {
    width: 100%;
    height: 4.6rem;
    padding: 0 1.5rem;
    background-color: var(--white);
}

.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
    resize: vertical;
}

.form-group textarea:focus {
    outline: none;
}

.form-group-2 > *{
    flex: 1;
}


.form-name {
    display: flex;
    margin-bottom: 0.7rem;
}

.form-name p {
    font-size: 1.2rem;
    font-weight: 700;
}

.form-password{
    position: relative;
}

.form-password span{
    position: absolute;
    top: 50%;
    right: 0;
    width: 4.5rem;
    height: 100%;
    transform: translateY(-50%);
    cursor: pointer;
}

.form-password span:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    display: inline-block;
    width: 1.6rem;
    height: 1.271rem;
    background: url(/img/common/icon_eye_slash.svg) no-repeat;
    background-size: contain;
}

.form-password span.opened:after{
    width: 1.6rem;
    height: 1.1rem;
    background-image: url(/img/common/icon_eye.svg)
}



@media screen and (min-width: 769px) and (max-width: 999px) {
    input {
        font-size: calc(100vw / 99.9);
    }
}

@media screen and (max-width: 768px) {
    .form-group,
    input,
    textarea{
        font-size: 16px!important;
    }
}

/*---カスタムチェックボックス・カスタムラジオボタン---*/
.custom-checkbox {
    position: relative;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0.1rem 0.8rem 0 0;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
    transition: background-color 0.4s ease;
    cursor: pointer;
}

.custom-checkbox::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0.2rem;
    width: 0.5rem;
    height: 1rem;
    border: solid var(--black);
    border-width: 0 0.2rem 0.2rem 0;
    transform: rotate(45deg);
    opacity: 0;
}

input[type="checkbox"]:checked + .custom-checkbox::after {
    opacity: 1;
}

.form-check {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-radio input[type="radio"] {
    display: none;
}

.form-radio input[type="radio"]:checked + .custom-radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background-color: var(--black);
    border-radius: 50%;
}

.custom-radio {
    position: relative;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.7rem;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 50%;
}

/*カスタムプルダウン、
　カスタムプルダウンチェックボックス
　カスタムラジオボタン
------------------------------------*/
.dropdown{
    position: relative;
    width: 100%;
}

.dropdown-display{
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    width: 100%;
    min-width: 0;
    height: 2.8rem;
    padding: 0 2.5rem 0 0.8rem;
    text-align: left;
    line-height: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0.2rem;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    cursor: pointer;
}

.dropdown-display::after{
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    transform-origin: 50% 0;
    max-width: 100%;
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.6rem solid var(--black);
    transition: all 0.4s ease-in-out;
}

.dropdown-display-text {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.default-display .dropdown-display-text {
    color: var(--gray);
}

.dropdown-list{
    z-index: 99999;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 20rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    background-color: var(--white);
    border-radius: 0.4rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    overflow-x: hidden;
    overflow-y: auto;
}

.dropdown-list.opened{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.dropdown-list label{
    position: relative;
    display: block;
    width: 100%;
    padding: 0.5rem 1.2rem;
}

.dropdown-list label:last-of-type {
    padding-bottom: 1.2rem;
}

.dropdown-list label:not(.check-dropdown-label):hover{
    background-color: var(--light-gray);
}

.check-dropdown-list label:first-of-type{
    padding-top: 1.2rem;
}

.check-dropdown-list .check-dropdown-label{
    display: flex;
    max-width: 100%;
    align-items: center;
    white-space: normal;
    cursor: pointer;
}

.reset-btn{
    position: sticky!important;
    bottom: 0;
    text-align: right;
    color: var(--blue);
    background-color: var(--white)!important;
}

.radio-dropdown-label input[type="radio"] {
    display: none;
}

.sort-group{
    display: flex;
    justify-content: end;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.sort-group .dropdown {
    width: 14rem;
    font-size: 1.2rem;
}

.sort-group .dropdown-display{
    line-height: 2.2;
    color: var(--black);
}

.sort-group .dropdown-list {
    overflow: hidden;
}

.sort-group .dropdown-list label {
    padding: 0.5rem 1.2rem!important;
}

@media screen and (max-width: 768px) {
    .dropdown-display{
        height: 3.5rem;
    }
}

/*----------------------------------
タブメニュー
------------------------------------*/
.tab-menu-spacer {
    display: none;
}

/* 固定されるタブメニューのスタイル */
.tab-menu.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.tab-menu{
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    background-color: var(--light-gray);
}

.tab-menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.tab-menu-contents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    max-width: 76.8rem;
    margin: 0 auto;
    padding-bottom: 0.2rem;
}

.tab-menu-contents a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    padding: 0 0.35rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--black);
    font-size: 1.2rem;
    font-weight: 500;
    background-color: var(--white);
    cursor: pointer;
}

.tab-menu-contents a.active::before{
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: -0.2rem;
    display: block;
    width: calc(100% + 0.4rem);
    height: 0.5rem;
    background-color: var(--blue);
}

.tab-menu-contents a:first-of-type.active::before{
    left: 0;
    width: calc(100% + 0.2rem);
}

.tab-menu-contents a:last-of-type.active::before{
    right: 0;
    width: calc(100% + 0.2rem);
}

@media screen and (min-width: 769px) {
    .tab-menu-contents a{
        flex: 1 1;
        order: -1;
        width: 15.2rem;
        min-width: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .tab-menu-spacer {
        display: none;
    }

    .tab-menu-fixed .tab-menu-spacer {
        display: block;
        height: 6.5rem;
    }

    .tab-menu-contents {
        width: 100%;
        justify-content: space-between;
    }

    .tab-menu-contents a{
        width: auto;
        height: 4.5rem;
    }

    #tab-menu-company a{
        flex: 1;
    }
}

/*----------------------------------
title
------------------------------------*/
.main-title{
    padding: 4rem 0 2rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
}

.second-title{
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    font-size: 1.8rem;
    font-weight: 500;
    border-radius: 0.2rem;
    background-color: var(--light-blue);
}

.third-title{
    margin: 2rem 1rem 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 0.3rem dotted var(--blue3);
}

.third-title > *{
    color: var(--blue3);
    font-size: 1.6rem;
    font-weight: 500;
}

.additional-info-title{
    position: relative;
    padding-right: 2em;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 4rem;
    padding: 0 1.2rem;
    height: 3.8rem;
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    background-color: var(--blue);
}

.additional-info-title::before,
.additional-info-title::after {
    content: '';
    position: absolute;
    right: 0.8em;
    top: 50%;
    width: 12px;
    height: 2px;
    background-color: var(--white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.additional-info-title::after {
    transform: rotate(90deg);
}

.additional-info-title.opened::after {
    opacity: 0;
}

@media screen and (max-width: 768px) {
    #student .main-title{
        padding: 2rem 0;
    }
}

/*----------------------------------
table
------------------------------------*/
td{
    word-break: break-all;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    border: 0.1rem solid var(--light-gray3);
}

.admin-table td{
    border-bottom: 0.1rem solid var(--light-gray3);
}

.admin-table td {
    padding: 0.8rem 1.3rem;
}


.admin-table th {
    height: 5.2rem;
    padding: 0 1rem;
    text-align: left;
    line-height: 1.3;
    font-size: 1.2rem;
    font-weight: 700;
    background-color: var(--light-blue);
    border-bottom: 0.1rem solid var(--light-gray3);
}

.admin-table th:first-of-type,
.admin-table td:first-of-type {
    padding: 0 1.3rem 0 1.4rem;
}

.admin-table th.form-check,
.admin-table td.form-check {
    padding: 0 0 0 1.4rem;
}

.admin-table th.form-check {
    display: flex;
    align-items: center;
}

.admin-table td.form-check {
    position: relative;
    display: table-cell;
    width: auto;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0;
}

.admin-table th a{
    text-decoration: none;
}

.admin-table .custom-checkbox {
    margin: 0;
}

.admin-table .btn{
    font-size: 1.2rem;
}

.admin-table .th-id{
    width: 76px;
}

.th-phase,
.th-applicant-name{
    min-width: 10rem;
}

.th-target-graduation-year{
    min-width: 9rem;
}

.th-target-graduation-year

td.table-btn-group {
    position: relative;
    top: -0.8rem;
    display: table-cell;
    padding: 0.8rem 1.3rem 0.8rem 0;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0;
}

.table-btn-group .btn{
    height: 3rem;
    margin: 0 0.5rem;
    font-size: 1.2rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

.info-table {
    width: 100%;
    margin-bottom: 2rem;
    background-color: var(--white);
    border: 0.1rem solid var(--light-gray3);
    border-collapse: collapse;
}

.info-table:not(.info-table-required) {
    table-layout: fixed;
}

.info-table:last-of-type {
    margin-bottom: 1rem;
}

.info-table-col-label {
    width: 16.5rem !important;
}

.info-table-col-value {
    width: auto;
}

.info-table th,
.info-table td {
    min-height: 4rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem 1.7rem;
    text-align: left;
    border-bottom: 0.1rem solid var(--light-gray3);
}

.info-table th {
    background-color: var(--light-blue);
    vertical-align: top;
    text-align: left;
    word-wrap: break-word;
}

.info-table th.info-table-title{
    color: var(--white);
    background-color: var(--blue);
}

.info-table tr:last-child td{
    border-bottom: none;
}

.info-table-required th,
.info-table-required td {
    padding: 1rem;
}

.info-table-required th{
    width: 23rem;
}

.info-table-required td{
    padding: 0.5rem 1rem;
}

.required{
    position: relative;
    display: block;
}

.required:before{
    position: absolute;
    top: 50%;
    right: -3.5em;
    transform: translateY(-50%);
    content: "必須";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    padding: 0 0.5rem 0.1rem;
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--light-yellow);
    border-radius: 0.8rem;
}

.info-table .dropdown-display{
    height: 3.2rem;
}

.info-table-required .form-group-2{
    width: 50%;
}

.info-table-required td > .form-group{
    margin: 0.5rem 0;
}

.required-group thead tr {
    font-size: 1.2rem;
    background-color: var(--light-yellow);
}

@media screen and (min-width: 769px) {
    .info-table-col-label{
        width: 19rem!important
    }

    .info-table th{
        padding: 1.4rem 1.7rem 1rem;
    }

    .info-table-required tr:first-of-type th,
    .info-table-required tr:first-of-type td{
        padding-top: 1.4rem;
    }

    .info-table-required th{
        padding: 1.4rem 4.5rem 1rem 1.7rem;
    }

    .info-table-show.info-table-required th{
        padding: 1.1rem 4.5rem 1rem 1.7rem;
    }

    .required-pc-display{
        top: 1rem;
        width: 100%;
        height: 4.2rem;
    }

    .required-group tr {
        border-bottom: 0.1rem solid var(--light-gray4);
    }

    .required-group td {
        padding: 0.5rem 1.7rem!important;
    }
}

@media screen and (max-width: 768px) {
    .info-table{
        font-size: 16px;
    }

    .info-table th{
        padding: 0.9rem 1rem 1rem;
        font-size: 15px;
    }

    .info-table td {
        padding: 1rem 0.8rem;
    }

    .info-table-required{
        border: none;
    }

    .info-table-required tr{
        display: flex;
        flex-flow: column;
        margin-bottom: 1.6rem;
        padding-bottom: 1.5rem;
        border-bottom: 0.2rem solid var(--light-gray3);
    }

    .info-table-required th,
    .info-table-required td{
        padding: 0 1rem;
        border-bottom: none;
    }

    .info-table-required th{
        display: inline-block;
        width: auto;
        min-height: 2.5rem;
        margin-bottom: 0.5rem;
        background-color: transparent;
    }

    .info-table-required td {
        width: 100%;
        min-height: 2.5rem;
    }

    .info-table-required .form-group{
        width: 100%;
        margin-left: 0;
    }

    .info-table-required .form-group-2{
        width: 100%;
    }

    .required{
        display: inline-block;
    }

    table.required-group{
        background-color: var(--light-gray2);
        padding-bottom: 0;
    }

    table.required-group::after{
        content: "";
        display: block;
        width: 100%;
        height: 1.8rem;
        background: var(--white);
        border-bottom: 0.2rem solid var(--light-gray3);
    }

    .required-group{
        margin-top: -1rem;
    }

    .required-group tr{
        margin-bottom: 0;
        border: none;
    }

    .required-group thead tr{
        margin-bottom: 1rem;
        padding-bottom: 0;
        border: none;
    }
}

/*----------------------------------
ページネーション、件数表示
----------------------------------*/
#pagination{
    margin-bottom: ;
}
.pagination-list{
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.pagination-list li:nth-child(1) img,
.pagination-list li:nth-last-child(1) img{
    width: 1.206rem;
    height: 1.181rem;
    margin-top: 0.5rem;
}

.pagination-list li:nth-child(2) img,
.pagination-list li:nth-last-child(2) img{
    width: 0.65rem;
    height: 1.181rem;
    margin: 0.5rem 0.5rem 0;
}

.pagination-list li:nth-last-child(1) img,
.pagination-list li:nth-last-child(2) img{
    transform: scaleX(-1);
}

.pagination-number{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--white);
    font-weight: 500;
    background-color: var(--gray);
    border-radius: 0.2rem;
}

.pagination-number a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--white);
}

.pagination-number.active{
    background-color: var(--blue);
}

.pagination-number:first-of-type{
    margin-left: 0.8rem;
}

.number-results {
    text-align: right;
    margin: 0.8rem 0 0.3rem;
}

#pagination-under{
    margin-top: 3rem;
}

/*----------------------------------
絞り込み
------------------------------------*/
.search-aria{
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    max-width: 54.5rem;
    margin: 0 auto 3rem;
}

.search-aria .btn{
    width: 7.4rem;
}

.search-box{
    position: relative;
    width: 100%;
}

.search-box:last-of-type {
    width: calc(100% - 8.4rem);
}

.search-box input{
    width: 100%;
    height: 3.2rem;
    padding: 0 0.8rem;
    font-size: 1.4rem;
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
    border-radius: 0.2rem;
}

@media screen and (max-width: 768px) {
    .search-aria{
        margin: 0 auto 1rem;
    }
}

/*----------------------------------
スライダー
------------------------------------*/
.slick-dotted.slick-slider {
    margin-bottom: 0;
    padding-bottom: 4rem;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 0.1rem;
}

.slick-list, .slick-track {
    height: 100%;
}

.slider .slick-dots {
    bottom: 1rem;
}

.slider .slick-dots li {
    width: 0.8rem;
    height: 0.8rem;
}

.slider .slick-dots li button {
    position: relative;
    font-size: inherit;
    width: 0.8rem;
    height: 0.8rem;
}

.slider .slick-dots li button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.6rem;
    height: 0.6rem;
    font-size: inherit;
    border: 0.1rem solid var(--blue);
    border-radius: 50%;
    box-sizing: border-box;
    opacity: 1;
}

.slick-dots li.slick-active button::before {
    background-color: var(--blue);
}

@media screen and (min-width: 769px) {
    .slider {
    order: 1;
    }

    .slider .slick-list {
        padding-right: 14%;
    }

    .slider .slick-dots{
        bottom: 1rem;
    }

    .slider .slick-dots li {
        width: 2rem;
        height: 1rem;
    }

    .slider .slick-dots li button::before {
        width: 0.8rem;
        height: 0.8rem;
    }
}

/*----------------------------------
求人ボックス
------------------------------------*/
.job-box-list{
    display: flex;
    flex-flow: column;
    gap: 1.6rem;
}

.job-box {
    position: relative;
    display: grid;
    grid-template-columns: 14.8rem 1fr;
    grid-template-rows: auto auto;
    border: 0.1rem solid var(--light-gray3);
}

.job-box-img {
    grid-area: 1 / 1 / 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.8rem;
    height: 100%;
    padding: 2rem;
    border-right: 0.1rem solid var(--light-gray3);
    overflow: hidden;
}

.job-box-img img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.job-box-company-name {
    grid-area: 1 / 2 / 2 / 3;
    padding: 1.3rem 1.2rem;
    line-height: 1.8;
    background-color: var(--light-gray);
}

.job-box-contents {
    grid-area: 2 / 2 / 3 / 3;
    padding: 1.2rem;
}

.job-box-detail p {
    display: flex;
}

.job-box-detail p::before {
    content: attr(data-label);
    white-space: nowrap;
    }

.job-box-detail dt,
.job-box-detail dd {
    margin: 0;
}

.job-box-btn-group > *{
    width: 10.6rem;
    height: 4rem;
}

.btn-favorite {
    position: relative;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding-left: 3rem;
    color: var(--blue);
    background-color: var(--white);
    border: 0.1rem solid var(--blue);
}

.btn-favorite::before{
    content: "";
    position: absolute;
    top: 51%;
    left: 1.2rem;
    transform: translateY(-50%);
    display: block;
    width: 1.364rem;
    height: 1.25rem;
    background: url(/img/common/icon_star_outline.svg) no-repeat;
    background-size: contain;
}

.btn-favorite.active::before{
    background: url(/img/common/icon_star.svg) no-repeat;
    background-size: contain;
}

.btn-favorite:hover{
    opacity: 1;
}

.btn-applying {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.btn-not-applying,
.not-btn{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: start;
    align-self: center;
}

.not-btn{
    color: var(--black);
    cursor: default;
}

.not-btn:hover{
    opacity: 1;
    transition: none;
}

.job-box-date{
    align-self: flex-end;
}

.job-box-tag{
    position: absolute;
    top: 1rem;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.8rem;
    padding: 0 1rem;
    font-weight: 500;
    background-color: var(--light-yellow);
}

@media screen and (min-width: 769px) {
    .job-box-company-name{
        padding: 1.3rem 18.5rem 1.3rem 1.2rem;
    }

    .job-box-detail{
        width: calc(100% - 14rem);
    }
}

@media screen and (max-width: 768px) {
    .job-box {
        grid-template-columns: 7.2rem 1fr;
    }

    .job-box-has-tag:not(:first-of-type) {
        margin-top: 2rem;
    }

    .job-box-img {
        grid-area: 1 / 1 / 2 / 2;
        width: 7.2rem;
        border-bottom: 0.1rem solid var(--light-gray3);
    }

    .job-box-company-name {
        display: flex;
        align-items: center;
        grid-area: 1 / 2 / 2 / 3;
        border-bottom: 0.1rem solid var(--light-gray3);
    }

    .job-box-contents {
        grid-area: 2 / 1 / 3 / 3;
    }

    .job-box-btn-group{
        display: flex;
        gap: 1rem;
        width: 100%;
        margin-top: 1.5rem;
    }

    .job-box-btn-group > *{
        height: 4.5rem;
    }

    .job-box-btn-group > *:not(.btn-favorite) {
        flex: 1;
    }

    .btn-favorite{
        width: 4.5rem;
        padding: 2.5rem 0 0;
        font-size: 0.7rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .btn-favorite::before{
        top: 0.65rem;
        left: 50%;
        width: 2rem;
        height: 1.857rem;
        transform: translateX(-50%);
    }

    .job-box-date{
        text-align: right;
        margin-top: 0.5rem;
    }

    .job-box-tag{
        top: -2.9rem;
        left: -0.1rem;
        right: auto;
        border-radius: 0.5rem 0.5rem 0 0;
    }
}

@media screen and (min-width: 769px) {
    .job-box-contents {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }

    .job-box-btn-group{
        width: 22.2rem;
        min-height: 9rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 4rem auto;
        gap: 0.5rem 1rem;
        width: max-content;
        align-items: center;
        row-gap: 0.8rem;
        column-gap: 1rem;
    }
}

/*----------------------------------
header
------------------------------------*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4.8rem;
    padding: 1rem 2rem;
}

#company header{
    background-color: var(--blue);
}

.header-logo img {
    width: 13rem;
    height: 2.998rem;
    margin-top: 0.2rem;
}

#company .student-header-logo{
    display: none;
}

#student .company-header-logo{
    display: none;
}

.header-btn {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.header-btn .btn {
    width: 12rem;
    height: 3rem;
    border-radius: 1.5rem;
    background-color: var(--white);
}

#student .header-btn .btn{
    background-color: var(--light-gray);
    border: 0.1rem solid var(--light-gray3);
}

.btn-login span {
    position: relative;
    padding-left: 2rem;
}

.btn-login span::before {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0;
    display: block;
    width: 1.2rem;
    height: 1.4rem;
    background: url(/img/common/icon_lock.svg) no-repeat;
    background-size: contain;
    background-position: top left;
}

.header-btn-download span {
    position: relative;
    padding-left: 1.8rem;
}

.header-btn-download span::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0;
    display: block;
    width: 1.095rem;
    height: 1.3rem;
    background: url(/img/common/icon_download_blue.svg) no-repeat;
    background-size: contain;
    background-position: top left;
}

@media screen and (max-width: 768px) {
    header{
        padding: 1rem;
    }

    .header-btn .btn{
        min-height: 3.5rem;
    }
}

/*----------------------------------
footer
------------------------------------*/
#back-to-top {
    position: fixed;
    bottom: 8rem;
    right: 1rem;
    width: 4.5rem;
    height: 4.5rem;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
    opacity: 0;
}

#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.footer-contents{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.3rem;
    text-align: center;
    font-size: 0.9rem;
}

#company .footer-contents {
    background-color: var(--light-gray);
}

#student .footer-contents {
    background-color: var(--blue);
}

#student .footer-contents p{
    color: var(--white);
}

/*----------------------------------
メッセージお知らせ
------------------------------------*/
.notice-message{
    padding: 0.5rem 0;
    background: var(--light-yellow);
}

.notice-message ul{
    max-width: 76rem;
    margin: 0 auto;
}

.notice-message li{
    position: relative;
    padding: 0.5rem 0;
}

.notice-message a{
    font-weight: 700;
}

/*----------------------------------
個別ページ設定
------------------------------------*/

/*利用規約
------------------------------------*/
.terms-of-use .second-title{
    margin: 3rem 0 1rem;
}

.terms-of-use-contents{
    padding: 0 0.5rem;
}

.terms-of-use ul{
    margin-bottom: 2rem;
}

.terms-of-use-contents > ul li:first-of-type{
    margin-top: 1rem;
}

.terms-of-use-list{
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.3;
}

.terms-of-use-list2{
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-height: 1.6;
}

.terms-of-use li:not(:last-of-type){
    padding-bottom: 1rem;
}

.terms-of-use-bottom p{
    margin-bottom: 2rem;
}

.terms-of-use-table{
    width: 100%;
    border-collapse: collapse;
}

.terms-of-use-table th,
.terms-of-use-table td{
    padding: 1.6rem;
    border-top: 0.1rem solid var(--light-gray3);
    border-right: 0.1rem solid var(--light-gray3);
    border-bottom: 0.1rem solid var(--light-gray3);
    border-spacing: 0;
}

.terms-of-use-table th:first-of-type,
.terms-of-use-table td:first-of-type{
    border-left: 0.1rem solid var(--light-gray3);
}

.terms-of-use-table td:first-of-type{
    width: 16rem;
}

.terms-of-use-table th{
    width: 5.5rem;
    font-weight: 500;
    background-color: var(--light-blue);
    border-top: 0.1rem solid var(--light-gray3);
}

.terms-of-use-table a{
    display: block;
}


/*企業情報
------------------------------------*/
@media screen and (min-width: 769px) {
    .company-info fieldset:not(:last-of-type){
        margin-bottom: 2rem;
    }
}

/*企業担当者一覧
------------------------------------*/
.company-staff-list .table-btn-group {
    position: relative;
    top: auto;
    display: table-cell;
    padding: 0.8rem 1.3rem 0.8rem 0;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0;
}

.company-staff-list .th-btn{
    width: 22rem;
}

.company-staff-list .btn-edit{
    position: absolute;
    top: 50%;
    right: 15.1rem;
    transform: translateY(-50%);
}

.company-staff-list .btn-reissue-pass{
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

.btn-placeholder{
    visibility: hidden;
    display: inline-block;
    height: 3.2rem;
}

/*求人情報一覧
------------------------------------*/
.job-info-list th:not(:nth-of-type(2)):not(:nth-of-type(3)):not(:nth-of-type(4)),
.job-info-list td:not(:nth-of-type(2)):not(:nth-of-type(3)):not(:nth-of-type(4)){
    text-align: center;
    white-space: nowrap;
}

/*応募者一覧
------------------------------------*/
.applicant-list th:not(:nth-of-type(3)):not(:nth-of-type(4)):not(:nth-of-type(5)):not(:nth-of-type(6)),
.applicant-list td:not(:nth-of-type(3)):not(:nth-of-type(4)):not(:nth-of-type(5)):not(:nth-of-type(6)){
    text-align: center;
    white-space: nowrap;
}

/*応募者詳細
------------------------------------*/
.display-phase{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    margin-bottom: 2rem;
    font-weight: 500;
    background-color: var(--light-yellow);
}

.phase-history-list{
    display: flex;
    flex-flow: column;
    gap: 1.4rem;
    padding: 1.5rem 2rem;
    border: 0.1rem solid var(--light-gray3);
}

.phase-history-list li{
    display: flex;
    gap: 4.5rem;
}

.phase-history-list .date{
    color: var(--blue3);
    line-height: 1.7;
    font-weight: 700;
}

.more-btn{
    position: relative;
    width: 100%;
    height: 2.8rem;
    text-align: center;
    background-color: var(--light-gray);
    border-left: 0.1rem solid var(--light-gray3);
    border-right: 0.1rem solid var(--light-gray3);
    border-bottom: 0.1rem solid var(--light-gray3);
}

.more-btn:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 1.388rem;
    height: 0.72rem;
    background: url(/img/common/icon_arrow3.svg) no-repeat;
    background-size: contain;
}

.more-btn.opened:after{
    transform: scaleY(-1) translateX(-50%);;
    top: 35%;
    width: 1.4rem;
    height: 0.74rem;
}

/*メッセージ
------------------------------------*/
#student .message #pagination,
#student .message #pagination-under{
    text-align: right;
}

.js-tr-link{
    cursor: pointer;
}

.js-tr-link:hover{
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

.message-list {
    width: 100%;
    margin-bottom: 3rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.message-list tr:not(:last-of-type){
    border-bottom: 0.1rem solid var(--light-gray3);
}

.message-list td{
    white-space: nowrap;
}


.message-list th{
    padding: 0.4rem 1.3rem 0.1em 1.4rem;
}

.message-list td {
    padding: 1rem 1.3rem 1rem 1.4rem;
}

.message-list th:nth-of-type(2),
.message-list td:nth-of-type(2),
.message-list th:nth-of-type(3),
.message-list td:nth-of-type(3),
.student-message-list th:nth-of-type(4),
.student-message-list td:nth-of-type(4){
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-list th:nth-of-type(6) span{
    position: relative;
    display: inline-block;
    padding-right: 2.5rem;
}

.message-list .sortable span:after{
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transform-origin: 50% 0;
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: none;
    border-bottom: 0.6rem solid var(--black);
    cursor: pointer;
}

.message-list .sortable.desc span:after{
    border-top: 0.6rem solid var(--black);
    border-bottom: none;
}

.message-list .icon-paperclip{
    display: inline-block;
    margin-top: 0.3rem;
    width: 1.62rem;
    height: 1.696rem;
}

.message-tag{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 2rem;
    font-size: 1rem;
    white-space: nowrap;
    border-radius: 1.2rem;
}

.receipt .message-tag{
    background-color: var(--light-yellow);
}

.send .message-tag{
    background-color: var(--light-blue);
}

.unread td:nth-of-type(2),
.unread td:nth-of-type(3){
    font-weight: 700;
}

.message-text{
    min-height: 12rem;
    padding: 1.4rem 1.2rem;
    border-left: 0.1rem solid var(--light-gray3);
    border-right: 0.1rem solid var(--light-gray3);
    border-bottom: 0.1rem solid var(--light-gray3);
}


@media screen and (min-width: 769px) {
    .message-list th:nth-of-type(1),
    .message-list td:nth-of-type(1){
        width: 6.7rem;
        padding: 1rem 0.8rem 1rem 1.4rem;
    }

    .message-list th:nth-of-type(2),
    .message-list td:nth-of-type(2){
        width: auto;
        padding: 1rem 1.3rem 1rem 0.8rem;
    }

    .message-list th:nth-of-type(3),
    .message-list td:nth-of-type(3){
        width: 53%;
    }

    .message-list th:nth-of-type(4),
    .message-list td:nth-of-type(4){
        width: 7.3rem;
        text-align: center;
    }

    .message-list th:nth-of-type(5),
    .message-list td:nth-of-type(5){
        width: 4.4rem;
    }

    .message-list th:nth-of-type(6),
    .message-list td:nth-of-type(6){
        width: 14rem;
        text-align: center;
    }

    .student-message-list th:nth-of-type(3),
    .student-message-list td:nth-of-type(3){
        width: 43%;
    }

    .student-message-list th:nth-of-type(4),
    .student-message-list td:nth-of-type(4){
        width: 18rem;
        text-align: left;
    }
}


@media screen and (max-width: 768px) {
    #student .message #pagination,
    #student .message #pagination-under{
        text-align: center;
    }

    #student .message #pagination{
        margin-top: 2.4rem;
    }

    .student-message-list table,
    .student-message-list thead,
    .student-message-list tbody,
    .student-message-list th,
    .student-message-list td,
    .student-message-list tr {
        display: block;
    }

    .message-list{
        border: none;
        border-top: 0.1rem solid var(--light-gray3);
        border-bottom: 0.1rem solid var(--light-gray3);
    }

    .student-message-list thead{
        display: none;
    }

    .student-message-list tr{
        display: grid;
        grid-template-columns: 5.5rem auto 2.3rem 11rem;
        grid-template-rows: auto;
        padding: 0.6rem 0;
    }

    .message-list th,
    .message-list td{
        padding: 0.3rem;
    }

    .message-list th:first-of-type,
    .message-list td:first-of-type{
        padding: 0.3rem 0.3rem 0.3rem 0;
    }

    .message-list th:last-of-type,
    .message-list td:last-of-type,
    .message-list th:nth-of-type(3),
    .message-list td:nth-of-type(3){
        padding: 0.3rem 0 0.3rem 0.3rem;
    }

    .student-message-list td,
    .student-message-list th{
        border: none!important;
    }

    .student-message-list td:nth-of-type(1){
        grid-area: 1 / 1 / 2 / 2;
    }

    .student-message-list td:nth-of-type(2){
        grid-area: 1 / 2 / 2 / 3;
    }

    .student-message-list td:nth-of-type(3){
        grid-area: 2 / 1 / 3 / 5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        padding-left: 5.5rem;
    }

    .student-message-list td:nth-of-type(4){
        grid-area: 3 / 1 / 4 / 5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        padding-left: 5.5rem;
    }

    .student-message-list td:nth-of-type(5){
        grid-area: 1 / 3 / 2 / 4;
    }

    .student-message-list td:nth-of-type(6){
        grid-area: 1 / 4 / 2 / 5;;
    }

    .message-list th:nth-of-type(3),
    .message-list td:nth-of-type(3){
        white-space: normal;
    }

    .message-text{
        padding: 1rem 0.8rem;
    }

    .message .info-table-col-label{
        width: 10rem!important;
    }
}

/*求人詳細
------------------------------------*/
.job-fixed-bottom{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    height: 6.8rem;
    padding: 0 1.2rem;
    background-color: var(--gray);
    z-index: 9999;
}

.job-fixed-bottom .btn{
    width: 19.4rem;
    height: 4.5rem;
    font-size: 1.6rem;
}

.job-fixed-bottom .btn-favorite{
    width: 4.5rem;
    padding: 2.8rem 0 0;
    font-size: 0.8rem;
    border: none;
}

.job-fixed-bottom .btn-favorite::before{
    top: 0.85rem;
    left: 50%;
    width: 2rem;
    height: 1.857rem;
    transform: translateX(-50%);
}

.job-img{
    display: flex;
    margin: 3rem auto 1.5rem;
    border-radius: 0.5rem;
}

.job-img-item{
    display: flex!important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20rem;
    overflow: hidden;
}

.job-img img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.img-dummy{
    display: block;
    padding: 1.8rem;
}

.job-recommendation{
    position: relative;
    padding: 2rem;
    margin: 4rem 0 2rem;
    background-color: var(--light-blue);
    border-radius: 1rem;
}

.job-recommendation-title{
    position: absolute;
    top: -1.9rem;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 1rem 1rem 0 0;
}

.job-recommendation-title > *{
    position: relative;
    padding-left: 2.5rem;
    color: var(--blue);
    white-space: nowrap;
}

.job-recommendation-title > *::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 2.4rem;
    background: url(/img/common/icon_lightbulb.svg) no-repeat;
    background-size: contain;
}

.job-detail-menu{
    display: flex;
    gap: 0.8rem;
    padding-top: 2rem;
}

.job-detail-menu.fixed {
    position: fixed;
    top: 5.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 96rem;
    margin: 0;
    z-index: 999;
    background-color: var(--white);
}

.job-detail-menu li{
    width: 16rem;
    height: 5rem;
    background-color: var(--blue);
    border-radius: 2.5rem;
}

.job-detail-menu a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.job-detail-menu a span{
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
    text-align: center;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 500;
}

.job-detail-menu a span::after {
    content: "";
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 0.8rem;
    height: 0.8rem;
    border-right: 0.15rem solid var(--white);
    border-bottom: 0.15rem solid var(--white);
}

.job-detail-table{
    width: 100%;
}

.job-detail-content-item:not(:last-of-type){
    margin-bottom: 6.5rem;
}

.job-detail-table tr{
    display: flex;
    gap: 6rem;
    width: 100%;
    border-bottom: 0.1rem solid var(--light-gray3);
}

.job-detail-table th,
.job-detail-table td{
    padding: 1.6rem 0 1.7rem;
}

.job-detail-table th{
    min-width: 13.5rem;
    padding-left: 0.6rem;
    text-align: left;
    color: var(--blue);
    font-weight: 500;
    flex-shrink: 0;
}

.job-detail-table td{
    flex: 1;
}

.job-detail-return-title {
    width: 100%;
    margin-bottom: 1rem;
    margin-left: 1rem;
    color: var(--blue);
    font-weight: 700;
    font-size: 1.8rem;
}

.job-detail-return-comment {
    width: 100%;
    margin-bottom: 1rem;
    margin-left: 1rem;
    color: var(--black);
    font-size: 1.4rem;
}

#job-anchor-link1 {
    margin-top: 2rem;
}

.kana {
    display: flex;
    justify-content: space-between;
    width: fit-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.name-text{
    display: inline-block;
    margin-right: 2rem;
}

@media screen and (min-width: 769px) {
    .job-img{
        display: flex;
        align-items: center;
        column-gap: 1.4rem;
        margin: 2rem 0 4rem;
    }

    .job-img li{
        display: flex;
        width: 33.4rem;
        height: 22.2rem;
    }

    .job-img img{
        max-width: 24.4rem;
        max-height: 14.8rem;
    }

    .job-detail-table td.d-flex p:not(:first-of-type){
        padding-left: 1.5em;
    }
}

@media screen and (min-width: 1000px) {
    .job-detail-menu{
        width: calc(100% + 20rem);
        margin-left: -10rem;
    }
}

@media screen and (max-width: 999px) {
    .job-detail-menu{
        flex-flow: wrap;
        justify-content: center;
        width: 100%;
        padding-top: 3rem;
    }

    .job-detail-menu li{
        width: 11.6rem;
        height: 3.9rem;
    }

    .job-detail-menu a span::after{
        bottom: 0.3rem;
        width: 0.55rem;
        height: 0.55rem;
    }
}

@media screen and (max-width: 768px) {
    .job-fixed-bottom .btn:not(.btn-favorite){
        flex: 1;
    }

    .job-recommendation-title{
        left: 50%;
        transform: translateX(-50%);
    }

    .job-detail-menu a span{
        font-size: 1.3rem;
    }

    .job-detail-table tr{
        flex-flow: column;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .job-detail-table th,
    .job-detail-table  td{
        padding: 0;
    }

}

/*カレンダー
------------------------------------*/
.btn-meeting{
    height: 5rem;
    border-radius: 5rem;
    white-space: nowrap;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}

.fc-toolbar-chunk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.fc-direction-ltr .fc-toolbar > * > :not(:first-child){
    margin: 0;
}

.fc .fc-toolbar-title{
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.fc .fc-button{
    padding: 0.5rem 0.6rem;
    border: none;
    background-color: var(--blue);
    border-radius: 5rem;
    transition: 0.4s;
}

.fc .fc-button:hover{
    opacity: 0.6;
    background-color: var(--blue);
}

.fc .fc-button .fc-icon{
    color: var(--white);
    font-size: 2rem;
}

.fc-toolbar-title {
    display: inline-block;
}

.fc-daygrid-dot-event {
    flex-wrap: wrap;
}

.fc-event .break {
    flex-basis: 100%;
    height: 0;
}

.fc-event-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.4;
}

.fc table th{
    background-color: var(--light-blue);
}

.fc-col-header-cell-cushion{
    color: var(--black);
    font-weight: 500;
    cursor: default;
}
.fc-daygrid-day-number{
    color: var(--blue2);
    font-weight: 500;
    cursor: default;
}

.fc-col-header-cell-cushion:hover,
.fc-daygrid-day-number:hover{
    opacity: 1;
}

.fc-daygrid-dot-event.fc-event-mirror,
.fc-daygrid-dot-event:hover{
    opacity: 1;
    background-color: var(--light-blue);
}

@media screen and (max-width: 768px) {
    .btn-meeting{
        top: 6rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 0 2rem;
    }

    .calendar .main-title{
        padding-top: 10rem;
    }

    #calendar{
        margin-top: 8rem;
    }


    .fc-event-title {
        -webkit-line-clamp: 5;
    }

    .schedule .info-table-col-label{
        width: 8rem!important;
    }
}

/*その他
------------------------------------*/
.chart-img{
    display: block;
    margin: 0 auto 4rem;
}

.loading{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .3);
}

.file-input-wrapper {
    display: inline-block;
    position: relative;
}

.file-input-wrapper input {
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.file-input-wrapper .file-button {
    display: inline-block;
    background: var(--gray);
    color: var(--white);
    padding: 0.3rem 1.5rem;
    border-radius: 0.4rem;
}

.file-input-wrapper .file-button:hover {
    opacity: 0.6;
    transition: all 0.4s;
}

.file-add{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}

.file-add > *{
    width: calc((100% - 1rem) / 2);
}

.input-example{
    font-weight: 400;
    font-size: 90%;
    color: #555;
    margin-left: 1ch;
}

.input-note{
    font-weight: 400;
    font-size: 80%;
    margin-top: 1ch;
}

/*----------------------------------
モーダル
------------------------------------*/
.modal-open-button {
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;
    cursor: pointer;
    background-color: #007BFF;
    border: none;
    border-radius: 0.5rem;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
    opacity: 0;
    transition: opacity 0.5s, scale 0s 0.5s;
    scale: 0;
}

.modal.is-active {
    opacity: 1;
    transition: opacity 0.5s;
    scale: 1;
    pointer-events: auto;
}

.modal-wrapper {
    position: relative;
    width: 80%;
    max-width: 50rem;
    max-height: 70%;
    padding: 2rem;
    margin: auto;
    background-color: #FEFEFE;
    border-radius: 0.5rem;
}