/* ============================================================
   Emarket — shared component & layout system (.em-*)
   後続の各サービスLP（/recycle/ /ihin/ ...）はこのファイル＋
   emarket-tokens.css を読み込めば同じ見た目を継承できます。
   Mobile-first（375px基準）。
   ※ claude.ai/design「NEO PROUD Design System」ui_kits/emarket-top/emarket-system.css より取り込み
   ============================================================ */

html { overflow-x: hidden; }  /* スマホでの横はみ出しガード */
/* スムーススクロール（アンカー移動）＋ 固定ヘッダー分のオフセット */
@media (prefers-reduced-motion: no-preference){ html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 78px; }
/* grid/flex の子が min-content で列を押し広げる(blowout)のを防ぐ */
.em-hero__inner > *, .em-lp-hero__inner > *, .em-split > *, .em-cta__inner { min-width: 0; }
.em { font-family: var(--em-font); color: var(--em-text); background: var(--em-white); overflow-wrap: break-word;
  --em-accent: var(--em-green); --em-accent-dark: var(--em-green-dark); --em-accent-soft: var(--em-green-soft); --em-accent-tint: var(--em-green-tint); }
/* ---- Service differentiation is by STRUCTURE/DENSITY/TYPE; color stays in the Emarket family.
     Only 遺品整理 (near-achromatic) and エアコン (teal blend) shift hue. Header/footer/CTA stay green/orange. ---- */
.em-t-ihin   { --em-accent:#1f6f54; --em-accent-dark:#16553f; --em-accent-soft:#ecefec; --em-accent-tint:#f5f6f4; }  /* 遺品整理: 墨・ライトグレー基調、緑はごく少量 */
.em-t-aircon { --em-accent:#157f9c; --em-accent-dark:#0f6177; --em-accent-soft:#ddeef3; --em-accent-tint:#eef8fb; }  /* エアコン: 清涼なティールを緑に馴染ませる */
/* 遺品整理だけはオレンジ・煽りを外し、見出しは明朝に */
.em-t-ihin .em-eyebrow::before { background: var(--em-accent); }
.em-t-ihin .em-btn--cta { background: var(--em-accent); box-shadow: none; }
.em-t-ihin .em-btn--cta:hover { background: var(--em-accent-dark); }
.em-t-ihin .em-field i { background: #8d918c; }
.em-t-ihin .em-h2, .em-t-ihin .em-lp-hero h1, .em-t-ihin .em-split__body h3 { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; font-weight: 600; letter-spacing: .03em; }
.em-t-ihin .em-lp-hero h1 { line-height: 1.5; }
.em *, .em *::before, .em *::after { box-sizing: border-box; }
.em img { max-width: 100%; display: block; }

/* ---- Layout ---- */
.em-container { width: 100%; max-width: var(--em-container); margin: 0 auto; padding-inline: var(--em-gutter); }
.em-section { padding-block: var(--em-section); }
.em-section--wash { background: var(--em-accent-tint); }
.em-section--off { background: var(--em-offwhite); }

/* ---- Section heading ---- */
.em-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--em-fs-sm); font-weight: 700; letter-spacing: .12em;
  color: var(--em-accent); text-transform: uppercase; margin: 0 0 12px;
}
.em-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--em-orange); border-radius: 2px; }
.em-h2 {
  margin: 0; font-weight: 900; font-size: var(--em-fs-h2); line-height: 1.3;
  letter-spacing: .01em; color: var(--em-ink); text-wrap: pretty;
}
.em-h2 .accent { color: var(--em-accent); }
.em-lead { margin: 14px 0 0; font-size: var(--em-fs-lead); line-height: 1.85; color: var(--em-text); max-width: 60ch; }
.em-section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.em-section__head--center { text-align: center; }
.em-section__head--center .em-eyebrow,
.em-section__head--center .em-lead { margin-inline: auto; }

