@charset "UTF-8";
/* =============================================================
   株式会社ドリームキャッチF  -  style.css
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
------------------------------------------------------------- */
:root {
  --ink: #0c1a26;
  --ink-2: #24394a;
  --ink-3: #5b7080;
  --sea: #0b7f8c;
  --sea-deep: #06616c;
  --sea-pale: #e5f2f3;
  --sand: #f7f4ef;
  --paper: #ffffff;
  --line: rgba(12, 26, 38, .12);
  --line-light: rgba(255, 255, 255, .22);
  --alert: #b8452f;

  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --f-min: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en: "Cormorant Garamond", "Zen Old Mincho", serif;

  --inner: 1160px;
  --gutter: 24px;
  --header-h: 92px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------
   2. Reset / Base
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: .04em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dt, dd, figure, address { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: color .3s var(--ease), opacity .3s var(--ease); }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; fill: currentColor; }

::selection { background: var(--sea); color: #fff; }

/* -------------------------------------------------------------
   3. Layout helpers
------------------------------------------------------------- */
.l-inner {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section { padding-block: clamp(72px, 9vw, 130px); }

.u-pc { display: inline; }
.u-sp { display: none; }

@media (max-width: 767px) {
  .u-pc { display: none; }
  .u-sp { display: inline; }
}

/* -------------------------------------------------------------
   4. Common components
------------------------------------------------------------- */
.c-label {
  display: block;
  margin-bottom: .5em;
  font-family: var(--f-en);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sea);
}
.c-label--light { color: rgba(255, 255, 255, .82); }

.c-ttl {
  font-family: var(--f-min);
  font-size: clamp(24px, 3.1vw, 40px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .06em;
}
.c-ttl--light { color: #fff; }

.c-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 66px); }
.c-head__lead {
  margin-top: 1.4em;
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-3);
}
.c-head__lead b { color: var(--ink); font-weight: 700; }
.c-head--light .c-head__lead { color: rgba(255, 255, 255, .8); }
.c-head--light .c-head__lead b { color: #fff; }

/* --- Button --- */
.c-btn {
  --btn-c: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  min-height: 56px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--btn-c);
  border: 1px solid currentColor;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sea);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease);
  z-index: -1;
}
.c-btn > * { position: relative; }
.c-btn:hover { color: #fff; border-color: var(--sea); }
.c-btn:hover::before { transform: scaleX(1); transform-origin: left center; }

.c-btn__arrow {
  position: relative;
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
  transition: width .4s var(--ease);
}
.c-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.c-btn:hover .c-btn__arrow { width: 36px; }

.c-btn--sm { min-height: 44px; padding: 0 22px; font-size: 13px; gap: 0; }
.c-btn--lg { min-height: 68px; padding: 0 42px; font-size: 15px; }

.c-btn--fill { color: #fff; background: var(--sea); border-color: var(--sea); }
.c-btn--fill::before { background: var(--ink); }
.c-btn--fill:hover { color: #fff; border-color: var(--ink); }

.c-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.c-btn--ghost::before { background: #fff; }
.c-btn--ghost:hover { color: var(--ink); border-color: #fff; }

.c-btn--line { margin-top: 2.2em; }

/* --- SNS --- */
.c-sns { display: flex; gap: 10px; }
.c-sns a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.c-sns svg { width: 19px; height: 19px; }
.c-sns a:hover { background: var(--sea); border-color: var(--sea); color: #fff; }
.c-sns--light a { border-color: var(--line-light); color: rgba(255, 255, 255, .78); }
.c-sns--light a:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* --- Reveal on scroll --- */
.js .js-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .js-reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------
   5. Header
------------------------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.l-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  height: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 46px);
}

.l-header__logo { flex: none; line-height: 0; }
.l-header__logo img {
  width: auto;
  height: 42px;
  padding: 5px 11px;
  background: #fff;
  border-radius: 3px;
  transition: height .4s var(--ease);
}

/* overlay (トップページ) */
.l-header--overlay {
  background: transparent;
  border-color: transparent;
}
.l-header--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 16, 24, .55), rgba(6, 16, 24, 0));
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.l-header--overlay .l-gnav__ja,
.l-header--overlay .l-header__tel { color: #fff; }
.l-header--overlay .l-gnav__en { color: rgba(255, 255, 255, .6); }
.l-header--overlay .c-btn { color: #fff; border-color: rgba(255, 255, 255, .6); }
.l-header--overlay .c-btn::before { background: #fff; }
.l-header--overlay .c-btn:hover { color: var(--ink); border-color: #fff; }

/* scrolled */
.l-header.is-scrolled {
  height: 74px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 30px rgba(12, 26, 38, .07);
}
.l-header.is-scrolled::before { opacity: 0; }
.l-header.is-scrolled .l-header__logo img { height: 36px; }
.l-header.is-scrolled .l-gnav__ja { color: var(--ink); }
.l-header.is-scrolled .l-gnav__en { color: var(--ink-3); }
.l-header.is-scrolled .l-header__tel { color: var(--ink); }
.l-header.is-scrolled .c-btn { color: var(--ink); border-color: var(--line); }
.l-header.is-scrolled .c-btn::before { background: var(--sea); }
.l-header.is-scrolled .c-btn:hover { color: #fff; border-color: var(--sea); }

/* --- Global nav --- */
.l-gnav { margin-left: auto; }
.l-gnav__list { display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 30px); }
.l-gnav__item > a {
  display: block;
  padding-block: 4px;
  text-align: center;
}
.l-gnav__ja {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.l-gnav__en {
  display: block;
  margin-top: 3px;
  font-family: var(--f-en);
  font-size: 10.5px;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.l-gnav__item > a { position: relative; }
.l-gnav__item > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--sea);
  transform: translateX(-50%);
  transition: width .4s var(--ease);
}
.l-gnav__item > a:hover::after,
.l-gnav__item.is-current > a::after { width: 100%; }
.l-gnav__item > a:hover .l-gnav__ja { color: var(--sea); }

/* --- Header side --- */
.l-header__side {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: clamp(12px, 1.6vw, 26px);
  border-left: 1px solid var(--line);
}
.l-header--overlay .l-header__side { border-left-color: rgba(255, 255, 255, .28); }
.l-header__tel { display: block; line-height: 1.3; }
.l-header__tel-num {
  display: block;
  font-family: var(--f-en);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
}
.l-header__tel-sub {
  display: block;
  font-size: 10.5px;
  letter-spacing: .02em;
  opacity: .72;
  white-space: nowrap;
}

/* --- Burger --- */
.l-burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: auto;
  flex: none;
}
.l-burger span {
  position: absolute;
  left: 11px;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.l-burger span:nth-child(1) { top: 16px; }
.l-burger span:nth-child(2) { top: 22.5px; }
.l-burger span:nth-child(3) { top: 29px; }
.l-header--overlay .l-burger span { background: #fff; }
.l-header.is-scrolled .l-burger span { background: var(--ink); }
.l-burger.is-open span { background: var(--ink); }
.l-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(38deg); }
.l-burger.is-open span:nth-child(2) { opacity: 0; }
.l-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-38deg); }

/* --- Drawer --- */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: min(400px, 86vw);
  height: 100dvh;
  padding: calc(var(--header-h) + 12px) 34px 40px;
  background: var(--paper);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility .55s var(--ease);
}
.l-drawer.is-open { transform: none; visibility: visible; }
.l-drawer__list li + li { border-top: 1px solid var(--line); }
.l-drawer__list a { display: block; padding: 17px 0; }
.l-drawer__ja { display: block; font-size: 15px; font-weight: 500; }
.l-drawer__en {
  display: block;
  margin-top: 2px;
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--sea);
}
.l-drawer__foot { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.l-drawer__tel {
  display: block;
  font-family: var(--f-en);
  font-size: 28px;
  letter-spacing: .04em;
  line-height: 1.2;
}
.l-drawer__hours { margin-bottom: 18px; font-size: 12px; color: var(--ink-3); }

.l-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(8, 18, 26, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.l-overlay.is-open { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

/* -------------------------------------------------------------
   6. Hero
------------------------------------------------------------- */
.p-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 40px) 120px;
  overflow: hidden;
  color: #fff;
}
.p-hero__media { position: absolute; inset: 0; }
.p-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroKen 21s infinite;
}
.p-hero__slide:nth-child(1) { animation-delay: 0s; }
.p-hero__slide:nth-child(2) { animation-delay: 7s; }
.p-hero__slide:nth-child(3) { animation-delay: 14s; }

@keyframes heroKen {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1; }
  33%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.16); }
}

