.lp-wrapper{
  --bg:#0c1b2a;
  --ink:#ffffff; /* 暗い背景の文字色（明るい色で濃く見せる） */
  --muted:#e0e0e0; 
  --card:#112336;
  --sand:#e8e1d3;--accent:#c7a75b;--accent-2:#7fb4ff;
  --radius:14px;--shadow:0 10px 30px rgba(0,0,0,.25);
  --maxw:1120px;--space:clamp(16px,2vw,24px);
  --h1:clamp(32px,4vw,54px);--h2:clamp(22px,3vw,32px);--h3:clamp(18px,2.4vw,22px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",sans-serif;
  --serif:"Georgia","Times New Roman","Noto Serif JP",serif;
  font-family:var(--font);color:var(--ink);
  background:radial-gradient(1200px 800px at 80% -10%,#16324b 0%,transparent 60%),var(--bg);
  line-height:1.6;
}
.lp-wrapper a{color:inherit;text-decoration:none}
.lp-wrapper img, .lp-wrapper svg, .lp-wrapper video{max-width:100%;display:block}

/* 1. 親テーマのコンテナ幅・余白の制限をリセット */
.container{
  max-width:var(--maxw) !important; 
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,28px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section{
  padding-block:clamp(48px,7vw,96px);
  width: 100% !important;
}

.lead{
    font-size:clamp(16px,2.2vw,18px);
    color:var(--ink) !important; 
}
.kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;font-size:.9rem}
.lp-wrapper h1{font-size:var(--h1);line-height:1.2;margin:.25em 0 .5em;font-family:var(--serif)}
.lp-wrapper h2{font-size:var(--h2);line-height:1.3;margin:0 0 .6em;font-family:var(--serif)}
.lp-wrapper h3{font-size:var(--h3);margin:.2em 0 .4em}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.2em;border-radius:999px;border:1px solid transparent;background:linear-gradient(180deg,var(--accent),#b8954f);color:#1a1204;font-weight:700;box-shadow:0 6px 18px rgba(199,167,91,.35)}
.btn:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:0 10px 24px rgba(199,167,91,.45)}
.btn.outline{background:transparent;color:var(--sand);border-color:rgba(233,236,239,.26)}
.badge{display:inline-block;padding:.4em .8em;border:1px solid rgba(255,255,255,.15);border-radius:999px;font-size:.85rem;color:var(--muted)}

/* 2. Flexboxの強制設定と垂直位置の統一 (Features) */
.grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
    align-items: stretch !important; 
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important; 
}

.header{position:sticky;top:0;z-index:20;background:rgba(12,27,42,.65);backdrop-filter:saturate(130%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:.6em;font-weight:800;letter-spacing:.03em}
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(199,167,91,.15)}
.menu{display:flex;gap:20px;align-items:center}
.menu a{padding:8px 10px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.06)}
.hero{padding-block:clamp(72px,12vw,140px)}
.hero__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,5vw,48px);align-items:center}
.hero__img{aspect-ratio:4/3;border-radius:20px;box-shadow:var(--shadow);overflow:hidden;background:linear-gradient(120deg,#3b4f63,#1a2a3a)}
.hero__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ヒーローセクションの横並び設定 */
.hero-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important; 
    gap: clamp(20px, 5vw, 48px) !important;
    align-items: flex-start !important; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* H1タグを無効化し、H2をGridアイテムとして配置する */
.hero-grid h1 {
    display: none !important; 
}
.hero-grid h2.hero-title-main {
    /* H2デザイン: H1サイズから本文サイズへ調整 */
    font-size: clamp(30px, 3.8vw, 50px) !important; 
    line-height: 1.2 !important;
    font-family: var(--serif) !important;
    
    /* 余白を強制リセットし、paddingで隙間を作る */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.5em !important; 
}

/* H2下の空欄問題解決のための優先度最大化 */
body #main h2.hero-title-main,
body #main h2 {
    margin-bottom: 0 !important;
    padding-bottom: 0.5em !important;
    margin-top: 0 !important;
}

/* タイトル、リード文、CTAの1列目固定 */
.hero-grid h2.hero-title-main,
.hero-grid .lead,
.hero-grid .hero-cta {
    grid-column: 1 / 2; /* 1列目に固定 */
}

/* リード文の上マージンを完全にリセット */
.hero-grid .lead {
    margin-top: 0 !important; 
    margin-bottom: 1em !important; 
}

/* 画像の2列目固定 */
.hero-grid .hero__img {
    grid-column: 2 / 3; 
    grid-row: 1 / span 3;
    align-self: flex-start !important; 
}


/* 3. featuresセクションの横3列レイアウト */
.card{
    width: 32% !important; 
    margin: 0 0 20px 2% !important; 
    min-height:180px;border-radius:16px;padding:22px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 6px 24px rgba(0,0,0,.18);
    color:var(--ink) !important; 
}
.card p{
    color:var(--ink) !important; 
}

/* 各行の最初のカード（1, 4, ...枚目）の左マージンをリセットし、垂直に揃える */
.features .card:nth-child(3n+1) {
    margin-left: 0 !important;
}

/* 4. PC表示 (980px以上) で3列を絶対的に強制する設定 */
@media (min-width: 980px) {
    .features .card {
        width: 30% !important; 
        margin: 0 0 20px 3% !important; 
    }
    .features .card:nth-child(3n+1) {
        margin-left: 0 !important;
    }
    .hero__wrap{
        grid-template-columns:1.2fr .8fr;
    }
    /* サービス紹介の縦並び対策 */
    .block > div:first-child,
    .block .visual {
        width: 48% !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 979px) and (min-width: 641px) {
    /* 横2列表示のためのマージン調整 */
    .card {
        width: 48% !important; 
        margin: 0 0 20px 4% !important; 
    }
    .features .card:nth-child(2n+1) {
        margin-left: 0 !important;
    }
    .features .card:nth-child(3n+1) {
        margin-left: 4% !important;
    }
    .hero__wrap{
        grid-template-columns:1fr;
    }
    /* サービス紹介の縦並び対策 */
    .block > div:first-child,
    .block .visual {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}
@media (max-width: 640px){
    /* 1列表示 */
    .card {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    /* サービス紹介の縦並び対策 */
    .block > div:first-child,
    .block .visual {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ---------------------------------------------------- */
/* 料金プランの枠線と高さの統一 */
/* ---------------------------------------------------- */
.pricing {
    display: flex !important;
    align-items: stretch !important; /* 高さを揃える */
    flex-wrap: wrap !important;
    justify-content: space-between !important; 
    gap: 0 !important; /* gapをリセット */
    margin-inline: auto !important; 
    max-width: var(--maxw) !important;
}

.price{
    width: 31% !important; /* 均等幅に設定 */
    margin: 0 !important; /* マージンをリセット */
    
    grid-column:span 4;
    border-radius:18px;
    padding:24px;
    
    background: transparent !important; 
    border: 1px solid rgba(255,255,255,.15) !important; 
}
.price--primary{
    outline:2px solid rgba(199,167,91,.45) !important;
    background:linear-gradient(180deg,rgba(199,167,91,.10),rgba(255,255,255,.03)) !important;
}


/* ---------------------------------------------------- */
/* サービス紹介セクションの横並び（block/block--alt）修正 - 安定版 */
/* ---------------------------------------------------- */

/* サービス紹介セクションのFlexbox強制適用（全ブロック） */
.block {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-top: 28px !important; /* ブロック間の隙間を確保 */
}
/* block--alt がある場合の順序設定（画像左・テキスト右） */
.block--alt {
    flex-direction: row-reverse !important; 
}

/* テキストブロックと画像ブロックの幅を強制適用 */
.block > div:first-child { 
    width: 48% !important; /* テキストブロックの幅 */
}
.block .visual { 
    width: 48% !important; /* 画像ブロックの幅 */
}

/* ---------------------------------------------------- */
/* その他 (既存のGrid設定など) */
/* ---------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(12,1fr)}
.price{grid-column:span 4;border-radius:18px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10)}
.price--primary{outline:2px solid rgba(199,167,91,.45);background:linear-gradient(180deg,rgba(199,167,91,.10),rgba(255,255,255,.03))}
.price h3{margin:0 0 .2em}.num{font-size:28px;font-weight:800}.price ul{padding-left:1.1em;margin:.6em 0;color:var(--muted)}.price li{margin:.35em 0}@media (max-width:960px){.price{grid-column:span 12}}
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);align-items:center}.block--alt .visual{order:2}.visual{aspect-ratio:16/10;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:
  linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45)),
  radial-gradient(800px 500px at 110% -50%,rgba(127,180,255,.18),transparent 55%),
  linear-gradient(120deg,#4f6b86,#1b2b3a);box-shadow:var(--shadow)}.list{display:grid;gap:10px}.list li{display:flex;gap:.6em;align-items:flex-start}.list li svg{flex:0 0 20px;color:var(--accent)}.footer{border-top:1px solid rgba(255,255,255,.08);padding-block:30px;color:var(--muted)}.footer .grid{display:grid;grid-template-columns:1fr auto;align-items:center}small{opacity:.7}
#pricing,#services,#trial{
  background: #ffffff;
  color: #333 !important;
}
#pricing h2, #pricing h3, #pricing .num, #pricing p, #pricing li,
#services h2, #services h3, #services p, #services li,
#trial h2, #trial p {
  color: #333 !important;
}
.price {
   background: #f8f9fa;
   border: 1px solid #e0e0e0;
}
.price--primary {
   background: #fffaf0;
   border-color: #e6c56d;
   outline: 0;
}
.lp-wrapper main h3 {
  color: #222222 !important;
}
.block .visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* ヒーロー画像と同じ角丸 */
    box-shadow: var(--shadow); /* ヒーロー画像と同じ影 */
}

/* サービスセクションのビジュアル要素にアスペクト比を適用 */
.block .visual {
    aspect-ratio: 4/3; /* ヒーロー画像と同じアスペクト比 */
    overflow: hidden; /* 角丸とアスペクト比に合わせた表示のため */
}

/* サービスセクションのビジュアルに背景グラデーションを適用（画像がない場合や読み込み中にも表示されるように） */
.block .visual:not(:has(img)) {
    background: linear-gradient(120deg, #3b4f63, #1a2a3a); /* ヒーロー画像と同じ背景色 */
    border-radius: 20px;
    box-shadow: var(--shadow);
}