@charset "utf-8";
/* ==========================================================================
   日本不用品回収サービス｜リデザイン用スタイル
   既存のHTML構造・JavaScript（アコーディオン、タブ、エリア地図、カルーセル）は
   一切変更せず、見た目だけを上書きする。既存CSSより後に読み込むこと。
   ========================================================================== */

:root {
  /* ---- フォント ---- */
  --sys-font-primary: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "メイリオ", meiryo, ui-sans-serif, system-ui, sans-serif;

  /* ---- メインカラー（緑） ---- */
  --sys-color-green-base: #2bb028;
  --sys-color-green-50: #f2fcf1;
  --sys-color-green-200: #c0f4be;
  --sys-color-green-400: #56d652;
  --sys-color-green-500: #2bb028;
  --sys-color-green-600: #21891f;
  --sys-color-green-700: #1d7a1b;
  --sys-color-green-primary: #2bb028;
  --sys-color-green-tint-50: #f2fcf1;
  --sys-color-green-tint-100: #dffade;
  --sys-color-green-shade-700: #1d7a1b;
  --sys-color-theme-accent: #2bb028;

  /* ---- 差し色 ---- */
  --sys-color-blue-base: #2391ed;
  --sys-color-blue-50: #effaff;
  --sys-color-blue-400: #5ecafc;
  --sys-color-blue-600: #2391ed;
  --sys-color-blue-800: #025bb8;
  --sys-color-blue-tint-50: #effaff;
  --sys-color-blue-tint-100: #dbf2fe;

  --sys-color-red-500: #fb5038;
  --sys-color-red-600: #e02f16;
  --sys-color-red-tint-50: #fff3f1;
  --sys-color-red-tint-100: #ffe4e0;
  --sys-color-red-vivid: #fb5038;
  --sys-color-red-shade-700: #a22412;

  --sys-color-orange-100: #ffedd5;
  --sys-color-orange-400: #fc933b;
  --sys-color-orange-tint-50: #fff7ed;
  --sys-color-orange-vivid: #fc933b;
  --sys-color-orange-shade-700: #c3420b;
  --sys-color-accent-amber: #fa791e;

  --sys-color-sand-50: #f9f7f3;
  --sys-color-sand-100: #f4f2ea;
  --sys-color-sand-200: #e1dbc7;
  --sys-color-sand-500: #ab9164;
  --sys-color-sand-700: #83684b;
  --sys-color-accent-lime: #93d014;

  /* ---- サーフェス／文字 ---- */
  --sys-color-base-white: #fff;
  --sys-color-base-black: #212121;
  --sys-color-surface-main: #fff;
  --sys-color-surface-warm: #f4f2ea;
  --sys-color-surface-neutral: #f5f5f5;
  --sys-color-surface-success: #dffade;
  --sys-color-surface-warning: #fff7ed;
  --sys-color-surface-info: #effaff;
  --sys-color-surface-danger: #ffe4e0;

  --sys-color-content-main: #000000de;
  --sys-color-content-secondary: #0000008a;
  --sys-color-content-tertiary: #00000061;
  --sys-color-content-divider: #0000002e;
  --sys-color-line-separator: #0000002e;

  --sys-color-gray-100: #f5f5f5;
  --sys-color-gray-200: #eee;
  --sys-color-gray-300: #dbdbdb;
  --sys-color-gray-500: #9e9e9e;
  --sys-color-gray-600: #757575;
  --sys-color-gray-700: #616161;
  --sys-color-gray-900: #212121;

  /* ---- 角丸・影・余白 ---- */
  --sys-corner-sm: 4px;
  --sys-corner-md: 8px;
  --sys-corner-lg: 16px;
  --sys-corner-xl: 24px;
  --sys-corner-circle: 9999px;

  --sys-shadow-medium: 0 3px 3px #0000001f;
  --nfc-shadow-card: 0 2px 10px rgba(0, 0, 0, .06);
  --nfc-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .1);

  --sys-space-xs: .5rem;
  --sys-space-sm: 1rem;
  --sys-space-lg: 1.5rem;
  --sys-space-xl: 2rem;
  --sys-space-2xl: 3rem;
  --sys-space-3xl: 4rem;

  --sys-motion-duration-default: .15s;
  --sys-motion-easing-default: cubic-bezier(.4, 0, .2, 1);

  /* ---- タイポ ---- */
  --sys-typography-h1-size: 2rem;
  --sys-typography-h2-size: 1.688rem;
  --sys-typography-h3-size: 1.5rem;
  --sys-typography-h4-size: 1.313rem;
  --sys-line-height-relaxed: 1.8;
}

/* ==========================================================================
   1. ベース
   ========================================================================== */
body {
  font-family: var(--sys-font-primary);
  color: var(--sys-color-content-main);
  line-height: var(--sys-line-height-relaxed);
  background-color: var(--sys-color-base-white);
}

/* 既存テーマの帯色をトーンに合わせて置き換える */
.full-width.full-width.back-yellow { background-color: var(--sys-color-sand-50) !important; }
.full-width.full-width.back-green { background-color: var(--sys-color-green-50) !important; }

/* ==========================================================================
   2. 見出し
   参考デザインに合わせて、中央寄せ＋下に短いバーを敷く形に統一する
   ========================================================================== */
