/* =========================================================
RESET
========================================================= */

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
PRODUCT PAGE
自社製品ページ
========================================================= */

.product-page {
    --turquoise: #12b3c1;
    --turquoise-light: #e4f7f7;
    --turquoise-soft: #d7f3f3;

    --yellow: #ffd95a;
    --yellow-soft: #fff2bd;

    --cream: #fff8e8;

    --dark: #173238;
    --gray: #667579;

    width: 100%;
    overflow: hidden;

    color: var(--dark);

    font-family:
        "Noto Sans JP",
        sans-serif;
}


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



/* =========================================================
COMMON
========================================================= */

.product-en,
.why-label,
.create-label,
.process-label {

    margin: 0 0 15px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .28em;

    color: var(--turquoise);
}



/* =========================================================
01 HERO
まだない「欲しい」を、かたちに。
========================================================= */

.product-hero {

    position: relative;

    width: 100%;
    min-height: 100svh;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #fff;
}


/* -------------------------
HERO CONTENT
------------------------- */

.product-hero-inner {

    position: relative;

    z-index: 10;

    width: min(760px, 74%);

    text-align: center;
}


.product-hero h1 {

    margin: 0;

    font-size:
        clamp(48px, 3.8vw, 86px);

    line-height: 1.35;

    letter-spacing: .05em;

    color: var(--dark);
}


.product-hero h1 span {

    position: relative;

    color: var(--turquoise);
}


/* 黄色マーカー */

.product-hero h1 span::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 100%;
    height: 11px;

    border-radius: 999px;

    background:
        rgba(255, 217, 90, .62);

    z-index: -1;
}


.product-hero-lead {

    margin-top: 34px;

    font-size: 15px;
    font-weight: 600;

    line-height: 2;

    letter-spacing: .06em;

    color: #42575b;
}


.product-hero-text {

    margin-top: 20px;

    font-size: 12px;

    line-height: 2.15;

    letter-spacing: .05em;

    color: #6b777a;
}



/* =========================================================
HERO BACKGROUND BLUR
========================================================= */

.product-hero-blur {

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(70px);

    opacity: .45;

    pointer-events: none;

    animation:
        productBlur 11s ease-in-out infinite alternate;
}


.blur-blue {

    left: -130px;

    /* 境目より上 */
    bottom: 20px;

    background: #8ce6e9;
}


.blur-yellow {

    right: -140px;
    top: -130px;

    background: #ffe68d;

    animation-delay: -5s;
}


@keyframes productBlur {

    from {

        transform:
            translate(0, 0) scale(1);
    }

    to {

        transform:
            translate(50px, -30px) scale(1.15);
    }

}



/* =========================================================
HERO FLOATING PHOTOS
========================================================= */

.hero-photo {

    position: absolute;

    z-index: 4;

    overflow: hidden;

    border-radius: 50%;

    animation:
        productPhotoFloat 7s ease-in-out infinite;
}


.hero-photo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 左上 */

.photo-01 {

    width: 145px;
    height: 145px;

    left: 7%;
    top: 16%;

    animation-delay: -1s;
}


/* 右上 */

.photo-02 {

    width: 105px;
    height: 105px;

    right: 14%;
    top: 7%;

    animation-delay: -3s;
}


/* 左中央 */

.photo-03 {

    width: 125px;
    height: 125px;

    left: 2%;
    top: 44%;

    animation-delay: -4.5s;
}


/* 右中央 */

.photo-04 {

    width: 145px;
    height: 145px;

    right: 3%;
    top: 38%;

    animation-delay: -2s;
}


/* 左下 */

.photo-05 {

    width: 100px;
    height: 100px;

    left: 11%;
    bottom: 8%;

    animation-delay: -5s;
}


/* 右下 */

.photo-06 {

    width: 120px;
    height: 120px;

    right: 23%;
    bottom: 4%;

    animation-delay: -2.8s;
}


@keyframes productPhotoFloat {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);
    }

    50% {

        transform:
            translateY(-10px) rotate(1.5deg);
    }

}



/* =========================================================
HERO DOTS
========================================================= */

