@charset "utf-8";


/*----------------------------------------*/
/* hero */
/*----------------------------------------*/

#hero{
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    padding: 80px 0 0 60px;
    margin: 0 auto;
}

/* --- スライダー共通 --- */
.slick01{
    padding: 0;
    margin: 0;
}

.slick01 li{
    list-style: none;
}

.slick01 img{
    object-fit: cover;
}

.slick01 .tablet{
    display: none!important;
}


/* メインスライダー（右） */
.hero_right{
    width: calc((100% - 40px) * 0.55);
}

.hero_right .slider_main,
.hero_right .slick01,
.hero_right .slick-list,
.hero_right .slick-track,
.hero_right .slick-slide{
    height: 100%;
}

.slider_main .slick01 img.pc{
    aspect-ratio: 1 / 0.932;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

/* サブスライダー（左） */
.hero_left{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 40px;
    width: calc((100% - 40px) * 0.45);
    padding-top: 40px;
}

/* 名称 */
.copy h2 span{
    display: inline;
    padding: 3px 10px 0px 10px;
    background-color: var(--main-green);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.copy h2 span:first-child{
    font-size: 3rem;
}

.copy h2 span:last-child{
    font-size: 5rem;
}

.copy .f_arial{
    margin-top: 40px;
    color: var(--main-green);
    font-size: 2.8rem;
}

/* 概要(Tab以下のみ) */
.tablet.about{
    display: none;
}


/*----------------------------------------*/
/* about */
/*----------------------------------------*/

#about p{
    font-size: 1.8rem;
    text-align: center;
}


/*----------------------------------------*/
/* contents */
/*----------------------------------------*/

#contents h3{
    margin: 0;
    color: rgba(85, 160, 85, 0.2);
    font-size: 7rem;
    font-weight: 400;
    line-height: 0.8;
}

.contents_list{
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.contents_btn{
    position: relative;
    width: calc((100% - 2px) / 3);
    overflow: hidden; /*ズーム時にはみ出さない*/
    cursor: pointer;
}

.contents_btn a{
    display: block;
}

.contents_btn a:hover{
    opacity: 1;
}

/* マスク */
.contents_btn a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.5;
    transition: opacity .6s ease; /*opacityのみ変化させる*/
    z-index: 1;
}

.contents_btn a:hover::before{
    opacity: 1;
}

.contents_btn img{
    transition: transform .6s ease; /*変化速度*/
}

.contents_btn:hover img{
    transform: scale(1.1);/*ホバー時に画像を拡大*/
}

.contents_btn img.pc{ /*PC～Tab*/
    display: block;
}

.contents_btn .contents_name{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 60px;
    color: #fff;
    font-size: 2.4rem;
    text-align: center;
    z-index: 2;
}

.contents_btn .view{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 250px;
    width: 100%;
    padding: 15px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    z-index: 2;
}


@media screen and (max-width: 1700px){
	/* --- 大型PC用1 --- */

    /*----------------------------------------*/
    /* hero */
    /*----------------------------------------*/

    /* 名称 */
    .copy h2 span:first-child{
        font-size: 1.76vw; /*3rem*/
    }
    
    .copy h2 span:last-child{
        font-size: 2.47vw; /*4.2rem*/
    }

    .copy .f_arial{
        font-size: 1.41vw; /*2.4rem*/
    }

}


@media screen and (max-width: 1440px){
	/* --- 大型PC用2 --- */

}


@media screen and (max-width: 1280px){
	/* --- 小型PC用 --- */

    /*----------------------------------------*/
    /* hero */
    /*----------------------------------------*/

    /* 名称 */
    .copy h2 span:first-child{
        font-size: 1.875vw; /*2.4rem*/
    }
    
    .copy h2 span:last-child{
        font-size: 2.81vw; /*3.6rem*/
    }

    .copy .f_arial{
        margin-top: 20px;
        font-size: 1.56vw; /*2rem*/
    }

    /*----------------------------------------*/
    /* contents */
    /*----------------------------------------*/

    .contents_btn .contents_name{
        top: 15%;
        padding: 0 20px;
        font-size: 1.56vw;
    }
}


@media screen and (max-width: 959px){
	/* --- タブレット＆スマホ用 --- */

    /*----------------------------------------*/
    /* hero */
    /*----------------------------------------*/

    #hero{
        padding: 60px 0 0 40px;
    }

    .hero_left{
        gap: 20px;
        padding-top: 20px;
    }

     /* 名称 */
    .copy h2 span:first-child{
        font-size: 1.46vw; /*1.4rem*/
    }
    
    .copy h2 span:last-child{
        font-size: 2.5vw; /*2.4rem*/
    }

    .copy .f_arial{
        margin-top: 20px;
    }


    /*----------------------------------------*/
    /* contents */
    /*----------------------------------------*/

    #contents h3{
        font-size: 4rem;
    }

    .contents_btn .contents_name{
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 20px;
        font-size: 1.4rem;
    }

    .contents_btn .view{
        max-width: 120px;
        padding: 5px;
    }

}


@media screen and (max-width: 769px){
	/* --- タブレット＆スマホ用 --- */

    /*----------------------------------------*/
    /* hero */
    /*----------------------------------------*/

    #hero{
        display: flex;
        flex-direction: column;
        padding: 60px 0 0 0;
    }

    /* スライダー共通 */
    .slick01 .pc{
        display: none!important;
    }

    .slick01 .tablet{
        display: block!important;
    }

    .hero_right{
        width: 90%;
        margin: 0 0 0 auto;
    }

    /* 概要(PCのみ) */
    .hero_right .about{
        display: none;
    }

    .hero_left{
        width: 100%;
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;
        width: 100%;
        padding: 0 20px;
    }

    .slider_sub{
        width: 40%;
    }

    /* 名称 */
    .copy h2 span:first-child{
        font-size: 2.34vw; /*1.8rem*/
    }
    
    .copy h2 span:last-child{
        font-size: 3.65vw; /*2.8rem*/
    }

    .copy .f_arial{
        color: var(--main-green);
        font-size: 1.4rem;
    }

    /* 概要(Tab以下) */
    .tablet.about{
        display: block;
        max-width: 100%;
        width: 100%;
        padding: 0 20px;
    }


    /*----------------------------------------*/
    /* about */
    /*----------------------------------------*/

    #about p{
        font-size: 1.6rem;
        text-align: left;
    }

}


@media screen and (max-width: 540px){
	/* --- スマホ用 --- */

    .hero_left{
        flex-direction: column;
        justify-content:flex-start;
        width: 100%;
    }

    .slider_sub{
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
    }

    /* 名称 */
    
    /* 名称 */
    .copy h2 span:first-child{
        font-size: 4.27vw; /*1.6rem*/
    }
    
    .copy h2 span:last-child{
        font-size: 6.4vw; /*2.4rem*/
    }

    .copy .f_arial{
        margin-top: 10px;
        color: var(--main-green);
        font-size: 1.4rem;
    }


    /*----------------------------------------*/
    /* contents */
    /*----------------------------------------*/

    .contents_list{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .contents_btn{
        position: relative;
        width: 100%;
    }

    .contents_btn img.pc{ /*PC～Tab*/
        display: block;
    }

    .contents_btn .contents_name{
        position: absolute;
        top: 25%;
        left: 50%;
        padding: 0 10px;
    }

    .contents_btn .view{
        position: absolute;
        top: 70%;
        left: 50%;
    }

    .contents_btn img.pc{ /*PC～Tab*/
        display: none;
    }

    .contents_btn img.sp{ /*SP*/
        display: block;
    }
    
    
}