/* extracted from inline <style> #1 */

:root {
    --bg: #000000;
    --text: #f7f4ff;
    --muted: #b9b3c9;
    --dim: #756f86;
    --line: rgba(255, 255, 255, .12);
    --purple: #8f5cff;
    --purple2: #d9c7ff;
    --max: 1180px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif;
    letter-spacing: .02em
}

a {
    color: inherit;
    text-decoration: none
}

/*
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            background: rgba(5, 5, 10, .68);
            backdrop-filter: blur(18px)
        }
*/
.logo {
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 14px
}

/*
        .nav {
            display: flex;
            gap: 22px;
            color: var(--muted);
            font-size: 13px
        }
*/
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px
}

.label {
    font-size: 13px;
    color: var(--purple2);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 16px
}

.section-pad {
    padding: 105px 0
}

.section-head {
    max-width: 860px
}

.section-head h2 {
    font-size: clamp(34px, 4.5vw, 64px);
    line-height: 1.14;
    letter-spacing: -.05em;
    margin: 0
}

.lead {
    font-size: 18px;
    line-height: 2.1;
    color: var(--muted);
    margin: 28px 0 0;
    max-width: 850px
}

/*
        .hero {
            position: relative;
            min-height: 100svh;
            display: grid;
            align-items: center;
            overflow: hidden;
            padding-top: 64px
        }

        .hero:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(5, 5, 10, .94) 0%, rgba(5, 5, 10, .72) 36%, rgba(5, 5, 10, .08) 70%, rgba(5, 5, 10, .18) 100%)
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            max-width: var(--max);
            margin: auto;
            width: 100%;
            padding: 0 28px
        }

        .hero-copy {
            max-width: 560px
        }

        .hero h1 {
            font-size: clamp(46px, 7vw, 94px);
            line-height: .98;
            letter-spacing: -.06em;
            margin: 0
        }

        .hero p {
            font-size: 18px;
            line-height: 2;
            color: #d8d0e8;
            margin: 30px 0 0
        }
*/
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px
}

.chip {
    border: 1px solid rgba(217, 199, 255, .28);
    border-radius: 999px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, .045);
    color: #eee6ff;
    font-size: 13px;
    font-weight: 700
}

.scroll-note {
    position: absolute;
    z-index: 3;
    right: 38px;
    bottom: 32px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .12em
}

.image-board {
    margin-top: 46px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.image-board img {
    display: block;
    width: 100%;
    height: auto
}

.board-caption {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 26px 30px 32px;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.cap-card {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 20px 22px;
}

.cap-card h3 {
    margin: 0 0 10px;
    font-size: 18px
}

.cap-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted)
}

.approach-box {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 36px;
    align-items: stretch;
    border: 1px solid rgba(146, 92, 255, .26);
    background: linear-gradient(135deg, rgba(146, 92, 255, .14), rgba(255, 255, 255, .035));
    border-radius: 34px;
    overflow: hidden
}

.approach-text {
    padding: clamp(30px, 5vw, 56px)
}

.approach-text h2 {
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.16;
    letter-spacing: -.05em;
    margin: 0 0 26px
}

.approach-text p {
    color: var(--muted);
    font-size: 17px;
    line-height: 2
}

.approach-img {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: radial-gradient(circle at 70% 35%, rgba(146, 92, 255, .18), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015))
}

.approach-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 24px
}

.wall-scroll {
    padding: 110px 0
}

.wall-layout {
    display: grid;
    grid-template-columns: minmax(400px, .9fr) minmax(0, 1fr);
    gap: 58px;
    align-items: start
}

.sticky-visual {
    position: sticky;
    top: 92px;
    height: calc(100svh - 124px);
    min-height: 620px;
    border: 1px solid var(--line);
    border-radius: 36px;
    overflow: hidden;
    background: #09090f;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35)
}

.sticky-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .55s ease
}

.sticky-visual img.active {
    opacity: 1
}

.visual-label {
    position: absolute;
    left: 28px;
    top: 28px;
    z-index: 3;
    text-shadow: 0 12px 30px rgba(0, 0, 0, .8)
}

.visual-label h3 {
    font-size: 28px;
    margin: 8px 0 0
}

.indicator {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 30px;
    display: grid;
    gap: 10px;
    z-index: 3
}

.ind {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    transition: .3s
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    transition: .3s
}

.ind.active {
    color: #fff
}

.ind.active .dot {
    background: var(--purple);
    box-shadow: 0 0 24px rgba(143, 92, 255, .9)
}

