/*
Theme Name: 20261001-zigzag
Author: ロジック
Version: 1.0
*/

/* ==========================================
   1. リセットCSS & 基本スタイル (最適化版)
   ========================================== */

/* ボックスモデルの統一（余白によるサイズ崩れ防止） */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 要素の初期化 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* ブロック要素の設定 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 全体ベース設定 */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FDFDFD;
  color: #0c012e;
  line-height: 1.6;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased; /* 文字のジャギつきを抑えて滑らかに */
}

/* リンク */
a {
  color: #78aafa;
  text-decoration: none;
  vertical-align: baseline;
  background: transparent;
}

a:visited {
  color: #1d3994;
}

/* リスト・テーブル・その他 */
nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* ==========================================
   2. ヘッダーエリア & グローバルナビ
   ========================================== */

/* ヘッダー全体のレイアウト */
.header-main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1600px; /* メインコンテンツの最大幅と統一 */
  margin: 0 auto;
  padding: 15px 20px;
}

/* ロゴのサイズ調整 */
.header-title img {
  max-height: 50px;
  width: auto;
  display: block;
}

/* グローバルナビゲーション */
.global-nav {
  margin-top: 10px;
}

.global-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px; /* メニュー同士の間隔 */
  align-items: center;
}

/* メニューのリンクスタイル */
.global-nav a {
  text-decoration: none;
  color: #333333;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s ease;
}

/* ホバー時の下線アニメーション */
.global-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #1b365d;
  transition: width 0.3s ease;
}

.global-nav a:hover {
  color: #1b365d;
}

.global-nav a:hover::after {
  width: 100%;
}


/* ヘッダー全体に薄い下線と下余白を追加 */
header.header-main {
  background-color: #fff;
  padding-bottom: 10px;
}
.header-main-title {
  
  padding-bottom: 15px;
}

/* ヘッダー背景・非表示要素 */
.header-main {
  background-color: #fff;
}

.header2,
.bar {
  display: none;
}

/* メイン画像 */
.header-main-picture {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 10px;
}

.header-main-picture img {
  width: 100%;
  height: auto;
  display: block;
}

.header-main-picture-media {
  display: none;
}

/* ------------------------------------------
   見出し・メインビジュアルエリア
   ------------------------------------------ */

/* 見出し（テキストの左右に線が入るデザイン） */
.text-divider {
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 2rem;
  font-family: 'Homemade Apple', cursive;
  color: #525958;
  margin-bottom: 30px;
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: #cadeda;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: 1rem;
}

.text-divider::after {
  margin-left: 1rem;
}


/* ==========================================
   3. 検索エリア & カテゴリーカードバナー
   ========================================== */

/* --- メイン画像下 検索エリア --- */
.header-search-area {
  width: 100%;
  max-width: 750px;
  margin: 35px auto 25px;
  padding: 0 15px;
  text-align: center;
  box-sizing: border-box;
}

/* 検索フォーム全体 */
.header-search-area .search-form-wrapper {
  width: 100%;
  max-width: 350px; /* 横長サイズ */
  margin: 0 auto 40px;
}

/* フォーム本体：何があっても1行（nowrap）で横並び */
.header-search-area .search-form-wrapper form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* WordPressのデフォルトのlabelやdiv対策 */
.header-search-area .search-form-wrapper form label,
.header-search-area .search-form-wrapper form div {
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* 入力エリア（余った横幅をすべて使う） */
.header-search-area input[type="search"],
.header-search-area input[type="text"] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border: 2px solid #222 !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  outline: none !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
}

/* 検索ボタン（右側にピタッと固定） */
.header-search-area input[type="submit"],
.header-search-area button {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  height: 48px !important;
  background-color: #222 !important;
  color: #fff !important;
  border: 2px solid #222 !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* クイック検索タイトル */
.header-search-area .quick-title,
.quick-title-search {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #444;
  margin: 0 0 12px 0;
}

/* クイックボタンの並び */
.header-search-area .quick-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* クイックボタン本体 */
.header-search-area .quick-btn {
  display: inline-block;
  padding: 9px 18px;
  background-color: #ffffff;
  color: #333333;
  text-decoration: none;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: bold;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}

.header-search-area .quick-btn:hover {
  background-color: #f0f0f0;
  border-color: #999;
  transform: translateY(-2px);
}

/* ------------------------------------------
   簡易カードバナーエリア（4枚並び）
   ------------------------------------------ */
.header-category-pictures {
  width: 100%;
  max-width: 1200px; /* メインコンテンツの幅と統一 */
  margin: 60px auto 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* カード共通スタイル */
.simple-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px 15px;
  min-height: 150px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  background-color: #333333;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 暗めオーバーレイフィルター */
.simple-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease;
  z-index: 1;
}

.simple-card:hover::before {
  background: rgba(0, 0, 0, 0.35);
}

.simple-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* カード内の要素レイヤー（フィルターの上に出す） */
.card-badge,
.card-icon,
.card-title,
.card-sub {
  position: relative;
  z-index: 2;
}

/* バッジスタイル */
.card-badge {
  position: absolute;
  top: -1px;
  background-color: #3182ce;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.5px;
}

/* アイコン */
.card-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* タイトル */
.card-title {
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 1.35;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* サブテキスト */
.card-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* アクセントライン（上部のカラー線） */
.card-1 { border-top: 5px solid #3182ce; }
.card-2 { border-top: 5px solid #00a3c4; }
.card-3 { border-top: 5px solid #319795; }
.card-4 { border-top: 5px solid #636e72; }
.card-4 .card-badge { background-color: #636e72; }

/* ==========================================
   4. メインレイアウト共通設定 (トップ & 記事詳細)
   ========================================== */

/* 親枠（共通ベース） */
.index-main,
.single-main {
  display: flex;
  width: 100%;
  padding: 0 20px 60px;
  box-sizing: border-box;
  background-color: #fff;
}

/* ★ トップページ用：上余白は20pxのままコンパクトに */
.index-main {
  justify-content: space-between;
  gap: 50px;
  max-width: 1350px;
  margin: 20px auto 0;
}

/* ★ 記事詳細ページ用：全体をキュッと絞って中央寄せ */
.single-main {
  justify-content: space-between; /* ★ flex-start から space-between（両端揃え）に変更 */
  gap: 60px; 
  max-width: 1180px; /* ★ 1320px から 1080px に絞ることで右側の余白をなくします */
  margin: 50px auto 0; /* 左右autoで画面中央に配置 */
}

/* メインコンテンツエリア共通ベース */
article.main-content,
article.singlecontent {
  flex: 1;
  min-width: 0;
}

/* トップページ用 */
article.main-content {
  max-width: none;
}

/* 記事詳細ページ用：読みやすい幅に制限 */
article.singlecontent {
  max-width: 740px; /* ★ 少しだけ幅を広げるとバランスが良くなります */
}

/* サイドバーエリア (共通) */
aside {
  width: 320px;
  flex-shrink: 0;
}

.side-topad {
  width: 100%;
}

/* ------------------------------------------
   記事カード一覧エリア（横3列・余白の最適化）
   ------------------------------------------ */
.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0 50px 0;
  padding: 0;
}
/* カード全体の立体感・カード枠 */
.item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバー時にふわっと浮き出る効果 */
.item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* リンクエリア */
.item a,
.main-content .item a {
  display: block !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

/* サムネイル画像 */
.wp-post-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  display: block;
  transition: transform 0.3s ease;
}

.item:hover .wp-post-image {
  transform: scale(1.04);
}

/* ==========================================
   PCサイズ（制限なし）：タイトル表示コード
   ========================================== */
.caption-text {
  /* 3行省略の指定 */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-all !important;

  /* 文字・背景デザイン */
  text-align: center !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background-color: #ffffff !important;
  color: #1b1b1b !important;
  width: 100% !important;
  border-radius: 0 0 10px 10px !important;
  box-sizing: border-box !important;

  /* 高さを78pxで完全固定 */
  margin: 0 !important;
  padding: 10px 12px !important;
  height: 78px !important;
  max-height: 78px !important;
  min-height: 78px !important;
}

/* ホバー時もタイトル枠のサイズを維持 */
.item:hover .caption-text {
  height: 78px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}
/* ==========================================
   サイドバー全般スタイル
   ========================================== */

/* --- サイドバーの見出し（共通デザイン化） --- */
.st-widgets-title,
.prof-box-title,
.sidebar-title,
.sidebar-title2 {
  box-sizing: border-box;
  font-weight: 700;
  padding: 12px 0 12px 15px;
  border-left: solid 2px #0072FF;
  border-bottom: solid 3px #0072FF;
}

/* 上部マージンの個別調整 */
.st-widgets-title,
.sidebar-title {
  margin: 0 0 1.2rem;
}

.prof-box-title,
.sidebar-title2 {
  margin: 40px 0 1.2rem;
}


/* サイドバーの見出し上に余白を確保 */
.sidebar-title {
  margin-top: 50px !important;
}


/* --- 広告・画像バナーエリア --- */
.picture-adv-1 {
  width: 100%;
  height: auto;
  background-color: #fff;
}

.picture-adv-1 p {
  text-align: center;
  padding-top: 100px;
}

/* --- プロフィールボックス --- */
.prof-box {
  background-color: #fff;
}

.prof-box p {
  width: 100%;
  margin-top: 10px;
  padding: 0 5px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  box-sizing: border-box;
}

/* --- SNSフォローボタンエリア --- */
.social-container {
  display: flex;
  gap: 10px;
  margin: 20px 0 10px;
}

.social-container a {
  flex: 1; /* 親幅に合わせて自動で50%ずつ分配 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 18px; /* アイコンを見やすい大きさに調整 */
  text-decoration: none;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* SNSボタンのFontAwesomeアイコンカラー設定 */
.social-container a .fa-x-twitter,
.social-container a .fa-twitter {
  color: #000000 !important; /* Xのブランドカラー（黒） */
}

.social-container a .fa-instagram {
  color: #e4405f !important; /* Instagramのブランドカラー（ピンク） */
}

/* ホバー時の挙動 */
.social-container a:hover {
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ==========================================
   サイドバー ウィジェット＆ランキング調整
   ========================================== */

/* リストの黒丸を非表示 */
#widget-01 li,
#widget-02 li,
.widget_block,
.widget_block ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* カテゴリー＆アーカイブ等のリンク基本設定 */
.cat-item a,
#widget-02 li {
  padding: 0.75em 0.5em;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
  display: block;
  line-height: 1.5;
  text-decoration: none;
  transition: padding 0.25s, color 0.25s;
}

.cat-item a:hover,
#widget-02 li a:hover {
  padding-left: 1em; /* ホバー時に少し右に動く演出 */
  color: #00aced;
}

#widget-02 li a {
  color: #333;
  text-decoration: none;
}

/* ウィジェットのブロック間隔 */
#block-8 {
  margin-top: 30px;
}

/* 検索フォーム（サイドバー幅に合わせる） */
.kensaku {
  margin: 30px 0;
  width: 100%; /* サイドバー幅（300px）にフィット */
}

/* ウィジェット見出し（H2）のデザイン調整 */
.widget_block h2 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  width: 100%; /* 横幅いっぱいに伸ばす */
  background-color: #8cdbfa;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* 人気記事ランキング（WordPress Popular Posts等） */
.ranking {
  width: 100%; /* 大きすぎる幅を100%に修正 */
  background-color: #fff;
  margin: 30px 0;
}

.wpp-list li {
  margin-bottom: 15px;
  width: 100%; /* 800pxからサイドバーサイズに修正 */
  border: 1px solid #4278f5;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
}

.wpp-post-title {
  color: #333;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.4;
}

.post-stats {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #666;
}

/* カテゴリブロック（またはリスト）の下に余白を作る */
.widget_categories,
.wp-block-categories-list {
  margin-bottom: 70px !important; /* お好みで 35px〜50px で調整してください */
}

/* ランキングバナーエリア */
.blogmura {
  display: flex;
  gap: 10px;
  margin-top: 35px !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 👈 横幅が狭くなったら自動で折り返す */
}

/* ==========================================
   ページネーション（モダンデザイン）
   ========================================== */

/* 全体の配置と余白 */
.pagination,
.nav-links,
.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* ボタン同士の隙間 */
  margin: 30px 0 30px;
  padding: 0;
  list-style: none;
}

/* リンク・現在のページ・Dotsの共通ベース */
.page-numbers li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-numbers a,
.page-numbers span,
a.page-numbers,
span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px; /* マイルドな角丸 */
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #4a5568;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* ホバー時のデザイン */
.page-numbers a:hover,
a.page-numbers:hover {
  background-color: #8cdbfa; /* メインテーマカラー */
  border-color: #8cdbfa;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(140, 219, 250, 0.4);
}

/* 現在アクティブなページ */
.page-numbers .current,
span.page-numbers.current {
  background-color: #4278f5; /* アクセントブルー */
  border-color: #4278f5;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(66, 120, 245, 0.3);
}

/* 省略記号（…）のデザイン */
.page-numbers .dots,
span.page-numbers.dots {
  border: none;
  background: transparent;
  box-shadow: none;
  color: #a0aec0;
}

/* スマホ表示時の最適化 */
@media screen and (max-width: 768px) {
  .page-numbers a,
  .page-numbers span,
  a.page-numbers,
  span.page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
  }
}


/* ==========================================
   ページトップへ戻るボタン (pagetop)
   ========================================== */
#pagetop {
  position: fixed !important;
  right: 20px;
  bottom: 25px;
  z-index: 9999 !important; /* 他の要素の裏に隠れないよう最前面へ */
}

#pagetop a {
  display: flex !important; /* JSによる display:none を強行上書き */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #4278f5; /* テーマのブルー */
  color: #ffffff;
  font-size: 22px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(66, 120, 245, 0.35);
  transition: all 0.3s ease;
}

