/*
Theme Name: Summary Board Service
Theme URI: https://example.com
Author: サマリーボード
Author URI: https://example.com
Description: 「Summary Board Service」
Version: 1.0
Text Domain: summary-board
*/

#wpadminbar {
  z-index: 9998; /* 管理バーの重なり順を調整 */
  
}

:root {
  --primary: #4472C4;
}

.bg-primary {
  background-color: var(--primary);
}
.btn-primary {
  background-color: var(--primary);
}
.text-primary {
  color: var(--primary);
}
/* Bodyのフォントなどを変更する例 */
body {
  font-family: "Noto sans JP", sans-serif;
  line-height: 1.6;
  color:#333;
}

/* h1など見出しタグのカスタマイズ例 */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.05em;
}

/*------------------------------------------
  カードデザイン（Bootstrap .card）の調整
-------------------------------------------*/

/* 
  背景色が .bg-primary のカードを微調整 
  （例：ベースのブルーを変更したい・形状を変えたい等）
*/
.card.bg-primary {
  background-color: #4472C4 !important; /* 独自カラー */
  border: none !important;
  border-radius: 8px !important;
}

/* カード内テキストの色を白に固定する例 */
.card.bg-primary .card-title,
.card.bg-primary .card-subtitle,
.card.bg-primary .card-date {
  color: #ffffff !important;
}

/*
  カードの余白や文字サイズを微調整する例
  .card-title, .card-subtitle, .card-date をまとめてサイズ変更してもOK
*/
.card-title {
  font-size: 1.25rem; /* 例えば h5（1.25rem）の大きさ */
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.card-subtitle {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.card-date {
  font-size: 0.875rem; /* small (14px相当) */
}

/*------------------------------------------
  レスポンシブでの日付並び調整
-------------------------------------------*/
/* 
  すでに .col-12 .col-md-6 で切り替わっているため
  追加で特に独自のスタイルが不要な場合は省略可。
  もっと隙間を空けたい場合など：
*/
@media (min-width: 768px) {
  .card-dates .col-md-6 {
    padding-right: 2rem; /* 任意 */
  }
}

/*------------------------------------------
  FAQリスト
-------------------------------------------*/
.faq-list a {
  color: #0073aa;
  text-decoration: none;
}

.faq-list a:hover {
  text-decoration: underline;
}

/*------------------------------------------
  Notice部分（.notice）をBootstrapで再現するなら
  例えば .bg-light と .border でデザイン済
  追加で細かく調整したい場合：
-------------------------------------------*/
.notice {
  background-color: #f9f9f9; /* Bootstrapの .bg-light でもOK */
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.notice-title {
  font-size: 1.125rem; /* 18px相当 */
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.notice-description {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.notice-link a {
  color: #0073aa;
  text-decoration: none;
}
.notice-link a:hover {
  text-decoration: underline;
}

/*------------------------------------------
  フッター
-------------------------------------------*/
footer.bg-light {
  border-top: 1px solid #ccc; /* 上ライン追加など */
}
footer a {
  color: #0073aa;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}


/* infoマーク */
.position-relative {
  display: inline-block;
}

.info-icon {
  position: absolute;
  top: -12px; /* 上に移動（小型化に合わせて微調整） */
  right: -5px; /* 右に移動 */
  width: 16px; /* 小さめのサイズ */
  height: 16px;
  font-size: 0; /* FontAwesomeの"i"を非表示 */
  background: #1abc9c; /* 緑系の背景 */
  border-radius: 50%;
  display: inline-block;
}

.info-icon::before {
  content: ""; /* アイコン文字を消す */
}

.top-info {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
}

.top-info .info-icon {
  top: -9px;
  right: -3px;
  width: 10px;
  height: 10px;
}

.top-info .fa-circle-info {
  font-size: 0.55rem;
}

.bg-orange {
  background-color: #ee7800;
}

.tooltip-inner {
  max-width: 400px;
  white-space: pre-wrap;
  background-color: #555555;
  text-align: left; /* ツールチップ内テキストを左寄せにする */
}

.tooltip {
  pointer-events: none;
}

.info-color{
  color: #1abc9c;
}