.w30 {
    width: 30%;
}

.w20 {
    width: 20%;
}

.cta_space {
    display: flex;
    gap: 0.5rem;
}

/* PC画面での設定 */
#hero {
    height: calc(100vh - 89px);
    padding: 0;
    margin-top: 89px;
    display: block;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.hero-slider-container {
    width: 100vw !important;
    max-width: unset;
    height: 100%;
    max-height: calc(100vh - 89px);
    position: relative;
}

.hero-slide {
    background: #f7f6f9;
    width: 100%;
    height: 100%;
}

/* Hero画像のレスポンシブ切り替え修正版 */
.hero-pc-image,
.hero-sp-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* デフォルト（PC）表示 */
.hero-pc-image {
    display: block;
}

.hero-sp-image {
    display: none;
}

.thumbnail-window {
    width: 198px;
    height: 86px;
    border: unset;
}

.flex.justify-center.gap-1.md\:gap-2.py-4.bg-white {
    gap: 1.5rem;
    padding: 3rem 0 0;
}

.btn-primary {
    box-shadow: unset;
    font-weight: normal;
    letter-spacing: 0.1rem;
    font-feature-settings: "palt";
    padding: 0.75rem 2rem;
    border-radius: 25px;
    background-color: #d57933;
    border-radius: 0;
}

.btn-primary:hover {
    background-color: #d57933;
    box-shadow: unset;
    transform: unset;
    opacity: 0.7;
}

.btn-primary2 {
    background-color: var(--text-brown);
    color: #fff;
}

.btn-primary2:hover {
    opacity: 0.7;
    background-color: var(--text-brown);
}

span.bg-accent.text-white.px-6.py-3.rounded-full.text-lg.font-bold.inline-block {
    font-family: 'Noto Sans JP';
    font-weight: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    background-color: unset;
    color: var(--accent-color);
    padding: 0;
    margin-bottom: 1rem;
}

h2.text-3xl.md\:text-4xl.font-serif.text-brown.mt-6 {
    margin: 0 auto 2rem;
    font-feature-settings: "palt";
    letter-spacing: 0.2rem;
}

a.btn.btn-primary.text-lg.shadow-xl {
    box-shadow: unset;
    font-feature-settings: "palt";
    letter-spacing: 0.2rem;
    border-radius: unset;
}

section#campaign {
    padding: 6rem 0 8rem;
}

.rounded-xl.overflow-hidden.shadow-xl {
    border-radius: unset;
    box-shadow: unset;
}

.grid.md\:grid-cols-2.gap-8.md\:gap-12.items-center {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
}

h2.text-2xl.md\:text-3xl.lg\:text-4xl.font-serif.text-brown.mb-6.text-center {
    text-align: justify;
    line-height: 1.75rem;
    letter-spacing: 0.2rem;
    margin: 0.5rem auto 1rem;
    font-size: 2rem;
}

h2.text-2xl.md\:text-3xl.lg\:text-4xl.font-serif.text-brown.mb-6.text-center span.text-lg.md\:text-xl.lg\:text-2xl {
    font-size: 1rem;
    font-feature-settings: "palt";
    letter-spacing: 0.2rem;
}

p.text-base.md\:text-lg.text-gray-700.mb-6.leading-relaxed {
    font-size: 1rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    text-align: justify;
}

#skin-diagnosis .order-2.md\:order-1 {
    flex: 1;
}

#skin-diagnosis span.text-sm.text-gray-600 {
    background: var(--accent-color);
    padding: 0.5rem;
    color: #fff;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    letter-spacing: 0.1rem;
    margin: 0 auto 1rem;
    display: block;
    text-align: center;
}

#skin-diagnosis span.text-3xl.md\:text-4xl.font-bold.text-accent {
    font-family: roboto;
    font-size: 2.5rem;
}

#skin-diagnosis span.text-sm.text-gray-500.ml-2 {
    margin: 0 auto;
    letter-spacing: 0.1rem;
}

#skin-diagnosis a.btn.btn-primary.inline-flex.items-center {
    background-color: var(--accent-color);
}

#concerns a.concern-card.block.border.border-gray-300.rounded-lg.overflow-hidden.hover\:shadow-lg.transition-all {
    border-radius: unset;
}

#menu .section-subtitle {
    font-size: 1rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    position: relative;
    margin-bottom: 4rem;
}