.p-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 20, 30, .72) 0%, rgba(6, 20, 30, .42) 46%, rgba(6, 20, 30, .12) 100%),
    linear-gradient(to top, rgba(6, 20, 30, .5), rgba(6, 20, 30, 0) 45%);
}
.p-hero__inner { position: relative; z-index: 2; }

.p-hero__en {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  font-family: var(--f-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .32em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.p-hero__line {
  display: block;
  width: clamp(40px, 7vw, 92px);
  height: 1px;
  background: rgba(255, 255, 255, .5);
  transform-origin: left;
  animation: lineIn 1.2s var(--ease) .5s both;
}
@keyframes lineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.p-hero__ttl {
  font-family: var(--f-min);
  font-size: clamp(34px, 6.4vw, 78px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: .045em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .3);
}
.p-hero__ttl > span {
  display: block;
  animation: heroUp 1.1s var(--ease) both;
}
.p-hero__ttl > span:nth-child(1) { animation-delay: .15s; }
.p-hero__ttl > span:nth-child(2) { animation-delay: .32s; }
@keyframes heroUp {
  from { opacity: 0; transform: translateY(120%); }
  to   { opacity: 1; transform: none; }
}

.p-hero__lead {
  max-width: 40em;
  margin-top: 1.7em;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 2.15;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
  animation: heroFadeUp 1.2s var(--ease) .6s both;
}
.p-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.6em;
  animation: heroFadeUp 1.2s var(--ease) .8s both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.p-hero__scroll {
  position: absolute;
  right: clamp(20px, 3.4vw, 52px);
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.p-hero__scroll span {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, .8);
}
.p-hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 88px;
  background: rgba(255, 255, 255, .3);
}
.p-hero__scroll::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -.5px;
  width: 1px;
  height: 88px;
  background: #fff;
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* -------------------------------------------------------------
   7. News
------------------------------------------------------------- */
.p-news { background: var(--paper); }
.p-news__wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.p-news__ttl {
  font-family: var(--f-min);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: .08em;
}
.p-news__list { border-top: 1px solid var(--line); }
.p-news__item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 4px 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.p-news__item dt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  line-height: 1.6;
}
.p-news__item time {
  font-family: var(--f-en);
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.p-news__cat {
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--sea);
  border: 1px solid var(--sea);
  border-radius: 999px;
  white-space: nowrap;
}
.p-news__cat--alert { color: var(--alert); border-color: var(--alert); }
.p-news__item dd { margin: 0; }

