/* 共通 */

body,main {
    overflow-x: hidden;
}

main {
    background: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.top__secTitle {
    font-size: 4.3rem;
    font-weight: 700;
    font-family: var(--familyZenMaruGothic);
    letter-spacing: 0.03em;
    text-align: center;
    @media screen and (max-width: 767px) {
        font-size: 3rem;
        letter-spacing: 0;
    }
}

.top__secTitleEn {
    margin-inline: auto;
    width: fit-content;
    margin-top: 2rem;
    @media screen and (max-width: 767px) {
        width: 17rem;
        margin-top: 0.75rem;
    }
}

/* メインビジュアル */
#mv {
    position: relative;
    &::before {
        content: "";
        background-image: url(../../images/top/bg-mv-tree-left.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 31rem;
        aspect-ratio: 642 / 2695;
        position: absolute;
        left: 0;
        top: 19%;
        z-index: -2;
    }
    &::after {
        content: "";
        background-image: url(../../images/top/bg-mv-tree-right.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 76rem;
        aspect-ratio: 362 / 475;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -2;
    }
    .mv__inner {
        position: relative;
        .mv__leaf {
            position: absolute;
            z-index: -1;
        }
        .mv__leaf1 {
            width: 3.6rem;
            height: 3.8rem;
            top: 49.5%;
            left: 0.5%;
            animation: fall-right 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-delay: 0.4s;
        }
        .mv__leaf2 {
            width: 7.1rem;
            height: 4.9rem;
            top: 51%;
            right: 35%;
            animation: fall-left 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-delay: 0.6s;
        }
        .mv__leaf3 {
            width: 4.2rem;
            height: 3.4rem;
            bottom: 4%;
            left: 34.5%;
            animation: fall-left 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-delay: 0.8s;
        }
        display: grid;
        grid-template-columns: 62% auto;
        max-width: 134rem;
        padding: 11rem 5rem 6rem 9rem;
        margin-inline: auto;
        align-items: flex-end;
        .mvClover {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;

            .mvClover__item {
                position: absolute;
                width: 48%;
                height: 48%;

                &:nth-child(1) { 
                    width: 57%;
                    height: 57%;
                    top: -7%; 
                    left: -7%;
                }
                &:nth-child(2) { top: 2%; right: 0; }
                &:nth-child(3) { bottom: 0; left: 2%; }
                &:nth-child(4) { bottom: 0; right: 0; }

                img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0;
                transition: opacity 1s ease;
                    &.is-active {
                        opacity: 1;
                    }
                }
            }
        }

        .mv__textarea {
            display: grid;
            justify-items: center;
            padding-bottom: 1.5rem;
            .mv__title {
                max-width: 31rem;
                padding-left: 2.5rem;
            }

            .mv__text {
                margin-top: 4rem;
                padding-left: 4rem;
                color: var(--bgBrown);
                font-family: var(--familyZenMaruGothic);
                font-size: 2.4rem;
                font-weight: 500;
                letter-spacing: 0.02125em;
                line-height: 1.83;
            }

            .mv__logo {
                max-width: 32.1rem;
                margin-top: 7.5rem;

                img {
                    width: 100%;
                }
            } 
        }
    }
    .mv__bottomLine {
        display: none;
    }
    @media screen and (max-width: 1440px) {
        .mv__inner {
            .mv__textarea {
                padding-bottom: 1.0417vw; 
                .mv__title {
                    max-width: 21.52vw; 
                    padding-left: 1.736vw; 
                }
                .mv__text {
                    margin-top: 2.7778vw; 
                    padding-left: 2.7778vw;
                    font-size: 1.6667vw;
                }
                .mv__logo {
                    max-width: 22.2917vw;
                    margin-top: 5.2083vw;
                }
            }
        }
    }   
    @media screen and (max-width: 767px) {
        &::before {
            width: 8.5rem;
            top: 35%;
        }
        &::after {
            width: 25.5rem;
            opacity: 0.5;
        }
        .mv__inner {
            grid-template-columns: 1fr;
            padding: 10rem 3.5rem 5rem 3.5rem;
            .mv__leaf1 {
                width: 2.7rem;
                height: 2.8rem;
                top: 31%;
                left: 5%;
            }
            .mv__leaf2 {
                width: 2.2rem;
                height: 1.6rem;
                right: 11%;
                top: 51%;
            }
            .mv__leaf3 {
                width: 3.8rem;
                height: 3.95rem;
                left: unset;
                right: 8%;
                bottom: 32%;
                animation: fall-right 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

            }
            .mv__textarea  {
                .mv__title {
                    margin-top: 2rem;
                    max-width: 24.3rem;
                    padding-left: 0;
                    order: 1;
                    margin-top: 4.8rem;
                }
                .mv__text {
                    font-size: 1.8rem;
                    margin-top: 1.6rem;
                    padding-left: 0;
                    order: 2;
                }
                .mv__logo {
                    order: 0;
                    max-width: 23.2rem;
                }
            }
        }
        .mv__bottomLine {
            display: block;
            height: 2px;
            width: 14.6rem;
            margin-inline: auto;
            background: linear-gradient(
                to right,
                transparent,
                #047F4A 20%,
                #047F4A 80%,
                transparent
            );
        }
    } 
}

.bgImage {
    position: relative;
    &::before {
        content: "";
        background-image: url(../../images/top/bg.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -10;
        @media screen and (max-width: 767px)  {
            border-radius: 0 0 0 12rem;
        }
    }
}

/* わたしたちについて */
#about {
    position: relative;
    padding-block: 5rem 12rem;
    .about__leaves {
        position: absolute;
        right: 0;
        bottom: -3%;
        pointer-events: none;
        width: 28.5rem;
        z-index: -1;
    }
    .about__leadWrap {
        margin-top: 5.5rem;
        .about__leadTitle {
            font-size: 3rem;
            font-weight: 700;
            font-family: var(--familyZenMaruGothic);
            letter-spacing: 0.06em;
            line-height: 1.56;
            text-align: center;
        }
        .about__leadText {
            font-size: 2rem;
            font-weight: 700;
            font-family: var(--familyZenMaruGothic);
            letter-spacing: 0.042em;
            line-height: 1.4;
            text-align: center;
            margin-top: 0.5rem;
        }
    }
    .bg-leaf {
        .leaf-1 {
            top: 59%;
            width: 4.8rem;
            height: 2.8rem;
            left: -11rem;
            background-image: url(../../images/common/img_bg_contents-leaf-2.webp);
            animation: fall-left-about 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }
        .leaf-2 {
            top: 14.8%;
            right: -1.5rem;
            left: unset;
            width: 4.8rem;
            height: 2.8rem;
        }
    }
    .about__img {
        margin-top: 2rem;
    }
    .about__img--button {
        display: none;
    }
    .strength_BTN {
        margin: 5.5rem auto 0;
        display: grid;
    }
    @media screen and (max-width: 767px) {
        .container1100 {
            padding-inline: 1rem;
        }
        .bg-leaf {
            display: none;
        }
        .about__leaves {
            right: 0;
            bottom: -4rem;
            width: 17rem;
            z-index: 3;
        }
        .about__leadWrap {
            margin-top: 3.2rem;
            .about__leadTitle {
                font-size: 2rem;
                letter-spacing: -0.05em;
                line-height: 1.3;
            }  
            .about__leadText {
                font-size: 1.6rem;
                line-height: 1.5;
                letter-spacing: 0.0525em;
                margin-top: 0.75rem;
            }
        }
        .about__img {
            margin-top: 1.5rem;
            position: relative;
            z-index: 4;
        }
        .about__img--button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            width: 10.4rem;
            height: 2.5rem;
            border-radius: 2rem;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
            background: var(--colorWhite);
            font-size: 1.1rem;
            font-family: var(--familyZenMaruGothic);
            font-weight: 700;
            letter-spacing: -0.05em;
            margin: 1.8rem auto 0;
            border: none;
        }
        .strength_BTN {
            max-width: 31.4rem;
            margin-top: 2.5rem;
            p {
                font-size: 1.6rem;
            }
        }
    }
}

