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

/* ============================================================
   solutions.css - SOLUTIONS PAGE STYLES
   ============================================================ */

/* design tokens (Figma: SMBC Wealth / Solutions)
============================ */
:root {
  --solutions-color-green01: #2A3910;
  --solutions-color-green02: #43522A;
  --solutions-color-primary: #5E6D44;
  --solutions-color-green05: #E6E9E1;
  --solutions-color-black02: #484848;
  --solutions-color-yellow02: #EDE0B8;
  --solutions-color-yellow03: #FCF9F2;
  --solutions-color-visualBg: rgba(100, 109, 57, 0.05);
}

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

/* Sanomat is applied to latin words inside Japanese headings */
.solutions-intro01 > .body > .title > .en,
.solutions-strength01 > .title > .en {
  font-family: var(--font-sanomat);
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* Component: intro01
============================ */
.solutions-intro01 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-top: 180px;
  padding-bottom: 181px;
}
.solutions-intro01 > .body {
  max-width: 656px;
}
.solutions-intro01 > .body > .title {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 4.8rem; /* 48px */
  line-height: 1.6;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  color: var(--solutions-color-green01);
  white-space: nowrap;
}
.solutions-intro01 > .body > .lead {
  margin: 61px 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(--solutions-color-black02);
}
@media screen and (max-width: 767px) {
  .solutions-intro01 {
    flex-direction: column;
    gap: 39px;
    padding-top: 108px;
    padding-bottom: 80px;
  }
  .solutions-intro01 > .body > .title {
    font-size: 2.8rem; /* 28px */
    white-space: normal;
  }
  .solutions-intro01 > .body > .lead {
    margin-top: 99px;
  }
}

/* Component: chart01 (4 solutions around the customer)
============================ */
.solutions-chart01 {
  position: relative;
  flex: 0 0 406px;
  width: 406px;
  height: 406px;
  margin-top: 18px;
  margin-right: 40px;
}
.solutions-chart01 > .center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  margin: 0;
  border: 1px solid var(--solutions-color-green02);
  border-radius: 50%;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 2rem; /* 20px */
  line-height: 1.9;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
  color: var(--solutions-color-green02);
  transform: translate(-50%, -50%);
}
.solutions-chart01 > .cell {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background-color: var(--solutions-color-primary);
  background-image: url("/kojin/smbcwealth/solutions/imgs/index_bg_01_webp.webp"); /* paper texture (Figma) */
  background-position: center;
  background-size: cover;
  text-align: center;
  color: var(--color-white);
}
.solutions-chart01 > .cell > .num {
  font-family: var(--font-sanomat);
  font-weight: 300;
  font-size: 1.4rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.04em;
}
.solutions-chart01 > .cell > .name {
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 1.6rem; /* 16px */
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
}
/* Variants: -pos01 - -pos04 (clockwise from the top) */
.solutions-chart01 > .cell.-pos01 {
  top: 0;
  left: 129px;
}
.solutions-chart01 > .cell.-pos02 {
  top: 129px;
  left: 0;
}
.solutions-chart01 > .cell.-pos03 {
  top: 129px;
  left: 258px;
}
.solutions-chart01 > .cell.-pos04 {
  top: 258px;
  left: 129px;
}
/* Blur-in order: 01, 02, 03, 04, then the center.
   Starts when the loading overlay is removed (body.-isLoaded, common.js)
   so that the sequence is not hidden behind the overlay. */
