/* ========================================
   INTEGRATED MANUFACTURING PAGE
   一貫対応ページ — Process Journey Design

   デザインコンセプト:
   - スチールグレー基調 × オレンジアクセント
   - 垂直タイムラインを中心に工程の流れを表現
   - ダーク/ライト交互セクション
   - aluminum ページとは異なる独自デザイン
     （DM Sans / フルワイド Hero / タイムライン）
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ========================================
   CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Typography */
  --integ-font-en: "DM Sans", "Inter", system-ui, sans-serif;
  --integ-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* Dark palette — Steel gray */
  --integ-dark: #1e2328;
  --integ-darker: #161a1e;
  --integ-surface-dark: #252a30;
  --integ-border-dark: rgba(255, 255, 255, 0.10);
  --integ-border-accent: rgba(245, 130, 32, 0.35);

  /* Text on dark */
  --integ-text-light: rgba(255, 255, 255, 0.93);
  --integ-text-muted-light: rgba(255, 255, 255, 0.58);
  --integ-text-subtle-light: rgba(255, 255, 255, 0.35);

  /* Light palette */
  --integ-light-bg: #f0f2f5;
  --integ-light-surface: #ffffff;
  --integ-light-text: #1e2328;
  --integ-light-text-muted: rgba(30, 35, 40, 0.6);
  --integ-light-border: rgba(30, 35, 40, 0.12);

  /* Accent */
  --integ-accent: #F58220;
  --integ-accent-bright: #ff9a40;
  --integ-accent-soft: rgba(245, 130, 32, 0.12);
  --integ-accent-glow: rgba(245, 130, 32, 0.25);

  /* Layout */
  --integ-section-py: clamp(72px, 10vw, 128px);
  --integ-container-max: 1200px;
  --integ-gutter: var(--gutter, clamp(20px, 4vw, 48px));

  /* Timeline */
  --integ-timeline-width: 3px;
  --integ-marker-size: 48px;
}

/* ========================================
   BODY OVERRIDE
   ======================================== */
body.page-template-page-bankin-integrated .site-main {
  padding-top: 0;
}

/* ========================================
   REVEAL ANIMATION
   ======================================== */
.integ-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.integ-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .integ-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   PHOTO PLACEHOLDER（共通）
   ======================================== */
.integ-photo--blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--integ-surface-dark);
  border: 2px dashed var(--integ-border-dark);
  min-height: 280px;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md, 12px);
}

/* ライトセクション用 */
.integ-section--merit .integ-photo--blank,
.integ-section--scope .integ-photo--blank,
.integ-section--cases .integ-photo--blank,
.integ-section--faq .integ-photo--blank {
  background: var(--integ-light-bg);
  border-color: var(--integ-light-border);
}

.integ-photo__icon {
  color: var(--integ-text-subtle-light);
  opacity: 0.6;
}

.integ-section--merit .integ-photo__icon,
.integ-section--scope .integ-photo__icon,
.integ-section--cases .integ-photo__icon,
.integ-section--faq .integ-photo__icon {
  color: var(--integ-light-text-muted);
}

.integ-photo__text {
  font-family: var(--integ-font-ja);
  font-size: 13px;
  color: var(--integ-text-subtle-light);
  letter-spacing: 0.1em;
}

.integ-section--merit .integ-photo__text,
.integ-section--scope .integ-photo__text,
.integ-section--cases .integ-photo__text,
.integ-section--faq .integ-photo__text {
  color: var(--integ-light-text-muted);
}

/* ========================================
   SECTION — 共通
   ======================================== */
.integ-section {
  padding: var(--integ-section-py) 0;
  position: relative;
  overflow: hidden;
}

.integ-section__container {
  max-width: var(--integ-container-max);
  margin: 0 auto;
  padding: 0 var(--integ-gutter);
}

/* ダークセクション */
.integ-section--flow,
.integ-section--quality,
.integ-section--industry {
  background: var(--integ-dark);
  color: var(--integ-text-light);
}

/* ライトセクション */
.integ-section--merit,
.integ-section--scope,
.integ-section--cases,
.integ-section--faq {
  background: var(--integ-light-bg);
  color: var(--integ-light-text);
}

/* ========================================
   HEADING — 共通
   ======================================== */
