@charset "utf-8";
/* ==========================================================================
   rikon-mie.com 共通レイアウトCSS
   旧テーブルレイアウト（<table>による2カラム構成）をCSS Gridに置き換えたもの。
   見た目・配色は現行サイトを踏襲し、構造のみ整理しています。
   ========================================================================== */

body {
  background-color: #fbaed9;
  margin: 0;
}

/* ---- 軽量リセット ----
   pタグのブラウザ既定余白（多くの環境で上下1em）に暗黙で依存しないよう、
   ここで明示的に0へリセットする。余白が必要な箇所は、各クラス側
   （.back-to-top等）または汎用の .p-gap で明示的に指定する。
   リセット前に計測した実測値はすべて1em（16px）で統一されていたため、
   .p-gap も含め、この節で追加した余白指定は見た目を変えていない。 */
p {
  margin: 0;
}
.p-gap {
  margin: 1em 0;
}

a {
  color: #004d00;
}
a:visited {
  color: #004d00;
}

.page-shell {
  padding: 4px 0;
}

/* 旧 <table width="840/868" cellspacing="1"> の置き換え。
   grid の gap にページ背景色を覗かせることで cellspacing 相当の区切り線を再現。
   旧サイトはPC専用の固定幅テーブルで、ウィンドウが狭い場合は横スクロールになる仕様だった。
   今回はレイアウトのみの整理（レスポンシブ対応は対象外）のため、
   1fr等の可変幅は使わず、列幅を固定して同じ挙動（狭い時は横スクロール）を踏襲する。 */
.page-grid {
  display: grid;
  grid-template-columns: 300px 680px;
  gap: 1px;
  width: 981px;
  margin: 0 auto;
  background-color: #fbaed9;
}

.sidebar {
  grid-column: 1;
  grid-row: 1;
  background-color: #ffffff;
  padding: 6px 8px;
}

.main-content {
  grid-column: 2;
  grid-row: 1;
  background-color: #ffffff;
  padding: 6px 12px;
  text-align: center;
}

.footer-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  background-color: #ffffff;
  text-align: center;
  padding: 8px 4px;
  line-height: 200%;
}

.footer-copy {
  grid-column: 1 / -1;
  grid-row: 3;
  background-color: fuchsia;
  text-align: center;
  padding: 10px 4px;
}
.footer-copy a {
  text-decoration: none;
}
.footer-copy-text {
  color: #ffffff;
}

/* ---- サイドバーナビ ---- */
.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.6em 0;
}
.back-to-top {
  text-align: right;
  margin: 1em 0;
}
.back-to-top a {
  font-weight: bold;
  color: #ff00ff;
}
.nav-map {
  margin: 0.5em 0;
}

/* ---- 関連サイトボックス（旧 <table border="6" bgcolor="#ffffe3">） ---- */
.related-box {
  border: 6px outset #c9b98a;
  background-color: #ffffe3;
  padding: 8px;
  text-align: center;
  margin-top: 0.5em;
}

/* ---- タイトルバナー ---- */
.site-label {
  text-align: left;
  margin: 0;
}
.site-label__text {
  font-size: 12px;
}
/* 上下余白なし。title1.gif/title2.gifとp-all.pngをメインカラム幅（656px）
   いっぱいに拡大表示する。タイトル画像は左右2枚の別画像のため、
   flexboxで元の画像サイズ比（395:224）のまま伸縮させ、連続した1枚の
   バナーに見えるようにしている。 */
.title-banner {
  margin: 0;
}
.title-banner__logos {
  display: flex;
}
.title-banner__logos img {
  display: block;
  width: 100%;
  height: auto;
}
.title-banner__logo-left {
  flex: 0 0 63.8127%; /* title1.gif 実寸395px（395:224の比率） */
}
.title-banner__logo-right {
  flex: 0 0 36.1873%; /* title2.gif 実寸224px */
}
/* ---- 集合写真バナー（p-all.png）：メインカラム幅いっぱいに表示。
   タイトルバナー内、および各ページ末尾（fee/staff/man/woman/cs/recruit/
   access/index）の集合写真で共通使用。 ---- */
