html{
box-sizing: border-box;
font-size: 16px;
}

*, *::before, *::after{
box-sizing: inherit;
}

body{
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
color: rgba(48, 48, 48, 1);
margin: 0;
padding: 0;
line-height: var(--lh-normal);
}

/* クラス指定のないリンクがブラウザ既定の青（訪問済みは紫）になるのを防ぐ。
   詳細度を要素セレクタ(0,0,1)に留めてあるため、クラスを持つ部品側の指定が
   すべて優先される。作成者スタイルはUAスタイルより強いので :visited も上書きされる */

a{
color: rgba(22, 65, 106, 1);
}

header{
width: 100%;
height: 100%;
margin: 0px 0 0 0;
line-height: 0;
}

footer{
font-size: 0.8rem;
line-height: var(--lh-body);
text-align: left;
width: 90%;
border-top: 1px solid rgba(32, 59, 85, 1);
margin: 0 auto 20px auto;
padding: 40px 3.5% 20px 3.5%;
}

address{
font-style: normal;
font-weight: 400;
}

/* =========================================================
   2) タイポグラフィ（要素ごと）PC基準
   PC: Title 36 / Body 15 / H2 18 / H3 16
   ========================================================= */

/* 本文（段落・リスト・汎用テキスト） */

body, p, li, .news, .p-section__subtitle, .p-home-flow__item-title{
font-size: var(--fs-body);
line-height: var(--lh-body);
}

/* タイトル（ヒーロー系・主要タイトル） */

h1{
font-size: var(--fs-h1);
line-height: var(--lh-tight);
}

/* 見出しの折り返しを文節単位にする（狭い画面で「経営相／談から」のように
   語の途中で切れるのを防ぐ）。auto-phrase 非対応のブラウザでは
   これまでどおりの折り返しになるだけで、表示が壊れることはない。 */

h1, h2, h3, .underline002, .c-article__title, .p-home-service__item-label, .p-home-flow__item-title{
text-wrap: balance;
/* 最終行に1語だけ落ちるのを防ぎ、行の長さを均す。未対応ブラウザでは無視される */
word-break: auto-phrase;
overflow-wrap: anywhere;
/* auto-phrase は文節の途中で切らないため、1文節が画面幅より長いと
   はみ出す。overflow-wrap を併記して、その場合だけ従来どおり
   途中で折り返させる（例：「ＭＢＡ経営コンサルティングの御紹介」） */
}

/* 見出しを中央寄せする親 */

.p-header_title{
text-align: center;
}

/* h1#underline と h2.underline002 を同じスタイルに */

.underline002{
line-height: var(--lh-tight);
font-size: var(--fs-h2);
font-weight: 500;
color: rgba(28, 36, 48, 1);
/* 見出しの文字色は記事系（c-article）と同じ濃紺寄りの黒に統一（2026-09-24） */
text-align: center;
position: relative;
display: inline-block;
/* 下線が文字幅にフィット */
padding-bottom: 0.35em;
/* 下線ぶんの余白 */
}

.underline002::after{
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 4px;
background: linear-gradient(to right, rgba(56, 119, 197, 1), rgba(86, 163, 245, 1));
border-radius: 2px;
}

/* セクションタイトル（Our Service / Flow / Fee / FAQ など） */

.p-section__header{
text-align: center;
/* 子要素を中央揃え */
}

/* 節見出し（merit003__title）は h2 の大きさに統一。p-section__titleはunderline002に統合済み(2026-08-06) */

.merit003__title{
font-size: var(--fs-h2);
line-height: var(--lh-tight);
color: rgba(28, 36, 48, 1);
}

/* H3 */

h3{
font-size: var(--fs-h3);
line-height: var(--lh-tight);
}

/* グリッドのボタン内の文字（自己破産 等）。見出しではないので div に付ける */

.p-home-service__item-label{
font-weight: 600;
color: rgba(22, 65, 106, 1);
text-align: center;
line-height: var(--lh-tight);
margin: 0;
font-size: var(--fs-body);
}

/* =========================================================
   3) スマホ（600px以下）
   SP: Title 24 / Body 13 / H2 15 / H3 14
   ========================================================= */

@media (max-width: 600px){
body, p, li, .news, .p-section__subtitle, .p-home-flow__item-title{
line-height: var(--lh-body);
}

h1{
line-height: var(--lh-tight);
}

/* 各種ページのタイトル部分の修飾 */

.p-header_title{
text-align: center;
}
}

@media (max-width: 700px){
.p-section__header .underline002{
margin: 8px 20px 10px 20px;
/* ← ここを好きな値に */
}
}

.h3{
text-indent: 1em;
}

.mamepoint{
margin: 0 0 0 0;
padding: 0 0 0 4em;
text-indent: -4em;
font-size: 1rem;
}

.contents{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
background-color: rgba(255, 255, 255, 1);
}

/* ==============================
   グローバルナビ：ハンバーガー対応
   1000px以下で折りたたみ
   ============================== */

/* ボタンはPCでは非表示 */

@media (max-width: 1000px){
/* トグル（チェックボックス） */

/* 初期状態ではメニューを非表示 */

/* 開いた時（チェックON） */

/* スタック表示用に各スタイルを上書き */

.mbut:last-child{
border-bottom: none;
}

.menubutton{
color: rgba(22, 65, 106, 1);
text-decoration: none;
background: rgba(255, 255, 255, 1);
}
}

.menuboxes{
/*background-color:rgba(7, 62, 115, 1);*/
border: 0;
margin: 0;
padding: 0;
width: 100%;
}

.menubox1, .menubox2{
width: 100%;
border: 0;
padding: 16px 10px 12px 25px;
/*background-color:rgba(7, 62, 115, 1);*/
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
overflow: visible;
}

.menubox1{
margin: 0 auto 0 auto;
}

.menubox2{
margin: auto;
}

.mbut{
display: inline-block;
width: 23%;
text-align: left;
vertical-align: bottom;
margin: 0px 0 0px 2%;
padding: 15px 3% 0px 0;
text-decoration: none;
font-size: 1rem;
white-space: nowrap;
/*font-weight: 700;*/
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
color: rgba(255, 255, 255, 1);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(234, 242, 247, 1) 100%);
/*border-radius:5px;*/
transform: translateX(-10px) skewX(-30deg);
-webkit-transform: translateX(-10px) skewX(-30deg);
border-right: solid rgba(84, 195, 241, 1) 3px;
border-bottom: solid rgba(84, 195, 241, 1) 3px;
box-shadow: 3px 4px 0 rgba(22, 65, 106, 0.12);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.mbut2{
transform: translateX(0px) skewX(30deg);
-webkit-transform: translateX(0px) skewX(30deg);
margin: 0 3% 0 0;
border: 0 0 0 0;
padding: 0;
}

.menubutton{
text-decoration: none;
color: rgba(7, 62, 115, 1);
transition: color 0.25s ease;
padding-left: 14px;
display: inline-block;
}

.mbut:hover{
background: linear-gradient(135deg, rgba(22, 65, 106, 1) 0%, rgba(35, 97, 153, 1) 100%);
border-right: solid rgba(254, 203, 76, 1) 3px;
border-bottom: solid rgba(254, 203, 76, 1) 3px;
box-shadow: 5px 7px 0 rgba(22, 65, 106, 0.22);
transform: translateX(-10px) translateY(-4px) skewX(-30deg);
-webkit-transform: translateX(-10px) translateY(-4px) skewX(-30deg);
}

.mbut:hover .menubutton{
color: rgba(255, 255, 255, 1);
}

/* ===== ハンバーガー切替直後（1001〜1199px）は「ＭＢＡ経営コンサルティング」が箱に収まりきらないため縮小 ===== */

@media (min-width: 1001px) and (max-width: 1199px){
.menubutton{
font-size: 0.82rem;
padding-left: 10px;
}
}

.mainbox{
margin: 0;
border: none;
background-color: rgba(255, 255, 255, 1);
background-image: none;
}

.news{
margin: 2em;
text-align: left;
word-wrap: normal;
font-size: 80%;
}

.noticedate{
width: 20%;
vertical-align: top;
white-space: nowrap;
/* 幅20%だと375px時に53pxまで縮み「令和８年７月３０日」が3行に割れる。
   日付は途中で折り返さない */
}

.notice{
width: 70%;
padding: 0 0 0 10%;
vertical-align: top;
}

/* 弁護士費用表デザイン */

.p-fee__tablewrap{
overflow-x: auto;
width: calc(100% - 24px);
/* p-note と同じ幅に揃える */
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.prtable{
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body);
line-height: var(--lh-normal);
background: rgba(255, 255, 255, 1);
border-radius: 8px;
overflow: hidden;
}

/* ヘッダー */