.p-news__item summary {
  position: relative;
  padding-right: 34px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.75;
  cursor: pointer;
  list-style: none;
  transition: color .3s var(--ease);
}
.p-news__item summary::-webkit-details-marker { display: none; }
.p-news__item summary:hover { color: var(--sea); }
.p-news__item summary::after,
.p-news__item summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--sea);
  transition: transform .35s var(--ease);
}
.p-news__item summary::before { transform: rotate(90deg); }
.p-news__item details[open] summary::before { transform: rotate(0); }

.p-news__detail {
  margin-top: 14px;
  padding: 22px 26px;
  font-size: 14px;
  line-height: 2.05;
  color: var(--ink-2);
  background: var(--sand);
  border-radius: 4px;
  animation: detailIn .45s var(--ease) both;
}
@keyframes detailIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.p-news__detail p + p { margin-top: 1em; }
.p-news__detail a { color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
.p-news__period {
  padding: 14px 18px;
  background: #fff;
  border-left: 3px solid var(--sea);
  line-height: 1.9;
}

/* -------------------------------------------------------------
   8. Concept
------------------------------------------------------------- */
.p-concept { position: relative; overflow: hidden; background: var(--sand); }
.p-concept__watermark {
  position: absolute;
  top: clamp(10px, 3vw, 40px);
  right: -.1em;
  font-family: var(--f-en);
  font-size: clamp(90px, 16vw, 230px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(11, 127, 140, .06);
  pointer-events: none;
  user-select: none;
}
.p-concept__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.p-concept__figure { position: relative; }
.p-concept__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 70px -30px rgba(12, 26, 38, .38);
}
.p-concept__accent {
  position: absolute;
  left: -18px;
  bottom: -18px;
  z-index: 0;
  width: 46%;
  height: 46%;
  border: 1px solid var(--sea);
  border-radius: 2px;
}
.p-concept__txt {
  margin-top: 1.6em;
  font-size: 15px;
  line-height: 2.15;
  color: var(--ink-2);
}
.p-concept__txt b {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(11, 127, 140, .18) 62%);
}
.p-concept__body .c-ttl { margin-top: .3em; }