/* ---- Buttons ---- */
.em-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--em-font); font-weight: 700; font-size: 16px; line-height: 1;
  padding: 16px 26px; border-radius: var(--em-r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--em-dur) var(--em-ease), background var(--em-dur) var(--em-ease),
              box-shadow var(--em-dur) var(--em-ease), color var(--em-dur) var(--em-ease);
}
.em-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.em-btn--cta { background: var(--em-orange); color: #fff; box-shadow: var(--em-shadow-cta); }
.em-btn--cta:hover { background: var(--em-orange-dark); transform: translateY(-2px); }
.em-btn--primary { background: var(--em-green); color: #fff; }
.em-btn--primary:hover { background: var(--em-green-dark); transform: translateY(-2px); }
.em-btn--ghost { background: #fff; color: var(--em-accent); border-color: var(--em-accent); }
.em-btn--ghost:hover { background: var(--em-accent-soft); }
.em-btn--onfill { background: #fff; color: var(--em-accent); }
.em-btn--onfill:hover { background: rgba(255,255,255,0.88); transform: translateY(-2px); }
.em-btn--lg { font-size: 17px; padding: 18px 32px; }
.em-btn--block { display: flex; width: 100%; }

/* ---- Cards: services ---- */
.em-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px){ .em-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 980px){ .em-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.em-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md);
  padding: 26px 24px 24px; box-shadow: var(--em-shadow-sm);
  transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease), border-color var(--em-dur) var(--em-ease);
  text-decoration: none; color: inherit;
}
.em-card:hover { transform: translateY(-4px); box-shadow: var(--em-shadow-hover); border-color: transparent; }
.em-card__icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: var(--em-green-soft); color: var(--em-green); flex-shrink: 0;
}
.em-card__icon svg { width: 30px; height: 30px; }
.em-card__name { margin: 0; font-size: var(--em-fs-h3); font-weight: 700; color: var(--em-ink); line-height: 1.4; }
.em-card__sub { margin: 0; font-size: var(--em-fs-sm); font-weight: 600; color: var(--em-green); letter-spacing: .02em; }
.em-card__desc { margin: 0; font-size: 14px; line-height: 1.8; color: var(--em-text); flex: 1; }
.em-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--em-green); margin-top: 2px; }
.em-card__more svg { width: 16px; height: 16px; transition: transform var(--em-dur) var(--em-ease); }
.em-card:hover .em-card__more svg { transform: translateX(4px); }

/* featured (中核 /recycle/, 寄り添い /ihin/) */
.em-card--featured { border-color: var(--em-green); border-width: 1.5px; background: var(--em-paper); }
.em-card--featured .em-card__icon { background: var(--em-green); color: #fff; }
.em-tag {
  position: absolute; top: -11px; left: 22px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--em-orange); padding: 5px 12px; border-radius: var(--em-r-pill);
}
.em-card--care .em-card__icon { background: var(--em-orange-soft); color: var(--em-orange-dark); }
.em-card--care .em-tag { background: var(--em-green); }

/* ---- Reasons (trust) ---- */
.em-reasons { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .em-reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .em-reasons { grid-template-columns: repeat(4, 1fr); } }
.em-reason { background: #fff; border-radius: var(--em-r-md); padding: 28px 22px; box-shadow: var(--em-shadow-card); }
.em-reason__num { font-size: 13px; font-weight: 800; color: var(--em-orange); letter-spacing: .14em; }
.em-reason__icon { width: 48px; height: 48px; color: var(--em-green); margin: 12px 0 14px; }
.em-reason__icon svg { width: 48px; height: 48px; }
.em-reason h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--em-ink); }
.em-reason p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--em-text); }

/* ---- Steps ---- */
.em-steps { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 720px){ .em-steps { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.em-step { position: relative; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 26px 20px; }
.em-step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--em-accent); color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.em-step h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--em-ink); }
.em-step p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--em-text); }
@media (min-width: 720px){
  .em-step:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; right: -10px; width: 20px; height: 2px; background: var(--em-border-strong); z-index: 1;
  }
}

/* ---- Info / trust bar ---- */
.em-info { display: grid; gap: 0; grid-template-columns: 1fr; border-radius: var(--em-r-lg); overflow: hidden; box-shadow: var(--em-shadow-card); background: #fff; }
@media (min-width: 820px){ .em-info { grid-template-columns: repeat(3, 1fr); } }
.em-info__cell { padding: 30px 28px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--em-border); }
@media (min-width: 820px){ .em-info__cell { border-bottom: none; border-right: 1px solid var(--em-border); } .em-info__cell:last-child{ border-right: none; } }
.em-info__label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--em-green); }
.em-info__label svg { width: 18px; height: 18px; }
.em-info__value { font-size: 16px; font-weight: 700; color: var(--em-ink); line-height: 1.6; }
.em-info__note { font-size: 13px; color: var(--em-muted); }

