/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 01 2026 | 16:05:59 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ============================================================
   salaryman-onsen.com  追加CSS 統合版
   デザインC「湯気と温度」
   最終更新: 2026-07-31

   ■ 構成
     1. デザイントークン
     2. ベース（全ページ共通）
     3. JIN本体パーツの調整
     4. 記事・固定ページ本文の可読性
     5. サイドバー
     6. トップページ
     7. 署名要素：温度バッジ
     8. 記事コンポーネント（so-article）
     9. 温泉診断ウィジェット
    10. プロフィールリンク

   ■ 注意
     ・@import は必ず最上部。ここより上に何か書くとフォントが読み込まれません
     ・色を変えたいときは「1. デザイントークン」だけ書き換えれば全体に反映されます
     ・元に戻すときは、ステップ1で保存した旧CSSを丸ごと貼り直してください
============================================================ */


/* ============================================================
   1. デザイントークン
   ここだけ書き換えれば全体の色が変わります
============================================================ */

:root{
  /* 湯気：白ではなく「湯気越しに見た色」。わずかに青を含む */
  --yuge:       #e8edef;  /* 背景 */
  --yuge-usu:   #f2f6f7;  /* カード地 */
  --yuge-fuka:  #d3dde0;  /* 罫線 */

  /* 石：黒ではなく青みの濃灰 */
  --ishi:       #2b3438;  /* 本文・見出し */
  --ishi-usu:   #5f6e73;  /* 補足・注釈 */

  /* 温度スケール：ぬる湯 → 適温 → 熱湯 */
  --nuru:       #4e8c8a;  /* 40℃未満 */
  --tekion:     #c8873c;  /* 40〜43℃ */
  --atsu:       #b04a32;  /* 43℃超・強調 */

  /* 温度帯の淡色（背景用） */
  --nuru-usu:   #eef5f5;
  --tekion-usu: #fbf3e6;

  /* 書体の3役分担 */
  --midashi: "Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
  --honbun:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --suuji:   "Roboto Mono", monospace;

  --kado: 2px;  /* 角丸。サイト全体で統一 */
}


/* ============================================================
   2. ベース（全ページ共通）
============================================================ */

body{
  background: var(--yuge);
  color: var(--ishi);
  font-family: var(--honbun);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* 見出しは明朝。ここが世界観の中心 */
h1, h2, h3, h4,
.entry-title,
.cps-post-title{
  font-family: var(--midashi);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ishi);
}

a{
  color: var(--nuru);
  transition: color .2s ease;
}
a:hover{ color: var(--atsu); }

/* 数値は等幅。「データで選ぶ温泉」の記号 */
.num,
time,
.post-date{
  font-family: var(--suuji);
  font-feature-settings: "tnum";
  letter-spacing: 0;
}


/* ============================================================
   3. JIN本体パーツの調整
   角丸・影を落として年代感を抜く
============================================================ */

/* 記事一覧カードのカテゴリラベル（丸ピル → 角形） */
.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat,
.post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat,
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-cat,
.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat,
.cps-post .cps-post-header .cps-post-cat a,
.cps-post .cps-post-header .cps-post-cat span{
  border-radius: var(--kado);
}

/* ピックアップスライドのラベル */
.pickup-contents-box .pickup-contents li a .pickup-image .pickup-title,
.pickup-contents-box-post-type .pickup-contents li a .pickup-image .pickup-cat{
  border-radius: var(--kado);
}

/* カードのホバー時のふわっと影を消す */
.post-list-mag .post-list-link:hover,
.post-list-mag-sp1col .post-list-link:hover,
.post-list-mag3col .post-list-link:hover,
.post-list-mag3col-slide .post-list-link:hover,
.post-list .post-list-inner-infeed:hover,
.post-list.basicstyle a.post-list-link:hover,
#prev-next a:hover{
  box-shadow: none;
}

