@charset "UTF-8";
/********************************************************************************

page-top.css　トップページcss

********************************************************************************/

/*============================================================
 common調整
*============================================================*/
/* フッター前余白
---------------------------------------- */
#page-top #main-contents {
    /* padding-bottom: 0; */
}

/*============================================================
 メインビジュアル
*============================================================*/
#page-top #mainvisual {
    height: var(--common-vh);
    min-height: 700px;
    padding: 96px 0 0 0;
    margin-bottom: 160px;
}
#page-top #mainvisual .inner {
    height: 100%;
    /* max-width: none; */
}
#page-top #mainvisual .info {
    width: 100%;
    height: 100%;
    align-content: center;
    position: relative;
}
#page-top #mainvisual .info .catch {
    position: relative;
    z-index: 10;
}
#page-top #mainvisual .info .catch .site-title {
    font-weight: 900;
    /* font-size: clamp(var(--rem20px), 4vw, var(--rem100px)); */
    font-size: clamp(var(--rem20px), 4vw, var(--rem52px));
    line-height: 190%;
    margin-bottom: 48px;
}

/* アニメーション
---------------------------------------- */
/* 行別遅延 */
#page-top #mainvisual .info .catch .site-title [class^="mv-anim"] {
    --line-01-delay: 0.5s;
    --line-02-delay: 1s;
    --line-03-delay: 1.5s;
}
/* テキスト */
#page-top #mainvisual .info .catch .site-title [class^="mv-anim"] {
    animation: mv-anim-text 1s var(--line-01-delay) forwards linear;
    position: relative;
}
#page-top #mainvisual .info .catch .site-title .mv-anim-02 {
    animation-delay: var(--line-02-delay);
}
#page-top #mainvisual .info .catch .site-title .mv-anim-03 {
    animation-delay: var(--line-03-delay);
}
@keyframes mv-anim-text {
    from {
        color: #000;
    }
    to {
        color: #fff;
    }
}
/* 背景 */
#page-top #mainvisual .info .catch .site-title [class^="mv-anim"]::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    content: "";
    width: 0;
    height: 100%;
    background-color: #000;
    animation: mv-anim-bg 1s var(--line-01-delay) forwards linear;
}
#page-top #mainvisual .info .catch .site-title .mv-anim-02::after {
    animation-delay: var(--line-02-delay);
}
#page-top #mainvisual .info .catch .site-title .mv-anim-03::after {
    animation-delay: var(--line-03-delay);
}
@keyframes mv-anim-bg {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

#page-top #mainvisual .info .catch .lead {
    font-weight: 500;
    font-size: var(--rem20px);
    line-height: 200%;
}

/* プロジェクト数
---------------------------------------- */
#page-top #mainvisual .info .projects-cnt {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
#page-top #mainvisual .info .projects-cnt .cnt {
    font-style: italic;
    font-weight: 600;
    font-size: clamp(120px, 25.64vw, var(--rem320px));
    line-height: 100%;
    letter-spacing: clamp(0px, 1.28vw, -16px);
    color: #DFEAF7;
}
#page-top #mainvisual .info .projects-cnt .cnt span {
    font-style: italic;
    font-weight: 600;
    font-size: clamp(120px, 16.02vw, var(--rem200px));
    line-height: 100%;
    letter-spacing: -10px;
}
#page-top #mainvisual .info .projects-cnt .notice {
    font-weight: 500;
    font-size: var(--rem14px);
    line-height: 100%;
    position: absolute;
    right: 40px;
    bottom: 32px;
}

/*============================================================
 ページ内共通
*============================================================*/
#page-top .section {
}
#page-top .sec-title {
    font-weight: bold;
    font-size: clamp(var(--rem64px), 8.01vw, var(--rem100px));
    line-height: 100%;
    letter-spacing: -2px;
    margin-bottom: 16px;
}
#page-top .sec-title-sub {
    font-weight: 500;
    line-height: 100%;
    color: #909090;
}

