/* ホバーとメニューの動き（10/28 のご指摘：動きが硬く唐突。CTA のように滑らかに）
   各ページのヘッダーの <style> より後で読み込み、同じ指定を上書きする。
   速さと曲線は1つにそろえる：0.45秒、出だしが速く終わりがゆっくりの曲線 */
:root{--ease-soft:cubic-bezier(.22,1,.36,1);--dur-soft:.45s}

/* 文字の色・枠・影が変わるもの */
nav.g a,nav.g .mm-top::after,footer a,.crumb a,.toc a,.atoc li a,.tolink,.tlink,.bizsw a,.sub-nav a,.faq summary,
.sns2 a,.rels a,.rc a,.nlist a.row,.nlist .tt,.nl a,.nf .links a,.links a,.jump a,.jidx a,.cjump a,.ent a,
.grid a h3,.cs-card h3,.cs-card .ph,.crow,.crow b,.row-case,.sub,.others a,.sv,.nc,.fv-biz a,
.btn.wh,.btn.ol,.btn.line,.mcta .btn,.send .btn,footer .btn.fcta,
.route a,.route .q,.route .a,.route .a i,.mega a b{
  transition-property:color,background-color,border-color,box-shadow,transform,opacity,filter,background-size;
  transition-duration:var(--dur-soft);transition-timing-function:var(--ease-soft)}

/* 写真が少し寄るもの。ゆっくり寄せる */
.ph img,.mega .mg-img img{transition:transform .9s var(--ease-soft)}
.mega .mg-ph{transition:filter var(--dur-soft) var(--ease-soft)}
.textlink{transition:background-size var(--dur-soft) var(--ease-soft)}
.textlink .ar{transition:transform var(--dur-soft) var(--ease-soft)}

