/* =========================================
   GLOBAL TOKENS / UTILITIES（共通）
   ========================================= */
:root{
  --brand:#DF8D30;   /* くすみオレンジ */
  --base:#f5f3ec;    /* 生成り（ヒーローテキスト色） */
  --ink:#1f2937;     /* 本文 */
  --navy:#162e66;    /* 英字見出し */
}


*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--base);
  color:var(--ink);
  font-family:"Montserrat","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.02em;
}

.container{ max-width:1200px; margin:0 auto; padding:0 16px }
.mt-10{ margin-top:2.5rem }
.mt-12{ margin-top:3rem }
.pb-16{ padding-bottom:4rem }
.pb-24{ padding-bottom:6rem }
.br-md{ display:none }
@media (min-width:768px){ .br-md{ display:inline } }

.body-lock{ overflow:hidden } /* メニュー開時スクロール抑止 */


/* =========================================
   HOME: HERO（動画背景＋上物）
   ========================================= */
.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;
  height:82vh; padding:0 20px;
  text-align:center;
  background:rgba(0,0,0,.30);
  color:var(--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{ margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.1; font-size:clamp(28px,4.8vw,48px) }
.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{ margin-top:10px; font-size:12px; 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 }

/* セクション本文リード */
.sec__lead{
  margin-top:1.8rem;
  font-family:'Montserrat',sans-serif; font-weight:400;
  font-size:clamp(14px,1.2vw,18px);
  color:#142a5a; text-align:center; line-height:1.8; letter-spacing:.02em;
}


/* =========================================
   SERVICE PAGE 専用
   ========================================= */
/* Serviceのタイトル側（最初のinner）だけ上余白を小さく */
#service-head .sec__inner:first-of-type{
  padding-top: clamp(7px, 2vw, 15px);  /* 好みで 50/7vw/90 にも調整可 */
}
/* タイトルブロックの下余白を少しだけ減らす */
#service-head .sec__inner:first-of-type{
  padding-bottom: clamp(0px, 0vw, 0px);
}

/* タイトルと画像の間隔（今は .pb-16 が 4rem なので軽く詰める） */
#service-head .sec__inner.pb-16{
  padding-bottom: clamp(5px, 1vw, 10px);
}
/* Service タイトル直下の余白を減らす */
#service-head .sec__inner.pb-16{
  padding-bottom: clamp(0px, 0vw, 0px); /* 元 64px → 半分くらい */
}



/* 変数（サービス専用） */
:root{
  --wrap:1200px;
  --pad:clamp(18px,4vw,48px);
  --gap:clamp(28px,5vw,64px);

  /* HERO 調整ノブ */
  --svc-hero-pt:clamp(10px,2vw,30px);
  --svc-hero-gap:clamp(6px,1vw,14px);
  --svc-hero-h:clamp(360px,30vw,520px);
}

/* ラッパー & グリッドレーン */
.svc-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.svc-grid{
  display:grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] minmax(0, calc(var(--wrap) - 2*var(--pad)))
    [content-end] 1fr
    [full-end];
}

/* ===== HERO（タイトル＋横長写真） ===== */
.svc-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:#f5f3ef;
  padding:var(--svc-hero-pt) 0 clamp(18px,3vw,24px);
}
.svc-hero::before{ /* 斜め帯（薄め） */
  content:""; position:absolute; left:-12vw; right:-12vw;
  top:clamp(54px,7vw,84px); height:40%;
  background:rgba(15,26,54,.06);
  transform:skewY(-8deg); opacity:.12; z-index:0;
}
/* Service 見出しのウォーターマークを上に寄せる */
#service-head.sec::before{ transform:translateY(-250px) }

.svc-head{
  grid-column:content-start / content-end;
  padding:0 var(--pad) clamp(4px,.8vw,10px);
  position:relative; z-index:1;
}
.svc-hero__bar{ display:block; width:68px; height:8px; border-radius:6px; background:var(--brand); margin:0 0 16px }
.svc-hero__en{
  margin:0; color:var(--navy);
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:800; letter-spacing:-.01em; line-height:.92;
  font-size:clamp(64px,10vw,120px);
}
/* 子ページ見出しの黄色ライン（HOMEで消したい場合は .is-home 親で無効化を）*/
.sec__en{
  position:relative; display:inline-block;
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:800; color:#162e66; font-size:100px;
}
.sec__en::before{
  content:""; position:absolute; left:0; top:-20px;
  width:60px; height:6px; background:#FFD84D; border-radius:3px;
}