.sub_head_jp.sub_head_jp,
.main_heading_jp.main_heading_jp,
.flow-titles.flow-titles,
.item-h1.item-h1,
.top-main-heading.top-main-heading,
.price_text.price_text,
.yasukusoku_text.yasukusoku_text,
.right_model_text.right_model_text,
.fixed_charge_word.fixed_charge_word,
.instantly_text.instantly_text,
.cleaning_text.cleaning_text {
  position: relative;
  font-family: var(--sys-font-primary);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: var(--sys-color-gray-900);
  text-align: center;
}

.sub_head_jp.sub_head_jp,
.flow-titles.flow-titles,
.cleaning_text.cleaning_text {
  font-size: clamp(1.35rem, 3.4vw, var(--sys-typography-h2-size));
  padding: 0 0 1.1rem;
  margin: 0 auto;
}

.main_heading_jp.main_heading_jp,
.item-h1.item-h1 {
  font-size: clamp(1.45rem, 4vw, var(--sys-typography-h1-size));
  padding: 0 0 1.1rem;
}

/* 見出し下のアクセントバー */
.sub_head_jp.sub_head_jp::after,
.main_heading_jp.main_heading_jp::after,
.flow-titles.flow-titles::after,
.item-h1.item-h1::after,
.cleaning_text.cleaning_text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .35rem;
  width: 60px;
  height: 5px;
  border-radius: var(--sys-corner-sm);
  background: var(--sys-color-green-primary);
  transform: translateX(-50%);
}

/* 英字ラベル（VOICE / FLOW / EXAMPLE など） */
.sub_head_eng.sub_head_eng,
.main_heading_eng.main_heading_eng {
  display: block;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--sys-color-green-600);
  margin-bottom: .35rem;
}

/* 本文中のh2/h3（投稿本文） */
.post_content.post_content h2 {
  position: relative;
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--sys-color-gray-900);
  background: var(--sys-color-green-50);
  border-left: 6px solid var(--sys-color-green-primary);
  border-radius: 0 var(--sys-corner-md) var(--sys-corner-md) 0;
  padding: .85rem 1rem .85rem 1.1rem;
  margin: 3rem 0 1.4rem;
}

.post_content.post_content h3,
.post_content.post_content .ti02 {
  position: relative;
  font-size: clamp(1.1rem, 2.8vw, 1.313rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sys-color-gray-900);
  padding: 0 0 .55rem .9rem;
  margin: 2.2rem 0 1rem;
  border-bottom: 2px solid var(--sys-color-green-tint-100);
}

.post_content.post_content h3::before,
.post_content.post_content .ti02::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 5px;
  height: 1.05em;
  border-radius: var(--sys-corner-circle);
  background: var(--sys-color-green-primary);
}

.post_content.post_content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sys-color-green-700);
  margin: 1.6rem 0 .6rem;
}

.post_content.post_content p { margin-bottom: 1.1rem; }

/* ==========================================================================
   3. セクション用の情報ボックス（sng-box / box29）
   ========================================================================== */
.sng-box.sng-box.box29 {
  position: relative;
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-tint-100);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 2.1rem 1.4rem 1.4rem;
  margin: 2rem 0;
}

.sng-box.sng-box.box29 .box-title {
  position: absolute;
  top: -.9rem;
  left: 1.2rem;
  display: inline-block;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  padding: .5rem .9rem;
  border-radius: var(--sys-corner-circle);
  box-shadow: var(--sys-shadow-medium);
}

.sng-box.sng-box.box29 .box-content { padding: 0; }

.sng-box.sng-box.box29 .li-check ul { list-style: none; margin: 0; padding: 0; }

.sng-box.sng-box.box29 .li-check li {
  position: relative;
  padding: .5rem 0 .5rem 1.9rem;
  border-bottom: 1px dashed var(--sys-color-gray-300);
  line-height: 1.7;
}

.sng-box.sng-box.box29 .li-check li:last-child { border-bottom: 0; }

.sng-box.sng-box.box29 .li-check li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .55rem;
  color: var(--sys-color-green-primary);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* 注意喚起ボックス */
.memo.memo.alert.p-box.p-red {
  background: var(--sys-color-red-tint-50);
  border: 2px solid var(--sys-color-red-tint-100);
  border-radius: var(--sys-corner-lg);
  padding: 2.1rem 1.4rem 1.4rem;
  margin: 2rem 0;
  position: relative;
}

.memo.memo.alert.p-box.p-red .memo_ttl {
  position: absolute;
  top: -.9rem;
  left: 1.2rem;
  background: var(--sys-color-red-600);
  color: var(--sys-color-base-white);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  padding: .5rem .9rem;
  border-radius: var(--sys-corner-circle);
}

.memo.memo.alert.p-box.p-red ul { list-style: none; margin: 0; padding: 0; }

.memo.memo.alert.p-box.p-red li {
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  line-height: 1.7;
}

.memo.memo.alert.p-box.p-red li::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .45rem;
  color: var(--sys-color-red-500);
  font-size: .9rem;
}

/* ==========================================================================
   4. 表
   ========================================================================== */
.post_content.post_content table,
table.service_table.service_table,
table.fz26.fz26 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sys-corner-lg);
  overflow: hidden;
  box-shadow: var(--nfc-shadow-card);
  margin: 1.6rem 0 2rem;
  background: var(--sys-color-base-white);
  font-size: .95rem;
}

