/* =========================================================
   OfficeWrap Renewal CSS
   共通CSS 2026 Renewal
   整理版 2026
========================================================= */

/* =========================
   1. Reset / Base
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Noto Sans JP',sans-serif;
    background:#f7f9fc;
    color:#333;
    line-height:1.8;
    overflow-x:hidden;
}

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

a{
    color:inherit;
    text-decoration:none;
    transition:0.3s;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* =========================
   2. Header
========================= */

.site-header{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,0.05);
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 0;
}

.logo{
    font-size:1.7rem;
    font-weight:900;
    color:#222;
    line-height:1.2;
}

.logo:hover{
    color:#ff5b7f;
}

.logo-sub{
    margin-top:4px;
    font-size:0.85rem;
    color:#777;
}

.main-nav .nav-list{
    display:flex;
    align-items:center;
    gap:22px;
}

.main-nav a{
    font-size:0.95rem;
    font-weight:700;
    color:#333;
}

.main-nav a:hover,
.nav-ai{
    color:#e91e63 !important;
}

.btn-contact{
    display:inline-block;
    padding:12px 22px;
    border-radius:999px;
    background:#ff6b4a;
    color:#fff;
    font-weight:700;
    box-shadow:0 8px 20px rgba(255,107,74,0.25);
}

.btn-contact:hover{
    transform:translateY(-2px);
}

/* =========================
   3. Hero
========================= */

