/* =========================================
   1. 基本設定（全ページ共通）
========================================= */

html {
  /* ページ内リンクで飛んだ時にヘッダーと被らないようにする */
  scroll-padding-top: 170px; 
}

body {
  font-family: "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #e8f1ff, #ffffff);
  background-attachment: fixed; /* 画面をスクロールしても背景が固定されるようにします */
}

/* ▼ PCではスマホメニューを完全非表示（最優先） */
.sp-nav {
  display: none;
}

/* ▼ h1 を画面に表示せず、SEOだけ効かせる（重要） */
.h1-hidden {
  position: absolute;
  left: -9999px;
}



/* =========================================
   2. 新レイアウト（トップページ専用）
========================================= */

.content-wrap {
  max-width: 1600px;
  margin: 40px auto 80px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.left-column {
  width: 1300px;
}

/* ▼ タイトルセクション全体の調整 */
.features-title {
  /* 1. サイズを上げ、色をロゴに近い濃紺にして「強さ」を出す */
  font-size: 2.6rem; 
  font-weight: 800;
  color: #1b4f9c; /* 電話バーと同じ濃い青に合わせると統一感が出ます */
  text-align: center;
  
  /* 2. 上下の余白をガツンと空けて、周囲のパーツから独立させる */
  margin: 100px 0 40px; 
  
  letter-spacing: 0.05em;
  line-height: 1.4;
  display: block;
}

.features-title span {
  /* 3. マーカーをさらに細く、少し「知的な水色」へ。主張しすぎない。 */
  background: linear-gradient(transparent 80%, #d1e8ff 80%);
  padding: 0 10px;
}

/* タイトル下のリード文 */
.features-lead {
  text-align: center !important;
  
  /* 4. 本文を少しだけ大きくし、色を「真っ黒」に近づけて「埋もれ」を防ぐ */
  font-size: 1.25rem; 
  color: #222; 
  
  /* 5. 行間を「2.2」に。これが一番の特効薬です */
  line-height: 2.2; 
  
  /* 6. 1行をあえて少し短くすることで、読み手の視線を中央に固定する */
  max-width: 650px; 
  margin: 0 auto 80px; /* 下の枠線との距離もしっかり取る */
  font-weight: 500;
}


/* ▼ 特徴セクション全体のコンテナ（大きな枠線は解除） */
.illustration-style {
  max-width: 1000px;
  margin: 0 auto 60px;
}

/* ▼ 特徴カード（ひとつひとつの独立した箱） */
.feature-card {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  
  /* 箱のデザイン */
  background: #fff;
  padding: 35px 30px;
  border-radius: 15px;
  border: 2px solid #f3e9d7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  
  margin-bottom: 30px; /* カード同士の間隔 */
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-3px); /* 軽く浮き上がる演出 */
}

.feature-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #5a4a42;
  margin: 0 0 12px;
}

.feature-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: #5a4a42;
  margin: 0;
}

/* アイコンやイラストのサイズ固定 */
.feature-illust, .feature-icon {
  flex-shrink: 0;
}

/* ▼ 電話誘導ボタン（カード群の下に配置） */
.mid-call-box {
  margin: 40px auto 10px;
  padding: 20px;
  text-align: center;
}

.mid-call-lead {
  font-size: 15px;
  font-weight: 600;
  color: #5a4a42;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.05em;
}

.mid-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #1b4f9c;
  text-decoration: none;
  padding: 10px 32px;
  border: 2px solid #1b4f9c;
  border-radius: 50px;
  transition: all 0.3s;
}

.mid-call-btn:hover {
  background: rgba(27, 79, 156, 0.05);
  box-shadow: 0 2px 8px rgba(27, 79, 156, 0.2);
}

.mid-call-time {
  display: block;
  font-size: 15px;
  color: #888;
  margin-top: 10px;
  font-weight: normal;
}





/* ▼ ファーストビュー写真 */
.fv-wrap {
  width: 100%;
  margin-bottom: 0;
}

.fv-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.fv-photo {
  position: relative;
}


.fv-test {
  position: absolute;
  top: 25%;
  right: 8%;
  transform: translateY(-50%);
  color: #fff;

  /* ポイント1：左揃えにし、左側に「意思を感じる余白」を作る */
  text-align: left;
  padding-left: 20px; /* 縦線の分の余白 */

  /* ポイント2：神谷さんが気に入っていたサイズ感は維持 */
  font-size: 42px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em; /* 少しだけ文字間を広げて「高級感」を */

  /* ポイント3：影は「クッキリ」と「ボカシ」の二段構え */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5), 0 0 15px rgba(0,0,0,0.3);
}


/* ▼ NEWバッジ（PC・スマホ共通・統一版） */
.badge-new,
.badge-new-info {
  display: inline-block;
  background: #e63946;   /* 落ち着いた赤 */
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  line-height: 1;
}

/* ▼ NEW の軽いアニメーション（任意） */
.badge-new,
.badge-new-info {
  animation: pop 1.2s ease infinite;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}



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

.sidebar-fv {
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #e0e6f0;
}

.sidebar-photo {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 10px;
  display: block;
  border-radius: 6px;
}

.sidebar-title {
  font-size: 1rem;
  font-weight: bold;
  color: #2a6ebb;
  margin-bottom: 10px;
  text-align: center;
}

.sidebar-office-name {
  text-align: center;
  font-size: 1.05rem; /* ← 基準にする */
  font-weight: bold;
  margin-bottom: 6px;
}

.sidebar-news {
  background: #f8faff;
  border: 1px solid #d0d8e8;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 6px;
}

.sidebar-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-news-list li {
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 1px solid #e0e6f0;
}

.sidebar-news-list .date {
  font-weight: bold;
  color: #2a6ebb;
  margin-right: 6px;
}


.sidebar-catch {
  font-size: 0.95rem; /* ← 少し下 */
  font-weight: 600;   /* 少し軽く */
  color: #1b4f9c;
  margin: 6px 0 4px;
  text-align: center;
}


/* =========================================
   4. 取扱業務ナビ：背景なし・独立3Dボタン版
========================================= */

.global-nav {
  background: transparent; /* 背景色を撤廃 */
  padding: 10px 0;
}

.global-nav-inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.service-nav {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between; /* 横並び維持 */
  flex-wrap: wrap;
  gap: 12px;
}

.service-nav li {
  flex: 1;
  min-width: 150px;
  text-align: center;
}

.service-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 5px;
  background: #ffffff;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  
  /* 境界線と厚みの設定 */
  border: 1px solid #d1d1d1;
  /* 右と下にだけ厚みを付けて「斜め」を表現 */
  border-right: solid 5px #b8c4d1; 
  border-bottom: solid 5px #a8b8c8; 
  border-radius: 4px;
  
  transition: all 0.1s;
  position: relative;
  top: 0;
  left: 0;
}

/* マウスを乗せた時の沈み込み反応 */
.service-nav a:hover {
  background: #fdfaff;
  color: #1b4f9c;
  /* 厚みを少し減らして沈んだように見せる */
  border-right-width: 2px;
  border-bottom-width: 2px;
  /* 厚みが減った分、位置をずらして「押し込み感」を出す */
  transform: translate(3px, 3px);
}

.service-nav .icon {
  margin-bottom: 4px;
}

.service-nav .icon svg {
  width: 34px;
  height: 34px;
  stroke: #5a4a42;
  transition: 0.2s;
}

.service-nav a:hover .icon svg {
  stroke: #1b4f9c;
  transform: scale(1.05);
}

/* 説明文非表示 */
.nav-desc {
  display: none !important;
}


/* =========================================
   5. 取扱業務カード
========================================= */

.service-cards {
  margin-top: 40px;
}

