@charset "utf-8";
/*
 * ======================================
 * TOPページ固有CSS（日越産業株式会社）
 * 値の出どころ：claude-design-output/index.php
 * ======================================
 */

/* --------------------------------------------------------------------------
 * メインビュー
 * -------------------------------------------------------------------------- */
.ngs-mv {
  background: var(--ngs-blue);
  padding: 30px 18px 18px;
  margin-top: -92px;
}
.ngs-mv__stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 215px);
  border-radius: 32px;
  background: linear-gradient(180deg, #9FD8F5 0%, #CFEAFA 62%, #EAF5FC 100%);
}
.ngs-mv__town {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 62%;
  object-fit: cover;
  object-position: bottom;
  opacity: .45;
}
.ngs-mv__person {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  height: 88%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  object-position: left bottom;
}
.ngs-mv__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 112px var(--ngs-inner-pad) 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ngs-mv__badge {
  display: inline-block;
  margin-bottom: clamp(1rem, 2.2vh, 2.2rem);
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--ngs-blue);
  color: #fff;
  font-size: clamp(1.2rem, 1.6vh, 1.4rem);
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(10, 78, 122, .35);
}
.ngs-mv__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: clamp(4.8rem, 9.4vw, 13.2rem);
  font-weight: 700;
  line-height: 1.16;
  -webkit-text-stroke: 10px #fff;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(13, 113, 191, .18);
}
/* .ngs-mv__inner / .ngs-mv__title は縦並び＋中央寄せのため、文字の要素は
   横幅いっぱいに広げて中央そろえは text-align で行う（中身から幅を計算させない） */
.ngs-mv__title,
.ngs-mv__title-lead,
.ngs-mv__title-main,
.ngs-mv__title-name { align-self: stretch; }
.ngs-mv__title-lead {
  font-size: .48em;
  color: var(--ngs-blue-dark);
  letter-spacing: .02em;
}
.ngs-mv__title-main {
  font-size: 1em;
  color: var(--ngs-blue);
  letter-spacing: .01em;
}
.ngs-mv__title-accent { color: var(--ngs-orange); }
.ngs-mv__title-name {
  margin-top: 4px;
  font-size: .45em;
  color: var(--ngs-blue-dark);
}
.ngs-mv__lead {
  margin: clamp(.8rem, 1.6vh, 1.8rem) 0 0;
  width: 100%;
  max-width: 680px;
  font-size: clamp(1.3rem, 1.6vh, 1.7rem);
  line-height: 1.8;
  font-weight: 700;
  color: var(--ngs-txt);
  text-shadow: 0 2px 0 #fff, 0 0 8px #fff;
}

@media (max-width: 1100px) {
  .ngs-mv { margin-top: -80px; padding: 22px 14px 14px; }
  .ngs-mv__stage { min-height: calc(100vh - 170px); justify-content: flex-start; }
  .ngs-mv__inner { padding: 130px var(--ngs-inner-pad) 70px; }
}
@media (max-height: 820px) {
  .ngs-mv__inner { padding-top: 110px; padding-bottom: 40px; }
  .ngs-mv__title { font-size: clamp(4rem, 7.2vw, 8.4rem); }
  .ngs-mv__lead { font-size: 1.4rem; margin-top: 10px; }
  .ngs-mv__badge { margin-bottom: 10px; font-size: 1.2rem; padding: 7px 16px; }
}
/* SP：MVを画面いっぱい（100vh）にし、
   キャッチコピーを上半分・人物を下半分に分けて重ならないようにする。
   inner の padding-bottom（人物の高さ＋余白）で下側の領域を確保するため、
   コピーが伸びても人物に被らない。 */
@media (max-width: 639px) {
  .ngs-mv {
    padding: 22px 14px 14px;
  }
  .ngs-mv__stage {
    min-height: calc(100vh - 36px);
    justify-content: flex-start;
  }
  .ngs-mv__inner {
    padding: 88px 20px 40vh;
  }
  .ngs-mv__title {
    -webkit-text-stroke-width: 6px;
  }
  /* 幅375px前後でも「片付け・処分は／スピード対応」の2行に収まるよう、画面幅に応じて縮める */
  .ngs-mv__title-main {
    font-size: min(1em, 11vw);
  }
  .ngs-mv__person {
    left: 50%;
    transform: translateX(-50%);
    height: 38vh;
    width: auto;
    max-width: 78%;
    object-position: bottom center;
  }
  .ngs-mv__town {
    max-height: 34%;
  }
}
/* 縦に余裕のない端末では上下の余白と人物をさらに詰める */
@media (max-width: 639px) and (max-height: 700px) {
  .ngs-mv__inner { padding: 80px 20px 38vh; }
  .ngs-mv__person { height: 36vh; }
}