/* -------------------------------------------------------------
   9. Service
------------------------------------------------------------- */
.p-service { background: var(--paper); }
.p-service__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.p-service__item {
  position: relative;
  padding: clamp(30px, 3.2vw, 46px) clamp(22px, 2.2vw, 32px) clamp(34px, 3.6vw, 50px);
  background: var(--paper);
  transition: background .45s var(--ease);
}
.p-service__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--sea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.p-service__item:hover { background: var(--sea-pale); }
.p-service__item:hover::after { transform: scaleX(1); }

.p-service__num {
  display: block;
  font-family: var(--f-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--sea);
}
.p-service__icon {
  display: block;
  margin: 22px 0 20px;
  color: var(--ink);
  opacity: .85;
}
.p-service__icon svg { width: 40px; height: 40px; }
.p-service__ttl {
  font-family: var(--f-min);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.p-service__txt {
  margin-top: .9em;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink-3);
}

/* -------------------------------------------------------------
   10. 空き家管理サポート
------------------------------------------------------------- */
.p-kanri {
  position: relative;
  background: var(--ink);
  color: #fff;
}
.p-kanri::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(11, 127, 140, .38), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(11, 127, 140, .22), transparent 65%);
  pointer-events: none;
}
.p-kanri > .l-inner { position: relative; }

.p-kanri__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.p-kanri__fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}
.p-kanri__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.p-kanri__item:hover .p-kanri__fig img { transform: scale(1.07); }
.p-kanri__num {
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 52px;
  padding: 6px 12px;
  font-family: var(--f-en);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: var(--sea);
}
.p-kanri__ttl {
  margin-top: 1.1em;
  font-family: var(--f-min);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: .05em;
}
.p-kanri__txt {
  margin-top: .55em;
  font-size: 13px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .68);
}

.p-kanri__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(48px, 6vw, 80px);
}
.p-kanri__plan {
  padding: 30px 26px 26px;
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.p-kanri__plan:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); transform: translateY(-4px); }
.p-kanri__plan--premium { border-color: rgba(255, 255, 255, .34); background: rgba(11, 127, 140, .22); }
.p-kanri__plan-freq {
  display: inline-block;
  padding: 3px 16px;
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1.8;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
}
.p-kanri__plan-name {
  margin-top: 14px;
  font-family: var(--f-min);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .06em;
}
.p-kanri__plan-price {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.3;
}
.p-kanri__plan-price .num {
  font-family: var(--f-en);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: .01em;
  margin-right: .08em;
}
.p-kanri__plan-price small { font-size: 11px; opacity: .7; }
.p-kanri__note {
  margin-top: 20px;
  font-size: 12.5px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
}
.p-kanri__btn { margin-top: clamp(36px, 4vw, 54px); text-align: center; }

/* -------------------------------------------------------------
   11. Contents
------------------------------------------------------------- */
.p-contents { background: var(--sand); }
.p-contents__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.p-contents__item { grid-column: span 2; }
.p-contents__item--wide,
.p-contents__list > .p-contents__item:nth-child(2) { grid-column: span 3; }

.p-contents__item a {
  position: relative;
  display: block;
  height: 100%;
  min-height: 210px;
  overflow: hidden;
  border-radius: 3px;
  color: #fff;
  isolation: isolate;
}
.p-contents__item--wide a,
.p-contents__list > .p-contents__item:nth-child(2) a { min-height: 268px; }

.p-contents__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  transition: transform .9s var(--ease);
  z-index: -2;
}
.p-contents__item a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 20, 30, .82) 0%, rgba(6, 20, 30, .34) 55%, rgba(6, 20, 30, .16) 100%);
  transition: background .5s var(--ease);
  z-index: -1;
}
.p-contents__item a:hover .p-contents__img { transform: scale(1.09); }
.p-contents__item a:hover::before { background: linear-gradient(to top, rgba(4, 62, 68, .88) 0%, rgba(6, 20, 30, .45) 60%, rgba(6, 20, 30, .22) 100%); }

