@charset "utf-8";
/*
 * ======================================
 * 日越産業株式会社 サイト固有CSS
 * 共通CSS（main.css）で再現できなかったデザイン差分のみを定義する。
 * 値の出どころ：claude-design-output/（完成デザイン）
 * ======================================
 *
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ■ ボタン・小物
 * .ngs-btn（--sub/--white/--base/--lg/--wide/--jmty/--submit）
 *                        - pill＋ハードシャドウ（0 Npx 0）＋押し込みホバーのボタン
 * .ngs-icon-btn（--base/--sub）  - 52px の丸アイコンボタン（フッター）
 * .ngs-badge（--base/--sub/--sm/--xs/--tag/--inline）- pill型ラベル
 * .ngs-marker（--sub）           - 下線ハイライト（linear-gradient）
 * .ngs-accent                    - 見出し内の差し色（オレンジ）
 *
 * ■ 共通レイアウト
 * .ngs-header 一式                - 白いpillが浮くsticky型ヘッダー
 * .ngs-cta 一式                   - お問い合わせCTA帯（英字＋見出し＋2ボタン）
 * .ngs-footer 一式                - 2カラムauto-fitフッター＋地図
 * .ngs-bar 一式                   - PCでも表示する画面下追従CTAバー
 * .ngs-sec-head 一式              - バッジ／小見出し＋左右スラッシュ画像の見出し
 * .ngs-inner / .ngs-page / .ngs-grid / .ngs-mb-*  - 幅1240px・実数余白のラッパー
 *
 * ■ 下層ページ部品
 * .ngs-subhero 一式 / .ngs-breadcrumb / .ngs-notice / .ngs-card 一式 /
 * .ngs-minicard / .ngs-figure / .ngs-step / .ngs-bstep / .ngs-daylist /
 * .ngs-pricepoint / .ngs-ba 一式 / .ngs-item / .ngs-coupon 一式 / .ngs-jmty 一式 /
 * .ngs-reasonbox / .ngs-profile / .ngs-license / .ngs-mapbox /
 * .ngs-contact-lead / .ngs-contact-tel / .ngs-form 一式 / .ngs-input / .ngs-sent /
 * .ngs-blog 一式 / .ngs-pager 一式 / .ngs-side 一式 / .ngs-article 一式
 *
 * ※ TOPページ固有の部品は ./css/top-custom.css を参照
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ・値の粒度不足
 *   - 余白：mb-56 / mb-72 が無く、かつ mb-40 以上はtablet以下で自動半減するため、
 *     デザインの実数を保てない。→ .ngs-mb-* を追加。
 *   - 角丸：$radius は 5/10/20/60px の4段階のみ。デザインは 14/18/20/22/24/26/28/32/999px
 *     を使い分けており、カードごとに直接指定が必要だった。
 *   - 影：$shadow_* はぼかし付きのみ。デザインの「0 Npx 0 単色」ハードシャドウが無い。
 *
 * ・指定方向不足
 *   - grid の最小カラム幅を指定する手段が無い（grid-2/3/4 は固定列数）。
 *     デザインは repeat(auto-fit, minmax(Npx,1fr)) を多用。→ .ngs-grid + --ngs-col を追加。
 *
 * ・状態不足
 *   - hover-up 等はあるが「押し込み（translateY(+2px)＋影を2px縮める）」の状態が無い。
 *
 * ・構造不足
 *   - ヘッダー：.header-bar は全幅ベタ固定のみ。デザインの「透過sticky＋内側が白いpill」が作れない。
 *   - 追従CTAバー：.sp-fixed-bar はSP限定（tablet以上 display:none）。
 *     デザインは全幅で常時表示のため別部品が必要だった。
 *   - 見出し：heading 系は英日2段構成が前提。デザインの「バッジ＋左右スラッシュ画像」型が無い。
 *
 * ・装飾パターン不足
 *   - ドット背景（radial-gradient の水玉）が bg-* に無い（bg-grid/stripe/polka-dot はあるが値が異なる）。
 *   - 吹き出しの三角しっぽ（カード4辺の任意位置）が無い。
 *
 */

/* --------------------------------------------------------------------------
 * 0. サイト共通トークン
 * -------------------------------------------------------------------------- */
:root {
  --ngs-blue: #0D71BF;
  --ngs-blue-dark: #0A4E7A;
  --ngs-blue-deep: #0A5A99;
  --ngs-orange: #F08A24;
  --ngs-sub: #FFB347;
  --ngs-sub-shadow: #E39B31;
  --ngs-sub-txt: #4A3003;
  --ngs-sub-txt2: #5A3A05;
  --ngs-txt: #123246;
  --ngs-txt-mute: #3C5A6E;
  --ngs-line: #DDECF7;
  --ngs-line2: #BFDDF2;
  --ngs-shadow-blue: #D6E9F7;
  --ngs-bg-pale: #F7FCFF;
  --ngs-bg-light: #EAF5FC;
  --ngs-bg-light2: #F4FBFF;
  --ngs-pale-blue: #A9D6F5;
  --ngs-pale-blue2: #DCEEFB;
  --ngs-inner: 1240px;
  --ngs-inner-pad: 24px;
}

/* デザイン側の body は line-height / letter-spacing の指定がなく、
   各要素が個別に値を持つ。共通CSSの既定値（1.8 / 0.05em）が効くと
   行間が全セクションで膨らむため、初期値に戻して実数を一致させる。
   ※ text-wrap: pretty は指定しない（iOS Safari で、縦並び＋中央寄せの中の文字の
     幅が狭く計算され、カード内で数文字ごとに改行が崩れるため） */
