@charset "utf-8";

/* =========================================================
   laser03_style.css
   医療レーザー脱毛ページ専用
========================================================= */

.hr-page{
    background:#f7fbfb;
    color:#2f3a3d;
    line-height:1.9;
    font-size:16px;
}

/* =========================================================
   Hero
========================================================= */

.hr-hero{
    background:
        linear-gradient(135deg,#eef8f7 0%,#f8fcfc 100%);
    padding:4.5rem 1.5rem 4rem;
}

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

.hr-eyebrow{
    font-size:0.9rem;
    letter-spacing:0.12em;
    color:#5f8e8b;
    margin-bottom:1rem;
    font-weight:600;
}

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

.hr-lead{
    font-size:1.08rem;
    color:#4f5e62;
    margin-bottom:2rem;
}

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

.hr-hero-tags span{
    background:#ffffff;
    border:1px solid #d7ece8;
    padding:0.5rem 1rem;
    border-radius:999px;
    font-size:0.92rem;
    color:#406267;
}

.hr-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

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

.hr-btn.primary{
    background:#4e8b87;
    color:#fff;
}

.hr-btn.primary:hover{
    background:#3d716e;
}

.hr-btn.secondary{
    background:#fff;
    color:#34555b;
    border:1px solid #bddad7;
}

.hr-btn.secondary:hover{
    background:#f3f9f8;
}

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

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

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

.hr-anchor-nav a:hover{
    background:#dcefed;
}

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

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

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

.hr-soft-bg{
    background:#edf6f5;
}

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

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

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

.hr-section-title p{
    color:#536266;
}
.hr-footdescript{
    margin-top:1.2rem;
    color:#6c7b80;
    text-align: center;
}
/* =========================================================
   Worries
========================================================= */

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

.hr-card{
    background:#fff;
    border-radius:18px;
    padding:1.5rem;
    box-shadow:0 4px 18px rgba(0,0,0,0.04);
    color:#445459;
    font-weight:500;
}

/* =========================================================
   Popular
========================================================= */

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

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

.hr-feature-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#dcefed;
    color:#3f716d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:1.2rem;
}

.hr-feature-card h4{
    font-size:1.25rem;
    margin-bottom:1rem;
    color:#244047;
}

.hr-feature-card p{
    color:#546368;
}

/* =========================================================
   Features
========================================================= */

.hr-point-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.5rem;
}

.hr-point{
    background:#fff;
    border-radius:22px;
    padding:2rem;
}

.hr-point h4{
    font-size:1.1rem;
    margin-bottom:1rem;
    color:#28474d;
}

.hr-point p{
    color:#56666b;
}

/* =========================================================
   Device
========================================================= */

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

.hr-check-list{
    margin-top:1.5rem;
    padding-left:1.2rem;
}

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

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

.hr-image-box img{
    width:100%;
    max-width:240px;
    border-radius:24px;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
}

.hr-note{
    margin-top:1.2rem;
    color:#6c7b80;
    font-size:0.92rem;
}

/* =========================================================
   Flow
========================================================= */

.hr-flow{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
}

.hr-flow-item{
    background:#fff;
    border-radius:24px;
    padding:2rem;
    position:relative;
}

.hr-flow-item span{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#4e8b87;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:1rem;
}

.hr-flow-item h4{
    margin-bottom:0.8rem;
    color:#244047;
}

/* =========================================================
   Cautions
========================================================= */

.hr-caution-box{
    background:#fff;
    border-radius:24px;
    padding:2rem;
    box-shadow:0 6px 24px rgba(0,0,0,0.04);
}

.hr-caution-box ul{
    padding-left:1.4rem;
}

.hr-caution-box li{
    margin-bottom:1rem;
}

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

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

.hr-price-box ul{
    margin:0 0 1.8rem;
    padding:0;
    list-style:none;
}

.hr-price-box li{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:0.8rem 0;
    border-bottom:1px solid #edf1f2;
}

.hr-price-box li span:last-child{
    white-space:nowrap;
    font-weight:600;
}

.hr-price-box h5{
    margin:2rem 0 1rem;
    font-size:1rem;
    color:#3f6367;
}

.hr-price-box .listdescript{
    margin-bottom:1rem;
    color:#5d6b70;
    font-size:0.95rem;
}

.hr-price-box .note{
    margin-left: 0.7rem;
    background:#edf6f5;
    font-size:0.85rem;
    color:#6d7d82;
}

.hr-price-note{
    margin-top:1.5rem;
    color:#6b7a7f;
    font-size:0.92rem;
}

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

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

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

.hr-faq summary{
    cursor:pointer;
    font-weight:600;
    color:#29464d;
}

.hr-faq p{
    margin-top:1rem;
    color:#56666b;
}

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

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

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

.hr-final-cta h3{
    font-size:clamp(1.8rem,3vw,2.8rem);
    margin-bottom:1.2rem;
    color:#244047;
}

.hr-final-cta p{
    margin-bottom:2rem;
    color:#56666b;
}

/* =========================================================
   Utility
========================================================= */

.male{
    color:#4a7ca8;
}

.female{
    color:#bf6f87;
}

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

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

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

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

}

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

    .hr-hero{
        padding:3.5rem 1.2rem 3rem;
    }

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

    .hr-anchor-nav{
        justify-content:flex-start;
        overflow-x:auto;
        white-space:nowrap;
        padding:1rem;
    }

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

    .hr-btn{
        width:100%;
    }

    .hr-price-box{
        padding:1.5rem;
    }

    .hr-price-box li{
        flex-direction:column;
        gap:0.2rem;
    }

    .hr-price-box li span:last-child{
        white-space:normal;
    }

}