#menu img.w-full.h-56.object-cover {
    position: relative;
}

#menu a.card.block.group.cursor-pointer {
    border-radius: 0;
    border: unset;
}

#menu a.card.block.group.cursor-pointer span.absolute.top-2.right-2.bg-accent.text-white.px-3.py-1.rounded-full.text-xs.font-bold {
    font-weight: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
}

#menu a.card.block.group.cursor-pointer p.text-gray-700.mb-4.text-sm.leading-relaxed {
    text-align: justify;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    margin-bottom: 4rem;
}

#menu a.card.block.group.cursor-pointer span.inline-block.text-accent.font-semibold.group-hover\:underline {
    display: block;
    text-align: right;
    font-size: 0.9rem;
    font-weight: normal;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
}

#first_price {
    background-color: var(--text-brown);
}

#first_price .first_price_box {
    background-color: #fff;
    padding: 4rem 2rem 2rem;
    border: solid #d57933;
    position: relative;
    width: 100%;
    max-width: 1260px;
}

#first_price .first_price_box .inline-block.mb-4.px-4.py-2.bg-red-100.text-red-600.rounded-full.text-sm.font-bold {
    background: #d57933;
    color: #fff;
    font-weight: normal;
    font-size: 1rem;
    font-feature-settings: "palt";
    letter-spacing: 0.2rem;
    border-radius: 0;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}

#first_price h3.text-3xl.md\:text-4xl.font-serif.text-gray-800.mb-4.font-bold {
    font-size: 2rem;
    font-family: "noto-sans";
    color: #d57933;
    margin: 0 auto 0.25rem;
}

#first_price p.text-lg.text-gray-600.mb-8 {
    font-size: 0.9rem;
    margin: 0 auto 1rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
}

#first_price a.btn.btn-primary.bg-red-500.hover\:bg-red-600.text-white.px-8.py-3.text-lg.shadow-lg {
    background-color: unset;
    border: solid 1px #d57933;
    color: #d57933;
    margin: 0 auto 1rem;
    font-size: 1rem;
}

#features h2 {
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    margin: 0 auto 0.7rem;
}

#features .section-subtitle {
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    margin: 0 auto 4rem;
}

#features .bg-white.rounded-2xl.p-8.shadow-lg.hover\:shadow-xl.transition-all.duration-300.h-full {
    box-shadow: unset;
}

#features .absolute.-top-6.left-8.w-12.h-12.bg-accent.rounded-full.flex.items-center.justify-center.shadow-lg {
    left: 50%;
    transform: translateX(-50%);
    box-shadow: unset;
    font-family: 'Noto Serif JP';
    font-weight: lighter;
}

#features .absolute.-top-6.left-8.w-12.h-12.bg-accent.rounded-full.flex.items-center.justify-center.shadow-lg span {
    --tw-shadow: unset;
    box-shadow: unset;
}

#features h3 {
    font-weight: normal;
    font-size: 1.3rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    text-align: justify;
    margin: 0 auto 0.5rem;
}

#features .w-16.h-1.bg-accent.mb-4 {
    height: 0.1rem;
    width: 100%;
    margin: 0 auto 0.5rem;
}

#features .w-16.h-1.bg-accent.mb-4 + p {
    font-size: 0.9rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    text-align: justify;
}

#flow .treatment-flow-container.max-w-5xl.mx-auto {
    gap: 6rem;
    margin: 0 auto;
    width: 100%;
}

#flow .treatment-flow-step {
    gap: 4rem;
}

#flow .treatment-flow-image {
    box-shadow: 0.5rem 0.5rem 0 #a0887963;
}

#flow h2,
#flow h4 {
    margin: 0 auto 0.5rem;
}

#flow p {
    font-size: 0.9rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    text-align: justify;
}

#flow h2 + p {
    margin: 0 auto 5rem;
    text-align: center;
}

#flow .treatment-flow-content {
    padding: 0;
}

#flow .treatment-flow-number {
    background-color: unset;
    color: var(--text-brown);
    font-family: 'Noto Serif JP';
    font-weight: lighter;
    width: 100%;
    height: auto;
    text-align: left;
    border-bottom: solid 1px;
    padding: 0;
    border-radius: 0;
    justify-content: left;
    margin: 0 auto 1rem;
}

