/* =========================================================
   front.css — トップページ固有
   ========================================================= */

/* セクション共通の縦余白 */
.p-intro, .p-service, .p-price, .p-flow, .p-faq, .p-company, .p-news {
  padding-block: 56px;
}
@media (min-width: 1024px) {
  .p-intro, .p-service, .p-price, .p-flow, .p-faq, .p-company, .p-news {
    padding-block: 88px;
  }
}

/* =========================================================
   HERO
   PC は Figma（1440）実測値。写真にオーバーレイは無し。
   ========================================================= */
.p-hero {
  position: relative;
  z-index: 2;               /* 下端の2本線を次セクションへ重ねる */
  /* スクロールで写真が引く量。SPは枠の上下に余白が無く、縮めると写真の端が出るため 0（コピーだけが抜ける） */
  --kd-hero-shrink: 0;
}
@media (min-width: 768px) {
  .p-hero { --kd-hero-shrink: .055; }
}
.p-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #b8d6e1;
}
.p-hero__slider { position: absolute; inset: 0; }
.p-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--kd-pos, 62%) center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  /* 横に流す（パン）ための余白。--kd-pan-z 倍に広げた内側で ±--kd-pan-x 動かす。
     スクロール時の縮小（--kd-hero-shrink）と掛け合わせても枠を割らない値にすること。 */
  --kd-pan-z: 1;
  --kd-pan-x: 55px;
  --kd-off-y: 0px;
}
@media (max-width: 767px) {
  /* 枠より左右に70px、上下に80px広げておく。
     左右：その中で ±55px 振る（横長写真は縦長の枠だと左右が大きく余る）。
     上下：縦は写真がちょうど収まり background-position が効かないため、
             この余白の中で写真ごとに --kd-pos-y だけ上下にずらす。 */
  .p-hero__slide {
    left: -70px;
    right: -70px;
    top: -80px;
    bottom: -80px;
    --kd-off-y: var(--kd-pos-y, 0px);
    transform: translateY(var(--kd-off-y)); /* 動きを減らす設定のときの位置 */
  }
}
@media (min-width: 768px) {
  .p-hero__slide { --kd-pan-z: 1.11; --kd-pan-x: 1.1%; }
}
/* 表示するスライドだけ読み込む（1枚目以外は出番の直前に JS が is-loaded を付与）
   画像はSPも横長のPC用を使う（左右に余白ができるので、拡大せずに大きく振れる） */
.p-hero__slide.is-active,
.p-hero__slide.is-loaded { background-image: var(--kd-hero-pc); }
.p-hero__slide.is-active { opacity: 1; }

/* 装飾（デザインのベクター） */
.p-hero__tl,
.p-hero__br,
.p-hero__lines svg { position: absolute; max-width: none; height: auto; }
.p-hero__tl { left: 0; top: -2px; width: 300px; height: 100px; } /* SPは高さを抑える（縦方向に圧縮） */
.p-hero__br { right: 0; bottom: 0; width: 246px; height: 61px; } /* SPは高さを半分に圧縮し、2本ラインと縁を平行に */
.p-hero__lines {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 260px;
  overflow: hidden;
  pointer-events: none;
}
.p-hero__line { position: absolute; inset: 0; }
.p-hero__lines svg { right: -30px; top: 0; width: 3470px; height: 260px; }

/* ---------------------------------------------------------
   ヒーローの登場演出
   写真 → コピー → 装飾ラインの順に少しずつ遅れて出る。
   端末側で「動きを減らす」設定の場合は全て静止表示。
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* 1. 写真（登場後はスクロール連動の縮小に切り替わるので forwards は付けない） */
  .p-hero__slider { animation: kd-hero-photo 1.1s var(--ease) backwards; }
  .p-hero__tl,
  .p-hero__br { animation: kd-hero-fade .9s var(--ease) .2s both; }

  /* 2. コピー */
  .p-hero__badge,
  .p-hero__catch,
  .p-hero__lead { animation: kd-hero-rise .7s var(--ease) .42s both; }
  .p-hero__assure { animation: kd-hero-rise .7s var(--ease) .78s both; }
  .p-hero__assure:nth-child(2) { animation-delay: .86s; }
  .p-hero__assure:nth-child(3) { animation-delay: .94s; }
  .p-hero__actions { animation: kd-hero-rise .7s var(--ease) 1s both; }

  /* 3. 装飾ライン（描かれるように出る） */
  .p-hero__tl path[stroke] {
    stroke-dasharray: 660;
    animation: kd-line-tl 1.3s cubic-bezier(.32, .08, .24, 1) 1.05s both;
  }
  .p-hero__tl path[stroke] + path[stroke] { animation-delay: 1.2s; }

  /* 下の2本ラインはスクロールに連動して左から右へ描かれる。
     ヒーローを半分スクロールした時点で描き終わる（p * 200%）。
     JSが使えない環境（scripting: none）ではこの指定ごと効かず、最初から全体が見える。 */
  @media (scripting: enabled) {
    .p-hero__line {
      clip-path: inset(0 calc(100% - min(100%, var(--kd-hero-p, 0) * 200%)) 0 0);
    }
    .p-hero__line + .p-hero__line {
      clip-path: inset(0 calc(100% - min(100%, (var(--kd-hero-p, 0) - .04) * 200%)) 0 0);
    }
  }

  /* ---- 表示中の写真をゆっくり横に流す ----
     is-panning は carousel.js が付け外しする。消え終わってから外すので、
     フェードの途中で写真の位置が戻ってカクッと見えることがない。 */
  .p-hero__slide.is-panning {
    will-change: transform;
    /* 切り替わりのフェード（1.2s）が終わってから動き出す */
    animation: kd-hero-pan 8s linear 1.2s both;
  }
  /* 1枚おきに逆向き。同じ動きの繰り返しに見せない */
  .p-hero__slide:nth-child(even).is-panning { animation-name: kd-hero-pan-rev; }

  /* ---- スクロールすると写真が引いて、コピーが先に抜ける ----
     --kd-hero-p（0→1）は carousel.js が書き込む。JSが動かなければ 0 のまま＝静止。 */
  .p-hero__slider {
    transform: scale(calc(1 - var(--kd-hero-shrink) * var(--kd-hero-p, 0)));
    transform-origin: 50% 45%;
  }
  .p-hero__inner {
    opacity: calc(1 - .65 * var(--kd-hero-p, 0));
    transform: translateY(calc(var(--kd-hero-p, 0) * -24px));
  }
}
@keyframes kd-hero-photo {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes kd-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kd-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kd-line-tl {
  from { stroke-dashoffset: 660; }
  to   { stroke-dashoffset: 0; }
}
@keyframes kd-hero-pan {
  from { transform: scale(var(--kd-pan-z)) translate(calc(var(--kd-pan-x) * -1), var(--kd-off-y)); }
  to   { transform: scale(var(--kd-pan-z)) translate(var(--kd-pan-x), var(--kd-off-y)); }
}
@keyframes kd-hero-pan-rev {
  from { transform: scale(var(--kd-pan-z)) translate(var(--kd-pan-x), var(--kd-off-y)); }
  to   { transform: scale(var(--kd-pan-z)) translate(calc(var(--kd-pan-x) * -1), var(--kd-off-y)); }
}

.p-hero__inner {
  position: relative;
  padding: 50px var(--content-pad) 76px;
}

/* 地域バッジ */
.p-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  background: #f08b39;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.p-hero__badge-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #fbce53;
}

