/* ========================================
   Reset & Base Styles
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* 1rem = 16px */
    overflow-x: hidden;
}

body {
    font-family: 'Zen Old Mincho', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

ul {
    list-style: none;
}

.sp-br {
    display: none;
}

/* ========================================
   First View Section
======================================== */
.fv {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 640;
    overflow: visible;
}

/* Vertical Text */
.fv::after {
    content: '5DENTAL TOKYO GINZA';
    position: absolute;
    left: 102.25vw; /* 1308.8px at 1280px */
    top: 0;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 7.8125vw; /* 100px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.3125vw; /* 4px at 1280px */
    color: #ffffff;
    opacity: 0.2;
    transform: rotate(90deg);
    transform-origin: left top;
    white-space: nowrap;
    z-index: 15;
}

/* Background */
.fv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/fv.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Container */
.fv__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Left Content Area */
.fv__left {
    position: absolute;
    top: 18.75%; /* 120/640 = 0.1875 */
    left: 0;
    width: 50.3125%; /* 644/1280 = 0.503125 */
    height: 58.4375%; /* 374/640 = 0.584375 */
}

/* Title Group */
.fv__title-group {
    margin-bottom: 7.8125%; /* 50/640 */
    margin-left: 11.71875%; /* 150/1280 */
}

.fv__title {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 4.140625vw; /* 53px at 1280px */
    line-height: 1.2;
    color: #fcffcc;
    text-align: center;
    margin-bottom: 2.1875%; /* 14/640 */
    filter: drop-shadow(0 0 1.25rem #1B5779);
}

.fv__subtitle {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 2.1875vw; /* 28px at 1280px */
    line-height: 1.3;
    color: #ffffff;
    text-align: center;
    filter: drop-shadow(0 0 1.25rem #1B5779);
}

/* Point Badges */
.fv__points {
    display: flex;
    gap: 0;
    margin-left: 12.4224%; /* 80/644 */
    margin-bottom: 5.3476%; /* 20/374 */
}

.fv__point {
    position: relative;
    width: 26.5957%; /* 150/564 */
    padding-bottom: 26.5957%; /* 150/564 正方形を維持 */
    flex-shrink: 0;
    background-image: url('../images/bg-cicle-sky.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.fv__point:not(:first-child) {
    margin-left: -2.1277%; /* -12/564 */
}

/* 王冠アイコン */
.fv__point::before {
    content: '';
    position: absolute;
    top: 13.33%; /* 20/150 */
    left: 50%;
    transform: translateX(-50%);
    width: 18%; /* 27/150 */
    height: 9.33%; /* 14/150 */
    background-image: url('../images/icn-crown.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.fv__point-content {
    position: absolute;
    top: 30.67%; /* 46/150 */
    left: 8%; /* 12/150 */
    width: 84%; /* 126/150 */
    height: 61.33%; /* 92/150 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Point 1: 施術症例 10,000本 */
.fv__point:nth-child(1) .fv__point-label {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.5625vw; /* 20px at 1280px */
    line-height: 1.3;
    color: #006ed5;
    text-align: center;
    letter-spacing: 0.125rem;
    margin-bottom: 0.125rem;
    white-space: nowrap;
}

.fv__point:nth-child(1) .fv__point-value {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    line-height: 1.3;
    color: #006ed5;
    text-align: center;
    white-space: nowrap;
}

.fv__point-number {
    font-size: 2.5vw; /* 32px at 1280px */
}

.fv__point-unit {
    font-size: 1.875vw; /* 24px at 1280px */
}

/* Point 2-3: テキスト */
.fv__point:nth-child(2) .fv__point-content,
.fv__point:nth-child(3) .fv__point-content {
    top: 34%; /* 51/150 */
    left: 18%; /* 27/150 */
    width: 64%; /* 96/150 */
    height: 62%; /* 93/150 */
}

/* Point 4: テキスト */
.fv__point:nth-child(4) .fv__point-content {
    top: 31.33%; /* 47/150 */
    left: 14%; /* 21/150 */
    width: 72%; /* 108/150 */
    height: 64%; /* 96/150 */
}

.fv__point-text {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.875vw; /* 24px at 1280px */
    line-height: 1.3;
    color: #006ed5;
    text-align: center;
    white-space: nowrap;
}

.fv__point:nth-child(4) .fv__point-text {
    font-size: 1.40625vw; /* 18px at 1280px */
}

/* Veneer Image */
.fv__veneer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18%; /* 230px/1280 */
    height: 25%; /* 160px/640 */
}

.fv__veneer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* No.1 Emblem */
.fv__emblem {
    position: absolute;
    top: 10%; /* 64/640 */
    right: 5%; /* 64/1280 */
    width: 14.140625%; /* 181/1280 */
    height: 28.125%; /* 180/640 */
    background-image: url('../images/fv-emblem.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Citation */
.fv__citation {
    position: absolute;
    bottom: 6.25%; /* 40/640 */
    right: 3.125%; /* 40/1280 */
    max-width: 28.125%; /* 360/1280 */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 500;
    font-size: 0.78125vw; /* 10px at 1280px */
    line-height: 1.3;
    color: #595a5d;
}

/* ========================================
   Recommend Section
======================================== */
.recommend {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 956;
    overflow: hidden;
    margin-top: -8.75vw; /* -112px at 1280px (7rem = 112px) */
    z-index: 1;
}

.recommend::before {
    content: '';
    position: absolute;
    top: 8.359375vw; /* 107px at 1280px */
    left: 0;
    width: 100%;
    height: 80%;
    background: #399BE4;
    z-index: -1;
}

/* Background */
.recommend__bg {
    position: absolute;
    top: 8.368%; /* 80/956 */
    right: 0;
    width: 96.875%; /* 1240/1280 */
    height: 91.632%; /* 876/956 */
    background-color: #2384cd;
}

/* Main Container */
.recommend__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 89.84375%; /* 1150/1280 */
    height: 67.155%; /* 642/956 */
}

/* Woman Image Section */
.recommend__woman {
    position: absolute;
    top: 0;
    left: 0;
    width: 55.391%; /* 637/1150 */
    height: 100%; /* 642/642 */
}

.recommend__woman-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 94.192%; /* 600/637 */
    height: 100%; /* 642/642 */
    object-fit: cover;
    object-position: left center;
}

/* NON PREP VENNER Text */
.recommend__woman-text {
    position: absolute;
    bottom: -0.781vw; /* -10px at 1280px */
    left: 0;
    width: 100%; /* 637/637 */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 4.53125vw; /* 58px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.22656vw; /* 2.9px at 1280px */
    color: #4f9dd7;
    opacity: 0.4;
    white-space: nowrap;
    overflow: hidden;
}

.recommend__woman-text-br {
    display: none;
}

/* Content Section */
.recommend__content {
    position: absolute;
    top: 24.922%; /* 160/642 */
    right: 0;
    width: 40.870%; /* 470/1150 */
    height: 64.330%; /* 413/642 */
}

/* Title */
.recommend__title {
    margin-bottom: 7.748%; /* 32/413 */
}

.recommend__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    background: linear-gradient(90deg, #c7edff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.969%; /* 4/413 */
    white-space: nowrap;
}

.recommend__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.08594vw; /* 1.1px at 1280px */
    background: linear-gradient(90deg, #c7edff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

/* List */
.recommend__list {
    display: flex;
    flex-direction: column;
    gap: 0.313%; /* 4/1280 viewport */
}

.recommend__list-item {
    display: flex;
    align-items: center;
    padding: 0.781vw 0.9375vw; /* 10px 12px at 1280px */
    background-color: #2f8ed5;
}

.recommend__list-icon {
    flex-shrink: 0;
    width: 1.5625vw; /* 20px at 1280px */
    height: 1.5625vw; /* 20px at 1280px */
    margin-right: 0.625vw; /* 8px at 1280px */
    background-image: url('../images/icn-chrck-round.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.recommend__list-text {
    flex: 1;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #ffffff;
    white-space: nowrap;
}

/* Features Section */
.recommend__features {
    position: absolute;
    top: 73.849%; /* (642 + 64) / 956 = 706/956 */
    left: 50%;
    transform: translateX(-50%);
    width: 79.6875%; /* 1020/1280 */
    height: 17.782%; /* 170/956 */
    display: flex;
    align-items: center;
    gap: 7.157%; /* 73/1020 */
}

.recommend__features-title {
    flex-shrink: 0;
    width: 23.824%; /* 243/1020 */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.08594vw; /* 1.1px at 1280px */
    color: #fcffcc;
}

.recommend__features-list {
    flex: 1;
    display: flex;
    gap: 1.137%; /* 8/704 */
}

.recommend__features-item {
    position: relative;
    width: 24.148%; /* 170/704 */
    aspect-ratio: 1 / 1;
}

.recommend__features-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.recommend__features-item:nth-child(1) .recommend__features-frame {
    background-image: url('../images/bg-features1.webp');
}

.recommend__features-item:nth-child(2) .recommend__features-frame {
    background-image: url('../images/bg-features2.webp');
}

.recommend__features-item:nth-child(3) .recommend__features-frame {
    background-image: url('../images/bg-features3.webp');
}

.recommend__features-item:nth-child(4) .recommend__features-frame {
    background-image: url('../images/bg-features4.webp');
}

.recommend__features-bg {
    display: none;
}

.recommend__features-text {
    position: absolute;
    top: 33.529%; /* 57/170 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.5625vw; /* 20px at 1280px */
    line-height: 1.4;
    letter-spacing: 0.07813vw; /* 1px at 1280px */
    color: #ffffff;
    text-align: center;
}

.recommend__features-item:nth-child(3) .recommend__features-text {
    top: 25.294%; /* 43/170 */
}

/* ========================================
   About Section
======================================== */
.about {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 1043;
}

.about::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 8vw;
    width: 15.546875vw; /* 199px at 1280px */
    height: 7.5vw; /* 96px at 1280px */
    background-image: url('../images/about-veneer2.webp');
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: 10;
}

/* Background */
.about__bg {
    position: absolute;
    top: -7.3125vw;
    left: 0;
    width: 100%;
    height: calc(100% + 7.3125vw);
    background-image: url('../images/about-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Background Text */
.about__bg-text {
    position: absolute;
    top: 14.86%; /* 155/1043 */
    left: 0;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 5vw; /* 64px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.2vw; /* 2.56px at 1280px */
    color: #2384cd;
    opacity: 0.2;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Content Container */
.about__container {
    position: absolute;
    top: 18.025%; /* 188/1043 */
    left: 0;
    width: 100%;
    height: 43.817%; /* 457/1043 */
    display: flex;
    align-items: flex-start;
    gap: 6.25%; /* 80/1280 */
}

/* Left Content */
.about__left {
    margin-left: 6.25%; /* 80/1280 */
    margin-top: 12.472%; /* 57/457 */
    display: flex;
    flex-direction: column;
    gap: 1.875vw; /* 24px at 1280px */
}

.about__badge {
    display: inline-block;
    padding: 0.781vw 1.5625vw; /* 10px 20px at 1280px */
    background-color: #72a3c8;
    border-radius: 1.797vw; /* 23px at 1280px (46/2) */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.5625vw; /* 20px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.07813vw; /* 1px at 1280px */
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

.about__title {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 2.5vw; /* 32px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.125vw; /* 1.6px at 1280px */
    color: #197bc4;
    text-align: center;
}

/* Right Image */
.about__image {
    position: relative;
    width: 52.891%; /* 677/1280 */
    height: 100%; /* 457/457 */
    background-color: #7fbede;
}

.about__image img {
    position: absolute;
    top: 0;
    left: 2.216%; /* 15/677 */
    width: 97.784%; /* 662/677 */
    height: 89.715%; /* 410/457 */
    object-fit: cover;
}

/* Bottom Content */
.about__bottom {
    position: absolute;
    top: 67.594%; /* 705/1043 */
    left: 12.5%; /* 160/1280 */
    width: 75%; /* 960/1280 */
    display: flex;
    gap: 3.333%; /* 32/960 */
}

.about__subtitle {
    flex-shrink: 0;
    width: 35.417%; /* 340/960 */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.875vw; /* 24px at 1280px */
    line-height: 1.4;
    letter-spacing: 0.09375vw; /* 1.2px at 1280px */
    color: #197bc4;
}

.about__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625vw; /* 8px at 1280px */
}

.about__text p {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
    margin: 0;
}

.about__text-highlight {
    font-weight: 900;
    color: #197bc4;
}

/* ========================================
   Difference Section
======================================== */
.difference {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 760;
    display: flex;
    gap: 1.25%; /* 16/1280 */
    background: linear-gradient(270deg, #C5EBFF 0%, #D0EFFF 27.32%, #C6EBFF 59.45%, #BFEAFF 100%);
    top: -0.781vw; /* -10px at 1280px */
}

.difference::after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    height: 29.84375vw;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 0;
}

.difference__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.difference__card--traditional {
    padding-top: 12.641%; /* 80/633 */
}

.difference__image {
    width: 100%;
    height: auto;
    display: block;
}

.difference__text-box {
    background-color: #ffffff;
    padding: 2.5vw 3.125vw; /* 32px 40px at 1280px */
    display: flex;
    flex-direction: column;
    gap: 0.625vw; /* 8px at 1280px */
}

.difference__text-box p {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
    margin: 0;
}

.difference__text-highlight {
    font-weight: 900;
}

.difference__text-highlight--red {
    color: #f54d77;
}

.difference__text-highlight--blue {
    color: #197bc4;
}

/* ========================================
   Cases Section
   ======================================== */

.cases {
    position: relative;
    width: 100%;
    padding: 15.15625vw 0 3.125vw 0; /* 194px 0 40px 0 at 1280px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.125vw; /* 40px at 1280px */
}

.cases::before {
    content: 'INTRODUCTION TO OUR LAMINATE VENEER TREATMENT';
    position: absolute;
    left: -1.5875vw;
    top: 4.6875vw; /* 60px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 7.8125vw; /* 100px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.3125vw; /* 4px at 1280px */
    color: #1382d7;
    opacity: 0.1;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: left center;
    white-space: nowrap;
    z-index: -1;
}

.cases::after {
    content: '';
    position: absolute;
    right: 0;
    top: 2.34375vw; /* 30px at 1280px */
    width: 22.65625vw; /* 290px at 1280px */
    height: 20.78125vw; /* 266px at 1280px */
    background-image: url('../images/cases-woman.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Title */
.cases__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125vw; /* 4px at 1280px */
}

.cases__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    color: #2384cd;
    margin: 0;
}

.cases__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #2384cd;
    margin: 0;
}

/* Container */
.cases__container {
    width: 75vw; /* 960px at 1280px */
    display: flex;
    flex-direction: column;
    gap: 3.125vw; /* 40px at 1280px */
}

/* Case Item */
.cases__item {
    display: flex;
    flex-direction: column;
    gap: 1.875vw; /* 24px at 1280px */
}

/* Case Header */
.cases__header {
    display: flex;
    align-items: center;
    gap: 0.9375vw; /* 12px at 1280px */
}

.cases__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.46875vw; /* 70px at 1280px */
    height: 1.875vw; /* 24px at 1280px */
    background-color: #1382d7;
    border-radius: 1.21094vw; /* 15.5px at 1280px */
}

.cases__badge-text {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #ffffff;
    text-align: center;
}

.cases__subtitle {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #1382d7;
    margin: 0;
}

/* Before/After */
.cases__ba {
    position: relative;
    display: flex;
    gap: 0.625vw; /* 8px at 1280px */
}

.cases__ba-item {
    position: relative;
    flex: 1;
}

.cases__ba-frame {
    width: 100%;
    aspect-ratio: 556 / 250;
    background-color: #ffffff;
    border-radius: 0.78125vw; /* 10px at 1280px */
    padding: 0.3125vw; /* 4px at 1280px */
    overflow: hidden;
}

.cases__ba-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.546875vw; /* 7px at 1280px */
}

.cases__ba-label {
    position: absolute;
    left: 1.25vw; /* 16px at 1280px */
    bottom: 1.5625vw; /* 20px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.40625vw; /* 18px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.028125vw; /* 0.36px at 1280px */
    color: #ffffff;
    margin: 0;
}

.cases__ba-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5.46875vw; /* 70px at 1280px */
    height: 5.46875vw; /* 70px at 1280px */
    z-index: 1;
}

.cases__ba-arrow img {
    width: 100%;
    height: 100%;
}

/* Content */
.cases__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875vw; /* 24px at 1280px */
}

.cases__description {
    width: 72vw; /* 921px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
    margin: 0;
}

/* Table */
.cases__table {
    position: relative;
    width: 72vw; /* 921px at 1280px */
    background-color: #e9f8ff;
    border: 0.117188vw solid #1382d7; /* 1.5px at 1280px */
    border-bottom: 0.117188vw solid #e9f8ff; /* 1.5px at 1280px */
}

.cases__table--tall {
    height: 9.375vw; /* 120px at 1280px */
}

.cases__table-row {
    display: flex;
}

.cases__table-row--top {
    height: 4.6875vw; /* 60px at 1280px */
    border-bottom: 0.117188vw solid #1382d7; /* 1.5px at 1280px */
}

.cases__table--tall .cases__table-row--top {
    height: 6.40625vw; /* 82px at 1280px */
}

.cases__item--case3 .cases__table {
    height: 10.46875vw; /* 134px at 1280px (96px + 38px) */
}

.cases__item--case3 .cases__table-row--top {
    height: 7.5vw; /* 96px at 1280px */
}

.cases__table-row--bottom {
    height: 2.96875vw; /* 38px at 1280px */
}

.cases__table-row--bottom .cases__table-header {
    border-bottom: 0.117188vw solid #1382d7; /* 1.5px at 1280px */
}

.cases__table-row--bottom .cases__table-cell {
    border-bottom: 0.117188vw solid #1382d7; /* 1.5px at 1280px */
}

.cases__table-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.84375vw; /* 190px at 1280px */
    background-color: #1382d7;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #ffffff;
    text-align: center;
    padding: 0 0.625vw; /* 8px at 1280px */
}

.cases__table-cell {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 0.9375vw; /* 12px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #485676;
}

/* Divider */
.cases__divider {
    width: 70vw;
    height: 0.078125vw;
    background-color: #72A3C8;
}

/* Banner */
.cases__banner {
    display: block;
    width: 54.6875vw; /* 700px at 1280px */
    height: 14.0625vw; /* 180px at 1280px */
    margin-top: 3.125vw; /* 40px at 1280px */
    transition: opacity 0.3s ease;
}

.cases__banner:hover {
    opacity: 0.7;
}

.cases__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   Point Section
   ======================================== */

.point {
    position: relative;
    width: 100%;
    margin-top: 3.125vw; /* 40px at 1280px */
}

.point__bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 97.5vw; /* 1248px at 1280px */
    height: 45vw;
    display: block;
    z-index: -1;
}

.point__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.point__content {
    position: relative;
    padding: 6.25vw 6.25vw; /* 80px at 1280px */
}

/* Header */
.point__header {
    display: flex;
    gap: 3.125vw; /* 40px at 1280px */
    margin-bottom: 7.34375vw; /* 94px at 1280px */
}

.point__title-group {
    display: flex;
    flex-direction: column;
    gap: 0.3125vw; /* 4px at 1280px */
}

.point__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    color: #197bc4;
    margin: 0;
}

.point__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #197bc4;
    margin: 0;
}

.point__description {
    flex: 1;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #197bc4;
    margin: 0;
    padding-top: 1.328125vw; /* 17px at 1280px */
}

/* Points List */
.point__list {
    display: flex;
    gap: 1.875vw; /* 24px at 1280px */
}

.point__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25vw; /* 16px at 1280px */
}

.point__item-header {
    display: flex;
    flex-direction: column;
    gap: 0.625vw; /* 8px at 1280px */
}

.point__item-number {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.40625vw; /* 18px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.0703125vw; /* 0.9px at 1280px */
    color: #197bc4;
    margin: 0;
}

.point__item-title {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.5625vw; /* 20px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.078125vw; /* 1px at 1280px */
    color: #197bc4;
    margin: 0;
}

.point__item-text {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
    margin: 0;
}

/* Divider */
.point__divider {
    width: 0.117188vw; /* 1.5px at 1280px */
    height: 18.359375vw; /* 235px at 1280px */
    background-color: #197bc4;
}

/* ========================================
   Step Section
   ======================================== */

.step {
    position: relative;
    width: 100%;
}

.step__bg {
    position: absolute;
    left: 0;
    top: 15.59375vw;
    width: 96.875vw;
    height: 60.9375vw;
    background-color: #2384cd;
    z-index: -1;
}

/* Title */
.step__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125vw; /* 4px at 1280px */
    margin-bottom: 2.5vw; /* 32px at 1280px */
}

