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



/* =======================================================
   📌 イラストタグの表示（シンプル版）
   内容 : 記事下に illust_tag を横並びで表示
   追加 : 2025-11-23
   備考 : functions.php のカスタマイズとセット
   ======================================================= */

/* 枠全体 */
.illust-tags {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #ddd;
  font-size: 0.9rem;
}

/* 「タグ：」ラベル */
.illust-tags__label {
  font-weight: bold;
  margin-right: 0.5em;
  color: #555;
}

/* タグ1個1個の見た目 */
.illust-tags a {
  display: inline-block;
  background: #eef7f7;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  text-decoration: none;
  color: #007b7b;
  margin-right: 0.4em;
  margin-bottom: 0.2em;
  transition: background 0.2s, color 0.2s;
}

/* ホバー時 */
.illust-tags a:hover {
  background: #c9eeee;
  color: #004e4e;
}

/* イラストのタグ表示（シンプル版・点線ナシ） */

/* 枠全体 */
.illust-tags {
  margin-top: 1.5rem;
  padding-top: 0;          /* 上の余白ちょっと減らすなら 0〜0.5rem 好きに */
  border-top: none;        /* ← ここを dashed から none にしただけ */
  font-size: 0.9rem;
}

/* 「タグ：」ラベル */
.illust-tags__label {
  font-weight: bold;
  margin-right: 0.5em;
  color: #555;
}

/* タグ1個1個の見た目 */
.illust-tags a {
  display: inline-block;
  background: #eef7f7;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  text-decoration: none;
  color: #007b7b;
  margin-right: 0.4em;
  margin-bottom: 0.2em;
  transition: background 0.2s, color 0.2s;
}

/* ホバー時 */
.illust-tags a:hover {
  background: #c9eeee;
  color: #004e4e;
}

/* タグ：とカンマを消す */
.illust-tags__label {
  display: none !important;
}

/* カンマを消すためにタグ間の区切りをスペースにする */
.illust-tags__list {
  font-size: 0 !important;
}

.illust-tags__list a {
  font-size: 0.9rem !important;
}

/* 念のため、区切りに使われる疑似要素も消す */
.illust-tags__list a::after {
  content: "" !important;
}



/* =======================================================
   📌 SNSシェアボタンのデザイン調整
   内容 : アイコン色・背景色・形状を角丸／シェアボタン角丸
   追加 : 2025-11-23
   備考 : SWELL標準シェアボタン（.c-shareBtns__item）対象
   ======================================================= */

.c-shareBtns.-bottom .c-shareBtns__btn {
  background: #A5BAC5 !important;  /* やさしいブルー */
  border-radius: 999px !important;
  padding: 0.4em 1.2em;
  color: #fff !important;
}

/* ちょっと濃いホバー */
.c-shareBtns.-bottom .c-shareBtns__btn:hover {
  background: #8FA8B8 !important;
  color: #ffffff !important;
}

/* 「リンクをコピー」濃いグレーの角丸 */
.c-shareBtns.-bottom .-copy .c-shareBtns__btn {
  background: #717476 !important;
  border-radius: 999px !important;
}



/* =======================================================
   🎨 サイドバー：「カテゴリ」ブロックの変な記号を消す
   内容 : 小さいフォルダマークみたいなやつ
   追加 : 2025-11-22
   ======================================================= */

/* サイドバーの「カテゴリ」ブロックの変な記号を消す */
#sidebar .wp-block-categories-list,
#sidebar .wp-block-categories-list li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

#sidebar .wp-block-categories-list li::before,
#sidebar .wp-block-categories-list a::before {
  content: none !important;
  display: none !important;
}



/* =======================================================
   🎨 サイドバー：新着イラスト（横長サムネ）
   内容 : 16:9比率を維持して横に並べる
   追加 : 2025-11-23
   ======================================================= */

/* リストを横並び＆余白調整 */
.l-sidebar .wp-block-query .wp-block-post {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

/* サムネイル画像 */
.l-sidebar .wp-block-query .wp-block-post-featured-image img {
  width: 100px;   /* お好みで80〜120pxに調整OK */
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px; /* お好み、丸み */
  display: block;
}

/* タイトル側のテキスト調整 */
.l-sidebar .wp-block-query .wp-block-post-title {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}