@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
/* reset css */
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{font-feature-settings:"palt" 1;overflow-wrap: anywhere;word-break: normal;line-break: strict;}picture,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit}img{max-width:100%;height:auto}nav ul{list-style-type:none}:where(:any-link) {color:currentColor;text-decoration-skip-ink:auto;text-decoration-color:color-mix(in srgb, currentcolor 30%, transparent);text-underline-offset: 0.2em;}

:root {

    /* 変更したい箇所のカラーコードを書き換えてください*/

    /*======================================
        文字色
    ======================================*/

    /*ベースの文字色*/
    --text-color: #333333;

    /*サイト下部メニューの文字色*/
    --link-color: #333333;

    /*メニューにカーソルを当てたときの文字色*/
    --link-color-hover: #86B6E8;

    /*リンクの文字色*/
    --link-text-color: #86B6E8;

    /*サイトタイトルの文字色*/
    --h1-color: #86B6E8;

    /*各見出しの文字色*/
    --h-color : #CCC2C2;

    /*フッターの文字色*/
    --footer-text-color: #ffffff;


    /*======================================
        背景色、ボタンの色など
    ======================================*/

    /*サイト全体の背景色*/
    --bg-color: #EEEEED;

    /*フッターの色*/
    --footer-color: #86B6E8;

    /*ボタン 枠の色*/
    --button-border-color: #333333;

    /*ボタン 背景色*/
    --button-bg-color: transparent;

    /*ボタン 文字色*/
    --button-text-color: #333333;

    /*ボタン 選択中の枠の色*/
    --button-border-color-active: #333333;

    /*ボタン 選択中の背景色*/
    --button-bg-color-active: #86B6E8;

    /*ボタン 選択中の文字色*/
    --button-text-color-active: #ffffff;

}