.solutions-chart01 > .cell,
.solutions-chart01 > .center {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s var(--easing1), filter 1s var(--easing1);
}
.-isLoaded .solutions-chart01 > .cell,
.-isLoaded .solutions-chart01 > .center {
  opacity: 1;
  filter: blur(0px);
}
.solutions-chart01 > .cell.-pos01 {
  transition-delay: 0.4s;
}
.solutions-chart01 > .cell.-pos02 {
  transition-delay: 0.6s;
}
.solutions-chart01 > .cell.-pos03 {
  transition-delay: 0.8s;
}
.solutions-chart01 > .cell.-pos04 {
  transition-delay: 1s;
}
.solutions-chart01 > .center {
  transition-delay: 1.2s;
}
@media screen and (max-width: 767px) {
  /* Figma: 329px at 375px. Shrinks with the viewport below 361px so that it fits in 320px (guideline: no extra breakpoint). */
  .solutions-chart01 {
    --solutions-chart-size: min(329px, calc(100vw - 32px));
    flex-basis: auto;
    width: var(--solutions-chart-size);
    height: var(--solutions-chart-size);
    /* center even when the chart is wider than the content box (375px: 311px), where auto margins would stick it to the left */
    margin: 0 calc((100% - var(--solutions-chart-size)) / 2);
  }
  /* sizes and positions are ratios of the 329px chart: 136 / 120 / 105 / 209 */
  .solutions-chart01 > .center {
    width: 41.338%;
    height: 41.338%;
    font-size: clamp(1.4rem, 4.27vw, 1.6rem); /* 16px at 375px */
  }
  .solutions-chart01 > .cell {
    gap: 10px;
    width: 36.474%;
    height: 36.474%;
  }
  .solutions-chart01 > .cell > .num {
    font-size: clamp(0.9rem, 2.94vw, 1.1rem); /* 11px at 375px */
  }
  .solutions-chart01 > .cell > .name {
    font-size: clamp(1.1rem, 3.47vw, 1.3rem); /* 13px at 375px */
  }
  .solutions-chart01 > .cell.-pos01 {
    left: 31.915%;
  }
  .solutions-chart01 > .cell.-pos02 {
    top: 31.915%;
  }
  .solutions-chart01 > .cell.-pos03 {
    top: 31.915%;
    left: 63.526%;
  }
  .solutions-chart01 > .cell.-pos04 {
    top: 63.526%;
    left: 31.915%;
  }
}

/* Tablet (768-1280px): the chart would be cut off at the right edge
   when placed beside the text, so stack it under the intro text. */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .solutions-intro01 {
    flex-direction: column;
    gap: 80px;
  }
  .solutions-chart01 {
    flex: 0 0 auto;
    margin: 0 auto;
  }
}

/* Component: block01 (one solution: text column + visual)
============================ */
.solutions-block01 {
  padding-bottom: 120px;
  scroll-margin-top: 77px; /* anchor target (#solution01 - #solution04 from Top): keep the sticky gnav (77px) clear */
}
.solutions-block01 + .solutions-block01 {
  margin-top: 80px;
  padding-bottom: 0;
}
/* keep the bottom space inside the grid row so the sticky visual travels past the last card before it stops */
.solutions-block01 + .solutions-block01 > .inner > .body {
  padding-bottom: 120px;
}
/* the last block also keeps 120px below the visual, before CONTACT (PC only: the visual is not sticky on SP) */
@media screen and (min-width: 768px) {
  .solutions-block01.-last01 {
    padding-bottom: 120px;
  }
}
.solutions-block01 > .inner {
  display: grid;
  grid-template-columns: minmax(0, 656fr) minmax(0, 544fr);
  column-gap: 128px;
  align-items: start;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}