.service-title {
  text-align: center;
  font-size: 1.6rem;
  color: #2a6ebb;
  margin-bottom: 25px;
  font-weight: bold;
  border-left: none !important;
  padding-left: 0 !important;
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.service-card {
  flex: 1;
  min-width: 260px;
  background: #f8faff;
  border: 1px solid #d0d8e8;
  border-radius: 8px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: 0.2s;
  /* カード内のボタンを最下部に揃えたい場合は追加 */
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-card .icon {
  font-size: 55px;
  margin-bottom: 12px;
  line-height: 1;
}

.service-card p {
  font-size: 14px;
  line-height: 1.7;
  white-space: normal;
  word-break: break-word;
  flex-grow: 1; /* テキスト量に関わらずボタンの位置を揃える */
}

/* ▼ 詳しく見るボタン（共通スタイル） */
.service-btn,
.sub-link-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 18px;
  background: #1b4f9c;
  color: #fff !important; /* 文字色を白に固定 */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.2s;
  border: none; /* sub-link-btnにあった枠線を消去 */
}

/* ホバー時の挙動を統一 */
.service-btn:hover,
.sub-link-btn:hover {
  background: #163f7a;
  color: #fff !important;
  text-decoration: none;
}

/* ▼ サブ導線用のボックス調整 */
.sub-link-box {
  margin: 5px 0 15px; /* 上下の余白を微調整 */
}



/* =========================================
   6. トップページＦＡＱ
========================================= */

/* FAQブロック全体 */
.faq-block {
  margin: 40px 0;
  padding: 24px 20px;
  border: 1px solid #e0ddd5;
  background-color: #f9fbff;
  border-radius: 10px; /* ← 角を少し丸める */
}

/* 見出し */
.faq-block h2 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  border-left: none;
  padding-left: 0;
}

/* dl全体 */
.faq-list {
  margin: 0;
  padding: 0;
}

/* 質問部分（dt） */
.faq-list dt {
  margin: 0;
  padding: 10px 36px 10px 40px; /* ← 左に36pxの余白を確保 */
  font-weight: 600;
  cursor: pointer;
  position: relative;
  border-top: 1px solid #e0ddd5;
  background-color: #ffffff;
  line-height: 1.6;
}

/* Qアイコン（左固定） */
.faq-list dt::before {
  content: "Q";
  position: absolute;
  left: 10px;        /* ← 左端に固定 */
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #1b4f9c;    /* ← 青で統一（変更可） */
  font-size: 1.1rem;
}

/* 最初のdtだけ上の線を消す */
.faq-list dt:first-of-type {
  border-top: none;
}

/* プラス／マイナスアイコン風（右側） */
.faq-list dt::after {
  content: "＋";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #7a6f5a;
}

/* 開いているときの記号（.is-openはJSで付与） */
.faq-list dt.is-open::after {
  content: "－";
}

/* 回答部分（dd） */
.faq-list dd {
  margin: 0;
  padding: 10px 10px 14px 10px;
  border-bottom: 1px solid #e0ddd5;
  line-height: 1.7;
  display: none; /* 初期状態は非表示（アコーディオン） */
  background-color: #eef5ff;
  font-size: 0.95rem;
}



/* =========================================
   9. ヘッダー（PC版）
========================================= */

.site-header {
  background: linear-gradient(90deg, #e8f1ff, #ffffff);
  padding: 20px 0;
  border-bottom: 3px solid #2a5db0;
  /* ▼ ここから追加：PCを固定する設定 */
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.header-inner {
  width: 95%;
  max-width: 1500px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-title-text {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
}

.logo-image {
  height: 110px;
  width: auto;
}

.site-title a.office-name {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #1b4f9c !important;
  text-decoration: none;
  letter-spacing: 3px;
  padding-bottom: 6px;
  display: inline-block;
  text-shadow:
    0px 2px 2px rgba(255,255,255,0.8),
    0px -2px 3px rgba(0,0,0,0.25);
}

.site-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #2a5db0;
  margin-top: 4px;
  letter-spacing: 1.5px;
}





/* ナビ全体の枠線設定 */
.header-nav-center ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border-left: 1px solid #1b4f9c; /* 一番左の線 */
}

/* 各リスト項目の設定 */
.header-nav-center ul li {
  border-right: 1px solid #1b4f9c; /* 右側の線 */
  padding-right: 0; /* 【修正】10pxの余白を削除して中央にする */
  display: flex; /* 追加：中のaタグを中央に配置しやすくする */
  align-items: center;
}

/* リンクボタンの設定 */
.header-nav-center a {
  color: #1b4f9c;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  /* 【修正】上下左右の余白を均等（上下10px 左右20pxなど）に調整 */
  padding: 10px 20px; 
  letter-spacing: 0.03em;
  display: block;
  text-align: center; /* 文字を中央寄せ */
  width: 100%; /* liの幅いっぱいに広げる */
  transition: background-color 0.3s; /* お好みで：ホバー時を滑らかに */
}

.header-nav-center a:hover {
  text-decoration: underline;
  background-color: rgba(27, 79, 156, 0.05); /* お好みで：ホバー時に少し色を付けるとボタンらしくなります */
}









.header-contact-inline {
  text-align: right;
  margin-left: 20px;
}

.header-contact-inline .contact-lead {
  font-size: 16px;
  font-weight: 700;
  color: #2a5db0;
  margin-bottom: 2px;
  line-height: 1.2;
}

.header-contact-inline .contact-phone {
  font-size: 28px;
  font-weight: 900;
  color: #1b4f9c;
  margin-bottom: 2px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.header-contact-inline .contact-time {
  font-size: 16px;
  color: #555;
  line-height: 1.2;
}

/* ▼ PC版：電話番号ブロックを一体化（スマホCSSの干渉を防ぐ） */
.header-contact-inline {
  text-align: right;
  line-height: 1.1 !important;
}

.header-contact-inline p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

.header-contact-inline .contact-lead {
  font-size: 16px !important;
  font-weight: 700;
  color: #2a5db0;
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
}

.header-contact-inline .contact-phone {
  font-size: 28px !important;
  font-weight: 900;
  color: #1b4f9c;
  margin-bottom: 4px !important;
  letter-spacing: 1px;
  line-height: 1.1 !important;
}

.header-contact-inline .contact-time {
  font-size: 16px !important;
  color: #555;
  line-height: 1.1 !important;
}

/* =========================================
   10. フッター
========================================= */

.site-footer {
  background: #ffffff;
  border-top: 1px solid #ddd;
  margin-top: 40px;
  padding: 20px 0;
}

.site-footer p {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin: 0;
}



/* ▼ page top ボタン（スタイリッシュ・安定版） */
/* ▼ page top ボタン（描画バグ対策・完全版） */
.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 56px;
  height: 56px;
  
  /* ボタンの背景色（不透明にして安定させる） */
  background: #1b4f9c; 
  border-radius: 16px;
  
  /* 枠線と影（スタイリッシュな立体感を出す） */
  border: 1px solid rgba(255, 255, 255, 0.3);
  outline: 1px solid rgba(27, 79, 156, 0.1);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 20px -5px rgba(0, 0, 0, 0.3);

  /* 中の矢印を真ん中に配置する設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  /* アニメーションと重なり順 */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 99999; 

  /* 初期状態（隠しておく） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* ★ 重要：画像を使わずCSSで直接「白い線」を描く（これで消えなくなります） */
.back-to-top::before {
  content: "";
  width: 16px;
  height: 16px;
  /* 上と左にだけ白い線を引く */
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  /* 45度回転させて「山型（＾）」にする */
  transform: rotate(45deg);
  /* 視覚的な中心調整のため少し下げる */
  margin-top: 6px;
  display: block;
}

/* ▼ 表示状態（スクロールした時にJavaScriptで付与されるクラス） */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ▼ ホバー時（PCマウス用）：少し浮き上がる演出 */
@media (hover: hover) {
  .back-to-top:hover {
    background: #123a75;
    box-shadow: 
      0 8px 15px -3px rgba(0, 0, 0, 0.2),
      0 20px 30px -10px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
  }
}

/* ▼ スマホでのタップ時：軽く押し込まれる反応 */
.back-to-top:active {
  transform: translateY(-2px) scale(0.95);
  transition: 0.1s;
}



/* =========================================
   11. 相続手続き案内ページ（ヘッダー色に統一・PC専用）
========================================= */

/* ▼ 相続ページ：流れの数字だけを強調（HTML変更なし） */
.souzoku-page .flow-list li {
  position: relative;
}

/* ▼ li の先頭にある「数字＋句点」だけを強調 */
.souzoku-page .flow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

/* ▼ 実際の数字部分を強調する */
.souzoku-page .flow-list li {
  font-size: 18px; /* 全体の文字サイズはそのまま */
}

.souzoku-page .flow-list li span.num {
  font-size: 32px;      /* 数字だけ大きく */
  font-weight: 700;     /* 太く */
  color: #1b4f9c;       /* 濃青で統一 */
}



/* ▼ ページ全体の中央揃え */
.souzoku-page {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ▼ ページタイトル（淡い青に合わせる） */
.souzoku-page .page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 35px;
  padding-left: 16px;
  border-left: none;
  letter-spacing: 0.03em;
}

/* ▼ 重要ポイントボックス（淡青ベース） */
.souzoku-info-box {
  background: #f3f7ff;
  border: 1px solid #cfdcf5;
  padding: 26px;
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #1b3f7a;
  line-height: 1.9;
}


/* ▼ 説明文にくっつく注意ポイント（内部リンク案内） */
.inner-link {
  background: #fff4d9;              /* 淡いクリーム色：重要ボックスと区別 */
  padding: 16px 18px;
  margin: 10px 0 26px;              /* 上は詰める／下は少し広げる */
  border-radius: 6px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #5a4a42;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

/* ▼ inner-link 内の箇条書き */
.inner-link ul {
  margin: 0;
  padding-left: 1.4em;              /* 箇条書きの左位置を調整 */
}

.inner-link li {
  margin-bottom: 12px;              /* 箇条書き同士の余白 */
}

.inner-link li:last-child {
  margin-bottom: 0;                 /* 最後だけ余白なし */
}

/* ▼ ボタン風リンク（カッコ付きに見える） */
.link-btn a {
  display: inline-block;
  padding: 4px 10px;
  background: #e8f1fb;              /* 淡い青 */
  color: #1b4f9c;                   /* 濃青 */
  border: 1px solid #c7d8ea;        /* 薄い青の枠線 */
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s ease;
}

.link-btn a:hover {
  background: #d9e9f8;
  border-color: #b6cce0;
}




/* ▼ セクション見出し（淡青ライン） */
.flow-section h2,
.section-block h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1b4f9c;
  margin: 40px 0 20px;
  padding-left: 0;
  border-left: none;
}

/* ▼ 流れのカード（白×淡青） */
.flow-list li {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 18px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #1b3f7a;
  line-height: 1.9;
}

/* ▼ 流れの補足（淡青の薄い帯） */
.flow-note {
  background: #eef4ff;
  border-left: 4px solid #a8c4f0;
  padding: 12px;
  margin-top: 14px;
  border-radius: 6px;
  font-size: 15px;
  color: #1b3f7a;
}

/* ▼ 詳細説明ボックス（白×淡青） */
.detail-box {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 20px;
  margin-bottom: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #1b3f7a;
  line-height: 1.8;
}

.detail-box h3 {
  font-size: 20px;
  color: #1b4f9c;
  margin-bottom: 12px;
}

/* ▼ 注意書き（淡いクリーム色） */
.detail-box .note {
  background: #fff8e6;
  border-left: 4px solid #e6c88f;
  padding: 12px;
  margin-top: 14px;
  border-radius: 6px;
  font-size: 15px;
  color: #5a4a42;
}

/* ▼ FAQ（個々のカード化をやめて、全体をひとまとめに） */
.section-block {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 22px 24px;
  margin: 32px 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #1b3f7a;
  line-height: 1.9;
}

.section-block h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 25px;
  padding-left: 0;
  border-left: none;
}

.section-block .faq-item {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 22px;
  box-shadow: none;
}

.section-block .faq-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 6px;
}