.p-contents__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 26px clamp(20px, 2.2vw, 32px);
}
.p-contents__en {
  display: block;
  font-family: var(--f-en);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.p-contents__ja {
  display: block;
  margin-top: 9px;
  font-family: var(--f-min);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
}
.p-contents__arrow {
  position: absolute;
  right: clamp(20px, 2.2vw, 32px);
  bottom: 30px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.p-contents__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(-65%, -50%) rotate(45deg);
}
.p-contents__item a:hover .p-contents__arrow { background: var(--sea); border-color: var(--sea); }

/* -------------------------------------------------------------
   12. Contact
------------------------------------------------------------- */
.p-contact {
  position: relative;
  padding-block: clamp(78px, 9vw, 130px);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.p-contact__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
}
.p-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 20, 30, .82), rgba(4, 52, 58, .86));
}
.p-contact__inner { position: relative; z-index: 2; }
.p-contact__lead {
  margin-top: 1.6em;
  font-size: 15px;
  line-height: 2.1;
  color: rgba(255, 255, 255, .82);
}
.p-contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3.4vw, 54px);
  margin-top: clamp(34px, 4vw, 54px);
}
.p-contact__tel { display: block; line-height: 1.4; }
.p-contact__tel-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .68);
}
.p-contact__tel-num {
  display: block;
  margin-top: 6px;
  font-family: var(--f-en);
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.1;
  transition: color .3s var(--ease);
}
.p-contact__tel:hover .p-contact__tel-num { color: #7fdbe3; }
.p-contact__tel-sub {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .68);
}

/* -------------------------------------------------------------
   13. Footer
------------------------------------------------------------- */
.l-footer { padding-top: clamp(52px, 6vw, 84px); background: var(--ink); color: rgba(255, 255, 255, .8); }
.l-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 66px);
}
.l-footer__logo { line-height: 0; }
.l-footer__logo img {
  width: auto;
  height: 44px;
  padding: 7px 12px;
  background: #fff;
  border-radius: 3px;
}
.l-footer__address {
  margin: 22px 0 20px;
  font-size: 13px;
  line-height: 2.1;
  color: rgba(255, 255, 255, .7);
}
.l-footer__address a:hover { color: #fff; }
.l-footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px clamp(30px, 4vw, 64px); }
.l-footer__nav a {
  position: relative;
  font-size: 13.5px;
  line-height: 2.3;
  color: rgba(255, 255, 255, .78);
}
.l-footer__nav a::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--sea);
  transition: width .35s var(--ease);
}
.l-footer__nav a:hover { color: #fff; }
.l-footer__nav a:hover::before { width: 20px; }

.l-footer__bottom {
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.l-footer__bottom small {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}

/* --- Page top --- */
.c-pagetop {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: var(--sea);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), visibility .4s var(--ease), transform .4s var(--ease), background .3s var(--ease);
}
.c-pagetop.is-visible { opacity: 1; visibility: visible; transform: none; }
.c-pagetop:hover { background: var(--ink-2); }
.c-pagetop svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------
   14. Responsive
------------------------------------------------------------- */
@media (max-width: 1259px) {
  .l-gnav, .l-header__side { display: none; }
  .l-burger { display: block; }
}

@media (max-width: 1023px) {
  :root { --header-h: 74px; }

  .p-service__list { grid-template-columns: repeat(2, 1fr); }
  .p-kanri__list { grid-template-columns: repeat(3, 1fr); }
  .p-contents__list { grid-template-columns: repeat(2, 1fr); }
  .p-contents__item,
  .p-contents__item--wide,
  .p-contents__list > .p-contents__item:nth-child(2) { grid-column: span 1; }
  .p-contents__item--wide a,
  .p-contents__list > .p-contents__item:nth-child(2) a { min-height: 210px; }
  .p-contents__list > .p-contents__item:nth-child(5) { grid-column: span 2; }

  .p-concept__inner { grid-template-columns: 1fr; }
  .p-concept__figure { max-width: 620px; }

  .l-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  :root { --gutter: 20px; }

  .p-hero { min-height: 88svh; padding-bottom: 92px; }
  .p-hero__scroll { right: 14px; }
  .p-hero__scroll::after, .p-hero__scroll::before { height: 60px; }
  .p-hero__btns .c-btn { flex: 1 1 auto; justify-content: center; }

  .p-news__wrap { grid-template-columns: 1fr; }
  .p-news__item { grid-template-columns: 1fr; gap: 10px; }
  .p-news__item dt { padding-top: 0; }
  .p-news__detail { padding: 18px 18px; }

  .l-header__logo img { height: 34px; padding: 4px 8px; }
  .l-header.is-scrolled .l-header__logo img { height: 31px; }

  .p-service__list { grid-template-columns: 1fr; }
  .p-kanri__list { grid-template-columns: repeat(2, 1fr); }
  .p-kanri__plans { grid-template-columns: 1fr; }

  .p-contents__list { grid-template-columns: 1fr; }
  .p-contents__list > .p-contents__item:nth-child(5) { grid-column: span 1; }

  .p-contact__actions { flex-direction: column; gap: 26px; }
  .p-contact__actions .c-btn { width: 100%; justify-content: center; }

  .l-footer__nav { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 359px) {
  .p-kanri__list { grid-template-columns: 1fr; }
  .l-header__logo img { height: 30px; }
}

/* =============================================================
   16. 下層ページ共通
   ============================================================= */
body.is-sub { padding-top: var(--header-h); }

/* --- ページタイトル帯 --- */
.p-pagehead {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(200px, 26vw, 320px);
  padding-block: 48px;
  overflow: hidden;
  color: #fff;
}
.p-pagehead__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: pageheadIn 1.6s var(--ease) both;
}
@keyframes pageheadIn { from { transform: scale(1.08); } to { transform: none; } }
.p-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 20, 30, .78) 0%, rgba(6, 20, 30, .5) 60%, rgba(6, 20, 30, .3) 100%);
}
.p-pagehead__inner { position: relative; z-index: 2; }
.p-pagehead__en {
  font-family: var(--f-en);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: .32em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.p-pagehead__ttl {
  margin-top: .7em;
  font-family: var(--f-min);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}
.p-pagehead__lead {
  max-width: 46em;
  margin-top: 1.1em;
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, .85);
}

