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


/* ===== Claude Design再現（2026-10）：前提はSWELL設定のヘッダー文字色＝本文色、見出し2・3＝装飾なし、キャプションのカラーセット登録 ===== */

/* ヘッダー：ロゴだけメインカラー（ナビはヘッダー文字色＝本文色のまま）。SWELLの .-txt .c-headLogo__link より強くする */
.c-headLogo.-txt .c-headLogo__link {
  color: var(--color_main);
  font-size: 18px; /* デザインの18px。ヘッダーの高さが約64pxになる */
}

/* 記事のH2：下線1px（トップページのH2には付けない） */
.single-post .post_content h2 {
  padding-bottom: .6em;
  border-bottom: 1px solid #dcdfe3;
}

/* 記事のH3：先頭に7pxの四角マーカー */
.single-post .post_content h3 {
  font-size: 18px;
  display: flex;
  gap: .55em;
  align-items: center;
}
.single-post .post_content h3::before {
  position: static;
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--color_main);
  content: "";
}

/* キャプションボックス（デフォルトスタイルのみ）：白背景・灰色の細い枠・角丸・丸型ラベル
 * 色はSWELLが出す変数をそのまま使うので、カラーセットを付けると自動で色が変わる。
 *   指定なし … メインカラー（ラベル背景は淡い青）
 *   col1〜3 … SWELL設定の「濃い色」「薄い色」 */
.post_content .cap_box:not([class*="is-style-"]) {
  padding: 1.25em 1.4em;
  background: #fff;
  border: 1px solid #dcdfe3;
  border-radius: 10px;
}
.post_content .cap_box:not([class*="is-style-"]) > .cap_box_ttl {
  display: inline-flex;
  margin-bottom: .75em !important;
  padding: .3em .9em;
  color: var(--capbox-color);
  color: color-mix(in srgb, var(--capbox-color) 80%, #000); /* 小さい文字でもコントラスト4.5:1以上にする */
  font-size: .75em;
  font-weight: 700;
  background: var(--capbox-color--bg, #eef2f6);
  border-radius: 999px;
}
.post_content .cap_box:not([class*="is-style-"]) > .cap_box_content {
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
}

/* 表：見出し行を淡い灰色に（SWELLの表の色変数を上書き。記事本文は変更しない） */
.post_content {
  --thead-color--bg: #f0f1f2;
  --thead-color--txt: #2a2e33;
  --color_border--table: #dcdfe3;
}

/* ===== 最終確認での調整（2026-10-17） ===== */

/* 本文の左端をタイトルにそろえる（PC）。SWELL標準の本文左右16pxの余白と、H2の左右へのはみ出しをなくす。本文幅は664px（デザインどおり） */
@media (min-width: 960px) {
  :root {
    --swl-pad_post_content: 0px;
    --swl-h2-margin--x: 0px;
  }
}

/* 記事タイトル：PC 28px、スマホは画面幅に合わせて小さく */
.c-postTitle__ttl {
  font-size: clamp(22px, 1.2vw + 18px, 28px);
}

/* 目次：白い箱・灰色の細い枠・角丸（見出しの青い帯は外す） */
#main_content .p-toc.-capbox {
  width: 100%; /* SWELL標準の幅92%をやめ、本文・キャプションと同じ幅に */
  overflow: hidden;
  background: #fff;
  border: 1px solid #dcdfe3;
  border-radius: 10px;
}
.p-toc.-capbox .p-toc__ttl {
  color: var(--color_text);
  background: none;
}

/* ブログカード：影ではなく細い枠と角丸（SWELLの [data-type] 指定より後に効かせる） */
.p-blogCard .p-blogCard__inner {
  border: 1px solid #dcdfe3;
  border-radius: 10px;
  box-shadow: none;
}

/* フッター：文字を少し小さく */
.l-footer .w-footer {
  font-size: 14px;
}

/* A8広告（SWELLボタン「広告タグを直接入力」）の1×1計測画像を読み込ませる。
 * SWELLの [class*="is-style-btn_"] img {display:none} で隠れると遅延読み込みが働かず、計測画像が送信されないため。 */
.swell-block-button.-html {
  position: relative;
}
.swell-block-button.-html > img[width="1"][height="1"] {
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
}