@charset "UTF-8";

/* =========================================
   基本設定 & フォント
   ========================================= */
body {
    font-family: "Zen Maru Gothic", sans-serif;
    /* ポップな背景パターン (水玉) */
    background-color: #F0FFF4;
    background-image:
        radial-gradient(#32D74B 1.5px, transparent 1.5px),
        radial-gradient(#32D74B 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;

    /* 文字の読みやすさを確保するために背景を少し白くブレンド */
    background-blend-mode: overlay;
}

/* 英語/数字用フォント */
.font-english, .font-mono {
    font-family: "Fredoka", "M PLUS Rounded 1c", sans-serif;
    letter-spacing: 0.05em;
}

button, input, select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 99px;
    border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover {
    background: #FF69B4;
}


/* =========================================
   ★2026-08 日本語の改行の直し
   -----------------------------------------
   これまで、見出しが単語の途中で折り返していました。
       本格設備で「跳    ／    ぶ」楽しさを！
       地域唯一！「競技用トラン    ／    ポリン」
   端末のせいではなく、指定を足せば直せる問題です。

   ・word-break: auto-phrase … 単語のかたまりで折り返す
       ※Chrome と Edge で効きます。iPhoneのSafariでは
         今までどおりの折り返しになります（悪くはなりません）。
         特に目立つ見出しは、HTML側で「ここでは切らない」指定も入れてあります。
   ・line-break: strict … 小さい「っ」や長音「ー」が行頭に来ないようにする
   ・text-wrap: balance … 見出しの各行の長さをそろえる

   本文（p）には auto-phrase を入れていません。
   実際に試したところ、長い文章では行末がガタガタになって
   かえって読みにくくなったためです。
   ========================================= */
h1, h2, h3, h4, h5, h6,
.kb-phrase {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: balance;
}

p, li, dd, figcaption, label, button, .btn {
    line-break: strict;
    text-wrap: pretty;
}

/* HTMLの中で「ここでは切らないでほしい」ひとかたまりを囲むための印。
   Safariを含め、どの端末でも効きます。 */
.kb-nw {
    display: inline-block;
}