/* ---- CTA band ---- */
.em-cta { background: var(--em-accent-dark); color: #fff; border-radius: clamp(0px, 2vw, 24px); }
.em-cta__inner { padding-block: clamp(44px, 7vw, 72px); text-align: center; }
.em-cta h2 { margin: 0; font-size: var(--em-fs-h2); font-weight: 900; line-height: 1.35; color: #fff; }
.em-cta p { margin: 14px auto 0; max-width: 52ch; font-size: var(--em-fs-lead); line-height: 1.8; color: rgba(255,255,255,0.92); }
.em-cta__phone { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-decoration: none; }
.em-cta__phone .num { font-size: clamp(26px, 6vw, 40px); font-weight: 900; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.em-cta__phone .num svg { width: .8em; height: .8em; vertical-align: -2px; margin-right: 8px; }
.em-cta__phone .hours { font-size: 13px; color: rgba(255,255,255,0.85); }
.em-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ---- Header ---- */
.em-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--em-border); }
.em-header__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.em-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--em-ink); }
.em-brand__logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--em-green); color: #fff; font-weight: 900; }
.em-brand__name { font-weight: 900; font-size: 19px; letter-spacing: .02em; color: var(--em-ink); }
.em-brand__name small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--em-green); white-space: nowrap; }
.em-header__nav { display: none; margin-left: auto; align-items: center; gap: 26px; }
.em-header__nav a { font-size: 14px; font-weight: 700; color: var(--em-text); text-decoration: none; }
.em-header__nav a:hover { color: var(--em-green); }
.em-header__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.em-header__cta .em-btn { padding: 11px 18px; font-size: 14px; }
/* 狭い画面ではヘッダーのCTAボタンを隠す（バーガーメニュー内にCTA＋電話あり） */
@media (max-width: 560px){ .em-header__cta .em-btn { display: none; } }
@media (min-width: 980px){
  .em-header__nav { display: flex; }
  .em-header__cta { margin-left: 0; }
}

/* ---- Hero ---- */
.em-hero { position: relative; background: linear-gradient(168deg, var(--em-green-tint) 0%, var(--em-offwhite) 60%, #fff 100%); overflow: hidden; }
.em-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(31,111,84,0.07) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; }
.em-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; padding-block: clamp(40px, 7vw, 84px); grid-template-columns: 1fr; }
@media (min-width: 940px){ .em-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.em-hero__region { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--em-green); background: var(--em-green-soft); padding: 7px 14px; border-radius: var(--em-r-pill); }
.em-hero__region svg { width: 16px; height: 16px; }
.em-hero h1 { margin: 18px 0 0; font-size: var(--em-fs-hero); font-weight: 900; line-height: 1.22; letter-spacing: .01em; color: var(--em-ink); text-wrap: balance; }
.em-hero h1 .g { color: var(--em-green); }
.em-hero h1 .o { color: var(--em-orange); }
.em-hero__sub { margin: 20px 0 0; font-size: var(--em-fs-lead); line-height: 1.9; color: var(--em-text); max-width: 46ch; }
.em-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.em-hero__stats { display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 32px; }
.em-hero__stat .n { font-size: 26px; font-weight: 900; color: var(--em-green); }
.em-hero__stat .l { font-size: 12.5px; color: var(--em-muted); font-weight: 600; }
.em-hero__art { position: relative; }
.em-hero__panel { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-lg); box-shadow: var(--em-shadow-card); padding: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.em-hero__pill { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-radius: var(--em-r-md); background: var(--em-green-tint); }
.em-hero__pill svg { width: 26px; height: 26px; color: var(--em-green); flex-shrink: 0; }
.em-hero__pill span { font-size: 14px; font-weight: 700; color: var(--em-ink); line-height: 1.3; }
.em-hero__pill--accent { background: var(--em-orange-soft); }
.em-hero__pill--accent svg { color: var(--em-orange-dark); }

