@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*******************************************************************************
**  全体（基本カラーで色設定するなら不要）
*******************************************************************************/
:root {
  /* サイトカラー */
  --main-color: #adbab5 !important;
  /* HEX形式 */
  --main-rgb-color: 173 186 181 !important;
  /* RGBA形式 */
  --hover-color: #f3f5f4 !important;
  /* hoverカラー（メインカラーの15%） */
  /* テキストカラー */
  --text-color: #ffffff !important;
  /* 背景カラー */
  --body-color: #fbf5e9 !important;
  /* HEX形式 */
  --body-rgb-color: 251 245 233 !important;
  /* RGBA形式 */
  /* コンテンツ背景カラー */
  --content-color: #fffef8 !important;
  /* タイトルドットの色 */
  --color1: #f5d1c3;
  --color2: #a9b7ba;
  --color3: #c4d7d1;
  --color4: #b4b1a0;
  --color5: #e0d8c7;
  --color6: #e0d3e5;
}

/*******************************************************************************
**  ブラウザスクロールバー
*******************************************************************************/
/* 全体 */
.body::-webkit-scrollbar {
  width: 15px;
}

/* 背景部分 */
.body::-webkit-scrollbar-track {
  background-color: var(--color5);
}

/* ハンドル部分 */
.body::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 100px;
}

/*******************************************************************************
**  フッター
*******************************************************************************/
#footer {
  background-color: var(--main-color);
  /* 背景カラー */
}

.hvn-dark-switch {
  display: none !important;
}

/*******************************************************************************
**  カード
*******************************************************************************/
.hvn.front-top-page .main,
.hvn.search .list,
.hvn.archive .list {
  --thumb-width: 200px;
}

.hvn.front-top-page .main .card-thumb,
.hvn.archive .list .card-thumb {
  border-radius: var(--border-radius10);
}

@media (width <=480px) {

  .hvn.front-top-page .main,
  .hvn.archive .list {
    --thumb-width: 120px;
  }
}

/*******************************************************************************
**  フロントページ、アーカイブタイトル
*******************************************************************************/
.hvn.body .list-title-in {
  color: var(--color4) !important;
  /* テキストカラー */
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.hvn.body .list-title-in:before {
  content: none;
}

.hvn.body .list-title-in:after {
  background-color: unset;
  border-radius: 100px;
  box-shadow: 10px 0px 0px var(--color1), 25px 0px 0px var(--color2), 40px 0px 0px var(--color3), 55px 0px 0px var(--color4), 70px 0px 0px var(--color5), 85px 0px 0px var(--color6);
  content: "";
  display: block;
  height: 10px;
  left: 50%;
  margin: 0;
  position: relative;
  transform: translateX(-52.5px);
  width: 10px;
}

.hvn.front-top-page .list-title-in {
  margin-bottom: var(--gap30);
}

/*******************************************************************************
**  ページネーション
*******************************************************************************/
.hvn .pagination-next {
  display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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