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

page-test-gsap.css　TOP 検証（GSAP-ScrollTrigger）用css

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

/*============================================================
 検証用調整
*============================================================*/
#page-test-gsap3 {
    padding-top: 0;
}

#page-test-gsap3 #breadcrumb,
#page-test-gsap3 #mainvisual {
    display: none;
}

#page-test-gsap3 #main-contents {
    /* padding: var(--common-vh) 0 0 0; */
}

#page-test-gsap3 #fixed-header {
    display: none;
}

/*============================================================
 パララックス
*============================================================*/
#page-test-gsap3 .parallax-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: var(--common-vh);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
#page-test-gsap3.parallax-01 #parallax-01 {
    display: block;
    background-image: url(../images/test/sec-01-bg.webp);
}
#page-test-gsap3.parallax-03 #parallax-03 {
    display: block;
    background-image: url(../images/test/sec-03-bg.webp);
}

/*============================================================
 メインビジュアル
*============================================================*/
#page-test-gsap3 .section {
    width: 100%;
    margin-bottom: 0;
}

#page-test-gsap3 #test-mainvisual {
    width: 100%;
    height: var(--common-vh);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/test/mainvisual-base.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
#page-test-gsap3 #test-mainvisual .step-01 {
    width: 100%;
    height: 100%;
    background-image: url(../images/test/mainvisual-step-01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}


/*============================================================
 セクション 01
*============================================================*/
#page-test-gsap3 #sec-01 {
    height: 600px;
    padding: 80px 0;
}

/*============================================================
 セクション 02
*============================================================*/
#page-test-gsap3 #sec-02 {
    padding: 80px 0;
    background-color:#f5f5f5;
}

#page-test-gsap3 #sec-02 .inner {
    max-width: 1440px;
}
#page-test-gsap3 #sec-02 .block-sticky {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}
#page-test-gsap3 #sec-02 .block-sticky .sticky {
    position:-webkit-sticky; 
    position:sticky;
    top:0;
    width: 200px;
    height: 300px;
    background-color: black;
}
#page-test-gsap3 #sec-02 .block-sticky .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
#page-test-gsap3 #sec-02 .block-sticky .content .item {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
#page-test-gsap3 #sec-02 .block-sticky .content .item .image {
    width: 320px;
    height: 240px;
    background-color: #ccc;
}
#page-test-gsap3 #sec-02 .block-sticky .content .item .info {
    flex: 1;
}

/*============================================================
 セクション 03
*============================================================*/
#page-test-gsap3 #sec-03 {
    height: 600px;
    padding: 80px 0;
}

/*============================================================
 セクション 04
*============================================================*/
#page-test-gsap3 #sec-04 {
    height: 800px;
    padding: 80px 0;
    background-color: #f5f5f5;
}