/* =========================================
   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;
}



/* =========================================
   5. 特徴：見出しと導入文のみを「横幅全部の背景色」で目立たせる
========================================= */

/* タイトル部分 */
.features-title {
  /* ▼ 背景色を敷き、横幅を画面いっぱいにぶち抜きます */
  background-color: #fefcf9; 
  width: 100%;
  box-sizing: border-box;
  
  font-size: 2.6rem; 
  font-weight: 800;
  color: #1b4f9c; 
  text-align: center;
  
  /* 外側の余白はゼロにリセットし、背景色の内側に十分な空間を作ります */
  margin: 0;
  padding-top: 80px;         /* 上のお知らせ欄との心地よいスペース */
  padding-bottom: 20px;
  
  letter-spacing: 0.05em;
  line-height: 1.4;
  display: block;
}

/* 文字の下のマーカー（知的な水色） */
.features-title span {
  background: linear-gradient(transparent 80%, #d1e8ff 80%);
  padding: 0 10px;
}

/* タイトル下のリード文 */
.features-lead {
  /* ▼ タイトルと同じ背景色を敷き、1つの大きな帯として完全に繋げます */
  background-color: #fefcf9; 
  width: 100%;
  box-sizing: border-box;
  
  text-align: center !important;
  font-size: 1.25rem; 
  color: #222; 
  line-height: 2.2; 
  font-weight: 500;
  
  /* ▼ 下側の外線（カードエリア）との間に60pxの隙間をあけて独立させます */
  margin: 0 auto 60px;       
  
  /* 背景の帯は100%広げますが、中の文章自体は読みやすい幅に中央寄せします */
  padding-top: 0;
  padding-bottom: 80px;      /* 背景色の帯の下側の心地よいスペース */
  padding-left: 20px;
  padding-right: 20px;
}




/* ▼ 特徴セクション全体のコンテナ（大きな枠線は解除） */
.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 {
  /* ▼ 1. 背景色をお知らせ欄と同じ淡いブルーにし、横幅を100%（画面全部）にぶち抜きます */
  background-color: #f8faff; 
  width: 100%;
  box-sizing: border-box;
  
  /* ▼ 2. 左右に浮かせる箱ではないため、外側の左右余白（auto）や丸み、max-widthはすべて撤廃します */
  margin: 40px 0 10px;       /* 上下の外側余白のみ維持 */
  border-radius: 0;          /* 角の丸みは無し（画面端まで真っ直ぐ伸ばす） */
  
  /* 背景の帯の内側に、たっぷりとした心地よい空間を作ります */
  padding: 40px 20px;
  text-align: center;
}

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

/* ボタン自体のデザイン（枠線タイプ）は、先生の今の綺麗なコードをそのまま100%維持しています */
.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;
  background-color: #ffffff; /* 淡いブルーの帯の上で映えるようにボタン内側は白 */
  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: 12px;
  font-weight: normal;
}




/* ▼ ファーストビュー写真 */
.fv-wrap {
  width: 100%;
  max-width: 1150px; /* 900pxから1200pxに広げて、写真をダイナミックに大きく */
  margin: 0 auto;
}

.fv-photo {
  position: relative;
  width: 100%;
}

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

/* テキストの配置と幅の調整 */
.fv-test {
  position: absolute;
  top: 50%;
  left: 4%;          /* 左端の余白を少し詰めて、文字の開始位置を広く確保 */
  transform: translateY(-50%);
  text-align: left;
  width: 92%;        /* 全体の横幅を広く使えるように変更 */
  font-family: "Noto Serif JP", "ヒラギノ明朝 ProN", serif;
}

/* 1行目の大見出し（全体を内包するブロック） */
.fv-test strong.fv-main-title {
  display: block;
  color: #1a365d;
  line-height: 1.4;
  margin-bottom: 24px; /* サブテキストとの間にしっかりとした余白（呼吸）を作る */
  letter-spacing: 0.03em;
}

/* --- 抑揚・強弱の調整 --- */