.step__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    color: #2384cd;
    margin: 0;
}

.step__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #2384cd;
    margin: 0;
}

/* Container */
.step__container {
    padding: 0 6.25vw; /* 0 80px at 1280px */
    display: flex;
    flex-direction: column;
    gap: 2.5vw; /* 32px at 1280px */
}

.step__row {
    display: flex;
    gap: 1.875vw; /* 24px at 1280px */
}

.step__item {
    width: 27.890625vw; /* 357px at 1280px */
    display: flex;
    flex-direction: column;
    gap: 1.25vw; /* 16px at 1280px */
}

.step__image {
    width: 100%;
    height: 16.171875vw; /* 207px at 1280px */
    overflow: hidden;
}

.step__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step__content {
    display: flex;
    gap: 0.9375vw; /* 12px at 1280px */
}

.step__number {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.40625vw; /* 18px at 1280px */
    line-height: 1.3;
    letter-spacing: 0.0703125vw; /* 0.9px at 1280px */
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
}

.step__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625vw; /* 8px at 1280px */
}

.step__text p {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #ffffff;
    margin: 0;
}

.step__note {
    font-size: 1.015625vw; /* 13px at 1280px */
    letter-spacing: 0.050781vw; /* 0.65px at 1280px */
}

/* ========================================
   QA Section
   ======================================== */