.product-dot {

    position: absolute;

    z-index: 3;

    display: block;

    border-radius: 50%;

    animation:
        productDotFloat 5s ease-in-out infinite alternate;
}


.dot-01 {

    width: 11px;
    height: 11px;

    left: 13%;
    top: 22    %;

    background: var(--turquoise);
}


.dot-02 {

    width: 7px;
    height: 7px;

    right: 20%;
    top: 24%;

    background: var(--turquoise);
}


.dot-03 {

    width: 16px;
    height: 16px;

    left: 18%;
    bottom: 18%;

    background: var(--turquoise);
}


.dot-04 {

    width: 13px;
    height: 13px;

    left: 26%;
    top: 53%;

    background: var(--yellow);
}


.dot-05 {

    width: 18px;
    height: 18px;

    right: 7%;
    top: 25%;

    background: var(--yellow);
}


.dot-06 {

    width: 9px;
    height: 9px;

    right: 16%;
    bottom: 12%;

    background: var(--yellow);
}


.dot-07 {

    width: 8px;
    height: 8px;

    left: 5%;
    top: 38%;

    background: #f4c85d;
}


.dot-08 {

    width: 12px;
    height: 12px;

    right: 30%;
    bottom: 20%;

    background: #9fd4c7;
}


@keyframes productDotFloat {

    from {

        transform:
            translate(0, 0) scale(1);
    }

    to {

        transform:
            translate(8px, -10px) scale(1.15);
    }

}



/* =========================================================
SCROLL
========================================================= */

.product-hero .scroll-mark {

    position: absolute;

    left: 50%;
    bottom: -10px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    z-index: 10;

    font-size: 8px;

    letter-spacing: .2em;

    color: #627174;
}


.product-hero .scroll-mark i {

    display: block;

    width: 1px;
    height: 42px;

    background: var(--turquoise);
}



/* =========================================================
02 WHY WE MAKE
========================================================= */

.product-why {

    position: relative;

    padding:
        170px 0 160px;

    background: #fff;

    overflow: hidden;
}


.product-why-inner {

    position: relative;

    z-index: 2;

    width: min(900px, 88%);

    margin: 0 auto;
}



/* =========================================================
WHY HEADING
========================================================= */

.why-heading {

    position: relative;

    text-align: center;
}


/* 薄い円弧 */

.product-why-arc {

    position: absolute;

    left: 50%;
    top: 35px;

    width: 680px;
    height: 240px;

    transform: translateX(-50%);

    border-top:
        2px solid rgba(18, 179, 193, .10);

    border-radius:
        50% 50% 0 0;

    pointer-events: none;
}


.why-label {

    position: relative;

    z-index: 2;
}


.why-icon {

    position: relative;

    z-index: 2;

    width: 58px;
    height: 58px;

    margin:
        0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--cream);

    color: var(--yellow);

    font-size: 24px;
}


.why-heading h2 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size:
        clamp(34px, 4vw, 54px);

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: .07em;

    color: var(--dark);
}


.why-sub {

    position: relative;

    z-index: 2;

    margin-top: 28px;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: .06em;

    color: var(--turquoise);
}


.why-description {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin:
        26px auto 0;

    font-size: 13px;

    line-height: 2.2;

    letter-spacing: .05em;

    color: var(--gray);
}



/* =========================================================
03 WHAT WE CREATE
========================================================= */

.product-create {

    position: relative;

    padding:
        160px 0 250px;

    background: #fff;

    overflow: visible;

    z-index: 2;
}


.product-create-inner {

    position: relative;

    z-index: 2;

    width: min(1150px, 88%);

    margin: 0 auto;
}



/* =========================================================
CREATE HEADING
========================================================= */

.create-heading {

    position: relative;

    margin-bottom: 100px;

    text-align: center;
}


.create-arc {

    position: absolute;

    left: 50%;
    top: -60px;

    width: 650px;
    height: 220px;

    transform: translateX(-50%);

    border-top:
        2px solid rgba(18, 179, 193, .10);

    border-radius:
        50% 50% 0 0;

    pointer-events: none;
}


