:root {
    --phone-solution-blue: #1597ed;
    --phone-solution-deep-blue: #0878cf;
    --phone-solution-pale-blue: #e9f6ff;
    --phone-solution-page-bg: #f3f5f8;
    --phone-solution-border: #e4e9ef;
    --phone-solution-muted: #6f7784;
    --phone-solution-shadow: 0 8px 28px rgba(35, 78, 117, .08);
}

.phone-solution-body {
    margin: 0;
    background: var(--phone-solution-page-bg);
}

.phone-solution-page {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--phone-solution-page-bg);
}

.phone-solution-page *,
.phone-solution-page *::before,
.phone-solution-page *::after {
    box-sizing: border-box;
}

.phone-solution-page h1,
.phone-solution-page h2,
.phone-solution-page h3,
.phone-solution-page p,
.phone-solution-page dl,
.phone-solution-page dd,
.phone-solution-page figure {
    margin: 0;
}

.phone-solution-hero {
    position: relative;
    display: grid;
    min-height: clamp(510px, 82vw, 615px);
    padding: clamp(104px, 17vw, 128px) clamp(20px, 5.6vw, 42px) clamp(42px, 8vw, 60px);
    place-items: center;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    text-align: center;
}

.phone-solution-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(243, 245, 248, 0), var(--phone-solution-page-bg));
    content: "";
    pointer-events: none;
}

.phone-solution-hero-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
}

.phone-solution-hero h1 {
    color: #1a2738;
    font-size: clamp(30px, 6.4vw, 48px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.phone-solution-hero h1 span {
    display: inline;
}

.phone-solution-hero h1 span:not(:last-child) {
    margin-right: .18em;
}

.phone-solution-hero h1 .is-highlight {
    color: var(--phone-solution-blue);
}

.phone-solution-badge {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    margin-top: clamp(14px, 3vw, 22px);
    padding: 6px 18px;
    border: 1px solid rgba(21, 151, 237, .28);
    border-radius: 999px;
    color: var(--phone-solution-deep-blue);
    background: rgba(255, 255, 255, .8);
    font-size: clamp(14px, 2.4vw, 18px);
    font-weight: 600;
}

.phone-solution-stat {
    display: block;
    margin-top: clamp(18px, 4vw, 30px);
    color: #27394e;
    font-size: clamp(18px, 3.6vw, 27px);
    line-height: 1.4;
}

.phone-solution-hero p {
    max-width: 610px;
    margin: 12px auto 0;
    color: #5a6676;
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.75;
}

.phone-solution-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 2.4vw, 18px);
    margin-top: clamp(20px, 4vw, 30px);
}

.phone-solution-button,
.phone-solution-card-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: clamp(14px, 2.6vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.phone-solution-button {
    min-width: clamp(136px, 31vw, 232px);
    padding: 11px clamp(15px, 4vw, 30px);
}

.phone-solution-button.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #35b8ff, var(--phone-solution-blue));
    box-shadow: 0 8px 20px rgba(21, 151, 237, .2);
}

.phone-solution-button.is-secondary {
    border-color: #a8d8f8;
    color: var(--phone-solution-deep-blue);
    background: rgba(255, 255, 255, .9);
}

.phone-solution-button:hover,
.phone-solution-button:focus,
.phone-solution-card-action:hover,
.phone-solution-card-action:focus {
    filter: brightness(.97);
}

.phone-solution-selection,
.phone-solution-scenes,
.phone-solution-values,
.phone-solution-faq,
.phone-solution-services {
    padding: clamp(34px, 7vw, 52px) clamp(14px, 4.8vw, 36px);
}

.phone-solution-selection,
.phone-solution-values,
.phone-solution-services {
    background: #fff;
}

.phone-solution-section-heading {
    margin-bottom: clamp(22px, 4.8vw, 36px);
    text-align: center;
}

.phone-solution-section-heading > span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    color: var(--phone-solution-deep-blue);
    background: var(--phone-solution-pale-blue);
    font-size: 14px;
    font-weight: 600;
}