.section-block .faq-item p {
  margin: 0 0 10px;
  color: #1b3f7a;
  line-height: 1.8;
}

.section-block .faq-item:last-child {
  margin-bottom: 0;
}

/* ▼ 電話ボタンを中央に配置 */
.contact-btn {
  text-align: center;
  margin: 30px 0;
}

/* 淡く上品な電話ボタン */
.btn-blue {
  display: inline-block;
  background: #1b4f9c;          
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;           /* 角丸で柔らかく */
  border: none;
  font-size: 18px;
  text-decoration: none;
  transition: 0.25s ease;
}

/* ホバー時：上品に色が濃くなる */
.btn-blue:hover {
  background: #163f7a;
  border-color: #b6cce0;
}



/* =========================================
   12. 事務所案内ページ（サイズ感アップ・PC）
========================================= */

/* ▼ ページ全体の幅と中央揃え */
.access-page {
  width: 90%;
  max-width: 980px;   /* ← 少し広げる */
  margin: 0 auto;
}

/* ▼ ページタイトル（少し大きく） */
.access-page h2 {
  font-size: 32px;    /* ← 30 → 32 */
  font-weight: 900;
  color: #1b4f9c;
  text-align: center;
  margin: 15px 0 40px;
  letter-spacing: 0.03em;
}

/* ▼ 情報ブロック */
.office-info {
  margin-bottom: 35px;
}

/* ▼ 1行ごとの情報（ラベル＋値） */
.info-row {
  display: flex;
  padding: 12px 0;     /* ← 少し余白を増やす */
  border-bottom: 1px solid #e5e5e5;
  gap: 25px;
}

/* ▼ ラベル（左側） */
.info-label {
  width: 160px;        /* ← 140 → 160 で読みやすく */
  font-weight: 700;
  color: #1b4f9c;
  font-size: 16px;     /* ← 15 → 16 */
  flex-shrink: 0;
}

/* ▼ 値（右側） */
.info-value {
  font-size: 16px;     /* ← 15 → 16 */
  line-height: 1.8;    /* ← 少し広げる */
  color: #333;
}

/* ▼ セクション見出し */
.access-page h3 {
  font-size: 22px;     /* ← 20 → 22 */
  font-weight: 800;
  color: #1b4f9c;
  margin: 30px 0 14px;
}

/* ▼ 本文 */
.access-page p,
.access-page li {
  font-size: 16px;     /* ← 15 → 16 */
  line-height: 1.8;
  color: #333;
}

/* ▼ セクション全体 */
.access-page section {
  padding: 6px 0 20px;
  margin-bottom: 22px;
  border: none;
  background: transparent;
}

/* ▼ Googleマップ（大きく・見やすく） */
.map-wrap {
  text-align: center;
  margin: 15px 0 30px;
}