.group-photo-banner {
  display: block;
}
.group-photo-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- コールアウトボックス（お客様相談室より／アクセス案内など） ---- */
.callout-box {
  border: 1px solid #333333;
  background-color: #ffeeff;
  padding: 10px;
  text-align: left;
  margin: 1em auto;
  max-width: 570px;
}
.callout-box--access {
  border-color: fuchsia;
  background-color: #ffffff;
}
.callout-box--warm {
  background-color: #ffffc1;
  border-color: #ffffc1;
}

.content-block {
  text-align: left;
}
/* staff-phpbuild.htmlのみ.content-blockを<p>で使用しているため、
   p要素の場合に限定して余白を明示（div使用箇所には影響しない） */
p.content-block {
  margin: 1em 0;
}
.intro-text {
  font-size: 10pt;
  line-height: 150%;
  color: gray;
  text-align: left;
  margin: 0;
}
.office-title {
  text-align: left;
  margin: 1em 0;
}
/* ---- 事務所所在地の地図一覧（旧：pタグ内に<br>とスペース文字で手組みのグリッド） ---- */
.office-map-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 1em 0 1em 10px;
  padding: 0;
  gap: 31px 27px;
}
.office-map-list li {
  margin: 0;
}
.office-map-list img {
  display: block; /* インライン画像の行送り分の余白（約7px）を除去し、gap値どおりの間隔にする */
}

/* iframe埋め込みページ（fee/staff/cs/access）の内容エリア */
.iframe-area {
  text-align: center;
  margin: 0.5em 0;
}

/* ==========================================================================
   文字色・文字サイズ・行間ユーティリティ
   旧<font color="...">タグ／要素ごとに散在していたインラインstyleの置き換え。
   ここに定義した値は、旧コードで実際にレンダリングされていた色・サイズを
   ブラウザの計算結果（getComputedStyle）で1つずつ確認した上で移植したもの。
   見た目を変える意図の値は一切含まれていない（②整理・デザイン変更なし）。
   クラス名は色相の意味付けが難しい配色のため、誤認を避けて16進値をそのまま採用。
   ========================================================================== */