/* --------------------------------------------------------------------------
 * 4つのポイント（ブルー帯）
 * -------------------------------------------------------------------------- */
.ngs-point { background: var(--ngs-blue); }
.ngs-point__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px 24px;
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 56px var(--ngs-inner-pad);
}
.ngs-point__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* 縦並び＋中央寄せの中の文字は横幅いっぱいに広げる（中身から幅を計算させない） */
.ngs-point__en,
.ngs-point__title,
.ngs-point__text { align-self: stretch; }
.ngs-point__en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  letter-spacing: .2em;
  color: var(--ngs-pale-blue);
}
.ngs-point__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #fff;
}
.ngs-point__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ngs-point__title {
  color: #fff;
  font-size: 2.3rem;
}
.ngs-point__text {
  color: var(--ngs-pale-blue2);
  font-size: 1.5rem;
  line-height: 1.6;
}
@media (max-width: 639px) {
  .ngs-point__inner { padding: 44px var(--ngs-inner-pad); gap: 24px; }
  .ngs-point__icon { width: 104px; height: 104px; }
  .ngs-point__title { font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
 * こんなお悩みありませんか？
 * -------------------------------------------------------------------------- */
.ngs-worry {
  position: relative;
  overflow: hidden;
  padding: 72px 0 90px;
  background: var(--ngs-bg-light);
  background-image: radial-gradient(var(--ngs-line2) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}
.ngs-worry__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-worry__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
  align-items: start;
}
.ngs-worry__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 0 var(--ngs-shadow-blue);
}
.ngs-worry__card--offset { margin-top: 14px; }
.ngs-worry__icon {
  flex: 0 0 auto;
  width: 40px;
  font-size: 3.4rem;
  line-height: 1;
  text-align: center;
  color: #7FBEE8;
}
.ngs-worry__text {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--ngs-blue-dark);
}
.ngs-worry__card::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.ngs-worry__card--tail-bottom-left::after {
  left: 44px;
  bottom: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid #fff;
}
.ngs-worry__card--tail-bottom-center::after {
  left: 50%;
  bottom: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid #fff;
}
.ngs-worry__card--tail-bottom-right::after {
  right: 44px;
  bottom: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid #fff;
}
.ngs-worry__card--tail-right::after {
  right: -13px;
  top: 50%;
  margin-top: -12px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 15px solid #fff;
}
.ngs-worry__card--tail-left::after {
  left: -13px;
  top: 50%;
  margin-top: -12px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 15px solid #fff;
}
.ngs-worry__person {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ngs-worry__person img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}
.ngs-worry__answer {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) minmax(120px, 240px);
  gap: 16px;
  align-items: center;
  margin-top: 34px;
  padding: 16px 24px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 8px 0 var(--ngs-shadow-blue);
}
.ngs-worry__answer-img {
  width: 100%;
  height: auto;
  display: block;
}
.ngs-worry__answer-body {
  text-align: center;
  padding: 12px 0;
}
.ngs-worry__answer-badge {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 999px;
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt);
  font-size: 1.5rem;
  font-weight: 700;
}
.ngs-worry__answer-title {
  margin: 14px 0 0;
  font-size: clamp(2rem, 2.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ngs-blue-dark);
}