/* --- パンくず --- */
.c-breadcrumb { border-bottom: 1px solid var(--line); background: #fff; }
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  padding-block: 14px;
  font-size: 12px;
  color: var(--ink-3);
}
.c-breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-top: 1px solid var(--ink-3);
  border-right: 1px solid var(--ink-3);
  transform: rotate(45deg);
  vertical-align: middle;
}
.c-breadcrumb a:hover { color: var(--sea); }

/* --- 見出し（下層用） --- */
.c-sec-ttl {
  position: relative;
  margin-bottom: clamp(28px, 3.4vw, 46px);
  padding-left: 22px;
  font-family: var(--f-min);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
}
.c-sec-ttl::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 3px;
  background: var(--sea);
}
.c-sec-ttl .en {
  display: block;
  margin-bottom: .4em;
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sea);
}

.c-sub-ttl {
  margin-bottom: 1em;
  font-family: var(--f-min);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* --- 本文 --- */
.c-txt { font-size: 15px; line-height: 2.15; color: var(--ink-2); }
.c-txt + .c-txt { margin-top: 1.4em; }
.c-txt--center { text-align: center; }
.c-txt--lg { font-size: clamp(16px, 1.6vw, 19px); line-height: 2; }

.u-red { color: var(--alert); font-weight: 700; }
.u-marker { font-weight: 700; background: linear-gradient(transparent 62%, rgba(11, 127, 140, .2) 62%); }

.c-note {
  margin-top: 1.6em;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-3);
  background: var(--sand);
  border-radius: 4px;
}

/* --- パネル --- */
.c-panel {
  padding: clamp(24px, 3.4vw, 46px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.c-panel--sand { background: var(--sand); border-color: transparent; }

/* --- リスト --- */
.c-list-check { display: grid; gap: 12px; }
.c-list-check > li {
  position: relative;
  padding: 14px 18px 14px 52px;
  font-size: 15px;
  line-height: 1.9;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.c-list-check > li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--sea);
  border-bottom: 2px solid var(--sea);
  transform: rotate(-45deg);
}

.c-list-dot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.c-list-dot > li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.9;
}
.c-list-dot > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .82em;
  width: 7px;
  height: 7px;
  background: var(--sea);
  border-radius: 50%;
}

.c-list-num { counter-reset: num; display: grid; gap: 14px; }
.c-list-num > li {
  counter-increment: num;
  position: relative;
  padding: 18px 22px 18px 68px;
  font-family: var(--f-min);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  letter-spacing: .04em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.c-list-num > li:hover { border-color: var(--sea); transform: translateX(4px); }
.c-list-num > li::before {
  content: "0" counter(num);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-en);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--sea);
}