/*============================================================
 セクション About US
*============================================================*/
#page-top #sec-about-us {
    margin-bottom: 240px;
}
#page-top #sec-about-us .sec-title-sub {
    margin-bottom: 64px;
}
#page-top #sec-about-us .layout-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#page-top #sec-about-us .layout-flex .info {
    width: 48.07vw;
    max-width: 600px;
}
#page-top #sec-about-us .layout-flex .info .sec-lead {
    font-weight: 500;
    font-size: var(--rem18px);
    line-height: 200%;
    margin-bottom: 48px;
}
#page-top #sec-about-us .layout-flex .image {
    width: 38.46vw;
    max-width: 480px;
}
#page-top #sec-about-us .parts-btn {
    margin: 80px 0 0 0;
}


/*============================================================
 セクション Works
*============================================================*/
#page-top #sec-works {
    margin-bottom: 200px;
}
#page-top #sec-works .sec-title-sub {
    margin-bottom: 80px;
}
#page-top #sec-works .block-category {
    margin-bottom: 80px;
}
#page-top #sec-works .block-category .category-title {
    font-weight: bold;
    font-size: var(--rem20px);
    line-height: 200%;
    margin-bottom: 24px;
}
#page-top #sec-works .block-category .block-card .item {
    width: 320px;
}
#page-top #sec-works .parts-btn {
    margin-top: 80px ;
}

/*============================================================
 セクション Services
*============================================================*/
#page-top #sec-services {
    padding: 200px 0;
    background-color: var(--common-color-black);
    margin-bottom: 200px;
    color: var(--common-color-white);

    background-image: url(../images/common/logo-watermark.svg), url(../images/common/logo-watermark.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top 880px left calc(50vw + 92px), top 2092px left calc(50vw - 587px - 92px);
    background-size: 587px auto, 587px auto;

}
#page-top #sec-services .sec-title-sub {
    margin-bottom: 80px;
}
#page-top #sec-services .block-card[data-name="services"] .item:hover .info .title {
    color: var(--common-color-white);
}

/*============================================================
 セクション News
*============================================================*/
#page-top #sec-news {
}
#page-top #sec-news .sec-title-sub {
    margin-bottom: 56px;
}
#page-top #sec-news .block-news-pickup {
    margin-bottom: 64px;
}
#page-top #sec-news .parts-btn {
    margin-top: 80px;
}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1247px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-top #mainvisual {
    }

    /*============================================================
    ページ内共通
    *============================================================*/

    /*============================================================
     セクション Services
    *============================================================*/
    #page-top #sec-services {
        background-position: top 880px right -4vw, top 2092px left -4vw;

    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-top #mainvisual {
        min-height: 680px;
        padding: 64px 0 0 0;
    }
    #page-top #mainvisual .info .catch .site-title {
        font-size: clamp(var(--rem20px), 5vw, var(--rem200px));
        letter-spacing: -0.035em;
    }
    #page-top #mainvisual .info .catch .site-title [class^="mv-anim"] {
        display: inline-block;
        width: fit-content;
        background: var(--common-color-black);
    }
    #page-top #mainvisual .info .catch .site-title [class^="mv-anim"]::after {
        display: none;
    }
    #page-top #mainvisual .info .catch .lead {
        font-size: var(--rem16px);
    }
    
    /* プロジェクト数
    ---------------------------------------- */
    #page-top #mainvisual .info .projects-cnt .notice {
        font-weight: 500;
        font-size: var(--rem14px);
        line-height: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    /*============================================================
     セクション About US
    *============================================================*/
    #page-top #sec-about-us {
        position: relative;
    }
    #page-top #sec-about-us .layout-flex {
        flex-direction: column;
    }
    #page-top #sec-about-us .layout-flex .info {
        width: 100%;
        max-width: none;
        position: relative;
        z-index: 10;
    }
    #page-top #sec-about-us .layout-flex .info .sec-lead {
        font-weight: 500;
        font-size: var(--rem18px);
        line-height: 200%;
        margin-bottom: 48px;
    }
    #page-top #sec-about-us .layout-flex .image {
        min-width: 280px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        transform: translate(-50%, -50%);
        mix-blend-mode: color-burn;
    }
    #page-top #sec-about-us .parts-btn {
        margin: 80px 0 0 0;
    }

    /*============================================================
     セクション Services
    *============================================================*/
    #page-top #sec-services {
        background-image: url(../images/common/logo-watermark.svg), url(../images/common/logo-watermark.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top 880px  right -4vw, top 1840px left -4vw;
        background-size: 60vw auto, 60vw auto;

    }

}