.cta {
    box-shadow: unset;
    font-weight: normal;
    letter-spacing: 0.1rem;
    font-feature-settings: "palt";
    padding: 0.75rem 2rem;
    border-radius: 25px;
    background-color: #d57933;
    color: #fff;
    opacity: 1;
    margin: 0 auto 1rem;
    display: inline-block;
}

.cta:hover {
    opacity: 0.8;
    transition: var(--transition-base);
    letter-spacing: 0.1rem;
    font-feature-settings: "palt";
}

th {
    font-weight: normal;
}

td {
    border-right: solid 1px #ddd;
}

tbody tr td:nth-last-of-type(2),
tbody tr td:last-of-type {
    text-align: center;
}

/* モバイル（767px以下）表示 */
@media (max-width: 767px) {
    .hero-pc-image {
        display: none !important;
        width: 100%;
        height: 100%; /* auto から 100% に変更 */
        object-fit: contain;
        object-position: center;
        position: absolute; /* relative から absolute に変更 */
        top: 0;
        left: 0;
    }

    .hero-sp-image {
        display: block !important;
        position: relative;
    }
    
    /* モバイルでの余白調整 */
    #hero {
        height: auto; /* vh から auto に変更 */
        padding: 0;
        margin-top: 57px;
        width: 100vw;
        margin-left: -50vw;
        left: 50%;
        position: relative;
    }
    
    .hero-slider-container {
        width: 100%;
        height: auto; /* vh から auto に変更 */
        aspect-ratio: 16 / 7; /* 縦横比を16:9に固定 */
        position: relative;
        max-height: unset;
    }
    
    .hero-slide {
        position: absolute; /* relative から absolute に戻す */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* auto から 100% に戻す */
        display: flex; /* block から flex に戻す */
        align-items: center;
        justify-content: center;
        opacity: 0; /* アニメーション用 */
        transition: opacity 3s ease-in-out; /* アニメーション */
    }

    /* アクティブスライドの表示 */
    .hero-slide.active {
        opacity: 1;
        background-color: #fff;
        border: none;
    }

    /* 非アクティブなスライドを隠すルールを削除 */

    .thumbnail-window {
        width: 100%;
        height: auto;
        border: unset;
    }
    
    .flex.justify-center.gap-1.md\:gap-2.py-4.bg-white {
        gap: 1rem;
        padding: 2rem 0 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 90%;
        margin: 0 auto;
    }

    section#campaign {
        padding: 4rem 0;
    }
    
    #campaign h2.text-3xl.md\:text-4xl.font-serif.text-brown.mt-6 {
        font-size: 1.5rem;
        margin: 0 auto 1rem;
    }

    #campaign .text-center.mb-10 {
        margin: 0 auto;
    }

    #skin-diagnosis .grid.md\:grid-cols-2.gap-8.md\:gap-12.items-center {
        display: block;
    }

    #skin-diagnosis .order-2 {
        margin-bottom: 2rem;
    }

    a.btn.btn-primary.inline-flex.items-center {
        text-align: center;
        display: flex;
        justify-content: center;
        padding: 0.75rem;
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
        margin: 0 auto;
        align-items: flex-end;
    }

    #skin-diagnosis .mb-6 {
        margin-bottom: 2rem;
    }

    #menu .container.mx-auto.px-4.sm\:px-6.lg\:px-8 {
        padding: 0;
        margin: 0 auto;
        max-width: unset;
        width: 90%;
    }

    #menu .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-8 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #menu a.card.block.group.cursor-pointer p.text-gray-700.mb-4.text-sm.leading-relaxed {
        margin-bottom: 1rem;
    }

    #menu .section-subtitle {
        margin-bottom: 2rem;
    }

    #first_price .container.mx-auto.px-4.sm\:px-6.lg\:px-8.text-center.relative.z-10 {
        width: 90%;
        margin: 0 auto;
        padding: 0;
        max-width: unset;
    }

    #first_price h3.text-3xl.md\:text-4xl.font-serif.text-gray-800.mb-4.font-bold {
        font-size: 1.5rem;
    }

    #flow .treatment-flow-step {
        gap: 1rem;
    }

    #flow .treatment-flow-number {
        justify-content: center;
    }

    #flow .treatment-flow-container.max-w-5xl.mx-auto {
        gap: 2rem;
    }

    #pricing .container::before {
        display: none;
    }

    #features h2 {
        font-size: 1.25rem;
    }
}

/* 追加：横スクロールバーを防ぐ */
body {
    overflow-x: hidden;
}