body {
  line-height: normal;
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
 * 1. 共通パーツ：ボタン（pill＋ハードシャドウ＋押し込みホバー）
 *    共通 .btn は角丸10px・枠線2pxで、デザインのpill＋影と形が異なるため追加
 * -------------------------------------------------------------------------- */
.ngs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 var(--ngs-btn-depth, 4px) 0 var(--ngs-btn-shadow, rgba(0, 0, 0, .15));
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.ngs-btn:hover {
  opacity: 1;
  transform: translateY(2px);
  box-shadow: 0 calc(var(--ngs-btn-depth, 4px) - 2px) 0 var(--ngs-btn-shadow, rgba(0, 0, 0, .15));
}
.ngs-btn--sub {
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt);
  --ngs-btn-shadow: var(--ngs-sub-shadow);
}
.ngs-btn--sub:hover {
  color: var(--ngs-sub-txt);
}
.ngs-btn--white {
  background: #fff;
  color: var(--ngs-blue-dark);
  --ngs-btn-shadow: rgba(0, 0, 0, .15);
}
.ngs-btn--white:hover {
  color: var(--ngs-blue-dark);
}
.ngs-btn--base {
  background: var(--ngs-blue);
  color: #fff;
  --ngs-btn-shadow: var(--ngs-blue-deep);
}
.ngs-btn--base:hover {
  color: #fff;
}
.ngs-btn--lg {
  padding: 20px 32px;
  font-size: 1.6rem;
  --ngs-btn-depth: 5px;
}
.ngs-btn--wide {
  display: flex;
  width: 100%;
  padding: 20px 34px;
  font-size: 1.7rem;
  --ngs-btn-depth: 5px;
}
.ngs-btn__num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.4rem;
}

/* 丸アイコンボタン（フッター） */
.ngs-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 2rem;
  transition: background .3s ease;
}
.ngs-icon-btn--base { background: var(--ngs-blue); color: #fff; }
.ngs-icon-btn--base:hover { background: var(--ngs-blue-deep); color: #fff; opacity: 1; }
.ngs-icon-btn--sub { background: var(--ngs-sub); color: var(--ngs-sub-txt); }
.ngs-icon-btn--sub:hover { background: #F0A335; color: var(--ngs-sub-txt); opacity: 1; }

/* --------------------------------------------------------------------------
 * 2. ヘッダー（白いpillが浮くsticky型。共通 .header-bar は全幅ベタのため追加）
 * -------------------------------------------------------------------------- */
.ngs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 14px 18px 10px;
}
.ngs-header__inner {
  max-width: var(--ngs-inner);
  height: auto;
  padding: 8px 12px 8px 20px;
  gap: 14px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(10, 78, 122, .18);
}
.ngs-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.ngs-header__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}
.ngs-header__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ngs-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ngs-header__logo-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ngs-blue-dark);
  letter-spacing: .02em;
  white-space: nowrap;
}
.ngs-header__logo-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .14em;
  color: #7FA8C4;
}
.ngs-header__nav {
  gap: 10px;
  margin-right: 0;
  min-width: 0;
}
.ngs-header__nav .header__nav-item a {
  padding: 6px 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.ngs-header__nav .header__nav-item a::after {
  bottom: 2px;
  background: var(--ngs-blue);
}
.ngs-header__nav .header__nav-ja {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ngs-txt);
}
.ngs-header__nav .header__nav-en {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #9CBFD6;
}
.ngs-header__right {
  gap: 10px;
}
.ngs-header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-size: inherit;
}
.ngs-header__tel::before { content: none; }
.ngs-header__tel-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.1rem;
  letter-spacing: .02em;
  color: var(--ngs-blue-dark);
}
.ngs-header__tel-sub {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ngs-txt-mute);
}
.ngs-header__cta {
  flex-direction: row;
  gap: 8px;
  height: auto;
  padding: 12px 20px;
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt2);
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ngs-sub-shadow);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ngs-header__cta:hover {
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt2);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ngs-sub-shadow);
}
.ngs-header__cta-icon { font-size: 1.8rem; }

@media (max-width: 1240px) {
  .ngs-header__inner { max-width: 100%; }
}
@media (max-width: 1180px) {
  .ngs-header__nav .header__nav-en { display: none; }
}
/* SP（ハンバーガー表示）時は白いpillの背景・影を外し、
   ロゴマークだけを白い丸で囲って視認性を確保する */
@media (max-width: 1100px) {
  .ngs-header { padding: 10px 14px; }
  .ngs-header__inner {
    padding: 8px 14px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .ngs-header__logo-mark {
    width: 44px;
    height: 44px;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(10, 78, 122, .18);
  }
  .ngs-header__logo-name { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .ngs-header__logo-name { font-size: 1.4rem; }
  .ngs-header__logo-en { font-size: 1.1rem; }
}

/* SPナビ：項目の矢印とサブ英字（共通コンポーネントの値を調整） */
.sp-nav__link::after { margin-left: 10px; }
.sp-nav__en { font-size: 1.5rem; }

/* SPナビ下部の電話 */
.ngs-spnav-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
}
.ngs-spnav-tel:hover { color: #fff; }
.ngs-spnav-tel__icon {
  font-size: .7em;
  line-height: 1;
}
.ngs-spnav-hours {
  display: block;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .8);
}

/* --------------------------------------------------------------------------
 * 3. お問い合わせCTA帯
 * -------------------------------------------------------------------------- */
.ngs-cta {
  padding: 64px 0;
  overflow: hidden;
}
.ngs-cta__inner {
  flex-direction: column;
  gap: 0;
  max-width: var(--ngs-inner);
  padding: 0 var(--ngs-inner-pad);
  text-align: center;
}
.ngs-cta__en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  letter-spacing: .24em;
  color: var(--ngs-pale-blue);
}
.ngs-cta__title {
  margin: 8px 0 12px;
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
/* .ngs-cta__inner は縦並び＋中央寄せ（共通CSS）のため、文字の要素は
   横幅いっぱいに広げて中央そろえは text-align で行う（中身から幅を計算させない） */
.ngs-cta__en,
.ngs-cta__title { align-self: stretch; }
.ngs-cta__lead {
  margin: 0 auto 30px;
  width: 100%;
  max-width: 640px;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--ngs-pale-blue2);
}
/* 2つのCTAボタンを同じ幅で並べる。
   grid-auto-columns: minmax(max-content, 1fr) で「内容が最も広いボタン」に
   全カラムの幅が揃うため、電話／メールのボタン幅が一致する。 */