.svc-hero__lead{
    margin:4px 0 4px; /* 上下とも4pxにする */;
  max-width:920px; color:#1d2b4e; opacity:.95;
  font-size:clamp(14px,1.5vw,18px);
}

/* 横長写真（左角丸／右端フルブリード） */
.svc-heroMedia{
  grid-column:content-start / full-end;
  margin-top:0;
  border-radius:90px 0 0 90px;
  overflow:hidden;
  /* 画面端まで確実に届かせる保険 */
  margin-right:calc(-1 * (100vw - 100%));
  width:calc(100% + (100vw - 100%));
}
.svc-heroMedia img{
  display:block; width:100%;
  height:var(--svc-hero-h);
  object-fit:cover; object-position:right center;
}

/* ===== LIST（サービス説明）— 両端揃え／左右反転OK ===== */
.svc-list{
  background:var(--base);
  padding:clamp(10px,1.6vw,18px) 0 clamp(56px,8vw,96px);
}
.svc-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center;
  margin-top:clamp(56px,8vw,110px);
}
.svc-row.is-reverse .svc-img{ order:2 }
.svc-row.is-reverse .svc-text{ order:1 }

.svc-img{
  border-radius:22px; overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.06);
  background:#0001;
}
.svc-img img{
  display:block; width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover; object-position:center;
}

.svc-text{ max-width:58ch } /* 行長のみ制限し、左右端は揃える */

.svc-label{ color:#7b8499; letter-spacing:.16em; font-size:12px; margin:0 0 6px }
.svc-title{
  margin:0 0 6px; color:var(--navy);
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:800; letter-spacing:-.005em;
  font-size:clamp(28px,3.6vw,42px); line-height:1.12;
  overflow-wrap:anywhere; word-break:keep-all;
}
.svc-miniBar{ width:68px; height:6px; border-radius:6px; background:var(--brand); margin:10px 0 14px }
.svc-sub{ font-weight:700; color:#0f1a36; margin:0 0 10px; font-size:clamp(16px,2vw,18px); line-height:1.4 }
.svc-desc{ color:var(--ink); font-size:clamp(14px,1.6vw,16px); line-height:1.9; margin:0; overflow-wrap:anywhere }

/* ===== Responsive ===== */
@media (max-width:980px){
  .svc-row{
    grid-template-columns:1fr;
    gap:clamp(18px,4vw,28px);
  }
  .svc-row.is-reverse .svc-img{ order:1 }
  .svc-row.is-reverse .svc-text{ order:2 }
  .svc-text{ max-width:65ch }
}
@media (min-width:981px){
  .svc-row.is-reverse .svc-text {
    padding-left:40px;
  }
}/* ========== Flow（施工までの流れ）最小・安定セット ========== */

/* 1) セクションそのものを“白”に、斜め帯OFF */
#flow { background:#fff; }
#flow.sec::before,
#flow.sec::after { content:none; }

/* 2) セクション内の余白（上・下の白を十分確保） */
#flow .sec__inner{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(56px,6vw,80px) 16px clamp(96px,8vw,128px);
}

/* 3) 見出しは中央＆下に黄色バー。上の黄色バーは無効化 */
#flow .sec__en{
  display:inline-block;
  margin:0 auto;
  text-align:center;
  font-weight:800;
  color:var(--navy);
  font-size: clamp(28px,4.8vw,44px);
  line-height:1.1;
}
#flow .sec__inner {
  text-align: center;   /* 子要素を中央に */
}

#flow .sec__en {
  display: inline-block; /* 幅を文字サイズに合わせる */
  margin: 0 auto;        /* 余白を自動にして中央寄せ */
}

#flow .sec__en::before{ content:none; }
#flow .sec__en::after{
  content:"";
  display:block;
  width:68px; height:6px; border-radius:6px;
  background:var(--brand);
  margin:12px auto 0;
}

/* 4) グリッド（PC=3列／タブ=2列／SP=1列） */
#flow .flow{
  display:grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(18px, 4vw, 28px) 0 0;
  padding: 0;
}
@media (max-width: 900px){
  #flow .flow{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  #flow .flow{ grid-template-columns: 1fr; }
}

/* 5) 各アイテム：四角い箱をやめる（背景/枠/影 なし） */
#flow .flow__item{
  --num-size: clamp(80px, 10vw, 140px);
  position:relative;
  isolation:isolate;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding: clamp(12px, 2vw, 18px);
  text-align:center;
  overflow:visible;
}

/* 6) 背景番号（上中央） */
#flow .flow__num{
  position:absolute; left:50%; top: clamp(4px, 1vw, 10px);
  transform:translateX(-50%);
  font-family:"Montserrat", system-ui, sans-serif;
  font-weight:800;
  font-size: var(--num-size);
  line-height:1;
  color:#0f1a36; opacity:.06;
  z-index:0; pointer-events:none;
}

