html {
    font-size: 14px;
}
body {
    font-family: "Meiryo", "MS Meiryo", sans-serif;
}

/* スマホ用フォントサイズ */
@media (max-width: 600px) {
  html {
    font-size: 17px;
  }
}

 /* ヘッダーの高さ分だけ余白を確保 */
#pageform {
    padding-top: 2.7rem;
}

[v-cloak] {
    display: none;
}

.container {
    max-width: 1500px; /*メインコンテナの最大幅*/
}

p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.card-header {
    color: white;
    background-color: rgb(66, 101, 121);
    height:2rem;
    padding-top: 0.3rem;
}

.navbar {
    background-color: white !important;
    top: 0;
}

/* nav-itemの文字色 */
.navbar .navbar-brand, .navbar .navbar-nav .nav-link {
    color:black;
}

/* nav-item activeの文字色 */
.navbar .navbar-nav .active > .nav-link {
    color:white;
    background-color: rgb(66, 101, 121);
    border-radius: 0.2rem;
}
/* nav-item:focus、nav-item:hoverの文字色 */
.navbar .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color:white;
    background-color: rgb(66, 101, 121);
    border-radius: 0.2rem;
}

/* ドロップダウンアイテムのアクティブ・ホバー時の背景色と文字色 */
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e5e4e6; /* 白梅鼠 しらうめねず */
    color: #000 !important;
}

/* Bootstrap primary色カスタマイズ */
.btn-primary,
.bg-primary {
    background-color: #19448e !important;  /* 瑠璃紺 るりこん */
    border-color: #19448e !important;
}
.text-primary {
    color: #19448e !important;
}

/* primaryボタンのマウスオーバー時 */
.btn-primary:hover,
.btn-primary:focus,
.bg-primary:hover,
.bg-primary:focus {
    background-color: #13356f !important;  /* 瑠璃紺 るりこん 少し暗く */
    border-color: #13356f !important;
    color: #fff !important;
}

/* Bootstrap success色カスタマイズ */
.btn-success,
.bg-success {
    background-color: #00a381 !important;  /* 花緑青 はなろくしょう */
    border-color: #00a381 !important;
}
.text-success {
    color: #00a381 !important;
}

/* successボタンのマウスオーバー時 */
.btn-success:hover,
.btn-success:focus,
.bg-success:hover,
.bg-success:focus {
    background-color: #008165 !important;  /* 花緑青 はなろくしょう 少し暗く */
    border-color: #008165 !important;
    color: #fff !important;
}

button.btn {
    width: 10rem;
    /* font-size: 1rem; */
}

.btn-primary,.btn-secondary,.btn-danger,.btn-info,.btn-success,.btn-warning,.btn-light,.btn-dark {
    width: 6rem;
}
.btn-light {
    border: 1px solid gray;
}

label.lbl {
    color: #000;
    margin: 0rem 0.5rem;
    text-align: right;
}
/* スマホ用 ラベル*/
@media (max-width: 767.98px) {
    label.lbl {
        width: auto !important;
        min-width: 0 !important;
        text-align: left !important;
    }
}
/* スマホ用 テキスト */
@media (max-width: 767.98px) {
    input.txt, textarea.txt {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

input[type='text'].txt{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}

input[type='number'].num{
    width: 5rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='tel'].tl{
    width: 5rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}
  
input[type='date'].dte{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}

input[type='month'].mon{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}

input[type='time'].tim{
    width: 6rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}
  
input[type='checkbox'].cbx{
    margin: 0rem 0.5rem;
    transform: scale(1.2);
}

input[type='file'].fle{
    width: 100%;
    /* max-width: 40rem; */
}

textarea{
    border: 1px solid #ccc;
}

/* 未使用 form-selectに移行 */
select.slc{
    /* 高さを調節しようとheightとかしてみたがpaddingに落ち着いた */
    /* padding: 0.2rem; */
    padding-top:0.1rem;
    padding-bottom:0.1rem;
    /* height: 1.9rem; */
    border: 1px solid #ccc;
    box-sizing: border-box;
}
select:disabled{
    background-color:white;
    color:black;
    cursor: not-allowed;
}

.v-enter {
    opacity: 0;
}
.v-enter-active {
transition: opacity 3s;
}
.v-enter-to {
opacity: 1;
}
.v-leave {
opacity: 1;
}
.v-leave-active {
transition: opacity 3s;
}
.v-leave-to {
opacity: 0.3;
}

table.table-responsive{
    overflow: auto;
}
@media (max-width: 600px) {
    .table-responsive table {
        margin-left: 0 !important;
        /* width: 100% !important; */
    }
}

table{
    border-collapse:collapse;
    margin:0 auto;
    width:100%;
    table-layout:fixed;
}

thead{
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    /* border-top: 1px solid #33618f; */
}

thead, tbody {
    display: block;
}
tbody {
    /* overflow-x: hidden;
    overflow-y: scroll; */
    overflow-x: none;
    overflow-y: none;
    /* height: 20rem; */
}
th{
    color:#33618f;
    font-weight: normal;
}
td{
    border-bottom:1px dashed #999;
    word-break: break-all;
    /* border-left: 1px dashed #999; */
}
td.num{
    text-align: right;
    padding-right: 1rem;
}
th,tr:last-child td{
    border-bottom:2px solid #33618f;
}
td,th{
    padding:0.3rem;
}
tr.tr_box {
    border-top:1px solid #33618f;
    border-right:1px solid #33618f;
}
tr:hover td {
    background-color: #d9efff;
}

p.ep {
    text-align:center;
}
b.eb {
    color:crimson;
}
ul.eul {
    text-align: center;
    padding-left: 0rem;
}
ul.eul li {
    list-style-type: none;
    position: relative;
}

b.kanryo{
    width: 5rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    color:white;
    background-color:red;
    margin: 0rem 0.5rem;
}

td.kigo{
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    /* color: royalblue; */
}

.red{
    color: crimson;
    font-size: 1.0rem;
}

th.lborder{
    border-left: 1px solid #999;
    border-left-color:#33618f;
}

td.lborder{
    border-left: 1px solid #999;
    border-left-color:#33618f;
}
td.lrborder{
    border-left: 1px solid #999;
    border-left-color:#33618f;
    border-right: 1px solid #999;
    border-right-color:#33618f;
}

.round_btn {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;  /* 丸みの度合い */
    background: #333; /* ボタンの背景色 */
    cursor: pointer;
  }
   
  .round_btn::before, .round_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 13px;
    background: #fff; /* バツ印の色 */
  }
   
  .round_btn::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
   
  .round_btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }

input.suggest_display{
    height: 1.8rem;
    border: 1px solid #ccc;
    /* border-radius: 0rem; */
}
.vue-simple-suggest{
    display: inline-block;
}

/* 印刷横向き */
@page { size:landscape; }

a.a_batu {
    color: red;
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
}

/* bootstrap lg解像度以上はdisplay=none */
.d-lg-none{
    margin-bottom:0.3rem;
    display: block;
    content: '';
}
/*
font-awesomeアイコン関連
*/
.fa-solid,.fa-regular{
    margin-right : 5px;
}
.fa-ban,.fa-trash{
    margin-left: 4px;
    font-size:1rem;
    /* color: crimson; */
}
.fa-asterisk{
    color:red;
    font-size:0.7rem;
    margin-left: 3px;
}
.fa-caret-down,.fa-caret-right {
    /* color:red; */
    font-size: 1.2rem;
}
.fa-circle-question {
    margin-right : 0px;
    margin-left : 3px;
    font-size:1.2rem;
}
.fa-circle {
    font-size:1.2rem;
}
.fa-xmark {
    color:red;
    font-size:1.3rem;
}

a.add_new {
    font-size:1.1rem;
    text-decoration: none;
    /* color:#0075c2; */
}

.fa-circle-plus,.fa-square-minus {
    font-size: 1.2rem;
}

.my-br {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: block;
}

.btn-return {
    margin: 0.5rem;
}
.btn-store {
    margin: 0.5rem;
}

/* ラベルの幅を調整
画面が小さい時にwidthを?remにする */
/* 991.98px以下の画面幅で適用される */
@media (max-width: 991.98px) {
  .lbl-width10 {
    width: 10rem !important;
    display: inline-block; /* 横並びを維持したい場合 */
  }
}

/* 画面幅992px以上（lg以上）は幅50% */
@media (min-width: 992px) {
  .responsive-width {
    width: 50% !important;
  }
}
/* 画面幅991.98px以下（lg未満）は幅100% */
@media (max-width: 991.98px) {
  .responsive-width {
    width: 100% !important;
  }
}

/* スライドトグルのスタイル */
.slide-toggle-enter-active,
.slide-toggle-leave-active {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
  overflow: hidden;
}
.slide-toggle-enter, .slide-toggle-leave-to {
  max-height: 0;
  opacity: 0;
}
.slide-toggle-enter-to, .slide-toggle-leave {
  max-height: 1000px; /* 十分大きな値にしておく */
  opacity: 1;
}

