/* ==========================================
   ヘッダー
   ========================================== */
.site-header {
    position: absolute;
    top: 1.354vw; /* 26/1920 */
    left: 1.875vw; /* 36/1920 */
    z-index: 1000;
}

.site-header .logo {
    width: 12.031vw; /* 231/1920 */
    height: 10.156vw; /* 195/1920 */
}

.site-header .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   上部白背景セクション（0-800px）
   ========================================== */
.top-section {
    position: relative;
    height: 41.667vw; /* 800/1920 */
    background-color: #ffffff;
    overflow: hidden;
    background-image: url(../images/top-section_bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 背景画像1 */
.top-bg-image {
    position: absolute;
    top: 80.26vw; /* 1541/1920 */
    left: 9.479vw; /* 182/1920 */
    right: 9.063vw; /* 174/1920 */
    height: 54.896vw; /* 1054/1920 */
    opacity: 0.7;
}

.top-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 背景画像2 */
.top-bg-image-2 {
    position: absolute;
    top: 80.26vw; /* 1541/1920 */
    left: 9.479vw; /* 182/1920 */
    right: 9.063vw; /* 174/1920 */
    height: 54.896vw; /* 1054/1920 */
}

.top-bg-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* メインタイトル */
.main-title {
    position: absolute;
    top: 7.708vw; /* 148/1920 */
    left: 40.729vw; /* 782/1920 */
    font-size: 4.167vw; /* 80/1920 */
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 10;
}

/* サブテキスト */
.main-subtitle {
    position: absolute;
    top: 18.438vw; /* 354/1920 */
    right: 53.333vw; /* 1024/1920 */
    transform: translateX(100%);
    font-size: 2.083vw; /* 40/1920 */
    font-weight: 500;
    color: #333333;
    line-height: 1.4;
    z-index: 10;
}

.main-subtitle p {
    margin: 0;
    margin-bottom: 3%;
}

/* ドット装飾 */
.dots-decoration {
    position: absolute;
    top: 82.969vw; /* 1593/1920 */
    left: 35.052vw; /* 673/1920 */
    font-size: 2.865vw; /* 55/1920 */
    color: #333333;
    letter-spacing: 1.719vw; /* 33/1920 */
    line-height: 1;
    z-index: 10;
}

/* ==========================================
   グラデーション背景セクション（800-7194px）
   ========================================== */

    .top-section2{
        background-image: url(../images/top-section2_bg.webp),url(../images/bg_grad.jpg);
        background-repeat:no-repeat, repeat-y;
        background-size:auto 100%,100% auto ;
        background-position:right center,center ;
    }
    .top-section2 .container{
        padding: 10% 10%;
    }
    .top-section2 .container p{
        color: #fff;
        font-size: 1.6rem;
        font-weight: bold;
    }
    .top-section2 .container p:nth-child(1){
        margin-bottom: 4%;
    }
    .top-section2 .container p:nth-child(2){
        padding-left: 7%;
    }
.gradient-section {
    position: relative;
    min-height: 333.021vw; /* 6394/1920 */
    background: linear-gradient(to right, rgba(252, 143, 108, 0.85), rgba(158, 163, 132, 0.85));
    padding-top: 41.667vw; /* 800/1920 */
}

/* 装飾的な背景画像 */
.gradient-bg-decoration {
    position: absolute;
    top: -29.063vw; /* -558/1920 */
    left: 0;
    right: 0;
    height: 41.667vw; /* 800/1920 */
    background-color: rgba(226, 193, 172, 0.3);
    pointer-events: none;
}

/* オーバーレイテキスト */
.overlay-text {
}

.overlay-text p {
    margin: 0;
}


/* ==========================================
   吹き出し
   ========================================== */
.concern-bubble {
    position: absolute;
    z-index: 30;
}

.concern-bubble .bubble-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
    top: 0;
    left: 0;
}

.concern-bubble .bubble-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.604vw; /* 50/1920 */
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 1;
}