.integ-heading {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.integ-heading__en {
  display: block;
  font-family: var(--integ-font-en);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--integ-accent);
  margin-bottom: 12px;
}

.integ-heading__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin: 0 0 clamp(12px, 2vw, 20px);
}

.integ-heading__lead {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.88rem, 1.2vw, 1.05rem);
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto;
}

/* ダークセクション見出し */
.integ-heading--dark .integ-heading__title {
  color: var(--integ-text-light);
}

.integ-heading--dark .integ-heading__lead {
  color: var(--integ-text-muted-light);
}

/* ライトセクション見出し */
.integ-heading__title {
  color: var(--integ-light-text);
}

.integ-heading__lead {
  color: var(--integ-light-text-muted);
}

/* ========================================
   1. HERO — フルワイド
   ======================================== */
.integ-hero {
  position: relative;
  min-height: clamp(480px, 65vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--integ-darker);
}

.integ-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.integ-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.integ-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.integ-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(22, 26, 30, 0.55) 0%,
      rgba(30, 35, 40, 0.78) 50%,
      rgba(22, 26, 30, 0.92) 100%
    );
}

.integ-hero__container {
  position: relative;
  z-index: 3;
  max-width: var(--integ-container-max);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 80px) var(--integ-gutter);
  width: 100%;
}

.integ-hero__content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.integ-hero__eyebrow {
  display: inline-block;
  font-family: var(--integ-font-en);
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--integ-accent);
  margin-bottom: clamp(16px, 3vw, 24px);
  padding: 6px 20px;
  border: 1px solid var(--integ-border-accent);
  border-radius: var(--radius-pill, 999px);
  background: rgba(245, 130, 32, 0.08);
}

.integ-hero__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--integ-text-light);
  margin: 0 0 clamp(16px, 3vw, 28px);
}

.integ-hero__lead {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  line-height: 1.9;
  color: var(--integ-text-muted-light);
  margin: 0;
}

/* ========================================
   2. MERITS — 3カラムカードグリッド
   ======================================== */
.integ-merits {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 640px) {
  .integ-merits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .integ-merits {
    grid-template-columns: repeat(3, 1fr);
  }
}

.integ-merit {
  background: var(--integ-light-surface);
  border-radius: var(--radius-md, 12px);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  border: 1px solid var(--integ-light-border);
  transition: transform var(--transition-base, 0.28s ease),
              box-shadow var(--transition-base, 0.28s ease);
}

.integ-merit:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(30, 35, 40, 0.10);
}

.integ-merit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--integ-accent-soft);
  color: var(--integ-accent);
  margin-bottom: 20px;
  font-size: 24px;
}

.integ-merit__icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.integ-merit__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--integ-light-text);
}

.integ-merit__text {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.8;
  color: var(--integ-light-text-muted);
  margin: 0;
}

/* ========================================
   3. PROCESS FLOW TIMELINE — キービジュアル
   ======================================== */
.integ-timeline {
  position: relative;
  padding: 20px 0;
}

/* 中央ライン（デスクトップ） */
.integ-timeline__line {
  display: none;
}

@media (min-width: 960px) {
  .integ-timeline__line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--integ-timeline-width);
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--integ-accent) 8%,
      var(--integ-accent) 92%,
      transparent 100%
    );
    transform: translateX(-50%);
  }
}

/* モバイル: 左サイドライン */
@media (max-width: 959px) {
  .integ-timeline__line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: var(--integ-timeline-width);
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--integ-accent) 5%,
      var(--integ-accent) 95%,
      transparent 100%
    );
  }
}

/* ステップ */
.integ-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(48px, 7vw, 80px);
  align-items: center;
}

.integ-step:last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .integ-step {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
  }

  /* 偶数ステップ: メディアとテキストを入れ替え */
  .integ-step--reverse .integ-step__media {
    order: 2;
  }

  .integ-step--reverse .integ-step__body {
    order: 1;
    text-align: right;
  }
}

/* マーカー（番号付き円） */
.integ-step__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--integ-marker-size);
  height: var(--integ-marker-size);
  border-radius: 50%;
  background: var(--integ-accent);
  color: #fff;
  font-family: var(--integ-font-en);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 6px var(--integ-dark), 0 0 24px var(--integ-accent-glow);
  z-index: 2;
  flex-shrink: 0;
}