.map-wrap iframe {
  width: 100%;
  max-width: 750px;    /* ← 550 → 750 に拡大 */
  height: 420px;       /* ← 300 → 420 に拡大 */
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ▼ 駐車場写真（少し大きく） */
.parking-photos {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.parking-photos img {
  width: 46%;          /* ← 40% → 46% に拡大 */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ▼ Googleマップ下の「Googleマップで開く」リンク */
.map-open-link {
  text-align: center;
  margin-top: 8px;
}

.map-open-link a {
  font-size: 15px;
  color: #1b4f9c;
  text-decoration: underline;
  transition: 0.2s;
}

.map-open-link a:hover {
  opacity: 0.7;
}



/* ▼ 代表者セクション */
/* ▼ 代表者セル（横並び：左テキスト、右写真） */
.owner-cell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px; /* 20→30 少し広げてゆとりを出す */
}

/* ▼ 左側のコンテンツ全体 */
.owner-left-content {
  flex: 1;                  /* 左側の幅を確保 */
}


/* ▼ 左側のテキストエリア */
.owner-text {
  flex: 1;
  min-width: 300px;      /* ★ここを追加（極端に細くなるのを防ぐ） */
}

/* 役職と名前の行 */
.owner-name-row {
  margin-bottom: 12px;
}

.job-title {
  font-size: 15px;
  color: #1b4f9c;
  font-weight: 700;
  margin-right: 8px;
}

.owner-name {
  font-size: 22px; /* 名前を少し強調 */
  font-weight: 800;
  color: #333;
}

/* ★案3：資格情報（スカスカ感を埋める要素） */
.license-info {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee; /* 軽い区切り線で情報のまとまりを作る */
}

.owner-message {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px !important;
}

/* ★案1：プロフィールへのリンクボタン */
.profile-link-wrap {
  margin-top: 15px;
}

.btn-mini {
  display: inline-block;
  padding: 10px 24px;
  background-color: transparent;
  color: #1b4f9c;
  border: 1px solid #1b4f9c;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s;
}

.btn-mini:hover {
  background-color: #1b4f9c;
  color: #fff;
  text-decoration: none;
}

/* ▼ 右側の写真 */
.owner-photo {
  width: 220px; /* 200→220 少し大きくしてバランス調整 */
  height: auto;
  border-radius: 8px; /* 角丸を少し強めて柔らかい印象に */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影を少し深くして存在感を出す */
  flex-shrink: 0;
}


/* =========================================
   13. 司法書士プロフィール：完全修正版
========================================= */

.profile-page {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
    color: #333;
    line-height: 1.6;
}

/* ヒーローセクション */
.profile-hero {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f4f9;
    padding-bottom: 20px;
}
.profile-quote {
    font-size: 26px;
    color: #1b4f9c;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 10px;
    border: none !important;
}
.profile-lead {
    font-size: 16px;
    color: #555;
    margin: 0 auto;
}

/* メインセクション：写真・名前・略歴 */
.profile-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

/* 左側：写真と名前エリア */
.profile-photo-area {
    flex: 0 0 280px;
}
.photo-frame img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 10px 10px 0 #f0f4f9;
}

/* 名前エリアの余白を極限まで調整 */
.profile-name-box {
    margin-top: 15px; /* 写真との間隔 */
    text-align: left;
    border-bottom: 2px solid #1b4f9c;
    padding-bottom: 8px;
}
.name-kana {
    font-size: 12px;
    color: #666;
    margin: 0 0 2px 0; /* 下の氏名との間隔 */
    display: block;
}
.name-jp {
    font-size: 28px;
    font-weight: 800;
    color: #1b4f9c;
    margin: 0;
    line-height: 1.2;
}
.name-en {
    font-size: 14px;
    color: #a8c4f0;
    margin: 4px 0 8px 0; /* 上下の間隔を詰めつつ整列 */
    display: block;
    font-weight: 600;
}
.qualification-tag {
    font-size: 14px;
    color: #444;
    margin: 0;
    display: block;
    line-height: 1.4;
}

/* 右側：略歴タイムライン */
.timeline {
    flex: 1;
    border-left: 2px solid #e0e6ef;
    padding-left: 20px;
}
.timeline-item {
    position: relative;
    display: flex; /* 年号と本文を横に分ける */
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #a8c4f0;
    border-radius: 50%;
}
.timeline-item.highlight::before {
    background: #1b4f9c;
}

/* 年号の列（幅を固定して本文を回り込ませない） */
.timeline .year {
    flex: 0 0 80px; /* 年号の幅を固定 */
    font-weight: 800;
    color: #1b4f9c;
    font-size: 15px;
    margin: 0;
}
/* 本文の列 */
.timeline .desc {
    flex: 1;
    font-size: 15.5px;
    margin: 0;
    color: #444;
    text-align: justify; /* 両端を揃えて綺麗に */
}
.highlight-story {
    background: #fdfaf5;
    padding: 12px;
    border-radius: 4px;
    margin-top: 5px;
}

/* 実績・専門分野などの共通タイトル */
.section-title {
    font-size: 20px;
    color: #1b4f9c;
    border-left: 4px solid #1b4f9c;
    padding-left: 12px;
    margin-bottom: 15px;
    font-weight: 800;
}

/* 4. 実績セクション（改行問題解消） */
.stats-section {
    background: #f8faff;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 35px;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 15px;
}
.stat-card {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
}
.stat-label { font-size: 14px; margin-bottom: 3px; }
.stat-number {
    font-size: 26px; /* 少しサイズを落として1行に収める */
    font-weight: 800;
    color: #1b4f9c;
    white-space: nowrap; /* 絶対に改行させない */
}
.stat-desc { font-size: 14px; line-height: 1.5; margin-top: 8px; }


/* 専門分野・資格グリッド（極限まで圧縮） */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 40px; /* 上下の間隔を30pxから15pxへ半分に */
    margin-bottom: 25px; /* 下との余白も削減 */
}

/* 追加：小見出し（専門サポート分野）の余白調整 */
.specialty-sub-title { 
    font-size: 16px; 
    color: #444; 
    font-weight: 700;
    margin: 0 !important; /* 下のリストとの隙間をゼロに */
    padding: 0 !important;
}

.styled-list { 
    margin-top: 0 !important;  
}

/* 専門分野・資格リスト共通 */
.styled-list li, .license-details li {
    list-style: none !important;
    padding: 4px 0; /* 上下を少し詰めて間延びを防止 */
    border-bottom: 1px solid #eef2f7;
    font-size: 15px;
    line-height: 1.4;
}

/* 【取扱業務のみ】カッコ内を強制改行させる設定 */
.break-sub {
    display: block; /* これで強制改行になります */
    font-size: 13.5px; /* 補足なので少し小さく */
    color: #666;
    margin-top: 2px; /* タイトルとの微調整 */
}

/* 【資格のみ】カッコ内を横に並べる（既存の設定を維持） */
.license-details li span {
    font-size: 13.5px;
    color: #666;
    margin-left: 5px; /* 横並びの時の間隔 */
}




/* 私たちが大切にしていること */
.personality-section {
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid #eef2f7;
    padding: 25px;
    border-radius: 10px;
}
.promise-item {
    margin-bottom: 15px;
}
.promise-item h4 {
    color: #1b4f9c;
    font-size: 18px;
    margin-bottom: 5px;
    /* 追加・修正部分 */
    padding-left: 1.5em;     /* 左側に数字分のスペースを確保 */
    text-indent: -1.5em;    /* 1行目を左に押し出し、2行目以降を右にインデントさせる */
}
.promise-item p {
    font-size: 15.5px;
    padding-left: 10px;
}


/* CTA：営業色を抑えた自然なデザイン */
.cta-section-profile {
    padding: 25px 0; /* 40px→25pxへ。上下を大幅に圧縮 */
    background: #fff; /* 背景の濃い青を撤廃 */
    border-top: 1px solid #eef2f7; /* 上に薄い線を入れるだけで区切りを表現 */
    color: #333;
    text-align: center;
    margin-top: 30px;
}
.cta-title {
    font-size: 18px !important; /* 文字サイズを下げて控えめに */
    color: #1b4f9c !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}
.cta-description {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
}
.cta-tel-link {
    display: inline-block !important;
    font-size: 24px !important; /* 32px→24px。主張しすぎないサイズ */
    color: #1b4f9c !important;
    background: transparent !important; /* 背景白を撤廃 */
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 8px 25px !important;
    border: 1px solid #1b4f9c !important; /* 枠線のみでボタンを表現 */
    border-radius: 4px !important;
    margin: 5px 0 !important;
}
.cta-hours {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 8px !important;
}




/* =========================================
   14. 遺言書作成ページ（公正証書・自筆証書）
========================================= */

/* ▼ 相続ページ：流れの数字だけを強調（HTML変更なし） */
.yuigon-page .flow-list li {
  position: relative;
}

/* ▼ li の先頭にある「数字＋句点」だけを強調 */
.yuigon-page .flow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

/* ▼ 実際の数字部分を強調する */
.yuigon-page .flow-list li {
  font-size: 18px; /* 全体の文字サイズはそのまま */
}

.yuigon-page .flow-list li span.num {
  font-size: 32px;      /* 数字だけ大きく */
  font-weight: 700;     /* 太く */
  color: #1b4f9c;       /* 濃青で統一 */
}


/* ▼ ページ全体の中央揃え（相続ページと同じ） */
.yuigon-page {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ▼ ページタイトル（相続ページと同じ濃青） */
.yuigon-page .page-title {
  font-size: 30px;
  font-weight: 800;
  color: #1b4f9c;
  margin-bottom: 35px;
  padding-left: 16px;
  border-left: none;
  letter-spacing: 0.03em;
}

/* ▼ セクション全体（相続ページと同じカードレイアウト） */
.yuigon-page .section-block {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 22px 24px;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.9;
}

/* ▼ セクション見出し（相続ページと同じ） */
.yuigon-page .section-block h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 25px;
  padding-left: 0;
  border-left: none;
}

/* ▼ detail-box（公正証書・自筆証書の説明） */
.yuigon-page .detail-box {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 20px;
  margin-bottom: 18px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.8;
}

.yuigon-page .detail-box h3 {
  font-size: 22px;
  color: #1b4f9c;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ▼ 流れ（flow-list）を相続ページと同じカードに */
.yuigon-page .flow-list li {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 18px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.9;
  position: relative;
  padding-left: 58px; /* 数字バッジのスペース */
}


/* ▼ flow-note（補足） */
.yuigon-page .flow-note {
  background: #eef4ff;
  border-left: 4px solid #a8c4f0;
  padding: 12px;
  margin-top: 14px;
  border-radius: 6px;
  font-size: 15px;
  color: #1b3f7a;
}

/* ▼ FAQ（相続ページと同じ） */
.yuigon-page .faq-item {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 22px;
  box-shadow: none;
}

.yuigon-page .faq-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 6px;
}

.yuigon-page .faq-item p {
  margin: 0 0 10px;
  color: #1b3f7a;
  line-height: 1.8;
}

/* ▼ FAQテーブル（相続ページと統一） */
.yuigon-page .faq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 0.95rem;
}

.yuigon-page .faq-table th,
.yuigon-page .faq-table td {
  border: 1px solid #d5e3ff;
  padding: 10px 12px;
  line-height: 1.6;
}

.yuigon-page .faq-table th {
  background: #eef4ff;
  font-weight: bold;
  color: #1b4f9c;
}