.ngs-cta__btns {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 14px;
  justify-content: center;
}
.ngs-btn__icon {
  font-size: .8em;
  line-height: 1;
}
@media (max-width: 639px) {
  .ngs-cta__btns {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}
.ngs-cta__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  opacity: .35;
}
@media (max-width: 639px) {
  .ngs-cta { padding: 48px 0; }
}

/* --------------------------------------------------------------------------
 * 4. フッター
 * -------------------------------------------------------------------------- */
.ngs-footer {
  background: var(--ngs-bg-pale);
  border-top: 1px solid var(--ngs-line);
}
.ngs-footer__body { padding: 0; }
.ngs-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: var(--ngs-inner);
  padding: 56px var(--ngs-inner-pad);
}
.ngs-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ngs-footer__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
}
.ngs-footer__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ngs-footer__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ngs-footer__logo-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-footer__logo-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem;
  letter-spacing: .16em;
  color: #7FA8C4;
}
.ngs-footer__address {
  margin: 0 0 18px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--ngs-txt-mute);
}
.ngs-footer__tel {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
}
.ngs-footer__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ngs-footer__nav {
  gap: 6px 20px;
  margin-top: 26px;
}
.ngs-footer__nav .footer-body__nav-item {
  font-size: 1.4rem;
  color: var(--ngs-txt-mute);
  transition: color .3s ease;
}
.ngs-footer__nav .footer-body__nav-item:hover {
  color: var(--ngs-blue);
  opacity: 1;
}
.ngs-footer__map {
  width: 100%;
  height: auto;
  min-height: 260px;
  margin-top: 0;
  border: 1px solid var(--ngs-line);
  border-radius: 22px;
  overflow: hidden;
}
.ngs-footer__map .embed { border-radius: 0; }
.ngs-footer__map iframe { display: block; border: 0; height: 300px; }
.ngs-footer__bottom {
  border-top: 1px solid var(--ngs-line);
  background: transparent;
  padding: 0 0 92px;
}
.ngs-footer__copyright {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 18px var(--ngs-inner-pad);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: var(--ngs-txt-mute);
  text-align: left;
}

/* --------------------------------------------------------------------------
 * 5. 画面下の追従CTAバー（PCでも表示するため .sp-fixed-bar とは別部品）
 * -------------------------------------------------------------------------- */