.concern-bubble .bubble-content p {
    margin: 0;
}

/* 吹き出し1: 寝てもスッキリしない */
.concern-bubble-1 {
    top: 100.417vw; /* 1928/1920 */
    right: 25.911vw; /* 497.5/1920 */
    transform: translateX(50%);
    width: 22.76vw; /* 437/1920 */
    height: 11.615vw; /* 223/1920 */
}

/* 吹き出し2: 肩がこりやすい */
.concern-bubble-2 {
    top: 125.156vw; /* 2403/1920 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22.76vw; /* 437/1920 */
    height: 11.615vw; /* 223/1920 */
}

/* 吹き出し3: 家にまくらが沢山ある */
.concern-bubble-3 {
    top: 128.906vw; /* 2475/1920 */
    left: 28.932vw; /* 555.5/1920 */
    transform: translate(-50%, -50%);
    width: 16.51vw; /* 317/1920 */
    height: 8.438vw; /* 162/1920 */
}

/* ==========================================
   肩こり画像
   ========================================== */
.shoulder-image {
    position: absolute;
    top: 97.448vw; /* 1871/1920 */
    left: 43.75vw; /* 840/1920 */
    width: 29.323vw; /* 563/1920 */
    height: 29.323vw; /* 563/1920 */
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.7;
}

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

/* ==========================================
   装飾ライン
   ========================================== */
.wavy-line {
    position: absolute;
    top: 158.75vw; /* 3048/1920 */
    left: 36.177vw; /* 694.39/1920 */
    width: 31.303vw; /* 601.043/1920 */
    height: 0.938vw; /* 18/1920 */
    transform: scaleY(-1);
}

.wavy-line::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.208vw; /* 4/1920 */
    background: repeating-linear-gradient(
        90deg,
        rgba(51, 51, 51, 0.8) 0,
        rgba(51, 51, 51, 0.8) 0.521vw,
        transparent 0.521vw,
        transparent 1.042vw
    );
}

/* ==========================================
   縦ドット装飾
   ========================================== */
.vertical-dots {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1.458vw; /* 28/1920 */
    align-items: center;
    transform: scaleY(-1);
    opacity: 0.9;
}

.vertical-dots .dot {
    width: 0.56vw; /* 10.753/1920 */
    height: 0.56vw;
    background-color: #ffffff;
    border-radius: 50%;
    display: block;
}

.vertical-dots-1 {
    top: 161.615vw; /* 3111/1920 */
    left: 50%;
    transform: translate(-50%, 0) scaleY(-1);
}

.vertical-dots-2 {
    top: 144.531vw; /* 2778/1920 */
    left: 50%;
    transform: translate(-50%, 0) scaleY(-1);
}

.vertical-dots-3 {
    top: 254.427vw; /* 4885/1920 */
    left: 50%;
    transform: translate(-50%, 0) scaleY(-1);
}

/* ==========================================
   メッセージテキスト
   ========================================== */
.message-text {
    position: absolute;
    font-size: 2.344vw; /* 45/1920 */
    font-weight: 500;
    color: #333333;
    text-align: center;
    line-height: 1.3;
    z-index: 40;
}

.message-text p {
    margin: 0;
}

.message-1 {
    top: 181.719vw; /* 3489/1920 */
    left: 29.453vw; /* 565.5/1920 */
    transform: translate(-50%, -50%);
    width: 35.156vw; /* 675/1920 */
}

.message-2 {
    top: 210.469vw; /* 4041/1920 */
    right: 29.87vw; /* 573.5/1920 */
    transform: translate(50%, -50%);
    width: 43.177vw; /* 829/1920 */
}

/* ==========================================
   装飾ベクター
   ========================================== */
.vector-decoration {
    position: absolute;
    z-index: 35;
}

.vector-decoration svg {
    width: 100%;
    height: 100%;
}

/* ベクター1（波線） */
.vector-decoration-1 {
    top: 158.75vw; /* 3048/1920 */
    left: 36.177vw; /* 694.39/1920 */
    width: 31.303vw; /* 601/1920 */
    height: 0.938vw; /* 18/1920 */
}