.qa {
    position: relative;
    top: -3.125vw; /* -64px (4rem) at 1280px */
    width: 100%;
    min-height: 195vw;
}

.qa__bg {
    position: absolute;
    top: -65vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    display: block;
    z-index: -2;
}

.qa__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.qa__images {
    position: relative;
    top: -2vw;
    width: 100%;
    height: 100%;
}

.qa__image {
    position: absolute;
    object-fit: contain;
}

.qa__image--1 {
    left: 25.3125vw; /* 324px at 1280px */
    top: 7.96875vw; /* 102px at 1280px */
    width: 27.578125vw; /* 353px at 1280px */
    height: 35.859375vw; /* 459px at 1280px */
}

.qa__image--2 {
    left: 56.015625vw; /* 717px at 1280px */
    top: 24.421875vw; /* 287px at 1280px */
    width: 18.75vw; /* 240px at 1280px */
    height: 23.4375vw; /* 300px at 1280px */
}

.qa__image--3 {
    left: 0;
    top: 28.609375vw; /* 315px at 1280px */
    width: 23.4375vw; /* 300px at 1280px */
    height: 19.0625vw; /* 244px at 1280px */
}

.qa__image--4 {
    left: 80.390625vw; /* 1029px at 1280px */
    top: 20.625vw; /* 264px at 1280px */
    width: 17.734375vw; /* 227px at 1280px */
    height: 22.8125vw; /* 292px at 1280px */
}