/* 「分かりやすさを第一に。」（キャッチフレーズ）の抑揚 */
.fv-test .fv-catch {
  display: block;
  font-size: 20px;       /* 主たるキーワードより一回り小さくしてジャンプ率をあげる */
  font-weight: 500;      /* 少し細めにして上品な印象に */
  color: #2b6cb0;        /* やや明るめの青で視線を引くアクセントに */
  margin-bottom: 8px;    /* 下のメインキーワードとの間隔 */
}

/* 「磐田市の相続手続…」（メインキーワード）の抑揚 */
.fv-test strong.fv-main-title {
  font-size: 34px;       /* 30pxから34pxに拡大し、最も目立たせたい文字を強調 */
  font-weight: 700;      /* しっかりとした太文字 */
}

/* 「磐田市『の』」などの助詞（つなぎ文字）の抑揚 */
.fv-test .fv-particle {
  font-size: 24px;       /* 助詞を20〜30%小さくすることで、漢字の輪郭が際立つプロの技法 */
  font-weight: 500;
}

/* 2〜3行目の説明文 */
.fv-sub-text {
  display: block;
  font-size: 16.5px;     /* 大見出しとの対比（ジャンプ率）を意識して僅かに微調整 */
  color: #4a5568;
  font-weight: 500;
  line-height: 1.85;     /* 行間をわずかに広げ、文字が詰まって見えないように */
  letter-spacing: 0.05em;
}




/* =========================================
   メイン領域用：お知らせ（A案・安心余白ブラッシュアップ版）
========================================= */

.news-section {
  background: #f8faff;
  border: none;
  
  /* ▼ 上下の余白を「50px」に大幅拡張。これで上下のコンテンツとの間に「呼吸ができるスペース」が生まれ、ごちゃつきが解消されます */
  padding: 50px 0;          
  margin-top: 60px;         /* 業務ナビとの隙間もさらに広く変更 */
  margin-bottom: 40px;
  width: 100%;
  box-sizing: border-box;
}

.news-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #2a6ebb;
  margin-bottom: 30px;      /* タイトルの下にもゆったりした余白を確保 */
  text-align: center;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 90%;               
  max-width: 960px;         
}

.news-list li {
  font-size: 0.9rem;
  /* 各行の上下余白を12pxに広げ、文字同士が密集して目が疲れるのを防ぎます */
  padding: 12px 6px;         
  border-bottom: 1px solid #e0e6f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.news-list li:last-child {
  border-bottom: none;
}

.news-list .date {
  font-weight: bold;
  color: #2a6ebb;
  margin-right: 20px;       /* 日付と本文の間隔を少し広げて見やすく */
  flex-shrink: 0;
}

.news-list .right {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
}

.news-list .text {
  color: #333333;
}

.news-list .links {
  margin-left: 20px;        /* リンクが本文にベタッとくっつかないよう少し離す */
  white-space: nowrap;
}

/* =========================================
   アコーディオン（開閉ボタン）のデザイン
========================================= */
.news-accordion {
  width: 100%;
}

/* ボタンの外観 */
.accordion-trigger {
  list-style: none;         /* 標準の三角矢印を消す */
  cursor: pointer;
  text-align: center;
  padding: 15px 0;
  background: #ffffff;      /* 青い座布団の上で引き立つクリーンな白ボタン */
  border: 1px solid #d0d8e8;
  border-radius: 6px;
  margin: 15px 0;
  font-size: 0.85rem;
  font-weight: bold;
  color: #2a6ebb;
  transition: opacity 0.3s ease; 
  outline: none !important;
}

.accordion-trigger:focus,
.accordion-trigger:active {
  outline: none !important;
  box-shadow: none !important;   
}

.accordion-trigger::-webkit-details-marker {
  display: none;            /* Safari用の矢印消し */
}

/* ボタンにマウスを乗せたとき */
.accordion-trigger:hover {
  outline: none !important;
  opacity: 0.7 !important;
}

/* 開いている時は、リスト行と同じ上下線を引いて中身を馴染ませる */
.accordion-content {
  border-top: 1px solid #e0e6f0;
  margin-bottom: 10px;
}