.create-label {

    position: relative;

    z-index: 2;
}


.create-mini-icon {

    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    margin:
        0 auto 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--cream);

    color: var(--yellow);

    font-size: 20px;
}


.create-heading h2 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1.45;

    letter-spacing: .06em;

    color: var(--dark);
}


.create-lead {

    position: relative;

    z-index: 2;

    margin-top: 25px;

    font-size: 13px;

    line-height: 2.1;

    letter-spacing: .05em;

    color: var(--gray);
}



/* =========================================================
PRODUCT CATEGORIES
========================================================= */

.create-products {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 55px;
}


.create-product-item {

    min-width: 0;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1);
}


.create-product-item:hover {

    transform:
        translateY(-8px);
}



/* =========================================================
PRODUCT VISUAL
========================================================= */

.create-product-visual {

    position: relative;

    width: 100%;
    height: 260px;

    margin-bottom: 30px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.create-product-visual::before {

    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    filter: blur(20px);

    opacity: .65;
}


.visual-hair::before {

    background: #d7f3f3;
}


.visual-beauty::before {

    background: #fff2bd;
}


.visual-new::before {

    background: #e9f2ec;
}



/* =========================================================
SECRET PRODUCT SHAPES
========================================================= */

.product-shape {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(23, 50, 56, .18);

    background:
        rgba(255, 255, 255, .8);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .05);

    backdrop-filter:
        blur(4px);

    transition:
        transform .4s ease;
}


/* ヘアオイル */

.product-bottle {

    width: 95px;
    height: 180px;

    border:
        1px solid rgba(18, 179, 193, .25);

    border-radius:
        24px 24px 32px 32px;

    font-size: 38px;
}


/* BEAUTY */

.product-round {

    width: 155px;
    height: 155px;

    border:
        1px solid rgba(255, 217, 90, .7);

    border-radius: 50%;

    font-size: 38px;
}


/* NEW PRODUCT */

.product-box {

    width: 150px;
    height: 145px;

    border:
        1px solid rgba(159, 212, 199, .7);

    border-radius: 18px;

    transform:
        rotate(-4deg);

    font-size: 38px;
}


.create-product-item:hover .product-shape {

    transform:
        translateY(-5px);
}


.create-product-item:hover .product-box {

    transform:
        rotate(-2deg) translateY(-5px);
}



/* =========================================================
PRODUCT CATEGORY TEXT
========================================================= */

.create-product-title-row {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(18, 179, 193, .18);
}


.create-product-en {

    margin: 0 0 7px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;

    color: var(--turquoise);
}


.create-product-title-row h3 {

    margin: 0;

    font-size: 19px;

    font-weight: 700;

    letter-spacing: .05em;

    color: #33474b;
}


.create-product-mini {

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--cream);

    color: #f2c83d;

    font-size: 15px;
}


.create-product-text {

    margin-top: 18px;

    font-size: 12px;

    line-height: 2;

    letter-spacing: .04em;

    color: #697679;
}


.create-note {

    margin-top: 70px;

    text-align: center;

    font-size: 10px;

    line-height: 1.8;

    color: #999;
}



/* =========================================================
WHAT WE CREATE → HOW WE MAKE
下向きの円
========================================================= */

.product-create::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -100px;

    width: 160%;
    height: 200px;

    transform:
        translateX(-50%);

    background: #fff;

    border-radius:
        0 0 50% 50%;

    z-index: -1;

    pointer-events: none;
}



/* =========================================================
04 HOW WE MAKE
========================================================= */

.product-process {

    position: relative;

    padding:
        270px 0 180px;

    background: var(--cream);

    overflow: hidden;

    z-index: 1;
    background: #fff3c8;
}


.product-process-inner {

    width:
        min(1250px, 90%);

    margin: 0 auto;
}



/* =========================================================
PROCESS HEADING
========================================================= */

.process-heading {

    position: relative;

    margin-bottom: 110px;

    text-align: center;
}


.process-arc {

    position: absolute;

    left: 50%;
    top: -65px;

    width: 680px;
    height: 225px;

    transform:
        translateX(-50%);

    border-top:
        2px solid rgba(18, 179, 193, .10);

    border-radius:
        50% 50% 0 0;

    pointer-events: none;
}


