@use './mixin';

// ライトモード用カスタムプロパティ
: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) {

  // ダークモード用カスタムプロパティ
  @include mixin.prefers_dark_root();

  // ダークモード用スタイルシート
  @include mixin.prefers_dark_style();

  // ダークモード用カスタム色
  @include mixin.prefers_dark_skin();

}

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);
}
.page-numbers.current{
  background-color: #757575;
}
.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: 99px;
}
.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 rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
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;
}
.header-container.fixed-header,
.hlt-top-menu-wrap .header-container {
  background-color: var(--bg3);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
}
.fixed-header .site-name-text,
.hlt-top-menu-wrap .site-name-text {
  color: var(--text-main);
}
#header-container.fixed-header .navi,
.hlt-top-menu-wrap #header-container .navi{
  box-shadow: none;
}
.fixed-header .header,
.hlt-top-menu-wrap .header {
  background-color: unset;
}
.fixed-header .navi,
.hlt-top-menu-wrap .navi {
  box-shadow: unset;
}
.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: .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;
}
.hlt-tm-small .navi-in > ul li:hover > ul > li,
.cl-slim .navi-in > ul li:hover > ul > li {
  height: 40px;
}
.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);
}
.cocoon-block-balloon.not-nested-style {
  --cocoon-custom-background-color: var(--bg2);
}
.rating-number{
 color: var(--text-main);
}
/*フッター*/
.footer{
  background-color: var(--bg3);
  color: var(--text-main);
}
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:where(:not(.hljs)),
pre:where(:not(.hljs)) {
  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);
}
/*ウィジェット*/
.widget{
  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;
}
/*ページ送りナビ*/
.post-navi-default{
  &.post-navi-border a{
    border: 1px solid var(--cocoon-basic-border-color);
  }
  &.post-navi-border .next-post {
    border-top-width: 1px;
    margin-top: 6px;
  }
}


@media screen and (max-width: 480px) {
  .pager-post-navi.post-navi-square a:last-child {
    border-top-width: 1px;
    margin-top: 6px;
  }
}