@charset "Shift_JIS";
/* Updated 2026/10/22.T */

/* ============================================================
   insights.css - INSIGHTS INDEX PAGE STYLES
   SP layout is provisional: the SP design is not provided.
   ============================================================ */

/* design tokens (Figma: SMBC Wealth / Insights-index)
============================ */
:root {
  --insights-color-green02: #5E6D44;
  --insights-color-brown01: #7C643C;
  --insights-color-black01: #141D1D;
  --insights-color-gray01: #565B4F;
  --insights-color-black02: #484848;
  --insights-color-yellow03: #FCF9F2;
}

/* Component: page
============================ */
.insights-page {
  background-color: var(--insights-color-yellow03);
}

/* Component: gnav (background) (the nav follows on scroll, so it needs a solid background) */
.gnav.-dark01 {
  background-color: var(--insights-color-yellow03);
}
/* The full-bleed background lives on a pseudo-element so that clip-path never
   clips the fixed drawer (.gnav > .inner > .menu), which is a descendant of .gnav. */
.gnav.-dark01::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--insights-color-yellow03);
  box-shadow: 0 0 0 100vmax var(--insights-color-yellow03);
  clip-path: inset(0 -100vmax);
}

/* Component: index01
============================ */
.insights-index01 {
  max-width: 1312px; /* 1200px + side padding */
  padding-top: 180px;
  padding-bottom: 120px;
}
/* page title: same spec as About / Solutions (48px, 180px above / 60px below; latin words in Sanomat) */
.insights-index01 > .title {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 4.8rem; /* 48px */
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
  color: var(--insights-color-green02);
}
.insights-index01 > .title > .en {
  font-family: var(--font-sanomat);
  font-weight: 300;
  letter-spacing: 0.08em;
}
/* lead: same format as the Solutions intro text. 46px + the title's half-leading (14px) = 60px in Figma */
.insights-index01 > .lead {
  max-width: 656px;
  margin: 46px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 400;
  font-size: 1.6rem; /* 16px */
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  text-align: justify;
  color: var(--insights-color-black02);
}
.insights-index01 > .note {
  margin: 60px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 500;
  font-size: 1.2rem; /* 12px */
  line-height: 1.5;
  color: var(--insights-color-gray01);
}
@media screen and (max-width: 767px) {
  .insights-index01 {
    padding-top: 108px;
    padding-bottom: 96px;
  }
  .insights-index01 > .title {
    font-size: 2.8rem; /* 28px */
  }
  .insights-index01 > .lead {
    margin-top: 32px;
  }
  .insights-index01 > .note {
    margin-top: 40px;
  }
}

/* Component: cardList01
============================ */
.insights-cardList01 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}
.insights-cardList01 > .item {
  --insights-card-color: var(--insights-color-brown01);
}
/* Variants: category colors (tag and right bar) */
.insights-cardList01 > .item.-brown01 {
  --insights-card-color: var(--insights-color-brown01);
}
.insights-cardList01 > .item.-green01 {
  --insights-card-color: var(--insights-color-green02);
}
.insights-cardList01 > .item > .link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 6px solid var(--insights-card-color);
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--insights-color-black01);
  text-decoration: none;
  transition: opacity 0.4s var(--easing1);
}
.insights-cardList01 > .item > .link:hover {
  opacity: 0.7;
}
.insights-cardList01 > .item > .link:visited {
  color: var(--insights-color-black01);
}
.insights-cardList01 > .item > .link > .image {
  display: block;
  line-height: 0;
}
.insights-cardList01 > .item > .link > .image > .icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 564 / 330;
  object-fit: cover;
}
.insights-cardList01 > .item > .link > .body {
  padding: 12px 12px 12px;
}
.insights-cardList01 > .item > .link > .body > .meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.insights-cardList01 > .item > .link > .body > .meta > .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0;
  padding: 0 12px;
  border-radius: 100px;
  background-color: var(--insights-card-color);
  font-family: var(--font-yu-gothic);
  font-weight: 700;
  font-size: 1.2rem; /* 12px */
  line-height: 1;
  color: var(--color-white);
}
/* published date (same data as the current /kojin/asset-management/wealth/ list) */
.insights-cardList01 > .item > .link > .body > .meta > .date {
  margin: 0;
  font-family: var(--font-yu-gothic);
  font-weight: 500;
  font-size: 1.2rem; /* 12px */
  line-height: 1;
  color: var(--insights-color-black01);
}
.insights-cardList01 > .item > .link > .body > .title {
  margin: 4px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 500;
  font-size: 1.4rem; /* 14px */
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .insights-cardList01 {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }
  .insights-cardList01 > .item > .link {
    flex-direction: row;
  }
  .insights-cardList01 > .item > .link > .image {
    flex: 0 0 124px;
  }
  .insights-cardList01 > .item > .link > .image > .icon {
    height: 100%;
    aspect-ratio: 124 / 110;
  }
  .insights-cardList01 > .item > .link > .body {
    flex: 1 1 auto;
    min-width: 0;
  }
}