@charset "UTF-8";
/*
Template:easel
Theme Name:Palette(EASEL Child-Theme)
Theme URI:https://note.com/owari5656/n/n09e0fbd36262
Description: カラー変数での色調整に適したEASELの子テーマ。EASEL公式のベースデザインのCSSを元に制作しました。
Version: 1.0.3
Author: fanmade
*/

/* -------------------- ▼ CSS変数設定 ▼ -------------------- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
:root {
    --white: white;
    --silver_rgb: 192,192,192; /* ←画像hover用。rgba(var(--silver_rgb),任意の透明度)という形で指定 */
    --transparent: transparent;
    --palette-color-text: #f5f5f5;
	--palette-color-bg: #dcdcdc;
	--palette-color-main: #f01d4f; /* ←a(基本)。濃い色推奨 */
	--palette-color-link: #d10e3c; /* ←a:hover(基本) */
	--palette-color-accent: #ffffff; /* ←部分的に明るくしたい箇所(footer-widgetなど) */
    --palette-color-simple: #f5f5f5; /* ←footer-text,border,btnなど */
    --font-icon: 'Font Awesome 6 Free';
    --font-weight: 400;
    --font-weight_bold: 700;
    --font-weight_heavy: 900;
}
/* -------------------- ▲ CSS変数設定 ▲ -------------------- */

/* 基本(参考:ベースデザイン『ブルー&ホワイト』)
-------------------------------------------- */
body {
    color: var(--palette-color-text);
}
body, .header, header nav {
    background-color: var(--palette-color-bg);
}
#logo a {
    color: var(--palette-color-main);
}
#logo a:hover {
    color: var(--palette-color-link);
}
.header .nav li a:before {
    background: var(--palette-color-main);
}
.header .nav li a {
    color: var(--palette-color-text);
}
.header .nav li a:hover {
    color: var(--palette-color-link);
}
.nav li a {
    color: var(--palette-color-main);
}
.nav li a:hover {
    color: var(--palette-color-link);
}
header.article-header.entry-header {
    border-color: var(--palette-color-simple);
}
.post-date {
    color: var(--palette-color-main);
}
.update .wrap .byline.vcard {
    color: var(--palette-color-main);
}
.news_list {
    border-color: var(--palette-color-simple);
}
.news_list li a span.news_title {
	color: var(--palette-color-text);
}
footer.footer {
    background-color: var(--transparent);
    border-top: 1px solid var(--palette-color-simple);
}
footer.footer #footer_widget {
    background-color: var(--palette-color-accent);
    border-bottom: 1px solid var(--palette-color-simple);
}
footer.footer #footer_widget ul li a {
    color: var(--palette-color-text);
}
footer.footer #footer_widget ul li a:hover {
    color: var(--palette-color-link);
}
footer.footer #inner-footer {
    color: var(--palette-color-simple);
}
footer.footer #inner-footer ul li a {
    color: var(--palette-color-main);
    opacity: initial;
}
footer.footer #inner-footer ul li a:hover {
    color: var(--palette-color-link);
}
footer.footer #inner-footer .copyright {
    color: var(--palette-color-simple);
}
footer.footer #inner-footer .copyright a {
    color: var(--palette-color-main);
}
a, a:visited {
    color: var(--palette-color-main);
}
a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: var(--palette-color-link);
}
.pagination li {
    border-color: var(--palette-color-simple);
}
.pagination a {
    color: var(--palette-color-simple);
}
.pagination li:hover, .pagination a:hover, .pagination a:focus {
    background-color: var(--palette-color-link);
    color: var(--white);
    border-color: var(--palette-color-link);
}
.pagination li .current, .pagination .current {
    color: var(--white);
    background: var(--palette-color-main);
}
.pagination.single a[rel=prev], .pagination.single a[rel=next] {
    color: var(--palette-color-main);
}
.pagination.single a[rel=prev]:hover, .pagination.single a[rel=prev]:focus, .pagination.single a[rel=next]:hover, .pagination.single a[rel=next]:focus {
    background: var(--transparent);
}
/* end .bones_page_navi */
span.category a:hover {
    color: var(--palette-color-main);
}
span.tag a:hover {
    color: var(--palette-color-main);
}
a#totop {
    color: var(--white);
    background: var(--palette-color-main);
}
button#searchsubmit:hover {
    color: var(--palette-color-link);
}
table {
    border: 1px solid var(--palette-color-simple);
}
table caption {
    color: var(--palette-color-main);
}
p.byline,
span.category,span.category a,
span.tag,span.tag a {
	color: var(--palette-color-simple);
}
span.category a:hover,
span.tag a:hover {
    color: var(--palette-color-link);
}
footer.article-footer .day {
    color: var(--palette-color-simple);
}
.page-links .post-page-numbers:hover {
    background: var(--palette-color-link);
    border-color: var(--palette-color-link);
}
.hentry:not(:last-of-type) {
    border-bottom: 1px solid var(--palette-color-simple);
}

/* 見出し */
h2 {
    border-color: var(--palette-color-text) !important;
}
/* Parts */
a.more-link, a.read-more {
    background: var(--palette-color-bg);
}
/* 引用 */
.entry-content blockquote {
    color: var(--palette-color-main);
    background: var(--palette-color-simple);
}
.entry-content blockquote p {
    color: var(--palette-color-text);
}

@media only screen and (min-width: 768px) {
    ul.nav li ul.sub-menu, ul.nav li ul.children {
        background: var(--palette-color-bg);
    }
}

/* カスタム投稿タイプ：作品
-------------------------------- */
/* Illust */
a.illust:hover {
    background: rgba(var(--silver_rgb),0.4);
}
a.illust article h3 {
    color: var(--palette-color-text);
}
a.illust article .excerpt {
    color: var(--palette-color-text);
}

/* text */
.page-links .post-page-numbers {
	color: var(--palette-color-simple);
    border: 1px solid;
}
.page-links .post-page-numbers.current {
    color: var(--white);
	background: var(--palette-color-main);
    border-color: var(--palette-color-main);
}
.page-links .post-page-numbers:hover,
.page-links .post-page-numbers:focus,
.page-links .post-page-numbers.current:hover,
.page-links .post-page-numbers.current:focus {
	background: var(--palette-color-link);
    border-color: var(--palette-color-link);
}

/* Update */
.update .excerpt {
    border-left-color: var(--palette-color-simple);
}

/* おまけ(不要なら削除)
-------------------------------- */
/* 外部リンク用マーク */
a[target="_blank"]:after {
	font-family: var(--font-icon);
	font-weight: var(--font-weight_heavy);
	content: "\f08e";
	margin: 0 2px;
}
header a[target="_blank"]:after,
footer a[target="_blank"]:after
button a[target="_blank"]:after,
div.wp-block-button a[target="_blank"]:after,
a.link-img[target="_blank"]:after /* ←画像をaタグで囲む場合。aにclass="link-img"を追加して使用(バナーブックマークを想定) */ {
    content: "";
    margin: 0;
}
/* 隠しページ用リンク(aにclass="link-hidden"を追加して使用) */
a.link-hidden,
a.link-hidden:visited,
a.link-hidden:focus,
a.link-hidden:hover,
a.link-hidden:visited:hover {
	color: var(--palette-color-text);
    text-decoration: none;
    /* ↓ がっつり隠したい人向け(アクセシビリティの観点では非推奨) */
    cursor: text;
    outline: none;
}

/* 追加CSS
-------------------------------- */