/* モバイル: マーカー位置 */
@media (max-width: 959px) {
  .integ-step {
    padding-left: calc(24px + var(--integ-marker-size) / 2 + 24px);
  }

  .integ-step__marker {
    position: absolute;
    left: 0;
    top: 0;
  }
}

/* デスクトップ: マーカーを中央ラインに配置 */
@media (min-width: 960px) {
  .integ-step__marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* メディア */
.integ-step__media {
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.integ-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.integ-step:hover .integ-step__media img {
  transform: scale(1.03);
}

.integ-step__media .integ-photo--blank {
  min-height: unset;
  height: 100%;
  aspect-ratio: 16 / 10;
}

/* ボディ */
.integ-step__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--integ-text-light);
  margin: 0 0 8px;
  line-height: 1.4;
}

.integ-step__equipment {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 600;
  color: var(--integ-accent);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

.integ-step__text {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.85;
  color: var(--integ-text-muted-light);
  margin: 0;
}

/* ========================================
   4. SCOPE — 対応範囲比較カード
   ======================================== */
.integ-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 768px) {
  .integ-scope-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integ-scope-card {
  background: var(--integ-light-surface);
  border-radius: var(--radius-md, 12px);
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--integ-light-border);
  transition: box-shadow var(--transition-base, 0.28s ease);
}

.integ-scope-card:hover {
  box-shadow: 0 12px 28px rgba(30, 35, 40, 0.08);
}

.integ-scope-card--internal {
  background: linear-gradient(135deg, rgba(245, 130, 32, 0.04), transparent 60%);
}

.integ-scope-card--external {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.06), transparent 60%);
}

.integ-scope-card__badge {
  display: inline-block;
  font-family: var(--integ-font-ja);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: var(--radius-pill, 999px);
  margin-bottom: 20px;
}

.integ-scope-card--internal .integ-scope-card__badge {
  background: var(--integ-accent-soft);
  color: var(--integ-accent);
}

.integ-scope-card--external .integ-scope-card__badge {
  background: rgba(156, 163, 175, 0.12);
  color: #6b7280;
}

.integ-scope-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.integ-scope-card__list li {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.88rem, 1vw, 0.95rem);
  line-height: 1.7;
  padding: 8px 0;
  border-bottom: 1px solid var(--integ-light-border);
  color: var(--integ-light-text);
  padding-left: 20px;
  position: relative;
}

.integ-scope-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.integ-scope-card--internal .integ-scope-card__list li::before {
  background: var(--integ-accent);
}

.integ-scope-card--external .integ-scope-card__list li::before {
  background: #9ca3af;
}

.integ-scope-card__list li:last-child {
  border-bottom: none;
}

.integ-scope-card__note {
  font-family: var(--integ-font-ja);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--integ-light-text-muted);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--integ-light-border);
}

/* ========================================
   5. QUALITY — 2×2 チェックリスト
   ======================================== */
.integ-quality-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 28px);
}

@media (min-width: 768px) {
  .integ-quality-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integ-quality-item {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: flex-start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--integ-surface-dark);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--integ-border-dark);
  transition: border-color var(--transition-base, 0.28s ease);
}

.integ-quality-item:hover {
  border-color: var(--integ-border-accent);
}

.integ-quality-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  background: var(--integ-accent-soft);
  color: var(--integ-accent);
  flex-shrink: 0;
  font-size: 20px;
}

.integ-quality-item__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.integ-quality-item__body {
  flex: 1;
  min-width: 0;
}

.integ-quality-item__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 700;
  color: var(--integ-text-light);
  margin: 0 0 6px;
}

.integ-quality-item__text {
  font-family: var(--integ-font-ja);
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.75;
  color: var(--integ-text-muted-light);
  margin: 0;
}

/* ========================================
   6. CASES — 製作事例（card-list 共通コンポーネント使用）
   ======================================== */
.integ-section--cases .card-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.integ-cases__more {
  text-align: center;
  margin-top: clamp(32px, 5vw, 48px);
}

.integ-cases__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--integ-font-ja);
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 600;
  color: var(--integ-accent);
  text-decoration: none;
  transition: gap 0.3s ease, color 0.3s ease;
}

.integ-cases__more-link:hover {
  color: var(--integ-light-text);
  gap: 14px;
}

/* ========================================
   6b. EQUIPMENT — 主要設備
   ======================================== */