#pagetop a:hover {
  background: #2b5cd9;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(66, 120, 245, 0.45);
  opacity: 1;
}

/* 📱 スマホ表示時（767px以下） */
@media screen and (max-width: 767px) {
  #pagetop {
    display: block !important;
    position: fixed !important;
    /* 画面右端ではなく、画面中央（白枠基準）から位置を計算 */
    left: 50% !important;
    right: auto !important;
    transform: translateX(140px) !important; /* ★白枠の右下にフィットさせる調整値 */
    bottom: 15px !important;
  }
  
  #pagetop a {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* ==========================================
   記事詳細ページ（single.php）レイアウト
   ========================================== */

/* サイト全体：すべてのリンクの下線を消す */
a {
  text-decoration: none;
}

/* 記事メインコンテンツエリア */
.singlecontent {
  background-color: #fff;
  width: 100%;
}

/* タイトル・日付エリア */
.single-posts {
  position: relative;
  padding-top: 4px;
  margin-bottom: 30px;
  min-height: 95px;
}

/* 日付バッジ（カレンダーボックス） */
.single-post-date {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 95px;
  padding-top: 8px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: #333;
  font-size: 0.9rem;
  text-align: center;
}

/* 月日（中央の仕切り線） */
.single-post-date span {
  display: block;
  width: 55%;
  margin: 2px auto 0;
  padding-top: 2px;
  border-top: 1px solid rgba(20, 20, 20, 0.3);
  font-size: 0.9rem;
}

/* 魚アイコン（日付ボックス底面に固定） */
.single-post-date .fa-snowflake{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 17px;
  color: #d1e3ff;        /* ★氷っぽく薄い青系（#3b82f6 や #60a5fa）にするのもおすすめ */
}

/* 記事タイトル（コンパクト化・1.5rem指定） */
.single-post-title {
  font-family: "Yu Mincho", "Yumincho", serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 0 95px;
}

/* カテゴリーリンク */
.single-post-cat {
  margin: 12px 0 0 95px;
  font-size: 0.95rem;
}

.single-post-cat a {
  color: #23cf4b;
  font-weight: 600;
  transition: opacity 0.2s;
}

.single-post-cat a:hover {
  opacity: 0.8;
}

/* アイキャッチ画像 */
.single-item {
  margin-bottom: 30px;
}

.single-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ==========================================
   記事本文（the_content）エリア
   ========================================== */

/* 本文エリア全体の幅設定 */
.midasi-top {
  width: 98%;
  margin: 0 auto;
}

/* 本文の段落（文字の詰め・行間・フォント修正） */
.midasi-top p {
  font-family: Helvetica, 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;       /* ★文字詰まりの原因だった normal を解消し、ゆったり調整 */
  margin-top: 0;
  margin-bottom: 1.8em;   /* ★段落同士の適切な縦余白（1文字分強） */
  color: #333;
}

/* シェアボタンコメント */
.share-button-coment {
  margin-bottom: 20px;
  color: #00aced;
}



/* ==========================================
   フッター（Footer）レイアウト
   ========================================== */

footer {
  width: 100%;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}

/* 波線（SVG）装飾 */
.footer-wave {
  width: 100%;
  height: 80px;
  line-height: 0;
  margin-bottom: -1px; /* 波線と背景の隙間を完璧に消す */
}

.footer-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* フッター本体背景エリア */
.footer-content {
  background-color: #72b6fe; /* ★波の色の指定（fill）と全く同じカラーコードにする */
  color: #ffffff;
  padding: 10px 0 30px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.footer-site-name {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /* お仕事依頼バナーとの間の余白 */
}

.footer-site-name a {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}

/* ロゴ画像本体 */
.footer-logo-img {
  width: 180px;        /* PCでの表示幅（160px〜200px程度でお好み調整） */
  height: auto;
  display: block;
  /* 画像の背景が透過で、青背景の上でくっきり見せたい場合（必要に応じて有効化） */
  /* filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); */
}

/* お仕事依頼CTAエリア */
.footer-work-cta {
  text-align: center;
  margin-bottom: 25px;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.4); /* 背景になじむ半透明ホワイト */
  border-radius: 8px;
  display: inline-block;
}

.cta-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: #111;
  margin: 0 0 10px 0;
}

/* ボタンのデザイン */
.cta-btn {
  display: inline-block;
  background-color: #00aced; /* 目の引く差し色（または濃い青など） */
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, background-color 0.2s;
}

.cta-btn:hover {
  background-color: #0084b4;
  transform: translateY(-2px);
}

.cta-btn i {
  margin-right: 5px;
}

/* フッターナビゲーション */
.footer-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-nav li {
  position: relative;
}

/* リンク同士の間に入れる縦区切り線 */
.footer-nav li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #000;
  margin: 0 15px;
  vertical-align: middle;
}

.footer-nav a {
  color: #000;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

/* ホバー時に下線が左から伸びるアニメーション（以前の演出をそのまま継承） */
.footer-nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}

.footer-nav a:hover::after {
  transform: scale(1, 1);
}

/* コピーライト表記 */
.copyright {
  font-size: 0.8rem;
  color: #444;
  margin-top: 10px;
}

/* レスポンシブ（スマホ表示調整） */
@media screen and (max-width: 768px) {
  .footer-wave {
    height: 40px;
  }

}

/* ==========================================
   目次（Table of Contents Plus）
   ========================================== */

/* 目次全体的外枠 */
#toc_container {
  width: 100% !important;
  margin: 40px auto;
  padding: 24px 28px;
  background-color: #fffaf0;
  border: 4px solid #f0e3c9;
  border-radius: 8px;
  color: #333;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 目次タイトル */
#toc_container .toc_title {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2d7c1;
  color: #2c2c2c;
  letter-spacing: 0.05em;
}

/* リスト全体 */
#toc_container .toc_list {
  padding-left: 0px;
  margin: 0;
}

/* 親見出し（H2クラス） */
#toc_container .toc_list > li {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ★親見出しのタイトル（濃い色＆少し太字） */
#toc_container .toc_list > li > a {
  color: #1a1a1a !important;   /* 濃い黒・紺系 */
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

#toc_container .toc_list > li > a:hover {
  color: #00aced !important;
  text-decoration: underline !important;
}

/* 子見出し（H3クラス） */
#toc_container .toc_list ul {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 10px;
}

#toc_container .toc_list ul li {
  font-size: 0.9em;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ★子見出しのタイトル（標準的な濃さ） */
#toc_container .toc_list ul li a {
  color: #333333 !important;   /* やや濃いめ */
  text-decoration: none !important;
  transition: color 0.2s ease;
}

#toc_container .toc_list ul li a:hover {
  color: #00aced !important;
}

/* ★★★ 目次番号（数字部分）の色・スタイル設定 ★★★ */
#toc_container .toc_number {
  color: #64748b !important;   /* 上品で適度な濃さのアッシュ系 */
  font-weight: 400 !important;  /* 数字は細めにして主張を抑える */
  margin-right: 0.4em;         /* 数字とテキストの間の余白 */
}

/* 目次のリストマーク（黒丸）を消して字下げだけに整える */
#toc_container .toc_list, 
#toc_container .toc_list ul {
  list-style: none !important;
}
/* ==========================================
   投稿記事内の見出し（スッキリ最新版）
   ========================================== */