/* ベクター2（手描き風楕円） */
.vector-decoration-2 {
    top: 166.146vw; /* 3190/1920 */
    right: 10.499vw; /* 201.59/1920 */
    width: 30.126vw; /* 578.407/1920 */
    height: 25.853vw; /* 496.38/1920 */
    transform: rotate(23.84deg);
}

/* ベクター3（手描き風曲線） */
.vector-decoration-3 {
    top: 206.979vw; /* 3974/1920 */
    left: -0.365vw; /* -7/1920 */
    width: 33.822vw; /* 649.385/1920 */
    height: 14.479vw; /* 278.001/1920 */
}

/* ==========================================
   CTA白ボックス
   ========================================== */
.cta-white-box {
    position: absolute;
    top: 236.615vw; /* 4543/1920 */
    left: 50%;
    transform: translateX(-50%);
    width: 68.646vw; /* 1318/1920 */
    height: 17.031vw; /* 327/1920 */
    background-color: #ffffff;
    border-radius: 4.844vw; /* 93/1920 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3.125vw; /* 60/1920 */
    font-weight: 500;
    color: #333333;
    text-align: center;
    line-height: 1.3;
    z-index: 50;
}

.cta-white-box p {
    margin: 0;
}

/* ==========================================
   まずはここから
   ========================================== */
.start-here {
    position: absolute;
    top: 264.844vw; /* 5085.5/1920 */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 60;
}

.start-here h2 {
    font-size: 3.125vw; /* 60/1920 */
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
    margin: 0;
}

/* ==========================================
   画像プレースホルダー
   ========================================== */
img[src^="img/"] {
    background-color: #e0e0e0;
}

/* ==========================================
   レスポンシブ対応
   ========================================== */

/* ブレークポイント1: 1024px以下（タブレット） */
@media screen and (max-width: 1024px) {
    .site-header {
        top: 2.5vw;
        left: 3.5vw;
    }

    .site-header .logo {
        width: 18vw;
        height: 15vw;
    }
    .top-section{
        background-size: auto 120%;
    }
    .main-title {
        font-size: 4.8vw;
        left: 42vw;
        top: 8vw;
    }

    .main-subtitle {
        font-size: 2.4vw;
        right: 56vw;
        top: 18vw;
    }

    .dots-decoration {
        font-size: 4vw;
        left: 40vw;
    }

    .overlay-text {
        font-size: 3.2vw;
    }

    .overlay-text-1 {
        top: 60vw;
        left: 10vw;
    }

    .overlay-text-2 {
        top: 75vw;
        left: calc(50% - 30vw);
    }

    .concern-bubble .bubble-content {
        font-size: 3.5vw;
    }

    .concern-bubble-1 {
        top: 110vw;
        right: 22vw;
        width: 30vw;
        height: 15vw;
    }

    .concern-bubble-2 {
        top: 145vw;
        width: 30vw;
        height: 15vw;
    }

    .concern-bubble-3 {
        top: 150vw;
        left: 25vw;
        width: 22vw;
        height: 12vw;
    }

    .shoulder-image {
        top: 105vw;
        left: 40vw;
        width: 35vw;
        height: 35vw;
    }

    .wavy-line {
        top: 185vw;
        left: 30vw;
        width: 40vw;
    }

    .message-text {
        font-size: 3.5vw;
    }

    .message-1 {
        top: 210vw;
        left: 25vw;
        width: 45vw;
    }

    .message-2 {
        top: 260vw;
        right: 25vw;
        width: 50vw;
    }

    .vector-decoration-2 {
        top: 195vw;
        right: 8vw;
        width: 35vw;
        height: 30vw;
    }

    .vector-decoration-3 {
        top: 245vw;
        left: 0;
        width: 40vw;
        height: 18vw;
    }

    .cta-white-box {
        top: 305vw;
        width: 80vw;
        height: 22vw;
        font-size: 4.5vw;
        border-radius: 6vw;
    }

    .start-here {
        top: 345vw;
    }

    .start-here h2 {
        font-size: 4.5vw;
    }

    .gradient-section {
        min-height: 380vw;
    }
}

