/* top-new-2607 : TOKIUM サイトTOP 本文CSS（納品データ 2026-07-30）
   - 全ルールを .ntop-wrapper 配下にスコープ（他ページ非干渉）
   - font-family は出力しない（テーマ書体を継承）／裸セレクタ(*,html,body,:root,.page)も .ntop-wrapper へ集約
   - 元: 文言エディタの部屋の最終HTML（さとけいさんの文言・計測タグ入り）を機械変換 */

/* ============================================================
   TOKIUM 経理AIエージェント サービスサイトTOP LP
   PC専用 / 1440px 固定幅 (Figma 14512-11699 準拠)
   ============================================================ */

.ntop-wrapper{
  --green:#008D97;
  --light-green:#00CC99;
  --black:#191414;
  --text:#222229;
  --note:rgba(34,34,41,.6);   /* 注釈共通色 = #222229の60% */
  --orange:#F98938;
  --white:#FFFFFF;
  --gray:#F6F6F6;
  --pale-blue:#EDF7F8;
  --muted:#8C8989;
  --line:#D1D0D0;
  --card-line:#D1D0D0;
  --tag-bg:#E2E2E2;
  --tag-text:#757272;
  --font:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif;
  /* 導入事例マーキー: カード幅+gap(=1枚分の送り幅) と 1セット(4枚)幅。SPで上書きする */
  --case-step:467px;   /* 430 + 37 */
  --case-set:1868px;   /* 467 × 4 */
}

.ntop-wrapper,
.ntop-wrapper *{margin:0;padding:0;box-sizing:border-box}

