@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){
  /*必要ならばここにコードを書く*/
}
/* ベース */
.wrap-narrow { max-width: 1100px; margin-inline:auto; }
.ax{ --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --bg:#ffffff;
     --accent:#2563eb; --ok:#10b981; --warn:#f97316; }
.ax *{ box-sizing:border-box; }

/* ヒーロー＆カード */
.ax-hero{ background:linear-gradient(135deg,#f6f9ff,#f9fbff); padding:24px; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.ax-sub{ color:var(--muted); margin:6px 0 0; }
.ax-card{ background:#fff; border:1px solid #f1f3f5; border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.05); }
.ax-label{ color:var(--muted); font-size:.95rem; margin:0 0 4px; }
.ax-point{ margin:0; font-size:2rem; }

/* ツールバー（ヘッダー固定の下にピタッと来るよう sticky） */
.ax-toolbar-wrap{ position:sticky; top:72px; z-index:10; }
.ax-toolbar{ display:grid; grid-template-columns: 1fr auto auto; gap:10px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.04); }
.ax-search{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%; }
.ax-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ax-chip{ padding:6px 10px; border:1px solid var(--line); border-radius:9999px; background:#fff; cursor:pointer; white-space:nowrap; }
.ax-chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.ax-sort{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; }

/* グリッド */
.ax-content{ margin-top:18px; }
.ax-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.ax-offer{ border:1px solid #eef2f7; border-radius:14px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:10px; box-shadow:0 6px 16px rgba(0,0,0,.04); }
.ax-head{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.ax-title{ margin:.25rem 0; font-size:1.1rem; color:var(--ink); }
.ax-desc{ margin:0; color:var(--ink); }
.ax-meta{ display:flex; gap:12px; color:var(--muted); font-size:.92rem; }
.ax-badge{ background:var(--warn); color:#fff; border-radius:9999px; padding:2px 8px; font-size:.75rem; font-weight:700; }
.ax-badge.green{ background:var(--ok); }
.ax-badge.gray{ background:#94a3b8; }

/* ボタン */
.ax-ctas{ display:flex; gap:8px; margin-top:auto; }
.ax-btn{ border-radius:9999px; padding:10px 14px; text-decoration:none; display:inline-block; font-weight:700; text-align:center }
.ax-btn.primary{ background:var(--accent); color:#fff; }
.ax-btn.ghost{ border:2px solid var(--accent); color:var(--accent); }

/* 下段 */
.ax-lower{ margin-top:24px; }
.ax-rank{ list-style:none; padding-left:0; margin:0; }
.ax-rank li{ border:1px solid #f1f3f5; border-radius:12px; padding:10px 12px; margin:8px 0; display:flex; justify-content:space-between; box-shadow:0 6px 14px rgba(0,0,0,.04); }

/* スムーズスクロールとヘッダー被り回避（目次用） */
html{ scroll-behavior:smooth; }
:is(h1,h2,h3,h4,h5,h6,[id]){ scroll-margin-top: 96px; }

/* レスポンシブ */
@media (max-width: 1024px){
  .ax-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 782px){
  .ax-toolbar{ grid-template-columns: 1fr; }
  .ax-grid{ grid-template-columns: 1fr; }
  .ax-point{ font-size:1.7rem; }
  .ax-toolbar-wrap{ top:64px; }
}

/* サムネ画像 */
.ax-thumb {
  position: relative;
}
.ax-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0; /* 上だけ角丸 */
}
/* ポイントリボン（任意） */
.ax-ribbon {
  position: absolute;
  top: -20px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
}


.um-points-wrap{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.um-points-balance{ font-size:1.1rem; margin:0 0 10px; }
.um-points-history h4{ margin:10px 0 6px; font-size:1rem; }