@media (max-width: 900px) {
  .ngs-worry__grid { grid-template-columns: minmax(0, 1fr); }
  .ngs-worry__person { order: -1; }
  .ngs-worry__answer { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ngs-worry__answer-img { max-width: 220px; margin: 0 auto; }
  .ngs-worry__card--offset { margin-top: 0; }
  /* 1カラムになると吹き出しの三角は向き先を失うため、
     三角を消してシンプルなボックスとして見せる */
  .ngs-worry__card::after { display: none; }
}

/* --------------------------------------------------------------------------
 * 選ばれる3つの理由
 * -------------------------------------------------------------------------- */
.ngs-reason {
  position: relative;
  overflow: hidden;
  padding: 76px 0 86px;
  background: #fff url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28494/bg-01.png") no-repeat center top;
  background-size: 100% 100%;
}
.ngs-reason__inner {
  position: relative;
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-reason__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.ngs-reason__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 0 var(--ngs-line2);
}
.ngs-reason__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ngs-reason__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ngs-blue);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
}
.ngs-reason__title {
  display: block;
  margin-bottom: 8px;
  font-size: 2rem;
  color: var(--ngs-blue-dark);
}
.ngs-reason__text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}
.ngs-reason__img {
  display: block;
  margin-top: auto;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ngs-reason__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* SP：番号の横に本文まで並べると本文の幅が狭く読みにくいため、
   「番号＋見出し」を1行目に並べ、本文はカード幅いっぱいに下へ回す */
@media (max-width: 639px) {
  .ngs-reason__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }
  .ngs-reason__head > div { display: contents; }
  .ngs-reason__num { width: 52px; height: 52px; font-size: 2.4rem; }
  /* 見出しは1行に収める。最長の「分別・搬出もすべてお任せ」（12文字）が
     画面幅から余白・番号を引いた幅（約170px減）に収まるよう、画面幅に合わせて縮める */
  .ngs-reason__title {
    margin-bottom: 0;
    font-size: min(1.8rem, calc((100vw - 172px) / 12));
    white-space: nowrap;
  }
  /* 本文は意味の切れ目の <br>（.ngs-br-sp）で3行に収める。カードの左右余白を詰め、
     最長行（21文字）がカード内の幅（画面幅−84px）に収まるよう文字サイズを縮める */
  .ngs-reason__card { padding: 24px 18px; }
  .ngs-reason__text {
    grid-column: 1 / -1;
    font-size: min(1.4rem, calc((100vw - 88px) / 21.3));
  }
}

/* --------------------------------------------------------------------------
 * サービス案内
 * -------------------------------------------------------------------------- */
.ngs-service {
  padding: 80px 0;
  background: #fff;
}
.ngs-service__inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-service__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}
.ngs-service__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 28px;
  border: 3px solid var(--ngs-line2);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 0 var(--ngs-line2);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ngs-service__card:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--ngs-line2);
  border-color: var(--ngs-blue);
}
.ngs-service__card--sub {
  border-color: #FFD9A8;
  box-shadow: 0 6px 0 #FFD9A8;
}
.ngs-service__card--sub:hover {
  box-shadow: 0 10px 0 #FFD9A8;
  border-color: var(--ngs-orange);
}
.ngs-service__img {
  position: relative;
  display: block;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
}
.ngs-service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngs-service__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
}
.ngs-service__tag--base { background: var(--ngs-blue); }
.ngs-service__tag--accent { background: var(--ngs-orange); }
.ngs-service__title {
  padding: 0 12px;
  font-size: 2.2rem;
  color: var(--ngs-blue-dark);
}
.ngs-service__text {
  padding: 0 12px;
  font-size: 1.5rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}
/* SP：説明文は意味の切れ目の <br>（.ngs-br-sp）で3行に収める。
   最長行（約18文字）がカード内の幅（画面幅−約110px）に収まるよう文字サイズを縮める */
@media (max-width: 639px) {
  .ngs-service__text { font-size: min(1.5rem, calc((100vw - 112px) / 18.2)); }
}
.ngs-service__more {
  margin: auto 12px 0;
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt);
  font-size: 1.4rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
 * 対応エリア
 * -------------------------------------------------------------------------- */
.ngs-area {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: #fff;
}
.ngs-area__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: .45;
}
.ngs-area__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-area__body {
  flex: 1 1 420px;
  min-width: 0;
}
.ngs-area__title {
  margin: 20px 0;
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ngs-blue-dark);
}
.ngs-area__text {
  margin: 0 0 24px;
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 500;
  color: var(--ngs-txt-mute);
}
.ngs-area__box {
  max-width: 480px;
  padding: 20px 26px;
  border: 2px solid var(--ngs-line2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 0 var(--ngs-shadow-blue);
}
.ngs-area__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ngs-area__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ngs-blue);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.ngs-area__icon {
  flex: 0 0 auto;
  width: 16px;
  font-size: 1.5rem;
  text-align: center;
  color: #7FBEE8;
}
.ngs-area__note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--ngs-line2);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ngs-blue);
  text-align: right;
}
.ngs-area__map {
  flex: 0 1 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ngs-area__map img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
 * ご依頼の流れ
 * -------------------------------------------------------------------------- */
.ngs-flow {
  padding: 80px 0;
  background: var(--ngs-bg-light2);
}
.ngs-flow__inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-flow__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
}
.ngs-flow__card {
  position: relative;
  flex: 1 1 280px;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 34px 26px 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-flow__step {
  position: absolute;
  left: 18px;
  top: -16px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--ngs-blue);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.9rem;
  letter-spacing: .1em;
}
.ngs-flow__icon {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}
.ngs-flow__title {
  display: block;
  margin-bottom: 8px;
  font-size: 2.2rem;
  color: var(--ngs-blue-dark);
}
.ngs-flow__text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}
.ngs-flow__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.ngs-flow__arrow::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid var(--ngs-blue);
}
/* タブレット以下：カードと矢印を縦一列に並べる。
   flex-wrap のままだと「カード＋矢印」が同じ行に収まってしまい読みにくいため、
   flex-direction: column に切り替えて矢印を下向き・中央配置にする */
