@charset "UTF-8";
/* =========================================================
   site.css — サイト共通スタイル
   functions.php の wp_enqueue_scripts で読み込む
   ・.jn-standalone（自作テンプレート）だけ全面的にリセットする
   ・ヘッダー/フッターは全ページ共通で適用
   ========================================================= */

:root{
  --jn-green:#42813f;
  --jn-green-d:#35672f;
  --jn-green-l:#42813f;
  --jn-ink:#24302a;
  --jn-muted:#6d7d72;
  --jn-body:#4f5f55;
  --jn-line:#e3ebe4;
  --jn-line-2:#dfe9e0;
  --jn-soft:#f6faf6;
  --jn-soft-2:#eef6ee;
  --jn-gold:#c9a227;
  --jn-max:1160px;
}

/* ---- コンテンツ幅（全ページ共通） ---- */
.jn-container{max-width:var(--jn-max);margin:0 auto;padding:0 24px}

/* ---- 自作テンプレートのみ全面リセット ---- */
.jn-standalone,
html:has(body.jn-standalone){background:#fff}
body.jn-standalone{
  margin:0;padding:0;background:#fff;color:var(--jn-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;max-width:none
}
body.jn-standalone *{box-sizing:border-box}
body.jn-standalone img{max-width:100%;height:auto;display:block;border:0}
body.jn-standalone a{text-decoration:none;color:inherit}
body.jn-standalone h1,
body.jn-standalone h2,
body.jn-standalone h3,
body.jn-standalone p,
body.jn-standalone ul,
body.jn-standalone ol,
body.jn-standalone dl,
body.jn-standalone dd,
body.jn-standalone figure{margin:0;padding:0}
body.jn-standalone ul{list-style:none}
body.jn-standalone button,
body.jn-standalone input,
body.jn-standalone select,
body.jn-standalone textarea{font-family:inherit;font-size:inherit}

/* PR表記：ヘッダーの上に小さく右寄せで出す（全ページ共通） */
.jn-pr-note{background:#fff;border-bottom:1px solid rgb(240,245,241)}
.jn-pr-note > .jn-container{padding-top:5px;padding-bottom:5px;text-align:right;font-size:11px;line-height:1.6;color:#93a598}

/* ---- ヘッダー（全ページ共通） ---- */
.jn-header{background:#fff;border-bottom:1px solid var(--jn-line);position:sticky;top:0;z-index:20}
.jn-header-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.jn-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
/* ロゴ画像：画面幅に応じて 30〜40px。縦横比は保つ
   （共通リセット body.jn-standalone img{height:auto} より詳細度を高くする） */
.jn-header .jn-logo img{width:auto;height:clamp(30px,4.6vw,40px);object-fit:contain;display:block;flex:0 0 auto}
.jn-logo-text{font-size:clamp(15px,3.4vw,19px);font-weight:700;letter-spacing:.02em;line-height:1.2;margin:0;color:var(--jn-ink);white-space:nowrap}
.jn-logo-text .jn-logo-em{color:var(--jn-green-l);font-weight:900}
.jn-nav{margin-left:auto}
.jn-menu{display:flex;align-items:center;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  font-size:13.5px;font-weight:500;white-space:nowrap}
.jn-menu li{margin:0}
.jn-menu a{color:#4a5a50;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.3}
.jn-menu a:hover{color:#35672f}
/* 日本語ラベルの下に添える英語表記 */
.jn-nav-en{font-size:9.5px;font-weight:600;letter-spacing:.1em;color:#93a598;text-transform:uppercase}
.jn-menu a:hover .jn-nav-en{color:#6f8a76}
.jn-menu .current-menu-item > a .jn-nav-en,
.jn-menu .current_page_item > a .jn-nav-en{color:#6ba05f}
.jn-menu .current-menu-item > a,
.jn-menu .current_page_item > a{color:#42813f;border-bottom:2px solid #42813f;padding-bottom:3px}
body.admin-bar .jn-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .jn-header{top:46px}}

/* スマホ：ロゴを1行目、メニューを2行目に回して詰まらないようにする */
@media (max-width:600px){
  .jn-header-in{gap:8px 12px;padding-top:10px;padding-bottom:10px}
  .jn-nav{margin-left:0;width:100%}
  .jn-menu{gap:16px;font-size:12.5px;justify-content:flex-start;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jn-menu::-webkit-scrollbar{display:none}
  .jn-nav-en{font-size:9px;letter-spacing:.06em}
}

/* パンくず：header.php のスクリプトでヘッダー内へ移し、ヘッダーごと追従させる */
.jn-crumbbar{background:#fff;border-top:1px solid rgb(240,245,241)}
.jn-crumbbar > .jn-container{padding-top:7px;padding-bottom:7px}
.jn-crumbbar .jn-crumb{margin:0;padding:0}
.jn-crumbbar-pr{display:none}

/* スマホの縮小ヘッダー（header.php のスクリプトが .jn-compact を付け外しする）
   ・ヘッダーは固定配置。本文は展開時の高さぶん上に余白を取り、縮んでも本文が動かないようにする
   ・縮小時：メニュー行を隠し、PR表記はパンくずの行の右端へ移す（パンくずが無いページでは上段に残す） */
@media (max-width:600px){
  .jn-header{position:fixed;left:0;right:0;top:0}
  body,body.jn-standalone{padding-top:var(--jn-header-h,150px)}
  .jn-header.jn-compact .jn-nav{display:none}
  .jn-header.jn-compact.jn-has-crumb .jn-pr-note{display:none}
  .jn-header.jn-compact .jn-crumbbar > .jn-container{display:flex;align-items:center;gap:10px;padding-top:6px;padding-bottom:6px}
  .jn-header.jn-compact .jn-crumbbar .jn-crumb{flex:1 1 auto;min-width:0}
  .jn-header.jn-compact .jn-crumbbar-pr{display:block;flex:0 0 auto;margin-left:auto;font-size:10.5px;color:#93a598;white-space:nowrap}
}

/* ---- フッター（全ページ共通） ---- */
.jn-footer{margin-top:56px;border-top:1px solid var(--jn-line);background:#fff}
.jn-footer-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding-top:24px;padding-bottom:24px;font-size:12.5px;color:#7b8b80}
.jn-footer-brand{display:flex;align-items:center;gap:8px}
.jn-footer .jn-footer-brand img{width:auto;height:26px;object-fit:contain;display:block;flex:0 0 auto}
.jn-footer-brand span{font-weight:700;color:#3d4c43}
.jn-footer-menu{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.jn-footer-menu li{margin:0}
.jn-footer-menu a{color:#7b8b80;text-decoration:none}
.jn-footer-menu a:hover{color:#35672f;text-decoration:underline}

/* ---- 共通パーツ ---- */
.jn-cta:hover{filter:brightness(1.06)}
.jn-card:hover{border-color:#42813f}

/* ── 投稿（コラム記事）ページ：記事を中央の枠に収める（single.php） ── */
.jn-post-wrap{max-width:920px;margin:0 auto;padding:16px 24px 64px}
@media (max-width:767px){
  .jn-post-wrap{padding:8px 16px 48px}
}

/* ── 無料見積もりへ進むボタン（.jn-estbtn）：サイトで唯一のオレンジ ──
   緑基調の中で「いちばん押してほしいボタン」だけを目立たせるためのアクセント色（2026-09-19）。
   各テンプレートのボタンはインラインで緑を指定しているので、ここで !important で上書きする。
   緑に戻すときは、このブロックを削除するだけでよい（クラスは残っていても無害）。
   ルール：このクラスは /estimate/ へ進むボタン専用。「詳細を見る」・見出し・アイコンには使わない。 */
.jn-estbtn{background:#dc6a12 !important;color:#fff !important;box-shadow:rgba(220,106,18,.32) 0 6px 16px !important}
.jn-estbtn:hover,.jn-estbtn:focus-visible{background:#c45a0b !important;filter:none !important}
.jn-estbtn.jn-estbtn--3d{box-shadow:#a94c08 0 4px 0,rgba(220,106,18,.25) 0 8px 20px !important}
#jn-fixbar .jn-estbtn{box-shadow:none !important}