/* 全体のレイアウト */
body {
  font-family: 'Roboto', sans-serif;
  background-color: #f4f7f6; /* 落ち着いた薄いグレー */
  margin: 0;
  padding: 0;
  color: #333; /* 読みやすい濃いグレー */
}

a {
  text-decoration: none;
  color: #0056B3; /* 青系のリンク */
}

a:hover {
  color: #6a00f4;
}

table {
  width: 100%;
  border-collapse: collapse;
 
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}


.table-center{
  text-align: center;
  align-items: center;
}

.icon-text-center{
  justify-content: center;
  
}
.table-item-center{
  margin:auto;
}


.col-id {
  max-width: 5%; /* ID列の幅を1% */
}
.col-host {
  width: 30%; /* ホスト名の列を30% */
}
.col-name {
  width: 20%; /* ホスト名の列を30% */
}
.col-check {
  width: 15%; /* チャネルシークレットとアクセストークンを25%ずつ */
}
.col-customer {
  width: 5%; /* 顧客一覧への列を10% */
}
.col-select{
  width: 17%;
}
.col-checkbox{
  width: 7%;
}
.col-content{
  width: 39%;
}
.col-delete{
  width: 5%;
}
.col-date{
  width: 12%;
}
.col-line-id{
  width:56%;
}
.link-bold{
  font-weight: bold;
}

th, td {
  padding: 12px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: #0056B3;
  color: white;
}

tr:hover {
  background-color: #f1f1f1;
}

button, a[role="button"], .btn {
  display: inline-block;
  padding: 10px 20px;
  /* margin: 10px 5px; */
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent; /* 通常時のボーダーを透明にする */
  border-radius: 5px;
  background-color: #0056B3; /* 通常の背景色 */
  color: white; /* 通常の文字色 */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

button:hover, a[role="button"]:hover, .btn:hover {
  background-color: #6a00f4; /* ホバー時の背景色 */
  color: #ffffff; /* ホバー時の文字色 */
  border-color: #ffffff; /* ホバー時にボーダーを白にする */
}


.btn-secondary {
  background-color: #6c757d;
}

.btn-danger {
  background-color: #dc3545;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-danger:hover {
  background-color: #c82333;
}

.sidebar a {
  color: white;
  padding: 10px;
  text-align: left;
  margin-bottom: 10px;
}

.sidebar a:hover {
  background-color: #34495e;
  border-radius: 5px;
}
.sidebar-text{
  color:white
}

h2 {
  color: #1a2b4c
}

/* Flashメッセージのスタイル */
.flash-message {
  padding: 10px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* レスポンシブ対応 */
.table-responsive {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100px;
  }
  .main-content {
    margin-left: 100px;
  }
}


.sidebar ul {
  list-style-type: none;
  padding: 0;
}



.sidebar ul li a {
  color: white;
  text-decoration: none;
}

.sidebar ul li a:hover {
  background-color: #34495e;
  border-radius: 5px;
  padding: 10px;
}

.main-content {
  margin-left: 290px; /* サイドバーの幅に合わせて調整 */
  padding: 20px;
}


/* サイドバーの基本スタイル */
.sidebar {
  width: 250px;
  height: 100vh;
  background-color:  #1a2b4c;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

/* メインコンテンツ (PC用) */
.main-content-with-sidebar {
  margin-left: 290px; /* サイドバーの幅に合わせてマージンを設定 */
  padding: 20px;
}

.main-content-full-width {
  margin-left: 0;
  padding: 20px;
}

/* ハンバーガーメニューのスタイル (スマホ用) */
.hamburger-menu {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999;
  background-color: #1a2b4c;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.hamburger-menu i {
  color: white;
}

/* チェックボックスは非表示 */
.sidebar-toggle {
  display: none;
}

/* スマホ用レスポンシブ対応 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%); /* デフォルトでサイドバーを非表示 */
  }

  .sidebar-toggle:checked ~ .sidebar {
    transform: translateX(0); /* チェックされたらサイドバーを表示 */
  }

  .hamburger-menu {
    display: block; /* ハンバーガーメニューを表示 */
  }

  .main-content-with-sidebar {
    margin-left: 0; /* スマホではマージンを設定しない */
  }
}


/* Flashメッセージのコンテナ */
.flash-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  z-index: 9999;
}