/* ▼ NEWバッジ（PC・スマホ共通・統一版） */
.badge-new,
.badge-new-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e63946;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 2px 6px !important;
  border-radius: 6px;
  margin-left: 6px;
  line-height: 1 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.badge-new,
.badge-new-info {
  animation: pop 1.2s ease infinite;
}

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




/* =========================================
   5. お悩み（吹き出し・一体感再現レイアウト：輪郭・ドット統一版）
========================================= */

/* ▼ 全体の背景と上下の余白 */
.problem-section {
  background-color: #fefcf9; 
  padding: 60px 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ▼ 画面幅に余裕を持たせるためのコンテナ */
.problem-container {
  max-width: 1050px;  
  width: 90%;         
  margin: 0 auto;     
}

/* ▼ タイトル部分 */
.problem-title {
  text-align: center;
  font-size: 1.8rem;
  color: #4a3b32;     
  margin-bottom: 50px;
  font-weight: bold;
  border: none !important; 
  padding: 0 !important;
}
.problem-title span {
  color: #798f66; 
}
.problem-title small {
  display: block;
  font-size: 0.9rem;
  color: #bfa482;
  letter-spacing: 0.1em;
  margin-top: 5px;
  font-weight: normal;
}

/* ▼ 吹き出しとイラストを横並びにする土台（PC用） */
.problem-wrapper {
  display: flex;
  align-items: center;         
  justify-content: space-between;
  gap: 10px;                   /* イラストと吹き出しの距離を縮めて一体感を出す */
}

/* ▼ 左右の吹き出しを縦に並べるエリア */
.problem-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 35px;                   /* 吹き出し同士の上下の隙間 */
}

/* ▼ 中央のイラストエリア */
.problem-center {
  flex: 0 0 350px;             /* イラストの横幅 */
  text-align: center;
  position: relative;
}
.problem-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ▼ 吹き出しカード本体のデザイン（PC用：中身は白・枠と影をモカベージュに） */
.problem-wrapper-pc .balloon-card {
  background: #ffffff !important; /* 【ご提案】中身はスッキリとした真っ白を維持 */
  color: #4a4a4a !important;      /* 文字の読みやすさもバッチリ維持 */
  border-radius: 30px;         
  padding: 22px 25px;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
  position: relative;          
  
  /* 【重要】はっきりと1本細い「モカベージュの枠線」を敷きます */
  border: 1px solid #e2dad2 !important;
  
  /* 【重要】影の色も、黒ではなくモカベージュをぼやっと広げて立体感を出します */
  box-shadow: 0 6px 16px rgba(226, 218, 210, 0.6) !important;
}

/* ▼ 下部の誘導ボタンエリア（統一・落ち着いたデザイン版） */
.problem-btn-wrap {
  text-align: center;
  margin-top: 45px;
}

.problem-btn {
  display: inline-block;
  background: #1b4f9c !important; 
  color: #ffffff !important;      
  padding: 14px 40px !important;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none !important;
  border-radius: 30px !important;
  letter-spacing: 0.05em !important;
  transition: opacity 0.3s ease !important;
  box-shadow: 0 3px 10px rgba(27, 79, 156, 0.15) !important;
}

.problem-btn:hover {
  text-decoration: none !important;
  transform: none !important;
  background: #1b4f9c !important; 
  opacity: 0.7 !important;            
}

/* --- パソコン表示の時の下準備 --- */
.problem-wrapper-pc {
    display: flex;
    align-items: center;         
    justify-content: space-between;
    gap: 10px;
}
.problem-wrapper-sp {
    display: none; 
}


/* =========================================
   お悩み：女性의顔へカーブして集まる3連ポワポワ丸（枠・ドット調和版）
========================================= */