/* --- テーブル --- */
.c-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.9; }
.c-table th,
.c-table td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid var(--line);
}
.c-table thead th,
.c-table th.head {
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.c-table tbody th {
  width: 30%;
  font-weight: 500;
  background: var(--sand);
}
.c-table td.area {
  width: 22%;
  font-weight: 500;
  text-align: center;
  background: var(--sea-pale);
  color: var(--sea-deep);
}
.c-table tbody tr:hover td { background: rgba(11, 127, 140, .04); }
.c-table tbody tr:hover td.area { background: var(--sea-pale); }

.c-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c-table-wrap > .c-table { min-width: 560px; }

/* --- 料金プラン見出し --- */
.c-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 18px;
  padding: 18px 24px;
  text-align: center;
  color: #fff;
  background: var(--ink-2);
  border-radius: 4px;
}
.c-plan-head--premium { background: var(--sea-deep); }
.c-plan-head .freq {
  padding: 3px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.8;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
}
.c-plan-head .name {
  font-family: var(--f-min);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: .06em;
}
.c-plan-head .price { font-size: 14px; }
.c-plan-head .price .num {
  font-family: var(--f-en);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: .01em;
  margin-right: .1em;
}

/* --- 交互レイアウト（テキスト＋画像） --- */
.c-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.6vw, 66px);
  align-items: center;
}
.c-media--rev > :first-child { order: 2; }
.c-media__fig img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 24px 56px -28px rgba(12, 26, 38, .35);
}

/* =============================================================
   17. 会社概要
   ============================================================= */
.p-rinen { background: var(--sand); }
.p-rinen__inner { display: grid; grid-template-columns: 340px 1fr; gap: clamp(30px, 5vw, 72px); align-items: start; }

.p-message__box {
  padding: clamp(28px, 4vw, 56px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 24px 60px -34px rgba(12, 26, 38, .3);
}
.p-message__pickup {
  margin: 2em 0;
  padding: 22px;
  text-align: center;
  font-family: var(--f-min);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--sea-deep);
  background: var(--sea-pale);
  border-radius: 4px;
}

