@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/services.css ─ 事業内容ページ固有

   1. 左右分割のページヒーロー（テキスト｜写真）
   2. 導入部（概要＋ページ内目次）
   3. 事業の要素リスト
   4. 各事業の詳細（01は第一入口として濃紺面で強く見せる）
   5. 提携先の注記
   6. レスポンシブ

   写真はページヒーローの1点だけ。4事業それぞれへ人物写真は置かない。
   番号・線画・タイポグラフィ・罫線・余白で構成する。
   ============================================================= */

/* -------------------------------------------------------------
   1. 左右分割のページヒーロー
   PC ：左＝濃紺のテキスト、右＝写真。写真は右端まで届かせる。
        左の余白は .wrap の左端に揃え、テキスト幅は wrap の52%。
   SP ：テキスト → 写真 → パンくず → 本文 の縦積み。
   共通の .page-hero（components.css）を、このページだけ上書きする。
   ------------------------------------------------------------- */
.page-hero-split{
  display:grid;
  grid-template-columns:
    max(var(--gutter), calc((100% - var(--wrap)) / 2))
    minmax(0, calc(var(--wrap) * .52))
    minmax(0, 1fr);
  min-height:clamp(400px,31vw,470px);
  padding:0;
}
/* 左：余白列＋テキスト列をまたぐ。流線はこの中で完結させる */
.page-hero-split .page-hero-text{
  grid-column:1 / 3;position:relative;z-index:2;
  display:flex;
}
.page-hero-split .page-hero-inner{
  margin-left:auto;
  width:min(100% - var(--gutter), calc(var(--wrap) * .52));
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + clamp(28px,4vw,56px)) clamp(32px,4.5vw,72px) clamp(40px,5vw,64px) 0;
}
/* 流線：テキスト側から写真との境界を少し越え、右端で薄く消える */
.page-hero-split .page-hero-flow{
  left:0;bottom:-8%;width:112%;height:82%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
}
/* 右：写真。装飾ではなく、左の説明と対になる主要ビジュアル */
.page-hero-split .page-hero-media{
  grid-column:3;position:relative;inset:auto;z-index:1;overflow:hidden;
}
.page-hero-split .page-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:55% 50%;
  translate:none;
}
/* 濃紺から写真へ、ごく薄くつなぐ */
.page-hero-split .page-hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,37,49,.5) 0%,rgba(10,37,49,0) 20%);
}
/* 写真の導入：わずかに寄りが戻りながら現れる（JSが動く環境のみ） */
.js-motion .page-hero-split .page-hero-media img{
  opacity:0;transform:scale(1.04);
  transition:opacity 1.2s var(--ease) .1s,transform 1.8s var(--ease) .1s;
}
.js-motion.is-ready .page-hero-split .page-hero-media img{opacity:1;transform:scale(1)}

/* -------------------------------------------------------------
   2. 導入部（パンくずの直後。写真はヒーローへ統合済み）
   ------------------------------------------------------------- */
.services-intro{background:var(--paper)}
.intro-body{padding-block:var(--section-pad-sm) var(--section-pad)}
.intro-body .sec-title{max-width:20em}
.intro-body .prose{margin-top:clamp(24px,3vw,36px);max-width:46em}

/* ページ内目次。4事業を対等に並べ、創業支援だけの会社に見せない。 */
.service-index{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);
  margin-top:clamp(44px,5.5vw,72px);padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid var(--line);
}
.service-index a{
  display:grid;gap:10px;align-content:start;
  padding:20px 18px 22px;border:1px solid var(--line);border-radius:2px;background:var(--white);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.service-index a:is(:hover,:focus-visible){border-color:var(--gold);transform:translateY(-3px)}
.service-index .num{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--gold-text)}
.service-index .name{font-size:15px;font-weight:500;line-height:1.7;letter-spacing:.06em;color:var(--blue)}

/* -------------------------------------------------------------
   3. 事業の要素リスト
   各事業で扱う具体的な項目。金の短い罫線を頭に置く。
   ------------------------------------------------------------- */
.feature-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(20px,3vw,46px);
  margin-top:clamp(26px,3.2vw,40px);
}
.feature-list li{
  position:relative;padding-left:24px;
  font-size:14.5px;line-height:2;letter-spacing:.05em;
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:1em;
  width:12px;height:1px;background:var(--gold);
}
.feature-list-light li{color:var(--on-dark)}
.feature-list-light li::before{background:var(--gold-light)}

/* -------------------------------------------------------------
   4. 各事業の詳細
   ------------------------------------------------------------- */
