.bg-blue {
    background-color: #003991;
    color: #fff;
}

.bg-blue-bar,
.bg-blue-bar-l,
.bg-blue-bar-r {
    background-color: #003991;
    color: #fff;

    display: flex;
    align-items: center;

    min-height: 40px;
    padding: 8px 12px;

    position: relative;
    z-index: 1;
}

/* 左角丸 */
.bg-blue-bar-l {
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
}

/* 右角丸 */
.bg-blue-bar-r {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}

/* スマホ時：角丸をなくす（左右が縦に並ぶため） */
@media (max-width: 991px) {
    .bg-blue-bar-l,
    .bg-blue-bar-r {
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        /* Bootstrap の row の -15px を打ち消す */
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* 行間を極限まで詰める設定 */
.custom-line-height {
  line-height: 1.1;
}

.admin_title-text {
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}

/* 1行目の微調整 */
.title-text {
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  margin-bottom: 1px; /* 下の行との隙間 */
}

/* 2行目の「温かみ」を出す設定 */
.warm-text {
  font-size: 0.6rem;
  letter-spacing: 0.02rem;
  /* 丸ゴシック体を最優先にし、柔らかい印象を与える */
  font-family: 
    "Hiragino Maru Gothic ProN", 
    "Sawarabi Gothic", 
    "Meiryo", 
    "Yu Gothic", 
    "MS PGothic", 
    sans-serif;
}

.h_title {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 中身を上下中央に */
  align-items: flex-start;
  
  height: auto; 
  min-height: 100px; 
  padding: 0; /* ← これ！上下に遊びを作ると、折り返し時に綺麗に伸びます */
  margin-left: 30px;
}

/* スマホ（幅 576px 以下）のときだけ左寄せ */
@media (max-width: 576px) {
  .h_title {
    margin-left: 10px; /* ← 好きな値に調整 */
  }
}

.h_title img {
  margin-top: 10px;
  /* 画像そのものに余白がある場合は display: block; を入れると安定します */
  display: block;
}

.adrre {
  color: #333333;
  font-family: 
    "Hiragino Maru Gothic ProN", 
    "Sawarabi Gothic", 
    "Meiryo", 
    "Yu Gothic", 
    "MS PGothic", 
    sans-serif;
  font: 12px/16px;
  font-weight: bold;
  margin-top: 0.7em; 
  margin-bottom: 0;
}

.mastdonframe {
    width: 100%;
    height: 100px;
    padding: 0 !important;
    margin: 0 !important;
}


.navbar-nav {
    flex-wrap: wrap;
}


/* ▼ トグルボタン全体の調整 */
.navbar-toggler {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* ← 中央寄せが安定 */
    padding: 0 !important;   /* ← 余白を完全にゼロに */
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

/* ▼ 三本線アイコン（濃い白・余白最小） */
.navbar-toggler .navbar-toggler-icon {
    width: 22px;   /* ← 必要ならさらに小さくできる */
    height: 22px;
    background-size: 22px 22px; /* ← SVGの描画範囲も縮める */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ▼ メニュー文字（小さく・距離最小） */
.navbar-toggler .menu-label {
    font-size: 9px;
    line-height: 1;
    margin-top: 2px; /* ← ここもさらに詰める */
    color: #fff;
}


/* ▼ × アイコン（初期は非表示） */
.navbar-toggler .close-icon {
    display: none;
    width: 22px;      /* 三本線と同じ幅 */
    height: 22px;     /* 三本線と同じ高さ */
    font-size: 22px;  /* ボックスに収まる大きさ */
    color: #fff;
    line-height: 22px; /* ボックス中央に配置 */
    text-align: center;
}

/* ▼ メニューが開いたとき（collapsed が外れたとき） */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    display: none; /* 三本線だけ消す */
}

.navbar-toggler:not(.collapsed) .close-icon {
    display: block; /* × を表示 */
}


/* Bootstrap nav に合わせて ul を上書き */
.custom-nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

/* 各ボタン */
.custom-nav .nav-link {
  position: relative;
  width: 150px;
  height: 25px;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}


/* メラメラ背景 */
.custom-nav .nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    to left,
    #003991 34%,
    #0B9BF2 34%,
    #0045B0 66%,
    #003991 66%
  );
  z-index: -1;
  transition: 0.6s;
}

.custom-nav .nav-link:hover {
  color: #FFEC93;
}

.custom-nav .nav-link:hover::after {
  right: -200%;
}

/* スマホ時：高さが自動で伸びるように */
@media (max-width: 768px) {
  .custom-nav .nav-link {
    width: 100%;
    height: auto;
    padding: 12px 10px;
  }
}