.ngs-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: rgba(10, 78, 122, .97);
  backdrop-filter: blur(4px);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .14);
}
.ngs-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.ngs-bar__copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 0 1 auto;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.4;
  white-space: nowrap;
}
.ngs-bar__copy-sub {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ngs-pale-blue);
}
.ngs-bar__actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.ngs-bar__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.ngs-bar__tel:hover { color: #fff; }
.ngs-bar__tel-row,
.ngs-bar__tel-sub { align-self: stretch; }
.ngs-bar__tel-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 2.2rem;
}
.ngs-bar__tel-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.6rem;
  letter-spacing: .02em;
}
.ngs-bar__tel-sub {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ngs-pale-blue2);
}
.ngs-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 22px;
  border-radius: 14px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .3s ease, border-color .3s ease;
}
.ngs-bar__btn i { font-size: 2rem; }
.ngs-bar__btn--mail { background: var(--ngs-sub); color: var(--ngs-sub-txt); }
.ngs-bar__btn--mail:hover { background: #F0A335; color: var(--ngs-sub-txt); opacity: 1; }
.ngs-bar__btn--line { background: #06C755; color: #fff; }
.ngs-bar__btn--line:hover { background: #05B34C; color: #fff; opacity: 1; }
.ngs-bar__btn--shop {
  background: #fff;
  border: 2px solid var(--ngs-sub);
  color: var(--ngs-blue-dark);
  font-size: 1.3rem;
  padding: 8px 18px;
}
.ngs-bar__btn--shop:hover { background: #FFF8EE; color: var(--ngs-blue-dark); opacity: 1; }
.ngs-bar__btn-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: #B07A2E;
}

@media (max-width: 1100px) {
  .ngs-bar__btn--shop { display: none; }
  .ngs-bar__tel-num { font-size: 2.8rem; }
  .ngs-bar__copy { font-size: 1.5rem; }
  .ngs-bar__copy-sub { display: none; }
}
@media (max-width: 820px) {
  .ngs-bar__copy { display: none; }
}
@media (max-width: 639px) {
  .ngs-bar__inner { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  .ngs-bar__actions { width: 100%; gap: 8px; }
  .ngs-bar__tel { flex: 1 1 auto; padding: 4px; }
  /* 電話番号・受付時間が途中で折り返さないよう1行に固定 */
  .ngs-bar__tel-num { font-size: 2.4rem; white-space: nowrap; }
  .ngs-bar__tel-row { font-size: 1.6rem; gap: 6px; }
  .ngs-bar__tel-sub { font-size: 1rem; white-space: nowrap; }
  .ngs-bar__btn { flex: 0 0 auto; padding: 8px 14px; font-size: 1.2rem; min-height: 50px; }
  .ngs-footer__bottom { padding-bottom: 78px; }
}

/* ページトップボタン：button要素の既定の背景・枠線を消して丸ボタンだけ見せる
   （追従バーと重ならないよう位置も持ち上げる） */
.page-top {
  bottom: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  line-height: 0;
}
@media (max-width: 639px) {
  .page-top { bottom: 90px; }
}

/* --------------------------------------------------------------------------
 * 6. 共通パーツ：セクション見出し（バッジ＋スラッシュ装飾つき／全ページ共通）
 *    共通 .heading 系は英日2段の中央見出しで、デザインの
 *    「上にバッジ or 小見出し＋左右スラッシュ画像」の構成に合わないため追加
 * -------------------------------------------------------------------------- */
.ngs-sec-head {
  text-align: center;
  margin-bottom: 44px;
}
.ngs-sec-head--flow { margin-bottom: 48px; }
.ngs-sec-head__sup {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-sec-head__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 0;
  font-size: clamp(2.6rem, 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ngs-blue-dark);
}
.ngs-sec-head__title--worry { flex-wrap: nowrap; }
.ngs-sec-head__title--reason {
  gap: 16px;
  margin-top: 16px;
  font-size: clamp(2.8rem, 3.8vw, 4.6rem);
  line-height: 1.3;
}
.ngs-sec-head__title--flow { margin-top: 14px; }
.ngs-sec-head__slash {
  flex: 0 0 auto;
  width: clamp(2.6rem, 3.2vw, 4.2rem);
  height: auto;
  display: block;
}
.ngs-sec-head__slash--lg { width: clamp(3rem, 3.6vw, 5rem); }
.ngs-sec-head__slash--flip { transform: scaleX(-1); }
.ngs-sec-head__num-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ngs-sec-head__num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(5.6rem, 8.6vw, 10rem);
  color: var(--ngs-orange);
  line-height: .85;
}

/* 見出し内の差し色・バッジ・マーカー */
.ngs-accent { color: var(--ngs-orange); }
.ngs-badge {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 700;
}
.ngs-badge--base { background: var(--ngs-blue); color: #fff; }
.ngs-badge--sub { background: var(--ngs-sub); color: var(--ngs-sub-txt); }
.ngs-marker { background: linear-gradient(transparent 66%, #CFEAFA 66%); }
.ngs-marker--sub { background: linear-gradient(transparent 62%, #FFD98A 62%); }

/* セクション内側ラッパー（デザインの max-width:1240px / padding:0 24px） */
.ngs-inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
}

/* --------------------------------------------------------------------------
 * 7. 下層ページ共通：ヒーロー / ページラッパー / 余白ヘルパー
 * -------------------------------------------------------------------------- */
.ngs-subhero {
  margin-top: -92px;
  padding: 136px 0 56px;
  background: var(--ngs-bg-light);
  background-image: radial-gradient(var(--ngs-line2) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}
.ngs-subhero--plain {
  background-image: none;
  padding: 120px 0 24px;
}
.ngs-subhero__inner {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
  text-align: center;
}
.ngs-subhero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: clamp(2.8rem, 3.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ngs-blue-dark);
}
.ngs-subhero__title--flush { margin: 0; line-height: normal; }
.ngs-subhero__en {
  padding: 7px 18px;
  border-radius: 999px;
  background: #fff;
  color: #7FA8C4;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  letter-spacing: .16em;
}
.ngs-badge--sm { font-size: 1.4rem; padding: 9px 22px; }
.ngs-badge--xs { font-size: 1.4rem; padding: 8px 20px; }
.ngs-badge--tag { font-size: 1.2rem; padding: 6px 14px; }
.ngs-sec-head__slash--sm { width: clamp(2.4rem, 3vw, 4rem); }

@media (max-width: 1100px) {
  .ngs-subhero { margin-top: -80px; padding: 118px 0 46px; }
  .ngs-subhero--plain { padding: 104px 0 20px; }
}

.ngs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 0 var(--ngs-inner-pad);
  font-size: 1.3rem;
  color: var(--ngs-txt-mute);
}

.ngs-page {
  max-width: var(--ngs-inner);
  margin: 0 auto;
  padding: 64px var(--ngs-inner-pad) 80px;
}
.ngs-page--pb0 { padding-bottom: 0; }
.ngs-page--narrow { max-width: 980px; padding: 56px var(--ngs-inner-pad) 80px; }
.ngs-page--split {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
  padding: 56px var(--ngs-inner-pad) 80px;
}
.ngs-page--split-tight { padding-top: 20px; }

/* 余白ヘルパー（共通 utility の mb-* はタブレット以下で自動半減するため、
   デザインの実数をそのまま保ちたい箇所はこちらを使う） */
.ngs-mb-20 { margin-bottom: 20px; }
.ngs-mb-24 { margin-bottom: 24px; }
.ngs-mb-28 { margin-bottom: 28px; }
.ngs-mb-40 { margin-bottom: 40px; }
.ngs-mb-56 { margin-bottom: 56px; }
.ngs-mb-72 { margin-bottom: 72px; }
.ngs-mb-80 { margin-bottom: 80px; }

/* 自動折返しグリッド（最小カラム幅を --ngs-col で指定） */
.ngs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ngs-col, 280px), 1fr));
  gap: var(--ngs-gap, 20px);
}
.ngs-grid--180 { --ngs-col: 180px; --ngs-gap: 16px; }
.ngs-grid--200 { --ngs-col: 200px; --ngs-gap: 16px; }
.ngs-grid--220 { --ngs-col: 220px; }
.ngs-grid--240 { --ngs-col: 240px; --ngs-gap: 18px; }
.ngs-grid--260 { --ngs-col: 260px; --ngs-gap: 24px; }
.ngs-grid--280 { --ngs-col: 280px; }
.ngs-grid--300 { --ngs-col: 300px; --ngs-gap: 24px; }
.ngs-grid--lead { --ngs-col: 300px; --ngs-gap: 40px; align-items: center; }
.ngs-grid--lead-stretch { --ngs-col: 300px; --ngs-gap: 40px; }

/* --------------------------------------------------------------------------
 * 8. 下層ページ共通：見出し・リード・写真・カード
 * -------------------------------------------------------------------------- */
.ngs-h2 {
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 2.6vw, 3rem);
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-h2-en {
  display: inline-block;
  margin: 0 0 24px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--ngs-bg-light);
  color: var(--ngs-blue);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem;
  letter-spacing: .16em;
}
.ngs-h2-en--sub { background: #FFF3E2; color: #B07A2E; }
.ngs-h2__en-inline {
  margin-left: 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .16em;
  color: #9CBFD6;
}

.ngs-sec-head--sm { margin-bottom: 28px; }
.ngs-sec-head__title--sm {
  display: block;
  margin: 12px 0 0;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  line-height: normal;
}
.ngs-sec-head__title--md {
  display: block;
  margin: 12px 0 0;
  font-size: clamp(2.2rem, 2.8vw, 3.2rem);
  line-height: normal;
}

.ngs-lead__title {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ngs-blue-dark);
}
/* SP：1行目「「◯日で終わらせてほしい」に、」（15文字）が画面幅に収まるよう
   文字サイズを画面幅に合わせて縮め、<br> の位置の2行で表示する */
@media (max-width: 639px) {
  .ngs-lead__title--fit { font-size: min(2.2rem, calc((100vw - 52px) / 15)); }
}
.ngs-lead__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ngs-txt-mute);
}
.ngs-lead__text + .ngs-lead__sign { margin: 20px 0 0; }
.ngs-lead__sign {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-lead__note {
  margin: 6px 0 0;
  font-size: 1.3rem;
  color: var(--ngs-txt-mute);
}

.ngs-figure {
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  min-height: 260px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-figure--tall { min-height: 280px; }
.ngs-figure--sub {
  border: 3px solid #FFD9A8;
  box-shadow: 0 6px 0 #FFD9A8;
}
.ngs-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ngs-card {
  --ngs-card-line: var(--ngs-line2);
  padding: 32px;
  border: 3px solid var(--ngs-card-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 0 var(--ngs-card-line);
}
.ngs-card--sub {
  --ngs-card-line: #FFD9A8;
  background: #FFF8EE;
}
.ngs-card--fill {
  padding: 32px;
  border: 0;
  border-radius: 26px;
  background: var(--ngs-blue);
  color: #fff;
  box-shadow: none;
}
.ngs-card--item {
  padding: 24px;
  border-radius: 22px;
}
.ngs-card__title {
  margin: 0 0 16px;
  font-size: 2.1rem;
  color: var(--ngs-blue-dark);
}
.ngs-card__title--tight { margin-bottom: 12px; }
.ngs-card__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-txt-mute);
}
.ngs-card__text--sub { color: var(--ngs-sub-txt2); }
.ngs-card__label {
  display: block;
  margin-bottom: 6px;
  font-size: 1.7rem;
  color: var(--ngs-blue-dark);
}
.ngs-card__desc {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}

.ngs-minicard {
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ngs-line2);
}
.ngs-minicard__title {
  display: block;
  margin-bottom: 8px;
  font-size: 1.7rem;
  color: var(--ngs-blue-dark);
}
.ngs-minicard__text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}

