@charset "utf-8";

/********************************************
image common
********************************************/
.img__cover{
    background: #e8eef3;
    overflow: hidden;
}
.img__cover picture{
    display: block;
    width: 100%;
    height: 100%;
}
.img__cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/********************************************
fv  (#fv)  ―― 2分割・境界は斜め
********************************************/
/* 境界位置を変数化。@property 登録でホバー時に滑らかに可変(未対応環境では 50% 固定) */
@property --fv-split{
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 50%;
}
#fv{
    position: relative;
    height: 860px;
    margin-top: var(--header-height);
    overflow: hidden;
    --fv-split: 50%;
    --fv-skew: 50px;
    transition: --fv-split .5s ease;
}
.fv__col{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: #12222f;
}
.fv__col--coating{
    background-image: linear-gradient(rgba(9,18,28,.30), rgba(9,18,28,.45)), url(../images/top/fv_01_pc.jpg);
    background-position: left center;
    padding-right: calc(100% - var(--fv-split));
    clip-path: polygon(0 0, calc(var(--fv-split) + var(--fv-skew)) 0, calc(var(--fv-split) - var(--fv-skew)) 100%, 0 100%);
}
.fv__col--cleaning{
    background-image: linear-gradient(rgba(9,18,28,.30), rgba(9,18,28,.45)), url(../images/top/fv_02_pc.jpg);
    background-position: right center;
    padding-left: var(--fv-split);
    clip-path: polygon(calc(var(--fv-split) + var(--fv-skew)) 0, 100% 0, 100% 100%, calc(var(--fv-split) - var(--fv-skew)) 100%);
}
.fv__inner{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}
.fv__catch{
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
}
.fv__en{
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .28em;
    margin-top: 6px;
    text-indent: .28em;
}
.fv__btn{
    margin-top: 26px;
    min-width: 240px;
    height: 46px;
    border: none;
}
/* 中央のX斜め境界の中点に追従 */
.fv__cross{
    position: absolute;
    top: 50%;
    left: var(--fv-split);
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}
.fv__cross::before,
.fv__cross::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.85);
}
.fv__cross::before{ transform: rotate(45deg); }
.fv__cross::after{ transform: rotate(-45deg); }

@media (min-width: 769px){
    /* ホバーで境界(--fv-split)が動き、ホバー列が広がる */
    #fv:has(.fv__col--coating:hover){ --fv-split: 72%; }
    #fv:has(.fv__col--cleaning:hover){ --fv-split: 28%; }
}
@media (max-width: 768px){
    /* SP は縦積み・境界はまっすぐ(斜めなし) */
    #fv{
        height: auto;
        margin-top: var(--header-height-sp);
    }
    .fv__col{
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 300px;
        height: 50vh;
        padding: 16vw 0;
        clip-path: none;
    }
    .fv__col--coating{
        background-image: linear-gradient(rgba(9,18,28,.30), rgba(9,18,28,.45)), url(../images/top/fv_01_sp.jpg);
        background-position: center;
        padding-right: 0;
    }
    .fv__col--cleaning{
        background-image: linear-gradient(rgba(9,18,28,.30), rgba(9,18,28,.45)), url(../images/top/fv_02_sp.jpg);
        background-position: center;
        padding-left: 0;
    }
    .fv__catch{ font-size: 6.4vw; }
    .fv__en{ font-size: 4vw; margin-top: 1.6vw; }
    .fv__btn{ width: 72vw; min-width: 0; margin-top: 5vw; }
    .fv__cross{ left: 50%; width: 16vw; height: 16vw; }
}

