/* ============================================================
   /quadwan/ のヒーロー（2026-09-23）
   ・ヒーロー以外は共通の services.css に統一したため、
     このファイルにはヒーローとその付随要素だけを残す
   ・元テンプレート page-quadwan.php のヒーロー部分をそのまま移設
   ============================================================ */

/* テンプレートにあった * のリセットが無くなったため、この範囲だけ補う
   （:where() で詳細度を 0 にし、後続のクラス指定を邪魔しない） */
:where(#quadwan-page) *,
:where(#quadwan-page) *::before,
:where(#quadwan-page) *::after { box-sizing: border-box; }

/* テンプレート時代はコンテナ幅の制限を外して全幅にしていた。
   通常の固定ページでは幅1100pxに収まるため、ヒーローだけ画面いっぱいに広げる */
#quadwan-page .qw-hero {
  box-sizing: border-box;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

#quadwan-page .qw-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
#quadwan-page .qw-container-md { max-width: 900px; margin: 0 auto; padding: 0 24px; }
#quadwan-page .qw-hero { background: #0a1428; padding: 32px 24px; overflow: hidden; min-height: 520px; position: relative; }
#quadwan-page .qw-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; pointer-events: none; }
#quadwan-page .qw-hero-inner { display: flex; align-items: flex-start; gap: 32px; }
#quadwan-page .qw-hero-text { flex: 1; max-width: 55%; }
#quadwan-page .qw-hero-sub { margin-top: 0; }
#quadwan-page .qw-hero-img-wrap { flex: 0 0 52%; margin-right: -64px; display: flex; align-items: center; justify-content: center; }
#quadwan-page .qw-hero-img-wrap img { width: 100%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 8px 32px rgba(77,184,232,0.25)); }
#quadwan-page .qw-hero-logo { height: 48px; width: auto !important; object-fit: contain; display: block !important; margin-left: 0 !important; margin-right: auto !important; margin-bottom: 16px; }
#quadwan-page .qw-hero h1 { color: #fff; font-size: clamp(19.2px, 3vw, 36px); font-weight: 900; line-height: 1.3; margin-bottom: 20px; }
#quadwan-page .qw-hero h1 .accent { color: #4DB8E8; }
#quadwan-page .qw-hero-sub { color: rgba(255,255,255,0.8); font-size: 15.2px; line-height: 1.8; margin-bottom: 32px; max-width: 560px; }
#quadwan-page .qw-hero-btns { display: flex; flex-wrap: wrap; gap: 16px; }
#quadwan-page .qw-hero-img-mobile { display: none; }
#quadwan-page .qw-btn-primary { background: #007BBB; color: #fff !important; font-weight: 700; padding: 14px 32px; border-radius: 4px; font-size: 16px; transition: background 0.2s, transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; }
#quadwan-page .qw-btn-primary:hover { background: #006699; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,123,187,0.35); }
#quadwan-page .qw-btn-outline-white { background: transparent; color: #fff !important; font-weight: 700; padding: 14px 32px; border-radius: 4px; font-size: 16px; border: 2px solid rgba(255,255,255,0.4); transition: border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; }
#quadwan-page .qw-btn-outline-white:hover { border-color: rgba(255,255,255,0.7); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.20); }
#quadwan-page .qw-ind-hero h2 .accent { color: #7dd8ff; }
#quadwan-page .qw-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
#quadwan-page .qw-fade.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
  #quadwan-page .qw-hero { padding: 32px 24px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #quadwan-page .qw-hero { padding: 40px 24px; }
}

@media (min-width: 1024px) {
  #quadwan-page .qw-hero { padding: 112px 24px; }
}

@media (max-width: 767px) {
  #quadwan-page .qw-hero-video { object-position: 75% center; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #quadwan-page .qw-hero-video { object-position: 75% center; }
}

@media (max-width: 767px) {
  #quadwan-page .qw-hero-text { max-width: 100%; }
}

@media (max-width: 767px) {
  #quadwan-page .qw-hero-sub { margin-top: 128px; }
}

@media (max-width: 1024px) {
  #quadwan-page .qw-hero-inner { flex-direction: column; }
  #quadwan-page .qw-hero-img-wrap { display: none; }
  #quadwan-page .qw-hero-img-mobile { display: block; width: 100%; max-width: 420px; margin: 24px auto 0; }
  #quadwan-page .qw-hero-img-mobile img { width: 100%; object-fit: contain; filter: drop-shadow(0 8px 32px rgba(77,184,232,0.25)); }
}

@media (max-width: 768px) {
  #quadwan-page .qw-hero { padding: 40px 20px; }
  #quadwan-page .qw-hero-logo { height: 40px; }
  #quadwan-page .qw-hero-btns { flex-direction: column; align-items: center; }
  #quadwan-page .qw-hero-btns a { width: 100%; text-align: center; box-sizing: border-box; }
}

/* 紹介動画（共通トーンに合わせる） */
.qc-service-video {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 72px 24px 80px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}
.qc-service-video__inner { max-width: 860px; margin: 0 auto; }
.qc-service-video__header { text-align: center; margin-bottom: 40px; }
.qc-service-video__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #1D4382;
  margin-bottom: 14px;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-service-video__title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 14px;
  border: none !important;
  padding: 0 !important;
}
.qc-service-video__lead { font-size: 15px; line-height: 1.9; color: #64748b; margin: 0; }
.qc-service-video__frame {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(29, 67, 130, .18);
}
.qc-service-video__frame::before { content: ''; display: block; padding-bottom: 56.25%; }
.qc-service-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
@media (max-width: 768px) {
  .qc-service-video { padding: 48px 16px 56px; }
}

@media (max-width: 768px) {
  .qc-service-video { padding: 48px 16px 56px; }
}

/* CTA内の料金の但し書き */
.page-id-17885 .qc-service-cta__note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}

/* 用語集の自動リンク（term-tooltip.css）は既定が紺色 #1d3f6e。
   暗いヒーローの上では読めないため、本文と同じ白に戻す */
#quadwan-page .qw-hero .qc-term {
  color: inherit !important;
  border-bottom-color: rgba(255, 255, 255, .5);
}
#quadwan-page .qw-hero .qc-term:hover,
#quadwan-page .qw-hero .qc-term:focus-visible {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

