/* =========================================================
   v2：大きく、やわらかく、選びやすく（2026年10月）
   site.css の後に読み込み、全体の基準を上書きする。
   ========================================================= */

/* ---------- 1. 文字の基準を上げる（16px → 18px） ---------- */
html{font-size:112.5%;}
body{line-height:1.85;}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.45;letter-spacing:-.02em;margin-bottom:1.2rem;}
h3{line-height:1.6;}
.sec-lead{font-size:1rem;max-width:44em;}
.mark{font-size:.84rem;}

/* ---------- 2. 角丸と影 ---------- */
:root{
  --radius:10px;
  --radius-lg:16px;
  --lift:0 14px 34px -12px rgba(35,31,32,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
.btn{border-radius:8px;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(208,16,24,.55);}

/* ---------- 3. 選ばせるカード（困りごと） ---------- */
.finder{position:relative;background:var(--ink);color:#fff;padding-block:clamp(64px,8vw,104px);}
.finder .mark{color:#fff;}
.finder h2{color:#fff;}
.finder .sec-lead{color:#C9CCD0;}
.finder-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.finder-head .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.finder-head .btn-ghost:hover{background:#fff;color:var(--ink);}

.finder-panel{margin-top:clamp(28px,3.4vw,44px);background:#fff;color:var(--body);border-radius:var(--radius-lg);overflow:hidden;}
.finder-tabs{display:grid;grid-template-columns:repeat(2,1fr);background:#3A3536;}
.finder-tabs button{
  appearance:none;border:0;background:transparent;color:#C9CCD0;font:inherit;font-weight:700;font-size:1rem;
  padding:1.15rem 1rem;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease);
}
.finder-tabs button:hover{color:#fff;}
.finder-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);}
.finder-body{padding:clamp(24px,3.6vw,52px);}
.finder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);margin:0;padding:0;list-style:none;}
.finder-grid[hidden]{display:none;}
.fcard{
  display:flex;align-items:center;gap:1rem;height:100%;
  padding:1.05rem 1.1rem;border:1px solid var(--rule);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;background:#fff;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.fcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--lift);}
.fcard-ico{
  flex:none;width:52px;height:52px;border-radius:12px;background:var(--bg-alt);
  display:grid;place-items:center;color:var(--ink);transition:background-color .35s var(--ease),color .35s var(--ease);
}
.fcard:hover .fcard-ico{background:var(--tint);color:var(--red-web);}
.fcard-ico svg{width:28px;height:28px;}
.fcard-t{flex:1;font-weight:700;font-size:.95rem;line-height:1.55;}
.fcard-t small{display:block;font-weight:500;font-size:.76rem;color:var(--muted);margin-top:.15rem;}
.fcard-arr{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .35s var(--ease),border-color .35s var(--ease);}
.fcard:hover .fcard-arr{transform:translateX(3px) rotate(-45deg);border-color:var(--red-web);}

/* ---------- 4. IT顧問の中身：アイコン付きカード ---------- */
.icards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,3vw,40px);}
.icard{
  border:1px solid var(--rule);border-radius:var(--radius);background:#fff;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.icard:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:transparent;}
.icard-ico{width:48px;height:48px;border-radius:12px;background:var(--tint);color:var(--red-web);display:grid;place-items:center;margin-bottom:1.3rem;}
.icard-ico svg{width:26px;height:26px;}
.icard h3{font-size:1.06rem;font-weight:800;color:var(--ink);margin:0 0 .5rem;}
.icard p{margin:0;font-size:.9rem;line-height:1.8;}

/* ---------- 5. 料金カードを角丸に ---------- */
.pcard{border-radius:var(--radius-lg);border-top-width:1px;border-top-color:var(--rule);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.pcard.is-pick{border-width:2px;border-color:var(--red);}
.pcards--compact .pcard:hover{transform:translateY(-3px);box-shadow:var(--lift);}
.pcard-tag{border-radius:999px!important;top:0;transform:translateY(-50%);padding:.35em 1.1em;}
.pcard-hours{border-radius:8px;}
.pcards-exec{border-radius:var(--radius);}

/* ---------- 6. スクロールで出す（控えめ） ---------- */
/* JSが動かない環境で消えたままにならないよう、html.js のときだけ隠す */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
  .fcard,.icard,.pcard,.btn{transition:none;}
}

@media (max-width:900px){
  .finder-grid{grid-template-columns:1fr;}
  .icards{grid-template-columns:1fr 1fr;}
  .finder-tabs button{font-size:.9rem;padding:1rem .6rem;}
}
@media (max-width:560px){
  .icards{grid-template-columns:1fr;}
}
.finder-grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.finder-grid--2{grid-template-columns:1fr;}}

/* ---------- 7. サイト全体へ広げる ---------- */
/* ヘッダーは基準の拡大に引きずられないよう固定する */
.gnav a{font-size:.9rem;}
.hero-top h1{font-size:clamp(2.2rem,5.2vw,4rem);}

/* 箱の角丸 */
.pillar,.plan,.cannot,.prules,.callout,.formcard,.a-toc,.callnow,.issue{border-radius:var(--radius);}
.pexec{border-radius:var(--radius-lg);}
.pull{border-radius:0 var(--radius) var(--radius) 0;}
.mapwrap,.work-thumb,.pagehero img{border-radius:var(--radius);overflow:hidden;}
.pcard-hours{border-radius:8px;}

/* 3つの事業のカード：浮く動き */
.pillar{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--lift);}
.pillar-tag{border-radius:999px;}

/* フォームの入力欄 */
.formcard input[type="text"],.formcard input[type="email"],.formcard input[type="tel"],
.formcard select,.formcard textarea{border-radius:8px;}

/* 表は角を丸めない（罫線の表は直角のほうが読みやすい） */

/* ---------- 8. ヘッダーの幅対策 ----------
   文字を大きくしたぶん、1280px 未満でメニューがはみ出すため段階的に詰める */
.gnav{gap:clamp(.9rem,1.5vw,1.6rem);}
.gnav .btn-sm{font-size:.8rem;padding:.6em 1.05em;}
@media (max-width:1024px){
  .gnav{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- 9. 実績の数字：単位を小さく ---------- */
.num b .u{font-size:.5em;font-weight:700;letter-spacing:0;margin-left:.08em;}

/* ---------- 10. 横幅を広げる（リモートサポートのボタン追加に合わせて） ---------- */
:root{--max:1360px;}

/* ---------- 11. トップのヘッダー：キャッチに近づくほど白を重ねる（--hdr は site.js が 0〜1 で渡す） ---------- */
.site-header.is-overlay,
.site-header.is-overlay.is-scrolled{
  background:rgba(255,255,255,calc(var(--hdr,0) * .95));
  border-bottom-color:rgba(234,230,230,var(--hdr,0));
  -webkit-backdrop-filter:blur(calc(var(--hdr,0) * 8px));
          backdrop-filter:blur(calc(var(--hdr,0) * 8px));
  transition:none;
}
.is-overlay .logo,.is-overlay .gnav a:not(.btn),.is-overlay .gnav a.btn-quiet{transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),text-shadow .3s var(--ease);}
.nav-open .site-header.is-overlay{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;}

/* ---------- 12. ヘッダーのボタンが3つになったための詰め ---------- */
@media (max-width:1320px){
  .gnav .btn-quiet{display:none;}   /* 顧客ログイン・リモートサポートはフッターにもある */
}
/* 1320px 以下でまとめて隠す */
.nav-open .gnav .btn-quiet{display:block;}

/* ---------- 13. セクションラベルの印（赤い横棒 → 小さなアイコン） ---------- */
.mark::before{display:none;}
.mark{gap:.6em;}
.mark-ico{
  flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--tint);color:var(--red-web);display:grid;place-items:center;
}
.mark-ico svg{width:16px;height:16px;stroke-width:1.9;}
.finder .mark-ico,.cta .mark-ico,.pexec .mark-ico{background:rgba(255,255,255,.12);color:#fff;}

/* ---------- 14. フッター：ロゴを小さく、社名はロゴの右に ---------- */
.site-footer .fco{display:flex;align-items:center;gap:1.4rem;}
.site-footer .fco .logo{width:84px;}
.site-footer .fco p{margin:0;font-size:.78rem;line-height:1.85;padding-left:1.4rem;border-left:1px solid #3A3A38;}

/* ---------- 15. 文章の改行位置：画面の端まで流す ----------
   段落は文節単位の折り返しをやめ、幅の上限も外す（見出し・ボタンは文節単位のまま） */
p,li,dd,dt,td,th,.sec-lead,.page-lead,.hero-lead{word-break:normal;}
.sec-lead,.page-lead,.reason p,.faq details p,.cta p,.value-item p,.psub > p{max-width:none;}
.hero-top .hero-lead{max-width:39em;}
.hero-top .hero-lead br{display:inline;}  /* 原稿の改行（「…分からない。」の後）を生かす */
@media (max-width:900px){
  .site-footer .fco{flex-direction:column;align-items:flex-start;gap:1rem;}
  .site-footer .fco p{padding-left:0;border-left:0;}
}

/* ---------- 16. ボタンの浮き上がりをやめる（色の変化だけにする） ---------- */
.btn-primary:hover,.btn:hover{transform:none;box-shadow:none;}
.hero-top .btn-primary{box-shadow:none;}

/* ---------- 17. ヘッダー：資料ダウンロードを画面の右端に（高さいっぱいの帯） ---------- */
.site-header .hbar{max-width:none;padding-right:0;}
.gnav{align-self:stretch;}
.gnav-sub{display:flex;align-items:center;gap:.8rem;}       /* フッターと同じ間隔 */
.gnav a.gnav-dl{
  align-self:stretch;display:flex;align-items:center;
  border-radius:0;border:0;padding:0 clamp(1.4rem,2vw,2.2rem);
  font-size:.86rem;margin-left:clamp(.2rem,.6vw,.6rem);
}
.gnav a.gnav-dl:hover{border-bottom:0;}
@media (max-width:1320px){
  .gnav-sub{display:none;}
}
.nav-open .gnav{align-self:auto;}
.nav-open .gnav-sub{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;margin-top:1.6rem;}
.nav-open .gnav-sub .btn-quiet{margin-top:0;}
.nav-open .gnav a.gnav-dl{display:block;align-self:auto;border-radius:8px;padding:.85em 1.6em;margin:.8rem 0 0;}

/* ---------- 18. フッター：ロゴを大きく、縦線と電話番号の下線をなくす ---------- */
.site-footer .fco{gap:2.2rem;}
.site-footer .fco .logo{width:160px;}
.site-footer .fco p{padding-left:0;border-left:0;}
.site-footer .fco a{color:inherit;text-decoration:none;}
.site-footer .fco a:hover{color:#fff;}

/* ---------- 19. 白い背景のうすい模様（回路・方眼・点） ----------
   文字の後ろに来ないよう、隅に寄せて端へ向かって消す */
.deco{position:relative;isolation:isolate;}
.deco::before{content:"";position:absolute;z-index:-1;pointer-events:none;}
/* 回路：右上の隅から */
.deco-circuit::before{
  top:0;right:0;width:min(720px,60vw);height:460px;
  background:url(../img/deco-circuit.svg) right top/720px 460px no-repeat;opacity:.2;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
}
.deco-circuit.deco-left::before{right:auto;left:0;transform:scaleX(-1);}
/* 方眼：右上に薄く */
.deco-grid::before{
  top:0;right:0;width:60%;height:520px;
  background-image:linear-gradient(rgba(35,31,32,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(35,31,32,.13) 1px,transparent 1px);
  background-size:28px 28px;background-position:right top;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
}
/* 点：右上に薄く */
.deco-dots::before{
  top:0;right:0;width:55%;height:480px;
  background-image:radial-gradient(rgba(35,31,32,.30) 1.3px,transparent 1.6px);
  background-size:20px 20px;background-position:right top;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
}
.finder.deco-dots::before{background-image:radial-gradient(rgba(255,255,255,.26) 1.3px,transparent 1.6px);}
@media (max-width:700px){
  .deco-circuit::before{width:100%;opacity:.07;}
  .deco-grid::before,.deco-dots::before{width:100%;height:260px;}
}

/* ---------- 20. ヘッダー：ロゴは左端、メニューは中央、資料ボタンは右端 ---------- */
.gnav{flex:1;margin-left:0;}
.gnav > li:first-child{margin-left:auto;}
.gnav > li:last-of-type{margin-right:auto;}
.nav-open .gnav > li:first-child,.nav-open .gnav > li:last-of-type{margin-inline:0;}

/* ---------- 21. ヒーロー下端に重ねる実績の帯 ---------- */
.hero-top > .wrap{padding-bottom:calc(clamp(28px,4vw,44px) + 64px);}
.hband-wrap{position:relative;z-index:2;margin-top:-64px;}
.hband{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:0 22px 44px -28px rgba(20,16,16,.45);
}
.hband > div{display:flex;align-items:center;gap:18px;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);}
.hband > div + div{border-left:1px solid var(--rule);}
.hband-ico{flex:none;width:48px;height:48px;border-radius:12px;background:var(--tint);color:var(--red-web);display:grid;place-items:center;}
.hband-ico svg{width:24px;height:24px;}
.hband p{margin:0;}
.hband .k{font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.1em;line-height:1.5;}
.hband .v{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:800;color:var(--ink);line-height:1.35;letter-spacing:-.02em;}
.hband .v .u{font-size:.55em;letter-spacing:0;margin-left:.06em;}
.hband .v .u-and{margin-inline:.45em;}          /* 「訪問 と リモート」の両側にゆとり */
.hband .v .sep{font-weight:500;color:var(--muted);margin-inline:.35em;font-size:.8em;}
.hband .sub{font-size:.78rem;color:var(--muted);line-height:1.6;}
@media (max-width:900px){
  .hband{grid-template-columns:1fr;}
  .hband > div + div{border-left:0;border-top:1px solid var(--rule);}
  .hband-wrap{margin-top:-40px;}
  .hero-top > .wrap{padding-bottom:calc(28px + 40px);}
}

/* ---------- 22. 締めの文：文の切れ目で改行（スマホでは流す） ---------- */
br.pc{display:inline;}
@media (max-width:767px){br.pc{display:none;}}

/* ---------- 23. 電話番号まわり ---------- */
.site-footer .ftel-note{display:block;font-size:.72rem;color:#7D8288;margin-top:.15rem;}
.callnow .tel-tag{display:inline-block;margin-left:.6em;padding:.1em .7em;border-radius:999px;background:var(--tint);color:var(--red-deep);font-size:.72rem;font-weight:700;vertical-align:.1em;}
.callnow .tel-member{font-size:.84rem;color:var(--body);margin:.2rem 0 .3rem;}
.callnow .tel-note{font-size:.76rem;color:var(--muted);margin:.5rem 0 0;}

/* ---------- 24. ヘッダーメニューのホバー ----------
   下線は中央から左右へ伸ばす。白い背景のときは文字も赤に */
.gnav > li > a{position:relative;border-bottom:0!important;}
.gnav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--red-web);transform:scaleX(0);transition:transform .35s var(--ease);
}
.gnav > li > a:hover::after,.gnav > .current-menu-item > a::after,.gnav > li > a[aria-current]::after{transform:scaleX(1);}
.gnav > li > a{transition:color .25s var(--ease);}
.site-header:not(.is-overlay) .gnav > li > a:hover,
.is-overlay.is-scrolled .gnav > li > a:hover{color:var(--red-web);}
.is-overlay:not(.is-scrolled) .gnav > li > a::after{background:#fff;}
.site-header:not(.is-overlay) .gnav a.btn-quiet:hover,
.is-overlay.is-scrolled .gnav a.btn-quiet:hover{background:var(--tint);border-color:rgba(208,16,24,.35);color:var(--red-deep);}
.nav-open .gnav > li > a::after{display:none;}

/* ---------- 25. トップのキャッチ：表示時に少しだけ動かす ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero-top h1,.js .hero-top .hero-lead,.js .hero-top .hero-cta,.js .hero-top .hero-note{
    animation:heroIn 1s var(--ease) both;
  }
  .js .hero-top .hero-lead{animation-delay:.25s;}
  .js .hero-top .hero-cta{animation-delay:.42s;}
  .js .hero-top .hero-note{animation-delay:.55s;}
  .js .hero-top__photo{animation:heroPhoto 2.6s cubic-bezier(.2,.7,.2,1) both;}
  .js .hband{animation:heroIn 1s .6s var(--ease) both;}
}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
@keyframes heroPhoto{from{transform:scale(1.06);}to{transform:scale(1);}}

/* ---------- 26. 各セクションの見出し：スクロールで順に現れる ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .h-in{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
  .js .h-in.is-in{opacity:1;transform:none;}
  .js .mark.h-in .mark-ico{transform:scale(.6) rotate(-12deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .15s;}
  .js .mark.h-in.is-in .mark-ico{transform:none;}
}

/* ---------- 27. 見出しの背後に薄く敷く英字 ---------- */
section[data-en]{position:relative;isolation:isolate;overflow:clip;}
section[data-en]::after{
  content:attr(data-en);position:absolute;z-index:-1;pointer-events:none;
  top:clamp(10px,2vw,26px);left:max(calc(var(--pad) - .06em),calc(50% - var(--max) / 2 + var(--pad) - .06em));
  font-size:clamp(4rem,10.5vw,9.5rem);font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(35,31,32,.045);
}
.finder[data-en]::after{color:rgba(255,255,255,.05);}
.alt[data-en]::after{color:rgba(35,31,32,.05);}

/* ---------- 28. 下層ページ：見出し帯と各セクションの模様 ---------- */
.page-head{position:relative;isolation:isolate;overflow:clip;}
.page-head::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;top:0;right:0;width:min(720px,60vw);height:100%;
  background:url(../img/deco-circuit.svg) right top/720px 460px no-repeat;opacity:.2;
  -webkit-mask-image:radial-gradient(ellipse 100% 120% at 100% 0,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 100% 120% at 100% 0,#000 30%,transparent 85%);
}
.page-head[data-en]::after{
  content:attr(data-en);position:absolute;z-index:-1;pointer-events:none;
  right:max(calc(var(--pad) - .06em),calc(50% - var(--max) / 2 + var(--pad) - .06em));bottom:-.12em;
  font-size:clamp(3.6rem,9vw,8rem);font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(35,31,32,.05);
}
.page-head[data-en=""]::after{display:none;}

/* 各セクションは順番に 点 → 回路 → 方眼 → 回路（左） を割り当てる（見出し帯の回路と続かないよう点から） */
body:not(.home) main > section:not(.cta){position:relative;isolation:isolate;overflow:clip;}
body:not(.home) main > section:not(.cta)::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;}
body:not(.home) main > section:not(.cta):nth-of-type(4n+2)::before{
  right:0;width:min(720px,60vw);height:460px;
  background:url(../img/deco-circuit.svg) right top/720px 460px no-repeat;opacity:.18;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
}
body:not(.home) main > section:not(.cta):nth-of-type(4n+1)::before{
  right:0;width:55%;height:480px;
  background-image:radial-gradient(rgba(35,31,32,.28) 1.3px,transparent 1.6px);background-size:20px 20px;background-position:right top;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
}
body:not(.home) main > section:not(.cta):nth-of-type(4n+3)::before{
  right:0;width:60%;height:520px;
  background-image:linear-gradient(rgba(35,31,32,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(35,31,32,.12) 1px,transparent 1px);
  background-size:28px 28px;background-position:right top;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 100% at 100% 0,#000 25%,transparent 85%);
}
body:not(.home) main > section:not(.cta):nth-of-type(4n+4)::before{
  left:0;width:min(720px,60vw);height:460px;transform:scaleX(-1);
  background:url(../img/deco-circuit.svg) right top/720px 460px no-repeat;opacity:.18;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 30%,transparent 85%);
}
@media (max-width:700px){
  body:not(.home) main > section:not(.cta)::before{width:100%!important;}
  section[data-en]::after{font-size:3.4rem;}
}

/* ---------- 29. 見出しを少し細く（800 → 700）、字間を詰めすぎない ---------- */
h1,h2,h3,.worry h3,.svc-item h3,.scope-item h3,.plan h3,.pillar h3,.case h3,.faq summary,
.icard h3,.dl-card h3,.psub h3,.pcol-h,.psub-h,.pcard-ja,.fcard b,.fcard h3{font-weight:700;}
h1{letter-spacing:0;}
h2{letter-spacing:0;}
.hero-top h1{font-weight:700;letter-spacing:-.01em;}

/* ---------- 30. 準備中の案内（実績など） ---------- */
.soon{text-align:center;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);padding:clamp(36px,5vw,56px) clamp(20px,4vw,48px);box-shadow:0 18px 40px -30px rgba(20,16,16,.35);}
.soon-ico{display:grid;place-items:center;margin:0 auto;width:56px;height:56px;border-radius:14px;background:var(--tint);color:var(--red-web);}
.soon-ico svg{width:28px;height:28px;}
.soon-tag{display:inline-block;margin:1rem 0 .6rem;padding:.2em 1em;border-radius:999px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.12em;}
.soon-h{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 .9rem;}
.soon p{margin-inline:auto;max-width:36em;text-wrap:balance;}
.soon .soon-tag{display:table;margin:1rem auto .7rem;}
.soon-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem;}
.soon-admin{margin-top:1.4rem!important;font-size:.78rem;color:var(--muted);}
.form-soon{padding:1.4rem 1.6rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-alt);}

/* ---------- 31. スマホ表示の調整 ---------- */
@media (max-width:600px){
  /* 見出し：1文字だけ次の行に落ちないよう、画面幅に合わせて小さく */
  .hero-top h1{font-size:8.2vw;letter-spacing:-.02em;}
  h1,.page-head h1,.hero-photo h1{font-size:clamp(1.5rem,7vw,2rem);line-height:1.45;}
  h2{font-size:clamp(1.3rem,6.1vw,1.6rem);line-height:1.5;}
  h1,h2{text-wrap:pretty;}
  .soon-h{font-size:1.2rem;}

  /* トップのリード文：原稿の改行を外して流す */
  .hero-top .hero-lead{font-size:.95rem;line-height:1.85;}
  .hero-top .hero-lead br{display:none;}

  /* ボタン：横幅いっぱいにそろえる */
  .hero-cta,.head-cta,.cta-row,.soon-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn,.head-cta .btn,.cta-row .btn,.soon-cta .btn{display:block;width:100%;text-align:center;}

  /* よくあるご相談のカード：詰める */
  .fcard{padding:14px 14px;gap:12px;}
  .fcard-ico{width:40px;height:40px;}
  .fcard-ico svg{width:22px;height:22px;}
  .fcard-t{font-size:.92rem;}

  /* IT顧問のカード：アイコンを見出しの横に */
  .icard{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:18px;}
  .icard-ico{width:44px;height:44px;margin:0;}
  .icard h3{margin:0;}
  .icard p{grid-column:1 / -1;margin-top:.6rem;}

  /* Executive の一行：名前・説明・金額を分けて読む */
  .pcards-exec b{display:block;margin:0 0 .2rem;}

  /* 実績の数字：横並びの小さい札に */
  .nums{grid-template-columns:repeat(3,1fr);gap:10px;}
  .num{padding-left:.7rem;}
  .num b{font-size:1.15rem;}
  .num > span{font-size:.72rem;line-height:1.5;display:block;}

  /* 更新情報：日付と種類を1行に */
  .post{grid-template-columns:auto 1fr;column-gap:.9rem;row-gap:.2rem;}
  .post .post-title{grid-column:1 / -1;}

  /* 横に長い表：スクロールできることを示す */
  .tablewrap{position:relative;}
  .tablewrap.is-scroll::before{content:"表は横にスクロールできます →";display:block;font-size:.74rem;color:var(--muted);margin:0 0 .4rem;}


  /* 料金の比較表：項目名の列を細くして左に固定 */
  table.pscope{min-width:520px;font-size:.8rem;}
  table.pscope col.row{width:8.5rem;}
  table.pscope .pfee{font-size:1.15rem;white-space:nowrap;}
  table.pscope .pfee span{display:block;}
  table.pscope th,table.pscope td{padding:.65rem .45rem;}
  table.pscope th.row,table.pscope thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--rule);}

  /* 英字の透かし：少し小さく */
  section[data-en]::after{font-size:3rem;}
  .page-head[data-en]::after{font-size:3rem;}
}

