@charset "UTF-8";
/* =========================================================
   全ページ共通：ヘッダー・緑のメニュー帯・フッター（11/2 Figma 指定。1920幅で寸法どおり）
   ホームは home-guide.css、記事ページは style.css → parts.css → article.css のあとに読む
   --u は「1920幅での1px」。画面が狭いと同じ比率で縮む（1920より広い画面では1pxのまま中央寄せ）
   文字は縮めても14pxより小さくしない。1200幅より狭い画面は縮めずに並べ直す
   ========================================================= */
/* ページを左右に動かさない（はみ出す部品があっても横スクロールを出さない。clip は追従する欄を壊さない） */
body { overflow-x: clip; }
/* 画像を AVIF 優先で出すための <picture> は、箱を作らない（中の画像が今までどおり並ぶ） */
picture { display: contents; }
/* 記事ページの style.css（p の下余白・a の色・footer の背景写真など）に引きずられないよう、ここで打ち消す */
.h, .g-footer { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif; letter-spacing: normal; line-height: 1.5; }
.h *, .h *::before, .h *::after, .g-footer *, .g-footer *::before, .g-footer *::after { box-sizing: border-box; }
.h p, .h ul, .g-footer p { margin: 0; padding: 0; letter-spacing: normal; }
.h a, .h li, .h span, .g-footer a { letter-spacing: normal; }
.h ul { list-style: none; }
.h img, .g-footer img { display: block; max-width: 100%; height: auto; }
/* :where は強さ0。ボタンや部品ごとの指定（文字の大きさ・色）を上書きしないように */
:where(.h, .g-footer) a { color: inherit; text-decoration: none; }
:where(.h) button { font-family: inherit; cursor: pointer; }

