@charset "utf-8";

/* =========================================================
   coolsculpting_style.css
========================================================= */

.cs-page{
    background:#f8fbfc;
    color:#344247;
    line-height:1.9;
    font-size:16px;
}

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

.cs-hero{
    background:
        linear-gradient(135deg,#eef5fb 0%,#f9fcfe 100%);
    padding:5rem 1.5rem 4rem;
}

.cs-hero-inner{
    max-width:1100px;
    margin:0 auto;
}

.cs-eyebrow{
    color:#7294b5;
    font-size:0.9rem;
    font-weight:600;
    letter-spacing:0.12em;
    margin-bottom:1rem;
}

.cs-hero h2{
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.3;
    margin-bottom:1.5rem;
    color:#23333d;
    font-weight:600;
}

.cs-lead{
    font-size:1.1rem;
    color:#55656d;
    margin-bottom:2rem;
}

.cs-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:0.8rem;
    margin-bottom:2rem;
}

.cs-hero-tags span{
    background:#fff;
    border:1px solid #dbe8f4;
    padding:0.55rem 1rem;
    border-radius:999px;
    color:#55708a;
    font-size:0.92rem;
}

.cs-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.2rem;
}

.cs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    padding:1rem 1.7rem;
    border-radius:999px;
    text-decoration:none;
    transition:0.2s ease;
    font-weight:600;
}

.cs-btn.primary{
    background:#6e8fb2;
    color:#fff;
}

.cs-btn.primary:hover{
    background:#5b7d9f;
}

.cs-btn.secondary{
    background:#fff;
    border:1px solid #cfddea;
    color:#4e677f;
}

.cs-btn.secondary:hover{
    background:#f3f7fb;
}

.cs-note{
    color:#6d7a83;
    font-size:0.92rem;
}

/* =========================================================
   Anchor Nav
========================================================= */

.cs-anchor-nav{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.8rem;
    padding:1rem;
    background:#fff;
    border-bottom:1px solid #e6edf2;
}

.cs-anchor-nav a{
    text-decoration:none;
    color:#59738b;
    background:#f2f6fa;
    padding:0.55rem 1rem;
    border-radius:999px;
    font-size:0.9rem;
    transition:0.2s ease;
}

.cs-anchor-nav a:hover{
    background:#e1ebf4;
}

/* =========================================================
   Common Section
========================================================= */

.cs-section{
    padding:5rem 1.5rem;
}

.cs-section > *{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

.cs-soft-bg{
    background:#eef4f8;
}

.cs-section-title{
    margin-bottom:2.5rem;
}

.cs-subtitle{
    color:#7692ad;
    font-size:0.85rem;
    letter-spacing:0.12em;
    margin-bottom:0.8rem;
    text-transform:uppercase;
    font-weight:600;
}

.cs-section-title h3{
    font-size:clamp(1.8rem,3vw,2.7rem);
    line-height:1.4;
    color:#23333d;
    margin-bottom:1.2rem;
    font-weight:600;
}

.cs-section-title p{
    color:#55656d;
}

/* =========================================================
   Cards
========================================================= */

.cs-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1rem;
}

.cs-card{
    background:#fff;
    border-radius:20px;
    padding:1.6rem;
    box-shadow:0 5px 22px rgba(0,0,0,0.04);
    color:#4e5f69;
    font-weight:500;
}

/* =========================================================
   Point Grid
========================================================= */

.cs-point-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.5rem;
    margin-bottom:2rem;
}

.cs-point{
    background:#fff;
    border-radius:24px;
    padding:2rem;
    box-shadow:0 8px 28px rgba(0,0,0,0.04);
}

.cs-point h4{
    color:#2c4050;
    margin-bottom:1rem;
    font-size:1.15rem;
}

.cs-point p{
    color:#5c6c74;
}

/* =========================================================
   details
========================================================= */

.cs-detail{
    background:#fff;
    border-radius:20px;
    padding:1.4rem 1.6rem;
    margin-top:2rem;
    box-shadow:0 4px 20px rgba(0,0,0,0.03);
}

.cs-detail summary{
    cursor:pointer;
    font-weight:600;
    color:#3e5569;
}

.cs-detail div{
    margin-top:1.2rem;
}

.cs-detail p,
.cs-detail li{
    color:#5a6972;
}

.cs-detail ul{
    padding-left:1.4rem;
}

/* =========================================================
   CASES
========================================================= */

.cs-case-card{
    background:#fff;
    border-radius:30px;
    padding:2.5rem;
    margin-bottom:2rem;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
}

.cs-case-head{
    margin-bottom:2rem;
}

.cs-case-badge{
    display:inline-block;
    background:#e6eff7;
    color:#54708a;
    padding:0.45rem 0.9rem;
    border-radius:999px;
    font-size:0.85rem;
    margin-bottom:1rem;
}

.cs-case-head h4{
    font-size:1.45rem;
    margin-bottom:0.8rem;
    color:#253844;
}

.cs-case-head p{
    color:#5c6d76;
}

.cs-img-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
}

.cs-img-row img{
    border-radius:18px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.cs-switch-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:1rem;
}

.image-switch{
    cursor:pointer;
}

/* 症例2：切替式写真を大きく表示 */
.cs-switch-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:2rem;
    align-items:start;
}

.cs-switch-grid .image-switch{
    width:100%;
    text-align:center;
}

.cs-switch-grid .image-switch .img-description{
    width:100%;
}

