/* ===================================================================
   CRAVANS × SOCRATES Brand Overrides (_brand.css) — CLEANED
   - Load AFTER template main.css
   - Consolidated palette, hero override, cards, and utilities
   =================================================================== */

/* ---------- Brand Palette ---------- */
:root{
  --color-primary:#2C334A;
  /* subtle diagonal SVG pattern for card overlays (white lines, low opacity) */
  --usecase-diag-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M0 8 L8 0' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/></svg>");
  --color-secondary:#0072BC;
  --color-accent:#E60023;
  --color-orange:#F5A623;
  --color-green:#8CC63F;
  --color-purple:#92278F;
  --color-bg:#F8F9FB;
  --color-text:#333333;
  --color-border:#DDDEE2;
}

/* ---------- Integration Panel & CTA ---------- */
.integration-panel {
  background: linear-gradient(135deg, #1b2d4b 0%, #26497f 45%, #3d7ff0 100%);
  border-radius: 24px;
  box-shadow: 0 24px 52px rgba(9, 14, 32, 0.25);
}

/* CTA 内の複製用：パネルをセクションと同じ単色にする */
.integration-panel.cta-solid {
  /* CTA 内でもパネルは元のグラデーションを保持する */
  background: linear-gradient(135deg, #1b2d4b 0%, #26497f 45%, #3d7ff0 100%) !important;
  background-image: linear-gradient(135deg, #1b2d4b 0%, #26497f 45%, #3d7ff0 100%) !important;
  box-shadow: 0 24px 52px rgba(9, 14, 32, 0.25);
}

/* パネルの高さを控えめにする（垂直パディングを減らして高さを小さく見せる） */
.integration-panel.cta-solid {
  padding-top: 1.5rem !important; /* Bootstrap p-5 = 3rem なのでこれで半分に近く */
  padding-bottom: 1.5rem !important;
}

/* ---------- Pricing Card Gradient ---------- */
/* Stronger warm gradient for specific pricing card(s) */
.pricing-card.strong-gradient {
  /* multi-stop warm gradient — stronger/more saturated */
  background-image: linear-gradient(135deg, #fff4ed 0%, #ffd0b0 35%, #ff9a5a 75%, #ff7a2a 100%);
  background-color: #fff4ed; /* fallback */
  background-size: cover;
  color: inherit;
}

/* Optional subtle gloss to increase perceived contrast */
.pricing-card.strong-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.00) 45%);
  mix-blend-mode: overlay;
}

/* ---------- Section Background Overrides ---------- */
/* 強制上書き：セクションの擬似要素で描画されるグラデーションを取り除き、全体を単色にする */
.section.bg-primary.bg-gradient,
.section.bg-primary.bg-gradient::before,
.section.bg-primary.bg-gradient::after {
  background: #2c334a !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body{color:var(--color-text);background:var(--color-bg);}
a{color:var(--color-secondary);}
a:hover{opacity:.9;}

/* ---------- Hero override ---------- */
.hero{
  background:#2c334a !important;
  padding:80px 0 40px !important;
  min-height:85vh;
}

/* ---------- Section rhythm ---------- */
.hero{ padding-bottom:30px !important; }
.about{ padding-top:20px !important; }
.section-title{ margin-bottom:28px !important; }
.section-title h2{ letter-spacing:.02em; }

/* ---------- CTA Buttons ---------- */
.btn-primary, a.btn-primary{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
}
.btn-primary:hover, a.btn-primary:hover{
  background:var(--color-orange);
  border-color:var(--color-orange);
  color:#111;
}

/* ---------- Cards / Surfaces ---------- */
.card{
  border-color:var(--color-border);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  border-radius:16px;
}

/* ---------- Usecase cards (theme variants) ---------- */
.usecase-card{
  padding:30px; border-radius:16px; transition:.3s; height:100%;
  position:relative; /* for gloss pseudo */
  overflow:hidden;   /* clip pattern & gloss */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* place content above pseudo layers */
.usecase-card > *{ position:relative; z-index:2; }

/* subtle glossy highlight across cards */
.usecase-card::before{
  content: '';
  position: absolute;
  left: -40%;
  top: -25%;
  width: 180%;
  height: 60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index:1; /* above background, below content */
  mix-blend-mode: overlay;
}

/* Stronger gradients + subtle diagonal SVG pattern overlay */
.usecase-card.blue{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#bfd7ff 0%, #8fbfff 55%, #4f8fff 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  background-position: 0 0, center;
}
.usecase-card.blue h4{ color:#0f2b7a; }
.usecase-card.blue p, .usecase-card.blue ul li{ color:#213148; }

.usecase-card.green{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#c0f3d0 0%, #8fe6a8 55%, #3fbf6f 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
}
.usecase-card.green h4{ color:#065f46; }
.usecase-card.green p, .usecase-card.green ul li{ color:#123526; }

.usecase-card.cyan{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#b3f7f3 0%, #7feeea 55%, #23c9c2 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
}
.usecase-card.cyan h4 { color: #0b97a9; }
.usecase-card.cyan p, .usecase-card.cyan ul li { color: #134d52;}
.usecase-card.cyan .stat-number { color: #0ea5e9;}

.usecase-card.orange{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#ffd6a8 0%, #ffbf7f 55%, #ff9e37 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
}
.usecase-card.orange h4 { color: #b86b00; }
.usecase-card.orange p, .usecase-card.orange ul li { color: #4b3724;}

.usecase-card.red{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#ffc0c6 0%, #ff989f 55%, #ff5b67 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
}
.usecase-card.red h4 { color: #b02a37; }
.usecase-card.red p, .usecase-card.red ul li { color: #4a1f24; }

.usecase-card.gray{
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#d3dbe5 0%, #bfc9d6 55%, #97a3b1 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
}
.usecase-card.gray h4 { color: #0f1720; }
.usecase-card.gray p, .usecase-card.gray ul li { color: #2b3640; }


/* Buttons inside cards (single source of truth) */
.usecase-card .btn{
  background-color:#2c334a !important;
  color:#fff !important;
  border:none !important;
  padding:12px 24px;
  font-weight:500;
  transition:.3s;
}
.usecase-card .btn:hover{
  background-color:#1a202c !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(45,55,72,.3);
}

/* Outline variants normalize to brand button */
.usecase-card .btn-outline-primary,
.usecase-card .btn-outline-success,
.usecase-card .btn-outline-info,
.usecase-card .btn-outline-warning,
.usecase-card .btn-outline-danger,
.usecase-card .btn-outline-dark{
  background-color:#2c334a !important;
  color:#fff !important;
  border:none !important;
}
.usecase-card .btn-outline-primary:hover,
.usecase-card .btn-outline-success:hover,
.usecase-card .btn-outline-info:hover,
.usecase-card .btn-outline-warning:hover,
.usecase-card .btn-outline-danger:hover,
.usecase-card .btn-outline-dark:hover{
  background-color:#1a202c !important;
}

/* ---------- ROI section (dark) ---------- */
.roi-section{
  background:#2c334a !important;
  color:#fff !important;
  padding-top:48px !important;
  padding-bottom:48px !important;
}
.roi-section .section-title h2,
.roi-section .section-title span,
.roi-section p,
.roi-section .lead,
.roi-section .card{ color:rgba(255,255,255,.95) !important; }
.roi-section .bg-light{ background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.92) !important; }
.roi-section .card{
  background:#2c334a !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 6px 24px rgba(0,0,0,.18) !important;
  border-radius:12px !important;
}

/* ---------- Utilities ---------- */
.badge-success{ background:var(--color-green); }
.badge-info{ background:var(--color-secondary); }
.badge-warning{ background:var(--color-orange); color:#111; }
.badge-danger{ background:var(--color-accent); }
.link-plain{ text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
.link-plain:hover{ border-bottom-color:transparent; }

/* ---------- Footer ---------- */
footer{background:#0f1117;color:#cfd3dc;}
footer a{color:#e6e9ef;}

/* タイムラインカードの高さを統一 */
.timeline-item .bg-white {
    height: 100%;  /* カードの高さを100%に */
    min-height: 480px;  /* 最小の高さを設定 */
    display: flex;
    flex-direction: column;
}

/* Enhance the small ROI/info cards with gradients, diagonal pattern and gloss */
.timeline-item .bg-white{
  position:relative;
  overflow:hidden;
  padding:20px !important;
  border-radius:12px !important;
}

.timeline-item .bg-white::before{
  /* soft glossy sheen */
  content:'';
  position:absolute;
  left:-30%; top:-20%;
  width:160%; height:50%;
  background: linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: overlay;
}

/* specific color-enhanced variants for the three small cards (keeps inline background-color but adds image/gradient overlay) */
.timeline-item .bg-white[style*="#e7f0ff"], .bg-white[style*="#e7f0ff"], .pricing-card[style*="#e7f0ff"]{
  /* left: pale-blue -> stronger blue gradient */
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#d0e4ff 0%, #9bbfff 55%, #5b8fe6 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  background-blend-mode: overlay, normal;
}

.timeline-item .bg-white[style*="#ecfdf5"], .bg-white[style*="#ecfdf5"], .pricing-card[style*="#ecfdf5"]{
  /* middle: pale-green -> stronger green gradient */
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#dff9e8 0%, #aef0c2 55%, #4fc77a 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  background-blend-mode: overlay, normal;
}

.timeline-item .bg-white[style*="#fff7ed"], .bg-white[style*="#fff7ed"], .pricing-card[style*="#fff7ed"]{
  /* right: pale-orange -> stronger warm gradient */
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#ffe9c9 0%, #ffcf9a 55%, #ff9d40 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  background-blend-mode: overlay, normal;
}

.timeline-item .bg-white > *{ position:relative; z-index:2; }

/* Tech cards: use explicit classes rather than rely on inline styles */
.tech-card{ padding:20px !important; border-radius:12px !important; position:relative; overflow:hidden; }
.tech-card::before{ content:''; position:absolute; left:-30%; top:-20%; width:160%; height:50%; background: linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events:none; z-index:1; mix-blend-mode: overlay; }
.tech-card > *{ position:relative; z-index:2; }

.tech-card.blue{ background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#d0e4ff 0%, #9bbfff 55%, #5b8fe6 100%); background-repeat: repeat, no-repeat; background-size: 12px 12px, cover; }
.tech-card.green{ background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#dff9e8 0%, #aef0c2 55%, #4fc77a 100%); background-repeat: repeat, no-repeat; background-size: 12px 12px, cover; }
.tech-card.orange{ background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#ffe9c9 0%, #ffcf9a 55%, #ff9d40 100%); background-repeat: repeat, no-repeat; background-size: 12px 12px, cover; }

/* カードの下部（アラート）を下端に配置 */
.timeline-item .alert {
    margin-top: auto;  /* 空きスペースを上部に追加 */
}

/* 背景色の設定 */
.bg-blue {
  background-color: #007bff;
}
.bg-purple {
  background-color: #6f42c1;
}
.bg-green {
  background-color: #28a745;
}
.bg-orange {
  background-color: #fd7e14;
}

/* カードのスタイル */
.process-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.process-card h5 {
  font-size: 1.25rem;
}
.process-card small {
  font-size: 0.875rem;
  opacity: 0.8;
}
.process-card ul {
  margin-top: 1rem;
}
.process-card ul li {
  margin-bottom: 0.5rem;
}

/* リストの枠線と背景色 */
.process-card ul {
  border: 1px solid #ffc107;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px;
}

/* サイト全体にNoto Sans JPを適用 */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

/* 必要に応じて特定の要素に適用 */
h1, h2, h3, h4, h5, h6, p, a, li, span {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Challenges内のstepsは上余白ゼロに */
#challenges #steps.section { 
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* タイトル直下の間隔をさらに詰めたい場合 */
#challenges .section-title { 
  margin-bottom: 0 !important;  /* 今は1rem */
}

/* Restore CTA gradient specifically so our ROI rules don't affect it */
.section.bg-primary.bg-gradient{
  /* copy of the original bright-blue CTA gradient (scoped, high specificity) */
  background-image: linear-gradient(180deg, #56a8ff 0%, #1673ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #ffffff !important;
}

/* ROI alert (single alert box) - target only the specific alert element */
.roi-alert.dark{
  position: relative; /* for pseudo-layer */
  overflow: hidden;
  /* restored green gradient (original look) + diagonal pattern */
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#c0f3d0 0%, #8fe6a8 55%, #3fbf6f 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  color: #072f14 !important; /* darkish text for contrast on pale->mid greens */
  border: none !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 8px !important;
}
.roi-alert.dark::before{
  content:'';
  position:absolute;
  left:-30%; top:-30%;
  width:160%; height:60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: overlay;
}
.roi-alert.dark > *{ position:relative; z-index:2; }

/* ROI alert - primary (組織力向上) - blue gradient variant */
.roi-alert.primary{
  position: relative;
  overflow: hidden;
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#bfd7ff 0%, #8fbfff 55%, #4f8fff 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  color: #062241 !important; /* dark blue text for contrast */
  border: none !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 8px !important;
}
.roi-alert.primary::before{
  content:'';
  position:absolute;
  left:-30%; top:-30%;
  width:160%; height:60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: overlay;
}
.roi-alert.primary > *{ position:relative; z-index:2; }

/* ROI alert - warning (企業価値創出) - warm/orange gradient variant */
.roi-alert.warning{
  position: relative;
  overflow: hidden;
  background-image: var(--usecase-diag-pattern), linear-gradient(135deg,#ffd6a8 0%, #ffbf7f 55%, #ff9e37 100%);
  background-repeat: repeat, no-repeat;
  background-size: 12px 12px, cover;
  color: #4b2a06 !important; /* darker warm text for contrast */
  border: none !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 8px !important;
}
.roi-alert.warning::before{
  content:'';
  position:absolute;
  left:-30%; top:-30%;
  width:160%; height:60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events:none;
  z-index:1;
  mix-blend-mode: overlay;
}
.roi-alert.warning > *{ position:relative; z-index:2; }