.prtable thead th{
background: linear-gradient(135deg, rgba(22, 65, 106, 1), rgba(54, 113, 186, 1));
color: rgba(255, 255, 255, 1);
padding: 20px 18px;
/* ← 縦方向に広め */
text-align: center;
font-weight: 500;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.prtable thead th:last-child{
border-right: none;
}

/* 本文セル */

.prtable td{
padding: 20px 18px;
/* ← 行を縦長にする */
border-bottom: 1px solid rgba(229, 238, 247, 1);
text-align: center;
}

.prtable td.prtablefirstcolumun{
text-align: left;
font-weight: 500;
color: rgba(43, 77, 119, 1);
}

/* 行ごとに色を揃える */

.prtable tbody tr:nth-child(odd){
background: rgba(255, 255, 255, 1);
}

.prtable tbody tr:nth-child(even){
background: rgba(234, 242, 247, 1);
/* 薄い水色 */
}

/* ホバー行（行全体に色） */

.prtable tbody tr:hover{
background: rgba(226, 239, 255, 1);
transition: background 0.25s ease;
}

/* テーブルのキャプションを装飾 */

.prtable caption{
caption-side: top;
/* 表の上に表示 */
font-size: var(--fs-h4);
/* 文字サイズ */
font-weight: 600;
/* 太字 */
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
color: rgba(56, 119, 197, 1);
/* おしゃれな青 */
text-align: left;
/* 左寄せ */
margin-bottom: 18px;
/* テーブルとの余白 */
}

/* ===== 狭い画面では表をカード状に積み替える =====
   4列表は375pxで1列68pxまで潰れ、1セルが16行に折り返して読めなくなる。
   700px以下では各行を1枚のカードにし、列見出しは data-label から
   ::before で各セルの上に出す。display:block で表のセマンティクスが
   失われるため、HTML側に role="table/row/cell" 等を明示してある。 */

@media (max-width: 700px){
.prtable, .prtable tbody, .prtable tr, .prtable td{
display: block;
width: 100%;
}

.prtable{
table-layout: auto;
background: none;
box-shadow: none;
}

/* 表本体を block にすると caption の幅計算が壊れるので合わせて block にする */

.prtable caption{
display: block;
width: 100%;
}

/* 列見出しは各セルの ::before で出すので、行としては隠す */

.prtable thead{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}

.prtable tbody tr{
margin-bottom: 14px;
border: 1px solid rgba(214, 230, 247, 1);
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.prtable tbody tr:nth-child(odd), .prtable tbody tr:nth-child(even){
background: rgba(255, 255, 255, 1);
}

/* 行の見出し（1列目）はカードの帯にする */

.prtable td.prtablefirstcolumun{
background: rgba(22, 65, 106, 1);
color: rgba(255, 255, 255, 1);
font-weight: 600;
text-align: left;
padding: 12px 14px;
border-bottom: none;
}

.prtable td.prtablecolumun{
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid rgba(229, 238, 247, 1);
}

.prtable tbody tr td.prtablecolumun:last-child{
border-bottom: none;
}

/* 列見出しをセルの上に小さく添える */

.prtable td.prtablecolumun::before{
content: attr(data-label);
display: block;
margin-bottom: 4px;
font-size: 13px;
font-weight: 600;
color: rgba(56, 119, 197, 1);
}

/* data-label が無い表（1列目だけで完結するもの）では帯を出さない */

.prtable td.prtablecolumun:not([data-label])::before{
content: none;
}

/* カード化したので行ホバーの塗りは無効にする */

.prtable tbody tr:hover{
background: rgba(255, 255, 255, 1);
}
}

/* ===== 弁護士費用表：モバイル最適化 ===== */

@media (max-width: 900px){
.p-fee__tablewrap{
margin: 12px auto;
border-radius: 6px;
-webkit-overflow-scrolling: touch;
}

.prtable{
/* 全体の文字をひと回り小さく */
font-size: 15px;
/* 狭い画面で列幅を均等配分しつつ改行を許可 */
table-layout: fixed;
}

/* 見出し・本文セルの余白を圧縮 */

.prtable thead th, .prtable td{
padding: 12px 10px;
word-break: break-word;
/* 長い日本語も折り返す */
}

/* キャプション（タイトル）も小さめに */

.prtable caption{
font-size: 15px;
margin-bottom: 10px;
}

/* 1列目（説明列）は左寄せをキープして読みやすく */

.prtable td.prtablefirstcolumun{
text-align: left;
}
}

.googlemap{
text-align: center;
}

.gmf{
width: 90%;
height: 450px;
border: 0;
}

/* === フッターリンク見やすく === */

footer address{
font-style: normal;
color: rgba(48, 48, 48, 1);
margin-top: 12px;
}

/* === h3オーバーライド === */

.h3{
margin: 0 0 0 1.8em;
font-size: var(--fs-h3);
}

/* === セクション見やすく（任意） === */

.mainbox section{
margin-top: var(--gap-section);
margin-bottom: var(--gap-section);
}

/* 区切り線は、背景も枠も持たない素のセクションにだけ引く。
   ここで padding-bottom を一律指定すると、背景箱（.p-home-service 等）の
   下側の余白まで奪われ、中のボタンやタイルが枠の下端に寄ってしまう。 */

.mainbox section.p-lawyer, .mainbox section.p-section:not(.p-home-service):not(.p-home-flow):not(.p-home-column){
padding-bottom: 8px;
border-bottom: 1px solid var(--rule-color);
}

/* 入れ子セクションで終わる親セクションは線を引かない（下の線と密着して二重に見えるため） */

.mainbox section:has(> section:last-child){
padding-bottom: 0;
border-bottom: 0;
}

/* === スマホ向け余白調整 === */

/* ===== 最終オーバーライド：ハンバーガーメニュー（1000px以下） ===== */

@media (max-width: 1000px){
.menubox1, .menubox2{
display: none !important;
padding: 6px 12px 12px 12px !important;
flex-flow: column nowrap !important;
}

.mbut{
width: 100% !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
transform: none !important;
border: none !important;
border-bottom: 1px solid rgba(229, 238, 247, 1) !important;
}

.mbut2{
transform: none !important;
margin: 0 !important;
padding: 0 !important;
}

.menubutton{
display: block !important;
width: 100% !important;
padding: 12px 10px !important;
}
}

/* トップページ、スライドショー部分*/

/* ===== 対応可能業務（セクション外枠） ===== */

.p-home-service{
background: rgba(247, 249, 252, 1);
/* 大きな箱の背景 */
border-radius: 24px;
padding: clamp(40px, 5vw, 120px);
/* 画面に応じて内側余白を自動調整 */
margin: 100px auto;
}

@media (max-width: 900px){
.p-home-service{
background: rgba(247, 249, 252, 1);
/* 大きな箱の背景 */
border-radius: 24px;
padding: clamp(40px, 5vw, 120px);
/* 画面に応じて内側余白を自動調整 */
margin: 40px auto 40px auto;
}
}

/* ボタン配置 */

/* 共通ボタンスタイル */

/* 内側の最大幅：1920pxまで広がる、1000px未満はスマホUIに切替 */

.p-home-service .container{
width: 100%;
margin: 0 auto;
}

/* ===== カード（p-home-service__item・p-home-serviceとp-home-service__bodyで共有） ===== */

.p-home-service__item{
--tile-ratio: 1.15;
/* 縦横比の固定値。三角関数が使えない古い環境ではこの値になる */
aspect-ratio: var(--tile-ratio) / 1;
min-height: auto;
/* 比率を優先する。auto なので中身より小さくはならない */
background: rgba(255, 255, 255, 1);
border-radius: 16px;
box-shadow: 0 4px 18px rgba(22, 65, 106, 0.10);
transition: box-shadow .2s ease, transform .15s ease;
display: flex;
overflow: hidden;
}

/* カードの縦横比を画面幅で連続的に変える */
/* 320px以下＝縦横1:1（正方形）／1200px以上＝縦横1.5:2（幅÷高さ＝1.333・横長）／その間は直線的に変化 */
/* tan(atan2()) は長さを無単位の数値に変換する定石。Edge111以降・Safari15.4以降 */

@supports (aspect-ratio: tan(atan2(1px, 1px)) / 1){
.p-home-service__item{
--vw-num: tan(atan2(100vw, 1px));
/* 画面幅の数値。1200なら 1200 */
--tile-ratio: clamp(1, calc(1 + (var(--vw-num) - 320) / 2640), 1.33333);
/* 2640 = (1200-320) / (1.33333-1)。両端の値を変えるならこの3つの数字を直す */
}
}

.p-home-service__item:hover{
box-shadow: 0 8px 28px rgba(22, 65, 106, 0.18);
transform: translateY(-3px);
}

/* カード内リンクを全面クリックに＆縦積み中央寄せ（リンクを持たないカードは __inner が同じ役割を担う） */

.p-home-service__item > a, .p-home-service__item > .p-home-service__inner{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
padding: 20px;
gap: 12px;
}

@media (max-width: 600px){
.p-home-service__item > a, .p-home-service__item > .p-home-service__inner{
padding: 12px 8px;
gap: 8px;
}
}

/* アイコン画像（中央） */

.p-home-service__item img{
width: clamp(64px, 5vw, 96px);
height: clamp(64px, 5vw, 96px);
object-fit: contain;
display: block;
border-radius: 12px;
background: rgba(234, 242, 247, 1);
padding: clamp(6px, .6vw, 12px);
}

/* PCでの“大きな箱”の余白感を増量（任意） */

@media (min-width: 1200px){
.p-home-service{
padding: 48px;
}
}

/* 発注までの流れについて */

.p-home-flow__bg{
background: linear-gradient(135deg, rgba(234, 242, 247, 1) 60%, rgba(207, 225, 240, 1) 100%);
border-radius: 22px;
margin: 0 auto 44px auto;
box-shadow: 0 4px 20px rgba(22, 65, 106, 0.09);
}

.p-home-flow__list{
display: flex;
justify-content: center;
/* ←中央揃え */
align-items: stretch;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
width: auto;
/* ←ここ！width:100%はNG！ */
flex-wrap: nowrap;
/* ←横並びを強制 */
}

.p-home-flow__list li{
list-style: none;
}

.p-home-flow__item{
background: rgba(255, 255, 255, 1);
border-radius: 12px;
box-shadow: 0 3px 14px rgba(22, 65, 106, 0.10);
padding: 22px 12px 18px 12px;
text-align: center;
flex: 1 1 120px;
display: flex;
flex-direction: column;
align-items: center;
min-width: 110px;
max-width: 150px;
position: relative;
transition: box-shadow 0.2s, transform 0.2s;
}

.p-home-flow__item:hover{
box-shadow: 0 6px 22px rgba(22, 65, 106, 0.16);
transform: translateY(-5px) scale(1.04);
}

.p-home-flow__item-num{
font-size: 1.1em;
color: rgba(255, 255, 255, 1);
background: rgba(56, 119, 197, 1);
border-radius: 50%;
width: 2.2em;
height: 2.2em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 0 auto 11px auto;
box-shadow: 0 2px 7px rgba(184, 214, 242, 0.635);
letter-spacing: 0.06em;
}

.p-home-flow__item-img{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}

.p-home-flow__item-img img{
width: 48px;
height: 48px;
object-fit: contain;
}

.p-home-flow__item-title{
font-size: var(--fs-h4);
font-weight: 600;
color: rgba(22, 65, 106, 1);
margin-top: 6px;
letter-spacing: 0.02em;
}

.p-home-flow__btn{
text-align: right;
margin-top: 18px;
}

/* ボタン */

@media (max-width: 900px){
.p-home-flow__bg{
padding: 24px 4px 14px 4px;
}

.p-home-flow__list{
flex-direction: column;
align-items: stretch;
gap: 13px;
}

.p-home-flow__item{
margin: 0 auto;
width: 100%;
/* ← こちらで親にフィットさせる */
max-width: 100%;
min-width: 0;
flex: unset;
}

.p-home-flow__btn{
text-align: center;
margin-top: 12px;
}
}

@media (max-width: 600px){
.p-home-flow__bg{
padding: 12px 0 8px 0;
}

.p-home-flow__item{
padding: 12px 5px 8px 5px;
}

.p-home-flow__item-img img{
width: 34px;
height: 34px;
}
}

/* 縦積みの流れ図（詳細ページ用）：横1列を縦並びに切り替える修飾クラス */

.p-home-flow.-vertical .p-home-flow__list{
flex-direction: column;
gap: 13px;
width: 100%;
}

.p-home-flow.-vertical .p-home-flow__item{
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
}

.p-home-flow.-vertical .p-home-flow__item-title{
overflow-wrap: anywhere;
word-break: break-word;
}

@media (max-width: 900px){
.p-home-flow.-vertical .p-home-flow__bg{
overflow-x: hidden;
}

.p-home-flow.-vertical .p-home-flow__item{
flex: unset;
}

.p-home-flow.-vertical .p-home-flow__item-title{
line-height: var(--lh-normal);
}
}

@media (max-width: 900px) and (min-width: 601px){
.p-home-flow.-vertical .p-home-flow__item{
padding: 12px 8px 14px;
}

.p-home-flow.-vertical .p-home-flow__item-img img{
width: 32px;
height: 32px;
}
}

/* ボタン（変更なし） */

.c-block-link{
display: inline-block;
padding: 4px 0;
}

.c-text-link.-white{
display: inline-flex;
align-items: center;
background: rgba(56, 119, 197, 1);
color: rgba(255, 255, 255, 1);
font-weight: 600;
padding: 8px 18px;
border-radius: 20px;
text-decoration: none;
font-size: 1.05em;
transition: background 0.2s;
}

.c-text-link.-white:hover{
color: rgba(255, 255, 255, 1);
}

.c-text-link .arrow{
margin-left: 10px;
font-size: 1.2em;
}

/* トップページ・弁護士の紹介部分、左側に顔写真、右側にテキスト */

/* ===== ベースカード ===== */

.p-bengoshi-intro{
width: 100%;
margin: 32px 0 48px 0;
padding: 0;
}

.p-bengoshi-intro__heading{
text-align: center;
margin: 0 0 18px;
font-weight: 600;
color: rgba(28, 36, 48, 1);
letter-spacing: .02em;
}

/* ===== 写真まわり ===== */

/* 縁取りの微グラデ（上品なアクセント） */

/* キャプション（所属） */

/* ===== テキスト側 ===== */

/* タグ（分野） */

/* ボタン */

.btn.-primary:hover{
transform: translateY(-1px);
}

/* 補足リンク */

.p-bengoshi-intro__note{
margin: 12px 0 0;
font-size: .95rem;
}

/* ===== レスポンシブ ===== */

@media (max-width: 720px){

.p-bengoshi-intro__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
}

/* ===== コンテナ ===== */

.p-lawyer{
width: 100%;
margin-left:auto;
margin-right:auto;
padding: 0px;
max-width: var(--content-max);
}

/* ===== ヘッダー（写真＋基本情報） ===== */

.p-lawyer__header{
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
margin: 20px auto 20px auto;
border-radius: 20px;
padding: 20px;
background: linear-gradient(125deg, rgba(234, 242, 247, 1) 60%, rgba(221, 233, 244, 1) 100%);
box-shadow: 0 6px 26px rgba(22, 65, 106, .10);
}

.p-lawyer__photo{
margin: 20px auto 20px auto;
display: grid;
place-items: center;
width: 90%;
position: relative;
}

/* 写真の縁を内側へ17px：周囲と同じ色のまま、不透明度だけを 1 → 0 へ直線的に下げる */

.p-lawyer__photo::before{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
/* 写真より上下左右へ1pxずつ大きくして、角に残る1pxのはみ出しを覆う */
width: calc(min(100%, 260px) + 2px);
height: calc(min(100%, 260px) * 4 / 3 + 2px);
top: -1px;
border-radius: 17px;
pointer-events: none;
background: linear-gradient(to right, rgba(234, 242, 247, 1) 0, rgba(234, 242, 247, 0) 17px), linear-gradient(to left, rgba(234, 242, 247, 1) 0, rgba(234, 242, 247, 0) 17px), linear-gradient(to bottom, rgba(234, 242, 247, 1) 0, rgba(234, 242, 247, 0) 17px), linear-gradient(to top, rgba(234, 242, 247, 1) 0, rgba(234, 242, 247, 0) 17px);
}

.p-lawyer__photo img{
width: 100%;
max-width: 260px;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 16px;
background: rgba(247, 249, 252, 1);
}

.p-lawyer__caption{
margin-top: 8px;
text-align: center;
color: rgba(53, 90, 126, 1);
font-size: .9rem;
}

.p-lawyer__meta{
min-width: 0;
width: 95%;
padding: 30px 0 0 20px;
}

.p-lawyer__name{
margin: 0 0 6px;
font-weight: 600;
color: rgba(28, 36, 48, 1);
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: .02em;
display: flex;
align-items: baseline;
gap: .65em;
}

.p-lawyer__name small{
font-size: .95rem;
color: rgba(74, 106, 142, 1);
font-weight: 500;
}

.p-lawyer__position{
margin: 2px 0 10px;
color: rgba(42, 75, 109, 1);
}

.p-lawyer__quick{
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 0 0 12px;
padding: 0;
}

.p-lawyer__quick li{
list-style: none;
}

.btn{
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
text-decoration: none;
line-height: var(--lh-tight);
transition: transform .12s ease, box-shadow .12s ease, background .2s, color .2s, border-color .2s;
user-select: none;
cursor: pointer;
}

/* 弁護士説明テキスト */

@media (max-width: 720px){
.p-lawyer__name{
flex-direction: column;
align-items: flex-start;
gap: 4px;
}

.p-lawyer__name small{
display: block;
}
}

.btn.-primary{
background: rgba(56, 119, 197, 1);
color: rgba(255, 255, 255, 1);
box-shadow: 0 6px 14px rgba(56, 119, 197, .18);
}

.btn:hover{
transform: translateY(-1px);
}

.p-lawyer__tags{
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 8px 0 0;
padding: 0;

}

.p-lawyer__tags li{
padding: 6px 10px;
border-radius: 999px;
background: rgba(234, 243, 255, 1);
border: 1px solid rgba(207, 226, 255, 1);
color: rgba(42, 88, 134, 1);
font-size: .92rem;
list-style: none;
}

/* ===== 詳細（DL） ===== */

.p-lawyer__detail{
display: grid;
grid-template-columns: 180px 1fr;
gap: 8px 20px;
margin: 18px auto 8px;
max-width: var(--content-max);
}

.p-lawyer__detail dt{
font-weight: 600;
color: rgba(42, 75, 109, 1);
}

.p-lawyer__detail dd{
margin: 0;
}

/* ===== 目次（アンカー） ===== */

.p-lawyer-index{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 8px;
}

.p-lawyer-index a{
display: inline-block;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(188, 212, 238, 1);
background: rgba(255, 255, 255, 1);
color: rgba(42, 75, 109, 1);
text-decoration: none;
}

.p-lawyer-index a:hover{
background: rgba(247, 249, 252, 1);
}

/* ===== セクション ===== */

.p-lawyer-sec{
margin-top: 22px;
padding-top: 14px;
/*border-top: 1px solid rgba(229, 238, 247, 1);*/
scroll-margin-top: 104px;
/* 追従ヘッダーの高さに合わせる。#access・:target と同じ値 */
}

.p-lawyer-sec__title{
margin: 0 0 10px;
font-size: var(--fs-h3);
color: rgba(0, 0, 0, 1);
}

.p-lawyer__lead{
font-size: 1.05rem;
color: rgba(32, 59, 85, 1);
}

/* 年表 */

.p-lawyer-timeline{
width: 100%;
border-collapse: collapse;
}

.p-lawyer-timeline th, .p-lawyer-timeline td{
padding: 10px 8px;
border-bottom: 1px solid rgba(229, 238, 247, 1);
}

.p-lawyer-timeline th{
width: 120px;
text-align: left;
color: rgba(0, 0, 0, 1);
white-space: nowrap;
}

/* リスト */

/* カード（メディア／セミナー） */

.p-lawyer-cards, .p-column-list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* PC/タブレット：2列 */
list-style: none;
margin: 0;
padding: 0;
}

.p-lawyer-cards{
gap: 14px;
}

.p-lawyer-cards li{
list-style: none;
}

.p-lawyer-card{
border: 1px solid rgba(221, 233, 244, 1);
border-radius: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0 2px 10px rgba(22, 65, 106, .05);
}

.p-lawyer-card__meta{
margin: 0 0 4px;
color: rgba(85, 121, 158, 1);
font-size: .92rem;
}

.p-lawyer-card__title{
margin: 0 0 6px;
font-size: var(--fs-h4);
}

/* ===== レスポンシブ ===== */

@media (max-width: 1000px){
.p-lawyer__header{
grid-template-columns: 220px 1fr;
}
}

@media (max-width: 720px){
.p-lawyer__header{
grid-template-columns: 1fr;
text-align: left;
}

.p-lawyer__photo img{
max-width: 220px;
margin: 0 auto;
}

.p-lawyer__photo::before{
width: calc(min(100%, 220px) + 2px);
height: calc(min(100%, 220px) * 4 / 3 + 2px);
}

.p-lawyer__detail{
grid-template-columns: 1fr;
gap: 6px 0;
}

.p-lawyer-cards{
grid-template-columns: 1fr;
}
}

/* 業務ページ専用：サービス紹介・米国MBAについて（p-gyoumu-*）トップページと同じ */

.p-gyoumu-featured-service{
margin: 58px auto 48px auto;
padding: 0;
background: none;
}

.p-gyoumu-featured-service__container{
display: flex;
align-items: center;
justify-content: center;
gap: 54px;
max-width: 100%;
margin: 0 auto;
padding: 38px 34px;
border-radius: 22px;
background: linear-gradient(125deg, rgba(234, 242, 247, 1) 60%, rgba(221, 233, 244, 1) 100%);
box-shadow: 0 5px 26px rgba(22, 65, 106, 0.08);
}

.p-gyoumu-featured-service__image{
flex: 0 0 41%;
text-align: center;
}

.p-gyoumu-featured-service__image img{
max-width: 320px;
border-radius: 16px;
box-shadow: 0 2px 14px rgba(22, 65, 106, 0.09);
background: rgba(247, 249, 252, 1);
aspect-ratio: 1/1;
object-fit: cover;
margin: 0 auto;
}

/* 説明側（p-featured-service から移植） */

.p-gyoumu-featured-service__desc{
flex: 1 1 59%;
min-width: 240px;
}

.p-gyoumu-featured-service__title{
font-size: var(--fs-h2);
color: rgba(22, 65, 106, 1);
margin: 0 0 18px 0;
font-weight: 600;
letter-spacing: 0.01em;
}

.p-gyoumu-featured-service__lead{
font-size: 1.07em;
color: rgba(22, 65, 106, 1);
margin-bottom: 12px;
}

.p-gyoumu-featured-service__list{
font-size: 1em;
margin: 0 0 16px 1em;
padding: 0;
color: rgba(51, 68, 85, 1);
line-height: var(--lh-normal);
}

.p-gyoumu-featured-service__list li{
margin-bottom: 3px;
list-style: disc;
}

.p-gyoumu-featured-service__more{
margin-top: 10px;
}

.p-gyoumu-featured-service__btn{
display: inline-block;
background: rgba(56, 119, 197, 1);
color: rgba(255, 255, 255, 1);
border-radius: 20px;
padding: 9px 28px;
font-weight: 600;
text-decoration: none;
font-size: 1.02em;
box-shadow: 0 2px 8px rgba(189, 213, 239, 0.204);
}

.p-gyoumu-featured-service__btn:hover{
background: rgba(22, 65, 106, 1);
}

/* ===== スマホ・タブレット（1000px以下） ===== */

/* ＭＢＡ紹介バナーの縦積み。旧 1097px から 1000px へ統合（レイアウトの主境界にそろえる） */

@media (max-width: 1000px){
.p-gyoumu-featured-service__container{
flex-direction: column;
/* 横並び→縦積み */
gap: 24px;
/* 余白少し詰める */
padding: 28px 20px;
max-width: 680px;
/* モバイルで横幅を少し絞る（任意） */
}

/* 並び順を明示：画像を上、説明を下 */

.p-gyoumu-featured-service__image{
order: 1;
flex: 0 0 auto;
width: 100%;
text-align: center;
}

.p-gyoumu-featured-service__desc{
order: 2;
width: 100%;
}

/* 画像サイズの最適化 */

.p-gyoumu-featured-service__image img{
max-width: 420px;
/* タブレットで少し大きめに見せたい場合（任意） */
width: 100%;
margin: 0 auto;
}
}

/* さらに小さい端末向け（任意） */

@media (max-width: 480px){
.p-gyoumu-featured-service__container{
gap: 18px;
padding: 22px 16px;
}

.p-gyoumu-featured-service__image img{
max-width: 100%;
aspect-ratio: 1/1;
/* 既存の比率キープ */
object-fit: cover;
}
}

/* コラム・お知らせエリア */

.p-home-fee-list ul{
padding-left: 1.2em;
}

.p-home-fee-list li{
margin-bottom: 8px;
}

.p-home-faq-more{
margin-top: 8px;
}

/* =========================================================
   1) 外枠の除去＋レイアウト拡大（コンテナ）
   ========================================================= */

.verticalwrapper2{
width: 100%;
max-width: 1200px;
/* ← PCは1200pxに制限 */
margin: 0 auto;
/* 中央寄せ */
padding: 0 24px;
/* PCの左右安全マージン */
box-sizing: border-box;
border-left: none;
border-right: none;
}

/* スマホ/タブレット（950px以下）は完全に全画面 */

@media (max-width: 1000px){
.verticalwrapper2{
max-width: none;
/* = 100% */
padding: 0;
/* 余白なしで端まで表示（=全画面） */
}
}

/* パンくずやメインの左右余白も整える */

.mainbox{
width: 100%;
padding: 16px 0 24px 0;
}

/* 950px以下では .verticalwrapper2 の左右24pxが消えるため、ここで補う */

@media (max-width: 1000px){
.mainbox{
padding-left: 24px;
padding-right: 24px;
}

/* 旧 @media (max-width: 800px) から移設。上下の余白を画面幅の2%にする */

.mainbox{
padding: 2% 24px !important;
}
}

/* 「ご相談の流れ」ボックス幅拡大 */

.p-home-flow__bg{
max-width: 100%;
/* 900 → 1160 */
padding: 36px 24px 28px 24px;
}

/* 弁護士紹介の横幅拡大 */

/* フィーチャー（MBA×弁護士）横幅拡大 */

/* ===== Header ===== */

.site-header{
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid rgba(225, 231, 239, 1);
position: sticky;
top: 0;
z-index: 1000;
}

/* 追従ヘッダーの下にアンカー先が潜り込まないようにする。
   ヘッダー実測高はスマホ71px・デスクトップ97px。96pxではデスクトップで
   1px不足するため、余白を含めて104pxとする */

:target{
scroll-margin-top: 104px;
}

/* ===== ヘッダー右端の電話ボタン ===== */

.site-header__tel{
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: 9px 16px;
border-radius: 999px;
background: rgba(22, 65, 106, 1);
color: rgba(255, 255, 255, 1);
text-decoration: none;
white-space: nowrap;
font-weight: 600;
line-height: var(--lh-tight);
box-shadow: 0 2px 10px rgba(22, 65, 106, .18);
transition: background .2s ease, transform .12s ease;
}

.site-header__tel:hover{
background: rgba(15, 47, 83, 1);
transform: translateY(-1px);
}

.site-header__tel:focus-visible{
outline: 3px solid rgba(207, 226, 255, 1);
outline-offset: 3px;
}

.site-header__tel-icon{
width: 20px;
height: 20px;
flex: none;
filter: invert(1);
/* 素材は「黒い円＋受話器の形が透明に抜けた」画像。紺色のボタン上では
   黒円が沈むため、色を反転して白円＋紺の受話器に見せる。
   透明部分はそのまま残るので、抜き文字のように表示される */
}

.site-header__tel-num{
font-size: clamp(14px, 1.5vw, 17px);
letter-spacing: .02em;
}

/* 事務所名は折り返さない。折り返すと .site-header__logo の固定高さから
   はみ出し、サブタイトル「和歌山市の弁護士」が隠れてしまう */

.site-header__logo-main{
white-space: nowrap;
}

/* 狭い画面では番号を伏せてアイコンだけの丸ボタンにし、
   事務所名の表示領域を確保する（リンク名は aria-label で保持） */

@media (max-width: 600px){
.site-header__tel-num{
display: none;
}

.site-header__tel{
width: 44px;
height: 44px;
padding: 0;
gap: 0;
justify-content: center;
}
}

.site-header__inner{
max-width: calc(var(--content-max) + var(--content-pad) * 2);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 8px 16px;
}

/* クリックエリア */

.site-header__brand{
display: inline-block;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
line-height: var(--lh-tight);
padding: 8px 6px;
border-radius: 12px;
/* “乗ると濃くなる” ため、初期はやや薄め */
opacity: .88;
transition: opacity .18s ease, transform .15s ease, box-shadow .18s ease;
}

/* hover/focus で不透明度UP（＝濃く見える） */

.site-header__brand:hover{
opacity: 1;
transform: translateY(-1px);
}

.site-header__brand:focus-visible{
outline: 3px solid rgba(207, 226, 255, 1);
outline-offset: 3px;
opacity: 1;
}

/* ロゴ画像：画面幅に応じて高さだけ可変（縦横比維持）／縦積み（メイン＋サブ） */

.site-header__logo{
height: clamp(38px, 6.5vw, 64px);
width: auto;
display: flex;
flex-direction: column;
}

/* メインタイトル（前畑法律事務所） */

.site-header__logo-main{
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
font-weight: 600;
letter-spacing: .04em;
color: var(--brand-main);
font-size: clamp(20px, 2.6vw, 28px);
line-height: var(--lh-tight);
}

/* サブ（和歌山市の弁護士） */

.site-header__logo-sub{
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
font-weight: 500;
letter-spacing: .08em;
color: var(--brand-sub);
font-size: clamp(13px, 1.8vw, 15px);
margin-top: 4px;
}

/* ダーク背景上で使う場合の反転用（必要になれば親に .is-invert を付与） */

/* ========== Footer base ========== */

.l-footer{
width: 100%;
background: rgba(247, 249, 252, 1);
color: rgba(17, 34, 51, 1);
border-top: 1px solid rgba(225, 231, 239, 1);
margin: 36px 0 0 0;
padding: 0;
}

.l-footer__container, .p-footer-cta__container, .p-footer-navwindow__container{
max-width: var(--content-max);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}

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

.p-footer-cta{
background: linear-gradient(125deg, rgba(234, 242, 247, 1) 60%, rgba(207, 225, 240, 1) 100%);
border-bottom: 1px solid rgba(214, 224, 238, 1);
}

.p-footer-cta__container{
padding: 24px 24px 18px;
}

.p-footer-cta__list{
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
align-items: center;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
}

.p-footer-cta__list li{
list-style: none;
}

/* フッターCTA 見出しの装飾（既存定義の後ろに追加） */

.p-footer-cta__header{
text-align: center;
/* 親で中央寄せ */
}

.p-footer-cta__title{
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: .02em;
display: inline-block;
/* 下線を文字幅にフィット */
position: relative;
padding-bottom: .35em;
font-size: var(--fs-h2);
/* 既存の color は維持（変更したければここで上書き） */
}

.p-footer-cta__title::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
/* 下線を中央配置 */
bottom: -6px;
width: 2.8em;
/* 文字より短めの下線 */
height: 4px;
background: linear-gradient(90deg, rgba(56, 119, 197, 1), rgba(86, 163, 245, 1));
border-radius: 3px;
}