/* 1. PC表示のときだけ、PC用の箱の中にあるカードに丸を出す */
@media screen and (min-width: 769px) {

  .problem-wrapper-pc .balloon-card {
    position: relative !important;
    overflow: visible !important;
  }

  /* 3枚の丸の共通設定：カードの枠と同じモカベージュでハッキリ見せる */
  .problem-wrapper-pc .balloon-card::before,
  .problem-wrapper-pc .balloon-card::after {
    content: "" !important;
    position: absolute !important;
    background: #e2dad2 !important; /* カードの輪郭と完全同期したモカベージュ */
    border-radius: 50% !important;
    z-index: 99 !important;         
    
    /* 丸の影も、カードのぼやっとした影とトーンを合わせます */
    filter: drop-shadow(0 3px 4px rgba(226, 218, 210, 0.8)) !important;
  }

  /* -----------------------------------------
     【左側エリアの2つのカード】➔ 右斜め下の顔へ（上下真ん中出発）
  ----------------------------------------- */

  /* ◆ 左・上：【右の真ん中】から、右下（顔）へ落とす */
  .problem-wrapper-pc .problem-side:first-child .balloon-card:nth-child(1)::before {
    width: 24px !important; height: 24px !important;
    right: -25px !important; top: 50% !important; margin-top: -5px !important;
  }
  .problem-wrapper-pc .problem-side:first-child .balloon-card:nth-child(1)::after {
    width: 15px !important; height: 15px !important;
    right: -52px !important; top: 50% !important; margin-top: 15px !important;
    
    /* 【小：3個目の丸】色を #e2dad2 に完全統一 */
    box-shadow: 22px 20px 0 0 #e2dad2 !important;
  }

  /* ◆ 左・下：【右の真ん中】から、右上（顔）へ上げる */
  .problem-wrapper-pc .problem-side:first-child .balloon-card:nth-child(2)::before {
    width: 24px !important; height: 24px !important;
    right: -25px !important; top: 50% !important; margin-top: 5px !important;
  }
  .problem-wrapper-pc .problem-side:first-child .balloon-card:nth-child(2)::after {
    width: 15px !important; height: 15px !important;
    right: -52px !important; top: 50% !important; margin-top: -25px !important;
    
    /* 【小：3個目の丸】色を #e2dad2 に完全統一 */
    box-shadow: 22px -20px 0 0 #e2dad2 !important;
  }

  /* -----------------------------------------
     【右側エリアの2つのカード】➔ 左斜め下の顔へ（上下真ん中出発）
  ----------------------------------------- */

  /* ◆ 右・上：【左の真ん中】から、左下（顔）へ落とす */
  .problem-wrapper-pc .problem-side:last-of-type .balloon-card:nth-child(1)::before {
    width: 24px !important; height: 24px !important;
    left: -25px !important; top: 50% !important; margin-top: -5px !important;
  }
  .problem-wrapper-pc .problem-side:last-of-type .balloon-card:nth-child(1)::after {
    width: 15px !important; height: 15px !important;
    left: -52px !important; top: 50% !important; margin-top: 15px !important;
    
    /* 【小：3個目の丸】色を #e2dad2 に完全統一 */
    box-shadow: -22px 20px 0 0 #e2dad2 !important;
  }

  /* ◆ 右・下：【左の真ん中】から、左上（顔）へ上げる */
  .problem-wrapper-pc .problem-side:last-of-type .balloon-card:nth-child(2)::before {
    width: 24px !important; height: 24px !important;
    left: -25px !important; top: 50% !important; margin-top: 5px !important;
  }
  .problem-wrapper-pc .problem-side:last-of-type .balloon-card:nth-child(2)::after {
    width: 15px !important; height: 15px !important;
    left: -52px !important; top: 50% !important; margin-top: -25px !important;
    
    /* 【小：3個目の丸】色を #e2dad2 に完全統一 */
    box-shadow: -22px -20px 0 0 #e2dad2 !important;
  }

}


/* =========================================
   お悩み：文字の抑揚 ＆ リンクボタン化の調整
========================================= */