/* ---- Footer ---- */
.em-footer { background: #1c2421; color: rgba(255,255,255,0.78); }
.em-footer__top { display: grid; gap: 36px; padding-block: clamp(44px, 6vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 760px){ .em-footer__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.em-footer__brand .em-brand__name { color: #fff; }
.em-footer__about { margin: 16px 0 0; font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,0.62); max-width: 36ch; }
.em-footer__col h4 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #fff; }
.em-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.em-footer__col a { font-size: 14px; color: rgba(255,255,255,0.78); text-decoration: none; }
.em-footer__col a:hover { color: var(--em-orange); }
.em-footer__col a .path { color: rgba(255,255,255,0.4); font-size: 12px; margin-left: 4px; }
.em-social { display: flex; gap: 12px; margin-top: 4px; }
.em-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; }
.em-social a:hover { background: var(--em-green); }
.em-social svg { width: 18px; height: 18px; }
.em-footer__bar { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; }
.em-footer__bar small { font-size: 12px; color: rgba(255,255,255,0.5); }
.em-footer__bar nav { display: flex; gap: 16px; }
.em-footer__bar a { font-size: 12px; color: rgba(255,255,255,0.6); text-decoration: none; }

/* ============================================================
   SERVICE LP MODULES (em-lp-*, shared by /recycle/ /ihin/ ...)
   ============================================================ */

/* breadcrumb */
.em-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--em-muted); padding-block: 14px; }
.em-crumb a { color: var(--em-muted); text-decoration: none; }
.em-crumb a:hover { color: var(--em-accent); }
.em-crumb span[aria-current] { color: var(--em-ink); font-weight: 700; }
.em-crumb i { font-style: normal; opacity: .5; }

/* LP hero (service) */
.em-lp-hero { position: relative; overflow: hidden; background: linear-gradient(168deg, var(--em-accent-tint) 0%, var(--em-offwhite) 62%, #fff 100%); }
.em-lp-hero--care { background: linear-gradient(168deg, var(--em-accent-tint) 0%, var(--em-offwhite) 60%, #fff 100%); }
.em-lp-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--em-accent) 14%, transparent) 1px, transparent 0); background-size: 22px 22px; pointer-events: none; }
.em-lp-hero--plain::after { display: none; }  /* 静かな面 (遺品整理) */
.em-lp-hero--lines::after { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--em-accent) 7%, transparent) 0 2px, transparent 2px 18px); }  /* 動き (回収/引越し) */
.em-lp-hero--rings::after { background-image: radial-gradient(circle at 86% 16%, transparent 0 46px, color-mix(in srgb, var(--em-accent) 10%, transparent) 46px 48px, transparent 48px 92px, color-mix(in srgb, var(--em-accent) 8%, transparent) 92px 94px, transparent 94px 150px, color-mix(in srgb, var(--em-accent) 6%, transparent) 150px 152px, transparent 152px); }  /* 空気の輪 (エアコン) */
.em-lp-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(26px, 4vw, 46px); align-items: center; padding-block: clamp(34px, 5.5vw, 70px); grid-template-columns: 1fr; }
@media (min-width: 940px){ .em-lp-hero__inner { grid-template-columns: 1.04fr 0.96fr; } }
.em-lp-hero__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--em-accent); background: var(--em-accent-soft); padding: 7px 14px; border-radius: var(--em-r-pill); }
.em-lp-hero__cat svg { width: 16px; height: 16px; }
.em-lp-hero h1 { margin: 18px 0 0; font-size: var(--em-fs-hero); font-weight: 900; line-height: 1.24; letter-spacing: .01em; color: var(--em-ink); text-wrap: balance; }
.em-lp-hero h1 .g { color: var(--em-accent); }
.em-lp-hero h1 .o { color: var(--em-orange); }
.em-lp-hero--care h1 { font-weight: 800; line-height: 1.32; }
.em-lp-hero__sub { margin: 18px 0 0; font-size: var(--em-fs-lead); line-height: 1.95; color: var(--em-text); max-width: 48ch; }
.em-lp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.em-lp-hero__media { position: relative; }

