#c_hdr_ttl{

    display:none !important;

    opacity:0 !important;

    visibility:hidden !important;

    height:0 !important;

    overflow:hidden !important;
}

body{
    margin:0;
    background:#fff;
    color:#222;
    font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

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


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

.products-hero{

    position:relative;

    width:100%;
    height:100vh;

    min-height:760px;

    overflow:hidden;

    background:#000;
}

.hero-bg{

    position:absolute;

    inset:0;

    background:
    url('../img/top/slide3v1.jpg') center center / cover no-repeat;

    transform:scale(1.05);

    animation:heroScale 10s ease-in-out infinite alternate;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.2) 40%,
        rgba(0,0,0,0.45) 100%
    );
}

.hero-inner{

    position:relative;
    z-index:2;

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

    height:100%;

    margin:0 auto;

    display:flex;
    align-items:center;

    padding:0 80px;

    box-sizing:border-box;
}

.hero-copy{
    max-width:700px;
}

.hero-sub{

    margin:0 0 30px;

    color:#9dd7ff;

    letter-spacing:0.4em;

    font-size:14px;
}

.hero-copy h1{

    margin:0;

    font-size:88px;
    line-height:1.15;
    font-weight:700;

    color:#fff;

    letter-spacing:0.03em;
}

.hero-text{

    margin-top:45px;

    font-size:19px;
    line-height:2.4;

    color:rgba(255,255,255,0.88);
}

.hero-scroll{

    position:absolute;

    left:80px;
    bottom:40px;

    z-index:2;

    color:#fff;

    letter-spacing:0.3em;

    font-size:12px;
}

/* ========================================
FV
======================================== */

.products-fv{

    padding:30px 60px;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fbff 100%
    );
}

.products-fv-inner{

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

    margin:0 auto;

    display:flex;
    align-items:center;
    gap:90px;
}

.fv-image{

    flex:0 0 58%;

    position:relative;
}

.fv-image img{

    width:100%;

    border-radius:36px;

    display:block;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.10);
}

.fv-content{

    flex:1;
}

.fv-mini{

    margin:0 0 24px;

    font-size:13px;

    letter-spacing:0.35em;

    color:#7fc6ff;
}

.fv-content h1{

    margin:0;

    font-size:32px;
    line-height:1.35;

    font-weight:700;

    color:#222;
}

.fv-line{

    width:70px;
    height:1px;

    margin:38px 0;

    background:#9dd7ff;
}

.fv-text{
    font-size:15px;

    line-height:2.1;

    color:#4b5560;

    letter-spacing:0.03em;
}


/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:980px){

    .products-fv{

        padding:40px 24px 80px;
    }

    .products-fv-inner{

        flex-direction:column;

        gap:45px;
    }

    .fv-image{

        flex:none;

        width:100%;
    }

    .fv-content h1{

        font-size:42px;
    }

}


/* ========================================
NAV
======================================== */

.products-nav-wrap{

    position:sticky;
    top:0;

    z-index:100;

    background:rgba(255,255,255,0.88);

    backdrop-filter:blur(14px);

    border-top:1px solid rgba(0,0,0,0.04);
    border-bottom:1px solid rgba(0,0,0,0.04);
}

.products-nav{

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

    margin:0 auto;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;

    padding:24px 40px;

    box-sizing:border-box;
}

.products-nav a{

    text-decoration:none;

    color:#333;

    padding:14px 24px;

    border-radius:999px;

    background:#fff;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.06);

    transition:0.3s;
}

.products-nav a:hover{

    transform:translateY(-4px);
}


/* ========================================
CATEGORY
======================================== */

.products-category{

    padding:130px 40px;

    background:#fff;
}

.products-category:nth-child(even){

    background:#f9fcff;
}

.products-category-head{

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

    margin:0 auto 70px;
}

.category-sub{

    margin:0 0 20px;

    color:#8ac9ff;

    letter-spacing:0.3em;

    font-size:13px;
}

