@charset "utf-8";

body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", Meiryo, "Yu Gothic Medium", sans-serif;
    color: #3a3a3a;
}

.select_false {
    -webkit-user-select: none;  /* Chrome or Safari */
    -moz-user-select: none;     /* FireFox */
    -ms-user-select: none;      /* IE */
    -o-user-select: none;       /* Opera */
    user-select: none;
    -webkit-touch-callout: none; /* iOSの長押しメニューも防止 */
}

.fa-lock-open {
    color: #ccc;
}
.fa-male {
    color: blue;
}
.fa-female {
    color: red;
}

/**
 * Bulma の値を上書き
 */
.table td, .table th {
    padding: 0.5em;
}
.output_aptitude {
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    margin: 0;
    padding: 1em;
}
.output_aptitude .checkbox {
    margin-right: 20px;
}

.output_aptitude .checkbox input {
    margin-right: 4px;
}

/**
 * 全体レイアウト
 */

/* 診断用の画面レイアウト */
.shindan-body {
    line-height: 1.75;
}
.shindan-body h1 span {
    display: block;
    padding-top: 0.5rem;
}

.shindan-caution {
    border: 2px solid #d3d3d3;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.shindan-caution ul {
    margin: 1rem;
    list-style-type: disc;
}
.shindan-caution ul li {
    margin-left: 2rem;
    margin-bottom: 0.75rem;
}
.shindan-caution p {
    margin-bottom: 1.5rem;
}

.shindan-test h2 {
    background-color: #3273dc;
    border-radius: 4px;
    padding: 0.5rem;
    color: white;
}

.shindan-test .setsumon {
    margin-bottom: 1rem;
}
.shindan-test .setsumon label.radio-block {
    display: block;
    margin: 0 1rem 0.5rem;
}
.shindan-test .setsumon label.radio-block:hover {
    cursor: pointer;
}
.shindan-test .setsumon p::selection,
.shindan-test .setsumon label::selection,
.shindan-test .setsumon input[type="radio"]::selection {
    background: transparent;
}

.shindan-progress {
    margin-bottom: 2rem;
}

.shindan-action {
    margin: 2rem 0;
}

.shindan-errors {
    border: 2px solid #ff3860;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.shindan-errors ul {
    list-style-type: disc;
}
.shindan-errors ul li {
    margin-left: 1rem;
}
.shindan-errors li a {
    text-decoration: underline;
}

/* 診断用の設問の表示アニメーション（vue.jsのトランジションを使用） */
.slide-fade-enter-active {
    transition: all .5s ease-out;
}
.slide-fade-enter {
    transform: translateX(50px);
    opacity: 0;
}
.slide-fade-enter-to {
    transform: translateX(0);
    opacity: 1;
}
.slide-fade-leave-active {
    transition: all .3s ease-out;
    position: absolute;
}
.slide-fade-leave {
    transform: translateX(0);
    opacity: 1;
}
.slide-fade-leave-to {
    transform: translateX(-30px);
    opacity: 0;
}

.topics {
    margin: 1rem 0 3rem;
}

.admin-body {

}

.admin-body .radio-btn label {
	margin-right: 18px;
}
.admin-body .radio-btn label input[type="radio"]{
	margin-right: 5px;
}

.admin-body .radio-btn.vertical label {
	display: block;
    margin-bottom: 0.5rem;
}

.admin-body label .required {
	display: inline-block;
	margin-left: 1rem;
	padding: 1px 3px;
	background-color: #b71c1c;
	border-radius: 4px;
	font-size: 0.75rem;
	color: white;
	vertical-align: text-bottom;
}

.admin-body .monitoring {
    border: 4px solid #d3d3d3;
    border-radius: 8px;
    margin: 1rem 0 2rem;
    padding: 1rem;
}

.admin-body .kanri-comment {
    margin-top: 1rem;
    padding: 1rem;
}

.admin-body .upload-button {
	font-size: 1rem;
}