/* === SIer様へ（業種別ソリューションの詳細） === */
.qc-sier__items {
  display: grid;
  gap: 24px;
}
.qc-sier__item {
  padding: 36px 32px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .06);
}
.qc-sier__num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-sier__title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 24px;
  line-height: 1.5;
  border: none !important;
  padding: 0 !important;
}
.qc-sier__group + .qc-sier__group { margin-top: 24px; }
.qc-sier__group-title {
  font-size: 13px;
  font-weight: 800;
  color: #1D4382;
  letter-spacing: .06em;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(29, 67, 130, .14);
}
.qc-sier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.qc-sier__list li {
  font-size: 13px;
  line-height: 1.85;
  color: #64748b;
  padding-left: 18px;
  position: relative;
}
.qc-sier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
}
.qc-sier__list strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
@media (min-width: 900px) {
  .qc-sier__list { grid-template-columns: 1fr 1fr; gap: 12px 28px; }
}
@media (max-width: 768px) {
  .qc-sier__item { padding: 28px 22px; }
}

/* 実績セクションの注意書き */
.qc-service-cases__note {
  margin: 28px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #94a3b8;
  text-align: right;
}

/* === 実績を2列（左に写真・右に本文）にする === */
/* 写真は元の縦横比（800:436）のまま。共通CSSの 4/3 トリミングを解除する */
.qc-service-cases .qc-service-case__images {
  grid-template-columns: 1fr;
  max-width: 520px;
}
.qc-service-cases .qc-service-case__images img {
  aspect-ratio: 800 / 436;
  height: auto;
}

@media (min-width: 900px) {
  .qc-service-cases .qc-service-case {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "image  text";
    column-gap: 40px;
    row-gap: 20px;
    align-items: start;
  }
  .qc-service-cases .qc-service-case__header {
    grid-area: header;
    margin-bottom: 4px;
  }
  .qc-service-cases .qc-service-case__images {
    grid-area: image;
    margin-bottom: 0;
    max-width: none;
  }
  .qc-service-cases .qc-service-case__text {
    grid-area: text;
    max-width: none;
    margin: 0;
  }
}