.process-label {

    position: relative;

    z-index: 2;
}


.process-mini-icon {

    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    margin:
        0 auto 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: var(--yellow);

    font-size: 21px;
}


.process-heading h2 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size:
        clamp(36px, 4vw, 56px);

    line-height: 1.45;

    letter-spacing: .06em;

    color: var(--dark);
}


.process-lead {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin:
        26px auto 0;

    font-size: 13px;

    line-height: 2.1;

    letter-spacing: .05em;

    color: var(--gray);
}



/* =========================================================
PROCESS 5 STEPS
========================================================= */

.process-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 35px;
}


/* ステップ間の線 */

.process-grid::before {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    top: 90px;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(18, 179, 193, .28) 10%,
            rgba(18, 179, 193, .28) 90%,
            transparent);

    z-index: 0;
}


.process-card {

    position: relative;

    z-index: 2;

    text-align: center;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1);
}


.process-card:hover {

    transform:
        translateY(-8px);
}



/* =========================================================
PROCESS VISUAL
========================================================= */

.process-visual {

    position: relative;

    width: 180px;
    height: 180px;

    margin:
        0 auto 35px;
}


.process-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .7);

    box-shadow:
        0 15px 40px rgba(75, 110, 105, .05);
}


.process-visual::after {

    content: "";

    position: absolute;

    inset: 10px;

    border:
        1.5px solid rgba(18, 179, 193, .45);

    border-radius: 50%;
}



/* 色違い */

.process-card:nth-child(1) .process-visual::before {

    background:
        rgba(222, 247, 247, .82);
}


.process-card:nth-child(2) .process-visual::before {

    background:
        rgba(255, 244, 200, .86);
}


.process-card:nth-child(3) .process-visual::before {

    background:
        rgba(230, 247, 244, .88);
}


.process-card:nth-child(4) .process-visual::before {

    background:
        rgba(255, 240, 190, .78);
}


.process-card:nth-child(5) .process-visual::before {

    background:
        rgba(225, 246, 246, .88);
}



/* =========================================================
PROCESS NUMBER
========================================================= */

.process-number {

    position: absolute;

    z-index: 4;

    left: -5px;
    top: 12px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--turquoise);

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .05em;
}



/* =========================================================
PROCESS ICON
========================================================= */

.process-icon {

    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: var(--turquoise);

    font-size: 30px;

    box-shadow:
        0 10px 25px rgba(18, 179, 193, .09);

    transition:
        transform .4s ease;
}


.process-card:hover .process-icon {

    transform:
        translate(-50%, -50%) scale(1.08) rotate(4deg);
}



/* =========================================================
PROCESS TEXT
========================================================= */

.process-en {

    margin: 0 0 8px;

    color: var(--turquoise);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .2em;
}


.process-card h3 {

    min-height: 50px;

    margin: 0;

    font-size: 16px;

    line-height: 1.6;

    letter-spacing: .04em;

    color: #31464a;
}


.process-text {

    max-width: 200px;

    margin:
        16px auto 0;

    text-align: left;

    font-size: 11px;

    line-height: 2;

    letter-spacing: .03em;

    color: #697679;
}



/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

    /* HERO */

    .product-hero {

        min-height: 800px;
    }


    .product-hero-inner {

        width: 78%;
    }


    .product-hero h1 {

        font-size:
            clamp(44px, 7vw, 64px);
    }


    /* CREATE */

    .create-products {

        gap: 30px;
    }


    /* PROCESS */

    .process-grid {

        grid-template-columns:
            repeat(3, 1fr);

        gap:
            70px 30px;
    }


    .process-grid::before {

        display: none;
    }

}