/* ▼ 1. カード自体がリンク（aタグ）になったことによる標準スタイルのリセット */
.balloon-card, .sp-balloon-card {
  display: block !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

/* ▼ 2. 文字の抑揚設定（PC・スマホ共通） */
.balloon-card strong, .sp-balloon-card strong {
  font-size: 15.5px !important;    /* キーワードを少し大きく */
  color: #4a3b32 !important;       /* タイトルと同系の品ある焦げ茶 */
  font-weight: bold !important;
  display: inline-block;
  margin-bottom: 2px;
}

.balloon-card .small-text, .sp-balloon-card .small-text {
  font-size: 13px !important;      /* 語尾や補足を小さく */
  color: #666666 !important;       /* 柔らかなグレーに落として引き算 */
  font-weight: normal !important;
}

.balloon-card .highlight-green, .sp-balloon-card .highlight-green {
  font-size: 15.5px !important;    /* 特に重要な手続き名 */
  color: #798f66 !important;       /* サイトのアクセントカラー（緑）と完全同期 */
  font-weight: bold !important;
}

/* ▼ 3. リンクとして「押せる」ことを伝える上品な動き（マウスを乗せたとき） */
@media screen and (min-width: 769px) {
  .balloon-card:hover {
    /* モカベージュの影を少しだけ濃くし、フワッと3px上に浮き上がらせる */
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(226, 218, 210, 0.8) !important;
    background: #fffdfb !important; /* ごくわずかに色変化 */
  }
}

/* ▼ 4. 各カードの右下に「＞」マークをうっすら配置して誘導する設定 */
.balloon-card, .sp-balloon-card {
  padding-bottom: 28px !important; /* 矢印を置くスペースを確保 */
  position: relative !important;   /* これを追加：絶対配置の基準にする */
}

/* クラスをカンマでつなぐことで、両方に一括適用 */
.balloon-card .arrow-icon, 
.sp-balloon-card .arrow-icon {
  display: block !important;       /* 両方で表示 */
  position: absolute;
  right: 20px;
  bottom: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #bfa482;    /* 矢印の色も上品なゴールドベージュ系 */
  border-right: 2px solid #bfa482;
  transform: rotate(45deg);        /* 枠線を傾けて「＞」の形にする */
  opacity: 0.7;
  transition: transform 0.3s ease !important;
}

/* マウスホバー時に矢印が少し右にスライドする遊び心 */
.balloon-card:hover .arrow-icon {
  transform: translate(3px, 0) rotate(45deg) !important;
  opacity: 1;
}







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

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

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

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

.service-nav li {
  flex: 1;
  min-width: 160px;
  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;
  /* ▼ 横幅に余裕を持たせるための追加コード */
  max-width: 1300px;    /* 画面がどれだけ広がっても1000pxで止める（数値はお好みで） */
  width: 90%;          /* スマホなどの画面が小さい時は、画面幅の90%にして左右に5%ずつ余白を作る */
  margin-left: auto;   /* 左右オートマージンで中央寄せ */
  margin-right: auto;  /* 左右オートマージンで中央寄せ */
}

.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: 300px;
  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: 11px 22px !important;    /* 左右の余白を少し広げて、ボタンらしい座りを良くします */
  background: #1b4f9c !important;   /* 【統一】テーマカラーの濃紺（現状維持） */
  color: #fff !important; 
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
  border: none; 

  /* ▼ ここを統一・修正 ▼ */
  border-radius: 6px !important;    /* カードの四角い形（8px）に合わせて、ここは上品な「6px」のまま維持 */
  letter-spacing: 0.05em !important; /* 【統一】文字の詰まり感をなくし、品格を出します */
  transition: opacity 0.3s ease !important; /* 【統一】フワッとした動きの時間を0.3秒に統一 */
}

/* 【統一】ホバー時の挙動を完全にシンクロさせる */
.service-btn:hover,
.sub-link-btn:hover {
  text-decoration: none !important;
  background: #1b4f9c !important;   /* 色は変えない */
  
  /* ▼ ここを書き換え ▼ */
  opacity: 0.7 !important;          /* 【統一ルール】フワッと70%の白っぽさに変更 */
}





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



/* =========================================
   6. トップページＦＡＱ（白背景・横幅いっぱいデザイン）
========================================= */