.qa__content {
    position: absolute;
    top: 53.25vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75vw; /* 48px at 1280px */
}

.qa__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625vw; /* 8px at 1280px */
}

.qa__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    color: #197bc4;
    text-align: center;
}

.qa__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #197bc4;
    text-align: center;
    width: 34.84375vw; /* 446px at 1280px */
}

.qa__list {
    display: flex;
    flex-direction: column;
    gap: 2.5vw; /* 32px at 1280px */
    width: 75vw; /* 960px at 1280px */
}

.qa__item {
    display: flex;
    flex-direction: column;
    gap: 1.25vw; /* 16px at 1280px */
    width: 100%;
}

.qa__question {
    background-color: #197bc4;
    display: flex;
    align-items: center;
    gap: 0.625vw; /* 8px at 1280px */
    padding: 0.625vw 1.25vw; /* 8px 16px at 1280px */
    width: 100%;
}

.qa__question-label {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.875vw; /* 24px at 1280px */
    line-height: 1.4;
    letter-spacing: 0.09375vw; /* 1.2px at 1280px */
    color: #ffffff;
}

.qa__question-text {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.4;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #ffffff;
    width: 69.0625vw; /* 884px at 1280px */
}

.qa__answer {
    display: flex;
    gap: 0.9375vw; /* 12px at 1280px */
    width: 71.25vw; /* 912px at 1280px */
    margin-left: 1.875vw; /* 24px at 1280px */
}

.qa__answer-label {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.875vw; /* 24px at 1280px */
    line-height: 1.4;
    letter-spacing: 0.09375vw; /* 1.2px at 1280px */
    color: #197bc4;
    text-align: right;
}

.qa__answer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9375vw; /* 12px at 1280px */
}

.qa__answer-content p {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
}

.qa__answer-content--list ul {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.6;
    letter-spacing: 0.0625vw; /* 0.8px at 1280px */
    color: #485676;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qa__answer-content--list li {
    margin-left: 1.875vw; /* 24px at 1280px */
    position: relative;
}

.qa__answer-content--list li::before {
    content: '•';
    position: absolute;
    left: -1.25vw; /* -16px at 1280px */
}

/* ========================================
   Price Section
   ======================================== */

.price {
    position: relative;
    width: 100%;
    min-height: 69.84375vw; /* 894px at 1280px */
}

.price__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 69.84375vw; /* 894px at 1280px */
    background-color: #485676;
    z-index: -1;
}

.price__content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6.25vw 0 0; /* 80px 0 0 at 1280px */
}

.price__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625vw; /* 8px at 1280px */
    margin-bottom: 3.125vw; /* 40px at 1280px */
}

.price__title-main {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 3.125vw; /* 40px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.15625vw; /* 2px at 1280px */
    color: #fcffcc;
    text-align: center;
}

.price__title-sub {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 900;
    font-size: 1.71875vw; /* 22px at 1280px */
    line-height: 1.2;
    letter-spacing: 0.0859375vw; /* 1.1px at 1280px */
    color: #fcffcc;
    text-align: center;
}

.price__fee {
    display: flex;
    flex-direction: column;
    gap: 3.125vw; /* 40px at 1280px */
    width: 62.5vw; /* 800px at 1280px */
}

.price__table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    border: 0.117188vw solid #ffffff; /* 1.5px at 1280px */
}

.price__table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 27.34375vw; /* 350px at 1280px */
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: -1;
}

