/* White support section with an ascending ribbon and staggered portraits. */
.web-support {
  --support-teal: #197ca9;
  --support-yellow: #edf7fc;
  --support-ease: cubic-bezier(.33, 1, .68, 1);
  position: relative;
  background: #fff;
  color: #253a4c;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(74px, 7.2vw, 108px) 0 60px;
  text-align: center;
  scroll-margin-top: 85px;
}
.web-support__inner {width: min(1100px, calc(100% - 64px)); margin-inline: auto;}
.web-support__eyebrow {display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 26px; font-size: 21px; font-weight: 700; line-height: 1.5;}
.web-support__eyebrow::before, .web-support__eyebrow::after {content: ''; height: 25px; width: 2px; background: currentColor; transform: rotate(-20deg);}
.web-support__eyebrow::after {transform: rotate(20deg);}
.web-support__heading h2 {font: 700 clamp(30px, 3.5vw, 47px)/1.6 'Noto Sans JP', sans-serif; letter-spacing: .015em;}
.web-support__accent {color: #248bb6;}
.web-support__relationship {position: relative; margin-top: 24px; padding-top: 0;}
.web-support__intro, .web-support__closing {font-size: 15px; line-height: 1.9; letter-spacing: .015em;}
.web-support__intro {position: relative; z-index: 2; width: 440px; max-width: 100%; margin-inline: auto;}
.web-support__closing {position: relative; z-index: 2; margin: 26px auto 0; width: 440px; max-width: 100%;}
.web-support__services {margin: 66px auto 0; max-width: 1008px;}
.web-support__services h3 {position: relative; width: fit-content; margin: 0 auto 30px; padding: 8px 30px; border-radius: 100px; background: #edf7fc; color: #197ca9; font: 700 24px/1.5 'Noto Sans JP', sans-serif; letter-spacing: .02em;}
.web-support__services h3::after {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top: 12px solid #edf7fc;}
.web-support__topics {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none;}
.web-support__topic {min-width: 0;}
.web-support__topic-art {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--support-yellow); color: var(--support-teal);}
.web-support__topic-art > svg {width: 69%; height: 69%;}
.web-support__check {position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #fff;}
.web-support__check svg {width: 70%; stroke: var(--support-teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}
.web-support__topic-label {display: block; margin-top: 13px; font-size: 14px; font-weight: 700; line-height: 1.7; letter-spacing: 0;}
.web-support__cta {display: inline-flex; align-items: center; justify-content: center; gap: 28px; width: 355px; max-width: 100%; min-height: 74px; margin-top: 52px; padding: 18px 24px; border-radius: 100px; background: linear-gradient(100deg, #276cae, #24aabc); color: #fff; font-weight: 700; font-size: 22px; line-height: 1.5; box-shadow: 0 10px 24px #00595135; transition: transform .2s, box-shadow .2s;}
.web-support__cta:hover {transform: translateY(-3px); box-shadow: 0 14px 24px #00595150;}
.web-support__cta:focus-visible {outline: 3px solid #197ca9; outline-offset: 6px;}
.web-support-in-view .floating-offer {opacity: 0; visibility: hidden; pointer-events: none;}
@media (max-width: 1100px) {
  .web-support__intro {width: 365px; font-size: 14px;}
  .web-support__closing {position: static; transform: none; width: auto; margin-top: 26px;}
}
@media (max-width: 900px) {
  .web-support__inner {width: min(680px, calc(100% - 48px));}
  .web-support__heading h2 {max-width: 650px; margin-inline: auto; font-size: clamp(28px, 4.8vw, 40px);}
  .web-support__services {margin-top: 40px;}
  .web-support__topics {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; max-width: 520px; margin-inline: auto;}
}
@media (max-width: 540px) {
  .web-support {padding: 68px 0 42px;}
  .web-support__inner {width: calc(100% - 40px);}
  .web-support__eyebrow {font-size: 14px; margin-bottom: 20px; gap: 10px;}
  .web-support__eyebrow::before, .web-support__eyebrow::after {height: 21px;}
  .web-support__heading h2 {font-size: clamp(24px, 6.8vw, 34px); letter-spacing: .01em; max-width: 440px;}
  .web-support__accent {white-space: nowrap;}
  .web-support__relationship {margin-top: 22px;}
  .web-support__intro, .web-support__closing {font-size: 13px; line-height: 1.9;}
  .web-support__closing {margin-top: 24px;}
  .web-support__services {margin-top: 34px;}
  .web-support__services h3 {font-size: 17px; padding: 8px 24px; margin-bottom: 28px;}
  .web-support__cta {font-size: 19px; min-height: 64px; margin-top: 34px;}
  .web-support__topics {gap: 23px 14px;}
  .web-support__topic-label {font-size: 11px; margin-top: 10px;}
}
@media (prefers-reduced-motion: reduce) {.web-support__cta {transition: none;}}

/* Independent transparent portrait, connected conversation and staggered bubbles. */
.web-support__scene {position:relative; width:100%; height:600px; margin:32px auto 0; isolation:isolate;}
.web-support__ribbon {position:absolute; z-index:0; width:120%; height:74%; left:-10%; top:24%; overflow:visible; pointer-events:none; opacity:.68;}
.web-support__ribbon-path {stroke-dasharray:1 1; stroke-dashoffset:0;}
.web-support__person {position:absolute; z-index:2; margin:0; transform-origin:50% 70%;}
.web-support__person--student {width:27%; left:7%; top:210px;}
.web-support__person--marke {width:34%; right:6%; top:126px;}
.web-support__portrait {position:relative; width:100%; overflow:hidden;}
.web-support__portrait--student {aspect-ratio:610 / 780;}
.web-support__portrait--student img {position:absolute; top:0; height:100%; max-width:none; object-fit:fill; width:320%; left:0;}
.web-support__portrait--marke {aspect-ratio: .82; border-radius:0 0 46% 46%;}
.web-support__portrait--marke img {display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;}
.web-support__person figcaption {position:relative; width:fit-content; margin:10px auto 0; padding:6px 20px; background:#fff; border:1px solid #91bfd1; border-radius:100px; font-size:14px; font-weight:700; white-space:nowrap;}
.web-support__person--marke figcaption {color:#167fb8; border-color:#58b4de;}
.web-support__ai {position:absolute; top:15%; right:4%; display:grid; place-items:center; width:59px; height:59px; border-radius:50%; color:#fff; background:linear-gradient(140deg,#2d86df,#41c4d3); font:700 28px/1 'Poppins',sans-serif; transform:rotate(10deg); box-shadow:0 5px 18px #258bb61a;}
.web-support__connection {position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none;}
.web-support__conversation {position:absolute; z-index:3; left:calc(50% - 47px); top:calc(64.66% - 35px); width:95px; height:70px; color:#248bb6;}
.web-support__conversation span {position:absolute; display:grid; place-items:center; width:56px; height:43px; border:2px solid #43a8c7; border-radius:15px; background:#fff; font:700 29px/1 sans-serif;}
.web-support__conversation span::after {content:''; position:absolute; bottom:-7px; left:11px; width:10px; height:10px; background:inherit; border-bottom:2px solid #43a8c7; border-left:2px solid #43a8c7; transform:skewY(-28deg);}
.web-support__conversation span:last-child {right:0; bottom:0; background:#248bb6; color:#fff; border-color:#248bb6; letter-spacing:3px; font-size:19px;}
.web-support__conversation span:last-child::after {left:auto; right:10px; border-color:#248bb6; transform:skewY(28deg);}
.web-support__bubble {position:absolute; z-index:4; margin:0; padding:13px 23px; border:1.5px solid #b7d9e9; border-radius:22px; background:#fff; color:#314a5b; font-size:18px; font-weight:700; line-height:1.7; box-shadow:0 7px 20px #2277ae0b; transform-origin:var(--tail,50%) bottom;}
.web-support__bubble::after {content:''; position:absolute; bottom:-9px; left:var(--tail,50%); width:16px; height:16px; background:inherit; border-right:1.5px solid #b7d9e9; border-bottom:1.5px solid #b7d9e9; transform:skewY(18deg) rotate(45deg); border-radius:0 0 4px 0;}
.web-support__bubble--q1 {left:2%; top:0; --tail:72%; --pop-delay:.7s;}
.web-support__bubble--q2 {left:9%; top:70px; --tail:29%; --pop-delay:1.12s;}
.web-support__bubble--q3 {left:0; top:143px; --tail:61%; --pop-delay:1.54s;}
.web-support__bubble--answer {right:2%; top:0; width:39%; padding:18px 24px; border:0; background:linear-gradient(110deg,#236ddd,#1aaad0); color:#fff; font-size:20px; line-height:1.6; --tail:56%; --pop-delay:2.12s; box-shadow:0 12px 30px #228bd529;}
.web-support__bubble--answer strong {display:block; margin-bottom:2px; font-size:30px; line-height:1.4;}
.web-support__bubble--answer span {display:block;}
.web-support__bubble--answer::after {background:#2090d6; border:0;}
.support-motion-ready .web-support__ribbon-path {stroke-dasharray:0 1; visibility:hidden;}
.support-motion-ready .web-support__person,.support-motion-ready .web-support__conversation,.support-motion-ready .web-support__connection,.support-motion-ready .web-support__bubble {opacity:0;}
.support-motion-ready.is-support-entering .web-support__ribbon-path {animation:support-ribbon-enter .8s var(--support-ease) both;}
.support-motion-ready.is-support-entering .web-support__person {animation:support-person-enter .75s var(--support-ease) both;}
.support-motion-ready.is-support-entering .web-support__person--student {animation-delay:.2s;}
.support-motion-ready.is-support-entering .web-support__person--marke {animation-delay:.35s;}
.support-motion-ready.is-support-entering .web-support__conversation,.support-motion-ready.is-support-entering .web-support__connection {animation:support-connection-enter .8s .6s var(--support-ease) both;}
.support-motion-ready.is-support-entering .web-support__bubble {animation:support-bubble-pop .7s var(--pop-delay) both;}
@keyframes support-ribbon-enter {from {stroke-dasharray:0 1; visibility:hidden;} to {stroke-dasharray:1 1; visibility:visible;}}
@keyframes support-person-enter {from {opacity:0; transform:translate(-38px,24px) rotate(-4deg);} to {opacity:1; transform:none;}}
@keyframes support-connection-enter {from {opacity:0;} to {opacity:1;}}
@keyframes support-bubble-pop {
  0% {opacity:0; transform:translateY(18px) scale(.65);}
  58% {opacity:1; transform:translateY(-3px) scale(1.055);}
  78% {opacity:1; transform:translateY(2px) scale(.98);}
  100% {opacity:1; transform:translateY(0) scale(1);}
}
@media (min-width:901px) and (max-width:1100px) {
  .web-support__scene {height:570px;}
  .web-support__bubble {font-size:16px;}
  .web-support__bubble--answer {font-size:18px;}
  .web-support__person--student {top:210px;}
  .web-support__person--marke {top:150px;}
}
@media (max-width:900px) {
  .web-support__scene {height:580px; margin-top:30px;}
  .web-support__person--student {width:34%; left:1%; top:262px;}
  .web-support__person--marke {width:45%; right:0; top:195px;}
  .web-support__bubble {font-size:15px; padding:12px 16px;}
  .web-support__bubble--q1 {left:0; top:0;}
  .web-support__bubble--q2 {left:4%; top:65px; width:44%;}
  .web-support__bubble--q3 {left:0; top:158px; width:46%;}
  .web-support__bubble--answer {right:0; top:26px; width:44%; font-size:18px; padding:17px 12px;}
  .web-support__bubble--answer strong {font-size:27px;}
  .web-support__ai {right:0; width:48px; height:48px; font-size:23px;}
  .web-support__conversation {transform:scale(.8);}
  .web-support__closing {margin-top:22px;}
}
@media (max-width:540px) {
  .web-support__scene {height:660px; margin-top:28px;}
  .web-support__bubble {font-size:14px; padding:11px 17px; border-radius:18px;}
  .web-support__bubble--q1 {left:0; top:0;}
  .web-support__bubble--q2 {left:11%; top:63px; width:89%;}
  .web-support__bubble--q3 {left:0; top:150px; width:auto; max-width:94%;}
  .web-support__bubble--answer {right:0; top:234px; width:84%; font-size:17px; padding:14px 13px; --tail:70%;}
  .web-support__bubble--answer strong {font-size:25px;}
  .web-support__person--student {width:43%; left:-2%; top:397px;}
  .web-support__person--marke {width:59%; right:-3%; top:373px;}
  .web-support__ribbon {width:128%; left:-14%; top:47%; height:47%;}
  .web-support__ribbon-path {stroke-width:66;}
  .web-support__connection {top:81px; height:100%;}
  .web-support__conversation {left:calc(44% - 28px); top:calc(64.66% + 60px); width:59px; height:47px; transform:none;}
  .web-support__conversation span {width:36px; height:29px; border-radius:10px; font-size:21px;}
  .web-support__conversation span:last-child {font-size:14px; letter-spacing:1px;}
  .web-support__conversation span::after {width:7px; height:7px; bottom:-5px; left:6px;}
  .web-support__person figcaption {font-size:11px; padding:4px 10px; margin-top:7px;}
  .web-support__ai {width:36px; height:36px; top:15%; right:2%; font-size:19px;}
  .web-support__closing {margin-top:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .web-support__scene *,.web-support__scene *::after {animation:none !important; transition:none !important;}
  .support-motion-ready .web-support__ribbon-path {stroke-dasharray:1 1; visibility:visible;}
  .support-motion-ready .web-support__person,.support-motion-ready .web-support__conversation,.support-motion-ready .web-support__connection,.support-motion-ready .web-support__bubble {opacity:1;}
}