.phone-solution-section-heading h2 {
    margin-top: 10px;
    color: #222f3f;
    font-size: clamp(23px, 4.4vw, 33px);
    line-height: 1.35;
}

.phone-solution-selection-intro {
    max-width: 650px;
    margin: 0 auto clamp(20px, 4vw, 30px);
    color: var(--phone-solution-muted);
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.8;
    text-align: center;
}

.phone-solution-selection-list {
    display: flex;
    gap: clamp(14px, 2.8vw, 21px);
    overflow-x: auto;
    padding: 2px 0 12px;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.phone-solution-selection-list::-webkit-scrollbar {
    display: none;
}

.phone-solution-selection-list:focus-visible {
    outline: 2px solid var(--phone-solution-blue);
    outline-offset: 4px;
}

.phone-solution-selection-card {
    flex: 0 0 clamp(250px, 78vw, 430px);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--phone-solution-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--phone-solution-shadow);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.phone-solution-selection-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef2f6;
}

.phone-solution-selection-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phone-solution-selection-copy {
    padding: clamp(16px, 3.6vw, 25px);
}

.phone-solution-selection-card h3 {
    color: #21354b;
    font-size: clamp(18px, 3.2vw, 24px);
    line-height: 1.45;
}

.phone-solution-selection-product {
    margin-top: 10px;
    color: var(--phone-solution-blue);
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.6;
}

.phone-solution-selection-product strong {
    font-weight: 700;
}

.phone-solution-selection-needs {
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: #606a78;
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.7;
}

.phone-solution-selection-needs span {
    color: #34465a;
    font-weight: 600;
}

.phone-solution-scenes {
    display: grid;
    gap: clamp(22px, 5.6vw, 42px);
}

.phone-solution-scenes > .phone-solution-section-heading {
    margin-bottom: 0;
}

.phone-solution-scene-card {
    padding: clamp(20px, 4.8vw, 36px);
    border: 1px solid rgba(223, 228, 235, .85);
    border-radius: clamp(15px, 3vw, 22px);
    background: #fff;
    box-shadow: var(--phone-solution-shadow);
}

.phone-solution-scene-card > header {
    text-align: center;
}

.phone-solution-scene-card h2 {
    color: #263445;
    font-size: clamp(23px, 4.6vw, 34px);
    line-height: 1.35;
}

.phone-solution-scene-card h2 em {
    margin-right: .22em;
    color: var(--phone-solution-blue);
    font-style: normal;
}

.phone-solution-scene-subtitle {
    margin-top: 6px !important;
    color: #506073;
    font-size: clamp(15px, 2.8vw, 21px);
    font-weight: 600;
}

.phone-solution-scene-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: clamp(16px, 3.6vw, 27px);
    border-radius: 12px 12px 0 0;
    object-fit: cover;
}

.phone-solution-scene-details {
    padding: clamp(16px, 3.6vw, 27px);
    border-radius: 0 0 12px 12px;
    background: #f5f7fa;
}

.phone-solution-scene-details section + section {
    margin-top: clamp(12px, 2.8vw, 20px);
}

.phone-solution-scene-details h3 {
    color: var(--phone-solution-blue);
    font-size: clamp(15px, 2.7vw, 20px);
    line-height: 1.55;
}

.phone-solution-scene-pain p,
.phone-solution-scene-solutions li {
    margin-top: 4px;
    color: #626d7c;
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.7;
}

.phone-solution-scene-pain p {
    display: flex;
    flex-wrap: wrap;
}

.phone-solution-scene-pain span:not(:last-child)::after {
    margin-right: .35em;
    content: "、";
}