/* ▼ アイコン色（相続ページと同じブラウン） */
.yuigon-page .icon svg {
  stroke: #7a6f5a;
}

/* =========================================
   15. 成年後見ページ（法定後見・任意後見）
========================================= */

/* ▼ flow-list：数字強調（遺言ページと同じ） */
.kouken-page .flow-list li {
  position: relative;
}

/* ▼ li の先頭にある「数字＋句点」だけを強調 */
.kouken-page .flow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

/* ▼ 数字部分を強調 */
.kouken-page .flow-list li {
  font-size: 18px;
}

.kouken-page .flow-list li span.num {
  font-size: 32px;
  font-weight: 700;
  color: #1b4f9c;
}

/* ▼ ページ全体の中央揃え */
.kouken-page {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ▼ ページタイトル */
.kouken-page .page-title {
  font-size: 30px;
  font-weight: 800;
  color: #1b4f9c;
  margin-bottom: 35px;
  padding-left: 16px;
  border-left: none;
  letter-spacing: 0.03em;
}

/* ▼ セクション全体（カードレイアウト） */
.kouken-page .section-block {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 22px 24px;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.9;
}

/* ▼ セクション見出し */
.kouken-page .section-block h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 25px;
  padding-left: 0;
  border-left: none;
}

/* ▼ detail-box（法定後見・任意後見の説明） */
.kouken-page .detail-box {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 20px;
  margin-bottom: 18px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.8;
}

.kouken-page .detail-box h3 {
  font-size: 22px;
  color: #1b4f9c;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ▼ flow-list（手続きの流れ） */
.kouken-page .flow-list li {
  background: #ffffff;
  border: 1px solid #d5e3ff;
  padding: 18px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #1b3f7a;
  line-height: 1.9;
  position: relative;
  padding-left: 58px;
}

/* ▼ flow-note（補足） */
.kouken-page .flow-note {
  background: #eef4ff;
  border-left: 4px solid #a8c4f0;
  padding: 12px;
  margin-top: 14px;
  border-radius: 6px;
  font-size: 15px;
  color: #1b3f7a;
}

/* ▼ FAQ */
.kouken-page .faq-item {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 22px;
  box-shadow: none;
}

.kouken-page .faq-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1b4f9c;
  margin-bottom: 6px;
}

.kouken-page .faq-item p {
  margin: 0 0 10px;
  color: #1b3f7a;
  line-height: 1.8;
}

/* ▼ FAQテーブル */
.kouken-page .faq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 0.95rem;
}

.kouken-page .faq-table th,
.kouken-page .faq-table td {
  border: 1px solid #d5e3ff;
  padding: 10px 12px;
  line-height: 1.6;
}

.kouken-page .faq-table th {
  background: #eef4ff;
  font-weight: bold;
  color: #1b4f9c;
}

/* ▼ アイコン色（ブラウン） */
.kouken-page .icon svg {
  stroke: #7a6f5a;
}

/* ▼ PCではスマホ専用要素を非表示にする */
.sp-only {
  display: none;
}



/* ▼ お知らせ欄：右側（説明文＋リンク）を縦に積む */
.sidebar-news-list li {
  display: flex;
  align-items: flex-start;
}

.sidebar-news-list .date {
  width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ▼ 右側を「縦に積む1カラム」にする */
.sidebar-news-list .text,
.sidebar-news-list .links {
  display: block;   /* ← これが最重要！ */
}

/* ▼ リンクの左位置を説明文と完全に揃える */
.sidebar-news-list .links {
  margin-left: 0 !important;   /* ← ここがズレの原因だった */
  margin-top: 2px;
  white-space: nowrap;
}

/* ▼ 日付と文章の間にスペースを作る */
.sidebar-news-list .right {
  margin-left: 8px;   /* ← 好みで 4〜10px に調整可能 */
}


/* ▼ PC とスマホで改行を切り替える */
.pc-br { display: inline; }
.sp-br { display: none; }


/* ▼ 相続手続きの流れリストを左から少し右に寄せる */
.souzoku-flow-simple {
  padding-left: 2em !important;  /* ← 1em = 文字1つ分の幅 */
}


/* =========================================
   16. 住所変更登記義務化（改善版）
========================================= */

/* ▼ ページ全体 */
.address-change-page {
  width: 90%;
  max-width: 900px; /* ←少し絞って可読性UP */
  margin: 0 auto;
}

/* ▼ ページタイトル */
.address-change-page h2 {
  font-size: 28px;
  font-weight: 800;
  color: #1b4f9c;
  margin-bottom: 35px;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* ▼ セクション */
.address-change-page .career-flex {
  display: block;
  margin-bottom: 40px;
}

/* ▼ 見出し（統一・メリハリ強化） */
.address-change-page h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1b4f9c;
  margin: 40px 0 15px;
  padding-left: 12px;
  border-left: 4px solid #a8c4f0;
  line-height: 1.4;
}

/* ▼ 本文 */
.address-change-page p {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 18px;
}

/* ▼ 強調テキスト */
.address-change-page strong {
  color: #c0392b; /* ←重要部分をしっかり目立たせる */
  font-weight: 700;
}

/* ▼ 箇条書き */
.address-change-page ul,
.address-change-page .career-list {
  margin: 0 0 22px 20px;
  padding: 0;
}

.address-change-page ul li,
.address-change-page .career-list li {
  margin-bottom: 8px;
  font-size: 16px;
  color: #1b3f7a;
  line-height: 1.7;
}


/* =========================================
   FAQ（見やすさ大幅改善）
========================================= */

.faq-title {
  font-size: 22px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.faq-item {
  border: 1px solid #e0e6ef;
  padding: 18px 20px;
  margin-bottom: 15px;
  border-radius: 6px;
  background: #fafcff;
}

.faq-item h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1b4f9c;
}

.faq-item p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 0;
}

/* =========================================
   CTAボタン（CV改善の要）
========================================= */

.contact-btn {
  text-align: center;
  margin: 30px 0;
}

.btn-blue {
  display: inline-block;
  background: #1b4f9c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-blue:hover {
  background: #163f7a;
  transform: translateY(-2px);
}

/* ▼ CTA補足文 */
.contact-note {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: -10px;
  margin-bottom: 30px;
}




/* =========================================
   17. スマホ用スタイル
========================================= */

/* ▼ スマホ最適化（768px以下） */
@media screen and (max-width: 768px) {

/* ▼ 改行制御 */
.pc-br { display: none; }
.sp-br { display: inline; }


/* 固定（sticky）の制限を解除する */
html, body {
  overflow: visible !important;
}

/* ページ内リンクのジャンプ位置を調整 */
html {
  scroll-padding-top: 90px;
}


/* ▼ スマホ：電話相談ボタン最適化（統合版） */
.contact-btn .btn-blue {
  display: inline-block;
  width: 100%;
  max-width: 320px;

  font-size: 14px !important;
  font-weight: 600;

  padding: 10px 12px !important;
  border-radius: 6px;
  text-decoration: none;

  white-space: nowrap !important;
}


/* ▼ スマホ：本文の横幅を最小スマホ幅に固定（改行が安定） */
.feature-text p {
  max-width: 320px;
  margin: 0 auto;

  font-size: 14px;
  line-height: 1.7;
}




  /* ▼ レイアウト（スマホは縦並び） */
   .content-wrap {
   display: block !important;
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   padding-top: 90px !important;
  }
  

  .left-column,
  .sidebar-fv,
  .sidebar {
    float: none !important;
    width: 100% !important;
  }


  /* ▼ スマホ：ヘッダーを画面上部に完全固定 */
.site-header {
  position: fixed !important;  /* 親の箱を無視して画面に貼り付けます */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 2000 !important;
  background: #ffffff !important;
  padding: 10px 0 !important;
  border-bottom: 2px solid #2a5db0 !important;
}



  /* ▼ ヘッダー（スマホ縮小） */
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px;
  }

  .logo-image { height: 60px !important; }

  .site-title a.office-name {
    font-size: 18px !important;
    line-height: 1.1;
  }

  .site-subtitle { font-size: 10px !important; }






