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


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

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

/* ===== Tokens（サイト共通の変数があればそれを使う） ===== */
:root{
  --brand:#DF8D30; /* オレンジ */
  --navy:#162e66;  /* ネイビー */
  --ink:#1f2937;   /* 本文 */
  --muted:#7b8499; /* 補助テキスト */
  --card-radius:18px;
  --shadow:0 14px 34px rgba(0,0,0,.06);
  --gutter:32px;           /* 画像間の余白（PC） */
  --label-h:56px;          /* ラベル帯の高さ */
}

/* ===== セクションラッパー：画像と同じ開始位置に合わせる ===== */
.works-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;      /* ← タイトルも画像もこのラインに揃う */
}

/* ===== メタ（小さく・薄め） ===== */
.case__meta{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

/* ===== 見出し（ネイビー太字＋短い黄色バー） ===== */
.case__title{
  position:relative;
  margin:0 0 26px;
  color:var(--navy);
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.15;
  font-size:clamp(22px,3.2vw,34px); /* PCで約34px */
  border:0; /* 既存のボーダー下線があれば無効に */
}
.case__title::after{
  content:"";
  display:block;
  width:88px;            /* スクショの短い黄色バー */
  height:6px;
  border-radius:6px;
  background:var(--brand);
  margin-top:12px;
}

/* ===== 2カラム（Before/After） ===== */
.case{ margin: clamp(32px,5vw,56px) 0; }

.case__gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

/* ===== カード（角丸・影・下に帯） ===== */
.case__card{
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 10px;
  background:#fff;
  display:flex;
  flex-direction:column;
}

/* 画像：横は100%、縦比率は近い見え方に固定（必要なら変更OK） */
.case__img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;   /* おおよそスクショの比率 */
  object-fit:cover;
  object-position:center;
}

/* 下部のラベル帯（高さ・角丸連続） */
.case__label {
  display:flex; 
  align-items:center; 
  justify-content:center;
  height: calc(var(--label-h) * 0.75);  /* 高さを少し低くする（25%カット） */
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(14px,1.6vw,18px); /* PCで約18px */
  color:#fff;
  background-color: rgba(31,41,55,0.8); /* 透明度80% (元色が #1f2937 の場合) */
}

/* Before=ネイビー / After=オレンジを透かす */
.case__card--before .case__label {
  background-color: rgba(22, 46, 102, 0.8); /* navyを80%透過 */
}

.case__card--after .case__label {
  background-color: rgba(223, 141, 48, 0.8); /* brandを80%透過 */
}


/* ===== レスポンシブ ===== */
@media (max-width: 980px){
  :root{ --gutter:20px; --label-h:52px; }
}
@media (max-width: 720px){
  .case__gallery{ grid-template-columns:1fr; }
  .case__title{ font-size: clamp(20px,5vw,26px); }
  .case__title::after{ width:72px; height:5px; }
}
/* 横幅と左右パディングは case__inner に一本化（タイトルも画像もここに揃う） */
.case__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px; /* ← 画像の左端と同じラインになる */
}

/* 既に .works-wrap にも padding があるなら消す（ダブり対策） */
.works-wrap{ padding-left:0; padding-right:0; }

/* 念のため、ギャラリー側の左右余白をゼロに固定（ズレの元を排除） */
.case__gallery{ margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
/* 応急：タイトルとメタにもギャラリーと同じ左右パディングを与える */
.case__meta,
.case__title{ padding-left:40px; padding-right:40px; }

/* ギャラリー側の左右余白はゼロに */
.case__gallery{ padding-left:0; padding-right:0; }
/* カードは重ね合わせの基準にする */
.case__card{
  position: relative;      /* ← これが重要 */
  overflow: hidden;
  /* 角丸や影を付けたい/外したい場合はここで */
  /* border-radius: 0; box-shadow: none; */
}

/* 画像は普通に敷く */
.case__img{
  display:block;
  width:100%;
  height:auto;
}

/* 帯を絶対配置で“画像の上・下端”に重ねる */
.case__label{
  position: absolute;
  left: 0; right: 0; bottom: 0;     /* ← 下に吸着して全幅 */
  z-index: 1;
  display:flex; align-items:center; justify-content:center;

  height: calc(var(--label-h) * 0.75);  /* 少し低めのまま */
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  font-size: clamp(14px,1.6vw,18px);
  color:#fff;

  /* 念のため既存の background を打ち消す */
  background: transparent;
}

/* 透ける色を指定（写真が見える） */
.case__card--before .case__label{
  background: rgba(22, 46, 102, 0.8);    /* var(--navy) を80%透過 */
}
.case__card--after .case__label{
  background: rgba(223, 141, 48, 0.8);   /* var(--brand) を80%透過 */
}
/* ===== WORKS：7個目以降も必ず表示（ホーム用のプレビュー制限などを上書き） ===== */
.works-wrap .case { 
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
}
.works-wrap .case:nth-of-type(n+7) {
  display: block !important;
}

/* 念のため、親のはみ出しカットを解除 & 下余白を確保（最下段がフッターに食われない） */
.works-wrap { 
  overflow: visible !important;
  padding-bottom: clamp(40px, 6vw, 96px);
}

/* 画像の見え方を安定化（定比率で切り抜き）— 二重定義がある場合はこれで統一 */
.case__img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: center;
}


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

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

/* 見出し直下の白い四角対策（背景や余白を強制OFF） */
#works-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; /* “半分くらい”の見え方 */
  }
}