@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   大分の弁護士による交通事故被害者相談｜大分みんなの法律事務所
   トップページ スタイルシート（PC / SP レスポンシブ）
   ブレークポイント: 767px 以下 = SP
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --c-navy: #14355f;
  --c-navy-dark: #0d2647;
  --c-blue: #1d5fae;
  --c-blue-light: #e8f0fa;
  --c-orange: #f0801c;
  --c-orange-dark: #d96e10;
  --c-orange-light: #fdf1e5;
  --c-green: #06c755;
  --c-green-dark: #04a847;
  --c-yellow: #f5c518;
  --c-red: #d9342b;
  --c-text: #222;
  --c-text-sub: #555;
  --c-gray: #f4f6f9;
  --c-gray-2: #e6e9ee;
  --c-border: #d9dee5;
  --c-white: #fff;
  --c-purple-light: #ece6fa;
  --c-green-light: #e5f5ea;
  --c-pink-light: #fde9e9;

  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --w-container: 1080px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 2px 10px rgba(20, 53, 95, .10);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, .18);
}
.mv__hand {
  font-family: "Yomogi", cursive;
  font-weight: 400;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  line-height: 1.7;
  background: var(--c-white);
  font-feature-settings: "palt";
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
/* PC/SP 出し分け（要素の本来の display を保つため revert を使用） */
.sp-only, .sp-br { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Layout ---------- */
.container { max-width: var(--w-container); margin: 0 auto; padding: 0 20px; }
.section { padding: 40px 0 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-2--wide { grid-template-columns: 1.15fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* 見出し（左に太線） */
.ttl {
  position: relative;
  padding-left: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-navy);
  margin-bottom: 16px;
}
.ttl::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 5px; height: 22px;
  background: var(--c-orange);
  border-radius: 2px;
}
.ttl-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ttl-row .ttl { margin-bottom: 0; }
.link-more { font-size: 13px; color: var(--c-blue); font-weight: 700; }
.link-more::after { content: " ›"; }
.em-orange { color: var(--c-orange); }
.em-blue { color: var(--c-blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  color: var(--c-white);
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow-btn);
  transition: transform .15s, filter .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--tel { background: var(--c-orange); }
.btn--line { background: var(--c-green); }
.btn--mail { background: var(--c-blue); }
.btn--outline {
  background: var(--c-white); color: var(--c-blue);
  border: 1.5px solid var(--c-blue); box-shadow: none;
  font-size: 13px; padding: 9px 20px;
}
.btn--outline::after { content: "›"; font-size: 16px; }
.btn__ico { width: 30px; height: 30px; flex: none; }
.btn__ico svg { width: 100%; height: 100%; fill: currentColor; }
.btn__label { display: block; font-size: 12px; font-weight: 500; }
.btn__main { display: block; font-size: 22px; letter-spacing: .02em; }
.btn__arrow { margin-left: auto; font-size: 20px; }

/* ==========================================================================
   Header
   ========================================================================== */
.header { background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.header__inner {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; max-width: var(--w-container); margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo__mark { width: 44px; height: 44px; flex: none; }
.logo__text { line-height: 1.25; }
.logo__sub { display: block; font-size: 11px; color: var(--c-navy); }
.logo__main { display: block; font-size: 17px; font-weight: 700; color: var(--c-navy); }
.header .logo__main {
  color: var(--c-orange);
}
.logo__office { display: block; font-size: 10px; color: var(--c-text-sub); }
.header__addr { font-size: 11px; line-height: 1.5; color: var(--c-text-sub); margin-left: 8px; }
.header__cta { margin-left: auto; display: flex; gap: 8px; }
.header__cta .btn { padding: 6px 14px; flex-direction: column; gap: 0; line-height: 1.2; }
.header__cta .btn__label { font-size: 10px; }
.header__cta .btn__main { font-size: 16px; }
.header__cta .btn--tel .btn__note { font-size: 10px; font-weight: 400; }
.header__cta .btn--line .btn__main, .header__cta .btn--mail .btn__main { font-size: 13px; display: flex; align-items: center; gap: 4px; }
.header__cta .btn__ico { width: 16px; height: 16px; }
.header__tel { display: none; }
.menu-btn { display: none; }

/* Global Nav (PC) */
.gnav { background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.gnav__list {
  display: flex; max-width: var(--w-container); margin: 0 auto;
}
.gnav__list li { flex: 1; text-align: center; border-left: 1px solid var(--c-border); }
.gnav__list li:first-child { border-left: 0; flex: .6; }
.gnav__list a { display: block; padding: 10px 6px; font-size: 13px; font-weight: 700; color: var(--c-navy); }
.gnav__list a:hover, .gnav__list .is-current a { color: var(--c-orange); }
.gnav__close { display: none; }

/* ==========================================================================
   Main Visual
   ========================================================================== */
.mv {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.35) 60%, rgba(255,255,255,.7) 100%),
    linear-gradient(120deg, #cfe3f6 0%, #eaf3fb 45%, #dbe9f5 100%);
}
.mv::before { /* 街並みプレースホルダー */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background:
    repeating-linear-gradient(90deg, rgba(20,53,95,.10) 0 40px, rgba(20,53,95,.04) 40px 80px, rgba(20,53,95,.14) 80px 110px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.mv__inner {
  position: relative; max-width: var(--w-container); margin: 0 auto;
  padding: 36px 20px 24px; display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: end;
}
.mv__catch {
  font-size: clamp(24px, 2.75vw, 34px); line-height: 1.4; font-weight: 900; color: var(--c-navy); letter-spacing: 0; white-space: nowrap;
}
.mv__catch .big { font-size: clamp(30px, 3.4vw, 42px); }
.mv__lead { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--c-navy); font-weight: 500; }
.mv__hand {
  position: absolute; right: 40px; top: 34px;
  font-size: 17px; color: var(--c-navy); line-height: 1.6; transform: rotate(-4deg);
  font-weight: 700;
}
.mv__points { display: flex; gap: 12px; margin-top: 20px; }
.point {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--c-white); border: 1.5px solid var(--c-orange);
  border-radius: var(--radius); padding: 10px 12px;
}
.point__ico { width: 34px; height: 34px; border-radius: 50%; background: var(--c-orange); color: #fff; display: grid; place-items: center; flex: none; }
.point__ico svg { width: 20px; height: 20px; fill: currentColor; }
.point__body { display: flex; flex-direction: column; }
.point__label { font-size: 12px; color: var(--c-navy); font-weight: 700; line-height: 1.2; }
.point__val { font-size: 22px; font-weight: 900; color: var(--c-orange); line-height: 1.2; }
.point__val small { font-size: 14px; }

.mv__cta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 8px; }
.mv__cta .btn { padding: 12px 20px; font-size: 18px; }
.mv__cta .btn__ico { width: 32px; height: 32px; }

/* 弁護士写真（プレースホルダー） */
.mv__photo { position: relative; display: flex; gap: 8px; align-items: flex-end; justify-content: flex-end; padding-top: 90px; }
.mv__hand { z-index: 2; }
.lawyer-ph {
  position: relative; width: 170px; height: 230px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #d6e2ee 0%, #b6c8da 100%);
  display: grid; place-items: end center; overflow: hidden;
}
.lawyer-ph svg { width: 80%; height: auto; }
.lawyer-ph__name {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--c-orange); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 3px; white-space: nowrap; line-height: 1.4;
}
.lawyer-ph__name small { display: block; font-size: 10px; font-weight: 500; }

/* ==========================================================================
   実績帯
   ========================================================================== */
.achieve { background: var(--c-navy); color: #fff; }
.achieve__inner {
  max-width: var(--w-container); margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.achieve__list { display: flex; gap: 28px; }
.laurel { display: flex; align-items: center; gap: 4px; }
.laurel::before, .laurel::after {
  content: ""; width: 22px; height: 46px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 46'><path d='M20 2c-6 4-10 10-10 20 0 8 4 16 10 22' fill='none' stroke='%23f5c518' stroke-width='2'/><g fill='%23f5c518'><ellipse cx='12' cy='8' rx='3' ry='6' transform='rotate(-40 12 8)'/><ellipse cx='9' cy='17' rx='3' ry='6' transform='rotate(-20 9 17)'/><ellipse cx='8' cy='27' rx='3' ry='6'/><ellipse cx='10' cy='37' rx='3' ry='6' transform='rotate(20 10 37)'/></g></svg>") center/contain no-repeat;
}
.laurel::after { transform: scaleX(-1); }
.laurel__body { text-align: center; line-height: 1.2; }
.laurel__label { display: block; font-size: 12px; }
.laurel__val { display: block; font-size: 18px; font-weight: 900; color: var(--c-yellow); }
.laurel__val strong { font-size: 30px; }
.laurel__note { display: block; font-size: 10px; margin-top: 2px; }
.achieve__msg { font-size: 15px; font-weight: 700; line-height: 1.7; text-align: right; }

/* ==========================================================================
   クイックナビ
   ========================================================================== */
.qnav { background: var(--c-gray); padding: 22px 0; }
.qnav__list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.qnav__list a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border-radius: var(--radius); padding: 12px 6px 10px;
  font-size: 12px; font-weight: 700; color: var(--c-navy); box-shadow: var(--shadow);
}
.qnav__list a:hover { color: var(--c-orange); }
.qnav__ico { width: 34px; height: 34px; color: var(--c-orange); }
.qnav__ico svg { width: 100%; height: 100%; fill: currentColor; }

/* ==========================================================================
   動画 / 無料相談
   ========================================================================== */
.media { padding-top: 24px; }
.media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.video { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.video__thumb {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius);
  background: linear-gradient(160deg, #1f3f66, #0f2745); color: #fff; overflow: hidden; display: block;
}
.video__thumb h3 { position: absolute; left: 14px; top: 12px; font-size: 15px; line-height: 1.5; font-weight: 700; }
.video__play {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 64px; height: 44px; background: #e62117; border-radius: 10px; display: grid; place-items: center;
}
.video__play::after { content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 4px; }
.video__cap {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(13,38,71,.85);
  font-size: 12px; padding: 6px 10px; display: flex; gap: 6px; align-items: center;
}
.video__cap::before { content: "▶"; font-size: 9px; }
.video__body h3 { font-size: 15px; color: var(--c-navy); font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
.video__body p { font-size: 12px; line-height: 1.8; color: var(--c-text-sub); margin-bottom: 12px; }
.video__body .btn { font-size: 13px; padding: 9px 14px; background: var(--c-navy); }

.free {
  position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; padding: 22px 24px;
  background: linear-gradient(100deg, #178a3f 0%, #1a9a4a 55%, #74c48a 100%); min-height: 190px; display: block;
}
.free__ttl { font-size: 24px; font-weight: 900; line-height: 1.3; }
.free__ttl strong { font-size: 32px; }
.free__badge { display: inline-block; background: var(--c-navy); padding: 2px 12px; border-radius: 3px; font-size: 20px; margin-left: 6px; }
.free__txt { margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.8; }
.free__arrow { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); color: #178a3f; display: grid; place-items: center; font-size: 18px; }
.free .staff-ph {
  position: absolute; right: 0; top: 0; width: 42%; height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.35) 100%);
  display: grid; place-items: end center;
}
.free .staff-ph svg { width: 70%; }

/* ==========================================================================
   お悩み / 4つの理由
   ========================================================================== */
.worry { padding-top: 32px; }
.worry__box { background: var(--c-orange-light); border-radius: var(--radius); padding: 24px 24px 20px; display: grid; grid-template-columns: 1.4fr auto 1fr; align-items: center; gap: 16px; }
.worry__box .ttl { grid-column: 1 / -1; }
.check-list li { position: relative; padding-left: 30px; font-size: 14px; font-weight: 700; margin-bottom: 12px; line-height: 1.5; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  border: 2px solid var(--c-orange); border-radius: 3px; background: #fff;
}
.check-list li::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px;
  border-right: 3px solid var(--c-orange); border-bottom: 3px solid var(--c-orange); transform: rotate(45deg);
}
.worry__arrow { width: 0; height: 0; border-left: 30px solid var(--c-orange); border-top: 36px solid transparent; border-bottom: 36px solid transparent; }
.worry__answer { font-size: 26px; font-weight: 900; color: var(--c-orange); line-height: 1.4; text-align: center; }
.worry__fig { display: none; }

.reason__box { background: var(--c-blue-light); border-radius: var(--radius); padding: 24px; display: grid; grid-template-columns: 1fr 150px; gap: 16px; }
.reason__box .ttl { grid-column: 1 / -1; font-size: 18px; }
.reason__box .ttl strong { font-size: 30px; color: var(--c-orange); }
.num-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.num-list .num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-orange); color: #fff;
  display: grid; place-items: center; font-size: 15px; flex: none;
}
.reason__ph { border-radius: var(--radius); background: linear-gradient(160deg, #cfdcec, #a9bdd4); min-height: 120px; }

/* ==========================================================================
   代表メッセージ / 弁護士紹介
   ========================================================================== */
.message { padding-top: 32px; }
.profile { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.profile .ttl { font-size: 18px; }
.profile__ph { border-radius: var(--radius); background: linear-gradient(180deg, #d6e2ee, #b6c8da); aspect-ratio: 110 / 130; display: grid; place-items: end center; overflow: hidden; }
.profile__ph svg { width: 85%; }
.profile__txt { font-size: 13px; line-height: 1.9; color: var(--c-text-sub); }
.profile__sign { text-align: right; font-size: 13px; margin-top: 8px; }
.profile__sign strong { font-size: 20px; margin-left: 8px; color: var(--c-navy); }
.profile__name { font-size: 15px; font-weight: 700; color: var(--c-navy); margin-bottom: 4px; }
.profile__name small { font-size: 12px; margin-right: 6px; font-weight: 500; }
.profile__btn { text-align: right; margin-top: 12px; }

/* ==========================================================================
   保険会社と弁護士の違い / 解決事例
   ========================================================================== */
.compare { padding-top: 32px; }
.cmp-table { font-size: 12px; }
.cmp-table th, .cmp-table td { padding: 10px 8px; border-bottom: 1px solid var(--c-border); text-align: center; vertical-align: middle; line-height: 1.5; }
.cmp-table thead th { background: var(--c-orange-light); color: var(--c-navy); font-weight: 700; }
.cmp-table thead th:first-child { background: var(--c-gray); }
.cmp-table thead th.is-our { background: var(--c-orange-light); color: var(--c-orange); font-size: 13px; }
.cmp-table tbody th { background: var(--c-gray); font-weight: 700; text-align: left; white-space: nowrap; }
.cmp-table td.is-our { color: var(--c-orange); font-weight: 700; background: #fffaf5; }
.cmp-table--sp { display: none; }

.cases__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.case { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; text-align: center; }
.case__ttl { background: var(--c-blue); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 6px; line-height: 1.4; min-height: 52px; display: grid; place-items: center; }
.case__before { padding: 10px 6px 8px; font-size: 11px; color: var(--c-text-sub); line-height: 1.4; }
.case__before strong { display: block; font-size: 18px; color: var(--c-text); }
.case__before strong b { font-size: 24px; }
.case__arrow { color: var(--c-orange); font-size: 14px; line-height: 1; }
.case__after { background: var(--c-orange); color: #fff; padding: 8px 6px 10px; font-size: 11px; line-height: 1.4; }
.case__after strong { display: block; font-size: 18px; }
.case__after strong b { font-size: 26px; }
.cases__note { font-size: 10px; color: var(--c-text-sub); margin-top: 8px; }
.cases--sp { display: none; }

/* ==========================================================================
   お悩みから探す
   ========================================================================== */
.search { padding-top: 32px; }
.search__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.search__list a { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: var(--radius); color: var(--c-navy); }
.search__list .s1 { background: var(--c-pink-light); }
.search__list .s2 { background: var(--c-blue-light); }
.search__list .s3 { background: var(--c-green-light); }
.search__list .s4 { background: var(--c-purple-light); }
.search__ico { width: 40px; height: 40px; flex: none; }
.search__ico svg { width: 100%; height: 100%; }
.s1 .search__ico { color: #e35b4f; } .s2 .search__ico { color: var(--c-blue); } .s3 .search__ico { color: #2e9e57; } .s4 .search__ico { color: #6d4fc4; }
.search__body strong { display: block; font-size: 14px; font-weight: 700; }
.search__body > span { display: block; font-size: 12px; }
.search__body small { display: block; font-size: 10px; color: var(--c-text-sub); }

/* ==========================================================================
   けがの部位 / FAQ / 流れ
   ========================================================================== */
.triple { padding-top: 32px; }
.triple__grid { display: grid; grid-template-columns: 1.35fr 1fr .85fr; gap: 24px; }

.parts { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 10px; align-items: start; }
.parts__list li a {
  display: block; padding: 7px 10px 7px 26px; position: relative; font-size: 13px; font-weight: 700;
  background: var(--c-gray); border-radius: 4px; margin-bottom: 6px; color: var(--c-navy);
}
.parts__list li a::before { content: "›"; position: absolute; left: 10px; color: var(--c-orange); font-weight: 700; }
.parts__list li a:hover { background: var(--c-orange-light); }
.parts__fig { color: #9bb8d8; text-align: center; }
.parts__fig svg { width: 100%; }
.parts__cap { display: none; }

.faq__list li a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--c-border); font-size: 12px; font-weight: 700; }
.faq__q { width: 22px; height: 22px; border-radius: 50%; background: var(--c-orange); color: #fff; font-size: 12px; display: grid; place-items: center; flex: none; }
.faq__more { margin-top: 14px; text-align: center; }
.faq__more .btn { width: 100%; }

.flow__list li { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border: 1px solid var(--c-border); border-radius: 4px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.flow__list .num { width: 30px; height: 30px; border-radius: 50%; background: var(--c-orange); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.flow__more { margin-top: 12px; }
.flow__more .btn { width: 100%; }

/* ==========================================================================
   地図・外観 / 対応エリア
   ========================================================================== */
.access { padding-top: 32px; padding-bottom: 40px; }
.access__grid { display: grid; grid-template-columns: 2.4fr 1fr; gap: 24px; }
.access__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.map-ph {
  position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background:
    linear-gradient(90deg, transparent 47%, #d6dde6 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 30%, #d6dde6 30% 34%, transparent 34%, transparent 70%, #d6dde6 70% 74%, transparent 74%),
    #edf1f5;
}
.map-ph::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 18px; height: 18px; border-radius: 50% 50% 50% 0;
  background: var(--c-red); transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.map-ph small { position: absolute; left: 6px; bottom: 4px; font-size: 9px; color: #666; }
.building-ph { aspect-ratio: 1; border-radius: var(--radius); background: linear-gradient(180deg, #8fb0d3 0%, #4f7bb0 100%); position: relative; overflow: hidden; }
.building-ph::before {
  content: ""; position: absolute; inset: 15% 20% 0;
  background: repeating-linear-gradient(0deg, #2d4f7c 0 12px, #a7c2e0 12px 20px);
}
.access__txt { font-size: 13px; line-height: 1.8; }
.access__txt strong { display: block; font-size: 14px; color: var(--c-navy); margin-bottom: 4px; }
.access__txt .btn { margin-top: 12px; }

.area__lead { font-size: 13px; line-height: 1.8; margin-bottom: 10px; }
.area__body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.area__map { color: #cfe6cf; }
.area__list li { position: relative; padding-left: 20px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.area__list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #2e9e57; color: #fff; font-size: 9px; display: grid; place-items: center; margin-top: 4px; }

/* ==========================================================================
   下部CTA
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #dfeaf5 0%, #edf3f9 100%);
}
.cta::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: repeating-linear-gradient(90deg, rgba(20,53,95,.12) 0 30px, rgba(20,53,95,.05) 30px 60px, rgba(20,53,95,.15) 60px 85px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.cta__inner { position: relative; max-width: var(--w-container); margin: 0 auto; padding: 36px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta__txt { font-size: 20px; font-weight: 700; color: var(--c-navy); line-height: 1.6; white-space: nowrap; }
.cta__btns { display: flex; gap: 10px; flex: none; }
.cta__btns .btn { padding: 10px 16px; flex-direction: row; text-align: left; white-space: nowrap; }
.cta__btns .btn__ico { width: 24px; height: 24px; }
.cta__btns .btn__label { font-size: 11px; }
.cta__btns .btn__main { font-size: 17px; }
.cta__btns .btn__note { display: block; font-size: 10px; font-weight: 400; }

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
  .pc-only, .pc-br { display: none !important; }
  .sp-only, .sp-br { display: revert !important; }
  .container { padding: 0 14px; }
  .grid-2, .grid-3, .grid-2--wide { grid-template-columns: 1fr; gap: 20px; }
  .ttl { font-size: 17px; }
  .ttl::before { height: 18px; top: 4px; }

  /* Header (固定) ＋ アンカー移動時に見出しが隠れないよう余白 */
  .header { position: sticky; top: 0; z-index: 100; }
  [id] { scroll-margin-top: 64px; }
  .header__inner { padding: 8px 14px; gap: 8px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__sub { font-size: 10px; }
  .logo__main { font-size: 14px; }
  .logo__office { display: none; }
  .header__addr, .header__cta { display: none; }
  .header__tel {
    display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; border-radius: 6px;
    background: var(--c-orange); color: #fff;
  }
  .header__tel svg { width: 22px; height: 22px; fill: currentColor; }
  .menu-btn { display: grid; place-items: center; width: 40px; height: 40px; color: var(--c-navy); font-size: 9px; font-weight: 700; line-height: 1; }
  .menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; margin: 0 auto 4px; }
  .menu-btn b { display: block; }

  /* Global Nav → ドロワー */
  .gnav {
    position: fixed; inset: 0; z-index: 200; background: rgba(13,38,71,.96);
    transform: translateX(100%); transition: transform .3s; border: 0;
  }
  .gnav.is-open { transform: none; }
  .gnav__list { display: block; padding: 70px 24px 24px; }
  .gnav__list li, .gnav__list li:first-child { border: 0; border-bottom: 1px solid rgba(255,255,255,.2); text-align: left; flex: none; }
  .gnav__list a { color: #fff; font-size: 16px; padding: 14px 4px; }
  .gnav__close { display: block; position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; color: #fff; font-size: 28px; }

  /* MV */
  .mv__inner { grid-template-columns: 1fr; padding: 22px 14px 16px; gap: 0; }
  .mv__catch { font-size: 25px; line-height: 1.4; }
  .mv__catch .big { font-size: 31px; }
  .mv__catch { white-space: normal; }
  .mv__lead { display: none; }
  .mv__hand { position: static; text-align: right; font-size: 13px; margin: 4px 0 -10px; transform: rotate(-3deg); }
  .mv__photo { justify-content: center; gap: 10px; margin-top: 8px; padding-top: 0; }
  .lawyer-ph { width: 46%; height: 190px; }
  .lawyer-ph__name { font-size: 11px; padding: 3px 8px; }
  .mv__points { gap: 6px; margin-top: 12px; }
  .point { flex-direction: column; gap: 2px; padding: 8px 4px; text-align: center; }
  .point__ico { width: 26px; height: 26px; }
  .point__ico svg { width: 15px; height: 15px; }
  .point__label { font-size: 11px; }
  .point__val { font-size: 19px; }
  .point__val small { font-size: 11px; }
  .mv__cta { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .mv__cta .btn { padding: 10px 16px; font-size: 16px; justify-content: flex-start; }
  .mv__cta .btn__main { font-size: 20px; }

  /* 実績帯 */
  .achieve__inner { flex-direction: column; padding: 12px 14px; gap: 8px; }
  .achieve__list { width: 100%; justify-content: space-around; gap: 8px; }
  .laurel__val strong { font-size: 26px; }
  .laurel__label { font-size: 11px; }
  .achieve__msg { display: none; }

  /* クイックナビ */
  .qnav { padding: 12px 0; background: #fff; }
  .qnav__list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qnav__list a { border: 1px solid var(--c-border); box-shadow: none; padding: 10px 4px 8px; }

  /* 動画・無料相談 */
  .media { padding-top: 12px; }
  .media__grid { grid-template-columns: 1fr; gap: 12px; }
  .video { grid-template-columns: 1fr; }
  .video__thumb { aspect-ratio: 16 / 8; }
  .video__thumb h3 { font-size: 17px; }
  .video__body { display: none; }
  .free { padding: 16px 14px; min-height: 130px; }
  .free__ttl { font-size: 20px; }
  .free__ttl strong { font-size: 26px; }
  .free__badge { font-size: 16px; }
  .free__txt { font-size: 12px; margin-top: 6px; }
  .free .staff-ph { width: 36%; }

  /* お悩み / 理由 */
  .worry { padding-top: 24px; }
  .worry__box { grid-template-columns: 1fr 80px; padding: 0; background: none; gap: 8px; }
  .worry__arrow { display: none; }
  .worry__box .check-list { grid-column: 1; grid-row: 2 / 4; }
  .worry__fig { display: block; grid-column: 2; grid-row: 2; color: #c9d6e4; text-align: center; }
  .worry__answer { font-size: 14px; grid-column: 2; grid-row: 3; text-align: center; align-self: start; white-space: nowrap; }
  .worry__box { grid-template-columns: 1fr 96px; }
  .check-list li { font-size: 13px; margin-bottom: 8px; padding-left: 26px; }
  .check-list li::before { width: 17px; height: 17px; top: 2px; }
  .check-list li::after { left: 5px; top: 3px; width: 5px; height: 10px; }
  .reason__box { background: none; padding: 0; grid-template-columns: 1fr; }
  .reason__box .ttl strong { font-size: 24px; }
  .reason__ph { display: none; }

  /* メッセージ / 紹介 */
  .message { padding-top: 24px; }
  .profile { grid-template-columns: 90px 1fr; gap: 12px; }
  .profile__txt { font-size: 12px; line-height: 1.7; }
  .profile__sign strong { font-size: 15px; }
  .profile__btn { margin-top: 8px; }
  .profile__btn .btn { width: 100%; }
  .lawyers--sp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lawyer-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px; text-align: center; }
  .lawyer-card .profile__ph { aspect-ratio: 1 / 1; }
  .lawyer-card__name { font-size: 12px; font-weight: 700; margin: 6px 0; line-height: 1.4; }
  .lawyer-card__name small { display: block; font-size: 10px; font-weight: 500; }
  .lawyer-card .btn { width: 100%; padding: 6px 10px; font-size: 12px; }

  /* 比較 / 事例 */
  .compare { padding-top: 24px; }
  .cmp-table--pc { display: none; }
  .cmp-table--sp { display: table; }
  .cases--pc { display: none; }
  .cases--sp { display: block; }
  .case-sp { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
  .case-sp__ttl { display: flex; align-items: center; gap: 0; font-size: 14px; font-weight: 700; color: var(--c-navy); margin-bottom: 8px; }
  .case-sp__ttl strong { color: var(--c-orange); font-size: 18px; }
  .case-sp__ico { width: 22px; height: 22px; color: var(--c-orange); flex: none; margin-right: 8px; }
  .case-sp__ico svg { width: 100%; height: 100%; fill: currentColor; }
  .case-sp__body { display: grid; grid-template-columns: 1fr 22px 1.15fr; align-items: center; gap: 6px; }
  .case-sp__before, .case-sp__after { border-radius: 4px; padding: 8px 6px; text-align: center; font-size: 11px; line-height: 1.4; }
  .case-sp__before { background: var(--c-gray); color: var(--c-text-sub); }
  .case-sp__before strong { display: block; font-size: 16px; color: var(--c-text); }
  .case-sp__before b { font-size: 20px; }
  .case-sp__after { background: var(--c-orange-light); color: var(--c-orange); }
  .case-sp__after strong { display: block; font-size: 16px; }
  .case-sp__after b { font-size: 22px; }
  .case-sp__after small { display: block; font-size: 10px; }
  .case-sp__arrow { color: var(--c-orange); font-size: 18px; text-align: center; }

  /* 探す */
  .search { padding-top: 24px; }
  .search__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .search__list a { padding: 10px; gap: 8px; }
  .search__ico { width: 32px; height: 32px; }
  .search__body strong { font-size: 13px; }
  .search__body span { font-size: 12px; }
  .search__body small { display: none; }

  /* 部位 / FAQ / 流れ */
  .triple { padding-top: 24px; }
  .triple__grid { grid-template-columns: 1fr; gap: 24px; }
  .parts { grid-template-columns: 1fr 1fr 70px; gap: 6px; }
  .parts__list li a { font-size: 12px; padding: 6px 8px 6px 22px; background: none; border-bottom: 1px solid var(--c-border); border-radius: 0; margin: 0; }
  .parts__list li a::before { left: 6px; }
  .parts__cap { display: block; font-size: 9px; color: var(--c-text-sub); }
  .faq__list li a { font-size: 12px; padding: 10px 6px; border: 1px solid var(--c-border); border-radius: 4px; margin-bottom: 6px; }
  .faq__list li a::after { content: "›"; margin-left: auto; color: var(--c-blue); font-size: 16px; }
  .faq__more { text-align: right; }
  .faq__more .btn { display: none; }
  .faq__more .link-more { display: inline; }
  .flow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .flow__list li { flex-direction: column; text-align: center; font-size: 10px; padding: 10px 4px; gap: 6px; margin: 0; }
  .flow__more { display: none; }

  /* アクセス */
  .access { padding-top: 24px; padding-bottom: 28px; }
  .access__grid { grid-template-columns: 1fr; gap: 24px; }
  .access__inner { grid-template-columns: 1fr 1fr; gap: 8px; }
  .access__txt { grid-column: 1 / -1; font-size: 12px; }
  .access__txt .btn { margin-top: 8px; }
  .area__lead { text-align: center; margin-bottom: 4px; }
  .area__body { grid-template-columns: 90px 1fr; gap: 12px; }
  .area__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
  .area__list li { font-size: 12px; margin: 0; }

  /* CTA */
  .cta__inner { flex-direction: column; padding: 24px 14px; gap: 14px; }
  .cta__txt { font-size: 16px; text-align: center; }
  .cta__btns { width: 100%; gap: 6px; }
  .cta__btns .btn { flex: 1; min-width: 0; flex-direction: column; text-align: center; padding: 8px 4px; gap: 4px; }
  .cta__btns .btn__ico { width: 20px; height: 20px; }
  .cta__btns .btn__label { font-size: 9px; }
  .cta__btns .btn__main { font-size: 12px; }
  .cta__btns .btn__note { display: none; }

}

@media (min-width: 768px) {
  .lawyers--sp { display: none; }
}

/* ==========================================================================
   タブレット（768px〜1024px）：PCレイアウトを縮小調整
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .header__addr { display: none; }
  .header__cta .btn { padding: 6px 10px; }
  .header__cta .btn__main { font-size: 14px; }
  .gnav__list a { font-size: 13px; padding: 10px 4px; }
  .mv__inner { grid-template-columns: 1fr 260px; }
  .mv__hand { right: 20px; top: 24px; font-size: 14px; }
  .mv__photo { padding-top: 70px; }
  .lawyer-ph { width: 124px; height: 180px; }
  .mv__points { gap: 8px; }
  .point__val { font-size: 18px; }
  .mv__cta { gap: 8px; }
  .mv__cta .btn { font-size: 15px; padding: 10px 14px; }
  .mv__cta .btn__main { font-size: 18px; }
  .achieve__list { gap: 14px; }
  .achieve__msg { font-size: 13px; }
  .qnav__list { grid-template-columns: repeat(4, 1fr); }
  .video { grid-template-columns: 1fr; }
  .video__body h3 br { display: none; }
  .triple__grid { grid-template-columns: 1fr 1fr; }
  .triple__grid > :last-child { grid-column: 1 / -1; }
  .triple__grid > :last-child .flow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .triple__grid > :last-child .flow__list li { margin: 0; }
  .access__grid { grid-template-columns: 1.6fr 1fr; }
  .access__inner { grid-template-columns: 1fr 1fr; }
  .access__txt { grid-column: 1 / -1; }
  .cta__inner { flex-direction: column; }
  .cta__txt { text-align: center; }
  .worry__box { grid-template-columns: 1.4fr auto 1fr; padding: 20px 16px; }
  .worry__answer { font-size: 20px; white-space: nowrap; }
  .worry__arrow { border-left-width: 20px; border-top-width: 26px; border-bottom-width: 26px; }
  .reason__box { grid-template-columns: 1fr; }
  .reason__ph { display: none; }
  .search__list { grid-template-columns: 1fr 1fr; }
  .case__after strong b, .case__before strong b { font-size: 20px; }
}

/* ========================================================================== 
   2026-09 カンプ寄せ調整 / 実画像適用
   ========================================================================== */
.mv {
  background:
    linear-gradient(180deg, rgba(240,250,255,.36), rgba(255,255,255,.12) 66%, rgba(255,255,255,.78)),
    radial-gradient(circle at 58% 18%, #ffffff 0 6%, transparent 26%),
    linear-gradient(180deg, #d9efff 0%, #edf8ff 48%, #d6ecf7 100%);
}
.mv::before {
  height: 46%;
  opacity: .72;
  background:
    linear-gradient(to top, rgba(255,255,255,.75), transparent 72%),
    repeating-linear-gradient(90deg, rgba(41,115,163,.11) 0 30px, rgba(255,255,255,.20) 30px 58px, rgba(41,115,163,.08) 58px 91px);
}
.mv__inner { padding-top: 28px; }
.mv__photo { padding-top: 62px; gap: 0; overflow: visible; }
.lawyer-ph { background: transparent; overflow: visible; height: 268px; border-radius: 0; }
.lawyer-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; mix-blend-mode: multiply; }
.lawyer-ph--kurahashi { width: 190px; }
.lawyer-ph--kan { width: 190px; margin-left: -8px; }
.lawyer-ph--kan img { object-position: center 22%; }
.lawyer-ph__name { bottom: 10px; z-index: 2; min-width: 112px; text-align: center; }

.profile__ph { background:#eef3f7; overflow:hidden; }
.profile__ph img { width:100%; height:100%; object-fit:cover; object-position:center 31%; display:block; }
.reason__ph { overflow:hidden; }
.reason__ph img { width:100%; height:100%; object-fit:cover; display:block; }
.building-ph { overflow:hidden; background:#eef3f7; border-radius:var(--radius); min-height:160px; }
.building-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.parts__fig img { width:100%; height:auto; display:block; }

/* PCカンプの密度に近づける */
@media (min-width: 768px) {
  :root { --w-container: 1180px; }
  .header__inner { padding-top: 10px; padding-bottom: 10px; }
  .gnav__list a { padding-top: 10px; padding-bottom: 10px; }
  .mv__inner { grid-template-columns: 1fr 430px; }
  .mv__catch { font-size: 34px; }
  .mv__catch .big { font-size: 42px; }
  .mv__lead { font-size: 14px; }
  .media__grid { align-items: stretch; }
  .worry__box, .reason__box { min-height: 255px; }
  .profile { min-height: 210px; }
  .compare .grid-2 { align-items:start; }
}

@media (max-width: 767px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .header__inner { padding: 7px 9px; gap: 7px; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__sub { font-size: 9px; }
  .logo__main { font-size: 14px; }
  .logo__office { display:none; }
  .mv__inner { padding: 12px 9px 12px; }
  .mv__catch { font-size: 22px; line-height:1.34; }
  .mv__catch .big { font-size: 29px; }
  .mv__hand { margin: 0 2px -4px; font-size: 11px; }
  .mv__photo { margin-top: 1px; gap: 0; }
  .lawyer-ph { width: 50%; height: 210px; }
  .lawyer-ph img { object-position:center 24%; mix-blend-mode:multiply; }
  .lawyer-ph--kan { margin-left: -6px; }
  .lawyer-ph__name { bottom: 4px; min-width: 104px; font-size: 10px; padding: 3px 6px; }
  .lawyer-ph__name small { font-size: 8px; }
  .mv__points { margin-top: 4px; }
  .mv__cta { margin-top: 8px; gap: 7px; }
  .achieve__inner { padding-top: 10px; padding-bottom: 10px; }
  .qnav__list a { min-height: 67px; }
  .video__thumb { aspect-ratio: 16 / 9; }
  .profile__ph img { object-position:center 29%; }
  .reason__ph { display:none; }
  .building-ph { min-height: 125px; }
  .parts__fig img { max-height: 205px; object-fit:contain; }
}
/* WordPress dynamic solution-case links */
.cases__list .case > a { display:block; color:inherit; text-decoration:none; }
a.case-sp { display:block; color:inherit; text-decoration:none; }


/* 2026-09-30 MV asset swap */
.mv {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.14) 44%, rgba(255,255,255,.66) 100%),
    url("../images/top-renewal/mv-bg.jpg") center center / cover no-repeat;
}
.mv::before {
  display:none;
}
.mv__inner {
  grid-template-columns: minmax(0, 1fr) 520px;
  min-height: 530px;
  align-items: end;
}
.mv__body {
  position: relative;
  z-index: 2;
}
.mv__photo {
  padding-top: 0;
  align-self: end;
  justify-content: flex-end;
}
.mv-lawyers {
  position: relative;
  width: 100%;
  max-width: 520px;
}
.mv-lawyers img {
  display: block;
  width: 100%;
  height: auto;
}
.lawyer-ph, .lawyer-ph--kurahashi, .lawyer-ph--kan {
  width: auto;
  height: auto;
}
.lawyer-ph__name {
  position: absolute;
  bottom: 18px;
  transform: none;
}
.lawyer-ph__name--kurahashi {
  left: 112px;
}
.lawyer-ph__name--kan {
  right: 70px;
}
@media (min-width:1025px) {
  .mv__inner { grid-template-columns: minmax(0, 1fr) 540px; min-height: 560px; }
  .mv__catch { font-size: 35px; line-height: 1.48; }
  .mv__catch .big { font-size: 50px; }
  .mv__lead { max-width: 560px; }
  .mv__hand { right: 140px; top: 30px; }
}
@media (max-width:767px) {
  .mv { background-position: 63% center; }
  .mv__inner { min-height: 0; }
  .mv-lawyers { max-width: 100%; }
  .lawyer-ph__name { bottom: 5px; font-size: 10px; min-width: 102px; padding: 3px 6px; }
  .lawyer-ph__name small { font-size: 8px; }
  .lawyer-ph__name--kurahashi { left: 25px; }
  .lawyer-ph__name--kan { right: 16px; }
}

/* 2026-09-30 PC MV tuning */
@media (min-width: 768px) {
  .mv {
    background:
      linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.58) 100%),
      url("../images/top-renewal/mv-bg.jpg") center 56% / cover no-repeat;
  }
  .mv__inner {
    grid-template-columns: minmax(0, 1fr) 540px;
    min-height: 500px;
    padding: 18px 20px 14px;
    gap: 18px;
    align-items: end;
  }
  .mv__body {
    max-width: 640px;
    padding-top: 20px;
  }
  .mv__catch {
    font-size: 32px;
    line-height: 1.46;
    letter-spacing: 0;
    white-space: normal;
    max-width: 640px;
  }
  .mv__catch .big {
    font-size: 53px;
    line-height: 1;
  }
  .mv__lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    max-width: 560px;
  }
  .mv__hand {
    top: 18px;
    right: 58px;
    font-size: 16px;
    line-height: 1.55;
    z-index: 3;
  }
  .mv__points {
    gap: 10px;
    margin-top: 16px;
    max-width: 500px;
  }
  .point {
    padding: 10px 14px;
  }
  .point__val {
    font-size: 20px;
  }
  .mv__photo {
    align-self: end;
    justify-content: flex-end;
    padding-top: 0;
    overflow: visible;
  }
  .mv-lawyers {
    width: 620px;
    max-width: none;
    margin-right: -34px;
    margin-bottom: 0;
  }
  .mv-lawyers img {
    width: 100%;
    height: auto;
    display: block;
  }
  .lawyer-ph__name {
    bottom: 22px;
    min-width: 168px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.35;
    border-radius: 4px;
  }
  .lawyer-ph__name small {
    font-size: 11px;
  }
  .lawyer-ph__name--kurahashi {
    left: 152px;
  }
  .lawyer-ph__name--kan {
    right: 92px;
  }
  .mv__cta {
    gap: 12px;
    margin-top: 6px;
  }
  .mv__cta .btn {
    min-height: 84px;
    padding: 14px 22px;
  }
}

/* 2026-09-30 PC MV refinement — design match */
@media (min-width: 768px) {
  .mv {
    background:
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.42) 100%),
      url("../images/top-renewal/mv-bg.jpg") center 52% / cover no-repeat;
  }

  .mv__inner {
    grid-template-columns: minmax(0, 620px) minmax(520px, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 28px 20px 22px;
    column-gap: 8px;
    row-gap: 0;
    align-items: end;
  }

  .mv__body {
    position: static;
    grid-column: 1;
    grid-row: 1;
    max-width: 600px;
    padding-top: 0;
    align-self: start;
  }

  .mv__catch,
  .mv__lead,
  .mv__points {
    position: relative;
    z-index: 3;
  }

  .mv__catch {
    max-width: 590px;
    font-size: 27px;
    line-height: 1.42;
    letter-spacing: 0;
    white-space: normal;
  }

  .mv__catch .big {
    font-size: 41px;
    line-height: 1.05;
  }

  .mv__lead {
    margin-top: 14px;
    max-width: 545px;
    font-size: 13px;
    line-height: 1.75;
  }

  .mv__hand {
    top: 22px;
    right: 70px;
    font-size: 15px;
    line-height: 1.55;
    transform: rotate(-5deg);
    z-index: 5;
    text-align: left;
  }

  .mv__photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    justify-content: flex-end;
    padding-top: 0;
    overflow: visible;
    z-index: 2;
  }

  .mv-lawyers {
    width: 650px;
    max-width: none;
    margin-right: -20px;
    margin-bottom: 0;
  }

  .lawyer-ph__name {
    bottom: 20px;
    min-width: 150px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.32;
  }

  .lawyer-ph__name small {
    font-size: 10px;
  }

  .lawyer-ph__name--kurahashi {
    left: 150px;
  }

  .lawyer-ph__name--kan {
    right: 92px;
  }

  .mv__points {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 7px;
    margin-top: 16px;
    max-width: 500px;
    align-self: end;
  }

  .point {
    padding: 8px 10px;
    min-height: 74px;
  }

  .point__ico {
    width: 32px;
    height: 32px;
  }

  .point__label {
    font-size: 11px;
  }

  .point__val {
    font-size: 21px;
  }

  .point__val small {
    font-size: 13px;
  }

  .mv__cta {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 12px;
    margin-top: 12px;
    position: relative;
    z-index: 6;
  }

  .mv__cta .btn {
    min-height: 80px;
    padding: 12px 20px;
    font-size: 17px;
    color: #fff !important;
  }

  .mv__cta .btn,
  .mv__cta .btn span,
  .mv__cta .btn__label,
  .mv__cta .btn__main,
  .mv__cta .btn__arrow,
  .mv__cta .btn__ico {
    color: #fff !important;
  }

  .mv__cta .btn__ico svg {
    fill: currentColor !important;
    color: #fff !important;
  }

  .mv__cta .btn__ico {
    width: 34px;
    height: 34px;
  }

  .mv__cta .btn__main {
    font-size: 21px;
  }
}

/* ==========================================================================
   2026-10-01 PC MV 最終調整（重複整理済み）
   ========================================================================== */
@media (min-width: 768px) {

  /* MV レイアウト */
  .mv__inner {
    max-width: var(--w-container);
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    padding: 26px 20px 22px;
    column-gap: 8px;
  }

  .mv__body,
  .mv__catch {
    max-width: 675px;
  }

  /* メインコピー */
  .mv__catch {
    font-size: 40px;
    line-height: 1.48;
    text-shadow:
      0 0 6px rgba(255,255,255,.72),
      0 0 12px rgba(255,255,255,.48),
      0 0 20px rgba(255,255,255,.28);
  }

  .mv__catch .big {
    font-size: 46px;
    line-height: 1.28;
  }

  .mv__lead {
    margin-top: 16px !important;
    max-width: 650px;
    font-size: 20px;
    line-height: 1.68;
    font-weight: 700;
    text-shadow:
      0 0 5px rgba(255,255,255,.60),
      0 0 10px rgba(255,255,255,.34),
      0 0 18px rgba(255,255,255,.20);
  }

  /* 手書きコピー */
  .mv__hand {
    left: auto;
    right: 105px;
    top: 12px;
    font-size: 21px;
    line-height: 1.45;
    font-family: "Yomogi", cursive;
    font-weight: 700;
  }

  /* 弁護士写真 */
  .mv__photo {
    transform: translate(-112px, 8px);
  }

  .mv-lawyers {
    width: 760px;
    max-width: none;
    margin-right: -72px;
  }

  .lawyer-ph__name {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }

  .lawyer-ph__name--kurahashi {
    left: 95px;
  }

  .lawyer-ph__name--kan {
    left: auto !important;
    right: 90px !important;
  }

  /* 相談料・着手金・365日対応 */
  .mv__points {
    margin-top: 18px;
    max-width: 620px;
    gap: 8px;
    transform: translateY(-12px);
  }

  .point {
    min-width: 0;
    gap: 14px;
    padding: 12px;
  }

  .point__ico {
    width: 46px;
    height: 46px;
  }

  .point__ico svg {
    width: 26px;
    height: 26px;
  }

  .point__label {
    font-size: 17px;
    line-height: 1.3;
    white-space: nowrap;
  }

  .point__val {
    font-size: 28px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .point__val small {
    font-size: 18px;
  }

  /* MV CTA */
  .mv__cta {
    max-width: 1120px;
    margin-top: 10px;
    gap: 10px;
  }

  .mv__cta .btn {
    min-height: 78px;
    padding: 12px 18px;
    justify-content: center;
    text-align: center;
    border: 2px solid #fff;
    gap: 14px;
  }

  .mv__cta .btn__label {
    font-size: 18px;
  }

  .mv__cta .btn__main {
    font-size: 30px;
  }

  .mv__cta .btn--line .btn__main,
  .mv__cta .btn--mail .btn__main {
    font-size: 30px !important;
  }

  .mv__cta .btn__ico {
    width: 44px;
    height: 44px;
  }

  .mv__cta .btn__arrow {
    font-size: 30px;
    margin-left: 0;
  }
}
@media (min-width: 768px) {

  .mv__cta .btn:nth-child(2),
  .mv__cta .btn:nth-child(3) {
    font-size: 20px !important;
  }

  .mv__cta .btn:nth-child(2) > span:not(.btn__ico):not(.btn__arrow),
  .mv__cta .btn:nth-child(3) > span:not(.btn__ico):not(.btn__arrow) {
    font-size: 20px !important;
  }
}
@media (min-width: 768px) {
  .mv__points,
  .mv__cta {
    opacity: 0.88;
  }
}
@media (min-width: 768px) {
  .lawyer-ph__name{
    opacity: 0.95;
  }
}
@media (min-width: 768px) {

  .achieve__inner {
    max-width: 1180px;
    padding: 20px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr;
    align-items: center;
    gap: 20px;
  }

  .achieve__list {
    display: contents;
  }

  .laurel {
    justify-content: center;
    gap: 10px;
  }

  .laurel::before,
  .laurel::after {
    width: 34px;
    height: 68px;
  }

  .laurel__body {
    text-align: center;
    line-height: 1.25;
  }

  .laurel__label {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .laurel__val {
    font-size: 23px;
    line-height: 1.2;
  }

  .laurel__val strong {
    font-size: 38px;
  }

  .laurel__note {
    font-size: 11px;
    margin-top: 3px;
  }

  .achieve__msg {
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .laurel__val {
    white-space: nowrap;
  }
}

/* ==========================================================================
   2026-10-01 PC Header / Global Nav transparent over MV
   ========================================================================== */
@media (min-width: 768px) {

  /* ヘッダーとグローバルナビをMVの上に重ねる */
  .header,
  .gnav {
    position: relative;
    z-index: 20;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* MV背景をヘッダー＋ナビの背面まで伸ばす */
  .mv {
    margin-top: -118px;
    padding-top: 118px;
  }

  /* ヘッダー内は透過背景の上でも見やすく */
  .header__inner,
  .gnav__list {
    position: relative;
    z-index: 21;
  }

  /* ロゴメイン文言はオレンジ */
  .header .logo__main {
    color: var(--c-orange);
  }
}

/* ==========================================================================
   FINAL OVERRIDES 2026-10-01
   ここより下を最終仕様とする
   ========================================================================== */

/* ---------- PC ---------- */
@media (min-width: 768px) {

  /* ヘッダー / ナビ：MVがうっすら見える透過 */
  .header,
  .gnav {
    position: relative;
    z-index: 20;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .header__inner,
  .gnav__list {
    position: relative;
    z-index: 21;
  }

  .header .logo__main {
    color: var(--c-orange);
  }

  .mv {
    margin-top: -118px;
    padding-top: 118px;
    padding-bottom: 125px;
  }

  /* 実績帯：MVに重ねて背景を透過 */
  .achieve {
    position: relative;
    z-index: 10;
    margin-top: -125px;
    background: rgba(20, 53, 95, 0.86);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .achieve__inner {
    max-width: 1180px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr;
    align-items: center;
    gap: 20px;
  }

  .achieve__list {
    display: contents;
  }

  .laurel {
    justify-content: center;
    gap: 10px;
  }

  .laurel::before,
  .laurel::after {
    width: 34px;
    height: 68px;
  }

  .laurel__body {
    text-align: center;
    line-height: 1.25;
  }

  .laurel__label {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .laurel__val {
    font-size: 23px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .laurel__val strong {
    font-size: 38px;
  }

  .laurel__note {
    font-size: 11px;
    margin-top: 3px;
  }

  .achieve__msg {
    font-size: 18px;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  /* クイックナビ */
  .qnav {
    background: #fff;
  }

  .qnav__list a {
    background: #fdf5ee;
  }

  /* 下層セクション背景を白へ統一 */
  .media,
  .worry,
  .message,
  .compare,
  .search,
  .triple,
  .access {
    background: #fff !important;
  }

  /* YouTube + 説明 + 無料相談バナー */
  .media__grid {
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    gap: 26px;
    align-items: center;
  }

  .video {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 18px;
    align-items: center;
  }

  .video__embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
  }

  .video__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .video__body {
    display: block;
  }

  .video__body h3 {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  .video__body p {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 16px;
  }

  .video__body .btn {
    font-size: 14px;
    padding: 10px 18px;
  }

  .free-banner {
    display: block;
    width: 100%;
    height: auto;
  }

  .free-banner img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain;
  }

  /* お悩み / 選ばれる4つの理由 */
  .worry {
    padding-top: 38px;
  }

  .worry .grid-2--wide {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid #f3dfcf;
    background: #fff;
    overflow: hidden;
  }

  /* 左側 */
  .worry__box {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 54px minmax(170px, .72fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    row-gap: 12px;
    min-height: 300px;
    padding: 18px 24px 20px;
    background: #fff;
    border-radius: 0;
  }

  .worry__box .ttl {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--c-navy);
  }

  .worry__box .ttl .em-orange {
    color: var(--c-orange);
  }

  .worry__box .check-list {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }

  .check-list li {
    margin-bottom: 10px;
    padding-left: 32px;
    font-size: 15px;
    line-height: 1.55;
  }

  .check-list li:last-child {
    margin-bottom: 0;
  }

  .check-list li::before {
    width: 21px;
    height: 21px;
    top: 1px;
  }

  .worry__fig {
    display: none;
  }

  .worry__arrow {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    display: block;
    width: 0;
    height: 0;
    border-top: 36px solid transparent;
    border-bottom: 36px solid transparent;
    border-left: 30px solid var(--c-orange);
    transform: none;
  }

  .worry__answer {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin: 0;
    color: var(--c-orange);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: nowrap;
  }

  /* 右側 */
  .reason__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    row-gap: 10px;
    min-height: 300px;
    padding: 18px 0 18px 28px;
    background: #fff;
    border-left: 1px solid #eee4dc;
    border-radius: 0;
  }

  .reason__box .ttl {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--c-navy);
  }

  .reason__box .ttl .pc-only {
    display: block !important;
  }

  .reason__box .ttl strong {
    color: var(--c-orange);
    font-size: 30px;
    line-height: 1;
    vertical-align: -2px;
  }

  .reason__box .num-list {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }

  .num-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  .num-list li:last-child {
    margin-bottom: 0;
  }

  .num-list .num {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .reason__ph {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: block;
    width: 170px;
    height: auto;
    min-height: 0;
    margin: -18px 0;
    overflow: hidden;
    border-radius: 0;
  }

  .reason__ph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }
}

/* ---------- SP：YouTube埋め込み ---------- */
@media (max-width: 767px) {
  .video__embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
  }

  .video__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* ==========================================================================
   2026-10-01 見出しサイズ・余白調整
   ========================================================================== */
@media (min-width: 768px) {

  /* このようなお悩みはありませんか？ */
  .worry__box .ttl {
    font-size: 30px;
    line-height: 1.35;
    margin-bottom: 0;
  }

  /* 大分みんなの法律事務所が選ばれる4つの理由 */
  .reason__box .ttl {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 0;
  }

  .reason__box .ttl strong {
    font-size: 46px;
    line-height: 1;
  }
}

/* ==========================================================================
   2026-10-01 お悩み / 4つの理由 微調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 両ボックスの枠線を2pxに */
  .worry__box,
  .reason__box {
    border: 2px solid #f3dfcf;
  }

  /* 左ボックス */
  .worry__box {
    background: #fcfaf7;
  }

  /* 左の「お悩み」を右の「4」と同じサイズに */
  .worry__box .ttl .em-orange {
    font-size: 46px;
    line-height: 1;
  }

  /* 左リスト背景を白に */
  .worry__box .check-list {
    background: #fff;
  }

  /* 左右リストの文字を大きく */
  .worry__box .check-list li,
  .reason__box .num-list li {
    font-size: 17px;
  }

  /* 右見出し：
     「大分みんなの法律事務所が」は小さいまま */
  .reason__box .ttl {
    font-size: 17px;
    line-height: 1.45;
  }

  /* 数字の「4」は大きく */
  .reason__box .ttl strong {
    font-size: 46px;
    line-height: 1;
  }
}

/* ==========================================================================
   2026-10-01 右見出しサイズ修正
   ========================================================================== */
@media (min-width: 768px) {

  /* 2行目「選ばれる4つの理由」は大きく */
  .reason__box .ttl {
    font-size: 28px;
    line-height: 1.4;
  }

  /* 1行目「大分みんなの法律事務所が」だけ小さく */
  .reason__box .ttl::first-line {
    font-size: 17px;
    line-height: 1.45;
  }

  /* 数字の4 */
  .reason__box .ttl strong {
    font-size: 46px;
    line-height: 1;
  }
}

/* ==========================================================================
   2026-10-01 見出し左線解除 / 左リスト余白
   ========================================================================== */
@media (min-width: 768px) {

  /* 両見出しの左ボーダー風ラインを解除 */
  .worry__box .ttl,
  .reason__box .ttl {
    padding-left: 0;
  }

  .worry__box .ttl::before,
  .reason__box .ttl::before {
    content: none;
    display: none;
  }

  /* 左側リストの白背景に内側余白 */
  .worry__box .check-list {
    padding: 10px;
  }
}

/* ==========================================================================
   2026-10-01 リスト文字サイズ / 行間調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 両方のリスト文字を1px大きく */
  .worry__box .check-list li,
  .reason__box .num-list li {
    font-size: 18px;
  }

  /* 左側リストの行間を広げる */
  .worry__box .check-list li {
    line-height: 1.75;
    margin-bottom: 12px;
  }

  .worry__box .check-list li:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   2026-10-01 外側枠線解除
   ========================================================================== */
@media (min-width: 768px) {

  /* 左右ボックス全体を囲っていた1px線を解除 */
  .worry .grid-2--wide {
    border: none;
  }

  /* 右ボックス左側に残っていた1px線も解除 */
  .reason__box {
    border-left: 2px solid #f3dfcf;
  }
}

/* ==========================================================================
   2026-10-01 「その不安、私たちが解決します。」サイズ調整
   ========================================================================== */
@media (min-width: 768px) {
  .worry__answer {
    font-size: 28px;
  }
}

/* ==========================================================================
   2026-10-01 代表メッセージ / 弁護士紹介 PCカンプ寄せ
   ========================================================================== */
@media (min-width: 768px) {

  .message {
    padding-top: 32px;
  }

  .message > .container.grid-2 {
    gap: 16px;
    align-items: stretch;
    grid-template-columns: 1.08fr 0.92fr;
  }

  /* 左右それぞれを1枚のカードに */
  .message .profile {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    row-gap: 12px;

    min-height: 290px;
    padding: 12px;

    border: 2px solid #eeeeee;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 7px rgba(20, 53, 95, .07);
  }

  /* 見出しを写真右側の上段へ */
  .message .profile .ttl {
    grid-column: 2 !important;
    grid-row: 1;

    margin: 0;
    padding-left: 0;

    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--c-navy);
  }

  .message .profile .ttl::before {
    content: none;
    display: none;
  }

  /* 写真 */
  .message .profile__ph {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 180px;
    height: 265px;
    aspect-ratio: auto;

    border-radius: 0;
    background: #f5f5f5;
    overflow: hidden;
  }

  .message .profile__ph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 右側本文 */
  .message .profile > div:last-child {
    grid-column: 2;
    grid-row: 2;

    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .message .profile__txt {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #5b6780;
  }

  /* 左：代表弁護士名 */
  .message .profile__sign {
    margin-top: auto;
    padding-top: 12px;

    text-align: right;
    font-size: 15px;
    color: var(--c-navy);
  }

  .message .profile__sign strong {
    margin-left: 12px;
    font-size: 25px;
    line-height: 1.2;
    color: var(--c-navy);
  }

  /* 右：弁護士名 */
  .message .profile__name {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--c-navy);
  }

  .message .profile__name small {
    margin-right: 10px;
    font-size: 15px;
    font-weight: 500;
  }

  /* 右：ボタン */
  .message .profile__btn {
    margin-top: auto;
    text-align: right;
  }

  .message .profile__btn .btn {
    min-width: 220px;
    padding: 11px 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   2026-10-01 保険会社と弁護士の違い / 解決事例 カンプ寄せ
   ========================================================================== */
@media (min-width: 768px) {

  /* セクション全体 */
  .compare {
    padding-top: 30px;
  }

  .compare .grid-2 {
    gap: 16px;
    align-items: start;
  }

  /* -------------------------
     保険会社と弁護士の違い
     ------------------------- */
  .compare .cmp-table {
    font-size: 14px;
    border: 1px solid #e1e5ea;
  }

  .compare .cmp-table th,
  .compare .cmp-table td {
    padding: 11px 10px;
    line-height: 1.45;
    border-right: 1px solid #e1e5ea;
    border-bottom: 1px solid #e1e5ea;
  }

  .compare .cmp-table tr > *:last-child {
    border-right: 0;
  }

  .compare .cmp-table tbody tr:last-child > * {
    border-bottom: 0;
  }

  /* ヘッダーはカンプの薄いベージュ */
  .compare .cmp-table thead th,
  .compare .cmp-table thead th:first-child {
    background: #fdf0df;
    color: var(--c-navy);
    font-size: 15px;
    font-weight: 700;
  }

  .compare .cmp-table thead th.is-our {
    background: #fdf0df;
    color: var(--c-orange);
    font-size: 15px;
  }

  /* 左端の項目列 */
  .compare .cmp-table tbody th {
    background: #f5f6f8;
    color: var(--c-navy);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
  }

  /* 中央列 */
  .compare .cmp-table tbody td {
    background: #fff;
  }

  /* 弁護士列 */
  .compare .cmp-table td.is-our {
    background: #fffaf5;
    color: var(--c-orange);
    font-weight: 700;
  }

  /* -------------------------
     解決事例
     ------------------------- */
  .compare .cases__list {
    gap: 12px;
  }

  .compare .case {
    display: flex;
    flex-direction: column;
    min-height: 310px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    text-align: center;
  }

  /* 上部タイトル：青ベタをやめて白地＋オレンジ文字 */
  .compare .case__ttl {
    min-height: 68px;
    padding: 12px 10px 10px;
    background: #fff;
    color: var(--c-orange);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
  }

  /* 提示額エリア */
  .compare .case__before {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    padding: 14px 8px 8px;
    background: #f6f7f8;
    color: #5b6470;
    font-size: 13px;
    line-height: 1.5;
  }

  .compare .case__before strong {
    margin-top: 3px;
    color: var(--c-navy);
    font-size: 18px;
    line-height: 1.3;
  }

  .compare .case__before strong b {
    font-size: 25px;
  }

  /* 矢印はグレー */
  .compare .case__arrow {
    padding: 1px 0 6px;
    background: #f6f7f8;
    color: #7f8995;
    font-size: 28px;
    line-height: 1;
  }

  /* 解決後 */
  .compare .case__after {
    min-height: 96px;
    padding: 10px 7px 12px;
    background: var(--c-orange);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
  }

  .compare .case__after strong {
    margin-top: 3px;
    font-size: 20px;
    line-height: 1.25;
  }

  .compare .case__after strong b {
    font-size: 31px;
  }

  .compare .cases__note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.5;
    color: #68717d;
  }
}

/* ==========================================================================
   2026-10-01 解決事例カード 余白・金額・矢印調整
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case {
    min-height: 0;
  }

  /* タイトル部分の無駄な高さを削減 */
  .compare .case__ttl {
    min-height: 0;
    padding: 14px 10px 10px;
    font-size: 17px;
    line-height: 1.45;
  }

  /* 提示額エリアを詰める */
  .compare .case__before {
    flex: none;
    min-height: 0;
    padding: 18px 8px 8px;
    background: #f6f7f8;
    font-size: 13px;
    line-height: 1.45;
  }

  /* 提示額の数字を大きく */
  .compare .case__before strong {
    margin-top: 2px;
    font-size: 22px;
    line-height: 1.2;
  }

  .compare .case__before strong b {
    font-size: 32px;
  }

  /* ▽を独立帯にせず、提示額エリアと一体化 */
  .compare .case__arrow {
    margin: 0;
    padding: 0 0 10px;
    background: #f6f7f8;
    border: 0;
    color: #7f8995;
    font-size: 30px;
    line-height: 1;
  }

  /* 解決後エリアの余白を詰める */
  .compare .case__after {
    min-height: 0;
    padding: 10px 7px 12px;
  }

  /* 解決後の数字を大きく */
  .compare .case__after strong {
    margin-top: 2px;
    font-size: 23px;
    line-height: 1.15;
  }

  .compare .case__after strong b {
    font-size: 36px;
  }

  .compare .cases__note {
    margin-top: 5px;
  }
}

/* ==========================================================================
   2026-10-01 解決事例 ▽位置調整
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case__before {
    padding-bottom: 0;
  }

  .compare .case__arrow {
    margin-top: -2px;
    padding: 0 0 2px;
    line-height: .8;
  }

  .compare .case__after {
    margin-top: 0;
  }
}

/* ==========================================================================
   2026-10-01 解決事例 ▽上余白 完全調整
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case__before {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .compare .case__arrow {
    margin: -10px 0 0;
    padding: 0 0 2px;
    min-height: 0;
    height: auto;
    line-height: .75;
  }
}

/* ==========================================================================
   2026-10-01 解決事例 ▽位置 最終調整
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case__before {
    padding-bottom: 4px;
    margin-bottom: 0;
  }

  .compare .case__arrow {
    margin: 0;
    padding: 0 0 10px;
    min-height: 0;
    height: auto;
    line-height: 1;
  }

  .compare .case__after {
    margin-top: 0;
  }
}

/* ==========================================================================
   2026-10-01 解決事例カード 下余白解除
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case {
    padding-bottom: 0;
  }

  .compare .case__after {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* ==========================================================================
   2026-10-01 解決事例 タイトル下余白調整
   ========================================================================== */
@media (min-width: 768px) {

  .compare .case__ttl {
    padding-bottom: 4px;
  }
}

/* ==========================================================================
   2026-10-01 比較表 見出し下余白調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 左側「保険会社と弁護士の違い」の見出し下を右側と揃える */
  .compare .grid-2 > div:first-child > .ttl {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   2026-10-01 比較表 td 左寄せ
   ========================================================================== */
@media (min-width: 768px) {

  .compare .cmp-table td {
    text-align: left;
  }
}

/* ==========================================================================
   2026-10-01 お悩みから探す 見出し・タイトル調整
   ========================================================================== */
@media (min-width: 768px) {

  /* セクション見出し下に余白 */
  .search > .container > .ttl {
    margin-bottom: 18px;
  }

  /* 各カードのタイトル */
  .search__body strong {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;
  }

  /* 各カードごとにタイトル色を変更 */
  .search__list .s1 .search__body strong {
    color: #e85b4f;
  }

  .search__list .s2 .search__body strong {
    color: #2f78bb;
  }

  .search__list .s3 .search__body strong {
    color: #2f9e57;
  }

  .search__list .s4 .search__body strong {
    color: #6d4fc4;
  }

  /* カテゴリー数 */
  .search__body > span {
    font-size: 15px;
    line-height: 1.5;
  }

  /* 補足テキスト */
  .search__body small {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* ==========================================================================
   2026-10-01 お悩みから探す 補足色・高さ調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 4ボックスの高さを統一 */
  .search__list {
    align-items: stretch;
  }

  .search__list a {
    height: 100%;
    min-height: 126px;
  }

  /* 補足テキストもテーマ色に */
  .search__list .s1 .search__body small {
    color: #e85b4f;
  }

  .search__list .s2 .search__body small {
    color: #2f78bb;
  }

  .search__list .s3 .search__body small {
    color: #2f9e57;
  }

  .search__list .s4 .search__body small {
    color: #6d4fc4;
  }
}

/* ==========================================================================
   2026-10-01 お悩みから探す ボックス上下余白調整
   ========================================================================== */
@media (min-width: 768px) {

  .search__list a {
    padding-top: 7px;
    padding-bottom: 7px;
    min-height: 0;
  }
}

/* ==========================================================================
   2026-10-01 お悩みから探す ボックス上下余白 再調整
   ========================================================================== */
@media (min-width: 768px) {

  .search__list a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ==========================================================================
   2026-10-01 3カラムセクション 見出し下余白調整
   ========================================================================== */
@media (min-width: 768px) {

  /* けがの部位から探す / よくあるご質問 / ご相談から解決までの流れ */
  .triple .ttl {
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   2026-10-01 3カラム幅調整 / 人体イラスト拡大
   ========================================================================== */
@media (min-width: 768px) {

  /* 左を広く、中央・右を少し細く */
  .triple__grid {
    grid-template-columns: 1.55fr 0.9fr 0.85fr;
    gap: 24px;
  }

  /* 左：人体イラストを大きく */
  .parts {
    grid-template-columns: 1fr 150px 1fr;
    gap: 12px;
  }

  .parts__fig {
    width: 150px;
    justify-self: center;
  }

  .parts__fig img {
    width: 150px;
    max-height: none;
  }
}

/* ==========================================================================
   2026-10-01 3カラム幅調整 追加
   ========================================================================== */
@media (min-width: 768px) {

  /* 左カラムをさらに広く */
  .triple__grid {
    grid-template-columns: 1.8fr 0.8fr 0.75fr;
    gap: 22px;
  }

  /* 人体イラストもさらに拡大 */
  .parts {
    grid-template-columns: 1fr 180px 1fr;
    gap: 14px;
  }

  .parts__fig {
    width: 180px;
  }

  .parts__fig img {
    width: 180px;
    max-height: none;
  }
}

/* ==========================================================================
   2026-10-01 3カラム幅 微調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 左を少しだけ縮め、右カラムに幅を戻す */
  .triple__grid {
    grid-template-columns: 1.65fr 0.8fr 0.9fr;
    gap: 22px;
  }

  /* 人体イラストの大きさは維持しつつ、左右ボタン列を少し細く */
  .parts {
    grid-template-columns: 0.9fr 180px 0.9fr;
    gap: 12px;
  }

  .parts__list li a {
    padding-left: 22px;
    padding-right: 8px;
  }

  /* 右見出しは改行させない */
  .triple__grid > :last-child .ttl {
    white-space: nowrap;
  }
}

/* ==========================================================================
   2026-10-01 カテゴリー補足テキスト 色・太字調整
   ========================================================================== */
@media (min-width: 768px) {

  /* 各カード内の「全12カテゴリー」などをテーマ色＋太字に */
  .search__body > span {
    font-weight: 700;
  }

  .search__list .s1 .search__body > span {
    color: #e85b4f;
  }

  .search__list .s2 .search__body > span {
    color: #2f78bb;
  }

  .search__list .s3 .search__body > span {
    color: #2f9e57;
  }

  .search__list .s4 .search__body > span {
    color: #6d4fc4;
  }
}

/* ==========================================================================
   2026-10-01 地図・外観 / 対応エリア 修正
   ========================================================================== */

/* 見出し下の間隔 */
.access .ttl {
  margin-bottom: 18px;
}

/* Googleマップ：既存レイアウトを維持 */
.map-ph {
  position: relative;
  overflow: hidden;
  background: none;
}

.map-ph::after {
  content: none;
  display: none;
}

.map-ph iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ビル写真上の旧プレースホルダー模様を解除 */
.building-ph::before {
  content: none;
  display: none;
}

.building-ph img {
  position: relative;
  z-index: 1;
}

/* 大分県地図画像 */
.area__map {
  color: inherit;
}

.area__map img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* ==========================================================================
   2026-10-01 下部CTA カンプ寄せ
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("../images/top-renewal/mv-bg.jpg") center 52% / cover no-repeat;
}

/* 旧・疑似街並み背景を解除 */
.cta::before {
  content: none;
  display: none;
}

@media (min-width: 768px) {

  .cta__inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    min-height: 245px;
    margin: 0 auto;
    padding: 38px 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
  }

  .cta__txt {
    flex: 1 1 auto;
    margin: 0;

    color: var(--c-navy);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: .01em;
    white-space: nowrap;

    text-shadow:
      0 0 5px rgba(255,255,255,.98),
      0 0 10px rgba(255,255,255,.95);
  }

  .cta__btns {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    align-items: stretch;
  }

  .cta__btns .btn {
    width: 225px;
    min-height: 108px;
    padding: 14px 16px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    border: 2px solid rgba(255,255,255,.88);
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,.18);

    color: #fff !important;
    text-align: left;
    white-space: nowrap;
  }

  /* CTAボタン内の文字・アイコンをすべて白に固定 */
  .cta__btns .btn,
  .cta__btns .btn span,
  .cta__btns .btn .btn__label,
  .cta__btns .btn .btn__main,
  .cta__btns .btn .btn__note,
  .cta__btns .btn .btn__ico {
    color: #fff !important;
  }

  .cta__btns .btn__ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
  }

  .cta__btns .btn__ico svg {
    fill: currentColor;
  }

  .cta__btns .btn__label {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }

  .cta__btns .btn__main {
    display: block;
    font-size: 21px !important;
    font-weight: 900;
    line-height: 1.15;
  }

  .cta__btns .btn__note {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .cta__btns .btn--line .btn__main,
  .cta__btns .btn--mail .btn__main {
    font-size: 17px !important;
  }
}

@media (max-width: 767px) {
  .cta {
    background:
      linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)),
      url("../images/top-renewal/mv-bg.jpg") center center / cover no-repeat;
  }
}

/* ==========================================================================
   2026-10-01 下部CTA 背景位置・上下余白調整
   ========================================================================== */

.cta {
  background-position: center 82%;
}

@media (min-width: 768px) {

  .cta__inner {
    min-height: 210px;
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

@media (max-width: 767px) {

  .cta {
    background-position: center 78%;
  }

  .cta__inner {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* ==========================================================================
   2026-10-01 MV テキストシャドウ強化
   ========================================================================== */

/* MV内の主要テキストを白い光でふわっと浮かせる */
.mv__catch,
.mv__lead,
.mv__hand,
.mv__points .point__label,
.mv__points .point__val {
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.98),
    0 0 12px rgba(255,255,255,.95),
    0 0 18px rgba(255,255,255,.85),
    0 0 26px rgba(255,255,255,.72);
}

/* 見出しはさらに強め */
.mv__catch {
  text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 8px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,.98),
    0 0 22px rgba(255,255,255,.92),
    0 0 32px rgba(255,255,255,.8);
}

/* 「一人で悩まず、私たちにご相談ください。」も強め */
.mv__hand {
  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 9px rgba(255,255,255,1),
    0 0 16px rgba(255,255,255,.95),
    0 0 24px rgba(255,255,255,.88),
    0 0 34px rgba(255,255,255,.75);
}

/* ==========================================================================
   2026-10-01 実績帯 月桂冠デザイン刷新
   ========================================================================== */

@media (min-width: 768px) {

  /* 月桂冠を細く上品なSVGへ差し替え */
  .laurel::before,
  .laurel::after {
    width: 30px;
    height: 62px;
    flex: none;
    opacity: .95;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23d7b24a' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 4C14 12 10 26 11 38c1 12 6 21 14 28'/%3E%3Cpath d='M20.8 10.2c-4.3.5-7.3 2.7-8.8 6.3 4.3-.2 7.1-2.2 8.8-6.3Z'/%3E%3Cpath d='M16.7 19.2c-4.2 1.1-6.8 3.8-7.7 7.6 4.2-.8 6.7-3.2 7.7-7.6Z'/%3E%3Cpath d='M14.2 29c-4 1.8-6.1 4.8-6.2 8.7 4-1.5 6-4.4 6.2-8.7Z'/%3E%3Cpath d='M14.1 39.3c-3.4 2.5-5 5.8-4.4 9.7 3.6-2.2 5-5.4 4.4-9.7Z'/%3E%3Cpath d='M16.5 49.2c-2.7 3.2-3.5 6.7-2.2 10.4 3-2.9 3.7-6.3 2.2-10.4Z'/%3E%3Cpath d='M20.8 57.2c-1.9 3.6-1.9 7.1.2 10.3 2.2-3.3 2.1-6.7-.2-10.3Z'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;

    filter: drop-shadow(0 0 1px rgba(215,178,74,.18));
  }

  .laurel::after {
    transform: scaleX(-1);
  }

  /* 装飾と文字の間を少し広げて上品に */
  .laurel {
    gap: 9px;
  }

  /* ゴールド文字も月桂冠に合わせて少し落ち着かせる */
  .laurel__val {
    color: #d7b24a;
  }

  /* 数値は強く、装飾は控えめに */
  .laurel__val strong {
    color: #e2c25f;
  }
}

@media (max-width: 767px) {

  .laurel::before,
  .laurel::after {
    width: 22px;
    height: 48px;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23d7b24a' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 4C14 12 10 26 11 38c1 12 6 21 14 28'/%3E%3Cpath d='M20.8 10.2c-4.3.5-7.3 2.7-8.8 6.3 4.3-.2 7.1-2.2 8.8-6.3Z'/%3E%3Cpath d='M16.7 19.2c-4.2 1.1-6.8 3.8-7.7 7.6 4.2-.8 6.7-3.2 7.7-7.6Z'/%3E%3Cpath d='M14.2 29c-4 1.8-6.1 4.8-6.2 8.7 4-1.5 6-4.4 6.2-8.7Z'/%3E%3Cpath d='M14.1 39.3c-3.4 2.5-5 5.8-4.4 9.7 3.6-2.2 5-5.4 4.4-9.7Z'/%3E%3Cpath d='M16.5 49.2c-2.7 3.2-3.5 6.7-2.2 10.4 3-2.9 3.7-6.3 2.2-10.4Z'/%3E%3Cpath d='M20.8 57.2c-1.9 3.6-1.9 7.1.2 10.3 2.2-3.3 2.1-6.7-.2-10.3Z'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;
  }
}

/* ==========================================================================
   2026-10-01 実績帯 月桂冠・ゴールド強調
   ========================================================================== */
@media (min-width: 768px) {

  /* 月桂冠をもう一回り大きく、線もやや太く */
  .laurel::before,
  .laurel::after {
    width: 36px;
    height: 70px;
    opacity: 1;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23f4c542' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 4C14 12 10 26 11 38c1 12 6 21 14 28'/%3E%3Cpath d='M20.8 10.2c-4.3.5-7.3 2.7-8.8 6.3 4.3-.2 7.1-2.2 8.8-6.3Z'/%3E%3Cpath d='M16.7 19.2c-4.2 1.1-6.8 3.8-7.7 7.6 4.2-.8 6.7-3.2 7.7-7.6Z'/%3E%3Cpath d='M14.2 29c-4 1.8-6.1 4.8-6.2 8.7 4-1.5 6-4.4 6.2-8.7Z'/%3E%3Cpath d='M14.1 39.3c-3.4 2.5-5 5.8-4.4 9.7 3.6-2.2 5-5.4 4.4-9.7Z'/%3E%3Cpath d='M16.5 49.2c-2.7 3.2-3.5 6.7-2.2 10.4 3-2.9 3.7-6.3 2.2-10.4Z'/%3E%3Cpath d='M20.8 57.2c-1.9 3.6-1.9 7.1.2 10.3 2.2-3.3 2.1-6.7-.2-10.3Z'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;

    filter: drop-shadow(0 0 2px rgba(244,197,66,.28));
  }

  .laurel {
    gap: 10px;
  }

  /* 実績帯のゴールドをデザイン案寄りの明るい色へ統一 */
  .laurel__val,
  .laurel__val strong {
    color: #f4c542;
  }

  /* 数値・キーワードを少し大きく */
  .laurel__val {
    font-size: 26px;
    line-height: 1.15;
  }

  .laurel__val strong {
    font-size: 42px;
  }
}

@media (max-width: 767px) {

  .laurel::before,
  .laurel::after {
    width: 25px;
    height: 52px;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cg fill='none' stroke='%23f4c542' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 4C14 12 10 26 11 38c1 12 6 21 14 28'/%3E%3Cpath d='M20.8 10.2c-4.3.5-7.3 2.7-8.8 6.3 4.3-.2 7.1-2.2 8.8-6.3Z'/%3E%3Cpath d='M16.7 19.2c-4.2 1.1-6.8 3.8-7.7 7.6 4.2-.8 6.7-3.2 7.7-7.6Z'/%3E%3Cpath d='M14.2 29c-4 1.8-6.1 4.8-6.2 8.7 4-1.5 6-4.4 6.2-8.7Z'/%3E%3Cpath d='M14.1 39.3c-3.4 2.5-5 5.8-4.4 9.7 3.6-2.2 5-5.4 4.4-9.7Z'/%3E%3Cpath d='M16.5 49.2c-2.7 3.2-3.5 6.7-2.2 10.4 3-2.9 3.7-6.3 2.2-10.4Z'/%3E%3Cpath d='M20.8 57.2c-1.9 3.6-1.9 7.1.2 10.3 2.2-3.3 2.1-6.7-.2-10.3Z'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  .laurel__val,
  .laurel__val strong {
    color: #f4c542;
  }
}

/* ==========================================================================
   2026-10-01 「動画一覧を見る」ボタン文字色
   ========================================================================== */
.video__body .btn,
.video__body .btn span {
  color: #fff !important;
}

/* ==========================================================================
   2026-10-01 SP MV 完全リセット・再調整
   ========================================================================== */
@media (max-width: 767px) {

  /* PC用に後から追加された2カラム指定を完全解除 */
  .mv {
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%),
      url("../images/top-renewal/mv-bg.jpg") 58% center / cover no-repeat;
  }

  .mv__inner {
    display: block !important;
    width: 100%;
    max-width: none;
    min-height: 0 !important;
    padding: 18px 14px 14px;
  }

  .mv__body {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    z-index: 4;
  }

  /* 見出し：必ず横書きで正常な幅を確保 */
  .mv__catch {
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: normal;

    font-size: 24px;
    line-height: 1.48;
    letter-spacing: 0;
  }

  .mv__catch .big {
    font-size: 31px;
    line-height: 1.25;
  }

  /* PC用brは消し、SP用brだけ有効 */
  .mv__catch .pc-br {
    display: none !important;
  }

  .mv__catch .sp-br {
    display: block !important;
  }

  /* SPではリード文を非表示 */
  .mv__lead {
    display: none !important;
  }

  /* 手書きコピーも横書きに戻す */
  .mv__hand {
    position: static !important;
    display: block;
    width: 100%;
    margin: 8px 0 2px;
    padding: 0;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    text-align: right;

    font-size: 14px;
    line-height: 1.5;
    transform: rotate(-2deg);
    z-index: 5;
  }

  /* 弁護士写真 */
  .mv__photo {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: none !important;
    overflow: visible;
    z-index: 2;
  }

  .mv-lawyers {
    position: relative;
    display: block;
    width: 112%;
    max-width: none !important;
    margin: -2px -6% 0;
    transform: none !important;
  }

  .mv-lawyers img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* 名前ラベル */
  .lawyer-ph__name {
    bottom: 8px;
    width: auto;
    min-width: 104px;
    max-width: none;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.3;
    opacity: .95;
  }

  .lawyer-ph__name small {
    font-size: 8px;
  }

  .lawyer-ph__name--kurahashi {
    left: 12% !important;
    right: auto !important;
  }

  .lawyer-ph__name--kan {
    left: auto !important;
    right: 9% !important;
  }

  /* 相談料・着手金・24時間365日 */
  .mv__points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: 6px;
    margin: 8px 0 0;
    transform: none !important;
    opacity: .94;
  }

  .point {
    min-width: 0;
    min-height: 72px;
    padding: 7px 4px;
    gap: 2px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .point__ico {
    width: 27px;
    height: 27px;
  }

  .point__ico svg {
    width: 16px;
    height: 16px;
  }

  .point__label {
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .point__val {
    font-size: 19px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .point__val small {
    font-size: 10px;
  }

  /* CTA：SPは縦積みのまま整える */
  .mv__cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: none;
    gap: 7px;
    margin: 10px 0 0;
    transform: none !important;
    opacity: .96;
  }

  .mv__cta .btn {
    width: 100%;
    min-height: 58px;
    padding: 8px 14px;
    justify-content: flex-start;
    text-align: left;
    border: 1.5px solid #fff;
    color: #fff !important;
  }

  .mv__cta .btn,
  .mv__cta .btn span {
    color: #fff !important;
  }

  .mv__cta .btn__ico {
    width: 28px;
    height: 28px;
  }

  .mv__cta .btn__label {
    font-size: 10px;
  }

  .mv__cta .btn__main {
    font-size: 20px !important;
  }

  .mv__cta .btn--line,
  .mv__cta .btn--mail {
    font-size: 15px !important;
  }

  .mv__cta .btn__arrow {
    margin-left: auto;
    font-size: 20px;
  }
}

/* ==========================================================================
   2026-10-01 SP MV 見出し改行 / メニュー / 名前サイズ調整
   ========================================================================== */
@media (max-width: 767px) {

  /* MV見出しを指定の3行に固定 */
  .mv__catch .mv-line {
    display: block;
    width: 100%;
    white-space: nowrap;
  }

  .mv__catch .mv-line--1 {
    font-size: 24px;
  }

  .mv__catch .mv-line--2 {
    font-size: 22px;
  }

  .mv__catch .mv-line--3 {
    font-size: 22px;
  }

  .mv__catch .mv-line--2 .big,
  .mv__catch .mv-line--3 .big {
    font-size: 29px;
  }

  /* 弁護士名ラベルを大きく */
  .lawyer-ph__name {
    min-width: 128px;
    padding: 6px 10px;
    font-size: 15px;
    line-height: 1.25;
  }

  .lawyer-ph__name small {
    font-size: 11px;
    margin-bottom: 1px;
  }
}

/* ==========================================================================
   2026-10-01 SP MV 4行見出しへ変更
   ========================================================================== */
@media (max-width: 767px) {

  .mv__catch .mv-line--1 {
    font-size: 24px;
  }

  .mv__catch .mv-line--2,
  .mv__catch .mv-line--3,
  .mv__catch .mv-line--4 {
    font-size: 22px;
  }

  .mv__catch .mv-line--2 .big,
  .mv__catch .mv-line--3 .big,
  .mv__catch .mv-line--4 .big {
    font-size: 29px;
  }
}

/* ==========================================================================
   2026-10-01 MV改行：PC維持 / SPのみ4行
   ========================================================================== */
@media (max-width: 767px) {

  .mv__catch {
    font-size: 22px;
    line-height: 1.48;
  }

  .mv__catch .big {
    font-size: 29px;
  }

  .mv__catch br.sp-only {
    display: block !important;
  }

  .mv__catch br.pc-only {
    display: none !important;
  }
}



/* ==========================================================================
   2026-10-01 SP 実績帯 文字サイズ調整
   ========================================================================== */
@media (max-width: 767px) {

  .laurel__val {
    font-size: 17px;
    white-space: nowrap;
  }

  .laurel__val strong {
    font-size: 24px;
  }
}

/* ==========================================================================
   2026-10-01 SP 実績帯 3項目表示 + メッセージ表示
   ========================================================================== */
@media (max-width: 767px) {

  /* 3項目すべて表示 */
  .achieve__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    align-items: center;
  }

  .achieve__list .laurel {
    display: flex !important;
    min-width: 0;
    justify-content: center;
  }

  /* PC-only指定されていた3つ目もSPで表示 */
  .achieve__list .laurel.pc-only {
    display: flex !important;
  }

  .laurel {
    gap: 2px;
  }

  .laurel::before,
  .laurel::after {
    width: 17px;
    height: 38px;
  }

  .laurel__label {
    font-size: 9px;
    line-height: 1.2;
  }

  .laurel__val {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .laurel__val strong {
    font-size: 19px;
  }

  .laurel__note {
    font-size: 8px;
  }

  /* 下のメッセージもSPで表示 */
  .achieve__msg {
    display: block !important;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
}

/* ==========================================================================
   2026-10-01 SP 実績帯 メッセージ1行 / 下余白調整
   ========================================================================== */
@media (max-width: 767px) {

  .achieve__msg {
    white-space: nowrap;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.3;
  }

  .achieve__inner {
    padding-bottom: 6px;
  }
}

/* ==========================================================================
   2026-10-01 SP 実績帯 改行・下余白 強制調整
   ========================================================================== */
@media (max-width: 767px) {

  /* HTML内の <br> をSPでは無効化して1行表示 */
  .achieve__msg br {
    display: none !important;
  }

  .achieve__msg {
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap !important;
  }

  /* 紺色帯の下余白を強制的に詰める */
  .achieve__inner {
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
  }

  .achieve {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   2026-10-01 SP 実績帯 下余白 10px
   ========================================================================== */
@media (max-width: 767px) {
  .achieve__inner {
    padding-bottom: 10px !important;
  }
}

/* ==========================================================================
   2026-10-01 SP クイックナビ PCと同じ7項目・同背景色
   ========================================================================== */
@media (max-width: 767px) {

  .qnav__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .qnav__list a {
    background: #fdf5ee !important;
    color: var(--c-navy);
    border: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   2026-10-01 SP お悩み / 4つの理由 調整
   ========================================================================== */
@media (max-width: 767px) {

  /* 「お悩み」だけ大きく */
  .worry__box .ttl .em-orange {
    font-size: 30px;
    line-height: 1;
  }

  /* 人物アイコンをアップロード画像へ */
  .worry__fig {
    display: block !important;
  }

  .worry__fig img {
    display: block;
    width: 82px;
    height: auto;
    margin: 0 auto;
  }

  /* 右見出し */
  .reason__box .ttl {
    line-height: 1.45;
  }
}

/* ==========================================================================
   2026-10-01 SP クイックナビ 文字サイズ調整
   ========================================================================== */
@media (max-width: 767px) {
  .qnav__list a {
    font-size: 9px;
  }
}

/* ==========================================================================
   2026-10-01 SP セクション見出し / けがの部位 調整
   ========================================================================== */
@media (max-width: 767px) {

  /* 見出し下の間隔 */
  .compare .ttl,
  .search .ttl,
  .triple .ttl {
    margin-bottom: 16px;
  }

  /* けがの部位から探す：
     項目列を少し狭くし、人体イラストを大きく */
  .parts {
    grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) 108px;
    gap: 6px;
    align-items: start;
  }

  .parts__list li a {
    padding-left: 18px;
    padding-right: 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  .parts__list li a::before {
    left: 4px;
  }

  .parts__fig.sp-only {
    display: block !important;
    width: 108px;
    justify-self: end;
  }

  .parts__fig.sp-only img {
    display: block;
    width: 108px;
    max-width: none;
    height: auto;
    margin: 0 auto;
  }
}

/* ==========================================================================
   2026-10-01 SP 対応エリア「その他 大分県全域」幅調整
   ========================================================================== */
@media (max-width: 767px) {

  .area__list li:last-child {
    grid-column: 1 / -1;
    white-space: nowrap;
  }
}

/* ==========================================================================
   2026-10-01 CTA文字・アイコン白
   ========================================================================== */
.cta .btn,
.cta .btn span,
.cta .btn svg,
.cta .btn use {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* ==========================================================================
   2026-10-01 SP MV 最終調整
   ========================================================================== */
@media (max-width: 767px) {
  .mv__catch {
    font-size: 24px;
    line-height: 1.5;
  }

  .mv__catch .big {
    font-size: 31px;
  }

  .mv__lead {
    display: block !important;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.7;
  }

  .mv__hand {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
  }
}
@media (max-width: 767px) {
  .mv__lead {
    display: block !important;
    margin: 18px 0 0!important;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--c-navy);
  }
}
@media (max-width: 767px) {

  /* 「保険会社と弁護士の違い」テーブルをPCと同じ配色に */
  .compare .cmp-table--sp {
    border: 1px solid #e1e5ea;
  }

  .compare .cmp-table--sp th,
  .compare .cmp-table--sp td {
    border-right: 1px solid #e1e5ea;
    border-bottom: 1px solid #e1e5ea;
  }

  /* ヘッダー */
  .compare .cmp-table--sp thead th,
  .compare .cmp-table--sp thead th:first-child {
    background: #fdf0df;
    color: var(--c-navy);
  }

  .compare .cmp-table--sp thead th.is-our {
    background: #fdf0df;
    color: var(--c-orange);
  }

  /* 左側の項目セル */
  .compare .cmp-table--sp tbody th {
    background: #f5f6f8;
    color: var(--c-navy);
  }

  /* 保険会社側 */
  .compare .cmp-table--sp tbody td {
    background: #fff;
  }

  /* 弁護士側 */
  .compare .cmp-table--sp tbody td.is-our {
    background: #fffaf5;
    color: var(--c-orange);
  }
}
@media (max-width: 767px) {
  .header .logo__office {
    display: block !important;
    font-size: 9px;
    line-height: 1.25;
    color: var(--c-text-sub);
    white-space: nowrap;
  }
}

/* ==========================================================================
   2026-10-01 Responsive breakpoint normalization
   PC向け後追い修正を 768px 以上へ拡張。
   SP切替は 767px 以下のため、768〜1024pxでも最新版PC修正を適用する。
   ========================================================================== */

/* ==========================================================================
   2026-10-01 下部CTA 中間幅レスポンシブ修正
   1280px前後で右側が切れないよう固定幅を解除
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1399px) {
  .cta__inner {
    width: 100%;
    max-width: 1380px;
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }

  .cta__txt {
    flex: 1 1 410px;
    min-width: 0;
    font-size: clamp(20px, 1.9vw, 24px);
    white-space: normal;
  }

  .cta__btns {
    flex: 1 1 560px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .cta__btns .btn {
    width: auto;
    min-width: 0;
    padding: 12px 10px;
    gap: 8px;
  }

  .cta__btns .btn__ico {
    width: 32px;
    height: 32px;
  }

  .cta__btns .btn__label {
    font-size: 12px;
  }

  .cta__btns .btn__main {
    font-size: 18px !important;
  }

  .cta__btns .btn--line .btn__main,
  .cta__btns .btn--mail .btn__main {
    font-size: 15px !important;
  }

  .cta__btns .btn__note {
    font-size: 10px;
  }
}

/* 1000px前後では横並びに無理をさせず、PCデザインのまま上下配置 */
@media (min-width: 768px) and (max-width: 1040px) {
  .cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .cta__txt {
    flex: none;
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .cta__btns {
    flex: none;
    width: 100%;
  }
}
@media (max-width: 767px) {

  /* MVの弁護士画像以降をまとめて25px上へ */
  .mv__photo,
  .mv__points,
  .mv__cta {
    position: relative;
    top: -30px;
  }

  /* 上げた分、MV下部の余白も詰める */
  .mv__inner {
    padding-bottom: 0 !important;
  }
}
/* ==========================================================================
   実績帯：中間幅での横スクロール防止
   ========================================================================== */

/* 901px〜1100px：4列のまま少しコンパクトに */
@media (min-width: 901px) and (max-width: 1100px) {

  .achieve__inner {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(190px, .95fr);
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .achieve__inner > *,
  .achieve__list .laurel,
  .laurel,
  .laurel__body {
    min-width: 0;
  }

  .laurel {
    gap: 5px;
  }

  .laurel::before,
  .laurel::after {
    width: 25px;
    height: 54px;
  }

  .laurel__label {
    font-size: 12px;
  }

  .laurel__val {
    font-size: 19px;
    white-space: nowrap;
  }

  .laurel__val strong {
    font-size: 32px;
  }

  .laurel__note {
    font-size: 9px;
  }

  .achieve__msg {
    min-width: 0;
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
  }
}


/* 768px〜900px：
   実績3項目を上段、右のメッセージを下段へ */
@media (min-width: 768px) and (max-width: 900px) {

  .achieve__inner {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 6px;
    padding: 14px 12px;
  }

  .achieve__inner > *,
  .achieve__list .laurel,
  .laurel,
  .laurel__body {
    min-width: 0;
  }

  .laurel {
    gap: 4px;
  }

  .laurel::before,
  .laurel::after {
    width: 22px;
    height: 48px;
  }

  .laurel__label {
    font-size: 11px;
  }

  .laurel__val {
    font-size: 17px;
    white-space: nowrap;
  }

  .laurel__val strong {
    font-size: 28px;
  }

  .laurel__note {
    font-size: 9px;
  }

  .achieve__msg {
    grid-column: 1 / -1;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
}
/* ==========================================================================
   MV：1130px以下の中間幅調整
   ========================================================================== */

/* 960px〜1130px */
@media (min-width: 960px) and (max-width: 1130px) {

  .mv__inner {
    grid-template-columns: minmax(0, 1fr) 520px !important;
    column-gap: 0 !important;
  }

  /* 弁護士写真はあまり縮めない */
  .mv-lawyers {
    width: 570px !important;
    max-width: none !important;
    margin-right: -20px;
  }

  /* 名前は画像幅に合わせて移動 */
  .lawyer-ph__name {
    min-width: 132px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .lawyer-ph__name small {
    font-size: 9px;
  }

  .lawyer-ph__name--kurahashi {
    left: 23% !important;
    right: auto !important;
  }

  .lawyer-ph__name--kan {
    right: 13% !important;
    left: auto !important;
  }

  /* 3つのポイントを先に縮める */
  .mv__points {
    max-width: 430px !important;
    gap: 5px !important;
  }

  .point {
    min-width: 0;
    min-height: 64px !important;
    padding: 6px 6px !important;
    gap: 5px;
  }

  .point__ico {
    width: 27px !important;
    height: 27px !important;
  }

  .point__ico svg {
    width: 16px;
    height: 16px;
  }

  .point__label {
    font-size: 9px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .point__val {
    font-size: 17px !important;
    line-height: 1.15;
    white-space: nowrap;
  }

  .point__val small {
    font-size: 10px !important;
  }

  /* 一人で悩まず〜 */
  .mv__hand {
    right: 38px !important;
    top: 20px !important;
    font-size: 14px !important;
  }
}


/* 768px〜959px */
@media (min-width: 768px) and (max-width: 959px) {

  .mv__inner {
    grid-template-columns: minmax(0, 1fr) 455px !important;
    column-gap: 0 !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 写真の最低サイズを確保 */
  .mv-lawyers {
    width: 510px !important;
    max-width: none !important;
    margin-right: -35px;
  }

  .lawyer-ph__name {
    bottom: 16px;
    min-width: 116px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .lawyer-ph__name small {
    font-size: 8px;
  }

  .lawyer-ph__name--kurahashi {
    left: 23% !important;
    right: auto !important;
  }

  .lawyer-ph__name--kan {
    right: 12% !important;
    left: auto !important;
  }

  /* 左側をコンパクトに */
  .mv__catch {
    font-size: 23px !important;
    line-height: 1.4;
  }

  .mv__catch .big {
    font-size: 34px !important;
  }

  .mv__lead {
    font-size: 12px !important;
    line-height: 1.6;
  }

  /* 3ポイントはかなりコンパクトに */
  .mv__points {
    max-width: 345px !important;
    gap: 4px !important;
  }

  .point {
    min-width: 0;
    min-height: 58px !important;
    padding: 5px 3px !important;
    gap: 2px;
  }

  .point__ico {
    width: 23px !important;
    height: 23px !important;
  }

  .point__ico svg {
    width: 14px;
    height: 14px;
  }

  .point__label {
    font-size: 8px !important;
    line-height: 1.15;
    white-space: nowrap;
  }

  .point__val {
    font-size: 14px !important;
    line-height: 1.1;
    white-space: nowrap;
  }

  .point__val small {
    font-size: 8px !important;
  }

  /* 一人で悩まず〜も幅に合わせて内側へ */
  .mv__hand {
    right: 18px !important;
    top: 18px !important;
    font-size: 12px !important;
    line-height: 1.45;
  }
}
@media (min-width: 768px) and (max-width: 1114px) {

  /* 写真エリア自体を右端基準に戻す */
  .mv__photo {
    transform: none !important;
    right: 0 !important;
    justify-content: flex-end !important;
  }

  /* 1114pxから768pxに向かって徐々に縮小 */
  .mv-lawyers {
    width: clamp(460px, 50vw, 557px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* 右側の名前を右端0へ */
  .lawyer-ph__name--kan {
    left: auto !important;
    right: 0 !important;
  }

  /* 左側の名前も写真幅に追従 */
  .lawyer-ph__name--kurahashi {
    left: 20% !important;
    right: auto !important;
  }
}
@media (min-width: 768px) and (max-width: 1110px) {

  /* 「このようなお悩みはありませんか？」
     「選ばれる4つの理由」 */
  .worry .grid-2--wide {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 「代表弁護士からのメッセージ」
     「弁護士紹介」 */
  .message > .container.grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media screen and (max-width: 767px) {
  .message .profile--message {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   2026-10-10 PC 選ばれる13の理由：横幅・折り返し・縦余白を調整
   ※ お悩み／理由セクションのみ。SPは変更しない。
   ========================================================================== */
@media (min-width: 1111px) {
  /* 左45%：右55%（1110px以下は従来の縦積みを維持） */
  .worry .grid-2--wide {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  /* 左カラムを縮めても、矢印・メッセージが圧迫しないように */
  .worry__box {
    grid-template-columns: minmax(0, 1.3fr) 38px minmax(125px, .72fr);
    column-gap: 10px;
    padding-left: 18px;
    padding-right: 14px;
  }

  .worry__arrow {
    border-left-width: 25px;
    border-top-width: 30px;
    border-bottom-width: 30px;
  }

  .worry__answer { font-size: 24px; }
}

@media (min-width: 768px) {
  /* 写真幅を控えめにし、5項目の文章領域を確保 */
  .reason__box {
    grid-template-columns: minmax(0, 1fr) 130px;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 8px;
    padding-left: 18px;
  }

  .reason__box .ttl {
    grid-column: 1;
    grid-row: 1;
  }

  .reason__box .num-list {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .reason__box .num-list li {
    font-size: 15px;
    line-height: 1.4;
    gap: 8px;
    margin-bottom: 7px;
  }

  .reason__box .num-list .num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .reason__box .reason__more {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin: 0;
  }

  .reason__box .reason__more .btn {
    font-size: 13px;
    padding: 9px 14px;
  }

  .reason__box .reason__ph {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 130px;
  }
}
/* 2026-10-10 選ばれる13の理由 左右幅の再調整 */
@media (min-width: 1111px) {
  .worry .grid-2--wide {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  }
}

@media (min-width: 768px) {
  .reason__box {
    grid-template-columns: minmax(0, 1fr) 105px;
    column-gap: 10px;
  }

  .reason__box .reason__ph {
    width: 105px;
  }
}
/* 選ばれる13の理由：PC写真幅調整 */
@media (min-width: 1111px) {
  .reason__box {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .reason__box .reason__ph {
    width: 180px;
  }
}
/* 選ばれる13の理由：詳細ボタンを写真下部に配置 */
@media (min-width: 1111px) {

  .reason__box {
    position: relative;
    grid-template-rows: auto 1fr;
  }

  .reason__box .reason__ph {
    grid-row: 1 / 3;
  }

  .reason__box .reason__more {
    position: absolute;
    right: 6px;
    bottom: 14px;
    z-index: 2;
    width: 128px;
    margin: 0;
  }

  .reason__box .reason__more .btn {
    display: block;
    width: 100%;
    padding: 9px 5px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-navy);
    border: 1px solid var(--c-blue);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
  }

  .reason__box .reason__more .btn span,
  .reason__box .reason__more .btn::after {
    display: none;
  }
}
/* 選ばれる13の理由：写真上のボタン調整 */
@media (min-width: 1111px) {

  .reason__box .reason__more {
    width: 160px;
    right: 6px;
    bottom: 14px;
  }

  .reason__box .reason__more .btn {
    width: 100%;
    padding: 12px 6px;
    background: #f0801c;
    color: #fff !important;
    border: 1px solid #f0801c;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  }

  .reason__box .reason__more .btn:hover {
    background: #d96e10;
    border-color: #d96e10;
  }
}
/* 選ばれる13の理由：SPボタンの色を統一 */
@media (max-width: 767px) {
  .reason__box .reason__more .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0801c;
    color: #fff !important;
    border: 1px solid #f0801c;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 20px;
    text-align: center;
  }

  .reason__box .reason__more .btn:hover {
    background: #d96e10;
    border-color: #d96e10;
  }
}