@media (max-width: 600px){
.p-footer-cta__title::after{
height: 3px;
bottom: -4px;
}
}

.p-footer-cta__item-note{
margin: 6px 0 0 0;
color: rgba(51, 68, 85, 1);
}

.p-footer-cta__btn.-tel{
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(22, 65, 106, 1);
color: rgba(255, 255, 255, 1);
padding: 10px 16px;
border-radius: 28px;
text-decoration: none;
box-shadow: 0 2px 10px rgba(22, 65, 106, .18);
}

.p-footer-cta__btn.-tel:hover{
background: rgba(15, 47, 83, 1);
}

.p-footer-cta__btn .icon{
width: 20px;
height: 20px;
filter: invert(1);
/* 紺色のボタン上なのでヘッダーの電話ボタンと同様に反転させる。
   同じ素材でも .p-home-flow__item-img は淡い背景の上に置くため、
   そちらは黒のままとする */
}

/* ========== Middle：info + menu ========== */

.l-footer__middle{
background: rgba(225, 231, 239, 1);
border-top: 1px solid rgba(214, 224, 238, 1);
border-bottom: 1px solid rgba(214, 224, 238, 1);
}

.l-footer__container{
display: grid;
grid-template-columns: 1.1fr 1.9fr;
gap: 28px;
padding: 22px 24px;
}