/* ---- 文字色 ---- */
.c-9d009d { color: #9d009d; } /* ナビ：トップ（離婚相談） */
.c-fc5403 { color: #fc5403; } /* ナビ：弁護士・スタッフ紹介 */
.c-00cc00 { color: #00cc00; } /* ナビ：離婚の弁護士費用／リンクページの一部 */
.c-2168ed { color: #2168ed; } /* ナビ：男性の離婚相談／男性ページ見出し／リクルートページ内リンク */
.c-ff46ff { color: #ff46ff; } /* ナビ：女性の離婚相談／女性ページ見出し */
.c-4f371b { color: #4f371b; } /* ナビ：関連情報はこちら（トップページのみ表示） */
.c-028888 { color: #028888; } /* ナビ：お客様相談室 */
.c-00cccc { color: #00cccc; } /* ナビ：リクルート（求人）／リンクページの一部 */
.c-ff9900 { color: #ff9900; } /* ナビ：プライバシーポリシー */
.c-008000 { color: #008000; } /* ナビ：リンク／リンクページの一部 */
.c-0000ff { color: #0000ff; } /* フッターナビ：アクセス／お問合せ／トップページのアクセス案内内の数字 */
.c-ff00ff { color: #ff00ff; } /* 「▲このページの先頭へ」共通リンク／リンクページの一部 */
.c-cc00cc { color: #cc00cc; } /* 各ページの見出し類（ようこそ／早い段階で／円満解決／費用が心配／アクセス／受付時間／相談対応日時／事務所所在地） */
.c-009999 { color: #009999; } /* 関連サイトボックス：弁護士相談＠三重県 */
.c-ffa500 { color: #ffa500; } /* 関連サイトボックス：債務整理 */
.c-ff6600 { color: #ff6600; } /* トップページ本文の強調フレーズ */
.c-006600 { color: #006600; } /* リンクページ：弁護士法人心 メインサイト */
.c-0074e8 { color: #0074e8; } /* リンクページ：心グループ採用サイト */
.c-009900 { color: #009900; } /* リンクページ：交通事故関連リンク */
.c-ff5b0d { color: #ff5b0d; } /* リンクページ：過払い金請求・債務整理関連リンク */
.c-999900 { color: #999900; } /* リンクページ：税理士サイト */
.c-666666 { color: #666666; } /* リンクページ：斎藤美淳のブログ */
.c-00cbd0 { color: #00cbd0; } /* リクルートページ見出し */
.c-f000f0 { color: #f000f0; } /* トップページ：お客様相談室コールアウト内リンク */
.c-000000 { color: #000000; } /* リンク(a要素)の既定色(緑)を打ち消して黒にする箇所 */

/* ---- 文字サイズ（旧<font size="...">の置き換え。size="3"は無効果のため対応クラスなし） ---- */
.fs-small  { font-size: 81.25%; }  /* 旧 size="-1" */
.fs-large  { font-size: 112.5%; }  /* 旧 size="+1" */
.fs-xlarge { font-size: 150%; }    /* 旧 size="+2" */
.fs-117    { font-size: 117%; }    /* 旧 size="+1" と style="font-size:117%" の併記箇所（styleが優先されていた値） */

/* ---- 行間 ---- */
.lh-200 { line-height: 200%; margin: 1em 0; } /* トップページ冒頭の段落（要margin復元） */
.lh-250 { line-height: 250%; }
.lh-300 { line-height: 300%; }

/* ---- サイドバー／フッターナビのリンクは全項目が太字だったため、
        項目ごとの<span style="font-weight:bold">を廃止し、まとめて指定 ---- */
.sidebar-nav a,
.footer-nav a {
  font-weight: bold;
}

/* ---- トップページ：お客様相談室コールアウト内の見出し・本文
        （二重にネストしたfontタグの実効値をそのまま移植した個別指定） ---- */
.cs-callout-heading {
  color: #004f00;
  font-size: 131.625%;
  line-height: 250%;
}
.cs-callout-text {
  color: #005700;
  font-size: 12pt;
  line-height: 200%;
}

/* ---- トップページ：末尾の「我々は、皆様のことを…」の強調文 ---- */
.welcome-cta {
  color: #cc00cc;
  font-size: 16pt;
  line-height: 300%;
}

/* ---- リンクページ：見出し「リンク」（独自フォント指定あり） ---- */
.link-page-heading {
  font-size: 150%;
  font-family: HGP行書体;
}

/* ==========================================================================
   ナビ矢印アイコン（CSS疑似要素）／フッターナビのリスト化／関連サイトのdl化
   コード整理の一環。見た目は現行を踏襲しつつ、フッターナビは項目間隔が
   詰まりすぎていたため、ユーティリティ内で軽微な間隔調整を行っている。
   矢印は当初インラインSVGで実装していたが、マークアップに要素を増やさず
   CSSのみで完結する ::before + border-trick（正方形の上・右ボーダーのみを
   45度回転させ「＞」形に見せる手法）に置き換えた。
   ========================================================================== */

/* ---- ナビ矢印アイコン（旧「⇒」文字の置き換え） ---- */
.sidebar-nav li::before,
.footer-nav-list li::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: solid #ff0000;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* ---- フッターナビ：liによる整列。折り返しても縦横とも等間隔になるようgapで統一 ---- */
.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: normal;
  gap: 0.6em 1.6em;
}
.footer-nav-list li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  white-space: nowrap;
}

/* ---- サイドバー：関連サイト一覧（dl化）。旧<br><br>による段落間隔をmarginで再現 ---- */
.related-list {
  margin: 0.8em 0 0;
  padding: 0;
}
.related-list dt {
  margin: 0;
}
.related-list dd {
  margin: 0.2em 0 0.8em;
}
.related-list dd:last-child {
  margin-bottom: 0;
}