/* 本文 = BIZ UDPGothic(ユニバーサルデザインフォント。指示書の「UDフォント推奨」に対応)。
   0とO、1とl、濁点/半濁点を見分けやすい設計なので、本文と数字はこちらを使う。
   見出し・ラベル = Zen Maru Gothic(丸ゴシック)。優しさ・温かみを出すため。
   ※電話番号と料金の数字は読み間違いを避けるためUDのまま維持する。 */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ===== Reset & Base ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #333;
  background: #FFFFFF;
  line-height: 1.8;   /* 行と行の間を1.5行以上確保 */
  font-size: 24px;    /* 通常16pxの1.5倍。シニア向けの基準 */
}

/* ===== Color Variables =====
   コーポレートカラー(オーナー確認済み・確定値):
     まごころブルー #45BDCF(DIC 2163 / ロゴタイプに使用)
     うすグレー     #949495(DIC 653  / マーク・タグラインに使用)

   配色の使い分け(シニア配慮のコントラスト確保):
   【白ベース方針】ページのベースは白。ブルーは面で塗らず、文字・罫線・淡い面で効かせる。
   ページ唯一のベタ塗りをオレンジのCTAにして、電話ボタンを最も目立たせる。

     --sky        まごころブルー。罫線・カードの上罫・アイコン・写真枠に使う。文字は載せない
     --navy       まごころブルーの濃色トーン(同一色相 H=188°)。白地の見出し・数字・本文(4.97:1)
     --blue-ink   淡いブルー面に載せる文字・フォーカスリング
     --tint       セクションを切り替える極薄のブルー(#F5FCFD)
     --tint-strong 見出しの帯に使う薄いブルー(#E3F5F8)。文字は --navy
     --hairline   まごころブルーの淡い罫線(#A9DDE5)
     --orange     見出しの下線など装飾専用(文字は載せない)
     --orange-cta ボタン・帯の地色。白文字で3.16:1
                  ※オレンジ地に置く文字は19px/太字以上にする(大きい文字の基準3:1を使うため)
     --orange-text 白地にオレンジ系の文字を置くとき(4.73:1)
     --line       うすグレー。カードの枠線・構造的な区切り
     --line-soft  うすグレーの淡いトーン。繰り返し並ぶ行の区切り
*/
:root {
  /* 見出し・ラベル用の丸ゴシック(温かみ担当)。数字と本文はUDフォントのまま */
  --font-heading: 'Zen Maru Gothic', 'BIZ UDPGothic', sans-serif;

  --magokoro-blue: #45BDCF;
  --usu-grey: #949495;

  --blue-ink: #0E3F47;
  --navy: #2A7A86;
  --sky: #45BDCF;

  /* オレンジは「文字を載せない装飾」と「白文字を載せるCTA」で明るさを分ける。
     白文字が成立する上限は3:1(大きい文字の基準)で、--orange-cta はその上限 */
  --orange: #E8932F;      /* 見出しの下線など装飾専用。文字は載せない(最も明るい) */
  --orange-cta: #D47B10;  /* ボタン・帯の地色。白文字で3.16:1(白文字の明るさ上限) */
  --orange-text: #A96208; /* 白地にオレンジ系の文字を置くとき(4.73:1) */

  --white: #FFFFFF;
  --grey-bg: #F1F9FA;
  --tint: #F5FCFD;          /* セクションを切り替える極薄のブルー */
  --tint-strong: #E3F5F8;   /* 見出しの帯などに使う薄いブルー */
  --hairline: #A9DDE5;      /* まごころブルーの淡い罫線 */
  --text: #333333;
  --text-light: #5A5A5A;
  /* うすグレーを罫線・区切りに使う(指示書の指定色。白地で3.03:1あり非文字要素の3:1を満たす) */
  --line: #949495;
  --line-soft: rgba(148, 148, 149, 0.38);

  /* 系列会社コーポレートカラー(指示書 p.18 のスクリーンショットからの近似値。
     正式な色は各社ロゴガイドラインで要確認)
     静岡の青緑は元の明るさ(#4FA9B8)だと白文字が2.73:1しか出ないため、
     白文字が通る濃さ(4.81:1 / 6.71:1)に下げている。正式色が判明したら再測定する */
  --corp-shizuoka-teal: #2F7C8A;
  --corp-shizuoka-teal-dark: #26646F;
  --corp-tochigi-green: #1F5B3E;
  --corp-tochigi-green-dark: #16432D;
}

/* スマホだけで効かせる改行。「も。」だけが行送りされるのを防ぐ */
.br-sp { display: none; }

/* 1行あたり45字以内に収める(全角1字=1emなので45emが上限)。
   長い文章が横に伸びすぎると視線が戻れなくなるため */
.hero__desc, .hero-call__hours, .hero-call__code,
.service-note, .pricing-card__note, .pricing-card__footer,
.testimonial-card__text, .testimonials-note,
.flow-step__desc, .faq-item__a, .recruit__desc,
.inline-cta__note, .final-cta__sub, .final-cta__codes,
.corp-footer__note, .b-section__lead {
  max-width: 45em;
}
.service-note, .testimonials-note, .inline-cta__note,
.final-cta__sub, .final-cta__codes, .corp-footer__note {
  margin-inline: auto;
}

/* ===== Utilities ===== */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-header { text-align: center; margin-bottom: 44px; }
.section-heading {
  font-size: 38px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  position: relative;
  display: inline-block;
}
.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--orange);
  margin: 14px auto 0;
}

/* 見出し・ラベルだけ丸ゴシックにして温かみを出す。
   電話番号・料金の数字・本文はUDフォントのまま(読み間違いを防ぐため) */
.top-bar__logo, .hero__main-title, .hero__subtitle, .section-heading,
.service-card__title, .service-card__desc, .pricing-card__header,
.flow-step__title, .faq-item__q, .recruit__heading, .recruit__subheading,
.stat-item__label, .hero-call__lead, .inline-cta__lead, .final-cta__lead,
.btn-primary__label, .floating-call__text, .testimonial-card__tag,
.b-section__title, .b-hero__title, .b-worry__text, .b-recruit__title {
  font-family: var(--font-heading);
}
/* 丸ゴシックは900まであるので、一番大きい見出しは900で温かさを強める */
.hero__main-title { font-weight: 900; }
.section-heading { font-weight: 700; }

/* 改行制御。
   keep-all と overflow-wrap:anywhere の併用は、収まらない行を任意の位置で切るため逆効果だった
   (「キレイにな/って」のように語中で割れ、行頭に「っ」が来る)。
   そこで keep-all は短いラベル・固有名詞だけに限り、文章は通常のCJK折返し＋行頭禁則に任せる。 */
body { line-break: strict; }

.top-bar__logo, .top-bar__phone, .section-heading,
.stat-item__number, .stat-item__label,
.service-card__title,
.pricing-card__header, .pricing-card__time, .pricing-card__price,
.flow-step__title,
.testimonial-card__tag, .final-cta__phone, .floating-call__number,
.btn-primary__num, .corp-footer__code {
  word-break: keep-all;
}

/* 電話番号は絶対に行の途中で割らない */
.top-bar__phone, .final-cta__phone, .floating-call__number,
.btn-primary__num, .flow-step__phone, .corp-footer__tel,
.stat-item__number {
  white-space: nowrap;
}

.top-bar__logo { white-space: nowrap; }

/* キーボード操作時のフォーカス位置を明示 */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
}

/* 固定ヘッダーでアンカーの着地点が隠れないように */
section[id] { scroll-margin-top: 96px; }

/* アイコンは絵文字ではなくインラインSVG(OSごとの見た目差を防ぐため) */
.icon {
  width: 32px; height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--sm { width: 22px; height: 22px; }

/* 写真の差し込み位置を示す枠。素材が届いたら <img> に差し替える */
.photo-ph {
  background-color: #EAF6F8;
  background-image: repeating-linear-gradient(45deg, #EAF6F8, #EAF6F8 12px, #DEF0F3 12px, #DEF0F3 24px);
  border: 2px dashed var(--sky);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: var(--navy);
}
.photo-ph__label { font-size: 20px; font-weight: 700; }
.photo-ph__note { font-size: 18px; color: var(--text-light); line-height: 1.7; }

/* ===== 1. Top Bar ===== */
/* 白ベース:面をブルーで塗らず、文字・罫線・淡い面でブルーを効かせる */
.top-bar {
  background: var(--white);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--sky);
  box-shadow: 0 2px 10px rgba(42,122,134,0.07);
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.top-bar__logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 1px;
}
.top-bar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* 白地の中で唯一のベタ塗り。電話導線を最も目立たせる */
.top-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  background: var(--orange-cta);
  text-decoration: none;
  padding: 8px 20px;
  min-height: 48px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(212,123,16,0.4);
}
.top-bar__note {
  font-size: 18px;
  color: var(--text);
  font-weight: 400;
}

/* ===== 2. Hero ===== */
.hero {
  background: var(--white);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero__decoration {
  position: absolute;
  top: -60px;
  left: -80px;
  width: 500px;
  height: 600px;
  background: var(--sky);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
  opacity: 0.08; /* 本文の上を通るため、可読性を落とさない濃さに抑える */
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__content {
  position: relative;
  /* 文字を大きくした分、説明文をCTAの後ろに回してCTAをファーストビュー内に保つ */
  display: flex;
  flex-direction: column;
}
.hero__main-title { order: 1; }
.hero__subtitle { order: 2; }
.hero-call { order: 3; }
.hero__secondary { order: 4; }
.hero__desc { order: 5; margin: 28px 0 0; }
.hero__main-title {
  font-size: 52px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 14px;
}
.hero__subtitle {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.6;
}
.hero__desc {
  font-size: 24px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 28px;
}
/* 電話に必要な4点(呼びかけ・番号・受付時間・問い合わせコード)を1つの枠にまとめ、
   周囲に余白を作って視線を集める。最大の獲得目標が電話問い合わせのため */
.hero-call {
  background: var(--white);
  border: 2px solid var(--sky);
  border-radius: 14px;
  padding: 18px 20px 16px;
  max-width: 460px;
  box-shadow: 0 4px 18px rgba(42,122,134,0.10);
  text-align: center;
}
.hero-call__lead { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.5; }
.hero-call__btn { width: 100%; justify-content: center; padding-inline: 32px; }
.hero-call__hours { font-size: 20px; font-weight: 700; color: var(--text); margin-top: 10px; line-height: 1.5; }
.hero-call__code { font-size: 19px; color: var(--text-light); margin-top: 4px; line-height: 1.5; }

/* 副導線はテキストリンクにして、オレンジのボタンと競合させない。
   タップ領域は48px以上を維持する */
.hero__secondary { margin-top: 18px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration: none; }
.hero__photo { aspect-ratio: 4 / 3; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange-cta);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 18px 24px;
  min-height: 76px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 6px 20px rgba(212,123,16,0.45);
}
.btn-primary:hover { background: #E88A1C; }
/* ラベルと番号を2段に積む。番号を1行に固定するとラベル側が縦に割れるため */
.btn-primary__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; }
.btn-primary__label {
  font-size: 22px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary__num { font-size: 38px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.15; }
.hero-call .btn-primary__stack, .inline-cta .btn-primary__stack { align-items: center; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  padding: 15px 24px;
  min-height: 56px;
  border: 3px solid var(--navy);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover { background: var(--navy); color: var(--white); }

/* ===== 3. Stats Bar ===== */
.stats-bar {
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 32px 0;
}
.stats-bar .container > .stat-item + .stat-item { border-left: 1px solid var(--hairline); }
.stats-bar .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item__number { font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.stat-item__label { font-size: 20px; color: var(--text); font-weight: 400; margin-top: 4px; }

/* ===== 4. Service Menu ===== */
.service-section { background: var(--tint); padding: 64px 0; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--sky);
  padding: 28px 16px 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(42,122,134,0.06);
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.service-card__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--tint-strong);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.service-card__title { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.service-card__desc { font-size: 19px; color: var(--text-light); line-height: 1.7; }
.service-note {
  text-align: center; font-size: 20px; color: var(--text);
  padding: 24px 0 0; border-top: 1px solid var(--line);
}

/* ===== 5. Pricing ===== */
.pricing-section { background: var(--white); padding: 64px 0; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pricing-card { border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 14px rgba(42,122,134,0.07); }
.pricing-card__header { padding: 18px 24px; font-size: 24px; font-weight: 700; text-align: center; letter-spacing: 1px; }
/* 主力の「かんたんサポート」にまごころブルー、プロサポートは同色の淡いトーンで段差をつける */
.pricing-card__header--blue { background: var(--tint-strong); color: var(--navy); border-bottom: 3px solid var(--sky); }
.pricing-card__header--tint { background: var(--tint); color: var(--navy); border-bottom: 3px solid var(--hairline); }
.pricing-card__header--grey { background: #F4F4F4; color: var(--text); border-bottom: 3px solid var(--usu-grey); }
.pricing-card__body { padding: 28px 24px; }
.pricing-card__price-block { text-align: center; margin-bottom: 24px; }
.pricing-card__time { font-size: 44px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.pricing-card__price { font-size: 62px; font-weight: 700; color: var(--orange-text); line-height: 1.1; }
.pricing-card__price-unit { font-size: 26px; font-weight: 700; }
.pricing-card__badge {
  display: inline-block; background: var(--orange-cta); color: var(--white);
  font-size: 20px; font-weight: 700; padding: 8px 20px; border-radius: 4px; margin-top: 14px;
}
.pricing-card__list { list-style: none; margin-top: 20px; }
.pricing-card__list li {
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 21px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.pricing-card__list li::before { content: '✓'; color: var(--navy); font-weight: 700; font-size: 19px; flex-shrink: 0; }
.pricing-card__footer { padding: 16px 24px 24px; font-size: 19px; color: var(--text-light); }
.pricing-card__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pricing-card__tag-item {
  display: inline-block; background: var(--grey-bg); border: 1px solid var(--line);
  padding: 10px 20px; border-radius: 24px; font-size: 20px; font-weight: 700; color: var(--text);
}
.pricing-card__note { font-size: 20px; color: var(--text); line-height: 1.8; }

/* ===== 6. Testimonials ===== */
.testimonials-section { background: var(--tint); padding: 64px 0; }
.testimonials-note { text-align: center; font-size: 19px; color: var(--text-light); margin: -28px 0 32px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  background: var(--white); padding: 28px 24px 24px; border-radius: 8px;
  border: 1px solid var(--hairline); border-left: 4px solid var(--sky); box-shadow: 0 2px 10px rgba(42,122,134,0.06);
}
.testimonial-card__photo { width: 72px; height: 72px; border-radius: 50%; padding: 6px; margin-bottom: 14px; }
.testimonial-card__photo .photo-ph__label { font-size: 11px; line-height: 1.3; }
.testimonial-card__text { font-size: 21px; color: var(--text); line-height: 1.9; margin-bottom: 18px; }
.testimonial-card__divider { height: 1px; background: var(--line); margin-bottom: 14px; }
.testimonial-card__info { font-size: 19px; color: var(--text-light); margin-bottom: 10px; }
.testimonial-card__tag {
  display: inline-block; background: rgba(69,189,207,0.16); color: var(--blue-ink);
  font-size: 19px; font-weight: 700; padding: 6px 16px; border-radius: 20px;
}

/* ===== 7. Flow (4 steps) ===== */
.flow-section { background: var(--white); padding: 64px 0; }
.flow-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
}
.flow-step { text-align: center; padding: 0 12px; }
.flow-step__number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--white); color: var(--navy);
  border: 3px solid var(--sky);
  font-size: 22px; font-weight: 700; margin-bottom: 12px;
}
.flow-step__icon { color: var(--navy); margin-bottom: 12px; }
.flow-step__icon .icon { width: 40px; height: 40px; }
.flow-step__title { font-size: 23px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.5; }
.flow-step__desc { font-size: 20px; color: var(--text); line-height: 1.8; }
.flow-step__phone { color: var(--orange-text); font-weight: 700; font-size: 22px; }
.flow-arrow {
  display: flex; align-items: center; justify-content: center; padding-top: 24px;
  color: var(--sky);
}
.flow-arrow .icon { width: 28px; height: 28px; stroke-width: 2.4; }

/* ===== 7.5 FAQ ===== */
.faq-section { background: var(--tint); padding: 64px 0; }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 24px 28px; margin-bottom: 14px; }
.faq-item__q { font-size: 23px; font-weight: 700; color: var(--navy); margin-bottom: 10px; display: flex; align-items: baseline; gap: 12px; }
.faq-item__q-mark { font-size: 26px; font-weight: 700; color: var(--orange-text); flex-shrink: 0; }
.faq-item__a { font-size: 21px; color: var(--text); line-height: 1.9; padding-left: 34px; }

/* ===== 8. Recruitment ===== */
.recruit-section { background: var(--tint); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 60px 0; position: relative; overflow: hidden; }

.recruit-section .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 0.8fr; gap: 40px; align-items: center; }
.recruit__heading { font-size: 36px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.recruit__subheading { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 18px; }
.recruit__desc { font-size: 21px; color: var(--text); margin-bottom: 28px; line-height: 1.9; }
/* 一括指定の background は background-color を透明に戻してしまうため、
   濃色の帯の上に置く写真枠では色を分けて指定する */
.recruit__photo {
  aspect-ratio: 4 / 3;
  border-color: var(--sky);
  background-color: #F4FBFC;
  background-image: repeating-linear-gradient(45deg, #F4FBFC, #F4FBFC 12px, #E6F5F7 12px, #E6F5F7 24px);
  border-color: var(--white);
}

/* ===== 9. Final CTA ===== */
.final-cta { background: var(--orange-cta); padding: 52px 0; text-align: center; }
.final-cta__lead { font-size: 28px; font-weight: 700; color: var(--white); margin-bottom: 14px; }
.final-cta__phone-link { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; color: var(--white); }
.final-cta__phone-link .icon { width: 44px; height: 44px; stroke-width: 2; }
/* 375pxでも番号が1行に収まる上限を clamp で確保 */
.final-cta__phone {
  font-size: clamp(28px, 8.6vw, 56px); font-weight: 700; color: var(--white);
  letter-spacing: 1px; line-height: 1.15;
}
.final-cta__sub { font-size: 22px; color: var(--white); margin: 12px 0 16px; font-weight: 700; }
.final-cta__codes { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 0.5px; }

.inline-cta { background: var(--white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 36px 0; text-align: center; }
.inline-cta__lead { font-size: 24px; font-weight: 700; color: var(--blue-ink); margin-bottom: 16px; }
.inline-cta__note { font-size: 20px; color: var(--text); margin-top: 14px; }

/* ===== 10. Simple Footer (region-less fallback) ===== */
.footer { background: var(--navy); padding: 24px 0; text-align: center; }
.footer__copy { font-size: 14px; color: rgba(255,255,255,0.8); }

/* =========================================================
   ===== 系列会社 企業情報ヘッダー/フッター(静岡版・栃木版) =====
   raw/WEBサイト制作指示書.pdf p.18 準拠。
   色は先方サイトのスクリーンショットからの近似値。正式なコーポレートカラーは
   各社ロゴガイドライン/既存サイトで要確認のうえ差し替えること。
   ========================================================= */
.region-switch {
  background: #EEF1F1;
  padding: 6px 0;
  text-align: center;
  font-size: 18px;
}
.region-switch a { color: var(--blue-ink); text-decoration: none; font-weight: 700; margin: 0 8px; }
.region-switch a[aria-current="true"] { color: var(--text-light); font-weight: 400; text-decoration: underline; }

.corp-footer__links {
  background: var(--white);
  text-align: center;
  padding: 14px 0;
  font-size: 19px;
  border-bottom: 1px solid var(--line-soft);
}
/* タップ領域48px以上(規約) */
.corp-footer__links a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--text); text-decoration: none; padding: 0 16px; margin: 0 2px;
}
.corp-footer__links a:hover { text-decoration: underline; }

/* 白文字だと静岡の青緑地で2.73:1しか出ないため濃色文字にする。
   ※系列会社の正式なコーポレートカラーが確定したら再測定が必要 */
.corp-footer__company { padding: 22px 0; color: var(--white); }
.corp-footer__tel { color: inherit; }
.corp-footer__company-name { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.corp-footer__company-sub { font-size: 19px; margin-bottom: 10px; }
.corp-footer__company-addr { font-size: 19px; }

.corp-footer__copyright { padding: 14px 0; text-align: center; font-size: 18px; color: var(--white); }

.corp-footer--shizuoka .corp-footer__company { background: var(--corp-shizuoka-teal); }
.corp-footer--shizuoka .corp-footer__copyright { background: var(--corp-shizuoka-teal-dark); }

.corp-footer--tochigi .corp-footer__company { background: var(--corp-tochigi-green); }
.corp-footer--tochigi .corp-footer__copyright { background: var(--corp-tochigi-green-dark); }

.corp-footer__note {
  background: var(--grey-bg);
  text-align: center;
  padding: 16px 24px;
  font-size: 20px;
  color: var(--text);
  line-height: 1.8;
}
.corp-footer__code { font-weight: 700; color: var(--navy); }

/* ===== 11. Floating Call Button (Mobile / 指示書で最重要指定) ===== */
/* バーは必ず1行に収める。2行に折れると実高が101.9pxになり、
   本文下の余白(72px)を超えてフッターを隠してしまうため。 */
.floating-call {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--orange-cta);
  color: var(--white);
  text-decoration: none;
  text-align: center;
  padding: 8px 12px;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.22);
}
.floating-call .icon { width: 26px; height: 26px; }
.floating-call__text { font-size: 20px; font-weight: 700; }
.floating-call__number { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; }

/* =========================================================
   ===== Responsive breakpoints (1024px / 768px) =====
   ========================================================= */
/* 追従電話ボタンはタッチ機全般で出す(iPad縦768〜834pxで消えていた) */
@media (max-width: 1024px), (hover: none) {
  .floating-call { display: flex; }
  body { padding-bottom: 80px; }
}

@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__photo { order: -1; aspect-ratio: 16 / 9; }
  .hero__main-title { font-size: 40px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-steps { grid-template-columns: 1fr; row-gap: 28px; }
  .flow-arrow { display: none; }
  .recruit-section .container { grid-template-columns: 1fr; }
  .recruit__photo { order: -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  /* スマホは1行の文字数が自然に少なくなるため、基準内で20pxに調整
     (24pxだと1行15字程度まで減り、文章が細切れになって逆に読みにくい) */
  body { font-size: 20px; }
  .container { padding: 0 18px; }
  /* ヘッダーは1段に収める(ロゴ+電話ボタン)。タップ領域は48px以上を維持 */
  .top-bar__note { display: none; }
  .top-bar .container { flex-wrap: nowrap; }
  .top-bar__logo { font-size: 17px; letter-spacing: 0; }
  /* オレンジ地の文字は19px/太字以上にする必要があるため、番号を19pxに保つ。
     ロゴを詰めて1行に収める */
  .top-bar__phone { font-size: 19px; padding: 6px 12px; min-height: 48px; white-space: nowrap; gap: 6px; }
  .top-bar__phone .icon { width: 20px; height: 20px; }
  .top-bar__logo { font-size: 16px; }
  .section-heading { font-size: 30px; }
  /* 電話CTAをファーストビュー内に収めるため、ヒーロー上部を詰める */
  .hero { padding: 16px 0 36px; }
  .hero .container { gap: 24px; }
  .hero__main-title { font-size: 36px; margin-bottom: 8px; }
  .hero__subtitle { font-size: 23px; margin-bottom: 10px; }
  .hero__secondary { margin-top: 12px; }
  .hero__desc { font-size: 20px; }
  .br-sp { display: inline; }
  .hero-call { max-width: none; }
  /* 写真が高いとCTAが下がるため、スマホでは高さに上限を設ける。
     枠が小さくなる分、中の指示書きは1行だけにする(公開時には写真に置き換わる) */
  .hero__photo { max-height: 140px; padding: 12px; overflow: hidden; }
  .hero__photo .photo-ph__label { font-size: 17px; }
  .hero__photo .photo-ph__note { display: none; }
  /* 番号を1行に保ちつつ画面幅いっぱいまで大きくする。
     使える幅は「画面幅 − 132px」、番号の必要幅は「文字サイズ × 8.31」(実測) */
  /* アイコンをラベル行に移したので、番号の左右に余白を取れる */
  .hero-call__btn { padding: 16px 24px; }
  .btn-primary__num { font-size: clamp(22px, 6.6vw, 32px); }
  .btn-primary__label { font-size: 19px; }
  /* 実績帯は3列だと数字が分断され、ラベルが13pxまで落ちるため縦積みにする */
  .stats-bar .container { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .stats-bar .container > .stat-item + .stat-item { border-left: none; border-top: 1px solid var(--hairline); padding-top: 14px; }
  .stat-item__number { font-size: 30px; }
  .stat-item__label { font-size: 20px; }
  .inline-cta__lead { font-size: 22px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .final-cta__phone-link .icon { width: 32px; height: 32px; }
  .corp-footer__links a { display: inline-block; margin: 4px 8px; }

}

@media (max-width: 420px) {
  .floating-call__text { display: none; }
  .floating-call__number { font-size: 26px; }
  .floating-call { gap: 12px; }
}

/* 320px級(iPhone SE 第1世代など)でヘッダーを1行に収める */
/* スマホではヘッダーの電話ボタンをアイコンのみの丸ボタンにする。
   番号は追従バー(26px)とヒーローの電話ブロック(26px)に常時出ているため情報は失われず、
   ロゴを丸ゴシックにして幅が増えても1行に収まる */
@media (max-width: 420px) {
  .corp-footer__company-name { font-size: 22px; }
  .top-bar__phone { font-size: 0; padding: 0; width: 48px; justify-content: center; border-radius: 50%; gap: 0; }
  .top-bar__phone .icon { width: 24px; height: 24px; }
}

@media (max-width: 359px) {
  .service-grid { grid-template-columns: 1fr; }
  /* 最終CTAの番号+アイコンが3.5pxはみ出すため詰める */
  .final-cta__phone-link { gap: 8px; }
  .final-cta__phone-link .icon { width: 26px; height: 26px; }
  .final-cta__phone { font-size: 26px; }
  .recruit__heading { font-size: 26px; }
  .recruit__subheading { font-size: 18px; }
  .top-bar__logo { font-size: 15px; }
}