.p-footer-info__address{
color: rgba(34, 51, 68, 1);
display: block;
/* デフォルトで縦並びになる */
margin-top: 4px;
/* 行間を少し空けたい場合 */
}

.p-footer-info__address a{
color: rgba(22, 65, 106, 1);
}

.p-footer-info__address a:hover{
color: rgba(28, 87, 154, 1);
}

.p-footer-menu__list{
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 10px 18px;
list-style: none;
margin: 0;
padding: 0;
}

.p-footer-menu__list li{
list-style: none;
}

.p-footer-menu__item a{
text-decoration: none;
color: rgba(22, 65, 106, 1);
padding: 6px 0;
display: inline-block;
}

.p-footer-menu__item a:hover{
color: rgba(28, 87, 154, 1);
text-decoration: underline;
}

/* ========== Quick Nav（ナビゲーションウィンドウ） ========== */

.p-footer-navwindow{
background: rgba(234, 242, 247, 1);
border-top: 1px solid rgba(225, 231, 239, 1);
border-bottom: 1px solid rgba(225, 231, 239, 1);
}

.p-footer-navwindow__container{
padding: 18px 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

.p-footer-navwindow__card{
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 2px 10px rgba(22, 65, 106, 0.08);
text-decoration: none;
color: rgba(22, 65, 106, 1);
transition: box-shadow .18s, transform .18s;
}

.p-footer-navwindow__card:hover{
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(22, 65, 106, .16);
}

.p-footer-navwindow__card .iconbox{
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(234, 242, 247, 1);
box-shadow: inset 0 0 0 2px rgba(207, 225, 240, 1);
}

.p-footer-navwindow__card .label{
font-weight: 500;
}

/* ========== Bottom ========== */

.l-footer__bottom{
background: rgba(255, 255, 255, 1);
}

.l-footer__copyright{
text-align: center;
color: rgba(85, 102, 119, 1);
margin: 0px 0px 18px 0px;
font-size: 0.8rem;
}

/* ========== Responsive ========== */

@media (max-width: 900px){
.l-footer__container{
grid-template-columns: 1fr;
gap: 10px;
}

.p-footer-menu__list{
grid-template-columns: repeat(2, 1fr);
}

.p-footer-navwindow__container{
grid-template-columns: repeat(2, 1fr);
}

.l-footer__copyright{
font-size: 1rem;
}
}

@media (max-width: 600px){
.p-footer-cta__container{
padding: 14px 12px;
}

.l-footer__container{
padding: 16px 12px;
}

.p-footer-navwindow__container{
padding: 12px;
gap: 10px;
}
}

/* === FAQ（JSなしアコーディオン） === */

.faq-accordion{
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}

/* 既定の開閉マーカーを消す */

.faq-q{
list-style: none;
}

.faq-q::-webkit-details-marker{
display: none;
}

.faq{
border: none;
}

/* 質問（summary をボタン風に） */

.faq-q{
cursor: pointer;
background: rgba(255, 255, 255, 1);
color: rgba(22, 65, 106, 1);
border: 1px solid rgba(225, 231, 239, 1);
border-radius: 10px;
padding: 14px 44px 14px 14px;
/* 右にアイコン余白 */
box-shadow: 0 2px 10px rgba(22, 65, 106, 0.06);
transition: box-shadow .18s, transform .18s, background .18s;
position: relative;
}

.faq[open] .faq-q{
background: rgba(247, 249, 252, 1);
}

.faq-q:hover{
box-shadow: 0 6px 18px rgba(22, 65, 106, 0.14);
transform: translateY(-2px);
}

/* プラス／マイナスの簡易アイコン */

.faq-icon{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
}

.faq-icon::before, .faq-icon::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: rgba(56, 119, 197, 1);
border-radius: 2px;
transform: translate(-50%, -50%);
}

