/* ===== /service/ hero：画像パララックス帯（斜めカット）＋その下に見出し ===== */
/* ※既存 service.css(sgl-service.php用)とは別ファイル。混同厳禁 */

/* JSが有効な時だけ初期非表示（JS失敗時は中身が消えない設計） */
.js-svc .svc-fade { opacity: 0; transform: translateY(28px); }
.svc-fade { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.svc-fade.svc-inview { opacity: 1; transform: none; }

/* 旧2階層ページはfixedヘッダー前提で second.css の .page_cont に margin-top:598px が付く。
   /service/ はヒーローが通常フロー＝そのオフセットは不要（＝リードと本文の間の巨大空白の正体） */
/* ヘッダーをin-flow(relative)にしたので固定ヘッダー用の598pxオフセット不要 */
.page_cont{ background:#fff; margin-top:0; }

/* /service/ ヘッダー：標準構造(page_hdr/JP・EN題)は保つが position:relative＋背景レイヤーをtranslateYで"動かす"パララックス（fixed不採用） */
.service_page_hdr{
  position:relative; top:auto; left:auto;
  height:clamp(300px,42vw,540px);
  overflow:hidden; background:none;
}
.service_hdr_bg{
  position:absolute; top:-20%; left:0; width:100%; height:140%;
  background-size:cover; background-position:center; will-change:transform; z-index:0;
}
.service_page_hdr .page_hdr_title_wrap{ position:relative; z-index:1; }
/* ヘッダー直下の導入（旧ヒーローの熱狂キャッチ＋リードを移設） */
.svc_intro{ width:min(1180px,88%); margin:0 auto; padding:clamp(40px,6vw,72px) 0 clamp(18px,3vw,32px); }
.svc_intro .service_hero_catch{ margin:0 0 22px; }
.svc_intro .service_hero_lead{ color:#3a3436; }

/* 流れる文字（マーキー・パンくず下）＝旧「ABOUT SARUCREW」と同じ 太字アウトライン */
/* absolute＋z-index下げ＝本文の背面テクスチャに（位置はtopで調整） */
.svc_marquee{
  position:absolute; left:0; top:345px; z-index:0; pointer-events:none;
  overflow:hidden; width:100%; padding:0; margin:0;
}
.svc_marquee_track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:svcMarquee 34s linear infinite;
}
.svc_marquee_track span{
  font-family:'Montserrat', sans-serif; font-weight:800;
  font-size:clamp(48px,8vw,120px); letter-spacing:.02em; line-height:1.05;
  text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.6px #dccfd4;
}
@keyframes svcMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .svc_marquee_track{ animation:none; } }

/* ---- サービスブロック（中画像＋説明＋3強み／パララックス＋reveal） ---- */
.svc_block{ padding: clamp(56px, 8vw, 108px) 0; }
.svc_block_inner{
  width:min(1180px, 88%); margin:0 auto;
  display:flex; align-items:center; gap:clamp(30px, 5vw, 70px);
}
.svc_block.reverse .svc_block_inner{ flex-direction:row-reverse; }
.svc_block_text{ flex:1 1 46%; }
.svc_block_visual{
  flex:1 1 54%; position:relative; overflow:hidden;
  height:clamp(240px, 30vw, 380px);
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.svc_block.reverse .svc_block_visual{ clip-path:polygon(0 0, 94% 0, 100% 100%, 6% 100%); }
.svc_block_img{
  position:absolute; top:0; left:-20%; width:140%; height:100%;
  background-size:cover; background-position:center; will-change:transform;
}
/* 成果/伴走の中画像だけ縦に伸ばして上へ飛び出させる（箱枠を超える演出・2026-07-31）
   調整ノブ：height＝画像の高さ／margin-top（負値）＝上へのはみ出し量。PC限定（モバイルは元のまま） */
@media(min-width:900px){
  #performance .svc_block_visual,
  #partner .svc_block_visual{
    height:clamp(320px, 40vw, 480px);
    margin-top:-64px;
  }
  /* 斜め線を立てて3ブロック統一（6%→13%。数値↑で更に鋭角に）。performance/monkeyは通常向き・partnerはreverse
     ※monkeyは高さを伸ばしてない分、同じ13%だとやや急角度に見える場合あり（気になれば別値に） */
  #performance .svc_block_visual,
  #monkey .svc_block_visual{ clip-path:polygon(13% 0, 100% 0, 87% 100%, 0 100%); }
  #partner .svc_block_visual{ clip-path:polygon(0 0, 87% 0, 100% 100%, 13% 100%); }
}
.svc_block_en{
  font-family:'Montserrat',sans-serif; font-size:clamp(11px,1vw,14px);
  letter-spacing:.28em; font-weight:700; color:#C2153E; text-transform:uppercase; margin:0 0 12px;
}
.svc_block_jp{
  font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.32;
  letter-spacing:.02em; color:#141013; margin:0 0 22px;
  display:inline-block; position:relative;
}
/* 見出しの手書きアクセント＝見出しboxに相対配置（文字数が変わっても同じ絵。S3以降は英字を差し替えるだけ）
   微調整：right（横位置）／translateYの-46%（縦の被り具合）／font-size 0.9em（大きさ・見出しに連動） */
.svc_block_wm{
  position:absolute; right:-1.2em; top:83%; z-index:2;
  font-family:'Caveat', cursive; font-weight:700; line-height:1;
  font-size:0.9em; white-space:nowrap;
  color:rgba(194,21,62,0.85);
  transform:translateY(-46%) rotate(-4deg); pointer-events:none;
  transition:clip-path 1s cubic-bezier(.2,.7,.2,1) .5s;   /* 左→右に"書いてる風"reveal */
}
#partner .svc_block_wm{ right:-3em; }   /* 伴走型は少し右へ */
.svc_block_text.svc-fade .svc_block_wm{ clip-path:inset(-25% 100% -25% -4%); }
.svc_block_text.svc-inview .svc_block_wm{ clip-path:inset(-25% -6% -25% -4%); }
.svc_block_en{ position:relative; z-index:1; }
.svc_block_lead{
  font-size:clamp(14px,1.05vw,16px); line-height:1.95; color:#3a3436; margin:0 0 30px;
}
.svc_block_link{ margin:4px 0 0; }
.svc_block_link a{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:clamp(14px,1.05vw,16px); color:#141013;
  text-decoration:none; padding-bottom:5px; border-bottom:2px solid #C2153E;
  transition:gap .25s ease, color .25s ease;
}
.svc_block_link a:hover{ gap:16px; color:#C2153E; }
.svc_link_arrow{ color:#C2153E; font-weight:700; }

/* シンプル問い合わせCTA（赤枠白地・赤丸→） */
.svc_cta{ margin:28px 0 0; }
.svc_cta a{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 16px 12px 26px; border:1.5px solid #C2153E; border-radius:40px;
  background:#fff; color:#C2153E; font-weight:800;
  font-size:clamp(13px,1vw,15px); text-decoration:none;
  transition:background .25s ease, color .25s ease;
}
.svc_cta a:hover{ background:#C2153E; color:#fff; }
.svc_cta_arrow{
  width:24px; height:24px; border-radius:50%; background:#C2153E; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  transition:background .25s ease, color .25s ease;
}
.svc_cta a:hover .svc_cta_arrow{ background:#fff; color:#C2153E; }

/* MONKEY=プラットフォーム＝ダーク句読点（1箇所だけダーク背景） */
.svc_block.is-dark{ background:#141013; }
.svc_block.is-dark .svc_block_jp{ color:#fff; }
.svc_block.is-dark .svc_block_lead{ color:#cfc6ca; }
.svc_block.is-dark .svc_block_wm{ color:rgba(194,21,62,0.9); }
.svc_block.is-dark .svc_block_link a{ color:#fff; }
.svc_block.is-dark .svc_block_link a:hover{ color:#C2153E; }

/* S6 取引先企業（ロゴ・信頼の担保） */
.svc_clients{ padding:clamp(56px,8vw,104px) 0; background:#f7f6f7; }
.svc_clients_inner{ width:min(1180px,88%); margin:0 auto; }
.svc_clients_lead{ font-size:clamp(14px,1.05vw,16px); line-height:1.9; color:#3a3436; margin:14px 0 clamp(28px,4vw,46px); }
.svc_logos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,18px);
}
.svc_logo{
  background:#fff; border:1px solid #ececec; border-radius:12px;
  aspect-ratio:3/2; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,2vw,26px);
  transition:box-shadow .25s ease, transform .25s ease;
  /* ★min-width:0 必須（2026-08-18 修正）
     gridアイテムは min-width:auto が既定＝中の画像の固有幅(330px)がカードの最小幅になる。
     Chromeは max-width:100% が先に効いて縮むが、Safari(iOS)は計算順序が違い
     カードが330px+paddingまで膨張 → SPで2列=約726pxになり画面外へはみ出していた。 */
  min-width:0;
}
.svc_logo:hover{ box-shadow:0 10px 26px rgba(0,0,0,.06); transform:translateY(-2px); }
.svc_logo img{ max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .3s ease, opacity .3s ease; }
.svc_logo:hover img{ filter:grayscale(0); opacity:1; }
@media(max-width:900px){ .svc_logos{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .svc_logos{ grid-template-columns:repeat(2,1fr); } }

/* S7 グループ事業 */
.svc_group{ padding:clamp(56px,8vw,104px) 0; background:#fff; }
.svc_group_inner{ width:min(1180px,88%); margin:0 auto; }
.svc_group_lead{ font-size:clamp(14px,1.05vw,16px); line-height:1.9; color:#3a3436; margin:14px 0 clamp(28px,4vw,46px); }
/* .svc_group_grid/_card/_thumb/_name/_desc は css/group.css へ移設（旧クリーンカード・現在は未使用。GROUPはTOPと同じswiper part=group-swiperに統一済み） */
/* /service/ のグループ見出し：ダーク背景(top_service_section #3C3C3C)上で白文字を保証（TOPはindex.cssが担保・/service/は未読込のため明示） */
.top_service_section .section_title_jp{ color:#fff; }
.top_service_section .section_title_en,
.top_service_section .section_title_en a{ color:#fff; }

/* S6.5 導入事例（共有casestudy.cssのカードを、/service/の枠で見せる） */
.svc_casestudy{ padding:clamp(56px,8vw,104px) 0; background:#fff; }
.svc_casestudy_inner{ width:min(1180px,88%); margin:0 auto; }
.svc_casestudy_lead{ font-size:clamp(14px,1.05vw,16px); line-height:1.9; color:#3a3436; margin:14px 0 0; }
.svc_casestudy .cs_list{ margin-top:clamp(28px,4vw,46px); }
/* 3強み＝カード3カラム（テキスト+画像の下に全幅） */
.svc_feats_grid{
  width:min(1180px, 88%); margin: clamp(38px,5vw,64px) auto 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px,1.8vw,24px);
  list-style:none; padding:0;
}
.svc_feat{
  background:rgba(194,21,62,.05); border:none; border-radius:16px;
  padding: clamp(26px,2.6vw,34px);
}
.svc_feat_ico{
  width:48px; height:48px; border-radius:12px; background:#C2153E;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.svc_feat_ico svg{
  width:24px; height:24px; fill:none; stroke:#fff;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.svc_feat_ttl{
  font-size:clamp(16px,1.25vw,19px); font-weight:800; color:#141013;
  margin:0 0 4px; letter-spacing:.01em;
}
.svc_feat_sub{
  font-size:clamp(12px,.95vw,13px); font-weight:700; color:#C2153E;
  margin:0 0 13px; letter-spacing:.02em;
}
.svc_feat_desc{ font-size:clamp(13px,1vw,14.5px); line-height:1.85; color:#5a5457; margin:0; }
/* 配信媒体ロゴ（カード2）＝Google/YouTube/Meta/LINE/X。高さ揃えで形の違いを吸収 */
.svc_feat_logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 0; }
.svc_feat_logos img{ height:24px; width:auto; display:block; }
/* reveal（svc-fade機構を流用・カードはstagger） */
/* 中画像＝TOP同様の斜めワイプ開き。%で単位統一＝clip-path補間OK。js-svcで潰し→inviewで開く（fail-safe=JS無しは開いた状態） */
/* 中画像＝シャッター幕リヴィール（clip補間を避け、overlayをtransformでスライド＝確実に動く） */
.svc_block_visual::after{
  content:''; position:absolute; inset:0; z-index:3; background:#fff;
  transform:translateX(103%);   /* デフォルト=幕オフ（JS無しでも画像は見える） */
  transition:transform 1.05s cubic-bezier(0.76,0,0.24,1) .1s;
}
.js-svc .svc_block_visual::after{ transform:translateX(0); }                        /* JSありは最初、幕で覆う */
.js-svc .svc_block_visual.revealActive::after{ transform:translateX(-103%); }       /* in-viewで幕が左へ去る */
.js-svc .svc_block.reverse .svc_block_visual.revealActive::after{ transform:translateX(103%); }   /* reverseは右へ去る */
.svc_block.is-dark .svc_block_visual::after{ background:#141013; }                  /* MONKEYダーク用の幕色 */
.svc_feats_grid .svc_feat:nth-child(2){ transition-delay:.14s; }
.svc_feats_grid .svc_feat:nth-child(3){ transition-delay:.28s; }
@media(max-width:900px){ .svc_feats_grid{ grid-template-columns:1fr; } }
@media(max-width:900px){
  .svc_block_inner, .svc_block.reverse .svc_block_inner{ flex-direction:column; }
  .svc_block_text, .svc_block_visual{ flex-basis:auto; width:100%; }
  .svc_block_visual{ height:56vw; }
}

/* ---- 画像パララックス帯（斜めカット） ---- */
.service_hero{
  position:relative;
  height:clamp(280px, 42vw, 520px);
  overflow:hidden;
  background:#141013;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}
.service_hero_img{
  position:absolute; top:-30%; left:0; width:100%; height:160%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.service_hero_img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,19,.25) 0%, rgba(20,16,19,.48) 100%);
}

/* ---- 見出し（帯の下） ---- */
.service_hero_head{
  width:min(1180px, 88%); margin:0 auto;
  padding: clamp(40px, 5vw, 64px) 0 clamp(30px, 4vw, 48px);
}
.service_hero_en{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(12px,1.1vw,15px); letter-spacing:.32em; font-weight:700;
  color:#C2153E; text-transform:uppercase; margin:0 0 20px;
}
.service_hero_en::before{
  content:""; display:inline-block; width:34px; height:1px;
  background:#C2153E; vertical-align:middle; margin-right:14px;
}
.service_hero_catch{
  font-family:'Shippori Mincho', YakuHanMP, serif;
  font-size:clamp(28px, 4.2vw, 56px);
  line-height:1.55; font-weight:600; letter-spacing:.04em;
  color:#222; margin:0 0 30px;
}
.svc_hero_br{ display:none; } /* PC＝改行なし。SP(767以下)で「力で、」改行を有効化 */
.svc_char{
  display:inline-block; opacity:0; transform:translateY(24px);
  transition:opacity .45s ease, transform .9s cubic-bezier(0.16,1,0.3,1);
}
.svc_char.on{ opacity:1; transform:none; }
/* 「熱狂」の炎グラデ（TOP WHOのfireTextを移植） */
.svc_fire{
  background-image:
    linear-gradient(0deg, rgba(34,34,34,0) 34%, #222 58%, #222 100%),
    linear-gradient(0deg, #F26B1E 0%, #DE3A26 30%, #C81C39 62%, #A8112F 100%);
  background-size:100% 100%, 100% 140%;
  background-position:50% 0%, 50% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:svcFire 5s ease-in-out infinite;
}
.svc_fire + .svc_fire{ animation-delay:-1.7s; }
@keyframes svcFire{
  0%{ background-position:50% 0%, 50% 100%; }
  50%{ background-position:50% 0%, 50% 62%; }
  100%{ background-position:50% 0%, 50% 100%; }
}
@media (prefers-reduced-motion: reduce){ .svc_fire{ animation:none; } }
.service_hero_lead{
  font-size:clamp(14px,1.1vw,17px); line-height:2.0;
  color:#4a4446; max-width:46em; margin:0;
}

@media (max-width:767px){
  .service_hero{ clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%); }

  /* 1) HERO catch：「力で、」で改行して「。」の孤立を解消 */
  .svc_hero_br{ display:inline; }

  /* 2) マーキー：見出しに被るので lead下〜見出し上の空きバンドへ逃がす（Companyのslider帯に倣う） */
  .svc_marquee{ top:320px; }

  /* 3) ブロック見出し（完全成果型広告 等）＋手書き英字を少し大きく（0.9em連動で英字も拡大） */
  .svc_block_jp{ font-size:30px; }

  /* 4) 3つの強みカード：アイコンの横に見出し＋サブタイトル（descは下段フル幅） */
  .svc_feat{
    display:grid; grid-template-columns:auto 1fr;
    align-items:center; column-gap:14px; row-gap:2px;
  }
  .svc_feat_ico{ grid-row:1 / 3; grid-column:1; margin-bottom:0; align-self:center; }
  .svc_feat_ttl{ grid-column:2; grid-row:1; align-self:end; margin:0; }
  .svc_feat_sub{ grid-column:2; grid-row:2; align-self:start; margin:0; }
  .svc_feat_desc{ grid-column:1 / -1; grid-row:3; margin-top:12px; }
  .svc_feat_logos{ grid-column:1 / -1; }
}