/* ===== Hero（動画背景＋テキストは base 色） ===== */
.hero{position:relative;min-height:82vh;isolation:isolate;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;height:82vh;padding:0 20px;background:rgba(0,0,0,.30);
  color:var(--base); /* ← #00/TOP/リードを base 色に */
}

/* デコ（斜め帯＆透かし英字） */
.hero-slope{position:absolute;z-index:1;pointer-events:none;width:140vw;height:36%;left:-20vw;top:22%;
  background:rgba(0,0,0,.045);transform:skewY(-8deg);transform-origin:50% 0;}
.hero-watermark{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;font-weight:700;color:#0f1a36;opacity:.035;
  font-size:clamp(120px,20vw,360px);text-transform:capitalize;letter-spacing:.005em}

.hero-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:.75rem}
.hero-title{font-weight:700;letter-spacing:-.01em;line-height:1.1;font-size:clamp(28px,4.8vw,48px);margin:0}
.hero-lead{margin-top:12px;font-size:clamp(16px,2.2vw,20px)}
.hero-buttons{display:flex;gap:12px;margin-top:22px}
.btn-primary{background:var(--brand);color:#fff;padding:.8rem 1.6rem;border-radius:14px;text-decoration:none;font-weight:700}
.btn-outline{border:2px solid var(--base);color:var(--base);padding:.8rem 1.6rem;border-radius:14px;text-decoration:none;font-weight:700}
.hero-sub{font-size:12px;margin-top:10px;opacity:.9}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.85);padding-left:18px}
.scroll-cue::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:10px;height:10px;border-left:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);transform:translate(-6px,-1px) rotate(-45deg)}

/* ===== Section 共通（斜め帯は切れない） ===== */
.sec{ 
  position:relative; isolation:isolate; background:#f7f6f2; overflow:hidden;
  --slope-top: 18%;
  --slope-h: 38%;
}
.sec::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:140vw; height:var(--slope-h); left:-20vw; top:var(--slope-top);
  background:rgba(0,0,0,.045); transform:skewY(-8deg); transform-origin:50% 0;
}
.sec::before{content:attr(data-watermark);position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.005em;color:#0f1a36;opacity:.035;text-transform:capitalize;font-size:clamp(120px,20vw,360px)}
.sec__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:6rem 16px 3rem}


/* --- HOME だけ黄色ラインを消す --- */
.is-home .sec__en::before{
  content: none !important;
  display: none !important;
}

/* セクション番号（18px＋指定色） */
.sec__num{font-weight:500;letter-spacing:.18em;font-size:18px;margin-bottom:.75rem;text-transform:uppercase}
#Features  .sec__num{color:#fcb733}
#service .sec__num{color:#fa8e2d}
#works   .sec__num{color:#fd4e2c}
#company .sec__num{color:#fe2431}
#contact .sec__num{color:#ff0e75}

/* 画像を外したコンパクト版用：帯の位置と高さを固定値に */
.sec--compact{ --slope-top: 8rem; --slope-h: 14rem; }

@media (max-width: 768px){  .sec--compact{ --slope-top: 5rem; --slope-h: 10rem; }}


/* 英字見出し */
.sec__en{font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:-.01em;text-transform:capitalize;margin:0;color:var(--navy);
  line-height:.98;font-size: clamp(48px, 8vw, 120px);}

/* リード */
.sec__lead {
  margin-top: 1.8rem; /* 少し余白をタイトに */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Regularでシャープに */
  font-size: clamp(14px, 1.2vw, 18px); /* 少し小ぶり */
  color: #142a5a; /* ネイビー */
  text-align: center;
  line-height: 1.8; /* ゆとりを持たせる */
  letter-spacing: 0.02em; /* わずかに広げて上品に */
}