.faq-icon::after{
transform: translate(-50%, -50%) rotate(90deg);
}

/* ＋ */

.faq[open] .faq-icon::after{
opacity: 0;
}

/* －に見える */

/* 回答：スムースに開く（max-heightは想定長に合わせて調整可） */

.faq-a{
background: rgba(247, 249, 252, 1);
border: 1px solid rgba(225, 231, 239, 1);
border-radius: 10px;
margin-top: 8px;
padding: 0 14px;
/* 初期は閉じているのでパディング最小 */
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition: max-height .28s ease, opacity .22s ease, transform .22s ease, padding .2s;
}

.faq[open] .faq-a{
padding: 14px;
max-height: 400px;
/* 文章が長い場合は数値を上げてください */
opacity: 1;
transform: translateY(0);
}

/* モバイル微調整 */

@media (max-width: 600px){
.faq-q{
padding: 12px 40px 12px 12px;
}
}

/* ===== Column list layout ===== */

.p-column-list{
gap: 24px;
}

.p-column-list li{
list-style: none;
}

/* スマホは1列 */

@media (max-width: 767px){
.p-column-list{
grid-template-columns: 1fr;
gap: 16px;
}
}

/* 横長カード */

.p-column-card{
display: flex;
align-items: stretch;
gap: 16px;
border: 1px solid rgba(225, 231, 239, 1);
border-radius: 12px;
padding: 14px;
background: rgba(255, 255, 255, 1);
text-decoration: none;
transition: box-shadow .2s ease, transform .05s ease;
}

.p-column-card:hover{
box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
transform: translateY(-1px);
}

/* サムネイル（横長比率） */

.p-column-list__item-thumb{
flex: 0 0 40%;
max-width: 40%;
border-radius: 8px;
overflow: hidden;
}

/* 画像は中身をトリミングしてフィット */

.p-column-list__item-thumb img.ofi{
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
/* 横長に固定 */
object-fit: cover;
display: block;
}

/* テキスト側 */

.p-column-list__item-text{
flex: 1 1 auto;
display: flex;
align-items: center;
padding-right: 6px;
}

.p-column-list__item-title{
font-size: var(--fs-h4);
line-height: var(--lh-tight);
color: rgba(28, 36, 48, 1);
margin: 0;
}

/* スマホ時は余白と比率を微調整（横長のまま縦積み） */

@media (max-width: 767px){
.p-column-card{
padding: 12px;
gap: 12px;
}

.p-column-list__item-thumb{
flex-basis: 38%;
max-width: 38%;
}
}

/* ===== コラム「もっと見る」（HTML/CSSのみ、JavaScript不使用） ===== */

.p-column-more{
margin-top: 24px;
}