/* 7) 文字は番号の半分から開始 */
#flow .flow__text{
  position:relative; z-index:1;
  margin-top: calc(var(--num-size) * .5);
}

/* 8) タイトル／本文（少し控えめ） */
#flow .flow__step{
  margin:0 0 6px;
  color:var(--navy);
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height:1.35;
}
#flow .flow__desc{
  margin:0 auto;
  color:var(--ink);
  max-width: 32ch;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height:1.8;
}

/* 9) 画像はテキストの下に */
#flow .flow__img{
  position:relative; z-index:1;
  display:flex; justify-content:center;
  margin: clamp(10px, 1.8vw, 14px) auto 0;
}
#flow .flow__img img{
  display:block;
  height: clamp(88px, 12vw, 118px);
  width:auto; object-fit:contain;
}
#flow .sec__inner {
  text-align: center;   /* 子要素を中央に */
}

#flow .sec__en {
  display: inline-block; /* 幅を文字サイズに合わせる */
  margin: 0 auto;        /* 余白を自動にして中央寄せ */
}


/* 10) フッターとの段差を防ぐ（フッター側の上マージンを念のためゼロ） */
#flow + footer,
#flow + .site-footer,
#flow + .bg-dark{ margin-top:0; }


/* =========================
   Service 見出し（サブページ）
   ========================= */
.is-sub #service-head .sec__inner{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(12px, 3.2vw, 28px);  /* 下の余白を少しタイトに */
}
.is-sub #service-head .sec__en{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 6.5vw, 88px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.is-sub #service-head .sec__en::before{
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 72px; height: 6px;
  background: #FFD84D;
  border-radius: 3px;
}
.is-sub #service-head .sec__lead{
  margin-top: 12px;
  margin-bottom: clamp(6px, 1.6vw, 14px); /* 画像との隙間 */
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.7;
  text-align: center;
  color: #142a5a;
}

/* スマホ微調整：見出しサイズ/ライン/余白 */
@media (max-width: 768px){
  .is-sub #service-head .sec__inner{ padding-top: 56px; padding-bottom: 14px; }
  .is-sub #service-head .sec__en{ font-size: 34px; margin-bottom: 10px; }
  .is-sub #service-head .sec__en::before{ top: -14px; width: 56px; height: 5px; }
  .is-sub #service-head .sec__lead{ margin-top: 10px; margin-bottom: 0; font-size: 14px; line-height: 1.6; }
}

/* 透かし英字（ウォーターマーク）を上へ */
#service-head.sec{ overflow: visible; }
#service-head.sec::before{ transform: translateY(-28%); }

/* 見出し直下の白い四角対策（背景や余白を強制OFF） */
#service-head + .sec__inner.pb-16{
  background: transparent;
  padding-top: 0;
  margin: 0; border: 0; box-shadow: none;
}

/* =========================
   HERO 画像（右端ピッタリ／左だけ内側）
   ========================= */

/* 左の食い込み量（デスクトップ→タブ→SPで段階的に） */
:root{ --hero-left-inset: 120px; }
@media (max-width: 1024px){ :root{ --hero-left-inset: 72px; } }
@media (max-width: 768px){  :root{ --hero-left-inset: 16px; } }

/* セクションの左右パディングを殺して“真のフル幅”へ */
.svc > .sec__inner.pb-16{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* figure（ヒーロー）：右端固定／左だけ内側へ寄せる */
.svc-heroMedia{
  margin: 0;
  margin-right: calc(50% - 50vw); /* 右端を常にビューポート端 */
  margin-left: auto;              /* 右基準に寄せる */
  width: calc(100vw - var(--hero-left-inset)); /* 左だけ内側に */
  border-radius: 90px 0 0 90px;   /* 角丸はPCで強め */
  overflow: hidden;
}

/* 画像：インライン隙間対策＋トリミング指定 */
.svc-heroMedia img{
  display: block;
  width: 100%;
  height: clamp(360px, 30vw, 520px);
  object-fit: cover;
  object-position: center;
}

/* スマホは高さを抑え、角丸を少し強めに、上の隙間も短く */
@media (max-width: 768px){
  .svc-heroMedia{
    border-radius: 32px 0 0 32px; /* 28〜40pxで好み調整 */
    margin-top: 10px;
    margin-bottom: 22px;
  }
  .svc-heroMedia img{
    height: 200px; /* “半分くらい”の見え方 */
  }
}