/************************************************************
 * ================ TOP + SERVICE COMBINED CSS ============= *
 *  - Top（動画ヒーロー/Astra対応）
 *  - Service（LLMO訴求/中央寄せ/料金表/FAQ）
 ************************************************************/

/* ====================== TOP PAGE ======================= */

/* ヒーロー（フルブリード＆中央コピー） */
.hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  --hero-height: 420px;
  --hero-height-lg: 84vh;
  --overlay: rgba(0,0,0,.35);
  --title-fz: clamp(28px, 5vw, 56px);
  --subtitle-fz: clamp(14px, 2.4vw, 18px);
  --content-maxw: 1000px;
  --gap: 16px;
}
.hero--short { height: var(--hero-height); }
.hero--full  { height: var(--hero-height-lg); }

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.28));
  background-color: var(--overlay);
  z-index: 1; pointer-events: none;
}
.hero__content{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: clamp(16px,4vw,40px);
  z-index: 2;
}
.hero__content > *{ max-width: var(--content-maxw); margin-inline: auto; }

.hero__title{
  color:#fff; font-weight:700;
  font-size: var(--title-fz); line-height:1.15; letter-spacing:.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.45); margin:0 0 10px;
}
.hero__subtitle{
  color:#eaeaea; font-size: var(--subtitle-fz); margin:0 0 var(--gap);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* CTAボタン */
.hero__actions{ display:inline-flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:12px 20px; border-radius:999px; font-weight:600; text-decoration:none;
  transition: transform .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn--primary{ background:#1754f1; color:#fff; }
.btn--primary:hover{ opacity:.9; }
.btn--ghost{ background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.btn--ghost:hover{ background: rgba(255,255,255,.18); }

/* スマホ＆100vh対策 */
@media (max-width: 767px){
  .hero{ --hero-height: 60vh; }
  .hero__actions{ gap:10px; }
}
.hero.use-vh{ height: calc(var(--vh, 1vh) * 72); }

/* “ふわっ”演出＆配慮 */
.js-reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal{ transition:none; opacity:1; transform:none; }
  .btn{ transition:none; }
}

/* Astra固定ヘッダー調整 */
:root{ --header-h: 72px; --adminbar-h: 0px; }
.site-header{
  position: fixed; top: var(--adminbar-h); left:0; right:0; width:100%; z-index:1000;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-content,
.ast-plain-container .site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post{
  padding-top: calc(var(--header-h) + var(--adminbar-h)) !important;
}
.entry-content .hero.alignfull,
.entry-content > .hero:first-child,
.ast-single-post .entry-content .hero{
  width:100vw !important; max-width:100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left:0 !important; padding-right:0 !important;
}
.entry-content > .hero:first-child{ margin-top: 0 !important; }

/* ===================== SERVICE PAGE ===================== */

/* カラートークン */
:root{
  --lf-primary:#1754f1;
  --lf-primary-ink:#0e2e98;
  --lf-accent:#1dd1a1;
  --lf-ink:#11131a;
  --lf-text:#1c2230;
  --lf-muted:#64748b;
  --lf-border:#e6e9f2;
  --lf-surface:#ffffff;
  --lf-surface-2:#f7f9ff;
  --lf-shadow: 0 8px 24px rgba(17,19,26,.08), 0 2px 8px rgba(17,19,26,.06);
}

/* セクション＆見出し */
.lf-section{ padding: clamp(40px,6vw,96px) 0; }
.lf-head{ max-width:960px; margin:0 auto clamp(20px,3vw,36px); text-align:center; }
.lf-eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lf-primary-ink); background:rgba(23,84,241,.08); border:1px solid rgba(23,84,241,.18);
  padding:6px 10px; border-radius:999px; margin-bottom:12px; font-weight:700;
}
.lf-title{
  font-size:clamp(24px,3.2vw,36px); line-height:1.2; color:var(--lf-ink); font-weight:800; margin:0 0 10px;
  position:relative; display:inline-block;
}
.lf-title .u-underline{
  background:linear-gradient(120deg, rgba(23,84,241,.24), rgba(29,209,161,.24));
  height:.6em; position:absolute; left:0; bottom:.1em; width:100%; z-index:-1; border-radius:6px;
}
.lf-lead{ color:var(--lf-muted); font-size:clamp(14px,1.25vw,17px); }

/* LLMO訴求バナー（見出しの上） */
.lf-llmo{
  margin: 8px auto 14px; padding: 18px;
  border-radius: 16px;
  background: linear-gradient(92deg, rgba(23,84,241,.16), rgba(23,84,241,.08));
  border: 1px solid rgba(23,84,241,.22);
  box-shadow: 0 10px 28px rgba(23,84,241,.15);
  width: min(100%, 1120px);
}
.lf-llmo__top{
  display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:10px;
}
.lf-llmo__tag{
  font-weight: 800; font-size: .92rem;
  padding: .5rem .8rem; border-radius: 999px; background:#1754f1; color:#fff; letter-spacing:.02em;
}
.lf-llmo__headline{
  font-weight: 900; letter-spacing:.01em;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.7rem);
  color:#0f1d36;
}
.lf-llmoGrid{
  display:grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .lf-llmoGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .lf-llmoGrid{ grid-template-columns: 1fr; } }

.lf-llmoCard{
  background:#fff; border:1px solid var(--lf-border); border-radius:14px;
  padding:14px; display:flex; flex-direction:column; gap:8px;
  box-shadow: 0 2px 10px rgba(16,24,40,.06); min-width:0;
}
.lf-llmoCard__hd{ display:flex; align-items:center; gap:.6rem; justify-content:center; }
.lf-llmoCard__icon{ display:none !important; }
.lf-llmoCard__title{ font-weight:800; font-size:.98rem; color:#102038; }
.lf-llmoCard__list{
  margin:0; padding-left:0 !important; list-style:none !important;
  font-size:.9rem; line-height:1.6; color:#2a3546;
  display:grid; row-gap:6px;
}

/* 汎用グリッド（デフォルト） */
.lf-grid{
  display:grid; gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  align-items:stretch;
}

/* サービスカード */
.lf-card{
  position:relative; background:var(--lf-surface); border:1px solid var(--lf-border);
  border-radius:18px; padding:22px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden; isolation:isolate;
}
.lf-card::after{
  content:""; position:absolute; inset:0; background:radial-gradient(1200px 200px at 0 -20%, rgba(23,84,241,.08), transparent 60%);
  pointer-events:none; z-index:0;
}
.lf-card:hover{ transform:translateY(-4px); box-shadow:var(--lf-shadow); border-color:rgba(23,84,241,.25); }
.lf-card__icon{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:22px; font-weight:800;
  background:linear-gradient(135deg, rgba(23,84,241,.12), rgba(29,209,161,.12));
  border:1px solid rgba(23,84,241,.2); color:var(--lf-primary-ink); margin-bottom:14px;
}
.lf-card__title{ font-weight:800; color:var(--lf-ink); margin:0 0 6px; font-size:18px; }
.lf-card__desc{ color:var(--lf-text); opacity:.9; font-size:14.5px; line-height:1.7; }
.lf-card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.lf-badge{
  font-size:12px; line-height:1; padding:7px 10px; border-radius:999px; color:var(--lf-primary-ink);
  background:rgba(23,84,241,.08); border:1px solid rgba(23,84,241,.2); font-weight:700;
}

/* CTA（共通） */
.lf-btn{
  --_bg: var(--lf-primary);
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid rgba(23,84,241,.3);
  background:linear-gradient(180deg, var(--_bg), color-mix(in srgb, var(--_bg) 88%, #000 12%));
  color:#fff; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(23,84,241,.25);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.lf-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(23,84,241,.3); }
.lf-btn--ghost{ --_bg: transparent; background:transparent; color:var(--lf-primary-ink); border:1px solid rgba(23,84,241,.35); box-shadow:none; }
.lf-btn--full{ width:100%; justify-content:center }

/* 進め方（タイムライン） */
.lf-steps{ counter-reset: step; display:grid; gap:16px; }
.lf-step{
  background:var(--lf-surface); border:1px solid var(--lf-border); border-radius:16px; padding:16px 16px 16px 56px; position:relative;
}
.lf-step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:16px; top:16px; width:28px; height:28px; border-radius:50%;
  background:var(--lf-primary); color:#fff; display:grid; place-items:center; font-weight:800; box-shadow:0 6px 14px rgba(23,84,241,.32);
}

/* 料金（中央寄せ対応込み） */
.lf-pricing{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.lf-price{
  background:var(--lf-surface); border:1px solid var(--lf-border); border-radius:18px; padding:22px; position:relative; overflow:hidden;
}
.lf-price--pro{ border-color:rgba(23,84,241,.45); box-shadow:var(--lf-shadow); }
.lf-price__tag{
  position:absolute; right:14px; top:14px; font-size:12px; font-weight:800; color:var(--lf-primary-ink);
  background:rgba(23,84,241,.1); border:1px solid rgba(23,84,241,.25); padding:6px 8px; border-radius:999px;
}
.lf-price__num{ font-size:32px; font-weight:900; color:var(--lf-ink); margin:4px 0; }
.lf-list{ margin:14px 0 0; padding:0; list-style:none; }
.lf-list li{ display:flex; gap:10px; align-items:flex-start; margin:8px 0; color:var(--lf-text); }
.lf-list li::before{ content:"✓"; font-weight:900; color:var(--lf-accent); margin-top:1px; }

/* 料金グリッド自体を中央へ（単一定義に集約） */
#pricing .lf-pricing{
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px)) !important;
  justify-content: center !important;
  gap: clamp(12px, 2.4vw, 24px);
  max-width: 1120px; margin-inline: auto;
}
@media (max-width: 360px){
  #pricing .lf-pricing{ grid-template-columns: 1fr !important; }
}

/* FAQ */
.lf-faq{ border:1px solid var(--lf-border); border-radius:16px; overflow:hidden; background:var(--lf-surface); }
.lf-faq__item + .lf-faq__item{ border-top:1px solid var(--lf-border); }
.lf-faq__q{ width:100%; text-align:left; background:#fff; border:0; padding:16px 20px; font-weight:800; color:var(--lf-ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.lf-faq__a{ max-height:0; overflow:hidden; transition:max-height .28s ease; background:var(--lf-surface-2); }
.lf-faq__a > div{ padding:14px 20px; color:var(--lf-text); }
.lf-faq__icon{ transition:transform .25s ease; }

/* スクロール演出 */
[data-reveal]{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.is-inview{ opacity:1 !important; transform:none !important; }

/* セクション背景＆末尾調整 */
.lf-wrap{ background:linear-gradient(180deg, #fff, var(--lf-surface-2)); border-top:1px solid var(--lf-border); border-bottom:1px solid var(--lf-border); }
.lf-section:last-of-type{ padding-bottom:16px !important; margin-bottom:0 !important; }
.lf-wrap:last-of-type{ background:transparent !important; border-bottom:0 !important; }
.entry-content > .wp-block-spacer:last-child{ display:none !important; height:0 !important; margin:0 !important; }
.entry-content{ margin-bottom:0 !important; }

/* =========================================================
   SERVICE ヒーロー：中央寄せの最終確定（不要な指定は削除済）
   ポイント：
   - 左カラムを width:auto にして 100% 伸長を止める
   - .lf-grid を “中身幅で収縮” ＋ margin:auto で中央に
   - 幅帯ごとに 3列/2列/1列で常に中央寄せ
   ========================================================= */

/* 余白（.lf-hero 自体はブロックでOK。行間用の grid 指定は不要） */
.lf-hero{
  padding-top: 8px;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ---- PCワイド（>=1080px）：3枚を必ず中央で横一列 ---- */
@media (min-width: 1080px){
  /* 左カラム（=カード群のラッパ）を中身幅基準＆中央配置 */
  .lf-hero > div:first-child{
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto !important;       /* ← グリッドでなくても中央へ */
  }
  /* 3カードのコンテナを“中身幅で収縮”させて中央寄せ */
  .lf-hero > div:first-child .lf-grid{
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;          /* 一列固定 */
    width: max-content !important;         /* 中身幅に縮む＝左右に余白 */
    margin-inline: auto !important;        /* 真ん中に置く */
  }
  /* 各カードの幅（必要なら 300〜340pxで微調整） */
  .lf-hero > div:first-child .lf-grid > .lf-card{
    flex: 0 0 320px !important;
  }
}

/* ---- タブレット（880–1079px）：2列でも中央寄せ ---- */
@media (min-width: 880px) and (max-width: 1079.98px){
  .lf-hero > div:first-child{
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .lf-hero > div:first-child .lf-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 920px !important;          /* 2列の見栄え安定 */
  }
}

/* ---- モバイル（<=879px）：1列＆見切れ防止 ---- */
@media (max-width: 879.98px){
  .lf-hero > div:first-child .lf-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important; /* 1カラムで必ず収まる */
    gap: 14px !important;
    padding-inline: 10px !important;                  /* 端の食い込み防止 */
    margin-inline: auto !important;
  }
  /* テキスト潰れの安全ネット */
  .lf-hero,
  .lf-hero > div,
  .lf-hero .lf-grid,
  .lf-hero .lf-card{ min-width: 0 !important; }
  .lf-card__title, .lf-card__desc, .lf-list, .lf-llmoCard__list, .lf-lead{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;
  }
}
/* ========== Pricing: 選択時に“ふわっと浮く”演出 ========== */
.lf-price{
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    box-shadow .26s ease,
    border-color .2s ease,
    outline-color .2s ease;
  outline: 0;
}
.lf-price:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(17,19,26,.10);
}

/* 選択状態 */
.lf-price.is-selected{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(23,84,241,.55);
  box-shadow:
    0 18px 44px rgba(23,84,241,.28),
    0 6px 16px rgba(17,19,26,.10);
  position: relative;
}

/* 選択時のハイライトリング（淡い外周光） */
.lf-price.is-selected::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 20px;
  background: radial-gradient(120% 120% at 50% -10%, rgba(23,84,241,.22), transparent 60%);
  pointer-events:none;
  z-index: 0;
}

/* フォーカス（キーボード操作） */
.lf-price:focus-within{
  outline: 3px solid rgba(23,84,241,.35);
  outline-offset: 2px;
}

/* “おすすめ”タグがある場合も選択時は存在感UP */
.lf-price.is-selected .lf-price__tag{
  background: rgba(23,84,241,.16);
  border-color: rgba(23,84,241,.45);
  color: #0e2e98;
}

/* 右上にチェックバッジ（CSSのみで表示） */
.lf-price.is-selected::before{
  content:"✓ 選択中";
  position:absolute; top:12px; left:12px;
  font-size:12px; font-weight:800;
  color:#0e2e98;
  background: #e9f0ff;
  border: 1px solid rgba(23,84,241,.35);
  border-radius: 999px;
  padding: 6px 10px;
  z-index: 1;
}

.byline,
.posted-on,
.entry-meta,
.author,
.date {
  display: none !important;
}