/* 勝ち艇ラボ 共通ヘッダー・フッター（ブログデザイン, 2026-10-08）
   旧ページ（成績・カスタム分析など）にも差し込むので、すべて .kl- で始まるクラスに閉じる。
   旧ページ側の * { margin:0 } などに負けないよう、必要な値はここで明示する。 */

.kl-chrome, .kl-chrome *, .kl-chrome *::before, .kl-chrome *::after { box-sizing: border-box; }
.kl-chrome {
  font-family: 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  color: #222222; line-height: 1.6; text-align: left; letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}
.kl-chrome a { text-decoration: none; }
.kl-chrome ul { list-style: none; margin: 0; padding: 0; }
.kl-chrome li { margin: 0; padding: 0; }
.kl-wrap { max-width: 1140px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* 上部の細い帯 */
.kl-util { border-bottom: 1px solid #E3E3E3; background: #FFFFFF; font-size: 13px; }
.kl-util .kl-wrap { display: flex; justify-content: flex-end; gap: 20px; padding-top: 6px; padding-bottom: 6px; }
.kl-util a { color: #616161; }
.kl-util a:hover { color: #111111; text-decoration: underline; }
.kl-util a[aria-current] { color: #111111; font-weight: 700; }

/* ロゴと検索 */
.kl-mast { background: #FFFFFF; position: relative; }
.kl-mast > .kl-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 16px; padding-bottom: 16px; }
.kl-brand { display: flex; align-items: center; gap: 16px; }
.kl-brand img { height: 60px; width: auto; display: block; max-width: none; }
.kl-tagline { font-size: 13px; color: #616161; line-height: 1.6; border-left: 1px solid #D0D0D0; padding-left: 16px; }
.kl-search { display: flex; margin: 0; }
.kl-search input {
  width: 240px; height: 44px; margin: 0; padding: 0 12px; border: 1px solid #BDBDBD; border-right: none;
  border-radius: 2px 0 0 2px; font: inherit; font-size: 15px; color: #222222; background: #FFFFFF;
}
.kl-search button {
  height: 44px; margin: 0; padding: 0 18px; border: none; border-radius: 0 2px 2px 0;
  background: #1B2A47; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.kl-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* スマホ用の検索・メニューボタン */
.kl-mobile-actions { display: none; align-items: center; }
.kl-iconbtn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: #1B2A47; background: transparent; border: none; cursor: pointer; list-style: none;
}
.kl-iconbtn::-webkit-details-marker { display: none; }
.kl-menu > summary { list-style: none; }
.kl-menu > summary::-webkit-details-marker { display: none; }
.kl-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 80; background: #FFFFFF;
  border-bottom: 1px solid #BDBDBD; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); padding: 4px 16px 20px;
}
.kl-menu-label { padding: 16px 0 4px; font-size: 13px; font-weight: 700; color: #616161; }
.kl-menu-list { border-top: 3px solid #222222; }
.kl-menu-list li { border-bottom: 1px solid #E3E3E3; }
.kl-menu-list a { display: block; padding: 11px 0; color: #111111; font-size: 16px; }
.kl-menu-list .kl-dd-desc { font-size: 13px; }
.kl-menu-top { border-top: none; }
.kl-menu-sub { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; }
.kl-menu-sub a { color: #424242; text-decoration: underline; }

/* 紺のメニュー帯 */
.kl-nav { background: #1B2A47; position: relative; z-index: 50; }
.kl-nav > .kl-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.kl-nav-main { display: flex; flex-wrap: wrap; }
.kl-navlink, .kl-dd > summary {
  display: flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 700; font-size: 15px;
  padding: 13px 18px 9px; border-bottom: 4px solid transparent; cursor: pointer; list-style: none;
}
.kl-dd > summary::-webkit-details-marker { display: none; }
.kl-navlink:hover, .kl-dd > summary:hover { background: #24345A; color: #FFFFFF; }
.kl-navlink.is-current, .kl-dd.is-current > summary { border-bottom-color: #5DBB94; }
.kl-dd { position: relative; }
.kl-dd[open] > summary svg { transform: rotate(180deg); }
.kl-dd-panel {
  position: absolute; top: 100%; left: 0; z-index: 60; width: 300px; background: #FFFFFF;
  border: 1px solid #BDBDBD; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.kl-dd-right .kl-dd-panel { left: auto; right: 0; }
.kl-dd-panel li { border-bottom: 1px solid #E3E3E3; }
.kl-dd-panel li:last-child { border-bottom: none; }
.kl-dd-panel a { display: block; padding: 11px 18px; color: #111111; line-height: 1.5; }
.kl-dd-panel a:hover, .kl-dd-panel a[aria-current] { background: #F3F6F4; }
.kl-dd-panel a[aria-current] .kl-dd-name { color: #1E6B4E; }
.kl-dd-name { display: block; font-weight: 700; font-size: 15px; }
.kl-dd-desc { display: block; font-size: 13px; color: #616161; font-weight: 400; }
.kl-nav-tools > summary { color: #D6DCE6; font-weight: 400; font-size: 14px; padding-right: 0; }

/* フッター（旧ページの footer 要素指定に巻き込まれないよう div で組む） */
.kl-footer { background: #1B2A47; color: #D6DCE6; font-size: 14px; margin: 0; }
.kl-footer-top { display: flex; flex-wrap: wrap; gap: 28px 64px; padding-top: 40px; padding-bottom: 28px; }
.kl-footer-about { flex: 1 1 300px; }
.kl-footer-name { font-weight: 700; font-size: 17px; color: #FFFFFF; }
.kl-footer p { margin: 8px 0 0; line-height: 1.8; color: #D6DCE6; font-size: 14px; }
.kl-footer ul { display: flex; flex-direction: column; gap: 6px; }
.kl-footer a { color: #FFFFFF; }
.kl-footer a:hover { text-decoration: underline; }
.kl-footer-bottom { border-top: 1px solid #34436A; padding-top: 18px; padding-bottom: 32px; }
.kl-footer-bottom p { margin: 0 0 6px; font-size: 13px; }

@media (max-width: 760px) {
  .kl-util, .kl-tagline, .kl-search { display: none; }
  .kl-mast > .kl-wrap { flex-wrap: nowrap; padding: 8px 6px 8px 14px; }
  .kl-brand img { height: 40px; }
  .kl-mobile-actions { display: flex; }
  .kl-nav > .kl-wrap { padding-left: 6px; padding-right: 6px; }
  .kl-navlink, .kl-dd > summary { font-size: 14px; padding: 11px 12px 7px; }
  .kl-nav-tools { display: none; }
  .kl-dd-panel { width: 260px; }
}