/* ページ送り */
.pagination a{
  border-radius: var(--kado);
  box-shadow: none;
}

/* ヘッダー画像・トップへ戻る */
#main-image{ box-shadow: none; }
#page-top a{ border-radius: var(--kado); }

#main-image .main-image-text{ font-weight: 600 !important; }
#main-image .main-image-text-sub{ font-weight: 500 !important; }

/* ショートコード（吹き出し・ボタン・アコーディオン）の影 */
.jin-shortcode-button a,
.jin-ac-box01-title,
.jin-ac-box02-title,
.jin-flexbox .jsb-hover-hop a:hover{ box-shadow: none; }
.jin-shortcode-button a{ border-radius: var(--kado); }

/* ---- Pocketボタンを隠す（2025年7月8日サービス終了済み） ---- */
a[href*="getpocket.com"],
.sns-pocket,
.pocket{
  display: none !important;
}
li:has(> a[href*="getpocket.com"]){
  display: none !important;
}


/* ============================================================
   4. 記事・固定ページ本文の可読性
   ※ 旧CSSの「かすれ改善」を引き継ぎつつ、書体だけ差し替え
============================================================ */

body.single .cps-post-main,
body.single .cps-post-main p,
body.single .cps-post-main li,
body.single .cps-post-main td,
body.single .cps-post-main th,
body.single .cps-post-main dd,
body.single .post_content,
body.single .post_content p,
body.single .entry-content,
body.single .entry-content p,
body.page .cps-post-main,
body.page .cps-post-main p,
body.page .cps-post-main li,
body.page .cps-post-main td,
body.page .cps-post-main th,
body.page .cps-post-main dd,
body.page .post_content,
body.page .post_content p,
body.page .entry-content,
body.page .entry-content p,
body.page .article-body,
body.page .article-body p{
  color: var(--ishi) !important;
  font-family: var(--honbun) !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  opacity: 1 !important;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

body.single .cps-post-main p,
body.single .post_content p,
body.single .entry-content p,
body.page .cps-post-main p,
body.page .post_content p,
body.page .entry-content p,
body.page .article-body p{
  margin-bottom: 1.7em;
}

/* 強調 */
body.single .cps-post-main strong,
body.single .post_content strong,
body.single .entry-content strong,
body.page .cps-post-main strong,
body.page .post_content strong,
body.page .entry-content strong,
body.page .article-body strong{
  color: var(--ishi) !important;
  font-weight: 700;
}

/* 記事タイトル */
body.single .cps-post-title,
body.single .entry-title,
body.single h1{
  color: var(--ishi) !important;
  font-family: var(--midashi) !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  opacity: 1 !important;
}

/* 本文中の見出し */
body.single .cps-post-main h2,
body.single .cps-post-main h3,
body.single .cps-post-main h4,
body.single .post_content h2,
body.single .post_content h3,
body.single .post_content h4,
body.single .entry-content h2,
body.single .entry-content h3,
body.single .entry-content h4,
body.page .cps-post-main h2,
body.page .cps-post-main h3,
body.page .cps-post-main h4,
body.page .post_content h2,
body.page .post_content h3,
body.page .post_content h4,
body.page .entry-content h2,
body.page .entry-content h3,
body.page .entry-content h4,
body.page .article-body h2,
body.page .article-body h3,
body.page .article-body h4{
  color: var(--ishi) !important;
  font-family: var(--midashi) !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* 記事内h2に温度バー。「ここから新しい湯」の合図 */
body.single .cps-post-main h2:not(.so-article h2),
body.single .post_content h2:not(.so-article h2),
body.single .entry-content h2:not(.so-article h2){
  position: relative;
  margin: 2.6em 0 1em;
  padding: 0.2em 0 0.2em 0.9em;
  border: none !important;
  background: none !important;
}
body.single .cps-post-main h2:not(.so-article h2)::before,
body.single .post_content h2:not(.so-article h2)::before,
body.single .entry-content h2:not(.so-article h2)::before{
  content: "";
  position: absolute;
  left: 0; top: 0.25em; bottom: 0.25em;
  width: 3px;
  background: linear-gradient(to bottom, var(--nuru), var(--tekion));
}

/* 補足・注釈 */
body.single .cps-post-main small,
body.single .post_content small,
body.single .entry-content small,
body.page .cps-post-main small,
body.page .post_content small,
body.page .entry-content small,
body.page .article-body small{
  color: var(--ishi-usu) !important;
  opacity: 1 !important;
}

/* 固定ページのリンク */
body.page .cps-post-main a,
body.page .post_content a,
body.page .entry-content a,
body.page .article-body a{
  color: var(--nuru) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   5. サイドバー
============================================================ */

#sidebar, #sidebar p, #sidebar li, #sidebar a,
.sidebar, .sidebar p, .sidebar li, .sidebar a,
.side-widget, .side-widget p, .side-widget li, .side-widget a,
.widget, .widget p, .widget li, .widget a{
  color: var(--ishi) !important;
  font-family: var(--honbun) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  opacity: 1 !important;
  -webkit-font-smoothing: auto;
}

#sidebar .widgettitle, #sidebar h2, #sidebar h3,
.sidebar .widgettitle, .sidebar h2, .sidebar h3,
.side-widget .widgettitle, .side-widget h2, .side-widget h3,
.widget .widgettitle{
  color: var(--ishi) !important;
  font-family: var(--midashi) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  opacity: 1 !important;
}

#sidebar .cat-item a,
.sidebar .cat-item a,
.widget_categories a,
.widget_archive a,
.widget_nav_menu a{
  color: var(--ishi) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  text-decoration: none;
  opacity: 1 !important;
}

#sidebar a:hover,
.sidebar a:hover,
.side-widget a:hover,
.widget a:hover{
  color: var(--atsu) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ウィジェット枠：影 → 細い罫線 */
.sidebar_style1 .widget,
.sidebar_style6 .widget{
  box-shadow: none;
  border: 1px solid var(--yuge-fuka);
}


/* ============================================================
   6. トップページ
============================================================ */

/* ---- 6-1. 不要な要素を隠す ---- */

.home .entry-title,
.home .post-title,
.home .cps-post-title,
.home .article-title,
.home .entry-meta,
.home .post-meta,
.home .date-tags,
.home .author-info,
.home .sns-share,
.home .share,
.home .sns,
.home .share-top,
.home .sns-top,
.home .social-button,
.home .cps-post-sns,
.home #sidebar,
.home .sidebar,
.home .sideber,
.home .widget_categories,
.home .widget_recent_entries,
.home .widget_recent_comments,
.home .widget_archive,
.home .widget_search,
.home .widget_meta{
  display: none !important;
}

/* 本文エリアを全幅に */
.home #main-contents,
.home .main-contents,
.home .main,
.home .content,
.home .post_content{
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- 6-2. ラッパ ---- */

.home .onsen-home{
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--ishi);
}

/* ---- 6-3. ヒーロー ---- */

.onsen-home-hero{
  background: var(--yuge-usu);
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  padding: 42px 36px;
  margin: 0 0 44px;
}

.onsen-home-label{
  display: inline-block;
  font-family: var(--suuji);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nuru);
  background: var(--nuru-usu);
  border: 1px solid var(--nuru);
  border-radius: var(--kado);
  padding: 6px 12px;
  margin: 0 0 18px;
}

.onsen-home-hero h1{
  font-family: var(--midashi);
  font-size: 30px;
  line-height: 1.55;
  margin: 0 0 18px;
  color: var(--ishi);
  border: none !important;
  padding: 0 !important;
  background: none !important;
}

.onsen-home-hero p{
  font-size: 16px;
  line-height: 2;
  margin: 0;
  color: var(--ishi);
}

/* ---- 6-4. セクション ---- */

.onsen-home-section{ margin: 52px 0; }

.onsen-home-section h2{
  position: relative;
  font-family: var(--midashi);
  font-size: 24px;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 0.1em 0 0.1em 0.9em;
  color: var(--ishi);
  border: none !important;
  background: none !important;
}

/* セクション見出しの温度バー */
.onsen-home-section h2::before{
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px;
  background: linear-gradient(to bottom, var(--nuru), var(--tekion));
  border: none;
  transform: none;
}

.onsen-home-lead{
  font-size: 15px;
  line-height: 1.9;
  color: var(--ishi-usu);
  margin: 0 0 24px;
}

/* ---- 6-5. カード ---- */

.onsen-card-grid,
.onsen-card-grid.two-col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.onsen-card{
  display: block;
  min-height: 150px;
  background: var(--yuge-usu);
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  padding: 24px 22px;
  color: var(--ishi) !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease;
}

.onsen-card:hover{
  box-shadow: none;
  border-color: var(--atsu);
  background: #ffffff;
  text-decoration: none !important;
}

/* 強調カード。旧CSSの2系統（-primary と .primary）を両方サポート */
.onsen-card-primary,
.onsen-card.primary{
  background: var(--tekion-usu);
  border-color: var(--tekion);
}

.onsen-card-label{
  display: inline-block;
  font-family: var(--suuji);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tekion);
  background: #ffffff;
  border: 1px solid var(--tekion);
  border-radius: var(--kado);
  padding: 4px 10px;
  margin: 0 0 12px;
}

/* タイトル。クラス指定とh3の両方をサポート */
.onsen-card-title,
.onsen-card h3{
  display: block;
  font-family: var(--midashi);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ishi) !important;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--nuru);
  text-decoration: none !important;
}

