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

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

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

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

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

/* 内部リンクカード・外部リンクカードの右下に「続きを読む」を表示 */
.internal-blogcard,
.blogcard {
  position: relative; /* 疑似要素の基準を作る */
}

.internal-blogcard::after,
.blogcard::after {
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #6495ED;
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  z-index: 2;
}

/************************************
  Cocoon関連記事を横スクロール化（Rev5）
************************************/

/* 親コンテナ（関連記事全体） */
.related-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

/* カード本体（1記事分） */
.related-entry-card-wrap {
    flex: 0 0 250px !important; /* 横幅固定 */
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Cocoon の関連記事レイアウトを完全無効化 */
.related-list .related-entry-card,
.related-list .e-card,
.related-list .cf,
.related-list .related-entry-card-thumb,
.related-list .related-entry-card-content,
.related-list .related-entry-card-snippet,
.related-list .related-entry-card-meta,
.related-list .column {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box;
}

/* スクロールバーのデザイン */
.related-list::-webkit-scrollbar {
    height: 8px;
}
.related-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}