/* FAQブロック全体（白背景、影、薄い枠線を維持したまま横幅いっぱいに広げる） */
.faq-block {
  width: 100%;
  margin: 60px 0;
  padding: 60px 0;
  background-color: #ffffff; /* さっきの綺麗な白背景をそのまま使用 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* 優しい影もそのまま */
  border-top: 1px solid rgba(0, 0, 0, 0.02);    /* 上下の境界線として活かす */
  border-bottom: 1px solid rgba(0, 0, 0, 0.02); /* 上下の境界線として活かす */
  border-left: none !important;  /* 横幅いっぱいのため左右の枠線は不要 */
  border-right: none !important; /* 横幅いっぱいのため左右の枠線は不要 */
  border-radius: 0 !important;   /* 横に広げるため角丸はなし */
}

/* 中央配置を保つためのインナークラス（文字コンテンツを最大900pxの幅に収める） */
.faq-block .faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 見出し */
.faq-block h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e3a61; /* メインの濃紺 */
  margin-bottom: 40px;
  border: none !important;
  padding: 0 !important;
  position: relative;
}

/* タイトルの下にアクセントの短い下線（緑） */
.faq-block h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background-color: #798f66; /* サイトのアクセントグリーン */
  margin: 12px auto 0;
  border-radius: 2px;
}

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

/* 質問部分（dt） */
.faq-list dt {
  margin: 0 auto;       /* ★変更：左右の余白を自動にして中央に寄せる */
  max-width: 700px;     /* ★追加：お知らせの960pxのように、FAQが見やすい最大幅を決める（数値はお好みで） */
  width: 100%;          /* ★追加：スマホ等では横幅いっぱいに広げる */
  
  padding: 16px 45px; 
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e3a61; 
  cursor: pointer;
  position: relative;
  border-top: 1px dashed #e2e8f0; 
  background-color: #ffffff;
  line-height: 1.5;
  transition: color 0.2s ease;
  text-align: left;     /* ★文字は左揃えのままキープ */
}

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