/* ラベルがないカードでも行頭が揃うように上余白を確保 */
.onsen-card-title:first-child,
.onsen-card h3:first-child{
  margin-top: 38px;
}

/* 本文。クラス指定とpの両方をサポート */
.onsen-card-text,
.onsen-card p{
  display: block;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ishi-usu) !important;
  margin: 0;
  text-decoration: none !important;
}

/* カード内の下線を完全に消す */
.onsen-card *,
.onsen-card:hover *,
.onsen-card:visited *,
.onsen-card:active *{
  text-decoration: none !important;
}

/* 空のaタグが残った場合の応急処置 */
.onsen-card:empty{ display: none !important; }

/* ---- 6-6. 事業者向けCTA ---- */

.onsen-business-cta{
  background: var(--ishi);
  color: #ffffff;
  border-radius: var(--kado);
  padding: 38px 34px;
  margin: 58px 0 20px;
}

.onsen-business-cta h2{
  font-family: var(--midashi);
  font-size: 24px;
  line-height: 1.6;
  margin: 0 0 16px;
  padding: 0 0 12px;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  background: none !important;
}
/* ダークセクションでは温度バーを出さない */
.onsen-business-cta h2::before{ content: none !important; }

.onsen-business-cta p{
  font-size: 15px;
  line-height: 2;
  color: rgba(255,255,255,0.86);
  margin: 0 0 24px;
}

