/* =========================================================
   Login Plus 新サイト styles
   ブランド：濃紺 #092240 / #021839 × グリーン #00cc7e
========================================================= */
:root{
  --navy:#092240;
  --navy-deep:#021839;
  --green:#00cc7e;
  --green-d:#00b36e;
  --ink:#111111;
  --muted:#5a6072;
  --bg:#fdfdfe;
  /* **純白は平板で人工的に見える。** 地の色をアンカー（濃紺）側へ僅かに寄せる */
  --paper:#fdfdfe;
  --bg-alt:#f3f5f7;
  --line:#e6e9ee;
  --radius:16px;
  --shadow:0 10px 30px rgba(9,34,64,.10);
  --shadow-sm:0 4px 14px rgba(9,34,64,.08);
  --wrap:1120px;
  --font:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.75;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
sup{font-size:.6em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;}
.section{padding:88px 0;}
/* **全部を同じ余白にしない。** 19セクションが等間隔だと、
   どれが主でどれが従か読み取れず、一覧のように流れてしまう。
   役割ごとに3段階へ分ける */
.section.section-tight{padding:60px 0;}   /* 前のセクションの続き物 */
.section.section-wide{padding:112px 0;}   /* 単独で立たせたい面 */
.section.alt{background:var(--bg-alt);}
.center{text-align:center;}

.eyebrow{color:var(--green);font-weight:800;letter-spacing:.12em;font-size:13px;margin-bottom:10px;text-align:center;}
.sec-title{font-size:clamp(24px,3.4vw,34px);font-weight:800;text-align:center;color:var(--navy);letter-spacing:.01em;line-height:1.4;}
.sec-lead{text-align:center;color:var(--muted);max-width:720px;margin:14px auto 0;font-size:15.5px;}

/* -------- ボタン -------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:15px;padding:12px 22px;border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s,color .15s;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-lg{padding:15px 30px;font-size:16px;}
.btn-primary{background:var(--green);color:var(--paper);box-shadow:0 8px 20px rgba(0,204,126,.28);}
.btn-primary:hover{background:var(--green-d);}
.btn-ghost{background:var(--paper);color:var(--navy);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-ghost-light{background:transparent;color:var(--paper);border:1.5px solid rgba(255,255,255,.6);}
.btn-ghost-light:hover{border-color:var(--paper);background:rgba(255,255,255,.1);}

/* ======================= ヘッダー ======================= */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);}
.hd-inner{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:34px;width:auto;}
.brand-fallback,.ft-fallback{display:none;font-weight:800;font-size:20px;color:var(--navy);letter-spacing:.02em;}
/* ロゴ画像が無い場合のフォールバック表示（画像読み込み失敗時にJSで付与） */
.no-logo .brand-logo{display:none;}
.no-logo .brand-fallback{display:inline;}
.hd-nav{display:flex;gap:22px;margin-left:12px;}
.hd-nav a{font-weight:700;font-size:14.5px;color:var(--navy);padding:6px 2px;position:relative;}
.hd-nav a:hover{color:var(--green);}
.hd-cta{margin-left:auto;display:flex;gap:10px;}
.hd-cta .btn{padding:9px 18px;font-size:14px;}
.hd-burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px;}
.hd-burger span{width:24px;height:2px;background:var(--navy);display:block;transition:.2s;}

/* ======================= ヒーロー ======================= */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg-alt) 100%);}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 85% 10%,rgba(0,204,126,.14),transparent 60%),
  radial-gradient(50% 50% at 10% 90%,rgba(9,34,64,.08),transparent 60%);pointer-events:none;}
.hero-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:72px 24px 80px;display:grid;grid-template-columns:1fr 1.06fr;gap:40px;align-items:center;}
.hero-eyebrow{color:var(--green);font-weight:800;letter-spacing:.14em;font-size:13px;margin-bottom:14px;}
/* 2つの語を並べて見せるため、**地の文を一段弱める。**
   同じ濃さだと、色を分けてもどれが主語なのか読み取れない */
.hero-title{font-size:clamp(30px,5vw,50px);font-weight:900;line-height:1.28;
  color:#41506b;letter-spacing:.01em;}
.hero-title .hl{color:var(--green);}      /* ソーシャルログイン */
.hero-title .hl-navy{color:var(--navy);}  /* パスキー */
.hero-lead{margin-top:20px;color:var(--muted);font-size:16.5px;max-width:520px;}
.hero-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;}
.hero-points li{position:relative;padding-left:30px;font-size:15px;color:var(--ink);}
.hero-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--paper);background:var(--green);width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.hero-points b{color:var(--navy);}
.hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.center-actions{justify-content:center;}
.hero-note{margin-top:14px;font-size:13px;color:var(--muted);}