.admin-body ul.note {
    margin: 1rem 0 2rem;
    list-style-type: disc;
}
.admin-body ul.note li {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.admin-body ul.note li span {
    font-weight: bold;
}

.admin-body ul.download-list {
    margin: 1rem 0 2rem;
    list-style-type: disc;
}
.admin-body ul.download-list li {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.25rem;
}

.admin-body .table th.valign-center,
.admin-body .table td.valign-center {
    vertical-align: middle;
}

.admin-body .table tr.font-small,
.admin-body .table th.font-small {
    font-size: 0.86rem;
}
.admin-body .table th.bg-gray,
.admin-body .table td.bg-gray {
    background-color: #f5f5f5
}
.admin-body .company,
.admin-body .start_datetime,
.admin-body .end_datetime {
    display: block;
    font-size: 0.86rem;;
}
.admin-body .department,
.admin-body .position,
.admin-body .grade {
    font-size: 0.86rem;
}

.width-small { width: 40px; }

.value-devide {
    font-size: 0.86em;
    color: #ccc;
}

/* 診断系 */

.shindan-buttons {
    margin: 1rem 0 5rem;
}

.shindan-buttons h5 span.popname {
    display: block;
    padding-top: 0.5rem;
}
.shindan-buttons .column p {
    margin-bottom: 1rem;
}

.result {
    margin: 1rem 0 5rem;
}

table.shindan_result thead th,
table.shindan_result th {
    background-color: #f5f5f5;
    font-weight: normal;
    font-size: 90%;
    vertical-align: middle;
}
table.shindan_result thead th a {
    font-weight: bold;
}

table.shindan_result tr:hover {
    background-color: #fffeac!important;    /* マウスオーバー時の行の背景色 */
}

table.shindan_result .button { margin-top:1rem; }


/**
 * 見出しタグ
 * 診断用（shindan-body）は、h1 から
 * 管理用（admin-body）は、h3 から
 */
.admin-body h3 {
    border-bottom: 2px solid #3273dc;
    padding-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.admin-body h4 {
    border-left: 8px solid #3273dc;
    padding: 0.5rem 0.75rem;
    margin-top: 1.5rem;
}


/**
 * ツールチップ
 */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip:hover .tooltip__inner {
    visibility: visible;
    opacity: 1;
}
.tooltip__inner {
    visibility: hidden;
    text-align: center;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 500ms;
    width: 180px;
    bottom: 125%;
    left: 50%;
    margin-left: -90px; /* width の半分にする */
}
.tooltip__text {
    background-color: black;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75em;
    text-align: left;
    display: inline-block;
}
.tooltip__text::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* 各種レポート類のオプション指定関連スタイル */

.option_fields {
    border-radius: 16px;
    border: 1px solid #a5b8c3;
    background-color: #f5f9ff;
    padding: 10px;
}

.search_condition_check table {
    margin-left: 1em;
    border: 1px solid #dbdbdb;
}
.search_condition_check table th {
    background-color: #fafafa;
    border: 1px solid #dbdbdb;
    padding: 10px;
}
.search_condition_check table td {
    border: 1px solid #dbdbdb;
    padding: 10px;
}

/* PDFレポート　出力関連のスタイル（主に画面） */
.fbsheet_list_condition {
    margin: 20px 0;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #e7eef9;
}
.fbsheet_list_condition dt {
    font-weight: bold;
}
.fbsheet_list_condition dd {
    margin-left: 10px;
}

.fbsheet_list {
    margin: 20px 0;
    list-style-type: disc;
}
.fbsheet_list li {
    margin-left: 30px;
}

/**
 * ログイン画面
 */
.hello-user {
    display: inline-block;
    margin-right: 1rem;
}

/**
 * footer style
 */
.footer {
    margin-top: 2rem;
    padding: 1.5rem 0;
}

/**
 * Paginator
 */
.paginator {
    text-align: right;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.prev.disabled a,
.next.disabled a {
    cursor: not-allowed;
    background-color: #dbdbdb;
    border-color: #dbdbdb;
    box-shadow: none;
    color: #7a7a7a;
    opacity: .5;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

.pagination .next,
.pagination .prev {
    flex-grow: 1;
    flex-shrink: 1;
}
.pagination-list li {
    flex-grow: initial;
    flex-shrink: initial;
}

.pagination .next,
.pagination .prev,
.pagination-list li a {
    margin: .25rem;
    min-width: 2.5em;
    font-size: 1em;
    white-space: nowrap;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: none;
    color: #363636;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.pagination .next a,
.pagination .prev a,
.pagination-list li a {
    display: block;
    padding-bottom: calc(.5em - 1px);
    padding-left: calc(.5em - 1px);
    padding-right: calc(.5em - 1px);
    padding-top: calc(.5em - 1px);
}
.pagination .next a:hover,
.pagination .prev a:hover,
.pagination-list li a:hover {
    border-color: #3a3a3a;
    color: #3273dc;
}
.pagination-list .active a {
    background-color: #3273dc;
    border-color: #3273dc;
    color: #fff;
}

@media (min-width: 768px) {
    .pagination {
        justify-content: space-between;
    }
    .pagination .next,
    .pagination .prev {
        flex-grow: 1;
        flex-shrink: 1;
    }
    .pagination .next a,
    .pagination .prev a,
    .pagination-list li a {
        padding-left: .75em;
        padding-right: .75em;
    }
}

@media (min-width: 1024px) {
    .pagination-list {
        order: 1;
    }
    .pagination .prev {
        order: 2;
    }
    .pagination .next {
        order: 3;
    }
    .pagination .next,
    .pagination .prev {
        flex-grow: initial;
        flex-shrink: initial;
    }
}

/* ユーザー情報（必須項目）の入力を促すボックス表示 */

.users_caution {
    margin: 1rem 0 2rem;
    border: 6px solid #fd6c6c;
    padding: 1.5rem;
}
.users_caution p {
    margin-bottom: 1em;
    line-height: 2em;
    font-size: 1.13rem;
}
.users_caution p strong {
    font-weight: bold;
    font-size: 1.13em;
    background: linear-gradient(transparent 70%, #ffdd00 70%);
}

/* 同意 */
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}
body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 80vw;
    background-color: #fff;
}
.onetime_popup_title {
    position: relative;
    padding: 1rem 1rem 1.5rem;
    margin: 0px;
    background-color: #3388dd;
    color: #fff;
    font-size: 1.13rem;
    text-align: center;
    line-height: 1.5;
}
.onetime_popup_content {
    padding: 2rem 1rem;
    text-align: center;
}
.onetime_popup_content p {
    text-align: left;
}
.onetime_popup_content ul {
    margin: 1rem;
    padding-left: 0.5rem;
    text-align: left;
}
.onetime_popup_content ul li {
    list-style-type: disc;
    margin-bottom: 1rem;
}
.onetime_popup_agree {
    width: 240px;
    padding: 10px 0;
    border: none;
    border-radius: 8px;
    background-color: #3273dc;
    font-size: 1.25rem;
    color: white;
    cursor: pointer;
}
@media (min-width: 768px) {
    .onetime_popup_title {
        font-size: 1.5rem;
    }
    .onetime_popup_content {
        padding: 2rem;
    }
    .onetime_popup_content ul {
        width: 520px;
        margin: 20px auto;
        font-size: 1.13rem;
    }
}

@media (min-width: 1024px) {
    .onetime_popup {
        width: 640px;
    }
    .onetime_popup_content {
        padding: 2rem 3rem;
    }
}