.p-column-more__summary{
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 280px;
margin: 0 auto;
padding: 12px 28px;
border: 1px solid rgba(22, 65, 106, 1);
border-radius: 999px;
background: rgba(255, 255, 255, 1);
color: rgba(22, 65, 106, 1);
font-weight: 600;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.p-column-more__summary::-webkit-details-marker{
display: none;
}

.p-column-more__summary:hover{
background: rgba(22, 65, 106, 1);
color: rgba(255, 255, 255, 1);
box-shadow: 0 6px 18px rgba(22, 65, 106, 0.14);
}

.p-column-more__label-open{
display: none;
}

.p-column-more[open] .p-column-more__label-closed{
display: none;
}

.p-column-more[open] .p-column-more__label-open{
display: inline;
}

.p-column-more .p-column-list{
margin-top: 24px;
}

/* ===============================
   Article (コラム記事ページ用)
   =============================== */

.c-article{
max-width: var(--content-max);
width:100%;
margin: 0 auto;
padding: 40px 0px;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
line-height: var(--lh-body);
color: rgba(48, 48, 48, 1);
background: rgba(255, 255, 255, 1);
}

.c-article__header{
margin-bottom: 2.5rem;
text-align: left;
}

.c-article__title{
font-size: var(--fs-h1);
font-weight: 600;
margin-bottom: 0.5em;
line-height: var(--lh-tight);
color: rgba(28, 36, 48, 1);
}

.c-article__lead{
font-size: var(--fs-h4);
line-height: var(--lh-body);
color: rgba(68, 68, 68, 1);
margin-bottom: 2rem;
}

.c-article__body{
font-size: var(--fs-body);
color: rgba(48, 48, 48, 1);
}

.c-article__body h2{
font-size: var(--fs-h2);
margin: 2.5rem 0 1rem;
padding-left: 0.6em;
border-left: 4px solid rgba(56, 119, 197, 1);
line-height: var(--lh-tight);
font-weight: 600;
color: rgba(28, 36, 48, 1);
}

/* 部品としての見出し（セクション見出し・ＣＴＡ・弁護士紹介）は記事本文内でも青い縦線を付けない */

.c-article__body h2.merit003__title{
padding-left: 0;
border-left: none;
}

.c-article__body h3{
font-size: var(--fs-body);
margin: auto 0 auto;
line-height: var(--lh-tight);
font-weight: 500;
color: rgba(48, 48, 48, 1);
}

.c-article__body p{
margin-bottom: 1.2rem;
}

.c-article__body ul{
margin: 0 0 1.5rem 1.2em;
padding: 0;
list-style: disc;
}

.c-article__body li{
margin-bottom: 0.5em;
}

/* レスポンシブ調整 */

@media (max-width: 767px){
.c-article{
padding: 24px 16px;
}
}

/* ===== 業務内容ページ（専用スタイル） ===== */

/* 外枠リスト */

.p-home-service__body{
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 24px;
justify-items: stretch;
align-items: stretch;
margin: 40px auto;
}

@media (max-width: 600px){
.p-home-service{
padding: 16px;
}
}

/* スマホ（2列表示） */

@media (max-width: 1000px){
.p-home-service__body{
margin: 20px 0px 20px 0px;
grid-template-columns: repeat(2, minmax(0, 240px));
/* カード幅の上限。狭い画面では自動で縮む */
justify-content: center;
/* 上限に達したあとの余白は左右に振り分ける */
gap: 16px 12px;
}
}

/* ===== トップページスライダー設定
トップページの高さを調整済み
全デバイスで16:9固定＆画像の全体表示（トリミングなし） ===== */

/* 外枠：そのまま */

/* トラック：高さは自動（liが高さを持つため） */

/* 各スライド：横幅いっぱい＋16:9で高さを自動算出 */

/* 画像：トリミングせずに“枠内に収める” */

/* ===== 画面区分は 900px で PC / SP の2種類に整理 ===== */

/* PC: 900px 以上 */

/* SP: 899px 以下 */

/* 説明テキスト用ボックス */

.p-textbox{
max-width: var(--content-max);
/* 他ブロックと同じ最大幅 */
width: 100%;
margin: 1.5em auto;
/* 上下の余白＋中央寄せ */
padding: 20px 24px;
/* 内側余白 */
/* background: rgba(247, 249, 252, 1);        薄い青背景で強調 */
border-radius: 8px;
/* 角丸で柔らかい印象 */
font-size: var(--fs-body);
line-height: var(--lh-body);
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
color: rgba(48, 48, 48, 1);
}

/* ボタン共通 CTA部分のデザイン*/

/* 白文字ボタン（青背景） */

/* ボタンを中央寄せ */

/* 注意書きボックス */

.p-note{
max-width: var(--content-max);
width: calc(100% - 24px);
/* 常に左右へ12pxずつ余白を残す（auto だけでは中間幅で0になるため） */
margin: 30px auto;
padding: 20px 24px;
border: 2px solid rgba(56, 119, 197, 1);
/* 青枠 */
border-radius: 8px;
background: rgba(247, 249, 252, 1);
/* 薄い青背景 */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* タイトル */

.p-note__title{
text-align: center;
font-size: var(--fs-h2);
font-weight: 600;
margin-bottom: 12px;
color: rgba(22, 65, 106, 1);
/* 濃い青で強調 */
border-bottom: 1px solid rgba(208, 226, 247, 1);
padding-bottom: 6px;
}

/* 本文 */

.p-note__body{
font-size: var(--fs-body);
line-height: var(--lh-body);
color: rgba(48, 48, 48, 1);
}

.p-note__body p{
margin: 0 0 8px;
}

/* スマホ用（幅1000px以下） */

@media (max-width: 1000px){
.p-note{
padding: 16px 18px;
margin: 20px auto;
}

.p-note__body{
font-size: var(--fs-body);
}
}

/* 相談事例のリスト、相続ページ */

.p-case-list{
max-width: var(--content-max);
margin: 30px auto 10px auto;
display: flex;
flex-direction: column;
gap: 16px;
/* 各項目の間隔 */
}

/* 各項目（カード風：背景＋枠＋角丸あり） */

.p-case-item{
max-width: 100%;
background: rgba(247, 249, 252, 1);
/* 薄い青背景 */
border: 1px solid rgba(208, 226, 247, 1);
/* 枠線 */
border-radius: 6px;
/* 角丸 */
padding: 16px 20px;
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: rgba(48, 48, 48, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
margin:0 2% 0 2%;
}

/* リンクになった相談事例カード（取扱業務ページのみ） */

a.p-case-item{
display: block;
text-decoration: none;
color: rgba(48, 48, 48, 1);
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

a.p-case-item:hover{
background: rgba(235, 244, 253, 1);
border-color: rgba(22, 65, 106, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}

a.p-case-item:focus-visible{
outline: 2px solid rgba(22, 65, 106, 1);
outline-offset: 2px;
}

/* 小見出し（〜したい部分） */

.p-case-item__lead{
display: block;
font-size: var(--fs-body);
/* 小さめ */
font-weight: 500;
color: rgba(22, 65, 106, 1);
/* 濃い青 */
margin-bottom: 4px;
line-height: var(--lh-tight);
}

/* メイン見出し（相続税申告など） */

.p-case-item .note{
display: block;
font-size: var(--fs-h4);
/* 大きく強調 */
font-weight: 600;
color: rgba(0, 0, 0, 1);
line-height: var(--lh-tight);
margin-top: 4px;
}

/* スマホ対応 */

@media (max-width: 1000px){
.p-case-item{
font-size: var(--fs-body);
padding: 12px 16px;
}

.p-case-item__lead{
font-size: var(--fs-body);
}

.p-case-item .note{
font-size: var(--fs-h4);
}
}

/* セクションタイトル、よくある質問、こんなお悩みありませんか？ */

.p-top-problem__ttl{
font-size: var(--fs-h2);
font-weight: 600;
margin-bottom: 20px;
text-align: center;
color: rgba(22, 65, 106, 1);
}

/* コンテンツレイアウト */

.p-top-problem__contents, .p-top-flow__content{
display: flex;
align-items: flex-start;
gap: 24px;
max-width: 100%;
margin: 0 auto;
}

/* 画像 */

/* リスト */

.p-top-problem__list{
flex: 1;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}

.p-top-problem__list li{
list-style: none;
}

/* リストアイテム */

.p-top-problem__list-item{
position: relative;
padding-left: 28px;
line-height: var(--lh-normal);
color: rgba(48, 48, 48, 1);
}

/* チェックマーク */

.p-top-problem__list-item::before{
content: "✔";
position: absolute;
left: 0;
top: 0;
color: rgba(56, 119, 197, 1);
font-weight: 600;
font-size: var(--fs-h4);
}

/* 強調部分 */

.p-top-problem__list-item .marker{
color: rgba(22, 65, 106, 1);
font-weight: 500;
font-size: var(--fs-h4);
}

/* 補足説明 */

.p-top-problem__list-item .note{
font-size: 14px;
color: rgba(85, 85, 85, 1);
margin-top: 4px;
line-height: var(--lh-tight);
}

/* スマホ対応 */

@media (max-width: 1000px){
.p-top-problem__contents{
flex-direction: column;
/* 縦並びに変更 */
align-items: center;
/* 中央寄せ */
}

.p-top-problem__list-item{
font-size: var(--fs-body);
padding-left: 24px;
}
}

/* ===== CTAコンテナ ===== */

.p-cta{
background: linear-gradient(135deg, rgba(247, 249, 252, 1), rgba(234, 243, 255, 1));
padding: 28px 16px;
margin: 0 0 10px 0;
}

.p-cta__wrap{
max-width: 100%;
margin: 0 auto;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(214, 230, 247, 1);
border-radius: 12px;
box-shadow: 0 6px 22px rgba(22, 65, 106, 0.08);
padding: 32px 24px;
text-align: center;
}

.p-cta__title{
font-size: var(--fs-h2);
font-weight: 600;
color: rgba(22, 65, 106, 1);
margin: 0 0 16px;
}

.p-cta__lead{
font-size: var(--fs-body);
color: rgba(53, 80, 110, 1);
margin-bottom: 20px;
}

.p-cta__buttons{
display: flex;
flex-direction: column;
/* ← PCでも縦並び */
gap: 16px;
align-items: center;
margin-bottom: 14px;
}

.p-cta__tel{
font-size: var(--fs-body);
color: rgba(53, 80, 110, 1);
margin: 0 0 8px 0;
}

/* 手続の流れを段階で示す部品。画像ではなく文字なので、拡大・検索・読み上げに対応する */

.p-steps{
list-style: none;
margin: 32px 0 48px 0;
padding: 0;
}

.p-steps__item{
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0 0 22px 0;
padding: 16px 20px;
background: rgba(247, 249, 252, 1);
border: 1px solid rgba(214, 224, 238, 1);
border-radius: 10px;
}

.p-steps__item::after{
/* 段と段をつなぐ下向きの矢羽根 */
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 9px;
height: 9px;
margin-left: -5px;
border-right: 2px solid rgba(150, 175, 205, 1);
border-bottom: 2px solid rgba(150, 175, 205, 1);
transform: rotate(45deg);
}

.p-steps__item:last-child{
margin-bottom: 0;
}

.p-steps__item:last-child::after{
content: none;
}

.p-steps__num{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(22, 65, 106, 1);
color: rgba(255, 255, 255, 1);
font-size: 0.9375rem;
line-height: 1;
}

.p-steps__body{
display: block;
padding-top: 6px;
}

.p-steps__title{
display: block;
font-weight: 500;
color: rgba(22, 65, 106, 1);
line-height: var(--lh-tight);
}

.p-steps__desc{
display: block;
margin: 8px 0 0 0;
font-size: 0.9375rem;
line-height: var(--lh-body);
color: rgba(48, 48, 48, 1);
}

.p-steps__note{
margin: -32px 0 48px 0;
font-size: 0.875rem;
line-height: var(--lh-normal);
color: rgba(95, 113, 134, 1);
}

.p-cta__note{
font-size: 0.875rem;
color: rgba(95, 113, 134, 1);
margin: 0;
}

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

.c-text-link.-lg{
display: block;
width: 100%;
max-width: 480px;
/* 存在感ある横幅 */
font-size: 20px;
/* 大きめ文字 */
padding: 18px 24px;
/* 上下左右の余白拡大 */
border-radius: 32px;
font-weight: 600;
}

/* アイコン */

.c-text-link.-phone::before{
display: inline-block;
margin-right: 12px;
font-size: 22px;
line-height: var(--lh-tight);
}

.c-text-link.-phone::before{
content: "☎";
}

/* ホバー */

.c-text-link.-white:hover{
background: rgba(15, 53, 96, 1);
transform: translateY(-3px);
}

/* ===== スマホ（ほぼ同じだが少し縮小） ===== */

@media (max-width: 600px){
.p-cta__wrap{
padding: 20px 14px;
}

.p-cta__lead{
font-size: var(--fs-body);
}

.c-text-link.-lg{
font-size: 18px;
padding: 16px 20px;
max-width: 100%;
}

.p-cta__note{
font-size: 0.8125rem;
}
}

/* フローセクション */

.p-top-flow{
background: rgba(247, 249, 252, 1);
padding: 40px 20px;
margin: 40px 0;
}

.p-top-flow__header{
text-align: center;
margin-bottom: 24px;
}

.p-top-flow__img{
flex: 0 0 45%;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
max-width: 100%;
/* 親幅を超えない */
height: auto;
/* アスペクト比を保持 */
display: block;
}

.p-top-flow__txt{
flex: 1;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: rgba(48, 48, 48, 1);
}

.p-top-flow__txt p{
margin-bottom: 14px;
}

@media (max-width: 767px){
.p-top-flow__content{
flex-direction: column;
}

.p-top-flow__img{
flex: none;
/* 固定幅を解除 */
width: 100%;
/* コンテナ幅にフィット */
max-width: 100%;
/* これで均等に縮小 */
height: auto;
/* 比率を維持して縮小 */
margin: 0 auto;
/* 中央寄せ */
}
}

/* ============================
   Tokuyaku page additions
   ============================ */

/* アクセシビリティ用にsr-only（視覚非表示） */

.sr-only{
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* 白いボックスの外枠 */

/* 中の白ボックス */

/* メリット全体紹介 */

.merit003{
background: rgba(247, 249, 252, 1);
padding: 40px 20px;
margin: 40px 2% 0 2%;
border-radius: 8px;
}

/* 内側コンテナ */

.merit003__inner{
max-width: 100%;
margin: 0 auto;
text-align: center;
}

/* コンテンツの横並び（PC時：3カラム） */

.merit003__contents{
display: flex;
gap: 24px;
justify-content: space-between;
margin-bottom: 24px;
}

/* 個別ボックス */

.merit003__content{
flex: 1;
/* 均等幅で3つ並ぶ */
background: rgba(255, 255, 255, 1);
padding: 20px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
text-align: left;
}

.merit003__content--ttl{
font-size: var(--fs-h3);
font-weight: 600;
color: rgba(22, 65, 106, 1);
margin-bottom: 12px;
line-height: var(--lh-tight);
}

.merit003__content p{
font-size: var(--fs-body);
line-height: var(--lh-body);
margin-bottom: 12px;
color: rgba(48, 48, 48, 1);
}

/* スマホ対応：縦並び */

@media (max-width: 1000px){
.merit003__contents{
flex-direction: column;
}

.merit003__content--ttl{
/* モバイルでは少し小さめ */
}

.merit003__content p{
font-size: var(--fs-body);
/* 本文もモバイル向けに調整 */
}
}

/* コンテナ */

/* スライド（全て重ねる） */

/* 画像のフィット */

/* === Brand（文字ロゴ） === */

:root{
--brand-main: rgba(22, 65, 106, 1);
/* メイン文字色（ネイビー） */
--brand-sub: rgba(95, 113, 134, 1);
/* サブ文字色（グレー寄りブルー） */

/* ===== 見出しの大きさ（4段階）と行間（5段階）=====
   ＰＣ1440px / モバイル360px の順
   h1 36/28　h2 29/22　h3 24/19　h4 20/17.5　本文 18/16 */
--fs-h1: clamp(28px, 0.74vw + 25.33px, 36px);
--fs-h2: clamp(22px, 0.65vw + 19.67px, 29px);
--fs-h3: clamp(19px, 0.46vw + 17.33px, 24px);
--fs-h4: clamp(17.5px, 0.23vw + 16.67px, 20px);
--fs-body: clamp(16px, 0.19vw + 15.33px, 18px);

/* 行間は3種類。見出しとボタンは詰め、補助文は中庸、本文は広く */
--lh-tight: 1.25;
--lh-normal: 1.6;
--lh-body: 1.8;

/* ===== レイアウト：本文ブロックの最大幅を全ページ共通で１０４０pxに統一 ===== */
--content-max: 1040px;
--content-pad: 24px;
--rule-color: rgba(225, 231, 239, 1);
--gap-section: 48px;
}

@media (max-width: 900px){
:root{
--gap-section: 28px;
}
}

/* ハンバーガーメニューについて */

/* 既存ナビはデフォルト表示、ハンバーガー群はデフォルト非表示 */

.menuboxes{
display: block;
}

.nav-mobile-wrap, .hamburger, .nav-mobile, .nav-overlay{
display: none;
}

/* ------- ハンバーガーの見た目 ------- */

.hamburger{
background: none;
padding: 0;
border: 0;
width: 40px;
height: 40px;
cursor: pointer;
display: inline-flex;
/* モバイルで使うために base を整える */
align-items: center;
justify-content: center;
z-index: 1002;
/* オーバーレイより上 */
flex-direction: column;
gap: 5px;
}

.hamburger span{
display: block;
height: 2px;
width: 24px;
background: rgba(17, 17, 17, 1);
margin: 0;
transition: transform .2s ease, opacity .2s ease;
}

/* ------- ドロワー（右からスライド） ------- */

.nav-mobile{
position: fixed;
top: 0;
right: 0;
width: 80%;
max-width: 320px;
height: 100dvh;
background: rgba(255, 255, 255, 1);
box-shadow: -2px 0 16px rgba(0, 0, 0, .12);
transform: translateX(100%);
visibility: hidden;
transition: transform .25s ease, visibility .25s ease;
z-index: 1001;
overflow-y: auto;
padding: 16px;
}

.nav-mobile__list{
list-style: none;
margin: 0;
padding: 0;
}

.nav-mobile__list li{
border-bottom: 1px solid rgba(238, 238, 238, 1);
}

.nav-mobile__list a{
display: block;
padding: 14px 8px;
color: rgba(17, 17, 17, 1);
text-decoration: none;
}

/* ------- オーバーレイ（黒幕） ------- */

.nav-overlay{
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
z-index: 1000;
}

/* ------- チェック時の開閉（CSSトグル） ------- */

.nav-toggle{
position: absolute;
opacity: 0;
pointer-events: none;
}

.nav-toggle:checked ~ .nav-mobile{
transform: translateX(0);
visibility: visible;
}

.nav-toggle:checked ~ .nav-overlay{
display: block;
}

/* ハンバーガーを「×」に変形（任意） */

.nav-toggle:checked + .hamburger span:nth-child(1){
transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked + .hamburger span:nth-child(2){
opacity: 0;
}

.nav-toggle:checked + .hamburger span:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}

/* ===== スマホ（900px以下） ===== */

@media (max-width: 1000px){
/* 既存メニューを隠す */

.menuboxes{
display: none;
}

/* ハンバーガーUIを有効化 */

.nav-mobile-wrap, .hamburger{
display: inline-flex;
}

.nav-mobile{
display: block;
}

.nav-overlay{
display: none;
}

/* チェック時に表示 */

/* 右端に押し出す：ブランドの直後にある .nav-mobile-wrap を右寄せ */

.nav-mobile-wrap{
position: fixed;
top: 10px;
right: 12px;
margin-left: auto;
z-index: 1002;
}

/* ハンバーガーは position:fixed で浮いているため、電話ボタンが
   その下に潜らないよう右側に 44px＋余白ぶんを空ける */

.site-header__tel{
margin-right: 56px;
}

/* ボタン内の三本線は左寄せ（お好みで） */

.hamburger{
background: rgba(255, 255, 255, .92);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
padding: 0;
border: 0;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
/* アイコンをボタン内で左寄せ */
cursor: pointer;
z-index: 1002;
flex-direction: column;
gap: 5px;
}

.hamburger span{
display: block;
width: 22px;
height: 2px;
background: rgba(17, 17, 17, 1);
margin: 0;
transition: transform .2s ease, opacity .2s ease;
transform-origin: center;
}
}

#access{
scroll-margin-top: 104px;
/* 追従ヘッダーの高さに合わせる（実測 71px〜97px）。
   :target の既定値と同じ値にそろえてある */
}

.eyecatch-left{
display: block;
width: auto;
height: auto;
max-width: min(100%, 600px);
max-height: 800px;
/* 縦横比を保ったまま 600×800 の枠に収める */
margin: 8px 0 16px 0;
/* 上下に余白を入れる、左は0 */
}

/* ===== Hero Slider v2 (CSS-only) 4 slides ===== */

/* ベース */

/* ビューポート：PCは12:5、スマホは16:9／高さは最大500px */

.p-hero__frame{
width: 100%;
aspect-ratio: 12 / 5;
/* PC向け：1200×500相当 */
max-height: 500px;
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, 1);
/* レターボックスの下地 */
border-radius: 0px;
}

@media (max-width: 700px){
.p-hero__frame{
aspect-ratio: 16 / 9;
}
}

/* トラック（横並び、アニメ/手動切り替えで移動） */

.p-hero__track, .p-hero__track2{
display: flex;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
will-change: transform;
transform: translateX(0%);
}

.p-hero__track{
transition: transform 600ms ease;
}

.p-hero__track li{
list-style: none;
}

/* スライド */

.p-hero__slide{
flex: 0 0 100%;
height: 100%;
position: relative;
}

/* pictureとimgがフレームにぴったり収まるように */

.p-hero__slide picture, .p-hero__slide img{
display: block;
width: 100%;
height: 100%;
}

/* 画像はフレーム全体を覆う（背景写真として使用） */

.p-hero__slide img{
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
}

/* 写真に重ねるテキストパネル（実テキスト） */

.p-hero__slide-panel{
position: absolute;
top: 0;
height: 100%;
width: 44%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4% 4%;
box-sizing: border-box;
color: rgba(255, 255, 255, 1);
}

.p-hero__slide-panel.-right{
right: 0;
background: linear-gradient(100deg, rgba(10, 20, 45, 0) 0%, rgba(8, 14, 35, 0.82) 30%, rgba(6, 11, 28, 0.94) 100%);
text-align: left;
}

.p-hero__slide-panel.-left{
left: 0;
background: linear-gradient(260deg, rgba(10, 20, 45, 0) 0%, rgba(8, 14, 35, 0.82) 30%, rgba(6, 11, 28, 0.94) 100%);
text-align: left;
}

.p-hero__slide-panel h2{
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
font-weight: 600;
font-size: clamp(20px, 14.91px + 1.59vw, 34px);
line-height: var(--lh-tight);
margin: 0 0 0.5em;
}

.p-hero__slide-panel p{
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
font-size: clamp(11px, 9.18px + 0.57vw, 16px);
line-height: var(--lh-body);
margin: 0;
color: rgba(225, 231, 239, 1);
}

@media (max-width: 700px){
.p-hero__slide-panel{
width: 68%;
padding: 6% 5%;
}
}

/* 丸ぽち群 */

/* ===== 自動再生：hero-auto が選択中のときだけ keyframes を適用 ===== */

.hero-auto:checked ~ .p-hero__frame .p-hero__track{
animation: hero-slide 34.4s infinite;
/* 8s停止 + 0.6s移動 × 4枚 */
}

/* 自動再生中、現在のスライドに対応するドットを追随させる（濃紺） */

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(1){
animation: hero-dot-a1 34.4s infinite;
}

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(2){
animation: hero-dot-a2 34.4s infinite;
}

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(3){
animation: hero-dot-a3 34.4s infinite;
}

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(4){
animation: hero-dot-a4 34.4s infinite;
}

/* 手動選択:位置固定&自動停止 */

#hero-1:checked ~ .p-hero__frame .p-hero__track{
transform: translateX(0%);
animation: none;
}

#hero-2:checked ~ .p-hero__frame .p-hero__track{
transform: translateX(-100%);
animation: none;
}

#hero-3:checked ~ .p-hero__frame .p-hero__track{
transform: translateX(-200%);
animation: none;
}

#hero-4:checked ~ .p-hero__frame .p-hero__track{
transform: translateX(-300%);
animation: none;
}