/* スマホモックアップ（プレースホルダ） */
.hero-visual{display:flex;justify-content:center;}
.mock-frame{width:280px;background:var(--navy);border-radius:38px;padding:14px;box-shadow:0 30px 60px rgba(9,34,64,.28);}
.mock-screen{background:var(--paper);border-radius:26px;padding:28px 22px 34px;text-align:center;}
.mock-logo{font-weight:900;color:var(--navy);font-size:18px;margin-bottom:22px;letter-spacing:.02em;}
.mock-h{font-weight:800;color:var(--ink);margin-bottom:18px;font-size:15px;}
.mock-btns{display:grid;gap:11px;}
.mock-sns{display:block;padding:12px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--paper);}
.mock-sns.line{background:#06c755;}
.mock-sns.google{background:var(--paper);color:#3c4043;border:1px solid #dadce0;}
.mock-sns.apple{background:#000;}
.mock-sns.passkey{background:var(--navy);border:1px solid var(--green);}

/* ======================= 信頼バナー ======================= */
.trustbar{background:var(--navy);color:var(--paper);}
.trustbar-inner{max-width:var(--wrap);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-item{display:flex;align-items:center;gap:12px;}
.trust-ico{font-size:26px;flex:none;}
.trust-item b{display:block;font-size:14.5px;line-height:1.4;}
.trust-item small{display:block;color:rgba(255,255,255,.65);font-size:12px;}

/* ======================= 導入企業ロゴ ======================= */
/* **帯として面を分ける。** 上（濃紺の信頼バー）とも下（白のベネフィット）とも
   地色が違うことで、ロゴが宙に浮かず、次のセクションとの境目もできる */
.logos{padding:40px 24px 44px;text-align:center;background:var(--bg-alt);
  border-bottom:1px solid var(--line);}
.logos-label{color:var(--muted);font-size:13.5px;margin-bottom:22px;}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:900px;margin:0 auto;}
.logo-ph{width:130px;height:52px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#b7bdc7;font-weight:800;font-size:13px;letter-spacing:.1em;background:#fafbfc;}

/* ======================= ベネフィット ======================= */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.benefit-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.benefit-ico{display:flex;align-items:center;min-height:42px;margin-bottom:14px;}
.benefit-card h3{color:var(--navy);font-size:19px;margin-bottom:10px;}
.benefit-card p{color:var(--muted);font-size:14.5px;}

/* ======================= 課題 ======================= */
.prob-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.prob-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);}
.prob-h{color:var(--navy);font-size:17px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--green);display:inline-block;}
.prob-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.prob-list li{position:relative;padding-left:28px;color:var(--ink);font-size:15px;}
.prob-list li::before{content:"!";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:#ffe1e1;color:#e0483b;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;}

/* ======================= 特徴6 ======================= */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
.feat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.feat-ico{width:54px;height:54px;border-radius:14px;background:rgba(0,204,126,.12);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;}
.feat-card h3{color:var(--navy);font-size:17.5px;margin-bottom:8px;}
.feat-card p{color:var(--muted);font-size:14px;}

/* ======================= 機能01-05 ======================= */
.func-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);}
.func-row:last-child{border-bottom:0;}
.func-row.reverse .func-txt{order:2;}
.func-no{display:inline-block;font-size:44px;font-weight:900;color:rgba(0,204,126,.25);line-height:1;margin-bottom:6px;}
.func-txt h3{color:var(--navy);font-size:22px;margin-bottom:12px;}
.func-txt p{color:var(--muted);font-size:15px;}
.func-img{display:flex;justify-content:center;}
.img-ph{width:100%;min-height:220px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg-alt);display:flex;align-items:center;justify-content:center;text-align:center;color:#aeb5c0;font-size:13px;font-weight:700;line-height:1.7;}

/* ======================= データフロー ======================= */
.flow-steps{display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:44px;flex-wrap:wrap;}
.flow-step{flex:1;min-width:180px;max-width:230px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 18px;text-align:center;box-shadow:var(--shadow-sm);}
.flow-step.highlight{border-color:var(--green);background:rgba(0,204,126,.06);}
.flow-n{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--paper);align-items:center;justify-content:center;font-weight:900;margin-bottom:12px;}
.flow-step.highlight .flow-n{background:var(--green);}
.flow-step p{font-size:14px;color:var(--ink);}
.flow-arrow{display:flex;align-items:center;color:var(--green);font-size:24px;font-weight:900;}

/* ======================= 比較表 ======================= */
.table-scroll{overflow-x:auto;margin-top:40px;-webkit-overflow-scrolling:touch;}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.cmp-table th,.cmp-table td{padding:16px 20px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);}
.cmp-table thead th{background:var(--navy);color:var(--paper);font-weight:800;}
.cmp-table .th-hl{background:var(--green);}
.cmp-table td:first-child{font-weight:700;color:var(--navy);background:var(--bg-alt);}
.cmp-table .td-hl{color:var(--navy);font-weight:800;background:rgba(0,204,126,.07);}
.cmp-table tbody tr:last-child td{border-bottom:0;}

