/* 基本：士業向けの落ち着いたデザイン（写真なしベース） */
:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#666;
  --line:#ddd;
  --alt:#f7f7f7;
  --accent:#0b5;
  --accent2:#0a4;
  --telbg:#1f4e79;
  --telbg-hover:#163a58;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

a{ color:inherit; }
.container{ width:min(1080px, 100% - 32px); margin:0 auto; }

.site-header{
  position: sticky;
  top:0;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
  z-index:10;
}
.header-inner{
  position:relative;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand-name{ font-weight:900; font-size:26px; letter-spacing:.03em; }
.brand-sub{ color:var(--muted); font-size:12px; margin-top:2px; }


.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{ background:var(--alt); }
.nav-cta{
  border:1px solid var(--line);
}
.nav-cta:hover{ border-color:var(--muted); }



.hero{
  border-bottom:1px solid var(--line);
  padding:34px 0;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:22px;
  align-items:start;
}
.hero h1{ margin:0 0 12px; font-size:32px; line-height:1.25; }
.hero p{ margin:0 0 18px; color:#222; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.hero-note{ color:var(--muted); font-size:12px; }

.button{
  display:inline-block;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.button.secondary{
  background:#fff;
  color:#111;
  border-color:var(--line);
}

.hero-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:#fff;
}
.card-title{ font-weight:800; margin-bottom:8px; }
.card-text{ color:#222; font-size:14px; }

.section{ padding:46px 0; }
.section.alt{ background:var(--alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h2{ margin:0 0 18px; font-size:24px; }
h3{ margin:0 0 10px; font-size:18px; }

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
.panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:#fff;
}
.panel p{ margin:0; color:#222; }

.boxed{
  border:2px solid #3a6ea5;
  border-radius:16px;
  padding:18px;
  background:#fff;
}

/* セクション用ボックス（事務所概要など、全面に使う場合） */
.boxed--section{
  /* プロフィールのboxedと同じ見た目で統一 */
  background:#fff;
}
.profile-name{ font-weight:900; font-size:20px; margin:0 0 10px; }
.profile-name span{ font-weight:600; font-size:14px; color:var(--muted); }
ul{ margin:10px 0 14px 1.2em; }
li{ margin:4px 0; }

.access{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.label{ font-weight:800; margin-top:10px; }

/* 受付・連絡先（dl）: SEO/アクセシビリティ（見出し＋定義リスト） */
.subheading{
  margin: 12px 0 6px;
  font-size: 18px; /* h3と同等 */
}
.contact-dl{ margin: 8px 0 14px; }
.contact-dl dt{
  font-weight: 800;
  color: var(--text);
}
.contact-dl dd{
  margin: 0;
  color: #222;
}
.contact-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.contact-row:first-child{ border-top: 0; padding-top: 0; }
.tel-link{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--telbg);
  color:#fff;
  font-weight:900;
  text-decoration:none;
}
.tel-link:focus-visible{ outline:3px solid rgba(31,78,121,.35); outline-offset:2px; }
.tel-link:hover{ background:var(--telbg-hover); text-decoration:none; }
.small{ color:var(--muted); font-size:12px; }

.access-placeholder{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.placeholder-title{ font-weight:800; margin-bottom:8px; }
.placeholder-box{ color:var(--muted); }

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
}
.footer-inner{ display:flex; flex-direction:column; gap:6px; }

@media (max-width: 860px){
/* ヘッダー：スマホでもPCと同じメニュー（ハンバーガー無し） */
.site-header{ position: static; }
.header-inner{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.brand-name{ font-size:22px; }
.brand-sub{ display:none; }

.nav{
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}
.nav a{
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.nav a:hover{ background: var(--alt); }
  /* レイアウト */
  .hero-inner{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .access{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }

  /* 受付・連絡先（dl）をスマホで縦並びに */
  .contact-row{ grid-template-columns: 1fr; gap: 4px; }

  /* 文字 */
  .hero h1{ font-size: 26px; }

  /* h1補足文はスマホで2行目に */
  .h1-sub{
    display:block;
    font-size:0.75em;
    white-space:normal;
    margin-top:4px;
  }

}

/* 明るめ木目（相談を想起させる）背景 */
.hero-wood{
  background-image: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)), url("https://source.unsplash.com/1600x900/?wood,desk,meeting");
  background-size: cover;
  background-position: center;
}
.map-wrap{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}
.gmap{
  width:100%;
  height:320px;
  border:0;
  display:block;
}
@media (max-width: 860px){
/* ヘッダー：スマホでもPCと同じメニュー（ハンバーガー無し） */
.site-header{ position: static; }
.header-inner{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.brand-name{ font-size:22px; }
.brand-sub{ display:none; }

.nav{
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}
.nav a{
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.nav a:hover{ background: var(--alt); }
  /* レイアウト */
  .hero-inner{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .access{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }

  /* 受付・連絡先（dl）をスマホで縦並びに */
  .contact-row{ grid-template-columns: 1fr; gap: 4px; }

  /* 文字 */
  .hero h1{ font-size: 26px; }

  /* h1補足文はスマホで2行目に */
  .h1-sub{
    display:block;
    font-size:0.75em;
    white-space:normal;
    margin-top:4px;
  }

}

/* 木目風フリー素材（相談を想起・温かみ） */
.section.wood-light{
  background-image:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
    url("https://source.unsplash.com/1600x900/?wood,table,light");
  background-size: cover;
  background-position: center;
}
.section.wood-soft{
  background-image:
    linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.96)),
    url("https://source.unsplash.com/1600x900/?wood,desk,workspace");
  background-size: cover;
  background-position: center;
}
.panel.wood-card{
  background-image:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
    url("https://source.unsplash.com/800x600/?wood,office");
  background-size: cover;
  background-position: center;
}

/* 社員（相談風景）フリー素材 */
.staff-photo{
  background:#fff;
}
.staff-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}
.staff-wrap img{
  max-width:100%;
  border-radius:18px;
  border:1px solid var(--line);
}
.staff-note{
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

/* 取り扱い業務 見出し直下の写真 */
.service-photo{
  width:100%;
  max-width:100%;
  margin:10px 0 12px;
  border-radius:14px;
  border:1px solid var(--line);
}

/* 公式プロフィール枠（著作／経歴／表彰をひとまとめ） */
.profile-credentials{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 16px 8px;
  background: var(--alt);
  margin: 14px 0 18px;
}
.profile-credentials h3{
  margin: 14px 0 8px;
  font-size: 18px;
}
.profile-credentials h3:first-child{ margin-top: 0; }
.awards-list{ margin: 8px 0 14px 1.2em; }
.awards-list li{ margin: 6px 0; }

.profile-credentials ul{ margin: 8px 0 14px 1.2em; }
.profile-credentials li{ margin: 6px 0; }


/* Right aligned signature */
.policy-sign-right {
  text-align: right;
}


/* ===============================
   追記：スマホのハンバーガーメニューを解除（PCと同じナビ表示）
   =============================== */
@media (max-width: 860px){
  .hamburger{ display:none !important; }

  .site-header{ position: static !important; }
  .header-inner{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  /* スマホでもナビを常時表示（折り返し） */
  .nav{
    display:flex !important;
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .nav a{
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
  }

  body.nav-open .nav{ display:flex !important; }
}


/* ===============================
   ナビ：冒頭アンカーをブルー背景＋白文字に
   =============================== */
.nav a{
  color:#ffffff;
  background:#6fa8dc;
  padding:8px 12px;
  border-radius:6px;
}

.nav a:hover,
.nav a:active,
.nav a:visited,
.nav a:focus{
  color:#ffffff;
  background:#6fa8dc;
}


/* ===============================
   最上位メニュー：各アンカーを個別に丸囲み（PC/スマホ共通）
   =============================== */
.site-header .nav{
  background:transparent;
  padding:0;
}

.site-header .nav a,
.site-header .nav a:visited,
.site-header .nav a:hover,
.site-header .nav a:active,
.site-header .nav a:focus{
  display:inline-block;
  background:#6fa8dc;
  color:#fff !important;
  padding:6px 10px;
  border-radius:999px; /* 個別に丸囲み */
  margin:4px 6px;
  text-decoration:none;
}


/* ===============================
   スマホでナビが非表示になる不具合の対策（PCはそのまま）
   既存CSSの .nav { display:none; } 等を強制上書きします。
   =============================== */
@media (max-width: 860px){
  .site-header .nav{
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-start;
  }
}


/* ===============================
   最上位メニュー：文字色を黒に変更（PC/スマホ共通）
   =============================== */
.site-header .nav a,
.site-header .nav a:visited,
.site-header .nav a:hover,
.site-header .nav a:active,
.site-header .nav a:focus{
  color:#000000 !important;
}


/* ===============================
   最上位メニュー：各アンカー背景を淡いブルーに（PC/スマホ共通）
   =============================== */
.site-header .nav a,
.site-header .nav a:visited,
.site-header .nav a:hover,
.site-header .nav a:active,
.site-header .nav a:focus{
  background:#6fa8dc !important; /* 淡いブルー */
}


/* ===============================
   スマホのみ：最上位メニューを縦並びに
   =============================== */
@media (max-width: 860px){
  .site-header .nav{
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .nav a{
    margin: 6px 0;
  }
}


/* ===============================
   各アンカーの文字色を白に統一（PC/スマホ共通）
   =============================== */
.site-header .nav a,
.site-header .nav a:visited,
.site-header .nav a:hover,
.site-header .nav a:active,
.site-header .nav a:focus{
  color:#ffffff !important;
}

/* ===== 全ページ共通：箱枠の枠線・角丸を統一（自動追記） =====
   対象：ページ内の「箱（カード/パネル/枠）」系のみ。ナビやボタン等は対象外。
*/
.hero-card,
.panel,
.wood-card,
.boxed,
.profile-credentials,
.map-wrap,
.access-placeholder{
  border: 2px solid #3a6ea5;
  border-radius: 16px;
  box-sizing: border-box;
}

/* ===== 追記：お知らせ（ピンク枠）を他の箱と同じ横幅＋角丸に統一 ===== */
.box.notice{
  width: min(1080px, 100% - 32px); /* .container と同じ横幅 */
  margin: 24px auto;              /* 中央寄せ（上下余白は必要に応じ調整） */
  border-radius: 16px;            /* 角丸 */
  box-sizing: border-box;
}