@charset "utf-8";

/*====================================
Article header
=====================================*/
.article__header {
    margin-top: 64px;
}

.mainVisual__sp, .mainVisual__pc {
    display: flex;
    overflow: hidden;
    width: 100vw;
    height: 80vh;
}

.mainVisual__inner {
    display: flex;
    transition: transform 1s ease;
    width: 300vw;
}

.mainVisual__pc {
    display: none;
}

.mainVisual__grp {
    flex-shrink: 0;
    position: relative;
}
  
.mainVisual__grp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* 半透明の黒 */
    z-index: 1;
    pointer-events: none;
}

.mainVisual__sp img, .mainVisual__pc img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

.mainVisual__txt {
    position: absolute;
    top: 50%;
    left: 36%; /* 左36%の中央に配置したい場合 */
    transform: translate(-50%, -50%);
    color: var(--color-white);
    z-index: 2;
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.04em;
}



/* common pc */
@media screen and (min-width:769px) {
    .article__header {
        margin-top: 100px;
    }

    .mainVisual__pc {
        display: flex;
    }

    .mainVisual__sp {
        display: none;
    }

    .mainVisual__txt {
        left: 24%; /* 左24%の中央に配置したい場合 */
        font-size: 8rem;
    }
}

/*====================================
About
=====================================*/
.about {
    padding: 94px 0 0 var(--contentpadding);
}

.topic__txt--about {
    margin-right: var(--contentpadding);
}

.about__img {
    padding: 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.about__img img {
    width: 80%;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
}

.secondtopic {
    margin-top: 80px;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}



/* common pc */
@media screen and (min-width:769px) {
    .about {
        display: flex;
        justify-content: space-between;
        gap: 200px;
        padding: 180px var(--contentpadding__PC) 0;
    }

    .topic__group--about {
        flex: 1;
    }

    .about__img {
        margin-top: 100px;
    }

    .about__img img {
        width: 100%;
        border-radius: 10px;
    }
}

/*====================================
Point
=====================================*/
.section--point {
    margin-top: 64px;
}

.point {
    padding: 0 var(--contentpadding);
    display: flex;
    flex-direction: column; /* ← 縦方向に変更 */
    align-items: center;     /* 縦方向中央 */
}

.point3 {
    position: relative;
    margin-top: 40px;
    padding-bottom: 30px;
    width: 100%;
    max-width: 360px;
    background: var(--color-whitelow);
}

.point__ribon {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: fit-content;
    gap: 6px;
    padding: 8px 16px 8px 40px;
    margin-bottom: 36px;
    background-color: var(--color-emerald);
    position: relative;
}

.point__ribon::after {
    content: ''; /* 擬似要素で三角形を作成 */
    position: absolute; /* 絶対位置で配置 */
    right: -44px; /* 右側に配置 */
    top: 50%; /* 親要素の縦中央に配置 */
    transform: translateY(-50%); /* 真ん中に調整 */
    width: 0;
    height: 0;
    border-left: 0px solid transparent;  /* 左側は透明 */
    border-right: 44px solid transparent; /* 右側も透明 */
    border-top: 44px solid var(--color-emerald); /* 上側に色付きの三角形 */
}

.ribon {
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.ribon__number {
    color: var(--color-white);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
}

.point3 img {
    display: block;
    margin: 0 auto;
}

.point__topic {
    margin-top: 36px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.75;
}

.point__txt {
    margin-top: 24px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.75;
}



/* common pc */
@media screen and (min-width:769px) {
    .section--point {
        margin-top: 120px;
    }

    .point {
        padding: 0 var(--contentpadding__PC);
        display: flex;
        flex-direction: row; /* ← 縦方向に変更 */
        align-items: center;     /* 縦方向中央 */
        justify-content: space-between;
    }

    .point3 {
        margin-top: 64px;
    }
    
}
/*====================================
Service
=====================================*/
.section--service {
    background-color: var(--color-whiteblue);
    padding: 94px var(--contentpadding);
    margin-top: 64px;
}

.service__group {
    margin-top: 64px;
}

.service__content {
    display: flex;
    align-items: center;
}

.service__number {
    color: var(--color-emerald);
    font-family: Poppins;
    font-size: 6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

.service__topic {
    margin-left: 28px;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
}

.service__txt {
    margin-top: 14px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.75;
}

.service__img {
    display: block;
    margin-top: 28px;
    object-fit: cover;
    border-radius: 10px;
}



/* common pc */
@media screen and (min-width:769px) {
    .section--service {
        padding: 180px var(--contentpadding__PC);
        margin-top: 120px;
    }       

    .service__group {
        display: flex;
        align-items: center;     /* 縦方向中央 */
        margin-top: 80px;
        gap: 100px;
        overflow: hidden;
    }

    .service__content--wrapper {
        margin-left: var(--contentpadding__PC);
    }

    .service__img {
        margin-top: 0;
    }

    .service__content {
        display: block;
    }

    .service__number {
        font-size: 10rem;
    }
    .service__topic {
        margin-left: 0;
        margin-top: 20px;
        font-size: 4rem;
    }

    .service__txt {
        width: 240px;
        margin-top: 40px;
        font-size: 1.6rem;
    }
    
    .service__group.reverse {
        flex-direction: row-reverse;
    }

    .service__content--wrapper.reverse {
        margin-left: 0;
        margin-right: var(--contentpadding__PC);
    }
}
/*====================================
Plan
=====================================*/
.section--plan {
    padding: 64px var(--contentpadding);
}

.plan__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px 14px;
    margin-top: 60px;
} 

.plan__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    list-style: none;
    display: flex;
    background-color: var(--color-brown);
    width: 160px;
    height: 160px;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
}

.plan__topic::before {
    content: "";
    position: absolute;
    top: -80px; /* 上に80px移動 */
    left: 50%; /* 横中央に配置 */
    transform: translateX(-50%); /* 50%の位置から半分だけ移動して中央にする */
    width: 64px; /* 丸の直径 */
    height: 64px; /* 丸の直径 */
    background-size: 28px 28px; /* 位置調整 */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%; /* 丸くするための設定 */
}

.plan__item--floor .plan__topic::before {
    background-color: var(--color-blue);
    background-image: url('../images/icon-clean.png');
}

.plan__item--patrol .plan__topic::before {
    background-color: var(--color-blue);
    background-image: url('../images/icon-patrol.png');
}

.plan__item--plant .plan__topic::before {
    background-color: var(--color-green);
    background-image: url('../images/icon-plant.png');
}

.plan__item--cut .plan__topic::before {
    background-color: var(--color-green);
    background-image: url('../images/icon-cut.png');
}

.plan__item::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color:var(--color-white);
}