/* 各種アラートのスタイル */
.alert {
  display: flex; /* Flexboxでアイテムを整列 */
  align-items: center; /* 中央揃え */
  justify-content: space-between; /* アイテム間のスペースを均等に */
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 成功メッセージ */
.alert-success {
  background-color: #28a745;
}

/* 情報メッセージ */
.alert-message {
  background-color: #17a2b8;
}
.alert-info {
  background-color: #17a2b8;
}

/* 警告メッセージ */
.alert-danger {
  background-color: #ff0707;
}

/* アイコンのスタイル */
.alert i {
  font-size: 24px;
  margin-right: 10px;
}

/* 閉じるボタンのスタイル */
.close-btn {
  font-size: 18px;
  cursor: pointer;
  margin-left: 15px;
  color: white;
}

/* メッセージがフェードアウトするためのスタイル */
.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

/* .material-icons{
  display: flex;
  align-items: center;
  font-size: 32px !important;
  height: 100%;
} */


.sidebar-menu {
  list-style-type: none; /* リストスタイルを削除 */
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  display: flex; /* アイコンと文字を横並びに */
  align-items: center; /* アイコンと文字を上下中央に */

}

.sidebar-menu a {
  display: flex;
  align-items: center; /* アイコンとテキストを上下中央に */
  text-decoration: none;
  color: white; /* 文字色を白に（サイドバー背景に合わせて調整可能） */
  width: 100%;
}

.material-icons {
  font-size: 21px !important; /* アイコンサイズを21pxに変更 */ 
  
}
.icon-sidebar{
  padding-right: 10px;
}
.sidebar-menu li:hover {
  background-color: #3b4a6b; /* ホバー時の背景色 */
}

/* コンテナのスタイル */
.add-user-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin: 20px auto;
}

@media (max-width: 768px) {
  .add-user-container {
    flex-direction: column;
  }

  .user-list-section {
    margin-top: 20px;
  }
}

/* フォームセクション */
.form-section {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
}

/* メディアクエリでスマホ画面対応 */
.user-list-section {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin-bottom: 20px;
  color: #0056b3;
  font-weight: bold;

}

.user-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #333;
}

.user-card i {
  margin-right: 10px;
  color: #0056b3;
}

.center{
  display:flex;
  justify-content: center;
}
.middle{
  display: flex;
  align-items: center;
}

/* SelectMultipleFieldのリッチなデザイン */
.custom-select-multiple {
  position: relative;
  width: 100%;
  max-width: 100%;
  transition: border-color 0.3s ease;
  
}

.select-multiple {
  width: 100%;
  height: 400px; /* デフォルトの高さ */
  font-size: 16px;
  border-radius: 10px;
  background-color: #f4f7f6;
  border: 1px solid #ddd;
  color: #333;
  outline: none;
  overflow-y: auto; /* スクロール可能にする */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.user-list{
  max-height: 467px; /* 必要に応じて高さを調整 */
  overflow-y: auto; /* 垂直スクロールを有効にする */

}
/* フォーカス時のスタイル */
.select-multiple:focus {
  border-color: #0056b3;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* オプション要素のスタイル */
.select-multiple option {
  padding: 0 15px;
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}

.select-multiple option:hover {
  background-color: #f0f0f0;
}

/* スクロールバーのカスタムデザイン (Webkit) */
.select-multiple::-webkit-scrollbar {
  width: 8px;
}

.select-multiple::-webkit-scrollbar-thumb {
  background-color: #0056b3;
  border-radius: 10px;
}

/* スクロールバーのカスタムデザイン (Firefox) */
.select-multiple {
  scrollbar-color: #0056b3 #f4f7f6; /* スクロールバーの色 */
  scrollbar-width: thin; /* スクロールバーの幅 */
}

.mt-5{
  margin-top: 2px;
}


/* フォーム全体のレイアウト */
.edit-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}



.page-title {
  font-size: 28px;
  color: #0056b3;
  margin-bottom: 10px;
}

/* フォームのスタイル */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group input:not([type="checkbox"]), 
.form-group textarea, 
.form-group select{
  margin-top: 5px;
}


/* ラベル */
.form-label {
  font-weight: bold;
  color: #333;
}

input[type="checkbox"] {
  appearance: none;
  height: 24px;
  width: 24px;
  
  border: 1.5px solid #0056B3;
  border-radius: 1.5px;
  transition: 0.2s;
}
input[type="checkbox"]:hover {
  border: 1.5px solid #6a00f4;
  background-color:rgb(255, 255, 255)
}
input[type="checkbox"]:checked {
  border: 1.5px solid #0056B3;
  background-color: #0056B3;
}
input[type="checkbox"]:checked:hover {
  border:1.5px solid #6a00f4;
  background-color: #6a00f4;
}
input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  position: relative;
  left: 7px;
  top: 0px;
  width: 6px;
  height: 16px;
  border: solid white;/*00b433*/
  border-width: 0 2px 2px 0;
  border-radius: 0 0  1px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid #6a00f4;
  outline-offset: 2px;
} 