/* the visual stays fixed below the gnav (77px) while the text scrolls, with a 24px gap below the gnav border */
.solutions-block01 > .inner > .visual {
  position: sticky;
  top: 101px;
  display: block;
  overflow: hidden;
  aspect-ratio: 544 / 725;
  border-radius: 4px;
  background-color: var(--solutions-color-visualBg);
}
.solutions-block01 > .inner > .visual > .icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solutions-block01 > .inner > .body {
  padding-top: 81px;
}
.solutions-block01 > .inner > .body > .head {
  position: relative;
  padding: 57px 0 0 72px;
}
.solutions-block01 > .inner > .body > .head > .num {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: var(--font-sanomat);
  font-weight: 300;
  font-size: 9.6rem; /* 96px */
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.2;
  color: var(--solutions-color-green01);
}
.solutions-block01 > .inner > .body > .head > .txt > .title {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 3.2rem; /* 32px */
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
  color: var(--solutions-color-green01);
}
.solutions-block01 > .inner > .body > .head > .txt > .text {
  margin: 16px 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(--solutions-color-black02);
}
@media screen and (max-width: 767px) {
  .solutions-block01 + .solutions-block01 {
    margin-top: 0;
  }
  .solutions-block01 > .inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 54px;
    padding: 0 32px;
  }
  .solutions-block01 > .inner > .visual {
    position: static;
    margin: 0 -32px;
    aspect-ratio: 1 / 1;
    border-radius: 0;
  }
  .solutions-block01 > .inner > .body {
    order: 2;
    padding-top: 0;
  }
  .solutions-block01 > .inner > .body > .head {
    padding: 51px 0 0 43px;
  }
  .solutions-block01 > .inner > .body > .head > .num {
    font-size: 8rem; /* 80px */
  }
  .solutions-block01 > .inner > .body > .head > .txt > .title {
    font-size: 2.4rem; /* 24px */
  }
  .solutions-block01 > .inner > .body > .head > .txt > .text {
    margin-top: 20px;
  }
}

/* Component: cardList01
============================ */
.solutions-cardList01 {
  margin: 71px 0 0 72px;
  padding: 0;
  list-style: none;
  color: var(--solutions-color-green01);
}
.solutions-cardList01 > .item {
  padding: 24px 32px 25px;
  border-radius: 4px;
  background-color: var(--solutions-color-green05);
}
.solutions-cardList01 > .item + .item {
  margin-top: 16px;
}
.solutions-cardList01 > .item > .title {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 2rem; /* 20px */
  line-height: 1.5;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
}
.solutions-cardList01 > .item > .text {
  margin: 10px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 400;
  font-size: 1.6rem; /* 16px */
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  text-align: justify;
}
.solutions-cardList01 > .item > .note {
  margin: 18px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 400;
  font-size: 1.2rem; /* 12px */
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .solutions-cardList01 {
    margin: 39px 0 0;
  }
}

/* Component: strength01 (SMBC group strengths, solution 01 only)
============================ */
.solutions-strength01 {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 87px auto 0;
  padding: 0 56px;
  color: var(--solutions-color-green01);
}
.solutions-strength01 > .title {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 2rem; /* 20px */
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
}
.solutions-strength01 > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.solutions-strength01 > .list > .item {
  padding: 5px 0 0 24px;
  border-left: 1px solid var(--solutions-color-yellow02);
}
.solutions-strength01 > .list > .item > .name {
  margin: 0;
  font-family: var(--font-noto-serif);
  font-weight: 400;
  font-size: 1.8rem; /* 18px */
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: "palt" 1;
}
.solutions-strength01 > .list > .item > .en {
  margin: 4px 0 0;
  font-family: var(--font-sanomat);
  font-weight: 300;
  font-size: 1.4rem; /* 14px */
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.solutions-strength01 > .list > .item > .text {
  margin: 12px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 400;
  font-size: 1.6rem; /* 16px */
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  text-align: justify;
  color: var(--solutions-color-black02);
}
.solutions-strength01 > .list > .item > .note {
  margin: 12px 0 0;
  font-family: var(--font-yu-gothic);
  font-weight: 400;
  font-size: 1.2rem; /* 12px */
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  text-align: justify;
  color: var(--solutions-color-black02);
}
@media screen and (max-width: 767px) {
  .solutions-strength01 {
    margin-top: 71px;
    padding: 0 32px;
  }
  .solutions-strength01 > .list {
    grid-template-columns: minmax(0, 1fr);
    gap: 33px;
  }
}