@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   トレカCROWN ブログ カスタムCSS
   最終更新: 2026-08-12
   ---------------------------------------------------------
   ※ SWELLの標準機能で足りない部分だけをここで補っています。
   ※ 各ブロックの冒頭に「何のための指定か」を書いてあります。
   ========================================================= */

:root {
  --tc-gold:   #C9A227;  /* ECサイトのメインカラー */
  --tc-gold-l: #E5C46E;
  --tc-gold-d: #A0801E;
  --tc-ink:    #1A1A1A;
}

/* ---------------------------------------------------------
   1. カテゴリーバッジの色分け
   SWELLの標準ではカテゴリラベルが単色のため、
   「お知らせ＝黒 / ブログ＝ゴールド」に塗り分ける。
   スラッグ news / blog に依存しているので、
   カテゴリのスラッグを変更した場合はここも直すこと。
   --------------------------------------------------------- */
/* SWELLはスラッグではなく data-cat-id（カテゴリID）で出力する。
   ID 1 = お知らせ(news) / ID 2 = ブログ(blog)。
   ★カテゴリを作り直した場合はIDが変わるので、ここも直すこと。
   IDは 投稿>カテゴリー でカテゴリ名にマウスを乗せ、
   URL末尾の tag_ID=◯ で確認できる。 */
.c-postThumb__cat[data-cat-id="1"],
.p-postList__cat[data-cat-id="1"] {
  background-color: var(--tc-ink) !important;
  color: #fff !important;
}
.c-postThumb__cat[data-cat-id="2"],
.p-postList__cat[data-cat-id="2"] {
  background-color: var(--tc-gold) !important;
  color: #fff !important;
}
/* 折り畳みアイコンは不要なので隠す */
.c-postThumb__cat.icon-folder::before {
  display: none;
}
/* カテゴリラベル共通の形状 */
.c-postThumb__cat,
.p-postList__cat {
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* ---------------------------------------------------------
   2. スマホ固定フッターメニュー
   一番右の「ショップ」だけをゴールドで目立たせ、
   どのページからでもECサイトへ1タップで戻れるようにする。
   メニュー項目の「説明」欄に tc-shop と入れると適用される。
   --------------------------------------------------------- */
.p-fixBtnWrap .tc-shop,
.p-fixBtnWrap li.tc-shop {
  background-color: var(--tc-gold);
}
.p-fixBtnWrap .tc-shop > a,
.p-fixBtnWrap .tc-shop a,
.p-fixBtnWrap .tc-shop span {
  color: #fff !important;
}

/* ---------------------------------------------------------
   3. サイドバー「オンラインショップ」ウィジェット
   ウィジェットのカスタムHTMLに class="tc-promo" を付けて使う。
   --------------------------------------------------------- */
.tc-promo {
  border: 2px solid var(--tc-gold);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
  background: #FFFCF3;
}
.tc-promo img {
  width: 56px;
  margin: 0 auto 10px;
  display: block;
}
.tc-promo h4 {
  font-size: 15px;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.tc-promo p {
  font-size: 13px;
  color: #666;
  margin: 0 0 14px;
  line-height: 1.7;
}
.tc-promo a.tc-btn {
  display: block;
  background: var(--tc-gold);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-decoration: none;
}
.tc-promo a.tc-btn:hover {
  background: var(--tc-gold-d);
}

/* ---------------------------------------------------------
   4. ヘッダーのCTAボタン
   グローバルナビの「ショップへ」項目に
   メニューのCSSクラス欄で tc-headbtn を指定して使う。
   --------------------------------------------------------- */
.l-header .tc-headbtn > a {
  background: var(--tc-gold);
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  padding: 11px 20px !important;
  border-radius: 4px;
  letter-spacing: .04em;
  line-height: 1;
}
.l-header .tc-headbtn > a:hover {
  background: var(--tc-gold-d);
}
.l-header .tc-headbtn > a::after {
  display: none; /* SWELLのホバー下線を消す */
}

/* ---------------------------------------------------------
   5. 見出し「PICK UP」「NEW POSTS」の装飾
   投稿リストブロックの見出しに、ゴールドの短い罫線を付ける。
   --------------------------------------------------------- */
.tc-heading {
  font-size: 14px;
  letter-spacing: .16em;
  font-weight: 800;
  margin: 0 0 18px;
}
.tc-heading::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--tc-gold);
  vertical-align: middle;
  margin-right: 10px;
}

/* ---------------------------------------------------------
   6. 人気記事ランキングの番号
   ウィジェットのリストに tc-rank クラスを付けて使う。
   --------------------------------------------------------- */
.tc-rank .n {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--tc-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
  margin-right: 8px;
}

/* ---------------------------------------------------------
   7. 記事一覧の細部調整
   タイトルの行間を詰めて、一覧の視認性を上げる。
   --------------------------------------------------------- */
.p-postList__title {
  line-height: 1.55;
}
.p-postList__excerpt {
  color: #666;
}


/* ---------------------------------------------------------
   8. フッターウィジェット
   実際の出力構造（.w-footer__box 内に .tc-ft）に合わせた指定。
   --------------------------------------------------------- */
.tc-ft h4 {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--tc-gold-l);
  margin: 0 0 12px;
}
.tc-ft p {
  font-size: 13px;
  line-height: 1.9;
  margin: 0 0 12px;
}
.tc-ft ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}
.tc-ft li {
  margin-bottom: 9px;
}
.tc-ft a {
  text-decoration: none;
}
.tc-ft a:hover {
  text-decoration: underline;
}
.tc-ft-sns a {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
  opacity: .85;
}
.tc-ft-sns a:hover {
  opacity: 1;
  text-decoration: none;
}