/*
Page: Service Pages
IDs: 10403 (system-design), 12774 (marketing-design), 15555 (reskilling), 10948 (network), 12730 (web-design), 18956 (webrepo), 17885 (quadwan), 19161 (work-tools)
Note: Also requires components/blog-card.css, components/yt-embed.css
*/

/* ============================
   Service Pages 共通テンプレート
   (system-design: 10403, marketing-design: 12774,
    reskilling: 15555, network: 10948, web-design: 12730,
    webrepo: 18956)
   ============================ */

/* テーマヘッダー & ブログ風要素を非表示（6ページ共通） */
.page-id-10403 .site-header,
.page-id-12774 .site-header,
.page-id-15555 .site-header,
.page-id-10948 .site-header,
.page-id-12730 .site-header,
.page-id-18956 .site-header,
.page-id-17885 .site-header,
.page-id-19161 .site-header{
  margin-bottom: 0 !important;
}

.page-id-10403 .jumbotron,
.page-id-10403 .page-jumbotron,
.page-id-10403 .jumbotron-overlay,
.page-id-10403 .jumbotron-content,
.page-id-10403 .home-header,
.page-id-10403 .home-header-overlay,
.page-id-10403 .page-header,
.page-id-10403 header.page-header,
.page-id-10403 .entry-header,
.page-id-10403 header.entry-header,
.page-id-10403 .entry-meta,
.page-id-10403 .post-meta,
.page-id-10403 .entry-title,
.page-id-10403 .post-title,
.page-id-10403 .breadcrumbs,
.page-id-10403 .breadcrumb,
.page-id-10403 .posted-on,
.page-id-10403 .byline,
.page-id-10403 .author,
.page-id-10403 .post-author,
.page-id-10403 .cat-links,
.page-id-10403 .ttl_h1,
.page-id-10403 .page-title,
.page-id-12774 .jumbotron,
.page-id-12774 .page-jumbotron,
.page-id-12774 .jumbotron-overlay,
.page-id-12774 .jumbotron-content,
.page-id-12774 .home-header,
.page-id-12774 .home-header-overlay,
.page-id-12774 .page-header,
.page-id-12774 header.page-header,
.page-id-12774 .entry-header,
.page-id-12774 header.entry-header,
.page-id-12774 .entry-meta,
.page-id-12774 .post-meta,
.page-id-12774 .entry-title,
.page-id-12774 .post-title,
.page-id-12774 .breadcrumbs,
.page-id-12774 .breadcrumb,
.page-id-12774 .posted-on,
.page-id-12774 .byline,
.page-id-12774 .author,
.page-id-12774 .post-author,
.page-id-12774 .cat-links,
.page-id-12774 .ttl_h1,
.page-id-12774 .page-title,
.page-id-15555 .jumbotron,
.page-id-15555 .page-jumbotron,
.page-id-15555 .jumbotron-overlay,
.page-id-15555 .jumbotron-content,
.page-id-15555 .home-header,
.page-id-15555 .home-header-overlay,
.page-id-15555 .page-header,
.page-id-15555 header.page-header,
.page-id-15555 .entry-header,
.page-id-15555 header.entry-header,
.page-id-15555 .entry-meta,
.page-id-15555 .post-meta,
.page-id-15555 .entry-title,
.page-id-15555 .post-title,
.page-id-15555 .breadcrumbs,
.page-id-15555 .breadcrumb,
.page-id-15555 .posted-on,
.page-id-15555 .byline,
.page-id-15555 .author,
.page-id-15555 .post-author,
.page-id-15555 .cat-links,
.page-id-15555 .ttl_h1,
.page-id-15555 .page-title,
.page-id-10948 .jumbotron,
.page-id-10948 .page-jumbotron,
.page-id-10948 .jumbotron-overlay,
.page-id-10948 .jumbotron-content,
.page-id-10948 .home-header,
.page-id-10948 .home-header-overlay,
.page-id-10948 .page-header,
.page-id-10948 header.page-header,
.page-id-10948 .entry-header,
.page-id-10948 header.entry-header,
.page-id-10948 .entry-meta,
.page-id-10948 .post-meta,
.page-id-10948 .entry-title,
.page-id-10948 .post-title,
.page-id-10948 .breadcrumbs,
.page-id-10948 .breadcrumb,
.page-id-10948 .posted-on,
.page-id-10948 .byline,
.page-id-10948 .author,
.page-id-10948 .post-author,
.page-id-10948 .cat-links,
.page-id-10948 .ttl_h1,
.page-id-10948 .page-title,
.page-id-12730 .jumbotron,
.page-id-12730 .page-jumbotron,
.page-id-12730 .jumbotron-overlay,
.page-id-12730 .jumbotron-content,
.page-id-12730 .home-header,
.page-id-12730 .home-header-overlay,
.page-id-12730 .page-header,
.page-id-12730 header.page-header,
.page-id-12730 .entry-header,
.page-id-12730 header.entry-header,
.page-id-12730 .entry-meta,
.page-id-12730 .post-meta,
.page-id-12730 .entry-title,
.page-id-12730 .post-title,
.page-id-12730 .breadcrumbs,
.page-id-12730 .breadcrumb,
.page-id-12730 .posted-on,
.page-id-12730 .byline,
.page-id-12730 .author,
.page-id-12730 .post-author,
.page-id-12730 .cat-links,
.page-id-12730 .ttl_h1,
.page-id-12730 .page-title,
.page-id-18956 .jumbotron,
.page-id-18956 .page-jumbotron,
.page-id-18956 .jumbotron-overlay,
.page-id-18956 .jumbotron-content,
.page-id-18956 .home-header,
.page-id-18956 .home-header-overlay,
.page-id-18956 .page-header,
.page-id-18956 header.page-header,
.page-id-18956 .entry-header,
.page-id-18956 header.entry-header,
.page-id-18956 .entry-meta,
.page-id-18956 .post-meta,
.page-id-18956 .entry-title,
.page-id-18956 .post-title,
.page-id-18956 .breadcrumbs,
.page-id-18956 .breadcrumb,
.page-id-18956 .posted-on,
.page-id-18956 .byline,
.page-id-18956 .author,
.page-id-18956 .post-author,
.page-id-18956 .cat-links,
.page-id-18956 .ttl_h1,
.page-id-18956 .page-title,
.page-id-17885 .jumbotron,
.page-id-17885 .page-jumbotron,
.page-id-17885 .jumbotron-overlay,
.page-id-17885 .jumbotron-content,
.page-id-17885 .home-header,
.page-id-17885 .home-header-overlay,
.page-id-17885 .page-header,
.page-id-17885 header.page-header,
.page-id-17885 .entry-header,
.page-id-17885 header.entry-header,
.page-id-17885 .entry-meta,
.page-id-17885 .post-meta,
.page-id-17885 .entry-title,
.page-id-17885 .post-title,
.page-id-17885 .breadcrumbs,
.page-id-17885 .breadcrumb,
.page-id-17885 .posted-on,
.page-id-17885 .byline,
.page-id-17885 .author,
.page-id-17885 .post-author,
.page-id-17885 .cat-links,
.page-id-17885 .ttl_h1,
.page-id-17885 .page-title,
.page-id-19161 .jumbotron,
.page-id-19161 .page-jumbotron,
.page-id-19161 .jumbotron-overlay,
.page-id-19161 .jumbotron-content,
.page-id-19161 .home-header,
.page-id-19161 .home-header-overlay,
.page-id-19161 .page-header,
.page-id-19161 header.page-header,
.page-id-19161 .entry-header,
.page-id-19161 header.entry-header,
.page-id-19161 .entry-meta,
.page-id-19161 .post-meta,
.page-id-19161 .entry-title,
.page-id-19161 .post-title,
.page-id-19161 .breadcrumbs,
.page-id-19161 .breadcrumb,
.page-id-19161 .posted-on,
.page-id-19161 .byline,
.page-id-19161 .author,
.page-id-19161 .post-author,
.page-id-19161 .cat-links,
.page-id-19161 .ttl_h1,
.page-id-19161 .page-title{
  display: none !important;
}