/* image slot placeholder (差し替え前提) */
.em-photo { position: relative; border-radius: var(--em-r-lg); overflow: hidden; background: var(--em-accent-soft); border: 1px dashed var(--em-border-strong); display: grid; place-items: center; color: var(--em-accent); min-height: 240px; box-shadow: var(--em-shadow-card); }
.em-photo__label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-align: center; padding: 16px; opacity: .85; }
.em-photo__label svg { width: 38px; height: 38px; }
.em-photo--wide { aspect-ratio: 16/10; min-height: 0; }
.em-photo--tall { aspect-ratio: 4/5; min-height: 0; }

/* check list */
.em-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.em-list li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.7; color: var(--em-text); }
.em-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--em-accent-soft); }
.em-list li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--em-accent); border-bottom: 2px solid var(--em-accent); transform: rotate(-45deg); }

/* feature cards (benefits) */
.em-features { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .em-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .em-features { grid-template-columns: repeat(3, 1fr); } }
.em-feature { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 26px 22px; box-shadow: var(--em-shadow-sm); }
.em-feature__icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--em-accent-soft); color: var(--em-accent); margin-bottom: 16px; }
.em-feature__icon svg { width: 28px; height: 28px; }
.em-feature h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--em-ink); line-height: 1.45; }
.em-feature p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--em-text); }

/* split (text + media) */
.em-split { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px){ .em-split { grid-template-columns: 1fr 1fr; } .em-split--rev .em-split__media { order: -1; } }
.em-split__body h3 { margin: 0 0 12px; font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--em-ink); line-height: 1.4; }
.em-split__body p { margin: 0 0 18px; font-size: 15px; line-height: 1.9; color: var(--em-text); }

/* pricing */
.em-prices { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .em-prices { grid-template-columns: repeat(3, 1fr); } }
.em-price { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 28px 24px; box-shadow: var(--em-shadow-sm); text-align: center; position: relative; }
.em-price--pop { border-color: var(--em-orange); border-width: 1.5px; box-shadow: var(--em-shadow-card); }
.em-price--pop::before { content: "人気"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff; background: var(--em-orange); padding: 4px 14px; border-radius: var(--em-r-pill); }
.em-price h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--em-ink); }
.em-price__note { font-size: 12.5px; color: var(--em-muted); margin: 0 0 14px; }
.em-price__amt { font-size: 30px; font-weight: 900; color: var(--em-accent); line-height: 1; }
.em-price__amt small { font-size: 14px; font-weight: 700; color: var(--em-muted); }
.em-price__unit { font-size: 12.5px; color: var(--em-muted); margin: 6px 0 0; }

/* FAQ accordion */
.em-faq { max-width: 760px; margin-inline: auto; display: grid; gap: 12px; }
.em-faq details { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); overflow: hidden; }
.em-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 20px; font-weight: 700; font-size: 15px; color: var(--em-ink); }
.em-faq summary::-webkit-details-marker { display: none; }
.em-faq summary::before { content: "Q"; flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--em-accent-soft); color: var(--em-accent); font-weight: 800; font-size: 13px; }
.em-faq summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--em-muted); border-bottom: 2px solid var(--em-muted); transform: rotate(45deg); transition: transform var(--em-dur) var(--em-ease); }
.em-faq details[open] summary::after { transform: rotate(-135deg); }
.em-faq__a { padding: 0 20px 20px 58px; font-size: 14px; line-height: 1.85; color: var(--em-text); }

/* other-services cross links — card layout (with copy) */
.em-others { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px){ .em-others { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px){ .em-others { grid-template-columns: repeat(3, 1fr); } }
.em-other { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; padding: 24px 22px; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); color: var(--em-ink); text-decoration: none; box-shadow: var(--em-shadow-sm); transition: border-color var(--em-dur) var(--em-ease), transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease); }
.em-other:hover { border-color: var(--em-accent); transform: translateY(-4px); box-shadow: var(--em-shadow-hover); }
.em-other svg { width: 26px; height: 26px; padding: 12px; box-sizing: content-box; background: var(--em-accent-soft); color: var(--em-accent); border-radius: 13px; flex-shrink: 0; }
.em-other__txt { display: flex; flex-direction: column; gap: 5px; }
.em-other__name { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--em-ink); }
.em-other__sub { display: block; font-size: 13px; font-weight: 500; line-height: 1.7; color: var(--em-muted); }
.em-other::after { content: "詳しく見る ›"; margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 700; color: var(--em-accent); letter-spacing: .02em; transition: transform var(--em-dur) var(--em-ease); }
.em-other:hover::after { transform: translateX(3px); }

