@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');/*font-family: "Jost", sans-serif;*/

#header-in {
  display: none;
}

body,
.main,
.sidebar,
.content.cf {
  background-color: #2d2d2d !important;
}

.latest-posts-heading {
  border-bottom: solid 1px #fff;
  font-family: "Jost", sans-serif !important;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.4;
  margin: 0px 0px 16px;
}

/************************************
サイドバー
************************************/
.widget-sidebar-title.widget-title {
  padding: 0;
  border-left: none;
  border-bottom: solid 1px #fff;
  border-radius: 0;
  font-family: "Jost", sans-serif !important;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.4;
}

.widget-entry-cards .a-wrap {
  padding: 12px;
}

/* category_grid の見た目 */
.cat-grid{
  display:grid;
  gap:16px;
  list-style:none; margin:0; padding:0;
}
.cat-grid--cols-2{ grid-template-columns:repeat(2,1fr); }
.cat-grid--cols-3{ grid-template-columns:repeat(3,1fr); }
.cat-grid--cols-4{ grid-template-columns:repeat(4,1fr); }

.cat-grid__item a{ display:block; text-align:center; text-decoration:none; }
.cat-grid img,
.cat-grid__placeholder{
  width:100%; aspect-ratio:1/1; display:block; object-fit:cover; border-radius:6px; background:#eceff1;
}
.cat-grid span {display:block; margin-top:.5em; font-weight:400; font-family: "Jost", sans-serif !important;}
@media (max-width:768px){
  .cat-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

.author-box.border-element.no-icon.cf {
  border: none;
  border-radius: 0;
}

.circle-image img {
  border-radius: 0;
}

.author-content .author-name {
  display: none;
}

.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 {
  background-color: #111 !important;
}

.sidebar-menu-content, .widget-entry-cards .a-wrap {
  background-color: #111 !important;
}

/************************************
ページネーション
************************************/
.pagination-next {
  display: none;
}

.pagination .current, .search-submit {
  background: unset;
}

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

.page-numbers {
  background-color: unset;
  border: unset;
  border-radius: unset;
}

/************************************
投稿詳細ページ
************************************/
.page-numbers, .tagcloud a, .author-box, .ranking-item, .pagination-next-link, .comment-reply-link, .toc {
  border: unset;
  border-radius: unset;
}

.article h2 {
  border-bottom: 3px solid transparent; /* 線の太さを指定 */
  border-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) 1;
  border-image-slice: 1;
  padding: 16px;
}

.article h3, .under-entry-content h2 {
  border-left: 3px solid transparent; /* 線の太さを指定 */
  border-image: linear-gradient(
    to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) 1;
  border-image-slice: 1;
  padding: 0px 16px;
  border-radius: unset;
}

/************************************
固定ページ
************************************/
.article h4 {
  padding: 1rem 2rem;
  border-left: 5px solid;
  border-image: linear-gradient(to bottom,#c70000,#d28300,#dfd000,#00873c,#005aa0,#181878,#800073);
}

/************************************
アーカイブページ
************************************/
.entry-title, .archive-title {
  font-family: "Jost", sans-serif !important;
  font-weight: 400;
}

/************************************
フッター
************************************/
.footer {
  background-color: #111 !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}