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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* =====================================================================
   キャラ推し活 トップページ用デザイン（.ktop で名前空間を限定）
   ※ front-page.php の本文を <div class="ktop"> で包んで使用する。
   ※ すべてのセレクタを .ktop 配下に閉じ込め、既存サイトと衝突させない。
   ===================================================================== */
.ktop {
  --k-bg:#FFFFFF; --k-alt:#F7F7F8; --k-surface:#FFFFFF;
  --k-ink:#333333; --k-soft:#666666; --k-faint:#9AA0A6; --k-line:#E8E8EC;
  --k-accent:#FF6B9D; --k-accent-deep:#E85088; --k-blue:#4AA8D8; --k-violet:#9B7BD4; --k-amber:#E6A93C; --k-green:#5FB98A;
  --k-radius:10px; --k-shadow:0 1px 3px rgba(0,0,0,.06);
  --k-font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","BIZ UDPGothic",Meiryo,sans-serif;
  max-width:1160px; width:94%; margin:0 auto; padding:20px 0 40px;
  font-family:var(--k-font); color:var(--k-ink); line-height:1.7;
}
.ktop * { box-sizing:border-box; }
.ktop a { color:inherit; text-decoration:none; }
.ktop h2, .ktop h3, .ktop h4 { margin:0; font-weight:700; }