/* ======================= 導入の流れ ======================= */
.flow-list{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none;}
.flow-list li{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm);position:relative;}
.fl-n{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--paper);background:var(--green);padding:4px 12px;border-radius:999px;margin-bottom:14px;}
.flow-list h3{color:var(--navy);font-size:16.5px;margin-bottom:8px;}
.flow-list p{color:var(--muted);font-size:13.5px;}

/* ======================= 料金 ======================= */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 20px;text-align:center;box-shadow:var(--shadow-sm);}
.price-tier{color:var(--muted);font-size:13.5px;font-weight:700;margin-bottom:14px;min-height:40px;display:flex;align-items:center;justify-content:center;}
.price-amt{color:var(--navy);font-size:28px;font-weight:900;}
.price-amt span{font-size:14px;font-weight:700;color:var(--muted);margin-left:2px;}
.price-custom{font-size:20px;}
.price-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:20px;}
.price-grid+.price-note+.center{margin-top:24px;}

/* ======================= セキュリティ ======================= */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.sec-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;box-shadow:var(--shadow-sm);}
.sec-ico{font-size:34px;margin-bottom:14px;}
.sec-card h3{color:var(--navy);font-size:17px;margin-bottom:10px;}
.sec-card p{color:var(--muted);font-size:14px;}

/* ======================= 導入事例 ======================= */
.prep{color:#b7bdc7;font-weight:700;}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.case-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);}
.case-logo{width:96px;height:36px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#b7bdc7;font-weight:800;font-size:12px;letter-spacing:.1em;margin-bottom:18px;}
.case-quote{color:var(--ink);font-size:15px;font-weight:700;margin-bottom:14px;}
.case-meta{color:var(--muted);font-size:13px;}

/* ======================= FAQ ======================= */
.faq-list{margin-top:40px;display:grid;gap:12px;}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 22px;box-shadow:var(--shadow-sm);}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:700;color:var(--navy);font-size:15.5px;position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--green);font-size:24px;font-weight:400;transition:transform .2s;}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-item p{color:var(--muted);font-size:14.5px;padding:0 0 20px;}

/* ======================= 最終CTA ======================= */
.final-cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--paper);padding:80px 0;position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 0,rgba(0,204,126,.22),transparent 60%);}
.fc-head{position:relative;}
.fc-title{position:relative;font-size:clamp(24px,3.6vw,36px);font-weight:900;margin-bottom:16px;}
.fc-lead{position:relative;color:rgba(255,255,255,.8);font-size:16px;margin-bottom:0;}
.fc-form-card{position:relative;max-width:720px;margin:28px auto 0;background:var(--paper);border-radius:20px;padding:clamp(22px,4vw,38px);box-shadow:0 30px 60px rgba(0,0,0,.28);}
.fc-form-card .hs-form-frame{min-height:60px;}
.fc-alt{position:relative;color:rgba(255,255,255,.75);font-size:14px;margin-top:22px;}
.fc-alt-link{background:none;border:0;color:var(--green);font-weight:800;cursor:pointer;font-family:inherit;font-size:14px;text-decoration:underline;padding:0;}

/* ======================= フッター ======================= */
.site-footer{background:var(--navy-deep);color:var(--paper);padding:48px 0 24px;}
.ft-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;}
.ft-logo{height:32px;width:auto;}
.no-logo .ft-logo{display:none;}
.no-logo .ft-fallback{display:inline;color:var(--paper);}
.ft-desc{color:rgba(255,255,255,.6);font-size:13px;margin-top:12px;}
.ft-nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.ft-nav a,.ft-link-btn{color:rgba(255,255,255,.85);font-size:14px;font-weight:700;background:none;border:0;cursor:pointer;font-family:inherit;padding:0;}
.ft-nav a:hover,.ft-link-btn:hover{color:var(--green);}
.ft-copy{text-align:center;color:rgba(255,255,255,.45);font-size:12px;margin-top:36px;}

/* ======================= 追随型 sticky CTA（PC：右側面からスライドイン） ======================= */
/* **画面の外から滑り込ませない。** 120%も動かすと、その途中で
   ボタンが右端で切れた状態が見え、崩れているように映る。
   わずかに右へ寄せた位置から、フェードで現れる形にする */
.sticky-cta{position:fixed;right:0;top:50%;z-index:40;display:flex;
  flex-direction:column;gap:8px;
  opacity:0;transform:translate(16px,-50%);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;}
.sticky-cta.show{opacity:1;transform:translate(0,-50%);pointer-events:auto;}
.sticky-cta .btn{box-shadow:-6px 6px 20px rgba(9,34,64,.20);border-radius:12px 0 0 12px;padding:14px 22px;justify-content:flex-start;}

/* ======================= モーダル ======================= */
/* 縦に収まらない端末では、モーダル自体をスクロールさせる。
   **max-height を切らないと、画面をはみ出して送信ボタンに届かなくなる。**
   実測で 685px のモーダルに 790px の中身が入り、105px はみ出していた */