.midasi-top h2 {
  position: relative;
  width: 100%;
  margin: 50px 0 30px;
  padding: 0.8em 1em;
  font-size: 1.3rem;
  font-weight: bold;
  color: #454545;
  background-color: #38bdf8;
  border: 2px dashed #ffffff;
  box-shadow: 0 0 0 5px #38bdf8;
  border-radius: 2px;
  box-sizing: border-box;
  line-height: 1.5;
}

/* 左上の折り返し（リボン風アクセント） */
.midasi-top h2::after {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #ffffff #ffffff #a8d4ff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}
/* --- H3：左バー＋すっきりアンダーライン --- */
.midasi-top h3 {
  width: 100%;
  margin: 45px 0 25px;
  padding: 0.2em 0 0.4em 12px;
  font-size: 1.15rem;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  box-sizing: border-box;
  border-left: 5px solid #6d84f6;
  border-bottom: 2px solid #749cdb;
}

/* --- H4見出し：左縦バー ＋ 控えめな細い下線 --- */
.midasi-top h4 {
  width: 100%;
  margin-top: 35px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-bottom: 6px;
  font-size: 1.05rem;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  box-sizing: border-box;
  /* H3（5px）より細く控えめな左バー */
  border-left: 3px solid #93c5fd; 
  /* H3（2px/3px）より主張しない細くうっすらした下線 */
  border-bottom: 2px solid #f1f5f9; 
}

pre {
	background-color:#eee;
 	border:none;
	margin: 20px 0;
	padding:7px;
	overflow: auto;
}
.prettyprint {
	position: relative;
	padding: 40px 20px 20px 20px;
}
.prettyprint ol{
  white-space: pre-wrap;
}
.ribbon-html::before {
	content: "HTML";
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
	color: #fff;
	text-align: center;
	background: #ffbf7f;
	width: 50px;
	height: 25px;
	top: 0px;
	left: 0px;
}
.ribbon-css::before {
	content: "CSS";
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
	color: #fff;
	text-align: center;
	background: #7fbfff;
	width: 50px;
	height: 25px;
	top: 0px;
	left: 0px;
}
.prettyprint ol.linenums > li {
	font-size: 14px;
	border-left: 0.5px solid #aeaeae;
	margin-left: 10px;
	padding: 0 0 0 20px;
	list-style-type: decimal;
	list-style-position: outside;
}
code{
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
}

/* レスポンシブ対応・安全版 */
.wpcf7-form.init {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.afi-block{
	    border: 5px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.05);
    padding: 30px 10px 20px;
    text-align: center;
    font-weight: bold;
}

	.afi-block p{
		margin-top:0px;
		margin-bottom : 10px;
		color: #da0f1b;
		font-family: SourceHanSansJP;
	}

/* ==========================================
   吹き出し会話ブロック（左：ツリ子 / 右：くぅた）
   ========================================== */

/* 共通ベーススタイル */
.chara-talk,
.chara-talk2 {
  margin: 50px 0;
  padding: 0;
}

.chara-talk li,
.chara-talk2 li {
  position: relative;
  width: 65%;
  padding: 15px;
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
  border-radius: 7px;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.chara-talk li + li,
.chara-talk2 li + li {
  margin-top: 40px;
}

.chara-talk li:empty,
.chara-talk2 li:empty {
  display: none;
}

/* 吹き出しのヒゲ（共通） */
.chara-talk li::before,
.chara-talk2 li::before {
  content: '';
  position: absolute;
  top: 19px;
  width: 10px;
  height: 10px;
}

/* アイコン枠・名前（共通） */
.chara-talk li span,
.chara-talk2 li span {
  display: block;
  position: absolute;
  top: -5px;
  width: 50px;
  height: 50px;
}

.chara-talk li span::before,
.chara-talk2 li span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: no-repeat center / cover;
}

.chara-talk li span::after,
.chara-talk2 li span::after {
  display: block;
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  font-size: 11px;
  text-align: center;
}

/* ------------------------------------------
   1. 左吹き出し：ツリ子（.chara-talk）
   ------------------------------------------ */
.chara-talk li {
  margin-left: 80px;
  background-color: #fffafe;
  border: 2px solid #ffbae0;
}

/* ヒゲ（左） */
.chara-talk li::before {
  left: -7px;
  background-color: #fffafe;
  border-top: 2px solid #ffbae0;
  border-right: 2px solid #ffbae0;
  transform: rotate(-135deg);
}

/* アイコン（左） */
.chara-talk li span { left: -78px; }
.chara-talk li span::before { border: 2px solid #ffbae0; }

/* 2番目の配色オーバーライド（ピンク系背景で統一） */
.chara-talk li:nth-child(2n) {
  background-color: #fff9f1;
  border-color: #ffddaa;
}
.chara-talk li:nth-child(2n)::before {
  background-color: #fff9f1;
  border-color: #ffddaa;
}

/* キャラ設定：ツリ子 */
.chara-talk .fukkun span::before {
  background-image: url("https://zigzag-kimama.com/wp-content/uploads/2024/06/名称未設定のデザイン-28-preview.png");
}
.chara-talk .fukkun span::after {
  content: 'ツリ子';
}

/* ------------------------------------------
   2. 右吹き出し：くぅた（.chara-talk2）
   ------------------------------------------ */
.chara-talk2 li {
  margin-left: auto;   /* ★ 左側に自動で余白を作り、右端に寄せる */
  margin-right: 80px;  /* ★ 右側のアイコン表示用の隙間を確保（ツリ子の80pxと統一） */
  background-color: #f3f6f9;
  border: 2px solid #c3d2de;
}

/* ヒゲ（右） */
.chara-talk2 li::before {
  right: -7px;
  background-color: #f3f6f9;
  border-top: 2px solid #c3d2de;
  border-right: 2px solid #c3d2de;
  transform: rotate(45deg);
}

/* アイコン（右） */
.chara-talk2 li span { right: -78px; }
.chara-talk2 li span::before { border: 2px solid #555555; }

/* 2番目の配色オーバーライド */
.chara-talk2 li:nth-child(2n) {
  background-color: #fff9f1;
  border-color: #ffddaa;
}
.chara-talk2 li:nth-child(2n)::before {
  background-color: #fff9f1;
  border-color: #ffddaa;
}

/* キャラ設定：くぅた */
.chara-talk2 .fukkun2 span::before {
  background-image: url("https://zigzag-kimama.com/wp-content/uploads/2024/06/名称未設定のデザイン-29-Photoroom.png");
}
.chara-talk2 .fukkun2 span::after {
  content: 'くぅた';
}

/* ==========================================
   この記事を書いた人（#editor-box）
   ========================================== */
#editor-box {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 40px auto 20px;
  padding: 24px 20px 20px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 上部の枠線上タイトル */
.adviser-title {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 12px;
  font-size: 14px;
  font-weight: bold;
  color: #64748b;
  background-color: #ffffff;
  white-space: nowrap;
}

.d-flex {
  display: flex;
  align-items: flex-start;
}

.editor-info {
  width: 100%;
  color: #333333;
}

.editor-info .status {
  margin: 0 0 2px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.editor-info .name {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #1e293b;
  line-height: 1.2;
}

.editor-info .ruby {
  margin: 2px 0 12px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1;
}

/* ==========================================
   折りたたみ（アコーディオン）設定
   ========================================== */
.hidden_box {
  margin-top: 10px;
}

/* チェックボックス本体は非表示 */
.hidden_box input[type="checkbox"] {
  display: none;
}

/* 開閉ボタン（矢印付き） */
.hidden_box label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  background-color: #38bdf8;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(96, 165, 250, 0.3);
}

/* ボタン右側の「▼」矢印アイコン */
.hidden_box label::after {
  content: '▼';
  font-size: 10px;
  transition: transform 0.3s ease;
}

/* ホバー時の効果 */
.hidden_box label:hover {
  background-color: #3b82f6;
  transform: translateY(-1px);
}

/* チェックが入った時（開いた時）の矢印回転 */
.hidden_box input[type="checkbox"]:checked + label::after {
  transform: rotate(180deg);
}

/* 非表示エリア */
.hidden_show {
  display: none;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #e2e8f0;
}

/* チェックが入ったら表示 */
.hidden_box input[type="checkbox"]:checked ~ .hidden_show {
  display: block;
}

.profile-title {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #475569;
}

.editor-profile {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #334155;
}
/* ==========================================
   メリット・デメリット比較ボックス（共通ベース）
   ========================================== */
.compare-box,
.compare-box2 {
  display: flex;
  max-width: 600px;
  margin: 30px auto;
  background: #fef9ed;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 左右の列（50%ずつ） */
.compare-left-wrap, .compare-right-wrap,
.compare-left-wrap2, .compare-right-wrap2 {
  display: flex;
  flex-direction: column;
  width: 50%;
}

/* ヘッダータイトル */
.compare-left-head, .compare-right-head,
.compare-left-head2, .compare-right-head2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

/* 本文コンテンツ枠 */
.compare-left, .compare-right,
.compare-left2, .compare-right2 {
  flex: 1;
  padding: 1.2em 1em;
  font-size: 15px;
  line-height: 1.8;
}

/* リスト全体の装飾 */
.compare-box .list,
.compare-box2 .list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}

.compare-box .list li,
.compare-box2 .list li {
  position: relative;
  margin: 0.4em 0 !important;
  padding: 0 0 0.5em 1.4em !important;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px dashed #e2e8f0;
}

.compare-box .list li:last-child,
.compare-box2 .list li:last-child {
  border-bottom: none;
}

/* リスト前の丸ポッチ（共通） */
.compare-box .list li::before,
.compare-box2 .list li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ------------------------------------------
   カラーパターン1（通常版：スカイブルー × オレンジ）
   ------------------------------------------ */
.compare-box-separate .compare-left-head { background-color: #60a5fa; } /* メインテーマのスカイブルー */
.compare-box-separate .compare-left      { background-color: #f0f9fc; }
.compare-box-separate .compare-left .list li::before { background-color: #60a5fa; }

.compare-box-separate .compare-right-head { background-color: #fab561; }
.compare-box-separate .compare-right     { background-color: #fff6f2; }
.compare-box-separate .compare-right .list li::before { background-color: #ffa883; }

/* ------------------------------------------
   カラーパターン2（濃色版：ダークブルー × ゴールド）
   ------------------------------------------ */
.compare-box-separate2 .compare-left-head2 { background-color: #1a5aa5; }
.compare-box-separate2 .compare-left2      { background-color: #fafafa; }
.compare-box-separate2 .compare-left2 .list li::before { background-color: #78aafa; }

.compare-box-separate2 .compare-right-head2 { background-color: #daa520; }
.compare-box-separate2 .compare-right2     { background-color: #fffdf7; }
.compare-box-separate2 .compare-right2 .list li::before { background-color: #ffa883; }


/* ==========================================
   レビューボックス（デザイン完全保持・軽量化版）
   ========================================== */
.reviewBox {
  display: block;
  background: #FFF;
  border: 3px solid #f5f5f5;
  margin: 40px auto;
  padding: 0;
  border-radius: 10px;
  max-width: 660px;
  box-sizing: border-box;
}

.reviewBox .reviewBox_content {
  padding-top: 30px;
  max-width: 450px;
  margin: 0 auto;
}

/* タイトル部分 */
.reviewBox .reviewBox_title1 {
  margin: 0;
  padding: 12px;
  background: #fff;
  text-align: center;
  font-size: 15px !important;
  font-weight: bold;
  line-height: 1.3em;
  border-bottom: solid 2px #f5f5f5;
}

.reviewBox .reviewBox_title1:before {
  font-family: "Font Awesome 5 Free";
  content: "☑";
  font-weight: 600;
  padding-right: 5px;
  font-size: .9em !important;
}

.reviewBox p {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

.reviewBox .reviewBox_title2 {
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1.3em;
  font-size: 16px !important;
  font-weight: bold;
}

.reviewBox .reviewBox_title2:before {
  content: none !important;
}

/* 上段（テキスト ＋ 画像） */
.reviewBox .reviewBox_top {
  margin: auto;
  display: flex;
}

.reviewBox .reviewBox_top p {
  margin: 0;
  line-height: 2.0em;
  font-size: 13px !important;
  width: 100%;
}

.reviewBox .reviewBox_top p:before {
  font-family: "Font Awesome 5 Free";
  content: "✔";
  font-weight: 600;
  padding-right: 5px;
  font-size: .8em;
}

.reviewBox .reviewBox_top .reviewBox_left,
.reviewBox .reviewBox_top .reviewBox_right {
  width: 50%;
}

.reviewBox .reviewBox_top .reviewBox_right img {
  display: block;
  margin: auto;
  width: 160px;
}

/* 中段（円グラフエリア） */
.reviewBox .reviewBox_center {
  display: flex;
  margin-top: 20px;
  margin-bottom: 50px;
}

.reviewBox .reviewBox_center .progress-circle {
  width: 25%;
  margin: auto;
}

/* 円グラフ本体 */
.reviewBox .progress-circle {
  font-size: 12px !important;
  margin: 20px;
  position: relative;
  padding: 0;
  width: 5em !important;
  height: 5em !important;
  background-color: #FBEFC6;
  border-radius: 50%;
  line-height: 5em;
  overflow: hidden; /* 黒い線のハミ出し予防 */
}

.reviewBox .progress-circle:after {
  border: none;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  background-color: #FAFAFA;
  content: " ";
  z-index: 3; /* 内側の白い円を上面へ */
}

.reviewBox .progress-circle .progress-text {
  position: absolute;
  line-height: 2.6em;
  width: 2.6em;
  text-align: center;
  display: block;
  color: #444 !important;
  font-size: 23px !important;
  z-index: 4; /* 数字を一番上面へ */
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

.reviewBox .reviewBox_score {
  font-size: 13px !important;
  text-align: center;
  line-height: 1em;
  z-index: 4;
  padding-top: 5em;
  display: block;
  font-weight: 600;
}

.reviewBox .reviewBox_score p {
  margin: 0;
  font-size: 12px !important;
}

/* 円グラフのアニメーション・クリップ計算 */
.reviewBox .left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
}

.reviewBox .progress-circle.over50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}

.reviewBox .value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em !important;
  height: 5em !important;
  border-radius: 50%;
  border: 0.5em solid #FCCB28;
  box-sizing: border-box;
}

.reviewBox .progress-circle.over50 .first50-bar {
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
  background-color: #FCCB28;
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.reviewBox .progress-circle:not(.over50) .first50-bar,
.reviewBox .progress-circle.p0 .value-bar {
  display: none;
}

/* 角度回転 */
.reviewBox .progress-circle.p1 .value-bar   { transform: rotate(4deg); }
.reviewBox .progress-circle.p10 .value-bar  { transform: rotate(36deg); }
.reviewBox .progress-circle.p20 .value-bar  { transform: rotate(72deg); }
.reviewBox .progress-circle.p30 .value-bar  { transform: rotate(108deg); }
.reviewBox .progress-circle.p40 .value-bar  { transform: rotate(144deg); }
.reviewBox .progress-circle.p50 .value-bar  { transform: rotate(180deg); }
.reviewBox .progress-circle.p60 .value-bar  { transform: rotate(216deg); }
.reviewBox .progress-circle.p70 .value-bar  { transform: rotate(252deg); }
.reviewBox .progress-circle.p80 .value-bar  { transform: rotate(288deg); }
.reviewBox .progress-circle.p90 .value-bar  { transform: rotate(324deg); }
.reviewBox .progress-circle.p100 .value-bar { transform: rotate(360deg); }


/* ==========================================
   PC用：レビューボックス
   ========================================== */
.reviewBox {
  display: block;
  background: #FFF;
  border: 3px solid #f5f5f5;
  margin: 40px auto;
  padding: 0;
  border-radius: 10px;
  max-width: 660px;
  box-sizing: border-box;
}

.reviewBox .reviewBox_content {
  padding: 25px 20px 15px; /* 下部余白を小さく調整 */
  max-width: 450px;
  margin: 0 auto;
}

/* タイトル部分 */
.reviewBox .reviewBox_title1 {
  margin: 0;
  padding: 12px;
  background: #fff;
  text-align: center;
  font-size: 15px !important;
  font-weight: bold;
  line-height: 1.3em;
  border-bottom: solid 2px #f5f5f5;
}

.reviewBox .reviewBox_title1:before {
  font-family: "Font Awesome 5 Free";
  content: "☑";
  font-weight: 600;
  padding-right: 5px;
  font-size: .9em !important;
}

.reviewBox p {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

.reviewBox .reviewBox_title2 {
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1.3em;
  font-size: 16px !important;
  font-weight: bold;
}

.reviewBox .reviewBox_title2:before {
  content: none !important;
}

/* 上段（テキスト ＋ 画像） */
.reviewBox .reviewBox_top {
  margin: auto;
  display: flex;
}

.reviewBox .reviewBox_top p {
  margin: 0;
  line-height: 2.0em;
  font-size: 13px !important;
  width: 100%;
}

.reviewBox .reviewBox_top p:before {
  font-family: "Font Awesome 5 Free";
  content: "✔";
  font-weight: 600;
  padding-right: 5px;
  font-size: .8em;
}

.reviewBox .reviewBox_top .reviewBox_left,
.reviewBox .reviewBox_top .reviewBox_right {
  width: 50%;
}

.reviewBox .reviewBox_top .reviewBox_right img {
  display: block;
  margin: auto;
  width: 160px;
}

/* 中段（円グラフエリア） */
.reviewBox .reviewBox_center {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px; /* 50pxから20pxに削減して隙間を緩和 */
}

.reviewBox .reviewBox_center .progress-circle {
  width: 25%;
  margin: auto;
}

/* 円グラフ本体 */
.reviewBox .progress-circle {
  font-size: 12px !important;
  margin: 20px;
  position: relative;
  padding: 0;
  width: 5em !important;
  height: 5em !important;
  background-color: #FBEFC6;
  border-radius: 50%;
  line-height: 5em;
  overflow: hidden;
}

.reviewBox .progress-circle:after {
  border: none;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  background-color: #FAFAFA;
  content: " ";
  z-index: 3;
}

.reviewBox .progress-circle .progress-text {
  position: absolute;
  line-height: 2.6em;
  width: 2.6em;
  text-align: center;
  display: block;
  color: #444 !important;
  font-size: 23px !important;
  z-index: 4;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

.reviewBox .reviewBox_score {
  font-size: 13px !important;
  text-align: center;
  line-height: 1em;
  z-index: 4;
  padding-top: 5em;
  display: block;
  font-weight: 600;
}

.reviewBox .reviewBox_score p {
  margin: 0;
  font-size: 12px !important;
}

/* 円グラフの描画計算 */
.reviewBox .left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
}

.reviewBox .progress-circle.over50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}

.reviewBox .value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em !important;
  height: 5em !important;
  border-radius: 50%;
  border: 0.5em solid #FCCB28;
  box-sizing: border-box;
}

.reviewBox .progress-circle.over50 .first50-bar {
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
  background-color: #FCCB28;
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.reviewBox .progress-circle:not(.over50) .first50-bar,
.reviewBox .progress-circle.p0 .value-bar {
  display: none;
}

/* 角度回転 */
.reviewBox .progress-circle.p1 .value-bar   { transform: rotate(4deg); }
.reviewBox .progress-circle.p10 .value-bar  { transform: rotate(36deg); }
.reviewBox .progress-circle.p20 .value-bar  { transform: rotate(72deg); }
.reviewBox .progress-circle.p30 .value-bar  { transform: rotate(108deg); }
.reviewBox .progress-circle.p40 .value-bar  { transform: rotate(144deg); }
.reviewBox .progress-circle.p50 .value-bar  { transform: rotate(180deg); }
.reviewBox .progress-circle.p60 .value-bar  { transform: rotate(216deg); }
.reviewBox .progress-circle.p70 .value-bar  { transform: rotate(252deg); }
.reviewBox .progress-circle.p80 .value-bar  { transform: rotate(288deg); }
.reviewBox .progress-circle.p90 .value-bar  { transform: rotate(324deg); }
.reviewBox .progress-circle.p100 .value-bar { transform: rotate(360deg); }


/* ==========================================
   スマホ表示用 (max-width: 600px)
   ========================================== */
@media screen and (max-width: 600px) {
  .reviewBox .reviewBox_content {
    padding: 15px 15px 10px; /* 一番下の余白を小さく */
  }
  
  .reviewBox .reviewBox_title1 {
    width: 100%;
    box-sizing: border-box;
  }

  .reviewBox .reviewBox_top {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  /* 画像 */
  .reviewBox .reviewBox_top .reviewBox_right {
    order: 1;
    width: 100%;
  }

  .reviewBox .reviewBox_top .reviewBox_right img {
    width: 220px;
  }

  /* テキスト側 */
  .reviewBox .reviewBox_top .reviewBox_left {
    order: 2;
    width: 100%; /* 横幅いっぱいに指定 */
    margin: 15px auto 0;
  }

  .reviewBox .reviewBox_top p {
    font-size: 13px !important;
    width: 100% !important; /* 幅制限100pxを解除して全幅に */
  }

  .reviewBox .reviewBox_top p:first-child {
    font-size: 15px !important;
  }

  .reviewBox .reviewBox_center {
    padding: 0;
    margin-top: 15px;
    margin-bottom: 15px; /* 下部マージンを小さく */
  }

  /* 注記の余白調整 */
  .reviewBox .tsuiki {
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* 円グラフ・スコア */
  .reviewBox .progress-circle {
    font-size: 10px !important;
  }

  .reviewBox .progress-circle .progress-text {
    line-height: 2.2em;
    width: 2.2em;
    font-size: 23px !important;
  }

  .reviewBox .reviewBox_score p {
    font-size: 10px !important;
    width: 100%;
  }

  /* 購入リンクボタン */
  .reviewBox .reviewLink a {
    padding: .5em;
    font-size: 13px !important;
  }
}



/*/// YouTube Shorts Embed ///*/
.youtube-shorts-wrap {
  max-width: 320px;            /* スマホ等でも収まりやすいサイズ */
  aspect-ratio: 9 / 16;        /* Shortsの標準縦横比 */
  margin: 30px auto;           /* 上下に30pxの余白を作り、左右中央寄せ */
  position: relative;
  overflow: hidden;
  border-radius: 12px;         /* 角を丸くすると雰囲気が良くなります（お好みで） */
}

.youtube-shorts-wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}


a.btn-radius-solid {
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
}
.btn3,
a.btn3,
button.btn3 {
  margin : 0 auto;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}


.mercaributton{
	margin-top: 20px;
}

.table-circle{
  display: inline-block;
  width: 25px;
  height: 25px;
 top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  border: solid 5px skyblue;
  position : absolute;
  opacity: 0.3;
 
}


.table-circle2{
  display: inline-block;
  width: 25px;
  height: 25px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  border: solid 5px #ffc7d9;
  position : absolute;
  opacity: 0.5;
 
}

.table-circle3{
  display: inline-block;
  width: 10px;
  height: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  border: solid 5px #ffc7d9;
  position : absolute;
  opacity: 0.5;
 
}


/*黄色のマーカ*/
.yellow_line {background:rgba(0, 0, 0, 0)
   linear-gradient(transparent 60%, #FFFF88 0%)
    repeat scroll 0 0;}
/* ==========================================
   ブログカード（PC表示：画像まわりに10px余白）
   ========================================== */
.blogcard {
  width: 100%;
  background-color: #fffdf7;
  border: 1px solid #000;
  word-wrap: break-word;
  margin: 30px auto 15px;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, .025);
  box-sizing: border-box;
  overflow: hidden;
}

.blogcard a {
  display: flex;
  align-items: center; /* 上下中央揃え */
  text-decoration: none;
  color: #000;
  padding: 10px; /* カード全体の基本余白 */
}

.blogcard a:hover {
  background-color: #fffff0;
  transition: background-color 0.2s ease;
}

/* PC：サムネイル（上下左右に10pxの余白を持たせる） */
.blogcard_thumbnail {
  flex-shrink: 0;
  width: 150px;      /* 画像の横幅（余白込みでバランスよく調整） */
  padding: 2px 10px 2px 2px;     /* 上下左右に10pxの余白を設定 */
  box-sizing: border-box;
}

.blogcard_thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC：右側コンテンツエリア */
.blogcard_content {
  flex: 1;
  min-width: 0;
  padding: 10px 15px 10px 5px; /* 上・右・下・左の余白調整 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blogcard_title {
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #000;
}

.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.5;
  margin: 0;
  color: #333;
}


/* ==========================================
   スマホ表示用 (max-width: 480px)
   ※上段：画像＋タイトル / 下段：本文
   ========================================== */
@media screen and (max-width: 480px) {
  .blogcard a {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    padding: 10px;
    gap: 8px 10px;
  }

  /* 画像（左上エリア） */
  .blogcard_thumbnail {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 100%;
    padding: 0; /* スマホ時は全体余白で調整されるため0に */
  }

  .blogcard_thumbnail img {
    border-radius: 4px;
  }

  .blogcard_content {
    display: contents;
  }

  /* タイトル（右上エリア） */
  .blogcard_title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 0.95em;
    margin: 0;
    align-self: center;
  }

  /* 本文（下段エリア） */
  .blogcard_excerpt {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    font-size: 0.8em;
    line-height: 1.5;
    margin-top: 4px;
  }
}

.circle{
	width: 25px;
  height: 25px;
  border-radius: 50%;
 margin: 0 auto;
}


/* YouTube 埋め込み用外枠コンテナ */
.youtube-wrap {
  max-width: 600px;
  margin: 35px auto;
  border-radius: 12px;           /* 角を丸くして優しく */
  overflow: hidden;               /* 枠からはみ出る動画の角をカット */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* うっすらとした立体感のある影 */
  border: 1px solid #e5e7eb;     /* シンプルな薄い枠線 */
  background-color: #000;
}

/* 16:9 の完全レスポンシブ動画プレイヤー */
iframe.youtube-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;          /* 正しい構文で16:9を維持 */
  height: auto;                  /* 固定の220px指定を解除し、自動計算へ */
  display: block;
  border: 0;
  margin: 0;
}

/* ==========================================
   toko-list1
   ========================================== */
.toko-list1 ul,
.toko-list1 ol {
  width: 100%;
  display: block;
  padding: 0.8em 1em 0.8em 2em;
  border: solid 1.5px #ffb3de; /* 線の種類 太さ 色 */
  margin: 20px 0;
  list-style-type: disc;
  line-height: 1.8;
  font-family: Helvetica, 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  box-sizing: border-box;
}

.toko-list1 ul li,
.toko-list1 ol li {
  line-height: 1.7;
  padding: 0.4em 0;
}


/* ==========================================
   toko-list3（枠線付き＆ひし形アイコンリスト）
   ========================================== */
.toko-list3 {
  margin: 25px 0;
  width: 100%;
}

.toko-list3 ul,
.toko-list3 ol {
  display: block;
  width: 100%;             /* スマホでは横幅いっぱいに */
  max-width: 600px;        /* PC・タブレットで広がりすぎるのを防止 */
  margin: 0 auto;          /* 中央配置 */
  padding: 1.2em 1.5em;    /* 内側の余白 */
  border: solid 2.5px #ededed;
  border-radius: 8px;      /* 角を少し丸くしてスマホで優しく見せる */
  list-style: none;        /* デフォルトの丸ポチを消す */
  box-sizing: border-box;
  background-color: #fff;  /* 背景色 */
}

.toko-list3 li {
  position: relative;
  padding-left: 20px;      /* アイコンとテキストの間隔 */
  line-height: 1.6;        /* スマホで読みやすい標準的な行高 */
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 15px;         /* スマホに最適化した見やすいサイズ */
  color: #333;
}

/* 項目間の区切り線（薄く入れて見やすくする） */
.toko-list3 li:not(:last-child) {
  border-bottom: 1px dashed #f0f0f0;
}

/* ひし形（◆）アイコン */
.toko-list3 li::before {
  content: "";
  position: absolute;
  top: 1.15em;             /* 1行目のテキストの高さにぴったり合わせる */
  left: 2px;
  width: 7px;
  height: 7px;
  background-color: #fc9403;
  transform: rotate(45deg); /* 45度回転してひし形に */
}

/* ==========================================
   スマホ専用の調整 (画面幅 600px 以下)
   ========================================== */
@media screen and (max-width: 600px) {
  .toko-list3 ul,
  .toko-list3 ol {
    padding: 1em 1.2em;   /* スマホ時は内側の横余白を少しギュッと詰める */
  }

  .toko-list3 li {
    font-size: 14.5px;    /* 小さめスマホでも崩れない文字サイズ */
    padding-left: 18px;
  }
}


.sbd-table-btn{
	    display: inline-block;
    padding: 10px;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, .1) inset;
    text-align: center;
    color: #fff;
    font-weight: normal;
	background: #eab060 !important;
}

/* ==========================================
   背景ボックス（共通ベーススタイル）
   ========================================== */
.haikei,
.haikei2,
.haikei3 {
font-family: Helvetica, 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  padding: 24px 22px;
  margin-top: 0 !important;
  margin-bottom: 35px !important; /* ← 強制適用で確実に下マージンを作ります */
  border-radius: 8px;
  box-sizing: border-box;
  display: block !important;
}

/* --- カラーバリエーション --- */
.haikei {
  background-color: #f7f7f7; /* 薄いグレー */
}

.haikei2 {
  background-color: #fffbeb !important;
 
}

.haikei3 {
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
}

/* --- テキスト全体の詰まり感解消 --- */
.haikei,
.haikei2,
.haikei3,
.haikei p,
.haikei2 p,
.haikei3 p {
  font-size: 15px;
  line-height: 2.2;          /* 行高を2.2倍にして上下の詰まりを完全に解消 */
  letter-spacing: 0.05em;    /* 横の文字同士の詰まり感を和らげる */
  color: #333333;
  margin: 0;
}

/* もしHTML内で <br> 改行を使っている場合の隙間拡張 */
.haikei br,
.haikei2 br,
.haikei3 br {
  content: "";
  display: block;
  margin-bottom: 0.6em;      /* <br> の後に少し広い隙間（段落感）を作る */
}

/* 太字強調（インラインで文章に溶け込ませる） */
.haikei strong,
.haikei2 strong,
.haikei3 strong {
  font-weight: bold;
  color: #1a1a1a;
  padding-right: 0.2em;      /* 太字の直後に少し余白を入れて読みやすく */
}


/* ==========================================
   スマホ用調整 (画面幅 480px 以下)
   ========================================== */
@media screen and (max-width: 600px) {
  .haikei,
  .haikei2,
  .haikei3 {
    padding: 20px 18px;      /* スマホ用の枠内余白 */
    margin-bottom: 25px;     /* ← スマホ時の下側マージン */
  }

  .haikei,
  .haikei2,
  .haikei3,
  .haikei p,
  .haikei2 p,
  .haikei3 p {
    font-size: 14.5px;       /* スマホに最適な文字サイズ */
    line-height: 2.1;        /* スマホでもしっかり行間を開ける */
    letter-spacing: 0.04em;  /* 横の詰まりを緩和 */
  }
}


/* テーブルを囲む親要素（スマホ時の横スクロール対応） */
.table_box {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールをなめらかに */
  margin-bottom: 30px;
}

/* テーブル本体 */
.midashi-table1 {
  width: 100%;
  max-width: 650px;
  min-width: 530px !important;       /* ★潰れ防止：全体で最低530pxの幅をキープ */
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
}

/* ヘッダー（最上行：すべてのthを青に統一） */
.midashi-table1 th {
  padding: 12px 8px;
  background: #ebf5ff !important;
  border: solid 1px #cbd5e1;
  color: #1e3a8a;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
}

/* データセル（本文） */
.midashi-table1 td {
  padding: 12px 8px;
  border: solid 1px #e5e7eb;
  color: #374151;
  vertical-align: middle;
  text-align: center;
  line-height: 1.5;
  background-color: #ffffff;
  word-break: break-word;
}

/* 一番左の列（項目名列：幅固定・改行防止） */
.midashi-table1 th:first-child,
.midashi-table1 td:first-child {
  width: 110px !important;
  min-width: 110px !important;
  white-space: nowrap !important;
}

/* 右側のデータ列（各製品列の最小幅を確保して潰れ防止） */
.midashi-table1 th:not(:first-child),
.midashi-table1 td:not(:first-child) {
  width: 140px !important;
  min-width: 140px !important;       /* ★1列あたり最低140px確保 */
}

/* 一番左のデータセル（項目名列のみ極薄グレーに指定） */
.midashi-table1 td:first-child {
  background-color: #fafafa;
  font-weight: bold;
}

/* 画像の崩れ防止 */
.midashi-table1 img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Amazonボタン内の折り返しを防止 */
.midashi-table1 .my-affiliate-link a {
  white-space: nowrap;
}

/* ==========================================
   アフィリエイトボタン（共通基本設定）
   ========================================== */
.my-affiliate-link {
  width: 100%;
  margin: 6px 0;
}

.my-affiliate-link a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 8px;            /* 上下左右のパディング（テーブル内でも綺麗に収まるサイズ） */
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff !important;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;          /* ボタン内テキストの途中の改行を防止 */
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

/* ホバー設定 */
.my-affiliate-link a:hover {
  opacity: 0.85;
}

/* トラッキング（計測用）ピクセル画像の非表示化 */
.my-affiliate-link img[width="1"][height="1"] {
  display: none !important;
}

/* --- ブランド別背景色 --- */
/* Amazon */
.my-affiliate-link.amazon a {
  background-color: #f3a847;
}

/* 楽天 */
.my-affiliate-link.rakuten a {
  background-color: #bf0000;
}

/* Yahoo!ショッピング */
.my-affiliate-link.yahoo a {
  background-color: #ff0033;
}


/* ==========================================
   スマホ表示時の最適化（画面幅 600px 以下）
   ========================================== */
@media screen and (max-width: 600px) {
  .midashi-table1 {
    min-width: 500px;                 /* スマホでも潰れすぎないよう最小横幅を確保 */
  }
  
  .midashi-table1 th,
  .midashi-table1 td {
    padding: 10px 6px;
    font-size: 13px;                  /* スマホ用に文字サイズを調整 */
  }
}

.scroll{
	font-size:15px;
	margin-left:10px;
	display:none;
}



.matome-tsuigeki {
    padding: 18px 20px 10px;
    margin-bottom: 25px;
    background: #fff0b3;
    border-top: 1px solid #f7e8c4;
    border-bottom: 1px solid #f7e8c4;
    background-color: #fffcf0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #fcfbeb), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #fcfbeb), color-stop(0.75, #fcfbeb), color-stop(0.75, transparent), to(transparent));
    background-size: 18px 18px;
}

.matome-tsuigeki .title {
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 20px;
    font-size: 18px;
	width: 100% ; 
}

.matome-tsuigeki .title b {
	font-size: 17px;
    color: #595959;
}

.matome-tsuigeki ul li {
    margin-bottom: 9pt;
	list-style: none;
}

.matome-tsuigeki ul li a .text {
    text-align: center;
    display: block;
	font-size : 1.0rem;
}

.matome-tsuigeki ul li a {
    background: url(img/arrow_gray.png) no-repeat 95% center #fff;
    background-size: 8px;
    display: block;
    border: solid 1px #eee;
    border-bottom: solid 1px #ccc;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    padding:  0;
    line-height: 1.5;
    box-shadow: inset 0 -2px 2px #eee;
 	margin-left: -10px;
}

.tsuiki{
	font-size: 13px;
	margin-top:5px;
	margin-bottom: 20px;
	color: #474747;
}

.marker-line {
	background :#ffffaf;
}


.pr-box{
	display: inline-block;
	background-color: #f5f5f5;
    background-image:
	 repeating-linear-gradient(-45deg,#fff, #fff 2px,transparent 0, transparent 4px);
	padding: 8px 15px 8px 15px;
	font-family: Georgia;
}
/* 共通の囲み枠スタイル */
/* 赤色ボックス（box27） */
.box27 {
  position: relative;
  margin: 2.5em 0;
  padding: 1.2em 1.2em 1em;        /* 上の余白を調整して見出しと本文を配置 */
  border: solid 2px #ff5752;       /* 枠線を少し細くしてスマートに */
  border-radius: 12px;             /* 角丸を柔らかく */
  background-color: #fff;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}

/* 枠線上の「✖」アイコン */
.box27 .box-title {
  position: absolute;
  top: -12px;                      /* 枠線の上にぴったり載せる */
  left: 16px;
  padding: 0 6px;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
  background-color: #fff;          /* 枠線を消すための背景白 */
  color: #ff5752;
}

/* 「ここは注意！」などの直後の太字部分を見出し化 */
.box27 > strong:first-of-type {
  display: block;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 0.5em;
}


/* 水色ボックス（box26）も同じ構造にする場合 */
.box26 {
  position: relative;
  margin: 2.5em 0;
  padding: 1.2em 1.2em 1em;
  border: solid 2px #95ccff;
  border-radius: 12px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}

.box26 .box-title {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 0 6px;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
  background-color: #fff;
  color: #95ccff;
}

.box26 > strong:first-of-type {
  display: block;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 0.5em;
}

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-bottom: 3px solid #b84c00;
  border-radius:3px;
  padding: 5px 5px 2px 5px;
  font-size:12px;

}


a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 1px solid #b84c00;
}
/* カード一覧コンテナ（自動レスポンシブ配置） */
#column ul {
  display: grid;
  gap: 20px 16px;                    /* 上下の隙間 20px / 左右の隙間 16px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 画像のレスポンシブ化 */
#column img {
  width: 100%;
  height: auto;
  display: block;
}

/* リンクテキスト */
#column li a,
#column li a:visited {
  text-decoration: none;
  color: #111;
  display: block;
}

/* タイトルテキスト */
#column li p {
  font-size: 0.9em;
  margin: 8px 0 3px;
  line-height: 1.4;
}

/* 補足・日付テキスト */
#column li span {
  font-size: 0.8em;
  color: #666;
  display: block;
}

/* 列数の制御（CSS Grid） */
.column02 { grid-template-columns: repeat(2, 1fr); }
.column03 { grid-template-columns: repeat(3, 1fr); }
.column04 { grid-template-columns: repeat(4, 1fr); }
.column05 { grid-template-columns: repeat(5, 1fr); }

/* スマホ表示時は自動で2列（または1列）に崩れなく調整 */
@media screen and (max-width: 600px) {
  .column03, .column04, .column05 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* レビューセクション全体 */
.review-section {
  width: 100%;
  padding: 1rem 0;
  background: #f5f5f5;
  margin: 0 auto 20px; /* 上0、左右auto、下10px */
}

.review-title {
  text-align: center;
  letter-spacing: 0.5rem;
  font-weight: bold;
}

/* レビューリスト */
.review-section ul {
  max-width: 1000px;
  list-style-type: none;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* 各レビューアイテム（基本2列） */
.review-section li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.5rem;
  border-top: 1px solid #ccc;
  padding: 1rem 0;
}

.review-section li:last-child {
  border-bottom: 1px solid #ccc;
}

/* 右側に商品画像（.item）がある場合のみ3列にする設定 */
.review-section li:has(.item) {
  grid-template-columns: 100px 1fr 100px;
}

/* ユーザーアイコン（丸形） */
.review-section .user {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: solid 1px #eee;
}

/* レビュー詳細エリア */
.review-area {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.review-area p {
  margin: 0;
}

.review-area .name,
.review-area .date {
  font-size: 0.8rem;
  color: #383838;
}

/* 本文（約2文字分早く折り返す設定） */
.review-area .comment {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  padding-right: 2em; /* pタグ自体の右余白 */
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ★ 既存HTML内の span タグが余白を打ち消すのを防ぐ強力指定 */
.review-area .comment span {
  display: inline-block;
  max-width: 100%;
}

/* --------------------------------------------------
   ★ 星評価（スター）の型抜き描画設定
-------------------------------------------------- */
.review-area [class*="star"]::before {
  content: '★★★★★';
  font-size: 1.2rem;
  display: inline-block;
  line-height: 1;
  color: transparent;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.review-area .star5::before {
  background: #fac225;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.review-area .star4-5::before {
  background: linear-gradient(to right, #fac225 90%, #d9d9d9 91%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.review-area .star4::before {
  background: linear-gradient(to right, #fac225 80%, #d9d9d9 81%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.review-area .star3-5::before {
  background: linear-gradient(to right, #fac225 70%, #d9d9d9 71%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.review-area .star3::before {
  background: linear-gradient(to right, #fac225 60%, #d9d9d9 61%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.review-area .star2::before {
  background: linear-gradient(to right, #fac225 40%, #d9d9d9 41%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* 📱 スマホ表示時（600px以下） */
@media screen and (max-width: 600px) {
  .review-section li {
    grid-template-columns: 60px 1fr;
    gap: 1rem;
  }

  .review-section .user {
    width: 60px;
    height: 60px;
  }

  .review-area .comment {
    padding-right: 1.8em; /* スマホ時の折り返し位置調整 */
  }

  /* --------------------------------------------------
     ★ スマホ時だけ「名前・星・本文」の縦の隙間を詰める設定
  -------------------------------------------------- */
  .review-area {
    gap: 1.5rem;            /* 要素同士の間隔を狭くする */
  }

  .review-area p {
    margin: 0 !important;   /* pタグに勝手につく上下余白をリセット */
  }
}


/* 文字色（黒） */
.click {
  color: #000;
}

/* 共通スタイル（ctn, ctn2, ctn3, ctn4 すべてにボタンの基本形を適用） */
.ctn,
.ctn2,
.ctn3,
.ctn4 {
  display: inline-block; /* リンクタグに幅や余白を効かせるため追加 */
  width: 300px;
  padding: 8px 13px 6px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* デフォルト（オレンジ） */
.ctn {
  background-color: #ff9900;
  border-bottom: 1px solid #e0b000;
}

/* カラーバリエーション */
.ctn2 {
  background-color: #07cf00;
  border-bottom: 1px solid #06ab00;
}

.ctn3 {
  background-color: #cf4944;
  border-bottom: 1px solid #b33d39;
}

.ctn4 {
  background-color: #51769e;
  border-bottom: 1px solid #426284;
}

   @media (max-width: 600px) {
    .review-section li {
     display: block;
    }
    .review-section .user,
    .review-section .item {
     display: none;
    }
    .review-area {
     margin-bottom: 0.5rem;
    }
    .review-section a {
     font-size: inherit;
    }
   }

  /* 固定ページ（プライバシーポリシー等）のスタイル整頓 */
.page-content {
  background: #ffffff;
  padding: 15px ;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

/* ページタイトル (h1) */
.page-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333333;
  padding-bottom: 12px;
  margin-bottom: 30px;
  border-bottom: 3px solid #1a73e8; /* サイトのメインカラーに合わせて色変更してください */
}

/* 本文内の小見出し (h2) */
.page-body h2 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #222222;
  margin-top: 35px;
  margin-bottom: 15px;
  padding-left: 12px;
  border-left: 4px solid #1a73e8; /* 左側にアクセント線を入れる */
  line-height: 1.4;
}

/* 本文段落 */
.page-body p {
  margin-bottom: 1.2em;
  line-height: 1.8;
  color: #444444;
}

/* 箇条書きリスト (ul / li) */
.page-body ul {
  margin: 15px 0 25px 20px;
  padding-left: 10px;
}

.page-body li {
  margin-bottom: 8px;
  line-height: 1.6;
  list-style-type: disc;
}

/* ==========================================
   お問い合わせフォーム（Contact Form 7）専用装飾
   ========================================== */

/* フォーム全体枠 */
.wpcf7 {
  margin-top: 20px;
}

/* ラベルテキスト */
.wpcf7 label {
  display: block;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16px;
  width: 100%;
}

/* 入力枠（テキスト・メール・題名） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
  display: block;
  width: 100% !important;
  max-width: 500px; /* 横幅を広げる */
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
  background-color: #fcfcfc;
}

/* メッセージ本文（テキストエリア） */
.wpcf7 textarea {
  display: block;
  width: 100% !important;
  max-width: 600px;
  min-height: 150px;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
  background-color: #fcfcfc;
}

/* 入力中の青枠表示 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: #1a73e8;
  background-color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  background-color: #1a73e8; /* メインカラー（青） */
  color: #ffffff;
  font-weight: bold;
  font-size: 1rem;
  padding: 12px 36px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #1557b0;
}



/* ==========================================
   💻 タブレット〜小型PC表示時（1024px以下）
   ========================================== */
@media screen and (max-width: 1024px) {

  /* 1. 全体枠組み：メインとサイドバーの2カラム（横並び）を強制維持 */
  div.index-main.wrapper,
  .single-main {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
    padding: 0 20px;
    gap: 25px;             /* 隙間を詰めて圧迫感を軽減 */
    margin-top: 30px;
    box-sizing: border-box;
  }

  /* 2. メインコンテンツ枠の設定 */
  div.index-main.wrapper article.main-content,
  .single-main article.singlecontent {
    flex: 1;
    width: auto;
    min-width: 0;          /* Flexbox内のグリッド崩れ・はみ出しを防ぐ重要プロパティ */
    max-width: 100%;
  }

  /* 3. 記事一覧カードを 3列 → 2列 に切り替え */
  div.index-main.wrapper article.main-content .content,
  article.main-content .content,
  .content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2列表示を指定 */
    gap: 20px 15px;
  }

  /* 4. サイドバーの幅を固定 */
  div.index-main.wrapper aside.sidebar,
  .single-main aside {
    width: 280px;
    flex-shrink: 0;
  }

  /* 5. 吹き出し会話ブロック */
  .chara-talk li,
  .chara-talk2 li {
    width: 75%;
  }

  /* 6. カテゴリブロックの下余白 */
  .widget_categories,
  .wp-block-categories-list {
    margin-bottom: 50px !important;
  }

  /* 7. ランキングバナーエリア */
  .blogmura {
    margin-top: 80px !important;
  }



}


/* ==========================================
   📱 850px以下：1カラム化 ＋ メイン記事・カテゴリカード2列化
   ========================================== */
@media screen and (max-width: 850px) {
  
  /* グローバルナビの文字サイズと左右間隔をひとまわり縮小 */
  header.header-main ul li a,
  header.header-main nav a {
    font-size: 13px;       /* 文字サイズ（デフォルトより小さめ） */
    padding-left: 1px;    /* メニュー間の横余白を縮小 */
    padding-right: 1px;
  }
  
  /* --- 1. 全体枠組みを縦並び（1カラム）へ --- */
  /* --- 1. 全体の左右余白を広げる（15px → 25px） --- */
  /* --- 1. 全体枠組みを縦並び（1カラム）へ --- */
  div.index-main.wrapper,
  .single-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px;
    padding: 0 25px;
  }

  /* --- 2. メインコンテンツ枠の設定 --- */
  div.index-main.wrapper article.main-content,
  .single-main article.singlecontent {
    width: 100%;
    max-width: 100%;
    float: none;
    display: block;
    height: auto;
  }

  /* 記事一覧エリア（.content）を2列にレイアウト */
  div.index-main.wrapper article.main-content .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 15px;
    width: 100%;
    height: auto;
  }

  /* 記事カード要素がGrid内で100%に広がるように調整 */
  div.index-main.wrapper article.main-content .content > * {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
  }

  /* --- 3. サイドバーを正しく下に配置 --- */
  div.index-main.wrapper aside.sidebar,
  .single-main aside {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
    margin-top: 0;
  }

/* --- 4. ヘッダーカテゴリカード（ひとまわり縮小 ＆ 差別化） --- */
  .header-category-pictures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;                  /* カード同士の隙間を小さく */
    width: 85%;                 /* 幅を絞って新着記事カードよりひとまわり小さく */
    max-width: 600px;           /* 広がりすぎを防止 */
    margin: 50px auto 50px;        /* 中央寄せ ＋ 下にマージン確保 */
  }

  .header-category-pictures .simple-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 110px;              /* カードの縦幅を少しコンパクトに制限 */
    padding: 8px;               /* 内側の余白を詰める */
    box-sizing: border-box;
  }

  /* カード内の文字とアイコンのスケールダウン */
  .header-category-pictures .simple-card .card-title {
    font-size: 13px;            /* タイトル文字を少し小さく */
    line-height: 1.3;
  }

  .header-category-pictures .simple-card .card-sub {
    font-size: 10px;            /* サブテキストも小さく */
  }

  .header-category-pictures .simple-card .card-badge {
    font-size: 10px;            /* バッジ文字を縮小 */
    padding: 2px 6px;
  }

  /* --- 5. 吹き出しの調整 --- */
  .chara-talk li,
  .chara-talk2 li {
    width: 80%;
    font-size: 13px;
    padding: 8px 12px;
  }
/* ページナビ（外枠）のマージン削減 */
  div.index-main.wrapper article.main-content nav.navigation.pagination {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  /* 青色領域（ul.page-numbers）の高さを最適化 */
  div.index-main.wrapper article.main-content nav.navigation.pagination ul.page-numbers {
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0 auto;
    line-height: 1;
  }

  /* 内部リンク・数字ボタンのサイズ・余白調整 */
  div.index-main.wrapper article.main-content nav.navigation.pagination ul.page-numbers li,
  div.index-main.wrapper article.main-content nav.navigation.pagination ul.page-numbers a,
  div.index-main.wrapper article.main-content nav.navigation.pagination ul.page-numbers span {
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  
/* トップページ・投稿ページ共通：サイドバー内の画像をコンパクトに縮小＋中央寄せ */
  div.index-main.wrapper aside.sidebar .picture-adv-1 img,
  div.index-main.wrapper aside.sidebar img,
  .single-main aside.sidebar .picture-adv-1 img,
  .single-main aside img {
    width: 80%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 40px auto 0;
    border-radius: 8px;
  }

/* ブログ村・ランキングバナー（小バナー専用） */
  .blogmura img.banner-small {
    width: auto !important;
    max-width: 110px !important;
    height: auto !important;
    display: block !important;
    margin: 50px auto !important;
  }

  /* アイコン */
.card-icon {
  font-size: 30px;
  margin-bottom: 6px;
 
}

}


/* ==================================================
 * スマホ用ドロワーメニュー（600px以下）
 * ================================================== */
@media screen and (max-width: 600px) {

  /* 1. PC用の横テキストナビ（global-nav）を非表示 */
  header.header-main nav.global-nav {
    display: none !important;
  }

  /* 2. ロゴ領域のサイズ調整と配置 */
  header.header-main .header-main-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px 0 0px !important;
  }

  header.header-main .header-title img {
    width: 150px !important;
    height: auto !important;
  }

  /* 3. 青いメニューバー本体（.header2） */
  .header2 {
    display: block !important;
    width: 100% !important;
    height: 45px !important;
    position: relative !important;
    background: #0072FF !important;
    overflow: hidden !important;
    transition: height 0.4s ease !important;
    /* ロゴとの隙間（マージン）を追加 */
    margin-top: 15px !important; /* お好みに応じて 10px 〜 20px で微調整してください */
  }

  /* タップして開いた時の高さ */
  .header2.shownav {
    height: 300px !important;
  }

  /* 4. ハンバーガー（三本線）トリガーボタン */
  .dc-menu-trigger {
    position: absolute !important;
    top: 12px !important;
    left: 15px !important;
    display: block !important;
    width: 28px !important;
    height: 20px !important;
    cursor: pointer !important;
    z-index: 30 !important;
    text-indent: -9999px !important; /* 「Menu」の素テキストを隠す */
    font-size: 0 !important;
  }

  /* 三本線の真ん中の線 */
  .dc-menu-trigger span {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    margin-top: -1.5px !important;
    background-color: #fff !important;
    transition: background-color 0.3s !important;
  }

  /* 上下の線（:before, :after） */
  .dc-menu-trigger span:before,
  .dc-menu-trigger span:after {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    content: '' !important;
    transition: transform 0.3s ease !important;
  }

  .dc-menu-trigger span:before {
    transform: translateY(-7px) !important;
  }

  .dc-menu-trigger span:after {
    transform: translateY(7px) !important;
  }

  /* 開いた時に「×」印に変形 */
  nav.dc-menu-open .dc-menu-trigger span {
    background-color: transparent !important;
  }

  nav.dc-menu-open .dc-menu-trigger span:before {
    transform: translateY(0) rotate(45deg) !important;
  }

  nav.dc-menu-open .dc-menu-trigger span:after {
    transform: translateY(0) rotate(-45deg) !important;
  }

  /* 5. メニューリスト（.menu-overlay） */
  .menu-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
  }

  .menu-overlay ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 50px 0 0 0 !important;
    margin: 0 !important;
    list-style: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  /* 開いた状態（openクラス）でリスト表示 */
  .menu-overlay.open ul {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .menu-overlay ul li {
    margin: 12px 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .menu-overlay ul li a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    letter-spacing: 2px !important;
  }


  /* スマホ表示時の記事詳細タイトルのサイズ調整 */
  .singlecontent .single-post-title {
    font-size: 1.0rem !important; /* お好みに合わせて 1.1rem 〜 1.3rem で調整可能 */
    line-height: 1.4 !important;   /* 行間を詰めてスッキリ見せる */
    margin-bottom: 10px !important;
  }

.single-post-cat a
{ 
font-size: 0.9rem !important; 
}

/* 1. 検索エリア全体の上下ゆとり */
.header-search-area {
  margin-top: 10px;
  padding-top: 25px !important;    /* メイン画像との間の余白 */
  padding-bottom: 30px !important; /* 下のカード群との間の余白 */
}

/* 2. 検索窓フォームと「人気のカテゴリ」テキストの間の余白 */
.search-form-wrapper {
  margin-bottom: 20px !important;
}

.quick-title-search{
margin-top: 15px !important;
  margin-bottom: 15px !important;
}

/* 3. 「人気のカテゴリ・ランキングから探す」の見出し上下余白 */
.quick-title {
  margin-top: 40px !important;
  margin-bottom: 15px !important;
}

/* 4. 丸型ボタン群（クーラーボックス・保冷バッグ・保冷剤）の底余白 */
.quick-btn-group {
  margin-bottom: 10px !important;
}

/* 5. 下の画像カード群の上の余白 */
.header-category-pictures {
  margin-top: 15px !important;
}

/* 親コンテナ：2列並びを維持 */
  .header-category-pictures {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;             /* スマホ用に隙間を少し詰める */
    padding: 0 4px;
  }

  /* カード本体：横長の比率に固定 */
  .simple-card {
    width: 100% !important;
    height: auto !important;         /* 高さを自動リセット */
    aspect-ratio: 4 / 3 !important;  /* ★きれいな横長長方形（幅4 : 高さ3）に固定 */
    padding: 8px 6px !important;     /* カード内の余白を小さく調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;         /* 中身を上下中央寄せ */
    align-items: center;
    box-sizing: border-box;
  }

  /* 背景画像のトリミング位置調整 */
  .simple-card.card-bg {
    background-size: cover !important;
    background-position: center !important;
  }

  /* --- 内側の要素がはみ出ないようにサイズ微調整 --- */
  .simple-card .card-badge {
    font-size: 11px !important;
    padding: 1px 5px !important;
  }

  .simple-card .card-icon {
    font-size: 16px !important;      /* アイコンを少し小さめに */
    margin-bottom: 2px !important;
  }

  .simple-card .card-title {
    font-size: 12px !important;      /* タイトル文字サイズ */
    line-height: 1.25 !important;
    margin: 2px 0 !important;
  }

  .simple-card .card-sub {
    font-size: 9.5px !important;     /* サブテキスト */
    opacity: 0.9;
  }

/* 1. aタグのFlex干渉を解除 */
  .item a,
  .main-content .item a {
    display: block !important;
    height: auto !important;
  }

  .item {
    margin-top: 10px;
    text-align: center;
    width: 95%;
  }

  /* 2. スマホ用にテキスト領域をコンパクト化（2行＋すっきりした高さ） */
  .caption-text {
    /* 2行で「…」カット */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-all !important;

    /* 文字サイズ・行間・配置 */
    font-size: 12px !important;
    line-height: 1.7 !important;
    text-align: left !important;         /* 左揃えですっきり見せます */
    font-weight: 600 !important;
    background-color: #ffffff !important;
    color: #444444 !important; /* さらにマイルドなグレー */
    width: 100% !important;
    border-radius: 0 0 10px 10px !important;
    box-sizing: border-box !important;

    /* 💡 高さと余白の黄金バランス指定 */
    padding: 3px 8px 8px 8px !important; /* 上6px、左右8px、下8px */
    margin: 0 !important;
    
    /* 高さを48pxに圧縮してコンパクト＆2行目の下にゆとりを確保 */
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
  }

  /* ホバー時もスマホの高さを維持 */
  .item:hover .caption-text {
    height: 48px !important;
    padding: 6px 8px 8px 8px !important;
  }

.text-divider{
  font-size: 1.5rem;
}

.content{
  margin-bottom: 0;
}

/* カテゴリブロック（またはリスト）の下に余白を作る */
.widget_categories,
.wp-block-categories-list {
  margin-bottom: 40px !important; /* お好みで 35px〜50px で調整してください */
}

/* ランキングバナーエリア */
.blogmura {
  display: flex;
  gap: 10px;
  margin-top: 10px !important;
  align-items: center;
  justify-content: center;
}
/* 外枠の左右の余白を 28px → 16px に縮小 */
  #toc_container {
    padding: 20px 15px !important;
  }

  /* 子見出し（3.1 や 6.1 など）のインデントを少し詰める（お好みで調整） */
  #toc_container .toc_list ul {
    padding-left: 8px !important;
  }

  div.index-main.wrapper, .single-main {
        
        padding: 0 15px;
    }

}


/* ==========================================
   スマホ表示専用設定（400px以下でのみ適用）
   ※HTML変更不要：テーブル単体で横スクロールを発生
   ========================================== */
@media screen and (max-width: 400px) {

  /* ★1. テーブル本体をブロック化し、横スクロール枠にする */
  .midashi-table1 {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
    
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* 外枠が画面幅を突き破るのを防ぐ */
    margin: 0 auto 1.5em !important;
  }

  /* ★2. 中身（tbody）に画面幅超えの最小幅を設定してスクロールを誘発 */
  .midashi-table1 tbody {
    display: table !important;
    width: 100% !important;
    min-width: 450px !important; /* ★400px以下の画面に対してしっかり横スクロールを発火させる */
  }

  /* セル内の文字サイズ・パディングのスマホ最適化 */
  .midashi-table1 th,
  .midashi-table1 td {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  /* 一番左の列（項目名列） */
  .midashi-table1 th:first-child,
  .midashi-table1 td:first-child {
    width: 90px !important;
    min-width: 90px !important;
  }

  /* 右側のデータ列 */
  .midashi-table1 th:not(:first-child),
  .midashi-table1 td:not(:first-child) {
    width: 120px !important;
    min-width: 120px !important;
  }
}





/*--------------------------------------------------
  カエレバ・ヨメレバ・トマレバ　WordPressの場合
---------------------------------------------------*/

.cstmreba {
width: 98%;
height:auto;
margin:10px 0;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.8s ;
color:#000; /* テキストリンクカラー */
}
.cstmreba a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {
position : relative;
width: 100%;
background-color: #fff;  /* 全体の背景カラー */
overflow: hidden;
border:double #d2d7e6;
border-radius: 5px;
box-sizing: border-box;
padding: 12px 8px;
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {
margin:0 auto;
padding: 0;
text-align:center;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
/*border-bottom: 1px dotted ;*/
font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}

.kaerebalink-kutikomi{
  font-size:12px;
line-height:250%;

text-align : left;
padding-left :10px;

}
.kaerebalink-kutikomi a{
color: #599BA3;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
	position : absolute;
    right : 5px;
	bottom:5px;
	color : #b8b8b8;
    
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
border-bottom: 1px dotted ;
color:  #b8b8b8;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {
display:none !important;
}
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
margin-bottom: 10px;

}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
float:left;
width:31%;
min-width:125px;
margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a, 
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
font-size: 13px;
font-weight: bold;
line-height: 180%;
padding:3% 1%;
margin: 1px 0;
border-radius: 10px;
box-shadow: 0 2px 0 #ccc;
background: -moz-linear-gradient(top,#fafafa,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
text-decoration: underline;
}

/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {color:#ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */ 
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a, 
.cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a , 
.cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a, 
.cstmreba .booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer {
clear:both;
}
/***  解像度600px以下のスタイル ***/
@media screen and (max-width:480px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div, 
.cstmreba .kaerebalink-link1>div, 
.cstmreba .tomarebalink-link1>div {
width: 95%;
margin: 0 auto 8px auto;
float:none;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/*--------------------------------------------------
  ボタンの背景色をRinker風にカスタマイズ
---------------------------------------------------*/

.cstmreba .kaerebalink-link1 .shoplinkrakuten a, .cstmreba .booklink-link2 .shoplinkrakuten a {
    color: #fff;
    background: #cf4944 !important;
	height: 40px;
	padding-top:10px;
}
.cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a {
    color: #fff;
    background: #f6a306 !important;
	height: 40px;
	padding-top:10px;
}
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {
    color: #fff;
    background: #51a7e8 !important;
	height: 40px;
	padding-top:10px;
}

.cstmreba .kaerebalink-link1 .shoplinksevennet a, .cstmreba .booklink-link2 .shoplinksevennet a {
    color: #fff;
    background: #32a852 !important;
	height: 40px;
	padding-top:10px;

}

.cstmreba .kaerebalink-link1 .shoplinknaturam a, .cstmreba .booklink-link2 .shoplinknaturam a {
    color: #fff;
    background: #007F3C !important;
	height: 40px;
	padding-top:10px;

}


.cstmreba .kaerebalink-link1 .shoplinkmercari a, .cstmreba .booklink-link2 .shoplinkmercari a {
    color: #fff;
    background: #a400db !important;
	height: 40px;
	padding-top:10px;

}