/* ▼ ハンバーガー（おしゃれな丸＋中央揃えの白い三本線） */
.hamburger-menu {
  order: 2;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: #1b4f9c; /* 丸の色（落ち着いた濃紺） */
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* ← 中央揃えのポイント */
  gap: 5px;            /* 線の間隔 */
  cursor: pointer;
  flex-shrink: 0;
  z-index: 3000;

  /* ▼ おしゃれ感UP：影を入れる */
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ▼ 三本線（白・中央揃え） */
.hamburger-menu span {
  display: block;
  height: 2px !important;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s ease;
}

/* ▼ 上・中・下でだんだん短く（中央揃えでも自然に見える長さ） */
.hamburger-menu span:nth-child(1) { width: 20px; }
.hamburger-menu span:nth-child(2) { width: 14px; }
.hamburger-menu span:nth-child(3) { width: 10px; }
  
  
  
/* ▼ ハンバーガー → 完全に中央で交差する × */
.hamburger-menu.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 20px;
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 20px;
}  




/* アニメーションを滑らかに */
.hamburger-menu span {
  transition: 0.3s ease;
}




  /* ▼ 電話番号を非表示にする */
  .header-contact-inline {
    display: none !important;
  }
  
  

  /* ▼ PCナビ非表示（スマホはハンバーガー） */
  .header-nav-center { display: none; }

/* ▼ スマホだけ表示 */
.sp-only {
  display: block;
}

/* ▼ PCだけ表示 */
.pc-only {
  display: none;
}

/* ▼ スマホナビ（上からスライドして開く） */
.sp-nav {
  display: block;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20px;
  transition: top 0.4s ease;
  z-index: 2500;
}

/* ▼ スマホナビの背景色を淡く */
.sp-nav {
  background: #f4f8ff; /* ← 淡い青に変更 */
}


/* ▼ 黒ポツを消す */
.sp-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ▼ 横線をしっかり目立たせる */
.sp-nav ul li {
  border-bottom: 2px solid #b5c7e6; /* ← 少し濃い青系で上品に強調 */
  padding: 14px 0;                 /* ← 行間を広げて押しやすく */
}

.sp-nav ul li a {
  color: #1b4f9c;
  text-decoration: none;
  font-size: 17px;
  display: block;
}


/* ▼ 開いたときに上から降りてくる */
.sp-nav.open {
  top: 0;
}

  
/* ▼ トップページ代表挨拶をスマホで確実に非表示 */
.greeting-flex.pc-only {
  display: none !important;
}

  /* ▼ greeting.html のスマホ調整 */
  .greeting-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 15px;
    padding-top: 90px !important;
  }

  .greeting-photo-wrap {
    text-align: center;
    margin-bottom: 30px;
  }

  .greeting-photo {
    width: 85%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 15px; /* 角を丸くして優しさを出す */
  }

  .greeting-text h2 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }

  .greeting-text p {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 16px;
  }

  .greeting-text .btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
    padding: 10px 18px;
  }



 /* ▼ スマホ下部固定の電話バー（ブラッシュアップ版） */
 .sp-call-fixed {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   
   /* ポイント1：グラデーションで「ボタンらしさ」と「高級感」を出す */
   background: linear-gradient(to bottom, #ffffff 0%, #e8f1fb 100%);
   
   color: #1b4f9c;
   text-align: center;
   padding: 12px 10px 18px; /* 下に少し余白を作って、iPhoneのバーとの干渉を防ぐ */
   
   /* ポイント2：境界線を「線」ではなく「影」にして、ふわっと浮かせる */
   border-top: 1px solid #c5d9f1;
   box-shadow: 0 -4px 10px rgba(0,0,0,0.1); 
   
   z-index: 3000;
 }

 .sp-call-fixed a {
   color: #1b4f9c;
   text-decoration: none;
   display: block; /* 全体を押せるように */
 }
 
 .sp-call-main {
   display: inline-block; /* 塊として認識させる */
   font-size: 13px;
   font-weight: bold; /* 少し強調 */
   margin-bottom: 4px;
   background: #1b4f9c; /* 文言をバッジ風に */
   color: #fff;
   padding: 2px 12px;
   border-radius: 20px; /* 丸みを持たせて今風に */
 }

 .sp-call-row {
   display: block;
   font-size: 20px; /* 電話番号を少しだけ大きく */
   font-weight: bold;
   letter-spacing: 0.05em; /* 番号を読みやすく */
 }

 .sp-call-time {
   display: block; /* 改行して、電話番号のインパクトを強める */
   font-size: 11px;
   font-weight: normal;
   margin-top: 2px;
   color: #666; /* 時間帯は少し控えめに */
 }

 
/* =========================================
   スマホ用：業務ナビ（沈み込み不具合修正版）
========================================= */

/* スマホで4番目・5番目を非表示 */
.service-nav li:nth-child(4),
.service-nav li:nth-child(5) {
  display: none !important;
}

.service-nav {
  flex-direction: column !important;
  gap: 15px !important;
}

.service-nav li {
  width: 100% !important;
  flex: none !important;
}

.service-nav a {
  display: block !important;
  padding: 16px 12px !important; 
  text-align: center !important;
  background: #ffffff;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  
  /* 初期状態の厚み設定 */
  border: 1px solid #d1d1d1;
  border-right: solid 5px #b8c4d1; 
  border-bottom: solid 5px #a8b8c8; 
  box-shadow: inset 0 1px 0 #fff;
  
  transition: all 0.1s ease; /* 反応を速くする */
  position: relative;
  top: 0;
  left: 0;
  
  /* スマホ特有のタップ時の青いハイライトを消す（自作の動きを優先するため） */
  -webkit-tap-highlight-color: transparent;
}

/* アイコンとタイトルの横並び */
.service-nav a .icon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

.service-nav .icon svg {
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
}

/* 説明文 */
.service-nav .nav-desc {
  display: block !important;
  font-size: 13px !important;
  color: #666 !important;
  font-weight: normal !important;
  margin-top: 10px !important;
}

/* 【修正：スマホの沈み込み】指が触れた瞬間（active）の動作 */
.service-nav a:active,
.service-nav a:focus {
  background: #fdfaff !important;
  color: #1b4f9c !important;
  /* 厚みを一気に減らす */
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
  /* 減った厚み分だけ移動させて「沈み込み」を完結させる */
  transform: translate(4px, 4px) !important;
  /* 影を消して地面に着いた感じを出す */
  box-shadow: none !important;
}

/* ホバーはPC・タブレット用として残すが、スマホではactiveが優先される */
.service-nav a:hover {
  background: #fdfaff;
  color: #1b4f9c;
}






/* ▼ タイトルとリード文の調整 */
  .features-title {
    font-size: 1.5rem !important; /* スマホで見やすいサイズに */
    margin: 40px 0 15px !important;
    padding: 0 10px;
  }
  
  .features-title::before,
  .features-title::after {
    width: 20px; /* 葉っぱも小さく */
    height: 20px;
    margin: 0 8px;
  }

  .features-lead {
    font-size: 0.95rem !important;
    margin-bottom: 30px !important;
    padding: 0 15px;
    text-align: left; /* スマホでは左寄せが読みやすい */
  }

  /* ▼ 特徴セクション全体の余白 */
  .illustration-style {
    padding: 0 10px !important; /* 左右の余白を最小限に */
    margin-bottom: 40px !important;
  }

  /* ▼ 特徴カード（独立した箱）の調整 */
  .feature-card {
    padding: 20px 15px !important; /* 箱の中の余白を凝縮 */
    gap: 15px !important;          /* アイコンとテキストの間隔 */
    margin-bottom: 20px !important; /* カード同士の間隔 */
    border-radius: 12px !important;
  }

  /* ▼ アイコン（SVG）のサイズ */
  .feature-card svg {
    width: 45px !important;
    height: 45px !important;
  }

  /* ▼ カード内の見出し（h3） */
  .feature-card h3 {
    font-size: 1.05rem !important; /* 14pxより少し大きく、視認性を確保 */
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    white-space: normal !important; /* スマホで入り切らない場合を考慮して改行を許容 */
  }

  /* ▼ カード内の本文（p） */
  .feature-card p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* ▼ 電話誘導ボタンの調整 */
  .mid-call-btn {
    font-size: 18px !important;
    padding: 10px 20px !important;
    width: 100%; /* スマホではボタンを横いっぱいに広げて押しやすく */
    box-sizing: border-box;
  }



/* ▼ スマホ：取扱業務カードをコンパクトに */
.service-card {
  padding:  10px 12px !important;
  margin-bottom: 6px !important;
}

/* ▼ スマホ：service-grid の隙間（gap）を詰める */
.service-grid {
  gap: 6px !important;        /* 全方向の隙間を6pxに */
  row-gap: 6px !important;    /* 念のため明示 */
  column-gap: 6px !important; /* 念のため明示 */
}

/* ▼ スマホ：取扱業務カードのアイコンを確実に小さくする */
.service-card .icon svg {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px !important;
}


/* ▼ タイトル（h3）を小さく */
.service-card h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

/* ▼ 説明文（p）を小さく */
.service-card p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}