.modal{border:0;border-radius:20px;padding:0;max-width:560px;width:calc(100% - 40px);
  max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 80px rgba(9,34,64,.35);}
/* 見出しは上端に貼り付け、長いフォームでも閉じるボタンに届くようにする */
.modal-head{position:sticky;top:0;z-index:1;background:var(--paper);
  border-radius:20px 20px 0 0;padding-bottom:4px;}
.modal::backdrop{background:rgba(9,34,64,.55);backdrop-filter:blur(2px);}
.modal[open]{animation:modalIn .25s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px 0;}
.modal-title{color:var(--navy);font-size:22px;font-weight:900;}
.modal-close{background:var(--bg-alt);border:0;width:38px;height:38px;border-radius:50%;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;transition:background .15s;}
.modal-close:hover{background:#e6e9ee;}
.modal-lead{padding:8px 26px 0;color:var(--muted);font-size:14.5px;}
/* 埋め込みiframeを自作フォームに替えたので、余白の受け先もこちらへ移す。
   **モーダル直下にフォームを置くと左右の余白が消える。** */
.modal .ff{padding:18px 26px 30px;}

/* ======================= レスポンシブ ======================= */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-visual{order:-1;}
  .mock-frame{width:240px;}
  .trustbar-inner{grid-template-columns:1fr 1fr;gap:16px;}
  .benefit-grid,.feat-grid,.sec-grid,.case-grid{grid-template-columns:1fr 1fr;}
  .price-grid,.flow-list{grid-template-columns:1fr 1fr;}
  .prob-cols{grid-template-columns:1fr;}
}
/* ======================= パスキー認証の仕組み ======================= */
.passkey-fig{margin:44px auto 0;max-width:1120px;}
.passkey-fig img{width:100%;height:auto;}

/* ======================= 導入効果（実績数値バンド） ======================= */
.results{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--paper);padding:80px 0;position:relative;overflow:hidden;}
.results::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 85% 0,rgba(0,204,126,.18),transparent 60%);}
.results .wrap{position:relative;}
.eyebrow-light{color:var(--green);}
.title-light{color:var(--paper);}
.lead-light{color:rgba(255,255,255,.8);}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:44px;}
.result-item{text-align:center;padding:26px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;}
.result-num{font-size:clamp(36px,4.6vw,54px);font-weight:900;color:var(--green);line-height:1;display:inline-block;}
.result-num small{font-size:20px;font-weight:800;margin-left:2px;}
.result-item p{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.85);}
.result-note{text-align:center;color:rgba(255,255,255,.5);font-size:12px;margin-top:24px;}

/* ======================= 実素材（画像）用スタイル ======================= */
.hero-mock{width:620px;max-width:100%;height:auto;filter:drop-shadow(0 20px 44px rgba(9,34,64,.20));}
.func-img{display:flex;align-items:center;justify-content:center;}
.func-img img{max-width:100%;max-height:360px;width:auto;height:auto;}
.dataflow-fig{margin:44px auto 0;max-width:980px;}
.dataflow-fig img{width:100%;height:auto;}

@media(max-width:900px){
  .hero-mock{width:520px;}
  .func-img img{max-height:320px;}
}

@media(max-width:720px){
  .hd-nav,.hd-cta{display:none;}
  .hd-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);padding:16px 24px;border-bottom:1px solid var(--line);gap:14px;}
  .hd-burger{display:flex;}
  .section{padding:60px 0;}
  .func-row{grid-template-columns:1fr;gap:20px;}
  .func-row.reverse .func-txt{order:0;}
  .benefit-grid,.feat-grid,.sec-grid,.case-grid,.price-grid,.flow-list{grid-template-columns:1fr;}
  .flow-arrow{transform:rotate(90deg);}
  .sticky-cta{right:12px;left:12px;top:auto;bottom:12px;flex-direction:row;
    transform:translateY(12px);}
  .sticky-cta.show{transform:translateY(0);}
  .sticky-cta .btn{flex:1;border-radius:999px;justify-content:center;padding:13px 18px;box-shadow:0 8px 24px rgba(9,34,64,.22);}
}


/* 導入企業のロゴ帯（無限ループ）
   掲載可能な企業が限られるため、流し続けて数の少なさを目立たせない。
   仕組み: 同じ内容の ul を2組並べ、-100% まで動かして先頭へ戻す。
   2組あるので、戻った瞬間に見た目が変わらない */
/* 信頼バーのアイコン。絵文字と並ぶので、見た目の大きさを揃える。
   帯は濃色の背景なので、ロゴは白抜きで扱う */
.trust-ico-img{width:30px;height:30px;object-fit:contain;flex:none;
  filter:brightness(0) invert(1) opacity(.92);}