@media (max-width: 767.98px) {
    .slide-toggle-vars {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* form-controlの枠色と角丸を統一
既存の入力エリアと統一するため
すべてbootstrapで統一したほうがいいかもしれない
*/
.form-control {
    border: 1px solid #ccc !important;   /* 枠を黒に */
    border-radius: 0 !important;
    box-shadow: none !important;         /* フォーカス時の青い影を消す */
}
.form-control:focus {
    border: 1px solid #333 !important;
    border-radius: 0.3rem !important; /* 角丸をつける */
    box-shadow: none !important;         /* フォーカス時の青い影を消す */
}

.form-select {
    width:15rem;
    display: inline-block;
    border: 1px solid #ccc !important;   /* 枠を黒に */
    border-radius: 0 !important;
    box-shadow: none !important;         /* フォーカス時の青い影を消す */
}
.form-select:focus {
    border: 1px solid #333 !important;
    border-radius: 0.3rem !important; /* 角丸をつける */
    box-shadow: none !important;         /* フォーカス時の青い影を消す */
}

/* Bootstrapツールチップのカスタマイズ */
.tooltip-inner {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0.3rem !important;
    font-size: 1rem !important;
    border: 1px solid #333 !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-top-color: #222 !important;
    border-bottom-color: #222 !important;
    border-left-color: #222 !important;
    border-right-color: #222 !important;
}

/* bootstrap バッジ */
.badge {
    font-size: 1rem; /* フォントサイズ */
}

/* ドラッグ＆ドロップエリアの枠線がはみ出さないようにする */
.drop-area {
    border: 2px dashed #aaa;
    padding: 1rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
}

.no-wrap {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 7rem; /* 必要に応じて調整 */
}

/* サイズが小さい時にmargin調整するdiv */
@media (max-width: 600px) {
    .div_ml_1 {
        margin-left: 1rem !important;
    }
}

/* bootstrap 独自の濃いバッジ色 */
.badge-custom-dimgray {
    background-color: dimgray !important; /* Bootstrapのdarkよりさらに濃くしたい場合は色コードを調整 */
    color: #fff !important;
    opacity: 1; /* 透明度で濃さを調整も可能 */
}

/* bootstrap badge info背景を少し暗くする*/
.bg-info {
    background-color: #2596be !important; /* Bootstrapのinfo色 */
}

/* tooltip */
.tooltip-inner {
    max-width: 400px !important; /* デフォルトは200px */
    white-space: pre-line;       /* 複数行も許可する場合 */
}

.alert-danger ul {
    /* エラーメッセージ領域の下空白 */
    margin-bottom: 0;
}

/* サイドバー */
#service-switcher {
    position: fixed;
    top: 0;
    left: 0;
    width: 2.5rem; /* 閉じた状態の幅 */
    height: 100vh;
    background: #426579;
    color: #fff;
    transition: width 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#service-switcher.opened {
    width: 11.2rem; /* 開いた状態 */
}
#service-switcher .sidebar-toggle-btn {
    background: none;
    border: none;
    color: #fff;
    margin: 1rem 0;
    font-size: 1.2rem;
}
#service-switcher .service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    padding-right: 1px;
}
#service-switcher .service-list li {
    padding: 1rem 0.5rem;
    cursor: pointer;
    text-align: center;
}
#service-switcher .service-list li.active {
    background: #5c9291;
    border-radius: 0.2rem;
    border: 1px solid #86d1d0;
}
#main-content {
    margin-left: 2.5rem; /* 閉じた状態をデフォルトに */
    transition: margin-left 0.2s;
}
#service-switcher.opened + #main-content {
    margin-left: 11.2rem;
}

#service-switcher .sidebar-toggle-btn {
    height: 3rem; /* liと同じ高さに */
    min-height: 3rem;
    max-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#service-switcher, .sidebar {
  z-index: 1040 !important;
}

/* スマホ幅ではサイドバーを上配置にする */
@media (max-width: 767.98px) {
  #service-switcher {
    position: fixed !important;
    width: 100% !important;
    height: 2.5rem !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 0.5rem;
    z-index: 1040 !important;
  }
  #service-switcher .sidebar-toggle-btn {
    display: none !important;
  }
  #service-switcher .service-list {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: flex-start;
    padding-right: 0;
  }
  #service-switcher .service-list li {
    padding: 0.4rem 0.5rem;
    text-align: left;
  }
  /* サイドバー以外も微調整する */
  #main-content {
    margin-left: 0 !important;
  }
  .navbar {
    top: 2.5rem;
    left: 0 !important;
    width: 100% !important;
  }
  #pageform {
    padding-top: 5rem;
  }
  /* 利用者用 app_riyosya.blade.php（サイドバーが非表示） */
  body.kaigi-riyosya #pageform {
    padding-top: 2.7rem;
  }
  /* 管理者用 app_admin.blade.php（サイドバーが非表示） */
  body.kaigi-admin #pageform {
    padding-top: 2.7rem;
  }
}


.navbar.fixed-top {
    transition: left 0.2s, width 0.2s;
    z-index: 1030;
}

/* ハンバーガーメニュー展開時の背景色を白に */
.navbar-collapse,
.navbar-nav .dropdown-menu,
.collapse.show {
    background: #fff !important;
    /* border: 1px solid #ccc; */
    /* border-radius: 0.3rem; */
}

.collapse.show {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
}

/* トップへ戻るボタン */
#scrollTopBtn {
    display: none; /* デフォルトは非表示 */
    position: fixed;
    bottom: 2rem;
    right: 3rem;
    z-index: 1999;
    width: 8rem;
    background: rgba(66, 101, 121, 0.8); /* btn-secondary色で透過 */

}

/* 送信中オーバーレイ */
.overlay-loading {
    position: fixed;
    z-index: 2000;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-message {
    text-align: center;
}