.table-selectbox{
  width: 90%;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.table-selectbox::after {
  position: absolute;
  right: 12px;
  width: 10px;
  height: 7px;
  background-color: #202020;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  pointer-events: none;
}

.table-selectbox select {
  appearance: none;
  height: 2.2em;
  padding: .1em calc(.4em + 15px) .1em .8em;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background-color: #fff;
  color: #000000;
  font-size: 1em;
  cursor: pointer;
}
select{
  width: 100%;
}

.form-control {
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box; 
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease;
}

.form-control:focus {
  
  border-color: #0056b3;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  outline: none;
}




/* 削除ボタンの基本スタイル */
.delete-btn {
  display: inline-block;
  height: 21px;
  width: 21px;
  margin: auto;
  border: 1.5px solid #dc3545;
  border-radius: 1.5px;
  position: relative;
  transition: 0.2s;
  cursor: pointer;
}


/* バツマークの作成 */
.delete-btn::before,
.delete-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background-color: #dc3545;
  transition: background-color 0.3s ease;
}

/* バツマークの横線 (×の一部) */
.delete-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* バツマークの縦線 (×の一部) */
.delete-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ホバー時のスタイル */
.delete-btn:hover {
  background-color: #dc3545; /* 濃い赤に変わる */
  box-shadow: 0 0 5px rgba(230, 0, 0, 0.5);
}

.delete-btn:hover::before,
.delete-btn:hover::after {
  background-color: #fff;
}

/* アクティブ時のスタイル */
.delete-btn:active {
  background-color: #dc3545;
  box-shadow: 0 0 8px rgba(204, 0, 0, 0.7);
}





.form-submit{
  font-size: 16px;
  font-weight: bold;
}
.mr-20{
  margin-right: 20px;
}
.mr-5{
  margin-right: 5px;
}
.mt-20{
  margin-top: 20px;
}
.ml-20{
  margin-left: 20px;
}
.m-auto{
  margin: auto;
}

/* 一列目のセルにスタイルを適用 */
table td:first-child,
table th:first-child {
  padding-left: 15px;       /* 太字にする例 */
}

.pl-10{
  padding-left: 20px;
}
.pr-10{
  padding-right: 10px;
}

.pr-5{
  padding-right: 5px;
}
.flex{
  display: flex;
}

/* タイトルとボタンの横並び */
.notification-header {
  display: flex;
  justify-content: space-between; /* タイトルとボタンを両端に配置 */
  align-items: center; /* 縦の中央揃え */
 
}

/* ボタンを右端に寄せて横並びに */
.button-group-right {
  display: flex;
  gap: 10px; /* ボタン間のスペース */
}

.button-group-right .btn {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
}

.is-danger{
  color: #dc3545;
  font-weight: bold;

}

.pointer{
  cursor:default;
}

/* ホスト詳細ページのコンテナ */
.details-container {
  /* max-width: 1000px; */
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}



/* タイトルと編集ボタンの配置 */
.page-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 情報セクションのスタイル */
.info-section {
  background-color: #f7f7f7;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
}



.btn-right {
  margin-left: auto;
}


.page-header h1{
  margin:10px
}

.info-section h3{
  font-size: 22px;
  color: #000000;
  margin:0;
  margin-bottom: 10px;
}

/* LINEアクセストークンの折り返し処理 */
.info-section p {
  word-wrap: break-word; /* 長い単語を折り返す */
  word-break: break-all; /* 必要に応じて単語を途中で切る */
  overflow-wrap: break-word; /* より広いブラウザ対応 */
}

.icon-text-wrapper{
  display: flex; /* アイコンと文字を横並びに */
  align-items: center; /* アイコンと文字を上下中央に */
}




.stylish-text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    flex-grow: 1;
}

.copy-icon {
    cursor: pointer;
    color: #0056b3;
    font-size: 24px;
    transition: color 0.3s ease;
    margin-left: 20px;
}

.copy-icon:hover {
    color: #6a00f4;
}

.no-reply {
    font-size: 16px;
    color: #888;
    font-style: italic;
}

.info-section strong{
  padding-right: 10px;
}




/* ログインフォーム全体の配置 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}



/* タイトルのスタイル */
.login-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}



/* position: fixed;
transform: translate(calc(-20px),calc(-20px)); */
/* ログインフォーム全体の配置 */
/* login-containerのスタイル */
/* ログインフォーム全体のスタイル */
/* ログインフォーム全体の配置 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #007bff, #6a00f4, #004e92); /* シンプルで滑らかなグラデーション */
  overflow: hidden;
  position: fixed;
  transform: translate(calc(-20px),calc(-20px));
}