/* キャッチ・リード（白文字） */
.p-hero__catch {
  margin-top: 20px;
  color: #fff;
  font-size: clamp(2.6rem, 7.2vw, 4.6rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.p-hero__lead {
  margin-top: 16px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
}
@media (max-width: 1023px) {
  /* SP/TBはデザイン未提供：白文字の可読性確保のため写真を少し暗くする
     （装飾SVGはこの上に乗せるので、PCと同じ色のまま） */
  .p-hero__slider::after {
    content: "";
    position: absolute;
    inset: -8%; /* スクロールで縮んでも写真の端が明るく残らないよう、少し大きめに敷く */
    /* 停止位置は、はみ出させた分だけ内側へ寄せて、見えている範囲の濃さを従来と同じに保つ */
    background: linear-gradient(180deg, rgba(20, 50, 60, .42) 6.9%, rgba(20, 50, 60, .22) 93.1%);
  }
  .p-hero__catch,
  .p-hero__lead { text-shadow: 0 1px 8px rgba(0, 30, 40, .35); }
}

/* 電話・メール */
.p-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 26px;
}
.p-hero__tel,
.p-hero__mail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* 固定電話の併記は写真の上に乗るので白文字＋薄い影 */
.p-hero__tel .c-tel__sub {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 30, 15, .55);
}
.p-hero__tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  border: 1px solid;
  border-radius: 9999px;
  background: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}
