/* ============================================================
         preflight: false 補完 (2026-05-29 再復活)
         Tailwind preflight 無効化で露出する以下を最小限のreset で抑える:
          - a タグがブラウザデフォルトの青/紫下線
          - img の inline 表示で max-width 効かず
          - body のフォントカラーが弱まり「薄い灰色」に見える
         ※ テーマ既存スタイル(main.css/front-page.css)を破壊しない最小範囲
         ============================================================ */
      a { color: inherit; text-decoration: none; }
      img, picture { max-width: 100%; height: auto; }
      .nav-glass img { display: block; }
      /* body color 指定は撤回 (2026-05-29 /reasons/ ヒーロー等の色変化が真因と判明) */

      /* input.css の @layer components 手書き複写 (Tailwind compile 不在のため独自展開) */
      .nav-glass { background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: all 0.3s; }

      /* ============================================================
         BoostX Mega Menu — 美しい4列wide配置 (2026-05-29)
         画面センター・1200px幅・4列グリッド・CTAボックス右端
         既存 bxp-mega-css の defaults を上書きして見栄え改善
         ============================================================ */
      .bxp-mega-trigger { position: relative !important; }
      .bxp-mega-panel {
        position: fixed !important;
        top: 72px !important; /* nav-glass の高さ */
        left: 50% !important;
        transform: translateX(-50%) translateY(-6px) !important;
        width: min(1040px, 94vw) !important;  /* 1200→1040: コンパクト化 */
        max-width: 94vw !important;
        background: #ffffff !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 28px 56px -20px rgba(11,21,36,0.26),
                    0 0 0 1px rgba(11,21,36,0.06) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s !important;
        z-index: 60 !important;
        overflow: hidden;
      }
      .bxp-mega-trigger.bxp-mega-open .bxp-mega-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
      }
      .bxp-mega-inner {
        display: grid !important;
        grid-template-columns: 1fr 1.3fr 1.3fr 0.95fr !important;
        gap: 24px !important;
        padding: 22px 26px !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
      }
      /* カラムタイトル (コンパクト化) */
      .bxp-mega-col-title {
        font-family: 'Inter', sans-serif !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: #1E4FC7 !important;
        margin: 0 0 10px !important;
        padding: 0 0 7px !important;
        border-bottom: 2px solid rgba(30,79,199,0.12) !important;
        cursor: default !important;
      }
      .bxp-mega-col-title-plain { color: #6B7385 !important; }
      /* リスト共通 */
      .bxp-mega-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
      }
      .bxp-mega-list-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 10px !important;
      }
      .bxp-mega-list li { margin: 0 !important; padding: 0 !important; }
      .bxp-mega-list a {
        display: block !important;
        padding: 5px 8px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        border-radius: 6px !important;
        transition: background 0.18s, color 0.18s, transform 0.18s !important;
        text-decoration: none !important;
        line-height: 1.35 !important;
      }
      .bxp-mega-list a:hover {
        background: rgba(30,79,199,0.07) !important;
        color: #1E4FC7 !important;
        transform: translateX(2px);
      }
      /* SERVICE 列のサブ説明 */
      .bxp-mega-svc-desc {
        display: block !important;
        font-size: 10.5px !important;
        color: #6B7385 !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        margin-top: 3px !important;
        line-height: 1.4 !important;
      }
      /* CTA Box (右端の最終列) */
      .bxp-mega-cta-box {
        background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 60%, #eef3fb 100%) !important;
        border: 1px solid rgba(30,79,199,0.16) !important;
        border-radius: 14px !important;
        padding: 16px 14px !important;
        margin: 0 !important;
        box-shadow: 0 8px 20px -8px rgba(30,79,199,0.18);
      }
      .bxp-mega-cta-text {
        font-size: 12px !important;
        color: #3F4A60 !important;
        line-height: 1.65 !important;
        margin: 0 0 12px !important;
      }
      .bxp-mega-cta-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: linear-gradient(135deg, #2660DB, #1E4FC7) !important;
        color: #ffffff !important;
        padding: 11px 18px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
        box-shadow: 0 8px 18px -4px rgba(30,79,199,0.40);
        width: 100%;
        box-sizing: border-box;
      }
      .bxp-mega-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -6px rgba(30,79,199,0.50);
      }
      .bxp-arrow {
        display: inline-block !important;
        transition: transform 0.2s !important;
      }
      .bxp-mega-cta-btn:hover .bxp-arrow { transform: translateX(3px); }

      /* メガメニュー外の余計な要素を非表示 (業種別自動化等の旧スニペット残骸) */
      .bxp-mega-panel > *:not(.bxp-mega-inner) { display: none !important; }
      .bxp-mega-panel .bxp-mega-svc-row,
      .bxp-mega-panel .bxp-mega-bottom,
      .bxp-mega-panel .bxp-mega-pills,
      .bxp-mega-panel .bxp-mega-footer,
      .bxp-mega-inner ~ * { display: none !important; }

      /* レスポンシブ (タブレット) */
      @media (max-width: 1100px) {
        .bxp-mega-inner {
          grid-template-columns: 1fr 1fr !important;
          gap: 24px !important;
          padding: 24px !important;
        }
      }
      /* モバイル: メガメニュー無効化 + モバイルメニュー is-open 切替制御 */
      @media (max-width: 767px) {
        .bxp-mega-trigger .bxp-mega-panel { display: none !important; }
        /* 初期状態 (閉じている) */
        #mobile-menu {
          position: fixed !important;
          inset: 0 !important;
          background: #ffffff !important;
          z-index: 60 !important;
          display: flex !important;
          flex-direction: column !important;
          padding: 80px 24px 40px !important;
          overflow-y: auto !important;
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
          transform: translateY(-8px) !important;
          transition: opacity 0.22s ease-out, visibility 0.22s ease-out, transform 0.22s ease-out !important;
        }
        /* 開いている状態 */
        #mobile-menu.is-open {
          opacity: 1 !important;
          visibility: visible !important;
          pointer-events: auto !important;
          transform: translateY(0) !important;
        }
        /* mobile-menu-btn は最前面 */
        #mobile-menu-btn { z-index: 70 !important; position: relative; }
      }

      /* ============================================================
         Claude Code 構築支援ページ (/claude-code-setup/ page-id-2805)
         03 ABOUT セクション バランス&収まり最適化 v3 (2026-05-29)
         社長指示: アニメよりサイズ・収まり・バランス優先・PC/モバイル両対応
         ============================================================ */
      /* セクション見出し「そもそも、Claude Codeとは何か」が画面幅からはみ出ないように */
      body.page-id-2805 h2 {
        font-size: clamp(28px, 4.2vw, 48px) !important;
        line-height: 1.35 !important;
        letter-spacing: -0.01em !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
      }
      /* 2カラム: 左右の高さを揃えるため stretch + minmax */
      body.page-id-2805 .about-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 40px !important;
        align-items: stretch !important;
        max-width: 100%;
        overflow: hidden;
      }
      body.page-id-2805 .about-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 短いテキストでも縦中央で高さを揃える */
      }
      @media (max-width: 980px) {
        body.page-id-2805 .about-wrap {
          grid-template-columns: 1fr !important;
          gap: 24px !important;
        }
        body.page-id-2805 .about-text { justify-content: flex-start !important; }
      }
      /* 左カラム: テキスト見出しを brand-blue アクセントで派手に */
      body.page-id-2805 .about-text h3 {
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #0B1524 !important;
        line-height: 1.45 !important;
        letter-spacing: -0.008em !important;
        position: relative;
        padding-left: 18px;
        margin: 0 0 24px !important;
      }
      body.page-id-2805 .about-text h3::before {
        content: "";
        position: absolute; left: 0; top: 8px; bottom: 8px;
        width: 4px;
        background: linear-gradient(180deg, #2660DB, #5C82E8);
        border-radius: 2px;
        box-shadow: 0 0 12px rgba(30,79,199,0.35);
      }
      body.page-id-2805 .about-text p {
        font-size: 15px !important;
        line-height: 1.95 !important;
        color: #3F4A60 !important;
        margin: 0 0 16px !important;
      }
      body.page-id-2805 .about-text p b {
        background: linear-gradient(180deg, transparent 60%, rgba(30,79,199,0.18) 60%);
        color: #0B1524 !important;
        font-weight: 700 !important;
        padding: 0 2px;
      }
      body.page-id-2805 .about-card {
        background:
          radial-gradient(ellipse 100% 80% at 50% -20%, rgba(92,130,232,0.55), transparent 60%),
          linear-gradient(160deg, #050B1F 0%, #0B1524 25%, #142036 55%, #163E9C 100%) !important;
        border-radius: 24px !important;
        padding: 38px 32px 32px !important;
        position: relative;
        overflow: hidden;
        box-shadow: 0 40px 80px -24px rgba(11,21,36,0.55),
                    0 0 0 1px rgba(124,160,240,0.18) inset,
                    0 0 0 6px rgba(30,79,199,0.04);
      }
      /* 上部のスキャンライン: 左→右に流れる光 (劇的な変化を演出) */
      body.page-id-2805 .about-card::before {
        content: ""; position: absolute; top: 0; left: -100%;
        width: 100%; height: 100%;
        background:
          linear-gradient(90deg, transparent, rgba(124,160,240,0.18), transparent),
          radial-gradient(ellipse 60% 50% at 0% 0%, rgba(124,160,240,0.22), transparent 60%);
        pointer-events: none;
        animation: bxCcAboutScan 7s cubic-bezier(.4,0,.6,1) infinite;
      }
      @keyframes bxCcAboutScan {
        0%   { left: -100%; opacity: 0; }
        20%  { opacity: 1; }
        60%  { left: 100%; opacity: 1; }
        100% { left: 100%; opacity: 0; }
      }
      /* 下のラジアルグロー */
      body.page-id-2805 .about-card::after {
        content: ""; position: absolute; inset: 0;
        background:
          radial-gradient(ellipse 70% 55% at 100% 100%, rgba(46,100,235,0.28), transparent 65%),
          radial-gradient(ellipse 45% 35% at 50% 50%, rgba(124,160,240,0.10), transparent 70%);
        pointer-events: none;
        animation: bxCcAboutGlow 14s ease-in-out infinite alternate;
      }
      @keyframes bxCcAboutGlow {
        0%   { opacity: 0.85; transform: scale(1); }
        100% { opacity: 1; transform: scale(1.06); }
      }
      body.page-id-2805 .about-card .label {
        position: relative; z-index: 1;
        font-family: 'Inter', sans-serif;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.20em;
        color: #7CA0F0 !important;
        text-transform: uppercase;
        margin-bottom: 12px;
      }
      body.page-id-2805 .about-card > h4 {
        position: relative; z-index: 1;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin: 0 0 24px !important;
        letter-spacing: -0.005em;
        line-height: 1.4;
      }
      body.page-id-2805 .feat-grid {
        position: relative; z-index: 1;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;  /* 12→8: カード間余白詰め */
      }
      body.page-id-2805 .feat-grid .feat {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 12px !important;
        padding: 13px 12px 12px !important;  /* 20/16/18→13/12/12 余白タイト */
        display: flex !important; flex-direction: column !important;
        gap: 3px !important;  /* 6→3 内部詰め */
        transition: background 0.4s cubic-bezier(.2,.7,.2,1),
                    border-color 0.4s,
                    transform 0.4s cubic-bezier(.2,.7,.2,1),
                    box-shadow 0.4s !important;
        position: relative;
        overflow: hidden;
        opacity: 0;
        animation: bxCcFeatEntry 0.7s cubic-bezier(.2,.7,.2,1) both;
      }
      body.page-id-2805 .feat-grid .feat:nth-child(1) { animation-delay: 0.05s; }
      body.page-id-2805 .feat-grid .feat:nth-child(2) { animation-delay: 0.12s; }
      body.page-id-2805 .feat-grid .feat:nth-child(3) { animation-delay: 0.19s; }
      body.page-id-2805 .feat-grid .feat:nth-child(4) { animation-delay: 0.26s; }
      body.page-id-2805 .feat-grid .feat:nth-child(5) { animation-delay: 0.33s; }
      body.page-id-2805 .feat-grid .feat:nth-child(6) { animation-delay: 0.40s; }
      @keyframes bxCcFeatEntry {
        0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      body.page-id-2805 .feat-grid .feat::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(124,160,240,0.6), transparent);
        opacity: 0;
        transition: opacity 0.4s;
      }
      body.page-id-2805 .feat-grid .feat:hover {
        background: linear-gradient(180deg, rgba(124,160,240,0.16), rgba(46,100,235,0.10)) !important;
        border-color: rgba(124,160,240,0.45) !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 16px 32px -10px rgba(30,79,199,0.40),
                    0 0 0 1px rgba(124,160,240,0.25) inset !important;
      }
      body.page-id-2805 .feat-grid .feat:hover::before { opacity: 1; }
      body.page-id-2805 .feat-grid .feat .ic {
        width: 30px; height: 30px;  /* 38→30: アイコン小型化 */
        border-radius: 9px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #2660DB, #1E4FC7);
        color: #ffffff;
        margin-bottom: 2px;  /* 6→2: アイコン下余白詰め */
        box-shadow: 0 6px 14px -4px rgba(30,79,199,0.55),
                    0 0 0 1px rgba(255,255,255,0.10) inset;
        transition: transform 0.4s cubic-bezier(.34,1.4,.64,1), box-shadow 0.4s;
      }
      body.page-id-2805 .feat-grid .feat .ic svg { width: 16px !important; height: 16px !important; }
      body.page-id-2805 .feat-grid .feat:hover .ic {
        transform: scale(1.08) rotate(-3deg);
        box-shadow: 0 12px 26px -4px rgba(30,79,199,0.70),
                    0 0 0 1px rgba(255,255,255,0.18) inset;
      }
      body.page-id-2805 .feat-grid .feat .ic svg { width: 18px; height: 18px; stroke: currentColor; }
      body.page-id-2805 .feat-grid .feat b {
        color: #ffffff !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        line-height: 1.3;
        letter-spacing: -0.005em;
        margin: 0;
      }
      body.page-id-2805 .feat-grid .feat span {
        color: rgba(255,255,255,0.70) !important;
        font-size: 10.5px !important;
        line-height: 1.4;
        font-weight: 500;
        margin: 0;
      }

      /* ChatGPT vs Claude Code 比較ブロック */
      body.page-id-2805 .compare-diagram {
        margin-top: 36px;
        background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
        border: 1px solid rgba(30,79,199,0.10);
        border-radius: 22px;
        padding: 36px 28px;
        box-shadow: 0 12px 30px -10px rgba(11,21,36,0.10);
      }
      body.page-id-2805 .compare-diagram > h4 {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #0B1524 !important;
        text-align: center;
        margin: 0 0 28px !important;
        line-height: 1.4;
      }
      body.page-id-2805 .compare-diagram > h4 span {
        color: #1E4FC7 !important;
      }
      body.page-id-2805 .compare-diagram .vs-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 22px;
        align-items: stretch;
      }
      body.page-id-2805 .compare-diagram .side {
        background: #ffffff;
        border-radius: 18px;
        padding: 26px 22px;
        border: 1px solid rgba(11,21,36,0.08);
        box-shadow: 0 6px 16px -8px rgba(11,21,36,0.10);
      }
      body.page-id-2805 .compare-diagram .side.left  { border-top: 4px solid #9AA4B5; }
      body.page-id-2805 .compare-diagram .side.right { border-top: 4px solid #1E4FC7; box-shadow: 0 16px 36px -12px rgba(30,79,199,0.25); }
      body.page-id-2805 .compare-diagram .side .stitle {
        font-family: 'Inter', sans-serif;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      body.page-id-2805 .compare-diagram .side.left  .stitle { color: #6B7385; }
      body.page-id-2805 .compare-diagram .side.right .stitle { color: #1E4FC7; }
      body.page-id-2805 .compare-diagram .side h5 {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin: 0 0 16px !important;
        letter-spacing: -0.005em;
      }
      body.page-id-2805 .compare-diagram .side.left  h5 { color: #3F4A60 !important; }
      body.page-id-2805 .compare-diagram .side.right h5 { color: #0B1524 !important; }
      body.page-id-2805 .compare-diagram .side ul {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column; gap: 10px;
      }
      body.page-id-2805 .compare-diagram .side li {
        font-size: 13px;
        line-height: 1.7;
        color: #4B5563;
        padding-left: 22px;
        position: relative;
      }
      body.page-id-2805 .compare-diagram .side.left li::before {
        content: "—";
        position: absolute; left: 0; top: 0;
        color: #9AA4B5; font-weight: 700;
      }
      body.page-id-2805 .compare-diagram .side.right li::before {
        content: "✓";
        position: absolute; left: 0; top: 0;
        color: #1E4FC7; font-weight: 800;
      }
      body.page-id-2805 .compare-diagram .side.right li b {
        color: #0B1524; font-weight: 700;
      }
      body.page-id-2805 .compare-diagram .vs-mark {
        align-self: center;
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.06em;
        color: #ffffff;
        background: linear-gradient(135deg, #0B1524, #1E4FC7);
        padding: 14px 16px;
        border-radius: 999px;
        box-shadow: 0 10px 22px -6px rgba(30,79,199,0.45);
        min-width: 56px; text-align: center;
      }
      /* レスポンシブ */
      @media (max-width: 900px) {
        body.page-id-2805 .compare-diagram .vs-grid {
          grid-template-columns: 1fr;
        }
        body.page-id-2805 .compare-diagram .vs-mark { justify-self: center; }
        body.page-id-2805 .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      }
      @media (max-width: 480px) {
        body.page-id-2805 .feat-grid { grid-template-columns: 1fr !important; }
      }
      .marquee-wrapper { display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
      .marquee-content { display: flex; width: max-content; flex-shrink: 0; gap: 2rem; }
      .bg-grid-pattern { background-image: radial-gradient(#0057D9 1px, transparent 1px); background-size: 32px 32px; opacity: 0.03; }
      .text-gradient-blue { background: linear-gradient(90deg, #0057D9 0%, #0085FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
      .btn-conversion-hero { background: linear-gradient(180deg, #0057D9 0%, #0041A3 100%); position: relative; overflow: hidden; transition: all 0.3s; color: #fff; }
      .btn-conversion-hero:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px -8px rgba(0,87,217,0.35); }
      .badge-orange-strong { background: linear-gradient(135deg, #FFAA00 0%, #FF5500 100%); box-shadow: 0 2px 8px rgba(255,85,0,0.3); color: #fff; }
      .btn-service { background: linear-gradient(90deg, #0057D9 0%, #0041A3 100%); color: #fff; transition: all 0.2s; box-shadow: 0 8px 24px -8px rgba(0,87,217,0.35); }
      .btn-service:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(0,87,217,0.45); }
      .reveal-base { opacity: 0; transform: translateY(2rem); transition: all 0.7s ease-out; }
      .reveal-active { opacity: 1; transform: translateY(0); }