@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* 1. 変数を定義する */
:root {
    --main-color: #005AAA;
    --main-text-color: #333333;
    --text-color: #333;
    --main-danger-color: #ed0e42;



    --btn-light-bg: #abc8e3;
    --table-bg: #edf2f8;
    --table-border: #D3DFEE;
    --primary-light:#70BCFF;

    --btn-color1: #ff7b1c;
    --btn-color2: #edf2f8;
    --btn-color3: #abc8e3;
    --btn-color4: #54b431;
    --btn-color5: #ff7b1c;
    --btn-color6: #ff7b1c;

;
}




body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: .875rem;
    color: var(--main-text-color);

}

/* 上書き */
.btn-primary {
	background-color:var(--main-color);
}


.btn-primary:hover {
	background-color:var(--main-color);
	filter: brightness(0.9);
}

.btn-primary_light{
	background-color:var(--primary-light);
}
.btn-primary_light:hover {
	background-color:var(--primary-light);
	filter: brightness(0.9);
}

.btn-outline-primary
{
    --bs-btn-active-bg : var(--main-color);
    --bs-btn-active-border-color : var(--main-color);


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

.text-primary_light
{
    /* color:var(--primary-light); */
}

.text-off{
    color:darkgrey;

}
.page-link.active, .active > .page-link {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-danger {
	background-color:var(--main-danger-color);
}
.text-danger , .red
{
    color:var(--main-danger-color);
}


.form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.table-primary {
    --bs-table-bg: var(--table-bg) !important;
}

.card-header
{
    background-color: var(--btn-light-bg);
}
.card{
    --bs-card-border-color: var(--table-border);
}
/****************/
.info
{
	font-size:0.8em;
}

/* すべてのブラウザをカバーする書き方 */
.form-control::placeholder {
    font-size: 0.9rem;    /* 文字のサイズ */
    color: var(--main-text-color);          /* 文字の色 */
    font-weight: normal;  /* 太さ */
    opacity: 1;           /* Firefoxで色が薄くなるのを防ぐ */
}

/* Internet Explorer 用（必要であれば） */
.form-control:-ms-input-placeholder {
    font-size: 0.9rem;
    color: #888;
}

header
{
	border-radius: 0 0 5px 5px;
}

/* ヘッダーの基本設定 */
.navbar {
    background-color: var(--main-color);
    z-index: 1030; /* サイドバーより前面に */
}

.navbar-brand {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* PC向けサイドバー設定 (768px以上) */
/* PC向けサイドバーの固定とスクロール設定 */
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        height: 100vh; /* 画面の高さ100% */
        padding: 0;
        overflow: hidden; /* 親要素でのスクロールを禁止 */
        display: flex;
        flex-direction: column;
    }

    /* サイドバー内のスクロール領域 */
    .sidebar .offcanvas-body {
        flex: 1; /* 残りの高さをすべて占有 */
        overflow-y: auto; /* 縦方向にスクロールを許可 */
        padding-top: 60px; /* ヘッダーの高さ分、中身を下げる */
        scrollbar-width: thin; /* スクロールバーを細くする（任意） */
		margin-top:55px;
    }
}

.sidebar {
    background-color: #f8f9fa !important;
}


/* スクロールバーのデザイン調整（Chrome, Edge, Safari向け） */
.sidebar .offcanvas-body::-webkit-scrollbar {
    width: 6px;
}
.sidebar .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 10px;
}


/* メニュー項目の独自スタイル */
.menu_jobitem {
    border-radius: 5px;
    background-color: var(--btn-light-bg);
    padding: 0.8em;
    margin: 5px 10px;
    color: var(--main-text-color);
    text-decoration: none;
    transition: background-color 0.2s;
}

.menu_jobitem:hover {
	/* 元の #D6ECFF より少し濃い青色に設定 */
	background-color: var(--btn-light-bg); 
	/* 文字をパキッと黒にする */
    color: #000 !important;
    /* ふわっと色が変わるようにアニメーションを追加（お好みで） */
    transition: background-color 0.2s ease;

}

.nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: #333;
}

.nav-link i {
    width: 20px;
    text-align: center;
}

/* アイコンの基本状態（アニメーションの準備） */
.rotate-icon {
    transition: transform 0.3s ease; /* 0.3秒かけて変化 */
    font-size: 0.8rem;
    opacity: 0.7;
}

/* メニューが開いている状態 (aria-expanded="true") のとき アイコンを180度回転させる */
[aria-expanded="true"] .rotate-icon {
    transform: rotate(180deg);
}

.breadcrumb-item + .breadcrumb-item::before
{
	content: var(--bs-breadcrumb-divider, ">");
	line-height: 1.3em;

}

/* iframeを包んでいるコンテナを角丸にする */
.mfp-iframe-holder .mfp-content {
    border-radius: 12px; /* 角丸の大きさ */
    overflow: hidden;    /* 中身のはみ出しをカット */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 影をつけるとより浮き上がって見えます */
}

/* iframe自体の枠線を消す */
.mfp-iframe {
    border: none;
    background: #fff; /* 読み込み完了までの背景色 */
}

/* 比率固定を解除して、指定したサイズを強制する */
.mfp-msg-size .mfp-content {
    max-width: 600px !important; /* 幅 */
    height: 400px !important;    /* 高さ */
}

.mfp-msg-size .mfp-iframe-scaler {
    padding-top: 0 !important;   /* これをしないと高さが変わらない */
    height: 100% !important;
}

.mfp-msg-size .mfp-iframe {
    background: #fff;
    border-radius: 12px;         /* 角丸もここで適用 */
}

.wrap_jobitem
{
    text-decoration: none;
}
.wrap_jobitem_header
{
    background-color: var(--btn-light-bg);
    color: #333;
    /* display: inline-block;
    border-radius: 5px;
    padding: 1em;
    width:100%;
    transition: background-color 0.2s; */
    white-space: nowrap;     /* 折り返しを禁止 */
    overflow: hidden;        /* はみ出た部分を隠す */
    text-overflow: ellipsis; /* はみ出た分を「...」にする */
    
    /* Flexboxが効いている場合の崩れ防止（必要に応じて） */
    display: block;

}

.wrap_rate
{
    display: inline-block;
    width:80px;
    text-align: left;
}

.progress-bar
{
    background-color: var(--main-color);
}

#wrap_filter {
    padding: 3px;
    border: 1px solid #999;
    border-radius: 5px;
    margin-bottom: 5px;
    padding:0.5em;
}