.phone-solution-scene-solutions ul {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.phone-solution-scene-solutions li {
    position: relative;
    padding-left: 1em;
}

.phone-solution-scene-solutions li::before {
    position: absolute;
    left: 0;
    color: var(--phone-solution-blue);
    content: "•";
}

.phone-solution-scene-outcome {
    display: inline-flex;
    margin-top: clamp(12px, 2.8vw, 20px);
    padding: 5px 10px;
    border-radius: 5px;
    color: #ff5a73;
    background: #fff0f3;
    font-size: clamp(14px, 2.4vw, 18px);
    font-weight: 700;
    line-height: 1.5;
}

.phone-solution-scene-actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(19px, 4vw, 30px);
}

.phone-solution-card-action {
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 10px clamp(18px, 4vw, 30px);
    color: var(--phone-solution-deep-blue);
    background: var(--phone-solution-pale-blue);
}

.phone-solution-card-action span {
    margin-left: 8px;
    font-size: 1.2em;
}

.phone-solution-value-grid,
.phone-solution-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.8vw, 21px);
}

.phone-solution-value-grid article {
    min-width: 0;
    padding: clamp(15px, 3.6vw, 27px);
    border: 1px solid var(--phone-solution-border);
    border-radius: 13px;
    background: #f8fbff;
}

.phone-solution-value-grid article:nth-child(2n) {
    background: #f7f9fc;
}

.phone-solution-value-grid h3 {
    color: #2d4056;
    font-size: clamp(15px, 2.7vw, 20px);
    line-height: 1.5;
}

.phone-solution-value-grid p {
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--phone-solution-muted);
    font-size: 14px;
    line-height: 1.65;
}

.phone-solution-faq {
    background: var(--phone-solution-page-bg);
}

.phone-solution-faq-list {
    overflow: hidden;
    border: 1px solid var(--phone-solution-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--phone-solution-shadow);
}

.phone-solution-faq-item + .phone-solution-faq-item {
    border-top: 1px solid var(--phone-solution-border);
}

.phone-solution-faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 15px clamp(15px, 3.6vw, 27px);
    color: #2d3b4d;
    cursor: pointer;
    font-size: clamp(14px, 2.6vw, 19px);
    font-weight: 600;
    line-height: 1.55;
    list-style: none;
}

.phone-solution-faq-item summary::-webkit-details-marker {
    display: none;
}

.phone-solution-faq-item summary i {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--phone-solution-pale-blue);
}

.phone-solution-faq-item summary i::before,
.phone-solution-faq-item summary i::after {
    position: absolute;
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: var(--phone-solution-blue);
    content: "";
}

.phone-solution-faq-item summary i::after {
    transform: rotate(90deg);
    transition: transform .2s ease;
}

.phone-solution-faq-item[open] summary {
    color: var(--phone-solution-deep-blue);
}

.phone-solution-faq-item[open] summary i::after {
    transform: rotate(0);
}

.phone-solution-faq-item > div {
    padding: 0 clamp(15px, 3.6vw, 27px) 18px;
}

.phone-solution-faq-item > div p {
    color: var(--phone-solution-muted);
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.75;
}

.phone-solution-faq-action {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: clamp(22px, 4.8vw, 36px) auto 0;
}

.phone-solution-service-grid article {
    min-width: 0;
    padding: clamp(16px, 4vw, 30px) clamp(12px, 3.2vw, 24px);
    border: 1px solid var(--phone-solution-border);
    border-radius: 13px;
    background: #fff;
    text-align: center;
}

.phone-solution-service-grid img {
    width: clamp(48px, 10vw, 75px);
    height: clamp(48px, 10vw, 75px);
    object-fit: contain;
}

.phone-solution-service-grid h3 {
    margin-top: 10px;
    color: #2c4056;
    font-size: clamp(15px, 2.8vw, 21px);
}

.phone-solution-service-grid p {
    margin-top: 7px;
    overflow-wrap: anywhere;
    color: var(--phone-solution-muted);
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 359px) {
    .phone-solution-hero-actions {
        display: grid;
    }

    .phone-solution-button {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .phone-solution-faq-item summary i::after {
        transition: none;
    }
}