/* ベネフィットのアイコン。絵文字と並ぶので大きさを合わせる */
.benefit-ico-img{display:flex;align-items:center;justify-content:flex-start}
.benefit-ico-img img{width:42px;height:42px;object-fit:contain;border-radius:9px}

.logo-marquee{
  --speed:34s;
  position:relative;display:flex;overflow:hidden;margin-top:18px;
  /* 両端をなだらかに消す。帯が唐突に切れると作りかけに見える */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{display:flex;align-items:center;flex:none;gap:90px;
  list-style:none;margin:0;padding:0 45px;
  animation:logoScroll var(--speed) linear infinite;}
/* **li に固定幅を与えない。** 中の img は幅auto・高さ100%なので、
   li が固定幅だと flex の縮小で幅0に潰れる。高さだけ決めて幅は中身に任せる */
.logo-track li{display:flex;align-items:center;justify-content:center;flex:none;
  height:56px;}
/* **各ロゴの余白は事前に切り落としてある**（assets/clients/*.png）。
   そのうえで、正方形と横長を同じ高さにすると横長が大きく見えるため、
   比率から1枚ずつ高さを決めて、見た目の面積を揃える */
.logo-track img[src*="meetingtech"]{max-height:calc(49px * var(--logo-scale,1))}
.logo-track img[src*="realestate"]{max-height:calc(49px * var(--logo-scale,1))}
.logo-track img[src*="mediaworks"]{max-height:calc(39px * var(--logo-scale,1))}
.logo-track img[src*="tyl"]{max-height:calc(34px * var(--logo-scale,1))}
.logo-track img[src*="musou"]{max-height:calc(38px * var(--logo-scale,1))}
.logo-track img[src*="jointlab"]{max-height:calc(31px * var(--logo-scale,1))}
.logo-track img[src*="ikoistyle"]{max-height:calc(31px * var(--logo-scale,1))}
.logo-track img[src*="norg"]{max-height:calc(26px * var(--logo-scale,1));
  /* 線が太く他社より濃く出るため、この1枚だけ薄める */
  filter:grayscale(1) opacity(.5)}
/* **height:auto と max-height だけでは潰れる。** 親が flex で高さが確定
   していないため、height を先に与えてから max-height で上限を掛ける */
.logo-track img{max-width:100%;width:auto;height:100%;object-fit:contain;
  /* 白背景は画像側で透過済み。合成モードには頼らない */
  /* ロゴの色味も背景もバラバラなので、彩度を落として濃さを揃える。
     **加工しないと帯として成立しない**（1社だけ極端に目立つ） */
  filter:grayscale(1) opacity(.85);transition:filter .2s;}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
.logo-track img:hover{filter:grayscale(0) opacity(1);}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* 動きを抑える設定の利用者には流さない */
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none}
  .logo-marquee{overflow-x:auto}
}
@media(max-width:600px){
  .logo-marquee{--speed:24s;--logo-scale:.78}
  .logo-track{gap:56px;padding:0 30px}
  .logo-track li{height:44px}
}

/* ============================================================
   自作フォーム（HubSpot送信API）
   埋め込みiframeをやめたので、見た目はここで決まる
============================================================ */
/* フォームは白いカードの上に置く。親セクションが濃色で color:#fff を
   継承すると、ラベルが白背景に白文字になって消える。ここで打ち消す */