.step-list {
    display: grid;
    gap: 34px
}

.step {
    min-height: 74svh;
    border-top: 1px solid var(--line);
    padding: 44px 0 30px
}

.num {
    color: var(--purple2);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    margin-bottom: 18px
}

.step h2 {
    font-size: clamp(31px, 4vw, 56px);
    line-height: 1.18;
    letter-spacing: -.05em;
    margin: 0 0 24px
}

.step p {
    color: var(--muted);
    font-size: 17px;
    line-height: 2;
    margin: 0 0 22px
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px
}

.feature {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, .04);
    color: #e9e2ff;
    font-size: 14px
}

.module-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 26px
}

.module-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .035);
    padding: 22px
}

.module-card h3 {
    font-size: 22px;
    margin: 0 0 12px;
    color: #e7d8ff
}

.module-card p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 14px;
    margin: 0
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.product {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    padding: 24px;
    min-height: 320px
}

.product-visual {
    height: 130px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 50%, rgba(143, 92, 255, .24), transparent 60%), rgba(255, 255, 255, .055);
    display: grid;
    place-items: center;
    margin-bottom: 22px
}

.tiny-outlet {
    width: 68px;
    height: 94px;
    border-radius: 14px;
    background: linear-gradient(180deg, #19171f, #0c0b11);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 0 32px rgba(143, 92, 255, .28)
}

.product h3 {
    margin: 0 0 10px;
    font-size: 20px
}

.product p {
    color: var(--muted);
    line-height: 1.75;
    font-size: 14px
}

.meta {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    color: #e9e2ff;
    font-size: 13px
}

.meta div {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 8px
}

.meta span {
    color: var(--dim)
}

.notice-box {
    margin-top: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    background: rgba(255, 255, 255, .04);
    padding: 30px
}

.notice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.notice-grid h3 {
    margin: 0 0 10px
}

.notice-grid p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 14px
}

.closing {
    padding: 90px 0 120px;
    text-align: center
}

.closing h2 {
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.15;
    letter-spacing: -.06em;
    margin: 0 auto;
    max-width: 980px
}

.closing p {
    color: var(--muted);
    font-size: 18px;
    line-height: 2;
    margin: 28px auto 0;
    max-width: 720px
}

footer {
    border-top: 1px solid var(--line);
    padding: 26px 28px;
    color: var(--dim);
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

@media(max-width:900px) {
    .approach-img {
        min-height: 300px;
        padding: 18px
    }

    .approach-img img {
        border-radius: 18px
    }

    .header {
        height: 58px;
        padding: 0 18px
    }

    .nav {
        display: none
    }

    .wrap {
        padding: 0 20px
    }

    .hero {
        min-height: 92svh;
        padding-top: 58px
    }

    .hero:after {
        background: linear-gradient(180deg, rgba(5, 5, 10, .18), rgba(5, 5, 10, .88) 58%, rgba(5, 5, 10, .97) 100%)
    }

    .hero-bg {
        object-position: 62% center
    }

    .hero-inner {
        align-self: end;
        padding: 0 20px 70px
    }

    .hero p,
    .lead {
        font-size: 15px;
        line-height: 1.9
    }

    .section-pad {
        padding: 76px 0
    }

    .section-head h2 {
        font-size: 34px
    }

    .board-caption,
    .approach-box,
    .notice-grid,
    .product-grid,
    .module-cards {
        grid-template-columns: 1fr
    }

    .approach-img {
        min-height: 300px;
        order: -1
    }

    .wall-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .sticky-visual {
        position: relative;
        top: 0;
        min-height: 420px;
        height: 520px
    }

    .step {
        min-height: auto;
        padding: 34px 0
    }

    .feature-grid {
        grid-template-columns: 1fr
    }

    .product {
        min-height: auto
    }

    footer {
        display: block;
        line-height: 1.8
    }

    .indicator {
        font-size: 12px
    }

    .visual-label h3 {
        font-size: 22px
    }
}


/* extracted from inline style attributes */
.pw-inline-style-01 {
    --hero-cols: 50% 50%;
    align-items: start;
}

.pw-inline-style-02 {
    --hero-h1-size: 40pt;
    --hero-h1-size-sp: 24px;
}

.pw-inline-style-03 {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

.image-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
}

.image-item {
    width: 100%;
}

.image-item img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .image-grid3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.install-step-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:24px;
}

.install-step-img img{
    display:block;
    width:100%;
    height:auto;
}

@media (max-width:768px){

.install-step-grid{
    grid-template-columns:1fr;
}

}