.ktop .k-ph { position:absolute; inset:0; background:linear-gradient(135deg,#f2f2f4,#e9e9ee); display:grid; place-items:center; }
.ktop .k-ph::after { content:"IMG"; font-size:.7rem; letter-spacing:.15em; color:#c3c3cb; font-weight:700; }

/* 見出し */
.ktop .shead { display:flex; align-items:center; gap:10px; margin:4px 0 18px; }
.ktop .shead::before { content:""; width:5px; height:20px; border-radius:2px; background:var(--k-accent); }
.ktop .shead h2 { font-size:1.15rem; }
.ktop .shead.big { margin:40px 0 20px; padding-bottom:12px; border-bottom:2px solid var(--k-line); }
.ktop .shead.big::before { height:26px; width:6px; }
.ktop .shead.big h2 { font-size:1.5rem; }
.ktop .shead .shead-sub { font-size:.8rem; color:var(--k-faint); font-weight:700; }
.ktop .shead.big .big-more { margin-left:auto; }
.ktop .block-note { font-size:.86rem; color:var(--k-soft); background:var(--k-alt); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:12px 14px; margin:-4px 0 20px; }
.ktop .row-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--k-line); }
.ktop .row-head h3 { font-size:1.05rem; }
.ktop .row-head h3 b { color:var(--k-accent); font-weight:800; }
.ktop .more { font-size:.8rem; font-weight:600; color:var(--k-soft); }
.ktop .more:hover { color:var(--k-accent); }
.ktop .sec { margin-bottom:40px; }
.ktop .subsec { margin-bottom:30px; }

/* レイアウト（本文＋サイドバー） */
.ktop .main-grid { display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }

/* 注目記事カルーセル */
.ktop .krail { display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:14px; overflow-x:auto; padding-bottom:12px; margin-bottom:26px; scroll-snap-type:x mandatory; }
.ktop .krail::-webkit-scrollbar{ height:7px; }
.ktop .krail::-webkit-scrollbar-thumb{ background:var(--k-line); border-radius:999px; }
.ktop .fcard { scroll-snap-align:start; background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); overflow:hidden; box-shadow:var(--k-shadow); transition:box-shadow .16s; padding-bottom:12px; }
.ktop .fcard:hover{ box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ktop .fcard .fthumb { position:relative; height:124px; overflow:hidden; }
.ktop .fcard .fthumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ktop .fcard .catchip { position:absolute; top:8px; right:8px; z-index:2; font-size:.6rem; font-weight:700; color:#fff; padding:2px 8px; border-radius:3px; }
/* タイトルは常に2行で綺麗にクリップ（-webkit-line-clampはCJK境界で3行目が漏れるため使わず、
   固定高さ＋overflow:hiddenで確実に切る。下パディングは.fcard側に逃がす＝3行目の頭が
   下パディング域から覗くのを防止）。 */
.ktop .fcard h4 { font-size:.84rem; line-height:1.5; font-weight:600; margin:0; padding:10px 12px 0; display:block; box-sizing:content-box; height:calc(1.5em * 2); overflow:hidden; }

/* ジャンルタイル */
.ktop .pillars { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ktop .pill { display:flex; gap:13px; align-items:center; background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:16px; box-shadow:var(--k-shadow); transition:box-shadow .16s; }
.ktop .pill:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ktop .pill .picon { flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem; }
.ktop .pi-pink{background:#ffe6f0;} .ktop .pi-violet{background:#efe6fb;} .ktop .pi-blue{background:#e2f2fa;} .ktop .pi-amber{background:#fbf0d8;}
.ktop .pill h3 { font-size:1rem; }
.ktop .pill p { margin:.2rem 0 0; font-size:.78rem; color:var(--k-soft); }
.ktop .st { font-size:.62rem; font-weight:700; padding:1px 7px; border-radius:3px; margin-left:6px; vertical-align:middle; }
.ktop .st.on{ background:#ffe6f0; color:var(--k-accent-deep); }
.ktop .st.soon{ background:#efe6fb; color:var(--k-violet); }
.ktop .st.plan{ background:var(--k-alt); color:var(--k-faint); }

/* 記事カード */
.ktop .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ktop .card { background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); overflow:hidden; box-shadow:var(--k-shadow); transition:box-shadow .16s; }
.ktop .card:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ktop .card .thumb { position:relative; height:116px; overflow:hidden; }
.ktop .card .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ktop .card .badge { position:absolute; top:8px; left:8px; z-index:2; font-size:.6rem; font-weight:700; color:#fff; padding:2px 8px; border-radius:3px; }
.ktop .card .cbody { padding:10px 12px 12px; }
.ktop .card h4 { font-size:.85rem; font-weight:600; line-height:1.5; margin:0; display:block; box-sizing:content-box; height:calc(1.5em * 2); overflow:hidden; }
.ktop .card time { display:block; margin-top:7px; font-size:.72rem; color:var(--k-faint); }
.ktop .b-lot{background:var(--k-accent);} .ktop .b-new{background:var(--k-blue);} .ktop .b-spot{background:var(--k-amber);} .ktop .b-shop{background:var(--k-green);} .ktop .b-prep{background:var(--k-faint);}
.ktop .card.coming { opacity:.5; pointer-events:none; }
.ktop .btn-more { display:block; width:240px; max-width:80%; margin:22px auto 0; text-align:center; font-weight:700; font-size:.88rem; padding:.7em; border-radius:6px; border:1px solid var(--k-line); color:var(--k-soft); background:var(--k-surface); }
.ktop .btn-more:hover { border-color:var(--k-accent); color:var(--k-accent); }

/* 広告（アフィリPR） */
.ktop .adcard { position:relative; display:flex; gap:14px; align-items:center; background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:14px 16px; margin:0 0 40px; box-shadow:var(--k-shadow); }
.ktop .ad-label { position:absolute; top:7px; right:9px; font-size:.54rem; font-weight:700; color:var(--k-faint); background:var(--k-alt); border:1px solid var(--k-line); border-radius:3px; padding:0 5px; }
.ktop .ad-thumb { flex:0 0 92px; width:92px; height:108px; border:3px solid var(--k-green); border-radius:8px; overflow:hidden; position:relative; background:#fff; }
.ktop .ad-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.ktop .ad-body { flex:1; min-width:0; }
.ktop .ad-name { margin:0; font-size:.85rem; font-weight:700; line-height:1.5; display:block; box-sizing:content-box; height:calc(1.5em * 2); overflow:hidden; }
.ktop .ad-price { color:#d32f2f; font-size:.82rem; font-weight:800; margin:6px 0 10px; }
.ktop .ad-btns { display:flex; gap:8px; }
.ktop .ad-btn { flex:1; text-align:center; color:#fff; font-weight:800; font-size:.76rem; padding:9px 4px; border-radius:6px; white-space:nowrap; }
.ktop .ad-btn.amazon{background:#ff9900;} .ktop .ad-btn.rakuten{background:#bf0000;} .ktop .ad-btn.yahoo{background:#51a7e8;}
.ktop .ad-btn:hover{opacity:.88;}
.ktop .ad-widget .ad-thumb { width:100%; height:150px; flex:none; margin-bottom:10px; }
.ktop .ad-widget .ad-name { font-size:.82rem; }

/* サイドバー */
.ktop .side { display:flex; flex-direction:column; gap:22px; }
.ktop .widget { background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:16px; box-shadow:var(--k-shadow); }
.ktop .wtitle { font-size:.9rem; font-weight:800; padding-bottom:9px; margin-bottom:12px; border-bottom:2px solid var(--k-line); }
.ktop .wtitle::before { content:""; display:inline-block; width:4px; height:14px; background:var(--k-accent); border-radius:2px; margin-right:7px; vertical-align:-2px; }
.ktop .w-search { display:flex; gap:8px; }
.ktop .w-search input { flex:1; border:1px solid var(--k-line); background:var(--k-alt); border-radius:6px; padding:8px 12px; font-size:.82rem; outline:none; color:var(--k-ink); font-family:var(--k-font); }
.ktop .w-search button { border:0; background:var(--k-accent); color:#fff; border-radius:6px; padding:0 14px; cursor:pointer; }
.ktop .rank { list-style:none; margin:0; padding:0; }
.ktop .rank li { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--k-line); }
.ktop .rank li:last-child { border-bottom:0; }
.ktop .rank .rn { flex:0 0 20px; height:20px; border-radius:3px; display:grid; place-items:center; font-weight:800; font-size:.72rem; color:#fff; background:var(--k-faint); }
.ktop .rank li:nth-child(1) .rn{background:var(--k-accent);} .ktop .rank li:nth-child(2) .rn{background:var(--k-soft);} .ktop .rank li:nth-child(3) .rn{background:var(--k-faint);}
.ktop .rank .rthumb { flex:0 0 44px; width:44px; height:44px; border-radius:5px; position:relative; overflow:hidden; }
.ktop .rank .rthumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ktop .rank p { margin:0; font-size:.78rem; line-height:1.4; display:block; box-sizing:content-box; height:calc(1.4em * 2); overflow:hidden; }
.ktop .catlist { list-style:none; margin:0; padding:0; }
.ktop .catlist li a { display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--k-line); font-size:.84rem; font-weight:600; color:var(--k-soft); }
.ktop .catlist li:last-child a { border-bottom:0; }
.ktop .catlist li a:hover { color:var(--k-accent); }
.ktop .catlist .n { font-size:.7rem; color:var(--k-faint); background:var(--k-alt); border-radius:3px; padding:1px 8px; }
.ktop .about .av { width:64px; height:64px; border-radius:50%; margin:0 auto 8px; background:#ffe6f0; display:grid; place-items:center; font-size:1.6rem; }
.ktop .about .aname { text-align:center; font-weight:800; font-size:.9rem; }
.ktop .about p { font-size:.78rem; color:var(--k-soft); margin:.5rem 0 0; }

/* シール情報ページ（page-seal.php）用 */
.ktop .crumb { font-size:.76rem; color:var(--k-faint); padding:14px 0 0; }
.ktop .crumb a:hover { color:var(--k-accent); }
.ktop .crumb span { margin:0 7px; }
.ktop .pagehero { padding:12px 0 20px; border-bottom:1px solid var(--k-line); margin-bottom:26px; }
.ktop .pagehero .eye { font-size:.72rem; font-weight:800; letter-spacing:.14em; color:var(--k-accent); }
.ktop .pagehero h1 { font-size:1.8rem; margin:6px 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; font-weight:700; }
.ktop .pagehero h1 small { font-size:.86rem; color:var(--k-faint); font-weight:700; }
.ktop .findtiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:36px; }
.ktop .ftile { display:flex; flex-direction:column; gap:3px; background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:16px; box-shadow:var(--k-shadow); transition:box-shadow .16s, transform .16s; }
.ktop .ftile:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-2px); }
.ktop .ftile .ic { font-size:1.4rem; }
.ktop .ftile h3 { font-size:.98rem; margin-top:2px; }
.ktop .ftile p { margin:0; font-size:.75rem; color:var(--k-faint); }
.ktop .series { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ktop .sitem { display:flex; align-items:center; gap:11px; background:var(--k-surface); border:1px solid var(--k-line); border-radius:var(--k-radius); padding:12px 14px; box-shadow:var(--k-shadow); transition:box-shadow .16s; }
.ktop .sitem:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ktop .sitem .sb { flex:0 0 40px; width:40px; height:40px; border-radius:8px; }
.ktop .sitem b { font-size:.85rem; display:block; line-height:1.3; }
.ktop .sitem .c { font-size:.7rem; color:var(--k-faint); }
.ktop .charchips { display:flex; flex-wrap:wrap; gap:8px; }
.ktop .charchip { font-size:.82rem; font-weight:700; padding:.5em 1em; border-radius:999px; background:var(--k-surface); border:1px solid var(--k-line); color:var(--k-soft); }
.ktop .charchip:hover { color:var(--k-accent); border-color:var(--k-accent); }

/* 推しキャラ導線（トップ・シールページ → /character/） */
.ktop .charstrip { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 26px; }
.ktop .charchip-ic { display:inline-flex; align-items:center; gap:8px; padding:5px 15px 5px 5px; border-radius:999px; border:1px solid var(--k-line); background:var(--k-surface); font-size:.85rem; font-weight:700; box-shadow:var(--k-shadow); transition:border-color .15s, color .15s; }
.ktop .charchip-ic img { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
.ktop .charchip-ic:hover { border-color:var(--k-accent); color:var(--k-accent); }
.ktop .charchip-ic.all { background:var(--k-accent); border-color:var(--k-accent); color:#fff !important; padding:11px 18px; }
.ktop .charchip-ic.all:hover { opacity:.88; }
/* シールページの探し方タイルに足す全幅キャラタイル */
.ktop .ftile.ftile-char { grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; background:linear-gradient(90deg,#FFF4F8,#FFFFFF); border-color:#F8CFDE; }
.ktop .ftile-char .favs { display:flex; flex:none; }
.ktop .ftile-char .favs img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-left:-9px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.ktop .ftile-char .favs img:first-child { margin-left:0; }
.ktop .ftile-char .arr { margin-left:auto; color:var(--k-accent); font-weight:800; font-size:1.2rem; }

@media (max-width:900px){
  .ktop .main-grid { grid-template-columns:1fr; }
  .ktop .pillars { grid-template-columns:1fr; }
}
@media (max-width:560px){ .ktop .findtiles, .ktop .series { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ktop .cards { grid-template-columns:repeat(2,1fr); gap:10px; } }

/************************************
** カテゴリ専用ページ（category-reservation.php / category-prefecture.php）
************************************/
/* --- 締切チップ（抽選・予約） --- */
.ktop .dl-chip { display:inline-block; font-size:.68rem; font-weight:800; color:#fff; background:var(--k-amber); border-radius:4px; padding:2px 8px; margin-bottom:6px; }
.ktop .dl-chip.urgent { background:#d32f2f; }
.ktop .dl-chip.today { background:#d32f2f; animation:ktop-blink 1.2s ease-in-out infinite; }
@keyframes ktop-blink { 50% { opacity:.55; } }
.ktop .card .cbody .dl-chip { margin:0 0 4px; }
/* 受付中セクションの注記 */
.ktop .live-note { font-size:.78rem; color:var(--k-soft); margin:-8px 0 14px; }

/* --- 都道府県ハブ（地方ごとに色分けした大ボタン・中央寄せ） --- */
.ktop .prefblock { max-width:820px; margin:0 auto 38px; }
.ktop .prefblock h3 { text-align:center; font-size:1.05rem; font-weight:700; margin:0 0 16px; }
.ktop .prefchips { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; }
.ktop .prefchip { display:flex; align-items:center; justify-content:center; gap:4px; width:150px; padding:15px 4px; border-radius:10px; color:#fff !important; font-size:.95rem; font-weight:700; transition:opacity .15s, transform .15s; }
.ktop .prefchip:hover { opacity:.85; transform:translateY(-1px); }
.ktop .prefchip .n { font-size:.78rem; opacity:.85; }
/* 地方ごとの色（地方カテゴリのslugに対応） */
.ktop .prefblock[data-region="hokkaido-tohoku"] .prefchip { background:#6A6FC4; }
.ktop .prefblock[data-region="kanto"]           .prefchip { background:#54AFA8; }
.ktop .prefblock[data-region="chubu"]           .prefchip { background:#6AB35E; }
.ktop .prefblock[data-region="kinki"]           .prefchip { background:#C4A93B; }
.ktop .prefblock[data-region="chugoku-shikoku"] .prefchip { background:#D9884A; }
.ktop .prefblock[data-region="kyushu-okinawa"]  .prefchip { background:#D96E8E; }
.ktop .pref-legend { font-size:.76rem; color:var(--k-soft); margin:0 0 24px; text-align:center; }
@media (max-width:560px){ .ktop .prefchip { width:calc(50% - 8px); padding:13px 4px; font-size:.88rem; } }

/* --- キャラ別ハブ（category-character.php） --- */
.ktop .chargrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto 44px; }
.ktop .chartile { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:24px 12px 18px; border-radius:14px; border:1px solid var(--k-line); border-top:4px solid var(--ct); background:var(--k-surface); box-shadow:var(--k-shadow); text-align:center; transition:box-shadow .16s, transform .16s; }
.ktop .chartile:hover { box-shadow:0 6px 16px rgba(0,0,0,.12); transform:translateY(-2px); }
.ktop .chartile .av { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:2rem; background:var(--ct-bg); overflow:hidden; }
.ktop .chartile .av img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.ktop .chartile h3 { font-size:1.02rem; }
.ktop .chartile .cnt { font-size:.72rem; color:var(--k-faint); font-weight:700; }
.ktop .chartile p { margin:0; font-size:.72rem; color:var(--k-soft); line-height:1.55; }
.ktop .ct-chiikawa { --ct:#F48FB1; --ct-bg:#FFE3EC; }
.ktop .ct-sanrio   { --ct:#FF6B9D; --ct-bg:#FFD9E7; }
.ktop .ct-shizuku  { --ct:#5BC6DE; --ct-bg:#DFF4F9; }
.ktop .ct-tamagotchi { --ct:#9B7BD4; --ct-bg:#EDE4FA; }
.ktop .ct-disney   { --ct:#6FA8DC; --ct-bg:#E1EEF9; }
.ktop .ct-other    { --ct:#B8B8C2; --ct-bg:#F1F1F4; }
/* セクション見出しのアバターチップ */
.ktop .row-head .chip-av { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:.95rem; margin-right:8px; vertical-align:-7px; overflow:hidden; }
.ktop .row-head .chip-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
/* 下部の「ほかのキャラ」ボタン */
.ktop .charbtns { display:flex; flex-wrap:wrap; gap:10px; }
.ktop .charbtn { display:inline-flex; align-items:center; gap:4px; padding:12px 22px; border-radius:10px; color:#fff !important; font-size:.92rem; font-weight:700; background:var(--ct,#B8B8C2); transition:opacity .15s; }
.ktop .charbtn:hover { opacity:.85; }
.ktop .charbtn .n { font-size:.78rem; opacity:.85; }
@media (max-width:640px){ .ktop .chargrid { grid-template-columns:repeat(2,1fr); gap:10px; } }

/* --- ページ送り（.ktop 内の the_posts_pagination 用） --- */
.ktop .pagi { margin-top:34px; }
.ktop .pagi .screen-reader-text { display:none; }
.ktop .pagi .nav-links { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
.ktop .pagi .page-numbers { display:inline-flex; justify-content:center; align-items:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--k-line); border-radius:6px; background:var(--k-surface); color:var(--k-ink); font-weight:700; font-size:.85rem; }
.ktop .pagi .page-numbers.current { background:var(--k-accent); border-color:var(--k-accent); color:#fff; }
.ktop .pagi a.page-numbers:hover { background:var(--k-alt); }
.ktop .pagi .page-numbers::before, .ktop .pagi .page-numbers::after { content:none; }

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

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

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