@media (max-width: 896px) {
  .ngs-flow__list {
    flex-direction: column;
    align-items: stretch;
  }
  .ngs-flow__card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .ngs-flow__arrow {
    justify-content: center;
  }
  .ngs-flow__arrow::before {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 18px solid var(--ngs-blue);
    border-bottom: 0;
  }
}
/* SP：アイコンの横に本文まで並べると本文の幅が狭く読みにくいため、
   「アイコン＋見出し」を1行目に並べ、本文はカード幅いっぱいに下へ回す */
@media (max-width: 639px) {
  .ngs-flow__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    padding: 34px 22px 24px;
  }
  .ngs-flow__card > div { display: contents; }
  .ngs-flow__icon { width: 60px; height: 60px; }
  .ngs-flow__title { margin-bottom: 0; }
  .ngs-flow__text { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
 * お知らせ
 * -------------------------------------------------------------------------- */
.ngs-news {
  padding: 80px 0;
  background: #fff;
}
.ngs-news__inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ngs-news__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(2.6rem, 3.4vw, 4rem);
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-news__title-en {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--ngs-bg-light);
  color: #7FA8C4;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  letter-spacing: .16em;
}
.ngs-news__more {
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ngs-bg-light);
  color: var(--ngs-blue-dark);
  font-size: 1.4rem;
  font-weight: 700;
  transition: background .3s ease;
}
.ngs-news__more:hover {
  background: #CFEAFA;
  color: var(--ngs-blue-dark);
  opacity: 1;
}
.ngs-news__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ngs-news__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--ngs-bg-pale);
  box-shadow: 0 4px 0 var(--ngs-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ngs-news__item:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--ngs-line2);
}
.ngs-news__date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  letter-spacing: .06em;
  color: var(--ngs-txt-mute);
}
.ngs-news__label {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ngs-txt);
}

/* --------------------------------------------------------------------------
 * リサイクル商品を見る
 * -------------------------------------------------------------------------- */
.ngs-shop {
  padding: 0 0 80px;
  background: #fff;
}
.ngs-shop__inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}
.ngs-shop__box {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  padding: 36px 40px;
  border-radius: 32px;
  background: var(--ngs-sub);
  box-shadow: 0 8px 0 var(--ngs-sub-shadow);
}
.ngs-shop__visual {
  position: relative;
  flex: 1 1 300px;
  min-width: 260px;
  padding-top: 18px;
}
.ngs-shop__balloon {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #29ABE2;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  transform: rotate(-6deg);
}
.ngs-shop__balloon::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -12px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #29ABE2;
}
.ngs-shop__visual img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}
.ngs-shop__body {
  flex: 1 1 320px;
  min-width: 280px;
}
.ngs-shop__title {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  font-weight: 700;
  color: #3E2A02;
}
.ngs-shop__text {
  margin: 0 0 26px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-sub-txt2);
}

@media (max-width: 639px) {
  .ngs-worry { padding: 48px 0 60px; }
  /* SPはセクションが縦長になり背景の 100% 100% 指定だと縦に引き伸ばされるため、比率を保ったまま全面を覆う */
  .ngs-reason { padding: 50px 0 56px; background-size: cover; background-position: center center; }
  .ngs-service,
  .ngs-area,
  .ngs-flow,
  .ngs-news { padding: 50px 0; }
  .ngs-shop { padding: 0 0 50px; }
  .ngs-shop__box { padding: 28px 22px; }
  /* お悩みカードの各行（例：不要になった家具を処分したい）が折り返さず2行に収まるよう余白と文字を詰める */
  .ngs-worry__card { padding: 20px 18px; }
  .ngs-worry__text { font-size: 1.5rem; }
}
/* 幅375px以下：ショップ枠の最小幅が画面幅を超えて横はみ出しするため外す */
@media (max-width: 375px) {
  .ngs-shop__visual,
  .ngs-shop__body { min-width: 0; }
}