/* ログインフォームのスタイル */
.login-form {
  position: relative;
  background-color: rgba(255, 255, 255, 0.78); /* 白背景に少しの透明感 */
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* 柔らかいシャドウ */
  z-index: 1;
  width: 400px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


/* ラベルと入力フィールドのスタイル */
.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  font-weight: bold;
  color: #333;
}

.login-form .form-control {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* フォーカス時のスタイル */
.login-form .form-control:focus {
  border-color: #6a00f4;
  box-shadow: 0 0 5px rgba(106, 0, 244, 0.5);
  outline: none;
}

/* ボタンのスタイル */
.login-form .btn {
  width: 100%;
  background-color: #0056B3;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ボタンホバー時のエフェクト */
.login-form .btn:hover {
  background-color: #6a00f4;
  box-shadow: 0 4px 12px rgba(0, 91, 187, 0.4);
}

.login-title{
  margin: 0 auto 20px 0;

}

/* エラーページ全体のコンテナ */
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  background-color: #f4f7f6; /* 柔らかい背景色 */
}

/* タイトル部分のスタイル */
.error-title {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* メッセージ部分のスタイル */
.error-message {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

.bold{
  font-weight: bold;
}

/* アイコンとテキスト全体にグラデーションを適用 */
.expert-plan-text {
  background: linear-gradient(160deg, #007bff, #6a00f4, #004e92); /* グラデーション */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: center;
  font-weight: bold; /* 太字 */
}

/* アイコンに余白を追加 */
.expert-plan-text i {
  padding-right: 5px;
}


/* エラーメッセージ全体のスタイル */
.validate-message {
  display: flex;
  align-items: center;  /* 垂直方向に中央揃え */
  font-size: 0.9rem;
  color: #e74c3c;
  background-color: #fce4e4;
  border: 1px solid #e74c3c;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
  position: relative;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* エラーアイコン */
.validate-message::before {
  content: '⚠';  /* アイコンとして警告マークを追加 */
  font-size: 1.2rem;
  margin-left: 15px;
  color: #e74c3c;
  display: inline-flex;
  align-items: center;  /* 上下中央揃え */
}

/* エラーメッセージ内のテキスト */
.error-text {
  color: #e74c3c;
  margin:5px;
  list-style: none;
  flex-grow: 1;  /* テキスト部分を残りの幅に広げる */
}

/* フォームの入力フィールドがエラー時のスタイル */
input.form-control.error {
  border-color: #e74c3c;
  background-color: #fce4e4;
}

.validate-message ul {
  margin: 0;
}


.table-icon-center {
        /* Flexboxを使って子要素を配置 */
  justify-content: center;  /* 水平方向に中央揃え */
  align-items: center;  
  padding: auto;    /* 垂直方向に中央揃え */
  margin: auto;
  height: 100%;             /* tdの高さを100%にしてアイコンが中央に揃うように */
}

.table-icon-center a {
  display: flex;           /* aタグの中もflexにしてアイコンを中央揃え */
  align-items: center;  
  justify-content: center;
  padding: auto;    /* 垂直方向に中央揃え */
   /* 垂直方向にアイコンを中央揃え */
  width: 100%;
}


.subtitle {
  font-size: 1rem;
  color: #666; /* 必要に応じて色を調整 */
  margin-left: 10px; /* タイトルとの間隔を調整 */
  font-weight: normal; /* 必要に応じてスタイルを変更 */
}


.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.pagination .page-item {
  list-style: none;
}

.pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: background-color 0.6s, color 0.6s;
}

.pagination .page-item.disabled .page-link {
  background: none;
  border: none;
  width: auto;
  padding: 0 auto;
  cursor: default;
}

.pagination .page-item.active .page-link {
  background-color: #0056B3;
  color: white;
  border: 1px solid #0056B3;
}

@media (max-width: 600px) {
  .pagination .page-item a.page-link {
      width: 28px;
      height: 28px;
      font-size: 12px;
  }
}

.pagination .page-link .sr-only {
  display: none;
}

.pagination ul{
  padding: 0;
}

.pagination .page-item a.page-link:hover:not(.active):not(.disabled) {
  background-color: #0056B3;
  color: #ffffff;
}

.search-form {
  display: flex;
  margin-bottom: 20px;
}

.search-input {
  max-width: 400px;
  width: calc(100% - 90px);
  margin-right: 20px;
}
.width-70{
  width: 70px;
}