/* メニューを開いたらハンバーガーを × に */
.nav-toggle span{transition:transform .3s var(--ease),opacity .2s;}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- 32. 全国リモート対応：地域の札 ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2rem;}
.area{border:1px solid var(--rule);border-radius:var(--radius);background:#fff;padding:20px 22px;}
.area-h{margin:0 0 .3rem;font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.08em;}
.area-v{margin:0;font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.5;}
.area.is-home{background:var(--tint);border-color:transparent;}
.area.is-home .area-v{color:var(--red-deep);}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.areas{grid-template-columns:1fr;}}

/* ---------- 33. 全国リモート対応：地域ごとの事例 ---------- */
.rcases{margin-top:2rem;border-top:1px solid var(--rule);}
.rcase{display:grid;grid-template-columns:8.5rem 1fr;gap:1.6rem;padding:1.5rem 0;border-bottom:1px solid var(--rule);}
.rcase-pref{margin:0;font-weight:700;color:var(--red-deep);font-size:1rem;}
.rcase-item + .rcase-item{margin-top:1.1rem;}
.rcase-item h3{margin:0 0 .3rem;font-size:1.02rem;}
.rcase-item p{margin:0;font-size:.92rem;line-height:1.85;}
@media (max-width:600px){.rcase{grid-template-columns:1fr;gap:.5rem;}}