.post_content.post_content table th,
table.service_table.service_table th,
table.fz26.fz26 th {
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-weight: 700;
  text-align: center;
  padding: .85rem .7rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .35);
}

.post_content.post_content table th:last-child,
table.service_table.service_table th:last-child,
table.fz26.fz26 th:last-child { border-right: 0; }

.post_content.post_content table td,
table.service_table.service_table td,
table.fz26.fz26 td {
  padding: .85rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--sys-color-gray-200);
  border-right: 1px solid var(--sys-color-gray-200);
  vertical-align: middle;
  line-height: 1.65;
}

.post_content.post_content table td:last-child,
table.service_table.service_table td:last-child,
table.fz26.fz26 td:last-child { border-right: 0; }

.post_content.post_content table tr:nth-child(even) td,
table.service_table.service_table tr:nth-child(even) td,
table.fz26.fz26 tr:nth-child(even) td { background: var(--sys-color-green-50); }

/* 表の1列目を見出し的に */
.post_content.post_content table tr td:first-child { font-weight: 600; }

.symbol.symbol.single-cicrle { color: var(--sys-color-green-600); font-weight: 800; font-size: 1.15em; }
.symbol.symbol.batsu { color: var(--sys-color-gray-500); font-weight: 800; font-size: 1.15em; }

/* 横スクロール（スマホ） */
@media screen and (max-width: 767px) {
  .post_content.post_content table,
  table.service_table.service_table,
  table.fz26.fz26 { display: block; overflow-x: auto; white-space: nowrap; }
  .post_content.post_content table td,
  .post_content.post_content table th { white-space: normal; min-width: 7.5em; }
}

/* ==========================================================================
   5. 料金プランカード（画像1枚から差し替えたHTMLコンポーネント）
   ========================================================================== */
.junk-pricing.junk-pricing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 .5rem;
}

.junk-pricing__grid.junk-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .junk-pricing__grid.junk-pricing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .junk-pricing__grid.junk-pricing__grid { grid-template-columns: repeat(3, 1fr); }
}

.junk-card.junk-card {
  background-color: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--nfc-shadow-card);
  transition: transform var(--sys-motion-duration-default) var(--sys-motion-easing-default),
              box-shadow var(--sys-motion-duration-default) var(--sys-motion-easing-default);
}

.junk-card.junk-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nfc-shadow-card-hover);
}

.junk-card--recommended.junk-card--recommended { outline: 3px solid var(--sys-color-green-primary); outline-offset: -3px; }

.junk-card__badge.junk-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  width: 64px;
  height: 64px;
  background: var(--sys-color-green-700);
  border: 2px solid var(--sys-color-accent-lime);
  border-radius: 50%;
  color: var(--sys-color-base-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--sys-shadow-medium);
}

.junk-card__badge.junk-card__badge::before {
  content: "\2605";
  color: var(--sys-color-accent-lime);
  font-size: .7rem;
  margin-bottom: 1px;
}

.junk-card__image-box.junk-card__image-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--sys-color-gray-200);
  position: relative;
}

.junk-card__image.junk-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.junk-card__content.junk-card__content {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.junk-card__sub-text.junk-card__sub-text {
  font-size: .9rem;
  color: var(--sys-color-green-600);
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.5;
}

.junk-card__title.junk-card__title {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--sys-color-gray-900);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}

.junk-card__price-area.junk-card__price-area { margin-bottom: 20px; width: 100%; }

.junk-card__price-main.junk-card__price-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: var(--sys-color-red-600);
  font-weight: 900;
  line-height: 1;
}

.junk-card__price-number.junk-card__price-number { font-size: 2.2rem; letter-spacing: -.03em; }
.junk-card__price-unit.junk-card__price-unit { font-size: 1.2rem; }

.junk-card__price-sub.junk-card__price-sub {
  font-size: .85rem;
  color: var(--sys-color-gray-600);
  font-weight: 700;
  margin-top: 6px;
}

.junk-card__footer-tags.junk-card__footer-tags {
  background-color: var(--sys-color-gray-100);
  padding: 12px 10px;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.junk-tag.junk-tag {
  font-size: .75rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--sys-corner-circle);
  background-color: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}

.junk-tag--light.junk-tag--light {
  background-color: var(--sys-color-base-white);
  color: var(--sys-color-gray-600);
  border: 1px solid var(--sys-color-gray-300);
}

.junk-tag--truck.junk-tag--truck { background-color: var(--sys-color-green-700); color: var(--sys-color-base-white); }

.junk-tag--warn.junk-tag--warn {
  background-color: var(--sys-color-orange-100);
  color: var(--sys-color-orange-shade-700);
  font-size: .7rem;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  border-radius: var(--sys-corner-md);
}

/* 料金セクションの補足文 */
.free_estimation.free_estimation {
  max-width: 1100px;
  margin: 1.6rem auto 0;
  background: var(--sys-color-green-50);
  border-radius: var(--sys-corner-lg);
  padding: 1.2rem 1.3rem;
}

.free_estimation.free_estimation .free_estimation_text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.85;
}

.free_estimation.free_estimation .green { color: var(--sys-color-green-700); font-weight: 700; }

/* ==========================================================================
   6. お悩みカード（worries_box）
   ========================================================================== */
.worries_text.worries_text .worries_box {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 768px) {
  .worries_text.worries_text .worries_box { grid-template-columns: repeat(2, 1fr); }
}