/* ▼ カードの影を弱めて軽く */
.service-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ▼ スマホ：アイコンとタイトルの隙間をなくす */
.service-card .icon {
  margin-bottom: 2px !important; /* ほぼゼロに */
}

.service-card h3 {
  margin-top: 0 !important;      /* ブラウザ標準の余白を消す */
}

/* ▼ スマホ：詳しく見るボタンの文字を縮小 */
.service-card .service-btn {
  font-size: 14px !important;   /* PCの16px → スマホ14px */
  padding: 8px 14px !important; /* ボタン自体も少しコンパクトに */
}

/* ▼ スマホ：取扱業務タイトルの下の余白を詰める */
.service-title {
  margin-bottom: 12px !important; /* PCはもっと広い → スマホは詰める */
}

/* ▼ スマホ：カード内のタイトル（h3）の上余白をゼロに */
.service-card h3 {
  margin-top: 0 !important; /* ブラウザ標準の余白を消す */
}


/* ▼ スマホ：相続手続のご案内ブロックをコンパクトに */
.souzoku-info {
  padding: 16px 14px !important;
  margin-bottom: 14px !important;
}

/* ▼ タイトル（h2）をスマホ向けに縮小 */
.souzoku-info h2 {
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

/* ▼ 説明文（p）をスマホ向けに縮小 */
.souzoku-info p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

/* ▼ リスト（ul）の文字も縮小 */
.souzoku-info ul.souzoku-flow-simple li {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 4px !important;
}

/* ▼ ボタンのサイズもスマホ向けに */
.souzoku-info .souzoku-btn {
  font-size: 14px !important;
  padding: 8px 14px !important;
}

/* ▼ トップページＦＡＱスマホ最適化 */
.faq-block {
    margin: 30px 0;
    padding: 18px 14px;
  }

  .faq-block h2 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .faq-list dt {
    padding: 10px 32px 10px 40px;
    font-size: 0.98rem;
  }

  .faq-list dd {
    font-size: 0.9rem;
    padding: 8px 8px 12px 8px;
  }


/* ▼ スマホ：サイドバー全体をさらにコンパクトに */
.sidebar.sidebar-fv {
  padding: 8px 10px !important;   /* ← 12px → 8px に圧縮 */
  margin-bottom: 10px !important; /* ← 16px → 10px */
}

/* ▼ スマホ：代表写真をさらに縮小 */
.sidebar-fv .sidebar-photo {
  width: 100% !important;
  max-width: 160px !important;    /* ← 200px → 160px に縮小 */
  margin: 0 auto 6px !important;  /* ← 10px → 6px */
  display: block;
  border-radius: 6px;
}

/* ▼ サイドバーのタイトル（事務所名） */
.sidebar-fv .sidebar-office-name,
.sidebar-fv .sidebar-title {
  font-size: 15px !important;     /* ← 16px → 15px */
  line-height: 1.3 !important;
  margin-bottom: 4px !important;  /* ← 6px → 4px */
}

/* ▼ サイドバー内の住所などの文章 */
.sidebar-fv .sidebar-office-info {
  font-size: 13px !important;     /* ← 14px → 13px */
  line-height: 1.5 !important;
  margin-bottom: 6px !important;  /* ← 10px → 6px */
}

/* ▼ 新着情報のリスト */
.sidebar-fv .sidebar-news-list li {
  font-size: 12.5px !important;   /* ← 13px → 12.5px */
  line-height: 1.45 !important;   /* ← 1.5 → 1.45 */
  padding: 8px 0 !important;      /* ← 4px → 2px */
}


/* ▼ サイドバー事務所住所　中央揃え */
.sidebar-catch {
    text-align: center;
    margin-bottom: 8px;
  }

  .sidebar-office-info {
    text-align: center;
    line-height: 1.7;
  }





/* ▼ スマホ：紹介ページ*/

.profile-page {
    width: 92%;
    padding: 20px 0; /* 上下余白をさらに最適化 */
}

/* ヒーローセクション：視認性向上 */
.profile-quote {
    font-size: 21px !important; /* PC版に合わせて少しアップ */
    line-height: 1.5 !important;
    text-align: left !important;
    margin-bottom: 15px !important;
    padding-top: 70px !important;
}
.profile-lead {
    font-size: 15px !important; /* 読みやすさ重視 */
    line-height: 1.7 !important;
}

/* プロフィール：縦並び配置 */
.profile-flex {
    flex-direction: column !important;
    gap: 25px !important;
}
.profile-photo-area {
    width: 100% !important;
    text-align: center; /* 写真を中央に */
}
.photo-frame img {
    max-width: 220px !important; 
    box-shadow: 8px 8px 0 #f0f4f9;
}
.profile-name-box {
    margin-top: 15px !important;
    text-align: center !important;
    padding-bottom: 10px !important;
}
.name-jp {
    font-size: 26px !important;
}

/* 略歴タイムライン */
.timeline {
    padding-left: 15px !important;
}
.timeline .year {
    flex: 0 0 70px !important; /* 幅を少し狭めて本文を広く */
    font-size: 14px !important;
}
.timeline .desc {
    font-size: 14.5px !important;
}

/* 実績セクション：カード配置 */
.stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.stat-card {
    padding: 15px !important;
}
.stat-number {
    font-size: 26px !important;
}

/* 専門分野・資格：1カラム化 */
.details-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
}
.styled-list li, .license-details li {
    font-size: 15px !important; /* PC版に合わせ文字を大きく */
    padding: 10px 0 !important;
}

/* 【重要】取扱業務の改行をスマホでも維持 */
.break-sub {
    display: block !important;
    font-size: 13px !important;
    margin-top: 4px;
    line-height: 1.4;
}

/* 大切にしていること（姿勢） */
.personality-section {
    padding: 20px !important;
}
.promise-item h4 {
    font-size: 17px !important;
}
.promise-item p {
    font-size: 15px !important;
    padding-left: 0 !important; /* スマホでは左余白をなくして幅を確保 */
}

/* CTA：スマホ専用設計 */
.cta-section-profile {
    margin-top: 40px !important;
    padding: 30px 15px !important;
}
.cta-tel-link {
    font-size: 22px !important;
    width: 100% !important; /* 押しやすい全幅ボタン */
    padding: 12px 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


/* ▼ スマホ：相続ページのタイトル（h2） */
.souzoku-page .page-title {
  font-size: 22px !important;
  margin-bottom: 14px !important;
  padding-left: 10px !important;
  padding-top: 90px !important;
}

/* ▼ スマホ：セクション見出し（h2 / h3） */
.souzoku-page h2,
.souzoku-page .section-block h2 {
  font-size: 18px !important;
  margin: 18px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}

/* ▼ スマホ：相続ページの各手続タイトル（h3）を縮小 */
.souzoku-page h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 14px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}

/* ▼ スマホ：本文（p） */
.souzoku-page p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：リスト（flow-list・ul） */
.souzoku-page ul li,
.souzoku-page .flow-list li {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
  padding: 12px !important; /* カードの余白を圧縮 */
}

/* ▼ スマホ：数字バッジ（flow-list の数字） */
.souzoku-page .flow-list li span.num {
  font-size: 24px !important; /* PC 32px → スマホ最適 */
}

/* ▼ スマホ：flow-note（補足） */
.souzoku-page .flow-note {
  font-size: 13px !important;
  padding: 10px !important;
  margin-top: 10px !important;
}

/* ▼ スマホ：detail-box（説明カード） */
.souzoku-page .detail-box {
  padding: 14px !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：セクション間の余白を詰める */
.souzoku-page section,
.souzoku-page .section-block {
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
}


/* ▼ スマホ：遺言ページのタイトル（h1） */
.yuigon-page .page-title {
  font-size: 22px !important;
  margin-bottom: 14px !important;
  padding-left: 10px !important;
  padding-top: 90px !important;
}

/* ▼ スマホ：セクション見出し（h2 / h3） */
.yuigon-page h2,
.yuigon-page .section-block h2 {
  font-size: 18px !important;
  margin: 18px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}


/* ▼ スマホ：遺言ページの各手続タイトル（h3）を縮小 */
.yuigon-page h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 14px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}


/* ▼ スマホ：本文（p） */
.yuigon-page p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：リスト（ul・flow-list） */
.yuigon-page ul li,
.yuigon-page .flow-list li {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
  padding: 12px !important;
}