.plan__topic {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 700;
    top: 50px;
}

.plan__price--group {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    top: 120px;
}

.plan__price {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.plan__smalltxt {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.btn--small {
    width: 200px;
}

.btn--plan {
    height: 40px;
}



/* common pc */
@media screen and (min-width:769px) {
    .section--plan {
        padding: 120px var(--contentpadding__PC);
    }
    
    .plan__group {
        justify-content: space-between;
        margin-top: 80px;
    }

    .plan__item {
        width: 240px;
        height: 240px;
    }

    .plan__topic {
        top: 70px;
        font-size: 2.4rem;
    }

    .plan__topic::before {
        top: -110px;
        width: 80px;
        height: 80px;
        background-size: 40px 40px;
    }

    .plan__price--group {
        top: 180px;
    }

    .plan__price {
        font-size: 2.4rem;
    }

    .plan__smalltxt {
        font-size: 1.8rem;
    }

    .btn--wrapper--plan {
        margin-top: 60px;
        display: flex;
        justify-content: flex-end
    }

    .btn--small {
        background-color: var(--color-emerald);
        width: 240px;
    }

    .btn--small::before {
        width: 20px;
        height: 20px;
        left: 12%;
    }

    .btn--plan {
        height: 50px;
    }
}    

/*====================================
Company
=====================================*/
.section--company {
    position: relative;
    padding: 64px var(--contentpadding);
    background-color:rgba(196, 206, 232, 0.9);
}

.section--company::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/company.jpg); /* 同じ背景画像 */
    background-size: 180%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.topic__txt--company {
    margin-top: 40px;
    line-height: 1.5; /* 150% */
}

.btn--wrapper--company {
    margin-top: 40px;  
}

.btn--company {
    height: 40px;
    color: var(--color-blue);
    background: var(--color-white);
    z-index: 2;
}

.btn--company::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--color-blue);
    background-image: url(../images/btn-blue.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}



/* common pc */
@media screen and (min-width:769px) {
    .section--company {
        padding: 120px var(--contentpadding__PC);
    }

    .section--company::before {
        background-size: 100%;
    }

    .company__wrapper {
        display: flex;
        align-items: flex-end;     /* 下方向合わせ */
        justify-content: space-between;
    }

    .topic__txt--company {
        margin-top: 60px;
    }

    .btn--wrapper--company {
        margin-top: 0;
    }

    .btn--company {
        height: 50px;
    }
    .btn--company::before {
        width: 20px;
        height: 20px;
        left: 12%;
    }
}