@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-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cat-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 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;
}

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

.cat-grid-box.widget.sp-only {
  display: none;
}

/*1023px以下*/
@media screen and (max-width: 1023px) {

  /*必要ならばここにコードを書く*/
  #container>ul>li.navi-menu-button.menu-button {
    display: none;
  }

  #custom_html-4 {
    display: none;
  }

  .cat-grid-box.widget.sp-only {
    display: block;
  }

  .cat-grid-box.widget.sp-only .widget-title {
    font-family: "Jost", sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    border-bottom: solid 1px #fff;
    line-height: 1.4;
    margin-bottom: 16px;
  }

  .cat-grid-box.widget.sp-only .cat-grid.cat-grid--cols-3 {
    padding-left: 0;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {

  /*必要ならばここにコードを書く*/
  #header.header {
    aspect-ratio: 1006 / 835;
    background-image: url(https://pkerclub.com/wp-content/uploads/2025/10/mv-sp-1.webp);
  }
}

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

  .cat-grid {
    gap: 10px;
  }
}