.worries_text.worries_text li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sys-color-base-white);
  border: 0;
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.1rem 1.2rem;
  margin: 0;
}

.worries_text.worries_text li img {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 50%;
  background: var(--sys-color-green-50);
  object-fit: contain;
  margin: 0;
}

.worries_text.worries_text li p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.7;
  font-weight: 500;
  text-align: left;
}

.worries_text.worries_text li .mikan {
  color: var(--sys-color-red-600);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--sys-color-orange-100) 62%);
}

/* ==========================================================================
   7. ご利用の流れ（flow-contents）
   ========================================================================== */
.flow-contents.flow-contents { margin: 2rem auto 0; max-width: 900px; }

.flow-contents.flow-contents dt {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg) var(--sys-corner-lg) 0 0;
  padding: .85rem 1.1rem;
  margin-top: 1.6rem;
  border: 0;
}

.flow-contents.flow-contents dt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-color-base-white);
  color: var(--sys-color-green-700);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .02em;
  padding: .3rem .7rem;
  border-radius: var(--sys-corner-circle);
  flex: 0 0 auto;
}

.flow-contents.flow-contents dt .steptitle {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--sys-color-base-white);
}

.flow-contents.flow-contents dd {
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-tint-100);
  border-top: 0;
  border-radius: 0 0 var(--sys-corner-lg) var(--sys-corner-lg);
  padding: 1.3rem 1.2rem;
  margin: 0 0 .4rem;
}

.flow-contents.flow-contents dd p { margin-bottom: .8rem; line-height: 1.85; }
.flow-contents.flow-contents dd p:last-child { margin-bottom: 0; }
.flow-contents.flow-contents dd .color-mikan.strong { color: var(--sys-color-red-600); font-weight: 700; }
.flow-contents.flow-contents dd .step-arrow { text-align: center; margin: .8rem 0 0; }
.flow-contents.flow-contents dd .step-arrow img { opacity: .35; max-width: 260px; }
.flow-contents.flow-contents dd .flow-images { text-align: center; }

/* 縦タイムライン（本文中のtl） */
.tl.tl { margin: 1.6rem 0 2rem; }

.tl-content.tl-content.main-bdr {
  position: relative;
  background: var(--sys-color-base-white);
  border: 0;
  border-left: 3px solid var(--sys-color-green-tint-100);
  border-radius: 0;
  padding: 0 0 1.6rem 1.6rem;
  margin: 0 0 0 .7rem;
}

.tl-content.tl-content.main-bdr:last-child { border-left-color: transparent; padding-bottom: 0; }

.tl.tl .tl_label {
  display: inline-block;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .25rem .65rem;
  border-radius: var(--sys-corner-circle);
  margin-bottom: .45rem;
}

.tl.tl .tl_title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sys-color-gray-900);
  margin-bottom: .45rem;
}

.tl.tl .tl_main { font-size: .95rem; line-height: 1.8; color: var(--sys-color-content-main); }

.tl.tl .tl_marker.main-bdr.main-bc {
  position: absolute;
  left: -9px;
  top: .35rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sys-color-green-primary);
  border: 3px solid var(--sys-color-base-white);
  box-shadow: 0 0 0 2px var(--sys-color-green-tint-100);
}

/* ==========================================================================
   8. よくある質問
   ========================================================================== */
.qustion.qustion { max-width: 900px; margin: 0 auto; }

.shitsumon.shitsumon,
.shitsumon-area.shitsumon-area {
  background: var(--sys-color-base-white);
  border: 0;
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
}

.enquete_title.enquete_title {
  position: relative;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sys-color-gray-900);
  padding: 0 0 .7rem 3.1rem;
  margin: 0 0 .7rem;
  /* 既存テーマは :before をインライン配置する前提で負のインデントを掛けていた。
     バッジを絶対配置にしたので打ち消す */
  text-indent: 0;
  border-bottom: 1px dashed var(--sys-color-gray-300);
}

.enquete_title.enquete_title::before {
  position: absolute;
  left: 0;
  top: -.05rem;
  min-width: 2.5rem;
  height: 1.7rem;
  padding: 0 .5rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .02em;
  border-radius: var(--sys-corner-circle);
}

.enquete_txt.enquete_txt {
  position: relative;
  padding-left: 3.1rem;
  margin: 0;
  text-indent: 0;
  font-size: .95rem;
  line-height: 1.85;
}

.enquete_txt.enquete_txt::before {
  content: "A";
  position: absolute;
  left: 0;
  top: .1rem;
  min-width: 2.5rem;
  height: 1.7rem;
  padding: 0 .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-color-orange-vivid);
  color: var(--sys-color-base-white);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  border-radius: var(--sys-corner-circle);
}

/* FAQページのカテゴリ内リンク */
.shitsumon_catch.shitsumon_catch .list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}

.shitsumon_catch.shitsumon_catch .list li { list-style: none; }

.shitsumon_catch.shitsumon_catch .list a {
  display: inline-block;
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-tint-100);
  color: var(--sys-color-green-700);
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1rem;
  border-radius: var(--sys-corner-circle);
  text-decoration: none;
  transition: background var(--sys-motion-duration-default) var(--sys-motion-easing-default);
}

.shitsumon_catch.shitsumon_catch .list a:hover { background: var(--sys-color-green-50); }

/* ==========================================================================
   9. お客様の声
   ========================================================================== */
