/*
Theme Name: KEIRIN FACT Child
Theme URI: https://j-k-i.net/
Description: KEIRIN FACT専用の子テーマ。よく触る場所を先頭にまとめた、分かりやすさ優先版です。
Author: KEIRIN FACT
Template: keirin-fact
Version: 3.0.1
Text Domain: keirin-fact-child
*/


/* =========================================================
   ★ KEIRIN FACT｜ここだけ変更すればOK
   分かりやすさ優先で !important を使用しています。
   基本的には下の数値だけ変更してください。
========================================================= */


/* =========================================================
   01. ヘッダー
========================================================= */

/* ヘッダーの高さ */
.kf-headrow {
  min-height: 50px !important;
}

/* ヘッダーロゴの大きさ */
.kf-brand img {
  width: 230px !important;
  height: auto !important;
  max-height: 96px !important;
}

/* ヘッダーロゴを中央 */
.kf-headrow {
  justify-content: center !important;
}


/* =========================================================
   02. グローバルナビ
========================================================= */

/* ナビ全体を中央 */
.kf-nav {
  justify-content: center !important;
}

/* ナビの文字サイズ・余白 */
.kf-nav a {
  font-size: 15px !important;
  padding: 17px 25px !important;
  font-weight: 700 !important;
}


/* =========================================================
   03. TOPタイトル
========================================================= */

/* TOPメインタイトル */
.kf-hero h1 {
  font-size: clamp(32px, 3.2vw, 46px) !important;
  line-height: 1.2 !important;
}

/* TOP説明文 */
.kf-main .kf-hero p {
  font-size: clamp(15px, 0.25vw + 14px, 16px) !important;
  line-height: 1.6 !important;
}


/* =========================================================
   04. TOPメイン画像
========================================================= */

/* 画像の高さ・表示位置 */
.kf-hero-visual {
  height: 430px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/*
画像位置を変える例

左寄せ   → background-position: left center !important;
中央     → background-position: center center !important;
右寄せ   → background-position: right center !important;
上寄せ   → background-position: center top !important;
*/


/* =========================================================
   05. TOP集計カード
========================================================= */

.kf-stats {
  margin-top: -26px !important;
}


/* =========================================================
   06. ボタン
========================================================= */

.kf-btn,
.kf-hero-actions a {
  font-size: 15px !important;
}


/* =========================================================
   07. セクション見出し
========================================================= */

.kf-section-title,
.kf-main h2 {
  font-size: 30px !important;
  line-height: 1.4 !important;
}

.kf-main h3 {
  font-size: 22px !important;
}


/* =========================================================
   08. 本文
========================================================= */

.kf-main p {
  font-size: 16px !important;
  line-height: 1.9 !important;
}


/* =========================================================
   09. ランキング
========================================================= */

.kf-ranking-title {
  font-size: 20px !important;
}

.kf-rank-number {
  font-size: 30px !important;
}


/* =========================================================
   10. フッター
========================================================= */

/* フッター全体 */
.kf-footer {
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}

/* フッター文字 */
.kf-footer,
.kf-footer p,
.kf-footer a {
  font-size: 14px !important;
}

/* フッターロゴ用
   ※親テーマ側で画像ロゴを使う場合に有効 */
.kf-footer-brand img {
  width: 260px !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   11. スマホ表示
========================================================= */

@media (max-width: 767px) {

  /* ヘッダー高さ */
  .kf-headrow {
    min-height: 72px !important;
  }

  /* ヘッダーロゴ */
  .kf-brand img {
    width: 275px !important;
    max-height: 52px !important;
  }

  /* グローバルナビ */
  .kf-nav a {
    font-size: 13px !important;
    padding: 15px 19px !important;
  }

  /* TOPタイトル */
  .kf-hero h1 {
    font-size: clamp(28px, 7.2vw, 35px) !important;
    line-height: 1.2 !important;
  }

  /* TOP説明文 */
  .kf-hero p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.9 !important;
  }

  /* TOPメイン画像 */
  .kf-hero-visual {
    height: 250px !important;
    background-position: center center !important;
  }

  /* TOP集計カード */
  .kf-stats {
    margin-top: -18px !important;
  }

  /* H2 */
  .kf-section-title,
  .kf-main h2 {
    font-size: 25px !important;
  }

  /* 本文 */
  .kf-main p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.9 !important;
  }

  /* フッターロゴ */
  .kf-footer-brand img {
    width: 220px !important;
  }
}


/* =========================================================
   12. 自由追加エリア
   上にない変更はここへ
========================================================= */

/*
ここに追加してください。
*/

/* =========================================================
   KEIRIN FACT｜TOPに戻る 追従ボタン
========================================================= */

.kf-back-to-top {
    position: fixed !important;
    right: clamp(18px, 2.5vw, 32px) !important;
    bottom: clamp(18px, 2.5vw, 30px) !important;
    z-index: 999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: #172235 !important;

    border: 1px solid #172235 !important;
    border-radius: 4px !important;

    box-shadow: 0 4px 14px rgba(23, 34, 53, .16) !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        background-color .2s ease !important;
}


/* 表示状態 */

.kf-back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}


/* 矢印 */

.kf-back-to-top__arrow {
    display: block !important;

    margin: 0 0 1px !important;

    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}


/* TOP */

.kf-back-to-top__text {
    display: block !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}


/* hover */

.kf-back-to-top:hover {
    background: #e54832 !important;
    border-color: #e54832 !important;
}


/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 600px) {

    .kf-back-to-top {
        right: 14px !important;
        bottom: 16px !important;

        width: 48px !important;
        height: 48px !important;
    }

    .kf-back-to-top__arrow {
        font-size: 15px !important;
    }

    .kf-back-to-top__text {
        font-size: 9px !important;
    }
}

/* =========================================================
   KEIRIN FACT｜競輪の基礎・テーマ案内
========================================================= */

.kf-guide-topics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin-top: 34px !important;
}

.kf-guide-topic {
  position: relative !important;
  min-height: 150px !important;
  padding: 28px 25px 25px !important;

  background: #ffffff !important;
  border: 1px solid #e4e6e8 !important;
  border-top: 3px solid #e54832 !important;

  overflow: hidden !important;
}

/* 01 / 02 / 03 */

.kf-guide-topic-num {
  position: absolute !important;
  top: 10px !important;
  right: 16px !important;

  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;

  color: #f0f1f3 !important;

  pointer-events: none !important;
}

/* テキスト */

.kf-guide-topic-body {
  position: relative !important;
  z-index: 1 !important;
}

.kf-guide-topic-body b {
  display: block !important;

  margin: 0 0 12px !important;

  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;

  color: #171717 !important;
}

.kf-guide-topic-body span {
  display: block !important;

  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;

  color: #666666 !important;
}


/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 767px) {

  .kf-guide-topics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 26px !important;
  }

  .kf-guide-topic {
    min-height: auto !important;
    padding: 22px 20px !important;
  }

  .kf-guide-topic-num {
    top: 12px !important;
    right: 16px !important;

    font-size: 36px !important;
  }

  .kf-guide-topic-body b {
    margin-bottom: 7px !important;
    font-size: 17px !important;
  }

  .kf-guide-topic-body span {
    padding-right: 35px !important;

    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

//* =========================================================
   競輪の基礎｜カード本文の改行調整
========================================================= */

.kf-guide-topic {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.kf-guide-topic-body span {
  font-size: 13px !important;
  line-height: 1.8 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {

  .kf-guide-topic-body span {
    white-space: normal !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

}