.ff{display:flex;flex-direction:column;gap:16px;color:#0f172a}
.ff .ff-label,.ff .ff-input{color:#0f172a}
.ff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ff-col2{grid-column:1 / -1}
@media(max-width:560px){.ff-grid{grid-template-columns:1fr}.ff-col2{grid-column:auto}}

.ff-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.ff-label{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.ff-req{font-size:10.5px;font-weight:700;color:#b3261e;background:#fdecea;
  border-radius:3px;padding:2px 6px;letter-spacing:.02em}

.ff-input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;
  padding:12px 14px;border:1px solid rgba(15,23,42,.18);border-radius:8px;
  background:var(--paper);color:inherit;transition:border-color .15s,box-shadow .15s}
.ff-input::placeholder{color:#9aa1ab}
.ff-input:focus{outline:none;border-color:#16b364;box-shadow:0 0 0 3px rgba(22,179,100,.16)}
/* **入力後に不正なものだけ赤くする。** 触る前から赤いと威圧的になる */
.ff-input:not(:placeholder-shown):invalid{border-color:#b3261e}
textarea.ff-input{resize:vertical;min-height:104px}

/* ハニーポット。**display:none だと一部のbotに見抜かれる**ため画面外へ送る */
.ff-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 同意はチェックボックスではなく文言で示す。**必須項目を増やすと離脱する。**
   日本法が求めるのは利用目的の通知・公表であって、明示的な同意の取得ではない */
.ff-note{margin:0;font-size:12px;line-height:1.7;color:#6b7280;text-align:center}
.ff-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.ff-submit{font:inherit;font-size:15.5px;font-weight:700;color:var(--paper);background:#16b364;
  border:0;border-radius:999px;padding:15px 28px;cursor:pointer;
  transition:background .15s,transform .12s}
.ff-submit:hover{background:#129b55}
.ff-submit:active{transform:translateY(1px)}
.ff-submit:disabled{background:#9fd8bb;cursor:default;transform:none}

.hs-msg{margin:0;font-size:13.5px;line-height:1.7;min-height:1.2em}
.hs-msg.is-ok{color:#0f7b4f}
.hs-msg.is-error{color:#b3261e}

/* モーダル内では余白を詰める */
.modal .ff{gap:14px}
/* モーダルは幅が狭い。2列だと入力欄が窮屈になるため1列に落とす */
@media(max-width:620px){.modal .ff-grid{grid-template-columns:1fr}}

/* ============================================================
   コラム（一覧・詳細）
   microCMS から tools/build-columns.py で生成する
   ============================================================ */

/* ---- 共通：ページ見出し ---- */
.col-head{background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding:52px 24px 44px;text-align:center;}
.col-head h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--navy);
  margin:0;line-height:1.4;}
.col-head p{color:var(--muted);margin:14px 0 0;font-size:15px;}

/* パンくず。階層が分かると、記事から他へ回遊しやすい */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:16px 24px;font-size:13px;
  color:var(--muted);}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--green);}
.crumbs span{margin:0 8px;opacity:.5;}

/* ---- 一覧 ---- */
.col-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:36px auto 8px;max-width:var(--wrap);padding:0 24px;}
.col-filter button{border:1.5px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:.15s;font-family:inherit;}
.col-filter button:hover{border-color:var(--green);color:var(--green);}
.col-filter button.is-on{background:var(--navy);border-color:var(--navy);color:var(--paper);}

.col-list{max-width:var(--wrap);margin:0 auto;padding:28px 24px 80px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.col-card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  padding:22px;text-decoration:none;color:inherit;transition:.18s;}
/* アイキャッチ。**比率を固定する。** 画像ごとに高さが違うと、
   カードの高さが揃わず一覧がガタつく。
   カードの余白ぶん外へ広げて、上辺いっぱいに敷く。
   **子要素の margin では余白を作らない** — 後続の
   `.col-card p{margin:0}` に打ち消され、文字が端に貼りつく */
/* カードは縦方向の flex なので、**flex:none を付けないと縮む**
   （width の指定より flex の縮小が優先される） */
.col-thumb{flex:none;width:calc(100% + 44px);max-width:none;
  margin:-22px -22px 18px;
  aspect-ratio:1200/630;object-fit:cover;display:block;background:var(--navy);}
.col-card:hover{border-color:var(--green);transform:translateY(-2px);
  box-shadow:var(--shadow-sm);}
.col-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
/* カテゴリは色で見分ける。文字だけだと一覧で拾いにくい */
.col-cat{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;
  letter-spacing:.02em;white-space:nowrap;}
.col-cat[data-c="social-login"]{background:#e6f9f1;color:#00885a;}
.col-cat[data-c="line"]{background:#e8f7e9;color:#2c8a35;}
.col-cat[data-c="passkey"]{background:#eef1fb;color:#3b4fa8;}
.col-cat[data-c="news"]{background:#f4f2ec;color:#8a7038;}
.col-date{font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.col-card h2{font-size:16px;font-weight:800;color:var(--navy);line-height:1.6;
  margin:0 0 10px;}
.col-card p{font-size:13.5px;color:var(--muted);line-height:1.8;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.col-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;}

/* ---- 詳細 ---- */
.col-article{max-width:800px;margin:0 auto;padding:0 24px 72px;}
.col-article-head{padding:8px 0 28px;border-bottom:1px solid var(--line);
  margin-bottom:36px;}
.col-article-head h1{font-size:clamp(23px,3.2vw,32px);font-weight:800;
  color:var(--navy);line-height:1.5;margin:14px 0 0;}
/* リード文。結論を先に示す。AI検索はここを引用しやすい */
.col-lead{background:var(--bg-alt);border:1px solid var(--line);
  border-radius:10px;padding:20px 22px;margin:26px 0 0;
  font-size:14.5px;line-height:1.9;color:var(--ink);}

.col-body{font-size:15.5px;line-height:2;color:var(--ink);}
.col-body h2{font-size:21px;font-weight:800;color:var(--navy);
  margin:56px 0 18px;padding-bottom:12px;border-bottom:2px solid var(--line);
  line-height:1.5;}
.col-body h3{font-size:17.5px;font-weight:800;color:var(--navy);
  margin:38px 0 14px;line-height:1.6;}
.col-body h4{font-size:15.5px;font-weight:800;color:var(--ink);margin:28px 0 10px;}
.col-body p{margin:0 0 22px;}
.col-body a{color:var(--green);}
.col-body ul,.col-body ol{margin:0 0 22px;padding-left:1.4em;}
.col-body li{margin-bottom:8px;}
.col-body img{max-width:100%;height:auto;border-radius:10px;margin:8px 0 24px;}
.col-body strong{font-weight:800;color:var(--navy);}
/* 表は幅が足りないと崩れる。**枠内で横スクロールさせる** */
.col-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px;}
.col-body th,.col-body td{border:1px solid var(--line);padding:11px 14px;
  text-align:left;vertical-align:top;}
.col-body th{background:var(--bg-alt);font-weight:800;color:var(--navy);}
.col-body blockquote{border-left:3px solid var(--line);margin:0 0 22px;
  padding:4px 0 4px 18px;color:var(--muted);}

/* ---- 記事末尾のCTA ---- */
.col-cta{background:var(--navy);border-radius:var(--radius);color:var(--paper);
  padding:34px 32px;margin:56px 0 0;text-align:center;}
.col-cta h2{font-size:19px;font-weight:800;margin:0 0 10px;color:var(--paper);
  border:0;padding:0;}
.col-cta p{font-size:14px;color:rgba(255,255,255,.8);margin:0 0 22px;line-height:1.9;}
.col-cta .hero-actions{justify-content:center;margin-top:0;}

/* ---- 関連記事 ---- */
.col-related{background:var(--bg-alt);border-top:1px solid var(--line);
  padding:56px 24px 72px;}
.col-related-inner{max-width:var(--wrap);margin:0 auto;}
.col-related h2{font-size:17px;font-weight:800;color:var(--navy);
  margin:0 0 22px;text-align:center;}
.col-related .col-list{padding:0;}

/* ---- トップページの「最新コラム」 ---- */
.top-columns .col-list{padding:0;margin-top:36px;}
/* **セクションの地色と同じにしない。** 枠も影も無いと、カードが
   背景に溶けて「区切りのない文字の塊」に見える */
.top-columns .col-card{background:var(--paper);border-color:var(--line);
  box-shadow:var(--shadow-sm);}
.top-columns .col-card:hover{border-color:var(--green);box-shadow:var(--shadow);}
.col-more{text-align:center;margin-top:34px;}

@media(max-width:900px){
  .col-list{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .col-list{grid-template-columns:1fr;}
  .col-body h2{font-size:19px;margin-top:44px;}
  .col-cta{padding:28px 20px;}
}

/* ---- 記事末尾の資料請求フォーム ---- */
/* **読み終えた位置にフォームを置く。** モーダルを開かせる一手間で人は抜ける */
.col-form{background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius);padding:38px 34px 32px;margin:60px 0 0;}
.col-form-head{text-align:center;margin-bottom:28px;}
.col-form-head .eyebrow{margin-bottom:8px;}
.col-form-head h2{font-size:19px;font-weight:800;color:var(--navy);
  margin:0 0 12px;border:0;padding:0;line-height:1.6;}
.col-form-head p{font-size:14px;color:var(--muted);margin:0;line-height:1.9;}
/* 記事本文の中なので、フォームは白地に載せて領域を分ける */
.col-form .ff{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px 22px;}
.col-form-sub{text-align:center;font-size:13.5px;color:var(--muted);
  margin:20px 0 0;}
/* 文中のボタンを、リンクと同じ見た目にする */
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--green);
  font-weight:700;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;}
.lnk:hover{opacity:.75;}

@media(max-width:640px){
  .col-form{padding:28px 18px 24px;}
  .col-form .ff{padding:20px 16px 18px;}
}

/* ---- 記事本文の図版 ---- */
.col-fig{margin:26px 0 30px;}
.col-fig img{width:100%;height:auto;border:1px solid var(--line);
  border-radius:10px;display:block;background:var(--paper);}
/* 縦長の素材（スマホのモックアップ等）が本文を占領しないよう上限を置く */
.col-fig img[src*="hero-mock"],.col-fig img[src*="func-02"],
.col-fig img[src*="func-03"]{max-width:420px;margin:0 auto;border:0;}
.col-fig figcaption{font-size:13px;color:var(--muted);margin-top:10px;
  line-height:1.8;text-align:center;}

/* ============================================================
   中間CTA（機能のあと・導入の流れのあと）
   **読み進めた途中で、資料請求への導線を置く。**
   最後まで読む人だけが問い合わせられる作りだと、検討段階で離れる
   ============================================================ */
.mid-cta{background:var(--navy);color:var(--paper);padding:44px 0;}
.mid-cta-inner{display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;}
.mid-cta-txt{flex:1 1 420px;}
.mid-cta-lead{color:var(--green);font-weight:800;letter-spacing:.14em;
  font-size:12px;margin:0 0 10px;}
.mid-cta h2{font-size:clamp(19px,2.4vw,24px);font-weight:800;color:var(--paper);
  margin:0;line-height:1.5;letter-spacing:.01em;}
.mid-cta-note{font-size:13.5px;color:rgba(255,255,255,.72);margin:12px 0 0;
  line-height:1.9;}
/* ボタンは縮めない。文章が長いときに折り返して潰れるのを防ぐ */
.mid-cta-btns{display:flex;gap:12px;flex:none;flex-wrap:wrap;}

@media(max-width:820px){
  .mid-cta{padding:36px 0;}
  .mid-cta-inner{flex-direction:column;align-items:flex-start;gap:24px;}
  .mid-cta-btns{width:100%;}
  .mid-cta-btns .btn{flex:1;justify-content:center;}
}

/* ---- ヒーローの料金 ---- */
/* **競合との差が最も出るのは料金。** ページ下部の料金表まで読まないと
   分からない状態にしない */
/* **片側だけ太い罫は使わない。** 全周のヘアラインで囲い、
   強調は見出し脇の小さな面で受ける */
.hero-price{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;
  gap:0 10px;margin:26px 0 0;padding:16px 20px 16px 22px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);}
.hero-price::before{content:"";position:absolute;left:0;top:20px;
  width:3px;height:22px;background:var(--green);border-radius:0 2px 2px 0;}
.hero-price-amt{font-size:clamp(24px,3vw,30px);font-weight:900;color:var(--navy);
  letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1.2;}
.hero-price-yen{font-size:.62em;margin-left:2px;}
.hero-price-tail{font-size:16px;font-weight:800;color:var(--navy);margin-left:-6px;}
.hero-price-note{flex:1 1 100%;font-size:13px;color:var(--muted);
  line-height:1.8;margin-top:6px;}

@media(max-width:560px){
  .hero-price{padding:14px 16px;}
}

/* ============================================================
   アイコン（Lucide・ISC）
   **絵文字を使わない。** 端末ごとに字形が変わり、線の太さも揃わない。
   色は currentColor で親から受ける
   ============================================================ */
.ico{width:1em;height:1em;display:block;flex:none;}
/* 濃紺の帯の上。線画なので、白のままだと硬い */
.trust-ico .ico,.trust-ico.ico{width:26px;height:26px;color:var(--green);}
.benefit-ico .ico,.benefit-ico.ico{width:34px;height:34px;color:var(--green);}
.feat-ico .ico,.feat-ico.ico{width:28px;height:28px;color:var(--green);}
.sec-ico .ico,.sec-ico.ico{width:28px;height:28px;color:var(--green);}

/* 出典の注記。**数字だけ置くと捏造と区別がつかない。**
   本文の流れを止めない大きさで、直後に添える */
.src{font-size:.78em;color:var(--muted);font-weight:400;white-space:nowrap;}
/* ボタン内に並べるアイコン。文字と同じ高さに揃える */
.ico-inline{width:16px;height:16px;margin-right:7px;}

/* ============================================================
   スマホでの詰め（iPhone 17 相当・幅393px で確認）
   **同じ余白のまま縦に積むと、1画面に何も収まらない。**
   PCで効く余白は、スマホでは長すぎる
   ============================================================ */
@media(max-width:560px){
  /* ---- ファーストビュー ---- */
  .hero-inner{padding:44px 20px 52px;gap:28px;}
  .hero-title{font-size:29px;line-height:1.34;}
  .hero-lead{margin-top:16px;font-size:15px;line-height:1.85;}
  .hero-points{margin-top:18px;gap:8px;}
  .hero-points li{font-size:14px;}
  .hero-price{margin-top:20px;padding:14px 16px 14px 18px;}
  .hero-price-note{font-size:12.5px;margin-top:4px;}
  .hero-actions{margin-top:22px;gap:10px;}
  /* ボタンは縦に積んで、幅いっぱいに。指で押しやすくする */
  .hero-actions .btn{width:100%;justify-content:center;}
  .hero-note{margin-top:12px;font-size:12.5px;}
  /* 画像が画面の6割を占めていた。文章を読ませたいので控えめに */
  .hero-mock{width:290px;}

  /* ---- 中間CTA ---- */
  .mid-cta{padding:30px 0;}
  .mid-cta-inner{gap:18px;}
  /* **flex-basis の 420px が、縦積みになった途端に「高さ」として効く。**
     横並び前提の指定を、そのまま縦に持ち込まない */
  .mid-cta-txt{flex:none;}
  .mid-cta h2{font-size:19px;line-height:1.55;}
  .mid-cta-note{font-size:13px;margin-top:10px;line-height:1.85;}
  .mid-cta-btns{width:100%;flex-direction:column;gap:10px;}
  .mid-cta-btns .btn{width:100%;justify-content:center;}

  /* ---- セクション全体 ---- */
  .section{padding:52px 0;}
  .section.section-wide{padding:64px 0;}
  .section.section-tight{padding:40px 0;}
  .sec-title{font-size:22px;line-height:1.5;}
  .sec-lead{font-size:14px;margin-top:12px;}
}