html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:#0a0f1e;color:#c9d4ea;font-family:'Zen Kaku Gothic New',sans-serif;font-feature-settings:'palt' 1;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}a:hover{color:#6ea8ff}
::selection{background:#4d8dff;color:#0a0f1e}
@keyframes gridPan{from{background-position:0 0}to{background-position:0 56px}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}}
.top-nav-cta{color:#06101f!important;background:#00dcc8;padding:.65rem .9rem;border-radius:2px;text-decoration:none!important;font-weight:700}
.top-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.top-hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:2px;font-size:13px;font-weight:700;letter-spacing:.08em;text-decoration:none}
.top-hero-primary{background:#00dcc8;color:#06101f}
.top-hero-secondary{border:1px solid rgba(238,242,255,.4);color:#f2f5ff}
.home-function-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(56px,8vh,90px)}

input:focus,textarea:focus,select:focus{outline:2px solid #00dcc8;outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mediv-wp-skip-link{position:absolute;z-index:9999;top:8px;left:-9999px;padding:10px 14px;background:#fff;color:#111}.mediv-wp-skip-link:focus{left:8px}.mediv-honeypot{position:absolute;left:-10000px}.mediv-legacy-consent{grid-column:1/-1;color:inherit;font-size:12px;line-height:1.8}.mediv-legacy-consent input{width:auto;margin-right:.5em}.mediv-form-status{grid-column:1/-1;margin:0 auto 18px;padding:12px 16px;border:1px solid #ef4444;background:#fee2e2;color:#7f1d1d}

select{appearance:auto}

.mobile-menu-toggle,.mobile-menu-panel{display:none}
body.mobile-menu-open{overflow:hidden}

/* ============================================================
   ▼ モバイル救済レイヤー（861px以上には一切影響しません）
   インラインstyleはHTML側に残したまま、モバイル幅のみ
   !important で上書きしてレイアウト破綻を解消する専用層。
   ============================================================ */
@media (max-width:860px){
	.home-function-grid{grid-template-columns:1fr 1fr}
  /* すべてのインラインgridを1カラムに畳む */
  main [style*="grid-template-columns"],
  form[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  main .section-sticky-heading{position:static!important;top:auto!important}
  main section[id]{scroll-margin-top:90px}

  /* ヘッダー：固定CTAではなくサイト全体のメニューを優先 */
  header[data-header]{background:rgba(10,15,30,.96)!important;backdrop-filter:blur(14px)!important;box-shadow:0 1px 0 rgba(120,160,255,.14)!important}
  header[data-header] nav[aria-label="メイン"]{display:none!important}
  .mobile-menu-toggle{margin-left:auto;min-width:76px;height:44px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(238,242,255,.35);border-radius:3px;background:transparent;color:#eef2ff;font:inherit;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}
  .mobile-menu-icon{width:18px;height:14px;display:flex;flex-direction:column;justify-content:center;gap:5px}
  .mobile-menu-icon i{display:block;width:18px;height:1px;background:currentColor;transition:transform .2s ease}
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}
  .mobile-menu-panel{position:fixed;inset:74px 0 0;z-index:90;overflow-y:auto;display:flex;flex-direction:column;padding:14px 20px calc(32px + env(safe-area-inset-bottom));background:#0a0f1e;border-top:1px solid rgba(120,160,255,.14)}
  .mobile-menu-panel[hidden]{display:none}
  .mobile-menu-panel a{min-height:56px;display:flex;align-items:center;border-bottom:1px solid rgba(120,160,255,.14);color:#eef2ff;text-decoration:none;font-size:16px;font-weight:700}
  .mobile-menu-panel a::after{content:"→";margin-left:auto;color:#00dcc8}
  .mobile-menu-panel .mobile-menu-contact{margin-top:16px;padding-inline:16px;border:1px solid rgba(0,220,200,.55);background:rgba(0,220,200,.08)}
  .mobile-menu-toggle:focus-visible,.mobile-menu-panel a:focus-visible{outline:2px solid #00dcc8;outline-offset:3px}

  /* ヒーロー：全画面固定をやめて内容に合わせる（グラデ文字・アニメは維持） */
  section[data-hero]{min-height:0!important}
  [data-hero-content]{padding-top:96px!important}

  /* セクション余白をモバイル用に圧縮 */
  main section:not([data-hero]){padding-top:72px!important;padding-bottom:72px!important}

  /* 相談テーマ：ベントーグリッドを1カラムに */
  #business .biz-grid{grid-template-columns:1fr!important}
  #business .biz-card,
  #business .biz-card:nth-child(1),
  #business .biz-card:nth-child(2){grid-column:auto!important;min-height:0!important;padding:24px 20px!important}

  /* 会社情報の表：ラベルを値の上に */
  #company dl>div{gap:6px!important;padding:14px 0!important}

  /* フォーム：1カラム化に伴う微調整 */
  #contact form{padding:20px 16px!important}
  footer nav a{min-height:44px;display:flex!important;align-items:center}
}
@media (max-width:560px){
	.top-hero-actions{align-items:stretch}
	.top-hero-actions a{width:100%;box-sizing:border-box}
	.home-function-grid{grid-template-columns:1fr}
}

/* ============================================================
   ▼ 相談テーマ：ベントーグリッド（案C）
   上段2枚＋下段3枚の非対称タイル。テーマ色は各カードの
   インライン --c から取得（グロー・番号・矢印・ホバー枠に使用）。
   reveal演出（opacity/transform/transition）はHTML側インラインのまま。
   ============================================================ */
#business .biz-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:56px}
#business .biz-card{--c:#00dcc8;grid-column:span 3;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:230px;padding:28px 26px 22px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(120,160,255,.16);text-decoration:none;color:inherit}
#business .biz-card:nth-child(1),
#business .biz-card:nth-child(2){grid-column:span 3;min-height:250px}
#business .biz-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 88% -5%,color-mix(in oklab,var(--c) 20%,transparent),transparent 70%);opacity:.7;transition:opacity .4s ease;pointer-events:none}
#business .biz-card:hover{color:inherit;border-color:color-mix(in oklab,var(--c) 50%,transparent);background:rgba(255,255,255,.05)}
#business .biz-card:hover::before{opacity:1}
#business .biz-ghost{position:absolute;right:14px;bottom:-14px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:4.6rem;line-height:1;color:rgba(255,255,255,.045);transition:color .4s ease;pointer-events:none}
#business .biz-card:hover .biz-ghost{color:color-mix(in oklab,var(--c) 22%,transparent)}
#business .biz-svc{position:relative;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--c)}
#business .biz-title{position:relative;margin:0;color:#f2f5ff;font-weight:900;font-size:clamp(1.02rem,1rem + .3vw,1.22rem);line-height:1.7;letter-spacing:.04em}
#business .biz-ex{position:relative;margin:0;font-size:var(--type-small);line-height:1.95;color:rgba(200,214,240,.6)}
#business .biz-foot{position:relative;margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;color:rgba(200,214,240,.5)}
#business .biz-arrow{color:var(--c);font-size:14px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
#business .biz-card:hover .biz-arrow{transform:translateX(5px)}

/* BUSINESS: 2グループ + 包括プラン帯 */
#business .biz-group{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:24px 0 0;color:#9fc0ff;font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.6}
#business .biz-group:first-child{margin-top:0}
#business .biz-group::after{content:"";flex:1;height:1px;background:rgba(120,160,255,.18)}
#business .biz-grid .biz-card.biz-card--third{grid-column:span 2;min-height:250px}
#business .biz-grid .biz-card.biz-card--half{grid-column:span 3;min-height:230px}
#business .biz-band{--c:#00dcc8;grid-column:1/-1;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px;padding:26px 30px;border-radius:14px;background:rgba(0,220,200,.05);border:1px solid color-mix(in oklab,var(--c) 32%,transparent);text-decoration:none;color:inherit;transition:border-color .4s ease,background .4s ease}
#business .biz-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 92% 50%,color-mix(in oklab,var(--c) 16%,transparent),transparent 70%);opacity:.8;transition:opacity .4s ease;pointer-events:none}
#business .biz-band:hover{color:inherit;border-color:color-mix(in oklab,var(--c) 60%,transparent);background:rgba(0,220,200,.08)}
#business .biz-band:hover::before{opacity:1}
#business .biz-band-body{position:relative;display:flex;flex-direction:column;gap:7px;min-width:min(100%,22rem);flex:1 1 26rem}
#business .biz-band-lead{font-size:12px;letter-spacing:.1em;color:var(--c);font-weight:700}
#business .biz-band-title{color:#f2f5ff;font-weight:900;font-size:clamp(1.06rem,1rem + .35vw,1.3rem);line-height:1.65;letter-spacing:.04em}
#business .biz-band-ex{font-size:var(--type-small);line-height:1.95;color:rgba(200,214,240,.6)}
#business .biz-band-side{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-left:auto}
#business .biz-band-price{color:#f2f5ff;font-weight:700;font-size:13px;letter-spacing:.06em;white-space:nowrap}
#business .biz-band-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:2px;background:var(--c);color:#06101f;font-weight:700;font-size:12.5px;letter-spacing:.12em;white-space:nowrap}
#business .biz-band:hover .biz-arrow{transform:translateX(5px)}
#business .biz-band .biz-arrow{color:#06101f}

@media (max-width:860px){
  #business .biz-grid .biz-card.biz-card--third,
  #business .biz-grid .biz-card.biz-card--half{grid-column:1/-1;min-height:0}
  #business .biz-band{flex-direction:column;align-items:flex-start;padding:22px 20px}
  #business .biz-band-side{align-items:flex-start;margin-left:0;width:100%}
  #business .biz-band-price{white-space:normal}
  #business .biz-band-cta{width:100%;box-sizing:border-box;justify-content:center}
}

/* ============================================================
   ▼ ヒーロー演出レイヤー（オーロラ×ニューラルネットワーク）
   構成：方眼グリッド（既存）→ オーロラ3灯（減光・脇役）
        → 粒子ネットワークcanvas（主役）→ 暗幕 → 既存フェード → コピー
   ============================================================ */
/* 既存の方眼グリッドを緩やかにドリフトさせる */
#top > div[aria-hidden]:first-child{animation:gridPan 26s linear infinite}

/* オーロラ（案Aの約半分の光量・1.5倍遅い周期） */
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;mix-blend-mode:screen}
.hero-blob-1{width:680px;height:680px;left:-180px;top:-240px;background:radial-gradient(circle,rgba(77,141,255,.22),transparent 65%);animation:heroAurA 34s ease-in-out infinite}
.hero-blob-2{width:560px;height:560px;right:-140px;top:-100px;background:radial-gradient(circle,rgba(0,220,200,.16),transparent 65%);animation:heroAurB 40s ease-in-out infinite}
.hero-blob-3{width:600px;height:600px;left:34%;bottom:-280px;background:radial-gradient(circle,rgba(180,140,255,.15),transparent 65%);animation:heroAurC 46s ease-in-out infinite}
@keyframes heroAurA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,46px) scale(1.12)}66%{transform:translate(-40px,24px) scale(.94)}}
@keyframes heroAurB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-84px,54px) scale(1.1)}75%{transform:translate(46px,-30px) scale(.95)}}
@keyframes heroAurC{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-70px) scale(1.08)}}