/* PC のメガメニュー：出し入れを、表示の切り替えではなく、薄く浮かび上がる動きにする */
@media (min-width:1081px){
  .mega{display:grid;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .35s var(--ease-soft),transform var(--dur-soft) var(--ease-soft),visibility 0s linear .45s}
  nav.g .mm:hover .mega,nav.g .mm:focus-within .mega{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  nav.g .mm:hover .mm-top::after,nav.g .mm:focus-within .mm-top::after{transform:translateY(0) rotate(225deg)}
  nav.g .mm-top::after{transition:transform var(--dur-soft) var(--ease-soft)}
  nav.g>a:not([aria-current]),nav.g .mm-top:not([aria-current]){background:linear-gradient(90deg,#003ae5,#10a6fb) no-repeat 0 100%/0 2px}
  nav.g>a:not([aria-current]):hover,nav.g .mm:hover .mm-top:not([aria-current]){background-size:100% 2px}
}

/* 事業内容「ご相談の入口」：行がリンクだと分かるように、行に乗せたら矢印が進み、事業名に下線が伸びる */
.route .a{background:linear-gradient(90deg,#003ae5,#10a6fb,#1fd9ff) no-repeat 0 100%/0 2px;padding-bottom:6px}
.route a:hover .a{background-size:100% 2px}
.route a:hover .a i{transform:translateX(6px)}
.route a:hover .q{color:var(--acc-d)}

/* スマホのメニュー */
@media (max-width:1080px){
  /* ボタン：枠で囲まず、3本線と文字だけにする。線は少し長さを変えて、開くと×に回る */
  .menu-btn{border:0;background:transparent;padding:0 4px 0 12px;gap:10px;font-size:13px;letter-spacing:.06em}
  .menu-btn .bars3{width:22px;height:14px}
  .menu-btn .bars3 i{height:1.5px;border-radius:1px;transition:transform var(--dur-soft) var(--ease-soft),top var(--dur-soft) var(--ease-soft),opacity .25s var(--ease-soft),width var(--dur-soft) var(--ease-soft)}
  .menu-btn .bars3 i:nth-child(2){top:6px}
  .menu-btn .bars3 i:nth-child(3){top:12px}
  /* 乗せたときだけ真ん中の線が伸びる。iPhone ではタップのあと「乗せた状態」が残り、閉じても線が伸びたままになるので、マウスのある端末に限る（10/29 のご指摘） */
  header.open .menu-btn .bars3 i:nth-child(1){top:6px}
  header.open .menu-btn .bars3 i:nth-child(3){top:6px}

  /* パネル：表示の切り替えではなく、上から薄く降りてくる */
  .h-panel{display:block;visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;
    background:var(--bg);
    padding:12px 24px 32px;border-bottom:0;box-shadow:0 30px 50px -30px rgba(15,27,36,.28);
    transition:opacity .35s var(--ease-soft),transform var(--dur-soft) var(--ease-soft),visibility 0s linear .45s}
  header.open .h-panel{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  /* 中身は開く前から並べておき、閉じるときも消える前に崩れないようにする */
  .h-panel nav.g{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;font-size:16px}
  .h-panel nav.g a,.h-panel nav.g .mm-top{display:block;padding:16px 2px;font-weight:500;border-bottom:1px solid rgba(15,27,36,.08);box-shadow:none}
  .h-panel nav.g a[aria-current="page"]{color:var(--acc-d)}
  .h-panel nav.g .mm-top::after{display:none}
  .h-panel nav.g .pc-only{display:none}
  /* 開いたメニューの中の小項目は縦に並べる。触れても横並びにしない（PC のホバーの指定が効いていた） */
  .h-panel .mega,.h-panel nav.g .mm:hover .mega,.h-panel nav.g .mm:focus-within .mega{display:block;position:static;border:0;box-shadow:none;padding:0 0 6px 16px;background:transparent}
  .h-panel .mega a{padding:11px 2px;border-bottom:1px solid rgba(15,27,36,.06);font-size:15px}
  .h-panel .mega .mg-ph,.h-panel .mega small{display:none}
  .h-panel .mega b{font-weight:400;margin:0;font-size:15px;color:var(--sub)}
  .h-panel nav.g a:hover,.h-panel .mega a:hover b{color:var(--acc-d)}
  .h-panel .hbtn{display:flex;flex-direction:column;align-items:stretch;margin:20px 0 0}
  .h-panel .hbtn .btn{justify-content:center;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .mega,.h-panel,.menu-btn .bars3 i{transition:none!important;transform:none!important}
}

/* 「〜を見る →」「Google Map で開く →」などの文字のリンク：遷移できると分かるように、乗せたら下線が伸びる（10/28 のご指摘） */
.more,a.map,.tolink{background:linear-gradient(90deg,#003ae5,#10a6fb,#1fd9ff) no-repeat 0 100%/0 1.5px;padding-bottom:3px;
  transition:background-size var(--dur-soft) var(--ease-soft),color var(--dur-soft) var(--ease-soft)}
.more{width:fit-content}
a:hover .more,a.map:hover,.tolink:hover{background-size:100% 1.5px;text-decoration:none}

/* 入力欄・選択欄を選んだときの枠：3px の太い枠をやめ、欄の縁の細い線にする（お知らせの絞り込みのご指摘を全ページの入力欄に広げた） */
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline-width:2px;outline-offset:2px}

/* 乗せても見た目が変わらなかったリンク（文字のリンクのご指摘を全ページに広げた）
   パンくず・表や文の中のリンク：下線が左から伸びる */
.crumb a,main :is(p,li,dd,dt,td,th,span,small,label) > a:not([class]){background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;padding-bottom:1px;
  transition:background-size var(--dur-soft) var(--ease-soft),color var(--dur-soft) var(--ease-soft)}
.crumb a:hover,main :is(p,li,dd,dt,td,th,span,small,label) > a:not([class]):hover{background-size:100% 1px;color:var(--acc-d)}
/* 枠線のボタン：背景の色だけでなく、少し浮いて矢印が進む（CTA と同じ動き） */
.btn.line:not(.fcta){transition:background var(--dur-soft) var(--ease-soft),transform var(--dur-soft) var(--ease-soft),box-shadow var(--dur-soft) var(--ease-soft)}
.btn.line:not(.fcta):hover{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(0,58,229,.45)}
.btn.line .ar{transition:transform var(--dur-soft) var(--ease-soft)}
.btn.line:not(.fcta):hover .ar{transform:translateX(3px)}
/* コラムの注目記事：写真が寄り、題が青になる */
.cfeat img{transition:transform .9s var(--ease-soft)}
.cfeat:hover img{transform:scale(1.03)}
.cfeat h2,.cfeat h3{transition:color var(--dur-soft) var(--ease-soft)}
.cfeat:hover h2,.cfeat:hover h3{color:var(--acc-d)}
/* ページ内の目次のリンク：普段は下線を薄くし、乗せたら濃くする */
.toc a{border-bottom-color:rgba(0,58,229,.28)}
.toc a:hover{border-bottom-color:currentColor}

/* 縦に並ぶ手順の線：最初の丸の中心から最後の丸の中心まで（長さは js/rails.js が測って --rl-top・--rl-h に入れる。10/29 のご指摘） */
.ph2 ol.rl::before,.ph2 ol.rl .fill,.rail.rl::before,.rail.rl .bar,.gapd.rl .gp-tr,ol.ln.rl::before,ol.ln.rl::after{top:var(--rl-top);height:var(--rl-h);bottom:auto;left:var(--rl-x)}
.proc.rl .tr{top:var(--rl-top);height:var(--rl-h);left:var(--rl-x)}
.gapd.rl .gp-tr i{height:50%}
@media (max-width:1080px){
  /* 階段（Consulting の進め方）：最後の段の線は丸で止める */
  .stair .sc:last-child .tread{bottom:auto;height:12px}
}

/* Safari：p・li・dd の text-wrap:pretty を Safari は行の長さをそろえる方へ強く効かせ、右が大きく空く（10/29 のご指摘：実機で折り返しが狭い）。
   Safari だけが持つ hanging-punctuation で見分けて、Safari では通常の折り返しに戻す */
@supports (hanging-punctuation:first) and (-webkit-appearance:none){
  p,li,dd{text-wrap:wrap}
}

/* 下向きの矢印（スマホ）：線と矢じりの中心をそろえる（10/29 のご指摘：矢印が左にずれる・線と先がずれる）
   Consulting：線を左端を軸に回していたため、回したあと左へ 13px ずれていた。中心を軸に回す
   ほかのページ：幅 2px の線を left:50% に置くと、中心より 1px 右に寄る。半分戻す */
@media (max-width:1080px){
  .fl i{transform-origin:center}
  .s3 .ln::before,.dg-ar::before,.ba .ar::before{margin-left:-1px}
}

/* IT Solution の進め方（スマホ）：最初へ戻る点線が実線のすぐ横を縦に走り、流れが分かりにくい（10/29 のご指摘）
   縦の点線と矢じりをやめ、最後の工程の下に、丸の列にそろえた「戻る」の印と文を置く */
@media (max-width:1080px){
  .proc:has(+ .loopln)::before,.proc:has(+ .loopln)::after{display:none}
  .loopln{margin-top:26px;padding:14px 0 0 46px;border-top:1px dashed rgba(16,166,251,.45)}
  .loopln::before{content:"";position:absolute;left:0;top:12px;width:24px;height:24px;border:0;border-radius:50%;background:var(--acc-l,#eef4ff);
    -webkit-mask:none;box-shadow:inset 0 0 0 1.5px rgba(16,166,251,.55)}
  .loopln::after{content:"";position:absolute;left:5px;top:17px;width:14px;height:14px;background:var(--acc);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 3.5v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 3.5v5h-5'/%3E%3C/svg%3E") center/contain no-repeat}
  .loopln span{padding-top:1px;word-break:auto-phrase;line-break:strict}
}

/* 日本語の折り返し（js/phrase.js と組で使う。10/30 社内の確認）
   短い文：「、」「。」の区切りが1行に収まるなら、ひとかたまりで折り返す
   長い本文：語の切れ目にこだわらず行いっぱいまで詰める（右の空きを作らない） */
jw-cl,jw-st,jw-in{display:inline}
jw-cl.keep,jw-st.keep,.mark.keep{display:inline-block}
.jw-body{word-break:normal!important;overflow-wrap:anywhere;line-break:strict}
/* 行の長さをそろえるのは見出しだけ（本文にかけると行が短くなり、実機で「折り返しが狭い」になる） */
:is(h1,h2,h3,h4,h5,b,dt).jw-short{text-wrap:balance}
:is(p,li,dd,small,span,td,th).jw-short{text-wrap:wrap}
jw-nw,.jw-nowrap{white-space:nowrap}
/* 表のセル：語の途中で切らない（コラムの比較表で「ケー／ス」「技術難易／度」） */
th,td{line-break:strict}
.jw-short{word-break:auto-phrase}

/* トップの事業のカード（Consulting・IT Solution）：「詳しく見る」を横一列にそろえる（10/30 社内の確認） */
.sol-sub .sub{grid-template-rows:auto 1fr;align-content:stretch}
.sol-sub .sub > div{display:flex;flex-direction:column;align-items:center;height:100%}
.sol-sub .sub .more{margin-top:auto;padding-top:14px}
@media (min-width:1081px){
  /* 私たちについて：3つの言葉をそれぞれ1行で読めるよう、左の列を広げる */
  main .who{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px}
  main .h2.vow{font-size:clamp(22px,2.2vw,28px)}
  /* 最初の画面の説明文：「変革を共につくり切る。」の幅にそろえて折り返す */
  .fv .lead{max-width:31em}
}
/* 最初の画面の説明文：句読点と「までを」のあとでだけ改行する（10/30 社内の確認：「変革を共につくり切る。」の幅で「までを／一つの」と切りたい） */
.fv .lead{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (min-width:1081px){
}
/* 代表の言葉：文の区切りで改行できるよう、幅を少し広げる */
.photoband.ceo p{max-width:520px}
/* トップの事業のカード（スマートフォン）：説明を2行に収める（10/30 社内の確認）。図を少し小さくして、文の幅を広げる */
@media (max-width:760px){
  main .fv-biz a{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px 12px}
  main .fv-biz .fig,main .fv-biz .fvb-ill{height:64px}
}

/* 本文の中の手作業の改行止め（.nb）は、行末まで詰める本文では外す（「…までを／、同じ」と読点で行が始まるため） */
.jw-body .nb{white-space:normal}
/* インタビューの出典の一文：「掲載元の記事を開く ↗」を折り返さない */
p.src a{white-space:nowrap}
/* コラムの比較表の見出しは折り返さない（「技術難易／度」を防ぐ）。表は横にスクロールする */
.abody th{white-space:nowrap}

/* トップの Consulting・IT Solution のカード：幅の狭い PC でも説明を2行に収める（10/30 社内の確認） */
@media (min-width:1081px){
  main .sol-sub .sub{padding-left:20px;padding-right:20px}
  main .sol-sub .sub .t+p{font-size:13.5px}
}