/* Qアイコン（左固定） */
.faq-list dt::before {
  content: "Q";
  display: inline-block; /* ★追加 */
  margin-right: 8px;    /* ★テキストとの間の余白を追加 */
  font-weight: 800;
  color: #798f66;    /* アクセントグリーン */
  font-size: 1.3rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* プラス／マイナスアイコン風（右側） */
.faq-list dt::after {
  content: "＋";
  display: inline-block;  /* ★追加：文字として並べる */
  margin-left: 10px;      /* ★追加：質問文との間の隙間（お好みで調整） */
  font-weight: 700;
  color: #bfa482;    /* ベージュ系 */
  font-size: 1.1rem;
}

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

/* 回答部分（dd） */
.faq-list dd {
  margin: 0 auto;       /* ★変更：dtと揃えて中央に寄せる */
  max-width: 700px;     /* ★追加：dtと同じ最大幅にする */
  width: 100%;          /* ★追加 */
  
  padding: 15px 45px 25px 45px; 
  line-height: 1.8;
  display: none; 
  background-color: #ffffff;
  color: #4a4a4a;
  font-size: 15px;
  text-align: left;     /* ★文字は左揃えのままキープ */
}


/* =========================================
   7. トップページmap アクセス
========================================= */

.access-section {
    background-color: #f8f9fa;
    padding: 60px 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.access-container {
    max-width: 1000px; /* 少し絞ることで端正に見せる */
    margin: 0 auto;
    display: flex;
    gap: 40px; 
    align-items: center; 
}

/* --- 地図の調整 --- */
.access-map {
    flex: 1;
    min-width: 320px; /* PCでは左側を広く確保 */
}
.access-map iframe {
    display: block;
    width: 100%;
    border-radius: 8px; /* 少し丸みを強めて現代的に */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影を少し強めて立体的に */
}

/* --- 右側：情報エリア --- */
.access-info {
    flex: 0.8; /* 地図より少し小さくしてバランスをとる */
    color: #333333;
}

.office-catch {
    font-size: 0.9rem;
    color: #7a6f5a; /* 神谷先生のサイトカラーに合わせる */
    margin: 0 0 5px 0;
}

.office-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: #1b4f9c; /* 見出しを事務所カラーへ */
    border-bottom: 2px solid #1b4f9c; /* 下線を少し強調 */
    padding-bottom: 10px;
}

.office-address {
    line-height: 1.8;
    margin-bottom: 20px;
}

.access-details {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}
.access-details li {
    margin-bottom: 10px;
    line-height: 1.6;
}





/* =========================================
   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;
}



/* --- ヘッダーの事務所名まわりの調整 --- */

/* 1. 元のデザイン（並び方）は1ミリも変えない指定 */
.site-title-text {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
}

/* 2. 通常時：他の場所に影響を与えず、この文字の下線だけをピンポイントで消す */
.site-title-text a.office-name {
  text-decoration: none !important; /* 変な下線を完全に消去 */
  border-bottom: none !important;  /* 万が一、下線が「枠線」で引かれていた場合もこれで消去 */
  color: #1a365d !important;       /* 事務所名の色（濃紺） */
  transition: opacity 0.3s ease;   /* 白っぽくなるときに、ふわっと滑らかに変化させる */
}

/* 3. カーソルを合わせた時（ホバー時）：少し白っぽくする設定 */
.site-title-text a.office-name:hover {
  text-decoration: none !important; /* ホバー時も絶対に下線は出さない */
  border-bottom: none !important;
  opacity: 0.7 !important;          /* 不透明度を70%に落とす */
}





.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: 5px 0 !important;
  border-bottom: 2px solid #2a5db0 !important;
}



  /* ▼ ヘッダー（スマホ縮小） */
  .header-inner {
  display: flex !important;
  flex-direction: row !important;      /* 確実に横並びにする命令 */
  flex-wrap: nowrap !important;        /* 【最重要】何があっても絶対に改行せず、横一列に強制的に並ばせる */
  align-items: center !important;      /* 縦方向の上下中央揃え */
  justify-content: space-between !important; /* 左・中・右に綺麗に配置 */
  padding: 0 8px;                      /* 左右の余白を少しだけ削って横幅を稼ぐ */
  }
  
  

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

  .site-title a.office-name {
    font-size: 18px !important;
    line-height: 1.4 !important;  /* 行の高さ（箱）を広げて、潰れていた上下の空間を正しく確保する */
    margin-top: 4px !important;   /* 【重要】文字全体を下に押し下げ、上のサブタイトルとの隙間をあける */
    display: inline-block !important; /* margin-topを確実に効かせるための指定 */
  }

  .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; /* スマホで見やすいサイズ */
  padding: 0 10px;
  
  /* 外側の余白をゼロにして、背景色を繋げます */
  margin: 0 !important;
  /* 背景色の内側（上側）に50pxの豊かなスペースを確保 */
  padding-top: 50px !important;    
  padding-bottom: 15px !important; 
}

/* ★ 葉っぱ（::before, ::after）の記述は完全に削除しました */

.features-lead {
  font-size: 0.95rem !important;
  padding: 0 20px;
  text-align: left; /* スマホでは左寄せが読みやすい */
  
  /* タイトルからの背景色を途切れさせない設定 */
  margin-top: 0 !important;         
  /* 下のカードエリアとの間に40pxの隙間をあけて独立 */
  margin-bottom: 40px !important;   
  
  padding-top: 0 !important;
  /* 背景色の内側（下側）にも50pxの豊かなスペースを確保 */
  padding-bottom: 50px !important;  
}





  /* ▼ 特徴セクション全体の余白 */
  .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, 
.service-card .sub-link-btn {
  font-size: 13px !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 0; /* 左右の余白を0にして、100%幅を活かす */
  box-sizing: border-box; /* 内側の余白を計算に含める設定 */
}

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

.faq-list dt {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box; /* ★必須：paddingを100%の中に収める */

  /* 左右の余白（padding）を見直し、文字がはみ出さない適切な広さに */
  padding: 12px 35px 12px 35px; 
  font-size: 0.95rem;
  text-align: left;
  
  /* ▼ 文字が長すぎて単語の途中で途切れたり折り返さないバグを防ぐ */
  word-break: break-all;
  overflow-wrap: break-word;
}

.faq-list dd {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box; /* ★必須：paddingを100%の中に収める */

  /* dtの文字の開始位置と揃うように、左余白を35pxに調整 */
  padding: 10px 35px 16px 35px; 
  font-size: 0.88rem;
  text-align: left;
  
  /* ▼ 文字が長すぎて単語の途中で途切れたり折り返さないバグを防ぐ */
  word-break: break-all;
  overflow-wrap: break-word;
}




