@charset "utf-8";

body { font-family: 'Nunito', sans-serif; }

input {
  height: 30px;
}
/*============================================
 テーブル定義 ※未使用
============================================*/
table.profile {
    border-collapse:collapse;       /*セル同士の間に隙間を空けない*/
    border:1px solid #666666;
}
table.profile th {
    width:150px;                    /*見出しセルの幅*/
    padding:5px;                   /*パディング*/
    text-align:left;                /*センター揃えにする*/
    white-space:nowrap;             /*セル内の改行を禁止する*/
    background-color:#6c9bd2;       /*セルの背景色*/
    border-right:1px solid #666666;
    border-top:1px dashed #666666;
    height: 12px;
}
table.profile th label {
    color: #fff;
}
table.profile td {
  padding:5px;                   /*パディング*/
    background-color:#fefefe;       /*セルの背景色*/
    border-right:1px solid #666666;
    border-top:1px dashed #666666;
    height: 12px;
}

th:last-child,
td:last-child{
    border-right:0px solid #666666;
}
/*============================================
 必須マーク
============================================*/
label.required:after {
    /* margin-left: 0em; */
    /* padding: 0px; */
    border-radius: 4px;
    font-size: 1.2em;
    font-weight:bold;
    color: rgb(247, 37, 37);
    /* background-color: ; */
    content: "＊";
}


/*============================================
 優先度
============================================*/
.priority-checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.priority-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--priority-color);
    position: relative;
}