.ngs-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 22px 26px;
  border: 3px solid #FFD9A8;
  border-radius: 24px;
  background: #FFF8EE;
  box-shadow: 0 6px 0 #FFD9A8;
}
.ngs-notice__text {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--ngs-sub-txt2);
}

/* --------------------------------------------------------------------------
 * 9. 片付け・処分ページ
 * -------------------------------------------------------------------------- */
.ngs-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px;
  border-radius: 24px;
  background: var(--ngs-bg-light);
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-step__icon {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}
.ngs-step__badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--ngs-blue);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  letter-spacing: .12em;
}
.ngs-step__title {
  display: block;
  margin: 8px 0 10px;
  font-size: 2rem;
  color: var(--ngs-blue-dark);
}
.ngs-step__text {
  font-size: 1.5rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}
/* SP：アイコンの横に本文まで並べると本文の幅が狭く読みにくいため、
   「アイコン＋STEP・見出し」を上に並べ、本文はカード幅いっぱいに下へ回す */
@media (max-width: 639px) {
  .ngs-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 24px 22px;
  }
  .ngs-step > div { display: contents; }
  .ngs-step__icon { grid-row: 1 / 3; width: 64px; height: 64px; }
  .ngs-step__badge { justify-self: start; }
  .ngs-step__title { margin: 0; }
  /* 本文は <br>（.ngs-br-sp）で2行に収める。最長行（約19文字）が収まるよう文字サイズを縮める */
  .ngs-step__text {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: min(1.5rem, calc((100vw - 94px) / 19.3));
  }
}

.ngs-daylist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ngs-daylist__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ngs-line);
}
.ngs-daylist__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.ngs-daylist__key { font-weight: 500; white-space: nowrap; }
.ngs-daylist__val { color: var(--ngs-txt-mute); }
.ngs-card__note {
  margin: 16px 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}
.ngs-pricepoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ngs-pricepoint {
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-card__close {
  margin: 18px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ngs-sub-txt2);
}