.p-hero__tag--tel  { color: #0a9d58; border-color: #0a9d58; }
.p-hero__tag--mail { color: #ee7800; border-color: #ee7800; }
.p-hero__tel .c-tel--card,
.p-hero__mail .c-btn--mail { width: 100%; }
.p-hero__mail .c-btn--mail {
  min-height: 84px;
  gap: 10px;
  padding: 0 16px;
  font-size: 2.2rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* 3つの安心（SPはコピーとCVの間。写真が見える余白をとる） */
.p-hero__assurance {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 150px;
}
.p-hero__assure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #fff;
  color: #0a9d58;
  font-weight: 700;
  text-align: center;
}
.p-hero__assure-label { font-size: 1.4rem; line-height: 1.2; }
.p-hero__assure-big   { font-size: 2.6rem; line-height: 1; }
.p-hero__assure-big small { font-size: 1.4rem; }
.p-hero__assure--open .p-hero__assure-big { font-size: 2.1rem; line-height: 1.1; }
.p-hero__assure-sub   { margin-top: 4px; font-size: 1rem; line-height: 1.2; }
.p-hero__sparkle { position: absolute; height: auto; }
.p-hero__sparkle--r { left: 77px; top: 30px; width: 17px; }
.p-hero__sparkle--l { left: 11px; top: 38px; width: 14px; }

/* SP：画面の縦が短い端末向けにCVの高さを抑える（タグをボタンに食い込ませる） */
@media (max-width: 1023px) {
  /* 2本ラインもPC同様に写真の右下へ沿わせる（SPは縮小して収める） */
  .p-hero__lines { bottom: -14px; height: 92px; }
  .p-hero__lines svg { right: -16px; width: 1200px; height: 90px; }

  .p-hero__actions { gap: 14px; }
  .p-hero__tel,
  .p-hero__mail { gap: 0; }
  .p-hero__tag {
    position: relative;
    z-index: 2;
    height: 32px;
    margin-bottom: -12px;
    padding: 0 12px;
    font-size: 1.3rem;
  }
  .p-hero__tel .c-tel--card { min-height: 88px; }
  .p-hero__mail .c-btn--mail { min-height: 76px; }
}

/* さらに縦が短い端末（iPhone SE 等）：写真の見える余白と下余白を詰める */
@media (max-width: 1023px) and (max-height: 700px) {
  .p-hero__inner { padding-top: 40px; padding-bottom: 56px; }
  .p-hero__assurance { margin-top: 104px; }
  .p-hero__actions { margin-top: 20px; }
}

/* ---- PC：Figma 1440 実寸 ---- */
@media (min-width: 1024px) {
  .p-hero { height: 680px; }
  .p-hero__tl { width: 512px; height: 346px; }
  .p-hero__br { width: 492px; height: 244px; }

  .p-hero__inner {
    max-width: 1200px;
    height: 100%;
    margin-inline: auto;
    padding: 87px 0 0;
  }
  .p-hero__copy { width: 792px; }
  .p-hero__badge { font-size: 1.6rem; }
  .p-hero__catch { font-size: 6.3rem; line-height: 95px; }
  .p-hero__lead  { margin-top: 20px; font-size: 1.9rem; line-height: 32px; }

  .p-hero__actions { flex-direction: row; gap: 12px; margin-top: 20px; }
  .p-hero__tel,
  .p-hero__mail { width: 390px; }
  .p-hero__mail .c-btn--mail { height: 110px; font-size: 3rem; }

  .p-hero__assurance {
    position: absolute;
    top: 167px;
    right: -3px;
    flex-direction: column;
    margin: 0;
  }
  .p-hero__assure { width: 141px; height: 140px; }
  .p-hero__assure-label { font-size: 2rem; line-height: 24px; }
  .p-hero__assure--free .p-hero__assure-label { font-size: 1.8rem; line-height: 22px; }
  .p-hero__assure-big { font-size: 3.6rem; line-height: 36px; }
  .p-hero__assure-big small { font-size: 2rem; }
  .p-hero__assure--open .p-hero__assure-big { font-size: 2.9rem; line-height: 32px; }
  .p-hero__assure-sub { margin-top: 6px; font-size: 1.4rem; line-height: 17px; }
  .p-hero__sparkle--r { left: 101px; top: 40px; width: 24px; }
  .p-hero__sparkle--l { left: 15px; top: 50.6px; width: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .p-hero__inner { padding-inline: var(--content-pad); }
  .p-hero__assurance { right: var(--content-pad); }
  .p-hero__catch { font-size: 5.4rem; line-height: 80px; }
}

/* =========================================================
   INTRO ＋ TROUBLE（Figma「02」：ミント地 y760〜2363）
   ========================================================= */
.p-concern { position: relative; background: #e7f7ef; }

/* ---- INTRO ---- */
.p-intro {
  position: relative;
  overflow: hidden;
  background: transparent;
  text-align: center;
  padding: 72px var(--content-pad) 48px !important;
}
.p-intro__circle { position: absolute; border-radius: 50%; pointer-events: none; }
.p-intro__circle--l { left: -97px; top: -69px; width: 350px; height: 350px; background: rgba(255, 255, 255, .4); }
.p-intro__circle--r { left: calc(50% + 308px); top: 156px; width: 544px; height: 544px; background: rgba(8, 122, 69, .039); }
.p-intro__deco {
  position: absolute;
  left: -40px;
  bottom: 0;
  width: 160px;
  height: auto;
  opacity: .6;
  pointer-events: none;
}
.p-intro__inner { position: relative; max-width: 1120px; margin-inline: auto; }
.p-intro__title {
  color: #24352d;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-intro__text {
  margin-top: 20px;
  color: #24352d;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2;
  text-align: left;
}
@media (min-width: 1024px) {
  .p-intro { padding: 90px 0 65px !important; }
  .p-intro__deco { left: 40px; top: 274px; bottom: auto; width: 286px; height: 216px; opacity: 1; }
  .p-intro__title { font-size: 4rem; line-height: 66px; }
  .p-intro__text { margin-top: 30px; font-size: 1.6rem; line-height: 43px; text-align: center; }
}

/* ---- TROUBLE：住宅写真の角丸ブロック（角丸90px・重ね無し） ---- */
.p-trouble {
  position: relative;
  overflow: hidden;
  padding: 48px 16px 56px;
  border-radius: 40px;
  background: #0e2a44 url('../img/top/trouble/bg-town.jpg') center / cover no-repeat;
}
.p-trouble__panel {
  max-width: 1160px;
  margin-inline: auto;
  padding: 28px 16px 32px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}
.p-trouble__icon { display: block; width: 28px; height: auto; margin-inline: auto; }
.p-trouble__title {
  margin-top: 10px;
  color: #f08b39;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-trouble__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin-top: 24px;
}
.p-trouble__thumb {
  aspect-ratio: 295 / 150;
  overflow: hidden;
  border-radius: 9999px;
  background: #eef2f0;
}
.p-trouble__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-trouble__text {
  margin-top: 8px;
  color: #2e2e2e;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .p-trouble__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-trouble__text { font-size: 1.6rem; }
}
@media (min-width: 1024px) {
  .p-trouble { padding: 70px 0 83px; border-radius: 90px; }
  .p-trouble__panel { padding: 27.5px 0 40px; border-radius: 40px; }
  .p-trouble__icon { width: 36.4px; height: 53px; }
  .p-trouble__title { margin-top: 11px; font-size: 3rem; line-height: 45px; }
  .p-trouble__grid {
    grid-template-columns: repeat(3, minmax(0, 295px));
    justify-content: center;
    gap: 20px 55px;
    margin-top: 42px;
    padding-inline: 20px;
  }
  .p-trouble__text { margin-top: 8px; font-size: 2rem; line-height: 30px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-trouble__panel { margin-inline: 20px; }
}
/* デザインでは写真グリッドがパネル中央より25px左寄り（左57.5px／右107.5px） */
@media (min-width: 1200px) {
  .p-trouble__grid { justify-content: start; padding: 0 0 0 57.5px; }
}

/* ---- お困りごと下部の電話CTA（写真の上・白文字） ---- */
.p-trouble__cta { margin-top: 40px; text-align: center; color: #fff; }
.p-trouble__cta-lead { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.p-trouble__cta-heading {
  margin: 4px 0 20px;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .p-trouble__cta { margin-top: 76px; }
  .p-trouble__cta-lead { font-size: 2.2rem; line-height: 33px; }
  .p-trouble__cta-heading { margin: -1px 0 23px; font-size: 3.2rem; line-height: 48px; }
}

/* =========================================================
   SERVICE（できること）＋ 日常のお手伝い（Figma「04」y2363〜3944）
   ========================================================= */
.p-service {
  position: relative;
  background: #e7f7ef;
  padding: 56px 16px 72px !important;
}
.p-service__inner { position: relative; max-width: 1160px; margin-inline: auto; }

/* ---- 3分野カード（370.6×524・角丸28） ---- */
.p-service__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.p-service__card { overflow: hidden; border-radius: 20px; background: #fff; }
.p-service__thumb { height: 200px; }
.p-service__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-service__body { padding: 22px 22px 26px; }
.p-service__en {
  color: #0a9d58;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .04em;
}
.p-service__ja { margin-top: 2px; color: #24352d; font-size: 2.2rem; font-weight: 700; line-height: 1.45; }
.p-service__desc { margin-top: 10px; color: #24352d; font-size: 1.5rem; font-weight: 700; line-height: 28px; }
.p-service__list { margin-top: 16px; color: #6b7280; font-size: 1.2rem; font-weight: 400; line-height: 24px; }

/* ---- 日常のお手伝い（白地・オレンジ3px枠・角丸38） ---- */
.p-help {
  display: grid;
  gap: 24px;
  margin-top: 40px;
  padding: 28px 18px 28px;
  border: 3px solid #f08b39;
  border-radius: 28px;
  background: #fff;
}
.p-help__title { color: #24352d; font-size: 2.4rem; font-weight: 700; line-height: 1.4; }
.p-help__text  { margin-top: 12px; color: #24352d; font-size: 1.5rem; font-weight: 700; line-height: 1.9; }
.p-help__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.p-help__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 84px;
  padding: 12px 2px 8px;
  border-radius: 12px;
  background: #ffedd5;
  text-align: center;
}
.p-help__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  color: #f08b39;
}
.p-help__icon .c-icon { width: auto; height: auto; max-width: 34px; max-height: 26px; }
.p-help__icon--brush .c-icon,
.p-help__icon--faucet .c-icon { width: 30px; height: 30px; }
.p-help__label { margin-top: 6px; color: #24352d; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.p-help__notes {
  padding-top: 20px;
  border-top: 2px solid #ffedd5;
  color: #6b7280;
  font-size: 1.2rem;
  line-height: 24px;
}
.p-help__notes span { color: #374151; }

.p-service__catch {
  margin-top: 40px;
  color: #24352d;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-service__worker { display: block; width: 140px; height: auto; margin: 16px auto -72px; }

@media (min-width: 768px) {
  .p-service__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .p-help__grid { gap: 8px; }
  .p-help__label { font-size: 1.3rem; }
}

/* ---- PC：デザイン実寸 ---- */
@media (min-width: 1024px) {
  .p-service { padding: 91px 0 107px !important; }
  .p-service__inner { padding-inline: 0; }
  .p-service__grid { gap: 24.1px; }
  .p-service__card { min-height: 524px; border-radius: 28px; } /* 幅が狭いときは文量に合わせて伸ばす（文字切れ防止） */
  .p-service__thumb { height: 220px; }
  .p-service__body { padding: 27.4px 28px 0; }
  .p-service__ja { margin-top: 1.7px; font-size: 2.6rem; line-height: 38px; }
  .p-service__desc { margin-top: 11.2px; }
  .p-service__list { margin-top: 20px; }

  .p-help {
    grid-template-columns: 396px 1fr;
    grid-template-areas: "head grid" "notes notes";
    column-gap: 48.8px;
    row-gap: 0;
    max-width: 1166px;
    margin: 55px -3px 0;
    padding: 45px 45px 44.6px;
    border-radius: 38px;
  }
  .p-help__head  { grid-area: head; align-self: center; }
  .p-help__grid  { grid-area: grid; grid-template-columns: repeat(3, 198.4px); gap: 7.5px 12px; }
  .p-help__notes { grid-area: notes; margin-top: 26.5px; padding-top: 28.4px; }
  .p-help__title { font-size: 3.6rem; line-height: 50px; white-space: nowrap; }
  .p-help__text  { margin-top: 19px; font-size: 1.6rem; line-height: 30px; }
  .p-help__item  { height: 92.5px; min-height: 0; padding: 12.5px 0 0; border-radius: 16px; }
  .p-help__icon  { height: 36px; }
  .p-help__icon .c-icon { max-width: none; max-height: none; }
  .p-help__icon--brush .c-icon,
  .p-help__icon--faucet .c-icon { width: 40px; height: 40px; }
  .p-help__label { margin-top: 4px; font-size: 1.6rem; line-height: 24px; }

  .p-service__catch { margin-top: 64px; font-size: 2.6rem; line-height: 38px; }
  .p-service__worker {
    position: absolute;
    left: 935.5px;
    bottom: -112.5px;
    width: 244.7px;
    height: 279.6px;
    margin: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-service__inner { padding-inline: 20px; }
  .p-help { margin-inline: 0; grid-template-columns: 300px 1fr; column-gap: 28px; padding-inline: 28px; }
  .p-help__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-service__worker { left: auto; right: 0; }
}

/* =========================================================
   PRICE（料金）Figma y4330〜5571（上端はCTA帯に40px重なるキャップ）
   ========================================================= */
.p-price {
  position: relative;
  z-index: 1;
  margin-top: -40px;
  overflow-x: clip;
  background: linear-gradient(to bottom, transparent 80px, #e7f7ef 80px);
  padding: 72px 16px 40px !important;
}
.p-price::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -21px;
  right: -21px;
  height: 80px;
  border-radius: 80px 80px 0 0;
  background: #e7f7ef;
}
.p-price__inner { max-width: 1160px; margin-inline: auto; }

.p-price__cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
.p-price__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(10, 80, 50, .10);
}
.p-price__head { padding: 16px 20px 16px; color: #fff; }
.p-price__card--time .p-price__head { background: #0a9d58; }
.p-price__card--unit .p-price__head { background: #f08b39; }
.p-price__en { font-size: 1.2rem; font-weight: 700; line-height: 18px; letter-spacing: .08em; opacity: .8; }
.p-price__ttl { margin-top: 2px; color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 1.5; }

/* 時間で算出：2行 */
.p-price__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 2px solid #edf2ef;
}
.p-price__row dt { display: flex; flex-direction: column; }
.p-price__row .p-price__item { color: #24352d; font-weight: 700; }
.p-price__row--lg .p-price__item { font-size: 2.4rem; line-height: 1.2; }
.p-price__row--md .p-price__item { font-size: 2rem; line-height: 1.2; }
.p-price__unit { margin-top: 1px; color: #6b7280; font-size: 1.2rem; font-weight: 500; line-height: 16px; }
.p-price__row dd { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.p-price__row .p-price__yen { color: #0a9d58; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.p-price__tax { color: #0a9d58; font-size: 1.2rem; font-weight: 700; }

/* 単価で算出：9行 */
.p-price__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  border-bottom: 2px solid #edf2ef;
}
.p-price__list .p-price__item { color: #24352d; font-size: 1.5rem; font-weight: 700; line-height: 24px; }
.p-price__list .p-price__yen  { color: #f08b39; font-size: 1.5rem; font-weight: 700; line-height: 24px; white-space: nowrap; }

.p-price__memo {
  padding: 16px 20px 20px;
  color: #6b7280;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 24px;
}
/* 予約出張費の補足（上の注釈に続けて置くので上余白なし） */
.p-price__memo--add { padding-top: 0; }
.p-price__memo--add strong { color: #24352d; font-weight: 700; }

/* 注意ボックス */
.p-price__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 20px 18px;
  border-radius: 20px;
  background: #fff;
}
.p-price__note-icon { flex: none; width: 32px; height: 32px; }
.p-price__note-ttl { color: #24352d; font-size: 1.7rem; font-weight: 700; line-height: 1.6; }
.p-price__note ul {
  margin-top: 6px;
  padding-left: 20px;
  list-style: disc;
  color: #4b5563;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 20.5px;
}
.p-price__note li::marker { color: #4b5563; }

/* ---- PC：デザイン実寸 ---- */
@media (min-width: 1024px) {
  .p-price { padding: 87.2px 0 45px !important; }
  .p-price .c-sec-head { margin-bottom: 47.3px; }
  .p-price__cols { grid-template-columns: repeat(2, 566px); justify-content: center; gap: 28px; }
  .p-price__card { height: 707px; border-radius: 28px; }
  .p-price__head { height: 88px; padding: 19.6px 24px 0; }
  .p-price__ttl { margin-top: 1.8px; font-size: 2rem; line-height: 30px; }

  .p-price__row { padding: 0 26px 0 20px; }
  .p-price__row--lg { height: 80px; }
  .p-price__row--md { height: 79px; }
  .p-price__row--lg .p-price__item { font-size: 2.7rem; line-height: 32px; }
  .p-price__row--md .p-price__item { font-size: 2.2rem; line-height: 26px; }
  .p-price__row dd { gap: 9px; }
  .p-price__row .p-price__yen { font-size: 2.6rem; }

  .p-price__list li { height: 59px; min-height: 0; }
  .p-price__list .p-price__item,
  .p-price__list .p-price__yen { font-size: 1.6rem; }
  .p-price__memo { padding: 19.4px 20px 0; }
  .p-price__memo--add { padding-top: 12px; }

  .p-price__note { gap: 16.5px; margin-top: 32px; padding: 26.8px 30px 24.9px 31.5px; }
  .p-price__note-icon { width: 40px; height: 40px; }
  .p-price__note-ttl { font-size: 2.4rem; line-height: 36px; }
  .p-price__note ul { margin-top: 3.3px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-price { padding-inline: 20px !important; }
  .p-price__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   FLOW（ご依頼の流れ）Figma y5571〜6163（料金と地続きのミント）
   ========================================================= */
.p-flow {
  position: relative;
  background: #e7f7ef;
  padding: 16px 16px 120px !important;
}
.p-flow__inner { max-width: 1160px; margin-inline: auto; }
.p-flow .c-sec-head__lead { font-size: 1.5rem; }
.p-flow__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 16px;
}
.p-flow__step {
  position: relative;
  padding: 36px 20px 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(10, 80, 50, .08);
}
.p-flow__no {
  position: absolute;
  left: -8px;
  top: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f08b39;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
.p-flow__en { color: #f08b39; font-size: 1.2rem; font-weight: 700; line-height: 18px; letter-spacing: .05em; }
.p-flow__ja { margin-top: 3px; color: #24352d; font-size: 1.8rem; font-weight: 700; line-height: 27px; }
.p-flow__desc { margin-top: 12px; color: #4b5563; font-size: 1.4rem; font-weight: 400; line-height: 28px; }
@media (min-width: 600px) {
  .p-flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .p-flow { padding: 7.6px 0 179px !important; }
  .p-flow .c-sec-head { margin-bottom: 54.1px; }
  .p-flow .c-sec-head__lead { margin-top: 16.9px; font-size: 1.6rem; line-height: 28px; }
  .p-flow__list { grid-template-columns: repeat(4, 272px); justify-content: center; gap: 24px; }
  .p-flow__step { height: 215px; padding: 41.4px 22px 0; }
  .p-flow__desc { margin-top: 17px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-flow { padding-inline: 20px !important; }
  .p-flow__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-flow__step { height: auto; padding-bottom: 24px; }
}

/* =========================================================
   AREA（対応エリア）Figma：黄緑地・上端は流れに66px重なる角丸50
   ========================================================= */
.p-area {
  position: relative;
  z-index: 1;
  margin-top: -66px;
  padding: 48px 16px 64px;
  border-radius: 32px 32px 0 0;
  background: #77bd56;
}
.p-area__panel {
  display: grid;
  gap: 24px;
  max-width: 1160px;
  margin-inline: auto;
  padding: 36px 20px 32px;
  border-radius: 20px;
  background: #fff;
}
.p-area .c-sec-head { margin-bottom: 0; }
.p-area__lead { margin-top: 16px; color: #4b5563; font-size: 1.5rem; font-weight: 700; line-height: 30px; }
.p-area__towns { margin-top: 20px; }
.p-area__town + .p-area__town { margin-top: 18px; }
.p-area__town h3 { color: #0a9d58; font-size: 2rem; font-weight: 700; line-height: 32px; }
.p-area__town p { margin-top: 5.8px; color: #4b5563; font-size: 1.2rem; font-weight: 700; line-height: 24px; }
.p-area__note { margin-top: 20px; color: #24352d; font-size: 1.4rem; font-weight: 400; line-height: 24px; }
.p-area__map img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  .p-area { padding: 96px 0 84.1px; border-radius: 50px 50px 0 0; }
  .p-area__panel {
    position: relative;
    grid-template-columns: 472px 1fr;
    gap: 0;
    height: 653.3px;
    padding: 77px 50px 0;
  }
  .p-area__lead { margin-top: 20.1px; font-size: 1.6rem; }
  .p-area__towns { margin-top: 26.3px; }
  .p-area__town + .p-area__town { margin-top: 18.2px; }
  .p-area__town h3 { font-size: 2.2rem; }
  .p-area__note { margin-top: 20.3px; }
  .p-area__map { position: absolute; left: 550px; top: 69.9px; width: 560px; height: 497.5px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-area { padding-inline: 20px; }
  .p-area__panel { grid-template-columns: 1fr 1fr; gap: 32px; height: auto; padding-bottom: 48px; }
  .p-area__map { position: static; width: auto; height: auto; }
}

/* =========================================================
   FAQ（よくあるご質問）Figma y7316〜8334
   クリーム地。上端はCTA帯に40px重なるキャップ、下端は緑セクションに55px被さる角丸
   ========================================================= */
.p-faq {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  overflow-x: clip;
  background: linear-gradient(to bottom, transparent 80px, #fff9f1 80px);
  padding: 72px 16px 56px !important;
}
.p-faq::before,
.p-faq::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 80px;
  background: #fff9f1;
}
.p-faq::before { top: 0; left: -21px; right: -21px; border-radius: 80px 80px 0 0; }
.p-faq::after  { bottom: -55px; left: -51px; right: -51px; border-radius: 0 0 80px 80px; }
.p-faq .l-inner { max-width: 1120px; padding-inline: 0; }
.p-faq__list { display: grid; gap: 16px; }
.p-faq__item {
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 2px 3px 0 #f08b39;
}
.p-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 16px 16px 16px 18px;
  cursor: pointer;
  list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q-mark {
  flex: none;
  color: #f08b39;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.p-faq__q-text { flex: 1; color: #191919; font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
.p-faq__toggle { position: relative; flex: none; width: 18px; height: 18px; }
.p-faq__toggle::before,
.p-faq__toggle::after {
  content: "";
  position: absolute;
  background: #f08b39;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.p-faq__toggle::before { left: 0; top: 50%; width: 100%; height: 1.6px; transform: translateY(-50%); }
.p-faq__toggle::after  { top: 0; left: 50%; width: 1.6px; height: 100%; transform: translateX(-50%); }
.p-faq__item[open] .p-faq__toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.p-faq__a { overflow: hidden; transition: height .3s var(--ease); }
.p-faq__a p {
  padding: 0 18px 18px;
  color: #595959;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
}
@media (min-width: 1024px) {
  .p-faq { padding: 87.2px 0 64px !important; }
  .p-faq .c-sec-head { margin-bottom: 31.8px; }
  .p-faq__q { gap: 13.5px; min-height: 0; padding: 22px 27px 22px 24px; }
  .p-faq__q-mark { width: 19.5px; font-size: 2.7rem; }
  .p-faq__q-text { font-size: 2rem; line-height: 44px; }
  .p-faq__toggle { width: 19.8px; height: 17px; }
  /* 回答は質問に10px近づける。パネル自体を上げる（pを上げると overflow:hidden で文字が切れる） */
  .p-faq__item[open] .p-faq__a { margin-top: -10px; }
  .p-faq__a p { padding: 0 24px 23px; font-size: 1.6rem; line-height: 24px; }
}

/* =========================================================
   MESSAGE ＋ COMPANY（Figma「10」緑ブロック y8279〜10050）
   上端55pxはFAQの角丸キャップが被さる
   ========================================================= */
.p-greet {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #0a9d58;
  color: #fff;
}
.p-greet__circle { position: absolute; border-radius: 50%; pointer-events: none; }
.p-greet__circle--tl { left: -128px; top: 80px; width: 384px; height: 384px; background: rgba(255, 255, 255, .05); }
.p-greet__circle--br { left: calc(50% + 380px); bottom: 0; width: 500px; height: 500px; background: rgba(8, 122, 69, .3); }
.p-greet__house { position: absolute; pointer-events: none; display: none; }
.p-greet__house--l { left: -30px; top: auto; }
.p-greet__house--r { right: -40px; bottom: 40px; }

/* ---- 代表メッセージ ---- */
.p-message { position: relative; padding: 96px 16px 48px !important; background: transparent !important; }
.p-message__inner { display: grid; gap: 32px; max-width: 1135.4px; margin-inline: auto; }
.p-message__photo { position: relative; width: min(100%, 300px); margin-inline: auto; }
.p-message__photo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;          /* 写真を丸く切り抜く */
  background: #e4ece8;       /* 読み込み中の下地 */
}
.p-message__photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-message__name {
  position: absolute;
  left: 66.7%;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  /* 写真の上に重なるので白文字。背景の明るさに左右されないよう薄い影を添える */
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 30, 15, .45);
  font-weight: 700;
  white-space: nowrap;
}
.p-message__role { font-size: 1.4rem; line-height: 20px; letter-spacing: .11em; }
.p-message__ruby { margin-top: 8px; font-size: 1.1rem; line-height: 14px; letter-spacing: .5em; }
.p-message__fullname { margin-top: 2px; font-size: 2.2rem; line-height: 26px; }

.p-message__en {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .1em;
}
.p-message__en::before { content: ""; width: 28px; height: 3px; background: #fbce53; }
.p-message__title { margin-top: 14px; color: #fff; font-size: 2.2rem; font-weight: 700; line-height: 1.45; }
.p-message__p { margin-top: 20px; color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 33px; }
.p-message__p--alt { font-size: 1.6rem; line-height: 24px; }
.p-message__head + .p-message__p { margin-top: 24px; }
.p-message__box {
  margin-top: 28px;
  padding: 20px 20px 22px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  background: rgba(255, 255, 255, .1);
}
.p-message__box p { color: #fff; font-size: 1.4rem; font-weight: 400; line-height: 30px; }
.p-message__box strong { color: #f3f4f6; font-weight: 700; }
.p-message__box-strong { margin-top: 12px; color: #fbce53 !important; font-size: 1.6rem !important; font-weight: 700 !important; line-height: 24px !important; }
.p-message__closing { margin-top: 26px; color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 30px; }

/* ---- 事業概要 ---- */
.p-company { position: relative; padding: 48px 16px 96px !important; background: transparent !important; }
.p-company .c-sec-head { margin-bottom: 32px; }
.p-company .c-sec-head__en { color: #fff; }
.p-company__list {
  max-width: 896px;
  margin-inline: auto;
  padding: 24px 20px 28px;
  border: 1px solid #f0fdf4;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 50, 25, .18);
}
.p-company__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 2px solid #e3ebe7;
}
.p-company__row:last-child { border-bottom-width: 2px; }
.p-company__row dt { color: #0a9d58; font-size: 1.5rem; font-weight: 700; line-height: 24px; }
.p-company__row dd { color: #24352d; font-size: 1.4rem; font-weight: 400; line-height: 22px; }

@media (min-width: 600px) {
  .p-company__row { grid-template-columns: 30% 1fr; align-items: center; gap: 0; }
}

/* SP：右の円装飾は画面外に出てしまうので、右端基準に縮小して見えるようにする */
@media (max-width: 1023px) {
  .p-intro__circle--r {
    left: auto;
    right: -120px;
    top: 60px;
    width: 300px;
    height: 300px;
  }
  .p-greet__circle--br {
    left: auto;
    right: -110px;
    top: auto;
    bottom: 48px;
    width: 280px;
    height: 280px;
  }
}

/* ---- PC：デザイン実寸 ---- */
@media (min-width: 1024px) {
  .p-greet__circle--tl { left: -127.9px; top: 80px; }
  .p-greet__circle--br { left: calc(50% + 380px); top: 1271.2px; bottom: auto; }
  .p-greet__house { display: block; width: 286px; height: 216px; }
  .p-greet__house--l { left: calc(50% - 642px); top: 872.5px; }
  .p-greet__house--r { right: auto; left: calc(50% + 373.9px); top: 1471.5px; bottom: auto; }

  .p-message { padding: 132.6px 0 0 !important; }
  .p-message__inner {
    grid-template-columns: 454px 575.4px;
    column-gap: 105.6px;
    align-items: start;
    max-width: none;
    width: 1135.4px;
    margin: 0 0 0 calc(50% - 555px);
  }
  .p-message__photo { width: 454px; margin: 202.1px 0 0; }
  .p-message__photo-frame { width: 454px; height: 454px; aspect-ratio: auto; font-size: 1.8rem; }
  .p-message__name { left: 303px; top: 345.8px; bottom: auto; }
  .p-message__role { font-size: 1.6rem; line-height: 24px; }
  .p-message__ruby { margin-top: 14.3px; font-size: 1.28rem; line-height: 16px; letter-spacing: .5em; }
  .p-message__fullname { margin-top: 2px; font-size: 2.88rem; line-height: 32px; letter-spacing: 0; }

  .p-message__title { margin-top: 14.9px; font-size: 3.6rem; line-height: 40px; }
  .p-message__head + .p-message__p { margin-top: 28.5px; }
  .p-message__p { margin-top: 20px; }
  .p-message__p--alt { margin-top: 19.1px; }
  .p-message__p--alt + .p-message__p { margin-top: 20.9px; }
  .p-message__box { margin-top: 31.2px; height: 146.8px; padding: 23.9px 24px 0; }
  .p-message__box-strong { margin-top: 11.8px; }
  .p-message__closing { margin-top: 27.4px; font-size: 2rem; }

  .p-company { padding: 91px 0 119.8px !important; }
  .p-company .c-sec-head { margin-bottom: 48.9px; }
  .p-company__list { height: 632px; padding: 39.3px 41px 0; }
  .p-company__row {
    grid-template-columns: 244.2px 1fr;
    height: 55px;
    padding: 0;
  }
  .p-company__row dt { padding: 1.4px 0 0 10px; font-size: 1.6rem; }
  .p-company__row dd { padding-left: 10px; font-size: 1.4rem; letter-spacing: -.01em; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-message__inner { grid-template-columns: 360px 1fr; column-gap: 48px; width: auto; margin: 0 20px; }
  .p-message__photo { width: 360px; }
  .p-message__photo-frame { width: 360px; height: 360px; }
  .p-message__name { left: 220px; top: 270px; }
  .p-message__box { height: auto; padding-bottom: 22px; }
}

/* =========================================================
   NEWS（お知らせ）Figma y10049〜10975：クリーム地・上端直線
   下部の村イラスト（透過PNG）は下のCTA帯に24px重なる
   ========================================================= */
.p-news {
  position: relative;
  z-index: 2;
  background: #fff9f1;
  padding: 56px 16px 180px !important;
}
.p-news::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  aspect-ratio: 1440 / 448;
  background: url('../img/top/news-village.png?v=3') center bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
.p-news__inner { position: relative; z-index: 1; display: grid; gap: 20px; max-width: 1160px; margin-inline: auto; padding-inline: 0; }
.p-news__head { margin-bottom: 0; }
.p-news__list { display: grid; }
.p-news .c-news-card__link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e4ece8;
  color: #24352d;
}
.p-news .c-news-card__thumb { aspect-ratio: 185 / 115; border-radius: 8px; background: #d9d9d9; }
.p-news .c-news-card__thumb--noimg { background: #fff; }
.p-news .c-news-card__meta { gap: 12px; margin: 0; }
.p-news .c-news-card__date { color: #0a9d58; font-size: 1.4rem; font-weight: 700; }
.p-news .c-tag { height: 22px; padding: 0 9px; border-radius: 9999px; background: #e7f7ef; color: #087a45; font-size: 1.2rem; font-weight: 700; line-height: 22px; }
.p-news .c-news-card__title { margin-top: 4px; font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.p-news__more { margin-top: 10px; text-align: center; }
.p-news__btn {
  width: auto;
  height: 54px;
  padding: 0 24px;
  border: 1px solid #0a9d58;
  background: #fff;
  color: #0a9d58;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(10, 157, 88, .18);
}
.p-news__btn .c-icon { width: 12px; height: 12px; }
.p-news__empty { color: #6b7280; }

@media (min-width: 1024px) {
  .p-news { height: 926px; padding: 91.5px 0 0 !important; }
  .p-news__inner { grid-template-columns: 344px 816px; gap: 0; }
  .p-news__body { padding-top: 12.5px; }
  .p-news .c-news-card__link {
    grid-template-columns: 185px 1fr;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 19px;
  }
  .p-news .c-news-card__thumb { width: 185px; height: 115px; aspect-ratio: auto; }
  .p-news .c-news-card__body { display: flex; align-items: center; gap: 13.6px; }
  .p-news .c-news-card__meta { gap: 25.6px; }
  .p-news .c-news-card__date { font-size: 1.8rem; line-height: 1; }
  .p-news .c-tag { height: 22.3px; padding: 0 9.5px; font-size: 1.6rem; line-height: 22.3px; }
  .p-news .c-news-card__title { margin: 0; font-size: 1.9rem; line-height: 1.4; }
  .p-news__more { margin-top: 7px; text-align: left; }
  .p-news__btn { width: 197px; padding: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-news { height: auto; padding: 91.5px 20px 300px !important; }
  .p-news__inner { grid-template-columns: 240px 1fr; }
}