.voice-article.voice-article {
  background: var(--sys-color-base-white);
  border: 0;
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.4rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
}

.voice-box.voice-box { display: flex; gap: 1.2rem; align-items: flex-start; }

@media screen and (max-width: 767px) {
  .voice-box.voice-box { flex-direction: column; align-items: center; }
}

.voice-box.voice-box .img { flex: 0 0 132px; text-align: center; }

.voice-box.voice-box .img .customer-image {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sys-color-green-50);
  margin: 0 auto;
}

.voice-box.voice-box .body__name {
  display: block;
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sys-color-gray-700);
  text-align: center;
}

.voice-outline-list.voice-outline-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
}

.voice-outline-list.voice-outline-list .voice-list {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--sys-color-green-50);
  border-radius: var(--sys-corner-circle);
  padding: .28rem .8rem;
  font-size: .78rem;
  line-height: 1.6;
}

.voice-outline-list.voice-outline-list .voice-list-contents { color: var(--sys-color-gray-600); font-weight: 600; }
.voice-outline-list.voice-outline-list .voice-list-text { color: var(--sys-color-green-700); font-weight: 800; }
.voice-outline-list.voice-outline-list .fa-star { color: var(--sys-color-accent-amber); }

.voice-article.voice-article h3.voice-sentence,
.voice-article.voice-article h3.voice-sentence .voice-sentence {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--sys-color-gray-900);
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.voice-article.voice-article h3.voice-sentence::before { display: none; }

.voice-contents.voice-contents { font-size: .95rem; line-height: 1.85; margin: 0; }

.recycle-icons.recycle-icons { display: none; }

/* アンケート（questionnaire） */
.voicepaper.voicepaper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-top: 1.6rem;
}

.voicepaper.voicepaper article {
  background: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  overflow: hidden;
  padding-bottom: 1rem;
}

.voicepaper.voicepaper article figure { margin: 0; }
.voicepaper.voicepaper article figure img { width: 100%; height: auto; display: block; }
.voicepaper.voicepaper .ttl { font-weight: 700; font-size: .9rem; padding: .8rem 1rem 0; }
.voicepaper.voicepaper .date { font-size: .78rem; color: var(--sys-color-gray-500); padding: 0 1rem; margin: 0; }
.voicepaper.voicepaper .voice-contents { padding: .5rem 1rem 0; font-size: .88rem; }

/* ==========================================================================
   10. サービス紹介カード
   ========================================================================== */
.ihin-voice.ihin-voice .voice-article,
.fuyouhin.fuyouhin .voice-article { padding: 0; }

/* サービス紹介カードの画像だけ角丸の四角にする。
   お客様の声のアイコン（丸）に影響しないよう限定する */
.ihin-voice.ihin-voice .voice-box .customer-image,
.fuyouhin.fuyouhin .voice-box .customer-image,
.service_items.service_items .voice-box .customer-image {
  width: 100%;
  height: auto;
  border-radius: var(--sys-corner-md);
  object-fit: cover;
}

/* トップのサービスアコーディオン */
.accordion2.accordion2 {
  background: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  overflow: hidden;
  margin-bottom: 1rem;
}

.accordion2.accordion2 .ti03 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sys-color-green-50);
  color: var(--sys-color-green-700);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 1.05rem 1.2rem;
  margin: 0;
  cursor: pointer;
  border: 0;
  border-left: 6px solid var(--sys-color-green-primary);
}

.accordion2.accordion2 .ti03 .plus {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  border-radius: 50%;
  font-size: .8rem;
}

.accordion2.accordion2 .disposal_box { padding: 1.2rem; }
.accordion2.accordion2 .disposal_box p { margin: 0; line-height: 1.9; font-size: .97rem; }

/* ==========================================================================
   11. CTA
   ========================================================================== */
.cta-frame-width.cta-frame-width { max-width: 1000px; margin: 2.2rem auto; }

.cta__ct.cta__ct {
  background: linear-gradient(180deg, var(--sys-color-green-50) 0%, var(--sys-color-base-white) 100%);
  border: 2px solid var(--sys-color-green-tint-100);
  border-radius: var(--sys-corner-xl);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.6rem 1.2rem;
  text-align: center;
}

.cta-speed.cta-speed {
  font-size: clamp(1.02rem, 2.6vw, 1.25rem);
  font-weight: 800;
  color: var(--sys-color-gray-900);
  margin-bottom: .5rem;
  line-height: 1.55;
}

.cta-nowtime.cta-nowtime {
  display: inline-block;
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-primary);
  border-radius: var(--sys-corner-circle);
  color: var(--sys-color-green-700);
  font-weight: 700;
  font-size: .92rem;
  padding: .4rem 1.1rem;
  margin-bottom: .9rem;
  line-height: 1.6;
}

/* display は既存テーマのモバイル用 flex レイアウトを壊さないよう指定しない
   （block にすると ::after の装飾が数字の上に重なって読めなくなる） */
.cta__phone.cta__phone {
  font-size: clamp(1.5rem, 6.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  line-height: 1.15;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .cta__ct.cta__ct .cta__phone { color: var(--sys-color-red-600); }
}

.cta__time.cta__time {
  display: block;
  font-size: .85rem;
  color: var(--sys-color-gray-600);
  margin-bottom: 1rem;
  font-weight: 600;
}

.cta__btn.cta__btn {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

.cta__btn.cta__btn .left-btn,
.cta__btn.cta__btn .right-btn { flex: 1 1 260px; max-width: 340px; }

.btn--cubic.btn--cubic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .95rem 1.2rem;
  border-radius: var(--sys-corner-circle);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--sys-color-base-white);
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .13);
  transition: transform var(--sys-motion-duration-default) var(--sys-motion-easing-default),
              box-shadow var(--sys-motion-duration-default) var(--sys-motion-easing-default);
}