.ngs-ba {
  border: 3px solid var(--ngs-line2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-ba__img {
  position: relative;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  background: var(--ngs-bg-light);
}
.ngs-ba__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngs-ba__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
}
.ngs-ba__tag--before { background: rgba(10, 78, 122, .92); color: #fff; }
.ngs-ba__tag--after { background: var(--ngs-sub); color: var(--ngs-sub-txt); }
.ngs-ba__body {
  padding: 18px 22px;
  background: #fff;
}
.ngs-ba__title { color: var(--ngs-blue-dark); }
.ngs-ba__text {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
  color: var(--ngs-txt-mute);
}
.ngs-note {
  margin: 0 0 80px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}

/* --------------------------------------------------------------------------
 * 10. リサイクル事業ページ
 * -------------------------------------------------------------------------- */
.ngs-item {
  border: 3px solid #FFD9A8;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 0 #FFD9A8;
}
.ngs-item__img { aspect-ratio: 4 / 3; }
.ngs-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngs-item__body { padding: 18px; }
.ngs-item__body strong { color: var(--ngs-blue-dark); }

.ngs-card__en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .18em;
  color: #9CBFD6;
}
.ngs-card--fill .ngs-card__en { color: var(--ngs-pale-blue); }
.ngs-card__heading {
  margin: 8px 0 12px;
  font-size: 2.4rem;
  color: var(--ngs-blue-dark);
}
.ngs-card--fill .ngs-card__heading { color: #fff; }
.ngs-card--fill .ngs-card__text { color: var(--ngs-pale-blue2); }

.ngs-coupon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: center;
  padding: 36px;
  border: 3px dashed var(--ngs-sub);
  border-radius: 26px;
  background: #FFF8EE;
}
.ngs-coupon__title {
  margin: 12px 0 10px;
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  color: var(--ngs-blue-dark);
}
.ngs-coupon__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-sub-txt2);
}
.ngs-coupon__example {
  font-size: 1.3rem;
  color: #A08560;
}
.ngs-coupon__ticket {
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.ngs-coupon__ticket-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  letter-spacing: .2em;
  color: #D2A86A;
}
.ngs-coupon__ticket-main {
  display: block;
  margin: 8px 0;
  font-size: 3.4rem;
  color: var(--ngs-blue);
}
.ngs-coupon__ticket-note {
  font-size: 1.3rem;
  color: var(--ngs-txt-mute);
}

.ngs-jmty {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
  border-radius: 28px;
  background: var(--ngs-bg-light);
}
.ngs-jmty__img {
  flex: 0 1 260px;
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
.ngs-jmty__img--car { flex-basis: 240px; max-width: 240px; }
.ngs-jmty__body {
  flex: 1 1 320px;
  min-width: 280px;
  text-align: center;
}
.ngs-jmty__title {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  color: var(--ngs-blue-dark);
}
.ngs-jmty__text {
  margin: 0 0 24px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-txt-mute);
}
.ngs-btn--jmty {
  padding: 20px 36px;
  font-size: 1.7rem;
  --ngs-btn-depth: 5px;
}

/* --------------------------------------------------------------------------
 * 11. 不動産会社様向けページ
 * -------------------------------------------------------------------------- */
.ngs-bstep {
  padding: 28px;
  border-radius: 24px;
  background: var(--ngs-bg-light);
}
.ngs-bstep__en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .16em;
  color: var(--ngs-blue);
}
.ngs-bstep__title {
  display: block;
  margin: 8px 0;
  font-size: 1.9rem;
  color: var(--ngs-blue-dark);
}
.ngs-bstep__text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}
.ngs-reasonbox {
  padding: 40px;
  border-radius: 28px;
  background: var(--ngs-bg-light);
  background-image: radial-gradient(var(--ngs-line2) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}

/* --------------------------------------------------------------------------
 * 12. 会社案内ページ
 * -------------------------------------------------------------------------- */
.ngs-profile {
  border: 3px solid var(--ngs-line2);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-profile th,
.ngs-profile td {
  padding: 20px 24px;
  border: 0;
  border-bottom: 1px solid var(--ngs-line);
  vertical-align: top;
}
.ngs-profile th {
  width: 220px;
  min-width: 140px;
  background: var(--ngs-bg-pale);
  font-weight: 700;
  color: var(--ngs-blue-dark);
  white-space: normal;
}
.ngs-profile tr:last-child th,
.ngs-profile tr:last-child td { border-bottom: 0; }
.ngs-profile__tel {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.2rem;
}
@media (max-width: 639px) {
  .ngs-profile th,
  .ngs-profile td { display: block; width: 100%; padding: 14px 18px; }
  .ngs-profile tr:last-child th { border-bottom: 1px solid var(--ngs-line); }
}

.ngs-license {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border-radius: 24px;
}
.ngs-license__img {
  flex: 0 0 120px;
  width: 120px;
  height: 140px;
  border: 1px solid var(--ngs-line);
  border-radius: 14px;
  overflow: hidden;
}
.ngs-license__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngs-license__body {
  flex: 1 1 180px;
  min-width: 0;
}
.ngs-license__title {
  display: block;
  margin: 12px 0 8px;
  font-size: 1.9rem;
  color: var(--ngs-blue-dark);
}
.ngs-license__text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--ngs-txt-mute);
}
.ngs-license__text--sub { color: var(--ngs-sub-txt2); }

.ngs-mapbox {
  border: 3px solid var(--ngs-line2);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-mapbox .embed { border-radius: 0; }
.ngs-mapbox iframe {
  display: block;
  border: 0;
  height: 380px;
}

/* --------------------------------------------------------------------------
 * 13. お問い合わせページ
 * -------------------------------------------------------------------------- */
.ngs-contact-lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: center;
  padding: 32px;
  border-radius: 26px;
  background: #FFF8EE;
}
.ngs-contact-lead__title {
  margin: 0 0 10px;
  font-size: 2.4rem;
  color: var(--ngs-blue-dark);
}
.ngs-contact-lead__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-sub-txt2);
}
/* タブレット幅で2カラムになると見出し・本文の列が狭く1文字落ちするため、899px以下は1カラムにする */
@media (max-width: 899px) {
  .ngs-contact-lead { grid-template-columns: minmax(0, 1fr); }
}
/* SP：左右余白を詰め、見出しは1行（15文字）、本文は <br> の位置の3行
   （最長21文字）に収まるよう、文字サイズを画面幅に合わせて縮める */
@media (max-width: 639px) {
  .ngs-contact-lead { padding: 26px 22px; }
  .ngs-contact-lead__title {
    font-size: min(2.4rem, calc((100vw - 96px) / 15.3));
    white-space: nowrap;
  }
  .ngs-contact-lead__text { font-size: min(1.5rem, calc((100vw - 96px) / 21.3)); }
}
.ngs-contact-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
/* 縦並び＋中央寄せの中の文字は横幅いっぱいに広げる（中身から幅を計算させない） */
.ngs-contact-tel__label,
.ngs-contact-tel__num,
.ngs-contact-tel__note { align-self: stretch; }
.ngs-contact-tel__label {
  font-size: 1.3rem;
  color: var(--ngs-txt-mute);
}
.ngs-contact-tel__num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.6rem;
  line-height: 1.2;
  color: var(--ngs-blue-dark);
}
.ngs-contact-tel__note {
  font-size: 1.2rem;
  color: var(--ngs-txt-mute);
}