/* ---------- 34. 県外・離島の会社への導線 ---------- */
.remote-strip{display:block;background:var(--ink);color:#fff;text-decoration:none;transition:background-color .25s var(--ease);}
.remote-strip:hover{background:#3a3536;}
.remote-strip-in{display:flex;align-items:center;gap:14px;padding-block:14px;}
.remote-strip-ico{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;}
.remote-strip-ico svg{width:18px;height:18px;}
.remote-strip-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;font-size:.92rem;}
.remote-strip-t b{font-weight:700;}
.remote-strip-t span{color:rgba(255,255,255,.75);font-size:.86rem;}
.remote-strip-go{margin-left:auto;flex:none;font-size:.84rem;font-weight:700;display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border:1px solid rgba(255,255,255,.4);border-radius:999px;}
.remote-strip-go::after,.hband-go::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}
.remote-strip:hover .remote-strip-go{background:#fff;color:var(--ink);border-color:#fff;}

.remote-card{display:flex;align-items:center;gap:22px;margin-top:2.4rem;padding:24px 28px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--rule);box-shadow:0 18px 40px -30px rgba(20,16,16,.35);}
.alt .remote-card{background:#fff;}
.remote-card-ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--tint);color:var(--red-web);display:grid;place-items:center;}
.remote-card-ico svg{width:26px;height:26px;}
.remote-card-t{flex:1;min-width:0;}
.remote-card-t p{margin:0;}
.remote-card-k{font-size:.74rem;font-weight:700;color:var(--red-deep);letter-spacing:.08em;}
.remote-card-h{font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.5;margin:.15rem 0 .3rem!important;}
.remote-card-p{font-size:.88rem;line-height:1.8;}
.remote-card .btn{flex:none;}