.btn--cubic.btn--cubic:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .13); color: var(--sys-color-base-white); }
.btn--orange.btn--orange { background: var(--sys-color-accent-amber); }
.btn--green.btn--green { background: #06c755; }

/* 汎用ボタン */
.btn.btn.btn-c,
.shiny-btn1.shiny-btn1,
.blue_button.blue_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-weight: 800;
  font-size: 1rem;
  padding: .9rem 2rem;
  border-radius: var(--sys-corner-circle);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--sys-color-green-700);
  transition: transform var(--sys-motion-duration-default) var(--sys-motion-easing-default),
              box-shadow var(--sys-motion-duration-default) var(--sys-motion-easing-default);
  border: 0;
}

.btn.btn.btn-c:hover,
.shiny-btn1.shiny-btn1:hover,
.blue_button.blue_button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--sys-color-green-700);
  color: var(--sys-color-base-white);
}

.btn-wrap.btn-wrap { text-align: center; margin: 1.8rem 0; }

/* ==========================================================================
   12. 品目タブ（JSはラジオボタン制御。構造は変えずに見た目のみ）
   ========================================================================== */
#disposal-item.tabs.tabs { max-width: 1000px; margin: 1.6rem auto 0; }

#disposal-item .tab_item.tab_item {
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-tint-100);
  border-radius: var(--sys-corner-circle);
  color: var(--sys-color-green-700);
  font-weight: 700;
  font-size: .95rem;
  line-height: 2.6;
  transition: background var(--sys-motion-duration-default) var(--sys-motion-easing-default);
}

#disposal-item input[type="radio"]:checked + .tab_item.tab_item {
  background: var(--sys-color-green-primary);
  border-color: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
}

#disposal-item .tab_content.tab_content {
  background: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.2rem;
}

#disposal-item .tab-check.tab-check {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#disposal-item .tab-check.tab-check li { list-style: none; margin: 0; }

#disposal-item .tab-check.tab-check li a,
#disposal-item .tab-check.tab-check li span {
  display: inline-block;
  background: var(--sys-color-green-50);
  border: 1px solid var(--sys-color-green-tint-100);
  border-radius: var(--sys-corner-circle);
  color: var(--sys-color-green-700);
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .85rem;
  text-decoration: none;
  line-height: 1.6;
}

#disposal-item .tab-check.tab-check li a:hover { background: var(--sys-color-green-tint-100); }

/* ==========================================================================
   13. 対応エリア（地図ナビ。JSの開閉は維持）
   ========================================================================== */
.area-map-nav.area-map-nav .alllist-area { list-style: none; margin: 0; padding: 0; }

.nfc-inner-chihou.nfc-inner-chihou { margin-bottom: .8rem; list-style: none; }

.chihou-outline.chihou-outline.nfc-areajs-outline {
  display: block;
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-weight: 800;
  font-size: .98rem;
  padding: .6rem 1rem;
  border-radius: var(--sys-corner-md);
  text-decoration: none;
}

.nfc-kens.nfc-kens { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nfc-kens.nfc-kens li { list-style: none; margin: 0; }

a.nfc-ken.nfc-ken {
  display: inline-block;
  background: var(--sys-color-base-white);
  border: 2px solid var(--sys-color-green-tint-100);
  border-radius: var(--sys-corner-circle);
  color: var(--sys-color-green-700);
  font-weight: 700;
  font-size: .9rem;
  padding: .4rem 1rem;
  text-decoration: none;
  transition: background var(--sys-motion-duration-default) var(--sys-motion-easing-default);
}

a.nfc-ken.nfc-ken:hover { background: var(--sys-color-green-50); color: var(--sys-color-green-700); }

/* ==========================================================================
   14. 事例（beforeafter）
   ========================================================================== */
.zisseki-outline.zisseki-outline {
  display: flex;
  gap: 1.2rem;
  background: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 767px) { .zisseki-outline.zisseki-outline { flex-direction: column; } }

.zisseki-left.zisseki-left { flex: 0 0 42%; }
.zisseki-left.zisseki-left img { width: 100%; height: auto; border-radius: var(--sys-corner-md); display: block; }
.zisseki-right.zisseki-right { flex: 1 1 auto; }
.zisseki-right.zisseki-right table { margin: 0; box-shadow: none; font-size: .9rem; }
.zisseki-right.zisseki-right table th { background: var(--sys-color-green-50); color: var(--sys-color-green-700); text-align: left; white-space: nowrap; }
.zisseki-right.zisseki-right table th i { margin-right: .4rem; }

.kaisyu-koment.kaisyu-koment {
  background: var(--sys-color-orange-tint-50);
  border-left: 4px solid var(--sys-color-orange-vivid);
  border-radius: 0 var(--sys-corner-md) var(--sys-corner-md) 0;
  padding: 1rem 1.1rem;
  font-size: .93rem;
  line-height: 1.85;
}

.kaisyu-koment.kaisyu-koment .fa-lightbulb { color: var(--sys-color-accent-amber); margin-right: .4rem; }
.kaisyu-koment.kaisyu-koment span { font-weight: 700; color: var(--sys-color-orange-shade-700); }

/* ==========================================================================
   15. お知らせ
   ========================================================================== */
.news_section.news_section {
  max-width: 900px;
  margin: 2.5rem auto;
  background: var(--sys-color-base-white);
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  padding: 1.4rem;
}

.news_section.news_section .hidari_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--sys-color-green-tint-100);
  padding-bottom: .8rem;
  margin-bottom: .6rem;
}