/* 粒子ネットワーク */
#hero-net{position:absolute;inset:0;width:100%;height:100%}

/* コピー保護の暗幕（左下からのスポット逆光） */
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 26% 78%,rgba(6,10,22,.78) 0%,rgba(6,10,22,.35) 45%,transparent 75%)}

/* モバイル：オーロラとグリッドの動きを停止（粒子数はJS側で6割に自動減量） */
@media (max-width:760px){
  .hero-blob{animation:none}
  #top > div[aria-hidden]:first-child{animation:none}
  #hero-net{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-blob{animation:none!important}
  #top > div[aria-hidden]:first-child{animation:none!important}
}

/* v2.1.2: do not rely on clipped gradient text for the essential hero title. */
#hero-title>span{
  background:none!important;
  color:#5eead4!important;
  -webkit-text-fill-color:#5eead4!important;
}
[data-hero-content]{box-sizing:border-box}

/* ===== Unified typography system ===== */
:root{
  --font-ja:'Zen Kaku Gothic New','Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans JP','Segoe UI',system-ui,sans-serif;
  --font-en:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --type-body:16px;
  --type-small:14px;
  --type-label:12px;
}
body{font-family:var(--font-ja);font-size:var(--type-body)}
header a[href="#top"]{font-size:16px!important;letter-spacing:.07em!important}
header nav{font-size:14px!important;letter-spacing:.04em!important}
main section:not(#top) h2{font-weight:700!important;line-height:1.55!important;letter-spacing:.03em!important}
main section:not(#top) h3{line-height:1.55!important;letter-spacing:.02em!important}
main section [style*="font-family:'Space Grotesk'"]{font-family:var(--font-en)!important}
main section [style*="letter-spacing:.3em"]{letter-spacing:.16em!important}
main section [style*="letter-spacing:.24em"]{letter-spacing:.16em!important}
main section [style*="font-size:12.5px"]{font-size:var(--type-small)!important}
main section [style*="font-size:11.5px"]{font-size:var(--type-small)!important}
main section [style*="font-size:13px"]{font-size:var(--type-small)!important}
main section [style*="font-size:13.5px"]{font-size:var(--type-small)!important}
main section [style*="font-size:14.5px"]{font-size:var(--type-body)!important}
main section [style*="font-size:15px"]{font-size:var(--type-body)!important}
#contact label{font-size:var(--type-small)!important}
#contact label span{font-size:var(--type-label)!important}
#contact input,#contact textarea,#contact select{font-size:var(--type-body)!important;line-height:1.6}
#contact button{font-size:var(--type-body)!important;font-weight:700!important}
#about p,#approach>div>div>p,#business>div>p,#process>div>p,#fit>div>p,#company>div>div>p,#contact>div>div>p{line-height:1.95!important}
@media(max-width:760px){
  main section:not(#top) h2{line-height:1.5!important}
  #top h1{font-size:clamp(2.35rem,11vw,2.625rem)!important;line-height:1.3!important}
  #top h1 span{white-space:nowrap}
}
