@charset "UTF-8"; /* ========================================================= * akashi-minato-theme 統合スタイル（自己完結型） * 明石みなと会計事務所 相続税特化サイト（パステルグリーン×山吹×白） * * 【2026-09-02 クライアントのご要望でトーン＆マナーを変更】 * ・配色を「パステルグリーン（柔らかい緑）」基調へ。以前のはっきりした緑（#52a86a）より * 彩度を落とし、背景・罫線も淡くして相談の心理的ハードルを下げる。 * ・**CTAの山吹は残す**（優馬様のご判断）。ただし少し柔らかい色味にした。 * ・角丸を大きくし、見出しに丸ゴシック（Zen Maru Gothic）を使う＝「丸みのあるパーツ・優しいフォント」。 * ・**過度なアニメーションを使わない**（スクロールのフェードイン・カードの浮き上がり・ * 写真の拡大は全て停止。色の変化のみ残す）。→ 末尾の「アニメーション抑制」ブロックを参照。 * ・**濃い緑を基調に戻さないこと／動きを足さないこと。** * ======================================================= */ :root { /* --- パステルグリーン（2026-09-02 変更）--- 文字に使う濃い緑（--primary-d / --primary-dd）は、白背景でのコントラストを確保するため 彩度だけ落として明度は保っている。淡くしすぎると本文が読めなくなるので注意。 */ --primary: #7cbf93; /* 基調のパステルグリーン（アイコン・下線バー等） */ --primary-d: #4f9670; /* 濃い緑（見出し文字・ホバー）※本文コントラスト確保用 */ --primary-dd: #3a7255; /* 最濃緑（濃緑帯・グラデ終端） */ --primary-l: #a5d7b6; /* 明るいパステルグリーン */ --primary-l2: #cbe9d5; /* さらに淡い緑（ワンポイント・帯） */ --accent: #e8b849; /* 山吹色（やわらかめ）CTA・行動喚起 */ --accent-d: #c9962a; /* 山吹濃。【2026-09-07】文字・装飾には使わなくなり、**ボタンのホバー時（押せる合図）専用**になった */ --white: #ffffff; --gray: #f4faf6; /* 淡緑の背景（section-gray） */ --gray-2: #e9f4ec; --line: #dfeee4; /* 罫線もやわらかく */ --ink: #2c332c; --ink-2: #4f584f; --muted: #78826f; /* 角丸を大きくして「丸みのあるパーツ」に（2026-09-02） */ --radius: 16px; --radius-lg: 24px; /* 影も淡く。くっきりした影は「過度な装飾」に見えるため */ --shadow: 0 8px 24px rgba(70,120,90,.10); --shadow-sm: 0 3px 12px rgba(70,120,90,.07); --wrap: 1120px; --wrap-narrow: 800px; /* 見出しは丸ゴシック（Zen Maru Gothic）。読み込みに失敗しても Noto Sans JP に落ちる */ --serif: "Zen Maru Gothic", "Noto Sans JP", sans-serif; --sans: "Noto Sans JP", sans-serif; } /* ---------- reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.9; font-size: 16px; background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* はレイアウトに影響させない（WebP配信用ラッパー・既存のimgスタイルをそのまま適用） */ picture { display: contents; } a { color: var(--primary-d); text-decoration: none; transition: color .2s, opacity .2s; } a:hover { color: var(--accent); } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.5; } p { margin: 0; } .icon { flex: none; } .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: var(--wrap-narrow); } /* ---------- 画像（支給写真） ---------- */ .akm-img { display: block; width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-sm); } .akm-img-16x9 { aspect-ratio: 16/9; } .akm-img-4x3 { aspect-ratio: 4/3; } .akm-img-1x1 { aspect-ratio: 1/1; } .akm-img-3x4 { aspect-ratio: 3/4; } .akm-img-wide { aspect-ratio: 21/9; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-family: var(--sans); font-size: 15px; line-height: 1.4; cursor: pointer; border: 2px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-2px); } .btn-lg { padding: 17px 36px; font-size: 16px; } .btn-cta { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(224,164,30,.32); } .btn-cta:hover { background: var(--accent-d); color: #fff; } .btn-green { background: var(--primary-d); color: #fff; } .btn-green:hover { background: var(--primary-dd); color: #fff; } .btn-outline { background: #fff; color: var(--primary-d); border-color: var(--primary); } .btn-outline:hover { background: var(--primary-d); color: #fff; border-color: var(--primary-d); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .btn-outline-light:hover { background: #fff; color: var(--primary-d); } /* ---------- sections ---------- */ .section { padding: 84px 0; } .section-gray { background: var(--gray); } .section-navy { background: var(--primary-d); color: #fff; } .section-head { text-align: center; margin-bottom: 46px; } .section-en { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .section-en.light { color: #c6e0cb; } .section-title { font-size: 30px; color: var(--primary-d); position: relative; padding-bottom: 18px; } .section-title.light { color: #fff; } .section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 48px; height: 3px; background: var(--primary); border-radius: 3px; } /* 左寄せ見出し（当事務所について・代表挨拶）は下線も見出しテキストの真下＝左寄せにする */ .about-body .section-title::after, .profile-body .section-title::after { left: 0; transform: none; } /* 「選ばれる理由」「取扱業務」だけ下線をオレンジ（アクセント）に戻す */ .section-features .section-title::after, .section-services .section-title::after, .section-philosophy .section-title::after { background: var(--accent); } .section-desc { margin-top: 18px; color: var(--ink-2); } .section-action { text-align: center; margin-top: 44px; } .lead-text { font-size: 17px; color: var(--ink-2); margin-bottom: 20px; } .note-text { margin-top: 24px; color: var(--muted); font-size: 14px; } /* ---------- 画像プレースホルダ ---------- */ .img-ph { position: relative; width: 100%; background: linear-gradient(135deg, #e6f0e7, #dcecdf); border: 1px dashed #b0cdb2; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--primary-d); } .img-ph-16x9 { aspect-ratio: 16/9; } .img-ph-4x3 { aspect-ratio: 4/3; } .img-ph-1x1 { aspect-ratio: 1/1; } .img-ph-3x4 { aspect-ratio: 3/4; } .img-ph-wide { aspect-ratio: 21/9; } .img-ph-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(40,95,55,.12); position: relative; } .img-ph-icon::before, .img-ph-icon::after { content: ""; position: absolute; } .img-ph-icon::before { width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 11px; left: 11px; } .img-ph-icon::after { width: 26px; height: 14px; background: #fff; border-radius: 4px; bottom: 9px; left: 10px; clip-path: polygon(0 100%, 35% 30%, 60% 65%, 80% 40%, 100% 100%); } .img-ph-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 0 12px; text-align: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(40,95,55,.08); transition: box-shadow .3s; } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } /* ---- 【2026-10-01 岡本様のご指示】ヘッダーを3段構成へ（suzuki-zei と同じ「形」）---- 1段目 .hdr-bar … 最濃緑の細い帯に一行キャッチ（1023px以下は非表示） 2段目 .hdr-main … 白地。左＝ロゴ（灯台マーク）＋事務所名／右＝相談料・電話・相談予約の3ボックス 3段目 .hdr-nav … 最濃緑の帯にグローバルナビ（白文字・縦線区切り） ★**形だけを suzuki に合わせ、中身と配色は当サイトの緑×山吹のまま**（岡本様のご指示）。 濃ローズ（suzuki の色）は一切使わないこと。 ★旧・1段構成の `.header-inner` / `.site-brand` / `.header-cta` / `.header-tel` / `.header-contact-btn` / `.brand-body` / `.brand-en` / `.brand-name` は header.php から無くなったため、この節ごと置き換えてある。**戻さないこと。** */ /* ---- 1段目：一行キャッチの帯 ---- */ .hdr-bar { background: var(--primary-dd); color: #fff; } .hdr-bar-txt { max-width: 1760px; margin: 0 auto; padding: 7px 24px; font-size: 14px; line-height: 1.6; letter-spacing: .02em; text-align: center; } /* 強調は山吹。★ここに実績の数値を書かないこと（ご提供が無いため捏造になる） */ .hdr-bar-txt strong { font-weight: 700; color: var(--accent); } /* ---- 2段目：ロゴと相談導線のボックス群 ---- */ .hdr-main { background: #fff; } .hdr-main-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1760px; margin: 0 auto; padding: 12px 24px; } .site-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .site-logo-body { display: flex; flex-direction: column; line-height: 1.3; } .lg-lead { font-size: 12.5px; font-weight: 700; color: var(--primary); letter-spacing: .04em; white-space: nowrap; } .lg-main { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--primary-d); letter-spacing: .02em; white-space: nowrap; } .lg-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; white-space: nowrap; } /* ロゴ（灯台マーク）。画像が未受領のあいだはCSSで描いた丸マークが出る */ .brand-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #b0dcbb, var(--primary-l2) 45%, var(--primary) 100%); box-shadow: 0 2px 6px rgba(40,95,55,.25); } /* ロゴ画像は正方形とは限らないため、丸型・背景・影を打ち消して原寸比のまま出す（2026-09-02）。 灯台は縦長（横:縦 ≒ 1:2.65）なので、3段構成になって高さに余裕ができた分だけ大きくしている */ .brand-mark--img { width: auto; height: 54px; max-width: 96px; border-radius: 0; background: none; box-shadow: none; object-fit: contain; } /* ---- グループの司法書士事務所へのリンク（2026-10-01 岡本様のご指示）---- 事務所概要ページの表組みの中だけでは気づけないため、ヘッダーからも飛べるようにした。 ・`margin-left: auto` で**右側のボックス群に寄せて**いる（2段目は space-between のため、 これが無いと中央にぽつんと浮いてしまう）。 ・山吹のCTAと競合しないよう、**枠線＋濃緑の控えめなトーン**にしている。 ・1023px以下は非表示（下のレスポンシブ節）。導線は事務所概要ページが担う。 */ .hdr-group { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin-left: auto; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--primary-d); white-space: nowrap; flex-shrink: 0; transition: background-color .2s, border-color .2s; } .hdr-group:hover { background: var(--gray); border-color: var(--primary); color: var(--primary-dd); } .hdr-group-sub { font-size: 11px; color: var(--muted); letter-spacing: .02em; } .hdr-group-main { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; } .hdr-group-ico { flex: none; } .hdr-boxes { display: flex; align-items: stretch; gap: 10px; flex-shrink: 0; } .hdr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 16px; border-radius: var(--radius); white-space: nowrap; } .hdr-box-sub { font-size: 12px; letter-spacing: .02em; } /* 相談料のボックス（suzuki の「初回相談 60分無料」にあたる位置）。 ★当事務所の相続相談は**有料**。「無料」と書き換えないこと */ .hdr-box--fee { background: var(--primary-d); color: #fff; } .hdr-box--fee .hdr-box-main { font-size: 15px; font-weight: 700; } .hdr-box--fee em { font-style: normal; font-size: 19px; color: var(--accent); } /* 電話ボックス */ .hdr-box--tel { border: 2px solid var(--primary); color: var(--muted); } .hdr-box--tel .hdr-box-num { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--primary-d); letter-spacing: .02em; line-height: 1.15; } /* 相談予約ボタン（山吹）。色は従来のヘッダーCTAを踏襲する */ .hdr-box--cta { flex-direction: row; gap: 8px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: left; box-shadow: 0 6px 16px rgba(224,164,30,.3); transition: background-color .2s; } .hdr-box--cta:hover { background: var(--accent-d); color: #fff; } /* ---- 3段目：グローバルナビの帯 ---- ・区切り線は各項目の左に引き、最後の項目だけ右にも引く（両端にも線が出る） ・項目を増やす／文言を長くすると横幅が足りなくなるので、追加時は 1024px 幅でも確認すること ・ドロップダウン（.sub-menu）は白いパネルのままなので、文字色の指定は下の方にある `.global-nav-list .sub-menu a` 側が優先される（こちらの白文字は効かない）。 */ .hdr-nav { background: var(--primary-dd); } .hdr-nav .global-nav { width: 100%; } .global-nav-list { display: flex; gap: 0; flex-wrap: nowrap; justify-content: center; max-width: 1760px; margin: 0 auto; } .global-nav-list > li { display: flex; align-items: center; height: 48px; border-left: 1px solid rgba(255,255,255,.28); } .global-nav-list > li:last-child { border-right: 1px solid rgba(255,255,255,.28); } /* 【2026-09-07】項目の幅は「文字数＋左右の余白」で決まるため、「料金」（2文字）だけが 極端に狭く見えていた。**最小幅を設けて文字を中央に置く**ことで、4文字の項目 （解決実績・代表紹介など）と幅を揃えている。画面幅が狭くなる段階でも同じ考えで縮める。 */ .global-nav-list a { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 78px; color: #fff; font-weight: 500; font-size: 14px; position: relative; padding: 6px 11px; white-space: nowrap; transition: background-color .2s; } .global-nav-list > li > a:hover { background: var(--primary-d); color: #fff; } /* ホバー時の下線は文字幅に合わせる（左右のpaddingぶんは差し引く） */ .global-nav-list a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; width: auto; transform: scaleX(0); transform-origin: left; height: 2px; background: var(--accent); transition: transform .25s; } .global-nav-list a:hover::after { transform: scaleX(1); } .nav-toggle { display: none; } /* ---- 外部サイトへのリンク（2026-10-01：事務所概要の「神戸みなと事務所」）---- 既定のリンク色（薄い緑）は白背景でのコントラストが足りず、本文に埋もれて 「押せる」と分からないため、**濃緑＋下線**にして区別している。 */ .group-link { color: var(--primary-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .group-link:hover { color: var(--primary-dd); } /* ---------- SP nav ---------- */ .sp-nav { position: fixed; inset: 0; z-index: 200; background: var(--primary-d); color: #fff; padding: 90px 28px 40px; overflow-y: auto; } .sp-nav-list { display: flex; flex-direction: column; } .sp-nav-list a { display: block; color: #fff; font-size: 17px; padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.15); } .sp-nav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } /* ---- シミュレーターと説明文の間隔（2026-10-01 第3弾・碓井サイトと同じ形式）---- パネルの中は **シミュレーター → 説明文** の順。実際に始める項目を上に置くご指示のため。 ★説明文（.sim-note）の下に戻さないこと。 */ .sim-panel .sim-widget { margin-bottom: 28px; } @media (max-width: 767px) { .sim-panel .sim-widget { margin-bottom: 20px; } } /* ========================================================= * 右下の浮遊ボタン（自前）／2026-10-01（第3弾）・碓井サイトと同じ形式 * --------------------------------------------------------- * プロコネ製のボタンはJSで隠し、こちらから「相続税／生前対策」を選ばせる。 * 下端の位置は固定CTAバー（46px）を避けた値。 * **`functions.php` の `AKM_SIM_FLOAT_BOTTOM`（60）と必ず揃えること** * ＝プロコネのパネルも同じ高さから開くため、ずれると見た目が合わない。 * * ※以前は `--its-float-offset-bottom` をCSSから当てていたが、 * 当方のボタンとプロコネのパネルの高さを揃える必要が出たため、 * **`data-float-offset-bottom` 属性で渡す方式に統一した**（碓井と同じ）。 * ======================================================= */ .akm-simfab { position: fixed; right: 24px; bottom: 60px; z-index: 160; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .akm-simfab[hidden] { display: none; } /* パネルが開いているあいだは隠す（右下で重なるため）。JSが付け外しする */ .akm-simfab.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; } .akm-simfab-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--primary-d); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(35,60,50,.22); transition: background-color .2s; } .akm-simfab-btn:hover { background: var(--primary-dd); } .akm-simfab-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .akm-simfab-ico { display: inline-flex; } .akm-simfab.is-open .akm-simfab-btn { background: var(--primary-dd); } .akm-simfab-menu { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(28,40,32,.18); padding: 10px; min-width: 248px; } .akm-simfab-menu[hidden] { display: none; } .akm-simfab-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-family: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; } .akm-simfab-item:hover { background: var(--gray); border-color: var(--primary); } .akm-simfab-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .akm-simfab-item-main { font-size: 15px; font-weight: 700; color: var(--primary-d); } .akm-simfab-item-sub { font-size: 12px; color: var(--muted); } @media (max-width: 1023px) { .akm-simfab { right: 14px; } .akm-simfab-btn { min-height: 48px; padding: 0 16px; font-size: 14px; } .akm-simfab-menu { min-width: 0; width: calc(100vw - 28px); max-width: 300px; } } /* ---------- page-hero（内ページMV） ---------- */ .page-hero { position: relative; background: linear-gradient(120deg, var(--primary-d), var(--primary-l)); color: #fff; overflow: hidden; padding: 62px 0; } .page-hero-deco { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border: 40px solid rgba(255,255,255,.08); border-radius: 50%; } .page-hero-inner { position: relative; text-align: center; } .page-hero-title { font-size: 32px; } .page-hero-lead { margin-top: 14px; color: #d9eede; font-size: 15px; } /* ---------- MV（デザインパーツ `section_mv-points-cta` を移植） ---------- 原本：デザインパーツ/section/section_mv-points-cta.css（3ポイント訴求＋CTA型） ・クラス名はパーツ由来の `.mvp-*` を維持し、配色は下記のCSS変数の上書きだけで管理する ・背景写真の位置・拡大率は --mvp-bg-position / --mvp-bg-size-sp で調整すること （代表の顔の見え方はCV率に直結するため、変更時はPC・TB・SPの3サイズで目視確認） ※2026-08-07：旧MV（緑オーバーレイ＋キャッチ＋説明文＋バッジ4点／`.mv-*`）は廃止し、 碓井公認会計士事務所サイトと同じこの形式へ差し替えた（キャッチコピーの文言は従来のまま） */ :root { /* レイアウト（高さは固定px。vh指定だと縦長モニタで写真が間延びするため） ※--mvp-body-width：テキスト側の最大幅。**代表（後呂先生）の顔に3ポイントのボックスが 重ならないよう 660px に抑えている**（碓井は800px。明石の写真は人物が中央寄りのため） */ --mvp-min-height: 640px; --mvp-max-width: var(--wrap); --mvp-body-width: 660px; --mvp-radius: var(--radius); /* 背景写真の表示位置・拡大率（mv.jpg＝代表がホワイトボード前に立つ写真） PCは「右パネル型」＝高さ基準で拡大して右端に寄せる（2026-09-02・案B）。 お顔を大きく／小さくしたいときは --mvp-bg-size の 115% を上下させること。 */ /* 【2026-09-08 優馬様のご指示】背景を代表の写真から**明石海峡大橋**へ差し替えた。 横長の風景写真のため、右パネル型（auto 115% ／ right center）をやめて**全面表示**に戻している。 ※右パネル型は「代表のお顔を3つの強みに重ねない」ための設定で、橋では役目を終えた。 */ --mvp-bg-size: cover; --mvp-bg-position: center center; /* 背景（橋）の柔らかさ。数値を上げるほど背景が遠のき、人物が手前に見える */ --mvp-bg-blur: 1.6px; /* 2026-09-28：優馬様のご指示で 2.4px から少しだけ弱め、橋を鮮明にした */ --mvp-bg-sat: .86; --mvp-bg-bright: 1.05; /* TB・SP（縦積み構成）用の写真エリア。 ※2026-09-28（第3弾）：写真エリアは「橋の背景＋切り抜きの代表」になったため、 --mvp-bg-position-sp は**橋（背景）の見せ位置**を指すようになった（以前は代表の顔の位置）。 横の値を小さくすると橋が右へ、大きくすると左へ動く。 **40% は「代表を左に寄せたときに、主塔とケーブルが代表と重ならない」位置。** */ --mvp-sp-photo-h: 400px; /* 【2026-10-05 第3弾 岡本様のご指示】携帯版で**橋が写真の後ろに隠れていた**ため、 40% → **32%** にして橋を右へずらした。 ・この値は「画像の何％の位置を、表示枠の何％の位置に合わせるか」。 **数字を小さくするほど画像が右へ動く**（＝橋が右に寄る）。直感と逆なので注意。 ・実測（390px幅）：橋の主塔が 写真の右端ぎりぎり → 右へ約40px離れた。 ・★これ以上小さくすると**右側の主塔が画面外に出て**、橋が1本足に見えてしまう。 28%以下にしないこと（360〜500px幅で確認済み）。 */ --mvp-bg-position-sp: 32% 62%; --mvp-bg-size-sp: cover; /* TB・SP（縦積み構成）用 */ --mvp-sp-bg: var(--white); /* 背景ベール */ --mvp-veil-strong: rgba(255,255,255,.94); --mvp-veil-mid: rgba(255,255,255,.72); --mvp-veil-weak: rgba(255,255,255,0); /* 配色（明石カラー：緑×山吹×白） */ --mvp-lead-cl: var(--primary-d); --mvp-lead-line: var(--primary-d); --mvp-dot-cl: var(--accent); /* キャッチコピーは黒を使わない。ベース＝最濃緑／**強調（「不動産」「相続税専門」）＝アクセントの山吹**。 ※【2026-09-07 優馬様のご指示】以前は濃いめの `--accent-d`（#c9962a）を使っていたが、 「MVの『相談を予約する』ボタンより暗い」とのご指摘により **`--accent`（#e8b849）へ変更**した。 ボタンと同じ明るさになる。**暗い方（--accent-d）へ戻さないこと。** */ --mvp-heading-cl: var(--primary-dd); --mvp-heading-name-cl: var(--primary-dd); --mvp-heading-em-cl: var(--accent); --mvp-box-bg: var(--white); --mvp-box-shadow: var(--shadow); --mvp-badge-bg: var(--primary-d); --mvp-badge-cl: var(--white); --mvp-num-cl: var(--primary-d); --mvp-point-cl: var(--ink-2); /* 黒を避け、やわらかい墨色にする */ --mvp-point-em-cl: var(--primary-d); --mvp-point-border: var(--line); --mvp-note-cl: var(--ink-2); /* 背景写真に重なっても読めるよう、薄いグレーより濃くする */ --mvp-btn-bg: var(--accent); --mvp-btn-cl: var(--white); --mvp-btn-hover: var(--accent-d); --mvp-btn-shadow: 0 8px 32px rgba(224,164,30,.32); --mvp-btn-outline-bg: var(--white); /* 写真に重なるため白背景で可読性を確保 */ --mvp-btn-outline-cl: var(--primary-d); --mvp-btn-outline-bd: var(--primary); --mvp-btn-outline-hover: var(--gray); } .mvp { position: relative; min-height: var(--mvp-min-height); display: flex; align-items: center; overflow: hidden; } /* 背景レイヤー */ .mvp-bg { position: absolute; inset: 0; z-index: 0; } .mvp-bg-img { position: absolute; inset: 0; background-image: url('../images/mv-bridge.jpg?v=1788838680'); /* 【2026-09-08】背景は **明石海峡大橋**（mv-bridge.jpg／1400×996）。 実サイト https://akashiminato.com/ のMVに寄せて、横長の風景を全面に敷いている。 ※2026-09-02〜09-07は代表の写真を「右パネル型」で置いていたが、 優馬様のご指示で橋へ差し替えたため、その設定（auto 115% ／ right center）は廃止した。 ※元画像が横1400pxのため、1440px超の画面では拡大されてやや甘くなる。 より大きな原本を受領したら差し替えること。 */ background-size: var(--mvp-bg-size); background-position: var(--mvp-bg-position); background-repeat: no-repeat; /* 【2026-09-28（第4弾）】「橋の画質が良すぎて代表が合成に見える」とのご指摘への対応。 背景を**軽くぼかし、彩度を落とし、少し明るく**して奥行きを作る。 こうすると、くっきりした人物が手前に立っているように見え、切り抜き感が和らぐ。 ・--mvp-bg-blur … ぼかし量（上げるほど背景が遠のく） ・transform: scale(…) … ぼかすと縁に素地が出るため、わずかに拡大して隠している */ filter: blur(var(--mvp-bg-blur)) saturate(var(--mvp-bg-sat)) brightness(var(--mvp-bg-bright)); transform: scale(1.03); transform-origin: center; } /* 左側の文字可読性を確保するベール。 **写真が右端のパネルになったため、ベールは「写真の左端の手前まで白く塗り、 写真に入る手前でフェードアウトさせる」役割に変わった**（左の白地と写真をなじませる）。 後呂先生のお顔のあたりは完全に素通しにする（顔の見え方はCV率に直結する）。 ※変更時はPC・TB・SPの3サイズで必ず目視確認すること。 */ .mvp-bg-veil { position: absolute; inset: 0; /* 【2026-09-28（第4弾）優馬様のご指示】**白モヤは完全に廃止。** 以前は左から右へ白くぼかすグラデーション（左44%まで濃い白）を敷いていたが、 「白モヤ自体を消す」とのご指示により無効化した。 橋は下の .mvp-bg-img 側で**軽くぼかし・彩度を落として**背景に徹させている。 ★白を戻したくなっても、まずはご確認をいただくこと（意図して消している）。 */ background: none; } /* min-width:0 …「.mvp」がflexのため、これが無いと中身（3ポイントの3カラム）の 最小幅にひっぱられて横に広がり、スマホで3カラム目がはみ出す */ /* 代表写真（タブレット・スマホ専用）。PCは背景写真（.mvp-bg-img＝橋）が担当するため出さない。 表示指定は「MV（TB・SP）」のブロック（1024px以下）にまとめてある */ .mvp-photo { display: none; } .mvp-inner { position: relative; z-index: 1; width: 100%; min-width: 0; max-width: var(--mvp-max-width); margin: 0 auto; padding: 80px 64px; } .mvp-body { width: 100%; min-width: 0; max-width: var(--mvp-body-width); } /* リード文（両脇の斜線は疑似要素で描画） */ .mvp-lead { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 24px; font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; color: var(--mvp-lead-cl); } .mvp-lead::before, .mvp-lead::after { content: ""; display: block; width: 2px; height: 28px; background-color: var(--mvp-lead-line); flex-shrink: 0; } .mvp-lead::before { transform: rotate(-20deg); } .mvp-lead::after { transform: rotate(20deg); } /* 傍点（強調ドット） */ .mvp-lead-dots { -webkit-text-emphasis: filled dot var(--mvp-dot-cl); text-emphasis: filled dot var(--mvp-dot-cl); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; } /* キャッチコピー（MVのみゴシック太字。他の見出しは明朝のまま） */ .mvp-heading { margin: 0 0 32px; font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1.35; letter-spacing: .05em; color: var(--mvp-heading-cl); } .mvp-heading-line { display: block; } .mvp-heading-name { font-style: normal; color: var(--mvp-heading-name-cl); } .mvp-heading-lg { font-size: 52px; line-height: 1.3; } .mvp-heading-em { font-style: normal; color: var(--mvp-heading-em-cl); } /* 3ポイント訴求ボックス（左端は他要素と揃える） ※**代表（後呂先生）の顔にかからないよう、テキスト幅（660px）よりさらに狭い 560px に抑えている** （2026-08-07 優馬様のご指示。幅・バッジ・文字サイズを大きくすると顔が隠れるので注意） */ .mvp-points { display: flex; align-items: center; gap: 16px; max-width: 560px; margin-bottom: 16px; padding: 18px; background-color: var(--mvp-box-bg); border-radius: var(--mvp-radius); box-shadow: var(--mvp-box-shadow); } .mvp-points-badge { flex-shrink: 0; width: 96px; height: 96px; margin: 0; border-radius: 50%; background-color: var(--mvp-badge-bg); color: var(--mvp-badge-cl); display: flex; align-items: center; justify-content: center; text-align: center; } .mvp-points-badge-txt { font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; } .mvp-points-list { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; } .mvp-point { flex: 1 1 0; min-width: 0; padding: 0 8px; text-align: center; } .mvp-point + .mvp-point { border-left: 1px solid var(--mvp-point-border); } .mvp-point-num { display: block; margin-bottom: 6px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; letter-spacing: .05em; line-height: 1; color: var(--mvp-num-cl); } .mvp-point-text { margin: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: .01em; color: var(--mvp-point-cl); } .mvp-point-em { font-style: normal; color: var(--mvp-point-em-cl); } /* 円形アイコンは**TB・SP専用**（PCは従来どおり数字 .mvp-point-num を出す）。 ※2026-09-07 國田サイト（交通事故）の携帯版 .mv-badges と同じ形式に揃えた。 */ .mvp-point-icon { display: none; } /* 文言は変えずに行だけ分けたもの。PCでは従来の
と同じ見え方になるよう block にする */ .mvp-point-l1, .mvp-point-l2 { display: block; } .mvp-point-sup { font-size: 10px; font-weight: 400; vertical-align: super; line-height: 0; } /* 注釈（背景写真に重なると読みづらいため、幅を本文より狭めてベールの濃い範囲に収める。 写真の明るい部分に重なっても読めるよう、白のにじみ（text-shadow）も入れている） */ .mvp-note { max-width: 520px; margin: 0 0 32px; font-family: var(--sans); font-size: 12px; line-height: 1.8; letter-spacing: .05em; color: var(--mvp-note-cl); text-shadow: 0 0 6px #fff, 0 0 3px #fff; } /* CTAボタン（2つ並べると自動で横並び） */ .mvp-cta { display: flex; flex-wrap: wrap; gap: 16px; } .mvp-btn { display: flex; align-items: center; justify-content: center; gap: 24px; flex: 1 1 0; min-width: 260px; max-width: 480px; min-height: 64px; padding: 16px 32px; border-radius: var(--mvp-radius); background-color: var(--mvp-btn-bg); color: var(--mvp-btn-cl); text-decoration: none; font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; box-shadow: var(--mvp-btn-shadow); transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .mvp-btn:hover, .mvp-btn:focus-visible { background-color: var(--mvp-btn-hover); color: var(--mvp-btn-cl); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(224,164,30,.4); } /* 枠線ボタン（電話番号） */ .mvp-btn--outline { background-color: var(--mvp-btn-outline-bg); color: var(--mvp-btn-outline-cl); border: 2px solid var(--mvp-btn-outline-bd); box-shadow: none; gap: 12px; } .mvp-btn--outline:hover, .mvp-btn--outline:focus-visible { background-color: var(--mvp-btn-outline-hover); color: var(--mvp-btn-outline-cl); box-shadow: none; } .mvp-btn-arrow { flex-shrink: 0; transition: transform .25s ease; } .mvp-btn:hover .mvp-btn-arrow { transform: translateX(4px); } /* ---------- お悩み ---------- */ .problems-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 auto; } .problems-item { display: flex; align-items: flex-start; gap: 12px; background: var(--gray); border-radius: var(--radius); padding: 18px 20px; } .problems-check { color: var(--primary); display: flex; margin-top: 2px; } .problems-text { font-weight: 500; color: var(--ink-2); } /* 【2026-09-08 優馬様のご指示】上のチェックリストに埋もれて目立たなかったため、 **見出しと同じ丸ゴシック（Zen Maru Gothic）＋大きめ＋太字＋濃緑**にして立たせている。 ※黒文字を使わない方針のため、色は墨色ではなく濃緑（--primary-d）。 */ .problems-lead { text-align: center; margin-top: 34px; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.8; color: var(--primary-d); } /* ---------- 選ばれる理由 ---------- */ .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 32px; position: relative; box-shadow: var(--shadow-sm); } .feature-no { display: inline-block; font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--gray-2); line-height: 1; margin-bottom: 12px; } .section-gray .feature-no { color: #dcecdf; } .feature-title { font-size: 21px; color: var(--primary-d); margin-bottom: 12px; } .feature-text { color: var(--ink-2); font-size: 15px; } /* ---------- 経営理念 ---------- */ .philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .philosophy-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); } .philosophy-mark { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #b0dcbb, var(--primary-l2) 55%, var(--primary) 100%); } .philosophy-title { font-size: 19px; color: var(--primary-d); margin-bottom: 10px; } .philosophy-text { font-size: 14px; color: var(--ink-2); } /* ---------- 対応業務 ---------- */ .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .services-grid .service-card { width: calc((100% - 44px) / 3); } /* 2列×2段の並び（取扱業務の個別ページ「そのほかの取扱業務」＝必ず4件のため）。 3列だと「上3・下1」になり見づらいので、2列にして1枚の横幅を広く取る（2026-09-02 優馬様のご指示） */ .services-grid--2col .service-card { width: calc((100% - 22px) / 2); } .service-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .service-card::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .3s; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .service-card:hover::before { transform: scaleY(1); } .service-no { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: .1em; } .service-card-title { font-size: 22px; color: var(--primary-d); margin: 6px 0 12px; } .service-card-text { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; } .service-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; } /* カード上部のイメージ写真（2026-09-02：取扱業務ページを業務ごとの個別ページへの 入口＝カード一覧にしたときに追加）。カード内の左右パディングいっぱいに広げる */ .service-card-thumb { margin: -32px -30px 20px; aspect-ratio: 4 / 3; overflow: hidden; } .service-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-card:hover .service-card-thumb img { transform: scale(1.04); transition: transform .4s; } /* ---------- 当事務所について ---------- */ .section-about .about-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; } .about-text { margin: 20px 0 28px; color: #dcefe0; font-size: 16px; } .about-media .akm-img { box-shadow: var(--shadow); } /* ---------- ご相談の流れ ---------- デザインパーツ `section_timeline-flow`（横線＋円ノード型）を当テーマ配色へ移植。 クラス名はパーツ由来の `.s03-*` を維持し、色・サイズのみサイト変数に置き換えている。 最終ステップに `.s03-step--accent` を付けると、ノードが濃緑塗り＋見出しが山吹になる。 ※接続ラインの left/right は「100% ÷ ステップ数 ÷ 2」。現在は4ステップのため 12.5%。 `akm_flow()` のステップ数を変える場合はここの値も必ず合わせること（3→16.7% / 5→10%）。 ※2026-08-07：旧・縦タイムライン型（`.flow-*`）から差し替え。 */ .flow-lead { text-align: center; font-size: 16px; color: var(--ink-2); margin: -12px 0 52px; } .flow-lead strong { color: var(--primary-d); font-weight: 700; } .s03-timeline-wrap { position: relative; } .s03-steps { display: flex; position: relative; align-items: flex-start; } /* 各ノードの中心を結ぶ横ライン（ノード径56px の半分＝28px の高さに引く） */ .s03-steps::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: var(--primary-d); z-index: 0; } .s03-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; } /* 円ノード（中に手順番号を表示） */ .s03-node { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--primary-d); background: #fff; color: var(--primary-d); font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-bottom: 24px; } .s03-step--accent .s03-node { background: var(--primary-d); color: #fff; } .s03-step-body { width: 100%; } .s03-step-title { font-family: var(--serif); font-size: 19px; color: var(--primary-d); line-height: 1.5; margin-bottom: 14px; } .s03-step--accent .s03-step-title { color: var(--accent); } .s03-step-desc { font-size: 15px; color: var(--ink-2); line-height: 1.9; } /* TB（〜1024px）：余白と文字サイズのみ調整（横並びは維持） */ @media (max-width: 1024px) { .s03-step { padding: 0 10px; } .s03-step-title { font-size: 17px; } .s03-step-desc { font-size: 14px; } } /* SP（〜767px）：縦並びタイムライン（ノード左・本文右）に切り替え */ @media (max-width: 767px) { .flow-lead { text-align: left; font-size: 15px; margin: -6px 0 34px; } .s03-steps { flex-direction: column; } /* 縦ラインはノード中心（SPのノード径48px の半分＝24px）に沿わせる */ .s03-steps::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 2px; height: auto; } .s03-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 0 0 30px; gap: 20px; } .s03-step:last-child { padding-bottom: 0; } .s03-node { width: 48px; height: 48px; font-size: 18px; margin-bottom: 0; } .s03-step-body { padding-top: 4px; } .s03-step-title { font-size: 18px; margin-bottom: 8px; } } /* ---------- 代表挨拶 / プロフィール ---------- */ .profile-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; } .profile-media .akm-img, .profile-media .img-ph { box-shadow: var(--shadow); } .profile-role { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--primary-d); margin: 8px 0 16px; } .profile-role small { display: block; font-size: 13px; font-family: var(--sans); color: var(--muted); font-weight: 500; margin-bottom: 2px; } .profile-text { color: var(--ink-2); font-size: 16px; margin-bottom: 26px; white-space: pre-line; } /* ---------- お客様の声（写真＋タグバッジ＋声＋属性のカード） ---------- トップはカルーセル（PC3枚／TB2枚／SP1枚・自動再生なし）、解決実績ページは全件グリッド。 カードの形は両ページで共通にする（同じ役割の要素は同じデザイン）。 ※写真は当事務所のイメージ写真であり、お客様ご本人ではない（alt で明示） ※2026-08-07：旧・2×2グリッド（★＋一言のみ）から、碓井サイトと同じ写真付きカードへ差し替え。 */ .voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 0 auto; } .voice-card { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .voice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* カード上部：写真。高さは padding-top で固定（16:10）し、画像ごとの実寸に左右されないようにする */ .voice-photo { position: relative; flex: none; width: 100%; padding-top: 62.5%; overflow: hidden; background: var(--gray); } .voice-photo .akm-img, .voice-photo img, .voice-photo .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; aspect-ratio: auto; } /* カード下部 */ .voice-body { flex: 1; display: flex; flex-direction: column; padding: 24px; } .voice-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .voice-tag { padding: 4px 12px; border-radius: var(--radius); background: var(--primary-d); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; } /* 声本文。※2026-08-07：優馬様のご指示で★評価（.voice-stars）と「」付きの見出しは廃止し、 碓井サイトと同じ「タグ → 本文（太字）→ 区切り線 → 属性」の構成に統一した */ .voice-text { flex: 1; color: var(--ink-2); font-size: 16px; font-weight: 700; line-height: 1.9; margin: 0; } .voice-meta { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 400; } /* ---------- お客様の声カルーセル（トップ） ---------- */ .voice-carousel { position: relative; } .voice-window { overflow: hidden; } .voice-track { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; transition: transform .25s ease; } .voice-item { flex: 0 0 calc((100% - 48px) / 3); } /* PC：3枚 */ .voice-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; } .voice-arrow { width: 48px; height: 48px; /* タップ領域44px以上 */ display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .voice-arrow:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; } .voice-arrow:disabled { opacity: .4; cursor: not-allowed; } .voice-dots { display: flex; align-items: center; gap: 8px; } .voice-dot { position: relative; width: 40px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; } .voice-dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .25s ease; } .voice-dot[aria-current="true"]::after { background: var(--accent); } /* ---------- 実績・解決事例 ---------- */ .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .case-point { background: #fff; border: 2px solid var(--primary); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); } .case-point-title { font-size: 18px; color: var(--primary-d); margin-bottom: 8px; } .case-point-text { font-size: 15px; color: var(--ink-2); } /* ---------- シミュレーション ---------- */ .sim-box { background: transparent; border-radius: 0; padding: 0; } .sim-lead { text-align: center; color: var(--ink-2); margin-bottom: 22px; } .sim-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sim-item { background: #fff; border-radius: var(--radius); padding: 24px 22px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .sim-item-title { font-size: 16px; color: var(--primary-d); margin-bottom: 8px; } .sim-item-text { font-size: 14px; color: var(--ink-2); } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 14px; margin: 0 auto; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 20px 22px; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--primary-d); } .faq-q-mark, .faq-a-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 15px; } .faq-q-mark { background: var(--primary-d); color: #fff; } .faq-a-mark { background: var(--accent); color: #fff; } .faq-q-text { flex: 1; } .faq-q-toggle { flex: none; width: 16px; height: 16px; position: relative; } .faq-q-toggle::before, .faq-q-toggle::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .25s; } .faq-q-toggle::before { width: 16px; height: 2px; top: 7px; } .faq-q-toggle::after { width: 2px; height: 16px; left: 7px; } .faq-q[aria-expanded="true"] .faq-q-toggle::after { transform: scaleY(0); } .faq-a { display: flex; gap: 14px; padding: 0 22px 22px; align-items: flex-start; } .faq-a[hidden] { display: none; } /* ＋を押すまで回答を隠す（HTMLのhidden属性を有効化） */ .faq-a-text { color: var(--ink-2); font-size: 15px; padding-top: 3px; } /* ---------- 末尾CTA（相続のご相談）---------- 背景は上＝濃い緑／下＝やや明るい緑の2トーン。白カードが境目にまたがる構成。 碓井公認会計士事務所・國田サイトと同じ形式（2026-08-07に旧・角丸カード型から差し替え）。 ・背景色はこの2変数のみで調整すること（テーマ共通の --primary-* を直接使わない） ※2026-08-07：カード右上の山吹ラベル（「兵庫県明石市　明石みなと会計事務所」＝`.cta-card-tag`）は 優馬様のご指示で全ページから削除した。復活させる場合は、カードの左右padding と同じ値を `right` に指定すること（PC 92px／TB 44px／SPはカード上部へ全幅配置）。 */ :root { --cta-green-top: #2f6a43; /* 上段（濃い側） */ --cta-green-bottom: #3f8757; /* 下段（やや明るい側） */ } .cta-section { position: relative; overflow: hidden; padding: 92px 0 0; color: #fff; background: linear-gradient(to bottom, var(--cta-green-top) 0%, var(--cta-green-top) 62%, var(--cta-green-bottom) 62%, var(--cta-green-bottom) 100%); } /* カード下の余白（2トーンの下側を見せる） */ .cta-section::after { content: ""; display: block; height: 92px; } .cta-inner { text-align: center; position: relative; } .cta-title { font-size: 44px; line-height: 1.45; margin-bottom: 30px; } /* バッジは白で塗りつぶし＋緑文字（枠線は使わず、バッジ同士は少し離す） */ .cta-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; } .cta-badges li { background: #fff; color: var(--primary-d); border: none; border-radius: 0; padding: 6px 26px; font-size: 19px; font-weight: 700; line-height: 1.6; } .cta-text { font-size: 19px; font-weight: 700; color: #fff; margin: 0 auto 10px; } .cta-note { font-size: 14px; color: #d3ead9; margin-bottom: 46px; } /* 白カード：角丸なし・左右の余白を広く取る */ .cta-card { position: relative; background: #fff; color: var(--ink); border-radius: 0; padding: 44px 92px; max-width: 1040px; margin: 0 auto; box-shadow: var(--shadow); } /* 3ステップ（無彩色グレーの帯・角丸なし） */ .cta-flow { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; background: #f3f3f3; border-radius: 0; padding: 14px 24px; margin-bottom: 42px; } .cta-flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; } .cta-flow-no { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 22px; color: var(--cta-green-bottom); line-height: 1.2; background: none; width: auto; height: auto; border-radius: 0; } .cta-flow-txt { font-size: 16px; font-weight: 700; color: var(--primary-d); line-height: 1.4; } .cta-flow-arrow { display: flex; align-items: center; color: var(--muted); font-size: inherit; font-weight: 400; } .cta-actions { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; } /* 電話番号は黒ではなく濃緑にする（黒文字を減らし、ブランドカラーで見せる方針） */ .cta-tel { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--primary-d); } .cta-tel-row { display: flex; align-items: center; gap: 12px; } .cta-tel-ico { display: flex; color: var(--primary-d); } .cta-tel-num { font-family: var(--serif); font-size: 46px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; color: var(--primary-d); } .cta-tel-note { font-size: 15px; color: var(--ink-2); text-align: center; } .cta-form-btn { flex: 1; min-width: 320px; max-width: 420px; border-radius: 0; padding: 26px 30px; font-size: 20px; box-shadow: none; } .cta-form-btn:hover { box-shadow: none; } .cta-form-btn-arrow { margin-left: auto; font-size: 20px; } /* スマホ：3ステップ（01›02›03）を折り返さず横1列に固定 */ @media (max-width: 767px) { .cta-flow { flex-wrap: nowrap; } } /* ---------- アクセス / テーブル ---------- */ .access-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; } .access-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .access-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 15px; } .access-pin { color: var(--primary); display: flex; margin-top: 3px; } .access-text { color: var(--ink-2); } .access-map .akm-img, .access-map iframe { width: 100%; border: 0; border-radius: var(--radius); } .info-table, .access-table, .fee-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .info-table th, .info-table td, .access-table th, .access-table td, .fee-table th, .fee-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; } .info-table tr:last-child th, .info-table tr:last-child td, .access-table tr:last-child th, .access-table tr:last-child td, .fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: none; } .info-table th, .access-table th { width: 32%; background: var(--gray); color: var(--primary-d); font-weight: 700; } .fee-table { table-layout: fixed; } .fee-table th:first-child, .fee-table td:first-child { width: 150px; white-space: nowrap; } .fee-table thead th { background: var(--primary-d); color: #fff; font-weight: 700; text-align: center; } .fee-table thead th:first-child { text-align: left; } .fee-table td { text-align: left; word-break: break-word; } .fee-price { font-weight: 700; color: var(--primary-d); white-space: normal; line-height: 1.8; } /* ---------- 料金：注意ボックス・リスト ---------- */ .notice-box { background: #fff6e9; border: 1px solid #f0d6a8; border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; font-size: 15px; color: #8a5a12; } .notice-box strong { color: #7a4e0c; } .note-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; } .note-list li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 14px; } .note-list li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } /* ---------- 対応業務詳細 ---------- */ .service-detail-list { display: flex; flex-direction: column; gap: 40px; } .service-detail { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; scroll-margin-top: 100px; } .service-detail:nth-child(even) .service-detail-media { order: 2; } .service-detail-title { font-size: 24px; color: var(--primary-d); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--line); } .service-detail-text { color: var(--ink-2); margin-bottom: 18px; } .service-detail-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); } /* 業務ごとの個別ページ（page-service-detail.php）用。1業務だけを大きく見せる。 ※2026-09-02 新設。写真は常に左、本文は右（左右交互にはしない） */ .service-detail--single { grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; } .service-detail--single .service-detail-title { font-size: 30px; } .service-detail--single .service-detail-text { font-size: 16.5px; line-height: 2; } .service-detail-extra { margin-top: 40px; } .service-detail-extra p { margin-bottom: 1.4em; color: var(--ink-2); } /* 業務の詳細内訳（現在は「相続手続き」のみ／2026-09-02 追加）。見出しは業務説明との区切り */ .service-sub { margin-top: 52px; } .service-sub-head { font-size: 21px; color: var(--primary-d); margin-bottom: 20px; padding-left: 14px; border-left: 5px solid var(--primary); } .service-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-sub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; scroll-margin-top: 100px; } .service-sub-title { font-size: 18px; color: var(--primary-d); margin-bottom: 10px; } .service-sub-text { font-size: 14px; color: var(--ink-2); } /* ---------- contact ---------- */ .contact-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; } .contact-way { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; text-align: center; box-shadow: var(--shadow-sm); } /* 【2026-09-08 優馬様のご指示】「アイコンがダサい」とのご指摘により作り直した。 ・塗りつぶしの淡緑の丸 → **白地＋二重のリング**（外＝山吹の細線／内＝淡緑の細線）。 印章や証書のような静かな品を出すための構成。`box-shadow` で内側のリングを描いている。 ・アイコンは `akm_icon_fine()`（線の太さ1.3px）で、色は**濃緑**。 リングの山吹と二色使いにして落ち着かせている。 ★リングを塗りつぶしに戻さないこと。細線と余白がこの意匠の要。 */ .contact-way-ico { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 5px var(--gray); color: var(--primary-dd); margin-bottom: 18px; } .contact-way-title { font-size: 20px; color: var(--primary-d); margin-bottom: 10px; } .contact-way-text { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; } .contact-way-tel { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--primary-d); } .contact-way-note { font-size: 12px; color: var(--muted); margin-top: 8px; } /* ---------- form ---------- */ .contact-form-area { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } .form-pending-note { background: var(--gray); border-radius: var(--radius); padding: 14px 18px; font-size: 13px; color: var(--muted); margin-bottom: 24px; } .form-row { margin-bottom: 20px; } .form-row label { display: block; font-weight: 700; color: var(--primary-d); margin-bottom: 8px; font-size: 15px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--sans); font-size: 15px; background: #fdfffc; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,164,30,.15); } .req, .opt { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle; } .req { background: #fdeede; color: var(--accent); } .opt { background: var(--gray-2); color: var(--muted); } .form-consent { background: var(--gray); border-radius: 8px; padding: 16px 18px; font-size: 13px; color: var(--ink-2); margin-bottom: 22px; } .form-submit { text-align: center; } .static-form .js-other-row { display: none; } .static-form .js-other-row.is-show { display: block; } /* CF7 最低限の整形（プラグイン導入後の本フォーム） */ .wpcf7-form p { margin-bottom: 18px; } .wpcf7-form label { font-weight: 700; color: var(--primary-d); } .wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; margin-top: 6px; } .wpcf7-form .wpcf7-submit { width: auto; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 15px 40px; font-weight: 700; cursor: pointer; } /* ---------- 投稿一覧 / 汎用ページ ---------- */ .page-content h2 { font-size: 24px; color: var(--primary-d); margin: 30px 0 14px; } .page-content h3 { font-size: 19px; color: var(--primary-d); margin: 24px 0 10px; } .page-content p { margin-bottom: 16px; color: var(--ink-2); } .post-item { border-bottom: 1px solid var(--line); } .post-item-link { display: flex; gap: 18px; align-items: baseline; padding: 18px 4px; } .post-item-date { color: var(--muted); font-size: 13px; flex: none; } .post-item-title { font-size: 17px; color: var(--primary-d); } .error-links { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 30px; } .error-links a { font-weight: 700; } /* ---------- footer ---------- */ .site-footer { background: var(--primary-d); color: #d7e6da; } .footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; padding: 60px 24px; } .footer-name { font-family: var(--serif); font-size: 20px; font-weight: 700; color: #fff; } .footer-en { font-size: 12px; letter-spacing: .12em; color: #b2d6ba; margin: 4px 0 14px; } .footer-meta { font-size: 13px; line-height: 1.9; color: #c2d8c4; } .footer-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 40px; justify-content: end; } .footer-nav-list { display: flex; flex-direction: column; gap: 10px; } .footer-nav-list a { color: #d7e6da; font-size: 14px; } .footer-nav-list a:hover { color: #fff; } .footer-note { border-top: 1px solid rgba(255,255,255,.12); } .footer-note .container { padding: 20px 24px; } .copyright { font-size: 12px; color: #9cbb9f; text-align: center; } /* ---------- SP固定CTAバー ---------- */ .sp-fixed-cta { display: none; } /* ---------- reveal（スクロール出現） ---------- */ .reveal, .section-head, .feature-card, .service-card, .flow-item, .faq-item, .contact-way, .problems-item { opacity: 1; } .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; } .js-reveal.is-visible { opacity: 1; transform: none; } /* ========================================================= * レスポンシブ * ======================================================= */ /* ---- ヘッダー（3段構成）のレスポンシブ／2026-10-01 ---- ナビが**独立した1段**になって横幅に余裕ができたため、切替点を見直している。 旧・1段構成のときの段階（〜1340pxで電話を隠す／〜1200pxでハンバーガー）は役目を終えた。 ★ナビ項目を増減したら、各幅で折り返さないか必ず確認すること。 */ /* 中間幅（〜1500px）：ナビの余白と2段目のボックスを少し詰める */ @media (max-width: 1500px) { .global-nav-list a { min-width: 70px; padding: 6px 9px; font-size: 13.5px; } .global-nav-list a::after { left: 9px; right: 9px; } .global-nav-list > li.menu-item-has-children > a { padding-right: 23px; } .global-nav-list > li.menu-item-has-children > a::before { right: 9px; } .hdr-box { padding: 7px 13px; } .hdr-box--tel .hdr-box-num { font-size: 23px; } .hdr-box--fee .hdr-box-main { font-size: 14px; } .hdr-box--fee em { font-size: 17px; } } /* 〜1280px：ナビ・ロゴ・ボックスをもう一段詰める */ @media (max-width: 1280px) { .global-nav-list a { min-width: 64px; padding: 6px 7px; font-size: 13px; } .global-nav-list a::after { left: 7px; right: 7px; } .global-nav-list > li.menu-item-has-children > a { padding-right: 21px; } .global-nav-list > li.menu-item-has-children > a::before { right: 8px; } .lg-main { font-size: 22px; } .lg-lead { font-size: 12px; } .hdr-box-sub { font-size: 11.5px; } .hdr-box--tel .hdr-box-num { font-size: 21px; } .hdr-box--cta { font-size: 12.5px; } .hdr-bar-txt { font-size: 13px; } .brand-mark--img { height: 48px; } .hdr-group { padding: 6px 11px; } .hdr-group-main { font-size: 13px; } .hdr-group-sub { font-size: 10.5px; } } /* 〜1140px：2段目が窮屈になるため相談料のボックスを隠す （相談料は料金ページと各ページのCTAで案内しているため、導線は失われない） ※2026-10-05：本体サイトへのリンクを足したぶん 1120px → **1140px** に引き上げた。 1,130px 幅で中身の最小幅が 1,140px になり、10px だけ溢れていたため。 */ @media (max-width: 1140px) { .hdr-box--fee { display: none; } .hdr-main-inner { padding: 10px 18px; gap: 14px; } } /* ハンバーガーへの切替点（〜1023px）＝suzuki-zei と同じ切替点。 1段目の帯とナビの帯を隠し、2段目＋ハンバーガーだけにする。 ★他のレイアウト（セクション余白・1カラム化・SP固定CTAバー）は従来どおり1024px以下で切り替わる。 */ @media (max-width: 1023px) { .hdr-bar { display: none; } .hdr-nav { display: none; } .hdr-box--cta { display: none; } /* 2段目が「ロゴ＋電話＋ハンバーガー」だけになり窮屈なため隠す。 導線は事務所概要ページ（page-office.php）の「連携先」が担う。 */ .hdr-group { display: none; } /* 電話は枠を外して文字だけにする（横幅を稼ぐため） */ .hdr-box--tel { border: 0; padding: 0; align-items: flex-end; } .hdr-box--tel .hdr-box-num { font-size: 21px; } .hdr-box--tel .hdr-box-sub { font-size: 10.5px; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--primary-d); border-radius: 2px; transition: transform .3s, opacity .3s; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 1024px) { .section { padding: 60px 0; } .section-title { font-size: 25px; } .features-grid, .services-grid, .problems-list, .contact-ways, .voices-grid, .cases-grid, .philosophy-grid, .sim-items, .section-about .about-inner, .profile-inner, .access-inner, .service-detail, .service-detail--single, .service-sub-grid { grid-template-columns: 1fr; } /* 取扱業務のカード一覧（`.services-grid` は flex のため、上の grid 指定では効かない）。 TBは2列・SPは1列にする。※2026-09-02 に取扱業務ページをカード一覧にしたため追加 */ .services-grid .service-card { width: calc((100% - 22px) / 2); } .service-detail--single { gap: 30px; } .service-detail--single .service-detail-title { font-size: 25px; } .section-about .about-inner { gap: 30px; } .service-detail:nth-child(even) .service-detail-media { order: 0; } .service-sub-grid { gap: 14px; } .footer-inner { grid-template-columns: 1fr; gap: 28px; } .footer-nav { justify-content: start; grid-template-columns: repeat(2, auto); gap: 8px 30px; } /* ========================================================================== MV（タブレット・スマホ）＝縦積み構成 2026-09-02 優馬様のご指示：國田サイト（交通事故）の携帯版と同じ形式にする。 キャッチコピー → 代表のお顔写真 → 当事務所の3つの強み ※2026-09-08：注釈（※1〜）は携帯版では非表示。**写真は代表のお顔のまま**（PCのみ橋）。 ※以前は「TB＝PCと同じ横並び」「SP＝キャッチ→強み→注釈→写真（最下部）」だったが、 **写真を強みより上に持ち上げた**。順番を元に戻さないこと。 ========================================================================== */ .mvp { min-height: auto; align-items: flex-start; background-color: var(--mvp-sp-bg); } /* 【2026-09-08 優馬様のご指示】**携帯・タブレットは代表・後呂先生のお顔写真に戻す**。 PC（1025px以上）の背景は明石海峡大橋のままで、ここでだけ扱いが分かれる。 ・PC用の背景レイヤー（橋＋左右グラデーションのベール）は縦積みでは使わないため消す。 ・代わりに本文中の .mvp-photo（mv.jpg＝代表）が写真を担当する。 ★「橋に統一されている」と勘違いして .mvp-bg を表示に戻さないこと。 */ /* 【2026-09-28（第2弾）】TB・SPも**PCと同じ構成**（橋＋切り抜きの代表）に統一した。 背景レイヤー（.mvp-bg）はPC用の左右グラデーションが縦積みに合わないため引き続き消し、 **橋は .mvp-photo の背景として敷いている**（下の .mvp-photo を参照）。 */ .mvp-bg { display: none; } .mvp-inner { padding: 0; } .mvp-body { max-width: none; padding: 32px 24px 0; text-align: center; } .mvp-lead { font-size: 16px; } .mvp-heading { font-size: 28px; margin-bottom: 24px; } .mvp-heading-lg { font-size: 40px; } /* 代表（切り抜き）＋明石海峡大橋の背景。PCと同じ絵をTB・SPでも見せる。 ・高さは --mvp-sp-photo-h、代表の大きさは --mvp-cut-h-sp で調整する ・橋は下辺（海と街並み）が見えるよう、少し下寄りに置いている */ .mvp-photo { display: flex; align-items: flex-end; /* 代表は**左寄せ**。中央に置くと橋の主塔と重なってしまうため（優馬様のご指示） */ justify-content: flex-start; padding-left: var(--mvp-cut-x-sp); margin: 0 calc(-1 * 24px); height: var(--mvp-sp-photo-h); overflow: hidden; background-image: url('../images/mv-bridge.jpg?v=1788838680'); background-size: var(--mvp-bg-size-sp); background-position: var(--mvp-bg-position-sp); background-repeat: no-repeat; } .mvp-photo img { width: auto; height: var(--mvp-cut-h-sp); object-fit: contain; filter: drop-shadow(0 8px 18px rgba(40, 70, 55, .20)); } /* 3つの強み：國田サイトの携帯版と同じ「画面幅いっぱいの白カード＋3カラム＋縦の区切り線」。 下辺に濃緑のラインを引き、次のセクションとの境目をはっきりさせる。 ※**緑の丸バッジ（当事務所の3つの強み）はTB・SPでは非表示**（2026-09-02 優馬様のご指示）。 PCでは従来どおり表示するので、`.mvp-points-badge` 自体は消さないこと。 */ .mvp-points { max-width: none; gap: 0; margin: 0 calc(-1 * 24px) 0; padding: 16px 10px; border-radius: 0; border-bottom: 3px solid var(--primary-dd); } .mvp-points-badge { display: none; } .mvp-point { padding: 0 10px; } /* 【2026-09-07】ここから下は國田サイト（交通事故）の携帯版 .mv-badges の数値をそのまま移植。 國田は html{font-size:62.5%} で 1rem=10px のため、1.6rem=16px として換算している。 ★文言は変更していない。見た目だけを揃えている。 */ /* 数字はPC専用。TB・SPでは円形アイコンに置き換える */ .mvp-point-num { display: none; } .mvp-point-icon { display: block; width: 44px; height: 44px; margin: 0 auto 8px; color: var(--primary-dd); } /* 1行目＝細字／2行目＝太字（國田の .mv-badge-label と .mv-badge-label strong と同じ関係） */ .mvp-point-text { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-2); } .mvp-point-l2 { font-size: 16px; font-weight: 700; color: var(--primary-dd); } /* 國田の1行目には強調色が無いため、TB・SPでは em の色を打ち消して親に合わせる */ .mvp-point-em { color: inherit; font-weight: inherit; } /* 区切り線の濃さも國田に合わせる（濃緑の18%） */ .mvp-point + .mvp-point { border-left-color: color-mix(in srgb, var(--primary-dd) 18%, transparent); } /* 【2026-09-08 優馬様のご指示】MVの注釈（※1の業務範囲／ご相談料）は **携帯版では非表示**にする。縦積みのMVでは情報量が多く、 ボタンまでの距離が伸びて読み飛ばされるため。 ★PC（1025px以上）では従来どおり表示するので、`.mvp-note` 自体は消さないこと。 ※適用範囲はMVの縦積みと同じ**1024px以下**（タブレットも同じレイアウトのため揃えている）。 */ .mvp-note { display: none; } /* タブレット・携帯では「相談を予約する」ボタンを出さない（2026-08-07 優馬様のご指示）。 フォームへの導線はヘッダーの「相談予約」ボタンと画面下部の固定CTAバーが担う。 ※TBは電話ボタンのみが残り、SPはさらに電話ボタンも非表示になるためMVのボタンは無くなる */ .mvp-cta { padding: 0 24px 32px; } .mvp-btn { font-size: 17px; min-width: 200px; gap: 12px; padding: 16px 20px; } .mvp-btn-arrow { width: 32px; } .mvp-btn:not(.mvp-btn--outline) { display: none; } /* お客様の声カルーセル（TB：2枚表示） */ .voice-item { flex: 0 0 calc((100% - 24px) / 2); } /* SP固定CTA表示（本文が隠れないよう余白確保） */ body { padding-bottom: 66px; } .sp-fixed-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; box-shadow: 0 -4px 16px rgba(0,0,0,.15); } .sp-fixed-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 6px; color: #fff; font-weight: 700; font-size: 14px; } .sp-fixed-tel { background: var(--primary-d); } .sp-fixed-mail { background: var(--accent); } /* アイコン＋文字を横一列（補足文字は非表示）にして薄い1行バーに */ .sp-fixed-txt { display: inline-flex; flex-direction: row; align-items: center; line-height: 1.2; } .sp-fixed-txt small { display: none; } } /* 末尾CTA（TB）：カードの余白と電話番号を1段階縮める */ @media (max-width: 1024px) { .cta-title { font-size: 34px; } .cta-badges li { font-size: 17px; padding: 3px 20px; } .cta-text { font-size: 17px; } .cta-card { padding: 40px 44px; } .cta-tel-num { font-size: 38px; letter-spacing: .06em; } .cta-flow-step { min-width: 120px; } } /* 末尾CTA（SP）：見出し・カード・ボタンを画面幅に収める */ @media (max-width: 767px) { .cta-section { padding: 56px 0 0; } .cta-section::after { height: 56px; } .cta-title { font-size: 24px; margin-bottom: 20px; } .cta-badges li { padding: 6px 12px; font-size: 13px; line-height: 1.6; } .cta-text { font-size: 15px; } .cta-note { margin-bottom: 28px; } .cta-card { padding: 24px 16px; } .cta-tel-num { font-size: 32px; letter-spacing: .04em; } .cta-tel-note { font-size: 12px; } .cta-form-btn { font-size: 16px; min-width: 0; width: 100%; max-width: none; padding: 18px 20px; } .cta-flow { gap: 4px; padding: 14px 8px; margin-bottom: 24px; } .cta-flow-step { min-width: 0; } .cta-flow-no { font-size: 15px; } .cta-flow-txt { font-size: 12px; } /* 電話とボタンは縦積みにする（横並びのままだとボタンが潰れて文字が数行に折り返す） */ .cta-actions { flex-direction: column; gap: 20px; } .cta-tel { justify-content: center; } } @media (max-width: 520px) { .container { padding: 0 18px; } .cta-actions { flex-direction: column; } .cta-tel-num { font-size: 26px; } .contact-form-area { padding: 24px 18px; } } /* ========================================================= * 追加：ヘッダー全幅ドロップダウン・カードアイコン・MV代表チップ * ======================================================= */ /* ---------- ヘッダー ドロップダウン（相談について） ---------- */ .global-nav-list > li { position: relative; } /* ドロップダウン（取扱業務）は右に▼マークの分だけ余白を足す。※区切り線に重ならない位置に置くこと */ .global-nav-list > li.menu-item-has-children > a { padding-right: 26px; } .global-nav-list > li.menu-item-has-children > a::before { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; /* 2026-10-01：ナビが濃緑の帯になったため、矢印も白にして視認性を確保する */ border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-70%) rotate(45deg); } .global-nav-list .sub-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 210px; background: #fff; border-radius: var(--radius); border-top: 3px solid var(--accent); box-shadow: var(--shadow); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 130; } .global-nav-list .sub-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .global-nav-list > li:hover > .sub-menu, .global-nav-list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .global-nav-list .sub-menu li { display: block; } .global-nav-list .sub-menu a { display: block; padding: 11px 22px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--primary-d); } .global-nav-list .sub-menu a::after { display: none; } .global-nav-list .sub-menu a:hover { background: var(--gray); color: var(--accent); } /* ---- 取扱業務メニューの2階層目（2026-09-02 クライアントのご要望） ---- 「相続手続き」にカーソルを合わせる／フォーカスすると、その右側に詳細内訳 （不動産の名義変更・遺産整理・不動産の活用・売却）が開く。 ※項目は `akm_services()` の `sub` から自動生成されるので、増減してもCSSの修正は不要。 */ .global-nav-list .sub-menu li.sub-menu-has-children { position: relative; } .global-nav-list .sub-menu li.sub-menu-has-children > a { padding-right: 34px; } .global-nav-list .sub-menu li.sub-menu-has-children > a::before { content: ""; position: absolute; right: 16px; top: 50%; width: 5px; height: 5px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-50%) rotate(-45deg); } .global-nav-list .sub-menu--child { top: -8px; left: 100%; transform: none; min-width: 230px; border-top: 3px solid var(--primary); } /* 親メニューの左右をまたぐときにマウスが抜けないようにする受け皿 */ .global-nav-list .sub-menu--child::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; height: auto; } .global-nav-list .sub-menu li.sub-menu-has-children:hover > .sub-menu--child, .global-nav-list .sub-menu li.sub-menu-has-children:focus-within > .sub-menu--child { opacity: 1; visibility: visible; transform: none; } .global-nav-list .sub-menu--child a { font-size: 13.5px; } /* 画面右端でメニューがはみ出す場合は左側に開く */ @media (max-width: 1400px) { .global-nav-list .sub-menu--child { left: auto; right: 100%; } .global-nav-list .sub-menu--child::before { left: auto; right: -12px; } } /* ---------- カードのアイコン（選ばれる理由・取扱業務・理念） ---------- */ .feature-card { position: relative; } .feature-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gray); color: var(--primary); margin-bottom: 16px; } .feature-ico .icon { width: 28px; height: 28px; } .feature-card .feature-no { position: absolute; top: 30px; right: 32px; margin: 0; font-size: 34px; color: #e2eee4; } .section-gray .feature-card .feature-no { color: #d6e8da; } .service-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .service-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--gray); color: var(--primary); flex: none; } .service-ico .icon { width: 24px; height: 24px; } .philosophy-mark { display: flex; align-items: center; justify-content: center; color: #fff; } .philosophy-mark .icon { width: 24px; height: 24px; } /* ---------- 選ばれる理由：デザインパーツ section_2col-text-image 移植（番号見出し＋本文＋写真の2カラム） ---------- */ .features-2col { margin-top: 8px; } .s04 { background: transparent; padding: 52px 0; } .s04 + .s04 { border-top: 1px solid var(--line); } .s04-container { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .s04-inner { display: grid; grid-template-columns: 55fr 45fr; gap: 56px; align-items: center; } .s04-inner.s04-reverse .s04-img-wrap { order: -1; } .s04-text { min-width: 0; } .s04-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; line-height: 1; } .s04-num-label { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--primary); letter-spacing: .05em; } /* 【2026-09-08 優馬様のご指示】数字がほとんど見えていなかったため、 淡い緑（#d3e7d6）から**アクセントカラーの山吹**へ変更した。「その」のラベルは淡緑のまま。 */ .s04-num-value { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 60px; line-height: .85; color: var(--accent); } .s04-title { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--primary-d); line-height: 1.55; letter-spacing: .02em; margin-bottom: 18px; } .s04-body-text { font-size: 15.5px; color: var(--ink-2); line-height: 1.95; } .s04-body-text p + p { margin-top: 14px; } .s04-img-wrap { width: 100%; min-width: 0; } .s04-img-wrap .akm-img, .s04-img-wrap img { width: 100%; height: auto; display: block; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); } @media (max-width: 1024px) { .s04 { padding: 40px 0; } .s04-inner { grid-template-columns: 1fr; gap: 24px; } /* スマホ版は全項目「文章が上・写真が下」に統一（PC版の左右交互は維持） */ .s04-inner.s04-reverse .s04-img-wrap { order: 0; } .s04-num-value { font-size: 50px; } .s04-title { font-size: 20px; } } /* ※旧MVの代表チップ（`.mv-rep-*`）は、MVを `.mvp-*` 形式へ差し替えた際に廃止した（2026-08-07） */ /* ---------- 私たちの理念：3カラム（イラスト＋横書き見出し・左上1行） ---------- */ .philosophy-3col { margin-top: 8px; } .philosophy-3col .s01-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .philosophy-3col .s01-item { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 24px 26px; box-shadow: var(--shadow-sm); } /* 横書き見出し（左上・1行） */ .philosophy-3col .s01-tag { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--primary-d); letter-spacing: .02em; line-height: 1.4; white-space: nowrap; text-align: left; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--primary-l2); } /* 写真（相続テーマの実写真） */ .philosophy-3col .s01-illust { width: 100%; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--gray); } .philosophy-3col .s01-illust img { display: block; width: 100%; height: 100%; object-fit: cover; } .philosophy-3col .s01-body { font-size: 15px; color: var(--ink-2); line-height: 1.95; flex: 1; margin: 0; } @media (max-width: 1024px) { .philosophy-3col .s01-grid { gap: 18px; } .philosophy-3col .s01-tag { font-size: 16px; } .services-grid .service-card { width: calc((100% - 22px) / 2); } } @media (max-width: 767px) { .services-grid .service-card { width: 100%; } } @media (max-width: 767px) { .philosophy-3col .s01-grid { grid-template-columns: 1fr; gap: 20px; } .philosophy-3col .s01-item { padding: 22px 20px; } .philosophy-3col .s01-body { font-size: 14px; } } /* ---------- 取扱業務カード：ビジュアル（AI写真＋一部SVG） ---------- */ .service-card-illust { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; margin: 4px 0 14px; background: var(--gray); } .service-card-illust img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 取扱業務ページ：業務ビジュアル */ .service-detail-illust { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--gray); } .service-detail-illust img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------- アクセス：Googleマップ埋め込み（レスポンシブ） ---------- */ .map-embed { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-top: 14px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #f0f6f0; } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 767px) { .map-embed { aspect-ratio: 3 / 2; margin-top: 12px; } } /* ---------- アクセス（PC：情報テーブルを上・写真＋地図を下に横並び） ---------- */ .access-table--full { width: 100%; } .access-table--full th { width: 200px; } .access-media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: start; } .access-media-photo .akm-img, .access-media-photo img { width: 100%; border-radius: var(--radius); } .access-media .map-embed { margin-top: 0; } /* 事務所情報ページ：アクセス（上＝住所・アクセス文字／下＝写真＋地図＋リンク。ホームと同形式） */ .access-lead { text-align: center; max-width: 760px; margin: 0 auto; } .access-address { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .access-lead .access-list { margin-top: 6px; } .access-lead .access-list li { justify-content: center; } .access-map-link { margin-top: 10px; text-align: right; font-size: 14px; font-weight: 700; } .access-map-link a { color: var(--primary-d); } .access-map-link a:hover { color: var(--accent); } @media (max-width: 860px) { .access-table--full th { width: 34%; } .access-media { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; } } /* ---------- SP専用改行ユーティリティ（PCでは非表示・スマホのみ改行） ---------- */ .br-sp { display: none; } @media (max-width: 767px) { .br-sp { display: inline; } /* 取扱業務のカード一覧（SP：1列） */ .services-grid .service-card { width: 100%; } /* お客様の声（SP：カルーセルは1枚表示・カード内の余白を詰める） */ .voice-item { flex: 0 0 100%; } .voice-body { padding: 20px; } .voice-text { font-size: 15px; } .voice-nav { margin-top: 28px; } /* ---- MV（SP）：縦積み構成（1024px以下の指定を引き継ぎ、文字サイズと余白だけ詰める） ---- 並びは キャッチ → 代表のお顔写真 → 3つの強み → 注釈（2026-09-02 優馬様のご指示）。 レイアウトの本体は「MV（タブレット・スマホ）＝縦積み構成」のブロックにあるので、 構造を変えたい場合はそちらを修正すること。 */ /* 画面が狭いぶん、写真エリアの高さはタブレットより低くする */ .mvp-body { padding: 32px 16px 0; } .mvp-lead { gap: 12px; margin-bottom: 14px; font-size: 14px; } .mvp-lead::before, .mvp-lead::after { height: 22px; } .mvp-heading { margin-bottom: 20px; font-size: 24px; } .mvp-heading-lg { font-size: 32px; } .mvp { --mvp-sp-photo-h: 300px; } /* 写真・強みカードは画面の左右いっぱいに広げる（SPは本文の左右余白が16px） */ .mvp-photo { margin: 0 -16px; } /* 【2026-09-07】國田サイト（交通事故）の携帯版（767px以下）の数値をそのまま移植 */ .mvp-points { margin: 0 -16px; padding: 14px 6px; } .mvp-point { padding: 0 6px; } .mvp-point-icon { width: 38px; height: 38px; margin-bottom: 6px; } .mvp-point-text { font-size: 12px; line-height: 1.45; } .mvp-point-l2 { font-size: 14px; } /* お悩みのリード文はSPでは17pxに（20pxのままだと2行に割れて収まりが悪い） */ .problems-lead { font-size: 17px; margin-top: 26px; } /* SPは電話番号のボタンも出さない（2026-08-07 優馬様のご指示）。 電話は画面下部の固定CTAバーから利用できる。 ※SPは「相談を予約する」（1024px以下で非表示）と電話ボタンの**両方が消える**ため、 この入れ物ごと隠す。**2026-09-08：残しておくと余白だけが残り、 背景の橋の暗い部分（森）が帯のように透けて見えるため。** */ .mvp-cta { display: none; flex-direction: column; padding: 0 16px 28px; } .mvp-btn { max-width: none; min-width: 0; gap: 16px; font-size: 17px; } .mvp-btn-arrow { width: 40px; } .mvp-btn--outline { display: none; } /* 上部ブランド（明石みなと会計事務所）／2026-10-01：3段構成のクラス名に合わせて更新 */ .hdr-main-inner { padding: 10px 16px; gap: 12px; } .brand-mark { width: 36px; height: 36px; } .brand-mark--img { height: 42px; max-width: 72px; } .lg-main { font-size: 18px; } /* リード文・英語名は携帯版で2行に折り返さないよう、少し詰めて1行に収める */ .lg-lead { font-size: 10.5px; letter-spacing: .01em; white-space: nowrap; } .lg-sub { display: none; } /* 電話はこの幅から画面下部の固定CTAバーが担当するため、ヘッダーからは隠す */ .hdr-box--tel { display: none; } } /* ========================================================= * 解決実績ページ（case-card）／取扱業務の料金／お客様の声の署名 * ※akashi-minato で追加したコンポーネント * ======================================================= */ .case-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; } .case-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 28px 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .case-card::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--primary-l), var(--primary-d)); } .case-card-no { display: inline-block; font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--primary-d); background: var(--gray); border-radius: 999px; padding: 3px 14px; margin-bottom: 12px; } .case-card-title { font-size: 19px; color: var(--ink); margin-bottom: 16px; line-height: 1.6; } .case-card-detail { margin: 0; } .case-card-row { display: grid; grid-template-columns: 104px 1fr; gap: 4px 14px; padding: 12px 0; border-top: 1px dashed var(--line); } .case-card-row:first-child { border-top: none; padding-top: 0; } .case-card-row dt { font-weight: 700; font-size: 14px; color: var(--primary-d); } .case-card-row dd { margin: 0; font-size: 15px; color: var(--ink-2); } .case-card-row--result dt { color: var(--accent); } .case-card-row--result dd { color: var(--ink); font-weight: 500; } /* 取扱業務：料金の目安 */ .service-detail-fee { margin: 14px 0 4px; padding: 12px 16px; background: var(--gray); border-left: 3px solid var(--primary); border-radius: 6px; font-size: 15px; color: var(--ink-2); } .service-detail-fee-label { display: inline-block; font-weight: 700; color: var(--primary-d); margin-right: 10px; } /* 取扱業務：業務ごとの導線（「〇〇を相談する」／相続税申告のみ「相続税シミュレーションを行う」） */ .service-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 16px; } /* シミュレーションへの導線は相談とは別のアクションなので、色（緑）で区別する */ .service-detail-link--sim { color: var(--primary-d); } .service-detail-link--sim:hover { color: var(--primary); } /* 携帯版のみ「さらに表示」トグル（PCは全件表示・ボタン非表示）。解決実績・お悩みで共用 */ .sp-more-btn { display: none; } @media (max-width: 767px) { .cases-grid .case-point--more, .problems-list .problems-item--more { display: none; } .cases-grid.is-open .case-point--more { display: block; } .problems-list.is-open .problems-item--more { display: flex; } .sp-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 20px auto 0; padding: 12px 30px; background: #fff; color: var(--primary-d); border: 2px solid var(--primary); border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; } .sp-more-btn .sp-more-ico { color: var(--accent); font-weight: 900; } .sp-more-btn.is-hidden { display: none; } } @media (max-width: 767px) { .case-list { grid-template-columns: 1fr; gap: 18px; } .case-card { padding: 22px 20px; } .case-card-row { grid-template-columns: 84px 1fr; } } /* ========================================================= * 追加（2026-08-07）：取扱業務タブ（.s11-*）／相続税シミュレーションの選択タブ（.sim-tab-*） * 碓井公認会計士事務所サイトから当テーマ配色（緑×山吹×白）へ移植したもの。 * ======================================================= */ /* ---------- 取扱業務（トップ：タブ切替型） ---------- デザインパーツ `section_services-tabs` を当テーマ配色へ移植。 クラス名はパーツ由来の `.s11-*` を維持し、色・サイズのみサイト変数に置き換えている。 ・PC ：タブを1行に均等配分／パネルは左＝写真・右＝見出し＋本文の2カラム ・SP ：タブは3列で折り返し／パネルは 見出し→写真→本文 の縦積み ・タブとパネルの紐付けは data-slug ／ aria-controls、切替の動作は main.js が担当 ・**画面幅いっぱい**に置く前提のため角丸・影は付けない（テンプレート側で .container の外に出している） ・業務名の左の丸はヘッダーと同じ `.brand-mark`（全業務で共通・アイコンは使わない） */ .s11 { background: #fff; overflow: hidden; scroll-margin-top: 100px; } /* トップの取扱業務：白いタブ枠の下に余白が残らないよう、セクション下パディングを詰める */ #services.section-services { padding-bottom: 0; } /* タブナビゲーション */ .s11-tabs { display: flex; flex-wrap: nowrap; width: 100%; } .s11-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; background: var(--muted); color: #fff; border: none; border-right: 1px solid rgba(255,255,255,.3); cursor: pointer; position: relative; transition: background-color .2s; text-align: center; font-family: inherit; } .s11-tab:last-child { border-right: none; } .s11-tab:hover:not(.is-active) { background: #5f6b5c; } .s11-tab.is-active { background: var(--primary-d); } /* アクティブタブ下の三角インジケーター */ .s11-tab.is-active::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--primary-d); z-index: 2; } .s11-tab-ja { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; } .s11-tab-en { font-size: 11px; letter-spacing: .1em; opacity: .85; } /* パネル（非アクティブは非表示） */ .s11-panels { position: relative; } .s11-panel { display: none; } .s11-panel.is-active { display: block; } /* 全幅表示のため、右カラムの左右余白は画面幅に応じて可変（広い画面でも本文が間延びしない） */ .s11-panel-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; min-height: 520px; } .s11-panel-hdr { grid-column: 2; grid-row: 1; padding: 56px clamp(32px, 4.5vw, 88px) 22px; display: flex; flex-direction: column; justify-content: flex-end; } .s11-panel-img { grid-column: 1; grid-row: 1 / 3; overflow: hidden; } /* パネル内の写真は枠いっぱいに敷くため、共通の .akm-img の角丸・影・比率を打ち消す */ .s11-panel-img .akm-img, .s11-panel-img img, .s11-panel-img .img-ph { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; border-radius: 0; box-shadow: none; padding-top: 0; } .s11-panel-body { grid-column: 2; grid-row: 2; padding: 0 clamp(32px, 4.5vw, 88px) 56px; display: flex; flex-direction: column; } .s11-heading-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* 業務名の左の丸（ヘッダーロゴと同じ .brand-mark を使い、全業務で統一） */ .s11-logo { flex: none; display: flex; align-items: center; line-height: 1; } .s11-logo .brand-mark { width: 30px; height: 30px; } .s11-heading { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--primary-d); letter-spacing: .04em; line-height: 1.35; margin: 0; } .s11-rule { border: none; border-top: 1px solid var(--line); margin: 0; } .s11-text { font-size: 15.5px; line-height: 2; color: var(--ink-2); margin: 24px 0 32px; } /* パネル下部のボタン（横線＋丸ボタン）。文言と遷移先は akm_services() の cta_label / link で制御 */ .s11-more { display: flex; align-items: center; gap: 16px; margin-top: auto; } .s11-more:hover .s11-more-btn { transform: scale(1.08); } .s11-more-text { flex: none; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .06em; white-space: nowrap; } .s11-more-line { flex: 1; height: 1px; background: var(--line); } .s11-more-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .2s; } @media (max-width: 1024px) { .s11-tab { padding: 14px 8px; } .s11-tab-ja { font-size: 14px; } .s11-tab-en { font-size: 10px; } .s11-panel-inner { min-height: 380px; } .s11-panel-hdr { padding: 34px 28px 16px; } .s11-panel-body { padding: 0 28px 34px; } .s11-heading { font-size: 21px; } .s11-text { font-size: 15px; margin: 20px 0 26px; } } @media (max-width: 767px) { /* タブは**2列で折り返し**（トップは主要4業務＝2+2行）。 ※2026-09-02：トップの業務が5→4に減ったため、3列のままだと「上3・下1」の アンバランスな並びになっていた。**2列＝上2・下2に修正**（クライアントのご要望）。 ※トップの業務数を変える場合は、この列数も合わせて見直すこと。 */ .s11-tabs { flex-wrap: wrap; } .s11-tab { flex: 0 0 50%; max-width: 50%; padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,.3); } /* 2列目（右端）のタブは縦の区切り線を出さない（画面の端に線が出てしまうため） */ .s11-tab:nth-child(2n) { border-right: none; } .s11-tab-ja { font-size: 13px; letter-spacing: .04em; } .s11-tab-en { font-size: 9px; letter-spacing: .06em; } .s11-tab.is-active::after { display: none; } /* パネルは 見出し→写真→本文 の縦積み */ .s11-panel-inner { display: flex; flex-direction: column; min-height: auto; } .s11-panel-hdr { order: 1; padding: 26px 20px 14px; } .s11-panel-img { order: 2; } .s11-panel-img .akm-img, .s11-panel-img img, .s11-panel-img .img-ph { height: auto; aspect-ratio: 4 / 3; } .s11-panel-body { order: 3; padding: 22px 20px 30px; } .s11-heading { font-size: 19px; } .s11-logo .brand-mark { width: 24px; height: 24px; } .s11-text { font-size: 15px; line-height: 1.9; margin: 18px 0 22px; } .s11-more-text { font-size: 13px; } .s11-more-btn { width: 40px; height: 40px; } } /* ---------- 相続税シミュレーション（page-simulation.php） ---------- ※2026-08-07：自作シミュレーターを廃止し、プロコネのウィジェットへ差し替えたため、 従来の `.calc-*`（入力フォーム・判定・概算税額・免責）のスタイルは全て削除した。 ページ上部に残しているのは「相続税申告／生前対策」の**選択タブ（.sim-tab-*）**と、 その中身である**説明文（.sim-note-*）**のみ。**ここに計算フォームのスタイルを戻さないこと。** ウィジェットの見た目はプロコネ側（`data-theme="calmGreen"`）が持つため、当テーマでは指定しない。 */ .sim-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; } .sim-tab { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; text-align: left; cursor: pointer; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); font-family: inherit; color: var(--ink-2); transition: background .2s, border-color .2s, color .2s, box-shadow .2s; } .sim-tab:hover { border-color: var(--primary); } .sim-tab.is-active { background: var(--primary-d); border-color: var(--primary-d); color: #fff; box-shadow: var(--shadow-sm); } .sim-tab-title { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--primary-d); line-height: 1.5; } .sim-tab.is-active .sim-tab-title { color: #fff; } .sim-tab-text { font-size: 13px; line-height: 1.7; } .sim-tab.is-active .sim-tab-text { color: #dcefe0; } .sim-panel[hidden] { display: none; } /* パネルの中身＝「シミュレーションを行う意味」の説明文 */ .sim-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 36px 40px; } .sim-note-title { font-size: 21px; color: var(--primary-d); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--line); } .sim-note-text { color: var(--ink-2); line-height: 2; } .sim-note-text + .sim-note-text { margin-top: 16px; } .sim-note-text strong { color: var(--primary-d); font-weight: 700; } /* プロコネのウィジェットを置く枠（中身の見た目はプロコネ側が持つ） */ .sim-widget { margin-top: 40px; } @media (max-width: 767px) { .sim-tablist { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; } .sim-tab { padding: 16px 18px; } .sim-tab-title { font-size: 17px; } .sim-note { padding: 24px 20px; } .sim-note-title { font-size: 18px; } .sim-note-text { font-size: 15px; line-height: 1.95; } .sim-widget { margin-top: 28px; } } /* ========================================================= * 追加（2026-08-07）：解決実績 ビフォーアフター型カード（.s09-* ／ .cflow-*） * 碓井公認会計士事務所サイトのデザインパーツ `section_case-before-after` を * 当テーマ配色（緑×山吹）へ移植した3カラム構成。 * PC：左（どんなご相談か）｜中（状態の変化）｜右（ご相談時→対応→ご依頼後） * TB：上段に左＋中、下段に右 * SP：すべて縦積み * ※碓井は中央が「当初→精査後」の税額の棒グラフだが、明石は**金額のご提供が無い**ため * 数値ではなく「状態の変化」を図示している。**数値を作ってグラフ化しないこと。** * ======================================================= */ :root { --s09-card-bg: #fff; --s09-card-border: var(--line); --s09-icon-bg: #dcece2; /* アイコン背景（淡い緑） */ --s09-icon-fg: var(--primary-d); --s09-label-before: #93a89b; /* 「ご相談時」ラベル（くすんだ緑グレー） */ --s09-label-support: var(--accent); /* 「当事務所の対応」ラベル（山吹） */ --s09-label-after: var(--primary); /* 「ご依頼後」ラベル */ --s09-arrow: var(--accent); } /* セクション見出しの枠付きEN（RESULTS／CASE STUDY） */ .section-en--boxed { display: inline-block; border: 1px solid var(--primary-d); padding: 7px 22px; letter-spacing: .22em; color: var(--primary-d); margin-bottom: 18px; } /* 見出し内のキーワード強調（山吹） */ .section-cases .section-title em { font-style: normal; color: var(--accent); } .s09-cards { display: flex; flex-direction: column; gap: 26px; } .s09-card { display: grid; grid-template-columns: 0.86fr 1.15fr 1.35fr; align-items: center; gap: 0; background: var(--s09-card-bg); border: 1px solid var(--s09-card-border); border-radius: var(--radius); overflow: hidden; } /* ---- 左：どんなご相談か ---- */ .s09-person { position: relative; text-align: center; padding: 34px 26px; border-right: 1px solid var(--s09-card-border); align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 左→中央をつなぐ小さな三角（PCのみ） */ .s09-person::after { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent var(--s09-arrow); z-index: 1; } .s09-person-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--s09-icon-bg); color: var(--s09-icon-fg); display: grid; place-items: center; margin-bottom: 18px; } .s09-person-icon svg { width: 42px; height: 42px; } .s09-person-headline { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.6; color: var(--primary-d); /* 黒を避けて濃緑に */ } .s09-person-attr { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.7; } /* ---- 中央：ご相談時 → ご依頼後 の状態変化 ---- */ .s09-chart { padding: 30px 22px; border-right: 1px solid var(--s09-card-border); align-self: stretch; display: flex; align-items: center; } .cflow { width: 100%; background: linear-gradient(180deg, #fbfdfb 0%, #f0f7f1 100%); border-radius: var(--radius); padding: 22px 18px 18px; text-align: center; } .cflow-step { border-radius: var(--radius); padding: 14px 14px; } .cflow-step--before { background: #eceff0; border: 1px solid #d9dfda; } .cflow-step--after { background: var(--primary-d); border: 1px solid var(--primary-d); } .cflow-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; } .cflow-step--before .cflow-label { color: var(--s09-label-before); } .cflow-step--after .cflow-label { color: #cfe6d6; } .cflow-text { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.65; } .cflow-step--before .cflow-text { color: var(--ink-2); } .cflow-step--after .cflow-text { color: #fff; } /* 下向き矢印（山吹） */ .cflow-arrow { display: flex; justify-content: center; color: var(--accent); margin: 8px 0; } /* 成果のキーワード帯 */ .cflow-badge { margin-top: 14px; border: 1px solid #e6cf9a; border-radius: 999px; background: #fdf7e8; padding: 7px 12px; font-size: 13.5px; font-weight: 700; color: var(--accent); line-height: 1.5; } /* ---- 右：ご相談時 → 当事務所の対応 → ご依頼後 ---- */ .s09-detail { padding: 30px 28px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .s09-detail-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; } .s09-detail-label--before { color: var(--s09-label-before); } .s09-detail-label--support { color: var(--s09-label-support); } .s09-detail-label--after { color: var(--s09-label-after); } .s09-detail-text { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); } .s09-detail-arrow { text-align: center; color: var(--s09-arrow); font-size: 14px; margin: 10px 0 12px; line-height: 1; } /* 注記（プライバシー保護のため一部変更している旨）※削除しないこと */ .cases-disclaimer { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.8; } /* ---- レスポンシブ ---- */ @media (max-width: 1024px) { .s09-card { grid-template-columns: 0.9fr 1.1fr; } .s09-person { border-bottom: 1px solid var(--s09-card-border); } .s09-chart { border-right: 0; border-bottom: 1px solid var(--s09-card-border); } .s09-detail { grid-column: 1 / -1; padding: 26px 28px; } .s09-detail-arrow { margin: 10px 0 12px; } } @media (max-width: 767px) { .s09-card { grid-template-columns: 1fr; } .s09-person { padding: 26px 20px 22px; border-right: 0; } .s09-person::after { /* SPは下向きの三角に切り替え */ right: auto; left: 50%; top: auto; bottom: -9px; transform: translateX(-50%); border-width: 10px 8px 0 8px; border-color: var(--s09-arrow) transparent transparent transparent; } .s09-person-icon { width: 66px; height: 66px; margin-bottom: 14px; } .s09-person-icon svg { width: 34px; height: 34px; } .s09-person-headline { font-size: 16px; } .s09-chart { padding: 22px 16px; } .cflow { padding: 18px 14px 14px; } .cflow-text { font-size: 14px; } .s09-detail { padding: 22px 20px; } .s09-detail-text { font-size: 14px; } } /* ========================================================= * アニメーション抑制（2026-09-02 クライアントのご要望） * 「過度なアニメーションや複雑なカスタムデザインは避け、シンプルで読みやすい * スタンダードな設計にする」というご依頼に対応。 * * ・スクロール時のフェードイン（.js-reveal）を無効化＝最初から表示する * ・カード・ボタンの浮き上がり（translateY）を停止 * ・写真の拡大（scale）を停止 * ・**色の変化（背景色・文字色）は残す**＝どこが押せるかは分かるようにするため * * ★ここを削除すると動きが復活する。**動きを足す方向の変更はしないこと。** * ファイル末尾に置いているのは、上の各指定を確実に打ち消すため（順序が重要）。 * ======================================================= */ /* スクロール時のフェードイン（JSが .js-reveal を付ける）を無効化 */ .js-reveal, .js-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } /* 浮き上がり・拡大の停止（ホバー／フォーカス時） */ .btn:hover, .hdr-box--cta:hover, /* 2026-10-01：3段ヘッダー化で .header-contact-btn から名称変更 */ .mvp-btn:hover, .mvp-btn:focus-visible, .service-card:hover, .voice-card:hover { transform: none !important; } .service-card:hover .service-card-thumb img, .s11-more:hover .s11-more-btn { transform: none !important; } /* ホバー時に影を強めるのもやめ、常に一定の淡い影にする */ .service-card:hover, .voice-card:hover { box-shadow: var(--shadow-sm) !important; } .mvp-btn:hover, .mvp-btn:focus-visible { box-shadow: var(--mvp-btn-shadow) !important; } /* 画像のズーム用トランジションも無効化（残しておくと戻るときに動いて見える） */ .service-card-thumb img { transition: none !important; } /* OSで「視差効果を減らす」を選んでいる方への配慮（標準的な作法） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- 代表プロフィール表（略歴・出身地など／2026-09-02 追加） ---------- ★データ（akm_profile_facts()）が空のあいだはPHP側で丸ごと出力されないため、 このスタイルは情報を受領して初めて効く。 */ .profile-facts { margin: 28px 0 0; padding: 22px 24px; background: var(--gray); border-radius: var(--radius); } /* ラベル列は「税理士登録番号」（7文字）が折り返さない幅にしている（2026-09-28） */ .profile-fact { display: grid; grid-template-columns: 126px 1fr; gap: 12px; padding: 8px 0; } .profile-fact + .profile-fact { border-top: 1px solid var(--line); } .profile-fact-label { font-weight: 700; color: var(--primary-d); font-size: 14.5px; } .profile-fact-value { margin: 0; color: var(--ink-2); font-size: 14.5px; } @media (max-width: 767px) { .profile-facts { padding: 18px 16px; } .profile-fact { grid-template-columns: 1fr; gap: 4px; } } /* ========================================================================== 料金ページ（page-fee.php）／2026-09-07 全面刷新で追加 -------------------------------------------------------------------------- 「①基本報酬 ＋ ②加算報酬 ＋ ③その他の業務報酬」の積み上げ方式で見せる。 ★このサイトは「アニメーション抑制」方針のため、 フェードイン・浮き上がり・拡大の演出は一切追加しないこと。 ========================================================================== */ /* ---------- 報酬の考え方（3枚のカード） ---------- */ .fee-policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 8px; } .fee-policy li { background: var(--gray); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; } .fee-policy-title { display: block; font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--primary-d); margin-bottom: 8px; } .fee-policy-text { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.85; } /* ---------- 料金の構成（①②③のサマリー） ---------- */ .fee-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 12px; } .fee-summary li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; text-align: center; box-shadow: var(--shadow-sm); } .fee-summary-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 700; } .fee-summary-title { display: block; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--primary-d); margin: 10px 0 8px; } .fee-summary-desc { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; text-align: left; } /* ---------- 表の見出し（①②③） ---------- */ .fee-h3 { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 22px; color: var(--primary-d); margin: 52px 0 12px; } .fee-h3-no { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--primary-d); color: #fff; font-size: 17px; font-weight: 700; } .fee-h3-lead { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; } /* 横に広い表はスマホで表内スクロールさせる（ページ全体を横スクロールさせない） */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 料金表の行見出し（遺産総額・項目名の列） ※既定の .fee-table は1列目を「折り返し禁止・150px」にしているが、 「非上場株式の評価（1社につき）」のような長い項目名が 金額の列にはみ出して重なるため、料金ページでは折り返しを許可し幅も広げる。 */ .fee-table tbody th { background: var(--gray); color: var(--primary-d); font-weight: 700; font-size: 15px; } .fee-table th:first-child, .fee-table td:first-child { width: 210px; white-space: normal; } .fee-table tbody tr:nth-child(even) td { background: #fbfdfb; } .fee-sub { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-2); } /* ---------- お見積りの例 ---------- */ .fee-example { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; } .fee-example li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .fee-example-cond { font-size: 14px; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .fee-example-calc { font-size: 13.5px; color: var(--muted); margin-top: 12px; } .fee-example-price { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1.3; margin-top: 4px; } .fee-example-tax { font-size: 14px; font-weight: 400; color: var(--ink-2); margin-left: 4px; } .fee-example-note { font-size: 13px; color: var(--primary-d); font-weight: 700; margin-top: 6px; } /* ---------- 報酬に含まれるもの／含まれないもの ---------- */ .fee-scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; } .fee-scope-box { border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); } .fee-scope-in { background: var(--gray); } .fee-scope-out { background: #fafafa; } .fee-scope-title { font-family: var(--serif); font-size: 17px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .fee-scope-in .fee-scope-title { color: var(--primary-d); } .fee-scope-out .fee-scope-title { color: var(--muted); } .fee-scope-list { display: flex; flex-direction: column; gap: 8px; } .fee-scope-list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); line-height: 1.8; } .fee-scope-in .fee-scope-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary-d); font-weight: 700; } .fee-scope-out .fee-scope-list li::before { content: "−"; position: absolute; left: 4px; top: 0; color: var(--muted); font-weight: 700; } /* ---------- タブレット・スマホ ---------- */ @media (max-width: 1024px) { .fee-policy, .fee-summary { grid-template-columns: 1fr; } .fee-example, .fee-scope { grid-template-columns: 1fr; } } @media (max-width: 767px) { .fee-h3 { font-size: 19px; margin-top: 40px; } .fee-h3-no { width: 32px; height: 32px; font-size: 15px; } .fee-table th, .fee-table td { padding: 13px 14px; font-size: 14px; } .fee-table th:first-child, .fee-table td:first-child { width: 128px; } .fee-example-price { font-size: 26px; } } /* ========================================================================== 2-2. 相続税シミュレーションへの導線（帯バナー .simband）／2026-09-07 新設 -------------------------------------------------------------------------- かわぐち税理士事務所サイトの `.simband` と**同じ形式**。 「課題提起（お悩み）→ シミュレーション」への導線として、お悩みの直後に置く。 ・最濃緑の帯 ＋ 左に文章／右にボタンの2カラム（TB・SPは縦積み） ・配色は最濃緑（--primary-dd）×山吹（--accent）のまま。**新しい色を足さないこと。** ・★当サイトはアニメーション抑制方針のため、 かわぐちにあるスクロール表示・ボタンの浮き上がりは**移植していない**。 ここに transform や animation を足さないこと（色の変化のみ）。 ========================================================================== */ .simband { background: var(--primary-dd); color: #eaf3ee; padding: 56px 0; } .simband-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; } .simband-txt { min-width: 0; } .simband-tag { display: inline-block; margin: 0 0 14px; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); font-family: var(--serif); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #fff; } .simband-title { margin: 0 0 14px; font-family: var(--serif); font-size: 29px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; color: #fff; } .simband-title em { font-style: normal; color: var(--accent); } .simband-lead { margin: 0; font-size: 15px; line-height: 1.9; color: #d5e6da; } .simband-action { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; } .simband-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 300px; min-height: 64px; padding: 16px 30px; border-radius: var(--radius); background: var(--accent); color: #fff; font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); /* 浮き上がりは使わない。押せる場所と分かるよう**色だけ**変える */ transition: background-color .25s; } .simband-btn:hover, .simband-btn:focus-visible { background: var(--accent-d); color: #fff; } .simband-btn .icon { flex: none; } .simband-note { margin: 0; font-size: 12px; line-height: 1.7; color: #b6cbbe; text-align: center; } /* ---------- タブレット（1024px以下）：縦積みにしてボタンを全幅に ---------- */ @media (max-width: 1024px) { .simband { padding: 48px 0; } .simband-inner { grid-template-columns: 1fr; gap: 28px; } .simband-title { font-size: 25px; } .simband-btn { width: 100%; min-width: 0; } } /* ---------- スマホ（767px以下） ---------- */ @media (max-width: 767px) { .simband { padding: 40px 0; } .simband-title { font-size: 21px; } /* PC用の改行位置は幅の狭いSPでは合わないため、自然な位置で折り返させる */ .simband-br { display: none; } .simband-lead { font-size: 14px; } .simband-btn { min-height: 58px; padding: 14px 18px; font-size: 15.5px; gap: 10px; } } /* ========================================================================== お知らせ（MV直下の帯 .news-bar）／2026-09-07 新設 -------------------------------------------------------------------------- 國田サイト（交通事故）の `.news-bar` と同じ形式。 最新1件だけを「ラベル｜日付｜見出し」で中央に並べる。高さは約4cm。 ※アニメーションは足さないこと（当サイトの抑制方針）。色の変化のみ。 ========================================================================== */ .news-bar { background: var(--gray); border-bottom: 1px solid var(--line); } .news-bar-inner { min-height: 4cm; display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; } .news-bar-label { flex: none; padding: 7px 18px; border-radius: 999px; background: var(--primary-d); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; } .news-bar-date { flex: none; font-size: 15px; color: var(--muted); letter-spacing: .04em; } .news-bar-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); } /* お知らせが1件も無いときの定型文 */ .news-bar-text--empty { color: var(--ink-2); } /* 内容部分は詳細ページへのリンク（下線は色だけ変える） */ a.news-bar-link { color: var(--ink); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } a.news-bar-link:hover, a.news-bar-link:focus-visible { color: var(--primary-d); border-bottom-color: currentColor; } @media (max-width: 767px) { .news-bar-inner { flex-wrap: wrap; gap: 10px 16px; } .news-bar-label { font-size: 13px; padding: 5px 14px; } .news-bar-date { font-size: 14px; } .news-bar-text { width: 100%; font-size: 15px; text-align: center; } } /* ========================================================================== コラム（標準の投稿）／2026-09-07 新設 -------------------------------------------------------------------------- 一覧＝home.php・archive.php（カードのグリッド）／記事＝single.php お知らせの詳細（single-news.php）も同じ `.entry-*` を使う。 ※アニメーションは足さないこと。カードの浮き上がりも使わない（色の変化のみ）。 ========================================================================== */ /* ---------- 一覧：カードのグリッド ---------- */ .column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .column-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .column-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; } .column-card-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--gray); display: flex; align-items: center; justify-content: center; overflow: hidden; } .column-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .column-card-noimg { font-family: Georgia, "Times New Roman", serif; font-size: 14px; letter-spacing: .1em; color: var(--muted); } .column-card-body { flex: 1 1 auto; padding: 20px 22px 24px; } .column-card-date { display: block; font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-bottom: 8px; } .column-card-title { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--primary-d); margin-bottom: 10px; } .column-card-link:hover .column-card-title { color: var(--primary-dd); } .column-card-excerpt { font-size: 14px; line-height: 1.85; color: var(--ink-2); } /* 記事が1件も無いときの表示 */ .column-empty { padding: 64px 24px; text-align: center; background: var(--gray); border-radius: var(--radius); } .column-empty-title { font-family: var(--serif); font-size: 18px; color: var(--ink-2); } /* ---------- ページ送り ---------- */ .pagination { margin-top: 44px; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink-2); font-size: 15px; font-weight: 700; transition: background-color .2s, color .2s, border-color .2s; } .pagination .page-numbers:hover { border-color: var(--primary); color: var(--primary-d); } .pagination .page-numbers.current { background: var(--primary-d); border-color: var(--primary-d); color: #fff; } /* ---------- 記事本体（コラム記事・お知らせ詳細で共通） ---------- */ .breadcrumb { margin-bottom: 28px; } .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .breadcrumb-item + .breadcrumb-item::before { content: "›"; margin-right: 8px; color: var(--muted); } .breadcrumb-item a { color: var(--primary-d); } .breadcrumb-current { color: var(--ink-2); } .entry-head { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 2px solid var(--line); } .entry-date { display: block; font-size: 14px; color: var(--muted); letter-spacing: .04em; margin-bottom: 10px; } .entry-title { font-family: var(--serif); font-size: 30px; line-height: 1.55; color: var(--primary-d); } .entry-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .entry-cats a { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--gray); border: 1px solid var(--line); font-size: 13px; color: var(--primary-d); } .entry-thumb { margin-bottom: 32px; border-radius: var(--radius); overflow: hidden; } .entry-thumb img { width: 100%; height: auto; } /* 本文は管理画面から自由に書けるため、基本の要素をひととおり整える */ .entry-body { font-size: 16px; line-height: 2; color: var(--ink-2); } .entry-body > * + * { margin-top: 1.4em; } .entry-body h2 { font-family: var(--serif); font-size: 23px; line-height: 1.5; color: var(--primary-d); margin-top: 2em; padding: 12px 0 12px 16px; border-left: 5px solid var(--primary); background: var(--gray); border-radius: 0 var(--radius) var(--radius) 0; } .entry-body h3 { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--primary-d); margin-top: 1.8em; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .entry-body h4 { font-family: var(--serif); font-size: 17px; color: var(--primary-d); margin-top: 1.6em; } .entry-body a { color: var(--accent); text-decoration: underline; } .entry-body strong { color: var(--primary-d); } .entry-body ul, .entry-body ol { padding-left: 1.4em; } .entry-body ul { list-style: disc; } .entry-body ol { list-style: decimal; } .entry-body li + li { margin-top: .5em; } .entry-body img { border-radius: var(--radius); } .entry-body blockquote { padding: 18px 22px; background: var(--gray); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-2); } .entry-body table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); } .entry-body th, .entry-body td { padding: 12px 16px; border: 1px solid var(--line); font-size: 15px; text-align: left; } .entry-body th { background: var(--gray); color: var(--primary-d); } /* ---------- 前後の記事・戻るボタン ---------- */ .entry-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; } .entry-nav a { color: var(--primary-d); } .entry-nav-next { text-align: right; } .entry-back { margin-top: 36px; text-align: center; } /* ---------- タブレット・スマホ ---------- */ @media (max-width: 1024px) { .column-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } .entry-title { font-size: 25px; } } @media (max-width: 767px) { .column-grid { grid-template-columns: 1fr; gap: 18px; } .column-card-body { padding: 16px 18px 20px; } .entry-title { font-size: 21px; } .entry-body { font-size: 15px; } .entry-body h2 { font-size: 19px; } .entry-body h3 { font-size: 17px; } .entry-nav { flex-direction: column; gap: 12px; } .entry-nav-next { text-align: left; } } /* ========================================================= 2026-09-28 追加分 （クライアント支給写真への差し替え・事務所ロゴ・数値入りの解決事例・代表略歴） ※ここは「アニメーション抑制」ブロックより後ろに置いてある。 新しいセレクタばかりで打ち消し合わないため、後勝ちでも問題にならない。 ======================================================= */ /* ---- ヘッダーのロゴ（灯台マーク）-------------------------------------- 受領したロゴは「灯台＋事務所名＋英字」の縦組み。ヘッダーでは**灯台部分だけ**を 切り出して使い、事務所名は従来どおりテキスト（.brand-body）で出している。 灯台は縦長（横:縦 ≒ 1:2.65）なので、丸マークより高さを取って揃えている。 */ .brand-mark--img { height: 46px; max-width: 72px; } /* ---- MV：橋の上に「切り抜きの代表」を重ねる ---------------------------- 【2026-09-28（第2弾）優馬様のご指示】 ・四角い写真パネルをやめ、**背景を抜いた代表（mv-cut.webp）を橋の風景に直接重ねる**。 縁が無くなるので、明石海峡大橋がそのまま見える。 ・**PC・タブレット・スマホで同じ構成**にする（TB・SPは `.mvp-photo` 側で同じ絵を作る）。 ・**「代表が大きい」とのご指摘を受けて小さくした。** 大きさは下の --mvp-cut-h で調整すること。 数字を上げると再び大きくなるので、安易に戻さないこと。 ・切り抜きになったことで橋全体が見えるため、背景の寄せ（right center）は中央に戻した。 */ :root { --mvp-cut-h: 79%; /* PC：MVの高さに対する代表の高さ */ /* 【2026-10-01 岡本様のご指示】PC：**共通枠（--wrap＝1120px）の右端からの距離**。 ★以前は「画面右端から6%」＝**画面幅に比例する指定**だったため、テレビなどの大画面では 代表だけが共通枠の外へどんどん逃げていき、他セクションと横幅が揃わなかった （2560px幅では枠の右端より約570px も外側に立っていた）。 ★`right: 6%` のような画面幅基準の指定に戻さないこと。 */ --mvp-cut-right: 0px; --mvp-cut-h-sp: 88%; /* TB・SP：写真エリアの高さに対する代表の高さ */ /* 【2026-09-28（第3弾）優馬様のご指示】携帯版で代表が中央に立つと明石海峡大橋に重なるため、 **左へ寄せて橋が見えるようにした。** 値を大きくすると右（＝橋に近づく）へ戻るので注意。 */ --mvp-cut-x-sp: 3%; --mvp-bg-position: center center; } /* 【2026-10-01 岡本様のご指示】代表の立ち位置を**他の全セクションと同じ横幅**に揃える。 ・`left:0; right:0; width:<枠幅>; margin:0 auto` で、MVの中に**共通枠と同じ幅の箱**を作り、 その右端に代表を寄せている（＝本文・見出し・カード類と右端が一直線に揃う）。 ・`max-width: 100%` があるので、枠より狭い画面でも画面外へはみ出さない。 ・★右端からさらに離したいときは --mvp-cut-right（px）で調整すること。 **％指定（画面幅基準）にすると大画面でまた枠の外へ逃げるので使わないこと。** */ .mvp-bg-photo { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: var(--mvp-max-width); max-width: 100%; margin: 0 auto; padding-right: var(--mvp-cut-right); display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; } .mvp-bg-photo img { height: var(--mvp-cut-h); width: auto; object-fit: contain; /* 【2026-09-28（第4弾）】背景を淡くしたぶん、人物側も少しだけトーンを寄せて馴染ませる。 ・影は広く柔らかく（輪郭のフチが立たないように） ・彩度をわずかに落とし、明るさを少し上げて、背景の空気感に合わせる ※やりすぎると顔色が悪く見えるため、この程度に留めること。 */ filter: drop-shadow(0 18px 34px rgba(35, 60, 50, .22)) drop-shadow(0 2px 6px rgba(35, 60, 50, .10)) saturate(.94) brightness(1.03); } @media (max-width: 1024px) { /* TB・SPは本文中の .mvp-photo が同じ絵を担当するため、こちらは出さない */ .mvp-bg-photo { display: none; } } /* ---- MV：白モヤを外したことによる文字の可読性の確保（PC専用）---------- 【2026-09-28（第4弾）】白いベールを廃止した結果、キャッチ・リード・注釈が **海や空の上に直接乗る**ことになり、とくに小さな注釈が読めなくなった。 ベールを戻すのはご指示に反するため、**文字側に白いにじみ（text-shadow）を敷いて**解決している。 ・色や字面は変えていない（緑＋山吹のまま） ・★この影を外すと注釈が背景に溶けて読めなくなるので、消さないこと。 */ @media (min-width: 1025px) { .mvp-lead, .mvp-heading { text-shadow: 0 1px 12px rgba(255, 255, 255, .92), 0 0 30px rgba(255, 255, 255, .75); } .mvp-note { /* 【2026-09-28 優馬様のご指示】「見えづらい」とのことで**濃く・太く**した。 字が小さいぶん、背後の白いにじみも強めて輪郭を立てている。 ★薄い色（--ink-2 等）や通常の太さに戻すと、海や緑の上で読めなくなる。 */ color: #1a211c; font-weight: 700; text-shadow: 0 0 5px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, .95), 0 0 32px rgba(255, 255, 255, .8); } } /* ---- 解決実績：数値のある事例の図（SVG）------------------------------ 図はカードの中央カラムに入る。文字が小さくなりすぎないよう、 図があるカードだけ中央カラムを広げている。 */ .s09-card--graph { grid-template-columns: 0.66fr 1.86fr 1.22fr; } .s09-chart--graph { padding: 20px 14px; } .s09-chart-svg { display: block; width: 100%; height: auto; } /* ---- 代表紹介：略歴（年表）-------------------------------------------- */ .profile-history { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); } .profile-history-title { font-family: var(--serif-jp, inherit); font-size: 22px; font-weight: 700; color: var(--primary-dd); margin: 0 0 22px; letter-spacing: .04em; } .profile-history-list { list-style: none; margin: 0; padding: 0; } .profile-history-item { display: grid; grid-template-columns: 250px 1fr; gap: 0 24px; padding: 16px 0 16px 22px; position: relative; border-bottom: 1px dashed var(--line); } .profile-history-item:last-child { border-bottom: 0; } /* 行頭の小さな丸（年表の目印） */ .profile-history-item::before { content: ""; position: absolute; left: 0; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); } .profile-history-term { font-size: 14.5px; font-weight: 700; color: var(--primary-d); line-height: 1.7; } .profile-history-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .profile-history-place { font-size: 15.5px; font-weight: 700; color: var(--ink-2); line-height: 1.7; } .profile-history-role { font-size: 13.5px; color: var(--muted); line-height: 1.7; } @media (max-width: 900px) { .s09-card--graph { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .s09-card--graph { grid-template-columns: 1fr; } .s09-chart--graph { padding: 16px 10px; } .profile-history { margin-top: 40px; padding-top: 30px; } .profile-history-item { grid-template-columns: 1fr; gap: 6px; padding: 14px 0 14px 20px; } .profile-history-item::before { top: 21px; } } /* ========================================================= * お問い合わせフォーム（Contact Form 7）／2026-10-01（第3弾）・碓井サイトと同じ形式 * --------------------------------------------------------- * フォーム定義（`_form`）と**メール文面はWordPressのDB側が正本**。 * **管理画面「お問い合わせ」→ フォームで編集する**こと（テンプレートには書かれていない）。 * 配色だけ当サイトの**緑×山吹**に置き換えている（碓井は緑×オレンジ）。 * ======================================================= */ .wpcf7-row { margin-bottom: 20px; } .wpcf7-form label { display: block; font-weight: 700; font-size: 15.5px; color: var(--primary-d); margin-bottom: 6px; } .wpcf7-form .req { display: inline-block; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; } .wpcf7-form .cf7-hint { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 6px; } .wpcf7-form-control-wrap { display: block; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea, .wpcf7-form select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-family: inherit; background: #fcfdfc; margin-top: 4px; } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: none; border-color: var(--primary); background: #fff; } .wpcf7-form textarea { min-height: 150px; resize: vertical; } .wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: #a9b5ad; } /* 確認事項（プライバシーポリシー／営業目的ではない） * ★チェックボックスと文言を横並びにする。`label` の `display:block` を打ち消すこと。 * 打ち消さないとチェックが文言の上に中央寄せで乗り、崩れて見える。 */ .wpcf7-accept { background: var(--gray); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .wpcf7-accept + .wpcf7-accept { margin-top: -8px; } .wpcf7-accept .wpcf7-list-item { margin: 0; } .wpcf7-accept label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; color: var(--ink-2); margin: 0; } .wpcf7-accept input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--primary-d); } .wpcf7-accept a { color: var(--primary-d); text-decoration: underline; } .wpcf7-submit-wrap { text-align: center; margin-top: 28px; } .wpcf7-form .wpcf7-submit { width: auto; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 17px 48px; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(224,164,30,.26); transition: background-color .2s; } /* ★当サイトはアニメーション抑制のため translateY は付けない（碓井は付いている） */ .wpcf7-form .wpcf7-submit:hover { background: var(--accent-d); } .wpcf7-form .wpcf7-submit:disabled { opacity: .6; cursor: default; } /* 検証メッセージ */ .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #c0392b; } .wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid { border-color: #c0392b; background: #fff7f6; } .wpcf7-response-output { margin: 24px 0 0 !important; padding: 14px 18px !important; border-radius: 10px; border-width: 1px !important; font-size: 14.5px; line-height: 1.8; } .wpcf7-form.sent .wpcf7-response-output { border-color: var(--primary) !important; background: var(--gray); color: var(--primary-d); } .wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output { border-color: #c0392b !important; background: #fff7f6; color: #a5281a; } .wpcf7-spinner { margin: 0 auto; } @media (max-width: 1023px) { .wpcf7-row { margin-bottom: 16px; } .wpcf7-form label { font-size: 15px; } .wpcf7-form .wpcf7-submit { width: 100%; padding: 16px 20px; font-size: 16px; } .wpcf7-accept { padding: 12px 14px; } } /* ========================================================================== 2026-10-05：クライアント修正依頼（全25項目）に伴う追記 -------------------------------------------------------------------------- ★このブロックは main.css の**最後**に置いてある。 同じセレクタが上の方にもある箇所（MVの代表写真・料金表）は、 **後勝ち**でここの指定が効く。上を書き換えずに済ませるためこの形にしている。 ========================================================================== */ /* ---- No.9：MVの代表写真を「加工なしの角丸パネル」にする ------------------- 旧：AIで背景を抜いた切り抜き（mv-cut.webp）を橋に直接重ねる 新：撮影いただいた写真（mv-rep.webp）をそのまま角丸パネルで置く ・切り抜きではないので、人物の足元が背景に溶け込む必要がない。 そのため下端に揃えるのをやめ、**上下中央**に置いている。 ・白い縁（border）は、橋の風景と写真の境目をはっきりさせるためのもの。 これが無いと、写真の中の白いカーテンと空が混ざって輪郭が分からなくなる。 ・★切り抜き用の drop-shadow / saturate は打ち消している（filter: none）。 人物の色味を加工しない＝「加工感がある」というご指摘への対応のため。 */ /* ★【2026-10-05 第2弾】写真パネルの**横幅を固定**した。 【ご指摘】「MVの写真が電話番号と被っている」 【原因】写真は `height` だけを指定し、横幅は画像の縦横比まかせだった。 切り抜き（縦長・比0.54）から3:4の写真パネルに変えたことで 横幅が 297px → **417px** に広がり、**左端が電話番号ボタンの右端に21px重なっていた** （1440px幅で 写真 x=863 / ボタン右端 x=884。実測値）。 ※写真は共通枠の右端に、本文は共通枠の左端から660pxに置くため、 **どの画面幅でも同じだけ重なる**＝広い画面にすれば直る類の問題ではなかった。 【対応】`--mvp-photo-w` で横幅をピクセル固定し、高さも 79%→74% に下げた。 これで本文の右端（枠左＋64+660）と写真の左端（枠右−346）の間に **常に約50pxの余白**ができる。`object-fit: cover` なので写真は歪まない。 ★横幅を広げる・高さを上げるときは、必ず 1440px 幅で `.mvp-btn--outline`（電話ボタン）の右端と `.mvp-bg-photo img` の左端を実測すること。 */ :root { --mvp-cut-h: 74%; --mvp-photo-w: 330px; } .mvp-bg-photo { align-items: center; } .mvp-bg-photo img { width: var(--mvp-photo-w); height: var(--mvp-cut-h); object-fit: cover; border-radius: var(--radius-lg); border: 8px solid #fff; box-shadow: 0 20px 48px rgba(35, 60, 50, .26); filter: none; } @media (max-width: 1024px) { /* TB・SPも同じ見た目にする（縁はPCより細くして、小さい画面で写真を大きく見せる） */ .mvp-photo { align-items: center; } .mvp-photo img { height: var(--mvp-cut-h-sp); border-radius: var(--radius); border: 6px solid #fff; box-shadow: 0 12px 28px rgba(35, 60, 50, .24); filter: none; } } /* ---- No.6：料金表のレイアウトを整える ------------------------------------ 【ご指摘】「表が左寄せ、項目幅などに違和感がある」 【原因】`.fee-table` が横幅いっぱい（約1,070px）に広がる一方で、 1列目が 210px 固定だったため、**金額が左端に寄り、右側に 800px 以上の余白が残っていた**。表そのものは中央にあるのに、 中身だけが左に固まって見えるのが「左寄せ」の正体。 【対応】 ・表の最大幅を 820px に抑え、見出し（①②③）と左端を揃える。 ・列幅を 56%／44% の比率にする（固定pxをやめ、文字量に追従させる）。 ・金額は**右寄せ**にする。桁が揃って比べやすくなり、余白も残らない。 ★スマホ用の指定（下の max-width:600px）は従来どおり別に効く。 */ .fee-table { table-layout: fixed; max-width: 820px; margin-right: auto; /* 左端は見出しに揃え、余りは右に逃がす */ } .fee-table th:first-child, .fee-table td:first-child { width: 56%; white-space: normal; } .fee-table thead th:last-child, .fee-table td.fee-price { text-align: right; } .fee-table td.fee-price .fee-sub { display: block; text-align: right; } @media (max-width: 600px) { /* 狭い画面では比率を戻す（項目名が1文字ずつ折り返されるのを防ぐ） */ .fee-table th:first-child, .fee-table td:first-child { width: 52%; } } /* ---- No.12：ヘッダーの本体サイトリンク ----------------------------------- グループ事務所リンク（.hdr-group）と**同じ見た目**にして横に並べる。 ・2つ並ぶため、1つ目に付いている `margin-left:auto`（右寄せ）は 2つ目では打ち消す。付いたままだと2つの間に隙間が空いてしまう。 ・★No.15 のご指示により、ここを山吹（CTAの色）にしないこと。 */ .hdr-group--main { margin-left: 10px; } .hdr-group-short { display: none; } /* ★【2026-10-05 第2弾】狭い画面でもリンクを**消さずに**収める。 当初は1500px以下で丸ごと非表示にしていたが、岡本様の画面幅（一般的なノートPC）で 出ていなかったため、**文字と余白を詰めて表示を維持する**方式に変えた。 ・2段目は「ロゴ＋グループリンク＋本体サイトリンク＋相談料＋電話＋CTA」で元々満杯。 素のままでは1500px以下で溢れ、**1280px幅でページ全体が1365pxに広がっていた**。 ・そこで1500px以下では ① 2つのリンクの余白・文字を小さくする ② 本体サイトリンクの下段を「明石みなと会計事務所 公式サイト」→「公式サイト」に短くする の2段構えで幅を詰めている。**上段の「法人・個人事業主の方はこちら」は常に出す** （ご依頼 No.12 の必須文言のため）。 ・1023px以下はハンバーガーに切り替わり2段目が「ロゴ＋電話」だけになるため、 グループリンクと同様に非表示。導線はフッターの案内枠が担う。 ★★ヘッダーに要素を足したら、必ず 1920/1600/1512/1440/1366/1280/1160/1120 px で `document.documentElement.scrollWidth === window.innerWidth` を実測すること。 */ @media (max-width: 1500px) { .hdr-group { padding: 6px 10px; } .hdr-group-main { font-size: 13px; } .hdr-group-sub { font-size: 10.5px; } .hdr-group--main .hdr-group-full { display: none; } .hdr-group--main .hdr-group-short { display: inline; } } @media (max-width: 1280px) { /* さらに詰める（この幅ではナビ・ボックスも別途縮んでいる） */ .hdr-group { padding: 5px 8px; gap: 1px; } .hdr-group-main { font-size: 12.5px; } .hdr-group-sub { font-size: 10px; } .hdr-group--main { margin-left: 8px; } } /* ★1121〜1280px だけ、2段目を一段と詰める。 この幅は「相談料ボックスがまだ出ている（〜1120pxで消える）のに画面が狭い」区間で、 **ここだけ中身の最小幅が 1,273px あり、1,160px 幅で実測 113px 溢れていた**。 ・下限を 1141px で切っているのは、1140px以下では相談料ボックス（282px）が消えて 十分な余裕が生まれ、ここまで小さくする必要がないため（小さすぎると貧相に見える）。 ・★この区間の数値を緩めるときは、必ず 1280／1200／1160／1130px で `document.documentElement.scrollWidth === window.innerWidth` を実測すること。 */ @media (max-width: 1280px) and (min-width: 1141px) { .hdr-main-inner { gap: 10px; padding-left: 16px; padding-right: 16px; } .brand-mark--img { height: 40px; max-width: 62px; } .lg-main { font-size: 19px; } .lg-lead { font-size: 11px; } .hdr-box { padding: 6px 10px; } .hdr-box-sub { font-size: 10.5px; } .hdr-box--fee .hdr-box-main { font-size: 12.5px; } .hdr-box--fee em { font-size: 15px; } .hdr-box--tel .hdr-box-num { font-size: 19px; } .hdr-box--cta { font-size: 11.5px; } .hdr-group { padding: 4px 6px; } .hdr-group--main { margin-left: 6px; } .hdr-group-main { font-size: 12px; } .hdr-group-sub { font-size: 9.5px; } } @media (max-width: 1023px) { .hdr-group--main { display: none; } } /* ---- No.13・No.14：本体サイトへの案内枠 ---------------------------------- フッター（濃緑の背景）と事業承継ページ（白い背景）の2箇所で使う。 ・★No.15：**目立ちすぎないこと。** 枠線＋控えめな文字色で、 山吹のCTAボタンと視線が競合しないようにしている。 ・別タブで開くことが分かるよう、リンクの末尾に矢印アイコンを添えている。 */ .mainsite-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; border-radius: var(--radius); padding: 16px 22px; font-size: 14px; line-height: 1.7; } .mainsite-box-text { margin: 0; } .mainsite-box-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .mainsite-box-link .ext-ico { flex: none; } /* フッター版：濃緑の背景に載るため、枠線・文字とも白系の薄い色にする */ .mainsite-box--footer { max-width: calc(var(--wrap) - 48px); margin: 0 auto 8px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); color: #d7e6da; } .mainsite-box--footer .mainsite-box-link { color: #fff; } .mainsite-box--footer .mainsite-box-link:hover { color: #cfe6d5; } /* 事業承継ページ版：白い背景に載るため、通常の枠線＋濃緑の文字にする */ .mainsite-box--service { margin-top: 36px; border: 1px solid var(--line); background: var(--gray); color: var(--ink-2); justify-content: flex-start; } .mainsite-box--service .mainsite-box-link { color: var(--primary-dd); } .mainsite-box--service .mainsite-box-link:hover { color: var(--primary-d); } @media (max-width: 767px) { .mainsite-box { flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 18px; font-size: 13.5px; } .mainsite-box--footer { margin: 0 16px 8px; } .mainsite-box-link { white-space: normal; } } /* ---- No.3：代表の略歴を年表から文章に変えたことによる追記 ----------------- 年表用の `.profile-history-list` 系のCSSは、年表へ戻す可能性を考えて残してある。 こちらは差し替え後の文章用。読みやすさを優先して行間を広めに取る。 */ .profile-history-text { /* 1行が長すぎると目で行を追いにくくなるため、読みやすい幅で止める （枠いっぱい＝1,120px だと1行あたり70文字を超えてしまう） */ max-width: 900px; margin: 0; font-size: 15.5px; line-height: 2; color: var(--ink-2); } @media (max-width: 767px) { .profile-history-text { font-size: 15px; line-height: 1.95; } } /* ---- お問い合わせページ：フォーム直前の相談料の注記 ---------------------- 【2026-10-05 ご依頼 No.2】ほかのページは共通CTA（.cta-note）が同じ文言を出すが、 このページだけ共通CTAを読み込まないため、個別に置いている。 ・共通CTA（濃緑の背景＋白文字）とは背景が違うので、こちらは薄いグレー地＋濃い文字にする。 ・フォームと同じ幅（.container-narrow）に収まる。 */ .form-fee-note { max-width: 100%; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink-2); /* ★13px にしているのは意味がある（2026-10-05 第6弾）。 この枠はフォームと同じ幅（.container-narrow＝中身750px）しかなく、 14px だと注記の1行目に **37px 足りず**、 「…5,000円（税込）／60／分で、」のように**語の途中で折り返していた**。 13px だと必要751px→697px に収まり、使える714pxに17pxの余裕ができる。 ★ここを 14px に戻したり、padding を広げたりすると折り返しが戻るので注意。 （改行位置そのものは `akm_fee_note_html()` が指定している） */ font-size: 13px; line-height: 1.85; } @media (max-width: 767px) { /* 携帯はどのみち折り返すので、読みやすさを優先して少し大きくする */ .form-fee-note { padding: 12px 14px; font-size: 13.5px; } }