/* =========================================================
SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    /* =====================================================
    HERO
    ===================================================== */

    .product-hero {

        min-height: 780px;
    }


    .product-hero-inner {

        width: 84%;
    }


    .product-en {

        font-size: 9px;

        letter-spacing: .22em;
    }


    .product-hero h1 {

        font-size:
            clamp(36px, 10vw, 45px);

        line-height: 1.5;
    }


    .product-hero-lead {

        margin-top: 28px;

        font-size: 12px;

        line-height: 2;
    }


    .product-hero-text {

        font-size: 10px;

        line-height: 2;
    }



    /* =====================================================
    HERO PHOTOS
    ===================================================== */

    .photo-01 {

        width: 82px;
        height: 82px;

        left: -5px;
        top: 8%;
    }


    .photo-02 {

        width: 65px;
        height: 65px;

        right: 18px;
        top: 9%;
    }


    .photo-03 {

        width: 70px;
        height: 70px;

        left: -20px;
        top: 46%;
    }


    .photo-04 {

        width: 78px;
        height: 78px;

        right: -16px;
        top: 44%;
    }


    .photo-05 {

        width: 65px;
        height: 65px;

        left: 18px;
        bottom: 8%;
    }


    .photo-06 {

        width: 72px;
        height: 72px;

        right: 30px;
        bottom: 7%;
    }


    .product-dot {

        animation-duration: 7s;
    }



    /* =====================================================
    BLUR
    ===================================================== */

    .product-hero-blur {

        width: 340px;
        height: 340px;

        filter: blur(55px);
    }


    .blur-blue {

        left: -170px;
        bottom: 20px;
    }


    .blur-yellow {

        right: -160px;
        top: -80px;
    }



    /* =====================================================
    WHY
    ===================================================== */

    .product-why {

        padding:
            110px 0 120px;
    }


    .product-why-arc {

        width: 130%;
        height: 150px;

        top: 30px;
    }


    .why-heading h2 {

        font-size: 30px;

        line-height: 1.55;
    }


    .why-sub {

        margin-top: 23px;

        font-size: 13px;
    }


    .why-description {

        font-size: 11px;

        line-height: 2.1;
    }



    /* =====================================================
    WHAT WE CREATE
    ===================================================== */

    .product-create {

        padding:
            110px 0 190px;
    }


    .create-heading {

        margin-bottom: 70px;
    }


    .create-arc {

        width: 130%;
        height: 150px;

        top: -35px;
    }


    .create-heading h2 {

        font-size: 30px;
    }


    .create-lead {

        font-size: 11px;

        line-height: 2;
    }



    /* =====================================================
    PRODUCT ITEMS
    ===================================================== */

    .create-products {

        grid-template-columns: 1fr;

        gap: 75px;
    }


    .create-product-item {

        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }


    .create-product-visual {

        height: 220px;
    }


    .create-product-title-row h3 {

        font-size: 17px;
    }


    .create-product-text {

        font-size: 11px;
    }


    .create-note {

        margin-top: 50px;

        font-size: 9px;
    }



    /* =====================================================
    CREATE → PROCESS
    SPは浅い下円
    ===================================================== */

    .product-create::after {

        bottom: -45px;

        width: 260%;
        height: 90px;
    }



    /* =====================================================
    HOW WE MAKE
    ===================================================== */

    .product-process {

        padding:
            180px 0 120px;
    }


    .process-heading {

        margin-bottom: 75px;
    }


    .process-arc {

        width: 130%;
        height: 150px;

        top: -35px;
    }


    .process-heading h2 {

        font-size: 31px;
    }


    .process-lead {

        font-size: 11px;

        line-height: 2;
    }



    /* =====================================================
    PROCESS STEPS
    ===================================================== */

    .process-grid {

        grid-template-columns: 1fr;

        gap: 75px;
    }


    .process-grid::before {

        display: none;
    }


    .process-card {

        width: 100%;
        max-width: 340px;

        margin: 0 auto;
    }


    .process-visual {

        width: 165px;
        height: 165px;
    }


    .process-card h3 {

        min-height: 0;

        font-size: 16px;
    }


    .process-text {

        max-width: 280px;

        text-align: center;

        font-size: 11px;
    }

}



/* =========================================================
SMALL SMARTPHONE
========================================================= */