.ntop-wrapper{
  background:#FFFFFF;           /* 1440幅外側の余白（白） */
}
/* PC設計は固定幅(1100〜1103px)。769px以上ではレイアウトを崩さず横スクロールさせる（SPブロックで0に戻す） */
.ntop-wrapper{min-width:1140px}
.ntop-wrapper{
  
  color:var(--text);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 固定1440幅・センタリング */
.ntop-wrapper{
  width:100%;                  /* 全幅：色付きセクションの背景をウィンドウ左右端まで伸ばす。中身は各ブロックで中央寄せ */
  margin:0 auto;
  background:var(--white);
  overflow-x:clip;             /* 横スクロール防止（sticky動作のためclip。hiddenだとスクロールコンテナ化しsticky無効） */
}

/* 共通コンテンツ幅（左右170px） */
.ntop-wrapper .container{
  width:1100px;
  margin:0 auto;
}

.ntop-wrapper a{color:inherit;text-decoration:none}
.ntop-wrapper img{display:block;max-width:100%}
.ntop-wrapper .sp-br{display:none}        /* SP専用改行(768px以下でのみ有効化) */
.ntop-wrapper .sp-menu-btn{display:none}  /* SP専用ハンバーガー */

/* ============ ヘッダー ============ */
.ntop-wrapper .header{
  height:78px;
  width:1440px;
  margin:0 auto;
  background:var(--white);
  display:flex;
  align-items:center;
  padding:0 22px 0 24px;
  border-bottom:1px solid #F0F0F0;
}
.ntop-wrapper .header__logo{height:28px;width:auto}
.ntop-wrapper .header__logo svg,
.ntop-wrapper .header__logo img{height:28px;width:auto;display:block}
.ntop-wrapper .gnav{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:64px;
}
.ntop-wrapper .gnav__item{
  display:flex;align-items:center;gap:4px;
  font-size:14px;font-weight:500;color:var(--black);
  cursor:pointer;white-space:nowrap;
}
.ntop-wrapper .gnav__item .chev{width:9px;height:9px;opacity:.85}
/* サービス一覧ドロップダウン（暫定・本番ヘッダーで差し替え予定） */
.ntop-wrapper .gnav__item--dd{position:relative}
.ntop-wrapper .gnav__item--dd::before{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:22px}  /* hoverブリッジ */
.ntop-wrapper .gnav__dd{
  position:absolute;left:-18px;top:calc(100% + 20px);z-index:300;
  min-width:188px;padding:8px 0;
  background:var(--white);border:1px solid #EBEBEB;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.ntop-wrapper .gnav__item--dd:hover .gnav__dd{opacity:1;visibility:visible;transform:none}
.ntop-wrapper .gnav__dd a{
  display:block;padding:11px 20px;
  font-size:14px;font-weight:500;color:var(--black);white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.ntop-wrapper .gnav__dd a:hover{background:#F2F7F7;color:var(--green)}
.ntop-wrapper .header__right{
  margin-left:auto;
  display:flex;align-items:center;gap:16px;
}
.ntop-wrapper .header__login{font-size:15px;font-weight:500;color:var(--black);cursor:pointer}
.ntop-wrapper .btn-sm{
  min-width:80px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:16px;
  font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;
}
.ntop-wrapper .btn-sm--orange{background:var(--orange);color:var(--white)}
.ntop-wrapper .btn-sm--ghost{background:var(--white);color:var(--black);border:1px solid #B2B7B8}

/* ============ ヒーロー ============ */
.ntop-wrapper .hero{
  width:1103px;
  margin:0 auto;
  padding-top:44px;
  display:flex;flex-direction:column;
  position:relative;
}
/* 背景: ドットフィールド（dots-fade.svg=26px幅の1列タイルを横リピート）。
   左右はウインドウ幅に追従、上下はアニメ枠より100px大きい。上下端ほどドット径が小さい */
.ntop-wrapper .hero::before{
  content:"";position:absolute;z-index:0;
  left:calc(50% - 50vw);width:100vw;top:179px;height:784px;
  background:url(../images/top-new-2607/deco-dots.svg) center top/16px 784px repeat-x;
  pointer-events:none;
}
/* ドット層より通常コンテンツを前面に */
.ntop-wrapper .hero>div{position:relative;z-index:1}
/* FV右のトキうむん（両手下げポーズ・ふわふわ浮遊）
   画像600×600中の実体bbox(x72-502,y8-586)から算出: 図の高さ132px・影の真上センター合わせ */
.ntop-wrapper .hero__chara{
  position:absolute;right:-15px;top:95px;
  width:137px;height:auto;object-fit:contain;
  pointer-events:none;user-select:none;
  animation:chara-float 3.8s ease-in-out infinite;
  will-change:transform;
}
/* キャラ足元の影。下辺はCTAボタン下辺(hero相対294px)に一致。浮遊と連動：下降時100%・上昇時70%濃度 */
.ntop-wrapper .hero__chara-shadow{
  position:absolute;right:20px;top:243px;
  width:73px;height:6px;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(105,112,112,.55) 0%, rgba(105,112,112,0) 72%);
  animation:chara-shadow 3.8s ease-in-out infinite;
}
@keyframes chara-float{
  0%,100%{transform:translateY(0) rotate(-.75deg)}
  50%{transform:translateY(-6px) rotate(.75deg)}
}
@keyframes chara-shadow{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
@media (prefers-reduced-motion: reduce){
  .ntop-wrapper .hero__chara,
.ntop-wrapper .hero__chara-shadow{animation:none}
  .ntop-wrapper .btn-pill::after,
.ntop-wrapper .btn-order::after{animation:none}
}
.ntop-wrapper .hero__head{display:flex;flex-direction:column;gap:5px}
/* 「経理AIエージェント TOKIUM」＋キャッチコピーのセットのみ2px上へ（リード文以降の位置は据え置き） */
.ntop-wrapper .hero__eyebrow{margin-top:-2px}
.ntop-wrapper .hero__sub{margin-top:2px}
.ntop-wrapper .hero__eyebrow{display:block;font-size:20px;font-weight:500;color:var(--black);line-height:1.2;margin-bottom:5px}   /* h1内へ移設(SEO対応)に伴い、旧.hero__headのflex gap:5pxを代替 */
/* 行間0.85倍(1.3→1.105)。
   paltは仮名だけ強く詰まり行ごとに字間が不揃いになるため解除し、全文字を等間隔に。
   約物(引用符・句読点)のみ .pt でpaltを効かせて詰める */
.ntop-wrapper .hero__title{
  font-size:54px;font-weight:700;color:var(--black);line-height:1.105;
  font-feature-settings:normal;letter-spacing:-1px;
}
.ntop-wrapper .hero__title .pt{font-feature-settings:"palt" 1}
.ntop-wrapper .hero__sub{font-size:16px;font-weight:400;color:var(--black);line-height:1.6}

/* 見出し〜CTAはひと塊に（間を詰める）、CTA〜アニメは広めに */
/* リード文下の業務別タグ (Figma 15229:18048) */
.ntop-wrapper .hero__tags{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px}
.ntop-wrapper .hero__tag{
  width:100px;height:31px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#EFF1F1;border:1px solid #BAB9B9;border-radius:8.584px;
  font-size:13px;font-weight:400;color:var(--text);line-height:1.19;white-space:nowrap;
}
/* 上余白: リード文は行ボックスに約5.4pxの余白を含むため、実体同士の下余白は25pxで見た目が揃う */
.ntop-wrapper .hero__cta{display:flex;align-items:center;gap:24px;margin-top:25px;margin-bottom:44px}
.ntop-wrapper .hero .topics{margin-top:32px}

/* 丸角大ボタン (資料請求 / 対応業務を見る) */
.ntop-wrapper .btn-pill{
  position:relative;overflow:hidden;
  width:240px;height:54px;border-radius:30px;   /* 「料金表を受け取る」+右固定矢印が収まる幅に統一 */
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;text-align:center;cursor:pointer;white-space:nowrap;
  isolation:isolate;
}
.ntop-wrapper .btn-pill__label{position:relative;z-index:1;transition:color .35s ease}
.ntop-wrapper .btn-pill::before{
  content:"";position:absolute;inset:0;z-index:0;
  transform:translateX(-101%);
  transition:transform .35s ease;
}
.ntop-wrapper .btn-pill:hover::before{transform:translateX(0)}
/* 共通: ホバー時にグラデが1回走る演出 */
.ntop-wrapper .btn-pill::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:0;
  transform:translateX(-170%) skewX(-18deg);
  pointer-events:none;
}
.ntop-wrapper .btn-pill:hover::after{
  animation:cta-shine .9s ease-out;
}
@keyframes cta-shine{
  0%{transform:translateX(-170%) skewX(-18deg)}
  100%{transform:translateX(300%) skewX(-18deg)}
}
.ntop-wrapper .btn-pill--fill{background:var(--orange);color:var(--white);font-weight:700}
.ntop-wrapper .btn-pill--fill::before{background:#D4730F}
.ntop-wrapper .btn-pill--fill::after,
.ntop-wrapper .btn-pill--orange::after{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
}
.ntop-wrapper .btn-pill--outline{background:var(--white);color:var(--green);border:1px solid var(--green);font-weight:500}
/* 料金表ボタン: ホバーは薄いライトグリーンのグラデ走査のみ（塗り反転・文字色反転はしない） */
.ntop-wrapper .btn-pill--outline::before{content:none}
.ntop-wrapper .btn-pill--outline::after,
.ntop-wrapper .btn-pill--white::after{
  background:linear-gradient(90deg, rgba(0,141,151,0) 0%, rgba(0,141,151,.14) 50%, rgba(0,141,151,0) 100%);
}

/* FVアニメ枠 (Rectangle 8553 : 1103×584) */
.ntop-wrapper .hero__movie{
  width:1103px;height:584px;
  border-radius:12px;overflow:hidden;
  background:#F6F6F6;
}
.ntop-wrapper .hero__movie iframe{width:1103px;height:584px;border:0;display:block}
.ntop-wrapper .hero__movie video{width:100%;height:100%;object-fit:contain;border:0;display:block}   /* SP用mp4。containで絶対に切らない（枠の高さはJSが動画比率に合わせる） */

/* 4トピック帯 */
.ntop-wrapper .topics{display:flex;gap:49px}
.ntop-wrapper .topic{width:238px;display:flex;flex-direction:column;gap:10px}
.ntop-wrapper .topic__t{font-size:18px;font-weight:500;color:#000;line-height:1.4}
.ntop-wrapper .topic__d{font-size:14.5px;font-weight:300;color:#000;line-height:1.7}

/* ============ 区切り線 ============ */
.ntop-wrapper .hero-divider{
  width:793px;height:1px;background:var(--line);
  margin:48px auto 0;
}

/* ============ ロゴ帯（マーキー） ============ */
.ntop-wrapper .logos{
  width:100%;
  max-width:1440px;
  margin:48px auto 0;
  padding-top:0;
  overflow:hidden;
}
.ntop-wrapper .logos__head{
  text-align:center;
  line-height:1.7;
  margin-bottom:14px;
}
.ntop-wrapper .logos__head .lead{font-size:20px;font-weight:500;color:#000}
.ntop-wrapper .logos__head .num{font-size:32px;font-weight:700;color:var(--green)}
.ntop-wrapper .logos__head .unit-g{font-size:28px;font-weight:500;color:var(--green)}
.ntop-wrapper .logos__head .num-b{font-size:32px;font-weight:500;color:#000}
.ntop-wrapper .logos__head .unit-b{font-size:28px;font-weight:500;color:#000}
.ntop-wrapper .logos__head .small{font-size:16px;font-weight:400;color:#000}
/* （上場企業250社以上）を70%サイズに縮小・ベースライン整合 */
.ntop-wrapper .logos__head .paren{white-space:nowrap;vertical-align:baseline}
.ntop-wrapper .logos__head .paren .small{font-size:11.2px}
.ntop-wrapper .logos__head .paren .num-b{font-size:22.4px}
.ntop-wrapper .logos__head .paren .unit-b{font-size:19.6px}
.ntop-wrapper .logos__head .note-inline{font-size:12px;font-weight:400;color:var(--note);white-space:nowrap}

.ntop-wrapper .marquee{
  width:calc(100% - 56px);max-width:1100px;overflow:hidden;position:relative;
  margin:16px auto 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
}
.ntop-wrapper .marquee__track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 70s linear infinite;
}
.ntop-wrapper .marquee__track .logo-item{
  height:52px;width:auto;flex:none;
  margin:0 30px;
  object-fit:contain;
  pointer-events:none;user-select:none;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============ セクション共通 ============ */
.ntop-wrapper .section{padding-top:80px}
.ntop-wrapper .sec-title{display:flex;flex-direction:column;gap:8px;margin-bottom:40px}
.ntop-wrapper .sec-title .eyebrow{font-size:20px;font-weight:300;color:var(--muted);letter-spacing:1px;line-height:1}
.ntop-wrapper .sec-title h2{font-size:32px;font-weight:600;color:var(--text);letter-spacing:1.6px;line-height:1.4}
.ntop-wrapper .sec-title .lead{font-size:16px;font-weight:400;color:var(--text);letter-spacing:.8px;line-height:1.7}

/* ============ Coverage 対応できる業務 ============ */
.ntop-wrapper .cov-grid{
  display:grid;grid-template-columns:532px 532px;gap:34px;
}
.ntop-wrapper .cov-card{
  width:532px;height:440px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F1F1 100%);
  border-radius:4px;
  padding:16px 24px 0;
  cursor:pointer;
  transition:background .25s ease;
  position:relative;overflow:hidden;
}
/* ホバー: カード全体（画像含む）に極薄ティールのオーバーレイ＋右上アイコンを緑の四角＋白矢印に */
.ntop-wrapper .cov-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(0,141,151,.05);
  opacity:0;transition:opacity .25s ease;
  border-radius:4px;pointer-events:none;
}
.ntop-wrapper .cov-card:hover::after{opacity:1}
.ntop-wrapper .cov-card__icon{transition:background .25s ease;border-radius:3px}
.ntop-wrapper .cov-card__icon svg path{transition:stroke .25s ease}
.ntop-wrapper .cov-card:hover .cov-card__icon{background:var(--green)}
.ntop-wrapper .cov-card:hover .cov-card__icon svg path{stroke:#fff}
.ntop-wrapper .cov-card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:25px;margin-bottom:8px;
}
.ntop-wrapper .cov-card__ttl{display:flex;align-items:center;gap:10px}
.ntop-wrapper .cov-card__mark{width:56px;height:56px;flex:none;display:block}
.ntop-wrapper .cov-card__name{font-size:28px;font-weight:500;color:var(--green);letter-spacing:1.4px;line-height:1.7}
/* カード下部いっぱいに敷くプロダクトビジュアル（Figma 2x書き出し。上段1059×523・下段1061×549）
   ※フェードマスクはUI・キャラの上端までボケるため廃止。
     代わりにカードのグラデを「画像上端の焼き込み色(実測)」へ正確に接続して継ぎ目を消す */
.ntop-wrapper .cov-card__img{
  position:absolute;left:0;right:0;bottom:0;
  aspect-ratio:1059/523;
  background:center/cover no-repeat;
  border-radius:0 0 4px 4px;
  pointer-events:none;
}
/* 画像上端色: cov_1=#F5F5F5 / cov_2=#F6F6F6 (top40.2%) / cov_3・cov_4=#F9F9F9 (top37.4%) */
.ntop-wrapper .cov-grid .cov-card:nth-child(1){background:linear-gradient(180deg,#FFF 0%,#F5F5F5 40.2%,#EFEFEF 100%)}
.ntop-wrapper .cov-grid .cov-card:nth-child(2){background:linear-gradient(180deg,#FFF 0%,#F6F6F6 40.2%,#F0F0F0 100%)}
.ntop-wrapper .cov-grid .cov-card:nth-child(3){background:linear-gradient(180deg,#FFF 0%,#F9F9F9 37.4%,#F1F1F1 100%)}
.ntop-wrapper .cov-grid .cov-card:nth-child(4){background:linear-gradient(180deg,#FFF 0%,#F9F9F9 37.4%,#F1F1F1 100%)}
.ntop-wrapper .cov-card__img--tall{aspect-ratio:1061/549}
.ntop-wrapper .cov-card__icon{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center}
.ntop-wrapper .cov-card__cols{display:flex;gap:20px}
.ntop-wrapper .cov-card__cols ul{list-style:none}
.ntop-wrapper .cov-card__cols li{
  font-size:15px;color:#000;line-height:1.7;letter-spacing:.75px;white-space:nowrap;
}
.ntop-wrapper .cov-card__cols li::before{content:"▪";color:var(--green);margin-right:4px;font-size:11px}

/* オーダーメイド帯 */
.ntop-wrapper .cov-order{
  margin-top:34px;
  width:1100px;height:319px;
  background:var(--white);border:1px solid var(--card-line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  padding:24px 56px;
  position:relative;
}
/* ホバー: 導入事例カードと同じ #F6F6F6 乗算 */
.ntop-wrapper .cov-order::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:#F6F6F6;mix-blend-mode:multiply;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
  border-radius:4px;
}
.ntop-wrapper .cov-order:hover::after{opacity:1}
.ntop-wrapper .cov-order__inner{display:flex;align-items:center;gap:40px}
.ntop-wrapper .cov-order__text{width:551px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.ntop-wrapper .cov-order__eyebrow{font-size:16px;font-weight:600;color:var(--green);line-height:1.7}
.ntop-wrapper .cov-order__title{font-size:24px;font-weight:400;color:#000;margin-top:-8px}
.ntop-wrapper .cov-order__desc{font-size:16px;font-weight:400;color:#000;line-height:1.7}
.ntop-wrapper .cov-order__img{
  width:390px;height:219.375px;background:#D9D9D9;flex:none;
  border-radius:4px;overflow:hidden;display:block;
}
.ntop-wrapper .cov-order__video{width:100%;height:100%;object-fit:cover;display:block;border:0;pointer-events:none}
.ntop-wrapper .btn-order{
  position:relative;overflow:hidden;
  background:var(--green);color:var(--white);font-weight:700;font-size:16px;
  width:280px;height:48px;border-radius:24px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.ntop-wrapper .btn-order__label{position:relative;z-index:1}
.ntop-wrapper .btn-order .cta-arrow{color:var(--white)}
.ntop-wrapper .btn-order:hover .cta-arrow{transform:translateY(-50%) translateX(4px)}
/* ホバー: 料金表ボタンと同じ「グラデが1回走る」演出（ティール地で見えるようライトグリーン寄りの光沢） */
.ntop-wrapper .btn-order::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;
  background:linear-gradient(90deg, rgba(223,244,245,0) 0%, rgba(223,244,245,.45) 50%, rgba(223,244,245,0) 100%);
  transform:translateX(-170%) skewX(-18deg);
  pointer-events:none;
}
.ntop-wrapper .btn-order:hover::after{animation:cta-shine .9s ease-out}

/* ============ CTA再掲 ============ */
.ntop-wrapper .cta-recap{
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding-top:80px;
}

/* ============ Use Cases 導入事例 ============ */
.ntop-wrapper .cases-wrap{position:relative}
/* ウィンドウ全幅ブリード・常時マーキー（左→右）＝カードが左右端まで見える */
.ntop-wrapper .cases-marquee{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow-x:clip;overflow-y:visible;
}
.ntop-wrapper .cases-offset{transition:transform .45s ease;will-change:transform}
.ntop-wrapper .cases-track{
  display:flex;gap:37px;width:max-content;
  animation:cases-marquee 50s linear infinite;
}
.ntop-wrapper .cases-track:hover{animation-play-state:paused}
/* 1セット幅=4枚×(430+37)=1868px(=--case-set)。-1SET→-2SETの区間を往復させ、左右に常に予備セットを残す（右→左） */
@keyframes cases-marquee{
  from{transform:translateX(calc(-1 * var(--case-set)))}
  to{transform:translateX(calc(-2 * var(--case-set)))}
}
.ntop-wrapper .case-card{
  width:430px;flex:none;background:var(--white);   /* 幅1.1倍(391→430)。文字領域343pxは維持し左右パディングで吸収 */
  border:1px solid var(--card-line);border-radius:4px;overflow:hidden;
  transition:box-shadow .25s ease;
  display:block;color:inherit;text-decoration:none;cursor:pointer;
}
/* ホバー: ドロップシャドウではなく #F6F6F6 をカード全体(写真含む)に乗算 */
.ntop-wrapper .case-card{position:relative}
.ntop-wrapper .case-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:#F6F6F6;mix-blend-mode:multiply;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.ntop-wrapper .case-card:hover::after{opacity:1}
.ntop-wrapper .case-card__img{height:258px;background:var(--tag-bg) center/cover no-repeat}  /* カード幅に比例(430×0.601) */
.ntop-wrapper .case-card__body{padding:26px 43.5px 30px}  /* 文字領域=430-87=343px(従来と同じ) */
/* ロゴ行: 左=企業ロゴ / 右=遷移アイコン(Coverageと同作法) */
.ntop-wrapper .case-card__logohead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ntop-wrapper .case-card__go{
  width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:3px;transition:background .25s ease;
}
.ntop-wrapper .case-card__go svg path{transition:stroke .25s ease}
.ntop-wrapper .case-card:hover .case-card__go{background:var(--green)}
.ntop-wrapper .case-card:hover .case-card__go svg path{stroke:#fff}
/* 企業ロゴ: 4社共通スペース(高さ56px)。ロゴごとの実寸差はimg高さで視覚等価に揃える */
.ntop-wrapper .case-card__logo{height:56px;display:flex;align-items:center}
.ntop-wrapper .case-card__logo img{display:block;width:auto}
.ntop-wrapper .case-card__logo.lg-1 img{height:46px}   /* トヨタモビリティ神奈川(横型) */
.ntop-wrapper .case-card__logo.lg-2 img{height:40px}   /* シン・コーポレーション(ワイド横型) */
.ntop-wrapper .case-card__logo.lg-5 img{height:22px}   /* ENEOSトレーディング(細身ワードマーク) */
.ntop-wrapper .case-card__logo.lg-6 img{height:30px}   /* 三好不動産(マーク+横書き) */
.ntop-wrapper .case-card__meta{font-size:14px;font-weight:400;color:#5A6062;line-height:1.5;letter-spacing:.5px}
/* 見出し2行構成: 1行目=通常、2行目=大きめ・時間テキスト(em)のみティール */
.ntop-wrapper .case-card__title{margin-top:10px;color:#000;letter-spacing:1px}
.ntop-wrapper .case-card__t1{display:block;font-size:17px;font-weight:500;line-height:1.7}
.ntop-wrapper .case-card__t2{display:block;font-size:23px;font-weight:500;line-height:1.6;margin-top:2px;letter-spacing:0}  /* 幅80%化で最長見出しが収まるよう字間のみ詰める */
.ntop-wrapper .case-card__t2 em{font-style:normal;color:var(--green);font-weight:600}  /* ティール部のみ元のウエイト維持 */
.ntop-wrapper .case-card__tags{display:flex;gap:16px;margin-top:16px}
.ntop-wrapper .tag{
  background:#EFF1F1;color:var(--tag-text);
  font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:4px;line-height:1;
}
.ntop-wrapper .case-card__hr{height:1px;background:#E2E2E2;margin:20px 0 16px}
.ntop-wrapper .case-card__service{font-size:14px;font-weight:400;color:#5A6062;line-height:1.5;letter-spacing:.5px}  /* 業種／社名(meta)と同色・同サイズ */

/* カルーセル丸ボタン */
.ntop-wrapper .carousel-btn{
  position:absolute;top:88px;   /* 画像エリア(235px)の縦中央=カード上端+117px */
  width:60px;height:60px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  z-index:2;
}
.ntop-wrapper .carousel-btn--prev{left:-36px}
.ntop-wrapper .carousel-btn--next{right:-36px}
.ntop-wrapper .carousel-btn svg{width:18px;height:18px}

/* ============ Reason 選ばれる理由 ============ */
.ntop-wrapper .reason-grid{display:grid;grid-template-columns:repeat(3,338px);gap:36px;align-items:stretch}
.ntop-wrapper .reason-card{
  width:338px;background:var(--gray);border-radius:4px;
  padding:26px 32px 33px 33px;   /* 下パディングを左右と同等に */
}
.ntop-wrapper .reason-card__inner{width:273px;display:flex;flex-direction:column;gap:15px}
.ntop-wrapper .reason-card__title{font-size:20px;font-weight:400;color:#000;line-height:1.4}
.ntop-wrapper .reason-card__num{color:var(--green);font-weight:600;line-height:1;margin-top:2px;white-space:nowrap}
.ntop-wrapper .reason-card__num .big{font-size:42px}
.ntop-wrapper .reason-card__num .u{font-size:20px}
.ntop-wrapper .reason-card__hr{height:1px;background:var(--line);width:273px}
.ntop-wrapper .reason-card__desc{font-size:16px;font-weight:400;color:#000;line-height:1.7}

/* ============ CTA矢印アイコン（資料請求 等） ============ */
/* 矢印はカプセル右端に固定配置・ラベルはカプセル全体に対してセンター */
.ntop-wrapper .cta-arrow{
  width:15px;height:auto;flex:none;z-index:1;
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  transition:transform .25s ease;
}
.ntop-wrapper .btn-pill:hover .cta-arrow{transform:translateY(-50%) translateX(4px)}
.ntop-wrapper .btn-pill--outline .cta-arrow{color:var(--green)}  /* ホバー時もティールのまま */
.ntop-wrapper .cta-arrow--sm{width:13px;right:12px}
.ntop-wrapper .btn-sm--orange{position:relative;min-width:112px}
.ntop-wrapper .btn-sm--orange:hover .cta-arrow{transform:translateY(-50%) translateX(4px)}

/* ============ Support データ化 ============ */
/* ペールブルー帯の上に白パネル1枚、その中に3列×2行（v9の構成） */
.ntop-wrapper .support-section{background:var(--pale-blue);padding-bottom:80px;margin-top:80px}   /* Reasonとの間は80px */
.ntop-wrapper .support-panel{
  background:var(--white);border-radius:12px;   /* グレー枠線なし */
  padding:48px;
}
/* 左右パディング・列間・行間をすべて48pxで統一（列は1frで残り幅を等分、画像/テキストは列いっぱいに） */
.ntop-wrapper .support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.ntop-wrapper .support-card{background:transparent;border:0;padding:0}
.ntop-wrapper .support-card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}   /* 番号とタイトルはベースライン揃え */
.ntop-wrapper .support-card__num{
  font-size:26px;font-weight:600;color:var(--green);line-height:1;flex:none;  /* 22→26 (120%) */
}
.ntop-wrapper .support-card__title{font-size:16px;font-weight:600;color:var(--text);line-height:1.5;letter-spacing:.3px;white-space:nowrap}
.ntop-wrapper .support-card__img{
  width:100%;aspect-ratio:589/295;border-radius:8px;
  background:center/cover no-repeat #F1F3F2;
}
.ntop-wrapper .support-card__desc{width:100%;font-size:14px;font-weight:400;color:#000;line-height:1.8;margin-top:16px}

/* ============ Document お役立ち情報 ============ */
.ntop-wrapper .doc-section{background:var(--pale-blue);padding:80px 0}
.ntop-wrapper .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ntop-wrapper .doc-card{background:var(--white);border-radius:10px;padding:34px 30px;text-align:center}
.ntop-wrapper .doc-card__thumb{
  width:336px;aspect-ratio:16/9;margin:0 auto;   /* 280×1.2 */
  background:#fff;border-radius:8px;
}
/* 資料カードのサムネイル（左=導入事例集 / 右=AI導入）。
   左は16:9でない素材なので contain で全体を見せる。右は16:9ちょうどなので cover */
.ntop-wrapper .doc-card__thumb--case{
  background-image:url(../images/top-new-2607/doc-card-thumb-case.png);
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
.ntop-wrapper .doc-card__thumb--ai{
  background-image:url(../images/top-new-2607/doc-card-thumb-ai.png);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.ntop-wrapper .doc-card__title{font-size:16px;font-weight:700;color:var(--text);line-height:1.6;margin-top:22px}
.ntop-wrapper .doc-dl{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  border:1px solid #C9D2D3;background:var(--white);color:#00727A;
  font-size:14px;font-weight:700;padding:12px 26px;border-radius:24px;
  cursor:pointer;transition:border-color .2s ease;
}
.ntop-wrapper .doc-dl svg{width:16px;height:16px}
.ntop-wrapper .doc-dl:hover{border-color:var(--green)}
.ntop-wrapper .doc-more{text-align:center;margin-top:32px}

/* 共通：ティール塗り「一覧を見る ›」リンク */
.ntop-wrapper .link-pill{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--white);
  font-size:14px;font-weight:700;padding:15px 52px;border-radius:24px;
  cursor:pointer;transition:background-color .2s ease;
}
.ntop-wrapper .link-pill .cta-arrow{color:var(--white)}
.ntop-wrapper .link-pill:hover .cta-arrow{transform:translateY(-50%) translateX(4px)}
.ntop-wrapper .link-pill:hover{background:#00727A}

/* ============ NEWS / Q&A 共通（左タイトルsticky＋右コンテンツ） ============ */
.ntop-wrapper .split-section{padding:80px 0}
.ntop-wrapper .split-section--qa{background:var(--gray)}
.ntop-wrapper .split-wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.ntop-wrapper .split-side{position:sticky;top:32px}
.ntop-wrapper .split-side .sec-title{margin-bottom:0}

/* NEWS 行リスト */
.ntop-wrapper .news-item{
  display:grid;grid-template-columns:92px 104px 1fr;gap:20px;align-items:center;
  padding:18px 4px;border-bottom:1px solid #E6ECEC;color:var(--text);
  transition:color .2s ease;
}
.ntop-wrapper .news-item:first-child{border-top:1px solid #E6ECEC}
.ntop-wrapper .news-item:hover{color:var(--green)}
.ntop-wrapper .news-item__date{font-size:13px;color:#5A6062}
.ntop-wrapper .news-item__cat{
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--white);
  border-radius:4px;padding:5px 0;line-height:1.3;text-align:center;
}
.ntop-wrapper .news-item__cat--pr{background:#00A5B0}
.ntop-wrapper .news-item__cat--media{background:var(--orange)}
.ntop-wrapper .news-item__title{font-size:14.5px;line-height:1.6;letter-spacing:.4px}
.ntop-wrapper .news-more{margin-top:28px}

/* Q&A アコーディオン */
.ntop-wrapper .qa-list{display:flex;flex-direction:column;gap:14px}
.ntop-wrapper .qa-item{background:var(--white);border:1px solid #E4E6E6;border-radius:12px;overflow:hidden}
.ntop-wrapper .qa-head{
  width:100%;background:var(--white);border:0;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:14px;padding:20px 22px;text-align:left;
}
.ntop-wrapper .qa-q{
  width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--white);
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;
}
.ntop-wrapper .qa-qtext{flex:1;font-size:15px;font-weight:600;color:var(--text);line-height:1.5}
.ntop-wrapper .qa-icon{
  width:26px;height:26px;border-radius:50%;background:#EDEEEE;color:var(--green);
  display:grid;place-items:center;font-size:16px;font-weight:700;flex:none;
}
.ntop-wrapper .qa-body{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#F7FAFA}
.ntop-wrapper .qa-item.open .qa-body{max-height:500px}
.ntop-wrapper .qa-inner{padding:8px 22px 22px;display:flex;gap:14px}  /* 回答ブロック全体を少し下げる */
.ntop-wrapper .qa-a{font-size:15px;font-weight:700;color:#8A9092;flex:none;line-height:2;width:26px;text-align:center;padding-top:4px}   /* Qの円と同幅にしてAのテキスト開始位置をQと揃える。回答1行目と揃うよう少し下げる */
.ntop-wrapper .qa-atext{font-size:13.5px;line-height:2;color:#33383A;padding-top:6px}  /* 1行目のベースラインをAに揃える */
.ntop-wrapper .qa-detail{
  display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--text);
  border:1px solid #C9D2D3;border-radius:999px;padding:8px 18px;transition:border-color .2s ease,color .2s ease;
}
.ntop-wrapper .qa-detail:hover{border-color:var(--green);color:var(--green)}

/* ============ クロージングCTA ============ */
.ntop-wrapper .closing-cta{background:#006E77;padding:84px 0}
.ntop-wrapper .closing-cta .container{text-align:center}
.ntop-wrapper .closing-cta__title{font-size:32px;font-weight:700;line-height:1.5;color:var(--white);letter-spacing:1px}
.ntop-wrapper .closing-cta__sub{font-size:15px;color:rgba(255,255,255,.78);margin-top:14px}
.ntop-wrapper .closing-cta__btns{display:flex;gap:20px;justify-content:center;margin-top:32px}
.ntop-wrapper .btn-pill--auto{width:auto;padding:0 34px}
.ntop-wrapper .btn-pill--white{background:var(--white);color:#00636B;font-weight:700}
.ntop-wrapper .btn-pill--white::before{background:#EDEDED}
.ntop-wrapper .btn-pill--orange{background:var(--orange);color:var(--white);font-weight:700}
.ntop-wrapper .btn-pill--orange::before{background:#D4730F}

/* 末尾余白 */
.ntop-wrapper .page__foot{height:80px}

/* ============================================================
   SP (〜768px)
   ・左右マージンは各28px（.container = calc(100% - 56px)）
   ・PCレイアウトには一切触れず、この中だけで上書きする
   ============================================================ */
@media (max-width:768px){
  /* 固定幅の解除 & 事例マーキーの送り幅をSP寸法へ */
  .ntop-wrapper{min-width:0}
  .ntop-wrapper{
    --case-step:340px;   /* 320 + 20 */
    --case-set:1360px;   /* 340 × 4 */
  }

  /* ---- 共通 ---- */
  .ntop-wrapper .container{width:calc(100% - 56px)}   /* 左右28pxマージン */
  .ntop-wrapper .section{padding-top:56px}
  .ntop-wrapper .sec-title{gap:6px;margin-bottom:24px}
  .ntop-wrapper .sec-title .eyebrow{font-size:15px;letter-spacing:.8px}
  .ntop-wrapper .sec-title h2{font-size:23px;letter-spacing:.8px;line-height:1.5}
  .ntop-wrapper .sec-title .lead{font-size:14px;letter-spacing:.4px;line-height:1.8}
  .ntop-wrapper .sec-title .lead br{display:none}     /* PC用改行を解除して自然に折り返す */
  .ntop-wrapper .btn-pill{width:208px;height:50px;font-size:15px}

  /* ---- ヘッダー: 左ロゴ + 右ハンバーガー（挙動なし・後日差し替え予定） ---- */
  .ntop-wrapper .header{width:auto;height:60px;padding:0 8px 0 16px;justify-content:space-between}
  .ntop-wrapper .gnav{display:none}
  .ntop-wrapper .header__right{display:none}
  .ntop-wrapper .header__logo,
.ntop-wrapper .header__logo img{height:24px}
  .ntop-wrapper .sp-menu-btn{
    display:block;width:48px;height:48px;flex:none;
    background:none;border:0;cursor:pointer;padding:0;
  }
  .ntop-wrapper .sp-menu-btn span{
    display:block;width:26px;height:2px;margin:6px auto;
    background:var(--black);border-radius:1px;
  }
  .ntop-wrapper .sp-br{display:inline}

  /* ---- ヒーロー ---- */
  .ntop-wrapper .hero{width:auto;margin:0 28px;padding-top:28px}
  /* ドット背景: 左右は100vw追従のまま。上下位置はJSがアニメ枠から算出（未実行時は下記の既定値） */
  .ntop-wrapper .hero::before{
    top:var(--dots-top,340px);
    height:var(--dots-h,312px);
    background-size:16px var(--dots-h,312px);
  }
  .ntop-wrapper .hero__head{gap:6px}
  .ntop-wrapper .hero__eyebrow{font-size:14px}
  .ntop-wrapper .hero__title{font-size:26px;line-height:1.4;letter-spacing:0;font-feature-settings:"palt" 1}  /* 375px幅でも1行目「あらゆる経理"作業"から、」が折り返さないサイズ(実測297px≦304px)。SPは幅制約が厳しいためpaltを維持 */
  /* リード文は右にキャラを置くぶん幅を狭めて3〜4行に */
  .ntop-wrapper .hero__sub{font-size:14px;line-height:1.8;width:calc(100% - 110px);margin-top:4px}
  /* タグ: 固定100pxだと収まらないため文字量に応じた幅で折り返す */
  .ntop-wrapper .hero__tags{gap:8px;margin-top:14px}
  .ntop-wrapper .hero__tag{width:auto;height:28px;padding:0 12px;font-size:12px}
  /* CTA2種は画面下部に固定して全ページ追従（AX VISIONと同作法）
     ※.hero>div{position:relative}より詳細度を上げるため.hero>.hero__ctaで指定 */
  .ntop-wrapper .hero>.hero__cta{
    position:fixed;left:0;right:0;bottom:14px;z-index:150;
    flex-direction:row;justify-content:center;gap:10px;
    margin:0;padding:0 16px;
  }
  .ntop-wrapper .hero__cta .btn-pill{
    width:calc(50% - 5px);max-width:190px;height:48px;
    font-size:13.5px;padding-right:14px;
    box-shadow:0 8px 26px rgba(5,5,8,.22);
  }
  .ntop-wrapper .hero__cta .btn-pill--outline{background:var(--white)}
  .ntop-wrapper .hero__cta .cta-arrow{width:12px;right:12px}
  /* 固定CTAに隠れないよう逃げ幅はページ末尾(フッター後ろ)へ。
     ラッパーに付けるとCTA帯とパンくずの間に白帯が出るため body 側に移動（このCSSはTOP専用読み込みのため影響はTOPのみ） */
  body{padding-bottom:78px}
  /* トキうむん: 0.7倍(137→96px)でリード文の右に。縦位置はJSがリード文上端から算出 */
  .ntop-wrapper .hero__chara{width:96px;right:-6px;top:var(--chara-top,150px)}
  .ntop-wrapper .hero__chara-shadow{width:51px;height:5px;right:19px;top:var(--shadow-top,252px)}
  /* FVアニメ: 左右マージン0のフルブリード。SPはmp4(828:440)を表示し、高さはJSが同比率で再設定する */
  .ntop-wrapper .hero__movie{
    width:auto;margin:24px -28px 0;
    height:calc(100vw * 440 / 828);
    border-radius:0;
  }
  /* topics: 4カラム → 縦1列 */
  .ntop-wrapper .hero .topics{margin-top:28px}
  .ntop-wrapper .topics{flex-direction:column;gap:22px}
  .ntop-wrapper .topic{width:100%;gap:6px}
  .ntop-wrapper .topic__t{font-size:16px}
  .ntop-wrapper .topic__d{font-size:14px;line-height:1.8}

  /* ---- 区切り線 ---- */
  .ntop-wrapper .hero-divider{width:auto;margin:32px 28px 0}

  /* ---- ロゴ帯 ---- */
  .ntop-wrapper .logos{width:auto;margin-top:32px}
  .ntop-wrapper .logos__head{padding:0 28px;line-height:1.6;margin-bottom:10px}
  .ntop-wrapper .logos__head .lead{font-size:15px}
  .ntop-wrapper .logos__head .num{font-size:24px}
  .ntop-wrapper .logos__head .unit-g{font-size:20px}
  .ntop-wrapper .logos__head .num-b{font-size:24px}
  .ntop-wrapper .logos__head .unit-b{font-size:20px}
  .ntop-wrapper .logos__head .small{font-size:13px}
  .ntop-wrapper .logos__head .paren .small{font-size:10px}
  .ntop-wrapper .logos__head .paren .num-b{font-size:17px}
  .ntop-wrapper .logos__head .paren .unit-b{font-size:15px}
  .ntop-wrapper .logos__head .note-inline{display:block;font-size:11px}   /* 注釈は改行して単独行に */
  .ntop-wrapper .marquee{
    width:100%;margin-top:12px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  }
  .ntop-wrapper .marquee__track .logo-item{height:36px;margin:0 18px}

  /* ---- Coverage ---- */
  .ntop-wrapper .cov-grid{grid-template-columns:1fr;gap:20px}
  .ntop-wrapper .cov-card{width:100%;height:auto;padding:16px 20px 0}
  .ntop-wrapper .cov-card__head{gap:12px;margin-bottom:6px}
  .ntop-wrapper .cov-card__mark{width:44px;height:44px}
  .ntop-wrapper .cov-card__name{font-size:22px;letter-spacing:.8px}
  /* リストはPC同様2列のまま。フォントを成り行きで縮小し、折り返しは▪にぶら下げ */
  .ntop-wrapper .cov-card__cols{gap:12px}
  .ntop-wrapper .cov-card__cols ul{flex:1;min-width:0}
  .ntop-wrapper .cov-card__cols li{
    white-space:normal;font-size:12.5px;letter-spacing:.2px;line-height:1.8;
    padding-left:12px;text-indent:-12px;
  }
  /* 下部画像をabsoluteから通常フローへ（上端フェードマスクは維持） */
  .ntop-wrapper .cov-card__img,
.ntop-wrapper .cov-card__img--tall{
    position:static;width:auto;margin:14px -20px 0;
    border-radius:0 0 4px 4px;
  }

  /* オーダーメイド帯 */
  .ntop-wrapper .cov-order{width:auto;height:auto;padding:24px 20px;margin-top:20px}
  .ntop-wrapper .cov-order__inner{flex-direction:column;align-items:stretch;gap:20px}
  .ntop-wrapper .cov-order__text{width:auto;gap:12px}
  .ntop-wrapper .cov-order__eyebrow{font-size:14px}
  .ntop-wrapper .cov-order__title{font-size:19px;margin-top:-4px}  /* sp-br改行後の2行目が375pxで1行に収まるサイズ(実測251px≦262px) */
  .ntop-wrapper .cov-order__desc{font-size:14px}
  .ntop-wrapper .cov-order__img{position:relative;width:100%;height:auto;aspect-ratio:16/9}
  .ntop-wrapper .cov-order__video{position:absolute;inset:0;width:100%;height:100%}
  .ntop-wrapper .btn-order{width:100%;max-width:280px;height:46px;font-size:15px}

  /* ---- CTA再掲 ---- */
  .ntop-wrapper .cta-recap{flex-direction:column;gap:14px;padding-top:56px}

  /* ---- Use Cases 導入事例 ---- */
  .ntop-wrapper .carousel-btn{display:none}
  .ntop-wrapper .cases-track{gap:20px}
  .ntop-wrapper .case-card{width:320px}
  .ntop-wrapper .case-card__img{height:192px}          /* 320 × 0.601 */
  .ntop-wrapper .case-card__body{padding:20px 18px 24px}
  /* 見出しは内側284pxに最長行が1行で収まるサイズ（t1最長306px@17px→15px / t2最長329px@23px→19px） */
  .ntop-wrapper .case-card__t1{font-size:15px}
  .ntop-wrapper .case-card__t2{font-size:19px}

  /* ---- Reason ---- */
  .ntop-wrapper .reason-grid{grid-template-columns:1fr;gap:16px}
  .ntop-wrapper .reason-card{width:100%;padding:24px 24px 28px}
  .ntop-wrapper .reason-card__inner{width:100%;gap:12px}
  .ntop-wrapper .reason-card__title{font-size:19px}
  .ntop-wrapper .reason-card__title br{display:none}
  .ntop-wrapper .reason-card__num .big{font-size:38px}
  .ntop-wrapper .reason-card__num .u{font-size:18px}
  .ntop-wrapper .reason-card__hr{width:100%}
  .ntop-wrapper .reason-card__desc{font-size:15px}

  /* ---- Support ---- */
  .ntop-wrapper .support-section{margin-top:56px;padding-bottom:56px}
  /* sp-br改行後の2行目「電子化・AI活用を推進したい方へ」が375pxで1行に収まるサイズ(実測295px≦304px) */
  .ntop-wrapper .support-section .sec-title h2{font-size:20px}
  .ntop-wrapper .support-panel{padding:24px;border-radius:10px}
  .ntop-wrapper .support-grid{grid-template-columns:1fr;gap:32px}
  .ntop-wrapper .support-card__num{font-size:22px}
  .ntop-wrapper .support-card__title{font-size:15px;white-space:normal}
  .ntop-wrapper .support-card__desc{font-size:14px;margin-top:12px}

  /* ---- Document ---- */
  .ntop-wrapper .doc-section{padding:56px 0}
  .ntop-wrapper .doc-grid{grid-template-columns:1fr;gap:16px}
  .ntop-wrapper .doc-card{padding:24px 20px}
  .ntop-wrapper .doc-card__thumb{width:100%;max-width:336px;height:auto;aspect-ratio:16/9}
  .ntop-wrapper .doc-card__title{font-size:15px;margin-top:18px}
  .ntop-wrapper .doc-more{margin-top:24px}

  /* ---- NEWS / Q&A 共通（左見出し＋右リスト → 縦積み） ---- */
  .ntop-wrapper .split-section{padding:56px 0}
  .ntop-wrapper .split-wrap{grid-template-columns:1fr;gap:24px}
  .ntop-wrapper .split-side{position:static;top:auto}
  /* NEWS: 1段目=日付+カテゴリ、2段目=タイトル(全幅) */
  .ntop-wrapper .news-item{grid-template-columns:78px 1fr;gap:8px 12px;padding:14px 2px}
  .ntop-wrapper .news-item__cat{justify-self:start;width:104px}
  .ntop-wrapper .news-item__title{grid-column:1 / -1;width:100%;font-size:14px;letter-spacing:.2px}
  .ntop-wrapper .news-more{margin-top:20px}
  /* Q&A */
  .ntop-wrapper .qa-list{gap:12px}
  .ntop-wrapper .qa-head{padding:16px;gap:10px}
  .ntop-wrapper .qa-qtext{font-size:14px}
  .ntop-wrapper .qa-inner{padding:6px 16px 18px;gap:10px}
  .ntop-wrapper .qa-atext{font-size:13px;line-height:1.9}
  .ntop-wrapper .qa-item.open .qa-body{max-height:900px}   /* SPは行数が増えるので上限を拡張 */

  /* ---- クロージングCTA ---- */
  .ntop-wrapper .closing-cta{padding:56px 0}
  .ntop-wrapper .closing-cta__title{font-size:23px;line-height:1.6;letter-spacing:.5px}
  .ntop-wrapper .closing-cta__sub{font-size:14px;margin-top:10px}
  .ntop-wrapper .closing-cta__btns{flex-direction:column;align-items:center;gap:14px;margin-top:24px}

  /* ---- 末尾余白 ---- */
  .ntop-wrapper .page__foot{height:48px}
}



/* ---- 元HTMLのインライン背景画像をクラス化（ガイドライン4） ---- */
.ntop-wrapper .cov-card__img--invoice{background-image:url(../images/top-new-2607/cov-card-img-invoice.png)}
.ntop-wrapper .cov-card__img--expense{background-image:url(../images/top-new-2607/cov-card-img-expense.png)}
.ntop-wrapper .cov-card__img--newlease{background-image:url(../images/top-new-2607/cov-card-img-newlease.png)}
.ntop-wrapper .cov-card__img--send{background-image:url(../images/top-new-2607/cov-card-img-send.png)}
.ntop-wrapper .support-card__img--1{background-image:url(../images/top-new-2607/support-card-img-1.webp)}
.ntop-wrapper .support-card__img--2{background-image:url(../images/top-new-2607/support-card-img-2.png)}
.ntop-wrapper .support-card__img--3{background-image:url(../images/top-new-2607/support-card-img-3.webp)}
.ntop-wrapper .support-card__img--4{background-image:url(../images/top-new-2607/support-card-img-4.webp)}
.ntop-wrapper .support-card__img--5{background-image:url(../images/top-new-2607/support-card-img-5.webp)}
.ntop-wrapper .support-card__img--6{background-image:url(../images/top-new-2607/support-card-img-6.png)}