.products-category-head h2{

    margin:0;

    font-size:58px;

    color:#222;
}

.products-grid{

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

    margin:0 auto;

    display:grid;

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

    gap:50px;
}

.product-card{

    background:#fff;

    border-radius:38px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.06);

    transition:0.4s;
}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.1);
}

.product-image{

    background:
    linear-gradient(
        180deg,
        #f9fcff 0%,
        #eef6fd 100%
    );

    padding:50px;

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

    min-height:340px;
}

.product-image img{

    max-height:280px;

    object-fit:contain;
}

.product-body{

    padding:45px;
}

.product-body h3{

    margin:0;

    font-size:34px;
    line-height:1.5;

    color:#222;
}

.product-desc{

    margin-top:28px;

    font-size:16px;
    line-height:2.2;

    color:#666;
}

.product-spec{

    margin-top:40px;

    border-top:1px solid rgba(0,0,0,0.08);
}

.spec-row{

    display:flex;

    padding:18px 0;

    border-bottom:1px solid rgba(0,0,0,0.08);
}

.spec-row span{

    width:120px;

    color:#777;

    font-size:14px;
}

.spec-row p{

    flex:1;

    margin:0;

    color:#333;

    line-height:1.9;
}


/* ========================================
MESSAGE
======================================== */

.products-message{

    position:relative;

    padding:180px 40px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #dff2ff 0%,
        #ffffff 100%
    );
}

.products-message-inner{

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

    margin:0 auto;

    text-align:center;
}

.message-en{

    margin:0 0 25px;

    font-size:14px;

    letter-spacing:0.35em;

    color:#7cc4ff;
}

.products-message h2{

    margin:0;

    font-size:62px;
    line-height:1.5;

    color:#222;
}

.products-message p{

    margin-top:45px;

    font-size:18px;
    line-height:2.6;

    color:#666;
}


/* ========================================
ANIMATION
======================================== */

@keyframes heroScale{

    0%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1.12);
    }
}


/* ========================================
RESPONSIVE
======================================== */

@media screen and (max-width:980px){

    .hero-inner{

        padding:0 30px;
    }

    .hero-copy h1{

        font-size:52px;
    }

    .hero-text{

        font-size:16px;
        line-height:2.2;
    }

    .products-intro h2,
    .products-message h2,
    .products-category-head h2{

        font-size:38px;
        line-height:1.5;
    }

    .products-grid{

        grid-template-columns:1fr;
    }

    .product-body{

        padding:35px;
    }

}

#c_cont,
#c_cont_main,
#contents,
#wrapper,
#container{

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}

#c_cont_side{

    display:none !important;
}

.products-page{

    width:100vw;
    margin-left:calc(50% - 50vw);
}

#c_cont{

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}

.products-page{

    width:100vw;

    margin-left:calc(50% - 50vw);
}

.page_ttl,
#page_ttl,
.c_ttl,
.page-title,
.lower-page-title{

    display:none !important;
}

#c_hdr_ttl{

    display:none !important;
}

#c_cont{

    margin-top:0 !important;
    padding-top:0 !important;
}

.products-hero{

    margin-top:0 !important;
}

#c_cont,
#c_cont_in,
#c_main,
#contents,
#wrapper{

    margin-top:0 !important;
    padding-top:0 !important;
}

.products-hero{

    margin-top:0 !important;
}

.products-hero h1{

    margin-top:0 !important;
}

#c_hdr{

    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

#c_hdr_in{

    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* =========================
FV TEXT
========================= */

.fv-mini{
    font-size:12px;
    letter-spacing:0.28em;

    color:#8b949e;

    font-weight:600;

    margin-bottom:22px;
}

.fv-content h1{
    font-size:clamp(48px,5vw,76px);

    line-height:1.05;

    font-weight:700;

    letter-spacing:0.03em;

    color:#2a5376;

    margin-bottom:26px;

    font-family:
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
}

.fv-line{
    display:none;
}