/* ボタン：デフォルトは濃色。明るい背景でも消えない */
.onsen-cta-button{
  display: inline-block;
  background: var(--ishi);
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid var(--ishi);
  border-radius: var(--kado);
  padding: 12px 22px;
  transition: background .18s ease, color .18s ease;
}

.onsen-cta-button:hover{
  background: var(--atsu);
  border-color: var(--atsu);
  color: #ffffff !important;
  opacity: 1;
  text-decoration: none !important;
}

/* ダーク背景の中でだけ白に反転 */
.onsen-business-cta .onsen-cta-button{
  background: #ffffff;
  color: var(--ishi) !important;
  border-color: #ffffff;
}
.onsen-business-cta .onsen-cta-button:hover{
  background: var(--tekion);
  border-color: var(--tekion);
  color: #ffffff !important;
}

/* ---- 6-7. トップページのスマホ対応 ---- */

@media screen and (max-width: 767px){
  .home .onsen-home{ padding: 0 4px 32px; }

  .onsen-home-hero{
    padding: 30px 22px;
    margin-bottom: 36px;
  }
  .onsen-home-hero h1{ font-size: 24px; }
  .onsen-home-hero p{ font-size: 15px; }

  .onsen-card-grid,
  .onsen-card-grid.two-col{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .onsen-card{
    min-height: auto;
    padding: 22px 20px;
  }

  .onsen-home-section h2{ font-size: 21px; }

  .onsen-business-cta{ padding: 30px 22px; }
}


/* ============================================================
   7. 署名要素：温度バッジ
   各レビューの冒頭に置く。源泉温度に応じて色が変わる
   使い方は手順書のステップ5を参照
============================================================ */

.yu-badge{
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--yuge-usu);
  border: 1px solid var(--yuge-fuka);
  border-left: 4px solid var(--nuru);
  border-radius: var(--kado);
}