/* 01 創業・資金調達支援：第一入口。濃紺の面で最も強く見せる。 */
.service-primary{position:relative;overflow:hidden;padding-block:var(--section-pad);background:var(--deep);color:#fff}
.service-primary::before{
  content:"";position:absolute;right:-170px;top:-190px;
  width:520px;height:520px;border:1px solid rgba(176,141,78,.32);border-radius:50%;pointer-events:none;
}
.service-primary-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,4.4vw,72px);align-items:start;
}
/* 左カラム：番号・線画・英字ラベル */
.service-head{display:grid;gap:clamp(16px,2vw,24px);justify-items:start}
.service-head-top{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px)}
.service-head .service-number{
  font-family:var(--font-en);font-size:15px;font-weight:600;letter-spacing:.14em;line-height:1;
  color:var(--gold-text);
}
.service-en{
  padding-top:clamp(6px,1vw,12px);border-top:1px solid var(--line);
  font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.2em;line-height:1.9;
  color:var(--gold-text);
}
.service-primary .service-head .service-number{color:var(--gold-light)}
.service-primary .service-en{border-top-color:rgba(217,189,127,.4);color:var(--gold-light)}
.service-head .service-icon{
  flex:0 0 auto;width:62px;height:62px;
  fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
.service-primary .service-head .service-icon{stroke:var(--gold-light);opacity:.95}
.service-primary .sec-title{font-size:clamp(27px,3.5vw,44px)}
.service-lead{
  margin-top:clamp(18px,2.4vw,28px);
  font-size:clamp(16px,1.7vw,20px);line-height:1.95;letter-spacing:.08em;color:var(--gold-light);
}
.service-primary .prose{margin-top:clamp(22px,2.6vw,32px)}
.service-primary .text-link{margin-top:clamp(24px,3vw,34px)}

/* 02〜04：白い面。番号・線画・罫線・余白で構成する。 */
.service-others{background:var(--white)}
.service-block{padding-block:clamp(52px,6.4vw,88px);border-top:1px solid var(--line)}
.service-block:first-child{border-top:0;padding-top:0}
.service-block-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,72px);align-items:start;
}
.service-block .sec-title{font-size:clamp(24px,2.9vw,36px)}
.service-block .service-lead{
  font-size:clamp(15px,1.5vw,18px);color:var(--blue);
}
.service-block .prose{margin-top:clamp(18px,2.2vw,26px)}

/* -------------------------------------------------------------
   5. 提携先の注記
   ------------------------------------------------------------- */
/* 4事業一覧の直下に置く、4事業全体への補足。
   5つ目のサービス項目に見せないため、カード・背景色は使わず、
   一覧を締める細い罫線と控えめな文字で「上のまとまりにかかる注記」であることを示す。 */
.partner-note{
  margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
}

/* -------------------------------------------------------------
   6. レスポンシブ
   ------------------------------------------------------------- */
/* タブレット：2カラムを無理に維持せず、テキストと写真を50/50へ */
@media (max-width:1180px){
  .page-hero-split{
    grid-template-columns:max(var(--gutter), calc((100% - var(--wrap)) / 2)) minmax(0,1fr) minmax(0,1fr);
  }
  .page-hero-split .page-hero-inner{width:calc(100% - var(--gutter))}
  .page-hero-split .page-hero-lead{font-size:14px}
}
@media (max-width:1024px){
  .service-primary-grid,.service-block-grid{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  .service-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 1カラムになるので、番号・線画・英字ラベルを横一列へ戻す */
  .service-head{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px}
  .service-en{padding-top:0;border-top:0;border-left:1px solid var(--line);padding-left:20px}
  .service-primary .service-en{border-left-color:rgba(217,189,127,.4)}
}
@media (max-width:768px){
  /* SP：横分割を解除し、テキスト → 写真 の縦積みにする */
  .page-hero-split{display:block;min-height:0}
  .page-hero-split .page-hero-text{display:block}
  .page-hero-split .page-hero-inner{
    width:auto;margin-left:0;
    padding:calc(var(--header-h) + clamp(52px,8vw,96px)) var(--gutter) clamp(52px,7vw,88px);
  }
  .page-hero-split .page-hero-flow{width:100%;height:78%;bottom:-10%;-webkit-mask-image:none;mask-image:none}
  /* 3:2の写真を4:3で切り抜く。顔ではなく手元・PC・資料が残る位置に寄せる */
  .page-hero-split .page-hero-media{aspect-ratio:4 / 3}
  .page-hero-split .page-hero-media img{object-position:52% 50%}
  .page-hero-split .page-hero-media::before{
    background:linear-gradient(180deg,rgba(10,37,49,.32) 0%,rgba(10,37,49,0) 16%);
  }
  .intro-body{padding-block:clamp(44px,6vw,72px) var(--section-pad-sm)}
  .feature-list{grid-template-columns:1fr;gap:10px}
  .service-head .service-icon{width:52px;height:52px}
}
@media (max-width:600px){
  /* 「バックオフィス構築・BPO支援」（14文字）が1文字だけ2行目に落ちないよう、少し小さく字間を詰める */
  .service-block .sec-title{font-size:22px;letter-spacing:.05em}
  .service-index{grid-template-columns:1fr;gap:10px}
  .service-index a{grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:16px 18px}
  .service-head{gap:14px}
  .service-head .service-icon{width:44px;height:44px}
  .feature-list li{font-size:13.5px}
}