/* .top はヘッダー（ホームではFVも）を包む箱。中のメニューの一覧が下の本文より手前に出るよう前に置く */
.top { position: relative; z-index: 60; container-type: inline-size; }
.h { --u: min(1px, 100cqw / 1920); position: relative; z-index: 2; background: #fff; }
.h-stage { position: relative; width: calc(1920 * var(--u)); height: calc(132 * var(--u)); margin: 0 auto; }
.h-logo { position: absolute; left: calc(102 * var(--u)); top: calc(37.36 * var(--u)); width: calc(343 * var(--u)); }
.h-logo img { width: 100%; }
.h-tel { position: absolute; left: calc(1235 * var(--u)); top: calc(17 * var(--u)); width: calc(248.17 * var(--u)); height: calc(93.02 * var(--u)); color: #2E7D32; }
.h-tel-label { height: calc(28 * var(--u)); background: #2E7D32; border-radius: calc(2 * var(--u)); color: #fff; text-align: center; font-size: max(14px, calc(14 * var(--u))); font-weight: 700; line-height: calc(28 * var(--u)); white-space: nowrap; }
.h-tel-num { position: absolute; left: calc(3 * var(--u)); top: calc(32 * var(--u)); display: flex; align-items: center; gap: calc(5.9 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 700; line-height: calc(38 * var(--u)); white-space: nowrap; }
.h-tel-num svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.h-tel-hours { position: absolute; left: calc(2.75 * var(--u)); top: calc(76 * var(--u)); display: flex; gap: calc(18.7 * var(--u)); font-size: max(14px, calc(14 * var(--u))); line-height: 1.2143; color: #5B6170; white-space: nowrap; }
.h-btn { position: absolute; top: calc(38 * var(--u)); height: calc(56 * var(--u)); display: flex; align-items: center; margin: 0; font-size: max(14px, calc(17 * var(--u))); font-weight: 700; line-height: 1.1765; white-space: nowrap; filter: drop-shadow(3px 3px 0 rgba(40,58,41,.4)); border-radius: calc(5 * var(--u)); transition: transform .15s, filter .15s; }
.h-btn:hover { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 rgba(40,58,41,.4)); }
.h-btn-mail { left: calc(1502.67 * var(--u)); width: calc(186.17 * var(--u)); padding: 0 0 0 calc(24.67 * var(--u)); gap: calc(9.6 * var(--u)); background: #fff; border: 1px solid #2E7D32; color: #2E7D32; }
.h-btn-mail svg { flex-shrink: 0; width: calc(16.67 * var(--u)); height: calc(13.33 * var(--u)); }
.h-btn-line { left: calc(1700.84 * var(--u)); width: calc(179.16 * var(--u)); padding: 0 0 0 calc(27.2 * var(--u)); gap: calc(11.8 * var(--u)); border: 0; background: #06C755; color: #fff; }
.h-btn-line svg { flex-shrink: 0; width: calc(17 * var(--u)); height: calc(16 * var(--u)); }

.h-nav { height: calc(58 * var(--u)); background: #2E7D32; }
.h-nav-in { display: flex; justify-content: center; gap: calc(118 * var(--u)); transform: translateX(calc(.38 * var(--u))); }
.g-nav-item { position: relative; }
.g-nav-item > a { display: flex; align-items: center; gap: calc(13.5 * var(--u)); padding: calc(14 * var(--u)) 0 calc(16 * var(--u)); color: #fff; font-size: max(14px, calc(23 * var(--u))); font-weight: 700; line-height: 1.2174; white-space: nowrap; }
.g-nav-item > a::after { content: ""; width: calc(14.85 * var(--u)); height: calc(13.5 * var(--u)); background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.g-nav-item > a:hover { opacity: .8; }
.g-sub { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 5; min-width: 340px; padding: 8px 0; background: #fff; border: 1px solid #e2e6de; border-radius: 6px; box-shadow: 0 10px 30px rgba(24,61,44,.10); }
.g-nav-item:hover .g-sub, .g-nav-item:focus-within .g-sub { display: block; }
.g-sub a { display: block; padding: 8px 20px; font-size: 16px; line-height: 1.6; color: #1f2a24; }
.g-sub a:hover { background: #eef2ea; color: #2E7D32; }
.g-sub a[aria-current="page"] { color: #2E7D32; font-weight: 700; }

/* ===== フッター（11/2 本人指定の参考どおり：事務所の入口の写真に紺を重ね、白い札のロゴ・住所・金の電話番号を中央に） ===== */
.g-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.g-footer { background: linear-gradient(rgba(18,31,62,.86), rgba(18,31,62,.86)), #121F3E; background-position: 30% 45%; background-size: cover; background-repeat: no-repeat; color: #D3D7E0; text-align: center; }
/* 背景写真はフッターが近づいてから読む（.bg-on はHTMLの小さなスクリプトが付ける。スクリプトが動かないときは紺の地のまま） */
.g-footer.bg-on { background-image: linear-gradient(rgba(18,31,62,.86), rgba(18,31,62,.86)), url("photo/office.jpg"); }
.g-footer-in { display: flex; flex-direction: column; align-items: center; padding: 37px 24px 34px; }
.g-footer .g-footer-logo { box-sizing: content-box; height: 80px; width: auto; padding: 13px 24px 12px; border-radius: 6px; background: #fff; }
.g-footer p { font-size: 18px; line-height: 1.9; letter-spacing: .05em; }
.g-footer .g-footer-addr { margin-top: 30px; }
.g-footer-addr span { display: inline-block; }
.g-footer a { color: #D9C79A; text-decoration: none; }
.g-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-footer .g-copy { margin-top: 18px; color: #7D859A; letter-spacing: .07em; }

/* ===== 1200幅より狭い画面：縮めずに並べ直す ===== */
@media (max-width: 1199px) {
  .h-stage { height: auto; width: auto; display: flex; align-items: center; gap: 10px; padding: 12px 24px; }
  .h-logo { position: static; width: 240px; margin-right: auto; }
  .h-tel { display: none; }
  .h-btn { position: static; width: auto; height: 44px; padding: 0 16px; gap: 8px; font-size: 15px; border-radius: 4px; }
  .h-btn-mail svg { width: 17px; height: 14px; }
  .h-btn-line svg { width: 17px; height: 16px; }
  .h-nav { height: auto; }
  .h-nav-in { gap: 28px; transform: none; }
  .g-nav-item > a { gap: 8px; padding: 14px 0; font-size: 16px; }
  .g-nav-item > a::after { width: 10px; height: 9px; }
}
@media (max-width: 680px) {
  .g-wrap { padding: 0 16px; }
  .h-stage { padding: 8px 16px; }
  .h-logo { width: 190px; }
  .h-btn-mail, .h-nav { display: none; }
  .h-btn { height: 40px; padding: 0 12px; font-size: 14px; }
  .g-footer { padding-bottom: 76px; }
  .g-footer-in { padding: 32px 16px 28px; }
  .g-footer .g-footer-logo { height: 68px; }
  .g-footer p { font-size: 15px; }
}

/* =====================================================================
   スマホ（680px以下）の右上のメニューと、下に付いてくる相談ボタン（全ページ共通）
   11/4 本人決定：右上はメニュー（押すとコラム一覧）・下のボタンは CTA 01改。記事7本もホームと同じにそろえる（11/4 本人「はい」）
   記事ページは style.css の色（--green など）がホームと違うので、ここでは色を直接書く
   ===================================================================== */
.h-menu-btn, .g-spbar { display: none; }
.sp-menu[hidden] { display: none; }
/* 記事ページの style.css（a・ul・button などの指定）に引きずられないよう打ち消す */
.sp-menu, .g-spbar { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif; letter-spacing: normal; }
.sp-menu *, .sp-menu *::before, .sp-menu *::after, .g-spbar *, .g-spbar *::before, .g-spbar *::after { box-sizing: border-box; }
/* :where は強さ0（下の部品ごとの余白を消さない） */
:where(.sp-menu) :where(p, ul, li) { margin: 0; padding: 0; list-style: none; letter-spacing: normal; }
.sp-menu a, .g-spbar a { color: inherit; text-decoration: none; letter-spacing: normal; }
.sp-menu img, .g-spbar img { display: block; max-width: none; }
.g-spbar button, .sp-menu button { margin: 0; font-family: inherit; cursor: pointer; }
@media (max-width: 680px) {
  /* ヘッダー：右上はLINEの代わりにメニュー（LINEは下のボタンにある） */
  .h-btn-line { display: none; }
  .h-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; width: 64px; height: 52px; margin-left: auto; padding: 0; border: 0; background: none; color: #1d6b45; }
  .h-menu-btn span { display: block; width: 28px; height: 3px; border-radius: 2px; background: currentColor; }
  .h-menu-btn small { margin-top: 1px; font-size: 14px; font-weight: 700; line-height: 1.2; }
  .h-menu-btn.is-x span:first-child { transform: translateY(4px) rotate(45deg); }
  .h-menu-btn.is-x span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .sp-menu { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #fff; line-height: 1.5; }
  html.is-menu-open, html.is-menu-open body { overflow: hidden; }
  .sp-menu-hd { display: flex; align-items: center; padding: 8px 6px 8px 16px; border-bottom: 1px solid #e2e6de; }
  .sp-menu-hd img { width: 190px; height: auto; margin-right: auto; }
  .sp-menu-list { margin: 0; padding: 0; list-style: none; }
  .sp-menu-t { margin: 0; padding: 18px 20px 6px; font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1.6; color: #9a7f3a; }
  .sp-menu-list a { position: relative; display: block; padding: 13px 44px 13px 20px; border-bottom: 1px solid #e2e6de; }
  .sp-menu-list b { display: block; font-size: 17px; font-weight: 700; line-height: 1.45; color: #1f2a24; }
  .sp-menu-list small { display: block; font-size: 14px; line-height: 1.5; color: #5a645e; }
  .sp-menu-list a::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid #1d6b45; border-top: 2px solid #1d6b45; transform: rotate(45deg); }
  .sp-menu-list a[aria-current="page"] { background: #f1f7ec; }

  /* 下に付いてくる相談ボタン（CTA 01改）：後ろの白い帯なし。電話にも「初回無料相談」のラベル */
  .g-spbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-template-columns: 1fr 1fr; gap: 18px 8px; padding: 20px 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
  .g-spbar > * { pointer-events: auto; }
  .g-spbar .g-spbar-tel, .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { position: relative; border: 0; color: #fff; }
  .g-spbar .g-spbar-tel { grid-column: 1 / -1; display: block; padding: 6px 0 7px; border-radius: 10px; background: linear-gradient(#2a8a5b, #15533a); box-shadow: 0 3px 0 #0f3d2a; text-align: center; }
  .g-spbar-tel b { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 24px; font-weight: 700; line-height: 1.3; }
  .g-spbar-tel b svg { width: 22px; height: 22px; }
  .g-spbar-tel small { display: block; margin: 2px 30px 0; padding-top: 2px; border-top: 1px dashed rgba(255,255,255,.5); font-size: 14px; line-height: 1.5; }
  .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.25; }
  .g-spbar .g-spbar-mail { background: linear-gradient(#c9ae63, #9a7f3a); box-shadow: 0 3px 0 #6f5a27; }
  .g-spbar .g-spbar-mail img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
  .g-spbar .g-spbar-line { background: linear-gradient(#22c56a, #05a548); box-shadow: 0 3px 0 #04813a; }
  .g-spbar .g-spbar-line img { width: 26px; height: 26px; }
  .g-spbar em { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 0 10px; border: 1.5px solid currentColor; border-radius: 999px; background: #fff; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
  .g-spbar-tel em { color: #1d6b45; }
  .g-spbar-mail em { color: #9a7f3a; }
  .g-spbar-line em { color: #05a548; }
  /* 下のボタンが高くなった分、フッターの最後の行が隠れないよう下を空ける */
  body .g-footer { padding-bottom: 176px; }
  /* 記事ページの前の下ボタン（2つ並び）は、スマホでは出さない（タブレット幅では今までどおり） */
  .sp-cta-bar { display: none !important; }
}
/* 電話の受付時間（GENLP-188 C4）：相談の欄のボタンの下に1行。時間外（html.is-off-hours・assets/hours.js）は LINE・メールを前に出す */
.cta-hours { margin: 10px 0 0; word-break: auto-phrase; font-size: 15px; line-height: 1.6; color: #5a645e; text-align: center; }
.dc-next .cta-hours { color: #cdd3e0; }
.is-off-hours .cta-buttons .btn.line { order: -1; }
.is-off-hours .cta-hours { font-weight: 700; color: #1d6b45; }
.is-off-hours .dc-next .cta-hours { color: #fff; }
@media (max-width: 680px) {
  /* 下の相談ボタン：時間外は「メール・LINE」を上の段、電話を下の段に */
  .is-off-hours .g-spbar .g-spbar-tel { order: 2; }
}
@media (max-width: 360px) {
  .g-spbar-tel b { font-size: 21px; }
  .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { gap: 5px; font-size: 15px; }
}