.yu-badge--nuru  { border-left-color: var(--nuru);   }
.yu-badge--tekion{ border-left-color: var(--tekion); }
.yu-badge--atsu  { border-left-color: var(--atsu);   }

.yu-badge--nuru   .yu-badge__num{ color: var(--nuru);   }
.yu-badge--tekion .yu-badge__num{ color: var(--tekion); }
.yu-badge--atsu   .yu-badge__num{ color: var(--atsu);   }

.yu-badge__temp{
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  padding-right: 1rem;
  border-right: 1px solid var(--yuge-fuka);
}

.yu-badge__num{
  font-family: var(--suuji);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
}

.yu-badge__unit{
  font-family: var(--suuji);
  font-size: 0.9rem;
  color: var(--ishi-usu);
  margin-left: 0.1em;
}

.yu-badge__meta{ flex: 1 1 auto; min-width: 0; }

.yu-badge__name{
  font-family: var(--midashi);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ishi);
  margin-bottom: 0.4rem;
}

.yu-badge__data{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.yu-badge__data li{
  font-size: 0.8rem;
  color: var(--ishi-usu);
  margin: 0 !important;
}

.yu-badge__data b{
  font-family: var(--suuji);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ishi);
  margin: 0 0.15em;
}

@media screen and (max-width: 600px){
  .yu-badge{
    flex-direction: column;
    gap: 0.7rem;
  }
  .yu-badge__temp{
    border-right: none;
    border-bottom: 1px solid var(--yuge-fuka);
    padding: 0 0 0.6rem 0;
  }
}


/* ============================================================
   8. 記事コンポーネント（so-article）
   泉質組み合わせ解説記事など。旧teal(#5ccecc)を「ぬる湯」に統一
============================================================ */

body.single .so-article{
  color: var(--ishi) !important;
  font-family: var(--honbun) !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  opacity: 1 !important;
}

body.single .so-article p{
  margin: 0 0 1.7em;
  color: var(--ishi) !important;
}

/* h2は箱組み。記事内の章分けとして機能させる */
body.single .so-article h2{
  position: relative;
  margin: 2.8em 0 1em;
  padding: 0.8em 1em;
  border: none !important;
  border-left: 5px solid var(--nuru) !important;
  background: var(--nuru-usu) !important;
  color: var(--ishi) !important;
  font-family: var(--midashi) !important;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.55;
}
body.single .so-article h2::before,
body.single .so-article h2::after{
  content: none !important;
  display: none !important;
}

body.single .so-article h3{
  position: relative;
  margin: 2em 0 0.9em !important;
  padding: 0 0 0.5em 0 !important;
  border: none !important;
  border-bottom: 2px solid var(--yuge-fuka) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ishi) !important;
  font-family: var(--midashi) !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}
