/* ============================================================
   写真付きCTA（お問い合わせ）と写真のクレジット

   ・本文の CTA の section に qc-service-cta--photo を付け、写真は下の
     「ページ別の写真」に1行足す（--qc-cta-photo・必要なら --qc-cta-photo-pos）
   ・人物は TOKYO POP STUDIO のアーティスト。クレジットは本文に
     <span class="qc-photo-credit"> で入れる
   ・このCSSは QUADCOM_CTA_PHOTO_PAGES のページでだけ読み込む（functions.php）
   ・2026-10-18 に services.css・quadwan.css・webrepo.css から移した
   ============================================================ */
/* 写真付きCTA（人物が右・文章は左寄せ） */
.qc-service-cta--photo{
  text-align: left;
  background:
    linear-gradient(90deg, #0a1532 0%, #0a1532 38%, rgba(10, 21, 50, .55) 62%, rgba(10, 21, 50, .05) 100%),
    var(--qc-cta-photo) var(--qc-cta-photo-pos, right 30%) / cover no-repeat;
}
.qc-service-cta--photo .qc-service-cta__inner{ max-width: 1200px; }
.qc-service-cta--photo .qc-service-cta__inner > *{ max-width: 540px; }
/* スマホは「ラベル・見出し → 写真の帯 → ボタン」の順にする。写真は説明文の段の背景にして、
   写真の左の暗い所に説明文を左寄せで置き、人物の顔には文字をかけない（2026-10-24 ひろゆきさん指示）。
   人物の位置は --qc-cta-photo-pos-sp（既定は右寄せ）で写真ごとに合わせる */
@media (max-width: 900px){
  .qc-service-cta--photo{
    text-align: center;
    background: #0a1532;
  }
  .qc-service-cta--photo .qc-service-cta__inner > *{ max-width: none; }
  .qc-service-cta--photo .qc-service-cta__desc,
  .cta-section.qc-cta-photo-ordx .cta-sub{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    min-height: 260px;
    margin: 24px 0 32px calc(50% - 50vw);
    padding: 20px 60vw 20px 24px;
    text-align: left;
    font-size: 13px;
    line-height: 1.8;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(10, 21, 50, .8);
    background:
      linear-gradient(90deg, rgba(10, 21, 50, .8) 0%, rgba(10, 21, 50, .6) 38%, rgba(10, 21, 50, 0) 62%),
      var(--qc-cta-photo) var(--qc-cta-photo-pos-sp, right center) / cover no-repeat;
  }
  :is(.qc-service-cta--photo .qc-service-cta__desc, .cta-section.qc-cta-photo-ordx .cta-sub) br{ display: none; }
}
/* 写真のクレジット（写真付きCTA・写真ヒーローの右下）。QuadWAN のヒーローのクレジットと同じ見た目 */
.qc-photo-credit{
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  font-size: 11.52px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .75);
  background: rgba(0, 0, 0, .35);
  padding: 3px 8px;
  border-radius: 3px;
}
.qc-photo-credit a{
  color: rgba(255, 255, 255, .75) !important;
  text-decoration: none !important;
  transition: color .2s;
}
.qc-photo-credit a:hover,
.qc-photo-credit a:focus-visible{ color: #ffffff !important; }

/* 手術室DX（テンプレート page-or-dx.php）の CTA は作りが違うので、同じ見た目をこちらで当てる。
   テンプレート内の <style> の .cta-section が後から読まれるため、2つのクラスで指定する */
.cta-section.qc-cta-photo-ordx{
  position: relative;
  text-align: left;
  padding-left: max(32px, calc((100% - 1200px) / 2 + 40px));
  background:
    linear-gradient(90deg, #0a1532 0%, #0a1532 38%, rgba(10, 21, 50, .55) 62%, rgba(10, 21, 50, .05) 100%),
    var(--qc-cta-photo) var(--qc-cta-photo-pos, right 30%) / cover no-repeat;
}
.cta-section.qc-cta-photo-ordx > :not(.qc-photo-credit){ max-width: 540px; }
@media (max-width: 900px){
  .cta-section.qc-cta-photo-ordx{
    text-align: center;
    padding-left: 24px;
    padding-right: 24px;
    background: #0a1532;
  }
  .cta-section.qc-cta-photo-ordx > :not(.qc-photo-credit){ max-width: none; }
}

/* ページ別の写真（API で作った写真は人物の頭が上の方にあるので、上寄せ right 10% にする） */
.page-id-10403 { --qc-cta-photo: url("../assets/img/cta/cta-system-design.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-10948 { --qc-cta-photo: url("../assets/img/cta/cta-network.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-12730 { --qc-cta-photo: url("../assets/img/cta/cta-web-design.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-12774 { --qc-cta-photo: url("../assets/img/cta/cta-marketing-design.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-15555 { --qc-cta-photo: url("../assets/img/cta/cta-reskilling.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-17512 { --qc-cta-photo: url("../assets/img/cta/cta-corporate.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-17885 { --qc-cta-photo: url("../assets/img/quadwan/qw-cta-shiori.webp"); }
.page-id-18663 { --qc-cta-photo: url("../assets/img/cta/cta-or-dx.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-18956 {
  --qc-cta-photo: url("../assets/img/webrepo/wr-cta-nanami.webp");
  --qc-cta-photo-pos: right 10%; /* 頭の上が切れないよう上寄せ */
}
.page-id-19161 { --qc-cta-photo: url("../assets/img/cta/cta-work-tools.webp"); --qc-cta-photo-pos: right 10%; }
.page-id-21063 { --qc-cta-photo: url("../assets/img/cta/cta-forms-shibuyagawa.webp"); --qc-cta-photo-pos: right 30%; }
/* Forms（渋谷川46の2人）：2人が写真の中央寄りにいるので、スマホの帯では左寄せにして右へ逃がす */
.page-id-21063 { --qc-cta-photo-pos-sp: 0% center; }
.page-id-12774 { --qc-cta-photo-pos-sp: 0% center; } /* マーケティング：大人数が横に並ぶので、左端の人に文字がかからないよう右へ */