/* stat row */
.em-stats { display: flex; flex-wrap: wrap; gap: 22px 34px; margin-top: 30px; }
.em-stat .n { font-size: 26px; font-weight: 900; color: var(--em-accent); }
.em-stat .l { font-size: 12.5px; color: var(--em-muted); font-weight: 600; }

/* trouble chips */
.em-troubles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.em-trouble { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--em-ink); background: #fff; border: 1px solid var(--em-border); padding: 11px 18px; border-radius: var(--em-r-pill); box-shadow: var(--em-shadow-sm); }
.em-trouble::before { content: "\201C"; color: var(--em-orange); font-weight: 900; }

/* ============================================================
   MOBILE MENU (burger + drawer) — shown < 980px
   ============================================================ */
.em-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.em-burger span { display: block; height: 2px; width: 100%; background: var(--em-ink); border-radius: 2px; transition: transform var(--em-dur) var(--em-ease), opacity var(--em-dur) var(--em-ease); }
.em-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.em-burger.is-open span:nth-child(2){ opacity: 0; }
.em-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 980px){ .em-burger { display: none; } }

.em-menu { position: fixed; inset: 0; z-index: 80; }
.em-menu__backdrop { position: absolute; inset: 0; background: rgba(28,36,33,0.5); backdrop-filter: blur(2px); animation: emFade var(--em-dur) var(--em-ease); }
.em-menu__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 340px); background: #fff; box-shadow: -10px 0 40px rgba(28,36,33,0.18); padding: 84px 24px 32px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; animation: emSlide var(--em-dur) var(--em-ease); }
.em-menu__link { padding: 15px 8px; font-size: 16px; font-weight: 700; color: var(--em-ink); border-bottom: 1px solid var(--em-border); text-decoration: none; }
.em-menu__link:hover { color: var(--em-green); }
.em-menu__tel { margin-top: 14px; text-align: center; font-size: 20px; font-weight: 900; color: var(--em-green); text-decoration: none; }
@keyframes emFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){ .em-menu__backdrop, .em-menu__panel { animation: none; } }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.em-form { max-width: 760px; margin-inline: auto; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-lg); box-shadow: var(--em-shadow-card); padding: clamp(24px, 4vw, 40px); }
.em-form__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .em-form__grid { grid-template-columns: 1fr 1fr; } .em-field--half { grid-column: span 1; } .em-field { grid-column: 1 / -1; } }
.em-field { display: flex; flex-direction: column; gap: 7px; }
.em-field > span { font-size: 13.5px; font-weight: 700; color: var(--em-ink); display: inline-flex; align-items: center; gap: 8px; }
.em-field i { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--em-orange); padding: 2px 7px; border-radius: 4px; }
.em-field input, .em-field select, .em-field textarea { font-family: var(--em-font); font-size: 15px; color: var(--em-ink); padding: 13px 14px; border: 1.5px solid var(--em-border-strong); border-radius: var(--em-r-sm); background: var(--em-paper); transition: border-color var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease); width: 100%; }
.em-field textarea { resize: vertical; line-height: 1.7; }
.em-field input:focus, .em-field select:focus, .em-field textarea:focus { outline: none; border-color: var(--em-green); box-shadow: 0 0 0 3px var(--em-green-soft); }
.em-form__foot { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-top: 26px; }
.em-form__note { margin: 0; font-size: 12.5px; color: var(--em-muted); text-align: center; }
.em-form__done { margin: 22px 0 0; padding: 16px 18px; border-radius: var(--em-r-sm); background: var(--em-green-soft); color: var(--em-green-dark); font-size: 14px; font-weight: 700; text-align: center; }

