/* variables */
:root {
  --arailogi-blue: #002f81;
  --arailogi-yellow: #ffe100;
  --bg-color-main: #f5f5f5;
  --font-family-set: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic",
    YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* frame */

html{
  font-size: 12pt;
/*  font-size: 15px;*/
}

header {
  font-family: var(--font-family-set);
}

body {
  background-color: var(--bg-color-main);
}

.navbar, .offcanvas-header {
  background-color: var(--arailogi-blue);
}

.navbar {
  --bs-navbar-brand-hover-color: white;
}

.navbar-brand, #user-menu span, #user-menu::after {
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.navbar-toggler-icon{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#user-menu span{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 768px) { /* -md 以下 */
  .dropdown-width {
    width: 50%;
  }
}

.offcanvas-title {
  color: white;
  font-weight: bold;
}

.offcanvas-header .btn-close {
  opacity: 100%;
}

#offcanvasNavbar {
  background-color: white;
  font-weight: bold;
  width: 320px;
}

.nav-item ul {
  list-style: none;
}

.notice-area {
  color: black;
  background-color: white;
}

/* common area */


.container {
  background-color: white;
}

.card-round {
  border-radius: 15px;
}

.table-responsive {
  border-radius: 5px;
}

.table.striped1 tr:nth-child(even) td{
  background-color: #eef6fb;
}

.table.striped2 tr:nth-child(4n+3) td,.table.striped2 tr:nth-child(4n+4) td{
  background-color: #eef6fb;
}

.table.striped3 tr:nth-child(6n+4) td,.table.striped3 tr:nth-child(6n+5) td,.table.striped3 tr:nth-child(6n+6) td{
  background-color: #eef6fb;
}

.button-area {
  border-radius: 5px;
  background-color: var(--bg-color-main);
}

/* common item */

.menu-card {
  border: solid 1px var(--arailogi-blue);
}

.menu-card .card-header {
  background-color: var(--arailogi-blue);
  color: white;
  font-weight: bold;
}

.menu-card .card-header .bi {
  font-size: 20px;
  font-weight: bold;
  color: white;
}
/*見積顧客メニュー：承諾依頼ゼブラ・*/
.custom-list-group .list-group-item:nth-child(even) {
    background-color: #eef6fb; /* 任意の色 */
}

.alert ul{
  margin: 0;
}

.col-form-label {
  font-weight: bold;
/*  border-bottom: solid 3px #cff4fc;*/
/*  border: ridge  2px #cfe3fc;*/
  background-color: #d9f2d9;
}
/* 見積用ラベル背景設定 */
.mode-quotation .col-form-label {
  background-color: #dfeeff;
}

.required {
  color: red;
}

.negative-amount {
  color: red !important;
}

.form-control, .form-select, .form-check-input {
  outline: solid 1px gray;
  outline-offset: -1px;
}

.form-check-label {
  font-size: 0.85rem;
}

.input-group > .form-control:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
  border-radius: var(--bs-border-radius-sm);
}

.page-ajax .page-link {
  cursor: pointer;
}

textarea {
  resize: none;
  width:400px;
  height:100px;
}

textarea[readonly] {
  background-color: #fffdf4; /* または他の色に変更 */
}

thead {
  font-size: 0.85rem;
}

thead th {
  text-align: center;
  vertical-align: middle;
}

tbody {
  font-size: 0.85rem;
}

tbody td {
  vertical-align: middle;
}

@keyframes ticker {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

input[readonly] {
  background-color: #fffdf4; /* または他の色に変更 */
}

.btn-pink {
  background-color: pink;
  color: black;
}
.btn-pink:hover {
  background-color: hotpink;
  color: black;
}
.btn-pink:disabled {
  background-color: #f8d7da;  /* 薄いピンク */
  color: #6c757d;             /* 薄いグレー系の文字色 */
  cursor: not-allowed;
}

header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  /* background-color: white; 必要に応じて */
  /* border-top: 1px solid #ccc; */
}

/* ボタンカラー設定 */
/* LINEアプリ */
.btn-line {
  background-color: #00B900;  /* LINEの緑 */
  border-color: #00B900;
  color: #fff; /* 文字色は白 */
}
.btn-line:hover {
  background-color: #00a200;  /* 少し暗めでホバー */
  border-color: #00a200;
}
.btn-line:active {
  background-color: #008f00;
  border-color: #008f00;
}

.fs-110p {
  font-size: 110%;
}
.fs-80p {
  font-size: 80%;
}

table > tbody.route-pattern-body:nth-of-type(even) > tr > td {
  background-color: #eef6fb;
}

input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  opacity: 1;
}

.modal-offset {
  margin-top: 80px;
}

.tooltip-inner {
  max-width: none !important;   /* 最大幅を解除 */
  width: auto !important;       /* 内容に合わせる */
  display: inline-block;        /* テキスト幅にフィットさせる */
  white-space: pre-wrap;        /* 改行と折り返しを有効にする */
  text-align: left;             /* 左揃え */
}

/* 時計アイコンを非表示 */
.clock-icon-none input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* モーダル非活性 */
.modal-disabled {
  pointer-events: none; /* クリック無効化 */
  opacity: 0.6;         /* 半透明で無効っぽく見せる */
}

/* モーダル内スクロール */
.aa-table-scroll {
  max-height: 420px;      /* 高さ */
  overflow-y: auto;
  position: relative;  
}

/* ヘッダ固定 */
.aa-table-fixed thead th {
  position: sticky;
  top: -1px;
  z-index: 1;
}

/* モーダル表示位置設定 */
.modal:not(#confirm_modal) .modal-dialog {
  margin-top: 80px !important;
  margin-bottom: auto; /* 下は自動 */
}