.priority-number {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3b82f6;
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.priority-label {
    margin-left: 0.25rem;
}

/*============================================
 ページ見出し（メイン）
============================================*/
h2.page-header {
    /* position: relative; */
    position: fixed;
    width:100%;
    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
    height:3rem;
    /* border: 1px solid #D8D8D8; */
    border-bottom: 4px solid #1187ca;;
    background: linear-gradient(#ffffff 0%, #eee 100%);

}


h2.page-header:before {
    position: absolute;
    top: 20%;
    left: 10px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #1187ca;
}

div.main_container {
  /* padding-top: 70px; */
  padding-top: 40px;
}

div.sub_container {
  padding-top: 10px;
}

div.notice_container {
  padding-top: 40px;
}

/*============================================
 タブ機能
============================================*/
.tab-button {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

.tab-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tab-content {
  transition: opacity 0.3s ease;
}

.tab-content.hidden {
  display: none;
}

.tab-content.active {
  display: block;
}

/*============================================
 ページ見出し（サブ）
============================================*/
h2.page-title {
    position: relative;
    padding: 0.3rem 0.3rem 0.3rem 1.75rem;
    border: 1px solid #D8D8D8;
    border-bottom: 3px solid #669933;
    background: linear-gradient(#ffffff 0%, #eee 100%);
}

h2.page-title::before {
    position: absolute;
    top: 20%;
    left: 10px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #009933;
}

/*============================================
 ページ内囲み枠
============================================*/
/* 参照用 */
.cmc-main-box{
    padding: 0.3em 0.15em 0em 0.15em;
    background-size: 20px 20px;
    border-radius: 3px;
    background-color: #a2c2e6;
    border: solid 1px #6c9bd2;
}
.cmc-main-box-header{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    border: 1px solid #0075c2;
    border-bottom: 3px solid #0075c2;
    background: linear-gradient(#ffffff 0%, #eee 100%);
}
.cmc-main-box-header::before {
    position: absolute;
    top: 18%;
    left: 10px;
    width: 6px;
    height: 55%;
    content: '';
    border-radius: 3px;
    background: #0075c2;
}
.cmc-main-box-main{
    /* margin: 0.35em 0.05em 0.2em; */
    margin: 0.15em 0.15em 0.15em 0.15em;
    padding: 0.5em;
    background-size: 20px 20px;
    border-radius: 3px;
    background-color: #fff;
}

/* 一覧用 */
.cmc-main-box-list{
  padding: 0.3em 0.15em 0.15em 0.15em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #ffffff;
  /* border: solid 1px #1187ca; */
}
/* .cmc-main-box-list{
  padding: 0.3em 0.15em 0em 0.15em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #8fbc8f;
  border: solid 1px #2e8b57;
} */
.cmc-main-box-header-list{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    width: 24rem;
    /* border: 1px solid #D8D8D8; */
    border-bottom: 3px solid #8CD790;
    /* background: linear-gradient(#ffffff 0%, #eee 100%); */

}
.cmc-main-box-header-list::before {
    position: absolute;
    top: 18%;
    left: 10px;
    width: 6px;
    height: 55%;
    content: '';
    border-radius: 3px;
    background: #8CD790;
}

.cmc-main-box-main-list{
  margin: 0.35em 0.05em 0.2em;
  padding: 0.5em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #fff;
}

/* 入力用 */
.cmc-main-box-input{
  padding: 0.3em 0.15em 0em 0.15em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #ffffff;
  /* border: solid 1px #1187ca; */
}


.cmc-main-box-header-input{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    width: 24rem;
    /* border: 1px solid #1187ca; */
    border-bottom: 3px solid #1187ca;
    /* background: linear-gradient(#ffffff 0%, #eee 100%); */
}


.cmc-main-box-header-input::before {
    position: absolute;
    top: 18%;
    left: 10px;
    width: 6px;
    height: 55%;
    content: '';
    border-radius: 3px;
    background: #1187ca;
}
.cmc-main-box-main-input{
  margin: 0.35em 0.05em 0.2em;
  padding: 0.5em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #fff;
}
/* メッセージボックス用 */
.cmc-main-box-message{
  padding: 0.3em 0.15em 0em 0.15em;
  background-size: 20px 20px;
  border-radius: 3px;
  background-color: #f5f5f5;
  border: solid 1px #a9a9a9;
}
.cmc-main-box-header-message{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    border: 1px solid #dc6b9a;
    border-bottom: 3px solid #f4b3c2;
    background: linear-gradient(#ffffff 0%, #eee 100%);
}
.cmc-main-box-header-message::before {
    position: absolute;
    top: 18%;
    left: 10px;
    width: 6px;
    height: 55%;
    content: '';
    border-radius: 3px;
    background: #de82a7;
}
.cmc-main-box-main-message{
  padding: 0.2em;
  font-size: 14px;
}

/*============================================
 ページ内囲み枠内の項目タイトル
============================================*/
.page-input-title-m {
    margin: 0.25em 0em 0.25em 0.25em ;
    padding:0.25em;/*内側余白*/
    width: 108px;
    background-color:  #ffffff;
    color: black;
    border-radius: 2px;
}

/*============================================
 ページ内囲み枠内の項目タイトル
============================================*/
.page-input-title {
    margin: 0.25em 0em 0.25em 0.25em ;
    padding:0.25em;/*内側余白*/
    width: 148px;
    /* width: 112px; */
    background-color:  #ffffff;
    color: black;
    border-radius: 2px;
}

/*============================================
 ページ内簡易説明
============================================*/
.cmc-explanation h1 {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.4;
    color: black;
}
.cmc-explanation h1:before {
    font-family: "Font Awesome 5 Free";
    content: "\f04b";
    font-weight: 900;
    position: absolute;
    font-size: 1em;
    left: 0;
    top: 0;
    color: #808000;
}
/*============================================
 ボタンエリア
============================================*/
.cmc-button-box {
  color: white;
}
/* ↓スクロールに応じて要素を固定↓ */
.sticky-header {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:0; /* 縦スクロールに追従 */
    z-index: 100; /* z-indexで最前面に持ってくる */
}
.sticky-menu {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:48px; /* 縦スクロールに追従 cmc-header-navbarの高さ分下げる */
    z-index: 200; /* z-indexで最前面に持ってくる */
}
.sticky-breadcrumbs {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:96px; /* 縦スクロールに追従 cmc-header-navbarの高さ分下げる */
    z-index: 300; /* z-indexで最前面に持ってくる */
}
.sticky-page-header {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:129px; /* 縦スクロールに追従 cmc-header-navbarの高さ分下げる */
    z-index: 400; /* z-indexで最前面に持ってくる */
}
.sticky-button {
  position: -webkit-sticky; /* Safari用 */
  position:sticky; /* 要素をスクロールに応じて固定 */
  top:182px; /* 縦スクロールに追従 cmc-header-navbar + cmc-title-pageの高さ分下げる */
  z-index: 500; /* z-indexで最前面に持ってくる */
}

/*============================================
 位置調整用
============================================*/
.extra-margin-top {
  margin-top: 0px;
  padding-top: 0px;
}

.extra-margin-bottom {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.confirm-dialog {
  max-width: 600px;
  width: auto !important;
  word-break: break-word;
}

/*============================================
 ハンバーガーメニュー
============================================*/
nav#global-menu #global-menu-button { width:48px; height:48px; cursor:pointer; }
nav#global-menu #global-menu-button svg { width:23px; height:15px; }
nav#global-menu #global-menu-button svg line { stroke:#000; }
nav#global-menu #global-menu-button { display:inline-flex;align-items:center; justify-content: center;}

/* オーバーレイメニュー系 ****************************************************/
nav#global-menu #global-menu-overlay { width:100%; height:calc(100dvh - 3.1rem); visibility: hidden; overflow:hidden; }
nav#global-menu #global-menu-overlay[aria-hidden="false"] { visibility:visible; overflow:auto; }
nav#global-menu #global-menu-overlay > ul { padding-top:20px; padding-left:20px; padding-right:20px; }

/* オーバーレイメニュー アニメーション系 **************************************/
nav#global-menu #global-menu-overlay { background:#fff; transform:translateX(-120vw); transition:all .2s ease-out; }
nav#global-menu #global-menu-overlay[aria-hidden="false"] { transform:translateX(0); }

/* svg アニメーション系 *****************************************************/
nav#global-menu #global-menu-button svg line { transition:all 0.2s ease; }
nav#global-menu #global-menu-button line.top    { transform-origin:11.5px  0.5px; }
nav#global-menu #global-menu-button line.bottom { transform-origin:11.5px 14.5px; }
nav#global-menu #global-menu-button[aria-expanded="true"] line.top    { transform:translate(0px, 7px) rotate(45deg); }
nav#global-menu #global-menu-button[aria-expanded="true"] line.bottom { transform:translate(0px,-7px) rotate(-45deg); }
nav#global-menu #global-menu-button[aria-expanded="true"] line.middle { transform:translate(-20px, 0px); opacity:0; }

/* サブメニュー表示時のbodyスクロールの抑制 ************************************/
body.clip { overflow:hidden; }

/* フォーカスホバー時のハイライト表示 ******************************************/
nav#global-menu #global-menu-button:focus,
nav#global-menu #global-menu-button:hover { outline:1px dotted #fff; background:rgba(0,0,0,.1); }

/* レイヤー管理 *************************************************************/
nav#global-menu #mobile-menubar      { position:relative; z-index:110; } /* 上 */
nav#global-menu #global-menu-overlay { position:absolute; z-index:100; } /* 下 */

#global-nav-content ul li a {
  display: block;
}

/*============================================
 左サイドメニュー
============================================*/
#nav-content {
    width: 240px;/* 右側に隙間を作る（閉じるカバーを表示） */
    height:calc(100dvh - 3.1rem);
    overflow-y: scroll;
    scrollbar-width: thin;
    background: #fff;/*背景色*/
    z-index: 9998;
}

/*============================================
 左サイドメニュー　ハンバーガーメニュー
============================================*/
#nav-content ul li a {
  display: block;

}

.cat-level1 {
  display: flex;            /* フレックスボックスを適用 */
  align-items: center;      /* 縦方向の中央揃え */
  background-color: #4587D8;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  height: 2.5rem;
  padding-left: 10px;      /* 左側に余白を追加（調整可） */
      /* position: relative;
    background-color: #4587D8;
    font-size: 20px;
    padding: 5px 5px;
    color: #fff;
    font-weight: bold;
    height: 3rem; */


    /* border-bottom: dashed 1px #999; */
}

/* メインアコーディオンのスタイル */
.accordion-trigger {
  cursor: pointer;
  position: relative;
  padding: 10px 15px;
  transition: background-color 0.3s ease;
}

.accordion-trigger:hover {
  background-color: #b1d3fc;
  color: #333;
}

.accordion-content {
  display: none;
}

/* メインアコーディオンのアイコン制御 */
.accordion-trigger::before {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #fff;
  transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.accordion-trigger:hover::before {
  border-top-color: #666;
}

.accordion-trigger.open::before {
  transform: translateY(-50%) rotate(180deg);
}

.cat-level2 {
  display: flex;            /* フレックスボックスを適用 */
  align-items: center;      /* 縦方向の中央揃え */
  background-color: #b1d3fc;
  font-size: 16px;
  color: #000;
  font-weight: bold;
  height: 2.5rem;
  padding-left: 10px;      /* 左側に余白を追加（調整可） */
  position: relative;
  /* position: relative;
  background-color: #b1d3fc;
  font-size: 16px;
  padding: 5px 5px;
  color: #000;
  font-weight: bold;
  height: 3rem; */

  /* border-bottom: dashed 1px #999; */

  cursor: pointer;
}

.cat-level2:hover {
  background-color: #dbe9fa;
}

/* タイトル横のプラスマーク縦線 */
.menu-container div::before{
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  width: 15px;
  height: 1px;
  background-color:#000;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
/* タイトル横のプラスマーク横線 */
.menu-container div::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  width: 15px;
  height: 1px;
  background-color:#000;
  transition: all .3s ease-in-out;
}
/* アコーディオンが開いたとき縦線の変化 */
.menu-container div.open::before {
  transform: rotate(180deg);
}
/* アコーディオンが開いたとき横線の変化 */
.menu-container div.open::after {
  opacity:0;
}


.cat-level1-child a {
  /* text-decoration: none;
  padding: 10px 15px 10px 15px;
  color: #000; */

  display: flex;            /* フレックスボックスを適用 */
  align-items: center;      /* 縦方向の中央揃え */
  font-size: 14px;
  color: #000;
  height: 2.5rem;
  padding-left: 10px;      /* 左側に余白を追加（調整可） */
  text-decoration: none;   /* デフォルトの下線を削除 */
  line-height: 2.5rem;       /* 高さと同じ値を設定 */


}
.cat-level1-child a:hover {
  background-color: #dbe9fa;
}

.cat-level2-child a {
  /* text-decoration: none;
  padding: 10px 15px 10px 30px;
  color: #000; */
  display: flex;            /* フレックスボックスを適用 */
  align-items: center;      /* 縦方向の中央揃え */
  font-size: 14px;
  color: #000;
  height: 2.5rem;
  /* padding-left: 10px; */
  padding-left: 1.5rem;      /* 左側に余白を追加（調整可） */
  line-height: 2.5rem;       /* 高さと同じ値を設定 */
}

.cat-level2-child a:hover {
  background-color: #dbe9fa;
}

.menu-container ul {
  display: none;
}

.menu-container li {
    float: none;
    font-size: 15px;
    list-style: none;
    text-align: left;
    /* border-bottom: dashed 1px #999; */
}


.menu-container li:last-child, details:last-child {
    border-bottom: solid 2px #999;
}

.menu-container a:before {
    font-family: "Font Awesome 6 Free";
    content: "\f138";
    font-weight: 900;
    color: #8CD790;
    margin-right: 5px;
}




/*============================================
 ボタン
============================================*/
button {
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.button_black{
  background: rgb(31 41 55) ;
}
button.button_black:hover{
  background: rgb(55 65 81);
}
button.button_black:focus{
  background: rgb(55 65 81);
}
button.button_black:disabled{
  background: rgb(156 163 175);
}



button.button_blue{
  /* background: #4587D8; */
  background: rgb(48,121,212);
}
button.button_blue:hover{
  background: rgb(90,149,220);
}
button.button_blue:focus{
  background: rgb(90,149,220);
}
button.button_blue:disabled{
  background: rgb(156 163 175);
}

button.button_green{
  background:rgb(10,172,100);
}
button.button_green:hover{
  background:rgb(11,196,114);
}
button.button_green:hover{
  background:rgb(11,196,114);
}
button.button_green:disabled{
  background: rgb(156 163 175);
}

button.button_red{
  background:rgb(207,33,87);
}
button.button_red:hover{
  background:rgb(225,66,115);
}
button.button_red:hover{
  background:rgb(225,66,115);
}
button.button_red:disabled{
  background: rgb(156 163 175);
}

button.button_red_disabled{
  background: rgb(156 163 175);
  cursor: not-allowed;
}
button.button_red_disabled:hover{
  background: rgb(156 163 175);
}

button.button_gray{
  background: rgb(106,123,141);
}
button.button_gray:hover{
  background: rgb(134,149,164);
}
button.button_gray:focus{
  background: rgb(134,149,164);
}
button.button_gray:disabled{
  background: rgb(156 163 175);
}

button.button_bluegreen{
    background:rgb(8, 145, 138);
  }
  button.button_bluegreen:hover{
    background:rgb(9, 177, 168);
  }
  button.button_bluegreen:hover{
    background:rgb(9, 177, 168);
  }
  button.button_bluegreen:disabled{
    background: rgb(156 163 175);
  }

/*============================================
 ラジオボタン
============================================*/
input[type="radio"][readonly]{
  pointer-events:none;
  color: gray;
}

input[type="radio"][readonly] + label{
  pointer-events:none;
  color: gray;
}


/*============================================
 項目名
============================================*/
/* 文を縦書き中央寄せ */
div.cmc-vertical {
  position: relative;
  height: 100px;
  white-space: nowrap;
  }
p.cmc-vertical {
  display: inline;
  position: absolute;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/*============================================
 テーブル
============================================*/
div.cmc-table-title{
  margin: 0.1em;
  padding:0.3em;/*内側余白*/
  /* width: 180px; */
  font-weight: 100;
  background-color: rgb(245 245 244);
  color: black;
  border-radius: 2px;
}
/*============================================
　画面TOP移動ボタン
============================================*/
.cmc-btn-top {
  display:inline-block;
  font-size: 0.8rem;
  font-weight: normal;
  text-align:center;
  width: 80px;
  height: 30px;
  padding: .5rem 1.3rem;
  border-style: none;
  color:#fff !important;
  background-color:#455765;
  border-radius: 0.5rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  position: fixed;
  bottom: 20px;
  right: 0;
  text-decoration: none;
}
.cmc-btn-top:hover {
  color:white;
  opacity: 0.7;
}

/*============================================
　ダイアログ
============================================*/
/* タイトルなし（選択項目一覧画面等） */
.non-title-dialog .ui-dialog-titlebar {
    display: none;
}
/* 簡易タイトル（OKキャンセルのみ等） */
.simple-title-dialog .ui-dialog-titlebar {
    background: #f0ffff;
    /* border: none; */
    padding: 0rem !important;
    margin: 0rem;
    font-size: 0.8rem;
}
/* 通常タイトル（参照、入力画面等） */
.title-dialog .ui-dialog-titlebar {
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    border: 1px solid #D8D8D8;
    border-bottom: 4px solid #669933;
    background: linear-gradient(#ffffff 0%, #eee 100%);
    font-size: 20px;
}
.title-dialog .ui-dialog-titlebar:before {
    position: absolute;
    top: 20%;
    left: 10px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #387d39;
}

/* 確認ダイアログ */
.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -00px;  /* ダイアログのheightの半分 */
    margin-left: -00px; /* ダイアログのwidthの半分 */
    z-index: 9999;
}
.confirm-dialog .ui-dialog-titlebar {
    background: #f0ffff;
    /* border: none; */
    padding: 0.3rem !important;
    /* margin: 0rem; */
    font-size: 18px;
}
.confirm-dialog .ui-dialog-content {
    padding-left: 1.2em;
    line-height: 1.4;
    font-size: 16px;
}
.confirm-dialog .ui-dialog-content:before {
    /* position: absolute; */
    font-family: "Font Awesome 6 Free";
    content: "\f05a";
    /* content: "\f056"; */
    font-weight: 900;
    color: #4169e1;/*アイコン色*/
    margin-right: 5px;
}
.confirm-dialog .btn-confirm-dialog-ok{
  background-color: rgb(59 130 246);
    color: rgb(255 255 255);
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: 0.25rem;
    padding-left: 20px;
    padding-right: 20px;
}
.confirm-dialog .btn-confirm-dialog-ok:hover{
      background-color: rgb(30 64 175);
}
.confirm-dialog .btn-confirm-dialog-cancel{
    background-color: rgb(156 163 175);
    color: rgb(255 255 255);
    font-size: 0.75rem;     /* 12px */
    line-height: 1rem;      /* 16px */
    border-radius: 0.25rem; /* 4px  */
    padding-left: 20px;
    padding-right: 20px;
}
.confirm-dialog .btn-confirm-dialog-cancel:hover{
    background-color: rgb(75 85 99);
}

/* ワーニング確認ダイアログ */
.warning-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -00px;  /* ダイアログのheightの半分 */
    margin-left: -00px; /* ダイアログのwidthの半分 */
    z-index: 9999;
}
.warning-dialog .ui-dialog-titlebar {
    background: #f0ffff;
    /* border: none; */
    padding: 0.3rem !important;
    /* margin: 0rem; */
    font-size: 18px;
}
.warning-dialog .ui-dialog-content {
    padding-left: 1.2em;
    line-height: 1.4;
    font-size: 16px;
}
.warning-dialog .ui-dialog-content:before {
    /* position: absolute; */
    font-family: "Font Awesome 6 Free";
    content: "\f05a";
    /* content: "\f056"; */
    font-weight: 900;
    color: #ffd700;/*アイコン色*/
    margin-right: 5px;
}
.warning-dialog .btn-warning-dialog-ok{
    background-color: rgb(59 130 246);
      color: rgb(255 255 255);
      font-size: 0.75rem;
      line-height: 1rem;
      border-radius: 0.25rem;
      padding-left: 20px;
      padding-right: 20px;
}
.warning-dialog .btn-warning-dialog-ok:hover{
    background-color: rgb(30 64 175);
}
.warning-dialog .btn-warning-dialog-cancel{
    background-color: rgb(156 163 175);
    color: rgb(255 255 255);
    font-size: 0.75rem;     /* 12px */
    line-height: 1rem;      /* 16px */
    border-radius: 0.25rem; /* 4px  */
    padding-left: 20px;
    padding-right: 20px;
}
.warning-dialog .btn-warning-dialog-cancel:hover{
    background-color: rgb(75 85 99);
}

/* メッセージダイアログ */
.message-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -00px;  /* ダイアログのheightの半分 */
    margin-left: -00px; /* ダイアログのwidthの半分 */
    z-index: 9999;
}
.message-dialog .ui-dialog-titlebar {
    background: #f0ffff;
    /* border: none; */
    padding: 0.3rem !important;
    /* margin: 0rem; */
    font-size: 18px;
}
.message-dialog .ui-dialog-content {
    padding-left: 1.2em;
    line-height: 1.4;
    font-size: 16px;
}
.message-dialog .ui-dialog-content:before {
    /* position: absolute; */
    font-family: "Font Awesome 6 Free";
    content: "\f058";
    /* content: "\f056"; */
    font-weight: 900;
    color: #32cd32;/*アイコン色*/
    margin-right: 5px;
}
.message-dialog .btn-message-dialog-ok{
    background-color: rgb(59 130 246);
      color: rgb(255 255 255);
      font-size: 0.75rem;
      line-height: 1rem;
      border-radius: 0.25rem;
      padding-left: 20px;
      padding-right: 20px;
}
.message-dialog .btn-message-dialog-ok:hover{
    background-color: rgb(30 64 175);
}
.message-dialog .btn-message-dialog-cancel{
    background-color: rgb(156 163 175);
    color: rgb(255 255 255);
    font-size: 0.75rem;     /* 12px */
    line-height: 1rem;      /* 16px */
    border-radius: 0.25rem; /* 4px  */
    padding-left: 20px;
    padding-right: 20px;
}
.message-dialog .btn-message-dialog-cancel:hover{
    background-color: rgb(75 85 99);
}

/* エラーメッセージダイアログ */
.error_message-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -00px;  /* ダイアログのheightの半分 */
    margin-left: -00px; /* ダイアログのwidthの半分 */
    z-index: 9999;
}
.error_message-dialog .ui-dialog-titlebar {
    background: #f0ffff;
    /* border: none; */
    padding: 0.3rem !important;
    /* margin: 0rem; */
    font-size: 18px;
}
.error_message-dialog .ui-dialog-content {
    padding-left: 1.2em;
    line-height: 1.4;
    font-size: 16px;
}
.error_message-dialog .ui-dialog-content:before {
    /* position: absolute; */
    font-family: "Font Awesome 6 Free";
    content: "\f071";
    /* content: "\f056"; */
    font-weight: 900;
    color: #dc143c;/*アイコン色*/
    margin-right: 5px;
}
.error_message-dialog .btn-error_message-dialog-ok{
    background-color: rgb(59 130 246);
      color: rgb(255 255 255);
      font-size: 0.75rem;
      line-height: 1rem;
      border-radius: 0.25rem;
      padding-left: 20px;
      padding-right: 20px;
}
.error_message-dialog .btn-error_message-dialog-ok:hover{
    background-color: rgb(30 64 175);
}
.error_message-dialog .btn-error_message-dialog-cancel{
    background-color: rgb(156 163 175);
    color: rgb(255 255 255);
    font-size: 0.75rem;     /* 12px */
    line-height: 1rem;      /* 16px */
    border-radius: 0.25rem; /* 4px  */
    padding-left: 20px;
    padding-right: 20px;
}
.error_message-dialog .btn-error_message-dialog-cancel:hover{
    background-color: rgb(75 85 99);
}

/*============================================
　データ一覧（DataTables）
============================================*/
.datatables{
  min-width: 500px;
  width:100%;

}
/* 行の高さを変更する */
.datatables thead td{
    padding-top: 1px;
    padding-bottom: 1px;
}
.datatables tbody td{
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の色を変更する */
/* ヘッダー */
.datatables thead tr{
    background-color: #778899;
    color: white;
}
/* 奇数行 */
.datatables tbody tr.odd{
    background-color: #edf9ff;
}
/* 偶数行 */
.datatables tbody tr.even{
    background-color: #FFFFFF;
}

/* 行選択時のカーソルホバー */
.datatables tbody tr.odd:hover {
  background-color: #d3e7ff;
  cursor: pointer;
}
.datatables tbody tr.even:hover {
  background-color: #d3e7ff;
  cursor: pointer;
}
.datatables tr.even:hover td.sorting_1 {
  background-color: #d3e7ff;
  cursor: pointer;
}
/* ページング */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 14px;
    border-radius: 50% !important;
    padding: 0.3em 0.8em !important;
}
/* 件数表示 */
.dataTables_wrapper .dataTables_info {
    font-size: 14px;
}
/* 検索のラベル */
.dataTables_wrapper .dataTables_filter label {
    font-size: 14px;
}
/* 選択行 */
.datatables.display.dataTable > tbody > tr.selected > *,
.datatables.display.dataTable > tbody > tr.odd.selected > *,
.datatables.display.dataTable > tbody > tr.selected:hover > * {
    /* box-shadow: inset 0 0 0 9999px #669933!important; */
    box-shadow: inset 0 0 0 9999px #4587D8!important;
    color: #fff;
    background-color: #fff;
}

table.dataTable tbody td.select-checkbox,
table.dataTable thead th.select-checkbox {
  position: relative;
}
table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody td.select-checkbox:after,
table.dataTable thead th.select-checkbox:before,
table.dataTable thead th.select-checkbox:after {
  display: block;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box;
}
table.dataTable tbody td.select-checkbox:before {
  content: ' ';
  margin-top: -6px !important;
  margin-left: -6px;
  border: 1px solid black;
  border-radius: 3px;
}
table.dataTable thead tr.selected th.select-checkbox:after,
table.dataTable tbody tr.selected th.select-checkbox:after{
  content: "✓";
  font-size: 24px !important;
  margin-top: -14px !important;
  margin-left: -8px !important;
  text-align: center !important;
}
/* table.dataTable tbody tr.selected th.select-checkbox:after {
  content: "✓";
  font-size: 24px !important;
  top: 70% !important;
  left: 50% !important;
  margin-top: -16px !important;
  margin-left: -10px !important;
  text-align: center !important;
} */
table.dataTable thead th.select-checkbox:before {
  content: ' ';
  margin-top: -6px;
  margin-left: -6px;
  border: 1px solid white;
  border-radius: 3px;
}


/*============================================
 入力テキスト（日付入力）
============================================*/
.cal-wrap {
    position: relative;
    cursor: pointer;
}
.cal-wrap:before {
    font-family: "Font Awesome 5 Free";
    content: "\f133";
    font-weight: 100;
    position: absolute;
    font-size: 1.2em;
    left: 10px;
    top: 9px;
    bottom: 0;
    color: #778899;
    margin: auto;
}

/*============================================
 モーダル
============================================*/
#modal-content {
    width: 50% ;
    margin: 0 ;
    padding: 10px 20px ;
    border: 2px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 2 ;
    color: black;
}

#modal-overlay {
    z-index: 1 ;
    display: none ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.75 ) ;
}
/* html.modalset {
  overflow: hidden;
}
.entry-modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  color: black;
}
.entry-modal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  white-space: nowrap;
}
.entry-modal-wrap::-webkit-scrollbar {
  display: none;
}
.entry-modal-wrap:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 100%;
}
.entry-modal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.8);
  width: 100%;
  height: 100%;
}
.entry-modal-box {
  width: 100%;
  max-width: 900px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.entry-modal-box .inner {
  background: #fff;
  padding: 10px 20px;
  text-align: left;
}
.entry-modal-box .inner > :first-child {
  margin-top: 0;
}
.entry-modal-box　.entry-modal-close {
 ここは自由
} */

[readonly],
[readonly] + label{
  pointer-events: none;
  background-color: rgb(229 231 235);
}


/*============================================
 ヘッダーメニュー
============================================*/
/*下の階層を持っているulの指定*/
nav.header-menu ul{
  /*絶対配置で位置を指定*/
position: absolute;
right:10px;
top:45px;
z-index: 4;
  /*形状を指定*/
background:white;
border-color:#455765;
border-width:2px;
width:200px;

}

nav.header-menu{
  background:#fff;
  color:#999;
  text-align: center;
}

nav.header-menu label:hover {
  color:#000;
}



/*ナビゲーションのリンク設定*/
nav.header-menu ul li a{
  display: block;
  text-decoration: none;
  color: #000;
  padding:5px 5px;
  border-bottom:solid 1px #455765;
}

#user_menu_toggle {
  display: none;
  cursor: pointer;
}
#user_menu {
  display: none;
}
#user_menu_toggle:checked + #user_menu {
  display: block;
}

/* #system_menu_toggle {
  display: none;
  cursor: pointer;
}
#system_menu {
  display: none;
  overflow-y: scroll;
  scrollbar-width: thin;
  max-height: 400px;
}

#system_menu_toggle:checked + #system_menu {
  display: block;
} */

.li_menu_item:hover{
  background:#f0fff0;
}
.li_menu_header{
  background-color:#455765;
  color:white;
}


/*============================================
 ヘッダー
============================================*/
.navigation {
  position: -webkit-sticky; /* Safari用 */
  position:sticky; /* 要素をスクロールに応じて固定 */
  top: 0;
  left: 0;
  width: 100%;
  height:3.1rem;
  background: #eee;
  box-sizing: border-box;
  z-index:5;
}

nav.header-menu label:has(+ input:checked) {
  color:#000;
}

/* .system_menu{
  display:none;
} */

a.active:before {
  color: #F99F48;
}

body{
  background: #f8f8f8;
}

/*============================================
 画面ロック
============================================*/
#overlay{
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.1);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 11.2px;
    height: 11.2px;
    border-radius: 11.2px;
    box-shadow: 28px 0px 0 0 rgba(71,75,255,0.2), 22.7px 16.5px 0 0 rgba(71,75,255,0.4), 8.68px 26.6px 0 0 rgba(71,75,255,0.6), -8.68px 26.6px 0 0 rgba(71,75,255,0.8), -22.7px 16.5px 0 0 #474bff;
    animation: spinner-b87k6z 1s infinite linear;
}


@keyframes spinner-b87k6z {
    to {
       transform: rotate(360deg);
    }
}

@media screen and (max-width: 520px) {
  /* 520px以下の時に使用するCSSを記載  */
}

@media screen and (max-width: 639px) {
  .page-input-title {
    margin-top: 0.1em;
    padding: 0em;/*内側余白 */
    width: 280px;
    background-color: #ffffff;
    color: black;
  }
  .page-input-title {
    margin: 0.2em;
    padding: 0.1em;/*内側余白 */
    max-width: 200px;
    background-color:  #ffffff;
    color: black;
    border-radius: 2px;
  }

  .cmc-main-box-header-input{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    max-width: 18rem;
    /* border: 1px solid #1187ca; */
    border-bottom: 3px solid #1187ca;
    /* background: linear-gradient(#ffffff 0%, #eee 100%); */
  }
  .cmc-main-box-header-list{
    position: relative;
    padding: 0.2rem 0.2rem 0.2rem 1.75rem;
    width: 18rem;
    /* border: 1px solid #D8D8D8; */
    border-bottom: 3px solid #8CD790;
    /* background: linear-gradient(#ffffff 0%, #eee 100%); */

  }

}

@media screen and (max-width: 960px) {
  /* 960px以下の時に使用するCSSを記載  */
}