/* ---- utility ---- */
.em-center { text-align: center; }
.em-mt-lg { margin-top: clamp(28px, 4vw, 44px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   ARCHETYPE MODULES (per-service structural styles)
   ============================================================ */

/* --- Product grid + twin-CTA (/recycle/) --- */
.em-twin { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px){ .em-twin { grid-template-columns: 1fr 1fr; } }
.em-twin__cta { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border-radius: var(--em-r-lg); border: 1.5px solid var(--em-border); background: #fff; text-decoration: none; color: inherit; transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease); }
.em-twin__cta:hover { transform: translateY(-3px); box-shadow: var(--em-shadow-hover); }
.em-twin__cta h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--em-ink); display:flex; align-items:center; gap:10px; }
.em-twin__cta h3 svg { width: 26px; height: 26px; }
.em-twin__cta p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--em-text); }
.em-twin__cta--sell { background: var(--em-orange); border-color: var(--em-orange); }
.em-twin__cta--sell h3, .em-twin__cta--sell p { color: #fff; }
.em-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--em-accent); }
.em-link svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--em-dur) var(--em-ease); }
.em-twin__cta:hover .em-link svg { transform: translateX(3px); }
.em-twin__cta--sell .em-link { color:#fff; }
.em-pgrid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px){ .em-pgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 980px){ .em-pgrid { grid-template-columns: repeat(4, 1fr); } }
.em-pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); overflow: hidden; box-shadow: var(--em-shadow-sm); transition: transform var(--em-dur) var(--em-ease), box-shadow var(--em-dur) var(--em-ease); }
.em-pcard:hover { transform: translateY(-4px); box-shadow: var(--em-shadow-hover); }
.em-pcard__img { aspect-ratio: 1/1; background: var(--em-green-soft); display: grid; place-items: center; color: var(--em-green); position: relative; }
.em-pcard__img svg { width: 38%; height: 38%; opacity: .5; }
.em-pcard__tag { position: absolute; top: 9px; left: 9px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--em-orange); padding: 4px 9px; border-radius: 6px; letter-spacing: .03em; }
.em-pcard__tag--soft { background: var(--em-green); }
.em-pcard__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.em-pcard__cat { font-size: 10.5px; color: var(--em-muted); font-weight: 600; }
.em-pcard__name { font-size: 13px; font-weight: 700; color: var(--em-ink); line-height: 1.4; }
.em-pcard__price { margin-top: auto; padding-top: 6px; font-size: 17px; font-weight: 900; color: var(--em-orange); }
.em-pcard__price small { font-size: 10.5px; font-weight: 700; color: var(--em-muted); }
.em-catbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.em-catchip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-pill); font-size: 14px; font-weight: 700; color: var(--em-ink); box-shadow: var(--em-shadow-sm); transition: border-color var(--em-dur) var(--em-ease), transform var(--em-dur) var(--em-ease); }
.em-catchip:hover { border-color: var(--em-green); transform: translateY(-2px); }
.em-catchip svg { width: 18px; height: 18px; color: var(--em-green); }

/* --- Sticky mobile CTA bar (/recovery/) --- */
.em-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--em-border); box-shadow: 0 -6px 20px rgba(35,41,42,0.10); }
.em-sticky .em-btn { flex: 1; padding: 14px 8px; font-size: 15px; }
@media (min-width: 760px){ .em-sticky { display: none; } }

/* --- Big numbers (/recovery/, /aircon/) --- */
.em-bignums { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .em-bignums { grid-template-columns: repeat(3, 1fr); } }
.em-bignum { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 30px 22px; text-align: center; box-shadow: var(--em-shadow-sm); }
.em-bignum__n { font-size: clamp(40px, 9vw, 58px); font-weight: 900; line-height: .95; color: var(--em-accent); letter-spacing: -.02em; }
.em-bignum__n small { font-size: .38em; font-weight: 800; letter-spacing: 0; }
.em-bignum--price .em-bignum__n { color: var(--em-orange); }
.em-bignum__l { margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--em-ink); }
.em-bignum__sub { margin-top: 4px; font-size: 12px; color: var(--em-muted); }