.ngs-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ngs-form__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ngs-form__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-form__req {
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #C4501A;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.ngs-form__en {
  margin-left: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .12em;
  color: #9CBFD6;
}
.ngs-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.ngs-form__box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  padding: 26px;
  border: 3px solid var(--ngs-line2);
  border-radius: 22px;
  background: var(--ngs-bg-pale);
}
.ngs-form__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}
.ngs-input {
  padding: 16px 18px;
  border: 1.5px solid var(--ngs-line2);
  border-radius: 14px;
  background: #fff;
  font-size: 1.6rem;
}
.ngs-input:focus { border-color: var(--ngs-blue); outline: none; }
.ngs-form__submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.ngs-btn--submit {
  padding: 22px 56px;
  border: 0;
  font-size: 1.8rem;
  cursor: pointer;
  --ngs-btn-depth: 5px;
}
.ngs-sent {
  padding: 40px;
  border-radius: 24px;
  background: var(--ngs-blue);
  color: #fff;
  text-align: center;
}
.ngs-sent__title {
  display: block;
  margin-bottom: 10px;
  font-size: 2.4rem;
}
.ngs-sent__text {
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--ngs-pale-blue2);
}

/* --------------------------------------------------------------------------
 * 14. お知らせ一覧 / 記事詳細
 * -------------------------------------------------------------------------- */
.ngs-blog {
  flex: 1 1 420px;
  min-width: 0;
}
.ngs-blog__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ngs-blog__item {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 22px;
  border: 3px solid var(--ngs-line2);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 0 var(--ngs-line2);
  transition: border-color .3s ease;
}
.ngs-blog__item:hover { border-color: var(--ngs-blue); opacity: 1; }
/* サムネイルは元画像の縦横比にかかわらず 4:3（640×480）で表示する。
   grid の既定 align-self: stretch だと高さが本文に引きずられて
   aspect-ratio が無効になるため、start 揃えにして比率を固定する。 */
.ngs-blog__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ngs-bg-light);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: #9CBFD6;
}
.ngs-blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ngs-blog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 22px 0;
}
.ngs-blog__date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  color: var(--ngs-txt-mute);
}
.ngs-blog__title {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--ngs-blue-dark);
}
.ngs-blog__excerpt {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ngs-txt-mute);
}
@media (max-width: 639px) {
  .ngs-blog__item { grid-template-columns: minmax(0, 1fr); }
  .ngs-blog__body { padding: 0 20px 20px; }
}

.ngs-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.ngs-pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ngs-line2);
  border-radius: 12px;
  background: #fff;
  color: var(--ngs-blue-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  transition: border-color .3s ease;
}
.ngs-pager__item:hover { border-color: var(--ngs-blue); opacity: 1; }
.ngs-pager__item--current {
  border: 0;
  background: var(--ngs-blue);
  color: #fff;
}
.ngs-pager__item--next {
  width: auto;
  padding: 0 18px;
}

.ngs-side {
  flex: 1 1 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ngs-side__box {
  padding: 24px;
  border-radius: 22px;
  background: var(--ngs-bg-pale);
}
.ngs-side__title {
  display: block;
  margin-bottom: 14px;
  font-size: 1.6rem;
  color: var(--ngs-blue-dark);
}
.ngs-side__title-en {
  margin-left: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: #9CBFD6;
}
.ngs-side__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ngs-side__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.4rem;
  line-height: 1.6;
}
.ngs-side__date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  color: #9CBFD6;
}
.ngs-side__label {
  color: var(--ngs-txt);
  font-weight: 500;
}
.ngs-side__arch { display: flex; flex-direction: column; }
.ngs-side__arch a {
  padding: 11px 0;
  border-bottom: 1px dashed var(--ngs-line);
  font-size: 1.4rem;
}
.ngs-side__arch a:last-child { border-bottom: 0; }
.ngs-side__cta {
  padding: 26px;
  border-radius: 22px;
  background: var(--ngs-sub);
  color: var(--ngs-sub-txt);
  text-align: center;
  font-weight: 700;
  line-height: 1.7;
}
.ngs-side__cta:hover { color: var(--ngs-sub-txt); }
@media (max-width: 896px) {
  .ngs-side { max-width: 100%; }
}

.ngs-article {
  flex: 1 1 420px;
  min-width: 0;
}
.ngs-article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ngs-article__date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  color: var(--ngs-txt-mute);
}
.ngs-article__title {
  margin: 0 0 26px;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ngs-blue-dark);
}
.ngs-article__img {
  margin-bottom: 32px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 6px 0 var(--ngs-line2);
}
.ngs-article__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ngs-article__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 1.6rem;
  line-height: 2.05;
  color: var(--ngs-txt-mute);
}
.ngs-article__body p { margin: 0; }
.ngs-article__body h2 {
  margin: 10px 0 0;
  font-size: 2.2rem;
  color: var(--ngs-blue-dark);
}
.ngs-article__nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--ngs-line);
}
.ngs-article__nav a {
  font-size: 1.4rem;
  font-weight: 700;
}

@media (max-width: 639px) {
  .ngs-page { padding: 44px var(--ngs-inner-pad) 56px; }
  .ngs-page--narrow,
  .ngs-page--split { padding: 40px var(--ngs-inner-pad) 56px; }
  .ngs-card,
  .ngs-card--fill { padding: 24px; }
  .ngs-coupon { padding: 26px; }
  /* 理由ボックス内のカードは枠が二重で文字幅が狭くなるため、余白を詰めて
     最長行（約17文字）が1行に収まるよう文字サイズを画面幅に合わせて縮める */
  .ngs-reasonbox { padding: 22px 18px; }
  .ngs-minicard { padding: 20px; }
  .ngs-minicard__text { font-size: min(1.4rem, calc((100vw - 124px) / 17.4)); }
  .ngs-jmty { padding: 26px 20px; }
  .ngs-license { padding: 22px; }
}

