@charset "UTF-8";

/*
 * 7BEE Design Improvement CSS
 * 既存CSSに上書き追加するオーバーライドシート
 * <link> で既存CSSの後に読み込む
 *
 * 改善ポイント：
 * 1. ヒーローのインパクト強化（大きな見出し・コントラスト）
 * 2. セクションの区切りを明確化（背景・ライン）
 * 3. カードのメリハリ（深い影・ホバー演出）
 * 4. アクセントカラーの集中使用
 * 5. タイポグラフィの力強さ向上
 * 6. Reasonsセクションの番号デザイン刷新
 * 7. CTAの訴求力強化
 */

/* ========================================
   カスタムプロパティ追加
======================================== */
:root {
  --accent: #4a6fff;
  --accent-soft: rgba(74,111,255,.08);
  --accent-mid: rgba(74,111,255,.18);
  --card-shadow: 0 2px 6px rgba(0,0,0,.04), 0 12px 36px rgba(0,0,0,.07);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.13);
  --section-alt: rgba(246,248,252,.82);
}

/* ========================================
   HERO — 全体強化
======================================== */

/* ヒーロー全体の下部にセクション境界を追加 */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.08) 20%,
    rgba(0,0,0,.08) 80%,
    transparent 100%
  );
}

/* eyebrow ラベルを際立たせる */
.hero-copy .eyebrow {
  border-color: rgba(74,111,255,.22);
  background: rgba(74,111,255,.07);
  color: #3a5ce0;
  opacity: 1;
  font-size: clamp(45%, 1.4vw, 95%);
}

/* メインキャッチコピー：より大きく・太く */
.hero-copy h1 {
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1.35;
  letter-spacing: -.04em;
  font-weight: 800;
  color: #0d1117;
}

/* サブコピー */
.hero-copy p.sub {
  font-size: clamp(45%, 1.45vw, 110%);
  font-weight: 700;
  color: rgba(17,17,17,.78);
}

/* 吹き出しボックスを強調 */
.hero-txt {
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(74,111,255,.14);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 14px 44px rgba(74,111,255,.10),
    0 0 0 4px rgba(74,111,255,.04);
}

/* チェックリストアイコン色 */
.hero-trust-list li::before {
  color: #4a6fff;
  font-weight: 900;
}

/* CTAボタンを大きく・力強く */
.hero-actions .btn-primary {
  min-height: 60px;
  padding: 0 34px;
  font-size: 16px;
  background: #111;
  box-shadow: 0 8px 28px rgba(17,17,17,.22), 0 2px 6px rgba(17,17,17,.16);
  letter-spacing: .02em;
}

.hero-actions .btn-primary:hover {
  opacity: 1;
  background: #1e2530;
  box-shadow: 0 14px 40px rgba(17,17,17,.30), 0 3px 8px rgba(17,17,17,.16);
  transform: translateY(-3px);
}

.hero-actions .btn-secondary {
  min-height: 60px;
  padding: 0 28px;
  font-size: 16px;
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.88);
}

/* ========================================
   REASONS セクション — 交互背景
======================================== */
.reasons {
  background: var(--section-alt);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* 番号：大きくアクセントカラーで */
.reason-num {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  background: linear-gradient(135deg, #4a6fff 0%, #8e6cff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: none; /* グラデアニメ停止でよりシャープに */
  letter-spacing: -.05em;
}

/* カードを白く・影を深く */
.reason-card {
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
  border-radius: 24px;
}

.reason-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.16);
}

.reason-card h3 {
  font-size: clamp(105%, 1.5vw, 22px);
  font-weight: 700;
  color: #0d1117;
}

/* ========================================
   SERVICES セクション
======================================== */

/* サービスアイコン背景：アクセント系に */
.service-icon {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
}

.service-card {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
}

.service-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.14);
}

.service-card:hover .service-icon {
  background: rgba(74,111,255,.13);
  border-color: rgba(74,111,255,.28);
}

.service-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -.02em;
}

/* リストの点をアクセントカラーに */
.service-card li::before {
  background: #4a6fff;
  width: 5px;
  height: 5px;
  top: .8em;
}

/* ========================================
   PRICING セクション — 交互背景
======================================== */
.pricing {
  background: var(--section-alt);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* メインカード：より存在感 */
.pricing-main__inner {
  background: rgba(255,255,255,.98);
  box-shadow: 0 4px 10px rgba(0,0,0,.04), 0 28px 80px rgba(0,0,0,.09);
  border-color: rgba(74,111,255,.12);
}

.pricing-main__card {
  background: rgba(255,255,255,.99);
  border-color: rgba(74,111,255,.18);
  box-shadow:
    0 4px 10px rgba(0,0,0,.04),
    0 24px 64px rgba(74,111,255,.10),
    0 0 0 3px rgba(74,111,255,.06);
}

/* 価格数字を大きく */
.pricing-main__price-main,
.price-value {
  font-size: clamp(38px, 4.5vw, 56px);
  letter-spacing: -.04em;
  font-weight: 800;
}

/* おすすめバッジを黒ベースに統一 */
.price-badge--main {
  background: #111;
  color: #fff;
  animation: none;
}

/* 料金カード */
.price-card {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
}

.price-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.14);
}