/* --- Before / After (/aircon/) --- */
.em-ba { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 620px){ .em-ba { grid-template-columns: 1fr 40px 1fr; } }
.em-ba__panel { position: relative; border-radius: var(--em-r-md); overflow: hidden; aspect-ratio: 4/3; display: grid; place-items: center; border: 1px solid var(--em-border); }
.em-ba__panel--before { background: #e7e2d6; color: #8b8069; }
.em-ba__panel--after { background: var(--em-accent-soft); color: var(--em-accent); }
.em-ba__label { position: absolute; top: 11px; left: 11px; font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: var(--em-r-pill); background: rgba(255,255,255,0.92); color: var(--em-ink); }
.em-ba__panel > svg { width: 30%; height: 30%; opacity: .5; }
.em-ba__arrow { display: grid; place-items: center; color: var(--em-accent); }
.em-ba__arrow svg { width: 30px; height: 30px; transform: rotate(90deg); }
@media (min-width: 620px){ .em-ba__arrow svg { transform: none; } }
.em-data { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--em-border); border-radius: var(--em-r-md); overflow: hidden; box-shadow: var(--em-shadow-sm); }
@media (min-width: 600px){ .em-data { grid-template-columns: repeat(3, 1fr); } }
.em-data__cell { background: #fff; padding: 26px 20px; text-align: center; }
.em-data__n { font-size: 32px; font-weight: 900; color: var(--em-accent); }
.em-data__l { font-size: 13px; color: var(--em-text); margin-top: 6px; }

/* --- Timeline (/moving/) --- */
.em-timeline { display: grid; max-width: 720px; margin-inline: auto; }
.em-tl { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 30px; }
.em-tl:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--em-accent-soft); }
.em-tl__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--em-accent); color: #fff; display: grid; place-items: center; font-weight: 800; z-index: 1; }
.em-tl__body h3 { margin: 8px 0 6px; font-size: 17px; font-weight: 700; color: var(--em-ink); }
.em-tl__body p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--em-text); }

/* --- Voices (/moving/) --- */
.em-voices { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .em-voices { grid-template-columns: repeat(3, 1fr); } }
.em-voice { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 24px 22px; box-shadow: var(--em-shadow-sm); }
.em-voice__stars { color: var(--em-orange); font-size: 15px; letter-spacing: 3px; }
.em-voice p { margin: 12px 0 14px; font-size: 14px; line-height: 1.85; color: var(--em-text); }
.em-voice__who { font-size: 12.5px; color: var(--em-muted); font-weight: 600; }

/* --- Plans / vehicle cards (/moving/, /cycle/) --- */
.em-plans { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .em-plans { grid-template-columns: repeat(3, 1fr); } }
.em-plan { border: 1px solid var(--em-border); border-radius: var(--em-r-md); padding: 26px 22px; background: #fff; box-shadow: var(--em-shadow-sm); }
.em-plan__icon { width: 46px; height: 46px; color: var(--em-accent); margin-bottom: 12px; }
.em-plan__icon svg { width: 46px; height: 46px; }
.em-plan h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--em-ink); }
.em-plan p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--em-text); }

/* --- Sporty diagonal hero + vehicle grid (/cycle/) --- */
.em-lp-hero--diag::after { display: none; }
.em-lp-hero--diag { background: #fff; }
.em-lp-hero--diag::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(108deg, var(--em-accent-tint) 0%, var(--em-accent-tint) 52%, #fff 52%, #fff 100%); }
@media (max-width: 939px){ .em-lp-hero--diag::before { background: var(--em-accent-tint); } }
.em-vgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px){ .em-vgrid { grid-template-columns: repeat(4, 1fr); } }
.em-vcard { background: #fff; border: 1px solid var(--em-border); border-radius: var(--em-r-md); overflow: hidden; box-shadow: var(--em-shadow-sm); transition: transform var(--em-dur) var(--em-ease); }
.em-vcard:hover { transform: translateY(-4px); }
.em-vcard__img { aspect-ratio: 4/3; background: var(--em-green-soft); display: grid; place-items: center; color: var(--em-green); }
.em-vcard__img svg { width: 44%; height: 44%; opacity: .6; }
.em-vcard__b { padding: 13px 14px 15px; }
.em-vcard__b h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: var(--em-ink); }
.em-vcard__b p { margin: 0; font-size: 12.5px; color: var(--em-muted); }

/* --- generous spacing util (/ihin/) --- */
.em-section--air { padding-block: clamp(72px, 12vw, 150px); }
.em-prose { max-width: 30em; margin-inline: auto; text-align: center; }
.em-prose p { font-size: clamp(15px, 2.2vw, 17px); line-height: 2.15; color: var(--em-text); }
.em-serif { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }