/* =============================================
   リセット & 基本設定
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* バナーのオレンジ・黒に合わせた配色 */
  --color-orange:      #f5a200;    /* バナーのオレンジ */
  --color-orange-dark: #c47f00;    /* 濃いオレンジ（hover） */
  --color-black:       #1a1a1a;    /* バナーの黒 */
  --color-dark:        #2e2e2e;    /* やや明るい黒 */
  --color-white:       #ffffff;
  --color-text:        #333333;
  --color-text-sub:    #555555;
  --color-border:      #e8d5a0;    /* オレンジ系のボーダー */
  --color-bg:          #fffdf5;    /* 薄いクリーム背景 */
  --color-accent:      #f5a200;

  --font-main: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --max-width: 1100px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
}

a {
  color: var(--color-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================
   共通レイアウト
   ============================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* =============================================
   お知らせバー
   ============================================= */
.topbar {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  font-size: 0.85rem;
  padding: 6px 16px;
}

/* =============================================
   ヘッダー
   ============================================= */
.header {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-orange);
  padding: 12px 0;
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.header__banner {
  height: 180px;
  width: auto;
  max-width: 840px;
}

.header__contact {
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-sub);
}

.header__freedial {
  display: block;
  text-decoration: none;
  margin-bottom: 6px;
}

.header__freedial:hover {
  text-decoration: none;
  opacity: 0.8;
}

.header__freedial__label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-sub);
}

.header__freedial__number {
  display: block;
  font-size: 1.9rem;
  font-weight: bold;
  color: var(--color-orange);
  letter-spacing: 0.05em;
}

.header__tel {
  display: block;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-black);
}

/* =============================================
   ヒーロー
   ============================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 4px solid var(--color-orange);
  padding: 58px 24px 48px;
  text-align: center;
}

/* 右上：バナーのオレンジ帯を思わせる控えめな角飾り */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background: var(--color-orange);
  opacity: 0.08;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--color-orange-dark);
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}

.hero__catch {
  font-size: 2.15rem;
  font-weight: bold;
  color: var(--color-black);
  line-height: 1.55;
  margin-bottom: 18px;
}

.hero__catch .hl {
  position: relative;
  white-space: nowrap;
}

.hero__catch .hl::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 0.4em;
  background: var(--color-orange);
  opacity: 0.35;
  z-index: -1;
  border-radius: 2px;
}

.hero__sub {
  font-size: 0.98rem;
  color: #555;
  margin-bottom: 18px;
}

.hero__price {
  display: inline-block;
  background: var(--color-orange);
  color: #fff;
  font-weight: bold;
  padding: 7px 22px;
  border-radius: 50px;
  font-size: 0.92rem;
  margin-bottom: 22px;
}

.hero__price strong {
  font-size: 1.25rem;
  margin: 0 2px;
}

.hero__note {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 26px;
}

/* 選ばれる理由：3カード */
.hero__reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 20px;
}

.hero__reason {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 18px 10px 16px;
}

.hero__reason-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #fff6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange-dark);
  font-weight: bold;
}

.hero__reason-num {
  font-size: 1.15rem;
  line-height: 1;
}

.hero__reason-num span {
  font-size: 0.6rem;
  margin-left: 1px;
}

.hero__reason strong {
  display: block;
  font-size: 0.88rem;
  color: var(--color-black);
  margin-bottom: 4px;
}

.hero__reason p {
  font-size: 0.74rem;
  color: #666;
  line-height: 1.55;
  margin: 0;
}

.hero__meta {
  font-size: 0.82rem;
  color: #777;
}

/* =============================================
   ナビゲーション
   ============================================= */
.nav {
  background: #6bb8d4;
  border-bottom: 3px solid var(--color-orange);
}

.nav__list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.nav__item a {
  display: block;
  color: var(--color-white);
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  /* 各ボタンを邪魔にならない細い白線で囲んで区切る */
  border: 1px solid rgba(255, 255, 255, 0.55);
  margin-left: -1px;   /* 隣り合う枠線の重なりを1本に見せる */
  transition: background 0.2s, color 0.2s;
}

.nav__item:first-child a {
  margin-left: 0;
}

.nav__item a:hover {
  background: var(--color-orange);
  color: var(--color-black);
  border-color: var(--color-orange);
  text-decoration: none;
  opacity: 1;
}


/* =============================================
   メインコンテンツ
   ============================================= */
.main {
  padding: 30px 0 50px;
}

.intro-heading {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-black);
  margin-bottom: 14px;
}

.intro-text {
  font-weight: bold;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.layout__main {
  flex: 1;
  min-width: 0;
}

.layout__side {
  width: 260px;
  flex-shrink: 0;
}

.section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.section__title {
  background: #6bb8d4;
  color: var(--color-white);
  font-size: 1rem;
  padding: 10px 16px;
  border-left: 4px solid var(--color-orange);
}

.topics-list {
  padding: 16px;
}

.topics-list__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.topics-list__item:last-child {
  border-bottom: none;
}

.topics-list__item a {
  font-weight: bold;
  color: var(--color-dark);
  display: block;
  margin-bottom: 6px;
}

.topics-list__item a:hover {
  color: var(--color-orange-dark);
}

.topics-list__item p {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  padding-left: 16px;
}

/* サイドバー */
.sidebar-section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}

.sidebar-section__title {
  background: var(--color-orange);
  color: var(--color-black);
  font-size: 0.9rem;
  font-weight: bold;
  padding: 8px 14px;
  text-align: center;
}

.sidebar-section__body {
  padding: 14px;
  font-size: 0.9rem;
}

.sidebar-section__body p {
  margin-bottom: 8px;
}

.badge-certified {
  text-align: center;
  padding: 10px 8px;
  border: 2px solid var(--color-orange);
  border-radius: 4px;
}

.badge-certified__title {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-black);
  line-height: 1.6;
  margin-bottom: 6px;
}

.cert-number {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  text-align: center;
  line-height: 1.7;
}

.payment-text {
  font-size: 0.82rem;
  color: var(--color-text-sub);
}

/* =============================================
   サブページ タイトルエリア
   ============================================= */
.page-title-section {
  padding: 50px 0 40px;
  text-align: center;
}

.page-title {
  font-size: 1.8rem;
  color: var(--color-black);
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-orange);
}

/* =============================================
   工事事例ギャラリー（works）
   ============================================= */
.works-intro {
  margin: 0 0 28px;
  line-height: 1.7;
}

.works-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 50px;
}

.works-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.works-item__img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f0ece0;
  overflow: hidden;
}

.works-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-item__body {
  padding: 16px 18px 20px;
}

.works-item__title {
  font-size: 1.15rem;
  color: var(--color-black);
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 4px solid var(--color-orange);
}

.works-item__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* --- 一覧カード：クリックで詳細ページへ --- */
.works-item--link {
  transition: box-shadow 0.2s, transform 0.2s;
}

.works-item--link:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  transform: translateY(-3px);
}

.works-item__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.works-item__link:hover {
  text-decoration: none;
  opacity: 1;
}

/* 写真枚数バッジ（サムネイル左下） */
.works-item__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(26, 26, 26, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 50px;
}

/* 「詳しく見る →」 */
.works-item__more {
  display: inline-block;
  margin-top: 12px;
  color: var(--color-orange-dark);
  font-size: 0.9rem;
  font-weight: bold;
}

.works-item--link:hover .works-item__more {
  text-decoration: underline;
}

/* --- 詳細ページ：一覧へ戻るリンク --- */
.works-back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--color-dark);
  font-size: 0.92rem;
  font-weight: bold;
}

.works-back:hover {
  color: var(--color-orange-dark);
  opacity: 1;
}

.works-back--bottom {
  margin-top: 36px;
  margin-bottom: 0;
}

/* --- 工程付き事例（施工前→工事中→完成） --- */
.works-case {
  margin-bottom: 50px;
}

.works-case__title {
  font-size: 1.3rem;
  color: var(--color-black);
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 5px solid var(--color-orange);
}

.works-case__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* --- 工事事例ページ：注意書きの囲み --- */
.works-notice {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #fff8e8;
  border: 2px solid var(--color-orange);
  border-radius: 6px;
}

.works-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
  margin: 0 auto;
}

.works-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.works-step__label {
  display: block;
  background: var(--color-orange);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 6px 12px;
}

.works-step__label--done {
  background: #2e8b57;
}

.works-step__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0ece0;
  overflow: hidden;
}

.works-step__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-step__cap {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  padding: 10px 12px 12px;
}

/* =============================================
   メール問い合わせボタン
   ============================================= */
.contact-cta {
  background: var(--color-white);
  border-top: 2px solid var(--color-border);
  padding: 32px 0;
  text-align: center;
}

.contact-cta__text {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 16px;
}

.contact-cta__btn {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-black);
  font-weight: bold;
  padding: 14px 48px;
  border-radius: 4px;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s;
}

.contact-cta__btn:hover {
  background: var(--color-orange-dark);
  text-decoration: none;
  opacity: 1;
}

/* =============================================
   フローティング通話ボタン
   ============================================= */
.floating-call {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-orange);
  color: var(--color-black);
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  z-index: 1000;
  transition: background 0.2s, transform 0.2s;
}

.floating-call:hover {
  background: var(--color-orange-dark);
  transform: translateY(-2px);
  text-decoration: none;
  opacity: 1;
}

.floating-call__label {
  display: block;
  font-size: 0.7rem;
}

.floating-call__number {
  display: block;
  font-size: 1rem;
}

/* =============================================
   お問い合わせフォーム
   ============================================= */
.form-section {
  max-width: 680px;
  margin: 0 auto 48px;
}

.form-intro {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 18px;
  line-height: 1.8;
}

.form-intro__note {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--color-text-sub);
}

.form-required-mark {
  color: #c0392b;
  font-weight: bold;
}

/* 営業・勧誘お断りの注意ボックス */
.form-notice {
  background: #fff7e6;
  border: 1px solid var(--color-orange);
  border-left: 5px solid var(--color-orange);
  border-radius: 6px;
  padding: 11px 15px;
  margin-bottom: 24px;
}

.form-notice__title {
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--color-orange-dark);
  margin-bottom: 4px;
}

.form-notice__text {
  font-size: 0.74rem;
  color: var(--color-text-sub);
  line-height: 1.65;
}

/* 文字数カウンター */
.form-counter {
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-text-sub);
  margin-top: 6px;
}

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px 36px;
}

.form-group {
  margin-bottom: 22px;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 6px;
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: var(--font-main);
  color: var(--color-text);
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #6bb8d4;
  box-shadow: 0 0 0 3px rgba(107, 184, 212, 0.2);
  background: var(--color-white);
}

.form-textarea {
  resize: vertical;
  min-height: 160px;
}

/* 添付ファイル */
.form-file {
  width: 100%;
  border: 1px dashed #bbb;
  border-radius: 4px;
  padding: 12px;
  font-size: 0.95rem;
  font-family: var(--font-main);
  color: var(--color-text);
  background: #fafafa;
  cursor: pointer;
}

.form-file:focus {
  outline: none;
  border-color: #6bb8d4;
  box-shadow: 0 0 0 3px rgba(107, 184, 212, 0.2);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  margin-top: 8px;
  line-height: 1.6;
}

.form-submit-wrap {
  text-align: center;
  margin-top: 28px;
}

.form-submit {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-black);
  font-weight: bold;
  font-size: 1rem;
  font-family: var(--font-main);
  padding: 14px 60px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.form-submit:hover {
  background: var(--color-orange-dark);
}

/* 送信結果ボックス */
.result-box {
  max-width: 580px;
  margin: 0 auto 48px;
  border-radius: 8px;
  padding: 36px 40px;
  text-align: center;
}

.result-box--success {
  background: #f0faf4;
  border: 2px solid #27ae60;
}

.result-box--error {
  background: #fdf4f4;
  border: 2px solid #c0392b;
}

.result-box__title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.result-box--success .result-box__title { color: #27ae60; }
.result-box--error   .result-box__title { color: #c0392b; }

.result-box__text {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 24px;
}

.result-box__list {
  list-style: disc;
  text-align: left;
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 2;
}

.result-box__btn {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-black);
  font-weight: bold;
  padding: 12px 40px;
  border-radius: 4px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s;
}

.result-box__btn:hover {
  background: var(--color-orange-dark);
  text-decoration: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .contact-form {
    padding: 24px 20px;
  }
  .result-box {
    padding: 28px 20px;
  }
}

/* =============================================
   会社案内（about）共通
   ============================================= */
.about-section {
  margin-bottom: 48px;
}

.about-section__title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-black);
  padding: 10px 0 10px 14px;
  border-left: 4px solid var(--color-orange);
  margin-bottom: 20px;
}

/* 代表あいさつ */
.greeting-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px 28px;
}

.greeting-box__text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* 会社概要テーブル */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.company-table th,
.company-table td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.7;
}

.company-table th {
  background: #eef7fc;
  font-weight: bold;
  color: var(--color-black);
  width: 140px;
  white-space: nowrap;
}

.company-table td a {
  color: var(--color-dark);
}

.company-table td a:hover {
  color: var(--color-orange-dark);
}

/* 事業内容リスト */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.service-list li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-orange);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--color-text);
}

/* 対応エリア */
.area-text {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 16px;
}

.map-wrap {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-wrap iframe {
  display: block;
}

/* =============================================
   キャンペーンセクション
   ============================================= */
.campaign-section {
  margin-bottom: 40px;
}

.campaign-section__title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-black);
  padding: 10px 0 10px 14px;
  border-left: 4px solid var(--color-orange);
  margin-bottom: 20px;
}

.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.campaign-item {
  background: var(--color-white);
  border: 2px solid var(--color-orange);
  border-radius: 8px;
  padding: 24px 28px;
}

.campaign-item__badge {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-black);
  font-size: 0.78rem;
  font-weight: bold;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.campaign-item__title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 12px;
}

.campaign-item__desc {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.8;
}

.campaign-item__note {
  font-size: 0.82rem;
  color: var(--color-text-sub);
}

.campaign-item__img {
  display: block;
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 4px 0 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

/* =============================================
   よくある質問
   ============================================= */
.faq-section {
  margin-bottom: 40px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.faq-q,
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  font-size: 0.95rem;
  line-height: 1.8;
}

.faq-q {
  background: #eef7fc;
  font-weight: bold;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-border);
}

.faq-a {
  color: var(--color-text);
}

.faq-q__label,
.faq-a__label {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 2px;
}

.faq-q__label {
  background: #6bb8d4;
  color: var(--color-white);
}

.faq-a__label {
  background: var(--color-orange);
  color: var(--color-black);
}

/* =============================================
   フッター
   ============================================= */
.footer {
  background: var(--color-black);
  color: var(--color-white);
  /* 下部は通話フロートボタンに隠れないよう余白を広めに確保 */
  padding: 28px 0 140px;
  text-align: center;
  border-top: 3px solid var(--color-orange);
}

.footer__copy {
  font-size: 0.85rem;
  opacity: 0.8;
}

.footer__powered {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-left: 14px;
}

.about-mail-notice {
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.6em;
  line-height: 1.7;
}

.footer__notice {
  font-size: 0.85rem; /* コーポレート表記（.footer__copy）と同サイズ */
  line-height: 1.8;
  opacity: 0.65;
  margin-top: 3.4em; /* コピーライトとの間に約2行分の余白 */
}

/* =============================================
   レスポンシブ（スマホ対応）
   ============================================= */
@media (max-width: 768px) {

  .header__inner {
    flex-direction: column;
    text-align: center;
  }
  .header__logo {
    width: 100%;
  }
  .header__logo a {
    display: block;
    max-width: 400px;
    margin: 0 auto;
  }
  .header__banner {
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .header__contact {
    text-align: center;
  }
  .header__freedial__number {
    font-size: 1.5rem;
  }

  .hero {
    padding: 44px 18px 36px;
  }
  .hero__catch {
    font-size: 1.5rem;
    margin-bottom: 14px;
  }
  .hero__sub {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }
  .hero__note {
    font-size: 0.78rem;
    margin-bottom: 20px;
  }
  .hero__reasons {
    gap: 8px;
    margin-bottom: 16px;
  }
  .hero__reason {
    padding: 14px 6px 12px;
  }
  .hero__reason strong {
    font-size: 0.76rem;
  }
  .hero__reason p {
    font-size: 0.66rem;
  }
  .hero__meta {
    font-size: 0.76rem;
  }

  .nav__list {
    flex-direction: column;
  }
  .nav__item a {
    padding: 12px 16px;
    margin-left: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-top: none;
  }

  .layout {
    flex-direction: column;
  }
  .layout__side {
    width: 100%;
  }

  .floating-call {
    bottom: 16px;
    right: 16px;
    left: 16px;
    border-radius: 12px;
    padding: 14px 20px;
  }

  .floating-call__number {
    font-size: 1.2rem;
  }

  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-table th {
    width: 100px;
  }

  .footer {
    padding-bottom: 150px;
  }
}