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

  /* メイン、ウィジェットの背景カラー */
 /* --hvn-white-color: #fffef8!important;

  /* タイトルドットの色 */
  --color1: #308BA1;
  --color2: #52B3AF;
  --color3: #E6B34E;
  --color4: #28447A;
  --color5: #cbc9c2;
  --color6: #A97962;
}

/*******************************************************************************
**  ブラウザスクロールバー
*******************************************************************************/

/* 全体 */
.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.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){
  /*必要ならばここにコードを書く*/
}