.page-id-10403 .site-content,
.page-id-10403 .content-area,
.page-id-10403 article.page,
.page-id-10403 .entry-content,
.page-id-12774 .site-content,
.page-id-12774 .content-area,
.page-id-12774 article.page,
.page-id-12774 .entry-content,
.page-id-15555 .site-content,
.page-id-15555 .content-area,
.page-id-15555 article.page,
.page-id-15555 .entry-content,
.page-id-10948 .site-content,
.page-id-10948 .content-area,
.page-id-10948 article.page,
.page-id-10948 .entry-content,
.page-id-12730 .site-content,
.page-id-12730 .content-area,
.page-id-12730 article.page,
.page-id-12730 .entry-content,
.page-id-18956 .site-content,
.page-id-18956 .content-area,
.page-id-18956 article.page,
.page-id-18956 .entry-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* === サービスヒーロー (About Usと同じ構造、サイズ調整) === */
.qc-service-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: #ffffff;
  margin: 0;
  padding: 0;
}
.qc-service-hero__bg{
  position: absolute;
  inset: 0;
  /* 濃色帯は下端からの実寸で固定する。割合で置くと、文章量が増えて
     ヒーローが縦に伸びたとき（特にモバイル）にリード文が濃色域へ食い込み、
     文字色 #1D4382 とのコントラストが 4.5:1 を下回るため */
  background:
    radial-gradient(ellipse at 80% 90%, rgba(29, 67, 130, .35) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(59, 130, 246, .2) 0%, transparent 50%),
    linear-gradient(180deg,
      #ffffff 0%,
      #f8fafc 20%,
      #dbeafe calc(100% - 260px),
      #60a5fa calc(100% - 150px),
      #1D4382 calc(100% - 55px),
      #0a1532 100%
    );
  z-index: 0;
}
.qc-service-hero__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  mask-image: linear-gradient(180deg, transparent 40%, black 65%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, black 65%, black 95%, transparent 100%);
}
.qc-service-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  width: 100%;
}
.qc-service-hero__eyebrow{
  font-size: .85em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 28px;
  padding-left: 60px;
  position: relative;
}
.qc-service-hero__eyebrow::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 1px;
  background: #1D4382;
}
.qc-service-hero__title{
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 32px;
  font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #0f172a;
  border: none !important;
  padding: 0 !important;
}
.qc-service-hero__title-accent{
  background: linear-gradient(135deg, #1D4382 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.qc-service-hero__lead{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.8;
  color: #1D4382;
  max-width: 600px;
  margin: 0;
  font-weight: 600;
  text-shadow: none;
}

/* タブ切り替え（components/tabs.js がボタンを作り is-tabbed を付ける） */
.qc-tabs__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.qc-tabs__tab{
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #1D4382;
  background: #ffffff;
  border: 1px solid rgba(29, 67, 130, .25);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.qc-tabs__tab:hover{ border-color: #1D4382; }
.qc-tabs__tab[aria-selected="true"]{
  color: #ffffff;
  background: linear-gradient(135deg, #1D4382 0%, #3b82f6 100%);
  border-color: transparent;
}
.qc-tabs__tab:focus-visible,
.qc-tabs [role="tabpanel"]:focus-visible{
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

/* === 3つの支援サービス === */
.qc-service-pillars{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-pillars__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-pillars__header{ text-align: center; margin-bottom: 64px; }
.qc-service-pillars__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-pillars__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-pillars__title::before,
.qc-service-pillars__title::after{ display: none !important; }
.qc-service-pillars__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.qc-service-pillar{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  padding: 40px 32px 36px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.qc-service-pillar::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1D4382, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.qc-service-pillar:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(29,67,130,.12);
}
.qc-service-pillar:hover::before{ transform: scaleX(1); }
/* 3つの柱のカード上部のイラスト（QuadWAN の qw-pillar-img とシステムデザインで共通・/web-design/ の Contents のカードでも使う・2026-10-18） */
.qc-service-pillar__img,
.qw-pillar-img{
  display: block;
  width: 180px;
  height: 180px;
  margin: -16px 0 8px -16px;
}
.qc-service-pillar__num{
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  letter-spacing: -.03em;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-service-pillar__icon{
  width: 40px;
  height: 40px;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-pillar__icon svg{
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
}
.qc-service-pillar__title{
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px;
  line-height: 1.4;
  border: none !important;
  padding: 0 !important;
}
.qc-service-pillar__desc{
  font-size: 14px;
  line-height: 1.8;
  color: #64748b;
  margin: 0;
}

/* === 概要セクション === */
.qc-service-overview{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 80px 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  box-sizing: border-box;
}
.qc-service-overview__inner{
  max-width: 900px;
  margin: 0 auto;
/*  text-align: center; */
}
.qc-service-overview__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 24px;
}
.qc-service-overview__lead{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 2;
  color: #334155;
  margin: 0 0 20px;
}
.qc-service-overview__lead:last-child{ margin-bottom: 0; }

/* === 業界/カテゴリーグリッド === */
.qc-service-industries{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-industries__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-industries__header{ text-align: center; margin-bottom: 64px; }
.qc-service-industries__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-industries__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-industries__title::before,
.qc-service-industries__title::after{ display: none !important; }
.qc-service-industries__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 4枚のときは2列に（/web-design/ の主な実績・2026-10-18） */
.qc-service-industries__grid--2col{ grid-template-columns: repeat(2, 1fr); }
.qc-service-industry{
  position: relative;
  padding: 36px 32px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .06);
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.qc-service-industry:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(29,67,130,.1);
}
/* 業界カードの上部の写真（カードの余白を打ち消して全幅に。QuadWAN の qw-ind-img とシステムデザインで共通・2026-10-18） */
.qc-service-industry:has(> .qc-service-industry__img, > .qw-ind-img){ overflow: hidden; }
.qc-service-industry__img,
.qw-ind-img{
  display: block;
  width: calc(100% + 64px);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -36px -32px 24px;
  border-radius: 16px 16px 0 0;
}
.qc-service-industry__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-service-industry__title{
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px;
  line-height: 1.4;
  border: none !important;
  padding: 0 !important;
}
.qc-service-industry__desc{
  font-size: 13px;
  line-height: 1.8;
  color: #64748b;
  margin: 0;
}

/* === 事例セクション === */
.qc-service-cases{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-cases__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-cases__header{ text-align: center; margin-bottom: 64px; }
.qc-service-cases__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-cases__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-cases__title::before,
.qc-service-cases__title::after{ display: none !important; }
.qc-service-case{
  margin-bottom: 80px;
}
.qc-service-case:last-child{ margin-bottom: 0; }
.qc-service-case__header{
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
  position: relative;
}
.qc-service-case__header::after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #1D4382, #60a5fa);
  border-radius: 2px;
}
.qc-service-case__num{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-service-case__title{
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  letter-spacing: .01em;
}
.qc-service-case__title::before,
.qc-service-case__title::after{ display: none !important; }
.qc-service-case__images{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.qc-service-case__images img{
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
  transition: transform .5s ease;
}
.qc-service-case__images img:hover{ transform: scale(1.02); }
.qc-service-case__text{
  max-width: 800px;
  margin: 0 auto 20px;
}
.qc-service-case__text p{
  font-size: 15px;
  line-height: 1.9;
  color: #334155;
  margin: 0 0 16px;
}
.qc-service-case__link{
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #1D4382;
  background: rgba(29, 67, 130, .06);
  border: 1px solid rgba(29, 67, 130, .15);
  border-radius: 8px;
  text-decoration: none;
  transition: background .3s ease;
}
.qc-service-case__link:hover{
  background: rgba(29, 67, 130, .12);
}

/* === ブログ記事一覧 === */
.qc-service-blog{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  box-sizing: border-box;
}
.qc-service-blog__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-blog__header{ text-align: center; margin-bottom: 56px; }
.qc-service-blog__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-blog__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-blog__title::before,
.qc-service-blog__title::after{ display: none !important; }

/* === CTA === */
.qc-service-cta{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #0a1532;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}
.qc-service-cta::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, .2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(29, 67, 130, .4) 0%, transparent 60%);
  pointer-events: none;
}
.qc-service-cta__inner{
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}
.qc-service-cta__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 24px;
}
.qc-service-cta__title{
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 20px;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-cta__title::before,
.qc-service-cta__title::after{ display: none !important; }
.qc-service-cta__desc{
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .75);
  margin: 0 0 40px;
}
.qc-service-cta__button{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, #1D4382 0%, #60a5fa 100%);
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(29, 67, 130, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.qc-service-cta__button::after{
  content: '→';
  font-size: 1.2em;
  transition: transform .3s ease;
}
.qc-service-cta__button:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(29, 67, 130, .5);
}
.qc-service-cta__button:hover::after{
  transform: translateX(4px);
}

/* === Responsive === */
@media (max-width: 900px){
  .qc-service-hero__bg{
    background:
      radial-gradient(ellipse at 80% 92%, rgba(29, 67, 130, .35) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 100%, rgba(59, 130, 246, .2) 0%, transparent 50%),
      linear-gradient(180deg,
        #ffffff 0%,
        #f8fafc 18%,
        #dbeafe calc(100% - 170px),
        #60a5fa calc(100% - 95px),
        #1D4382 calc(100% - 35px),
        #0a1532 100%
      );
  }
  .qc-service-hero__inner{ padding: 60px 24px 60px; }
  .qc-service-hero__eyebrow{ padding-left: 40px; }
  .qc-service-hero__eyebrow::before{ width: 28px; }
  .qc-service-pillars,
  .qc-service-overview,
  .qc-service-industries,
  .qc-service-cases,
  .qc-service-blog,
  .qc-service-cta{ padding: 60px 24px; }
  .qc-service-pillars__grid,
  .qc-service-industries__grid{ grid-template-columns: 1fr; gap: 16px; }
  .qc-service-case__images{ grid-template-columns: 1fr; }
  .qc-service-case{ margin-bottom: 60px; }
}

/* === 料金表セクション === */
.qc-service-pricing{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  box-sizing: border-box;
}
.qc-service-pricing__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-pricing__header{ text-align: center; margin-bottom: 56px; }
.qc-service-pricing__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-pricing__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-pricing__title::before,
.qc-service-pricing__title::after{ display: none !important; }
.qc-service-pricing__note{
  font-size: 13px;
  color: #94a3b8;
  letter-spacing: .04em;
  margin: 0;
}
.qc-service-pricing__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.qc-service-plan{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  padding: 40px 32px 36px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.qc-service-plan::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1D4382, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.qc-service-plan:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(29,67,130,.12);
}
.qc-service-plan:hover::before{ transform: scaleX(1); }
.qc-service-plan__name{
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  border-top: none !important;
}
.qc-service-plan__price{
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}
.qc-service-plan__amount{
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-service-plan__unit{
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
}
.qc-service-plan__duration{
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 24px;
  letter-spacing: .04em;
}
.qc-service-plan__features{
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.qc-service-plan__features li{
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  border-bottom: 1px solid rgba(15, 23, 42, .05);
}
.qc-service-plan__features li:last-child{ border-bottom: none; }
.qc-service-plan__features li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 10px;
  height: 1px;
  background: #1D4382;
}
/* 料金カードの中の工程（縦の流れ）。マーケティングデザイン（2026-10-19 ひろゆきさん依頼「サービス料金の工程を縦に長くして3つのワークフローに」） */
.qc-service-plan__flow{
  list-style: none;
  padding: 0;
  margin: 8px 0;
  counter-reset: plan-step;
}
.qc-service-plan__step{
  position: relative;
  min-height: 36px;
  padding: 7px 0 32px 52px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #0f172a;
  counter-increment: plan-step;
}
.qc-service-plan__step:last-child{ padding-bottom: 0; }
.qc-service-plan__step::before{
  content: counter(plan-step, decimal-leading-zero);
  position: absolute;
  z-index: 2;  /* 丸＞流れる粒（1）＞線 */
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(29, 67, 130, .15);
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #1D4382;
  font-family: 'Helvetica Neue', sans-serif;
  box-shadow: 0 4px 12px rgba(29, 67, 130, .1);
}
/* 丸と次の丸をつなぐ線 */
.qc-service-plan__step:not(:last-child)::after{
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(29, 67, 130, .3), rgba(96, 165, 250, .5));
}
.qc-service-plan__note{
  font-size: 12px;
  color: #94a3b8;
  margin-top: 12px;
  line-height: 1.6;
}

/* === 横長バナー（サービス内の別ページ導線） === */
.qc-service-banner{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 56px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-banner__inner{
  max-width: 1000px;
  margin: 0 auto;
}
/* バナーは components/blog-card.css の .qc-blog-card をそのまま使う。
   画像だけはテーマの WebRepo ヒーロー画像（七海・2026-10-12）を背景として指定する
   （本文にテーマのパスを書かずに済ませるため <img> ではなく背景）。七海が右にいるので右寄せ */
.qc-service-banner .qc-blog-card__image{
  /* 中に <img> がないため、狭い画面で blog-card.css の
     aspect-ratio 16/9 と min-height 200px が競合して幅が伸びる。
     幅を固定して、比率には高さだけを決めさせる */
  width: 100%;
  background: url("../assets/img/webrepo/wr-hero-nanami.webp") 80% center / cover no-repeat;
}
/* カード本文の先頭に置く WebRepo のロゴ（2026-10-18 に Q-Tools から差し替え） */
.qc-service-banner .qc-blog-card__logo{
  display: block;
  align-self: flex-start; /* 本文は縦並びの flex。伸ばさず元の比率で置く */
  width: auto;
  height: 44px;
  max-width: 100%;
}
/* カードの右下に小さく置く Q-Tools ロゴ（カードは position: relative） */
.qc-service-banner .qc-blog-card{ position: relative; }
.qc-service-banner .qc-blog-card__qtools{
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: auto;
  height: 22px;
}
@media (max-width: 767px){
  .qc-service-banner .qc-blog-card__qtools{ right: 20px; bottom: 26px; height: 18px; }
}
.qc-service-banner__box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid rgba(29, 67, 130, .25);
  border-left: 4px solid #1D4382;
  border-radius: 14px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.qc-service-banner__box:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(29, 67, 130, .10);
}
.qc-service-banner__body{ flex: 1 1 420px; }
.qc-service-banner__title{
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.5;
  border: none !important;
  padding: 0 !important;
}
.qc-service-banner__title::before,
.qc-service-banner__title::after{ display: none !important; }
.qc-service-banner__desc{
  font-size: 14px;
  line-height: 1.8;
  color: #475569;
  margin: 0;
}
.qc-service-banner__link{
  flex-shrink: 0;
  margin-top: 0;
  white-space: nowrap;
}

/* 料金表のレスポンシブ */
@media (max-width: 900px){
  .qc-service-pricing{ padding: 60px 24px; }
  .qc-service-pricing__grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* === プロセスフロー === */
.qc-service-process{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-process__inner{ max-width: 900px; margin: 0 auto; }
.qc-service-process__header{ text-align: center; margin-bottom: 64px; }
.qc-service-process__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-process__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-process__title::before,
.qc-service-process__title::after{ display: none !important; }

.qc-service-process__list{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: process-counter;
  position: relative;
}
.qc-service-process__list::before{
  z-index: -1;
  content: '';
  position: absolute;
  left: 39px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(29, 67, 130, .3) 0%,
    rgba(96, 165, 250, .5) 50%,
    rgba(29, 67, 130, .3) 100%);
}
.qc-service-process__item{
  position: relative;
  padding: 0 0 32px 110px;
  min-height: 80px;
  counter-increment: process-counter;
}
.qc-service-process__item:last-child{ padding-bottom: 0; }
.qc-service-process__item::before{
  z-index: 1;
  background-color: #fff !important;
  content: counter(process-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(29, 67, 130, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  background-image: linear-gradient(135deg, #1D4382, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Helvetica Neue', sans-serif;
  letter-spacing: -.02em;
  box-shadow: 0 4px 12px rgba(29, 67, 130, .1);
  z-index: 1;
  transition: transform .3s ease, box-shadow .3s ease;
}
.qc-service-process__item:hover::before{
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(29, 67, 130, .25);
}
.qc-service-process__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  z-index: 0;
}
.qc-service-process__step-title{
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 12px 0 12px;
  line-height: 1.4;
  border: none !important;
  padding: 0 !important;
}
.qc-service-process__step-desc{
  font-size: 14px;
  line-height: 1.9;
  color: #475569;
  margin: 0;
}

/* プロセスフローのレスポンシブ */
@media (max-width: 900px){
  .qc-service-process{ padding: 60px 24px; }
  .qc-service-process__list::before{ left: 29px; }
  .qc-service-process__item{
    padding: 0 0 28px 80px;
    min-height: 60px;
  }
  .qc-service-process__item::before{
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}

/* プロセスフローの動き（2026-10-19 ひろゆきさん依頼：QuadWAN「ご注文の流れ」・リスキリング「セミナー開催までの流れ」・システムデザイン／ネットワーク／WEBデザイン「ワークフロー」）
   ステップごとに、丸から次の丸へ光の粒が流れ、着いたときに次の丸が光る（1区間 1.5秒。1周は5ステップまで 7.5秒・6ステップ以上 12秒）。
   説明文の長さで丸の間隔が違っても、区間ごとに流すので光る時刻とずれない。粒は丸の後ろを通る。動きを減らす設定では止める */
@media (prefers-reduced-motion: no-preference) {
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:not(:last-child) .qc-service-process__step-desc::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 34px;
    top: 40px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15), 0 0 16px rgba(37, 99, 235, .5);
    opacity: 0;
    --qc-flow-c: 40px;
    animation: qc-process-flow 7.5s linear infinite;
  }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item::before { animation: qc-process-step 7.5s ease-out infinite; }
  /* 料金カードの中の工程：同じ動きを小さい丸（中心 18px）で。カードごとに同時に流れる */
  .qc-service-plan__step:not(:last-child) > span::after {
    content: '';
    position: absolute;
    left: 13px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15), 0 0 12px rgba(37, 99, 235, .5);
    z-index: 1;
    opacity: 0;
    --qc-flow-c: 13px;
    animation: qc-process-flow 7.5s linear infinite;
  }
  .qc-service-plan__step::before { animation: qc-process-step 7.5s ease-out infinite; }
  .qc-service-plan__step:nth-child(2)::before,
  .qc-service-plan__step:nth-child(2) > span::after { animation-delay: 1.5s; }
  .qc-service-plan__step:nth-child(3)::before,
  .qc-service-plan__step:nth-child(3) > span::after { animation-delay: 3s; }
  .qc-service-plan__step:nth-child(4)::before,
  .qc-service-plan__step:nth-child(4) > span::after { animation-delay: 4.5s; }
  .qc-service-plan__step:nth-child(5)::before { animation-delay: 6s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__list:has(> :nth-child(6)) .qc-service-process__step-desc::after { animation-name: qc-process-flow-long; animation-duration: 12s; }  /* 遅れ（delay）は消さない */
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__list:has(> :nth-child(6)) .qc-service-process__item::before { animation-name: qc-process-step-long; animation-duration: 12s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(2)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(2) .qc-service-process__step-desc::after { animation-delay: 1.5s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(3)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(3) .qc-service-process__step-desc::after { animation-delay: 3s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(4)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(4) .qc-service-process__step-desc::after { animation-delay: 4.5s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(5)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(5) .qc-service-process__step-desc::after { animation-delay: 6s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(6)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(6) .qc-service-process__step-desc::after { animation-delay: 7.5s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(7)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(7) .qc-service-process__step-desc::after { animation-delay: 9s; }
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(8)::before,
  :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:nth-child(8) .qc-service-process__step-desc::after { animation-delay: 10.5s; }

  /* 粒：自分の丸の中心 → 次の丸の中心（1.5秒で着く。1周 7.5秒の 20%／12秒の 12.5%） */
  @keyframes qc-process-flow {
    0% { top: var(--qc-flow-c); opacity: 0; }
    3%, 17% { opacity: 1; }
    20%, 100% { top: calc(100% + var(--qc-flow-c)); opacity: 0; }
  }
  @keyframes qc-process-flow-long {
    0% { top: var(--qc-flow-c); opacity: 0; }
    2%, 10.5% { opacity: 1; }
    12.5%, 100% { top: calc(100% + var(--qc-flow-c)); opacity: 0; }
  }
  /* 丸が光る（粒が着いたとき。最初の丸は1周の始まり） */
  @keyframes qc-process-step {
    0% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .5), 0 0 22px rgba(37, 99, 235, .35); border-color: rgba(37, 99, 235, .6); }
    20%, 100% { box-shadow: 0 4px 12px rgba(29, 67, 130, .1); border-color: rgba(29, 67, 130, .15); }
  }
  @keyframes qc-process-step-long {
    0% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .5), 0 0 22px rgba(37, 99, 235, .35); border-color: rgba(37, 99, 235, .6); }
    12.5%, 100% { box-shadow: 0 4px 12px rgba(29, 67, 130, .1); border-color: rgba(29, 67, 130, .15); }
  }
  @media (max-width: 900px) {
    :is(.page-id-10403, .page-id-10948, .page-id-12730, .page-id-15555, .page-id-17885) .qc-service-process__item:not(:last-child) .qc-service-process__step-desc::after { left: 24px; --qc-flow-c: 30px; }
  }
}

/* === 4項目グリッド === */
.qc-service-solutions{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  box-sizing: border-box;
}
.qc-service-solutions__inner{ max-width: 1200px; margin: 0 auto; }
.qc-service-solutions__header{ text-align: center; margin-bottom: 64px; }
/* セクション見出しの上に置くツールロゴ（/web-design/ の Contents など） */
.qc-service-solutions__logo{
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0 auto 20px;
}
/* カードの並びの右上に置く Q-Tools ロゴ（/web-design/ の Contents・2026-10-18） */
.qc-service-solutions__qtools{
  display: block;
  width: auto;
  height: 32px;
  max-width: 100%;
  margin: -40px 0 16px auto;
}
@media (max-width: 768px){
  .qc-service-solutions__qtools{ height: 26px; margin-top: -32px; }
}

.qc-service-solutions__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-solutions__title{
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-solutions__title::before,
.qc-service-solutions__title::after{ display: none !important; }
.qc-service-solutions__lead{
  max-width: 760px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.9;
  color: #475569;
  text-wrap: pretty;
}
.qc-service-solutions__features{
  max-width: 900px;
  margin: 24px auto 0;
}
.qc-service-solutions__note{
  max-width: 760px;
  margin: 32px auto 0;
  font-size: 13px;
  line-height: 1.8;
  color: #64748b;
  text-align: center;
  text-wrap: pretty;
}
/* 前後のセクションと背景が続く場合に白地へ切り替える */
.qc-service-solutions--light{ background: #ffffff; }
.qc-service-solutions__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.qc-service-solution{
  position: relative;
  padding: 40px 36px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.qc-service-solution::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1D4382, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.qc-service-solution:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(29,67,130,.12);
}
/* ソリューションのカード上部の写真（カードの余白を打ち消して全幅に・ネットワーク・2026-10-18） */
.qc-service-solution__img{
  display: block;
  width: calc(100% + 72px);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -40px -36px 28px;
  border-radius: 20px 20px 0 0;
}
.qc-service-solution:hover::before{ transform: scaleX(1); }
/* カード右上のツールロゴ（/work-tools/）。カードは position: relative */
.qc-service-solution__logo{
  position: absolute;
  top: 32px;
  right: 32px;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
/* ロゴを置いたカードだけ、見出しに逃げを作って重なりを防ぐ */
.qc-service-solution:has(.qc-service-solution__logo)
  :is(.qc-service-solution__num, .qc-service-solution__title){
  padding-right: 72px;
}
@media (max-width: 900px){
  .qc-service-solution__logo{ top: 24px; right: 24px; width: 42px; height: 42px; }
  .qc-service-solution:has(.qc-service-solution__logo)
    :is(.qc-service-solution__num, .qc-service-solution__title){ padding-right: 58px; }
}

.qc-service-solution__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: 16px;
  font-family: 'Helvetica Neue', sans-serif;
}
.qc-service-solution__title{
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  line-height: 1.4;
  border: none !important;
  padding: 0 !important;
}
.qc-service-solution__desc{
  font-size: 14px;
  line-height: 1.8;
  color: #475569;
  margin: 0 0 16px;
}
.qc-service-solution__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #1D4382;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: gap .3s ease;
}
.qc-service-solution__link::after{
  content: '→';
  font-size: 1.2em;
  transition: transform .3s ease;
}
.qc-service-solution__link:hover{ gap: 10px; }
.qc-service-solution__link:hover::after{ transform: translateX(2px); }

/* === チェック付きリスト（おすすめ顧客など） === */
.qc-service-checklist{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 100px 40px;
  background: #ffffff;
  box-sizing: border-box;
}
.qc-service-checklist__inner{ max-width: 900px; margin: 0 auto; }
.qc-service-checklist__header{ text-align: center; margin-bottom: 48px; }
.qc-service-checklist__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 20px;
}
.qc-service-checklist__title{
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-service-checklist__title::before,
.qc-service-checklist__title::after{ display: none !important; }
.qc-service-checklist__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.qc-service-checklist__list li{
  position: relative;
  padding: 16px 20px 16px 52px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, .04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.qc-service-checklist__list li::before{
  content: '✓';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1D4382, #60a5fa);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50%;
}
.qc-service-checklist__list li:hover{
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(29, 67, 130, .08);
}

/* Responsive */
@media (max-width: 900px){
  .qc-service-solutions,
  .qc-service-checklist{ padding: 60px 24px; }
  .qc-service-solutions__grid{ grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 900px){
  .qc-service-banner{ padding: 40px 24px; }
  .qc-service-banner__box{ padding: 24px 22px; }
}

/* === /work-tools/ の Q-Tools ロゴ === */
/* ヒーローが写真＋濃紺ベールになり濃色のロゴが沈むため、
   白地の OVERVIEW 冒頭に置いている */
.qc-service-overview__logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 100%;
  margin: 0 0 24px;
}
@media (max-width: 768px) {
  .qc-service-overview__logo { height: 32px; margin-bottom: 18px; }
}