.news_section.news_section .ti01 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sys-color-gray-900);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.news_section.news_section .info-box ul { list-style: none; margin: 0; padding: 0; }

.news_section.news_section .info-box li.days {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px dashed var(--sys-color-gray-300);
  font-size: .82rem;
  color: var(--sys-color-gray-600);
}

.news_section.news_section .info-box li.days:last-child { border-bottom: 0; }

.news_section.news_section .info-box li.days a {
  font-size: .97rem;
  color: var(--sys-color-content-main);
  font-weight: 600;
  text-decoration: none;
}

.news_section.news_section .info-box li.days a:hover { color: var(--sys-color-green-700); text-decoration: underline; }

/* ==========================================================================
   16. 吹き出し（word balloon）の色味だけ寄せる
   ========================================================================== */
.w_b_bal_box.w_b_bal_box { border-radius: var(--sys-corner-lg) !important; }

/* ==========================================================================
   17. パンくず
   ========================================================================== */
.pan_menu.pan_menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  list-style: none;
  margin: 0;
  padding: .9rem 0;
  font-size: .8rem;
  color: var(--sys-color-gray-600);
}

.pan_menu.pan_menu li { list-style: none; }
.pan_menu.pan_menu li + li::before { content: "›"; margin-right: .5rem; color: var(--sys-color-gray-400, #bdbdbd); }
.pan_menu.pan_menu a { color: var(--sys-color-gray-600); text-decoration: none; }
.pan_menu.pan_menu a:hover { color: var(--sys-color-green-700); text-decoration: underline; }

/* ==========================================================================
   18. 余白の整理
   ========================================================================== */
.full-width.full-width { padding-top: 3rem; padding-bottom: 3rem; }
.index.index.font-mid { margin-bottom: 1.6rem; }

@media screen and (max-width: 767px) {
  .full-width.full-width { padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .junk-card__title.junk-card__title { font-size: 1.6rem; }
  .junk-card__price-number.junk-card__price-number { font-size: 1.9rem; }
}

/* ==========================================================================
   19. 余白の正規化
   既存テーマは .wrap 系に80px前後の上余白を持たせているため、
   セクション帯（.full-width）と二重にならないよう調整する
   ========================================================================== */
.wrap.wrap { padding-top: 0; }

.full-width.full-width > .wrap:first-child,
.full-width.full-width > .wrap { padding-top: 0; }

.spacetop30.spacetop30 { margin-top: 1rem; }
.spacetop40.spacetop40 { margin-top: 1.2rem; }
.spacetop80.spacetop80 { margin-top: 2rem; }
.spacetop120.spacetop120 { margin-top: 2.6rem; }
.spacetop_20.spacetop_20 { margin-top: .8rem; }
.spacebottom80.spacebottom80 { margin-bottom: 2rem; }
.spacebottom120.spacebottom120 { margin-bottom: 2.6rem; }
.mbtm_100.mbtm_100 { margin-bottom: 2rem; }
.mb70.mb70 { margin-bottom: 1.6rem; }
.mb60.mb60 { margin-bottom: 1.4rem; }
.mt60.mt60 { margin-top: 1.4rem; }

/* ==========================================================================
   20. 本文タイポグラフィの調整
   ========================================================================== */
.fz20.fz20 { font-size: 1.02rem; line-height: 1.9; }
.fz18.fz18 { font-size: .98rem; line-height: 1.85; }
.size32.size32 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.size30.size30 { font-size: clamp(1.15rem, 2.9vw, 1.45rem); }

.pg_money_text.pg_money_text,
.offer_txt_top.offer_txt_top,
.waste_disposal_text.waste_disposal_text,
.trash_text.trash_text,
.custom_text.custom_text,
.amount_txt2.amount_txt2,
.quotation_text.quotation_text {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.02rem;
  line-height: 1.95;
  text-align: left;
}

/* セクション内の画像は中央寄せしつつ、はみ出さないように */
.wrap.wrap img,
.full-width.full-width img { max-width: 100%; height: auto; }

.web_camp.web_camp { text-align: center; }

.web_camp.web_camp .web_camp_text {
  max-width: 780px;
  margin: 1.2rem auto;
  background: var(--sys-color-orange-tint-50);
  border: 2px dashed var(--sys-color-orange-vivid);
  border-radius: var(--sys-corner-lg);
  padding: 1.1rem 1.2rem;
  font-size: 1rem;
  line-height: 1.9;
  text-align: left;
}

.web_camp.web_camp .gray-huki {
  display: inline-block;
  background: var(--sys-color-accent-amber);
  color: var(--sys-color-base-white);
  font-weight: 800;
  font-size: .92rem;
  padding: .3rem .9rem;
  border-radius: var(--sys-corner-circle);
  margin-bottom: .4rem;
}

.web_camp.web_camp .color-mikan { color: var(--sys-color-red-600); font-weight: 800; }

/* カスタマイズサンプル（間取り別の実例） */
.sample.sample {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}

.sample.sample .sample_box {
  background: var(--sys-color-base-white);
  border: 0;
  border-radius: var(--sys-corner-lg);
  box-shadow: var(--nfc-shadow-card);
  overflow: hidden;
  padding: 0 0 1.1rem;
  text-align: center;
}

.sample.sample .sample_box h3 {
  background: var(--sys-color-green-primary);
  color: var(--sys-color-base-white);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 .9rem;
  padding: .7rem .8rem;
  border: 0;
}

.sample.sample .sample_box h3::before { display: none; }
.sample.sample .sample_box h3 .black { color: var(--sys-color-base-white); font-size: .82rem; font-weight: 600; display: block; opacity: .92; }
.sample.sample .sample_box img { width: 82%; height: auto; margin: 0 auto .7rem; display: block; }
.sample.sample .sample_box > div p { font-size: .9rem; margin: 0 0 .2rem; }
.sample.sample .sample_box .mikan { color: var(--sys-color-red-600); font-weight: 700; }
.sample.sample .sample_box span { display: block; font-size: .78rem; color: var(--sys-color-gray-600); margin: .4rem .8rem; }

.sample.sample .sample_box .example_title {
  display: inline-block;
  background: var(--sys-color-green-50);
  color: var(--sys-color-green-700);
  font-size: .82rem;
  font-weight: 700;
  padding: .2rem .8rem;
  border-radius: var(--sys-corner-circle);
  margin: .6rem 0 .2rem;
}

.sample.sample .sample_box .sample_price {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--sys-color-red-600);
  line-height: 1.2;
  margin: 0;
}

.sample.sample .sample_box .sample_price::after {
  content: "円";
  font-size: .95rem;
  margin-left: .15rem;
  font-weight: 800;
}

/* ==========================================================================
   21. 文字揃えの調整
   ========================================================================== */
.flow-contents.flow-contents dd,
.flow-contents.flow-contents dd p { text-align: left; }
.flow-contents.flow-contents dd .step-arrow,
.flow-contents.flow-contents dd .flow-images { text-align: center; }

.post_content.post_content p,
.post_content.post_content li { text-align: left; }

.sng-box.sng-box.box29 .box-content { text-align: left; }
.memo.memo.alert.p-box.p-red ul { text-align: left; }

.junk-card.junk-card__content,
.junk-card.junk-card .junk-card__content { text-align: center; }

/* セクション導入文は中央、長文は左 */
.index.index + p { text-align: center; }

/* ==========================================================================
   22. フッターのレスポンシブ対応
   既存の flex-basis 指定が狭い画面で横スクロールを生んでいたため上書きする
   ========================================================================== */
.ft_box.ft_box {
  background: var(--sys-color-green-primary);
  gap: 1.5rem 0;
  padding: 2.4rem 1rem;
}

.ft_box.ft_box .ft_box_l,
.ft_box.ft_box .ft_box_center,
.ft_box.ft_box .ft_box_r,
.ft_box.ft_box .ft_box_r2 { min-width: 0; }

.ft_box.ft_box span { font-size: 1.05rem; }
.ft_box.ft_box ul { margin-top: .6rem; }
.ft_box.ft_box a { text-decoration: none; }

@media screen and (max-width: 900px) {
  .ft_box.ft_box { flex-direction: column; align-items: stretch; }

  .ft_box.ft_box .ft_box_l,
  .ft_box.ft_box .ft_box_center,
  .ft_box.ft_box .ft_box_r,
  .ft_box.ft_box .ft_box_r2 {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    padding: 0 .4rem;
  }

  .ft_box.ft_box .ft_box_l section,
  .ft_box.ft_box .ft_box_center section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    padding: 0;
  }

  .ft_box.ft_box .ft_box_l section > div,
  .ft_box.ft_box .ft_box_center section > div { min-width: 0; }

  .ft_box.ft_box ul { padding-left: 0; }
  .ft_box.ft_box ul li { word-break: break-word; }
}

@media screen and (max-width: 480px) {
  .ft_box.ft_box .ft_box_l section,
  .ft_box.ft_box .ft_box_center section { grid-template-columns: 1fr; }
}

/* 全体の横はみ出しを防ぐ */
html, body { overflow-x: hidden; }

/* ==========================================================================
   23. 固定幅ユーティリティのレスポンシブ化
   .width820 / .width810 などが狭い画面で内容をはみ出させていたため上書き
   ========================================================================== */
.width820.width820,
.width810.width810,
.w810.w810 {
  max-width: 820px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  .wrap.wrap { padding-left: 1rem; padding-right: 1rem; }
  .full-width.full-width > .wrap { padding-left: 1rem; padding-right: 1rem; }
  .junk-pricing.junk-pricing { padding-left: 0; padding-right: 0; }
  .cta__ct.cta__ct { padding: 1.2rem .9rem; }
  .voice-box.voice-box .img { flex-basis: auto; }
  .sng-box.sng-box.box29 { padding: 2rem 1rem 1.1rem; }
  .flow-contents.flow-contents dd { padding: 1.1rem .9rem; }
  .zisseki-outline.zisseki-outline { padding: 1rem .9rem; }
  .news_section.news_section { padding: 1.1rem 1rem; }
}