/********************************************
about  (#about)
********************************************/
#about{
    padding: 100px 0 110px;
}
.about__head{ margin-bottom: 34px; }
@media (min-width: 769px){
    .about__head{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}
.about__catch{
    color: var(--color-primary);
}
/* 写真は 1200px コンテナに収めず、左端から window 全体の 50% 幅でフルブリード */
.about__photo{
    width: 50vw;
    height: 360px;
    margin-left: calc(50% - 50vw);
    margin-top: -320px;
    aspect-ratio: 16 / 11;
}
.about__body{ overflow: hidden; }   /* BFC：フロートした写真の右側に回り込ませる */
.about__desc{
    margin-top: 30px;
    font-size: 16px;
    line-height: 2;
}
.about__note{
    margin-top: 20px;
    font-size: 12px;
    color: var(--color-text-note);
    line-height: 1.7;
}
/* 対応実績ボックス */
.about__result{
    clear: both;   /* フロート写真の下に確実に回り込ませる */
    margin-top: 60px;
    padding: 44px 30px 50px;
    background: var(--color-bg-gray);
    text-align: center;
}
.about__result-ttl{
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
}
.about__result-text{
    margin-top: 10px;
    line-height: 1.9;
}
.about__icons{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.about__icons li{
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
}
.about__icons img{ width: 110px; object-fit: contain; }

@media (max-width: 768px){
    #about{ padding: 12vw 0 14vw; }
    /* SP はフルブリード解除＋デザイン順(見出し→リード→写真→説明)に並べ替え */
    #about .inner{ display: flex; flex-direction: column; }
    #about .about__body{ display: contents; }
    #about .about__head{ order: 1; margin-bottom: 0; }
    #about .about__photo{
        order: 3;
        float: none;
        width: calc(100% + 5.33vw);
        height: 33.33vw;
        margin: 7vw 0 0 -5.33vw;
        aspect-ratio: 16 / 10;
    }
    #about .about__desc{ order: 4; font-size: 3.3vw; margin-top: 7vw; }
    #about .about__result{ order: 5; }
    .about__note{ font-size: 3.2vw; margin-top: 4vw; }
    .about__result{ margin-top: 8vw; padding: 4vw 2vw 4vw; }
    .about__result-ttl{ font-size: 4.26vw; }
    .about__result-text{ font-size: 3.3vw;margin-top: 0; }
    .about__icons{ flex-wrap: wrap; gap: 3vw; margin-top: 5vw; }
    .about__icons li{ width: 22vw; height: 22vw; border-radius: 2vw; }
    .about__icons img{ width: 18vw; height: 18vw; }
}

/********************************************
service  (#service)
********************************************/
#service{
    position: relative;
    background: var(--color-bg-light);
    overflow: hidden;
}

.service__inner{
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: -3.5vw;
}
.service__bg{
    display: flex;
    align-items: center;
    float: left;
    width: 44vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 11;
    min-height: 620px;
    background: none;
}
.service__body{
    width: 50%;
    flex: 1;
    padding: calc( 60px + 3.5vw ) 40px 120px 0;
}
.service__catch{
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
}
.service__text{
    margin-top: 16px;
    line-height: 2;
}
.service__list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.service__card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(20,60,100,.08);
    transition: transform .3s, box-shadow .3s;
}
@media (min-width: 769px){
    .service__card:hover{ transform: translateY(-4px); box-shadow: 0 10px 22px rgba(20,60,100,.14); }
}
.service__card-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
}
.service__card-icon img{ width: 180px;object-fit: contain; }
.service__card-foot{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    height: 60px;
    padding: 0 40px 0 20px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.service__card-foot .arrow{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 768px){
    #service{ padding-bottom: 16vw; }
    .service__inner{ flex-direction: column; gap: 8vw; }
    .service__bg{ width: 100%; min-height: 56vw; border-radius: 0;aspect-ratio: auto;}
    .service__body{ padding: 0 2.933vw;width: 100%; }
    .service__catch{ font-size: 4vw; }
    .service__text{ font-size: 3.2vw; margin-top: 1vw;letter-spacing: -0.05em;}
    .service__list{ gap: 1.2vw; margin-top: 7vw; }
    .service__card-icon{ height: 36vw; }
    .service__card-icon img{ width: 32vw; height: 32vw; }
    .service__card-foot{ font-size: 3.2vw; padding: 2.2vw 2vw 2.2vw 0; }
    .service__card-foot .arrow{right:2vw;}
}

/********************************************
case  (#case)  ―― before/after 比較スライダー
********************************************/
#case{
    background: var(--grad-back);
    color: #fff;
    padding: 90px 0 100px;
}
.case__head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 46px;
}
.case__head .ttl__area{ margin-bottom: 0; }