/* 手動選択中のアクティブドット */

#hero-1:checked ~ .p-hero__dots label[for="hero-1"], #hero-2:checked ~ .p-hero__dots label[for="hero-2"], #hero-3:checked ~ .p-hero__dots label[for="hero-3"], #hero-4:checked ~ .p-hero__dots label[for="hero-4"]{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

/* 動きが苦手な環境はアニメ停止 */

@media (prefers-reduced-motion: reduce){
.hero-auto:checked ~ .p-hero__frame .p-hero__track{
animation: none;
}

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(1), .hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(2), .hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(3), .hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(4){
animation: none;
}

.hero-auto:checked ~ .p-hero__dots:not(.-track2) .p-hero__dot:nth-child(1){
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}
}

/* ===== キーフレーム(横スライド) =====
   0〜23.256%: 1枚目停止(8s)
   23.256〜25%: 1→2へ移動(0.6s)
   25〜48.256%: 2枚目停止(8s)
   48.256〜50%: 2→3へ移動(0.6s)
   50〜73.256%: 3枚目停止(8s)
   73.256〜75%: 3→4へ移動(0.6s)
   75〜98.256%: 4枚目停止(8s)
   98.256〜100%: 4→1へ戻る(0.6s)
*/

@keyframes hero-slide{
0%, 23.256%{
transform: translateX(0%);
}

25%{
transform: translateX(-100%);
}

48.256%{
transform: translateX(-100%);
}

50%{
transform: translateX(-200%);
}

73.256%{
transform: translateX(-200%);
}

75%{
transform: translateX(-300%);
}

98.256%{
transform: translateX(-300%);
}

100%{
transform: translateX(0%);
}
}

/* ===== キーフレーム(丸ぽち・濃紺追随／index) ===== */

@keyframes hero-dot-a1{
0%, 23.256%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

25%, 98.256%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

100%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}
}

@keyframes hero-dot-a2{
0%, 23.256%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

25%, 48.256%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

50%, 100%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}
}

@keyframes hero-dot-a3{
0%, 48.256%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

50%, 73.256%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

75%, 100%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}
}

@keyframes hero-dot-a4{
0%, 73.256%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

75%, 98.256%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

100%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}
}

/* ===== Hero Slider v2 (CSS-only) 3slides ===== */

/* ベース */

.p-hero{
width: 100%;
margin: 0 auto;
}

.p-hero__radio{
position: absolute;
appearance: none;
opacity: 0;
pointer-events: none;
}

/* ビューポート：PCは12:5、スマホは16:9／高さは最大500px */

/* トラック（横並び、アニメ/手動切り替えで移動） */

.p-hero__track2{
transition: transform 800ms ease;
}

.p-hero__track2 li{
list-style: none;
}

/* スライド */

.p-hero__slide2{
flex: 0 0 100%;
height: 100%;
position: relative;
}

/* pictureとimgがフレームにぴったり収まるように */

.p-hero__slide2 picture, .p-hero__slide2 img{
display: block;
width: 100%;
height: 100%;
}

/* 画像はフレーム全体を覆う（背景写真として使用） */

.p-hero__slide2 img{
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
}

/* 丸ぽち群 */

.p-hero__dots{
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
margin-top: 10px;
}

.p-hero__dot{
position: relative;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(209, 213, 219, 1);
cursor: pointer;
}

/* 見た目は10pxのまま、指で押せる当たり判定だけ広げる（WCAG 2.5.8＝24px以上）。
   幅は .p-hero__dots の gap と合わせて 24px。これ以上広げると隣のドットの
   判定と重なり、あとに書かれたドットが手前に来て誤タップの原因になる。 */

.p-hero__dot::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 44px;
transform: translate(-50%, -50%);
}

/* ラジオ本体は不可視のため、キーボードで選択位置が動いたことが
   分かるよう、対応するドット側に枠を出す */

#hero-1:focus-visible ~ .p-hero__dots label[for="hero-1"], #hero-2:focus-visible ~ .p-hero__dots label[for="hero-2"], #hero-3:focus-visible ~ .p-hero__dots label[for="hero-3"], #hero-4:focus-visible ~ .p-hero__dots label[for="hero-4"]{
outline: 3px solid rgba(22, 65, 106, 1);
outline-offset: 3px;
}

/* ===== 自動再生：hero-auto が選択中のときだけ keyframes を適用 ===== */

.hero-auto:checked ~ .p-hero__frame .p-hero__track2{
animation: hero-slide2 25.8s infinite;
/* 8s停止 + 0.6s移動 × 3枚 */
}

/* 自動再生中、現在のスライドに対応するドットを追随させる（濃紺） */

.hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(1){
animation: hero-dot-b1 25.8s infinite;
}

.hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(2){
animation: hero-dot-b2 25.8s infinite;
}

.hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(3){
animation: hero-dot-b3 25.8s infinite;
}

/* 手動選択:位置固定&自動停止 */