@media (max-width: 390px) {

    .product-hero h1 {

        font-size: 34px;
    }


    .product-hero {

        min-height: 730px;
    }


    .why-heading h2,
    .create-heading h2,
    .process-heading h2 {

        font-size: 27px;
    }


    .create-product-visual {

        height: 200px;
    }


    .product-create::after {

        width: 300%;
        height: 80px;

        bottom: -40px;
    }

}


/* =========================================================
RESPONSIVE FINAL
PCデザインは維持し、タブレット・SPのみ最終調整
========================================================= */

@media (max-width: 1024px) {
    .product-hero-inner {
        width: min(760px, 78%);
    }

    .product-hero h1 {
        font-size: clamp(44px, 6.5vw, 66px);
    }

    .photo-01 {
        left: 4%;
    }

    .photo-02 {
        right: 8%;
    }

    .photo-03 {
        left: 0;
    }

    .photo-04 {
        right: 0;
    }

    .photo-05 {
        left: 7%;
    }

    .photo-06 {
        right: 12%;
    }

    .product-why-inner,
    .product-create-inner,
    .product-process-inner {
        width: min(900px, 90%);
    }

    .create-products {
        gap: 34px;
    }

    .process-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 70px 28px;
    }

    .process-grid::before {
        display: none;
    }
}

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .product-page {
        width: 100%;
        overflow-x: hidden;
    }

    .product-page img,
    .product-page svg {
        max-width: 100%;
    }

    .product-hero {
        min-height: 720px;
        padding: 110px 0 90px;
        align-items: center;
    }

    .product-hero-inner {
        width: 86%;
        max-width: 430px;
    }

    .product-en {
        margin-bottom: 12px;
        font-size: 9px;
        letter-spacing: .2em;
    }

    .product-hero h1 {
        font-size: clamp(34px, 9.4vw, 42px);
        line-height: 1.45;
        letter-spacing: .025em;
    }

    .product-hero h1 span::after {
        bottom: 2px;
        height: 8px;
    }

    .product-hero-lead {
        margin-top: 24px;
        font-size: 12px;
        line-height: 1.9;
        letter-spacing: .04em;
    }

    .product-hero-text {
        margin-top: 16px;
        font-size: 10px;
        line-height: 1.95;
        letter-spacing: .025em;
    }

    .product-hero .scroll-mark {
        bottom: 20px;
    }

    .product-hero .scroll-mark i {
        height: 32px;
    }

    .photo-01 {
        width: 72px;
        height: 72px;
        left: 35px;
        top: 16%;
    }

    .photo-02 {
        width: 58px;
        height: 58px;
        right: 90px;
        top: 11%;
    }

    .photo-03 {
        width: 62px;
        height: 62px;
        left: 20px;
        top: 53%;
    }

    .photo-04 {
        width: 68px;
        height: 68px;
        right: 21px;
        top: 47%;
    }

    .photo-05 {
        width: 56px;
        height: 56px;
        left: 35px;
        bottom: 3%;
    }

    .photo-06 {
        width: 62px;
        height: 62px;
        right: 20px;
        bottom: 8%;
    }

    .product-dot {
        opacity: .7;
    }

    .product-hero-blur {
        width: 300px;
        height: 300px;
        filter: blur(50px);
    }

    .product-why {
        padding: 95px 0 105px;
    }

    .product-why-inner {
        width: 88%;
    }

    .product-why-arc {
        width: 145%;
        height: 130px;
        top: 24px;
    }

    .why-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 14px;
        font-size: 21px;
    }

    .why-heading h2 {
        font-size: 28px;
        line-height: 1.55;
        letter-spacing: .04em;
    }

    .why-sub {
        margin-top: 20px;
        font-size: 12px;
        line-height: 1.8;
    }

    .why-description {
        max-width: 420px;
        margin-top: 22px;
        font-size: 11px;
        line-height: 2;
        letter-spacing: .025em;
    }

    .product-create {
        padding: 100px 0 150px;
    }

    .product-create-inner {
        width: 88%;
    }

    .create-heading {
        margin-bottom: 58px;
    }

    .create-arc {
        width: 145%;
        height: 125px;
        top: -28px;
    }

    .create-mini-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 13px;
        font-size: 18px;
    }

    .create-heading h2 {
        font-size: 28px;
        line-height: 1.5;
        letter-spacing: .035em;
    }

    .create-lead {
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.95;
        letter-spacing: .025em;
    }

    .create-products {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .create-product-item {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
    }

    .create-product-visual {
        height: 205px;
        margin-bottom: 24px;
    }

    .create-product-visual::before {
        width: 175px;
        height: 175px;
    }

    .product-bottle {
        width: 80px;
        height: 155px;
    }

    .product-round {
        width: 135px;
        height: 135px;
    }

    .product-box {
        width: 132px;
        height: 126px;
    }

    .create-product-title-row {
        gap: 14px;
        padding-bottom: 12px;
    }

    .create-product-title-row h3 {
        font-size: 17px;
    }

    .create-product-mini {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .create-product-text {
        margin-top: 15px;
        font-size: 11px;
        line-height: 1.95;
    }

    .create-note {
        margin-top: 42px;
        font-size: 9px;
        line-height: 1.7;
    }

    .product-create::after {
        bottom: -38px;
        width: 270%;
        height: 76px;
    }

    .product-process {
        padding: 145px 0 105px;
    }

    .product-process-inner {
        width: 88%;
    }

    .process-heading {
        margin-bottom: 62px;
    }

    .process-arc {
        width: 145%;
        height: 125px;
        top: -28px;
    }

    .process-mini-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
        font-size: 19px;
    }

    .process-heading h2 {
        font-size: 29px;
        line-height: 1.5;
        letter-spacing: .04em;
    }

    .process-lead {
        max-width: 420px;
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.95;
        letter-spacing: .025em;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .process-card {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }

    .process-visual {
        width: 145px;
        height: 145px;
        margin-bottom: 26px;
    }

    .process-number {
        left: -3px;
        top: 9px;
        width: 36px;
        height: 36px;
        font-size: 10px;
    }

    .process-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .process-en {
        margin-bottom: 6px;
        font-size: 8px;
    }

    .process-card h3 {
        min-height: 0;
        font-size: 16px;
        line-height: 1.55;
    }

    .process-text {
        max-width: 280px;
        margin-top: 13px;
        text-align: center;
        font-size: 11px;
        line-height: 1.9;
    }
}

@media (max-width: 390px) {
    .product-hero {
        min-height: 680px;
        padding-top: 100px;
    }

    .product-hero-inner {
        width: 88%;
    }

    .product-hero h1 {
        font-size: 32px;
    }

    .product-hero-lead {
        font-size: 11px;
    }

    .product-hero-text {
        font-size: 9px;
    }

    .photo-01 {
        width: 64px;
        height: 64px;
    }

    .photo-02,
    .photo-05 {
        width: 52px;
        height: 52px;
    }

    .photo-03,
    .photo-04,
    .photo-06 {
        width: 58px;
        height: 58px;
    }

    .why-heading h2,
    .create-heading h2 {
        font-size: 26px;
    }

    .process-heading h2 {
        font-size: 27px;
    }

    .product-why-inner,
    .product-create-inner,
    .product-process-inner {
        width: 90%;
    }

    .create-product-visual {
        height: 190px;
    }

    .process-visual {
        width: 138px;
        height: 138px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-photo,
    .product-dot,
    .product-hero-blur {
        animation: none !important;
    }
}

/* =========================================================
HEADER SP POSITION FIX
========================================================= */

.header {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {

    .site-header {
        right: 18px !important;
        left: auto !important;
    }

}

@media (max-width: 600px) {

    .site-header {
        right: 14px !important;
        left: auto !important;
    }

}

/* =========================================================
PRODUCT PAGE PC WIDTH FIX
========================================================= */

@media (min-width: 1025px) {

    .product-page {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .product-hero,
    .product-why,
    .product-create,
    .product-process {
        width: 100%;
        max-width: none;
    }

    .product-why-inner,
    .product-create-inner,
    .product-process-inner {
        width: calc(100% - 120px);
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-hero-inner {
        width: calc(100% - 120px);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

}