.price__table::after {
    content: '';
    position: absolute;
    top: 0;
    left: 27.34375vw; /* 350px at 1280px */
    width: 0.117188vw; /* 1.5px at 1280px */
    height: 100%;
    background-color: #ffffff;
}

.price__row {
    border-bottom: 0.117188vw solid #ffffff; /* 1.5px at 1280px */
}

.price__row:last-child {
    border-bottom: none;
}

.price__item-header {
    padding: 0.625vw 0.9375vw; /* 8px 12px at 1280px */
    text-align: left;
    font-weight: 600;
    vertical-align: middle;
    height: 3.203125vw; /* 41px at 1280px */
}

.price__item-header--single {
    padding: 0.625vw 0.9375vw; /* 8px 12px at 1280px */
    height: 3.203125vw; /* 41px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #ffffff;
}

.price__item-name {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #ffffff;
    margin: 0;
}

.price__item-desc {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
    font-size: 1.09375vw; /* 14px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #ffffff;
    margin: 0;
}

.price__item-price {
    padding: 0 0.9375vw; /* 0 12px at 1280px */
    font-family: 'Zen Old Mincho', serif;
    font-weight: 400;
    font-size: 1.25vw; /* 16px at 1280px */
    line-height: 1.35;
    letter-spacing: 0.025vw; /* 0.32px at 1280px */
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
}

.price__divider-row {
    height: 2.96875vw; /* 38px at 1280px */
    border-bottom: 0.117188vw solid #ffffff; /* 1.5px at 1280px */
}

.price__divider-row td {
    padding: 0;
}

.price__notes {
    position: relative;
    width: 100%;
}

.price__notes p {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 400;
    font-size: 1.09375vw; /* 14px at 1280px */
    line-height: 1.5;
    letter-spacing: 0.021875vw; /* 0.28px at 1280px */
    color: #ffffff;
}