/* 料金の目安カードのリード文（.ngs-lead__text の margin ショートハンドに
   ユーティリティが打ち消されるため、専用クラスで実数を持たせる） */
.ngs-card__lead {
  margin: 0 0 18px;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ngs-sub-txt2);
}

/* デザイン側でインライン配置のバッジ（行ボックスの高さを増やさない） */
.ngs-badge--inline { display: inline; }
/* 送信ボタンはデザイン側に line-height 指定がなく初期値 */
.ngs-btn--submit { line-height: normal; }

/* --------------------------------------------------------------------------
 * 15. 送信完了ページ（thanks.php）
 * -------------------------------------------------------------------------- */
.ngs-thanks {
  padding: 48px 32px;
  border: 3px solid var(--ngs-line2);
  border-radius: 26px;
  background: var(--ngs-bg-pale);
  box-shadow: 0 6px 0 var(--ngs-line2);
  text-align: center;
}
.ngs-thanks__icon {
  display: block;
  margin-bottom: 14px;
  font-size: 5.6rem;
  line-height: 1;
  color: var(--ngs-blue);
}
.ngs-thanks__title {
  display: block;
  margin-bottom: 16px;
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  font-weight: 700;
  color: var(--ngs-blue-dark);
}
.ngs-thanks__text {
  margin: 0 0 20px;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ngs-txt-mute);
}
.ngs-thanks__note {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--ngs-txt-mute);
}
.ngs-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
@media (max-width: 639px) {
  .ngs-thanks { padding: 32px 22px; }
}

/* --------------------------------------------------------------------------
 * 16. CMSフォーム（form-pattern-1）の見た目調整
 *
 * ※ この節だけ !important を使用している。CMS（cms_ajax）が後から DOM を
 *   生成し、CMS側のCSSが後勝ちで当たるため、通常の詳細度では上書きできない。
 *   サイト側で制御したい「送信ボタン」「必須バッジ」に限定して指定する。
 * -------------------------------------------------------------------------- */

/* 送信ボタン：サイト共通の pill＋ハードシャドウ＋押し込みホバーに統一・中央配置 */
.form-pattern-1 .submit-btn,
.submit-btn {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px auto 0 !important;
  padding: 22px 56px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0D71BF !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: normal !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 5px 0 #0A5A99 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.form-pattern-1 .submit-btn:hover,
.submit-btn:hover {
  opacity: 1 !important;
  transform: translateY(2px) !important;
  box-shadow: 0 3px 0 #0A5A99 !important;
}

/* 送信ボタンの親要素が左寄せの場合に備えて中央揃えを担保 */
.form-pattern-1 .submit-area,
.form-pattern-1 .btn-area {
  text-align: center !important;
}
/* :has() 未対応ブラウザで上のルールごと無効化されないよう、別ルールに分ける */
.form-pattern-1 dd:has(> .submit-btn) {
  text-align: center !important;
}

/* 必須バッジ：CMS既定の赤（#ff4f4f）をサイトの必須色に差し替え */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須' !important;
  color: #fff !important;
  background: #C4501A !important;
  border-radius: 6px !important;
}

/* 任意バッジ：CMS既定では content がコメントアウトで非表示のため表示させる。
   色はサイトの中間トーン（ロゴ英字と同じ #7FA8C4）にして必須バッジと対に見せる */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  content: '任意' !important;
  display: inline-block !important;
  color: #fff !important;
  background: #7FA8C4 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
 * 17. SP時の表示調整
 * -------------------------------------------------------------------------- */
/* SPでのみ改行する <br>（PCでは改行位置を変えない） */
.ngs-br-sp { display: none; }
/* 幅375px未満でのみ改行する <br>（小さめのスマホで語の途中の折り返しを防ぐ。375pxちょうどは .ngs-br-sp のみで収まる） */
.ngs-br-xs { display: none; }

@media (max-width: 374px) {
  .ngs-br-xs { display: inline; }
}

@media (max-width: 375px) {
  /* 左右スラッシュ付き見出しは、スラッシュと余白を詰めて見出し文字の幅を確保する */
  .ngs-sec-head__title,
  .ngs-subhero__title { gap: 6px; }
  .ngs-sec-head__slash,
  .ngs-sec-head__slash--sm,
  .ngs-sec-head__slash--lg { width: 2rem; }
  .ngs-badge--xs { font-size: 1.3rem; padding: 8px 14px; }
  /* 下部固定バー：電話番号とボタンが画面幅に収まるよう詰める */
  .ngs-bar__tel-num { font-size: 2rem; }
  .ngs-bar__tel-row { gap: 4px; }
  .ngs-bar__tel-sub { font-size: .9rem; }
  .ngs-bar__btn { padding: 8px 10px; }
  /* 段組みの最小幅（280〜300px）が画面幅を超えて横はみ出しするため、画面幅を上限にする */
  .ngs-grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--ngs-col, 280px), 100%), 1fr)); }
  .ngs-footer__inner { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
}

@media (max-width: 639px) {
  .ngs-br-sp { display: inline; }
  /* SPではフッターのテキストナビを非表示（下部固定CTAバーとグローバルナビで導線は確保） */
  .ngs-footer__nav { display: none; }
}

/* SPでは送信ボタンを画面幅に合わせて縮め、1行を維持する */
@media (max-width: 639px) {
  .form-pattern-1 .submit-btn,
  .submit-btn {
    width: 100% !important;
    max-width: 320px !important;
    padding: 20px 24px !important;
    font-size: 1.6rem !important;
  }
}