/* トップの帯：3つめを県外向けページへのリンクに */
.hband-link{display:flex;align-items:center;gap:18px;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);border-left:1px solid var(--rule);text-decoration:none;color:inherit;border-radius:0 var(--radius-lg) var(--radius-lg) 0;transition:background-color .25s var(--ease);}
.hband-link:hover{background:var(--tint);}
.hband-go{display:inline-flex;align-items:center;gap:.35em;margin-left:.6em;font-weight:700;color:var(--red-web);}

@media (max-width:900px){
  .remote-card{flex-direction:column;align-items:flex-start;}
  .remote-card .btn{width:100%;text-align:center;}
  .hband-link{border-left:0;border-top:1px solid var(--rule);border-radius:0 0 var(--radius-lg) var(--radius-lg);}
}
@media (max-width:600px){
  .remote-strip-t span{display:none;}
}

/* ---------- 35. 一覧のカテゴリ名を1行で表示 ---------- */
.post .cat{white-space:nowrap;}
@media (min-width:901px){
  .post{grid-template-columns:6.5em 10.5em 1fr;}
  .post--news{grid-template-columns:6.5em 1fr;}
}

/* ---------- 36. 記事の幅と挿絵 ---------- */
:root{--max-article:calc(800px + 2 * var(--pad));}
.body img{max-width:100%;height:auto;display:block;}
.body figure.wp-block-image{margin:2rem 0 2.2rem;}
.body figure.wp-block-image img{border:1px solid var(--rule);}
.a-meta .updated{color:var(--muted);}
.draft-note{background:#FFF7D6;border:1px dashed #D9B200;padding:.6rem .9rem;font-size:.85rem;color:#6b5600;}

/* ---------- 37. 事例の数字 ---------- */
.case-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 1.3rem;}
.case-fig{background:var(--bg-alt);padding:.9rem 1rem;border-left:3px solid var(--red);}
.case-fig b{display:block;font-size:1.45rem;line-height:1.3;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.case-fig span{display:block;font-size:.78rem;color:var(--body);line-height:1.6;margin-top:.2rem;}
.case .draft-note{margin:0 0 1.1rem;}

/* ---------- 38. 幅の統一（狭いセクションをなくす） ----------
   .wrap.narrow も通常と同じ幅にそろえ、見出しは左・本文は右の2段組みにする。
   手順（.steps）を含むセクションは全幅で、横並びのフローチャートにする。 */
.wrap.narrow{max-width:var(--max);}
.wrap.narrow > p:not(.mark),
.wrap.narrow > .notes{max-width:50em;}

@media (min-width:901px){
  .wrap.narrow:has(> .mark):not(:has(> .steps)){
    display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr);
    column-gap:clamp(40px,6vw,96px);align-items:start;
  }
  .wrap.narrow:has(> .mark):not(:has(> .steps)) > *{grid-column:2;}
  .wrap.narrow:has(> .mark):not(:has(> .steps)) > .mark{grid-column:1;grid-row:1;align-self:start;margin:0;z-index:1;}
  .wrap.narrow:has(> .mark):not(:has(> .steps)) > h2{
    grid-column:1;grid-row:1 / span 40;align-self:start;
    position:sticky;top:110px;margin-top:2.6rem;font-size:clamp(1.45rem,2.2vw,1.9rem);
  }
  /* 右の列の先頭が見出しと揃うように */
  .wrap.narrow:has(> .mark):not(:has(> .steps)) > :nth-child(3){margin-top:0;}
  .wrap.narrow:has(> .mark):not(:has(> .steps)) > .sec-lead{margin-bottom:2rem;}
  .wrap.narrow:has(> .mark):not(:has(> .steps)) .faq,
  .wrap.narrow:has(> .mark):not(:has(> .steps)) .cases{margin-top:0 !important;}

  /* 事例の一覧ページ（見出しなし）は2列 */
  .wrap.narrow > .cases{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);}
}