body.single .so-article h3::before,
body.single .so-article h3::after{
  content: none !important;
  display: none !important;
}
body.single .so-article h3 + p{ margin-top: 0.8em !important; }
body.single .so-article h3 + br{ display: none !important; }
body.single .so-article p:empty{ display: none !important; }

body.single .so-article strong{
  color: var(--ishi) !important;
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--tekion-usu) 62%);
}

body.single .so-lead{
  padding: 1.4em 1.5em;
  margin: 1.5em 0 2.2em;
  background: var(--nuru-usu);
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
}

body.single .so-box{
  margin: 1.8em 0;
  padding: 1.35em 1.45em;
  border-radius: var(--kado);
  background: #ffffff;
  border: 1px solid var(--yuge-fuka);
}

body.single .so-box-title{
  display: inline-block;
  margin: 0 0 0.85em;
  padding: 0.25em 0.85em;
  border-radius: var(--kado);
  background: var(--nuru);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.5;
}

body.single .so-point  { border-color: var(--nuru);   background: var(--nuru-usu);   }
body.single .so-warning{ border-color: var(--tekion); background: var(--tekion-usu); }
body.single .so-note   { border-color: var(--yuge-fuka); background: var(--yuge-usu); }
body.single .so-summary{ border-color: var(--nuru);   background: var(--nuru-usu);   }

body.single .so-article ul,
body.single .so-article ol{
  margin: 1em 0 1.5em 1.4em;
  padding: 0;
}

body.single .so-article li{
  margin-bottom: 0.55em;
  color: var(--ishi) !important;
}

body.single .so-table-wrap{
  overflow-x: auto;
  margin: 1.4em 0 2em;
}

body.single .so-article table{
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #ffffff;
}

body.single .so-article th{
  background: var(--nuru-usu);
  border: 1px solid var(--yuge-fuka);
  padding: 0.75em;
  text-align: left;
  color: var(--ishi) !important;
  font-family: var(--honbun) !important;
  font-weight: 700;
}

body.single .so-article td{
  border: 1px solid var(--yuge-fuka);
  padding: 0.75em;
  vertical-align: top;
  color: var(--ishi) !important;
}

/* 数値だけのセルは等幅に */
body.single .so-article td.num,
body.single .so-article th.num{
  font-family: var(--suuji) !important;
  text-align: right;
}

/* ---- 吹き出し ---- */

body.single .so-speech{
  display: flex;
  gap: 0.9em;
  align-items: flex-start;
  margin: 1.8em 0;
}

body.single .so-speech-icon{
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--nuru);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}

body.single .so-speech-body{
  position: relative;
  flex: 1;
  padding: 1em 1.1em;
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  background: #ffffff;
}

body.single .so-speech-body::before{
  content: "";
  position: absolute;
  left: -9px; top: 20px;
  border-width: 9px 9px 9px 0;
  border-style: solid;
  border-color: transparent var(--yuge-fuka) transparent transparent;
}

body.single .so-speech-body::after{
  content: "";
  position: absolute;
  left: -7px; top: 21px;
  border-width: 8px 8px 8px 0;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
}

/* ---- 記事内CTA ---- */

body.single .so-cta{
  margin: 2.6em 0;
  padding: 1.6em 1.5em;
  border-radius: var(--kado);
  background: var(--nuru-usu);
  border: 1px solid var(--nuru);
}

body.single .so-cta-title{
  font-family: var(--midashi);
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 0.65em;
  color: var(--ishi) !important;
}

body.single .so-cta a{
  display: inline-block;
  margin-top: 0.6em;
  padding: 0.65em 1.05em;
  border-radius: var(--kado);
  background: var(--ishi);
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: background .18s ease;
}

body.single .so-cta a:hover{
  background: var(--atsu);
  opacity: 1;
  text-decoration: none !important;
}