.integ-section--equipment {
  background: var(--integ-light-bg);
}

.integ-equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 768px) {
  .integ-equipment-grid {
    grid-template-columns: 1fr;
  }
}

.integ-equipment-card {
  background: var(--integ-light-surface);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--integ-light-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.integ-equipment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30, 35, 40, 0.10);
}

.integ-equipment-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.integ-equipment-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.integ-equipment-card:hover .integ-equipment-card__media img {
  transform: scale(1.03);
}

.integ-equipment-card__body {
  padding: clamp(16px, 2vw, 24px);
}

.integ-equipment-card__name {
  margin: 0 0 4px;
  font-family: var(--integ-font-ja);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700;
  color: var(--integ-light-text);
}

.integ-equipment-card__model {
  margin: 0;
  font-family: var(--integ-font-en);
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 500;
  color: var(--integ-accent);
}

/* ========================================
   6c. PRODUCTS — 代表的な製作品
   ======================================== */
.integ-section--products {
  background: var(--integ-dark);
}

.integ-product-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1.5vw, 16px);
}

@media (max-width: 960px) {
  .integ-product-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .integ-product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integ-product {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  aspect-ratio: 1;
}

.integ-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.integ-product:hover img {
  transform: scale(1.05);
}

.integ-product figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(8px, 1.5vw, 16px);
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  font-family: var(--integ-font-ja);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integ-product figcaption span {
  font-size: clamp(10px, 0.9vw, 11px);
  font-weight: 400;
  color: rgba(255,255,255,0.7);
}

/* ========================================
   7. INDUSTRY — 対応業種
   ======================================== */
.integ-industry-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 48px);
}

@media (min-width: 768px) {
  .integ-industry-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integ-industry-block__title {
  font-family: var(--integ-font-ja);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: var(--integ-text-light);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--integ-border-dark);
}

.integ-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.integ-tag {
  display: inline-block;
  font-family: var(--integ-font-ja);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-pill, 999px);
  background: var(--integ-surface-dark);
  border: 1px solid var(--integ-border-dark);
  color: var(--integ-text-muted-light);
  transition: border-color var(--transition-fast, 0.2s ease),
              color var(--transition-fast, 0.2s ease),
              background var(--transition-fast, 0.2s ease);
}

.integ-tag:hover {
  border-color: var(--integ-accent);
  color: var(--integ-accent);
  background: rgba(245, 130, 32, 0.06);
}

/* ========================================
   8. FAQ — アコーディオン
   ======================================== */
.integ-faq {
  max-width: 880px;
  margin: 0 auto;
}

.integ-faq__item {
  border: 1px solid var(--integ-light-border);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 12px;
  background: var(--integ-light-surface);
  overflow: hidden;
  transition: box-shadow var(--transition-base, 0.28s ease);
}

.integ-faq__item:hover {
  box-shadow: 0 4px 16px rgba(30, 35, 40, 0.06);
}

.integ-faq__item[open] {
  box-shadow: 0 8px 24px rgba(30, 35, 40, 0.08);
}

.integ-faq__question {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 16px);
  padding: clamp(16px, 2.5vw, 24px) clamp(20px, 3vw, 28px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast, 0.2s ease);
}

.integ-faq__question::-webkit-details-marker {
  display: none;
}

.integ-faq__question:hover {
  background: rgba(245, 130, 32, 0.03);
}

.integ-faq__q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--integ-accent);
  color: #fff;
  font-family: var(--integ-font-en);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.integ-faq__question-text {
  flex: 1;
  font-family: var(--integ-font-ja);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 600;
  color: var(--integ-light-text);
  line-height: 1.5;
}

.integ-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--integ-light-bg);
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-base, 0.28s ease),
              background var(--transition-base, 0.28s ease);
}

.integ-faq__toggle::before,
.integ-faq__toggle::after {
  content: '';
  position: absolute;
  background: var(--integ-light-text-muted);
  border-radius: 1px;
  transition: transform var(--transition-base, 0.28s ease),
              opacity var(--transition-base, 0.28s ease);
}

/* 横棒 */
.integ-faq__toggle::before {
  width: 12px;
  height: 2px;
}

/* 縦棒 */
.integ-faq__toggle::after {
  width: 2px;
  height: 12px;
}

