/* Recommendation-only rules; shared Header, Article headings, CTA and Footer are reused. */
.recommend-page { margin-top: -80px; color: #292929; background: #fff; }
.recommend-layout { display: grid; max-width: 1920px; margin-inline: auto; grid-template-columns: minmax(0, 1270fr) minmax(0, 650fr); align-items: start; }
.recommend-main { min-width: 0; }
.recommend-container { width: min(calc(100% - 40px), 1000px); margin-inline: auto; }
.recommend-prose { width: min(100%, 750px); margin-inline: auto; }
.recommend-prose .article-guide__paragraph { line-height: 24px; text-wrap: wrap; }
.recommend-page .article-guide__emphasis { color: #034afe; }
.recommend-page [id] { scroll-margin-top: 100px; }
.recommend-hero { min-height: 535px; overflow: hidden; background: #f7faff; text-align: center; }
.recommend-hero__inner { position: relative; width: min(calc(100% - 40px), 1000px); min-height: 535px; margin-inline: auto; padding-top: 140px; }
.recommend-hero__badge { position: relative; display: table; margin: 0 auto; padding: 10px 30px; border-radius: 999px; color: #fff; background: #15345c; font-size: 22px; font-weight: 700; line-height: 27px; }
.recommend-hero__badge::after { position: absolute; top: calc(100% - 11px); left: calc(50% - 12px); width: 24px; height: 21px; background: url('../images/icons/recommend-hero-pointer.svg') center top / 24px 21px no-repeat; content: ''; transform: rotate(180deg); }
.recommend-hero h1 { position: relative; z-index: 1; margin: 19px 0 0; font-size: 48px; font-weight: 900; line-height: 58px; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.recommend-hero h1 small { font-size: 38px; }
.recommend-hero h1 strong { color: #fe4e06; font-weight: 900; }
.recommend-hero__first { position: relative; display: flex; width: max-content; height: 58px; align-items: baseline; margin-inline: auto; }
.recommend-hero__first::before { position: absolute; z-index: -1; top: 44px; left: 50%; width: 390px; height: 15px; border: 3px solid #000; border-radius: 999px; background: #ffec39; content: ''; transform: translateX(-50%); }
.recommend-hero__second { display: flex; height: 58px; align-items: baseline; justify-content: center; margin-top: 3px; white-space: nowrap; }
.recommend-hero__second b { display: inline-block; font-size: 50px; transform: rotate(15deg); }
.recommend-hero__lead { position: relative; z-index: 1; width: min(100%, 651px); margin: 37px auto 0; font-size: 22px; font-weight: 700; line-height: 33px; }
.recommend-hero__person { position: absolute; bottom: 0; width: 230px; height: 173px; }
.recommend-hero__person--woman { left: 0; }
.recommend-hero__person--man { right: 0; }
.recommend-intro { min-height: 268px; padding: 50px 20px; }
.recommend-toc { min-height: 607px; padding: 50px 20px 30px; }
.recommend-toc__box { width: min(100%, 750px); margin-inline: auto; padding: 30px; border: 1px solid #d9d9d9; border-radius: 10px; }
.recommend-toc__title { margin: 0 0 20px; color: #000; font-size: 22px; font-weight: 700; line-height: 33px; text-align: center; }
.recommend-toc ol, .recommend-toc ul { margin: 0; padding: 0; list-style: none; }
.recommend-toc ol { display: flex; flex-direction: column; gap: 20px; }
.recommend-toc ol > li { display: flex; align-items: start; }
.recommend-toc__number { flex: 0 0 29px; padding: 5px 5px 5px 0; border-right: 2px solid #1862e0; color: #1862e0; font-size: 16px; font-weight: 700; line-height: 16px; text-align: center; }
.recommend-toc ol > li > div { flex: 1; min-width: 0; padding-left: 5px; }
.recommend-toc a { display: block; color: #000; font-size: 16px; font-weight: 400; line-height: 24px; text-decoration: none; }
.recommend-toc a:hover { text-decoration: underline; }
.recommend-toc ul { display: flex; flex-direction: column; gap: 10px; padding-block: 5px; }
.recommend-toc a span { color: #1862e0; }
.recommend-toc__detail { margin-top: 5px; padding-left: 30px; }
.recommend-comparison { min-height: 1400px; padding-top: 50px; }
.recommend-catch { margin: 50px 0 0; font-size: 28px; font-weight: 700; line-height: 34px; text-align: center; }
.recommend-catch > span { display: block; }
.recommend-catch strong, .recommend-catch b { font-size: 36px; line-height: 45px; }
.recommend-catch strong { color: #fe4e06; }
.recommend-table-area { padding: 44px 10px 51px; }
.recommend-table-frame { position: relative; }
.recommend-table-hint { display: none; }
.recommend-table-scroll { max-width: 100%; overflow-x: auto; filter: drop-shadow(0 10px 14px rgb(11 37 84 / 8%)); -webkit-overflow-scrolling: touch; }
.recommend-table { width: 980px; min-width: 980px; overflow: hidden; border: 1px solid #e2e8f0; border-bottom: 0; border-spacing: 0; border-radius: 18px; table-layout: fixed; color: #192230; background: #fff; font-size: 13px; font-weight: 400; line-height: 1.35; }
.recommend-table thead { height: 64px; color: #fff; background: #fe4e06; font-weight: 700; }
.recommend-table th, .recommend-table td { padding: 6px; border-bottom: 1px solid #e2e8f0; text-align: center; }
.recommend-table tbody tr { height: 90px; }
.recommend-table tbody th { padding-left: 20px; color: #0b2554; font-size: 15px; font-weight: 700; text-align: left; }
.recommend-table tbody tr:nth-child(odd) { background: #f8fbff; }
.recommend-table tbody td:first-of-type { font-weight: 500; }
.recommend-table tbody tr.recommend-table__featured { background: #fff6f1; }
.recommend-table__featured td:nth-child(2), .recommend-table__featured td:nth-child(3) { color: #db3900; font-weight: 700; }
.recommend-table__badge { display: block; width: fit-content; margin-bottom: 6px; padding: 5px 10px; border-radius: 999px; color: #fff; background: #fe4e06; font-size: 12px; line-height: 12px; }
.recommend-official { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 2px solid #292929; border-radius: 4px; color: #292929; background: #ffec39; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; text-decoration: none; }
.recommend-official img { flex: 0 0 auto; }
.recommend-official:hover { filter: brightness(1.04); }
.recommend-table .recommend-official { width: 106px; margin-inline: auto; }
.recommend-details { min-height: 6040px; padding: 89px 0 53px; }
.recommend-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px 32px; }
.recommend-details .recommend-card-grid { grid-auto-rows: minmax(1163px, auto); }
.recommend-card { --recommend-accent: #fe4e06; --recommend-border: #ffe1d3; --recommend-light: #fff3e8; display: flex; min-width: 0; min-height: 1163px; align-items: center; flex-direction: column; gap: 25px; padding: 20px 15px; border: 2px solid var(--recommend-accent); border-radius: 10px; background: #fff9e8; }
.recommend-card[data-service='no1'], .recommend-card[data-service='escom'], .recommend-card[data-service='nextone'] { min-height: 1135px; }
.recommend-card[data-service='sankyo'] { min-height: 1166px; }
.recommend-card[data-service='japan-management'] { min-height: 1162px; }
.recommend-card--quote { --recommend-accent: #034afe; --recommend-border: #cadff4; --recommend-light: #f1f9fd; min-height: 795px; background: #f1f9fd; }
.recommend-card__header { display: flex; width: 100%; min-height: 137px; flex-direction: column; gap: 10px; }
.recommend-card--quote .recommend-card__header { min-height: 97px; }
.recommend-card__name { display: flex; min-height: 35px; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 900; line-height: 1.15; }
.recommend-card__name::before { flex: 0 0 35px; height: 5px; border-radius: 3px; background: var(--recommend-accent); content: ''; }
.recommend-card__catch { display: flex; flex-direction: column; gap: 5px; }
.recommend-card__catch p { margin: 0; font-size: 18px; font-weight: 900; line-height: 24px; }
.recommend-card__catch p:first-child { color: var(--recommend-accent); line-height: 23px; }
.recommend-card__tags { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.recommend-card__tags li { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--recommend-accent); font-size: 14px; font-weight: 700; line-height: 20px; }
.recommend-card__tags img { flex: 0 0 20px; }
.recommend-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; line-height: 0; }
.recommend-card__visual { position: relative; flex: 0 0 auto; width: min(100%, 356px); height: 200px; overflow: hidden; border: 1px solid var(--recommend-accent); border-radius: 18px; }
.recommend-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recommend-card__visual--bion img { left: -29.21%; width: 158.63%; max-width: none; }
.recommend-card__visual--top-management img { top: -0.07%; left: -8.12%; width: 116.23%; max-width: none; }
.recommend-card__metrics { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.recommend-card__metrics > div { display: flex; min-width: 0; min-height: 120px; align-items: center; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 2px; border: 1px solid #ffe8db; border-radius: 16px; background: #fff; text-align: center; }
.recommend-card__metric-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 50%; background: var(--recommend-accent); }
.recommend-card__metrics dt, .recommend-card__metrics dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 16px; }
.recommend-card__metrics dd { color: var(--recommend-accent); font-weight: 900; }
.recommend-card__company { width: 100%; }
.recommend-card__section-label { margin: 0 0 5px; font-size: 18px; font-weight: 900; line-height: 21px; }
.recommend-card__company dl { margin: 0; overflow: hidden; border: 1px solid #e4eaf1; border-radius: 5px; }
.recommend-card__company dl > div { display: grid; min-height: 40px; grid-template-columns: 107px minmax(0, 1fr); border-bottom: 1px solid #e4eaf1; background: #fff; }
.recommend-card__company dl > div:last-child { border-bottom: 0; }
.recommend-card__company dt { display: grid; align-items: center; padding: 8px 5px; color: #082248; background: #fffaf5; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; }
.recommend-card__company dd { display: flex; align-items: center; margin: 0; padding: 8px 5px; color: #192537; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
.recommend-card__lists { display: flex; width: 100%; flex-direction: column; gap: 15px; }
.recommend-card__list { width: 100%; padding-bottom: 5px; overflow: hidden; border: 1px solid var(--recommend-border); border-radius: 5px; background: #fff; }
.recommend-card__list-title { display: flex; min-height: 42px; align-items: center; gap: 12px; margin: 0; padding: 9px 20px; color: #fff; background: var(--recommend-accent); font-size: 16px; line-height: 18px; }
.recommend-card__list-title > img, .recommend-card__list-title > picture { flex: 0 0 24px; border-radius: 50%; background: #fff; }
.recommend-card__list--for .recommend-card__list-title { color: var(--recommend-accent); background: var(--recommend-light); }
.recommend-card__list-title strong { font-weight: 900; }
.recommend-card__list ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 5px 10px; list-style: none; }
.recommend-card[data-service='sankyo'] .recommend-card__list--points ul { gap: 3px; }
.recommend-card__list li { display: flex; min-height: 20px; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.recommend-card__list li img { flex: 0 0 20px; }
.recommend-card__official { width: min(100%, 350px); margin-top: auto; }
.recommend-quotes, .recommend-choices { background: #f7faff; }
.recommend-quotes { padding: 50px 0; border-radius: 150px 150px 0 0; }
.recommend-question { position: relative; height: 311px; }
.recommend-question__catch { position: absolute; top: 55px; left: 50%; width: 384px; margin: 0; font-size: 32px; font-weight: 900; line-height: 38px; text-align: center; transform: translateX(-50%); }
.recommend-question strong { color: #fe4e06; }
.recommend-question__sp-break { display: none; }
.recommend-question__person { position: absolute; top: 0; width: 190px; height: 190px; }
.recommend-question__person--man { left: 80px; }
.recommend-question__person--woman { right: 80px; }
.recommend-question__bubble { position: absolute; right: 50px; bottom: 0; left: 50px; min-height: 140px; padding: 20px 15px 45px; background: url('../images/icons/recommend-bubble.svg') center / 100% 100% no-repeat; text-align: center; }
.recommend-question__bubble p { margin: 0; font-size: 28px; font-weight: 700; line-height: 36px; }
.recommend-question__bubble p + p { font-size: 22px; }
.recommend-quotes__heading { position: relative; isolation: isolate; margin: 10px 0 0; font-size: 28px; font-weight: 700; line-height: 34px; text-align: center; }
.recommend-quotes__heading::before, .recommend-quotes__heading::after { position: absolute; z-index: -1; top: 29px; left: 50%; width: min(100%, 590px); height: 15px; border: 3px solid #000; border-radius: 999px; background: #ffec39; content: ''; transform: translateX(-50%); }
.recommend-quotes__heading::after { display: none; }
.recommend-quotes .recommend-prose { margin-top: 30px; }
.recommend-quotes .recommend-card-grid, .recommend-category .recommend-card-grid { margin-top: 30px; }
.recommend-choices { padding-bottom: 64px; }
.recommend-choices__intro { margin-top: 20px; }
.recommend-category { margin-top: 30px; }
.recommend-category + .recommend-category { margin-top: 50px; }
.recommend-page .article-guide__h3 { padding-left: 45px; }
.recommend-page .article-guide__h3::before { left: 25px; }
.recommend-page .article-guide__h3 > span { color: #034afe; }
.recommend-category > .recommend-prose { margin-top: 10px; }
.recommend-sidebar { min-width: 0; padding: 110px 20px 50px; }
.recommend-sidebar__inner { display: flex; width: min(100%, 360px); flex-direction: column; align-items: center; gap: 15px; margin-inline: auto; padding-bottom: 15px; }
.recommend-sidebar__inner > a { display: block; max-width: 100%; }
.recommend-sidebar img { width: 356px; height: auto; }
.recommend-sidebar__heading { margin: 0; font-size: 20px; line-height: 24px; }
.recommend-sidebar__lead { margin: 25px 0 -5px; font-size: 16px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.recommend-sidebar__lead::before { content: '＼'; }
.recommend-sidebar__lead::after { content: '／'; }
.recommend-sidebar__inner > .recommend-sidebar__magazine { display: grid; width: 335px; min-height: 60px; place-items: center; margin-bottom: 25px; padding: 10px; border: 1px solid #292929; border-radius: 999px; color: #292929; background: #fbbb28; box-shadow: 0 4px #000; font-size: 16px; font-weight: 900; line-height: 24px; text-align: center; text-decoration: none; }

@media (max-width: 1439px) {
  .recommend-layout { grid-template-columns: minmax(0, 1fr); }
  .recommend-sidebar { padding-top: 50px; }
  .recommend-hero__inner { width: min(calc(100% - 40px), 1000px); }
}

@media (max-width: 1199px) {
  .recommend-card-grid { grid-template-columns: minmax(0, 484px); justify-content: center; }
  .recommend-details .recommend-card-grid { grid-auto-rows: auto; }
  .recommend-details { min-height: 0; padding: 50px 0; }
  .recommend-comparison { min-height: 0; }
  .recommend-question__person--man { left: 20px; }
  .recommend-question__person--woman { right: 20px; }
}

@media (max-width: 899px) {
  .recommend-page { margin-top: -50px; }
  .recommend-page [id] { scroll-margin-top: 70px; }
  .recommend-hero__person { width: 180px; height: auto; }
  .recommend-hero__lead { max-width: calc(100% - 120px); }
}

@media (max-width: 599px) {
  .recommend-container { width: min(calc(100% - 13px), 380px); }
  .recommend-prose { width: min(calc(100% - 28px), 365px); }
  .recommend-hero, .recommend-hero__inner { min-height: 584px; }
  .recommend-hero__inner { width: 100%; max-width: 393px; padding-top: 95px; }
  .recommend-hero__badge { width: 280px; padding: 10px 20px; font-size: 22px; line-height: 26px; }
  .recommend-hero__sp-break { display: block; }
  .recommend-hero h1 { margin-top: 27px; font-size: 32px; line-height: 38px; -webkit-text-stroke-width: 2px; }
  .recommend-hero h1 small { font-size: 26px; }
  .recommend-hero__first::before { top: 30px; width: 268px; height: 10px; border-width: 2px; }
  .recommend-hero__first, .recommend-hero__second { height: 38px; }
  .recommend-hero__second { margin-top: 4px; font-size: clamp(26px, 8.14vw, 32px); }
  .recommend-hero__second small { font-size: .8125em; }
  .recommend-hero__second b { font-size: 1.074em; }
  .recommend-hero__lead { width: min(calc(100% - 28px), 365px); max-width: none; margin-top: 34px; font-size: 22px; line-height: 33px; }
  .recommend-hero__person { width: min(48.5%, 190px); height: auto; }
  .recommend-intro { min-height: 412px; padding: 50px 0; }
  .recommend-intro .article-guide__paragraph { line-height: 24px; }
  .recommend-toc { min-height: 747px; padding: 50px 0; }
  .recommend-toc__box { width: min(calc(100% - 13px), 380px); padding: 30px 4px; }
  .recommend-toc__detail { max-width: 330px; padding-left: 30px; }
  .recommend-page .article-guide__h2 { align-items: start; gap: 16px; padding: 24px 25px; font-size: 28px; line-height: 42px; }
  .recommend-page .article-guide__h2 > span:last-child { letter-spacing: 0; }
  .recommend-page #recommend-services-title { flex-direction: column; padding: 10px 15px; }
  .recommend-page .article-guide__h3 { font-size: 22px; line-height: 35px; }
  .recommend-catch { font-size: 28px; line-height: 34px; }
  .recommend-catch__sp-break { display: block; }
  .recommend-table-area { padding: 38px 6px 50px; }
  .recommend-table-hint { position: absolute; z-index: 1; top: calc(20% - 25px); left: 50%; display: flex; width: 120px; min-height: 85px; align-items: center; flex-direction: column; gap: 5px; padding: 10px 8px 8px; border-radius: 5px; color: #fff; background: rgb(0 0 0 / 70%); opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .3s; }
  .recommend-table-hint.is-visible { opacity: .8; }
  .recommend-table-hint > span { font-size: 10px; font-weight: 400; line-height: 12px; white-space: nowrap; }
  .recommend-table-scroll { width: 100%; padding-left: 10px; }
  .recommend-details { padding-top: 70px; }
  .recommend-card { width: 100%; padding-inline: 8px; }
  .recommend-card__metrics { gap: 2px; }
  .recommend-card__visual { max-width: calc(100% - 4px); }
  .recommend-card__company dl > div { grid-template-columns: minmax(75px, 30%) minmax(0, 1fr); }
  .recommend-card__lists { width: 100%; }
  .recommend-card__official { width: min(calc(100% - 10px), 350px); }
  .recommend-quotes { border-top-left-radius: 50px; border-top-right-radius: 50px; }
  .recommend-question { height: 415px; }
  .recommend-question__catch { top: -20px; width: min(100%, 360px); }
  .recommend-question__pc-break { display: none; }
  .recommend-question__sp-break { display: initial; }
  .recommend-question__person { top: 70px; width: 130px; height: 130px; }
  .recommend-question__person--man { left: -4px; }
  .recommend-question__person--woman { right: -4px; }
  .recommend-question__bubble { right: 0; bottom: 0; left: 0; min-height: 198px; padding: 20px 30px 35px; background-image: url('../images/icons/recommend-bubble-sp.svg'); }
  .recommend-question__last { display: block; }
  .recommend-quotes__heading { width: min(100%, 360px); margin: 12px auto 0; line-height: 42px; }
  .recommend-quotes__heading::before { width: calc(100% - 5px); }
  .recommend-quotes__heading::after { display: block; top: 70px; width: 224px; }
  .recommend-quotes .recommend-prose { margin-top: 40px; }
  .recommend-quotes .recommend-catch { margin-top: 30px; }
  .recommend-card--quote { min-height: 814px; }
  .recommend-category > .recommend-prose { width: min(calc(100% - 16px), 365px); margin-top: 20px; }
  .recommend-choices__intro { width: min(calc(100% - 16px), 365px); }
  .recommend-sidebar { padding: 50px 14px; }
  .recommend-sidebar__inner > .recommend-sidebar__magazine { box-shadow: none; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  .recommend-table-hint { transition: none; }
}

@media (max-width: 374px) {
  .recommend-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .recommend-card__visual { height: auto; aspect-ratio: 356 / 200; }
  .recommend-question__bubble { padding-inline: 20px; }
  .recommend-question__bubble p { font-size: 24px; line-height: 32px; }
  .recommend-question__bubble p + p { font-size: 20px; line-height: 30px; }
  .recommend-question__catch { font-size: 28px; }
  .recommend-quotes__heading::after { width: 252px; }
  .recommend-sidebar__lead { font-size: 14px; }
}