@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; }
}