.p-map { line-height: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.p-map iframe { display: block; width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

/* --- 問い合わせフォーム --- */
.p-form { background: var(--sand); }
.p-form__box {
  padding: clamp(24px, 3.4vw, 48px);
  background: #fff;
  border-radius: 4px;
}
.p-form__note { margin-top: 2em; font-size: 13px; line-height: 1.95; color: var(--ink-3); }
.p-form__note p + p { margin-top: .5em; }

.p-form__tel {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 30px 24px;
  margin-bottom: 26px;
  text-align: center;
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
}
.p-form__tel .label { font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
.p-form__tel .num {
  font-family: var(--f-en);
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .02em;
}
.p-form__tel .num:hover { color: #7fdbe3; }
.p-form__tel .sub { font-size: 12px; color: rgba(255, 255, 255, .7); }

/* 外部フォーム（CMS埋め込み）の最低限の調整 */
#cms-contact-1-1-area input[type="text"],
#cms-contact-1-1-area input[type="email"],
#cms-contact-1-1-area input[type="tel"],
#cms-contact-1-1-area textarea,
#cms-contact-1-1-area select {
  max-width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
#cms-contact-1-1-area input:focus,
#cms-contact-1-1-area textarea:focus,
#cms-contact-1-1-area select:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
#cms-contact-1-1-area button,
#cms-contact-1-1-area input[type="submit"] {
  padding: 15px 44px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .12em;
  color: #fff;
  background: var(--sea);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s var(--ease);
}
#cms-contact-1-1-area button:hover,
#cms-contact-1-1-area input[type="submit"]:hover { background: var(--ink); }

/* =============================================================
   18. 空き家・相続
   ============================================================= */
.p-lead-box {
  position: relative;
  padding: clamp(30px, 4.4vw, 60px);
  color: #fff;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
}
.p-lead-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 90% at 100% 0%, rgba(11, 127, 140, .42), transparent 62%);
}
.p-lead-box > * { position: relative; }
.p-lead-box__ttl {
  font-family: var(--f-min);
  font-size: clamp(21px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
}
.p-lead-box__txt { margin-top: 1.2em; font-size: 15px; line-height: 2.1; color: rgba(255, 255, 255, .85); }
.p-lead-box__txt .hl { display: block; margin-bottom: .3em; font-size: clamp(16px, 1.7vw, 20px); color: #7fdbe3; }

.p-risk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.p-risk > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.p-risk > li::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-family: var(--f-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: var(--alert);
  border-radius: 50%;
}

.p-def {
  padding: clamp(22px, 3vw, 38px);
  text-align: center;
  font-family: var(--f-min);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.9;
  letter-spacing: .04em;
  background: var(--sea-pale);
  border-radius: 4px;
}

/* --- 相続シミュレーション --- */
.p-calc { display: grid; gap: 14px; }
.p-calc__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4px 20px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.p-calc__label { font-weight: 500; color: var(--sea-deep); }
.p-calc__value { font-size: 14.5px; line-height: 1.9; }
.p-calc__total {
  padding: 22px;
  text-align: center;
  font-family: var(--f-min);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.8;
  letter-spacing: .04em;
  color: #fff;
  background: var(--ink-2);
  border-radius: 4px;
}

/* --- 相談事例 --- */
.p-case {
  padding: clamp(24px, 3.2vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.p-case + .p-case { margin-top: clamp(20px, 2.4vw, 32px); }
.p-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.p-case__no {
  padding: 4px 14px;
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  color: #fff;
  background: var(--sea);
  border-radius: 999px;
}
.p-case__who {
  font-family: var(--f-min);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: .04em;
}
.p-case__body { display: grid; grid-template-columns: 1fr 280px; gap: clamp(22px, 3vw, 44px); align-items: start; }
.p-case__tag {
  display: inline-block;
  margin-bottom: .8em;
  padding: 2px 14px;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.8;
  color: var(--sea-deep);
  border: 1px solid var(--sea);
  border-radius: 999px;
}
.p-case__txt { font-size: 14.5px; line-height: 2.05; color: var(--ink-2); }
.p-case__txt p + p { margin-top: 1em; }
.p-case__after {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--sand);
  border-radius: 4px;
}
.p-case__fig img { width: 100%; border-radius: 3px; }

/* =============================================================
   19. HP限定物件情報 / 求む物件
   ============================================================= */
.p-property + .p-property { margin-top: clamp(28px, 3.6vw, 50px); }
.p-property {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.p-property__ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 20px clamp(20px, 2.6vw, 34px);
  font-family: var(--f-min);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: .05em;
  color: #fff;
  background: var(--ink-2);
}
.p-property__badge {
  padding: 3px 14px;
  font-family: var(--f-jp);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.8;
  background: var(--sea);
  border-radius: 999px;
}
.p-property__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  padding: clamp(22px, 3vw, 40px);
}
.p-property__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}
.p-property__spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.p-property__spec th,
.p-property__spec td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.p-property__spec tr:first-child th,
.p-property__spec tr:first-child td { border-top: 1px solid var(--line); }
.p-property__spec th { width: 34%; font-weight: 500; color: var(--ink-3); }
.p-property__spec .price { font-family: var(--f-en); font-size: 26px; font-weight: 500; color: var(--alert); letter-spacing: .02em; }

.p-empty {
  padding: clamp(40px, 6vw, 78px) 24px;
  text-align: center;
  background: var(--sand);
  border-radius: 4px;
}
.p-empty__ttl { font-family: var(--f-min); font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; }
.p-empty__txt { margin-top: 1em; font-size: 14px; line-height: 2; color: var(--ink-3); }

.p-wanted__group + .p-wanted__group { margin-top: clamp(40px, 5vw, 68px); }
.p-wanted__ttl {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-family: var(--f-min);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: .05em;
}
.p-wanted__ttl::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--sea);
}

/* =============================================================
   20. 下層ページ レスポンシブ
   ============================================================= */
@media (max-width: 1023px) {
  .p-rinen__inner { grid-template-columns: 1fr; }
  .p-risk { grid-template-columns: repeat(2, 1fr); }
  .p-case__body { grid-template-columns: 1fr; }
  .p-case__fig { max-width: 400px; }
  .p-property__body { grid-template-columns: 1fr; }
  .p-property__fig { max-width: 560px; }
}

@media (max-width: 767px) {
  .c-media,
  .c-media--rev > :first-child { grid-template-columns: 1fr; order: 0; }
  .c-list-dot { grid-template-columns: 1fr; }
  .p-risk { grid-template-columns: 1fr; }
  .p-calc__row { grid-template-columns: 1fr; }
  .c-table th, .c-table td { padding: 12px 14px; }
  .c-plan-head { flex-direction: column; gap: 6px; }
  .p-property__spec th { width: 38%; }
}

/* -------------------------------------------------------------
   15. Motion preference
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .p-hero__slide:nth-child(1) { opacity: 1; }
  .js .js-reveal { opacity: 1; transform: none; }
}