/* フローチャート型の手順 */
@media (min-width:901px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:2.4rem !important;}
  .steps:has(> .step:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px;}
  .step{
    display:block;position:relative;background:#fff;border:1px solid var(--rule);
    border-top:3px solid var(--ink);padding:1.4rem 1.4rem 1.6rem;
  }
  .step:first-child{border-top-color:var(--red);}
  .step:last-child{border-bottom:1px solid var(--rule);}
  .step-n{
    width:2.3rem;height:2.3rem;border-radius:50%;background:var(--red);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:1rem;
  }
  .step h3{font-size:1.02rem;}
  .step p{font-size:.9rem;line-height:1.85;}
  /* 次の手順への矢印 */
  .step::after{
    content:"";position:absolute;top:50%;right:-21px;transform:translateY(-50%);
    border-left:11px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;z-index:1;
  }
  .step:last-child::after{display:none;}
  .steps:not(:has(> .step:nth-child(5))) > .step:nth-child(4n)::after{display:none;}
  .steps:has(> .step:nth-child(5)) > .step:nth-child(3n)::after{display:none;}
}
/* スマホ・タブレットは縦の流れ（下向きの矢印） */
@media (max-width:900px){
  .step{position:relative;}
  .step:not(:last-child)::after{
    content:"";position:absolute;left:14px;bottom:-8px;
    border-top:9px solid var(--rule);border-left:7px solid transparent;border-right:7px solid transparent;
  }
}
.case dl{grid-template-columns:3.2rem minmax(0,1fr);column-gap:.7rem;row-gap:.5rem;}
.case dt{float:none;width:auto;}
.case dd{margin:0;}

