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

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

/* トップページ（front-page.php）。サイドバーには適用しない */
.fp{--fp-accent:#19448e;--fp-line:#e3e6ec;--fp-soft:#f5f7fb;display:flex;flex-direction:column;gap:28px;min-width:0}
.fp a{text-decoration:none;color:inherit}
.fp-hero{background:linear-gradient(135deg,#d63c6b 0%,#ec6f97 100%);color:#fff;border-radius:12px;padding:28px 24px}
.fp-hero-lead{font-size:1.35em;font-weight:700;margin:0 0 6px;line-height:1.4}
.fp-hero-text{margin:0 0 16px;opacity:.9;font-size:.95em}
.fp-search{display:flex;gap:8px;max-width:560px}
.fp-search input{flex:1;min-width:0;border:0;border-radius:8px;padding:10px 14px;font-size:16px}
.fp-search button{border:0;border-radius:8px;padding:10px 18px;background:#fff;color:#d63c6b;font-weight:700;cursor:pointer}
.fp-cats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.fp-cats a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:1px solid var(--fp-line);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fp-cats a:hover{border-color:var(--fp-accent);box-shadow:0 2px 8px rgba(25,68,142,.12)}
.fp-cat-name{font-weight:700;color:var(--fp-accent)}
.fp-cat-count{font-size:.8em;color:#777}
.fp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--fp-accent);margin-bottom:12px;padding-bottom:6px}
.fp .fp-head h2{margin:0;padding:0;font-size:1.2em;background:none;border:0;color:#333}
.fp .fp-head h2::before,.fp .fp-head h2::after{content:none}
.fp-more{font-size:.85em;color:var(--fp-accent)!important;white-space:nowrap}
.fp-more::after{content:" \203A"}
.fp-note{font-size:.8em;color:#777}
.fp-row,.fp-grid{list-style:none;margin:0;padding:0}
.fp-row{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.fp-row .fp-card{scroll-snap-align:start}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.fp-card{position:relative;margin:0}
.fp-card a{display:block}
.fp-thumb{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:var(--fp-soft)}
.fp-thumb img,.fp-noimg{display:block;width:100%;height:100%;object-fit:cover}
.fp-card a:hover .fp-thumb img{opacity:.85}
.fp-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82em;line-height:1.45;margin-top:6px}
.fp-rank{position:absolute;top:6px;left:6px;z-index:1;min-width:26px;height:26px;border-radius:13px;background:rgba(0,0,0,.65);color:#fff;font-size:.8em;font-weight:700;display:flex;align-items:center;justify-content:center}
.fp-rank-1{background:#d4a017}.fp-rank-2{background:#8e9aa6}.fp-rank-3{background:#b06d3b}
.fp-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fp-tags a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--fp-line);border-radius:999px;background:#fff;font-size:.85em}
.fp-tags a:hover{border-color:var(--fp-accent);color:var(--fp-accent)}
.fp-tags span{font-size:.8em;color:#888}
.fp-faq{border:1px solid var(--fp-line);border-radius:8px;margin-bottom:8px;background:#fff}
.fp-faq summary{cursor:pointer;padding:12px 14px;font-weight:700}
.fp-faq p{margin:0;padding:0 14px 12px;font-size:.92em;line-height:1.7}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .fp{gap:22px}
  .fp-hero{padding:20px 16px}
  .fp-hero-lead{font-size:1.15em}
  .fp-row{grid-auto-columns:128px}
  .fp-grid{grid-template-columns:repeat(2,1fr)}
}
/* 作品記事末尾の関連作品・一覧ページの紹介 */
.fp-related{margin-top:2em}
.fp-archive{margin:0 0 1.5em}
.fp-archive-text{margin:0;line-height:1.8}
.entry-content .fp-row,.entry-content .fp-row li{margin:0;padding:0}
.entry-content .fp-row li::before{content:none}
.article .fp .fp-head h2{box-shadow:none;padding:0;margin:0;border-radius:0}
/* 紹介文中のリンクは.fp aの装飾解除を打ち消し、通常のリンクとして見せる */
.fp .fp-archive-text a{color:#1967d2;text-decoration:underline;text-underline-offset:2px}
.fp .fp-archive-text a:hover{text-decoration:none;opacity:.8}

/* トップページh1内のキャッチフレーズ（表示は .tagline のみ） */
.logo-header .site-name-tagline{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 記事下のジャンル（タグの色違い） */
.entry-genres .genre-link{color:#a3456b;background-color:#fdf1f5;border-color:#e7b6c9}
.entry-genres .genre-link:hover{color:#fff;background-color:#a3456b;border-color:#a3456b}