/* ブレークポイント2: 768px以下（スマートフォン横・縦） */
@media screen and (max-width: 768px) {
    .top-section {
        height: 60vw;
    }

    .site-header {
        top: 4vw;
        left: 5vw;
    }

    .site-header .logo {
        width: 24vw;
        height: 20vw;
    }

    .main-title {
        font-size: 6vw;
        left: 65%;
        transform: translateX(-50%);
        top: 12vw;
        text-align: center;
        white-space: normal;
        width: 90vw;
    }

    .main-subtitle {
        font-size: 3.6vw;
        right: auto;
        left: 64%;
        transform: translateX(-50%);
        top: 24vw;
        text-align: center;
        width: 85vw;
    }

    .dots-decoration {
        left: 50%;
        transform: translateX(-50%);
        top: 120vw;
        font-size: 5vw;
        letter-spacing: 3vw;
    }
    .top-section2 .container {
        padding: 10% 4%;
    }
    .top-bg-image,
    .top-bg-image-2 {
        display: none;
    }

    .gradient-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15vw 0 20vw;
        min-height: auto;
    }

    .gradient-bg-decoration {
        display: none;
    }

    .overlay-text {
        font-size: 4.5vw;
        width: 90vw;
        position: relative;
        left: auto !important;
        right: auto;
        top: auto !important;
        margin: 5vw auto;
    }
.top-section2 .container p{
        font-size: 3.6vw;
    }


    .overlay-text-1 {
        order: 1;
    }

    .overlay-text-2 {
        order: 2;
    }

    .concern-bubble {
        position: relative;
        margin: 8vw auto;
        width: 70vw !important;
        height: 30vw !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .concern-bubble-1 {
        order: 4;
    }

    .concern-bubble-2 {
        order: 3;
    }

    .concern-bubble-3 {
        order: 5;
    }

    .concern-bubble .bubble-content {
        font-size: 5.5vw;
    }

    .shoulder-image {
        position: relative;
        order: 6;
        margin: 12vw auto;
        left: 50%;
        transform: translateX(-50%);
        width: 60vw;
        height: 60vw;
        top: auto;
    }

    .wavy-line {
        display: none;
    }

    .vertical-dots {
        display: none;
    }

    .message-text {
        font-size: 5.2vw;
        position: relative;
        margin: 18vw auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 85vw !important;
    }

    .message-1 {
        order: 7;
    }

    .message-2 {
        order: 8;
    }

    .vector-decoration {
        display: none;
    }

    .cta-white-box {
        font-size: 5.8vw;
        width: 88vw;
        height: auto;
        padding: 10vw 6vw;
        position: relative;
        order: 9;
        margin: 18vw auto;
        left: 50%;
        top: auto;
        border-radius: 8vw;
    }

    .start-here {
        position: relative;
        order: 10;
        margin: 15vw auto 25vw;
        left: auto;
        top: auto;
        transform: none;
    }

    .start-here h2 {
        font-size: 7vw;
    }
}

