/* ============================================================
   写真ヒーロー（背景に実写を敷くページ）

   ・素のヒーローは「上が白 → 下が濃紺」で文字は濃紺。
     写真を敷くページは濃紺のベールを重ね、文字を白へ反転させる
   ・下端は #0a1532 で閉じ、素のヒーローと同じ境目を保つ
   ・サービス系は .qc-service-hero、会社情報系は .qc-hero と
     クラス名が違うだけで構成は同じなので、:is() で両対応にする
   ・対象ページには functions.php が body に .qc-hero-photo を付け、
     このCSS自体もそのページでだけ読み込む
   ・ページを増やすときは QUADCOM_PHOTO_HERO_PAGES と、
     下の「ページ別の画像」に1行ずつ足すだけでよい
   ・アイキャッチを画像にするページは QUADCOM_EYECATCH_HERO_PAGES にも足す
     （--qc-hero-photo は functions.php が head に書き出すので、ここには足さない）
   ============================================================ */
.qc-hero-photo{
  --qc-hero-veil:
    linear-gradient(90deg,
      rgba(10, 21, 50, .89) 0%,
      rgba(10, 21, 50, .76) 44%,
      rgba(10, 21, 50, .48) 76%,
      rgba(10, 21, 50, .38) 100%),
    linear-gradient(180deg,
      rgba(10, 21, 50, .43) 0%,
      rgba(10, 21, 50, .20) 38%,
      rgba(10, 21, 50, .75) 88%,
      #0a1532 100%);
  /* 画像の見せたい位置。既定は中央、必要なページだけ上書きする */
  --qc-hero-photo-pos: center center;
}
.qc-hero-photo :is(.qc-service-hero__bg, .qc-hero__bg){
  background:
    var(--qc-hero-veil),
    var(--qc-hero-photo) var(--qc-hero-photo-pos) / cover no-repeat;
}
/* 背景を動画にするページ：__bg の中に video.qc-hero-photo__video を置く。
   ベールは ::after で動画の上に重ね、__bg 自体には写真を残す。
   最初の数秒と「視差効果を減らす」設定のときは写真を見せる（video に qc-delayed-video を付ける） */
.qc-hero-photo :is(.qc-service-hero__bg, .qc-hero__bg):has(> .qc-hero-photo__video){
  background: var(--qc-hero-photo) var(--qc-hero-photo-pos) / cover no-repeat;
}
.qc-hero-photo :is(.qc-service-hero__bg, .qc-hero__bg):has(> .qc-hero-photo__video)::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qc-hero-veil);
}
.qc-hero-photo__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--qc-hero-photo-pos);
}
/* 用語集プラグインがヒーロー内の語をリンク化し
   .qc-term に color: #1d3f6e !important を当てるため、親の色を継がせる */
.qc-hero-photo :is(.qc-service-hero, .qc-hero) .qc-term{ color: inherit !important; }
.qc-hero-photo :is(.qc-service-hero__eyebrow, .qc-hero__eyebrow){ color: #7dd8ff; }
.qc-hero-photo :is(.qc-service-hero__eyebrow, .qc-hero__eyebrow)::before{ background: #7dd8ff; }
.qc-hero-photo :is(.qc-service-hero__title, .qc-hero__title){ color: #ffffff; }
.qc-hero-photo :is(.qc-service-hero__lead, .qc-hero__lead){ color: rgba(255, 255, 255, .88); }
.qc-hero-photo :is(.qc-service-hero__title-accent, .qc-hero__title-accent){
  background: linear-gradient(135deg, #7dd8ff 0%, #c7ecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ページ別の画像 */
.page-id-426  { --qc-hero-photo: url("../assets/img/inquiry-hero.webp"); }
.page-id-3639 { --qc-hero-photo: url("../assets/img/glossary-hero.webp"); }
.page-id-9901 { --qc-hero-photo: url("../assets/img/about-us-hero.webp"); }
.page-id-10403{ --qc-hero-photo: url("../assets/img/system-design-hero.webp"); }
.page-id-10948{ --qc-hero-photo: url("../assets/img/network-hero.webp"); }
.page-id-12730{ --qc-hero-photo: url("../assets/img/web-design-hero.webp"); }
.page-id-12774{ --qc-hero-photo: url("../assets/img/marketing-design-hero.webp"); }
.page-id-15555{ --qc-hero-photo: url("../assets/img/reskilling-hero.webp"); }
.page-id-17512{ --qc-hero-photo: url("../assets/img/corporate-hero.webp"); }
.page-id-18956{
  --qc-hero-photo: url("../assets/img/webrepo/wr-hero-nanami.webp");
  /* 七海の顔が沈まないよう右側のベールを薄くする（左の文字側は他ページと同じ濃さ） */
  --qc-hero-veil:
    linear-gradient(90deg,
      rgba(10, 21, 50, .89) 0%,
      rgba(10, 21, 50, .70) 40%,
      rgba(10, 21, 50, .15) 70%,
      rgba(10, 21, 50, .05) 100%),
    linear-gradient(180deg,
      rgba(10, 21, 50, .20) 0%,
      rgba(10, 21, 50, 0) 38%,
      rgba(10, 21, 50, .55) 88%,
      #0a1532 100%);
  --qc-hero-photo-pos: center 30%;
}
.page-id-19161{ --qc-hero-photo: url("../assets/img/work-tools-hero.webp"); }

@media (max-width: 900px){
  /* 横幅が狭いぶん、左右のベールをやめて縦方向だけにし、そのぶん濃いめにする。
     画像はやや右を見せて主題を残す */
  .qc-hero-photo{
    --qc-hero-veil:
      linear-gradient(180deg,
        rgba(10, 21, 50, .81) 0%,
        rgba(10, 21, 50, .69) 45%,
        rgba(10, 21, 50, .87) 88%,
        #0a1532 100%);
    --qc-hero-photo-pos: 65% center;
  }
  .page-id-18956{ --qc-hero-photo-pos: 80% center; } /* 七海が見える位置 */
}

/* サービスページの見出しは左下にそろえる（2026-10-18）。
   写真の人物の顔は上の方に写っていることが多く、上に置くと見出しが顔にかかるため。
   写真はそのままにして、文字のまとまりを顔より下へ動かす。
   ・PC：文字をヒーローの下側に寄せる
   ・スマホ：文字の上に余白をとり、顔の下から文字を始める */
@media (min-width: 901px){
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-12774, .page-id-15555, .page-id-18956, .page-id-19161) .qc-service-hero{ align-items: flex-end; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-12774, .page-id-15555, .page-id-18956, .page-id-19161) .qc-service-hero__inner{ padding-bottom: 56px; }
}
@media (max-width: 900px){
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-12774, .page-id-15555, .page-id-18956, .page-id-19161) .qc-service-hero__inner{ padding-top: 240px; }
  .page-id-18956 .qc-service-hero__inner{ padding-top: 300px; } /* 文字が多く写真が縦に伸びるぶん、七海の顔も下がる */
}