@keyframes fall-left-about {
  0% {
    transform: translate(-60px, -60px) rotate(62deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(72deg);
    opacity: 1;
  }
}

/* 事業紹介 */
#service {
    padding-block: 14rem 22.5rem;
    position: relative;
    .service__tree-branch {
        position: absolute;
        top: -11.5rem;
        left: 0rem;
        width: 45.6rem;
        z-index: 2;
    }
    .top__secTitle {
        position: relative;
        z-index: 2;
    }
    .service__leadTitle {
        font-size: 2.6rem;
        font-weight: 700;
        font-family: var(--familyZenMaruGothic);
        letter-spacing: 0.03em;
        line-height: 1.07;
        margin-top: 6rem;
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .bg-leaf {
        .leaf-1 {
            top: 70.5%;
            right: -12rem;
            left: unset;
            width: 7.1rem;
            height: 4.9rem;
        }
        .leaf-2 {
            top: 65.8%;
            right: -3.5rem;
            left: unset;
            width: 4.8rem;
            height: 2.8rem;
        }
    }
    .serviceList {
        display: grid;
        gap: 1rem;
        margin-top: 4rem;
        padding-inline: 3rem;
        position: relative;
        z-index: 2;
        .serviceList__item {
            a {
                display: grid;
                grid-template-columns: 65.5% auto;
                align-items: center;
                border: 2px solid rgba(242, 241, 241, 0.68);
                border-radius: 7rem 0 7rem 7rem;
                background: #fff;
                padding: 0.6rem;
                min-height: 13.4rem;
                box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.2);
            }
            .serviceList__body {
                border-radius: 6rem 0 6rem 6rem;
                padding: 0 6rem;
                height: 100%;
                position: relative;
                align-content: center;
                transition: 0.3s;
                .serviceList__title {
                    font-size: 2.5rem;
                    font-weight: 700;
                    letter-spacing: 0.03em;
                    line-height: 1.24;
                }
                .serviceList__desc {
                    font-size: 1.6rem;
                    line-height: 1.375;
                    letter-spacing: 0.03em;
                    margin-top: 1rem;
                }
                &::after {
                    content: "";
                    position: absolute;
                    background-image: url(../../images/common/icon-arrow.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    top: 50%;
                    right: 6rem;
                    transform: translateY(-50%);
                    width: 2.8rem;
                    height: 2.36rem;
                    transition: 0.3s;
                }
                .serviceList__circle {
                    position: absolute;
                    width: 9.9rem;
                    height: 9.9rem;
                    border-radius: 50%;
                    background: var(--colorWhite);
                    right: 12.5rem;
                    top: 50%;
                    transform: translateY(-50%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 2.6rem;
                    font-weight: 700;
                    letter-spacing: 0.03em; 
                }
            }
            .serviceList__meta {
                display: grid;
                grid-template-columns: 39% auto;
                align-items: center;
                .serviceList__img {
                    width: 6.5rem;
                    margin-inline: auto;
                }
                .serviceList__data {
                    .serviceList__label {
                        font-size: 1.8rem;
                        letter-spacing: 0.03em;
                    }
                    .serviceList__value {
                        font-size: 4.3rem;
                        font-weight: 700;
                        letter-spacing: 0.012em;
                        line-height: 1;
                        font-family: var(--familyZenMaruGothic);
                        .serviceList__unit {
                            font-size: 2.8rem;
                        }
                    }
                }
            }
        }
    }
    .serviceList__note {
        margin-top: 2rem;
        padding-right: 3rem;
        font-size: 1.4rem;
        text-align: end;
        position: relative;
        z-index: 2;
    }
    .strength_BTN {
        display: grid;
        margin: 2.5rem auto 0;
        position: relative;
        max-width: 26rem;
        width: 100%;
        z-index: 2;
    }
    @media (hover: hover) {
        .serviceList {
            .serviceList__item {
                a:hover {
                    .serviceList__body {
                        transition: 0.3s;
                        &::after {
                            right: 5.5rem;
                        }
                        background-color: var(--hover-bg) !important;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 767px)  {
        padding-block: 14rem 24.5rem;
        &::before {
            border-radius: 0 0 0 15rem;
        }
        .service__tree-branch {
            width: 26.2rem;
            top: -6rem;
            left: -3.5rem;
            transform: rotate(-8.53deg);
        }
        .service__leaves {
            top: 12rem  ;
            right: 0;
            width: 5.8rem;
        }
        .bg-leaf {
            .leaf-1 {
                top: 0.5%;
                right: 0;
                width: 4rem;
                height: 2.8rem;
            }
            .leaf-2 {
                top: -1.8%;
                right: 4rem;
                left: unset;
                width: 2.4rem;
                height: 2.5rem;
                animation: fall-right-service 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            }
        }
        .service__leadTitle {
            font-size: 2.2rem;
            margin-top: 2.2rem;
            line-height: 1.36;
        }
        .serviceList {
            padding-inline: 1rem;
            margin-top: 3rem;
            gap: 1.9rem;
            .serviceList__item {
                a {
                    grid-template-columns: 1fr;
                    border-radius: 6rem;
                    padding: 0.8rem 0.8rem 1.5rem 0.8rem;
                }
                .serviceList__body {
                    padding: 1.6rem 0.5rem 1.6rem;
                    border-radius: 7.9rem 7.9rem 0 7.9rem;
                    .serviceList__title {
                        font-size: 2.4rem;
                        text-align: center;
                    }
                    .serviceList__desc {
                        font-feature-settings: "palt";
                        letter-spacing: 0;
                        text-align: center;
                        margin-top: 0.3rem;
                    }
                    &::after {
                        content: none;
                    }
                    .serviceList__circle {
                        width: 6.5rem;
                        height: 6.5rem;
                        font-size: 1.857rem;
                        top: 0rem;
                        right: -2.8rem;
                    }
                }
                
                .serviceList__meta {
                    padding-top: 1rem;
                    position: relative;
                    grid-template-columns: 32% auto;
                    &::after {
                        content: "";
                        position: absolute;
                        background-image: url(../../images/common/icon-arrow.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        bottom: 1.2rem;
                        right: 1rem;
                        width: 2.8rem;
                        height: 2.3rem;
                    }
                    .serviceList__img{
                        width: 6.1rem;
                    }
                    .serviceList__data {
                        .serviceList__label {
                            font-size: 1.6rem;
                        }
                        .serviceList__value {
                            .serviceList__unit {
                                position: relative;
                                left: -1rem;
                            }
                        }
                    }
                }
            }
        }
        .serviceList__note {
            font-size: 1.4rem;
            margin-top: 1.2rem;
        }
        .strength_BTN {
            max-width: 30rem;
            margin-top: 3rem;
        }
    }
}

@keyframes fall-right-service {
    0% {
        transform: translate(60px, -60px) rotate(140deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) rotate(150deg);
        opacity: 1;
    }
}

/* トピックス */
#topics {
    padding-block: 9.5rem 15rem;
    background: var(--colorWhite);
    position: relative;
    .topics__circle {
        position: absolute;
        top: -19.4rem;
        right: 0;
        width: 51.2rem;
        z-index: 2;
    }
    .container1100 {
        position: relative;
        .topics__bird {
            position: absolute;
            top: -18rem;
            left: 50%;
            transform: translateX(-50%);
            width: 20rem;
            z-index: 3;
        }
        .top__secTitle {
            text-align: start;
            margin-left: -2rem;
        }
        .topics__body {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-top: 2.6rem;
            gap: 1rem;
            position: relative;
            z-index: 4;
            .topicsList {
                max-width: 72.1rem;
                width: 100%;
                .topicsList__item {
                    .topicsList__link {
                        display: block;
                        padding-block: 1.8rem;
                        border-bottom: 0.5px solid #C9C9C9;
                        transition: 0.3s;
                        .topicsList__meta {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem 1.5rem;
                            flex-wrap: wrap;
                            .topicsList__date {
                                font-size: 1.8rem;
                                font-weight: 700;
                                letter-spacing: 0.03em;
                                color: var(--colorGreen);
                                line-height: 1.67;
                            } 
                            .topicsList__catWrap {
                                display: flex;
                                flex-wrap: wrap;
                                gap: 1rem;
                                .topicsList__cat {
                                    border-radius: 6rem 0 6rem 6rem;
                                    font-size: 1.4rem;
                                    font-weight: 350;
                                    padding: 0 1rem;
                                }
                            }
                        }
                        .topicsList__text {
                            font-size: 1.8rem;
                            font-weight: 350;
                            letter-spacing: 0.03em;
                            color: var(--colorBlack);
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            margin-top: 0.5rem;
                            transition: 0.3s;
                        }
                    }
                }
            }
            .strength_BTN {
                max-width: 30rem;
                width: 100%;
            }
        }
    }
    @media (hover: hover) {
        .container1100  {
            .topics__body {
                .topicsList {
                    .topicsList__item {
                        .topicsList__link:hover {
                            .topicsList__text {
                                color: var(--colorGreen);
                            }
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width: 767px) {
        padding-block: 31rem 9rem;
        .topics__circle {
            width: 35.9rem;
            top: -13.5rem;
            right: -9rem;
        }
       .container1100  {
        padding-inline: 2.4rem;
            .topics__bird {
                width: 18.5rem;
                top: -20rem;
                left: 1.5rem;
                transform: unset;
            }
            .top__secTitle {
                text-align: center;
                margin-left: 0;
            }
            .topics__body {
                margin-top: 0;
                flex-direction: column;
                gap: 0;
                .topicsList {
                    .topicsList__item {
                        .topicsList__link {
                            padding-block: 3rem 1rem;
                            .topicsList__meta {
                                .topicsList__date {
                                    font-size: 1.6rem;
                                }
                            }
                            .topicsList__text {
                                font-size: 1.8rem;
                                line-height: 1.54;
                                -webkit-line-clamp: 3;
                                margin-top: 1.5rem;
                            }
                        }
                        
                    }
                }
                .strength_BTN {
                    margin: 4.8rem auto 0;
                }
            }
        } 
    }
}

.footer .bg-leaf {
    display: none;
}