/* ブレークポイント3: 480px以下（小型スマートフォン） */
@media screen and (max-width: 480px) {
    .top-section {
        height: 100vw;
        background-size: auto 100%;
        background-position: left 40% center;
    }

    .site-header {
        top: 5vw;
        left: 6vw;
    }

    .site-header .logo {
        width: 28vw;
        height: 24vw;
    }

    .main-title {
        font-size: 9.5vw;
        top: 10vw;
        width: 92vw;
    }

    .main-subtitle {
        font-size: 4.0vw;
        top: 38vw;
        width: 90vw;
    }

    .dots-decoration {
        top: 140vw;
        font-size: 6vw;
        letter-spacing: 4vw;
    }

    .overlay-text {
        font-size: 5vw;
        width: 92vw;
        margin: 12vw auto;
    }

    .concern-bubble {
        margin: 10vw auto;
        width: 75vw !important;
        height: 32vw !important;
    }

    .concern-bubble .bubble-content {
        font-size: 6vw;
    }

    .shoulder-image {
        margin: 15vw auto;
        width: 65vw;
        height: 65vw;
    }

    .message-text {
        font-size: 5.8vw;
        margin: 20vw auto;
        width: 90vw !important;
    }

    .cta-white-box {
        font-size: 6.5vw;
        width: 92vw;
        padding: 12vw 7vw;
        margin: 20vw auto;
        border-radius: 10vw;
    }

    .start-here {
        margin: 18vw auto 30vw;
    }

    .start-here h2 {
        font-size: 8vw;
    }

    .gradient-section {
        padding: 20vw 0 25vw;
    }
}

/* 大画面（1920px以上）- 固定サイズ */
@media screen and (min-width: 1920px) {
    .container {
        max-width: 1920px;
    }

    .site-header {
        top: 26px;
        left: 36px;
    }

    .site-header .logo {
        width: 231px;
        height: 195px;
    }

    .top-section {
        height: 800px;
    }

    .main-title {
        font-size: 80px;
        top: 148px;
        left: 782px;
    }

    .main-subtitle {
        font-size: 40px;
        top: 354px;
    }

    .dots-decoration {
        font-size: 55px;
        top: 1593px;
        left: 673px;
        letter-spacing: 33px;
    }

    .overlay-text {
        font-size: 45px;
    }

    .overlay-text-1 {
        top: 1013px;
        left: 267px;
    }

    .overlay-text-2 {
        top: 1223px;
        left: calc(50% - 473px);
    }

    .concern-bubble .bubble-content {
        font-size: 50px;
    }

    .concern-bubble-1 {
        top: 1928px;
        right: 497.5px;
        width: 437px;
        height: 223px;
    }

    .concern-bubble-2 {
        top: 2403px;
        width: 437px;
        height: 223px;
    }

    .concern-bubble-3 {
        top: 2475px;
        left: 555.5px;
        width: 317px;
        height: 162px;
    }

    .shoulder-image {
        top: 1871px;
        left: 840px;
        width: 563px;
        height: 563px;
    }

    .wavy-line {
        top: 3048px;
        left: 694.39px;
        width: 601.043px;
        height: 18px;
    }

    .wavy-line::before {
        height: 4px;
        background: repeating-linear-gradient(
            90deg,
            rgba(51, 51, 51, 0.8) 0,
            rgba(51, 51, 51, 0.8) 10px,
            transparent 10px,
            transparent 20px
        );
    }

    .vertical-dots {
        gap: 28px;
    }

    .vertical-dots .dot {
        width: 10.753px;
        height: 10.753px;
    }

    .vertical-dots-1 {
        top: 3111px;
    }

    .vertical-dots-2 {
        top: 2778px;
    }

    .vertical-dots-3 {
        top: 4885px;
    }

    .message-text {
        font-size: 45px;
    }

    .message-1 {
        top: 3489px;
        left: 565.5px;
        width: 675px;
    }

    .message-2 {
        top: 4041px;
        right: 573.5px;
        width: 829px;
    }

    .vector-decoration-1 {
        top: 3048px;
        left: 694.39px;
        width: 601px;
        height: 18px;
    }

    .vector-decoration-2 {
        top: 3190px;
        right: 201.59px;
        width: 578.407px;
        height: 496.38px;
    }

    .vector-decoration-3 {
        top: 3974px;
        left: -7px;
        width: 649.385px;
        height: 278.001px;
    }

    .cta-white-box {
        top: 4543px;
        width: 1318px;
        height: 327px;
        font-size: 60px;
        border-radius: 93px;
    }

    .start-here {
        top: 5085.5px;
    }

    .start-here h2 {
        font-size: 60px;
    }

    .gradient-section {
        min-height: 6394px;
        padding-top: 800px;
    }
}