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

   ・素のヒーローは「上が白 → 下が濃紺」で文字は濃紺。
     写真を敷くページは濃紺のベールを重ね、文字を白へ反転させる
   ・下端は #0a1532 で閉じ、素のヒーローと同じ境目を保つ
   ・サービス系は .qc-service-hero、会社情報系は .qc-hero と
     クラス名が違うだけで構成は同じなので、:is() で両対応にする
   ・対象ページには functions.php が body に .qc-hero-photo を付け、
     このCSS自体もそのページでだけ読み込む
   ・ページを増やすときは QUADCOM_PHOTO_HERO_PAGES と、
     下の「ページ別の画像」に1行ずつ足すだけでよい
   ============================================================ */
.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;
}
/* 用語集プラグインがヒーロー内の語をリンク化し
   .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-hero.webp"); }
.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;
  }
}