@charset "UTF-8"; /* CSS INFORMATION -==================================================== File name : base.css Description : フォント・カラー・背景変更用css ===================================================================== */ /* ===================================================================== フォント・カラー設定 【グーグルフォント設定】 ※游ゴシックなどのシステムフォントでは下記設定は不要です。 1.「https://fonts.google.com/」からフォントを選択 2.「Get Font」をクリック 3.「Get embed code」をクリック ∟ 4.「Embed code in the of your html」を確認。 ∟ 5. 3行目の「」の●●●のURLを24行目の@import url()に入力する ∟ 6.「CSS class for a variable style」を確認。 ∟ 7.「font-family: ●●●,●●●」の●●●をベースフォントに入力する /* ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); :root { /* ベースフォント */ --font-base: 'Noto Sans JP', sans-serif; /* テキスト：ベースカラー */ --color-base: #000000; /* アクセントカラー1 */ --color-accent1: #00a3da; /* アクセントカラー2 */ --color-accent2: #ff1212; /* アクセントカラー3 */ --color-accent3: #ffea00; /* 背景色：MV */ --color-bg1: #a27768; /* 背景色：コンテンツ */ --color-bg2: #febb8e; /* 背景色：コンテンツインナー、ページトップ */ --color-bg3: #ffffff; /* SNSアイコン */ --color-sns: #ffffff; } /* 直接色コード等を変更したいときは変数を書き換えてください。 */ /* ===================================================================== 共通 ======================================================================*/ .wrapper { font-family: var(--font-base); font-weight: 400; color: var(--color-base); background-color: var(--color-bg2); /* 画像に変更したい場合は↑のbackground-colorを削除し、↓の４行を復活してください */ /* background-image: url(../images/bg_pattern.jpg); background-size: 100% auto; background-repeat: repeat; background-position: top center; */ } .wrapper a { color: var(--color-base); } .main .inner { background-color: var(--color-bg3); } .sec_ttl::before { border-color: var(--color-accent1); } /* ===================================================================== header ======================================================================*/ .header_top { background-color: var(--color-bg1); /* 画像に変更したい場合は↑のbackground-colorを削除し、↓の４行を復活してください */ /* background-image: url(../images/bg_pattern.jpg); background-size: 100% auto; background-repeat: repeat; background-position: top center; */ } /* ===================================================================== footer ======================================================================*/ .pagetop a { background-color: var(--color-bg3); } .pagetop a::after { border-color: var(--color-base); } /* ===================================================================== info ======================================================================*/ .catchcopy span { color: var(--color-accent2); background-color: var(--color-accent3); } .info_content h3, .info_content h4 { color: var(--color-accent1); } .info_content h5 span { background-color: var(--color-accent3); } .info_content p strong { color: var(--color-accent2); } .info_content p a { color: var(--color-accent1); } /* ===================================================================== cast ======================================================================*/ .cast_list li dl dt { color: var(--color-accent1); } .cast_item dl dt { color: var(--color-bg3); background-color: var(--color-accent1); } /* ===================================================================== sns ======================================================================*/ .sns_list li a { color: var(--color-sns); background-color: var(--color-accent1); } .sns_list li a svg { fill: var(--color-sns); }