と同じ通常の折り返し（右端まで詰めて折り返す）に統一する */
.voice-card h3 {
position: relative;
z-index: 1;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.45;
margin-bottom: 16px;
text-wrap: wrap;
text-align: left;
}
.voice-card p { position: relative; z-index: 1; color: #555555; font-size: 0.8rem; line-height: 1.85; flex: 1; margin-bottom: 22px; text-align: left; }
.voice-card__who { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.voice-card__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--navy);
color: var(--on-navy);
font-family: var(--font-mincho);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.voice-card__meta { display: flex; flex-direction: column; line-height: 1.4; text-align: left; }
.voice-card__name { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.voice-card__role { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 900px) { .voice-grid { grid-template-columns: 1fr; } }
/* ===================================================================
NEWS — お知らせ（WP投稿の最新3件、日付とタイトルのみ）
=================================================================== */
/*
* 左に見出し（NEWS／お知らせ）、右に一覧という2カラム構成。
* 見出しの土台（eyebrow行）と一覧の土台（ul）をそれぞれ独立したグリッド行に置き、
* 「お知らせ」の見出し行だけを一覧の1行目と同じ行に並べることで、
* 両者のベースラインが揃って見えるようにしている。
*/
.news-grid {
display: grid;
grid-template-columns: minmax(180px, 240px) 1fr;
column-gap: clamp(32px, 5vw, 64px);
}
.news-grid__eyebrow { grid-column: 1; grid-row: 1; }
.news-grid__heading {
grid-column: 1;
grid-row: 2;
align-self: start;
font-size: clamp(1.6rem, 2.6vw, 2.3rem);
line-height: 1.55;
margin: 0;
/* 一覧1行目のテキストとベースラインを揃えるための微調整（見た目で追ってpx調整可） */
padding-top: 8px;
}
.news-list {
grid-column: 2;
grid-row: 2;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.news-list__item { border-bottom: 1px solid var(--line); }
.news-list__link {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 28px);
padding: 22px 4px;
color: inherit;
transition: color 160ms ease, background-color 160ms ease;
}
.news-list__link:hover { background: var(--panel); }
/* 日付は固定幅の列にして列内で中央揃えにし、タイトルは左揃えのまま残す */
.news-list__date {
flex: none;
width: 96px;
text-align: center;
font-family: var(--font-mincho);
font-size: 0.86rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.news-list__title { flex: 1; font-size: 0.92rem; color: var(--text); line-height: 1.6; }
.news-list__link .icon { flex: none; color: var(--terracotta); transition: transform 160ms ease; }
.news-list__link:hover .news-list__title { color: var(--terracotta); }
.news-list__link:hover .icon { transform: translateX(4px); }
@media (max-width: 700px) {
.news-grid { grid-template-columns: 1fr; row-gap: 8px; }
.news-grid__eyebrow { grid-column: 1; grid-row: 1; }
.news-grid__heading { grid-column: 1; grid-row: 2; padding-top: 0; }
.news-list { grid-column: 1; grid-row: 3; margin-top: 20px; }
}
@media (max-width: 560px) {
.news-list__link { flex-wrap: wrap; gap: 4px 16px; }
.news-list__title { flex-basis: 100%; order: 1; }
}
/* トップのNEWS：一覧ページへのリンク（一覧の右下） */
.news-grid__more { grid-column: 2; grid-row: 3; margin-top: 24px; text-align: right; }
/* お知らせ一覧へのリンクは主役の一覧を邪魔しないよう、小さく・淡い色の控えめな表示にする */
.news-grid__more .link-more {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-muted);
border-bottom-color: transparent;
}
.news-grid__more .link-more:hover { color: var(--text); border-bottom-color: var(--line); }
@media (max-width: 700px) {
.news-grid__more { grid-column: 1; grid-row: 4; }
}
/* ===================================================================
PAGE — お知らせ一覧（home.php）
=================================================================== */
.news-archive { max-width: 860px; }
.news-archive__empty { text-align: center; color: var(--text-muted); }
/* ページ送り（the_posts_pagination の出力） */
.news-archive .pagination { margin-top: 48px; }
.news-archive .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.news-archive .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid var(--line);
background: var(--surface);
font-family: var(--font-mincho);
font-size: 0.92rem;
color: var(--navy);
transition: border-color 160ms ease, color 160ms ease;
}
.news-archive a.page-numbers:hover { border-color: var(--terracotta); color: var(--terracotta); }
.news-archive .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.news-archive .page-numbers.dots { border: 0; background: transparent; }
/* ===================================================================
PAGE — お知らせ記事（single.php）
=================================================================== */
.news-single { max-width: 860px; }
.icon--flip { transform: scaleX(-1); }
/*
* 記事タイトルは固定ページ名より長いため、ヒーロー見出しを一段小さくして横幅を広げ、
* 文節の切れ目で折り返す（「リニ／ューアル」のような単語途中の改行を防ぐ）。
*/
.single-post .page-hero h1 {
max-width: 32em;
font-size: clamp(1.6rem, 2.8vw, 2.3rem);
line-height: 1.55;
word-break: keep-all;
word-break: auto-phrase;
overflow-wrap: anywhere;
}
/* パンくず：長い記事タイトルでも「トップ」「お知らせ」は潰さず、記事名だけを「…」で省略する */
.breadcrumb a { flex: none; white-space: nowrap; }
.breadcrumb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-article__meta {
padding-bottom: 20px;
margin-bottom: 36px;
border-bottom: 1px solid var(--line);
}
.news-article__date {
font-family: var(--font-mincho);
font-size: 0.95rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
/* 本文（ブロックエディタで入力した内容）の書式 */
.entry-content { font-size: 0.98rem; line-height: 2; color: var(--text); }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 {
margin-top: 2.4em;
padding-bottom: 0.5em;
border-bottom: 1px solid var(--line);
font-size: clamp(1.3rem, 2.2vw, 1.55rem);
line-height: 1.6;
}
.entry-content h3 {
margin-top: 2em;
padding-left: 14px;
border-left: 3px solid var(--navy);
font-size: 1.15rem;
line-height: 1.6;
}
.entry-content h4 { margin-top: 1.8em; font-size: 1.02rem; line-height: 1.6; }
.entry-content a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.2em; }
.entry-content a:hover { color: var(--terracotta-deep); }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content img { height: auto; border-radius: var(--radius); }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption { margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.entry-content blockquote {
margin-left: 0;
margin-right: 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--line);
color: var(--text-muted);
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.entry-content th,
.entry-content td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content th { background: var(--panel); font-weight: 700; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
/* 前後の記事・一覧へ戻る */
.news-pager {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
}
.news-pager__cell--next { text-align: right; }
.news-pager__link { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; color: var(--text); transition: color 160ms ease; }
.news-pager__cell--next .news-pager__link { align-items: flex-end; }
.news-pager__label {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--text-muted);
}
.news-pager__title {
font-size: 0.88rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-pager__link:hover { color: var(--terracotta); }
@media (max-width: 700px) {
.news-pager { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.news-pager__back { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
/* ===================================================================
ACCESS
=================================================================== */
/*
* 地図側の縦の起点・終点を、テキスト側（タイトル上端〜お電話カード下端）に合わせるため、
* 英字見出し（ACCESS）だけをグリッドの外に出して2カラム分の幅で独立させ、
* 残る2カラム（access-info / access-visual）を align-items:stretch で同じ高さに揃える。
* access-visual側は縦flexにして地図をflex-growさせることで、
* 「地図上端 = タイトル上端」「写真下端 = お電話カード下端」を自動的に一致させる。
*
* 英字見出し(ACCESS)と見出しの間隔を他セクション（16px）と揃えるため、
* グリッドのrow-gapは0にし、代わりにaccess-eyebrowのmargin-bottomで間隔を作る。
* （access-heading側にmargin-topを付けると access-info だけが下がり、
* 地図側との「上端揃え」がずれてしまうため）
*/
.access-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(32px, 5vw, 64px);
row-gap: 0;
align-items: stretch;
}
/* 写真群（access-visual）を左、テキスト側（access-info）を右に配置する */
.access-info { order: 2; }
.access-visual { order: 1; }
/* CLIENT VOICESと同じ右寄せの体裁（section-label--right）に合わせる */
.access-eyebrow { grid-column: 1 / -1; justify-self: end; margin-bottom: 16px; }
.access-heading { max-width: 480px; margin-left: auto; text-align: right; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.6; }
.access-lead { margin: 18px 0 0 auto; max-width: min(450px, 100%); text-align: left; color: var(--text-muted); }
/* 箱で囲むのをやめ、項目の間を極細のネイビー系の線で区切る「抜け感」のあるリストに */
.access-list { margin-top: 30px; }
.access-list__item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; }
.access-list__item:first-child { padding-top: 0; }
.access-list__item:not(:first-child) { border-top: 1px solid var(--line); }
/* 白丸を引き算し、アイコンの線自体をネイビーにしてテキスト脇に添えるだけにする */
.access-list__icon {
flex: none;
width: 14px;
height: 14px;
margin-top: -5px;
color: var(--navy);
}
.access-list__icon .icon { width: 100%; height: 100%; }
.access-list__label { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.access-list__value { font-size: 0.92rem; color: var(--text); line-height: 1.7; }
/* 地図を上、その下に写真2枚を並列。地図をflex-growさせ、写真下端をaccess-infoの下端に揃える */
.access-visual { display: flex; flex-direction: column; gap: 22px; }
.access-map { position: relative; flex: 1 1 auto; border: 1px solid var(--line); overflow: hidden; }
.access-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
pointer-events: none;
/* Googleマップの派手な色味を落ち着かせる */
filter: grayscale(80%) sepia(10%);
}
/*
* 地図の上に立てるテラコッタ色のオリジナルピン（事務所案内ページのOFFICE INFOマップと同じ意匠）。
* Googleマップ埋め込み（無料版）はデフォルトの赤ピンを自前色に変更できないため、
* 中央にオーバーレイして統一感を持たせる。
*/
.map-pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -92%);
filter: drop-shadow(0 4px 6px rgba(16, 25, 40, 0.35));
pointer-events: none;
}
.map-pin svg { display: block; width: 34px; height: 34px; }
/*
* 無料の地図埋め込みはドラッグ・ズームができてしまい、動かすとピン（CSSオーバーレイ）だけが
* 中央に固定されたまま地図がズレてしまう。iframe自体の操作を無効化して「初期位置で固定された
* 静止画のような地図」にし、代わりにクリックで別タブの本物のGoogleマップを開けるようにする。
*/
.map-link-overlay {
position: absolute;
inset: 0;
z-index: 2;
cursor: pointer;
}
.access-photos { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* min-width:0がないと、折り返さないキャプションの分だけグリッド列が広がり、写真が縮んでしまう */
.access-photos__item { margin: 0; min-width: 0; }
.access-photos__item figcaption {
margin-top: 12px;
font-family: var(--font-mincho);
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.6;
/* 写真の幅で折り返させず、必要な分だけ右にはみ出して1行で見せる */
white-space: nowrap;
}
@media (max-width: 820px) {
.access-grid { grid-template-columns: 1fr; }
.access-info { order: initial; }
.access-visual { order: initial; display: block; }
.access-map { flex: none; aspect-ratio: 16 / 10; }
.access-eyebrow { justify-self: start; }
.access-heading { margin-left: 0; max-width: none; text-align: left; }
.access-lead { margin-left: 0; max-width: none; }
}
/* ===================================================================
CLOSING CTA BAND
=================================================================== */
/*
* 「箱の中の箱」をやめてフルブリード化：ネイビー背景をセクション自体に持たせ、
* 下側の余白（アイボリー）を無くしてフッター（同じネイビー）と直接つなげる。
*/
.cta-band {
padding: clamp(56px, 8vw, 96px) 0 0;
background: var(--navy);
color: var(--on-navy);
}
.cta-band__inner {
position: relative;
overflow: hidden;
padding-bottom: 90px;
display: grid;
/* ボタン等（わき役の0.9fr）を左、テキスト群（主役の1.1fr）を右に配置する */
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(32px, 5vw, 56px);
align-items: center;
}
.cta-band__copy { position: relative; z-index: 1; order: 2; text-align: right; }
.cta-band__copy .eyebrow { justify-content: flex-end; }
/* タイトル・説明文の幅・余白・書式は、右寄せの他セクション（CLIENT VOICESのsection-label--right）と統一 */
.cta-band__copy h2 { color: var(--on-navy); font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-top: 16px; line-height: 1.55; max-width: 480px; margin-left: auto; }
.cta-band__desc { margin: 18px 0 0 auto; color: var(--on-navy-muted); max-width: min(450px, 100%); text-align: left; }
/*
* 主役（フォーム＝テラコッタの大きな横長ボタン）とわき役（電話・LINEの2カラム）で
* 階層をつくる。わき役2つは「透明背景＋極細の白枠」のゴーストボタンに統一し、
* LINEの公式グリーンはアイコンの線だけに残して、ボタン面のベタ塗りはやめる。
*/
.cta-band__actions { position: relative; z-index: 1; order: 1; display: grid; gap: 14px; }
.cta-band__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cta-tile {
display: flex;
align-items: center;
gap: 16px;
background: transparent;
border: 1px solid var(--on-navy-line);
/*
* 上段（フォーム）・下段（電話／LINE）の高さを揃えるため、全ボタン共通のpaddingに加えて
* min-heightも共通化し、テキストの長さに関わらず3つとも同じ高さになるようにする。
*/
padding: 26px 28px;
min-height: 100px;
/* 強み・パートナーの丸い装飾に呼応する、CTAボタンだけの少し強めの角丸 */
border-radius: 8px;
color: var(--on-navy);
transition: background-color 180ms ease, border-color 180ms ease;
}
.cta-tile:hover { background: rgba(247, 243, 235, 0.08); border-color: var(--on-navy); }
.cta-tile__icon {
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(247, 243, 235, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.cta-tile__text { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.cta-tile__label { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--on-navy-muted); margin-bottom: 4px; }
.cta-tile__value { font-family: var(--font-mincho); font-size: 1.1rem; font-weight: 600; }
/* 電話番号は数字の途中で折り返されると読みにくいため、改行のみ禁止する（サイズはLINE側と揃えたまま） */
.cta-tile--phone .cta-tile__value { white-space: nowrap; }
/* 主役：フォームへのCTA。テラコッタで塗って目立たせる（高さは他の2つと共通） */
.cta-tile--primary {
background: var(--terracotta);
border-color: var(--terracotta);
/* アイコン＋テキストを1つの塊として、ボタン中央に寄せる */
justify-content: center;
gap: 12px;
}
.cta-tile--primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.cta-tile--primary .cta-tile__icon { background: rgba(255, 249, 244, 0.18); }
.cta-tile--primary .cta-tile__text { flex: none; }
.cta-tile--primary .cta-tile__label { color: rgba(255, 249, 244, 0.75); }
.cta-tile--primary .cta-tile__value { font-size: 1.22rem; }
@media (max-width: 820px) {
.cta-band__inner { grid-template-columns: 1fr; }
/* 1カラムに積む際は、ボタンより先に見出し・説明文を読めるよう並び順を戻す */
.cta-band__copy { order: 1; text-align: left; }
.cta-band__copy .eyebrow { justify-content: flex-start; }
.cta-band__copy h2 { margin-left: 0; max-width: none; }
.cta-band__desc { margin-left: 0; max-width: none; }
.cta-band__actions { order: 2; }
}
@media (max-width: 480px) {
.cta-band__secondary { grid-template-columns: 1fr; }
}
/* ===================================================================
FOOTER
=================================================================== */
.site-footer {
background: var(--navy);
color: var(--on-navy-muted);
/* CTAとの境目に、ごく薄い横一本の線を引いて区切る */
border-top: 1px solid rgba(247, 243, 235, 0.1);
/*
* 上辺（区切り線）からブランド名（鵜飼司法書士事務所）の上端までの余白を、
* 「デラドーラ名駅3F」の底面から下線（.footer-gridのborder-bottom）までの
* 余白（.footer-gridのpadding-bottom: 36px）と一致させる。
*/
padding: 36px 0 28px;
}
.footer-grid {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
padding-bottom: 36px;
border-bottom: 1px solid var(--on-navy-line);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer-brand .brand-text { color: var(--on-navy); font-size: 1.7rem; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-contact li { font-size: 0.86rem; color: var(--on-navy-muted); line-height: 1.7; }
.footer-contact a { color: var(--on-navy); }
.footer-contact a:hover { color: var(--terracotta); }
/* 3つのリンクを右寄せでコンパクトに横並びに */
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: 8px; }
.footer-nav a { font-family: var(--font-gothic); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--on-navy); font-weight: 700; }
.footer-nav a:hover { color: var(--terracotta); }
.footer-bottom {
margin-top: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 0.74rem;
color: var(--on-navy-muted);
}
.footer-bottom__privacy { color: var(--on-navy-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom__privacy:hover { color: var(--on-navy); }
@media (max-width: 620px) {
.footer-grid { flex-direction: column; }
.footer-bottom { flex-direction: column; gap: 10px; }
}
/* ===================================================================
PAGE HERO（下層ページ共通・今後の事務所案内／業務案内／お問い合わせで使用）
=================================================================== */
.page-hero {
position: relative;
/* お問い合わせページ（説明文3行）を基準に、固定ページ全ページで高さを統一 */
min-height: 460px;
display: flex;
align-items: center;
color: var(--on-navy);
background: var(--navy);
overflow: hidden;
padding-top: 96px;
}
.page-hero__scene { position: absolute; inset: 0; }
.page-hero__content { position: relative; z-index: 2; padding: 40px 0; }
.page-hero h1 {
color: var(--on-navy);
font-size: clamp(2rem, 3.6vw, 3rem);
margin-top: 18px;
max-width: 20ch;
}
/* 説明文の行数(2行/3行)がページごとに違っても高さが変わらないよう、常に3行分の領域を確保する */
.page-hero__desc { margin-top: 20px; color: var(--on-navy-muted); max-width: 52ch; min-height: calc(1.9em * 3); }
/* トップページのヒーローと同じ配色に統一（文字は淡いアイボリー、横線はテラコッタ） */
.page-hero .eyebrow { color: var(--on-navy-muted); }
/* 下層ページのヒーローは写真の上に乗るため、トップのヒーローと同じ2pxにして視認性を確保する */
.page-hero .eyebrow::before { background: var(--terracotta); height: 2px; opacity: 0.9; }
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--on-navy-muted);
margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--terracotta); }
.breadcrumb span { color: var(--on-navy); }
/* ===================================================================
PAGE — 事務所案内（OFFICE INFO / DIRECTOR PROFILE / CAREER TIMELINE）
=================================================================== */
/* --- OFFICE INFO --- */
.office-grid {
margin-top: clamp(36px, 5vw, 56px);
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(32px, 4vw, 48px);
/* 写真ブロックの下端と、表の最後の横線の位置をぴったり揃えるため両カラムを同じ高さに */
align-items: stretch;
}
/* 上下の隙間（row-gap）と左右の隙間（column-gap）を同じ16pxで明示し、数値のブレをなくす */
.office-photos { display: grid; grid-template-columns: 1fr 1fr; row-gap: 16px; column-gap: 16px; }
.office-photos__main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.office-photos .photo-slot:not(.office-photos__main) { aspect-ratio: 4 / 3; }
/*
* ベージュの「箱」をやめ、項目間を極細のネイビー系の線（通常より薄いopacity）で
* 区切るだけのエディトリアルな表組みにする（ACCESSセクションのリストと同じ考え方）。
* office-cardをflex columnにし、office-list（flex:1）内の行をspace-betweenで
* 均等配置することで、右カラムの高さが左の写真ブロックと同じになっても、
* 最後の行の下線が右カラムの下端＝写真ブロックの下端に自動的に一致する。
*/
.office-card { display: flex; flex-direction: column; }
.office-list { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
/* 項目名の列を狭め、内容（dd）を左に寄せて視線移動の距離を縮める */
.office-list__row { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 20px 0; }
.office-list__row:not(:first-child) { border-top: 1px solid rgba(28, 43, 69, 0.08); }
.office-list__row dt { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); padding-top: 2px; }
.office-list__row dd { margin: 0; font-size: 0.88rem; color: var(--text); line-height: 1.7; }
.office-list__row dd a { color: var(--terracotta); text-underline-offset: 0.2em; }
.office-list__row dd a:hover { color: var(--terracotta-deep); }
/* 地図はcontainerの外に配置し、画面幅いっぱいに広げて空間のスケール感を出す */
.office-map-full {
position: relative;
margin-top: clamp(48px, 6vw, 64px);
height: clamp(320px, 38vw, 480px);
}
.office-map-full iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
pointer-events: none;
/*
* サイトの「ネイビー×アイボリー」の世界観に合わせ、Googleマップ標準の原色から
* 彩度を大きく落とし、淡いグレー〜アイボリー寄りのトーンにする。
*/
filter: grayscale(95%) sepia(12%) brightness(1.05) contrast(0.94);
}
/* Google標準ピンの代わりに、サイトのアクセントカラーで自前のピンを1本だけ立てる */
.office-map-full__pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -92%);
filter: drop-shadow(0 4px 6px rgba(16, 25, 40, 0.35));
pointer-events: none;
}
.office-map-full__pin svg { display: block; width: 42px; height: 42px; }
@media (max-width: 900px) {
.office-grid { grid-template-columns: 1fr; }
.office-card { margin-top: clamp(32px, 4vw, 48px); }
}
/*
* --- DIRECTOR PROFILE ---
* テンプレ的な「写真＋2カラム」構成をやめ、写真を横幅いっぱいに大きく見せたあと、
* ご挨拶（メッセージ）をゆったりした1カラムで読ませる構成にしている。
* 見出し・肩書は中央揃え、本文は読みやすさを優先して左揃えのまま。
*/
/* 掲載順：①英字見出し ②氏名・肩書 ③写真（横幅いっぱい） ④キャッチコピー・本文 */
.profile-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.profile-intro .eyebrow { justify-content: center; }
.profile-photo-full { margin-top: clamp(40px, 6vw, 64px); }
.profile-photo-full .photo-slot { aspect-ratio: 16 / 7; }
.profile-message { max-width: 760px; margin: 0 auto; text-align: center; }
.profile-message .eyebrow { justify-content: center; }
.profile-name { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin-top: 18px; }
.profile-role { margin-top: 10px; font-size: 0.86rem; color: var(--text-muted); letter-spacing: 0.03em; }
/* キャッチコピー：上下の余白を広めに取り、サイズ・太さも一段強めてジャンプ率を出す */
.profile-message__heading {
margin-top: 64px;
font-size: clamp(1.55rem, 2.4vw, 1.95rem);
font-weight: 700;
line-height: 1.7;
color: var(--navy);
}
/* 本文ブロック：幅を700〜800px程度に制限し、見出しとは別にブロックごと中央配置。テキストは左揃え */
.profile-text {
margin-top: 56px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
display: grid;
gap: 18px;
text-align: left;
color: var(--text-muted);
line-height: 2;
}
@media (max-width: 700px) {
.profile-photo-full .photo-slot { aspect-ratio: 4 / 3; }
}
/* --- CAREER TIMELINE ---
* 中央に年表の縦線を通し、年号とカードを左右交互に配置するジグザグレイアウト。
* 3つの基準で位置を決めている：
* 1) 西暦テキストの上辺 = カードの枠の上辺（どちらもmargin-top:0で行の最上部に揃える）
* 2) ドットの中央 = 西暦テキスト（年数の数字部分）の底面
* 3) 前のカードの底面から次のカードの上辺までを20px（timelineのgapのみで作り、
* timeline__item自体には上下paddingを持たせない）
*/
.timeline {
position: relative;
max-width: 980px;
margin: clamp(48px, 6vw, 64px) auto 0;
/* 一番上のドットの、さらに上に見える線の分だけ余白を追加する */
padding-top: 20px;
display: grid;
gap: 30px;
}
.timeline::before {
content: "";
position: absolute;
left: 50%;
/*
* フェード幅を%指定にしていたため、年表が長くなるほどフェード区間の実際の
* 長さ（px換算）も伸びてしまい、最初のドット付近まで薄いままになっていた。
* px固定にして、上下端とも8px程度の短いフェードに留める。
* 上端は「新設したpadding-top（20px）」の少し内側から線を出し、
* 1つ目のドットの上に約20pxのはっきり見える線ができるようにしている。
*/
top: 20px;
bottom: 6px;
width: 2px;
background: linear-gradient(
to bottom,
transparent 0px,
var(--line) 8px,
var(--line) calc(100% - 8px),
transparent 100%
);
transform: translateX(-50%);
}
.timeline__item {
position: relative;
display: grid;
grid-template-columns: 1fr 24px 1fr;
align-items: start;
column-gap: clamp(20px, 3vw, 36px);
}
/*
* 年号・ドット・カードの3つを、左右どちらの並びでも確実に同じグリッド行（1行目）に
* 固定する。列位置（grid-column）だけを --b で入れ替え、行位置は常にrow:1で統一する
* ことで、auto-placementの挙動に左右されず上端が揃うようにしている。
*/
.timeline__dot {
grid-row: 1;
grid-column: 2;
justify-self: center;
/* 西暦の数字（2rem・line-height:1＝高さ32px）の底面に、ドット（11px）の中央を合わせる */
margin-top: 26.5px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--navy);
}
.timeline__dot--highlight { background: var(--terracotta); box-shadow: 0 0 0 4px rgba(201, 111, 68, 0.18); }
.timeline__year { grid-row: 1; grid-column: 1; display: grid; gap: 2px; text-align: right; }
.timeline__card { grid-row: 1; grid-column: 3; }
.timeline__item--b .timeline__year { grid-column: 3; text-align: left; }
.timeline__item--b .timeline__card { grid-column: 1; }
.timeline__year-num { font-family: var(--font-mincho); font-size: 2rem; line-height: 1; color: var(--navy); font-weight: 600; }
.timeline__year-tag { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-muted); }
.timeline__item--highlight .timeline__year-tag { color: var(--terracotta); }
.timeline__card { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 3vw, 28px); }
.timeline__item--highlight .timeline__card { border-color: rgba(201, 111, 68, 0.35); }
.timeline__card h3 { font-size: 1.05rem; line-height: 1.5; margin: 0; }
@media (max-width: 700px) {
.timeline::before { left: 5px; transform: none; }
.timeline__item,
.timeline__item--b { grid-template-columns: 24px 1fr; column-gap: 16px; row-gap: 10px; }
.timeline__dot { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 8px; }
.timeline__year,
.timeline__item--b .timeline__year {
grid-column: 2;
grid-row: 1;
text-align: left;
margin-top: 0;
}
.timeline__card,
.timeline__item--b .timeline__card {
grid-column: 2;
grid-row: 2;
text-align: left;
margin-top: 0;
}
}
/* --- MEDIA — メディア掲載実績 ---
* 1枚目（司法書士会インタビュー）を横長の主役カードとして大きく、
* 2枚目（LEC合格体験記）・3枚目（書籍実績）は右側に縦2段で並べ、情報の重み付けを視覚化する。
*/
.media-grid {
margin-top: clamp(36px, 5vw, 56px);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(20px, 2.5vw, 28px);
/*
* 右側2枚の合計高さに主役カードを強制的に合わせる（stretch）と、
* 本文の分量差によっては中身とリンクの間に不自然な空白ができるため、
* 各カードとも内容量に応じた自然な高さにする。
*/
align-items: start;
}
.media-sub-grid { display: grid; gap: clamp(20px, 2.5vw, 28px); }
.media-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
padding: clamp(24px, 3vw, 32px);
color: inherit;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
a.media-card:hover {
border-color: var(--terracotta);
box-shadow: 0 16px 36px rgba(28, 43, 69, 0.1);
transform: translateY(-3px);
}
.media-card__outlet {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--terracotta);
}
.media-card__title { margin-top: 10px; font-size: 1rem; line-height: 1.6; }
.media-card__desc { margin-top: 14px; font-size: 0.86rem; line-height: 1.85; color: var(--text-muted); }
.media-card__link {
margin-top: auto;
padding-top: 18px;
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: 0.84rem;
font-weight: 700;
color: var(--navy);
transition: color 160ms ease;
}
.media-card__link .icon { transition: transform 160ms ease; }
a.media-card:hover .media-card__link { color: var(--terracotta-deep); }
a.media-card:hover .media-card__link .icon { transform: translate(2px, -2px); }
/* 1枚目（司法書士会インタビュー）：見出しを一段大きく、余白もゆったりさせて主役感を出す */
.media-card--featured .media-card__title { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-top: 14px; }
/* 3枚目（書籍実績）：リンクではないため、hoverの演出とポインターを外す */
.media-card--text { cursor: default; }
.media-card--text .media-card__title { color: var(--text); }
@media (max-width: 820px) {
.media-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
PAGE — 業務案内（SERVICES NAV / SERVICE DETAIL）
=================================================================== */
/* --- 業務ジャンプナビ（スクロール追従はさせず、リード文直下に静的配置） --- */
.services-nav {
border-bottom: 1px solid var(--line);
padding: 26px 0;
}
.services-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(24px, 4vw, 56px);
}
.services-nav__link {
display: inline-flex;
align-items: baseline;
gap: 0.5em;
color: var(--text);
font-size: 0.92rem;
font-weight: 700;
transition: color 160ms ease;
}
.services-nav__link:hover { color: var(--terracotta); }
.services-nav__index { font-family: var(--font-mincho); font-size: 0.9em; color: var(--navy); }
.services-nav__arrow { font-size: 0.85em; opacity: 0.55; transition: transform 160ms ease; }
.services-nav__link:hover .services-nav__arrow { transform: translateY(3px); }
/* --- ブロック1：タイトル＋リード（1カラム・中央揃え、写真なし） --- */
.service-block1 { max-width: 700px; margin: 0 auto; text-align: center; }
.service-block1 .eyebrow { justify-content: center; }
.service-block1__heading { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 18px; margin-bottom: 28px; }
.service-block1__lead { color: var(--text-muted); font-size: 0.95rem; line-height: 1.9; text-align: left; }
/* 相続登記義務化の法令アラート（ブロック1内、見出し直後に統合表示。箱ではなく上下の細線で見せる） */
.legal-alert {
display: flex;
gap: 14px;
padding: 20px 4px;
border-top: 1px solid var(--terracotta);
border-bottom: 1px solid var(--terracotta);
margin-bottom: 28px;
text-align: left;
}
.legal-alert .icon { color: var(--terracotta); flex: none; width: 1.3em; height: 1.3em; margin-top: 2px; }
.legal-alert__title { font-size: 0.92rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.legal-alert__desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; }
/* --- ブロック2：写真 ＋ CONSULT WHEN（2カラム・高さを抑えた横並び） --- */
.service-block2 {
margin-top: clamp(48px, 6vw, 72px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 56px);
align-items: center;
}
.service-block2--reverse .service-block2__photo { order: 2; }
.service-block2--reverse .service-block2__consult { order: 1; }
.service-block2__photo { aspect-ratio: 4 / 3; }
.service-block2__consult {
padding-left: clamp(24px, 3vw, 32px);
border-left: 1px solid var(--terracotta);
}
.service-block2--reverse .service-block2__consult {
padding-left: 0;
padding-right: clamp(24px, 3vw, 32px);
border-left: 0;
border-right: 1px solid var(--terracotta);
}
.consult-quote__label { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--terracotta); margin-bottom: 10px; font-weight: 700; }
.service-block2__consult h3 { font-size: 1.2rem; margin-bottom: 12px; }
.service-block2__consult p { font-size: 0.88rem; line-height: 1.85; color: var(--text-muted); }
/* --- ブロック3：詳細サービス（2列×N段のグリッド。アイコンではなく番号タイポで見せる） --- */
.case-grid {
margin-top: clamp(48px, 6vw, 72px);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.case-card { padding: clamp(48px, 6vw, 64px) clamp(24px, 3vw, 32px); background: var(--surface); }
/* カードが奇数枚のときは、最後の1枚を2列分に広げて、右隣に空の枠（グレーの背景）が出ないようにする */
.case-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.case-card__num {
display: block;
font-family: var(--font-serif-num);
font-size: 1.6rem;
font-weight: 600;
color: var(--terracotta);
line-height: 1;
margin-bottom: 14px;
}
.case-card h4 { font-size: 1rem; margin-bottom: 8px; }
.case-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.9; letter-spacing: 0.03em; }
/* --- ブロック4：料金表（PRICE）。Excelのような箱組みを避け、横線だけで区切るエディトリアルな表 --- */
.price-table {
margin-top: clamp(48px, 6vw, 72px);
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.price-table .eyebrow { justify-content: center; }
.price-table__heading { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 16px; margin-bottom: 32px; }
.price-table__tax { font-size: 0.6em; font-weight: 600; color: var(--text-muted); margin-left: 0.2em; }
.price-table__list { margin: 0; text-align: left; }
.price-table__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding: 16px 4px;
border-bottom: 1px solid var(--line);
}
.price-table__row:first-child { border-top: 1px solid var(--line); }
.price-table__row dt { font-size: 0.92rem; color: var(--text); }
.price-table__row dd {
flex: none;
margin: 0;
font-family: var(--font-mincho);
font-size: 1rem;
font-weight: 600;
color: var(--navy);
white-space: nowrap;
}
.price-table__disclaimer { margin-top: 20px; font-size: 0.76rem; color: var(--text-muted); text-align: left; }
.price-table + .service-micro-cta { margin-top: clamp(56px, 6.5vw, 68px); }
/* --- 各業務セクション末尾のマイクロCTA：背景なし、テラコッタのゴーストボタン1つだけ --- */
.service-micro-cta { margin-top: clamp(32px, 4vw, 40px); text-align: center; }
/* --- ページ最下部のメインCTA：ベージュ背景＋塗りつぶしボタンで全体を受け止める --- */
.services-main-cta { background: var(--panel); }
.services-main-cta__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.services-main-cta__heading { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.services-main-cta__desc { margin-top: 16px; color: var(--text-muted); font-size: 0.95rem; }
.services-main-cta__btn { margin-top: 32px; padding-top: 1.2em; padding-bottom: 1.2em; padding-left: 2.4em; padding-right: 2.4em; font-size: 1rem; }
@media (max-width: 900px) {
.service-block2 { grid-template-columns: 1fr; }
.service-block2--reverse .service-block2__photo,
.service-block2--reverse .service-block2__consult { order: initial; }
.service-block2__consult {
padding: 24px 0 0;
margin-top: 24px;
border: 0;
border-top: 1px solid var(--terracotta);
}
}
@media (max-width: 560px) {
.case-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
PAGE — お問い合わせ（CONTACT CHANNELS / INQUIRY FORM / ACCESS）
=================================================================== */
/* --- CONTACT CHANNELS --- */
.channel-grid {
margin-top: clamp(36px, 5vw, 48px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.channel-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(26px, 3vw, 32px);
background: var(--surface);
border: 1px solid transparent;
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.06);
color: inherit;
transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.channel-card:hover {
border-color: var(--terracotta);
transform: translateY(-3px);
box-shadow: 0 14px 54px rgba(0, 0, 0, 0.08);
}
.channel-card__icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(201, 111, 68, 0.14);
color: var(--terracotta);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/* 3枚とも「アイコン → 小さな欧文見出し → 大きな具体情報 → 補足 → CTAボタン」の同じ情報階層に統一する */
.channel-card__kicker { font-family: var(--font-serif-num); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 12px; }
.channel-card__value { font-family: var(--font-mincho); font-size: 1.55rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; white-space: nowrap; }
.channel-card__sub { font-size: 0.76rem; color: var(--text-muted); }
.channel-card__cta {
align-self: stretch;
width: 100%;
justify-content: center;
margin-top: auto;
padding-top: 1.1em;
padding-bottom: 1.1em;
background: var(--surface);
color: var(--terracotta);
border: 1.5px solid var(--terracotta);
}
.channel-card__cta:hover {
background: var(--terracotta);
color: #FFF9F4;
}
.channel-card__more-arrow { display: inline-block; transition: transform 160ms ease; }
.channel-card:hover .channel-card__more-arrow { transform: translateY(3px); }
@media (max-width: 820px) {
.channel-grid { grid-template-columns: 1fr; }
}
/* 見出し＋リード文（INQUIRY FORMの見出し／ACCESSセクションで使用） */
.service-detail__heading { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 18px; margin-bottom: 28px; }
.service-detail__lead { color: var(--text-muted); font-size: 0.95rem; line-height: 1.9; margin-bottom: 32px; }
/* --- INQUIRY FORM --- */
.contact-form-grid {
display: grid;
grid-template-columns: 9fr 11fr;
gap: clamp(40px, 5vw, 64px);
align-items: start;
}
.info-note-list { margin-top: 32px; display: grid; gap: 14px; }
.info-note { display: flex; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); }
.info-note .icon { flex: none; width: 1.3em; height: 1.3em; color: var(--terracotta); margin-top: 2px; }
.info-note p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.75; }
.contact-form-panel { background: var(--surface); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); }
/* フォーム要素 */
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-top: 22px; }
.form-row .form-group { margin-top: 0; }
/* 2列の行が続く場合（お名前・フリガナ → メール・電話番号）も、他の項目と同じ22pxの間隔をあける */
.form-row + .form-row { margin-top: 22px; }
.contact-form-panel form > .form-row:first-of-type { margin-top: 0; }
.form-group label,
.form-group__label { display: block; font-size: 0.84rem; color: var(--text); margin-bottom: 8px; }
.form-required {
display: inline-block;
margin-left: 6px;
padding: 0.15em 0.55em;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--terracotta-deep);
background: rgba(201, 111, 68, 0.14);
border-radius: 999px;
vertical-align: middle;
}
.form-group__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.form-group__row label { margin-bottom: 0; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.9em 1em;
font-family: var(--font-gothic);
font-size: 0.9rem;
color: var(--text);
background: var(--surface);
border: 1px solid var(--input-line);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(201, 111, 68, 0.12);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-select-wrap { position: relative; }
.form-select-wrap select { appearance: none; padding-right: 2.4em; cursor: pointer; }
.form-select-arrow {
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%) rotate(90deg);
color: var(--text-muted);
pointer-events: none;
}
.form-char-count { font-size: 0.74rem; color: var(--text-muted); }
.form-char-count.is-over { color: var(--terracotta); font-weight: 700; }
.form-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.form-radio {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.7em 1.2em;
background: var(--surface);
border: 1px solid var(--input-line);
font-size: 0.86rem;
color: var(--text);
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.form-radio:has(input:checked) {
border-color: var(--terracotta);
color: var(--terracotta);
}
.form-radio input { accent-color: var(--terracotta); }
.form-checkbox { margin-top: 26px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 2px;
border: 1.5px solid var(--input-line);
border-radius: 4px;
background-color: var(--surface);
background-repeat: no-repeat;
background-position: center;
background-size: 13px 13px;
flex: none;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease;
}
.form-checkbox input[type="checkbox"]:checked {
background-color: var(--terracotta);
border-color: var(--terracotta);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF9F4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
}
.form-checkbox input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 111, 68, 0.18);
}
.form-checkbox span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.7; }
.form-checkbox span a { color: var(--terracotta); text-underline-offset: 0.2em; }
.form-checkbox span a:hover { color: var(--terracotta-deep); }
.form-error {
margin-top: 22px;
padding: 16px 18px;
background: rgba(201, 111, 68, 0.1);
border: 1px solid rgba(201, 111, 68, 0.35);
color: var(--terracotta-deep);
font-size: 0.86rem;
line-height: 1.7;
}
.form-submit { width: 100%; justify-content: center; margin-top: 26px; padding-top: 1.3em; padding-bottom: 1.3em; font-size: 1rem; }
.is-sending .form-submit { opacity: 0.6; pointer-events: none; }
/* 送信完了状態 */
.form-success { text-align: center; padding: 48px 0; }
.form-success__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 24px;
border-radius: 50%;
background: rgba(201, 111, 68, 0.14);
color: var(--terracotta);
}
.form-success__icon .icon { width: 1.6em; height: 1.6em; }
.form-success h3 { font-size: 1.3rem; margin-bottom: 14px; }
.form-success p { max-width: 42ch; margin: 0 auto 24px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.8; }
.form-success #formResetBtn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
/* --- Contact Form 7 用の調整（CF7が出力するマークアップを、上記のフォームデザインに合わせる） --- */
.wpcf7-form-control-wrap { display: block; }
/* 種別セレクトの下向き矢印（CF7のフォーム本文にはSVGを書けないため、背景画像で表示） */
.form-select-wrap select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358657E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: 16px 16px;
}
/* ご希望の連絡方法（ラジオボタン）：旧 .form-radio と同じ見た目 */
.form-radio-group.wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.wpcf7-radio .wpcf7-list-item { margin: 0; }
.wpcf7-radio .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.7em 1.2em;
background: var(--surface);
border: 1px solid var(--input-line);
font-size: 0.86rem;
color: var(--text);
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.wpcf7-radio .wpcf7-list-item label:has(input:checked) { border-color: var(--terracotta); color: var(--terracotta); }
.wpcf7-radio input { accent-color: var(--terracotta); margin: 0; }
/* 個人情報の同意チェック */
.form-checkbox .wpcf7-list-item { margin: 0; }
.form-checkbox label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
/* 送信ボタン：同意チェックが入るまではCF7が無効化する */
.form-submit__arrow {
display: inline-block;
width: 1.05em;
height: 1.05em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 160ms ease;
}
.form-submit:hover .form-submit__arrow { transform: translateX(3px); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.contact-form-panel .wpcf7 .wpcf7-spinner { display: block; margin: 14px auto 0; }
/* 入力エラー・送信結果メッセージ */
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 0.76rem; color: var(--terracotta-deep); }
.form-group .wpcf7-not-valid { border-color: var(--terracotta); }
.contact-form-panel .wpcf7 form .wpcf7-response-output {
margin: 22px 0 0;
padding: 16px 18px;
background: rgba(201, 111, 68, 0.1);
border: 1px solid rgba(201, 111, 68, 0.35);
color: var(--terracotta-deep);
font-size: 0.86rem;
line-height: 1.7;
}
.contact-form-panel .wpcf7 form.sent .wpcf7-response-output { background: var(--panel); border-color: var(--line); color: var(--navy); }
@media (max-width: 900px) {
.contact-form-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.form-row .form-group:not(:first-child) { margin-top: 22px; }
}
/* --- ACCESS（お問い合わせページ用・写真なしのシンプル版） --- */
.contact-map-grid {
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(32px, 5vw, 56px);
align-items: stretch;
}
/* テキスト群（英字見出し含む）と地図を左右反転。DOM順は変えず表示順のみ入れ替える */
.contact-map-info { order: 2; }
.contact-map { order: 1; }
.contact-map-info .access-list { margin-top: 26px; }
/*
* 地図の底辺を、右のテキスト列（営業時間の項目）の底辺と揃える。
* iframeにheight:100%を指定するだけだと、高さautoの親（グリッドのstretch）に対して
* パーセント指定が解決できず、地図側の既定サイズで表示されてしまう。
* 親を position:relative にしたうえで iframe を position:absolute; inset:0 にすることで、
* 先にグリッドの stretch で確定した .contact-map の高さに、確実に追従させる。
*/
.contact-map { position: relative; min-height: 320px; border: 1px solid var(--line); overflow: hidden; }
.contact-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
filter: grayscale(80%) sepia(10%);
}
@media (max-width: 900px) {
.contact-map-grid { grid-template-columns: 1fr; }
.contact-map-info { order: initial; }
.contact-map { order: initial; aspect-ratio: 16 / 10; }
}
/* ===================================================================
PAGE — 個人情報の取り扱い（PRIVACY POLICY）
=================================================================== */
.policy-content { max-width: 760px; margin: 0 auto; }
.policy-intro {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.9;
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--line);
}
.policy-section { margin-bottom: 40px; }
.policy-section h2 {
font-family: var(--font-mincho);
font-size: 1.15rem;
font-weight: 600;
color: var(--navy);
margin-bottom: 14px;
/*
* 項目見出しは左詰めで、右端を超えるときだけ折り返す。
* h1〜h4共通の text-wrap: balance だと、2行の長さを揃えようとして不自然な位置で改行されるため、
* このページの見出しだけ通常の折り返し（wrap）にする。normal は無効な値なので使わない。
*/
text-wrap: wrap;
}
.policy-section p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
.policy-section ul { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 8px; }
.policy-section li { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; }
.policy-section a { color: var(--terracotta); text-underline-offset: 0.2em; }
.policy-date { margin-top: 56px; font-size: 0.8rem; color: var(--text-muted); text-align: right; }
/* ===================================================================
SMARTPHONE ONLY（767px以下）
スマホ表示だけの調整をこのブロックに集約する。PC・タブレット表示には一切影響させない。
（.u-sp-only / .back-to-top の非表示指定のみ、スマホ用要素をPCで隠すためにブロック外に置く）
=================================================================== */
.u-sp-only { display: none; }
.back-to-top { display: none; }
/*
* タブレット〜スマホ（1180px以下）：ヘッダーと下層ページヒーローの左右余白。
* .header-row / .page-hero__content は .container と兼用だが、自身のpadding指定で
* 左右の余白が0に上書きされ、画面幅が1180px以下になると文字が画面の端に密着していたため戻す。
* （1181px以上は .container の中央寄せで余白ができるため、PC表示は変わらない）
*/
@media (max-width: 1180px) {
.header-row,
.page-hero__content {
padding-left: clamp(20px, 5vw, 48px);
padding-right: clamp(20px, 5vw, 48px);
}
}
/*
* メニュー展開時（ハンバーガーメニューが出る880px以下＝タブレット・スマホ共通）：
* ご相談予約ボタンは出さず、メニュー項目を縦1列に並べる。
* メニュー未設定時のフォールバック（ukai_primary_menu_fallback）はPC用の.main-navを出力するため、
* .mobile-nav内ではPC用の横並び・白文字の指定を打ち消す。
*/
@media (max-width: 880px) {
.mobile-nav__cta { display: none; }
.mobile-nav .main-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.mobile-nav .main-nav a {
display: block;
padding: 12px 4px;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.mobile-nav .main-nav a::after { content: none; }
}
@media (max-width: 767px) {
/* スマホでだけ改行させたい箇所（
）／スマホでは隠したい箇所 */
br.u-sp-only { display: inline; }
.u-pc-only { display: none; }
/* --- ヘッダー：事務所名とご相談予約ボタンを左右半分ずつ、1行で並べる --- */
.header-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding-top: 12px;
padding-bottom: 12px;
}
.brand { min-width: 0; }
/* 事務所名（9文字）が画面幅の半分に1行で収まるよう、画面幅に応じて縮小する */
.site-header .brand-text {
font-size: min(1.575rem, calc((100vw - 52px) / 2 / 9.6));
white-space: nowrap;
}
.header-cta { display: block; min-width: 0; }
.header-cta .btn {
width: 100%;
justify-content: center;
padding: 0.85em 0.5em;
font-size: min(1.14rem, calc((100vw - 52px) / 2 / 8));
}
/* ハンバーガーメニューはヘッダーの右下の外側に配置する（.site-header基準の絶対配置） */
.nav-toggle {
position: absolute;
top: calc(100% + 10px);
right: clamp(20px, 5vw, 48px);
width: 44px;
height: 44px;
background: var(--navy);
color: var(--on-navy);
border: 1px solid var(--on-navy-line);
box-shadow: 0 6px 16px rgba(16, 25, 40, 0.22);
}
/* --- 全ページ共通：セクションのタイトル（見出し）と英語表記のみ中央揃え。説明文は元の揃えのまま --- */
.section-label__title,
.section-label--right .section-label__title,
.align-right__title,
.strength-head__title {
max-width: none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-head { max-width: none; text-align: center; }
.section-head__desc { text-align: left; }
.news-grid__eyebrow,
.news-grid__heading { justify-self: center; text-align: center; }
.access-eyebrow { justify-self: center; }
.access-heading { margin-left: auto; margin-right: auto; text-align: center; }
.cta-band__copy { text-align: center; }
.contact-form-intro { text-align: center; }
.contact-form-intro .info-note-list { text-align: left; }
/* --- トップ以外の全ページのヒーロー：パンくずリスト以外を中央揃え --- */
.page-hero__content { text-align: center; }
.page-hero h1,
.page-hero__desc { margin-left: auto; margin-right: auto; }
/* --- 最上部に戻る追従ボタン --- */
.back-to-top {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--on-navy-line);
background: var(--navy);
color: var(--on-navy);
box-shadow: 0 6px 16px rgba(16, 25, 40, 0.22);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top .icon { width: 20px; height: 20px; }
/* --- トップ：ヒーローの大見出し（2行）・小見出し（4行）・英語表記は、折り返さずに画面幅に合わせて縮小する --- */
.hero .eyebrow {
white-space: nowrap;
font-size: min(0.76rem, calc((100vw - 112px) / 22.5));
}
.hero__title {
/* 1行12文字（「確かな知識とスピードで、」「大切な権利と未来を守る。」）が収まるサイズ */
font-size: calc((100vw - 40px) / 12.6);
white-space: nowrap;
}
.hero__lead {
/* 最長行22文字（「名古屋大手司法書士法人での実務経験を土台に、」）が収まるサイズ */
font-size: min(1.02rem, calc((100vw - 40px) / 22.6));
white-space: nowrap;
}
/*
* --- トップ ACCESS：写真キャプションは折り返す ---
* PCでは1行で右にはみ出させる指定だが、スマホではこれが画面幅を超え、
* ページ全体が横に広がってヘッダー等の配置が崩れる原因になるため。
*/
.access-photos__item figcaption { white-space: normal; }
/* --- トップ ABOUT：代表写真をトリミングせず、全体を表示する --- */
.intro-photo { aspect-ratio: auto; }
.intro-photo img { height: auto; }
/* --- 事務所案内：キャッチコピー1行目を折り返さないサイズに --- */
.profile-message__heading { font-size: min(1.55rem, calc((100vw - 40px) / 14.6)); }
.profile-message__line { white-space: nowrap; }
/* --- 事務所案内 OFFICE INFO：説明文はPC用の改行を無視して、左揃えで自然に折り返す --- */
#office .section-label__desc { text-align: left; }
#office .section-label__desc br { display: none; }
/* --- 業務案内 CONSULT WHEN：英語表記と見出しのみ中央揃え、テラコッタの区切り線は無し --- */
.service-block2__consult,
.service-block2--reverse .service-block2__consult {
padding: 0;
border: 0;
}
.service-block2__consult .consult-quote__label,
.service-block2__consult h3 { text-align: center; }
/* --- お問い合わせ ACCESS：地図が画面幅からはみ出さないように --- */
.contact-map { min-height: 0; aspect-ratio: 4 / 3; }
/* --- お問い合わせ：INQUIRY FORM・ACCESSの見出しを、CONTACT CHANNELSの見出しと同じ書式に統一 --- */
.service-detail__heading {
font-size: clamp(1.6rem, 2.6vw, 2.3rem);
margin-top: 16px;
line-height: 1.55;
}
/* --- お問い合わせフォーム：項目名と上の入力欄との余白を全項目で統一 --- */
.form-row { row-gap: 0; }
/* --- トップ ヒーロー：英語表記と大見出しのみ120px上へ（小見出しは元の位置のまま） --- */
.hero .eyebrow,
.hero__title { position: relative; top: -120px; }
/* --- トップ お知らせ：矢印を各お知らせタイトルの右下に置く（1行目：日付、2行目：タイトル＋右下に矢印） --- */
.news-list__title { flex: 1 1 calc(100% - 40px); order: 1; }
.news-list__link .icon { order: 2; align-self: flex-end; margin-left: auto; margin-bottom: 0.3em; }
/* --- トップ FOR PARTNERS：見出し2行（最長15文字「長くお付き合いできる事務所へ。」）を折り返さず縮小 --- */
.section-head h2 {
font-size: min(clamp(1.7rem, 2.8vw, 2.4rem), calc((100vw - 40px) / 15.6));
white-space: nowrap;
}
/*
* --- トップ OUR SERVICES：カード間の余白 ---
* 01〜03の番号はカード上端から上に64%はみ出しているため、
* そのはみ出し分＋ゆとり（24px）を、カード同士の間隔に上乗せする。
*/
.service-grid { row-gap: calc(clamp(3rem, 6vw, 4.5rem) * 0.64 + 24px); }
/* --- 下層ページ ヒーロー：英語表記はテキストのみで中央揃え（左の横線は中央揃えの計算に含めない） --- */
.page-hero .eyebrow { position: relative; }
.page-hero .eyebrow::before {
position: absolute;
right: calc(100% + 0.6em);
top: 50%;
transform: translateY(-50%);
}
/* --- 業務案内 ヒーロー小見出し：PCと同じ位置（
）でのみ改行し、それ以外は折り返さず縮小（最長23文字） --- */
.page-hero--services .page-hero__desc {
font-size: min(1rem, calc((100vw - 40px) / 23.6));
white-space: nowrap;
}
/* --- 業務案内 ジャンプナビ：01を左上・02を中央・03を右下に置く階段状の配置 --- */
.services-nav__list {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.services-nav__list li:nth-child(1) { align-self: flex-start; }
.services-nav__list li:nth-child(2) { align-self: center; }
.services-nav__list li:nth-child(3) { align-self: flex-end; }
}