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

/* ================================================================
   GearPick カスタムスタイル
   正本: リポジトリ wp/cocoon-child-style.css
   ================================================================ */

:root {
  --gp-monitor:  #4DA3FF;
  --gp-keyboard: #FFB020;
  --gp-mouse:    #4ADE80;
  --gp-headset:  #C084FC;
  --gp-chair:    #FB7185;
  --gp-misc:     #94A3B8;
  --gp-brand:    #FF6B2C;
  --gp-line:     #EAE4DE;
  --gp-surface:  #FAF8F6;
  --gp-muted:    #6B625B;
  --gp-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* カテゴリラベル: アイキャッチ画像と同じ配色 */
.cat-label { border: 0; font-weight: 700; letter-spacing: 0.02em; background: var(--gp-misc); color: #14110F; border-radius: 3px; }
.cat-label-8  { background: var(--gp-monitor); }
.cat-label-38 { background: var(--gp-keyboard); }
.cat-label-48 { background: var(--gp-mouse); }
.cat-label-2  { background: var(--gp-headset); }
.cat-label-24 { background: var(--gp-chair); }
.cat-label-53 { background: var(--gp-misc); }

/* 記事カード: ホバーで浮き上がる */
.entry-card-wrap { border-radius: 10px; transition: transform 0.4s var(--gp-ease), box-shadow 0.4s var(--gp-ease); }
.entry-card-wrap:hover { transform: translateY(-5px); box-shadow: 0 18px 38px -22px rgba(27, 23, 20, 0.5); }
.entry-card-thumb { overflow: hidden; border-radius: 8px; }
.entry-card-thumb img { display: block; transition: transform 0.6s var(--gp-ease); }
.entry-card-wrap:hover .entry-card-thumb img { transform: scale(1.045); }
.entry-card-title { transition: color 0.25s var(--gp-ease); }
.entry-card-wrap:hover .entry-card-title { color: var(--gp-brand); }

/* スクロールで記事カードが立ち上がる（非対応ブラウザでも壊れない）
   transform ではなく translate を使う。transform だと hover と競合するため。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entry-card-wrap { animation: gp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes gp-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* PR 表記 */
.pr-notice { font-size: 0.8em; color: var(--gp-muted); background: var(--gp-surface); border-left: 3px solid var(--gp-line); padding: 0.6em 0.9em; margin-bottom: 1.8em; border-radius: 3px; }

/* 関連記事ブロック */
.related-articles { margin: 3.5em 0 1em; padding: 1.5em 1.6em 1.2em; background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: 10px; }
.related-articles h2 { font-size: 1.05em; margin: 0 0 0.9em; padding: 0 0 0.5em; background: none; border: 0; border-bottom: 2px solid var(--gp-brand); display: inline-block; }
.related-articles ul { list-style: none; margin: 0; padding: 0; }
.related-articles li { margin: 0; }
.related-articles a { display: block; position: relative; padding: 0.75em 0.2em 0.75em 1.6em; text-decoration: none; border-bottom: 1px solid var(--gp-line); transition: color 0.25s var(--gp-ease), padding-left 0.25s var(--gp-ease); }
.related-articles li:last-child a { border-bottom: 0; }
.related-articles a::before { content: "→"; position: absolute; left: 0.2em; color: var(--gp-brand); transition: transform 0.25s var(--gp-ease); }
.related-articles a:hover { color: var(--gp-brand); padding-left: 1.9em; }
.related-articles a:hover::before { transform: translateX(3px); }
.related-articles a:focus-visible { outline: 2px solid var(--gp-brand); outline-offset: 2px; border-radius: 3px; }

/* サイドバー・ページャー */
.sidebar h3 { border-left: 4px solid var(--gp-brand); padding-left: 0.6em; }
.pagination .page-numbers { transition: background-color 0.25s var(--gp-ease), color 0.25s var(--gp-ease); }
.pagination a.page-numbers:hover { background: var(--gp-brand); color: #fff; }

/* モバイル */
@media screen and (max-width: 480px) {
  .related-articles { padding: 1.2em 1em 1em; }
  .entry-card-wrap:hover { transform: none; box-shadow: none; }
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .entry-card-wrap, .entry-card-thumb img, .related-articles a, .related-articles a::before { transition-duration: 0.01ms; animation: none; }
  .entry-card-wrap:hover { transform: none; }
}