/* ▼ スマホ：サイドバー全体をさらにコンパクトに */
.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-wrap {
  margin-top: 85px !important; 
}

.fv-photo {
  position: relative !important;
}

.fv-test {
  position: absolute !important; 
  top: 50% !important;
  left: 5% !important;           
  transform: translateY(-50%) !important;
  right: auto !important;
  width: 55% !important;         /* 先生のお顔に被らないよう幅を制限 */
  max-width: 55% !important;
  text-align: left !important;
  padding: 0 !important;
  font-family: "Noto Serif JP", "ヒラギノ明朝 ProN", serif !important;
}

/* 1行目の大見出し全体（スマホ用） */
.fv-test strong.fv-main-title {
  display: block !important;
  color: #1a365d !important;     
  margin-bottom: 10px !important; 
  white-space: normal !important; 
}

/* 【スマホ用】キャッチフレーズ */
.fv-test .fv-catch {
  display: block !important;
  font-size: 9.5px !important;   /* スマホの55%幅に収まるよう小さく */
  font-weight: 500 !important;    
  color: #2b6cb0 !important;     
  line-height: 1.3 !important;
  margin-bottom: 5px !important;  
}

/* 【スマホ用】メインキーワード（磐田市〜） */
.fv-test strong.fv-main-title {
  font-size: 15.5px !important;   /* スマホ画面でパッと目立つ大きさに */
  font-weight: 700 !important;   
  line-height: 1.35 !important;
}

/* 【スマホ用】助詞（「の」） */
.fv-test .fv-particle {
  font-size: 12px !important;    
  font-weight: 500 !important;
}

/* 2〜3行目の説明文（スマホ用） */
.fv-sub-text {
  display: block !important;
  font-size: 10px !important;    
  color: #4a5568 !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;  
  letter-spacing: 0.02em !important;
}




/* =========================================
   おなやみありませんか
========================================= */

/* 1. PC用ブロック（イラストと左右の塊）を丸ごと非表示にする */
    .problem-wrapper-pc {
        display: none !important;
    }
    
    /* 2. スマホ用ブロック（4つの縦並びリスト）をここで表示させる */
    .problem-wrapper-sp {
        display: flex !important;
        flex-direction: column; /* 上から下への一本道にする */
        gap: 15px;              /* お悩み同士の上下の隙間 */
        padding: 0 10px;
    }
    
    /* 3. スマホ専用お悩みカードの装飾（文字を15pxで大きく見せる） */
    .sp-balloon-card {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 15px; /* スマホで誰もが読みやすい大きさに固定 */
        line-height: 1.5;
        color: #4a4a4a;
        text-align: left; /* 左寄りに変更して視線の流れをスムーズに */
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* スマホ用に全体の余白を調整 */
    .problem-section {
        padding: 40px 0;
    }
    .problem-title {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    
    /* ボタンの調整 */
    .problem-btn-wrap {
        margin-top: 30px;
        text-align: center !important;
    }
    .problem-btn {
        display: inline-block !important;
        width: 90% !important; 
        max-width: 320px !important; 
        margin: 0 auto !important; 
        padding: 14px 20px;
        font-size: 13px;
        box-sizing: border-box;
    }




.access-section {
        padding: 40px 15px;
    }
    .access-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px; /* 上下の隙間を少し詰めました */
    }
    .access-map, .access-info {
        width: 100%; /* スマホでは横幅いっぱいに */
    }
    
    /* ▼【ここを追加！】スマホでのマップの高さを制限する */
    .access-map iframe {
        height: 220px !important; /* 縦幅を220pxに縮めてスマートに（お好みで200px〜240px程度に調整してください） */
    }

    .office-name {
        font-size: 1.4rem;
    }
    .access-btn {
        display: block; /* スマホではボタンを横いっぱいに広げて押しやすく */
        text-align: center;
    }




/* 最後の締めくくりのカッコ（スマホスタイル全体の閉じタグ） */
}