.cs-switch-grid .image-switch img{
    width:100%;
    max-width:520px;
    height:auto !important;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* スマホ：1列で大きく表示 */
@media screen and (max-width:700px){
    .cs-switch-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .cs-switch-grid .image-switch img{
        max-width:100%;
    }
}

.img-description{
    text-align:center;
}

.img-description p{
    margin-top:0.6rem;
    color:#5f6f78;
    font-size:0.92rem;
}

.cs-img-scroll{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    padding-bottom:0.5rem;
    -webkit-overflow-scrolling:touch;
}

.cs-img-scroll::-webkit-scrollbar{
    height:6px;
}

.cs-img-scroll::-webkit-scrollbar-thumb{
    background:#ccd8e4;
    border-radius:999px;
}

.cs-img-scroll .img-description{
    flex:0 0 auto;
}

.cs-img-scroll img{
    height:240px;
    width:auto;
    border-radius:18px;
}

.scrollsign img, .image-switch .tapsign img{
    width: 120px;
    height: auto;
}
/* =========================================================
   Compare Table
========================================================= */

.cs-table-wrap{
    overflow-x:auto;
}

.cs-compare-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,0.04);
}

.cs-compare-table th{
    background:#dde9f3;
    color:#3d5569;
    padding:1rem;
    text-align:left;
}

.cs-compare-table td{
    padding:1rem;
    border-top:1px solid #edf2f6;
    color:#55656d;
}

.cs-crosslink{
    margin-top:1.8rem;
    background:#fff;
    border-radius:18px;
    padding:1.4rem 1.6rem;
}

.cs-crosslink a{
    color:#5577a1;
    font-weight:600;
}

/* =========================================================
   About
========================================================= */

.cs-two-column{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:3rem;
    align-items:center;
}

.cs-check-list{
    padding-left:1.4rem;
    margin-top:1.4rem;
}

.cs-check-list li{
    margin-bottom:0.8rem;
}

.cs-image-box{
    text-align:center;
}

.cs-image-box img{
    width:100%;
    max-width:420px;
    border-radius:26px;
    box-shadow:0 10px 35px rgba(0,0,0,0.07);
}

/* =========================================================
   Parts
========================================================= */

.cs-parts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}

.cs-part-card{
    background:#fff;
    border-radius:24px;
    padding:2rem;
    box-shadow:0 8px 30px rgba(0,0,0,0.04);
}

.cs-part-card h4{
    color:#2f4452;
    margin-bottom:0.8rem;
}

.cs-part-card p{
    color:#5d6d75;
    margin-bottom:1.2rem;
}

.cs-part-card img{
    width:100%;
    border-radius:18px;
    margin-top:0.8rem;
}

/* 施術部位イラスト：大きくなりすぎないよう調整 */
.cs-part-card img{
    width:auto;
    max-width:240px;
    max-height:200px;
    display:block;
    margin:0.8rem auto 0;
    object-fit:contain;
}

/* =========================================================
   Risk
========================================================= */

.cs-risk-box{
    background:#fff;
    border-radius:24px;
    padding:2rem;
    box-shadow:0 8px 28px rgba(0,0,0,0.04);
}

.cs-risk-box ul{
    padding-left:1.5rem;
}

.cs-risk-box li{
    margin-bottom:1rem;
    color:#5c6c74;
}

/* =========================================================
   Price
========================================================= */

.cs-price-box{
    background:#fff;
    border-radius:28px;
    padding:2.5rem;
    box-shadow:0 10px 35px rgba(0,0,0,0.05);
}

.cs-price-main{
    text-align:center;
    margin-bottom:2rem;
}

.cs-price-main span{
    display:block;
    color:#71818b;
    margin-bottom:0.5rem;
}

.cs-price-main strong{
    font-size:clamp(2rem,4vw,3.4rem);
    color:#284051;
    line-height:1.2;
}

.cs-price-examples{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}

.cs-price-examples > div{
    background:#f3f7fb;
    border-radius:20px;
    padding:1.5rem;
}

.cs-price-examples h4{
    margin-bottom:0.7rem;
    color:#365168;
}

.cs-price-examples p{
    color:#5c6d75;
}

/* =========================================================
   FAQ
========================================================= */

.cs-faq{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.cs-faq details{
    background:#fff;
    border-radius:20px;
    padding:1.3rem 1.5rem;
}

.cs-faq summary{
    cursor:pointer;
    font-weight:600;
    color:#34495b;
}

.cs-faq p{
    margin-top:1rem;
    color:#5c6d75;
}

/* =========================================================
   CTA
========================================================= */

.cs-final-cta{
    background:
        linear-gradient(135deg,#dfeaf4 0%,#eef5fb 100%);
    padding:5rem 1.5rem 6rem;
}

.cs-final-cta-inner{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.cs-final-cta h3{
    font-size:clamp(1.9rem,3vw,3rem);
    margin-bottom:1.2rem;
    color:#243744;
}

.cs-final-cta p{
    color:#5b6c75;
    margin-bottom:2rem;
}

/* =========================================================
   Responsive
========================================================= */

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

    .cs-two-column{
        grid-template-columns:1fr;
    }

    .cs-image-box{
        order:-1;
    }

}

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

    .cs-hero{
        padding:4rem 1.2rem 3rem;
    }

    .cs-section{
        padding:4rem 1.2rem;
    }

    .cs-anchor-nav{
        justify-content:flex-start;
        overflow-x:auto;
        white-space:nowrap;
    }

    .cs-anchor-nav::-webkit-scrollbar{
        display:none;
    }

    .cs-btn{
        width:100%;
    }

    .cs-case-card{
        padding:1.5rem;
    }

    .cs-price-box{
        padding:1.6rem;
    }

}