@media screen and (max-width: 1024px) {
  .div_biz_main{
    width:100%
  }
}

@media screen and (min-width: 1025px) {
  /* 1025px以上の時に使用するCSSを記載  */
  .div_biz_main{
    width:calc(100% - 240px)
  }

}
.div_main{
  width:100%
}

.myTitleClass .ui-dialog-titlebar{
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  height:2.5rem;
  /* border: 1px solid #D8D8D8; */
  border-bottom: 4px solid #1187ca;;
  background: linear-gradient(#ffffff 0%, #eee 100%);

}


.myTitleClass .ui-dialog-titlebar:before {
  position: absolute;
  top: 20%;
  left: 10px;
  width: 6px;
  height: 60%;
  content: '';
  border-radius: 3px;
  background: #1187ca;
}




/*============================================
 入力用テーブル
============================================*/
#table_edit_exam_request_m_examinee_list,
#table_delete_exam_request_m_examinee_list {
  display: block;
  width: 100%;
  max-width: 1600px;
  overflow-y: scroll;
  overflow-x: scroll;
  height: 350px;
  border-collapse: collapse;

}
#table_create_exam_request_m_examinee_list {
  display: block;
  width: 100%;
  max-width: 1600px;
  overflow-y: scroll;
  overflow-x: scroll;
  height: 350px;
  border-collapse: collapse;

}
.no_data{
  text-align: center;
  background: #f5f6f7;
  height:30px;
}
.input_table thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #778899;
  color: #ffffff;
  text-align:left;
  height:30px;
}
.input_table tr td {
  border: 1px #d4d5d6 solid;
  border-bottom: none;
}
.input_table tbody tr:nth-child(odd) td {
background-color: #f5f6f7;
}