/* おすすめカードの強調 */
.price-card--soft-recommended {
  border-color: rgba(74,111,255,.24);
  background: rgba(255,255,255,.99);
  box-shadow:
    0 4px 10px rgba(0,0,0,.05),
    0 24px 64px rgba(74,111,255,.12),
    0 0 0 3px rgba(74,111,255,.06);
}

/* リストの点色 */
.price-list li::before {
  background: linear-gradient(135deg, #4a6fff 0%, #7e62e5 100%);
  box-shadow: 0 0 0 3px rgba(74,111,255,.14);
}

/* ========================================
   WORKS セクション
======================================== */
.works {
  background: #fff;
}

/* ========================================
   FLOW セクション — 交互背景
======================================== */
.flow {
  background: var(--section-alt);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.flow-card {
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
}

.flow-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.14);
}

/* ステップ番号を強調 */
.flow-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: #4a6fff;
  text-transform: uppercase;
}

/* フローアイコン */
.flow-icon {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
  color: #4a6fff;
}

.flow-card:hover .flow-icon {
  background: rgba(74,111,255,.13);
  border-color: rgba(74,111,255,.28);
}

.flow-card h3 {
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -.02em;
}

/* ========================================
   AREA セクション
======================================== */
.area-card {
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
}

.area-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.14);
}

.area-card strong {
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -.02em;
}

/* ========================================
   ABOUT セクション — 交互背景
======================================== */
.about {
  background: var(--section-alt);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.about-card {
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--card-shadow);
}

.about-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(74,111,255,.14);
}

.about-card h3 {
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -.02em;
}

/* ========================================
   SECTION HEADING — 見出しの強化
======================================== */
.section-label {
  color: #4a6fff;
  font-size: 92%;
  letter-spacing: .2em;
}

.section-heading h2 {
  font-weight: 900;
  letter-spacing: -.05em;
  color: #0d1117;
}

/* ========================================
   CTA — 全面強化
======================================== */
.cta-box {
  background: #0d1117;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.15), 0 40px 100px rgba(0,0,0,.18);
}

.cta-box h2 {
  color: #fff;
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -.04em;
}

.cta-box p {
  color: rgba(255,255,255,.65);
  font-size: clamp(100%, 1.4vw, 108%);
}

/* CTAのボタン：白とアウトラインの2種 */
.cta-box .btn-primary {
  background: #fff;
  color: #111;
  box-shadow: 0 6px 20px rgba(255,255,255,.15);
  font-size: 15px;
  min-height: 58px;
  padding: 0 30px;
}

.cta-box .btn-primary:hover {
  background: rgba(255,255,255,.92);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(255,255,255,.20);
}

.cta-box .btn-secondary {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: none;
  min-height: 58px;
  padding: 0 28px;
  font-size: 15px;
}

.cta-box .btn-secondary:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  box-shadow: none;
  color: #fff;
}

/* ========================================
   HEADER — スクロール時の強調
======================================== */
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
}

/* ヘッダーCTAボタン */
.header-cta {
  background: #111;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.header-cta:hover {
  background: #1e2530;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

/* ========================================
   WORKS カード — サムネイル強化
======================================== */
.work-card {
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border-color: rgba(0,0,0,.06);
  background: rgba(255,255,255,.95);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}

.work-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--card-shadow-hover);
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
  border-top: 1px solid rgba(0,0,0,.06);
}

.footer-inner {
  border-top-color: rgba(0,0,0,.06);
}

/* ========================================
   SECTION ボーダー区切りライン
======================================== */
section:not(:last-child) {
  /* セクション内の下部に薄いライン（既存beforeを活用） */
}

/* ========================================
   SCROLL INDICATOR — より洗練
======================================== */
.scroll-mouse {
  border-color: rgba(0,0,0,.25);
  width: 22px;
  height: 36px;
}

.scroll-wheel {
  background: #4a6fff;
}

/* ========================================
   FADE UP アニメーション — 少し下から遠めに
======================================== */
.fade-up {
  transform: translateY(32px);
}

/* ========================================
   背景orbの透明度微調整（メリハリのため抑える）
======================================== */
.bg-orb.-a {
  opacity: .7;
}

.bg-orb.-b {
  opacity: .65;
}

.bg-orb.-c {
  opacity: .6;
}

.liquid-blob {
  opacity: .22;
}

/* ========================================
   RESPONSIVE 調整
======================================== */
@media (max-width: 767px) {
  .hero-copy h1 {
    font-size: 7.5vw;
    letter-spacing: -.03em;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    min-height: 54px;
    font-size: 15px;
  }

  .reason-num {
    font-size: 9.5vw;
  }

  .cta-box {
    text-align: left;
  }

  .cta-box .btn-primary,
  .cta-box .btn-secondary {
    min-height: 52px;
  }
}