#hero-1:checked ~ .p-hero__frame .p-hero__track2{
transform: translateX(0%);
animation: none;
}

#hero-2:checked ~ .p-hero__frame .p-hero__track2{
transform: translateX(-100%);
animation: none;
}

#hero-3:checked ~ .p-hero__frame .p-hero__track2{
transform: translateX(-200%);
animation: none;
}

/* 手動選択中のアクティブドット */

#hero-1:checked ~ .p-hero__dots label[for="hero-1"], #hero-2:checked ~ .p-hero__dots label[for="hero-2"], #hero-3:checked ~ .p-hero__dots label[for="hero-3"]{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

/* 動きが苦手な環境はアニメ停止 */

@media (prefers-reduced-motion: reduce){
.hero-auto:checked ~ .p-hero__frame .p-hero__track2{
animation: none;
}

.hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(1), .hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(2), .hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(3){
animation: none;
}

.hero-auto:checked ~ .p-hero__dots.-track2 .p-hero__dot:nth-child(1){
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}
}

/* ===== キーフレーム(横スライド) =====
   0〜31.008%: 1枚目停止(8s)
   31.008〜33.333%: 1→2へ移動(0.6s)
   33.333〜64.341%: 2枚目停止(8s)
   64.341〜66.667%: 2→3へ移動(0.6s)
   66.667〜97.674%: 3枚目停止(8s)
   97.674〜100%: 4→1へ戻る(0.6s)
*/

@keyframes hero-slide2{
0%, 31.008%{
transform: translateX(0%);
}

33.333%{
transform: translateX(-100%);
}

64.341%{
transform: translateX(-100%);
}

66.667%{
transform: translateX(-200%);
}

97.674%{
transform: translateX(-200%);
}

100%{
transform: translateX(0%);
}
}

/* ===== キーフレーム(丸ぽち・濃紺追随／mba) ===== */

@keyframes hero-dot-b1{
0%, 31.008%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

33.333%, 97.674%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

100%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}
}

@keyframes hero-dot-b2{
0%, 31.008%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

33.333%, 64.341%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

66.667%, 100%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}
}

@keyframes hero-dot-b3{
0%, 64.341%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}

66.667%, 97.674%{
background: rgba(22, 65, 106, 1);
transform: scale(1.2);
}

100%{
background: rgba(209, 213, 219, 1);
transform: scale(1);
}
}

/* --- MBAバナー：ホバーで浮き上がる --- */

.p-gyoumu-featured-service__image{
border-radius: 12px;
/* 角丸（任意） */
overflow: hidden;
/* 拡大時のはみ出し防止 */
}

.p-gyoumu-featured-service__image a{
display: block;
transition: transform .35s ease, box-shadow .35s ease;
will-change: transform;
}

.p-gyoumu-featured-service__image img{
display: block;
width: 100%;
height: auto;
transform: translateZ(0);
/* 描画最適化 */
transition: transform .35s ease, filter .35s ease;
}

/* マウスホバー / キーボードフォーカスで持ち上げ＋画像を少し拡大 */

.p-gyoumu-featured-service__image a:hover, .p-gyoumu-featured-service__image a:focus-visible{
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.p-gyoumu-featured-service__image a:hover img, .p-gyoumu-featured-service__image a:focus-visible img{
transform: scale(1.03);
filter: brightness(1.03);
}

/* タップ時の軽い反応（任意） */

.p-gyoumu-featured-service__image a:active{
transform: translateY(-2px);
}

/* 動きが苦手なユーザー配慮 */

@media (prefers-reduced-motion: reduce){
.p-gyoumu-featured-service__image a, .p-gyoumu-featured-service__image img{
transition: none;
}
}

/* Footer: サイトマップリンクを左寄せ */

.l-footer__sitemap{
margin: 12px 0 0;
padding: 12px 0;
text-align: left;
/* ← centerをleftに */
background: transparent;
}

.p-footer-sitemap__link{
font-size: 14px;
text-decoration: underline;
display: inline-block;
padding: 3px 0;
}

@media (max-width: 700px){
.p-footer-sitemap__link{
font-size: 13px;
}
}

.u-block{
display: block;
}

/* 折り返し禁止。フッターのクイックナビで「ＭＢＡ経営コンサルティング」が
   「…コンサルティ／ング」と切れるため、後半をこれで括って「経営」の後ろで
   折り返させる（<br> は使わない規約のため） */

.u-nowrap{
white-space: nowrap;
}

/* 末尾の <br> が作っていた空行1行を再現する（ゼロ幅スペースで行ボックスを生成） */

/* 空の <p></p> が margin の相殺で作っていた段落1つ分の余白（.c-article__body p と同値） */

.u-gap-top{
margin-top: 1.2rem;
}

/* 事務所情報（住所）の行グループ間の余白 */

.p-office-address__group + .p-office-address__group{
margin-top: 1.2rem;
}

/* width/height 属性で縦横比を確保しつつ、幅だけ CSS 指定の箇所で縦に伸びないようにする */

img{
height: auto;
}

/* 最終更新日の表示（フッター直前・左寄せ） */

/* 料金表の見出し（表の左上に小さめの文字で表示） */
.p-fee__caption{
caption-side: top;
text-align: left;
font-size: 0.9rem;
font-weight: 500;
color: rgba(48, 48, 48, 1);
padding: 0.9em 0 0.6em 1em;
line-height: var(--lh-tight);
}

/* 記事末（執筆者・関連リンク・更新日）の左右余白を本文セクションに揃える */
.u-article-footer{
max-width: var(--content-max);
margin: 0 auto;
padding: 0 24px;
}

/* 本文ブロックの左右余白を他セクションに揃える */
.u-pad{
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}

/* =========================================================
   10) 共通レイアウトの統一と、未定義クラスの補完
   ========================================================= */

/* 本文セクションはすべて同じ最大幅・同じ中央寄せにそろえる */

/* 背景・枠つきのブロックも、外枠を同じ幅にそろえる（上下でガタつかせない）。
   .p-home-service／.p-home-flow／.p-home-column はＨＴＭＬで必ず .p-section と併記されているため、ここには含めない */

.p-section, .p-cta, .p-top-flow, .p-top-problem, .merit003, .p-bengoshi-intro, .p-gyoumu-featured-service, .p-home-fee, .p-home-faq, .p-lawyer-sec, .faq-item{
width: 100%;
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

/* セクション内側のラッパは親いっぱいに広げる */

.container, .container--fluid, .p-section__body{
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

/* 見出しの中央寄せ修飾子 */

.-center{
text-align: center;
}

/* 黄色のラインマーカー（ＨＴＭＬ側の marker_yellow に対応） */

.marker_yellow{
font-weight: 600;
background-image: linear-gradient(transparent 62%, rgba(255, 235, 59, 0.8) 0);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 .06em;
}

/* 強調（太字）ユーティリティ */

.s-bold{
font-weight: 600;
}

/* ブランド色の文字 */

.u-font--main{
color: var(--brand-main);
font-weight: 600;
}

/* merit003 の見出し帯 */

.merit003__header{
text-align: center;
margin-bottom: 20px;
}

/* 弁護士費用ページの注記リスト */

.p-fee__notes{
width: 100%;
max-width: var(--content-max);
margin: 12px auto 24px auto;
padding-left: 1.4em;
box-sizing: border-box;
}

.p-fee__notes li{
margin-bottom: 6px;
}

/* 弁護士費用表のセル（既存の .prtable の配色に合わせる） */

.prtable td.prtablecolumun{
white-space: normal;
text-align: left;
}

/* 見出し枠：タイトルは中央のまま、本文は左寄せ */

.p-section__header p:not(.p-section__subtitle):not(.p-hero__lead):not(.-center){
text-align: left;
}

/* アクセスページの地図写真 */

.mapphoto{
margin: 16px auto;
text-align: center;
}

.mapphoto img{
display: block;
width: 50%;
/* 親要素（figure.mapphoto）の75%幅 */
max-width: 100%;
height: auto;
/* 高さは自動＝元画像の縦横比をそのまま維持 */
aspect-ratio: auto;
/* 他のルールで比率が固定されても打ち消す */
object-fit: contain;
/* 万一サイズが固定されても引き伸ばさない保険 */
margin-left: auto;
margin-right: auto;
/* 左右autoでセンタリング */
border-radius: 8px;
}

.mapphoto figcaption{
margin-top: 8px;
}

/* 事務所の住所表記 */

.p-office-address{
font-style: normal;
line-height: var(--lh-body);
}

/* 縦並びのフレックス */

.c-flex--column{
display: flex;
flex-direction: column;
}

/* ヒーロー直下のリード文 */

.p-hero__lead{
width: 100%;
max-width: var(--content-max);
margin: 16px auto 0 auto;
text-align: center;
}

/* 狭い画面では左右余白を本文パディングにそろえる */

@media (max-width: 1000px){
.p-section, .p-home-service, .p-cta, .p-top-flow, .p-top-problem, .merit003, .p-bengoshi-intro, .p-gyoumu-featured-service, .p-home-flow, .p-home-fee, .p-home-faq, .p-home-column{
max-width: 100%;
}
}

/* ===== 印刷用 =====
   ブラウザは既定で背景色を印刷しないため、紺色ボタンの白抜き文字が
   ほぼ読めなくなる。印刷時は文字色を戻し、画面専用の要素を落とす。 */

@media print{
.site-header{
position: static;
}

.nav-mobile-wrap, .nav-mobile, .nav-overlay, .p-hero__dots, .menuboxes{
display: none;
}

/* 紺地・白抜きの電話ボタンは、背景が出ない前提で黒文字の枠線表示にする */

.site-header__tel, .p-footer-cta__btn, .btn.-primary{
background: none;
color: rgba(0, 0, 0, 1);
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 1);
}

.site-header__tel-icon, .p-footer-cta__btn .icon{
filter: none;
}

/* 紙面では番号を必ず出す（画面では狭い幅で伏せている） */

.site-header__tel-num{
display: inline;
}

/* カード化した表は紙では通常の表に戻す */

.prtable{
display: table;
table-layout: auto;
}

.prtable thead{
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
}

.prtable tbody{
display: table-row-group;
}

.prtable tr{
display: table-row;
border: none;
box-shadow: none;
}

.prtable td{
display: table-cell;
}

.prtable td.prtablecolumun::before{
content: none;
}

.prtable thead th, .prtable td.prtablefirstcolumun{
background: none;
color: rgba(0, 0, 0, 1);
border: 1px solid rgba(0, 0, 0, .4);
}

.prtable td{
border: 1px solid rgba(0, 0, 0, .4);
}

/* 表と見出しはページ途中で割らない */

table, figure{
break-inside: avoid;
}

h1, h2, h3{
break-after: avoid;
}

/* 紙にはリンク先が残らないので、本文リンクのURLを併記する */

main a[href^="http"]::after{
content: "（" attr(href) "）";
font-size: 10pt;
word-break: break-all;
}
}

@media (max-width: 700px){
.p-steps__item{
gap: 12px;
padding: 14px 14px;
}

.p-steps__num{
width: 34px;
height: 34px;
font-size: 0.875rem;
}

.p-steps__body{
padding-top: 4px;
}
}