.price__notes-highlight {
    color: #fcffcc;
    background: linear-gradient(transparent 50%, #394869 50%);
    padding: 0 0.3125vw; /* 0 4px at 1280px */
}

/* ========================================
   Responsive Styles (max-width: 768px)
======================================== */
@media (max-width: 768px) {
    .sp-br {
        display: inline;
    }

    /* ========================================
       First View Section - SP
    ======================================== */
    .fv {
        aspect-ratio: 400 / 774;
        overflow: visible;
    }

    /* Vertical Text - SP */
    .fv::after {
        left: 107.5vw;
        font-size: 25vw;
        letter-spacing: 1vw;
        z-index: 9;
    }

    /* Background - SP */
    .fv__bg {
        background-image: url('../images/fv-sp.webp');
    }

    /* Left Content - Center Layout */
    .fv__left {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Title Group */
    .fv__title-group {
        margin-bottom: 0;
        margin-left: 0;
        position: absolute;
        top: 74.25vw; /* 297px at 400px */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .fv__title {
        font-size: 10vw; /* 40px at 400px */
        margin-bottom: 0;
        text-align: center;
    }

    .fv__subtitle {
        font-size: 5.5vw; /* 22px at 400px */
        margin-top: 3vw;
    }

    /* Point Badges */
    .fv__points {
        position: absolute;
        top: 113.5vw; /* 454px at 400px */
        left: 6vw; /* 24px at 400px */
        transform: none;
        margin-left: 0;
        margin-bottom: 0;
        gap: 0;
        justify-content: flex-start;
        width: 88vw; /* 352px at 400px */
        padding: 0;
    }

    .fv__point {
        width: 31.5vw; /* 126px at 400px */
        padding-bottom: 31.5vw;
    }

    .fv__point:not(:first-child) {
        margin-left: -3.25vw; /* -13px at 400px, overlap */
    }

    /* Show 4th point text as separate element */
    .fv__point:nth-child(4) {
        display: none;
    }

    .fv__point:nth-child(4) .fv__point-text {
        position: absolute;
        top: 148vw; /* 592px at 400px */
        left: 50%;
        transform: translateX(-50%);
        display: block;
        font-size: 4.5vw; /* 18px at 400px */
        text-align: center;
        white-space: nowrap;
        letter-spacing: 0.225vw; /* 0.9px at 400px */
    }

    /* Point Text Sizes */
    .fv__point:nth-child(1) .fv__point-label {
        font-size: 4vw; /* 16px at 400px */
    }

    .fv__point-number {
        font-size: 6.5vw; /* 26px at 400px */
    }

    .fv__point-unit {
        font-size: 4.5vw; /* 18px at 400px */
    }

    .fv__point-text {
        font-size: 5vw; /* 20px at 400px */
    }

    /* Text: 全国各地から患者様が多数来院中 */
    .fv__left::after {
        content: '全国各地から患者様が多数来院中';
        position: absolute;
        top: 148vw; /* 592px at 400px */
        left: 14.75vw; /* 59px at 400px */
        transform: none;
        width: 70.75vw; /* 283px at 400px */
        font-family: 'Zen Old Mincho', serif;
        font-weight: 900;
        font-size: 4.5vw; /* 18px at 400px */
        line-height: 1.3;
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        color: #ffffff;
        text-align: center;
        white-space: nowrap;
        z-index: 20;
    }

    /* Veneer Image - SP */
    .fv__veneer {
        position: absolute;
        bottom: 48vw; /* 192px from bottom at 400px, 774-524-62 = 188 */
        left: -3.5vw; /* -14px at 400px */
        width: 22vw; /* 88px at 400px */
        height: 15.5vw; /* 62px at 400px */
        transform: rotate(6.186deg);
    }

    /* Emblem - SP */
    .fv__emblem {
        display: block;
        position: absolute;
        top: 15.5vw; /* 62px at 400px */
        left: 63vw; /* 252px at 400px */
        width: 35vw; /* 140px at 400px */
        height: 35.25vw; /* 141px at 400px */
        background-image: url('../images/fv-emblem.webp');
        background-size: contain;
        background-position: center;
        z-index: 3;
        background-repeat: no-repeat;
    }

    /* Citation - SP */
    .fv__citation {
        position: absolute;
        top: 159.75vw; /* 639px at 400px */
        left: 4vw; /* 16px at 400px */
        transform: none;
        bottom: auto;
        right: auto;
        width: 92vw; /* 368px at 400px */
        max-width: 92vw;
        font-family: 'Zen Old Mincho', serif;
        font-weight: 500;
        font-size: 2.5vw; /* 10px at 400px */
        line-height: 1.3;
        color: #ffffff;
        text-align: left;
        white-space: pre-wrap;
    }

    /* ========================================
       Recommend Section - SP
    ======================================== */
    .recommend {
        aspect-ratio: 400 / 1543;
        margin-top: -8.75vw;
        z-index: 3;
        overflow: initial;
    }

    .recommend::before {
        top: 19vw;
        height: 93.5%;
        background: #2384cd;
    }

    .recommend__bg {
        top: -6vw;
        height: 99.632%;
    }

    .recommend__container {
        position: relative;
        width: 100%;
        height: auto;
    }

    .recommend__woman {
        position: absolute;
        top: -8vw;
        left: 0;
        width: 100%;
        height: 252.5vw;
        overflow: inherit;
    }

    .recommend__woman-img {
        position: absolute;
        top: -14vw;
        left: -5.37vw;
        width: 154.79vw;
        height: 127.997vw;
        object-fit: contain;
        object-position: center;
        transform: none;
        clip-path: none;
    }

    .recommend__woman-text {
        position: absolute;
        top: 84.5vw;
        left: 0;
        bottom: auto;
        width: 56.75vw;
        font-size: 10vw;
        line-height: 1;
        letter-spacing: 0.5vw;
        white-space: nowrap;
    }

    .recommend__woman-text-br {
        display: inline;
    }

    .recommend__content {
        position: absolute;
        top: 106vw;
        left: 6vw;
        right: auto;
        width: 88vw;
        height: auto;
    }

    .recommend__title {
        margin-bottom: 8vw; /* 32px at 400px */
    }

    .recommend__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
        background: linear-gradient(to right, #c7edff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .recommend__title-sub {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        background: linear-gradient(to right, #c7edff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .recommend__list {
        gap: 1vw; /* 4px at 400px */
    }

    .recommend__list-item {
        padding: 2.5vw 3vw; /* 10px 12px at 400px */
        background-color: #2f8ed5;
        gap: 2vw; /* 8px at 400px */
    }

    .recommend__list-icon {
        width: 5vw; /* 20px at 400px */
        height: 5vw; /* 20px at 400px */
        min-width: 5vw;
    }

    .recommend__list-text {
        font-size: 4vw;
        letter-spacing: 0.2vw;
        white-space: pre-wrap;
    }

    /* Features Section - SP */
    .recommend__features {
        position: absolute;
        top: 250vw;
        left: 50%;
        transform: translateX(-50%);
        width: 87vw;
        height: auto;
        flex-direction: column;
        gap: 6vw;
    }

    .recommend__features-title {
        width: 100%;
        font-size: 5.5vw; /* 22px at 400px */
        letter-spacing: 0.275vw; /* 1.1px at 400px */
        text-align: center;
        color: #fcffcc;
    }

    .recommend__features-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2vw; /* 8px at 400px */
        justify-content: center;
        width: 100%;
    }

    .recommend__features-item {
        width: 42.5vw; /* 170px at 400px */
        height: 42.5vw; /* 170px at 400px */
    }

    .recommend__features-frame {
        width: 100%;
        height: 100%;
    }

    .recommend__features-bg {
        width: 100%;
        height: 100%;
    }

    .recommend__features-text {
        top: 14.25vw; /* 57px at 400px */
        font-size: 5vw; /* 20px at 400px */
        letter-spacing: 0.25vw; /* 1px at 400px */
    }

    /* ========================================
       About Section - SP
    ======================================== */
    .about {
        aspect-ratio: 400 / 933;
    }

    .about__bg {
        top: -8vw;
        height: calc(100% + 36vw);
    }

    .about::after {
        bottom: 230vw;
        width: 49.75vw; /* 199px at 400px */
        height: 24vw; /* 96px at 400px */
    }

    .about__bg-text {
        top: 547.5vw; /* 2190px at 400px */
        left: -35.16vw; /* -140.63px at 400px */
        width: 91.97vw; /* 367.873px at 400px */
        height: 30.66vw; /* 122.624px at 400px */
    }

    .about__container {
        position: absolute;
        top: 8vw;
        left: 0;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10vw;
    }

    .about__left {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 4vw; /* 16px at 400px */
    }

    .about__badge {
        padding: 2.5vw 5vw; /* 10px 20px at 400px */
        border-radius: 6.75vw; /* 27px at 400px */
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
    }

    .about__title {
        font-size: 7vw; /* 28px at 400px */
        letter-spacing: 0.35vw; /* 1.4px at 400px */
        text-align: center;
        white-space: nowrap;
    }

    .about__image {
        width: 100%;
        height: 68vw;
        margin-left: 0;
        margin-right: 0;
        background-color: #7fbede;
    }

    .about__image img {
        width: 100vw;
        height: 66vw;
        margin-left: 0;
        left: 0;
    }

    .about__right {
        width: 88vw; /* 352px at 400px */
        margin-left: 0;
        margin-top: 0;
        gap: 4vw; /* 16px at 400px */
    }

    .about__bottom {
        flex-direction: column;
        position: absolute;
        top: 58.594%;
        left: 50%;
        transform: translateX(-50%);
        width: 89%;
        display: flex;
        gap: 3.333%;
    }

    .about__subtitle {
        font-size: 5vw; /* 20px at 400px */
        letter-spacing: 0.25vw; /* 1px at 400px */
        line-height: 1.4;
        width: 100%;
        margin-bottom: 4vw; /* 16px at 400px */
    }

    .about__subtitle br {
        display: none;
    }

    .about__text {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        line-height: 1.6;
        gap: 2vw; /* 8px at 400px */
    }

    .about__text p {
        font-size: 4vw;
        letter-spacing: 0.2vw;
        line-height: 1.6;
    }

    .about__text-highlight {
        color: #CE3F74;
    }

    /* ========================================
       Difference Section - SP
    ======================================== */
    .difference {
        flex-direction: column-reverse;
        aspect-ratio: 400 / 1210;
        gap: 4vw; /* 16px at 400px */
        top: 20vw; /* 80px at 400px */
        background: linear-gradient(180deg, #C5EBFF 0%, #D0EFFF 27.32%, #C6EBFF 59.45%, #BFEAFF 100%);
    }

    .difference::after {
        height: 60.84375vw;
    }

    .difference__card {
        width: 100%;
        padding-top: 0;
    }

    .difference__card--traditional {
        padding-top: 10vw; /* 40px at 400px */
    }

    .difference__image {
        display: block;
        width: 96vw; /* 384px at 400px */
        height: auto;
    }

    .difference__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .difference__card--traditional .difference__image {
        margin-right: auto;
    }

    .difference__card--ours .difference__image {
        margin-left: auto;
    }

    .difference__text-box {
        width: 96vw; /* 384px at 400px */
        padding: 6vw; /* 24px at 400px */
        gap: 2.5vw; /* 10px at 400px */
    }

    .difference__card--traditional .difference__text-box {
        margin-right: auto;
    }

    .difference__card--ours .difference__text-box {
        margin-left: auto;
    }

    .difference__text-box p {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        line-height: 1.6;
    }

    .difference__text-highlight {
        font-weight: 900;
    }

    .difference__text-highlight--red {
        color: #f54d77;
    }

    .difference__text-highlight--blue {
        color: #197bc4;
    }

    /* ========================================
       Cases Section - SP
    ======================================== */
    .cases {
        padding: 114vw 0 10vw 0;
        gap: 10vw;
        background-image: url('../images/cases-bg.webp');
        background-size: 100% 80%;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .cases::before {
        left: 26.25vw;
        top: 70vw;
        font-size: 25vw;
        letter-spacing: 1vw;
        line-height: 1.2;
        transform: rotate(90deg);
        transform-origin: left top;
        opacity: 0.1;
        color: #1382d7;
    }

    .cases::after {
        left: 27.35vw;
        right: auto;
        top: 30vw;
        width: 72.5vw;
        height: 66.5vw;
    }

    .cases__title {
        gap: 1vw; /* 4px at 400px */
    }

    .cases__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
    }

    .cases__title-sub {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
    }

    .cases__container {
        width: 88vw; /* 352px at 400px */
        gap: 10vw; /* 40px at 400px */
    }

    .cases__item {
        gap: 4vw; /* 16px at 400px */
    }

    .cases__header {
        gap: 2vw; /* 8px at 400px */
        flex-direction: column;
        align-items: flex-start;
    }

    .cases__badge {
        width: 17.5vw; /* 70px at 400px */
        height: 6vw; /* 24px at 400px */
        border-radius: 3.875vw; /* 15.5px at 400px */
    }

    .cases__badge-text {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
    }

    .cases__subtitle {
        font-size: 5vw; /* 20px at 400px */
        letter-spacing: 0.25vw; /* 1px at 400px */
    }

    .cases__ba {
        flex-direction: column;
        gap: 1.5vw; /* 6px at 400px */
        align-items: center;
    }

    .cases__ba-item {
        flex: none;
        width: 88vw; /* 352px at 400px */
    }

    .cases__ba-frame {
        width: 88vw; /* 352px at 400px */
        height: 39.5vw; /* 158px at 400px */
        border-radius: 2.5vw; /* 10px at 400px */
        padding: 1vw; /* 4px at 400px */
    }

    .cases__ba-image {
        border-radius: 1.75vw; /* 7px at 400px */
    }

    .cases__ba-label {
        left: 4vw; /* 16px at 400px */
        bottom: 6vw; /* 24px at 400px (推定) */
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.09vw; /* 0.36px at 400px */
    }

    .cases__ba-arrow {
        width: 12.5vw; /* 50px at 400px */
        height: 12.5vw; /* 50px at 400px */
        margin: 0 auto;
    }

    .cases__ba-arrow img {
        transform: rotate(90deg);
    }

    .cases__content {
        gap: 6vw; /* 24px at 400px */
    }

    .cases__description {
        width: 88vw; /* 352px at 400px */
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
    }

    .cases__table {
        width: 88vw; /* 352px at 400px */
        height: 61.5vw; /* 246px at 400px (Case1とCase2) */
    }

    .cases__table--tall {
        height: auto;
    }

    .cases__item--case3 .cases__table {
        height: 83.5vw; /* 334px at 400px */
    }

    .cases__item:last-child .cases__table {
        height: 50.5vw; /* 202px at 400px (Case4) */
    }

    .cases__table-row--top {
        height: auto;
    }

    .cases__table--tall .cases__table-row--top {
        height: auto;
    }

    .cases__table-row--bottom {
        height: auto;
        flex-wrap: wrap;
    }

    .cases__table-row--bottom .cases__table-header {
        width: 25vw; /* 100px at 400px */
        flex-shrink: 0;
    }

    .cases__table-row--bottom .cases__table-cell:nth-child(2) {
        width: calc(100% - 25vw);
        flex-basis: calc(100% - 25vw);
        flex-shrink: 0;
    }

    .cases__table-row--bottom .cases__table-cell:nth-child(4) {
        flex: 1;
    }

    .cases__table-header {
        width: 25vw; /* 100px at 400px */
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.08vw; /* 0.32px at 400px */
        padding: 2vw; /* 8px at 400px */
    }

    .cases__table-cell {
        padding: 2vw 3vw; /* 8px 12px at 400px */
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.08vw; /* 0.32px at 400px */
    }

    .cases__divider {
        width: 80vw; /* 320px at 400px */
        margin-left: auto;
        margin-right: auto;
    }

    .cases__banner {
        width: 88vw; /* 352px at 400px */
        height: 26.25vw; /* 105px at 400px */
        margin-top: 10vw; /* 40px at 400px */
        display: block;
    }

    .cases__banner-image {
        display: block;
        width: 100%;
        height: 100%;
    }

    .cases__banner-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ========================================
       Point Section - SP
    ======================================== */
    .point {
        margin-top: 0;
    }

    .point__bg {
        width: 92vw; /* 368px at 400px */
        height: 237.25vw; /* 949px at 400px */
    }

    .point__content {
        width: 80vw; /* 320px at 400px */
        margin: 0 auto;
        padding: 10vw 0; /* 40px top/bottom at 400px */
    }

    .point__header {
        flex-direction: column;
        gap: 8vw; /* 32px at 400px */
        margin-bottom: 8vw; /* 32px at 400px */
    }

    .point__title-group {
        gap: 1vw; /* 4px at 400px */
        align-items: center;
        width: 100%;
    }

    .point__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
        text-align: center;
    }

    .point__title-sub {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        text-align: center;
    }

    .point__description {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        padding-top: 0;
    }

    .point__list {
        flex-direction: column;
        gap: 4vw; /* 16px at 400px */
    }

    .point__item {
        gap: 2vw; /* 8px at 400px */
    }

    .point__item-header {
        gap: 1vw; /* 4px at 400px */
    }

    .point__item-number {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
    }

    .point__item-title {
        font-size: 5vw; /* 20px at 400px */
        letter-spacing: 0.25vw; /* 1px at 400px */
    }

    .point__item-text {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
    }

    .point__divider {
        width: 100%;
        height: 0.375vw; /* 1.5px at 400px */
    }

    /* ========================================
       Step Section - SP
    ======================================== */
    .step__bg {
        width: 96vw;
        height: 490.25vw;
        left: 0;
        top: 50vw;
    }

    .step__title {
        width: 80vw; /* 320px at 400px */
        margin: 0 auto;
        gap: 1vw; /* 4px at 400px */
        padding-top: 6vw; /* 24px at 400px */
        margin-bottom: 8vw; /* 32px at 400px */
    }

    .step__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
        text-align: center;
    }

    .step__title-sub {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        text-align: center;
    }

    .step__container {
        display: flex;
        flex-direction: column;
        gap: 8vw; /* 32px at 400px */
        padding-left: 6vw; /* 24px at 400px */
        padding-right: 6vw;
    }

    .step__row {
        display: flex;
        flex-direction: column;
        gap: 8vw; /* 32px at 400px */
    }

    .step__item {
        display: flex;
        flex-direction: column;
        gap: 4vw; /* 16px at 400px */
    }

    .step__image {
        width: 84vw; /* 336px at 400px */
        height: 48.75vw; /* 195px at 400px */
        overflow: hidden;
    }

    .step__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .step__content {
        display: flex;
        gap: 3vw; /* 12px at 400px */
        width: 84vw; /* 336px at 400px */
    }

    .step__number {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        color: white;
        flex-shrink: 0;
    }

    .step__text {
        display: flex;
        flex-direction: column;
        gap: 2vw; /* 8px at 400px */
        flex: 1;
    }

    .step__text p {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        color: white;
        line-height: 1.6;
    }

    .step__note {
        font-size: 3.25vw; /* 13px at 400px */
        letter-spacing: 0.1625vw; /* 0.65px at 400px */
        color: white;
    }

    /* ========================================
       Price Section - SP
    ======================================== */
    .price {
        min-height: auto;
    }

    .price__bg {
        width: 100vw; /* 400px at 400px */
        height: 329.25vw; /* 1317px at 400px */
        left: 0;
        top: 0;
    }

    .price__content {
        flex-direction: column;
        padding: 16vw 6vw 10vw; /* 64px 24px 40px at 400px */
    }

    .price__title {
        gap: 1vw; /* 4px at 400px */
        margin-bottom: 8vw; /* 32px at 400px */
    }

    .price__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
        color: #FCFFCC;
    }

    .price__title-sub {
        font-size: 4.5vw; /* 18px at 400px */
        letter-spacing: 0.225vw; /* 0.9px at 400px */
        color: #FCFFCC;
    }

    .price__fee {
        width: 88vw; /* 352px at 400px */
        margin: 0 auto;
    }

    .price__table {
        width: 100%;
        border: none;
    }

    .price__table::before,
    .price__table::after {
        display: none;
    }

    .price__row {
        display: block;
        width: 100%;
    }

    .price__item-header,
    .price__item-header--single {
        display: block;
        background: rgba(255, 255, 255, 0.3);
        height: 12.5vw; /* 50px at 400px */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1vw 2vw; /* 4px 8px at 400px */
        border-bottom: 0.375vw solid white; /* 1.5px at 400px */
        width: 100%;
        font-weight: 600;
        font-size: 4vw; /* 16px at 400px */
        line-height: 1.35;
        letter-spacing: 0.08vw; /* 0.32px at 400px */
    }

    .price__item-name {
        font-weight: 600;
        font-size: 4vw; /* 16px at 400px */
        line-height: 1.35;
        letter-spacing: 0.08vw; /* 0.32px at 400px */
        color: white;
        margin: 0;
    }

    .price__item-desc {
        font-weight: 600;
        font-size: 3.5vw; /* 14px at 400px */
        line-height: 1.35;
        letter-spacing: 0.07vw; /* 0.28px at 400px */
        color: white;
        margin: 0;
    }

    .price__item-price {
        display: block;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.08vw; /* 0.32px at 400px */
        line-height: 1.35;
        color: white;
        border: none;
        font-weight: 400;
        margin-top: 4.75vw; /* 19px at 400px - gap between header and price */
        margin-bottom: 4.75vw; /* 19px at 400px */
        width: 100%;
    }

    .price__divider-row {
        display: none;
    }

    .price__notes {
        margin-top: 6vw; /* 24px at 400px */
        width: 88vw; /* 352px at 400px */
    }

    .price__notes p {
        font-size: 3.5vw; /* 14px at 400px */
        letter-spacing: 0.07vw; /* 0.28px at 400px */
        line-height: 1.5;
        color: white;
    }

    .price__notes-highlight {
        color: #FCFFCC;
    }

    /* ========================================
       QA Section - SP
    ======================================== */
    .qa {
        position: relative;
        top: -3.125vw;
        width: 100%;
        min-height: 950vw;
    }

    .qa__images {
        position: absolute;
        top: 10vw;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .qa__image--1 {
        position: absolute;
        width: 78vw;
        height: 101vw;
        left: 0.25vw;
        top: 2.5vw;
        object-fit: contain;
    }

    .qa__image--2 {
        position: absolute;
        width: 60vw; /* 240px at 400px */
        height: 75vw; /* 300px at 400px */
        left: 36vw; /* 144px at 400px */
        top: 79.5vw; /* 318px at 400px */
        object-fit: contain;
    }

    .qa__image--3,
    .qa__image--4 {
        display: none;
    }

    .qa__bg {
        position: absolute;
        top: -366vw;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        display: block;
        z-index: -2;
    }

    .qa__bg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .qa__content {
        width: 100vw;
        margin: 0 auto;
        padding: 16vw 0 10vw;
        top: 166.25vw;
    }

    .qa__title {
        gap: 1vw; /* 4px at 400px */
        margin-bottom: 8vw; /* 32px at 400px */
    }

    .qa__title-main {
        font-size: 9vw; /* 36px at 400px */
        letter-spacing: 0.45vw; /* 1.8px at 400px */
        line-height: 1.3;
    }

    .qa__title-sub {
        font-size: 4.5vw;
        letter-spacing: 0.225vw;
        line-height: 1.3;
        width: 58.84375vw;
    }

    .qa__list {
        gap: 8vw;
        width: 92vw;
    }

    .qa__item {
        gap: 4vw; /* 16px at 400px */
    }

    .qa__question {
        background: #197bc4;
        padding: 2vw 4vw; /* 8px 16px at 400px */
        gap: 2vw; /* 8px at 400px */
        width: 100%;
    }

    .qa__question-label {
        font-size: 6vw; /* 24px at 400px */
        letter-spacing: 0.3vw; /* 1.2px at 400px */
        line-height: 1.4;
    }

    .qa__question-text {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        line-height: 1.4;
    }

    .qa__answer {
        gap: 3vw; /* 12px at 400px */
        width: 84vw; /* 336px at 400px */
        margin: 0 auto;
    }

    .qa__answer-label {
        font-size: 6vw; /* 24px at 400px */
        letter-spacing: 0.3vw; /* 1.2px at 400px */
        line-height: 1.4;
    }

    .qa__answer-content {
        gap: 3vw; /* 12px at 400px */
    }

    .qa__answer-content p {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        line-height: 1.6;
    }

    .qa__answer-content ul {
        font-size: 4vw; /* 16px at 400px */
        letter-spacing: 0.2vw; /* 0.8px at 400px */
        line-height: 1.6;
        margin-left: 6vw; /* 24px at 400px */
    }

    .qa__answer-content li {
        line-height: 1.6;
    }

    .qa__answer-content--list li::before {
        content: '•';
        position: absolute;
        left: -4.25vw;
    }
}

@media screen and (max-width: 1023px) {
    #sp_header {
        position: relative;
        z-index: 55555;
    }
}

@media (max-width: 768px) {
    .ws-footer-fix-btn {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        font-family: dnp-shuei-mincho-pr6, sans-serif;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1px;
        z-index: 55555;
    }
}