/*============================================
　カメラ画像（QRコード読み取り）
============================================*/
div.wrapper{
  position: relative;
}

video.video{
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: hidden;
  /* aspect-ratio: 1/1; */
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

canvas.camera-canvas{
    top: 0px;
    left: 0px;
    z-index: 50;
    /* aspect-ratio: 1/1; */
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

canvas.rect-canvas{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  pointer-events: none;
}

/*============================================
　入力欄　アコーディオン
============================================*/
.accordion_title {
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}
.accordion_title:hover {
  opacity: 0.8;
}
.accordion_title_p::before{/* 閉じている時 */
	content: '\f078';
  font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 20px;
}
.accordion_title_p.open::before{/* 開いている時 */
	content: '\f077';
  font-family: "Font Awesome 6 Free";
}
/* メイン部分の幅 */


/*============================================
　Datatableローディング
============================================*/
.dataTables_wrapper .dataTables_processing {
  /* position: absolute; */
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* z-index: 9999; */
  /* font-size: 32px; */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: auto;
  padding: 20px;
  z-index: 9999;
  background-color: rgb(255, 255, 255); /* 半透明の白 */
  color: black; /* 文字を黒に */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px; /* 文字のサイズを変更 */
  transform: translate(-50%, -50%); /* X軸とY軸の中央に配置 */
  border-radius: 8px; /* 角を丸くする（オプション） */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽く影をつける（オプション） */
}

/* 追加のスタイル: 文字を中央に配置 */
.dataTables_wrapper .dataTables_processing span {
  font-size: 32px; /* フォントサイズを調整 */
}

/*============================================
  Loadingアニメーション
============================================*/
.loader {
  color: #006eff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left:50%;
  text-indent: -9999em;
  -webkit-animation: rotate-animation 1.3s infinite linear;
  animation: rotate-animation 1.3s infinite linear;
  z-index: 9999;
  transform: translate(-50%,-50%);
}

@-webkit-keyframes rotate-animation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

@keyframes rotate-animation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.news-list{
    list-style: none outside;
    margin: 0;
    padding-bottom: 20px;
  }
  .news-list .item a{
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #333;
    /* border-bottom: 1px solid #CCC; */
    /* padding: 10px 20px; */
    padding: 5px 20px;
  }
  /* .news-list .item:first-child a{
    border-top: 1px solid #CCC;
  } */
  .news-list .item .date{
    /* margin: 0; */
    margin-top: 2px;
    /* min-width: 140px; */
    min-width: 84px;
    font-size: 14px;
    color: #1f1e1e;
    /* padding: 0 20px 0 0; */
    padding: 0;
  }
  .news-list .item .category{
    margin: 0;
    /* min-width: 100px; */
    min-width: 55px;
    /* padding: 0 20px 0 0; */
    padding: 0;
  }
  .news-list .item .category span{
    background: #278cff;
    color: #FFF;
    text-align: center;
    display: inline-block;
    /* padding: 5px 20px; */
    padding: 5px;
    font-size: 10px;
    line-height: 1;
    /* width: 100px; */
    width: 45px;
  }
  .news-list .item .title{
    /* margin: 0; */
    margin-top: 2px;
    width: 100%;
    font-size: 14px;
  }
  .news-list .item a:hover .title{
    color: #00F;
  }

  /* @media screen and (max-width: 767px){
  .news-list .item a{
    flex-wrap: wrap;
  }
  .news-list .item .date{
    min-width: 100px;
  }
  .news-list .item .title{
    margin-top: 10px;
  }
  } */

/*============================================
  newアイコン
============================================*/
  .item {
    display: flex;
    align-items: center;
}
  .new-icon {
    display        : inline-block;       /* インラインボックス定義  */
    color          : #ffffff;            /* 文字色                  */
    text-align     : center;
    font-weight    : bold;               /* 太字                    */
    font-size      : 16pt;               /* ベースの文字サイズ      */
    letter-spacing : -1px;               /* 文字間隔詰め            */
    line-height    : 1;                  /* 1行の高さ               */
    vertical-align : top;                /* 基準の高さ位置          */
    margin         : 0;                  /* 外余白なし              */
    padding        : 0px;                /* 反転時の内余白          */
    transform      : scale(0.6)          /* 文字サイズ変更          */
                     translateX(-30%);    /* 横位置調整              */
    animation      : newAnime .7s infinite alternate;   /* ブリンクのアニメ指定    */
    width          : 30px;
    margin-right   : 10px; /* 余白を設定（必要に応じて調整） */
    visibility     : hidden; /* アイコンを非表示にしたいとき */
    flex-shrink    : 0; /* アイコンのサイズが縮まないように */
  }

  @keyframes newAnime {
    0% { color      : #ff0000;          /* ブリンク時の文字色      */
       }
  100% { color      : #ffffff;          /* ブリンク時の文字色      */
       }
 }

 .item .new-icon:empty {
    visibility  : hidden; /* 空の場合も非表示 */
}

.item .new-icon.visible {
    visibility  : visible;  /* アイコンが表示される時 */
}

.date,
.category,
.title {
    flex-grow   : 1; /* 各要素が残りのスペースを取る */
    margin      : 0; /* 余白をリセット */
    padding     : 0; /* 余白をリセット */
}

  /* 装飾 */

  *{
    box-sizing: border-box;
  }
  a{
    text-decoration: none;
  }
  body{
    margin: 20px;
  }

/*============================================
  カメラキャンバス用
============================================*/
/* #wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#video,
#camera-canvas,
#rect-canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: black;
} */

/*============================================
  お知らせ詳細ページ用スタイル
============================================*/
.notice-content {
    line-height: 1.8;
    color: #374151;
}
.notice-content h1, .notice-content h2, .notice-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
}
.notice-content p {
    margin-bottom: 1rem;
}
.notice-content ul, .notice-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}
.notice-content a {
    color: #2563eb;
    text-decoration: underline;
}
.notice-content a:hover {
    color: #1d4ed8;
}