@charset "utf-8";

:root {
    --solution-black: #000;
    --solution-white: #fff;
}
/* PCではヘッダーを透過してヒーローに重ねる */
@media (min-width: 769px) {
    .main {
        padding-top: 0;
    }
}
.solution-hero {
    height: 100vh;
    min-height: 680rem;
    position: relative;
}
.solution-hero-stage {
    height: 100svh;
    min-height: 680rem;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.solution-hero-image,
.solution-hero-overlay {
    inset: 0;
    position: absolute;
}
/* pictureはinline要素のままだとimgのheight:100%が効かないためblock化する */
.solution-hero-image picture,
.solution-project-image picture,
.solution-future-image picture {
    display: block;
    height: 100%;
}
.solution-hero-image img,
.solution-hero-video,
.solution-interview-image img,
.solution-project-image img,
.solution-future-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.solution-hero-line {
    background: linear-gradient(90deg, #11d46e 0%, #116e55 20%, #119b74 50%, #11fe5d 75%, #9dfffc 95%);
    bottom: 0;
    display: block;
    height: 10rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.solution-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 19.529%, rgba(0, 0, 0, 0.25) 100%);
}
/* PCはメインビジュアルの上下左右中央に置く（SPは左下寄せのまま） */
.solution-hero-title-wrap {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.solution-hero-title,
.solution-section-title,
.solution-business-title,
.solution-business-question,
.solution-why-title {
    font-family: "Avenir Next", "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}
.solution-hero-title {
    color: var(--solution-white);
    font-size: clamp(80rem, 18.75vw, 270rem);
}
.solution-hero-title-lottie {
    aspect-ratio: 1159 / 399;
    display: block;
    height: calc(1325rem / 1159 * 399);
    width: 1325rem;
}
.solution-hero-title-lottie svg {
    display: block;
    height: 100%;
    width: 100%;
}
.solution-hero-title-text {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.solution-intro {
    background: var(--solution-white);
    position: relative;
}
.solution-business-motion {
    --business-title-font: clamp(60rem, 16.6vw, 240rem);
    --business-circle-size: min(680rem, 65svh);
    --business-center-shift: 1%;
    --business-circle-progress: 0;
    --business-content-progress: 0;
    --business-engineer-progress: 0;
    --business-origin-progress: 0;
    --business-question-progress: 0;
    --business-split-progress: 0;
    --business-title-progress: 0;
    height: 500svh;
    position: relative;
}
.solution-intro-sticky {
    height: 100svh;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.solution-business {
    height: 100%;
    margin-inline: auto;
    max-width: 1980px;
    position: relative;
    transform: translateY(calc(var(--business-title-progress) * (1 - var(--business-split-progress)) * var(--business-center-shift)));
    width: 100%;
}
.solution-business-title {
    font-family: "Avenir Next", "Inter", sans-serif;
    font-size: var(--business-title-font);
    left: calc(5.2% + var(--business-title-progress) * 44.8%);
    letter-spacing: 0;
    margin: 0;
    opacity: calc(1 - var(--business-engineer-progress));
    position: absolute;
    top: calc(50% - var(--business-title-progress) * (1% + max(var(--business-circle-size) * 0.49, var(--business-title-font))));
    transform: translate(calc(var(--business-title-progress) * -6.275%), calc(-50% + var(--business-title-progress) * 50%))
        scale(calc(1 - var(--business-title-progress) * 0.8745));
    transform-origin: left top;
    white-space: nowrap;
    z-index: 3;
}
.solution-business-diagram {
    height: var(--business-circle-size);
    left: 50%;
    opacity: var(--business-circle-progress);
    position: absolute;
    top: 49%;
    transform: translate(-50%, calc(-50% + (1 - var(--business-circle-progress)) * 65vh));
    width: calc(var(--business-circle-size) * 2);
}
.solution-business-circle {
    align-items: center;
    border: 1px solid var(--solution-black);
    border-radius: 50%;
    display: flex;
    height: var(--business-circle-size);
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    width: var(--business-circle-size);
}
.solution-business-circle-origin {
    opacity: calc(var(--business-circle-progress) * (1 - var(--business-origin-progress)));
    transform: translate(-50%, -50%) scale(calc(0.42 + var(--business-circle-progress) * 0.58));
}
.solution-business-circle-engineer {
    border-color: transparent;
    opacity: var(--business-split-progress);
    transform: translate(calc(-50% - var(--business-split-progress) * 50%), -50%);
    z-index: 2;
}
.solution-business-circle-engineer::before {
    border: 1px solid var(--solution-black);
    border-radius: inherit;
    content: "";
    inset: -1px;
    opacity: calc(1 - var(--business-engineer-progress));
    pointer-events: none;
    position: absolute;
}
.solution-business-circle-sales {
    opacity: calc(var(--business-split-progress) * (1 - var(--business-engineer-progress)));
    transform: translate(calc(-50% + var(--business-split-progress) * 50%), -50%);
}
.solution-business-circle-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--business-circle-size) * 0.0147);
    opacity: calc(var(--business-content-progress) * (1 - var(--business-engineer-progress)));
    width: calc(var(--business-circle-size) * 0.6064);
}
.solution-business-circle-title {
    font-family: "Avenir Next", "Inter", sans-serif;
    font-size: max(24px, calc(var(--business-circle-size) * 0.1084));
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
}
.solution-business-circle-engineer .solution-business-circle-content {
    opacity: var(--business-content-progress);
}
.solution-business-circle-engineer .solution-business-circle-title {
    line-height: calc(1 - var(--business-engineer-progress) * 0.068);
    position: relative;
    transform: translate(calc(var(--business-engineer-progress) * (var(--business-circle-size) * 0.8032 - 44.8vw)), calc(var(--business-engineer-progress) * -3svh))
        scale(calc(1 + var(--business-engineer-progress) * 1.8807));
    transform-origin: left top;
    white-space: nowrap;
    z-index: 4;
}
.solution-business-circle-text {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: calc(var(--business-circle-size) * 0.03335);
    font-weight: 700;
    line-height: 2.1;
    margin: 0;
    white-space: nowrap;
}
.solution-business-circle-engineer .solution-business-circle-text {
    opacity: calc(1 - var(--business-engineer-progress));
}
.solution-business-point {
    background: var(--solution-black);
    border-radius: 50%;
    height: calc(var(--business-circle-size) * 0.0235);
    left: calc(50% - var(--business-circle-size) * 0.01175);
    opacity: calc(var(--business-split-progress) * (1 - var(--business-engineer-progress)));
    position: absolute;
    top: calc(50% - var(--business-circle-size) * 0.01175);
    width: calc(var(--business-circle-size) * 0.0235);
}
.solution-business-copy {
    border-inline: 1px solid var(--solution-black);
    left: 50%;
    opacity: calc(var(--business-content-progress) * (1 - var(--business-engineer-progress)));
    padding: 10rem max(0px, calc((var(--business-circle-size) - 384rem) / 2)) calc(var(--business-circle-size) * 0.0147);
    position: absolute;
    top: calc(49% + var(--business-circle-size) * 0.4559);
    transform: translate(-50%, calc((1 - var(--business-content-progress)) * 60rem));
    width: var(--business-circle-size);
}
.solution-business-copy-title {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 19rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
.solution-business-copy-text {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 16rem;
    font-weight: 500;
    line-height: 1.6;
    margin: calc(var(--business-circle-size) * 0.0221) 0 0;
}
.solution-business-question-prefix {
    bottom: 100%;
    display: block;
    left: 0;
    opacity: var(--business-question-progress);
    position: absolute;
}
.solution-business-question-suffix {
    display: inline-block;
    opacity: var(--business-question-progress);
    width: 0;
}
.solution-definition {
    padding: 120rem 5.2vw 200rem;
}
.solution-definition-copy {
    margin: 0 auto;
    max-width: 1360rem;
}
.solution-definition-statement {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: clamp(22rem, 3.2vw, 46rem);
    font-weight: 700;
    line-height: 2;
    margin: 0;
}
.solution-definition-lead {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: clamp(24rem, 3.5vw, 50rem);
    font-weight: 700;
    line-height: 1.8;
    margin: 140rem 0 0;
}

.solution-section-inner {
    margin-inline: auto;
    max-width: 1280rem;
}
.solution-interview {
    background: var(--solution-black);
    color: var(--solution-white);
    padding: 130rem 0 240rem;
}
/* Figmaのセクション見出しはPC・SPとも画面中央に置かれる */
.solution-section-title {
    font-size: clamp(68rem, 17.4vw, 250rem);
    text-align: center;
}
.solution-interview-list {
    display: grid;
    gap: 80rem;
    margin-top: 60rem;
}
/* カード全体を記事へのリンクにする */
.solution-interview-card {
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 105rem;
    grid-template-columns: 515rem minmax(0, 1fr);
    text-decoration: none;
    transition: opacity 0.8s ease;
}
.solution-motion-enabled .solution-interview-card,
.solution-motion-enabled .solution-project-card,
.solution-motion-enabled .solution-project-message,
.solution-motion-enabled .solution-project-visual {
    opacity: 0;
}
.solution-interview-card.is-visible,
.solution-project-card.is-visible,
.solution-project-message.is-visible,
.solution-project-visual.is-visible {
    opacity: 1;
}
.solution-interview-image {
    aspect-ratio: 660 / 675;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
}
.solution-interview-content {
    align-self: end;
    grid-column: 1;
    grid-row: 1;
}
.solution-interview-title {
    font-feature-settings: "palt" 1;
    font-size: 44rem;
    font-weight: 500;
    line-height: 1.5;
}
/* 級数アップで肩書が長い中西様の幅が広がるため、間隔はFigmaと同じ20remに揃える */
.solution-interview-persons {
    align-items: flex-start;
    display: flex;
    gap: 20rem;
    margin-top: 60rem;
}
.solution-interview-person {
    max-width: 300rem;
}
/* SVGはpreserveAspectRatio="none"なので、枠を正方形にすればFigmaどおりの比率で描画される */
.solution-interview-person-mark {
    display: block;
    flex-shrink: 0;
    height: 68rem;
    margin-top: 26rem;
    width: 68rem;
}
.solution-interview-person-mark img {
    display: block;
    height: 100%;
    width: 100%;
}
.solution-interview-position {
    font-feature-settings: "palt" 1;
    font-size: 12rem;
    line-height: 1.5;
    margin: 0;
}
.solution-interview-position[data-position="3line"] {
    min-height: 54rem;
}
.solution-interview-name {
    font-feature-settings: "palt" 1;
    font-size: 28rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 18rem 0 0;
}
.solution-interview-name-en {
    font-family: "Inter", sans-serif;
    font-size: 12rem;
    line-height: 1;
}
.solution-more-link {
    align-items: center;
    color: inherit;
    display: flex;
    font-family: "Inter", sans-serif;
    font-size: 18rem;
    gap: 10rem;
    line-height: 1.13;
    margin-top: 60rem;
    position: relative;
    text-decoration: none;
    width: max-content;
}
.solution-more-arrow {
    display: block;
    flex: none;
    height: 14rem;
    overflow: hidden;
    position: relative;
    width: 356rem;
}
.solution-more-arrow-item {
    border-top: 1px solid currentColor;
    display: block;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}
.solution-more-arrow-item::before,
.solution-more-arrow-item::after {
    background: currentColor;
    content: "";
    height: 1px;
    position: absolute;
    right: 0;
    top: 50%;
    transform-origin: right center;
    width: 8rem;
}
.solution-more-arrow-item::before {
    transform: translateY(-50%) rotate(45deg);
}
.solution-more-arrow-item::after {
    transform: translateY(-50%) rotate(-45deg);
}
.solution-more-arrow-item:nth-child(2) {
    transform: translateX(calc(-101% - 8rem));
}
.solution-member-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 115rem;
}
.solution-member-card,
.solution-member-visual {
    overflow: hidden;
    position: relative;
    transition: opacity 0.7s ease;
}
.solution-motion-enabled .solution-member-card,
.solution-motion-enabled .solution-member-visual {
    opacity: 0;
}
.solution-member-card.is-visible,
.solution-member-visual.is-visible {
    opacity: 1;
}
.solution-member-card {
    aspect-ratio: 1;
    color: var(--solution-black);
    grid-column: span 2;
}
.solution-member-visual-side {
    grid-column: span 2;
    grid-row: span 2;
}
.solution-member-visual-wide {
    aspect-ratio: 720 / 915;
    grid-column: span 3;
}
.solution-member-image {
    height: 100%;
}
.solution-member-image img,
.solution-member-visual img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.solution-member-label {
    align-items: center;
    background: var(--solution-white);
    bottom: 0;
    display: flex;
    gap: 18rem;
    left: 0;
    min-height: 60rem;
    padding: 12rem 16rem;
    position: absolute;
    width: 310rem;
}
.solution-member-profile {
    flex-shrink: 0;
}
.solution-member-name {
    font-size: 14rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}
.solution-member-year {
    font-size: 10rem;
    line-height: 1.4;
    margin: 2rem 0 0;
}
.solution-member-catch {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    flex: 1;
    font-size: 13rem;
    line-height: 1.4;
    margin: 0;
    padding-left: 18rem;
}
/* 矢印は既存ページと同じくSVGを2枚重ね、ホバーで入れ替わるようにする */
.solution-member-arrow {
    flex-shrink: 0;
    height: 8rem;
    overflow: hidden;
    position: relative;
    width: 16rem;
}
.solution-member-arrow::before,
.solution-member-arrow::after {
    background: url(../../images/common/arrow_black.svg) no-repeat 50% 50% / contain;
    content: "";
    display: block;
    inset: 0;
    position: absolute;
}

.solution-projects {
    background: var(--solution-black);
    color: var(--solution-white);
    overflow: hidden;
    padding: 150rem 0 max(17.38svh, 7.6vw);
}
/* Figmaは見出しと無限ループテキストの間に余白を取る */
.solution-projects .solution-section-title {
    margin-bottom: 387rem;
}
.solution-projects-marquee {
    border-top: 1px solid;
    overflow: hidden;
    padding: 12rem 0;
    width: 100%;
}
.solution-projects-marquee-track {
    animation: solution-marquee 22s linear infinite;
    display: flex;
    width: max-content;
}
.solution-projects-marquee-text {
    font-family: "Inter", sans-serif;
    font-size: clamp(32rem, 5vw, 74rem);
    letter-spacing: -0.06em;
    line-height: 1;
    padding-right: 1em;
    white-space: nowrap;
}
.solution-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.solution-project-card,
.solution-project-message,
.solution-project-visual {
    min-height: 420rem;
    overflow: hidden;
    position: relative;
    transition: opacity 0.7s ease;
}
.solution-project-card-wide {
    aspect-ratio: 960 / 480;
    grid-column: 1 / 3;
    grid-row: 1;
}
.solution-project-visual {
    align-self: start;
    aspect-ratio: 480 / 720;
    grid-column: 3;
    grid-row: 1 / 3;
}
.solution-project-message {
    aspect-ratio: 1;
    grid-column: 2;
    grid-row: 2;
}
.solution-project-image {
    height: 100%;
    position: absolute;
    width: 100%;
}
/* Figmaはグラデーションを敷かず、白帯のラベルを画像の左下に重ねる（他のリンクと同じ配色） */
.solution-project-card-label {
    align-items: center;
    background: var(--solution-white);
    bottom: 0;
    color: var(--solution-black);
    display: flex;
    gap: 16rem;
    height: 60rem;
    justify-content: space-between;
    left: 0;
    padding: 0 20rem;
    position: absolute;
    width: 300rem;
    z-index: 1;
}
.solution-project-card-title {
    font-feature-settings: "palt" 1;
    font-size: 14rem;
    line-height: 1.4;
}
/* 矢印は既存ページと同じくSVGを2枚重ね、ホバーで入れ替わるようにする */
.solution-project-card-arrow {
    flex-shrink: 0;
    height: 8rem;
    overflow: hidden;
    position: relative;
    width: 16rem;
}
.solution-project-card-arrow::before,
.solution-project-card-arrow::after {
    background: url(../../images/common/arrow_black.svg) no-repeat 50% 50% / contain;
    content: "";
    display: block;
    inset: 0;
    position: absolute;
}

.solution-why {
    --why-chart-size: min(47vw, 75svh, calc(100svh - 15vw), calc((92svh - var(--head-height)) / 1.2721), 680rem);
    --why-copy-offset: 0rem;
    --why-progress: 0;
    --why-title-progress: 0;
    --why-chart-progress: 0;
    --why-elements-progress: 0;
    --why-core-shift-progress: 0;
    --why-customer-progress: 0;
    background: var(--solution-black);
    color: var(--solution-white);
    min-height: 430svh;
    padding-bottom: 16svh;
    position: relative;
}
.solution-why-stage {
    min-height: 100svh;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.solution-why-inner {
    height: 100svh;
    max-width: 1980px;
    padding: 0;
    position: sticky;
    width: 100%;
}
.solution-why-title {
    font-family: "Avenir Next", "Inter", sans-serif;
    font-size: min(11.8vw, 18.9svh);
    left: calc(21.74% - var(--why-title-progress) * 16.54%);
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0;
    position: absolute;
    top: max(calc(17.38% - var(--why-title-progress) * 1.38%), 7.6vw);
    transform: scale(calc(1 - var(--why-title-progress) * 0.668));
    transform-origin: left top;
    z-index: 2;
}
.solution-why-content {
    align-items: center;
    display: grid;
    gap: 6.18%;
    grid-template-columns: minmax(300rem, 0.752fr) minmax(480rem, 1fr);
    height: 100%;
    padding: min(90rem, 10svh) 5.56%;
}
.solution-why-copy {
    grid-column: 1;
    min-height: 260rem;
    opacity: var(--why-chart-progress);
    position: relative;
    transform: translateY(calc((1 - var(--why-chart-progress)) * 17.5rem + var(--why-copy-offset)));
}
.solution-why-copy-item {
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s ease;
}
.solution-why-copy-item.is-active {
    opacity: 1;
}
.solution-why-heading {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: min(2.08vw, 3.33svh);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}
.solution-why-heading-nowrap {
    white-space: nowrap;
}
.solution-why-text {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: min(1.1vw, 1.78svh);
    line-height: 2.1;
    margin: 15rem 0 0;
}
.solution-why-chart {
    grid-column: 2;
    height: var(--why-chart-size);
    justify-self: center;
    position: relative;
    width: var(--why-chart-size);
}
.solution-why-chart-sp {
    display: none;
}
.solution-why-chart-frame {
    border: 1px solid currentColor;
    border-radius: 50%;
    inset: 0;
    opacity: var(--why-chart-progress);
    position: absolute;
    transform: translateY(calc(var(--why-customer-progress) * -11.325%)) scale(calc(0.82 + var(--why-chart-progress) * 0.18));
}
.solution-why-chart-resources,
.solution-why-chart-product,
.solution-why-chart-technology,
.solution-why-chart-core {
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
}
.solution-why-chart-resources,
.solution-why-chart-product,
.solution-why-chart-technology {
    border: 1px solid currentColor;
    box-sizing: border-box;
    opacity: var(--why-elements-progress);
    width: 54.34%;
}
.solution-why-chart-resources {
    top: 12%;
    transform: translate(-50%, calc((1 - var(--why-elements-progress)) * -27.5rem));
}
.solution-why-chart-product {
    top: 38%;
    transform: translate(-50%, calc((1 - var(--why-elements-progress)) * -12.5rem));
}
.solution-why-chart-technology {
    top: 53%;
    transform: translate(-50%, calc((1 - var(--why-elements-progress)) * 4rem));
}
.solution-why-chart-node-title,
.solution-why-chart-product,
.solution-why-chart-technology {
    font-size: clamp(12rem, 1.1vw, 16rem);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    padding: 12rem 6rem;
}
.solution-why-chart-node-text,
.solution-why-chart-technology small {
    font-size: clamp(8rem, 0.76vw, 11rem);
    font-weight: 200;
    line-height: 1.5;
    margin: 0 0 10rem;
}
.solution-why-chart-cross {
    font-size: 40rem;
    left: 50%;
    opacity: var(--why-elements-progress);
    position: absolute;
    top: 31%;
    transform: translate(-50%, calc((1 - var(--why-elements-progress)) * -15rem));
}
.solution-why-chart-core {
    opacity: var(--why-chart-progress);
    top: calc(50% + var(--why-core-shift-progress) * 40%);
    transform: translate(-50%, calc(-50% - var(--why-core-shift-progress) * 50%));
    width: 72%;
}
.solution-why-chart-core-title {
    font-size: clamp(14rem, 1.3vw, 19rem);
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
}
.solution-why-chart-core-text {
    border-top: 1px solid;
    font-size: clamp(8rem, 0.76vw, 11rem);
    font-weight: 200;
    line-height: 1.6;
    margin: 12rem auto 0;
    padding-top: 10rem;
    width: max-content;
}
.solution-why-chart-cross img {
    display: block;
    height: 100%;
    width: 100%;
}
.solution-why-chart-core-title-en,
.solution-why-chart-core-title-ja {
    display: block;
}
.solution-why-chart-pc {
    transform: scale(calc(1.1 - var(--why-customer-progress) * 0.1));
}
.solution-why-chart-pc .solution-why-chart-resources {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 21.18%;
    justify-content: center;
    top: 11.62%;
}
.solution-why-chart-pc .solution-why-chart-product {
    display: grid;
    height: 14.71%;
    padding: 0;
    place-content: center;
    top: 38.09%;
}
.solution-why-chart-pc .solution-why-chart-technology {
    display: grid;
    height: 14.71%;
    padding: 0;
    place-content: center;
    top: 52.65%;
}
.solution-why-chart-pc .solution-why-chart-technology br {
    display: none;
}
.solution-why-chart-pc .solution-why-chart-technology small {
    display: block;
    font-size: calc(var(--why-chart-size) * 0.02623);
    margin-top: calc(var(--why-chart-size) * 0.01);
}
.solution-why-chart-pc .solution-why-chart-node-title,
.solution-why-chart-pc .solution-why-chart-product,
.solution-why-chart-pc .solution-why-chart-technology {
    font-size: calc(var(--why-chart-size) * 0.03373);
}
.solution-why-chart-pc .solution-why-chart-node-title {
    padding: 0;
    position: relative;
}
.solution-why-chart-pc .solution-why-chart-node-title::after {
    background: currentColor;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: calc(100% + var(--why-chart-size) * 0.02216);
    transform: translateX(-50%);
    width: calc(var(--why-chart-size) * 0.04433);
}
.solution-why-chart-pc .solution-why-chart-node-text {
    font-size: calc(var(--why-chart-size) * 0.02623);
    line-height: 1.35;
    margin: calc(var(--why-chart-size) * 0.0458) 0 0;
}
.solution-why-chart-pc .solution-why-chart-cross {
    font-size: 0;
    height: 7.35%;
    top: 32.06%;
    width: 7.27%;
}
.solution-why-chart-pc .solution-why-chart-core {
    top: calc(50% + var(--why-core-shift-progress) * 38.38%);
    width: 46%;
}
.solution-why-chart-pc .solution-why-chart-core-title {
    line-height: 1.43;
    white-space: nowrap;
}
.solution-why-chart-pc .solution-why-chart-core-title-en {
    font-size: calc(var(--why-chart-size) * 0.03748);
}
.solution-why-chart-pc .solution-why-chart-core-title-ja {
    font-size: calc(var(--why-chart-size) * 0.04122);
}
.solution-why-chart-pc .solution-why-chart-core-text {
    border-top: 0;
    font-size: calc(var(--why-chart-size) * 0.02998);
    line-height: 1.65;
    margin-top: calc(var(--why-chart-size) * 0.02216);
    padding-top: calc(var(--why-chart-size) * 0.02216);
    position: relative;
}
.solution-why-chart-pc .solution-why-chart-core-text::before {
    background: currentColor;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: calc(var(--why-chart-size) * 0.04433);
}
.solution-why-chart-exchange {
    align-items: center;
    display: flex;
    gap: 1.47%;
    height: 15.15%;
    justify-content: center;
    left: 50%;
    opacity: var(--why-customer-progress);
    position: absolute;
    top: calc(98.53% - var(--why-customer-progress) * 11.325%);
    transform: translate(-50%, calc((1 - var(--why-customer-progress)) * 22.5rem));
    width: 46.18%;
}
.solution-why-chart-exchange-text {
    font-size: clamp(10rem, 0.97vw, 14rem);
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}
.solution-why-chart-loop {
    flex: 0 0 42.62%;
    height: 100%;
    position: relative;
}
.solution-why-chart-loop img {
    animation: solution-chart-spin 3.6s linear infinite;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: center;
    width: 100%;
}
.solution-why-chart-customer-label {
    align-items: center;
    border: 1px solid;
    box-sizing: border-box;
    display: flex;
    font-size: clamp(14rem, 1.39vw, 20rem);
    gap: 2.94%;
    height: 14.71%;
    justify-content: center;
    left: 50%;
    margin: 0;
    opacity: var(--why-customer-progress);
    position: absolute;
    top: calc(112.5% - var(--why-customer-progress) * 11.325%);
    transform: translate(-50%, calc((1 - var(--why-customer-progress)) * 22.5rem));
    width: 100%;
}
.solution-why-chart-customer-icon {
    flex: 0 0 5.15%;
    height: 56.68%;
    position: relative;
}
.solution-why-chart-customer-icon img {
    height: 100%;
    width: 100%;
}
.solution-why-chart-pc .solution-why-chart-exchange-text {
    font-size: calc(var(--why-chart-size) * 0.02623);
}
.solution-why-chart-pc .solution-why-chart-customer-label {
    font-size: calc(var(--why-chart-size) * 0.02941);
}
.solution-future {
    background: var(--solution-black);
    color: var(--solution-white);
    padding: 150rem 0 0;
}
.solution-future-text {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: clamp(22rem, 3.2vw, 46rem);
    font-weight: 700;
    line-height: 2.1;
    margin: 380rem 0 150rem;
}
.solution-future-image {
    height: min(71vw, 1024rem);
    position: relative;
}
.solution-future-image::after {
    background: rgba(0, 0, 0, 0.25);
    content: "";
    inset: 0;
    position: absolute;
}
/* Figmaどおり画像の上下中央に置く */
.solution-future-image-title {
    color: var(--solution-white);
    font-family: "Avenir Next", "Inter", sans-serif;
    font-size: clamp(74rem, 17.7vw, 255rem);
    letter-spacing: initial;
    line-height: 1.02;
    left: 5.2vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
@keyframes solution-chart-spin {
    to {
        transform: rotate(-360deg);
    }
}
@keyframes solution-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (min-width: 1920px) {
    .solution-business {
        max-width: 1920px;
    }
    .solution-business-motion {
        --business-title-font: 318.7px;
    }
    .solution-business-circle-engineer .solution-business-circle-title {
        transform: translate(calc(var(--business-engineer-progress) * (var(--business-circle-size) * 0.8032 - 860.16px)), calc(var(--business-engineer-progress) * -3svh))
            scale(calc(1 + var(--business-engineer-progress) * 1.8807));
    }
}

@media (min-width: 769px) {
    .solution-why {
        --why-copy-offset: calc(max(16svh, 7.6vw) + min(11.8vw, 18.9svh) * 1.4608 + 6svh - min(90rem, 10svh));
    }
    .solution-why-copy {
        align-self: start;
    }
    .solution-why-chart {
        margin-top: calc(var(--head-height) - var(--why-chart-size) * 0.04556);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-hero {
        height: 100svh;
    }
    .solution-hero-stage {
        position: relative;
    }
    .solution-business-motion,
    .solution-why {
        height: auto;
        min-height: auto;
    }
    .solution-intro-sticky,
    .solution-why-stage {
        height: auto;
        position: static;
    }
    .solution-business {
        height: auto;
        padding: 120rem 5.2vw;
    }
    .solution-business-title {
        opacity: 1;
        position: static;
        transform: none;
    }
    .solution-business-diagram {
        left: auto;
        margin: 100rem auto 0;
        opacity: 1;
        position: relative;
        top: auto;
        transform: none;
    }
    .solution-business-circle-origin {
        display: none;
    }
    .solution-business-circle-engineer {
        opacity: 1;
        transform: translate(-100%, -50%);
    }
    .solution-business-circle-sales {
        opacity: 1;
        transform: translate(0, -50%);
    }
    .solution-business-circle-content {
        opacity: 1;
    }
    .solution-business-point {
        opacity: 1;
    }
    .solution-business-copy {
        left: auto;
        margin: 30rem auto 0;
        opacity: 1;
        position: relative;
        top: auto;
        transform: none;
    }
    .solution-business-question-prefix,
    .solution-business-question-suffix {
        opacity: 0;
    }
    .solution-definition {
        padding-top: 40rem;
    }
    .solution-why-inner,
    .solution-why-content {
        display: block;
        height: auto;
        padding: 120rem 5.2vw;
    }
    .solution-why-title {
        font-family: "Avenir Next", "Inter", sans-serif;
        font-size: clamp(42rem, 5.6vw, 80rem);
        letter-spacing: 0;
        line-height: 1.1;
        position: static;
        transform: none;
    }
    .solution-why-copy {
        margin-top: 70rem;
        min-height: auto;
    }
    .solution-why-copy-item {
        display: none;
        position: static;
    }
    .solution-why-copy-item-third {
        display: block;
        opacity: 1;
    }
    .solution-why-chart {
        margin: 70rem auto 110rem;
    }
    .solution-why-chart-pc {
        transform: none;
    }
    .solution-why-chart-frame {
        opacity: 1;
        transform: translateY(-11.325%);
    }
    .solution-why-chart-resources,
    .solution-why-chart-product,
    .solution-why-chart-technology,
    .solution-why-chart-cross,
    .solution-why-chart-core,
    .solution-why-chart-exchange,
    .solution-why-chart-customer-label {
        opacity: 1;
    }
    .solution-why-chart-resources,
    .solution-why-chart-product,
    .solution-why-chart-technology,
    .solution-why-chart-cross,
    .solution-why-chart-core {
        transform: translateX(-50%);
    }
    .solution-why-chart-core {
        bottom: 10%;
        top: auto;
    }
    .solution-why-chart-exchange,
    .solution-why-chart-customer-label {
        transform: translateX(-50%);
    }
    .solution-why-chart-loop img {
        animation: none;
    }
    .solution-projects-marquee-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .solution-hero {
        height: auto;
        min-height: 0;
    }
    .solution-hero-stage {
        height: 560rem;
        min-height: 0;
    }
    .solution-hero-video {
        height: calc(100% - 10rem);
    }
    .solution-hero-title-wrap {
        bottom: auto;
        left: 20rem;
        top: 320rem;
        transform: none;
    }
    .solution-hero-title {
        font-size: 70rem;
    }
    .solution-hero-title-lottie {
        height: calc(345rem / 1159 * 399);
        width: 345rem;
    }
    .solution-business-motion {
        --business-center-shift: 18.854vw;
        height: 480svh;
    }
    .solution-business-title {
        font-size: 64rem;
        line-height: calc(0.82 + var(--business-title-progress) * 0.126);
        top: calc(50% - var(--business-title-progress) * (42.465vw + 37rem));
        transform: translate(calc(var(--business-title-progress) * -43.5rem), calc((var(--business-title-progress) - 1) * 52.5rem))
            scale(calc(1 - var(--business-title-progress) * 0.7358));
    }
    .solution-business-diagram {
        height: 47.222vw;
        top: calc(50% - 18.854vw);
        width: 100%;
    }
    .solution-business-circle {
        height: 47.222vw;
        width: 47.222vw;
    }
    .solution-business-circle-content {
        width: calc(100% - 48rem);
    }
    .solution-business-circle-title {
        font-size: 25rem;
    }
    .solution-business-circle-sales .solution-business-circle-title {
        font-size: 23rem;
    }
    .solution-business-question-prefix {
        bottom: 100%;
        line-height: 1;
    }
    .solution-business-circle-engineer .solution-business-circle-title {
        transform: translate(
                calc(var(--business-engineer-progress) * -4.33vw),
                calc(var(--business-engineer-progress) * (6.65svh + 17rem + max(0rem, calc(144rem - 19.7svh))))
            )
            scale(calc(1 + var(--business-engineer-progress) * 1.56));
    }
    .solution-business-circle-text {
        font-size: 10rem;
    }
    .solution-business-point {
        height: 4.17rem;
        left: calc(50% - 2.085rem);
        top: calc(50% - 5.73rem);
        width: 4.17rem;
    }
    .solution-business-copy {
        border-inline: 0;
        bottom: auto;
        left: 50%;
        padding: 50rem 0 0;
        top: calc(50% + 4.757vw + 1rem);
        width: calc(100% - 39rem);
    }
    .solution-business-copy::before {
        background: var(--solution-black);
        content: "";
        height: 35rem;
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 1px;
    }
    .solution-business-copy-title {
        font-size: 16rem;
    }
    .solution-business-copy-text {
        font-size: 13rem;
        line-height: 1.6;
        margin-top: 4rem;
    }
    .solution-definition {
        padding: 90rem 22rem 120rem;
    }
    .solution-definition-copy {
        margin-top: 0;
    }
    .solution-definition-statement {
        font-size: 17rem;
        line-height: 2;
    }
    .solution-definition-lead {
        font-size: 18rem;
        line-height: 1.8;
        margin-top: 40rem;
    }
    .solution-section-inner {
        padding-inline: 20rem;
    }
    .solution-interview {
        padding: 120rem 0;
    }
    .solution-section-title {
        font-size: 66rem;
    }
    .solution-interview-list {
        gap: 60rem;
        margin-top: 80rem;
    }
    .solution-interview-card {
        display: block;
    }
    .solution-interview-image {
        aspect-ratio: 335 / 343;
    }
    .solution-interview-content {
        padding-top: 30rem;
    }
    .solution-interview-title {
        font-size: 26rem;
    }
    .solution-interview-position {
        margin-top: 25rem;
    }
    .solution-interview-name {
        font-size: 22rem;
        margin-top: 5rem;
    }
    .solution-interview-name-en {
        margin-top: 5rem;
    }
    .solution-more-link {
        font-size: 14rem;
        margin-top: 32rem;
        width: auto;
    }
    /* SPは従来どおりコンテンツ幅いっぱいに線を伸ばす */
    .solution-more-arrow {
        flex: 1;
        width: auto;
    }
    .solution-interview-persons {
        display: block;
        margin-top: 25rem;
    }
    .solution-interview-person {
        max-width: none;
    }
    .solution-interview-person-mark {
        height: 35.67rem;
        margin: 20rem 0;
        width: 35.67rem;
    }
    /* SPのFigmaはメンバーグリッドの左右にも20remの余白を持つ（PROJECTSと同じ） */
    .solution-member-grid {
        grid-template-columns: 1fr;
        margin-top: 80rem;
        padding-inline: 20rem;
    }
    .solution-member-card,
    .solution-member-visual-side,
    .solution-member-visual-wide {
        grid-column: auto;
        grid-row: auto;
    }
    .solution-member-visual-side {
        aspect-ratio: 335 / 670;
    }
    .solution-member-visual-wide {
        aspect-ratio: 335 / 419;
    }
    .solution-projects {
        padding: 120rem 0 34svh;
    }
    .solution-projects .solution-section-title {
        margin-bottom: 80rem;
    }
    .solution-projects-marquee {
        margin-inline: 0;
        padding-top: 10rem;
        padding-bottom: 30rem;
    }
    .solution-projects-marquee-text {
        font-size: 18rem;
    }
    .solution-projects-grid {
        grid-template-columns: 1fr;
        padding-inline: 20rem;
    }
    .solution-project-card,
    .solution-project-card-wide,
    .solution-project-message,
    .solution-project-visual {
        align-self: auto;
        aspect-ratio: auto;
        grid-column: auto;
        grid-row: auto;
        min-height: 335rem;
    }
    .solution-project-card-title {
        font-size: 13rem;
    }
    .solution-why {
        min-height: 410svh;
    }
    .solution-why-inner {
        display: block;
        height: 100svh;
        padding: 0;
    }
    .solution-why-title {
        font-family: "Avenir Next", "Inter", sans-serif;
        font-size: 61rem;
        left: 20rem;
        letter-spacing: -0.07em;
        line-height: 1.1;
        top: calc(50% - var(--why-title-progress) * 90%);
        transform: translateY(-50%);
    }
    .solution-why-content {
        display: block;
        height: 100%;
        padding: calc(var(--head-height) + 22rem) 9.8vw 12rem;
    }
    .solution-why-copy {
        min-height: 80.5rem;
    }
    .solution-why-copy-item-third .solution-why-heading br {
        display: none;
    }
    .solution-why-heading {
        font-size: 14rem;
        line-height: 1.4;
    }
    .solution-why-text {
        font-size: 10rem;
        line-height: 1.7;
        margin-top: 6.5rem;
    }
    .solution-why-chart-pc {
        display: none;
    }
    .solution-why {
        --why-chart-size: min(
            calc((100svh - var(--head-height) - 178rem) / 1.3072),
            calc(min(80.4vw, 301.5rem) * 1.122),
            338.4rem
        );
        --why-chart-font-scale: 1;
    }
    .solution-why-chart-sp {
        display: block;
        height: var(--why-chart-size);
        margin: 18rem auto 0;
        width: min(80.4vw, 301.5rem, calc(var(--why-chart-size) / 1.122));
    }
    .solution-why-chart-sp .solution-why-chart-node-title,
    .solution-why-chart-sp .solution-why-chart-product,
    .solution-why-chart-sp .solution-why-chart-technology {
        font-size: calc(var(--why-chart-size) * 0.03702 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-node-text,
    .solution-why-chart-sp .solution-why-chart-technology small,
    .solution-why-chart-sp .solution-why-chart-core-text {
        font-size: calc(var(--why-chart-size) * 0.03509 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-core-title {
        font-size: calc(var(--why-chart-size) * 0.05073 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-exchange-text {
        font-size: calc(var(--why-chart-size) * 0.03576);
    }
    .solution-why-chart-sp .solution-why-chart-customer-label {
        font-size: calc(var(--why-chart-size) * 0.03546);
    }
    .solution-why-chart-sp .solution-why-chart-frame {
        border-radius: 0;
        transform: translateY(calc(var(--why-customer-progress) * -5%)) scale(calc(0.9 + var(--why-chart-progress) * 0.1));
    }
    .solution-why-chart-sp .solution-why-chart-resources,
    .solution-why-chart-sp .solution-why-chart-product,
    .solution-why-chart-sp .solution-why-chart-technology {
        width: 80%;
    }
    /* 級数アップで枠が下に伸びた分、×印が本文に重ならないよう開始位置を上へ詰める */
    .solution-why-chart-sp .solution-why-chart-resources {
        top: 7.2%;
    }
    /* SPは縦の余地がないため、枠内の余白は級数を上げる前の比率のままにする */
    .solution-why-chart-sp .solution-why-chart-product,
    .solution-why-chart-sp .solution-why-chart-technology {
        padding: calc(var(--why-chart-size) * 0.029 * var(--why-chart-font-scale)) calc(var(--why-chart-size) * 0.02174);
    }
    .solution-why-chart-sp .solution-why-chart-node-title {
        padding: calc(var(--why-chart-size) * 0.03509 * var(--why-chart-font-scale)) calc(var(--why-chart-size) * 0.02174);
        position: relative;
    }
    .solution-why-chart-sp .solution-why-chart-node-title::after {
        background: currentColor;
        bottom: calc(var(--why-chart-size) * 0.0145 * var(--why-chart-font-scale));
        content: "";
        height: 1px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 14.9px;
    }
    .solution-why-chart-sp .solution-why-chart-node-text {
        margin-bottom: calc(var(--why-chart-size) * 0.02174 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-core-text {
        border-top: 0;
        margin-top: calc(var(--why-chart-size) * 0.02174);
        padding-top: calc(var(--why-chart-size) * 0.02174);
        position: relative;
    }
    .solution-why-chart-sp .solution-why-chart-core-text::before {
        background: currentColor;
        content: "";
        height: 1px;
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 14.9px;
    }
    .solution-why-chart-sp .solution-why-chart-cross {
        font-size: 0;
        height: calc(var(--why-chart-size) * 0.0735);
        width: calc(var(--why-chart-size) * 0.0726);
    }
    .solution-why-chart-sp .solution-why-chart-product {
        top: 36%;
    }
    .solution-why-chart-sp .solution-why-chart-technology {
        top: 50.7%;
    }
    .solution-why-chart-sp .solution-why-chart-cross {
        top: 30%;
    }
    /* 級数アップでコアが上に伸びるため、最新技術の枠との間隔が上の枠間と揃う位置まで下げる */
    .solution-why-chart-sp .solution-why-chart-core {
        bottom: 8%;
        top: auto;
        transform: translate(-50%, calc((1 - var(--why-core-shift-progress)) * -47.5rem));
        width: 60%;
    }
    .solution-why-chart-sp .solution-why-chart-core-title-en {
        font-size: calc(var(--why-chart-size) * 0.03546 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-core-title-ja {
        font-size: calc(var(--why-chart-size) * 0.04137 * var(--why-chart-font-scale));
    }
    .solution-why-chart-sp .solution-why-chart-exchange {
        height: calc(var(--why-chart-size) * 0.1596);
        top: calc(98.6% - var(--why-customer-progress) * 5%);
        width: 66%;
    }
    .solution-why-chart-sp .solution-why-chart-loop {
        flex: 0 0 calc(var(--why-chart-size) * 0.20752);
    }
    .solution-why-chart-sp .solution-why-chart-customer-label {
        height: calc(var(--why-chart-size) * 0.1742);
        top: calc(113.3% - var(--why-customer-progress) * 5%);
    }
    .solution-future {
        padding-top: 120rem;
    }
    .solution-future-text {
        font-size: 17rem;
        line-height: 2.1;
        margin: 80rem 0 120rem;
    }
    .solution-future-image {
        height: 550rem;
    }
    .solution-future-image-title {
        font-size: 66rem;
        left: 20rem;
    }
}

@media (max-width: 599px) {
    .solution-why-chart-sp .solution-why-chart-node-text,
    .solution-why-chart-sp .solution-why-chart-technology small,
    .solution-why-chart-sp .solution-why-chart-core-text {
        font-size: max(8px, calc(var(--why-chart-size) * 0.03509 * var(--why-chart-font-scale)));
    }
    .solution-why-chart-sp .solution-why-chart-exchange-text {
        font-size: max(10px, calc(var(--why-chart-size) * 0.03576));
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .solution-why-title {
        font-size: 54rem;
    }
    .solution-why-copy {
        min-height: 80.5rem;
    }
    .solution-why-heading {
        font-size: 14rem;
    }
    .solution-why-text {
        font-size: 10rem;
        line-height: 1.7;
        margin-top: 6.5rem;
    }
    .solution-why {
        --why-chart-size: min(
            calc((100svh - var(--head-height) - 178rem) / 1.3072),
            calc(min(80.4vw, 301.5rem) * 1.122),
            338.4rem
        );
    }
    .solution-why-chart-sp .solution-why-chart-node-text,
    .solution-why-chart-sp .solution-why-chart-technology small {
        line-height: 1.35;
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .solution-business-motion {
        --business-center-shift: calc(50% - var(--business-tablet-stack-top) - var(--business-tablet-circle-size) / 2);
        --business-tablet-circle-size: min(47.222vw, 31svh);
        --business-tablet-copy-height: calc(min(50rem, 5svh) + 1.5 * min(16rem, 2.4svh) + min(4rem, 0.5svh) + 4.8 * min(14rem, 1.9svh));
        --business-tablet-stack-top: max(
            calc(var(--head-height) + 8.54vw + 11rem),
            calc(50% - (var(--business-tablet-circle-size) - min(11rem, 1.5svh) + var(--business-tablet-copy-height)) / 2)
        );
    }
    .solution-business-title {
        top: calc(50% + var(--business-title-progress) * (var(--business-tablet-stack-top) - 8.54vw - 5rem - 50%));
    }
    .solution-business-diagram {
        height: var(--business-tablet-circle-size);
        top: calc(var(--business-tablet-stack-top) + var(--business-tablet-circle-size) / 2);
    }
    .solution-business-circle {
        height: var(--business-tablet-circle-size);
        width: var(--business-tablet-circle-size);
    }
    .solution-business-circle-content {
        gap: min(22rem, calc(var(--business-tablet-circle-size) * 0.124));
        transform: translateY(min(18rem, calc(var(--business-tablet-circle-size) * 0.102)));
    }
    .solution-business-circle-title {
        font-size: min(25rem, calc(var(--business-tablet-circle-size) * 0.141));
    }
    .solution-business-circle-sales .solution-business-circle-title {
        font-size: min(23rem, calc(var(--business-tablet-circle-size) * 0.13));
    }
    .solution-business-circle-text {
        font-size: min(10rem, calc(var(--business-tablet-circle-size) * 0.0565));
    }
    .solution-business-circle-engineer .solution-business-circle-title {
        transform: translate(
                calc(var(--business-engineer-progress) * -4.33vw),
                calc(var(--business-engineer-progress) * (8.5svh + 17rem - 4.9vw + 1.8px))
            )
            scale(calc(1 + var(--business-engineer-progress) * 1.56));
    }
    .solution-business-point {
        height: calc(var(--business-tablet-circle-size) * 0.0235);
        left: calc(50% - var(--business-tablet-circle-size) * 0.01175);
        top: calc(50% - var(--business-tablet-circle-size) * 0.01175);
        width: calc(var(--business-tablet-circle-size) * 0.0235);
    }
    .solution-business-copy {
        padding-top: min(50rem, 5svh);
        top: calc(var(--business-tablet-stack-top) + var(--business-tablet-circle-size) - min(11rem, 1.5svh));
    }
    .solution-business-copy::before {
        height: min(35rem, 4svh);
    }
    .solution-business-copy-title {
        font-size: min(16rem, 2.4svh);
    }
    .solution-business-copy-text {
        font-size: min(14rem, 1.9svh);
        margin-top: min(4rem, 0.5svh);
    }
    .solution-why-title {
        font-size: min(61rem, 6.86svh);
    }
    .solution-why-copy {
        min-height: min(138rem, 15.5svh);
    }
    .solution-why-heading {
        font-size: min(21rem, 2.36svh);
    }
    .solution-why-text {
        font-size: min(12rem, 1.35svh);
        margin-top: min(12rem, 1.35svh);
    }
    .solution-why {
        --why-chart-size: min(
            calc((100svh - var(--head-height) - min(138rem, 15.5svh) - 125.5rem) / 1.3072),
            calc(80.4vw * 1.122)
        );
    }
    .solution-why-chart-sp {
        width: min(80.4vw, calc(var(--why-chart-size) / 1.122));
    }
    .solution-why-chart-sp .solution-why-chart-node-text,
    .solution-why-chart-sp .solution-why-chart-technology small,
    .solution-why-chart-sp .solution-why-chart-core-text {
        font-size: max(9px, calc(var(--why-chart-size) * 0.03509 * var(--why-chart-font-scale)));
    }
}

@media (min-width: 600px) and (max-width: 768px) and (max-height: 720px) {
    .solution-business-motion {
        --business-tablet-circle-size: min(47.222vw, 28svh);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .solution-business-motion {
        height: auto;
    }
    .solution-business-diagram {
        top: auto;
    }
    .solution-business-copy {
        bottom: auto;
        left: auto;
        top: auto;
    }
    .solution-why {
        min-height: auto;
    }
    .solution-why-inner,
    .solution-why-content {
        height: auto;
        padding: 90rem 20rem;
    }
    .solution-why-title {
        font-size: 34rem;
        transform: none;
    }
    .solution-why-chart-sp .solution-why-chart-frame {
        transform: translateY(-10%);
    }
    .solution-why-chart-sp .solution-why-chart-core {
        transform: translateX(-50%);
    }
    .solution-why-chart-sp .solution-why-chart-exchange {
        top: 83%;
    }
    .solution-why-chart-sp .solution-why-chart-customer-label {
        top: 96%;
    }
}

/* ホバー演出はPCかつhover対応環境のみ（既存ページと同じ条件） */
@media (min-width: 769px) {
    @media (hover: hover) {
        .solution-interview-card.is-more-arrow-animated .solution-more-arrow-item:nth-child(1) {
            animation: solution-more-arrow-before 2.4s infinite;
        }
        .solution-interview-card.is-more-arrow-animated .solution-more-arrow-item:nth-child(2) {
            animation: solution-more-arrow-after 2.4s infinite;
        }
        .solution-member-card:hover .solution-member-image img,
        .solution-project-card:hover .solution-project-image img {
            scale: 1.5;
        }
        /* 矢印は右へ流れて消え、左から入り直す（既存ページと同じ挙動） */
        .solution-member-arrow::after,
        .solution-project-card-arrow::after,
        .solution-member-card:hover .solution-member-arrow::before,
        .solution-project-card:hover .solution-project-card-arrow::before {
            animation: arrow_move_before 1s forwards;
        }
        .solution-member-arrow::before,
        .solution-project-card-arrow::before,
        .solution-member-card:hover .solution-member-arrow::after,
        .solution-project-card:hover .solution-project-card-arrow::after {
            animation: arrow_move_after 1s forwards;
        }
    }
}

@keyframes solution-more-arrow-before {
    0% {
        transform: translateX(0);
    }
    22.5%,
    100% {
        transform: translateX(calc(101% + 8rem));
    }
}
@keyframes solution-more-arrow-after {
    0%,
    22.5% {
        transform: translateX(calc(-101% - 8rem));
    }
    50%,
    100% {
        transform: translateX(0);
    }
}