/* =====================================
   グローバルメニュー
===================================== */

/* 通常時 */
.kawako-global-menu .nav-link {
  color: #8f61dc !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* 現在のページと、その親タブ */
.kawako-global-menu .nav-link.active,
.kawako-global-menu .nav-item.active > .nav-link,
.kawako-global-menu .nav-link[aria-current="page"] {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
}

/* ほかのタブにカーソルがある間は、現在地の背景色を消す */
.kawako-global-menu:has(.nav-link:hover) .nav-link.active,
.kawako-global-menu:has(.nav-link:hover) .nav-item.active > .nav-link,
.kawako-global-menu:has(.nav-link:hover) .nav-link[aria-current="page"] {
  color: #8f61dc !important;
  background-color: transparent !important;
}

/* カーソルが当たっているタブだけに色を付ける */
.kawako-global-menu .nav-link:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-link.active:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-item.active > .nav-link:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-link[aria-current="page"]:hover {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* キーボード操作時 */
.kawako-global-menu .nav-link:focus-visible {
  outline: 2px solid #8f6bb3;
  outline-offset: -2px;
}

/* 下に開くメニュー */
.kawako-global-menu .dropdown-item:hover,
.kawako-global-menu .dropdown-item:focus {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
  text-decoration: none !important;
}
/* =====================================
   川高日記「もっと見る」ボタン
===================================== */

.kawako-diary-more {
  margin: 12px 0 24px;
  text-align: center;
}

.kawako-diary-more a {
  display: inline-block;
  padding: 9px 24px;
  color: #6f4aaa !important;
  font-weight: 700;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 1px solid #8f6bb3;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.kawako-diary-more a:hover,
.kawako-diary-more a:focus {
  color: #ffffff !important;
  background-color: #6f4aaa;
  text-decoration: none !important;
}
/* =====================================
   共通見出しデザイン
===================================== */

/* h2：グラデーション実線 */
h2 {
  position: relative;
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    #9370db,
    rgba(147, 112, 219, 0)
  );
  border-radius: 4px;
}

/* h3：グラデーション点線 */
h3 {
  position: relative;
  padding-bottom: 8px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(147, 112, 219, 0.7),
    rgba(147, 112, 219, 0.7) 8px,
    rgba(147, 112, 219, 0) 8px,
    rgba(147, 112, 219, 0) 16px
  );
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  border-radius: 2px;
}

/* h4：控えめなグラデーション点線 */
h4 {
  position: relative;
  padding-bottom: 6px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(147, 112, 219, 0.5) 0,
    rgba(147, 112, 219, 0.5) 4px,
    rgba(147, 112, 219, 0) 6px,
    rgba(147, 112, 219, 0) 12px
  );
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  border-radius: 2px;
}

/* h5：ドット風グラデーションライン */
h5 {
  position: relative;
  padding-bottom: 4px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #dda0dd,
    #dda0dd 2px,
    rgba(221, 160, 221, 0) 2px,
    rgba(221, 160, 221, 0) 4px
  );
}

/* h6：控えめなドットライン */
h6 {
  position: relative;
  padding-bottom: 3px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    #d8bfd8,
    #d8bfd8 1px,
    rgba(216, 191, 216, 0) 1px,
    rgba(216, 191, 216, 0) 3px
  );
}