.hero{
    padding:85px 0;
    background:linear-gradient(135deg,#fff5f7 0%,#eef7ff 100%);
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:38px;
    align-items:center;
}

.hero-label{
    display:inline-block;
    margin-bottom:24px;
    padding:8px 18px;
    border-radius:999px;
    background:#ff5b7f;
    color:#fff;
    font-size:0.9rem;
    font-weight:700;
}

.hero h1{
    margin-bottom:22px;
    color:#222;
    font-size:3rem;
    line-height:1.22;
    font-weight:900;
    letter-spacing:0.02em;
}

.hero-main-copy{
    margin-bottom:18px;
    color:#444;
    font-size:1.25rem;
    font-weight:700;
}

.hero-sub-copy{
    margin-bottom:34px;
    color:#666;
    font-size:1rem;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

/* =========================
   4. Buttons
========================= */

.btn-main,
.btn-sub,
.gallery-button,
.cta-button{
    display:inline-block;
    border-radius:999px;
    font-weight:700;
    text-align:center;
}

.btn-main{
    padding:15px 30px;
    background:#ff6b4a;
    color:#fff;
    box-shadow:0 10px 25px rgba(255,107,74,0.25);
}

.btn-main:hover{
    transform:translateY(-3px);
}

/* 年間スケジュールボタン */
.btn-sub{
    padding:15px 30px;
    background:#f5fff7;
    color:#2f9d5c;
    border:2px solid #35b56a;
    box-shadow:0 8px 20px rgba(53,181,106,.15);
}

.btn-sub:hover{
    background:#35b56a;
    color:#fff;
    border-color:#35b56a;
    transform:translateY(-3px);
}

.gallery-button{
    margin-top:30px;
    padding:15px 35px;
    background:#e91e63;
    color:#fff;
    box-shadow:0 10px 25px rgba(233,30,99,0.2);
}

.gallery-button:hover{
    transform:translateY(-3px);
}

.cta-button{
    padding:16px 38px;
    background:#fff;
    color:#333;
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.cta-button:hover{
    transform:translateY(-3px);
}

/* =========================
   5. Hero Image / Schedule Ribbon
========================= */

.hero-image img{
    max-width:520px;
    margin:0 auto;
    border-radius:30px;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.hero-schedule-wrap{
    position:relative;
}

.schedule-ribbon{
    position:absolute;
    top:-18px;
    right:18px;
    z-index:5;
    display:inline-block;
    padding:10px 18px;
    border-radius:999px;
    background:#35b56a;
    color:#fff;
    font-size:0.9rem;
    font-weight:800;
    box-shadow:0 10px 25px rgba(53,181,106,.25);
    transform:rotate(3deg);
}

.schedule-ribbon:hover{
    transform:rotate(0deg) translateY(-2px);
    background:#2c9958;
}

/* =========================
   6. Section Common
========================= */

.about-section,
.gallery-section,
.voice-section,
.video-section{
    padding:90px 0;
}

.section-title{
    margin-bottom:55px;
    text-align:center;
}

.section-title h2{
    margin-bottom:14px;
    color:#222;
    font-size:2.1rem;
    font-weight:800;
    line-height:1.4;
}

.section-title p{
    color:#666;
    font-size:1rem;
}

.gallery-section{
    background:#fff;
}

.voice-section{
    background:#f1f6fb;
}

/* =========================
   7. Service Cards
========================= */

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:32px;
}

.service-card{
    overflow:hidden;
    background:#fff;
    border-radius:28px;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);
    transition:0.3s;
}

.service-card:hover{
    transform:translateY(-5px);
}

.service-image img,
.service-card > img.card-icon{
    width:100%;
    height:260px;
    object-fit:contain;
    background:#fff;
    padding:5px;
}

.service-content{
    padding:28px;
}

.service-content h3{
    margin-bottom:14px;
    color:#222;
    font-size:1.35rem;
    line-height:1.45;
}

.service-content h4{
    margin-bottom:12px;
    color:#7b4fe0;
    font-size:0.98rem;
    font-weight:700;
}

.service-content p{
    color:#555;
    font-size:0.96rem;
}

.service-link{
    display:inline-block;
    margin-top:20px;
    color:#e91e63;
    font-weight:700;
}

/* =========================
   8. Labels
========================= */

.service-category,
.service-category1,
.service-category2,
.service-category3,
.service-category4,
.service-category5,
.service-category6,
.service-category7,
.service-category8,
.service-category9,
.card-label,
.category{
    display:inline-block;
    margin-bottom:16px;
    padding:6px 14px;
    border-radius:999px;
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.04em;
}

.service-category,
.service-category1{
    background:#eef5ff;
    color:#4670d8;
}

.service-category2{
    background:#fff4e6;
    color:#d87a26;
}

.service-category3{
    background:#e8ffe8;
    color:#2f9e44;
}

.service-category4{
    background:#fff0f6;
    color:#d6336c;
}

.service-category5{
    background:#f3f0ff;
    color:#6741d9;
}

.service-category6{
    background:#f0f9ff;
    color:#0b7285;
}

.service-category7{
    background:#fff9db;
    color:#e67700;
}

.service-category8{
    background:#e7f5ff;
    color:#1c7ed6;
}

.service-category9{
    background:#f8f0fc;
    color:#9c36b5;
}

.card-label{
    margin:18px 0 0 24px;
    background:#f3f0ff;
    color:#7b4fe0;
}

.cat-design{ background:#e91e63; color:#fff; }
.cat-tech{ background:#673ab7; color:#fff; }
.cat-business{ background:#2196f3; color:#fff; }
.cat-original{ background:#ff5722; color:#fff; }
.cat-bratching{ background:#4caf50; color:#fff; }

/* =========================
   9. Gallery Box
========================= */

.gallery-box{
    padding:58px 40px;
    background:#fff;
    border-radius:35px;
    text-align:center;
    box-shadow:0 5px 25px rgba(0,0,0,0.05);
}

.gallery-box h2{
    margin-bottom:20px;
    color:#222;
    font-size:2rem;
    line-height:1.4;
}

.gallery-box h3{
    margin:20px 0 12px;
    color:#222;
    font-size:1.4rem;
}

.gallery-box p{
    max-width:760px;
    margin:0 auto;
    color:#666;
}

/* =========================
   10. Voice
========================= */

.voice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
    margin-top:50px;
}

.voice-card{
    position:relative;
    padding:35px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
    transition:.3s;
}

.voice-card::before{
    content:"✨";
    position:absolute;
    top:15px;
    right:18px;
    font-size:1.4rem;
}

.voice-card:hover{
    transform:translateY(-8px);
}

.voice-card p{
    line-height:2;
    color:#555;
    font-size:16px;
    font-weight:600;
}

/* =========================
   11. CTA / LINE
========================= */

.cta-section{
    padding:95px 0;
}

.cta-box{
    padding:68px 30px;
    border-radius:40px;
    background:linear-gradient(135deg,#78c2ad,#5ca7d8);
    color:#fff;
    text-align:center;
}

.cta-box h2{
    margin-bottom:20px;
    font-size:2.25rem;
    line-height:1.4;
}

.cta-box p{
    max-width:700px;
    margin:0 auto 35px;
}

.line-contact-box{
    margin-top:38px;
    padding-top:34px;
    border-top:1px solid rgba(255,255,255,.45);
    text-align:center;
}

.line-contact-title{
    margin-bottom:18px;
    color:#fff;
    font-size:1.25rem;
    font-weight:800;
}

.line-contact-text{
    max-width:720px;
    margin:0 auto 26px;
    color:#fff;
    font-size:1rem;
    line-height:1.9;
}

.line-add-button{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:420px;
    max-width:95%;
    min-height:66px;
    padding:18px 32px;
    border-radius:999px;
    background:#06C755;
    color:#fff !important;
    font-size:1.25rem;
    font-weight:800;
    line-height:1.3;
    text-align:center;
    text-decoration:none !important;
    box-shadow:0 14px 32px rgba(0,0,0,.18),0 10px 24px rgba(6,199,85,.35);
    transition:.25s;
}

.line-add-button:hover{
    transform:translateY(-4px) scale(1.02);
    background:#05b34d;
    box-shadow:0 18px 40px rgba(0,0,0,.22),0 14px 28px rgba(6,199,85,.45);
}

/* =========================
   12. Video
========================= */

.video-wrapper{
    overflow:hidden;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.video-wrapper iframe{
    display:block;
}

/* =========================
   13. Footer
========================= */

.site-footer{
    margin-top:80px;
    padding:40px 20px;
    background:#222;
    color:#ccc;
    text-align:center;
}

.site-footer p{
    font-size:0.9rem;
}

/* =========================
   14. Teacher / Works
========================= */

.teacher-photo{
    width:700px;
    max-width:100%;
    height:300px;
    object-fit:cover;
    object-position:center;
    display:block;
    margin:30px auto;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.works-gallery{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}

.works-label{
    width:100%;
    margin-bottom:5px;
    color:#666;
    font-size:0.9rem;
    font-weight:700;
}

.gallery-item{
    width:calc(33.333% - 10px);
    transition:0.3s;
}

.gallery-item:hover{
    transform:translateY(-4px);
}

.gallery-item img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    transition:0.3s;
}

.gallery-item:hover img{
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
}

.gallery-item p{
    margin-top:8px;
    color:#333;
    font-size:0.85rem;
    line-height:1.4;
    text-align:center;
}

.works-links{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid #e5e5e5;
}

.works-links strong{
    display:block;
    margin-bottom:10px;
    color:#555;
}

.works-links ul{
    padding-left:18px;
    list-style:disc;
}

.works-links li{
    margin-bottom:8px;
}

.works-links a{
    color:#7b4fe0;
    font-weight:600;
}

.works-links a:hover{
    text-decoration:underline;
}

/* =========================
   15. Price
========================= */

.price{
    margin:10px 0 16px;
    color:#e60012;
    font-size:1.45rem;
    font-weight:800;
    line-height:1.5;
}

.price-card{
    margin:10px 0;
    padding:18px;
    border:1px solid #ddd;
    border-radius:14px;
    background:#fff;
}

/* =========================
   16. AI Before After
========================= */

.ai-work{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    border-radius:20px;
    transition:0.3s;
}

.ai-work img{
    width:100%;
    display:block;
}

.ai-work .after-image{
    position:absolute;
    inset:0;
    display:block;
    opacity:0;
    transition:0.4s;
}

.ai-work:hover .after-image,
.ai-work.active .after-image{
    opacity:1;
}

.ai-work:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.ai-label{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:6px 12px;
    border-radius:30px;
    background:rgba(0,0,0,.7);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

/* =========================
   17. Utility
========================= */

.fade-in{
    opacity:0;
    transform:translateY(25px);
    transition:0.8s;
}

.fade-in.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   18. Responsive
========================= */

@media(max-width:980px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .hero{
        padding:70px 0;
    }

    .hero h1{
        font-size:2.45rem;
    }

    .hero-image img{
        max-width:560px;
    }

}

@media(max-width:900px){

    .voice-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .header-inner{
        flex-direction:column;
        align-items:center;
        padding:16px 0;
    }

    .logo-area{
        text-align:center;
    }

    .main-nav .nav-list{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px 16px;
    }

    .main-nav a{
        font-size:0.9rem;
    }

    .header-button{
        width:100%;
        text-align:center;
    }

    .btn-contact{
        width:100%;
        max-width:320px;
    }

    .hero{
        padding:58px 0;
    }

    .hero h1{
        font-size:2.05rem;
        line-height:1.28;
    }

    .hero-main-copy{
        font-size:1.12rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn-main,
    .btn-sub{
        width:100%;
    }

    .schedule-ribbon{
        top:10px;
        right:10px;
        font-size:0.78rem;
        padding:8px 13px;
    }

    .about-section,
    .gallery-section,
    .voice-section,
    .video-section{
        padding:65px 0;
    }

    .section-title{
        margin-bottom:38px;
    }

    .section-title h2{
        font-size:1.75rem;
    }

    .gallery-box,
    .cta-box{
        padding:45px 20px;
        border-radius:28px;
    }

    .gallery-box h2,
    .cta-box h2{
        font-size:1.75rem;
    }

    .line-add-button{
        width:100%;
        min-height:60px;
        font-size:1.08rem;
        padding:16px 24px;
    }

    .video-wrapper iframe{
        height:250px;
    }

    .gallery-item{
        width:calc(50% - 8px);
    }

}

@media(max-width:480px){

    .container{
        width:92%;
    }

    .logo{
        font-size:1.4rem;
    }

    .logo-sub{
        font-size:0.78rem;
    }

    .hero h1{
        font-size:1.75rem;
    }

    .hero-label{
        font-size:0.78rem;
    }

    .service-grid{
        grid-template-columns:1fr;
    }

    .service-content h3{
        font-size:1.2rem;
    }

    .service-image img,
    .service-card > img.card-icon{
        height:210px;
    }

    .gallery-item{
        width:100%;
    }

    .teacher-photo{
        height:240px;
    }

}