/* グリッド */
.grid-3{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.gap-10{gap:40px}

/* カード */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.card__title{margin:0 0 6px;color:var(--brand);font-weight:700}
.card__text{margin:0;color:#374151}



/* 中央揃えカード＋アイコン */
.card--center{  text-align:center;  padding-top:28px; }
.card__icon{  width:192px; height:192px;  display:block;  margin:0 auto 12px;  object-fit:contain;  filter: none;                  /* そのままの色で表示（オレンジ推奨） */}
@media (min-width:1024px){  .card__icon{ width:216px; height:216px; margin-bottom:14px; }}

/* タイトルと本文の間隔を少し広げて整える */
.card--center .card__title{ margin:8px 0 8px; }
.card--center .card__text{  line-height:1.9; }


/* サービス（写真主役） */
.relCard{position:relative;overflow:hidden;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.relCard img{display:block;width:100%;height:20rem;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.relCard:hover img{transform:scale(1.02)}
/* 画像オーバーレイ：左下寄せ・縦並び */
.relCard__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;     /* 縦並び固定 */
  justify-content:flex-end; align-items:flex-start; /* 左下に寄せる */
  text-align:left;                         /* 左揃え */
  padding:1.4rem 1.6rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.68));
  
}


/* タイトル（1行目） */
.relCard__overlay h3{  margin:0 0 .35rem;  font-size:clamp(18px, 1.6vw, 22px);  font-weight:700;  line-height:1.3;  color:#fff;}

/* 説明文（2行目） */
.relCard__overlay p{  margin:0;  font-size:clamp(12px, 1.1vw, 14px);  line-height:1.7;  color:rgba(255,255,255,.95);  max-width:32ch;    /* 読みやすい行幅 */}

/* ===== WORKS（Before/After 横長＆高さ大きめ） ===== */
.works-grid{  display:grid;  grid-template-columns: 1fr;  gap:16px;                     /* 少し余白を広げて大きさにバランスを取る */}
@media (min-width:768px){  .works-grid{ grid-template-columns: repeat(2, 1fr); }}

.work{  position:relative;  border-radius:20px;  overflow:hidden;  box-shadow:0 8px 24px rgba(0,0,0,.08);  background:#000;}

.work img{  display:block;  width:100%;  height:clamp(240px, 35vw, 400px);  /* ← 高さをしっかり大きめに */  object-fit:cover;  transition:transform .6s ease;}
.work:hover img{ transform:scale(1.03); }

/* 帯ラベル */
.work__label{  position:absolute; left:0; right:0; bottom:0;  padding:10px 8px;               /* 少し大きめにして見やすく */  text-align:center; font-weight:700;  font-size:clamp(13px,1.2vw,16px); letter-spacing:.05em;}
.work__label--before{ background:rgba(22,46,102,.8); color:#fff; }
.work__label--after { background:rgba(255,255,255,.8); color:#162e66; }



/* COMPANY テーブル */
.company{display:grid;gap:12px}
.company > div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.company dt{color:#6b7280}
.company a{color:var(--brand);text-decoration:none}
.company a:hover{text-decoration:underline}

/* CTA中央 */
.cta-center{display:flex;gap:12px;justify-content:center;margin-top:18px}

/* ===== CONTACT（ピンクの角丸＋フォーム） ===== */
/* Contact セクションだけ、斜め帯と英字透かしを消す */
#contact.sec::after,
#contact.sec::before{
  content: none !important;   /* 生成自体を止める */
  display: none !important;   /* 念のため */
}

:root{
  --contact-pink:#f2dec9; /* ピンク枠色（必要なら調整） */
}

.contact-box{
  background:var(--contact-pink);
  border-radius:28px;
  padding:3.5rem 1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* タイトル&リードをピンク箱の中でこのサイトの雰囲気に寄せる */
.contact-head{
  text-align:left;
  max-width:1000px; /* タイトルの読みやすい横幅 */
  margin:0 auto 1.8rem;
}
.contact-head .sec__num{ color:#ff0e75; }          /* あなたの番号カラー設計に合わせたまま */
.contact-head .sec__en{ color:var(--navy); }       /* 英字はネイビー */
.contact-head .sec__lead{ color:var(--navy); }     /* リードもネイビー寄りで可読性UP */

/* フォームカード（白） */
.contact-form{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  max-width:1000px;   /* Serviceなどと同じコンテナ内に収めつつ、見本級のワイド感 */
  margin:0 auto;
}

.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.form-row label{ font-size:14px; color:#374151; font-weight:600; }
.req{
  display:inline-block; margin-left:.4em;
  background:var(--brand); color:#fff;
  font-size:11px; line-height:1; padding:.28em .5em; border-radius:6px;
}

/* テキスト/メール/セレクト/テキストエリアだけに適用 */
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea{
  appearance:none;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  color:#111827;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

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

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  background:#fff;
  border-color: rgba(223,141,48,.55);
  box-shadow: 0 0 0 3px rgba(223,141,48,.18);
}

/* プライバシー同意＆送信 */
.form-privacy{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:8px 0 18px; flex-wrap:wrap;
}
.chk{ display:flex; align-items:center; gap:8px; font-size:14px; color:#374151; }
.policy-link{ font-size:13px; color:var(--brand); text-decoration:underline; }
.policy-link:hover{ opacity:.9; }

.btn-submit{
  display:inline-block; width:100%;
  background:var(--brand); color:#fff;
  border:0; border-radius:14px; padding:14px 18px;
  font-weight:700; font-size:16px; cursor:pointer;
  transition:transform .02s ease, filter .2s ease;
}
.btn-submit:hover{ filter:brightness(1.02); }
.btn-submit:active{ transform:translateY(1px); }

.form-note{ margin-top:10px; font-size:12px; color:#6b7280; text-align:center; }
.form-note a{ color:var(--brand); }

/* 余白バランス（モバイルで窮屈にならないように） */
@media (min-width:768px){
  .contact-box{ padding:4rem 2rem; }
}

/* 画像との間を少し詰める（必要なら） */
.cta-center{ margin-top:16px; display:flex; justify-content:center; }

/* ===== アウトライン版（通常=枠＆文字が紺、hover=塗りつぶし） ===== */
.btn-service{
  --h:56px;                         /* ボタン高さ（雰囲気に近い） */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;                         /* 文字と矢印の間 */
  height:var(--h);
  padding:0 32px;                   /* 横の余白で幅が決まる */
  border-radius:9999px;             /* ピル型 */
  font-weight:700;
  font-size:clamp(14px,1.4vw,18px); /* 文字サイズは以前と同じトーン */
  text-decoration:none;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
}

.btn-service--outline{
  color:var(--navy);
  background:transparent;
  border:2px solid var(--navy);
}
.btn-service--outline:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-1px);
}

/* 矢印（常に矢印のまま） */
.btn-service .icon-chevron{
  width:10px;
  height:10px;
  border-right:3px solid var(--navy);
  border-bottom:3px solid var(--navy);
  transform:rotate(-45deg);
  transition:border-color .25s, transform .2s ease;
}
.btn-service--outline:hover .icon-chevron{
  border-color:#fff;                /* 塗りつぶし時は白矢印 */
  transform:translateX(2px) rotate(-45deg);
}

/* キーボードフォーカス */
.btn-service:focus-visible{
  outline:3px solid rgba(223,141,48,.25);
  outline-offset:3px;
}
/* Features のカードは padding を元に戻す */
#Features .card { 
  padding: 24px;  /* ← 元のまま */
}

/* アイコン画像専用の余白調整 */
#Features .card__icon {
  display: block;
  margin-top: -12px;   /* 上だけ詰める */
  margin-bottom: -12px; /* 下はテキストとの余白を確保 */
}
/* アイコンの余白調整 */
#Features .card__icon {
  display: block;
  margin: 0 auto 8px; /* 下にだけ少し余白 */
  width: 160px;       /* 必要に応じてサイズ調整 */
  height: auto;
}

/* タイトルとテキストの余白を詰める */
#Features .card__title {
  margin: 0 0 6px;  /* 上余白をゼロに */
}
/* ワンストップアイコンと自社施工アイコンだけ大きくする */
#Features .card__icon[alt="見積りアイコン"],
#Features .card__icon[alt="ワンストップアイコン"],
#Features .card__icon[alt="自社施工アイコン"] {
  width: 200px !important;  /* ← 2倍に拡大 */
  height: auto !important;  /* アスペクト比を保持 */
}
/* Serviceカード下の余白を控えめに＆CTAを少し引き上げる */
#service .container.pb-24 { padding-bottom: 18px; }   /* 例: 24 → 12 */
#service .service-cta { margin-top: -8px; }           /* さらに微調整したい時は -4〜-16px で調整 */
/* 1) CTAを前面に（もし上に何かがかぶっていた場合に備えて） */
#service .service-cta { position: relative; z-index: 5; }

/* 2) ボタン全体にhoverを効かせる（強いセレクタで上書き） */
#service .service-cta a.btn-service.btn-service--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}
#service .service-cta a.btn-service.btn-service--outline:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
/* 矢印も一緒に白へ＆少しスライド */
#service .service-cta a.btn-service.btn-service--outline:hover .icon-chevron {
  border-color: #fff !important;
  transform: translateX(2px) rotate(-45deg);
}
.section-cta{
  display:flex;
  justify-content:center;
  margin-top:16px;
  gap:12px;
  position:relative;
  z-index:5;
}

/* 個別で余白などを変えたいとき */
.features-cta { margin-top:24px; }
.service-cta  { margin-top:32px; }
.works-cta    { margin-top:40px; }


/* ===== PC基準（左右2列） ===== */
dl.company > div{
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 8px 12px;
  align-items: start;
  padding: 14px 14px;     /* ← 縦幅を少し増やす */
  min-height: 68px;       /* ← 各ボックスの最低高さ（均等感） */
  margin-bottom: 8px;     /* ← ボックス間の余白（PC） */
  border-radius: 8px;
  background:#fff;
}
dl.company > div:last-child{ margin-bottom:0; }

dl.company dt{
  font-weight:600;
  white-space:nowrap;
}
dl.company dd{
  margin:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ===== スマホ（上下2行） ===== */
@media (max-width:768px){
  dl.company > div{
    display:block;          /* 項目→内容の縦並び */
    padding:16px 14px;      /* ← 縦の余白を増やして見やすく */
    min-height:72px;        /* ← “均等っぽい”最低高さを付与 */
    margin-bottom:6px;      /* ← ボックス間の余白を詰める（必要なら4pxでもOK） */
  }
  dl.company > div:last-child{ margin-bottom:0; }

  dl.company dt{
    display:block;
    margin-bottom:6px;      /* ラベルと内容の間隔 */
  }
}

/* クリップ対策はそのまま残してOK（高さは auto に） */
@media (max-width:768px){
  #company.sec{
    height:auto !important;
    min-height:auto !important;
    overflow:visible !important;
    margin-bottom:64px;
  }
  #company .sec__inner{ display:block !important; position:static !important; padding:32px 0 16px; }
  #company .container{ overflow:visible !important; }
}
/* PC：左右2列。ボックス内テキストを縦中央に */
dl.company > div{
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 8px 12px;
  align-items: center;      /* ← 縦中央寄せ（重要） */
  padding: 14px 16px;
  min-height: 68px;
  margin-bottom: 6px;       /* ← さらに詰めたいなら 4px でもOK */
  border-radius: 8px;
  background:#fff;
}
/* 文字行自体も中央に揃えたい時は flex で補強（単行/複数行どちらでもOK） */
dl.company dt,
dl.company dd{
  display:flex;
  align-items:center;       /* ← 行コンテンツを縦中央寄せ */
  margin:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
dl.company > div:last-child{ margin-bottom:0; }

/* スマホ：上下2行。さらに余白を詰める */
@media (max-width:768px){
  dl.company > div{
    display:block;
    padding:14px;           /* 好みで 12px でもOK */
    min-height:72px;
    margin-bottom:4px;      /* ← ここで縦の“ボックス間”を詰める */
  }
  dl.company dt{
    margin-bottom:6px;      /* ラベルと内容の間 */
  }
}
/* PCでは改行しない */
.br-sp { display: none; }

@media (max-width: 768px) {
  .br-sp { display: inline; }
}

/* ===== スマホ用: ボタンを大きめにしつつ1行に収める ===== */
@media (max-width: 560px) {
  .hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;                 /* ボタンの間を少し広め */
    flex-wrap: nowrap;
    width: 100%;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-outline {
    flex: 1;                   /* 均等に広がる */
    max-width: none;           /* 幅制限を解除して余裕を確保 */
    white-space: nowrap;       /* 改行させない */
    font-size: 15px;           /* 少し大きく */
    padding: 14px 0;           /* 高さを出してタップしやすく */
    border-radius: 14px;
    text-align: center;
  }
}