/* ---- FAQ ---- */

body.single .so-faq{
  margin: 1.4em 0;
  padding: 1.25em 1.35em;
  border-radius: var(--kado);
  border: 1px solid var(--yuge-fuka);
  background: #ffffff;
}

body.single .so-faq-q{
  font-weight: 700;
  color: var(--nuru) !important;
  margin-bottom: 0.45em;
}

body.single .so-faq-a{ margin: 0; }

body.single .so-small{
  font-size: 0.92em;
  color: var(--ishi-usu) !important;
}

@media screen and (max-width: 600px){
  body.single .so-article{ font-size: 16px; }
  body.single .so-article h2{ font-size: 1.18em; }
  body.single .so-speech{ gap: 0.65em; }
  body.single .so-speech-icon{
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 0.7em;
  }
  body.single .so-article table{ min-width: 620px; }
}


/* ============================================================
   9. 温泉診断ウィジェット
============================================================ */

.onsen-wrap{
  max-width: 860px;
  margin: 40px auto;
  padding: 24px 16px;
  background: #ffffff;
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  box-shadow: none;
}

.onsen-eyebrow{
  font-family: var(--suuji);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nuru);
  margin: 0 0 8px;
}

.onsen-lead{
  line-height: 1.9;
  color: var(--ishi);
}

.onsen-progress{ margin: 28px 0 20px; }

.onsen-progress-bar{
  width: 100%;
  height: 10px;
  background: var(--yuge-fuka);
  border-radius: var(--kado);
  overflow: hidden;
}

#onsen-progress-bar-inner{
  display: block;
  width: 10%;
  height: 100%;
  background: linear-gradient(90deg, var(--nuru) 0%, var(--tekion) 100%);
}

#onsen-progress-text{
  font-family: var(--suuji);
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ishi-usu);
}

.onsen-question-step{
  display: none;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  background: var(--yuge-usu);
}

.onsen-question-step.is-active{ display: block; }

.onsen-question-step h3{
  font-family: var(--midashi);
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.7;
}

.onsen-question-step label{
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--yuge-fuka);
  border-radius: var(--kado);
  background: #ffffff;
  cursor: pointer;
  line-height: 1.7;
  transition: border-color .18s ease;
}

.onsen-question-step label:hover{ border-color: var(--nuru); }

.onsen-actions{
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

#onsen-submit,
#onsen-reset,
#onsen-prev{
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--kado);
  padding: 14px 22px;
  font-family: var(--honbun);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#onsen-submit{
  background: var(--ishi);
  color: #ffffff;
}
#onsen-submit:hover{ background: var(--atsu); }

#onsen-reset,
#onsen-prev{
  background: var(--yuge);
  border-color: var(--yuge-fuka);
  color: var(--ishi);
}

#onsen-error{
  color: var(--atsu);
  font-weight: 700;
  margin: 14px 0 0;
}

.onsen-result{
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--yuge-fuka);
  line-height: 1.9;
}

.onsen-hidden-result{ display: none !important; }

@media (max-width: 640px){
  #onsen-submit,
  #onsen-reset,
  #onsen-prev{ width: 100%; }
  .onsen-actions{ flex-direction: column; }
}


/* ============================================================
   10. プロフィールリンク
============================================================ */

.proflink a{
  display: block;
  text-align: center;
  padding: 9px 10px;
  background: var(--ishi);
  width: 50%;
  margin: 20px auto 0;
  border-radius: var(--kado);
  border: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background .18s ease;
}

.proflink a:hover{
  background: var(--atsu);
  opacity: 1;
}

@media (max-width: 767px){
  .proflink a{
    width: 70%;
    margin-bottom: 10px;
  }
}


/* ============================================================
   11. アクセシビリティ
============================================================ */

/* 動きを減らす設定の人に配慮 */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}

/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible{
  outline: 2px solid var(--nuru);
  outline-offset: 2px;
}