/* ===== UniGain site: global modern enhancements (loaded after inline <style>) ===== */

/* スクロール進捗バー */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--blue),var(--blue2));box-shadow:0 0 12px rgba(47,147,240,.5)}

/* ---- ヘッダー刷新 ---- */
header.site{transition:box-shadow .3s ease, background .3s ease, border-color .3s ease}
header.site.scrolled{box-shadow:0 10px 30px rgba(15,36,64,.08);background:rgba(255,255,255,.92);border-bottom-color:transparent}
.brand .mk{transition:transform .3s ease}
.brand:hover .mk{transform:rotate(8deg) scale(1.06)}

/* ナビ：ホバー下線アニメ */
.menu>a,.hasdrop>span{position:relative}
.menu>a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--blue);transition:right .28s cubic-bezier(.16,1,.3,1)}
.menu>a:hover::after{right:0}

/* ドロップダウン：display切替→フェード＆スライド */
.drop{display:flex !important;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(10px);transition:opacity .22s ease, transform .22s ease, visibility .22s}
.hasdrop:hover .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop a{transition:background .18s, color .18s, transform .18s}
.drop a:hover{transform:translateX(3px)}

/* CTAボタン：グラデ＋艶 */
.btn-primary{background:linear-gradient(135deg,#3aa3ff,#2f7fe0);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-primary:hover::after{left:140%}

/* ---- モバイルメニュー（JS生成のburger/mnav用） ---- */
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;padding:0}
.burger span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s ease, opacity .2s ease}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;top:66px;left:0;right:0;z-index:49;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(15,36,64,.12);display:flex;flex-direction:column;padding:14px 24px 22px;transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s, visibility .3s}
body.menu-open .mnav{transform:none;opacity:1;visibility:visible}
.mnav a{padding:14px 6px;border-bottom:1px solid var(--soft);font-weight:600;color:var(--ink);font-size:15px}
.mnav a.m-cta-link{margin-top:12px;background:linear-gradient(135deg,#3aa3ff,#2f7fe0);color:#fff;text-align:center;border-radius:12px;border:none;box-shadow:0 8px 22px rgba(47,147,240,.3)}
/* ナビ切替の基準は 1120px に統一（旧980px系ルールは競合のため削除済み） */

/* ---- スクロールリベール（JS有効時のみ非表示。JS失敗時は常に表示） ---- */
html.js-anim .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js-anim .rv.in{opacity:1;transform:none}

/* ---- モダンなマイクロインタラクション ---- */
.case .th{overflow:hidden}
.case .th img,.herovis img,.cta-photo img,.effect-vis img,.prob-photo img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.case:hover .th img{transform:scale(1.06)}
.herovis:hover img,.cta-photo:hover img,.prob-photo:hover img{transform:scale(1.015)}
.card,.case,.tfc,.step,.val,.stat,.svc a,.tool,.price-card{transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease}
.tool:hover{transform:translateY(-3px);border-color:#cfe3fb;box-shadow:0 10px 26px rgba(15,36,64,.07)}
.stat:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,36,64,.1)}
details.faq{transition:box-shadow .25s, border-color .25s}
details.faq[open]{box-shadow:0 12px 30px rgba(15,36,64,.07);border-color:#cfe3fb}

/* ヒーローのチップを浮遊 */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.chip{animation:floaty 4.5s ease-in-out infinite}
.chip.b{animation-delay:1.4s}

/* フォーカスの可視性（モダン＆アクセシブル） */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  html.js-anim .rv{opacity:1 !important;transform:none !important}
  .chip{animation:none}
  .btn-primary::after{display:none}
}

/* ===== v2: もっとモダン＆動き ===== */

/* ヒーローに動くオーロラ光 */
.hero,.page-hero,.final,.posi,.essence,.loss,.mission{position:relative;overflow:hidden}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:160%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.55}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply;animation:drift 16s ease-in-out infinite}
.aurora .a1{width:380px;height:380px;left:8%;top:-6%;background:radial-gradient(circle,#bfe0ff,transparent 70%)}
.aurora .a2{width:420px;height:420px;right:6%;top:10%;background:radial-gradient(circle,#d7ecff,transparent 70%);animation-delay:-5s}
.aurora .a3{width:300px;height:300px;left:42%;top:30%;background:radial-gradient(circle,#cfe3ff,transparent 70%);animation-delay:-9s}
.final .aurora,.posi .aurora,.essence .aurora,.loss .aurora,.mission .aurora{opacity:.22;mix-blend-mode:screen}
.final .aurora span,.posi .aurora span,.essence .aurora span,.loss .aurora span,.mission .aurora span{mix-blend-mode:screen}
.final .a1,.posi .a1,.essence .a1,.loss .a1,.mission .a1{background:radial-gradient(circle,#3a7fd0,transparent 70%)}
.final .a2,.posi .a2,.essence .a2,.loss .a2,.mission .a2{background:radial-gradient(circle,#2f93f0,transparent 70%)}
.final .a3,.posi .a3,.essence .a3,.loss .a3,.mission .a3{background:radial-gradient(circle,#1b5fae,transparent 70%)}
.hero>.wrap,.page-hero>.wrap,.final>.wrap,.posi>.wrap,.essence>.wrap,.loss>.wrap,.mission>.wrap{position:relative;z-index:2}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-22px) scale(1.08)}66%{transform:translate(-22px,18px) scale(.96)}}

/* カウントアップ中は等幅でガタつき防止 */
.counting{font-variant-numeric:tabular-nums}

/* 数字カードをガラス質感に */
.stat{backdrop-filter:blur(4px)}
.stat .num,.loss .big .n{text-shadow:0 2px 30px rgba(47,147,240,.18)}

/* お客様の声 */
.tm-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
@media(min-width:760px){.tm-grid{grid-template-columns:repeat(3,1fr)}}
.tm{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(15,36,64,.05);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.tm:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,36,64,.1)}
.tm .stars{color:#f5b740;font-size:15px;letter-spacing:2px}
.tm .q{font-size:14.5px;color:var(--ink);margin-top:12px;font-weight:600;line-height:1.85}
.tm .who{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--soft)}
.tm .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #eaf3fe}
.tm .who b{display:block;font-size:14px;color:var(--navy)}
.tm .who span{font-size:12px;color:var(--muted)}

/* 信頼バッジ帯 */
.trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:30px}
.trustbar div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);font-weight:600}
.trustbar svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2}

/* CTAボタンを少し主張（グロー脈動） */
@keyframes glow{0%,100%{box-shadow:0 8px 22px rgba(47,147,240,.28)}50%{box-shadow:0 10px 32px rgba(47,147,240,.5)}}
.final .btn-primary,.hero .btn-primary{animation:glow 2.8s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .aurora span{animation:none}
  .final .btn-primary,.hero .btn-primary{animation:none}
}

/* ===== v3: hero entrance + flat nav ===== */
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes heroVisIn{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
html.js-anim .hero-in{animation:heroUp .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--hi,0ms)}
html.js-anim .hero-vis-in{animation:heroVisIn 1.15s cubic-bezier(.16,1,.3,1) .3s both}

/* ナビ：サービス4つをフラット表示するため少し詰める＆表示幅を広げる */
.menu{gap:20px;font-size:13.5px}
.menu>a{white-space:nowrap}
@media(max-width:1119px){header.site .menu{display:none}header.site .nav .cta{display:none}.burger{display:flex}}
@media(min-width:1120px){.mnav{display:none}}

@media(prefers-reduced-motion:reduce){html.js-anim .hero-in,html.js-anim .hero-vis-in{animation:none}}

/* ===== v4: 強調用レッドアクセント（要所のみ） ===== */
:root{--red:#e23b4e;--red-on-dark:#ff8a97}
.hl{color:var(--red);font-weight:800}
.hl-mark{color:var(--red);font-weight:800;background:linear-gradient(transparent 58%, rgba(226,59,78,.16) 0);padding:0 2px;border-radius:2px}
.hl-d{color:var(--red-on-dark);font-weight:800}

/* ===== contact form: honeypot / consent / error ===== */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 14px;cursor:pointer;line-height:1.6}
.agree input{margin-top:3px;flex:none}
.err{display:none;background:#fdeef0;border:1px solid #f6c6cd;color:#c2334a;border-radius:10px;padding:12px 14px;font-size:13.5px;font-weight:600;margin-top:10px}
.err.on{display:block}

/* ===== 料金比較（AI活用で半額以下） ===== */
.price-card .cmp{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:6px;flex-wrap:wrap}
.price-card .was{color:#9aa7b8;text-decoration:line-through;font-size:15px;font-weight:600}
.price-card .save{background:var(--blueSoft);color:var(--blue);font-weight:800;font-size:12px;padding:5px 12px;border-radius:999px}

/* ===== ブランドロゴ画像（CSS四角マークを置換） ===== */
.brand .mk{background:none !important;border-radius:0 !important;width:auto !important;height:30px !important;display:inline-block;object-fit:contain}
.brand .mk::after{display:none !important}
footer.site .brand .mk{height:28px !important}

/* Turnstile ウィジェット余白 */
#cfWrap .cf-turnstile{margin:4px 0 8px}

/* ===== 料金の安さ強調（53%OFF表示） ===== */
.price-card .was{font-size:17px;position:relative}
.price-card .off{background:#e2536b;color:#fff;font-weight:800;font-size:15px;padding:7px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(226,83,107,.35);letter-spacing:.02em}
.price-card .otoku{margin-top:12px;font-size:15px;color:var(--ink);font-weight:600}
.price-card .otoku b{color:#e2536b;font-size:1.35em;font-weight:800}
.price-card .amt{color:var(--blue)}

/* ===================================================== */
/* ===== モバイル徹底改善（2026/6） ===== */
/* ===================================================== */

/* --- 見出しの折返しを自然に --- */
h1,h2.s,.page-hero h1,.posi .pos,.essence h2,.final h2{text-wrap:balance}

/* --- スマホ固定CTA（site.jsが生成） --- */
.m-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;opacity:0;transform:translateY(90px);transition:.35s;pointer-events:none}
body.show-mcta .m-cta{opacity:1;transform:none;pointer-events:auto}
.m-cta a{display:flex;justify-content:center;align-items:center;gap:8px;padding:15px;background:var(--blue);color:#fff;border-radius:999px;font-weight:800;font-size:15px;box-shadow:0 10px 30px rgba(47,147,240,.45);text-decoration:none}
@media(min-width:900px){.m-cta{display:none!important}}

@media(max-width:679px){
  /* --- セクションの間延び解消 --- */
  section.blk{padding:46px 0}
  .posi{padding:44px 0}
  .cta-band{padding:50px 0}
  .essence{padding:46px 0}
  .final{padding:54px 0}
  .page-hero{padding:44px 0 36px}
  h2.s{font-size:clamp(22px,6.2vw,28px)}
  .lead{font-size:14.5px;margin-top:10px}
  .hero .grid{padding:38px 0 46px;gap:28px}
  .hero p.sub{font-size:15px;margin-top:14px}
  .hero .trust{gap:16px;margin-top:20px}
  .hero .trust b{font-size:19px}

  /* --- CTAボタンをフル幅に --- */
  .cta-row{flex-direction:column;gap:10px}
  .cta-row .btn{width:100%;justify-content:center;padding:15px 20px}
  .micro{font-size:11.5px;line-height:1.8}

  /* --- カードのコンパクト化 --- */
  .cards{gap:12px;margin-top:26px}
  .card{padding:18px 16px}
  .card .ic-wrap{width:42px;height:42px;margin-bottom:10px;border-radius:10px}
  .card h3{font-size:16px}
  .card p{font-size:13.5px;margin-top:5px}
  .card .t-illus{aspect-ratio:16/7;margin-bottom:12px}
  .values{gap:10px;margin-top:26px}
  .val{padding:16px}

  /* --- 数字カード --- */
  .stats{gap:12px}
  .stat{padding:24px 16px}
  .stat .num{font-size:clamp(38px,11vw,48px)}
  .stat .lab{margin-top:8px;font-size:14.5px}
  .stat .sub{font-size:12px}

  /* --- ステップ --- */
  .steps{gap:10px;margin-top:26px}
  .step{padding:14px 16px}
  .step h4{margin-top:2px;font-size:14.5px}
  .step p{font-size:12.5px;margin-top:2px}

  /* --- 比較表：行ラベル固定＋スクロールヒント --- */
  table.cmp{min-width:560px;font-size:12.5px}
  table.cmp th,table.cmp td{padding:11px 10px}
  table.cmp tbody th{position:sticky;left:0;z-index:2;box-shadow:2px 0 4px rgba(15,36,64,.06)}
  table.cmp thead th:first-child{position:sticky;left:0;z-index:2;background:var(--soft)}

  /* --- FAQ・会社概要 --- */
  .faqwrap{margin-top:26px}
  details.faq summary{padding:15px 16px;font-size:14px}
  details.faq .a{padding:12px 16px 16px;font-size:13.5px}
  .about{padding:4px 16px}
  .about .row{padding:13px 2px}

  /* --- お客様の声 --- */
  .tm-grid{gap:12px}
  .tm{padding:18px 16px}

  /* --- フッター（固定CTAと干渉しない余白） --- */
  footer.site{padding:34px 0 96px}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
  .fnav{gap:10px 14px;font-size:12.5px}

  /* --- 料金カード --- */
  .price-card{padding:28px 18px;margin-top:28px}
  .price-card .inc{margin-top:20px}
  .pricebox{padding:22px 18px;margin-top:26px}
}

/* ===================================================== */
/* ===== キービジュアル(hero)のスマホ余白修正（2026/6） ===== */
/* ===================================================== */
@media(max-width:679px){
  /* grid の padding短縮形が .wrap の左右24pxを消していたので復活 */
  .hero .grid{padding-left:20px;padding-right:20px}

  /* 画像を角丸フレーム化し、上下に呼吸を持たせる */
  .herovis{margin-top:6px}
  .herovis img{border-radius:14px}

  /* 浮かぶバッジ(chip)が画面端で見切れるのを防ぐ＝画像の内側に収める */
  .chip{padding:9px 12px;border-radius:10px}
  .chip b{font-size:16px}
  .chip .dot{width:28px;height:28px}
  .chip.a{top:10px;left:10px}
  .chip.b{bottom:10px;right:10px}

}

/* 画像にwidth/height属性を付与してもCSS幅100%で歪まないための保険（CLS対策） */
img[width][height]{height:auto;max-width:100%}