/* =========================================
   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;
}


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

/* タイトルと画像の間隔（今は .pb-16 が 4rem なので軽く詰める） */
#contact-head .sec__inner.pb-16{
  padding-bottom: clamp(5px, 1vw, 10px);
}
/* Service タイトル直下の余白を減らす */
#contact-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 見出しのウォーターマークを上に寄せる */
#contact-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;
}
/* sec 共通の内側は base.css の .sec / .sec__inner に依存 */

/* ===== 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; }
}
/* Contactページの画像とフォームの間に余白を追加 */
#contact-head .svc-heroMedia {
  margin-bottom: 5rem; /* 48px相当。お好みで 2rem(32px)〜4rem(64px) に調整 */
}
/* Contactのウォーターマークを“上から固定”で配置（レイアウトは伸ばさない） */
#contact-head.sec{ position: relative; }  /* 基準点 */

#contact-head.sec::before{
  /* 既存の inset:0 + grid 中央寄せを無効化 */
  inset: auto !important;
  display: block !important;        /* gridをやめるので place-items も無効化される */
  left: 50% !important;
  top: clamp(220px, 26vw, 320px) !important;  /* ←ここで上下位置だけ調整 */
  transform: translate(-50%, 0) !important;   /* 横センター。縦は動かさない */
}
/* Contactのウォーターマーク：上から固定配置（フォームに隠れない高さまで持ち上げ） */
#contact-head.sec{ position: relative; }

#contact-head.sec::before{
  inset: auto !important;
  left: 50% !important;
  top: clamp(120px, 18vw, 220px) !important; /* ←ここを浅めに（=上に） */
  transform: translateX(-50%) !important;
  display: block !important;
}
@media (max-width: 980px){
  #contact-head.sec::before{ top: clamp(110px, 24vw, 200px) !important; }
}
@media (max-width: 560px){
  #contact-head.sec::before{ top: clamp(90px, 30vw, 180px) !important; }
}
@media (min-width: 1280px){
  #contact-head.sec::before{ top: 60px !important; }
}


/* =========================
   contact 見出し（サブページ）
   ========================= */
.is-sub #contact-head .sec__inner{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(12px, 3.2vw, 28px);  /* 下の余白を少しタイトに */
}
.is-sub #contact-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 #contact-head .sec__en::before{
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 72px; height: 6px;
  background: #FFD84D;
  border-radius: 3px;
}
.is-sub #contact-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 #contact-head .sec__inner{ padding-top: 56px; padding-bottom: 14px; }
  .is-sub #contact-head .sec__en{ font-size: 34px; margin-bottom: 10px; }
  .is-sub #contact-head .sec__en::before{ top: -14px; width: 56px; height: 5px; }
  .is-sub #contact-head .sec__lead{ margin-top: 10px; margin-bottom: 0; font-size: 14px; line-height: 1.6; }
}

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

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

/* =========================
   CONTACT: リードを上げる＆白いスキマを消す
   ========================= */

/* 1) 見出しブロックの下をさらにタイトに */
#contact-head .sec__inner{
  padding-bottom: clamp(4px, 1vw, 12px) !important;
}
/* 説明文の上下マージンを詰める（特に下） */
#contact-head .sec__lead{
  margin-top: 8px !important;
  margin-bottom: clamp(0px, 1vw, 8px) !important;
}

/* 2) ヒーロー下の“白いスキマ”対策
      - セクションの背景を揃える
      - 次セクションの先頭余白/マージンを殺す */
#contact-head.sec,

#contact {
  padding-top: 0 !important;            /* 先頭に余白を置かない */
  margin-top: 0 !important;
}
/* 最初の子要素が margin-top を持っていても受け止める */
#contact > *:first-child {
  margin-top: 0 !important;
  padding-top: clamp(8px, 1.2vw, 16px) !important; /* 最小限の余白だけ内側に */
}
/* 背景デコは全部クリック無効化 */
.sec::before,
.sec::after,
.hero-slope,
.hero-watermark {
  pointer-events: none !important;
}

/* 特に Contact の見出し装飾は確実に無効化 */
#contact-head.sec::before,
#contact-head.sec::after {
  pointer-events: none !important;
}