/* 開いた状態: 縦棒を非表示 */
.integ-faq__item[open] .integ-faq__toggle {
  background: var(--integ-accent-soft);
}

.integ-faq__item[open] .integ-faq__toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

.integ-faq__item[open] .integ-faq__toggle::before {
  background: var(--integ-accent);
}

.integ-faq__answer {
  padding: 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
  padding-left: calc(clamp(20px, 3vw, 28px) + 32px + clamp(12px, 2vw, 16px));
  font-family: var(--integ-font-ja);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.85;
  color: var(--integ-light-text-muted);
}

.integ-faq__answer p {
  margin: 0 0 12px;
}

.integ-faq__answer p:last-child {
  margin-bottom: 0;
}

/* もっと見るリンク */
.integ-faq__more {
  text-align: center;
  margin-top: clamp(28px, 4vw, 40px);
}

.integ-faq__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--integ-font-ja);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--integ-accent);
  text-decoration: none;
  padding: 12px 28px;
  border: 1px solid var(--integ-accent);
  border-radius: var(--radius-pill, 999px);
  transition: background var(--transition-fast, 0.2s ease),
              color var(--transition-fast, 0.2s ease);
}

.integ-faq__more-link:hover {
  background: var(--integ-accent);
  color: #fff;
}

/* ========================================
   RESPONSIVE — 小型デバイス追加調整
   ======================================== */
@media (max-width: 479px) {
  .integ-hero {
    min-height: 380px;
  }

  .integ-hero__title {
    font-size: 1.6rem;
  }

  .integ-step__marker {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .integ-step {
    padding-left: calc(24px + 36px / 2 + 16px);
  }

  .integ-scope-card {
    padding: 20px;
  }

}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  .integ-hero {
    min-height: auto;
    background: #fff !important;
    color: #000 !important;
    page-break-after: avoid;
  }

  .integ-hero__overlay {
    display: none;
  }

  .integ-hero__bg {
    display: none;
  }

  .integ-hero__title {
    color: #000 !important;
    font-size: 1.6rem;
  }

  .integ-hero__eyebrow {
    color: #666 !important;
    border-color: #ccc !important;
    background: none !important;
  }

  .integ-hero__lead {
    color: #333 !important;
  }

  .integ-section {
    padding: 24px 0;
    background: #fff !important;
    color: #000 !important;
  }

  .integ-section--flow,
  .integ-section--quality,
  .integ-section--industry {
    background: #f5f5f5 !important;
  }

  .integ-heading__title,
  .integ-heading--dark .integ-heading__title {
    color: #000 !important;
  }

  .integ-heading__lead,
  .integ-heading--dark .integ-heading__lead {
    color: #333 !important;
  }

  .integ-heading__en {
    color: #888 !important;
  }

  .integ-timeline__line {
    display: none;
  }

  .integ-step {
    display: block;
    padding-left: 0;
    margin-bottom: 24px;
    page-break-inside: avoid;
  }

  .integ-step__marker {
    position: static;
    transform: none;
    display: inline-flex;
    margin-bottom: 8px;
    background: #ccc !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .integ-step__title {
    color: #000 !important;
  }

  .integ-step__equipment {
    color: #666 !important;
  }

  .integ-step__text {
    color: #333 !important;
  }

  .integ-step__media {
    max-height: 200px;
  }

  .integ-merit,
  .integ-scope-card,
  .integ-quality-item {
    box-shadow: none !important;
    border-color: #ccc !important;
    page-break-inside: avoid;
  }

  .integ-merit__title,
  .integ-quality-item__title {
    color: #000 !important;
  }

  .integ-merit__text,
  .integ-quality-item__text {
    color: #333 !important;
  }

  .integ-tag {
    background: #eee !important;
    border-color: #ccc !important;
    color: #333 !important;
  }

  .integ-industry-block__title {
    color: #000 !important;
    border-color: #ccc !important;
  }

  .integ-faq__item {
    box-shadow: none !important;
    border-color: #ccc !important;
  }

  .integ-faq__question-text {
    color: #000 !important;
  }

  .integ-faq__answer {
    color: #333 !important;
    display: block !important;
  }

  .integ-faq__toggle {
    display: none;
  }

  .integ-faq__more {
    display: none;
  }

  .integ-photo--blank {
    display: none;
  }

  .integ-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}