@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&display=swap');


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

    --bg-color: #ffffff;           /*主にテンプレートの背景色*/
    --bg-inverse-color: #1A1A1A;   /*本文の文字色（上のカラーの「対」として使う色）*/
    
    --primary-color: #112A46;       /*ヘッダー、見出し、フッター背景（メインカラー）*/
    --primary-inverse-color: #ffffff;  /*上のカラーの「対」として使う色*/

    --light-color: #F5F7FA;         /*選ばれる理由などの背景色（淡いカラー）*/
    --light-inverse-color: #1A1A1A;    /*上の淡いカラーの「対」として使う色*/

    --accent-color: #B89A62;        /*お問い合わせボタンの背景（アクセントカラー）*/
    --accent-inverse-color: #ffffff;   /*上のカラーの「対」として使う色*/

    --content-space-l: 10px;  /*主に左右の余白の一括管理用。モバイルファーストとしてスマホ時の狭い余白を基本設定に。*/
    --content-space-s: 2rem;  /*headerやfooter、２カラム以上のレイアウトで主に使います*/

    --border-color: #4A6076;   /*線の色、控えめなテキスト*/

    --base-font: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;  /*本文用フォント指定*/
    --accent-font: "Crimson Text", serif;  /*アクセント・英字用フォント指定*/
    --tel-font: "Roboto", sans-serif;      /*電話番号用フォント指定*/
    --desc-font: "Noto Serif JP", serif;   /*見出し下の説明文用フォント指定*/

}

    /*画面幅501px以上の追加指定（モバイルファーストの上書き指定）*/
    @media (min-width: 501px) {

    :root {
        --content-space-l: 5vw;    /*余白の一括管理用。大きな端末で余白を広くする。画面幅100% = 100vwです。*/
    }

    }/*追加指定ここまで*/


/*暗い背景で使う場合のみ、枠線の色を白っぽく。（※rootで指定している々を変更する場合、ここの調整が必要になる場合もあります。）*/
.bg1-parts,
.bg1-primary-parts,
.bg1-accent-parts {
    --border-color: rgba(255,255,255,0.22);
}