@media (min-width: 769px){
    .case__catch{
        line-height: 1.4;   /* 共通(1.5)を上書き */
    }
}
.case__list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- before/after slider (.ba) --- */
.ba{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #dbe3ea;
    touch-action: none;      /* スマホでのフリック中に縦スクロールさせない */
    user-select: none;
    -webkit-user-select: none;
}
.ba__img{
    position: absolute;
    inset: 0;
}
.ba__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* before を右側からクリップして左側だけ表示 */
.ba__img--before{
    clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.ba__line{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    pointer-events: none;
}
.ba__handle{
    position: absolute;
    top: 50%;
    left: var(--pos, 50%);
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-accent);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    cursor: ew-resize;
    touch-action: none;
}
.ba.is-dragging .ba__handle{ box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.25); }
.ba__label{
    position: absolute;
    bottom: 10px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.45);
    border-radius: 3px;
    pointer-events: none;
}
.ba__label--before{ left: 10px; }
.ba__label--after{ right: 10px; }

.case__item-ttl{
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
}
.case__item-meta{
    margin-top: 4px;
    font-size: 13px;
    opacity: .9;
}
.case__more{
    text-align: center;
    margin-top: 50px;
}

@media (max-width: 768px){
    #case{ padding: 14vw 0 16vw; }
    .case__head{ align-items: flex-start; gap: 5vw; margin-bottom: 8vw; }
    .case__catch{ text-align: left; }
    .case__list{ grid-template-columns: 1fr; gap: 7vw;padding: 0 4.66vw; }
    .ba__handle{ width: 12vw; height: 12vw; font-size: 5vw; }
    .case__item-ttl{ font-size: 4.8vw; margin-top: 3vw; }
    .case__item-meta{ font-size: 3.46vw; margin-top: 0;}
    .case__more{ margin-top: 9vw;padding: 0 4.66vw; }
}

/********************************************
reason  (#reason)
********************************************/
#reason{
    padding: 100px 0;
}
.reason__head{
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 70px;
}
/* キャッチコピー共通スタイルは common.css に集約。ここは色のみ */
.reason__catch{
    color: var(--color-primary);
}
.reason__head .ttl__area{ margin-bottom: 0; padding-top: 30px; }
.reason__item{
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 120px;
}
.reason__body{
    flex: 1;
    display: flex;
    gap: 22px;
}
.reason__num{
    font-family: var(--font-num);   /* Hind bold */
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    flex-shrink: 0;
}
.reason__ttl{
    font-size: 36px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primary);
}
.reason__ttl-sub{
    display: block;
}
.reason__desc{
    margin-top: 60px;
    font-size: 16px;
    line-height: 1.95;
    color: var(--color-text);
}
.reason__img{
    width: 300px;
    flex-shrink: 0;
    background-color: transparent;
}
.reason__more{
    text-align: center;
    margin-top: 50px;
}
.reason__more .btn{ min-width: 560px; }

@media (max-width: 768px){
    #reason{ padding: 14vw 0; }
    /* 縦積み＋右端揃え。ttl__area は内容幅に縮めて右に置くことで見切れを防ぐ */
    .reason__head{ flex-direction: column; align-items: flex-end; gap: 4vw; margin-bottom: 10vw;position: relative; }
    .reason__catch{ align-self: flex-start;padding-top: 9vw; }
    .reason__head .ttl__area{
        padding-top: 0;
        width: auto;
        text-align: right;
        position: absolute;
        top: 0;
        right: 0;
    }
    .reason__head .ttl__main{ font-size: 11vw; }
    .reason__head .ttl__sub{ justify-content: flex-end; }
    .reason__item{ flex-direction: column; gap: 5vw; margin-bottom: 12vw;position: relative;}
    .reason__body{ gap: 4vw;width: 100%; }
    .reason__num{ font-size: 10.66vw; }
    .reason__ttl{ font-size: 4.8vw;margin-top: -2vw; }
    .reason__ttl-sub{ font-size: 4.5vw; }
    .reason__desc{
        font-size: 3.2vw;
        margin-top: 3vw;
        width: calc(100% + 22vw);
        margin-left: -16vw;
    }
    .reason__img{ width: 100%; order: -1; padding: 0 17.33vw;}
    .reason__more .btn{ min-width: 0; }
    .reason__more{ margin-top: 9vw;padding: 0 4.266vw;}

    .reason__item:nth-child(3) .reason__img{
        position: absolute;
        bottom: 0;
        right: -6vw;
        width: 43vw;
        padding: 0;
    }
}

