/* TOP editorial refinement. All rules are contained in the TOP main element. */
.top-editorial {
  --tp-max: 1120px;
  --tp-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-family: var(--tp-sans);
  color: #151515;
  background: #fff;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .025em;
}
.top-editorial *, .top-editorial *::before, .top-editorial *::after { box-sizing: border-box; }
.top-editorial > section { border: 0; }
.top-editorial h1, .top-editorial h2, .top-editorial h3, .top-editorial p, .top-editorial figure, .top-editorial dl { margin: 0; }
.top-editorial h1, .top-editorial h2, .top-editorial h3 { font-family: var(--font-heading); font-weight: 600; word-break: normal; }
.top-editorial p { font-size: inherit; line-height: inherit; word-break: normal; }
.top-editorial .tp-container { width: min(calc(100% - 96px), var(--tp-max)); margin-right: auto; margin-left: auto; }
.top-editorial .tp-kicker { margin: 0 0 26px; font: 500 10px/1.8 var(--tp-sans); letter-spacing: .12em; }
.top-editorial .tp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; padding: 40px 0 52px; margin-bottom: 44px; }
.top-editorial .tp-hero .tp-kicker { margin-bottom: 18px; }
.top-editorial .tp-hero h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.5; letter-spacing: -.025em; }
.top-editorial .tp-hero h1 > span { display: block; }
.top-editorial .tp-hero-lead { margin-top: 22px; font-size: 15px; line-height: 2; }
.top-editorial .tp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.top-editorial .tp-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 180px; padding: 13px 19px; border: 1px solid #222; font-size: 12px; line-height: 1.8; }
.top-editorial .tp-button-dark { color: #fff; background: #111; }
.top-editorial .tp-button:hover { border-color: #777; }
.top-editorial .tp-button-dark:hover { background: #333; }
.top-editorial .tp-hero-visual { width: 100%; max-width: 420px; justify-self: center; }
.top-editorial .tp-hero-visual img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 78% center; }
.top-editorial .tp-section { margin-bottom: 88px; padding: 26px 0 0; border-top: 1px solid #d3d3d3; scroll-margin-top: 94px; }
.top-editorial .tp-paired { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; width: 100%; max-width: 940px; }
.top-editorial .tp-copy { min-width: 0; }
.top-editorial .tp-copy h2, .top-editorial .tp-company-lead h2 { margin-bottom: 25px; font-size: clamp(30px, 3.1vw, 40px); line-height: 1.7; letter-spacing: -.025em; }
.top-editorial .tp-copy h2 > span, .top-editorial .tp-company-lead h2 > span { display: block; }
.top-editorial .tp-copy p, .top-editorial .tp-company-lead > p { max-width: 560px; font-size: 15px; font-weight: 400; line-height: 2.05; }
.top-editorial .tp-copy p + p { margin-top: 18px; }
.top-editorial .tp-copy > p:first-of-type, .top-editorial .tp-company-lead > p { text-wrap: balance; }
.top-editorial .tp-office { justify-self: center; width: 100%; max-width: 400px; }
.top-editorial .tp-office img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 52%; border-radius: 0; }
.top-editorial .tp-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-bottom: 88px; }
.top-editorial .tp-audience > a { padding: 25px 0; border-top: 1px solid #888; border-bottom: 1px solid #d3d3d3; }
.top-editorial .tp-audience .tp-kicker { margin-bottom: 17px; }
.top-editorial .tp-audience h2 { margin-bottom: 16px; font-size: 27px; line-height: 1.8; letter-spacing: -.02em; }
.top-editorial .tp-audience h2 > span { display: block; }
.top-editorial .tp-link { display: flex; width: fit-content; max-width: 100%; justify-content: space-between; align-items: center; gap: 30px; font: 500 12px/1.9 var(--tp-sans); }
.top-editorial .tp-link > span { flex: 0 0 auto; }
.top-editorial .tp-audience .tp-link { margin-top: 24px; }
.top-editorial a:hover .tp-link, .top-editorial a.tp-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.top-editorial .tp-services-lead { max-width: 720px; margin: 0 0 30px; font-size: 15px; line-height: 2; }
.top-editorial .tp-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; grid-auto-rows: 1fr; }
.top-editorial .tp-service { display: grid; grid-template-rows: 22px 112px 90px minmax(0, 1fr) 24px; gap: 12px; min-width: 0; padding: 20px 0 23px; border-top: 1px solid #aaa; border-bottom: 1px solid #d3d3d3; border-radius: 0; background: #fff; box-shadow: none; }
.top-editorial .tp-service-phase { display: flex; align-items: center; gap: 18px; color: #666; font-size: 11px; line-height: 1.8; }
.top-editorial .tp-service-phase > span { color: #333; font: 17px/1.4 Georgia, serif; }
.top-editorial .tp-service-logo { display: flex; align-items: center; justify-content: center; height: 112px; }
.top-editorial .tp-service-logo img { display: block; height: 108px; max-width: 100%; object-fit: contain; }
.top-editorial .tp-service-logo .logo-base { width: 128px; }
.top-editorial .tp-service-logo .logo-nanimono { width: 122px; }
.top-editorial .tp-service-logo .logo-house { width: 164px; }
.top-editorial .tp-service-logo .logo-agent { width: 220px; }
.top-editorial .tp-service-heading h3 { min-height: 27px; margin: 0 0 12px; font: 600 17px/1.6 var(--tp-sans); letter-spacing: -.01em; white-space: nowrap; }
.top-editorial .tp-service-heading p { color: #555; font-size: 12px; line-height: 1.9; }
.top-editorial .service-category-line { display: block; white-space: nowrap; }
.top-editorial .tp-service-description { font-size: 13px; font-weight: 400; line-height: 2; }
.top-editorial .tp-service > .tp-link { align-self: end; }
.top-editorial .tp-link-spacer { display: block; height: 24px; }
.top-editorial .tp-service-static, .top-editorial .tp-service-static:hover { cursor: default; transform: none; color: inherit; background: #fff; box-shadow: none; }
.top-editorial .tp-company-lead h2 { font-size: clamp(29px, 2.65vw, 36px); }
.top-editorial .tp-company-lead > p { margin-bottom: 25px; }
.top-editorial .tp-company-profile { border-top: 1px solid #aaa; }
.top-editorial .tp-company-profile > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 22px; padding: 15px 0; border-bottom: 1px solid #ddd; }
.top-editorial .tp-company-profile dt { color: #666; font-size: 11px; line-height: 2; }
.top-editorial .tp-company-profile dd { margin: 0; font-size: 13px; line-height: 2; }
.top-editorial .tp-company-profile dd > span { font-size: 11px; color: #666; }
.top-editorial .tp-company-link { margin-top: 24px; }
.top-editorial .tp-feature { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 42px; padding: 0 0 28px; border-bottom: 1px solid #ccc; }
.top-editorial .tp-feature figure { overflow: hidden; }
.top-editorial .tp-feature img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 68% 18%; }
.top-editorial .tp-article-meta { margin-bottom: 15px; color: #666; font-size: 11px; line-height: 1.8; letter-spacing: .035em; }
.top-editorial .tp-feature h3 { margin: 0 0 26px; font-size: clamp(23px, 2vw, 28px); line-height: 1.85; letter-spacing: -.02em; }
.top-editorial .tp-feature-quote, .top-editorial .tp-feature-context { display: block; }
.top-editorial .tp-feature-quote > span, .top-editorial .tp-feature-context > span { display: inline-block; max-width: 100%; }
.top-editorial .tp-feature-context { margin-top: 12px; font-size: 20px; line-height: 1.9; }
.top-editorial .tp-latest { margin-top: 25px; }
.top-editorial .tp-latest > .tp-kicker { margin-bottom: 17px; font-size: 9px; color: #777; }
.top-editorial .tp-latest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.top-editorial .tp-latest-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; }
.top-editorial .tp-latest-item > img { width: 112px; height: 84px; object-fit: cover; }
.top-editorial .tp-latest-item .tp-article-meta { margin-bottom: 8px; font-size: 10px; }
.top-editorial .tp-latest-item h3 { font-size: 18px; line-height: 1.8; letter-spacing: -.02em; }
.top-editorial .tp-media-more { margin-top: 28px; }
.top-editorial .tp-media-extra { margin-top: 30px; border-top: 1px solid #e0e0e0; color: #666; font-size: 12px; }
.top-editorial .tp-media-extra summary { width: fit-content; padding: 15px 0; cursor: pointer; }
.top-editorial .tp-media-extra-body { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; padding: 10px 0 15px; }
.top-editorial .tp-media-extra h3 { margin-bottom: 12px; font: 500 12px/1.8 var(--tp-sans); }
.top-editorial .tp-media-extra p { margin-bottom: 13px; font-size: 12px; line-height: 1.9; }
.top-editorial .tp-media-extra a { font-size: 11px; text-underline-offset: 4px; }
.top-editorial .tp-media-extra a:hover { text-decoration: underline; }
.top-editorial .tp-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.top-editorial a:focus-visible, .top-editorial summary:focus-visible { outline: 2px solid #333; outline-offset: 5px; }
@media (max-width: 1199px) {
  .top-editorial .tp-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
  .top-editorial .tp-service { grid-template-rows: 22px 112px 78px minmax(0, 1fr) 24px; }
  .top-editorial .tp-service-heading h3 { font-size: 19px; }
  .top-editorial .tp-service-description { font-size: 14px; }
}
@media (max-width: 1023px) {
  .top-editorial .tp-container { width: calc(100% - 64px); }
  .top-editorial .tp-paired { gap: 32px; }
  .top-editorial .tp-hero { gap: 32px; }
  .top-editorial .tp-hero h1 { font-size: 42px; }
  .top-editorial .tp-button { min-width: 160px; padding: 12px 14px; gap: 16px; }
  .top-editorial .tp-hero-actions { gap: 12px; }
  .top-editorial .tp-feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; }
}
@media (max-width: 899px) {
  .top-editorial .tp-paired { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .top-editorial .tp-copy, .top-editorial .tp-company-lead { max-width: 640px; }
  .top-editorial .tp-office { max-width: 400px; }
  .top-editorial .tp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 26px; }
  .top-editorial .tp-hero h1 { font-size: 36px; }
  .top-editorial .tp-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 230px; }
  .top-editorial .tp-audience { gap: 32px; }
  .top-editorial .tp-audience h2 { font-size: 24px; }
}
@media (max-width: 699px) {
  .top-editorial { letter-spacing: .015em; }
  .top-editorial .tp-container { width: calc(100% - 44px); }
  .top-editorial .tp-kicker { font-size: 9px; margin-bottom: 22px; }
  .top-editorial .tp-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 0 0; margin-bottom: 56px; }
  .top-editorial .tp-hero h1 { font-size: clamp(32px, 8.5vw, 38px); line-height: 1.6; }
  .top-editorial .tp-hero-lead { margin-top: 18px; font-size: 14px; line-height: 2; }
  .top-editorial .tp-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 12px; margin-top: 24px; }
  .top-editorial .tp-button { min-width: 0; font-size: 11px; padding: 12px 10px; gap: 8px; }
  .top-editorial .tp-hero-visual { max-width: none; }
  .top-editorial .tp-hero-visual img { aspect-ratio: 16 / 10; }
  .top-editorial .tp-section { margin-bottom: 56px; padding-top: 22px; scroll-margin-top: 86px; }
  .top-editorial .tp-copy h2 { font-size: 29px; line-height: 1.8; margin-bottom: 21px; }
  .top-editorial .tp-copy p { font-size: 15px; line-height: 2; }
  .top-editorial .tp-copy p + p { margin-top: 17px; }
  .top-editorial .tp-paired { gap: 26px; }
  .top-editorial .tp-audience { grid-template-columns: minmax(0, 1fr); gap: 25px; margin-bottom: 56px; }
  .top-editorial .tp-audience > a { padding: 21px 0; }
  .top-editorial .tp-audience h2 { font-size: 25px; }
  .top-editorial .tp-services-lead { font-size: 14px; margin-bottom: 25px; }
  .top-editorial .tp-services-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; grid-auto-rows: auto; }
  .top-editorial .tp-service { grid-template-rows: 22px 100px 78px auto 24px; gap: 10px; padding: 20px 0; }
  .top-editorial .tp-service-logo { height: 100px; }
  .top-editorial .tp-service-logo img { height: 100px; }
  .top-editorial .tp-service-heading h3 { font-size: 20px; }
  .top-editorial .tp-service-description { font-size: 14px; }
  .top-editorial .tp-company-lead h2 { font-size: 27px; line-height: 1.85; margin-bottom: 20px; }
  .top-editorial .tp-company-lead > p { font-size: 15px; }
  .top-editorial .tp-company-profile > div { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 14px 0; }
  .top-editorial .tp-company-profile dd { font-size: 12px; }
  .top-editorial .tp-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 24px; }
  .top-editorial .tp-feature h3 { font-size: 21px; line-height: 1.85; margin-bottom: 21px; }
  .top-editorial .tp-article-meta { font-size: 10px; margin-bottom: 12px; }
  .top-editorial .tp-latest-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .top-editorial .tp-latest-item { grid-template-columns: 100px minmax(0, 1fr); gap: 17px; }
  .top-editorial .tp-latest-item > img { width: 100px; height: 75px; }
  .top-editorial .tp-latest-item h3 { font-size: 16px; }
  .top-editorial .tp-latest-item .tp-article-meta { font-size: 9px; margin-bottom: 6px; }
  .top-editorial .tp-media-extra-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
