@charset "UTF-8";
:root {
  --text-main:#1c1a1a ;
  --bg4:rgb(244, 244, 244) ;
  --bg3:#fff ;
  --bg2:#ffffff ;
  --bg1:#ebebeb ;
  --bg1-on:#f0f8ffea;
  --underline-blue:#a8dafb;
  --underline-red:#ffd0d1;
  --underline: #ff9;
}

/* PCの設定でダークモードを選択した場合のスタイリング */
@media (prefers-color-scheme: dark) {
  :root {
    --text-main: #faf8f7;
    --bg4: #1c1a1a;
    --bg3:#242529;
    --bg2:#2d343a;
    --bg1:#42505e;
    --bg1-on:#313c46bd;
    --underline-blue: #234794 ;
    --underline:rgba(255, 255, 0, 0.801);
    --underline-red:#ff2f33;
  }

  .marker {
    background: yellow;
    color: #1c1a1a;
  }

  .keyboard-key {
    box-shadow: 1px 2px 2px #6e6e6e;
  }

  /*ダークモード時の吹き出し*/
  .sbs-line.sbp-r .speech-balloon {
    background-color: var(--bg2);
    border-color: #85e249;
    border-width: 2px;
  }

  .sbs-line.sbp-r .speech-balloon::after,
.sbs-stn.sbp-r .speech-balloon::after {
    border-left-color: var(--bg2);
  }

  .sbs-line.sbp-l .speech-balloon::after,
.sbs-flat.sbp-l .speech-balloon::after {
    border-right-color: var(--bg2);
  }

  .sbs-line.sbp-l .speech-balloon,
.sbs-flat.sbp-r .speech-balloon {
    background-color: var(--bg2);
    border-color: var(--text-main);
    border-width: 2px;
  }

  .sns-buttons a {
    background-color: #585858;
  }

  /*リンクの色変更*/
  a {
    color: #99ccff;
  }

  a:hover {
    color: #f7a488;
  }
}
body {
  background-color: var(--bg4);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

.main {
  background-color: var(--bg3);
  color: var(--text-main);
}

/*トップページ*/
.list-title-in:before, .list-title-in:after {
  background-color: var(--text-main);
}

a.new-entry-card-link.widget-entry-card-link.a-wrap {
  margin-top: 10px;
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none var(--bg1);
  border: 1px solid var(--bg1);
  color: var(--text-main);
}

.index-tab-buttons .index-tab-button {
  background-color: var(--bg1);
  border-color: var(--bg1);
}

/*続きを読む*/
.list-more-button {
  background-color: var(--bg2);
  color: var(--text-main);
}

.list-more-button:hover {
  color: var(--text-main);
  background-color: var(--bg1-on);
}

.pagination-next-link,
.page-numbers {
  background-color: var(--bg2);
  border-radius: 8px;
  color: var(--text-main);
}

.pagination-next-link:hover,
.key-btn:hover {
  color: var(--text-main);
  background-color: var(--bg1-on);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pagination .page-numbers,
.pager-numbers .page-numbers {
  border-radius: 50%;
}

.page-numbers.dots {
  background: none;
}

.page-numbers:hover {
  background-color: var(--bg1-on);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

a.page-numbers:hover {
  color: var(--text-main);
  background-color: var(--bg4);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/*サイドバー*/
.sidebar {
  background-color: var(--bg3);
  color: var(--text-main);
}

#sidebar ul li a,
a.popular-entry-card-link {
  margin: 10px;
}

.widget_recent_entries ul li a, .widget_categories ul li a,
.widget_archive ul li a, .widget_pages ul li a,
.widget_meta ul li a, .widget_rss ul li a,
.widget_nav_menu ul li a,
.wp-block-group ul li a {
  border-bottom: 1px solid var(--bg3);
  padding-right: 15px;
  padding-left: 15px;
}

.author-box .sns-follow-buttons a.follow-button {
  color: var(--text-main);
}

.sidebar-menu-content,
.widget-entry-cards .a-wrap {
  color: var(--text-main);
  background-color: var(--bg2);
}

/*コメントウィジェット*/
div.recent-comment-content {
  background-color: var(--bg1);
  color: var(--text-main);
}

.recent-comment-content::after {
  border-bottom-color: var(--bg1);
}

/*検索ボックス*/
.search-box input::placeholder {
  color: var(--text-main);
}

.search-box input:focus, .search-box button:focus {
  outline: 0;
}

input, input[type=submit] {
  background-color: var(--bg3);
  color: var(--text-main);
}

input.search-edit {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.02), 0 2px 3px -2px rgba(0, 0, 0, 0.05);
}

input.search-edit::placeholder {
  color: var(--text-main);
}

.search-submit {
  border-radius: 0 3px 3px 0;
  width: 50px;
  height: 100%;
  top: 0;
  right: 0;
}

.box-menu {
  background: var(--bg2);
  color: var(--text-main);
}

.box-menu:hover {
  background-color: var(--bg1-on);
  color: var(--text-main);
}

.a-wrap,
.widget_recent_entries ul li a, .widget_categories ul li a,
.widget_archive ul li a, .widget_pages ul li a,
.widget_meta ul li a, .widget_rss ul li a,
.widget_nav_menu ul li a,
.wp-block-group ul li a {
  color: var(--text-main);
  background-color: var(--bg2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  transition-duration: 0.3s;
}

.a-wrap:hover,
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover,
.widget_archive ul li a:hover, .widget_pages ul li a:hover,
.widget_meta ul li a:hover, .widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.wp-block-group ul li a:hover {
  color: var(--text-main);
  background-color: var(--bg1-on);
  transform: translateY(-4px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
  transition-duration: 0.3s;
}

.a-wrap > div {
  border: none;
}

/*カルーセル*/
div #carousel-in {
  background-color: var(--bg3);
}

/*ナビ*/
.navi {
  background-color: var(--bg3);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  font-weight: bold;
}

.navi a {
  color: var(--text-main);
}

.navi a:hover {
  color: var(--text-main);
  background-color: var(--bg1-on);
}

.navi ul .sub-menu {
  background-color: var(--bg2);
  opacity: 0.95;
}

.navi ul .sub-menu a {
  color: var(--text-main);
}

.navi ul .sub-menu a:hover {
  background-color: var(--bg1-on);
}

.navi ul .sub-menu a .sub-caption {
  opacity: 0.8;
}

.navi-in > ul .sub-menu {
  display: block;
}

.navi-in > ul .sub-menu li {
  visibility: hidden;
  transition: all 0.2s ease;
  height: 0;
  opacity: 0;
}

.navi-in > ul li:hover > ul > li {
  transition: all 0.2s ease;
  visibility: visible;
  height: 60px;
  opacity: 1;
}

.navi-in > ul .sub-menu .sub-menu li {
  display: none;
}

.navi-in > ul .sub-menu li:hover > ul > li {
  display: block;
}

.navi-in > ul > li:last-of-type .sub-menu {
  right: 0;
}

/*ヘッダー*/
.fixed-header .header {
  background-color: transparent;
}

.fixed-header .navi {
  box-shadow: none;
}

.toc a {
  color: var(--text-main);
}

div.speech-balloon {
  background-color: var(--bg2);
}

.rating-number {
  color: var(--text-main);
}

/*フッター*/
#footer {
  background-color: var(--bg3);
}

div .footer-bottom-content {
  color: var(--text-main);
}

.navi-footer-in a {
  color: var(--text-main);
}

.navi-footer-in a:hover {
  background-color: var(--bg1-on);
}

/*---
記事
---*/
/*表*/
tr {
  background-color: var(--bg2);
}

table tr:nth-of-type(2n+1) {
  background-color: var(--bg3);
}

table th,
.scrollable-table th {
  background-color: var(--bg1);
}

/*ソースコード*/
pre.wp-block-code,
pre {
  color: var(--text-main);
  background-color: var(--bg1);
}

/*パンくずリスト*/
.breadcrumb,
.breadcrumb-caption {
  color: var(--text-main);
}

/*snsボタン*/
.sns-share-message,
.sns-follow-message {
  color: var(--text-main);
}

/*コメント*/
.comment-btn {
  background-color: var(--bg1);
  color: var(--text-main);
}

.comment-btn:hover {
  background-color: var(--bg1-on);
  color: var(--text-main);
}

textarea {
  background-color: var(--bg3);
  color: var(--text-main);
}

/*引用*/
blockquote {
  background-color: var(--bg2);
}

/*吹き出し*/
.speech-balloon::after {
  border-right-color: var(--bg2);
}

/*キーボードキー*/
.keyboard-key {
  background-color: var(--bg2);
  color: var(--text-main);
}

/*アンダーライン*/
.marker-under-blue {
  background: linear-gradient(transparent 60%, var(--underline-blue) 0%);
}

.marker-under {
  background: linear-gradient(transparent 70%, var(--underline) 0%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, var(--underline-red) 0%);
}

.marker-blue {
  background: var(--underline-blue);
  color: var(--text-main);
}

.marker-red {
  background: var(--underline-red);
  color: var(--text-main);
}

/*アイコンボックス*/
.is-style-information-box, .information-box, .information,
.is-style-question-box, .question-box, .question,
.is-style-alert-box, .alert-box, .alert,
.is-style-memo-box, .memo-box, .memo,
.is-style-comment-box, .comment-box, .comment,
.is-style-good-box, .good-box, .good,
.is-style-bad-box, .bad-box, .bad,
.is-style-ok-box, .ok-box, .ok,
.is-style-ng-box, .ng-box,
.is-style-profile-box, .profile-box {
  background-color: var(--bg3);
  border-width: 2px;
}

/*付箋風・プライマリーボックス*/
.blank-box.sticky,
.sticky.is-style-blank-box-red,
.sticky.is-style-blank-box-navy,
.sticky.is-style-blank-box-blue,
.sticky.is-style-blank-box-yellow,
.sticky.is-style-blank-box-green,
.sticky.is-style-blank-box-pink,
.sticky.is-style-blank-box-orange,
.is-style-sticky-gray,
.is-style-sticky-yellow,
.is-style-sticky-red,
.is-style-sticky-blue,
.is-style-sticky-green,
.is-style-primary-box, .primary-box, .sp-primary, .primary {
  color: #1c1a1a;
}

/*ラベルボックス*/
.label-box-label {
  text-shadow: var(--bg3) 3px 0 0, var(--bg3) 2px 1px 0, var(--bg3) 2px 2px 0, var(--bg3) 2px 3px 0, var(--bg3) 1px 3px 0, var(--bg3) 0 3px 0, var(--bg3) -1px 3px 0, var(--bg3) -2px 2px 0, var(--bg3) -3px 1px 0, var(--bg3) -3px 0 0, var(--bg3) -3px -1px 0, var(--bg3) -3px -2px 0, var(--bg3) -2px -2px 0, var(--bg3) -1px -3px 0, var(--bg3) 0 -3px 0, var(--bg3) 1px -3px 0, var(--bg3) 2px -2px 0, var(--bg3) 2px -2px 0, var(--bg3) 3px -1px 0;
}

/*見出しボックス、タブ見出しボックス、アコーディオンボックス*/
.caption-box:not(.has-border-color, [class*=cb-]) .caption-box-label {
  color: #1c1a1a;
}

.tab-caption-box:not(.has-border-color, [class*=tcb-]) span.tab-caption-box-label-text {
  color: #1c1a1a;
}

.toggle-box:not(.has-border-color, [class*=tb-]) label.toggle-button {
  color: #1c1a1a;
}

/*マイクロバルーン*/
.micro-balloon {
  background-color: var(--bg3);
}

.micro-balloon::after {
  border-top-color: var(--bg3);
}

.micro-bottom.micro-balloon::after {
  border-bottom-color: var(--bg3);
}

/*検索案内*/
.search-form div.sform {
  background-color: var(--bg3);
}

.search-form div.sbtn::after {
  color: var(--text-main);
}

.search-form div.sbtn:hover {
  color: var(--text-main);
  background-color: var(--bg1-on);
}

/*faq*/
.faq-item-label {
  font-size: 26px;
}

.faq-answer-label {
  font-size: 20px;
  margin-left: 4px;
}

.faq-answer-content.faq-item-content p {
  font-size: 16px;
}

/*見出し*/
.article h2,
.sidebar h2,
.sidebar h3 {
  background: none;
}

.article h3,
.article h4,
.article h5,
.article h6 {
  border: none;
}

:root {
  --text-main: #faf8f7;
  --bg4: #1c1a1a;
  --bg3:#242529;
  --bg2:#2d343a;
  --bg1:#42505e;
  --bg1-on:#313c46bd;
  --underline-blue: #234794 ;
  --underline:rgba(255, 255, 0, 0.801);
  --underline-red:#ff2f33;
}

.marker {
  background: yellow;
  color: #1c1a1a;
}

.keyboard-key {
  box-shadow: 1px 2px 2px #6e6e6e;
}

/*ダークモード時の吹き出し*/
.sbs-line.sbp-r .speech-balloon {
  background-color: var(--bg2);
  border-color: #85e249;
  border-width: 2px;
}

.sbs-line.sbp-r .speech-balloon::after,
.sbs-stn.sbp-r .speech-balloon::after {
  border-left-color: var(--bg2);
}

.sbs-line.sbp-l .speech-balloon::after,
.sbs-flat.sbp-l .speech-balloon::after {
  border-right-color: var(--bg2);
}
.sbs-flat.sbp-r .speech-balloon::after {
    border-left-color: var(--bg2);
  }

.sbs-line.sbp-l .speech-balloon,
.sbs-flat.sbp-l .speech-balloon,
.sbs-flat.sbp-r .speech-balloon {
  background-color: var(--bg2);
  border-color: var(--text-main);
  border-width: 2px;
}

.sns-buttons a {
  background-color: #585858;
}

/*リンクの色変更*/
a {
  color: #99ccff;
}

a:hover {
  color: #f7a488;
}

/* カスタム色対応 */
.speech-wrap,
.toggle-box,
.timeline-box,
.iconlist-box,
.faq-wrap,
.caption-box,
.tab-caption-box,
.label-box,
.micro-balloon,
.micro-text{
  --cocoon-custom-text-color: var(--text-main);
}

.info-list,
.info-list .info-list-item-content-link,
.widget_info_list{
  color: var(--text-main);
}

.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before{
  background-color: transparent;
}

.toggle-box {
  --cocoon-custom-background-color: transparent;
}

.has-box-style,
.has-border{
  --cocoon-box-border-color: #ccc;
}

.is-style-border-thin-and-thick,
.is-style-border-radius-s-thin-and-thick,
.is-style-border-radius-l-thin-and-thick {
  border-color: rgba(255, 255, 255, 0.1);
}

.is-style-light-background-box{
  background-color: rgba(255, 255, 255, 0.1);
}

.is-style-stripe-box {
  background-image: repeating-linear-gradient(-45deg, #333 0, #333 3px, transparent 3px, transparent 6px);
}

.is-style-checkered-box {
  background-image: linear-gradient(90deg, rgba(232, 238, 236, 0.1) 50%, transparent 50%), linear-gradient(rgba(234, 236, 238, 0.1) 50%, transparent 50%);
}

.is-style-stitch-box{
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.2);
}

.is-style-border-top-box {
  box-shadow: 0 3px 5px rgba(255, 255, 255, 0.22);
}

.is-style-border-left-box {
  box-shadow: 0px 2px 3px rgba(255, 255, 255, 0.33);
}

[class^="is-style-balloon-"], [class*=" is-style-balloon-"] {
  --cocoon-white-color: var(--bg3);
	background: var(--cocoon-white-color);
	border: 1px solid var(--cocoon-box-border-color);
}