/* pages/linkedin-solutions.css — linkedin.css から自動で分割。このページだけで使う記述 */
/* =========================================================
   LinkedIn製品一覧（ハブ）
   ========================================================= */
.hub-title { font-size: clamp(30px, 3.3vw, 46px) !important; line-height: 1.5; }
.hub-title .hv { white-space: nowrap; }
.hv { color: #b9c3ce; transition: color .4s; }
.hv.is-on { color: var(--li); }

/* ファーストビュー：3枚のカードが入れ替わる */
.hx { display: grid; padding: 36px 32px 8px 0; }
.hx__card { grid-area: 1 / 1; align-self: start; transition: transform .7s var(--ease), opacity .7s var(--ease); transform: translate(-24px, 24px) scale(.96); opacity: 0; z-index: 1; }
.hx__card.is-next { transform: translate(36px, -30px) scale(.94); opacity: .5; z-index: 2; filter: saturate(.4); }
.hx__card.is-on { transform: none; opacity: 1; z-index: 3; }
.hx__tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 7px 16px 7px 8px; border-radius: 999px; background: var(--white); box-shadow: 0 8px 20px rgba(10, 52, 102, .1); font-size: 13px; transition: opacity .3s; }
.hx__card:not(.is-on) .hx__tag { opacity: 0; }
.hx__tag b { font-weight: 500; color: #fff; background: var(--li); border-radius: 999px; padding: 3px 12px; }

/* 目的から選ぶ（.pk） */
.pk { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

@media (max-width: 900px) {
  .hx { padding: 32px 20px 0 0; }
  .hub-title { font-size: 28px !important; }
  .pk { grid-template-columns: 1fr; }
}
/* 会社ページのイメージ（導入支援） */    
@media (prefers-reduced-motion: reduce) { .hx__card { transition: none; }  }

/* ======================================================================
   2026/10 画面の簡略図（.lm）：スクリーンショットの代わりにHTMLで描く。
   大きさは font-size で決まる（冒頭は大きく、カードでは小さく）
   ====================================================================== */
.lm { font-size: 13px; background: #fff; border: 1px solid #dfe3e8; border-radius: 1em; box-shadow: 0 2em 4em rgba(10, 52, 102, .12); overflow: hidden; color: var(--ink); line-height: 1.5; text-align: left; }
.lm__bar { display: flex; align-items: center; gap: .7em; padding: .8em 1.1em; border-bottom: 1px solid #e6e9ec; }
.lm__bar img { width: 1.25em; height: auto; }
.lm__bar b { font-size: 1.05em; font-weight: 500; color: #0a66c2; }
.lm__q { margin-left: auto; min-width: 0; padding: .3em .8em; border-radius: .4em; background: #eef3f8; font-size: .82em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm__cnt { padding: .9em 1.1em .3em; font-size: .85em; color: var(--ink-2); }
.lm__cnt b { font-family: var(--font-en); font-size: 1.35em; font-weight: 500; color: var(--ink); margin-right: .25em; }
/* 採用ツール */
.lm__row { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto auto; align-items: center; gap: .7em; margin: 0 1.1em; padding: .75em 0; border-top: 1px solid #eef0f2; }
.lm__row:last-child { margin-bottom: .4em; }
.lm__av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; font-style: normal; font-size: 1em; color: #fff; }
.lm__av--a { background: #3a6ea5; } .lm__av--b { background: #b0677a; } .lm__av--c { background: #5b8a72; }
.lm__who { min-width: 0; }
.lm__who b { display: block; font-size: .95em; font-weight: 500; color: #0a66c2; }
.lm__who small { display: block; font-size: .78em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm__tag { font-style: normal; font-size: .72em; padding: .15em .6em; border-radius: .3em; background: #e6f4ea; color: #057642; white-space: nowrap; }
.lm__btn { text-decoration: none; font-size: .78em; padding: .3em 1em; border-radius: 99px; background: #0a66c2; color: #fff; white-space: nowrap; }
/* ラーニング */
.lm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; padding: .5em 1.1em .9em; }
.lm__c { display: grid; gap: .25em; min-width: 0; }
.lm__th { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: .5em; color: #fff; }
.lm__th i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); }
.lm__th i svg { width: .8em; height: .8em; margin-left: .1em; }
.lm__th small { position: absolute; right: .5em; bottom: .4em; font-size: .7em; padding: 0 .4em; border-radius: .3em; background: rgba(0, 0, 0, .45); }
.lm__th--t1 { background: linear-gradient(135deg, #5b8a72, #2f5d4a); } .lm__th--t2 { background: linear-gradient(135deg, #3a6ea5, #20446d); }
.lm__th--t3 { background: linear-gradient(135deg, #e0a03a, #b9721a); } .lm__th--t4 { background: linear-gradient(135deg, #b0677a, #7d3f52); }
.lm__c b { font-size: .82em; font-weight: 500; line-height: 1.4; }
.lm__c > small { font-size: .7em; color: var(--ink-2); }
.lm__prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .8em 1.1em; border-top: 1px solid #eef0f2; font-size: .8em; color: var(--ink-2); }
.lm__prog i { height: .45em; border-radius: 1em; background: #eef0f2; overflow: hidden; }
.lm__prog i b { display: block; height: 100%; background: #057642; }
.lm__prog em { font-style: normal; font-family: var(--font-en); color: var(--ink); font-weight: 500; }
/* 広告 */
.lm__tg { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: .9em 1.1em .2em; }
.lm__tg small { font-size: .75em; color: var(--ink-2); margin-right: .2em; }
.lm__tg span { font-size: .75em; padding: .15em .7em; border-radius: 99px; background: #e8f1fb; color: #0a66c2; }
.lm__post { margin: .7em 1.1em 1.1em; border: 1px solid #e6e9ec; border-radius: .7em; overflow: hidden; }
.lm__co { display: flex; align-items: center; gap: .6em; padding: .7em .8em .4em; }
.lm__logo { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .4em; border: 1px solid #dfe3e8; font-style: normal; font-size: .7em; color: #0a66c2; }
.lm__co b { display: block; font-size: .85em; font-weight: 500; } .lm__co small { display: block; font-size: .7em; color: var(--ink-2); }
.lm__txt { padding: 0 .8em .6em; font-size: .85em; }
.lm__img { display: grid; align-content: end; aspect-ratio: 16 / 7; padding: .8em; background: linear-gradient(120deg, #0a3e74, #0a66c2 60%, #2eb8de); color: #fff; }
.lm__img b { font-size: 1.1em; font-weight: 500; } .lm__img small { font-size: .75em; opacity: .85; }
.lm__cta { display: flex; justify-content: flex-end; padding: .6em .8em; }
.lm__cta span { font-size: .78em; padding: .3em 1.1em; border-radius: 99px; border: 1px solid #0a66c2; color: #0a66c2; }

/* 冒頭：大きめに表示 */
.hx .lm { font-size: clamp(12px, 1.15vw, 15px); }

/* ======================================================================
   目的から選ぶ（.pg）：タブで隠さず、全部を並べる
   ====================================================================== */
.pg { display: grid; gap: 16px; }
.pg__main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg__c { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pg__c:hover { border-color: #c9d6e3; box-shadow: 0 18px 40px rgba(10, 52, 102, .1); transform: translateY(-2px); }
.pg__vis { padding: 20px 20px 0; background: linear-gradient(180deg, #eef4fa, #f7f9fb); height: 220px; overflow: hidden; }
.pg__vis .lm { font-size: 10.5px; box-shadow: 0 1em 2.4em rgba(10, 52, 102, .1); }
.pg__body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; flex: 1; }
.pg__cat { font-size: 12px; letter-spacing: .1em; color: #0a66c2; }
.pg__q { font-size: 18px; font-weight: 500; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.pg__nm { font-size: 13px; color: var(--ink-2); }
.pg__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg__s { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px 24px; padding: 22px 64px 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.pg__s:hover { border-color: #c9d6e3; box-shadow: 0 14px 32px rgba(10, 52, 102, .08); }
.pg__sh { display: grid; gap: 4px; }
.pg__s .pg__q { font-size: 16px; }
.pg__arr { position: absolute; right: 20px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
.pg__arr .btn__arrow { width: 13px; }
.pg__s:hover .pg__arr { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 1000px) {
  .pg__main { grid-template-columns: 1fr; }
  .pg__c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg__vis { height: auto; padding-bottom: 20px; display: flex; align-items: center; }
  .pg__sub { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pg__c { display: flex; }
  .pg__vis { height: 190px; padding-bottom: 0; align-items: flex-start; }
  .pg__s { grid-template-columns: 1fr; padding-right: 56px; }
}
/* 冒頭の3枚は同じ高さにそろえ、重なりをきれいに見せる */
.hx .lm { height: 25em; }
.hx .lm--learn .lm__th { aspect-ratio: 16 / 6.4; }
.lm__img { aspect-ratio: 16 / 5.5; }
.lm__logo { width: 2em; height: 2em; border: 0; background: linear-gradient(135deg, #0a66c2, #2eb8de); }
/* 文字を減らした版：数字は1つ、カード全体を押せる（右下の矢印） */
.pg__c { position: relative; }
.pg__body { gap: 4px; padding: 22px 24px 26px; }
.pg__one { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.pg__one b { font-family: var(--font-en); font-size: 24px; font-weight: 300; color: var(--ink); margin-right: 6px; letter-spacing: -.01em; }
.pg__c .pg__arr { top: auto; bottom: 24px; right: 24px; margin-top: 0; }
.pg__c:hover .pg__arr { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg__s .pg__one { margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line); }
@media (max-width: 640px) { .pg__s .pg__one { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .pg__s .pg__arr { top: 22px; margin-top: 0; } }