/********************************************
faq  (#faq)
********************************************/
#faq{
    position: relative;
    background: var(--color-bg-light);
    padding: 0 0 100px;
}
#faq .inner{padding-top: 95px;}
.faq__list{ padding: 0 30px; }
.faq__item{
    border-bottom: 1px solid var(--color-primary-light);
}
.faq__q{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 10px;
    cursor: pointer;
}
.faq__mark{
    font-family: var(--font-num);   /* Hind bold */
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    flex-shrink: 0;
}
.faq__mark--a{ color: var(--color-accent);margin-left: 8px; }
.faq__q-text{
    flex: 1;
    font-size: 20px;
    font-weight: 500;
}
/* ＋/− トグル(CSSのみ・SVG不使用) */
.faq__toggle{
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-accent);
}
.faq__toggle::before,
.faq__toggle::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: opacity .3s;
}
.faq__toggle::before{ width: 14px; height: 2px; }
.faq__toggle::after{ width: 2px; height: 14px; }
.faq__item.active .faq__toggle::after{ opacity: 0; }
.faq__a{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}
.faq__item.active .faq__a{ grid-template-rows: 1fr; }
.faq__a-body{
    display: flex;
    gap: 24px;
    overflow: hidden;
    padding: 0 10px;
}
.faq__item.active .faq__a-body{ padding: 0 10px 34px; }
.faq__a-text{
    flex: 1;
    line-height: 1.95;
    padding-top: 4px;
}

@media (max-width: 768px){
    #faq{ padding: 0 0 14vw; }
    #faq .inner{ padding-top: 12vw; }
    .faq__list{padding: 0;}
    .faq__q{ gap: 4vw; padding: 5vw 1vw; }
    .faq__mark{ font-size: 10.66vw; }
    .faq__q-text{ font-size: 3.73vw; }
    .faq__toggle{ width: 6.4vw; height: 6.4vw; }
    .faq__toggle::before{ width: 3.2vw; }
    .faq__toggle::after{ height: 3.2vw; }
    .faq__item.active .faq__a-body{ padding: 0 0 6vw;}
    .faq__a-body{ gap: 4vw; }
    .faq__a-text{ font-size: 2.93vw;padding: 0; }
}

/********************************************
news  (#news)
********************************************/
#news{
    padding: 100px 0 0;
}
#news .btn--orange{
    border: none;
}
.news__head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}
.news__head .ttl__area{ margin-bottom: 0; }
.news__all{ min-width: 200px; padding: 12px 24px; font-size: 14px; }
.news__list{
    width:  calc( 100% - 60px );
    margin: 0 auto;
}
.news__item{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--color-line);
    transition: background-color .3s;
}
@media (min-width: 769px){
    .news__item:hover{ background: #f5f8fb; }
}
.news__date{
    color: var(--color-text-sub);
    flex-shrink: 0;
}
.news__cat{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.news__cat--tips{ background: var(--color-accent); }
.news__link{
    transition: color .3s;
}
.news__link:hover{ color: var(--color-primary); }
.news__btns{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 44px;
}
.news__btns .btn{ min-width: 460px; }

@media (max-width: 768px){
    #news{ padding: 14vw 0 0; }
    .news__head{ margin-bottom: 6vw; }
    .news__all{ min-width: 0; width: auto; padding: 2.6vw 8vw; font-size: 3.2vw; }
    .news__list{ width: 100%; }
    .news__item{ flex-wrap: wrap; gap: 1vw 4vw; padding: 3vw 1vw; }
    .news__date{ font-size: 3.46vw; }
    .news__cat{ min-width: 28vw; font-size: 3.2vw; padding: 0 ; }
    .news__link{ width: 100%; font-size: 3.73vw; }
    .news__btns{ flex-direction: column; gap: 4vw; margin-top: 8vw;padding: 0 4.266vw; }
    .news__btns .btn{ min-width: 0; }
}

/********************************************
scroll fade-in
********************************************/
.fadeIn{
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s ease;
}
.fadeIn.scrollIn{
    opacity: 1;
    transform: translateY(0);
}