/* ---------- 39. 本文の改行位置をそろえる ----------
   text-wrap:pretty は最終行の調整のために手前の行を短くすることがあり（特にSafari）、
   行末がガタついて見えるため、本文は通常の折り返しに戻す。見出しは balance のまま。 */
p,li,dd,dt,td,th,.pillar p,.worry p,.sec-lead,.page-lead,.hero-lead,.a-lead{
  text-wrap:wrap;word-break:normal;
}
/* 記事本文・長めの段落は両端をそろえる */
.body p,.body li,.greeting-body p,.case dd,.faq details p,
.wrap.narrow > p:not(.mark),.pull p,.step p,.cannot li,.warn li,.sec-lead,.page-lead{
  text-align:justify;text-justify:inter-character;
}

/* ---------- 40. お知らせと技術情報のラベル ----------
   お知らせは塗りの赤で目立たせ、技術情報は枠線のみ。 */
.post .cat{
  display:inline-flex;align-items:center;justify-content:center;justify-self:start;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1;
  padding:.45em .8em;border-radius:2px;border:1px solid var(--ink);color:var(--ink);background:#fff;
}
.post .cat.news{background:var(--red-web);border-color:var(--red-web);color:#fff;}
.post .cat{align-self:center;}
.post{align-items:center;}
@media (min-width:901px){
  section[data-en="NEWS"] .post{grid-template-columns:6.5em 6.2em 1fr;}
}