/* ▼ スマホ：数字バッジ（flow-list の数字） */
.yuigon-page .flow-list li span.num {
  font-size: 24px !important;
}

/* ▼ スマホ：flow-note（補足） */
.yuigon-page .flow-note {
  font-size: 13px !important;
  padding: 10px !important;
  margin-top: 10px !important;
}

/* ▼ スマホ：detail-box（説明カード） */
.yuigon-page .detail-box {
  padding: 14px !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：セクション間の余白を詰める */
.yuigon-page section,
.yuigon-page .section-block {
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
}


/* ▼ スマホ：成年後見ページのタイトル（h1） */
.kouken-page .page-title {
  font-size: 22px !important;
  margin-bottom: 14px !important;
  padding-left: 10px !important;
  padding-top: 90px !important;
}

/* ▼ スマホ：セクション見出し（h2 / h3） */
.kouken-page h2,
.kouken-page .section-block h2 {
  font-size: 18px !important;
  margin: 18px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}


/* ▼ スマホ：成年後見ページの各手続タイトル（h3）を縮小 */
.kouken-page h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 14px 0 8px !important;
  padding-left: 10px !important;
  border-left-width: 3px !important;
}


/* ▼ スマホ：本文（p） */
.kouken-page p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：リスト（ul・flow-list） */
.kouken-page ul li,
.kouken-page .flow-list li {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
  padding: 12px !important;
}

/* ▼ スマホ：数字バッジ（flow-list の数字） */
.kouken-page .flow-list li span.num {
  font-size: 24px !important;
}

/* ▼ スマホ：flow-note（補足） */
.kouken-page .flow-note {
  font-size: 13px !important;
  padding: 10px !important;
  margin-top: 10px !important;
}

/* ▼ スマホ：detail-box（説明カード） */
.kouken-page .detail-box {
  padding: 14px !important;
  margin-bottom: 12px !important;
}

/* ▼ スマホ：セクション間の余白を詰める */
.kouken-page section,
.kouken-page .section-block {
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
}




/* ▼ スマホ：事務所案内ページの全体調整 */
.access-page {
  width: 94%; /* 左右の余白を少し詰めて画面を広く使う */
  padding-top: 70px !important;
}

/* ▼ スマホ：事務所案内の info-row */
.access-page .info-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important; /* 6→12 窮屈さを解消 */
  margin-bottom: 12px !important;
  padding: 8px 0 !important; /* 上下に少し余白を入れて読みやすく */
  border-bottom: 1px solid #f0f0f0; /* 軽い区切り線で項目を判別しやすく */
}

/* ▼ 代表者セル（スマホ最適化） */
.owner-cell {
  display: flex !important;           /* ← ★これを追加 */
  flex-direction: column !important; /* 縦並びを確定 */
  align-items: flex-start !important;   /* ★centerからflex-start（左揃え）に変更 */
  gap: 2px !important;
  border-bottom: none !important;    /* 代表者欄だけは区切り線を消す（一体感を出すため） */
  /* --- ここから「中心のズレ」を直すための追加 --- */
  padding: 0 !important;           /* PC用の余白をリセット */
  margin: 0 !important;            /* 外側のズレをリセット */
  width: auto !important;          /* ★100%からautoに変更（これで枠内に収まります） */
  box-sizing: border-box !important; /* 横幅の計算を正しくする */
}

/* 追加：中の「箱」の枠組みを無視して、名前や文章を直接並び替えるための命令 */
.owner-left-content {
  display: contents; 
}



/* ▼ 代表者写真（スマホでは親しみやすく） */
.owner-photo {
  order: 2 !important;       /* ← ★追加：これで名前の下に移動します */
  width: 180px !important; /* 120→140 少し大きくして表情を見せる */
  margin: 0 0 10px 0!important;
  display: block;
}

/* ▼ 代表者テキスト（スマホで見やすく） */
.owner-text {
  order: 3 !important;
  width: 100% !important;
  text-align: left !important; /* ★左揃えを確定 */
  padding: 0 !important;      /* ★余計な余白をカット */
  margin: 0 !important;
  box-sizing: border-box !important; /* ★パディングが幅を壊さないようにする */
}

.owner-name-row {
  order: 1 !important;       /* ← ★追加：これで一番上に固定されます */
  text-align: center; /* 名前だけは写真に合わせて中央に */
  margin-bottom:0 !important; /* ★10pxから0に変更 */
}

.owner-name {
  font-size: 18px !important;
}

/* 資格情報のスマホ調整 */
.license-info {
  font-size: 12px !important;
  text-align: left; /* 中央に寄せて情報のまとまりを作る */
  background: #f9f9f9; /* 軽く背景色をつけて「公的な情報」であることを示す */
  padding: 8px;
  border-radius: 4px;
}

/* メッセージとボタン */
.owner-message {
  font-size: 13px !important;
  margin-top: 10px;
}

/* ▼ プロフィールボタンの枠：左端の開始位置を揃える */
.profile-link-wrap {
  order: 4 !important;      /* 文章の下に配置 */
  text-align: left !important; /* ★ここをleftにして写真・名前と列を揃える */
  margin-top: 15px;
  width: 100%;
}

.btn-mini {
  display: inline-block !important; /* インラインブロックを維持 */
  width: 100% !important;           /* スマホでは押しやすく横いっぱいに */
  max-width: 280px;                 /* 広がりすぎないよう制限 */
  padding: 12px 0 !important;       /* ★左右の余白を0にして、上下だけ指定 */
  text-align: center !important;    /* ★これで箱の中の中央に文字が来ます */
  box-sizing: border-box !important; /* 幅の計算を正確にする */
}

/* ▼ ラベル幅の調整（「電話番号」などの4文字も入りやすく） */
.access-page .info-label {
  width: 70px !important; /* 80→70 にして値側の幅を確保 */
  font-size: 13px !important;
  color: #1b4f9c;
}

.access-page .info-value {
  font-size: 14px !important;
  flex: 1; /* 残りの幅をすべて使う */
}








/* ▼ スマホ：上に戻るボタンを電話バーの上に配置 */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 80px !important; /* ← 電話バーより上にずらす */
  z-index: 4000 !important; /* ← 電話バーより前面に出す */
}


/* ▼ 横スクロール完全禁止（最重要） */
body {
  overflow-x: hidden !important;
}

html {
  overflow-x: hidden !important;
}

.content-wrap {
  overflow-x: hidden !important;
}


/* ▼ スマホ：固定電話バーに隠れないように下余白を確保 */
body {
  padding-bottom: 110px !important;
}


/* ▼ スマホ：特徴欄のアイコンと文章の横スペースを狭める */
.feature-card {
  gap: 6px !important;   /* ← 20px → 10px に圧縮 */
  padding-left: 4px !important;  /* ← 左の余白をギュッと詰める */
  align-items: center !important; /* ← アイコンと文字の縦位置も揃う */
}


/* ▼ スマホ：サービスカードの本文幅を固定して改行を安定 */

  .service-card p {
    max-width: 320px;
    margin: 0 auto;
  }


/* ▼ スマホ：相続手続案内の本文幅を固定して改行を安定 */

  .souzoku-info p {
    max-width: 320px;
    margin: 0 auto;
  }

  .nav-desc {
    display: block !important;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-top: 6px;
    text-align: center;
  }


/* =========================================
   住所変更ページ（スマホ）
========================================= */

/* ▼ タイトル */
.address-change-page .page-title {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* ▼ 見出し */
.address-change-page h3 {
  font-size: 1.2rem;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* ▼ 本文 */
.address-change-page p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ▼ リスト */
.address-change-page .career-list li {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* ▼ レイアウト微調整 */
.address-change-page .career-flex {
  padding: 0 4px;
}

/* =========================================
   FAQ（住所変更ページ含む）
========================================= */

/* ▼ FAQ 全体 */
.faq-item {
  margin-bottom: 24px;
}

/* ▼ FAQ 見出し調整 */
.address-change-page h3.faq-title {
  margin-top: 24px;
}

/* ▼ 質問（Q） */
.faq-item h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: #333;
  font-weight: 600;
}

/* ▼ 回答（A） */
.faq-item p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  color: #444;
}

/* =========================================
   ボタン
========================================= */

.contact-btn {
  text-align: center;
  margin: 40px 0 20px;
}

/* =========================================
   ▼ ファーストビュー文字（スマホ最適化）
========================================= */

.fv-test {
  top: 30%;
  right: 5%;
  transform: translateY(-50%);

  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}


}